/* ==========================================================================
   OCEAN GALLERIES — "A Living Canvas"
   Core design system + components. Shared by the WordPress child theme and
   the static prototype (prototype/index.html links this same file).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
	/* Two-colour system: the logo's royal blue + white. Every other value is a shade or tint of that blue. */
	--og-royal: #02409e;          /* sampled from the header logo (cover.png) */
	--og-royal-deep: #01307a;     /* royal, darker — hover / pressed */
	--og-royal-soft: #e6edf8;     /* royal tint */
	--og-midnight: #021f4e;       /* royal, deepest shade — immersive sections */
	--og-midnight-2: #03296a;
	--og-ivory: #f3f6fb;          /* white with a breath of royal — base */
	--og-paper: #ffffff;
	--og-charcoal: #031b44;       /* text: royal ink, 15:1 on white */
	--og-stone: #4a5f86;          /* secondary text: royal grey, 6.3:1 on white */
	--og-line: #d6e0f0;
	--og-champagne: #ffffff;      /* accents on blue are white */
	--og-on-dark: #ffffff;
	--og-on-dark-muted: #c5d3ec;  /* 9:1 on midnight */
	--og-serif: "Syne", "Segoe UI", system-ui, sans-serif;            /* display */
	--og-accent: "Instrument Serif", "Times New Roman", serif;   /* italic accents */
	--og-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--og-fs-display: clamp(3.1rem, 1.6rem + 7.4vw, 9.5rem);
	--og-fs-h2: clamp(2.3rem, 1.5rem + 3.6vw, 5rem);
	--og-fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	--og-fs-lead: clamp(1.08rem, 1rem + .35vw, 1.3rem);
	--og-fs-body: clamp(1rem, .97rem + .12vw, 1.075rem);
	--og-fs-small: .875rem;
	--og-fs-label: .72rem;

	--og-gutter: clamp(16px, 4vw, 56px);
	--og-max: 1440px;
	--og-section: clamp(4.5rem, 3rem + 7vw, 10rem);
	--og-header-h: 72px;

	--og-ease: cubic-bezier(.77, 0, .18, 1);      /* tide */
	--og-ease-out: cubic-bezier(.16, 1, .3, 1);   /* drift */
	--og-dur: .9s;
}
@media (max-width: 767px) { :root { --og-header-h: 64px; } }

/* ---------- 2. Base ------------------------------------------------------ */
html:has(body.og-site) { background: var(--og-ivory); }
body.og-site {
	margin: 0;
	color: var(--og-charcoal);
	font-family: var(--og-sans);
	font-size: var(--og-fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
:where(.og-site) *, :where(.og-site) *::before, :where(.og-site) *::after { box-sizing: border-box; }
:where(.og-main, .og-header, .og-footer, .og-mnav, .og-intro) img { max-width: 100%; height: auto; display: block; }
:where(.og-main, .og-header, .og-footer, .og-mnav, .og-loader) a { color: inherit; }
.og-site :focus-visible { outline: 2px solid var(--og-royal); outline-offset: 3px; border-radius: 2px; }
.og-dark :focus-visible, .og-royal :focus-visible { outline-color: var(--og-champagne); }
.og-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.og-skip-link { position: fixed; left: 12px; top: -60px; z-index: 10001; background: var(--og-paper); color: var(--og-royal); padding: .7rem 1rem; font-weight: 600; text-decoration: none; transition: top .2s; }
.og-skip-link:focus { top: 12px; }

.og-container { width: 100%; max-width: var(--og-max); margin-inline: auto; padding-inline: var(--og-gutter); }
.og-section { padding-block: var(--og-section); position: relative; }
.og-light { background: var(--og-ivory); color: var(--og-charcoal); }
.og-paper { background: var(--og-paper); color: var(--og-charcoal); }
.og-dark { background: var(--og-midnight); color: var(--og-on-dark); }
.og-royal { background: var(--og-royal); color: #fff; }

/* Typography */
.og-display, .og-h2, .og-h3 { font-family: var(--og-serif); font-weight: 400; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.og-display { font-size: var(--og-fs-display); line-height: .9; font-weight: 300; }
.og-h2 { font-size: var(--og-fs-h2); line-height: 1; }
.og-h3 { font-size: var(--og-fs-h3); line-height: 1.1; }
.og-display em, .og-h2 em, .og-h3 em { font-style: italic; font-weight: 400; }
.og-lead { font-size: var(--og-fs-lead); line-height: 1.6; max-width: 40ch; margin: 0; text-wrap: pretty; }
.og-prose { max-width: 62ch; }
.og-prose p { margin: 0 0 1.1em; }
.og-label {
	display: inline-flex; align-items: center; gap: .75em;
	font-family: var(--og-sans); font-size: var(--og-fs-label); font-weight: 600;
	letter-spacing: .22em; text-transform: uppercase; line-height: 1.4; margin: 0;
	color: var(--og-stone);
}
.og-dark .og-label { color: var(--og-champagne); }
.og-royal .og-label { color: #d7e2f5; }
.og-label--rule::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; opacity: .7; }

/* Buttons & links */
.og-btn {
	--_bg: var(--og-royal); --_fg: #fff; --_bd: var(--og-royal);
	display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
	min-height: 52px; padding: .9rem 1.6rem; border: 1px solid var(--_bd); border-radius: 999px;
	background: var(--_bg); color: var(--_fg); font: 600 .9rem/1 var(--og-sans); letter-spacing: .04em;
	text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
	transition: color .45s var(--og-ease), border-color .45s var(--og-ease);
}
.og-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--_hover, var(--og-royal-deep)); transform: translateY(101%); border-radius: inherit; transition: transform .55s var(--og-ease); }
.og-btn:hover::before, .og-btn:focus-visible::before { transform: translateY(0); }
.og-btn--light { --_bg: var(--og-on-dark); --_fg: var(--og-midnight); --_bd: var(--og-on-dark); --_hover: #fff; }
.og-btn--ghost { --_bg: transparent; --_fg: currentColor; --_bd: currentColor; --_hover: rgba(255,255,255,.12); }
.og-light .og-btn--ghost, .og-paper .og-btn--ghost { --_hover: var(--og-royal-soft); }
.og-btn svg { width: 1.1em; height: 1.1em; flex: none; }
.og-arrow-link {
	display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .92rem; letter-spacing: .03em;
	text-decoration: none; padding-block: .35rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .5s var(--og-ease);
}
.og-arrow-link:hover, .og-arrow-link:focus-visible { background-size: 100% 1px; }
.og-arrow-link::after { content: "→"; transition: transform .4s var(--og-ease-out); }
.og-arrow-link:hover::after { transform: translateX(4px); }

/* ---------- 3. Header & navigation (v2: floating royal capsule) ------- */
/* The capsule is the logo's own royal blue, so the logo sits in it seamlessly. */
.og-header {
	position: fixed; left: 0; right: 0; top: clamp(8px, 1.4vw, 16px); z-index: 900; height: var(--og-header-h);
	pointer-events: none; color: #fff;
	transition: transform .55s var(--og-ease), top .4s var(--og-ease);
}
.og-header .og-header__inner {
	pointer-events: auto; position: relative; height: 100%;
	width: min(calc(100% - 2 * var(--og-gutter)), 1360px); max-width: none; margin-inline: auto;
	display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
	padding: 0 8px 0 clamp(14px, 1.6vw, 22px);
	background: var(--og-royal); border-radius: 999px;
	box-shadow: 0 22px 48px -22px rgba(2,31,78,.7), inset 0 0 0 1px rgba(255,255,255,.1);
	transition: box-shadow .45s, border-radius .45s var(--og-ease);
}
.og-header.is-solid .og-header__inner { box-shadow: 0 16px 38px -18px rgba(2,31,78,.75), inset 0 0 0 1px rgba(255,255,255,.14); }
.og-header.is-menu-open .og-header__inner { border-radius: 28px; }
.og-header.is-hidden:not(.is-menu-open):not(:focus-within) { transform: translateY(calc(-100% - 24px)); }
.og-header__brand { flex: none; display: block; line-height: 0; border-radius: 6px; }
.og-header__brand img { height: clamp(30px, 2.6vw, 38px); width: auto; }
.og-nav { flex: 1; display: flex; justify-content: center; }
.og-nav__list { list-style: none; margin: 0; padding: 4px; display: flex; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.07); }
.og-nav__item { position: static; }
.og-nav__link {
	display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1.05rem; border-radius: 999px;
	background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none;
	font: 500 .92rem/1 var(--og-sans); letter-spacing: -.005em; white-space: nowrap;
	transition: background-color .3s, color .3s;
}
.og-nav__link:hover { background: rgba(255,255,255,.12); }
.og-nav__link[aria-expanded="true"], .og-nav__link[aria-current="page"] { background: #fff; color: var(--og-royal); }
.og-nav__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.og-nav__chev { width: 9px; height: 9px; transition: transform .4s var(--og-ease); }
.og-nav__link[aria-expanded="true"] .og-nav__chev { transform: rotate(180deg); }
.og-header__actions { flex: none; display: flex; align-items: center; gap: 6px; }
.og-icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: none; transition: background-color .3s; }
.og-icon-btn:hover { background: rgba(255,255,255,.14); }
.og-header .og-icon-btn { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.og-icon-btn svg { width: 19px; height: 19px; }
.og-header__cta { --_bg: #fff; --_fg: var(--og-royal); --_bd: #fff; --_hover: var(--og-royal-soft); min-height: 44px; padding: .7rem 1.2rem; font-size: .86rem; }

/* Mega panels — a white card that drops from the capsule */
.og-mega {
	position: absolute; left: 0; right: 0; top: calc(100% + 10px);
	background: #fff; color: var(--og-charcoal); border-radius: 28px;
	box-shadow: 0 40px 80px -30px rgba(2,31,78,.45), 0 0 0 1px rgba(2,64,158,.08);
	opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: top center;
	transition: opacity .3s var(--og-ease), transform .45s var(--og-ease), visibility 0s linear .45s;
	max-height: calc(100vh - var(--og-header-h) - 48px); overflow-y: auto; overscroll-behavior: contain;
}
.og-nav__item.is-open > .og-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.og-mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.og-mega__main { padding: 28px 30px 30px; }
.og-mega__side { padding: 28px 26px; background: var(--og-ivory); border-radius: 0 28px 28px 0; display: grid; align-content: start; gap: 1.2rem; }
.og-mega__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 18px; }
.og-mega__eyebrow { margin: 0; font: 600 .74rem/1 var(--og-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--og-stone); }
.og-mega__title { margin: .45rem 0 0; font: 600 1.55rem/1.05 var(--og-serif); letter-spacing: -.02em; color: var(--og-charcoal); }
.og-mega__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.og-tile { display: grid; gap: .55rem; text-decoration: none; color: inherit; border-radius: 18px; padding: 8px 8px 12px; transition: background-color .3s; }
.og-tile__img { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--og-ivory); display: grid; place-items: center; overflow: hidden; }
.og-tile__img img { max-width: 86%; max-height: 82%; width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 20px -12px rgba(2,31,78,.55); transition: transform .6s var(--og-ease-out); }
.og-tile__name { font: 600 1rem/1.15 var(--og-serif); letter-spacing: -.01em; padding-inline: 4px; }
.og-tile__count { font-size: .78rem; color: var(--og-stone); padding-inline: 4px; margin-top: -.35rem; }
.og-tile:hover, .og-tile:focus-visible { background: var(--og-royal-soft); }
.og-tile:hover .og-tile__img img, .og-tile:focus-visible .og-tile__img img { transform: scale(1.06); }
.og-mega__quick { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.og-mega__quick a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 46px; padding: .6rem .9rem; border-radius: 14px; background: #fff; text-decoration: none; font-weight: 500; font-size: .93rem; transition: background-color .25s, color .25s; }
.og-mega__quick a::after { content: "→"; color: var(--og-royal); transition: transform .3s var(--og-ease-out); }
.og-mega__quick a:hover, .og-mega__quick a:focus-visible { background: var(--og-royal); color: #fff; }
.og-mega__quick a:hover::after, .og-mega__quick a:focus-visible::after { color: #fff; transform: translateX(3px); }
.og-mega__promo { padding: 1.1rem 1.1rem 1.2rem; border-radius: 18px; background: var(--og-royal); color: #fff; display: grid; gap: .7rem; }
.og-mega__promo p { margin: 0; font: 600 1.1rem/1.2 var(--og-serif); }
.og-mega__promo .og-btn { --_bg: #fff; --_fg: var(--og-royal); --_bd: #fff; --_hover: var(--og-royal-soft); min-height: 42px; font-size: .84rem; justify-self: start; }
/* Artists panel */
.og-faces { list-style: none; margin: 0 0 22px; padding: 0 0 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; border-bottom: 1px solid var(--og-line); }
.og-face { display: grid; justify-items: center; text-align: center; gap: .45rem; padding: 10px 6px; border-radius: 18px; text-decoration: none; transition: background-color .3s; }
.og-face img, .og-face__ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--og-ivory); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--og-line); transition: box-shadow .3s; }
.og-face span { font: 600 .9rem/1.15 var(--og-serif); }
.og-face small { font-size: .74rem; color: var(--og-stone); margin-top: -.3rem; }
.og-face:hover, .og-face:focus-visible { background: var(--og-royal-soft); }
.og-face:hover img, .og-face:focus-visible img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--og-royal); }

/* Artists A–Z */
.og-az__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.og-az__letters { display: flex; flex-wrap: wrap; gap: 3px; list-style: none; margin: 0; padding: 0; }
.og-az__letters button { min-width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--og-ivory); font: 600 .8rem/1 var(--og-sans); color: var(--og-charcoal); cursor: pointer; transition: background-color .25s, color .25s; }
.og-az__letters button:hover { background: var(--og-royal-soft); }
.og-az__letters button[aria-pressed="true"] { background: var(--og-royal); color: #fff; }
.og-az__letters button:disabled { color: #a7b5cf; cursor: default; background: transparent; }
.og-az__search { position: relative; flex: 1 1 260px; max-width: 360px; }
.og-az__search input { width: 100%; height: 48px; border: 1.5px solid var(--og-line); border-radius: 14px; padding: 0 1rem 0 2.7rem; font: 500 .95rem var(--og-sans); background: #fff; color: var(--og-charcoal); transition: border-color .25s, box-shadow .25s; }
.og-az__search input:focus { border-color: var(--og-royal); outline: none; box-shadow: 0 0 0 4px var(--og-royal-soft); }
.og-az__search svg { position: absolute; left: 1rem; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--og-royal); }
.og-az__list { list-style: none; margin: 0; padding: 0; columns: 4 190px; column-gap: 1.5rem; }
.og-az__list li { break-inside: avoid; }
.og-az__list a { display: flex; justify-content: space-between; gap: .5rem; padding: .42rem .6rem; margin-inline: -.6rem; border-radius: 10px; font: 500 .95rem/1.3 var(--og-sans); text-decoration: none; transition: background-color .2s, color .2s; }
.og-az__list a:hover, .og-az__list a:focus-visible { background: var(--og-royal-soft); color: var(--og-royal); }
.og-az__list small { font-size: .74rem; color: var(--og-stone); }
.og-az__empty { color: var(--og-stone); margin: 0; }
.og-az__list li[hidden] { display: none; }
@media (max-width: 1240px) { .og-mega__inner { grid-template-columns: 1fr; } .og-mega__side { border-radius: 0 0 28px 28px; grid-template-columns: 1fr 1fr; } }

/* Mobile toggle + overlay */
.og-burger { display: none; }
@media (max-width: 1099px) {
	.og-nav, .og-header__cta { display: none; }
	.og-header .og-header__inner { justify-content: space-between; }
	.og-burger { display: inline-grid; }
}
.og-header .og-burger { position: relative; background: #fff; color: var(--og-royal); box-shadow: none; }
.og-burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--og-ease), opacity .3s; }
.og-burger span:nth-child(1) { top: 17px; }
.og-burger span:nth-child(2) { top: 25px; right: 19px; }
.og-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.og-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); right: 13px; }

.og-mnav {
	position: fixed; inset: 0; z-index: 950; background: var(--og-royal); color: #fff;
	display: flex; flex-direction: column; overflow: hidden;
	clip-path: circle(0% at calc(100% - 46px) 46px); visibility: hidden;
	transition: clip-path .75s var(--og-ease), visibility 0s linear .75s;
}
.og-mnav.is-open { clip-path: circle(150% at calc(100% - 46px) 46px); visibility: visible; transition-delay: 0s; }
.og-mnav__top { flex: none; height: calc(var(--og-header-h) + 24px); display: flex; align-items: center; justify-content: space-between; padding-inline: calc(var(--og-gutter) + 14px) calc(var(--og-gutter) + 8px); }
.og-mnav__top img { height: 32px; width: auto; }
.og-mnav__top .og-icon-btn { background: #fff; color: var(--og-royal); }
.og-mnav__search { position: relative; display: block; margin: 0 0 .8rem; }
.og-mnav__search input { width: 100%; height: 52px; border: 0; border-radius: 16px; padding: 0 1rem 0 2.9rem; font: 500 1rem var(--og-sans); background: rgba(255,255,255,.12); color: #fff; }
.og-mnav__search input::placeholder { color: #c5d3ec; }
.og-mnav__search input:focus { outline: 2px solid #fff; background: rgba(255,255,255,.18); }
.og-mnav__search svg { position: absolute; left: 1rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.og-mnav__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .4rem var(--og-gutter) 2rem; }
.og-mnav__list { list-style: none; margin: 0; padding: 0; }
.og-mnav__list > li { border-bottom: 1px solid rgba(255,255,255,.16); opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--og-ease-out); }
.og-mnav.is-open .og-mnav__list > li { opacity: 1; transform: none; }
.og-mnav.is-open .og-mnav__list > li:nth-child(2) { transition-delay: .05s; }
.og-mnav.is-open .og-mnav__list > li:nth-child(3) { transition-delay: .1s; }
.og-mnav.is-open .og-mnav__list > li:nth-child(4) { transition-delay: .15s; }
.og-mnav.is-open .og-mnav__list > li:nth-child(5) { transition-delay: .2s; }
.og-mnav.is-open .og-mnav__list > li:nth-child(n+6) { transition-delay: .25s; }
.og-mnav__link { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: .4rem 0; background: none; border: 0; color: inherit; text-align: left; text-decoration: none; font: 600 clamp(1.6rem, 7vw, 2.2rem)/1.05 var(--og-serif); letter-spacing: -.02em; cursor: pointer; }
.og-mnav__link svg { width: 18px; height: 18px; transition: transform .45s var(--og-ease); flex: none; }
.og-mnav__link[aria-expanded="true"] svg { transform: rotate(45deg); }
.og-mnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--og-ease); }
.og-mnav__sub > div { overflow: hidden; }
.og-mnav__sub.is-open { grid-template-rows: 1fr; }
.og-mnav__sub ul { list-style: none; margin: 0; padding: 0 0 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.og-mnav__sub a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: #d7e2f5; font-size: 1rem; }
.og-mnav__sub a:hover, .og-mnav__sub a:focus-visible { color: #fff; }
.og-mnav__foot { flex: none; padding: 1rem var(--og-gutter) calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.16); display: flex; gap: .75rem; flex-wrap: wrap; }
.og-mnav__foot .og-btn { flex: 1 1 140px; }
.og-mnav__foot .og-btn--light { --_bg: #fff; --_fg: var(--og-royal); --_bd: #fff; }
html.og-scroll-locked, html.og-scroll-locked body { overflow: hidden; }

/* ---------- 4. Reveal system (only hides content when JS is running) ---- */
.og-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--og-ease-out), transform 1.2s var(--og-ease-out); transition-delay: var(--d, 0s); }
.og-js [data-reveal].is-in { opacity: 1; transform: none; }
.og-js [data-reveal="fade"] { transform: none; }
/* curtain: a panel of the section colour slides off the artwork (image is painted underneath immediately = good LCP) */
.og-curtain { position: relative; overflow: hidden; }
.og-js .og-curtain::after { content: ""; position: absolute; inset: -1px; background: var(--og-curtain, var(--og-ivory)); transform-origin: top; transition: transform 1.25s var(--og-ease); transition-delay: var(--d, 0s); z-index: 2; pointer-events: none; }
.og-js .og-curtain.is-in::after { transform: scaleY(0); }
.og-curtain img { transition: transform 2.2s var(--og-ease-out); transition-delay: var(--d, 0s); }
.og-js .og-curtain:not(.is-in) img { transform: scale(1.08); }
/* split lines */
.og-lines { display: block; }
.og-lines > span { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.og-lines > span > span { display: inline-block; transition: transform 1.1s var(--og-ease-out); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0s)); }
.og-js .og-lines:not(.is-in) > span > span { transform: translateY(105%); }

/* ---------- 5. Hero ----------------------------------------------------- */
.og-hero { position: relative; min-height: 100svh; padding-top: calc(var(--og-header-h) + clamp(1.5rem, 5vh, 4rem)); padding-bottom: clamp(3rem, 6vh, 5rem); overflow: hidden; display: flex; align-items: center; isolation: isolate;
	background: radial-gradient(120% 80% at 85% 20%, rgba(11,63,155,.45), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(11,63,155,.25), transparent 60%), var(--og-midnight); }
.og-hero__crest { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .38; }
.og-hero__crest path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.og-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--og-gutter); align-items: center; width: 100%; }
.og-hero__text { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 2; }
.og-hero__title { margin: 1.4rem 0 1.8rem; font-size: min(var(--og-fs-display), 15.5vh); }
.og-hero__title em { color: #fff; }
.og-hero__title .og-indent { padding-left: .9em; }
.og-hero__copy { color: var(--og-on-dark-muted); max-width: 36ch; }
.og-hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; align-items: center; margin-top: 2.2rem; }
.og-hero__art { grid-column: 8 / span 5; grid-row: 1; position: relative; justify-self: end; width: 100%; max-width: 620px; }
.og-hero__main { position: relative; margin: 0 0 0 auto; width: min(100%, calc((100svh - var(--og-header-h) - 9rem) * var(--ar, .757))); min-width: 260px; }
.og-mat { background: var(--og-paper); padding: clamp(10px, 1.6vw, 22px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.2); }
.og-hero .og-mat { --og-curtain: var(--og-midnight); }
.og-hero__main img { width: 100%; aspect-ratio: var(--ar); object-fit: contain; }
.og-hero__support { position: absolute; left: -16%; bottom: 4.5rem; width: 36%; z-index: 3; margin: 0; }
.og-hero__caption { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: 1rem; font-size: var(--og-fs-small); color: var(--og-on-dark-muted); }
.og-hero__caption strong { font-family: var(--og-serif); font-size: 1.25rem; font-weight: 500; color: var(--og-on-dark); }
.og-hero__vlabel { position: absolute; right: calc(var(--og-gutter) * .45); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; color: var(--og-on-dark-muted); z-index: 2; }
.og-hero__scroll { position: absolute; left: var(--og-gutter); bottom: 1.6rem; display: flex; align-items: center; gap: .8rem; color: var(--og-on-dark-muted); text-decoration: none; }
.og-hero__scroll i { width: 1px; height: 44px; background: linear-gradient(to bottom, transparent, currentColor); position: relative; overflow: hidden; }

/* hero entrance — runs when <html> gains .og-entered (after intro, or instantly for returning visitors) */
.og-js .og-hero [data-hero] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--og-ease-out), transform 1.3s var(--og-ease-out); transition-delay: var(--d, 0s); }
.og-js.og-entered .og-hero [data-hero] { opacity: 1; transform: none; }
.og-js .og-hero .og-lines > span > span { transform: translateY(105%); }
.og-js.og-entered .og-hero .og-lines > span > span { transform: none; }
.og-js .og-hero .og-mat.og-curtain::after { transition-delay: .35s; }
.og-js.og-entered .og-hero .og-mat.og-curtain::after { transform: scaleY(0); }
.og-js.og-entered .og-hero .og-curtain img { transform: none; }
.og-js .og-hero .og-curtain img { transform: scale(1.08); transition-delay: .35s; }
.og-hero__crest path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--og-ease) .2s; }
.og-entered .og-hero__crest path, html:not(.og-js) .og-hero__crest path { stroke-dashoffset: 0; }

@media (max-width: 1023px) {
	.og-hero { align-items: flex-start; }
	.og-hero__text { grid-column: 1 / -1; }
	.og-hero__art { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 3rem; max-width: 520px; }
	.og-hero__main { width: min(100%, 78vw, calc(460px * var(--ar, .757) / .757)); margin-inline: auto; }
	.og-hero__support { left: -6%; width: 34%; }
	.og-hero__vlabel { display: none; }
	.og-hero__scroll { display: none; }
}
@media (max-width: 599px) {
	.og-hero__support { display: none; }
	.og-hero__title .og-indent { padding-left: 0; }
	.og-hero__ctas .og-btn { width: 100%; }
}

/* ---------- 6. Manifesto ------------------------------------------------ */
.og-manifesto__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--og-gutter); }
.og-manifesto__head { grid-column: 1 / span 3; }
.og-manifesto__text { grid-column: 4 / span 9; font-family: var(--og-serif); font-weight: 400; font-size: clamp(1.75rem, 1.1rem + 2.5vw, 3.6rem); line-height: 1.14; letter-spacing: -.01em; margin: 0; text-wrap: pretty; }
.og-manifesto__text .w { transition: color .5s linear; }
.og-js .og-manifesto__text .w { color: #6f83a8; } /* 3.4:1 — large text AA even before it lights up */
.og-js .og-manifesto__text .w.is-lit { color: var(--og-charcoal); }
.og-manifesto__text em { color: var(--og-royal); }
.og-js .og-manifesto__text em .w.is-lit { color: var(--og-royal); }
.og-manifesto__aside { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 2.5rem; border-top: 1px solid var(--og-line); }
.og-manifesto__aside p { margin: 0; color: var(--og-stone); font-size: var(--og-fs-small); max-width: 30ch; }
.og-manifesto__aside strong { display: block; font-family: var(--og-serif); font-weight: 500; font-size: 1.4rem; color: var(--og-charcoal); margin-bottom: .35rem; line-height: 1.2; }
@media (max-width: 1023px) {
	.og-manifesto__head, .og-manifesto__text, .og-manifesto__aside { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .og-manifesto__aside { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ---------- 7. Section header ------------------------------------------- */
.og-shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.4rem var(--og-gutter); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.og-shead > div:first-child { grid-column: 1 / span 7; }
.og-shead > div:first-child .og-label { margin-bottom: 1.4rem; }
.og-shead__side { grid-column: 9 / span 4; display: grid; gap: 1.2rem; justify-items: start; }
.og-shead__side p { margin: 0; color: var(--og-stone); }
.og-dark .og-shead__side p { color: var(--og-on-dark-muted); }
.og-royal .og-shead__side p { color: #d7e2f5; }
@media (max-width: 1023px) { .og-shead > div:first-child, .og-shead__side { grid-column: 1 / -1; } }

/* ---------- 8. Collection (genres) -------------------------------------- */
.og-genres { columns: 3 300px; column-gap: clamp(1.25rem, 3vw, 3rem); }
.og-genre { break-inside: avoid; margin: 0 0 clamp(1.5rem, 3.5vw, 3.5rem); display: block; text-decoration: none; }
.og-genre__wall { background: var(--og-ivory); padding: clamp(18px, 3.2vw, 44px); transition: background-color .6s var(--og-ease); }
.og-genre__wall .og-curtain { --og-curtain: var(--og-ivory); }
.og-genre__img { box-shadow: 0 22px 40px -24px rgba(9,23,45,.55); transition: transform .9s var(--og-ease-out), box-shadow .9s var(--og-ease-out); }
.og-genre__img img { width: 100%; aspect-ratio: var(--ar); object-fit: contain; background: #fff; }
.og-genre__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; }
.og-genre__name { font-family: var(--og-serif); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem); line-height: 1; }
.og-genre__count { font-size: var(--og-fs-small); color: var(--og-stone); white-space: nowrap; }
.og-genre__by { display: block; font-size: .8rem; color: var(--og-stone); margin-top: .3rem; }
.og-genre:hover .og-genre__wall, .og-genre:focus-visible .og-genre__wall { background: var(--og-royal-soft); }
.og-genre:hover .og-genre__img, .og-genre:focus-visible .og-genre__img { transform: translateY(-6px); box-shadow: 0 34px 50px -26px rgba(9,23,45,.6); }
.og-genre:hover .og-genre__name, .og-genre:focus-visible .og-genre__name { color: var(--og-royal); }
@media (max-width: 559px) { .og-genres { columns: 1; } }

/* ---------- 9. Wave transition (scroll-linked) -------------------------- */
.og-wave { position: relative; height: clamp(70px, 11vw, 170px); margin-top: calc(-1 * clamp(70px, 11vw, 170px)); pointer-events: none; z-index: 1; }
.og-wave svg { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 2px); display: block; }
.og-wave__fill { transform-origin: 50% 100%; transform: scaleY(var(--wave, 1)); transition: transform .1s linear; }
.og-wave__crest { fill: none; stroke: var(--og-champagne); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--crest, 0); }

/* ---------- 10. Artists ------------------------------------------------- */
.og-artists__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--og-gutter); align-items: start; }
.og-artists__list { grid-column: 1 / span 7; list-style: none; margin: 0; padding: 0; counter-reset: a; }
.og-artists__list li { border-top: 1px solid rgba(255,255,255,.12); }
.og-artists__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.og-artist-link { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 1rem; padding: clamp(.7rem, 1.3vw, 1.1rem) 0; text-decoration: none; color: var(--og-on-dark-muted); transition: color .4s; }
.og-artist-link::before { counter-increment: a; content: counter(a, decimal-leading-zero); font: 600 .72rem/1 var(--og-sans); letter-spacing: .15em; color: var(--og-champagne); }
.og-artist-link__name { font-family: var(--og-serif); font-size: clamp(1.6rem, 1.1rem + 2.8vw, 4.1rem); line-height: 1; letter-spacing: -.01em; transition: transform .6s var(--og-ease-out); }
.og-artist-link__count { font-size: .8rem; letter-spacing: .06em; white-space: nowrap; }
.og-artist-link__thumb { display: none; }
.og-artist-link:hover, .og-artist-link:focus-visible, .og-artist-link.is-active { color: #fff; }
.og-artist-link:hover .og-artist-link__name, .og-artist-link:focus-visible .og-artist-link__name, .og-artist-link.is-active .og-artist-link__name { transform: translateX(.35em); font-style: italic; }
.og-artists__stage { grid-column: 9 / span 4; position: sticky; top: calc(var(--og-header-h) + 2rem); }
.og-artists__frame { position: relative; aspect-ratio: 4 / 5; }
.og-artists__frame figure { position: absolute; inset: 0; margin: 0; display: grid; align-content: center; justify-items: center; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .7s var(--og-ease), transform 1s var(--og-ease-out); }
.og-artists__frame figure.is-active { opacity: 1; transform: none; }
.og-artists__frame img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; background: #fff; padding: 10px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.8); }
.og-artists__stage figcaption { margin-top: 1rem; font-size: var(--og-fs-small); color: var(--og-on-dark-muted); min-height: 3em; }
.og-artists__more { margin-top: 2.5rem; display: flex; gap: 1rem 2rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 1023px) {
	.og-artists__list { grid-column: 1 / -1; }
	.og-artists__stage { display: none; }
	.og-artist-link { grid-template-columns: 64px 1fr auto; }
	.og-artist-link::before { display: none; }
	.og-artist-link__thumb { display: block; width: 64px; height: 64px; object-fit: contain; background: #fff; padding: 3px; }
}

/* ---------- 11. Artwork cards + spotlight ------------------------------- */
.og-spotlight { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--og-gutter); align-items: center; margin-bottom: clamp(4rem, 9vw, 9rem); }
.og-spotlight__art { grid-column: 1 / span 8; margin: 0; }
.og-spotlight__art .og-mat { --og-curtain: var(--og-ivory); }
.og-spotlight__art img { width: 100%; aspect-ratio: var(--ar); object-fit: contain; }
.og-spotlight__info { grid-column: 9 / span 4; }
.og-spotlight__info .og-h2 { margin: 1.2rem 0 1.4rem; }
.og-dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.4rem; margin: 0 0 2rem; font-size: var(--og-fs-small); }
.og-dl dt { color: var(--og-stone); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; padding-top: .2rem; }
.og-dl dd { margin: 0; }
.og-dl > * { padding-bottom: .6rem; border-bottom: 1px solid var(--og-line); }
.og-dark .og-dl dt { color: var(--og-on-dark-muted); }
.og-dark .og-dl > * { border-color: rgba(255,255,255,.12); }
.og-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
@media (max-width: 1023px) { .og-spotlight__art, .og-spotlight__info { grid-column: 1 / -1; } }

.og-hang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.og-hang--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .og-hang, .og-hang--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .og-hang, .og-hang--4 { grid-template-columns: 1fr; } }
.og-card { position: relative; display: grid; gap: 1.1rem; }
.og-card__art { display: block; position: relative; padding: clamp(10px, 1.4vw, 16px); background: var(--og-paper); box-shadow: 0 26px 46px -28px rgba(9,23,45,.55); transition: transform .9s var(--og-ease-out), box-shadow .9s var(--og-ease-out); }
.og-card__art img { width: 100%; aspect-ratio: var(--ar, 4/5); object-fit: contain; }
.og-card__art .og-curtain { --og-curtain: var(--og-paper); }
.og-card:hover .og-card__art, .og-card:focus-within .og-card__art { transform: translateY(-6px); box-shadow: 0 40px 60px -30px rgba(9,23,45,.6); }
.og-card__artist { font-family: var(--og-serif); font-size: 1.55rem; line-height: 1.1; margin: 0; }
.og-card__artist a { text-decoration: none; }
.og-card__artist a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable, single link */
.og-card__meta { margin: .25rem 0 0; font-size: var(--og-fs-small); color: var(--og-stone); }
.og-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .78rem; }
.og-status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.og-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--og-royal); }
.og-status--sold::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.og-status--sold { color: var(--og-stone); }
.og-card__code { color: var(--og-stone); letter-spacing: .1em; font-size: .7rem; }

/* ---------- 12. Exhibitions -------------------------------------------- */
.og-exh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--og-gutter); }
.og-exh__feature { grid-column: 1 / span 7; display: grid; gap: 1.6rem; }
.og-exh__feature figure { margin: 0; }
.og-exh__feature .og-mat { --og-curtain: var(--og-royal); }
.og-exh__feature img { width: 100%; aspect-ratio: var(--ar); object-fit: contain; }
.og-exh__feature figcaption { font-size: .8rem; color: #d7e2f5; margin-top: .8rem; }
.og-exh__side { grid-column: 9 / span 4; display: grid; gap: 2rem; align-content: start; }
.og-exh__item { border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.4rem; display: grid; gap: .8rem; }
.og-exh__item img { width: 100%; max-width: 220px; aspect-ratio: var(--ar); object-fit: contain; background: #fff; padding: 6px; }
.og-exh p { margin: 0; color: #e6edf8; max-width: 52ch; }
.og-exh .og-h3 { color: #fff; }
@media (max-width: 1023px) { .og-exh__feature, .og-exh__side { grid-column: 1 / -1; } }

/* ---------- 13. Collector's journey ------------------------------------ */
.og-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.25rem, 3vw, 3rem); position: relative; counter-reset: s; }
.og-steps-wrap { position: relative; }
.og-steps__line { position: absolute; left: 0; right: 0; top: calc(1.7rem - 20px); height: 40px; width: 100%; overflow: visible; pointer-events: none; }
.og-steps__line path { fill: none; stroke: var(--og-royal); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--og-ease); }
.og-steps.is-in + .og-steps__line path, html:not(.og-js) .og-steps__line path { stroke-dashoffset: 0; }
.og-step { position: relative; padding-top: 5rem; }
.og-step::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--og-paper); border: 1px solid var(--og-royal); color: var(--og-royal); font: 400 1.6rem/1 var(--og-serif); z-index: 1; }
.og-step h3 { margin: 0 0 .7rem; }
.og-step p { margin: 0; color: var(--og-stone); max-width: 30ch; }
.og-contact-strip { margin-top: clamp(3rem, 6vw, 5.5rem); padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--og-ivory); display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; justify-content: space-between; }
.og-contact-strip p { margin: 0; font-family: var(--og-serif); font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem); line-height: 1.15; }
@media (max-width: 1023px) { .og-steps { grid-template-columns: 1fr 1fr; } .og-steps__line { display: none; } }
@media (max-width: 559px) { .og-steps { grid-template-columns: 1fr; } .og-step { padding-top: 0; padding-left: 4.6rem; min-height: 3.4rem; } }

/* ---------- 14. Journal ------------------------------------------------- */
.og-journal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--og-gutter); }
.og-journal__lead { grid-column: 1 / span 6; text-decoration: none; display: grid; gap: 1.2rem; align-content: start; }
.og-journal__lead img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.og-journal__list { grid-column: 8 / span 5; list-style: none; margin: 0; padding: 0; }
.og-journal__list li { border-top: 1px solid var(--og-line); }
.og-journal__list a { display: grid; grid-template-columns: 84px 1fr; gap: 1.2rem; padding: 1.3rem 0; text-decoration: none; align-items: start; }
.og-journal__list img { width: 84px; aspect-ratio: 9 / 16; object-fit: cover; }
.og-journal__list h3 { font-family: var(--og-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.15; margin: .35rem 0 .4rem; transition: color .3s; }
.og-journal__list a:hover h3, .og-journal__list a:focus-visible h3 { color: var(--og-royal); }
.og-journal__list p { margin: 0; font-size: var(--og-fs-small); color: var(--og-stone); }
@media (max-width: 1023px) { .og-journal__lead, .og-journal__list { grid-column: 1 / -1; } .og-journal__lead img { aspect-ratio: 4 / 3; } }

/* ---------- 15. Finale & footer ---------------------------------------- */
.og-finale { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.og-finale__bg { position: absolute; inset: 0; z-index: -1; }
.og-finale__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(.4); }
.og-finale__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(9,23,45,.55), var(--og-midnight) 80%); }
.og-finale .og-display { font-size: clamp(2.8rem, 1.6rem + 6vw, 8rem); max-width: 12ch; margin: 1.6rem auto 2.2rem; }
.og-finale .og-actions { justify-content: center; }
.og-footer { background: var(--og-royal); color: var(--og-on-dark-muted); padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; position: relative; }
.og-footer__crest { position: absolute; top: 0; left: 0; width: 100%; height: 60px; transform: translateY(-50%); pointer-events: none; }
.og-footer__crest path { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.og-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem var(--og-gutter); }
.og-footer h2 { font: 600 var(--og-fs-label)/1.4 var(--og-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--og-champagne); margin: 0 0 1.1rem; }
.og-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.og-footer a { text-decoration: none; display: inline-block; padding-block: .3rem; transition: color .3s; }
.og-footer a:hover, .og-footer a:focus-visible { color: #fff; }
.og-footer__brand img { height: 56px; width: auto; margin-bottom: 1.4rem; }
.og-footer__brand p { max-width: 34ch; margin: 0; font-size: var(--og-fs-small); }
.og-footer__base { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .8rem; }
@media (max-width: 1023px) { .og-footer__grid { grid-template-columns: 1fr 1fr; } .og-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .og-footer__grid { grid-template-columns: 1fr; } }

/* Floating WhatsApp (replaces Chaty on themed pages if desired) */
.og-wa { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 800; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--og-royal); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 12px 30px -10px rgba(9,23,45,.6); transition: transform .4s var(--og-ease-out); }
.og-wa:hover { transform: translateY(-3px); }
.og-wa svg { width: 26px; height: 26px; }

/* ---------- 15b. v2 type system: Syne (display) · Instrument Serif (accents) · Inter (text) */
.og-display, .og-h2, .og-h3 { font-family: var(--og-serif); }
.og-display { font-weight: 700; letter-spacing: -.045em; line-height: .9; }
.og-h2 { font-weight: 700; letter-spacing: -.035em; line-height: .96; }
.og-h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
.og-display em, .og-h2 em, .og-h3 em, .og-manifesto__text em, .og-accent {
	font-family: var(--og-accent); font-weight: 400; font-style: italic; letter-spacing: -.01em;
}
.og-display em, .og-h2 em { font-size: 1.06em; }
.og-label { font-family: var(--og-sans); font-weight: 600; letter-spacing: .16em; }
.og-btn { font-family: var(--og-sans); letter-spacing: 0; border-radius: 999px; }
.og-manifesto__text { font-family: var(--og-serif); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.og-artist-link__name { font-weight: 600; letter-spacing: -.035em; }
.og-artist-link:hover .og-artist-link__name, .og-artist-link:focus-visible .og-artist-link__name, .og-artist-link.is-active .og-artist-link__name { font-style: normal; }
.og-card__artist { font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em; }
.og-genre__name { font-weight: 600; letter-spacing: -.03em; }
.og-step::before { font-family: var(--og-serif); font-weight: 700; font-size: 1.2rem; }
.og-contact-strip p, .og-artwork__enquire-title { font-family: var(--og-serif); font-weight: 600; letter-spacing: -.02em; }
.og-artwork__price { font-family: var(--og-serif); font-weight: 700; }
.og-az--page .og-az__list a { font-family: var(--og-serif); font-weight: 600; letter-spacing: -.02em; }

/* Softer, modern geometry */
.og-mat { border-radius: 4px; }
.og-genre__wall { border-radius: 24px; }
.og-contact-strip, .og-artwork__enquire, .og-artwork__buy { border-radius: 24px; }
.og-chip { border-radius: 999px; }
.og-hero, .og-finale { background: radial-gradient(120% 80% at 85% 20%, rgba(2,64,158,.85), transparent 60%), var(--og-midnight); }


/* ---------- 15c. Loading screen (logo theme) --------------------------- */
.og-loader { display: none; }
html.og-loading { overflow: hidden; }
html.og-loading .og-loader { display: grid; }
.og-loader {
	position: fixed; inset: 0; z-index: 10000; place-items: center; background: #0b3f9b; /* the stacked logo's own blue */
	color: #fff; transition: transform 1s var(--og-ease), visibility 0s linear 1s;
}
.og-loader::after { /* wave edge that leads the exit */
	content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14vh; background: inherit;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v60c-230 70-420 96-640 46S380 20 0 86z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v60c-230 70-420 96-640 46S380 20 0 86z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.og-loader__inner { position: relative; display: grid; justify-items: center; gap: 1.4rem; transition: transform .8s var(--og-ease), opacity .5s; }
.og-loader__mark { position: relative; width: clamp(150px, 16vw, 210px); aspect-ratio: 1; display: grid; place-items: center; }
.og-loader__ring { position: absolute; inset: -14%; width: 128%; height: 128%; transform: rotate(-90deg); }
.og-loader__ring circle { fill: none; stroke-width: 1.5; }
.og-loader__ring .track { stroke: rgba(255,255,255,.18); }
.og-loader__ring .bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transition: stroke-dashoffset .35s ease-out; }
.og-loader__logo { width: 78%; height: auto; clip-path: inset(0 0 100% 0); animation: og-logo-rise 1s var(--og-ease) .1s forwards; }
.og-loader__curl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.og-loader__curl path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: og-curl 1.6s var(--og-ease) forwards; }
.og-loader__pct { margin: 0; font: 600 .8rem/1 var(--og-sans); letter-spacing: .2em; font-variant-numeric: tabular-nums; opacity: .85; }
@keyframes og-logo-rise { to { clip-path: inset(0 0 0 0); } }
@keyframes og-curl { to { stroke-dashoffset: 0; } }
.og-loader.is-done { transform: translateY(calc(-100% - 14vh)); visibility: hidden; }
.og-loader.is-done .og-loader__inner { transform: translateY(-8vh) scale(.94); opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.og-loading .og-loader { display: none; } html.og-loading { overflow: auto; } }

/* ---------- 15d. Scroll-driven hero: "step into the paintings" ---------- */
.og-dive { position: relative; background: var(--og-midnight); color: #fff; }
.og-dive__sticky { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.og-dive.is-on { height: calc((var(--n, 6) + 1.2) * 100svh); }
.og-dive.is-on .og-dive__sticky { position: sticky; top: 0; height: 100svh; }
.og-dive__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(90% 70% at 70% 45%, #03317f 0%, var(--og-midnight) 70%); }
.og-dive__waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; transform-origin: 62% 50%; }
.og-dive__waves path { fill: none; stroke: #fff; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.og-dive__waves .w1 { stroke-width: 1.5; opacity: .9; }
.og-dive__waves .w2 { stroke-width: 1; opacity: .45; }
.og-dive__waves .w3 { stroke-width: 1; opacity: .3; }
.og-entered .og-dive__waves path { animation: og-curl 2.4s var(--og-ease) forwards; }
.og-entered .og-dive__waves .w2 { animation-delay: .25s; }
.og-entered .og-dive__waves .w3 { animation-delay: .5s; }
.og-dive__stage { position: absolute; left: 62%; top: 52%; width: 0; height: 0; }
.og-dive__layer {
	position: absolute; left: 0; top: 0; margin: 0;
	width: max-content; transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: 50% 50%;
	opacity: var(--o, 1); will-change: transform, opacity; z-index: var(--z, 1);
}
.og-dive__layer .og-mat { padding: clamp(8px, 1vw, 14px); border-radius: 3px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.75); }
.og-dive__layer img { display: block; width: auto; height: auto; max-width: min(34vw, 560px); max-height: 56vh; object-fit: contain; }
.og-dive:not(.is-on) .og-dive__layer:not(:first-child) { display: none; }
.og-dive__copy { position: absolute; left: var(--og-gutter); top: 50%; transform: translateY(calc(-50% + var(--cy, 0px))); width: min(44vw, 640px); z-index: 50; opacity: var(--co, 1); }
.og-dive__copy .og-display { font-size: min(var(--og-fs-display), 15vh); margin: 1.2rem 0 1.4rem; }
.og-dive__copy .og-lead { color: var(--og-on-dark-muted); max-width: 36ch; }
.og-dive__copy .og-hero__ctas { margin-top: 2rem; }
.og-dive__caps { position: absolute; left: var(--og-gutter); bottom: clamp(1.5rem, 5vh, 3rem); z-index: 60; margin: 0; padding: 0; list-style: none; }
.og-dive__cap { position: absolute; left: 0; bottom: 0; width: min(80vw, 420px); padding: 1rem 1.2rem 1.1rem; border-radius: 20px; background: rgba(2,31,78,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .45s, transform .6s var(--og-ease-out), visibility 0s linear .45s; }
.og-dive__cap.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.og-dive__cap .og-label { color: #c5d3ec; }
.og-dive__cap strong { display: block; margin: .45rem 0 .2rem; font: 700 1.5rem/1.05 var(--og-serif); letter-spacing: -.03em; }
.og-dive__cap span { display: block; font-size: .88rem; color: #d7e2f5; }
.og-dive__cap a { margin-top: .6rem; color: #fff; }
.og-dive__rail { position: absolute; right: var(--og-gutter); top: 50%; transform: translateY(-50%); z-index: 60; display: grid; gap: 10px; justify-items: end; }
.og-dive__rail i { display: block; width: 26px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.3); transition: width .4s var(--og-ease-out), background-color .4s; }
.og-dive__rail i.is-active { width: 46px; background: #fff; }
.og-dive__count { font: 600 .74rem/1 var(--og-sans); letter-spacing: .18em; color: #c5d3ec; margin-top: .4rem; }
.og-dive__cue { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: .7rem; color: #c5d3ec; opacity: var(--co, 1); text-decoration: none; }
.og-dive__cue span { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; }
.og-dive__cue span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: og-cue 1.6s ease-in-out infinite; }
@keyframes og-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.og-dive__end { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; text-align: center; padding: var(--og-gutter); background: radial-gradient(70% 60% at 50% 50%, rgba(2,64,158,.82), rgba(2,31,78,.92)); opacity: var(--eo, 0); visibility: hidden; }
.og-dive__end.is-visible { visibility: visible; }
.og-dive__end .og-display { font-size: clamp(2.6rem, 1.4rem + 5.5vw, 7rem); margin: 0 auto 1.8rem; max-width: 13ch; }
.og-dive__end .og-actions { justify-content: center; }
.og-dive .og-btn--light { --_bg: #fff; --_fg: var(--og-royal); --_bd: #fff; --_hover: var(--og-royal-soft); }
@media (max-width: 1023px) {
	.og-dive__stage { left: 50%; top: 66%; }
	.og-dive__layer img { max-width: 70vw; max-height: 40vh; }
	.og-dive__copy { top: calc(var(--og-header-h) + 40px); transform: translateY(var(--cy, 0px)); width: auto; right: var(--og-gutter); }
	.og-dive__copy .og-display { font-size: clamp(2.6rem, 11vw, 4.6rem); }
	.og-dive__copy .og-lead { font-size: 1rem; }
	.og-dive__copy .og-hero__ctas { margin-top: 1.2rem; }
	.og-dive__rail { display: none; }
	.og-dive__cue { display: none; }
}
@media (max-width: 599px) { .og-dive__copy .og-lead { display: none; } .og-dive__copy .og-hero__ctas .og-btn { width: auto; } }
@media (prefers-reduced-motion: reduce) { .og-dive.is-on { height: auto; } .og-dive.is-on .og-dive__sticky { position: relative; height: auto; min-height: 100svh; } }

/* ---------- 15e. About & Contact page templates ----------------------- */
.og-pagehero { position: relative; padding: calc(var(--og-header-h) + clamp(4rem, 9vw, 7rem)) 0 clamp(3rem, 7vw, 6rem); margin-top: calc(-1 * (var(--og-header-h) + clamp(8px, 1.4vw, 16px) * 2 + 8px)); overflow: hidden; isolation: isolate; color: #fff; background: var(--og-midnight); }
.og-pagehero__img { position: absolute; inset: 0; z-index: -2; }
.og-pagehero__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--og-ease-out); }
.og-entered .og-pagehero__img img { transform: none; }
.og-pagehero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(2,31,78,.94) 0%, rgba(2,64,158,.78) 48%, rgba(2,64,158,.25) 100%); }
.og-pagehero .og-display { font-size: clamp(3rem, 1.8rem + 6vw, 8.5rem); margin: 1.2rem 0 1.4rem; max-width: 11ch; }
.og-pagehero p.og-lead { color: #d7e2f5; max-width: 44ch; }
.og-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--og-gutter); align-items: center; }
.og-split__text { grid-column: 1 / span 6; }
.og-split__media { grid-column: 8 / span 5; position: relative; }
.og-split--flip .og-split__text { grid-column: 7 / span 6; grid-row: 1; }
.og-split--flip .og-split__media { grid-column: 1 / span 5; grid-row: 1; }
.og-photo { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(2,31,78,.55); }
.og-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ar, 4 / 5); }
.og-photo--small { position: absolute; width: 48%; left: -18%; bottom: -10%; border: 8px solid #fff; border-radius: 22px; }
.og-prose--lead p:first-child { font: 500 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.3 var(--og-serif); letter-spacing: -.02em; color: var(--og-charcoal); }
.og-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); }
.og-stat { padding: 1.4rem 1.4rem 1.5rem; border-radius: 22px; background: var(--og-paper); box-shadow: inset 0 0 0 1px var(--og-line); }
.og-stat strong { display: block; font: 700 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--og-serif); letter-spacing: -.04em; color: var(--og-royal); }
.og-stat span { display: block; margin-top: .5rem; color: var(--og-stone); font-size: .9rem; }
.og-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.og-pillar { padding: 2rem 1.8rem 2.2rem; border-radius: 26px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.og-pillar b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--og-royal); font: 700 1rem var(--og-serif); margin-bottom: 1.4rem; }
.og-pillar h3 { margin: 0 0 .7rem; }
.og-pillar p { margin: 0; color: #d7e2f5; }
.og-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 30%); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.og-strip .og-photo { scroll-snap-align: start; }
.og-strip .og-photo img { aspect-ratio: 3 / 4; }
.og-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.og-ccard { display: grid; gap: .6rem; align-content: start; padding: 1.6rem 1.5rem 1.7rem; border-radius: 24px; background: var(--og-paper); box-shadow: inset 0 0 0 1px var(--og-line); text-decoration: none; transition: transform .5s var(--og-ease-out), box-shadow .4s, background-color .4s, color .4s; }
.og-ccard__icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--og-royal); color: #fff; margin-bottom: .6rem; }
.og-ccard__icon svg { width: 22px; height: 22px; }
.og-ccard h3 { margin: 0; font: 700 1.25rem/1.1 var(--og-serif); letter-spacing: -.02em; }
.og-ccard p { margin: 0; color: var(--og-stone); font-size: .95rem; overflow-wrap: anywhere; }
a.og-ccard:hover, a.og-ccard:focus-visible { transform: translateY(-4px); background: var(--og-royal); color: #fff; box-shadow: 0 30px 60px -30px rgba(2,31,78,.7); }
a.og-ccard:hover p, a.og-ccard:focus-visible p { color: #d7e2f5; }
a.og-ccard:hover .og-ccard__icon, a.og-ccard:focus-visible .og-ccard__icon { background: #fff; color: var(--og-royal); }
.og-form { display: grid; gap: 1rem; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: 28px; background: var(--og-paper); box-shadow: 0 30px 70px -40px rgba(2,31,78,.4), inset 0 0 0 1px var(--og-line); }
.og-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.og-field { display: grid; gap: .45rem; }
.og-field label { font-weight: 600; font-size: .86rem; }
.og-field input, .og-field textarea, .og-field select { width: 100%; min-height: 50px; border: 1.5px solid var(--og-line); border-radius: 14px; padding: .8rem 1rem; font: 400 1rem var(--og-sans); color: var(--og-charcoal); background: #fff; transition: border-color .25s, box-shadow .25s; }
.og-field textarea { min-height: 140px; resize: vertical; }
.og-field input:focus, .og-field textarea:focus { border-color: var(--og-royal); outline: none; box-shadow: 0 0 0 4px var(--og-royal-soft); }
.og-field [aria-invalid="true"] { border-color: var(--og-royal-deep); box-shadow: 0 0 0 4px var(--og-royal-soft); }
.og-field__err { color: var(--og-royal-deep); font-size: .82rem; font-weight: 600; }
.og-form__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.og-form__note { margin: 0; font-size: .82rem; color: var(--og-stone); }
.og-map { border-radius: 28px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--og-line); aspect-ratio: 16 / 9; background: var(--og-royal-soft); }
.og-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.6) hue-rotate(15deg); }
@media (max-width: 1023px) {
	.og-split__text, .og-split__media, .og-split--flip .og-split__text, .og-split--flip .og-split__media { grid-column: 1 / -1; grid-row: auto; }
	.og-photo--small { display: none; }
	.og-stats, .og-cards { grid-template-columns: 1fr 1fr; }
	.og-pillars { grid-template-columns: 1fr; }
	.og-strip { grid-auto-columns: 72%; }
}
@media (max-width: 559px) { .og-form__row { grid-template-columns: 1fr; } .og-cards { grid-template-columns: 1fr; } }

/* ---------- 15f. v1.2 — base reset (replaces Hello Elementor's reset, which tinted buttons magenta) */
body.og-site { margin: 0; }
:where(body.og-site) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.og-site) :where(button) { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; text-transform: none; }
:where(body.og-site) :where(a) { color: var(--og-royal); }
:where(body.og-site) :where(h1, h2, h3, h4) { margin-top: 0; }
body.og-site ::selection { background: var(--og-royal); color: #fff; }

/* Even rhythm everywhere */
:root { --og-section: clamp(4.5rem, 2.8rem + 5vw, 8rem); }
.og-shead { margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }

/* ---------- 15g. Buttons: dark ⇄ bright pairs ---------------------------------------- */
.og-btn { transition: color .4s var(--og-ease), border-color .4s var(--og-ease), box-shadow .4s var(--og-ease), transform .4s var(--og-ease-out); }
.og-btn:hover, .og-btn:focus-visible { color: var(--_hfg, #fff); border-color: var(--_hbd, var(--_hover)); box-shadow: 0 14px 30px -14px rgba(2,31,78,.6); transform: translateY(-1px); }
.og-btn:active { transform: translateY(0); }
/* royal → deep midnight */
.og-btn { --_hover: var(--og-midnight); --_hfg: #fff; }
/* white → royal */
.og-btn--light { --_hover: var(--og-royal); --_hfg: #fff; --_hbd: #fff; }
.og-royal .og-btn--light, .og-header .og-header__cta, .og-mega__promo .og-btn, .og-footer .og-btn--light, .og-dive .og-btn--light { --_hover: var(--og-midnight); --_hfg: #fff; --_hbd: var(--og-midnight); }
/* outline on dark → white with royal text; outline on light → royal with white text */
.og-btn--ghost { --_hover: #fff; --_hfg: var(--og-royal); --_hbd: #fff; }
.og-light .og-btn--ghost, .og-paper .og-btn--ghost, .og-form .og-btn--ghost { --_hover: var(--og-royal); --_hfg: #fff; --_hbd: var(--og-royal); }
.og-header .og-icon-btn:not(.og-burger):hover, .og-header .og-icon-btn:not(.og-burger):focus-visible { background: #fff; color: var(--og-royal); }
.og-header .og-burger:hover, .og-header .og-burger:focus-visible { background: var(--og-midnight); color: #fff; }
.og-mnav__top .og-icon-btn:hover, .og-mnav__top .og-icon-btn:focus-visible { background: var(--og-midnight); color: #fff; }
.og-nav__link:hover { background: rgba(255,255,255,.16); }
.og-nav__link[aria-expanded="true"]:hover { background: var(--og-midnight); color: #fff; }
.og-chip:hover { background: var(--og-royal); border-color: var(--og-royal); color: #fff; }
.og-dark .og-chip:hover { background: #fff; color: var(--og-royal); border-color: #fff; }
.og-az__letters button:hover:not(:disabled) { background: var(--og-royal); color: #fff; }
.og-pagination a:hover { background: var(--og-royal); border-color: var(--og-royal); color: #fff; }
.og-artwork__zoom:hover { background: var(--og-royal); border-color: var(--og-royal); color: #fff; }
.og-mnav__link:hover { color: #fff; }
.og-mnav__sub a { border-radius: 10px; padding-inline: .6rem; margin-inline: -.6rem; transition: background-color .25s, color .25s; }
.og-mnav__sub a:hover, .og-mnav__sub a:focus-visible { background: #fff; color: var(--og-royal); }
.og-mnav__link:focus-visible, .og-mnav__sub a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- 15h. Hero copy never collides with the header ------------------------------ */
.og-dive__copy { top: calc(var(--og-header-h) + clamp(8px, 1.4vw, 16px) * 2 + 24px); bottom: clamp(5.5rem, 12vh, 8rem); display: flex; flex-direction: column; justify-content: center; transform: translateY(var(--cy, 0px)); }
.og-dive__copy .og-display { font-size: min(var(--og-fs-display), 13vh); }
@media (max-width: 1023px) {
	.og-dive__copy { bottom: auto; justify-content: flex-start; }
}
.og-pagehero { padding-top: calc(var(--og-header-h) + clamp(8px, 1.4vw, 16px) * 2 + clamp(3rem, 7vw, 5.5rem)); }
.og-archive__head { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ---------- 15i. Loading screen v2: the logo fills like rising water ------------------- */
.og-loader__mark { width: clamp(150px, 15vw, 200px); aspect-ratio: 353 / 400; }
.og-loader__svg { width: 100%; height: 100%; overflow: visible; display: block; }
.og-loader__ghost { opacity: .16; }
.og-loader__level { transform: translateY(calc((1 - var(--p, 0)) * 420px - 20px)); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.og-loader__wave { animation: og-wave-x 1.6s linear infinite; }
.og-loader__wave--b { animation-duration: 2.4s; animation-direction: reverse; opacity: .55; }
.og-loader__crest { fill: none; stroke: #fff; stroke-width: 2; }
@keyframes og-wave-x { from { transform: translateX(0); } to { transform: translateX(-176px); } }
.og-loader__curls { position: absolute; inset: -38% -48%; width: 196%; height: 176%; pointer-events: none; }
.og-loader__curls path { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; animation: og-curl 2.2s var(--og-ease) forwards; }
.og-loader__curls path:nth-child(2) { animation-delay: .2s; opacity: .35; }
.og-loader__curls path:nth-child(3) { animation-delay: .4s; opacity: .45; }
.og-loader__drop { fill: #fff; opacity: 0; animation: og-drop 2.6s ease-in infinite; }
.og-loader__drop:nth-of-type(2) { animation-delay: .9s; }
.og-loader__drop:nth-of-type(3) { animation-delay: 1.7s; }
@keyframes og-drop { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scale(1.1); } }
.og-loader__pct { font-family: var(--og-serif); font-weight: 600; font-size: 1rem; letter-spacing: .08em; }
.og-loader__tag { margin: -.6rem 0 0; font: italic 400 1.05rem/1 var(--og-accent); color: #d7e2f5; opacity: 0; animation: og-fade-in .8s ease .6s forwards; }
@keyframes og-fade-in { to { opacity: 1; } }
.og-loader.is-done .og-loader__inner { transform: translateY(-6vh) scale(1.08); opacity: 0; }

/* ---------- 15j. "Art in motion" film section --------------------------------------- */
.og-film { position: relative; overflow: hidden; isolation: isolate; background: var(--og-midnight); color: #fff; }
.og-film__marquee { position: absolute; left: 0; top: 50%; z-index: -1; white-space: nowrap; transform: translate3d(var(--mx, 0px), -50%, 0); pointer-events: none; font: 700 clamp(5rem, 16vw, 15rem)/1 var(--og-serif); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); }
.og-film__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--og-gutter); align-items: center; }
.og-film__text { grid-column: 1 / span 6; }
.og-film__text .og-h2 { margin: 1.2rem 0 1.4rem; }
.og-film__text p { color: var(--og-on-dark-muted); max-width: 44ch; margin: 0 0 2rem; }
.og-film__stage { grid-column: 8 / span 5; justify-self: center; width: min(100%, 440px); }
.og-film__frame { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 999px 999px 28px 28px; overflow: hidden; background: var(--og-midnight-2); box-shadow: 0 60px 120px -50px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); transform: scale(var(--fs, .9)) rotate(var(--fr, -2deg)); transition: transform .2s linear; }
.og-film__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-film__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(2,31,78,.55), transparent 35%); border-radius: inherit; }
.og-film__holder { position: relative; }
.og-film__ring { position: absolute; inset: -9%; z-index: 2; width: 118%; height: 118%; pointer-events: none; animation: og-spin 26s linear infinite; }
.og-film__ring text { font: 600 11px var(--og-sans); letter-spacing: .32em; text-transform: uppercase; fill: rgba(255,255,255,.55); }
@keyframes og-spin { to { transform: rotate(360deg); } }
.og-film__controls { position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); display: flex; gap: 8px; }
.og-film__controls button { width: 46px; height: 46px; border-radius: 50% !important; display: grid; place-items: center; background: rgba(255,255,255,.16) !important; color: #fff !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); transition: background-color .3s, color .3s; }
.og-film__controls button:hover, .og-film__controls button:focus-visible { background: #fff !important; color: var(--og-royal) !important; }
.og-film__controls svg { width: 18px; height: 18px; }
.og-film__cap { margin-top: 1.4rem; text-align: center; font-size: .8rem; color: var(--og-on-dark-muted); }
@media (max-width: 1023px) {
	.og-film__text, .og-film__stage { grid-column: 1 / -1; }
	.og-film__stage { width: min(78vw, 380px); }
}
@media (prefers-reduced-motion: reduce) { .og-film__ring { animation: none; } .og-film__frame { transform: none; } }

/* ---------- 15k. Footer v2 ----------------------------------------------------------------- */
.og-footer { background: var(--og-royal); color: #d7e2f5; padding: 0 0 1.6rem; overflow: hidden; position: relative; margin-top: clamp(50px, 7vw, 110px); }
.og-footer__wave { position: absolute; left: 0; right: 0; top: 0; height: clamp(50px, 7vw, 110px); transform: translateY(-99%); pointer-events: none; }
.og-footer__wave svg { width: 100%; height: 100%; display: block; }
.og-footer__wave .fill { fill: var(--og-royal); }
.og-footer__wave .crest { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--og-ease); }
.og-footer.is-in .og-footer__wave .crest, html:not(.og-js) .og-footer__wave .crest { stroke-dashoffset: 0; }
.og-footer__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(255,255,255,.18); }
.og-footer__cta .og-display { font-size: clamp(2.6rem, 1.4rem + 5vw, 6.5rem); color: #fff; max-width: 14ch; margin: 1rem 0 0; }
.og-footer__cta .og-label { color: #d7e2f5; }
.og-footer__cta .og-actions { justify-content: flex-end; }
.og-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem var(--og-gutter); padding-top: clamp(2.5rem, 5vw, 4rem); }
.og-footer h2 { font: 600 .74rem/1.4 var(--og-sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 1.1rem; }
.og-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.og-footer a { text-decoration: none; display: inline-block; padding-block: .3rem; color: #d7e2f5; transition: color .3s, transform .3s var(--og-ease-out); }
.og-footer ul a:hover, .og-footer ul a:focus-visible { color: #fff; transform: translateX(4px); }
.og-footer__brand img { height: 46px; width: auto; margin-bottom: 1.2rem; }
.og-footer__brand p { max-width: 34ch; margin: 0 0 1.4rem; font-size: var(--og-fs-small); }
.og-social { display: flex; gap: .6rem; }
.og-social a { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: background-color .3s, color .3s, transform .3s; }
.og-social a:hover, .og-social a:focus-visible { background: #fff; color: var(--og-royal); transform: translateY(-2px); }
.og-social svg { width: 18px; height: 18px; }
.og-footer__mega { margin: clamp(2.5rem, 6vw, 5rem) 0 0; font: 700 clamp(3rem, 11.5vw, 12rem)/.85 var(--og-serif); letter-spacing: -.05em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); background: linear-gradient(90deg, #fff, #fff) 0 0 / 0% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-size 1.6s var(--og-ease); user-select: none; }
.og-footer.is-in .og-footer__mega { background-size: 100% 100%; -webkit-text-stroke-color: transparent; }
.og-footer__base { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .82rem; }
.og-totop { display: inline-flex; align-items: center; gap: .5rem; color: #fff !important; font-weight: 600; }
.og-totop span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: background-color .3s, color .3s; }
.og-totop:hover span { background: #fff; color: var(--og-royal); }
@media (max-width: 1023px) { .og-footer__grid { grid-template-columns: 1fr 1fr; } .og-footer__brand { grid-column: 1 / -1; } .og-footer__cta { grid-template-columns: 1fr; } .og-footer__cta .og-actions { justify-content: flex-start; } }
@media (max-width: 479px) { .og-footer__grid { grid-template-columns: 1fr; } }

/* ---------- 16. Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.og-site *, .og-site *::before, .og-site *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
	.og-js [data-reveal], .og-js .og-hero [data-hero] { opacity: 1 !important; transform: none !important; }
	.og-js .og-curtain::after { transform: scaleY(0) !important; }
	.og-js .og-curtain img, .og-js .og-lines > span > span { transform: none !important; }
	.og-js .og-manifesto__text .w { color: inherit !important; }
	.og-hero__crest path, .og-steps__line path { stroke-dashoffset: 0 !important; }
	[data-depth] { transform: none !important; }
}
@media (max-height: 820px) { .og-hero__scroll { display: none; } }

/* v2: hero copy entrance (after the loader), captions hidden during the opening */
.og-js .og-dive [data-hero] { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--og-ease-out), transform 1.2s var(--og-ease-out); transition-delay: var(--d, 0s); }
.og-js.og-entered .og-dive [data-hero] { opacity: 1; transform: none; }
.og-js .og-dive .og-lines > span > span { transform: translateY(105%); }
.og-js.og-entered .og-dive .og-lines > span > span { transform: none; }
.og-dive--intro .og-dive__cap { opacity: 0 !important; visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .og-js .og-dive [data-hero], .og-js .og-dive .og-lines > span > span { opacity: 1 !important; transform: none !important; } }

/* v1.3 — footer signature as auto-fitting SVG text (never cut off), credit, pinned header option */
svg.og-footer__mega { display: block; width: 100%; height: auto; margin: clamp(2.5rem, 6vw, 5rem) 0 0; overflow: visible; background: none; color: inherit; -webkit-text-stroke: 0; white-space: normal; font: inherit; }
svg.og-footer__mega text { font-family: var(--og-serif); font-weight: 700; font-size: 140px; letter-spacing: -.02em; fill: #fff; fill-opacity: 0; stroke: #fff; stroke-opacity: .45; stroke-width: 1.2; paint-order: stroke; transition: fill-opacity 1.6s var(--og-ease) .2s, stroke-opacity 1.6s var(--og-ease) .2s; }
.og-footer.is-in svg.og-footer__mega text, html:not(.og-js) svg.og-footer__mega text { fill-opacity: 1; stroke-opacity: 0; }
.og-footer__base { gap: .8rem 1.6rem; }
.og-credit { color: #d7e2f5; }
.og-credit a { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.og-credit a:hover { text-decoration-color: #fff; }
.og-header-pinned .og-header.is-hidden { transform: none; }
@media (max-width: 767px) { .og-footer__base { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { svg.og-footer__mega text { fill-opacity: 1; stroke-opacity: 0; transition: none; } }