/* ==========================================================================
   SiamInTravel — component layer
   Brand Guidelines Edition 01, 2026.

   Tokens live in theme.json and arrive here as --wp--preset--* and
   --wp--custom--*. This file only assembles them into the documented
   devices. If you need a new value, add a token — do not hardcode here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accent binding

   One accent per piece; Marigold and Deep Red never share a layout (p.16).
   functions.php decides once per request and sets a body class. Everything
   downstream reads --sit-accent and therefore cannot pick the wrong one.
   -------------------------------------------------------------------------- */

.sit-accent-b2c {
	--sit-accent: var(--wp--preset--color--accent-consumer);
	--sit-accent-on: var(--wp--preset--color--text-primary); /* 14.6:1 on Marigold */
}

.sit-accent-b2b {
	--sit-accent: var(--wp--preset--color--accent-trade);
	--sit-accent-on: var(--wp--preset--color--surface-page);
}

/* --------------------------------------------------------------------------
   2. Measure and rhythm

   Body copy caps at 66ch. Sections breathe at clamp(56px, 7vw, 120px).
   "If a layout feels crowded, remove an element — never shrink the gaps." (p.21)
   -------------------------------------------------------------------------- */

.sit-measure {
	max-width: var(--wp--custom--measure);
}

.sit-band {
	padding-block: var(--wp--preset--spacing--band);
}

/* --------------------------------------------------------------------------
   3. Eyebrow

   12 / 500 / .18em, uppercase. Takes the accent on dark fields, brand purple
   on light ones — never Marigold on white, which fails at every size (p.17).
   -------------------------------------------------------------------------- */

.sit-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary);
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* The block-style classes carry the `is-style-` prefix WordPress adds when
   register_block_style() runs — without it these two selectors match nothing,
   and an eyebrow on a dark field fell back to brand purple on near-black at
   roughly 1.4:1. front-page.html was hardcoding textColor:"accent-consumer"
   in two places to work around it, which is how a Marigold value ended up
   inside a layout that might be running the Deep Red accent. */
.is-style-sit-field-dark .sit-eyebrow,
.is-style-sit-field-purple .sit-eyebrow,
.sit-on-photo .sit-eyebrow {
	color: var(--sit-accent);
}

/* --------------------------------------------------------------------------
   4. Fields

   A "field" is a full-bleed colour band. Purple is the brand's own ground;
   the dark field is where B2B and the lattice live.
   -------------------------------------------------------------------------- */

.is-style-sit-field-purple {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
}

.is-style-sit-field-dark {
	background-color: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--surface-page);
}

.is-style-sit-field-purple :is(h1, h2, h3, h4, h5),
.is-style-sit-field-dark :is(h1, h2, h3, h4, h5) {
	color: inherit;
}

.is-style-sit-card-tint {
	background-color: var(--wp--preset--color--surface-tint);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   5. Buttons

   Pill is the most recognisable UI signature (p.21). 44px minimum touch
   target, always. Marigold is legal as a filled pill because the label sits
   in near-black on top of it — it is never legal as text on white.
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.sit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--control--touch-min);
	padding-inline: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--cta);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.is-style-sit-button-accent > .wp-block-button__link {
	background-color: var(--sit-accent);
	color: var(--sit-accent-on);
}

.is-style-sit-button-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--brand-primary);
	border: var(--wp--custom--border--strong) solid currentColor;
}

.is-style-sit-button-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
}

/* On a purple or dark field an outline button inverts. */
.is-style-sit-field-purple .is-style-sit-button-outline > .wp-block-button__link,
.is-style-sit-field-dark .is-style-sit-button-outline > .wp-block-button__link {
	color: var(--wp--preset--color--surface-page);
}

.is-style-sit-field-purple .is-style-sit-button-outline > .wp-block-button__link:hover,
.is-style-sit-field-dark .is-style-sit-button-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface-page);
	color: var(--wp--preset--color--brand-primary);
}

/* --------------------------------------------------------------------------
   6. Focus

   A single, loud, consistent focus ring. Digital-only purple (p.15) exists
   for exactly this job.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--border--strong) solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* --------------------------------------------------------------------------
   7. Inputs

   6px radius, 44px minimum, 1px hairline. Nothing else rounds.
   -------------------------------------------------------------------------- */

.sit-input,
input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="date"], [type="search"], [type="password"]),
select,
textarea {
	min-height: var(--wp--custom--control--touch-min);
	padding: 10px var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-page);
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--brand);
	font-size: var(--wp--preset--font-size--body);
	width: 100%;
}

textarea {
	min-height: calc(var(--wp--custom--control--touch-min) * 2.5);
}

/* --------------------------------------------------------------------------
   8. The Aperture

   A frame for photography. Three crops, all on the 14px card radius, so
   imagery and interface share one corner (p.22).
   -------------------------------------------------------------------------- */

.is-style-sit-aperture-full img {
	border-radius: var(--wp--custom--radius--card);
}

.is-style-sit-aperture-point img {
	border-radius: var(--wp--custom--radius--card);
	border-top-right-radius: 0;
}

.is-style-sit-aperture-seat img {
	border-radius: var(--wp--custom--radius--card);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Type over photography always sits on a scrim (p.17). */
.sit-scrim {
	position: relative;
	isolation: isolate;
}

.sit-scrim > img,
.sit-scrim > picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sit-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgb(26 10 28 / 0.78) 0%,
		rgb(26 10 28 / 0.45) 38%,
		rgb(26 10 28 / 0.05) 72%,
		rgb(26 10 28 / 0) 100%
	);
	pointer-events: none;
}

.sit-scrim > .sit-scrim__content {
	position: relative;
	z-index: 2;
	color: var(--wp--preset--color--surface-page);
}

/* --------------------------------------------------------------------------
   9. The Thread

   One unbroken line, entering, pausing at each waypoint, leaving. It means
   one team, start to finish, nothing dropped. 1.5px at 50% opacity, always —
   behind and beside content, never across the subject at full strength (p.23).
   -------------------------------------------------------------------------- */

.sit-thread {
	--sit-thread-color: var(--wp--preset--color--brand-secondary);
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	opacity: var(--wp--custom--thread--opacity);
	pointer-events: none;
}

.sit-thread path {
	fill: none;
	stroke: var(--sit-thread-color);
	stroke-width: var(--wp--custom--thread--width);
	stroke-linecap: round;
}

/* Every thread ends in a node, at both ends. The node is the emblem's sun. */
.sit-thread circle {
	fill: var(--wp--preset--color--accent-trade);
	stroke: none;
}

.is-style-sit-field-purple .sit-thread,
.is-style-sit-field-dark .sit-thread {
	--sit-thread-color: var(--wp--preset--color--surface-page);
}

/* The foot rule on documents and stationery: node to node, nothing between. */
.sit-thread-rule {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	opacity: var(--wp--custom--thread--opacity);
}

.sit-thread-rule::before,
.sit-thread-rule::after {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-trade);
	flex: 0 0 auto;
}

.sit-thread-rule > span {
	flex: 1 1 auto;
	block-size: var(--wp--custom--thread--width);
	background-color: var(--wp--preset--color--brand-secondary);
}

/* --------------------------------------------------------------------------
   10. The Lattice

   Quiet structure. Three fixed sizes, 1px hairlines, 22%. Pick the token;
   never rescale it. Never behind body copy, never on photography, never as
   the only content of a surface (p.24).
   -------------------------------------------------------------------------- */

.sit-lattice {
	position: relative;
	isolation: isolate;
}

.sit-lattice::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: var(--wp--custom--lattice--opacity);
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent 0,
			transparent calc(var(--sit-lattice-size) - var(--wp--custom--lattice--hairline)),
			currentColor calc(var(--sit-lattice-size) - var(--wp--custom--lattice--hairline)),
			currentColor var(--sit-lattice-size)
		),
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			transparent calc(var(--sit-lattice-size) - var(--wp--custom--lattice--hairline)),
			currentColor calc(var(--sit-lattice-size) - var(--wp--custom--lattice--hairline)),
			currentColor var(--sit-lattice-size)
		);
	pointer-events: none;
}

.sit-lattice--sm   { --sit-lattice-size: var(--wp--custom--lattice--sm); }
.sit-lattice--dark { --sit-lattice-size: var(--wp--custom--lattice--dark); }
.sit-lattice--lg   { --sit-lattice-size: var(--wp--custom--lattice--lg); }

/* --------------------------------------------------------------------------
   11. Cards

   14px radius, 1px hairline, shadow only where elevation means something.
   -------------------------------------------------------------------------- */

/* A card sits slightly off the page rather than being drawn on it. The
   shadow used to appear only on hover, which meant a grid of twelve read as
   flat boxes ruled in hairlines until you moved the mouse — and read that way
   permanently on a phone, where there is no hover at all. */
.sit-card {
	background-color: var(--wp--preset--color--surface-page);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--sm);
	transition:
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--standard),
		transform var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

/* Hover now has somewhere to go: it lifts, rather than introducing a shadow
   that was not there a moment ago. */
.sit-card:hover {
	box-shadow: var(--wp--preset--shadow--xl);
}

/* The destination tiles are photographs, not panels — they carry no border,
   so the shadow is the only thing separating a dark image from the page. */
.sit-rail__place,
.sit-knows__place {
	box-shadow: var(--wp--preset--shadow--sm);
	transition: box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

.sit-rail__place:hover,
.sit-knows__place:hover {
	box-shadow: var(--wp--preset--shadow--xl);
}

.sit-card__body {
	padding: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   12. Data and prices

   Tabular figures everywhere a number has to be compared or trusted (p.32).
   -------------------------------------------------------------------------- */

.sit-figure,
.sit-price,
.woocommerce-Price-amount,
td.woocommerce-table__product-total,
.sit-quote-table td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.sit-price {
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 600;
	line-height: 1.06;
	color: var(--wp--preset--color--brand-primary);
}

.sit-data-label {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

/* --------------------------------------------------------------------------
   13. Motion

   Everything is a reveal or a move. Never a bounce. Content rises 16px and
   fades in over 420–720ms, staggered 60ms (p.40).
   -------------------------------------------------------------------------- */

.sit-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--wp--custom--dur--reveal) var(--wp--custom--ease--entrance),
		transform var(--wp--custom--dur--reveal) var(--wp--custom--ease--entrance);
	transition-delay: calc(var(--sit-reveal-index, 0) * var(--wp--custom--dur--stagger));
}

.sit-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* No motion is always a valid rendering of this brand. */
@media (prefers-reduced-motion: reduce) {
	.sit-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   14. Logo clear space

   x equals the height of the emblem's inner sun. Nothing enters that zone:
   no type, no rule, no image edge, no partner logo, no page trim. The margin
   from a page or viewport edge is 2x (p.13).
   -------------------------------------------------------------------------- */

.sit-logo {
	display: inline-block;
	padding: var(--sit-logo-x, 12px);
}

.sit-logo--horizontal { min-width: 140px; }
.sit-logo--square     { min-width: 90px; }
.sit-logo--emblem     { min-width: 24px; }

.sit-logo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0; /* the mark never picks up the card radius */
}

/* --------------------------------------------------------------------------
   15. Protest Riot

   Short destination expressions, campaign words, editorial accents. Never
   paragraphs, quotations, invoices, contracts, dense UI, accessibility-critical
   information, long headlines, corporate presentations. Never below 44px,
   never more than five words, never more than once per piece (p.20).
   -------------------------------------------------------------------------- */

.sit-display {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(44px, 8vw, 96px);
	font-weight: 400;
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Documents switch it off entirely. */
.sit-document .sit-display {
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 600;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   16. The booking block

   Photo, price, proof — in that order (p.36). The tax note and the pax
   minimum sit beside the figure, never in caption copy, because a traveller
   should never meet either for the first time at checkout.
   -------------------------------------------------------------------------- */

/* Tightened so the whole form clears a laptop viewport without its own
   scrollbar: 32/24 padding and gaps cost about 90px of height across the
   stack, and the form was overflowing by less than that. Nothing here is
   below the 44px touch-target floor — only the space between things moved. */
/*
 * The same soft pink as the enquiry and partner forms, so every form on the
 * site reads as a form. #FFF4FE is surface-tint taken most of the way to
 * white: enough to lift the booking panel off the page beside a photograph,
 * light enough that white inputs still sit clearly on top of it and the
 * price above it stays the loudest thing in the box.
 */
.sit-booking {
	border: var(--wp--custom--border--hairline) solid #F3D9F4;
	border-radius: var(--wp--custom--radius--card);
	background-color: #FFF4FE;
	padding: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: 420px;
}

/* White on the pink, not pink on pink: an input has to look like the one
   thing in the panel you are meant to fill in. */
.sit-booking :is(input[type="date"], input[type="number"], select) {
	background-color: var(--wp--preset--color--surface-page);
	border-color: #E7C4E9;
}

.sit-booking__price .sit-price {
	margin: var(--wp--preset--spacing--10) 0 0;
}

.sit-booking__tax,
.sit-booking__pax-note,
.sit-booking__child-note {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
}

/*
 * The asterisk on a "from" fare that only a larger party actually pays.
 *
 * Marigold rather than inherited, and full-height rather than a true
 * superscript: a grey star at 60% against a 42px figure is invisible at
 * arm's length, and a disclosure nobody notices is not a disclosure. It sits
 * on the accent because the condition it points at is on the line below.
 */
/* The card's version of the booking form's asterisk. Same meaning, smaller
   stage — the condition itself is spelled out on the package page. */
.sit-card__star {
	color: var(--sit-accent);
	font-size: .62em;
	font-weight: 700;
	vertical-align: super;
	line-height: 1;
	margin-inline-start: 1px;
}

.sit-price__star {
	color: var(--sit-accent);
	font-size: 0.5em;
	font-weight: 700;
	vertical-align: super;
	line-height: 1;
	margin-inline-start: 2px;
}

/* An editorial to-do. Only ever rendered for a signed-in editor — the public
   never sees it — so it can afford to be loud. Marigold is the consumer
   accent, and this is an internal mark, so it takes the trade red instead. */
.sit-todo {
	margin: var(--wp--preset--spacing--30) 0;
	padding: 10px 14px;
	border-left: 3px solid var(--wp--preset--color--accent-trade);
	background: var(--wp--preset--color--surface-alt);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

.sit-todo strong {
	color: var(--wp--preset--color--accent-trade);
}

/* What a child pays, said before anyone has to ask. */
.sit-booking__child-note {
	line-height: 1.45;
	max-width: 42ch;
}

/* Inclusions — 4 to 6, one word each, line icons only. */
.sit-inclusions {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0;
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.sit-inclusion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
	min-width: 56px;
}

.sit-inclusion__icon {
	color: var(--wp--preset--color--brand-primary);
}

/* On a dark or purple field the icons invert with their surroundings. */
.is-style-sit-field-dark .sit-inclusion__icon,
.is-style-sit-field-purple .sit-inclusion__icon,
.sit-on-photo .sit-inclusion__icon {
	color: var(--wp--preset--color--surface-page);
}

.sit-booking__fields {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.sit-field {
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.sit-field label {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

/* Check-in is a choice; check-out is a consequence. They sit side by side so
   the relationship is visible, and the derived one is styled as a statement
   rather than a control so nobody tries to change it. */
.sit-booking__dates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

/* A native date input carries an intrinsic width — the dd/mm/yyyy mask plus
   the calendar button — and a grid item defaults to min-width:auto, so it
   refuses to shrink below that and spills over the next column. The check-in
   field was overlapping "4 nights later". Both tracks are told they may
   shrink, and the control is told to fill whatever it is given. */
.sit-booking__dates > * {
	min-inline-size: 0;
}

.sit-booking__dates input,
.sit-booking__dates output {
	inline-size: 100%;
	min-inline-size: 0;
	box-sizing: border-box;
}

@media (max-width: 480px) {
	.sit-booking__dates {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sit-field--derived output {
	display: block;
	padding: 10px 0;
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-primary);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
}

/* Until a check-in date is picked there is no check-out to state, so it says
   what it is waiting for instead of showing a placeholder date. */
.sit-field__placeholder {
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
}

.sit-booking__party {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.sit-booking__party legend {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.sit-field--count {
	grid-template-columns: minmax(0, 1fr) 92px;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
}

/* Hotel category. Sits above the counters because it sets the rate every
   head is then multiplied by. */
.sit-field--tier select {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: var(--wp--custom--control--height);
	padding-inline: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	background: var(--wp--preset--color--surface-page);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-primary);
}

/* Three counters across instead of three stacked rows.
   Stacked, each traveller class cost a label, a hint and a 44px control on
   its own line — roughly 190px in a form that has to clear the fold beside
   the itinerary. Side by side they cost one row between them. */
.sit-party-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

/* Grid children default to min-width:auto, so a number input's intrinsic
   width wins over its track and the last box pushes out through the edge of
   the column. Same failure as the check-in/check-out pair. */
.sit-party-grid > * {
	min-inline-size: 0;
}

.sit-party-grid .sit-field--count {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 6px;
	min-inline-size: 0;
}

.sit-party-grid .sit-field--count label {
	grid-column: 1;
	font-size: 13px;
	line-height: 1.25;
}

/* Beats the two-column rule above, which parks the control in column 2 and
   spans it down both rows. */
/* Half the height of the stacked version. Three of these are only worth the
   row they save if the row is short, and a counter that never goes past about
   eight needs far less box than a free-text field. box-sizing and an explicit
   min-block-size are both needed: the inherited touch-min would otherwise
   quietly win and the padding would push it back out past the column. */
.sit-party-grid .sit-field--count input {
	grid-column: 1;
	grid-row: auto;
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	block-size: 32px;
	min-block-size: 0;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--20);
	text-align: center;
}

/* A finger is not a mouse. Where the pointer is coarse the control goes back
   to the 44px minimum, which costs one row on a phone — where the form has a
   whole screen to itself anyway. */
@media (pointer: coarse) {
	.sit-party-grid .sit-field--count input {
		block-size: var(--wp--custom--control--touch-min);
	}
}

.sit-party-grid .sit-field__hint {
	grid-column: 1;
	font-size: 12px;
	line-height: 1.3;
}

/* One step down the scale from the h1 default: a tour name is a label for
   what is beside it, not the loudest thing on the page. */
.sit-pkg-columns .wp-block-post-title {
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.08;
}

.sit-field--count label {
	grid-column: 1;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
}

.sit-field--count input {
	grid-column: 2;
	grid-row: 1 / span 2;
	text-align: center;
}

/* The age rule belongs beside the field it governs, not in a footnote. */
.sit-field__hint {
	grid-column: 1;
	font-size: 13px;
	line-height: 1.35;
	color: var(--wp--preset--color--text-secondary);
}

.sit-booking__estimate {
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

/* Itemised only when there is more than one class of traveller — a party of
   two adults does not need to be told it is a party of two adults. */
.sit-booking__breakdown {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
	font-size: 14px;
	color: var(--wp--preset--color--text-secondary);
}

.sit-booking__breakdown li {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.sit-booking__breakdown strong {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-primary);
}

.sit-booking__estimate output {
	font-size: 27px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-primary);
}

/* Consent reads as a sentence, not as a form control with a label bolted on. */
.sit-field--consent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--20);
}

.sit-field--consent input {
	inline-size: 18px;
	block-size: 18px;
	margin-top: 2px;
}

.sit-field--consent label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--text-secondary);
}

.sit-field--consent a {
	color: var(--wp--preset--color--brand-primary);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* The qualifier sits on the same line as a 27px figure. At body-sm it read as
   part of the number; a step down makes it the footnote it is, without
   dropping it — the fare must never be mistaken for the amount payable. */
.sit-booking__estimate-note {
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.3;
	color: var(--wp--preset--color--text-secondary);
}

.sit-booking .single_add_to_cart_button {
	width: 100%;
}

/* --------------------------------------------------------------------------
   The tour page: 60/40, with the booking form following you down

   The left column is the tour — name, photographs, description, then the
   days. The right is the form. Below 1024px the two stack and the form comes
   second, because on a phone you read before you book.
   -------------------------------------------------------------------------- */

.sit-pkg-columns {
	align-items: flex-start;
}

@media (min-width: 1024px) {
	/*
	 * align-self is what makes this work. A column is a flex item and
	 * stretches to the row's full height by default, so it is never taller
	 * than its container and sticky has nothing to stick within — the form
	 * would simply sit still. Shrinking the column to its content gives the
	 * scroll the room it needs.
	 *
	 * The offset clears the sticky header and matches the
	 * scroll-padding-block-start used for in-page anchors.
	 */
	.sit-pkg-columns > .wp-block-column:last-child {
		position: sticky;
		inset-block-start: 88px;
		align-self: flex-start;
		/* Never taller than the viewport, or the bottom of the form becomes
		   unreachable on a short screen. */
		max-block-size: calc(100dvh - 108px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* -- The gallery ----------------------------------------------------------- */

.sit-pkg-gallery {
	position: relative;
	isolation: isolate;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface-dark);
	aspect-ratio: 3 / 2;
	margin-block-end: var(--wp--preset--spacing--50);
}

.sit-pkg-gallery__slides {
	list-style: none;
	margin: 0;
	padding: 0;
	block-size: 100%;
}

.sit-pkg-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 700ms var(--wp--custom--ease--standard);
}

.sit-pkg-gallery__slide.is-current {
	opacity: 1;
	pointer-events: auto;
}

.sit-pkg-gallery img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* One photograph is not a slider. */
.sit-pkg-gallery--single img {
	position: static;
}

@media (prefers-reduced-motion: reduce) {
	.sit-pkg-gallery__slide {
		transition-duration: 1ms;
	}
}

/* -- The rails ------------------------------------------------------------- */

.sit-rail-block {
	margin-block-start: var(--wp--preset--spacing--band);
}

.sit-rail__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
}

.sit-rail__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--brand-primary);
}

.sit-rail__lede {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-inline-size: 62ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
}

.sit-rail__nav {
	display: flex;
	gap: 8px;
	flex: none;
}

/* Hidden until destination.js binds the scroll — an arrow that does nothing
   is worse than no arrow. The rail itself scrolls without them. */
[data-sit-rail]:not([data-enhanced]) .sit-rail__nav {
	display: none;
}

.sit-rail__arrow {
	inline-size: 40px;
	block-size: 40px;
	display: grid;
	place-items: center;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: 999px;
	background: var(--wp--preset--color--surface-page);
	color: var(--wp--preset--color--brand-primary);
	cursor: pointer;
	transition: border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-rail__arrow:hover:not([disabled]) {
	border-color: var(--wp--preset--color--brand-secondary);
}

.sit-rail__arrow[disabled] {
	opacity: .35;
	cursor: default;
}

.sit-rail__arrow svg {
	inline-size: 18px;
	block-size: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sit-rail {
	list-style: none;
	margin: 0;
	padding: 0 0 6px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--wp--preset--spacing--40)) / 3);
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.sit-rail > li {
	scroll-snap-align: start;
	min-inline-size: 0;
}

@media (max-width: 1024px) {
	.sit-rail { grid-auto-columns: calc((100% - var(--wp--preset--spacing--40)) / 2); }
}

@media (max-width: 640px) {
	.sit-rail { grid-auto-columns: 82%; }
}

/* Destination tiles in a rail: the same object as the index grid, laid on
   its side. */
.sit-rail__place {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface-dark);
	text-decoration: none;
}

.sit-rail__place img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

@media (hover: hover) {
	.sit-rail__place:hover img { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.sit-rail__place img { transition: none; }
	.sit-rail__place:hover img { transform: none; }
}

/*
 * The tile is taller than a 4:3 crop now: a name, a line of why, and a count.
 * The scrim carries all three rather than the name alone, and it has to be
 * deep enough that white type survives a bright beach photograph underneath.
 */
.sit-rail__place-text {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: block;
	padding: 46px 14px 14px;
	background: linear-gradient(to top, rgb(26 10 28 / .88) 35%, rgb(26 10 28 / 0));
}

.sit-rail__place-name {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--preset--color--surface-page);
	text-shadow: 0 1px 3px rgb(26 10 28 / .55);
}

/* Two lines maximum. A third pushes the name off the bottom of the tile. */
.sit-rail__place-note {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin-block-start: 4px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: rgb(255 255 255 / .82);
	text-shadow: 0 1px 3px rgb(26 10 28 / .55);
}

/* Same badge on the homepage carousel, so a count reads the same everywhere. */
.sit-knows__media {
	position: relative;
}

.sit-knows__pill {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-page);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--wp--preset--color--brand-primary);
	box-shadow: 0 1px 4px rgb(26 10 28 / .28);
}

/*
 * The count, as a pill over the photograph. Opaque rather than translucent:
 * a number that has to be read at a glance cannot depend on what is behind it.
 */
.sit-rail__place-pill {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-page);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--wp--preset--color--brand-primary);
	box-shadow: 0 1px 4px rgb(26 10 28 / .28);
}

/* --------------------------------------------------------------------------
   17. The package page

   A destination header, then days that read 70/30 (p.33).
   -------------------------------------------------------------------------- */

.sit-package-header {
	margin: 0;
	position: relative;
	min-height: clamp(280px, 38vw, 460px);
	display: grid;
}

.sit-package-header__image {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sit-package-header__caption {
	grid-area: 1 / 1;
	align-self: end;
	padding: var(--wp--preset--spacing--60);
}

.sit-package-header__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--headline);
	font-weight: 600;
	line-height: 1.06;
	color: inherit;
}

.sit-highlights {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.sit-highlights li {
	position: relative;
	padding-left: var(--wp--preset--spacing--40);
}

/* The node again — the emblem's sun, at the head of each claim. */
.sit-highlights li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-trade);
}

/* -- The 70/30 day rows -------------------------------------------------- */

.sit-itinerary {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.sit-itinerary__day {
	display: grid;
	grid-template-columns: 70% 30%;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.sit-itinerary__narrative {
	position: relative;
	padding-left: var(--wp--preset--spacing--40);
}

/*
 * The Thread runs down the narrative column, node to node — entering,
 * pausing at each day, leaving. 1.5px at 50%, as everywhere else.
 */
.sit-itinerary__narrative::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.75em;
	bottom: calc( var(--wp--preset--spacing--70) * -1 );
	width: var(--wp--custom--thread--width);
	background-color: var(--wp--preset--color--brand-secondary);
	opacity: var(--wp--custom--thread--opacity);
}

.sit-itinerary__day:last-child .sit-itinerary__narrative::before {
	bottom: auto;
	height: 0;
}

.sit-itinerary__narrative::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-trade);
}

.sit-itinerary__label {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary);
}

.sit-itinerary__body {
	max-width: var(--wp--custom--measure);
}

.sit-itinerary__body > p:first-child {
	margin-top: 0;
}

/*
 * Where tonight is spent, one line per accommodation type. The type is the
 * quiet half and the hotel is the answer, so the type reads as a label.
 */
.sit-stay {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
}

.sit-stay > li + li {
	margin-top: 0.25em;
}

.sit-stay > li[hidden] {
	display: none;
}

.sit-stay__tier {
	display: inline-block;
	min-width: 5.5em;
	color: var(--wp--preset--color--brand-primary);
	font-weight: 500;
}

/* The one-line total above the day list. */
.sit-itinerary__meals-total {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
}

/*
 * Meals on this day. Quiet by design — a traveller scanning the itinerary
 * for what is fed and when should find it without it competing with the
 * narrative, so: small, outlined, one line, never a coloured badge wall.
 */
.sit-meals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.sit-meals li {
	padding: 0.2em 0.7em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-primary) 30%, transparent);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--body-sm);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brand-primary);
	white-space: nowrap;
}

/*
 * Two or three small destination images, stacked with 16px gaps.
 * An empty column is a valid rendering — no image, no filler.
 */
.sit-itinerary__media {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: start;
}

.sit-itinerary__media:empty {
	display: none;
}

.sit-itinerary__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--radius--card);
}

/*
 * Photograph credits at the foot of a package description.
 *
 * The smallest size the scale has (12px, the eyebrow step) and the same size
 * as the per-image credit further up the page, so the two readings of the
 * same obligation match. It is a footnote that has to be there, not a section
 * anybody came for — at body size it was competing with the fare.
 */
.entry-content .sit-credits {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

.entry-content .sit-credits h3 {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block-end: 6px;
	color: inherit;
}

.entry-content .sit-credits ul {
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

.entry-content .sit-credits li {
	margin-block: 2px;
}

/*
 * Tables written into a package description — the hotel-and-fare grid a
 * supplier's rate sheet turns into. WordPress ships no table styling of its
 * own here, so without this the cells butt together and "3 Star Standard
 * Seasons Siam" reads as one hotel name rather than a grade and a hotel.
 */
.entry-content table {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block: var(--wp--preset--spacing--30);
	font-size: 15px;
}

.entry-content thead th {
	text-align: start;
	padding: 10px 16px 10px 0;
	border-block-end: 2px solid var(--wp--preset--color--brand-primary);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.entry-content tbody td {
	padding: 12px 16px 12px 0;
	border-block-end: 1px solid var(--wp--preset--color--hairline);
	vertical-align: baseline;
}

/* The fare column reads as a column of money, not a column of words. */
.entry-content tbody td:last-child,
.entry-content thead th:last-child {
	padding-inline-end: 0;
	text-align: end;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.entry-content tbody tr:last-child td {
	border-block-end: none;
}

/* Never let a wide table push the page sideways. */
.entry-content > table {
	display: block;
	overflow-x: auto;
}

/*
 * A photograph that owes an attribution carries it here, under the frame.
 * Small and quiet — it is a legal obligation rather than a caption, so it
 * should be readable without competing with the day it sits beside.
 */
.sit-itinerary__figure {
	margin: 0;
	display: grid;
	gap: 6px;
}

.sit-itinerary__credit {
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--text-secondary);
}

@media (max-width: 781px) {
	.sit-itinerary__day {
		grid-template-columns: 1fr;
	}

	.sit-itinerary__media {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------------
   18. Homepage

   Desire, then proof, then action (p.26).
   -------------------------------------------------------------------------- */

.sit-header .sit-logo--horizontal {
	padding: 0;
	line-height: 0;
}

.sit-header .sit-logo--horizontal img {
	width: auto;

	/*
	 * Fluid rather than fixed. The mark was 44px against 16px of padding,
	 * which read as a utility bar rather than a masthead — the logo is the
	 * only piece of brand in the header and it was the smallest thing in it.
	 * It now grows with the viewport and stops at 60px, which is as tall as it
	 * can go before the sticky header starts eating the first screen.
	 */
	height: clamp(46px, 4.4vw, 60px);
	max-width: 100%;
}

.sit-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	min-height: clamp(360px, 52vw, 620px);
}

.sit-hero__image {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sit-hero__content {
	grid-area: 1 / 1;
	align-self: end;
	padding: clamp(24px, 5vw, 64px);
	max-width: 40ch;
}

.sit-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 0.94;
	letter-spacing: -0.02em;
	color: inherit;
}

.sit-hero__support {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
	font-size: 17px;
	line-height: 1.6;
	color: inherit;
}

/* The hero CTA is a plain anchor, so it needs the pill applied directly. */
.sit-button--accent {
	background-color: var(--sit-accent);
	color: var(--sit-accent-on);
}

.sit-button--accent:hover {
	filter: brightness(0.94);
}

/* -- Destinations -------------------------------------------------------- */

/* Four across, always — fifteen destinations fill three full rows and leave
   one gap on the fourth, which reads as a set with room in it rather than as
   a ragged auto-fit that changes count with every viewport. Steps down rather
   than shrinking: four 180px tiles do not fit a phone. */
.sit-destinations {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

@media (max-width: 1024px) {
	.sit-destinations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	.sit-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
	.sit-destinations { grid-template-columns: minmax(0, 1fr); }
}

/* The claim under the name is the reason to click one tile over another, so
   it sits in the tile rather than waiting on the destination page. */
.sit-destinations p {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--text-secondary);
}

.sit-destinations a,
.sit-destinations > li > .sit-destinations__tile {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
}

/* Used by the season tabs, the slider dots and the account nav, and never
   defined here — block themes do not reliably inherit core's copy of it, and
   without it these labels render as visible text beside the control they
   describe. */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   The index hero

   Reuses the destination hero's slider parts — the scrim, the cross-fade, the
   arrows and the dots are all already built and already driven by
   destination.js. What it does not reuse is the 70/30 grid: this one is a
   single full-width band, so it has to carry its own height, which on the
   destination page comes from .sit-dhero.
   -------------------------------------------------------------------------- */

.sit-index-hero {
	/* Taller than the destination hero: this one carries a title, a
	   proposition and a paragraph rather than a single name. */
	--sit-hero-h: clamp(440px, 58vw, 640px);

	position: relative;
	margin-bottom: var(--wp--preset--spacing--70);
}

.sit-index-hero,
.sit-index-hero *,
.sit-index-hero *::before,
.sit-index-hero *::after {
	box-sizing: border-box;
}

.sit-index-hero .sit-dhero__media {
	block-size: var(--sit-hero-h);
}

/* One overlay for the whole slider, not one per slide: the words belong to
   the page, and a heading that changed every six seconds could not be read.
   pointer-events are off so the arrows underneath stay clickable across the
   full width of the band. */
.sit-index-hero__overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	padding: clamp(20px, 3vw, 48px);
	padding-inline-end: clamp(20px, 8vw, 140px);
	max-inline-size: 62ch;
	color: var(--wp--preset--color--surface-page);
	pointer-events: none;
}

/* The headline and subhead tokens are fixed at 60px and 42px with no clamp —
   fine in a 1280px column, far too large stacked over a photograph on a
   phone. The hero scales between the two instead. */
.sit-index-hero__title {
	margin: 0;
	font-size: clamp(40px, 7vw, 60px);
	font-weight: 700;
	line-height: .96;
	letter-spacing: -.02em;
	color: inherit;
	text-shadow: 0 1px 2px rgb(26 10 28 / .45), 0 2px 16px rgb(26 10 28 / .45);
}

.sit-index-hero__lead {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: clamp(21px, 2.6vw, 30px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: inherit;
	text-shadow: 0 1px 10px rgb(26 10 28 / .55);
}

.sit-index-hero__text {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: inherit;
	text-shadow: 0 1px 8px rgb(26 10 28 / .6);
}

/* Three stacked blocks of type need more scrim than a destination name does. */
.sit-index-hero .sit-dhero__media::after {
	background: linear-gradient(
		to top,
		rgb(26 10 28 / .86) 0%,
		rgb(26 10 28 / .62) 42%,
		rgb(26 10 28 / .18) 74%,
		rgb(26 10 28 / 0) 100%
	);
}

@media (max-width: 600px) {
	.sit-index-hero__text {
		font-size: 15px;
	}
}

/* The dots sit bottom-right on a destination hero, where the caption is
   short. Here the caption runs wider, so they move clear of it. */
.sit-index-hero .sit-dhero__dots {
	inset-block-end: clamp(16px, 2vw, 24px);
}

.sit-destinations img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
	transition: transform var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

.sit-destinations a:hover img {
	transform: scale(1.02);
}

.sit-destinations span {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
}

/* -- Operational proof --------------------------------------------------- */

.sit-proof {
	margin: var(--wp--preset--spacing--60) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.sit-proof > div {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.sit-proof .sit-figure {
	margin: 0;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.06;
	color: inherit;
}

.sit-proof .sit-data-label {
	margin: 0;
	color: inherit;
	opacity: 0.72;
}

/* --------------------------------------------------------------------------
   19. Destination pages

   A page about a place, not a filtered listing.
   -------------------------------------------------------------------------- */

/* -- Hero: photography left, the six answers right ------------------------
   70/30 at a fixed 500px, so the strip reads as one object rather than a
   picture with a list underneath it. The split collapses on small screens,
   where 500px of hero would be most of the viewport.
   -------------------------------------------------------------------------- */

.sit-dhero {
	/* One number governs the band. Both children read it rather than each
	   carrying their own height, so the slider and the facts panel cannot
	   drift apart when one of them changes. */
	--sit-hero-h: 500px;

	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
	block-size: var(--sit-hero-h);
	margin-bottom: var(--wp--preset--spacing--70);
}

/*
 * This site has no universal border-box reset — WordPress only sets it
 * per-block (.wp-block-group and friends), and the facts panel is a raw <dl>,
 * not a block. Under the default content-box its 500px was the *content*
 * height, so the padding was added on top and the panel stood 60px taller
 * than the slider beside it. Both children are sized explicitly here, so both
 * are put on border-box.
 */
.sit-dhero,
.sit-dhero *,
.sit-dhero *::before,
.sit-dhero *::after {
	box-sizing: border-box;
}

.sit-dhero > * {
	block-size: var(--sit-hero-h);
	min-block-size: 0; /* lets the panel scroll instead of stretching the row */
}

@media (max-width: 900px) {
	.sit-dhero {
		grid-template-columns: minmax(0, 1fr);
		block-size: auto;
	}

	/* Stacked, matching heights would only mean a needlessly tall panel.
	   The slider keeps a sensible ratio; the facts take what they need. */
	.sit-dhero > * {
		block-size: auto;
	}
}

/* -- The slider ------------------------------------------------------------ */

.sit-dhero__media {
	position: relative;
	isolation: isolate;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface-dark);
}

@media (max-width: 900px) {
	/* Beats `.sit-dhero > *` on specificity rather than on source order. */
	.sit-dhero > .sit-dhero__media {
		block-size: clamp(240px, 56vw, 380px);
	}
}

.sit-dhero__slides {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

/* -- Waiting on photography ------------------------------------------------
   A destination with no images yet still gets a hero rather than a gap. The
   Lattice at hero scale (p.22), the destination name behind the title, and
   the same dimensions as the real thing — so the page does not reflow when
   the pictures arrive.
   -------------------------------------------------------------------------- */

.sit-dhero__media--empty {
	display: grid;
	place-items: center;
	background-color: var(--wp--preset--color--surface-dark);
	background-image:
		linear-gradient(45deg, rgb(254 214 255 / .07) 25%, transparent 25% 75%, rgb(254 214 255 / .07) 75%),
		linear-gradient(-45deg, rgb(254 214 255 / .07) 25%, transparent 25% 75%, rgb(254 214 255 / .07) 75%);
	background-size: var(--wp--custom--lattice--lg) var(--wp--custom--lattice--lg);
}

/* The scrim is for photographs; over the flat plate it only muddies it. */
.sit-dhero__media--empty::after {
	background: linear-gradient(to top, rgb(26 10 28 / .55) 0%, rgb(26 10 28 / 0) 55%);
}

.sit-dhero__placeholder {
	font-size: clamp(48px, 9vw, 132px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: rgb(254 214 255 / .12);
	text-align: center;
	padding-inline: 24px;
	user-select: none;
}

.sit-dhero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* Not display:none — a cross-fade needs both frames painted. Hidden
	   slides are inert so their content cannot be tabbed into. */
	pointer-events: none;
	transition: opacity 900ms var(--wp--custom--ease--standard);
}

.sit-dhero__slide.is-current {
	opacity: 1;
	pointer-events: auto;
}

.sit-dhero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The scrim is what makes the title legible over an unknown photograph.
   Two stops, weighted to the bottom where the type sits. */
.sit-dhero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgb(26 10 28 / .78) 0%,
		rgb(26 10 28 / .42) 34%,
		rgb(26 10 28 / .06) 68%,
		rgb(26 10 28 / 0) 100%
	);
}

.sit-dhero__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	padding: clamp(20px, 3vw, 40px);
	color: var(--wp--preset--color--surface-page);
}

.sit-dhero__caption .sit-eyebrow {
	color: var(--sit-accent);
	margin-bottom: 10px;
}

.sit-dhero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--headline);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.02em;
	color: inherit;
	text-shadow: 0 1px 2px rgb(26 10 28 / .45), 0 2px 14px rgb(26 10 28 / .40);
}

/* -- Slider controls ------------------------------------------------------- */

/* Hidden until destination.js is running: an arrow that does nothing is
   worse than no arrow. */
[data-sit-slider]:not([data-enhanced]) .sit-dhero__arrow,
[data-sit-slider]:not([data-enhanced]) .sit-dhero__dots {
	display: none;
}

.sit-dhero__arrow {
	position: absolute;
	z-index: 3;
	inset-block-start: 50%;
	translate: 0 -50%;
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / .88);
	color: var(--wp--preset--color--brand-primary);
	cursor: pointer;
	transition: background var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-dhero__arrow:hover {
	background: var(--wp--preset--color--surface-page);
}

.sit-dhero__arrow--prev { inset-inline-start: 16px; }
.sit-dhero__arrow--next { inset-inline-end: 16px; }

.sit-dhero__arrow svg {
	inline-size: 18px;
	block-size: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sit-dhero__dots {
	position: absolute;
	z-index: 3;
	inset-block-end: clamp(20px, 3vw, 40px);
	inset-inline-end: clamp(20px, 3vw, 40px);
	display: flex;
	gap: 8px;
}

.sit-dhero__dots button {
	inline-size: 28px;
	block-size: 4px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / .40);
	cursor: pointer;
	transition: background var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-dhero__dots button[aria-current="true"] {
	background: var(--sit-accent);
}

/* The bar is 4px tall, so it needs a bigger invisible target than it looks. */
.sit-dhero__dots button::before {
	content: "";
	position: absolute;
	inset-block: -14px;
	inset-inline: -4px;
}

.sit-dhero__dots button {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	.sit-dhero__slide {
		transition-duration: 1ms;
	}
}

/* -- The six answers, as a panel -------------------------------------------

   Every selector here is doubled — `.sit-facts.sit-facts--panel` rather than
   `.sit-facts--panel`. The base .sit-facts strip is declared further down this
   file, so at equal specificity it wins on source order and puts back the
   things the panel deliberately removes: `padding: … 0` (no side padding at
   all), a two-column auto-fit grid, a spacing-40 gap and a 2px top border.
   The panel rendered with its text against the left edge because of exactly
   that. Doubling the class settles it on specificity instead, which does not
   quietly come undone the next time this file is reordered.
   -------------------------------------------------------------------------- */

.sit-facts.sit-facts--panel {
	/* Height comes from `.sit-dhero > *` so there is one source of truth for
	   the band; setting it again here would only let the two drift. */
	margin: 0;
	padding: clamp(22px, 2vw, 30px);
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	/* A dark field, not the pink tint — it holds its own next to a
	   photograph, and the tint was fighting the images. */
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--surface-page);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: min-content;
	align-content: space-between;
	gap: 12px;
	overflow-y: auto; /* safety valve if a translation runs long */
}

.sit-facts.sit-facts--panel > div {
	display: grid;
	gap: 3px;
	align-content: start;
}

.sit-facts.sit-facts--panel dt {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .62); /* 6.3:1 on the dark field */
}

.sit-facts.sit-facts--panel dd {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--surface-page);
}

.sit-facts.sit-facts--panel dd small {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: rgb(255 255 255 / .74);
}

.sit-facts.sit-facts--panel > div + div {
	padding-top: 12px;
	border-top: var(--wp--custom--border--hairline) solid rgb(255 255 255 / .14);
}

@media (max-width: 900px) {
	.sit-facts.sit-facts--panel {
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		align-content: start;
		gap: 20px 28px;
	}

	.sit-facts.sit-facts--panel > div + div {
		padding-top: 0;
		border-top: 0;
	}
}

/* -- Quick facts ----------------------------------------------------------
   The six questions everyone asks before they read a word of prose. Tabular
   figures so the numbers align down the column (p.19).
   -------------------------------------------------------------------------- */

.sit-facts {
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 2px solid var(--wp--preset--color--brand-primary);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.sit-facts > div {
	display: grid;
	gap: 6px;
	align-content: start;
}

.sit-facts dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.sit-facts dd {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-primary);
}

.sit-facts dd small {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

/* -- Section furniture on a destination page ------------------------------
   These headings are authored in raw HTML blocks rather than core/heading,
   so they do not inherit .wp-block-heading's margins. Restate them.
   -------------------------------------------------------------------------- */

h2.has-subhead-font-size {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-weight: 600;
	line-height: 1.1;
	text-wrap: balance;
}

/* A destination page runs one 1280px column so its components have room.
   Prose must not run to 1280px, so it keeps the 66ch measure — but capped
   AND centred would float it away from the left edge every component sits
   on. Cap it and pin it left instead.

   Scoped to the destination template on purpose. Ordinary pages — About,
   Contact, the legal set — are prose documents and stay on the centred
   720px reading measure, which is correct typography for them.

   The !important is not decoration: core's constrained layout emits
   `margin-left:auto !important` on every direct child, so only a more
   specific selector that is also !important can win. Take it out and the
   measure silently re-centres, which is exactly the sort of failure that
   looks like a design choice rather than a bug. */
.page-template-page-destination .entry-content > .sit-measure,
.page-template-page-destination .entry-content > .sit-lede,
.page-template-page-destination .entry-content > h2,
.page-template-page-destination .entry-content > .sit-eyebrow {
	margin-inline: 0 !important;
}

.page-template-page-destination .entry-content > h2 {
	max-width: 26ch;
}

.sit-lede {
	max-width: var(--wp--custom--measure);
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: 18px;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary);
}

.sit-photo-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--80);
}

.sit-photo-band figure {
	margin: 0;
}

.sit-photo-band img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

.sit-photo-band figcaption {
	margin-top: var(--wp--preset--spacing--20);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

/* -- Price by party size --------------------------------------------------
   Four people pay less each than two, because transfers and boats are bought
   per vehicle. Stating the whole ladder is the point: a traveller who can
   see it will ask about it, which beats discovering it afterwards.
   -------------------------------------------------------------------------- */

.sit-price__bands {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	gap: 2px;
	max-width: 30rem;
}

.sit-price__bands li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 9px 12px;
	border-radius: 3px;
	background: var(--wp--preset--color--surface-page);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.35;
}

.sit-price__bands strong {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The cheapest rate on offer, whether or not this party qualifies yet. */
.sit-price__bands li.is-best strong {
	color: var(--wp--preset--color--brand-primary);
}

/* The band this party actually falls in, set by booking.js as pax changes. */
.sit-price__bands li.is-current {
	border-color: var(--wp--preset--color--brand-primary);
	box-shadow: inset 3px 0 0 var(--sit-accent);
}

/* -- We know Thailand -----------------------------------------------------
   Fifteen claims, each with its own photograph. Every slide occupies the
   same grid cell so the section is as tall as its tallest claim and never
   reflows as it rotates; the named list underneath is the navigation,
   because "which place" is more useful to a reader than "slide 7 of 15".
   -------------------------------------------------------------------------- */

.sit-knows__stage {
	position: relative;
}

.sit-knows__slides {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.sit-knows__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
	/* Hidden slides keep their links out of the tab order, which opacity
	   alone does not do in any browser. */
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

.sit-knows__slide.is-current {
	visibility: visible;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.sit-knows__slide {
		transition: none;
	}
}

@media (max-width: 781px) {
	.sit-knows__slide {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Landscape 4:3, filling its column. A Thai coastline is a horizontal
   subject — a portrait crop of a headland throws away the water either side
   of it, which is the part that makes the photograph. */
.sit-knows__media {
	position: relative;
	isolation: isolate;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

/* The place name, on the photograph. A scrim rather than a tint, because it
   has to hold against a white sand beach and a night market equally. */
.sit-knows__place {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	padding: 48px clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 20px);
	font-size: clamp(21px, 2.4vw, 30px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--surface-page);
	text-shadow: 0 1px 3px rgb(26 10 28 / .5);
	background: linear-gradient(to top, rgb(26 10 28 / .74), rgb(26 10 28 / 0));
	pointer-events: none;
}

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

/* Waiting on photography: the Lattice at the same aspect ratio, so nothing
   moves on the day the pictures land. */
.sit-knows__media--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--surface-dark);
	background-image:
		linear-gradient(45deg, rgb(254 214 255 / .07) 25%, transparent 25% 75%, rgb(254 214 255 / .07) 75%),
		linear-gradient(-45deg, rgb(254 214 255 / .07) 25%, transparent 25% 75%, rgb(254 214 255 / .07) 75%);
	background-size: var(--wp--custom--lattice--lg) var(--wp--custom--lattice--lg);
}

.sit-knows__media--empty span {
	font-size: clamp(28px, 4vw, 54px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--surface-tint);
	opacity: .5;
}

.sit-knows__title {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--wp--preset--color--brand-primary);
}

.sit-knows__text {
	margin: 0;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.6;
}

.sit-knows__more {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.sit-knows__more a {
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--brand-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Small, quiet, and present — a licence obligation rather than a design
   element, so it sits at the foot of the claim and asks for nothing. */
.sit-knows__credit {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--text-secondary);
	opacity: .75;
}

/* -- Arrows and the named list -------------------------------------------- */

.sit-knows__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-page);
	box-shadow: 0 2px 14px rgb(26 10 28 / .18);
	cursor: pointer;
}

.sit-knows__arrow svg {
	inline-size: 22px;
	block-size: 22px;
	fill: none;
	stroke: var(--wp--preset--color--brand-primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sit-knows__arrow--prev { left: -14px; }
.sit-knows__arrow--next { right: -14px; }

@media (max-width: 781px) {
	.sit-knows__arrow--prev { left: 4px; }
	.sit-knows__arrow--next { right: 4px; }
}

/* Never hidden, only scrolled: direct access to every destination is the
   whole point of naming them.

   Exactly seven thumbnails occupy the width, whatever the width is, and the
   remaining eight scroll. `grid-auto-columns` divides the row rather than
   sizing each tile, so seven always land flush against both edges instead of
   leaving a part-tile hanging at the end and implying the strip has stopped.
   Snap points mean a flick lands on a thumbnail rather than between two. */
.sit-knows__nav {
	--sit-thumbs: 4;
	--sit-thumb-gap: 12px;

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--sit-thumbs) - 1) * var(--sit-thumb-gap)) / var(--sit-thumbs)
	);
	gap: var(--sit-thumb-gap);
	overflow-x: auto;
	/* Proximity, not mandatory: the script centres the active thumbnail, and
	   mandatory snapping would yank that landing to the nearest edge. */
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	margin-top: var(--wp--preset--spacing--50);
	padding-bottom: 6px;
}

/* Four across a phone gives 80px tiles — below a comfortable tap target and
   too small to read a name on. The count steps down; the behaviour does not. */
@media (max-width: 1024px) {
	.sit-knows__nav { --sit-thumbs: 3; }
}

@media (max-width: 600px) {
	.sit-knows__nav { --sit-thumbs: 2; }
}

.sit-knows__thumb {
	position: relative;
	scroll-snap-align: start;
	appearance: none;
	border: 0;
	padding: 0;
	background: var(--wp--preset--color--surface-dark);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	/* Same ratio as the slide above it. Four portrait tiles across a 1280
	   container would stand nearly 400px tall — taller than the photograph
	   they navigate. */
	aspect-ratio: 4 / 3;
	cursor: pointer;
	font: inherit;
	/* Everything inside is positioned against the tile, not laid out by it.
	   The name used to be a grid item sharing cell 1/1 with the photograph,
	   which put it at the end of the *row* rather than the end of the *tile* —
	   and once the ratio changed the row no longer matched the tile, so the
	   label sat below the aspect-ratio box and overflow:hidden clipped it. */
	position: relative;
	isolation: isolate;
	transition: box-shadow var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-knows__thumb > img,
.sit-knows__thumb-plate {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

.sit-knows__thumb-plate {
	background-image:
		linear-gradient(45deg, rgb(254 214 255 / .07) 25%, transparent 25% 75%, rgb(254 214 255 / .07) 75%),
		linear-gradient(-45deg, rgb(254 214 255 / .07) 25%, transparent 25% 75%, rgb(254 214 255 / .07) 75%);
	/* The Lattice scaled to the tile — the 44px token is sized for a panel and
	   reads as three big diamonds at this width. */
	background-size: 16px 16px;
}

/* A scrim, not a tint: the name has to hold against a white sand beach and a
   night market equally, and only a gradient behind the text does that. */
.sit-knows__thumb-name {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	padding: 34px 12px 11px;
	/* Four across gives a tile roughly twice the width the old seven did, so
	   the label can take the size it should always have had. */
	font-size: clamp(14px, 1.1vw, 16px);
	font-weight: 600;
	line-height: 1.15;
	text-align: left;
	color: var(--wp--preset--color--surface-page);
	text-shadow: 0 1px 3px rgb(26 10 28 / .55);
	background: linear-gradient(to top, rgb(26 10 28 / .78), rgb(26 10 28 / 0));
}

@media (hover: hover) {
	.sit-knows__thumb:hover > img {
		transform: scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sit-knows__thumb > img {
		transition: none;
	}

	.sit-knows__thumb:hover > img {
		transform: none;
	}
}

/* Current is carried by a Marigold frame and full-strength type, so it reads
   without relying on colour alone. */
.sit-knows__thumb[aria-current="true"] {
	box-shadow:
		0 0 0 3px var(--sit-accent),
		0 2px 14px rgb(26 10 28 / .22);
}

.sit-knows__thumb[aria-current="true"] .sit-knows__thumb-name {
	background: linear-gradient(to top, rgb(26 10 28 / .9), rgb(26 10 28 / 0));
}

.sit-knows__thumb:not([aria-current="true"]) > img {
	opacity: .82;
}

.sit-knows__thumb:hover > img,
.sit-knows__thumb:focus-visible > img {
	opacity: 1;
}

/* -- Tabs -----------------------------------------------------------------
   One behaviour, two uses: choosing a base and choosing a month. Until
   destination.js marks the wrapper enhanced, the tablist is hidden and every
   panel is visible — the page still reads as a document with no JavaScript.
   -------------------------------------------------------------------------- */

[data-sit-tabs]:not([data-enhanced]) [role="tablist"] {
	display: none;
}

/* The UA rule for [hidden] is display:none at specificity zero, so any panel
   we lay out with grid or flex would stay on screen once JS hid it. Restate
   it at a specificity that actually wins. */
[role="tabpanel"][hidden] {
	display: none;
}

.sit-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
}

/* Unselected is the accent, selected is Deep Purple — the two brand colours
   against each other rather than a row of white pills that reads as chrome.
   Both sides come from tokens, so a trade page swaps Marigold for Deep Red
   and --sit-accent-on carries the legible foreground with it. */
.sit-tabs__tab {
	appearance: none;
	border: var(--wp--custom--border--hairline) solid var(--sit-accent);
	background: var(--sit-accent);
	color: var(--sit-accent-on);
	border-radius: 999px;
	padding: 11px 20px;
	min-height: 44px; /* touch target */
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		box-shadow var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

/* An inner ring rather than a colour change: on a pill that is already the
   accent there is no lighter shade to move to. */
.sit-tabs__tab:hover {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--brand-primary);
}

.sit-tabs__tab[aria-selected="true"] {
	background: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
	font-weight: 600;
}

/* Selection is never carried by colour alone (WCAG 1.4.1): the chosen tab
   also gains a Marigold bar, and its label goes semibold. */
.sit-tabs__tab[aria-selected="true"]::after {
	content: "";
	display: block;
	height: 3px;
	margin: 7px -6px -4px;
	border-radius: 2px;
	background: var(--sit-accent);
}

/* -- Choosing a base ------------------------------------------------------ */

.sit-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 48px);
	align-items: start;
}

@media (max-width: 781px) {
	.sit-area {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Krabi Town has no photograph we can honestly caption yet, so its panel
   runs full width rather than reserving a gap for one. */
.sit-area--noimage {
	grid-template-columns: minmax(0, 1fr);
	max-width: 74ch;
}

.sit-area__media {
	margin: 0;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

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

.sit-area__body > h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--preset--color--brand-primary);
}

.sit-area__body > p {
	margin: 0 0 var(--wp--preset--spacing--40);
	line-height: 1.65;
}

/* Suits / does not suit, side by side. The second column is the reason to
   trust the first: a page that only ever says yes is advertising. */
.sit-area__fit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.sit-area__fit h4 {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.sit-area__fit ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
}

.sit-area__fit li {
	padding-left: 22px;
	position: relative;
}

.sit-area__fit li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.sit-area__fit--yes li::before {
	content: "+";
	color: var(--wp--preset--color--brand-primary);
}

.sit-area__fit--no li::before {
	content: "\2212"; /* true minus, not a hyphen */
	color: var(--wp--preset--color--text-secondary);
}

.sit-area__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
}

.sit-area__meta dt {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 4px;
}

.sit-area__meta dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* -- Choosing a length ----------------------------------------------------
   The same tab behaviour a third time, for the three trip shapes we sell.
   The duration rides inside the tab label rather than in the panel, because
   the length is the thing being chosen — you should be able to compare 1N,
   2N and 4N without opening anything.
   -------------------------------------------------------------------------- */

/* Runs the full 1280px column and holds one line at desktop widths — the
   size flexes so the sentence keeps its shape as the column narrows, and
   wraps rather than shrinking further once it cannot. */
.sit-itin__lede {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary);
}

/* Opacity on the span carries its own border with it, so the divider stays
   legible against the white pill and the purple one alike. */
.sit-tabs__dur {
	margin-left: 9px;
	padding-left: 9px;
	border-left: 1px solid currentColor;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	opacity: .72;
}

.sit-itin {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

/* The note is an aside on the whole shape, not on the last day. */
.sit-itin__note {
	grid-column: 1 / -1;
	max-width: 74ch;
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

@media (max-width: 781px) {
	.sit-itin {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sit-itin__len {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-secondary);
}

.sit-itin__intro > h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--preset--color--brand-primary);
}

.sit-itin__intro > p {
	margin: 0 0 var(--wp--preset--spacing--40);
	line-height: 1.65;
}

.sit-itin__meta {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
}

.sit-itin__meta dt {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 4px;
}

.sit-itin__meta dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

/* Days are a numbered sequence, so an <ol> — but the day label already says
   which one it is, and a second set of numerals would only compete. */
.sit-itin__days {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.sit-itin__days > li {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	gap: clamp(14px, 2.5vw, 26px);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
}

.sit-itin__days > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

@media (max-width: 600px) {
	.sit-itin__days > li {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}
}

.sit-itin__day {
	margin: 0;
	padding-top: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-secondary);
}

.sit-itin__body > h4 {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-primary);
}

.sit-itin__body > p {
	margin: 0;
	line-height: 1.65;
}

/* -- Choosing a month -----------------------------------------------------
   Each tab carries a bar whose height is that month's rainfall, so the shape
   of the year is legible before anything is clicked. --r is a 0–1 ratio set
   inline per month; the bar is decorative and the panel states the number.
   -------------------------------------------------------------------------- */

/* The chart carries the shape of the year; the selected month is read
   beside it, not underneath it. */
.sit-season {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

/* No universal border-box reset on this site, and the bars combine a fixed
   height with padding. Scope one here rather than let the column heights
   come out taller than the numbers say. */
.sit-season,
.sit-season *,
.sit-season *::before,
.sit-season *::after {
	box-sizing: border-box;
}

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

.sit-season__list {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 4px;
	margin: 0;
	padding: 0;
	align-items: end;
	/* The axis the bars stand on. */
	border-bottom: var(--wp--custom--border--strong) solid var(--wp--preset--color--hairline);
}

.sit-season__legend {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

/* The sprite is a definition, not a picture. */
.sit-sprite {
	position: absolute;
	inline-size: 0;
	block-size: 0;
	overflow: hidden;
}

/* Stacked from the axis upwards, so the weather symbol rides the top of the
   bar and moves with it rather than sitting on a fixed line. */
.sit-season__tab {
	appearance: none;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text-secondary);
	padding: 0 0 10px;
	block-size: clamp(210px, 24vw, 285px);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 7px;
}

/* -- Weather symbol -------------------------------------------------------- */

.sit-season__wx {
	inline-size: clamp(16px, 1.7vw, 22px);
	block-size: clamp(16px, 1.7vw, 22px);
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .7;
}

.sit-season__tab:hover .sit-season__wx {
	opacity: 1;
}

.sit-season__tab[aria-selected="true"] .sit-season__wx {
	color: var(--wp--preset--color--brand-primary);
	opacity: 1;
}

/* -- Crowd level ----------------------------------------------------------
   Three figures, filled to the level. The count carries the meaning, so it
   still reads with colour removed.
   -------------------------------------------------------------------------- */

.sit-season__crowd {
	display: flex;
	gap: 1px;
	flex: none;
	color: var(--wp--preset--color--brand-secondary);
}

.sit-season__crowd svg {
	inline-size: 9px;
	block-size: 9px;
	fill: currentColor;
	stroke: none;
	opacity: .22;
}

.sit-season__crowd svg.is-on {
	opacity: 1;
}

.sit-season__tab[aria-selected="true"] .sit-season__crowd {
	color: var(--wp--preset--color--brand-primary);
}

.sit-season__bar {
	display: block;
	inline-size: 100%;
	max-inline-size: 30px;
	border-radius: 5px 5px 0 0;
	background: var(--wp--preset--color--brand-secondary);
	opacity: .32;
	/* Floored so a dry month still reads as a mark rather than nothing. */
	block-size: calc(6px + (var(--r, 0) * clamp(120px, 15vw, 178px)));
	transition: opacity var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		background var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-season__tab:hover .sit-season__bar {
	opacity: .55;
}

/* Selection is never carried by colour alone: the label also goes semibold
   and gains the accent rule beneath it. */
.sit-season__tab[aria-selected="true"] .sit-season__bar {
	background: var(--sit-accent);
	opacity: 1;
}

.sit-season__tab[aria-selected="true"] .sit-season__mon {
	color: var(--wp--preset--color--brand-primary);
	font-weight: 700;
	box-shadow: 0 2px 0 var(--sit-accent);
}

.sit-season__mon {
	padding-bottom: 2px;
}

.sit-season__panel {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: start;
}

.sit-season__panel h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 24px;
	font-weight: 600;
	color: var(--wp--preset--color--brand-primary);
}

.sit-season__panel p {
	margin: 0;
	line-height: 1.65;
}

.sit-season__numbers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
}

.sit-season__numbers dt {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 3px;
}

.sit-season__numbers dd {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-primary);
}

/* A verdict badge, because "what does this month mean for me" is the actual
   question. Text carries it; the tint only reinforces. */
.sit-verdict {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--wp--preset--color--surface-tint);
	color: var(--wp--preset--color--brand-primary);
}

.sit-verdict--peak {
	background: var(--sit-accent);
	color: var(--sit-accent-on);
}

/* -- Day trips ------------------------------------------------------------ */

.sit-trips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.sit-trips > li {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: start;
}

.sit-trips img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

.sit-trips h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--brand-primary);
}

.sit-trips p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

.sit-trips dl {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.sit-trips dt {
	color: var(--wp--preset--color--text-secondary);
}

.sit-trips dd {
	margin: 0 0 0 5px;
	font-weight: 600;
}

.sit-trips dl > div {
	display: flex;
}

/* -- Money you pay on the ground ------------------------------------------ */

.sit-fees {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--body-sm);
}

.sit-fees caption {
	text-align: left;
	padding-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.6;
}

.sit-fees th,
.sit-fees td {
	text-align: left;
	padding: 13px 16px 13px 0;
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	vertical-align: top;
}

.sit-fees thead th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	border-bottom-color: var(--wp--preset--color--brand-primary);
}

.sit-fees tbody th {
	font-weight: 500;
}

.sit-fees tbody th small {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--text-secondary);
}

.sit-fees td:last-child,
.sit-fees th:last-child {
	padding-right: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.sit-fees-scroll {
		overflow-x: auto;
	}

	.sit-fees {
		min-width: 420px;
	}
}

/* -- Entry requirements ---------------------------------------------------
   Deliberately the loudest box on the page. Everything else here is planning;
   this is the one thing that stops a traveller at the gate, so it is set on
   the tint rather than left as running prose. It had no styling at all until
   now and was rendering as a loose stack of text.
   -------------------------------------------------------------------------- */

.sit-entry {
	/* No universal border-box reset on this site; this box combines padding
	   with a border, so scope one. */
	box-sizing: border-box;
	padding: clamp(24px, 3vw, 40px);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-tint);
	border-left: 5px solid var(--wp--preset--color--brand-primary);
}

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

.sit-entry__badge {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sit-entry__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--brand-primary);
}

.sit-entry__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--border--hairline) solid rgb(100 34 101 / .22);
}

.sit-entry__grid dt {
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary);
	opacity: .78;
}

.sit-entry__grid dd {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-primary);
}

/*
 * An approved-but-not-yet-commenced rule. Set apart from the figures above so
 * it can never be mistaken for them — a traveller who reads the coming rule as
 * the current one arrives without the visa they still need.
 */
.sit-entry__change {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	max-width: 70ch;
	border-left: 3px solid var(--wp--preset--color--accent-consumer);
	background-color: var(--wp--preset--color--surface-alt);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.65;
	color: var(--wp--preset--color--text-primary);
}

.sit-entry__change strong {
	display: block;
	margin-bottom: 0.15em;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary);
}

.sit-entry__note {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.65;
	color: var(--wp--preset--color--text-primary);
}

/* Dated on purpose. An undated rule reads as current forever. */
.sit-entry__reviewed {
	margin: 0;
	max-width: 70ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--brand-primary);
	opacity: .75;
}

/* -- Notes we would say out loud on the phone ----------------------------- */

.sit-notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.sit-notes h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.sit-notes p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

/* -- Packages in this destination ----------------------------------------- */

.sit-showcase__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.sit-showcase__head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 600;
	line-height: 1.1;
}

.sit-showcase__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
	font-variant-numeric: tabular-nums;
}

.sit-package-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* A pinned row count. auto-fit gives whatever fits, which is right for most
   surfaces but cannot promise "four across, three down" — and twelve packages
   arranged 4x3 is a shape, where 3x4 or 5+5+2 is just a list that wrapped. */
.sit-package-grid--fixed {
	grid-template-columns: repeat(var(--sit-cols, 4), minmax(0, 1fr));
}

/* Four squares need about 240px each before the type inside them starts to
   break up; below that the row halves rather than crushing. */
@media (max-width: 1100px) {
	.sit-package-grid--fixed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sit-package-grid--fixed {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -- About ---------------------------------------------------------------
   The page fills 1280px by banding, not by stretching. A paragraph run to
   1280 is unreadable — the measure exists for a reason — so the width is
   used by putting a photograph, a second column or a card row beside the
   prose rather than by widening the prose itself. */

.sit-about-hero {
	min-block-size: clamp(320px, 40vw, 520px);
	display: grid;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	margin-block-end: var(--wp--preset--spacing--70);
}

.sit-about-hero > img {
	grid-area: 1 / 1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* 60% of the frame, not 42ch. At the narrower measure the headline broke
   over four lines and turned the corner of the photograph into a wall of
   type; at 60% it lands on two and the temple keeps the other 40%. */
.sit-about-hero > .sit-scrim__content {
	grid-area: 1 / 1;
	align-self: end;
	padding: clamp(24px, 4vw, 56px);
	max-inline-size: 60%;
}

@media (max-width: 781px) {
	.sit-about-hero > .sit-scrim__content {
		max-inline-size: 100%;
	}
}

/* A heavier scrim than the standard one. The shared gradient is weighted to
   the bottom edge, which is right over a dark photograph — but the Grand
   Palace sits under a pale sky, and the eyebrow landed on near-white with
   Marigold on top of it and disappeared. Type over photography always sits
   on a scrim (p.17), and the scrim has to be judged against the photograph
   it is actually on. */
.sit-about-hero.sit-scrim::after {
	background: linear-gradient(
		to top,
		rgb(26 10 28 / 0.88) 0%,
		rgb(26 10 28 / 0.74) 34%,
		rgb(26 10 28 / 0.34) 62%,
		rgb(26 10 28 / 0) 100%
	);
}

.sit-about-hero .sit-eyebrow {
	color: var(--wp--preset--color--accent-consumer);
}

.sit-about-hero h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--headline);
	line-height: 1.02;
	color: inherit;
	/* Two lines of roughly equal length rather than a long one and a
	   fragment. Ignored by browsers that do not support it, which simply
	   get the ordinary break. */
	text-wrap: balance;
}

/* The support line reads as prose and keeps a prose measure, even though the
   column around it is now wider for the headline's sake. */
.sit-about-hero p {
	max-inline-size: 52ch;
}

.sit-about-hero p {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: inherit;
}

/* The opening statement, across the full width.

   Two paragraphs side by side rather than one column down the middle. A line
   of body copy run to 1280px is close to unreadable — the eye loses the
   return — so the width is used by splitting the statement in two, which
   leaves each half at about the measure it wants anyway. */
.sit-lede {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
	margin-block: var(--wp--preset--spacing--60);
}

.sit-lede p {
	margin: 0;
	font-size: 19px;
	line-height: 1.6;
}

.sit-lede p + p {
	color: var(--wp--preset--color--text-secondary);
}

@media (max-width: 781px) {
	.sit-lede {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

/* Photograph on one side, the argument on the other. */
.sit-media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	margin-block: var(--wp--preset--spacing--70);
}

.sit-media > * {
	min-inline-size: 0;
}

.sit-media :is(h2, h3):first-child,
.sit-media .sit-eyebrow + :is(h2, h3) {
	margin-block-start: 0;
}

.sit-media figure {
	margin: 0;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.sit-media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Image second in the source order, first on screen: the prose still reads
   first to a screen reader and on a phone, where the photograph following
   the point it illustrates is the right order. */
.sit-media--flip figure {
	order: -1;
}

/* Two columns of unequal length — Thailand and India, a card and a claim.
   Centring them would leave one floating against the other's middle. */
.sit-media--top,
.sit-media--proof {
	align-items: start;
}

.sit-media--top figure {
	margin-block-end: var(--wp--preset--spacing--40);
}

.sit-media--top .sit-eyebrow {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* A quiet panel, for a column that has no photograph to carry it. */
.sit-panel {
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface-alt);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
}

.sit-panel > :first-child {
	margin-block-start: 0;
}

/* Full width, but the prose inside it still on a measure: the argument on
   one side, the registered entity on the other. */
.sit-panel--split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	margin-block: var(--wp--preset--spacing--50);
}

.sit-panel--split > * {
	min-inline-size: 0;
}

.sit-panel--split p:last-child {
	margin-block-end: 0;
}

@media (max-width: 781px) {
	.sit-panel--split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

/* The facts strip runs as a row across a page; inside a column it is one
   entry and should not try to be a grid at all. */
.sit-facts--stack {
	grid-template-columns: minmax(0, 1fr);
	margin-block-end: 0;
}

/* The credentials card: the dark field from the homepage proof band, at
   column width instead of page width. */
.sit-proof-card {
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
}

.sit-proof-card .sit-eyebrow {
	color: var(--wp--preset--color--accent-consumer);
}

.sit-proof-card h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
}

.sit-proof--2up {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-start: var(--wp--preset--spacing--50);
}

/* A licence number is an identifier, not a quantity. At full figure size
   eight characters simply ran into the metric beside it. */
.sit-figure--code {
	font-size: clamp(22px, 2.2vw, 30px) !important;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 781px) {
	.sit-media {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	.sit-media--flip figure {
		order: 0;
	}
}

/* Three promises as cards rather than three bullets — the same words, but
   using the width instead of running down the middle of it. */
.sit-trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50);
	list-style: none;
	padding: 0;
}

.sit-trio > li {
	min-inline-size: 0;
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface-alt);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
}

.sit-trio h4 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
}

.sit-trio p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

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

/* -- Portrait beside prose -----------------------------------------------
   The founder section on About. Picture left, the case for her right, so
   neither is reading as a caption for the other. */
.sit-split {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	margin-block: var(--wp--preset--spacing--50);
}

.sit-split > * {
	min-inline-size: 0;
}

.sit-split :is(h2, h3):first-child {
	margin-block-start: 0;
}

@media (max-width: 781px) {
	.sit-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

.sit-portrait {
	margin: 0;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.sit-portrait img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* The frame with nothing in it yet.

   A photograph of Pat is the single best thing this page could carry and it
   does not exist yet. The choice was to leave a hole, ship a stock face, or
   reserve the space — reserving it is the only honest one. It reads as the
   Lattice at panel scale, so a visitor sees a designed block rather than a
   broken image, and the editor sees the note underneath it. Replace the
   figure with an image block; the ratio is already the right one. */
.sit-portrait--empty {
	aspect-ratio: 4 / 5;
	background-color: var(--wp--preset--color--surface-alt);
	background-image:
		linear-gradient(45deg, rgb(100 34 101 / .07) 25%, transparent 25% 75%, rgb(100 34 101 / .07) 75%),
		linear-gradient(-45deg, rgb(100 34 101 / .07) 25%, transparent 25% 75%, rgb(100 34 101 / .07) 75%);
	background-size: var(--wp--custom--lattice--lg) var(--wp--custom--lattice--lg);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
}

/* -- Contact and the enquiry brief ---------------------------------------
   The intro and the direct channels sit side by side; the brief itself runs
   the full width underneath, because a form squeezed into half a column
   makes every field a single narrow line. */
/* Equal halves: a greeting on one side, the proposition and the ways to
   reach us on the other. Neither is subordinate to the other. */
.sit-contact {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	margin-block: var(--wp--preset--spacing--50);
}

.sit-contact__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.06;
}

.sit-contact__lede {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

.sit-contact > * {
	min-inline-size: 0;
}

/* The greeting. Thai first and large, the transliteration and the English
   underneath it — the point is that a Thai company is saying hello, so the
   Thai is the thing you see, not a footnote to the translation. */
/* The greeting and its transliteration are one heading in two scripts, so
   they take the same size, weight and colour. They cannot take the same
   typeface — Jost carries no Thai glyphs, so the Thai falls back to a system
   Thai face — but matching everything else makes them read as a pair rather
   than as a heading with a caption under it. */
.sit-welcome__thai,
.sit-welcome__roman {
	margin: 0;
	font-size: clamp(34px, 4.6vw, 52px);
	line-height: 1.35; /* Thai needs headroom for its vowel marks. */
	font-weight: 600;
	color: var(--wp--preset--color--brand-primary);
}

.sit-welcome__roman {
	opacity: 0.75; /* The Thai leads; the reading of it follows. */
}

.sit-welcome__gloss {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	max-inline-size: 46ch;
}

.sit-welcome__figure {
	margin: 0;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--sm);
}

/* 3:2, the photograph's own shape. Held at 4:5 it had to lose either the
   greeting or the row of Buddhas behind it, and the two together are the
   whole picture. */
.sit-welcome__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* The merchant-of-record statement. Full width and set apart, because it is
   the answer to "who just charged my card" and nobody hunts for that in a
   column of body copy. */
.sit-statement {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface-alt);
	border-inline-start: 3px solid var(--wp--preset--color--brand-primary);
	border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

/* The brief's heading, immediately above the form it introduces. */
.sit-brief-intro {
	margin-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
}

.sit-brief-intro h3 {
	margin: 0;
}

.sit-brief-intro .sit-hint {
	max-inline-size: var(--wp--custom--measure);
}

.sit-contact__direct .sit-eyebrow {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
}

.sit-contact__direct .sit-eyebrow:first-child {
	margin-block-start: 0;
}

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

.sit-hint {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
}

.sit-hint a {
	color: var(--wp--preset--color--brand-primary);
}

/* The brief. Grouped into fieldsets so a long form reads as five short
   questions rather than one wall — the length is the point, but the wall
   is what makes people leave. */
.sit-enquiry {
	margin-block: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   The destination collage — /thailand/

   Four places at once, sized unequally. A slider showed one and hid three
   behind a timer on the page whose whole job is "where do you want to wake
   up", which is a question answered by comparing rather than by waiting.
   -------------------------------------------------------------------------- */

.sit-index-hero--collage {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.sit-index-hero--collage .sit-index-hero__says {
	max-inline-size: 64ch;
}

/*
 * The mosaic. One tall tile down the left, one wide across the top right,
 * two square beneath it — the shape a reader's eye already knows from a
 * magazine spread, so nothing has to explain the hierarchy.
 */
.sit-collage {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	block-size: clamp(420px, 52vw, 660px);
}

.sit-collage__tile--lead  { grid-column: 1; grid-row: 1 / span 2; }
.sit-collage__tile--wide  { grid-column: 2 / span 2; grid-row: 1; }
.sit-collage__tile--small { grid-row: 2; }

.sit-collage__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-dark);
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--sm);
	transition: box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

.sit-collage__tile:hover { box-shadow: var(--wp--preset--shadow--xl); }

.sit-collage__tile img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--dur--slow, 600ms) var(--wp--custom--ease--standard);
}

@media (hover: hover) {
	.sit-collage__tile:hover img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
	.sit-collage__tile img,
	.sit-collage__tile:hover img { transition: none; transform: none; }
}

/* The scrim only has to carry two lines at the foot, so it starts low and
   leaves the top two thirds of the photograph alone. */
.sit-collage__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(18px, 2.2vw, 30px);
	background: linear-gradient(to top, rgb(26 10 28 / .86) 12%, rgb(26 10 28 / .35) 58%, rgb(26 10 28 / 0));
}

.sit-collage__name {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(26px, 3.4vw, 46px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--surface-page);
	text-shadow: 0 2px 10px rgb(26 10 28 / .5);
}

.sit-collage__tile--small .sit-collage__name,
.sit-collage__tile--wide .sit-collage__name {
	font-size: clamp(22px, 2.4vw, 34px);
}

/*
 * The badge is marigold rather than the red of the reference. Deep Red is
 * this brand's trade colour and belongs to the partner side; putting it on a
 * consumer destination tile would be the first place the two halves of the
 * site stopped agreeing with each other.
 */
.sit-collage__badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 4px;
	background: var(--sit-accent);
	color: var(--sit-accent-on);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.sit-collage__tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 3px;
}

/* Two up, then one. The tall tile keeps its prominence on a tablet and gives
   it up on a phone, where every tile is the same size anyway. */
@media (max-width: 900px) {
	.sit-collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, minmax(0, 1fr));
		block-size: clamp(560px, 96vw, 720px);
	}

	.sit-collage__tile--lead  { grid-column: 1 / span 2; grid-row: 1; }
	.sit-collage__tile--wide  { grid-column: 1 / span 2; grid-row: 2; }
	.sit-collage__tile--small { grid-row: 3; }
}

@media (max-width: 560px) {
	.sit-collage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-rows: minmax(0, 1fr);
		block-size: auto;
		gap: var(--wp--preset--spacing--30);
	}

	.sit-collage__tile {
		grid-column: 1 !important;
		grid-row: auto !important;
		aspect-ratio: 4 / 3;
	}
}

/*
 * The three front doors.
 *
 * Equal columns at every width so no door reads as the main one — a supplier
 * arriving at a third-width card next to two half-width ones would be right
 * to think we cared less. They stack on a phone in the order a stranger is
 * most likely to be: traveller, agent, supplier.
 */
.sit-doors > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* The call to action sits on the floor of the card, level across all three,
   however uneven the copy above it is. */
.sit-door .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--40);
}

.sit-door h2 {
	text-wrap: balance;
}

@media (max-width: 781px) {
	.sit-doors {
		gap: var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------------------------------
   The partners page: a panorama, then two doors.
   -------------------------------------------------------------------------- */

/*
 * A 3.5:1 photograph is a band, not a hero — it will not take a headline in
 * the middle without crushing it. The copy sits in the lower left over the
 * deck, which is the darkest quarter of the frame and the one place a white
 * headline holds at every width.
 */
.sit-phero {
	position: relative;
	display: grid;
	align-items: end;
	min-block-size: clamp(300px, 30vw, 460px);
	overflow: hidden;
	isolation: isolate;
}

.sit-phero__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 60% 50%;
	z-index: -2;
}

/* Without this the sun on the water reads straight through the headline. */
.sit-phero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgb(26 10 28 / .84) 0%,
		rgb(26 10 28 / .58) 45%,
		rgb(26 10 28 / 0) 88%);
}

.sit-phero__body {
	padding: var(--wp--preset--spacing--50) clamp(24px, 5vw, 72px) clamp(28px, 4vw, 56px);
	max-inline-size: 46ch;
	color: var(--wp--preset--color--surface-page);
}

/*
 * The eyebrow sits highest in the body, where the scrim is thinnest and the
 * sun through the tree is brightest — marigold on that needs its own shadow
 * or it disappears into the leaves.
 */
.sit-phero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--accent-consumer);
	text-shadow: 0 1px 4px rgb(26 10 28 / .85);
}

.sit-phero__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: clamp(30px, 4.4vw, 54px);
	line-height: 1.05;
	text-wrap: balance;
	color: inherit;
}

.sit-phero__lede {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: rgb(255 255 255 / .88);
}

/*
 * The two doors. A <details> is a heading until it is opened, which is the
 * point: an agent should not have to read the supplier pitch to reach theirs.
 */
.sit-panel {
	margin-block: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-page);
	overflow: hidden;
}

.sit-panel[open] {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand-primary) 35%, transparent);
	box-shadow: var(--wp--preset--shadow--sm);
}

.sit-panel__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	cursor: pointer;
	list-style: none;
	background: var(--wp--preset--color--surface-alt);
}

/* Safari draws its own triangle unless both of these are set. */
.sit-panel__head::-webkit-details-marker {
	display: none;
}

.sit-panel__head:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus-ring);
	outline-offset: -2px;
}

.sit-panel__title {
	position: relative;
	padding-inline-end: 2em;
	font-size: clamp(19px, 2.2vw, 25px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--brand-primary);
}

/* A plus that becomes a minus: the state has to be readable, not inferred. */
.sit-panel__title::after {
	content: "+";
	position: absolute;
	inset-inline-end: 0;
	font-weight: 400;
	color: var(--wp--preset--color--accent-consumer);
}

.sit-panel[open] .sit-panel__title::after {
	content: "–";
}

.sit-panel__aside {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.45;
	color: var(--wp--preset--color--text-secondary);
}

/*
 * Open, the panel is a page: the argument on the left, the form on the right,
 * both visible at once. Stacked, a partner had to read six hundred words and
 * scroll past them before finding out they were being asked for four fields —
 * and the copy exists to get the form filled in, so the form should never be
 * the thing below the fold.
 *
 * One column until there is room for two honest ones. A form squeezed into
 * 300px is worse than a form under the copy.
 */
.sit-panel__body {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
}

@media (min-width: 1024px) {
	.sit-panel__body {
		grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	/* The form stays put while a long argument scrolls past it. */
	.sit-panel__ask {
		position: sticky;
		inset-block-start: var(--wp--preset--spacing--50);
	}
}

.sit-panel__intro,
.sit-panel__close {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.sit-panel__ask .sit-partner {
	margin-block: 0;
}

.sit-panel__close {
	font-weight: 500;
}

.sit-panel__why {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary);
}

.sit-panel__points {
	margin-block: 0 var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}

.sit-panel__points li {
	position: relative;
	padding-inline-start: 1.4em;
	margin-block-end: var(--wp--preset--spacing--30);
	line-height: 1.6;
}

.sit-panel__points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-consumer);
}

.sit-panel .sit-partner {
	margin-block-end: 0;
}

/*
 * The trade forms. Same soft-pink treatment as the traveller enquiry so the
 * site has one idea of what a form looks like, but boxed rather than open:
 * two of them sit on the partners page, and an agent scrolling past needs to
 * see where one application ends and the other begins.
 */
.sit-partner {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid #F3D9F4;
	border-radius: var(--wp--custom--radius--card);
	background-color: #FFF4FE;
}

/*
 * The form is a grid, not a column.
 *
 * Sixty per cent of the wide measure is around 700px, and a single stack of
 * eleven inputs down the middle of it looks like a survey. Two to three to a
 * row keeps the whole ask visible at once, which is what stops a trade form
 * being abandoned halfway. Below the split it collapses to one column, where
 * a single stack is the right answer again.
 */
.sit-partner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--40);
}

@media (min-width: 620px) {
	.sit-partner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1180px) {
	.sit-partner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Everything that is not a single short answer takes the whole row: the
 * notice, the tick lists, the long text, the consent and the button.
 */
.sit-partner > .sit-partner__error,
.sit-partner > .sit-fieldset,
.sit-partner > .sit-hp,
.sit-partner > .sit-field--wide,
.sit-partner > .sit-check--consent,
.sit-partner > .sit-actions {
	grid-column: 1 / -1;
}

.sit-partner .sit-field {
	display: flex;
	flex-direction: column;
	margin-block: 0 var(--wp--preset--spacing--40);
	min-inline-size: 0;
}

/*
 * The control sits on the floor of its cell, so every input in a row lines up
 * however many lines the label above it took. Without this a two-line label
 * pushes its box below its neighbours and the row stops reading as a row.
 */
.sit-partner .sit-field > :is(input, select, textarea) {
	margin-block-start: auto;
}

.sit-partner label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	color: var(--wp--preset--color--text-primary);
}

/* The clarification a field needs, without competing with its name. */
.sit-field__hint {
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
}

.sit-partner input[type="text"],
.sit-partner input[type="email"],
.sit-partner input[type="tel"],
.sit-partner input[type="url"],
.sit-partner select,
.sit-partner textarea {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: var(--wp--custom--control--height);
	padding: 10px var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid #E7C4E9;
	border-radius: 8px;
	background: var(--wp--preset--color--surface-page);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-primary);
}

.sit-partner textarea {
	min-block-size: 0;
	line-height: 1.55;
	resize: vertical;
}

.sit-partner :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus-ring);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--brand-primary);
}

.sit-partner .sit-fieldset {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	border: 0;
}

.sit-partner .sit-fieldset legend {
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	color: var(--wp--preset--color--text-primary);
}

.sit-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.sit-check {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.4;
	cursor: pointer;
}

.sit-check input {
	margin-block-start: 2px;
	flex: none;
}

.sit-check--consent {
	margin-block: var(--wp--preset--spacing--40) 0;
	max-inline-size: 60ch;
}

/* Off-screen rather than display:none — a bot that skips hidden inputs would
   skip the trap, which is the one field we want it to fill. */
.sit-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sit-partner__error {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--accent-consumer);
	background: var(--wp--preset--color--surface-page);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-primary);
}

.sit-partner--done {
	border-left: 3px solid var(--wp--preset--color--brand-primary);
}

.sit-partner--done h3 {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.sit-partner--done p {
	margin: 0;
	max-inline-size: 60ch;
}

.sit-partner .sit-actions {
	margin-block: var(--wp--preset--spacing--40) 0;
}

/* Soft pink, so the form reads as a form.

   surface-tint (#FED6FF) is a signage pink — right for a small plate, far too
   loud across five panels. This is that hue taken most of the way to white:
   enough to separate the brief from the page around it, light enough that
   white inputs still sit clearly on top of it. */
.sit-enquiry fieldset {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid #F3D9F4;
	border-radius: var(--wp--custom--radius--card);
	background-color: #FFF4FE;
}

.sit-enquiry legend {
	padding-inline: var(--wp--preset--spacing--30);
	margin-inline-start: calc(var(--wp--preset--spacing--30) * -1);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary);
}

.sit-grid-2,
.sit-grid-3 {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.sit-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sit-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sit-grid-2 > *,
.sit-grid-3 > * {
	min-inline-size: 0;
}

@media (max-width: 781px) {
	.sit-grid-2,
	.sit-grid-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* White on the pink panel, not pink on pink: an input has to look like the
   one thing on the panel you are meant to type into. */
.sit-enquiry input[type="text"],
.sit-enquiry input[type="email"],
.sit-enquiry input[type="tel"],
.sit-enquiry input[type="number"],
.sit-enquiry select,
.sit-enquiry textarea {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: var(--wp--custom--control--height);
	padding: 10px var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid #E7C4E9;
	border-radius: 8px;
	background: var(--wp--preset--color--surface-page);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-primary);
}

.sit-enquiry :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus-ring);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--brand-primary);
}

.sit-enquiry textarea {
	min-block-size: 0;
	line-height: 1.55;
	resize: vertical;
}

/* Destinations and trip styles: a wrapping row of tick boxes, so the whole
   choice is visible at once instead of hidden behind a select. */
.sit-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
}

.sit-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.3;
	cursor: pointer;
}

.sit-choice input {
	inline-size: 17px;
	block-size: 17px;
	flex: 0 0 auto;
	margin: 0;
}

.sit-field--check {
	align-self: end;
	padding-block-end: 10px;
}

.sit-enquiry__submit {
	min-block-size: var(--wp--custom--control--height-lg);
	padding-inline: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--cta);
	font-weight: 600;
	cursor: pointer;
}

.sit-enquiry__submit:hover {
	filter: brightness(1.12);
}

/* The state after sending. It says what happens next and when, because
   "thanks, we'll be in touch" is what every other form says. */
.sit-enquiry--done {
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface-tint);
}

.sit-enquiry--done h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.1;
	color: var(--wp--preset--color--brand-primary);
}

.sit-enquiry--done p {
	margin: 0 0 var(--wp--preset--spacing--20);
	max-inline-size: var(--wp--custom--measure);
}

/* -- Section rhythm ------------------------------------------------------
   Sections breathe at the band; only paragraphs breathe at paragraph
   spacing (p.21). These bands were carrying 32–48px, so a card row and the
   heading of the next section sat close enough to read as one block, and
   the page ran together.

   The air goes above the heading rather than below it: a heading belongs to
   the thing under it and should stay near it. Declared after the individual
   rules above so it wins on order — same specificity, later wins. */
:is(
	.sit-lede,
	.sit-media,
	.sit-split,
	.sit-trio,
	.sit-panel--split,
	.sit-contact,
	.sit-enquiry
) {
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--80);
}

/* Adjacent margins collapse in normal flow, so this and the 96px above
   resolve to one gap rather than stacking into a hole. */
.wp-block-heading.alignwide {
	margin-block-start: var(--wp--preset--spacing--band);
	margin-block-end: var(--wp--preset--spacing--40);
}

/* -- Footer labels -------------------------------------------------------
   The eyebrow takes brand purple on light fields and the accent on dark ones
   (p.17). The footer's column labels were inheriting the light-field rule:
   #642265 on #2A0E2E is about 1.9:1, which is not a dim label, it is an
   unreadable one — and it fails the contrast minimum as well as the eye. */
.sit-footer :is(h2, h3, h4, h5, h6),
.sit-footer .sit-eyebrow {
	color: var(--wp--preset--color--accent-consumer);
}

/* The site name is the exception: it is a name, not a label, and stays white
   so the accent means one thing here. */
.sit-footer .wp-block-site-title,
.sit-footer .wp-block-site-title a {
	color: var(--wp--preset--color--surface-page);
}

/* -- Closing call to action ----------------------------------------------
   The message on the left, the two things you can do about it on the right.
   Centred, the button sat under a line of type with nothing beside it and
   half the band was empty. */
.sit-cta {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.sit-cta__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--headline);
	line-height: 1.02;
}

.sit-cta__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

.sit-cta__do {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
}

/* The first thing in each column now starts at the same height, so the
   headline and the panel beside it read as one row. */
.sit-cta__title,
.sit-cta__do > :first-child {
	margin-block-start: 0;
}

.sit-cta__button {
	display: inline-flex;
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--50);
	min-block-size: var(--wp--custom--control--height-lg);
	padding-inline: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 900px) {
	.sit-cta {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}
}

/* -- Keep in touch -------------------------------------------------------
   A number given at checkout is not a number given for marketing, so this
   is a separate, explicit ask with its own consent. */
.sit-subscribe {
	inline-size: 100%;
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface-alt);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.sit-subscribe__intro {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
}

.sit-subscribe .sit-field input[type="email"],
.sit-subscribe .sit-field input[type="tel"] {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: var(--wp--custom--control--height);
	padding-inline: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	background: var(--wp--preset--color--surface-page);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
}

.sit-subscribe__submit {
	justify-self: start;
	min-block-size: var(--wp--custom--control--height);
	padding-inline: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	cursor: pointer;
}

.sit-subscribe__submit:hover {
	filter: brightness(1.12);
}

.sit-subscribe__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

.sit-subscribe__note a {
	color: var(--wp--preset--color--brand-primary);
}

/* Off-screen rather than display:none — a bot fills what it can parse, and
   hiding it outright is the one thing that stops it being filled. */
.sit-subscribe__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sit-subscribe__notice {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
}

.sit-subscribe__notice.is-ok {
	background-color: var(--wp--preset--color--surface-tint);
	color: var(--wp--preset--color--brand-primary);
}

.sit-subscribe__notice.is-bad {
	background-color: #FDECEC;
	color: var(--wp--preset--color--accent-trade);
}

/* -- Results heading -----------------------------------------------------
   Sits between the finder and the grid, so it needs air above it and very
   little below — it introduces the results rather than standing alone. */
.sit-results {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.sit-results__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.06;
}

/* No reading measure here. The 66ch cap is right for prose, but this is one
   sentence reading a request back — broken over two lines it looked like a
   paragraph and lost the "you said X, here is X" beat. It runs the full
   1280px column and only wraps when the viewport genuinely cannot hold it. */
.sit-results__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-inline-size: none;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text-secondary);
}

/* Only appears when nothing matched, where it is the whole point of the
   section rather than a secondary action. */
.sit-results__cta {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* -- Destination filter --------------------------------------------------
   Chips, not a select: with a handful of destinations the whole choice is
   visible and one tap wide. Hidden until the script that gives them meaning
   has run — without it every package is already on the page. */
.sit-filters[hidden] {
	display: none;
}

.sit-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--50);
}

.sit-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: var(--wp--custom--control--touch-min);
	padding-inline: var(--wp--preset--spacing--30);
	background: none;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--text-primary);
	cursor: pointer;
	transition:
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-filters__chip:hover {
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--brand-primary);
}

.sit-filters__chip.is-current {
	background-color: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
}

.sit-filters__count {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-variant-numeric: tabular-nums;
	opacity: .7;
}

/* The card is used in two containers now: the grid, and the horizontal
   rails on the tour page. Scoping every rule to .sit-package-grid meant a
   card in a rail lost its link reset, its image ratio and its type — which
   is why the rail rendered underlined text over full-height photographs. */
:is(.sit-package-grid, .sit-rail) .sit-card a {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	text-decoration: none;
	color: inherit;
	height: 100%;
	align-content: start;
}

/* height:auto is load-bearing, not tidiness. WordPress emits width and height
   attributes on every image; those are presentational hints, and while
   width:100% overrides the width one, nothing here was overriding the height.
   An explicit height beats aspect-ratio, so every card was rendering at its
   file's pixel height — a 636px-tall square photograph came out 300 wide and
   636 tall, and the 4:3 below had never once taken effect. */
:is(.sit-package-grid, .sit-rail) .sit-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: var(--wp--custom--radius--card);
}

/* Squares. The 4:3 card is right where the photograph is doing the selling;
   in a dense tiled block the equal box is the point, so the frame is square
   and the photograph cropped to it rather than letterboxed. Must sit after
   the rule above — same specificity, so order is what decides. */
.sit-package-grid--square .sit-card img,
.sit-package-grid--square .sit-card__placeholder {
	aspect-ratio: 1 / 1;
}

/* No photograph yet. A card is never allowed to render as an empty box, so
   the space becomes a deliberate tinted plate carrying the destination —
   the Lattice, at card scale (p.22). */
.sit-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface-tint);
	background-image:
		linear-gradient(45deg, rgb(100 34 101 / .07) 25%, transparent 25% 75%, rgb(100 34 101 / .07) 75%),
		linear-gradient(-45deg, rgb(100 34 101 / .07) 25%, transparent 25% 75%, rgb(100 34 101 / .07) 75%);
	background-size: var(--wp--custom--lattice--sm) var(--wp--custom--lattice--sm);
}

.sit-card__placeholder span {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary);
}

:is(.sit-package-grid, .sit-rail) .sit-card__body {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

:is(.sit-package-grid, .sit-rail) .sit-card h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

:is(.sit-package-grid, .sit-rail) .sit-card a:hover h3 {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sit-card__price {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: 22px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-primary);
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

/* Absent is not free. A package without a fare says so, quietly, rather than
   leaving the space where a number belongs blank. */
.sit-card__price--tbc {
	font-size: 18px;
	color: var(--wp--preset--color--text-secondary);
}

/* Empty is a state we designed, not a blank grid. A destination with no
   packages yet should still be able to take an enquiry. */
.sit-empty {
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) dashed var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
}

.sit-empty p {
	margin: 0;
	max-width: 52ch;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary);
}

/* --------------------------------------------------------------------------
   20. Legal links

   Findable, not buried. Razorpay checks for these, and so does a customer
   deciding whether to trust a future-dated purchase.
   -------------------------------------------------------------------------- */

/*
 * Social links in the footer.
 *
 * Icon plus label rather than icon alone. A bare glyph is a guess for anyone
 * using a screen reader and a smaller guess for everyone else — and there are
 * only three, so the words cost one line and remove the ambiguity entirely.
 * The SVGs are inline and inherit currentColor, so nothing is fetched and they
 * sit correctly on the dark footer without a second asset.
 */
.sit-social {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sit-social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--wp--custom--control--touch-min);
	padding: 8px 14px 8px 11px;
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition:
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-social svg {
	inline-size: 19px;
	block-size: 19px;
	flex: none;
}

.sit-social a:hover,
.sit-social a:focus-visible {
	background-color: rgb(255 255 255 / .1);
	border-color: rgb(255 255 255 / .5);
}

.sit-social a:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}

/* Under 380px three pills will not sit on one line; the labels go and the
   accessible name carries on doing the work. */
@media (max-width: 379px) {
	.sit-social a { padding: 10px; }
	.sit-social a span {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px; padding: 0;
		overflow: hidden; clip-path: inset(50%);
		white-space: nowrap;
	}
}

.sit-legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body-sm);
}

.sit-legal-links a {
	color: inherit;
	text-decoration: none;
	opacity: .82;
	min-height: var(--wp--custom--control--touch-min);
	display: inline-flex;
	align-items: center;
}

.sit-legal-links a:hover,
.sit-legal-links a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   21. Header: editorial nav, then commerce

   Two clusters that read as two clusters. Destinations and Packages are
   browsing; account and cart are transacting. A hairline separates them so
   the header does not read as one undifferentiated row of links.
   -------------------------------------------------------------------------- */

/*
 * The sticky lives on the template-part wrapper, not on the bar inside it.
 *
 * A template part renders its own element around the part's content, so the
 * markup is `<header class="wp-block-template-part"><div class="sit-header">`.
 * A sticky element can only travel inside its parent's box, and that wrapper
 * is exactly one header tall — so `position: sticky` on .sit-header computed
 * fine, reported fine, and did nothing at all, because there was nowhere to
 * travel to. Moving it one level up gives it the whole page to stick against.
 */
.sit-header-shell {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* In-page anchors must not land underneath it. */
html {
	/* Tracks the header: 24px padding either side of a logo up to 60px tall. */
	scroll-padding-block-start: 116px;
}

.sit-header__row {
	gap: var(--wp--preset--spacing--40);
}

.sit-header__right {
	gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--30);
}

/* -- Primary menu -------------------------------------------------------- */

.sit-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
}

.sit-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--control--touch-min);
	padding-inline: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--text-primary);
	border-bottom: 2px solid transparent;
	transition: color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-nav a:hover,
.sit-nav a:focus-visible {
	color: var(--wp--preset--color--brand-primary);
}

/* Current page carries the brand, not the accent — one accent per page. */
.sit-nav a[aria-current="page"] {
	color: var(--wp--preset--color--brand-primary);
	border-bottom-color: var(--wp--preset--color--brand-primary);
}

/* -- Mobile menu --------------------------------------------------------- */

.sit-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--control--touch-min);
	min-inline-size: var(--wp--custom--control--touch-min);
	padding-inline: var(--wp--preset--spacing--20);
	background: none;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	cursor: pointer;
}

.sit-nav-toggle__close { display: none; }
[data-open] .sit-nav-toggle__open { display: none; }
[data-open] .sit-nav-toggle__close { display: inline-flex; }

/*
 * The panel only collapses once the script has marked the nav as enhanced.
 * Without JavaScript the links stay visible rather than being sealed behind
 * a button that cannot open.
 */
@media (max-width: 900px) {
	.sit-nav-toggle { display: inline-flex; }

	[data-sit-nav][data-enhanced] .sit-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--surface-page);
		border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
		box-shadow: var(--wp--preset--shadow--xl);
		z-index: 60;
	}

	[data-sit-nav][data-enhanced][data-open] .sit-nav { display: flex; }

	[data-sit-nav][data-enhanced] .sit-nav a {
		min-block-size: 52px;
		padding-inline: 0;
		font-size: var(--wp--preset--font-size--body);
		border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	}

	[data-sit-nav][data-enhanced] .sit-nav li:last-child a { border-bottom: 0; }

	[data-sit-nav][data-enhanced] .sit-nav a[aria-current="page"] {
		border-bottom-color: var(--wp--preset--color--hairline);
		font-weight: 600;
	}

	/* The panel hangs off the row, so the row is its containing block. */
	.sit-header__row { position: relative; }
}

/* -- Account and cart ---------------------------------------------------- */

.sit-account {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--40);
	border-left: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
}

.sit-account__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--control--touch-min);
	padding-inline: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
	white-space: nowrap;
	transition: color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-account__link:hover,
.sit-account__link:focus-visible {
	color: var(--wp--preset--color--brand-primary);
}

.sit-account__link--cart {
	position: relative;
}

/*
 * The count is a pill because Marigold cannot be text (p.17) — dark figure
 * on the accent passes at 14.6:1, the reverse fails at every size.
 */
.sit-account__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--sit-accent);
	color: var(--sit-accent-on);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* On narrow screens the labels go and the icons carry it. */
@media (max-width: 781px) {
	.sit-account {
		padding-left: var(--wp--preset--spacing--30);
		gap: var(--wp--preset--spacing--20);
	}

	.sit-account__link > span:not(.sit-account__count) {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/*
	 * The count rides on the cart rather than beside it.
	 *
	 * As a sibling it added its own width plus a gap to a header row that
	 * fits a phone exactly and no more — so the moment anything went in the
	 * basket the whole bar wrapped, and the logo and the menu ended up on
	 * separate lines. On the icon it costs nothing, which is also where a
	 * shopper expects to find it.
	 */
	.sit-account__link--cart {
		position: relative;
	}

	.sit-account__count {
		position: absolute;
		inset-block-start: -5px;
		inset-inline-end: -9px;
		min-width: 18px;
		height: 18px;
		padding-inline: 5px;
		font-size: 11px;

		/* A ring in the header's own colour, so the badge reads as sitting
		   on top of the cart rather than welded to it. */
		box-shadow: 0 0 0 2px var(--wp--preset--color--surface-page);
	}

	/* A little less mark, so the row has room even at 320px. */
	.sit-logo--horizontal {
		min-width: 118px;
	}

	/*
	 * The phone keeps the taller mark but not the taller bar. A sticky header
	 * is a tax on every screen, and 24px either side of a 46px logo is a fifth
	 * of an iPhone SE gone before any content starts.
	 */
	.sit-header {
		padding-block: var(--wp--preset--spacing--30) !important;
	}
}

/* --------------------------------------------------------------------------
   22. Hero carousel — brand re-point

   The component itself is vendored unchanged from thumb360-website-2.0 so it
   can be updated from source. Everything below is a variable re-point, which
   is the whole extent of theming it needs.

   Note the layout mode. That project's standing rule is "text left, media
   right", so .hsc--split is its default. This brand's rule is the opposite:
   full-bleed photography under a scrim, with the headline in the lower third
   (p.29, p.33). So destination heroes use .hsc--full, which is on-brand here
   rather than a departure.
   -------------------------------------------------------------------------- */

.hsc--siamintravel {
	/* Content sits over photography, so the ink is white and the rules are
	   white alphas — not the page's near-black. */
	--hsc-ink:         var(--wp--preset--color--surface-page);
	--hsc-ink-soft:    rgb(255 255 255 / .82);
	--hsc-ground:      var(--wp--preset--color--brand-primary);

	/* Follows the page's single accent, so a partner page would carry Deep Red
	   here without a second rule (p.16). */
	--hsc-accent:      var(--sit-accent);

	--hsc-rule:        rgb(255 255 255 / .28);
	--hsc-rule-strong: rgb(255 255 255 / .62);

	--hsc-dur:         var(--wp--custom--dur--base);
	--hsc-dur-nav:     var(--wp--custom--dur--fast);
	--hsc-ease:        var(--wp--custom--ease--standard);

	/* Rounded on all four corners — the Aperture's "full" crop (p.22). */
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	position: relative;
}

/*
 * Room at the foot of the slide for the trip finder that straddles it, so the
 * headline and CTA are never sitting underneath the card.
 */
/*
 * The component sets no inline padding in full-bleed mode, so without this
 * the headline runs to the very edge of the rounded frame. Bottom padding
 * also reserves room for the trip finder that straddles the edge.
 */
.hsc--siamintravel .hsc__body {
	padding-inline: clamp(24px, 5vw, 72px);
	padding-block-start: clamp(28px, 5vw, 56px);
	padding-block-end: clamp(104px, 12vw, 160px);
	/* 80% of the frame, overriding the component's 34ch cap. */
	max-inline-size: 80%;
}

/* -- Arrows, left and right, over the photograph ------------------------- */

.hsc--siamintravel .hsc__controls {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 3;
}

.hsc--siamintravel .hsc__btn {
	pointer-events: auto;
	position: absolute;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--wp--custom--radius--pill);
	background: rgb(255 255 255 / .16);
	border: 1px solid rgb(255 255 255 / .38);
	color: #fff;
	backdrop-filter: blur(6px);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.hsc--siamintravel .hsc__btn:hover,
.hsc--siamintravel .hsc__btn:focus-visible {
	background: rgb(255 255 255 / .30);
}

.hsc--siamintravel .hsc__btn:nth-child(1) {
	inset-block-start: 50%;
	transform: translateY(-50%);
	inset-inline-start: clamp(10px, 2vw, 24px);
}

/* Pulled inboard so it clears the numbered rail on the right edge. */
.hsc--siamintravel .hsc__btn:nth-child(2) {
	inset-block-start: 50%;
	transform: translateY(-50%);
	inset-inline-end: clamp(64px, 8vw, 96px);
}

/*
 * On a phone the arrows come off the vertical centre.
 *
 * They are pinned to 50% of the frame, which was clear of the copy while the
 * hero was tall. With the hero capped so the trip finder reaches the first
 * screen, that centre line now falls on the eyebrow — "Bangkok · Chao Phraya"
 * reading as "gkok · Chao Phraya" behind a button.
 *
 * They are removed rather than moved. A short hero has no strip left that the
 * copy, the pause button and the numbered rail are not already using, and on
 * a touch screen the arrows are the least used of the three ways to change
 * slide — swipe is the gesture people reach for, and the rail still gives
 * direct access to any story by name. Nothing is lost that a thumb had.
 */
@media (max-width: 781px) {
	.hsc--siamintravel .hsc__btn:nth-child(1),
	.hsc--siamintravel .hsc__btn:nth-child(2) {
		display: none;
	}
}

/* Pause belongs out of the way, not between the two arrows. */
.hsc--siamintravel .hsc__btn:nth-child(3) {
	inset-block-start: clamp(10px, 2vw, 24px);
	inset-inline-end: clamp(10px, 2vw, 24px);
}

/* -- Numbered rail: 1 to 5, top to bottom, on the right ------------------ */

.hsc--siamintravel .hsc__nav {
	position: absolute;
	inset-inline-end: clamp(12px, 2.2vw, 26px);
	inset-inline-start: auto;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 3;

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	max-inline-size: none;
	inline-size: auto;
	overflow: visible;
}

.hsc--siamintravel .hsc__story {
	display: grid;
	justify-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: rgb(255 255 255 / .62);
	transition: color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.hsc--siamintravel .hsc__story:hover,
.hsc--siamintravel .hsc__story:focus-visible { color: #fff; }

.hsc--siamintravel .hsc__story[aria-selected="true"] { color: #fff; }

.hsc--siamintravel .hsc__story-n {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/*
 * The story title is hidden to the eye but not to a screen reader — it is
 * what makes the tab announce "Krabi" rather than "3", and it names the
 * panel it controls.
 */
.hsc--siamintravel .hsc__story-t {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The rail stays rendered and stays horizontal, for two reasons.
 *
 * It must be rendered because the bar's CSS animation IS the autoplay clock —
 * its animationend advances the slide — so display:none would silently stop
 * rotation rather than just hide a bar.
 *
 * It must stay horizontal because that animation is `transform: scaleX()` from
 * a left origin, and the script advances only on an animationend whose name is
 * exactly `hsc-fill`. Substituting a scaleY keyframe to make a vertical rail
 * would break autoplay outright, so the numbers stack vertically and each one
 * carries a short horizontal rail beneath it.
 */
.hsc--siamintravel .hsc__rail {
	display: block;
	inline-size: 24px;
	block-size: 2px;
	border-radius: 2px;
	background: rgb(255 255 255 / .30);
	overflow: hidden;
}

.hsc--siamintravel .hsc__bar {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background: var(--sit-accent);
}

@media (max-width: 781px) {
	.hsc--siamintravel .hsc__nav { gap: var(--wp--preset--spacing--20); }
	.hsc--siamintravel .hsc__rail { inline-size: 18px; }

	/*
	 * Undo the component's phone rule for the numbers.
	 *
	 * hero-carousel.css turns the rail into a horizontal scroller under 720px
	 * and gives each story `flex: 0 0 min(62vw, 15rem)` — a sensible width for
	 * a row of named cards. This brand stacks the rail vertically, so that
	 * basis stops being a width and becomes a height: every number claimed
	 * 240px of column, which spread five of them across three screens and
	 * left 3 and 4 floating in the middle of the photograph with the rest
	 * pushed out of the frame entirely.
	 */
	.hsc--siamintravel .hsc__story {
		flex: 0 0 auto;
	}
	.hsc--siamintravel .hsc__btn:nth-child(1),
	.hsc--siamintravel .hsc__btn:nth-child(2) { inset-block-start: 34%; }
	.hsc--siamintravel .hsc__btn:nth-child(2) { inset-inline-end: clamp(52px, 14vw, 72px); }
}

/*
 * --hsc-overlay is a number the component feeds into rgb(… / var(--hsc-overlay)),
 * not a gradient. Set the strength here, then restate the gradient so it uses
 * the brand's dark field (26 10 28) rather than the component's neutral
 * (18 16 15) — the same scrim every other photograph on this site carries.
 */
.hsc--siamintravel { --hsc-overlay: .88; }

.hsc--siamintravel .hsc__slide::after {
	background: linear-gradient(
		to top,
		rgb(26 10 28 / .92) 0%,
		rgb(26 10 28 / .78) 34%,
		rgb(26 10 28 / .46) 62%,
		rgb(26 10 28 / .10) 88%,
		rgb(26 10 28 / 0) 100%
	);
}

.hsc--siamintravel .hsc__eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sit-accent);
	margin: 0 0 var(--wp--preset--spacing--30);
}

/*
 * Display scale, not H1. A homepage hero carries the master proposition, and
 * p.19 sets Display at 44-88 / .94 / -.02em — so going bigger here moves
 * toward the guide rather than away from it. Weight is 700 rather than the
 * specified 600, which remains a deliberate brand-owner deviation.
 */
.hsc--siamintravel .hsc__title {
	/* 0.6x the Display token, so it still tracks the scale if that changes. */
	font-size: calc(var(--wp--preset--font-size--display) * .6);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.02em;
	margin: 0;
	color: inherit;
	text-wrap: balance;

	/*
	 * A soft shadow, as a second line of defence only. The guide is explicit
	 * that contrast is not to be rescued with text-shadow alone (p.17) — the
	 * scrim still does that work. This just keeps the edges of the letterform
	 * from dissolving into high-frequency detail like the market awnings.
	 */
	text-shadow: 0 1px 2px rgb(26 10 28 / .45), 0 2px 14px rgb(26 10 28 / .40);

	/*
	 * Hard two-line ceiling. `balance` alone only evens the lines out; it will
	 * still run to three or four if the headline is long, which is what pushes
	 * a hero out of shape. This clamps instead of hoping.
	 *
	 * It truncates rather than shrinks, so headlines must be written to fit —
	 * five to eight words at this size. The guide already asks for that (p.35
	 * caps a hero headline at eight words).
	 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * The subheadline is Jost Light at a large size: thin in weight but big
 * enough to carry, which is how a light face reads as deliberate rather
 * than as body copy that wandered into the hero.
 */
.hsc--siamintravel .hsc__desc {
	font-size: clamp(17px, 1.9vw, 22px);
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: 0;
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 46ch;
	color: var(--hsc-ink-soft);
}

/* --------------------------------------------------------------------------
   23. Trip finder

   Sits under the hero. One row on desktop, stacked on a phone, 44px controls
   throughout. Deliberately few fields: every one added is one more decision
   between a visitor and a result.
   -------------------------------------------------------------------------- */

.sit-finder {
	background: var(--wp--preset--color--surface-page);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--xl);
	padding: clamp(20px, 3vw, 32px);
	position: relative;
	z-index: 4;

	max-inline-size: min(980px, 92%);
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--60);
}

/*
 * On the homepage the finder straddles the hero's bottom edge: pulled up so
 * it sits half on the photograph, with the hero reserving matching bottom
 * padding so nothing is hidden behind it.
 *
 * That pull is opt-in rather than the default. The same block now also opens
 * the packages page, where there is no hero to straddle — it simply rode up
 * over the page title and cut the word "Packages" in half.
 */
.sit-finder-overlap .sit-finder {
	margin-block-start: clamp(-120px, -9vw, -64px);
}

@media (max-width: 781px) {
	/*
	 * On a phone the overlap costs more than it gains — let it sit under.
	 * Close under, though: the gap here is the difference between the finder
	 * being on screen at first paint and being a scroll away.
	 */
	.sit-finder,
	.sit-finder-overlap .sit-finder {
		max-inline-size: 100%;
		margin-block-start: var(--wp--preset--spacing--20);
	}
}

/*
 * Portrait tiles are a desktop idea. On a phone the rail is already one card
 * wide, and a 3:4 crop makes each one taller than the viewport — so the
 * destination photographs go back to landscape where the screen is narrow.
 */
@media (max-width: 781px) {
	.sit-rail__place {
		aspect-ratio: 4 / 3;
	}
}

.sit-finder__title {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.sit-finder__row {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-items: end;
	grid-template-columns: 1fr;
}

@media (min-width: 782px) {
	.sit-finder__row {
		grid-template-columns: 2fr 1fr 1fr auto;
	}

	.sit-finder__field--budget { grid-column: 1 / -2; }
	.sit-finder:has(.sit-finder__field--budget) .sit-finder__row {
		grid-template-columns: 2fr 1fr 1fr auto;
	}
}

.sit-finder__field { margin: 0; display: grid; gap: var(--wp--preset--spacing--20); }

.sit-finder__field label {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.sit-finder__field--budget {
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.sit-finder__field--budget input[type="range"] {
	width: 100%;
	min-height: auto;
	padding: 0;
	border: 0;
	accent-color: var(--wp--preset--color--brand-primary);
}

.sit-finder__budget-out {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-primary);
	white-space: nowrap;
}

/*
 * One height for every control, set on the elements themselves rather than
 * the wrapper — a select, a number input and a button each bring their own
 * intrinsic height, and only pinning all three makes the row line up.
 */
.sit-finder__field select,
.sit-finder__field input[type="number"],
.sit-finder__submit button {
	block-size: var(--wp--custom--control--height-lg);
	min-height: var(--wp--custom--control--height-lg);
	padding-block: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1;
	box-sizing: border-box;
}

.sit-finder__submit { margin: 0; }

/*
 * WooCommerce ships its own button styling into block themes — note the
 * `woocommerce-block-theme-has-button-styles` class on <body> — and it was
 * beating the plain `.sit-button--accent` class, leaving the submit rendering
 * as bare bold text. Qualifying with the element name lifts this above it
 * without resorting to !important.
 */
.sit-finder__submit button.sit-button,
.sit-finder__submit button.sit-button--accent {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	padding-inline: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--sit-accent);
	color: var(--sit-accent-on);
	font-size: var(--wp--preset--font-size--cta);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: filter var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.sit-finder__submit button.sit-button:hover,
.sit-finder__submit button.sit-button:focus-visible {
	filter: brightness(.94);
}

/* --------------------------------------------------------------------------
   24. Print — quotations, itineraries, vouchers

   A document that earns trust, not an advertisement. Blades off; the Thread
   alone carries the brand (p.23, p.30, p.32).
   -------------------------------------------------------------------------- */

@media print {
	.sit-lattice::before,
	.sit-scrim::after,
	.sit-display {
		display: none;
	}

	.sit-card {
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
		box-shadow: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}