/*
Theme Name: OGL Couture
Theme URI: https://example.com/ogl-couture
Author: OGL Studio
Author URI: https://example.com
Description: A dark, editorial WordPress theme built for OGL Couture — a Nigerian couture house creating custom and made-to-measure bridal, prom, asoebi and occasion wear. A full-width portfolio and brand showcase with a hero carousel, no sidebar, a fixed scroll-aware header and an asymmetric editorial gallery system. Not an online store.
Version: 1.7.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ogl-couture
Tags: full-width-template, custom-menu, custom-logo, featured-images, translation-ready, editor-style, block-styles, wide-blocks, threaded-comments

OGL Couture is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
1.0  Custom properties
2.0  Reset & base
3.0  Typography
4.0  Accessibility helpers
5.0  Buttons & links
6.0  Layout primitives
7.0  Header & navigation
8.0  Hero
9.0  Front page sections
     9.1  Brand intro
     9.2  Collection grid
     9.3  Story
     9.4  Services
     9.5  Asymmetric gallery
     9.6  Social / Instagram
10.0 Page & post templates
11.0 Archive / index
12.0 Comments
13.0 Footer
14.0 WordPress core classes
15.0 Animations
16.0 Responsive
17.0 Portfolio content types
18.0 Approved homepage & header
19.0 About — CEO message
20.0 Enquiry form
21.0 Homepage section headings & work grid
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Custom properties
--------------------------------------------------------------*/
:root {
	/* Palette */
	--ogl-bg:            #0A0A0A;
	--ogl-bg-alt:        #101010;
	--ogl-bg-raise:      #151515;
	--ogl-gold:          #D4A574;
	--ogl-gold-soft:     rgba(212, 165, 116, 0.16);
	--ogl-gold-line:     rgba(212, 165, 116, 0.32);
	--ogl-text:          #EDEAE5;
	--ogl-muted:         #9A948C;
	--ogl-line:          rgba(237, 234, 229, 0.12);
	--ogl-overlay:       rgba(10, 10, 10, 0.55);

	/* Type */
	--ogl-font-display:  "Playfair Display", "Times New Roman", Times, serif;
	--ogl-font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ogl-fs-hero:       clamp(2.75rem, 9vw, 8rem);
	--ogl-fs-display:    clamp(2rem, 5.2vw, 4.25rem);
	--ogl-fs-h1:         clamp(2rem, 4.4vw, 3.5rem);
	--ogl-fs-h2:         clamp(1.75rem, 3.4vw, 2.75rem);
	--ogl-fs-h3:         clamp(1.35rem, 2.2vw, 1.875rem);
	--ogl-fs-lead:       clamp(1.0625rem, 1.5vw, 1.375rem);
	--ogl-fs-body:       1rem;
	--ogl-fs-small:      0.8125rem;
	--ogl-tracking:      0.22em;

	/* Space */
	--ogl-gutter:        clamp(1.25rem, 5vw, 5rem);
	--ogl-section:       clamp(4.5rem, 11vw, 10rem);
	--ogl-header-h:      92px;
	--ogl-max:           1680px;
	--ogl-measure:       72ch;

	/* Motion */
	--ogl-ease:          cubic-bezier(0.22, 1, 0.36, 1);
	--ogl-dur:           0.6s;
}

/*--------------------------------------------------------------
2.0 Reset & base
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--ogl-bg);
	color: var(--ogl-text);
	font-family: var(--ogl-font-body);
	font-size: var(--ogl-fs-body);
	font-weight: 300;
	line-height: 1.75;
	letter-spacing: 0.01em;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.ogl-menu-open {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--ogl-line);
	margin: 3rem 0;
}

::selection {
	background: var(--ogl-gold);
	color: var(--ogl-bg);
}

/* Custom scrollbar (progressive enhancement) */
* {
	scrollbar-color: var(--ogl-gold-line) var(--ogl-bg);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--ogl-bg);
}

::-webkit-scrollbar-thumb {
	background: rgba(212, 165, 116, 0.35);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--ogl-gold);
}

/*--------------------------------------------------------------
3.0 Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ogl-font-display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ogl-text);
	margin: 0 0 0.6em;
}

h1 { font-size: var(--ogl-fs-h1); }
h2 { font-size: var(--ogl-fs-h2); }
h3 { font-size: var(--ogl-fs-h3); }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }
h6 {
	font-family: var(--ogl-font-body);
	font-size: var(--ogl-fs-small);
	font-weight: 500;
	letter-spacing: var(--ogl-tracking);
	text-transform: uppercase;
	color: var(--ogl-gold);
}

p {
	margin: 0 0 1.5em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--ogl-gold);
	text-decoration: none;
	transition: color 0.35s var(--ogl-ease), opacity 0.35s var(--ogl-ease);
}

a:hover,
a:focus {
	color: var(--ogl-text);
}

strong, b { font-weight: 600; }
em, i     { font-style: italic; }

small {
	font-size: var(--ogl-fs-small);
}

blockquote {
	margin: 2.5rem 0;
	padding: 0 0 0 clamp(1.25rem, 3vw, 2.5rem);
	border-left: 1px solid var(--ogl-gold);
	font-family: var(--ogl-font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-style: italic;
	line-height: 1.45;
	color: var(--ogl-text);
}

blockquote cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--ogl-font-body);
	font-size: var(--ogl-fs-small);
	font-style: normal;
	letter-spacing: var(--ogl-tracking);
	text-transform: uppercase;
	color: var(--ogl-muted);
}

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
}

code {
	background: var(--ogl-bg-raise);
	padding: 0.15em 0.45em;
	color: var(--ogl-gold);
}

pre {
	background: var(--ogl-bg-raise);
	border: 1px solid var(--ogl-line);
	padding: 1.5rem;
	overflow-x: auto;
	line-height: 1.6;
}

pre code {
	background: none;
	padding: 0;
	color: inherit;
}

ul, ol {
	margin: 0 0 1.5em;
	padding-left: 1.35em;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 2rem;
	font-size: 0.9375rem;
}

th, td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--ogl-line);
	text-align: left;
}

th {
	font-family: var(--ogl-font-body);
	font-weight: 500;
	font-size: var(--ogl-fs-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

/* Shared type utilities */
.ogl-eyebrow {
	display: inline-block;
	margin: 0 0 1.5rem;
	font-family: var(--ogl-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-eyebrow--line::before {
	content: "";
	display: inline-block;
	width: 42px;
	height: 1px;
	margin-right: 1rem;
	vertical-align: middle;
	background: var(--ogl-gold);
}

.ogl-display {
	font-size: var(--ogl-fs-display);
}

.ogl-lead {
	font-size: var(--ogl-fs-lead);
	line-height: 1.65;
	color: var(--ogl-muted);
	font-weight: 300;
}

.ogl-muted {
	color: var(--ogl-muted);
}

/*--------------------------------------------------------------
4.0 Accessibility helpers
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--ogl-bg-raise);
	border: 1px solid var(--ogl-gold);
	clip: auto !important;
	clip-path: none;
	color: var(--ogl-gold);
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 1rem 1.5rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--ogl-gold);
	outline-offset: 3px;
}

.ogl-skip-link:focus {
	position: fixed !important;
}

/*--------------------------------------------------------------
5.0 Buttons & links
--------------------------------------------------------------*/
.ogl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.05rem 2.6rem;
	border: 1px solid var(--ogl-gold);
	background: transparent;
	color: var(--ogl-gold);
	font-family: var(--ogl-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	/* Own stacking context, so the z-index:-1 fill below paints above the
	   button's background instead of dropping behind the section's. */
	isolation: isolate;
	transition: background-color 0.45s var(--ogl-ease), color 0.45s var(--ogl-ease),
		border-color 0.45s var(--ogl-ease);
}

.ogl-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ogl-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.5s var(--ogl-ease);
	z-index: -1;
}

.ogl-btn > * {
	position: relative;
	z-index: 1;
}

.ogl-btn:hover::before,
.ogl-btn:focus::before {
	transform: scaleX(1);
	transform-origin: left center;
}

.ogl-btn:hover,
.ogl-btn:focus {
	color: var(--ogl-bg);
}

.ogl-btn-gold,
.ogl-btn--solid {
	background: var(--ogl-gold);
	color: var(--ogl-bg);
}

.ogl-btn-gold::before,
.ogl-btn--solid::before {
	background: transparent;
	border: 1px solid var(--ogl-gold);
}

.ogl-btn-gold:hover,
.ogl-btn-gold:focus,
.ogl-btn--solid:hover,
.ogl-btn--solid:focus {
	background: transparent;
	color: var(--ogl-gold);
}

/* Understated text link with animated rule */
.ogl-link {
	display: inline-block;
	position: relative;
	padding-bottom: 0.35rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(1);
	transform-origin: right center;
	transition: transform 0.45s var(--ogl-ease);
}

.ogl-link:hover::after,
.ogl-link:focus::after {
	transform: scaleX(0);
}

/*--------------------------------------------------------------
6.0 Layout primitives
--------------------------------------------------------------*/
.ogl-site {
	position: relative;
	width: 100%;
	overflow-x: clip;
}

.ogl-shell {
	width: 100%;
	max-width: var(--ogl-max);
	margin-inline: auto;
	padding-inline: var(--ogl-gutter);
}

.ogl-shell--narrow {
	max-width: 920px;
}

.ogl-shell--flush {
	max-width: none;
	padding-inline: 0;
}

.ogl-section {
	position: relative;
	padding-block: var(--ogl-section);
}

.ogl-section--alt {
	background: var(--ogl-bg-alt);
}

.ogl-section--tight {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.ogl-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	/*
	 * A hairline and a generous gap separate the heading from the grid below.
	 * Without them the title sat directly on top of its content and the two
	 * read as a single undifferentiated block.
	 */
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--ogl-line);
	margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.ogl-section__head-text {
	max-width: 46ch;
}

.ogl-section__title {
	margin: 0;
	font-size: var(--ogl-fs-display);
	line-height: 1.08;
}

/* Standfirst under a section title. */
.ogl-section__head-lead {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.ogl-rule {
	width: 100%;
	height: 1px;
	background: var(--ogl-line);
	border: 0;
	margin: 0;
}

/* Media ratio wrapper — keeps grids from jumping while images load */
.ogl-media {
	position: relative;
	overflow: hidden;
	background: var(--ogl-bg-raise);
}

.ogl-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ogl-ease), opacity 0.6s var(--ogl-ease);
}

.ogl-media--portrait  { aspect-ratio: 3 / 4; }
.ogl-media--square    { aspect-ratio: 1 / 1; }
.ogl-media--landscape { aspect-ratio: 4 / 3; }
.ogl-media--wide      { aspect-ratio: 16 / 9; }

.ogl-media__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #141414 0%, #1c1a17 55%, #111 100%);
	color: rgba(212, 165, 116, 0.45);
	font-family: var(--ogl-font-display);
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-style: italic;
	letter-spacing: 0.05em;
}

/*--------------------------------------------------------------
7.0 Header & navigation
--------------------------------------------------------------*/
.ogl-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 900;
	background: transparent;
	transition: background-color 0.5s var(--ogl-ease),
	            backdrop-filter 0.5s var(--ogl-ease),
	            border-color 0.5s var(--ogl-ease),
	            transform 0.5s var(--ogl-ease);
	border-bottom: 1px solid transparent;
}

.ogl-header::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0.75), transparent);
	opacity: 1;
	transition: opacity 0.5s var(--ogl-ease);
	pointer-events: none;
	z-index: -1;
}

/* Scrolled state, toggled from JS */
.ogl-header.is-scrolled {
	background-color: rgba(10, 10, 10, 0.9);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	border-bottom-color: var(--ogl-line);
}

.ogl-header.is-scrolled::after {
	opacity: 0;
}

/* Auto-hide when scrolling down, reveal on scroll up */
.ogl-header.is-hidden {
	transform: translateY(-100%);
}

.ogl-header.is-menu-open {
	background-color: transparent;
	border-bottom-color: transparent;
	transform: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.ogl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: var(--ogl-header-h);
	transition: min-height 0.5s var(--ogl-ease);
}

.ogl-header.is-scrolled .ogl-header__inner {
	min-height: 72px;
}

/* Branding */
.ogl-brand {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	position: relative;
	z-index: 2;
	min-width: 0;
}

.ogl-brand__logo img {
	max-height: 46px;
	width: auto;
}

.ogl-brand__title {
	margin: 0;
	font-family: var(--ogl-font-display);
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.ogl-brand__title a {
	color: var(--ogl-text);
}

.ogl-brand__title a:hover,
.ogl-brand__title a:focus {
	color: var(--ogl-gold);
}

.ogl-brand__tagline {
	margin: 0.35rem 0 0;
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

/* Inline desktop nav (optional, sits beside the hamburger) */
.ogl-nav-inline {
	display: none;
}

.ogl-nav-inline ul {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 2.6vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogl-nav-inline a {
	position: relative;
	display: block;
	padding: 0.4rem 0;
	color: var(--ogl-text);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.ogl-nav-inline a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--ogl-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.45s var(--ogl-ease);
}

.ogl-nav-inline a:hover,
.ogl-nav-inline a:focus,
.ogl-nav-inline .current-menu-item > a,
.ogl-nav-inline .current_page_item > a {
	color: var(--ogl-gold);
}

.ogl-nav-inline a:hover::after,
.ogl-nav-inline a:focus::after,
.ogl-nav-inline .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.ogl-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	position: relative;
	z-index: 2;
}

.ogl-header__cta {
	display: none;
}

/* Hamburger */
.ogl-burger {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.75rem 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--ogl-text);
	cursor: pointer;
	font-family: var(--ogl-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	-webkit-appearance: none;
	appearance: none;
}

.ogl-burger__label {
	display: none;
	transition: color 0.35s var(--ogl-ease);
}

.ogl-burger__box {
	position: relative;
	display: block;
	width: 30px;
	height: 14px;
	flex: none;
}

.ogl-burger__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transition: transform 0.45s var(--ogl-ease), opacity 0.25s linear, width 0.45s var(--ogl-ease);
}

.ogl-burger__bar:nth-child(1) { top: 0; }
.ogl-burger__bar:nth-child(2) { top: 6.5px; width: 70%; }
.ogl-burger__bar:nth-child(3) { top: 13px; }

.ogl-burger:hover .ogl-burger__bar:nth-child(2) {
	width: 100%;
}

.ogl-burger:hover,
.ogl-burger:focus-visible {
	color: var(--ogl-gold);
}

.ogl-burger[aria-expanded="true"] {
	color: var(--ogl-gold);
}

.ogl-burger[aria-expanded="true"] .ogl-burger__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.ogl-burger[aria-expanded="true"] .ogl-burger__bar:nth-child(2) {
	opacity: 0;
	width: 0;
}

.ogl-burger[aria-expanded="true"] .ogl-burger__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* Full-screen overlay menu */
.ogl-overlay {
	position: fixed;
	inset: 0;
	z-index: 890;
	display: flex;
	background: var(--ogl-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s var(--ogl-ease), visibility 0s linear 0.55s;
}

.ogl-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s var(--ogl-ease), visibility 0s linear 0s;
}

.ogl-overlay__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.18;
	filter: grayscale(100%);
	pointer-events: none;
}

.ogl-overlay__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--ogl-max);
	margin-inline: auto;
	padding: calc(var(--ogl-header-h) + 2.5rem) var(--ogl-gutter) 3rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ogl-overlay__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;

	/*
	 * Auto margins centre the menu when it fits and collapse to zero when it
	 * does not. `justify-content: center` on the scroll container would
	 * overflow in both directions on a short screen, hiding the first menu
	 * item behind the header with no way to scroll up to it.
	 */
	margin-block: auto;
}

.ogl-menu-primary ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogl-menu-primary > ul > li {
	overflow: hidden;
}

.ogl-menu-primary > ul > li > a {
	display: block;
	padding: 0.18em 0;
	font-family: var(--ogl-font-display);
	font-size: clamp(2rem, 6.5vw, 4.5rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ogl-text);
	transform: translateY(110%);
	transition: transform 0.7s var(--ogl-ease), color 0.35s var(--ogl-ease);
}

.ogl-overlay.is-open .ogl-menu-primary > ul > li > a {
	transform: translateY(0);
}

/* Staggered reveal for the first eight items */
.ogl-overlay.is-open .ogl-menu-primary > ul > li:nth-child(1) > a { transition-delay: 0.10s; }
.ogl-overlay.is-open .ogl-menu-primary > ul > li:nth-child(2) > a { transition-delay: 0.16s; }
.ogl-overlay.is-open .ogl-menu-primary > ul > li:nth-child(3) > a { transition-delay: 0.22s; }
.ogl-overlay.is-open .ogl-menu-primary > ul > li:nth-child(4) > a { transition-delay: 0.28s; }
.ogl-overlay.is-open .ogl-menu-primary > ul > li:nth-child(5) > a { transition-delay: 0.34s; }
.ogl-overlay.is-open .ogl-menu-primary > ul > li:nth-child(6) > a { transition-delay: 0.40s; }
.ogl-overlay.is-open .ogl-menu-primary > ul > li:nth-child(7) > a { transition-delay: 0.46s; }
.ogl-overlay.is-open .ogl-menu-primary > ul > li:nth-child(8) > a { transition-delay: 0.52s; }

.ogl-menu-primary > ul > li > a:hover,
.ogl-menu-primary > ul > li > a:focus,
.ogl-menu-primary .current-menu-item > a {
	color: var(--ogl-gold);
	font-style: italic;
}

/* Sub-menus inside the overlay are laid out inline, not as flyouts */
.ogl-menu-primary .sub-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 2rem;
	margin: 0.35rem 0 1.25rem;
	padding: 0 0 0 2px;
}

.ogl-menu-primary .sub-menu a {
	font-family: var(--ogl-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-menu-primary .sub-menu a:hover,
.ogl-menu-primary .sub-menu a:focus {
	color: var(--ogl-gold);
}

.ogl-overlay__aside {
	display: grid;
	gap: 2.25rem;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--ogl-ease) 0.45s, transform 0.6s var(--ogl-ease) 0.45s;
}

.ogl-overlay.is-open .ogl-overlay__aside {
	opacity: 1;
	transform: none;
}

.ogl-overlay__block-title {
	margin: 0 0 0.75rem;
	font-family: var(--ogl-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-overlay__block p,
.ogl-overlay__block a:not(.ogl-social__link) {
	color: var(--ogl-muted);
	font-size: 0.9375rem;
}

.ogl-overlay__block a:not(.ogl-social__link):hover,
.ogl-overlay__block a:not(.ogl-social__link):focus {
	color: var(--ogl-gold);
}

/*--------------------------------------------------------------
8.0 Hero
--------------------------------------------------------------*/
.ogl-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	background-color: #000;
}

.ogl-hero--tall  { min-height: 100svh; }
.ogl-hero--mid   { min-height: 78svh; }
.ogl-hero--short { min-height: 62svh; }

.ogl-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ogl-hero__media img,
.ogl-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.06);
	animation: ogl-hero-zoom 14s var(--ogl-ease) forwards;
}

.ogl-hero__fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 70% 20%, rgba(212, 165, 116, 0.18), transparent 60%),
		linear-gradient(160deg, #111 0%, #0A0A0A 45%, #191512 100%);
}

.ogl-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.25) 45%, rgba(10, 10, 10, 0.55) 100%);
}

.ogl-hero__inner {
	width: 100%;
	max-width: var(--ogl-max);
	margin-inline: auto;
	padding: calc(var(--ogl-header-h) + 3rem) var(--ogl-gutter) clamp(4rem, 9vw, 7.5rem);
}

.ogl-hero__content {
	max-width: 22ch;
}

.ogl-hero--center {
	align-items: center;
	text-align: center;
}

.ogl-hero--center .ogl-hero__content {
	max-width: 26ch;
	margin-inline: auto;
}

.ogl-hero--center .ogl-hero__meta {
	justify-content: center;
}

.ogl-hero__title {
	margin: 0;
	font-size: var(--ogl-fs-hero);
	line-height: 0.95;
	letter-spacing: -0.025em;
}

.ogl-hero__title em {
	font-style: italic;
	color: var(--ogl-gold);
}

.ogl-hero__subtitle {
	max-width: 46ch;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	font-size: var(--ogl-fs-lead);
	font-weight: 300;
	line-height: 1.6;
	color: rgba(237, 234, 229, 0.78);
}

.ogl-hero--center .ogl-hero__subtitle {
	margin-inline: auto;
}

.ogl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.ogl-hero--center .ogl-hero__actions {
	justify-content: center;
}

.ogl-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--ogl-line);
	font-size: 0.6875rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-hero__scroll {
	position: absolute;
	right: var(--ogl-gutter);
	bottom: clamp(2rem, 5vw, 3.5rem);
	display: none;
	align-items: center;
	gap: 1rem;
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-muted);
	writing-mode: vertical-rl;
}

.ogl-hero__scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 70px;
	background: linear-gradient(to bottom, var(--ogl-gold), transparent);
	animation: ogl-scroll-hint 2.4s var(--ogl-ease) infinite;
}

/* Inner page hero */
.ogl-page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(340px, 52vh, 620px);
	padding: calc(var(--ogl-header-h) + 4rem) 0 clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--ogl-line);
}

.ogl-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ogl-page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogl-page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.5));
}

.ogl-page-hero__title {
	max-width: 20ch;
	margin: 0;
	font-size: var(--ogl-fs-display);
}

.ogl-page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: 1.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-page-hero__meta a {
	color: var(--ogl-muted);
}

.ogl-page-hero__meta a:hover,
.ogl-page-hero__meta a:focus {
	color: var(--ogl-gold);
}

.ogl-breadcrumb {
	margin: 0 0 1.5rem;
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-breadcrumb a {
	color: var(--ogl-muted);
}

.ogl-breadcrumb a:hover,
.ogl-breadcrumb a:focus {
	color: var(--ogl-gold);
}

.ogl-breadcrumb span[aria-hidden="true"] {
	margin: 0 0.6rem;
	color: var(--ogl-gold);
}

/*--------------------------------------------------------------
9.0 Front page sections
--------------------------------------------------------------*/

/* 9.1 Brand intro ------------------------------------------- */
.ogl-intro {
	position: relative;
	text-align: center;
}

.ogl-intro__inner {
	max-width: 1100px;
	margin-inline: auto;
}

.ogl-intro__statement {
	margin: 0 0 2rem;
	font-family: var(--ogl-font-display);
	font-size: clamp(1.5rem, 3.6vw, 3rem);
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.ogl-intro__statement em {
	font-style: italic;
	color: var(--ogl-gold);
}

.ogl-intro__text {
	max-width: 62ch;
	margin-inline: auto;
	color: var(--ogl-muted);
	font-size: var(--ogl-fs-lead);
}

.ogl-intro__signature {
	display: block;
	margin-top: 2.5rem;
	font-family: var(--ogl-font-display);
	font-size: 1.5rem;
	font-style: italic;
	color: var(--ogl-gold);
}

.ogl-intro__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--ogl-line);
}

.ogl-stat__value {
	display: block;
	font-family: var(--ogl-font-display);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 1;
	color: var(--ogl-gold);
}

.ogl-stat__label {
	display: block;
	margin-top: 0.85rem;
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

/* 9.2 Collection grid --------------------------------------- */
.ogl-collections__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.ogl-collection {
	position: relative;
	display: block;
	color: inherit;
	overflow: hidden;
}

.ogl-collection .ogl-media {
	aspect-ratio: 3 / 4;
}

.ogl-collection:hover .ogl-media > img,
.ogl-collection:focus-visible .ogl-media > img {
	transform: scale(1.06);
}

.ogl-collection__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.1) 55%, transparent 100%);
	opacity: 0.9;
	transition: opacity 0.5s var(--ogl-ease);
}

.ogl-collection:hover .ogl-collection__veil {
	opacity: 1;
}

.ogl-collection__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.ogl-collection__season {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-collection__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.9vw, 1.75rem);
	color: var(--ogl-text);
	transition: color 0.35s var(--ogl-ease);
}

.ogl-collection:hover .ogl-collection__title {
	color: var(--ogl-gold);
}

.ogl-collection__excerpt {
	max-width: 34ch;
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	color: var(--ogl-muted);
	opacity: 0;
	max-height: 0;
	transform: translateY(10px);
	transition: opacity 0.45s var(--ogl-ease), transform 0.45s var(--ogl-ease), max-height 0.45s var(--ogl-ease);
	overflow: hidden;
}

.ogl-collection:hover .ogl-collection__excerpt,
.ogl-collection:focus-visible .ogl-collection__excerpt {
	opacity: 1;
	max-height: 8rem;
	transform: none;
}

.ogl-collection__index {
	position: absolute;
	top: clamp(1.25rem, 2vw, 2rem);
	right: clamp(1.25rem, 2vw, 2rem);
	font-family: var(--ogl-font-display);
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	color: rgba(237, 234, 229, 0.65);
}

.ogl-collections__footer {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

/* 9.3 Story -------------------------------------------------- */
.ogl-story__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}

.ogl-story__media {
	position: relative;
}

.ogl-story__media .ogl-media {
	aspect-ratio: 4 / 5;
}

.ogl-story__media-secondary {
	display: none;
	position: absolute;
	right: -8%;
	bottom: -12%;
	width: 46%;
	border: 8px solid var(--ogl-bg);
}

.ogl-story__media-secondary .ogl-media {
	aspect-ratio: 1 / 1;
}

.ogl-story__badge {
	position: absolute;
	top: -18px;
	left: -18px;
	display: grid;
	place-items: center;
	width: clamp(92px, 11vw, 130px);
	aspect-ratio: 1;
	border: 1px solid var(--ogl-gold);
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	text-align: center;
	font-family: var(--ogl-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ogl-gold);
	line-height: 1.5;
}

.ogl-story__body {
	max-width: 56ch;
}

.ogl-story__list {
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ogl-line);
}

.ogl-story__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--ogl-line);
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-story__list li::before {
	content: "—";
	color: var(--ogl-gold);
}

.ogl-story__actions {
	margin-top: 2.5rem;
}

/* Reverse layout modifier */
.ogl-story--reverse .ogl-story__media {
	order: 2;
}

/* 9.4 Services ----------------------------------------------- */
.ogl-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--ogl-line);
}

.ogl-service {
	position: relative;
	padding: clamp(2rem, 3.5vw, 3.25rem) 0;
	border-bottom: 1px solid var(--ogl-line);
	transition: background-color 0.5s var(--ogl-ease), padding-inline 0.5s var(--ogl-ease);
}

.ogl-service:hover {
	background-color: var(--ogl-bg-raise);
}

.ogl-service__num {
	display: block;
	margin-bottom: 1.25rem;
	font-family: var(--ogl-font-display);
	font-size: 0.875rem;
	letter-spacing: 0.2em;
	color: var(--ogl-gold);
}

.ogl-service__title {
	margin: 0 0 1rem;
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
}

.ogl-service__text {
	margin: 0;
	max-width: 40ch;
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-service__link {
	margin-top: 1.5rem;
}

/* 9.5 Asymmetric gallery ------------------------------------- */
.ogl-gallery {
	overflow: hidden;
}

.ogl-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.75rem, 1.6vw, 1.75rem);
}

.ogl-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	color: inherit;
	grid-column: span 2;
}

.ogl-gallery__item .ogl-media {
	aspect-ratio: 4 / 5;
	height: 100%;
}

.ogl-gallery__item:hover .ogl-media > img,
.ogl-gallery__item:focus-visible .ogl-media > img {
	transform: scale(1.05);
}

.ogl-gallery__caption {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.25rem, 2vw, 2rem);
	background: linear-gradient(to top, rgba(10, 10, 10, 0.88), transparent);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s var(--ogl-ease), transform 0.5s var(--ogl-ease);
}

.ogl-gallery__item:hover .ogl-gallery__caption,
.ogl-gallery__item:focus-visible .ogl-gallery__caption {
	opacity: 1;
	transform: none;
}

.ogl-gallery__title {
	margin: 0;
	font-size: 1.125rem;
	color: var(--ogl-text);
}

.ogl-gallery__tag {
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-gold);
	white-space: nowrap;
}

/* 9.6 Social / Instagram ------------------------------------- */
.ogl-social-section {
	text-align: center;
}

.ogl-social-section__handle {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--ogl-font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-style: italic;
	color: var(--ogl-gold);
}

.ogl-social-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.5rem, 1vw, 1rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.ogl-social-grid__item {
	position: relative;
	display: block;
	overflow: hidden;
}

.ogl-social-grid__item .ogl-media {
	aspect-ratio: 1 / 1;
}

.ogl-social-grid__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.55);
	opacity: 0;
	transition: opacity 0.45s var(--ogl-ease);
}

.ogl-social-grid__item:hover::after,
.ogl-social-grid__item:focus-visible::after {
	opacity: 1;
}

.ogl-social-grid__icon {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	color: var(--ogl-gold);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.45s var(--ogl-ease), transform 0.45s var(--ogl-ease);
}

.ogl-social-grid__item:hover .ogl-social-grid__icon,
.ogl-social-grid__item:focus-visible .ogl-social-grid__icon {
	opacity: 1;
	transform: none;
}

.ogl-social-grid__icon svg {
	width: 26px;
	height: 26px;
}

/* Shared social icon list */
.ogl-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogl-social__link {
	display: grid;
	place-items: center;
	/*
	 * No chip and no ring: the glyph alone carries the brand. The 40px box is
	 * kept so the tap target still clears the 40px minimum on touch devices
	 * even though nothing is drawn around the icon.
	 */
	width: 40px;
	height: 40px;
	color: var(--ogl-text);
	transition: color 0.3s var(--ogl-ease), transform 0.3s var(--ogl-ease),
		filter 0.3s var(--ogl-ease);
}

.ogl-social__link:hover,
.ogl-social__link:focus {
	/* Brand colour is held on hover — only brightness and position change. */
	transform: translateY(-3px);
	filter: brightness(1.25);
}

.ogl-social__link:focus-visible {
	outline: 2px solid var(--ogl-gold);
	outline-offset: 4px;
	border-radius: 4px;
}

.ogl-social__link svg {
	/* Larger than before: with the surrounding circle gone the glyph has to
	   carry the whole mark on its own. */
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/*
 * Brand colours, tuned for the near-black footer.
 *
 * Several official values are mixed for a white page and go muddy on #0A0A0A —
 * Facebook #1877F2, Pinterest #E60023 and especially LinkedIn #0A66C2 all sit
 * too dark. Each is lifted toward the same hue until it reads cleanly against
 * the footer while staying unmistakably that network's colour. Instagram's
 * #E1306C and TikTok's red already work as published.
 */
.ogl-social__link--instagram { color: #E1306C; }
.ogl-social__link--facebook  { color: #3B8CFF; }
.ogl-social__link--tiktok    { color: #FF3B5C; }
.ogl-social__link--youtube   { color: #FF3D3D; }
.ogl-social__link--pinterest { color: #E8354F; }
.ogl-social__link--linkedin  { color: #3F92D9; }
.ogl-social__link--x         { color: #F5F5F5; }

/* Newsletter */
.ogl-newsletter {
	display: grid;
	gap: 1rem;
	max-width: 480px;
}

.ogl-newsletter__row {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--ogl-line);
	transition: border-color 0.35s var(--ogl-ease);
}

.ogl-newsletter__row:focus-within {
	border-color: var(--ogl-gold);
}

.ogl-newsletter input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.9rem 0;
	border: 0;
	background: none;
	color: var(--ogl-text);
	font-family: inherit;
	font-size: 0.9375rem;
}

.ogl-newsletter input[type="email"]:focus {
	outline: none;
}

.ogl-newsletter input::placeholder {
	color: var(--ogl-muted);
}

.ogl-newsletter button {
	flex: none;
	padding: 0 0 0 1rem;
	border: 0;
	background: none;
	color: var(--ogl-gold);
	font-family: inherit;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.35s var(--ogl-ease);
}

.ogl-newsletter button:hover,
.ogl-newsletter button:focus {
	color: var(--ogl-text);
}

/* CTA band */
.ogl-cta {
	position: relative;
	text-align: center;
	isolation: isolate;
	overflow: hidden;
}

.ogl-cta__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ogl-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogl-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(10, 10, 10, 0.78);
}

.ogl-cta__title {
	max-width: 18ch;
	margin: 0 auto 1.5rem;
	font-size: var(--ogl-fs-display);
}

.ogl-cta__text {
	max-width: 52ch;
	margin: 0 auto 2.5rem;
	color: var(--ogl-muted);
	font-size: var(--ogl-fs-lead);
}

/*--------------------------------------------------------------
10.0 Page & post templates
--------------------------------------------------------------*/
.ogl-main {
	display: block;
}

.ogl-entry {
	padding-block: var(--ogl-section);
}

.ogl-entry__content {
	max-width: var(--ogl-measure);
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.85;
	color: rgba(237, 234, 229, 0.86);
}

.ogl-entry__content > * + * {
	margin-top: 1.5em;
}

.ogl-entry__content h2,
.ogl-entry__content h3,
.ogl-entry__content h4 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	color: var(--ogl-text);
}

.ogl-entry__content a:not(.ogl-btn) {
	color: var(--ogl-gold);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.4s var(--ogl-ease), color 0.35s var(--ogl-ease);
}

.ogl-entry__content a:not(.ogl-btn):hover {
	background-size: 0 1px;
	color: var(--ogl-text);
}

.ogl-entry__content img {
	margin-inline: auto;
}

.ogl-entry__content figcaption,
.wp-caption-text {
	margin-top: 0.85rem;
	font-size: var(--ogl-fs-small);
	letter-spacing: 0.06em;
	color: var(--ogl-muted);
	text-align: center;
}

.ogl-entry__footer {
	max-width: var(--ogl-measure);
	margin: clamp(3rem, 6vw, 5rem) auto 0;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ogl-line);
}

.ogl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.ogl-tags a,
.ogl-entry__footer .tags-links a,
.ogl-entry__footer .cat-links a {
	display: inline-block;
	padding: 0.45rem 1.1rem;
	border: 1px solid var(--ogl-line);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-tags a:hover,
.ogl-tags a:focus {
	border-color: var(--ogl-gold);
	color: var(--ogl-gold);
}

.ogl-share {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.ogl-share__label {
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

/* Author box */
.ogl-author {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: var(--ogl-measure);
	margin: clamp(3rem, 5vw, 4rem) auto 0;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--ogl-bg-raise);
	border: 1px solid var(--ogl-line);
}

.ogl-author__avatar img {
	border-radius: 50%;
	filter: grayscale(100%);
}

.ogl-author__name {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.ogl-author__bio {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

/* Post navigation */
.ogl-post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin-top: clamp(3rem, 6vw, 5rem);
	background: var(--ogl-line);
	border-block: 1px solid var(--ogl-line);
}

.ogl-post-nav__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(2rem, 4vw, 3rem) var(--ogl-gutter);
	background: var(--ogl-bg);
	transition: background-color 0.45s var(--ogl-ease);
}

.ogl-post-nav__item:hover {
	background: var(--ogl-bg-raise);
}

.ogl-post-nav__item--next {
	text-align: right;
	align-items: flex-end;
}

.ogl-post-nav__label {
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-post-nav__title {
	margin: 0;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	color: var(--ogl-text);
	transition: color 0.35s var(--ogl-ease);
}

.ogl-post-nav__item:hover .ogl-post-nav__title {
	color: var(--ogl-gold);
}

/* Related posts */
.ogl-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}

/*--------------------------------------------------------------
11.0 Archive / index
--------------------------------------------------------------*/
.ogl-archive {
	padding-block: var(--ogl-section);
}

.ogl-posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 4vw, 3.5rem);
}

.ogl-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.ogl-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.ogl-card__media .ogl-media {
	aspect-ratio: 3 / 4;
}

.ogl-card:hover .ogl-media > img {
	transform: scale(1.05);
}

.ogl-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 0.9rem;
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-card__meta a {
	color: var(--ogl-gold);
}

.ogl-card__title {
	margin: 0 0 0.85rem;
	font-size: clamp(1.25rem, 1.9vw, 1.625rem);
	line-height: 1.2;
}

.ogl-card__title a {
	color: var(--ogl-text);
}

.ogl-card__title a:hover,
.ogl-card__title a:focus {
	color: var(--ogl-gold);
}

.ogl-card__excerpt {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-card__more {
	margin-top: auto;
}

/* Featured/first post on the blog index */
.ogl-card--feature {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
	border-bottom: 1px solid var(--ogl-line);
}

.ogl-card--feature .ogl-card__media {
	margin-bottom: 0;
}

.ogl-card--feature .ogl-card__media .ogl-media {
	aspect-ratio: 4 / 3;
}

.ogl-card--feature .ogl-card__title {
	font-size: var(--ogl-fs-h2);
}

/* Pagination */
.ogl-pagination {
	margin-top: clamp(3.5rem, 6vw, 5.5rem);
	padding-top: 2.5rem;
	border-top: 1px solid var(--ogl-line);
}

.ogl-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.ogl-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 0.75rem;
	border: 1px solid transparent;
	color: var(--ogl-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	transition: color 0.35s var(--ogl-ease), border-color 0.35s var(--ogl-ease);
}

.ogl-pagination .page-numbers:hover,
.ogl-pagination .page-numbers:focus {
	color: var(--ogl-gold);
	border-color: var(--ogl-gold-line);
}

.ogl-pagination .page-numbers.current {
	color: var(--ogl-gold);
	border-color: var(--ogl-gold);
}

/* Search form */
.ogl-search-form {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 520px;
	border-bottom: 1px solid var(--ogl-line);
	transition: border-color 0.35s var(--ogl-ease);
}

.ogl-search-form:focus-within {
	border-color: var(--ogl-gold);
}

.ogl-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.9rem 0;
	border: 0;
	background: none;
	color: var(--ogl-text);
	font-family: inherit;
	font-size: 1rem;
}

.ogl-search-form input[type="search"]:focus {
	outline: none;
}

.ogl-search-form button {
	flex: none;
	border: 0;
	background: none;
	color: var(--ogl-gold);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

/* No results */
.ogl-none {
	max-width: 56ch;
}

/*--------------------------------------------------------------
12.0 Comments
--------------------------------------------------------------*/
.ogl-comments {
	max-width: var(--ogl-measure);
	margin: clamp(3.5rem, 6vw, 5.5rem) auto 0;
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	border-top: 1px solid var(--ogl-line);
}

.ogl-comments__title {
	margin-bottom: 2.5rem;
	font-size: var(--ogl-fs-h3);
}

.comment-list {
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 0 0 0 clamp(1rem, 4vw, 3rem);
	padding: 0;
	list-style: none;
}

.comment-body {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--ogl-line);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.comment-author img {
	border-radius: 50%;
	filter: grayscale(100%);
}

.comment-author .fn {
	font-family: var(--ogl-font-display);
	font-size: 1.0625rem;
	font-style: normal;
	color: var(--ogl-text);
}

.comment-metadata,
.comment-metadata a {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.comment-content {
	font-size: 0.9375rem;
	color: rgba(237, 234, 229, 0.82);
}

.reply a {
	font-size: 0.625rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.comment-respond {
	margin-top: 3rem;
}

.comment-reply-title {
	font-size: var(--ogl-fs-h3);
	margin-bottom: 1.5rem;
}

.comment-form {
	display: grid;
	gap: 1.5rem;
}

.comment-form .comment-notes,
.comment-form .logged-in-as {
	font-size: var(--ogl-fs-small);
	color: var(--ogl-muted);
	margin: 0;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 0.95rem 1.15rem;
	border: 1px solid var(--ogl-line);
	background: var(--ogl-bg-raise);
	color: var(--ogl-text);
	font-family: inherit;
	font-size: 0.9375rem;
	transition: border-color 0.35s var(--ogl-ease), background-color 0.35s var(--ogl-ease);
}

textarea {
	min-height: 170px;
	resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ogl-gold);
	outline: none;
}

label {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

input[type="submit"],
button[type="submit"].ogl-btn {
	width: auto;
	cursor: pointer;
}

.comment-form input[type="submit"] {
	padding: 1.05rem 2.6rem;
	border: 1px solid var(--ogl-gold);
	background: transparent;
	color: var(--ogl-gold);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	transition: background-color 0.4s var(--ogl-ease), color 0.4s var(--ogl-ease);
}

.comment-form input[type="submit"]:hover {
	background: var(--ogl-gold);
	color: var(--ogl-bg);
}

/*--------------------------------------------------------------
13.0 Footer
--------------------------------------------------------------*/
.ogl-footer {
	position: relative;
	background: var(--ogl-bg-alt);
	border-top: 1px solid var(--ogl-line);
}

.ogl-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.ogl-footer__brand {
	max-width: 38ch;
}

.ogl-footer__logo {
	margin: 0 0 1.25rem;
	font-family: var(--ogl-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ogl-footer__logo a {
	color: var(--ogl-text);
}

.ogl-footer__logo a:hover,
.ogl-footer__logo a:focus {
	color: var(--ogl-gold);
}

.ogl-footer__desc {
	margin: 0 0 2rem;
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-footer__nav-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
}

.ogl-footer__col-title {
	margin: 0 0 1.5rem;
	font-family: var(--ogl-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-footer__menu ul,
.ogl-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogl-footer__menu li {
	margin-bottom: 0.85rem;
}

.ogl-footer__menu a {
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-footer__menu a:hover,
.ogl-footer__menu a:focus {
	color: var(--ogl-gold);
	padding-left: 0.35rem;
}

.ogl-footer__menu a {
	transition: color 0.35s var(--ogl-ease), padding-left 0.35s var(--ogl-ease);
}

.ogl-footer__contact {
	font-size: 0.9375rem;
	color: var(--ogl-muted);
	font-style: normal;
	/*
	 * A long address like enquiry@oglcouture.com.ng and an international
	 * phone number are single unbreakable tokens. Without this they push the
	 * footer wider than a narrow phone screen and the whole page scrolls
	 * sideways.
	 */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ogl-footer__contact p {
	margin-bottom: 0.85rem;
}

.ogl-footer__contact a {
	overflow-wrap: anywhere;
}

/* A second menu in the same column continues the first, so no extra gap. */
.ogl-footer__menu + .ogl-footer__menu {
	margin-top: 0.85rem;
}

.ogl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding-block: 2rem;
	border-top: 1px solid var(--ogl-line);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: var(--ogl-muted);
}

.ogl-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogl-footer__legal a {
	color: var(--ogl-muted);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.625rem;
}

.ogl-footer__legal a:hover,
.ogl-footer__legal a:focus {
	color: var(--ogl-gold);
}

.ogl-footer__credit {
	margin: 0;
}

/* Back to top */
.ogl-to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	z-index: 800;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ogl-gold-line);
	background: rgba(10, 10, 10, 0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--ogl-gold);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.45s var(--ogl-ease), transform 0.45s var(--ogl-ease), visibility 0s linear 0.45s, background-color 0.35s var(--ogl-ease);
}

.ogl-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.45s var(--ogl-ease), transform 0.45s var(--ogl-ease), visibility 0s linear 0s, background-color 0.35s var(--ogl-ease);
}

.ogl-to-top:hover,
.ogl-to-top:focus {
	background: var(--ogl-gold);
	color: var(--ogl-bg);
}

.ogl-to-top svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/*--------------------------------------------------------------
14.0 WordPress core classes
--------------------------------------------------------------*/
.alignleft {
	float: left;
	margin: 0.5rem 2rem 1.5rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1.5rem 2rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	width: calc(100% + 12vw);
	max-width: calc(100% + 12vw);
	margin-inline: -6vw;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wp-caption {
	max-width: 100%;
}

.sticky .ogl-card__title::before {
	content: "★";
	margin-right: 0.6rem;
	color: var(--ogl-gold);
}

.bypostauthor > .comment-body .fn::after {
	content: "•";
	margin-left: 0.5rem;
	color: var(--ogl-gold);
}

.gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}

.gallery-columns-3 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }

.wp-block-quote,
.wp-block-pullquote {
	border-left: 1px solid var(--ogl-gold);
}

.wp-block-button__link {
	border-radius: 0;
	background: var(--ogl-gold);
	color: var(--ogl-bg);
	font-size: 0.6875rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	padding: 1.05rem 2.6rem;
}

/* Widgets (footer only) */
.widget {
	margin-bottom: 2.5rem;
}

.widget-title {
	margin: 0 0 1.5rem;
	font-family: var(--ogl-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	margin-bottom: 0.85rem;
	font-size: 0.9375rem;
}

.widget a {
	color: var(--ogl-muted);
}

.widget a:hover,
.widget a:focus {
	color: var(--ogl-gold);
}

/*--------------------------------------------------------------
15.0 Animations
--------------------------------------------------------------*/
@keyframes ogl-hero-zoom {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

@keyframes ogl-scroll-hint {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Scroll-reveal: elements start hidden only when JS is available */
.js .ogl-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.9s var(--ogl-ease), transform 0.9s var(--ogl-ease);
	will-change: opacity, transform;
}

.js .ogl-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js .ogl-reveal--delay-1 { transition-delay: 0.1s; }
.js .ogl-reveal--delay-2 { transition-delay: 0.2s; }
.js .ogl-reveal--delay-3 { transition-delay: 0.3s; }
.js .ogl-reveal--delay-4 { transition-delay: 0.4s; }

/* Hero copy entrance */
.ogl-hero__content > * {
	animation: ogl-rise 1.1s var(--ogl-ease) both;
}

.ogl-hero__content > *:nth-child(1) { animation-delay: 0.15s; }
.ogl-hero__content > *:nth-child(2) { animation-delay: 0.28s; }
.ogl-hero__content > *:nth-child(3) { animation-delay: 0.41s; }
.ogl-hero__content > *:nth-child(4) { animation-delay: 0.54s; }
.ogl-hero__content > *:nth-child(5) { animation-delay: 0.67s; }

@keyframes ogl-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.js .ogl-reveal {
		opacity: 1;
		transform: none;
	}

	.ogl-menu-primary > ul > li > a {
		transform: none;
	}
}

/*--------------------------------------------------------------
16.0 Responsive
--------------------------------------------------------------*/

/* ≥ 480px — small phones landscape */
@media (min-width: 480px) {
	.ogl-social-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ogl-intro__stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ≥ 600px */
@media (min-width: 600px) {
	.ogl-burger__label {
		display: inline;
	}

	.ogl-author {
		grid-template-columns: 96px 1fr;
		gap: 2rem;
		align-items: center;
	}

	.ogl-collections__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ogl-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ogl-gallery__item { grid-column: span 2; }

	.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
	.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ≥ 782px — tablets */
@media (min-width: 782px) {
	.ogl-posts {
		grid-template-columns: repeat(2, 1fr);
	}

	.ogl-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ogl-post-nav {
		grid-template-columns: repeat(2, 1fr);
	}

	.ogl-card--feature {
		grid-template-columns: 1.15fr 1fr;
		grid-column: 1 / -1;
	}

	.ogl-services__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.ogl-footer__top {
		/* The nav side carries four columns now, so it needs the wider share. */
		grid-template-columns: 1fr 2.4fr;
	}

	.ogl-footer__nav-groups {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}

	.ogl-social-grid {
		grid-template-columns: repeat(6, 1fr);
	}

	.ogl-hero__scroll {
		display: flex;
	}

	.ogl-story__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ogl-story__media-secondary {
		display: block;
	}

	.ogl-intro__stats {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Asymmetric gallery rhythm:
	   large / small / small / wide / tall — repeating in a 4-column bed. */
	.ogl-gallery__item--a { grid-column: span 2; grid-row: span 2; }
	.ogl-gallery__item--a .ogl-media { aspect-ratio: auto; min-height: 100%; }
	.ogl-gallery__item--b { grid-column: span 2; }
	.ogl-gallery__item--b .ogl-media { aspect-ratio: 16 / 10; }
	.ogl-gallery__item--c { grid-column: span 1; }
	.ogl-gallery__item--c .ogl-media { aspect-ratio: 3 / 4; }
	.ogl-gallery__item--d { grid-column: span 1; }
	.ogl-gallery__item--d .ogl-media { aspect-ratio: 3 / 4; }
	.ogl-gallery__item--e { grid-column: span 3; }
	.ogl-gallery__item--e .ogl-media { aspect-ratio: 21 / 9; }
	.ogl-gallery__item--f { grid-column: span 1; grid-row: span 2; }
	.ogl-gallery__item--f .ogl-media { aspect-ratio: auto; min-height: 100%; }
	.ogl-gallery__item--g { grid-column: span 3; }
	.ogl-gallery__item--g .ogl-media { aspect-ratio: 21 / 9; }
}

/* ≥ 1024px — laptops */
@media (min-width: 1024px) {
	.ogl-nav-inline {
		display: block;
	}

	.ogl-header__cta {
		display: inline-flex;
	}

	.ogl-overlay__grid {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}

	.ogl-overlay__aside {
		grid-template-columns: repeat(2, 1fr);
		padding-top: 1rem;
	}

	.ogl-collections__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Offset every second collection card for an editorial rhythm */
	.ogl-collections--offset .ogl-collection:nth-child(even) {
		transform: translateY(clamp(2rem, 4vw, 4.5rem));
	}

	.ogl-collections--offset {
		padding-bottom: clamp(2rem, 4vw, 4.5rem);
	}

	.ogl-services__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ogl-service {
		padding-inline: clamp(1rem, 2vw, 2rem);
		border-right: 1px solid var(--ogl-line);
	}

	.ogl-service:last-child {
		border-right: 0;
	}

	.ogl-footer__top {
		grid-template-columns: 1fr 2fr;
		gap: clamp(3rem, 7vw, 8rem);
	}

	.ogl-hero__content {
		max-width: 20ch;
	}

	.ogl-posts {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ≥ 1440px — large desktops */
@media (min-width: 1440px) {
	:root {
		--ogl-header-h: 104px;
	}

	.ogl-footer__nav-groups {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Short desktop windows: scale the overlay menu down so the whole list clears
 * the header and fits on screen. Width-gated so phones keep their larger type.
 */
@media (min-width: 768px) and (max-height: 820px) {
	.ogl-overlay__inner {
		padding-top: calc(var(--ogl-header-h) + 1.75rem);
		padding-bottom: 2rem;
	}

	.ogl-overlay__grid {
		gap: clamp(2rem, 4vw, 3.5rem);
	}

	.ogl-menu-primary > ul > li > a {
		font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	}
}

/* Landscape phones: shorten the hero so content stays reachable */
@media (max-width: 900px) and (orientation: landscape) {
	.ogl-hero {
		min-height: 120svh;
	}

	.ogl-overlay__grid {
		margin-block: 0;
	}

	.ogl-menu-primary > ul > li > a {
		font-size: clamp(1.5rem, 5vw, 2.25rem);
	}
}

/* Hover-less devices: reveal captions/excerpts that are hover-gated */
@media (hover: none) {
	.ogl-collection__excerpt,
	.ogl-gallery__caption {
		opacity: 1;
		max-height: none;
		transform: none;
	}
}

/*--------------------------------------------------------------
17.0 Portfolio content types
----------------------------------------------------------------
Everything below extends the system above — same tokens, same
spacing scale, same reveal classes. No new colours, no new fonts.

     17.1  Filter bar
     17.2  Work grid & cards
     17.3  Collection spreads
     17.4  Single work layouts
     17.5  Editorials
     17.6  Videos
     17.7  Projects list
     17.8  About page
     17.9  Contact page
     17.10 Lightbox
     17.11 Portfolio responsive
--------------------------------------------------------------*/

/* 17.1 Filter bar -------------------------------------------- */
.ogl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ogl-line);
}

.ogl-filters__item {
	position: relative;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	color: var(--ogl-muted);
	cursor: pointer;
	font-family: var(--ogl-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	transition: color 0.35s var(--ogl-ease);
}

.ogl-filters__item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--ogl-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.45s var(--ogl-ease);
}

.ogl-filters__item:hover,
.ogl-filters__item:focus-visible,
.ogl-filters__item.is-active {
	color: var(--ogl-gold);
}

.ogl-filters__item:hover::after,
.ogl-filters__item.is-active::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.ogl-filters__empty {
	padding: 4rem 0;
	text-align: center;
	color: var(--ogl-muted);
	font-size: var(--ogl-fs-lead);
}

/* 17.2 Work grid & cards ------------------------------------- */
.ogl-work-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

.ogl-work {
	position: relative;
}

.ogl-work__link {
	display: block;
	color: inherit;
}

.ogl-work__media {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.ogl-work__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.55), transparent 60%);
	opacity: 0;
	transition: opacity 0.5s var(--ogl-ease);
}

.ogl-work__link:hover .ogl-media > img,
.ogl-work__link:focus-visible .ogl-media > img {
	transform: scale(1.05);
}

.ogl-work__link:hover .ogl-work__veil,
.ogl-work__link:focus-visible .ogl-work__veil {
	opacity: 1;
}

.ogl-work__body {
	display: block;
}

.ogl-work__type {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-work__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.25rem, 1.9vw, 1.625rem);
	line-height: 1.2;
	transition: color 0.35s var(--ogl-ease);
}

.ogl-work__link:hover .ogl-work__title,
.ogl-work__link:focus-visible .ogl-work__title {
	color: var(--ogl-gold);
}

.ogl-work__excerpt {
	display: block;
	max-width: 40ch;
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-work__year {
	display: block;
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

/* Cards hidden by the filter must not leave gaps in the grid. */
.ogl-work[hidden],
.ogl-project[hidden] {
	display: none !important;
}

/* 17.3 Collection spreads ------------------------------------ */
.ogl-spread {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	border-bottom: 1px solid var(--ogl-line);
}

.ogl-spread:first-child {
	padding-top: 0;
}

.ogl-spread:last-of-type {
	border-bottom: 0;
}

.ogl-spread__media {
	display: block;
	overflow: hidden;
}

.ogl-spread__media .ogl-media > img {
	transition: transform 1.2s var(--ogl-ease);
}

.ogl-spread:hover .ogl-media > img {
	transform: scale(1.04);
}

.ogl-spread__title {
	margin: 0 0 1.25rem;
	font-size: var(--ogl-fs-display);
	line-height: 1.05;
}

.ogl-spread__title a {
	color: var(--ogl-text);
}

.ogl-spread__title a:hover,
.ogl-spread__title a:focus {
	color: var(--ogl-gold);
}

.ogl-spread__year {
	display: block;
	margin-top: 1.5rem;
	font-family: var(--ogl-font-display);
	font-size: 1.125rem;
	letter-spacing: 0.18em;
	color: var(--ogl-gold);
}

.ogl-spread__actions {
	margin-top: 2rem;
}

/* 17.4 Single work layouts ----------------------------------- */
.ogl-work-intro__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 4rem);
}

.ogl-entry__content--flush {
	max-width: none;
	margin-inline: 0;
}

.ogl-meta-list {
	margin: 0;
	border-top: 1px solid var(--ogl-line);
}

.ogl-meta-list__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.35rem;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--ogl-line);
}

.ogl-meta-list dt {
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-meta-list dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ogl-text);
}

/* Designer statement */
.ogl-statement {
	max-width: 30ch;
	margin: clamp(3rem, 6vw, 5rem) auto 0;
	padding: 0;
	border: 0;
	text-align: center;
	font-family: var(--ogl-font-display);
	font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	font-style: italic;
	line-height: 1.3;
	color: var(--ogl-text);
}

.ogl-statement p {
	margin-bottom: 0.5em;
}

.ogl-statement cite {
	display: block;
	margin-top: 1.5rem;
	font-family: var(--ogl-font-body);
	font-size: 0.625rem;
	font-style: normal;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

/* Credits */
.ogl-credits__title {
	margin: 0 0 1.5rem;
	font-family: var(--ogl-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-credits__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ogl-line);
}

.ogl-credits__list li {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--ogl-line);
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

/* Inline video player */
.ogl-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	border: 1px solid var(--ogl-line);
}

.ogl-video-frame iframe,
.ogl-video-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* Gallery: even variant used for behind-the-scenes rows */
.ogl-gallery__grid--even {
	grid-template-columns: repeat(2, 1fr);
}

.ogl-gallery__item--even {
	grid-column: span 1;
}

.ogl-gallery__item.is-zoomable {
	cursor: zoom-in;
}

/* 17.5 Editorials -------------------------------------------- */
.ogl-editorials {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem);
}

.ogl-editorial__media {
	display: block;
	overflow: hidden;
	margin-bottom: 1.75rem;
}

.ogl-editorial__media .ogl-media > img {
	transition: transform 1.2s var(--ogl-ease);
}

.ogl-editorial:hover .ogl-media > img {
	transform: scale(1.04);
}

.ogl-editorial__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1rem;
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-editorial__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
}

.ogl-editorial__title a {
	color: var(--ogl-text);
}

.ogl-editorial__title a:hover,
.ogl-editorial__title a:focus {
	color: var(--ogl-gold);
}

.ogl-editorial__excerpt {
	max-width: 52ch;
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-editorial__credit {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-editorial__actions {
	margin-top: 1.75rem;
}

/* 17.6 Videos ------------------------------------------------ */
.ogl-video-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 3.5vw, 3rem);
}

.ogl-video-card__link {
	display: block;
	color: inherit;
}

.ogl-video-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: 1.5rem;
	background: #000;
}

.ogl-video-card__veil {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.3);
	transition: background-color 0.5s var(--ogl-ease);
}

.ogl-video-card__link:hover .ogl-video-card__veil,
.ogl-video-card__link:focus-visible .ogl-video-card__veil {
	background: rgba(10, 10, 10, 0.55);
}

.ogl-video-card__link:hover .ogl-media > img,
.ogl-video-card__link:focus-visible .ogl-media > img {
	transform: scale(1.05);
}

.ogl-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: clamp(58px, 7vw, 78px);
	aspect-ratio: 1;
	border: 1px solid var(--ogl-gold);
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.4);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ogl-gold);
	transform: translate(-50%, -50%);
	transition: background-color 0.45s var(--ogl-ease), color 0.45s var(--ogl-ease), transform 0.45s var(--ogl-ease);
}

.ogl-video-card__link:hover .ogl-video-card__play,
.ogl-video-card__link:focus-visible .ogl-video-card__play {
	background: var(--ogl-gold);
	color: var(--ogl-bg);
	transform: translate(-50%, -50%) scale(1.06);
}

.ogl-video-card__duration {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	padding: 0.3rem 0.7rem;
	background: rgba(10, 10, 10, 0.75);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	color: var(--ogl-text);
}

.ogl-video-card__type {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-video-card__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	transition: color 0.35s var(--ogl-ease);
}

.ogl-video-card__link:hover .ogl-video-card__title {
	color: var(--ogl-gold);
}

.ogl-video-card__year {
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

/* Single video page */
.ogl-video-stage {
	padding-top: calc(var(--ogl-header-h) + clamp(3rem, 6vw, 5rem));
}

.ogl-video-stage__title {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	font-size: var(--ogl-fs-display);
}

.ogl-video-stage__foot {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* 17.7 Projects list ----------------------------------------- */
.ogl-projects {
	border-top: 1px solid var(--ogl-line);
}

.ogl-project {
	border-bottom: 1px solid var(--ogl-line);
}

.ogl-project__link {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem 1.75rem;
	align-items: center;
	padding: clamp(1.75rem, 3vw, 2.75rem) 0;
	color: inherit;
	transition: padding-inline 0.5s var(--ogl-ease);
}

.ogl-project__link:hover {
	padding-inline: clamp(0.5rem, 1.5vw, 1.5rem);
}

.ogl-project__index {
	font-family: var(--ogl-font-display);
	font-size: 0.875rem;
	letter-spacing: 0.2em;
	color: var(--ogl-gold);
}

.ogl-project__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.375rem, 2.6vw, 2.25rem);
	line-height: 1.1;
	transition: color 0.35s var(--ogl-ease);
}

.ogl-project__link:hover .ogl-project__title {
	color: var(--ogl-gold);
}

.ogl-project__excerpt {
	display: block;
	max-width: 56ch;
	margin-bottom: 0.9rem;
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-project__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-project__media {
	display: none;
	width: 120px;
	overflow: hidden;
}

/* 17.8 About page -------------------------------------------- */
.ogl-signature {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--ogl-line);
}

.ogl-signature__name {
	display: block;
	font-family: var(--ogl-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-style: italic;
	color: var(--ogl-gold);
	transition: color 0.35s var(--ogl-ease);
}

a.ogl-signature__name:hover,
a.ogl-signature__name:focus {
	color: var(--ogl-text);
}

.ogl-signature__role {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-pullquote {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	font-family: var(--ogl-font-display);
	font-size: clamp(1.625rem, 4.2vw, 3.25rem);
	font-style: italic;
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: var(--ogl-text);
	text-wrap: balance;
}

.ogl-pullquote::before {
	content: "";
	display: block;
	width: 42px;
	height: 1px;
	margin: 0 auto 2.5rem;
	background: var(--ogl-gold);
}

.ogl-pullquote p:last-child {
	margin-bottom: 0;
}

/*
 * The highlights read as a centred summary rather than a left-hand list.
 * The heading, the rows and the button all share one narrower centred
 * column so the block sits symmetrically on the page.
 */
.ogl-highlights .ogl-section__head {
	justify-content: center;
	text-align: center;
}

.ogl-highlights .ogl-section__head-text {
	max-width: 60ch;
	margin-inline: auto;
}

.ogl-highlights__list {
	max-width: 54rem;
	margin-inline: auto;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ogl-line);
}

.ogl-highlight {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem;
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--ogl-line);
	text-align: center;
}

.ogl-highlight__label {
	font-family: var(--ogl-font-display);
	font-size: 1.125rem;
	color: var(--ogl-text);
}

.ogl-highlight__detail {
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-highlights__actions {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}

/* 17.9 Contact page ------------------------------------------ */
.ogl-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
}

.ogl-contact__block {
	margin-bottom: 2.5rem;
}

.ogl-contact__block-title {
	margin: 0 0 1.25rem;
	font-family: var(--ogl-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-contact__services {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ogl-line);
}

.ogl-contact__services li {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--ogl-line);
	font-size: 0.9375rem;
	color: var(--ogl-muted);
}

.ogl-contact__details {
	font-style: normal;
	font-size: 1.0625rem;
	color: var(--ogl-muted);
}

.ogl-contact__details p {
	margin-bottom: 0.75rem;
}

/* Form */
.ogl-form {
	display: grid;
	gap: 1.75rem;
}

.ogl-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

.ogl-form__field label {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-form__field label span[aria-hidden="true"] {
	color: var(--ogl-gold);
}

.ogl-form__field input,
.ogl-form__field select,
.ogl-form__field textarea {
	width: 100%;
	padding: 1rem 0;
	border: 0;
	border-bottom: 1px solid var(--ogl-line);
	background: transparent;
	color: var(--ogl-text);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.35s var(--ogl-ease);
}

.ogl-form__field select {
	/* Native arrow in a dark UI is unreadable, so draw our own. */
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--ogl-gold) 50%),
	                  linear-gradient(135deg, var(--ogl-gold) 50%, transparent 50%);
	background-position: calc(100% - 12px) center, calc(100% - 7px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ogl-form__field select option {
	background: var(--ogl-bg-raise);
	color: var(--ogl-text);
}

.ogl-form__field input:focus,
.ogl-form__field select:focus,
.ogl-form__field textarea:focus {
	border-bottom-color: var(--ogl-gold);
	outline: none;
}

.ogl-form__field textarea {
	min-height: 150px;
	resize: vertical;
}

/* Honeypot: hidden from people, reachable by bots. */
.ogl-form__honey {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ogl-form__actions {
	margin-top: 0.5rem;
}

.ogl-notice {
	margin-bottom: 2.5rem;
	padding: 1.25rem 1.5rem;
	border-left: 2px solid var(--ogl-gold);
	background: var(--ogl-bg-raise);
	font-size: 0.9375rem;
	color: var(--ogl-text);
}

.ogl-notice--error {
	border-left-color: #b4544a;
}

/* 17.10 Lightbox --------------------------------------------- */
.ogl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 950;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 5vw, 4rem);
	background: rgba(6, 6, 6, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--ogl-ease), visibility 0s linear 0.4s;
}

.ogl-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s var(--ogl-ease), visibility 0s linear 0s;
}

.ogl-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1400px;
	max-height: 82vh;
}

.ogl-lightbox__image {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ogl-lightbox__video {
	width: min(100%, 1400px);
	aspect-ratio: 16 / 9;
	max-height: 82vh;
	border: 0;
	background: #000;
}

.ogl-lightbox__caption {
	position: absolute;
	left: 50%;
	bottom: clamp(1rem, 3vw, 2rem);
	width: min(90%, 60ch);
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

.ogl-lightbox__close {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ogl-line);
	background: transparent;
	color: var(--ogl-text);
	cursor: pointer;
	transition: color 0.35s var(--ogl-ease), border-color 0.35s var(--ogl-ease), transform 0.35s var(--ogl-ease);
}

.ogl-lightbox__close:hover,
.ogl-lightbox__close:focus-visible {
	color: var(--ogl-gold);
	border-color: var(--ogl-gold);
	transform: rotate(90deg);
}

.ogl-lightbox__nav {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ogl-muted);
	font-size: 1.25rem;
	cursor: pointer;
	transform: translateY(-50%);
	transition: color 0.35s var(--ogl-ease), border-color 0.35s var(--ogl-ease);
}

.ogl-lightbox__nav:hover,
.ogl-lightbox__nav:focus-visible {
	color: var(--ogl-gold);
	border-color: var(--ogl-gold-line);
}

.ogl-lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.ogl-lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }

/* 17.11 Portfolio responsive --------------------------------- */

/* ≥ 600px */
@media (min-width: 600px) {
	.ogl-work-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ogl-editorials {
		grid-template-columns: repeat(2, 1fr);
	}

	.ogl-editorial--cover {
		grid-column: 1 / -1;
	}

	.ogl-video-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ogl-meta-list__row {
		grid-template-columns: 10rem 1fr;
		gap: 1.5rem;
		align-items: baseline;
	}

	.ogl-highlight {
		grid-template-columns: 1fr 1.4fr;
		gap: 2rem;
		align-items: baseline;
	}

	.ogl-form__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ≥ 782px — tablets */
@media (min-width: 782px) {
	.ogl-spread {
		grid-template-columns: 1.15fr 1fr;
	}

	.ogl-spread--reverse .ogl-spread__media {
		order: 2;
	}

	.ogl-work-intro__grid {
		grid-template-columns: 20rem 1fr;
	}

	.ogl-video-stage__foot {
		grid-template-columns: 20rem 1fr;
	}

	.ogl-contact__grid {
		grid-template-columns: 1fr 1.6fr;
	}

	.ogl-project__link {
		grid-template-columns: auto 1fr auto;
	}

	.ogl-project__media {
		display: block;
		width: clamp(120px, 14vw, 190px);
	}

	.ogl-project__media .ogl-media {
		opacity: 0.75;
		transition: opacity 0.5s var(--ogl-ease);
	}

	.ogl-project__link:hover .ogl-media {
		opacity: 1;
	}

	.ogl-project__link:hover .ogl-media > img {
		transform: scale(1.06);
	}

	.ogl-gallery__grid--even {
		grid-template-columns: repeat(3, 1fr);
	}

	.ogl-editorial--cover {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
		padding-bottom: clamp(2.5rem, 5vw, 4rem);
		border-bottom: 1px solid var(--ogl-line);
	}

	.ogl-editorial--cover .ogl-editorial__media {
		margin-bottom: 0;
	}

	.ogl-editorial--cover .ogl-editorial__title {
		font-size: var(--ogl-fs-h2);
	}
}

/* ≥ 1024px — laptops */
@media (min-width: 1024px) {
	.ogl-work-grid--masonry {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Stagger alternate cards, echoing the homepage collection grid. */
	.ogl-work-grid--masonry .ogl-work:nth-child(3n + 2) {
		transform: translateY(clamp(2rem, 4vw, 4rem));
	}

	.ogl-work-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.ogl-video-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ogl-editorials {
		grid-template-columns: repeat(3, 1fr);
	}

	.ogl-editorial--cover {
		grid-template-columns: 1.3fr 1fr;
	}
}

/* Touch devices: never rely on hover to expose meaning. */
@media (hover: none) {
	.ogl-work__veil {
		opacity: 1;
	}

	.ogl-work-grid--masonry .ogl-work:nth-child(3n + 2) {
		transform: none;
	}
}

/*--------------------------------------------------------------
18.0 Approved homepage & header
----------------------------------------------------------------
The client-approved layout. Scoped to .ogl-fp-* classes and the
header bar, so the nav overlay, footer, buttons, colours and all
inner pages keep the styling already signed off.

     18.1  Header bar (centred logo)
     18.2  Hero carousel
     18.3  Brand introduction
     18.4  Collection grid
     18.5  Designer / story
     18.6  Selected work
     18.7  Services
     18.8  Statement
     18.9  Social strip
     18.10 Final CTA
     18.11 Editor shortcuts
     18.12 Responsive
--------------------------------------------------------------*/

/* Page-builder compatibility.
   the_content() is called unconditionally in every template so builders like
   Elementor can locate the editable content area. When a page has no written
   content the wrapper collapses to zero height rather than being hidden — it
   must stay in the DOM for the builder to find it. */
.ogl-entry--empty {
	padding-block: 0;
}

.ogl-entry--empty > .ogl-shell {
	padding-block: 0;
}

/* The approved homepage uses a 1440px container with a steady 1.5rem
   gutter. Scoped here so inner pages keep their wider measure. */
.ogl-fp-section .ogl-shell {
	max-width: 1440px;
	padding-inline: 1.5rem;
}

@media (max-width: 480px) {
	.ogl-fp-section .ogl-shell {
		padding-inline: 1.1rem;
	}
}

/* 18.1 Header bar -------------------------------------------- */

/* Three columns: hamburger left, wordmark centred, contact right. */
.ogl-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}

.ogl-header__col {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	min-width: 0;
	position: relative;
	z-index: 2;
}

.ogl-header__col--left   { justify-content: flex-start; }
.ogl-header__col--center { justify-content: center; }
.ogl-header__col--right  { justify-content: flex-end; }

/* The wordmark sits dead centre, so it must not wrap. */
.ogl-header__col--center .ogl-brand {
	justify-content: center;
	text-align: center;
}

.ogl-header__col--center .ogl-brand__title {
	font-size: clamp(1rem, 1.8vw, 1.4rem);
	letter-spacing: 0.15em;
	white-space: nowrap;
}

/* The approved header shows bars only — the word "Menu" is dropped. */
.ogl-header .ogl-burger__label {
	display: none;
}

/* Contact, as a quiet uppercase link rather than a button. */
.ogl-header__contact {
	font-size: 0.65rem;
	font-weight: 300;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ogl-text);
	white-space: nowrap;
	transition: color 0.3s ease;
}

.ogl-header__contact:hover,
.ogl-header__contact:focus {
	color: var(--ogl-gold);
}

/* 18.2 Hero carousel ----------------------------------------- */
.ogl-fp-hero {
	position: relative;
	width: 100%;
	min-height: 700px;
	height: 100svh;
	overflow: hidden;
	background: var(--ogl-bg);
	isolation: isolate;
}

.ogl-fp-hero__viewport {
	position: absolute;
	inset: 0;
}

.ogl-fp-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.1s var(--ogl-ease), visibility 0s linear 1.1s;
}

.ogl-fp-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.1s var(--ogl-ease), visibility 0s linear 0s;
	z-index: 1;
}

/* Single-slide hero: no JS needed, show it outright. */
.ogl-fp-hero--single .ogl-fp-slide {
	opacity: 1;
	visibility: visible;
}

.ogl-fp-slide__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.5;
	background-size: cover;
	background-position: center 30%;
}

.ogl-fp-slide__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Slow drift on the active slide keeps the hero alive without moving text. */
.ogl-fp-slide.is-active .ogl-fp-slide__bg {
	animation: ogl-fp-drift 12s var(--ogl-ease) forwards;
}

@keyframes ogl-fp-drift {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

.ogl-fp-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(10, 10, 10, 0.25) 0%,
		rgba(10, 10, 10, 0.5) 60%,
		rgba(10, 10, 10, 0.8) 100%
	);
}

.ogl-fp-slide__content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	padding: 2rem;
}

.ogl-fp-slide__eyebrow {
	margin-bottom: 1.5rem;
	font-size: 0.65rem;
	font-weight: 300;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

.ogl-fp-slide__title {
	margin: 0 0 1.5rem;
	font-size: clamp(3rem, 12vw, 7rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ogl-text);
}

.ogl-fp-slide__title em {
	font-style: italic;
	color: var(--ogl-gold);
}

.ogl-fp-slide__sub {
	margin: 0 auto 2.5rem;
	max-width: 46ch;
	font-size: 1.1rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--ogl-muted);
}

.ogl-fp-slide__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

/* Copy rises as each slide takes over. */
.ogl-fp-slide.is-active .ogl-fp-slide__content > * {
	animation: ogl-fp-rise 1s var(--ogl-ease) both;
}

.ogl-fp-slide.is-active .ogl-fp-slide__content > *:nth-child(1) { animation-delay: 0.25s; }
.ogl-fp-slide.is-active .ogl-fp-slide__content > *:nth-child(2) { animation-delay: 0.38s; }
.ogl-fp-slide.is-active .ogl-fp-slide__content > *:nth-child(3) { animation-delay: 0.51s; }
.ogl-fp-slide.is-active .ogl-fp-slide__content > *:nth-child(4) { animation-delay: 0.64s; }

@keyframes ogl-fp-rise {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}

/* Carousel controls */
.ogl-fp-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(245, 240, 235, 0.25);
	background: transparent;
	color: var(--ogl-text);
	cursor: pointer;
	transform: translateY(-50%);
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.ogl-fp-hero__arrow:hover,
.ogl-fp-hero__arrow:focus-visible {
	background: var(--ogl-gold);
	border-color: var(--ogl-gold);
	color: var(--ogl-bg);
}

.ogl-fp-hero__arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.ogl-fp-hero__arrow--prev { left: clamp(0.75rem, 2.5vw, 2.5rem); }
.ogl-fp-hero__arrow--next { right: clamp(0.75rem, 2.5vw, 2.5rem); }

.ogl-fp-hero__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(1.75rem, 4vw, 3rem);
	z-index: 5;
	display: flex;
	gap: 0.9rem;
	transform: translateX(-50%);
}

.ogl-fp-hero__dot {
	width: 34px;
	height: 2px;
	padding: 0;
	border: 0;
	background: rgba(245, 240, 235, 0.3);
	cursor: pointer;
	transition: background-color 0.4s ease, transform 0.4s ease;
}

.ogl-fp-hero__dot:hover {
	background: rgba(245, 240, 235, 0.6);
}

.ogl-fp-hero__dot.is-active {
	background: var(--ogl-gold);
	transform: scaleY(2);
}

/* 18.3 Brand introduction ------------------------------------ */
.ogl-fp-brand {
	padding-block: clamp(4rem, 8vw, 6rem);
	border-top: 1px solid var(--ogl-line);
	border-bottom: 1px solid var(--ogl-line);
}

.ogl-fp-brand__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 1000px;
	margin-inline: auto;
	align-items: end;
}

.ogl-fp-brand__title {
	margin: 0;
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 300;
	line-height: 1.1;
}

.ogl-fp-brand__text {
	margin: 0 0 2rem;
	font-size: 1.05rem;
	color: var(--ogl-muted);
}

/* 18.4 Collection grid --------------------------------------- */
.ogl-fp-collection {
	padding-block: clamp(3.5rem, 7vw, 5rem);
}

.ogl-fp-collection__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem;
}

.ogl-fp-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	min-height: 300px;
	padding: 1.5rem;
	overflow: hidden;
	border: 1px solid var(--ogl-bg-raise);
	color: inherit;
	transition: transform 0.4s ease, border-color 0.4s ease;
}

.ogl-fp-tile:hover,
.ogl-fp-tile:focus-visible {
	transform: scale(1.01);
	border-color: var(--ogl-gold);
	z-index: 2;
}

.ogl-fp-tile__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ogl-fp-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogl-fp-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		0deg,
		rgba(10, 10, 10, 0.9) 0%,
		rgba(10, 10, 10, 0.15) 65%,
		transparent 100%
	);
}

.ogl-fp-tile__title {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: 1.3rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ogl-text);
	transition: color 0.3s ease;
}

.ogl-fp-tile:hover .ogl-fp-tile__title {
	color: var(--ogl-gold);
}

.ogl-fp-tile__year {
	position: relative;
	z-index: 2;
	display: block;
	margin-top: 0.4rem;
	font-family: var(--ogl-font-body);
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	color: var(--ogl-gold);
}

/* 18.5 Designer / story -------------------------------------- */
.ogl-fp-designer {
	padding-block: clamp(3.5rem, 7vw, 5rem);
	background: #141414;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
}

.ogl-fp-designer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

.ogl-fp-designer__image {
	overflow: hidden;
	aspect-ratio: 3 / 4;
	filter: grayscale(0.2);
	transition: filter 0.4s ease, transform 0.4s ease;
}

.ogl-fp-designer__image:hover {
	filter: grayscale(0);
	transform: scale(1.01);
}

.ogl-fp-designer__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogl-fp-designer__title {
	margin: 0 0 1.5rem;
	font-size: clamp(2.2rem, 4vw, 3.6rem);
	font-weight: 300;
	line-height: 1.1;
}

.ogl-fp-designer__text p {
	margin-bottom: 1.2rem;
	font-size: 0.95rem;
	color: var(--ogl-muted);
}

/* 18.6 Selected work ----------------------------------------- */
.ogl-fp-work {
	padding-block: clamp(3.5rem, 7vw, 5rem);
}

.ogl-fp-work__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 150px;
	gap: 0.25rem;
}

.ogl-fp-work__item {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--ogl-bg-raise);
	background: #141414;
	filter: grayscale(0.2);
	transition: filter 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.ogl-fp-work__item:hover,
.ogl-fp-work__item:focus-visible {
	filter: grayscale(0);
	transform: scale(1.01);
	border-color: var(--ogl-gold);
	z-index: 2;
}

.ogl-fp-work__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tile spans are set by the repeating pattern in section 21.0. */

.ogl-fp-work__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1.25rem;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.9), transparent);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.ogl-fp-work__item:hover .ogl-fp-work__label,
.ogl-fp-work__item:focus-visible .ogl-fp-work__label {
	opacity: 1;
	transform: none;
}

.ogl-fp-work__title {
	display: block;
	font-family: var(--ogl-font-display);
	font-size: 1rem;
	color: var(--ogl-text);
}

.ogl-fp-work__type {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.6rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

/* 18.7 Services ---------------------------------------------- */
.ogl-fp-services {
	padding-block: clamp(3.5rem, 7vw, 5rem);
	background: #141414;
	border-top: 1px solid #222;
}

.ogl-fp-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.ogl-fp-service {
	padding: 1.5rem 0;
	border-bottom: 1px solid #2a2a2a;
}

.ogl-fp-service:first-child { padding-top: 0; }
.ogl-fp-service:last-child  { border-bottom: 0; }

.ogl-fp-service__title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.02em;
}

.ogl-fp-service__text {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ogl-muted);
}

/* 18.8 Statement --------------------------------------------- */
.ogl-fp-statement {
	padding: clamp(5rem, 10vw, 7rem) 1.5rem;
	text-align: center;
	border-top: 1px solid var(--ogl-line);
	border-bottom: 1px solid var(--ogl-line);
}

.ogl-fp-statement__line {
	font-family: var(--ogl-font-display);
	font-size: clamp(2.3rem, 10vw, 6rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ogl-text);
}

.ogl-fp-statement__line--gold {
	color: var(--ogl-gold);
}

/* 18.9 Social strip ------------------------------------------ */
.ogl-fp-social {
	padding-block: clamp(3rem, 6vw, 4rem);
}

.ogl-fp-social__handle {
	margin: 0 0 1.5rem;
	font-family: var(--ogl-font-display);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--ogl-text);
	transition: color 0.3s ease;
}

a.ogl-fp-social__handle:hover {
	color: var(--ogl-gold);
}

.ogl-fp-social__strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.25rem;
	margin: 2rem 0;
}

.ogl-fp-social__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--ogl-bg-raise);
	background: #141414;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.ogl-fp-social__item:hover,
.ogl-fp-social__item:focus-visible {
	transform: scale(1.02);
	border-color: var(--ogl-gold);
}

.ogl-fp-social__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 18.10 Final CTA -------------------------------------------- */
.ogl-fp-cta {
	position: relative;
	padding: clamp(5rem, 10vw, 7rem) 1.5rem;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--ogl-line);
}

.ogl-fp-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0.3;
}

.ogl-fp-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogl-fp-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(10, 10, 10, 0.65);
}

.ogl-fp-cta__title {
	margin: 0 0 1rem;
	font-size: clamp(2.3rem, 8vw, 5.5rem);
	font-weight: 300;
	line-height: 1.05;
}

.ogl-fp-cta__text {
	margin: 0 auto 2.5rem;
	max-width: 52ch;
	font-size: 1rem;
	color: var(--ogl-muted);
}

/* 18.11 Editor shortcuts ------------------------------------- */

/* Only ever rendered for logged-in editors. */
.ogl-edit {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--ogl-gold-line);
	background: rgba(10, 10, 10, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ogl-gold);
	font-family: var(--ogl-font-body);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.ogl-fp-section:hover > .ogl-edit,
.ogl-edit:focus {
	opacity: 1;
}

.ogl-edit:hover {
	background: var(--ogl-gold);
	color: var(--ogl-bg);
}

.ogl-fp-section {
	position: relative;
}

/* 18.12 Responsive ------------------------------------------- */

/* ≥ 769px — tablets and up */
@media (min-width: 769px) {
	.ogl-fp-brand__grid {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}

	.ogl-fp-collection__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ogl-fp-designer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ogl-fp-work__grid {
		grid-template-columns: repeat(4, 1fr);
	}


	.ogl-fp-services__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.ogl-fp-service {
		padding: 0 2rem 1.5rem 0;
		border-right: 1px solid #2a2a2a;
		border-bottom: 1px solid #2a2a2a;
	}

	.ogl-fp-social__strip {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*--------------------------------------------------------------
  22.0 Floating WhatsApp button
--------------------------------------------------------------*/

/*
 * The button is rendered only when a WhatsApp number is configured. It sits
 * above the page UI and the matching body class moves Back to Top clear of it.
 */
.ogl-whatsapp {
	position: fixed;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	z-index: 810;
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	transition: width 0.4s var(--ogl-ease), background-color 0.3s var(--ogl-ease),
		box-shadow 0.3s var(--ogl-ease);
}

.ogl-whatsapp svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
	flex: none;
}

.ogl-whatsapp__tip {
	max-width: 0;
	margin-left: 0;
	opacity: 0;
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	transition: max-width 0.4s var(--ogl-ease), opacity 0.3s var(--ogl-ease),
		margin-left 0.4s var(--ogl-ease);
}

.ogl-whatsapp:hover,
.ogl-whatsapp:focus-visible {
	width: auto;
	padding-inline: 1.15rem;
	background: #1ebe5b;
	color: #fff;
	box-shadow: 0 8px 30px rgba(37, 211, 102, 0.35);
}

.ogl-whatsapp:hover .ogl-whatsapp__tip,
.ogl-whatsapp:focus-visible .ogl-whatsapp__tip {
	max-width: 14rem;
	margin-left: 0.7rem;
	opacity: 1;
}

.ogl-whatsapp:focus-visible {
	outline: 2px solid var(--ogl-gold);
	outline-offset: 3px;
}

/* Keep the two floating controls independent and easy to reach. */
body.ogl-has-whatsapp .ogl-to-top {
	bottom: calc(clamp(1rem, 3vw, 2.5rem) + 56px + 0.75rem);
}

@media (prefers-reduced-motion: reduce) {
	.ogl-whatsapp,
	.ogl-whatsapp__tip {
		transition: none;
	}
}

@media (max-width: 600px) {
	.ogl-whatsapp {
		width: 52px;
		height: 52px;
	}

	.ogl-whatsapp:hover,
	.ogl-whatsapp:focus-visible {
		width: 52px;
		padding-inline: 0;
	}

	.ogl-whatsapp__tip {
		display: none;
	}

	body.ogl-has-whatsapp .ogl-to-top {
		bottom: calc(clamp(1rem, 3vw, 2.5rem) + 52px + 0.65rem);
	}
}

/* ≥ 1025px — desktop */
@media (min-width: 1025px) {
	.ogl-fp-collection__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ogl-fp-services__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ogl-fp-service {
		padding: 0 2rem 0 0;
		border-bottom: 0;
	}

	.ogl-fp-service:last-child {
		border-right: 0;
	}
}

/* Touch devices: hover-gated labels are always visible. */
@media (hover: none) {
	.ogl-fp-work__label {
		opacity: 1;
		transform: none;
	}
}

/*--------------------------------------------------------------
Floating WhatsApp button
--------------------------------------------------------------*/

/*
 * Sits in the same corner as the back-to-top control. The body carries
 * .ogl-has-whatsapp only when this button actually renders, so the two never
 * overlap and nothing shifts when the button is switched off.
 */
.ogl-whatsapp {
	position: fixed;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	z-index: 810;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #25D366;
	color: #FFFFFF;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	transition: width 0.4s var(--ogl-ease), background-color 0.3s var(--ogl-ease),
		box-shadow 0.3s var(--ogl-ease);
}

.ogl-whatsapp svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/*
 * The label is revealed on hover. It is hidden from assistive technology
 * because the link already carries the same wording as its aria-label.
 */
.ogl-whatsapp__tip {
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	transition: max-width 0.4s var(--ogl-ease), opacity 0.3s var(--ogl-ease),
		margin-left 0.4s var(--ogl-ease);
}

.ogl-whatsapp:hover,
.ogl-whatsapp:focus-visible {
	width: auto;
	padding-inline: 1.15rem;
	background: #1EBE5B;
	box-shadow: 0 8px 30px rgba(37, 211, 102, 0.35);
	color: #FFFFFF;
}

.ogl-whatsapp:hover .ogl-whatsapp__tip,
.ogl-whatsapp:focus-visible .ogl-whatsapp__tip {
	max-width: 14rem;
	margin-left: 0.7rem;
	opacity: 1;
}

.ogl-whatsapp:focus-visible {
	outline: 2px solid var(--ogl-gold);
	outline-offset: 3px;
}

/* Lift the back-to-top control clear of the WhatsApp button. */
body.ogl-has-whatsapp .ogl-to-top {
	bottom: calc(clamp(1rem, 3vw, 2.5rem) + 56px + 0.75rem);
}

@media (prefers-reduced-motion: reduce) {
	.ogl-whatsapp,
	.ogl-whatsapp__tip {
		transition: none;
	}
}

/* On small screens keep it a plain circle — there is no room for the label. */
@media (max-width: 600px) {
	.ogl-whatsapp {
		width: 52px;
		height: 52px;
	}

	.ogl-whatsapp:hover,
	.ogl-whatsapp:focus-visible {
		width: 52px;
		padding-inline: 0;
	}

	.ogl-whatsapp__tip {
		display: none;
	}

	body.ogl-has-whatsapp .ogl-to-top {
		bottom: calc(clamp(1rem, 3vw, 2.5rem) + 52px + 0.65rem);
	}
}

/*--------------------------------------------------------------
Print
--------------------------------------------------------------*/
@media print {
	.ogl-header,
	.ogl-overlay,
	.ogl-footer,
	.ogl-to-top,
	.ogl-whatsapp,
	.ogl-hero__scroll,
	.ogl-filters,
	.ogl-lightbox,
	.ogl-form,
	.comment-respond {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.ogl-entry__content {
		max-width: none;
		color: #000;
	}

	a {
		color: #000;
		text-decoration: underline;
	}
}

/*--------------------------------------------------------------
19.0 About — CEO message
--------------------------------------------------------------*/
.ogl-ceo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

.ogl-ceo__media {
	position: relative;
	max-width: 420px;
}

/* A thin gold rule anchors the portrait to the copy beside it. */
.ogl-ceo__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -14px;
	height: 1px;
	background: var(--ogl-gold);
	opacity: 0.55;
}

.ogl-ceo__title {
	margin: 0 0 1.75rem;
	font-size: var(--ogl-fs-display);
	line-height: 1.1;
}

.ogl-ceo__quote {
	margin: 0 0 2rem;
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: 2px solid var(--ogl-gold);
	font-family: var(--ogl-font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--ogl-text);
}

.ogl-ceo__quote p:last-child {
	margin-bottom: 0;
}

.ogl-ceo__message {
	color: var(--ogl-muted);
	font-weight: 300;
	line-height: 1.8;
}

.ogl-ceo__message p:last-child {
	margin-bottom: 0;
}

.ogl-ceo__signature {
	margin-top: 2.25rem;
}

.ogl-ceo__cta {
	margin-top: 2.25rem;
}

/* Without a photograph the copy would run the full page width. */
.ogl-ceo--no-media .ogl-ceo__body {
	max-width: 68ch;
}

@media (min-width: 900px) {
	.ogl-ceo__grid {
		grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
		gap: clamp(3rem, 6vw, 6rem);
	}

	.ogl-ceo--no-media .ogl-ceo__grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
20.0 Enquiry form — fieldsets, choices and help text
--------------------------------------------------------------*/

/*
 * The enquiry form asks a lot of a visitor, so each question gets room and a
 * short line of guidance. Inputs keep the underline treatment used elsewhere
 * in the theme rather than the boxed fields of the reference design.
 */
.ogl-form__help {
	margin: 0 0 0.85rem;
	font-size: 0.875rem;
	line-height: 1.55;
	font-weight: 300;
	color: var(--ogl-muted);
	text-transform: none;
	letter-spacing: 0;
}

.ogl-form__req {
	color: var(--ogl-gold);
}

.ogl-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.ogl-form__fieldset legend {
	display: block;
	width: 100%;
	margin-bottom: 1.1rem;
	padding: 0;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ogl-muted);
}

/* The service that is currently selected, echoed in the budget label. */
.ogl-form__budget-tag {
	color: var(--ogl-gold);
}

.ogl-form__budget-tag:not(:empty)::before {
	content: "— ";
}

.ogl-form__choices {
	display: grid;
	gap: 0.35rem;
}

.ogl-form__choices--inline {
	gap: 0.35rem;
}

/* Custom radio: the native control is hidden but stays focusable. */
.ogl-choice {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.9rem;
	padding: 0.7rem 0.9rem 0.7rem 0;
	cursor: pointer;
	color: var(--ogl-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	font-weight: 300;
	transition: color 0.3s var(--ogl-ease);
}

.ogl-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ogl-choice__mark {
	position: relative;
	width: 17px;
	height: 17px;
	margin-top: 0.2rem;
	border: 1px solid var(--ogl-line);
	border-radius: 50%;
	transition: border-color 0.3s var(--ogl-ease);
}

.ogl-choice__mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--ogl-gold);
	transform: scale(0);
	transition: transform 0.25s var(--ogl-ease);
}

.ogl-choice:hover .ogl-choice__mark {
	border-color: var(--ogl-gold);
}

.ogl-choice input:checked ~ .ogl-choice__mark {
	border-color: var(--ogl-gold);
}

.ogl-choice input:checked ~ .ogl-choice__mark::after {
	transform: scale(1);
}

.ogl-choice input:checked ~ .ogl-choice__text {
	color: var(--ogl-text);
}

/* Keyboard focus has to be visible even though the input itself is not. */
.ogl-choice input:focus-visible ~ .ogl-choice__mark {
	outline: 2px solid var(--ogl-gold);
	outline-offset: 3px;
}

.ogl-choice__text {
	color: var(--ogl-muted);
	transition: color 0.3s var(--ogl-ease);
}

.ogl-choice:hover .ogl-choice__text {
	color: var(--ogl-text);
}

/* Conditional fields are hidden outright, not just visually. */
.ogl-form [hidden] {
	display: none;
}

/*
 * Date inputs render a near-black native picker icon on a near-black ground,
 * so invert it back to something visible.
 */
.ogl-form__field input[type="date"] {
	color-scheme: dark;
}

.ogl-form__field input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.5;
	cursor: pointer;
}

.ogl-form__field input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

@media (min-width: 700px) {
	.ogl-form__choices--inline {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.35rem 2rem;
	}
}

/*--------------------------------------------------------------
21.0 Homepage section headings & work grid geometry
--------------------------------------------------------------*/

/*
 * `.ogl-section-label` was used by five homepage sections but had no rule
 * anywhere in this file, so "The Work", "Selected Work" and the rest
 * rendered as unstyled body text sitting straight on top of their grids.
 *
 * Base = the eyebrow form, used in Story where a real <h2> follows it.
 */
.ogl-section-label {
	display: block;
	margin: 0 0 1.25rem;
	font-family: var(--ogl-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ogl-gold);
}

/*
 * `--head` = the label IS the section heading, with nothing else above the
 * grid. Gold rule above for weight, hairline below for separation.
 */
.ogl-section-label--head {
	position: relative;
	margin-bottom: clamp(2.75rem, 5.5vw, 5rem);
	padding-top: 1.75rem;
	padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
	border-bottom: 1px solid var(--ogl-line);
	font-family: var(--ogl-font-display);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--ogl-text);
}

.ogl-section-label--head::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 2px;
	background: var(--ogl-gold);
}

/*
 * Selected Work grid.
 *
 * The old rhythm hard-coded spans onto children 1 and 4, which only tiled
 * cleanly at 8 items. At 6 it left two empty cells on the bottom row.
 * The pattern below repeats every 6 tiles and each period fills exactly
 * 4 columns x 4 rows, so 6, 12 or 18 items all tile without gaps.
 *
 * Every tile is now two rows tall as well. Portrait photographs were being
 * cover-cropped into short landscape cells, which is what made them read as
 * tight close-ups.
 */
.ogl-fp-work__grid {
	grid-auto-flow: dense;
}

/* Mobile: a plain two-column run of portraits, no spans to leave holes. */
@media (max-width: 768px) {
	.ogl-fp-work__item:nth-child(1),
	.ogl-fp-work__item:nth-child(4) {
		grid-column: span 1;
		grid-row: span 2;
	}

	.ogl-fp-work__item {
		grid-row: span 2;
	}

	.ogl-fp-work__grid {
		grid-auto-rows: 120px;
	}
}

@media (min-width: 769px) {
	.ogl-fp-work__grid {
		/* Sized so a single-column tile lands close to the 3:4 of the source
		   image, instead of a short letterbox. */
		grid-auto-rows: clamp(150px, 16vw, 235px);
	}

	.ogl-fp-work__item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
	.ogl-fp-work__item:nth-child(6n+2) { grid-column: span 1; grid-row: span 2; }
	.ogl-fp-work__item:nth-child(6n+3) { grid-column: span 1; grid-row: span 2; }
	.ogl-fp-work__item:nth-child(6n+4) { grid-column: span 2; grid-row: span 2; }
	.ogl-fp-work__item:nth-child(6n+5) { grid-column: span 1; grid-row: span 2; }
	.ogl-fp-work__item:nth-child(6n+6) { grid-column: span 1; grid-row: span 2; }

	/* Wide tiles hold a lot of empty floor in a full-length shot; bias the
	   crop upward so faces and bodices stay in frame. */
	.ogl-fp-work__item:nth-child(6n+1) img,
	.ogl-fp-work__item:nth-child(6n+4) img {
		object-position: center 28%;
	}
}