/* ==========================================================================
   Weststrand Ventures — Landing Page
   Deliberately built on the exact design tokens of jochen-wallisch.com
   (deep navy, warm off-white, muted grey, sand accent; Newsreader for
   headings, Inter for body) so both sites read as one family without the
   company site looking like a copy of the personal one.
   Calm, generous whitespace, no gradients/blobs/glassmorphism, one single
   restrained reveal animation. Boutique investment office, not consultancy.
   ========================================================================== */

@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/newsreader-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

:root {
	--color-navy: #14304D;
	--color-navy-deep: #0B2036;
	--color-sand: #B08D57;
	--color-sand-dark: #846941;
	--color-sand-light: #D9C6A0;
	--color-offwhite: #F8F4EC;
	--color-white: #FFFFFF;
	--color-grey: #6B6459;
	--color-text: #1B2430;
	--color-border: rgba(20, 48, 77, 0.14);
	--color-border-light: rgba(255, 255, 255, 0.16);

	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;
	--space-5xl: 8rem;

	--shadow-sm: 0 1px 3px rgba(11, 32, 54, 0.08);
	--shadow-md: 0 8px 24px rgba(11, 32, 54, 0.12);
	--shadow-lg: 0 20px 48px rgba(11, 32, 54, 0.18);

	--font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

	--radius: 6px;
	--container-width: 1160px;
	--container-narrow: 860px;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* No dark-mode variant on this site. Without this, some browsers apply
	   native dark-mode form-control styling (white text on white) to the
	   parts of <input>/<textarea> the page doesn't paint itself. */
	color-scheme: light;
	/* Sticky header must not cover the section an #anchor jumps to. */
	scroll-padding-top: 84px;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text);
	background: var(--color-offwhite);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

@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;
	}
}

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

a { color: var(--color-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
	font-family: var(--font-heading);
	color: var(--color-navy);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-weight: 500;
	margin: 0 0 var(--space-md);
}

p { margin: 0 0 var(--space-md); max-width: 68ch; }

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--space-lg);
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-md);
	left: var(--space-md);
	width: auto; height: auto;
	clip: auto;
	background: var(--color-navy);
	color: var(--color-white);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius);
	z-index: 200;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--color-sand-dark);
	outline-offset: 3px;
}

/* Reveal-on-scroll — deliberately quieter than the personal site (12px, no
   real stagger): the brief asks for "no unnecessary animations".

   Scoped to .js-reveal, which main.js sets on <html> only once it has an
   IntersectionObserver and is actually going to run. Without that guard, any
   JS failure (blocked script, extension, syntax error on an old browser)
   would leave every section at opacity:0 — a blank white page instead of a
   page without an animation. */

.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Header ------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(248, 244, 236, 0.94);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--color-border);
}

/* Logged-in WordPress users get the admin bar above everything; without this
   the sticky header slides underneath it. The bar is 32px on desktop and
   46px below 783px, where it is not sticky itself. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 0; }
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding: 0.9rem 0;
}

.site-brand { display: inline-flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.site-brand:hover { text-decoration: none; opacity: 0.75; }
.site-brand__name {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1.18rem;
	color: var(--color-navy);
	letter-spacing: -0.01em;
}
.site-brand__sub {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-sand-dark);
}

.site-nav { display: flex; gap: var(--space-xl); flex: 1; justify-content: center; }
.site-nav a {
	color: var(--color-navy);
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	position: relative;
	padding-bottom: 2px;
}
.site-nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: var(--color-sand);
	transform: scaleX(0);
	transition: transform 200ms ease;
}
.site-nav a:hover { text-decoration: none; }
.site-nav a:hover::after { transform: scaleX(1); }

/* Contact lives in the header button on desktop. That button is hidden in the
   mobile layout, so without this link there would be no way to reach the
   contact section from the header on a phone at all. */
.site-nav__contact { display: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-md); }

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: none;
	cursor: pointer;
}
.menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--color-navy); margin: 4px 0; }

@media (max-width: 900px) {
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		flex-direction: column;
		background: var(--color-offwhite);
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-md) var(--space-lg);
		gap: var(--space-xs);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms;
	}
	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
	}
	.site-nav a { display: block; padding: 10px 0; }
	.site-nav__contact { display: block; }
	.site-header__actions .btn-primary { display: none; }
	.menu-toggle { display: flex; }
}

/* Buttons ------------------------------------------------------------------ */

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border-radius: var(--radius);
	font-weight: 600;
	font-family: var(--font-body);
	font-size: 0.95rem;
	cursor: pointer;
	transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
	border: 1px solid transparent;
}
.btn-primary {
	background: var(--color-sand);
	color: var(--color-navy-deep);
	box-shadow: 0 4px 18px rgba(176, 141, 87, 0.25);
	gap: 10px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(176, 141, 87, 0.38); text-decoration: none; }
.btn-primary__arrow { display: inline-block; transition: transform 220ms var(--ease); }
.btn-primary:hover .btn-primary__arrow { transform: translateX(4px); }

.btn-small { padding: 9px 18px; font-size: 0.85rem; }

/* Hero ------------------------------------------------------------------ */

.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(600px, 90vh, 1000px);
	padding: var(--space-4xl) 0;
	background: var(--color-navy-deep);
	color: var(--color-white);
	text-align: center;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__sea-photo,
.hero__sea-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(65% 55% at 50% 46%, rgba(11, 32, 54, 0.5) 0%, rgba(11, 32, 54, 0.22) 60%, rgba(11, 32, 54, 0) 100%),
		linear-gradient(180deg, rgba(11, 32, 54, 0.55) 0%, rgba(11, 32, 54, 0.32) 35%, rgba(11, 32, 54, 0.4) 65%, rgba(11, 32, 54, 0.78) 100%);
}

@media (prefers-reduced-motion: reduce), (max-width: 480px) {
	.hero__sea-video { display: none; }
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
}

.hero__headline { margin: 0 0 var(--space-xl); }
.hero__name {
	display: block;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(2.3rem, 5vw, 3.9rem);
	line-height: 1.1;
	color: var(--color-white);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.55);
}
.hero__claim {
	display: block;
	margin-top: var(--space-lg);
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.5vw, 1.9rem);
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--color-sand-light);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
/* Thin sand rule between name and claim — the one piece of ornament on the
   page, borrowed from the personal site's section rules. */
.hero__claim::before {
	content: '';
	display: block;
	width: 56px;
	height: 1px;
	background: var(--color-sand);
	margin: 0 auto var(--space-lg);
	opacity: 0.85;
}

.hero__sub {
	max-width: 42ch;
	margin: 0 auto var(--space-2xl);
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.hero__actions { display: flex; gap: var(--space-lg); flex-wrap: wrap; justify-content: center; }

@media (max-width: 600px) {
	.hero { min-height: clamp(520px, 80vh, 760px); padding: var(--space-3xl) 0; }
	.hero__actions { flex-direction: column; align-items: stretch; }
}

/* Sections ------------------------------------------------------------------ */

.section { padding: var(--space-5xl) 0; }
.section--tight { padding: var(--space-4xl) 0; }
.section__heading { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.section__intro { color: var(--color-grey); font-size: 1.08rem; margin-bottom: var(--space-2xl); }

.eyebrow {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	color: var(--color-sand-dark);
	text-transform: uppercase;
	margin-bottom: var(--space-md);
}
/* On the dark page headers, sand-dark is far too low-contrast. */
.eyebrow--light { color: var(--color-sand-light); }

@media (max-width: 700px) {
	.section { padding: var(--space-4xl) 0; }
}

/* Vision ------------------------------------------------------------------ */

.section--vision { background: var(--color-offwhite); }

.vision__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4xl);
	align-items: start;
}

.vision__lines { margin: 0; }
.vision__line {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.7vw, 2.1rem);
	line-height: 1.35;
	color: var(--color-navy);
	max-width: 18ch;
	margin: 0 0 var(--space-sm);
}
.vision__line--muted { color: var(--color-sand-dark); }

.vision__prose p { color: var(--color-text); font-size: 1.05rem; }
.vision__always {
	margin: var(--space-xl) 0 0;
	padding: var(--space-lg) 0 0;
	border-top: 1px solid var(--color-border);
	list-style: none;
	display: grid;
	gap: var(--space-xs);
}
.vision__always li {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.84rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sand-dark);
}

@media (max-width: 900px) {
	.vision__layout { grid-template-columns: 1fr; gap: var(--space-xl); }
	.vision__line { max-width: none; }
}

/* Signature quote ------------------------------------------------------- */

.section--quote {
	position: relative;
	overflow: hidden;
	background: var(--color-navy-deep);
	color: var(--color-white);
	text-align: center;
	padding: var(--space-5xl) 0;
}
/* The same ocean photograph, held far back — carries the hero's atmosphere
   into the middle of the page without introducing a second image world. */
.section--quote::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../images/hero-sea.jpg');
	background-size: cover;
	background-position: center 40%;
	opacity: 0.18;
}
.section--quote::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 32, 54, 0.72) 0%, rgba(11, 32, 54, 0.5) 50%, rgba(11, 32, 54, 0.78) 100%);
}
.section--quote .container { position: relative; z-index: 1; }

.quote {
	max-width: 26ch;
	margin: 0 auto;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	line-height: 1.35;
	color: var(--color-white);
}
.quote__second { display: block; color: var(--color-sand-light); margin-top: var(--space-md); }

@media (max-width: 700px) {
	.quote { max-width: none; }
}

/* What we do ------------------------------------------------------------- */

.section--what { background: var(--color-white); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

.what__head { max-width: 60ch; margin-bottom: var(--space-3xl); }

.card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-xl);
}
/* "Four equally sized cards" per the brief: without this the two grid rows
   size independently and the BridgeWorks row ends up visibly taller. The
   third row stays auto so the one-line "coming soon" card is not stretched
   to card height. */
@media (min-width: 861px) {
	.card-grid { grid-template-rows: 1fr 1fr auto; }
}
.card {
	display: flex;
	flex-direction: column;
	padding: var(--space-2xl) var(--space-xl);
	background: var(--color-offwhite);
	border: 1px solid var(--color-border);
	border-top: 2px solid var(--color-sand);
	transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__icon {
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	color: var(--color-navy);
	margin-bottom: var(--space-lg);
}
.card__icon svg { width: 26px; height: 26px; }
.card__title { font-size: 1.3rem; margin-bottom: var(--space-sm); }
.card__text { color: var(--color-grey); margin-bottom: 0; max-width: none; }
.card__lines { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.card__lines li {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-sand-dark);
}

/* "Coming soon" card — deliberately set apart from the four active areas:
   dashed rule instead of the sand top-border, muted, full width beneath the
   grid, and never stretched to card height. */
.card--soon {
	grid-column: 1 / -1;
	margin-top: var(--space-md);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	flex-wrap: wrap;
	background: transparent;
	border: 1px dashed rgba(20, 48, 77, 0.28);
	padding: var(--space-xl);
}
.card--soon:hover { transform: none; box-shadow: none; }
.card--soon .card__title { margin-bottom: 2px; color: var(--color-grey); }
.card--soon .card__text { color: var(--color-grey); font-size: 0.95rem; }
.badge-soon {
	flex-shrink: 0;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-sand-dark);
	border: 1px solid var(--color-sand);
	border-radius: 999px;
	padding: 6px 16px;
}

@media (max-width: 860px) {
	.card-grid { grid-template-columns: 1fr; }
	.card--soon { flex-direction: column; align-items: flex-start; }
}

/* Philosophy ------------------------------------------------------------- */

.section--philosophy { background: var(--color-offwhite); }

.philosophy__layout {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: var(--space-4xl);
	align-items: start;
}
/* Same scale as every other section heading. It used to be 1.35rem, which
   left the lead-in smaller than the list it introduces — the hierarchy read
   backwards. Italic and weight 400 keep it a spoken sentence running into
   the list rather than a title sitting above it. */
.philosophy__lead {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1.25;
	color: var(--color-navy);
	margin-bottom: 0;
}
.philosophy__list { list-style: none; margin: 0; padding: 0; }
.philosophy__list li {
	font-family: var(--font-heading);
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	line-height: 1.45;
	color: var(--color-navy);
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	gap: var(--space-lg);
	align-items: baseline;
}
.philosophy__list li:first-child { padding-top: 0; }
.philosophy__list li:last-child { border-bottom: none; padding-bottom: 0; }
.philosophy__num {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	/* sand-dark, not sand: #B08D57 on the off-white background is only
	   2.8:1 and fails WCAG AA even as a decorative numeral. */
	color: var(--color-sand-dark);
	flex-shrink: 0;
	width: 1.6rem;
}

@media (max-width: 900px) {
	.philosophy__layout { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* About ------------------------------------------------------------------ */

.section--about { background: var(--color-white); border-top: 1px solid var(--color-border); }

.about__inner { max-width: var(--container-narrow); margin: 0 auto; text-align: center; }
.about__inner p { margin-left: auto; margin-right: auto; }
.about__para { font-size: 1.08rem; color: var(--color-text); max-width: 62ch; }

.about__signature {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.8vw, 2.15rem);
	line-height: 1.35;
	color: var(--color-navy);
	max-width: none;
	margin: var(--space-3xl) auto 0;
	padding-top: var(--space-2xl);
	border-top: 1px solid var(--color-border);
}
.about__signature em { font-style: italic; color: var(--color-sand-dark); }

/* Contact ------------------------------------------------------------------ */

.section--contact { background: var(--color-offwhite); }

.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4xl); align-items: start; }

.contact__details { margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); }
.contact__details dt {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-sand-dark);
	margin-bottom: 2px;
}
.contact__details dd { margin: 0; color: var(--color-text); font-style: normal; }
.contact__details a { color: var(--color-navy); font-weight: 500; }
.contact__details a:hover { color: var(--color-sand-dark); }

.contact-form { display: grid; gap: var(--space-sm); }
.contact-form__label { font-weight: 600; margin-top: var(--space-sm); font-size: 0.95rem; }
.contact-form__legend { font-size: 0.85rem; color: var(--color-grey); margin: var(--space-sm) 0 0; }
.contact-form__legend a { text-decoration: underline; text-underline-offset: 2px; }

.input {
	padding: 13px 16px;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-text);
	border-radius: var(--radius);
	font-size: 16px;
	font-family: var(--font-body);
	transition: border-color 200ms ease, box-shadow 200ms ease;
	width: 100%;
}
.input::placeholder { color: var(--color-grey); opacity: 1; }
.input:focus {
	border-color: var(--color-sand-dark);
	outline: none;
	box-shadow: 0 0 0 3px rgba(132, 105, 65, 0.35);
}
textarea.input { resize: vertical; min-height: 150px; }

.contact-form button { margin-top: var(--space-md); justify-self: start; }

/* Honeypot — kept off-screen rather than display:none so simple bots that
   skip hidden fields still fill it in. Deliberately not named
   "website"/"url": browser autofill recognizes those as a known field type
   and can silently fill them on a real visitor's page load, which would
   make a genuine message look like spam and get dropped. */
.wv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }

.form-notice { padding: var(--space-md); border-radius: var(--radius); font-weight: 600; margin-bottom: var(--space-lg); }
.form-notice--success { background: #E4F2E9; color: #245C3C; }
.form-notice--error { background: #F7E6E6; color: #7A2626; }

@media (max-width: 900px) {
	.contact__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* Sub pages (thank-you, imprint, privacy) --------------------------------- */

.page-header {
	background: var(--color-navy-deep);
	color: var(--color-white);
	padding: var(--space-3xl) 0 var(--space-2xl);
}
.page-header__title { color: var(--color-white); font-size: clamp(2rem, 4vw, 2.7rem); margin-bottom: 0; }
.page-header__lead { color: rgba(255, 255, 255, 0.75); margin: var(--space-md) 0 0; }

.legal-content { max-width: 760px; }
.legal-content h2 {
	font-size: 1.3rem;
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}
.legal-content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content h3 { font-size: 1.05rem; margin-top: var(--space-lg); }
.legal-content p, .legal-content li { color: var(--color-grey); }
.legal-content ul, .legal-content ol { padding-left: 1.25rem; }
.legal-content li { margin-bottom: var(--space-sm); }
.legal-content strong { color: var(--color-navy); }
.legal-content address { font-style: normal; color: var(--color-text); }

.lang-divider {
	margin: var(--space-4xl) 0 var(--space-2xl);
	border: none;
	border-top: 1px solid var(--color-border);
}

.centered-note { max-width: 620px; margin: 0 auto; text-align: center; }
.centered-note p { margin-left: auto; margin-right: auto; }
.centered-note__cta { margin-top: var(--space-xl); }

/* Footer ------------------------------------------------------------------ */

.site-footer { background: var(--color-navy-deep); color: rgba(255, 255, 255, 0.6); padding: var(--space-3xl) 0 var(--space-xl); font-size: 0.9rem; }
.site-footer__inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-2xl); }
.site-footer__brand { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-white); margin-bottom: var(--space-xs); }
.site-footer__claim {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-sand-light);
	margin: 0;
}
.site-footer h2 {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: var(--space-md);
}
.site-footer address, .site-footer p { color: rgba(255, 255, 255, 0.6); font-style: normal; line-height: 1.75; margin: 0; max-width: none; }
.site-footer a { color: rgba(255, 255, 255, 0.75); }
.site-footer a:hover { color: var(--color-white); text-decoration: none; }
.site-footer__legal-nav { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.site-footer__bottom {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border-light);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: space-between;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.5);
}
/* Sub-pages carry only this bottom bar, with no column block above it to be
   separated from — so it drops the rule and the top spacing. */
.site-footer__bottom--only { margin-top: 0; padding-top: 0; border-top: none; }

@media (max-width: 860px) {
	.site-footer__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* Print ------------------------------------------------------------------ */

@media print {
	.hero__sea-video, .menu-toggle, .btn-primary, .contact-form, .hero__scrim { display: none !important; }
	.hero, .section--quote, .site-footer, .page-header {
		background: none !important;
		color: #000 !important;
	}
	.section--quote::before, .section--quote::after { display: none !important; }
	.hero__name, .hero__claim, .hero__sub, .quote, .quote__second,
	.site-footer a, .site-footer p, .site-footer address, .site-footer__brand, .page-header__title {
		color: #000 !important;
		text-shadow: none !important;
	}
	a { text-decoration: underline; }
	.site-header { position: static; }
}