/* Enthusiast Companies — main.css
* Site Rev 26.08 / Public · v4.1
* Generated from /home/claude/site/index_v24.html
*/
:root {
--ink: #0a1828;
--ink-2: #122538;
--ink-3: #1a3148;
--paper: #f4ebd9;
--paper-2: #ece1c8;
--copper: #c9744f;
--copper-2: #a55a3a;
--copper-3: #d99069;
--rule-ink: rgba(217, 144, 105, 0.20);
--rule-pap: rgba(28, 42, 58, 0.18);
--text-ink: #e6dcc6;
--text-pap: #1c2a3a;
--muted-ink: rgba(230, 220, 198, 0.55);
--muted-pap: rgba(28, 42, 58, 0.62);
--display: 'Fraunces', Georgia, serif;
--body: 'Geist', system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--body);
background: var(--ink);
color: var(--text-ink);
font-size: 17px;
line-height: 1.6;
font-feature-settings: "ss01", "cv11";
overflow-x: hidden;
}
/* Atmospheric grain overlay */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 1000;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Typography */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
h2 { font-variation-settings: "opsz" 96, "SOFT" 20, "WONK" 0; }
h3 { font-variation-settings: "opsz" 36, "SOFT" 30; font-weight: 500; }
.eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-3);
font-weight: 500;
display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--copper); display: inline-block; }
.lede { font-size: 1.25rem; line-height: 1.55; color: var(--text-ink); }
.section-paper .lede { color: var(--text-pap); }
/* Layout */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 720px) { .container { padding: 0 20px; } }
section { padding: 120px 0; position: relative; }
@media (max-width: 720px) { section { padding: 80px 0; } }
.section-paper { background: var(--paper); color: var(--text-pap); }
.section-paper-deep { background: var(--paper-2); color: var(--text-pap); }
/* ---------------- NAV ---------------- */
nav.top {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
padding: 18px 32px;
display: flex; justify-content: space-between; align-items: center;
background: rgba(10, 24, 40, 0.7);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--rule-ink);
transition: background 0.3s;
}
nav.top .mark {
font-family: var(--display);
font-size: 18px;
font-variation-settings: "opsz" 24, "SOFT" 30;
letter-spacing: -0.01em;
color: var(--text-ink);
text-decoration: none;
}
nav.top .mark span { color: var(--copper-3); }
nav.top ul {
list-style: none;
display: flex; gap: 28px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
nav.top a {
color: var(--text-ink);
text-decoration: none;
opacity: 0.75;
transition: opacity 0.2s, color 0.2s;
}
nav.top a:hover { opacity: 1; color: var(--copper-3); }
@media (max-width: 800px) { nav.top ul { display: none; } }
/* ---------------- HERO ---------------- */
.hero {
min-height: 100vh;
padding-top: 140px;
padding-bottom: 80px;
display: flex; align-items: center;
position: relative;
overflow: hidden;
}
.hero-grid-bg {
position: absolute; inset: 0;
background-image:
linear-gradient(var(--rule-ink) 1px, transparent 1px),
linear-gradient(90deg, var(--rule-ink) 1px, transparent 1px);
background-size: 80px 80px;
background-position: -1px -1px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 70%);
opacity: 0.5;
}
.hero-axis {
position: absolute;
font-family: var(--mono);
font-size: 10px;
color: var(--muted-ink);
letter-spacing: 0.1em;
}
.hero-axis.tl { top: 100px; left: 32px; }
.hero-axis.tr { top: 100px; right: 32px; text-align: right; }
.hero-axis.bl { bottom: 30px; left: 32px; }
.hero-axis.br { bottom: 30px; right: 32px; text-align: right; }
@media (max-width: 720px) {
.hero-axis { display: none; }
}
.hero-content {
position: relative;
width: 100%;
}
.hero h1 {
font-size: clamp(56px, 11vw, 168px);
letter-spacing: -0.045em;
margin: 24px 0 32px;
}
.hero h1 .accent {
font-style: italic;
color: var(--copper-3);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.hero-sub {
max-width: 720px;
font-size: clamp(18px, 1.6vw, 22px);
color: var(--text-ink);
opacity: 0.85;
line-height: 1.5;
margin-bottom: 56px;
}
.hero-meta {
display: flex;
gap: 56px;
flex-wrap: wrap;
border-top: 1px solid var(--rule-ink);
padding-top: 28px;
}
.hero-meta-item .label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted-ink);
margin-bottom: 6px;
}
.hero-meta-item .value {
font-family: var(--display);
font-size: 22px;
font-variation-settings: "opsz" 36, "SOFT" 50;
}
.hero-meta-item .value span { color: var(--copper-3); }
/* ---------------- THESIS BAND ---------------- */
.thesis {
background: var(--ink-2);
padding: 80px 0;
border-top: 1px solid var(--rule-ink);
border-bottom: 1px solid var(--rule-ink);
}
.thesis-quote {
font-family: var(--display);
font-size: clamp(28px, 3.6vw, 52px);
font-variation-settings: "opsz" 72, "SOFT" 30;
line-height: 1.15;
letter-spacing: -0.025em;
max-width: 1100px;
}
.thesis-quote .accent { color: var(--copper-3); font-style: italic; }
.thesis-attrib {
margin-top: 32px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-ink);
}
/* ---------------- ABOUT / STRUCTURE ---------------- */
.structure-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
@media (max-width: 900px) { .structure-grid { grid-template-columns: 1fr; gap: 48px; } }
.section-paper h2 { color: var(--text-pap); }
.about-text p {
margin-bottom: 1.2em;
color: var(--text-pap);
font-size: 1.05rem;
line-height: 1.7;
}
.about-text p:first-of-type {
font-size: 1.2rem;
font-family: var(--display);
font-weight: 400;
font-variation-settings: "opsz" 36, "SOFT" 40;
line-height: 1.4;
color: var(--text-pap);
}
/* Entity diagram */
.entity-stack {
border: 1px solid var(--rule-pap);
background: rgba(255,255,255,0.4);
padding: 32px;
position: relative;
}
.entity-stack::before {
content: "Corporate Structure";
position: absolute; top: -10px; left: 24px;
background: var(--paper);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-pap);
}
.entity-parent {
text-align: center;
padding: 20px;
border: 1.5px solid var(--text-pap);
margin-bottom: 32px;
position: relative;
}
.entity-parent .name { font-family: var(--display); font-size: 24px; font-variation-settings: "opsz" 36, "SOFT" 50; }
.entity-parent .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-pap); margin-top: 4px; }
.entity-parent::after {
content: "";
position: absolute;
bottom: -32px; left: 50%;
width: 1px; height: 32px;
background: var(--rule-pap);
}
.entity-children {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
position: relative;
}
.entity-children::before {
content: "";
position: absolute;
top: 0; left: 16.66%; right: 16.66%;
height: 1px;
background: var(--rule-pap);
}
.entity-child {
padding: 16px 12px;
border: 1px solid var(--rule-pap);
text-align: center;
position: relative;
background: var(--paper);
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.entity-child:hover {
transform: translateY(-2px);
border-color: var(--copper-2);
background: rgba(201, 116, 79, 0.10);
box-shadow: 0 4px 14px rgba(28, 42, 58, 0.10);
}
.entity-child::before {
content: "";
position: absolute;
top: -16px; left: 50%;
width: 1px; height: 16px;
background: var(--rule-pap);
}
.entity-child .name {
font-family: var(--display);
font-size: 15px;
font-variation-settings: "opsz" 14, "SOFT" 50;
line-height: 1.2;
margin-bottom: 6px;
}
.entity-child .status {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.entity-child.active { border-color: var(--copper); background: rgba(201, 116, 79, 0.06); }
.entity-child.active .status { color: var(--copper-2); }
.entity-child.exploratory { border-color: var(--text-pap); }
.entity-child.exploratory .status { color: var(--muted-pap); }
.entity-child.dormant { opacity: 0.55; }
.entity-child.dormant .status { color: var(--muted-pap); }
/* ---------------- DIVISIONS ---------------- */
.divisions {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
margin-top: 64px;
}
@media (max-width: 900px) { .divisions { grid-template-columns: 1fr; } }
.division-card {
background: var(--ink-2);
border: 1px solid var(--rule-ink);
padding: 48px;
position: relative;
overflow: hidden;
transition: border-color 0.3s, transform 0.3s;
}
.division-card:hover {
border-color: var(--copper);
}
.division-card.primary {
background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%);
border-color: var(--copper);
}
.division-card.primary::before {
content: "ACTIVE";
position: absolute; top: 24px; right: 32px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
color: var(--copper-3);
background: rgba(201, 116, 79, 0.12);
padding: 4px 10px;
border: 1px solid var(--copper);
}
.division-card.future::before {
content: "EXPLORATORY";
position: absolute; top: 24px; right: 32px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
color: var(--muted-ink);
background: rgba(230, 220, 198, 0.05);
padding: 4px 10px;
border: 1px solid var(--rule-ink);
}
.division-id {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--muted-ink);
margin-bottom: 16px;
}
.division-name {
font-size: clamp(28px, 3vw, 44px);
margin-bottom: 8px;
}
.division-tagline {
font-family: var(--display);
font-style: italic;
font-size: 1.1rem;
font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 1;
color: var(--copper-3);
margin-bottom: 24px;
}
.division-card p {
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1.2em;
color: rgba(230, 220, 198, 0.85);
}
/* ---------------- DIVISION TAM HEADLINE ---------------- */
/* Consistent prominent TAM across all three division cards. Sits above
the .division-stats block. Same treatment, same scale, same rhythm. */
.tam-headline {
margin-top: 32px;
padding: 18px 0 16px;
border-top: 1px solid var(--rule-ink);
border-bottom: 1px solid var(--rule-ink);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.tam-headline .tam-number {
font-family: var(--display);
font-size: 42px;
font-variation-settings: "opsz" 60, "SOFT" 30;
color: var(--copper-3);
line-height: 1;
letter-spacing: -0.01em;
}
.tam-headline .tam-number .tam-suffix {
font-size: 20px;
opacity: 0.75;
margin-left: 4px;
font-variation-settings: "opsz" 36, "SOFT" 40;
}
.tam-headline .tam-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-ink);
text-align: right;
line-height: 1.4;
}
/* When .tam-headline precedes .division-stats, drop the stats' top border
so the visual treatment doesn't double-rule */
.tam-headline + .division-stats {
margin-top: 18px;
padding-top: 0;
border-top: none;
}
/* SAM is the same scale and treatment as TAM but visually subordinate —
sits directly below TAM with a tighter top margin and no top rule, so
the two headlines read as a paired stripe rather than two separate ones. */
.sam-headline {
margin-top: -1px; /* collapse with TAM bottom border */
padding: 16px 0 14px;
border-bottom: 1px solid var(--rule-ink);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.sam-headline .tam-number {
font-family: var(--display);
font-size: 36px;
font-variation-settings: "opsz" 60, "SOFT" 30;
color: var(--copper-3);
opacity: 0.88;
line-height: 1;
letter-spacing: -0.01em;
}
.sam-headline .tam-number .tam-suffix {
font-size: 18px;
opacity: 0.75;
margin-left: 4px;
font-variation-settings: "opsz" 36, "SOFT" 40;
}
.sam-headline .tam-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-ink);
text-align: right;
line-height: 1.4;
}
.sam-headline .sam-prefix {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-3);
opacity: 0.7;
margin-right: 10px;
align-self: center;
}
.sam-headline + .division-stats {
margin-top: 18px;
padding-top: 0;
border-top: none;
}
/* Per-card data attribution line — small, mono, last-updated stamp.
Sits below the stat block, above the external link. Same on every card. */
.card-data-attribution {
margin-top: 18px;
padding-top: 12px;
border-top: 1px solid rgba(217, 144, 105, 0.10);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-ink);
opacity: 0.7;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.card-data-attribution .data-stamp {
color: var(--copper-3);
opacity: 0.85;
}
.division-stats {
display: flex; gap: 32px; flex-wrap: wrap;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--rule-ink);
}
.division-stat .number {
font-family: var(--display);
font-size: 32px;
font-variation-settings: "opsz" 48, "SOFT" 30;
color: var(--copper-3);
line-height: 1;
}
.division-stat .number .small { font-size: 18px; opacity: 0.7; }
.division-stat .label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-ink);
margin-top: 6px;
}
/* ---------------- PRODUCTS MARKETS TABLE ---------------- */
/* Renders inside the Products division card. Sized to feel proportional
to the .division-stats blocks on the Power and Hydrogen cards. */
.markets-table {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--rule-ink);
}
.markets-table-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 14px;
display: inline-flex; align-items: center; gap: 10px;
}
.markets-table-label::before {
content: ""; width: 16px; height: 1px;
background: var(--copper); display: inline-block;
}
.markets-row {
display: grid;
grid-template-columns: 1.4fr 0.7fr 1fr;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--rule-ink);
align-items: baseline;
}
.markets-row:last-child { border-bottom: none; padding-bottom: 0; }
.markets-row.head {
padding: 0 0 8px;
border-bottom: 1px solid var(--rule-ink);
}
.markets-row.head span {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-ink);
}
.market-name {
font-family: var(--display);
font-size: 0.92rem;
font-variation-settings: "opsz" 24, "SOFT" 40;
color: var(--text-ink);
line-height: 1.25;
}
.market-now {
font-family: var(--mono);
font-size: 13px;
color: var(--copper-3);
letter-spacing: 0.04em;
}
.market-horizon {
font-family: var(--mono);
font-size: 11px;
color: var(--muted-ink);
letter-spacing: 0.04em;
line-height: 1.35;
}
.markets-source {
margin-top: 14px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.10em;
color: var(--muted-ink);
font-style: italic;
opacity: 0.75;
}
/* ---------------- TECHNOLOGY ---------------- */
.tech-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: end;
margin-bottom: 80px;
}
@media (max-width: 900px) { .tech-header { grid-template-columns: 1fr; gap: 32px; } }
.tech-name {
font-family: var(--display);
font-size: clamp(36px, 5vw, 72px);
letter-spacing: -0.03em;
line-height: 1;
}
.tech-name .em { font-style: italic; color: var(--copper); }
.tech-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--rule-pap);
border-bottom: 1px solid var(--rule-pap);
}
@media (max-width: 800px) { .tech-pillars { grid-template-columns: 1fr; } }
.tech-pillar {
padding: 48px 32px;
border-right: 1px solid var(--rule-pap);
position: relative;
}
.tech-pillar:last-child { border-right: none; }
@media (max-width: 800px) {
.tech-pillar { border-right: none; border-bottom: 1px solid var(--rule-pap); }
.tech-pillar:last-child { border-bottom: none; }
}
.tech-pillar-num {
font-family: var(--mono);
font-size: 11px;
color: var(--copper-2);
letter-spacing: 0.16em;
margin-bottom: 16px;
}
.tech-pillar h3 {
font-size: 28px;
margin-bottom: 12px;
color: var(--text-pap);
}
.tech-pillar .tag {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-2);
margin-bottom: 16px;
display: inline-block;
}
.tech-pillar p {
color: var(--text-pap);
font-size: 0.95rem;
line-height: 1.65;
}
/* Disc visualization */
.disc-vis {
width: 100%;
max-width: 480px;
aspect-ratio: 1;
position: relative;
margin: 0 auto;
}
.disc-vis svg { width: 100%; height: 100%; }
/* Tech triptych — three-column layout: injector | rotor | assembled unit.
On desktop, flanks are smaller technical-illustration SVGs; on narrow
viewports they stack and finally hide on the smallest. */
.tech-triptych {
display: grid;
grid-template-columns: 1fr 1.6fr 1fr;
align-items: center;
gap: 32px;
}
.tech-flank {
width: 100%;
max-width: 240px;
aspect-ratio: 240 / 320;
margin: 0 auto;
opacity: 0.85;
}
.tech-flank svg {
width: 100%;
height: 100%;
display: block;
}
@media (max-width: 1100px) {
.tech-triptych { grid-template-columns: 1fr 1.4fr 1fr; gap: 20px; }
.tech-flank { max-width: 200px; }
}
@media (max-width: 800px) {
.tech-triptych { grid-template-columns: 1fr; gap: 24px; }
.tech-flank { max-width: 280px; }
.tech-flank-left { order: 2; }
.disc-vis-wrap, .disc-vis { order: 1; }
.tech-flank-right { order: 3; }
}
/* ---------------- OPPORTUNITY ---------------- */
.big-number {
font-family: var(--display);
font-size: clamp(120px, 18vw, 280px);
font-variation-settings: "opsz" 144, "SOFT" 0;
letter-spacing: -0.05em;
line-height: 0.85;
color: var(--copper-3);
margin-bottom: 24px;
}
.big-number sup {
font-size: 0.4em;
vertical-align: super;
color: var(--text-ink);
margin-left: 12px;
}
.opportunity-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 900px) { .opportunity-grid { grid-template-columns: 1fr; gap: 48px; } }
.forces {
display: grid;
gap: 24px;
margin-top: 48px;
}
.force {
padding: 24px 0;
border-top: 1px solid var(--rule-ink);
display: grid;
grid-template-columns: 60px 1fr;
gap: 24px;
align-items: start;
}
.force:last-child { border-bottom: 1px solid var(--rule-ink); }
.force-num {
font-family: var(--display);
font-size: 36px;
font-variation-settings: "opsz" 48;
color: var(--copper-3);
line-height: 1;
}
.force h4 {
font-size: 20px;
margin-bottom: 8px;
font-variation-settings: "opsz" 24, "SOFT" 40;
}
.force p {
font-size: 0.95rem;
color: var(--muted-ink);
line-height: 1.6;
}
/* ---------------- LEADERSHIP ---------------- */
.leader-grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 64px;
align-items: start;
}
@media (max-width: 900px) { .leader-grid { grid-template-columns: 1fr; gap: 40px; } }
/* Left-column wrapper — stacks portrait + location aside */
.leader-left {
display: flex;
flex-direction: column;
gap: 32px;
}
/* Founder aside — location card under the portrait, matches figure-box pattern */
.founder-aside {
position: relative;
padding: 0;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(28, 42, 58, 0.32);
}
.founder-aside-plate {
position: absolute; top: -10px; left: 24px;
background: var(--paper-2);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-pap);
}
.founder-aside-inner {
padding: 36px 32px 32px;
}
.loc-name {
font-family: var(--display);
font-size: 36px;
font-style: italic;
color: var(--text-pap);
line-height: 1;
font-variation-settings: "opsz" 60, "SOFT" 30, "WONK" 1;
margin-bottom: 4px;
}
.loc-state {
font-family: var(--display);
font-size: 22px;
color: var(--copper-2);
font-style: italic;
line-height: 1;
margin-bottom: 14px;
font-variation-settings: "opsz" 36, "SOFT" 40, "WONK" 1;
}
.loc-meta {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-pap);
line-height: 1.5;
}
.leader-portrait {
background: var(--ink-2);
aspect-ratio: 4/5;
width: 100%;
position: relative;
border: 1px solid var(--rule-ink);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.leader-portrait::before {
content: "BEP / 1977 –";
position: absolute; top: 16px; left: 16px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--text-pap);
opacity: 0.85;
}
.leader-portrait::after {
content: "FOUNDER / CEO / INVENTOR";
position: absolute; bottom: 16px; left: 16px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--copper-3);
}
.leader-portrait .initial {
font-family: var(--display);
font-size: 240px;
font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
color: var(--copper);
font-style: italic;
line-height: 1;
opacity: 0.85;
}
.leader-portrait-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Push the corner monogram labels above the photo */
.leader-portrait::before,
.leader-portrait::after {
z-index: 2;
text-shadow: 0 1px 6px rgba(10, 24, 40, 0.65);
}
/* Soft vignette gradient so the corner labels stay legible over any photo */
.leader-portrait .leader-portrait-img + .leader-portrait-vignette,
.leader-portrait::after { /* anchor for stacking */ }
.leader-name {
font-size: clamp(40px, 5vw, 64px);
margin-bottom: 8px;
}
.leader-title {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 32px;
}
.leader-bio {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-ink);
opacity: 0.9;
margin-bottom: 24px;
}
.leader-bio:first-of-type {
font-family: var(--display);
font-size: 1.3rem;
font-variation-settings: "opsz" 36, "SOFT" 40;
line-height: 1.45;
opacity: 1;
}
.heritage {
margin-top: 32px;
padding: 24px;
border-left: 2px solid var(--copper);
background: rgba(201, 116, 79, 0.06);
font-family: var(--display);
font-size: 1rem;
font-style: italic;
font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 1;
line-height: 1.5;
color: var(--text-ink);
}
.career {
margin-top: 64px;
}
.career-arc {
display: grid;
gap: 0;
border-top: 1px solid var(--rule-ink);
}
.career-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid var(--rule-ink);
}
@media (max-width: 720px) { .career-row { grid-template-columns: 1fr; gap: 8px; } }
.career-period {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--copper-3);
}
.career-role {
font-family: var(--display);
font-size: 1.05rem;
font-variation-settings: "opsz" 24, "SOFT" 40;
margin-bottom: 4px;
}
.career-detail {
font-size: 0.9rem;
color: var(--muted-ink);
line-height: 1.55;
}
/* ---------------- NEWS ---------------- */
.news-list { margin-top: 48px; }
.news-item {
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 32px;
padding: 24px 0;
border-top: 1px solid var(--rule-pap);
align-items: baseline;
transition: padding-left 0.3s;
}
.news-item:hover { padding-left: 16px; }
.news-item:last-child { border-bottom: 1px solid var(--rule-pap); }
@media (max-width: 720px) {
.news-item { grid-template-columns: 1fr; gap: 6px; }
}
.news-date {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-pap);
}
.news-title {
font-family: var(--display);
font-size: 1.15rem;
font-variation-settings: "opsz" 24, "SOFT" 40;
color: var(--text-pap);
line-height: 1.35;
}
.news-tag {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid var(--rule-pap);
color: var(--muted-pap);
white-space: nowrap;
}
.news-tag.epc { border-color: var(--copper); color: var(--copper-2); }
.news-tag.h2 { border-color: var(--text-pap); color: var(--text-pap); }
/* ---------------- CONTACT FORM ---------------- */
.contact-section {
background: var(--paper-2);
position: relative;
}
.contact-grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 80px;
align-items: start;
margin-top: 56px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
.contact-intro p {
color: var(--text-pap);
font-size: 1.05rem;
line-height: 1.65;
margin-bottom: 1.2em;
}
.contact-intro p:first-of-type {
font-family: var(--display);
font-size: 1.3rem;
font-variation-settings: "opsz" 36, "SOFT" 40;
line-height: 1.4;
}
.contact-intro .direct {
margin-top: 32px;
padding: 24px;
border-left: 2px solid var(--copper);
background: rgba(201, 116, 79, 0.06);
}
.contact-intro .direct .label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-2);
margin-bottom: 8px;
}
.contact-intro .direct a {
font-family: var(--display);
font-size: 1.15rem;
font-variation-settings: "opsz" 24, "SOFT" 40;
color: var(--text-pap);
text-decoration: none;
border-bottom: 1px solid var(--copper);
padding-bottom: 2px;
transition: color 0.2s;
}
.contact-intro .direct a:hover { color: var(--copper-2); }
.contact-form {
background: var(--paper);
border: 1px solid var(--rule-pap);
padding: 40px;
position: relative;
}
.contact-form::before {
content: "INQUIRY";
position: absolute; top: -10px; left: 24px;
background: var(--paper-2);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--muted-pap);
}
.cf-row { margin-bottom: 20px; }
.cf-row.two {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 600px) { .cf-row.two { grid-template-columns: 1fr; } }
.cf-row label {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-pap);
margin-bottom: 8px;
}
.cf-row label .req { color: var(--copper-2); }
.cf-row input,
.cf-row select,
.cf-row textarea {
width: 100%;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--rule-pap);
color: var(--text-pap);
font-family: var(--body);
font-size: 14px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.cf-row input:focus,
.cf-row select:focus,
.cf-row textarea:focus {
border-color: var(--copper);
background: rgba(255, 255, 255, 0.9);
}
.cf-row textarea {
resize: vertical;
min-height: 130px;
font-family: var(--body);
line-height: 1.5;
}
.cf-row select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.cf-honeypot {
position: absolute;
left: -10000px;
top: -10000px;
height: 0;
width: 0;
overflow: hidden;
}
.cf-submit {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
background: var(--copper);
color: var(--ink);
border: none;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.cf-submit:hover { background: var(--copper-3); }
.cf-submit:disabled { opacity: 0.5; cursor: wait; }
.cf-status {
margin-top: 16px;
padding: 12px 16px;
border-left: 2px solid transparent;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
display: none;
}
.cf-status.show { display: block; }
.cf-status.ok { border-color: #4a8c5e; color: #2e6840; background: rgba(74, 140, 94, 0.08); }
.cf-status.err { border-color: #c0392b; color: #8e2a1f; background: rgba(192, 57, 43, 0.08); }
/* ---------------- DATA ROOM ---------------- */
.dataroom {
background: var(--ink);
border-top: 1px solid var(--rule-ink);
position: relative;
overflow: hidden;
}
.dataroom::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(var(--rule-ink) 1px, transparent 1px),
linear-gradient(90deg, var(--rule-ink) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.4;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, #000 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, #000 80%);
}
.dataroom-inner { position: relative; }
.dataroom-header {
text-align: center;
margin-bottom: 56px;
}
.dataroom h2 {
font-size: clamp(44px, 6vw, 88px);
margin: 16px 0 24px;
}
.dataroom h2 .lock-em { color: var(--copper-3); font-style: italic; }
.dataroom-sub {
max-width: 640px;
margin: 0 auto;
color: var(--muted-ink);
font-size: 1.05rem;
line-height: 1.6;
}
/* Lock gate */
.lock-gate {
max-width: 480px;
margin: 0 auto;
background: var(--ink-2);
border: 1px solid var(--copper);
padding: 48px 40px;
position: relative;
}
.lock-gate::before {
content: "AUTHORIZED ACCESS / DR-GATE-01";
position: absolute; top: -10px; left: 24px;
background: var(--ink);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--copper-3);
}
.lock-icon {
width: 56px; height: 56px;
margin: 0 auto 24px;
display: block;
}
.lock-gate p {
text-align: center;
font-size: 0.95rem;
color: var(--muted-ink);
margin-bottom: 24px;
line-height: 1.55;
}
.lock-form {
display: grid;
gap: 12px;
}
.lock-form input {
width: 100%;
padding: 14px 16px;
background: var(--ink);
border: 1px solid var(--rule-ink);
color: var(--text-ink);
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.08em;
outline: none;
transition: border-color 0.2s;
}
.lock-form input:focus { border-color: var(--copper); }
.lock-form button {
padding: 14px 16px;
background: var(--copper);
color: var(--ink);
border: none;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.lock-form button:hover { background: var(--copper-3); }
.lock-error {
text-align: center;
font-family: var(--mono);
font-size: 11px;
color: #e57373;
margin-top: 12px;
letter-spacing: 0.08em;
min-height: 16px;
}
.lock-request {
margin-top: 32px;
text-align: center;
font-size: 0.9rem;
color: var(--muted-ink);
}
.lock-request a {
color: var(--copper-3);
text-decoration: none;
border-bottom: 1px solid var(--copper);
}
.lock-request a:hover { color: var(--copper); }
/* Data room contents (revealed) */
#dataroom-contents { display: none; }
#dataroom-contents.unlocked { display: block; animation: unlockReveal 0.6s ease-out; }
@keyframes unlockReveal {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.dr-status {
text-align: center;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 48px;
}
.dr-status::before { content: "● "; color: #7ed957; }
.dr-folders {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 48px;
}
.dr-folder {
background: var(--ink-2);
border: 1px solid var(--rule-ink);
padding: 24px;
transition: border-color 0.2s;
position: relative;
}
.dr-folder:hover { border-color: var(--copper); }
.dr-folder-id {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--copper-3);
margin-bottom: 12px;
}
.dr-folder-name {
font-family: var(--display);
font-size: 18px;
font-variation-settings: "opsz" 24, "SOFT" 40;
margin-bottom: 8px;
line-height: 1.2;
}
.dr-folder-desc {
font-size: 0.85rem;
line-height: 1.55;
color: var(--muted-ink);
}
.dr-folder-meta {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--rule-ink);
display: flex; justify-content: space-between;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-ink);
}
.dr-actions {
display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
padding-top: 32px;
border-top: 1px solid var(--rule-ink);
}
.dr-action {
padding: 12px 24px;
background: transparent;
color: var(--copper-3);
border: 1px solid var(--copper);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.dr-action:hover { background: var(--copper); color: var(--ink); }
.dr-action.primary { background: var(--copper); color: var(--ink); }
.dr-action.primary:hover { background: var(--copper-3); }
/* ---------------- CONTACT / FOOTER ---------------- */
footer {
background: var(--ink);
padding: 80px 0 40px;
border-top: 1px solid var(--rule-ink);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 64px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-mark {
font-family: var(--display);
font-size: 28px;
font-variation-settings: "opsz" 48, "SOFT" 30;
margin-bottom: 12px;
}
.footer-mark span { color: var(--copper-3); }
.footer-tag {
font-size: 0.9rem;
color: var(--muted-ink);
line-height: 1.55;
max-width: 380px;
}
.footer-logo-link {
display: block;
margin-bottom: 16px;
width: min(240px, 70%);
}
.footer-logo {
display: block;
width: 100%;
height: auto;
opacity: 0.95;
transition: opacity 0.2s ease;
}
.footer-logo-link:hover .footer-logo {
opacity: 1;
}
/* ---------------- OPPORTUNITY SECTION WATERMARK ---------------- */
/* Well pad deployment sketch: wellhead → MK6 skid → grid transmission */
#opportunity {
position: relative;
overflow: hidden;
}
#opportunity::before {
content: "";
position: absolute;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280' preserveAspectRatio='xMidYMid meet'%3E %3C!-- Ground line --%3E %3Cline x1='20' y1='240' x2='340' y2='240' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='40' y1='244' x2='50' y2='252'/%3E %3Cline x1='80' y1='244' x2='90' y2='252'/%3E %3Cline x1='120' y1='244' x2='130' y2='252'/%3E %3Cline x1='160' y1='244' x2='170' y2='252'/%3E %3Cline x1='200' y1='244' x2='210' y2='252'/%3E %3Cline x1='240' y1='244' x2='250' y2='252'/%3E %3Cline x1='280' y1='244' x2='290' y2='252'/%3E %3Cline x1='320' y1='244' x2='330' y2='252'/%3E %3C/g%3E %3C!-- WELLHEAD --%3E %3Cline x1='80' y1='240' x2='80' y2='120' stroke='%23c9744f' stroke-width='1.2'/%3E %3Crect x='74' y='195' width='12' height='20' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Crect x='71' y='158' width='18' height='14' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Crect x='69' y='142' width='22' height='12' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='55' y1='148' x2='69' y2='148' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='91' y1='148' x2='105' y2='148' stroke='%23c9744f' stroke-width='0.9'/%3E %3Ccircle cx='52' cy='148' r='3' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3Ccircle cx='108' cy='148' r='3' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3Crect x='73' y='125' width='14' height='14' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='80' y1='125' x2='80' y2='115' stroke='%23c9744f' stroke-width='0.9'/%3E %3Ccircle cx='80' cy='113' r='4' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='76' y1='113' x2='84' y2='113' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='80' y1='240' x2='80' y2='265' stroke='%23c9744f' stroke-width='0.7' stroke-dasharray='2,2'/%3E %3C!-- GAS LINE (no CH4 label) --%3E %3Cline x1='105' y1='148' x2='200' y2='148' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='200' y1='148' x2='200' y2='200' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='200' y1='200' x2='220' y2='200' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cpolygon points='148,145 154,148 148,151' fill='%23c9744f'/%3E %3C!-- SKID (with MDRG badge — small enough to read as a mark, not as text) --%3E %3Crect x='216' y='232' width='116' height='8' fill='none' stroke='%23c9744f' stroke-width='1'/%3E %3Crect x='220' y='178' width='108' height='54' fill='none' stroke='%23c9744f' stroke-width='1.1'/%3E %3Cline x1='220' y1='178' x2='216' y2='174' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='328' y1='178' x2='332' y2='174' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='216' y1='174' x2='332' y2='174' stroke='%23c9744f' stroke-width='0.7'/%3E %3Crect x='240' y='195' width='24' height='32' fill='none' stroke='%23c9744f' stroke-width='0.6'/%3E %3Ccircle cx='259' cy='211' r='0.8' fill='%23c9744f'/%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='280' y1='190' x2='320' y2='190'/%3E %3Cline x1='280' y1='195' x2='320' y2='195'/%3E %3Cline x1='280' y1='200' x2='320' y2='200'/%3E %3C/g%3E %3Crect x='296' y='160' width='10' height='18' fill='none' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cline x1='299' y1='160' x2='299' y2='152' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='303' y1='160' x2='303' y2='152' stroke='%23c9744f' stroke-width='0.6'/%3E %3C!-- ELECTRICAL OUTPUT LINE + transmission tower (no GRID/75kWe labels) --%3E %3Cline x1='332' y1='200' x2='345' y2='200' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='345' y1='200' x2='345' y2='138' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='345' y1='138' x2='338' y2='125' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='345' y1='138' x2='352' y2='125' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='345' y1='125' x2='338' y2='125' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='345' y1='125' x2='352' y2='125' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='338' y1='125' x2='338' y2='120' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='352' y1='125' x2='352' y2='120' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='335' y1='120' x2='355' y2='120' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='335' y1='115' x2='355' y2='115' stroke='%23c9744f' stroke-width='0.7'/%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: min(380px, 86vw);
aspect-ratio: 360 / 280;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
#opportunity > * {
position: relative;
z-index: 1;
}
/* ---------------- PROBLEM SECTION WATERMARK ---------------- */
/* Flaring well sketch placed in the left-column dead band below the intro paragraph. */
#problem {
position: relative;
overflow: hidden;
}
#problem::before {
content: "";
position: absolute;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 360' preserveAspectRatio='xMidYMid meet'%3E %3C!-- Ground line --%3E %3Cline x1='20' y1='320' x2='220' y2='320' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='35' y1='324' x2='45' y2='332'/%3E %3Cline x1='65' y1='324' x2='75' y2='332'/%3E %3Cline x1='95' y1='324' x2='105' y2='332'/%3E %3Cline x1='125' y1='324' x2='135' y2='332'/%3E %3Cline x1='155' y1='324' x2='165' y2='332'/%3E %3Cline x1='185' y1='324' x2='195' y2='332'/%3E %3C/g%3E %3C!-- ============= WELLHEAD (lower portion) ============= --%3E %3Cline x1='100' y1='320' x2='100' y2='245' stroke='%23c9744f' stroke-width='1.2'/%3E %3C!-- Casing --%3E %3Crect x='94' y='295' width='12' height='20' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Christmas tree stack (compressed) --%3E %3Crect x='91' y='270' width='18' height='14' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Crect x='89' y='254' width='22' height='12' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Wing valves --%3E %3Cline x1='75' y1='260' x2='89' y2='260' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='111' y1='260' x2='125' y2='260' stroke='%23c9744f' stroke-width='0.9'/%3E %3Ccircle cx='72' cy='260' r='3' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3Ccircle cx='128' cy='260' r='3' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3C!-- Subterranean dashed line --%3E %3Cline x1='100' y1='320' x2='100' y2='345' stroke='%23c9744f' stroke-width='0.7' stroke-dasharray='2,2'/%3E %3C!-- ============= GAS LINE TO FLARE STACK ============= --%3E %3C!-- Horizontal pipe from wellhead going right --%3E %3Cline x1='125' y1='260' x2='160' y2='260' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Vertical bend up to flare stack --%3E %3Cline x1='160' y1='260' x2='160' y2='220' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Direction arrow --%3E %3Cpolygon points='138,257 144,260 138,263' fill='%23c9744f'/%3E %3C!-- ============= FLARE STACK ============= --%3E %3C!-- Vertical stack going up tall --%3E %3Cline x1='156' y1='220' x2='156' y2='80' stroke='%23c9744f' stroke-width='1'/%3E %3Cline x1='164' y1='220' x2='164' y2='80' stroke='%23c9744f' stroke-width='1'/%3E %3C!-- Stack support struts (lattice/derrick style) --%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='145' y1='220' x2='156' y2='220'/%3E %3Cline x1='164' y1='220' x2='175' y2='220'/%3E %3Cline x1='148' y1='180' x2='156' y2='180'/%3E %3Cline x1='164' y1='180' x2='172' y2='180'/%3E %3Cline x1='150' y1='140' x2='156' y2='140'/%3E %3Cline x1='164' y1='140' x2='170' y2='140'/%3E %3Cline x1='152' y1='100' x2='156' y2='100'/%3E %3Cline x1='164' y1='100' x2='168' y2='100'/%3E %3C!-- Diagonal cross-braces --%3E %3Cline x1='148' y1='220' x2='156' y2='180'/%3E %3Cline x1='172' y1='220' x2='164' y2='180'/%3E %3Cline x1='150' y1='180' x2='156' y2='140'/%3E %3Cline x1='170' y1='180' x2='164' y2='140'/%3E %3Cline x1='152' y1='140' x2='156' y2='100'/%3E %3Cline x1='168' y1='140' x2='164' y2='100'/%3E %3C/g%3E %3C!-- Stack tip --%3E %3Cline x1='156' y1='80' x2='148' y2='74' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cline x1='164' y1='80' x2='172' y2='74' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cline x1='148' y1='74' x2='172' y2='74' stroke='%23c9744f' stroke-width='0.8'/%3E %3C!-- ============= FLAME ============= --%3E %3C!-- Stylized flame above stack tip --%3E %3Cpath d='M 152 74 Q 144 56, 152 38 Q 160 20, 156 8 Q 162 24, 168 38 Q 176 54, 168 74 Z' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Inner flame --%3E %3Cpath d='M 156 70 Q 152 60, 156 48 Q 160 36, 158 28 Q 162 38, 164 48 Q 166 60, 162 70 Z' fill='none' stroke='%23c9744f' stroke-width='0.6'/%3E %3C!-- ============= ESCAPING METHANE VAPOR ============= --%3E %3C!-- Wisps to indicate venting/leaking gas around the wellhead --%3E %3Cg stroke='%23c9744f' stroke-width='0.5' fill='none' stroke-dasharray='3,2'%3E %3Cpath d='M 60 250 Q 55 240, 58 230'/%3E %3Cpath d='M 50 240 Q 45 232, 48 222'/%3E %3Cpath d='M 65 235 Q 60 226, 63 216'/%3E %3Cpath d='M 175 245 Q 180 236, 178 226'/%3E %3Cpath d='M 185 240 Q 190 230, 188 220'/%3E %3C/g%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: min(200px, 30vw);
aspect-ratio: 240 / 360;
top: 78%;
left: 16%;
transform: translate(-50%, -50%);
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
#problem > * {
position: relative;
z-index: 1;
}
/* ---------------- TECHNOLOGY SECTION WATERMARK ---------------- */
/* Injector cross-section placed in the dead band between the three pillar
cards and the KEY DIFFERENTIATORS eyebrow. */
#technology {
position: relative;
overflow: hidden;
}
#technology::before {
content: "";
position: absolute;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='xMidYMid meet'%3E %3C!-- ============= INJECTOR CROSS-SECTION (plan view) ============= --%3E %3C!-- Outer shell rectangular envelope with rounded corners on the back side --%3E %3C!-- Back port (gas inlet) on the left - large diameter --%3E %3Cline x1='40' y1='60' x2='100' y2='60' stroke='%23c9744f' stroke-width='1.1'/%3E %3Cline x1='40' y1='140' x2='100' y2='140' stroke='%23c9744f' stroke-width='1.1'/%3E %3C!-- Inlet end cap --%3E %3Cline x1='40' y1='60' x2='40' y2='140' stroke='%23c9744f' stroke-width='1.1'/%3E %3C!-- Converging chamber walls (asymmetric — wall A and wall B per V1.7 spec) --%3E %3C!-- Top wall (Wall A — angled) --%3E %3Cpath d='M 100 60 Q 240 60, 360 80 Q 460 96, 540 100' fill='none' stroke='%23c9744f' stroke-width='1.1'/%3E %3C!-- Bottom wall (Wall B — angled, slightly different curve) --%3E %3Cpath d='M 100 140 Q 240 140, 360 122 Q 460 108, 540 100' fill='none' stroke='%23c9744f' stroke-width='1.1'/%3E %3C!-- Outer shell envelope (rectangular boundary) --%3E %3Crect x='40' y='40' width='500' height='120' fill='none' stroke='%23c9744f' stroke-width='0.8'/%3E %3C!-- Throat / exit slot at right --%3E %3Cline x1='540' y1='40' x2='560' y2='40' stroke='%23c9744f' stroke-width='1.1'/%3E %3Cline x1='540' y1='160' x2='560' y2='160' stroke='%23c9744f' stroke-width='1.1'/%3E %3Cline x1='560' y1='40' x2='560' y2='98' stroke='%23c9744f' stroke-width='1.1'/%3E %3Cline x1='560' y1='102' x2='560' y2='160' stroke='%23c9744f' stroke-width='1.1'/%3E %3C!-- The narrow exit slot itself --%3E %3Cline x1='556' y1='98' x2='566' y2='98' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='556' y1='102' x2='566' y2='102' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Internal flow guide fins (2 per channel at 1/3 + 2/3 positions) --%3E %3Cline x1='240' y1='68' x2='240' y2='92' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='380' y1='78' x2='380' y2='98' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='240' y1='108' x2='240' y2='132' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='380' y1='102' x2='380' y2='122' stroke='%23c9744f' stroke-width='0.7'/%3E %3C!-- Dimension/tap callouts --%3E %3C!-- Back port diameter dimension --%3E %3Cline x1='55' y1='60' x2='55' y2='140' stroke='%23c9744f' stroke-width='0.4' stroke-dasharray='1,1'/%3E %3Cline x1='50' y1='60' x2='60' y2='60' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='50' y1='140' x2='60' y2='140' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Picture-frame seal groove on rear face (small rectangle on back end) --%3E %3Crect x='46' y='68' width='4' height='64' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Throat dimension callout --%3E %3Cline x1='572' y1='98' x2='572' y2='102' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='568' y1='98' x2='576' y2='98' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='568' y1='102' x2='576' y2='102' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Mounting taps on top face (Z=31.75/63.5/95.25 per spec) --%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Ccircle cx='180' cy='50' r='2.5' fill='none'/%3E %3Ccircle cx='280' cy='50' r='2.5' fill='none'/%3E %3Ccircle cx='380' cy='50' r='2.5' fill='none'/%3E %3Cline x1='180' y1='40' x2='180' y2='33'/%3E %3Cline x1='280' y1='40' x2='280' y2='33'/%3E %3Cline x1='380' y1='40' x2='380' y2='33'/%3E %3C/g%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Ccircle cx='180' cy='150' r='2.5' fill='none'/%3E %3Ccircle cx='280' cy='150' r='2.5' fill='none'/%3E %3Ccircle cx='380' cy='150' r='2.5' fill='none'/%3E %3Cline x1='180' y1='160' x2='180' y2='167'/%3E %3Cline x1='280' y1='160' x2='280' y2='167'/%3E %3Cline x1='380' y1='160' x2='380' y2='167'/%3E %3C/g%3E %3C!-- Centerline --%3E %3Cline x1='20' y1='100' x2='580' y2='100' stroke='%23c9744f' stroke-width='0.3' stroke-dasharray='6,3,1,3'/%3E %3C!-- Gas flow direction arrow inside the chamber --%3E %3Cpolygon points='320,100 332,96 332,104' fill='%23c9744f'/%3E %3Cpolygon points='450,100 462,96 462,104' fill='%23c9744f'/%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: min(480px, 42vw);
aspect-ratio: 600 / 200;
top: 71%;
right: 4%;
opacity: 0.16;
pointer-events: none;
z-index: 0;
}
#technology > * {
position: relative;
z-index: 1;
}
/* ---------------- NETWORK SECTION WATERMARK ---------------- */
/* Drafting bench / CAD workstation — visual cue for the people-who-build
directory. Sits in the right-column dead space alongside the entry list. */
#network {
position: relative;
overflow: hidden;
}
#network::before {
content: "";
position: absolute;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 360' preserveAspectRatio='xMidYMid meet'%3E %3C!-- Ground line + hatching --%3E %3Cline x1='15' y1='340' x2='265' y2='340' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='30' y1='344' x2='40' y2='352'/%3E %3Cline x1='60' y1='344' x2='70' y2='352'/%3E %3Cline x1='90' y1='344' x2='100' y2='352'/%3E %3Cline x1='120' y1='344' x2='130' y2='352'/%3E %3Cline x1='150' y1='344' x2='160' y2='352'/%3E %3Cline x1='180' y1='344' x2='190' y2='352'/%3E %3Cline x1='210' y1='344' x2='220' y2='352'/%3E %3Cline x1='240' y1='344' x2='250' y2='352'/%3E %3C/g%3E %3C!-- ============================ DRAFTING BOARD ============================ --%3E %3C!-- Inclined drafting surface (parallelogram) --%3E %3Cpolygon points='40,180 240,140 240,220 40,260' fill='none' stroke='%23c9744f' stroke-width='1.1'/%3E %3C!-- Inner working area (lighter) --%3E %3Cpolygon points='52,188 228,153 228,210 52,250' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Drawing on the board (some lines as if a sketch in progress) --%3E %3Cg stroke='%23c9744f' stroke-width='0.45' opacity='0.9'%3E %3Cline x1='80' y1='200' x2='200' y2='178'/%3E %3Cline x1='80' y1='215' x2='200' y2='193'/%3E %3Cline x1='100' y1='178' x2='100' y2='225'/%3E %3Cline x1='160' y1='171' x2='160' y2='218'/%3E %3C!-- circle part feature on the drawing --%3E %3Cellipse cx='140' cy='200' rx='14' ry='5' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3C/g%3E %3C!-- T-square along left edge --%3E %3Cline x1='35' y1='180' x2='35' y2='265' stroke='%23c9744f' stroke-width='0.9'/%3E %3Crect x='28' y='178' width='14' height='6' fill='none' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='35' y1='220' x2='245' y2='181' stroke='%23c9744f' stroke-width='0.7' stroke-dasharray='3,2' opacity='0.6'/%3E %3C!-- Parallel ruler / scale at lower-right of board --%3E %3Cline x1='150' y1='240' x2='225' y2='225' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cline x1='152' y1='244' x2='227' y2='229' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cg stroke='%23c9744f' stroke-width='0.4'%3E %3Cline x1='160' y1='241' x2='160' y2='244'/%3E %3Cline x1='175' y1='238' x2='175' y2='241'/%3E %3Cline x1='190' y1='235' x2='190' y2='238'/%3E %3Cline x1='205' y1='232' x2='205' y2='235'/%3E %3Cline x1='220' y1='229' x2='220' y2='232'/%3E %3C/g%3E %3C!-- ============================ LEGS / EASEL ============================ --%3E %3C!-- Front-left leg --%3E %3Cline x1='62' y1='250' x2='62' y2='340' stroke='%23c9744f' stroke-width='1'/%3E %3C!-- Front-right leg --%3E %3Cline x1='225' y1='216' x2='225' y2='340' stroke='%23c9744f' stroke-width='1'/%3E %3C!-- Back-left leg (lighter, behind board) --%3E %3Cline x1='90' y1='245' x2='90' y2='340' stroke='%23c9744f' stroke-width='0.6'/%3E %3C!-- Cross-brace --%3E %3Cline x1='62' y1='305' x2='225' y2='280' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='62' y1='320' x2='225' y2='295' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Tilt support strut at the back --%3E %3Cline x1='240' y1='140' x2='240' y2='240' stroke='%23c9744f' stroke-width='0.7'/%3E %3C!-- ============================ LAMP ARM ============================ --%3E %3C!-- Pivot mount on the right side of board --%3E %3Ccircle cx='240' cy='150' r='2.5' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3C!-- Upper arm segment --%3E %3Cline x1='240' y1='150' x2='235' y2='95' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Elbow --%3E %3Ccircle cx='235' cy='95' r='2.5' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3C!-- Forward arm segment --%3E %3Cline x1='235' y1='95' x2='180' y2='75' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Lampshade (cone) --%3E %3Cpolygon points='180,75 175,55 155,52 165,80' fill='none' stroke='%23c9744f' stroke-width='0.8'/%3E %3C!-- Tiny light glow rays --%3E %3Cg stroke='%23c9744f' stroke-width='0.4' opacity='0.7'%3E %3Cline x1='160' y1='65' x2='150' y2='80'/%3E %3Cline x1='168' y1='62' x2='168' y2='50'/%3E %3Cline x1='148' y1='65' x2='138' y2='65'/%3E %3C/g%3E %3C!-- ============================ STOOL ============================ --%3E %3C!-- Seat --%3E %3Cellipse cx='115' cy='305' rx='22' ry='4.5' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cline x1='93' y1='305' x2='93' y2='309' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='137' y1='305' x2='137' y2='309' stroke='%23c9744f' stroke-width='0.6'/%3E %3C!-- Center post --%3E %3Cline x1='115' y1='309' x2='115' y2='332' stroke='%23c9744f' stroke-width='1'/%3E %3C!-- 4-leg base --%3E %3Cg stroke='%23c9744f' stroke-width='0.7'%3E %3Cline x1='115' y1='332' x2='95' y2='340'/%3E %3Cline x1='115' y1='332' x2='135' y2='340'/%3E %3Cline x1='115' y1='332' x2='108' y2='340'/%3E %3Cline x1='115' y1='332' x2='122' y2='340'/%3E %3C/g%3E %3C!-- ============================ ROLLED PLAN UNDER BOARD ============================ --%3E %3C!-- A tube/roll suggesting drawings off-board --%3E %3Crect x='45' y='322' width='38' height='5' fill='none' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='51' y1='322' x2='51' y2='327' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='60' y1='322' x2='60' y2='327' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='70' y1='322' x2='70' y2='327' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Pencil on the corner of board --%3E %3Cline x1='200' y1='150' x2='220' y2='146' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cpolygon points='200,150 196,150 200,153' fill='%23c9744f'/%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: min(380px, 32vw);
aspect-ratio: 280 / 360;
top: 18%;
right: 3%;
opacity: 0.14;
pointer-events: none;
z-index: 0;
}
#network > * {
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
#network::before { display: none; }
}
/* ---------------- CONTACT FORM SECTION WATERMARK ---------------- */
/* HQ building elevation — visual anchor for the "where to find us" tone of
the contact section. Large, low opacity, lower-left dead band. */
#contact-form {
position: relative;
overflow: hidden;
}
#contact-form::before {
content: "";
position: absolute;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 240' preserveAspectRatio='xMidYMid meet'%3E %3C!-- Ground line + hatching --%3E %3Cline x1='15' y1='210' x2='365' y2='210' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='30' y1='214' x2='40' y2='222'/%3E %3Cline x1='60' y1='214' x2='70' y2='222'/%3E %3Cline x1='90' y1='214' x2='100' y2='222'/%3E %3Cline x1='120' y1='214' x2='130' y2='222'/%3E %3Cline x1='150' y1='214' x2='160' y2='222'/%3E %3Cline x1='180' y1='214' x2='190' y2='222'/%3E %3Cline x1='210' y1='214' x2='220' y2='222'/%3E %3Cline x1='240' y1='214' x2='250' y2='222'/%3E %3Cline x1='270' y1='214' x2='280' y2='222'/%3E %3Cline x1='300' y1='214' x2='310' y2='222'/%3E %3Cline x1='330' y1='214' x2='340' y2='222'/%3E %3C/g%3E %3C!-- ============================ MAIN BUILDING (two-story rectangle) ============================ --%3E %3Crect x='100' y='65' width='190' height='145' fill='none' stroke='%23c9744f' stroke-width='1.1'/%3E %3C!-- Roof trim line --%3E %3Cline x1='95' y1='65' x2='295' y2='65' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='95' y1='62' x2='295' y2='62' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='95' y1='62' x2='95' y2='65' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='295' y1='62' x2='295' y2='65' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Floor divider line between stories --%3E %3Cline x1='100' y1='135' x2='290' y2='135' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='100' y1='138' x2='290' y2='138' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- ============================ UPPER STORY WINDOWS (3 across) ============================ --%3E %3Cg stroke='%23c9744f' stroke-width='0.7' fill='none'%3E %3Crect x='118' y='82' width='38' height='38'/%3E %3Crect x='176' y='82' width='38' height='38'/%3E %3Crect x='234' y='82' width='38' height='38'/%3E %3C/g%3E %3C!-- Window mullions (cross panes) --%3E %3Cg stroke='%23c9744f' stroke-width='0.4'%3E %3Cline x1='137' y1='82' x2='137' y2='120'/%3E %3Cline x1='118' y1='101' x2='156' y2='101'/%3E %3Cline x1='195' y1='82' x2='195' y2='120'/%3E %3Cline x1='176' y1='101' x2='214' y2='101'/%3E %3Cline x1='253' y1='82' x2='253' y2='120'/%3E %3Cline x1='234' y1='101' x2='272' y2='101'/%3E %3C/g%3E %3C!-- Window sills --%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='115' y1='122' x2='159' y2='122'/%3E %3Cline x1='173' y1='122' x2='217' y2='122'/%3E %3Cline x1='231' y1='122' x2='275' y2='122'/%3E %3C/g%3E %3C!-- ============================ LOWER STORY: ENTRANCE + WINDOWS ============================ --%3E %3C!-- Left window --%3E %3Crect x='118' y='155' width='38' height='40' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='137' y1='155' x2='137' y2='195' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='118' y1='175' x2='156' y2='175' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='115' y1='197' x2='159' y2='197' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Center entrance / glass door --%3E %3Crect x='176' y='148' width='38' height='62' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Door split --%3E %3Cline x1='195' y1='148' x2='195' y2='210' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Door panel divisions --%3E %3Cline x1='176' y1='170' x2='214' y2='170' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Door handles --%3E %3Ccircle cx='192' cy='180' r='0.8' fill='%23c9744f'/%3E %3Ccircle cx='198' cy='180' r='0.8' fill='%23c9744f'/%3E %3C!-- Awning / canopy over door --%3E %3Cpolygon points='168,148 222,148 215,140 175,140' fill='none' stroke='%23c9744f' stroke-width='0.6'/%3E %3C!-- Right window --%3E %3Crect x='234' y='155' width='38' height='40' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='253' y1='155' x2='253' y2='195' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='234' y1='175' x2='272' y2='175' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='231' y1='197' x2='275' y2='197' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- ============================ SIGNAGE BAND ============================ --%3E %3C!-- Building name plate above door (small, abstract — the EC mark) --%3E %3Crect x='178' y='66' width='34' height='10' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='185' y1='71' x2='205' y2='71' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- ============================ WALKWAY ============================ --%3E %3Cpolygon points='176,210 214,210 222,225 168,225' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='195' y1='210' x2='195' y2='225' stroke='%23c9744f' stroke-width='0.4' stroke-dasharray='2,2'/%3E %3C!-- ============================ TREE — LEFT ============================ --%3E %3Cline x1='55' y1='210' x2='55' y2='160' stroke='%23c9744f' stroke-width='1'/%3E %3Cg stroke='%23c9744f' stroke-width='0.7' fill='none'%3E %3Ccircle cx='55' cy='140' r='28'/%3E %3Ccircle cx='42' cy='148' r='14'/%3E %3Ccircle cx='68' cy='148' r='14'/%3E %3Ccircle cx='55' cy='128' r='15'/%3E %3C/g%3E %3C!-- Branch suggestions --%3E %3Cg stroke='%23c9744f' stroke-width='0.4' opacity='0.7'%3E %3Cline x1='55' y1='160' x2='42' y2='150'/%3E %3Cline x1='55' y1='160' x2='68' y2='150'/%3E %3Cline x1='55' y1='150' x2='55' y2='130'/%3E %3C/g%3E %3C!-- ============================ TREE — RIGHT ============================ --%3E %3Cline x1='335' y1='210' x2='335' y2='165' stroke='%23c9744f' stroke-width='1'/%3E %3Cg stroke='%23c9744f' stroke-width='0.7' fill='none'%3E %3Ccircle cx='335' cy='148' r='24'/%3E %3Ccircle cx='322' cy='154' r='12'/%3E %3Ccircle cx='348' cy='154' r='12'/%3E %3Ccircle cx='335' cy='138' r='13'/%3E %3C/g%3E %3Cg stroke='%23c9744f' stroke-width='0.4' opacity='0.7'%3E %3Cline x1='335' y1='165' x2='324' y2='156'/%3E %3Cline x1='335' y1='165' x2='346' y2='156'/%3E %3Cline x1='335' y1='155' x2='335' y2='138'/%3E %3C/g%3E %3C!-- ============================ COMPASS ROSE / NORTH MARK (small detail) ============================ --%3E %3Cg transform='translate(345,30)'%3E %3Ccircle cx='0' cy='0' r='8' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cpolygon points='0,-7 -2,0 0,7 2,0' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Ctext x='0' y='-10' font-family='monospace' font-size='6' fill='%23c9744f' text-anchor='middle'%3EN%3C/text%3E %3C/g%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: min(520px, 42vw);
aspect-ratio: 380 / 240;
bottom: 40px;
left: 4%;
opacity: 0.13;
pointer-events: none;
z-index: 0;
}
#contact-form > * {
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
#contact-form::before {
width: min(420px, 80vw);
bottom: 20px;
left: 50%;
transform: translateX(-50%);
opacity: 0.08;
}
}
/* ---------------- BACKGROUND WATERMARKS — ABOUT / ORIGIN ---------------- */
/* Both sections get section-relative + overflow-hidden so the absolute-positioned
::before watermark stays inside the section box. */
#about, #origin {
position: relative;
overflow: hidden;
}
#about > *, #origin > * {
position: relative;
z-index: 1;
}
/* About — HQ building elevation, sits in the right-column dead space
below the corporate-structure entity diagram. */
#about::before {
content: "";
position: absolute;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 240' preserveAspectRatio='xMidYMid meet'%3E %3C!-- Ground line + hatching --%3E %3Cline x1='15' y1='210' x2='365' y2='210' stroke='%23c9744f' stroke-width='0.8'/%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='30' y1='214' x2='40' y2='222'/%3E %3Cline x1='60' y1='214' x2='70' y2='222'/%3E %3Cline x1='90' y1='214' x2='100' y2='222'/%3E %3Cline x1='120' y1='214' x2='130' y2='222'/%3E %3Cline x1='150' y1='214' x2='160' y2='222'/%3E %3Cline x1='180' y1='214' x2='190' y2='222'/%3E %3Cline x1='210' y1='214' x2='220' y2='222'/%3E %3Cline x1='240' y1='214' x2='250' y2='222'/%3E %3Cline x1='270' y1='214' x2='280' y2='222'/%3E %3Cline x1='300' y1='214' x2='310' y2='222'/%3E %3Cline x1='330' y1='214' x2='340' y2='222'/%3E %3C/g%3E %3C!-- ============================ MAIN BUILDING (two-story rectangle) ============================ --%3E %3Crect x='100' y='65' width='190' height='145' fill='none' stroke='%23c9744f' stroke-width='1.1'/%3E %3C!-- Roof trim line --%3E %3Cline x1='95' y1='65' x2='295' y2='65' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='95' y1='62' x2='295' y2='62' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='95' y1='62' x2='95' y2='65' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='295' y1='62' x2='295' y2='65' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Floor divider line between stories --%3E %3Cline x1='100' y1='135' x2='290' y2='135' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='100' y1='138' x2='290' y2='138' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- ============================ UPPER STORY WINDOWS (3 across) ============================ --%3E %3Cg stroke='%23c9744f' stroke-width='0.7' fill='none'%3E %3Crect x='118' y='82' width='38' height='38'/%3E %3Crect x='176' y='82' width='38' height='38'/%3E %3Crect x='234' y='82' width='38' height='38'/%3E %3C/g%3E %3C!-- Window mullions (cross panes) --%3E %3Cg stroke='%23c9744f' stroke-width='0.4'%3E %3Cline x1='137' y1='82' x2='137' y2='120'/%3E %3Cline x1='118' y1='101' x2='156' y2='101'/%3E %3Cline x1='195' y1='82' x2='195' y2='120'/%3E %3Cline x1='176' y1='101' x2='214' y2='101'/%3E %3Cline x1='253' y1='82' x2='253' y2='120'/%3E %3Cline x1='234' y1='101' x2='272' y2='101'/%3E %3C/g%3E %3C!-- Window sills --%3E %3Cg stroke='%23c9744f' stroke-width='0.5'%3E %3Cline x1='115' y1='122' x2='159' y2='122'/%3E %3Cline x1='173' y1='122' x2='217' y2='122'/%3E %3Cline x1='231' y1='122' x2='275' y2='122'/%3E %3C/g%3E %3C!-- ============================ LOWER STORY: ENTRANCE + WINDOWS ============================ --%3E %3C!-- Left window --%3E %3Crect x='118' y='155' width='38' height='40' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='137' y1='155' x2='137' y2='195' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='118' y1='175' x2='156' y2='175' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='115' y1='197' x2='159' y2='197' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Center entrance / glass door --%3E %3Crect x='176' y='148' width='38' height='62' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3C!-- Door split --%3E %3Cline x1='195' y1='148' x2='195' y2='210' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Door panel divisions --%3E %3Cline x1='176' y1='170' x2='214' y2='170' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Door handles --%3E %3Ccircle cx='192' cy='180' r='0.8' fill='%23c9744f'/%3E %3Ccircle cx='198' cy='180' r='0.8' fill='%23c9744f'/%3E %3C!-- Awning / canopy over door --%3E %3Cpolygon points='168,148 222,148 215,140 175,140' fill='none' stroke='%23c9744f' stroke-width='0.6'/%3E %3C!-- Right window --%3E %3Crect x='234' y='155' width='38' height='40' fill='none' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='253' y1='155' x2='253' y2='195' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='234' y1='175' x2='272' y2='175' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='231' y1='197' x2='275' y2='197' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- ============================ SIGNAGE BAND ============================ --%3E %3C!-- Building name plate above door (small, abstract — the EC mark) --%3E %3Crect x='178' y='66' width='34' height='10' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='185' y1='71' x2='205' y2='71' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- ============================ WALKWAY ============================ --%3E %3Cpolygon points='176,210 214,210 222,225 168,225' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='195' y1='210' x2='195' y2='225' stroke='%23c9744f' stroke-width='0.4' stroke-dasharray='2,2'/%3E %3C!-- ============================ TREE — LEFT ============================ --%3E %3Cline x1='55' y1='210' x2='55' y2='160' stroke='%23c9744f' stroke-width='1'/%3E %3Cg stroke='%23c9744f' stroke-width='0.7' fill='none'%3E %3Ccircle cx='55' cy='140' r='28'/%3E %3Ccircle cx='42' cy='148' r='14'/%3E %3Ccircle cx='68' cy='148' r='14'/%3E %3Ccircle cx='55' cy='128' r='15'/%3E %3C/g%3E %3C!-- Branch suggestions --%3E %3Cg stroke='%23c9744f' stroke-width='0.4' opacity='0.7'%3E %3Cline x1='55' y1='160' x2='42' y2='150'/%3E %3Cline x1='55' y1='160' x2='68' y2='150'/%3E %3Cline x1='55' y1='150' x2='55' y2='130'/%3E %3C/g%3E %3C!-- ============================ TREE — RIGHT ============================ --%3E %3Cline x1='335' y1='210' x2='335' y2='165' stroke='%23c9744f' stroke-width='1'/%3E %3Cg stroke='%23c9744f' stroke-width='0.7' fill='none'%3E %3Ccircle cx='335' cy='148' r='24'/%3E %3Ccircle cx='322' cy='154' r='12'/%3E %3Ccircle cx='348' cy='154' r='12'/%3E %3Ccircle cx='335' cy='138' r='13'/%3E %3C/g%3E %3Cg stroke='%23c9744f' stroke-width='0.4' opacity='0.7'%3E %3Cline x1='335' y1='165' x2='324' y2='156'/%3E %3Cline x1='335' y1='165' x2='346' y2='156'/%3E %3Cline x1='335' y1='155' x2='335' y2='138'/%3E %3C/g%3E %3C!-- ============================ COMPASS ROSE / NORTH MARK (small detail) ============================ --%3E %3Cg transform='translate(345,30)'%3E %3Ccircle cx='0' cy='0' r='8' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cpolygon points='0,-7 -2,0 0,7 2,0' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Ctext x='0' y='-10' font-family='monospace' font-size='6' fill='%23c9744f' text-anchor='middle'%3EN%3C/text%3E %3C/g%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: min(560px, 44vw);
aspect-ratio: 380 / 240;
bottom: 80px;
right: 4%;
opacity: 0.13;
pointer-events: none;
z-index: 0;
}
@media (max-width: 900px) {
#about::before {
width: min(420px, 80vw);
bottom: 40px;
left: 50%;
right: auto;
transform: translateX(-50%);
opacity: 0.08;
}
}
/* Origin — vertical multi-disc rotor exploded view, sits in the LEFT column
dead space below the "How we got here" heading and intro, alongside the
right-column timeline. Tall narrow vertical aspect (200×600). */
#origin::before {
content: "";
position: absolute;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 600' preserveAspectRatio='xMidYMid meet'%3E %3C!-- Center axis (long, dashed-dotted style) --%3E %3Cline x1='100' y1='25' x2='100' y2='575' stroke='%23c9744f' stroke-width='0.5' stroke-dasharray='12,3,2,3' opacity='0.7'/%3E %3C!-- ====== SHAFT (vertical) ====== --%3E %3Cline x1='95' y1='40' x2='95' y2='560' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='105' y1='40' x2='105' y2='560' stroke='%23c9744f' stroke-width='0.7'/%3E %3Cline x1='95' y1='40' x2='105' y2='40' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='95' y1='560' x2='105' y2='560' stroke='%23c9744f' stroke-width='0.6'/%3E %3C!-- ====== END BEARING TOP ====== --%3E %3Crect x='75' y='30' width='50' height='25' fill='none' stroke='%23c9744f' stroke-width='1'/%3E %3Crect x='80' y='34' width='40' height='17' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Ccircle cx='100' cy='42' r='6' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Disc at y=95 (vertical orientation: ellipse spans X axis) --%3E %3Cellipse cx='100' cy='95' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cellipse cx='100' cy='99' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.5' opacity='0.6'/%3E %3Cline x1='58' y1='95' x2='58' y2='99' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='142' y1='95' x2='142' y2='99' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Hub bore --%3E %3Cellipse cx='100' cy='95' rx='14' ry='3' fill='none' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Vane tick marks (radial hash on rim) --%3E %3Cg stroke='%23c9744f' stroke-width='0.35' opacity='0.85'%3E %3Cline x1='80' y1='88' x2='75' y2='96'/%3E %3Cline x1='100' y1='88' x2='100' y2='96'/%3E %3Cline x1='120' y1='88' x2='125' y2='96'/%3E %3Cline x1='90' y1='88' x2='86' y2='96'/%3E %3Cline x1='110' y1='88' x2='114' y2='96'/%3E %3C/g%3E %3C!-- Disc at y=150 (vertical orientation: ellipse spans X axis) --%3E %3Cellipse cx='100' cy='150' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cellipse cx='100' cy='154' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.5' opacity='0.6'/%3E %3Cline x1='58' y1='150' x2='58' y2='154' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='142' y1='150' x2='142' y2='154' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Hub bore --%3E %3Cellipse cx='100' cy='150' rx='14' ry='3' fill='none' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Vane tick marks (radial hash on rim) --%3E %3Cg stroke='%23c9744f' stroke-width='0.35' opacity='0.85'%3E %3Cline x1='80' y1='143' x2='75' y2='151'/%3E %3Cline x1='100' y1='143' x2='100' y2='151'/%3E %3Cline x1='120' y1='143' x2='125' y2='151'/%3E %3Cline x1='90' y1='143' x2='86' y2='151'/%3E %3Cline x1='110' y1='143' x2='114' y2='151'/%3E %3C/g%3E %3C!-- Disc at y=205 (vertical orientation: ellipse spans X axis) --%3E %3Cellipse cx='100' cy='205' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cellipse cx='100' cy='209' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.5' opacity='0.6'/%3E %3Cline x1='58' y1='205' x2='58' y2='209' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='142' y1='205' x2='142' y2='209' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Hub bore --%3E %3Cellipse cx='100' cy='205' rx='14' ry='3' fill='none' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Vane tick marks (radial hash on rim) --%3E %3Cg stroke='%23c9744f' stroke-width='0.35' opacity='0.85'%3E %3Cline x1='80' y1='198' x2='75' y2='206'/%3E %3Cline x1='100' y1='198' x2='100' y2='206'/%3E %3Cline x1='120' y1='198' x2='125' y2='206'/%3E %3Cline x1='90' y1='198' x2='86' y2='206'/%3E %3Cline x1='110' y1='198' x2='114' y2='206'/%3E %3C/g%3E %3C!-- Disc at y=260 (vertical orientation: ellipse spans X axis) --%3E %3Cellipse cx='100' cy='260' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cellipse cx='100' cy='264' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.5' opacity='0.6'/%3E %3Cline x1='58' y1='260' x2='58' y2='264' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='142' y1='260' x2='142' y2='264' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Hub bore --%3E %3Cellipse cx='100' cy='260' rx='14' ry='3' fill='none' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Vane tick marks (radial hash on rim) --%3E %3Cg stroke='%23c9744f' stroke-width='0.35' opacity='0.85'%3E %3Cline x1='80' y1='253' x2='75' y2='261'/%3E %3Cline x1='100' y1='253' x2='100' y2='261'/%3E %3Cline x1='120' y1='253' x2='125' y2='261'/%3E %3Cline x1='90' y1='253' x2='86' y2='261'/%3E %3Cline x1='110' y1='253' x2='114' y2='261'/%3E %3C/g%3E %3C!-- Disc at y=315 (vertical orientation: ellipse spans X axis) --%3E %3Cellipse cx='100' cy='315' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cellipse cx='100' cy='319' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.5' opacity='0.6'/%3E %3Cline x1='58' y1='315' x2='58' y2='319' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='142' y1='315' x2='142' y2='319' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Hub bore --%3E %3Cellipse cx='100' cy='315' rx='14' ry='3' fill='none' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Vane tick marks (radial hash on rim) --%3E %3Cg stroke='%23c9744f' stroke-width='0.35' opacity='0.85'%3E %3Cline x1='80' y1='308' x2='75' y2='316'/%3E %3Cline x1='100' y1='308' x2='100' y2='316'/%3E %3Cline x1='120' y1='308' x2='125' y2='316'/%3E %3Cline x1='90' y1='308' x2='86' y2='316'/%3E %3Cline x1='110' y1='308' x2='114' y2='316'/%3E %3C/g%3E %3C!-- Disc at y=370 (vertical orientation: ellipse spans X axis) --%3E %3Cellipse cx='100' cy='370' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cellipse cx='100' cy='374' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.5' opacity='0.6'/%3E %3Cline x1='58' y1='370' x2='58' y2='374' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='142' y1='370' x2='142' y2='374' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Hub bore --%3E %3Cellipse cx='100' cy='370' rx='14' ry='3' fill='none' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Vane tick marks (radial hash on rim) --%3E %3Cg stroke='%23c9744f' stroke-width='0.35' opacity='0.85'%3E %3Cline x1='80' y1='363' x2='75' y2='371'/%3E %3Cline x1='100' y1='363' x2='100' y2='371'/%3E %3Cline x1='120' y1='363' x2='125' y2='371'/%3E %3Cline x1='90' y1='363' x2='86' y2='371'/%3E %3Cline x1='110' y1='363' x2='114' y2='371'/%3E %3C/g%3E %3C!-- Disc at y=425 (vertical orientation: ellipse spans X axis) --%3E %3Cellipse cx='100' cy='425' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cellipse cx='100' cy='429' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.5' opacity='0.6'/%3E %3Cline x1='58' y1='425' x2='58' y2='429' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='142' y1='425' x2='142' y2='429' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Hub bore --%3E %3Cellipse cx='100' cy='425' rx='14' ry='3' fill='none' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Vane tick marks (radial hash on rim) --%3E %3Cg stroke='%23c9744f' stroke-width='0.35' opacity='0.85'%3E %3Cline x1='80' y1='418' x2='75' y2='426'/%3E %3Cline x1='100' y1='418' x2='100' y2='426'/%3E %3Cline x1='120' y1='418' x2='125' y2='426'/%3E %3Cline x1='90' y1='418' x2='86' y2='426'/%3E %3Cline x1='110' y1='418' x2='114' y2='426'/%3E %3C/g%3E %3C!-- Disc at y=480 (vertical orientation: ellipse spans X axis) --%3E %3Cellipse cx='100' cy='480' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.9'/%3E %3Cellipse cx='100' cy='484' rx='42' ry='8' fill='none' stroke='%23c9744f' stroke-width='0.5' opacity='0.6'/%3E %3Cline x1='58' y1='480' x2='58' y2='484' stroke='%23c9744f' stroke-width='0.5'/%3E %3Cline x1='142' y1='480' x2='142' y2='484' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- Hub bore --%3E %3Cellipse cx='100' cy='480' rx='14' ry='3' fill='none' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- Vane tick marks (radial hash on rim) --%3E %3Cg stroke='%23c9744f' stroke-width='0.35' opacity='0.85'%3E %3Cline x1='80' y1='473' x2='75' y2='481'/%3E %3Cline x1='100' y1='473' x2='100' y2='481'/%3E %3Cline x1='120' y1='473' x2='125' y2='481'/%3E %3Cline x1='90' y1='473' x2='86' y2='481'/%3E %3Cline x1='110' y1='473' x2='114' y2='481'/%3E %3C/g%3E %3C!-- ====== END BEARING BOTTOM ====== --%3E %3Crect x='75' y='545' width='50' height='25' fill='none' stroke='%23c9744f' stroke-width='1'/%3E %3Crect x='80' y='549' width='40' height='17' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3Ccircle cx='100' cy='557' r='6' fill='none' stroke='%23c9744f' stroke-width='0.5'/%3E %3C!-- ====== AXIAL DIMENSION ARROW (left side) ====== --%3E %3Cline x1='40' y1='42' x2='40' y2='559' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cpolygon points='40,42 38,48 42,48' fill='%23c9744f'/%3E %3Cpolygon points='40,559 38,553 42,553' fill='%23c9744f'/%3E %3Cline x1='37' y1='42' x2='43' y2='42' stroke='%23c9744f' stroke-width='0.4'/%3E %3Cline x1='37' y1='559' x2='43' y2='559' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- ====== COUPLING / KEYWAY DETAIL — TOP ====== --%3E %3Crect x='90' y='15' width='20' height='12' fill='none' stroke='%23c9744f' stroke-width='0.6'/%3E %3Cline x1='95' y1='18' x2='105' y2='18' stroke='%23c9744f' stroke-width='0.4'/%3E %3C!-- ====== ROTATION INDICATOR (small curved arrow on the side) ====== --%3E %3Cg stroke='%23c9744f' stroke-width='0.5' fill='none' opacity='0.65'%3E %3Cpath d='M 165 75 Q 158 95, 165 115'/%3E %3Cpath d='M 165 115 Q 158 135, 165 155'/%3E %3Cpolygon points='164,153 166,159 168,153' fill='%23c9744f'/%3E %3C/g%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: min(220px, 28vw);
aspect-ratio: 200 / 600;
top: 280px;
left: 18%;
opacity: 0.18;
pointer-events: none;
z-index: 0;
}
@media (max-width: 900px) {
#origin::before { display: none; }
}
.footer-col h5 {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 16px;
font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; font-size: 0.92rem; color: var(--text-ink); opacity: 0.85; }
.footer-col a { color: var(--text-ink); text-decoration: none; opacity: 0.85; transition: color 0.2s, opacity 0.2s; }
.footer-col a:hover { color: var(--copper-3); opacity: 1; }
.footer-bottom {
padding-top: 32px;
border-top: 1px solid var(--rule-ink);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap;
gap: 16px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-ink);
}
/* ---------------- PLATFORM VALUE STACK ---------------- */
.value-stack-section {
background: var(--ink);
position: relative;
}
.value-stack {
margin-top: 64px;
display: grid;
gap: 0;
border: 1px solid var(--rule-ink);
background: var(--ink-2);
}
.layer {
display: grid;
grid-template-columns: 80px 1fr 200px 140px;
gap: 32px;
padding: 28px 32px;
align-items: center;
border-bottom: 1px solid var(--rule-ink);
position: relative;
transition: background 0.3s, padding-left 0.3s;
}
.layer:last-child { border-bottom: none; }
.layer:hover { background: var(--ink-3); padding-left: 48px; }
.layer:hover .layer-num { color: var(--copper); }
.layer-num {
font-family: var(--display);
font-size: 56px;
font-variation-settings: "opsz" 96, "SOFT" 30;
color: var(--copper-3);
line-height: 0.85;
transition: color 0.3s;
}
.layer-content h4 {
font-family: var(--display);
font-size: 1.4rem;
font-variation-settings: "opsz" 36, "SOFT" 40;
margin-bottom: 6px;
line-height: 1.2;
}
.layer-content p {
font-size: 0.92rem;
color: var(--muted-ink);
line-height: 1.55;
}
.layer-entity {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-3);
text-align: right;
}
.layer-status {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: right;
padding: 4px 10px;
border: 1px solid var(--rule-ink);
color: var(--muted-ink);
justify-self: end;
}
.layer-status.now { border-color: var(--copper); color: var(--copper-3); background: rgba(201,116,79,0.06); }
.layer-status.future { color: var(--muted-ink); }
@media (max-width: 900px) {
.layer { grid-template-columns: 60px 1fr; gap: 20px; padding: 24px; }
.layer-num { font-size: 36px; }
.layer-entity, .layer-status { grid-column: 2; text-align: left; justify-self: start; margin-top: 8px; }
.layer:hover { padding-left: 24px; }
}
/* ---------------- DIFFERENTIATORS ---------------- */
.differentiators {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
margin-top: 64px;
border-top: 1px solid var(--rule-pap);
border-bottom: 1px solid var(--rule-pap);
}
@media (max-width: 1100px) { .differentiators { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .differentiators { grid-template-columns: 1fr; } }
.diff {
padding: 36px 28px;
border-right: 1px solid var(--rule-pap);
position: relative;
transition: background 0.3s;
}
.diff:last-child { border-right: none; }
@media (max-width: 1100px) {
.diff { border-right: none; border-bottom: 1px solid var(--rule-pap); }
.diff:nth-child(odd) { border-right: 1px solid var(--rule-pap); }
.diff:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
.diff { border-right: none !important; border-bottom: 1px solid var(--rule-pap); }
.diff:last-child { border-bottom: none; }
}
.diff:hover { background: rgba(201, 116, 79, 0.05); }
.diff-num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--copper-2);
margin-bottom: 24px;
}
.diff h4 {
font-family: var(--display);
font-size: 1.3rem;
font-variation-settings: "opsz" 24, "SOFT" 40;
margin-bottom: 12px;
line-height: 1.2;
color: var(--text-pap);
}
.diff p {
font-size: 0.9rem;
line-height: 1.55;
color: var(--muted-pap);
}
/* ---------------- 4-STATE MAP ---------------- */
.market-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: center;
margin-top: 64px;
}
@media (max-width: 900px) { .market-grid { grid-template-columns: 1fr; gap: 48px; } }
.market-map {
position: relative;
width: 100%;
border: 1px solid var(--rule-ink);
background: var(--ink-2);
padding: 32px;
}
.market-map::before {
content: "ADDRESSABLE INVENTORY";
position: absolute; top: -10px; left: 24px;
background: var(--ink);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--muted-ink);
}
.market-map svg { width: 100%; height: auto; display: block; }
.state-list { display: grid; gap: 16px; }
.state-row {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 24px;
align-items: baseline;
padding: 16px 0;
border-top: 1px solid var(--rule-ink);
}
.state-row:last-child { border-bottom: 1px solid var(--rule-ink); }
.state-abbr {
font-family: var(--display);
font-size: 28px;
font-variation-settings: "opsz" 36, "SOFT" 30;
color: var(--copper-3);
line-height: 1;
}
.state-name {
font-family: var(--display);
font-size: 1.1rem;
font-variation-settings: "opsz" 24, "SOFT" 40;
}
.state-name .role {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-ink);
margin-top: 2px;
}
.state-count {
font-family: var(--mono);
font-size: 13px;
color: var(--text-ink);
letter-spacing: 0.04em;
white-space: nowrap;
}
.state-count .num { color: var(--copper-3); font-size: 16px; }
/* ---------------- TOP NAV: MENU TOGGLE BUTTON ---------------- */
.menu-toggle {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px 10px 22px;
background: transparent;
border: 1px solid var(--rule-ink);
color: var(--text-ink);
cursor: pointer;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.menu-toggle:hover {
border-color: var(--copper);
color: var(--copper-3);
background: rgba(201, 116, 79, 0.06);
}
.menu-toggle-icon {
display: inline-flex;
flex-direction: column;
gap: 3px;
width: 18px;
}
.menu-toggle-icon span {
display: block;
height: 1px;
background: currentColor;
transition: transform 0.3s, opacity 0.3s;
transform-origin: center;
}
.menu-toggle-icon span:nth-child(1) { width: 18px; }
.menu-toggle-icon span:nth-child(2) { width: 12px; align-self: flex-end; }
.menu-toggle-icon span:nth-child(3) { width: 18px; }
.menu-toggle.open .menu-toggle-icon span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-toggle.open .menu-toggle-icon span:nth-child(2) { opacity: 0; }
.menu-toggle.open .menu-toggle-icon span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); width: 18px; }
/* ---------------- FULL-SECTION MENU OVERLAY ---------------- */
.menu-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: var(--ink);
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0.4s;
overflow: hidden;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0s;
}
.menu-overlay::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--rule-ink) 1px, transparent 1px),
linear-gradient(90deg, var(--rule-ink) 1px, transparent 1px);
background-size: 80px 80px;
opacity: 0.35;
mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, transparent 75%);
pointer-events: none;
}
.menu-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 32px;
border-bottom: 1px solid var(--rule-ink);
position: relative;
z-index: 2;
}
.menu-head .mark {
font-family: var(--display);
font-size: 18px;
font-variation-settings: "opsz" 24, "SOFT" 30;
color: var(--text-ink);
text-decoration: none;
}
.menu-head .mark span { color: var(--copper-3); }
.menu-head .menu-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted-ink);
}
.menu-body {
flex: 1;
overflow-y: auto;
padding: 32px 0;
position: relative;
z-index: 2;
}
.menu-list {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
list-style: none;
}
.menu-item {
display: grid;
grid-template-columns: 80px 1fr 360px;
gap: 32px;
align-items: baseline;
padding: 18px 0;
border-bottom: 1px solid var(--rule-ink);
text-decoration: none;
color: var(--text-ink);
cursor: pointer;
transition: padding 0.3s, background 0.3s;
position: relative;
}
.menu-item:last-child { border-bottom: none; }
.menu-item::before {
content: "";
position: absolute;
left: -32px; top: 50%; transform: translateY(-50%);
width: 0; height: 1px;
background: var(--copper);
transition: width 0.3s;
}
.menu-item:hover {
padding-left: 32px;
background: linear-gradient(90deg, rgba(201,116,79,0.06) 0%, transparent 100%);
}
.menu-item:hover::before { width: 24px; }
.menu-item:hover .menu-item-title { color: var(--copper-3); }
.menu-item:hover .menu-item-num { color: var(--copper); }
.menu-item-num {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
color: var(--copper-3);
font-weight: 500;
transition: color 0.2s;
}
.menu-item-title {
font-family: var(--display);
font-size: clamp(28px, 3.6vw, 44px);
font-variation-settings: "opsz" 48, "SOFT" 30;
letter-spacing: -0.02em;
line-height: 1.05;
transition: color 0.2s;
}
.menu-item-title em {
font-style: italic;
font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
}
.menu-item-desc {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--muted-ink);
text-transform: none;
line-height: 1.5;
text-align: right;
}
@media (max-width: 800px) {
.menu-item {
grid-template-columns: 60px 1fr;
gap: 16px;
padding: 16px 0;
}
.menu-item-desc {
grid-column: 2;
text-align: left;
margin-top: 4px;
}
.menu-item:hover { padding-left: 12px; }
.menu-list { padding: 0 20px; }
.menu-head { padding: 20px; }
}
.menu-foot {
border-top: 1px solid var(--rule-ink);
padding: 20px 32px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-ink);
position: relative;
z-index: 2;
}
.menu-foot a {
color: var(--text-ink);
text-decoration: none;
border-bottom: 1px solid var(--rule-ink);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.menu-foot a:hover { color: var(--copper-3); border-color: var(--copper); }
/* Keep document scroll locked when menu is open */
body.menu-locked { overflow: hidden; }
/* ---------------- TEAM & PARTNERS / NETWORK DIRECTORY ---------------- */
.network-grid {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 80px;
align-items: start;
margin-top: 56px;
}
@media (max-width: 900px) { .network-grid { grid-template-columns: 1fr; gap: 48px; } }
.network-intro p {
color: var(--text-pap);
font-size: 1.05rem;
line-height: 1.65;
margin-bottom: 1.2em;
}
.network-intro p:first-of-type {
font-family: var(--display);
font-size: 1.3rem;
font-variation-settings: "opsz" 36, "SOFT" 40;
line-height: 1.4;
}
.network-directory {
display: grid;
gap: 0;
border-top: 1px solid var(--rule-pap);
}
.network-group {
border-bottom: 1px solid var(--rule-pap);
padding: 32px 0 28px;
}
.network-group-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-2);
margin-bottom: 20px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.network-group-label::before {
content: "";
width: 18px;
height: 1px;
background: var(--copper);
}
.network-entry {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 32px;
padding: 16px 0;
align-items: start;
}
.network-entry + .network-entry {
border-top: 1px solid var(--rule-pap);
margin-top: 8px;
padding-top: 24px;
}
@media (max-width: 720px) {
.network-entry { grid-template-columns: 1fr; gap: 8px; }
}
.network-name {
font-family: var(--display);
font-size: 1.35rem;
font-variation-settings: "opsz" 36, "SOFT" 40;
color: var(--text-pap);
line-height: 1.2;
margin-bottom: 6px;
}
.network-role {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--copper-2);
line-height: 1.4;
}
.network-detail {
color: var(--muted-pap);
font-size: 0.95rem;
line-height: 1.6;
}
/* Hiring CTA at bottom of section */
.hiring-cta {
margin-top: 64px;
padding: 48px 48px 44px;
background: rgba(28, 42, 58, 0.04);
border: 1px solid var(--rule-pap);
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: end;
}
@media (max-width: 800px) {
.hiring-cta { grid-template-columns: 1fr; gap: 24px; padding: 36px 32px; }
}
.hiring-cta::before {
content: "OPEN ROLES & OPEN CALLS / CAREERS";
position: absolute;
top: -10px; left: 32px;
background: var(--paper-2);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--copper-2);
}
.hiring-cta h3 {
font-family: var(--display);
font-size: clamp(24px, 2.6vw, 34px);
font-variation-settings: "opsz" 48, "SOFT" 40;
color: var(--text-pap);
line-height: 1.2;
margin-bottom: 16px;
}
.hiring-cta p {
color: var(--muted-pap);
font-size: 0.98rem;
line-height: 1.6;
max-width: 640px;
}
.hiring-cta-button {
display: inline-flex;
align-items: center;
padding: 14px 24px;
background: var(--copper);
color: var(--ink);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s;
}
.hiring-cta-button:hover { background: var(--copper-3); }
/* ---------------- LOGO PLATES (subsidiary brand marks on division cards) ---------------- */
.logo-plate {
display: inline-flex;
align-items: center;
justify-content: flex-start;
background: var(--paper);
padding: 12px 18px;
margin-bottom: 24px;
margin-right: 140px; /* clearance for absolute-positioned status badge */
border: 1px solid var(--rule-ink);
position: relative;
max-width: 260px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.logo-plate:hover {
transform: translateY(-2px);
border-color: var(--copper-2);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.logo-plate img {
height: 38px;
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
}
.logo-plate.compact { padding: 10px 14px; margin-right: 130px; max-width: 230px; }
.logo-plate.compact img { height: 32px; }
@media (max-width: 720px) {
.logo-plate, .logo-plate.compact { margin-right: 0; max-width: 260px; }
}
.parent-mark {
display: inline-block;
margin-bottom: 16px;
}
.parent-mark img {
height: 56px;
width: auto;
display: block;
filter: drop-shadow(0 1px 4px rgba(28, 42, 58, 0.12));
}
/* ---------------- THE PROBLEM ---------------- */
.problem-section {
background: var(--ink-2);
border-top: 1px solid var(--rule-ink);
border-bottom: 1px solid var(--rule-ink);
position: relative;
overflow: hidden;
}
.problem-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 50% at 100% 0%, rgba(201,116,79,0.08), transparent 60%);
pointer-events: none;
}
.problem-grid {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 80px;
align-items: start;
position: relative;
}
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; gap: 48px; } }
.problem-list {
display: grid;
gap: 0;
border-top: 1px solid var(--rule-ink);
}
.problem-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
padding: 32px 0;
border-bottom: 1px solid var(--rule-ink);
align-items: start;
transition: padding-left 0.3s;
}
.problem-item:hover { padding-left: 16px; }
.problem-item-marker {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--copper-3);
padding-top: 8px;
}
.problem-item h4 {
font-family: var(--display);
font-size: 1.5rem;
font-variation-settings: "opsz" 36, "SOFT" 40;
line-height: 1.25;
margin-bottom: 12px;
}
.problem-item p {
font-size: 1rem;
line-height: 1.6;
color: var(--muted-ink);
}
/* ---------------- VISION DIAGRAM ---------------- */
.vision-section {
margin-top: 96px;
padding: 56px 48px;
background: var(--ink);
border: 1px solid var(--rule-ink);
position: relative;
}
.vision-section::before {
content: "PLATFORM SCHEMATIC";
position: absolute;
top: -10px; left: 32px;
background: var(--ink);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--copper-3);
}
.vision-section figure { margin: 0; }
.vision-section img {
display: block;
width: 100%;
height: auto;
max-width: 900px;
margin: 0 auto;
border: 1px solid var(--rule-ink);
}
.vision-caption {
text-align: center;
margin-top: 24px;
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 36, "SOFT" 50, "WONK" 1;
font-size: 1.1rem;
color: var(--muted-ink);
line-height: 1.5;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* ---------------- SOCIAL ICONS ---------------- */
.social-row {
display: flex;
gap: 14px;
margin-top: 16px;
}
.social-row a {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--rule-ink);
color: var(--text-ink);
text-decoration: none;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
transition: border-color 0.2s, color 0.2s;
opacity: 0.7;
}
.social-row a:hover { border-color: var(--copper); color: var(--copper-3); opacity: 1; }
/* ---------------- ETYMOLOGY ---------------- */
.etymology {
display: inline-flex;
align-items: baseline;
gap: 12px;
margin-bottom: 32px;
padding: 10px 16px;
border: 1px solid var(--rule-ink);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--muted-ink);
background: rgba(20, 41, 64, 0.4);
}
.etymology .word { color: var(--copper-3); font-weight: 500; letter-spacing: 0.06em; }
.etymology .ipa { color: var(--text-ink); opacity: 0.6; font-style: italic; }
.etymology .pos { color: var(--muted-ink); }
/* ---------------- ORIGIN STORY ---------------- */
.origin {
background: var(--ink-3);
position: relative;
overflow: hidden;
border-top: 1px solid var(--rule-ink);
border-bottom: 1px solid var(--rule-ink);
}
.origin::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 0% 50%, rgba(201,116,79,0.10), transparent 60%),
radial-gradient(ellipse 50% 70% at 100% 30%, rgba(201,116,79,0.06), transparent 60%);
pointer-events: none;
}
.origin-grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 80px;
align-items: start;
position: relative;
}
@media (max-width: 900px) { .origin-grid { grid-template-columns: 1fr; gap: 48px; } }
.origin-timeline {
position: relative;
border-left: 1px solid var(--rule-ink);
padding-left: 32px;
}
.origin-step {
margin-bottom: 56px;
position: relative;
}
.origin-step:last-child { margin-bottom: 0; }
.origin-step::before {
content: "";
position: absolute;
left: -38px;
top: 6px;
width: 12px;
height: 12px;
border: 2px solid var(--copper);
background: var(--ink-3);
border-radius: 50%;
}
.origin-step.now::before {
background: var(--copper);
}
.origin-year {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--copper-3);
margin-bottom: 8px;
}
.origin-step h4 {
font-family: var(--display);
font-size: 1.4rem;
font-variation-settings: "opsz" 24, "SOFT" 40;
margin-bottom: 12px;
line-height: 1.25;
}
.origin-step p {
color: var(--muted-ink);
font-size: 0.98rem;
line-height: 1.65;
}
.origin-step blockquote {
margin-top: 16px;
padding-left: 16px;
border-left: 2px solid var(--copper);
font-family: var(--display);
font-style: italic;
font-size: 1.05rem;
font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 1;
color: var(--text-ink);
line-height: 1.45;
}
.origin-step blockquote cite {
display: block;
margin-top: 8px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--muted-ink);
text-transform: uppercase;
font-style: normal;
}
/* ---------------- THREE-DIVISION GRID ---------------- */
.divisions-three {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 24px;
margin-top: 64px;
align-items: start;
}
@media (max-width: 1100px) { .divisions-three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .divisions-three { grid-template-columns: 1fr; } }
.division-card.develop::before {
content: "DEVELOPMENT";
position: absolute; top: 24px; right: 24px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
color: var(--text-ink);
background: rgba(230, 220, 198, 0.06);
padding: 4px 10px;
border: 1px solid var(--rule-ink);
}
.division-card .ext-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--rule-ink);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--copper-3);
text-decoration: none;
transition: color 0.2s, transform 0.2s;
}
.division-card .ext-link:hover { color: var(--copper); transform: translateX(4px); }
.division-card .ext-link::after { content: "↗"; font-size: 14px; }
/* Compact stats for the smaller cards */
.division-card.compact { padding: 36px 32px; }
.division-card.compact .division-name { font-size: clamp(22px, 2.4vw, 32px); }
/* ---------------- HERITAGE / MENTOR LINEAGE ---------------- */
.heritage-deep {
margin-top: 48px;
padding: 0;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(28, 42, 58, 0.32);
position: relative;
}
.heritage-deep::before {
content: "FAMILY HERITAGE";
position: absolute; top: -10px; left: 24px;
background: var(--paper-2);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-pap);
}
.heritage-deep-inner {
padding: 36px 36px 32px;
}
.heritage-deep p {
font-family: var(--display);
font-size: 1.15rem;
font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 1;
font-style: italic;
line-height: 1.5;
color: var(--text-pap);
margin-bottom: 20px;
}
.heritage-deep p strong {
font-style: normal;
color: var(--copper-2);
font-weight: 500;
}
.heritage-deep .doc-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-2);
text-decoration: none;
padding-top: 16px;
border-top: 1px solid var(--rule-pap);
margin-top: 12px;
}
.heritage-deep .doc-link::after { content: "→"; }
.heritage-deep .doc-link:hover { color: var(--copper); }
/* Mentor lineage chain */
/* ---------------- FOUNDER ARC TIMELINE ---------------- */
/* Visually paired with .heritage-deep below — same paper-on-paper fill,
same floating ::before plate label. Houses the inline SVG timeline. */
.founder-arc {
margin-top: 48px;
padding: 0;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(28, 42, 58, 0.32);
position: relative;
}
.founder-arc::before {
content: "FOUNDER ARC";
position: absolute; top: -10px; left: 24px;
background: var(--paper-2);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-pap);
}
.founder-arc-inner {
padding: 36px 36px 28px;
}
.founder-arc-inner svg {
display: block;
width: 100%;
height: auto;
max-width: 760px;
margin: 0 auto;
}
/* ---------------- MENTOR LINEAGE BOX ---------------- */
/* Visually paired with .heritage-deep above — same paper-on-paper fill,
same floating ::before plate label, same prose typography, same doc-link
footer. Different content (chain + convergence note) but same contract. */
.lineage {
margin-top: 48px;
padding: 0;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(28, 42, 58, 0.32);
position: relative;
}
.lineage::before {
content: "MENTOR LINEAGE";
position: absolute; top: -10px; left: 24px;
background: var(--paper-2);
padding: 0 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-pap);
}
.lineage-inner {
padding: 36px 36px 32px;
}
.lineage-chain {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.lineage-name {
font-family: var(--display);
font-size: 1.15rem;
font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 1;
font-style: italic;
color: var(--text-pap);
white-space: nowrap;
}
.lineage-name.now {
color: var(--copper-2);
}
.lineage-arrow {
font-family: var(--mono);
color: var(--copper);
font-size: 18px;
font-style: normal;
}
.lineage-note {
font-family: var(--display);
font-size: 1.15rem;
font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 1;
font-style: italic;
line-height: 1.5;
color: var(--text-pap);
margin-bottom: 20px;
}
.lineage-note strong {
font-style: normal;
color: var(--copper-2);
font-weight: 500;
}
.lineage .doc-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-2);
text-decoration: none;
padding-top: 16px;
border-top: 1px solid var(--rule-pap);
margin-top: 12px;
}
.lineage .doc-link::after { content: "→"; }
.lineage .doc-link:hover { color: var(--copper); }
/* ---------------- FOUNDER'S NOTE ---------------- */
.founder-note {
background: var(--ink);
position: relative;
overflow: hidden;
}
.founder-note::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 1200px;
height: 1200px;
background: radial-gradient(circle, rgba(201,116,79,0.08) 0%, transparent 60%);
pointer-events: none;
}
.founder-inner {
max-width: 880px;
margin: 0 auto;
position: relative;
text-align: center;
}
.founder-quote {
font-family: var(--display);
font-size: clamp(28px, 4.2vw, 56px);
font-variation-settings: "opsz" 72, "SOFT" 40;
line-height: 1.2;
letter-spacing: -0.02em;
margin: 32px 0 24px;
text-align: left;
}
.founder-quote .em { font-style: italic; color: var(--copper-3); font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; }
.founder-attrib {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted-ink);
text-align: left;
margin-bottom: 64px;
}
.silver-bullet {
display: inline-block;
padding: 12px 24px;
border: 1px solid var(--copper);
font-family: var(--display);
font-style: italic;
font-size: 1.4rem;
font-variation-settings: "opsz" 36, "SOFT" 50, "WONK" 1;
color: var(--copper-3);
background: rgba(201, 116, 79, 0.08);
margin: 32px 0;
}
.founder-prose {
text-align: left;
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-ink);
opacity: 0.9;
}
.founder-prose p { margin-bottom: 1.4em; }
.founder-prose p strong { color: var(--copper-3); font-weight: 500; }
.success-quote {
margin-top: 64px;
padding: 48px 32px;
border: 1px solid var(--copper);
background: rgba(201, 116, 79, 0.04);
text-align: center;
position: relative;
}
.success-quote::before, .success-quote::after {
content: "";
position: absolute;
width: 24px; height: 24px;
border: 1px solid var(--copper);
}
.success-quote::before { top: -12px; left: -12px; border-right: none; border-bottom: none; }
.success-quote::after { bottom: -12px; right: -12px; border-left: none; border-top: none; }
.success-quote q {
font-family: var(--display);
font-size: clamp(22px, 2.6vw, 34px);
font-variation-settings: "opsz" 48, "SOFT" 40, "WONK" 1;
font-style: italic;
line-height: 1.35;
color: var(--text-ink);
display: block;
margin-bottom: 16px;
quotes: "" "";
}
.success-quote q::before { content: ""; }
.success-quote q::after { content: ""; }
.success-quote cite {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-3);
font-style: normal;
}
/* ---------------- REVEAL ON SCROLL ---------------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.65s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.75s; opacity: 1; transform: translateY(0); }
/* Hero load animation */
.hero-content > * {
opacity: 0;
transform: translateY(24px);
animation: heroIn 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content > *:nth-child(3) { animation-delay: 0.4s; }
.hero-content > *:nth-child(4) { animation-delay: 0.55s; }
@keyframes heroIn {
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================================
V6 ADDITIONS — deck-derived components
Site Rev 26.08 / Public · v4.1
Patterns lifted from the Cortado leave-behind slide system:
stat tiles · flow bands · metric bars · lineage rail · comparison bars ·
capital stack. Rendered in the Companies navy/paper/copper identity
rather than the Power navy/steel deck palette.
========================================================================= */
/* ---------------- STAT TILES (deck: 4-tile row) ---------------- */
.stat-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--rule-ink);
border: 1px solid var(--rule-ink);
margin: 48px 0;
}
.section-paper .stat-tiles,
.section-paper-deep .stat-tiles { background: var(--rule-pap); border-color: var(--rule-pap); }
.stat-tile { background: var(--ink); padding: 26px 22px; }
.section-paper .stat-tile { background: var(--paper); }
.section-paper-deep .stat-tile { background: var(--paper-2); }
.stat-tile .st-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 12px;
}
.section-paper .stat-tile .st-label,
.section-paper-deep .stat-tile .st-label { color: var(--copper-2); }
.stat-tile .st-value {
font-family: var(--display);
font-size: clamp(22px, 2.4vw, 32px);
font-variation-settings: "opsz" 36, "SOFT" 20;
line-height: 1.1;
color: var(--text-ink);
}
.section-paper .stat-tile .st-value,
.section-paper-deep .stat-tile .st-value { color: var(--text-pap); }
.stat-tile .st-value .st-unit { font-size: 0.55em; opacity: 0.7; letter-spacing: 0.02em; }
.stat-tile .st-note {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--muted-ink);
margin-top: 10px;
line-height: 1.5;
}
.section-paper .stat-tile .st-note,
.section-paper-deep .stat-tile .st-note { color: var(--muted-pap); }
@media (max-width: 900px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-tiles { grid-template-columns: 1fr; } }
/* ---------------- FLOW BAND (deck: node band) ---------------- */
.flow-band {
border: 1px solid var(--rule-ink);
padding: 32px 28px;
margin: 48px 0;
background: rgba(201, 116, 79, 0.04);
}
.section-paper .flow-band,
.section-paper-deep .flow-band { border-color: var(--rule-pap); background: rgba(201, 116, 79, 0.06); }
.flow-band-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 24px;
}
.section-paper .flow-band-label,
.section-paper-deep .flow-band-label { color: var(--copper-2); }
.flow-nodes { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; }
.flow-node { flex: 1 1 0; min-width: 150px; padding-right: 20px; }
.flow-node .fn-name {
font-family: var(--display);
font-size: 17px;
font-variation-settings: "opsz" 24, "SOFT" 20;
color: var(--text-ink);
margin-bottom: 6px;
}
.section-paper .flow-node .fn-name,
.section-paper-deep .flow-node .fn-name { color: var(--text-pap); }
.flow-node .fn-desc {
font-size: 13px;
line-height: 1.5;
color: var(--muted-ink);
}
.section-paper .flow-node .fn-desc,
.section-paper-deep .flow-node .fn-desc { color: var(--muted-pap); }
.flow-node.terminal .fn-name { color: var(--copper-3); }
.section-paper .flow-node.terminal .fn-name,
.section-paper-deep .flow-node.terminal .fn-name { color: var(--copper-2); }
.flow-arrow {
flex: 0 0 auto;
align-self: center;
color: var(--copper);
font-family: var(--mono);
font-size: 14px;
padding: 0 18px 0 0;
opacity: 0.7;
}
@media (max-width: 820px) {
.flow-nodes { flex-direction: column; gap: 18px; }
.flow-arrow { display: none; }
.flow-node { padding-right: 0; border-left: 2px solid var(--rule-ink); padding-left: 16px; }
.section-paper .flow-node, .section-paper-deep .flow-node { border-left-color: var(--rule-pap); }
}
/* ---------------- METRIC BAR (deck: navy metric bar) ---------------- */
.metric-bar {
border-top: 2px solid var(--copper);
padding: 26px 0 0;
margin: 48px 0 0;
}
.metric-bar .mb-big {
font-family: var(--display);
font-size: clamp(20px, 2.6vw, 30px);
font-variation-settings: "opsz" 36, "SOFT" 20;
line-height: 1.25;
color: var(--text-ink);
}
.section-paper .metric-bar .mb-big,
.section-paper-deep .metric-bar .mb-big { color: var(--text-pap); }
.metric-bar .mb-big em { font-style: italic; color: var(--copper-3); }
.section-paper .metric-bar .mb-big em,
.section-paper-deep .metric-bar .mb-big em { color: var(--copper-2); }
.metric-bar .mb-sub {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
line-height: 1.7;
color: var(--muted-ink);
margin-top: 14px;
}
.section-paper .metric-bar .mb-sub,
.section-paper-deep .metric-bar .mb-sub { color: var(--muted-pap); }
/* ---------------- LINEAGE RAIL (six generations) ---------------- */
.lineage-rail {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--rule-pap);
border: 1px solid var(--rule-pap);
margin: 40px 0 0;
}
.lineage-cell { background: var(--paper); padding: 28px 22px; position: relative; }
.lineage-cell.next { background: var(--paper-2); }
.lineage-cell .lc-gen {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-2);
margin-bottom: 14px;
}
.lineage-cell .lc-name {
font-family: var(--display);
font-size: 28px;
font-variation-settings: "opsz" 36, "SOFT" 20;
color: var(--text-pap);
line-height: 1;
margin-bottom: 10px;
}
.lineage-cell.next .lc-name { color: var(--copper-2); font-style: italic; }
.lineage-cell .lc-detail { font-size: 13.5px; line-height: 1.55; color: var(--muted-pap); }
.lineage-cell .lc-status {
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--copper-2);
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--rule-pap);
}
@media (max-width: 900px) { .lineage-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lineage-rail { grid-template-columns: 1fr; } }
/* ---------------- COMPARISON BARS (installed cost / kW) ---------------- */
.compare-block { margin: 40px 0 0; }
.compare-row { margin-bottom: 26px; }
.compare-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 10px; gap: 16px;
}
.compare-name {
font-family: var(--display);
font-size: 19px;
font-variation-settings: "opsz" 24, "SOFT" 20;
color: var(--text-pap);
}
.compare-val {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.08em;
color: var(--copper-2);
white-space: nowrap;
}
.compare-track { height: 12px; background: rgba(28,42,58,0.08); position: relative; }
.compare-fill { position: absolute; top: 0; bottom: 0; }
.compare-fill.ours { background: var(--copper); }
.compare-fill.theirs { background: rgba(28,42,58,0.35); }
.compare-note {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--muted-pap);
margin-top: 8px;
}
/* ---------------- SPLIT / EARNBACK RAIL ---------------- */
.split-rail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--rule-ink);
border: 1px solid var(--rule-ink);
margin: 36px 0 0;
}
.split-cell { background: var(--ink); padding: 30px 26px; }
.split-cell .sc-phase {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 14px;
}
.split-cell .sc-split {
font-family: var(--display);
font-size: clamp(34px, 4.2vw, 52px);
font-variation-settings: "opsz" 72, "SOFT" 20;
color: var(--text-ink);
line-height: 1;
}
.split-cell .sc-split span { font-size: 0.42em; opacity: 0.6; letter-spacing: 0.04em; }
.split-cell .sc-desc { font-size: 14px; line-height: 1.6; color: var(--muted-ink); margin-top: 16px; }
@media (max-width: 720px) { .split-rail { grid-template-columns: 1fr; } }
/* ---------------- CAPITAL / DISCLOSURE NOTE ---------------- */
.disclosure {
border-left: 2px solid var(--copper);
padding: 18px 0 18px 22px;
margin: 56px 0 0;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
line-height: 1.85;
color: var(--muted-ink);
}
.section-paper .disclosure,
.section-paper-deep .disclosure { color: var(--muted-pap); }
/* ---------------- ECONOMICS SECTION SHELL ---------------- */
.econ-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
}
@media (max-width: 980px) { .econ-grid { grid-template-columns: 1fr; gap: 48px; } }
.unit-card {
border: 1px solid var(--rule-pap);
padding: 34px 30px;
background: var(--paper);
}
.unit-card h4 {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--copper-2);
margin-bottom: 22px;
font-weight: 500;
}
.unit-line {
display: flex; justify-content: space-between; align-items: baseline;
padding: 13px 0;
border-bottom: 1px solid var(--rule-pap);
gap: 20px;
}
.unit-line:last-of-type { border-bottom: 0; }
.unit-line .ul-key { font-size: 14.5px; color: var(--muted-pap); }
.unit-line .ul-val {
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.04em;
color: var(--text-pap);
text-align: right;
white-space: nowrap;
}
.unit-line.emph .ul-key { color: var(--text-pap); font-weight: 500; }
.unit-line.emph .ul-val { color: var(--copper-2); font-size: 15px; }
/* ---------------- ENTITY MAP (5-entity structure) ---------------- */
.entity-map { margin-top: 8px; }
.entity-wrapper-note {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--copper-2);
padding: 10px 0 0;
line-height: 1.7;
}
.entity-parent .sub {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--muted-pap);
margin-top: 6px;
text-transform: uppercase;
}
/* ---------------- ASSET SLOT (media placeholders) ---------------- */
.asset-slot {
border: 1px dashed var(--rule-pap);
aspect-ratio: 16 / 9;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 8px;
background: rgba(28,42,58,0.03);
margin: 40px 0;
}
.asset-slot .as-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-2);
}
.asset-slot .as-desc { font-size: 13px; color: var(--muted-pap); max-width: 420px; text-align: center; }
/* ---------------- FIGURE / DIAGRAM FRAME ---------------- */
.figure-frame { margin: 56px 0 0; }
.figure-frame svg { width: 100%; height: auto; display: block; }
.figure-cap {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.1em;
line-height: 1.7;
color: var(--muted-ink);
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--rule-ink);
}
.section-paper .figure-cap,
.section-paper-deep .figure-cap { color: var(--muted-pap); border-top-color: var(--rule-pap); }
/* ---------------- FOOTER DISCLAIMER ---------------- */
.footer-disclaimer {
border-top: 1px solid var(--rule-ink);
margin-top: 56px;
padding-top: 26px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.05em;
line-height: 1.9;
color: rgba(230, 220, 198, 0.38);
max-width: 920px;
}
/* ---------------- FLOW BAND — output branching ---------------- */
.flow-node .fn-tag {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-2);
margin-bottom: 8px;
}
.flow-node.upside .fn-tag { color: var(--muted-pap); }
.flow-node.upside .fn-name { opacity: 0.78; }
.flow-plus {
flex: 0 0 auto;
align-self: center;
font-family: var(--mono);
font-size: 16px;
color: var(--copper);
opacity: 0.5;
padding: 0 18px 0 0;
}
@media (max-width: 820px) { .flow-plus { display: none; } }
/* ============================================================================
V6.1 — DISPATCH, CAREER-ON-PAPER, RACING, STORY IMAGERY
========================================================================= */
/* ---------------- CAREER ARC on light sections ---------------- */
.section-paper .career-arc,
.section-paper-deep .career-arc { border-top-color: var(--rule-pap); }
.section-paper .career-row,
.section-paper-deep .career-row { border-bottom-color: var(--rule-pap); }
.section-paper .career-period,
.section-paper-deep .career-period { color: var(--copper-2); }
.section-paper .career-role,
.section-paper-deep .career-role { color: var(--text-pap); }
.section-paper .career-detail,
.section-paper-deep .career-detail { color: var(--muted-pap); }
.career-role .career-org {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--copper-2);
margin-top: 5px;
}
/* ---------------- STORY IMAGE STRIP ---------------- */
.story-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 48px 0 0;
}
.story-strip.two { grid-template-columns: 1fr 1fr; }
.story-fig { margin: 0; }
.story-fig img {
width: 100%; height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border: 1px solid var(--rule-pap);
filter: saturate(0.92);
}
.story-fig.tall img { aspect-ratio: 3 / 4; }
.story-fig.wide img { aspect-ratio: 21 / 9; }
.story-fig figcaption {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
line-height: 1.7;
text-transform: uppercase;
color: var(--muted-pap);
margin-top: 12px;
}
.story-fig figcaption b { color: var(--copper-2); font-weight: 500; }
section:not(.section-paper):not(.section-paper-deep) .story-fig img { border-color: var(--rule-ink); }
section:not(.section-paper):not(.section-paper-deep) .story-fig figcaption { color: var(--muted-ink); }
section:not(.section-paper):not(.section-paper-deep) .story-fig figcaption b { color: var(--copper-3); }
@media (max-width: 720px) {
.story-strip, .story-strip.two { grid-template-columns: 1fr; }
}
/* ---------------- DISPATCH ---------------- */
.dispatch-grid {
display: grid;
grid-template-columns: 1fr 460px;
gap: 64px;
align-items: start;
margin-top: 48px;
}
@media (max-width: 980px) { .dispatch-grid { grid-template-columns: 1fr; gap: 40px; } }
.dispatch-lead { border: 1px solid var(--rule-pap); padding: 32px 30px; background: var(--paper); }
.dispatch-flag {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-2);
border: 1px solid var(--copper);
padding: 5px 11px;
margin-bottom: 22px;
}
.dispatch-flag::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--copper); flex: 0 0 auto;
animation: dispatch-pulse 2.4s ease-in-out infinite;
}
@keyframes dispatch-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .dispatch-flag::before { animation: none; } }
.dispatch-lead h3 {
font-size: clamp(28px, 3.4vw, 42px);
color: var(--text-pap);
line-height: 1.08;
margin-bottom: 8px;
}
.dispatch-lead h3 em { font-style: italic; color: var(--copper-2); }
.dispatch-when {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--muted-pap);
margin: 16px 0 22px;
}
.dispatch-lead p { color: var(--muted-pap); line-height: 1.7; font-size: 15.5px; }
.runsheet { margin-top: 26px; border-top: 1px solid var(--rule-pap); }
.runsheet-row {
display: grid;
grid-template-columns: 92px 1fr;
gap: 20px;
padding: 15px 0;
border-bottom: 1px solid var(--rule-pap);
align-items: baseline;
}
.runsheet-time {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--copper-2);
}
.runsheet-show { font-family: var(--display); font-size: 1.05rem; font-variation-settings: "opsz" 24, "SOFT" 40; color: var(--text-pap); }
.runsheet-note { font-size: 13px; color: var(--muted-pap); margin-top: 4px; line-height: 1.5; }
@media (max-width: 520px) { .runsheet-row { grid-template-columns: 1fr; gap: 4px; } }
.dispatch-video { border: 1px solid var(--rule-pap); }
.dispatch-video video { width: 100%; height: auto; display: block; background: var(--ink); }
.dispatch-video figcaption {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.11em;
line-height: 1.7;
color: var(--muted-pap);
padding: 14px 16px;
border-top: 1px solid var(--rule-pap);
}
/* ---------------- RACING ---------------- */
.racing-hero { margin: 48px 0 0; }
.racing-hero img {
width: 100%; display: block;
aspect-ratio: 21 / 9; object-fit: cover;
border: 1px solid var(--rule-ink);
}
.racing-cars {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--rule-ink);
border: 1px solid var(--rule-ink);
margin-top: 48px;
}
.racing-car { background: var(--ink); padding: 32px 28px; }
.racing-car .rc-series {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 14px;
}
.racing-car .rc-name {
font-family: var(--display);
font-size: clamp(24px, 2.8vw, 34px);
font-variation-settings: "opsz" 36, "SOFT" 20;
color: var(--text-ink);
line-height: 1.1;
margin-bottom: 6px;
}
.racing-car .rc-name em { font-style: italic; color: var(--copper-3); }
.racing-car .rc-people {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.1em;
color: var(--muted-ink);
margin-bottom: 18px;
}
.racing-car p { font-size: 14.5px; line-height: 1.65; color: var(--muted-ink); }
.rc-specs {
display: flex; flex-wrap: wrap; gap: 26px;
margin-top: 22px; padding-top: 18px;
border-top: 1px solid var(--rule-ink);
}
.rc-spec .v {
font-family: var(--display);
font-size: 22px;
font-variation-settings: "opsz" 36, "SOFT" 20;
color: var(--copper-3);
line-height: 1;
}
.rc-spec .k {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-ink);
margin-top: 7px;
}
@media (max-width: 820px) { .racing-cars { grid-template-columns: 1fr; } }
/* keep mastheads/tops visible when a tall source is cropped to 4:3 */
.story-fig img.fit-top { object-position: top center; }
/* ---------------- FIELD IMAGERY (5:4 source set) ---------------- */
.story-fig.field img { aspect-ratio: 5 / 4; }
.story-fig.hero-wide img { aspect-ratio: 16 / 9; }
.field-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 48px 0 0;
}
@media (max-width: 720px) { .field-pair { grid-template-columns: 1fr; } }
/* five-cell lineage rail (MK3 added) */
.lineage-rail.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .lineage-rail.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .lineage-rail.five { grid-template-columns: 1fr; } }
/* ============================================================================
V6.2 — LAUNCH · honesty block · hand-off rail · tagline close
========================================================================= */
/* ---- Honesty block (thread element T6) ---- */
.honesty-block {
border-left: 2px solid var(--copper);
padding: 30px 0 30px 30px;
margin: 64px 0 0;
max-width: 900px;
}
.honesty-block .hb-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--copper-3);
margin-bottom: 18px;
}
.section-paper .honesty-block .hb-label,
.section-paper-deep .honesty-block .hb-label { color: var(--copper-2); }
.honesty-block h3 {
font-size: clamp(26px, 3.2vw, 40px);
color: var(--text-ink);
line-height: 1.15;
margin-bottom: 22px;
}
.honesty-block h3 em { font-style: italic; color: var(--copper-3); }
.section-paper .honesty-block h3,
.section-paper-deep .honesty-block h3 { color: var(--text-pap); }
.section-paper .honesty-block h3 em,
.section-paper-deep .honesty-block h3 em { color: var(--copper-2); }
.hb-rows { border-top: 1px solid var(--rule-ink); }
.section-paper .hb-rows, .section-paper-deep .hb-rows { border-top-color: var(--rule-pap); }
.hb-row {
display: grid; grid-template-columns: 190px 1fr; gap: 28px;
padding: 18px 0; border-bottom: 1px solid var(--rule-ink);
align-items: start;
}
.section-paper .hb-row, .section-paper-deep .hb-row { border-bottom-color: var(--rule-pap); }
.hb-who {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--copper-3); padding-top: 3px;
}
.section-paper .hb-who, .section-paper-deep .hb-who { color: var(--copper-2); }
.hb-what { font-size: 15px; line-height: 1.7; color: var(--muted-ink); }
.section-paper .hb-what, .section-paper-deep .hb-what { color: var(--muted-pap); }
.hb-what strong { color: var(--text-ink); font-weight: 500; }
.section-paper .hb-what strong, .section-paper-deep .hb-what strong { color: var(--text-pap); }
@media (max-width: 700px) { .hb-row { grid-template-columns: 1fr; gap: 6px; } }
/* ---- Hand-off rail (thread element T7) ---- */
.handoff {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; background: var(--rule-ink);
border: 1px solid var(--rule-ink); margin-top: 48px;
}
.handoff-cell { background: var(--ink); padding: 26px 22px; text-decoration: none; display: block; transition: background .3s; }
.handoff-cell:hover { background: var(--ink-2); }
.handoff-cell .ho-role {
font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--copper-3); margin-bottom: 12px;
}
.handoff-cell .ho-name {
font-family: var(--display); font-size: 21px;
font-variation-settings: "opsz" 24, "SOFT" 20;
color: var(--text-ink); line-height: 1.15; margin-bottom: 10px;
}
.handoff-cell .ho-why { font-size: 13.5px; line-height: 1.6; color: var(--muted-ink); }
.handoff-cell .ho-dom {
font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
color: var(--copper-3); margin-top: 16px; padding-top: 12px;
border-top: 1px solid var(--rule-ink);
}
@media (max-width: 940px) { .handoff { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .handoff { grid-template-columns: 1fr; } }
/* ---- Tagline close (thread element T5) ---- */
.tagline-section { padding: 120px 0; background: var(--ink-2); text-align: center; }
.tagline-inner { max-width: 820px; margin: 0 auto; padding: 0 32px; }
.tagline-inner .tg-line {
font-family: var(--display);
font-size: clamp(38px, 6vw, 82px);
font-variation-settings: "opsz" 96, "SOFT" 20;
line-height: 1.06; color: var(--text-ink);
}
.tagline-inner .tg-line em { font-style: italic; color: var(--copper-3); }
.tagline-inner .tg-sub {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--muted-ink); margin-top: 30px;
}
/* ============================================================================
FORMATTING PASS — native aspect ratios
Forcing every photo into one frame was cropping 18–58% of the source.
Images now display at their own proportions; grids align to the top so
rows sit cleanly with mixed portrait/landscape. Deliberate wide bands keep
their crop via .wide / .hero-wide / .field-band.
========================================================================= */
.pfig img, .story-fig img, .field-fig img, .dispatch-fig img, .inventor img {
aspect-ratio: auto;
height: auto;
object-fit: fill;
}
.fig-strip, .story-strip, .field-pair, .slot-pair, .dispatch-media,
.racing-cars + .story-strip, .lineage-three {
align-items: start;
}
/* intentional cinematic bands keep a fixed frame */
.pfig.wide img, .story-fig.wide img, .field-fig.hero-wide img,
.racing-hero img, .field-band img {
aspect-ratio: 21 / 9;
object-fit: cover;
}
/* Near-square sources were losing 36–47% inside 21:9 bands. Bands now sit at
16:9, and .field-band follows its source. */
.pfig.wide img, .story-fig.wide img, .field-fig.hero-wide img, .racing-hero img {
aspect-ratio: 16 / 9;
}
.field-band img { aspect-ratio: auto; object-fit: fill; }
/* Final: no forced frames anywhere. Every photo shows at its own proportions.
Sources range from 3.17:1 panoramic to 0.75:1 portrait — no single frame
serves them, and cropping to force one was the original complaint. */
.pfig img, .story-fig img, .field-fig img, .dispatch-fig img, .inventor img,
.pfig.wide img, .story-fig.wide img, .field-fig.hero-wide img,
.racing-hero img, .field-band img {
aspect-ratio: auto !important;
object-fit: fill !important;
height: auto !important;
}
/* ============================================================================
REVEAL — FAILSAFE
Content is visible by default. The fade-in only applies once JS has
confirmed it can drive it (html.js-reveal). If the script is missing,
blocked, or fails, the text still shows.
Previous bug: threshold 0.12 meant any block taller than the viewport
could never reach 12% visibility and stayed at opacity 0 forever.
========================================================================= */
.reveal, .reveal-stagger { opacity: 1; transform: none; }
html.js-reveal .reveal:not(.in),
html.js-reveal .reveal-stagger:not(.in) {
opacity: 0;
transform: translateY(16px);
}
html.js-reveal .reveal, html.js-reveal .reveal-stagger {
transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
html.js-reveal .reveal:not(.in),
html.js-reveal .reveal-stagger:not(.in) { opacity: 1; transform: none; }
}
/* ============================================================================
GLOBAL FOOTER — one founder, a family of ventures
Identical markup on all five properties. Each site supplies its own
--ecf-ground / --ecf-accent / --ecf-text below; everything else is shared.
========================================================================= */
.ec-footer {
background: var(--ecf-ground, #0a1828);
color: var(--ecf-text, #e6dcc6);
padding: 88px 0 40px;
margin-top: 0;
border-top: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
position: relative; z-index: 2;
}
.ec-inner {
max-width: 1180px; margin: 0 auto;
padding: 0 clamp(20px, 4vw, 56px);
text-align: center;
}
.ec-mark { display: inline-block; margin-bottom: 30px; }
.ec-mark img { width: 300px; max-width: 78vw; height: auto; display: block; }
.ec-line {
font-family: var(--ecf-serif, 'Fraunces', Georgia, serif);
font-size: clamp(30px, 4.4vw, 56px);
line-height: 1.08; margin: 0 0 26px;
color: var(--ecf-text, #e6dcc6); font-weight: 500;
}
.ec-line em { font-style: italic; color: var(--ecf-accent, #c9744f); }
.ec-lede {
max-width: 780px; margin: 0 auto;
font-size: 1.02rem; line-height: 1.7;
color: var(--ecf-muted, rgba(230,220,198,.72));
}
.ec-call {
font-family: var(--ecf-serif, 'Fraunces', Georgia, serif);
font-size: clamp(17px, 2.1vw, 23px); font-style: italic;
color: var(--ecf-accent, #c9744f);
margin: 26px auto 0; max-width: 720px;
}
.ec-ventures {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 18px; margin: 46px 0 0; text-align: left;
}
.ec-venture {
display: block; text-decoration: none;
background: var(--ecf-card, rgba(255,255,255,.045));
border: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
border-top: 2px solid var(--ecf-accent, #c9744f);
padding: 24px 22px 20px;
transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.ec-venture:hover { background: var(--ecf-card-hi, rgba(255,255,255,.08)); transform: translateY(-2px); }
.ec-venture img {
width: 100%; max-width: 210px; height: auto; display: block;
margin-bottom: 18px;
background: #f4ebd9; padding: 9px 11px; border-radius: 2px;
}
.ec-venture p {
font-size: .88rem; line-height: 1.65;
color: var(--ecf-muted, rgba(230,220,198,.72)); margin: 0;
}
.ec-venture p b { color: var(--ecf-text, #e6dcc6); font-weight: 500; }
.ec-dom {
display: block; margin-top: 16px; padding-top: 13px;
border-top: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
font-family: var(--ecf-mono, 'JetBrains Mono', ui-monospace, monospace);
font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ecf-accent, #c9744f);
}
.ec-net {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
margin: 46px 0 0; padding-top: 32px;
border-top: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
}
.ec-net a {
font-family: var(--ecf-mono, 'JetBrains Mono', ui-monospace, monospace);
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ecf-muted, rgba(230,220,198,.72)); text-decoration: none;
padding: 9px 15px; border: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
transition: color .2s ease, border-color .2s ease;
}
.ec-net a:hover { color: var(--ecf-accent, #c9744f); border-color: var(--ecf-accent, #c9744f); }
.ec-net a[aria-current="page"] {
color: var(--ecf-accent, #c9744f);
border-color: var(--ecf-accent, #c9744f);
background: var(--ecf-card, rgba(255,255,255,.045));
}
.ec-base {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
margin-top: 34px; padding-top: 22px;
border-top: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
font-family: var(--ecf-mono, 'JetBrains Mono', ui-monospace, monospace);
font-size: 9.5px; letter-spacing: .1em;
color: var(--ecf-faint, rgba(230,220,198,.42));
text-align: left;
}
@media (max-width: 860px) { .ec-ventures { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
.ec-footer { padding-top: 62px; }
.ec-base { justify-content: center; text-align: center; }
}
/* footer theme for this property */
.ec-footer {
--ecf-ground: #0a1828;
--ecf-accent: #c9744f;
--ecf-text: #e6dcc6;
--ecf-muted: rgba(244,235,217,.72);
--ecf-faint: rgba(244,235,217,.42);
--ecf-rule: rgba(244,235,217,.14);
--ecf-card: rgba(244,235,217,.05);
--ecf-card-hi:rgba(244,235,217,.09);
--ecf-serif: var(--serif, 'Fraunces', Georgia, serif);
--ecf-mono: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
}
/* Origin: the 1987 objects, photographed together thirty-five years later. */
.origin-figure { margin: 0 0 40px; max-width: 520px; }
.origin-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--rule-ink, rgba(20,28,40,.14)); }
.origin-figure figcaption {
margin-top: 12px; font-size: .84rem; line-height: 1.65; color: var(--muted-ink, #5c6470);
}
.origin-figure figcaption b { color: var(--ink, #141c28); font-weight: 600; }
@media (max-width: 900px) { .origin-figure { max-width: 100%; } }
/* ============================================================================
HUB LAYOUT — Companies carries the consolidated vision and links out.
Each division gets a synopsis card, never a deep dive.
========================================================================= */
.ent-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.ent{
display:flex; flex-direction:column; text-decoration:none;
background:var(--paper,#fbf8f1); border:1px solid rgba(10,24,40,.12);
border-top:3px solid var(--copper,#c9744f); padding:26px 24px 22px;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ent:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(10,24,40,.10); }
.ent-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ent-top img{ width:150px; height:auto; display:block; }
.ent-tag{
font-family:var(--mono,monospace); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--copper,#c9744f); border:1px solid rgba(201,116,79,.4); padding:4px 8px; white-space:nowrap;
}
.ent h3{ font-family:var(--serif,Georgia,serif); font-size:1.6rem; line-height:1.1; margin:0 0 10px; color:var(--ink,#0a1828); }
.ent p{ font-size:.9rem; line-height:1.7; color:var(--ink-soft,#3d4a58); margin:0 0 18px; flex:1; }
.ent-facts{ margin:0 0 16px; padding-top:14px; border-top:1px solid rgba(10,24,40,.1); }
.ent-facts > div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
.ent-facts dt{ font-family:var(--mono,monospace); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute,#7b8794); }
.ent-facts dd{ font-family:var(--mono,monospace); font-size:9.5px; color:var(--ink,#0a1828); margin:0; text-align:right; }
.ent-go{ font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--copper,#c9744f); }
.ent-racing{
display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
margin-top:20px; padding:24px 26px; text-decoration:none;
background:#0f1a2b; border:1px solid rgba(255,255,255,.12);
transition:transform .25s ease, border-color .25s ease;
}
.ent-racing:hover{ transform:translateY(-2px); border-color:var(--copper,#c9744f); }
.ent-racing .ent-tag{ border-color:rgba(255,255,255,.25); color:#e8c9b6; }
.ent-racing h3{ color:#f6f1e6; margin:10px 0 6px; }
.ent-racing p{ color:rgba(246,241,230,.72); margin:0; max-width:56ch; }
.arc{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(10,24,40,.12);
border:1px solid rgba(10,24,40,.12); margin-top:30px; }
.arc > div{ background:var(--paper,#fbf8f1); padding:20px 18px; }
.arc b{ display:block; font-family:var(--serif,Georgia,serif); font-size:1.45rem; color:var(--copper,#c9744f); line-height:1; }
.arc span{ display:block; margin-top:9px; font-size:.86rem; line-height:1.65; color:var(--ink-soft,#3d4a58); }
.origin-more{ margin-top:24px; font-size:.92rem; color:var(--ink-soft,#3d4a58); }
.lead-card{ display:grid; grid-template-columns:1fr 340px; gap:44px; margin-top:32px; align-items:start; }
.lead-role{ font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--copper,#c9744f); }
.lead-card h3{ font-family:var(--serif,Georgia,serif); font-size:2.1rem; margin:10px 0 14px; color:var(--ink,#0a1828); }
.lead-card p{ font-size:1rem; line-height:1.72; color:var(--ink-soft,#3d4a58); margin:0 0 18px; }
.lead-go{ font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--copper,#c9744f); text-decoration:none; border-bottom:1px solid rgba(201,116,79,.45); padding-bottom:3px; }
.lead-facts > div{ padding:12px 0; border-bottom:1px solid rgba(10,24,40,.1); }
.lead-facts dt{ font-family:var(--mono,monospace); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute,#7b8794); }
.lead-facts dd{ margin:6px 0 0; font-size:.92rem; line-height:1.6; color:var(--ink,#0a1828); }
.lead-note{ margin-top:26px; font-size:.9rem; color:var(--mute,#7b8794); }
@media (max-width:900px){
.ent-grid{ grid-template-columns:1fr; }
.arc{ grid-template-columns:1fr 1fr; }
.lead-card{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:560px){ .arc{ grid-template-columns:1fr; } }
/* Division cards lead with a render. These are concept renders, labelled as such. */
.ent{ padding:0; overflow:hidden; }
.ent-shot{ margin:0; position:relative; }
.ent-shot img{ width:100%; height:auto; display:block; aspect-ratio:16/11; object-fit:cover; }
.ent-shot::after{
content:"CONCEPT RENDER"; position:absolute; left:12px; bottom:12px;
font-family:var(--mono,monospace); font-size:7.5px; letter-spacing:.16em;
color:rgba(255,255,255,.9); background:rgba(10,24,40,.65);
padding:4px 8px; border-radius:2px;
}
.ent-top, .ent h3, .ent p, .ent-facts, .ent-go{ margin-left:24px; margin-right:24px; }
.ent-top{ margin-top:22px; }
.ent-go{ display:block; margin-bottom:22px; }
.ent-facts{ margin-bottom:16px; }
/* ── Where-to-go rail: fills the column under the entity map ───────────── */
.go-rail{ display:grid; gap:14px; margin-top:28px; }
.go-card{
display:block; text-decoration:none; padding:20px 22px;
border:1px solid rgba(10,24,40,.14); border-left:3px solid var(--copper-2,#c9744f);
background:rgba(255,255,255,.5);
transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.go-card:hover{ transform:translateX(3px); background:#fff; border-left-color:var(--ink,#0a1828); }
.go-k{ display:block; font-family:var(--mono,monospace); font-size:9px; letter-spacing:.2em;
text-transform:uppercase; color:var(--copper-2,#c9744f); }
.go-t{ display:block; font-family:var(--serif,Georgia,serif); font-size:1.5rem; margin:8px 0 8px; color:var(--text-pap,#0a1828); }
.go-d{ display:block; font-size:.9rem; line-height:1.6; color:var(--muted-pap,#5c6773); }
.go-a{ display:block; margin-top:14px; font-family:var(--mono,monospace); font-size:9px;
letter-spacing:.14em; text-transform:uppercase; color:var(--copper-2,#c9744f); }
/* ── Racing band ───────────────────────────────────────────────────────── */
.sec-race{ background:#0b1524; padding:0; }
.race-band{
display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
text-decoration:none; border:1px solid rgba(255,255,255,.12); overflow:hidden;
transition:border-color .3s ease;
}
.race-band:hover{ border-color:var(--copper-2,#c9744f); }
.rb-shot{ margin:0; position:relative; min-height:340px; }
.rb-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.rb-shot::after{ content:""; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(11,21,36,0) 55%, rgba(11,21,36,.85) 100%); }
.rb-text{ padding:46px 44px; display:flex; flex-direction:column; justify-content:center; }
.rb-k{ font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.22em;
text-transform:uppercase; color:var(--copper-2,#c9744f); }
.race-band h2{ font-family:var(--serif,Georgia,serif); font-size:clamp(28px,3.4vw,46px);
line-height:1.05; color:#f6f1e6; margin:14px 0 16px; }
.race-band h2 em{ display:block; font-style:italic; color:var(--copper-2,#c9744f);
margin-left:clamp(16px,2.4vw,48px); }
.race-band p{ font-size:.96rem; line-height:1.7; color:rgba(246,241,230,.75); margin:0 0 24px; max-width:52ch; }
.rb-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); margin-bottom:24px; }
.rb-stats > div{ background:#0b1524; padding:14px 10px; text-align:center; }
.rb-stats b{ display:block; font-family:var(--serif,Georgia,serif); font-size:1.5rem;
line-height:1; color:var(--copper-2,#c9744f); }
.rb-stats span{ display:block; margin-top:7px; font-family:var(--mono,monospace); font-size:8px;
letter-spacing:.1em; text-transform:uppercase; color:rgba(246,241,230,.5); }
.rb-go{ font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--copper-2,#c9744f); }
@media (max-width:900px){
.race-band{ grid-template-columns:1fr; }
.rb-shot{ min-height:230px; }
.rb-shot::after{ background:linear-gradient(180deg, rgba(11,21,36,0) 50%, rgba(11,21,36,.85) 100%); }
.rb-text{ padding:32px 26px; }
}
/* The rail is the third child of a two-column grid — pin it under the map. */
.structure-grid > .go-rail{ grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; }
.structure-grid > .entity-stack{ align-self: start; }
@media (max-width: 900px){
.structure-grid > .go-rail{ grid-column: 1; grid-row: auto; }
}
/* Left column spans both rows; the right column packs map-then-rail from the top. */
@media (min-width: 901px){
.structure-grid{ grid-template-rows: min-content 1fr; row-gap: 20px; }
.structure-grid > .about-text{ grid-column: 1; grid-row: 1 / span 2; }
.structure-grid > .entity-stack{ grid-column: 2; grid-row: 1; }
.structure-grid > .go-rail{ grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; }
}
/* ── Section headers: give the number and label real presence ─────────── */
.sec-num, .eyebrow{
display:inline-flex; align-items:center; gap:12px;
font-family:var(--mono,monospace); font-size:11px; font-weight:500;
letter-spacing:.26em; text-transform:uppercase;
color:var(--copper-2,#c9744f);
padding:0 0 12px; margin-bottom:14px;
border-bottom:2px solid var(--copper-2,#c9744f);
}
.sec-num::before, .eyebrow::before{
content:""; width:26px; height:2px; background:var(--copper-2,#c9744f); flex:none;
}
.section-paper .sec-num, .section-paper .eyebrow{ color:#a8521f; border-bottom-color:#a8521f; }
.section-paper .sec-num::before, .section-paper .eyebrow::before{ background:#a8521f; }
/* ── Engine lineage rail — the flash under "How we got here" ──────────── */
.gen-rail{ margin-top:38px; padding-top:28px; border-top:1px solid rgba(10,24,40,.14); }
.gen-head{
font-family:var(--mono,monospace); font-size:10px; letter-spacing:.2em;
text-transform:uppercase; color:var(--copper-2,#c9744f); margin-bottom:20px;
}
.gen-line{ list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.gen-line::before{ content:""; position:absolute; left:6%; right:6%; top:11px;
height:2px; background:linear-gradient(90deg,
rgba(201,116,79,.25), rgba(201,116,79,.85)); }
.gen-line li{ position:relative; padding-top:34px; text-align:center; }
.gen-line li::before{
content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%);
width:16px; height:16px; border-radius:50%;
background:var(--paper,#fbf8f1); border:2px solid rgba(201,116,79,.55);
}
.gen-line li.next::before{ background:var(--copper-2,#c9744f); border-color:var(--copper-2,#c9744f);
box-shadow:0 0 0 5px rgba(201,116,79,.18); }
.gen-line b{ display:block; font-family:var(--serif,Georgia,serif); font-size:1.35rem;
line-height:1; color:var(--text-pap,#0a1828); }
.gen-line span{ display:block; margin-top:7px; font-size:.8rem; line-height:1.5;
color:var(--muted-pap,#5c6773); padding:0 8px; }
.gen-line i{ display:block; margin-top:8px; font-style:normal;
font-family:var(--mono,monospace); font-size:9px; letter-spacing:.14em;
text-transform:uppercase; color:var(--copper-2,#c9744f); }
.gen-note{ margin-top:22px; font-size:.9rem; color:var(--muted-pap,#5c6773); }
@media (max-width:780px){
.gen-line{ grid-template-columns:1fr; gap:18px; }
.gen-line::before{ left:11px; right:auto; top:6px; bottom:6px; width:2px; height:auto;
background:linear-gradient(180deg, rgba(201,116,79,.25), rgba(201,116,79,.85)); }
.gen-line li{ padding-top:0; padding-left:38px; text-align:left; }
.gen-line li::before{ left:3px; transform:none; top:2px; }
.gen-line span{ padding:0; }
}
/* ── Opener: three fixed lines, staggered left → centre → right ───────── */
.hero h1.hero-title{
display:block; margin:28px 0 0;
font-size:clamp(48px, 10.4vw, 158px);
line-height:.86; letter-spacing:-.045em;
}
.hero-title > span{ display:block; }
.ht-1{ text-align:left; }
.ht-2{ text-align:left; margin-left:12%; }
.ht-3{ text-align:right; }
@media (max-width:760px){
.hero h1.hero-title{ font-size:clamp(42px, 13vw, 78px); line-height:.92; }
.ht-2{ margin-left:8%; }
}
/* ── The paragraph sits directly under the opener, on the same measure ── */
.hero .hero-sub{
max-width:58ch; margin:34px 0 0;
padding-top:26px; border-top:1px solid var(--rule-ink);
font-size:clamp(17px,1.45vw,21px); line-height:1.6; opacity:.88;
}
/* ── Parent / subsidiaries: an even four-across, no orphan ────────────── */
.hero .hero-meta{
display:grid; grid-template-columns:repeat(4,1fr);
gap:0; flex-wrap:nowrap;
margin-top:52px; padding-top:0;
border-top:1px solid var(--rule-ink);
}
.hero .hero-meta-item{
padding:22px 24px 4px 0;
border-right:1px solid var(--rule-ink);
}
.hero .hero-meta-item:last-child{ border-right:0; }
.hero .hero-meta-item:not(:first-child){ padding-left:24px; }
.hero .hero-meta-item .label{ display:block; margin-bottom:10px; white-space:nowrap; }
.hero .hero-meta-item .value{ font-size:clamp(15px,1.15vw,19px); line-height:1.25; }
@media (max-width:1000px){
.hero .hero-meta{ grid-template-columns:repeat(2,1fr); }
.hero .hero-meta-item:nth-child(2){ border-right:0; }
.hero .hero-meta-item:nth-child(3),
.hero .hero-meta-item:nth-child(4){ border-top:1px solid var(--rule-ink); }
.hero .hero-meta-item:nth-child(odd){ padding-left:0; }
}
@media (max-width:560px){
.hero .hero-meta{ grid-template-columns:1fr; }
.hero .hero-meta-item{ border-right:0; padding-left:0 !important;
border-top:1px solid var(--rule-ink); }
.hero .hero-meta-item:first-child{ border-top:0; }
}
/* ── Rail additions: partners and social ─────────────────────────────── */
.go-list{ list-style:none; margin:14px 0 0; padding:0; }
.go-list li{
display:flex; justify-content:space-between; align-items:baseline; gap:12px;
padding:6px 0; border-bottom:1px solid rgba(10,24,40,.08);
font-size:.86rem; color:var(--text-pap,#0a1828);
}
.go-list li:last-child{ border-bottom:0; }
.go-list i{
font-style:normal; font-family:var(--mono,monospace); font-size:8.5px;
letter-spacing:.1em; text-transform:uppercase; color:var(--muted-pap,#5c6773);
white-space:nowrap;
}
.go-card.go-social{ cursor:default; }
.go-card.go-social:hover{ transform:none; }
.go-social-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.go-social-links a{
display:inline-flex; align-items:center; gap:9px;
padding:9px 14px; text-decoration:none;
border:1px solid rgba(10,24,40,.16);
font-family:var(--mono,monospace); font-size:10px; letter-spacing:.14em;
text-transform:uppercase; color:var(--text-pap,#0a1828);
transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.go-social-links a:hover{ border-color:var(--copper-2,#c9744f); color:var(--copper-2,#c9744f); background:#fff; }
.go-social-links svg{ width:14px; height:14px; fill:currentColor; flex:none; }
.go-card.go-social .go-a{ opacity:.55; }
/* ── Opener alignment: the rule spans the headline measure, the paragraph
keeps a readable one. Left edges lock; the rule closes the right. ── */
.hero .hero-rule{
width:100%; height:1px; background:var(--rule-ink);
margin:38px 0 0;
}
.hero .hero-sub{
max-width:62ch;
margin:26px 0 0;
padding-top:0;
border-top:0;
}
/* ── Founder send-off: the route to enthusiastcompany.com, unmissable ── */
.founder-out{
display:block; margin:44px 0 8px; padding:30px 34px;
text-decoration:none; position:relative;
background:rgba(201,116,79,.10);
border:1px solid rgba(201,116,79,.42);
border-left:4px solid var(--copper-2,#c9744f);
transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.founder-out:hover{ background:rgba(201,116,79,.18); border-color:var(--copper-2,#c9744f); transform:translateX(4px); }
.fo-k{ display:block; font-family:var(--mono,monospace); font-size:10px; letter-spacing:.24em;
text-transform:uppercase; color:var(--copper-2,#c9744f); }
.fo-t{ display:block; margin:12px 0 10px; font-family:var(--serif,Georgia,serif);
font-size:clamp(26px,3.2vw,42px); line-height:1.05; color:#f6f1e6; }
.fo-d{ display:block; font-size:.98rem; line-height:1.65; color:rgba(246,241,230,.78); max-width:62ch; }
@media (max-width:620px){ .founder-out{ padding:24px 22px; } }
/* ── Opener stagger: a true left / centre / right, not a percentage indent.
The middle line was offset by an arbitrary margin, so its optical centre
drifted with the word width and never matched the measure. ────────── */
.hero .ht-1{ text-align:left; margin-left:0; }
.hero .ht-2{ text-align:center; margin-left:0; }
.hero .ht-3{ text-align:right; margin-left:0; }
@media (max-width:760px){
.hero .ht-2{ text-align:center; margin-left:0; }
}
/* ── Etymology strip: stop it collapsing into a squeezed column on phones ── */
@media (max-width:620px){
.etymology{
display:block; padding:12px 14px; line-height:1.75;
font-size:10px; letter-spacing:.03em;
}
.etymology .word{ display:inline; }
.etymology .ipa{ display:block; margin-top:2px; }
.etymology .pos{ display:inline; }
.etymology span[style]{ display:none; }
.etymology span:last-child{ display:block; margin-top:6px; }
}
/* ── Decorative overlays must never intercept clicks ───────────────────
.hero-grid-bg is position:absolute inset:0 and the first child of the
hero, so without this it sits on top of every link in the hero and
swallows the click. The others are the same class of element. Purely
visual, so none of them should be hit-testable.
nav.top and .menu-overlay are deliberately excluded — they are
interactive, and .menu-overlay is already visibility:hidden when closed. */
.hero-grid-bg,
.dataroom::before,
.entity-children::before,
.compare-fill,
.rb-shot::after,
.ent-shot::after,
.section-navy::before,
.section-navy::after,
.watermark {
pointer-events: none;
}
/* ── Divisions grid: four tiles now (three corporations + the founder) ── */
.ent-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1180px){ .ent-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .ent-grid{ grid-template-columns:1fr; } }
/* The founder tile carries a real photograph, not a render — so it must NOT
inherit the CONCEPT RENDER badge the division shots use. */
.ent-founder .ent-shot::after{ content:none; }
.ent-founder{ border-top-color:var(--ink,#0a1828); }
.ent-word{
font-family:var(--serif,Georgia,serif); font-size:1.15rem; line-height:1;
color:var(--text-pap,#0a1828); align-self:center;
}