/* =========================================================================
   HANKAT ALTURATH — v2.1 DARK CINEMATIC SYSTEM
   =========================================================================

   ART DIRECTION
   -------------
   The site is now dark end to end: deep chocolate and espresso grounds, warm
   terracotta and burnt orange for energy, muted gold for structure. Cream is
   reserved for TEXT, small highlight details and hairlines - never for large
   background slabs. Nothing is black; every dark tone carries brown in it, so
   the page stays warm and cultural rather than cold and techy.

   Tonal rhythm is created by shifting the DEPTH of the dark, not by
   alternating dark and cream:

     --hk-ground   #1B0D05   deepest, page ground and footer
     --hk-tone-1   #241408   standard section
     --hk-tone-2   #2C1609   raised section
     --hk-surface  #33200F   card surface
     --hk-raise    #3D2713   raised card / input

   TYPOGRAPHY
   ----------
   A bilingual pair, self-hosted, selected structurally by language:
   Arabic runs in ALEXANDRIA, English in SORA. Weights 400/500/700/800 are
   real cuts, so nothing is ever faux-bolded. Display weight (800) is reserved
   for the hero and the major section titles; 500 handles navigation and UI
   labels; 400 carries body copy. Arabic keeps a 1.9 line-height and zero
   tracking so the cursive joins stay clean.

   MOTION
   ------
   transform and opacity only. Everything is disabled under
   prefers-reduced-motion, and heavy effects are dropped on phones.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
	/*
	 * Writing direction as a number, so mirrored transforms need no extra
	 * rule. NOTE: the [dir="rtl"] override lives further down and matches at
	 * equal specificity, so it must stay AFTER this block to win.
	 */
	--hk-dir: 1;

	/* Dark grounds - all warm, none black */
	--hk-ground: #1B0D05;
	--hk-tone-1: #241408;
	--hk-tone-2: #2C1609;
	--hk-surface: #33200F;
	--hk-raise: #3D2713;

	/* Brand colour */
	--hk-orange: #E8532B;
	--hk-burnt: #C4471F;
	--hk-terracotta: #A0402A;
	--hk-brown: #8E5A38;
	--hk-wood: #6B4226;

	/* Gold - structural, not decorative noise */
	--hk-gold: #F2CE87;
	--hk-gold-deep: #D8A94F;
	--hk-gold-dim: rgba(242, 206, 135, 0.24);
	--hk-gold-hair: rgba(242, 206, 135, 0.16);

	/* Cream - text and small details only */
	--hk-cream: #F6E9CF;
	--hk-cream-2: #E4D2AF;
	--hk-cream-3: #BFA983;

	/* Semantic text */
	--hk-text: var(--hk-cream);
	--hk-muted: var(--hk-cream-2);
	--hk-faint: var(--hk-cream-3);

	--hk-line: rgba(242, 206, 135, 0.14);
	--hk-line-strong: rgba(242, 206, 135, 0.3);

	/* Gradients */
	--hk-grad-warm: linear-gradient(135deg, var(--hk-orange) 0%, var(--hk-burnt) 55%, #92351A 100%);
	--hk-grad-gold: linear-gradient(135deg, #FFF0C8 0%, var(--hk-gold) 45%, var(--hk-gold-deep) 100%);
	--hk-grad-card: linear-gradient(165deg, var(--hk-raise) 0%, var(--hk-surface) 60%, #2A1A0C 100%);
	--hk-grad-tone1: linear-gradient(180deg, var(--hk-tone-1) 0%, var(--hk-ground) 100%);
	--hk-grad-tone2: linear-gradient(180deg, var(--hk-tone-2) 0%, var(--hk-tone-1) 100%);

	/* Sadu triangle strip, from the game board's border */
	--hk-sadu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Crect width='48' height='24' fill='%23A0402A'/%3E%3Cpolygon points='0,24 12,0 24,24' fill='%23E8532B'/%3E%3Cpolygon points='24,0 36,24 48,0' fill='%23F2CE87'/%3E%3C/svg%3E");

	/*
	 * TYPE — a bilingual pair, applied structurally by language.
	 * Arabic runs in Alexandria, English in Sora. Both are self-hosted from
	 * assets/fonts (see functions.php), so there is no third-party request.
	 * If a file is missing the stack falls back to the system UI font and the
	 * site still renders correctly.
	 */
	--hk-font-ar: "Alexandria", "Segoe UI", system-ui, -apple-system, "Noto Naskh Arabic", sans-serif;
	--hk-font-en: "Sora", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	/* Default for chrome and untagged text. */
	--hk-font: var(--hk-font-en);

	/* Weights - only real ones, never synthesised */
	--hk-w-body: 400;
	--hk-w-medium: 500;
	--hk-w-bold: 700;
	--hk-w-display: 800;

	/* Space */
	--hk-container: 1200px;
	--hk-gutter: clamp(18px, 4vw, 44px);
	--hk-section-y: clamp(84px, 10vw, 156px);

	--hk-radius-s: 12px;
	--hk-radius: 20px;
	--hk-radius-l: 28px;

	/* Elevation - dark UI needs light rims, not just shadows */
	--hk-shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.9);
	--hk-shadow-l: 0 42px 90px -40px rgba(0, 0, 0, 1);
	--hk-rim: inset 0 1px 0 rgba(255, 255, 255, 0.06);

	--hk-ease: cubic-bezier(0.22, 0.68, 0.28, 1);
	--hk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--hk-header-h: 78px;
}

/* -------------------------------------------------------------------------
   2. Language system
   ---------------------------------------------------------------------- */

html[data-lang="ar"] .hk-i18n[data-lang="en"],
html[data-lang="en"] .hk-i18n[data-lang="ar"],
html:not([data-lang]) .hk-i18n[data-lang="en"] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   3. Base
   ---------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hk-header-h) + 20px);
	background: var(--hk-ground);
}

body.hk-theme {
	margin: 0;
	background: var(--hk-ground);
	color: var(--hk-text);
	font-family: var(--hk-font);
	font-size: 17px;
	line-height: 1.75;
	overflow-x: hidden;
	overflow-wrap: break-word;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	font-synthesis: none;
}

body.hk-nav-open {
	overflow: hidden;
}

/*
 * LANGUAGE-DRIVEN TYPOGRAPHY
 * Every bilingual string is wrapped in an element carrying lang="ar" or
 * lang="en", so the family is selected structurally rather than by guessing
 * from content. Arabic also keeps a taller line-height and zero tracking,
 * because tracking breaks the cursive joins.
 */
[dir="rtl"] {
	--hk-dir: -1;
}

[lang="ar"],
[dir="rtl"] {
	font-family: var(--hk-font-ar);
	letter-spacing: normal;
	font-feature-settings: "kern" 1;
}

[lang="ar"] {
	line-height: 1.9;
}

[lang="en"] {
	font-family: var(--hk-font-en);
}

/* An RTL page still sets English fragments in Sora. */
[dir="rtl"] [lang="en"] {
	font-family: var(--hk-font-en);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.55em;
	font-weight: var(--hk-w-bold);
	line-height: 1.2;
	color: var(--hk-cream);
}

/* Display weight is reserved for the hero and the major section titles. */
.hk-hero__title,
.hk-heading__title,
.hk-download__title,
.hk-contact__title,
.hk-quote__text {
	font-weight: var(--hk-w-display);
}

/* Compact, slightly tracked labels for navigation and UI chrome. */
.hk-nav__list a,
.hk-mobile__list a,
.hk-langswitch__btn,
.hk-eyebrow,
.hk-achgroup__title,
.hk-footer__social-title,
.hk-field__label,
.hk-chip,
.hk-store__text small {
	font-weight: var(--hk-w-medium);
}

.hk-chip,
.hk-field__label,
.hk-achgroup__title,
.hk-footer__social-title,
.hk-eyebrow {
	font-weight: var(--hk-w-bold);
}

[lang="ar"] h1,
h1 [lang="ar"],
[lang="ar"] h2,
h2 [lang="ar"],
[lang="ar"] h3,
h3 [lang="ar"] {
	line-height: 1.45;
}

p {
	margin: 0 0 1.1em;
}

a {
	color: var(--hk-gold);
	text-underline-offset: 3px;
	transition: color 0.25s var(--hk-ease);
}

a:hover {
	color: #FFE6AE;
}

ul, ol {
	margin: 0 0 1.1em;
	padding-inline-start: 1.2em;
}

img, svg, video, canvas, iframe, table {
	max-width: 100%;
}

img {
	height: auto;
	display: block;
}

button {
	font-family: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--hk-gold);
	outline-offset: 3px;
	border-radius: 6px;
}

.hk-container {
	width: 100%;
	max-width: var(--hk-container);
	margin-inline: auto;
	padding-inline: var(--hk-gutter);
	position: relative;
	z-index: 2;
}

.hk-section {
	position: relative;
	padding-block: var(--hk-section-y);
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   4. Section tones and transitions

   Sections differ by DEPTH of dark, not by flipping to cream. Each one is
   separated by a soft tonal fade plus a gold hairline, so the page reads as
   one continuous scene rather than stacked rectangles.
   ---------------------------------------------------------------------- */

.hk-vision   { background: var(--hk-grad-tone1); }
.hk-game     { background: var(--hk-grad-tone2); }
.hk-games    { background: var(--hk-grad-tone1); }
.hk-impact   { background: linear-gradient(180deg, var(--hk-tone-2), var(--hk-tone-2)); }
.hk-ach      { background: var(--hk-grad-tone1); }
.hk-team     { background: var(--hk-grad-tone2); }
.hk-contact  { background: var(--hk-grad-tone1); }
.hk-download { background: linear-gradient(180deg, var(--hk-tone-2) 0%, var(--hk-ground) 100%); }

/* Gold hairline + tonal fade at the top of every major section. */
.hk-vision::before,
.hk-game::before,
.hk-games::before,
.hk-impact::before,
.hk-ach::before,
.hk-team::before,
.hk-contact::before,
.hk-download::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 120px;
	background:
		linear-gradient(180deg, rgba(242, 206, 135, 0.16) 0 1px, transparent 1px),
		linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent);
	pointer-events: none;
	z-index: 1;
}

/* Sadu separator, used where a section change should feel ceremonial. */
.hk-sadu {
	position: absolute;
	inset-inline: 0;
	height: 18px;
	background-image: var(--hk-sadu);
	background-repeat: repeat-x;
	background-size: 42px 18px;
	opacity: 0.85;
	z-index: 3;
	/*
	 * AMBIENT: the woven band travels very slowly, like a strip of Sadu being
	 * drawn past. One full tile per 24s - present, never noticeable.
	 */
	animation: hk-sadu-drift 24s linear infinite;
}

@keyframes hk-sadu-drift {
	from { background-position: 0 0; }
	to { background-position: 42px 0; }
}

.hk-sadu--top { inset-block-start: 0; }
.hk-sadu--bottom { inset-block-end: 0; transform: scaleY(-1); }

/* =========================================================================
   AMBIENT MOTION
   The page must feel alive when nothing is being scrolled. Everything here
   is slow, low-amplitude and compositor-only. Nothing pulses, blinks or
   demands attention: the aim is atmosphere, not decoration.
   ========================================================================= */

/* Gold hairlines catch the light occasionally, ~14s apart. */
.hk-vision::before,
.hk-game::before,
.hk-games::before,
.hk-impact::before,
.hk-ach::before,
.hk-team::before,
.hk-contact::before,
.hk-download::before {
	animation: hk-hairline-shimmer 14s ease-in-out infinite;
}

@keyframes hk-hairline-shimmer {
	0%, 88%, 100% { opacity: 1; }
	94% { opacity: 0.72; }
}

/* Section glows drift rather than sit still. */
.hk-ach__glow,
.hk-hero__glow,
.hk-contact::after {
	will-change: transform, opacity;
}

/* =========================================================================
   4b. THE HENKAA LOCK — signature section arrival
   =========================================================================

   Images\locks.png in the game is a traditional Saudi door beam: a carved
   wooden bar with arch motifs, metal studs and a hanging gold ring. In
   FrameFr.png it lies across the Um Tis'a board, so "locked until you play"
   is the game's own grammar. Here two wooden panels close over the section,
   barred by that beam, and open as the visitor arrives.

   SAFETY: the closed state is applied ONLY under .hk-js and only while the
   section has not yet been unlocked. With no JavaScript, or if the script
   fails, every panel is transparent and every section reads normally. The
   overlay is aria-hidden and pointer-events:none once open.
   ---------------------------------------------------------------------- */

.hk-lock {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	overflow: hidden;
	/* Open by default. Only JS closes it. */
	opacity: 0;
	visibility: hidden;
}

/* Barred, waiting to be reached. */
.hk-js [data-lockable]:not(.is-unlocked) .hk-lock {
	opacity: 1;
	visibility: visible;
}

/*
 * STATE 1 — LOCKED
 * The scene is not covered, it is VEILED: the achievements stay visible
 * behind the barrier, dimmed, so the visitor can see there is something worth
 * unlocking. Two wooden doors would have hidden them.
 */
.hk-lock__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 70% at 50% 50%, rgba(12, 6, 2, 0.55), rgba(12, 6, 2, 0.88) 78%);
	transition: opacity 0.8s linear;
}

/* ---- The beam --------------------------------------------------------
   THE REAL ARTWORK, REPEATED ACROSS THE SECTION.

   lock-beam.png is one complete unit of the game's door beam: carved arch
   motifs, metal studs, a steel plate, and a gold ring hanging from it. In the
   game the beam is that unit laid side by side across the door - which is
   exactly what repeat-x does here.

   background-size: auto 100% is the whole trick. Height is fixed; width
   follows from the image's own aspect ratio. So a wider section simply shows
   MORE units, and the rings and metal are never stretched or squashed. Only
   the run of wood gets longer, which is the one thing that should.

   Dead level. Nothing in this block rotates, at rest or during the release.
   ------------------------------------------------------------------- */

.hk-lock__bar {
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	/*
	 * The art's wood band occupies roughly the top third of the image, with
	 * the rings hanging below it. --hk-beam-lift shifts the bar up so that
	 * WOOD, not the whole image, sits on the section's centre line - the beam
	 * bars the content and the rings hang into it, as in the game.
	 */
	height: var(--hk-beam-h, clamp(150px, 21vw, 260px));
	translate: 0 var(--hk-beam-lift, -34%);
}

/* The CSS stand-in, used only when the artwork is absent, is a plain bar. */
.hk-lock:not(.hk-lock--art) .hk-lock__bar {
	height: clamp(54px, 6.5vw, 86px);
	translate: 0 -50%;
}

.hk-js [data-lockable]:not(.is-unlocked) .hk-lock__bar {
	will-change: transform;
}

/* The plank: carved grooves, lit top edge, heavy shadow underneath. */
.hk-lock__wood {
	position: absolute;
	inset: 0;
	border-radius: 5px;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 44px),
		linear-gradient(180deg, #6E4726 0%, #4A2E18 40%, #33200F 74%, #241408 100%);
	box-shadow:
		0 26px 46px rgba(0, 0, 0, 0.68),
		inset 0 2px 0 rgba(242, 206, 135, 0.24),
		inset 0 -3px 0 rgba(0, 0, 0, 0.55);
	border-block-start: 1px solid rgba(242, 206, 135, 0.3);
}

/* Metal end-caps, where a real beam is bound. */
.hk-lock__cap {
	position: absolute;
	inset-block: -7px;
	width: clamp(18px, 2.2vw, 30px);
	border-radius: 4px;
	background: var(--hk-grad-gold);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
	opacity: 0.9;
}

.hk-lock__cap--start { inset-inline-start: 0; }
.hk-lock__cap--end { inset-inline-end: 0; }

/*
 * THE THREE NUMBERS THAT TIE CSS TO THE ARTWORK.
 *
 * Measured off lock-beam.png (570 x 310): the wood band starts 11% down the
 * image and ends at 50%, and the rings hang below that. They live here as
 * tokens so the whole beam can be re-tuned from one place if the art is ever
 * re-exported, instead of being buried in five separate clip-paths.
 */
.hk-lock--art {
	--hk-beam-h: clamp(150px, 21vw, 260px);
	--hk-beam-top: 11%;
	--hk-beam-band: 50%;
	/* Puts the middle of the WOOD on the section's centre line. */
	--hk-beam-lift: -31%;
}

/*
 * STATE 2 — the warm light that travels the mechanism.
 * A pre-rendered gradient moved with transform; animating a box-shadow or a
 * background-position instead would re-rasterise the whole bar every frame.
 */
.hk-lock__glint {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(255, 238, 196, 0.62), transparent);
	opacity: 0;
	border-radius: 5px;
	mix-blend-mode: screen;
}

/* On the real artwork the light runs along the WOOD, not the empty air. */
.hk-lock--art .hk-lock__glint {
	inset-block: var(--hk-beam-top) auto;
	height: calc(var(--hk-beam-band) - var(--hk-beam-top));
}

/* ---- The two artwork layers ------------------------------------------
   Same image, same size, same position - clipped along the line where the
   wood ends. Together they are one seamless picture; apart, the rings can be
   pulled without dragging the beam with them.

   --hk-beam-band is where that line falls, as a fraction of the image height.
   It is the only number here tuned by eye against the artwork, so it is a
   token rather than a magic number buried in a clip-path.
   ------------------------------------------------------------------- */

.hk-lock__art {
	position: absolute;
	inset: 0;
	background-repeat: repeat-x;
	/* Height fixed, width from the aspect ratio: never distorted. */
	background-size: auto 100%;
	/*
	 * Offset by half a unit so two units MEET on the centre line, the way
	 * they do in the game, rather than one sitting dead centre with its ring
	 * in the middle of the page.
	 */
	background-position: calc(50% + var(--hk-beam-h, 200px) * 0.92) top;
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.62));
}

/* The wood: everything above the band line. */
.hk-lock__art--wood {
	clip-path: inset(0 0 calc(100% - var(--hk-beam-band, 50%)) 0);
}

/*
 * The rings: everything below it.
 *
 * Its own gentle bob is the ambient life of the locked state - the rings hang
 * and settle while the beam stays perfectly still. Vertical only: a rotation
 * here would swing the clipped edge away from the wood and open a hairline
 * gap along the beam.
 */
.hk-lock__art--rings {
	clip-path: inset(var(--hk-beam-band, 50%) 0 0 0);
	animation: hk-ring-hang 7.4s ease-in-out infinite;
}

@keyframes hk-ring-hang {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(2px); }
}

/*
 * Two gold rings, hanging DOWN from the bar. Used ONLY when the artwork has
 * not been copied in - the real beam brings its own rings. transform-origin
 * sits above each ring, at the bar, so a rotation reads as a hanging ring
 * swinging rather than a disc spinning.
 */
.hk-lock__ring {
	position: absolute;
	inset-block-start: 62%;
	width: clamp(26px, 3vw, 38px);
	height: clamp(26px, 3vw, 38px);
	border-radius: 50%;
	border: 5px solid var(--hk-gold-deep);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(0, 0, 0, 0.4);
	transform-origin: 50% -55%;
}

/* The staple that pins each ring to the beam. */
.hk-lock__ring::before {
	content: "";
	position: absolute;
	inset-block-start: -13px;
	inset-inline-start: 50%;
	translate: -50% 0;
	width: 8px;
	height: 14px;
	border-radius: 3px;
	background: var(--hk-gold-deep);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.hk-lock__ring--a { inset-inline-start: 24%; }
.hk-lock__ring--b { inset-inline-end: 24%; }

/*
 * Ambient: the rings never sit perfectly still. Different periods, so the two
 * never swing in lockstep - the giveaway that something is animated rather
 * than hanging.
 */
.hk-lock__ring--a { animation: hk-ring-sway 6.5s ease-in-out infinite; }
.hk-lock__ring--b { animation: hk-ring-sway 8.3s ease-in-out -2.7s infinite; }

@keyframes hk-ring-sway {
	0%, 100% { transform: rotate(-2.2deg); }
	50% { transform: rotate(2.2deg); }
}

/* ---- The unlock sequence ---------------------------------------------
   STATE 2  the rings lift and turn, as if pulled, and gold light runs the bar
   STATE 3  the beam unseats, hangs for a beat, then slides heavily clear
   STATE 4  the scrim lifts and the content is released, group by group

   Deliberately slow. The whole release runs ~2.3s: unseating at 0.78s is the
   moment it stops being decoration and becomes a mechanism.
   ------------------------------------------------------------------- */

.hk-js [data-lockable].is-unlocked .hk-lock {
	transition: opacity 0.45s linear 2.1s, visibility 0s linear 2.55s;
	opacity: 0;
	visibility: hidden;
}

/*
 * STATE 2 — the pull.
 *
 * On the real artwork this is the ring LAYER alone: it lifts and settles
 * while the wood above it has not moved yet, which is what a hand pulling on
 * a hanging ring looks like. Purely vertical, so the clipped edge stays
 * flush against the beam and no seam can open.
 */
.hk-js [data-lockable].is-unlocked .hk-lock__art--rings {
	animation: hk-ring-tug 0.78s var(--hk-ease-out) both;
}

@keyframes hk-ring-tug {
	0% { transform: translateY(0); }
	40% { transform: translateY(-7px); }
	72% { transform: translateY(-2px); }
	100% { transform: translateY(-5px); }
}

/* The drawn stand-in swings instead, since it has no beam to stay flush to. */
.hk-js [data-lockable].is-unlocked .hk-lock__ring {
	animation: hk-ring-pull 0.72s var(--hk-ease-out) both;
}

@keyframes hk-ring-pull {
	0% { transform: rotate(0deg) translateY(0); }
	45% { transform: rotate(-9deg) translateY(-8px); }
	100% { transform: rotate(5deg) translateY(-3px); opacity: 0.4; }
}

/* STATE 2 — the light travelling the mechanism */
.hk-js [data-lockable].is-unlocked .hk-lock__glint {
	animation: hk-lock-glint 1.15s cubic-bezier(0.36, 0.1, 0.24, 1) 0.16s both;
}

@keyframes hk-lock-glint {
	0% { transform: translateX(calc(var(--hk-dir, 1) * -110%)); opacity: 0; }
	22% { opacity: 0.95; }
	78% { opacity: 0.95; }
	100% { transform: translateX(calc(var(--hk-dir, 1) * 440%)); opacity: 0; }
}

/*
 * STATE 3 — the release.
 *
 * Lift out of its seat, hold, then travel out sideways along the bar's own
 * axis. The hold between 22% and 32% is what makes it read as weight rather
 * than a slide: a heavy beam does not change direction instantly.
 *
 * NO ROTATION AT ANY KEYFRAME. The beam is level when it is barring the
 * section, level while it lifts, level while it travels, and level when it
 * leaves. Every value here is a translation.
 */
.hk-js [data-lockable].is-unlocked .hk-lock__bar {
	animation: hk-lock-release 1.5s cubic-bezier(0.72, 0.02, 0.24, 1) 0.78s both;
}

@keyframes hk-lock-release {
	0% { transform: translate3d(0, 0, 0); }
	22% { transform: translate3d(0, -15px, 0); }
	32% { transform: translate3d(0, -13px, 0); }
	100% { transform: translate3d(calc(var(--hk-dir, 1) * 108%), -13px, 0); }
}

/* STATE 4 — the veil lifts */
.hk-js [data-lockable].is-unlocked .hk-lock__scrim {
	opacity: 0;
	transition-delay: 1.05s;
}

/*
 * Content behind the lock waits for the beam. The delay is contributed by the
 * SECTION as a custom property and inherits down, so it composes with the
 * per-group offset, the per-card stagger and the per-element reveal delay
 * instead of overriding them in a specificity fight.
 */
.hk-js [data-lockable].is-unlocked {
	--hk-lock-delay: 1.45s;
}

/*
 * The three groups arrive in their approved order — Awards, then Showcases,
 * then Traction — rather than all at once. One inherited offset per group.
 */
.hk-achgroup--awards { --hk-group-delay: 0s; }
.hk-achgroup--showcases { --hk-group-delay: 0.34s; }
.hk-achgroup--traction { --hk-group-delay: 0.68s; }

/* -------------------------------------------------------------------------
   4c. LIGHT REVEAL — the same language, one weight down

   Games, Impact, Team and Download do not get the beam. They get the gold
   seam alone: a hairline that draws across the section edge on arrival.
   Same vocabulary, no repetition.
   ---------------------------------------------------------------------- */

/* Drawn at full width by default; only JS collapses it ready to draw. */
[data-seam]::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
	transform-origin: center;
	opacity: 0.55;
	z-index: 4;
	pointer-events: none;
}

.hk-js [data-seam]:not(.is-drawn)::after {
	transform: scaleX(0);
	opacity: 0;
}

.hk-js [data-seam].is-drawn::after {
	animation: hk-seam-draw 1.1s var(--hk-ease-out) forwards;
}

@keyframes hk-seam-draw {
	0% { transform: scaleX(0); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: scaleX(1); opacity: 0.55; }
}

/* =========================================================================
   4d. ONE ARRIVAL PER SECTION

   The beam belongs to Achievements alone. Every other section now has its
   own way of appearing, in the same visual language but with a different
   gesture, so scrolling the page is a sequence of different moments rather
   than the same fade eight times.

   Each is driven by a single class, .is-active, added by initScenes() when
   the section arrives. Nothing here hides content from a reader: the
   surfaces are decoration layered OVER text that is always present.
   ========================================================================= */

/* ---- VISION: uncovering a woven piece --------------------------------- */

.hk-sadureveal {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}

.hk-js [data-sadu-reveal]:not(.is-active) .hk-sadureveal {
	opacity: 1;
	visibility: visible;
}

/*
 * A woven Sadu surface, drawn as stacked gradients: the chevron bands of the
 * weave over a dark ground. Two halves, so it parts down the middle.
 */
.hk-sadureveal__half {
	position: absolute;
	inset-block: 0;
	width: 50.4%;
	background:
		repeating-linear-gradient(135deg, rgba(242, 206, 135, 0.13) 0 2px, transparent 2px 13px),
		repeating-linear-gradient(45deg, rgba(232, 83, 43, 0.11) 0 2px, transparent 2px 13px),
		repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 8px, transparent 8px 30px),
		linear-gradient(180deg, #241408 0%, #1B0D05 100%);
	transition: transform 1.15s cubic-bezier(0.62, 0.02, 0.22, 1);
}

.hk-sadureveal__half--start { inset-inline-start: 0; }
.hk-sadureveal__half--end { inset-inline-end: 0; }

/* The gold line that runs down the join and then draws outward. */
.hk-sadureveal__line {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	translate: -50% 0;
	width: 2px;
	background: linear-gradient(180deg, transparent, var(--hk-gold), transparent);
	opacity: 0.8;
	transition: opacity 0.5s linear 0.5s;
}

.hk-js [data-sadu-reveal].is-active .hk-sadureveal {
	transition: opacity 0.4s linear 1.15s, visibility 0s linear 1.55s;
	opacity: 0;
	visibility: hidden;
}

.hk-js [data-sadu-reveal].is-active .hk-sadureveal__half--start {
	transform: translateX(calc(var(--hk-dir, 1) * -101%));
}

.hk-js [data-sadu-reveal].is-active .hk-sadureveal__half--end {
	transform: translateX(calc(var(--hk-dir, 1) * 101%));
}

.hk-js [data-sadu-reveal].is-active .hk-sadureveal__line { opacity: 0; }

/* The quote rises last, once the weave has opened. */
.hk-js [data-sadu-reveal] .hk-quote { --hk-reveal-delay: 0.62s; }
.hk-js [data-sadu-reveal] .hk-vision__body { --hk-reveal-delay: 0.78s; }
.hk-js [data-sadu-reveal] .hk-journey { --hk-reveal-delay: 0.9s; }

/* ---- HENKAA: the device rises out of depth ---------------------------- */

/*
 * The showcase starts sunk into the page and lifts into place. The carousel
 * does not begin turning until it has landed - initShowcase() only autoplays
 * once the device is properly on screen, which is a second or so later.
 */
.hk-js [data-device-rise] .hk-showcase {
	opacity: 0;
	transform: translateY(46px) scale(0.94);
}

.hk-js [data-device-rise].is-active .hk-showcase {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s var(--hk-ease-out) 0.15s,
		transform 1.15s cubic-bezier(0.22, 0.68, 0.24, 1) 0.15s;
}

/* The flow steps then arrive one at a time. */
.hk-js [data-device-rise] .hk-flow__item {
	opacity: 0;
	transform: translateY(14px);
}

.hk-js [data-device-rise].is-active .hk-flow__item {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.55s var(--hk-ease-out) calc(0.85s + var(--hk-step, 0) * 0.13s),
		transform 0.55s var(--hk-ease-out) calc(0.85s + var(--hk-step, 0) * 0.13s);
}

.hk-flow__item:nth-child(1) { --hk-step: 0; }
.hk-flow__item:nth-child(2) { --hk-step: 1; }
.hk-flow__item:nth-child(3) { --hk-step: 2; }
.hk-flow__item:nth-child(4) { --hk-step: 3; }

/* ---- IMPACT: the rule draws, then the number runs --------------------- */

.hk-js [data-impact-scene] .hk-stat__rule {
	transform: scaleX(0);
	transform-origin: var(--hk-origin, left) center;
}

[dir="rtl"] .hk-stat__rule { --hk-origin: right; }

.hk-js [data-impact-scene].is-active .hk-stat__rule {
	transform: scaleX(1);
	transition: transform 0.8s var(--hk-ease-out) calc(0.1s + var(--hk-stagger, 0) * 0.12s);
}

/* The warm glow settles behind the metric after the number has landed. */
.hk-stat__halo {
	position: absolute;
	inset-block-end: -40%;
	inset-inline-start: 50%;
	translate: -50% 0;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 83, 43, 0.26), transparent 68%);
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}

.hk-js [data-impact-scene].is-active .hk-stat__halo {
	opacity: 1;
	transition: opacity 1.1s linear calc(0.75s + var(--hk-stagger, 0) * 0.12s);
}

/* ---- TEAM: the frame is drawn before the face ------------------------- */

/*
 * The four corner rules grow from nothing into a frame, then the portrait
 * fades up inside it, then the name, then the role. A made object rather
 * than a row of avatars.
 */
.hk-js [data-team-scene] .hk-member__corner {
	width: 0;
	height: 0;
	opacity: 0;
}

.hk-js [data-team-scene].is-active .hk-member__corner {
	width: 20px;
	height: 20px;
	opacity: 0.75;
	transition:
		width 0.5s var(--hk-ease-out) calc(0.1s + var(--hk-stagger, 0) * 0.11s),
		height 0.5s var(--hk-ease-out) calc(0.1s + var(--hk-stagger, 0) * 0.11s),
		opacity 0.4s linear calc(0.1s + var(--hk-stagger, 0) * 0.11s);
}

.hk-js [data-team-scene] .hk-member__avatar,
.hk-js [data-team-scene] .hk-member__name,
.hk-js [data-team-scene] .hk-member__role {
	opacity: 0;
}

.hk-js [data-team-scene].is-active .hk-member__avatar {
	opacity: 1;
	transition: opacity 0.6s linear calc(0.5s + var(--hk-stagger, 0) * 0.11s);
}

.hk-js [data-team-scene].is-active .hk-member__name {
	opacity: 1;
	transition: opacity 0.5s linear calc(0.68s + var(--hk-stagger, 0) * 0.11s);
}

.hk-js [data-team-scene].is-active .hk-member__role {
	opacity: 1;
	transition: opacity 0.5s linear calc(0.8s + var(--hk-stagger, 0) * 0.11s);
}

/* ---- CONTACT: the frame draws itself ---------------------------------- */

.hk-formframe {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	border-radius: inherit;
}

.hk-formframe__edge {
	position: absolute;
	background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
	opacity: 0.85;
}

.hk-formframe__edge--top,
.hk-formframe__edge--bottom {
	inset-inline: 0;
	height: 1.5px;
	transform: scaleX(0);
}

.hk-formframe__edge--start,
.hk-formframe__edge--end {
	inset-block: 0;
	width: 1.5px;
	background: linear-gradient(180deg, transparent, var(--hk-gold), transparent);
	transform: scaleY(0);
}

.hk-formframe__edge--top { inset-block-start: 0; transform-origin: left center; }
.hk-formframe__edge--bottom { inset-block-end: 0; transform-origin: right center; }
.hk-formframe__edge--start { inset-inline-start: 0; transform-origin: center bottom; }
.hk-formframe__edge--end { inset-inline-end: 0; transform-origin: center top; }

.hk-js [data-contact-scene].is-active .hk-formframe__edge--top,
.hk-js [data-contact-scene].is-active .hk-formframe__edge--bottom {
	transform: scaleX(1);
	transition: transform 0.7s var(--hk-ease-out) 0.35s;
}

.hk-js [data-contact-scene].is-active .hk-formframe__edge--start,
.hk-js [data-contact-scene].is-active .hk-formframe__edge--end {
	transform: scaleY(1);
	transition: transform 0.7s var(--hk-ease-out) 0.62s;
}

/*
 * The warm line under a focused field. A separate element, so focusing runs
 * one compositor-only transform instead of repainting the input's border.
 */
.hk-field { position: relative; }

.hk-field__line {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--hk-grad-warm);
	transform: scaleX(0);
	transform-origin: var(--hk-origin, left) center;
	transition: transform 0.45s var(--hk-ease-out);
	pointer-events: none;
}

[dir="rtl"] .hk-field__line { --hk-origin: right; }

.hk-field:focus-within .hk-field__line { transform: scaleX(1); }

/* ---- DOWNLOAD: the closing movement ----------------------------------- */

/*
 * The store buttons are the last thing on the page to arrive, and they wait
 * for the glow and the board behind them to settle first.
 */
.hk-js [data-final-scene] .hk-download__actions { --hk-reveal-delay: 0.62s; }

/* -------------------------------------------------------------------------
   5. Display typography
   ---------------------------------------------------------------------- */

.hk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--hk-gold);
	text-transform: uppercase;
}

[lang="ar"].hk-eyebrow,
.hk-eyebrow [lang="ar"] {
	letter-spacing: normal;
	text-transform: none;
	font-size: 0.94rem;
}

/* Kicker rule before the eyebrow - a small piece of structure. */
.hk-eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	flex: none;
	background: var(--hk-grad-gold);
}

.hk-heading {
	max-width: 780px;
	margin-block-end: clamp(44px, 6vw, 78px);
}

.hk-heading--center {
	margin-inline: auto;
	text-align: center;
}

.hk-heading--center .hk-eyebrow::before {
	display: none;
}

/*
 * The display treatment: large, tightly led, cream, with a wide gap before
 * the body copy. Size and leading do the work that a second font family
 * would otherwise do.
 */
.hk-heading__title {
	margin: 0 0 22px;
	font-size: clamp(2.15rem, 5.4vw, 3.7rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: #FFF6E4;
}

.hk-heading__title [lang="ar"] {
	letter-spacing: normal;
	line-height: 1.4;
}

.hk-heading__lead {
	margin: 0;
	font-size: clamp(1.02rem, 1.6vw, 1.14rem);
	color: var(--hk-muted);
	max-width: 62ch;
}

.hk-heading--center .hk-heading__lead {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   6. Buttons, chips, icons
   ---------------------------------------------------------------------- */

.hk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	isolation: isolate;
	white-space: nowrap;
	transition: transform 0.34s var(--hk-ease-out), box-shadow 0.34s var(--hk-ease-out), background-color 0.3s var(--hk-ease), color 0.3s var(--hk-ease);
}

.hk-btn .hk-icon {
	width: 19px;
	height: 19px;
	flex: none;
}

.hk-btn--primary {
	background: var(--hk-grad-warm);
	color: #fff;
	box-shadow: 0 16px 34px -18px rgba(232, 83, 43, 0.95);
}

.hk-btn--primary::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	background: var(--hk-grad-warm);
	filter: blur(15px);
	opacity: 0.4;
	z-index: -2;
	transition: opacity 0.4s var(--hk-ease);
}

.hk-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 55%);
	z-index: -1;
}

.hk-btn--primary:hover {
	color: #fff;
	transform: translateY(-2px);
}

.hk-btn--primary:hover::before { opacity: 0.85; }
.hk-btn--primary:active { transform: translateY(0) scale(0.985); }

.hk-btn--quiet {
	background: rgba(242, 206, 135, 0.06);
	color: var(--hk-gold);
	border: 1px solid var(--hk-gold-dim);
	font-weight: 600;
	padding: 11px 22px;
	font-size: 0.9rem;
}

.hk-btn--quiet:hover {
	background: rgba(242, 206, 135, 0.14);
	border-color: var(--hk-gold);
	color: #FFE6AE;
	transform: translateY(-2px);
}

.hk-btn--ghost {
	background: transparent;
	color: var(--hk-cream);
	border: 1px solid var(--hk-line-strong);
}

.hk-btn--ghost:hover {
	background: rgba(242, 206, 135, 0.1);
	color: var(--hk-gold);
	transform: translateY(-2px);
}

.hk-btn--lg { padding: 17px 34px; font-size: 1.04rem; }

.hk-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(242, 206, 135, 0.1);
	color: var(--hk-gold);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1;
	border: 1px solid var(--hk-gold-hair);
}

.hk-chip--live {
	background: var(--hk-grad-warm);
	color: #fff;
	border-color: transparent;
}

.hk-chip--live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	animation: hk-pulse 2.4s infinite;
}

.hk-chip--ghost {
	background: transparent;
	border-color: var(--hk-gold-dim);
}

@keyframes hk-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); }
	70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.hk-icon { width: 24px; height: 24px; display: block; }

/* Store buttons ---------------------------------------------------------- */

.hk-stores {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.hk-store {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-block: 12px;
	padding-inline: 20px 24px;
	border-radius: 16px;
	text-decoration: none;
	min-width: 200px;
	background: rgba(246, 233, 207, 0.05);
	color: var(--hk-cream);
	border: 1px solid var(--hk-gold-dim);
	box-shadow: var(--hk-rim);
	transition: transform 0.34s var(--hk-ease-out), box-shadow 0.34s var(--hk-ease-out), border-color 0.3s var(--hk-ease), background-color 0.3s var(--hk-ease);
}

.hk-store:hover {
	background: rgba(246, 233, 207, 0.11);
	border-color: var(--hk-gold);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: var(--hk-shadow), 0 0 0 1px rgba(242, 206, 135, 0.35);
}

.hk-store__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.hk-store__icon .hk-icon { width: 26px; height: 26px; }

.hk-store__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	text-align: start;
}

.hk-store__text small { font-size: 0.72rem; color: var(--hk-faint); }
.hk-store__text strong { font-size: 1.06rem; font-weight: 700; }

/* Socials ---------------------------------------------------------------- */

.hk-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hk-social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px;
	border-radius: 13px;
	background: rgba(246, 233, 207, 0.05);
	border: 1px solid var(--hk-line);
	color: var(--hk-cream-2);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 700;
	transition: transform 0.3s var(--hk-ease-out), border-color 0.3s var(--hk-ease), background-color 0.3s var(--hk-ease), color 0.3s var(--hk-ease);
}

.hk-social__glyph { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.hk-social__glyph .hk-icon { width: 20px; height: 20px; }
.hk-social__name { display: none; }

.hk-social:hover {
	transform: translateY(-3px);
	border-color: var(--hk-gold);
	background: rgba(246, 233, 207, 0.12);
	color: var(--hk-gold);
}

/* -------------------------------------------------------------------------
   7. Header — glass over dark
   ---------------------------------------------------------------------- */

.hk-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 60;
	transition: transform 0.45s var(--hk-ease-out);
}

.hk-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 10, 4, 0.9), rgba(20, 10, 4, 0.66));
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	opacity: 0;
	transition: opacity 0.4s var(--hk-ease);
	border-block-end: 1px solid transparent;
}

.hk-header.is-stuck::before {
	opacity: 1;
	border-block-end-color: var(--hk-gold-hair);
}

.hk-header.is-hidden { transform: translateY(-105%); }

.hk-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: var(--hk-header-h);
}

.hk-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--hk-cream);
	flex: none;
}

.hk-brand__logo { height: 46px; width: auto; }

.hk-brand__mark {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 12px;
	background: var(--hk-grad-warm);
	display: grid;
	place-items: center;
	box-shadow: 0 10px 22px -12px rgba(232, 83, 43, 0.95);
}

.hk-brand__mark-inner {
	width: 15px;
	height: 15px;
	rotate: 45deg;
	border-radius: 3px;
	background: var(--hk-cream);
}

.hk-brand__name {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--hk-cream);
	line-height: 1.25;
}

.hk-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hk-nav__list a {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.94rem;
	font-weight: 500;
	color: var(--hk-cream-2);
	text-decoration: none;
	position: relative;
	transition: color 0.25s var(--hk-ease);
}

/* Active state: a gold dot above, plus a lit label. */
.hk-nav__list a::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 50%;
	translate: -50% 0;
	width: 5px;
	height: 5px;
	rotate: 45deg;
	border-radius: 1px;
	background: var(--hk-gold);
	opacity: 0;
	transform-origin: center;
	transition: opacity 0.3s var(--hk-ease), translate 0.3s var(--hk-ease-out);
}

.hk-nav__list a:hover { color: var(--hk-gold); }

.hk-nav__list li.is-active > a {
	color: var(--hk-gold);
	background: rgba(242, 206, 135, 0.07);
}

.hk-nav__list li.is-active > a::after,
.hk-nav__list a:hover::after {
	opacity: 1;
}

.hk-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.hk-header__progress {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 2px;
	z-index: 3;
}

.hk-header__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--hk-grad-gold);
}

/* Language switch */
.hk-langswitch {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 3px;
	border-radius: 999px;
	background: rgba(246, 233, 207, 0.06);
	border: 1px solid var(--hk-gold-dim);
	flex: none;
}

.hk-langswitch__btn {
	position: relative;
	z-index: 2;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 7px 14px;
	border-radius: 999px;
	font-family: var(--hk-font);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--hk-cream-3);
	line-height: 1;
	transition: color 0.3s var(--hk-ease);
}

.hk-langswitch__btn[aria-pressed="true"] { color: #2A1408; }

.hk-langswitch__slider {
	position: absolute;
	z-index: 1;
	inset-block: 3px;
	inset-inline-start: 3px;
	width: calc(50% - 3px);
	border-radius: 999px;
	background: var(--hk-grad-gold);
	box-shadow: 0 4px 14px -6px rgba(242, 206, 135, 0.8);
	transition: transform 0.45s var(--hk-ease-out);
}

.hk-langswitch.is-second .hk-langswitch__slider { transform: translateX(100%); }
[dir="rtl"] .hk-langswitch.is-second .hk-langswitch__slider { transform: translateX(-100%); }

/* Burger */
.hk-burger {
	display: none;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	border: 1px solid var(--hk-gold-dim);
	background: rgba(246, 233, 207, 0.05);
	cursor: pointer;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	transition: background-color 0.3s var(--hk-ease), border-color 0.3s var(--hk-ease);
}

.hk-burger:hover { border-color: var(--hk-gold); }

.hk-burger__bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--hk-gold);
	transition: transform 0.4s var(--hk-ease-out), opacity 0.24s linear;
}

.hk-burger[aria-expanded="true"] .hk-burger__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.hk-burger[aria-expanded="true"] .hk-burger__bar:nth-child(3) { opacity: 0; }
.hk-burger[aria-expanded="true"] .hk-burger__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer — a designed panel, not a plain list */
.hk-mobile {
	position: fixed;
	inset: 0;
	z-index: 55;
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(232, 83, 43, 0.16), transparent 62%),
		linear-gradient(180deg, var(--hk-tone-2) 0%, var(--hk-ground) 100%);
	padding-block: calc(var(--hk-header-h) + 26px) 44px;
	padding-inline: var(--hk-gutter);
	overflow-y: auto;
	opacity: 0;
	transition: opacity 0.4s var(--hk-ease);
}

.hk-mobile::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 18px;
	background-image: var(--hk-sadu);
	background-size: 42px 18px;
	background-repeat: repeat-x;
	opacity: 0.9;
}

.hk-mobile.is-open { opacity: 1; }

.hk-mobile__inner {
	max-width: 540px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.hk-mobile__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hk-mobile__list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 6px;
	font-size: 1.42rem;
	font-weight: 700;
	color: var(--hk-cream);
	text-decoration: none;
	border-block-end: 1px solid var(--hk-gold-hair);
	transition: color 0.3s var(--hk-ease), padding-inline-start 0.35s var(--hk-ease-out);
}

/* A small gold diamond marks each row. */
.hk-mobile__list a::before {
	content: "";
	width: 7px;
	height: 7px;
	rotate: 45deg;
	border-radius: 1px;
	background: var(--hk-gold-deep);
	flex: none;
	opacity: 0.55;
	transition: opacity 0.3s var(--hk-ease), scale 0.3s var(--hk-ease-out);
}

.hk-mobile__list a:hover {
	color: var(--hk-gold);
	padding-inline-start: 14px;
}

.hk-mobile__list a:hover::before { opacity: 1; scale: 1.3; }

/* Rows cascade in when the drawer opens. */
.hk-mobile.is-open .hk-mobile__list li {
	animation: hk-menu-in 0.5s var(--hk-ease-out) backwards;
}

.hk-mobile.is-open .hk-mobile__list li:nth-child(1) { animation-delay: 0.06s; }
.hk-mobile.is-open .hk-mobile__list li:nth-child(2) { animation-delay: 0.12s; }
.hk-mobile.is-open .hk-mobile__list li:nth-child(3) { animation-delay: 0.18s; }
.hk-mobile.is-open .hk-mobile__list li:nth-child(4) { animation-delay: 0.24s; }
.hk-mobile.is-open .hk-mobile__list li:nth-child(5) { animation-delay: 0.3s; }
.hk-mobile.is-open .hk-mobile__list li:nth-child(6) { animation-delay: 0.36s; }

@keyframes hk-menu-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   8. Hero — cinematic
   ---------------------------------------------------------------------- */

.hk-hero {
	position: relative;
	min-height: min(100svh, 940px);
	display: flex;
	align-items: center;
	padding-block: calc(var(--hk-header-h) + 64px) 132px;
	overflow: hidden;
	background: var(--hk-ground);
	isolation: isolate;
}

.hk-hero__bg { position: absolute; inset: 0; overflow: hidden; }

.hk-hero__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.72;
	animation: hk-hero-drift 30s ease-in-out infinite alternate;
}

@keyframes hk-hero-drift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); }
}

/* Layer 1: overall cinematic darkening. */
.hk-hero__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 10, 4, 0.62) 0%, rgba(27, 13, 5, 0.7) 46%, rgba(20, 10, 4, 0.94) 100%);
}

/* Layer 2: a strong directional scrim behind the copy column only. */
.hk-hero__wash::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(18, 9, 3, 0.95) 0%,
		rgba(20, 10, 4, 0.86) 32%,
		rgba(24, 12, 5, 0.5) 56%,
		rgba(24, 12, 5, 0) 78%
	);
}

[dir="rtl"] .hk-hero__wash::after {
	background: linear-gradient(
		to left,
		rgba(18, 9, 3, 0.95) 0%,
		rgba(20, 10, 4, 0.86) 32%,
		rgba(24, 12, 5, 0.5) 56%,
		rgba(24, 12, 5, 0) 78%
	);
}

/* Ambient warm glow, very slow. */
.hk-hero__glow {
	position: absolute;
	width: 60vw;
	height: 60vw;
	max-width: 780px;
	max-height: 780px;
	inset-block-start: -14%;
	inset-inline-end: -10%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 83, 43, 0.36), transparent 68%);
	filter: blur(90px);
	animation: hk-ambient 20s ease-in-out infinite alternate;
}

@keyframes hk-ambient {
	from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
	to { transform: translate3d(-4%, 5%, 0) scale(1.14); opacity: 1; }
}

.hk-hero__inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	align-items: center;
	gap: clamp(30px, 6vw, 76px);
}

.hk-hero__content { position: relative; z-index: 3; }

.hk-hero__eyebrow {
	color: var(--hk-gold);
	font-weight: 700;
}

.hk-hero__title {
	margin: 0 0 24px;
	font-size: clamp(2.2rem, 5.8vw, 4.3rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #FFF8EA;
	text-shadow: 0 3px 26px rgba(12, 6, 2, 0.7);
}

.hk-hero__title [lang="ar"] {
	letter-spacing: normal;
	line-height: 1.42;
}

.hk-hero__text {
	max-width: 54ch;
	font-size: clamp(1.04rem, 1.6vw, 1.2rem);
	color: #EFE0C4;
	font-weight: 400;
	line-height: 1.9;
	text-shadow: 0 1px 14px rgba(12, 6, 2, 0.6);
	margin-block-end: 34px;
}

/*
 * HERO KEYWORDS
 * -------------
 * Each keyword is an inline pill that never breaks internally, and the gold
 * diamond lives INSIDE the pill, so a separator can never collide with a
 * word or be orphaned on its own line. The row wraps cleanly at any width.
 */
.hk-hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.hk-hero__badges li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(246, 233, 207, 0.06);
	border: 1px solid var(--hk-gold-dim);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--hk-gold);
	white-space: nowrap;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: border-color 0.3s var(--hk-ease), background-color 0.3s var(--hk-ease), transform 0.3s var(--hk-ease-out);
}

.hk-hero__badges li:hover {
	border-color: var(--hk-gold);
	background: rgba(246, 233, 207, 0.12);
	transform: translateY(-2px);
}

.hk-hero__badge-dot {
	width: 8px;
	height: 8px;
	rotate: 45deg;
	background: var(--hk-grad-gold);
	border-radius: 1px;
	flex: none;
	box-shadow: 0 0 12px rgba(242, 206, 135, 0.6);
}

.hk-js .hk-hero__badges.is-in li {
	animation: hk-key-in 0.75s var(--hk-ease-out) backwards;
}

.hk-js .hk-hero__badges.is-in li:nth-child(1) { animation-delay: 0.5s; }
.hk-js .hk-hero__badges.is-in li:nth-child(2) { animation-delay: 0.65s; }
.hk-js .hk-hero__badges.is-in li:nth-child(3) { animation-delay: 0.8s; }

@keyframes hk-key-in {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to { opacity: 1; transform: none; }
}

/* Hero visual */
.hk-hero__visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 340px;
}

.hk-hero__stage {
	position: relative;
	width: min(460px, 84vw);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

.hk-hero__board {
	position: absolute;
	inset: 4%;
	width: 92%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.7));
	transform: rotate(-6deg);
	animation: hk-board-sway 18s ease-in-out infinite;
}

@keyframes hk-board-sway {
	0%, 100% { transform: rotate(-6deg) translateY(0); }
	50% { transform: rotate(-3deg) translateY(-14px); }
}

.hk-hero__logo {
	position: relative;
	z-index: 2;
	width: 72%;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.6));
	animation: hk-bob 8s ease-in-out infinite;
}

.hk-hero__logo-fallback {
	position: relative;
	z-index: 2;
	font-size: clamp(3rem, 9vw, 5.6rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--hk-orange);
	text-shadow: 0 10px 40px rgba(232, 83, 43, 0.5);
}

@keyframes hk-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-13px); }
}

/* Floating pieces */
.hk-hero__pieces,
.hk-download__pieces {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hk-piece {
	position: absolute;
	width: 46px;
	height: auto;
	opacity: 0.9;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.6));
}

.hk-piece--1 { inset-block-start: 15%; inset-inline-start: 5%; animation: hk-drift 14s ease-in-out infinite; }
.hk-piece--2 { inset-block-start: 66%; inset-inline-start: 11%; width: 34px; animation: hk-drift 17s ease-in-out infinite reverse; }
.hk-piece--3 { inset-block-start: 22%; inset-inline-end: 7%; width: 38px; animation: hk-drift 19s ease-in-out infinite; }
.hk-piece--4 { inset-block-end: 16%; inset-inline-end: 14%; width: 28px; opacity: 0.62; animation: hk-drift 15s ease-in-out infinite reverse; }
.hk-piece--dl-a { inset-block-start: 20%; inset-inline-start: 8%; width: 40px; animation: hk-drift 16s ease-in-out infinite; }
.hk-piece--dl-b { inset-block-end: 22%; inset-inline-end: 10%; width: 34px; animation: hk-drift 18s ease-in-out infinite reverse; }

@keyframes hk-drift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(12px, -22px, 0) rotate(18deg); }
}

/* Scroll cue — sits in its own reserved band so it can never touch the
   keywords above it. */
.hk-scrollcue {
	position: absolute;
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	inset-block-end: 26px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--hk-gold);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.hk-scrollcue [lang="ar"] { letter-spacing: normal; }

.hk-scrollcue__line {
	width: 1px;
	height: 46px;
	background: linear-gradient(180deg, var(--hk-gold), transparent);
	position: relative;
	overflow: hidden;
}

/* Travels on transform, not on inset - inset would relayout every frame. */
.hk-scrollcue__line::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 50%;
	background: var(--hk-orange);
	animation: hk-cue 2.4s ease-in-out infinite;
}

@keyframes hk-cue {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(200%); }
}

/* -------------------------------------------------------------------------
   9. Cards — shared dark surface
   ---------------------------------------------------------------------- */

/*
 * The FEATURE cards are deliberately NOT in this list. They are two-sided
 * objects that turn over, so they need their own 3D context and no transform
 * of their own competing with the rotation. See section 11b.
 *
 * The game cards ARE in it: they went back to a single surface, because a
 * game card carries artwork, a status, a name, a description and a link, and
 * the visitor wants all of that at once.
 */
.hk-card,
.hk-journey__step,
.hk-gamecard,
.hk-member,
.hk-ach-card,
.hk-stat {
	position: relative;
	isolation: isolate;
	background: var(--hk-grad-card);
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius-l);
	box-shadow: var(--hk-shadow), var(--hk-rim);
	overflow: hidden;
	transition: transform 0.45s var(--hk-ease-out), box-shadow 0.45s var(--hk-ease-out), border-color 0.4s var(--hk-ease);
}

.hk-journey__step:hover,
.hk-gamecard:hover,
.hk-member:hover,
.hk-ach-card:hover,
.hk-stat:hover {
	transform: translateY(-7px);
	border-color: var(--hk-gold-dim);
	box-shadow: var(--hk-shadow-l), var(--hk-rim);
}

/* Light sweep on hover, gold on the dark surfaces. */
.hk-journey__step::before,
.hk-gamecard::before,
.hk-member::after,
.hk-ach-card::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -60%;
	width: 45%;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(242, 206, 135, 0.16), transparent);
	opacity: 0;
	transition: opacity 0.3s linear;
}

[dir="rtl"] .hk-journey__step::before,
[dir="rtl"] .hk-gamecard::before,
[dir="rtl"] .hk-member::after,
[dir="rtl"] .hk-ach-card::before {
	background: linear-gradient(80deg, transparent, rgba(242, 206, 135, 0.16), transparent);
}

@media (hover: hover) and (pointer: fine) {

	.hk-journey__step:hover::before,
	.hk-gamecard:hover::before,
	.hk-member:hover::after,
	.hk-ach-card:hover::before {
		opacity: 1;
		animation: hk-sweep 1s var(--hk-ease-out);
	}
}

@keyframes hk-sweep {
	from { transform: translateX(0); }
	to { transform: translateX(360%); }
}

/*
 * RTL needs its own keyframes. The sweep starts at inset-inline-start, which
 * resolves to the RIGHT edge in Arabic, so translating positively would push
 * it further off-card. Mirroring the angle alone was not enough.
 */
@keyframes hk-sweep-rtl {
	from { transform: translateX(0); }
	to { transform: translateX(-360%); }
}

@media (hover: hover) and (pointer: fine) {

	[dir="rtl"] .hk-journey__step:hover::before,
	[dir="rtl"] .hk-gamecard:hover::before,
	[dir="rtl"] .hk-member:hover::after,
	[dir="rtl"] .hk-ach-card:hover::before {
		animation-name: hk-sweep-rtl;
	}
}

/* -------------------------------------------------------------------------
   10. Vision
   ---------------------------------------------------------------------- */

.hk-vision__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(30px, 5vw, 64px);
	align-items: start;
	margin-block-end: clamp(56px, 8vw, 100px);
}

.hk-quote {
	position: relative;
	margin: 0;
	padding: 44px 38px 40px;
	border-radius: var(--hk-radius-l);
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(232, 83, 43, 0.2), transparent 62%),
		var(--hk-grad-card);
	border: 1px solid var(--hk-gold-dim);
	box-shadow: var(--hk-shadow-l), var(--hk-rim);
	overflow: hidden;
}

.hk-quote::after {
	content: "";
	position: absolute;
	inset: 11px;
	border: 1px solid var(--hk-gold-hair);
	border-radius: calc(var(--hk-radius-l) - 9px);
	pointer-events: none;
}

.hk-quote__mark {
	position: relative;
	display: block;
	font-size: 3.6rem;
	line-height: 0.55;
	color: var(--hk-gold);
	opacity: 0.75;
	margin-block-end: 18px;
}

.hk-quote__text {
	position: relative;
	margin: 0;
	font-size: clamp(1.36rem, 3vw, 1.95rem);
	font-weight: 700;
	line-height: 1.62;
	color: #FFF6E4;
}

.hk-quote__piece {
	position: absolute;
	inset-block-end: -16px;
	inset-inline-end: -12px;
	width: 98px;
	opacity: 0.16;
	pointer-events: none;
}

.hk-vision__body p {
	font-size: 1.06rem;
	color: var(--hk-muted);
}

.hk-vision__lead {
	font-size: 1.18rem !important;
	color: var(--hk-cream) !important;
}

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

.hk-journey__step { padding: 38px 32px; }

/* Top accent grows on hover. */
.hk-journey__step::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--hk-grad-warm);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.55s var(--hk-ease-out);
	z-index: 2;
}

.hk-journey__step:hover::after { transform: scaleX(1); }

.hk-journey__num {
	position: absolute;
	inset-block-start: 22px;
	inset-inline-end: 26px;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: rgba(242, 206, 135, 0.09);
}

.hk-journey__glyph {
	display: block;
	width: 48px;
	height: 48px;
	margin-block-end: 22px;
	border-radius: 14px;
	background: var(--hk-grad-gold);
	position: relative;
	box-shadow: 0 14px 30px -14px rgba(216, 169, 79, 0.9);
}

.hk-journey__glyph::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	background: var(--hk-tone-1);
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.hk-journey__glyph--2::after { clip-path: circle(50%); }
.hk-journey__glyph--3::after { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.hk-journey__title {
	margin: 0 0 12px;
	font-size: 1.34rem;
	color: var(--hk-gold);
}

.hk-journey__text { margin: 0; font-size: 0.99rem; color: var(--hk-muted); }

/* -------------------------------------------------------------------------
   11. Henkaa game section
   ---------------------------------------------------------------------- */

.hk-game::after {
	content: "";
	position: absolute;
	inset-block-start: -22%;
	inset-inline: -12%;
	height: 62%;
	background: radial-gradient(ellipse at 50% 0%, rgba(232, 83, 43, 0.26), transparent 68%);
	pointer-events: none;
	z-index: 0;
}

.hk-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 8px;
	list-style: none;
	margin: 0 0 clamp(48px, 7vw, 76px);
	padding: 0;
}

.hk-flow__item { display: inline-flex; align-items: center; gap: 8px; }

.hk-flow__label {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	background: rgba(246, 233, 207, 0.05);
	border: 1px solid var(--hk-gold-dim);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--hk-cream);
	white-space: nowrap;
	transition: transform 0.35s var(--hk-ease-out), border-color 0.35s var(--hk-ease), background-color 0.3s var(--hk-ease);
}

.hk-flow__item:hover .hk-flow__label {
	transform: translateY(-3px);
	border-color: var(--hk-gold);
	background: rgba(246, 233, 207, 0.1);
}

.hk-flow__arrow { display: grid; place-items: center; color: var(--hk-gold); opacity: 0.65; }
.hk-flow__arrow .hk-icon { width: 22px; height: 22px; }
[dir="rtl"] .hk-flow__arrow .hk-icon { transform: scaleX(-1); }

.hk-flow__item:last-child .hk-flow__label {
	background: var(--hk-grad-warm);
	border-color: transparent;
	color: #fff;
}

.hk-game__showcase {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(0px, 2vw, 34px);
	margin-block-end: clamp(56px, 8vw, 96px);
}

.hk-game__char {
	width: clamp(110px, 15vw, 200px);
	height: auto;
	flex: none;
	filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.6));
	animation: hk-bob 9s ease-in-out infinite;
}

.hk-game__char--b { animation-delay: -4.5s; }

/* =========================================================================
   DEVICE SHOWCASE — a real rotating preview of the app

   One device, three screenshots, cross-fading and sliding on a timer, with
   dots and drag/swipe. Not a decorative frame with a static picture in it.
   ========================================================================= */

.hk-game__devices {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.hk-showcase {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

/* The iPad variant only exists when iPad screenshots were uploaded, and it
   only takes over across the tablet range. */
.hk-showcase--ipad { display: none; }

.hk-device { flex: none; }
.hk-device--phone { width: min(272px, 62vw); }
.hk-device--ipad { width: min(520px, 78vw); }

/*
 * The BODY is the chrome and the SCREEN carries the aspect ratio - not the
 * other way round. That is what keeps the earpiece slot inside the top bezel
 * instead of floating over the picture: a notch drawn on top of the screen
 * would hide roughly 30px of real interface on any capture that fills the
 * frame, which is the same sin as cropping it.
 */
.hk-device__body {
	position: relative;
	border-radius: 40px;
	padding: 26px 9px 12px;
	background: linear-gradient(160deg, #4A3520, #1A0D05 60%, #0C0602);
	box-shadow: var(--hk-shadow-l), inset 0 0 0 1.5px rgba(242, 206, 135, 0.34);
	overflow: hidden;
}

.hk-device--ipad .hk-device__body { border-radius: 30px; padding: 14px; }

.hk-device__notch {
	position: absolute;
	inset-block-start: 9px;
	inset-inline: 0;
	margin-inline: auto;
	width: 26%;
	height: 7px;
	border-radius: 999px;
	background: #080401;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.9);
}

.hk-device--ipad .hk-device__notch { display: none; }

/* The screen itself is the carousel viewport. */
.hk-device__screen {
	position: relative;
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
	background: linear-gradient(180deg, #1A0D05, #0E0602);
	touch-action: pan-y;
	cursor: grab;
}

.hk-device--phone .hk-device__screen { aspect-ratio: 9 / 19.5; }
.hk-device--ipad .hk-device__screen { aspect-ratio: 4 / 3; border-radius: 18px; }
.hk-device__screen.is-dragging { cursor: grabbing; }

/* A single screenshot does not rotate, so it must not invite a drag. */
.hk-showcase.is-static .hk-device__screen { cursor: default; }

/* No screenshots yet: the board art sits on a warmer ground. */
.hk-device__screen.is-fallback {
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(232, 83, 43, 0.3), transparent 62%),
		linear-gradient(180deg, #3B2716 0%, #140903 100%);
	cursor: default;
}

.hk-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translateX(calc(var(--hk-dir, 1) * 7%));
	transition: opacity 0.72s var(--hk-ease-out), transform 0.72s var(--hk-ease-out);
	pointer-events: none;
}

.hk-slide.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/*
 * Set for one forced reflow while the script reseats the waiting slides at a
 * new travel direction. Never present across a frame the visitor can see.
 */
.hk-device__screen.is-instant .hk-slide { transition: none; }

/* Outgoing slide leaves the other way, so the movement reads directionally. */
.hk-slide.is-leaving {
	opacity: 0;
	transform: translateX(calc(var(--hk-dir, 1) * -7%));
}

/*
 * THE WHOLE SCREENSHOT, ALWAYS.
 * contain, never cover: a capture from any device height is shown complete.
 * Cropping real UI would be worse than letterboxing it on the dark screen.
 */
.hk-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	user-select: none;
	-webkit-user-select: none;
}

.hk-device__screen.is-fallback .hk-slide img {
	width: 84%;
	height: auto;
	opacity: 0.95;
}

/* Dots */
.hk-showcase__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.hk-showcase__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 10px diamond + 18px gap = 28px pitch, which clears the 24px hit target
	   even while a hovered dot is scaled up. */
	gap: 18px;
}

/*
 * Sadu diamonds, not generic circles - the same rotated square the section
 * dividers use, so the control belongs to the site rather than to a plugin.
 */
.hk-showcase__dot {
	appearance: none;
	border: 1px solid var(--hk-gold-dim);
	background: transparent;
	width: 10px;
	height: 10px;
	padding: 0;
	rotate: 45deg;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.35s var(--hk-ease), border-color 0.35s var(--hk-ease), scale 0.35s var(--hk-ease-out);
}

.hk-showcase__dot:hover { border-color: var(--hk-gold); scale: 1.16; }

.hk-showcase__dot.is-active {
	background: var(--hk-grad-gold);
	border-color: transparent;
	scale: 1.16;
}

/*
 * Every dot carries a 24px invisible hit target, which is wider than the
 * 10px diamond but narrower than the 26px gap between centres - so the
 * targets never overlap and a tap can never select the wrong screenshot.
 */
.hk-showcase__dot { position: relative; }

.hk-showcase__dot::after {
	content: "";
	position: absolute;
	inset: -7px;
	rotate: -45deg;
}

/*
 * NO PAUSE / PLAY CONTROL.
 *
 * The carousel loops continuously with nothing on screen to stop it. The
 * button that used to sit here is gone from the markup, the JavaScript and
 * this stylesheet - not merely hidden, so there is no invisible control left
 * for a screen reader or a keyboard to find.
 *
 * The rotation still yields: it pauses on hover, on keyboard focus, during a
 * drag, while the device is off screen and while the tab is in the
 * background, and prefers-reduced-motion stops the autoplay outright.
 */

/* Without JavaScript nothing rotates, so the dots are not shown. */
.hk-showcase__controls { display: none; }
.hk-js .hk-showcase__controls { display: flex; }

/* A single screenshot never rotates, so its controls are removed outright. */
.hk-showcase.is-static .hk-showcase__controls { display: none; }

/* =========================================================================
   11b. THE SIX FEATURE CARDS — two-sided objects that turn over

   These are the only cards on the site that are not flat. Each is a physical
   object: a glyph and a title on the front, carved wood and the description
   on the back, turning on its vertical axis when it becomes the focus.

   THE NO-JAVASCRIPT / REDUCED-MOTION BASELINE IS FIRST AND UNCONDITIONAL.
   Everything in this block describes a plain stacked card: glyph, title,
   description, all visible, all in order. The 3D is added only under
   .hk-flip, a class initFlipCards() sets on <html> as its last act, once
   every listener that can turn a card back exists. A script failure, a
   browser without 3D transforms, or prefers-reduced-motion all land on a
   card that simply works - never one with its copy facing away.
   ========================================================================= */

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

.hk-feature {
	position: relative;
	isolation: isolate;
	border-radius: var(--hk-radius-l);
	transition: transform 0.5s var(--hk-ease-out), filter 0.5s var(--hk-ease-out);
}

/* The flat baseline: one surface, both faces stacked inside it. */
.hk-feature__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 34px 30px;
	background: var(--hk-grad-card);
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius-l);
	box-shadow: var(--hk-shadow), var(--hk-rim);
	overflow: hidden;
}

.hk-feature__face { display: block; }

/* The title is on the front in the flat layout; the back would repeat it. */
.hk-feature__title--back { display: none; }

/* The grain is the BACK's surface; flat, it would lie over the front. */
.hk-feature__grain { display: none; }

/* The control only means something once the card can actually turn. */
.hk-feature__toggle { display: none; }

.hk-feature__glyph {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	margin-block-end: 20px;
	border-radius: 12px;
	background: var(--hk-grad-warm);
	box-shadow: 0 14px 26px -14px rgba(232, 83, 43, 0.95);
}

.hk-feature__glyph::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 15px;
	height: 15px;
	background: var(--hk-cream);
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.hk-feature__glyph--2::after { clip-path: circle(50%); }
.hk-feature__glyph--3::after { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.hk-feature__glyph--4::after { clip-path: polygon(0 12%, 22% 12%, 52% 50%, 22% 88%, 0 88%, 30% 50%, 48% 12%, 70% 12%, 100% 50%, 70% 88%, 48% 88%, 78% 50%); }
.hk-feature__glyph--5::after { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.hk-feature__glyph--6::after { clip-path: polygon(0 62%, 26% 62%, 26% 100%, 0 100%, 0 62%, 37% 34%, 63% 34%, 63% 100%, 37% 100%, 37% 34%, 74% 6%, 100% 6%, 100% 100%, 74% 100%); }

.hk-feature__title { margin: 0 0 10px; font-size: 1.18rem; color: var(--hk-gold); }
.hk-feature__text { margin: 0; font-size: 0.98rem; color: var(--hk-muted); }

/* -------------------------------------------------------------------------
   12. Traditional games — ONE surface per card

   These cards do not turn over. The flip moved to the six feature cards,
   where a short title on the front and a description on the back is a
   natural division. A game card carries artwork, a status, a name, a
   description and a link, and the visitor wants all of it at once.

   What remains is the tasteful part: a hover lift, a small artwork scale,
   the gold border response and the status chip's entrance.
   ---------------------------------------------------------------------- */

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

.hk-gamecard { display: flex; flex-direction: column; }

.hk-gamecard__media {
	position: relative;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	background:
		radial-gradient(90% 90% at 50% 20%, rgba(232, 83, 43, 0.2), transparent 70%),
		linear-gradient(165deg, #46301A, #231308);
	overflow: hidden;
	border-block-end: 1px solid var(--hk-line);
}

/* Artwork is contained, never cropped into. */
.hk-gamecard__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 18px;
	transition: transform 0.7s var(--hk-ease-out);
}

.hk-gamecard__img--board { padding: 20px; transform: rotate(-4deg) scale(1.02); }

/* The subtle artwork scale on hover - the card's whole interaction, with
   the lift and the gold border from the shared card rules. */
.hk-gamecard:hover .hk-gamecard__img { transform: scale(1.07); }
.hk-gamecard:hover .hk-gamecard__img--board { transform: rotate(2deg) scale(1.07); }

.hk-gamecard__empty {
	position: absolute;
	inset: 16px;
	display: grid;
	place-items: center;
	border-radius: var(--hk-radius);
	border: 1.5px dashed var(--hk-gold-dim);
	background: rgba(246, 233, 207, 0.03);
}

.hk-gamecard__empty-mark {
	width: 36px;
	height: 36px;
	opacity: 0.45;
	background:
		linear-gradient(var(--hk-gold), var(--hk-gold)) center / 100% 2px no-repeat,
		linear-gradient(var(--hk-gold), var(--hk-gold)) center / 2px 100% no-repeat;
}

.hk-gamecard__media .hk-chip {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	z-index: 4;
	background: rgba(20, 10, 4, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: hk-chip-in 0.6s var(--hk-ease-out) both;
}

@keyframes hk-chip-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

.hk-gamecard__media .hk-chip--live { background: var(--hk-grad-warm); }

/* Live and upcoming states read differently. */
.hk-gamecard.is-live { border-color: var(--hk-gold-dim); }
.hk-gamecard.is-soon .hk-gamecard__media { filter: saturate(0.62) brightness(0.86); }
.hk-gamecard.is-soon:hover .hk-gamecard__media { filter: saturate(0.9) brightness(0.98); }

.hk-gamecard__body { padding: 30px 30px 32px; display: flex; flex-direction: column; flex: 1; }

.hk-gamecard__title {
	margin: 0 0 12px;
	font-size: 1.6rem;
	color: #FFF6E4;
	letter-spacing: -0.01em;
}

.hk-gamecard__title [lang="ar"] { letter-spacing: normal; }

.hk-gamecard__text { margin: 0 0 20px; font-size: 0.99rem; color: var(--hk-muted); flex: 1; }

.hk-gamecard__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.94rem;
	font-weight: 700;
	color: var(--hk-gold);
	text-decoration: none;
	align-self: flex-start;
}

.hk-gamecard__link .hk-icon { width: 19px; height: 19px; transition: transform 0.35s var(--hk-ease-out); }
[dir="rtl"] .hk-gamecard__link .hk-icon { transform: scaleX(-1); }
.hk-gamecard__link:hover .hk-icon { transform: translateX(6px); }
[dir="rtl"] .hk-gamecard__link:hover .hk-icon { transform: scaleX(-1) translateX(6px); }

/* =========================================================================
   12b. THE FEATURE CARDS IN THREE DIMENSIONS

   Added ONLY under .hk-flip. Everything in 11b stays true; this layer turns
   a stacked card into a two-sided object without changing a word of content.

   It sits HERE, after the games block, purely for cascade order: these rules
   override the flat feature-card rules in 11b and must come after them.
   ========================================================================= */

/*
 * PERSPECTIVE MUST SIT ON THE CARD, NOT ON THE ROW.
 *
 * `perspective` applies to an element's CHILDREN. Putting it on the grid
 * would aim it at .hk-feature, which carries no 3D transform and - because
 * it establishes a stacking context - flattens everything below it. The
 * rotation would then render with no foreshortening at all: a plain 2D
 * squash, and rotateY(180deg) and rotateY(-180deg) would look identical,
 * quietly making the whole RTL direction treatment meaningless.
 */
.hk-flip .hk-feature {
	perspective: 1500px;
	/* Both faces occupy the same space, so the card needs a fixed height. */
	min-height: 290px;
}

.hk-flip .hk-feature__inner {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	overflow: visible;
	transform-style: preserve-3d;
	transition: transform 0.92s cubic-bezier(0.36, 0.04, 0.16, 1);
}

/*
 * DIRECTION. In Arabic the whole layout is mirrored, so a card turning to the
 * left reads as turning the wrong way. --hk-dir flips the axis with it, and
 * the back face is pre-rotated by the same amount so the two always agree.
 */
.hk-flip .hk-feature.is-flipped .hk-feature__inner {
	transform: rotateY(calc(var(--hk-dir, 1) * 180deg));
}

.hk-flip .hk-feature__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 30px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: var(--hk-radius-l);
	border: 1px solid var(--hk-line);
	box-shadow: var(--hk-shadow), var(--hk-rim);
	overflow: hidden;
	background: var(--hk-grad-card);
}

/*
 * THE FRONT IS A STATEMENT, NOT A SUMMARY.
 * A glyph and a title, held in the middle of the card. The description is
 * deliberately absent - it is the reason to turn the card over.
 */
.hk-flip .hk-feature__face--front .hk-feature__glyph {
	width: 52px;
	height: 52px;
	margin-block-end: 22px;
}

.hk-flip .hk-feature__face--front .hk-feature__title {
	margin: 0;
	font-size: 1.42rem;
	color: #FFF6E4;
}

.hk-flip .hk-feature__face--back {
	transform: rotateY(calc(var(--hk-dir, 1) * 180deg));
	/* Carved wood, warm and dark. No glass, no neon. */
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(232, 83, 43, 0.16), transparent 62%),
		linear-gradient(168deg, #4A2E18 0%, #33200F 52%, #201105 100%);
	border-color: var(--hk-gold-dim);
	/*
	 * flex-start, NOT center. A centred column overflows at BOTH ends inside
	 * an overflow:hidden face, so a long Arabic description would clip its
	 * own heading off the top and its last line off the bottom - and a card
	 * face has no scrollbar to reveal them.
	 */
	justify-content: flex-start;
}

/* The grain, drawn rather than photographed, plus a Sadu band at the foot. */
.hk-flip .hk-feature__grain {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background:
		repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(87deg, rgba(255, 226, 174, 0.05) 0 1px, transparent 1px 23px);
}

.hk-flip .hk-feature__grain::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 14px;
	opacity: 0.7;
	background:
		repeating-linear-gradient(90deg, transparent 0 9px, rgba(242, 206, 135, 0.32) 9px 10px, transparent 10px 19px),
		linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4));
}

.hk-flip .hk-feature__body {
	position: relative;
	z-index: 2;
}

.hk-flip .hk-feature__title--back {
	display: block;
	margin: 0 0 12px;
	font-size: 1.18rem;
	color: var(--hk-gold);
}

.hk-flip .hk-feature__face--back .hk-feature__text { color: var(--hk-cream-2, var(--hk-muted)); }

/* ---- Focus: the selected card ---------------------------------------- */

/*
 * The focused card lifts toward the viewer and the rest step back. The
 * difference is small on purpose - the neighbours should read as quieter,
 * not as disabled.
 */
.hk-flip .hk-feature.is-focused {
	transform: translateY(-10px) scale(1.018);
	z-index: 2;
}

.hk-flip .hk-features:has(.is-focused) .hk-feature:not(.is-focused) {
	filter: saturate(0.82) brightness(0.86);
}

.hk-flip .hk-feature.is-focused .hk-feature__face {
	box-shadow: var(--hk-shadow-l), var(--hk-rim);
	border-color: var(--hk-gold-dim);
}

/* ---- The turn control ------------------------------------------------- */

.hk-flip .hk-feature__toggle {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 6;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--hk-gold-dim);
	background: rgba(20, 10, 4, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--hk-gold);
	cursor: pointer;
	transition: background-color 0.3s var(--hk-ease), border-color 0.3s var(--hk-ease);
}

.hk-flip .hk-feature__toggle:hover {
	border-color: var(--hk-gold);
	background: rgba(38, 20, 8, 0.9);
}

/* An open ring with a gap: "turn this over". */
.hk-flip .hk-feature__toggle-icon {
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-inline-end-color: transparent;
	transition: rotate 0.5s var(--hk-ease-out);
}

.hk-flip .hk-feature.is-flipped .hk-feature__toggle-icon { rotate: 180deg; }

/* -------------------------------------------------------------------------
   13. Impact numbers
   ---------------------------------------------------------------------- */

.hk-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hk-stat { padding: 38px 26px 40px; text-align: center; }

.hk-stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 3px;
	font-size: clamp(2.5rem, 5.4vw, 3.7rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--hk-gold);
}

.hk-stat__suffix--word { font-size: 0.8em; letter-spacing: normal; }

.hk-stat__label {
	display: block;
	margin-block-start: 16px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--hk-muted);
}

.hk-stat__rule {
	display: block;
	width: 48px;
	height: 2px;
	margin: 20px auto 0;
	border-radius: 2px;
	background: var(--hk-grad-gold);
	opacity: 0.65;
}

/* -------------------------------------------------------------------------
   14. Achievements — editorial pathway in three categories
   ---------------------------------------------------------------------- */

.hk-ach__bg { position: absolute; inset: 0; pointer-events: none; }

.hk-ach__glow {
	position: absolute;
	inset-block-start: 18%;
	inset-inline-start: -10%;
	width: min(620px, 76vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(160, 64, 42, 0.3), transparent 66%);
	filter: blur(80px);
	animation: hk-ambient 24s ease-in-out infinite alternate;
}

.hk-achgroup { margin-block-end: clamp(52px, 7vw, 84px); }
.hk-achgroup:last-child { margin-block-end: 0; }

.hk-achgroup__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-block-end: 30px;
}

.hk-achgroup__rule {
	width: 30px;
	height: 2px;
	flex: none;
	background: var(--hk-grad-gold);
}

.hk-achgroup__title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hk-gold);
	white-space: nowrap;
}

.hk-achgroup__title [lang="ar"] {
	letter-spacing: normal;
	text-transform: none;
	font-size: 1.2rem;
}

/* The count sits at the far end on a hairline, like an editorial folio. */
.hk-achgroup__count {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--hk-cream-3);
	flex: none;
}

.hk-achgroup__head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--hk-gold-hair), transparent);
	order: 2;
}

/* The hairline must fade away from the title in both directions. */
[dir="rtl"] .hk-achgroup__head::after {
	background: linear-gradient(270deg, var(--hk-gold-hair), transparent);
}

.hk-achgroup__count { order: 3; }

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

.hk-ach-card { padding: 30px 28px 32px; display: flex; flex-direction: column; }

.hk-ach-card__frame {
	position: absolute;
	inset: 10px;
	border: 1px solid var(--hk-gold-hair);
	border-radius: calc(var(--hk-radius-l) - 8px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s var(--hk-ease);
	z-index: 2;
}

.hk-ach-card:hover .hk-ach-card__frame { opacity: 1; }

.hk-ach-card__media {
	margin: -30px -28px 22px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.hk-ach-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hk-ach-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 16px;
}

.hk-ach-card__mark { color: var(--hk-gold-deep); flex: none; opacity: 0.8; }
.hk-ach-card__mark .hk-icon { width: 26px; height: 26px; }

.hk-ach-card__title {
	margin: 0 0 8px;
	font-size: 1.24rem;
	color: #FFF6E4;
	line-height: 1.35;
}

.hk-ach-card__result { margin: 0 0 10px; font-size: 0.98rem; font-weight: 700; color: var(--hk-gold); }
.hk-ach-card__text { margin: 0; font-size: 0.96rem; color: var(--hk-muted); }

/*
 * SHOWCASES carry more weight than the other two groups: a warmer ground, a
 * visible gold edge and a terracotta top rule, so public appearances read as
 * significant rather than as minor footnotes.
 */
.hk-achgroup--showcases .hk-ach-card {
	background:
		radial-gradient(110% 90% at 50% 0%, rgba(232, 83, 43, 0.18), transparent 66%),
		var(--hk-grad-card);
	border-color: var(--hk-gold-dim);
}

.hk-achgroup--showcases .hk-ach-card::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--hk-grad-warm);
	z-index: 2;
}

.hk-achgroup--showcases .hk-ach-card__title { font-size: 1.4rem; }
.hk-achgroup--showcases .hk-ach-card__mark { opacity: 1; color: var(--hk-gold); }

/* -------------------------------------------------------------------------
   15. Team
   ---------------------------------------------------------------------- */

.hk-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hk-member { padding: 36px 26px 34px; text-align: center; }

.hk-member__frame { position: relative; width: 136px; margin: 0 auto 24px; padding: 11px; }

.hk-member__corner {
	position: absolute;
	width: 17px;
	height: 17px;
	border: 2px solid var(--hk-gold-deep);
	opacity: 0.7;
	transition: width 0.45s var(--hk-ease-out), height 0.45s var(--hk-ease-out), opacity 0.45s var(--hk-ease);
}

.hk-member__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.hk-member__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.hk-member__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.hk-member__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

.hk-member:hover .hk-member__corner { width: 24px; height: 24px; opacity: 1; }

/*
 * The arrival rules in 4d set these corner sizes too, at a higher
 * specificity, so the hover growth needs to be re-stated at that weight or it
 * would silently stop working once the section had animated in.
 */
.hk-js [data-team-scene].is-active .hk-member:hover .hk-member__corner {
	width: 24px;
	height: 24px;
	opacity: 1;
}

.hk-member__avatar {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	/* Polished dark placeholder until a real photo is uploaded. */
	background:
		radial-gradient(80% 80% at 30% 25%, rgba(242, 206, 135, 0.22), transparent 60%),
		linear-gradient(165deg, var(--hk-raise), #241408);
	border: 1px solid var(--hk-gold-dim);
	overflow: hidden;
	box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5);
}

/*
 * Uploaded team photos are always shown as a centred square crop, so a
 * portrait and a landscape photo sit identically in the row.
 */
.hk-member__photo {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	display: block;
}

.hk-member__initials {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--hk-gold);
	opacity: 0.9;
}

.hk-member__ring {
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	border: 1px solid rgba(242, 206, 135, 0.28);
	pointer-events: none;
}

.hk-member__name { margin: 0 0 7px; font-size: 1.2rem; color: #FFF6E4; }
.hk-member__role { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--hk-gold); }

/* -------------------------------------------------------------------------
   16. Contact
   ---------------------------------------------------------------------- */

.hk-contact::after {
	content: "";
	position: absolute;
	inset-block-start: 10%;
	inset-inline-end: -8%;
	width: min(600px, 72vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 83, 43, 0.24), transparent 66%);
	filter: blur(80px);
	pointer-events: none;
	animation: hk-ambient 22s ease-in-out infinite alternate;
	z-index: 0;
}

.hk-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 68px);
	align-items: start;
}

.hk-contact__intro { position: relative; }

.hk-contact__title {
	margin: 0 0 18px;
	font-size: clamp(2.1rem, 4.6vw, 3.1rem);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #FFF6E4;
}

.hk-contact__title [lang="ar"] { letter-spacing: normal; line-height: 1.4; }

.hk-contact__text {
	max-width: 46ch;
	color: var(--hk-muted);
	font-size: 1.06rem;
	margin-block-end: 30px;
}

.hk-contact__direct {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	font-weight: 700;
	color: var(--hk-cream);
}

.hk-contact__direct .hk-icon { width: 20px; height: 20px; flex: none; color: var(--hk-gold); }

.hk-contact__direct a {
	color: var(--hk-cream);
	text-decoration: none;
	border-block-end: 1px solid var(--hk-gold-dim);
	transition: color 0.25s var(--hk-ease), border-color 0.25s var(--hk-ease);
}

.hk-contact__direct a:hover { color: var(--hk-gold); border-color: var(--hk-gold); }

.hk-contact__piece {
	position: absolute;
	inset-block-end: -10px;
	inset-inline-end: 4%;
	width: 70px;
	opacity: 0.14;
	pointer-events: none;
	animation: hk-drift 20s ease-in-out infinite;
}

/* Form card — the strongest single surface on the page. */
.hk-contact__formwrap {
	position: relative;
	padding: clamp(28px, 3.4vw, 42px);
	border-radius: var(--hk-radius-l);
	background: var(--hk-grad-card);
	border: 1px solid var(--hk-gold-dim);
	box-shadow: var(--hk-shadow-l), var(--hk-rim);
	isolation: isolate;
}

/* Animated gold edge that breathes very slowly. */
.hk-contact__formwrap::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, rgba(242, 206, 135, 0.55), rgba(232, 83, 43, 0.3) 40%, transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	z-index: -1;
	animation: hk-edge 9s ease-in-out infinite alternate;
}

@keyframes hk-edge {
	from { opacity: 0.55; }
	to { opacity: 1; }
}

.hk-contact__formwrap::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid var(--hk-gold-hair);
	border-radius: calc(var(--hk-radius-l) - 8px);
	pointer-events: none;
}

.hk-form { position: relative; z-index: 1; display: grid; gap: 20px; }
.hk-field { display: grid; gap: 8px; }

.hk-field__label {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--hk-gold);
	letter-spacing: 0.02em;
}

.hk-field__label [lang="ar"] { letter-spacing: normal; }

.hk-field__input {
	width: 100%;
	padding: 15px 18px;
	border-radius: 14px;
	border: 1px solid var(--hk-line);
	background: rgba(12, 6, 2, 0.5);
	font: inherit;
	color: var(--hk-cream);
	transition: border-color 0.25s var(--hk-ease), box-shadow 0.25s var(--hk-ease), background-color 0.25s var(--hk-ease);
}

.hk-field__input::placeholder { color: var(--hk-cream-3); opacity: 1; }
.hk-field__input:hover { border-color: var(--hk-gold-dim); }

.hk-field__input:focus {
	outline: none;
	border-color: var(--hk-gold);
	background: rgba(12, 6, 2, 0.72);
	box-shadow: 0 0 0 4px rgba(242, 206, 135, 0.16);
}

.hk-field__input--area { resize: vertical; min-height: 138px; line-height: 1.75; }

.hk-form__submit { justify-self: start; margin-block-start: 6px; }
.hk-form__submit .hk-icon { transition: transform 0.35s var(--hk-ease-out); }
[dir="rtl"] .hk-form__submit .hk-icon { transform: scaleX(-1); }
.hk-form__submit:hover .hk-icon { transform: translateX(6px); }
[dir="rtl"] .hk-form__submit:hover .hk-icon { transform: scaleX(-1) translateX(6px); }

.hk-honeypot {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hk-notice {
	margin-block-end: 22px;
	padding: 15px 19px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 0.95rem;
	border: 1px solid transparent;
}

.hk-notice--ok { background: rgba(122, 155, 90, 0.16); border-color: rgba(150, 190, 110, 0.5); color: #C7E0A6; }
.hk-notice--warn { background: rgba(232, 83, 43, 0.14); border-color: rgba(232, 83, 43, 0.5); color: #FFB79C; }

/* -------------------------------------------------------------------------
   17. Download + footer
   ---------------------------------------------------------------------- */

.hk-download {
	position: relative;
	padding-block: clamp(84px, 11vw, 148px);
	text-align: center;
	overflow: hidden;
}

.hk-download__bg { position: absolute; inset: 0; pointer-events: none; }

.hk-download__glow {
	position: absolute;
	width: 74vw;
	height: 74vw;
	max-width: 940px;
	max-height: 940px;
	inset: 0;
	margin: auto;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 83, 43, 0.3), transparent 62%);
	filter: blur(70px);
	animation: hk-breathe 10s ease-in-out infinite;
}

@keyframes hk-breathe {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.1); }
}

.hk-download__board {
	position: absolute;
	inset-block-end: -16%;
	inset-inline-end: -6%;
	width: min(440px, 52vw);
	opacity: 0.14;
	rotate: -12deg;
}

.hk-download__inner { position: relative; z-index: 2; }

.hk-download__title {
	margin: 0 0 20px;
	font-size: clamp(2.1rem, 5.6vw, 3.6rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--hk-gold);
}

.hk-download__title [lang="ar"] { letter-spacing: normal; line-height: 1.45; }

.hk-download__text {
	margin: 0 auto 36px;
	max-width: 54ch;
	font-size: clamp(1.02rem, 2vw, 1.22rem);
	color: var(--hk-cream);
}

.hk-download__actions { display: flex; justify-content: center; }

.hk-footer {
	position: relative;
	background: var(--hk-ground);
	color: var(--hk-muted);
	padding-block: clamp(54px, 6vw, 78px) 32px;
	font-size: 0.95rem;
}

.hk-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 18px;
	background-image: var(--hk-sadu);
	background-size: 42px 18px;
	background-repeat: repeat-x;
	opacity: 0.9;
}

.hk-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
	padding-block-end: 34px;
	margin-block-end: 34px;
	border-block-end: 1px solid var(--hk-gold-hair);
}

.hk-footer .widget-title { color: var(--hk-gold); font-size: 0.84rem; letter-spacing: 0.12em; }

.hk-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
	gap: 38px;
	padding-block-end: 36px;
	border-block-end: 1px solid var(--hk-gold-hair);
}

.hk-footer__logo { height: 54px; width: auto; margin-block-end: 14px; }
.hk-footer__name { display: block; font-size: 1.44rem; font-weight: 700; color: #FFF6E4; line-height: 1.35; }
.hk-footer__note { margin: 10px 0 0; max-width: 34ch; color: var(--hk-cream-3); font-size: 0.92rem; }

.hk-footer__nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.hk-footer__nav-list a {
	color: var(--hk-muted);
	text-decoration: none;
	transition: color 0.25s var(--hk-ease), padding-inline-start 0.3s var(--hk-ease-out);
}

.hk-footer__nav-list a:hover { color: var(--hk-gold); padding-inline-start: 6px; }

.hk-footer__social { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.hk-footer__social-title {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--hk-gold);
	text-transform: uppercase;
}

.hk-footer__social-title [lang="ar"] { letter-spacing: normal; text-transform: none; font-size: 0.98rem; }

.hk-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block-start: 26px; }
.hk-footer__copyright { margin: 0; font-size: 0.88rem; color: var(--hk-cream-3); }

.hk-totop {
	position: fixed;
	inset-inline-end: 22px;
	inset-block-end: 22px;
	z-index: 50;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--hk-gold-dim);
	background: var(--hk-grad-warm);
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	box-shadow: var(--hk-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 0.4s var(--hk-ease-out), transform 0.4s var(--hk-ease-out), visibility 0.4s;
}

.hk-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hk-totop:hover { transform: translateY(-3px); }

/* -------------------------------------------------------------------------
   18. Inner pages
   ---------------------------------------------------------------------- */

.hk-pagehead {
	position: relative;
	padding-block: calc(var(--hk-header-h) + 70px) 52px;
	background: var(--hk-grad-tone2);
	overflow: hidden;
}

.hk-pagehead::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 18px;
	background-image: var(--hk-sadu);
	background-size: 42px 18px;
	background-repeat: repeat-x;
	opacity: 0.75;
}

.hk-pagehead__title {
	margin: 0;
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	max-width: 24ch;
	letter-spacing: -0.02em;
	color: #FFF6E4;
}

.hk-pagehead__title [lang="ar"] { letter-spacing: normal; }
.hk-pagehead__desc,
.hk-pagehead__meta { margin: 16px 0 0; color: var(--hk-muted); }

.hk-featured { margin-block-start: 36px; }
.hk-featured img { width: 100%; border-radius: var(--hk-radius-l); box-shadow: var(--hk-shadow); }

.hk-page { padding-block: clamp(48px, 6vw, 80px); background: var(--hk-grad-tone1); }
.hk-archive { background: var(--hk-grad-tone1); }
.hk-section--extra { background: var(--hk-grad-tone1); }

.hk-prose { max-width: 76ch; font-size: 1.06rem; color: var(--hk-muted); }
.hk-prose h2 { margin-block-start: 1.9em; font-size: 1.8rem; color: #FFF6E4; }
.hk-prose h3 { margin-block-start: 1.6em; font-size: 1.32rem; color: var(--hk-gold); }
.hk-prose strong { color: var(--hk-cream); }
.hk-prose img, .hk-prose figure { border-radius: var(--hk-radius); margin-block: 1.6em; }

/* Logical radii, so the rounded side always sits opposite the accent bar. */
.hk-prose blockquote {
	margin: 1.8em 0;
	padding: 22px 28px;
	border-inline-start: 3px solid var(--hk-gold-deep);
	background: rgba(242, 206, 135, 0.07);
	border-start-end-radius: var(--hk-radius-s);
	border-end-end-radius: var(--hk-radius-s);
	font-size: 1.1rem;
	color: var(--hk-cream);
}

/* Wide tables scroll inside their own box instead of widening the page. */
.hk-prose > table,
.hk-prose > figure.wp-block-table,
.hk-prose .wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.hk-prose code, .hk-prose pre { background: rgba(0, 0, 0, 0.4); border-radius: 8px; font-size: 0.92em; color: var(--hk-cream); }
.hk-prose code { padding: 2px 6px; }
.hk-prose pre { padding: 18px 20px; overflow-x: auto; }

.hk-prose table { width: 100%; border-collapse: collapse; margin-block: 1.6em; }
.hk-prose th, .hk-prose td { padding: 11px 15px; border: 1px solid var(--hk-line); text-align: start; }
.hk-prose th { background: rgba(242, 206, 135, 0.07); color: var(--hk-cream); }

.hk-postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }

.hk-postcard {
	display: flex;
	flex-direction: column;
	border-radius: var(--hk-radius-l);
	background: var(--hk-grad-card);
	border: 1px solid var(--hk-line);
	overflow: hidden;
	box-shadow: var(--hk-shadow);
	transition: transform 0.4s var(--hk-ease-out), box-shadow 0.4s var(--hk-ease-out), border-color 0.4s var(--hk-ease);
}

.hk-postcard:hover { transform: translateY(-6px); box-shadow: var(--hk-shadow-l); border-color: var(--hk-gold-dim); }
.hk-postcard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hk-postcard__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.hk-postcard__title { margin: 0 0 10px; font-size: 1.32rem; }
.hk-postcard__title a { color: #FFF6E4; text-decoration: none; }
.hk-postcard__title a:hover { color: var(--hk-gold); }
.hk-postcard__excerpt { color: var(--hk-muted); font-size: 0.97rem; flex: 1; }

.hk-postcard__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.93rem;
	color: var(--hk-gold);
	text-decoration: none;
	align-self: flex-start;
}

.hk-postcard__more .hk-icon { width: 18px; height: 18px; transition: transform 0.35s var(--hk-ease-out); }
[dir="rtl"] .hk-postcard__more .hk-icon { transform: scaleX(-1); }

.hk-entry__meta { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 0.84rem; color: var(--hk-gold); }
.hk-entry__meta .hk-sep { opacity: 0.5; }
.hk-empty { text-align: center; padding-block: 44px; }

.hk-pagination { margin-block-start: 46px; display: flex; justify-content: center; }
.hk-pagination .nav-links, .navigation .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.hk-pagination .page-numbers,
.comments-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border-radius: 12px;
	border: 1px solid var(--hk-line);
	background: var(--hk-surface);
	color: var(--hk-cream);
	text-decoration: none;
	font-weight: 700;
	transition: all 0.3s var(--hk-ease);
}

.hk-pagination .page-numbers:hover,
.hk-pagination .page-numbers.current,
.comments-pagination .page-numbers:hover,
.comments-pagination .page-numbers.current { background: var(--hk-grad-warm); color: #fff; border-color: transparent; }

.comments-pagination { margin-block: 30px; display: flex; justify-content: center; }

.hk-linkpages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 30px; font-weight: 700; font-size: 0.92rem; color: var(--hk-cream); }

.hk-linkpages a {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	height: 34px;
	padding-inline: 10px;
	border-radius: 10px;
	border: 1px solid var(--hk-line);
	background: var(--hk-surface);
	color: var(--hk-cream);
	text-decoration: none;
	transition: all 0.3s var(--hk-ease);
}

.hk-linkpages a:hover { background: var(--hk-grad-warm); color: #fff; border-color: transparent; }

.hk-postnav { margin-block: 46px; }
.hk-postnav .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.hk-postnav a {
	display: block;
	padding: 22px 26px;
	border-radius: var(--hk-radius);
	background: var(--hk-grad-card);
	border: 1px solid var(--hk-line);
	text-decoration: none;
	transition: transform 0.35s var(--hk-ease-out), border-color 0.35s var(--hk-ease);
}

.hk-postnav a:hover { transform: translateY(-4px); border-color: var(--hk-gold-dim); }
.hk-postnav__label { display: block; font-size: 0.76rem; letter-spacing: 0.12em; color: var(--hk-gold); margin-block-end: 6px; }
.hk-postnav__title { display: block; font-weight: 700; color: #FFF6E4; }

.hk-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-block-start: 32px; }
.hk-tags a { display: inline-block; padding: 7px 15px; border-radius: 999px; background: rgba(242, 206, 135, 0.09); color: var(--hk-gold); font-size: 0.84rem; text-decoration: none; }

.hk-comments { max-width: 76ch; margin-block: 52px; }
.hk-comments__list { list-style: none; padding: 0; }
.hk-comments__list .children { list-style: none; padding-inline-start: 26px; }
.hk-comments .comment-body { padding: 22px 24px; margin-block-end: 16px; border-radius: var(--hk-radius); background: var(--hk-grad-card); border: 1px solid var(--hk-line); }

.hk-comments input[type="text"],
.hk-comments input[type="email"],
.hk-comments input[type="url"],
.hk-comments textarea,
.hk-searchform__input {
	width: 100%;
	padding: 14px 17px;
	border-radius: 13px;
	border: 1px solid var(--hk-line);
	background: rgba(12, 6, 2, 0.5);
	font: inherit;
	color: var(--hk-cream);
}

.hk-comments input::placeholder,
.hk-comments textarea::placeholder,
.hk-searchform__input::placeholder { color: var(--hk-cream-3); opacity: 1; }

.hk-comments label { display: block; margin-block-end: 6px; font-size: 0.88rem; font-weight: 700; color: var(--hk-gold); }
.hk-comments__title { color: #FFF6E4; font-size: 1.5rem; }
.hk-comments__closed { color: var(--hk-cream-3); }
.hk-comments .comment-metadata,
.hk-comments .comment-metadata a { font-size: 0.84rem; color: var(--hk-cream-3); }
.hk-comments .comment-author,
.hk-comments .comment-reply-title { color: var(--hk-cream); }
.hk-comments .reply a { font-weight: 700; color: var(--hk-gold); text-decoration: none; }
.hk-searchform { display: flex; gap: 10px; max-width: 470px; margin-inline: auto; }
.hk-searchform__input { flex: 1; }

.hk-404 {
	position: relative;
	padding-block: calc(var(--hk-header-h) + 88px) 116px;
	text-align: center;
	background: var(--hk-grad-tone2);
	overflow: hidden;
}

.hk-404__inner { position: relative; z-index: 2; }

.hk-404__board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	width: 136px;
	margin: 0 auto 32px;
	padding: 13px;
	border-radius: 18px;
	background: var(--hk-grad-card);
	border: 1px solid var(--hk-gold-dim);
	box-shadow: var(--hk-shadow);
}

.hk-404__cell { aspect-ratio: 1; border-radius: 7px; background: var(--hk-grad-gold); }
.hk-404__cell.is-empty { background: transparent; border: 1.5px dashed var(--hk-gold-dim); }
.hk-404__title { font-size: clamp(1.9rem, 5vw, 3rem); margin-block-end: 16px; color: #FFF6E4; }
.hk-404__text { color: var(--hk-muted); max-width: 50ch; margin-inline: auto; }
.hk-404__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-block-end: 36px; }

.hk-legal { background: var(--hk-grad-tone1); }

/*
 * ONE column. The policy is now assembled from two editable pages, so its
 * headings are whatever the owner wrote - there is nothing stable to build a
 * table of contents from, and the sticky TOC column that used to sit here
 * was removed with it.
 */
.hk-legal__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 62px); align-items: start; max-width: 1080px; }
.hk-legal__layout--notoc { grid-template-columns: minmax(0, 1fr); }

/* Each language block is a plain flow of the editor's own headings. */
.hk-legal__lang > :first-child { margin-block-start: 0; }
.hk-legal__lang h2 { margin-block-start: 1.9em; font-size: 1.6rem; }
.hk-legal__lang h3 { margin-block-start: 1.5em; font-size: 1.18rem; color: var(--hk-gold); }
.hk-legal__contact { margin-block-start: 2.4em; }

/* -------------------------------------------------------------------------
   19. Reveal + stagger
   ---------------------------------------------------------------------- */

/*
 * ONE delay expression, composed from four inherited parts:
 *   --hk-lock-delay    set by an unlocked section, 0 elsewhere
 *   --hk-group-delay   set per achievement group, so groups arrive in order
 *   --hk-reveal-delay  set per element by data-reveal-delay
 *   --hk-stagger       set per card by initStagger()
 * Composing beats overriding: previously the lock rule out-specified the
 * stagger and the per-element delay, silently cancelling them.
 */
/*
 * The reveal runs as an ANIMATION, not a transition.
 *
 * A transition here would occupy the `transition` property of every card, and
 * cards need theirs for hover: the reveal rule out-specifies the card rules,
 * so hover lifts inherited the reveal's long delay (up to ~0.9s of dead time)
 * while box-shadow and border-color, absent from the reveal's property list,
 * snapped instantly. An animation leaves `transition` free for hover and
 * keeps identical timing, because animation-delay is read at animation start
 * and `both` holds the from-state through the delay.
 */
.hk-js [data-reveal] {
	opacity: 0;
	transform: translateY(var(--hk-reveal-y, 32px)) scale(0.985);
	will-change: opacity, transform;
}

.hk-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
	animation: hk-reveal var(--hk-reveal-dur, 0.85s) var(--hk-ease-out) calc(
		var(--hk-lock-delay, 0s) +
		var(--hk-group-delay, 0s) +
		var(--hk-reveal-delay, 0s) +
		(var(--hk-stagger, 0) * var(--hk-stagger-step, 95ms))
	) both;
}

@keyframes hk-reveal {
	from { opacity: 0; transform: translateY(var(--hk-reveal-y, 32px)) scale(0.985); }
	to { opacity: 1; transform: none; }
}

.hk-js [data-reveal][data-reveal-delay="1"] { --hk-reveal-delay: 0.1s; }
.hk-js [data-reveal][data-reveal-delay="2"] { --hk-reveal-delay: 0.2s; }
.hk-js [data-reveal][data-reveal-delay="3"] { --hk-reveal-delay: 0.3s; }
.hk-js [data-reveal][data-reveal-delay="4"] { --hk-reveal-delay: 0.4s; }
.hk-js [data-reveal][data-reveal-delay="5"] { --hk-reveal-delay: 0.5s; }

/* Language swap cross-fade */
.hk-js.hk-lang-swapping .hk-i18n { animation: hk-lang-in 0.45s var(--hk-ease-out); }

@keyframes hk-lang-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   20. Responsive
   ---------------------------------------------------------------------- */

/* ---- 1024px and below: laptops and landscape tablets ---- */
@media (max-width: 1024px) {

	:root { --hk-section-y: clamp(72px, 9vw, 110px); }

	.hk-achlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-footer__social { grid-column: 1 / -1; }
	.hk-legal__layout { grid-template-columns: 1fr; }
}

/* ---- 920px and below: nav collapses ---- */
@media (max-width: 920px) {

	:root { --hk-header-h: 70px; }

	.hk-nav,
	.hk-header__cta,
	.hk-langswitch--header { display: none; }

	.hk-burger { display: flex; }

	/*
	 * TABLET HERO
	 * Single column, copy first. The stage shrinks and sits below the text so
	 * the artwork never competes with the headline, and the reserved band at
	 * the foot keeps the scroll cue clear of the keywords.
	 */
	.hk-hero {
		min-height: auto;
		padding-block: calc(var(--hk-header-h) + 44px) 118px;
	}

	.hk-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 40px;
	}

	.hk-hero__text { margin-inline: auto; }
	.hk-hero__badges { justify-content: center; }
	.hk-hero__visual { order: 2; min-height: 0; }
	.hk-hero__stage { width: min(340px, 62vw); }

	/* Vertical scrim once the layout is single column. */
	.hk-hero__wash::after,
	[dir="rtl"] .hk-hero__wash::after {
		background: linear-gradient(180deg, rgba(18, 9, 3, 0.62) 0%, rgba(20, 10, 4, 0.78) 46%, rgba(18, 9, 3, 0.95) 100%);
	}

	.hk-vision__grid,
	.hk-contact__grid,
	.hk-journey { grid-template-columns: 1fr; }

	.hk-contact__intro { order: 1; }
	.hk-contact__formwrap { order: 2; }

	.hk-game__char { display: none; }
	.hk-device--phone { width: min(280px, 66vw); }

	/*
	 * TABLET FLIP
	 * Same interaction, shallower. A shorter turn and a nearer perspective
	 * keep the card readable on a screen you hold, and the smaller lift stops
	 * the focused card colliding with its neighbour in a two-column grid.
	 */
	.hk-flip .hk-feature { perspective: 1100px; min-height: 300px; }
	.hk-flip .hk-feature__inner { transition-duration: 0.74s; }
	.hk-flip .hk-feature.is-focused { transform: translateY(-6px) scale(1.012); }

	/*
	 * TABLET BEAM. Only the height changes: the artwork keeps its aspect
	 * ratio and simply tiles more times across the narrower section, so the
	 * rings stay the right shape and the run of wood shortens instead.
	 */
	.hk-lock--art { --hk-beam-h: clamp(130px, 20vw, 190px); }
	.hk-lock:not(.hk-lock--art) .hk-lock__bar { height: clamp(46px, 7vw, 66px); }
	.hk-js [data-lockable].is-unlocked .hk-lock__bar { animation-duration: 1.2s; }
	.hk-js [data-lockable].is-unlocked { --hk-lock-delay: 1.15s; }
	.hk-achgroup--showcases { --hk-group-delay: 0.26s; }
	.hk-achgroup--traction { --hk-group-delay: 0.52s; }
}

/* ----------------------------------------------------------------------
   TABLET: the iPad showcase, but only if real iPad captures were uploaded

   .has-ipad is only present when at least one iPad screenshot exists, so
   with none uploaded the phone simply stays on screen at a larger size.
   A phone capture is never poured into a tablet-shaped frame.
   ---------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {

	.hk-game__devices.has-ipad .hk-showcase--phone { display: none; }
	.hk-game__devices.has-ipad .hk-showcase--ipad { display: flex; }
	.hk-device--ipad { width: min(560px, 84vw); }
}

/* ---- 768px and below ---- */
@media (max-width: 768px) {

	:root { --hk-gutter: 22px; }

	.hk-gamecards { grid-template-columns: 1fr; }
	.hk-achlist { grid-template-columns: 1fr; }
	.hk-hero__stage { width: min(300px, 66vw); }
}

/* ---- 640px and below: phones ---- */
@media (max-width: 640px) {

	:root {
		--hk-gutter: 20px;
		--hk-section-y: clamp(60px, 12vw, 86px);
		--hk-radius-l: 22px;
	}

	body.hk-theme { font-size: 16px; line-height: 1.72; }

	.hk-features,
	.hk-team__grid,
	.hk-stats,
	.hk-postgrid,
	.hk-footer__top,
	.hk-postnav .nav-links { grid-template-columns: 1fr; }

	.hk-heading { margin-block-end: 34px; }
	.hk-heading__title { font-size: clamp(1.72rem, 7.6vw, 2.25rem); }

	/* Paragraphs use the full column - never a narrow ribbon. */
	.hk-heading__lead,
	.hk-hero__text,
	.hk-vision__body p,
	.hk-download__text,
	.hk-contact__text { max-width: none; }

	/* MOBILE HERO */
	.hk-hero { padding-block: calc(var(--hk-header-h) + 30px) 104px; }
	.hk-hero__title { font-size: clamp(1.85rem, 8.6vw, 2.5rem); line-height: 1.3; }
	.hk-hero__stage { width: min(240px, 64vw); }
	.hk-hero__text { margin-block-end: 28px; }

	/* Keywords: centred, wrapping, never touching. */
	.hk-hero__badges { gap: 10px; justify-content: center; }
	.hk-hero__badges li { font-size: 0.85rem; padding: 8px 15px; gap: 8px; }

	/*
	 * Decorative artwork is secondary on phones: the floating pieces and the
	 * ambient board are removed so nothing crowds the copy or risks overflow.
	 */
	.hk-hero__pieces,
	.hk-download__pieces,
	.hk-quote__piece,
	.hk-contact__piece,
	.hk-download__board { display: none; }

	/*
	 * MOBILE MOTION POLICY
	 * Kept:      the unlock, seam draws, staggered reveals, CTA feedback.
	 * Dropped:   continuous ambient loops and large moving artwork - they are
	 *            what costs battery and causes jank on a phone.
	 */
	.hk-hero__art,
	.hk-hero__glow,
	.hk-download__glow,
	.hk-ach__glow,
	.hk-sadu,
	.hk-contact::after { animation: none; }

	.hk-vision::before,
	.hk-game::before,
	.hk-games::before,
	.hk-impact::before,
	.hk-ach::before,
	.hk-team::before,
	.hk-contact::before,
	.hk-download::before { animation: none; }

	/*
	 * THE UNLOCK STAYS. It is the signature moment and the one thing on the
	 * page worth the frames - but it is tightened: a shorter beam, a shorter
	 * release, and the two rings stop swinging at rest, which removes the
	 * only permanently-running animation in this section.
	 */
	.hk-lock--art { --hk-beam-h: clamp(104px, 30vw, 150px); }
	.hk-lock:not(.hk-lock--art) .hk-lock__bar { height: clamp(38px, 11vw, 56px); }
	.hk-lock__ring { inset-block-start: 58%; }
	.hk-lock__ring--a { inset-inline-start: 16%; }
	.hk-lock__ring--b { inset-inline-end: 16%; }

	/* The one permanently-running animation in this section, switched off. */
	.hk-lock__art--rings,
	.hk-lock__ring--a,
	.hk-lock__ring--b { animation: none; }

	.hk-js [data-lockable].is-unlocked .hk-lock__bar { animation-duration: 1s; animation-delay: 0.6s; }
	.hk-js [data-lockable].is-unlocked .hk-lock { transition-delay: 1.5s, 1.9s; }
	.hk-js [data-lockable].is-unlocked { --hk-lock-delay: 0.95s; }

	.hk-achgroup--showcases { --hk-group-delay: 0.2s; }
	.hk-achgroup--traction { --hk-group-delay: 0.4s; }

	/*
	 * MOBILE FLIP
	 * The card still turns - it is the point of the section - but shallower,
	 * quicker, and without the neighbour-dimming filter, which is a
	 * full-layer repaint for very little at this size. Tapping the card is
	 * the primary way in here; the scroll focus is the assist, not the only
	 * route, so an imperfect detection never strands the description.
	 */
	.hk-flip .hk-feature { perspective: 800px; min-height: 268px; }
	.hk-flip .hk-feature__inner { transition-duration: 0.66s; }
	.hk-flip .hk-feature.is-focused { transform: translateY(-5px); }
	.hk-flip .hk-features:has(.is-focused) .hk-feature:not(.is-focused) { filter: none; }

	/*
	 * The back face is a fixed box with no scrollbar, so at 320px the padding
	 * has to come down or a long Arabic description clips. Restated at the
	 * same weight as the desktop rule, which would otherwise out-specify the
	 * plain .hk-feature padding further down this block.
	 */
	.hk-flip .hk-feature__face { padding: 26px 22px; }

	/* The woven surface parts faster and without the shimmer detail. */
	.hk-sadureveal__half { transition-duration: 0.82s; }

	/* Shorter travel, quicker, tighter stagger - all via the tokens. */
	.hk-js [data-reveal] {
		--hk-reveal-y: 22px;
		--hk-reveal-dur: 0.66s;
		--hk-stagger-step: 65ms;
	}

	.hk-quote { padding: 30px 24px 28px; }
	.hk-quote__text { font-size: 1.24rem; }
	/*
	 * .hk-feature is NOT in this list. Its padding lives on .hk-feature__inner
	 * now, because the card is two faces inside a wrapper. Padding the outer
	 * element would inset a transparent ring around the bordered surface and,
	 * worse, shrink the absolutely-positioned faces by the padding on every
	 * side - which is enough to clip the longest description at 360px.
	 */
	.hk-journey__step,
	.hk-member,
	.hk-ach-card { padding: 28px 22px; }

	.hk-feature__inner { padding: 28px 22px; }
	.hk-gamecard__body { padding: 24px 22px 26px; }

	/*
	 * The showcase stays on phones - it is the only look at the real app -
	 * but the frame narrows. The dot hit targets are already 24px from the
	 * base rules, so nothing about the controls needs to change here.
	 */
	.hk-showcase { gap: 18px; }
	.hk-device--phone { width: min(252px, 70vw); }

	.hk-flow { flex-direction: column; align-items: stretch; }
	.hk-flow__item { flex-direction: column; gap: 6px; }
	.hk-flow__label { display: block; text-align: center; }
	.hk-flow__arrow { rotate: 90deg; }
	[dir="rtl"] .hk-flow__arrow .hk-icon { transform: none; }

	.hk-stores { width: 100%; flex-direction: column; }
	.hk-store { width: 100%; min-width: 0; }

	.hk-contact__formwrap { padding: 24px 18px; }
	.hk-contact__formwrap::after { inset: 7px; }
	.hk-form__submit { justify-self: stretch; width: 100%; }

	.hk-achgroup__head { gap: 12px; }
	.hk-achgroup__title { font-size: 0.9rem; letter-spacing: 0.14em; }

	/* Card padding shrinks here, so the full-bleed media inset must follow. */
	.hk-ach-card__media { margin: -28px -22px 20px; }

	/* The brand block must be allowed to shrink so the burger never clips. */
	.hk-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; }
	.hk-brand__names { min-width: 0; }
	.hk-brand__name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

	.hk-footer__bottom { flex-direction: column; align-items: flex-start; }
	.hk-totop { inset-inline-end: 15px; inset-block-end: 15px; }
	.hk-searchform { flex-direction: column; }
}

/* ---- 430px and below ---- */
@media (max-width: 430px) {

	.hk-hero__title { font-size: 1.86rem; }
	.hk-heading__title { font-size: 1.68rem; }
	.hk-gamecard__title { font-size: 1.4rem; }
	.hk-achgroup--showcases .hk-ach-card__title { font-size: 1.24rem; }
}

/* ---- 390px and below ---- */
@media (max-width: 390px) {

	:root { --hk-gutter: 16px; }

	body.hk-theme { font-size: 15.5px; }

	.hk-hero__title { font-size: 1.72rem; }
	.hk-heading__title { font-size: 1.56rem; }
	.hk-download__title { font-size: 1.6rem; }
	.hk-contact__title { font-size: 1.66rem; }
	.hk-hero__stage { width: min(210px, 60vw); }
	.hk-hero__badges li { font-size: 0.82rem; padding: 7px 13px; }
	.hk-store { padding-inline: 15px 17px; }
	.hk-store__text strong { font-size: 1rem; }
}

/* ---- 360px and below ---- */
@media (max-width: 360px) {

	:root { --hk-gutter: 14px; }

	.hk-hero__title { font-size: 1.58rem; }
	.hk-heading__title { font-size: 1.44rem; }
	.hk-brand__logo { height: 34px; }

	/*
	 * At the narrowest widths the wordmark is dropped rather than allowed to
	 * squeeze the language switch and burger off the edge. The logo or mark
	 * still carries the brand, and the accessible name is unaffected.
	 */
	.hk-brand__names { display: none; }
	.hk-langswitch__btn { padding: 6px 11px; font-size: 0.74rem; }
	.hk-burger { width: 44px; height: 44px; }
	.hk-hero__stage { width: min(186px, 58vw); }
	.hk-device--phone { width: min(226px, 74vw); }
	.hk-member__frame { width: 112px; }
	.hk-stat__value { font-size: 2.2rem; }

	/* Keywords stack rather than crowd at the very narrowest widths. */
	.hk-hero__badges { flex-direction: column; align-items: center; gap: 9px; }
	.hk-hero__badges li { width: 100%; justify-content: center; }

	.hk-contact__direct a,
	.hk-prose a { overflow-wrap: anywhere; }
}

/* -------------------------------------------------------------------------
   21. Accessibility & print
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	html { scroll-behavior: auto; }

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

	.hk-js [data-reveal],
	.hk-js [data-reveal].is-in {
		opacity: 1;
		transform: none;
		animation: none !important;
	}

	/*
	 * The lock is a mechanism, and a mechanism is exactly what someone with a
	 * motion sensitivity does not want. The whole barrier is removed outright
	 * and the content is simply present - no beam, no delay, no sequence.
	 * The same goes for the woven Sadu surface over Vision.
	 */
	.hk-lock,
	.hk-sadureveal { display: none !important; }

	.hk-js [data-lockable],
	.hk-js [data-lockable].is-unlocked {
		--hk-lock-delay: 0s;
	}

	/* Groups arrive together rather than in sequence. */
	.hk-achgroup--awards,
	.hk-achgroup--showcases,
	.hk-achgroup--traction { --hk-group-delay: 0s; }

	/*
	 * SECTION SCENES.
	 * initScenes() switches every scene on immediately under reduced motion,
	 * but these rules make that independent of the script: whatever happens,
	 * the end state is what is painted. Nothing is left holding at opacity 0
	 * waiting for a class it may never receive.
	 */
	.hk-js [data-sadu-reveal] .hk-quote,
	.hk-js [data-sadu-reveal] .hk-vision__body,
	.hk-js [data-sadu-reveal] .hk-journey,
	.hk-js [data-final-scene] .hk-download__actions { --hk-reveal-delay: 0s; }

	.hk-js [data-device-rise] .hk-showcase,
	.hk-js [data-device-rise] .hk-flow__item,
	.hk-js [data-team-scene] .hk-member__avatar,
	.hk-js [data-team-scene] .hk-member__name,
	.hk-js [data-team-scene] .hk-member__role {
		opacity: 1 !important;
		transform: none !important;
	}

	.hk-js [data-impact-scene] .hk-stat__rule,
	.hk-js [data-contact-scene] .hk-formframe__edge {
		transform: none !important;
	}

	.hk-js [data-team-scene] .hk-member__corner {
		width: 20px;
		height: 20px;
		opacity: 0.75;
	}

	/*
	 * THE GAME CARDS DO NOT TURN.
	 *
	 * initFlipCards() returns before adding .hk-flip, so normally the 3D layer
	 * never applies at all. This is the belt to that braces, for the one case
	 * where the class is already on the page: a visitor who switches reduced
	 * motion ON mid-session. Stopping the rotation alone would NOT be enough -
	 * the back face carries its own permanent rotateY, so it would simply
	 * stay turned away and the description would vanish. The whole 3D layer
	 * has to be dismantled, not just frozen.
	 */
	.hk-flip .hk-feature { min-height: 0 !important; perspective: none !important; }

	.hk-flip .hk-feature__inner {
		position: static !important;
		padding: 34px 30px !important;
		transform: none !important;
		transform-style: flat !important;
	}

	.hk-flip .hk-feature__face {
		position: static !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		background: none !important;
		transform: none !important;
		backface-visibility: visible !important;
	}

	.hk-flip .hk-feature__face--front .hk-feature__glyph { width: 42px !important; height: 42px !important; }
	.hk-flip .hk-feature__face--front .hk-feature__title { font-size: 1.18rem !important; color: var(--hk-gold) !important; margin: 0 0 10px !important; }
	.hk-flip .hk-feature__title--back { display: none !important; }

	/*
	 * The wood grain is the BACK face's surface. With the faces stacked it
	 * would lie over the front, so it goes.
	 */
	.hk-flip .hk-feature__grain { display: none !important; }

	.hk-js [data-seam]::after,
	.hk-js [data-seam]:not(.is-drawn)::after {
		transform: scaleX(1);
		opacity: 0.55;
		animation: none !important;
	}

	/*
	 * The carousel still changes picture - the dots must keep working - but it
	 * cuts instead of sliding. JS also stops autoplaying, so nothing moves
	 * unless the visitor asks for it.
	 */
	.hk-slide { transform: none !important; }

	.hk-sadu,
	.hk-lock__ring,
	.hk-lock__art--rings,
	.hk-vision::before,
	.hk-game::before,
	.hk-games::before,
	.hk-impact::before,
	.hk-ach::before,
	.hk-team::before,
	.hk-contact::before,
	.hk-download::before { animation: none !important; }

	.hk-hero__art,
	.hk-hero__glow,
	.hk-hero__board,
	.hk-hero__logo,
	.hk-piece,
	.hk-game__char,
	.hk-download__glow,
	.hk-ach__glow,
	.hk-contact::after,
	.hk-contact__formwrap::before,
	.hk-contact__piece,
	.hk-hero__badges.is-in li,
	.hk-mobile.is-open .hk-mobile__list li,
	.hk-gamecard__media .hk-chip,
	.hk-js.hk-lang-swapping .hk-i18n,
	.hk-journey__step:hover::before,
	.hk-gamecard:hover::before,
	.hk-member:hover::after,
	.hk-ach-card:hover::before {
		animation: none !important;
	}
}

@media print {

	.hk-header,
	.hk-mobile,
	.hk-totop,
	.hk-scrollcue,
	.hk-download,
	.hk-sadu,
	.hk-langswitch,
	.hk-form__submit,
	/* Controls do nothing on paper; only the visible screenshot is printed. */
	.hk-showcase__controls,
	.hk-feature__toggle,
	/* Back-face decoration, meaningless once both faces are printed flat. */
	.hk-feature__grain,
	/* A barrier that never opened would otherwise print as a brown slab. */
	.hk-lock,
	.hk-sadureveal { display: none !important; }

	.hk-slide:not(.is-active) { display: none !important; }

	/*
	 * On paper a card cannot be turned over, so both faces of every feature
	 * card are printed one after the other. Nothing may be lost from the page
	 * just because it happened to be on the back.
	 */
	.hk-feature { min-height: 0 !important; }

	.hk-feature__inner {
		position: static !important;
		padding: 26px 24px !important;
		transform: none !important;
	}

	.hk-feature__face {
		position: static !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		background: none !important;
		transform: none !important;
		backface-visibility: visible !important;
	}

	.hk-feature__title--back { display: none !important; }

	/*
	 * SECTION SCENES ON PAPER.
	 *
	 * Team names, roles, portraits, the device showcase and the game-flow
	 * steps are all held at opacity 0 until their section is scrolled into
	 * view. Printing a page whose lower half was never reached would
	 * otherwise produce blank team cards and an empty showcase - so every
	 * scene is forced to its finished state here, exactly as it is under
	 * reduced motion.
	 */
	.hk-js [data-device-rise] .hk-showcase,
	.hk-js [data-device-rise] .hk-flow__item,
	.hk-js [data-team-scene] .hk-member__avatar,
	.hk-js [data-team-scene] .hk-member__name,
	.hk-js [data-team-scene] .hk-member__role {
		opacity: 1 !important;
		transform: none !important;
	}

	.hk-js [data-impact-scene] .hk-stat__rule,
	.hk-js [data-contact-scene] .hk-formframe__edge {
		transform: none !important;
	}

	.hk-js [data-team-scene] .hk-member__corner {
		width: 20px !important;
		height: 20px !important;
		opacity: 1 !important;
	}

	.hk-js [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }

	/*
	 * The site is dark, so every colour must be forced back for paper -
	 * otherwise cream text prints white-on-white. This matters most for the
	 * privacy policy, which people do print.
	 */
	body.hk-theme,
	.hk-page,
	.hk-legal,
	.hk-archive,
	.hk-pagehead {
		background: #fff !important;
		color: #000 !important;
	}

	.hk-prose,
	.hk-prose p,
	.hk-prose li,
	.hk-prose h2,
	.hk-prose h3,
	.hk-prose strong,
	.hk-prose blockquote,
	.hk-heading__title,
	.hk-heading__lead,
	.hk-pagehead__title,
	.hk-pagehead__meta,
	.hk-pagehead__desc,
	.hk-legal__lang h2,
	.hk-legal__lang h3,
	.hk-eyebrow,
	a {
		color: #000 !important;
		text-shadow: none !important;
	}

	.hk-prose blockquote {
		background: transparent !important;
		border-inline-start-color: #666 !important;
	}
}