@import url("fonts.css");

:root{
  --bg:#08090b; --bg2:#101214;
  --fg:#eceae3; --muted:#a09e96; --faint:#6a6963;
  --gold:#c2a97f;                       /* the accent: <em>, the tuning dot, progress, the active word */
  --green:#2e6b52; --green-deep:#12332a;
  --forest:#173324;                     /* light only: veils, edge glows, the rest tint of glass */
  --dawn:#e4b487;                       /* light only: the warm edge of a veil, the button's hover glow */
  --line:rgba(236,234,227,.12); --line2:rgba(236,234,227,.22);
  --display:'CanvasDisplay','CanvasText',sans-serif;
  --text:'CanvasText',system-ui,sans-serif;
  --ui:'Interface',-apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  --wrap:1240px; --nav:72px; --pad:clamp(20px,3vw,40px);
  --ease-quint:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--text);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
em{font-style:normal;color:var(--gold)}

/* grain membrane: cinema, not noise */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;background-size:256px 256px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav: transparent over the hero, solid once the page scrolls */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,border-color .35s,backdrop-filter .35s}
.nav .wrap{display:flex;align-items:center;gap:28px;height:var(--nav)}
.nav.solid{background:rgba(8,9,11,.78);backdrop-filter:blur(16px);box-shadow:0 12px 32px rgba(8,9,11,.55)}
.nav nav{display:flex;gap:28px;margin-left:auto;font-size:15px;color:var(--muted)}
.nav nav a:hover,.nav nav a.on{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:var(--fg);color:#08090b;border-radius:999px;padding:12px 22px;font-size:15px;font-weight:500;border:1px solid var(--fg);cursor:pointer;font-family:var(--text);transition:background .15s,color .15s,border-color .15s,box-shadow .25s}
.btn:hover{background:#fff;box-shadow:0 0 0 4px rgba(228,180,135,.14)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line2)}
.btn.ghost:hover{background:rgba(236,234,227,.08);border-color:var(--fg);box-shadow:none}
@media (max-width:760px){.nav .wrap{gap:8px}.brand{align-items:center;min-height:44px}.nav .brand span{display:none}.brand svg.ring{height:28px}.nav nav{gap:0;font-size:13px;margin-left:4px}.nav nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}.nav nav a:first-child{display:none}.nav .btn{margin-left:auto;min-height:44px;padding:11px 14px;font-size:13px}}

/* type */
h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,6.4vw,92px);line-height:1.02;letter-spacing:-.02em}
h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.4vw,60px);line-height:1.05;letter-spacing:-.02em}
h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,28px);line-height:1.12;letter-spacing:-.01em}
.kicker{font-size:14px;color:var(--gold);font-weight:500;margin-bottom:16px}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:52ch;line-height:1.55}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* full-bleed scenes */
.scene{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.scene .bg{position:absolute;inset:0;z-index:0}
.scene .bg img,.scene .bg video{width:100%;height:100%;object-fit:cover}
.scene .veil{position:absolute;inset:0;z-index:0;pointer-events:none}
.scene .wrap{width:100%}

/* joins: no rules between sections. A scene's bottom fades into the next section's ground over 200px
   (a ::after above the picture and its veil, below the words, so nothing a person reads is dimmed),
   and a scene that follows another scene breathes a warm radial glow at six percent into the seam.
   Every scene's own veil starts and ends on the ground, so a join never meets a step. */
.join{position:relative}
.join>.wrap{z-index:2}
.join::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(8,9,11,0),var(--bg) 88%,var(--bg))}
.join.warm::after{background:radial-gradient(60% 50% at 50% 50%,rgba(228,180,135,.07),rgba(228,180,135,0) 100%),linear-gradient(to bottom,rgba(8,9,11,0),var(--bg) 88%,var(--bg))}
.ground{background:var(--bg)}
/* a ground section's first 180px is pure ground, so it meets the join above it without a step; the glows sit lower */
.ground .veil{background:linear-gradient(180deg,var(--bg),rgba(8,9,11,0) 180px),radial-gradient(60% 55% at 50% 88%,rgba(228,180,135,.09),rgba(228,180,135,0) 70%),radial-gradient(45% 50% at 100% 30%,rgba(23,51,36,.28),transparent 70%)}

/* feather: a picture that reaches the ground on all four edges. --fx and --fy are the feather depths;
   --fy-top overrides the top when a scene rises out of a ground section */
.feather{--fx:10%;--fy:16%;--fy-top:var(--fy);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fx),#000 calc(100% - var(--fx)),transparent),
                     linear-gradient(to bottom,transparent,#000 var(--fy-top),#000 calc(100% - var(--fy)),transparent);
  -webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%;
  mask-image:linear-gradient(to right,transparent,#000 var(--fx),#000 calc(100% - var(--fx)),transparent),
             linear-gradient(to bottom,transparent,#000 var(--fy-top),#000 calc(100% - var(--fy)),transparent);
  mask-composite:intersect;mask-repeat:no-repeat;mask-size:100% 100%}
.scene .bg.feather,.pinned .bg.feather{inset:0;overflow:hidden}
.scene .bg.feather img,.pinned .bg.feather img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
@media (max-width:760px){.feather{--fx:8%;--fy:14%}.scene .bg.feather img,.pinned .bg.feather img{top:-6%;height:112%}}
@media (prefers-reduced-motion:reduce){.scene .bg.feather img,.pinned .bg.feather img{top:0;height:100%;transform:none!important}}

/* scrim: the words' side of a scene, so type wins without a veil over the whole picture */
.scrim{position:absolute;inset:0;z-index:0;pointer-events:none}
.scrim.left{background:linear-gradient(90deg,rgba(8,9,11,.6),rgba(8,9,11,0) 55%)}
.scrim.right{background:linear-gradient(270deg,rgba(8,9,11,.6),rgba(8,9,11,0) 55%)}
.scrim.foot{background:linear-gradient(180deg,rgba(8,9,11,0) 40%,rgba(8,9,11,.6))}
.scrim.feather{--fx:0%}
@media (max-width:760px){.scrim.left,.scrim.right{background:linear-gradient(180deg,rgba(8,9,11,0) 35%,rgba(8,9,11,.66))}}

/* cutout: one object on the ground. The alpha edge is baked; here only the shadow and the warm floor light */
.cutout{position:relative;display:block;line-height:0;isolation:isolate}
.cutout img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 28px 36px rgba(0,0,0,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.35));will-change:transform}
.cutout.tall img{width:auto;height:100%}
.cutout::before{content:"";position:absolute;left:50%;bottom:-8%;width:130%;height:38%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(228,180,135,.11),rgba(228,180,135,0) 70%)}
.cutout.float::before{display:none}
.cutout.wall img{filter:none}
.cutout.wall::before{display:none}
@media (max-width:760px){.cutout img{filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}}

/* strip: a band of texture between two ground sections; it only adds light, so it has no edge */
.strip{position:relative;z-index:1;margin:-60px 0;pointer-events:none;line-height:0}
.strip img{width:100%;height:220px;object-fit:cover;display:block;opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%,#000 58%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%;
  mask-image:linear-gradient(to bottom,transparent,#000 42%,#000 58%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect;mask-repeat:no-repeat;mask-size:100% 100%}
@media (max-width:760px){.strip img{height:140px}}

/* acts with a cutout: two columns, the object sized by the viewport height. DOM order is always the words then .cutout;
   .flip swaps the columns so the object sits at the left */
.act-cutout{position:relative;min-height:100vh;display:flex;align-items:center;isolation:isolate;overflow-x:clip}
.act-cutout .wrap{display:grid;grid-template-columns:46fr 54fr;gap:clamp(24px,4vw,64px);align-items:center;width:100%;min-width:0}
.act-cutout .wrap>*{min-width:0}
.act-cutout .wrap>:first-child{grid-column:1;grid-row:1}
.act-cutout .wrap>.cutout{grid-column:2;grid-row:1}
.act-cutout.flip .wrap{grid-template-columns:54fr 46fr}
.act-cutout.flip .wrap>:first-child{grid-column:2}
.act-cutout.flip .wrap>.cutout{grid-column:1}
.act-cutout h2{font-size:clamp(28px,3.4vw,44px);max-width:22ch;line-height:1.15}
.act-cutout .cutout{justify-self:center}
@media (max-width:760px){.act-cutout{min-height:0;padding:10vh 0 8vh}.act-cutout .wrap,.act-cutout.flip .wrap{grid-template-columns:1fr}
  .act-cutout .wrap>.cutout,.act-cutout.flip .wrap>.cutout{grid-column:1;grid-row:1}.act-cutout .wrap>:first-child,.act-cutout.flip .wrap>:first-child{grid-column:1;grid-row:2;margin-top:-6vh}}

/* the fern at the home closing: it floats at the right and hangs down into the footer */
.fern-close{overflow-x:clip;overflow-y:visible}
.fern-close .cutout{position:absolute;right:-6vw;bottom:-6vh;width:min(58vw,860px);z-index:1}
.fern-close .wrap{z-index:2}
@media (max-width:760px){.fern-close{min-height:90vh;padding-top:6vh}.fern-close .cutout{width:130vw;right:-34vw;bottom:22vh;opacity:.78}}

/* the field act: pinned, the wall behind, the rings over it, the words above both */
.field-act{height:160vh}
.field-act .pin{align-items:flex-start}
.field-act .wall{position:absolute;inset:0;opacity:.22;z-index:0;--fx:30%;--fy:30%;line-height:0}
.field-act .wall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.field-act canvas.field{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 80%,transparent)}
.field-act .wrap{z-index:2;padding-top:calc(var(--nav) + 10vh)}
.field-act .items{max-width:30ch;display:grid;gap:28px;margin-top:8px;margin-left:0}
.field-act .items h3{margin-bottom:8px}
.field-act .items p{color:var(--muted);font-size:16px;line-height:1.55;max-width:34ch}
.field-act .items a{color:var(--gold)}
.field-act .items a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.field-act{height:130vh}.field-act .wall{opacity:.16;--fx:14%;--fy:24%}.field-act .wrap{padding-top:calc(var(--nav) + 12vh)}}
@media (prefers-reduced-motion:reduce){.field-act{height:auto}.field-act .pin{position:relative;height:100vh}}

/* hero: the acoustic laboratory on the water at first light, headline over the still water */
.hero{min-height:100vh;align-items:flex-end;text-align:center}
.hero .bg video{object-position:56% 50%}
@media (max-width:760px){.hero .bg video{object-position:40% 50%}}
.hero .veil{background:
  radial-gradient(70% 60% at 50% 45%,rgba(8,9,11,.06),rgba(8,9,11,.5) 100%),
  linear-gradient(180deg,rgba(8,9,11,.55) 0%,rgba(8,9,11,0) 30%,rgba(228,180,135,.06) 52%,rgba(8,9,11,.1) 66%,rgba(8,9,11,.82) 88%,rgba(8,9,11,1) 100%)}
.hero .wrap{padding-bottom:clamp(64px,9vh,100px)}
.hero h1{max-width:16ch;margin:0 auto;font-size:clamp(40px,5.6vw,80px);text-shadow:0 2px 40px rgba(0,0,0,.55)}
@media (max-width:760px){.hero .wrap{padding-bottom:clamp(96px,16vh,150px)}}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(.3em);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.hero h1.in span{opacity:1;transform:none}
.hero .ctas{justify-content:center;opacity:0;transition:opacity 1s .6s}
.hero h1.in + .ctas{opacity:1}
.explore{position:absolute;right:var(--pad);bottom:28px;z-index:2;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--fg);opacity:.85}
.explore i{width:38px;height:38px;border:1px solid var(--line2);border-radius:10px;display:grid;place-items:center;font-style:normal;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* pinned scenes share the pin, the veil and the gold progress line. The veil starts and ends on the ground
   (the scene's own join), and the progress line fades away over the last tenth so it never sits on a seam */
.pinned{position:relative;isolation:isolate}
.pinned .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:flex-end}
.pinned .layer{position:absolute;inset:0}
.pinned .layer img{width:100%;height:100%;object-fit:cover}
.pinned .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,9,11,1) 0%,rgba(8,9,11,.5) 9%,rgba(8,9,11,0) 32%,rgba(8,9,11,.2) 60%,rgba(8,9,11,.9) 90%,rgba(8,9,11,1) 100%)}
.pinned .glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 60% at 100% 70%,rgba(23,51,36,.34),transparent 70%)}
.pinned .wrap{z-index:2}
.era{position:absolute;left:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));top:calc(var(--nav) + clamp(28px,5vh,56px));z-index:2;font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,56px);letter-spacing:-.02em;line-height:1;color:var(--fg);text-shadow:0 2px 30px rgba(0,0,0,.6)}
.progress{position:absolute;left:0;bottom:0;width:40%;height:1px;background:transparent;z-index:3;opacity:.45;transition:opacity .2s}
.progress i{display:block;height:100%;width:0;background:var(--gold)}

/* four layers: capture, learn, render, worlds. Stills crossfade; the active word is bone */
.layers{height:440vh}
.layers .layer{opacity:0;transition:opacity .5s}
.layers .layer.on{opacity:1}
.layers .layer.base{opacity:1}
.layers .veil{background:linear-gradient(180deg,rgba(8,9,11,1) 0%,rgba(8,9,11,.5) 9%,rgba(8,9,11,0) 32%,rgba(8,9,11,.2) 60%,rgba(8,9,11,.9) 90%,rgba(8,9,11,1) 100%),linear-gradient(90deg,rgba(8,9,11,.6),rgba(8,9,11,.25) 40%,rgba(8,9,11,0) 60%)}
.layers .words{position:absolute;left:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));top:calc(var(--nav) + clamp(28px,5vh,56px));z-index:2;max-width:min(52ch,calc(100% - 2 * var(--pad)))}
.layers .words .lbl{font-size:14px;color:var(--gold);font-weight:500;margin-bottom:18px}
.layers .word{display:block;font-family:var(--display);font-weight:500;font-size:clamp(34px,5vw,72px);letter-spacing:-.02em;line-height:1.02;color:rgba(236,234,227,.28);transition:color .45s;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.layers .word.on{color:var(--fg)}
.layers .line{margin-top:22px;font-size:18px;line-height:1.5;color:var(--muted);max-width:40ch;min-height:3em}
.layers .line span{display:none}
.layers .line span.on{display:inline}
.layers .lines-all{display:none}
@media (max-width:1000px), (prefers-reduced-motion:reduce){
  .layers{height:auto}
  .layers .pin{position:relative;height:auto;min-height:100vh;align-items:flex-start;padding:calc(var(--nav) + 8vh) 0 10vh}
  .layers .layer{opacity:0}.layers .layer.base{opacity:1}
  .layers .veil{background:linear-gradient(180deg,rgba(8,9,11,1),rgba(8,9,11,.72) 14%,rgba(8,9,11,.66) 50%,rgba(8,9,11,1))}
  .layers .words{display:none}
  .layers .lines-all{display:grid;position:relative;z-index:2;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,48px) clamp(24px,4vw,56px);width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
  .layers .lines-all .lbl{grid-column:1/-1;font-size:14px;color:var(--gold);font-weight:500}
  .layers .lines-all b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(30px,6vw,48px);letter-spacing:-.02em;line-height:1.05;margin-bottom:10px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
  .layers .lines-all p{font-size:16px;line-height:1.5;color:rgba(236,234,227,.82);max-width:34ch}
}
@media (max-width:640px){.layers .lines-all{grid-template-columns:1fr}}

/* state: one valley, dawn to rain to night. Each state arrives as a feathered front from the upper left (a soft mask, no seam) */
.state{height:360vh}
.state .veil{background:linear-gradient(180deg,rgba(8,9,11,1) 0%,rgba(8,9,11,1) 4%,rgba(8,9,11,.88) 12%,rgba(8,9,11,.55) 20%,rgba(8,9,11,.22) 28%,rgba(8,9,11,0) 36%,rgba(8,9,11,.2) 60%,rgba(8,9,11,.9) 90%,rgba(8,9,11,1) 100%)}
.state .layer.wipe{--w:-18%;-webkit-mask-image:linear-gradient(105deg,#000 0,#000 var(--w),transparent calc(var(--w) + 18%));mask-image:linear-gradient(105deg,#000 0,#000 var(--w),transparent calc(var(--w) + 18%))}
.state .wrap{width:100%;padding-bottom:clamp(40px,7vh,84px)}
.state .readout{display:flex;flex-wrap:wrap;margin-bottom:18px;font-family:var(--ui);font-weight:400;font-size:14px;letter-spacing:.01em;min-height:24px}
.state .readout span{color:rgba(236,234,227,.3);transition:color .4s}
.state .readout span.on{color:var(--gold)}
.state .readout span.dawn.on{color:var(--dawn);animation:warm 1.2s .3s forwards}
@keyframes warm{to{color:var(--gold)}}
.state .readout{gap:22px}
.state h2{max-width:14ch}
.state .cap{margin-top:16px;font-size:15px;color:var(--muted)}
.state .era span{display:none}
.state .era span.on{display:inline}
@media (max-width:760px){.state{height:280vh}}
@media (prefers-reduced-motion:reduce){.state{height:auto}.state .pin{position:relative}.state .layer.wipe{-webkit-mask-image:none;mask-image:none}.progress{display:none}}

/* four doors: the tiles touch, and each picture fades to the ground at its top and its foot so the rows meet in the dark */
.doors{display:grid;grid-template-columns:1fr 1fr}
.door{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:min(72vh,640px);isolation:isolate}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1);z-index:0}
.door .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,11,1),rgba(8,9,11,1) 4%,rgba(8,9,11,.5) 16%,rgba(8,9,11,0) 36%,rgba(8,9,11,.5) 68%,rgba(8,9,11,.9) 88%,rgba(8,9,11,1) 100%);z-index:0}
.door .dt{position:relative;z-index:1;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.door .who{font-size:15px;color:rgba(236,234,227,.75)}
.door h3{font-size:clamp(26px,2.6vw,38px);max-width:16ch}
.door:hover img{transform:scale(1.04)}
.door:hover .btn.ghost{background:var(--fg);color:#08090b;border-color:var(--fg)}
@media (max-width:860px){.doors{grid-template-columns:1fr}.door{min-height:72vh}}

/* lab strip: the room at the right, the words at the left; the picture fades to the ground above and below */
.lab-strip{position:relative;min-height:60vh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.lab-strip .bg{position:absolute;top:0;bottom:0;right:0;width:66.6%;z-index:0}
.lab-strip .bg img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.lab-strip .veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#08090b 0%,#08090b 30%,rgba(8,9,11,.55) 52%,rgba(8,9,11,.1) 80%,rgba(8,9,11,.35) 100%),linear-gradient(180deg,rgba(8,9,11,1),rgba(8,9,11,0) 26%,rgba(8,9,11,0) 72%,rgba(8,9,11,1))}
.lab-strip .wrap{width:100%;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.lab-strip h2{max-width:12ch}
.lab-strip .tag{margin-top:14px;font-size:18px;color:var(--muted)}
.lab-strip .ctas{margin-top:26px}
@media (max-width:860px){.lab-strip .bg{width:100%}.lab-strip .veil{background:linear-gradient(180deg,rgba(8,9,11,1),rgba(8,9,11,.66) 22%,rgba(8,9,11,.6) 60%,rgba(8,9,11,1))}}

/* supported by */
.supported{padding:clamp(40px,6vw,72px) 0}
.marks-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(20px,3vw,44px) clamp(24px,4vw,60px);padding:18px 0}
.marks-row .lbl{font-size:14px;color:var(--muted);margin:0;flex-basis:100%;text-align:center}
.marks-row img{height:clamp(30px,3.2vw,46px);width:auto;opacity:.72;transition:opacity .2s}
.marks-row img:hover{opacity:1}
.marks-row img.tall{height:clamp(44px,4.6vw,66px)}
@media (min-width:1000px){.marks-row .lbl{flex-basis:auto;margin-right:12px;text-align:left}}

/* closing: a full screen, the words at the left, the footer pulled up over its last part (the page sets --foot) */
.closing{min-height:100vh;align-items:center}
.closing h2{max-width:13ch;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.closing.ground{padding:20vh 0 calc(var(--foot,0) * 1vh + 8vh)}
.closing.ground .veil{background:linear-gradient(180deg,var(--bg),rgba(8,9,11,0) 180px),radial-gradient(60% 60% at 50% 88%,rgba(228,180,135,.10),rgba(228,180,135,0) 70%),radial-gradient(45% 50% at 0% 30%,rgba(23,51,36,.3),transparent 70%)}

/* sub pages: an opener is a full screen over a feathered scene, the headline at its foot */
.opener{min-height:100vh;align-items:flex-end}
.opener .wrap{padding-top:var(--nav);padding-bottom:clamp(64px,10vh,110px)}
.opener h1{font-size:clamp(40px,5.6vw,80px);max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.opener .mission{max-width:12ch}
.mission-sub{margin-top:24px;font-family:var(--text);font-weight:400;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--muted);text-shadow:0 2px 30px rgba(0,0,0,.6)}
@media (max-width:760px){.opener .wrap{padding-bottom:16vh}.opener h1{font-size:40px}.mission-sub{font-size:17px}}

/* engine: the sentence acts over a room of the laboratory, the words at the foot on the scrim's side */
.act.scene{align-items:flex-end}
.act.scene .wrap{padding-top:calc(var(--nav) + 6vh);padding-bottom:clamp(56px,8vw,112px);display:flex;flex-direction:column;align-items:flex-start}
.act.scene .wrap.right{align-items:flex-end}
.act.scene h2{font-size:clamp(28px,3.4vw,44px);max-width:24ch;line-height:1.15;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.act.scene .wrap.right h2{width:min(100%,600px)}
.engine-open .bg{--fx:12%;--fy:16%}
.engine-open .bg.feather img{width:180%;left:0;object-position:0 50%}
.engine-ring .bg{--fx:10%;--fy-top:22%;--fy:18%}
.engine-ring .bg img{object-position:50% 60%}
.engine-wedges .cutout{height:min(72vh,640px)}
.engine-wedges .cutout::before{bottom:-4%;height:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(228,180,135,.16),rgba(228,180,135,0) 70%)}
.engine-array .cutout{width:min(52vw,760px)}
.engine-close .bg{--fx:12%;--fy-top:22%;--fy:40%}
.engine-close .scrim.foot{background:linear-gradient(180deg,rgba(8,9,11,0) 30%,rgba(8,9,11,.78))}
.engine-close .bg img{object-position:50% 50%;transform-origin:50% 62%}
.engine-close{padding:18vh 0 34vh}
@media (max-width:760px){
  .engine-open .bg.feather img{object-position:26% 50%}
  .engine-ring .bg img{object-position:50% 55%}
  .engine-wedges .cutout{height:46vh}
  .engine-array .cutout{width:min(96vw,100%)}
  .engine-close{padding:12vh 0 34vh}
  .engine-close .bg img{object-position:50% 45%}
}

/* worlds: the coast opener, then four rooms that dissolve into one another, the words alternating sides */
.worlds-open .bg{--fx:10%;--fy:16%}
.worlds-open .bg img{object-position:66% 45%}
.world{min-height:100vh;align-items:flex-end;position:relative}
.world .bg{--fx:8%;--fy-top:30%;--fy:30%}
.world .scrim.left{background:linear-gradient(90deg,rgba(8,9,11,.86),rgba(8,9,11,.62) 38%,rgba(8,9,11,0) 72%)}
.world .scrim.right{background:linear-gradient(270deg,rgba(8,9,11,.86),rgba(8,9,11,.62) 38%,rgba(8,9,11,0) 72%)}
.world .lede{max-width:44ch}
.world.low .wrap{padding-bottom:12vh}
.world .wrap{padding-top:calc(var(--nav) + 6vh);padding-bottom:clamp(48px,7vw,96px);display:flex;flex-direction:column;align-items:flex-start}
.world.right .wrap{align-items:flex-end}
.world.right .wrap>*{text-align:left}
.world h2{max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.world .lede{margin-top:20px;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.world.right .lede,.world.right h2,.world.right .kicker{width:min(100%,560px)}
#games .bg img{object-position:50% 50%}#embodied .bg img{object-position:50% 45%}#venues .bg img{object-position:50% 50%}#spaces .bg img{object-position:50% 50%}
.worlds-close .cutout{width:min(44vw,640px);margin-top:12vh}
@media (max-width:760px){
  .worlds-open .bg img{object-position:72% 50%}
  #games .bg img{object-position:40% 50%}#embodied .bg img{object-position:62% 50%}#venues .bg img{object-position:45% 50%}#spaces .bg img{object-position:55% 50%}
  .world .lede{font-size:17px}
  .world .scrim.left,.world .scrim.right{background:linear-gradient(180deg,rgba(8,9,11,0) 18%,rgba(8,9,11,.88) 52%)}
  .world.low .wrap{padding-bottom:clamp(48px,7vw,96px)}
  .world.right .wrap{align-items:flex-start}
  .world.right .lede,.world.right h2,.world.right .kicker{width:100%}
  .act.scene .wrap.right{align-items:flex-start}
  .act.scene .wrap.right h2{width:100%}
  .worlds-close .cutout{width:min(78vw,100%);margin-top:0;margin-bottom:6vh}
  .worlds-close .words{margin-top:4vh}
  .closing.ground.act-cutout{padding:12vh 0 calc(var(--foot,0) * 1vh + 6vh);min-height:0}
  body.page-worlds{--foot:6}
}

/* lab: the forest-wall room holds through the opener and the manifesto (two states of one pin),
   then the listening chair beside the rights line, and the founder over a detail of the treeline */
.lab-open{height:240vh}
.lab-open .pin{align-items:flex-end}
.lab-open .bg{position:absolute;inset:0;z-index:0;--fx:10%;--fy:16%}
.lab-open .bg img{object-position:50% 40%}
.lab-open .veil{background:linear-gradient(180deg,rgba(8,9,11,.7),rgba(8,9,11,.05) 40%,rgba(8,9,11,.35) 70%,rgba(8,9,11,1))}
.lab-open .deep{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(8,9,11,.62);opacity:0}
.lab-open .wrap{position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(64px,10vh,110px);will-change:opacity,transform}
.lab-open .wrap h1{font-size:clamp(40px,5.6vw,80px);max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.lab-open .state-b{justify-content:center;padding-bottom:0;opacity:0;pointer-events:none}
.lab-open .state-b p{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.8vw,38px);line-height:1.25;letter-spacing:-.015em;max-width:30ch;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.lab-open .progress{z-index:3}
.rights-act{min-height:70vh;padding-top:6vh}
.rights-act .cutout{height:min(74vh,700px)}
.rights-line{font-family:var(--text);font-weight:400;font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:28ch;color:var(--fg)}
.rights-line a{color:var(--gold)}
.rights-line a:hover{text-decoration:underline;text-underline-offset:4px}
.founder-sec{position:relative;isolation:isolate;overflow-x:clip}
.founder-sec .detail{position:absolute;left:-9vw;top:0;bottom:0;width:118vw;z-index:0;pointer-events:none;line-height:0;opacity:.34;--fx:14%;--fy-top:8%;--fy:30%}
.founder-sec .detail img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.founder-sec .wrap{z-index:1}
.founder-sec .founder{padding-bottom:calc(clamp(56px,8vw,110px) + var(--foot,0) * 1vh)}
@media (max-width:760px){
  .lab-open{height:200vh}
  .lab-open .bg img{object-position:50% 45%}
  .lab-open .wrap{padding-bottom:16vh}
  .lab-open .wrap h1{font-size:40px}
  .lab-open .state-b p{font-size:24px}
  .rights-act{min-height:0;padding:12vh 0}
  .rights-act .cutout{height:auto;width:66vw}
  .rights-act .rights-line{text-align:center;margin:-4vh auto 0}
  .founder-sec .detail{left:-20vw;width:140vw;top:-6vh;opacity:.42;--fy-top:12%;--fy:30%}
  .founder-sec .detail img{object-position:22% 0}
  body.page-lab{--foot:8}
}
@media (prefers-reduced-motion:reduce){
  .lab-open{height:170vh}
  .lab-open .pin{position:relative;height:170vh}
  .lab-open .state-a{bottom:70vh;opacity:1!important;transform:none!important}
  .lab-open .state-b{top:100vh;opacity:1!important;transform:none!important;justify-content:flex-start;padding-top:8vh}
  .lab-open .deep{opacity:1;background:linear-gradient(180deg,rgba(8,9,11,0) 88vh,rgba(8,9,11,.62) 100vh)}
}
.founder{display:grid;grid-template-columns:minmax(280px,.9fr) 1.1fr;gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(56px,8vw,110px)}
.founder-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent);
  -webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent);
  mask-composite:intersect;mask-repeat:no-repeat;mask-size:100% 100%}
.founder-photo .kicker{font-size:20px;margin-bottom:16px}
.founder h2{font-size:clamp(40px,5vw,72px)}
.founder p{color:var(--muted);font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:none;margin-top:16px}
.member{margin-top:28px}
.member-row{position:relative;padding-right:64px}
.marks3{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;align-items:end;gap:30px clamp(28px,3vw,48px);margin-top:18px}
.member .lbl{font-size:14px;color:var(--muted)}
.member img{height:68px;width:auto;border-radius:0;max-width:none}
.member img.xtall{height:118px;margin-top:-14px}
.member img.wide{height:40px}
.social{position:absolute;right:0;bottom:4px;margin:0}
.social a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:10px;color:var(--fg);border:1px solid var(--line2)}
.social a:hover{color:#08090b;background:var(--fg);border-color:var(--fg)}
.social svg{width:18px;height:18px}
@media (max-width:760px){.founder{grid-template-columns:1fr}.founder>*{min-width:0}.founder-photo img{max-width:320px}.member-row{padding-right:0}.marks3{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;align-items:center;gap:32px 16px;margin-top:22px;width:100%}.member img{height:44px;max-width:100%;object-fit:contain}.member img.xtall{height:82px;margin-top:0}.member img.wide{height:30px}.social{position:static;display:flex;justify-content:flex-end;margin-top:34px}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* footer: transparent, and pulled up over the last picture of each page by --foot (in vh, set by the body's page class) */
footer{padding:clamp(56px,9vw,120px) 0 36px;background:transparent;position:relative;z-index:2;margin-top:calc(var(--foot,0) * -1vh)}
.page-index{--foot:24}.page-engine{--foot:34}.page-worlds{--foot:24}.page-lab{--foot:24}.page-request{--foot:0}.page-none{--foot:0}
.foot-line{font-family:var(--display);font-weight:500;font-size:clamp(44px,9.5vw,150px);line-height:.95;letter-spacing:-.035em;margin-bottom:clamp(40px,6vw,80px);text-shadow:0 2px 40px rgba(0,0,0,.55)}
.foot-row{position:relative;display:block;font-size:13px;color:var(--muted)}
.foot-co{position:absolute;right:var(--pad);bottom:0;font-weight:500;color:var(--fg);white-space:nowrap;font-size:13px;line-height:1.55;text-align:right}
.foot-co a{color:var(--muted)}.foot-co a:hover{color:var(--fg)}
/* the company's channels, above the address; the hit area is wider than the glyph, so the row is pulled out to keep the glyphs on the text edge */
.foot-social{display:flex;justify-content:flex-end;gap:2px;margin:0 -10px 10px 0}
.foot-co .foot-social a{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;color:var(--fg);transition:color .2s}
.foot-co .foot-social a:hover,.foot-co .foot-social a:focus-visible{color:var(--gold)}
.foot-social svg{width:17px;height:17px}
/* phone: the address at the left, the channels level with its last line at the right, so the footer gains no height */
@media (max-width:760px){.foot-co{position:static;display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;text-align:left}.foot-social{order:2;margin:0 -10px -7px 0}}
.foot-right{text-align:left;max-width:none}
.foot-right .flags{display:flex;gap:8px;margin-bottom:12px}
.foot-right .flags img{height:18px;width:auto;border-radius:2px}
.foot-right .ackh{display:block;font-weight:500;color:var(--fg);font-size:14px;margin-bottom:6px}
.foot-right p{line-height:1.55;margin:0;white-space:nowrap;font-size:12px;padding-right:220px}
@media (max-width:1100px){.foot-right p{white-space:normal;max-width:74ch;padding-right:0}}

/* request: the form floats on the ground, lit from below */
.req{position:relative;padding:calc(var(--nav) + 8vh) 0 calc(12vh + var(--foot,0) * 1vh);min-height:100vh;isolation:isolate;overflow-x:clip;overflow-y:visible;background:var(--bg)}
.req .wrap{display:grid;grid-template-columns:58fr 42fr;gap:0 clamp(24px,4vw,64px);align-items:start}
.req-main,.req-head,.req-words{display:contents}
.req-h,.req-lede,.reqform,.req-confirm{grid-column:1;min-width:0}
.req .aside{grid-column:2;grid-row:1 / span 4;align-self:stretch;position:relative;display:flex;justify-content:flex-end;align-items:flex-start}
.req .aside .cutout{position:sticky;top:calc(var(--nav) + 6vh);height:min(80vh,740px);margin-right:6%}
.req .aside .cutout::before{bottom:-6%;width:520%;height:70%;background:radial-gradient(50% 50% at 50% 50%,rgba(228,180,135,.13),rgba(228,180,135,0) 70%)}
.req-strip{margin-top:-10vh}
.notfound .wrap{display:block}
.notfound + .strip{margin-top:-16vh}
@media (max-width:760px){
  .req .wrap{display:block}
  .req-main,.req-head,.req-words{display:block}
  .req-head{display:flex;gap:4vw;align-items:flex-start;margin-bottom:14px}
  .req-words{min-width:0;flex:1 1 auto}
  .req .aside{display:block;flex:0 0 34vw;width:34vw;margin:-2vh -2vw 0 0;opacity:.85}
  .req .aside .cutout{position:relative;top:auto;height:auto;margin:0}
  .req .aside .cutout img{width:100%;height:auto}
  .req-h{text-shadow:0 2px 40px rgba(0,0,0,.65)}
  .req-lede{margin-top:0}
  .req-strip{margin-top:-6vh}
  .notfound + .strip{margin-top:-22vh}
}
.req .veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--bg),rgba(8,9,11,0) 180px),radial-gradient(60% 50% at 50% 88%,rgba(228,180,135,.08),rgba(228,180,135,0) 70%),radial-gradient(45% 50% at 100% 30%,rgba(23,51,36,.26),transparent 70%)}
.req-h{font-family:var(--display);font-weight:500;font-size:clamp(40px,5.6vw,72px);letter-spacing:-.02em;margin-bottom:34px}
.notfound{display:flex;align-items:center;min-height:60vh}
.notfound .ctas{margin-top:0}
.req-lede{font-family:var(--ui);font-weight:300;font-size:17px;line-height:1.55;color:var(--muted);max-width:56ch;margin:-14px 0 30px}
.reqform{max-width:720px;font-family:var(--ui);font-weight:300}
.switch{display:flex;gap:22px;margin-bottom:26px}
.switch button{font:400 14px/1 var(--ui);padding:10px 2px;min-height:44px;display:inline-flex;align-items:center;background:none;border:0;border-bottom:1px solid transparent;color:rgba(236,234,227,.5);cursor:pointer;transition:color .2s ease-out,border-color .35s var(--ease-quint)}
.switch button.on{color:var(--fg);border-bottom-color:var(--gold)}
.switch button:focus-visible{outline:none;color:var(--fg);border-bottom-color:rgba(194,169,127,.6)}
.fl{display:block;font:400 12.5px/1 var(--ui);color:rgba(236,234,227,.5);margin:0 0 8px}
.reqform label{display:block;margin-bottom:16px}
.reqform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.reqform input,.reqform textarea{width:100%;font:inherit;font-size:16px;color:var(--fg);background:transparent;border:0;border-radius:10px;padding:13px 14px;
  box-shadow:inset 0 0 0 1px rgba(236,234,227,.16),inset 0 1px 0 rgba(255,255,255,.05);outline:none;transition:box-shadow .2s}
.reqform input::placeholder,.reqform textarea::placeholder{color:rgba(236,234,227,.35)}
.reqform input:focus,.reqform textarea:focus{box-shadow:inset 0 0 0 1px rgba(194,169,127,.7),0 0 0 3px rgba(194,169,127,.12)}
.reqform textarea{resize:vertical;min-height:88px}
.req-actions{display:flex;align-items:center;gap:18px;margin-top:8px}
.req-note{font-size:14px;color:var(--muted);margin:6px 0 18px;line-height:1.5}
.req-done{font-size:17px;color:var(--muted);max-width:52ch;line-height:1.55}
.req-done a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.req-confirm{max-width:720px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--ui);font-weight:300}
.req-text{margin:18px 0;padding:16px 18px;font:14px/1.6 var(--ui);white-space:pre-wrap;word-break:break-word;color:var(--fg);background:rgba(236,234,227,.04);border:1px solid var(--line);border-radius:10px}
@media (max-width:640px){.reqform .grid2{grid-template-columns:1fr}}
.back{position:absolute;left:var(--pad);top:calc(var(--nav) + 6px);z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--muted)}
.back:hover{color:var(--fg)}
.back svg{width:14px;height:14px}
@media (min-width:1320px){.back{left:calc((100% - var(--wrap)) / 2 + 40px)}}

@media (prefers-reduced-motion:reduce){
  .hero h1 span,.reveal,.layers .layer,.layers .word,.door img{transition:none}
  .hero h1 span,.reveal{opacity:1;transform:none}
  .hero .ctas{opacity:1;transition:none}
  .explore i{animation:none}
  .state .readout span.dawn.on{animation:none;color:var(--gold)}
}

.brand{display:flex;align-items:center;gap:11px}
.brand svg.ring{height:33px;width:auto;display:block;flex-shrink:0}
.brand span{display:block}
.brand b{display:flex;align-items:baseline;gap:7px;font-family:var(--text);font-weight:500;font-size:14.5px;line-height:1;color:var(--fg)}
.brand b svg.wm{height:15.5px;width:auto;display:inline-block}
.brand b i{font-style:normal}
.brand small{display:block;font-size:10px;color:var(--muted);margin-top:5px;line-height:1;white-space:nowrap}
/* the mark rings: the two echoes breathe, the circle holds */
.brand .echo{transform-box:fill-box;transform-origin:center}
.brand .echo-up{animation:x432ring-up 3.2s ease-in-out infinite}
.brand .echo-down{animation:x432ring-down 3.2s ease-in-out infinite}
@keyframes x432ring-up{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:.28;transform:translateY(-1.1px)}}
@keyframes x432ring-down{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:.28;transform:translateY(1.1px)}}
@media (prefers-reduced-motion:reduce){.brand .echo{animation:none}}

/* home: the engine section over the symphony forest */
.symphony{min-height:100vh;display:flex;align-items:center}
.symphony .wrap{max-width:640px}
.symphony h2{font-size:clamp(44px,6vw,92px);line-height:.98;letter-spacing:-.02em;margin:0 0 22px}
.symphony .tag{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--muted);max-width:34em}
/* home: the line between the four doors, one Learn more */
.doors{position:relative}
.doors-band{grid-column:1/-1;position:relative;z-index:2;padding:clamp(40px,6vw,88px) 0;background:linear-gradient(to bottom,transparent,var(--bg) 18%,var(--bg) 82%,transparent)}
.doors-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.doors-band h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.02em;margin:0}
.door:nth-child(n+3){border-top:0}
@media (max-width:860px){.doors-band .wrap{flex-direction:column;align-items:flex-start}}
.symphony .scrim.left{background:linear-gradient(90deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.74) 42%,rgba(8,9,11,.28) 70%,transparent 100%)}
.symphony .tag{color:rgba(236,234,227,.82)}

/* home v5 */
.symphony .kicker.big{font-size:clamp(20px,2vw,28px);margin-bottom:22px}
.worlds-intro{padding:clamp(72px,9vw,140px) 0 clamp(40px,5vw,72px);background:var(--bg)}
.worlds-intro .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.worlds-intro h2{font-size:clamp(34px,4.2vw,64px);letter-spacing:-.02em;margin:0}
.supported{padding:clamp(88px,11vw,160px) 0 clamp(72px,9vw,128px)}
.supported .marks-row{justify-content:center}
.lab-strip{min-height:88vh}
.lab-strip .ctas{margin-top:28px}
/* engine v5 */
.engine-array-scene{min-height:100vh;display:flex;align-items:center}
.engine-ring .wrap.right,.engine-array-scene .wrap{max-width:620px}
.engine-ring .kicker,.engine-array-scene .kicker{margin-bottom:14px}
.engine-ring h2,.engine-array-scene h2{font-size:clamp(36px,4.4vw,68px);line-height:1.02;letter-spacing:-.02em;margin:0 0 18px}
.engine-ring .tag,.engine-array-scene .tag{font-size:clamp(16px,1.25vw,20px);line-height:1.5;color:rgba(236,234,227,.82);max-width:32em}
.engine-grid{position:relative;padding:clamp(88px,11vw,160px) 0;overflow:hidden;isolation:isolate}
.engine-grid .wall{position:absolute;inset:0;z-index:-1;opacity:.22}
.engine-grid .wall img{width:100%;height:100%;object-fit:cover}
.engine-grid .items{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);margin-top:22px}
.engine-grid h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.015em;margin:0 0 12px}
.engine-grid p{color:var(--muted);font-size:17px;line-height:1.55;margin:0}
.engine-grid .ctas{margin-top:48px}
@media (max-width:860px){.engine-grid .items{grid-template-columns:1fr;gap:32px}.worlds-intro .wrap{flex-direction:column;align-items:flex-start}}
.engine-ring .wrap.right,.engine-array-scene .wrap{display:block}
.engine-ring .kicker,.engine-array-scene .kicker,.engine-grid .kicker{display:block;font-size:15px}
.engine-grid{padding-bottom:clamp(120px,14vw,200px);z-index:1}
body.page-engine{--foot:0}
.engine-ring .kicker,.engine-array-scene .kicker{opacity:1;color:var(--gold);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.engine-ring .kicker{color:var(--fg);text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}

/* engine section: lines rise one by one as the section scrolls into view */
.symphony{min-height:200vh;align-items:flex-start;padding-top:22vh}
.symphony .wrap.lines{position:sticky;top:18vh}
.symphony h2{display:flex;flex-direction:column}
.symphony .line{opacity:0;transform:translateY(.55em);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.symphony .line.on{opacity:1;transform:none}
.symphony .kicker.big{margin-bottom:26px}
.symphony h2 .line+.line{margin-top:-.02em}
@media (max-width:760px){.symphony{min-height:170vh;padding-top:16vh}.symphony .wrap.lines{top:14vh}}
@media (prefers-reduced-motion:reduce){.symphony{min-height:100vh;align-items:center;padding-top:0}.symphony .wrap.lines{position:static}.symphony .line{opacity:1;transform:none;transition:none}}
/* worlds: air before the footer */
body.page-worlds{--foot:0}
.world.low{padding-bottom:12vh}
.symphony{overflow:clip}
.symphony .wrap.lines{max-width:900px}
.symphony h2{font-size:clamp(40px,5.4vw,82px)}
.symphony h2 .line{white-space:nowrap}
@media (max-width:760px){.symphony h2 .line{white-space:normal}}

/* engine section v7: a pinned scene, the picture at its natural scale, the text at the site's left edge */
.symphony{height:200vh;min-height:0;padding:0;overflow:visible;display:block}
.symphony .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;isolation:isolate}
.symphony .pin .bg{position:absolute;inset:0;z-index:0}
.symphony .pin .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.symphony .scrim.left{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,9,11,.9) 0%,rgba(8,9,11,.7) 38%,rgba(8,9,11,.22) 66%,transparent 100%)}
.symphony .wrap.lines{position:relative;z-index:2;top:auto;max-width:1160px;width:100%}
.symphony h2{font-size:clamp(44px,6vw,92px);max-width:12ch}
.symphony .tag{max-width:34em}
@media (max-width:760px){.symphony{height:170vh}.symphony h2{max-width:none}}
@media (prefers-reduced-motion:reduce){.symphony{height:auto}.symphony .pin{position:relative;height:auto;min-height:100vh}}
/* nav button: quieter */
.nav .btn{padding:8px 15px;font-size:13px;min-height:0;margin-right:-5px}
/* engine section v7.1 */
.symphony .pin .bg.feather{--fy:24%;--fy-top:18%}
.symphony .pin .bg img{top:0;height:100%;transform:none}
.symphony .wrap.lines{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,64px);align-items:end}
.symphony .kicker.big,.symphony h2{grid-column:1/-1}
.symphony .tag{grid-column:1;max-width:none;font-size:clamp(16px,1.3vw,19px);line-height:1.5;margin:0}
.symphony .ctas{grid-column:2;justify-self:start;align-self:end;margin:0 0 4px}
@media (max-width:860px){.symphony .wrap.lines{grid-template-columns:1fr}.symphony .tag,.symphony .ctas{grid-column:1}.symphony .ctas{margin-top:22px}}
.symphony .wrap.lines{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.symphony .tag{font-size:clamp(15.5px,1.2vw,17.5px);letter-spacing:-.005em}
/* engine section v7.2: description reads naturally, button at the far right */
.symphony .wrap.lines{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.symphony .tag{max-width:36em;font-size:clamp(16px,1.3vw,19px);letter-spacing:0}
.symphony .ctas{justify-self:end}

/* engine section v7.3: one line of description, the button at the bottom right of the scene */
.symphony .wrap.lines{display:block}
.symphony .tag{max-width:none;white-space:nowrap;font-size:clamp(16px,1.4vw,21px)}
.symphony .ctas{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(64px,10vh,110px);z-index:3;margin:0}
@media (max-width:760px){.symphony .tag{white-space:normal}.symphony .ctas{position:static;margin-top:24px}}
.symphony .wrap.lines{position:static}
/* engine page: the real-time act is centred in its scene */
.engine-array-scene{align-items:center;justify-content:center;text-align:center}
.engine-array-scene .wrap{margin:0 auto;max-width:760px;display:flex;flex-direction:column;align-items:center}
.engine-array-scene .tag{max-width:36em}
.engine-array-scene .scrim.left{background:radial-gradient(ellipse 60% 70% at 50% 55%,rgba(8,9,11,.82),rgba(8,9,11,.35) 60%,transparent 100%)}
.act.scene.engine-array-scene{align-items:center}
.act.scene.engine-array-scene .wrap{padding-top:calc(var(--nav) + 2vh);padding-bottom:6vh;align-items:center}
.engine-array-scene .kicker,.engine-array-scene h2,.engine-array-scene .tag{text-align:center;width:100%}
.engine-array-scene .tag{max-width:none;white-space:nowrap}
@media (max-width:760px){.engine-array-scene .tag{white-space:normal}.engine-array-scene .tag br{display:none}}
.doors-band .wrap{justify-content:flex-start;gap:clamp(28px,4vw,64px)}
.doors-band .wrap{gap:clamp(48px,9.4vw,135px)}
.doors-band .wrap{gap:100px;justify-content:center}
@media (max-width:860px){.doors-band .wrap{gap:24px;align-items:center;text-align:center}}
.supported{padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px)}
.supported{padding-top:clamp(66px,7.7vw,106px)}
body.page-index footer{padding-top:calc(clamp(56px,9vw,120px) + 20px)}
.symphony .ctas{right:calc(clamp(20px,5vw,72px) + 33px)}
/* worlds: the right-aligned act keeps one left edge for kicker, headline and lede */
.world.right .kicker,.world.right h2,.world.right .lede{width:min(100%,560px);max-width:none;margin-left:auto}
.world.right .lede{margin-left:auto}
.world.right .kicker,.world.right h2,.world.right .lede{width:min(100%,700px)}
.world.right h2{white-space:nowrap}
@media (max-width:860px){.world.right h2{white-space:normal}.world.right h2 br{display:none}}
/* phone hero: fit above the browser toolbar (svh), lift the headline, smaller nav button; desktop untouched */
@media (max-width:760px){.hero{min-height:100svh;align-items:center}.hero .wrap{padding-bottom:0;padding-top:14vh}.hero .ctas{display:none}.nav .btn{padding:7px 12px;font-size:12px;min-height:0;margin-right:0}}

/* request: honeypot field is never shown; the copy block only matters on the mailto path */
.reqform .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
#reqdone:not([hidden])~.req-text,#reqdone:not([hidden])~#reqcopy{display:none}