:root {
  --ink: #15171a;
  --paper: #f1f0eb;
  --paper-2: #e7e6e0;
  --accent: #5b7ab6;
  --accent-light: #b9c9e5;
  --line: rgba(21,23,26,.24);
  --muted: #85868a;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .16; z-index: 30; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.site-header { height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: rgba(241,240,235,.88); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.03em; }
.brand-logo { height: 21px; width: auto; display: block; }
nav { display: flex; gap: 30px; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
nav a, .header-cta { transition: color .2s; }
nav a:hover, .header-cta:hover { color: var(--accent); }
.header-cta { justify-self: end; font: 500 12px var(--mono); text-transform: uppercase; }
.section-grid { display: grid; grid-template-columns: 90px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.section-index { font: 400 11px var(--mono); padding: 30px 28px; border-right: 1px solid var(--line); }
.hero { min-height: calc(100vh - 76px); grid-template-rows: 1fr auto; position: relative; overflow: hidden; }
.hero-copy { padding: clamp(54px,8vw,110px) clamp(28px,5vw,76px); position: relative; z-index: 2; }
.eyebrow, .kicker { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 30px; }
h1 { font-size: clamp(58px,9.5vw,148px); line-height: .85; letter-spacing: -.075em; margin: 0; max-width: 1180px; font-weight: 600; }
h1 em { color: var(--accent); font-style: normal; }
.hero-intro { font-size: clamp(17px,2vw,25px); line-height: 1.45; max-width: 650px; margin: 50px 0 0 auto; }
.hero-art { position: absolute; width: min(42vw,580px); aspect-ratio: 1; right: -8vw; top: calc(50% - min(21vw,290px)); z-index: 1; }
.hero-art svg { display: block; width: 100%; height: auto; }
.hr { fill: none; stroke: rgba(21,23,26,.13); stroke-width: 1; }
.hr.dashed { stroke: rgba(91,122,182,.5); stroke-dasharray: 3 10; stroke-linecap: round; }
.ring-slow { animation: hero-ring 60s linear infinite; transform-origin: 300px 300px; }
@keyframes hero-ring { to { transform: rotate(360deg); } }
.core-group { animation: hero-core 4.5s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes hero-core { 50% { transform: scale(1.04); } }
.core-dot { fill: var(--accent); }
.core-halo { fill: none; stroke: rgba(91,122,182,.5); animation: hero-halo 4.5s ease-in-out infinite; }
@keyframes hero-halo { 50% { opacity: .35; } }
.core-label { font: 500 12px var(--mono); fill: #fff; text-transform: uppercase; letter-spacing: .08em; }
/* Preference signals drift in from the edges and are absorbed by the core. */
.sig { fill: var(--accent); opacity: 0; offset-rotate: 0deg; animation: hero-sig 6s ease-in infinite; }
.signals circle:nth-child(2) { animation-delay: .8s; animation-duration: 6.6s; }
.signals circle:nth-child(3) { animation-delay: 1.6s; animation-duration: 5.2s; }
.signals circle:nth-child(4) { animation-delay: 2.4s; animation-duration: 7s; }
.signals circle:nth-child(5) { animation-delay: 3.2s; animation-duration: 6s; }
.signals circle:nth-child(6) { animation-delay: 4s; animation-duration: 5.6s; }
.signals circle:nth-child(7) { animation-delay: 4.8s; animation-duration: 6.8s; }
@keyframes hero-sig { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: .85; } 75% { opacity: .65; } 96% { opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
.hero-footer { grid-column: 2; display: flex; justify-content: space-between; padding: 18px 28px; border-top: 1px solid var(--line); font: 400 10px var(--mono); text-transform: uppercase; }
.statement { min-height: 65vh; display: flex; flex-direction: column; justify-content: center; padding: 10vw 8vw; font-size: clamp(42px,7.5vw,115px); line-height: .98; letter-spacing: -.065em; font-weight: 600; }
.statement-line.muted { color: #aaa9a3; margin-left: 8vw; }
.story { min-height: 100vh; grid-template-columns: 90px minmax(0,1fr) minmax(240px,360px); }
.story-copy { padding: 10vw 10vw 11vw 8vw; border-right: 1px solid var(--line); max-width: 1040px; }
h2 { font-size: clamp(42px,6.2vw,92px); line-height: .98; letter-spacing: -.06em; margin: 0 0 48px; font-weight: 600; }
.lead { font-size: clamp(22px,2.6vw,36px) !important; line-height: 1.3 !important; letter-spacing: -.035em; }
.story-copy p, .future-copy p { font-size: 18px; line-height: 1.65; max-width: 760px; }
.margin-note { align-self: end; margin: 0 4vw 7vw; padding-top: 18px; border-top: 1px solid var(--ink); max-width: 300px; }
.margin-note span { display: block; margin-bottom: 16px; color: var(--accent); }
.margin-note strong { font-size: 17px; line-height: 1.45; }
.mono { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.diagram-wrap { padding: 70px 5vw 100px; background: var(--ink); color: var(--paper); }
.diagram-label { margin-bottom: 40px; color: var(--accent-light); }
.diagram { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: stretch; }
.diagram-side { padding: 20px 0; }
.side-heading { font: 700 clamp(19px,2.2vw,30px) var(--sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; margin: 0 0 10px; }
.side-sub { text-align: center; color: #9fa0a4; font-size: 17px; margin: 0 0 36px; }
.side-art { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
.side-art .ln { fill: none; stroke: #e8e7e2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-art .thin { stroke-width: 1.4; }
.side-art .dotted { stroke-dasharray: 2 7; }
.side-art .faint { stroke: rgba(241,240,235,.4); }
.side-art .acc { stroke: var(--accent); }
.side-art .accl { stroke: var(--accent-light); }
.side-art text { font-family: var(--mono); text-transform: uppercase; }
.art-label { font-size: 14px; letter-spacing: .18em; fill: var(--paper); }
.art-label.blue { fill: var(--accent-light); }
.art-cap { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; fill: #87888c; }
.chip-text { font-size: 10.5px; letter-spacing: .14em; fill: var(--accent-light); }
/* Signal dots ride the connector paths; base opacity 0 keeps them invisible if
   offset-path is unsupported. */
.flow-dot { fill: #d8d9db; opacity: 0; offset-rotate: 0deg; animation: flow-dot 2.8s linear infinite; }
.aligned .flow-dot { fill: var(--accent-light); }
.fd2 { animation-delay: .95s; }
.fd3 { animation-delay: 1.9s; }
@keyframes flow-dot { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* Interaction dots ping-pong between a service and the agent. */
.link-dot { fill: #d8d9db; opacity: 0; offset-rotate: 0deg; animation: link-dot 2.2s ease-in-out infinite alternate; }
.ld2 { animation-duration: 3s; animation-delay: .4s; }
@keyframes link-dot { from { offset-distance: 0%; opacity: 1; } to { offset-distance: 100%; opacity: 1; } }
.ring-orbit { animation: orbit-spin 45s linear infinite; transform-origin: 300px 105px; }
.ring-orbit.rev { animation-duration: 70s; animation-direction: reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.diagram-pill { width: fit-content; margin: 14px auto 0; padding: 14px 34px; border: 1px solid rgba(241,240,235,.5); border-radius: 999px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .2em; text-align: center; }
.aligned .diagram-pill { border-color: rgba(91,122,182,.9); color: var(--accent-light); }
.diagram-arrow { display: grid; place-items: center; color: var(--accent-light); }
.research { min-height: 100vh; }
.research-intro { padding: 100px 8vw 60px; }
.research-list { grid-column: 2; border-top: 1px solid var(--line); }
.research-item { min-height: 300px; display: grid; grid-template-columns: 130px 1fr 1fr 220px; gap: 30px; align-items: center; padding: 45px 5vw; border-bottom: 1px solid var(--line); position: relative; }
.research-item h3 { font-size: clamp(28px,3.5vw,52px); letter-spacing: -.045em; margin: 0; line-height: 1; }
.research-item p { max-width: 450px; line-height: 1.55; color: #55575b; }
.item-glyph { width: 200px; height: 200px; position: relative; justify-self: end; }
/* multiply + slight brightness lift melts the illustrations' off-white backgrounds
   into the page paper, so no rectangular seam shows. */
.item-glyph img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.07); }
.quote-section { background: var(--accent); color: white; padding: 9vw 8vw; min-height: 80vh; display: grid; grid-template-columns: 1fr 5fr; align-items: start; }
.quote-mark { font-size: 18vw; line-height: .7; opacity: .28; }
blockquote { margin: 0; font-size: clamp(45px,7vw,100px); line-height: 1; letter-spacing: -.06em; max-width: 1200px; }
.principles-header { padding: 100px 8vw 70px; }
.principle-grid { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.principle { min-height: 420px; padding: 40px; border-right: 1px solid var(--line); display:flex; flex-direction:column; }
.principle:last-child { border-right:0; }
.principle span { font: 400 11px var(--mono); color:var(--accent); }
.principle h3 { font-size: clamp(28px,3vw,44px); line-height:1.05; letter-spacing:-.045em; margin:auto 0 30px; }
.principle p { line-height:1.55; color:#5d5e61; }
.future { min-height: 100vh; background: #dfe4ed; }
.future-copy { padding: 110px 7vw; max-width: 900px; }
.future-canvas { grid-column: 2; position: relative; min-height: 760px; overflow: hidden; display: grid; place-items: center; padding: 60px 0 90px; }
.agent-map { position: relative; width: min(660px, 86%); aspect-ratio: 1; }
.map-halo { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(rgba(91,122,182,.38) 1.3px, transparent 1.4px); background-size: 13px 13px; -webkit-mask: radial-gradient(circle closest-side, transparent 60%, #000 64%, #000 88%, transparent 95%); mask: radial-gradient(circle closest-side, transparent 60%, #000 64%, #000 88%, transparent 95%); }
.spoke { position: absolute; left: 50%; top: 50%; width: 38%; height: 1.5px; background: rgba(91,122,182,.5); transform-origin: left center; }
.sp1{transform:rotate(270deg)}.sp2{transform:rotate(342deg)}.sp3{transform:rotate(54deg)}.sp4{transform:rotate(126deg)}.sp5{transform:rotate(198deg)}
/* Pulses flow from the agent outward; they start hidden beneath the center node
   (z-index) and surface at its edge, then dive under the satellite at the far end. */
.spoke::after { content:""; position:absolute; left:0; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--accent); animation: spoke-flow 3.2s linear infinite; }
.sp2::after{animation-delay:.65s}.sp3::after{animation-delay:1.3s}.sp4::after{animation-delay:1.95s}.sp5::after{animation-delay:2.6s}
.future-node { position: absolute; width: 112px; height: 112px; border: 1.5px solid rgba(91,122,182,.8); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: #40538a; background: #f6f8fc; z-index: 2; }
.future-node svg { width: 26px; height: 26px; color: var(--accent); stroke: currentColor; }
/* Satellite centers sit on the spoke circle (radius 38%), a pentagon with its apex at
   the top. The -56px margins anchor each 112px node by its center. */
.future-node:not(.main-node) { margin: -56px 0 0 -56px; }
.n1{left:50%;top:12%}
.n2{left:86.1%;top:38.3%}
.n3{left:72.3%;top:80.7%}
.n4{left:27.7%;top:80.7%}
.n5{left:13.9%;top:38.3%}
.main-node { width: 230px; height: 230px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--accent); border: 6px solid #eef1f8; color: white; font-size: 13px; letter-spacing: .06em; line-height: 1.6; gap: 12px; z-index: 3; box-shadow: 0 0 70px rgba(91,122,182,.4); animation: agent-glow 5s ease-in-out infinite; }
.main-node svg { width: 42px; height: 42px; color: #fff; }
@keyframes agent-glow { 50% { box-shadow: 0 0 110px rgba(91,122,182,.65); } }
@keyframes spoke-flow { from { left: 0; } to { left: calc(100% - 7px); } }
.lab-note { background: var(--ink); color:var(--paper); padding: 11vw 10vw; }
.lab-note-inner { max-width:1100px; }
.lab-note .mono { color:var(--accent-light); }
.lab-note h2 { margin-top:25px; }
.lab-note p { font-size:22px; line-height:1.5; max-width:800px; color:#b8b9bc; }
.contact { min-height: 75vh; }
.contact-copy { padding: 100px 8vw 60px; }
.contact-copy p:last-child { font-size:18px; }
.signup { grid-column:2; align-self:end; padding:0 8vw 100px; }
.signup label { display:block; font:400 10px var(--mono); text-transform:uppercase; margin-bottom:12px; }
.input-row { display:grid; grid-template-columns:1fr auto; border-bottom:2px solid var(--ink); }
input { background:transparent; border:0; padding:20px 0; font:400 clamp(22px,3vw,42px) var(--sans); outline:none; color:var(--ink); }
button { border:0; background:var(--accent); color:white; padding:0 28px; font:500 11px var(--mono); text-transform:uppercase; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.form-note,.success,.form-error { font:400 10px var(--mono); text-transform:uppercase; color:#777; }
.success { display:none; color:var(--accent); }
.form-error { display:none; color:#b0532f; }
.signup.submitted .success { display:block; }.signup.submitted .form-note{display:none}.signup.submitted .form-error{display:none}
.signup.errored .form-error { display:block; }.signup.errored .form-note{display:none}
.hp-field { position:absolute; left:-9999px; opacity:0; pointer-events:none; }
footer { min-height:180px; display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:30px; padding:50px 28px; border-top:1px solid var(--line); }
footer p { margin:0; }
.reveal { opacity:0; transform:translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; } nav { display:none; }
  .section-grid { grid-template-columns:50px minmax(0,1fr); }.section-index{padding:24px 15px}
  .hero-art{opacity:.5;width:92vw;right:-36vw;top:calc(50% - 46vw)}.hero-copy{padding-left:7vw}.hero-footer{padding-right:15px}
  h1{font-size:clamp(50px,14vw,95px)}
  .story{grid-template-columns:50px minmax(0,1fr)}.story-copy{border-right:0;padding:90px 7vw}.margin-note{display:none}
  .diagram{grid-template-columns:1fr}.diagram-arrow{height:80px;transform:rotate(90deg)}
  .research-item{grid-template-columns:1fr;padding:40px 7vw}.item-glyph{justify-self:start;width:140px;height:140px}.research-item span{order:0}.research-item h3{order:1}.research-item p{order:2}.item-glyph{order:3}
  .principle-grid{grid-template-columns:1fr}.principle{min-height:320px;border-right:0;border-bottom:1px solid var(--line)}
  .future{display:grid}.future-copy{padding:90px 7vw}.future-canvas{min-height:600px;padding:30px 0 60px}
  .agent-map{width:94%}
  .future-node{font-size:8.5px;gap:5px}
  .future-node:not(.main-node){width:88px;height:88px;margin:-44px 0 0 -44px}
  .future-node svg{width:20px;height:20px}
  .main-node{width:170px;height:170px;font-size:11px;gap:8px}
  .main-node svg{width:30px;height:30px}
  .input-row{grid-template-columns:1fr}.input-row button{height:60px}footer{grid-template-columns:1fr;align-items:start}
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .reveal{opacity:1;transform:none} }