/* ==========================================================================
   Uttarakhand Ghoomo — design tokens
   Deep navy base with a warm sand/gold accent — a premium, editorial travel
   palette (in the spirit of the a3trip reference) recoloured for this brand:
   Fraunces display serif + Inter body carry over unchanged.

   Variable NAMES are kept from the original earthy palette (--pine, --brass,
   --ember…) so every existing rule across style.css/home.css re-skins from
   this one block — only the values change here.
   ========================================================================== */

:root {
	--pine:        #0B1B33;   /* deep navy — primary dark surface */
	--pine-light:  #16294A;   /* lighter navy for gradients/cards on dark */
	--mist:        #F6F7F9;   /* cool off-white section background */
	--mist-dim:    #ECEFF3;
	--brass:       #C9A876;   /* sand/gold accent */
	--brass-dark:  #A8875A;
	--ember:       #C1502F;   /* warm terracotta — CTAs, prices */
	--ember-dark:  #96401F;
	--glacier:     #6B93A0;   /* cool secondary accent */
	--ink:         #16233A;   /* body text */
	--ink-soft:    #5B6472;
	--paper-line:  rgba(18, 32, 58, 0.10);
	--white:       #FFFFFF;

	--font-display: 'Fraunces', ui-serif, Georgia, serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

	--radius-sm: 6px;
	--radius-md: 14px;
	--radius-lg: 28px;

	--shadow-card: 0 12px 32px -16px rgba(11, 27, 51,  0.35);
	--shadow-lift: 0 20px 48px -20px rgba(11, 27, 51,  0.45);

	--container: 1200px;
}

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

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--mist);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; color: var(--ink); }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
	outline: 3px solid var(--brass);
	outline-offset: 2px;
}

.ukg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--pine);
	color: var(--mist);
	padding: 12px 20px;
	z-index: 1000;
}
.ukg-skip-link:focus { left: 12px; top: 12px; }

.ukg-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.ukg-section,
.ukg-archive-hero,
.ukg-hero__trust,
.ukg-header__bar {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.ukg-section { padding-block: 72px; }
.ukg-section--band { max-width: none; background: var(--pine); color: var(--mist); }
.ukg-section--band .ukg-section__head,
.ukg-section--band .ukg-rail,
.ukg-section--band .ukg-grid,
.ukg-section--band .ukg-section__cta { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.ukg-section--band h2 { color: var(--mist); }

.ukg-eyebrow {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ember-dark);
	margin: 0 0 10px;
}
.ukg-eyebrow--light { color: var(--brass); }

.ukg-section__head { max-width: 640px; margin-bottom: 40px; }
.ukg-section__head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.ukg-section__cta { margin-top: 32px; }

.ukg-grid { display: grid; gap: 28px; }
.ukg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ukg-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
	.ukg-grid--3, .ukg-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ukg-grid--3, .ukg-grid--4 { grid-template-columns: 1fr; }
}

.ukg-rail {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	margin: 0 -24px;
	padding-inline: 24px;
}
.ukg-rail .ukg-card { flex: 0 0 280px; scroll-snap-align: start; }
.ukg-rail::-webkit-scrollbar { height: 6px; }
.ukg-rail::-webkit-scrollbar-thumb { background: var(--paper-line); border-radius: 4px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.ukg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.ukg-btn:hover { transform: translateY(-2px); }

.ukg-btn--brass { background: var(--brass); color: var(--pine); }
.ukg-btn--brass:hover { background: var(--brass-dark); box-shadow: var(--shadow-card); }

.ukg-btn--ember { background: var(--ember); color: var(--mist); }
.ukg-btn--ember:hover { background: var(--ember-dark); }

.ukg-btn--ghost { background: transparent; color: var(--mist); border-color: rgba(246, 247, 249,  0.5); }
.ukg-btn--ghost:hover { background: rgba(246, 247, 249,  0.12); }

.ukg-btn--outline { background: transparent; color: var(--pine); border-color: var(--pine); }
.ukg-btn--outline:hover { background: var(--pine); color: var(--mist); }

.ukg-btn--outline-light { background: transparent; color: var(--mist); border-color: rgba(246, 247, 249, 0.4); }
.ukg-btn--outline-light:hover { background: rgba(246, 247, 249, 0.12); }

.ukg-btn--sm { padding: 9px 18px; font-size: 0.85rem; }
.ukg-btn--block { display: flex; width: 100%; margin-bottom: 10px; }

/* ==========================================================================
   Header
   ========================================================================== */

.ukg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 27, 51, 0.92);
	backdrop-filter: blur(10px);
	color: var(--mist);
	border-bottom: 1px solid rgba(201, 168, 118, 0.18);
	transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

/* Overlay header — sits transparently on a photo band by default (front
   page, single destination/package, the photo-hero interior pages) and only
   picks up the solid bar once the page scrolls past the hero.

   Safety first: it renders SOLID unless `.ukg-js` (set by main.js) confirms
   JS is running to manage the scroll state — without that, transparent nav
   text would go unreadable the moment a no-JS visitor scrolls into a light
   section below the hero. */
.ukg-header--overlay {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: rgba(11, 27, 51, 0.92);
	backdrop-filter: blur(10px);
	border-bottom-color: rgba(201, 168, 118, 0.18);
}
.ukg-js .ukg-header--overlay:not(.is-scrolled) {
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: transparent;
}
.ukg-header__bar {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-block: 16px;
}
.ukg-header__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--mist); flex-shrink: 0; }
.ukg-header__brand img.custom-logo { height: 48px; width: auto; max-width: 200px; }
.ukg-header__nav { flex: 1; }
.ukg-header__menu { display: flex; gap: 30px; }
.ukg-header__menu a {
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.92;
}
.ukg-header__menu a:hover { opacity: 1; color: var(--brass); }
.ukg-header__actions { display: flex; align-items: center; gap: 18px; }
.ukg-header__phone { font-size: 0.9rem; font-weight: 600; opacity: 0.9; }
.ukg-header__phone:hover { color: var(--brass); }

/* Ghost button while the header floats transparently over the photo —
   switches to the solid brass pill once scrolled/solid, same as the rest
   of the site. */
.ukg-js .ukg-header--overlay:not(.is-scrolled) .ukg-btn--brass {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.6);
}
.ukg-js .ukg-header--overlay:not(.is-scrolled) .ukg-btn--brass:hover {
	background: rgba(255,255,255,0.14);
	border-color: #fff;
}

.ukg-header__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.ukg-header__toggle span { width: 24px; height: 2px; background: var(--mist); display: block; }
.ukg-header__mobile { display: none; }

@media (max-width: 900px) {
	.ukg-header__nav, .ukg-header__actions { display: none; }
	.ukg-header__toggle { display: flex; }
	.ukg-header__mobile {
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding: 24px;
		background: rgba(11, 27, 51, 0.97);
		border-top: 1px solid rgba(201, 168, 118, 0.18);
	}
	.ukg-header__mobile[hidden] { display: none; }
	.ukg-header__mobile-menu { display: flex; flex-direction: column; gap: 14px; font-size: 1.05rem; }
}

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

.ukg-hero {
	position: relative;
	color: var(--mist);
	background: var(--pine);
	overflow: hidden;
}
.ukg-hero__media { position: absolute; inset: 0; }
.ukg-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.ukg-hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11, 27, 51, 0.55) 0%, rgba(11, 27, 51, 0.75) 55%, var(--pine) 100%);
}
.ukg-hero__content {
	position: relative;
	max-width: var(--container);
	margin-inline: auto;
	padding: 160px 24px 100px;
}
.ukg-hero__title {
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	color: var(--mist);
	max-width: 14ch;
}
.ukg-hero__subtitle { font-size: 1.15rem; max-width: 46ch; color: rgba(246, 247, 249, 0.85); }
.ukg-hero__actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.ukg-hero__trust {
	position: relative;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	padding-bottom: 40px;
	color: var(--mist);
	font-size: 0.9rem;
}
.ukg-hero__trust strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--brass); }

/* ==========================================================================
   Cards
   ========================================================================== */

.ukg-card {
	display: block;
	background: var(--white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ukg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.ukg-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--mist-dim); overflow: hidden; }
.ukg-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ukg-card__media-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--pine-light), var(--pine)); }
.ukg-card__body { padding: 20px; }
.ukg-card__title { font-size: 1.15rem; margin-bottom: 6px; }
.ukg-card__tagline, .ukg-card__route, .ukg-card__excerpt { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 0; }
.ukg-card__price { margin-top: 10px; margin-bottom: 0; font-weight: 600; color: var(--ember-dark); }
.ukg-card__duration {
	position: absolute; top: 12px; right: 12px;
}

.ukg-chip {
	display: inline-flex;
	align-items: center;
	background: var(--brass);
	color: var(--pine);
	font-size: 0.78rem;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
}

.ukg-reasons { margin-top: 8px; }
.ukg-reason__mark { font-family: var(--font-display); font-size: 1.4rem; color: var(--brass-dark); }
.ukg-reason h3 { margin-top: 12px; font-size: 1.1rem; }
.ukg-reason p { color: var(--ink-soft); font-size: 0.94rem; }

/* ==========================================================================
   Archive hero (destinations / packages / generic pages)
   ========================================================================== */

.ukg-archive-hero {
	padding-block: 90px 40px;
}
.ukg-archive-hero--sm { padding-block: 64px 24px; }
.ukg-archive-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.ukg-archive-hero__intro { max-width: 56ch; color: var(--ink-soft); font-size: 1.05rem; }

/* ==========================================================================
   Single destination / package
   ========================================================================== */

/* The media box used to be a fixed-height (46vh) block in normal flow, with
   __content pulled up over it via a fixed -140px margin. Any content taller
   than that 140px guess (a wrapping title, a long route string) spilled
   below the photo and exposed the bare __pine background beneath it. The
   media now covers the whole hero via inset:0, and __content bottom-aligns
   with flex — so the photo always extends exactly as far as the content does. */
/* padding-top reserves clearance for the floating overlay header (measured
   live into --ukg-header-h by main.js, since it changes with the Customizer
   logo-height setting) — the photo itself still reaches behind the header
   via __media's inset:0 below, only the text content is pushed clear of it. */
.ukg-single-hero { position: relative; color: var(--mist); background: var(--pine); display: flex; flex-direction: column; justify-content: flex-end; min-height: 62vh; padding-top: var(--ukg-header-h, 96px); }
.ukg-single-hero__media { position: absolute; inset: 0; min-height: 340px; z-index: 0; }
.ukg-single-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
/* z-index is required here: ::after is generated as the LAST child in paint
   order, so without it the gradient painted on top of __content below,
   hiding the title behind an opaque dark layer. */
.ukg-single-hero::after { content:""; position:absolute; inset:0; z-index: 1; background: linear-gradient(180deg, rgba(11, 27, 51, 0.2) 0%, var(--pine) 92%); pointer-events: none; }
.ukg-single-hero__content { position: relative; z-index: 2; max-width: var(--container); margin-inline: auto; padding: 0 24px 48px; width: 100%; }
.ukg-single-hero__content h1 { color: var(--mist); font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.ukg-single-hero__tagline, .ukg-single-hero__route { color: rgba(246, 247, 249, 0.85); font-size: 1.05rem; }

.ukg-package-meta { display: flex; align-items: center; gap: 18px; margin: 18px 0 26px; flex-wrap: wrap; }
.ukg-package-meta__price { font-family: var(--font-display); font-size: 1.3rem; color: var(--brass); }
.ukg-package-meta__price small { display: block; font-family: var(--font-body); font-size: 0.75rem; color: rgba(246, 247, 249, 0.7); }

.ukg-single-body {
	max-width: var(--container);
	margin-inline: auto;
	padding: 56px 24px;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 56px;
	align-items: start;
}
@media (max-width: 900px) {
	.ukg-single-body { grid-template-columns: 1fr; }
}

.ukg-prose { color: var(--ink); }
.ukg-prose p { margin-bottom: 1.1em; }
.ukg-prose-section { margin-top: 44px; }
.ukg-prose-section h2 { font-size: 1.5rem; }
.ukg-prose--page { max-width: 76ch; }

.ukg-aside-card {
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 28px;
	box-shadow: var(--shadow-card);
	position: sticky;
	top: 100px;
}
.ukg-aside-card h3 { font-size: 1.2rem; }
.ukg-aside-card__note { color: var(--ink-soft); font-size: 0.85rem; margin-top: -8px; }

.ukg-highlights { margin: 18px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.ukg-highlights li {
	position: relative;
	padding-left: 22px;
	font-size: 0.92rem;
	color: var(--ink-soft);
}
.ukg-highlights li::before {
	content: "";
	position: absolute; left: 0; top: 7px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--ember);
}

/* ==========================================================================
   Itinerary trail — the signature element.
   A vertical dashed line with brass waypoint markers, evoking a pilgrimage /
   trekking trail on a map. Each stop is one day of the itinerary.
   ========================================================================== */

.ukg-itinerary { margin-top: 44px; }
.ukg-itinerary h2 { font-size: 1.5rem; }

.ukg-trail {
	position: relative;
	margin: 32px 0 0;
	padding-left: 36px;
}
.ukg-trail::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: repeating-linear-gradient(
		to bottom,
		var(--brass) 0, var(--brass) 6px,
		transparent 6px, transparent 12px
	);
}
.ukg-trail__stop {
	position: relative;
	padding-bottom: 40px;
}
.ukg-trail__stop:last-child { padding-bottom: 0; }
.ukg-trail__marker {
	position: absolute;
	left: -36px;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pine);
	border: 3px solid var(--brass);
	box-shadow: 0 0 0 4px var(--mist);
}
.ukg-trail__title { font-size: 1.1rem; margin-bottom: 8px; color: var(--ember-dark); }
.ukg-trail__body p { color: var(--ink-soft); }

/* ==========================================================================
   Enquiry form
   ========================================================================== */

.ukg-enquiry {
	max-width: var(--container);
	margin: 0 auto;
	padding: 72px 24px 96px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
	scroll-margin-top: 100px;
}
@media (max-width: 900px) {
	.ukg-enquiry { grid-template-columns: 1fr; }
}
.ukg-enquiry__intro h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.ukg-enquiry__intro p { color: var(--ink-soft); max-width: 42ch; }
.ukg-enquiry__contact { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.ukg-enquiry__contact a { font-weight: 600; color: var(--ember-dark); }

.ukg-enquiry__form {
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 32px;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ukg-enquiry__form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.ukg-enquiry__form input,
.ukg-enquiry__form textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--paper-line);
	background: var(--mist);
	color: var(--ink);
}
.ukg-enquiry__form input:focus, .ukg-enquiry__form textarea:focus { border-color: var(--brass); }
.ukg-enquiry__form button { margin-top: 6px; }

.ukg-notice {
	max-width: var(--container);
	margin: 24px auto 0;
	padding: 14px 20px;
	border-radius: var(--radius-sm);
	font-weight: 600;
}
.ukg-notice--success { background: rgba(127,166,160,0.2); color: #2f5a54; }
.ukg-notice--error { background: rgba(193, 80, 47, 0.12); color: var(--ember-dark); }

/* ==========================================================================
   Contact page / gallery / 404
   ========================================================================== */

.ukg-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 700px) { .ukg-contact-grid { grid-template-columns: 1fr; } }

.ukg-photo-grid { columns: 4 220px; column-gap: 16px; }
.ukg-photo-grid__img { margin-bottom: 16px; border-radius: var(--radius-sm); width: 100%; }
@media (max-width: 700px) { .ukg-photo-grid { columns: 2 160px; } }

.ukg-404 { text-align: center; padding-block: 120px; }
.ukg-404 h1 { font-size: 3rem; }
.ukg-404 .ukg-hero__actions { justify-content: center; }

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

.ukg-footer { background: var(--pine); color: rgba(246, 247, 249, 0.85); margin-top: 0; }
.ukg-footer__top {
	max-width: var(--container);
	margin-inline: auto;
	padding: 72px 24px 40px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
}
@media (max-width: 900px) { .ukg-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ukg-footer__top { grid-template-columns: 1fr; } }
.ukg-footer__brand-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--mist); display: block; margin-bottom: 10px; }
.ukg-footer__col h3 { color: var(--brass); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.ukg-footer__col ul { display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
.ukg-footer__col a:hover { color: var(--brass); }
.ukg-footer__bottom {
	border-top: 1px solid rgba(201, 168, 118, 0.15);
	padding: 20px 24px;
	text-align: center;
	font-size: 0.82rem;
	color: rgba(246, 247, 249, 0.6);
}

/* ==========================================================================
   Interior pages — About, Transport, Contact
   ========================================================================== */

/* ---- Page hero with photo ---------------------------------------------- */

.ukg-pagehero {
	position: relative;
	overflow: hidden;
	color: #fff;
	padding: 120px 24px 88px;
	text-align: center;
}
.ukg-pagehero__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center 45%;
}
.ukg-pagehero::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(11, 27, 51, 0.72), rgba(11, 27, 51, 0.82));
}
.ukg-pagehero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.ukg-pagehero h1 {
	color: #fff;
	font-size: clamp(2.2rem, 4.6vw, 3.4rem);
	margin: 0 0 14px;
}
.ukg-pagehero__intro {
	color: rgba(255,255,255,0.88);
	font-size: 1.06rem;
	margin: 0;
}

/* ---- Stats band --------------------------------------------------------- */

.ukg-statsband {
	background: var(--pine);
	color: var(--mist);
	padding: 56px 24px;
}
.ukg-statsband__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	text-align: center;
}
@media (max-width: 760px) { .ukg-statsband__inner { grid-template-columns: repeat(2, 1fr); } }
.ukg-statsband strong {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	color: var(--brass);
	line-height: 1;
}
.ukg-statsband span {
	display: block;
	margin-top: 8px;
	font-size: 0.88rem;
	color: rgba(246, 247, 249, 0.78);
}

/* ---- Two-column content + aside --------------------------------------- */

.ukg-pagebody {
	max-width: var(--container);
	margin: 0 auto;
	padding: 72px 24px;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 56px;
	align-items: start;
}
@media (max-width: 900px) { .ukg-pagebody { grid-template-columns: 1fr; gap: 32px; } }

.ukg-prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.ukg-prose h2:first-child { margin-top: 0; }
.ukg-prose h3 { font-size: 1.15rem; margin-top: 1.4em; }

/* ---- Value / offer cards ----------------------------------------------- */

.ukg-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .ukg-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ukg-values { grid-template-columns: 1fr; } }
.ukg-value {
	background: var(--white);
	border: 1px solid var(--paper-line);
	border-radius: var(--radius-md);
	padding: 26px;
}
.ukg-value h3 { font-size: 1.08rem; margin: 0 0 8px; }
.ukg-value p { color: var(--ink-soft); font-size: 0.93rem; margin: 0; }
.ukg-value__icon { display: block; width: 38px; height: 38px; margin-bottom: 14px; }
.ukg-value__icon svg { width: 38px; height: 38px; stroke: var(--ember); fill: none; }

/* ---- Fleet (transport) -------------------------------------------------- */

.ukg-fleet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 760px) { .ukg-fleet { grid-template-columns: 1fr; } }
.ukg-vehicle {
	background: var(--white);
	border: 1px solid var(--paper-line);
	border-radius: var(--radius-md);
	padding: 28px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ukg-vehicle:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.ukg-vehicle__icon {
	flex-shrink: 0;
	width: 56px; height: 56px;
	border-radius: 14px;
	background: var(--pine);
	display: grid; place-items: center;
}
.ukg-vehicle__icon svg { width: 28px; height: 28px; stroke: var(--brass); fill: none; }
.ukg-vehicle__name { font-size: 1.15rem; margin: 0 0 4px; }
.ukg-vehicle__sub { color: var(--ember-dark); font-weight: 600; font-size: 0.86rem; margin: 0 0 12px; }
.ukg-vehicle__specs { display: flex; flex-direction: column; gap: 7px; }
.ukg-vehicle__specs li {
	position: relative; padding-left: 20px;
	font-size: 0.9rem; color: var(--ink-soft);
}
.ukg-vehicle__specs li::before {
	content: ""; position: absolute; left: 0; top: 7px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
}

.ukg-included {
	background: var(--mist-dim);
	border-radius: var(--radius-md);
	padding: 28px 32px;
	margin-top: 36px;
}
.ukg-included h3 { font-size: 1.05rem; margin: 0 0 14px; }
.ukg-included ul { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.ukg-included li {
	position: relative; padding-left: 24px;
	font-size: 0.92rem; color: var(--ink-soft);
}
.ukg-included li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	color: var(--ember); font-weight: 700;
}

/* ---- Contact cards ------------------------------------------------------ */

.ukg-contactcards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	max-width: var(--container);
	margin: 0 auto;
	padding: 64px 24px 0;
}
@media (max-width: 820px) { .ukg-contactcards { grid-template-columns: 1fr; } }
.ukg-contactcard {
	background: var(--white);
	border: 1px solid var(--paper-line);
	border-radius: var(--radius-md);
	padding: 28px;
	text-align: center;
}
.ukg-contactcard__icon {
	width: 48px; height: 48px; margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--mist-dim);
	display: grid; place-items: center;
}
.ukg-contactcard__icon svg { width: 22px; height: 22px; stroke: var(--ember); fill: none; }
.ukg-contactcard h3 { font-size: 1rem; margin: 0 0 10px; }
.ukg-contactcard p { margin: 0 0 4px; font-size: 0.95rem; }
.ukg-contactcard a { color: var(--ember-dark); font-weight: 600; }
.ukg-contactcard a:hover { text-decoration: underline; }
.ukg-contactcard__note { color: var(--ink-soft); font-size: 0.85rem; margin-top: 10px; }

/* ---- FAQ accordion (native <details>, no JS needed) -------------------- */

.ukg-faq { max-width: 820px; margin: 0 auto; }
.ukg-faq__group { margin-bottom: 40px; }
.ukg-faq__group:last-child { margin-bottom: 0; }
.ukg-faq__group h2 {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ember-dark);
	margin-bottom: 16px;
}
.ukg-faq__item {
	background: var(--white);
	border: 1px solid var(--paper-line);
	border-radius: var(--radius-md);
	margin-bottom: 12px;
	overflow: hidden;
}
.ukg-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ink);
	list-style: none;
}
.ukg-faq__item summary::-webkit-details-marker { display: none; }
.ukg-faq__chevron {
	flex-shrink: 0;
	width: 20px; height: 20px;
	stroke: var(--ember);
	fill: none;
	transition: transform 0.25s ease;
}
.ukg-faq__item[open] .ukg-faq__chevron { transform: rotate(180deg); }
.ukg-faq__item p {
	margin: 0;
	padding: 0 22px 20px;
	color: var(--ink-soft);
	font-size: 0.95rem;
}