@font-face{font-family:"GT Cinetype";src:url(/assets/fonts/gt-cinetype.woff2) format("woff2");font-display:swap;font-weight:400}
:root{--oxide:#6E0902;--black:#0C0C0C;--light:#F7F7F7;--grey:#AFAFAF;--dgrey:#525252;--white:#FFFFFF;--panel:#161616;--rule:#333333;--max:1280px;--gut:clamp(20px,4vw,48px);
--head:"GT Cinetype",Arial,Helvetica,sans-serif;--body:"GT Cinetype",Arial,Helvetica,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--light);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--black);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.brand img{height:14px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{text-decoration:none;font-size:14px;letter-spacing:.04em;color:var(--grey)}
.nav a:hover,.nav a[aria-current=page]{color:var(--light)}
.btn{display:inline-block;text-decoration:none;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:14px 22px;border:1px solid var(--oxide);background:var(--oxide);color:var(--white);cursor:pointer;transition:background .15s}
.btn:hover{background:#8a0c03}
.btn.ghost{background:transparent;border-color:var(--grey);color:var(--light)}
.btn.ghost:hover{border-color:var(--light)}
.light .btn.ghost{border-color:var(--dgrey);color:var(--black)}
.nav .btn{color:var(--white);padding:10px 16px;font-size:12px}
.menu-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--light);padding:8px 12px;font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
@media (max-width:980px){
 .menu-toggle{display:block}
 .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--black);flex-direction:column;align-items:flex-start;padding:16px var(--gut) 24px;border-bottom:1px solid var(--rule);gap:16px}
 .nav.open{display:flex}
 .nav a{font-size:17px}
}
/* sections */
section{padding:clamp(64px,9vw,128px) 0}
.light{background:var(--light);color:var(--black)}
.oxide{background:var(--oxide);color:var(--light)}
.panel{background:var(--panel)}
.eyebrow{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:22px}
.light .eyebrow{color:var(--oxide)}
.oxide .eyebrow{color:var(--light)}
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:-.015em;line-height:1.05}
h1{font-size:clamp(44px,7vw,96px)}
h2{font-size:clamp(34px,4.6vw,64px)}
h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--grey);max-width:760px;margin-top:24px}
.light .lede{color:#333333}
.oxide .lede{color:var(--light)}
p+p{margin-top:14px}
.muted{color:var(--grey)}
.light .muted{color:var(--dgrey)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
/* hero */
.hero{position:relative;min-height:calc(100vh - 68px);display:flex;align-items:flex-end;padding:0;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.45)}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,12,.94) 0%,rgba(12,12,12,.8) 45%,rgba(12,12,12,.2) 100%)}
.hero .wrap{position:relative;padding-top:120px;padding-bottom:clamp(56px,8vw,104px);width:100%}
.hero h1{max-width:900px}
.page-hero{padding:clamp(72px,10vw,140px) 0 clamp(48px,6vw,80px);border-bottom:1px solid var(--rule)}
/* grids */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.split.top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.card{background:var(--panel);border-top:2px solid var(--oxide);padding:26px 26px 28px}
.light .card{background:var(--white);border:1px solid var(--grey);border-top:2px solid var(--oxide)}
.card h3{margin-bottom:10px}
.card .code{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.light .card .code{color:var(--dgrey)}
.card.solid{background:var(--oxide);border-color:var(--oxide)}
.card.solid .code,.card.solid p{color:var(--light)}
.card p{color:var(--grey);font-size:16px}
.light .card p{color:var(--dgrey)}
a.card{text-decoration:none;display:block;transition:transform .15s}
a.card:hover{transform:translateY(-3px)}
.cellcard img{aspect-ratio:16/10;object-fit:cover;width:100%;margin:-26px -26px 20px;width:calc(100% + 52px);max-width:none}
.price{margin-top:14px;font-weight:600;color:var(--light)}
.light .price{color:var(--black)}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px}
.stats>div{border-top:1px solid var(--grey);padding:22px 24px 0 0}
.oxide .stats>div{border-top-color:var(--light)}
.stats b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.02em;color:var(--light)}
.light .stats b{color:var(--oxide)}
.stats span{display:block;margin-top:12px;font-size:15px;color:var(--grey)}
.light .stats span{color:var(--dgrey)}
.oxide .stats span{color:var(--light)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr);row-gap:32px}}
/* numbered list */
.nlist{list-style:none;margin-top:28px}
.nlist li{display:flex;gap:22px;border-top:1px solid var(--rule);padding:18px 0}
.light .nlist li{border-top-color:var(--grey)}
.nlist li:last-child{border-bottom:1px solid var(--rule)}
.light .nlist li:last-child{border-bottom-color:var(--grey)}
.nlist .n{font-family:var(--head);font-size:22px;color:var(--oxide);min-width:34px}
.oxide-on-dark .nlist .n,.nlist.dark .n{color:var(--grey)}
.nlist strong{color:var(--light);font-weight:600}
.light .nlist strong{color:var(--black)}
/* tables */
.table-wrap{overflow-x:auto;margin-top:32px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding:12px 14px;border-bottom:1px solid var(--grey)}
td{padding:14px;border-bottom:1px solid var(--rule);vertical-align:top}
.light td{border-bottom-color:var(--grey)}
.light th{color:var(--dgrey);border-bottom-color:var(--black)}
td.hl{color:var(--light);font-weight:600}
.light td.hl{color:var(--oxide)}
.table-title{margin-top:56px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.light .table-title{color:var(--oxide)}
/* media */
.media{width:100%;object-fit:cover}
.media.r169{aspect-ratio:16/9}.media.r43{aspect-ratio:4/3}.media.r45{aspect-ratio:4/5}
.caption{font-size:13px;color:var(--grey);margin-top:10px}
/* product */
.product{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:900px){.product{grid-template-columns:1fr}}
.pstats{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:36px}
.pstats>div{border-top:1px solid var(--grey);padding-top:14px}
.pstats b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.05;color:var(--oxide)}
.dark .pstats b,section:not(.light) .pstats b{color:var(--light)}
.pstats span{display:block;margin-top:6px;font-size:15px;color:var(--dgrey)}
section:not(.light) .pstats span{color:var(--grey)}
/* world */
.world{display:grid;grid-template-columns:1fr 1.2fr;min-height:620px}
.world .copy{padding:clamp(40px,6vw,88px) var(--gut);display:flex;flex-direction:column;justify-content:center;background:var(--black)}
.world img{width:100%;height:100%;object-fit:cover}
.world.flip{grid-template-columns:1.2fr 1fr}.world.flip .copy{order:2}
@media (max-width:900px){.world,.world.flip{grid-template-columns:1fr}.world.flip .copy{order:0}.world img{aspect-ratio:4/3}}
/* team */
.person{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;margin-top:40px}
.person img{width:280px;height:280px;object-fit:cover;filter:grayscale(1)}
@media (max-width:640px){.person{grid-template-columns:1fr}}
/* forms */
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){form .row{grid-template-columns:1fr}}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.light label{color:var(--dgrey)}
.field{margin-bottom:18px}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;background:var(--panel);border:1px solid var(--rule);color:var(--light);font:16px var(--body);padding:13px 14px;border-radius:0}
.light input[type=text],.light input[type=email],.light input[type=tel],.light select,.light textarea{background:var(--white);border-color:var(--grey);color:var(--black)}
textarea{min-height:130px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);padding:10px 14px;margin:0;cursor:pointer;color:var(--light);letter-spacing:.08em}
.light .chips label{border-color:var(--grey);color:var(--black)}
.chips input{accent-color:var(--oxide)}
.form-status{margin-top:16px;font-size:15px}
.form-status.ok{border:1px solid var(--oxide);padding:18px}
.form-status.err{color:var(--light);background:var(--oxide);padding:12px 16px}
/* faq */
details{border-top:1px solid var(--grey);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--grey)}
summary{cursor:pointer;font-family:var(--head);font-size:21px;list-style:none}
summary::after{content:"+";float:right;color:var(--oxide)}
details[open] summary::after{content:"\2212"}
details p{margin-top:12px;color:var(--dgrey);max-width:820px}
/* footer */
.site-foot{border-top:1px solid var(--rule);padding:56px 0 40px;font-size:14px;color:var(--grey)}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px}
.site-foot a{text-decoration:none;display:block;margin-bottom:8px}
.site-foot a:hover{color:var(--light)}
.site-foot h4{font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--light);margin-bottom:14px}
.site-foot .legal{margin-top:48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media (max-width:760px){.site-foot .cols{grid-template-columns:1fr 1fr}}
.cta-band{text-align:left}
.cta-band h2{max-width:900px}
.spacer{height:48px}
.small{font-size:14px}
.ext::after{content:" \2197"}
h3.sub{font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--grey);margin:40px 0 4px}
.light h3.sub{color:var(--dgrey)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* interactive */
.calc-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px;padding:18px 20px;background:var(--white);border:1px solid var(--grey)}
.calc-ctl label{margin:0}
.calc-ctl input[type=range]{flex:1;min-width:200px;accent-color:var(--oxide)}
.calc-ctl output{font-family:var(--head);font-size:22px;color:var(--oxide);min-width:260px}
.opts{display:grid;gap:10px;margin-top:12px}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border:1px solid var(--rule);padding:14px 16px;margin:0;cursor:pointer;text-transform:none;letter-spacing:0;font-size:15px;font-weight:400;color:var(--grey)}
.opt b{display:block;color:var(--light);font-weight:600;font-size:16px}
.opt em{font-style:normal;color:var(--light);font-weight:600}
.opt input{accent-color:var(--oxide);width:18px;height:18px}
.opt:has(input:checked){border-color:var(--oxide);background:rgba(110,9,2,.25)}
.totals{display:flex;flex-wrap:wrap;gap:16px 48px;margin:24px 0 20px;padding-top:18px;border-top:1px solid var(--grey)}
.totals span{display:block;font-size:14px;color:var(--grey)}
.light .totals span{color:var(--dgrey)}
.totals b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(28px,3vw,40px);color:var(--light)}
.light .totals b{color:var(--oxide)}
.sizes .size{display:block;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-weight:400;background:var(--white);border:1px solid var(--grey);border-top:2px solid var(--grey);padding:24px;color:var(--black);transition:border-color .15s}
.sizes .size input{position:absolute;opacity:0;pointer-events:none}
.sizes .size .code{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dgrey);margin-bottom:8px}
.sizes .size h3{margin-bottom:8px}
.sizes .size p{color:var(--dgrey);font-size:15px}
.sizes .size b{display:block;margin-top:14px;font-family:var(--head);font-weight:400;font-size:30px;color:var(--oxide)}
.sizes .size:has(input:checked){border-color:var(--oxide);border-top-color:var(--oxide);box-shadow:inset 0 0 0 1px var(--oxide)}
.qty{display:flex;align-items:center;gap:0;margin-top:4px}
.qty button{width:44px;height:44px;border:1px solid var(--grey);background:var(--white);font-size:22px;cursor:pointer;color:var(--black)}
.qty output{min-width:56px;text-align:center;font-family:var(--head);font-size:28px;color:var(--oxide)}
a.card.cellcard.active{outline:2px solid var(--oxide)}
/* compact nav */
.site-head .wrap{height:58px}
.brand img{height:12px}
.nav{gap:22px}
.nav a,.dd-btn{font-family:var(--body);font-size:13px;letter-spacing:.02em;color:var(--grey);text-decoration:none;background:none;border:0;cursor:pointer;padding:0}
.nav a:hover,.nav a[aria-current=page],.dd-btn:hover,.dd.cur .dd-btn{color:var(--light)}
.nav .nav-cta{font-size:11px;padding:8px 14px;letter-spacing:.12em;color:var(--white)}
.dd{position:relative}
.dd-btn::after{content:"";display:inline-block;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 0 3px 7px}
.dd-menu{display:none;position:absolute;top:calc(100% + 18px);left:-16px;min-width:190px;background:var(--black);border:1px solid var(--rule);border-top:2px solid var(--oxide);padding:8px 0}
.dd-menu a{display:block;padding:10px 16px;font-size:13px}
.dd-menu a:hover{background:var(--panel)}
.dd:hover .dd-menu,.dd.open .dd-menu{display:block}
.dd::before{content:"";position:absolute;left:0;right:0;top:100%;height:20px}
@media (max-width:980px){
 .nav{top:58px;gap:2px}
 .nav a,.dd-btn{font-size:16px;padding:10px 0;display:block;width:100%;text-align:left}
 .dd-btn::after{display:none}
 .dd-menu{display:block;position:static;border:0;padding:0 0 0 14px;background:none;min-width:0}
 .dd-menu a{padding:8px 0;font-size:15px}
 .dd-btn{color:var(--light);pointer-events:none}
 .nav .nav-cta{margin-top:12px;width:auto;display:inline-block;padding:10px 16px}
}
.nav a.nav-cta{background:var(--oxide);border:1px solid var(--oxide);color:var(--white)}.nav a.nav-cta:hover{background:#8a0c03}
.oxide-band{background:var(--black);border-top:2px solid var(--oxide)}
.flow{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;align-items:stretch;margin-top:48px}
.flow>div{background:var(--panel);border:1px solid var(--rule);padding:20px 22px}
.flow>div.solid{background:var(--oxide);border-color:var(--oxide)}
.flow b{display:block;font-family:var(--head);font-weight:400;font-size:21px;color:var(--light);margin-bottom:6px}
.flow span{font-size:15px;color:var(--grey)}
.flow .solid span{color:var(--light)}
.flow i{align-self:center;height:1px;background:var(--dgrey);position:relative}
.flow i::after{content:"";position:absolute;right:0;top:-4px;border-left:7px solid var(--dgrey);border-top:4px solid transparent;border-bottom:4px solid transparent}
@media (max-width:900px){.flow{grid-template-columns:1fr}.flow i{height:20px;width:1px;justify-self:center}.flow i::after{display:none}}
.g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.g5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.g5{grid-template-columns:1fr}}
a.card{text-decoration:none;color:inherit;display:block}
.card.solid,.card.solid h3,.card.solid p,.card.solid .code{color:#F7F7F7}
/* worlds: image behind copy */
.world,.world.flip{display:block;position:relative;min-height:clamp(560px,78vh,820px);overflow:hidden;background:var(--black)}
.world img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto!important;z-index:0}
.world::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,12,12,.88) 0%,rgba(12,12,12,.6) 45%,rgba(12,12,12,.1) 80%)}
.world.flip::after{background:linear-gradient(270deg,rgba(12,12,12,.88) 0%,rgba(12,12,12,.6) 45%,rgba(12,12,12,.1) 80%)}
.world .copy{position:relative;z-index:2;background:none;max-width:680px;min-height:inherit;padding:clamp(48px,7vw,104px) var(--gut)}
.world.flip .copy{margin-left:auto}
@media (max-width:900px){.world::after,.world.flip::after{background:linear-gradient(0deg,rgba(12,12,12,.92) 0%,rgba(12,12,12,.7) 55%,rgba(12,12,12,.25) 100%)}.world .copy,.world.flip .copy{justify-content:flex-end;max-width:none;margin:0}}
@media (max-width:900px){.world .copy,.world.flip .copy{padding-top:clamp(260px,62vw,420px)}.world::after,.world.flip::after{background:linear-gradient(0deg,rgba(12,12,12,.95) 0%,rgba(12,12,12,.8) 50%,rgba(12,12,12,0) 75%)}}
.tiles{gap:24px}
.tile{display:flex;flex-direction:column;background:var(--panel);text-decoration:none;color:inherit;border-top:2px solid var(--oxide);overflow:hidden;transition:transform .25s ease}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.tile>div{padding:22px 24px 26px}
.tile h3{margin-top:6px}.tile p:not(.code){margin-top:8px;color:var(--grey-text,#AFAFAF)}
.tile:hover img{transform:scale(1.04)}
.tile:hover h3{color:#F7F7F7;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tile .code{color:var(--grey);letter-spacing:.2em}
.tile p.what{color:#F7F7F7;font-weight:600;margin-top:4px}
/* homepage: full-screen product panels */
html:has(.slides){scroll-snap-type:y proximity}
.slide{position:relative;height:calc(100svh - 68px);min-height:520px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:clamp(56px,10vh,110px) var(--gut) clamp(40px,8vh,80px);overflow:hidden;scroll-snap-align:start;background:var(--black)}
.slide .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slide::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,12,12,.55) 0%,rgba(12,12,12,0) 35%,rgba(12,12,12,0) 60%,rgba(12,12,12,.55) 100%)}
.slide.light::after{background:linear-gradient(180deg,rgba(247,247,247,.7) 0%,rgba(247,247,247,0) 35%,rgba(12,12,12,0) 65%,rgba(12,12,12,.35) 100%)}
.slide-top,.slide-bottom{position:relative;z-index:2}
.slide h1,.slide h2{font-size:clamp(40px,5vw,64px);line-height:1.05;margin:0;color:#F7F7F7}
.slide-top p{margin-top:12px;font-size:clamp(15px,1.3vw,18px);color:#F7F7F7}
.slide.light h1,.slide.light h2,.slide.light .slide-top p{color:#0C0C0C}
.slide-bottom{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.slide-bottom .btn{min-width:240px;text-align:center}
.slide-bottom .btn.alt{background:#F7F7F7;border-color:#F7F7F7;color:#0C0C0C}
.slide-bottom .btn.alt:hover{background:#FFFFFF}
@media (max-width:640px){.slide{height:calc(100svh - 58px)}.slide-bottom{flex-direction:column;width:100%;gap:12px}.slide-bottom .btn{min-width:0;width:100%}}
.slide::after{background:linear-gradient(180deg,rgba(12,12,12,.7) 0%,rgba(12,12,12,.25) 30%,rgba(12,12,12,0) 50%,rgba(12,12,12,.5) 100%)}
.slide-top p{text-shadow:0 1px 8px rgba(12,12,12,.6)}
.slide.light .slide-top p{text-shadow:none}
.img-hero{position:relative;min-height:calc(78svh - 68px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:0}
.img-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.img-hero .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(12,12,12,.92) 0%,rgba(12,12,12,.6) 45%,rgba(12,12,12,.15) 100%)}
.img-hero .wrap{position:relative;z-index:2;width:100%}
.img-hero .lede{color:#F7F7F7}
/* animated logo */
.brand{display:inline-flex;align-items:center;color:#F7F7F7;line-height:0}
.tf-logo{height:14px;width:auto;display:block;overflow:visible}
.foot-brand{margin-bottom:18px}
@media (max-width:640px){.tf-logo{height:12px}}
.tf-logo .px{transform-box:view-box}
.tf-logo.intro .px{animation:tfPx .6s cubic-bezier(.2,.9,.25,1.25) both;animation-delay:calc(var(--i)*38ms)}
.tf-logo.intro .px:first-child{animation:tfCore .9s cubic-bezier(.2,.8,.2,1) both}
.tf-logo.intro .lt{animation:tfLt .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(420ms + var(--i)*55ms)}
.tf-logo.pulse .px{animation:tfPulse 1.1s ease-in-out both;animation-delay:calc(var(--i)*45ms)}
.tf-logo.pulse .px:first-child{animation:tfSpin 1.1s cubic-bezier(.6,0,.2,1) both}
@keyframes tfPx{0%{opacity:0;transform:scale(0)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes tfCore{0%{opacity:0;transform:scale(.2) rotate(-90deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes tfLt{0%{opacity:0;transform:translateY(30px);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes tfPulse{0%,100%{opacity:1;fill:currentColor}35%{opacity:.25}55%{opacity:1;fill:#8A0C03}}
@keyframes tfSpin{0%{transform:rotate(0)}100%{transform:rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.tf-logo .px,.tf-logo .lt{animation:none!important}}
/* header mark: red sweep */
.tf-mark{height:26px;width:26px;display:block;color:#F7F7F7;overflow:visible}
@media (max-width:640px){.tf-mark{height:22px;width:22px}}
.tf-mark .tf-sweep{transform:translateX(0);transform-box:view-box}
.tf-mark.sweep .tf-sweep{animation:tfSweep 1.9s cubic-bezier(.45,0,.25,1) both}
@keyframes tfSweep{0%{transform:translateX(0)}100%{transform:translateX(190px)}}
@media (prefers-reduced-motion:reduce){.tf-mark .tf-sweep{display:none}}
/* header: word retracts into mark, mark beats red */
.tf-logo.hb{height:14px;width:auto}
.tf-logo.hb .ico{transform-box:view-box;transform-origin:44.85px 44.85px}
.tf-logo.hb .lt{transform-box:view-box;transform-origin:44.85px 44.85px}
.tf-logo.hb.retract .lt{animation:tfRetract .7s cubic-bezier(.6,0,.3,1) both;animation-delay:calc(var(--i)*55ms)}
.tf-logo.hb.done .lt{opacity:0;transform:translateX(var(--dx)) scale(.2)}
.tf-logo.hb.beat .ico{animation:tfBeat 1.15s ease-in-out 3 both}
.tf-logo.hb.beat1 .ico{animation:tfBeat 1.15s ease-in-out 1 both}
@keyframes tfRetract{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(var(--dx)) scale(.2)}}
@keyframes tfBeat{0%{transform:scale(1);fill:#F7F7F7}12%{transform:scale(1.22);fill:#8A0C03}24%{transform:scale(1);fill:#F7F7F7}36%{transform:scale(1.14);fill:#8A0C03}55%{transform:scale(1);fill:#F7F7F7}100%{transform:scale(1);fill:#F7F7F7}}
@media (prefers-reduced-motion:reduce){.tf-logo.hb .lt,.tf-logo.hb .ico{animation:none!important}}
.tf-logo.hb .lt{transform-box:fill-box;transform-origin:center}
/* v3: logo + smaller word, three red flashes */
.tf-logo.hb{height:20px}
@media (max-width:640px){.tf-logo.hb{height:17px}}
.tf-logo.hb .word{transform-box:view-box;transform-origin:150px 44.85px;transform:scale(.62)}
.tf-logo.hb.flash .ico{animation:tfFlash .5s ease-in-out 3 both}
@keyframes tfFlash{0%,100%{fill:#F7F7F7}45%,60%{fill:#8A0C03}}
/* v4: word retracts into mark, then digital flicker in deep red */
.tf-logo.hb .lt{animation:none;opacity:1;transform:none}
.tf-logo.hb.retract .lt{animation:tfRetract2 .65s cubic-bezier(.6,0,.3,1) both!important;animation-delay:calc(var(--i)*50ms)!important}
.tf-logo.hb.done .lt{opacity:0!important;transform:translateX(var(--dx)) scale(.15)!important}
@keyframes tfRetract2{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(var(--dx)) scale(.15)}}
.tf-logo.hb.flash .ico{animation:none}
.tf-logo.hb.glitch .px{animation:tfGlitch 1.1s steps(1,end) both;animation-delay:var(--r)}
.tf-logo.hb.glitch .ico{animation:tfShake 1.1s linear both}
@keyframes tfGlitch{0%{fill:#F7F7F7;opacity:1}8%{fill:#8A0C03}14%{opacity:.15}20%{opacity:1;fill:#8A0C03}30%{fill:#F7F7F7}38%{fill:#8A0C03;opacity:.3}46%{opacity:1}56%{fill:#F7F7F7}64%{fill:#8A0C03}74%{opacity:.2}80%{opacity:1;fill:#8A0C03}90%,100%{fill:#F7F7F7;opacity:1}}
@keyframes tfShake{0%,100%{transform:none}12%{transform:translateX(-1.5px)}24%{transform:translateX(1.5px)}36%{transform:none}60%{transform:translateX(1px)}72%{transform:none}}
/* usability pass */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--light);color:var(--black);padding:10px 16px;font:600 14px var(--body);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid #F7F7F7;outline-offset:3px}
.light :focus-visible{outline-color:#0C0C0C}
.brand{padding:12px 0}
.nav > a,.nav .dd-btn{padding:12px 0}
.nav .nav-cta{font-size:13px;padding:11px 18px}
.site-foot a{display:inline-block;padding:6px 0;margin-bottom:2px}
.site-foot .cols > div > a{display:block}
input[type=checkbox],input[type=radio]{width:20px;height:20px}
.table-wrap{-webkit-overflow-scrolling:touch}
@media (max-width:980px){.nav.open a,.nav.open .dd-btn{display:block;min-height:44px;padding:12px 0;font-size:18px}.nav.open .nav-cta{display:inline-block;margin-top:8px}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{scroll-padding-top:68px}
@media (max-width:640px){html{scroll-padding-top:58px}}
@media (max-width:980px){.nav.open .nav-cta{font-size:14px;padding:12px 20px;min-height:0}}
input[type=range]{height:32px}
/* footer: free scrolling once the footer is in view */
.site-foot{scroll-snap-align:end}
html.free-scroll{scroll-snap-type:none!important}
/* footer logo: boot sequence when it scrolls into view, replays on hover */
.foot-brand{position:relative;display:inline-block!important;overflow:hidden;padding:6px 0}
.foot-brand::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;background:linear-gradient(90deg,transparent,rgba(138,12,3,.0) 10%,rgba(138,12,3,.85) 50%,rgba(138,12,3,0) 90%,transparent);mix-blend-mode:screen;opacity:0;pointer-events:none}
.tf-logo.foot .px,.tf-logo.foot .lt{transform-box:fill-box}
.foot-brand.armed .tf-logo.foot .px,.foot-brand.armed .tf-logo.foot .lt{opacity:0}
.foot-brand.boot .tf-logo.foot .px{animation:tfFootPx .9s steps(1,end) both;animation-delay:calc(var(--i)*45ms)}
.foot-brand.boot .tf-logo.foot .lt{animation:tfFootLt .8s steps(1,end) both;animation-delay:calc(700ms + var(--i)*70ms)}
.foot-brand.boot::after{animation:tfFootScan 1.4s cubic-bezier(.6,0,.3,1) .55s both}
@keyframes tfFootPx{0%{opacity:0;fill:#8A0C03}12%{opacity:1;fill:#8A0C03}24%{opacity:.15}36%{opacity:1;fill:#8A0C03}52%{opacity:.4}64%{opacity:1;fill:#8A0C03}80%{opacity:1;fill:currentColor}100%{opacity:1;fill:currentColor}}
@keyframes tfFootLt{0%{opacity:0;fill:#8A0C03;transform:translateX(-6px)}20%{opacity:1;fill:#8A0C03;transform:translateX(3px)}35%{opacity:.2;transform:translateX(0)}50%{opacity:1;fill:#8A0C03}70%{opacity:.6;fill:currentColor}100%{opacity:1;fill:currentColor;transform:none}}
@keyframes tfFootScan{0%{left:-30%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:110%;opacity:0}}
@media (prefers-reduced-motion:reduce){.foot-brand.armed .tf-logo.foot .px,.foot-brand.armed .tf-logo.foot .lt{opacity:1}.foot-brand.boot .tf-logo.foot .px,.foot-brand.boot .tf-logo.foot .lt,.foot-brand.boot::after{animation:none}}
.site-foot .social a{display:flex!important;align-items:center;gap:8px}.site-foot .social svg{flex:none;opacity:.85}

/* Worlds tab (10 Oct 2026): the label is a link to /worlds/, the menu lists the worlds */
.nav .dd-link{padding:12px 0;display:inline-block}
.dd-link::after{content:"";display:inline-block;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 0 3px 7px}
.dd:hover .dd-link,.dd.cur .dd-link,.dd:focus-within .dd-link{color:var(--light)}
.dd:focus-within .dd-menu{display:block}
@media (max-width:980px){.nav .dd-link{display:block;width:100%;padding:10px 0;color:var(--light)}.nav.open .dd-link{padding:12px 0}.dd-link::after{display:none}}

/* 15 Oct 2026: plainer look (James: "less like AI") */
.rv,.rv.in{opacity:1!important;transform:none!important;transition:none!important}
.card{border-top:1px solid var(--rule)}
.light .card{background:var(--white);border:1px solid #D9D9D9}
.card.solid,.light .card.solid{border-color:var(--oxide)}
a.card:hover{transform:none}
a.card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tile{border-top:1px solid var(--rule)}
.wcard{border-top:1px solid var(--rule)!important}
.wcard .eyebrow{text-transform:none;letter-spacing:.02em;font-size:14px}
.wcard:hover .wcard-img img{transform:none}
.tile:hover img{transform:none}
.dd-menu{border-top:1px solid var(--rule)}
.eyebrow{letter-spacing:.08em;font-size:13px}
.card .code,.tile .code,.sizes .size .code{letter-spacing:.06em;font-size:13px;text-transform:none;font-weight:600}
th,.table-title{letter-spacing:.06em}
.btn{letter-spacing:.05em}
.slide .bg,.img-hero .bg{filter:saturate(.72) contrast(1.04)}
.nlist.plain li{display:block}
.nlist .n{font-size:17px;min-width:22px;padding-top:1px}
.label{font-size:15px;font-weight:600;color:var(--grey);margin:0 0 10px}
.light .label{color:var(--dgrey)}
.statement{font-family:var(--head);font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-.01em;color:var(--light)}
.light .statement{color:var(--black)}
dl.rows,ul.rows{list-style:none;margin:0}
.rows>div,.rows>li{border-top:1px solid var(--rule);padding:18px 0}
.rows>div:last-child,.rows>li:last-child{border-bottom:1px solid var(--rule)}
.light .rows>div,.light .rows>li{border-color:#CFCFCF}
.rows dt{font-family:var(--head);font-size:21px;color:var(--light)}
.light .rows dt{color:var(--black)}
.rows dd{margin-top:6px;color:var(--grey)}
.light .rows dd{color:#333333}
.rows.links a{display:grid;grid-template-columns:220px 1fr;gap:24px;text-decoration:none}
.rows.links b{font-family:var(--head);font-weight:400;font-size:21px;color:var(--light)}
.rows.links span{color:var(--grey)}
.rows.links a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:760px){.rows.links a{grid-template-columns:1fr;gap:4px}}

/* 15 Oct 2026: home panel loops */
.slide video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
@media (prefers-reduced-motion:reduce){.slide video.bg{display:none}}

/* 18 Oct 2026: no oxide, light only in motion. The logo and buttons are white on black and black on white, photos
   keep their colour, and the visible spectrum appears only as moving light: the photon in the logo, the line under
   the header and the edge of a button on hover. */
:root{--oxide:#F7F7F7;--s1:#BA93FB;--s2:#65ADFF;--s3:#00C3DF;--s4:#1FC893;--s5:#9FB83C;--s6:#E19B1B;--s7:#FB8371;
--photon:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--s1) 22%,var(--s2) 36%,var(--s3) 50%,var(--s4) 62%,var(--s6) 78%,#FFFFFF 94%,rgba(255,255,255,0) 100%)}
.btn{background:var(--light);border-color:var(--light);color:var(--black);position:relative;overflow:hidden}
.btn:hover{background:var(--white);border-color:var(--white)}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:60%;background:var(--photon);transform:translateX(-120%);pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{animation:tfPhotonRun .7s cubic-bezier(.5,0,.3,1) both}
@keyframes tfPhotonRun{0%{transform:translateX(-120%)}100%{transform:translateX(240%)}}
.btn.ghost{background:transparent;border-color:var(--grey);color:var(--light)}
.btn.ghost:hover{background:transparent;border-color:var(--light)}
.light .btn:not(.ghost){background:var(--black);border-color:var(--black);color:var(--light)}
.light .btn:not(.ghost):hover{background:#000;border-color:#000}
.light .btn.ghost{border-color:var(--dgrey);color:var(--black)}
.nav .btn,.nav .nav-cta,.nav a.nav-cta{background:var(--light);border-color:var(--light);color:var(--black)}
.nav a.nav-cta:hover{background:var(--white);border-color:var(--white)}
.slide-bottom .btn.alt{background:transparent;border-color:#F7F7F7;color:#F7F7F7}
.slide-bottom .btn.alt:hover{background:rgba(247,247,247,.1)}
.oxide{background:var(--black);color:var(--light);border-top:1px solid var(--rule)}
.oxide .eyebrow{color:var(--grey)}.oxide .lede{color:var(--light)}
.oxide .stats>div{border-top-color:var(--grey)}.oxide .stats span{color:var(--grey)}
.oxide-band{border-top:1px solid var(--rule)}
.light .eyebrow{color:var(--dgrey)}
.card.solid,.light .card.solid{background:var(--light);border-color:var(--light)}
.card.solid,.card.solid h3,.card.solid p,.card.solid .code{color:var(--black)}
.light .card.solid{background:var(--black);border-color:var(--black)}
.light .card.solid,.light .card.solid h3,.light .card.solid p,.light .card.solid .code{color:var(--light)}
.light .stats b{color:var(--black)}
.nlist .n{color:var(--grey)}.light .nlist .n{color:var(--dgrey)}
.light td.hl,.light .table-title{color:var(--black)}
.pstats b{color:var(--black)}.dark .pstats b,section:not(.light) .pstats b{color:var(--light)}
.chips input{accent-color:currentColor}
.form-status.ok{border-color:currentColor}
.form-status.err{background:#262626;color:var(--light);border-left:2px solid var(--light)}
summary::after{color:currentColor}
.calc-ctl input[type=range]{accent-color:var(--black)}.calc-ctl output{color:var(--black)}
.opt input{accent-color:var(--light)}
.opt:has(input:checked){border-color:var(--light);background:rgba(247,247,247,.07)}
.light .totals b,.sizes .size b,.qty output{color:var(--black)}
.sizes .size:has(input:checked){border-color:var(--black);border-top-color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
a.card.cellcard.active{outline:2px solid var(--light)}
.flow>div.solid{background:var(--light);border-color:var(--light)}
.flow .solid b,.flow .solid span{color:var(--black)}
/* the line under the header carries a photon across the screen when a page opens */
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--photon) no-repeat;background-size:28% 100%;background-position:-60% 0;pointer-events:none;opacity:0}
.site-head.photon::after{animation:tfHeadPhoton 1.5s cubic-bezier(.55,0,.25,1) both}
@keyframes tfHeadPhoton{0%{background-position:-60% 0;opacity:1}100%{background-position:160% 0;opacity:1}}
/* header logo: the core charges through the spectrum, fires a photon along the wordmark, every letter flashes in its
   light, then the letters jump to light speed into the core */
.tf-logo.hb .word .lt:nth-of-type(1){--c:var(--s1)}.tf-logo.hb .word .lt:nth-of-type(2){--c:var(--s2)}
.tf-logo.hb .word .lt:nth-of-type(3){--c:var(--s2)}.tf-logo.hb .word .lt:nth-of-type(4){--c:var(--s3)}
.tf-logo.hb .word .lt:nth-of-type(5){--c:var(--s4)}.tf-logo.hb .word .lt:nth-of-type(6){--c:var(--s5)}
.tf-logo.hb .word .lt:nth-of-type(7){--c:var(--s6)}.tf-logo.hb .word .lt:nth-of-type(8){--c:var(--s6)}
.tf-logo.hb .word .lt:nth-of-type(9){--c:var(--s7)}
.tf-logo.hb.charge .px{animation:tfCharge .8s linear both;animation-delay:var(--r)}
@keyframes tfCharge{0%{fill:currentColor}14%{fill:var(--s1)}28%{fill:var(--s2)}42%{fill:var(--s3)}56%{fill:var(--s4)}70%{fill:var(--s5)}84%{fill:var(--s6)}100%{fill:#FFFFFF}}
.tf-logo.hb.fire .lt{animation:tfLtLight .55s ease-out both!important;animation-delay:calc((8 - var(--i)) * 42ms)!important}
@keyframes tfLtLight{0%{fill:currentColor}12%{fill:#FFFFFF}30%{fill:var(--c)}100%{fill:currentColor}}
.tf-logo.hb .photon{opacity:0;pointer-events:none}
.tf-logo.hb.fire .photon{animation:tfPhoton .62s cubic-bezier(.55,0,.35,1) both}
@keyframes tfPhoton{0%{opacity:1;transform:translateX(0)}88%{opacity:1}100%{opacity:0;transform:translateX(760px)}}
.tf-logo.hb.retract .lt{animation:tfWarp .6s cubic-bezier(.6,0,.3,1) both!important;animation-delay:calc(var(--i)*45ms)!important}
@keyframes tfWarp{0%{opacity:1;transform:none;fill:currentColor}35%{opacity:1;fill:var(--c);transform:translateX(calc(var(--dx) * .25)) scaleX(1.8)}100%{opacity:0;transform:translateX(var(--dx)) scale(.15);fill:var(--c)}}
.tf-logo.hb.land .ico{animation:tfLand .7s ease-out both}
@keyframes tfLand{0%{fill:#FFFFFF;transform:scale(1.12)}100%{fill:currentColor;transform:scale(1)}}
/* older logo keyframes, without oxide */
@keyframes tfPulse{0%,100%{opacity:1;fill:currentColor}35%{opacity:.25}55%{opacity:1;fill:var(--s3)}}
@keyframes tfBeat{0%{transform:scale(1);fill:#F7F7F7}12%{transform:scale(1.22);fill:#FFFFFF}24%{transform:scale(1);fill:#F7F7F7}36%{transform:scale(1.14);fill:#FFFFFF}55%,100%{transform:scale(1);fill:#F7F7F7}}
@keyframes tfFlash{0%,100%{fill:#F7F7F7}45%,60%{fill:var(--s3)}}
@keyframes tfGlitch{0%{fill:#F7F7F7;opacity:1}8%{fill:var(--s2)}14%{opacity:.15}20%{opacity:1;fill:var(--s3)}30%{fill:#F7F7F7}38%{fill:var(--s5);opacity:.3}46%{opacity:1}56%{fill:#F7F7F7}64%{fill:var(--s6)}74%{opacity:.2}80%{opacity:1;fill:var(--s7)}90%,100%{fill:#F7F7F7;opacity:1}}
.foot-brand::after{top:auto;bottom:0;height:2px;width:30%;background:var(--photon);mix-blend-mode:normal}
@keyframes tfFootPx{0%{opacity:0;fill:var(--s2)}12%{opacity:1;fill:var(--s3)}24%{opacity:.15}36%{opacity:1;fill:var(--s5)}52%{opacity:.4}64%{opacity:1;fill:var(--s6)}80%{opacity:1;fill:currentColor}100%{opacity:1;fill:currentColor}}
@keyframes tfFootLt{0%{opacity:0;fill:var(--s1);transform:translateX(-6px)}20%{opacity:1;fill:var(--s3);transform:translateX(3px)}35%{opacity:.2;transform:translateX(0)}50%{opacity:1;fill:var(--s5)}70%{opacity:.6;fill:currentColor}100%{opacity:1;fill:currentColor;transform:none}}
/* homepage: slide counter */
.slide-hud{position:fixed;right:max(16px,var(--gut));bottom:22px;z-index:40;display:flex;align-items:center;gap:12px;font:600 11px/1 var(--body);letter-spacing:.2em;color:#F7F7F7;mix-blend-mode:difference;pointer-events:none;font-variant-numeric:tabular-nums;transition:opacity .3s}
.slide-hud .bar{position:relative;width:64px;height:1px;background:rgba(247,247,247,.35);overflow:hidden}
.slide-hud .bar i{position:absolute;inset:0;background:#F7F7F7;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
html.free-scroll .slide-hud{opacity:0}
@media (prefers-reduced-motion:reduce){.btn:hover::after,.site-head.photon::after,.tf-logo.hb .photon{animation:none!important;opacity:0}}
/* slide counter on a black chip, so it reads over any photo */
.slide-hud{background:var(--black);padding:9px 12px;mix-blend-mode:normal;bottom:18px}
/* the letters stretch into thin streaks of white light and jump into the core */
.tf-logo.hb.retract .lt{animation:tfWarp .5s cubic-bezier(.6,0,.3,1) both!important;animation-delay:calc(var(--i)*38ms)!important}
@keyframes tfWarp{0%{opacity:1;transform:none;fill:currentColor}45%{opacity:1;transform:translateX(calc(var(--dx) * .18)) scale(2.4,.12);fill:#FFFFFF}100%{opacity:0;transform:translateX(var(--dx)) scale(.1,.08);fill:#FFFFFF}}
/* the sun over Cremorne */
.sun-hud{position:fixed;left:max(16px,var(--gut));bottom:18px;z-index:40;display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--black);
font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#F7F7F7;pointer-events:none;font-variant-numeric:tabular-nums;transition:opacity .3s}
.sun-hud .bar{position:relative;width:64px;height:1px;background:rgba(247,247,247,.35);overflow:hidden}
.sun-hud .bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
background:#F7F7F7;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
html.free-scroll .sun-hud{opacity:0}
@media (max-width:640px){.sun-hud .bar,.sun-hud .place{display:none}.sun-hud{gap:0}}

/* light runs along the hairlines: section edges as they arrive, the navigation and cards on hover */
.rule-photon{position:absolute;left:0;right:0;top:-1px;height:1px;z-index:3;pointer-events:none;opacity:0;
background:var(--photon) no-repeat;background-size:30% 100%;background-position:-60% 0}
.rule-photon.go{animation:tfHeadPhoton 1.3s cubic-bezier(.55,0,.25,1) both}
.nav a:not(.nav-cta),.dd-btn{background-image:var(--photon);background-repeat:no-repeat;background-size:50% 1px;background-position:-110% 100%}
.nav a:not(.nav-cta):hover,.dd-btn:hover{animation:tfLinePhoton .6s cubic-bezier(.5,0,.3,1) both}
@keyframes tfLinePhoton{from{background-position:-110% 100%}to{background-position:210% 100%}}
a.card,.tile,.wcard{position:relative}
a.card::before,.tile::before,.wcard::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;
background:var(--photon) no-repeat;background-size:45% 100%;background-position:-120% 0}
a.card:hover::before,.tile:hover::before,.wcard:hover::before{animation:tfCardPhoton .75s cubic-bezier(.5,0,.3,1) both}
@keyframes tfCardPhoton{from{background-position:-120% 0}to{background-position:220% 0}}
/* pages hand over to each other without a flash; the header stays put */
@view-transition{navigation:auto}
.site-head{view-transition-name:tf-head}
@media (prefers-reduced-motion:reduce){.rule-photon{display:none}.nav a:hover,.dd-btn:hover,a.card:hover::before,.tile:hover::before,.wcard:hover::before{animation:none}}
/* Controls (18 Oct 2026). Buttons take the cut corners of the O in the wordmark. Primary buttons are solid; secondary
   buttons are a hairline drawn along the same cut outline. Light passes through a label and along the bottom edge
   only while it is touched. Menus open with a scan; on a phone the menu fills the screen. */
:root{--q1:#724AAB;--q2:#1864B0;--q3:#057080;--q4:#007654;--q5:#5B6C0A;--q6:#865901;--q7:#A8382A}
.btn{--cut:7px;--ink:#0C0C0C;--sw:var(--q1),var(--q2),var(--q3),var(--q4),var(--q5),var(--q6),var(--q7);
position:relative;isolation:isolate;overflow:hidden;border:0;background:#F7F7F7;color:var(--ink);font-size:12px;letter-spacing:.14em;padding:15px 26px;
clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
transition:background .2s}
.btn:hover{background:#FFFFFF}
.btn:active{transform:translateY(1px)}
.btn .lbl{background-image:linear-gradient(90deg,var(--ink) 0 40%,var(--sw),var(--ink) 60% 100%);background-size:320% 100%;background-position:100% 0;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.btn:hover .lbl,.btn:focus-visible .lbl{animation:tfLbl .75s cubic-bezier(.5,0,.3,1) both}
@keyframes tfLbl{from{background-position:100% 0}to{background-position:0 0}}
.btn:focus-visible{outline:none}
.btn:focus-visible .lbl{text-decoration:underline 1px var(--ink);text-underline-offset:5px}
.btn.ghost,.btn.alt,.slide-bottom .btn.alt,.om-sum .btn.ghost{--ink:#F7F7F7;--sw:var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6),var(--s7);background:transparent}
.btn.ghost::before,.btn.alt::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:.5;pointer-events:none;transition:opacity .2s;
clip-path:polygon(evenodd,var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut),var(--cut) 0,
calc(var(--cut) + .41px) 1px,calc(100% - var(--cut) - .41px) 1px,calc(100% - 1px) calc(var(--cut) + .41px),calc(100% - 1px) calc(100% - var(--cut) - .41px),calc(100% - var(--cut) - .41px) calc(100% - 1px),calc(var(--cut) + .41px) calc(100% - 1px),1px calc(100% - var(--cut) - .41px),1px calc(var(--cut) + .41px),calc(var(--cut) + .41px) 1px)}
.btn.ghost:hover,.btn.alt:hover,.slide-bottom .btn.alt:hover{background:transparent}
.btn.ghost:hover::before,.btn.alt:hover::before,.btn.ghost:focus-visible::before{opacity:1}
.light .btn:not(.ghost){background:#0C0C0C;--ink:#F7F7F7;--sw:var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6),var(--s7)}
.light .btn:not(.ghost):hover{background:#000000}
.light .btn.ghost{--ink:#0C0C0C;--sw:var(--q1),var(--q2),var(--q3),var(--q4),var(--q5),var(--q6),var(--q7)}
.nav .nav-cta,.nav a.nav-cta{--cut:6px;font-size:11px;letter-spacing:.16em;padding:11px 18px;background:#F7F7F7}
/* desktop menus */
@media (min-width:981px){
.nav > a[aria-current=page]::before,.dd.cur > .dd-btn::before,.dd.cur > .dd-link::before{content:"";display:inline-block;width:4px;height:4px;background:currentColor;margin:0 8px 2px 0;vertical-align:middle}
.dd-menu{top:calc(100% + 12px);left:-20px;min-width:220px;padding:10px 0;border:0;background:#0C0C0C;
clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.dd-menu::before{content:"";position:absolute;inset:0;background:rgba(247,247,247,.28);pointer-events:none;
clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 0,1px 1px,1px calc(100% - 1px),calc(100% - 10.41px) calc(100% - 1px),calc(100% - 1px) calc(100% - 10.41px),calc(100% - 1px) 1px,1px 1px)}
.nav .dd-menu a{display:flex;align-items:baseline;gap:14px;padding:11px 22px;font-size:14px;letter-spacing:.01em;color:var(--grey);
background-color:transparent;background-image:var(--photon);background-repeat:no-repeat;background-size:50% 1px;background-position:-110% calc(100% - 6px)}
.nav .dd-menu a:hover,.nav .dd-menu a[aria-current=page]{color:var(--light);background-color:transparent}
.nav .dd-menu a:hover{animation:tfItemPhoton .6s cubic-bezier(.5,0,.3,1) both}
.dd:hover .dd-menu,.dd.open .dd-menu,.dd:focus-within .dd-menu{animation:tfDrop .2s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes tfItemPhoton{from{background-position:-110% calc(100% - 6px)}to{background-position:210% calc(100% - 6px)}}
@keyframes tfDrop{from{clip-path:polygon(0 0,100% 0,100% 0,100% 0,0 0)}to{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}}
/* the phone menu: two hairlines that cross, and a full screen list */
@media (max-width:980px){
.menu-toggle{position:relative;width:44px;height:44px;margin-right:-11px;padding:0;border:0;background:none;color:var(--light);font-size:0;letter-spacing:0}
.menu-toggle::before,.menu-toggle::after{content:"";position:absolute;left:11px;right:11px;height:1px;background:currentColor;transition:transform .28s cubic-bezier(.5,0,.2,1)}
.menu-toggle::before{top:18px}.menu-toggle::after{top:25px}
.menu-toggle[aria-expanded=true]::before{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true]::after{transform:translateY(-3.5px) rotate(-45deg)}
.nav{position:fixed;top:58px;bottom:0;left:0;right:0;overflow-y:auto;padding:8px var(--gut) 40px;gap:0;border-bottom:0;align-items:stretch}
.nav.open > a:not(.nav-cta),.nav.open > .dd > .dd-btn,.nav.open > .dd > .dd-link{display:flex!important;align-items:baseline;gap:16px;width:100%;
font-size:26px;letter-spacing:-.01em;line-height:1.2;color:var(--light);padding:18px 0 14px;min-height:0;border-bottom:1px solid var(--rule);background-image:none}
.nav.open > .dd > .dd-btn,.nav.open > .dd > .dd-link{border-bottom:0;padding-bottom:6px}
.nav.open > a:not(.nav-cta)::before,.nav.open > .dd > .dd-btn::before,.nav.open > .dd > .dd-link::before{content:none}
.nav.open > .dd{width:100%;border-bottom:1px solid var(--rule)}
.nav.open .dd-menu{padding:0 0 14px 0;animation:none;clip-path:none;border-top:0}
.nav.open .dd-menu::before{content:none}
.nav.open .dd-menu a{font-size:17px;padding:9px 0;min-height:0;color:var(--grey);background-image:none}
.nav.open .dd-menu a[aria-current=page]{color:var(--light)}
.nav.open .nav-cta{margin-top:30px;align-self:stretch;text-align:center;font-size:12px;padding:17px 20px;--cut:7px}
.nav.open > *{animation:tfMenuIn .38s cubic-bezier(.2,.8,.2,1) both}
.nav.open > :nth-child(2){animation-delay:30ms}.nav.open > :nth-child(3){animation-delay:60ms}.nav.open > :nth-child(4){animation-delay:90ms}
.nav.open > :nth-child(5){animation-delay:120ms}.nav.open > :nth-child(6){animation-delay:150ms}.nav.open > :nth-child(7){animation-delay:180ms}
html.menu-open{overflow:hidden}
}
@keyframes tfMenuIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.btn:hover .lbl,.btn:focus-visible .lbl,.dd-menu,.nav.open > *,.nav .dd-menu a:hover{animation:none!important}}
/* light particles: the layer the cells of light fly in, and photons along every edge people touch */
.photons{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
.site-head .sp-photon{position:absolute;left:0;bottom:-1px;width:14%;height:1px;pointer-events:none;opacity:0;transition:opacity .6s;background:var(--photon)}
.site-head.scrolling .sp-photon{opacity:1;transition:opacity .15s}
.field{position:relative}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;opacity:0;
background:var(--photon) no-repeat;background-size:45% 100%;background-position:-120% 0}
.field:focus-within::after{animation:tfEdge .9s cubic-bezier(.5,0,.3,1) both}
details{position:relative}
details::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;opacity:0;
background:var(--photon) no-repeat;background-size:40% 100%;background-position:-120% 0}
details[open]::before{animation:tfEdge 1s cubic-bezier(.5,0,.3,1) both}
@keyframes tfEdge{0%{opacity:1;background-position:-120% 0}100%{opacity:1;background-position:220% 0}}
tbody tr{background-image:var(--photon);background-repeat:no-repeat;background-size:30% 1px;background-position:-60% 100%}
tbody tr:hover{animation:tfRow .8s cubic-bezier(.5,0,.3,1) both}
@keyframes tfRow{from{background-position:-60% 100%}to{background-position:160% 100%}}
main p a:not(.btn),main li a:not(.btn),main dd a:not(.btn),.site-foot a:not(.brand){background-image:var(--photon);background-repeat:no-repeat;background-size:50% 1px;background-position:-110% 100%}
main p a:not(.btn):hover,main li a:not(.btn):hover,main dd a:not(.btn):hover,.site-foot a:not(.brand):hover{animation:tfLinePhoton .6s cubic-bezier(.5,0,.3,1) both}
.opt,.om-opt,.om-extra,.sizes .size{position:relative}
.opt:has(input:checked)::after,.om-extra:has(input:checked)::after,.sizes .size:has(input:checked)::after,.om-opt[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
background:var(--photon) no-repeat;background-size:45% 100%;animation:tfEdge .9s cubic-bezier(.5,0,.3,1) both}
@media (prefers-reduced-motion:reduce){.photons{display:none}.site-head .sp-photon,.field::after,details::before,.opt::after,.om-extra::after,.om-opt::after,.sizes .size::after{display:none}tbody tr:hover,main a:hover,.site-foot a:hover{animation:none}}
/* Buttons, second pass (18 Oct 2026). Capsules, a stadium of light. A secondary button is a hairline capsule, and over a
   photograph a pane of glass. On a computer a photon runs once round the edge when the pointer arrives. A press breaks
   the button into cells of light that jump to light speed, and a button that stays on the page flies back in from
   light. Menus open as rounded panels to match. */
.btn{clip-path:none;border-radius:999px;overflow:visible;padding-left:30px;padding-right:30px}
.nav .nav-cta{padding-left:20px;padding-right:20px}
.btn::after{content:none}
.btn:active{transform:none}
.btn.ghost::before,.btn.alt::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;clip-path:none;background:none;
box-shadow:inset 0 0 0 1px currentColor;opacity:.42;transition:opacity .25s;pointer-events:none}
.btn.ghost:hover::before,.btn.alt:hover::before,.btn.ghost:focus-visible::before,.btn.alt:focus-visible::before{opacity:.95}
.slide-bottom .btn.alt{background:rgba(12,12,12,.18);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.slide-bottom .btn.alt:hover{background:rgba(12,12,12,.3)}
.btn .orbit{position:absolute;left:-3px;top:-3px;width:calc(100% + 6px);height:calc(100% + 6px);overflow:visible;pointer-events:none}
.btn .orbit rect{fill:none;stroke-width:1.5;stroke-linecap:round}
.btn.tf-gone,.btn.tf-gone::before,.btn.tf-gone .orbit{opacity:0!important;transition:none!important;animation:none!important}
@media (min-width:981px){
.dd-menu{clip-path:none;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(247,247,247,.16)}
.dd-menu::before{content:none}
.dd:hover .dd-menu,.dd.open .dd-menu,.dd:focus-within .dd-menu{animation:tfDropRound .24s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes tfDropRound{from{clip-path:inset(0 0 100% 0 round 18px)}to{clip-path:inset(0 round 18px)}}
@media (prefers-reduced-motion:reduce){.dd:hover .dd-menu,.dd.open .dd-menu,.dd:focus-within .dd-menu{animation:none}}
/* links in card titles and table labels read as the title, and carry a photon along the underline when touched */
.card h3 a,td.hl a{color:inherit;text-decoration:none;background-image:var(--photon);background-repeat:no-repeat;background-size:50% 1px;background-position:-110% 100%;box-shadow:inset 0 -1px 0 rgba(127,127,127,.45)}
.card h3 a:hover,td.hl a:hover{animation:tfLinePhoton .6s cubic-bezier(.5,0,.3,1) both}

/* Line drawings: white linework on the page's own black. Heroes and slides hold the whole figure; cards take a 3:1 band */
img[src*="/assets/drawings/"]{background:#0C0C0C}
img[src*="/assets/drawings/"][src$="-light.svg"]{background:#F7F7F7}
main img[src*="/assets/drawings/"]:not(.bg){height:auto}
.slide .bg[src*="/assets/drawings/"]{object-fit:contain;filter:none;padding:0;top:clamp(180px,30vh,290px);left:3vw;width:94vw;height:calc(100% - clamp(180px,30vh,290px) - clamp(120px,18vh,190px))}
.media[src*="/assets/drawings/"]{object-fit:contain}
.product > .cell-figure{align-self:center}
.cellcard img[src*="/assets/drawings/"]{aspect-ratio:3/1;object-fit:contain}
.img-hero.drawing-hero{flex-direction:column;align-items:stretch;justify-content:flex-end;min-height:0;padding-top:clamp(88px,11vh,132px)}
.img-hero.drawing-hero .bg{position:static;display:block;width:100%;height:auto;max-height:54vh;object-fit:contain;filter:none;box-sizing:border-box;padding:0 2vw;margin:0 0 clamp(28px,5vh,56px)}
.img-hero.drawing-hero .shade{display:none}
.elevation{background:#0C0C0C;color:#F7F7F7;padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--rule)}
.elevation img{display:block;width:100%;margin-top:28px}
@media (max-width:640px){.slide .bg[src*="/assets/drawings/"]{top:28vh;left:8vw;width:84vw;height:calc(100% - 56vh)}}
/* The Cell on a phone: the machine fills the width and sits centred, the far left of the canopy runs off the edge */
@media (max-width:640px){.slide .bg[src*="/assets/drawings/cell-hero"]{top:calc(54% - 29.5vw);left:-30vw;width:126vw;max-width:none;height:59.1vw}}
/* Woolong finance and World cards, 20 Oct 2026 */
.wl-tv-link{display:block;width:min(100%,460px);margin:0 0 44px;text-decoration:none}
.wl-tv{position:relative;display:block;width:100%;aspect-ratio:4/3;background:#05070D;border:3px solid #FFFFFF;border-radius:22px;overflow:hidden;box-shadow:0 0 80px rgba(47,111,196,.22)}
.wl-tv svg{display:block;width:100%;height:100%;transform-origin:50% 50%;animation:wlTvOn .56s cubic-bezier(.3,.7,.2,1) .15s both}
.rv:not(.in) .wl-tv svg{animation:none;transform:scale(.004)}
.wl-tv .tv-roll{animation:wlTvRoll 2.6s linear infinite}
.wl-tv .tv-air{animation:wlTvAir 2.2s ease-in-out infinite}
.wl-tv .tv-glyph{transform-box:fill-box;transform-origin:50% 50%;animation:wlTvGulp 6s cubic-bezier(.3,.7,.4,1) 1.2s infinite}
@keyframes wlTvOn{0%{filter:brightness(3);transform:scale(.004)}22%{filter:brightness(3);transform:scale(.55,.006)}45%{filter:brightness(2.6);transform:scale(1,.006)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes wlTvRoll{0%{transform:translateY(0)}100%{transform:translateY(820px)}}
@keyframes wlTvAir{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wlTvGulp{0%,80%{transform:scale(1)}83%{transform:scale(1.14)}87%{transform:scale(.95)}90%,100%{transform:scale(1)}}
.wl-sec h2{max-width:640px}
.wl-sec .pstats{margin-top:44px}
.wl-note{font-size:14px;line-height:1.6;color:var(--grey);margin-top:32px;max-width:620px}
.wl-apply h3{margin-bottom:12px}
.wl-apply .wl-ready{font-size:15px;color:var(--grey);margin:0 0 28px;max-width:560px}
.wl-apply .wl-hint{font-size:14px;color:var(--grey);margin-top:8px}
.wl-apply .wl-send{font-size:14px;line-height:1.6;color:var(--grey);margin-top:18px}
.wl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.bb-worlds .wcards{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
.bb-worlds .wcard{display:flex;flex-direction:column;background:var(--panel);border-top:2px solid var(--oxide);overflow:hidden}
.bb-worlds .wcard-img{display:block;overflow:hidden;background:var(--black)}
.bb-worlds .wcard-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s ease}
.bb-worlds .wcard:hover .wcard-img img{transform:scale(1.03)}
.bb-worlds .wcard-body{padding:28px 30px 34px;display:flex;flex-direction:column;flex:1}
.bb-worlds .wcard .eyebrow{margin-bottom:14px}
.bb-worlds .wcard h3{font-size:clamp(28px,2.6vw,40px);margin:0}
.bb-worlds .wcard h3 a{color:inherit;text-decoration:none;background:none;box-shadow:none}
.bb-worlds .wcard h3 a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.bb-worlds .wcard .lede{font-size:17px;margin-top:16px;max-width:none}
.bb-worlds .wcard .actions{margin-top:auto;padding-top:32px}
@media (max-width:900px){.bb-worlds .wcards{grid-template-columns:1fr;gap:24px}.bb-worlds .wcard-body{padding:24px 22px 28px}}
@media (prefers-reduced-motion:reduce){.wl-tv svg,.rv:not(.in) .wl-tv svg,.wl-tv .tv-roll,.wl-tv .tv-air,.wl-tv .tv-glyph{animation:none;transform:none}.bb-worlds .wcard-img img{transition:none}}
/* Air: the glyph on the unit takes the colour of the air it is blowing (James, 3 Nov 2026). Two layers sit over
   the glyph in the photograph: a tint disc that colours the glyph itself and fades to white, which multiply
   leaves untouched, and a small bloom around it. site.js maps the glyph's place in the photograph onto the
   cropped box, and the colour crossfades as the mode changes. Nothing moves. */
.air-mode{position:relative;margin:0;display:block;line-height:0}
.air-tint,.air-glow{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:background 1.4s ease,opacity 1.4s ease}
.air-tint{mix-blend-mode:multiply;
  background:radial-gradient(circle closest-side,rgb(var(--air-rgb,247 247 247)) 0%,rgb(var(--air-rgb,247 247 247)) 42%,#FFFFFF 76%,#FFFFFF 100%)}
.air-glow{mix-blend-mode:screen;
  background:radial-gradient(circle closest-side,rgba(var(--air-rgb,247 247 247)/.40) 0%,rgba(var(--air-rgb,247 247 247)/.16) 38%,rgba(var(--air-rgb,247 247 247)/0) 72%)}
.air-mode.lit .air-tint,.air-mode.lit .air-glow{opacity:1}
.air-cap{position:absolute;left:0;bottom:0;display:flex;align-items:baseline;gap:12px;padding:14px 18px;line-height:1.2;
  background:linear-gradient(to right,rgba(12,12,12,.72),rgba(12,12,12,0));width:100%}
.air-cap b{font-family:var(--head);font-weight:400;font-size:18px;color:#F7F7F7;transition:color 1.4s ease}
.air-cap span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-variant-numeric:tabular-nums}
@media (max-width:760px){.air-cap{padding:12px 14px}.air-cap b{font-size:16px}.air-cap span{font-size:12px}}
@media (prefers-reduced-motion:reduce){.air-tint,.air-glow,.air-cap b{transition:none}}
/* Air on the homepage: the first slide carries the glyph tint and a readout of what the system is doing, on a
   black chip in the same register as the sun and slide counter chips. The only colour is the air's own. */
.air-stage{position:absolute;inset:0;z-index:0;isolation:isolate}
.air-stage .air-tint,.air-stage .air-glow,.air-stage .air-edge{z-index:1}
.air-stage.lit .air-tint,.air-stage.lit .air-glow{opacity:1}
.air-hud{margin:26px auto 0;max-width:430px;width:100%;text-align:left;padding:14px 16px 13px;background:var(--black);
  font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-variant-numeric:tabular-nums}
.air-hud .hud-head{display:flex;align-items:center;gap:10px}
.air-hud .hud-dot{width:6px;height:6px;border-radius:50%;background:rgb(var(--air-rgb,247 247 247));
  box-shadow:0 0 9px rgba(var(--air-rgb,247 247 247)/.95);transition:background 1.4s ease,box-shadow 1.4s ease}
.air-hud .hud-mode{color:rgb(var(--air-rgb,247 247 247));transition:color 1.4s ease}
.air-hud .hud-temp{margin-left:auto;font:400 29px/1 var(--head);letter-spacing:0;text-transform:none;color:#F7F7F7}
.air-hud .hud-temp i{font-style:normal;font-size:14px;color:var(--grey);margin-left:3px}
.air-hud .hud-rail{position:relative;height:2px;margin:13px 0 9px;
  background:linear-gradient(90deg,rgba(64,170,255,.5) 0%,rgba(247,247,247,.45) 46%,rgba(255,74,30,.55) 100%)}
.air-hud .hud-rail-fill{position:absolute;left:0;top:0;height:100%;width:0;background:rgb(var(--air-rgb,247 247 247));
  transition:width 1.4s cubic-bezier(.3,.7,.2,1)}
.air-hud .hud-rail-pip{position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);
  background:rgb(var(--air-rgb,247 247 247));box-shadow:0 0 11px rgba(var(--air-rgb,247 247 247)/.95);
  transition:left 1.4s cubic-bezier(.3,.7,.2,1),background 1.4s ease,box-shadow 1.4s ease}
.air-hud .hud-scale{display:flex;justify-content:space-between;gap:10px}
.air-hud .hud-scale span:nth-child(2){color:#F7F7F7}
.air-hud .hud-chain{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(247,247,247,.16)}
.air-hud .hud-chain span{display:flex;flex-direction:column;gap:4px}
.air-hud .hud-chain em{font-style:normal}
.air-hud .hud-chain b{font:400 15px/1 var(--head);letter-spacing:0;text-transform:none;color:#F7F7F7}
.air-hud .hud-chain i{flex:1;height:1px;background:rgba(247,247,247,.3);position:relative;overflow:hidden}
.air-hud .hud-chain i::after{content:"";position:absolute;top:0;left:-45%;width:45%;height:100%;
  background:linear-gradient(90deg,rgba(247,247,247,0),rgb(var(--air-rgb,247 247 247)),rgba(247,247,247,0))}
.air-hud.run .hud-chain i::after{animation:hudRun 1.4s cubic-bezier(.4,0,.2,1) forwards}
.air-hud.run .hud-chain i:nth-of-type(2)::after{animation-delay:.16s}
@keyframes hudRun{from{left:-45%}to{left:100%}}
@media (max-width:640px){.air-hud{margin-top:20px;max-width:none;padding:13px 13px 12px}
  .air-hud .hud-temp{font-size:25px}.air-hud .hud-chain{gap:8px}.air-hud .hud-chain b{font-size:13px}}
@media (prefers-reduced-motion:reduce){.air-hud .hud-rail-fill,.air-hud .hud-rail-pip,.air-hud .hud-dot,.air-hud .hud-mode{transition:none}
  .air-hud.run .hud-chain i::after{animation:none}}
/* the air leaves along the long edges of the panel, so the edges carry its colour too */
.air-edge{position:absolute;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:background 1.4s ease,opacity 1.4s ease}
.air-edge.l{background:linear-gradient(to left,rgba(var(--air-rgb,247 247 247)/.26),rgba(var(--air-rgb,247 247 247)/.09) 38%,rgba(var(--air-rgb,247 247 247)/0) 100%)}
.air-edge.r{background:linear-gradient(to right,rgba(var(--air-rgb,247 247 247)/.26),rgba(var(--air-rgb,247 247 247)/.09) 38%,rgba(var(--air-rgb,247 247 247)/0) 100%)}
.air-mode.lit .air-edge,.air-stage.lit .air-edge{opacity:1}
@media (prefers-reduced-motion:reduce){.air-edge{transition:none}}
/* On a phone the slide is tall and the house is wide, so cover cuts the deck and the spa off.
   Show the whole picture instead. */
@media (max-width:760px){
  .air-stage .bg{object-fit:contain}
  .slide:has(.air-stage){justify-content:space-between}
}
/* The Air house: a cutaway you switch on, drawn in the same line register as the Cell drawings. */
.house-wrap{margin-top:36px}
.house-wrap{margin-top:36px;display:grid;grid-template-columns:372px 1fr;gap:34px;align-items:start}
.phone{position:relative;width:352px;max-width:100%;padding:12px;border-radius:58px;
  background:linear-gradient(145deg,#4a4d52,#17181a 42%,#303338);
  box-shadow:0 34px 80px rgba(12,12,12,.42),0 0 0 1px rgba(12,12,12,.9),inset 0 0 0 2px rgba(247,247,247,.12)}
.ph-btn{position:absolute;background:linear-gradient(90deg,#44474c,#23252a);border-radius:3px}
.ph-silent{left:-3px;top:118px;width:4px;height:30px}
.ph-up{left:-3px;top:170px;width:4px;height:58px}
.ph-down{left:-3px;top:242px;width:4px;height:58px}
.ph-power{right:-3px;top:206px;width:4px;height:92px}
.phone-screen{position:relative;border-radius:46px;overflow:hidden;background:#000000;aspect-ratio:9/19.5}
.ios-status{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;padding:17px 30px 0;color:#F7F7F7;font-size:14px;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;pointer-events:none}
.ios-icons svg{fill:currentColor;display:block}
.ios-island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:118px;height:34px;
  border-radius:20px;background:#000000;z-index:6;box-shadow:inset 0 0 0 1px rgba(247,247,247,.07)}
.ios-island::after{content:"";position:absolute;right:11px;top:11px;width:11px;height:11px;border-radius:50%;
  background:#0e1013;box-shadow:inset 0 0 0 1px rgba(90,130,170,.35)}
.ios-home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:132px;height:5px;
  border-radius:3px;background:rgba(247,247,247,.55);z-index:6;pointer-events:none}
.house-app{position:absolute;inset:0;overflow:hidden auto;background:#000000;color:#F7F7F7;
  scrollbar-width:none}
.house-app::-webkit-scrollbar{display:none}
.house-app{background:#000000}
.app-top{display:flex;align-items:center;gap:8px;padding:62px 20px 6px}
.app-hero{padding:4px 20px 18px}
.app-hero-k{margin:0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,247,247,.45)}
.app-hero-v{margin:6px 0 0;font-family:var(--head);font-weight:400;font-size:54px;line-height:1;color:#F7F7F7;
  font-variant-numeric:tabular-nums}
.app-hero-n{margin:7px 0 0;font-size:12px;color:rgba(247,247,247,.42)}
.app-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:12px 14px 30px;
  border-top:1px solid rgba(247,247,247,.08);margin-top:14px}
.app-tabs span{text-align:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,247,247,.3);padding:6px 0}
.app-tabs .on{color:#F7F7F7}
.app-top img{opacity:.95}
.app-top b{font-family:var(--head);font-weight:400;font-size:14px;letter-spacing:.02em;white-space:nowrap;color:rgba(247,247,247,.75)}
.app-top em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,247,247,.5)}
.app-live{width:7px;height:7px;border-radius:50%;background:rgb(var(--dot-rgb,247 247 247));
  box-shadow:0 0 8px rgb(var(--dot-rgb,247 247 247));transition:background .6s ease,box-shadow .6s ease}
.app-line{margin:0;padding:13px 18px;border-top:1px solid rgba(247,247,247,.09);
  border-bottom:1px solid rgba(247,247,247,.09)}
.app-line b{display:block;font-family:var(--head);font-weight:400;font-size:14px;line-height:1.35}
.app-line span{display:block;margin-top:5px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,247,247,.45)}
.house-ctl{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 6px}
.hbtn{position:relative;display:block;width:100%;appearance:none;cursor:pointer;text-align:left;
  padding:13px 13px 12px;border:1px solid rgba(247,247,247,.1);border-radius:16px;
  background:#1C1C1E;color:rgba(247,247,247,.62);font:inherit;overflow:hidden;
  transition:color .3s ease,background .3s ease,border-color .3s ease}
.hbtn::before{content:"";position:absolute;inset:0;border-radius:15px;background:rgb(var(--btn-rgb,247 247 247));
  opacity:0;transition:opacity .4s ease}
.hbtn::after{content:"";position:absolute;right:13px;top:14px;width:8px;height:8px;border-radius:50%;
  background:rgba(247,247,247,.22);transition:background .3s ease,box-shadow .3s ease}
.hbtn b{position:relative;display:block;font-family:var(--head);font-weight:400;font-size:14px;line-height:1.25;color:#F7F7F7;padding-right:14px}
.hbtn span{position:relative;display:block;margin-top:5px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(247,247,247,.42);font-variant-numeric:tabular-nums;line-height:1.4}
.hbtn i{position:relative;display:block;margin-top:9px;font-style:normal;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(247,247,247,.35);transition:color .3s ease}
.hbtn:hover{background:#232326}
.hbtn:focus-visible{outline:2px solid rgb(var(--btn-rgb,247 247 247));outline-offset:2px}
.hbtn[aria-pressed=true]{background:#1C1C1E;border-color:rgba(var(--btn-rgb,247 247 247)/.55);color:#F7F7F7}
.hbtn[aria-pressed=true]::before{opacity:.14}
.hbtn[aria-pressed=true]::after{background:rgb(var(--btn-rgb,247 247 247));
  box-shadow:0 0 8px rgb(var(--btn-rgb,247 247 247)),0 0 18px rgba(var(--btn-rgb,247 247 247)/.65)}
.hbtn[aria-pressed=true] span{color:rgb(var(--btn-rgb,247 247 247))}
.hbtn[aria-pressed=true] i{color:rgb(var(--btn-rgb,247 247 247))}
@media (max-width:860px){.house-wrap{grid-template-columns:1fr;justify-items:center}}
.house{display:block;width:100%;height:auto;background:var(--black)}
.house text{font-family:var(--body);fill:var(--grey)}
.house .lbl{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.house .small{font-size:11px}
.house .val{font-size:16px;fill:#F7F7F7;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.house line,.house path,.house rect,.house circle{vector-effect:non-scaling-stroke}
.house .shell line,.house .shell path{stroke:rgba(247,247,247,.5);fill:none;stroke-width:1}
.house .ground{stroke:rgba(247,247,247,.3)}
.house .panel{stroke:rgba(247,247,247,.45);fill:rgba(247,247,247,.05)}
.house .rooms path{stroke:rgba(247,247,247,.3);fill:none;stroke-width:1}
.house .rooms .top{fill:rgba(247,247,247,.04)}
.house .box,.house .tank,.house .coil,.house .tray{stroke:rgba(247,247,247,.75);fill:none;stroke-width:1}
.house .card{stroke:rgba(247,247,247,.5);fill:rgba(247,247,247,.07)}
.house .fin,.house .furniture,.house .pipe-fixed{stroke:rgba(247,247,247,.4);fill:none;stroke-width:1}
.house .drop,.house .air{stroke:rgba(247,247,247,.5);fill:none;stroke-width:1;opacity:0;transition:opacity .5s ease,stroke .8s ease}
.house .on .drop,.house .on .air{opacity:1}
.house #shower.on .drop{stroke:rgb(var(--hot-rgb))}
.house #coil-bed.on .air{stroke:rgb(var(--bed-rgb))}
.house #coil-live.on .air{stroke:rgb(var(--live-rgb))}
.house .pipe{stroke:rgba(247,247,247,.22);fill:none;stroke-width:3;stroke-linecap:round;transition:stroke .9s ease}
.house .pipe.live{stroke:rgb(var(--pipe-rgb,247 247 247))}
.house .ph{fill:#F7F7F7;opacity:0}
.house .ph.run{opacity:1}
.house #rack .card{animation:none}
.house.lit #rack .card:nth-child(odd){fill:rgba(247,247,247,.14)}
.house-read{display:flex;align-items:center;gap:12px;margin-top:18px;padding:13px 16px;background:var(--black);
  font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-variant-numeric:tabular-nums}
.house-read b{font:400 15px/1 var(--head);letter-spacing:0;text-transform:none;color:#F7F7F7}
.house-read .hr-dot{width:6px;height:6px;border-radius:50%;background:rgb(var(--dot-rgb,247 247 247));
  box-shadow:0 0 9px rgba(var(--dot-rgb,247 247 247)/.95);transition:background 1s ease,box-shadow 1s ease}
.house-read span:last-child{margin-left:auto;text-align:right}
@media (max-width:760px){.house-ctl{flex-direction:column}.hbtn{width:100%}
  .house-read{flex-wrap:wrap;gap:8px}.house-read span:last-child{margin-left:0;width:100%;text-align:left}}
@media (prefers-reduced-motion:reduce){.house .ph{display:none}.house .pipe,.house .drop,.house .air{transition:none}}
/* the house is a photograph with the water drawn over it */
.house-photo{position:relative;border-radius:14px;overflow:hidden;background:#EDEBE7}
.house-photo img{display:block;width:100%;height:auto}
.house-photo svg.house{position:absolute;inset:0;width:100%;height:100%;background:transparent;pointer-events:none}
.house-photo .pipe{stroke:rgba(247,247,247,.55);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 1.5px rgba(17,17,17,.4));transition:stroke .9s ease,stroke-width .9s ease}
.house-photo .pipe.live{stroke:rgb(var(--pipe-rgb,247 247 247));stroke-width:3.2;
  filter:drop-shadow(0 0 3px rgba(var(--pipe-rgb,247 247 247)/.45)) drop-shadow(0 1px 2px rgba(17,17,17,.35))}
.house-photo .pipe.under{opacity:.5;stroke-dasharray:7 6}
.house-photo .ph{display:none}
.house-photo .stream{fill:none;stroke:rgb(var(--pipe-rgb,247 247 247));stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:16 54;opacity:0;transition:opacity .6s ease;
  filter:drop-shadow(0 0 4px rgba(var(--pipe-rgb,247 247 247)/.75));
  animation:air-stream 2.6s linear infinite}
.house-photo .stream.under{stroke-width:3.2;opacity:0}
.house-photo .stream.on{opacity:1}
.house-photo .stream.on.under{opacity:.45}
.house-photo .stream.back{animation-direction:reverse}
@keyframes air-stream{from{stroke-dashoffset:0}to{stroke-dashoffset:-70}}
.house-photo .ph.run{opacity:1}
.house-photo .unit .halo{fill:#FFFFFF;opacity:.45;mix-blend-mode:screen;filter:blur(6px)}
.room-pic{position:relative;display:block;width:calc(100% - 28px);margin:0 14px 14px;
  border-radius:16px;overflow:hidden}
.room-pic .room-shot{display:block;width:100%;margin:0;border-radius:0}
.room-mark{position:absolute;inset:0;width:100%;height:100%}
.room-coil{opacity:0;fill:rgb(var(--coil-rgb,214 28 26));mix-blend-mode:screen;
  filter:blur(4px);transition:opacity .45s ease}
.room-coil.on{animation:room-breathe 3.6s ease-in-out infinite}
@keyframes room-breathe{0%,100%{opacity:.2}50%{opacity:.46}}
.room-coil.on.cool{mix-blend-mode:hard-light}
.room-coil[data-kind="floor"]{filter:blur(12px)}
.room-coil[data-kind="water"]{filter:blur(6px)}
.room-coil.on[data-kind="floor"]{animation-name:floor-breathe}
@keyframes floor-breathe{0%,100%{opacity:.12}50%{opacity:.3}}
.room-mk{fill:#FFFFFF;opacity:.3;mix-blend-mode:screen;filter:blur(5px);pointer-events:none;
  animation:mark-pulse 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.room-mk{animation:none;opacity:.35}}
.app-device{touch-action:pan-y}
.app-device.dragging{cursor:ew-resize}
.app-device .dev-dial{user-select:none;-webkit-user-select:none}
.app-device .dev-dial:focus-visible{outline:2px solid rgba(247,247,247,.5);outline-offset:4px}
.room-coil[data-kind="plume"]{filter:blur(16px)}
.room-coil.on[data-kind="plume"]{animation:plume-breathe 5.2s ease-in-out infinite}
.house-photo .coil[data-kind="plume"]{filter:blur(7px)}
.house-photo .coil.on[data-kind="plume"]{animation:plume-breathe 5.2s ease-in-out infinite}
/* Air leaving the panel: it drifts out and fades, rather than pulsing on the spot. */
@keyframes plume-breathe{
  0%{opacity:0;transform:translateX(0) scaleX(.72)}
  28%{opacity:calc(var(--plume-k,1)*.30)}
  100%{opacity:0;transform:translateX(var(--drift,6px)) scaleX(1.18)}}
.room-coil[data-kind="plume"]{transform-origin:left center}
.room-coil[data-kind="plume"]:nth-of-type(odd){--drift:-7px;transform-origin:right center}
.house-photo .coil[data-kind="plume"]{transform-origin:left center}
.house-photo .coil[data-kind="plume"]:nth-of-type(odd){--drift:-3px;transform-origin:right center}
.house-photo .coil.on[data-kind="plume"]{--drift:3px}
.room-coil.on[data-kind="plume"]:nth-of-type(even){animation-delay:1.8s}
.house-photo .coil.on[data-kind="plume"]:nth-of-type(even){animation-delay:1.8s}
@media (prefers-reduced-motion:reduce){
  .room-coil.on[data-kind="plume"],.house-photo .coil.on[data-kind="plume"]{
    animation:none;opacity:calc(var(--plume-k,1)*.24)}
}
.room-hit{fill:#FFFFFF;opacity:0;cursor:pointer;pointer-events:all;transition:opacity .2s ease}
.room-hit:hover{opacity:.18}
.room-hit[data-kind="floor"]:hover{opacity:.08}
.room-hit[data-kind="water"]:hover{opacity:.22}
.room-hit:focus-visible{opacity:.18;outline:none;stroke:#FFFFFF;stroke-width:3;stroke-dasharray:6 4}
@media (prefers-reduced-motion:reduce){.room-coil.on{animation:none;opacity:.34}}
.house-photo .coilmark{fill:#FFFFFF;opacity:.3;mix-blend-mode:screen;filter:blur(4px);
  animation:mark-pulse 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.house-photo .coilmark{animation:none;opacity:.35}}
.house-photo .coil{opacity:0;fill:rgb(var(--coil-rgb,214 28 26));mix-blend-mode:screen;
  filter:blur(3.2px);transition:opacity .45s ease}
.house-photo .coil.on{animation:coil-breathe 3.6s ease-in-out infinite}
.house-photo .coil.on.cool{mix-blend-mode:hard-light}
@keyframes coil-breathe{0%,100%{opacity:.34}50%{opacity:.78}}
.house-photo .unit .halo{animation:mark-pulse 2.8s ease-in-out infinite}
@keyframes mark-pulse{0%,100%{opacity:.26}50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){
  .house-photo .coil.on{animation:none;opacity:.6}
  .house-photo .unit .halo{animation:none;opacity:.45}
}

@media (prefers-reduced-motion:reduce){.house-photo .unit .halo{transition:none}}
.house-photo .fixture{pointer-events:none;cursor:pointer}
.house-photo .fixture .hit{r:26;fill:transparent;stroke:none;pointer-events:all}
.house-photo .fixture circle{transition:fill .6s ease,stroke .6s ease,r .25s ease}
.house-photo .fixture:hover circle:not(.hit),.house-photo .fixture:focus-visible circle:not(.hit){r:8;stroke:#FFFFFF}
.house-photo .fixture:focus-visible{outline:none}
.house-photo .fixture:focus-visible text{text-decoration:underline}
.house-photo .node circle,.house-photo .fixture circle:not(.hit){r:6;fill:rgba(17,17,17,.42);stroke:rgba(247,247,247,.85);stroke-width:1.3;
  transition:fill .6s ease,stroke .6s ease}
.house-photo .fixture.on circle:not(.hit){fill:rgb(var(--fix-rgb,255 122 60));stroke:#FFFFFF}
.house-photo text{font-family:var(--body);font-size:12px;letter-spacing:.04em;text-anchor:middle;
  fill:#FFFFFF;paint-order:stroke;stroke:rgba(17,17,17,.5);stroke-width:1.5;stroke-linejoin:round}
.house-photo .cap{font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:#FFFFFF;stroke-width:2}
.house-photo .fixture .val{opacity:.35;transition:opacity .6s ease}
.house-photo .fixture.on .val{opacity:1}
/* on a narrow picture the scattered labels are noise and the app names every appliance underneath,
   so only the lines and the markers stay, a touch heavier to hold up at the smaller scale */
@media (max-width:860px){.house-photo text{display:none}
  .house-photo .pipe{stroke-width:3.1}.house-photo .pipe.live{stroke-width:3.7}
  .house-photo .stream{stroke-width:3.7}.house-photo .stream.under{stroke-width:3.7}
  .house-photo .fixture circle:not(.hit){r:7.5;stroke-width:1.8}}
@media (prefers-reduced-motion:reduce){.house-photo .stream{animation:none;opacity:0}.house-photo .pipe{transition:none}}
/* the counter: what the conventional gear would cost, what Air costs, and the saving ticking over */
.house-meter{display:block;background:transparent}
.house-meter .hm{padding:13px 18px;border-bottom:1px solid rgba(247,247,247,.07);
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px}
.house-meter .hm:last-child{border-bottom:0}
.hm-k{margin:0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,247,247,.45)}
.hm-v{margin:0;font-family:var(--head);font-weight:400;font-size:21px;line-height:1;color:#F7F7F7;
  font-variant-numeric:tabular-nums}
.hm-n{grid-column:1/-1;margin:4px 0 0;font-size:11px;line-height:1.45;color:rgba(247,247,247,.38)}
.app-head{margin:0;padding:6px 20px 10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,247,247,.38)}
.hbtn.xtra{padding-top:11px;padding-bottom:11px}
.hbtn.xtra b{font-size:14px}
.app-earn{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px;padding:13px 18px;
  border-top:1px solid rgba(247,247,247,.09)}
.app-earn span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,247,247,.45)}
.app-earn b{font-family:var(--head);font-weight:400;font-size:21px;color:#F7F7F7;font-variant-numeric:tabular-nums}
/* the readout and the figures sit under the house, so the panel beside it is only the control */
.house-foot{grid-column:1/-1;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(12,12,12,.14);border:1px solid rgba(12,12,12,.12)}
.house-line{margin:0;padding:16px 18px;background:#F7F7F7}
.house-line b{display:block;font-family:var(--head);font-weight:400;font-size:17px;line-height:1.3;color:var(--black)}
.house-line span{display:block;margin-top:6px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dgrey)}
.house-foot .house-meter{background:#F7F7F7;display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.house-foot .house-meter .hm{padding:13px 18px;border-bottom:1px solid rgba(12,12,12,.08);
  border-left:1px solid rgba(12,12,12,.08)}
.house-foot .hm-k{color:var(--dgrey)}
.house-foot .hm-v{color:var(--black);font-size:19px}
.house-foot .hm-n{color:var(--dgrey)}
@media (max-width:860px){.house-foot{grid-template-columns:1fr}}
/* the room screen: a view of the room and the temperatures you set in it */
.app-house,.app-room{padding:0}
.app-room{display:block;padding:0 0 30px}
.app-room[hidden]{display:none}
.room-top{display:flex;align-items:center;gap:12px;padding:62px 18px 12px}
.room-top b{flex:1;font-family:var(--head);font-weight:400;font-size:17px;color:#F7F7F7}
.room-back{appearance:none;border:0;background:transparent;color:rgba(247,247,247,.7);font-size:20px;
  line-height:1;cursor:pointer;padding:4px 6px}
.room-back:hover{color:#F7F7F7}
.room-power{appearance:none;cursor:pointer;border:1px solid rgba(247,247,247,.18);border-radius:999px;
  background:transparent;color:rgba(247,247,247,.6);font:inherit;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:7px 14px;transition:all .3s ease}
.room-power[aria-pressed=true]{border-color:rgb(var(--btn-rgb,247 247 247));color:rgb(var(--btn-rgb,247 247 247));
  box-shadow:0 0 14px rgba(var(--btn-rgb,247 247 247)/.35)}
.room-shot{display:block;width:calc(100% - 28px);margin:0 14px 14px;border-radius:16px}
.room-set{margin:0 14px 8px;padding:12px 14px;background:#1C1C1E;border:1px solid rgba(247,247,247,.1);
  border-radius:16px}
.room-k{margin:0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,247,247,.42)}
.room-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.room-row b{font-family:var(--head);font-weight:400;font-size:26px;color:#F7F7F7;font-variant-numeric:tabular-nums}
.room-row button{appearance:none;cursor:pointer;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(247,247,247,.18);background:transparent;color:#F7F7F7;font-size:17px;line-height:1;
  transition:background .25s ease,border-color .25s ease}
.room-row button:hover{background:rgba(247,247,247,.08);border-color:rgba(247,247,247,.4)}
.hbtn[data-open]{cursor:pointer}

/* Once the picture and the control stack, the drawn handset, its gloss and the fixed screen height are
   all bulk. The picture of the house comes first, and the control runs under it as a flat panel that
   grows with what is in it. */
@media (max-width:860px){
  .house-wrap{margin-top:22px;gap:14px}
  .house-photo{order:1;width:100%}
  .phone{order:2;width:100%;padding:0;border-radius:16px;background:#0C0C0C;
    box-shadow:0 10px 26px rgba(12,12,12,.28),inset 0 0 0 1px rgba(247,247,247,.1)}
  .ph-btn,.ios-status,.ios-island,.ios-home{display:none}
  .phone-screen{border-radius:16px;aspect-ratio:auto}
  .house-app{position:static;overflow:visible;border-radius:16px}
  .app-top{padding:15px 14px 2px}
  .app-hero{padding:2px 14px 12px}
  .app-hero-v{font-size:34px}
  .app-hero-n{margin-top:5px;font-size:11px}
  .app-head{padding:2px 14px 8px}
  .house-ctl{gap:6px;padding:0 10px 8px}
  .hbtn{padding:10px 12px;border-radius:13px}
  .hbtn::before{border-radius:12px}
  .hbtn::after{right:11px;top:12px;width:7px;height:7px}
  .hbtn b{font-size:13px;padding-right:12px}
  .hbtn span{margin-top:4px;font-size:9px}
  .hbtn i{margin-top:6px;font-size:9px}
  .hbtn.xtra{padding-top:10px;padding-bottom:10px}
  .hbtn.xtra b{font-size:13px}
  .app-earn{padding:11px 14px}
  .app-earn b{font-size:18px}
  .app-tabs{padding:9px 14px 13px;margin-top:10px}
  .room-top{padding:15px 14px 10px}
  .room-top b{font-size:15px}
  .room-shot{width:calc(100% - 20px);margin:0 10px 10px;border-radius:13px}
  .room-set{margin:0 10px 6px;padding:10px 12px}
  .room-row b{font-size:22px}
  .room-row button{width:31px;height:31px}
  .app-room{padding-bottom:14px}
  .house-foot{order:3;margin-top:0}
  .house-line{padding:13px 14px}
  .house-line b{font-size:15px}
  .house-line span{margin-top:5px}
  .house-foot .house-meter .hm{padding:11px 14px}
  .house-foot .hm-v{font-size:17px}
  .house-foot .hm-n{margin-top:3px;font-size:10px;line-height:1.4}
}

/* Three screens deep: the whole house, then a room, then one thing in it. A room lists what it holds
   and what each one is set to, and the thing itself gets the screen when you open it. */
.app-device{display:block;padding:0 0 30px}
.app-device[hidden]{display:none}
.room-dev{display:flex;align-items:center;gap:12px;width:100%;margin:0 14px 8px;appearance:none;cursor:pointer;
  width:calc(100% - 28px);padding:13px 15px;text-align:left;background:#1C1C1E;color:#F7F7F7;
  border:1px solid rgba(247,247,247,.1);border-radius:16px}
.room-dev:hover{background:#232326;border-color:rgba(247,247,247,.2)}
.room-dev:focus-visible{outline:2px solid rgba(247,247,247,.5);outline-offset:2px}
.room-dev .room-k{flex:1}
.room-dev b{font-family:var(--head);font-weight:400;font-size:19px;color:#F7F7F7;font-variant-numeric:tabular-nums}
.room-dev i{font-style:normal;font-size:19px;line-height:1;color:rgba(247,247,247,.35)}
/* A thing in the list shows what it is doing: blue while it cools, red while it
   warms, and nothing at all while it is off. */
.room-dev{transition:background .3s ease,border-color .3s ease}
.room-dev.on{background:rgb(var(--dev-rgb,247 247 247)/.10);border-color:rgb(var(--dev-rgb,247 247 247)/.42)}
.room-dev.on b{color:rgb(var(--dev-rgb,247 247 247))}
.dev-dial b{transition:color .3s ease}
.dev-dial b.on{color:rgb(var(--dev-rgb,247 247 247))}
.dev-where{margin:0;padding:0 18px 2px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,247,247,.42)}
/* Temperature slider: the track runs cool to warm, and the knob takes the colour it is set to. */
.dev-slide{position:relative;height:34px;margin:2px 22px 0;cursor:pointer;touch-action:none}
.dev-slide .dev-track{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,rgb(0 158 255) 0%,rgb(247 247 247) 50%,rgb(214 28 26) 100%);
  opacity:.5}
.dev-slide .dev-fill{position:absolute;left:0;top:14px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,rgb(0 158 255) 0%,rgb(247 247 247) 50%,rgb(214 28 26) 100%);
  background-size:var(--slide-span,100%) 100%;background-repeat:no-repeat;width:50%}
.dev-slide .dev-knob{position:absolute;top:7px;width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:rgb(var(--knob-rgb,247 247 247));border:2px solid #1C1C1E;
  box-shadow:0 0 0 1px rgba(247,247,247,.35),0 0 14px rgba(var(--knob-rgb,247 247 247)/.55);
  transition:background .4s ease,box-shadow .4s ease}
.dev-slide:focus-visible{outline:none}
.dev-slide:focus-visible .dev-knob{box-shadow:0 0 0 2px #F7F7F7,0 0 14px rgba(var(--knob-rgb,247 247 247)/.55)}
.dev-ends{display:flex;justify-content:space-between;margin:2px 22px 14px;
  font:600 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(247,247,247,.42)}
.dev-dial{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 16px 14px;
  padding:26px 18px;background:#1C1C1E;border:1px solid rgba(247,247,247,.1);border-radius:22px}
.dev-dial b{flex:1;text-align:center;font-family:var(--head);font-weight:400;font-size:46px;line-height:1;
  color:#F7F7F7;font-variant-numeric:tabular-nums}
.dev-dial button{appearance:none;cursor:pointer;width:46px;height:46px;flex:0 0 46px;border-radius:50%;
  background:transparent;border:1px solid rgba(247,247,247,.25);color:#F7F7F7;font-size:22px;line-height:1}
.dev-dial button:hover{background:rgba(247,247,247,.08);border-color:rgba(247,247,247,.45)}
.dev-note{margin:0;padding:0 18px;font-size:12px;line-height:1.5;color:rgba(247,247,247,.42)}
@media (max-width:860px){
  .room-dev{margin:0 10px 6px;width:calc(100% - 20px);padding:11px 13px}
  .room-dev b{font-size:17px}
  .dev-dial{margin:14px 12px 12px;padding:20px 14px}
  .dev-dial b{font-size:38px}
  .dev-dial button{width:42px;height:42px;flex:0 0 42px}
  .app-device{padding-bottom:14px}
}
.house-basis{grid-column:1/-1;margin:0;padding:13px 18px;background:#F7F7F7;border-top:1px solid rgba(12,12,12,.08);
  font-size:11px;line-height:1.55;color:var(--dgrey)}
@media (max-width:860px){.house-basis{padding:11px 14px;font-size:10px}}

/* Each room takes the colour of what Air is doing to it, warming red, cooling blue, breathing slowly
   so it reads as working rather than painted on. */
.house-photo .tint{opacity:0;fill:rgb(var(--tint-rgb,228 42 38));mix-blend-mode:screen;
  filter:blur(13px);transition:opacity 1.2s ease,fill 1.2s ease}
.house-photo .tint.on{opacity:.34;animation:air-breathe 4.2s ease-in-out infinite}
@keyframes air-breathe{0%,100%{opacity:.22}50%{opacity:.40}}
@media (prefers-reduced-motion:reduce){.house-photo .tint.on{animation:none;opacity:.3}}
/* blue screened over a warm timber interior barely registers, so cooling is laid on harder */
.house-photo .tint.cool{mix-blend-mode:hard-light}
.house-photo .tint.on.cool{opacity:.36;animation-name:air-breathe-cool}
@keyframes air-breathe-cool{0%,100%{opacity:.26}50%{opacity:.44}}
@media (prefers-reduced-motion:reduce){.house-photo .tint.on.cool{animation:none;opacity:.38}}
/* the whole room is the target, so a tap anywhere in it opens that room */
.house-photo .tint.hitroom{pointer-events:all;cursor:pointer}
.house-photo .tint.hitroom:hover,.house-photo .tint.hitroom:focus-visible{opacity:.5;outline:none}
.app-top em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,247,247,.45)}
.app-top .app-live{margin-left:8px}

/* Inside Air: the module and a fan coil, cut open, with every part a target */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:40px}
.part-title{margin:0 0 12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dgrey)}
.part-shot{position:relative;border-radius:14px;overflow:hidden;background:#EDEBE7}
.part-shot img{display:block;width:100%;height:auto}
.part-shot svg{position:absolute;inset:0;width:100%;height:100%;background:transparent}
.part-shot .pin{cursor:pointer}
.part-shot .pin .hit{fill:transparent;stroke:none;pointer-events:all}
.part-shot .pin .dot{fill:rgba(17,17,17,.42);stroke:rgba(247,247,247,.9);stroke-width:2.2;pointer-events:none;
  transition:fill .35s ease,stroke .35s ease,r .25s ease}
.part-shot .pin:hover .dot,.part-shot .pin:focus-visible .dot{r:13;stroke:#FFFFFF}
.part-shot .pin:focus,.part-shot .pin:focus-visible,.part-shot .pin circle:focus{outline:none}
.part-shot .pin:focus-visible .dot{stroke-dasharray:2.6 2.6}
.part-shot .pin.on .dot{fill:var(--black);stroke:#FFFFFF;r:13}
.part-read{margin-top:14px;padding:15px 17px;background:#F7F7F7;border:1px solid rgba(12,12,12,.12)}
.part-read b{display:block;font-family:var(--head);font-weight:400;font-size:17px;color:var(--black)}
.part-read p{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--dgrey)}
@media (max-width:860px){.parts{grid-template-columns:1fr;gap:26px;margin-top:28px}
  .part-read{padding:13px 14px}.part-read b{font-size:15px}.part-read p{font-size:12px}}
/* the covers are on until you hover: then they come off and the parts underneath are named */
.part-shot .inner,.part-shot svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity .5s ease}
.part-shot .inner{object-fit:cover}
.part-shot.open .inner,.part-shot.open svg{opacity:1}
.part-shot .cover{transition:opacity .5s ease}
.part-shot.open .cover{opacity:0}
.part-shot{cursor:pointer}
@media (prefers-reduced-motion:reduce){.part-shot .inner,.part-shot svg,.part-shot .cover{transition:none}}