/* Enthusiast Companies — main.css
* Site Rev 26.04 / Public · v2.4
* 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); }
}