/**
 * KOG · "KG" style test — pattern styles
 * -----------------------------------------------------------------------------
 * A 1:1 rebuild of the Canva draft at myvibestyle.my.canva.site.
 *
 * HOW THE SIZING WORKS
 * The Canva design is a fixed 1440 x 6308 canvas with everything absolutely
 * positioned. To match it exactly rather than approximately, this file works in
 * the same coordinate space: `--u` is one design pixel, and every size and
 * offset is written as `calc(<design px> * var(--u))`.
 *
 *   viewport >= 1440px  ->  --u = 1px, so the render is pixel-identical
 *   viewport <  1440px  ->  --u shrinks, so the whole band scales proportionally
 *   viewport <  900px   ->  the canvas is abandoned for a reflowed mobile layout
 *
 * Every number in the canvas blocks below was measured off the live Canva page
 * (DOM geometry for the text, pixel analysis of a 1440-wide full-page capture
 * for the gold shapes), so please don't "tidy" them into round numbers.
 *
 * FONTS
 * Black Mango, Futura and Brown Sugar are the real faces from the design,
 * self-hosted from assets/fonts/. See the licensing note in the handover before
 * this page goes anywhere public.
 *
 * Everything is scoped under `.kgx-*` and namespaced `--kgx-*`, so this file is
 * inert unless a kg-style-* pattern is on the page.
 */

/* ---------------------------------------------------------------------------
 * Fonts — the real faces, lifted from the Canva design document
 * ------------------------------------------------------------------------- */
@font-face {
	font-family: 'Black Mango';
	src: url('../fonts/black-mango-bold.woff') format('woff');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'KG Futura';
	src: url('../fonts/futura-light.woff') format('woff');
	font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'KG Futura';
	src: url('../fonts/futura-regular.woff') format('woff');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'KG Futura';
	src: url('../fonts/futura-bold.woff') format('woff');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Brown Sugar';
	src: url('../fonts/brown-sugar.woff') format('woff');
	font-weight: 400; font-style: normal; font-display: swap;
}

:root {
	--kgx-green: #122C21;   /* rgb(18,44,33)   — the band field */
	--kgx-gold:  #EEBA2B;   /* rgb(238,186,43) — every accent   */
	--kgx-ink:   #000000;   /* body copy on the white band      */
	--kgx-paper: #FFFFFF;

	--kgx-display:   'Black Mango', Georgia, 'Times New Roman', serif;
	--kgx-sans:      'KG Futura', Futura, 'Century Gothic', system-ui, sans-serif;
	--kgx-logo-face: 'Brown Sugar', 'Black Mango', Georgia, serif;
}

/* ---------------------------------------------------------------------------
 * The canvas
 * ------------------------------------------------------------------------- */
/* One design pixel. Declared on the header too so it can share the canvas gutter. */
.page-template-page-kg-style .kog-site-header { --u: 1px; }

.kgx-section {
	--u: 1px;
	position: relative;
	overflow: hidden;
	/* NOT width:100%. These bands are alignfull inside a has-global-padding
	   parent, so WordPress gives them negative side margins to escape the root
	   padding and expects the width to stay auto so the box can stretch across
	   them. Pinning it to 100% sized the band to the parent's *content* box —
	   the band started at 0 but stopped ~21px short of the right edge, leaving
	   a white strip down the side of every screen. */
	width: auto;
	/* The mobile rules add horizontal padding to this 100%-wide band; without
	   border-box that padding widens the box and pushes the copy off-screen. */
	box-sizing: border-box;
	background: var(--kgx-green);
	font-family: var(--kgx-sans);
	font-kerning: normal;
}
/* The canvas tracks the viewport at every desktop width: exactly 1px at the
   1440 design width (so the pixel match holds), smaller below, larger above.
   Without the upper half of this the bands would stop at 1440 and leave a dead
   strip down the right of any wider screen. */
@media (min-width: 1025px) {
	.kgx-section,
	.page-template-page-kg-style .kog-site-header { --u: calc(100vw / 1440); }
}

/* Butt the bands together — core adds a 1.5rem block gap at zero specificity. */
.entry-content > .kgx-section,
.wp-site-blocks .kgx-section { margin-block: 0; }

.kgx-stage { position: relative; width: 100%; height: 100%; }
.kgx-abs { position: absolute; margin: 0; }
.kgx-abs img { display: block; width: 100%; height: 100%; }
.kgx-mark { position: absolute; margin: 0; }
.kgx-mark img { display: block; width: 100%; height: 100%; }

/* Design-space text. `white-space: pre` keeps Canva's hard line breaks exactly
   where the design put them and stops the browser re-wrapping a line that runs
   slightly wider than its box. Continuation lines in the patterns start at
   column 0, so this adds no stray indentation. */
.kgx-t {
	position: absolute;
	margin: 0;
	white-space: pre;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 1 — HERO   canvas 1440 x 768
 * ------------------------------------------------------------------------- */
.kgx-hero { height: calc(768 * var(--u)); }

.kgx-hero__texture {
	left: 0; top: calc(-121 * var(--u));
	width: calc(1440 * var(--u));
	height: calc(1440 * var(--u));
	opacity: 0.16;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.kgx-hero__portrait {
	left: calc(842 * var(--u));
	top: calc(-129 * var(--u));
	width: calc(617 * var(--u));
	height: calc(1097 * var(--u));
	z-index: 1;
}
.kgx-hero .kgx-t,
.kgx-hero .kgx-chip,
.kgx-hero .kgx-mark,
.kgx-hero .kgx-btn { z-index: 2; }
.kgx-hero__kg {
	left: calc(73 * var(--u));
	top: calc(10 * var(--u));
	font-family: var(--kgx-logo-face);
	font-size: calc(98.31 * var(--u));
	line-height: calc(137.55 * var(--u));
	letter-spacing: calc(-10.32 * var(--u));
	color: #fff;
}
.kgx-hero__name {
	left: calc(66 * var(--u));
	top: calc(90 * var(--u));
	font-weight: 300;
	font-size: calc(25.48 * var(--u));
	line-height: calc(35.52 * var(--u));
	color: #fff;
}
.kgx-hero__h1 {
	left: calc(59 * var(--u));
	top: calc(217 * var(--u));
	font-family: var(--kgx-display);
	font-weight: 700;
	font-size: calc(64.2 * var(--u));
	line-height: calc(60 * var(--u));
	color: #fff;
}
/* The squiggle runs behind Khaliah, disappearing past her shoulder rather than
   across her chest — so the portrait is layered over it, and the copy over both. */
.kgx-hero__scribble {
	left: calc(686 * var(--u));
	top: calc(213 * var(--u));
	width: calc(559 * var(--u));
	height: calc(286 * var(--u));
	z-index: 0;
}
.kgx-hero__gold {
	left: calc(59 * var(--u));
	top: calc(260 * var(--u));
	font-weight: 700;
	font-size: calc(84.87 * var(--u));
	line-height: calc(115.11 * var(--u));
	letter-spacing: calc(3.48 * var(--u));
	color: var(--kgx-gold);
}

.kgx-chip {
	position: absolute;
	margin: 0;
	white-space: pre;
	font-weight: 400;
	font-size: calc(24 * var(--u));
	line-height: calc(33 * var(--u));
	letter-spacing: calc(-0.24 * var(--u));
	color: #fff;
}
.kgx-chip--c1 { left: calc(107 * var(--u)); top: calc(401 * var(--u)); }
.kgx-chip--c2 { left: calc(325 * var(--u)); top: calc(401 * var(--u)); }
.kgx-chip--c3 { left: calc(616 * var(--u)); top: calc(401 * var(--u)); }
.kgx-chip--c4 { left: calc(172 * var(--u)); top: calc(497 * var(--u)); }
.kgx-chip--c5 { left: calc(411 * var(--u)); top: calc(497 * var(--u)); }

.kgx-mark--m1 { left: calc(76 * var(--u)); top: calc(440 * var(--u)); width: calc(201 * var(--u)); height: calc(17 * var(--u)); }
.kgx-mark--m2 { left: calc(320 * var(--u)); top: calc(440 * var(--u)); width: calc(244 * var(--u)); height: calc(24 * var(--u)); }
.kgx-mark--m3 { left: calc(601 * var(--u)); top: calc(439 * var(--u)); width: calc(190 * var(--u)); height: calc(18 * var(--u)); }
.kgx-mark--m4 { left: calc(147 * var(--u)); top: calc(535 * var(--u)); width: calc(183 * var(--u)); height: calc(11 * var(--u)); }
.kgx-mark--m5 { left: calc(485 * var(--u)); top: calc(538 * var(--u)); width: calc(176 * var(--u)); height: calc(7 * var(--u)); }

/* Pills measured off the capture: 284x68 and 285x68, 38px apart, fully round. */
.kgx-btn {
	position: absolute;
	top: calc(582 * var(--u));
	height: calc(68 * var(--u));
	border-radius: calc(34 * var(--u));
	background: var(--kgx-gold);
	color: var(--kgx-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(14 * var(--u));
	font-family: var(--kgx-sans);
	font-weight: 700;
	font-size: calc(24 * var(--u));
	line-height: calc(33 * var(--u));
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.2s ease;
}
.kgx-btn:hover { filter: brightness(1.08); transform: translateY(calc(-2 * var(--u))); }
.kgx-btn--b1 { left: calc(100 * var(--u)); width: calc(284 * var(--u)); }
.kgx-btn--b2 { left: calc(422 * var(--u)); width: calc(285 * var(--u)); }
.kgx-btn svg { width: calc(31 * var(--u)); height: calc(18 * var(--u)); fill: currentColor; flex: none; }

/* ---------------------------------------------------------------------------
 * 2 — COURT   canvas 1440 x 768 (band origin y 768)
 * ------------------------------------------------------------------------- */
.kgx-court { height: calc(768 * var(--u)); background: #201a10; }
.kgx-court__photo {
	left: calc(-26 * var(--u));
	top: calc(-22 * var(--u));
	width: calc(1607 * var(--u));
	height: calc(1787 * var(--u));
}
.kgx-court__lines {
	left: 0; top: 0;
	width: calc(1440 * var(--u));
	height: calc(768 * var(--u));
	opacity: 0.14;
	pointer-events: none;
}
.kgx-court__lines img { object-fit: cover; }
.kgx-court__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(97deg, rgba(20,16,8,0.82) 0%, rgba(24,19,9,0.5) 34%, rgba(30,24,12,0.1) 58%, rgba(28,22,11,0.42) 100%);
	pointer-events: none;
}
.kgx-court__lead {
	left: calc(62 * var(--u));
	top: calc(78 * var(--u));
	font-family: var(--kgx-display);
	font-weight: 700;
	font-size: calc(63.33 * var(--u));
	line-height: calc(60 * var(--u));
	color: #fff;
}
.kgx-court__word {
	left: calc(62 * var(--u));
	top: calc(315 * var(--u));
	font-weight: 700;
	font-size: calc(90.8 * var(--u));
	line-height: calc(130.44 * var(--u));
	/* CSS also adds letter-spacing after the final glyph; Canva doesn't. */
	letter-spacing: calc(1.8 * var(--u));
	color: var(--kgx-gold);
}
.kgx-mark--court { left: calc(65 * var(--u)); top: calc(426 * var(--u)); width: calc(307 * var(--u)); height: calc(27 * var(--u)); }

.kgx-court__kicker {
	left: calc(994 * var(--u));
	top: calc(445 * var(--u));
	width: calc(381 * var(--u));
	text-align: right;
	font-family: var(--kgx-display);
	font-weight: 700;
	font-size: calc(63.36 * var(--u));
	line-height: calc(60 * var(--u));
	letter-spacing: calc(-0.63 * var(--u));
	color: #fff;
}
.kgx-court__num {
	left: calc(1003 * var(--u));
	top: calc(608 * var(--u));
	font-weight: 700;
	font-size: calc(66.2 * var(--u));
	line-height: calc(92.52 * var(--u));
	letter-spacing: calc(2.71 * var(--u));
	color: var(--kgx-gold);
}
.kgx-mark--num { left: calc(1003 * var(--u)); top: calc(688 * var(--u)); width: calc(371 * var(--u)); height: calc(31 * var(--u)); }

/* ---------------------------------------------------------------------------
 * 3 — CORPORATE   canvas 1440 x 768 (band origin y 1536)
 * ------------------------------------------------------------------------- */
.kgx-corp { height: calc(768 * var(--u)); }
.kgx-corp__texture {
	left: 0; top: calc(-123 * var(--u));
	width: calc(1440 * var(--u));
	height: calc(1440 * var(--u));
	opacity: 0.16;
	mix-blend-mode: overlay;
	pointer-events: none;
}
/* The oversized ghost type. aria-hidden in the markup — it is texture. */
.kgx-corp__ghost {
	position: absolute;
	margin: 0;
	white-space: pre;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	font-size: calc(266.86 * var(--u));
	line-height: calc(266 * var(--u));
	letter-spacing: calc(10.94 * var(--u));
	color: rgba(238, 186, 43, 0.055);
	pointer-events: none;
	user-select: none;
}
.kgx-corp__ghost--a { left: calc(-39 * var(--u)); top: calc(-120 * var(--u)); width: calc(1528 * var(--u)); }
.kgx-corp__ghost--b { left: calc(-39 * var(--u)); top: calc(146 * var(--u));  width: calc(1528 * var(--u)); }
.kgx-corp__ghost--c { left: calc(143 * var(--u)); top: calc(678 * var(--u));  width: calc(1165 * var(--u)); }

.kgx-corp__quote {
	left: calc(384 * var(--u));
	top: calc(32 * var(--u));
	width: calc(671 * var(--u));
	text-align: center;
	text-transform: none;
	white-space: pre;
	font-weight: 400;
	font-size: calc(31.98 * var(--u));
	line-height: calc(44 * var(--u));
	letter-spacing: calc(-0.32 * var(--u));
	color: #fff;
}
.kgx-corp__h2 {
	left: calc(56 * var(--u));
	top: calc(265 * var(--u));
	font-family: var(--kgx-display);
	font-weight: 700;
	font-size: calc(63.36 * var(--u));
	line-height: calc(60 * var(--u));
	color: #fff;
}
.kgx-stat__figure {
	position: absolute;
	margin: 0;
	white-space: pre;
	text-transform: uppercase;
	font-weight: 700;
	font-size: calc(93.77 * var(--u));
	line-height: calc(131 * var(--u));
	letter-spacing: calc(3.84 * var(--u));
	color: var(--kgx-gold);
}
.kgx-stat__label {
	position: absolute;
	margin: 0;
	white-space: pre;
	font-weight: 400;
	font-size: calc(36.42 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(-0.36 * var(--u));
	color: #fff;
}
.kgx-stat--a .kgx-stat__figure { left: calc(1044 * var(--u)); top: calc(213 * var(--u)); }
.kgx-stat--a .kgx-stat__label  { left: calc(925  * var(--u)); top: calc(367 * var(--u)); }
.kgx-stat--a .kgx-mark         { left: calc(969 * var(--u)); top: calc(329 * var(--u)); width: calc(316 * var(--u)); height: calc(23 * var(--u)); }
.kgx-stat--b .kgx-stat__figure { left: calc(1013 * var(--u)); top: calc(563 * var(--u)); }
.kgx-stat--b .kgx-stat__label  { left: calc(1047 * var(--u)); top: calc(704 * var(--u)); }
.kgx-stat--b .kgx-mark         { left: calc(969 * var(--u)); top: calc(674 * var(--u)); width: calc(316 * var(--u)); height: calc(23 * var(--u)); }
.kgx-corp__amp {
	left: calc(1079 * var(--u));
	top: calc(412 * var(--u));
	font-family: var(--kgx-display);
	font-weight: 700;
	font-size: calc(131.85 * var(--u));
	line-height: calc(126.36 * var(--u));
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 4 — STORY   canvas 1440 x 3317 (band origin y 2304), white field
 * ------------------------------------------------------------------------- */
.kgx-story { height: calc(3317 * var(--u)); background: var(--kgx-paper); color: var(--kgx-ink); }
.kgx-story__yo {
	left: calc(503 * var(--u));
	top: calc(-70 * var(--u));
	text-transform: none;
	font-weight: 700;
	font-size: calc(634.5 * var(--u));
	line-height: calc(792.38 * var(--u));
	letter-spacing: calc(19 * var(--u));
	color: var(--kgx-gold);
}
/* Placement solved by correlating the source alpha against the design capture
   (silhouette IoU 0.80), not eyeballed. */
.kgx-story__denim {
	left: calc(35 * var(--u));
	top: calc(-130 * var(--u));
	width: calc(775 * var(--u));
	height: calc(1377 * var(--u));
}
/* Same method; IoU 0.91. */
.kgx-story__polka {
	left: calc(685 * var(--u));
	/* 20px above the IoU fit, so the faded bottom tucks under the gold stroke. */
	top: calc(856 * var(--u));
	width: calc(995 * var(--u));
	height: calc(1768 * var(--u));
}
/* These two sit over the bottom of the denim and polka-dot cutouts to hide
   the hard edge where each photo was cropped — so they must stay ON TOP of the
   portraits, and their height must match the reference or they read as a fat
   blob across her hand instead of a thin line tucked under the figure. */
.kgx-mark--long-a { left: calc(124 * var(--u)); top: calc(1240 * var(--u)); width: calc(670 * var(--u)); height: calc(42 * var(--u)); }
/* Explicit layering so a markup reorder can't put a mark behind a portrait:
   portraits sit under the marks that hide their cut edge, copy sits over both. */
.kgx-story__denim, .kgx-story__polka { z-index: 0; }
.kgx-story .kgx-mark { z-index: 1; }
.kgx-story .kgx-col, .kgx-story__yo { z-index: 2; }
/* Mirrored: the design uses the same sprite here but flipped, so the blunt
   thick end lands on the right where the cutout's base is widest. */
.kgx-mark--long-b {
	left: calc(655 * var(--u));
	top: calc(2596 * var(--u));
	width: calc(715 * var(--u));
	height: calc(40 * var(--u));
	transform: scale(-1, -1);   /* 180deg: thick end right, curve rising to it */
}

/* The three positioned columns. The design's text axis shifts between them:
   right of the denim portrait, then left beside the polka-dot one, then
   centred wide for the close. Left/top/width are the design's own. */
/* Each block is anchored on its own measured y so nothing drifts down the band. */
.kgx-col { position: absolute; margin: 0; }
.kgx-col--a  { left: calc(686 * var(--u)); top: calc(526 * var(--u));  width: calc(670 * var(--u)); }
.kgx-col--a2 { left: calc(686 * var(--u)); top: calc(731 * var(--u));  width: calc(670 * var(--u)); }
.kgx-col--b  { left: calc(112 * var(--u)); top: calc(1286 * var(--u)); width: calc(640 * var(--u)); }
.kgx-col--b2 { left: calc(119 * var(--u)); top: calc(2493 * var(--u)); width: calc(640 * var(--u)); }
.kgx-col--c  { left: calc(255 * var(--u)); top: calc(2688 * var(--u)); width: calc(915 * var(--u)); }
.kgx-col--c2 { left: calc(255 * var(--u)); top: calc(3040 * var(--u)); width: calc(915 * var(--u)); }
.kgx-col > p { position: static; margin: 0 0 calc(33 * var(--u)); }
.kgx-col > p:last-child { margin-bottom: 0; }
.kgx-col > .kgx-callout { margin-block: calc(33 * var(--u)); }

/* Body copy: centred runs, exactly as the design sets them. */
.kgx-body {
	position: absolute;
	margin: 0;
	text-align: center;
	font-weight: 400;
	font-size: calc(24 * var(--u));
	line-height: calc(33 * var(--u));
	letter-spacing: calc(-0.24 * var(--u));
	color: var(--kgx-ink);
}
.kgx-callout {
	position: absolute;
	margin: 0;
	text-align: center;
	white-space: pre-line;
	font-family: var(--kgx-display);
	font-weight: 700;
	font-size: calc(36.78 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(-0.37 * var(--u));
	color: var(--kgx-green);
}
.kgx-callout--gold {
	font-size: calc(51.3 * var(--u));
	line-height: calc(59 * var(--u));
	letter-spacing: calc(-0.54 * var(--u));
	color: var(--kgx-gold);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 5 — CLOSING   canvas 1440 x 687 (band origin y 5621)
 * ------------------------------------------------------------------------- */
.kgx-closing { height: calc(687 * var(--u)); background: #2a5060; }
.kgx-closing__photo { left: 0; top: 0; width: calc(1440 * var(--u)); height: calc(687 * var(--u)); }
.kgx-closing__photo img { object-fit: cover; }
.kgx-closing__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(96deg, rgba(24,58,72,0.88) 0%, rgba(28,64,76,0.6) 46%, rgba(30,68,80,0.26) 100%);
	pointer-events: none;
}
.kgx-closing__h2 {
	left: calc(66 * var(--u));
	top: calc(90 * var(--u));
	font-family: var(--kgx-display);
	font-weight: 700;
	font-size: calc(63.36 * var(--u));
	line-height: calc(60 * var(--u));
	color: #fff;
}
.kgx-closing__gold {
	left: calc(61 * var(--u));
	top: calc(270 * var(--u));
	font-weight: 700;
	font-size: calc(58.4 * var(--u));
	line-height: calc(70 * var(--u));
	letter-spacing: calc(1.8 * var(--u));
	color: var(--kgx-gold);
}
.kgx-mark--closing { left: calc(37 * var(--u)); top: calc(330 * var(--u)); width: calc(430 * var(--u)); height: calc(110 * var(--u)); }
.kgx-closing__copy {
	position: absolute;
	left: calc(62 * var(--u));
	top: calc(449 * var(--u));
	width: calc(905 * var(--u));
	margin: 0;
	color: #fff;
}
.kgx-closing__copy p {
	margin: 0 0 calc(33 * var(--u));
	font-weight: 400;
	font-size: calc(24 * var(--u));
	line-height: calc(33 * var(--u));
	letter-spacing: calc(-0.24 * var(--u));
}
.kgx-closing__copy p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Header — the site header wearing the KG lockup
 * ------------------------------------------------------------------------- */
/* The header part sits OUTSIDE main.kgx-page, so these have to hang off the
   body class, not .kgx-page. */
.page-template-page-kg-style .kog-site-header--overlay { background: transparent; }
/* Break out of the theme's 1280 constrained box and use the canvas's own 59px
   gutter, so the lockup sits directly above the headline's left edge. Desktop
   only — below 1025 the canvas is gone and the theme's own header spacing is
   what keeps the nav and the pill on one line. */
@media (min-width: 1025px) {
	.page-template-page-kg-style .kog-site-header.is-layout-constrained > * {
		max-width: none;
		margin-inline: 0;
	}
	/* Drop the theme's root padding so the gutter below is the only one. */
	.page-template-page-kg-style .kog-site-header.has-global-padding { padding-inline: 0; }
	.page-template-page-kg-style .kog-site-header > .wp-block-group {
		padding-inline: calc(59 * var(--u));
	}
}
/* Tablet: the theme shows the full nav down to 600px, and six items plus the
   pill are a squeeze — tighten the type and gaps so nothing spills. */
@media (min-width: 601px) and (max-width: 1024px) {
	.page-template-page-kg-style .kog-site-nav a {
		font-size: 0.62rem;
		letter-spacing: 0.05em;
		white-space: nowrap;      /* "Culture Audit" and "Rest Tech" were breaking in two */
	}
	.page-template-page-kg-style .kog-site-nav .wp-block-navigation__container { gap: 0.9rem; }
	.page-template-page-kg-style .kog-site-header > .wp-block-group { padding-inline: 1.25rem; gap: 1.25rem; }
	.kgx-btn--header .wp-block-button__link { font-size: 0.58rem; padding: 0.55rem 0.9rem; letter-spacing: 0.08em; }
}
/* Between the nav collapsing (600) and about 820 there isn't room for six nav
   items and the pill, and a clipped CTA is worse than none — the hero carries a
   Book Khaliah button and the nav still reaches Contact. */
@media (min-width: 601px) and (max-width: 820px) {
	.page-template-page-kg-style .kog-site-header .wp-block-buttons { display: none; }
}
.page-template-page-kg-style .kog-site-nav a {
	font-family: var(--kgx-sans);
	font-weight: 400;
	letter-spacing: 0.09em;
}
.kgx-logo {
	display: block;
	flex: none;            /* the header row is nowrap; without this the nav squeezes the lockup to zero */
	width: 73px;
	height: 58px;
	background: url('../images/kg-style/kg-logo.png') no-repeat center / contain;
}
/* Deliberately NOT built on .kgx-btn — that class is absolutely positioned for
   the canvas, which would drop this pill out of the header's flex row. */
.kgx-btn--header .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background: var(--kgx-gold);
	color: var(--kgx-green);
	font-family: var(--kgx-sans);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.7rem 1.35rem;
}

/* ---------------------------------------------------------------------------
 * Mobile — below 900px the fixed canvas stops being usable, so each band
 * reflows into one readable column. Sizes here are relative, not design px.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* Top padding clears the fixed site header, which overlays every band. */
	.kgx-section { height: auto !important; padding: 7rem 1.5rem 3.5rem; }
	.kgx-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; height: auto; }

	.kgx-t, .kgx-abs, .kgx-mark, .kgx-btn, .kgx-body, .kgx-callout,
	.kgx-chip, .kgx-stat__figure, .kgx-stat__label, .kgx-closing__copy,
	.kgx-col {
		position: static !important;
		inset: auto !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		max-width: 100%;
		white-space: normal;
		text-align: left;
	}
	.kgx-abs img { width: 100%; height: auto; }

	/* Decoration that only reads on the full canvas. */
	.kgx-hero__texture, .kgx-corp__texture, .kgx-corp__ghost,
	.kgx-court__lines, .kgx-mark, .kgx-story__yo,
	.kgx-hero__scribble, .kgx-corp__amp { display: none !important; }

	/* Photo bands. The stage goes static so the photo and scrim resolve against
	   the section and cover the whole band including its padding, and the copy
	   is lifted onto its own layer — a positioned photo at z-index 0 would
	   otherwise paint straight over its static text siblings. */
	.kgx-court, .kgx-closing { position: relative; }
	.kgx-court .kgx-stage, .kgx-closing .kgx-stage { position: static; }
	.kgx-closing__photo, .kgx-court__photo,
	.kgx-court__scrim, .kgx-closing__scrim {
		position: absolute !important;
		inset: 0 !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		z-index: 0;
	}
	.kgx-closing__photo img, .kgx-court__photo img { width: 100%; height: 100%; object-fit: cover; }
	/* On one column the copy sits over the middle of the photo rather than a
	   scrimmed edge, so both bands get a stronger top-to-bottom wash. */
	.kgx-court__scrim {
		background: linear-gradient(180deg, rgba(20,16,8,0.55) 0%, rgba(20,16,8,0.72) 100%);
	}
	.kgx-closing__scrim {
		background: linear-gradient(180deg, rgba(20,50,64,0.62) 0%, rgba(20,50,64,0.78) 100%);
	}
	.kgx-court .kgx-t, .kgx-closing .kgx-t,
	.kgx-closing__copy, .kgx-court .kgx-buttons, .kgx-closing .kgx-buttons {
		position: relative;
		z-index: 1;
	}

	.kgx-hero__kg   { font-size: 4.5rem; line-height: 1; letter-spacing: -0.42em; }
	.kgx-hero__name { font-size: 1.1rem; line-height: 1.4; }
	/* Sized so the longest line ("We put wellness on the") fits a 390px phone
	   with the band's 24px gutters, and set to break rather than spill if a
	   longer word ever lands here. */
	.kgx-hero__h1, .kgx-court__lead, .kgx-court__kicker,
	.kgx-corp__h2, .kgx-closing__h2 { font-size: clamp(1.25rem, 5vw, 2.4rem); line-height: 1.06; }
	.kgx-hero__gold, .kgx-court__word, .kgx-court__num,
	.kgx-closing__gold { font-size: clamp(1.45rem, 6.2vw, 2.8rem); line-height: 1.08; letter-spacing: 0.02em; }
	.kgx-t, .kgx-body, .kgx-callout, .kgx-chip, .kgx-closing__copy p {
		overflow-wrap: break-word;
		word-break: normal;
	}
	.kgx-chip { font-size: 1rem; line-height: 1.5; }
	.kgx-hero__chips { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; }
	.kgx-corp__quote { font-size: 1.05rem; line-height: 1.55; }
	.kgx-body { font-size: 1rem; line-height: 1.6; margin-bottom: 1.1rem; }
	.kgx-closing__copy p { font-size: 1rem; line-height: 1.6; margin-bottom: 1.1rem; }
	.kgx-callout { font-size: 1.5rem; line-height: 1.15; margin: 0.4rem 0 1.1rem; }
	/* Hard clamp: the desktop rules size these in design pixels (e.g. a 670px
	   column), so on a phone every text container has to be pinned back to the
	   band's content box or the copy runs off the right edge. */
	/* Pin every text container to the viewport minus the band's 24px gutters.
	   A percentage max-width resolves against the container, which is exactly
	   what is oversized here, so this is measured off the viewport instead. */
	.kgx-stage, .kgx-col, .kgx-body, .kgx-callout, .kgx-t, .kgx-chip,
	.kgx-closing__copy, .kgx-closing__copy p,
	.kgx-stat__figure, .kgx-stat__label {
		max-width: calc(100vw - 48px) !important;
		box-sizing: border-box;
	}
	.kgx-col { width: 100% !important; }
	.kgx-col > p:last-child { margin-bottom: 1.1rem; }
	.kgx-callout--gold { font-size: 1.75rem; }
	.kgx-stat__figure { font-size: 3rem; line-height: 1.05; }
	.kgx-stat__label  { font-size: 1.05rem; line-height: 1.4; margin-bottom: 1.4rem; }

	.kgx-btn {
		border-radius: 999px;
		padding: 0.95rem 1.9rem;
		font-size: 0.95rem;
		line-height: 1.2;
		width: auto !important;
	}
	.kgx-btn svg { width: 1.15rem; height: 0.75rem; }
	.kgx-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

	/* Portraits read better under the copy than over it on one column. */
	.kgx-hero__portrait, .kgx-story__denim, .kgx-story__polka {
		max-width: 17rem;
		align-self: center;
		order: 99;
	}
	.kgx-logo { width: 58px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.kgx-btn { transition: none; }
	.kgx-btn:hover { transform: none; }
}