/* Portrait front door and paired story/visual panels. */
:root{--paper:#fefefd;--ink:#273644;--accent:#4a6780;--muted:#63717a;--line:#e4e8eb;--frame-width:1240px}
body{background:var(--paper)}.masthead{background:#fefefdf2}.frame-meta,.frame-controls,.story-foot,.eyebrow,.mr-footer{color:var(--muted)}.story-summary{color:var(--muted)}
.front-door{min-height:calc(100svh - 86px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:38px 0 52px}
.welcome-portrait{width:150px;height:150px;border-radius:50%;object-fit:cover;margin-bottom:20px}
.front-door .eyebrow{font-size:13px;letter-spacing:.4px}.front-door h1{font-size:58px;line-height:1.1;margin:13px 0 15px;letter-spacing:-2px}
.welcome-line{font-size:24px;font-weight:400;letter-spacing:-.5px}.front-door .opening-summary{font-size:17px;line-height:1.7;max-width:610px;margin-top:17px}
.welcome-paths{display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,960px);margin-top:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.welcome-paths a{display:flex;align-items:center;gap:15px;padding:22px 24px;transition:background .2s}.welcome-paths a+a{border-left:1px solid var(--line)}.welcome-paths a:hover{background:#f2f5f7}.welcome-paths strong{display:block;font-size:17px;font-weight:500}.welcome-paths small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.path-index{font-size:11px;color:#8798a5;align-self:flex-start;margin-top:4px}.welcome-paths a>span:last-child{margin-left:auto;font-size:20px;color:var(--accent)}
.opening,.work,.page-footer{width:calc(100% - 64px);max-width:var(--frame-width);margin-left:auto;margin-right:auto}
.work-nav{border-color:var(--line);scrollbar-color:#bcc8d0 transparent}.work-nav a:nth-child(3),.work-nav a:nth-child(8){border-color:var(--line)}.work-nav.has-overflow:after{color:var(--accent)}
.story-stage{background:transparent;border:0;border-radius:0;box-shadow:none}.frame-meta{border-top:1px solid var(--line);padding:10px 0}.frame-controls{padding:0;border-color:var(--line)}
.frame-mode .story-panel{padding:18px 0;display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,2fr);grid-template-rows:minmax(0,1fr);gap:24px;background:var(--paper);border:0;box-shadow:0 -10px 24px #2736440b}
.story-copy{display:flex;flex-direction:column;padding:28px;background:#f5f7f8;border:1px solid #e2e7eb;border-radius:9px;min-width:0;min-height:0}
.frame-mode .story-heading,.story-heading{display:block;overflow:visible;margin:0}.story-heading h2{font-size:31px;line-height:1.15;letter-spacing:-1px;margin:14px 0 24px}.story-summary{font-size:16px;line-height:1.65}.story-copy .eyebrow{font-size:12px;letter-spacing:.3px}
.story-copy .story-foot{margin-top:auto;padding-top:24px;display:block;font-size:13px;line-height:1.6;align-self:stretch;color:var(--accent)}.story-foot a{display:inline-block;margin-top:12px;white-space:normal}
.frame-mode .story-visual{align-self:center;max-height:100%;overflow:hidden;border-radius:7px;width:100%;min-height:0}
.visual-warmly,.visual-roomora,.visual-orra{aspect-ratio:16/9;background:transparent}
.story-visual .media{min-height:0;border-radius:7px;background:transparent;aspect-ratio:16/9;width:100%;height:auto}
.story-visual video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block}.video-toggle{color:var(--ink);background:#fffffff0;border-color:#dce2e6}
.frame-mode .visual-monitor,.frame-mode .visual-simular,.frame-mode .visual-mindreps{height:100%}
.story-visual .pv-simular{background:#edf1f4}.pv-simular .pv-signal-map{margin-left:20px;margin-right:20px}.pv-simular .pv-signal{font-size:12px}.pv-simular .pv-market-output>span{font-size:12px}
.pv-monitor .pv-project{grid-template-columns:1fr 110px;padding-left:17px;padding-right:17px}.pv-monitor .pv-project h4{font-size:23px}.pv-monitor .pv-project-result strong{font-size:39px}.pv-monitor .pv-model-scale{flex-wrap:wrap}.pv-monitor .pv-model-scale>div{gap:10px}.client-logos{gap:23px}.client-logos img{width:95px}.clients{gap:18px}
.frame-mode .visual-alan{aspect-ratio:1.6}.story-visual .team-portrait img{object-fit:cover;object-position:center}.team-portrait figcaption{font-size:10px}.team-portrait figcaption span{display:none}
.frame-mode .visual-claude-101{aspect-ratio:16/10}.story-visual .event-figure{height:100%}.story-visual .event-figure .media{height:100%;aspect-ratio:auto}.event-figure .demo-caption{display:none}
/* More vertical room makes the two learning flows easier to compare. */
.mr-columns{gap:12px}.mr-columns>section{padding:14px}.mr-flow{display:flex;flex-direction:column;gap:12px}.mr-flow li{display:grid;grid-template-columns:25px 1fr;gap:9px}.mr-flow p{margin-top:3px;font-size:12px}.mr-flow strong{font-size:13px}.mr-columns h5{font-size:17px}.mr-output{min-height:78px}.mr-output>strong{font-size:14px}.mr-output>p{font-size:11px}.mr-footer{font-size:11px}
@media(min-width:1000px) and (max-height:800px){.front-door{min-height:calc(100svh - 70px);padding:24px 0 36px}.welcome-portrait{width:124px;height:124px;margin-bottom:15px}.front-door h1{font-size:48px}.welcome-line{font-size:22px}.welcome-paths{margin-top:28px}.welcome-paths a{padding:18px 22px}.story-copy{padding:23px}.story-summary{font-size:15px;line-height:1.6}.story-heading h2{font-size:29px;margin-bottom:20px}.story-copy .story-foot{font-size:12px}.mr-comparison{padding:12px}.mr-flow{gap:8px}.mr-columns h5{font-size:16px}.mr-flow strong{font-size:12px}.mr-flow p{font-size:11px}.mr-output{min-height:65px}.mr-output>strong{font-size:13px}}
@media(max-width:1100px) and (min-width:1000px){.frame-mode .story-panel{grid-template-columns:290px minmax(0,1fr);gap:20px}.story-copy{padding:20px}.story-summary{font-size:15px}.pv-monitor .pv-project{grid-template-columns:1fr 75px;padding-left:12px;padding-right:12px}.pv-monitor .pv-project h4{font-size:19px}.pv-monitor .pv-project-result strong{font-size:32px}.client-logos{gap:14px}.client-logos img{width:76px}.mr-columns>section{padding:10px}.mr-flow p{font-size:11px}}
@media(max-width:999px),(max-height:699px){.front-door{min-height:calc(100svh - 76px);padding:35px 0 50px}.story-panel{padding:0;border:0;border-radius:0;background:transparent}.story-copy{padding:25px;margin-bottom:18px}.story-copy .story-foot{margin-top:20px;padding-top:0}.story-visual{min-height:0}.story-visual .pv{height:auto}.story-visual .pv-simular{height:340px}.story-visual .media{height:auto;aspect-ratio:16/9}.story-visual .team-portrait{height:auto}.story-visual .team-portrait img{height:auto;max-height:none}.story-heading h2{font-size:30px}.mr-columns{min-height:350px}.story-visual .event-figure .media{aspect-ratio:16/10;height:auto}.frame-window{overflow:visible}.story-copy+.story-visual{margin-bottom:42px}}
@media(max-width:600px){.opening,.work,.page-footer{width:calc(100% - 36px)}.welcome-portrait{width:118px;height:118px}.front-door h1{font-size:43px}.welcome-line{font-size:19px}.front-door .opening-summary{font-size:16px}.front-door .eyebrow{font-size:11px}.welcome-paths{grid-template-columns:1fr;margin-top:25px}.welcome-paths a{padding:15px 12px}.welcome-paths a+a{border-left:0;border-top:1px solid var(--line)}.welcome-paths strong{font-size:16px}.welcome-paths small{margin-top:0}.story-copy{padding:22px}.story-summary{font-size:16px}.pv-monitor .pv-project{grid-template-columns:1fr 100px}.mr-columns{min-height:0}.mr-flow{min-height:0;margin-bottom:10px}.mr-flow p{font-size:12px}.mr-flow strong{font-size:13px}.clients{gap:12px}}
@media(prefers-reduced-motion:reduce){.story-panel{padding:0!important;margin-bottom:40px}.story-copy{margin-bottom:18px}.story-visual{height:auto}.story-visual .pv-simular{height:400px}.story-visual .mr-comparison{min-height:410px}.visual-warmly,.visual-roomora,.visual-orra{height:auto}}
@media(min-width:1000px) and (min-height:700px){.frame-mode .story-panel{grid-template-columns:minmax(280px,1fr) minmax(0,min(70%,calc((var(--stage-height) - 117px)*16/9)))}.frame-mode .visual-warmly,.frame-mode .visual-roomora,.frame-mode .visual-orra{max-height:none}}
@media(min-width:1000px) and (min-height:700px){.frame-mode .story-panel{--pair-height:min(calc(var(--stage-height) - 117px),calc(min(1240px,calc(100vw - 64px))*.7*9/16));grid-template-rows:var(--pair-height);align-content:center}.mr-flow{justify-content:space-around}.mr-flow strong{font-size:13px}.mr-flow p{font-size:12px}.mr-columns h5{margin-bottom:6px}}

.team-portrait figcaption span{display:inline;font-size:10px}

/* A quiet introduction, with navigation revealed only at the work. */
.masthead{position:fixed;left:0;right:0;top:0;opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:transform .3s ease,opacity .25s ease,visibility .3s}
.header-visible .masthead{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.front-door{min-height:100svh}
.scroll-cue{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.25px;color:var(--muted);margin-top:24px;padding:8px 14px}
.scroll-cue>span:last-child{font-size:20px;line-height:1;animation:scroll-invitation 2s ease-in-out 3}
@keyframes scroll-invitation{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.masthead{transition:none}.scroll-cue>span:last-child{animation:none}}

.navigation-ready:not(.header-visible) .masthead{opacity:0;visibility:hidden;transform:translateY(-100%);pointer-events:none}