* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root {
--ink: #102331;
--ink-deep: #08151f;
--mineral: #d8dce0;
--paper: #faf8f5;
--muted: #aeb7bf;
--signal: #ff8700;
--line: rgba(250, 248, 245, 0.16);
--line-strong: rgba(250, 248, 245, 0.34);
--display: "IBM Plex Sans", "Helvetica Neue", sans-serif;
--body: "Manrope", "Helvetica Neue", sans-serif;
--max: 1440px;
--gutter: clamp(1.25rem, 4vw, 4.5rem);
--section: clamp(6rem, 12vw, 11rem);
--fast: 180ms;
--base: 520ms;
--slow: 1100ms;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at 70% 12%, rgba(255,135,0,.065), transparent 28%), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--signal); color: var(--ink); }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 1000; padding: .75rem 1rem; background: var(--signal); color: var(--ink); transform: translateY(-180%); transition: transform var(--fast); }
.skip-link:focus { transform: none; }
.page-progress { position: fixed; inset: 0 0 auto; z-index: 999; height: 2px; background: rgba(255,255,255,.06); }
.page-progress span { display: block; width: calc(var(--page-progress, 0) * 100%); height: 100%; background: var(--signal); transform-origin: left; }
.grain { position: fixed; inset: -50%; z-index: 900; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: grain 1s steps(2) infinite; }
@keyframes grain { 0% { transform: translate(0); } 25% { transform: translate(3%,-2%); } 50% { transform: translate(-2%,3%); } 75% { transform: translate(2%,2%); } }
.site-header { position: fixed; z-index: 100; top: 1rem; left: var(--gutter); right: var(--gutter); min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: .65rem .7rem .65rem 1rem; border: 1px solid rgba(255,255,255,.13); background: rgba(16,35,49,.78); backdrop-filter: blur(18px) saturate(120%); }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { width: 52px; height: 52px; display: block; object-fit: cover; border-radius: 50%; background: #fff; }
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.3rem); font-size: .75rem; font-weight: 600; letter-spacing: .03em; }
.site-nav > a:not(.nav-cta) { color: var(--muted); transition: color var(--fast); }
.site-nav > a:hover, .site-nav > a:focus-visible { color: var(--paper); }
.nav-cta { padding: .8rem 1.15rem; border: 1px solid var(--line-strong); transition: background var(--fast), color var(--fast); }
.nav-cta:hover, .nav-cta:focus-visible { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.nav-toggle { display: none; border: 0; background: none; }
.hero { min-height: 100svh; position: relative; display: grid; align-items: end; overflow: clip; padding: 8rem var(--gutter) 3rem; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, rgba(8,21,31,.05), rgba(8,21,31,.45) 72%, var(--ink)); }
.hero-atmosphere { position: absolute; inset: -20%; z-index: -2; background: radial-gradient(ellipse at 50% 44%, rgba(216,220,224,.1), transparent 34%), radial-gradient(ellipse at 50% 55%, rgba(255,135,0,.075), transparent 24%); filter: blur(20px); opacity: 0; transition: opacity 2s ease; }
.hero.is-visible .hero-atmosphere { opacity: 1; }
.hero-core { --px: 0px; --py: 0px; --hero-scroll: 0; position: absolute; z-index: -1; width: min(70vw, 56rem); aspect-ratio: 1; left: 58%; top: 43%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(calc(1 - var(--hero-scroll) * .12)); filter: blur(18px); opacity: 0; transition: filter var(--slow) var(--ease), opacity var(--slow) ease; }
.hero.is-visible .hero-core { filter: blur(0); opacity: calc(.94 - var(--hero-scroll) * .5); }
.core-light { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle at 44% 38%, rgba(250,248,245,.24), rgba(216,220,224,.045) 34%, rgba(8,21,31,.8) 70%); box-shadow: inset -4rem -3rem 8rem rgba(0,0,0,.75), 0 0 9rem rgba(255,135,0,.06); }
.core-ring { position: absolute; border: 1px solid rgba(250,248,245,.21); border-radius: 50%; }
.ring-a { inset: 7%; transform: rotateX(68deg) rotateZ(-18deg); }
.ring-b { inset: 20% -2%; transform: rotateY(67deg) rotateZ(24deg); }
.ring-c { inset: -2% 26%; transform: rotateY(72deg) rotateZ(-40deg); border-color: rgba(255,135,0,.31); }
.core-center { position: absolute; inset: 36%; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 1px solid rgba(250,248,245,.3); background: rgba(8,21,31,.58); box-shadow: 0 0 4rem rgba(0,0,0,.7); }
.core-center span { font: 400 clamp(2rem, 4vw, 4.8rem)/1 var(--display); }
.core-center small { color: var(--muted); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; }
.core-node { position: absolute; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--signal); box-shadow: 0 0 1.6rem var(--signal); }
.node-a { left: 17%; top: 35%; }.node-b { right: 12%; top: 49%; }.node-c { left: 48%; bottom: 7%; }.node-d { right: 38%; top: 9%; }
.hero-copy { position: relative; z-index: 2; width: min(100%, var(--max)); margin: 0 auto; }
.eyebrow-row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: clamp(1.5rem, 4vh, 3.25rem); }
.eyebrow { margin: 0; color: var(--signal); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero-index { margin: 0; display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.hero-index i, .site-footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--signal); }
.hero h1 { max-width: 13ch; margin: 0; font: 500 clamp(4.2rem, 10vw, 10rem)/.86 var(--display); letter-spacing: -.065em; text-wrap: balance; }
.hero h1 span { display: block; overflow: hidden; padding-bottom: .07em; }
.hero h1 i { display: block; font-style: normal; transform: translateY(110%); transition: transform .95s var(--ease); }
.hero h1 span:nth-child(2) i { transition-delay: .13s; }
.hero.is-visible h1 i { transform: translateY(0); }
h1 em, h2 em { color: var(--signal); font-weight: 400; }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; margin-top: clamp(1.8rem, 4vh, 3.8rem); }
.hero-bottom > p { max-width: 51ch; margin: 0; color: var(--mineral); font-size: clamp(.95rem, 1.2vw, 1.08rem); }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-width: 14rem; padding: .95rem 1rem; border: 1px solid transparent; font-size: .72rem; font-weight: 700; letter-spacing: .02em; transition: transform var(--fast), background var(--fast), color var(--fast); }
.button:hover { transform: translateY(-2px); }
.button-solid { background: var(--signal); color: var(--ink); }
.text-link { position: relative; font-size: .72rem; font-weight: 700; }
.text-link::after, .company-lane a::after, .site-footer a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.3rem; height: 1px; background: currentColor; transition: right var(--base) var(--ease); }
.text-link:hover::after, .text-link:focus-visible::after, .company-lane a:hover::after, .company-lane a:focus-visible::after, .site-footer a:hover::after { right: 0; }
.scroll-cue { display: none; }
.scroll-cue span { width: 1px; height: 2.5rem; background: linear-gradient(var(--signal), transparent); }
.belief { min-height: 84svh; display: grid; place-items: center; padding: var(--section) var(--gutter); }
.belief-inner { width: min(100%, 78rem); }
.belief-rule { width: 0; height: 1px; margin-bottom: 2.5rem; background: var(--signal); transition: width var(--slow) var(--ease); }
.belief.is-visible .belief-rule { width: 100%; }
.belief blockquote { max-width: 21ch; margin: 2.75rem 0 0 auto; font: 500 clamp(2.7rem, 6.2vw, 6.3rem)/.98 var(--display); letter-spacing: -.055em; }
.belief-copy { max-width: 48ch; margin: 2.75rem 0 0 auto; color: var(--muted); }
.method-section { padding-top: var(--section); border-top: 1px solid var(--line); }
.section-heading { width: min(100%, var(--max)); margin: 0 auto; padding: 0 var(--gutter) clamp(5rem, 10vw, 9rem); }
.section-heading h2 { max-width: 16ch; margin: 1.6rem 0 2rem; font: 500 clamp(3.4rem, 7.2vw, 7.6rem)/.92 var(--display); letter-spacing: -.06em; }
.section-heading > p:last-child { max-width: 54ch; margin: 0 0 0 auto; color: var(--muted); }
.method { width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: minmax(18rem,.85fr) minmax(0,1.15fr); gap: clamp(3rem,8vw,9rem); padding: 0 var(--gutter) var(--section); }
.method-visual { position: sticky; top: 16vh; height: 68vh; display: grid; place-items: center; }
.method-core { --step-rotation: 0deg; position: relative; width: min(34vw, 28rem); aspect-ratio: 1; transition: transform 1s var(--ease); transform: rotate(var(--step-rotation)); }
.method-core[data-step="2"] { --step-rotation: 42deg; }.method-core[data-step="3"] { --step-rotation: 88deg; }.method-core[data-step="4"] { --step-rotation: 142deg; }
.method-core::before { content: ""; position: absolute; inset: 19%; border-radius: 50%; background: radial-gradient(circle at 38% 35%, rgba(250,248,245,.15), rgba(8,21,31,.9) 68%); border: 1px solid var(--line-strong); }
.method-orbit { position: absolute; inset: 7%; border: 1px solid var(--line); border-radius: 50%; transition: inset .8s var(--ease), border-color .8s ease; }
.orbit-one { transform: rotateX(67deg) rotateZ(15deg); }.orbit-two { inset: 18% 1%; transform: rotateY(65deg) rotateZ(-28deg); }.orbit-three { inset: 1% 29%; transform: rotateY(68deg) rotateZ(18deg); border-color: rgba(255,135,0,.38); }
.method-core[data-step="2"] .orbit-one { inset: 2%; border-color: rgba(255,135,0,.44); }.method-core[data-step="3"] .orbit-two { inset: 9%; border-color: rgba(255,135,0,.49); }.method-core[data-step="4"] .orbit-three { inset: 12% 19%; }
.method-center { position: absolute; inset: 38%; display: grid; place-content: center; text-align: center; border-radius: 50%; z-index: 2; }
.method-center b { font: 600 clamp(2rem,4vw,4rem)/1 var(--display); }.method-center small { color: var(--muted); font-size: .54rem; letter-spacing: .12em; }
.method-signal { position: absolute; z-index: 3; left: 48%; top: 1%; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--signal); box-shadow: 0 0 1.5rem var(--signal); }
.media-note { position: absolute; bottom: 0; max-width: 28ch; margin: 0; color: rgba(250,248,245,.34); font-size: .58rem; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.method-step { min-height: 72vh; display: grid; align-content: center; border-top: 1px solid var(--line); opacity: .25; transition: opacity var(--base) ease; }
.method-step.is-active { opacity: 1; }
.step-number { color: var(--signal); font-size: .65rem; letter-spacing: .18em; }
.step-label { margin: .8rem 0 2rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.method-step h3 { max-width: 12ch; margin: 0 0 1.75rem; font: 500 clamp(2.5rem,4.4vw,4.8rem)/.96 var(--display); letter-spacing: -.055em; }
.method-step > p:last-child { max-width: 52ch; margin: 0; color: var(--muted); }
.ecosystem { padding: var(--section) var(--gutter); border-top: 1px solid var(--line); }
.ecosystem .section-heading { padding-left: 0; padding-right: 0; }
.ecosystem-map { width: min(100%, var(--max)); min-height: 82svh; margin: 0 auto 7rem; position: relative; display: grid; place-items: center; opacity: 0; transform: scale(.86); transition: opacity var(--slow) ease, transform var(--slow) var(--ease); }
.ecosystem.is-visible .ecosystem-map { opacity: 1; transform: scale(1); }
.map-axis { position: absolute; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.axis-x { width: 88%; height: 1px; }.axis-y { width: 1px; height: 84%; background: linear-gradient(transparent, var(--line-strong), transparent); }
.ecosystem-core { position: relative; width: min(32vw, 24rem); aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 1px solid var(--line-strong); background: radial-gradient(circle, rgba(216,220,224,.08), rgba(8,21,31,.84) 68%); }
.ecosystem-core b { font: 600 clamp(3rem,6vw,6.5rem)/1 var(--display); }.ecosystem-core small { color: var(--muted); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.echo-ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; }.echo-one { inset: -22%; }.echo-two { inset: -52%; border-color: rgba(250,248,245,.08); }
.ecosystem-node { position: absolute; border: 0; padding: .55rem; background: var(--ink); color: var(--muted); cursor: pointer; font-size: .65rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transition: color var(--fast), transform var(--fast); }
.ecosystem-node::before { content: ""; display: inline-block; width: 5px; aspect-ratio: 1; margin-right: .6rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 1rem currentColor; }
.ecosystem-node:hover, .ecosystem-node:focus-visible, .ecosystem-node.is-active { color: var(--signal); transform: scale(1.035); outline: 0; }
.map-ai360 { left: 8%; top: 18%; }.map-watt { right: 5%; top: 20%; }.map-cpa { left: 1%; top: 61%; }.map-claims { right: 2%; top: 60%; }.map-health { left: 30%; bottom: 4%; }.map-vertical { right: 27%; bottom: 2%; }
.company-ledger { width: min(100%, var(--max)); margin: 0 auto; }
.company-lane { display: grid; grid-template-columns: 3rem minmax(13rem,.65fr) minmax(0,1.2fr) auto; gap: clamp(1rem,3vw,4rem); align-items: start; padding: 3rem 0; border-top: 1px solid var(--line); transition: background var(--base), color var(--base), padding var(--base) var(--ease); }
.company-lane:last-child { border-bottom: 1px solid var(--line); }
.company-lane.is-active { padding-left: 1rem; padding-right: 1rem; background: rgba(250,248,245,.035); }
.lane-index { color: var(--signal); font-size: .62rem; letter-spacing: .13em; }.lane-type { margin: 0 0 .85rem; color: var(--muted); font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; }
.company-lane h3 { margin: 0; font: 500 clamp(2.1rem,3.4vw,3.8rem)/.98 var(--display); letter-spacing: -.045em; }.company-lane > p { max-width: 50ch; margin: 0; color: var(--muted); }
.company-lane a { position: relative; white-space: nowrap; font-size: .68rem; font-weight: 700; }
.proof { width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem,8vw,9rem); align-items: center; padding: var(--section) var(--gutter); }
.media-slot { min-height: 68vh; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 55% 38%, rgba(255,135,0,.1), transparent 20%), linear-gradient(135deg, #183647, #08151f); }
.media-slot::before { content: ""; position: absolute; inset: 9%; border: 1px solid var(--line); border-radius: 50%; transform: scale(.6); opacity: 0; transition: transform 1.4s var(--ease), opacity 1.4s ease; }
.proof.is-visible .media-slot::before { transform: scale(1); opacity: 1; }
.media-frame { position: relative; z-index: 1; width: 68%; padding: 1.5rem; border-left: 1px solid var(--signal); background: rgba(8,21,31,.6); }
.media-frame span, .media-frame small { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }.media-frame b { display: block; margin: .5rem 0 1rem; font: 500 clamp(2rem,3.5vw,3.8rem)/1 var(--display); letter-spacing: -.04em; }
.proof-copy h2 { max-width: 11ch; margin: 1.5rem 0 2.5rem; font: 500 clamp(3rem,5.6vw,6rem)/.95 var(--display); letter-spacing: -.055em; }.proof-copy > p { max-width: 50ch; color: var(--muted); }
.integrity-note { display: flex; align-items: center; gap: .8rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--mineral); font-size: .67rem; letter-spacing: .04em; }.integrity-note span { width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--signal); box-shadow: 0 0 1rem var(--signal); }
.founder { padding: var(--section) var(--gutter); border-top: 1px solid var(--line); }
.founder > * { width: min(100%, var(--max)); margin-left: auto; margin-right: auto; }
.founder-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(3rem,8vw,9rem); margin-top: 2rem; align-items: end; }
.founder h2 { margin: 0; font: 500 clamp(3.6rem,7.5vw,8rem)/.9 var(--display); letter-spacing: -.065em; }.founder-grid > div { padding-top: 2rem; border-top: 1px solid var(--line); color: var(--muted); }
.invitation { min-height: 92svh; position: relative; overflow: hidden; display: grid; place-items: center; padding: var(--section) var(--gutter); background: var(--paper); color: var(--ink); }
.invitation::before { content: ""; position: absolute; width: min(72vw,56rem); aspect-ratio: 1; border: 1px solid rgba(16,35,49,.2); border-radius: 50%; clip-path: circle(0); transition: clip-path 1.4s var(--ease); }
.invitation::after { content: ""; position: absolute; width: min(46vw,34rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,135,0,.45), rgba(255,135,0,.05) 42%, transparent 68%); filter: blur(35px); opacity: .35; }
.invitation.is-visible::before { clip-path: circle(52%); }
.invitation-inner { width: min(100%,78rem); position: relative; z-index: 1; }
.invitation .eyebrow { color: #9a5200; }.invitation h2 { max-width: 15ch; margin: 1.7rem 0 2rem; font: 500 clamp(3.8rem,8.3vw,8.5rem)/.9 var(--display); letter-spacing: -.065em; }.invitation-inner > p { max-width: 56ch; }
.contact-actions { display: flex; align-items: center; gap: 2rem; margin-top: 3rem; }.button-dark { background: var(--ink); color: var(--paper); }.contact-actions p { max-width: 30ch; color: #63665f; font-size: .68rem; }
.site-footer { width: min(100%, var(--max)); margin: 0 auto; min-height: 10rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem var(--gutter); color: var(--muted); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; }
.site-footer p { display: flex; align-items: center; gap: .75rem; margin: 0; }.site-footer p span { color: var(--paper); }.site-footer a { position: relative; color: var(--paper); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
@media (max-width: 980px) {
.site-nav { gap: 1rem; }
.hero { padding-bottom: 2rem; }
.hero h1 { font-size: clamp(4rem,10.8vw,7rem); }
.hero-bottom { grid-template-columns: 1fr; }
.hero-actions { justify-content: space-between; }
.scroll-cue { display: none; }
.company-lane { grid-template-columns: 2.25rem minmax(12rem,.8fr) minmax(0,1.2fr); }
.company-lane a { grid-column: 3; }
.proof { grid-template-columns: 1fr; }
.media-slot { min-height: 58vh; }
}
@media (max-width: 1320px) { .scroll-cue { display: none; } }
@media (max-width: 760px) {
.site-header { top: .65rem; left: .65rem; right: .65rem; min-height: 56px; }
.brand img { width: 46px; height: 46px; }
.nav-toggle { display: flex; align-items: center; gap: .7rem; padding: .6rem; color: var(--paper); cursor: pointer; }
.nav-toggle span { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; }.nav-toggle i, .nav-toggle i::before { content: ""; display: block; width: 18px; height: 1px; background: currentColor; transition: transform var(--fast); }.nav-toggle i::before { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] i { transform: rotate(45deg); }.nav-toggle[aria-expanded="true"] i::before { transform: rotate(-90deg); }
.site-nav { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; display: grid; gap: 0; padding: .5rem; background: rgba(16,35,49,.98); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--fast), transform var(--fast), visibility var(--fast); }
.site-nav.is-open { opacity: 1; visibility: visible; transform: none; }.site-nav a { padding: 1rem; border-bottom: 1px solid var(--line); }.site-nav .nav-cta { margin-top: .5rem; border: 1px solid var(--line-strong); text-align: center; }
.hero { min-height: 100svh; padding-top: 7rem; }
.hero-core { width: 120vw; left: 68%; top: 39%; }
.hero .core-center span, .hero .core-center small { visibility: hidden; }
.eyebrow-row { display: block; }.hero-index { display: none; }
.hero h1 { font-size: clamp(3.8rem,16vw,6rem); line-height: .86; }
.hero-bottom { margin-top: 2rem; gap: 1.5rem; }.hero-actions { align-items: stretch; flex-direction: column; gap: 1rem; }.button { width: 100%; }.text-link { width: max-content; }
.belief { min-height: 75svh; }.belief blockquote { margin-left: 0; }.belief-copy { margin-left: 0; }
.section-heading { padding-left: var(--gutter); padding-right: var(--gutter); }.section-heading > p:last-child { margin-left: 0; }
.ecosystem-map { display: none; }.ecosystem .section-heading { padding-left: 0; padding-right: 0; }
.company-lane { grid-template-columns: 2.25rem 1fr; gap: 1rem; padding: 2.5rem 0; }.company-lane > :nth-child(n+3), .company-lane a { grid-column: 2; }.company-lane a { width: max-content; margin-top: .5rem; }
.proof { padding-left: var(--gutter); padding-right: var(--gutter); }.media-slot { min-height: 50vh; }.media-frame { width: 82%; }
.founder-grid { grid-template-columns: 1fr; }.founder h2 { font-size: clamp(3.5rem,14vw,6rem); }
.contact-actions { align-items: stretch; flex-direction: column; }.invitation::before { width: 110vw; }.invitation h2 { font-size: clamp(3.7rem,15vw,6rem); }
.site-footer { align-items: flex-start; flex-direction: column; padding-top: 3rem; padding-bottom: 3rem; }.site-footer p { flex-wrap: wrap; }
}
/* v2 depth, image fallbacks, and slogan system */
/* Scene backdrops are gradient-only by default; the html.img-* classes (set by script.js
after a successful image preload) layer the real photo UNDER the tint. Missing files
never 404 and the scenes always read as complete. */
.hero-core::after { content:""; position:absolute; inset:10%; z-index:-1; border-radius:50%; background-image:radial-gradient(circle at 42% 36%,rgba(250,248,245,.2),transparent 24%),radial-gradient(circle,rgba(255,135,0,.16),#102331 68%); background-size:cover; background-position:center; animation:hero-breathe 30s ease-in-out infinite alternate; }
html.img-hero-core .hero-core::after { background-image:linear-gradient(rgba(16,35,49,.18),rgba(16,35,49,.38)),url("assets/img/hero-core.webp"),radial-gradient(circle at 42% 36%,rgba(250,248,245,.2),transparent 24%),radial-gradient(circle,rgba(255,135,0,.16),#102331 68%); }
@keyframes hero-breathe { to { transform:scale(1.06); } }
.belief { background:#faf8f5; color:#102331; }.belief-copy { color:#4f6070; }
.method-section,.ecosystem,.ecosystem-page .interior-hero,.capabilities-page .interior-hero,.about-page .interior-hero,.contact-hero,.vision-band { position:relative; isolation:isolate; }
.method-section::before,.ecosystem::before,.ecosystem-page .interior-hero::before,.capabilities-page .interior-hero::before,.about-page .interior-hero::before,.contact-hero::before,.vision-band::before { content:""; position:absolute; inset:-6% 0; z-index:-2; transform:translateY(var(--scene-shift,0)); background-size:cover; background-position:center; }
.method-section::before { background-image:radial-gradient(circle at 30% 35%,rgba(255,135,0,.14),transparent 25%),linear-gradient(#102331,#08151f); }
html.img-method-flow .method-section::before { background-image:linear-gradient(rgba(16,35,49,.8),rgba(16,35,49,.88)),url("assets/img/method-flow.webp"),radial-gradient(circle at 30% 35%,rgba(255,135,0,.14),transparent 25%),linear-gradient(#102331,#08151f); }
.ecosystem::before,.ecosystem-page .interior-hero::before { background-image:radial-gradient(circle at 60% 30%,rgba(255,135,0,.12),transparent 28%),linear-gradient(#102331,#08151f); }
html.img-ecosystem-field .ecosystem::before,html.img-ecosystem-field .ecosystem-page .interior-hero::before { background-image:linear-gradient(rgba(16,35,49,.78),rgba(16,35,49,.88)),url("assets/img/ecosystem-field.webp"),radial-gradient(circle at 60% 30%,rgba(255,135,0,.12),transparent 28%),linear-gradient(#102331,#08151f); }
.capabilities-page .interior-hero::before { background-image:radial-gradient(circle,rgba(79,96,112,.3),#102331 70%); background-attachment:fixed; }
html.img-capabilities-texture .capabilities-page .interior-hero::before { background-image:linear-gradient(rgba(16,35,49,.76),rgba(16,35,49,.9)),url("assets/img/capabilities-texture.webp"),radial-gradient(circle,rgba(79,96,112,.3),#102331 70%); }
.about-page .interior-hero::before { background-image:radial-gradient(circle at 70% 35%,rgba(255,135,0,.12),#102331 65%); }
html.img-proof-operations .about-page .interior-hero::before { background-image:linear-gradient(rgba(16,35,49,.76),rgba(16,35,49,.92)),url("assets/img/proof-operations.webp"),radial-gradient(circle at 70% 35%,rgba(255,135,0,.12),#102331 65%); }
.contact-hero::before,.vision-band::before { background-image:radial-gradient(circle at 60% 40%,rgba(255,135,0,.16),#102331 68%); }
html.img-vision-horizon .contact-hero::before,html.img-vision-horizon .vision-band::before { background-image:linear-gradient(rgba(16,35,49,.82),rgba(16,35,49,.9)),url("assets/img/vision-horizon.webp"),radial-gradient(circle at 60% 40%,rgba(255,135,0,.16),#102331 68%); }
.method-step,.company-lane,.ecosystem-row { margin:1rem 0; padding:clamp(1.5rem,3vw,3rem); border:1px solid rgba(79,96,112,.35); border-radius:16px; background:rgba(250,248,245,.04); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(250,248,245,.06) inset,0 24px 60px -24px rgba(0,0,0,.55); }
.method-step.is-active { border-left:3px solid #ff8700; }.company-lane.is-active { padding-left:clamp(1.5rem,3vw,3rem); }
.proof-media { background-image:radial-gradient(circle at 55% 38%,rgba(255,135,0,.16),transparent 26%),linear-gradient(135deg,#4f6070,#102331); background-size:cover; background-position:center; }
html.img-proof-operations .proof-media { background-image:linear-gradient(rgba(16,35,49,.32),rgba(16,35,49,.65)),url("assets/img/proof-operations.webp"),radial-gradient(circle at 55% 38%,rgba(255,135,0,.16),transparent 26%),linear-gradient(135deg,#4f6070,#102331); }
.vision-band { min-height:82svh; display:grid; align-items:center; padding:var(--section) max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))); overflow:hidden; }
.vision-band>div { position:relative; z-index:1; max-width:78rem; }.vision-band h2 { margin:1.5rem 0 2rem; font:500 clamp(3.8rem,8vw,8.5rem)/.88 var(--display); letter-spacing:-.065em; }.vision-band h2 span,.vision-band h2 em { display:block; }.vision-band h2 em { color:#ff8700; font-weight:400; }.vision-band>div>p:not(.eyebrow) { max-width:54ch; color:#aeb7bf; }.vision-band .button { margin-top:2rem; }
.hero-slogan { margin:.65rem 0 0!important; color:#aeb7bf!important; font-size:.65rem!important; letter-spacing:.08em; }.footer-slogan { color:#ff8700!important; text-transform:none; letter-spacing:.03em!important; }
.honey-field { position:absolute!important; left:-9999px!important; }.booking-slot { padding:var(--section) max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))); background:#102331; color:#faf8f5; }.booking-slot>div { min-height:700px; padding:clamp(2rem,5vw,5rem); border:1px solid rgba(79,96,112,.35); border-radius:16px; background:rgba(250,248,245,.04); backdrop-filter:blur(14px); }.booking-slot h2 { margin:1.5rem 0; font:500 clamp(3rem,6vw,6.5rem)/.92 var(--display); }.booking-slot>div>p { color:#aeb7bf; }.calendar-frame { min-height:420px; display:grid; place-content:center; text-align:center; margin-top:3rem; border:1px dashed rgba(255,135,0,.35); }.calendar-frame span { width:8px; height:8px; margin:auto; border-radius:50%; background:#ff8700; box-shadow:0 0 1.5rem #ff8700; animation:pulse 1.8s ease-in-out infinite; }.calendar-frame p { color:#aeb7bf; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
@keyframes pulse { 50% { transform:scale(1.7); opacity:.5; } }
[data-reveal-child] { opacity:0; transform:translateY(24px); transition:opacity 600ms cubic-bezier(.22,.61,.36,1),transform 600ms cubic-bezier(.22,.61,.36,1); transition-delay:var(--reveal-delay,0ms); } .is-visible [data-reveal-child] { opacity:1; transform:none; }
/* Pain -> fix ledger copy (index + ecosystem, dark scenes) */
.lane-copy { grid-column:3; max-width:52ch; }
.lane-pain { margin:0 0 .7rem; font-style:italic; color:#aeb7bf; }
.lane-fix { margin:0; color:var(--muted); }
.lane-pain > span, .lane-fix > span { display:inline-block; margin-right:.55em; font-style:normal; font-variant:small-caps; text-transform:lowercase; letter-spacing:.06em; font-weight:700; font-size:.82em; color:#ff8700; }
/* Capabilities "what breaks / what we architect" (light section) */
.cap-pair { grid-column:3; max-width:52ch; }
.cap-breaks { margin:0 0 .7rem; font-style:italic; color:#6d6357; }
.cap-architect { margin:0; color:#606b72; }
.cap-breaks > span, .cap-architect > span { display:inline-block; margin-right:.55em; font-style:normal; font-variant:small-caps; text-transform:lowercase; letter-spacing:.06em; font-weight:700; font-size:.82em; color:#9a5200; }
/* Founder portrait (about) */
.portrait-placeholder.has-portrait { padding:0; overflow:hidden; background:#08151f; opacity:1; }
.portrait-placeholder .portrait-picture { display:block; width:100%; height:100%; }
.portrait-placeholder .portrait-picture img { width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
@media (hover:hover) { .method-step,.company-lane,.ecosystem-row { transition:transform 200ms ease,border-color 200ms ease,box-shadow 200ms ease; }.method-step:hover,.company-lane:hover,.ecosystem-row:hover { transform:translateY(-4px); border-color:rgba(255,135,0,.45); box-shadow:0 0 0 1px rgba(255,135,0,.25),0 32px 70px -28px rgba(0,0,0,.65); } }
@media (max-width:760px) { .capabilities-page .interior-hero::before { background-attachment:scroll; }.booking-slot>div { min-height:520px; }.site-footer { display:grid; }.vision-band h2 { font-size:clamp(3.4rem,14vw,6rem); } }
@media (prefers-reduced-motion:reduce) { .hero-core::after,.calendar-frame span { animation:none!important; } [data-reveal-child] { transform:none!important; opacity:1!important; } [data-scene]::before { transform:none!important; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
.hero-core { transform: translate(-50%,-50%) scale(1) !important; filter: none; opacity: .82; }
.hero h1 i { transform: none; }
.ecosystem-map { opacity: 1; transform: none; }
}
/* Full-site navigation */
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-cta { position: relative; z-index: 102; padding: .72rem 1rem; border: 1px solid var(--line-strong); font-size: .67rem; font-weight: 700; letter-spacing: .04em; transition: background var(--fast), color var(--fast), border-color var(--fast); }
.header-cta:hover, .header-cta:focus-visible { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.nav-toggle { position: relative; z-index: 102; display: flex; align-items: center; gap: .7rem; padding: .7rem; border: 0; background: none; color: var(--paper); cursor: pointer; }
.nav-toggle span { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; }
.nav-toggle i, .nav-toggle i::before { content: ""; display: block; width: 18px; height: 1px; background: currentColor; transition: transform var(--fast); }
.nav-toggle i::before { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::before { transform: rotate(-90deg); }
.site-nav { position: fixed; inset: 0; z-index: 101; display: grid; align-content: center; justify-items: start; gap: 0; padding: 8rem max(var(--gutter), calc((100vw - var(--max))/2 + var(--gutter))); background: rgba(8,21,31,.985); opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity var(--base), transform var(--base) var(--ease), visibility var(--base); }
.site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.site-nav a, .site-nav .nav-cta { width: min(100%, 12ch); display: flex; align-items: baseline; gap: clamp(1rem,3vw,3rem); padding: .08em 0; border: 0; color: var(--paper); font: 500 clamp(2.8rem,7vw,7.2rem)/.98 var(--display); letter-spacing: -.06em; }
.site-nav a small { min-width: 2rem; color: var(--signal); font: 600 .58rem/1 var(--body); letter-spacing: .16em; }
.site-nav a[aria-current="page"] { color: var(--muted); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--signal); background: none; }
body.nav-open { overflow: hidden; }
.footer-nav { display: flex; align-items: center; gap: 1.25rem; }
.footer-nav a { color: var(--muted); }
/* Interior page foundations */
.interior-page main { overflow: clip; }
.interior-hero { min-height: 100svh; position: relative; display: grid; align-items: end; padding: 10rem var(--gutter) clamp(4rem,8vh,7rem); isolation: isolate; }
.interior-hero-copy { width: min(100%,var(--max)); margin: 0 auto; position: relative; z-index: 2; }
.interior-hero-copy .page-count, .contact-hero .page-count { position: absolute; right: 0; top: 0; margin: 0; color: var(--muted); font-size: .62rem; letter-spacing: .15em; }
.interior-hero h1, .contact-hero h1 { max-width: 12ch; margin: 1.6rem 0 2.5rem; font: 500 clamp(4.2rem,9.5vw,10rem)/.86 var(--display); letter-spacing: -.07em; }
.interior-hero-copy > p:last-child, .contact-hero > div > p:nth-of-type(3) { max-width: 54ch; margin: 0 0 0 auto; color: var(--mineral); }
.scene-orbit { position: absolute; z-index: -1; width: min(62vw,52rem); aspect-ratio: 1; right: -3vw; top: 4vh; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,135,0,.1), transparent 56%); }
.scene-orbit span { position: absolute; inset: 12%; border: 1px solid var(--line); border-radius: 50%; transform: rotateX(65deg) rotateZ(20deg); }
.scene-orbit span:nth-child(2) { inset: 22% 4%; transform: rotateY(68deg) rotateZ(-32deg); border-color: rgba(255,135,0,.35); }
.scene-orbit span:nth-child(3) { inset: 4% 34%; transform: rotateY(65deg) rotateZ(20deg); }
.scene-orbit b { font: 600 clamp(4rem,10vw,9rem)/1 var(--display); opacity: .16; }
.ledger-intro, .bands-heading, .values-heading { width: min(100%,var(--max)); margin: 0 auto; padding: var(--section) var(--gutter) clamp(4rem,7vw,7rem); }
.ledger-intro h2, .bands-heading h2, .values-heading h2 { max-width: 13ch; margin: 1.5rem 0 2rem; font: 500 clamp(3.5rem,7vw,7.5rem)/.91 var(--display); letter-spacing: -.06em; }
.ledger-intro > p:last-child { max-width: 53ch; margin-left: auto; color: var(--muted); }
.ledger-list, .band-list, .values-list { width: min(100%,var(--max)); margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.ecosystem-row { display: grid; grid-template-columns: 3rem minmax(15rem,.75fr) minmax(0,1fr) auto; gap: clamp(1rem,3vw,4rem); padding: 3rem 0; border-top: 1px solid var(--line); align-items: start; }
.ecosystem-row > span, .band-list article > span, .values-list article > span { color: var(--signal); font-size: .62rem; letter-spacing: .16em; }
.ecosystem-row small { color: var(--muted); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.ecosystem-row h3 { margin: .7rem 0 0; font: 500 clamp(2rem,3.2vw,3.7rem)/.95 var(--display); letter-spacing: -.045em; }
.ecosystem-row > p { max-width: 50ch; margin: 0; color: var(--muted); }
.ecosystem-row > a { white-space: nowrap; font-size: .68rem; font-weight: 700; }
.operating-model, .boundary-section, .legacy-section { width: min(100%,var(--max)); margin: 0 auto; padding: var(--section) var(--gutter); border-top: 1px solid var(--line); }
.operating-model > div { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; margin: 2rem 0 5rem; }
.operating-model h2, .boundary-section h2, .legacy-section h2 { max-width: 13ch; margin: 0; font: 500 clamp(3.3rem,6.5vw,7rem)/.92 var(--display); letter-spacing: -.06em; }
.operating-model > div p, .legacy-section > div > p:last-child { color: var(--muted); }
.operating-model ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); }
.operating-model li { padding: 1.5rem; border: 1px solid var(--line); font-size: .8rem; }.operating-model li span { display: block; margin-bottom: 3rem; color: var(--signal); font-size: .6rem; }
.page-cta { min-height: 78svh; display: grid; align-content: center; justify-items: start; padding: var(--section) max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))); background: var(--paper); color: var(--ink); }
.page-cta h2 { max-width: 14ch; margin: 1.5rem 0 3rem; font: 500 clamp(3.7rem,7.5vw,8rem)/.9 var(--display); letter-spacing: -.065em; }.page-cta .eyebrow { color: #9a5200; }
/* Capabilities */
.tower-object { position: absolute; right: 8vw; top: 15vh; width: min(32vw,28rem); height: 66vh; display: grid; align-content: center; gap: 1.2rem; opacity: .8; }
.tower-object i { height: 15%; border: 1px solid var(--line-strong); background: linear-gradient(90deg,transparent,rgba(255,135,0,.1)); transform: perspective(600px) rotateY(-18deg); }
.tower-object i:nth-child(2) { width: 82%; margin-left: 9%; }.tower-object i:nth-child(3) { width: 64%; margin-left: 18%; }.tower-object i:nth-child(4) { width: 46%; margin-left: 27%; border-color: var(--signal); }
.capability-process { width: min(100%,var(--max)); margin: 0 auto; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(3rem,8vw,9rem); padding: var(--section) var(--gutter); border-top: 1px solid var(--line); }
.process-spine { position: sticky; top: 17vh; height: max-content; }.process-spine h2 { margin: 1.5rem 0 3rem; font: 500 clamp(3rem,5.5vw,6rem)/.94 var(--display); letter-spacing: -.055em; }.process-spine > span { display: block; height: 30vh; width: 1px; background: linear-gradient(var(--signal),transparent); }
.process-stage { min-height: 64vh; display: grid; align-content: center; border-top: 1px solid var(--line); }.process-stage > span { color: var(--signal); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }.process-stage h3 { max-width: 12ch; margin: 1.4rem 0 1.8rem; font: 500 clamp(2.7rem,4.8vw,5.2rem)/.94 var(--display); letter-spacing: -.055em; }.process-stage p { max-width: 50ch; margin: 0; color: var(--muted); }
.capability-bands { background: var(--paper); color: var(--ink); }.capability-bands .eyebrow { color: #9a5200; }.band-list article { display: grid; grid-template-columns: 3rem minmax(16rem,.8fr) 1fr; gap: 2rem; padding: 2.5rem 0; border-top: 1px solid rgba(16,35,49,.2); }.band-list h3 { margin: 0; font: 500 clamp(1.8rem,3vw,3.5rem)/1 var(--display); letter-spacing: -.04em; }.band-list p { max-width: 50ch; margin: 0; color: #606b72; }
.boundary-section > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 5rem; }.boundary-section > div p { padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }
/* About */
.about-hero { grid-template-columns: 1fr; }.portrait-placeholder { position: absolute; right: 7vw; top: 15vh; width: min(34vw,30rem); height: 68vh; display: flex; flex-direction: column; justify-content: end; padding: 1.5rem; border: 1px solid var(--line); background: radial-gradient(circle at 50% 35%,rgba(255,135,0,.14),transparent 18%),linear-gradient(145deg,#183647,#08151f); color: var(--muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }.portrait-placeholder small { margin-top: .4rem; opacity: .6; }
.founder-manifesto { width: min(100%,var(--max)); margin: 0 auto; padding: var(--section) var(--gutter); }.founder-manifesto > div { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(3rem,8vw,9rem); margin-top: 2rem; }.founder-manifesto h2 { margin: 0; font: 500 clamp(3.5rem,7vw,7.4rem)/.91 var(--display); letter-spacing: -.06em; }.manifesto-copy { padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }
.values-section { background: var(--paper); color: var(--ink); }.values-section .eyebrow { color: #9a5200; }.values-list article { display: grid; grid-template-columns: 3rem minmax(15rem,.65fr) 1fr; gap: 2rem; padding: 2.5rem 0; border-top: 1px solid rgba(16,35,49,.2); }.values-list h3 { margin: 0; font: 500 clamp(2rem,3.2vw,3.6rem)/1 var(--display); }.values-list p { max-width: 48ch; margin: 0; color: #606b72; }
.legacy-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem,8vw,9rem); align-items: center; }.legacy-mark { font: 600 clamp(6rem,17vw,17rem)/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--line-strong); }
/* Contact */
.contact-page { background: var(--paper); color: var(--ink); }.contact-page::before { opacity: .12; }.contact-page .site-header { background: rgba(16,35,49,.88); color: var(--paper); }.contact-hero { min-height: 100svh; position: relative; display: grid; align-items: center; padding: 10rem max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))) 5rem; }.contact-hero > div:last-child { position: relative; z-index: 2; }.contact-hero .eyebrow { color: #9a5200; }.contact-hero h1 { max-width: 11ch; }.contact-hero > div > p:nth-of-type(3) { margin: 0 0 2.5rem; color: #606b72; }.signal-ring { position: absolute; right: -8vw; top: 10vh; width: min(60vw,50rem); aspect-ratio: 1; border: 1px solid rgba(16,35,49,.14); border-radius: 50%; }.signal-ring span { position: absolute; inset: 20%; border: 1px solid rgba(16,35,49,.18); border-radius: 50%; }.signal-ring span:nth-child(2) { inset: 39%; background: rgba(255,135,0,.2); border-color: var(--signal); }.signal-ring i { position: absolute; left: 15%; top: 50%; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--signal); box-shadow: 0 0 2rem var(--signal); }
.inquiry-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem,8vw,9rem); padding: var(--section) max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))); background: var(--ink); color: var(--paper); }.inquiry-context h2 { max-width: 10ch; margin: 1.5rem 0 2rem; font: 500 clamp(3.3rem,6vw,6.5rem)/.92 var(--display); letter-spacing: -.06em; }.inquiry-context > p { max-width: 48ch; color: var(--muted); }.inquiry-context ul { margin: 4rem 0 0; padding: 0; list-style: none; }.inquiry-context li { padding: 1.2rem 0; border-top: 1px solid var(--line); font-size: .77rem; }.inquiry-context li span { margin-right: 1.5rem; color: var(--signal); font-size: .58rem; }
.inquiry-form { padding: clamp(1.5rem,4vw,4rem); border: 1px solid var(--line); background: rgba(255,255,255,.025); }.inquiry-form label { display: grid; gap: .65rem; margin-bottom: 1.4rem; color: var(--muted); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.inquiry-form input, .inquiry-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: .8rem 0; background: transparent; color: var(--paper); outline: 0; resize: vertical; }.inquiry-form input:focus, .inquiry-form textarea:focus { border-color: var(--signal); }.form-status { margin: 1.2rem 0 0; color: var(--muted); font-size: .62rem; }.contact-boundary { min-height: 60svh; display: grid; align-content: center; padding: var(--section) max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))); }.contact-boundary h2 { margin: 1rem 0; font: 500 clamp(3.7rem,8vw,8rem)/.9 var(--display); letter-spacing: -.065em; }.contact-boundary p { color: #606b72; }
@media (max-width: 980px) {
.ecosystem-row { grid-template-columns: 2.5rem minmax(13rem,.8fr) 1.2fr; }.ecosystem-row > a { grid-column: 3; }
.portrait-placeholder { opacity: .45; right: -5vw; }.interior-hero-copy { z-index: 3; }
.about-hero { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; }
.about-hero .portrait-placeholder { position: static; order: -1; width: 100%; height: 60vh; opacity: 1; right: auto; }
}
@media (max-width: 760px) {
.header-cta { display: none; }.site-nav { inset: 0; padding: 7rem 1.5rem 3rem; }.site-nav a, .site-nav .nav-cta { font-size: clamp(2.7rem,14vw,4.5rem); }
.interior-hero { padding-top: 8rem; }.interior-hero h1, .contact-hero h1 { font-size: clamp(3.8rem,16vw,6rem); }.interior-hero-copy .page-count, .contact-hero .page-count { display: none; }.interior-hero-copy > p:last-child { margin-left: 0; }
.scene-orbit { width: 120vw; right: -60vw; top: 12vh; opacity: .65; }.tower-object { width: 70vw; right: -30vw; opacity: .35; }
.ecosystem-row, .band-list article, .values-list article { grid-template-columns: 2.25rem 1fr; gap: 1rem; }.ecosystem-row > :nth-child(n+3), .ecosystem-row > a, .band-list article p, .values-list article p { grid-column: 2; }
.operating-model > div, .operating-model ol, .capability-process, .founder-manifesto > div, .legacy-section, .inquiry-section { grid-template-columns: 1fr; }.process-spine { position: relative; top: 0; }.process-spine > span { height: 8rem; }.process-stage { min-height: auto; padding: 5rem 0; }
.boundary-section > div { grid-template-columns: 1fr; }.portrait-placeholder { top: 16vh; right: -35vw; width: 90vw; height: 58vh; opacity: .3; }.founder-manifesto h2 { font-size: clamp(3.4rem,14vw,6rem); }
.field-pair { grid-template-columns: 1fr; }.contact-hero { padding-top: 9rem; }.signal-ring { width: 120vw; right: -70vw; opacity: .45; }.contact-hero > div > p:nth-of-type(3) { margin-left: 0; }
.footer-nav { flex-wrap: wrap; }
.lane-copy, .cap-pair { grid-column: 2; }
.about-hero { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; }
.about-hero .portrait-placeholder { position: static; order: -1; width: 100%; height: 56vh; opacity: 1; }
}
/* Ecosystem Operating Diagram (Concept 1) — replaces AI-slop starfield */
.eco-diagram { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible; }
.eco-line { stroke:rgba(79,96,112,.4); stroke-width:1; fill:none; vector-effect:non-scaling-stroke; }
.eco-dot { fill:#ff8700; filter:drop-shadow(0 0 2px rgba(255,135,0,.9)); }
.ecosystem-map .ecosystem-core { z-index:2; }
.ecosystem-map .ecosystem-node { z-index:2; }
.ecosystem-map .map-axis { z-index:0; }
@media (prefers-reduced-motion:reduce) { .eco-dot { display:none; } }
/* v3 design polish */
:root { --section:clamp(3.5rem,7vw,6.5rem); }
body { font-size:17px; }
.site-header,.contact-page .site-header { border:0; background:transparent; backdrop-filter:none; box-shadow:none; transition:background 200ms ease,backdrop-filter 200ms ease; }
.site-header.is-scrolled,.contact-page .site-header.is-scrolled { border:0; background:rgba(16,35,49,.82); backdrop-filter:blur(18px) saturate(120%); box-shadow:none; }
.hero h1,.interior-hero h1,.contact-hero h1 { font-size:clamp(3.8rem,8.5vw,8.6rem); }
.section-heading h2,.proof-copy h2,.founder h2,.invitation h2,.ledger-intro h2,.bands-heading h2,.values-heading h2,.operating-model h2,.boundary-section h2,.legacy-section h2,.page-cta h2,.founder-manifesto h2,.contact-boundary h2,.booking-slot h2 { font-size:clamp(3rem,6vw,6.4rem); }
.eyebrow { letter-spacing:.16em; }
.company-lane p,.method-step p,.section-heading>p:last-child,.proof-copy>p,.founder-grid>div,.ecosystem-row>p,.process-stage p,.interior-hero-copy>p:last-child,.vision-band>div>p:not(.eyebrow) { color:rgba(250,248,245,.78); }
.method-step { min-height:56vh; background:rgba(16,35,49,.72); backdrop-filter:blur(18px); }
.belief { min-height:auto; padding:clamp(5rem,9vw,8rem) var(--gutter); }.ecosystem-map { min-height:68svh; margin-bottom:4rem; }.vision-band { min-height:66svh; }.invitation { min-height:74svh; }.interior-hero { min-height:88svh; }.process-stage { min-height:52vh; }.page-cta { min-height:60svh; }
.site-footer { min-height:8rem; flex-wrap:wrap; font-size:.82rem; text-transform:none; }.site-footer>p:not(.footer-slogan) { text-transform:none; letter-spacing:.04em; }.footer-slogan { flex-basis:100%; font-size:1rem!important; color:#ff8700!important; opacity:0; transform:translateY(10px); transition:opacity 700ms var(--ease),transform 700ms var(--ease); }.site-footer.is-visible .footer-slogan { opacity:1; transform:none; }.site-footer a { min-height:44px; display:inline-flex; align-items:center; }
.belief-line { display:block; opacity:0; transform:translateY(22px); transition:opacity 700ms var(--ease),transform 700ms var(--ease); }.belief.is-visible .belief-line { opacity:1; transform:none; }.belief.is-visible .belief-line:nth-child(2) { transition-delay:120ms; }
.company-lane,.ecosystem-row,.process-stage,.band-list article,.values-list article { opacity:0; transform:translateY(22px); transition:opacity 700ms var(--ease),transform 700ms var(--ease),border-color 200ms ease,box-shadow 200ms ease; transition-delay:var(--cascade-delay,0ms); }.company-lane.is-motion-visible,.ecosystem-row.is-motion-visible,.process-stage.is-motion-visible,.band-list article.is-motion-visible,.values-list article.is-motion-visible { opacity:1; transform:none; }
.proof-media { transform:scale(1.04); transition:transform 900ms var(--ease); }.proof.is-visible .proof-media { transform:scale(1); }.integrity-note span { animation:pulse 1.8s ease-in-out infinite; }
.vision-band h2 span { opacity:0; transform:translateX(-40px); transition:opacity 700ms var(--ease),transform 700ms var(--ease); }.vision-band h2 em { opacity:0; transform:translateX(40px); transition:opacity 700ms var(--ease) 150ms,transform 700ms var(--ease) 150ms; }.vision-band.is-visible h2 span,.vision-band.is-visible h2 em { opacity:1; transform:none; }
.founder h2 { position:relative; padding-bottom:1rem; }.founder h2::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#ff8700; transform:scaleX(0); transform-origin:left; transition:transform 800ms var(--ease); }.founder.is-visible h2::after { transform:scaleX(1); }
.invitation .button { opacity:0; transform:scale(.96); transition:opacity 650ms var(--ease) 180ms,transform 650ms var(--ease) 180ms,background var(--fast),color var(--fast); }.invitation.is-visible .button { opacity:1; transform:scale(1); }
.method-orbit { animation:orbit-drift 60s linear infinite; }.method-orbit:nth-child(2) { animation-direction:reverse; } @keyframes orbit-drift { to { rotate:360deg; } }
@media (max-width:760px) { .method { grid-template-columns:1fr; }.method-visual { position:relative; top:auto; height:52vh; }.method-step { min-height:auto; padding:3.5rem 2rem; } }
@media (max-width:760px) { .hero h1,.interior-hero h1,.contact-hero h1 { font-size:clamp(3.5rem,15vw,5.5rem); }.method-step { padding:3rem 1.5rem; } }
@media (prefers-reduced-motion:reduce) { .belief-line,.company-lane,.ecosystem-row,.process-stage,.band-list article,.values-list article,.proof-media,.vision-band h2 span,.vision-band h2 em,.invitation .button,.footer-slogan { opacity:1!important; transform:none!important; transition:none!important; }.method-orbit,.integrity-note span { animation:none!important; }.founder h2::after { transform:scaleX(1)!important; transition:none!important; } }
/* v3.1 blended portrait + branded ecosystem refinement */
.about-page .interior-hero::before { background-image:radial-gradient(circle at 72% 38%,rgba(79,96,112,.72),transparent 34%),linear-gradient(135deg,#29485c,#102331 68%); }
html.img-proof-operations .about-page .interior-hero::before { background-image:linear-gradient(rgba(16,35,49,.55),rgba(16,35,49,.72)),url("assets/img/proof-operations.webp"),radial-gradient(circle at 70% 35%,rgba(79,96,112,.7),#102331 70%); }
.portrait-placeholder.has-portrait { border:0; background:transparent; overflow:visible; box-shadow:none; }
.portrait-placeholder .portrait-picture { filter:drop-shadow(0 28px 35px rgba(8,21,31,.48)); -webkit-mask-image:radial-gradient(ellipse 60% 72% at 52% 42%,#000 0 54%,rgba(0,0,0,.78) 66%,transparent 86%); mask-image:radial-gradient(ellipse 60% 72% at 52% 42%,#000 0 54%,rgba(0,0,0,.78) 66%,transparent 86%); }
.portrait-placeholder .portrait-picture img { object-fit:cover; opacity:.98; }
.about-page .interior-hero h1,.ecosystem-page .interior-hero h1 { color:#faf8f5; text-shadow:0 3px 24px rgba(8,21,31,.75); }
.about-page .interior-hero-copy>p:last-child,.ecosystem-page .interior-hero-copy>p:last-child { color:rgba(250,248,245,.92); text-shadow:0 2px 15px rgba(8,21,31,.9); }
.ecosystem-page .interior-hero::before { background-image:radial-gradient(circle at 72% 36%,rgba(79,96,112,.5),transparent 30%),linear-gradient(135deg,#29485c,#102331 70%); }
html.img-ecosystem-field .ecosystem-page .interior-hero::before { background-image:radial-gradient(circle at 72% 36%,rgba(79,96,112,.5),transparent 30%),linear-gradient(135deg,#29485c,#102331 70%); }
.brand-orbit { width:min(54vw,43rem); right:2vw; top:10vh; background:radial-gradient(circle,rgba(250,248,245,.08),rgba(255,135,0,.06) 28%,transparent 62%); }
.brand-orbit span { border-color:rgba(250,248,245,.24); animation:brand-orbit-spin 28s linear infinite; }
.brand-orbit span:nth-child(2) { border-color:rgba(255,135,0,.58); animation-duration:38s; animation-direction:reverse; }
.brand-orbit span:nth-child(3) { border-color:rgba(79,96,112,.72); animation-duration:46s; }
.orbit-logo { width:clamp(7rem,14vw,11rem); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:rgba(250,248,245,.94); box-shadow:0 0 0 1px rgba(255,135,0,.45),0 0 65px rgba(255,135,0,.22); animation:brand-logo-breathe 4.5s ease-in-out infinite alternate; }
.orbit-logo img { width:88%; height:88%; object-fit:contain; border-radius:50%; }
@keyframes brand-orbit-spin { to { rotate:360deg; } } @keyframes brand-logo-breathe { to { transform:scale(1.035); box-shadow:0 0 0 1px rgba(255,135,0,.6),0 0 85px rgba(255,135,0,.32); } }
@media (max-width:760px) { .portrait-placeholder .portrait-picture { -webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 44%,#000 0 56%,rgba(0,0,0,.8) 68%,transparent 88%); mask-image:radial-gradient(ellipse 72% 76% at 50% 44%,#000 0 56%,rgba(0,0,0,.8) 68%,transparent 88%); }.brand-orbit { width:100vw; right:-50vw; opacity:.72; }.orbit-logo { width:7rem; } }
@media (prefers-reduced-motion:reduce) { .brand-orbit span,.orbit-logo { animation:none!important; } }
.contact-hero::before,html.img-vision-horizon .contact-hero::before { background-image:linear-gradient(rgba(16,35,49,.18),rgba(16,35,49,.3)),url("assets/img/vision-horizon.webp"),radial-gradient(circle at 64% 38%,rgba(79,96,112,.78),transparent 38%),linear-gradient(135deg,#4f6070,#29485c 58%,#102331); filter:saturate(1.55) contrast(1.16) brightness(1.12); }
.contact-hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 52% 82%,transparent 0,rgba(16,35,49,.03) 42%,rgba(16,35,49,.24) 100%),linear-gradient(90deg,rgba(16,35,49,.12),transparent 50%,rgba(16,35,49,.06)); }
.contact-hero .signal-ring span:nth-child(2) { background:rgba(255,135,0,.28); box-shadow:0 0 48px rgba(255,135,0,.22),inset 0 0 28px rgba(255,135,0,.12); }
.contact-hero h1 { color:#faf8f5; text-shadow:0 3px 26px rgba(8,21,31,.88); }
.contact-hero>div>p:nth-of-type(3) { color:rgba(250,248,245,.9); text-shadow:0 2px 14px rgba(8,21,31,.9); }
.contact-hero h1+p { color:rgba(250,248,245,.9)!important; text-shadow:0 2px 14px rgba(8,21,31,.9); }
.contact-hero .text-link { color:#faf8f5; }
/* ===== v4 luminosity + editorial polish (Operating Light) ===== */
/* Lift the ambient light off near-black toward true navy and warm the glow. */
body::before { background: radial-gradient(circle at 70% 12%, rgba(255,135,0,.085), transparent 32%), linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; }
.hero::before { background: linear-gradient(180deg, rgba(8,21,31,.02), rgba(8,21,31,.38) 72%, var(--ink)); }
/* Home PROOF beat -> warm-white editorial light field, so the page alternates light<->dark. */
.proof { background: var(--paper); color: var(--ink); }
.proof .eyebrow { color:#9a5200; }
.proof .proof-copy h2 { color:#102331; }
.proof .proof-copy > p { color:#4f6070; }
.proof .integrity-note { color:#3d4a52; border-top-color: rgba(16,35,49,.18); }
.proof .media-slot { border-color: rgba(16,35,49,.16); }
.proof .media-slot::before { border-color: rgba(16,35,49,.18); }
/* Founder beat: a lighter slate rule + brighter body for luminosity on the dark field. */
.founder { background: linear-gradient(180deg, #16303f, #102331 78%); }
.founder-grid > div { color: rgba(250,248,245,.82); border-top-color: rgba(255,135,0,.28); }
/* Slightly brighter card fields sitewide (glass reads less murky). */
.method-step, .company-lane, .ecosystem-row { background: rgba(250,248,245,.055); border-color: rgba(120,140,156,.42); }
/* Reduced-motion safety already global; nothing motion-new added here. */
/* v4 mobile overflow guard: contain the rotated decorative method-core */
@media (max-width:760px){ .method-visual{ overflow:clip; } .method-core{ width:min(62vw,20rem); } }
/* ================= v4.1 live-review fix pass (2026-07-12) ================= */
/* Fix 1 — dark scene ::before pseudos (inset:-6% 0) were bleeding ~167px into
neighboring sections, painting dark over light fields and visually clipping
headlines. Constrain the pseudos to their own box and lift every light field
into its own stacking context so nothing can bleed over a headline. */
.method-section::before,.ecosystem::before,.ecosystem-page .interior-hero::before,
.capabilities-page .interior-hero::before,.about-page .interior-hero::before,
.contact-hero::before,.vision-band::before{ inset:0; }
.belief,.proof,.invitation,.founder,.capability-bands,.values-section,
.page-cta,.contact-boundary{ position:relative; z-index:1; }
/* Fix 4 — header sits at the top of the page and scrolls away with the content
(not sticky). The full-screen menu overlay (.site-nav, position:fixed) is
unaffected and still works. */
.site-header,.contact-page .site-header{ position:absolute; }
.site-header.is-scrolled,.contact-page .site-header.is-scrolled{
background:transparent; backdrop-filter:none; box-shadow:none; }
/* Fix 3 — larger, legible mark + an always-readable wordmark next to it. */
.brand{ gap:.85rem; }
.brand img{ width:64px; height:64px; }
.brand-name{ font:600 1.04rem/1 var(--body); letter-spacing:.005em; color:var(--paper);
white-space:nowrap; }
/* Fix 2 — let the Proof image pop: drop the heavy navy tint (text is in a
separate column, so the image can be rich) and lift color/orange presence. */
html.img-proof-operations .proof-media{
background-image:linear-gradient(rgba(16,35,49,.10),rgba(16,35,49,.26)),
url("assets/img/proof-operations.webp"),
radial-gradient(circle at 55% 38%,rgba(255,135,0,.18),transparent 30%),
linear-gradient(135deg,#4f6070,#102331);
filter:saturate(1.18) contrast(1.07) brightness(1.06); }
/* Fix 5 — method steps flow as one connected sequence: no dead navy strips,
consecutive cards share edges and read as a single panel. */
.method-steps{ display:flex; flex-direction:column; }
.method-step{ margin:0; min-height:46vh; border-radius:0;
background:rgba(16,35,49,.72); }
.method-step + .method-step{ border-top:0; }
.method-step:first-child{ border-radius:16px 16px 0 0; }
.method-step:last-child{ border-radius:0 0 16px 16px; }
@media (max-width:760px){ .method-step{ min-height:auto; padding:2.75rem 2rem; } }
/* Fix 6 — Ecosystem is the closer. Tighter rhythm between heading, map, and
cards, plus a camera shutter-snap reveal on the map (once, on enter). */
.ecosystem .section-heading{ padding-bottom:clamp(2.5rem,5vw,4rem); }
.ecosystem-map{ min-height:56svh; margin:0 auto 2.5rem;
opacity:1; transform:none; clip-path:circle(0% at 50% 50%); }
.ecosystem.is-visible .ecosystem-map{ animation:eco-shutter 780ms var(--ease) both; }
.ecosystem-map::after{ content:""; position:absolute; inset:0; z-index:3;
pointer-events:none; border-radius:50%;
background:radial-gradient(circle,rgba(250,248,245,.5),transparent 62%); opacity:0; }
.ecosystem.is-visible .ecosystem-map::after{ animation:eco-flash 780ms ease-out both; }
@keyframes eco-shutter{
0%{ clip-path:circle(0% at 50% 50%); }
48%{ clip-path:circle(36% at 50% 50%); }
62%{ clip-path:circle(28% at 50% 50%); }
100%{ clip-path:circle(150% at 50% 50%); } }
@keyframes eco-flash{ 0%{ opacity:0; } 22%{ opacity:.5; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
.ecosystem-map{ clip-path:none !important; animation:none !important; opacity:1 !important; }
.ecosystem-map::after{ animation:none !important; opacity:0 !important; } }
/* Fix 3/4 mobile */
@media (max-width:760px){
.site-header{ position:absolute; }
.brand img{ width:56px; height:56px; }
.brand-name{ font-size:.9rem; }
}
@media (max-width:390px){ .brand-name{ display:none; } }
/* ===================== v5 LIGHT RE-THEME — hero-first — 2026-07-13 ===================== */
/* Homepage pivots to cream/light-first. Photorealistic maquette hero (hero-core.webp). */
/* Header on homepage: transparent over cream, navy marks (paper marks would vanish on cream) */
body.home .site-header { background: transparent; border: 0; backdrop-filter: none; box-shadow: none; }
body.home .brand-name { color: var(--ink); }
body.home .nav-toggle { color: var(--ink); }
body.home .header-cta { color: var(--ink); border: 1px solid rgba(16,35,49,.26); }
body.home .header-cta:hover, body.home .header-cta:focus-visible { background: var(--signal); border-color: var(--signal); color: var(--ink); }
/* Light hero */
body.home .hero { background: var(--paper); color: var(--ink); }
body.home .hero-backdrop { position: absolute; inset: 0; z-index: -2; background: var(--paper) url("assets/img/hero-core.webp") right center / cover no-repeat; transform-origin: 68% 52%; animation: hero-kenburns 40s ease-in-out infinite alternate; }
@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.04); } }
/* Left warm gradient guarantees text contrast — NO dark tint on the page */
body.home .hero::before { z-index: -1; background: linear-gradient(90deg, rgba(250,248,245,.95) 0%, rgba(250,248,245,.92) 24%, rgba(250,248,245,.64) 45%, rgba(250,248,245,.16) 65%, rgba(250,248,245,0) 80%); }
/* Hero text: navy on cream, orange eyebrow + em */
body.home .hero .eyebrow { color: var(--signal); }
body.home .hero .eyebrow i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--signal); vertical-align: middle; margin: 0 .55rem; }
body.home .hero h1 { color: var(--ink); }
body.home .hero h1 em { color: var(--signal); }
body.home .hero-bottom > p { color: #2f3f4b; }
body.home .text-link { color: var(--ink); }
body.home .scroll-cue { color: #4f6070; }
@media (prefers-reduced-motion: reduce) { body.home .hero-backdrop { animation: none !important; } }
/* Tablet/mobile: building stays top, whole copy block (incl. orange eyebrow) sits on cream */
@media (max-width: 980px) {
body.home .hero-backdrop { background-position: 74% top; }
body.home .hero::before { background: linear-gradient(0deg, rgba(250,248,245,.98) 0%, rgba(250,248,245,.97) 48%, rgba(250,248,245,.88) 62%, rgba(250,248,245,.42) 76%, rgba(250,248,245,0) 91%); }
}
/* v5 — scene tints REDUCED so the light maquette photography reads bright while text-on-image stays >=4.5:1 */
html.img-method-flow .method-section::before { background-image: linear-gradient(rgba(16,35,49,.74), rgba(16,35,49,.85)), url("assets/img/method-flow.webp"); }
html.img-ecosystem-field .ecosystem::before { background-image: linear-gradient(rgba(16,35,49,.74), rgba(16,35,49,.85)), url("assets/img/ecosystem-field.webp"); }
html.img-capabilities-texture .capabilities-page .interior-hero::before { background-image: linear-gradient(rgba(16,35,49,.66), rgba(16,35,49,.84)), url("assets/img/capabilities-texture.webp"); }
html.img-proof-operations .about-page .interior-hero::before { background-image: linear-gradient(rgba(16,35,49,.54), rgba(16,35,49,.83)), url("assets/img/proof-operations.webp"); }
html.img-vision-horizon .vision-band::before { background-image: linear-gradient(rgba(16,35,49,.74), rgba(16,35,49,.86)), url("assets/img/vision-horizon.webp"); }
/* ===================== v6 — hero close-up + ecosystem scroll stage — 2026-07-13 ===================== */
/* ---------- HERO: contained close-up right, architect copy left, cream + blue-tint atmosphere ---------- */
body.home .hero {
background:
radial-gradient(90% 80% at 14% 22%, rgba(79,96,112,.13), transparent 58%),
radial-gradient(70% 72% at 90% 80%, rgba(79,96,112,.10), transparent 62%),
var(--paper);
color: var(--ink);
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, .92fr);
align-items: center;
column-gap: clamp(2rem, 5vw, 5.5rem);
padding: 10rem max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 5rem;
min-height: 100svh;
}
body.home .hero::before { display: none; }
body.home .hero-copy { width: auto; max-width: 42rem; margin: 0; }
body.home .hero-figure { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 40rem; }
body.home .hero-figure::before {
content: ""; position: absolute; inset: -8% -6% -11% -4%; z-index: -1; border-radius: 44px;
background: radial-gradient(62% 60% at 52% 46%, rgba(79,96,112,.20), transparent 72%); filter: blur(20px);
}
body.home .hero-figure-inner {
position: relative; aspect-ratio: 3 / 2; border-radius: 26px; overflow: hidden; background: var(--paper);
box-shadow: 0 34px 80px -34px rgba(16,35,49,.42), 0 4px 14px rgba(16,35,49,.08), inset 0 0 0 1px rgba(16,35,49,.06);
}
body.home .hero-figure img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
transform: scale(1.008); animation: hero-fig-drift 20s ease-in-out infinite alternate;
}
@keyframes hero-fig-drift { from { transform: scale(1.008); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { body.home .hero-figure img { animation: none !important; transform: none !important; } }
@media (max-width: 980px) {
body.home .hero { grid-template-columns: 1fr; row-gap: clamp(1.75rem, 6vw, 2.75rem); align-items: start; padding-top: 8.5rem; padding-bottom: 3.5rem; min-height: auto; }
body.home .hero-copy { max-width: none; }
body.home .hero-figure { justify-self: stretch; max-width: none; }
body.home .hero-figure-inner { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) { body.home .hero-figure-inner { aspect-ratio: 4 / 3; border-radius: 20px; } }
/* ---------- ECOSYSTEM SCROLL STAGE ---------- */
.eco-stage-scroll { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); height: 460svh; }
.eco-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: var(--ink); }
.eco-stage.is-shot { animation: eco-shutter 820ms var(--ease) both; }
.eco-viewport { position: absolute; inset: 0; }
.eco-layer { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s ease; }
.eco-layer.is-active { opacity: 1; }
.eco-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform .8s var(--ease); }
.eco-layer.is-active .eco-img { transform: scale(1); }
.eco-statement { position: absolute; z-index: 4; margin: 0; max-width: min(15ch, 84vw); padding: .5rem .2rem; opacity: 0; transform: translateY(20px); transition: opacity .55s ease .12s, transform .6s var(--ease) .12s; }
.eco-layer.is-active .eco-statement { opacity: 1; transform: none; }
.eco-statement span { position: relative; display: inline; font: 500 clamp(2rem, 4.6vw, 4.4rem)/1.02 var(--display); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.eco-statement::before { content: ""; position: absolute; z-index: -1; inset: -34% -20%; background: radial-gradient(ellipse at center, rgba(250,248,245,.95), rgba(250,248,245,.66) 52%, transparent 78%); filter: blur(5px); }
.pos-bl { left: clamp(1.25rem, 5vw, 5rem); bottom: clamp(2rem, 8vh, 5.5rem); }
.pos-left { left: clamp(1.25rem, 5vw, 5rem); top: clamp(28%, 30vh, 34%); }
.pos-tl { left: clamp(1.25rem, 5vw, 5rem); top: clamp(6.5rem, 15vh, 9.5rem); }
.eco-web { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.eco-line { stroke: var(--signal); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .92; filter: drop-shadow(0 0 3px rgba(255,135,0,.5)); transition: stroke-dashoffset .7s var(--ease); }
.eco-layer[data-beat="5"].is-active .eco-line { stroke-dashoffset: 0; }
.eco-line[data-line="1"] { transition-delay: .05s; }
.eco-line[data-line="2"] { transition-delay: .11s; }
.eco-line[data-line="3"] { transition-delay: .17s; }
.eco-line[data-line="4"] { transition-delay: .23s; }
.eco-line[data-line="5"] { transition-delay: .29s; }
.eco-line[data-line="6"] { transition-delay: .35s; }
.eco-labels { position: absolute; inset: 0; z-index: 3; }
.eco-label { position: absolute; transform: translate(-50%, -50%); padding: .5rem .85rem; border: 0; border-radius: 999px; background: rgba(16,35,49,.9); color: var(--paper); font: 700 clamp(.6rem, 1.05vw, .72rem)/1 var(--body); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity .5s ease .45s, background .2s ease, color .2s ease; box-shadow: 0 8px 22px -10px rgba(8,21,31,.7); }
.eco-label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: .5rem; vertical-align: middle; box-shadow: 0 0 8px var(--signal); }
.eco-layer[data-beat="5"].is-active .eco-label { opacity: 1; }
.eco-label:hover, .eco-label:focus-visible { background: var(--signal); color: var(--ink); outline: 0; }
.eco-label:hover::before, .eco-label:focus-visible::before { background: var(--ink); box-shadow: none; }
.lbl-1 { left: 26%; top: 24%; }
.lbl-2 { left: 74%; top: 24%; }
.lbl-3 { left: 84%; top: 50%; }
.lbl-4 { left: 72%; top: 78%; }
.lbl-5 { left: 28%; top: 78%; }
.lbl-6 { left: 16%; top: 50%; }
.eco-progress { position: absolute; z-index: 5; right: clamp(1.25rem, 4vw, 3rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: .8rem .7rem; border-radius: 999px; background: rgba(250,248,245,.72); backdrop-filter: blur(6px); box-shadow: 0 6px 20px -10px rgba(8,21,31,.4); }
.eco-count { font: 700 .68rem/1 var(--body); letter-spacing: .12em; color: var(--ink); }
.eco-count b { color: var(--signal); }
.eco-dots { display: flex; flex-direction: column; gap: .5rem; }
.eco-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(16,35,49,.24); transition: background .3s ease, transform .3s ease; }
.eco-dots i.is-on { background: var(--signal); transform: scale(1.4); }
.eco-static-statements { display: none; }
@media (max-width: 760px) {
.eco-stage-scroll { height: 420svh; }
.eco-statement span { font-size: clamp(1.8rem, 8vw, 2.9rem); }
.eco-progress { right: .9rem; padding: .6rem .5rem; }
.eco-label { font-size: .58rem; padding: .42rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
.eco-stage-scroll { height: auto !important; }
.eco-stage { position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important; clip-path: none !important; animation: none !important; }
.eco-viewport { position: relative; height: 60svh; overflow: hidden; }
.eco-img { transform: none !important; }
.eco-layer { opacity: 0 !important; }
.eco-layer[data-beat="5"] { opacity: 1 !important; }
.eco-layer[data-beat="5"] .eco-line { stroke-dashoffset: 0 !important; }
.eco-layer[data-beat="5"] .eco-label { opacity: 1 !important; }
.eco-statement { display: none !important; }
.eco-progress { display: none !important; }
.eco-static-statements { display: block; list-style: none; margin: 2rem 0 0; padding: 0 clamp(1.25rem, 5vw, 5rem); }
.eco-static-statements li { padding: .7rem 0; border-top: 1px solid var(--line); color: var(--paper); font: 500 clamp(1.4rem, 3vw, 2.2rem)/1.1 var(--display); letter-spacing: -.03em; }
}
/* ============================================================
v6.1 LIVE-REVIEW POLISH (Claude/Opus, 2026-07-13)
Append-only. Overrides prior v6 eco-stage rules; nothing deleted.
============================================================ */
/* 1b — remove the dark circular shutter iris on the HOME ecosystem stage.
Cream base so no dark ever peeks; reveal kept as a clean fade+scale
(ecosystem.html's .ecosystem-map eco-shutter is untouched). */
.eco-stage { background: var(--paper); }
.eco-stage.is-shot { animation: eco-stage-in 700ms var(--ease) both; }
@keyframes eco-stage-in { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
/* 1a — clean thin SOLID orange connector stubs from the core toward each
label. Fixes the dash-render bug (pathLength=1 + non-scaling-stroke +
dasharray:1 rendered as tiny dashes); generous fixed dash = solid line,
subtle staggered draw-in kept. */
.eco-line {
stroke: var(--signal); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke;
stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; opacity: .95;
filter: drop-shadow(0 0 1.5px rgba(255,135,0,.35));
transition: stroke-dashoffset .7s var(--ease);
}
.eco-layer[data-beat="5"].is-active .eco-line { stroke-dashoffset: 0; }
/* 1c — light cream wayfinding chips: navy text, orange node dot. Clickable. */
.eco-label {
background: rgba(250,248,245,.94); color: var(--ink);
box-shadow: 0 6px 18px -8px rgba(8,21,31,.45), inset 0 0 0 1px rgba(16,35,49,.10);
transition: opacity .5s ease .2s, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.eco-label::before { background: var(--signal); box-shadow: 0 0 6px rgba(255,135,0,.55); }
.eco-label:hover, .eco-label:focus-visible { background: var(--ink); color: var(--paper); outline: 0; }
.eco-label:hover::before, .eco-label:focus-visible::before { background: var(--signal); box-shadow: none; }
/* 2 — statements coexist with the image: horizontally CENTERED (no left-edge
cramming), off-white text on a soft dark rounded scrim behind the text
block only, fade/scale-in per beat. */
.eco-statement {
left: 50%; right: auto; max-width: min(90vw, 40rem); width: max-content;
text-align: center; padding: .7rem 1.5rem;
transform: translateX(-50%) translateY(18px);
}
.eco-layer.is-active .eco-statement { transform: translateX(-50%) translateY(0); }
.eco-statement span { color: #FAF8F5; text-shadow: 0 1px 10px rgba(8,21,31,.35); }
.eco-statement::before {
inset: -3% -4%; border-radius: 20px;
background: rgba(13,28,40,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
filter: none; box-shadow: 0 10px 40px -18px rgba(8,21,31,.6);
}
.pos-bl { left: 50%; right: auto; top: auto; bottom: clamp(2.5rem, 9vh, 6rem); }
.pos-left { left: 50%; right: auto; bottom: auto; top: clamp(41%, 44vh, 46%); }
.pos-tl { left: 50%; right: auto; bottom: auto; top: clamp(7rem, 16vh, 10rem); }
/* 3a — invitation: remove the circle ring (::before) and orange glow blob
(::after). Clean cream field + a minimal animated orange rule. */
.invitation::before, .invitation::after { display: none !important; content: none !important; }
.invite-rule {
display: block; width: clamp(3rem, 6vw, 5rem); height: 3px; margin: 1.6rem 0 .2rem;
background: var(--signal); border-radius: 2px; transform: scaleX(0); transform-origin: left;
transition: transform 800ms var(--ease) 120ms;
}
.invitation.is-visible .invite-rule { transform: scaleX(1); }
/* reduced-motion static end-state updated for the cream stage */
@media (prefers-reduced-motion: reduce) {
.eco-static-statements li { color: var(--ink); border-top-color: rgba(16,35,49,.14); }
.eco-label { opacity: 1 !important; }
}
/* ============================================================
v6.3 (Errol 2026-07-14) Append-only. Overrides prior v6/v6.1.
STANDING RULE: No decorative circles/rings over images.
No drawn connector lines over photos - the image shows the connections.
============================================================ */
/* CHANGE 1a - kill all drawn/SVG connector lines + stubs on the ecosystem
stage. SVG removed from index.html; these guards ensure nothing draws. */
.eco-web, .eco-line { display: none !important; }
/* CHANGE 1b - "Connected by TMG." moved to the TOP-LEFT corner of the stage,
small + compact, so it never overlaps any company chip (beat-5 only). */
.eco-b5-note {
left: clamp(1.1rem, 3vw, 2rem); right: auto;
top: clamp(1.1rem, 3vh, 2rem); bottom: auto;
text-align: left; max-width: min(62vw, 22rem); width: max-content;
padding: .42rem .85rem;
transform: translateY(14px);
}
.eco-layer.is-active .eco-b5-note { transform: translateY(0); }
.eco-b5-note span { font-size: clamp(1.1rem, 1.4vw, 1.4rem); letter-spacing: -.02em; }
.eco-b5-note::before { inset: -8% -8%; border-radius: 12px; }
/* CHANGE 1c - reduced-motion static end-state: no lines (guard above),
and the beat-5 note stays small in the top-left. */
@media (prefers-reduced-motion: reduce) {
.eco-b5-note { display: block !important; opacity: 1 !important; transform: none !important; }
}
/* CHANGE 2 - remove the legacy circle/ring overlay on the proof image
(.media-slot::before inset circle). circle removed per Errol 2026-07-14 - never re-add. */
.media-slot::before,
.proof .media-slot::before,
.proof.is-visible .media-slot::before { display: none !important; content: none !important; }
/* ============================================================
v6.4 (Errol 2026-07-14) Append-only. Overrides prior v6/v6.1/v6.3.
Four marked-up review changes; nothing else touched.
============================================================ */
/* CHANGE 1 - 7th cream name chip "Contractor Services" on the top-center
hexagon (beat 5). Same .eco-label chip style; non-linked static label
(no matching ledger card by design). Sits above the top-center building,
clears the top-left "Connected by TMG." note and every other chip. */
.lbl-7 { left: 50%; top: 13%; }
.eco-label-static { cursor: default; }
/* CHANGE 2 - founder portrait beside the copy. Heading spans the top,
then a two-column row: portrait | copy. Large radius, soft shadow,
no hard rectangle edge, face fully visible. */
.founder-grid {
grid-template-columns: .82fr 1.18fr;
grid-template-areas: "head head" "portrait copy";
align-items: start;
column-gap: clamp(2rem, 6vw, 6rem);
}
.founder-grid h2 { grid-area: head; }
.founder-portrait { grid-area: portrait; margin: 0; align-self: start; }
.founder-portrait img {
display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1498;
object-fit: cover; border-radius: 26px;
box-shadow: 0 34px 80px -34px rgba(8,21,31,.55), 0 4px 14px rgba(8,21,31,.14), inset 0 0 0 1px rgba(255,135,0,.14);
}
.founder-grid > div { grid-area: copy; }
@media (max-width: 760px) {
.founder-grid { grid-template-columns: 1fr; grid-template-areas: "head" "portrait" "copy"; }
.founder-portrait { max-width: 22rem; }
}
/* CHANGE 4 - hero: true two-column at the top (copy left, contained image
right, side by side, both visible). Smaller H1 so it fits BESIDE the
image instead of pushing it down. Stack to one column only at true
mobile (<=700px), image below copy there. */
body.home .hero h1 { font-size: clamp(2.6rem, 5vw, 4.6rem) !important; }
@media (min-width: 701px) {
body.home .hero {
grid-template-columns: minmax(0, 1.02fr) minmax(0, .92fr) !important;
align-items: center;
}
body.home .hero-copy { max-width: 42rem; }
body.home .hero-figure { justify-self: end; width: 100%; max-width: 40rem; }
}
@media (max-width: 700px) {
body.home .hero {
grid-template-columns: 1fr !important;
row-gap: clamp(1.75rem, 6vw, 2.75rem);
align-items: start;
padding-top: 8.5rem; padding-bottom: 3.5rem; min-height: auto;
}
body.home .hero-copy { max-width: none; }
body.home .hero-figure { justify-self: stretch; max-width: none; }
body.home .hero-figure-inner { aspect-ratio: 4 / 3; }
}
/* ============================================================
v6.5 (Errol 2026-07-14) Append-only. Overrides prior v6/v6.1/v6.3/v6.4.
Nothing else touched. Two CSS fixes below (Fix 2/beat-3 needed no change -
beat 3 already renders as the compact top-left eco-b5-note chip identical
to beat 4; verified at 1440 and 390).
============================================================ */
/* FIX 1 - vision-band "cut off / doesn't complete as you scroll" ROOT CAUSE.
The reveal (is-visible) fires and completes fine - not the bug. The real
defect: v6 overrode .vision-band::before to inset:0, removing the original
inset:-6% 0 parallax buffer. The data-scene scroll handler shifts ::before
by up to +/-6% (translateY of --scene-shift), so with inset:0 a thin strip
of bare section showed at the top/bottom edge as the section scrolled by.
Restore an ample overscan buffer so the maquette image always covers the
full section at any shift; overflow:hidden on .vision-band clips the extra.
Scoped to .vision-band only (contact-hero left as-is). */
.vision-band::before { inset: -10% 0 !important; }
/* FIX 3 - vision-band type: shrink the H1 ~13-15% and the support paragraph
~1 step so more of the maquette building shows through behind the text.
Wording, layout, and CTA position unchanged - size only. Contrast verified
>=4.5:1 at the new sizes (near-white / orange over the navy-tinted image). */
body.home .vision-band h2 { font-size: clamp(3.3rem, 6.8vw, 7.3rem); }
body.home .vision-band > div > p:not(.eyebrow) { font-size: clamp(0.9rem, 1.05vw, 1rem); }
@media (max-width: 760px) {
body.home .vision-band h2 { font-size: clamp(3rem, 12.2vw, 5.2rem); }
}
/* ============================================================
v6.6 — Method step 4 no longer clipped + condensed method→ecosystem
transition (Errol 2026-07-14, Opus). Append-only; styles.css only.
============================================================ */
/* FIX 1 — ROOT CAUSE of the step-4 clip: the tall .ecosystem section's scene
backdrop (::before, inset:-6% of a ~460svh section ≈ 260px) overscanned
UPWARD and painted its navy/building background over the bottom ~260px of
the method section, covering method step 4's headline + copy. Pin the
ecosystem backdrop to its own box and drop the parallax translate so it can
never bleed into method. Scoped to .ecosystem only (contact-hero /
vision-band untouched). No seam: inset:0 + no transform = static full-cover. */
.ecosystem::before { inset: 0 !important; transform: none !important; }
/* FIX 2 — condense the navy dead space between method step 4 and the
"Specialized companies." heading (was ~202px @1440 / ~113px @390 =
method padding-bottom + ecosystem padding-top). Tighten both to a short,
clean transition — not zero, not a canyon. */
.method { padding-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.ecosystem { padding-top: clamp(1.75rem, 3.5vw, 3rem); }
/* ============================================================
v7.1 (2026-07-14, Opus) — ECOSYSTEM reverted to the v6.6 maquette
5-beat sequence (the v7 construction block was removed above). The
6-frame CONSTRUCTION SEQUENCE now lives in the METHOD sticky visual,
replacing the old CSS orbit .method-core placeholder.
Scroll-linked stacked-image crossfade + per-frame Ken-Burns via --mp
(set on the active frame in JS). Motion is transform-only/GPU.
============================================================ */
.method-build {
position: relative;
width: min(100%, 34rem);
aspect-ratio: 4 / 3;
border-radius: 22px;
overflow: hidden;
background: var(--ink);
box-shadow: 0 34px 80px -34px rgba(16,35,49,.5), 0 4px 14px rgba(16,35,49,.12), inset 0 0 0 1px rgba(16,35,49,.06);
}
.method-frame {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .5s ease; /* crossfade only; transform tracks scroll 1:1 */
will-change: opacity, transform;
transform: scale(1.04);
}
.method-frame.is-active { opacity: 1; }
/* Per-frame camera moves (subtle: <=8% scale, <=4% translate; always full-cover).
1 push-IN on the foundation | 2 drift L->R across the framing |
3 pull-BACK off the finished core | 4 track along the orange cord |
5 push-IN on the rising second building | 6 pull-BACK reveal of the field. */
.method-frame[data-frame="1"].is-active { transform: scale(calc(1.0 + 0.08 * var(--mp, 0))); }
.method-frame[data-frame="2"].is-active { transform: scale(1.06) translateX(calc(-2% + 4% * var(--mp, 0))); }
.method-frame[data-frame="3"].is-active { transform: scale(calc(1.08 - 0.08 * var(--mp, 0))); }
.method-frame[data-frame="4"].is-active { transform: scale(1.06) translateX(calc(2% - 4% * var(--mp, 0))); }
.method-frame[data-frame="5"].is-active { transform: scale(calc(1.02 + 0.06 * var(--mp, 0))); }
.method-frame[data-frame="6"].is-active { transform: scale(calc(1.07 - 0.06 * var(--mp, 0))); }
@media (max-width: 760px) {
.method-build { width: min(78vw, 26rem); }
}
/* Reduced motion: no camera, show the finished build (frame 6) statically. */
@media (prefers-reduced-motion: reduce) {
.method-frame { transition: none !important; transform: none !important; opacity: 0 !important; }
.method-frame[data-frame="6"] { opacity: 1 !important; }
}