/*
Theme Name: Octopus Holding v2
Theme URI: https://octopusholding.net
Author: Octopus Holding
Author URI: https://octopusholding.net
Description: Second-generation one-page theme for Octopus Holding, built to the revised design deck: dark, photography-led, champagne-gold accent, with a scroll-revealed brand intro on the home page. Installs alongside the original theme rather than replacing it — activating this one re-seeds the portfolio companies, investments, sectors and the Elementor home layout. Sectors/Investments/Companies stay editable as custom post types.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: octopus-holding
*/

:root{
	/* Dark is the design's native mode — the revised deck is black-on-photography with a
	   single champagne-gold accent. Gold values are sampled from the deck's own artwork. */
	--oh-bg-0: #08090A;
	--oh-bg-1: #0D0E11;
	--oh-bg-2: #08090A;
	--oh-ink: rgba(255,255,255,.74);
	--oh-ink-dim: rgba(255,255,255,.54);
	--oh-heading: #FFFFFF;
	--oh-white: #FFFFFF;
	--oh-gold: #C9B287;
	--oh-gold-bright: #E4D5B2;
	--oh-border: rgba(255,255,255,.10);
	--oh-border-strong: rgba(255,255,255,.26);
	--oh-card-bg: rgba(255,255,255,.02);
	--oh-header-bg: rgba(8,9,10,.88);
	--oh-header-bg-solid: rgba(8,9,10,.97);
	--oh-logo-filter: brightness(0) invert(1);
	--oh-link: #FFFFFF;
	/* Company logos arrive as artwork on a light background, so the plate stays light in
	   both themes rather than inverting brand colours. */
	--oh-plate: #F4F5F7;

	--oh-font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--oh-font-body: 'Inter', 'Segoe UI', sans-serif;

	--oh-gut: 32px;
	--oh-max: 1280px;
	--oh-header-h: 92px;
}

:root[data-theme="light"]{
	--oh-bg-0: #FAFAF9;
	--oh-bg-1: #F2F1EF;
	--oh-bg-2: #FAFAF9;
	--oh-ink: #3A3A3C;
	--oh-ink-dim: #6E6E72;
	--oh-heading: #101012;
	--oh-gold: #8C7233;
	--oh-gold-bright: #6F5A28;
	--oh-border: rgba(16,16,18,.10);
	--oh-border-strong: rgba(16,16,18,.28);
	--oh-card-bg: rgba(16,16,18,.03);
	--oh-header-bg: rgba(250,250,249,.88);
	--oh-header-bg-solid: rgba(250,250,249,.98);
	--oh-logo-filter: none;
	--oh-link: #101012;
}

@media (prefers-color-scheme: light){
	:root:not([data-theme="dark"]):not([data-theme="light"]){
		--oh-bg-0: #FAFAF9;
		--oh-bg-1: #F2F1EF;
		--oh-bg-2: #FAFAF9;
		--oh-ink: #3A3A3C;
		--oh-ink-dim: #6E6E72;
		--oh-heading: #101012;
		--oh-gold: #8C7233;
		--oh-gold-bright: #6F5A28;
		--oh-border: rgba(16,16,18,.10);
		--oh-border-strong: rgba(16,16,18,.28);
		--oh-card-bg: rgba(16,16,18,.03);
		--oh-header-bg: rgba(250,250,249,.88);
		--oh-header-bg-solid: rgba(250,250,249,.98);
		--oh-logo-filter: none;
		--oh-link: #101012;
	}
}

*{ box-sizing: border-box; }

/* overflow-x: clip (not hidden) is deliberate: per spec, setting overflow-x to anything but
   visible/clip forces the OTHER axis (overflow-y) to compute as auto, turning html/body into
   a second independent scrolling container alongside the real viewport scroller — which is
   exactly what silently broke the sticky header before. `clip` suppresses the horizontal
   overflow without triggering that auto-scroll-container side effect. */
html{ scroll-behavior: smooth; background: var(--oh-bg-0); overflow-x: clip; }

body{
	font-family: var(--oh-font-body);
	color: var(--oh-ink);
	background: var(--oh-bg-0);
	margin: 0;
	overflow-x: clip;
}

main section[id]{ scroll-margin-top: var(--oh-header-h); }
#contact{ scroll-margin-top: var(--oh-header-h); }

h1,h2,h3,h4,h5,h6{
	font-family: var(--oh-font-heading);
	font-weight: 300;
	color: var(--oh-heading) !important;
	margin: 0 0 .5em;
	letter-spacing: -.015em;
}

p{ color: var(--oh-ink-dim); }

a{ color: var(--oh-link); text-decoration: none; }
a:hover{ opacity: .7; }

img{ max-width: 100%; height: auto; display: block; }

.screen-reader-text{
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	overflow: hidden;
	height: 1px; width: 1px;
	word-wrap: normal !important;
}

/* ---------- Section base ---------- */
.elementor-top-section{
	position: relative;
	background-color: var(--oh-bg-0);
	padding-top: 130px;
	padding-bottom: 130px;
	transition: none !important;
}
#about{ padding-top: 0; padding-bottom: 0; }
.elementor-section .elementor-container{
	position: relative;
	z-index: 1;
	padding-left: var(--oh-gut);
	padding-right: var(--oh-gut);
}
/* Elementor caps boxed sections at its own 1140px through a more specific selector; match
   that selector so every section shares one measure with the full-bleed panels below. */
.elementor-section.elementor-section-boxed > .elementor-container{ max-width: var(--oh-max); }
/* Full-bleed sections (the investments panel) opt out of the boxed container entirely. */
.oh-section-flush{ padding-top: 0 !important; padding-bottom: 0 !important; }
.oh-section-flush > .elementor-container{ max-width: 100% !important; padding-left: 0; padding-right: 0; }

/* ---------- Site Header ---------- */
/* Fixed, not sticky: in the revised design the nav floats over the hero photograph rather
   than occupying a band above it. Every other section's own top padding clears it. */
.oh-header{
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 950;
	border-bottom: 1px solid transparent;
	transition: transform .35s ease, background .3s ease, border-color .3s ease;
}
/* Before the page leaves the hero the header has no plate of its own. On the two templates
   that open on a dark photograph it gets a scrim and fixed light-on-dark chrome — the photo
   underneath doesn't follow the site's colour scheme, so neither can the nav. Other
   templates open on a normal section background and keep the themed colours. */
.home .oh-header:not(.oh-header-solid),
.single-octopus_investment .oh-header:not(.oh-header-solid){
	background: linear-gradient(180deg, rgba(6,6,7,.78) 0%, rgba(6,6,7,.42) 55%, rgba(6,6,7,0) 100%);
}
.home .oh-header:not(.oh-header-solid) .oh-nav a,
.single-octopus_investment .oh-header:not(.oh-header-solid) .oh-nav a{ color: rgba(255,255,255,.76); }
.home .oh-header:not(.oh-header-solid) .oh-nav a:hover,
.single-octopus_investment .oh-header:not(.oh-header-solid) .oh-nav a:hover{ color: #fff; }
.home .oh-header:not(.oh-header-solid) .oh-logo img,
.single-octopus_investment .oh-header:not(.oh-header-solid) .oh-logo img{ filter: brightness(0) invert(1); }
.home .oh-header:not(.oh-header-solid) .oh-nav-toggle span,
.single-octopus_investment .oh-header:not(.oh-header-solid) .oh-nav-toggle span{ background: #fff; }
.home .oh-header:not(.oh-header-solid) .oh-header-cta,
.single-octopus_investment .oh-header:not(.oh-header-solid) .oh-header-cta{ color: #C9B287; border-color: #C9B287; }
.oh-header.oh-header-solid{
	background: var(--oh-header-bg);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--oh-border);
}
/* Toggled by the scroll-direction script in functions.php — slides the header off-screen on
   scroll-down, back in on scroll-up; removed again near the top of the page. */
.oh-header.oh-header-hidden{ transform: translateY(-100%); }
.oh-header-inner{
	max-width: 1440px;
	margin: 0 auto;
	padding: 22px var(--oh-gut);
	display: flex;
	align-items: center;
	gap: 24px;
}
.oh-logo{ display: flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.oh-logo a{ display: flex; align-items: center; }
.oh-logo img{
	height: 46px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	filter: var(--oh-logo-filter);
}

.oh-header-right{ display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.oh-nav-toggle{
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	margin-left: auto;
}
.oh-nav-toggle span{
	display: block;
	width: 22px;
	height: 1px;
	background: var(--oh-heading);
	margin: 6px 0;
}

.oh-nav{ flex: 1 1 auto; display: flex; justify-content: center; }
.oh-nav ul{
	list-style: none;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
}
.oh-nav a{
	position: relative;
	display: inline-block;
	color: var(--oh-ink);
	font-family: var(--oh-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 8px 18px;
	white-space: nowrap;
}
.oh-nav a:before{
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 2px;
	height: 1px;
	background: var(--oh-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.oh-nav a:hover{ color: var(--oh-heading); opacity: 1; }
.oh-nav a:hover:before{ transform: scaleX(1); }

.oh-header-cta{
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid var(--oh-gold);
	font-family: var(--oh-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--oh-gold);
	white-space: nowrap;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.oh-header-cta:hover{ opacity: 1; color: var(--oh-gold-bright); border-color: var(--oh-gold-bright); background: rgba(201,178,135,.08); }

/* ---------- Front-page intro splash ---------- */
/* The brand mark alone over the skyline, nav hidden. The first scroll gesture sweeps the
   headline up from below (see the stagger further down) and then slides the nav in from
   the top. Skipped entirely below 901px — mobile opens straight on the hero. */
html.oh-intro-active,
html.oh-intro-active body{ overflow: hidden; height: 100%; }

.oh-splash{
	position: fixed;
	inset: 0;
	z-index: 980;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--oh-bg-0) url(assets/img/photos/hero-skyline.jpg) center center / cover no-repeat;
	opacity: 1;
	transition: opacity .75s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
}
.oh-splash:before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6,6,7,.42) 0%, rgba(6,6,7,.14) 38%, rgba(6,6,7,.55) 100%);
}
.oh-splash-mark{ position: relative; z-index: 1; }
.oh-splash-mark img{
	width: clamp(280px, 40vw, 620px);
	height: auto;
	filter: brightness(0) invert(1) drop-shadow(0 2px 30px rgba(0,0,0,.45));
}
.oh-splash-hint{
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 48px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	font-family: var(--oh-font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
}
.oh-splash-hint:after{
	content: "";
	width: 1px;
	height: 46px;
	background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
	animation: oh-hint 2.2s ease-in-out infinite;
}
@keyframes oh-hint{
	0%,100%{ transform: scaleY(.35); transform-origin: top; opacity: .45; }
	50%    { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

html.oh-intro-revealing .oh-splash{ opacity: 0; transform: scale(1.05); }
html.oh-intro-done .oh-splash{ opacity: 0; transform: scale(1.05); visibility: hidden; pointer-events: none; }

/* Header chrome waits out the intro, then drops in from above. */
html.oh-has-intro .oh-logo,
html.oh-has-intro .oh-nav,
html.oh-has-intro .oh-header-right,
html.oh-has-intro .oh-nav-toggle{
	transition: opacity .55s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
html.oh-intro-active .oh-header,
html.oh-intro-revealing .oh-header{ pointer-events: none; }
html.oh-intro-active .oh-logo,
html.oh-intro-active .oh-nav,
html.oh-intro-active .oh-header-right,
html.oh-intro-active .oh-nav-toggle,
html.oh-intro-revealing .oh-logo,
html.oh-intro-revealing .oh-nav,
html.oh-intro-revealing .oh-header-right,
html.oh-intro-revealing .oh-nav-toggle{
	opacity: 0;
	transform: translateY(-150%);
}
html.oh-intro-done .oh-nav{ transition-delay: .06s; }
html.oh-intro-done .oh-header-right{ transition-delay: .14s; }

/* The headline sweep. Each hero widget is its own mask; the padding/margin pair widens the
   mask past the descenders without changing the laid-out position of anything. */
html.oh-has-intro #about .elementor-widget:not(.oh-hero-foot){
	overflow: hidden;
	padding-bottom: 16px;
	margin-bottom: -16px;
}
html.oh-has-intro #about .elementor-widget > *{
	transform: translateY(115%);
	opacity: 0;
}
html.oh-has-intro #about .oh-hero-foot > *{ transform: none; opacity: 0; }
html.oh-intro-revealing #about .elementor-widget > *,
html.oh-intro-done #about .elementor-widget > *{
	transform: none;
	opacity: 1;
	transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .8s ease;
}
html.oh-intro-revealing #about .elementor-widget:nth-child(1) > *,
html.oh-intro-done #about .elementor-widget:nth-child(1) > *{ transition-delay: .04s; }
html.oh-intro-revealing #about .elementor-widget:nth-child(2) > *,
html.oh-intro-done #about .elementor-widget:nth-child(2) > *{ transition-delay: .14s; }
html.oh-intro-revealing #about .elementor-widget:nth-child(3) > *,
html.oh-intro-done #about .elementor-widget:nth-child(3) > *{ transition-delay: .32s; }
html.oh-intro-revealing #about .elementor-widget:nth-child(4) > *,
html.oh-intro-done #about .elementor-widget:nth-child(4) > *{ transition-delay: .44s; }
html.oh-intro-revealing #about .elementor-widget:nth-child(5) > *,
html.oh-intro-done #about .elementor-widget:nth-child(5) > *{ transition-delay: .58s; }

@media (prefers-reduced-motion: reduce){
	.oh-splash{ display: none; }
	html.oh-has-intro #about .elementor-widget > *{ transform: none; opacity: 1; }
	html.oh-has-intro .oh-logo,
	html.oh-has-intro .oh-nav,
	html.oh-has-intro .oh-header-right,
	html.oh-has-intro .oh-nav-toggle{ opacity: 1; transform: none; }
	.oh-splash-hint:after{ animation: none; }
}

/* ---------- Section tinting ---------- */
#sectors, #advisory{ background-color: var(--oh-bg-1); }
.oh-section-rule{ border-top: 1px solid var(--oh-border); }

/* ---------- Eyebrow label: thin rule + tracked caps ---------- */
.oh-eyebrow{
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important; /* Elementor's own :where() rule sets gap via CSS vars that resolve
	   to "normal" at the same specificity, so this needs !important to win the tie. */
	font-family: var(--oh-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--oh-ink-dim);
	margin-bottom: 26px;
}
.oh-eyebrow-left{ justify-content: flex-start !important; }
.oh-eyebrow:before{
	content: "";
	display: inline-block;
	width: 44px;
	height: 1px;
	background: currentColor;
	opacity: .7;
}
.oh-eyebrow-gold{ color: var(--oh-gold); }

.oh-lead{ font-size: 19px; line-height: 1.7; color: var(--oh-ink-dim); font-weight: 300; }

/* Section headline + the People/Partnerships/Progress rail that rides beside it. */
/* !important throughout: this class lands on the Elementor widget element itself, and
   Elementor's own :where(.elementor-widget) rule resets display/gap at equal specificity
   but later in the cascade — same tie the eyebrow above has to break. */
.oh-section-head{
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 48px !important;
}
.oh-section-head h2{ margin: 0; }
.oh-pillar-rail{
	list-style: none;
	margin: 6px 0 0;
	padding: 0 0 0 22px;
	border-left: 1px solid var(--oh-border-strong);
	flex: 0 0 auto;
	display: grid;
	gap: 8px;
}
.oh-pillar-rail li{
	font-family: var(--oh-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--oh-ink-dim);
}

h2, .oh-section-head h2{ font-size: clamp(34px, 4.2vw, 60px); font-weight: 200; line-height: 1.12; }

/* ---------- Text links with arrow ---------- */
.oh-text-link{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--oh-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--oh-gold);
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(201,178,135,.4);
	transition: border-color .2s ease, gap .2s ease, color .2s ease;
}
.oh-text-link:hover{ opacity: 1; color: var(--oh-gold-bright); border-color: var(--oh-gold-bright); gap: 18px; }
.oh-text-link-sm{ font-size: 10.5px; letter-spacing: .18em; padding-bottom: 5px; gap: 10px; }

.oh-rule-mark{ display: block; width: 44px; height: 1px; background: var(--oh-border-strong); margin-bottom: 30px; }

/* ---------- Hero — full-bleed photo, left copy, pillars pinned to the foot ---------- */
#about{
	min-height: 100vh;
	display: flex;
	align-items: stretch;
	background-size: cover !important;
	background-position: center right !important;
	position: relative;
	overflow: hidden;
}
/* Elementor renders the section's own background-image rule (a real photo, editable in
   Elementor); this layers a horizontal scrim — solid where the text sits, fading to reveal
   the photo on the right — instead of a full-cover dark wash. */
#about:before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(6,6,7,.97) 0%, rgba(6,6,7,.9) 34%, rgba(6,6,7,.42) 62%, rgba(6,6,7,.06) 100%);
	pointer-events: none;
}
/* #about{display:flex} makes .elementor-container a flex item of the SECTION itself, which
   would shrink it to the column's max-content width and centre it. Force the boxed width
   back and left-align the column inside it. */
#about .elementor-container{ display: flex; width: 100%; justify-content: flex-start; }
#about .elementor-column{ width: 100%; }
/* Two auto top-margins — one on the first widget, one on the pillars — split the leftover
   height evenly, which centres the copy and pins the pillars to the bottom in one pass. */
#about .elementor-widget-wrap{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: calc(var(--oh-header-h) + 24px) 0 44px;
	max-width: 830px;
}
#about .elementor-widget-wrap > .elementor-widget:first-child{ margin-top: auto; }
#about .oh-hero-foot{ margin-top: auto; max-width: none; }

#about h1{
	color: var(--oh-white) !important;
	font-size: clamp(38px, 4.4vw, 62px);
	font-weight: 200;
	line-height: 1.14;
	letter-spacing: -.02em;
	margin-bottom: .42em;
}
#about .elementor-widget-text-editor p{ color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.75; font-weight: 300; max-width: 30em; }
#about .elementor-widget-html{ margin-top: 22px; }

/* Panels that always sit on a dark photograph keep the light gold whatever the site theme,
   for the same reason the header over the hero does. */
#about .oh-eyebrow,
.oh-investment .oh-eyebrow,
.oh-investment-status,
.oh-single-investment-hero .oh-investment-status{ color: #C9B287; }
#about .oh-text-link,
.oh-investment .oh-text-link{ color: #C9B287; border-bottom-color: rgba(201,178,135,.4); }
#about .oh-text-link:hover,
.oh-investment .oh-text-link:hover{ color: #E4D5B2; border-bottom-color: #E4D5B2; }

.oh-hero-foot{ width: 100%; }
.oh-hero-foot-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid rgba(255,255,255,.16);
	padding-top: 20px;
	font-family: var(--oh-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.58);
}
.oh-hero-pillars i{ font-style: normal; opacity: .45; margin: 0 8px; }
.oh-hero-steps{ display: inline-flex; gap: 26px; }
.oh-hero-steps b{ font-weight: 500; }
.oh-hero-steps b:first-child{ color: var(--oh-gold); }

/* ---------- Companies — two columns of logo plate + copy, hairline ruled ---------- */
.oh-companies{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 56px;
	border-top: 1px solid var(--oh-border);
}
.oh-company-row{
	display: grid;
	grid-template-columns: 200px 1fr;
	/* start, not stretch: stretching made each logo plate as tall as its row, so plates ended
	   up different heights purely because one company's description runs longer. */
	align-items: start;
	gap: 36px;
	padding: 38px 0;
	border-bottom: 1px solid var(--oh-border);
	transition: background .25s ease;
}
/* The vertical hairline between the two columns, drawn on the left-hand cell only. */
.oh-company-row:nth-child(odd){ padding-right: 48px; }
.oh-company-row:nth-child(even){ padding-left: 48px; border-left: 1px solid var(--oh-border); }
a.oh-company-row:hover{ opacity: 1; background: var(--oh-card-bg); }

.oh-company-plate{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 118px;
	padding: 16px;
}
/* The supplied artwork is pre-composed onto this same plate colour at a normalised 3:2, so
   the image fills the cell edge to edge and carries its own margin. max-height only guards
   against a differently-proportioned logo being added later. */
.oh-company-plate.oh-has-logo{ background: var(--oh-plate); padding: 0; }
.oh-company-plate img{
	width: 100%;
	height: auto;
	max-height: 150px;
	object-fit: contain;
	filter: grayscale(1) contrast(.94);
	opacity: .88;
	transition: filter .25s ease, opacity .25s ease;
}
a.oh-company-row:hover .oh-company-plate img{ filter: none; opacity: 1; }
/* Shown until the client's logo artwork lands in assets/img/companies/. */
.oh-company-wordmark{
	font-family: var(--oh-font-heading);
	font-size: 19px;
	font-weight: 300;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.4;
	color: var(--oh-ink-dim);
	border: 1px solid var(--oh-border);
	padding: 22px 18px;
	width: 100%;
}
/* The hairline between plate and copy, mirroring the deck's row rules. */
.oh-company-copy{ border-left: 1px solid var(--oh-border); padding-left: 36px; }
.oh-company-copy h3{ font-size: 19px; font-weight: 400; margin: 0 0 12px; letter-spacing: 0; }
.oh-company-copy p{ color: var(--oh-ink-dim); font-size: 14.5px; line-height: 1.72; margin: 0 0 18px; font-weight: 300; }

/* ---------- Sectors: 4 full-bleed numbered photo tiles ---------- */
.oh-sectors-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 64px;
	background: var(--oh-border);
}
.oh-sector-tile{
	position: relative;
	display: block;
	min-height: 460px;
	background-color: var(--oh-bg-0);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
/* The sector photography is full-colour stock; the deck is near-monochrome throughout, so
   the tiles are graded down and only return to colour under the cursor. */
.oh-sector-tile:before{
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: saturate(.16) brightness(.82);
	-webkit-backdrop-filter: saturate(.16) brightness(.82);
	background: linear-gradient(0deg, rgba(6,6,7,.9) 0%, rgba(6,6,7,.18) 55%, rgba(6,6,7,.06) 100%);
	transition: background .3s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}
.oh-sector-tile:hover:before{
	backdrop-filter: saturate(.7) brightness(.9);
	-webkit-backdrop-filter: saturate(.7) brightness(.9);
	background: linear-gradient(0deg, rgba(6,6,7,.95) 0%, rgba(6,6,7,.34) 60%, rgba(6,6,7,.12) 100%);
}
.oh-sector-tile-cta{ background: var(--oh-bg-0); border: 1px solid var(--oh-border); }
.oh-sector-tile-cta:before{ background: none; }
.oh-sector-tile-body{
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
	padding: 30px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}
.oh-sector-num{
	font-family: var(--oh-font-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--oh-gold);
	margin-bottom: 10px;
}
.oh-sector-title{
	font-family: var(--oh-font-heading);
	font-weight: 300;
	font-size: 20px;
	color: #fff;
	line-height: 1.3;
	max-width: 220px;
}
.oh-sector-tile-cta .oh-sector-title{ color: var(--oh-heading); }
.oh-sector-arrow{ font-size: 20px; color: var(--oh-gold); flex-shrink: 0; }

/* ---------- Investments: full-bleed photo panel, copy inset left ---------- */
.oh-investments{ display: block; }
.oh-investment{
	position: relative;
	min-height: 100vh;
	background-color: var(--oh-bg-0);
	background-size: cover;
	background-position: center;
	display: flex;
	overflow: hidden;
}
/* The deck's photography is graded down to a near-monochrome warm base; the source photo
   is a full-colour stock shot, so the grade is applied here rather than baked into the file. */
.oh-investment:before{
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: saturate(.34) brightness(.62);
	-webkit-backdrop-filter: saturate(.34) brightness(.62);
	background: linear-gradient(95deg, rgba(6,6,7,.96) 0%, rgba(6,6,7,.86) 36%, rgba(6,6,7,.42) 64%, rgba(6,6,7,.2) 100%);
	pointer-events: none;
}
.oh-investment-inner{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--oh-max);
	margin: 0 auto;
	padding: calc(var(--oh-header-h) + 46px) var(--oh-gut) 48px;
	display: flex;
	flex-direction: column;
}
.oh-investment-head h2{ margin: 0 0 auto; color: #fff !important; }
.oh-investment-body{ max-width: 620px; margin-top: auto; }
.oh-investment-status{
	display: inline-block;
	font-family: var(--oh-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--oh-gold);
	margin-bottom: 20px;
}
.oh-investment-body h3{ color: #fff !important; font-size: clamp(26px, 2.8vw, 40px); font-weight: 300; line-height: 1.18; margin: 0; }
.oh-investment-place{ color: rgba(255,255,255,.78) !important; font-size: clamp(20px, 2vw, 28px); font-family: var(--oh-font-heading); font-weight: 200; line-height: 1.25; margin: 4px 0 0; }
.oh-investment-desc{
	color: rgba(255,255,255,.68) !important;
	line-height: 1.75;
	font-size: 15.5px;
	font-weight: 300;
	margin: 26px 0 22px;
	padding-top: 26px;
	border-top: 1px solid rgba(255,255,255,.2);
	max-width: 34em;
}
.oh-investment-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	font-family: var(--oh-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
}
.oh-investment-meta li + li:before{ content: "/"; opacity: .4; margin-right: 16px; }
.oh-investment-pager{
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 44px;
	font-family: var(--oh-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	color: rgba(255,255,255,.6);
}
.oh-investment-pager-rule{ flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.2); }

/* ---------- Advisory ---------- */
#advisory h3{ font-size: 26px; font-weight: 300; margin-bottom: 18px; }
#advisory p{ font-size: 16px; line-height: 1.8; font-weight: 300; }
#advisory .elementor-column{ padding-right: 48px; }

/* ---------- Vision / Mission over the architectural light plate ---------- */
#vision{
	position: relative;
	overflow: hidden;
	background-color: var(--oh-bg-0);
	padding-bottom: 0;
}
#vision:after{
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	aspect-ratio: 1672 / 358;
	background: url(assets/img/photos/vision-architecture.jpg) center bottom / cover no-repeat;
	/* The plate is a crop out of the design deck, so its top row is a hard edge rather than
	   true black — fade it into the section background instead of showing the seam. */
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%);
	mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%);
	pointer-events: none;
	z-index: 0;
}
/* Vision, Investments and Contact are photographic panels — they are dark in every theme,
   so they redefine the palette locally instead of being patched per data-theme value. That
   also covers "Auto" mode, where the theme attribute isn't present at all. */
#vision, .oh-contact, .oh-investment, #about{
	--oh-ink: rgba(255,255,255,.74);
	--oh-ink-dim: rgba(255,255,255,.54);
	--oh-heading: #FFFFFF;
	--oh-border: rgba(255,255,255,.12);
	--oh-border-strong: rgba(255,255,255,.26);
	--oh-card-bg: rgba(255,255,255,.04);
	--oh-gold: #C9B287;
	--oh-gold-bright: #E4D5B2;
	--oh-link: #FFFFFF;
}
#vision, .oh-contact{ background-color: #08090A; }

.oh-vm-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 90px;
	margin-top: 46px;
}
.oh-vm-grid > * + *{ border-left: 1px solid var(--oh-border); padding-left: 90px; }
.oh-vm-grid{ --_pad: 0; }
.oh-vm-card{ padding-top: 34px; border-top: 1px solid var(--oh-border-strong); }
.oh-vm-card h3{
	font-family: var(--oh-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--oh-ink-dim);
	margin-bottom: 24px;
}
.oh-vm-card p{ color: var(--oh-ink); line-height: 1.85; font-size: 17px; font-weight: 300; margin: 0; }

.oh-vm-foot{
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-top: calc(18vw + 40px);
	padding-bottom: 46px;
	font-family: var(--oh-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
	line-height: 2;
}
.oh-vm-foot-tag{ display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }
.oh-vm-foot-tag:before{ content: ""; width: 44px; height: 1px; background: rgba(255,255,255,.5); }

/* ---------- Contact ---------- */
.oh-contact{
	position: relative;
	background: var(--oh-bg-0);
	border-top: 1px solid var(--oh-border);
	overflow: hidden;
}
.oh-contact-inner{
	max-width: 1440px;
	margin: 0 auto;
	padding: 130px var(--oh-gut);
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	align-items: center;
	gap: 64px;
	min-height: 78vh;
}
.oh-contact-copy h2{ font-size: clamp(38px, 5vw, 76px); font-weight: 200; margin: 0 0 56px; }
.oh-contact-list{ list-style: none; margin: 0; padding: 0; max-width: 520px; }
.oh-contact-list li{
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 22px 0;
	border-bottom: 1px solid var(--oh-border);
}
.oh-contact-list li:first-child{ border-top: 1px solid var(--oh-border); }
.oh-contact-icon{ flex: 0 0 auto; color: var(--oh-ink); }
.oh-contact-icon svg{ width: 26px; height: 26px; display: block; stroke-linecap: round; stroke-linejoin: round; }
.oh-contact-value{
	border-left: 1px solid var(--oh-border);
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--oh-ink);
	/* Flex items default to min-width:auto, which lets the long street address push past the
	   viewport on narrow screens instead of wrapping. */
	min-width: 0;
	overflow-wrap: anywhere;
}
.oh-contact-value a{ color: var(--oh-ink); }
.oh-contact-value a:hover{ color: var(--oh-gold); opacity: 1; }
.oh-contact-sep{ margin: 0 10px; opacity: .4; }
/* The globe bleeds off the right edge exactly as it does in the deck. */
.oh-contact-globe{
	align-self: stretch;
	min-height: 520px;
	margin: -130px calc(var(--oh-gut) * -1) -130px 0;
	background: url(assets/img/photos/contact-globe.jpg) center center / cover no-repeat;
	/* Same crop seam as the vision plate: dissolve the left and top/bottom edges so the
	   globe reads as bleeding out of the page rather than sitting in a box. */
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 24%), linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 12%, #000 88%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 24%), linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 12%, #000 88%, rgba(0,0,0,0) 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* ---------- Footer ---------- */
.oh-footer{ background: var(--oh-bg-0); border-top: 1px solid var(--oh-border); color: var(--oh-ink-dim); }
.oh-footer-inner{
	max-width: 1440px; margin: 0 auto; padding: 34px var(--oh-gut);
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.oh-footer img{ height: 32px; width: auto; max-width: 200px; object-fit: contain; opacity: .65; filter: var(--oh-logo-filter); }
.oh-footer-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; list-style: none; margin: 0; padding: 0; }
.oh-footer-links a{ color: var(--oh-ink-dim); font-family: var(--oh-font-body); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.oh-footer-links a:hover{ color: var(--oh-gold); opacity: 1; }
.oh-footer small{ font-family: var(--oh-font-body); font-size: 11px; letter-spacing: .02em; font-weight: 300; }

/* ---------- Single investment detail page ---------- */
.oh-single-investment-hero{
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-color: var(--oh-bg-1);
}
/* Same grade as the home-page panel so the project photo reads as one body of work. */
.oh-single-investment-hero:before{
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: saturate(.34) brightness(.62);
	-webkit-backdrop-filter: saturate(.34) brightness(.62);
	background: linear-gradient(0deg, rgba(6,6,7,.96) 0%, rgba(6,6,7,.4) 60%, rgba(6,6,7,.25) 100%);
}
.oh-single-investment-hero-inner{
	position: relative;
	z-index: 1;
	max-width: var(--oh-max);
	margin: 0 auto;
	padding: calc(var(--oh-header-h) + 40px) var(--oh-gut) 56px;
	width: 100%;
}
.oh-single-investment-hero h1{ color: #fff !important; font-size: clamp(30px, 3.6vw, 50px); font-weight: 200; max-width: 900px; margin: 0; }
.oh-single-investment-body{
	max-width: var(--oh-max);
	margin: 0 auto;
	padding: 80px var(--oh-gut) 110px;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 72px;
}
.oh-single-investment-content p{ font-size: 17px; line-height: 1.85; font-weight: 300; margin-bottom: 1.4em; }
.oh-single-investment-meta{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--oh-border); }
.oh-single-investment-meta li{ padding: 20px 0; border-bottom: 1px solid var(--oh-border); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--oh-ink-dim); }
.oh-single-investment-meta strong{ display: block; color: var(--oh-heading); font-size: 15px; text-transform: none; letter-spacing: 0; margin-top: 8px; font-weight: 300; }
.oh-back-link{ margin-bottom: 44px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px){
	.oh-nav a{ padding: 8px 12px; font-size: 11px; letter-spacing: .1em; }
	.oh-nav a:before{ left: 12px; right: 12px; }
	.oh-company-row{ grid-template-columns: 180px 1fr; gap: 24px; }
	.oh-vm-grid{ gap: 0 56px; }
	.oh-vm-grid > * + *{ padding-left: 56px; }
}

@media (max-width: 980px){
	.oh-sectors-grid{ grid-template-columns: repeat(2, 1fr); }
	.oh-companies{ grid-template-columns: 1fr; }
	.oh-company-row:nth-child(odd),
	.oh-company-row:nth-child(even){ padding-left: 0; padding-right: 0; border-left: 0; }
	.oh-contact-inner{ grid-template-columns: 1fr; gap: 48px; min-height: 0; padding-top: 110px; padding-bottom: 0; }
	/* min-height must go with the aspect-ratio here: together they give the panel an intrinsic
	   minimum WIDTH (height x 1.6) that blows the single-column grid track past the viewport. */
	.oh-contact-globe{ margin: 0 calc(var(--oh-gut) * -1); min-height: 0; min-width: 0; aspect-ratio: 16 / 10; }
	#advisory .elementor-column{ padding-right: 0; }
}

@media (max-width: 900px){
	:root{ --oh-gut: 22px; --oh-header-h: 78px; }
	/* No intro splash below this width — the hero renders straight away, per the brief. */
	.oh-splash{ display: none !important; }
	html.oh-has-intro .oh-logo,
	html.oh-has-intro .oh-nav,
	html.oh-has-intro .oh-header-right,
	html.oh-has-intro .oh-nav-toggle{ opacity: 1 !important; transform: none !important; }
	html.oh-has-intro #about .elementor-widget > *{ transform: none !important; opacity: 1 !important; }
	html.oh-has-intro #about .elementor-widget{ overflow: visible; padding-bottom: 0; margin-bottom: 0; }
	html.oh-intro-active .oh-header{ pointer-events: auto; }
	html.oh-intro-active,
	html.oh-intro-active body{ overflow: visible; height: auto; }

	.oh-header{ background: var(--oh-header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--oh-border); }
	.oh-header-inner{ padding: 14px var(--oh-gut); flex-wrap: wrap; }
	.oh-logo img{ height: 36px; }
	.oh-header-right{ display: none; }
	.oh-nav-toggle{ display: block; }
	.oh-nav{
		order: 3;
		flex: 1 0 100%;
		display: none;
		border-top: 1px solid var(--oh-border);
		margin-top: 12px;
	}
	.oh-nav.is-open{ display: block; }
	.oh-nav ul{ flex-direction: column; gap: 0; padding: 4px 0 12px; }
	.oh-nav li + li{ border-top: 1px solid var(--oh-border); }
	.oh-nav a{ display: block; padding: 15px 0; }
	.oh-nav a:before{ display: none; }
	/* The CTA is hidden in the collapsed bar but rejoins the menu once it's open — it follows
	   .oh-nav in the header markup, so the sibling combinator is enough to place it. */
	.oh-nav.is-open ~ .oh-header-right{ display: flex; order: 4; flex: 1 0 100%; padding-bottom: 18px; }
	.oh-nav.is-open ~ .oh-header-right .oh-header-cta{ width: 100%; text-align: center; }

	.elementor-top-section{ padding-top: 88px; padding-bottom: 88px; }
	#about{ min-height: 0; }
	#about:before{ background: linear-gradient(180deg, rgba(6,6,7,.88) 0%, rgba(6,6,7,.6) 48%, rgba(6,6,7,.9) 100%); }
	#about h1{ font-size: clamp(31px, 8.4vw, 44px); }
	#about .elementor-widget-wrap{ min-height: 0; max-width: none; padding: calc(var(--oh-header-h) + 56px) 0 40px; }
	#about .elementor-widget-wrap > .elementor-widget:first-child{ margin-top: 0; }
	#about .oh-hero-foot{ margin-top: 56px; }

	.oh-section-head{ flex-direction: column; gap: 26px; }
	.oh-pillar-rail{ display: flex; gap: 20px; border-left: 0; border-top: 1px solid var(--oh-border-strong); padding: 16px 0 0; }

	.oh-investment{ min-height: 0; }
	.oh-investment-inner{ padding: calc(var(--oh-header-h) + 56px) var(--oh-gut) 56px; }
	.oh-investment-head h2{ margin-bottom: 44px; }
	.oh-investment-body{ margin-top: 0; }

	.oh-vm-grid{ grid-template-columns: 1fr; gap: 40px; }
	.oh-vm-grid > * + *{ border-left: 0; padding-left: 0; }
	.oh-vm-foot{ flex-direction: column; align-items: flex-start; gap: 18px; margin-top: calc(30vw + 32px); padding-bottom: 32px; }

	.oh-single-investment-body{ grid-template-columns: 1fr; gap: 44px; padding-top: 56px; }
	.oh-footer-inner{ justify-content: center; text-align: center; }
}

@media (max-width: 620px){
	.oh-sectors-grid{ grid-template-columns: 1fr; }
	.oh-sector-tile{ min-height: 320px; }
	.oh-company-row{ grid-template-columns: 1fr; gap: 22px; }
	.oh-company-copy{ border-left: 0; padding-left: 0; }
	.oh-company-plate{ min-height: 0; justify-content: flex-start; padding: 0; }
	/* One column here, so cap the plate rather than letting a logo span the whole screen. */
	.oh-company-plate.oh-has-logo{ justify-content: center; max-width: 270px; }
	.oh-hero-foot-inner{ flex-direction: column; align-items: flex-start; gap: 14px; letter-spacing: .16em; }
	.oh-contact-list li{ gap: 16px; }
	.oh-contact-value{ padding-left: 16px; font-size: 14px; }
	.oh-investment-meta li + li:before{ margin-right: 10px; }
}