/* ==========================================================================
   world.css — night-sea front page: dark typographic design over the WebGL
   shader, fixed chrome, hero lockup, chapter nav.
   Scoped to body.home (WP front-page body class) so other pages stay light.
   Depends on: tokens.css, base.css, sections.css
   ========================================================================== */


/* --------------------------------------------------------------------------
   Sea canvas + fallback gradient (whole-page background, z 0)
   -------------------------------------------------------------------------- */

#sea {
	position:       fixed;
	inset:          0;
	width:          100%;
	height:         100%;
	display:        block;
	z-index:        0;
	pointer-events: none;
}

.fallback {
	position: fixed;
	inset:    0;
	z-index:  0;
	background: linear-gradient(180deg, #0A0F1A 0%, #0C1733 55%, #0E1F4D 100%);
	pointer-events: none;
}


/* --------------------------------------------------------------------------
   Dark page shell
   -------------------------------------------------------------------------- */

body.home {
	background-color: var(--ink);
	color:            var(--slate-200);
}

/* Sections are transparent panels stacked above the fixed canvas. */
body.home .section {
	background-color: transparent;
	position:         relative;
	z-index:          1;
	min-height:       100svh;
	display:          flex;
	align-items:      center;
	/* Floors scaled down from space-5 (48px) to space-4 (32px) so the
	   preferred vh value kicks in on short viewports (≤533px tall)
	   rather than padding pushing content below the fold. */
	padding-top:      clamp(var(--space-4), 9vh, 6rem);
	padding-bottom:   clamp(var(--space-4), 9vh, 6rem);
}

/* Left-weighted ink scrim — keeps the copy column readable over bright water,
   leaves the right side open sea. Sits behind the section content. */
body.home .section::before {
	content:        "";
	position:       absolute;
	inset:          0;
	z-index:        -1;
	pointer-events: none;
	background: linear-gradient( 100deg,
		rgba( 10, 15, 26, 0.92 ) 0%,
		rgba( 10, 15, 26, 0.74 ) 38%,
		rgba( 10, 15, 26, 0.30 ) 66%,
		rgba( 10, 15, 26, 0.00 ) 88% );
}

/* The contact section spans the full width; heavier uniform scrim for legibility. */
body.home .section--contact::before {
	background: linear-gradient( 100deg,
		rgba( 10, 15, 26, 0.96 ) 0%,
		rgba( 10, 15, 26, 0.90 ) 50%,
		rgba( 10, 15, 26, 0.72 ) 78%,
		rgba( 10, 15, 26, 0.30 ) 100% );
}

/* Inner column — copy lives on the left, sea breathes on the right. */
body.home .section__inner {
	width:       100%;
	max-width:   1280px;
	margin:      0 auto;
	padding:     0 clamp(var(--space-3), 5vw, var(--space-7));
}

/* At rail widths (>=1024px) reserve a left gutter so section copy never sits
   under the fixed chapter rail (rail left offset + label width + gap). */
@media (min-width: 1024px) {
	body.home .section__inner {
		padding-left: calc(clamp(1rem, 4vw, 2.25rem) + 140px);
	}
}

body.home .section__inner > * {
	max-width: 18ch;
}

/* Contact uses a two-column grid — its direct children are layout columns,
   not copy elements; let them fill the grid tracks. */
body.home .contact__inner > * {
	max-width: none;
}

/* Wide elements that should run past the 18ch headline measure. */
body.home .lede,
body.home .hero__actions,
body.home .about-copy,
body.home .about-stats,
body.home .brand-list,
body.home .contact-lede,
body.home .contact-form,
body.home .manifest {
	max-width: none;
}


/* --------------------------------------------------------------------------
   Eyebrow label — small uppercase Manrope kicker with a red tick / index
   -------------------------------------------------------------------------- */

body.home .eyebrow {
	display:        inline-flex;
	align-items:    center;
	gap:            0.625rem;
	font-family:    var(--font-body);
	font-size:      0.75rem;
	font-weight:    600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color:          var(--slate-400);
	margin-bottom:  clamp(var(--space-2), 2.5vh, var(--space-3));
}

body.home .eyebrow__dot {
	width:         7px;
	height:        7px;
	background:    var(--onog-red);
	border-radius: 50%;
	box-shadow:    0 0 0 4px rgba(230, 20, 30, 0.18);
	flex-shrink:   0;
}

body.home .eyebrow__index {
	color:          var(--onog-red);
	font-variant-numeric: tabular-nums;
	font-weight:    700;
}


/* --------------------------------------------------------------------------
   Display headlines — giant Bebas Neue statements
   -------------------------------------------------------------------------- */

body.home .display {
	font-family:    var(--font-display);
	color:          var(--white);
	text-transform: uppercase;
	line-height:    0.9;
	letter-spacing: 0.01em;
	/* vh term caps multi-line statements to the fold; vw keeps it bold on wide
	   screens; px cap stops runaway on huge monitors. */
	font-size:      clamp(2.5rem, min(7.5vw, 12vh), 6rem);
	margin:         0 0 var(--space-3);
	max-width:      14ch;
}

/* Hero headline: 4 rendered lines at desktop. Tie the size to viewport height
   so eyebrow + 4 lines + subline + actions all compose above the fold. */
body.home .display--xl {
	font-size:      clamp(2.75rem, min(8.5vw, 12.5vh), 7rem);
	letter-spacing: 0;
	/* Use a small vh term so margin shrinks on very short viewports. */
	margin-bottom:  clamp(var(--space-1), 2vh, var(--space-3));
}


/* --------------------------------------------------------------------------
   Lede + body copy
   -------------------------------------------------------------------------- */

body.home .lede {
	font-family: var(--font-body);
	font-size:   clamp(1.0625rem, 1.6vw, 1.375rem);
	font-weight: 400;
	line-height: 1.6;
	color:       var(--slate-200);
	max-width:   42ch;
}

body.home p {
	color: var(--slate-200);
}


/* --------------------------------------------------------------------------
   Hero (home) section
   -------------------------------------------------------------------------- */

body.home .section--hero {
	/* Top-align the hero so the eyebrow+headline block starts confidently below
	   the fixed chrome (brand mark / CTA) — no large void, guaranteed clearance.
	   Floor is 3.5rem (56px) not 5rem so at short viewports (≤680px height) the
	   11vh preferred value kicks in earlier and keeps content above the fold. */
	align-items: flex-start;
	padding-top: clamp(3.5rem, 11vh, 7rem);
}

body.home .hero__subline {
	margin-top: clamp(var(--space-1), 2vh, var(--space-4));
}

body.home .hero__actions {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--space-3) var(--space-4);
	margin-top:  clamp(var(--space-2), 2.5vh, var(--space-5));
}

/* Text-with-arrow secondary action */
body.home .link-arrow {
	font-family:     var(--font-body);
	font-size:       0.875rem;
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.12em;
	color:           var(--white);
	text-decoration: none;
	display:         inline-flex;
	align-items:     center;
	gap:             0.5rem;
	padding:         0.5rem 0;
	border-bottom:   1px solid transparent;
	transition:      border-color 0.2s ease, color 0.2s ease;
}

body.home .link-arrow::after {
	content:    "\2192"; /* → */
	transition: transform 0.2s ease;
}

body.home .link-arrow:hover {
	color:         var(--onog-red);
	border-color:  var(--onog-red);
}

body.home .link-arrow:hover::after {
	transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   Services — numbered manifest list, 2×2 grid on desktop.
   NOTE: at > 4 items the grid grows to 3 columns (3×N rows) at ≥1280px;
   for 8 items consider tightening --manifest-row-gap further and reducing
   manifest__body h3 clamp min from 1.25rem toward 1.1rem.
   -------------------------------------------------------------------------- */

body.home .manifest {
	list-style: none;
	margin:     clamp(var(--space-3), 3.5vh, var(--space-5)) 0 0;
	padding:    0;
	max-width:  none; /* grid manages width */
}

/* ≥1024px: 2-column × N-row grid — each cell is one service entry */
@media (min-width: 1024px) {
	body.home .manifest {
		display:               grid;
		grid-template-columns: 1fr 1fr;
		/* Row gap uses a vh term so the total grid height scales with the
		   viewport — tight at short screens, roomier at tall ones. */
		--manifest-row-gap:    clamp(0px, 1.2vh, var(--space-3));
		gap:                   var(--manifest-row-gap) var(--space-5);
		max-width:             960px;
	}
}

body.home .manifest__item {
	display:        grid;
	grid-template-columns: 2.75rem 1fr;
	gap:            var(--space-2);
	align-items:    baseline;
	padding:        clamp(var(--space-2), 1.6vh, var(--space-3)) 0;
	border-top:     1px solid rgba(139, 149, 166, 0.22); /* slate-400 @ 22% */
	transition:     border-color 0.25s ease;
}

/* In the 2-col grid the last two items are in the bottom row —
   give both a bottom border to close the grid visually. */
@media (min-width: 1024px) {
	body.home .manifest__item:nth-last-child(-n+2) {
		border-bottom: 1px solid rgba(139, 149, 166, 0.22);
	}
}

/* Single-column (mobile): only the very last item gets a bottom border. */
@media (max-width: 1023px) {
	body.home .manifest__item:last-child {
		border-bottom: 1px solid rgba(139, 149, 166, 0.22);
	}
}

body.home .manifest__item:hover {
	border-top-color: var(--onog-red);
}

/* Each manifest body is now a link to its service detail page. The link is
   the second grid cell of .manifest__item; it carries no own colour so the
   h3 (white) and p (slate) styling below still applies. */
body.home .manifest__link {
	display:         block;
	text-decoration: none;
	color:           inherit;
}

body.home .manifest__link:hover .manifest__body h3,
body.home .manifest__link:focus-visible .manifest__body h3 {
	color: var(--onog-red);
}

body.home .manifest__link:focus-visible {
	outline:        2px solid var(--onog-red);
	outline-offset: 4px;
}

body.home .manifest__num {
	font-family:    var(--font-body);
	font-size:      0.75rem;
	font-weight:    700;
	letter-spacing: 0.1em;
	color:          var(--steel-blue);
	font-variant-numeric: tabular-nums;
}

body.home .manifest__body h3 {
	font-family:    var(--font-display);
	/* vh term caps height on short viewports; vw keeps it bold on wide ones. */
	font-size:      clamp(1.25rem, min(2.6vw, 4.5vh), 2rem);
	letter-spacing: 0.02em;
	color:          var(--white);
	line-height:    1;
	margin-bottom:  0.375rem;
}

body.home .manifest__body p {
	font-size:   0.875rem;
	line-height: 1.45;
	color:       var(--slate-400);
	max-width:   42ch;
	/* Clamp to 2 lines max on ≥1024px so rows stay uniform height. */
	display:     -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:    hidden;
}


/* --------------------------------------------------------------------------
   Equipment — brand names as a typographic wrap (no boxed grid)
   -------------------------------------------------------------------------- */

body.home .equipment__intro {
	margin-top: var(--space-4);
}

body.home .brand-list {
	list-style: none;
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--space-2) var(--space-5);
	margin:     var(--space-5) 0 0;
	padding:    0;
	max-width:  900px;
}

body.home .brand-list li {
	font-family:    var(--font-display);
	font-size:      clamp(1.5rem, 3.4vw, 2.5rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color:          var(--steel-blue);
	line-height:    1.1;
	transition:     color 0.2s ease;
}

body.home .brand-list li:hover {
	color: var(--white);
}


/* --------------------------------------------------------------------------
   About — copy + stats
   -------------------------------------------------------------------------- */

body.home .about-copy {
	margin-top: clamp(var(--space-2), 2.5vh, var(--space-4));
	max-width:  56ch;
	display:    grid;
	gap:        clamp(var(--space-2), 1.8vh, var(--space-3));
}

body.home .about-copy p:not(.lede) {
	color:     var(--slate-400);
	font-size: 1rem;
}

body.home .about-stats {
	display:    flex;
	flex-wrap:  wrap;
	gap:        clamp(var(--space-3), 6vw, var(--space-6));
	margin-top: clamp(var(--space-3), 4vh, var(--space-6));
}

body.home .stat {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
}

body.home .stat__value {
	font-family:    var(--font-display);
	/* vh term caps stat size at short viewports (720px and under) so the
	   about-stats row stays above the fold. */
	font-size:      clamp(2.25rem, min(6vw, 9vh), 4.5rem);
	line-height:    0.9;
	color:          var(--white);
	letter-spacing: 0.01em;
}

body.home .stat:first-child .stat__value {
	color: var(--onog-red);
}

body.home .stat__label {
	font-size:      0.75rem;
	font-weight:    600;
	color:          var(--slate-400);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}


/* --------------------------------------------------------------------------
   Contact — two-column layout at ≥1024px, single-column below.
   Goal: whole section (header-cleared top → submit button) fits in one vh.
   -------------------------------------------------------------------------- */

body.home .section--contact {
	align-items: flex-start;
	/* Tighter vertical padding so the two columns have room at short viewports. */
	padding-top:    clamp(var(--space-3), 7vh, 4.5rem);
	padding-bottom: clamp(var(--space-3), 7vh, 4.5rem);
}

/* Override section__inner max-width cap for contact — full grid needs width. */
body.home .contact__inner {
	max-width: 1280px;
}

/* Two-column grid: left col ~38%, right col fills the rest. */
@media (min-width: 1024px) {
	body.home .contact__inner {
		display:               grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap:                   clamp(var(--space-4), 4vw, var(--space-7));
		align-items:           start;
	}
}

/* Left column — eyebrow + heading + lede + form notice. */
body.home .contact__left {
	display:        flex;
	flex-direction: column;
}

/* Contact h2 is smaller than hero h1 — clamp it tighter so the left column
   stays within one viewport even at short heights (1280×660). */
@media (min-width: 1024px) {
	body.home .section--contact .display--xl {
		font-size:     clamp(2.25rem, min(5.5vw, 9.5vh), 5rem);
		margin-bottom: clamp(var(--space-1), 1.5vh, var(--space-3));
	}
}

body.home .contact-lede {
	margin-top: clamp(var(--space-1), 1.5vh, var(--space-3));
	max-width:  38ch;
	color:      var(--slate-200);
	/* Tighter lede in the contact column — less line height needed here. */
	font-size:  clamp(0.9375rem, 1.4vw, 1.1875rem);
	line-height: 1.55;
}

body.home .contact-email {
	color:                 var(--white);
	text-decoration:       underline;
	text-decoration-color: var(--onog-red);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	font-weight:           600;
}

body.home .contact-email:hover {
	color: var(--onog-red);
}

body.home .form-notice {
	font-size:      0.8125rem;
	letter-spacing: 0.04em;
	color:          var(--slate-400);
	border-left:    2px solid var(--onog-red);
	padding-left:   var(--space-2);
	margin-top:     clamp(var(--space-2), 2vh, var(--space-4));
}

body.home .contact-social {
	font-size:      0.875rem;
	color:          var(--slate-400);
	margin-top:     clamp(var(--space-2), 2vh, var(--space-3));
}

body.home .contact-linkedin {
	color:           var(--steel-blue);
	font-weight:     600;
	text-decoration: none;
	white-space:     nowrap;
	transition:      color 0.2s ease;
}

body.home .contact-linkedin:hover {
	color: var(--onog-red);
}

/* Right column — the form, no extra top margin (grid handles spacing). */
body.home .contact__right {
	width: 100%;
}

/* At ≥1024px the form's first field row must clear the fixed .cta-fixed button
   (top: clamp(0.75rem,2.4vh,1.4rem) + ~44px button height + 8px gap ≈ 68–76px).
   A vh-clamp padding-top lifts the right column so the Name/Company row starts
   below the chrome at all six target viewports (1440×900…1200×700). */
@media (min-width: 1024px) {
	body.home .contact__right {
		padding-top: clamp(4.5rem, 10vh, 6rem);
	}
}

/* At ≥1024px (two-col layout) compress inputs to fit viewport — still ≥32px
   actual height which is acceptable at desktop (pointer, not touch). */
@media (min-width: 1024px) {
	body.home .form-field input,
	body.home .form-field textarea {
		min-height: clamp(2rem, 3.8vh, 2.75rem);
		padding:    clamp(0.25rem, 0.6vh, 0.5rem) 0;
	}
}

@media (max-width: 1023px) {
	body.home .contact__right {
		margin-top: var(--space-5);
	}
}

body.home .contact-form {
	max-width: none;
}

body.home .form-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	/* Vertical gap compressed hard at short viewports via vh term.
	   At 700px: 1.4vh = 9.8px; at 900px: 1.4vh = 12.6px. */
	gap:                   clamp(0.5rem, 1.4vh, var(--space-3)) var(--space-4);
}

body.home .form-field {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
}

body.home .form-field--full {
	grid-column: 1 / -1;
}

/* Upload + submit share the final row on desktop. */
body.home .form-field--upload {
	grid-column: 1;
}

body.home .form-field--submit {
	grid-column: 2;
	justify-content: flex-end;
	align-self: flex-end;
}

@media (max-width: 1023px) {
	body.home .form-field--upload,
	body.home .form-field--submit {
		grid-column: 1 / -1;
	}
}

body.home .form-field label {
	font-family:    var(--font-body);
	font-size:      clamp(0.5625rem, 1vh, 0.6875rem);
	font-weight:    700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--slate-400);
}

body.home .form-field label span {
	color: var(--onog-red);
}

/* Line inputs: transparent, 1px bottom border only, white text.
   Mobile (single col): 44px min for touch targets. Desktop: vh-clamped to fit. */
body.home .form-field input,
body.home .form-field textarea {
	width:         100%;
	min-height:    2.75rem; /* 44px — mobile touch target floor */
	padding:       0.5rem 0;
	background:    transparent;
	border:        none;
	border-bottom: 1px solid var(--slate-400);
	border-radius: 0;
	color:         var(--white);
	font-family:   var(--font-body);
	font-size:     clamp(0.875rem, 1.8vh, 1rem);
	transition:    border-color 0.2s ease;
}

body.home .form-field textarea {
	resize:      vertical;
	min-height:  clamp(3.5rem, 6vh, 5rem);
	line-height: 1.5;
}

body.home .form-field input::placeholder,
body.home .form-field textarea::placeholder {
	color: var(--slate-700);
}

body.home .form-field input:focus,
body.home .form-field textarea:focus {
	outline:           none;
	border-bottom-color: var(--onog-red);
}

body.home .form-field input[type="file"] {
	color:       var(--slate-400);
	font-size:   0.875rem;
	cursor:      pointer;
	min-height:  2.75rem; /* 44px touch target */
}

/* Date picker on dark sea: color-scheme:dark renders the native calendar icon
   white and gives the picker popup a dark theme to match the form. */
body.home .form-field input[type="date"] {
	color-scheme: dark;
	cursor:       pointer;
}

body.home .form-field input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0.7;
	cursor:  pointer;
}

body.home .form-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

@media (min-width: 1024px) {
	body.home .form-field input[type="file"] {
		min-height: clamp(2rem, 3.8vh, 2.5rem);
	}
}


/* --------------------------------------------------------------------------
   Finale — empty closing viewport so the hero lockup completes over open
   water, not over the contact form or footer.
   -------------------------------------------------------------------------- */

body.home .finale {
	position:   relative;
	z-index:    1;
	/* 88vh gives the lockup (wordmark at 78%, logo at 82–100%) a clean water
	   frame and ensures the bottom snap anchor lands the finale, not partway
	   through the contact section. Bump to 95vh if needed at shorter screens. */
	height:     clamp(80vh, 88vh, 92vh);
	pointer-events: none;
}


/* --------------------------------------------------------------------------
   Footer — minimal dark
   -------------------------------------------------------------------------- */

.site-footer {
	position:   relative;
	z-index:    1;
	background: var(--ink);
	color:      var(--slate-200);
	padding:    var(--space-6) clamp(var(--space-3), 5vw, var(--space-7)) var(--space-4);
}

.site-footer__inner {
	max-width:   1280px;
	margin:      0 auto;
	display:     flex;
	flex-wrap:   wrap;
	justify-content: space-between;
	gap:         var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--slate-700);
}

.site-footer__tagline {
	color:      var(--slate-400);
	font-size:  0.875rem;
	margin-top: var(--space-2);
	max-width:  34ch;
}

.site-footer__cols {
	display: flex;
	gap:     clamp(var(--space-4), 8vw, var(--space-7));
	flex-wrap: wrap;
}

.site-footer__nav ul {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        0.5rem;
}

.site-footer__nav a {
	color:           var(--slate-200);
	text-decoration: none;
	font-size:       0.875rem;
}

.site-footer__nav a:hover {
	color: var(--onog-red);
}

.site-footer__contact {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
}

.site-footer__email {
	color:           var(--white);
	font-size:       1rem;
	font-weight:     700;
	text-decoration: none;
}

.site-footer__email:hover {
	color: var(--onog-red);
}

.site-footer__contact span {
	color:     var(--slate-400);
	font-size: 0.8125rem;
}

.site-footer__linkedin {
	color:           var(--steel-blue);
	font-size:       0.8125rem;
	font-weight:     600;
	text-decoration: none;
	margin-top:      0.25rem;
	transition:      color 0.2s ease;
}

.site-footer__linkedin:hover {
	color: var(--onog-red);
}

.site-footer__copy {
	max-width:  1280px;
	margin:     var(--space-3) auto 0;
	font-size:  0.75rem;
	color:      var(--slate-400);
}

/* Mobile: compact footer — the page-bottom frame must leave the sea (and the
   resting lockup) visible above it. Two-column link grid, tighter rhythm. */
@media (max-width: 760px) {
	.site-footer {
		padding: var(--space-3) var(--space-3) var(--space-2);
	}
	.site-footer__inner {
		gap: var(--space-3);
		padding-bottom: var(--space-2);
	}
	.site-footer__tagline {
		display: none; /* tagline is decorative; the hero copy carries it */
	}
	.site-footer__nav ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.375rem 1.5rem;
	}
	.site-footer__copy {
		margin-top: var(--space-2);
	}
}


/* --------------------------------------------------------------------------
   Fixed chrome — small wordmark (top-left) + red CTA (top-right)
   -------------------------------------------------------------------------- */

.brand-mark {
	position:        fixed;
	top:             clamp(1rem, 3vh, 1.75rem);
	left:            clamp(1rem, 4vw, 2.25rem);
	z-index:         100;
	display:         flex;
	align-items:     center;
	gap:             0.55rem;
	text-decoration: none;
	font-family:     var(--font-display);
	font-size:       clamp(1.25rem, 2.4vw, 1.625rem);
	letter-spacing:  0.18em;
	line-height:     1;
	white-space:     nowrap;
}

.brand-mark__logo {
	display:     block;
	width:       clamp(34px, 4.4vw, 48px);
	height:      auto;
	flex-shrink: 0;
}

.brand-mark__onog {
	color: var(--white);
}

.brand-mark__sub {
	color:          var(--onog-red);
	font-size:      0.62em;
	letter-spacing: 0.22em;
}

/* Fixed top-right action group: LinkedIn icon + Request Service CTA. */
.fixed-actions {
	position:    fixed;
	top:         clamp(0.75rem, 2.4vh, 1.4rem);
	right:       clamp(1rem, 4vw, 2.25rem);
	z-index:     100;
	display:     flex;
	align-items: center;
	gap:         clamp(0.5rem, 1.2vw, 0.75rem);
}

.cta-fixed {
	box-shadow:  0 8px 28px rgba(10, 15, 26, 0.45);
}

.cta-linkedin {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	color:           var(--slate-200);
	text-decoration: none;
	filter:          drop-shadow(0 4px 14px rgba(10, 15, 26, 0.55));
	transition:      color 0.2s ease, transform 0.2s ease;
}

.cta-linkedin:hover,
.cta-linkedin:focus-visible {
	color:     var(--white);
	transform: scale(1.08);
}

/* Footer wordmark variant (static, in flow) */
.brand-mark--footer {
	position:  static;
	font-size: 1.375rem;
}


/* --------------------------------------------------------------------------
   Chapter nav — fixed left rail
   -------------------------------------------------------------------------- */

#chapter-nav {
	position:  fixed;
	left:      clamp(1rem, 4vw, 2.25rem);
	top:       50%;
	transform: translateY(-50%);
	z-index:   90;
	display:   flex;
	flex-direction: column;
	gap:       var(--space-2);
	pointer-events: auto;
}

@media (max-width: 1023px) {
	#chapter-nav { display: none; }
}

#chapter-nav a {
	display:         flex;
	align-items:     center;
	gap:             0.625rem;
	font-family:     var(--font-body);
	font-size:       0.625rem;
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.2em;
	color:           var(--slate-400);
	text-decoration: none;
	line-height:     1;
	transition:      color 0.2s ease;
}

#chapter-nav a:hover {
	color: var(--white);
}

#chapter-nav a::before {
	content:    '';
	display:    block;
	width:      18px;
	height:     1px;
	background: currentColor;
	opacity:    0.4;
	transition: width 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
	flex-shrink: 0;
}

#chapter-nav a.is-active {
	color: var(--white);
}

#chapter-nav a.is-active::before {
	width:      32px;
	opacity:    1;
	background: var(--onog-red);
}


/* --------------------------------------------------------------------------
   Hero lockup — wordmark over logo mark, scrubbed in at the end of the scroll.
   Fixed overlay (z 1), pointer-events none. JS owns the transforms; the CSS
   fallback transforms below = the hidden state (no-JS / pre-JS).
   -------------------------------------------------------------------------- */

body.home { --waterline: 76vh; --logo: min(46vh, 88vw); }

/* Mobile: the stacked footer is tall (~50vh at the page bottom) and covers the
   lockup's waterline zone — raise the waterline and shrink the mark so the
   resting logo stays visible in the open sea above the footer. */
@media (max-width: 760px) {
	body.home { --waterline: 58vh; --logo: min(34vh, 72vw); }
}

#hero {
	position:       fixed;
	inset:          0;
	z-index:        1;
	pointer-events: none;
}

.hero-wm {
	position:   absolute;
	left:       50%;
	top:        6vh;
	transform:  translateX(-50%);
	text-align: center;
}

.hero-wm-inner {
	display:    inline-block;
	transform:  translateY(calc(-100% - 8vh)); /* hidden state */
	will-change: transform;
}

.hero-onog {
	font-family:    var(--font-display);
	font-weight:    400;
	line-height:    0.92;
	font-size:      min(17vh, 24vw);
	letter-spacing: 0.06em;
	margin-right:   -0.06em;
	color:          var(--white);
}

.hero-sub {
	display:         flex;
	justify-content: space-between;
	margin-top:      1.4vh;
	padding:         0 0.3em;
	font-family:     var(--font-body);
	font-weight:     700;
	font-size:       min(3vh, 4.2vw);
	color:           var(--onog-red);
}

.sea-clip {
	position: absolute;
	left:     0;
	right:    0;
	top:      0;
	height:   var(--waterline);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 5vh), rgba(0,0,0,.3) 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 5vh), rgba(0,0,0,.3) 100%);
}

.hero-logo {
	position:    absolute;
	left:        50%;
	bottom:      0;
	width:       var(--logo);
	height:      var(--logo);
	margin-left: calc(var(--logo) / -2);
}

.hero-logo img {
	display:     block;
	width:       100%;
	height:      100%;
	opacity:     0.96;
	transform:   translateY(calc(1.05 * var(--logo))); /* hidden state */
	will-change: transform;
	filter:      drop-shadow(0 1vh 5vh rgba(10, 15, 26, 0.55));
}


/* --------------------------------------------------------------------------
   Responsive — narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	body.home .form-grid {
		grid-template-columns: 1fr;
	}

	body.home .manifest__item {
		grid-template-columns: 2.25rem 1fr;
		gap: var(--space-2);
	}

	/* Fuller scrim on phones — text spans most of the width. */
	body.home .section::before {
		background: linear-gradient( 175deg,
			rgba( 10, 15, 26, 0.70 ) 0%,
			rgba( 10, 15, 26, 0.88 ) 40%,
			rgba( 10, 15, 26, 0.94 ) 100% );
	}

	.cta-fixed {
		padding:   0.625rem 1.1rem;
		font-size: 0.75rem;
	}

	.brand-mark {
		letter-spacing: 0.12em;
	}

	/* The top row is tight on phones (wordmark + icon + CTA collide). Drop the
	   LinkedIn icon here — it stays reachable in the contact section + footer. */
	.cta-linkedin {
		display: none;
	}
}