/* =========================================================================
   Sewa Mobil Harian — design system

   The palette is blue-led and deliberately all-light: a cool paper ground,
   three soft blue-family tints, and one saturated azure reserved for actions.
   Nothing sits on a dark ground anywhere, which also means no text is ever laid
   over a photograph — captions live beneath their image, so no scrims or
   overlays are needed.

   Ink is a blue-black rather than a neutral grey, so body copy belongs to the
   same family as everything around it instead of reading as a second palette.

   The recurring shape is an arch: photographs are framed with a rounded top,
   which carries through the hero, the fleet rail, the city tiles and the
   route cards, and is what makes the theme recognisable at a glance.
   ========================================================================= */

:root {
	/* Ground */
	--paper: #f7fafd;
	--paper-deep: #eaf2fb;
	--white: #fff;

	/* Tints — used as photo backdrops and section grounds */
	--tint-mist: #e5edf7;
	--tint-sky: #d9e8fb;
	--tint-aqua: #d6ecf1;

	/* Ink */
	--ink: #132031;
	--ink-2: #4f6076;
	--ink-3: #8593a6;
	--line: #dae5f1;
	--line-soft: #e9f0f8;

	/* Action — azure at 5.2:1 against white, so button labels stay legible */
	--blue: #1560d0;
	--blue-deep: #0e4aa8;
	--blue-wash: #e7f0fe;
	--teal: #0d6f80;
	--teal-wash: #e0f0f4;

	/* Shape — the arch is proportional so it domes identically at any frame size */
	--radius: 1.25rem;
	--radius-sm: 0.75rem;
	--radius-pill: 999px;

	/* Rhythm */
	--gutter: clamp(1.25rem, 5vw, 3rem);
	--maxw: 78rem;
	--section-y: clamp(4rem, 9vw, 8.5rem);

	/* Type — sans throughout; Archivo has a width axis the headings lean on */
	--font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Depth — a cool, shallow shadow so nothing reads as a dark block */
	--lift: 0 1px 2px rgb(20 45 85 / 7%), 0 12px 32px rgb(20 45 85 / 9%);
	--lift-sm: 0 1px 2px rgb(20 45 85 / 7%), 0 4px 14px rgb(20 45 85 / 7%);
}

/* Neither Latin family covers CJK, so Mandarin and Korean fall to Noto Sans. */
.script-cjk {
	--font-display: "Archivo", "Noto Sans SC", "Noto Sans KR", sans-serif;
	--font-body: "Noto Sans SC", "Noto Sans KR", "Manrope", system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	font-variation-settings: "wdth" 100, "wght" 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}

/*
   Big headlines run slightly wide and heavier on Archivo's width axis. That
   extra breadth is what gives the display voice its character — at wdth 100 it
   would read as any other grotesque.
*/
.smh-hero__title,
.smh-head__title,
.smh-band h2,
.smh-pagehead h1 {
	font-variation-settings: "wdth" 112, "wght" 650;
	letter-spacing: -0.035em;
	line-height: 1.02;
}

.script-cjk h1,
.script-cjk h2,
.script-cjk h3,
.script-cjk h4 {
	font-variation-settings: normal;
	letter-spacing: 0;
	line-height: 1.3;
}

/*
   Korean words must break at spaces, not between syllables — the default would
   split 추가 across two lines. Mandarin is left alone, where per-character
   breaking is correct and keep-all would overflow instead.
*/
.lang-ko { word-break: keep-all; overflow-wrap: break-word; }

p { margin: 0; }

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
	border-radius: 4px;
}

.smh-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--white);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--radius-sm) 0;
}
.smh-skip:focus { left: 0; }

.smh-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */

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

.smh-section { padding-block: var(--section-y); }
.smh-section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.smh-section--mist { background: var(--paper-deep); }
.smh-section--aqua { background: var(--tint-aqua); }
.smh-section--sky { background: var(--tint-sky); }

/* Section headings carry a counter and a hairline, magazine-style. */
.smh-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.smh-head__title {
	font-size: clamp(2.025rem, 4.4vw, 3.375rem);
	max-width: 20ch;
}

.smh-head__aside {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--ink-2);
	font-size: 1.025rem;
}

.smh-rule {
	height: 1px;
	background: var(--line);
	border: 0;
	margin: 0;
}

.smh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
}

.script-cjk .smh-eyebrow { letter-spacing: 0.06em; text-transform: none; }

.smh-lede {
	color: var(--ink-2);
	font-size: clamp(1.125rem, 1.6vw, 1.275rem);
	max-width: 46ch;
}

/* -------------------------------------------------------------------------
   Photo frames
   ------------------------------------------------------------------------- */

.smh-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ratio, 4 / 3);
	border-radius: var(--radius);
	background: var(--tint-mist);
	isolation: isolate;
}

.smh-frame.tint-mist { background: var(--tint-mist); }
.smh-frame.tint-sky { background: var(--tint-sky); }
.smh-frame.tint-aqua { background: var(--tint-aqua); }

.smh-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* An empty frame is a deliberate tinted panel, not a broken image. */
.smh-frame:empty::after {
	content: "";
	position: absolute;
	inset: 12%;
	border: 1px dashed rgb(19 32 49 / 12%);
	border-radius: inherit;
}

.smh-frame--arch {
	border-radius:
		46% 46% var(--radius) var(--radius) /
		30% 30% var(--radius) var(--radius);
}

.smh-frame--zoom img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
a:hover .smh-frame--zoom img,
a:focus-visible .smh-frame--zoom img { transform: scale(1.04); }

/* -------------------------------------------------------------------------
   Buttons and chips
   ------------------------------------------------------------------------- */

.smh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 1.075rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.smh-btn:active { transform: translateY(1px); }

.smh-btn--primary { background: var(--blue); color: var(--white); }
.smh-btn--primary:hover { background: var(--blue-deep); }

.smh-btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}
.smh-btn--ghost:hover { border-color: var(--ink); }

.smh-btn--solid { background: var(--white); color: var(--ink); box-shadow: var(--lift-sm); }
.smh-btn--solid:hover { color: var(--blue); }

.smh-btn--wide { width: 100%; }
.smh-btn--sm { padding: 0.6rem 1.1rem; font-size: 1rem; }

.smh-btn .smh-icon { width: 1.15em; height: 1.15em; }

.smh-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	color: var(--blue);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.smh-link:hover { border-bottom-color: currentcolor; }
.smh-link .smh-icon { width: 1.05em; height: 1.05em; transition: transform 0.2s; }
.smh-link:hover .smh-icon { transform: translateX(3px); }

.smh-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--white);
	border: 1px solid var(--line);
	font-size: 0.925rem;
	color: var(--ink-2);
	white-space: nowrap;
}
.smh-chip .smh-icon { width: 1rem; height: 1rem; color: var(--ink-3); }

.smh-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.smh-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s, background-color 0.25s;
}
.smh-header.is-stuck { border-bottom-color: var(--line); }

.smh-header__bar {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 4.5rem;
}

/* The brand must stay on one line — wrapped, it doubles the header height. */
.smh-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.075rem, 3.6vw, 1.275rem);
	letter-spacing: -0.03em;
	white-space: nowrap;
	margin-right: auto;
}
.smh-brand span { color: var(--blue); }

.smh-nav { display: none; gap: 1.75rem; }
.smh-nav a {
	font-size: 1.075rem;
	font-weight: 500;
	color: var(--ink-2);
	padding-block: 0.25rem;
	border-bottom: 1.5px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.smh-nav a:hover { color: var(--ink); }
.smh-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--blue); }

.smh-header__actions { display: flex; align-items: center; gap: 0.6rem; }

/* On phones the sticky dock already carries the booking action, and keeping a
   third control here pushes the burger off the edge. */
@media (width < 48rem) {
	.smh-header__actions > .smh-btn { display: none; }
}

/* Language switcher */
.smh-lang { position: relative; }

.smh-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.975rem;
	font-weight: 600;
	cursor: pointer;
}
.smh-lang__toggle:hover { border-color: var(--ink); }
.smh-lang__toggle .smh-icon { width: 0.9rem; height: 0.9rem; transition: transform 0.2s; }
.smh-lang__toggle[aria-expanded="true"] .smh-icon { transform: rotate(180deg); }

.smh-lang__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 12rem;
	padding: 0.4rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--lift);
	display: none;
}
.smh-lang__menu[data-open] { display: block; }

.smh-lang__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0.75rem;
	border-radius: 0.5rem;
	font-size: 1.025rem;
	color: var(--ink-2);
}
.smh-lang__menu a:hover { background: var(--paper-deep); color: var(--ink); }
.smh-lang__menu a[aria-current] { color: var(--blue); font-weight: 600; }
.smh-lang__menu small { color: var(--ink-3); font-size: 0.875rem; }

/* Mobile menu */
.smh-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.7rem;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	cursor: pointer;
}
.smh-burger i {
	display: block;
	height: 1.5px;
	background: var(--ink);
	transition: transform 0.25s, opacity 0.2s;
}
.smh-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.smh-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.smh-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.smh-drawer {
	display: none;
	border-top: 1px solid var(--line);
	background: var(--paper);
	padding-block: 1rem 1.5rem;
}
.smh-drawer[data-open] { display: block; }
.smh-drawer nav { display: grid; gap: 0.25rem; }
.smh-drawer nav a {
	padding: 0.7rem 0;
	font-family: var(--font-display);
	font-size: 1.625rem;
	font-weight: 500;
	border-bottom: 1px solid var(--line-soft);
}
.smh-drawer .smh-btn { margin-top: 1.25rem; }

@media (width >= 62rem) {
	.smh-nav { display: flex; }
	.smh-burger { display: none; }
	.smh-drawer { display: none !important; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.smh-hero { padding-block: clamp(2rem, 4vw, 3.5rem) 0; }

.smh-hero__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
}

.smh-hero__copy { display: grid; gap: 1.25rem; justify-items: start; }

/* 17ch, not 14 — Archivo at wdth 112 sets much wider than a normal grotesque,
   and the tighter measure pushed the headline onto a third line. */
.smh-hero__title {
	font-size: clamp(2.525rem, 6.2vw, 4.525rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	max-width: 17ch;
}

.smh-hero__sub {
	font-size: clamp(1.175rem, 2vw, 1.475rem);
	color: var(--ink-2);
	max-width: 32ch;
}

.smh-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.smh-hero__media { position: relative; }

/* Keep the arch from pushing the fold down on short, wide screens. */
.smh-hero__media > .smh-frame {
	max-height: min(76vh, 40rem);
	margin-inline: auto;
}

.smh-hero__inclusions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

@media (width >= 62rem) {
	.smh-hero__grid { grid-template-columns: 1fr 1.05fr; }
	.smh-hero__title { font-size: clamp(2.925rem, 4.2vw, 4.525rem); }
}

/* Quick quote card, overlapping the hero photograph */
.smh-quote {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--lift);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	display: grid;
	gap: 0.9rem;
}

.smh-quote__title {
	font-family: var(--font-display);
	font-size: 1.225rem;
	font-weight: 600;
}

.smh-field { display: grid; gap: 0.35rem; }
.smh-field > span {
	font-size: 0.905rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink-2);
}

.smh-field input,
.smh-field select,
.smh-field textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-size: 1.075rem;
	transition: border-color 0.2s, background-color 0.2s;
	appearance: none;
}
.smh-field textarea { min-height: 6rem; resize: vertical; }
.smh-field input:focus,
.smh-field select:focus,
.smh-field textarea:focus { background: var(--white); border-color: var(--ink-3); }

.smh-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6076' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.1rem;
	padding-right: 2.4rem;
}

.smh-quote__row { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; }

.smh-quote__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line-soft);
}
.smh-quote__total dt { font-size: 0.975rem; color: var(--ink-2); }
.smh-quote__total dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.525rem;
	font-weight: 700;
}

.smh-quote__note { font-size: 0.875rem; color: var(--ink-3); }

@media (width >= 62rem) {
	/* Wide enough that "Lama sewa (hari)" stays on one line and the vehicle
	   select is not clipped — both wrapped at the old 21rem once type grew. */
	.smh-hero__media .smh-quote {
		position: absolute;
		left: -3.5rem;
		bottom: 2.5rem;
		width: 24.5rem;
		z-index: 2;
	}
}

/* -------------------------------------------------------------------------
   Inclusions strip
   ------------------------------------------------------------------------- */

.smh-inclusions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.smh-inclusions li {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.35rem 1.1rem;
	background: var(--paper);
	list-style: none;
}
.smh-inclusions .smh-icon { color: var(--blue); }
.smh-inclusions b { font-size: 1.045rem; font-weight: 600; line-height: 1.3; }

.smh-inclusions__note {
	margin-top: 1rem;
	font-size: 0.975rem;
	color: var(--ink-3);
}

/* -------------------------------------------------------------------------
   Fleet rail
   ------------------------------------------------------------------------- */

/*
   A white panel on the page ground, with the photograph inset rather than bled
   to the card edge — that inset is what makes a row of them read as tidy.

   The card is a grid whose body row grows, so the spec list is pinned to the
   bottom of every card and the rows line up horizontally across the whole rail
   no matter how long a model name runs.
*/
.smh-car {
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.75rem;
	overflow: hidden;
}

.smh-car__link { display: block; }
.smh-car__media { border-radius: var(--radius-sm); }

.smh-car__body {
	display: grid;
	align-content: start;
	gap: 0.3rem;
	padding: 0.9rem 0.4rem 0.25rem;
}

.smh-car__name {
	font-size: 1.175rem;
	font-weight: 600;
	line-height: 1.25;
	min-height: 2.5em;
}

.smh-car__for {
	font-size: 0.975rem;
	line-height: 1.4;
	color: var(--ink-2);
	min-height: 2.8em;
}

/* Label/value rows: muted label, plain body font for the value. */
.smh-car__specs {
	margin: 0.6rem 0 0;
	align-self: end;
	border-top: 1px solid var(--line-soft);
}

.smh-car__spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line-soft);
}
.smh-car__spec:last-child { border-bottom: 0; }

.smh-car__spec dt {
	font-size: 0.905rem;
	color: var(--ink-3);
	white-space: nowrap;
}

.smh-car__spec dd {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.045rem;
	font-weight: 500;
	color: var(--ink);
	text-align: right;
}

.smh-car__spec--price dd { font-weight: 700; }
.smh-car__spec--price dd span {
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--ink-3);
}

/*
   The fleet, on both the home and services pages. Fixed column counts rather
   than auto-fill: with eight cars, auto-fill drifts to four or five narrow
   columns on a wide screen, and the photographs stop being readable.
*/
.smh-grid-cars {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}

@media (width >= 34rem) {
	.smh-grid-cars { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 56rem) {
	.smh-grid-cars { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   Coverage
   ------------------------------------------------------------------------- */

/* Nine Bali areas: three across on desktop, two on tablet, one on a phone. */
.smh-areas {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}
@media (width >= 34rem) { .smh-areas { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 56rem) { .smh-areas { grid-template-columns: repeat(3, 1fr); } }

.smh-area { display: grid; gap: 0.6rem; align-content: start; }
.smh-area__name {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--font-display);
	font-size: 1.275rem;
	font-weight: 600;
}

/* Drive time is the useful fact here, so it gets the accent treatment. */
.smh-area__drive {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--blue);
	background: var(--blue-wash);
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.smh-area__note { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }

/* -------------------------------------------------------------------------
   Airport transfer
   ------------------------------------------------------------------------- */

.smh-airport {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
@media (width >= 56rem) {
	.smh-airport { grid-template-columns: 0.85fr 1fr; }
}

.smh-airport__copy { display: grid; gap: 1rem; justify-items: start; }
.smh-airport__copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); max-width: 16ch; }
.smh-airport__copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.smh-airport__copy li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink-2);
}
.smh-airport__copy li .smh-icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	color: var(--blue);
}

/* -------------------------------------------------------------------------
   Proof tiles — the case for booking, with no label above it
   ------------------------------------------------------------------------- */

.smh-proof {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.smh-proof__item { display: grid; gap: 1rem; align-content: start; }
.smh-proof__item h3 { font-size: 1.275rem; font-weight: 600; line-height: 1.25; }
.smh-proof__item p { font-size: 1.045rem; color: var(--ink-2); }

/* Stagger the tiles so the row reads as a composition, not a table. */
@media (width >= 62rem) {
	.smh-proof__item:nth-child(even) { margin-top: 3rem; }
}

/* -------------------------------------------------------------------------
   Steps
   ------------------------------------------------------------------------- */

.smh-steps {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	counter-reset: step;
}

.smh-step { display: grid; gap: 1rem; align-content: start; counter-increment: step; }
.smh-step__n {
	display: grid;
	place-items: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: var(--radius-pill);
	background: var(--blue);
	color: var(--white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.075rem;
}
.smh-step__n::before { content: "0" counter(step); }
.smh-step h3 { font-size: 1.225rem; font-weight: 600; line-height: 1.3; }

/* -------------------------------------------------------------------------
   Activity cards
   ------------------------------------------------------------------------- */

.smh-routes {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.smh-route { display: grid; gap: 0.85rem; align-content: start; }
.smh-route__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.905rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.script-cjk .smh-route__meta { letter-spacing: 0.02em; text-transform: none; }
.smh-route__meta .smh-icon { width: 0.95rem; height: 0.95rem; color: var(--blue); }
.smh-route h3 { font-size: 1.275rem; font-weight: 600; line-height: 1.3; }

.smh-route__stops { font-size: 0.925rem; line-height: 1.5; color: var(--ink-2); }

/* The route-specific tip: the part that makes each card genuinely different. */
.smh-route__tip {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.85rem 1rem;
	background: var(--tint-aqua);
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	line-height: 1.5;
}
.smh-route__tip .smh-icon {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	color: var(--teal);
	flex: none;
}

/* Four routes: two across, so each gets room for its stop list. */
@media (width >= 48rem) {
	.smh-routes { grid-template-columns: repeat(2, 1fr); }
}

.smh-routes--detailed { gap: clamp(2rem, 4vw, 3rem); }
.smh-route--detailed { gap: 1rem; align-content: start; }

/* -------------------------------------------------------------------------
   Reviews
   ------------------------------------------------------------------------- */

.smh-reviews {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.smh-review {
	display: grid;
	gap: 1.1rem;
	align-content: start;
	padding: clamp(1.35rem, 2.5vw, 1.9rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.smh-review__stars { display: flex; gap: 0.15rem; color: var(--blue); }
.smh-review__stars .smh-icon { width: 1rem; height: 1rem; fill: currentcolor; stroke: none; }

.smh-review blockquote { margin: 0; font-size: 1.125rem; line-height: 1.55; }

.smh-review__who { display: flex; align-items: center; gap: 0.75rem; }
/*
   The avatar is the guest's initials on a tint, never a stock portrait — a
   bought photograph of a stranger presented as a customer would be a lie.
*/
.smh-review__avatar {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: var(--radius-pill);
	background: var(--tint-mist);
	font-family: var(--font-display);
	font-size: 0.975rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ink-2);
}
.smh-review__who b { display: block; font-size: 1.045rem; font-weight: 600; }
.smh-review__who span { font-size: 0.925rem; color: var(--ink-3); }

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */

.smh-faq { display: grid; gap: 0; border-top: 1px solid var(--line); }

.smh-faq details { border-bottom: 1px solid var(--line); }

.smh-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: clamp(1.145rem, 1.8vw, 1.325rem);
	font-weight: 500;
}
.smh-faq summary::-webkit-details-marker { display: none; }

.smh-faq summary .smh-icon {
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	color: var(--blue);
	transition: transform 0.25s;
}
.smh-faq details[open] summary .smh-icon { transform: rotate(180deg); }

.smh-faq__body {
	padding-bottom: 1.35rem;
	max-width: 62ch;
	color: var(--ink-2);
}

/* -------------------------------------------------------------------------
   Closing band
   ------------------------------------------------------------------------- */

.smh-band {
	display: grid;
	gap: 1.5rem;
	justify-items: center;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
	background: var(--tint-sky);
	border-radius: var(--radius);
}
.smh-band h2 { font-size: clamp(1.875rem, 4.2vw, 3.125rem); max-width: 20ch; }
.smh-band p { color: var(--ink-2); }
.smh-band__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.smh-footer {
	background: var(--paper-deep);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	margin-top: var(--section-y);
}

.smh-footer__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.smh-footer__brand { grid-column: 1 / -1; max-width: 24rem; display: grid; gap: 0.75rem; }
@media (width >= 62rem) {
	.smh-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
	.smh-footer__brand { grid-column: auto; }
}

.smh-footer h3 {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 1rem;
}
.script-cjk .smh-footer h3 { letter-spacing: 0.04em; text-transform: none; }

.smh-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.smh-footer li a, .smh-footer li span { font-size: 1.025rem; color: var(--ink-2); }
.smh-footer li a:hover { color: var(--blue); }

.smh-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-size: 0.945rem;
	color: var(--ink-3);
}
.smh-footer__langs { display: flex; flex-wrap: wrap; gap: 1rem; }
.smh-footer__langs a:hover { color: var(--blue); }

/* -------------------------------------------------------------------------
   Sticky mobile action bar
   ------------------------------------------------------------------------- */

.smh-dock {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 70;
	display: flex;
	gap: 0.6rem;
	padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
}
.smh-dock .smh-btn { flex: 1; }

@media (width >= 62rem) { .smh-dock { display: none; } }
@media (width < 62rem) { body { padding-bottom: 5rem; } }

/* -------------------------------------------------------------------------
   Page headers, editorial pages, blog
   ------------------------------------------------------------------------- */

.smh-pagehead {
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.smh-pagehead h1 { font-size: clamp(2.325rem, 6vw, 4.375rem); max-width: 18ch; }
.smh-pagehead p { margin-top: 1rem; }

.smh-services {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

.smh-service {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}
@media (width >= 48rem) {
	.smh-service { grid-template-columns: 1fr 1fr; }
	.smh-service:nth-child(even) .smh-service__media { order: -1; }
}
.smh-service__copy { display: grid; gap: 0.85rem; justify-items: start; }
.smh-service__copy h2 { font-size: clamp(1.625rem, 3vw, 2.225rem); }
.smh-service__copy p { color: var(--ink-2); }

/* -------------------------------------------------------------------------
   Home page news — four latest posts
   ------------------------------------------------------------------------- */

.smh-news {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}
@media (width >= 34rem) { .smh-news { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 62rem) { .smh-news { grid-template-columns: repeat(4, 1fr); } }

.smh-news__item { display: grid; gap: 0.55rem; align-content: start; }

.smh-news__date {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.script-cjk .smh-news__date { letter-spacing: 0.02em; text-transform: none; }

.smh-news__item h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.smh-news__item h3 a:hover { color: var(--blue); }
.smh-news__excerpt { font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }

.smh-posts {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.smh-post { display: grid; gap: 0.85rem; align-content: start; }
.smh-post__date { font-size: 0.905rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.script-cjk .smh-post__date { letter-spacing: 0.02em; text-transform: none; }
.smh-post h2 { font-size: 1.325rem; font-weight: 600; line-height: 1.3; }
.smh-post p { font-size: 1.025rem; color: var(--ink-2); }

.smh-pagination {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.smh-article { max-width: 44rem; margin-inline: auto; }
.smh-article__body { font-size: 1.175rem; line-height: 1.75; }
.smh-article__body > * + * { margin-top: 1.35rem; }
.smh-article__body h2 { font-size: 1.775rem; margin-top: 2.5rem; }
.smh-article__body h3 { font-size: 1.425rem; margin-top: 2rem; }
.smh-article__body ul,
.smh-article__body ol { padding-left: 1.25rem; }
.smh-article__body li + li { margin-top: 0.5rem; }
.smh-article__body img,
.smh-article__body figure img { border-radius: var(--radius); }
.smh-article__body blockquote {
	margin: 0;
	padding: 1.25rem 1.5rem;
	background: var(--tint-aqua);
	border-radius: var(--radius-sm);
}
.smh-article__body a { color: var(--blue); border-bottom: 1px solid currentcolor; }

/* Booking page */
.smh-order {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (width >= 62rem) {
	.smh-order { grid-template-columns: 1.15fr 0.85fr; }
}
.smh-order__form {
	display: grid;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.smh-order__row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (width < 30rem) { .smh-order__row { grid-template-columns: 1fr; } }

.smh-aside {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--tint-aqua);
	border-radius: var(--radius);
	align-content: start;
}
.smh-aside h2 { font-size: 1.475rem; }
.smh-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.smh-aside li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 1.045rem; }
.smh-aside li .smh-icon { width: 1.15rem; height: 1.15rem; margin-top: 0.18rem; color: var(--teal); }

/* Filter row on the activity page */
.smh-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.smh-filters button {
	padding: 0.5rem 1rem;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink-2);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.smh-filters button:hover { border-color: var(--ink); }
.smh-filters button[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.smh-empty {
	padding: clamp(3rem, 8vw, 6rem) 0;
	text-align: center;
	color: var(--ink-3);
}

/* Reveal on scroll — opt-in, and skipped entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.smh-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s, transform 0.7s; }
	.smh-reveal.is-in { opacity: 1; transform: none; }
}

/* Area tile headings are links now, so give them a hover state. */
.smh-area__name a { color: inherit; }
.smh-area__name a:hover { color: var(--blue); }

/* Travel-time table on an area landing page. */
.smh-area__times { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.smh-area__times > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--line-soft);
}
.smh-area__times dt { font-size: 0.95rem; color: var(--ink-2); }
.smh-area__times dd { margin: 0; font-weight: 600; white-space: nowrap; }

/* Cross-links between the nine area pages. */
.smh-arealinks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.smh-arealinks .smh-chip { transition: border-color 0.2s, color 0.2s; }
.smh-arealinks .smh-chip:hover { border-color: var(--blue); color: var(--blue); }

/* Compact price table on area landing pages. */
.smh-pricetable { overflow-x: auto; }
.smh-pricetable table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.smh-pricetable th {
	text-align: left;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding: 0 0.75rem 0.6rem 0;
	border-bottom: 1px solid var(--line);
}
.script-cjk .smh-pricetable th { letter-spacing: 0.02em; text-transform: none; }
.smh-pricetable td { padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--line-soft); }
.smh-pricetable td span { font-size: 0.8rem; color: var(--ink-3); }
.smh-pricetable tr td:last-child { text-align: right; white-space: nowrap; }

/* "Read next" card linking an area page to its supporting article. */
.smh-arearead { display: grid; gap: clamp(1rem, 3vw, 2rem); align-items: center; }
@media (width >= 48rem) { .smh-arearead { grid-template-columns: 340px 1fr; } }
.smh-arearead h2 a:hover { color: var(--blue); }