:root {
  --paper:#eee5d4;
  --paper2:#e6dac6;
  --ink:#17231f;
  --blue:#2a70a1;
  --olive:#354536;
  --line:rgba(23,35,31,.22)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

.container {
  width:min(1440px,calc(100% - 72px));
  margin:auto
}

.mono,.kicker {
  font:600 12px Manrope,sans-serif;
  letter-spacing:0;
  text-transform:none
}

.page-hero {
  min-height:72vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
  border-bottom:1px solid var(--line)
}

.page-hero-copy {
  padding:110px 30px 90px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.page-hero h1 {
  font:400 clamp(70px,9vw,145px)/.8 'Instrument Serif';
  letter-spacing:-.065em;
  margin:24px 0 40px
}

.page-hero p {
  font-size:17px;
  line-height:1.75;
  max-width:580px;
  color:#4f4d45
}

.page-hero-media {
  min-height:72vh;
  position:relative;
  overflow:hidden
}

.page-hero-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.78)
}

.page-hero-media:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(23,35,31,.12),transparent 55%)
}

.section {
  padding:130px 0
}

.section-head {
  display:grid;
  grid-template-columns:.6fr 1.4fr;
  gap:70px;
  margin-bottom:80px
}

.section-head h2 {
  font:400 clamp(58px,7vw,104px)/.86 'Instrument Serif';
  letter-spacing:-.05em;
  margin:0
}

.section-head p {
  font-size:17px;
  line-height:1.8;
  max-width:650px;
  color:#4f4d45
}

.labs-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}

.lab {
  min-height:560px;
  padding:34px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  display:flex;
  flex-direction:column
}

.lab:nth-child(1) {
  background:#e7ddca
}

.lab:nth-child(2) {
  background:#eee5d4
}

.lab:nth-child(3) {
  background:#eee5d4
}

.lab:nth-child(4) {
  background:#e7ddca
}

.lab .num {
  font:600 12px Manrope,sans-serif;
  letter-spacing:0;
  color:#777066
}

.lab .type {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  width:fit-content;
  max-width:100%;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(23,35,31,.2);
  background-color:rgba(238,229,212,.78);
  background-image:radial-gradient(circle,rgba(109,113,82,.3) 1px,transparent 1.5px);
  background-size:8px 8px;
  font:600 12px Manrope,sans-serif;
  letter-spacing:0;
  text-transform:none;
  color:#4f4d45;
  margin-top:12px
}

.lab h2 {
  font:400 clamp(56px,6vw,88px)/.88 'Instrument Serif';
  letter-spacing:-.05em;
  margin:90px 0 24px;
  max-width:650px
}

.lab p {
  font-size:16px;
  line-height:1.8;
  color:#4f4d45;
  max-width:560px;
  margin:0 0 18px
}

.lab .detail {
  margin-top:auto;
  padding-top:32px;
  border-top:1px solid rgba(23,35,31,.18);
  font-size:14px;
  line-height:1.7;
  color:#4f4d45;
  max-width:560px
}

.lab .detail strong {
  display:block;
  font:600 12px Manrope,sans-serif;
  letter-spacing:0;
  text-transform:none;
  color:#777066;
  margin-bottom:8px;
  font-weight:400
}

.lab:after {
  content:'';
  position:absolute;
  width:120px;
  height:120px;
  right:28px;
  top:28px;
  background-image:radial-gradient(circle,var(--olive) 0 2px,transparent 3px);
  background-size:14px 14px;
  opacity:.22
}

.lab:nth-child(1):after {
  background-image:repeating-radial-gradient(circle at 54% 48%,transparent 0 8px,rgba(53,69,54,.32) 9px 10px,transparent 11px 18px);
  background-size:120px 120px;
  opacity:.55
}

.lab:nth-child(2):after {
  background-image:radial-gradient(circle,var(--blue) 0 1.5px,transparent 2px),repeating-linear-gradient(45deg,transparent 0 10px,rgba(42,112,161,.2) 10px 11px,transparent 11px 21px),repeating-linear-gradient(-45deg,transparent 0 10px,rgba(42,112,161,.2) 10px 11px,transparent 11px 21px);
  background-size:14px 14px,42px 42px,42px 42px;
  opacity:.34
}

.lab:nth-child(3):after {
  background-image:radial-gradient(circle at 10px 10px,var(--olive) 0 2px,transparent 2.5px),linear-gradient(30deg,transparent 48.5%,rgba(53,69,54,.28) 49.5% 50.5%,transparent 51.5%),linear-gradient(-30deg,transparent 48.5%,rgba(53,69,54,.28) 49.5% 50.5%,transparent 51.5%);
  background-size:32px 32px,32px 32px,32px 32px;
  opacity:.42
}

.lab:nth-child(4):after {
  background-image:repeating-conic-gradient(from 45deg,rgba(42,112,161,.26) 0 25%,transparent 0 50%);
  background-size:16px 16px;
  opacity:.48
}

.dark-band {
  background:var(--ink);
  color:var(--paper);
  padding:130px 0
}

.dark-band .section-head p {
  color:rgba(238,229,212,.68)
}

.dark-band .statement {
  font:400 clamp(38px,4vw,64px)/1.02 'Instrument Serif';
  max-width:1000px;
  margin:0
}

@media(max-width:900px) {
  .page-hero {
    grid-template-columns:1fr
  }

  .page-hero-media {
    min-height:55vh
  }

  .page-hero-copy {
    padding:80px 0
  }

  .section-head {
    grid-template-columns:1fr;
    gap:35px
  }

  .labs-grid {
    grid-template-columns:1fr
  }

}

@media(max-width:650px) {
  .container {
    width:min(100% - 34px,1440px)
  }

  .page-hero h1 {
    font-size:72px
  }

  .lab h2 {
    font-size:52px
  }

}

/* Mobile: tighter hero */
@media(max-width:700px) {
  .page-hero-copy {
    padding:130px 0 50px
  }

  .page-hero h1 {
    font-size:62px
  }

}

/* System cards with a product visual. Touch and small screens: the visual is a band on top of the card.
   Mouse devices: the visual fills the card with the name and headline on it; hover or focus slides up an olive panel with the detail. */
.lab-img{display:block;width:calc(100% + 68px);max-width:none;height:240px;object-fit:cover;object-position:center top;margin:-34px -34px 26px;background:#17231f}
.lab{overflow:hidden}
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .labs-grid .lab{background:#17231f !important;color:#eee5d4;isolation:isolate;min-height:600px}
  .labs-grid .lab:after{display:none}
  .labs-grid .lab-img{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:-2;filter:grayscale(.35) brightness(.7);transition:transform .8s ease,filter .5s ease}
  .labs-grid .lab:before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top,rgba(23,35,31,.97) 0%,rgba(23,35,31,.82) 38%,rgba(23,35,31,.45) 70%,rgba(23,35,31,.7) 100%);
    transition:background .5s ease}
  .labs-grid .lab .num{color:#c9c1ae}
  .labs-grid .lab .type{background-color:rgba(23,35,31,.6);background-image:none;border-color:rgba(238,229,212,.3);color:#eee5d4}
  .labs-grid .lab h2{color:#eee5d4;margin:auto 0 0;font-size:clamp(44px,4.2vw,64px);max-width:560px}
  .labs-grid .lab p,.labs-grid .lab .detail,.labs-grid .lab .lab-link{max-height:0;opacity:0;overflow:hidden;margin:0;padding:0;border:0;
    transition:max-height .55s cubic-bezier(.22,.8,.24,1),opacity .35s ease,margin .55s ease,padding .55s ease}
  .labs-grid .lab p{color:#e9e1cf}
  .labs-grid .lab .detail{color:#e9e1cf}
  .labs-grid .lab .detail strong{color:#c9c1ae}
  .labs-grid .lab .lab-link{color:#eee5d4;display:block;width:fit-content}
  .labs-grid .lab:hover:before,.labs-grid .lab:focus-visible:before{background:rgba(53,69,54,.93)}
  .labs-grid .lab:hover .lab-img,.labs-grid .lab:focus-visible .lab-img{transform:scale(1.03)}
  .labs-grid .lab:hover h2,.labs-grid .lab:focus-visible h2{margin-top:auto}
  .labs-grid .lab:hover p,.labs-grid .lab:focus-visible p{max-height:12em;opacity:1;margin:22px 0 0}
  .labs-grid .lab:hover .detail,.labs-grid .lab:focus-visible .detail{max-height:10em;opacity:1;margin-top:22px;padding-top:20px;border-top:1px solid rgba(238,229,212,.25)}
  .labs-grid .lab:hover .lab-link,.labs-grid .lab:focus-visible .lab-link{max-height:3em;opacity:1;margin-top:22px;padding-bottom:6px;border-bottom:1px solid currentColor}
  .labs-grid .lab:hover{background:#17231f !important}
}
@media (prefers-reduced-motion:reduce){.lab-img,.labs-grid .lab:before,.labs-grid .lab p,.labs-grid .lab .detail,.labs-grid .lab .lab-link{transition:none !important}}