/*
* HK campaign page (template-landing.php)
*
* The first catalogue's look — full-bleed photographs, a deep green-black,
* serif headings with a gold accent, a cream paper for contrast — carrying the
* second catalogue's content. Dark and cream sections alternate so a long page
* keeps its rhythm.
*
* Sections
*   1. Tokens and shell
*   2. Type and buttons
*   3. Hero
*   4. Programmes
*   5. Split layouts, frames, lists
*   6. Cards, tiles, galleries
*   7. Full-bleed bands
*   8. Stories
*   9. Form section
*  10. Call-to-action band and phone dock
*  11. Small screens
*/

/* ---------------------------------------------------------------------------
* 1. Tokens and shell
* ------------------------------------------------------------------------- */

.hkl {
	--hkl-ink: #0f1411;
	--hkl-ink-2: #172019;
	--hkl-cream: #f5f0e6;
	--hkl-paper: #fffdf8;
	--hkl-gold: #c9962c;
	--hkl-gold-light: #e5b84f;
	--hkl-gold-deep: #9c7118;
	--hkl-text: #1d211e;
	--hkl-muted: #5f665f;
	--hkl-light: #f2ede3;
	--hkl-light-muted: rgba(242, 237, 227, 0.72);
	--hkl-line-dark: rgba(242, 237, 227, 0.1);
	--hkl-line-light: rgba(29, 33, 30, 0.1);
	--hkl-radius: 10px;
	--hkl-serif: var(--heading-font, "Cormorant Garamond", Georgia, serif);

	overflow-x: clip;
	color: var(--hkl-text);
}

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

.hkl img {
	display: block;
	max-width: 100%;
}

.hkl-wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hkl-section {
	padding: 104px 0;
}

.hkl-dark {
	background: var(--hkl-ink);
	color: var(--hkl-light);
}

.hkl-cream {
	background: var(--hkl-cream);
	color: var(--hkl-text);
}

/* ---------------------------------------------------------------------------
* 2. Type and buttons
* ------------------------------------------------------------------------- */

.hkl-kicker {
	margin: 0 0 14px;
	color: var(--hkl-gold-light);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
}

.hkl-cream .hkl-kicker {
	color: var(--hkl-gold-deep);
}

.hkl-title {
	margin: 0 0 18px;
	color: inherit;
	font-family: var(--hkl-serif);
	font-size: clamp(32px, 4.2vw, 52px);
	font-weight: 500;
	line-height: 1.1;
}

.hkl-title,
.hkl-hero-title,
.hkl-card-title,
.hkl-cta-band-title,
.hkl-kicker {
	text-wrap: balance;
}

.hkl-head .hkl-title {
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}

.hkl-title-sm {
	font-size: clamp(26px, 3vw, 38px);
}

.hkl-lead,
.hkl-body {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.75;
}

.hkl-dark .hkl-lead,
.hkl-dark .hkl-body,
.hkl-band .hkl-lead {
	color: var(--hkl-light-muted);
}

.hkl-cream .hkl-lead,
.hkl-cream .hkl-body {
	color: var(--hkl-muted);
}

.hkl-head {
	max-width: 780px;
	margin: 0 auto 56px;
	text-align: center;
}

.hkl-head .hkl-lead {
	margin-bottom: 0;
}

.hkl-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.hkl-cta-center {
	justify-content: center;
	margin-top: 48px;
}

.hkl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hkl-btn:hover {
	transform: translateY(-2px);
}

.hkl-btn:focus-visible {
	outline: 2px solid var(--hkl-gold-light);
	outline-offset: 3px;
}

.hkl-btn svg {
	width: 20px;
	height: 20px;
	flex: none;
}

/*
* One primary action everywhere — the gold "free information" button — and
* WhatsApp as a strong second: outlined, with its green only in the icon and
* the border. The phone number is a quiet link. On the phone dock, where
* WhatsApp is the thumb's natural choice, it goes back to solid green.
*/
.hkl-btn-whatsapp {
	border-color: rgba(37, 211, 102, 0.7);
	background: rgba(37, 211, 102, 0.08);
	color: #fff;
}

.hkl-btn-whatsapp svg {
	color: #25d366;
}

.hkl-btn-whatsapp:hover {
	border-color: #25d366;
	background: rgba(37, 211, 102, 0.16);
	color: #fff;
}

.hkl-cream .hkl-btn-whatsapp {
	color: var(--hkl-text);
}

.hkl-cream .hkl-btn-whatsapp svg {
	color: #1a9e4b;
}

.hkl-btn-gold {
	min-height: 58px;
	padding: 0 32px;
	font-size: 16px;
	background: var(--hkl-gold);
	color: #1a1305;
	box-shadow: 0 10px 26px rgba(201, 150, 44, 0.3);
}

.hkl-btn-gold:hover {
	background: var(--hkl-gold-light);
	color: #1a1305;
}

.hkl-btn-ghost {
	padding: 0 8px;
	border-color: transparent;
	color: var(--hkl-light);
}

.hkl-btn-ghost:hover {
	color: var(--hkl-gold-light);
	transform: none;
}

.hkl-btn-ghost span {
	border-bottom: 1px solid rgba(242, 237, 227, 0.35);
}

.hkl-cream .hkl-btn-ghost {
	color: var(--hkl-text);
}

.hkl-cream .hkl-btn-ghost span {
	border-bottom-color: rgba(29, 33, 30, 0.3);
}

.hkl-link {
	color: var(--hkl-gold-light);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.hkl-link:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
* 3. Hero
*
* The site header overlaps the top of the page, so the hero carries its own
* top padding rather than hiding its heading under the menu.
* ------------------------------------------------------------------------- */

.hkl-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(100svh, 960px);
	padding-top: calc(var(--hk-header-h, 156px) + var(--hk-hero-gap, 72px));
	overflow: hidden;
	background: var(--hkl-ink);
	color: #fff;
}

.hkl-hero-img,
.hkl-band-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hkl-hero-img {
	object-position: 60% 65%;
}

.hkl-hero::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 20, 17, 0.72) 0%, rgba(15, 20, 17, 0) 35%),
		linear-gradient(90deg, rgba(15, 20, 17, 0.85) 0%, rgba(15, 20, 17, 0.35) 55%, rgba(15, 20, 17, 0) 100%),
		linear-gradient(0deg, rgba(15, 20, 17, 0.9) 0%, rgba(15, 20, 17, 0) 38%);
	content: "";
}

.hkl-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 56px;
}

.hkl-hero-inner > * {
	max-width: 720px;
}

.hkl-hero-title {
	margin: 0 0 22px;
	color: #fff;
	font-family: var(--hkl-serif);
	font-size: clamp(44px, 7vw, 96px);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.01em;
}

.hkl-hero-lead {
	margin: 0;
	color: rgba(255, 255, 255, 0.84);
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.65;
}

.hkl-hero-place {
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hkl-facts {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	border-top: 1px solid var(--hkl-line-dark);
	list-style: none;
}

.hkl-facts li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 24px 34px;
}

.hkl-facts li + li {
	border-inline-start: 1px solid var(--hkl-line-dark);
}

.hkl-facts strong {
	color: var(--hkl-gold-light);
	font-family: var(--hkl-serif);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 500;
	line-height: 1;
}

.hkl-facts span {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.45;
}

/* ---------------------------------------------------------------------------
* 4. Programmes
* ------------------------------------------------------------------------- */

.hkl-program-list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hkl-program {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 28px 22px 26px;
	border: 1px solid var(--hkl-line-light);
	border-radius: var(--hkl-radius);
	background: var(--hkl-paper);
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}



.hkl-program-days {
	color: var(--hkl-gold-deep);
	font-family: var(--hkl-serif);
	font-size: 56px;
	font-weight: 500;
	line-height: 1;
}

.hkl-program-unit {
	color: var(--hkl-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hkl-program-label {
	margin-top: 10px;
	color: var(--hkl-muted);
	font-size: 14px;
	line-height: 1.45;
}

.hkl-program-extra {
	justify-content: center;
	border-color: transparent;
	background: var(--hkl-ink);
}

.hkl-program-extra .hkl-program-days {
	color: var(--hkl-gold-light);
}

.hkl-program-extra .hkl-program-unit {
	color: var(--hkl-light);
}

.hkl-program-extra .hkl-program-label {
	color: var(--hkl-light-muted);
}

/* ---------------------------------------------------------------------------
* 5. Split layouts, frames, lists
* ------------------------------------------------------------------------- */

.hkl-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
}

.hkl-split-wide {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.hkl-frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--hkl-radius);
	aspect-ratio: 4 / 3;
}

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

.hkl-frame-tall {
	aspect-ratio: 3 / 4;
	max-height: 680px;
}

/* The founder's photo comes with its own background, so it is framed like any
* other photograph — no cut-out edges to hide. */
.hkl-founder .hkl-split {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.hkl-founder-photo {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 420px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--hkl-radius);
	aspect-ratio: 4 / 5;
	background: var(--hkl-ink-2);
}

.hkl-founder-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.hkl-founder-role {
	margin: -6px 0 20px;
	color: var(--hkl-gold-light);
	font-size: 15px;
	font-weight: 600;
}

.hkl-founder-text p {
	color: var(--hkl-light-muted);
	font-size: 16px;
	line-height: 1.75;
}

.hkl-checks {
	display: grid;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.hkl-checks li {
	position: relative;
	padding-inline-start: 30px;
	font-size: 15px;
	line-height: 1.55;
}

.hkl-checks li::before {
	position: absolute;
	top: 2px;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--hkl-gold);
	color: #1a1305;
	font-size: 11px;
	font-weight: 700;
	content: "✓";
}

.hkl-model {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 26px;
	padding: 20px 24px;
	border-inline-start: 3px solid var(--hkl-gold);
	border-radius: 0 var(--hkl-radius) var(--hkl-radius) 0;
	background: var(--hkl-paper);
}

.hkl-model strong {
	font-family: var(--hkl-serif);
	font-size: 22px;
	font-weight: 500;
}

.hkl-model span {
	color: var(--hkl-muted);
	font-size: 15px;
}

.hkl-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 64px 0 0;
	padding: 0;
	border-top: 1px solid var(--hkl-line-light);
	list-style: none;
}

.hkl-stats li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 22px 0;
}

.hkl-stats li + li {
	border-inline-start: 1px solid var(--hkl-line-light);
}

.hkl-stats strong {
	color: var(--hkl-gold-deep);
	font-family: var(--hkl-serif);
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 500;
	line-height: 1;
}

.hkl-stats span {
	color: var(--hkl-muted);
	font-size: 14px;
	line-height: 1.5;
}

.hkl-list-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.hkl-list-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 26px;
}

.hkl-list-grid li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 18px;
	border: 1px solid var(--hkl-line-light);
	border-radius: 8px;
	background: var(--hkl-paper);
}

.hkl-list-grid strong {
	/* The tile is light paper whatever the section's colour, so its title
	* keeps the dark ink rather than inheriting a dark section's white. */
	color: var(--hkl-text);
	font-size: 15px;
	font-weight: 600;
}

.hkl-list-grid span {
	color: var(--hkl-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
}

.hkl-devices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.hkl-devices li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 22px 22px 24px;
	border: 1px solid var(--hkl-line-dark);
	border-inline-start: 3px solid var(--hkl-gold);
	border-radius: 8px;
	background: var(--hkl-ink-2);
}

.hkl-devices strong {
	color: #fff;
	font-size: 16px;
}

/* "Kocaeli’nde tek" belongs in the card's corner, not in the middle of the
* reading order between the device's name and what it does. */
.hkl-devices em {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--hkl-gold);
	color: #1a1305;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Only the card that carries a badge keeps room for it. */
.hkl-devices li:has(em) strong {
	padding-inline-end: 120px;
}

.hkl-devices span {
	color: var(--hkl-light-muted);
	font-size: 14px;
	line-height: 1.5;
}

.hkl-origin-line {
	margin: -6px 0 18px;
	color: var(--hkl-light-muted);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hkl-origin-line strong {
	color: var(--hkl-gold-light);
}

/* ---------------------------------------------------------------------------
* 6. Cards, tiles, galleries
* ------------------------------------------------------------------------- */

.hkl-cards {
	display: grid;
	gap: 24px;
}

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

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

.hkl-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hkl-line-light);
	border-radius: var(--hkl-radius);
	background: var(--hkl-paper);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hkl-dark .hkl-card {
	border-color: var(--hkl-line-dark);
	background: var(--hkl-ink-2);
}

.hkl-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.16);
}

.hkl-card-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #1c231e;
}

.hkl-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hkl-card:hover .hkl-card-media img {
	transform: scale(1.04);
}

.hkl-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px 24px 26px;
}

.hkl-card-body p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.65;
}

.hkl-dark .hkl-card-body p {
	color: var(--hkl-light-muted);
}

.hkl-cream .hkl-card-body p {
	color: var(--hkl-muted);
}

.hkl-card-title {
	margin: 0 0 10px;
	color: inherit;
	font-family: var(--hkl-serif);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
}

.hkl-room-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--hkl-line-dark);
}

.hkl-price {
	color: var(--hkl-gold-light);
	font-family: var(--hkl-serif);
	font-size: 22px;
}

.hkl-price-ask {
	color: var(--hkl-light-muted);
	font-family: inherit;
	font-size: 13px;
}

.hkl-origin {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(15, 20, 17, 0.82);
	color: var(--hkl-gold-light);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hkl-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.hkl-tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--hkl-radius);
	aspect-ratio: 4 / 5;
	background: var(--hkl-ink-2);
}

/* Ten tiles in a grid of three: the last one spans the row, not a gap. */
.hkl-tile:last-child:nth-child(3n + 1) {
	grid-column: 1 / -1;
	aspect-ratio: 21 / 8;
}

.hkl-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hkl-tile:hover img {
	transform: scale(1.05);
}

.hkl-tile::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(15, 20, 17, 0.95) 0%, rgba(15, 20, 17, 0.82) 38%, rgba(15, 20, 17, 0) 68%);
	content: "";
}

.hkl-tile-text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 24px;
}

.hkl-tile-text h3 {
	margin: 0 0 8px;
	color: #fff;
	font-family: var(--hkl-serif);
	font-size: 26px;
	font-weight: 500;
}

.hkl-tile-text p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	line-height: 1.55;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.hkl-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 56px;
}

.hkl-gallery figure {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 4 / 3;
}

.hkl-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hkl-gallery-feature {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	margin-top: 0;
}

.hkl-gallery-feature .hkl-gallery-main {
	grid-row: span 2;
	grid-column: span 2;
	aspect-ratio: auto;
}

.hkl-quote {
	max-width: 760px;
	margin: 56px auto 0;
	padding: 0;
	border: 0;
	color: var(--hkl-light);
	font-family: var(--hkl-serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-style: italic;
	line-height: 1.4;
	text-align: center;
}

.hkl-notes {
	max-width: 760px;
	margin: 40px auto 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--hkl-line-dark);
	list-style: none;
	text-align: center;
}

.hkl-notes li {
	color: var(--hkl-light-muted);
	font-size: 15px;
	line-height: 1.8;
}

.hkl-banner {
	margin: 56px auto 0;
	color: var(--hkl-text);
	font-family: var(--hkl-serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-style: italic;
	text-align: center;
}

.hkl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.hkl-chips-center {
	justify-content: center;
	margin: 40px 0 72px;
}

.hkl-chips li {
	padding: 10px 18px;
	border: 1px solid rgba(229, 184, 79, 0.45);
	border-radius: 999px;
	background: rgba(15, 20, 17, 0.45);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	backdrop-filter: blur(4px);
}

.hkl-chips-light li {
	border-color: rgba(156, 113, 24, 0.4);
	background: var(--hkl-paper);
	color: var(--hkl-text);
	backdrop-filter: none;
}

.hkl-chips-light li::before {
	margin-inline-end: 8px;
	color: var(--hkl-gold-deep);
	content: "✓";
}

.hkl-chips-title {
	margin: 48px 0 0;
	color: var(--hkl-gold-deep);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-align: center;
	text-transform: uppercase;
}

.hkl-chips-title-start {
	margin-top: 26px;
	text-align: start;
}

.hkl-place-rest {
	padding-top: 40px;
	border-top: 0;
}

.hkl-health .hkl-chips-center {
	margin: 18px 0 0;
}

.hkl-place {
	padding-top: 72px;
	border-top: 1px solid var(--hkl-line-dark);
}

/* ---------------------------------------------------------------------------
* 7. Full-bleed bands
* ------------------------------------------------------------------------- */

.hkl-band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 620px;
	padding: 110px 0;
	overflow: hidden;
	background: var(--hkl-ink);
	color: #fff;
}

.hkl-band::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 14, 11, 0.2) 0%, rgba(10, 14, 11, 0.65) 45%, rgba(10, 14, 11, 0.9) 100%);
	content: "";
}

.hkl-band-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 0 max(24px, 50%);
}

.hkl-band-left {
	padding: 0 max(24px, 50%) 0 24px;
}

.hkl-menu .hkl-band-img {
	object-position: 80% center;
}

.hkl-menu::after {
	background: linear-gradient(90deg, rgba(15, 20, 17, 0.95) 0%, rgba(15, 20, 17, 0.9) 42%, rgba(15, 20, 17, 0.2) 75%, rgba(15, 20, 17, 0) 100%);
}

/* Faces sit in the upper half of the classes photo: the text goes below them. */
.hkl-classes .hkl-band-img {
	object-position: 40% 30%;
}

.hkl-band-bottom {
	align-items: flex-end;
	min-height: 720px;
}

.hkl-band-bottom::after {
	background: linear-gradient(0deg, rgba(15, 20, 17, 0.96) 0%, rgba(15, 20, 17, 0.75) 32%, rgba(15, 20, 17, 0) 62%);
}

.hkl-band-bottom .hkl-band-inner {
	padding: 0 24px;
	text-align: center;
}

.hkl-band-bottom .hkl-band-inner > * {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.hkl-band-bottom .hkl-chips {
	justify-content: center;
	max-width: 900px;
}

/* ---------------------------------------------------------------------------
* 8. Stories
* ------------------------------------------------------------------------- */

.hkl-sayings {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 40px;
	max-width: 980px;
	margin: 0 auto 56px;
}

.hkl-sayings blockquote {
	margin: 0;
	padding: 0 0 0 20px;
	border-inline-start: 2px solid var(--hkl-gold);
	color: var(--hkl-text);
	font-family: var(--hkl-serif);
	font-size: 20px;
	font-style: italic;
	line-height: 1.5;
}

.hkl-sayings-by {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--hkl-gold-deep);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

.hkl-story-media {
	aspect-ratio: 4 / 3;
}

.hkl-story-tag {
	position: absolute;
	bottom: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(15, 20, 17, 0.82);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hkl-story-before {
	left: 12px;
}

.hkl-story-after {
	right: 12px;
	background: var(--hkl-gold);
	color: #1a1305;
}

.hkl-story-kg {
	margin: 0 0 4px !important;
	color: var(--hkl-muted);
	font-size: 14px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hkl-story-kg strong {
	color: var(--hkl-gold-deep);
	font-family: var(--hkl-serif);
	font-size: 44px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
}

.hkl-story .hkl-card-title span {
	color: var(--hkl-muted);
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hkl-story blockquote {
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	color: var(--hkl-muted);
	font-family: var(--hkl-serif);
	font-size: 18px;
	font-style: italic;
	line-height: 1.5;
}

.hkl-story cite {
	display: block;
	margin-top: 8px;
	color: var(--hkl-gold-deep);
	font-family: inherit;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hkl-disclaimer {
	margin: 32px 0 0;
	color: var(--hkl-muted);
	font-size: 13px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
* 8b. Catalogues
* ------------------------------------------------------------------------- */

.hkl-catalog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.hkl-catalog {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	align-items: center;
	gap: 28px;
	padding: 28px;
	border: 1px solid var(--hkl-line-dark);
	border-radius: var(--hkl-radius);
	background: var(--hkl-ink-2);
}

.hkl-catalog-cover {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	/* A printed cover, so it keeps a page's proportions and a page's shadow. */
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
	transition: transform 0.3s ease;
}

.hkl-catalog-cover:hover {
	transform: translateY(-3px);
}

.hkl-catalog-cover img {
	width: 100%;
	height: auto;
}

.hkl-catalog-body p {
	margin: 0 0 12px;
	color: var(--hkl-light-muted);
	font-size: 15px;
	line-height: 1.6;
}

.hkl-catalog-meta {
	color: var(--hkl-gold-light) !important;
	font-size: 12px !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hkl-btn-outline {
	padding: 0 22px;
	border-color: rgba(242, 237, 227, 0.35);
}

.hkl-btn-outline span {
	border: 0;
}

.hkl-btn-outline:hover {
	border-color: var(--hkl-gold-light);
	background: rgba(201, 150, 44, 0.1);
}

/* ---------------------------------------------------------------------------
* 9. Form section
* ------------------------------------------------------------------------- */

.hkl-join {
	position: relative;
	padding: 120px 0;
	overflow: hidden;
	background: var(--hkl-ink);
	color: var(--hkl-light);
	/* The site header is fixed while scrolling; the anchor stops below it. */
	scroll-margin-top: 90px;
}

.hkl-join::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 14, 11, 0.94) 0%, rgba(10, 14, 11, 0.82) 55%, rgba(10, 14, 11, 0.7) 100%);
	content: "";
}

.hkl-join-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: start;
	gap: 56px;
}

.hkl-join-text {
	position: sticky;
	top: 110px;
}

.hkl-contact {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 18px;
	margin: 36px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--hkl-line-dark);
	font-size: 15px;
}

.hkl-contact dt {
	color: var(--hkl-gold-light);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.9;
	text-transform: uppercase;
}

.hkl-contact dd {
	margin: 0;
	color: var(--hkl-light-muted);
	line-height: 1.6;
}

.hkl-contact a {
	color: var(--hkl-light);
}

.hkl-form-card {
	overflow: hidden;
	border-radius: 14px;
	background: var(--hkl-cream);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------------
* 10. Call-to-action band and phone dock
* ------------------------------------------------------------------------- */

.hkl-cta-band {
	position: relative;
	padding: 120px 0;
	overflow: hidden;
	background: #1b271f;
	color: #fff;
	text-align: center;
}

.hkl-cta-band .hkl-band-img {
	opacity: 0.22;
}

.hkl-cta-band::after {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(15, 20, 17, 0.2) 0%, rgba(15, 20, 17, 0.75) 100%);
	content: "";
}

.hkl-cta-band-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.hkl-cta-band-title {
	max-width: 22ch;
	margin: 0;
	font-family: var(--hkl-serif);
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.2;
}

.hkl-cta-band .hkl-cta {
	justify-content: center;
}

/* Desktop has the buttons in every section; the dock is for phones. */
.hkl-dock {
	display: none;
}

/* ---------------------------------------------------------------------------
* 11. Small screens
* ------------------------------------------------------------------------- */

@media only screen and (max-width: 1199px) {
	.hkl-program-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.hkl-catalog-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hkl-catalog {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.hkl-tile:last-child:nth-child(3n + 1) {
		grid-column: auto;
		aspect-ratio: 4 / 5;
	}

	.hkl-tile:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
		aspect-ratio: 21 / 9;
	}

	.hkl-devices,
	.hkl-list-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 991px) {
	.hkl-section {
		padding: 80px 0;
	}

	.hkl-split,
	.hkl-split-wide,
	.hkl-founder .hkl-split,
	.hka-functional .hkl-split,
	.hkl-join-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.hkl-join-text {
		position: static;
	}

	.hkl-facts,
	.hkl-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hkl-facts li:nth-child(3),
	.hkl-stats li:nth-child(3) {
		border-inline-start: 0;
	}

	.hkl-notes {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.hkl-band-inner,
	.hkl-band-left {
		padding: 0 24px;
	}

	.hkl-band::after,
	.hkl-menu::after {
		background: linear-gradient(0deg, rgba(10, 14, 11, 0.94) 0%, rgba(10, 14, 11, 0.6) 60%, rgba(10, 14, 11, 0.35) 100%);
	}

	.hkl-band {
		align-items: flex-end;
		min-height: 560px;
	}
}

@media only screen and (max-width: 767px) {
	.hkl-section {
		padding: 64px 0;
	}

	.hkl-wrap,
	.hkl-hero-inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.hkl-head {
		margin-bottom: 36px;
	}

	.hkl-hero {
		min-height: auto;
		padding-top: calc(var(--hk-header-h, 116px) + var(--hk-hero-gap, 36px));
	}

	.hkl-hero-img {
		object-position: 65% center;
	}

	.hkl-hero::after {
		background: linear-gradient(0deg, rgba(15, 20, 17, 0.96) 0%, rgba(15, 20, 17, 0.6) 55%, rgba(15, 20, 17, 0.15) 100%);
	}

	.hkl-hero-inner {
		padding-bottom: 36px;
	}

	.hkl-facts li {
		padding: 18px 20px 22px;
	}

	/*
	* Stacked, full width: side by side, "WhatsApp’tan yazın" did not fit half
	* a phone screen. The phone number stays a quiet link, centred below.
	*/
	.hkl-cta {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.hkl-btn {
		width: 100%;
		padding: 0 18px;
		font-size: 15px;
	}

	.hkl-btn-gold {
		min-height: 56px;
	}

	.hkl-cta .hkl-btn-ghost {
		align-self: center;
		width: auto;
		min-height: 44px;
	}

	/*
	* Inside the page's sections a phone gets one button, not a stack: the
	* dock at the bottom of the screen already carries the other two.
	*/
	.hkl-cta-section .hkl-btn:not(:first-child) {
		display: none;
	}

	.hkl-program-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hkl-program {
		padding: 22px 12px;
	}

	.hkl-program-days {
		font-size: 44px;
	}

	.hkl-program-extra .hkl-program-days {
		font-size: 40px;
	}

	.hkl-cards-3,
	.hkl-cards-2,
	.hkl-tiles,
	.hkl-devices,
	.hkl-list-grid,
	.hkl-list-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.hkl-tile,
	.hkl-tile:last-child:nth-child(2n + 1) {
		aspect-ratio: 4 / 3;
	}

	.hkl-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 36px;
	}

	/* Equal rows came from the desktop layout and left tall empty gaps. */
	.hkl-gallery-feature {
		grid-auto-rows: auto;
	}

	.hkl-gallery-feature .hkl-gallery-main {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}

	/*
	* Full-bleed bands: on a narrow screen the heading would sit across the
	* faces in the photo, so the photo becomes a strip above the text.
	*/
	.hkl-band,
	.hkl-band-bottom {
		display: block;
		min-height: 0;
		padding: 0 0 56px;
	}

	.hkl-band .hkl-band-img {
		position: relative;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.hkl-band::after {
		display: none;
	}

	.hkl-band-inner,
	.hkl-band-left,
	.hkl-band-bottom .hkl-band-inner {
		padding: 32px 20px 0;
		text-align: left;
	}

	.hkl-band-bottom .hkl-chips {
		justify-content: flex-start;
	}

	/*
	* Rooms, studios and stories scroll sideways on a phone, with the next
	* card peeking in, instead of stacking into several screens each.
	*/
	.hkl-scroller {
		display: flex;
		gap: 14px;
		margin: 0 -20px;
		padding: 0 20px 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.hkl-scroller::-webkit-scrollbar {
		display: none;
	}

	.hkl-scroller > * {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.hkl-scroller > .hkl-card:hover {
		transform: none;
	}

	.hkl-tiles.hkl-scroller > .hkl-tile,
	.hkl-tiles.hkl-scroller > .hkl-tile:last-child:nth-child(2n + 1) {
		aspect-ratio: 4 / 5;
	}

	.hkl-founder-photo {
		max-width: 300px;
	}

	.hkl-sayings {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 36px;
	}

	.hkl-sayings blockquote {
		font-size: 18px;
	}

	.hkl-sayings blockquote:nth-of-type(n + 3) {
		display: none;
	}

	.hkl-cta-band {
		padding: 72px 0;
	}

	.hkl-chips li {
		padding: 8px 14px;
		font-size: 13px;
	}

	.hkl-join {
		padding: 72px 0;
	}

	.hkl-catalog-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* A landscape cover at a third of a phone is a thumbnail: stack it. */
	.hkl-catalog {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 16px 16px 20px;
	}

	.hkl-catalog .hkl-btn {
		width: 100%;
	}

	.hkl-cta-band .hkl-cta {
		width: 100%;
	}

	/*
	* The phone dock: three buttons pinned to the bottom of the screen, the
	* site's own floating WhatsApp button hidden so there is only one. It
	* steps aside while the form itself is on screen (hk-landing.js).
	*/
	.hkl-dock {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: block;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(15, 20, 17, 0.96);
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
		transform: translateY(110%);
		transition: transform 0.3s ease;
	}

	/* Shown once the hero's own buttons are off screen (hk-landing.js). */
	.hkl-dock.is-visible {
		transform: none;
	}

	/* Fixed columns that never grow past the screen: the WhatsApp label used to
	* push the phone button 7px off the right edge. */
	.hkl-dock .hkl-cta {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 48px;
		gap: 8px;
		margin: 0;
	}

	.hkl-dock .hkl-btn {
		min-width: 0;
		overflow: hidden;
		font-size: 13px;
	}

	.hkl-dock .hkl-btn span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hkl-dock .hkl-cta .hkl-btn-ghost {
		align-self: stretch;
		width: 100%;
		min-height: 48px;
	}

	.hkl-dock .hkl-btn-ghost span {
		border: 0;
	}

	.hkl-dock .hkl-btn {
		grid-column: auto;
		min-height: 48px;
		padding: 0 10px;
		font-size: 14px;
		box-shadow: none;
	}

	.hkl-dock .hkl-btn-whatsapp {
		border-color: transparent;
		background: #25d366;
		color: #06301a;
	}

	.hkl-dock .hkl-btn-whatsapp svg {
		color: #06301a;
	}

	.hkl-dock .hkl-btn-ghost {
		border: 1px solid rgba(242, 237, 227, 0.35);
	}

	/* The phone number is too long for a third of the screen: icon only. */
	.hkl-dock .hkl-btn-ghost span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.hkx-page-landing .hkh-dock {
		display: none !important;
	}

	.hkx-page-landing {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

/* ---------------------------------------------------------------------------
* 12. Activities page (template-activities.php)
*
* Built on everything above; these are the few shapes the campaign page did
* not need.
* ------------------------------------------------------------------------- */

/* Intro: three photos, the first one tall. */
.hka-mosaic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 12px;
	aspect-ratio: 1 / 1;
}

.hka-mosaic figure {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}

.hka-mosaic figure:first-child {
	grid-row: 1 / -1;
}

.hka-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* flash-lit event snapshots, toned to sit with the other photographs */
	filter: saturate(0.92) contrast(1.04);
}

/* Where the subject sits high or low in its photo. */
.hka-focus-top img {
	object-position: center 15%;
}

.hka-focus-bottom img {
	object-position: center 65%;
}

/* Jump links: chips that are links. */
.hka-nav {
	margin-top: 48px;
}

/* The chips' usual bottom margin, on top of the section's own padding, left
* a gap under them twice the size of any other section end. */
.hka-nav .hkl-chips {
	margin-bottom: 0;
}

.hka-nav .hkl-chips li {
	padding: 0;
}

.hka-nav .hkl-chips li::before {
	display: none;
}

.hka-nav a {
	display: block;
	padding: 10px 18px;
	color: inherit;
	text-decoration: none;
}

.hka-nav a:hover {
	color: var(--hkl-gold-deep);
}

.hka [id^="hka-"] {
	/* the site header is pinned while scrolling; anchors stop below it */
	scroll-margin-top: 90px;
}

.hka-motto {
	margin: -6px 0 20px;
	color: var(--hkl-gold-light);
	font-family: var(--hkl-serif);
	font-size: clamp(22px, 2.4vw, 28px);
	font-style: italic;
}

.hka-note {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-inline-start: 3px solid var(--hkl-gold);
	background: var(--hkl-ink-2);
	color: var(--hkl-light);
	font-size: 14px;
}

.hka-pair,
.hka-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.hka-pair {
	margin-top: 24px;
}

.hka-pair figure {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 4 / 3;
}

.hka-pair img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Crossfit: two portrait photos, larger and cropped from the top so no head
* is cut. */
.hka-functional .hkl-split {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.hka-duo .hkl-frame-tall {
	aspect-ratio: 3 / 4;
}

.hka-duo img {
	object-position: center top;
}

.hka-duo .hkl-frame-tall:nth-child(2) {
	margin-top: 48px;
}

/*
* Five tiles in the team section: two rows of three, the last one two
* columns wide. A fixed row height keeps the wide tile and its neighbour the
* same height, which their own aspect ratios did not.
*/
@media only screen and (min-width: 1200px) {
	.hka-team .hkl-tiles {
		grid-auto-rows: 440px;
	}

	.hka-team .hkl-tile,
	.hka-team .hkl-tile:last-child:nth-child(3n + 2) {
		height: 100%;
		aspect-ratio: auto;
	}

	.hka-team .hkl-tile:last-child:nth-child(3n + 2) {
		grid-column: span 2;
	}
}

/* Adventures: one row each, the photo swapping sides. */
.hka-features {
	display: grid;
	gap: 72px;
	margin-top: 72px;
}

.hka-feature:nth-child(even) > figure {
	order: 2;
}

.hka-chips-title-dark {
	color: var(--hkl-gold-light);
}

.hka-chips-tight {
	margin: 16px 0 0;
}

.hka-rest {
	margin-top: 72px;
	padding-top: 72px;
	border-top: 1px solid var(--hkl-line-light);
}

@media only screen and (max-width: 991px) {
	/* the Crossfit split's own columns come later in the file than the
	* general collapse, so it has to be collapsed here */
	.hka-functional .hkl-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.hka-feature:nth-child(even) > figure {
		order: 0;
	}

	.hka-features {
		gap: 56px;
	}

	.hka-mosaic {
		aspect-ratio: 4 / 3;
	}
}



@media only screen and (max-width: 767px) {
	/* no stagger on a phone: two equal photos side by side */
	.hka-duo .hkl-frame-tall:nth-child(2) {
		margin-top: 0;
	}

	.hka-feature .hkl-body {
		line-height: 1.65;
	}

	.hka-features {
		gap: 48px;
		margin-top: 48px;
	}

	.hka-rest {
		margin-top: 48px;
		padding-top: 48px;
	}

	.hkx-page-activities .hkh-dock {
		display: none !important;
	}

	.hkx-page-activities {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

/* ---------------------------------------------------------------------------
* 13. HK Global and PT pages (template-global.php, template-pt.php)
* ------------------------------------------------------------------------- */

/* Their headlines are sentences, not two words: a step smaller. */
.hkg-hero-title {
	font-size: clamp(40px, 5.6vw, 76px);
	line-height: 1.02;
}

.hkg-origin {
	margin-top: 64px;
}

.hkg-origin .hkl-stats {
	margin-top: 18px;
}

.hkg-stories {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* How a PT programme is built: four numbered steps. */
.hkp-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: hkp-step;
}

.hkp-steps li {
	position: relative;
	padding: 26px 22px 24px;
	border: 1px solid var(--hkl-line-light);
	border-radius: var(--hkl-radius);
	background: var(--hkl-paper);
	counter-increment: hkp-step;
}

.hkp-steps li::before {
	display: block;
	margin-bottom: 12px;
	color: var(--hkl-gold-deep);
	font-family: var(--hkl-serif);
	font-size: 34px;
	line-height: 1;
	content: counter(hkp-step, decimal-leading-zero);
}

.hkp-steps h3 {
	margin: 0 0 8px;
	color: var(--hkl-text);
	font-family: var(--hkl-serif);
	font-size: 22px;
	font-weight: 500;
}

.hkp-steps p {
	margin: 0;
	color: var(--hkl-muted);
	font-size: 15px;
	line-height: 1.6;
}

.hkp-stack {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.hkp-stack .hkl-frame {
	aspect-ratio: 3 / 4;
}

.hkp-founder {
	justify-self: end;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 4 / 5;
}

.hkp-pillars {
	margin: 0 0 22px;
}

@media only screen and (max-width: 1199px) {
	.hkg-stories,
	.hkp-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 767px) {
	.hkp-steps {
		margin-top: 40px;
	}


	.hkx-page-global .hkh-dock,
	.hkx-page-pt .hkh-dock {
		display: none !important;
	}

	.hkx-page-global,
	.hkx-page-pt {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

/*
* Four photos as four equal portrait tiles: large enough to read as photos,
* all the same size so the row is even.
*/
.hkg-gallery {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 40px;
}

.hkg-gallery figure {
	aspect-ratio: 3 / 4;
}

/* Hero facts that are words, not numbers: one line, a size smaller. */
.hkg .hkl-facts strong,
.hkp .hkl-facts strong,
.hkt .hkl-facts strong {
	font-size: clamp(24px, 2.4vw, 36px);
	white-space: nowrap;
}

/* The PT hero photo is busy — people, a pale wall, court lines. */
.hkp .hkl-hero::after {
	background:
		linear-gradient(180deg, rgba(15, 20, 17, 0.7) 0%, rgba(15, 20, 17, 0) 30%),
		linear-gradient(90deg, rgba(15, 20, 17, 0.9) 0%, rgba(15, 20, 17, 0.6) 50%, rgba(15, 20, 17, 0.25) 100%),
		linear-gradient(0deg, rgba(15, 20, 17, 0.92) 0%, rgba(15, 20, 17, 0) 40%);
}

@media only screen and (max-width: 767px) {
	.hkg-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hkp .hkl-hero-img {
		object-position: 70% center;
	}

	.hkp .hkl-hero::after {
		background: linear-gradient(180deg, rgba(15, 20, 17, 0.78) 0%, rgba(15, 20, 17, 0.72) 50%, rgba(15, 20, 17, 0.94) 100%);
	}

	.hkp-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hkp-steps li {
		padding: 18px 14px;
	}

	.hkp-steps h3 {
		font-size: 18px;
	}

	.hkp-steps p {
		font-size: 13px;
	}
}

/* The licence line, set in capitals wherever it appears. */
.hkl-upper {
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
* 14. Personal training page (template-training.php)
* ------------------------------------------------------------------------- */

.hkt-analysis {
	margin-top: 88px;
}

.hkt-analysis > figure {
	order: 0;
}

/* Six advantages: the numbered steps, three to a row, on the dark ground. */
.hkt-adv {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 0;
}

.hkt-advantages .hkp-steps li {
	border-color: var(--hkl-line-dark);
	background: var(--hkl-ink-2);
}

.hkt-advantages .hkp-steps li::before {
	color: var(--hkl-gold-light);
}

.hkt-advantages .hkp-steps h3 {
	color: #fff;
}

.hkt-advantages .hkp-steps p {
	color: var(--hkl-light-muted);
}

/* Nine training types: three rows of three, the same size. */
.hkt-type-grid .hkl-tile {
	aspect-ratio: 4 / 3;
}

.hkt-follow {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 8px;
}

.hkt-follow article {
	padding: 32px 30px;
	border-inline-start: 3px solid var(--hkl-gold);
	border-radius: 0 var(--hkl-radius) var(--hkl-radius) 0;
	background: var(--hkl-paper);
}

.hkt-follow h3 {
	margin: 0 0 12px;
	color: var(--hkl-text);
	font-family: var(--hkl-serif);
	font-size: 26px;
	font-weight: 500;
}

.hkt-follow p:last-child {
	margin: 0;
	color: var(--hkl-muted);
	font-size: 15px;
	line-height: 1.7;
}

.hkt-studio-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hkt-faq-list {
	max-width: 860px;
	margin: 0 auto;
}

.hkt-faq-list details {
	border-bottom: 1px solid var(--hkl-line-light);
}

.hkt-faq-list details:first-child {
	border-top: 1px solid var(--hkl-line-light);
}

.hkt-faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 4px;
	color: var(--hkl-text);
	cursor: pointer;
	font-family: var(--hkl-serif);
	font-size: 20px;
	list-style: none;
}

.hkt-faq-list summary::-webkit-details-marker {
	display: none;
}

.hkt-faq-list summary::after {
	flex: none;
	color: var(--hkl-gold-deep);
	font-family: inherit;
	font-size: 26px;
	line-height: 1;
	content: "+";
}

.hkt-faq-list details[open] summary::after {
	content: "−";
}

.hkt-faq-list details p {
	margin: 0;
	padding: 0 4px 22px;
	color: var(--hkl-muted);
	font-size: 16px;
	line-height: 1.75;
}

@media only screen and (max-width: 1199px) {
	.hkt-adv,
	.hkt-studio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 767px) {
	.hkt-analysis {
		margin-top: 56px;
	}

	.hkt-follow {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.hkt-follow article {
		padding: 24px 20px;
	}

	.hkt-faq-list summary {
		font-size: 17px;
	}

	.hkx-page-training .hkh-dock {
		display: none !important;
	}

	.hkx-page-training {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

/* ---------------------------------------------------------------------------
* 15. Consistency fixes across the templates
* ------------------------------------------------------------------------- */

/* Buttons carry a long and a short label; the phone dock uses the short one. */
.hkl-btn-short {
	display: none;
}

@media only screen and (max-width: 767px) {
	.hkl-dock .hkl-btn-long {
		display: none;
	}

	.hkl-dock .hkl-btn-short {
		display: inline;
	}
}

/* Once a split is a single column, its photo comes first, so two photos
* never land back to back between two blocks of text. */
@media only screen and (max-width: 991px) {
	.hkl-split > figure,
	.hkl-split > .hkp-stack,
	.hkl-split > .hka-duo {
		order: -1;
	}

	.hkp-founder {
		justify-self: center;
	}
}

/*
* Tile descriptions always take three lines' height, so every title in a
* row starts at the same place whether its text runs to two lines or three.
*/
.hkl-tile-text p {
	min-height: calc(1.55em * 3);
}

/* Room cards on a cream section: the footer was drawn for the dark cards. */
.hkl-cream .hkl-room-foot {
	border-top-color: var(--hkl-line-light);
}

.hkl-cream .hkl-price-ask {
	color: var(--hkl-muted);
}

.hkl-cream .hkl-room .hkl-link {
	color: var(--hkl-gold-deep);
}

.hkl-cream .hkl-room .hkl-link:hover {
	color: var(--hkl-text);
}

/* Gallery photos on cream: a hairline keeps pale skies from melting into
* the page. */
.hkl-cream .hkl-gallery figure {
	box-shadow: 0 0 0 1px rgba(15, 20, 17, 0.08);
}

/* ---------------------------------------------------------------------------
* 16. Room pages (template-parts/rooms/hk-room.php) and room cards
* ------------------------------------------------------------------------- */

.hkr-icon {
	flex: none;
	width: 22px;
	height: 22px;
}

/* Hero: the room's own photo, with its prices under the name. */
.hkr-hero .hkl-hero-img {
	object-position: 50% 55%;
}

.hkr-hero-title {
	font-size: clamp(42px, 6vw, 84px);
}

.hkr-hero-prices {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 28px;
	margin-top: 28px;
}

.hkr-hero-prices dl {
	display: flex;
	gap: 28px;
	margin: 0;
}

.hkr-hero-prices dl > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hkr-hero-prices dl > div + div {
	padding-inline-start: 28px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.22);
}

.hkr-hero-prices dt {
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hkr-hero-prices dd {
	margin: 0;
	color: var(--hkl-gold-light);
	font-family: var(--hkl-serif);
	font-size: clamp(34px, 3.6vw, 48px);
	line-height: 1;
}

.hkr-hero-basis {
	margin: 0 0 4px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

/* Up to four facts, but a room may carry fewer: the row takes as many
* columns as it has items. */
@media only screen and (min-width: 992px) {
	.hkr-facts {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}

.hkr-facts strong {
	font-size: clamp(26px, 2.6vw, 38px);
	white-space: nowrap;
}

/* Overview: the room on the left, the price card pinned on the right. */
.hkr-overview-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	align-items: start;
	gap: 64px;
}

.hkr-summary {
	color: var(--hkl-text) !important;
	font-size: 19px;
}

.hkr-tagline {
	margin: 24px 0 0;
	color: var(--hkl-gold-deep);
	font-family: var(--hkl-serif);
	font-size: 24px;
	font-style: italic;
}

.hkr-subtitle {
	margin: 48px 0 18px;
	font-family: var(--hkl-serif);
	font-size: 26px;
	font-weight: 500;
}

.hkr-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hkr-features li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--hkl-line-light);
	border-radius: 8px;
	background: var(--hkl-paper);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
}

.hkr-features .hkr-icon {
	color: var(--hkl-gold-deep);
}

.hkr-price-card {
	position: sticky;
	top: calc(var(--hk-sticky-h, 90px) + 20px);
	padding: 32px 30px 30px;
	border-radius: 14px;
	background: var(--hkl-ink);
	color: var(--hkl-light);
	box-shadow: 0 30px 60px rgba(15, 20, 17, 0.22);
}

.hkr-price-title {
	margin: 0 0 18px;
	color: var(--hkl-gold-light);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.hkr-price-rows {
	display: grid;
	gap: 0;
	margin: 0;
}

.hkr-price-rows > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--hkl-line-dark);
}

.hkr-price-rows > div:first-child {
	padding-top: 0;
}

.hkr-price-rows dt {
	color: var(--hkl-light-muted);
	font-size: 15px;
}

.hkr-price-rows dd {
	margin: 0;
	color: #fff;
	font-family: var(--hkl-serif);
	font-size: 40px;
	line-height: 1;
	white-space: nowrap;
}

.hkr-price-basis {
	margin: 12px 0 0;
	color: var(--hkl-gold-light);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: end;
	text-transform: uppercase;
}

.hkr-price-includes {
	display: flex;
	gap: 10px;
	margin: 22px 0 0;
	padding: 14px 16px;
	border-radius: 8px;
	background: rgba(201, 150, 44, 0.12);
	color: var(--hkl-light);
	font-size: 14px;
	line-height: 1.5;
}

.hkr-price-includes .hkr-icon {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--hkl-gold-light);
}

.hkr-price-notes {
	display: grid;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.hkr-price-notes li {
	position: relative;
	padding-inline-start: 16px;
	color: var(--hkl-light-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

.hkr-price-notes li::before {
	position: absolute;
	top: 0.62em;
	inset-inline-start: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hkl-gold);
	content: "";
}

.hkr-price-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-top: 26px;
}

.hkr-price-cta .hkl-btn {
	justify-content: center;
	width: 100%;
}

/* The card is dark inside a cream section: the buttons take the dark
* section's colours, not the cream ones. */
.hkl-cream .hkr-price-card .hkl-btn-whatsapp,
.hkl-cream .hkr-price-card .hkl-btn-ghost {
	color: var(--hkl-light);
}

.hkl-cream .hkr-price-card .hkl-btn-whatsapp svg {
	color: #25d366;
}

.hkl-cream .hkr-price-card .hkl-btn-ghost span {
	border-bottom-color: rgba(242, 237, 227, 0.35);
}

.hkl-cream .hkr-price-card .hkl-btn-ghost:hover {
	color: var(--hkl-gold-light);
}

/* Gallery: one large photo and four small ones; the rest open in the
* lightbox. */
.hkr-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 12px;
	aspect-ratio: 2 / 1;
}

.hkr-shot {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: var(--hkl-ink-2);
}

.hkr-shot:first-child {
	grid-row: span 2;
	grid-column: span 2;
}

.hkr-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hkr-shot:hover img {
	transform: scale(1.04);
}

.hkr-shot:focus-visible {
	outline: 2px solid var(--hkl-gold-light);
	outline-offset: 3px;
}

.hkr-shot-more {
	display: none;
}

.hkr-shot-count {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(15, 20, 17, 0.6);
	color: #fff;
	font-family: var(--hkl-serif);
	font-size: 40px;
}

/* Four photos: one tall, three in a column beside it would be too thin —
* four equal portraits instead. */
.hkr-gallery-n4 {
	grid-template-rows: minmax(0, 1fr);
	aspect-ratio: 8 / 3;
}

.hkr-gallery-n4 .hkr-shot:first-child {
	grid-row: auto;
	grid-column: auto;
}

.hkr-gallery-n3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	aspect-ratio: 3 / 2;
}

.hkr-gallery-n3 .hkr-shot:first-child {
	grid-column: span 2;
}

.hkr-gallery-n2,
.hkr-gallery-n1 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr);
	aspect-ratio: 8 / 3;
}

.hkr-gallery-n2 .hkr-shot:first-child,
.hkr-gallery-n1 .hkr-shot:first-child {
	grid-row: auto;
	grid-column: auto;
}

.hkr-gallery-n1 .hkr-shot:first-child {
	grid-column: 1 / -1;
}

.hkr-gallery-foot {
	display: flex;
	justify-content: center;
	margin: 32px 0 0;
}

.hkr-gallery-foot .hkl-btn {
	cursor: pointer;
	font: inherit;
}

/* Concept: three numbered steps. */
.hkr-concept-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hkr-concept;
}

.hkr-concept-list li {
	padding: 34px 30px 30px;
	border: 1px solid var(--hkl-line-light);
	border-top: 3px solid var(--hkl-gold);
	border-radius: var(--hkl-radius);
	background: var(--hkl-paper);
	counter-increment: hkr-concept;
}

.hkr-concept-list li::before {
	display: block;
	margin-bottom: 18px;
	color: var(--hkl-gold-deep);
	font-family: var(--hkl-serif);
	font-size: 44px;
	line-height: 1;
	content: "0" counter(hkr-concept);
}

.hkr-concept-list h3 {
	margin: 0 0 10px;
	font-family: var(--hkl-serif);
	font-size: 26px;
	font-weight: 500;
}

.hkr-concept-list p {
	margin: 0;
	color: var(--hkl-muted);
	font-size: 15px;
	line-height: 1.65;
}

/* Programme: 21 lines in three columns. */
.hkr-program-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hkr-program-list li {
	display: flex;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--hkl-line-dark);
}

.hkr-program-list .hkr-icon {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--hkl-gold-light);
}

.hkr-program-list div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hkr-program-list strong {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.hkr-program-list span {
	color: var(--hkl-light-muted);
	font-size: 14px;
	line-height: 1.5;
}

.hkr-program .hkl-cta-center {
	margin-top: 48px;
}

.hkl-facility-chips {
	margin-bottom: 0;
}

/* Approach */
.hkr-quote {
	margin: 32px 0 0;
	padding: 26px 28px;
	border-inline-start: 3px solid var(--hkl-gold);
	border-radius: 0 var(--hkl-radius) var(--hkl-radius) 0;
	background: var(--hkl-ink-2);
}

.hkr-quote p {
	margin: 0;
	color: var(--hkl-light-muted);
	font-size: 15px;
	line-height: 1.7;
}

.hkr-quote .hkr-quote-mark {
	margin-bottom: 8px;
	color: var(--hkl-gold-light);
	font-family: var(--hkl-serif);
	font-size: 28px;
	font-style: italic;
	line-height: 1.25;
}

.hkr-quote .hkr-quote-title {
	margin-bottom: 8px;
	color: #fff;
	font-weight: 600;
}

/* Location */
.hkr-location-list {
	display: grid;
	gap: 12px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.hkr-location-list li {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	border: 1px solid var(--hkl-line-light);
	border-radius: var(--hkl-radius);
	background: var(--hkl-paper);
}

.hkr-location-list .hkr-icon {
	width: 26px;
	height: 26px;
	color: var(--hkl-gold-deep);
}

.hkr-location-list div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hkr-location-list span {
	color: var(--hkl-gold-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hkr-location-list strong {
	font-family: var(--hkl-serif);
	font-size: 22px;
	font-weight: 500;
}

.hkr-location-list em {
	color: var(--hkl-muted);
	font-size: 14px;
	font-style: normal;
}

.hkr-note {
	margin: 20px 0 0;
	color: var(--hkl-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* Request form: the join section, over the room's second photo. */
.hkr-request .hkl-band-img {
	opacity: 0.5;
}

.hkr-request-room {
	margin: -4px 0 18px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

.hkr-request-room span {
	color: var(--hkl-gold-light);
	font-weight: 500;
}

/* Room cards with prices */
.hkr-cards-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.hkr-card .hkl-card-media {
	display: block;
}

.hkr-card .hkl-card-title {
	font-size: 24px;
}

.hkr-card .hkl-card-title a {
	color: inherit;
	text-decoration: none;
}

/* Prices sit at the foot of the card, so they line up across a row even
* when one room's name runs to two lines. */
.hkr-card-prices {
	display: flex;
	gap: 18px;
	margin: auto 0 0;
	padding-top: 4px;
}

.hkr-card-prices > div + div {
	padding-inline-start: 18px;
	border-inline-start: 1px solid var(--hkl-line-dark);
}

.hkl-cream .hkr-card-prices > div + div {
	border-inline-start-color: var(--hkl-line-light);
}

.hkr-card-prices dt {
	color: var(--hkl-light-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hkl-cream .hkr-card-prices dt {
	color: var(--hkl-muted);
}

.hkr-card-prices dd {
	margin: 2px 0 0;
	color: var(--hkl-gold-light);
	font-family: var(--hkl-serif);
	font-size: 26px;
	line-height: 1.1;
}

.hkl-cream .hkr-card-prices dd {
	color: var(--hkl-gold-deep);
}

.hkr-card-basis {
	margin: 6px 0 0 !important;
	font-size: 13px !important;
}

.hkr-card .hkl-card-body > .hkl-room-foot {
	margin-top: 18px;
}

@media only screen and (max-width: 1199px) {
	.hkr-cards-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hkr-overview-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
		gap: 40px;
	}

	.hkr-program-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 991px) {
	.hkr-overview-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hkr-price-card {
		position: static;
	}

	.hkr-concept-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.hkx-page-room .hkh-dock {
		display: none !important;
	}

	.hkx-page-room {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

@media only screen and (max-width: 767px) {
	.hkr-hero-prices dl,
	.hkr-hero-prices dl > div + div {
		gap: 20px;
		padding-inline-start: 0;
	}

	.hkr-hero-prices dl > div + div {
		padding-inline-start: 20px;
	}

	.hkr-features {
		gap: 8px;
	}

	.hkr-features li {
		gap: 8px;
		padding: 10px 10px;
		font-size: 13px;
	}

	.hkr-features .hkr-icon {
		width: 18px;
		height: 18px;
	}

	.hkr-program-list li {
		padding: 14px 0;
	}

	.hkr-price-card {
		padding: 26px 22px;
	}

	.hkr-price-rows dd {
		font-size: 34px;
	}

	/* Phone: the large photo on top, then two by two. */
	.hkr-gallery,
	.hkr-gallery-n4,
	.hkr-gallery-n3,
	.hkr-gallery-n2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 8px;
		aspect-ratio: auto;
	}

	.hkr-shot {
		aspect-ratio: 4 / 3;
	}

	.hkr-shot:first-child,
	.hkr-gallery-n3 .hkr-shot:first-child,
	.hkr-gallery-n4 .hkr-shot:first-child {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	/* Four photos: the first wide, then three would leave a hole — the last
	* one goes wide too. */
	.hkr-gallery-n4 .hkr-shot:nth-child(4) {
		grid-column: 1 / -1;
	}

	.hkr-program-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.hkr-location-list strong {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------------
* 17. Rooms page (template-rooms.php)
* ------------------------------------------------------------------------- */

.hko-intro-photo {
	overflow: visible;
}

.hko-intro-photo img {
	border-radius: var(--hkl-radius);
}

.hko-badge {
	position: absolute;
	bottom: -26px;
	inset-inline-start: -26px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 26px;
	border-radius: var(--hkl-radius);
	background: var(--hkl-ink);
	color: var(--hkl-light);
	box-shadow: 0 20px 40px rgba(15, 20, 17, 0.25);
}

.hko-badge strong {
	color: var(--hkl-gold-light);
	font-family: var(--hkl-serif);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
}

.hko-badge span {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Price table */
.hko-table {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	border-collapse: collapse;
	font-size: 16px;
}

.hko-table th,
.hko-table td {
	padding: 18px 16px;
	border: 0;
	border-bottom: 1px solid var(--hkl-line-dark);
	background: none;
	color: var(--hkl-light-muted);
	text-align: start;
	vertical-align: middle;
}

.hko-table thead th {
	padding-top: 0;
	color: var(--hkl-gold-light);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hko-table tbody th {
	font-family: var(--hkl-serif);
	font-size: 22px;
	font-weight: 500;
}

.hko-table tbody th a {
	color: #fff;
	text-decoration: none;
}

.hko-table tbody td:nth-child(2),
.hko-table tbody td:nth-child(3) {
	color: var(--hkl-gold-light);
	font-family: var(--hkl-serif);
	font-size: 26px;
	white-space: nowrap;
}

.hko-table tbody tr:hover th,
.hko-table tbody tr:hover td {
	background: rgba(242, 237, 227, 0.03);
}

.hko-table-link {
	text-align: end !important;
	white-space: nowrap;
}

/* Room rows: photos on one side, the room on the other, alternating. */
.hko-rooms {
	display: grid;
	gap: 40px;
}

.hko-room {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 56px;
	padding: 28px;
	border: 1px solid var(--hkl-line-light);
	border-radius: 16px;
	background: var(--hkl-paper);
	scroll-margin-top: 110px;
}

.hko-room-flip .hko-room-media {
	order: 2;
}

.hko-room-media {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.hko-room-media > span {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: var(--hkl-ink-2);
}

.hko-room-main {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}

.hko-room-thumb {
	aspect-ratio: 16 / 10;
}

.hko-room-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hko-room-media:hover img {
	transform: scale(1.03);
}

.hko-room-media > .hko-room-count {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(15, 20, 17, 0.8);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.hko-room-body .hkl-title a {
	color: inherit;
	text-decoration: none;
}

.hko-room-body .hkl-body {
	color: var(--hkl-muted);
	font-size: 16px;
}

.hko-room-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.hko-room-facts li {
	padding: 7px 14px;
	border: 1px solid var(--hkl-line-light);
	border-radius: 999px;
	color: var(--hkl-muted);
	font-size: 13px;
}

.hko-room-facts strong {
	color: var(--hkl-text);
}

.hko-room-foot {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--hkl-line-light);
}

.hko-room-foot .hkr-card-prices dd {
	font-size: 34px;
}

.hko-room-foot .hkr-card-prices > div + div {
	border-inline-start-color: var(--hkl-line-light);
}

.hko-room-foot .hkr-card-prices dt {
	color: var(--hkl-muted);
}

.hko-room-foot .hkr-card-prices dd {
	color: var(--hkl-gold-deep);
}

.hko-room-foot .hkr-card-basis {
	color: var(--hkl-muted);
}

.hko-room .hkl-cta {
	margin-top: 24px;
}

.hko-room .hkl-btn-gold {
	min-height: 52px;
	padding: 0 28px;
	font-size: 15px;
}

/* Conditions: a numbered list in two columns. */
.hko-policy-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	counter-reset: hko-policy;
}

.hko-policy-list li {
	position: relative;
	padding: 18px 20px 18px 64px;
	border: 1px solid var(--hkl-line-light);
	border-radius: var(--hkl-radius);
	background: var(--hkl-paper);
	color: var(--hkl-text);
	font-size: 15px;
	line-height: 1.6;
	counter-increment: hko-policy;
}

.hko-policy-list li::before {
	position: absolute;
	top: 16px;
	inset-inline-start: 20px;
	color: var(--hkl-gold-deep);
	font-family: var(--hkl-serif);
	font-size: 24px;
	line-height: 1;
	content: counter(hko-policy, decimal-leading-zero);
}

@media only screen and (max-width: 1199px) {
	.hko-room {
		gap: 36px;
	}
}

@media only screen and (max-width: 991px) {
	.hko-room {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		padding: 18px;
	}

	.hko-room-flip .hko-room-media {
		order: 0;
	}

	.hko-badge {
		bottom: -18px;
		inset-inline-start: 16px;
		padding: 16px 20px;
	}

	.hko-policy-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.hkx-page-rooms .hkh-dock {
		display: none !important;
	}

	.hkx-page-rooms {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

@media only screen and (max-width: 767px) {
	/* The table becomes one card per room: name, then the prices labelled. */
	.hko-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.hko-table,
	.hko-table tbody,
	.hko-table tr {
		display: block;
	}

	/* One compact row per room: the name (a link) with its basis under it,
	* the two prices on the right. */
	.hko-table tr {
		display: grid;
		grid-template-areas: "name daily monthly" "basis daily monthly";
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 2px 16px;
		padding: 14px 0;
		border-bottom: 1px solid var(--hkl-line-dark);
	}

	.hko-table th,
	.hko-table td {
		display: block;
		padding: 0;
		border: 0;
	}

	.hko-table tbody th {
		grid-area: name;
		align-self: end;
		font-size: 19px;
		line-height: 1.2;
	}

	.hko-table tbody td:nth-child(2) {
		grid-area: daily;
	}

	.hko-table tbody td:nth-child(3) {
		grid-area: monthly;
	}

	.hko-table td[data-label]::before {
		display: block;
		margin-bottom: 2px;
		color: var(--hkl-light-muted);
		font-family: var(--body-font, sans-serif);
		font-size: 10px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		content: attr(data-label);
	}

	.hko-table tbody td:nth-child(2),
	.hko-table tbody td:nth-child(3) {
		font-size: 21px;
		text-align: end;
	}

	.hko-table tbody td:nth-child(4) {
		grid-area: basis;
		align-self: start;
		font-size: 12px;
	}

	.hko-table tbody td:nth-child(4)::before,
	.hko-table-link {
		display: none !important;
	}

	.hko-room-foot .hkr-card-prices dd {
		font-size: 28px;
	}

	.hko-room .hkl-cta {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
* 18. Service pages (template-parts/services/service.php)
* ------------------------------------------------------------------------- */

.hks-hero-title {
	font-size: clamp(40px, 6vw, 80px);
}

/* Hero facts that are words, not numbers: one line, a size smaller. */
.hks-facts strong {
	font-size: clamp(24px, 2.4vw, 36px);
	white-space: nowrap;
}

/* Split rows can put the photo on the right. */
.hks-flip > figure {
	order: 2;
}

.hks-sec-split .hkl-cta-section {
	margin-top: 28px;
}

.hks-head-start {
	margin-bottom: 8px;
}

/* Cards: three or four across; text-only cards get a gold edge instead of
* a photo. */
.hks-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

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

.hks-cols-4 .hkl-card-title {
	font-size: 22px;
}

.hks-card-text {
	border-top: 3px solid var(--hkl-gold);
}

.hks-card-text .hkl-card-body {
	padding: 30px 28px;
}

.hks-card-text .hkl-card-body p {
	margin-bottom: 0;
}

/* Devices beside a photo: two columns fit half the page. */
.hks-devices {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 32px;
}

.hks-devices li:has(em) strong {
	padding-inline-end: 0;
}

.hks-devices em {
	position: static;
	align-self: flex-start;
	order: -1;
}

.hks-chip-list {
	margin-bottom: 0;
}

.hks-note {
	max-width: 640px;
	margin: 28px auto 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}

.hkl-dark .hks-note {
	color: var(--hkl-light-muted);
}

.hkl-cream .hks-note {
	color: var(--hkl-muted);
}

.hks-steps {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Gallery: the first photo large, the rest around it. */
.hks-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 220px);
	gap: 12px;
}

.hks-gallery figure {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--hkl-ink-2);
}

.hks-gallery figure:first-child {
	grid-row: span 2;
	grid-column: span 2;
}

.hks-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hks-gallery figure:hover img {
	transform: scale(1.04);
}

/* Five photos fill the grid exactly. Four or eight leave one cell short, so
* the last photo spans two columns. */
.hks-gallery-n4 figure:last-child,
.hks-gallery-n8 figure:last-child {
	grid-column: span 2;
}

.hkl-cream .hks-gallery figure {
	box-shadow: 0 0 0 1px rgba(15, 20, 17, 0.08);
}

/* FAQ on a dark section: the list was drawn for cream. */
.hkl-dark .hkt-faq-list details,
.hkl-dark .hkt-faq-list details:first-child {
	border-color: var(--hkl-line-dark);
}

.hkl-dark .hkt-faq-list summary {
	color: #fff;
}

.hkl-dark .hkt-faq-list summary::after {
	color: var(--hkl-gold-light);
}

.hkl-dark .hkt-faq-list details p {
	color: var(--hkl-light-muted);
}

/* Other services: tiles are links here. */
.hks-other-tiles .hkl-tile {
	display: block;
	color: inherit;
	text-decoration: none;
}

@media only screen and (max-width: 1199px) {
	.hks-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.hks-gallery {
		grid-auto-rows: minmax(0, 180px);
	}
}

@media only screen and (max-width: 991px) {
	.hks-flip > figure {
		order: 0;
	}

	.hks-devices {
		grid-template-columns: minmax(0, 1fr);
	}

	[class*="hkx-page-svc-"] .hkh-dock,
	[class*="hkx-page-camp-"] .hkh-dock {
		display: none !important;
	}

	[class*="hkx-page-svc-"],
	[class*="hkx-page-camp-"] {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

@media only screen and (max-width: 767px) {
	.hks-cols-3,
	.hks-cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.hks-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.hks-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 8px;
	}

	.hks-gallery figure {
		aspect-ratio: 4 / 3;
	}

	.hks-gallery figure:first-child {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	/* An even count after the wide first photo leaves one alone: it spans. */
	.hks-gallery-n4 figure:last-child,
	.hks-gallery-n8 figure:last-child {
		grid-column: 1 / -1;
	}
}

/* Facility tiles that open their service page. */
.hkl-tile-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hkl-tile-arrow {
	color: var(--hkl-gold-light);
	transition: margin 0.2s ease;
}

.hkl-tile-link:hover .hkl-tile-arrow {
	margin-inline-start: 4px;
}

/* ---------------------------------------------------------------------------
* 19. Photos still loading
*
* A photo scrolled into view before it has arrived used to leave a dark,
* empty box. It now shows a soft moving shimmer in the section's own tone
* until the image is in (hk-landing.js adds .hk-ready and stops it).
* ------------------------------------------------------------------------- */

@keyframes hk-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

.hkl img:not(.hk-ready):not(.hkl-band-img):not(.hkv-poster) {
	background-color: #26302a;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 70%);
	background-size: 200% 100%;
	animation: hk-shimmer 1.4s linear infinite;
}

.hkl .hkl-cream img:not(.hk-ready):not(.hkl-band-img):not(.hkv-poster) {
	background-color: #e8e0d1;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 70%);
}

/* Arriving photos fade in over the shimmer rather than pop. */
@keyframes hk-fade-in {
	from { opacity: 0.2; }
	to { opacity: 1; }
}

.hkl img.hk-in {
	animation: hk-fade-in 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.hkl img:not(.hk-ready),
	.hkl img.hk-in {
		animation: none;
	}
}

/* A day's hours on the camp pages (section type "timeline"). */
.hks-timeline {
	display: grid;
	gap: 0;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.hks-timeline li {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--hkl-line-light);
}

.hkl-dark .hks-timeline li {
	border-bottom-color: var(--hkl-line-dark);
}

.hks-timeline li:first-child {
	border-top: 1px solid var(--hkl-line-light);
}

.hkl-dark .hks-timeline li:first-child {
	border-top-color: var(--hkl-line-dark);
}

.hks-time {
	color: var(--hkl-gold-deep);
	font-family: var(--hkl-serif);
	font-size: 22px;
	line-height: 1.3;
}

.hkl-dark .hks-time {
	color: var(--hkl-gold-light);
}

.hks-timeline div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hks-timeline strong {
	font-size: 17px;
	font-weight: 600;
}

.hks-timeline span:not(.hks-time) {
	font-size: 15px;
	line-height: 1.6;
}

.hkl-dark .hks-timeline span:not(.hks-time) {
	color: var(--hkl-light-muted);
}

.hkl-cream .hks-timeline span:not(.hks-time) {
	color: var(--hkl-muted);
}

@media only screen and (max-width: 767px) {
	.hks-timeline li {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: 16px 0;
	}

	.hks-time {
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------------------
* Safety net for editor content printed under a template
*
* An icon pasted into a page without width or height fills whatever box it
* lands in: one phone icon came out 1152px wide under a camp page. Inside the
* editor's own content an icon stays an icon, and a stray image never breaks
* out of the column.
* ------------------------------------------------------------------------- */

.hkl .entry-content svg:not([width]):not([height]) {
	width: 1.3em;
	height: 1.3em;
	vertical-align: -0.2em;
}

.hkl .entry-content img,
.hkl .entry-content video,
.hkl .entry-content iframe {
	max-width: 100%;
	height: auto;
}

.hkl .entry-content > * {
	max-width: 100%;
}