:root{
  --black:#090b0c;
  --black2:#111415;
  --paper:#f1ede5;
  --paper2:#ded7cb;
  --ink:#151717;
  --muted:#79756d;
  --line:rgba(21,23,23,.14);
  --gold:#b79a66;
  --blue:#9bb6ff;
  --mint:#95d5b3;
  --amber:#e1b570;
  --serif:"Iowan Old Style",Baskerville,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}

.site-header{
  position:absolute;
  z-index:20;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1280px,calc(100% - 80px));
  height:88px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:var(--paper);
}
.brand{justify-self:start}
.brand strong{
  display:block;
  font:400 25px/1 var(--serif);
  letter-spacing:.15em;
}
.brand span{
  display:block;
  margin-top:7px;
  color:var(--blue);
  font-size:8px;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.site-header nav{
  display:flex;
  gap:26px;
  font-size:10px;
}
.site-header nav a{
  color:rgba(241,237,229,.78);
  position:relative;
}
.site-header nav a:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-11px;
  height:1px;
  background:var(--blue);
  transition:right .2s;
}
.site-header nav a:hover:after{right:0}
.header-cta{
  justify-self:end;
  border:1px solid rgba(255,255,255,.3);
  padding:13px 18px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.kicker{
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--gold);
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.kicker:before{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
}

.hero{
  min-height:890px;
  background:var(--black);
  color:var(--paper);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
  gap:85px;
  padding:180px max(64px,calc((100vw - 1280px)/2)) 110px;
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 76% 28%,rgba(155,182,255,.16),transparent 29%),
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 35%);
}
.hero-copy,.index-card{position:relative;z-index:1}
.hero h1{
  font:400 clamp(64px,7vw,110px)/.91 var(--serif);
  letter-spacing:-.045em;
  margin:55px 0 34px;
}
.hero h1 em{
  font-style:italic;
  color:var(--blue);
}
.hero-copy>p{
  max-width:690px;
  color:rgba(241,237,229,.72);
  font-size:17px;
  line-height:1.7;
}
.hero-meta{
  margin-top:28px;
  color:rgba(241,237,229,.48);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.actions{
  display:flex;
  gap:12px;
  margin-top:35px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 23px;
  border:1px solid rgba(255,255,255,.28);
  font-size:10px;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--paper);
}
.btn.light{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}

.index-card{
  align-self:center;
  background:#101314;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 90px rgba(0,0,0,.3);
}
.card-top{
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  border-bottom:1px solid rgba(255,255,255,.11);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(241,237,229,.52);
}
.card-top b{color:var(--paper)}
.product-line{
  min-height:83px;
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:18px;
  padding:0 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.product-line:last-child{border-bottom:0}
.product-line i{
  font-style:normal;
  color:var(--gold);
  font-size:10px;
}
.product-line strong{
  font:400 20px/1.1 var(--serif);
}
.product-line small{
  display:block;
  margin-top:7px;
  color:rgba(241,237,229,.44);
  font:400 9px/1.2 var(--sans);
  letter-spacing:.03em;
}
.product-line em{
  font-style:normal;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber);
  white-space:nowrap;
}
.product-line em.public,
.product-line em.stable{color:var(--mint)}

.intro,.portfolio,.stack,.principles,.divisions,.contact{
  padding-left:max(64px,calc((100vw - 1280px)/2));
  padding-right:max(64px,calc((100vw - 1280px)/2));
}

.intro{
  padding-top:130px;
  padding-bottom:130px;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:70px;
}
.intro h2,.section-head h2,.contact h2{
  font:400 clamp(48px,5vw,76px)/1 var(--serif);
  letter-spacing:-.04em;
  margin-bottom:42px;
}
.intro h2 em{
  font-style:italic;
  color:var(--gold);
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px;
  max-width:880px;
}
.two-col p,.lead,.contact p{
  font-size:15px;
  line-height:1.75;
  color:#595750;
}
.two-col strong{color:var(--ink)}

.portfolio{
  padding-top:120px;
  padding-bottom:130px;
  background:var(--paper2);
}
.section-head{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:70px;
  align-items:start;
  margin-bottom:70px;
}
.section-head h2{margin:0}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.product{
  background:var(--paper);
  border:1px solid rgba(21,23,23,.12);
  min-height:610px;
  display:flex;
  flex-direction:column;
}
.product.flagship{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:auto 1fr;
  min-height:610px;
}
.product.flagship .eyebrow{grid-column:1/-1}

.eyebrow{
  min-height:58px;
  border-bottom:1px solid var(--line);
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#77736b;
}
.eyebrow span{
  color:#33754f;
  text-align:right;
}

.visual{
  margin:22px;
  background:var(--black2);
  color:var(--paper);
  min-height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  text-align:center;
}
.flagship .visual{
  min-height:auto;
  margin:22px;
}
.code{
  font-family:monospace;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
  text-align:left;
}
.code div{
  font-size:28px;
  color:var(--amber);
}
.code small{
  color:rgba(241,237,229,.55);
  font-size:12px;
}
.code b{
  font-weight:400;
  color:var(--mint);
  font-size:13px;
}
.flow{
  font:400 20px/1.5 var(--serif);
  letter-spacing:.02em;
}

.body{
  padding:24px 28px 30px;
  margin-top:auto;
}
.body h3{
  font:400 43px/1 var(--serif);
  letter-spacing:-.035em;
  margin-bottom:20px;
}
.body p{
  color:#605e57;
  font-size:14px;
  line-height:1.7;
}
.body>a{
  display:inline-flex;
  margin-top:20px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px;
}
.tags span{
  border:1px solid var(--line);
  padding:7px 9px;
  font-size:8px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#65625c;
}
.compact{min-height:360px}
.compact .body{margin-top:0}
.compact .body h3{font-size:38px}

.stack{
  background:var(--black);
  color:var(--paper);
  padding-top:130px;
  padding-bottom:135px;
}
.stack .section-head{margin-bottom:35px}
.stack .lead{
  max-width:760px;
  color:rgba(241,237,229,.62);
  margin:0 0 55px 330px;
}
.tool-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid rgba(255,255,255,.12);
  border-top:1px solid rgba(255,255,255,.12);
}
.tool-grid a{
  min-height:230px;
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:27px;
  display:flex;
  flex-direction:column;
  transition:background .2s;
}
.tool-grid a:hover{background:#15191a}
.tool-grid i{
  font-style:normal;
  color:var(--gold);
  font-size:9px;
  letter-spacing:.1em;
}
.tool-grid strong{
  font:400 27px/1.1 var(--serif);
  margin:28px 0 15px;
}
.tool-grid span{
  color:rgba(241,237,229,.48);
  font-size:12px;
  line-height:1.55;
}

.principles{
  padding-top:130px;
  padding-bottom:130px;
}
.principle-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.principle-grid>div{
  padding:30px 26px 38px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-height:250px;
}
.principle-grid i{
  font-style:normal;
  color:var(--gold);
  font-size:10px;
}
.principle-grid strong{
  display:block;
  font:400 27px/1.1 var(--serif);
  margin:37px 0 18px;
}
.principle-grid p{
  color:#66635c;
  font-size:12px;
  line-height:1.6;
}

.divisions{
  padding-top:115px;
  padding-bottom:115px;
  background:#e7e0d5;
}
.division-list{
  margin-top:50px;
  border-top:1px solid var(--line);
}
.division-list>a,
.division-list>div{
  min-height:105px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:60px 1fr 1fr 30px;
  align-items:center;
  gap:25px;
}
.division-list i{
  font-style:normal;
  color:var(--gold);
  font-size:10px;
}
.division-list strong{
  font:400 28px/1 var(--serif);
}
.division-list span{
  font-size:12px;
  line-height:1.5;
  color:#66635c;
}
.division-list>div{color:#445f85}

.contact{
  background:var(--black2);
  color:var(--paper);
  padding-top:125px;
  padding-bottom:125px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:80px;
  align-items:end;
}
.contact h2{margin-top:35px}
.contact p{
  color:rgba(241,237,229,.6);
  max-width:660px;
}
.contact>div:last-child{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.contact small{
  color:rgba(241,237,229,.46);
  font-size:10px;
  line-height:1.7;
}

footer{
  background:#070809;
  color:var(--paper);
  padding:75px max(64px,calc((100vw - 1280px)/2)) 35px;
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:55px;
  position:relative;
}
.footer-brand strong{
  display:block;
  font:400 27px/1 var(--serif);
  letter-spacing:.15em;
}
.footer-brand span{
  display:block;
  color:var(--blue);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-top:8px;
}
.footer-brand p{
  max-width:360px;
  color:rgba(241,237,229,.48);
  font-size:11px;
  line-height:1.65;
  margin-top:24px;
}
footer>div:not(.footer-brand){
  display:flex;
  flex-direction:column;
  gap:11px;
}
footer b{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gold);
  margin-bottom:7px;
}
footer a,footer span{
  font-size:10px;
  color:rgba(241,237,229,.58);
}
.copyright{
  grid-column:1/-1;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:25px;
  margin-top:30px;
  font-size:9px!important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:1050px){
  .site-header{grid-template-columns:1fr auto}
  .site-header nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:155px}
  .index-card{max-width:760px}
  .intro,.section-head{grid-template-columns:1fr;gap:30px}
  .stack .lead{margin-left:0}
  .product.flagship{display:flex}
  .product.flagship .eyebrow{grid-column:auto}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .principle-grid{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  footer{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  .site-header{
    width:calc(100% - 36px);
    height:72px;
  }
  .brand strong{font-size:21px}
  .header-cta{padding:11px 12px}
  .hero,.intro,.portfolio,.stack,.principles,.divisions,.contact{
    padding-left:20px;
    padding-right:20px;
  }
  .hero{
    min-height:auto;
    padding-top:125px;
    padding-bottom:75px;
  }
  .hero h1{font-size:58px}
  .hero-copy>p{font-size:15px}
  .hero-meta{line-height:1.7}
  .actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .index-card{margin-top:20px}
  .product-line{
    grid-template-columns:30px 1fr;
    gap:11px;
    padding:12px 16px;
  }
  .product-line em{grid-column:2}
  .intro,.portfolio,.stack,.principles,.divisions,.contact{
    padding-top:85px;
    padding-bottom:85px;
  }
  .intro h2,.section-head h2,.contact h2{font-size:44px}
  .two-col,.grid,.tool-grid,.principle-grid{grid-template-columns:1fr}
  .eyebrow{
    align-items:flex-start;
    flex-direction:column;
    padding:17px 20px;
  }
  .product{min-height:auto}
  .visual{
    min-height:180px;
    margin:14px;
  }
  .body{padding:18px 20px 26px}
  .body h3{font-size:36px}
  .division-list>a,.division-list>div{
    grid-template-columns:35px 1fr 20px;
    padding:20px 0;
  }
  .division-list span{grid-column:2}
  .contact{gap:40px}
  footer{
    padding:60px 20px 30px;
    grid-template-columns:1fr;
    gap:35px;
  }
  .copyright{grid-column:1}
}

/* Standard secondary CTA for public Labs products */
.secondary-project-link{
  display:inline-block;
  margin-left:18px;
  font-size:10px;
  line-height:1.4;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  color:inherit;
  opacity:.66;
}
.secondary-project-link:hover{opacity:1;text-decoration:underline;}
@media (max-width:720px){
  .secondary-project-link{display:block;margin:10px 0 0 0;}
}