:root{
  --paper:#FDF9F0;
  --paper-2:#FDF9F0;
  --yellow:#ffdf00;
  --orange:#f28b24;
  --red:#e13a2d;
  --black:#101010;
  --line:rgba(16,16,16,.22);
  --max:1480px;
  --pad:clamp(18px,3vw,48px);
  --thin:300;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;
  background:var(--paper);
  color:var(--black);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:var(--thin);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,1.4vw,24px);
  padding-left:var(--pad);
  padding-right:var(--pad);
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}
.site-header{
  position:fixed;
  z-index:40;
  inset:0 0 auto 0;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad);
  border-bottom:0;
  background:rgba(253,249,240,.84);
  backdrop-filter:blur(10px);
}
.brand{
  display:inline-flex;
  align-items:center;
}
.brand img{
  display:block;
  width:clamp(138px,12vw,190px);
  height:auto;
}
.desktop-nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:400;
}
.nav-cta{
  background:var(--yellow);
  color:var(--black);
  padding:12px 16px;
}
.menu-button{
  display:none;
  align-items:center;
  gap:10px;
  border:0;
  background:none;
  padding:10px 0;
  cursor:pointer;
  color:var(--yellow);
  -webkit-tap-highlight-color:transparent;
}
.burger{
  width:25px;
  height:17px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.burger i{
  display:block;
  width:25px;
  height:2px;
  background:var(--yellow);
  transform-origin:center;
  transition:transform .22s ease, opacity .18s ease;
}
.menu-button[aria-expanded="true"] .burger i:nth-child(1){
  transform:translateY(7.5px) rotate(45deg);
}
.menu-button[aria-expanded="true"] .burger i:nth-child(2){
  opacity:0;
}
.menu-button[aria-expanded="true"] .burger i:nth-child(3){
  transform:translateY(-7.5px) rotate(-45deg);
}
.mobile-menu{
  position:fixed;
  z-index:39;
  inset:0;
  background:var(--paper);
  padding:20px var(--pad) 32px;
  overflow:auto;
}
.mobile-menu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
}
.mobile-menu-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:400;
}
.mobile-menu-close{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  background:none;
  color:var(--yellow);
  padding:8px 0;
  cursor:pointer;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
}
.mobile-menu-close span:first-child{
  font-size:25px;
  line-height:1;
  font-weight:200;
}
.mobile-menu-links{
  margin-top:14vh;
}
.mobile-menu-links a{
  display:grid;
  grid-template-columns:44px 1fr;
  align-items:baseline;
  gap:12px;
  padding:13px 0 17px;
  border-bottom:1px solid rgba(16,16,16,.18);
  font-size:clamp(35px,10vw,64px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:200;
}
.mobile-menu-links a span{
  font-size:10px;
  line-height:1;
  letter-spacing:.11em;
  font-weight:400;
}
.hero{
  padding-top:72px;
  min-height:100svh;
}
.hero-film{
  height:min(68vw,72svh);
  min-height:430px;
  max-height:860px;
  background:#FDF9F0;
  overflow:hidden;
}
.hero-film video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:var(--paper);
}
.hero-copy{
  padding-top:30px;
  padding-bottom:70px;
  align-items:end;
}
.eyebrow{
  grid-column:1/3;
  font-size:11px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.12em;
  line-height:1.4;
}
.hero h1{
  grid-column:3/9;
  margin:0;
  font-size:clamp(50px,6.8vw,124px);
  line-height:.84;
  letter-spacing:-.07em;
  font-weight:200;
}
.hero-intro{
  grid-column:9/12;
  align-self:end;
  max-width:31ch;
  margin:0 0 6px;
  font-size:clamp(17px,1.4vw,23px);
  line-height:1.24;
}
.text-link{
  grid-column:12/13;
  align-self:end;
  justify-self:end;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:400;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.manifesto{
  padding-top:80px;
  padding-bottom:160px;
}
.manifesto-copy{grid-column:4/12}
.display-copy{
  margin:0 0 46px;
  font-size:clamp(44px,6.2vw,108px);
  line-height:.92;
  letter-spacing:-.065em;
  max-width:13ch;
}
.body-large{
  font-size:clamp(23px,2.7vw,44px);
  line-height:1.06;
  letter-spacing:-.035em;
  max-width:23ch;
  margin:0 0 32px;
}
.note{
  max-width:48ch;
  font-size:14px;
  line-height:1.45;
  margin:0;
}
.states{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,5vw,90px);
  padding:130px var(--pad) 150px;
  max-width:var(--max);
  margin:0 auto;
}
.state{
  min-height:360px;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  border:0;
  background:transparent !important;
  color:var(--black) !important;
}
.state::before{
  content:"";
  width:min(18vw,230px);
  aspect-ratio:1;
  border-radius:50%;
  display:block;
  margin-bottom:54px;
}
.state-no{
  position:absolute;
  top:0;
  left:0;
  font-size:11px;
  letter-spacing:.1em;
}
.state strong{
  font-size:clamp(44px,5vw,86px);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:200;
}
.state > span:last-child{
  margin-top:12px;
  font-size:14px;
}
.state-white::before{background:#fff;border:1px solid rgba(16,16,16,.14)}
.state-orange::before{background:var(--orange)}
.state-red::before{background:var(--red)}
.exploded{
  padding-top:135px;
  padding-bottom:160px;
}
.exploded-copy{
  grid-column:4/8;
}
.exploded-copy h2,.nest-copy h2,.made h2{
  margin:0;
  font-size:clamp(50px,6vw,104px);
  line-height:.9;
  font-weight:200;
  letter-spacing:-.065em;
}
.exploded-copy p{
  font-size:18px;
  margin:26px 0 0;
}
.diagram-wrap{
  grid-column:3/12;
  margin-top:72px;
  background:transparent;
}
.diagram{display:block;width:100%;height:auto}
.diagram .guide-lines line{
  stroke:rgba(16,16,16,.18);
  stroke-width:1;
  stroke-dasharray:3 8;
}
.diagram .component rect,
.diagram .component circle{
  fill:none;
  stroke:var(--black);
  stroke-width:2;
}
.diagram .component line{
  stroke:var(--black);
  stroke-width:1.5;
}
.diagram text{
  fill:var(--black);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  letter-spacing:.04em;
}
.diagram text+text{
  font-size:13px;
  font-weight:300;
  letter-spacing:0;
}
.spec-list{
  grid-column:4/12;
  margin:70px 0 0;
}
.spec-list div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:16px 0 17px;
}
.spec-list div:last-child{border-bottom:1px solid var(--black)}
.spec-list dt{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:400;
}
.spec-list dd{
  margin:0;
  font-size:18px;
}

.aria-section{
  padding-top:150px;
  padding-bottom:155px;
}
.aria-copy{
  grid-column:4/9;
}
.aria-copy h2{
  margin:0;
  font-size:clamp(50px,6vw,104px);
  line-height:.9;
  font-weight:200;
  letter-spacing:-.065em;
}
.aria-copy p{
  margin:30px 0 0;
  font-size:clamp(21px,2vw,30px);
  line-height:1.14;
  max-width:27ch;
}
.aria-copy strong{
  font-weight:400;
}
.aria-note{
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:400;
  margin-top:42px !important;
}
.aria-map{
  grid-column:9/13;
  position:relative;
  min-height:540px;
  align-self:end;
}
.aria-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(16,16,16,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,.09) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.45;
}
.node{
  position:absolute;
  width:18px;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--yellow);
  border:1px solid rgba(16,16,16,.18);
  box-shadow:0 0 0 14px rgba(255,223,0,.12);
}
.n1{top:9%; left:16%;}
.n2{top:24%; right:12%;}
.n3{top:36%; left:42%;}
.n4{top:49%; left:10%;}
.n5{top:63%; right:24%;}
.n6{bottom:18%; left:30%;}
.n7{bottom:8%; right:8%;}

.made{
  padding-top:135px;
  padding-bottom:160px;
}
.made-title{grid-column:4/12}
.made-copy{
  grid-column:7/12;
  margin-top:66px;
  font-size:clamp(21px,2.2vw,34px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.made-copy p{margin:0 0 28px}
.materials{
  grid-column:1/13;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,4vw,70px);
  margin-top:110px;
}
.material-block{
  min-height:250px;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:0;
  background:transparent !important;
  color:var(--black) !important;
}
.material-block span{
  font-size:11px;
  font-weight:400;
  letter-spacing:.12em;
  display:inline-block;
  width:max-content;
  border-bottom:6px solid var(--yellow);
  padding-bottom:4px;
}
.material-block p{
  margin:0;
  max-width:25ch;
  font-size:22px;
  line-height:1.08;
}

.packaging{
  padding-top:150px;
  padding-bottom:170px;
}
.packaging-copy{
  grid-column:4/10;
}
.packaging-copy h2{
  margin:0;
  font-size:clamp(50px,6vw,104px);
  line-height:.9;
  font-weight:200;
  letter-spacing:-.065em;
}
.packaging-copy p{
  margin:34px 0 0;
  font-size:clamp(21px,2vw,30px);
  line-height:1.14;
  max-width:28ch;
}
.packaging-image{
  margin:0;
}
.packaging-image img{
  width:100%;
  height:auto;
  display:block;
}
.packaging-image.p1{grid-column:1/7; margin-top:72px;}
.packaging-image.p2{grid-column:7/13; margin-top:165px;}
.packaging-image.p3{grid-column:3/11; margin-top:95px;}

@media (max-width:900px){
  .packaging{
    padding-top:95px;
    padding-bottom:110px;
  }
  .packaging-copy{
    grid-column:1/7;
    margin-top:58px;
  }
  .packaging-image.p1,
  .packaging-image.p2,
  .packaging-image.p3{
    grid-column:1/7;
    margin-top:36px;
  }
}

.nest{
  padding-top:150px;
  padding-bottom:180px;
  background:var(--paper);
}
.nest-copy{
  grid-column:4/11;
}
.nest-copy p{
  font-size:clamp(20px,2.2vw,32px);
  line-height:1.16;
  max-width:34ch;
  margin:44px 0 0;
}
.nest-note{
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:400;
  margin-top:42px !important;
}
.support{
  padding-top:135px;
  padding-bottom:100px;
}
.support-list{grid-column:4/12}
details{
}
details:last-child{border-bottom:1px solid var(--black)}
summary{
  list-style:none;
  cursor:pointer;
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:clamp(25px,3vw,48px);
  letter-spacing:-.04em;
}
summary::-webkit-details-marker{display:none}
summary span{font-size:25px;font-weight:200}
details[open] summary span{transform:rotate(45deg)}
details p{
  margin:0 0 28px;
  max-width:60ch;
  font-size:16px;
  line-height:1.45;
}
.preorder{
  background:var(--yellow);
}
.preorder-inner{
  min-height:88svh;
  max-width:var(--max);
  margin:0 auto;
  padding:50px var(--pad) 58px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:18px;
  align-content:end;
}
.preorder .eyebrow{grid-column:1/4;align-self:start}
.price{
  grid-column:9/13;
  justify-self:end;
  align-self:start;
  font-size:clamp(50px,8vw,130px);
  line-height:.8;
  letter-spacing:-.065em;
  font-weight:200;
}
.preorder h2{
  grid-column:1/10;
  margin:15vh 0 0;
  font-size:clamp(78px,13vw,220px);
  line-height:.76;
  letter-spacing:-.08em;
  font-weight:200;
}
.preorder p{
  grid-column:1/6;
  max-width:32ch;
  font-size:clamp(19px,2vw,30px);
  line-height:1.12;
  margin:30px 0 0;
}
.preorder-button{
  grid-column:9/13;
  align-self:end;
  border:1px solid var(--black);
  background:var(--black);
  color:var(--paper);
  padding:18px 20px;
  min-height:62px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  cursor:pointer;
}
.preorder .micro{
  grid-column:9/13;
  font-size:11px;
  margin:8px 0 0;
  max-width:none;
}
.footer{
  padding-top:38px;
  padding-bottom:40px;
  min-height:230px;
  align-content:start;
}
.footer-brand{grid-column:1/4}
.footer>p{grid-column:4/7;margin:2px 0 0;font-size:14px}
.footer-links{
  grid-column:9/13;
  display:grid;
  gap:8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:400;
}
.footer .copyright{
  grid-column:1/13;
  align-self:end;
  margin-top:90px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.preorder-dialog{
  width:min(680px,calc(100% - 32px));
  padding:0;
  border:1px solid var(--black);
  background:var(--paper);
  color:var(--black);
}
.preorder-dialog::backdrop{background:rgba(16,16,16,.42)}
.preorder-dialog>div,
.preorder-dialog>h2,
.preorder-dialog>p,
.preorder-dialog>form{margin-left:32px;margin-right:32px}
.preorder-dialog .eyebrow{margin-top:32px}
.preorder-dialog h2{
  font-size:clamp(54px,8vw,90px);
  line-height:.82;
  letter-spacing:-.065em;
  font-weight:200;
  margin-top:70px;
  margin-bottom:24px;
}
.preorder-dialog>p{font-size:17px;max-width:38ch}
.dialog-close{
  position:absolute;
  top:17px;right:20px;
  border:0;background:none;
  font-size:32px;font-weight:200;
  cursor:pointer;
}
#interest-form{margin-top:55px;margin-bottom:32px}
#interest-form label{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:400;
  margin-bottom:8px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr auto;
  border:1px solid var(--black);
}
.form-row input{
  border:0;
  background:transparent;
  min-width:0;
  padding:17px 14px;
  outline:none;
  font-size:16px;
}
.form-row button{
  border:0;
  border-left:1px solid var(--black);
  background:var(--yellow);
  padding:0 20px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  cursor:pointer;
}
.form-note{
  font-size:10px;
  margin:9px 0 0;
  text-transform:uppercase;
  letter-spacing:.06em;
}

@media (max-width: 900px){
  .desktop-nav{display:none}
  .menu-button{display:flex}
  .site-header{height:62px}
  .mobile-menu{top:0}
  .hero{padding-top:62px}
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hero-film{height:62svh;min-height:390px}
  .hero-film video{object-fit:cover}
  .hero-copy{padding-top:20px;padding-bottom:48px}
  .eyebrow{grid-column:1/3}
  .hero h1{grid-column:1/7;margin-top:58px}
  .hero-intro{grid-column:2/7;margin-top:28px}
  .text-link{display:none}
  .manifesto{padding-top:58px;padding-bottom:70px}
  .manifesto-copy{grid-column:1/7;margin-top:65px}
  .states{grid-template-columns:1fr}
  .state{min-height:250px;border-right:0;border-bottom:1px solid var(--black)}
  .state:last-child{border-bottom:0}
  .exploded{padding-top:60px;padding-bottom:75px}
  .exploded-copy{grid-column:1/7;margin-top:60px}
  .diagram-wrap{grid-column:1/7;margin-top:50px}
  .diagram text{font-size:19px}
  .diagram text+text{font-size:15px}
  .spec-list{grid-column:1/7;margin-top:48px}
  .spec-list div{grid-template-columns:1fr}
  .made{padding-top:60px;padding-bottom:70px}
  .made-title{grid-column:1/7;margin-top:62px}
  .made-copy{grid-column:2/7;margin-top:48px}
  .materials{grid-column:1/7;grid-template-columns:1fr;margin-top:60px}
  .material-block{min-height:260px;border-right:0;border-bottom:1px solid var(--black)}
  .material-block:last-child{border-bottom:0}
  .nest{padding-top:60px;padding-bottom:72px}
  .nest-mark{grid-column:1/7;margin-top:54px}
  .nest-copy{grid-column:1/7;margin-top:42px}
  .support{padding-top:60px;padding-bottom:72px}
  .support-list{grid-column:1/7;margin-top:50px}
  .preorder-inner{grid-template-columns:repeat(6,minmax(0,1fr));min-height:82svh;padding-top:34px}
  .preorder .eyebrow{grid-column:1/3}
  .price{grid-column:4/7}
  .preorder h2{grid-column:1/7;margin-top:20vh}
  .preorder p{grid-column:1/6}
  .preorder-button{grid-column:1/7;margin-top:34px}
  .preorder .micro{grid-column:1/7}
  .footer-brand{grid-column:1/4}
  .footer>p{grid-column:4/7}
  .footer-links{grid-column:1/7;margin-top:55px}
  .footer .copyright{grid-column:1/7;margin-top:65px}
}
@media (max-width: 560px){
  :root{--pad:18px}
  .brand{font-size:18px}
  .hero-film{height:58svh;min-height:360px}
  .hero h1{font-size:clamp(58px,19vw,88px)}
  .hero-intro{grid-column:1/7;font-size:19px}
  .display-copy{font-size:clamp(46px,14vw,76px)}
  .body-large{font-size:25px}
  .diagram-wrap{margin-left:-18px;margin-right:-18px;grid-column:1/7}
  .diagram text{font-size:17px}
  .diagram text+text{font-size:13px}
  .spec-list dd{font-size:17px}
  .made-copy{grid-column:1/7;font-size:24px}
  .preorder h2{font-size:24vw}
  .form-row{grid-template-columns:1fr}
  .form-row button{border-left:0;border-top:1px solid var(--black);min-height:52px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-film video{display:none}
  .hero-film{background:var(--paper) center/contain no-repeat url(https://dnznrvs05pmza.cloudfront.net/gpt_image_2_5_flare/60e55db0-38fc-44a8-a0c8-f19c866cc059/Use_the_supplied_Little_Canary_product_image_as_the_exact_design_reference__Create_ONE_clean_premium_0.png?_jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXlIYXNoIjoiYjI2ODAxYjU2N2YyZGU1OCIsImJ1Y2tldCI6InJ1bndheS10YXNrLWFydGlmYWN0cyIsInN0YWdlIjoicHJvZCIsImV4cCI6MTc5MDczMTgyOX0.V6AOd0XfkLqr74Dk71xHhj5WjoZEnnMdNdVELkVR-2Q)}
}

@media (max-width:900px){
  .states{
    grid-template-columns:1fr;
    padding-top:90px;
    padding-bottom:100px;
    gap:85px;
  }
  .state{min-height:auto}
  .state::before{
    width:min(46vw,210px);
    margin-bottom:34px;
  }
  .nest{padding-top:95px;padding-bottom:115px}
  .nest-copy{grid-column:1/7;margin-top:54px}
}

@media (max-width:900px){
  .aria-section{
    padding-top:95px;
    padding-bottom:110px;
  }
  .aria-copy{
    grid-column:1/7;
    margin-top:58px;
  }
  .aria-map{
    grid-column:1/7;
    min-height:320px;
    margin-top:48px;
  }
}


/* Final exploded-diagram visual */
.diagram-wrap{
  grid-column:2/12;
  margin-top:78px;
  margin-bottom:12px;
}
.diagram-wrap img{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width:900px){
  .diagram-wrap{
    grid-column:1/7;
    margin-top:42px;
    margin-bottom:4px;
  }
}

body.menu-open{
  overflow:hidden;
}