/* ==========================================================================
   GHK Beauty — Design system
   Copper. Peptides. Glass.
   ========================================================================== */

:root {
	--ink: #0d0f1a;
	--ink-2: #161a2b;
	--midnight: #070915;
	--sapphire: #1f46d6;
	--sapphire-2: #5f86ff;
	--sapphire-deep: #0b1240;
	--copper: #c07a4e;
	--copper-light: #e8b48c;
	--porcelain: #f6f2ec;
	--cream: #efe7dc;
	--pearl: #fbf9f6;
	--white: #ffffff;
	--muted: #6c6a72;
	--line: rgba(13, 15, 26, 0.12);
	--line-light: rgba(246, 242, 236, 0.16);

	--serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--sans: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;

	--wrap: 1320px;
	--gutter: clamp(20px, 4vw, 56px);
	--section: clamp(76px, 10vw, 148px);
	--radius: 22px;
	--radius-lg: 32px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--shadow: 0 30px 60px -30px rgba(13, 15, 26, 0.35);
	--shadow-soft: 0 18px 50px -24px rgba(13, 15, 26, 0.22);
	--announce-h: 38px;
	--header-h: 84px;
	--glow-grad: linear-gradient(100deg, #9fb4ff 0%, #c9d4ff 30%, #f1c9a8 70%, #e8a982 100%);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--porcelain);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--sapphire); color: var(--white); }
:focus-visible { outline: 2px solid var(--sapphire); outline-offset: 3px; border-radius: 6px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; z-index: 1000; top: 8px; left: 8px; padding: 12px 18px; background: var(--ink); color: var(--porcelain); border-radius: 999px; }

/* ---------- Layout ---------- */
.ghk-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.ghk-wrap--narrow { max-width: calc(860px + var(--gutter) * 2); }
.ghk-section { padding: var(--section) 0; position: relative; }
.ghk-section--tight { padding-top: 48px; padding-bottom: var(--section); }
.ghk-tone--ink { background: var(--ink); color: var(--porcelain); }
.ghk-tone--cream { background: var(--cream); }
.ghk-tone--ink .ghk-lead { color: rgba(246, 242, 236, 0.72); }
.ghk-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.ghk-split2--media figure { margin: 0; }
.ghk-split2--media figure img { border-radius: var(--radius-lg); width: 100%; }

.ghk-grid { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.ghk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ghk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ghk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ghk-grid--1 { grid-template-columns: minmax(0, 520px); }

/* ---------- Typography ---------- */
.ghk-display {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1;
	font-feature-settings: "lnum" 1, "kern" 1;
}
.ghk-display em, .ghk-hero__title em, .ghk-display--lg em { font-style: italic; font-weight: 400; color: var(--sapphire); }
.ghk-tone--ink .ghk-display em, .ghk-pagehero--dark .ghk-display em, .ghk-footer .ghk-display em, .ghk-orbit .ghk-display em, .ghk-ctaband .ghk-display em, .ghk-404 .ghk-display em, .ghk-stats em {
	background: var(--glow-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em;
}
.ghk-display--xl { font-size: clamp(50px, 7.2vw, 112px); }
.ghk-display--lg { font-size: clamp(38px, 4.8vw, 70px); line-height: 1.02; }
.ghk-display--md { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; }
.ghk-lead { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.6; color: #3c3b45; max-width: 46ch; }
.ghk-muted { color: var(--muted); }
.ghk-muted-light { color: rgba(246, 242, 236, 0.66); }
.ghk-eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--sapphire); margin: 0 0 22px;
}
.ghk-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; }
.ghk-eyebrow--light { color: var(--copper-light); }
.ghk-heading { margin-bottom: clamp(36px, 4.6vw, 64px); max-width: 760px; }
.ghk-heading .ghk-lead { margin-top: 22px; }
.ghk-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.ghk-heading--center .ghk-eyebrow { justify-content: center; }
.ghk-heading--center .ghk-lead { margin-left: auto; margin-right: auto; }
.ghk-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.ghk-heading-row .ghk-heading { margin-bottom: clamp(36px, 4.6vw, 60px); }
.ghk-heading-row > .ghk-link, .ghk-heading-row > label { margin-bottom: clamp(40px, 4.8vw, 66px); flex: none; }

.ghk-link {
	display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 0.5s var(--ease), gap 0.3s var(--ease);
}
.ghk-link:hover { gap: 16px; background-size: 40% 1px; }
.ghk-link--light { color: var(--copper-light); }

/* ---------- Buttons ---------- */
.ghk-btn {
	--bg: var(--ink); --fg: var(--porcelain);
	position: relative; overflow: hidden; isolation: isolate;
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 50px; padding: 0 28px; border-radius: 999px;
	background: var(--bg); color: var(--fg);
	font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
	border: 1px solid var(--bg);
	transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
	white-space: nowrap; text-decoration: none;
}
.ghk-btn::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.35) 45%, transparent 70%);
	transform: translateX(-120%); transition: transform 0.9s var(--ease);
}
.ghk-btn:hover { --bg: var(--sapphire); border-color: var(--sapphire); color: var(--white); box-shadow: 0 16px 40px -14px rgba(31, 70, 214, 0.65); transform: translateY(-2px); }
.ghk-btn:hover::after { transform: translateX(120%); }
.ghk-btn--light { --bg: var(--porcelain); --fg: var(--ink); }
.ghk-btn--light:hover { --bg: var(--white); color: var(--ink); border-color: var(--white); box-shadow: 0 16px 50px -12px rgba(159, 180, 255, 0.55); }
.ghk-btn--outline-light { --bg: transparent; --fg: var(--porcelain); border-color: rgba(246, 242, 236, 0.4); backdrop-filter: blur(6px); }
.ghk-btn--outline-light:hover { --bg: rgba(246, 242, 236, 0.1); border-color: var(--porcelain); box-shadow: none; }
.ghk-btn--ghost { --bg: transparent; --fg: var(--ink); border-color: rgba(13, 15, 26, 0.3); }
.ghk-btn--ghost:hover { --bg: var(--ink); color: var(--porcelain); border-color: var(--ink); box-shadow: none; }
.ghk-btn--sm { min-height: 40px; padding: 0 18px; font-size: 11px; }
.ghk-btn--lg { min-height: 58px; padding: 0 34px; font-size: 13px; }
.ghk-btn--block { width: 100%; }
.ghk-btn.loading { opacity: 0.7; pointer-events: none; }
.ghk-btn.added::before { content: "✓"; }
.ghk-btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 34px; }
.ghk-btnrow--center { justify-content: center; }
a.added_to_cart { display: none !important; }

/* ---------- Badges & chips ---------- */
.ghk-badge {
	position: absolute; top: 16px; left: 16px; z-index: 2;
	padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px);
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.ghk-badge--sale { left: auto; right: 16px; background: var(--copper); color: var(--white); }
.ghk-badge--inline { position: static; display: inline-block; margin-bottom: 18px; background: var(--ink); color: var(--porcelain); }
.ghk-chip {
	display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
	border: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #3c3b45; white-space: nowrap;
}
.ghk-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--card-liquid, var(--sapphire)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-liquid, var(--sapphire)) 18%, transparent); }
.ghk-stars { display: inline-flex; gap: 2px; color: var(--copper); }
.ghk-pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ghk-pill--pair { background: #e3ecdf; color: #3e6233; }
.ghk-pill--alternate { background: #f6e3d6; color: #8a4a22; }
.ghk-pill--- { color: var(--muted); }

/* ---------- Announcement ---------- */
.ghk-announce {
	position: relative; z-index: 60; height: var(--announce-h); overflow: hidden;
	background: var(--ink); color: rgba(246, 242, 236, 0.86);
	font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
	display: flex; align-items: center;
}
.ghk-announce__track { display: flex; width: max-content; animation: ghk-marquee 46s linear infinite; }
.ghk-announce__group { display: flex; align-items: center; }
.ghk-announce span { padding: 0 26px; white-space: nowrap; }
.ghk-announce i { font-style: normal; color: var(--copper-light); font-size: 9px; }
@keyframes ghk-marquee { to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.ghk-header {
	position: sticky; top: 0; z-index: 50; height: var(--header-h);
	background: rgba(246, 242, 236, 0.86); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
	border-bottom: 1px solid var(--line);
	transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), top 0.4s var(--ease), transform 0.5s var(--ease);
}
.admin-bar .ghk-header { top: 32px; }
.ghk-header__inner {
	height: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.ghk-header .ghk-header__burger { display: none; }
.ghk-nav__list { list-style: none; display: flex; gap: clamp(16px, 2vw, 32px); align-items: center; }
.ghk-nav__list > li { position: relative; }
.ghk-nav__list > li > a {
	display: inline-flex; align-items: center; height: var(--header-h);
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; position: relative;
}
.ghk-nav__list > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease);
}
.ghk-nav__list > li:hover > a::after, .ghk-nav__list > li.current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.ghk-nav__list .sub-menu {
	list-style: none; position: absolute; top: calc(100% - 8px); left: -28px; min-width: 300px; padding: 22px;
	background: rgba(251, 249, 246, 0.97); backdrop-filter: blur(16px); color: var(--ink);
	border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
	display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px;
	opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.35s var(--ease);
}
.ghk-nav__list > li:hover > .sub-menu, .ghk-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ghk-nav__list .sub-menu a { display: block; padding: 9px 10px; border-radius: 10px; font-family: var(--serif); font-size: 21px; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.ghk-nav__list .sub-menu a:hover { background: var(--cream); color: var(--sapphire); }
.ghk-nav__list .sub-menu li:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.ghk-nav__list .sub-menu li:last-child a { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sapphire); }

.ghk-logo { display: inline-flex; align-items: baseline; gap: 10px; line-height: 1; }
.ghk-logo__mark { font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: 0.08em; }
.ghk-logo__word { font-size: 10.5px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; }
.ghk-logo__img { max-height: 48px; width: auto; }
.ghk-header__actions { display: flex; justify-content: flex-end; gap: 6px; }
.ghk-iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; transition: background 0.3s; }
.ghk-iconbtn:hover { background: rgba(13, 15, 26, 0.06); }
.ghk-bagcount {
	position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--sapphire); color: var(--white); font-size: 10px; font-weight: 700; display: grid; place-items: center;
}

/* Transparent header over dark heroes */
.ghk-transparent-header .ghk-header { position: fixed; left: 0; right: 0; top: var(--announce-h); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; color: var(--porcelain); }
.ghk-transparent-header.admin-bar .ghk-header { top: calc(var(--announce-h) + 32px); }
.ghk-transparent-header .ghk-iconbtn:hover { background: rgba(246, 242, 236, 0.12); }
.ghk-transparent-header .ghk-header.is-scrolled { top: 0; background: rgba(246, 242, 236, 0.86); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); color: var(--ink); border-color: var(--line); }
.ghk-transparent-header.admin-bar .ghk-header.is-scrolled { top: 32px; }
.ghk-transparent-header .ghk-header.is-scrolled .ghk-iconbtn:hover { background: rgba(13, 15, 26, 0.06); }
.ghk-header.is-hidden { transform: translateY(-110%); }
body:not(.ghk-transparent-header) .ghk-pagehero--light { padding-top: clamp(70px, 9vw, 120px); }

/* ---------- Overlays & drawers ---------- */
.ghk-overlay, .ghk-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; opacity: 0; transition: opacity 0.45s var(--ease), visibility 0.45s; }
.ghk-overlay.is-open, .ghk-drawer.is-open { visibility: visible; opacity: 1; }
.ghk-search { background: rgba(7, 9, 21, 0.92); backdrop-filter: blur(20px); color: var(--porcelain); display: grid; place-items: center; padding: var(--gutter); }
.ghk-overlay__close { position: absolute; top: 24px; right: 24px; color: var(--porcelain); }
.ghk-search__form { width: min(900px, 100%); transform: translateY(20px); transition: transform 0.6s var(--ease-out); }
.ghk-search.is-open .ghk-search__form { transform: none; }
.ghk-search input[type="search"] {
	width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(246, 242, 236, 0.3); color: var(--porcelain);
	font-family: var(--serif); font-size: clamp(40px, 6vw, 80px); padding: 10px 0 18px; outline: none;
}
.ghk-search input::placeholder { color: rgba(246, 242, 236, 0.3); }
.ghk-search__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ghk-search__chips a { padding: 9px 16px; border: 1px solid rgba(246, 242, 236, 0.25); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; transition: background 0.3s; }
.ghk-search__chips a:hover { background: rgba(246, 242, 236, 0.12); }
.ghk-drawer { background: rgba(7, 9, 21, 0.5); backdrop-filter: blur(4px); }
.ghk-drawer__panel {
	position: absolute; top: 0; bottom: 0; width: min(440px, 92vw); background: var(--pearl); color: var(--ink);
	display: flex; flex-direction: column; padding: 22px 26px; overflow-y: auto; transition: transform 0.6s var(--ease-out);
}
.ghk-drawer--left .ghk-drawer__panel { left: 0; transform: translateX(-100%); }
.ghk-drawer--right .ghk-drawer__panel { right: 0; transform: translateX(100%); }
.ghk-drawer.is-open .ghk-drawer__panel { transform: none; }
.ghk-drawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.ghk-drawer__head .ghk-eyebrow { margin: 0; }
.ghk-drawer__nav { list-style: none; }
.ghk-drawer__nav a { display: block; padding: 12px 0; font-family: var(--serif); font-size: 32px; line-height: 1.1; border-bottom: 1px solid var(--line); }
.ghk-drawer__nav .sub-menu { list-style: none; padding: 6px 0 10px 16px; }
.ghk-drawer__nav .sub-menu a { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; padding: 8px 0; border: 0; color: #3c3b45; }
.ghk-drawer__foot { margin-top: auto; padding-top: 24px; }

/* ---------- Hero (signature) ---------- */
.ghk-hero {
	position: relative; min-height: max(760px, 100svh); margin-top: 0;
	background: var(--midnight); color: var(--porcelain); overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 40px) 0 110px;
}
.ghk-hero__bg { position: absolute; inset: 0; z-index: -1; }
.ghk-hero__fluid {
	position: absolute; inset: -8%; background-size: cover; background-position: center; opacity: 0.6;
	animation: ghk-drift 26s ease-in-out infinite alternate; filter: saturate(1.15);
}
@keyframes ghk-drift { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.14) rotate(3deg) translate(2%, -2%); } }
.ghk-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.ghk-hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.ghk-hero__glow--a { width: 52vw; height: 52vw; right: -8vw; top: 4vh; background: radial-gradient(circle, rgba(31, 70, 214, 0.75), transparent 65%); animation: ghk-breathe 9s ease-in-out infinite; }
.ghk-hero__glow--b { width: 34vw; height: 34vw; left: -10vw; bottom: -14vw; background: radial-gradient(circle, rgba(192, 122, 78, 0.45), transparent 65%); animation: ghk-breathe 12s ease-in-out infinite reverse; }
@keyframes ghk-breathe { 50% { transform: scale(1.18); opacity: 0.75; } }
.ghk-hero__grain, .ghk-grain::after {
	position: absolute; inset: 0; opacity: 0.14; mix-blend-mode: overlay; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ghk-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(7, 9, 21, 0.85)); z-index: -1; }
.ghk-hero__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: clamp(20px, 4vw, 70px); }
.ghk-hero__eyebrow { margin-bottom: 30px; }
.ghk-hero__eyebrow::before { display: none; }
.ghk-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--copper-light); box-shadow: 0 0 0 0 rgba(232, 180, 140, 0.7); animation: ghk-pulse 2.2s infinite; }
@keyframes ghk-pulse { 70% { box-shadow: 0 0 0 12px rgba(232, 180, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 180, 140, 0); } }
.ghk-hero__title {
	font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 7.6vw, 128px); line-height: 0.93; letter-spacing: -0.025em; margin: 0;
}
.ghk-hero__title em { background: var(--glow-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }
.ghk-hero__text { margin-top: 30px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: rgba(246, 242, 236, 0.74); max-width: 48ch; }
.ghk-hero__proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 38px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: rgba(246, 242, 236, 0.7); }
.ghk-hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.ghk-hero__proof svg { color: var(--copper-light); }

.ghk-hero__visual { position: relative; aspect-ratio: 1 / 1.08; width: 100%; max-width: 640px; justify-self: center; }
.ghk-hero__halo { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(95, 134, 255, 0.55), rgba(31, 70, 214, 0.15) 45%, transparent 70%); filter: blur(10px); }
.ghk-hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ghk-spin 48s linear infinite; }
.ghk-hero__ring text { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.32em; fill: rgba(246, 242, 236, 0.62); }
.ghk-hero__orbitline { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid rgba(232, 180, 140, 0.28); transform: rotateX(70deg) rotateZ(-18deg); }
@keyframes ghk-spin { to { transform: rotate(360deg); } }
.ghk-hero__bottle {
	position: absolute; left: 50%; top: 50%; height: 74%; width: auto; max-width: none; transform: translate(-50%, -50%);
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 40px rgba(31, 70, 214, 0.35));
	animation: ghk-floaty 7s ease-in-out infinite;
}
@keyframes ghk-floaty { 50% { margin-top: -16px; } }
.ghk-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #e3eaff, #5f86ff 38%, #1f46d6 62%, #0b1240); box-shadow: inset -6px -8px 16px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(31, 70, 214, 0.45); }
.ghk-orb::after { content: ""; position: absolute; width: 30%; height: 18%; left: 22%; top: 18%; border-radius: 50%; background: rgba(255, 255, 255, 0.85); transform: rotate(-30deg); filter: blur(1px); }
.ghk-orb--1 { width: 64px; height: 64px; left: 6%; top: 18%; animation: ghk-floaty 6s ease-in-out infinite; }
.ghk-orb--2 { width: 26px; height: 26px; right: 12%; top: 10%; animation: ghk-floaty 5s ease-in-out infinite 1s; }
.ghk-orb--3 { width: 42px; height: 42px; right: 4%; bottom: 20%; background: radial-gradient(circle at 32% 28%, #fff1e6, #e8b48c 40%, #c07a4e 65%, #5a2f17); animation: ghk-floaty 8s ease-in-out infinite 0.5s; }
.ghk-glasstag {
	position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px;
	border-radius: 18px; background: rgba(246, 242, 236, 0.08); border: 1px solid rgba(246, 242, 236, 0.22);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
	font-size: 11px; line-height: 1.3; letter-spacing: 0.04em; color: rgba(246, 242, 236, 0.75);
}
.ghk-glasstag strong { font-family: var(--serif); font-size: 32px; font-weight: 500; color: var(--porcelain); letter-spacing: 0; line-height: 1; font-feature-settings: "lnum" 1; }
.ghk-glasstag--a { left: -2%; bottom: 22%; }
.ghk-glasstag--b { right: -4%; top: 30%; }
.ghk-glasstag--c { right: 8%; bottom: 6%; }
.ghk-hero__foot { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246, 242, 236, 0.6); }
.ghk-hero__name { font-family: var(--serif); font-size: 20px; letter-spacing: 0.01em; text-transform: none; font-weight: 400; color: rgba(246, 242, 236, 0.86); }
.ghk-hero__name del { opacity: 0.6; }
.ghk-hero__name ins { text-decoration: none; }
.ghk-scrollcue { display: inline-flex; align-items: center; gap: 14px; }
.ghk-scrollcue i { width: 1px; height: 42px; background: rgba(246, 242, 236, 0.25); position: relative; overflow: hidden; }
.ghk-scrollcue i::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--copper-light); animation: ghk-cue 2s var(--ease) infinite; }
@keyframes ghk-cue { to { top: 100%; } }

/* Split-word reveal */
.ghk-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ghk-split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * 70ms + 150ms); }
.ghk-split.is-in .w > span, .no-js .ghk-split .w > span { transform: none; }

/* ---------- Marquee ---------- */
.ghk-marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; background: var(--pearl); }
.ghk-marquee--dark { background: var(--ink); color: var(--porcelain); border-color: var(--line-light); }
.ghk-marquee__track { display: flex; width: max-content; animation: ghk-marquee 38s linear infinite; }
.ghk-marquee:hover .ghk-marquee__track { animation-play-state: paused; }
.ghk-marquee__group { display: flex; align-items: center; }
.ghk-marquee span { font-family: var(--serif); font-size: clamp(34px, 4.4vw, 62px); line-height: 1; padding: 0 30px; white-space: nowrap; }
.ghk-marquee span.is-italic { font-style: italic; color: var(--sapphire); }
.ghk-marquee--dark span.is-italic { color: var(--copper-light); }
.ghk-marquee i { font-style: normal; font-size: 16px; color: var(--copper); }

/* ---------- Product card ---------- */
.ghk-card { position: relative; display: flex; flex-direction: column; }
.ghk-card__media {
	position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
	background: var(--card-tint, var(--cream)); isolation: isolate;
}
.ghk-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity 0.7s var(--ease); }
.ghk-card__img--alt { opacity: 0; transform: scale(1.06); }
.ghk-card:hover .ghk-card__img { transform: scale(1.05); }
.ghk-card:hover .ghk-card__img--alt { opacity: 1; transform: scale(1); }
.ghk-card__body { padding: 18px 4px 4px; display: flex; flex-direction: column; flex: 1; }
.ghk-card__chips { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.ghk-card__title { font-family: var(--serif); font-size: 27px; line-height: 1.05; font-weight: 500; }
.ghk-card__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.ghk-card:hover .ghk-card__title a { background-size: 100% 1px; }
.ghk-card__sub { font-size: 13.5px; color: var(--muted); margin: 6px 0 10px; line-height: 1.45; }
.ghk-card__texture { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.ghk-card__rating { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.ghk-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.ghk-card__price { font-family: var(--serif); font-size: 24px; font-weight: 500; font-feature-settings: "lnum" 1; }
.ghk-card__price del { font-size: 17px; opacity: 0.5; margin-right: 4px; }
.ghk-card__price ins { text-decoration: none; color: var(--copper); }
.ghk-card__price .screen-reader-text { position: absolute !important; }

/* ---------- Products section ---------- */
.ghk-products { background: var(--porcelain); }
.ghk-products + .ghk-products { padding-top: 0; }

/* ---------- Spotlight ---------- */
.ghk-spotlight { padding: var(--section) 0; background: linear-gradient(180deg, var(--porcelain), color-mix(in srgb, var(--spot-tint) 55%, var(--porcelain)) 40%, var(--porcelain)); position: relative; overflow: hidden; }
.ghk-spotlight__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.ghk-spotlight.is-reverse .ghk-spotlight__media { order: 2; }
.ghk-spotlight__frames { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--spot-tint); }
.ghk-spotlight__frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.8s var(--ease), transform 1.4s var(--ease-out); }
.ghk-spotlight__frames img.is-active { opacity: 1; transform: none; }
.ghk-spotlight__tabs { display: inline-flex; gap: 4px; padding: 5px; margin-top: 20px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-soft); }
.ghk-spotlight__tabs button { padding: 10px 18px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.3s, color 0.3s; }
.ghk-spotlight__tabs button.is-active { background: var(--ink); color: var(--porcelain); }
.ghk-spotlight__sub { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 18px 0 26px; }
.ghk-actives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 34px 0; }
.ghk-actives__item { padding: 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); }
.ghk-actives__item strong { display: block; font-family: var(--serif); font-size: 38px; font-weight: 500; line-height: 1; color: var(--sapphire); font-feature-settings: "lnum" 1; }
.ghk-actives__item span { display: block; margin-top: 8px; font-weight: 700; font-size: 14px; }
.ghk-actives__item small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 4px; }
.ghk-timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; padding-top: 22px; }
.ghk-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: linear-gradient(90deg, var(--sapphire), var(--copper)); opacity: 0.4; }
.ghk-timeline li { position: relative; }
.ghk-timeline li::before { content: ""; position: absolute; top: -23px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--sapphire); box-shadow: 0 0 0 5px var(--porcelain); }
.ghk-timeline span { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sapphire); }
.ghk-timeline p { font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; color: #3c3b45; }

/* ---------- Orbit ---------- */
.ghk-orbit { position: relative; padding: var(--section) 0; background: var(--midnight); color: var(--porcelain); overflow: hidden; isolation: isolate; }
.ghk-orbit__bg { position: absolute; inset: 0; background-size: cover; background-position: 70% 50%; opacity: 0.16; z-index: -1; filter: blur(2px); }
.ghk-orbit::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, transparent 0, var(--midnight) 70%); z-index: -1; }
.ghk-orbit__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.ghk-orbit .ghk-lead { color: rgba(246, 242, 236, 0.7); }
.ghk-orbit__panel { position: relative; min-height: 250px; }
.ghk-orbit__detail { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); transition: all 0.6s var(--ease); pointer-events: none; padding: 28px; border-radius: 24px; border: 1px solid var(--line-light); background: linear-gradient(140deg, rgba(246, 242, 236, 0.07), rgba(246, 242, 236, 0.02)); backdrop-filter: blur(10px); }
.ghk-orbit__detail::before { content: ""; position: absolute; left: 28px; top: 0; width: 60px; height: 2px; background: var(--ing); box-shadow: 0 0 20px var(--ing); }
.ghk-orbit__detail.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ghk-orbit__detail h3 { font-family: var(--serif); font-size: 42px; line-height: 1; margin-bottom: 14px; }
.ghk-orbit__detail h3 small { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: rgba(246, 242, 236, 0.55); margin-top: 8px; }
.ghk-orbit__detail p { color: rgba(246, 242, 236, 0.78); }
.ghk-orbit__detail .ghk-eyebrow { margin-bottom: 14px; }
.ghk-orbit__stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; justify-self: center; container-type: inline-size; }
.ghk-orbit__core { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #ffe2c4, #c98a5b 42%, #4a2512 85%); box-shadow: 0 0 80px rgba(201, 138, 91, 0.6), inset -10px -14px 30px rgba(0, 0, 0, 0.4); font-family: var(--serif); font-size: clamp(30px, 3.6vw, 52px); color: #fff; }
.ghk-orbit__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(246, 242, 236, 0.18); }
.ghk-orbit__ring--1 { inset: 22%; animation: ghk-spin 60s linear infinite reverse; }
.ghk-orbit__ring--2 { inset: 4%; border-style: solid; border-color: rgba(95, 134, 255, 0.22); }
.ghk-orbit__spin { position: absolute; inset: 0; animation: ghk-spin 80s linear infinite; }
.ghk-orbit__stage:hover .ghk-orbit__spin, .ghk-orbit__stage:hover .ghk-orbit__node span { animation-play-state: paused; }
.ghk-orbit__node {
	--a: calc(360deg / var(--n) * var(--i));
	position: absolute; left: 50%; top: 50%; width: 0; height: 0;
	transform: rotate(var(--a)) translateY(-43cqw);
}
.ghk-orbit__node span {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
	display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; white-space: nowrap;
	background: rgba(13, 15, 26, 0.6); border: 1px solid rgba(246, 242, 236, 0.18); backdrop-filter: blur(8px);
	font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--porcelain);
	transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s;
	animation: ghk-counter 80s linear infinite;
}
@keyframes ghk-counter { from { rotate: 0deg; } to { rotate: -360deg; } }
.ghk-orbit__node span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ing); box-shadow: 0 0 12px var(--ing); }
.ghk-orbit__node:hover span, .ghk-orbit__node.is-active span { background: color-mix(in srgb, var(--ing) 45%, rgba(13, 15, 26, 0.8)); border-color: var(--ing); box-shadow: 0 0 40px -6px var(--ing); }

/* ---------- Categories ---------- */
.ghk-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.ghk-cat {
	position: relative; overflow: hidden; min-height: 300px; padding: 28px; border-radius: var(--radius-lg);
	background: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.7), transparent 55%), var(--tint);
	display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate;
	transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.ghk-cat:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.ghk-cat img { position: absolute; right: -2%; top: 50%; height: 118%; width: auto; transform: translateY(-50%) rotate(6deg); z-index: -1; transition: transform 0.9s var(--ease-out); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.18)); }
.ghk-cat:hover img { transform: translateY(-52%) rotate(0deg) scale(1.04); }
.ghk-cat__count { position: absolute; top: 24px; left: 28px; font-family: var(--serif); font-size: 18px; font-style: italic; opacity: 0.6; }
.ghk-cat__name { font-family: var(--serif); font-size: clamp(30px, 2.8vw, 40px); line-height: 1; max-width: 60%; }
.ghk-cat__desc { font-size: 13px; line-height: 1.5; color: #3c3b45; max-width: 52%; margin-top: 10px; }

/* ---------- Editorial ---------- */
.ghk-editorial { padding: var(--section) 0; background: var(--pearl); overflow: hidden; }
.ghk-editorial__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.ghk-editorial figure { margin: 0; position: relative; }
.ghk-editorial figure img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; }
.ghk-editorial figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.ghk-editorial figcaption span { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); }
.ghk-editorial__a { grid-column: 1 / 5; grid-row: 1 / 3; }
.ghk-editorial__a img { aspect-ratio: 4 / 5.4; }
.ghk-editorial__copy { grid-column: 5 / 9; grid-row: 1; padding: clamp(10px, 3vw, 50px) clamp(0px, 1.6vw, 24px); position: relative; }
.ghk-editorial__bottle { position: absolute; right: -4%; bottom: -78%; height: 320px; width: auto; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.25)); pointer-events: none; }
.ghk-editorial__b { grid-column: 9 / 13; grid-row: 1; margin-top: 90px !important; }
.ghk-editorial__b img { aspect-ratio: 4 / 5; }
.ghk-editorial__c { grid-column: 5 / 13; grid-row: 2; }
.ghk-editorial__c img { aspect-ratio: 16 / 7.5; }
.ghk-duo { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 24px; align-items: center; }
.ghk-duo figure { margin: 0; }
.ghk-duo img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ghk-duo figure:nth-child(2) img { aspect-ratio: 1; }
.ghk-float { animation: ghk-floaty 7s ease-in-out infinite; }

/* ---------- Ritual teaser ---------- */
.ghk-steps { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.ghk-step { position: relative; border-radius: 22px; padding: 18px 16px 20px; background: linear-gradient(180deg, var(--tint), color-mix(in srgb, var(--tint) 40%, var(--pearl))); display: flex; flex-direction: column; transition: transform 0.5s var(--ease); }
.ghk-step:hover { transform: translateY(-6px); }
.ghk-step__n { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--sapphire); }
.ghk-step img { height: 150px; width: auto; margin: 6px auto 12px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.16)); transition: transform 0.6s var(--ease); }
.ghk-step:hover img { transform: scale(1.06) rotate(-3deg); }
.ghk-step h3 { font-family: var(--serif); font-size: 26px; line-height: 1; }
.ghk-step p { font-size: 12.5px; line-height: 1.45; color: #3c3b45; margin: 8px 0 14px; }
.ghk-step a { margin-top: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sapphire); }

/* ---------- Science teaser ---------- */
.ghk-sciteaser { padding: var(--section) 0; background: var(--porcelain); }
.ghk-sciteaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.ghk-sciteaser__media { position: relative; }
.ghk-sciteaser__media img { border-radius: 400px 400px var(--radius-lg) var(--radius-lg); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.ghk-sciteaser__tag { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.ghk-numlist { list-style: none; counter-reset: n; margin: 0 0 36px; }
.ghk-numlist li { counter-increment: n; position: relative; padding: 18px 0 18px 64px; border-top: 1px solid var(--line); color: #3c3b45; }
.ghk-numlist li:last-child { border-bottom: 1px solid var(--line); }
.ghk-numlist li::before { content: "0" counter(n); position: absolute; left: 0; top: 14px; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--sapphire); }
.ghk-numlist strong { color: var(--ink); margin-right: 6px; }

/* ---------- Stats ---------- */
.ghk-stats { background: var(--ink); color: var(--porcelain); padding: clamp(60px, 7vw, 100px) 0; position: relative; overflow: hidden; }
.ghk-stats::before { content: ""; position: absolute; width: 60vw; height: 60vw; left: 20vw; top: -30vw; border-radius: 50%; background: radial-gradient(circle, rgba(31, 70, 214, 0.35), transparent 60%); }
.ghk-stats__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.ghk-stat { border-left: 1px solid var(--line-light); padding-left: 26px; }
.ghk-stat strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 7vw, 112px); line-height: 0.9; background: var(--glow-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-feature-settings: "lnum" 1; }
.ghk-stat p { font-size: 13.5px; color: rgba(246, 242, 236, 0.66); margin: 14px 0 0; max-width: 24ch; }

/* ---------- Reviews ---------- */
.ghk-reviews__grid { columns: 3 320px; column-gap: 24px; }
.ghk-review { break-inside: avoid; margin: 0 0 24px; padding: 30px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
.ghk-review blockquote { margin: 16px 0 18px; font-family: var(--serif); font-size: 24px; line-height: 1.25; }
.ghk-review figcaption { font-size: 12.5px; color: var(--muted); }
.ghk-review figcaption a { color: var(--sapphire); }

/* ---------- CTA band ---------- */
.ghk-ctaband { position: relative; padding: clamp(100px, 13vw, 190px) 0; color: var(--porcelain); text-align: center; overflow: hidden; isolation: isolate; background: var(--midnight); }
.ghk-ctaband::before { content: ""; position: absolute; inset: -10%; background: var(--bg) center / cover; z-index: -2; opacity: 0.75; animation: ghk-drift 30s ease-in-out infinite alternate; }
.ghk-ctaband::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(7, 9, 21, 0.2), rgba(7, 9, 21, 0.75)); z-index: -1; }
.ghk-ctaband__inner { max-width: 900px; }
.ghk-ctaband .ghk-eyebrow { justify-content: center; }
.ghk-ctaband h2 { margin-bottom: 38px; }

/* ---------- Journal ---------- */
.ghk-journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.ghk-jcard__img { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 11; background: var(--cream); }
.ghk-jcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ghk-jcard:hover .ghk-jcard__img img { transform: scale(1.06); }
.ghk-jcard__body { padding-top: 20px; }
.ghk-jcard__body .ghk-eyebrow { margin-bottom: 12px; font-size: 10.5px; }
.ghk-jcard__title { font-family: var(--serif); font-size: 30px; line-height: 1.05; margin-bottom: 12px; }
.ghk-jcard__body p { color: var(--muted); font-size: 14.5px; }
.ghk-pagination { margin-top: 60px; display: flex; justify-content: center; }
.ghk-pagination .nav-links { display: flex; gap: 8px; }
.ghk-pagination .page-numbers { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-weight: 600; }
.ghk-pagination .page-numbers.current { background: var(--ink); color: var(--porcelain); }

/* ---------- UGC ---------- */
.ghk-ugc { padding: var(--section) 0 0; background: var(--porcelain); }
.ghk-ugc__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.ghk-ugc__item { position: relative; aspect-ratio: 1; overflow: hidden; }
.ghk-ugc__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ghk-ugc__item span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); background: rgba(13, 15, 26, 0.45); opacity: 0; transition: opacity 0.4s; }
.ghk-ugc__item:hover img { transform: scale(1.08); }
.ghk-ugc__item:hover span { opacity: 1; }

/* ---------- Promise ---------- */
.ghk-promise { background: var(--pearl); padding: clamp(50px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.ghk-promise__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.ghk-promise__item svg { color: var(--sapphire); margin-bottom: 16px; }
.ghk-promise__item h3 { font-family: var(--serif); font-size: 26px; margin-bottom: 6px; }
.ghk-promise__item p { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 28ch; }

/* ---------- Page hero ---------- */
.ghk-pagehero { position: relative; overflow: hidden; isolation: isolate; }
.ghk-pagehero--light { padding: clamp(150px, 16vw, 210px) 0 clamp(60px, 7vw, 100px); background: radial-gradient(circle at 85% 0%, rgba(31, 70, 214, 0.09), transparent 45%), radial-gradient(circle at 0% 100%, rgba(192, 122, 78, 0.1), transparent 40%), var(--porcelain); }
.ghk-pagehero--compact { padding-bottom: 40px; }
.ghk-pagehero--light .ghk-lead { margin-top: 26px; }
.ghk-pagehero--light.has-image .ghk-pagehero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 6vw, 100px); align-items: end; }
.ghk-pagehero--light.has-image .ghk-pagehero__bg { position: absolute; right: var(--gutter); top: clamp(110px, 12vw, 150px); bottom: clamp(40px, 5vw, 70px); width: min(38vw, 520px); border-radius: 400px 400px var(--radius-lg) var(--radius-lg); background-size: cover; background-position: center; box-shadow: var(--shadow); }
@media (min-width: 1500px) { .ghk-pagehero--light.has-image .ghk-pagehero__bg { right: calc((100vw - var(--wrap)) / 2); } }
.ghk-pagehero--light.has-image .ghk-pagehero__inner > * { grid-column: 1; }
.ghk-pagehero--light.has-image { min-height: 640px; display: flex; align-items: flex-end; }
.ghk-pagehero--dark { padding: clamp(190px, 22vw, 300px) 0 clamp(80px, 9vw, 140px); background: var(--midnight); color: var(--porcelain); }
.ghk-pagehero--dark .ghk-pagehero__bg { position: absolute; inset: -6%; z-index: -2; background-size: cover; background-position: center; opacity: 0.7; animation: ghk-drift 30s ease-in-out infinite alternate; }
.ghk-pagehero--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 9, 21, 0.3), rgba(7, 9, 21, 0.85)); }
.ghk-pagehero--dark .ghk-lead { color: rgba(246, 242, 236, 0.75); margin-top: 26px; }
.ghk-pagehero__inner { position: relative; }
.ghk-pagehero--center { text-align: center; }

/* ---------- Science page ---------- */
.ghk-chain svg { width: 100%; overflow: visible; }
.ghk-chain__bond { fill: none; stroke: var(--sapphire); stroke-width: 3; stroke-dasharray: 8 10; opacity: 0.5; animation: ghk-dash 20s linear infinite; }
@keyframes ghk-dash { to { stroke-dashoffset: -400; } }
.ghk-chain__bead circle { fill: var(--c); filter: drop-shadow(0 16px 20px rgba(13, 15, 26, 0.2)); }
.ghk-chain__bead text, .ghk-chain__cu text { text-anchor: middle; font-family: var(--serif); font-size: 34px; fill: var(--ink); }
.ghk-chain__bead text.sm { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--muted); }
.ghk-chain__cu circle { fill: var(--copper); animation: ghk-breathe 4s ease-in-out infinite; transform-origin: 300px 70px; }
.ghk-chain__cu text { fill: #fff; font-size: 26px; }
.ghk-chain__coord { stroke: var(--copper); stroke-width: 1.5; stroke-dasharray: 3 6; fill: none; }
.ghk-classcard { position: relative; padding: 30px 26px 28px; border-radius: var(--radius); border: 1px solid var(--line-light); background: linear-gradient(160deg, rgba(246, 242, 236, 0.06), rgba(246, 242, 236, 0.01)); overflow: hidden; }
.ghk-classcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); box-shadow: 0 0 30px var(--c); }
.ghk-classcard__n { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--copper-light); }
.ghk-classcard h3 { font-family: var(--serif); font-size: 34px; margin: 16px 0 6px; }
.ghk-classcard__ex { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); filter: brightness(1.6); }
.ghk-classcard p:last-child { color: rgba(246, 242, 236, 0.7); font-size: 14.5px; margin: 0; }
.ghk-depth__legend { list-style: none; margin-top: 34px; }
.ghk-depth__legend li { padding: 18px 20px; border-radius: 16px; cursor: pointer; transition: background 0.4s; color: #3c3b45; font-size: 14.5px; }
.ghk-depth__legend li strong { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); }
.ghk-depth__legend li.is-active { background: var(--white); box-shadow: var(--shadow-soft); }
.ghk-depth__diagram { position: relative; aspect-ratio: 1 / 1.05; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; background: #fbe9dd; box-shadow: var(--shadow); }
.ghk-depth__layer { position: relative; display: flex; align-items: center; padding: 0 26px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: filter 0.5s, opacity 0.5s; opacity: 0.55; }
.ghk-depth__layer.is-active { opacity: 1; filter: saturate(1.3); }
.ghk-depth__layer.is-active::after { content: ""; position: absolute; right: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--sapphire); box-shadow: 0 0 0 6px rgba(31, 70, 214, 0.2); }
.ghk-depth__layer--1 { flex: 0.6; background: linear-gradient(180deg, #e7f1f7, #f6e2d6); border-bottom: 1px solid rgba(255, 255, 255, 0.8); }
.ghk-depth__layer--2 { flex: 1; background: repeating-linear-gradient(90deg, #f3d3c1 0 46px, #efc8b3 46px 48px); }
.ghk-depth__layer--3 { flex: 1.6; background: radial-gradient(ellipse at 30% 60%, #e7b39b, transparent 50%), repeating-linear-gradient(170deg, #dfa58a 0 3px, #e9b9a2 3px 26px); }
.ghk-depth__light { position: absolute; top: -10%; left: 30%; width: 26%; height: 70%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent); transform: skewX(-18deg); mix-blend-mode: overlay; animation: ghk-sweep 6s var(--ease) infinite; }
@keyframes ghk-sweep { 0% { left: -30%; } 60%, 100% { left: 110%; } }
.ghk-htimeline { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; padding-top: 40px; }
.ghk-htimeline::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: linear-gradient(90deg, var(--copper), var(--sapphire)); }
.ghk-htimeline li { position: relative; }
.ghk-htimeline li::before { content: ""; position: absolute; top: -39px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--porcelain); border: 2px solid var(--sapphire); }
.ghk-htimeline span { display: block; font-family: var(--serif); font-size: 48px; line-height: 1; margin-bottom: 12px; color: var(--sapphire); font-feature-settings: "lnum" 1; }
.ghk-htimeline p { font-size: 14px; color: #3c3b45; }
.ghk-checklist { list-style: none; margin: 26px 0 34px; }
.ghk-checklist li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--line); font-size: 15px; }
.ghk-checklist li::before { content: ""; position: absolute; left: 0; top: 17px; width: 18px; height: 18px; border-radius: 50%; background: var(--sapphire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ghk-tone--ink .ghk-checklist li { border-color: var(--line-light); }

/* ---------- Ingredients ---------- */
.ghk-ings__bar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 40px; flex-wrap: wrap; }
.ghk-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.ghk-filter button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; transition: all 0.3s; background: var(--pearl); }
.ghk-filter button sup { font-size: 9px; opacity: 0.6; }
.ghk-filter button:hover { border-color: var(--ink); }
.ghk-filter button.is-active { background: var(--ink); color: var(--porcelain); border-color: var(--ink); }
.ghk-ings__search { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; height: 48px; min-width: 300px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--muted); }
.ghk-ings__search input { border: 0; outline: 0; background: none; width: 100%; color: var(--ink); }
.ghk-ings__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ghk-ing { border-radius: var(--radius); background: var(--white); border: 1px solid transparent; transition: border-color 0.4s, box-shadow 0.4s; scroll-margin-top: 120px; }
.ghk-ing.is-open, .ghk-ing:target { border-color: color-mix(in srgb, var(--ing) 45%, transparent); box-shadow: var(--shadow-soft); }
.ghk-ing[hidden] { display: none; }
.ghk-ing__head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px 24px; text-align: left; }
.ghk-ing__swatch { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--ing) 30%, white), var(--ing) 55%, color-mix(in srgb, var(--ing) 60%, black)); box-shadow: 0 10px 22px -8px var(--ing); }
.ghk-ing__family { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.ghk-ing__name { display: block; font-family: var(--serif); font-size: 30px; line-height: 1.05; margin: 2px 0; }
.ghk-ing__inci { display: block; font-size: 12.5px; color: var(--muted); }
.ghk-ing__plus { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform 0.4s var(--ease), background 0.3s; }
[aria-expanded="true"] .ghk-ing__plus, .ghk-acc[open] summary span { transform: rotate(45deg); background: var(--ink); color: var(--porcelain); }
.ghk-ing__body { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease), padding 0.4s; }
.ghk-ing.is-open .ghk-ing__body { max-height: 1400px; padding-bottom: 24px; }
.ghk-ing__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.ghk-ing__facts div { padding: 12px 14px; border-radius: 12px; background: var(--porcelain); }
.ghk-ing__facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ghk-ing__facts dd { margin: 4px 0 0; font-weight: 600; font-size: 14px; }
.ghk-ing__body h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sapphire); margin: 14px 0 6px; }
.ghk-ing__body p { font-size: 14.5px; color: #3c3b45; }
.ghk-ing__pair { font-size: 13.5px !important; }
.ghk-ing__found { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.ghk-ing__found .ghk-eyebrow { margin: 0 8px 0 0; }
.ghk-minipro { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--porcelain); font-size: 12.5px; font-weight: 600; transition: background 0.3s; }
.ghk-minipro:hover { background: var(--cream); }
.ghk-minipro img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: var(--white); padding: 2px; }
.ghk-tablewrap { overflow-x: auto; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
.ghk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ghk-table th, .ghk-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ghk-table thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ghk-table tbody th { font-family: var(--serif); font-size: 22px; font-weight: 500; white-space: nowrap; }
.ghk-table tr:last-child th, .ghk-table tr:last-child td { border-bottom: 0; }
.ghk-table--compact th, .ghk-table--compact td { padding: 12px 0; }
.ghk-table--compact th { font-family: var(--sans) !important; font-size: 14px !important; font-weight: 700 !important; }
.ghk-table--compact th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.ghk-table--compact td { text-align: right; font-family: var(--serif); font-size: 22px; color: var(--sapphire); }

/* ---------- Formulations ---------- */
.ghk-standard { padding: 34px 30px; border-radius: var(--radius); background: var(--white); transition: transform 0.5s var(--ease), box-shadow 0.5s; }
.ghk-standard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.ghk-standard svg { color: var(--sapphire); margin-bottom: 20px; }
.ghk-standard h3 { font-family: var(--serif); font-size: 30px; margin-bottom: 10px; }
.ghk-standard p { font-size: 14.5px; color: var(--muted); margin: 0; }
.ghk-formulalist { display: flex; flex-direction: column; gap: 10px; }
.ghk-formula { border-radius: var(--radius); background: var(--pearl); overflow: hidden; transition: box-shadow 0.4s; }
.ghk-formula.is-open { box-shadow: var(--shadow-soft); background: var(--white); }
.ghk-formula[hidden] { display: none; }
.ghk-formula__head { width: 100%; display: grid; grid-template-columns: 64px 70px 1fr auto auto; align-items: center; gap: 20px; padding: 12px 24px 12px 12px; text-align: left; }
.ghk-formula__head img { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; background: var(--tint); padding: 4px; }
.ghk-formula__no { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--muted); }
.ghk-formula__name { font-family: var(--serif); font-size: 28px; line-height: 1.05; }
.ghk-formula__name small { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ghk-formula__meta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--liquid) 18%, white); }
.ghk-formula__body { display: block; max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease); }
.ghk-formula.is-open .ghk-formula__body { max-height: 1600px; }
.ghk-formula__cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; padding: 10px 28px 30px 108px; }
.ghk-formula__cols h4, .ghk-pdp-inci h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sapphire); margin: 0 0 10px; }
.ghk-formula__cols p { font-size: 14px; color: #3c3b45; }
.ghk-inci { font-size: 13.5px; line-height: 1.8; color: #3c3b45; letter-spacing: 0.01em; }
.ghk-freeof { display: flex; flex-wrap: wrap; gap: 6px; }
.ghk-freeof span { padding: 5px 11px; border-radius: 999px; background: #e3ecdf; color: #3e6233; font-size: 11.5px; font-weight: 700; }
.ghk-neverlist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.ghk-neverlist li { padding: 16px 0; border-bottom: 1px solid var(--line-light); font-family: var(--serif); font-size: 26px; text-decoration: line-through; text-decoration-color: var(--copper); text-decoration-thickness: 1px; color: rgba(246, 242, 236, 0.86); }

/* ---------- Ritual builder ---------- */
.ghk-ritual__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.ghk-ritual__top p { margin: 0; }
.ghk-toggle { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-soft); }
.ghk-toggle button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: all 0.4s var(--ease); }
.ghk-toggle button.is-active { background: var(--ink); color: var(--porcelain); }
.ghk-ritual__steps { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ghk-rstep { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center; padding: 22px; border-radius: var(--radius); background: var(--white); }
.ghk-rstep__label span { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--sapphire); }
.ghk-rstep__label h3 { font-family: var(--serif); font-size: 34px; line-height: 1; margin: 2px 0 6px; }
.ghk-rstep__label p { font-size: 13.5px; color: var(--muted); margin: 0; }
.ghk-rstep__options { display: flex; flex-wrap: wrap; gap: 10px; }
.ghk-ropt { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; min-width: 250px; flex: 1 1 250px; max-width: 360px; padding: 10px 16px 10px 10px; border-radius: 18px; border: 1.5px solid var(--line); text-align: left; transition: all 0.35s var(--ease); background: var(--pearl); }
.ghk-ropt img { width: 58px; height: 58px; object-fit: contain; border-radius: 14px; background: var(--white); padding: 3px; }
.ghk-ropt strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.05; }
.ghk-ropt small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.ghk-ropt i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; transition: all 0.3s; }
.ghk-ropt:hover { border-color: rgba(13, 15, 26, 0.35); }
.ghk-ropt.is-selected { border-color: var(--sapphire); background: color-mix(in srgb, var(--sapphire) 5%, white); box-shadow: 0 12px 30px -16px rgba(31, 70, 214, 0.6); }
.ghk-ropt.is-selected i { background: var(--sapphire); border-color: var(--sapphire); color: #fff; }
.ghk-ropt--skip { min-width: 0; flex: 0 0 auto; grid-template-columns: 1fr; padding: 0 20px; min-height: 80px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ghk-ritual__summary { position: sticky; bottom: 18px; z-index: 20; margin-top: 30px; display: flex; align-items: center; gap: 24px; padding: 16px 16px 16px 26px; border-radius: 999px; background: rgba(13, 15, 26, 0.92); backdrop-filter: blur(16px); color: var(--porcelain); box-shadow: 0 30px 60px -20px rgba(13, 15, 26, 0.6); }
.ghk-ritual__thumbs { display: flex; flex: 1; min-width: 0; }
.ghk-ritual__thumbs img { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background: var(--porcelain); border: 2px solid var(--ink); margin-left: -10px; padding: 2px; transition: transform 0.4s var(--ease); }
.ghk-ritual__thumbs img:first-child { margin-left: 0; }
.ghk-ritual__total { display: flex; flex-direction: column; text-align: right; }
.ghk-ritual__total .ghk-eyebrow { margin: 0; font-size: 10px; }
.ghk-ritual__total .ghk-eyebrow::before { display: none; }
.ghk-ritual__total strong { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; }
.ghk-ritual__total small { font-size: 11.5px; color: rgba(246, 242, 236, 0.6); }
.ghk-ritual__summary .ghk-btn { --bg: var(--porcelain); --fg: var(--ink); }

/* ---------- Quiz ---------- */
.ghk-quiz { position: relative; min-height: 100svh; padding: clamp(150px, 16vw, 200px) 0 100px; overflow: hidden; isolation: isolate; text-align: center; }
.ghk-quiz__bg { position: absolute; inset: -5%; z-index: -2; background-size: cover; background-position: center; animation: ghk-drift 30s ease-in-out infinite alternate; }
.ghk-quiz::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 40%, rgba(251, 249, 246, 0.55), rgba(246, 242, 236, 0.92) 70%); }
.ghk-quiz__progress { height: 3px; border-radius: 3px; background: rgba(13, 15, 26, 0.1); margin: 0 auto 60px; max-width: 420px; overflow: hidden; }
.ghk-quiz__progress span { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--sapphire), var(--copper)); transition: width 0.6s var(--ease); }
.ghk-quiz__q { border: 0; margin: 0; padding: 0; display: none; }
.ghk-quiz__q.is-active { display: block; animation: ghk-fadeup 0.7s var(--ease-out); }
@keyframes ghk-fadeup { from { opacity: 0; transform: translateY(24px); } }
.ghk-quiz__q legend { display: block; width: 100%; margin-bottom: 44px; }
.ghk-quiz__q legend .ghk-eyebrow { display: flex; justify-content: center; }
.ghk-quiz__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 800px; margin: 0 auto; }
.ghk-quiz__opts > * { flex: 0 1 240px; }
.ghk-quiz__opt { padding: 24px 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); border: 1.5px solid rgba(255, 255, 255, 0.9); font-family: var(--serif); font-size: 24px; line-height: 1.15; transition: all 0.35s var(--ease); box-shadow: var(--shadow-soft); }
.ghk-quiz__opt:hover { transform: translateY(-4px); border-color: var(--sapphire); color: var(--sapphire); }
.ghk-quiz__back { margin-top: 30px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ghk-quiz__result { animation: ghk-fadeup 0.8s var(--ease-out); }
.ghk-quiz__result .ghk-eyebrow { justify-content: center; }
.ghk-quiz__result .ghk-lead { margin: 22px auto 40px; }
.ghk-quiz__picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; text-align: left; }
.ghk-qpick { display: flex; flex-direction: column; border-radius: 22px; background: var(--white); padding: 14px; box-shadow: var(--shadow-soft); transition: transform 0.4s var(--ease); }
.ghk-qpick:hover { transform: translateY(-4px); }
.ghk-qpick img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.ghk-qpick span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sapphire); }
.ghk-qpick strong { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.05; margin: 4px 0; }
.ghk-qpick em { font-style: normal; font-size: 13px; color: var(--muted); }

/* ---------- About ---------- */
.ghk-about__portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.ghk-lineup { background: var(--midnight); }
.ghk-lineup img { width: 100%; max-height: 640px; object-fit: cover; }
.ghk-value { padding: 40px 32px; border-radius: var(--radius); background: var(--white); text-align: center; }
.ghk-value span { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--copper); }
.ghk-value h3 { font-family: var(--serif); font-size: 32px; margin: 10px 0; }
.ghk-value p { color: var(--muted); font-size: 14.5px; margin: 0; }
.ghk-editorial--duo { padding-top: 0; background: var(--porcelain); }

/* ---------- FAQ & accordion ---------- */
.ghk-faq__grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.ghk-faq__nav { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 4px; }
.ghk-faq__nav a:not(.ghk-btn) { padding: 12px 16px; border-radius: 12px; font-weight: 600; transition: background 0.3s; }
.ghk-faq__nav a:not(.ghk-btn):hover { background: var(--white); }
.ghk-faq__nav .ghk-btn { margin-top: 20px; }
.ghk-faq__group { margin-bottom: 70px; scroll-margin-top: 120px; }
.ghk-faq__group h2 { margin-bottom: 24px; }
.ghk-acc { border-bottom: 1px solid var(--line); }
.ghk-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--serif); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; }
.ghk-acc summary::-webkit-details-marker { display: none; }
.ghk-acc summary span { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform 0.4s var(--ease), background 0.3s, color 0.3s; }
.ghk-acc > div { padding: 0 60px 24px 0; color: #3c3b45; }
.ghk-acc[open] > div { animation: ghk-fadeup 0.5s var(--ease-out); }

/* ---------- Contact & forms ---------- */
.ghk-contact__cards { display: grid; gap: 14px; }
.ghk-contact__cards > div { padding: 28px; border-radius: var(--radius); background: var(--white); }
.ghk-contact__cards svg { color: var(--sapphire); }
.ghk-contact__cards h3 { font-family: var(--serif); font-size: 28px; margin: 12px 0 6px; }
.ghk-contact__cards p { margin: 0; color: var(--muted); font-size: 14.5px; }
.ghk-contact__cards a { color: var(--sapphire); font-weight: 600; }
.ghk-form { padding: clamp(28px, 4vw, 50px); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-soft); display: grid; gap: 22px; }
.ghk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ghk-form label span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ghk-form input, .ghk-form select, .ghk-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(13, 15, 26, 0.2); background: transparent; padding: 10px 0 12px; font-size: 16px; outline: none; transition: border-color 0.3s; border-radius: 0; }
.ghk-form input:focus, .ghk-form select:focus, .ghk-form textarea:focus { border-color: var(--sapphire); }
.ghk-form .ghk-btn { justify-self: start; }
.ghk-notice { padding: 16px 20px; border-radius: 14px; background: #e3ecdf; color: #3e6233; font-weight: 600; }
.ghk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ghk-inline-search { display: flex; gap: 10px; max-width: 560px; margin-top: 30px; }
.ghk-inline-search input { flex: 1; height: 50px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); }

/* ---------- Rewards ---------- */
.ghk-tier { position: relative; padding: 46px 34px 34px; border-radius: var(--radius-lg); background: var(--white); text-align: center; transition: transform 0.5s var(--ease); }
.ghk-tier.is-featured { background: var(--ink); color: var(--porcelain); transform: translateY(-14px); box-shadow: var(--shadow); }
.ghk-tier.is-featured .ghk-checklist li { border-color: var(--line-light); }
.ghk-tier__gem { display: block; width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, var(--c) 50%, color-mix(in srgb, var(--c) 50%, black)); box-shadow: 0 16px 40px -10px var(--c); }
.ghk-tier h3 { font-family: var(--serif); font-size: 44px; line-height: 1; }
.ghk-tier__req { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; margin: 10px 0 0; }
.ghk-tier .ghk-checklist { text-align: left; margin-bottom: 0; }
.ghk-rewards__how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 80px 0 40px; text-align: center; }
.ghk-rewards__how strong { font-family: var(--serif); font-size: 60px; font-weight: 400; color: var(--sapphire); line-height: 1; }
.ghk-rewards__how h3 { font-family: var(--serif); font-size: 32px; margin: 6px 0; }
.ghk-rewards__how p { color: var(--muted); }

/* ---------- Article ---------- */
.ghk-article__head { padding-top: clamp(80px, 9vw, 130px); text-align: center; }
.ghk-article__head .ghk-eyebrow { justify-content: center; }
.ghk-article__meta { margin-top: 24px; color: var(--muted); font-size: 13.5px; }
.ghk-article__hero { margin: 50px auto; }
.ghk-article__hero img { width: 100%; border-radius: var(--radius-lg); max-height: 640px; object-fit: cover; }
.ghk-article__foot { padding-bottom: 60px; }
.ghk-prose { font-size: 18px; line-height: 1.8; color: #2c2b34; }
.ghk-prose h2 { font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); line-height: 1.1; margin: 1.6em 0 0.5em; color: var(--ink); }
.ghk-prose h3 { font-family: var(--serif); font-size: 28px; margin: 1.4em 0 0.4em; }
.ghk-prose a { color: var(--sapphire); text-decoration: underline; text-underline-offset: 3px; }
.ghk-prose ul, .ghk-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.ghk-prose li { margin-bottom: 0.4em; }
.ghk-prose blockquote { margin: 1.8em 0; padding: 0 0 0 28px; border-left: 2px solid var(--copper); font-family: var(--serif); font-size: 30px; line-height: 1.25; font-style: italic; color: var(--ink); }
.ghk-prose blockquote p { margin: 0; }
.ghk-prose img { border-radius: var(--radius); }

/* ---------- 404 ---------- */
.ghk-404 { position: relative; min-height: 100svh; padding: 200px 0 120px; background: var(--midnight); color: var(--porcelain); overflow: hidden; }
.ghk-404 .ghk-wrap { position: relative; z-index: 2; }
.ghk-404 .ghk-muted-light { max-width: 44ch; margin-top: 24px; }
.ghk-404__bottle { position: absolute; right: 8%; bottom: -4%; height: min(80vh, 760px); width: auto; opacity: 0.9; filter: drop-shadow(0 0 60px rgba(31, 70, 214, 0.6)); }

/* ---------- Footer ---------- */
.ghk-footer { background: var(--midnight); color: var(--porcelain); overflow: hidden; }
.ghk-footer__circle { position: relative; padding: clamp(70px, 8vw, 120px) 0; border-bottom: 1px solid var(--line-light); background: radial-gradient(circle at 80% 0%, rgba(31, 70, 214, 0.35), transparent 50%), radial-gradient(circle at 0% 100%, rgba(192, 122, 78, 0.25), transparent 45%); }
.ghk-footer__circle-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.ghk-footer__circle h2 { margin-bottom: 16px; }
.ghk-newsletter { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.ghk-newsletter input[type="email"] { flex: 1 1 260px; height: 58px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(246, 242, 236, 0.25); background: rgba(246, 242, 236, 0.06); color: var(--porcelain); outline: none; font-size: 15px; transition: border-color 0.3s; }
.ghk-newsletter input::placeholder { color: rgba(246, 242, 236, 0.45); }
.ghk-newsletter input:focus { border-color: var(--copper-light); }
.ghk-newsletter .ghk-btn { min-height: 58px; }
.ghk-newsletter__fine { flex-basis: 100%; font-size: 12px; color: rgba(246, 242, 236, 0.45); margin: 4px 0 0 26px; }
.ghk-newsletter__done { font-family: var(--serif); font-size: 28px; color: var(--copper-light); margin: 0; }
.ghk-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-top: 80px; padding-bottom: 40px; }
.ghk-footer__brand p { color: rgba(246, 242, 236, 0.6); font-size: 14px; max-width: 36ch; margin: 22px 0; }
.ghk-logo--light { color: var(--porcelain); }
.ghk-social { display: flex; gap: 8px; }
.ghk-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-light); transition: all 0.3s; }
.ghk-social a:hover { background: var(--porcelain); color: var(--ink); }
.ghk-footer__col .ghk-eyebrow { margin-bottom: 18px; }
.ghk-footer__links { list-style: none; }
.ghk-footer__links a { display: inline-block; padding: 6px 0; color: rgba(246, 242, 236, 0.72); font-size: 14.5px; transition: color 0.3s, transform 0.3s; }
.ghk-footer__links a:hover { color: var(--porcelain); transform: translateX(4px); }
.ghk-footer__giant {
	font-family: var(--serif); font-weight: 400; font-size: clamp(84px, 18.5vw, 300px); line-height: 0.78; letter-spacing: -0.04em;
	text-align: center; white-space: nowrap; user-select: none; padding: 20px 0 0;
	background: linear-gradient(180deg, rgba(246, 242, 236, 0.16), rgba(246, 242, 236, 0.02) 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ghk-footer__giant span { font-style: italic; margin-left: 0.12em; }
.ghk-footer__bottom { display: grid; grid-template-columns: 1fr auto; gap: 10px 30px; padding-top: 26px; padding-bottom: 34px; border-top: 1px solid var(--line-light); font-size: 12.5px; color: rgba(246, 242, 236, 0.5); }
.ghk-footer__bottom p { margin: 0; }
.ghk-footer__disclaimer { grid-column: 1; max-width: 80ch; font-size: 11.5px; }
.ghk-pay { grid-column: 2; grid-row: 1 / 3; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-content: start; }
.ghk-pay span { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line-light); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: rgba(246, 242, 236, 0.6); }

/* ---------- Reveal ---------- */
.ghk-js .ghk-reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.ghk-js .ghk-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.ghk-nav__list { gap: 18px; }
	.ghk-nav__list > li > a { font-size: 10.5px; letter-spacing: 0.12em; }
	.ghk-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ghk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ghk-editorial__copy { grid-column: 5 / 13; }
	.ghk-editorial__b { display: none; }
	.ghk-editorial__bottle { display: none; }
}
@media (max-width: 1024px) {
	:root { --header-h: 70px; }
	.ghk-header__inner { grid-template-columns: auto 1fr auto; }
	.ghk-header .ghk-header__burger { display: inline-flex; }
	.ghk-nav { display: none; }
	.ghk-logo { justify-self: center; }
	.ghk-logo__mark { font-size: 28px; }
	.ghk-hero__grid, .ghk-spotlight__grid, .ghk-orbit__grid, .ghk-sciteaser__grid, .ghk-split2, .ghk-footer__circle-inner { grid-template-columns: 1fr; }
	.ghk-hero { padding-top: calc(var(--header-h) + 60px); }
	.ghk-hero__visual { max-width: 520px; order: -1; margin-bottom: -30px; }
	.ghk-hero__copy { text-align: left; }
	.ghk-spotlight.is-reverse .ghk-spotlight__media { order: 0; }
	.ghk-cats__grid, .ghk-grid--3, .ghk-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ghk-stats__grid, .ghk-promise__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.ghk-footer__grid { grid-template-columns: 1fr 1fr; }
	.ghk-faq__grid { grid-template-columns: 1fr; }
	.ghk-faq__nav { position: static; flex-direction: row; flex-wrap: wrap; }
	.ghk-rstep { grid-template-columns: 1fr; }
	.ghk-htimeline { grid-template-columns: 1fr; padding: 0 0 0 34px; }
	.ghk-htimeline::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--copper), var(--sapphire)); }
	.ghk-htimeline li::before { left: -34px; top: 10px; }
	.ghk-pagehero--light.has-image { min-height: 0; display: block; }
	.ghk-pagehero--light.has-image .ghk-pagehero__inner { grid-template-columns: 1fr; }
	.ghk-pagehero--light.has-image .ghk-pagehero__bg { position: relative; inset: auto; width: auto; height: 340px; margin: 40px var(--gutter) 0; right: auto; border-radius: 300px 300px var(--radius-lg) var(--radius-lg); order: 2; }
	.ghk-pagehero--light.has-image { display: flex; flex-direction: column-reverse; }
	.ghk-ings__grid { grid-template-columns: 1fr; }
	.ghk-formula__cols { grid-template-columns: 1fr; padding-left: 28px; }
	.ghk-tier.is-featured { transform: none; }
	.ghk-orbit__stage { max-width: 520px; }
}
@media (max-width: 760px) {
	:root { --announce-h: 34px; }
	.ghk-hide-sm { display: none !important; }
	.admin-bar .ghk-header, .ghk-transparent-header.admin-bar .ghk-header.is-scrolled { top: 0; }
	.ghk-transparent-header.admin-bar .ghk-header { top: var(--announce-h); }
	.ghk-hscroll { display: grid; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; }
	.ghk-hscroll::-webkit-scrollbar { display: none; }
	.ghk-hscroll > * { scroll-snap-align: start; }
	.ghk-steps.ghk-hscroll { grid-auto-columns: 62%; }
	.ghk-heading-row { display: block; }
	.ghk-heading-row > .ghk-link { margin: -20px 0 30px; }
	.ghk-hero__title { font-size: clamp(46px, 13vw, 70px); }
	.ghk-hero__visual { max-width: 380px; margin-bottom: -10px; }
	.ghk-glasstag { padding: 8px 12px 8px 10px; font-size: 9.5px; }
	.ghk-glasstag strong { font-size: 22px; }
	.ghk-glasstag--a { left: -4%; }
	.ghk-glasstag--b { right: -4%; }
	.ghk-hero__foot { display: none; }
	.ghk-hero { padding-bottom: 70px; }
	.ghk-actives { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
	.ghk-actives__item { padding: 14px 12px; }
	.ghk-actives__item strong { font-size: 28px; }
	.ghk-timeline { grid-template-columns: 1fr 1fr; row-gap: 30px; }
	.ghk-timeline::before, .ghk-timeline li::before { display: none; }
	.ghk-cats__grid { grid-auto-columns: 80%; }
	.ghk-cat { min-height: 260px; }
	.ghk-editorial__grid { grid-template-columns: 1fr; }
	.ghk-editorial__a, .ghk-editorial__copy, .ghk-editorial__c { grid-column: 1; grid-row: auto; }
	.ghk-editorial__copy { padding: 10px 0; }
	.ghk-duo { grid-template-columns: 1fr 1fr; }
	.ghk-duo figure:nth-child(2) { grid-column: 1 / -1; order: -1; }
	.ghk-ugc__grid { grid-template-columns: repeat(3, 1fr); }
	.ghk-stats__grid { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
	.ghk-stat { padding-left: 14px; }
	.ghk-stat strong { font-size: 58px; }
	.ghk-promise__grid { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
	.ghk-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-top: 60px; }
	.ghk-footer__brand { grid-column: 1 / -1; }
	.ghk-footer__bottom { grid-template-columns: 1fr; }
	.ghk-pay { grid-column: 1; grid-row: auto; justify-content: flex-start; }
	.ghk-grid--3, .ghk-journal-grid { grid-template-columns: 1fr; }
	.ghk-journal-grid.ghk-hscroll { grid-auto-columns: 86%; }
	.ghk-grid--4 { grid-template-columns: 1fr 1fr; gap: 14px; }
	.ghk-card__title { font-size: 22px; }
	.ghk-card__chips .ghk-chip:nth-child(2) { display: none; }
	.ghk-form__row { grid-template-columns: 1fr; }
	.ghk-ritual__summary { border-radius: 24px; flex-wrap: wrap; gap: 12px; padding: 14px; }
	.ghk-ritual__summary .ghk-btn { width: 100%; }
	.ghk-ritual__total { text-align: left; }
	.ghk-ropt { min-width: 100%; max-width: none; }
	.ghk-formula__head { grid-template-columns: 52px 1fr auto; gap: 12px; }
	.ghk-formula__head img { width: 52px; height: 52px; }
	.ghk-formula__no, .ghk-formula__meta { display: none; }
	.ghk-formula__name { font-size: 22px; }
	.ghk-neverlist { grid-template-columns: 1fr; }
	.ghk-rewards__how { grid-template-columns: 1fr; margin-top: 50px; }
	.ghk-ings__search { min-width: 0; width: 100%; }
	.ghk-orbit__node span { padding: 7px 11px; font-size: 10px; }
	.ghk-acc > div { padding-right: 0; }
	.ghk-quiz__opts > * { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.ghk-js .ghk-reveal { opacity: 1; transform: none; }
	.ghk-split .w > span { transform: none; }
}

body:not(.ghk-transparent-header) .ghk-quiz { padding-top: clamp(60px, 7vw, 100px); min-height: calc(100svh - var(--header-h) - var(--announce-h)); }

/* Heading → copy rhythm */
.ghk-display + .ghk-lead, .ghk-display + p, .ghk-display + .ghk-checklist { margin-top: 24px; }
/* Keep gradient italic accents visible after the word-split animation */
.ghk-split em .w > span { background: inherit; -webkit-background-clip: text; background-clip: text; color: inherit; padding-right: 0.06em; }