@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlow-condensed-700-latin.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/barlow-700-latin.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--paper:#f5f5fc;--ink:#27314d;--muted:#5e6580;--accent:#ae4d65;--line:#27314d2a;--progress:0;--card-width:min(72vw,1040px)}
*{box-sizing:border-box}html{scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.5 'DM Sans',sans-serif;transition:background .6s,color .6s}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button{min-width:44px;min-height:44px}a:focus-visible,button:focus-visible,.story-rail:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:16px;top:12px;z-index:100;padding:12px;background:var(--paper);transform:translateY(-160%)}.skip-link:focus{transform:none}
.site-header{position:fixed;z-index:30;top:calc(12px * var(--progress));left:50%;transform:translateX(-50%);width:calc(100% - 64px * var(--progress));max-width:calc(1800px - 600px * var(--progress));min-height:76px;padding:10px clamp(16px,3vw,48px);display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:calc(18px * var(--progress));background:rgb(248 248 255 / calc(.08 + .84 * var(--progress)));box-shadow:0 8px 30px rgb(30 35 67 / calc(.06 * var(--progress)));backdrop-filter:blur(calc(14px * var(--progress)))}
.brand{display:flex;flex:none}.brand img{display:block;width:88px;height:44px;object-fit:contain;filter:brightness(0) saturate(100%) invert(16%) sepia(17%) saturate(1573%) hue-rotate(187deg)}.site-header>nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}.site-header nav a{text-decoration:none;font-size:14px;white-space:nowrap;padding:10px 0}.site-header nav a:hover{text-decoration:underline;text-underline-offset:6px}.controls{display:flex;align-items:center;gap:4px}.controls button{display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:50px;background:transparent;font-size:12px;padding:0 12px}.controls button:hover{background:#8e91b81c}.controls button>span:first-child{font-size:18px}.controls .menu-control{display:none}#mobile-nav[hidden]{display:none}
.hero-runway{height:150svh}.hero{position:sticky;top:0;height:100svh;min-height:700px;margin:0 calc(26px * var(--progress));border-radius:0 0 calc(32px * var(--progress)) calc(32px * var(--progress));overflow:clip;isolation:isolate;background:#e7eafd}.hero-world{position:absolute;inset:0;z-index:-1;overflow:hidden}.landscape{width:100%;height:100%;object-fit:cover;object-position:58% center;transform:scale(calc(1.055 - .055 * var(--progress)));transition:filter .8s;filter:saturate(.84)}.sky-wash{position:absolute;inset:0;background:linear-gradient(90deg,#f5f6fded 1%,#f4f5fbbe 33%,#edf0ff20 65%),linear-gradient(0deg,#e9e6f466,transparent 40%);transition:background .8s}.hero-copy{position:absolute;left:clamp(24px,8vw,144px);top:24%;width:min(640px,54vw);transform:translateY(calc(-38px * var(--progress)))}.eyebrow{font:700 11px/1.4 Barlow,sans-serif;text-transform:uppercase;letter-spacing:.12em;margin:0;color:var(--muted)}h1{font:700 clamp(74px,8.3vw,126px)/.88 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:-.025em;margin:26px 0 30px;max-width:10.5ch}h1 em{font-style:normal;color:var(--accent)}.text-link{display:inline-flex;align-items:center;gap:22px;min-height:44px;text-decoration:none;border-bottom:1px solid currentColor;font-size:14px}.text-link span{font-size:21px}.text-link:hover{color:var(--accent)}.tre-character{position:absolute;right:14%;bottom:9%;height:44%;max-width:28%;object-fit:contain;transform:translateY(calc(-13px * var(--progress)));filter:drop-shadow(8px 14px 17px #42435b18)}.hero-foot{position:absolute;bottom:25px;left:clamp(24px,4vw,58px);right:clamp(24px,4vw,58px);display:flex;justify-content:space-between;gap:20px;font:700 10px/1.5 Barlow,sans-serif;text-transform:uppercase;letter-spacing:.1em}.scroll-hint{display:flex;gap:22px}
.cloud{position:absolute;width:66%;height:auto;pointer-events:none;animation:cloud-drift 44s ease-in-out infinite alternate;opacity:.76}.cloud-one{top:4%;right:-19%}.cloud-two{width:45%;top:53%;left:-21%;opacity:.47;animation-duration:58s;animation-delay:-18s;transform:scaleX(-1)}@keyframes cloud-drift{from{translate:-2% 0}to{translate:11% -8%}}.moon{position:absolute;right:20%;top:17%;width:65px;aspect-ratio:1;border-radius:50%;background:#f4eeff;box-shadow:0 0 45px 18px #c2bff54a;opacity:0;transition:opacity .8s}.moonlight{position:absolute;inset:-30%;background:conic-gradient(from 145deg at 72% 28%,transparent 0deg,#c3c4f436 12deg,transparent 29deg);opacity:0;transform-origin:72% 28%;animation:moonlight 22s ease-in-out infinite alternate;transition:opacity .8s;pointer-events:none}@keyframes moonlight{from{rotate:-8deg}to{rotate:8deg}}
.leaf{position:absolute;width:12px;height:22px;background:#c77f927a;border-radius:0 85% 0 85%;top:-8%;left:78%;animation:leaf-fall 17s linear infinite;pointer-events:none}.leaf-two{left:91%;animation-delay:-6s;animation-duration:22s;background:#8184b46b;width:9px;height:17px}.leaf-three{left:64%;animation-delay:-12s;animation-duration:25s;width:8px;height:15px}@keyframes leaf-fall{0%{translate:0 -20px;rotate:-30deg;opacity:0}10%,80%{opacity:.8}50%{translate:-45px 45vh;rotate:95deg}100%{translate:30px 105vh;rotate:225deg;opacity:0}}
.dragonfly{position:absolute;right:8%;top:47%;height:21px;width:3px;background:#57698a;border-radius:50%;rotate:25deg;animation:dragonfly 9s ease-in-out infinite alternate;transition:opacity .5s}.dragonfly:before,.dragonfly:after{content:'';position:absolute;left:-14px;top:3px;width:30px;height:7px;border:1px solid #8a91b1;background:#edf1ff99;border-radius:50%;rotate:25deg}.dragonfly:after{rotate:-25deg;top:8px}.dragonfly-two{right:36%;top:73%;scale:.68;animation-delay:-5s;animation-duration:13s}@keyframes dragonfly{0%,100%{translate:0 0;rotate:25deg}30%{translate:-26px -16px;rotate:6deg}70%{translate:12px -28px;rotate:35deg}}.fireflies{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}.fireflies i{position:absolute;left:80%;top:65%;width:3px;height:3px;border-radius:50%;background:#efdaab;box-shadow:0 0 11px 4px #edcca66b;animation:firefly 9s ease-in-out infinite alternate}.fireflies i:nth-child(2){left:73%;top:74%;animation-delay:-5s}.fireflies i:nth-child(3){left:92%;top:57%;animation-delay:-3s}.fireflies i:nth-child(4){left:59%;top:80%;animation-delay:-7s}.fireflies i:nth-child(5){left:83%;top:87%;animation-delay:-2s}.fireflies i:nth-child(6){left:69%;top:54%;animation-delay:-4s}@keyframes firefly{from{translate:0 0;opacity:.3}to{translate:14px -21px;opacity:.85}}
.study-note{max-width:1120px;margin:auto;padding:75px 36px 80px;display:grid;grid-template-columns:1fr 1.6fr;column-gap:65px}.study-note>.eyebrow{grid-column:1}.study-note h2{grid-column:1;grid-row:2 / span 3;font:700 50px/.98 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:16px 0}.study-note>p:not(.eyebrow){grid-column:2;margin:0 0 15px;font-size:14px}.scene-map{line-height:1.9}.scene-map span{color:var(--accent);padding:0 6px}.study-detail{color:var(--muted);font-size:12px!important}
.tales{position:relative;isolation:isolate;overflow:clip;padding:80px 0 30px;background:#eaeaf6;transition:background .6s}.tales-wash{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 65% 45%,#edcdd97d,transparent 65%),linear-gradient(160deg,#eef0fc,#e1e3f1);transition:opacity .7s,background .7s}.tales[data-story=identity] .tales-wash{background:radial-gradient(ellipse at 35% 50%,#c8c5efbb,transparent 65%),linear-gradient(160deg,#edf0fc,#e4deef)}.tales[data-story=deployment] .tales-wash{background:radial-gradient(ellipse at 70% 45%,#bdd8ecaa,transparent 65%),linear-gradient(160deg,#f2edf5,#dce6f2)}.tales-heading{max-width:1120px;padding:0 36px;margin:0 auto 36px;display:flex;justify-content:space-between;align-items:end;gap:30px}.tales-heading h2{font:700 clamp(58px,6vw,86px)/.91 'Barlow Condensed',sans-serif;letter-spacing:-.02em;text-transform:uppercase;margin:18px 0}.tales-heading h2 em{font-style:normal;color:var(--accent)}.tales-heading>p{font-size:14px;color:var(--muted);margin-bottom:20px}.story-rail{display:flex;gap:34px;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--card-width))/2);padding:20px calc((100% - var(--card-width))/2) 36px;scrollbar-width:none;overscroll-behavior-x:contain}.story-rail::-webkit-scrollbar{display:none}.story-card{position:relative;display:grid;grid-template-columns:.84fr 1.16fr;align-items:stretch;flex:0 0 var(--card-width);min-width:0;min-height:520px;scroll-snap-align:center;background:#f9f5f3;box-shadow:0 18px 45px #3d395812;transform:scale(.94);opacity:.72;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s;overflow:hidden;border:1px solid #ffffff80;border-radius:3px 24px 3px 24px}.story-card.is-active{transform:scale(1);opacity:1}.story-card[data-story=identity]{background:#f0edf9}.story-card[data-story=deployment]{background:#eaf2f9}.story-art{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#ddced242;padding:32px}.story-art:before{content:'';position:absolute;inset:0;background:url('/street/watercolor-overlook-v2.webp') 75% 50% / cover;opacity:.23}.story-art img{position:relative;display:block;max-width:100%;height:440px;max-height:100%;object-fit:contain;filter:drop-shadow(8px 12px 15px #34305426);transform:rotate(-3deg)}.story-card[data-story=identity] .story-art img{transform:rotate(2deg)}.story-copy{padding:48px 36px;display:flex;flex-direction:column;align-items:start;justify-content:center;position:relative}.story-copy .eyebrow{max-width:28ch;font-size:10px}.story-number{font:700 70px/1 'Barlow Condensed',sans-serif;color:#a3a1b65c;margin:23px 0 6px}.story-copy h3{font:700 clamp(42px,4.5vw,70px)/.96 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 26px}.story-copy .text-link{font-size:13px}.carousel-controls{display:flex;justify-content:center;align-items:center;gap:28px}.circle-button{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:24px}.circle-button:hover{background:var(--ink);color:var(--paper)}.dots{display:flex;gap:2px}.dots button{display:grid;place-items:center;min-width:34px;width:34px;height:44px;padding:0;border:0;background:none}.dots span{display:block;width:6px;height:6px;border-radius:50px;background:var(--muted);opacity:.45;transition:width .25s,opacity .25s}.dots [aria-current=true] span{width:24px;opacity:1;background:var(--ink)}.carousel-help{text-align:center;font-size:11px;color:var(--muted);margin:14px 20px 45px}.study-end{text-align:center;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding:24px;margin:0 30px}
body[data-theme=night]{--paper:#171c32;--ink:#f1effd;--muted:#c1c2db;--accent:#e9aec4;--line:#d1cce737}body[data-theme=night] .site-header{background:rgb(28 31 54 / calc(.05 + .87 * var(--progress)))}body[data-theme=night] .brand img{filter:none}body[data-theme=night] .hero{background:#282d50}body[data-theme=night] .landscape{filter:brightness(.43) saturate(.75)}body[data-theme=night] .sky-wash{background:linear-gradient(90deg,#1c234bea 1%,#252b57b8 37%,#26285c30 75%),linear-gradient(0deg,#352d6470,transparent 50%)}body[data-theme=night] .cloud{opacity:.44;filter:brightness(.75) saturate(.8)}body[data-theme=night] .cloud-two{opacity:.27}body[data-theme=night] .moon,body[data-theme=night] .moonlight,body[data-theme=night] .fireflies{opacity:1}body[data-theme=night] .dragonfly{opacity:0}body[data-theme=night] .leaf{background:#b3a4d961}body[data-theme=night] .tales{background:#20253e}body[data-theme=night] .tales-wash{opacity:.13}body[data-theme=night] .story-card{background:#30334e;border-color:#b8bbde22}body[data-theme=night] .story-card[data-story=identity]{background:#36304d}body[data-theme=night] .story-card[data-story=deployment]{background:#293a50}body[data-theme=night] .story-art{background:#1b203329}body[data-theme=night] .story-art:before{opacity:.09}body[data-theme=night] .story-number{color:#b0abc65c}
body.motion-paused *,body.page-hidden *, .atmosphere[data-visible=false] *{animation-play-state:paused!important}body.motion-paused .hero-copy,body.motion-paused .tre-character{transform:none}body.motion-paused .landscape{transform:none}body.motion-paused .story-card{transition:none}
.hero-world:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background-image:radial-gradient(circle at 12% 14%,#e7e9ffb0 .7px,transparent 1.3px),radial-gradient(circle at 68% 21%,#e7e9ff90 .7px,transparent 1.2px),radial-gradient(circle at 39% 8%,#e7e9ff80 .6px,transparent 1.1px);background-size:113px 127px,171px 149px,211px 183px;mask-image:linear-gradient(#000,transparent 67%);transition:opacity .8s}body[data-theme=night] .hero-world:after{opacity:.58}body[data-theme=night] .sky-wash{background:radial-gradient(ellipse at 80% 74%,#efb39325,transparent 22%),radial-gradient(ellipse at 55% 12%,#6d65b345,transparent 48%),linear-gradient(90deg,#172452f2 1%,#243b78b5 40%,#34387940 77%),linear-gradient(0deg,#34336780,transparent 55%)}
@media(min-width:1600px){.hero-copy{top:25%;left:12%}.tre-character{right:20%;height:47%}}
@media(max-width:1050px){.site-header>nav:not(#mobile-nav){display:none}.controls .menu-control{display:flex}#mobile-nav:not([hidden]){position:absolute;top:calc(100% + 8px);right:0;display:flex;flex-direction:column;align-items:stretch;padding:18px 26px;gap:2px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 10px 30px #2323381a}.hero-copy{width:59vw}.hero h1{font-size:clamp(70px,9.2vw,100px)}.tre-character{right:8%;height:40%}.scroll-hint{display:none}.story-copy{padding:34px 26px}.story-art{padding:24px}.story-art img{height:370px}.story-card{min-height:470px}}
@media(max-width:650px){:root{--card-width:88vw}.site-header{width:calc(100% - 24px * var(--progress));top:calc(8px * var(--progress));min-height:66px;padding:8px 14px;gap:10px}.brand img{width:68px;height:36px}.controls{gap:0}.controls button{padding:0 9px;font-size:11px}.controls button>span:first-child{font-size:15px}.hero-runway{height:128svh}.hero{height:100svh;min-height:740px;margin-inline:calc(8px * var(--progress))}.hero-copy{left:25px;top:18%;width:calc(100% - 50px)}.hero h1{max-width:10ch;font-size:clamp(65px,17vw,90px);margin-top:22px;margin-bottom:24px}.hero-copy .eyebrow{font-size:9px}.hero-copy .text-link{font-size:13px}.landscape{object-position:68% center}.sky-wash{background:linear-gradient(180deg,#f5f6fdea,#f5f6fdc2 40%,#eff0fc30 68%,#eae9f35c)}.tre-character{height:27%;max-width:40%;right:15%;bottom:7%}.hero-foot{left:24px;right:24px;bottom:18px;font-size:8px;gap:16px}.hero-foot>span:last-child{max-width:125px;text-align:right}.cloud-one{width:115%;right:-56%;top:7%}.cloud-two{width:100%;left:-65%;top:66%}.moon{right:17%;top:64%;width:44px}.moonlight{background:conic-gradient(from 155deg at 72% 59%,transparent 0deg,#c3c4f42b 12deg,transparent 29deg)}.dragonfly-one{top:61%;right:14%}.dragonfly-two{top:85%;right:65%}.leaf-three{display:none}.study-note{display:block;padding:56px 26px 42px}.study-note h2{font-size:44px;margin:15px 0 24px}.study-note>p:not(.eyebrow){font-size:13px;margin-bottom:14px}.study-detail{font-size:11px!important}.tales{padding-top:46px}.tales-heading{display:block;padding:0 26px;margin-bottom:14px}.tales-heading .eyebrow{font-size:9px}.tales-heading h2{font-size:58px}.tales-heading>p{font-size:13px}.story-rail{gap:14px;padding-top:10px;padding-bottom:24px}.story-card{grid-template-columns:1fr;min-height:0;border-radius:3px 18px 3px 18px}.story-art{height:290px;padding:22px}.story-art img{height:250px;max-width:90%}.story-copy{padding:28px 26px 32px;min-height:245px}.story-copy .eyebrow{font-size:9px;max-width:none}.story-number{position:absolute;right:22px;top:20px;font-size:48px;margin:0;opacity:.65}.story-copy h3{font-size:46px;margin:26px 0 20px}.story-copy .text-link{font-size:12px}.carousel-controls{gap:20px}.carousel-help{font-size:10px;margin-bottom:32px}.study-end{margin:0 22px;padding:20px 0;font-size:10px}body[data-theme=night] .sky-wash{background:linear-gradient(180deg,#1c234bf7,#252b57ce 43%,#26285c46 76%,#23263b80)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-copy,.tre-character,.landscape{transform:none}.leaf{display:none}.story-card{transform:none}}
.dots button{width:44px;min-width:44px}
.site-header nav a{display:flex;align-items:center;min-height:44px}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{transition:none!important}
@media(max-width:650px){.hero h1{max-width:none;font-size:clamp(52px,16vw,66px)}.story-copy .eyebrow,.tales-heading .eyebrow,.hero-copy .eyebrow{font-size:11px;letter-spacing:.08em}}

/* Centered painted guide with supporting lower-corner copy. DOM order remains
   identity, declaration, invitation; mobile composes a readable vertical stack. */
.hero-runway--portrait { height: calc(max(100svh, 740px) + 40svh); }
.hero--portrait { min-height: 740px; }
.hero--portrait .hero-copy {
  top: auto;
  bottom: 15%;
  left: clamp(28px, 5vw, 100px);
  width: 38%;
  z-index: 2;
  transform: translateY(calc(-14px * var(--progress)));
}
.hero-personal, .hero-invitation {
  position: absolute;
  right: clamp(28px, 5vw, 100px);
  width: 21%;
  z-index: 2;
  transform: translateY(calc(-14px * var(--progress)));
}
.hero-personal { bottom: 22%; }
.hero-personal::before { content: ''; position: absolute; z-index: -1; inset: -48px -30px -95px; background: radial-gradient(ellipse, #f5f5fce8 24%, #f5f5fcb5 52%, transparent 73%); pointer-events: none; }
body[data-theme=night] .hero-personal::before { background: radial-gradient(ellipse, #190f2af0 24%, #190f2aca 52%, transparent 73%); }
.hero-invitation { bottom: 13%; width: max-content; min-width: 21%; }
.hero-name {
  font: 400 clamp(26px, 2.4vw, 36px) / 1.1 'DM Sans', sans-serif;
  letter-spacing: -.045em;
  margin: 0;
}
.hero-role {
  max-width: 27ch;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--muted);
  margin: 12px 0 0;
}
.hero--portrait h1 {
  max-width: none;
  font: 700 clamp(40px, 3.55vw, 56px) / 1.08 'Barlow Condensed', sans-serif;
  text-transform: none;
  letter-spacing: -.025em;
  margin: 0;
}
.hero--portrait h1 > span { display: block; white-space: nowrap; }
.hero--portrait .tre-character {
  height: 68%;
  width: min(46vw, 640px);
  max-width: none;
  left: 50%;
  right: auto;
  bottom: 16%;
  translate: -50% 0;
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(calc(12px * var(--progress)));
  filter: drop-shadow(8px 12px 18px #31324d14);
  mask-image: linear-gradient(#000 91%, transparent 100%);
}
.hero--portrait .scroll-hint { display: flex; }
@media(min-width:1600px) {
  .hero--portrait .hero-copy { left: 6%; width: 36%; }
  .hero--portrait .hero-personal, .hero--portrait .hero-invitation { right: 8%; }
}
@media(max-width:1050px) and (min-width:651px) {
  .hero--portrait .hero-copy { left: 5%; bottom: 9%; width: 44%; }
  .hero--portrait h1 { font-size: 34px; }
  .hero--portrait .tre-character { height: 60%; width: 60%; bottom: 26%; }
  .hero--portrait .hero-personal { width: 32%; right: 5%; bottom: 15%; }
  .hero--portrait .hero-invitation { right: 5%; bottom: 7%; min-width: 32%; }
  .hero--portrait .hero-role { max-width: 27ch; }
}
@media(max-width:650px) {
  .hero-runway--portrait { height: calc(max(100svh, 820px) + 28svh); }
  .hero--portrait { min-height: 820px; }
  .hero--portrait .hero-copy {
    top: 220px;
    bottom: auto;
    left: 24px;
    width: calc(100% - 48px);
    transform: translateY(calc(-12px * var(--progress)));
  }
  .hero--portrait .hero-personal { top: 104px; bottom: auto; left: 24px; right: 24px; width: auto; }
  .hero--portrait .hero-name { font-size: 32px; }
  .hero--portrait .hero-role { font-size: 14px; margin: 10px 0 0; max-width: 33ch; }
  .hero--portrait h1 { font-size: clamp(30px, 8.8vw, 48px); line-height: 1.06; margin: 0; }
  .hero--portrait .tre-character { height: 43%; width: 91%; max-width: none; right: auto; bottom: 109px; }
  .hero--portrait .hero-invitation { left: 24px; right: auto; bottom: 58px; min-width: 0; width: max-content; font-size: 13px; }
  .hero--portrait .hero-foot { flex-wrap: wrap; gap: 8px; bottom: 18px; }
  .hero--portrait .scroll-hint { order: -1; width: 100%; font-size: 9px; gap: 10px; }
  .hero--portrait .hero-foot > span:last-child { max-width: none; margin-left: auto; }
}
body.motion-paused .hero--portrait .hero-copy,
body.motion-paused .hero--portrait .hero-personal,
body.motion-paused .hero--portrait .hero-invitation,
body.motion-paused .hero--portrait .tre-character { transform: none; }
@media(prefers-reduced-motion:reduce) {
  .hero--portrait .hero-copy, .hero--portrait .hero-personal,
  .hero--portrait .hero-invitation, .hero--portrait .tre-character { transform: none; }
}

/* Two original theme paintings. A complete scene always remains underneath. */
.hero--portrait .scene-paint { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.hero--portrait .scene-paint.is-current { opacity: 1; z-index: 1; }
.hero--portrait .scene-paint .landscape { filter: none; transition: none; object-position: right center; }
.hero--portrait .scene-paint[data-scene=day] .sky-wash { background: linear-gradient(0deg, #f5f6fc55, transparent 54%); }
.hero--portrait .scene-paint[data-scene=night] .sky-wash { background: linear-gradient(0deg, #16092344, transparent 50%); }
.hero--portrait .cloud, .hero--portrait .moonlight,
.hero--portrait .leaf, .hero--portrait .dragonfly, .hero--portrait .fireflies { z-index: 3; }
.hero--portrait .hero-world::after { display: none; }
.hero--portrait .scene-paint.is-painting {
  z-index: 2;
  opacity: 1;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='edge' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .045' numOctaves='2' seed='8' result='grain'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='grain' scale='52' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-100-100H460V500H-100Z' fill='white' filter='url(%23edge)'/%3E%3C/svg%3E");
  mask-size: 280% 100%;
  mask-repeat: no-repeat;
  animation: scene-watercolor 900ms cubic-bezier(.2,.6,.3,1) both;
}
@keyframes scene-watercolor { from { mask-position: 100% 0; } to { mask-position: 0 0; } }
.hero--portrait h1 em, .hero--portrait .hero-role { transition: color .6s; }
body[data-theme=night] { --paper: #140e22; --ink: #f4effc; --muted: #cdbedf; --accent: #e3c4dc; --line: #d6c0ed38; }
body[data-theme=night] .site-header { background: rgb(28 15 42 / calc(.05 + .87 * var(--progress))); }
body[data-theme=night] .hero--portrait { background: #130a22; }
body[data-theme=night] .hero--portrait .cloud { opacity: .18; filter: brightness(.6) saturate(.7); }
body[data-theme=night] .hero--portrait .moonlight { opacity: .4; }
body.motion-paused .scene-paint.is-painting,
body.page-hidden .scene-paint.is-painting { animation: none !important; mask-image: none; }
@media(prefers-reduced-motion:reduce) { .scene-paint.is-painting { animation: none !important; mask-image: none; } }

/* City arrival: the painted mural/windows supply the atmosphere, without
   trail particles or a simulated phone rig. Preserve the composed scroll shift. */
.hero--portrait.city-scene .scene-paint .landscape { object-position: center; }
.paired-portrait { isolation: isolate; }
.paired-portrait .portrait-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 800ms ease-in-out; }
body[data-theme=day] .paired-portrait [data-portrait-theme=day],
body[data-theme=night] .paired-portrait [data-portrait-theme=night] { opacity: 1; }
.hero--portrait.city-scene .portrait-layer { object-fit: cover; object-position: center 5%; }
body.page-hidden .paired-portrait .portrait-layer { transition: none; }
.hero--portrait.city-scene .scene-paint[data-scene=day] .sky-wash {
  background: linear-gradient(0deg, #f4f1f5d9, #f4f1f545 32%, transparent 58%);
}
.hero--portrait.city-scene .scene-paint[data-scene=night] .sky-wash {
  background: linear-gradient(0deg, #170d29ed, #170d2955 32%, transparent 58%);
}
.city-scene .hero-personal::before { background: radial-gradient(ellipse, #f4f1f5ed 24%, #f4f1f5b8 52%, transparent 73%); }
body[data-theme=night] .city-scene .hero-personal::before { background: radial-gradient(ellipse, #170d29f2 24%, #170d29c9 52%, transparent 73%); }
.city-scene.city-entering .tre-character { animation: city-portrait-arrival 650ms ease-out both; }
.city-scene.city-entering .hero-personal,
.city-scene.city-entering .hero-copy,
.city-scene.city-entering .hero-invitation { animation: city-type-arrival 450ms 90ms ease-out both; }
@keyframes city-portrait-arrival {
  from { opacity: .25; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes city-type-arrival { from { opacity: .45; } to { opacity: 1; } }
body.motion-paused .city-scene.city-entering > *,
body.page-hidden .city-scene.city-entering > * { animation: none !important; opacity: 1; }
@media(prefers-reduced-motion:reduce) { .city-scene.city-entering > * { animation: none !important; opacity: 1; } }
@media(max-width:650px) {
  .hero--portrait.city-scene .scene-paint[data-scene=day] .sky-wash { background: linear-gradient(#f4f1f5ed, #f4f1f5d6 31%, #f4f1f515 51%, #f4f1f5d9 96%); }
  .hero--portrait.city-scene .scene-paint[data-scene=night] .sky-wash { background: linear-gradient(#170d29eb, #170d29d6 31%, #170d2915 51%, #170d29ed 96%); }
  .city-scene .hero-personal::before { display: none; }
}

/* Landscape feature cards: one art field with readable HTML, no poster inset.
   Scoped replacement retains the carousel's positioning and motion contract. */
.tales .story-card.feature-card {
  --feature-paper: #f1eff9;
  --feature-ink: #283452;
  --feature-muted: #59647e;
  display: grid;
  grid-template-columns: 1fr;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: var(--feature-paper);
  color: var(--feature-ink);
  border: 1px solid #d0d2e34d;
  border-radius: 12px;
  box-shadow: 0 20px 48px #32375215;
  isolation: isolate;
}
.feature-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.feature-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.feature-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f1eff9db, #f1eff96b 32%, transparent 56%);
}
.feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 48%;
  padding: clamp(24px, 3.7vw, 54px);
  padding-right: 12px;
}
.company-mark {
  display: block;
  width: 112px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: clamp(20px, 2.8vw, 38px);
  filter: brightness(0) saturate(100%) invert(18%) sepia(16%) saturate(1447%) hue-rotate(183deg);
}
.feature-copy .eyebrow {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--feature-muted);
}
.feature-copy h3 {
  font: 700 clamp(38px, 4.8vw, 70px) / .95 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.025em;
  margin: 16px 0 26px;
}
.feature-copy .text-link {
  font-size: 13px;
  min-height: 44px;
}
/* Two phases: text anticipates native travel; color blooms across a muted
   painting from its bottom-left corner at landing. One cached overlay per card.
   Organic edge inspiration: https://codepen.io/scottkellum/pen/PoVjeEZ
   Original bounded SVG mask: two-octave noise displaces a feathered edge.
   No looping fill, convolution chain or persistent filter on the artwork. */
.story-motion-ready .feature-base { filter: saturate(.12) brightness(.65); }
.feature-art .feature-pigment { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.feature-card.is-landed .feature-pigment { opacity: 1; }
.feature-card.is-washing .feature-pigment {
  opacity: 1;
  animation: story-pigment 1400ms cubic-bezier(.18,.55,.3,1) both;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='pigment' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .015' numOctaves='2' seed='11' result='grain'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='grain' scale='70' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='0' cy='1000' r='450' fill='white' filter='url(%23pigment)'/%3E%3C/svg%3E");
  mask-position: 0 100%;
  mask-repeat: no-repeat;
}
.feature-card.is-approaching .feature-copy > * { animation: story-ink 300ms ease-out both; }
.feature-card.is-approaching .company-mark { animation-name: story-mark; }
.feature-card.is-approaching .feature-copy .eyebrow { animation-delay: 30ms; }
.feature-card.is-approaching .feature-copy h3 { animation-delay: 60ms; }
.feature-card.is-approaching .feature-copy .text-link { animation-delay: 100ms; }
@keyframes story-pigment {
  from { mask-size: 0% 0%; }
  to { mask-size: 420% 840%; }
}
@keyframes story-ink {
  from { opacity: .55; filter: blur(.5px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes story-mark {
  from { opacity: .55; }
  to { opacity: 1; }
}
/* Focus and motion preferences expose the complete current story immediately. */
.feature-card:focus-within .feature-copy > *,
body.motion-paused .feature-card .feature-copy > *,
body.page-hidden .feature-card .feature-copy > *,
.tales[data-visible=false] .feature-card .feature-copy > * {
  animation: none !important;
  opacity: 1;
}
body.motion-paused .feature-card .feature-art img,
body.page-hidden .feature-card .feature-art img,
.tales[data-visible=false] .feature-card .feature-art img {
  animation: none !important;
  mask-image: none;
  opacity: 1;
  filter: none;
}
@media(prefers-reduced-motion:reduce) {
  .feature-card .feature-art img { animation: none !important; mask-image: none; opacity: 1; filter: none; }
  .feature-card .feature-copy > * { animation: none !important; opacity: 1; }
}
.dots [aria-current=true] span { position: relative; width: 34px; overflow: hidden; background: var(--line); }
.dots [aria-current=true] span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(var(--story-progress, 0)); }
.story-playback { display: block; min-height: 44px; margin: 12px auto 0; padding: 0 16px; border: 1px solid var(--line); border-radius: 24px; background: transparent; font-size: 12px; }
.story-playback:disabled { cursor: default; opacity: .7; }
.all-stories { display: flex; width: max-content; margin: 0 auto 36px; }
body[data-theme=night] .tales .feature-card {
  --feature-paper: #252e51;
  --feature-ink: #f4f2ff;
  --feature-muted: #cbd1e9;
  border-color: #abb3dc2b;
}
body[data-theme=night] .feature-art::after {
  background: linear-gradient(90deg, #202b51fa, #26315de8 27%, #34366575 49%, #33365d22 74%);
}
body[data-theme=night] .company-mark { filter: none; }
@media(max-width:850px) and (min-width:651px) {
  .feature-copy { padding: 24px; padding-right: 4px; width: 50%; }
  .company-mark { width: 96px; height: 30px; margin-bottom: 16px; }
  .feature-copy h3 { font-size: 38px; margin: 12px 0 16px; }
  .feature-copy .eyebrow { font-size: 10px; }
}
@media(max-width:650px) {
  .tales .story-card.feature-card {
    aspect-ratio: auto;
    display: block;
    min-height: 0;
    border-radius: 10px;
  }
  .feature-art { position: relative; inset: auto; aspect-ratio: 16 / 9; z-index: auto; }
  .feature-art img { object-fit: contain; }
  .feature-art::after { background: linear-gradient(0deg, var(--feature-paper), transparent 24%); }
  .feature-copy { width: 100%; min-height: 280px; padding: 20px 26px 30px; }
  .company-mark { width: 100px; height: 34px; margin-bottom: 22px; }
  .feature-copy .eyebrow { font-size: 11px; letter-spacing: .08em; }
  .feature-copy h3 { font-size: clamp(37px, 10.5vw, 48px); margin: 14px 0 20px; }
  .feature-copy .text-link { font-size: 13px; }
  body[data-theme=night] .feature-art::after {
    background: linear-gradient(0deg, var(--feature-paper), #303c6618 34%, #303c6622);
  }
}

/* Five-chapter journey: open editorial space, a single path and quiet discoveries. */
[data-chapter], #vision-beats { scroll-margin-top: 108px; }
.scene-container { width: min(1120px, calc(100% - 112px)); margin-inline: auto; }
.chapter-title { font: 700 clamp(58px, 6.2vw, 88px)/.97 'Barlow Condensed', sans-serif; letter-spacing: -.025em; margin: 22px 0 30px; }
.chapter-title em, .vision-compass em { color: var(--accent); font-style: normal; }
.chapter-deck { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; max-width: 36ch; color: var(--muted); }
.chapter-legend { position: fixed; z-index: 25; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; }
.chapter-legend a { position: relative; width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; border-radius: 50%; background: color-mix(in srgb, var(--paper) 84%, transparent); border: 1px solid transparent; }
.chapter-legend [aria-current] { border-color: var(--accent); color: var(--accent); }
.legend-index { font: 700 10px Barlow, sans-serif; }
.legend-label { position: absolute; right: 51px; background: var(--paper); padding: 7px 12px; white-space: nowrap; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.chapter-legend a:hover .legend-label, .chapter-legend a:focus-visible .legend-label { opacity: 1; }
.vision-scene { position: relative; overflow: clip; background: radial-gradient(ellipse at 78% 16%, #d9d6ef77, transparent 38%), linear-gradient(#f5f5fc, #eeedf8 65%, #eaeaf6); padding: 140px 0 0; }
.intro-composition { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px 70px; align-items: center; }
.intro-heading { max-width: 610px; }
.intro-heading > .text-link { margin-top: 20px; }
.call-stage { position: relative; display: grid; place-items: center; padding: 25px 0; isolation: isolate; }
.call-light { position: absolute; inset: 5% -15%; z-index: -1; background: radial-gradient(ellipse, #b9b4e852, #f6cec335 45%, transparent 69%); rotate: -12deg; }
.call-card { width: min(100%, 300px); padding: 26px 24px 23px; text-align: center; border: 1px solid #7f83a52b; border-radius: 46px 46px 34px 34px; background: linear-gradient(140deg, #fdfbfc, #e6e8f6); box-shadow: 8px 18px 50px #5f598919; }
.call-kicker { color: var(--muted); font-size: 12px; margin: 0 0 7px; }
.call-card h3 { font-size: 23px; font-weight: 400; margin: 0; letter-spacing: -.035em; }
.call-portrait { position: relative; height: 230px; margin-top: 18px; overflow: hidden; mask-image: linear-gradient(#000 80%, transparent); }
.call-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.call-note { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 14px -5px 20px; }
.call-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.answer-call { display: flex; align-items: center; gap: 8px; min-height: 44px; border: 0; border-radius: 28px; padding: 0 18px; background: #344e71; color: #fff; font-size: 13px; }
.call-actions a { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; text-decoration: none; }
.readable-intro { grid-column: 1; max-width: 470px; margin-top: 10px; font-size: 14px; color: var(--muted); }
summary { cursor: pointer; min-height: 44px; padding-block: 12px; }
summary:focus-visible, .memory-note:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.readable-intro p { margin: 8px 0 20px; line-height: 1.8; }
.vision-trail { display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; margin-top: 160px; position: relative; }
.vision-compass { position: sticky; top: 160px; align-self: start; padding-bottom: 80px; }
.vision-compass h3 { font: 700 clamp(54px, 5.4vw, 74px)/.98 'Barlow Condensed', sans-serif; letter-spacing: -.025em; margin: 24px 0; }
.vision-compass > p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.7; }
.vision-line { display: flex; width: 170px; justify-content: space-between; margin-top: 40px; border-top: 1px solid var(--line); }
.vision-line span { color: var(--muted); font: 700 11px Barlow, sans-serif; padding-top: 12px; position: relative; }
.vision-line span::before { content: ''; position: absolute; width: 6px; height: 6px; top: -4px; left: 50%; border-radius: 50%; background: var(--muted); }
.vision-line .is-current { color: var(--accent); }
.vision-line .is-current::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.vision-beat { min-height: 420px; padding: 42px 0 95px 32px; border-left: 1px solid var(--line); position: relative; }
.vision-beat::before { content: ''; position: absolute; left: -4px; top: 46px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.vision-beat h3 { font: 700 clamp(38px, 3.8vw, 53px)/1.04 'Barlow Condensed', sans-serif; margin: 24px 0; max-width: 15ch; }
.vision-beat > p:not(.eyebrow) { font-size: 18px; color: var(--muted); max-width: 31ch; line-height: 1.75; }
.vision-beat .text-link { margin-top: 15px; font-size: 13px; }
.experience-marks { display: flex; gap: 24px; align-items: center; margin: 32px 0 20px; flex-wrap: wrap; }
.experience-marks img { width: 95px; height: 36px; object-fit: contain; filter: brightness(0) saturate(100%) invert(22%) sepia(15%) saturate(1429%) hue-rotate(181deg); }
.scene-handoff { text-align: center; margin: 0; padding: 65px 24px 95px; color: var(--muted); font-size: 12px; }
.scene-handoff span { display: block; font-size: 25px; margin-top: 20px; }
.memories-scene { --ink: #f5eff9; --muted: #c8bcd3; --accent: #edbed0; --line: #d9c9e33b; padding: 88px 0 85px; background: #23162f; color: var(--ink); }
.memories-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 36px; }
.memories-heading .chapter-title { font-size: clamp(44px, 4.1vw, 56px); line-height: 1.04; margin: 18px 0 0; max-width: 19ch; }
.memories-heading > p:last-child { color: var(--muted); font-size: 13px; margin: 0 0 4px; }
.memory-choices { display: flex; gap: 32px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.memory-choices button { border: 0; background: transparent; padding: 5px 10px 5px 0; display: flex; align-items: center; gap: 12px; text-align: left; opacity: 1; border-bottom: 2px solid transparent; }
.memory-choices [aria-selected=true] { opacity: 1; border-color: var(--accent); }
.memory-choices img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.memory-choices button > span { font-size: 14px; }
.memory-choices button > span > span { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.memory-editorial { display: grid; grid-template-columns: 1.35fr 1fr; gap: 65px; align-items: center; padding-top: 35px; }
.memory-stage { min-height: 450px; }
.memory-note { padding: 40px 0 12px; position: relative; }
.memory-note[hidden] { display: none; }
.ink-quote { position: absolute; top: -10px; left: -3px; font: 700 85px/1 'Barlow Condensed', sans-serif; color: var(--accent); opacity: .65; }
.memory-note blockquote { margin: 0 0 28px; font-size: clamp(22px, 1.95vw, 27px); line-height: 1.55; letter-spacing: -.015em; max-width: 40ch; }
.memory-attribution { display: grid; gap: 5px; font-size: 14px; }
.memory-attribution strong { font-family: Barlow, sans-serif; font-weight: 700; }
.memory-attribution span { color: var(--muted); font-size: 12px; }
.memory-note details { margin-top: 12px; font-size: 12px; color: var(--muted); }
.memory-note details p { margin: 0 0 12px; }
.field-memory { width: 100%; min-width: 0; margin: 0; padding: 0; }
.field-memory img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.field-memory figcaption { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 15px; font-size: 12px; line-height: 1.7; }
.field-memory figcaption span { color: var(--muted); font-size: 11px; }
.clearing-scene { position: relative; isolation: isolate; overflow: clip; padding: 105px 0 0; background: var(--paper); }
.clearing-composition { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 75px; }
.clearing-heading .chapter-title { font-size: clamp(44px, 4.2vw, 60px); margin-bottom: 0; }
.clearing-copy > p:not(.eyebrow) { max-width: 40ch; color: var(--muted); font-size: 16px; line-height: 1.8; margin-top: 0; }
.clearing-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.solid-link { display: inline-flex; min-height: 48px; align-items: center; gap: 35px; padding: 0 25px; text-decoration: none; background: var(--ink); color: var(--paper); border-radius: 30px; font-size: 14px; }
.closing-panorama { position: relative; isolation: isolate; width: calc(100% - 80px); margin: 65px auto 0; }
.closing-city { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; z-index: -2; opacity: .7; transition: opacity .8s; }
.closing-city-night { opacity: 0; }
.closing-panorama::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--paper), transparent 42%, color-mix(in srgb, var(--paper) 75%, transparent)); }
.closing-signature { display: grid; place-items: center; width: 100%; min-height: clamp(320px, 34vw, 490px); padding: 55px 20px 25px; }
.closing-signature img { display: block; width: min(70%, 760px); height: auto; filter: brightness(0) saturate(100%) invert(22%) sepia(15%) saturate(1429%) hue-rotate(181deg); }
.arrival-ready.is-arrived .closing-signature img { animation: closing-mark 700ms ease-out both; }
@keyframes closing-mark { from { opacity: .55; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.trail-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 56px; padding: 20px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.trail-footer a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
body[data-theme=night] .vision-scene { background: radial-gradient(ellipse at 78% 16%, #5e397b3b, transparent 38%), linear-gradient(#140e22, #23152f 65%, #241b36); }
body[data-theme=night] .call-card { background: linear-gradient(140deg, #33233f, #221a36); border-color: var(--line); }
body[data-theme=night] .call-light { opacity: .55; }
body[data-theme=night] .answer-call { background: #d5bcec; color: #21132f; }
body[data-theme=night] .experience-marks img, body[data-theme=night] .closing-signature img { filter: none; }
body[data-theme=night] .tales { background: #241b36; }
body[data-theme=night] .memories-scene { background: #291a36; }
body[data-theme=night] .closing-city-day { opacity: 0; }
body[data-theme=night] .closing-city-night { opacity: .8; }
.trail-dialog { border: 1px solid var(--line); border-radius: 18px; padding: 0; width: min(860px, calc(100% - 40px)); max-height: calc(100svh - 48px); background: var(--paper); color: var(--ink); overflow: auto; box-shadow: 0 30px 120px #10071b70; }
.trail-dialog::backdrop { background: #170b2bd9; backdrop-filter: blur(7px); }
.trail-dialog .dialog-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--ink); border: 1px solid var(--line); font-size: 28px; line-height: 1; }
.intro-dialog { max-width: 600px; padding: 60px 48px 36px; }
.intro-dialog h2, .trailer-reading > h2 { font: 700 clamp(40px, 5vw, 60px)/1 'Barlow Condensed', sans-serif; letter-spacing: -.02em; margin: 18px 0 25px; }
.intro-dialog > p:not(.eyebrow) { line-height: 1.8; }
.intro-dialog .recording-gap { color: var(--muted); font-size: 12px; }
.intro-recording { display: block; width: min(100%, 260px); height: auto; max-height: 52svh; aspect-ratio: 9/16; object-fit: contain; margin: 24px auto 12px; background: #130c1c; border-radius: 12px; }
.clip-transcript { color: var(--muted); font-size: 12px; line-height: 1.7; }
.written-hello { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.written-hello > p:not(.eyebrow) { line-height: 1.8; }
.end-call { margin-top: 28px; border: 1px solid var(--line); border-radius: 24px; background: transparent; padding: 0 24px; font-size: 13px; }
.trailer-art { display: block; width: 100%; height: auto; aspect-ratio: 16/6; object-fit: cover; object-position: right center; }
.trailer-reading { padding: 30px 44px 40px; }
.trailer-beat { min-height: 210px; padding-top: 24px; border-top: 1px solid var(--line); }
.trailer-beat h3 { font: 700 30px/1.1 'Barlow Condensed', sans-serif; margin: 18px 0 12px; }
.trailer-beat > p:last-child { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 60ch; }
.trailer-controls { display: flex; align-items: center; gap: 20px; margin: 24px 0; }
.trailer-controls > span { color: var(--muted); font-size: 12px; }
.circle-button:disabled { opacity: .35; cursor: default; background: transparent; color: inherit; }
body.motion-paused .closing-signature img, body.page-hidden .closing-signature img { animation: none !important; opacity: 1; transform: none; }
body.page-hidden .closing-city { transition: none; }
@media(prefers-reduced-motion:reduce) { .closing-signature img { animation: none !important; opacity: 1; transform: none; } }
@media(max-width:1050px) {
  .scene-container { width: calc(100% - 100px); }
  .intro-composition { gap: 25px 35px; }
  .vision-trail { gap: 60px; }
  .chapter-title { font-size: 65px; }
  .memory-editorial { gap: 35px; }
  .clearing-composition { gap: 35px; }
  .clearing-actions { gap: 18px; }
  .trail-footer { flex-wrap: wrap; }
}
@media(max-width:650px) {
  html { scroll-padding-top: 88px; }
  main { padding-bottom: 78px; }
  [data-chapter], #vision-beats { scroll-margin-top: 88px; }
  .scene-container { width: calc(100% - 48px); }
  .chapter-legend { inset: auto 8px 8px; transform: none; flex-direction: row; justify-content: space-around; gap: 0; padding: 3px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper) 96%, transparent); }
  .chapter-legend a { width: 20%; min-height: 58px; height: auto; border-radius: 9px; align-content: center; gap: 3px; padding: 4px 2px; background: transparent; }
  .legend-index { font-size: 11px; }
  .legend-label { position: static; opacity: 1; background: none; padding: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; font-size: 10px; line-height: 1.2; max-width: 9ch; }
  .chapter-title { font-size: clamp(48px, 14vw, 65px); margin-block: 20px 25px; }
  .chapter-deck { font-size: 17px; }
  .vision-scene { padding-top: 85px; }
  .intro-composition { display: block; }
  .intro-heading > .text-link { margin-top: 10px; }
  .call-stage { margin-top: 38px; }
  .call-card { max-width: 280px; }
  .readable-intro { margin-top: 25px; }
  .vision-trail { display: block; margin-top: 90px; }
  .vision-compass { position: static; padding-bottom: 40px; }
  .vision-compass h3 { font-size: 58px; }
  .vision-compass h3 br { display: none; }
  .vision-compass h3 { max-width: 7ch; }
  .vision-line { display: none; }
  .vision-beat { min-height: 0; padding: 25px 0 58px 23px; }
  .vision-beat::before { top: 29px; }
  .vision-beat h3 { font-size: 41px; margin-block: 18px; }
  .vision-beat > p:not(.eyebrow) { font-size: 16px; }
  .vision-beat .text-link { font-size: 12px; gap: 15px; }
  .experience-marks { gap: 16px; }
  .experience-marks img { width: 84px; height: 30px; }
  .scene-handoff { padding: 40px 24px 60px; }
  .memories-scene { padding: 65px 0; }
  .memories-heading { display: block; margin-bottom: 28px; }
  .memories-heading .chapter-title { font-size: 44px; max-width: 13ch; }
  .memories-heading > p:last-child { font-size: 12px; margin-top: 20px; }
  .memory-choices { gap: 8px; justify-content: space-between; padding-bottom: 15px; }
  .memory-choices button { flex-direction: column; align-items: start; gap: 9px; padding: 5px 5px 10px; }
  .memory-choices img { width: 39px; height: 39px; }
  .memory-choices button > span { font-size: 12px; }
  .memory-choices button > span > span { font-size: 9px; }
  .memory-editorial { display: block; padding-top: 28px; }
  .memory-stage { min-height: 0; }
  .memory-note { padding: 42px 0 25px; }
  .ink-quote { top: -8px; left: 0; font-size: 85px; }
  .memory-note blockquote { font-size: 22px; line-height: 1.5; }
  .memory-attribution { font-size: 13px; }
  .memory-attribution span { font-size: 11px; }
  .field-memory { margin: 24px 0 0; }
  .field-memory figcaption { padding-top: 12px; }
  .clearing-scene { padding-top: 70px; }
  .clearing-composition { display: block; }
  .clearing-heading .chapter-title { font-size: 44px; margin-bottom: 28px; }
  .clearing-copy > p:not(.eyebrow) { font-size: 16px; }
  .clearing-actions { align-items: start; flex-direction: column; gap: 14px; margin-top: 28px; }
  .closing-panorama { width: 100%; margin-top: 30px; }
  .closing-signature { min-height: 245px; padding: 40px 12px 20px; }
  .closing-signature img { width: 86%; }
  .trail-footer { margin: 0 24px; font-size: 10px; gap: 8px 20px; }
  .trail-footer > span { order: 3; width: 100%; }
  .intro-dialog { padding: 65px 25px 30px; }
  .trail-dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); }
  .trailer-art { aspect-ratio: 16/9; }
  .trailer-reading { padding: 25px; }
  .trailer-beat { min-height: 250px; }
  .trailer-beat h3 { font-size: 29px; }
}

/* Golden slice: the header has only two settled geometries. The hero may still
   use --progress for its own shallow travel; it never resizes this flex row. */
.site-header { top: 0; width: 100%; max-width: none; min-height: 68px; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; transition: top 300ms cubic-bezier(.2,.7,.2,1), width 300ms cubic-bezier(.2,.7,.2,1), min-height 300ms cubic-bezier(.2,.7,.2,1), border-radius 300ms cubic-bezier(.2,.7,.2,1), background 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms cubic-bezier(.2,.7,.2,1), backdrop-filter 300ms cubic-bezier(.2,.7,.2,1); }
.site-header[data-header-mode=compact] { top: 20px; width: min(calc(100% - 40px), 850px); min-height: 52px; padding-block: 4px; border-radius: 8px; background: rgb(248 248 255 / .60); box-shadow: 0 8px 30px rgb(30 35 67 / .06); backdrop-filter: blur(12px); }
body[data-theme=night] .site-header[data-header-mode=compact] { background: rgb(28 15 42 / .70); }
.site-header nav a { font-family: 'DM Sans', sans-serif; font-weight: 500; letter-spacing: -.01em; }

/* One authored 5:4 illustration stage. Craft is a complete static state before
   JavaScript runs; the base and overlays are art-delivered files, not CSS art. */
.vision-stage-runway { min-height: 300vh; margin-top: 130px; }
.vision-stage-shell { position: sticky; top: 96px; width: min(1240px, calc(100% - 112px)); min-height: min(760px, calc(100svh - 126px)); margin: 0 auto; display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: clamp(42px, 7vw, 112px); align-items: start; }
.vision-stage-intro { display: contents; }
.vision-stage-intro > .eyebrow, .vision-stage-intro > h2, .vision-stage-intro > p, .vision-controls, .vision-copy { grid-column: 1; }
.vision-stage-intro > h2 { font: 400 clamp(46px, 4.2vw, 62px)/1.02 'DM Sans', sans-serif; letter-spacing: -.045em; margin: 18px 0 20px; max-width: 9ch; }
.vision-stage-intro > h2 em { color: var(--accent); font-style: normal; }
.vision-stage-intro > p { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 29ch; margin: 0; }
.vision-controls { display: grid; grid-row: 5; gap: 0; margin-top: 16px; border-top: 1px solid var(--line); align-self: end; }
.vision-controls button { display: grid; grid-template-columns: 38px 1fr; align-items: center; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; font: 500 14px/1.2 'DM Sans', sans-serif; letter-spacing: -.01em; }
.vision-controls button span { color: var(--muted); font-size: 11px; }
.vision-controls button[aria-expanded=true] { color: var(--accent); }
.vision-controls button[aria-expanded=true] span { color: currentColor; }
.vision-art { grid-column: 2; grid-row: 1 / span 5; align-self: center; position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; background: #e9e7ef; isolation: isolate; }
.vision-base, .vision-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vision-base--night { opacity: 0; }
.vision-overlay { opacity: 0; transform: translateY(12px); transition: opacity 340ms ease-in-out, transform 340ms ease-in-out; }
.vision-overlay.is-active { opacity: 1; transform: none; }
.vision-copy { grid-row: 4; align-self: end; margin-top: 28px; min-height: 220px; }
.vision-copy [hidden] { display: none; }
.vision-copy article { animation: vision-copy-in 340ms ease-in-out both; }
.vision-copy h3 { font: 400 clamp(28px, 2.2vw, 38px)/1.08 'DM Sans', sans-serif; letter-spacing: -.045em; margin: 16px 0; max-width: 14ch; }
.vision-copy article > p:not(.eyebrow) { max-width: 32ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.vision-copy .text-link { margin-top: 18px; font-size: 13px; }
.vision-copy .experience-marks { margin: 18px 0 6px; }
@keyframes vision-copy-in { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body[data-theme=night] .vision-base--day { opacity: 0; }
body[data-theme=night] .vision-base--night { opacity: 1; }
body.motion-paused .vision-overlay, body.page-hidden .vision-overlay { transition: none; transform: none; }
body.motion-paused .vision-copy article, body.page-hidden .vision-copy article { animation: none; }
.about-scene { padding: 100px 0; background: #23162f; color: #f5eff9; }
.about-scene .chapter-deck, .about-scene .call-kicker, .about-scene .call-note, .about-scene .readable-intro { color: #c8bcd3; }
.about-scene .call-card { --paper: #f5eff9; --ink: #27314d; --muted: #5e6580; background: var(--paper); color: var(--ink); }
.about-scene .call-card .call-kicker { color: var(--muted); }
body[data-theme=night] .about-scene .call-card { --paper: #33233f; --ink: #f4effc; --muted: #cdbedf; }

/* DM Sans is the active display face throughout this candidate. These
   role-specific overrides replace condensed all-caps display treatment. */
h1, .hero--portrait h1, .chapter-title, .vision-compass h3, .vision-beat h3, .tales-heading h2, .story-copy h3, .feature-copy h3, .intro-dialog h2, .trailer-reading > h2, .trailer-beat h3 { font-family: 'DM Sans', sans-serif; font-weight: 400; text-transform: none; letter-spacing: -.045em; }
.eyebrow, .hero-foot, .legend-index, .vision-line span, .memory-attribution strong, .ink-quote { font-family: 'DM Sans', sans-serif; font-weight: 500; text-transform: none; }

@media(max-width:1050px) { .site-header[data-header-mode=compact] { width: calc(100% - 40px); } }
@media(max-width:650px) {
  .site-header { top: 0; width: 100%; min-height: 72px; padding-inline: 16px; }
  .site-header[data-header-mode=compact] { top: 20px; width: calc(100% - 40px); min-height: 64px; padding-inline: 12px; border-radius: 16px; }
  .site-header[data-header-mode=compact] .brand img { display: none; }
  .site-header[data-header-mode=compact] .brand::after { content: 'TS'; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; font: 500 12px/1 'DM Sans', sans-serif; letter-spacing: -.05em; }
  #mobile-nav:not([hidden]) { position: fixed; top: 92px; left: 20px; right: 20px; padding: 18px 20px; border-radius: 16px; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); }
  .vision-stage-runway { min-height: auto; margin-top: 74px; }
  .vision-stage-shell { position: static; width: calc(100% - 48px); min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; gap: 0; }
  .vision-stage-intro > .eyebrow, .vision-stage-intro > h2, .vision-stage-intro > p, .vision-controls, .vision-copy, .vision-art { grid-column: 1; }
  .vision-stage-intro > .eyebrow { grid-row: 1; }
  .vision-stage-intro > h2 { grid-row: 2; font-size: clamp(42px, 12vw, 55px); margin: 14px 0 15px; }
  .vision-stage-intro > p { grid-row: 3; }
  .vision-art { grid-row: 4; margin-top: 30px; }
  .vision-controls { grid-row: 5; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
  .vision-controls button { grid-template-columns: 1fr; justify-items: start; min-height: 58px; padding: 8px 0; }
  .vision-controls button span { margin-bottom: 5px; }
  .vision-copy { grid-row: 6; min-height: 0; margin: 24px 0 0; padding-bottom: 20px; }
  .vision-copy h3 { font-size: 31px; }
}
@media(prefers-reduced-motion:reduce) { .site-header, .vision-overlay { transition: none; } .vision-copy article { animation: none; } }

/* Platform-shaped testimonials: one source-bound proof panel at a time. */
.memories-scene { padding: 112px 0; }
.memory-panels { display: flex; align-items: flex-end; gap: 12px; min-height: 540px; }
.memory-panel { position: relative; flex: 1 1 0; height: 260px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid #d7cbdf; background: radial-gradient(110% 76% at 0 100%, #6d526f66 0, transparent 58%), linear-gradient(132deg, #321f43, #241d37); transition: flex 360ms ease-in-out, height 360ms ease-in-out, background 360ms ease-in-out, color 220ms ease-out; }
.memory-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: repeating-linear-gradient(116deg, transparent 0 5px, #fff1 5px 6px, transparent 6px 12px); mix-blend-mode: soft-light; }
.memory-panel:nth-child(2) { background: radial-gradient(110% 76% at 100% 0, #74629a5c 0, transparent 58%), linear-gradient(132deg, #2d2746, #202d45); }
.memory-panel:nth-child(3) { background: radial-gradient(110% 76% at 50% 100%, #5b80904a 0, transparent 60%), linear-gradient(132deg, #27384d, #252542); }
.memory-panel.is-expanded { flex: 2 1 0; height: 540px; justify-content: space-between; background: radial-gradient(96% 80% at 100% 0, #dcc9e880 0, transparent 62%), linear-gradient(132deg, #f1eaf3, #e4edf0); color: #2b2140; }
.memory-panel__progress { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 3px; background: #fff3; }
.memory-panel__progress i { display: block; width: calc(var(--memory-progress, 0) * 100%); height: 100%; background: #f7d382; transition: width 100ms linear; }
.memory-panel.is-expanded .memory-panel__progress { background: #2b214022; }
.memory-panel.is-expanded .memory-panel__progress i { background: #755e92; }
.memory-panel > button { display: grid; flex: 1; grid-template-columns: 56px minmax(0, 1fr) auto; align-content: end; align-items: center; gap: 12px; width: 100%; min-height: 0; padding: 18px; border: 0; background: transparent; color: inherit; text-align: left; }
.memory-panel > button:focus-visible { position: relative; z-index: 2; outline: 2px solid currentColor; outline-offset: -5px; }
.memory-panel > button img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.memory-panel > button > span:nth-child(2) { min-width: 0; }
.memory-panel > button strong, .memory-panel > button small { display: block; }
.memory-panel > button strong { overflow-wrap: anywhere; font: 500 14px/1.18 'DM Sans', sans-serif; letter-spacing: -.02em; }
.memory-panel > button small { margin-top: 5px; font-size: 12px; color: inherit; opacity: .85; }
.memory-panel__index { font: 400 28px/1 'DM Sans', sans-serif; letter-spacing: -.05em; opacity: .6; }
.memory-panel.is-expanded > button { flex: 0 0 auto; min-height: 92px; align-content: center; }
.memory-panel__content { padding: 18px 28px 26px; max-width: 680px; min-height: 0; overflow-y: auto; }
.memory-panel__content blockquote { margin: 0 0 22px; font: 400 clamp(20px, 1.55vw, 23px)/1.3 'DM Sans', sans-serif; letter-spacing: -.025em; }
.memory-panel__content .memory-attribution span { color: #514462; }
.memory-panel__content .memory-attribution { color: #514462; }
.memory-panel__content details { margin-top: 16px; color: #514462; font-size: 12px; }

/* Team-style About and restrained phone-call/funding-card adaptation. */
.about-scene { --muted: #c8bcd3; padding: 120px 0 0; background: #171126; color: #f5eff9; }
.about-heading { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; }
.about-heading h2 { margin: 18px 0 26px; font: 400 clamp(54px, 7vw, 96px)/.96 'DM Sans', sans-serif; letter-spacing: -.055em; }
.about-heading h2 em { color: #edbed0; font-style: normal; }
.about-heading > p:last-child { max-width: 55ch; margin: 0 auto; color: #c8bcd3; font-size: 16px; line-height: 1.75; }
.employer-band { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 80px); max-width: 1220px; margin: 72px auto 0; padding: 28px 36px; border-top: 1px solid #d9c9e33b; border-bottom: 1px solid #d9c9e33b; }
.employer-band img { display: block; width: min(16vw, 150px); height: 48px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: .72; }
.about-call { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(38px, 7vw, 110px); align-items: center; margin-top: 90px; padding: 58px clamp(30px, 5vw, 80px); background: #291b38; }
.about-call > div > h3 { margin: 15px 0; font: 400 clamp(36px, 4.2vw, 56px)/1 'DM Sans', sans-serif; letter-spacing: -.05em; }
.about-call > div > p:not(.eyebrow) { max-width: 32ch; color: #c8bcd3; }
.about-call .call-stage { padding: 0; }
.about-call .call-card { width: min(100%, 300px); }
.about-call .readable-intro { grid-column: 1 / -1; max-width: 56ch; margin: 0; color: #c8bcd3; }
.notes-scene { --paper: #f1eff7; --ink: #27314d; --muted: #5e6580; --accent: #86374c; --line: #27314d2a; padding: 112px 0; background: var(--paper); color: var(--ink); }
.notes-scene .chapter-title { max-width: 12ch; }

/* Footer is navigable information first; the current city panorama remains the
   temporary art layer until the parent supplies the approved foreground. */
.trail-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 0 56px; padding: 42px 0 34px; }
.trail-footer > div { display: grid; align-content: start; gap: 4px; }
.trail-footer p { margin: 0 0 9px; color: var(--ink); font-size: 11px; }
.trail-footer a { min-height: 38px; font-size: 12px; }

@media(max-width:650px) {
  .chapter-legend a { width: 14.285%; min-width: 0; }
  .legend-label { font-size: 8px; }
  .memory-panels { display: block; min-height: 0; }
  .memory-panel { display: block; height: auto; min-height: 0; margin-top: 10px; }
  .memory-panel.is-expanded { height: auto; background: #f1eaf3; }
  .memory-panel > button { min-height: 92px; grid-template-columns: 54px minmax(0, 1fr) auto; padding: 14px 16px; }
  .memory-panel > button img { width: 48px; height: 48px; }
  .memory-panel__content { padding: 12px 16px 28px 82px; }
  .memory-panel__content blockquote { font-size: 23px; }
  .about-scene { padding-top: 78px; }
  .about-heading h2 { font-size: clamp(48px, 14vw, 65px); }
  .employer-band { flex-wrap: wrap; gap: 22px 30px; margin-top: 52px; padding: 24px; }
  .employer-band img { width: 112px; height: 36px; }
  .about-call { display: block; margin-top: 56px; padding: 36px 24px; }
  .about-call .call-stage { margin-top: 30px; }
  .about-call .readable-intro { margin-top: 24px; }
  .notes-scene { padding: 75px 0; }
  .trail-footer { grid-template-columns: 1fr; gap: 22px; margin: 0 24px; padding-top: 32px; }
}
body.motion-paused .memory-panel, body.page-hidden .memory-panel { transition: none; }
body.motion-paused .memory-panel__progress i, body.page-hidden .memory-panel__progress i { transition: none; }
@media(prefers-reduced-motion:reduce) { .memory-panel, .memory-panel__progress i { transition: none; } }

/* Delivered Vision layers retain their full authored composition: no crop or
   synthetic treatment. The route only appears for the supplied Range/People
   map anchors and is decorative rather than required for comprehension. */
.vision-base, .vision-overlay { inset: 6%; width: 88%; height: 88%; }
.vision-path { position: absolute; z-index: 2; inset: 6%; width: 88%; height: 88%; overflow: visible; opacity: 0; pointer-events: none; }
.vision-path path { fill: none; stroke: #9d7548; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vision-path circle { fill: #b48a55; opacity: .84; }
.vision-stage-runway[data-vision-step=range] .vision-path, .vision-stage-runway[data-vision-step=people] .vision-path { opacity: 1; }
.vision-stage-runway[data-vision-step=range] .vision-path path, .vision-stage-runway[data-vision-step=people] .vision-path path { animation: vision-route 460ms ease-out both; }
@keyframes vision-route { to { stroke-dashoffset: 0; } }
body.motion-paused .vision-path path, body.page-hidden .vision-path path { animation: none; stroke-dashoffset: 0; }

/* Original flattened-poster defaults; independent layers are defined below. */
.hero--portrait .sky-wash { display: none; }
.hero--portrait .scene-paint .landscape { transform: scale(calc(1.015 - .015 * var(--progress))); object-position: center; }
.hero--portrait .tre-character { display: none; }
@media(max-width:650px) {
  .hero--portrait .scene-paint .landscape { object-position: center; transform: scale(1.01); }
  .hero--portrait .hero-copy { top: auto; width: 42%; bottom: 18%; }
  .hero--portrait .hero-copy h1 { font-size: clamp(25px, 7.4vw, 37px); }
  .hero--portrait .hero-personal { width: 31%; left: auto; right: 24px; top: auto; bottom: 18%; }
  .hero--portrait .hero-name { font-size: 20px; }
  .hero--portrait .hero-role { font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { .vision-path { display: none; } }

/* The active Vision explanation belongs to its selected desktop step, rather
   than sitting above the whole numbered rail. */
.vision-copy { display: contents; }
.vision-controls > [data-vision-copy] { padding: 18px 0 4px 38px; animation: vision-copy-in 340ms ease-in-out both; }
.vision-controls > [data-vision-copy][hidden] { display: none; }
.vision-controls > [data-vision-copy] h3 { font: 400 clamp(25px, 2vw, 34px)/1.08 'DM Sans', sans-serif; letter-spacing: -.045em; margin: 8px 0 12px; max-width: 14ch; }
.vision-controls > [data-vision-copy] > p:not(.eyebrow) { max-width: 31ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.vision-controls > [data-vision-copy] .text-link { margin-top: 12px; font-size: 12px; }
.vision-controls > [data-vision-copy] .experience-marks { margin: 14px 0 2px; }
@media(max-width:650px) {
  .vision-controls > [data-vision-copy] { grid-column: 1 / -1; grid-row: 2; padding: 22px 0 0; }
  .vision-controls > [data-vision-copy] h3 { font-size: 31px; }
  .vision-controls > [data-vision-copy] > p:not(.eyebrow) { font-size: 16px; }
}

/* Reference-scale staging: the illustration is the persistent right-hand
   surface, not a small framed image floating inside a reading column. */
.vision-scene, body[data-theme=night] .vision-scene { background: var(--paper); padding-top: 0; }
.vision-stage-runway { margin-top: 0; padding-top: 36px; }
.vision-stage-shell { width: calc(100% - 72px); min-height: calc(100svh - 132px); top: 96px; grid-template-columns: minmax(0, .58fr) minmax(0, 1fr); column-gap: 36px; }
.vision-stage-intro > h2 { font-size: clamp(32px, 3vw, 44px); max-width: 18ch; line-height: 1.08; }
.vision-stage-intro > p:not(.eyebrow) { max-width: 34ch; }
.vision-art { align-self: stretch; min-height: calc(100svh - 132px); aspect-ratio: auto; border-radius: 8px; background: none; }
.vision-base { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vision-overlay { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vision-path { inset: 0; width: 100%; height: 100%; }
.vision-controls { border-top: 0; margin-top: 32px; }
.vision-controls button { border-bottom: 0; min-height: 56px; font-size: 14px; grid-template-columns: 72px 1fr; }
.vision-controls button span { font-size: 30px; font-weight: 400; }
.vision-controls button[aria-expanded=true] span { font-size: 48px; }
.vision-controls > [data-vision-copy] { border-left: 1px solid var(--line); padding: 12px 0 24px 18px; margin-left: 8px; }
.vision-controls > [data-vision-copy] > .eyebrow { display: none; }
.vision-controls > [data-vision-copy] h3 { max-width: 24ch; font-size: clamp(24px, 2vw, 30px); }
body.motion-paused .vision-controls > [data-vision-copy], body.page-hidden .vision-controls > [data-vision-copy] { animation: none; }
body.motion-paused .site-header, body.motion-paused .memory-panel { transition: none; }
@media(max-width:650px) {
  .vision-stage-runway { padding-top: 54px; }
  .vision-stage-shell { width: calc(100% - 40px); min-height: 0; grid-template-columns: 1fr; }
  .vision-stage-intro > h2 { font-size: 36px; max-width: 16ch; }
  .vision-art { min-height: 0; aspect-ratio: 5 / 4; }
  .vision-controls button { grid-template-columns: 1fr; min-height: 72px; }
  .vision-controls button span, .vision-controls button[aria-expanded=true] span { font-size: 30px; }
  .vision-controls > [data-vision-copy] { margin-left: 0; padding-left: 14px; }
}
@media(prefers-reduced-motion:reduce) { .vision-controls > [data-vision-copy] { animation: none; } }

/* Footer closing scene: authored city, wordmark, then a single whole-body
   walker. These are independently layered stills, never simulated walking. */
.employer-band { gap: clamp(18px, 3.2vw, 42px); }
.employer-band img { width: min(13vw, 140px); height: 44px; filter: grayscale(1) brightness(1.55) contrast(.88); opacity: .64; }
.footer-cityscape { position: relative; width: 100%; aspect-ratio: 3 / 1; min-height: 300px; margin: 54px 0 0; overflow: hidden; isolation: isolate; background: #20162f; }
.footer-city, .footer-walker { position: absolute; display: block; pointer-events: none; }
.footer-city { z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.footer-city--night { opacity: 0; }
.footer-wordmark { position: absolute; z-index: 2; inset: auto 0 7%; display: grid; place-items: center; width: 100%; min-height: 0; padding: 0 18%; }
.footer-wordmark img { width: min(68%, 860px); height: auto; filter: brightness(0) saturate(100%) invert(97%) sepia(12%) saturate(412%) hue-rotate(239deg) brightness(111%); opacity: .9; }
.footer-walker { z-index: 3; left: 50%; bottom: 0; width: min(25vw, 360px); height: 92%; object-fit: contain; object-position: center bottom; transform: translateX(-50%); }
.footer-walker--night { opacity: 0; }
body[data-theme=night] .footer-city--day, body[data-theme=night] .footer-walker--day { opacity: 0; }
body[data-theme=night] .footer-city--night, body[data-theme=night] .footer-walker--night { opacity: 1; }
@supports ((mask-image: url("data:image/svg+xml,%3Csvg/%3E")) or (-webkit-mask-image: url("data:image/svg+xml,%3Csvg/%3E"))) {
  .footer-cityscape > * { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .07' numOctaves='2' seed='13'/%3E%3C/filter%3E%3Cpath d='M-12 8 C130 -4 220 17 340 6 S570 17 690 5 S860 17 1012 4 V406 C850 390 740 411 590 398 S320 412 160 399 S55 410 -12 396Z' fill='white' filter='url(%23p)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .07' numOctaves='2' seed='13'/%3E%3C/filter%3E%3Cpath d='M-12 8 C130 -4 220 17 340 6 S570 17 690 5 S860 17 1012 4 V406 C850 390 740 411 590 398 S320 412 160 399 S55 410 -12 396Z' fill='white' filter='url(%23p)'/%3E%3C/svg%3E"); -webkit-mask-size: 106% 108%; mask-size: 106% 108%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; }
  .arrival-ready.is-arrived .footer-cityscape > * { animation: footer-paint-reveal 520ms ease-out both; }
  .arrival-ready.is-arrived .footer-wordmark { animation-delay: 90ms; }
  .arrival-ready.is-arrived .footer-walker { animation-delay: 160ms; }
}
@keyframes footer-paint-reveal { from { -webkit-mask-position: 5% 3%; mask-position: 5% 3%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.arrival-ready.is-arrived .footer-wordmark img { animation: none; opacity: .9; }
body.motion-paused .footer-cityscape > *, body.page-hidden .footer-cityscape > * { animation: none !important; -webkit-mask-position: 0 0; mask-position: 0 0; }
@media(max-width:650px) {
  .employer-band { gap: 18px 22px; }
  .employer-band img { width: 92px; height: 34px; }
  .footer-cityscape { min-height: 270px; aspect-ratio: 1.45 / 1; }
  .footer-city { object-position: center; }
  .footer-wordmark { bottom: 13%; padding-inline: 8%; }
  .footer-wordmark img { width: 86%; }
  .footer-walker { width: min(58vw, 280px); height: 92%; bottom: 0; }
}
@media(prefers-reduced-motion:reduce) { .footer-cityscape > * { animation: none !important; -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* The one existing story link remains the sole keyboard target, while its hit
   area covers the whole real card. Inert carousel clones retain no interactivity. */
.feature-card .text-link[data-story-open]::after { content: ''; position: absolute; z-index: 4; inset: 0; cursor: pointer; }
.feature-card .text-link[data-story-open]:focus-visible { outline: none; }
.feature-card .text-link[data-story-open]:focus-visible::after { outline: 3px solid var(--accent); outline-offset: -5px; }
.feature-card[data-clone=true] .text-link[data-story-open]::after { display: none; }
.trailer-meta { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0 0 22px; list-style: none; }
.trailer-meta li { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; line-height: 1.2; }

/* Three replaceable artwork planes. Walker stays a still until Kling delivery. */
.hero--portrait .scene-paint { isolation: isolate; overflow: hidden; }
.hero--portrait .scene-paint .hero-city-layer { z-index: 0; transform: translateY(calc(-16px * var(--progress))) scale(1.04); }
.hero-portrait-layer { position: absolute; z-index: 2; left: 50%; top: -7%; width: 74%; height: 93%; object-fit: contain; object-position: center top; transform: translate(-50%, calc(-48px * var(--progress))); pointer-events: none; }
.hero-walker-layer { position: absolute; z-index: 4; left: 50%; bottom: -1%; height: 46%; width: 30%; object-fit: contain; object-position: center bottom; transform: translateX(-50%); pointer-events: none; }
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.hero-atmosphere--far { z-index: 1; }
.hero-atmosphere--near { z-index: 3; }
.hero-atmosphere i { position: absolute; display: block; }
.city-bird { left: 12%; top: 19%; width: 20px; height: 7px; border-top: 2px solid #243a54; border-radius: 50%; transform: rotate(9deg); animation: city-bird-flight 24s linear infinite; }
.city-bird::after { content: ''; position: absolute; width: 18px; height: 7px; left: 16px; top: -2px; border-top: 2px solid #243a54; border-radius: 50%; transform: rotate(-18deg); }
.city-bird--second { top: 24%; left: 5%; scale: .65; animation-delay: -9s; }
.city-leaf { left: 14%; top: 52%; width: 11px; height: 19px; background: #ad7038; border-radius: 90% 0 80% 10%; animation: city-leaf-drift 16s ease-in-out infinite; }
.city-leaf--second { left: 84%; top: 34%; scale: .65; animation-delay: -7s; }
.city-mote { left: 31%; top: 69%; width: 3px; height: 3px; border-radius: 50%; background: #ffedbd; box-shadow: 0 0 8px #ffd974; animation: city-mote-drift 9s ease-in-out infinite alternate; }
.city-window { left: 13.5%; top: 24%; width: 4px; height: 8px; background: #ffc45e; box-shadow: 0 0 12px #ffc45e; animation: city-light-breathe 8s ease-in-out infinite; }
.city-window--second { left: 83%; top: 59%; animation-delay: -3s; }
.city-headlights { left: -15%; bottom: 9%; width: 44px; height: 3px; background: #ffebad; box-shadow: 18px 0 16px #fbd485, 0 0 8px #fff4cb; border-radius: 50%; opacity: 0; animation: city-traffic 18s linear infinite; }
@keyframes city-bird-flight { to { translate: 60vw -3vh; } }
@keyframes city-leaf-drift { 0%,100% { translate: 0 0; rotate: -25deg; opacity: 0; } 15%,75% { opacity: .7; } 95% { translate: 14vw 24vh; rotate: 170deg; opacity: 0; } }
@keyframes city-mote-drift { to { translate: 35px -24px; opacity: .2; } }
@keyframes city-light-breathe { 0%,100% { opacity: .35; } 45%,65% { opacity: .85; } }
@keyframes city-traffic { 0%,74% { translate: 0; opacity: 0; } 77%,92% { opacity: .65; } 97%,100% { translate: 125vw; opacity: 0; } }
.hero[data-visible=false] .hero-atmosphere i, body.page-hidden .hero-atmosphere i { animation-play-state: paused; }
body.motion-paused .hero-atmosphere, body.motion-paused .hero-headlight { display: none; }
body.motion-paused .hero--portrait .scene-paint .hero-city-layer { transform: scale(1.04); }
body.motion-paused .hero-portrait-layer { transform: translateX(-50%); }

/* A purposeful contrast scrim behind the initially open navigation. */
.site-header[data-header-mode=open] { background: transparent; backdrop-filter: none; }
.site-header[data-header-mode=open]::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0 0 auto; height: 170px; background: linear-gradient(180deg, rgb(250 246 236 / .85), rgb(250 246 236 / 0)); }
body[data-theme=night] .site-header[data-header-mode=open] { background: transparent; }
body[data-theme=night] .site-header[data-header-mode=open]::before { background: linear-gradient(180deg, rgb(22 13 41 / .85), rgb(22 13 41 / 0)); }

/* Pigment spreads out from the lower left, assembling independent layers. */
@supports (mask-image: linear-gradient(black, transparent)) {
  .footer-cityscape > * { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cdefs%3E%3Cfilter id='edge' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .04' numOctaves='3' seed='8' result='grain'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='grain' scale='65'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='400' cy='285' rx='365' ry='180' fill='white' filter='url(%23edge)'/%3E%3C/svg%3E"); mask-position: left bottom; mask-size: 360% 360%; }
  .arrival-ready:not(.is-arrived) .footer-cityscape > * { mask-size: 0% 0%; }
  .arrival-ready.is-arrived .footer-cityscape > * { animation: footer-pigment-bloom 2600ms cubic-bezier(.2,.6,.3,1) both; }
  .arrival-ready.is-arrived .footer-wordmark { animation-delay: 220ms; }
  .arrival-ready.is-arrived .footer-walker { animation-delay: 440ms; }
}
@keyframes footer-pigment-bloom { 0% { mask-size: 0% 0%; } 95% { mask-size: 360% 360%; } 100% { mask-image: none; } }
body.motion-paused .footer-cityscape > *, body.page-hidden .footer-cityscape > * { mask-image: none; }
@media(max-width:650px) {
  .hero-portrait-layer { top: 4%; width: 135%; height: 66%; }
  .hero-walker-layer { height: 37%; width: 54%; left: 64%; bottom: 15%; }
  .hero--portrait .hero-copy { left: 24px; width: calc(100% - 48px); bottom: 9%; }
  .hero--portrait .hero-copy h1 { font-size: clamp(26px, 6.8vw, 40px); }
  .hero--portrait .hero-personal { left: 24px; right: auto; top: auto; bottom: 34%; width: 42%; }
  .hero--portrait .hero-name { font-size: 24px; }
  .hero--portrait .hero-role { font-size: 13px; }
  .hero--portrait .hero-invitation { bottom: 23%; }
  .hero--portrait .hero-foot { bottom: 14px; }
  .hero--portrait .scroll-hint { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-atmosphere { display: none; }
  .hero--portrait .scene-paint .hero-city-layer { transform: scale(1.04); }
  .hero-portrait-layer { transform: translateX(-50%); }
  .footer-cityscape > * { mask-image: none !important; }
}

/* Critique recovery: identity, promise and invitation share one reading path. */
.hero--portrait .scene-paint[data-scene=day] { background: #fff4df; }
.hero--portrait .scene-paint[data-scene=night] { background: #160d29; }
.hero--portrait .scene-paint .hero-poster-layer { transform: translateY(calc(-10px * var(--progress))) scale(1.025); object-position: center; }
.hero-city-foreground { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateY(calc(-18px * var(--progress))) scale(1.045); pointer-events: none; }
body.motion-paused .hero--portrait .scene-paint .hero-poster-layer { transform: scale(1.025); }
body.motion-paused .hero-city-foreground { transform: scale(1.045); }
@media(prefers-reduced-motion:reduce) { .hero--portrait .scene-paint .hero-poster-layer { transform: scale(1.025); } .hero-city-foreground { transform: scale(1.045); } }
.vision-art-caption { position: absolute; z-index: 5; bottom: 0; left: 0; right: 0; padding: 12px 18px; margin: 0; background: var(--paper); color: var(--muted); font-size: 12px; line-height: 1.5; }
.vision-art-caption a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.vision-art .vision-overlay { padding-bottom: 62px; }
.hero--portrait .scene-paint::after { content: ''; pointer-events: none; position: absolute; z-index: 3; inset: 57% 30% 0 0; background: linear-gradient(90deg, #fff4dff5, #fff4dfe6 44%, #fff4df00); mask-image: linear-gradient(transparent, #000 35%); }
body[data-theme=night] .hero--portrait .scene-paint::after { background: linear-gradient(90deg, #160d29f5, #160d29e6 44%, #160d2900); }
.hero--portrait .hero-copy { z-index: 3; left: 5vw; bottom: 15%; width: 68%; }
.hero--portrait .hero-copy h1 { font-size: clamp(46px, 4.8vw, 76px); font-weight: 500; line-height: 1.03; letter-spacing: -.055em; color: #192a46; }
.hero--portrait .hero-copy h1 em { color: #86374c; }
body[data-theme=night] .hero--portrait .hero-copy h1 { color: #fff5e7; }
body[data-theme=night] .hero--portrait .hero-copy h1 em { color: #efb5cb; }
.hero--portrait .hero-copy .hero-personal { position: static; width: auto; transform: none; margin-bottom: 22px; }
.hero--portrait .hero-personal::before { display: none; }
.hero--portrait .hero-name { font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; }
.hero--portrait .hero-role { margin-top: 3px; font-size: 15px; max-width: none; color: var(--ink); }
.hero--portrait .hero-invitation { z-index: 3; left: 5vw; right: auto; bottom: 6%; min-width: 180px; min-height: 48px; font-size: 16px; font-weight: 500; }
.hero-portrait-layer { top: 0; height: 78%; left: 54%; }
.hero-walker-layer { left: 74%; height: 43%; }
@media(max-width:650px) {
  .hero--portrait .scene-paint::after { inset: 48% 0 0; background: linear-gradient(0deg, #fff4df, #fff4dfee 45%, #fff4df00); }
  .hero-runway--portrait { height: auto; }
  .hero--portrait { position: relative; height: 100svh; min-height: 680px; }
  body[data-theme=night] .hero--portrait .scene-paint::after { background: linear-gradient(0deg, #160d29, #160d29ee 45%, #160d2900); }
  .hero-portrait-layer { top: 5%; height: 62%; left: 52%; }
  /* Keep the three artwork planes on one mobile ground line above the copy. */
  .hero--portrait .scene-paint .hero-poster-layer,
  .hero-city-foreground { height: calc(100% - 320px); }
  .hero-walker-layer { left: 76%; height: 27%; bottom: 320px; width: 44%; }
  .hero--portrait .hero-copy { left: 24px; bottom: 170px; width: calc(100% - 48px); }
  .hero--portrait .hero-copy h1 { font-size: clamp(29px, 7.45vw, 46px); }
  .hero--portrait .hero-copy .hero-personal { margin-bottom: 18px; width: 100%; }
  .hero--portrait .hero-name { font-size: 16px; }
  .hero--portrait .hero-role { font-size: 16px; line-height: 1.4; }
  .hero--portrait .hero-invitation { left: 24px; bottom: 94px; }
}

/* Reading copy keeps a consistent floor; compact eyebrows remain utility labels. */
.hero--portrait .hero-role,
.vision-stage-intro > p:not(.eyebrow),
.tales-heading > p:not(.eyebrow),
.memories-heading > p:not(.eyebrow),
.readable-intro,
.clip-transcript,
.intro-dialog .recording-gap,
.trailer-beat > p:last-child,
.memory-panel__content details { font-size: 16px; }
.readable-intro summary,
.clip-transcript summary,
.memory-panel__content summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.trail-footer a { min-height: 44px; font-size: 14px; }
.memory-panel__content { scrollbar-gutter: stable; }
.story-art-note { margin: 0 24px 22px; color: var(--muted); font-size: 16px; line-height: 1.5; text-align: center; }
.story-dialog > .story-art-note { margin: 0; padding: 12px 24px 0; }
.story-review-note { color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 60ch; }

/* Text navigation stays readable at every viewport. */
.circle-button{width:auto;min-width:44px;padding-inline:14px;font-size:14px;border-radius:999px}