:root {
  --navy:#001842;
  --raspberry:#ce0050;
  --gold:#e9bd53;
  --paper:#f7f5ee;
  --ink:#001842;
  --line:#00184230;
  --gutter:clamp(24px,6vw,96px);
  --sans:'Avenir Next','Century Gothic',Arial,sans-serif;
  --serif:Baskerville,'Iowan Old Style','Times New Roman',serif;
  --mono:'SFMono-Regular',Consolas,monospace;
  color-scheme:light;
  scroll-behavior:smooth;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--gold);
  color:var(--navy);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure {
  margin:0;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
button:disabled {
  cursor:default;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button[hidden],[hidden] {
  display:none!important;
}
button:focus-visible,a:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
svg {
  display:block;
}
h1,h2,h3 {
  font-weight:600;
  letter-spacing:-.065em;
}
h2 {
  font-size:clamp(52px,6.6vw,112px);
  line-height:.99;
}
h3 {
  font-size:clamp(28px,3.4vw,54px);
  line-height:1.1;
}
em {
  font-family:var(--serif);
  font-weight:400;
}
p {
  line-height:1.6;
}
::selection {
  background:var(--raspberry);
  color:white;
}
.eyebrow {
  font-family:var(--mono);
  font-size:10px;
  line-height:1.6;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:44px;
  border:0;
  border-bottom:1px solid currentColor;
  padding:6px 0;
  background:transparent;
  font-size:13px;
  font-weight:500;
}
.text-link span {
  font-size:22px;
  transition:transform .25s;
}
.text-link:hover span {
  transform:translate(3px,-3px);
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  padding:16px 24px;
  background:var(--paper);
  color:var(--navy);
  transform:translateY(-200%);
}
.skip-link:focus {
  transform:none;
}
.reading-progress {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  z-index:90;
  pointer-events:none;
}
.reading-progress span {
  display:block;
  width:100%;
  height:100%;
  background:var(--raspberry);
  transform-origin:left;
  transform:scaleX(var(--reading-progress,0));
}
[data-scene] {
  position:relative;
  --scene-progress:0;
  --scene-enter:1;
  --scene-exit:0;
  scroll-margin-top:0;
}
.story-motion-enabled [data-reveal] {
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.15,1);
}
.story-motion-enabled [data-reveal]:not(.is-visible) {
  opacity:0;
  transform:translateY(35px);
}
/* A full-bleed typographic opening; the two planes set the story in motion. */
.opening {
  height:145svh;
  min-height:990px;
  background:var(--gold);
}
.opening-stage {
  position:sticky;
  top:0;
  height:100svh;
  min-height:690px;
  padding:155px var(--gutter) 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  isolation:isolate;
  overflow:clip;
  background:var(--gold);
}
.hero-grid {
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:linear-gradient(#0018420b 1px,transparent 1px),linear-gradient(90deg,#0018420b 1px,transparent 1px);
  background-size:90px 90px;
  mask-image:linear-gradient(transparent 15%,#000 100%);
}
.hero-eyebrow {
  position:absolute;
  top:152px;
  left:var(--gutter);
}
.hero-title {
  font-size:clamp(75px,11.6vw,190px);
  line-height:.94;
  letter-spacing:-.075em;
  position:relative;
  z-index:2;
  transform:translate(calc(var(--pointer-x,0)*-3px),calc(var(--scene-progress)*-38px)) rotate(-5deg);
  transform-origin:50% 70%;
  margin:0 -1.5vw 40px;
}
.hero-title>span {
  display:block;
  white-space:nowrap;
}
.hero-title>span:first-child {
  padding-left:6vw;
}
.hero-title>span:nth-child(2) {
  padding-left:0;
}
.hero-title em {
  color:var(--raspberry);
  letter-spacing:-.085em;
  white-space:nowrap;
}
.hero-period {
  display:inline-block;
  margin-left:.04em;
  letter-spacing:0;
}
.hero-orbit {
  position:absolute;
  z-index:-1;
  width:48vw;
  height:48vw;
  border:1px solid #0018423d;
  transform:rotate(calc(25deg + var(--scene-progress)*32deg + var(--pointer-x,0)*2deg));
  pointer-events:none;
}
.orbit-one {
  right:-25vw;
  top:1vh;
  background:#e9bd53;
}
.orbit-two {
  left:-28vw;
  bottom:-22vw;
  transform:rotate(calc(-25deg - var(--scene-progress)*25deg));
}
.hero-orbit::after {
  content:'';
  position:absolute;
  inset:22px;
  border:1px solid #00184226;
}
.hero-corner {
  position:absolute;
  right:-5vw;
  bottom:-11vw;
  width:24vw;
  height:24vw;
  background:var(--raspberry);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,50% 50%,0 50%);
  transform:translateY(calc(var(--scene-progress)*-10vh)) rotate(calc(-12deg + var(--scene-progress)*45deg));
  z-index:-1;
}
.hero-footer {
  display:flex;
  justify-content:space-between;
  align-items:end;
  position:relative;
  gap:50px;
  padding-top:18px;
}
.hero-intro {
  max-width:390px;
  margin-right:6vw;
}
.hero-intro p {
  font-size:14px;
  line-height:1.6;
  max-width:370px;
}
.hero-intro .text-link {
  margin-top:15px;
  min-width:155px;
}
.story-cue {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:11px;
}
.down-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border:1px solid var(--navy);
  border-radius:50%;
  font-size:28px;
  transition:transform .3s;
}
.story-cue:hover .down-arrow {
  transform:translateY(6px);
}
/* The web: an open window, drawn as an original editorial composition. */
.web-scene {
  height:190svh;
  min-height:1400px;
  background:var(--paper);
}
.scene-stage {
  position:sticky;
  top:0;
  min-height:760px;
  height:100svh;
  overflow:clip;
}
.web-stage {
  padding:130px var(--gutter) 50px;
  background:var(--paper);
}
.scene-heading {
  position:relative;
  z-index:4;
  max-width:570px;
  pointer-events:none;
}
.scene-heading .eyebrow {
  margin-bottom:25px;
}
.scene-heading h2 {
  font-size:clamp(54px,6.5vw,104px);
}
.scene-heading>p:last-child {
  max-width:285px;
  font-size:14px;
  margin-top:26px;
}
.web-composition {
  position:absolute;
  right:0;
  top:18%;
  width:58vw;
  height:68%;
  transform:translateY(calc((1 - var(--scene-enter))*100px));
  perspective:1400px;
}
.web-atlas {
  position:absolute;
  width:90%;
  right:-8%;
  top:-8%;
  opacity:.38;
  transform:rotate(calc(var(--scene-progress)*12deg));
}
.browser-window {
  position:absolute;
  width:74%;
  left:20%;
  top:15%;
  background:var(--paper);
  border:2px solid var(--navy);
  box-shadow:12px 12px 0 var(--navy);
  transform:translateY(calc(var(--scene-progress)*-45px)) rotate(calc(-8deg + var(--scene-progress)*10deg));
  transform-origin:30% 70%;
}
.window-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:var(--navy);
  color:var(--paper);
  font:10px var(--mono);
}
.window-dots {
  display:flex;
  gap:5px;
}
.window-dots i {
  width:7px;
  height:7px;
  border:1px solid var(--paper);
  border-radius:50%;
}
.address-bar {
  display:flex;
  gap:12px;
  justify-content:space-between;
  font:9px var(--mono);
  padding:12px;
  border-bottom:1px solid var(--navy);
}
.address-bar>span:nth-child(2) {
  flex:1;
  padding-left:14px;
  border-left:1px solid var(--line);
}
.browser-canvas {
  position:relative;
  overflow:clip;
  min-height:270px;
  padding:27px;
  background:var(--gold);
}
.browser-small {
  font:10px var(--mono);
}
.browser-canvas>p {
  font-size:clamp(42px,5vw,80px);
  line-height:1;
  letter-spacing:-.065em;
  margin:22px 0;
  font-weight:600;
  position:relative;
  z-index:1;
}
.browser-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #00184266;
  padding-top:12px;
  font:9px var(--mono);
}
.wire-globe {
  position:absolute;
  right:-25px;
  top:28px;
  width:180px;
  height:180px;
  border:1px solid var(--navy);
  border-radius:50%;
  opacity:.65;
}
.wire-globe i {
  position:absolute;
  inset:0 25%;
  border:1px solid var(--navy);
  border-radius:50%;
}
.wire-globe i:nth-child(2) {
  inset:25% 0;
}
.wire-globe i:nth-child(3) {
  inset:45% 0;
}
.floating-note {
  position:absolute;
  left:10%;
  bottom:0;
  z-index:2;
  display:flex;
  gap:20px;
  align-items:center;
  padding:18px 25px;
  background:var(--raspberry);
  color:var(--paper);
  transform:rotate(7deg) translateY(calc(var(--scene-progress)*-25px));
}
.floating-note>span {
  font-size:45px;
}
.floating-note p {
  font-size:12px;
  line-height:1.4;
}
.scene-footnote {
  position:absolute;
  bottom:48px;
  left:var(--gutter);
  font:10px var(--mono);
  max-width:230px;
  line-height:1.6;
}
/* Native: the same frame becomes a handheld surface as the scene passes. */
.native-scene {
  height:180svh;
  min-height:1350px;
  background:var(--navy);
  color:var(--paper);
}
.native-stage {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:50px;
  padding:125px var(--gutter) 70px;
  background:var(--navy);
}
.native-copy {
  position:relative;
  z-index:3;
}
.native-copy .eyebrow {
  color:var(--gold);
  margin-bottom:30px;
}
.native-copy h2 {
  font-size:clamp(50px,5.7vw,90px);
}
.native-copy h2 em {
  color:var(--gold);
}
.native-copy>p:not(.eyebrow) {
  max-width:365px;
  margin-top:28px;
  font-size:14px;
  color:#f7f5eecc;
}
.native-copy .native-small {
  font:10px/1.7 var(--mono);
  padding-left:16px;
  border-left:1px solid var(--raspberry);
}
.native-device-space {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:540px;
  perspective:1200px;
}
.device-orbit {
  position:absolute;
  width:520px;
  height:520px;
  max-width:50vw;
  border:1px solid #e9bd5333;
  border-radius:50%;
  transform:rotateX(60deg) rotate(calc(30deg + var(--scene-progress)*45deg));
}
.device-orbit.second {
  transform:rotateY(65deg) rotate(-30deg);
  border-color:#ce005077;
}
.morph-device {
  position:relative;
  width:calc(435px - var(--scene-progress)*190px);
  height:calc(350px + var(--scene-progress)*145px);
  max-width:42vw;
  border:2px solid var(--paper);
  border-radius:calc(6px + var(--scene-progress)*32px);
  padding:8px;
  box-shadow:12px 18px 0 #000a;
  transform:rotate(calc(7deg - var(--scene-progress)*12deg));
  overflow:clip;
  background:var(--paper);
  color:var(--navy);
}
.morph-bar {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  font:8px var(--mono);
  padding:6px;
  opacity:calc(1 - var(--scene-progress)*3);
  height:24px;
  position:absolute;
  top:9px;
  left:8px;
  right:8px;
}
.device-island {
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:68px;
  height:18px;
  border-radius:30px;
  background:var(--navy);
  opacity:var(--scene-progress);
  z-index:2;
}
.native-interface {
  height:100%;
  padding:14px 20px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  border-radius:calc(var(--scene-progress)*25px);
  background:#e9bd5329;
  text-align:center;
}
.native-time {
  align-self:flex-start;
  font:8px var(--mono);
  opacity:var(--scene-progress);
}
.native-greeting {
  font-size:23px;
  letter-spacing:-.04em;
  line-height:1.15;
  margin-top:18px;
  font-weight:600;
}
.native-prompt {
  font-size:11px;
  line-height:1.5;
}
.native-action {
  font-size:10px;
  background:var(--navy);
  color:var(--paper);
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  gap:30px;
  width:100%;
  margin-top:10px;
  border-radius:4px;
}
.voice-orb {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:125px;
  height:125px;
  border-radius:50%;
  border:1px solid #ce005044;
  margin:12px 0;
}
.voice-orb i {
  width:3px;
  height:20%;
  background:var(--raspberry);
  border-radius:3px;
  transform:scaleY(calc(.6 + var(--scene-progress)*.5));
}
.voice-orb i:nth-child(2n) {
  height:50%;
}
.voice-orb i:nth-child(3n) {
  height:70%;
}
.voice-orb i:nth-child(5) {
  height:85%;
}
.home-indicator {
  position:absolute;
  bottom:12px;
  left:34%;
  right:34%;
  height:3px;
  border-radius:3px;
  background:var(--navy);
  opacity:var(--scene-progress);
}
.device-caption {
  position:absolute;
  bottom:-10px;
  left:0;
  right:0;
  text-align:center;
  font:10px var(--mono);
  color:var(--gold);
}
/* Intent stays human: a transparent, controllable interaction study. */
.intent-scene {
  padding:135px var(--gutter) 100px;
  background:var(--raspberry);
  color:var(--paper);
  overflow:clip;
}
.intent-heading {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:25px 70px;
  align-items:end;
}
.intent-heading>.eyebrow {
  grid-column:1/-1;
}
.intent-heading h2 {
  font-size:clamp(60px,7.5vw,120px);
}
.intent-heading>p:last-child {
  font-size:15px;
  max-width:350px;
  padding-bottom:8px;
}
.intent-workbench {
  margin-top:70px;
  background:var(--paper);
  color:var(--navy);
  box-shadow:12px 12px 0 #0018424d;
}
.intent-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:18px 30px;
}
.intent-caption>span:last-child {
  font:10px var(--mono);
}
.intent-demo {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:36px;
}
.intent-steps {
  list-style:none;
  margin:0;
  padding:0;
}
.intent-steps li {
  display:flex;
  gap:22px;
  border-bottom:1px solid var(--line);
  padding:22px 0;
  transition:opacity .3s,transform .3s;
}
.intent-steps li:first-child {
  padding-top:8px;
}
.intent-steps li:last-child {
  border-bottom:0;
}
.step-number {
  font:10px var(--mono);
  padding-top:5px;
}
.intent-steps h3 {
  font-size:20px;
  letter-spacing:-.035em;
  line-height:1.25;
}
.intent-steps p {
  font-size:12px;
  max-width:310px;
  margin-top:8px;
}
.intent-interactive .intent-steps li {
  opacity:.65;
}
.intent-interactive .intent-steps li.is-active {
  opacity:1;
  transform:translateX(5px);
}
.is-active .step-number {
  color:var(--raspberry);
}
.intent-preview {
  border:1px solid var(--navy);
  align-self:center;
  transform:rotate(3deg);
  box-shadow:6px 6px 0 var(--gold);
}
.intent-preview-top {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px;
  border-bottom:1px solid var(--navy);
  font:9px var(--mono);
}
.intent-preview-top>span:last-child {
  margin-left:auto;
}
.tiny-symbol {
  display:inline-block;
  width:12px;
  height:12px;
  background:var(--raspberry);
  box-shadow:5px -5px 0 var(--gold);
}
.intent-preview-body {
  padding:32px 25px;
  background:#e9bd5320;
}
.intent-preview-kicker {
  font:9px var(--mono);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.intent-preview-body>p {
  font-size:clamp(26px,2.8vw,43px);
  line-height:1.1;
  letter-spacing:-.045em;
  margin-top:15px;
  min-height:94px;
}
.intent-preview-lines {
  display:flex;
  gap:5px;
  align-items:center;
  height:25px;
  margin:18px 0;
}
.intent-preview-lines i {
  height:3px;
  background:var(--raspberry);
  width:38px;
}
.intent-preview-lines i:nth-child(2) {
  width:60px;
}
.intent-preview-lines i:last-child {
  width:20px;
}
.intent-preview-action {
  font:10px var(--mono);
  display:block;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.intent-controls {
  display:flex;
  gap:30px;
  align-items:center;
  justify-content:space-between;
  padding:0 36px 24px;
}
.intent-controls>p {
  max-width:300px;
  font:9px/1.6 var(--mono);
}
.intent-controls .text-link {
  font-size:11px;
  flex-shrink:0;
}
.coexistence {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
  margin-top:125px;
}
.coexistence>img {
  background:var(--gold);
  transform:rotate(-5deg);
  padding:15px;
  box-shadow:12px 12px 0 #00184255;
}
.coexistence h3 {
  font-size:clamp(38px,4vw,64px);
}
.coexistence p {
  max-width:360px;
  font-size:14px;
  margin-top:24px;
}
/* Vantage + craft. A working drawing becomes the supplied mark. */
.craft-scene {
  background:var(--paper);
  padding:140px var(--gutter) 120px;
  overflow:clip;
}
.craft-heading>.eyebrow {
  margin-bottom:28px;
}
.craft-heading h2 {
  font-size:clamp(54px,7vw,112px);
}
.craft-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:8vw;
  align-items:center;
  margin-top:65px;
}
.craft-study {
  position:relative;
  min-height:490px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:1px solid var(--line);
  isolation:isolate;
}
.craft-guides {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#00184218 1px,transparent 1px),linear-gradient(90deg,#00184218 1px,transparent 1px);
  background-size:calc(100% / 6) calc(100% / 6);
  transition:background-size .7s,opacity .7s;
}
.craft-symbol {
  width:54%;
  position:relative;
  z-index:1;
  transition:transform .7s;
}
.craft-symbol>svg {
  width:100%;
  height:100%;
}
.craft-study[data-phase="shape"] .craft-symbol {
  transform:scale(.88) rotate(-9deg);
}
.craft-study[data-phase="refine"] .craft-guides {
  opacity:.2;
}
.craft-axis {
  position:absolute;
  font:9px var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.axis-top {
  top:20px;
  left:20px;
}
.axis-bottom {
  right:20px;
  bottom:20px;
}
.name-meaning {
  font-size:clamp(20px,2.15vw,34px);
  letter-spacing:-.045em;
  line-height:1.4;
}
.name-meaning strong {
  font-weight:600;
}
.craft-intro {
  font-size:14px;
  margin-top:25px;
  max-width:355px;
}
.craft-selector,.scenario-selector {
  display:flex;
  margin-top:35px;
  border-bottom:1px solid var(--line);
}
.craft-selector button,.scenario-selector button {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  min-height:46px;
  padding:0 20px 0 0;
  margin-right:22px;
  font-size:12px;
  position:relative;
}
.craft-selector button[aria-pressed=true] {
  border-bottom-color:var(--raspberry);
  color:var(--raspberry);
}
.craft-selector button:last-child,.scenario-selector button:last-child {
  margin-right:0;
}
.craft-detail {
  min-height:210px;
  padding-top:25px;
}
.craft-detail>.eyebrow {
  font-size:9px;
}
.craft-detail h3 {
  font-size:31px;
  margin-top:13px;
  letter-spacing:-.045em;
}
.craft-detail>p {
  font-size:13px;
  max-width:350px;
  margin-top:15px;
}
/* One actual product, shown with its actual development screen. */
.orate-scene {
  padding:100px var(--gutter) 95px;
  background:var(--navy);
  color:var(--paper);
  overflow:clip;
}
.orate-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-bottom:28px;
  border-bottom:1px solid #f7f5ee40;
}
.orate-top>.eyebrow {
  color:var(--gold);
}
.product-status {
  display:flex;
  gap:8px;
  align-items:center;
  font:9px var(--mono);
}
.product-status i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}
.orate-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
  margin-top:70px;
}
.orate-wordmark {
  width:145px;
  height:auto;
  max-height:60px;
  object-fit:contain;
  object-position:left;
  margin-bottom:30px;
  filter:brightness(0) invert(1);
}
.orate-copy h2 {
  font-size:clamp(52px,5.7vw,90px);
}
.orate-copy h2 em {
  color:var(--gold);
}
.orate-copy>p:not(.scenario-copy) {
  font-size:14px;
  max-width:370px;
  margin-top:30px;
}
.scenario-selector {
  border-bottom-color:#f7f5ee40;
}
.scenario-selector button {
  font-size:10px;
  margin-right:14px;
  padding-right:16px;
}
.scenario-selector button[aria-pressed=true] {
  border-bottom-color:var(--gold);
  color:var(--gold);
}
.scenario-copy {
  font-size:12px;
  min-height:65px;
  max-width:350px;
  margin:20px 0;
  color:#f7f5eec7;
}
.orate-link {
  min-width:200px;
  color:var(--gold);
}
.orate-product {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:650px;
  padding-bottom:35px;
  isolation:isolate;
}
.orate-backdrop {
  position:absolute;
  top:8%;
  bottom:10%;
  left:-2%;
  right:-12%;
  background:var(--raspberry);
  transform:rotate(10deg);
  z-index:-1;
  overflow:clip;
}
.orate-backdrop>span {
  display:block;
  padding:24px;
  color:#f7f5ee33;
  font-size:clamp(70px,9vw,140px);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.07em;
}
.orate-phone {
  width:242px;
  background:#101017;
  border:5px solid #353647;
  border-radius:39px;
  overflow:clip;
  box-shadow:15px 25px 0 #0005;
  transform:rotate(calc(-7deg + var(--scene-enter)*3deg)) translateY(calc((1 - var(--scene-enter))*60px));
  position:relative;
}
.orate-phone img {
  width:100%;
  height:auto;
}
.orate-product figcaption {
  position:absolute;
  bottom:0;
  font:9px var(--mono);
  text-align:center;
  color:#f7f5eeaa;
}
/* The studio remains the common thread, regardless of the interface. */
.studio-scene {
  padding:130px var(--gutter) 110px;
  background:var(--gold);
  overflow:clip;
  min-height:860px;
}
.studio-outlook {
  position:relative;
  z-index:2;
}
.studio-outlook>.eyebrow {
  margin-bottom:35px;
}
.studio-outlook h2 {
  font-size:clamp(64px,8.8vw,140px);
}
.studio-outlook h2 em {
  color:var(--raspberry);
}
.outlook-bottom {
  display:flex;
  gap:35px;
  align-items:center;
  margin-top:60px;
  max-width:500px;
}
.outlook-mark {
  width:85px;
}
.outlook-bottom p {
  font-size:14px;
  max-width:340px;
}
.outlook-art {
  position:absolute;
  right:-13%;
  top:17%;
  width:60%;
  opacity:.65;
  transform:rotate(calc(12deg - var(--scene-progress)*20deg));
}
.outlook-art img {
  width:100%;
}
.contact-scene {
  padding:120px var(--gutter) 60px;
  background:var(--paper);
}
.contact-top>.eyebrow {
  margin-bottom:30px;
}
.contact-top h2 {
  font-size:clamp(64px,8vw,128px);
}
.contact-top>p:last-child {
  font-size:14px;
  margin-top:30px;
}
.contact-email {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
  margin-top:65px;
  padding:25px 0;
  font-size:clamp(20px,3.9vw,62px);
  letter-spacing:-.045em;
}
.contact-email>span {
  font-size:1.4em;
  transition:transform .3s;
}
.contact-email:hover>span {
  transform:translate(5px,-5px);
}
.contact-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-top:25px;
  font:9px var(--mono);
}
.contact-bottom>div {
  display:flex;
  align-items:center;
  gap:20px;
}
.contact-bottom .text-link {
  font-size:10px;
}
.site-footer {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:24px var(--gutter);
  background:var(--paper);
  border-top:1px solid var(--line);
  font:9px var(--mono);
}
.site-footer>a {
  display:flex;
  gap:22px;
  align-items:center;
  min-height:30px;
}
/* The story collapses into readable scenes on smaller screens. */
@media(min-width:1600px) {
  .opening-stage {
    padding-top:180px;
  }
  .hero-eyebrow {
    top:170px;
  }
  .hero-title {
    font-size:11.3vw;
  }
  .hero-intro {
    max-width:420px;
  }
  .hero-intro p {
    font-size:17px;
  }
  .scene-stage {
    min-height:850px;
  }
  .web-composition {
    height:70%;
  }
  .native-device-space {
    height:620px;
  }
  .morph-device {
    width:calc(500px - var(--scene-progress)*210px);
    height:calc(400px + var(--scene-progress)*180px);
  }
}
@media(max-width:1050px) {
  .hero-title {
    font-size:11.2vw;
  }
  .hero-intro {
    margin-right:3vw;
    max-width:330px;
  }
  .web-stage {
    padding-top:135px;
  }
  .web-composition {
    right:-4vw;
    width:64vw;
    top:28%;
    height:60%;
  }
  .browser-window {
    width:78%;
    left:18%;
  }
  .scene-heading {
    max-width:450px;
  }
  .scene-heading h2 {
    font-size:6.8vw;
  }
  .native-stage {
    gap:25px;
  }
  .native-copy h2 {
    font-size:5.7vw;
  }
  .native-device-space {
    height:485px;
  }
  .morph-device {
    width:calc(355px - var(--scene-progress)*135px);
    height:calc(325px + var(--scene-progress)*135px);
  }
  .intent-demo {
    padding:25px;
    gap:25px;
  }
  .intent-steps h3 {
    font-size:18px;
  }
  .intent-preview-body {
    padding:25px 20px;
  }
  .craft-layout {
    gap:5vw;
  }
  .craft-study {
    min-height:420px;
  }
  .orate-layout {
    gap:35px;
  }
  .orate-product {
    min-height:610px;
  }
  .orate-phone {
    width:230px;
  }
  .scenario-selector button {
    padding-right:9px;
    margin-right:10px;
  }
}
@media(max-width:800px) {
  :root {
    --gutter:26px;
  }
  .opening {
    height:115svh;
    min-height:800px;
  }
  .opening-stage {
    min-height:700px;
    padding:145px var(--gutter) 44px;
    justify-content:center;
  }
  .hero-eyebrow {
    top:120px;
    font-size:8px;
  }
  .hero-title {
    font-size:11.8vw;
    line-height:1.02;
    margin:0 0 45px;
    transform:rotate(-6deg) translateY(calc(var(--scene-progress)*-15px));
    letter-spacing:-.08em;
  }
  .hero-title>span:first-child {
    padding-left:0;
  }
  .hero-title>span:nth-child(2) {
    padding-left:0;
  }
  .hero-footer {
    gap:40px;
  }
  .hero-intro {
    margin:0;
    max-width:310px;
  }
  .hero-intro p {
    font-size:12px;
  }
  .story-cue {
    gap:10px;
    font-size:9px;
  }
  .down-arrow {
    width:40px;
    height:40px;
    font-size:22px;
  }
  .hero-corner {
    width:36vw;
    height:36vw;
    bottom:-17vw;
    right:-5vw;
  }
  .orbit-one {
    width:70vw;
    height:70vw;
    right:-48vw;
    top:20vh;
  }
  .orbit-two {
    width:70vw;
    height:70vw;
    left:-47vw;
    bottom:-24vw;
  }
  .web-scene {
    height:auto;
    min-height:0;
  }
  .scene-stage {
    position:relative;
    height:auto;
    min-height:0;
  }
  .web-stage {
    padding:110px var(--gutter) 60px;
  }
  .scene-heading {
    max-width:none;
  }
  .scene-heading h2 {
    font-size:clamp(54px,8.5vw,80px);
  }
  .scene-heading>p:last-child {
    max-width:350px;
  }
  .web-composition {
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    height:520px;
    margin-top:15px;
    transform:none;
  }
  .web-atlas {
    right:-8%;
    top:0;
    width:95%;
  }
  .browser-window {
    top:17%;
    left:10%;
    width:82%;
    transform:rotate(-6deg);
  }
  .browser-canvas {
    min-height:270px;
  }
  .browser-canvas>p {
    font-size:55px;
  }
  .floating-note {
    bottom:5%;
    left:5%;
  }
  .scene-footnote {
    position:relative;
    bottom:auto;
    left:auto;
    max-width:none;
    margin-top:30px;
  }
  .native-scene {
    height:auto;
    min-height:0;
  }
  .native-stage {
    grid-template-columns:1fr;
    padding:110px var(--gutter) 65px;
    gap:50px;
  }
  .native-copy h2 {
    font-size:clamp(54px,8.5vw,80px);
  }
  .native-copy>p:not(.eyebrow) {
    max-width:400px;
  }
  .native-device-space {
    height:525px;
  }
  .morph-device {
    width:245px;
    height:495px;
    max-width:none;
    border-radius:38px;
    transform:rotate(-5deg);
  }
  .morph-bar {
    opacity:0;
  }
  .device-island,.native-time,.home-indicator {
    opacity:1;
  }
  .native-interface {
    border-radius:25px;
  }
  .voice-orb i {
    transform:none;
  }
  .device-orbit {
    max-width:none;
    width:450px;
    height:450px;
  }
  .device-caption {
    bottom:-10px;
  }
  .intent-scene {
    padding:110px var(--gutter) 85px;
  }
  .intent-heading {
    grid-template-columns:1fr;
    gap:25px;
  }
  .intent-heading h2 {
    font-size:clamp(56px,9.6vw,85px);
  }
  .intent-heading>p:last-child {
    font-size:14px;
    max-width:400px;
  }
  .intent-workbench {
    margin-top:45px;
    box-shadow:7px 7px 0 #0018424d;
  }
  .intent-caption {
    padding:16px 22px;
  }
  .intent-demo {
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:22px;
  }
  .intent-steps li {
    gap:12px;
  }
  .intent-steps h3 {
    font-size:16px;
  }
  .intent-steps p {
    font-size:11px;
  }
  .intent-preview-body {
    padding:22px 15px;
  }
  .intent-preview-body>p {
    font-size:26px;
  }
  .intent-controls {
    padding:0 22px 22px;
  }
  .intent-controls>p {
    max-width:230px;
  }
  .coexistence {
    gap:35px;
    margin-top:85px;
  }
  .coexistence h3 {
    font-size:36px;
  }
  .coexistence p {
    font-size:12px;
  }
  .craft-scene {
    padding:105px var(--gutter) 75px;
  }
  .craft-heading h2 {
    font-size:clamp(52px,8.2vw,78px);
  }
  .craft-layout {
    margin-top:45px;
    gap:35px;
  }
  .craft-study {
    min-height:360px;
  }
  .craft-symbol {
    width:62%;
  }
  .name-meaning {
    font-size:22px;
  }
  .craft-intro {
    font-size:12px;
  }
  .craft-selector button {
    padding-right:9px;
    margin-right:12px;
    font-size:10px;
  }
  .craft-detail h3 {
    font-size:26px;
  }
  .craft-detail>p {
    font-size:12px;
  }
  .orate-scene {
    padding:90px var(--gutter) 70px;
  }
  .orate-layout {
    gap:30px;
  }
  .orate-copy h2 {
    font-size:clamp(44px,6.7vw,64px);
  }
  .orate-copy>p:not(.scenario-copy) {
    font-size:12px;
  }
  .scenario-selector {
    flex-wrap:wrap;
    margin-top:25px;
  }
  .scenario-selector button {
    margin-right:16px;
    font-size:10px;
  }
  .scenario-copy {
    font-size:11px;
  }
  .orate-product {
    min-height:530px;
  }
  .orate-phone {
    width:210px;
    border-radius:32px;
  }
  .orate-backdrop {
    left:-6%;
    right:-30%;
  }
  .orate-wordmark {
    width:125px;
  }
  .studio-scene {
    min-height:750px;
    padding:105px var(--gutter) 85px;
  }
  .studio-outlook h2 {
    font-size:clamp(56px,9.2vw,86px);
  }
  .outlook-art {
    right:-30%;
    width:80%;
    top:20%;
    opacity:.35;
  }
  .contact-scene {
    padding:100px var(--gutter) 40px;
  }
  .contact-top h2 {
    font-size:clamp(56px,8vw,80px);
  }
  .contact-email {
    font-size:4vw;
  }
  .site-footer {
    font-size:8px;
  }
}
@media(max-width:560px) {
  .opening {
    min-height:780px;
    height:110svh;
  }
  .opening-stage {
    height:100svh;
    min-height:710px;
    padding:120px 22px 40px;
    justify-content:flex-start;
  }
  .hero-eyebrow {
    position:relative;
    left:auto;
    top:auto;
    margin:18px 0 45px;
    font-size:8px;
  }
  .hero-title {
    font-size:20vw;
    line-height:.91;
    margin:0 -5px 32px;
    transform:rotate(-6deg);
    letter-spacing:-.075em;
  }
  .hero-title>span:first-child {
    padding-left:7px;
  }
  .hero-title>span:nth-child(2) {
    white-space:normal;
  }
  .hero-title em {
    display:block;
    text-align:right;
    margin-top:4px;
    padding-right:15px;
    font-size:1.17em;
  }
  .hero-footer {
    flex-direction:column-reverse;
    align-items:start;
    gap:26px;
    padding-top:0;
  }
  .hero-intro {
    max-width:295px;
    margin-left:4px;
  }
  .hero-intro p {
    font-size:12px;
    line-height:1.6;
  }
  .hero-intro .text-link {
    margin-top:9px;
    font-size:11px;
    min-height:38px;
    min-width:145px;
  }
  .story-cue {
    gap:12px;
  }
  .down-arrow {
    width:34px;
    height:34px;
    font-size:20px;
  }
  .hero-corner {
    bottom:-8vw;
    right:-13vw;
    width:60vw;
    height:60vw;
    opacity:.95;
  }
  .orbit-one {
    top:140px;
    right:-65vw;
    width:90vw;
    height:90vw;
  }
  .orbit-two {
    bottom:-52vw;
    left:-65vw;
    width:100vw;
    height:100vw;
  }
  .web-stage {
    padding-top:100px;
  }
  .scene-heading h2,.native-copy h2 {
    font-size:54px;
  }
  .scene-heading>.eyebrow {
    font-size:8px;
    margin-bottom:20px;
  }
  .scene-heading>p:last-child {
    font-size:13px;
    max-width:300px;
    margin-top:23px;
  }
  .web-composition {
    height:365px;
    margin:25px -10px 0;
    width:calc(100% + 20px);
  }
  .web-atlas {
    top:0;
    width:110%;
    max-width:none;
    right:-5%;
  }
  .browser-window {
    left:4%;
    width:93%;
    top:12%;
    box-shadow:6px 6px 0 var(--navy);
    border-width:1px;
  }
  .window-bar {
    padding:8px;
    font-size:8px;
  }
  .address-bar {
    font-size:7px;
    padding:8px;
  }
  .browser-canvas {
    min-height:220px;
    padding:20px;
  }
  .browser-canvas>p {
    font-size:43px;
    margin:22px 0;
  }
  .browser-small {
    font-size:8px;
  }
  .wire-globe {
    width:125px;
    height:125px;
    right:-10px;
  }
  .browser-bottom {
    font-size:7px;
  }
  .floating-note {
    left:2%;
    bottom:0;
    padding:12px 20px;
    gap:15px;
  }
  .floating-note>span {
    font-size:30px;
  }
  .floating-note p {
    font-size:10px;
  }
  .scene-footnote {
    font-size:9px;
    max-width:260px;
  }
  .native-stage {
    padding-top:100px;
  }
  .native-copy>.eyebrow {
    font-size:8px;
    margin-bottom:24px;
  }
  .native-copy>p:not(.eyebrow) {
    font-size:13px;
  }
  .native-copy .native-small {
    font-size:9px!important;
  }
  .native-device-space {
    height:510px;
  }
  .device-orbit {
    width:370px;
    height:370px;
  }
  .intent-scene {
    padding-top:100px;
  }
  .intent-heading>.eyebrow {
    font-size:8px;
  }
  .intent-heading h2 {
    font-size:56px;
  }
  .intent-heading>p:last-child {
    font-size:13px;
  }
  .intent-caption {
    padding:15px 18px;
  }
  .intent-caption>.eyebrow {
    font-size:8px;
  }
  .intent-caption>span:last-child {
    font-size:8px;
  }
  .intent-demo {
    grid-template-columns:1fr;
    padding:20px;
    gap:25px;
  }
  .intent-steps h3 {
    font-size:17px;
  }
  .intent-steps p {
    font-size:11px;
  }
  .intent-steps li {
    padding:17px 0;
  }
  .intent-preview {
    margin:0 5px 8px;
  }
  .intent-preview-body>p {
    min-height:65px;
    font-size:30px;
  }
  .intent-preview-lines {
    margin:10px 0;
  }
  .intent-controls {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:0 22px 24px;
  }
  .intent-controls>p {
    font-size:8px;
    max-width:none;
  }
  .intent-controls .text-link {
    width:100%;
  }
  .coexistence {
    grid-template-columns:1fr;
    margin-top:70px;
    gap:40px;
  }
  .coexistence img {
    width:95%;
    margin:auto;
    box-shadow:8px 8px 0 #00184255;
  }
  .coexistence h3 {
    font-size:39px;
  }
  .coexistence p {
    font-size:13px;
    margin-top:20px;
  }
  .craft-heading>.eyebrow {
    font-size:8px;
    margin-bottom:24px;
  }
  .craft-heading h2 {
    font-size:49px;
  }
  .craft-layout {
    grid-template-columns:1fr;
    gap:35px;
  }
  .craft-study {
    min-height:350px;
  }
  .craft-symbol {
    width:52%;
  }
  .name-meaning {
    font-size:24px;
  }
  .craft-intro {
    font-size:13px;
  }
  .craft-selector {
    margin-top:25px;
  }
  .craft-selector button {
    font-size:12px;
    padding-right:23px;
    margin-right:15px;
  }
  .craft-detail {
    min-height:190px;
  }
  .craft-detail h3 {
    font-size:30px;
  }
  .craft-detail>p {
    font-size:13px;
  }
  .orate-top {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
  }
  .orate-top>.eyebrow {
    font-size:8px;
  }
  .product-status {
    font-size:8px;
  }
  .orate-layout {
    grid-template-columns:1fr;
    margin-top:40px;
    gap:40px;
  }
  .orate-copy h2 {
    font-size:53px;
  }
  .orate-copy>p:not(.scenario-copy) {
    font-size:13px;
  }
  .orate-wordmark {
    width:130px;
    margin-bottom:26px;
  }
  .scenario-selector {
    flex-wrap:nowrap;
  }
  .scenario-selector button {
    font-size:10px;
    padding-right:12px;
    margin-right:13px;
  }
  .scenario-copy {
    font-size:12px;
    min-height:55px;
  }
  .orate-product {
    min-height:600px;
  }
  .orate-phone {
    width:235px;
    border-radius:37px;
  }
  .orate-backdrop {
    left:-8%;
    right:-4%;
    top:6%;
    bottom:10%;
  }
  .orate-backdrop>span {
    font-size:95px;
  }
  .orate-product figcaption {
    font-size:8px;
  }
  .studio-scene {
    min-height:0;
    padding:100px var(--gutter) 80px;
  }
  .studio-outlook>.eyebrow {
    font-size:8px;
  }
  .studio-outlook h2 {
    font-size:54px;
  }
  .outlook-art {
    width:115%;
    right:-60%;
    top:25%;
    opacity:.23;
  }
  .outlook-bottom {
    margin-top:45px;
    gap:20px;
    align-items:flex-start;
  }
  .outlook-mark {
    width:60px;
    margin-top:8px;
  }
  .outlook-bottom p {
    font-size:12px;
  }
  .contact-top>.eyebrow {
    font-size:8px;
  }
  .contact-top h2 {
    font-size:54px;
  }
  .contact-top>p:last-child {
    font-size:13px;
  }
  .contact-top>p:last-child br {
    display:none;
  }
  .contact-email {
    margin-top:40px;
    gap:10px;
    font-size:5vw;
    padding:23px 0;
  }
  .contact-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
    font-size:8px;
  }
  .contact-bottom>div {
    width:100%;
    justify-content:space-between;
  }
  .site-footer {
    padding-top:18px;
    padding-bottom:18px;
    gap:15px;
    align-items:center;
  }
  .site-footer>span {
    max-width:130px;
    line-height:1.6;
  }
  .site-footer>a {
    font-size:8px;
    gap:10px;
    max-width:135px;
  }
  .reading-progress {
    height:2px;
  }
}
@media(max-width:360px) {
  :root {
    --gutter:22px;
  }
  .hero-eyebrow {
    font-size:7px;
  }
  .opening-stage {
    min-height:690px;
  }
  .hero-title {
    margin-bottom:30px;
  }
  .hero-intro p {
    font-size:11px;
  }
  .hero-footer {
    gap:20px;
  }
  .hero-corner {
    bottom:-12vw;
  }
  .scene-heading h2,.native-copy h2 {
    font-size:47px;
  }
  .intent-heading h2 {
    font-size:48px;
  }
  .craft-heading h2 {
    font-size:43px;
  }
  .craft-study {
    min-height:310px;
  }
  .name-meaning {
    font-size:21px;
  }
  .craft-selector button {
    padding-right:15px;
    margin-right:15px;
  }
  .orate-copy h2 {
    font-size:46px;
  }
  .scenario-selector button {
    font-size:9px;
    padding-right:9px;
    margin-right:8px;
  }
  .studio-outlook h2,.contact-top h2 {
    font-size:47px;
  }
  .intent-caption>span:last-child {
    display:none;
  }
}
/* Reduced-motion preference exposes complete, static compositions. */
.motion-paused {
  scroll-behavior:auto;
}
.motion-paused [data-reveal] {
  opacity:1!important;
  transform:none!important;
}
.motion-paused .hero-title {
  transform:rotate(-5deg);
}
.motion-paused .hero-orbit,.motion-paused .hero-corner,.motion-paused .web-atlas,.motion-paused .outlook-art {
  transform:none;
}
.motion-paused .browser-window {
  transform:rotate(-5deg);
}
.motion-paused .floating-note {
  transform:rotate(7deg);
}
.motion-paused .morph-device {
  width:245px;
  height:495px;
  border-radius:38px;
  transform:rotate(-5deg);
}
.motion-paused .native-interface {
  border-radius:25px;
}
.motion-paused .morph-bar {
  opacity:0;
}
.motion-paused .device-island,.motion-paused .native-time,.motion-paused .home-indicator {
  opacity:1;
}
.motion-paused .opening,.motion-paused .web-scene,.motion-paused .native-scene {
  height:auto;
  min-height:0;
}
.motion-paused .opening-stage,.motion-paused .scene-stage {
  position:relative;
}
.motion-paused *,.motion-paused *::before,.motion-paused *::after {
  transition:none!important;
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .opening,.web-scene,.native-scene {
    height:auto;
    min-height:0;
  }
  .opening-stage,.scene-stage {
    position:relative;
  }
  .hero-title {
    transform:rotate(-5deg);
  }
  .morph-device {
    width:245px;
    height:495px;
    border-radius:38px;
  }
  .morph-bar {
    opacity:0;
  }
  .device-island,.native-time,.home-indicator {
    opacity:1;
  }
  .native-interface {
    border-radius:25px;
  }
}
html:not(.site-enhanced) .craft-selector,html:not(.site-enhanced) .scenario-selector {
  display:none;
}