/* ---- echo-hero.css ---- */
/* ECHO site v2 · hero = the live site's hero (same header, type, sizes, alignment) with the echo scene instead of the video. */
:root{--gut:28px}
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ivory,#f2eee5)}
.aurora{position:absolute;inset:0;background:radial-gradient(55% 50% at 72% 46%,rgba(223,207,185,.85),rgba(223,207,185,0) 70%),radial-gradient(40% 35% at 92% 8%,rgba(236,228,214,.9),rgba(236,228,214,0) 70%),radial-gradient(45% 40% at 85% 95%,rgba(207,220,216,.75),rgba(207,220,216,0) 70%),linear-gradient(180deg,#f6f3ec,#ece6db);animation:aur 11s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate3d(-2%,1.5%,0) scale(1.05)}}
#echoes,#gl{position:absolute;inset:0;width:100%;height:100%}
#gl canvas{display:block;width:100% !important;height:100% !important}
.grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.dive{position:absolute;inset:0;opacity:0;background:radial-gradient(60% 60% at 50% 50%,rgba(250,246,238,0),rgba(223,207,185,.4) 70%,rgba(150,128,100,.4));mix-blend-mode:multiply}
main{position:relative;z-index:1}
.hero{background:transparent}
.hero-protection{background:linear-gradient(90deg,rgba(249,247,241,.97) 0%,rgba(247,244,236,.93) 22%,rgba(242,237,227,.8) 36%,rgba(236,229,216,.45) 50%,rgba(236,232,222,.12) 62%,rgba(242,239,231,0) 74%)}
.hero-description{color:#4a463f}
.echo-track{position:relative;height:180vh}
.echo-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.echo-pin .hero{min-height:100%;height:100%}
html.static .echo-track,html:not(.js) .echo-track{height:auto}
html.static .echo-pin,html:not(.js) .echo-pin{position:relative;height:auto}
html:not(.js) .hero-line,html.static .hero-line,html:not(.js) .reveal,html.static .reveal{opacity:1;transform:none;filter:none}
html.static .hero-line{animation-name:v2riseNb}
.cue{position:absolute;left:50%;bottom:26px;width:1px;height:54px;background:rgba(16,16,14,.12);overflow:hidden;z-index:10;animation:v2fade .8s ease 1.1s both}
.cue::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:rgba(16,16,14,.7);animation:cue 2.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{to{top:110%}}
html.static .cue{display:none}
/* entrance: plays from the first paint, never waits for scripts or the 3D scene */
@keyframes v2rise{from{opacity:0;transform:translateY(.24em);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes v2riseNb{from{opacity:0;transform:translateY(.24em)}to{opacity:1;transform:none}}
@keyframes v2up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes v2fade{from{opacity:0}to{opacity:1}}
@keyframes v2drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
html.js .hero-line{animation:v2rise .8s cubic-bezier(.16,1,.3,1) .05s both}
html.js .hero-line:nth-child(2){animation-delay:.12s}
html.js .hero .reveal{animation:v2up .8s cubic-bezier(.16,1,.3,1) .22s both}
html.js .hero .reveal.delay-3{animation-delay:.3s}
html.js .nav-shell>.container{animation:v2drop .7s cubic-bezier(.2,0,0,1) both}
html.m3d .hero-line{animation-name:v2riseNb}
/* the 3D sea fades in under the copy once it has drawn its first frame */
#gl canvas{opacity:0;transition:opacity 1.1s ease}
html.open #gl canvas{opacity:1}
@media (prefers-reduced-motion:reduce){.aurora,.cue::after{animation:none}html.js .hero-line,html.js .hero .reveal,html.js .nav-shell>.container,.cue{animation:none}}

/* phones / no WebGL / reduced motion: a still of the echo sea under the copy */
html.static .echo-pin .hero::after,html:not(.js) .echo-pin .hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:62%;z-index:-7;background:url(/assets/media/echo-sea.svg) center bottom/cover no-repeat;pointer-events:none}
@media (min-width:901px){html.static .echo-pin .hero::after{height:70%;left:30%;right:-5%}}
html.static .echo-pin .hero::after,html:not(.js) .echo-pin .hero::after{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
html.static .echo-pin,html.static .echo-pin .hero{overflow-x:clip;overflow-y:visible}
html.static .hero-protection,html.static .hero-pearl-light{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
html.static body{background:#ece6db}
/* ---- products.css ---- */
/* ECHO site v2 · step 2 — products: AI Studio's card carousel in ECHO's light. The tunnel's light opens into an ivory
   room; a giant line runs behind; BoardVision, Flow and Frame turn to the front one after another as you scroll. */
.pr-track{position:relative;height:510vh;z-index:2}
.pr-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(48% 55% at 50% 52%,#fdf8ef 0%,#f5ecdf 40%,#ece4d7 75%,#e6dfd3 100%)}
.pr-light{position:absolute;left:50%;top:52%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;background:radial-gradient(circle,rgba(255,250,240,.95),rgba(236,222,200,.35) 45%,rgba(236,222,200,0) 70%);pointer-events:none}
.pr-marquee{position:absolute;left:0;top:50%;transform:translateY(-52%);width:100%;overflow:hidden;pointer-events:none}
.pr-marquee-row{display:inline-block;white-space:nowrap;font-size:clamp(130px,15vw,230px);font-weight:500;letter-spacing:-.065em;line-height:1;color:rgba(16,16,14,.075);will-change:transform}
.pr-label{position:absolute;left:max(24px,calc((100vw - 1328px)/2));top:118px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;color:#666158}
.pr-lead{position:absolute;left:max(24px,calc((100vw - 1328px)/2));top:146px;max-width:330px;font-size:14.5px;line-height:1.6;color:#4a463f}
.pr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr-deck{position:absolute;left:50%;top:49%;width:0;height:0;list-style:none;perspective:1700px;transform-style:preserve-3d}
.pr-card{position:absolute;left:-225px;top:-320px;width:450px;height:630px;border-radius:24px;overflow:hidden;will-change:transform,opacity,filter;
  box-shadow:0 60px 110px -40px rgba(50,36,16,.45),0 2px 0 rgba(255,255,255,.5) inset;transition:box-shadow .4s ease}
.pr-cover{position:absolute;inset:0;z-index:5;border-radius:inherit}
.pr-cover:focus-visible{outline:2px solid #10100e;outline-offset:4px}
.pr-tag{position:absolute;left:24px;top:22px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em}
.pr-name{position:absolute;left:26px;bottom:100px;font-size:50px;font-weight:500;letter-spacing:-.05em;line-height:1}
.pr-text{position:absolute;left:24px;right:24px;bottom:30px;font-size:14px;line-height:1.5}
.pr-meta{position:absolute;left:24px;right:24px;bottom:16px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
/* BoardVision: ink card, the real prototype screen inside */
.pr-bv{background:radial-gradient(80% 60% at 50% 0%,#2a2620,#10100e 70%);color:#fbfaf6}
.pr-bv .pr-tag{color:#e4d3bb}
.pr-bv .pr-shot{position:absolute;left:14px;right:14px;top:54px;height:290px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.pr-bv .pr-shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.pr-bv .pr-name{bottom:132px}.pr-bv .pr-text{bottom:52px;color:rgba(251,250,246,.78)}
/* Flow and Frame: champagne cards, quiet abstract marks */
.pr-flow{background:radial-gradient(70% 55% at 25% 25%,#fffdf8,rgba(255,253,248,0) 60%),radial-gradient(60% 60% at 85% 85%,#cfdcd8,rgba(207,220,216,0) 70%),linear-gradient(150deg,#efe6d8,#ddd0bc)}
.pr-frame{background:radial-gradient(70% 55% at 75% 20%,#fffdf8,rgba(255,253,248,0) 60%),radial-gradient(60% 60% at 15% 90%,#e4d3bb,rgba(228,211,187,0) 70%),linear-gradient(160deg,#e9e0d2,#cfc4b2)}
.pr-flow .pr-tag,.pr-frame .pr-tag{color:#7a6650}
.pr-flow .pr-text,.pr-frame .pr-text{color:#4a463f}
.pr-art{position:absolute;left:50%;top:40%;width:220px;height:220px;transform:translate(-50%,-50%)}
.pr-flow .pr-art i{position:absolute;inset:0;border:1.5px solid rgba(16,16,14,.55);border-radius:50%}
.pr-flow .pr-art i:nth-child(2){inset:28px;border-color:rgba(16,16,14,.35);transform:translateX(26px)}
.pr-flow .pr-art i:nth-child(3){inset:56px;border-color:rgba(16,16,14,.2);transform:translateX(52px)}
.pr-frame .pr-art i{position:absolute;inset:10px;border:1.5px solid rgba(16,16,14,.5);border-radius:18px;transform:rotate(-6deg)}
.pr-frame .pr-art i:nth-child(2){inset:44px;border-color:rgba(16,16,14,.28);transform:rotate(5deg)}
.pr-dots{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);display:flex;gap:8px}
.pr-dots i{width:6px;height:6px;border-radius:50%;background:rgba(16,16,14,.2);transition:background .3s,width .3s}
.pr-dots i.on{width:22px;border-radius:3px;background:#10100e}
.pr-cta{position:absolute !important;left:50%;bottom:44px;transform:translateX(-50%)}
/* static: phones, no JS, reduced motion */
html.static .pr-track,html:not(.js) .pr-track{height:auto}
html.static .pr-pin,html:not(.js) .pr-pin{position:relative;height:auto;padding:150px 20px 140px}
html.static .pr-deck,html:not(.js) .pr-deck{position:relative;left:auto;top:auto;width:auto;height:auto;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px 0 20px;perspective:none}
html.static .pr-card,html:not(.js) .pr-card{position:relative;left:auto;top:auto;flex:0 0 min(84vw,400px);scroll-snap-align:center;transform:none !important;opacity:1 !important;filter:none !important}
html.static .pr-marquee,html:not(.js) .pr-marquee{top:120px;transform:none}
html.static .pr-dots,html:not(.js) .pr-dots{display:none}
html.static .pr-cta,html:not(.js) .pr-cta{position:relative !important;left:auto;bottom:auto;transform:none;margin-top:16px}
html.static .pr-label,html.static .pr-lead,html:not(.js) .pr-label,html:not(.js) .pr-lead{position:relative;left:auto;top:auto}
html.static .pr-lead,html:not(.js) .pr-lead{margin-top:12px}
/* the room is not a new section sliding in: it fades up out of the tunnel's light, over the last screen of the dive */
html:not(.static).js .pr-track{margin-top:-100vh}
html:not(.static).js .pr-pin{opacity:0}
@media (max-width:900px){html.static .pr-marquee{top:auto;bottom:40px;opacity:.7}html.static .pr-marquee-row{font-size:96px}}
html.static .pr-pin,html:not(.js) .pr-pin{background:linear-gradient(180deg,rgba(236,228,215,0),#ece4d7 180px,#e9e1d4)}
html.static .pr-pin,html:not(.js) .pr-pin{padding-top:56px}
/* ---- company.css ---- */
/* ECHO site v2 · step 3 — company: the scattered dots gather into ECHO's mark (Vesper's "brain" moment, ECHO's own symbol). */
.co-track{position:relative;height:360vh;z-index:3}
.co-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(55% 60% at 70% 50%,#faf4ea,#f0e8db 55%,#e8e1d5)}
.co-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.co-still{display:none}
.co-copy{position:absolute;left:max(24px,calc((100vw - 1328px)/2));top:50%;transform:translateY(-50%);width:min(620px,46vw);z-index:2}
.co-label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;color:#666158}
.co-title{margin-top:24px;font-size:clamp(52px,5.6vw,88px);font-weight:500;letter-spacing:-.06em;line-height:.95}
.co-title span{display:block;overflow:hidden;padding:.14em 0 .2em;margin:-.14em 0 -.2em}
.co-text{margin-top:28px;max-width:450px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.58;color:#4a463f}
.co-link{display:inline-flex;gap:8px;margin-top:30px;font-size:15px;color:#10100e;border-bottom:1px solid currentColor;padding-bottom:3px}
.co-tag{position:absolute;right:max(24px,calc((100vw - 1328px)/2));bottom:46px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;color:#666158}
/* reveal, driven by company.js through --in (0..1) */
.co-label,.co-text,.co-link,.co-tag{opacity:var(--in,1);transform:translateY(calc((1 - var(--in,1)) * 24px))}
.co-title span{opacity:var(--in,1);transform:translateY(calc((1 - var(--in,1)) * 40px));filter:blur(calc((1 - var(--in,1)) * 10px))}
.co-title span+span{opacity:calc(var(--in,1) * 1)}
html.static .co-track,html:not(.js) .co-track{height:auto}
html.static .co-pin,html:not(.js) .co-pin{position:relative;height:auto;min-height:100vh;padding:120px 20px}
html.static .co-gl,html:not(.js) .co-gl{display:none}
html.static .co-still,html:not(.js) .co-still{display:block;height:auto;position:absolute;right:6%;top:50%;transform:translateY(-50%);width:min(40vw,420px);opacity:.9}
@media (max-width:900px){html.static .co-copy{position:relative;left:auto;top:auto;transform:none;width:auto}html.static .co-still{position:relative;right:auto;top:auto;transform:none;width:60vw;margin:40px auto 0}.co-tag{position:relative;right:auto;bottom:auto;margin-top:30px}}
/* ---- principles.css ---- */
/* ECHO site v2 · step 4 — principles: one principle owns the whole screen at a time (AI Studio's ghost words). */
.pv-track{position:relative;height:380vh;z-index:4}
.pv-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(60% 65% at var(--gx,28%) 50%,#faf3e7,#efe8dc 58%,#e8e1d5);transition:background-position 1s}
.pv-label{position:absolute;left:max(24px,calc((100vw - 1328px)/2));top:126px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;color:#666158}
.pv-count b{font-weight:400;color:#10100e}
.pv-slides{list-style:none}
.pv-slide{position:absolute;inset:0;pointer-events:none}
.pv-ghost{position:absolute;left:max(0px,calc((100vw - 1400px)/2));top:50%;transform:translateY(-48%);font-size:clamp(360px,40vw,600px);font-weight:500;letter-spacing:-.08em;line-height:.8;color:rgba(16,16,14,.055);transition:opacity 1s cubic-bezier(.2,0,0,1),transform 1.2s cubic-bezier(.2,0,0,1)}
.pv-title{position:absolute;left:max(24px,calc((100vw - 1328px)/2));top:50%;transform:translateY(-50%);font-size:clamp(96px,10.5vw,160px);font-weight:500;letter-spacing:-.07em;line-height:.9}
.pv-title span{display:block;overflow:hidden;padding:.14em 0 .2em;margin:-.14em 0 -.2em}
.pv-title span::before{content:none}
.pv-text{position:absolute;right:max(24px,calc((100vw - 1328px)/2));top:56%;width:min(380px,30vw);font-size:clamp(20px,1.8vw,27px);line-height:1.35;letter-spacing:-.02em;color:#2b2925}
/* states (JS sets .is-on / .is-past on slides) */
.pv-title span,.pv-text{transition:transform 1.1s cubic-bezier(.2,0,0,1),opacity .8s ease,filter 1s ease}
.pv-title span+span{transition-delay:.07s}
.pv-slide .pv-title span,.pv-slide .pv-text{transform:translateY(60px);opacity:0;filter:blur(10px)}
.pv-slide .pv-ghost{opacity:0;transform:translateY(-38%)}
.pv-slide.is-past .pv-title span,.pv-slide.is-past .pv-text{transform:translateY(-60px)}
.pv-slide.is-past .pv-ghost{transform:translateY(-58%)}
.pv-slide.is-on .pv-title span,.pv-slide.is-on .pv-text{transform:none;opacity:1;filter:none}
.pv-slide.is-on .pv-ghost{opacity:1;transform:translateY(-48%)}
.pv-tabs{position:absolute;right:max(24px,calc((100vw - 1328px)/2));bottom:58px;display:flex;gap:30px;list-style:none;font-size:15px;color:rgba(16,16,14,.35)}
.pv-tabs li{padding-bottom:4px;border-bottom:1px solid transparent;transition:color .4s,border-color .4s}
.pv-tabs li.on{color:#10100e;border-color:#10100e}
.pv-bar{position:absolute;left:max(24px,calc((100vw - 1328px)/2));bottom:64px;width:200px;height:1px;background:rgba(16,16,14,.15)}
.pv-bar i{position:absolute;inset:0;background:#10100e;transform-origin:left;transform:scaleX(var(--pv,0))}
/* static: every principle stacked, readable */
html.static .pv-track,html:not(.js) .pv-track{height:auto}
html.static .pv-pin,html:not(.js) .pv-pin{position:relative;height:auto;padding:130px 20px 80px}
html.static .pv-slide,html:not(.js) .pv-slide{position:relative;inset:auto;padding:40px 0;border-top:1px solid rgba(16,16,14,.12)}
html.static .pv-slide *,html:not(.js) .pv-slide *{opacity:1 !important;transform:none !important;filter:none !important}
html.static .pv-ghost,html:not(.js) .pv-ghost{position:absolute;left:auto;right:0;top:20px;font-size:160px}
html.static .pv-title,html:not(.js) .pv-title,html.static .pv-text,html:not(.js) .pv-text{position:relative;left:auto;right:auto;top:auto;width:auto}
html.static .pv-title,html:not(.js) .pv-title{font-size:64px}
html.static .pv-text,html:not(.js) .pv-text{margin-top:14px;font-size:19px}
html.static .pv-tabs,html.static .pv-bar,html:not(.js) .pv-tabs,html:not(.js) .pv-bar{display:none}
html.static .pv-label,html:not(.js) .pv-label{position:relative;left:auto;top:auto}
/* ---- journal.css ---- */
/* ECHO site v2 · step 5 — journal: the notes' own photographs float in depth; scroll flies the camera through them. */
.jr-track{position:relative;height:400vh;z-index:5}
.jr-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(55% 55% at 50% 50%,#fbf6ec,#efe8dc 60%,#e7e0d4);perspective:900px;perspective-origin:50% 50%}
.jr-head{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;z-index:2;pointer-events:none}
.jr-label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;color:#666158}
.jr-h2{margin-top:22px;font-size:clamp(56px,6vw,96px);font-weight:500;letter-spacing:-.06em;line-height:.95}
.jr-h2 span{display:block;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.jr-sub{margin:24px auto 0;max-width:460px;font-size:16px;line-height:1.55;color:#4a463f}
.jr-world{position:absolute;inset:0;list-style:none;transform-style:preserve-3d}
.jr-item{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.jr-card{position:absolute;left:-210px;top:-170px;width:420px;display:block;color:#10100e;text-decoration:none;will-change:transform,opacity,filter;transform-origin:50% 50%}
.jr-photo{display:block;width:420px;height:282px;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(50,36,16,.45)}
.jr-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,0,0,1)}
.jr-card:hover .jr-photo img{transform:scale(1.05)}
.jr-cap{display:block;margin-top:14px;opacity:var(--cap,0);transform:translateY(calc((1 - var(--cap,0)) * 12px));transition:opacity .3s}
.jr-no{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;color:#7a6650}
.jr-title{display:block;margin-top:8px;font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.jr-read{display:inline-block;margin-top:10px;font-size:13.5px;border-bottom:1px solid currentColor;padding-bottom:2px}
.jr-card:focus-visible{outline:2px solid #10100e;outline-offset:6px;border-radius:20px}
/* static: a plain grid of the six notes */
html.static .jr-track,html:not(.js) .jr-track{height:auto}
html.static .jr-pin,html:not(.js) .jr-pin{position:relative;height:auto;padding:120px 20px 80px;perspective:none}
html.static .jr-head,html:not(.js) .jr-head{position:relative;top:auto;transform:none}
html.static .jr-world,html:not(.js) .jr-world{position:relative;inset:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;margin-top:50px}
html.static .jr-item,html:not(.js) .jr-item{position:relative;left:auto;top:auto;width:auto;height:auto}
html.static .jr-card,html:not(.js) .jr-card{position:relative;left:auto;top:auto;width:auto;transform:none !important;opacity:1 !important;filter:none !important}
html.static .jr-photo,html:not(.js) .jr-photo{width:100%;height:auto;aspect-ratio:3/2}
html.static .jr-cap,html:not(.js) .jr-cap{--cap:1}
@media (max-width:600px){.jr-h2{font-size:44px}.jr-h2 span{display:inline}.jr-h2 span:first-child::after{content:" "}}
/* ---- contact.css ---- */
/* ECHO site v2 · step 6 — contact: the echo returns to where it began. One point of light, dotted rings leaving it. */
.ct{position:relative;z-index:6;height:200vh}
.ct-pin{position:sticky;top:0;height:100vh;height:100svh;padding-top:90px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(50% 55% at 50% 52%,#fbf6ec,#efe8dc 60%,#e8e1d5)}
html.static .ct,html:not(.js) .ct{height:auto}
html.static .ct-pin,html:not(.js) .ct-pin{position:relative;min-height:100vh;height:auto}
.ct-rings{position:absolute;inset:0;width:100%;height:100%;display:block}
.ct-copy{position:relative;z-index:2;text-align:center;padding:0 24px}
.ct-title{font-size:clamp(64px,8.4vw,128px);font-weight:500;letter-spacing:-.065em;line-height:.95;padding-bottom:.08em;text-shadow:0 0 60px #f6f0e6}
.ct-sub{margin:250px auto 0;max-width:520px;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:#4a463f;background:rgba(242,238,229,.72);border-radius:12px;padding:4px 12px;display:inline-block}
.ct-actions{margin-top:26px;display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.ct-mail{font-size:16px;color:#10100e;border-bottom:1px solid currentColor;padding-bottom:2px;text-decoration:none}
.ct-title,.ct-sub,.ct-actions{opacity:var(--in,1);transform:translateY(calc((1 - var(--in,1)) * 30px));transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,0,0,1)}
.ct-sub{transition-delay:.1s}.ct-actions{transition-delay:.2s}
.ft{position:relative;z-index:6;display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding:26px max(24px,calc((100vw - 1328px)/2)) 34px;background:#e8e1d5;border-top:1px solid rgba(16,16,14,.1);font-size:14px;color:#4a463f}
.ft-logo img{height:20px;width:auto;display:block}
.ft-links,.ft-langs{display:flex;gap:24px}
.ft a{color:inherit;text-decoration:none}.ft a:hover{color:#10100e}
.ft-langs a[aria-current]{color:#10100e}
.ft-sp{flex:1}
.ft-copy{width:100%;margin-top:8px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#666158}
@media (min-width:1100px){.ft-copy{width:auto;margin:0}}
@media (max-width:700px){.ct-sub{margin-top:28px}.ft-sp{display:none}}
/* ---- seams.css ---- */
/* ECHO site v2 · seams — no section slides in with a hard edge. Each pinned section after the products starts 60vh
   early, on top of the previous one, and dissolves in (seams.js drives the opacity); nav anchors land after the
   dissolve (negative scroll margin). */
html.js:not(.static) #company,html.js:not(.static) #principles,html.js:not(.static) #journal,html.js:not(.static) #contact{margin-top:-160vh;scroll-margin-top:calc(-60vh - 140px)}
html.js:not(.static) #products{scroll-margin-top:calc(-34vh - 72px)}
html.js:not(.static) .co-pin,html.js:not(.static) .pv-pin,html.js:not(.static) .jr-pin,html.js:not(.static) .ct-pin{opacity:0}
/* ---- m3d.css ---- */
/* ECHO site v2 · full 3D on phones and tablets (html.m3d = motion on; portrait layouts by aspect ratio). */
/* the fixed stage is sized to the large viewport so a phone toolbar sliding in/out never resizes it */
.stage{height:100vh;height:100lvh;bottom:auto}
html.m3d .echo-pin,html.m3d .pr-pin,html.m3d .co-pin,html.m3d .pv-pin,html.m3d .jr-pin,html.m3d .ct-pin{height:100vh;height:100svh}
/* touch: no hover-only affordances, no accidental text selection while dragging the sea */
html.m3d .stage{touch-action:auto}
html.m3d canvas{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}

/* products: the deck scales to the screen (k set by products.js) */
html.m3d .pr-deck{transform:scale(var(--k,1))}
html.m3d .pr-tag,html.m3d .pr-meta{font-size:calc(10px / var(--k,1))}
html.m3d .pr-text{font-size:max(14px,calc(9.6px / var(--k,1)))}
html.m3d .pr-tight .pr-lead{display:none}
html.m3d .pr-tight .pr-label{top:78px}
@media (max-width:760px){
  html.m3d .pr-label{top:96px}
  html.m3d .pr-lead{top:120px;max-width:calc(100vw - 48px);font-size:14px}
  html.m3d .pr-deck{top:57%}
  html.m3d .pr-dots{bottom:96px}
  html.m3d .pr-cta{bottom:30px;white-space:nowrap}
  html.m3d .pr-marquee-row{font-size:110px}
}

/* company, portrait: the mark above, the copy below */
@media (max-aspect-ratio:9/10){
  html.m3d .co-copy{top:auto;bottom:max(40px,6svh);transform:none;left:24px;right:24px;width:auto}
  html.m3d .co-title{font-size:clamp(40px,11vw,64px)}
  html.m3d .co-text{font-size:15.5px;margin-top:18px}
  html.m3d .co-link{margin-top:18px}
  html.m3d .co-tag{display:none}
}

/* principles, portrait: title above, sentence under it, ghost number behind */
@media (max-aspect-ratio:9/10){
  html.m3d .pv-label{top:96px}
  html.m3d .pv-title{top:38%;font-size:clamp(64px,19vw,120px)}
  html.m3d .pv-text{left:24px;right:24px;width:auto;top:auto;bottom:22%;font-size:clamp(18px,5vw,24px)}
  html.m3d .pv-ghost{left:auto;right:-4vw;font-size:clamp(220px,62vw,420px)}
  html.m3d .pv-tabs{display:none}
  html.m3d .pv-bar{bottom:44px;left:24px;right:24px;width:auto}
}

/* journal, narrow: smaller captions; the cards themselves are scaled by journal.js */
@media (max-width:760px){
  html.m3d .jr-h2{font-size:44px}
  html.m3d .jr-sub{font-size:15px;max-width:300px}
  html.m3d .jr-card{left:-210px}
}

/* contact, narrow */
@media (max-width:700px){
  html.m3d .ct-title{font-size:clamp(52px,14vw,72px)}
  html.m3d .ct-sub{margin-top:220px}
}

/* phones: blur-in transitions become fades (WebKit blurs text layers on the CPU) */
@media (max-width:760px){
  html.m3d .pv-slide .pv-title span,html.m3d .pv-slide .pv-text,html.m3d .co-title span,html.m3d .jr-head{filter:none !important}
  html.m3d .hero-line{filter:none}
}

/* short screens (phones held sideways): everything fits in one screen height */
@media (max-height:520px) and (orientation:landscape){
  .hero-inner{padding:72px 0 20px !important;min-height:100% !important}
  html[lang] .hero-title{font-size:clamp(34px,5.4vw,46px) !important;margin-top:0}
  .hero-description{font-size:14px !important;margin-top:12px !important;max-width:440px}
  .hero-actions{margin-top:14px !important}
  .pr-lead{display:none}
  .pr-label{top:72px !important}
  .co-title{font-size:clamp(34px,5vw,48px) !important}.co-text{font-size:14px !important;margin-top:12px !important}
  .pv-title{font-size:clamp(56px,9vw,86px) !important}.pv-label{top:70px !important}
  .ct-pin{padding-top:56px !important}
  .ct-title{font-size:clamp(38px,6vw,52px) !important}
  .ct-sub{margin-top:120px !important;font-size:14px !important}
  .jr-h2{font-size:clamp(34px,5vw,48px) !important}
}
/* German lines are longer: keep each principle on its two lines on phones */
@media (max-aspect-ratio:9/10){html[lang="de"].m3d .pv-title{font-size:clamp(48px,14.2vw,96px)}}
@media (max-width:900px){html[lang="de"].static .pv-title{font-size:clamp(44px,13.5vw,64px)}}
/* hero headline: when a line has to wrap (phones), split it evenly — "spreads like / an echo." */
.hero-line{text-wrap:balance}

/* legal links in the footer line and under the contact form */
.ft-copy a,.contact-privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ft-copy a:hover,.contact-privacy a:hover{color:#10100e}

/* 2026-10-15: big ghost numbers (01/02/03) removed at the Founder's request */
.pv-ghost{display:none!important}
/* 2026-10-15: overlapping section tracks must not swallow clicks meant for the section underneath (e.g. "Our principles"); seams.js turns each pin off while it is faded out */
.co-track,.pv-track,.jr-track,.ct{pointer-events:none}
.co-pin,.pv-pin,.jr-pin,.ct-pin{pointer-events:auto}

/* 2026-10-15: intro text above the turning deck and never under the front card; marquee descenders (g) not clipped */
.pr-label,.pr-lead{z-index:2}
@media (min-width:901px){.pr-lead{max-width:min(330px,calc(50vw - 273px))}}
.pr-marquee-row{padding-bottom:.24em}
/* explain for newcomers */
.pv-more{display:block;margin-top:16px;font-size:clamp(15px,1.15vw,17px);line-height:1.55;letter-spacing:0;color:#5a554c}
.co-steps-label{margin-top:30px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;color:#666158}
.co-steps{margin:12px 0 26px;padding:0;list-style:none;display:grid;gap:8px;max-width:470px;font-size:clamp(14.5px,1.1vw,16px);line-height:1.5;color:#4a463f}
.co-steps li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding-top:8px;border-top:1px solid rgba(16,16,14,.1)}
.co-steps b{font-weight:600;color:#10100e}
@media (min-width:901px) and (max-height:820px){.co-title{font-size:clamp(44px,min(5.6vw,8.4vh),88px);margin-top:14px}.co-text{margin-top:16px;font-size:16px}.co-steps-label{margin-top:18px}.co-steps{margin:8px 0 14px;gap:4px}.co-steps li{padding-top:5px}.co-link{margin-top:12px}}
/* reveal masks: leave room for glyph overhang (the tail of "y" in "Beautifully" was cut on the right) */
.co-title span,.pv-title span{padding-left:.08em;padding-right:.2em;margin-left:-.08em;margin-right:-.2em}

/* Aurora backgrounds (2026-10-23, Founder picked B): champagne + pearl + mist + a hint of rose, diagonal mesh. Same palette, no neon. */
.stage{background:#f3eee4}
.aurora{background:radial-gradient(50% 45% at 70% 40%,rgba(224,188,136,1),rgba(224,188,136,0) 70%),radial-gradient(45% 40% at 88% 6%,#fffcf5,rgba(255,252,245,0) 70%),radial-gradient(40% 45% at 12% 92%,rgba(160,200,196,.95),rgba(160,200,196,0) 70%),radial-gradient(35% 40% at 30% 10%,rgba(228,200,190,.85),rgba(228,200,190,0) 70%),radial-gradient(45% 40% at 90% 95%,rgba(218,182,132,.8),rgba(218,182,132,0) 70%),linear-gradient(160deg,#fbf8f1 0%,#eee3d0 55%,#dccbb0 100%)}
.pr-pin{background:radial-gradient(45% 50% at 50% 50%,#fffcf4 0%,rgba(255,252,244,0) 70%),radial-gradient(40% 45% at 90% 10%,rgba(224,188,136,.85),rgba(224,188,136,0) 70%),radial-gradient(40% 45% at 8% 92%,rgba(160,200,196,.85),rgba(160,200,196,0) 70%),linear-gradient(150deg,#f9f4ea,#e9dcc7 55%,#d9c7ac)}
.pr-light{background:radial-gradient(circle,#fffdf6,rgba(238,214,180,.5) 45%,rgba(238,214,180,0) 70%)}
.co-pin{background:radial-gradient(50% 55% at 72% 48%,#fffbf2,rgba(255,251,242,0) 70%),radial-gradient(40% 45% at 10% 10%,rgba(160,200,196,.8),rgba(160,200,196,0) 70%),radial-gradient(45% 45% at 90% 95%,rgba(222,186,134,.85),rgba(222,186,134,0) 70%),linear-gradient(140deg,#f9f4ea,#e8dbc5 60%,#d8c6aa)}
.pv-pin{background:radial-gradient(55% 60% at var(--gx,28%) 50%,#fffaf0,rgba(255,250,240,0) 70%),radial-gradient(40% 45% at 92% 8%,rgba(222,186,134,.8),rgba(222,186,134,0) 70%),radial-gradient(40% 45% at 85% 95%,rgba(160,200,196,.8),rgba(160,200,196,0) 70%),linear-gradient(160deg,#f9f4ea,#e8dbc5 60%,#d8c6aa)}
.jr-pin{background:radial-gradient(50% 50% at 50% 50%,#fffbf2,rgba(255,251,242,0) 70%),radial-gradient(40% 45% at 6% 10%,rgba(222,186,134,.8),rgba(222,186,134,0) 70%),radial-gradient(40% 45% at 94% 92%,rgba(160,200,196,.8),rgba(160,200,196,0) 70%),linear-gradient(150deg,#f9f4ea,#e8dbc5 60%,#d8c6aa)}
.ct-pin{background:radial-gradient(50% 55% at 50% 52%,#fffbf2,rgba(255,251,242,0) 70%),radial-gradient(45% 50% at 90% 6%,rgba(222,186,134,.85),rgba(222,186,134,0) 70%),radial-gradient(45% 50% at 8% 94%,rgba(160,200,196,.85),rgba(160,200,196,0) 70%),linear-gradient(160deg,#f9f4ea,#e8dbc5 60%,#d8c6aa)}
.ft{background:#d8c6aa}
html.static body{background:#ddcdb3}

/* 2026-10-30 Margenta replaces Flow in the product deck. Like the BoardVision card (dark, the product's own UI tones),
   it takes Margenta's brand tones: deep plum with a soft orchid glow, never neon. */
.pr-mg{background:radial-gradient(85% 55% at 50% 0%,#4b1d44,rgba(75,29,68,0) 72%),radial-gradient(70% 55% at 100% 100%,#37195a,rgba(55,25,90,0) 72%),linear-gradient(160deg,#25122a,#130a16);color:#fbfaf6}
.pr-mg .pr-tag{color:#f1b9d6}
.pr-mg .pr-shot{position:absolute;left:14px;right:14px;top:54px;height:290px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 22px 50px -28px rgba(255,46,147,.45)}
.pr-mg .pr-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pr-mg .pr-name{bottom:132px}.pr-mg .pr-text{bottom:52px;color:rgba(251,250,246,.78)}
/* VenKeep: the lime and ink of its logo */
.pr-vk{background:radial-gradient(90% 60% at 20% 8%,#dcff7a,rgba(220,255,122,0) 70%),linear-gradient(160deg,#c8f94b,#b4e63a);color:#0a0b09}
.pr-vk .pr-tag{color:#2a3312}
.pr-vk .pr-shot{position:absolute;left:14px;right:14px;top:54px;height:290px;border-radius:14px;overflow:hidden;border:1px solid rgba(10,11,9,.5)}
.pr-vk .pr-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pr-vk .pr-name{bottom:132px}.pr-vk .pr-text{bottom:52px;color:#1c2010}
/* Peptomy: the teal of its app (buttons and links) with white text */
.pr-pt{background:radial-gradient(85% 58% at 50% 0%,#236a72,rgba(35,106,114,0) 72%),linear-gradient(160deg,#1d5c63,#133f44);color:#fff}
.pr-pt .pr-tag{color:#cfe6e4}
.pr-pt .pr-shot{position:absolute;left:14px;right:14px;top:54px;height:290px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.pr-pt .pr-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pr-pt .pr-name{bottom:150px}.pr-pt .pr-text{bottom:52px;color:rgba(255,255,255,.88)}
.pr-pt .pr-meta{bottom:14px}
/* journal: link to the archive */
.jr-all{display:inline-block;margin-top:18px;padding:10px 4px;font-size:15px;color:#10100e;text-decoration:underline;text-underline-offset:4px;pointer-events:auto}
/* phones: the deck is scaled down, so its small text grows to stay readable */
@media (max-width:400px){html.m3d .jr-read{font-size:15px}}
@media (max-width:640px){
  html.m3d .pr-tag{font-size:min(18px,calc(11px / var(--k,1)))}
  html.m3d .pr-text{font-size:min(18px,calc(12.5px / var(--k,1)))}
  html.m3d .pr-meta{font-size:min(18px,calc(9.6px / var(--k,1)))}
}
/* every card reads the same: the picture on top, all its words under it */
.pr-card{border-radius:28px;box-shadow:0 44px 90px -34px rgba(50,36,16,.38),inset 0 0 0 1px rgba(255,255,255,.16)}
.pr-card .pr-shot{top:14px;border-radius:18px;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 44px -24px rgba(0,0,0,.5)}
.pr-frame .pr-art{top:159px}
.pr-card .pr-name{top:344px;bottom:auto;left:24px}
.pr-card .pr-text{top:406px;bottom:auto}
.pr-card .pr-meta{bottom:18px;opacity:.86}
/* soft gradients in each product's own colour */
.pr-bv{background:radial-gradient(95% 60% at 90% 0%,rgba(201,165,118,.62),rgba(201,165,118,0) 72%),radial-gradient(95% 60% at 0% 100%,rgba(46,128,116,.62),rgba(46,128,116,0) 74%),linear-gradient(165deg,#2c2620,#141513 55%,#16211f)}
.pr-mg{background:radial-gradient(85% 55% at 15% 0%,rgba(146,62,128,.55),rgba(146,62,128,0) 72%),radial-gradient(80% 55% at 100% 100%,rgba(92,52,150,.5),rgba(92,52,150,0) 72%),linear-gradient(165deg,#34183a,#22102a 60%,#28123a)}
.pr-vk{background:radial-gradient(80% 50% at 100% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),radial-gradient(90% 55% at 0% 100%,rgba(250,255,214,.85),rgba(250,255,214,0) 72%),linear-gradient(165deg,#c8f94b,#d4fb6e 55%,#e2fc9c)}
.pr-pt{background:radial-gradient(85% 55% at 15% 0%,rgba(52,132,138,.6),rgba(52,132,138,0) 72%),radial-gradient(70% 45% at 100% 100%,rgba(84,160,158,.4),rgba(84,160,158,0) 72%),linear-gradient(165deg,#1d5c63,#174e55 60%,#1c5a60)}
.pr-frame{background:radial-gradient(80% 50% at 80% 0%,#fffdf8,rgba(255,253,248,0) 70%),radial-gradient(85% 55% at 0% 100%,rgba(228,211,187,.8),rgba(228,211,187,0) 72%),linear-gradient(165deg,#efe8dc,#e2d8c8)}
/* source of the 3D model, clickable above the card's cover link */
.pr-credit{position:absolute;left:24px;bottom:58px;z-index:6;padding:8px 0;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:3px}
html.m3d .pr-credit{font-size:calc(10px / var(--k,1))}