/*
Theme Name: Woodbridge Legacy Group
Theme URI: https://woodbridgelegacygroup.com
Description: A standalone theme for Woodbridge Legacy Group, LLC — the parent organization behind a portfolio of digital ventures. Architectural navy and bronze, abstract vector artwork, no stock photography.
Author: David Clouse
Author URI: https://clousedesigns.com
Version:           1.3.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: woodbridge
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-logo, custom-menu, featured-images, translation-ready, full-width-template
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/*
 * The palette is navy-first with a single bronze accent, per the brief.
 * Every pairing below was measured before it was used, and two of the
 * measurements changed the design:
 *
 *   white on --wlg-gold ......... 2.80:1   rejected
 *   --wlg-navy on --wlg-gold .... 6.17:1   used for the primary button
 *   --wlg-gold as text on ivory . 2.48:1   rejected
 *   --wlg-gold-ink on ivory ..... 5.19:1   used for gold text on light
 *   --wlg-gold-soft on navy ..... 8.42:1   used for gold text on dark
 *   --wlg-ivory on navy ........ 15.30:1
 *   --wlg-navy on ivory ........ 15.30:1
 *   --wlg-body on ivory ......... 6.86:1
 *   --wlg-steel on navy ......... 6.48:1
 *
 * The first line is the one that mattered. A bronze light enough to read as
 * gold cannot carry white text -- 2.80:1 is roughly a watermark. Rather than
 * darken the accent into a muddy brown to rescue the white, the label went
 * navy. Dark ink on gold is also the more premium reference: foil and
 * bookbinding, not a coloured web button.
 *
 * So there are three golds, and they are not interchangeable:
 *   --wlg-gold      a FILL, or a line on navy. Never text on a light ground.
 *   --wlg-gold-soft TEXT on navy.
 *   --wlg-gold-ink  TEXT on ivory.
 */
:root {
	/* Grounds */
	--wlg-navy: #101b2d;
	--wlg-navy-deep: #0a1220;
	--wlg-navy-soft: #1b2942;
	--wlg-navy-line: #2b3b57;
	--wlg-ivory: #f4f1ea;
	--wlg-ivory-soft: #faf8f4;
	--wlg-white: #ffffff;

	/* Ink */
	--wlg-ink: #101b2d;
	--wlg-body: #4a5364;
	--wlg-on-navy: #e9e5dc;
	--wlg-on-navy-muted: #a9b4c4;

	/* Accents */
	--wlg-gold: #b8955f;
	--wlg-gold-soft: #cdb188;
	--wlg-gold-ink: #7d602f;
	--wlg-on-gold: #101b2d;
	--wlg-steel: #8fa0b8;

	/* Lines */
	--wlg-rule: rgba(16, 27, 45, 0.12);
	--wlg-rule-dark: rgba(233, 229, 220, 0.16);

	/*
	 * Type. Serif display against a sans body is the brief's "heritage +
	 * innovation" pairing. Both are system stacks: a holding-company homepage
	 * that blocks its own first paint on a font download is not premium, it is
	 * slow. Swap either token for a hosted face and the whole site follows.
	 */
	--wlg-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
	--wlg-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Rhythm */
	--wlg-shell: 1200px;
	--wlg-gutter: clamp(1.25rem, 4vw, 3rem);
	--wlg-section: clamp(4.5rem, 9vw, 8rem);
	--wlg-radius: 4px;

	/*
	 * Corner radius is deliberately almost nothing. Rounded cards read as
	 * software; near-square edges read as architecture, which is the whole
	 * visual argument of the brief.
	 */
	--wlg-shadow: 0 24px 60px rgba(10, 18, 32, 0.10);
	--wlg-shadow-lift: 0 32px 72px rgba(10, 18, 32, 0.16);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--wlg-ivory-soft);
	color: var(--wlg-body);
	font-family: var(--wlg-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--wlg-gold-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
	color: var(--wlg-ink);
}

h1, h2, h3, h4 {
	margin: 0 0 0.6em;
	color: var(--wlg-ink);
	font-family: var(--wlg-font-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.012em;
}

p {
	margin: 0 0 1.15em;
}

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

ul, ol {
	margin: 0 0 1.15em;
	padding-left: 1.2em;
}

/*
 * Focus is a visible ring everywhere, and the transparent outline underneath
 * is not decorative: in forced-colours mode box-shadow is dropped entirely,
 * and an outline is the only thing left to draw the ring.
 */
:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 3px;
	box-shadow: 0 0 0 2px var(--wlg-ivory-soft), 0 0 0 4px var(--wlg-gold-ink);
	border-radius: 2px;
}

.wlg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wlg-navy);
	color: var(--wlg-on-navy);
	text-decoration: none;
}

.wlg-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

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

.wlg-main {
	display: block;
}

.wlg-eyebrow {
	margin: 0 0 1.1rem;
	font-family: var(--wlg-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/*
 * Two eyebrow tones, because the accent cannot do both grounds. Gold at
 * 2.48:1 on ivory is unreadable at 11px; --wlg-gold-ink is 5.19:1 and reads
 * as the same colour at this size.
 */
.wlg-eyebrow--light { color: var(--wlg-gold-ink); }
.wlg-eyebrow--dark  { color: var(--wlg-gold-soft); }

.wlg-section-head {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	max-width: 46rem;
}

.wlg-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.wlg-section-head__heading {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/*
 * One button component, two variants, aware of the ground it sits on.
 *
 * The label on the primary is --wlg-on-gold (navy) rather than white. See the
 * measurement table in the tokens block: white on this bronze is 2.80:1.
 */
.wlg-btn {
	--wlg-btn-bg: var(--wlg-gold);
	--wlg-btn-fg: var(--wlg-on-gold);
	--wlg-btn-border: var(--wlg-gold);
	--wlg-btn-bg-hover: var(--wlg-gold-soft);
	--wlg-btn-border-hover: var(--wlg-gold-soft);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.875rem;
	padding: 0.7rem 1.65rem;
	border: 1px solid var(--wlg-btn-border);
	border-radius: var(--wlg-radius);
	background: var(--wlg-btn-bg);
	color: var(--wlg-btn-fg);
	font-family: var(--wlg-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.wlg-btn:hover,
.wlg-btn:focus-visible {
	background: var(--wlg-btn-bg-hover);
	border-color: var(--wlg-btn-border-hover);
	color: var(--wlg-btn-fg);
	text-decoration: none;
}

.wlg-btn:active {
	transform: translateY(1px);
}

/*
 * Secondary on a light ground: navy label, hairline navy border, filling to
 * navy on hover. Gold is not used for the outline here -- at 2.48:1 on ivory
 * it fails 1.4.11's 3:1 for a control boundary, which is the same trap the
 * GayRoomies secondary button hit.
 */
.wlg-btn--secondary {
	--wlg-btn-bg: transparent;
	--wlg-btn-fg: var(--wlg-ink);
	--wlg-btn-border: rgba(16, 27, 45, 0.32);
	--wlg-btn-bg-hover: var(--wlg-navy);
	--wlg-btn-border-hover: var(--wlg-navy);
}

.wlg-btn--secondary:hover,
.wlg-btn--secondary:focus-visible {
	color: var(--wlg-ivory);
}

/* On navy: the outline and label are ivory, inverting to an ivory fill. */
.wlg-btn--secondary.wlg-btn--on-dark {
	--wlg-btn-fg: var(--wlg-on-navy);
	--wlg-btn-border: rgba(233, 229, 220, 0.42);
	--wlg-btn-bg-hover: var(--wlg-ivory);
	--wlg-btn-border-hover: var(--wlg-ivory);
}

.wlg-btn--secondary.wlg-btn--on-dark:hover,
.wlg-btn--secondary.wlg-btn--on-dark:focus-visible {
	color: var(--wlg-ink);
}

.wlg-btn--sm {
	min-height: 2.5rem;
	padding: 0.55rem 1.15rem;
	font-size: 0.6875rem;
}

.wlg-btn--block {
	width: 100%;
}

.wlg-btn:focus-visible {
	box-shadow: 0 0 0 2px var(--wlg-ivory-soft), 0 0 0 4px var(--wlg-gold-ink);
}

.wlg-btn--on-dark:focus-visible {
	box-shadow: 0 0 0 2px var(--wlg-navy), 0 0 0 4px var(--wlg-gold-soft);
}

.wlg-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */

/*
 * Logo left, menu right, call to action pinned to the far right.
 *
 * Three flex children: the wordmark and the actions both refuse to shrink,
 * and the nav takes everything between them and pushes its list to the end.
 * That is what puts the menu hard against the CTA rather than floating in the
 * middle of the free space.
 */
.wlg-masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wlg-navy);
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/*
 * Only the front page floats the header. There it sits transparent over the
 * hero and takes its own ground once scrolled; everywhere else it is a solid
 * sticky bar of the same navy as the page-hero beneath it, which reads as one
 * continuous band and -- being in normal flow -- needs no offset to clear.
 */
.wlg-front .wlg-masthead {
	position: absolute;
	inset-inline: 0;
	background: transparent;
}

.wlg-front .wlg-masthead.is-scrolled {
	position: fixed;
	background: rgba(16, 27, 45, 0.94);
	border-bottom-color: var(--wlg-navy-line);
	box-shadow: 0 12px 40px rgba(10, 18, 32, 0.28);
	backdrop-filter: saturate(140%) blur(10px);
}

.wlg-masthead__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.75rem);
	min-height: 6.5rem;
}

/*
 * The admin bar.
 *
 * WordPress pins a 32px bar to the top of the viewport for logged-in users
 * (46px under 783px wide, and it stops being fixed under 601px). This header is
 * fixed or sticky at top: 0, so without an offset the bar sits over it and
 * crops the top of the wordmark -- visible on the real site and invisible in
 * every logged-out screenshot, which is exactly how it survived the first
 * build.
 *
 * The front page is a slightly different case: there the header is absolutely
 * positioned in normal flow, where WordPress's own html{margin-top:32px} has
 * already moved it clear -- but only until it switches to fixed on scroll, at
 * which point it needs the same offset as everything else.
 */
.admin-bar .wlg-masthead {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wlg-masthead {
		top: 46px;
	}
}

/* Under 601px the admin bar scrolls away with the page, so no offset applies. */
@media screen and (max-width: 600px) {
	.admin-bar .wlg-masthead {
		top: 0;
	}
}

.wlg-wordmark {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
	color: var(--wlg-on-navy);
}

/*
 * The monogram, sized to the type beside it rather than to a fixed header
 * budget. Height-driven and non-shrinking: it is the one element on this row
 * that must never be squeezed by a long menu.
 */
.wlg-wordmark__mark {
	flex-shrink: 0;
	height: 46px;
	width: auto;
	display: block;
}

/*
 * line-height on the wordmark is 1.15, not 1. At exactly 1 the line box equals
 * the em box, which for a serif is smaller than its own ascenders -- the caps
 * touch the edge and the mark reads as cropped even when nothing is clipping
 * it. The two lines are held together by the gap instead.
 */
.wlg-wordmark__type {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	line-height: 1.15;
}

/*
 * Set larger than it was when the wordmark lived inside the artwork. Baked into
 * the SVG the type was bound to the mark's proportions, so pinning the image to
 * the header made the words small; as live text it is sized to be read.
 */
.wlg-wordmark__name {
	font-family: var(--wlg-font-display);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
}

/*
 * The second line is set smaller and spaced wider than the first, so the pair
 * locks into a block of even optical width. That relationship is what makes a
 * typographic placeholder read as a considered wordmark rather than as two
 * lines of text -- and it is all the identity this build is allowed to create,
 * the brief being explicit that the real mark is not final.
 */
.wlg-wordmark__sub {
	font-family: var(--wlg-font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--wlg-gold-soft);
	padding-left: 0.16em;
}

.wlg-wordmark .custom-logo {
	max-height: 44px;
	width: auto;
}

.wlg-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.wlg-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlg-nav__link {
	position: relative;
	display: inline-block;
	padding: 0.4rem 0;
	color: var(--wlg-on-navy);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.wlg-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--wlg-gold-soft);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.wlg-nav__link:hover,
.wlg-nav__link:focus-visible,
.current-menu-item > .wlg-nav__link {
	color: var(--wlg-gold-soft);
}

.wlg-nav__link:hover::after,
.wlg-nav__link:focus-visible::after,
.current-menu-item > .wlg-nav__link::after {
	transform: scaleX(1);
}

.wlg-masthead__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.wlg-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(233, 229, 220, 0.28);
	border-radius: var(--wlg-radius);
	background: transparent;
	color: var(--wlg-on-navy);
	cursor: pointer;
}

.wlg-menu-toggle__icon--close { display: none; }
.wlg-menu-toggle[aria-expanded="true"] .wlg-menu-toggle__icon--open { display: none; }
.wlg-menu-toggle[aria-expanded="true"] .wlg-menu-toggle__icon--close { display: block; }

/* Mobile drawer ---------------------------------------------------------- */

.wlg-drawer {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2rem;
	padding: 6rem var(--wlg-gutter) 3rem;
	background: var(--wlg-navy);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-1rem);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.wlg-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wlg-drawer .wlg-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.35rem;
}

.wlg-drawer .wlg-nav__link {
	font-family: var(--wlg-font-display);
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	text-transform: none;
}

.wlg-drawer-open {
	overflow: hidden;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.wlg-hero {
	position: relative;
	background: var(--wlg-navy);
	color: var(--wlg-on-navy);
	overflow: hidden;
}

/*
 * A single soft wash rather than a busy gradient. The brief asks for dramatic
 * but restrained, and everything with visual interest in this section is
 * happening in the artwork already.
 */
.wlg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 70% at 78% 28%, rgba(61, 93, 128, 0.30), transparent 62%),
		radial-gradient(60% 60% at 12% 88%, rgba(184, 149, 95, 0.10), transparent 68%);
	pointer-events: none;
}

.wlg-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(9rem, 15vw, 12rem) clamp(5rem, 9vw, 8rem);
}

/*
 * The headline is two sentences and is meant to set as two lines -- the break
 * between them comes from the Customizer field and is part of the typography,
 * not an accident of column width. Sizing has to respect that: at 4.15rem in a
 * 14ch box it wrapped to four lines and left "next." stranded on its own.
 *
 * "Building digital ventures." is the longer of the two at 25 characters, so
 * the maximum size is the one that still fits it on one line in this column.
 */
.wlg-hero__heading {
	margin: 0 0 1.5rem;
	max-width: 24ch;
	color: var(--wlg-white);
	font-size: clamp(2.2rem, 4.2vw, 2.95rem);
	line-height: 1.1;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.wlg-hero__text {
	max-width: 44ch;
	margin: 0 0 2.25rem;
	color: var(--wlg-on-navy-muted);
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.7;
}

.wlg-hero__art {
	display: flex;
	justify-content: center;
}

.wlg-hero-art {
	width: 100%;
	max-width: 30rem;
	height: auto;
	overflow: visible;
}

.wlg-hero-art__net line,
.wlg-hero-art__thread line {
	stroke: var(--wlg-steel);
	stroke-width: 1;
}

.wlg-hero-art__net line { stroke-opacity: 0.42; }

/* The two descending threads are gold: they are the connection between the
   network above and the built forms below, which is the picture's whole point. */
.wlg-hero-art__thread line {
	stroke: var(--wlg-gold-soft);
	stroke-opacity: 0.55;
	stroke-dasharray: 3 5;
}

/* ==========================================================================
   7. ONE VISION
   ========================================================================== */

.wlg-intro {
	background: var(--wlg-ivory);
	padding-block: var(--wlg-section);
}

.wlg-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.wlg-intro__heading {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.1rem);
}

/*
 * A hairline on the left of the body column, not a box. It ties the two halves
 * together and signals subordination -- this paragraph explains that heading --
 * without drawing a card around anything.
 */
.wlg-intro__body {
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
	border-left: 1px solid var(--wlg-rule);
	font-size: 1.0625rem;
	line-height: 1.8;
}

/* ==========================================================================
   8. VENTURE PORTFOLIO
   ========================================================================== */

.wlg-ventures {
	background: var(--wlg-ivory);
	padding-block: 0 var(--wlg-section);
}

.wlg-ventures__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.wlg-venture {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wlg-rule);
	border-radius: var(--wlg-radius);
	background: var(--wlg-white);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/*
 * Two dark cards and two light ones. The brief is explicit that the four
 * ventures must not look identical -- the parent supplies the frame, each
 * venture keeps its personality -- and alternating the card ground is the
 * cheapest way to say that without four separate components.
 */
.wlg-venture--dark {
	background: var(--wlg-navy);
	border-color: var(--wlg-navy-line);
	color: var(--wlg-on-navy);
}

.wlg-venture:hover {
	transform: translateY(-4px);
	box-shadow: var(--wlg-shadow-lift);
	border-color: var(--wlg-venture-accent, var(--wlg-gold));
}

.wlg-venture__canvas {
	position: relative;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wlg-ivory);
	border-bottom: 1px solid var(--wlg-rule);
	overflow: hidden;
}

.wlg-venture--dark .wlg-venture__canvas {
	background: var(--wlg-navy-deep);
	border-bottom-color: var(--wlg-navy-line);
}

.wlg-venture__art {
	width: 100%;
	height: 100%;
}

.wlg-venture__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wlg-venture__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.4rem 1.4rem;
}

/*
 * The accent appears as a short rule above the name rather than as coloured
 * type. Venture accents are Customizer values -- #c2410c, #6aa9e0, whatever a
 * future venture brings -- and there is no way to guarantee an arbitrary hex
 * is legible as text on either ground. As a 2px rule it is decoration, held to
 * 1.4.11 rather than to the 4.5:1 text minimum, and it cannot become an
 * accessibility problem no matter what colour is chosen.
 */
.wlg-venture__body::before {
	content: "";
	width: 2rem;
	height: 2px;
	margin-bottom: 1.1rem;
	background: var(--wlg-venture-accent, var(--wlg-gold));
}

.wlg-venture__name {
	margin: 0 0 0.3rem;
	font-family: var(--wlg-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wlg-ink);
}

.wlg-venture--dark .wlg-venture__name { color: var(--wlg-white); }

.wlg-venture__category {
	margin: 0 0 0.85rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wlg-gold-ink);
}

.wlg-venture--dark .wlg-venture__category { color: var(--wlg-gold-soft); }

.wlg-venture__text {
	margin: 0 0 1.4rem;
	font-size: 0.875rem;
	line-height: 1.65;
}

.wlg-venture--dark .wlg-venture__text { color: var(--wlg-on-navy-muted); }

.wlg-venture__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	color: var(--wlg-ink);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.wlg-venture--dark .wlg-venture__link { color: var(--wlg-on-navy); }

.wlg-venture__link .wlg-icon {
	transition: transform 0.25s ease;
}

.wlg-venture__link:hover .wlg-icon,
.wlg-venture:hover .wlg-venture__link .wlg-icon {
	transform: translateX(4px);
}

/* ==========================================================================
   9. WHAT WE BUILD
   ========================================================================== */

.wlg-build {
	background: var(--wlg-white);
	padding-block: var(--wlg-section);
	border-top: 1px solid var(--wlg-rule);
}

.wlg-build--light {
	background: var(--wlg-ivory);
	border-top: 0;
}

.wlg-build__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.wlg-build__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wlg-build__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	margin-bottom: 1.35rem;
	border: 1px solid var(--wlg-rule);
	border-radius: 50%;
	color: var(--wlg-gold-ink);
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.wlg-build__item:hover .wlg-build__icon {
	border-color: var(--wlg-gold);
	transform: translateY(-3px);
}

.wlg-build__title {
	margin: 0 0 0.5rem;
	font-family: var(--wlg-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wlg-build__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 22ch;
}

/* ==========================================================================
   10. BUILT WITH PURPOSE
   ========================================================================== */

.wlg-purpose {
	position: relative;
	background: var(--wlg-navy);
	color: var(--wlg-on-navy);
	padding-block: clamp(6rem, 12vw, 10rem);
	overflow: hidden;
	text-align: center;
}

.wlg-purpose__art {
	position: absolute;
	inset: auto 0 0;
	height: 100%;
	pointer-events: none;
}

.wlg-purpose-art {
	width: 100%;
	height: 100%;
}

.wlg-purpose__inner {
	position: relative;
	max-width: 54rem;
}

.wlg-purpose__heading {
	margin: 0 0 1.6rem;
	color: var(--wlg-white);
	font-size: clamp(2.1rem, 4.8vw, 3.6rem);
	line-height: 1.08;
}

.wlg-purpose__text {
	margin: 0 auto;
	max-width: 46rem;
	color: var(--wlg-on-navy-muted);
	font-size: clamp(1rem, 1.35vw, 1.1875rem);
	line-height: 1.8;
}

/* ==========================================================================
   11. THIS IS ONLY THE BEGINNING
   ========================================================================== */

.wlg-future {
	background: var(--wlg-navy-deep);
	color: var(--wlg-on-navy);
	padding-block: var(--wlg-section);
	overflow: hidden;
}

.wlg-future__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.wlg-future__heading {
	margin: 0 0 1.25rem;
	color: var(--wlg-white);
	font-size: clamp(1.9rem, 4vw, 3rem);
	max-width: 12ch;
}

.wlg-future__text {
	max-width: 46ch;
	margin: 0 0 2rem;
	color: var(--wlg-on-navy-muted);
	line-height: 1.75;
}

.wlg-future__art { display: flex; justify-content: center; }
.wlg-future-art { width: 100%; max-width: 26rem; }

/* ==========================================================================
   12. INNER PAGES
   ========================================================================== */

/*
 * Top padding here is modest because the sticky header above it occupies real
 * space -- this band starts where the header ends. The hero on the front page
 * carries the large top padding instead, because there the header is floating
 * over it and the headline would otherwise start underneath the nav.
 */
.wlg-pagehero {
	background: var(--wlg-navy);
	color: var(--wlg-on-navy);
	padding-block: clamp(3.25rem, 7vw, 5.5rem);
}

.wlg-pagehero__inner { max-width: 52rem; }

.wlg-pagehero__heading {
	margin: 0 0 1.25rem;
	color: var(--wlg-white);
	font-size: clamp(2.1rem, 4.8vw, 3.5rem);
	line-height: 1.06;
}

.wlg-pagehero__text {
	margin: 0;
	max-width: 52ch;
	color: var(--wlg-on-navy-muted);
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.75;
}

.wlg-prose-section {
	background: var(--wlg-ivory-soft);
	padding-block: var(--wlg-section);
}

.wlg-prose-section__inner { max-width: 100%; }

.wlg-prose {
	max-width: 44rem;
	font-size: 1.0625rem;
	line-height: 1.8;
}

.wlg-prose h2 {
	margin-top: 2.6rem;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.wlg-prose h2:first-child { margin-top: 0; }

.wlg-prose h3 {
	margin-top: 2rem;
	font-size: 1.25rem;
}

/* Our Ventures — the detail treatment ------------------------------------ */

.wlg-portfolio {
	background: var(--wlg-ivory-soft);
	padding-block: var(--wlg-section);
}

/*
 * On this page the card unfolds: artwork on one side, copy on the other, and
 * the sides alternate down the page. Same component, same data, different
 * shape -- which is the point the brief makes about the parent supplying a
 * frame rather than a uniform.
 */
.wlg-venture--detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	margin-bottom: 1.5rem;
}

.wlg-venture--detail:last-child { margin-bottom: 0; }

.wlg-venture--detail:hover { transform: none; }

.wlg-venture--detail .wlg-venture__canvas {
	aspect-ratio: auto;
	min-height: 19rem;
	border-bottom: 0;
	border-right: 1px solid var(--wlg-rule);
}

.wlg-venture--detail.wlg-venture--dark .wlg-venture__canvas {
	border-right-color: var(--wlg-navy-line);
}

.wlg-venture--detail .wlg-venture__body {
	justify-content: center;
	padding: clamp(2rem, 4vw, 3.25rem);
}

.wlg-venture--detail .wlg-venture__name { font-size: 1rem; }

.wlg-venture--detail .wlg-venture__text {
	font-size: 1rem;
	max-width: 42ch;
}

.wlg-venture--detail:nth-child(even) .wlg-venture__canvas { order: 2; border-right: 0; border-left: 1px solid var(--wlg-rule); }
.wlg-venture--detail:nth-child(even).wlg-venture--dark .wlg-venture__canvas { border-left-color: var(--wlg-navy-line); }

.wlg-venture--detail .wlg-btn { align-self: flex-start; }

.wlg-venture--detail.wlg-venture--dark .wlg-btn--secondary {
	--wlg-btn-fg: var(--wlg-on-navy);
	--wlg-btn-border: rgba(233, 229, 220, 0.42);
	--wlg-btn-bg-hover: var(--wlg-ivory);
	--wlg-btn-border-hover: var(--wlg-ivory);
}

.wlg-venture--detail.wlg-venture--dark .wlg-btn--secondary:hover { color: var(--wlg-ink); }

/* What We Do — the capability rows --------------------------------------- */

.wlg-capabilities {
	background: var(--wlg-ivory-soft);
	padding-block: var(--wlg-section);
}

.wlg-capability {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
	border-top: 1px solid var(--wlg-rule);
}

.wlg-capability:first-child { border-top: 0; padding-top: 0; }

.wlg-capability__mark {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

.wlg-capability__number {
	font-family: var(--wlg-font-display);
	font-size: 1.75rem;
	color: var(--wlg-gold-ink);
	line-height: 1;
}

.wlg-capability__icon {
	color: var(--wlg-ink);
	opacity: 0.55;
}

.wlg-capability__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.wlg-capability__lead {
	margin: 0 0 1rem;
	color: var(--wlg-gold-ink);
	font-size: 1rem;
	font-weight: 600;
}

.wlg-capability__text {
	margin: 0;
	max-width: 52ch;
	line-height: 1.8;
}

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

.wlg-contact {
	background: var(--wlg-ivory-soft);
	padding-block: var(--wlg-section);
}

.wlg-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.wlg-contact__card {
	padding: 1.75rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--wlg-rule);
	border-radius: var(--wlg-radius);
	background: var(--wlg-white);
}

.wlg-contact__card:last-child { margin-bottom: 0; }

.wlg-contact__card-title {
	margin: 0 0 1rem;
	font-family: var(--wlg-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wlg-gold-ink);
}

.wlg-contact__email {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wlg-ink);
	font-size: 1.0625rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.wlg-contact__email:hover { color: var(--wlg-gold-ink); }

.wlg-contact__hint { margin: 0; font-size: 0.9375rem; }

.wlg-contact__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlg-contact__list li {
	padding-left: 0.9rem;
	border-left: 2px solid var(--wlg-venture-accent, var(--wlg-gold));
	margin-bottom: 1rem;
}

.wlg-contact__list li:last-child { margin-bottom: 0; }

.wlg-contact__list a {
	display: block;
	color: var(--wlg-ink);
	font-weight: 600;
	text-decoration: none;
}

.wlg-contact__list a:hover { color: var(--wlg-gold-ink); }

.wlg-contact__list span {
	display: block;
	font-size: 0.8125rem;
	color: var(--wlg-body);
}

/* Closing band ------------------------------------------------------------ */

.wlg-ctaband {
	background: var(--wlg-navy);
	color: var(--wlg-on-navy);
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.wlg-ctaband__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.wlg-ctaband__heading {
	margin: 0 0 0.5rem;
	color: var(--wlg-white);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.wlg-ctaband__text {
	margin: 0;
	max-width: 52ch;
	color: var(--wlg-on-navy-muted);
}

/* Blog ------------------------------------------------------------------- */

.wlg-postlist { display: grid; gap: 2.5rem; max-width: 44rem; }

.wlg-postcard { padding-bottom: 2.5rem; border-bottom: 1px solid var(--wlg-rule); }
.wlg-postcard:last-child { border-bottom: 0; padding-bottom: 0; }

.wlg-postcard__meta {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wlg-gold-ink);
}

.wlg-postcard__title { margin: 0 0 0.6rem; font-size: 1.5rem; }
.wlg-postcard__title a { color: inherit; text-decoration: none; }
.wlg-postcard__title a:hover { color: var(--wlg-gold-ink); }
.wlg-postcard__excerpt { margin: 0; }

.wlg-pagination { margin-top: 3rem; display: flex; gap: 0.75rem; }
.wlg-pagination a, .wlg-pagination span { text-decoration: none; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.wlg-footer {
	background: var(--wlg-navy-deep);
	color: var(--wlg-on-navy-muted);
	padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
	border-top: 1px solid var(--wlg-navy-line);
}

.wlg-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 3.5rem);
	padding-bottom: 3rem;
}

.wlg-wordmark--footer {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 1.1rem;
}

.wlg-wordmark--footer .wlg-wordmark__mark { height: 40px; }
.wlg-footer__brand .wlg-wordmark__name { color: var(--wlg-white); }

.wlg-footer__statement {
	margin: 0;
	max-width: 30ch;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.wlg-footer__heading {
	margin: 0 0 1.1rem;
	font-family: var(--wlg-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wlg-gold-soft);
}

.wlg-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.65rem;
}

.wlg-footer__list a {
	color: var(--wlg-on-navy-muted);
	font-size: 0.9375rem;
	text-decoration: none;
}

.wlg-footer__list a:hover,
.wlg-footer__list a:focus-visible { color: var(--wlg-white); }

.wlg-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wlg-navy-line);
}

.wlg-footer__copyright { margin: 0; font-size: 0.8125rem; }

.wlg-footer__legal {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.wlg-footer__legal a { color: inherit; text-decoration: none; }
.wlg-footer__legal a:hover { color: var(--wlg-white); }

/* ==========================================================================
   14. MOTION
   ========================================================================== */

/*
 * The brief asks for subtle entrance animation and, in the same breath, that
 * the design look excellent with animation disabled. Both are satisfied by
 * making the animated state the DEFAULT and the reveal an enhancement: nothing
 * here starts at opacity 0 unless JavaScript has run and reduced motion is not
 * requested. A page whose script fails is a page that renders, not a blank one.
 */
@media (prefers-reduced-motion: no-preference) {
	.js .wlg-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

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

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

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

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
	.wlg-ventures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wlg-build__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
}

/*
 * The nav collapses at 900px rather than at a round 768: five uppercase,
 * letter-spaced items plus a button need more room than lowercase links do,
 * and they begin colliding with the wordmark well before tablet width.
 */
@media (max-width: 900px) {
	.wlg-nav { display: none; }
	.wlg-menu-toggle { display: inline-flex; }

	.wlg-hero__inner,
	.wlg-intro__inner,
	.wlg-future__inner,
	.wlg-contact__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.wlg-hero__art { order: -1; }
	.wlg-hero-art { max-width: 20rem; }

	.wlg-intro__body {
		padding-left: 0;
		padding-top: 1.5rem;
		border-left: 0;
		border-top: 1px solid var(--wlg-rule);
	}

	.wlg-venture--detail,
	.wlg-capability {
		grid-template-columns: minmax(0, 1fr);
	}

	.wlg-venture--detail .wlg-venture__canvas,
	.wlg-venture--detail:nth-child(even) .wlg-venture__canvas {
		order: 0;
		min-height: 0;
		aspect-ratio: 16 / 9;
		border-right: 0;
		border-left: 0;
		border-bottom: 1px solid var(--wlg-rule);
	}

	.wlg-venture--detail.wlg-venture--dark .wlg-venture__canvas,
	.wlg-venture--detail:nth-child(even).wlg-venture--dark .wlg-venture__canvas {
		border-bottom-color: var(--wlg-navy-line);
	}

	.wlg-capability__mark { align-items: center; }

	.wlg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wlg-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	.wlg-ventures__grid,
	.wlg-build__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wlg-build__text { max-width: none; }

	/* The header CTA duplicates the drawer's own button at this width. */
	.wlg-masthead__cta { display: none; }

	.wlg-wordmark { gap: 0.6rem; }
	.wlg-wordmark__mark { height: 38px; }
	.wlg-wordmark__name { font-size: 1.3rem; }
	.wlg-wordmark__sub { font-size: 0.6rem; letter-spacing: 0.34em; }

	.wlg-ctaband__inner { flex-direction: column; align-items: flex-start; }

	.wlg-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   16. PRINT
   ========================================================================== */

@media print {
	.wlg-masthead,
	.wlg-drawer,
	.wlg-skip-link,
	.wlg-hero__art,
	.wlg-purpose__art,
	.wlg-future__art,
	.wlg-ctaband { display: none; }

	body { background: #fff; color: #000; }
	.wlg-hero, .wlg-pagehero, .wlg-purpose, .wlg-future, .wlg-footer { background: #fff; color: #000; }
	.wlg-hero__heading, .wlg-pagehero__heading, .wlg-purpose__heading, .wlg-future__heading { color: #000; }
}