/* The homepage's paper, typography and geometric vocabulary continue across the site. */
@media(min-width:621px) and (max-width:1000px){
 .nav-links{display:none}.nav>.button{margin-left:auto}.mobile-menu{display:block;position:relative}
 .mobile-menu summary{list-style:none;cursor:pointer;padding:8px 0 8px 6px}.mobile-menu summary::-webkit-details-marker{display:none}
 .mobile-menu .icon{width:23px;height:23px}.menu-links{position:absolute;right:0;top:43px;width:220px;display:flex;flex-direction:column;background:#faf9f3;border:1px solid #c4ceb8;box-shadow:0 16px 35px #1a372922;padding:8px;z-index:20}.menu-links a{padding:14px;font-size:12px}
}
.city-scroll-section{min-width:0}
.city-scroll-section.scroll-linked{height:calc(var(--hero-frame-height,740px) + 55svh)}
.hero-scroll-frame{position:sticky;top:0;display:block;width:100%;height:auto;margin:0;padding-top:32px}
@media(min-width:621px) and (max-width:1100px){
 .hero-scroll-frame{padding-top:0}
}
@media(max-width:620px){
 .city-scroll-section.scroll-linked{height:calc(var(--hero-frame-height,550px) + 34svh)}
 .hero-scroll-frame{padding-top:0}
 .studio-scroll{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.city-scroll-section.scroll-linked{height:auto}.hero-scroll-frame{position:relative!important;top:0!important}}
@media(max-width:1000px){
 .site-header{height:auto;min-height:87px}
 .site-header .nav{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;grid-template-rows:87px;column-gap:14px;row-gap:0;height:auto;min-height:87px}
 .nav>.brand{grid-column:1;grid-row:1}
 .nav>.button{grid-column:2;grid-row:1;margin-left:0}
 .mobile-menu{grid-column:3;grid-row:1}
 .mobile-menu[open]{display:contents}
 .mobile-menu[open]::details-content{display:contents}
 .mobile-menu summary{grid-column:3;grid-row:1;display:grid;place-items:center;min-width:44px;min-height:44px;padding:0}
 .mobile-menu[open] .menu-links{grid-column:1/-1;grid-row:2;position:static;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0 0 14px;padding:8px;box-shadow:none}
 .menu-links a{display:flex;align-items:center;min-height:44px;font-size:13px}
}
[hidden]{display:none!important}
/* Six authored city studies share one stage and an accessible outcome reader. */
.outcomes .outcomes-grid{display:block}
.outcomes-heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:45px;margin-bottom:36px}
.outcomes-heading-row .outcomes-intro{max-width:365px;margin:0 0 5px}
.outcomes-explorer{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);column-gap:38px;row-gap:22px;align-items:start}
.outcome-study{grid-column:1;grid-row:1/3;margin:0;background:#e7e9da;border:1px solid #d0d6c0;position:relative;min-width:0}
.outcome-study-heading{display:flex;justify-content:space-between;gap:16px;margin:22px 25px 0;color:#49614d;font-size:8px;letter-spacing:1.5px;text-transform:uppercase}
.outcome-model{height:460px;position:relative;overflow:hidden}
.outcome-model canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.outcome-study figcaption{margin:0 25px;padding:0 0 22px}
.outcome-study h3{font-size:27px;line-height:1.15;letter-spacing:-1px;font-weight:500;max-width:410px}
.outcome-study p{font-size:11px;line-height:1.75;color:#4c634f;margin-top:10px;max-width:420px;min-height:39px}
.outcome-study-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #bbc6ab;margin-top:18px;padding-top:15px;font-size:8px;color:#52674e}
.outcome-tabs{grid-column:2;grid-row:1;border-top:1px solid #b8c3ad}
.outcome-tab{display:grid;grid-template-columns:25px 1fr 18px;gap:12px;align-items:center;text-align:left;width:100%;border:0;border-bottom:1px solid #cbd2be;background:transparent;cursor:pointer;color:#304a40;padding:22px 14px 22px 0;font:inherit;transition:background .25s,color .25s}
.outcome-tab>span:first-child{font-size:9px;color:#405640}
.outcome-tab strong{display:block;font-weight:500;font-size:19px;letter-spacing:-.6px}
.outcome-tab small{display:block;font-size:10px;line-height:1.7;color:#566b53;margin-top:5px}
.outcome-tab>span:last-child{font-size:18px}
.outcome-tab:hover{background:#e9ebdd}
.outcome-tab[aria-selected=true]{background:#e4e7d5;color:#9a4933;box-shadow:inset 3px 0 #ad5e43;padding-left:14px}
.outcomes .outcome-evidence{grid-column:2;grid-row:2;margin-top:0}
@media(min-width:1101px){.outcome-model{height:480px}}
@media(min-width:621px) and (max-width:900px){
 .outcomes-heading-row{gap:28px}.outcomes-heading-row .outcomes-intro{max-width:310px;font-size:12px}
 .outcomes-explorer{grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:25px}
 .outcome-model{height:365px}.outcome-study-heading{margin:19px 18px 0;font-size:7px;letter-spacing:.7px}
 .outcome-study figcaption{margin-inline:18px}.outcome-study h3{font-size:24px}
 .outcome-tab{padding-block:20px}.outcome-tab strong{font-size:18px}.outcome-tab small{font-size:9px}
}
@media(max-width:620px){
 .outcomes-heading-row{display:block;margin-bottom:25px}.outcomes-heading-row .outcomes-intro{margin-top:20px;max-width:330px}
 .outcomes-explorer{display:flex;flex-direction:column;gap:18px}
 .outcome-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;order:-1;border:1px solid #cbd2be}
 .outcome-tab{grid-template-columns:1fr;gap:5px;padding:12px 8px!important;border-right:1px solid #cbd2be;min-height:73px}
 .outcome-tab strong{font-size:12px;letter-spacing:-.3px}.outcome-tab small,.outcome-tab>span:last-child{display:none}
 .outcome-tab[aria-selected=true]{box-shadow:inset 0 -3px #ad5e43}.outcome-tab>span:first-child{font-size:8px}
 .outcome-study{width:100%}.outcome-model{height:310px}
 .outcome-study-heading{margin:18px 17px 0;font-size:7px;letter-spacing:.7px}
 .outcome-study figcaption{margin:0 17px}.outcome-study h3{font-size:25px}
 .outcome-study p{font-size:10px;min-height:36px}.outcome-study-footer{font-size:7px}
 .outcomes .outcome-evidence{max-width:none}
}
.nav-links a[aria-current=page]{color:#a45138;box-shadow:0 1px currentColor}
.chapter-breadcrumb{display:flex;gap:12px;align-items:center;padding-top:32px;font-size:10px;color:#60725d}
.chapter-breadcrumb a:hover{color:#a45138}
.chapter-hero{padding:65px 0 66px}
.chapter-hero .eyebrow{margin-bottom:29px}
.chapter-hero h1{font-size:clamp(58px,6.4vw,98px);font-weight:750;letter-spacing:-.04em;line-height:1.03;max-width:1020px}
.chapter-hero h1 em{font-style:normal;color:#a65339}
.chapter-hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-top:33px}
.chapter-hero-bottom p{font-size:14px;line-height:1.85;color:#5b6e5d;max-width:475px}
.chapter-hero-bottom .text-link{white-space:nowrap}
.chapter-index{padding:92px 0 98px;border-top:1px solid var(--line)}
.chapter-index-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:44px}
.chapter-index h2,.editorial-heading{font-size:52px;letter-spacing:-2.5px;line-height:1.12;font-weight:750}
.chapter-index-heading p{max-width:340px;font-size:12px;line-height:1.8;color:#60715c}
.chapter-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.chapter-link{display:block;border-top:1px solid #b8c3ad;padding-top:17px}
.chapter-link .chapter-meta{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:#5a715a}
.chapter-link .chapter-meta span:last-child{font-size:21px}
.chapter-link h3{font-size:24px;line-height:1.2;letter-spacing:-.9px;font-weight:500;margin:5px 0 13px}
.chapter-link p{font-size:12px;color:#5a6f5c;line-height:1.8;max-width:310px}
.chapter-link:hover h3{color:#a45138}
/* The website's one footer: a navy strip with the Theoremus logo and its
   copyright on the left, and Privacy and the office's address on the right,
   one line on a desktop and two on a phone. The homepage and Ask for access
   carry the same footer inside their closing navy screen, as .homepage-footer.
   It holds only what the header does not: the Polycity logo, Showcases and
   Ask for access live in the header, so a page never shows them twice. */
.site-strip{background:#000b2d;color:#c9d4f0}
.site-strip>.wrap,.homepage-footer{display:flex;align-items:center;gap:20px;min-height:64px;white-space:nowrap}
.site-maker{display:block;flex:none}
.site-maker img{display:block;width:96px;height:auto;filter:brightness(0) invert(1)}
.site-made{font-size:12px;color:#7f8db0}
.site-strip nav,.homepage-footer nav{margin-left:auto;display:flex;gap:28px;white-space:nowrap}
.site-strip nav a,.homepage-footer nav a{display:inline-flex;align-items:center;min-height:32px;font-size:13px}
.site-strip a:hover,.homepage-footer nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media(max-width:620px){
 .site-strip>.wrap,.homepage-footer{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:4px;min-height:0;padding:14px 0}
 .site-maker img{width:84px}
 .site-made{font-size:11px}
 .site-strip nav,.homepage-footer nav{grid-column:1/-1;margin-left:0;gap:20px}
 .site-strip nav a,.homepage-footer nav a{font-size:11px}
}
.editorial-section{padding:95px 0}
.editorial-intro{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end;margin-bottom:42px}
.editorial-intro p{font-size:13px;line-height:1.85;color:#5b6f5b;max-width:420px}
.editorial-intro .eyebrow{margin-bottom:24px}
.editorial-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.editorial-trio article{border-top:1px solid #b7c4ad;padding-top:22px}
.editorial-trio .folio{font-size:34px;font-weight:400;color:#637957;letter-spacing:-1.5px}
.editorial-trio h3{font-size:21px;letter-spacing:-.6px;line-height:1.3;font-weight:750;margin:20px 0 12px}
.editorial-trio p{font-size:12px;line-height:1.9;color:#5b6f5b}
.editorial-trio a{display:inline-block;font-size:10px;margin-top:22px;border-bottom:1px solid #9dad92;padding-bottom:5px}
.soft-section{background:#e9ecdc}
.faq-layout{display:grid;grid-template-columns:.9fr 1.3fr;gap:90px}
.faq-layout h2{font-size:44px;line-height:1.15;letter-spacing:-2px;font-weight:750}
.faq-layout .eyebrow{margin-bottom:25px}
.faq-list{border-top:1px solid #b6c4aa}
.faq-list details{border-bottom:1px solid #c3ceb7}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:25px;padding:23px 0;font-size:14px;line-height:1.5}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';color:#788e6e}
.faq-list details[open] summary:after{content:'−'}
.faq-list details p{font-size:12px;line-height:1.9;color:#536b53;padding:0 25px 25px 0;max-width:540px}
.chapter-cta{background:#2c4b3d;color:#f0edda;padding:68px 0}
.chapter-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:45px}
.chapter-cta h2{font-size:46px;font-weight:750;letter-spacing:-2px;line-height:1.12;max-width:730px}
.chapter-cta .eyebrow{color:#c6d0af;margin-bottom:22px}
.chapter-cta .button{background:#e5e7c8;color:#2c4b3d;white-space:nowrap}
.chapter-cta .button:hover{background:#f6f2d9}
.evidence-thread{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #b7c4ad;margin-top:40px}
.evidence-thread article{padding:28px 30px 25px 0}
.evidence-thread article+article{border-left:1px solid #c7d0bc;padding-left:30px}
.evidence-thread h3{font-size:21px;font-weight:500;letter-spacing:-.7px;margin-bottom:15px}
.evidence-thread p{font-size:12px;line-height:1.9;color:#536950}
.field-note{padding:45px 0 85px;display:flex;justify-content:space-between;gap:60px}
.field-note p{font-size:11px;line-height:1.8;color:#607255;max-width:560px}
.field-note a{text-decoration:underline;text-underline-offset:4px;font-size:11px}
@media(max-width:1100px){
 .chapter-hero{padding-top:52px}.chapter-hero h1{letter-spacing:-4px}
 .editorial-intro,.faq-layout{gap:50px}.chapter-index h2,.editorial-heading{font-size:43px}
 .chapter-links{gap:23px}
}
@media(max-width:800px){
 .nav-links{gap:15px;font-size:10px}.nav{gap:20px}
 .chapter-hero h1{font-size:66px}.chapter-hero-bottom{align-items:flex-start;gap:30px}
 .chapter-index-heading,.editorial-intro{display:block}.chapter-index-heading p,.editorial-intro p{margin-top:25px}
 .chapter-links{gap:20px}.chapter-link h3{font-size:21px}
 .chapter-index,.editorial-section{padding:70px 0}.editorial-trio{gap:24px}
 .faq-layout{grid-template-columns:1fr;gap:35px}.faq-layout h2{max-width:460px}
 .chapter-cta h2{font-size:37px}.chapter-cta-inner{gap:30px}
}
@media(max-width:620px){
 .chapter-breadcrumb{font-size:9px;padding-top:25px}
 .chapter-hero{padding:43px 0}.chapter-hero h1{font-size:49px;letter-spacing:-2.8px;line-height:1.06}
 .chapter-hero .eyebrow{font-size:8px;margin-bottom:24px}
 .chapter-hero-bottom{display:block;margin-top:24px}.chapter-hero-bottom p{font-size:12px}
 .chapter-hero-bottom .text-link{display:inline-flex;margin-top:24px;font-size:10px}
 .chapter-index-heading{margin-bottom:30px}.chapter-index h2,.editorial-heading{font-size:38px;letter-spacing:-1.8px}
 .chapter-index-heading p{font-size:11px}.chapter-links{grid-template-columns:1fr;gap:34px}
 .chapter-link h3{font-size:27px}.chapter-link p{font-size:12px;max-width:none}
 .chapter-link .chapter-meta{font-size:8px}.chapter-index{padding:60px 0}
 .editorial-section{padding:60px 0}.editorial-intro{margin-bottom:29px}.editorial-intro p{font-size:12px}
 .editorial-trio{grid-template-columns:1fr;gap:28px}.editorial-trio article{position:relative;padding-left:55px}
 .editorial-trio .folio{position:absolute;left:0;top:22px;font-size:30px}.editorial-trio h3{margin-top:0;font-size:23px}
 .faq-layout h2{font-size:38px}.faq-list summary{font-size:13px}.faq-list details p{font-size:11px}
 .chapter-cta{padding:50px 0}.chapter-cta-inner{display:block}.chapter-cta h2{font-size:39px;letter-spacing:-1.8px}
 .chapter-cta .button{margin-top:30px;font-size:10px}
 .evidence-thread{grid-template-columns:1fr}.evidence-thread article{padding:25px 0}
 .evidence-thread article+article{border-left:0;border-top:1px solid #c7d0bc;padding-left:0}
 .field-note{display:block;padding-bottom:55px}.field-note a{display:inline-block;margin-top:20px}
}
/* Text keeps its own space at every breakpoint, including narrow capture views. */
:is(.manifesto h2,.section-heading,.workflow h2,.outcomes h2,.trust-top h2,.chapter-index h2,.closing h2){letter-spacing:-.035em;line-height:1.14}
.closing{isolation:isolate}
/* Captions occupy rows outside each illustration, including wrapped phone copy. */
.network-art{display:grid;grid-template-rows:auto clamp(290px,33vw,470px) auto;row-gap:18px;aspect-ratio:auto}
.network-heading{padding-bottom:0}
.street-model{position:relative;inset:auto;min-width:0;min-height:0;overflow:hidden}
.network-caption{position:static;margin:0 24px 24px}
.outcome-study figcaption{padding-top:20px}
.closing-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
.closing-copy{min-width:0;z-index:auto}
.closing-city{overflow:hidden}
@media(max-width:760px){.closing-inner{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.network-art{grid-template-rows:auto 310px auto}.network-caption{margin:0 20px 20px}}

/* The public homepage follows the approved complete desktop and phone composition. */
.platform-home{background:#f6f7fb;color:#000b2d}
.platform-home .homepage-content{max-width:1440px;margin-inline:auto}
.platform-home .site-header{height:auto;min-height:100px;border:0;background:#f6f7fb}
.platform-home .site-header:after{display:none}
.platform-home .nav{width:calc(100% - 96px);max-width:1344px;min-height:100px;display:flex;gap:28px;border-bottom:1px solid #bec9df}
/* The header names the product the way the application does: the small Sofia
   mark, then POLYCITY as one word in the page's own letters, CITY in the brand
   colours. The only space in the lockup is the mark's own margin; a gap inside
   the word would read "POLY CITY". */
.platform-home .brand-lockup{gap:0;color:#000b2d;text-decoration:none;white-space:nowrap}
.platform-home .brand-mark{display:block;width:34px;height:34px;margin-right:11px;flex:0 0 auto}
.platform-home .brand-word{font:700 15px/1 Manrope,Arial,sans-serif;letter-spacing:.16em}
.platform-home .brand-word span{background:linear-gradient(90deg,#2456a8,#7b3fa0,#c23d7c);-webkit-background-clip:text;background-clip:text;color:transparent}
.platform-home .nav-links{gap:28px;font-size:13px}
.platform-home .nav .nav-sign-in{font-size:12px;font-weight:750;border:0;border-bottom:2px solid #000b2d;border-radius:0;padding:10px 0;gap:12px;white-space:nowrap;background:transparent}
.platform-home h1,.platform-home h2,.platform-home h3{font-family:Manrope,Arial,sans-serif;font-style:normal;font-weight:750;margin:0;color:inherit}
.platform-home h1{font-size:clamp(60px,6.65vw,90px);line-height:1.06;letter-spacing:-.04em}
.platform-home h2{font-size:clamp(42px,4.55vw,60px);line-height:1.1;letter-spacing:-.032em}
.platform-home h3{font-size:27px;line-height:1.18;letter-spacing:-.024em}
.platform-home p{margin:0}
.platform-home .eyebrow{display:block;font-size:11px;letter-spacing:1px;margin:0 0 25px}
.platform-home .eyebrow:before{display:none}
.platform-home .hero-copy p,.platform-home .copy{font-size:16px;line-height:1.75;color:#45536f}
.platform-home .primary{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:#000b2d;color:#fff;padding:16px 20px;font-size:12px;font-weight:750;margin-top:23px;min-height:48px}
.platform-home .primary:hover{background:#57039b}
.platform-home .text-link{display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid currentColor;padding-bottom:5px;font-size:12px;font-weight:750;margin:0;line-height:1.6}
.platform-home a:focus-visible,.platform-home summary:focus-visible{outline:2px solid #049dd6;outline-offset:5px}
/* One city for the whole page. The stage is fixed to the screen and drawn
   straight on the page's paper, with no sky and no frame; the screens of words
   scroll over it. The navy wash sits under the stage, over the whole screen,
   and comes up as the city turns into numbers at the end. */
.one-city .homepage-content{max-width:none;margin:0}
.one-city .city-scroll-section{position:fixed;inset:0;z-index:1;pointer-events:none}
.one-city .hero-scroll-frame{position:absolute;inset:0;height:auto;margin:0;padding:0}
.platform-home .model-stage{position:relative;width:100%;height:100%;min-width:0;overflow:hidden;background:none}
.platform-home .model-stage canvas{display:block;position:static;width:100%;height:100%;pointer-events:none;touch-action:pan-y}
.platform-home [data-story-stage=hero]{height:100%}
.platform-home [data-story-stage=hero] canvas{position:relative;z-index:1}
.platform-home .hero-wash{position:fixed;inset:0;z-index:0;opacity:0;pointer-events:none;background:radial-gradient(60% 55% at 50% 40%,#17347a 0%,#000b2d 100%)}
.platform-home .model-stage[data-render-state=ready] .story-loading{display:none}
.platform-home .model-stage .story-loading{position:absolute;left:48px;top:120px;font-size:12px;color:#52607d}
.platform-home .model-stage[data-render-state=error] .story-loading,.platform-home .model-stage[data-render-state=recovering] .story-loading{background:#edf1fa;color:#000b2d;padding:18px}
/* Pins mark places in the city as their rows are read. Each one is put on
   screen by the scene, where its place in the city lands. */
.one-city .pins{position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.one-city .pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:750;color:#000b2d;white-space:nowrap;opacity:0;transform:translate(-7px,-50%);transition:opacity .4s}
.one-city .pin[data-shown]{opacity:1}
.one-city .pin i{width:14px;height:14px;border-radius:50%;background:#fd4b08;box-shadow:0 0 0 5px rgba(253,75,8,.25);flex-shrink:0}
.one-city .pin span{background:#000b2d;color:#fff;padding:8px 12px;border-radius:2px}
/* The header floats over the city. On the navy end its words go white. */
.one-city .site-header{position:fixed;top:0;left:0;right:0;z-index:5;background:transparent;transition:color .4s}
/* Words scrolling up past the header fade out under a soft band rather than
   running over the menu: paper by day, navy whenever the header's words are
   white. The two bands cross-fade with the words' colour. */
.one-city .site-header:before,.one-city .site-header:after{content:'';display:block;position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);z-index:-1;pointer-events:none;transition:opacity .4s}
.one-city .site-header:before{background:linear-gradient(180deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.9) 62%,rgba(246,247,251,0) 100%)}
.one-city .site-header:after{opacity:0;background:linear-gradient(180deg,rgba(0,11,45,.97) 0,rgba(0,11,45,.9) 62%,rgba(0,11,45,0) 100%)}
.one-city[data-stage-ink=light] .site-header:before{opacity:0}
.one-city[data-stage-ink=light] .site-header:after{opacity:1}
/* The header runs the full width, so the logo stands on the same left edge
   as the words below it and Sign in on the same right edge as the footer. */
.one-city .nav{border-bottom:0;max-width:none}
/* The mark's drawing starts a little inside its own square. */
.one-city .brand{margin-left:-1px}
.one-city .site-header:has(.mobile-menu[open]){background:#f6f7fb;color:#000b2d}
.one-city[data-stage-ink=light] .site-header{color:#fff}
.one-city[data-stage-ink=light] .nav-links a,.one-city[data-stage-ink=light] .nav .nav-sign-in,.one-city[data-stage-ink=light] .mobile-menu summary{color:#fff}
.one-city[data-stage-ink=light] .nav .nav-sign-in{border-bottom-color:#fff}
/* Ask for access is an outlined navy button; over a dark stage it would be
   navy on navy, so it takes the stage's own light ink. */
.one-city[data-stage-ink=light] .nav>.button{color:#fff;border-color:#ffffff66;background:transparent}
.one-city[data-stage-ink=light] .nav>.button:hover{background:#ffffff1f}
/* The open menu covers the stage in daylight, so the button goes back to navy. */
.one-city[data-stage-ink=light] .site-header:has(.mobile-menu[open]) .nav>.button{color:#000b2d;border-color:#a2adc8}
/* On the navy end the word goes white and CITY takes the bright run of brand
   colours, as the application's own navy footer does; the mark swaps for its
   lifted-colour copy. Both give way again while the phone menu lies open on
   paper. */
.brand .brand-mark-light{display:none}
.one-city[data-stage-ink=light] .brand-lockup{color:#fff}
.one-city[data-stage-ink=light] .brand-word span{background-image:linear-gradient(90deg,#0ad6ed,#3f6bff,#9a4dff,#d63aa4,#fd4b08)}
.one-city[data-stage-ink=light] .brand .brand-mark{display:none}
.one-city[data-stage-ink=light] .brand .brand-mark-light{display:block}
.one-city .site-header:has(.mobile-menu[open]) .brand-lockup{color:#000b2d}
.one-city .site-header:has(.mobile-menu[open]) .brand-word span{background-image:linear-gradient(90deg,#2456a8,#7b3fa0,#c23d7c)}
.one-city .site-header:has(.mobile-menu[open]) .brand .brand-mark{display:block}
.one-city .site-header:has(.mobile-menu[open]) .brand .brand-mark-light{display:none}
/* Five screens of words, each a screen tall, standing on the city with a
   breath of paper behind the words and never a box. A tall screen holds its
   words still while its part of the scroll runs. */
.one-city .screen{position:relative;z-index:2;min-height:100svh;padding:0;margin:0;background:none;overflow:visible;pointer-events:none}
.one-city .screen>*{pointer-events:auto}
.one-city .screen:before{content:'';position:absolute;inset:0;opacity:1;pointer-events:none}
.one-city .screen-words{position:relative;min-height:100svh;padding:100px 48px 48px;display:flex;flex-direction:column}
/* How many screens of scrolling each tall section takes is the scene's pace
   table, set on the section as --screens. */
.one-city .screen.tall{min-height:calc(var(--screens,3)*100svh)}
.one-city .screen.tall .screen-words{position:sticky;top:0;height:100svh;min-height:0}
.one-city .screen.tall:before{position:sticky;top:0;display:block;height:100svh;margin-bottom:-100svh}
.one-city .screen.hero:before{background:linear-gradient(0deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.85) 30%,rgba(246,247,251,0) 62%)}
.one-city .screen.proposal:before{background:linear-gradient(90deg,rgba(246,247,251,.96) 0,rgba(246,247,251,.9) 26%,rgba(246,247,251,0) 52%)}
.one-city .screen.outcomes:before,.one-city .screen.optimise:before{background:linear-gradient(270deg,rgba(246,247,251,.92) 0,rgba(246,247,251,.7) 18%,rgba(246,247,251,0) 38%),linear-gradient(0deg,rgba(246,247,251,.8) 0,rgba(246,247,251,.3) 22%,rgba(246,247,251,0) 40%)}
.one-city .screen.comparison:before{background:linear-gradient(180deg,rgba(246,247,251,.95) 0,rgba(246,247,251,0) 34%)}
.one-city .screen.closing{color:#fff}
/* The number city's outlines are as bright as the words, so the corner the
   words stand in is held dark and the city keeps the rest of the screen. */
.one-city .screen.closing:before{background:radial-gradient(125% 95% at 0 100%,rgba(0,11,45,.95) 0,rgba(0,11,45,.9) 48%,rgba(0,11,45,0) 84%),linear-gradient(0deg,rgba(0,11,45,.92) 0,rgba(0,11,45,0) 24%)}
.one-city .screen.hero .screen-words{justify-content:flex-end}
.one-city .hero-copy{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:end}
.one-city h1{font-size:clamp(60px,8.4vw,150px);line-height:.98;letter-spacing:-.04em}
.one-city .screen h2{font-size:clamp(42px,5.2vw,92px);line-height:.98;letter-spacing:-.04em}
.one-city .hero-copy .primary{margin-top:22px}
.one-city .screen.proposal .screen-words{justify-content:center}
.one-city .screen.proposal h2,.one-city .screen.proposal .copy,.one-city .screen.proposal .changes{max-width:640px}
.one-city .screen.proposal .copy{margin-top:26px;max-width:520px}
.one-city .changes{display:flex;flex-direction:column;margin-top:30px;max-width:520px}
.one-city .changes>div{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid #b9c4da;font-size:15px;line-height:1.6;color:#52607d}
.one-city .changes span{text-align:right}
.platform-home .changes>div[data-camera-place]{transition:opacity .5s,border-top-color .5s,color .5s}
.platform-home .changes>div[data-camera-place][data-arrived]:not([data-current]){opacity:.7}
.platform-home .changes>div[data-camera-place][data-current]{color:#000b2d;font-weight:750;border-top:2px solid #000b2d}
.one-city .screen.outcomes .screen-words,.one-city .screen.optimise .screen-words{justify-content:flex-end}
.one-city .screen.comparison .screen-words{justify-content:space-between;padding-top:150px}
.one-city .three{display:flex;gap:60px;margin-top:40px}
.one-city .three>div{flex:1;border-top:2px solid #000b2d;padding-top:14px;font-size:15px;line-height:1.6;color:#45536f}
.one-city .three strong{display:block;font-size:20px;color:#000b2d;margin-bottom:4px;font-weight:750}
.one-city .screen.closing .screen-words{justify-content:flex-end}
.one-city .closing-copy{display:block;padding-bottom:60px;max-width:none;z-index:auto}
.one-city .closing .eyebrow{color:#dbe3f7;font-size:11px;letter-spacing:1px;margin-bottom:25px}
.one-city .screen.closing h2{color:#fff;max-width:none;text-shadow:0 0 28px rgba(0,11,45,.85)}
.one-city .closing .primary{background:#febe11;color:#000b2d;margin-top:30px}
.one-city .closing .primary:hover{background:#ffcf4c}
.one-city .homepage-footer{max-width:none;margin:0;font-size:13px;line-height:1.7;color:#c9d4f0}
/* Somebody who asked for less movement is handed a still city and words on
   plain navy at the end, with nothing turning into anything. */
[data-motion=still] .one-city .screen.closing:before{background:#000b2d}
[data-motion=still] .one-city .pin{transition:none}
/* Words arrive on the same clock as the camera: a heading a line at a time out
   of its own mask, then what follows it, each once. Nothing here is hidden
   unless page-motion.js is running and the reader wants the movement. */
/* A heading cut into lines stacks them whatever the motion flag says, so a
   heading never reads as one run-on line. */
.platform-home .line-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
[data-motion=on] .platform-home .line-body{display:block;transform:translateY(108%);transition:transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--line-index,0)*.11s)}
[data-motion=on] .platform-home [data-lines][data-arrived] .line-body{transform:none}
[data-motion=on] .platform-home [data-arrive]{opacity:0;transform:translateY(24px);transition:opacity .66s cubic-bezier(.22,.61,.36,1),transform .66s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--arrive-index,0)*.2s)}
[data-motion=on] .platform-home [data-arrive][data-arrived]{opacity:1;transform:none}
.platform-home .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1100px){
 .platform-home .nav{gap:20px}.platform-home .nav-links{gap:20px;font-size:12px}
}
@media(max-width:1000px){
 .platform-home .nav-links{display:none}.platform-home .nav>.button{margin-left:auto}
 .platform-home .mobile-menu{display:block}.platform-home .nav{min-height:86px}
 /* The open menu takes its own row under the header, as on every other page;
    a row of flex items squeezed it into a box beside the name. */
 .platform-home .nav{display:grid;row-gap:0}.platform-home .mobile-menu[open]{display:contents}
 .one-city .hero-copy{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}
 .one-city h1{font-size:clamp(48px,8.4vw,90px)}
 .platform-home .hero-copy p{font-size:14px}
 .one-city .three{gap:30px}
}
@media(max-width:760px){
 .platform-home .nav{width:calc(100% - 46px);column-gap:21px}
 .one-city .nav{width:calc(100% - 40px)}
 .platform-home .site-header{min-height:86px}
 .platform-home .brand-mark{width:30px;height:30px;margin-right:10px}.platform-home .brand-word{font-size:13px}
 .platform-home .nav .nav-sign-in{font-size:11px;min-height:44px}
 .one-city .screen-words{padding:86px 20px 30px}
 .one-city .hero-copy,.one-city .closing-copy{display:block}
 .one-city h1{font-size:clamp(40px,13.8vw,64px);line-height:1.02;letter-spacing:-.04em}
 .platform-home .eyebrow{font-size:10px;margin-bottom:14px}
 .platform-home .hero-copy p{font-size:14px;line-height:1.75;margin-top:14px;max-width:520px}
 .platform-home .primary{font-size:12px;padding:13px 16px;margin-top:16px}
 .one-city .screen h2{font-size:clamp(34px,10.3vw,44px);line-height:1.02;letter-spacing:-.04em}
 .platform-home .copy{font-size:14px;line-height:1.75}
 .one-city .screen.proposal .screen-words{justify-content:flex-end}
 .one-city .screen.proposal:before{background:linear-gradient(0deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.85) 30%,rgba(246,247,251,0) 62%)}
 .one-city .screen.proposal .copy{display:none}
 .one-city .changes{margin-top:18px;max-width:none}
 .one-city .changes>div{font-size:12px;padding:11px 0;gap:12px}
 .one-city .screen.outcomes:before,.one-city .screen.optimise:before{background:linear-gradient(0deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.85) 30%,rgba(246,247,251,0) 62%)}
 .one-city .screen.comparison .screen-words{padding-top:86px}
 .one-city .screen.comparison:before{background:linear-gradient(180deg,rgba(246,247,251,.96) 0,rgba(246,247,251,0) 42%)}
 .one-city .three{gap:16px;margin-top:24px}
 .one-city .three>div{font-size:10px;padding-top:8px}
 .one-city .three strong{font-size:13px}
 .one-city .pin{font-size:11px;gap:7px}.one-city .pin i{width:10px;height:10px}.one-city .pin span{padding:6px 9px}
 .one-city .closing-copy{padding-bottom:30px}
 .one-city .homepage-footer{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .platform-home .changes>div[data-camera-place],.one-city .site-header,.one-city .pin{transition:none}
}

.one-city .closing .copy{color:#c9d4f0;max-width:520px;margin-top:22px}
/* Ask for access is one screen: the closing of the other pages, with the
   page's heading in it, over the finished city at dusk. Its heading wears the
   closing's white words at the size of every page's screen headings. */
.access-page .screen.closing h1{font-size:clamp(42px,5.2vw,92px);line-height:.98;letter-spacing:-.04em;color:#fff;max-width:none;text-shadow:0 0 28px rgba(0,11,45,.85)}
@media(max-width:760px){
 .access-page .screen.closing h1{font-size:clamp(34px,10.3vw,44px);line-height:1.02}
 .access-page .closing .copy{margin-top:14px}
}
/* Somebody who asked for less movement keeps the city at dusk in sight, with
   the night only behind the words, as the moving page does. */
[data-motion=still] .access-page .screen.closing:before{background:radial-gradient(125% 95% at 0 100%,rgba(0,11,45,.95) 0,rgba(0,11,45,.9) 48%,rgba(0,11,45,0) 84%),linear-gradient(0deg,rgba(0,11,45,.92) 0,rgba(0,11,45,0) 24%)}
@media(prefers-reduced-motion:reduce){
 /* The still page keeps the city's frame filling the screen, as the moving
    one does, so the city is framed whole beside or above the words. */
 .access-page .hero-scroll-frame{position:absolute!important;inset:0}
}

/* One header on every page: a slim band, 64 pixels and 60 on a phone, the
   logo 48 pixels from the left edge and Ask for access 48 from the right, the
   small mark and POLYCITY in the same letters. Only the band's colour follows
   the page under it. It comes last, so it settles every page's older rules. */
:is(.platform-home,.guide-page) .site-header{height:auto;min-height:64px;border-bottom:0}
:is(.platform-home,.guide-page) .nav{width:calc(100% - 96px);max-width:none;height:auto;min-height:64px;display:flex;align-items:center;gap:28px}
:is(.platform-home,.guide-page) .brand-lockup{gap:0;text-decoration:none;white-space:nowrap}
:is(.platform-home,.guide-page) .site-header .brand-mark{width:34px;height:34px;margin-right:11px;flex:0 0 auto}
:is(.platform-home,.guide-page) .site-header .brand-word{font:700 15px/1 Manrope,Arial,sans-serif;letter-spacing:.16em}
.guide-page .site-header .brand-word span{background:linear-gradient(90deg,#2456a8,#7b3fa0,#c23d7c);-webkit-background-clip:text;background-clip:text;color:transparent}
:is(.platform-home,.guide-page) .nav-links{gap:28px;font-size:13px}
:is(.platform-home,.guide-page) .nav>.button{min-height:40px}
@media(max-width:1100px){
 :is(.platform-home,.guide-page) .nav{gap:20px}:is(.platform-home,.guide-page) .nav-links{gap:20px;font-size:12px}
}
@media(max-width:1000px){
 :is(.platform-home,.guide-page) .site-header{min-height:60px}
 :is(.platform-home,.guide-page) .nav{display:grid;grid-template-rows:60px;min-height:60px;row-gap:0}
}
@media(max-width:760px){
 :is(.platform-home,.guide-page) .nav{width:calc(100% - 40px);column-gap:21px}
 :is(.platform-home,.guide-page) .site-header .brand-mark{width:30px;height:30px;margin-right:10px}
 :is(.platform-home,.guide-page) .site-header .brand-word{font-size:13px}
 :is(.platform-home,.guide-page) .nav>.button{min-height:37px}
}