/* ============================================================
   About page — ports gastronome-about (1).html
   Scoped to .gn-about so reveal primitives + section styles
   don't leak into other templates that use bare class names.
   ============================================================ */

.gn-about {
	--ease: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-sym: cubic-bezier(0.65, 0, 0.35, 1);
	--border-subtle: rgba(255, 255, 255, 0.12);
	background: #000;
	color: #fff;
}

/* ---------- Reveal primitives ----------
 *
 * Clip-reveal animations + the JS line-splitter that produced `.mask-line`
 * wrappers have both been removed. Headings render as plain text and wrap
 * naturally. The hero-title noise text-fill below now targets `.hero-title`
 * directly instead of a `.mask-line-inner` descendant.
 */

.gn-about .reveal-fade { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.gn-about .reveal-fade.is-visible { opacity: 1; transform: translateY(0); }

.gn-about .reveal-rule { transform-origin: left; }
.gn-about .reveal-img { /* per-section override */ }

/* Hero title noise + gradient text fill — applied directly to `.hero-title`
 * since the JS line-splitter that produced `.mask-line-inner` wrappers is
 * gone. The legacy `.text-noise` class is kept for any hand-authored markup
 * that still relies on it. */
.gn-about .hero-title,
.gn-about .text-noise {
	background-image:
		url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.25"/%3E%3C/svg%3E'),
		linear-gradient(#FFFFFF, #FFFFFF);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- HERO — editorial split ---------- */
.gn-about .hero {
	position: relative;
	min-height: 100vh; min-height: 100svh;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	overflow: hidden;
}
.gn-about .hero-type {
	position: relative;
	padding: clamp(120px, 14vh, 160px) clamp(40px, 5vw, 80px) 56px clamp(40px, 5vw, 80px);
	display: flex; flex-direction: column;
	justify-content: space-between;
	min-height: 100svh;
}
.gn-about .hero-marks {
	display: flex; justify-content: flex-start; align-items: flex-start;
	gap: clamp(32px, 6vw, 56px);
	margin-bottom: clamp(40px, 8vh, 80px);
}
.gn-about .hero-mark {
	display: flex; flex-direction: column; gap: 6px;
	font-family: var(--font-body, 'Outfit', sans-serif);
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
	color: #666;
	text-align: left;
}
.gn-about .hero-mark strong { color: rgba(255,255,255,0.9); font-weight: 500; }
/* Both marks left-aligned — `.hero-mark-right` is just a structural alias
 * for the second mark now, no right-alignment applied. */
.gn-about .hero-mark-right { text-align: left; }

.gn-about .hero-block {
	display: flex; flex-direction: column;
	justify-content: center; flex: 1;
	max-width: 900px;
}
.gn-about .hero-title {
	font-family: var(--font-display, 'Oswald', sans-serif);
	font-size: clamp(36px, 5.8vw, 88px);
	line-height: 0.95; font-weight: 700; letter-spacing: 0.005em;
	margin-bottom: 40px;
}
.gn-about .hero-rule {
	width: 64px; height: 1px; background: rgba(255,255,255,0.25);
	margin-bottom: 32px;
	transform: scaleX(0);
	transition: transform 1s var(--ease) 0.9s;
}
.gn-about .hero-rule.is-visible { transform: scaleX(1); }
.gn-about .hero-lede {
	font-family: var(--font-body, 'Outfit', sans-serif); font-weight: 300;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.65; color: rgba(255,255,255,0.65);
	max-width: 480px;
}

.gn-about .hero-foot {
	display: flex; justify-content: space-between; align-items: flex-end;
	margin-top: clamp(40px, 8vh, 64px);
	gap: 24px;
}
.gn-about .hero-scroll {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--font-body, 'Outfit', sans-serif); font-size: 11px; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.22em;
	color: rgba(255,255,255,0.5);
}
.gn-about .hero-scroll-bar {
	width: 56px; height: 1px;
	background: rgba(255,255,255,0.15);
	position: relative; overflow: hidden;
}
.gn-about .hero-scroll-bar::before {
	content: ''; position: absolute; top: 0; left: -24px;
	width: 24px; height: 1px; background: #fff;
	animation: gnAboutHeroScroll 2.6s var(--ease-sym) infinite;
}
@keyframes gnAboutHeroScroll {
	0%   { left: -24px; }
	100% { left: 56px; }
}
.gn-about .hero-issue {
	font-family: var(--font-body, 'Outfit', sans-serif); font-size: 11px; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.25em;
	color: rgba(255,255,255,0.35);
	text-align: right;
}
.gn-about .hero-issue strong { color: rgba(255,255,255,0.75); font-weight: 500; }

.gn-about .hero-image {
	position: relative; overflow: hidden;
	border-left: 1px solid var(--border-subtle);
}
.gn-about .hero-image img {
	width: 100%; height: 100%; object-fit: cover;
	filter: brightness(0.65) saturate(0.9);
	transform: scale(1.08);
	will-change: transform;
	animation: gnAboutHeroKenBurns 16s var(--ease) 0.5s forwards;
}
@keyframes gnAboutHeroKenBurns { to { transform: scale(1); } }
.gn-about .hero-image::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);
	pointer-events: none;
}
/* `Photographed in Tbilisi` caption removed per editorial direction. */
.gn-about .hero-caption { display: none; }

@media (max-width: 1024px) {
	.gn-about .hero { grid-template-columns: 1fr; min-height: auto; }
	.gn-about .hero-type { order: 2; padding: 64px var(--space-page, 32px) 56px; min-height: 0; }
	.gn-about .hero-image { order: 1; height: 60vh; height: 60svh; min-height: 360px; border-left: none; border-bottom: 1px solid var(--border-subtle); }
	.gn-about .hero-caption { writing-mode: horizontal-tb; transform: none; bottom: 20px; right: 20px; }
	.gn-about .hero-marks { margin-bottom: 40px; }
	.gn-about .hero-foot { margin-top: 48px; }
}
@media (max-width: 480px) {
	/* Hero marks stay horizontal + left-aligned on small phones. */
	.gn-about .hero-marks { flex-direction: row; gap: 24px; }
	.gn-about .hero-mark-right { text-align: left; }
}

/* ---------- MANIFESTO ---------- */
.gn-about .manifesto { padding: clamp(120px, 18vh, 200px) var(--space-page, 32px); }
.gn-about .manifesto-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.gn-about .manifesto-overline {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
	color: #666; margin-bottom: 56px; display: block;
}
.gn-about .manifesto-text {
	font-family: var(--font-body, 'Outfit', sans-serif); font-weight: 300;
	font-size: clamp(24px, 3.4vw, 44px); line-height: 1.4;
	color: rgba(255,255,255,0.92);
}
.gn-about .manifesto-text .mask-line { padding-bottom: 6px; }
.gn-about .manifesto-rule {
	width: 1px; height: 64px; background: rgba(255,255,255,0.15);
	margin: 64px auto 0; transform-origin: top;
	transform: scaleY(0); transition: transform 1.2s var(--ease) 0.6s;
}
.gn-about .manifesto-rule.is-visible { transform: scaleY(1); }

/* ---------- ORIGIN — sticky split ---------- */
.gn-about .origin { position: relative; }
.gn-about .origin-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; }

.gn-about .origin-image {
	position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.gn-about .origin-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: brightness(0.7) saturate(0.9);
	transform: scale(1.05); will-change: transform;
	transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.gn-about .origin-image.is-visible img { transform: scale(1); filter: brightness(0.8) saturate(1); }
.gn-about .origin-image::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%);
}

.gn-about .origin-content {
	padding: clamp(120px, 18vh, 180px) clamp(48px, 6vw, 96px) clamp(120px, 18vh, 180px) clamp(48px, 5vw, 80px);
	display: flex; flex-direction: column; justify-content: center;
}
.gn-about .origin-overline {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
	color: #666; margin-bottom: 24px;
}
.gn-about .origin-title {
	font-family: var(--font-display, 'Oswald', sans-serif);
	font-size: clamp(32px, 3.8vw, 56px);
	font-weight: 700; line-height: 1.05;
	letter-spacing: 0.01em; margin-bottom: 40px;
}
.gn-about .origin-divider { width: 40px; height: 1px; background: rgba(255,255,255,0.2); margin-bottom: 40px; }
.gn-about .origin-body p {
	font-family: var(--font-body, 'Outfit', sans-serif); font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.75; color: rgba(255,255,255,0.65); font-weight: 300;
	margin-bottom: 24px;
}
.gn-about .origin-body p:last-child { margin-bottom: 0; }
.gn-about .origin-body strong { color: #fff; font-weight: 500; }

@media (max-width: 1024px) {
	.gn-about .origin-grid { grid-template-columns: 1fr; }
	.gn-about .origin-image { position: relative; height: 70vh; height: 70svh; }
	.gn-about .origin-content { padding: 80px var(--space-page, 32px); }
}

/* ---------- VISION — pull statement + counter ---------- */
.gn-about .vision { padding: clamp(120px, 18vh, 200px) var(--space-page, 32px); border-top: 1px solid var(--border-subtle); }
.gn-about .vision-inner { max-width: 1280px; margin: 0 auto; }
.gn-about .vision-overline {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
	color: #666; margin-bottom: 48px; display: block;
}
.gn-about .vision-statement {
	font-family: var(--font-body, 'Outfit', sans-serif); font-weight: 300;
	font-size: clamp(28px, 3.6vw, 48px); line-height: 1.35;
	color: #fff; max-width: 1080px;
}

.gn-about .vision-stats {
	margin-top: clamp(80px, 10vh, 120px);
	display: grid; grid-template-columns: auto 1fr;
	gap: clamp(40px, 6vw, 96px); align-items: end;
	border-top: 1px solid var(--border-subtle); padding-top: 56px;
}
.gn-about .vision-stat-num {
	font-family: var(--font-display, 'Oswald', sans-serif); font-weight: 700;
	font-size: clamp(60px, 8.5vw, 124px); line-height: 0.85;
	letter-spacing: -0.01em; color: #fff;
}
.gn-about .vision-stat-num .suffix { color: #555; }
.gn-about .vision-stat-text { max-width: 420px; padding-bottom: 14px; }
.gn-about .vision-stat-label {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em;
	color: #666; margin-bottom: 16px; display: block;
}
.gn-about .vision-stat-desc {
	font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.6);
	font-weight: 300;
}
@media (max-width: 767px) {
	.gn-about .vision-stats { grid-template-columns: 1fr; gap: 28px; }
	.gn-about .vision-stat-text { padding-bottom: 0; }
}

/* ---------- VALUES — 4-column editorial grid ---------- */
.gn-about .values { padding: clamp(100px, 14vh, 160px) var(--space-page, 32px); border-top: 1px solid var(--border-subtle); }
.gn-about .values-header {
	max-width: 1280px; margin: 0 auto 72px;
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 48px;
}
.gn-about .values-overline {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
	color: #666; margin-bottom: 16px; display: block;
}
.gn-about .values-title {
	font-family: var(--font-display, 'Oswald', sans-serif); font-weight: 700;
	font-size: clamp(32px, 4vw, 56px);
	line-height: 1.05; letter-spacing: 0.01em;
}
.gn-about .values-aside {
	font-family: var(--font-body, 'Outfit', sans-serif); font-size: 14px; line-height: 1.7;
	color: rgba(255,255,255,0.5); font-weight: 300; max-width: 320px;
	padding-bottom: 8px;
}

.gn-about .values-grid {
	max-width: 1280px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--border-subtle);
	border-top: 1px solid var(--border-subtle);
	/* Closing bottom border removed — the next section (.history) already
	 * draws its own top border, and the values cards' shared grid lines
	 * already give each card its visual frame. Two stacked dividers read
	 * as redundant. */
}
.gn-about .value {
	background: #000; padding: 48px 32px 56px;
	display: flex; flex-direction: column;
}
.gn-about .value-num {
	font-size: 11px; letter-spacing: 0.22em; color: #555;
	margin-bottom: 32px;
}
/* Value-mark (◆) removed entirely per editorial direction — the numbered
 * label + title + description carry enough structure on their own. */
.gn-about .value-mark { display: none; }
.gn-about .value-title {
	font-family: var(--font-display, 'Oswald', sans-serif); font-weight: 700;
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.1; margin-bottom: 16px;
}
.gn-about .value-desc {
	font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.55);
	font-weight: 300;
}
@media (max-width: 1024px) { .gn-about .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  {
	.gn-about .values-grid { grid-template-columns: 1fr; }
	.gn-about .values-header { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
	.gn-about .value { padding: 36px 24px 40px; }
}

/* ---------- HISTORY — sticky giant year + milestones ---------- */
.gn-about .history { padding-top: clamp(100px, 14vh, 160px); border-top: 1px solid var(--border-subtle); }
.gn-about .history-header {
	max-width: 1280px; margin: 0 auto;
	/* Tightened from clamp(60px, 8vh, 96px) — the original padding was
	 * sized for editorial breathing room but combined with the sticky
	 * .history-pin centering the giant year vertically across 100svh,
	 * the first milestone visually landed almost a full viewport below
	 * the title. Shrink this so the year + first milestone enter view
	 * close to the title. */
	padding: 0 var(--space-page, 32px) clamp(24px, 3.5vh, 40px);
	text-align: center;
}
.gn-about .history-overline {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
	color: #666; margin-bottom: 16px; display: block;
}
.gn-about .history-title {
	font-family: var(--font-display, 'Oswald', sans-serif); font-weight: 700;
	font-size: clamp(32px, 4vw, 56px);
	line-height: 1.05; letter-spacing: 0.01em;
}

.gn-about .history-track {
	max-width: 1280px; margin: 0 auto;
	padding: 0 var(--space-page, 32px) clamp(120px, 18vh, 200px);
	display: grid; grid-template-columns: 1fr 1.1fr;
	gap: clamp(48px, 7vw, 120px);
	position: relative;
}

.gn-about .history-pin {
	position: sticky; top: 0; height: 100vh; height: 100svh;
	display: flex; align-items: flex-start; justify-content: flex-start;
	/* `padding-top: 12vh` keeps the giant year visually anchored just below
	 * the nav at desktop sizes — it used to be vertically centred in the
	 * 100svh sticky, which read as ~50vh of empty space between the
	 * `SIX YEARS.` title and the first milestone. */
	padding-top: clamp(56px, 12vh, 120px);
}
.gn-about .history-pin-inner { position: relative; width: 100%; }
.gn-about .history-pin-label {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
	color: #555; margin-bottom: 24px; display: block;
}
.gn-about .history-year-stack {
	position: relative; height: clamp(140px, 16vw, 220px);
	overflow: hidden;
}
.gn-about .history-year {
	position: absolute; inset: 0;
	font-family: var(--font-display, 'Oswald', sans-serif); font-weight: 700;
	font-size: clamp(120px, 16vw, 220px); line-height: 0.9;
	letter-spacing: -0.01em; color: #fff;
	opacity: 0; transform: translateY(40%);
	transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}
.gn-about .history-year.active { opacity: 1; transform: translateY(0); }
.gn-about .history-year.past { opacity: 0; transform: translateY(-40%); }

.gn-about .history-progress {
	margin-top: 40px; height: 1px; background: rgba(255,255,255,0.08);
	position: relative; overflow: hidden;
}
.gn-about .history-progress-fill {
	position: absolute; inset: 0 100% 0 0; background: #fff;
	transition: right 0.5s var(--ease);
}
.gn-about .history-counter {
	margin-top: 20px;
	font-family: var(--font-body, 'Outfit', sans-serif); font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase; color: #666;
}
.gn-about .history-counter span { color: #fff; }

.gn-about .history-stream {
	display: flex; flex-direction: column;
	gap: clamp(40px, 6vh, 80px);
	padding-top: clamp(120px, 16vh, 180px);
	padding-bottom: clamp(120px, 16vh, 180px);
}
.gn-about .milestone {
	position: relative;
	padding: 32px 0;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.gn-about .milestone:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
/* No left-line decoration — milestones read as a clean stacked list. */

.gn-about .milestone-year {
	font-family: var(--font-body, 'Outfit', sans-serif); font-size: 12px;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: #666; margin-bottom: 12px;
}
.gn-about .milestone-title {
	font-family: var(--font-display, 'Oswald', sans-serif); font-weight: 700;
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.1; letter-spacing: 0.01em; margin-bottom: 14px;
}
.gn-about .milestone-desc {
	font-size: 15px; line-height: 1.65;
	color: rgba(255,255,255,0.55); font-weight: 300; max-width: 460px;
}

@media (max-width: 1024px) {
	.gn-about .history-track { grid-template-columns: 1fr; gap: 48px; }
	.gn-about .history-pin { position: relative; height: auto; }
	.gn-about .history-stream { padding-top: 0; padding-bottom: 0; }
	.gn-about .history-year-stack { height: clamp(80px, 18vw, 120px); }
	.gn-about .history-year { font-size: clamp(72px, 18vw, 120px); }
}
/* (No mobile padding override — milestones stack naturally; left-line
 * decoration removed entirely above.) */

/* ---------- CINEMATIC CLOSE ---------- */
.gn-about .cine {
	position: relative;
	height: 90vh; height: 90svh; min-height: 560px;
	overflow: hidden; border-top: 1px solid var(--border-subtle);
}
.gn-about .cine-inner { position: absolute; inset: -15%; width: 130%; height: 130%; will-change: transform; }
.gn-about .cine-inner img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.gn-about .cine-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.75) 100%);
}
.gn-about .cine-content {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center;
	padding: 0 var(--space-page, 32px); z-index: 2;
}
.gn-about .cine-overline {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
	color: rgba(255,255,255,0.55); margin-bottom: 32px; display: block;
}
.gn-about .cine-quote {
	font-family: var(--font-body, 'Outfit', sans-serif); font-weight: 300;
	font-size: clamp(22px, 3vw, 40px); line-height: 1.4;
	color: rgba(255,255,255,0.9); max-width: 880px;
}
.gn-about .cine-cta {
	margin-top: 56px;
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--font-body, 'Outfit', sans-serif); font-size: 11px; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: #fff; text-decoration: none;
	padding: 16px 40px; border: 1px solid rgba(255,255,255,0.25);
	transition: all 0.5s var(--ease);
}
.gn-about .cine-cta:hover { background: #fff; color: #000; border-color: #fff; letter-spacing: 0.28em; }

/* ═════════════════════════════════════════════════════════════════════════
 *  Mobile responsiveness pass — about page
 *
 *  Scoped to ≤767px. Tightens padding, scales typography, swaps vh→svh
 *  on every full-viewport element (iOS URL-bar collapse), strips hover-only
 *  visual cues that don't apply on touch, and disables one scroll-driven
 *  parallax JS callback via the global `html.is-touch` flag set by boot.js.
 *
 *  Section-by-section coverage:
 *   1. Hero          — svh on hero-image, smaller padding + type
 *   2. Manifesto     — tighter padding + smaller body type
 *   3. Origin        — svh on sticky image, reduced padding
 *   4. Vision        — smaller stat number, stack already handled at 767px
 *   5. Values        — tighter card padding (hover decoration removed above)
 *   6. History       — smaller year, tighter top + bottom paddings
 *   7. Cine close    — svh on container, smaller quote + CTA
 *   8. Touch defenses — tap-highlight transparent on links/buttons
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

	/* HERO */
	.gn-about .hero { min-height: auto; }
	.gn-about .hero-type {
		padding: 56px 20px 48px;
	}
	.gn-about .hero-marks { margin-bottom: 32px; gap: 16px; }
	.gn-about .hero-mark { font-size: 10px; letter-spacing: 0.18em; }
	.gn-about .hero-title {
		font-size: clamp(32px, 9vw, 56px);
		line-height: 1; margin-bottom: 28px;
	}
	.gn-about .hero-lede { font-size: 14px; line-height: 1.6; }
	/* `Scroll` indicator + `Gastronome · Edition 2026` are decorative
	 * chrome that crowds the small hero on mobile — hide both. */
	.gn-about .hero-foot { display: none; }
	.gn-about .hero-image {
		height: 50vh; height: 50svh; min-height: 320px;
	}
	.gn-about .hero-caption { font-size: 9px; bottom: 14px; right: 14px; }
	.gn-about .hero-rule { width: 48px; margin-bottom: 24px; }

	/* MANIFESTO */
	.gn-about .manifesto { padding: clamp(64px, 12vh, 96px) 20px; }
	.gn-about .manifesto-overline { margin-bottom: 32px; font-size: 10px; }
	.gn-about .manifesto-text { font-size: clamp(18px, 5vw, 26px); line-height: 1.4; }
	.gn-about .manifesto-rule { height: 40px; margin-top: 40px; }

	/* ORIGIN */
	.gn-about .origin-image {
		height: 55vh; height: 55svh; min-height: 320px;
	}
	.gn-about .origin-content {
		padding: 56px 20px 64px;
	}
	.gn-about .origin-overline { margin-bottom: 18px; font-size: 10px; }
	.gn-about .origin-title {
		font-size: clamp(26px, 7.5vw, 40px);
		margin-bottom: 28px; line-height: 1.1;
	}
	.gn-about .origin-divider { margin-bottom: 28px; width: 32px; }
	.gn-about .origin-body p { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }

	/* VISION */
	.gn-about .vision { padding: clamp(64px, 12vh, 96px) 20px; }
	.gn-about .vision-overline { margin-bottom: 32px; font-size: 10px; }
	.gn-about .vision-statement { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.4; }
	.gn-about .vision-stats {
		margin-top: clamp(48px, 7vh, 72px);
		padding-top: 32px;
	}
	.gn-about .vision-stat-num { font-size: clamp(56px, 18vw, 96px); }
	.gn-about .vision-stat-label { font-size: 10px; margin-bottom: 12px; }
	.gn-about .vision-stat-desc { font-size: 13px; line-height: 1.55; }

	/* VALUES (1-col layout already at 767px; just tighten card body) */
	.gn-about .values { padding: clamp(64px, 12vh, 96px) 20px; }
	.gn-about .values-header { margin-bottom: 32px; }
	.gn-about .values-overline { margin-bottom: 12px; font-size: 10px; }
	.gn-about .values-title { font-size: clamp(26px, 7.5vw, 40px); line-height: 1.05; }
	.gn-about .values-aside { font-size: 13px; line-height: 1.6; }
	.gn-about .value { padding: 28px 20px 32px; }
	.gn-about .value-num { margin-bottom: 20px; font-size: 10px; }
	.gn-about .value-title { font-size: 18px; margin-bottom: 12px; }
	.gn-about .value-desc { font-size: 13px; line-height: 1.6; }

	/* HISTORY */
	.gn-about .history { padding-top: clamp(56px, 10vh, 88px); }
	.gn-about .history-header { padding: 0 20px clamp(20px, 3vh, 32px); }
	.gn-about .history-overline { margin-bottom: 12px; font-size: 10px; }
	.gn-about .history-title { font-size: clamp(28px, 8vw, 44px); }
	.gn-about .history-track {
		padding: 0 20px clamp(56px, 10vh, 96px);
		gap: 28px;
	}
	.gn-about .history-pin { padding-top: 16px; }
	.gn-about .history-pin-label { font-size: 10px; margin-bottom: 14px; }
	.gn-about .history-year-stack { height: clamp(64px, 16vw, 88px); }
	.gn-about .history-year { font-size: clamp(60px, 16vw, 88px); line-height: 0.9; }
	.gn-about .history-progress { margin-top: 24px; }
	.gn-about .history-counter { margin-top: 14px; font-size: 10px; }
	.gn-about .history-stream { gap: clamp(24px, 4vh, 36px); }
	.gn-about .milestone { padding: 24px 0; }
	.gn-about .milestone-year { margin-bottom: 8px; font-size: 11px; }
	.gn-about .milestone-title { font-size: clamp(19px, 5.5vw, 24px); margin-bottom: 12px; line-height: 1.15; }
	.gn-about .milestone-desc { font-size: 14px; line-height: 1.6; }

	/* CINE close */
	.gn-about .cine {
		height: 80vh; height: 80svh; min-height: 480px;
	}
	.gn-about .cine-content { padding: 0 20px; }
	.gn-about .cine-overline { margin-bottom: 24px; font-size: 10px; }
	.gn-about .cine-quote { font-size: clamp(18px, 5.5vw, 28px); line-height: 1.4; }
	.gn-about .cine-cta {
		margin-top: 36px;
		padding: 14px 32px; font-size: 10px;
	}

	/* Touch defenses */
	.gn-about a,
	.gn-about button { -webkit-tap-highlight-color: transparent; }

	/* Touch path: disable parallax inner-image scaling, kill will-change */
	.gn-about .cine-inner { will-change: auto; }
	.gn-about .origin-image img { will-change: auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.gn-about *, .gn-about *::before, .gn-about *::after {
		animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
	}
	.gn-about .reveal-fade { opacity: 1 !important; transform: none !important; }
}