/* ==========================================================================
   Cell Supernatural
   Single-page site styles.

   Contents
     1.  Fonts
     2.  Tokens
     3.  Reset and base
     4.  Utilities
     5.  Reveal on scroll
     6.  Header and navigation
     7.  Hero
     8.  Section: what we do
     9.  Section: we go deep
     10. Section: what makes the cut
     11. Section: the founder
     12. Section: point of view
     13. Section: what we are building
     14. Section: join
     15. Footer
     16. Responsive
   ========================================================================== */


/* 1. Fonts ================================================================= */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Tokens ================================================================ */

:root {
  /* Surfaces */
  --bone:        #EAE4D6;
  --bone-alt:    #E1DACA;
  --pine:        #0E3A32;
  --mint:        #00E5A8;

  /* Ink */
  --ink:         #1B211D;
  --ink-soft:    #33382F;
  --sage:        #CBDDD6;
  --sage-muted:  #8FB3A8;
  --label:       #8A8272;
  --label-soft:  #6D6E64;

  /* Rules */
  --rule:        #CFC6B2;
  --rule-soft:   #C0B7A2;
  --rule-strong: #B3A992;
  --rule-pine:   #2A5A4E;

  /* Type */
  --display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif;

  /* Layout */
  --measure: 1264px;
  --gutter: 40px;
  --nav-h: 76px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 3. Reset and base ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky header. */
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: var(--pine);
  text-decoration: none;
  transition: color 160ms var(--ease);
}
a:hover { color: var(--ink); }

button, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
/* The mint ring disappears on mint fills, so invert it there. */
.btn--mint:focus-visible,
.nav__cta:focus-visible,
.join__submit:focus-visible { outline-color: var(--pine); }

::selection { background: var(--mint); color: var(--pine); }


/* 4. Utilities ============================================================= */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 104px; }
.section--tall { padding-block: 136px; }
.section--rule { border-bottom: 1px solid var(--rule); }
.section--alt { background: var(--bone-alt); }
.section--pine { background: var(--pine); color: var(--sage); }

.u-hide {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--mint);
  color: var(--pine);
  font: 600 13px/1 var(--ui);
  letter-spacing: 0.1em;
  padding: 18px 24px;
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--pine); }

/* Mint highlight behind a run of text */
.mark { background: var(--mint); color: var(--pine); padding: 0 6px; }
/* Mint rule under a run of text */
.underline { border-bottom: 3px solid var(--mint); }
.underline--thick { border-bottom: 5px solid var(--mint); }

.em { font-style: italic; }
.em--mint { font-style: italic; color: var(--mint); }
.em--pine { font-style: italic; color: var(--pine); }

/* Small tracked-out label, e.g. "BASED IN THE GCC" */
.eyebrow {
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}
.eyebrow--pine { color: var(--sage-muted); }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  font: 600 13px/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 21px 34px;
  border: 0;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.btn--mint { background: var(--mint); color: var(--pine); }
.btn--mint:hover { background: var(--bone); color: var(--pine); }

.btn--outline {
  background: transparent;
  color: var(--pine);
  border: 1px solid var(--pine);
  padding: 20px 32px;
}
.btn--outline:hover { background: var(--pine); color: var(--bone); }

/* Wordmark drawn as a mask so one asset serves every colourway. */
.wordmark {
  display: block;
  background-color: currentColor;
  mask: url(/assets/img/wordmark.png?v=2) left center / contain no-repeat;
  -webkit-mask: url(/assets/img/wordmark.png?v=2) left center / contain no-repeat;
}


/* 5. Reveal on scroll ====================================================== */

[data-reveal] {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(24px);
  transition:
    opacity 1s var(--ease),
    filter 1s var(--ease),
    transform 1s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
}


/* 6. Header and navigation ================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Pull the hero up so it sits behind the transparent bar. */
  margin-bottom: calc(var(--nav-h) * -1 - 1px);
  background: transparent;
  border-bottom: 1px solid rgb(234 228 214 / 0.16);
  color: var(--mint);
}
.nav.is-solid {
  background: rgb(234 228 214 / 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
  color: var(--pine);
}

.nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--mint);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--nav-h);
}

.nav__home { display: block; flex: 0 1 auto; min-width: 0; color: inherit; }
.nav__home:hover { color: inherit; }
.nav__mark {
  width: clamp(150px, 19vw, 264px);
  height: clamp(13.1px, 1.66vw, 23.1px);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.7vw, 30px);
  font: 500 clamp(10px, 0.85vw, 12px)/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.nav__link { color: var(--sage); }
.nav.is-solid .nav__link { color: var(--ink-soft); }
.nav.is-solid .nav__link:hover { color: var(--pine); }

.nav__cta {
  flex: none;
  background: var(--mint);
  color: var(--pine);
  padding: 13px clamp(13px, 1.4vw, 20px);
  letter-spacing: 0.08em;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.nav__cta:hover { background: var(--pine); color: var(--bone); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  flex: none;
  background: none;
  border: 0;
  padding: 10px 0 10px 10px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--bone);
  transition: transform 260ms var(--ease);
}
.nav.is-solid .nav__burger span { background: var(--ink); }
.nav__burger[aria-expanded='true'] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nav__panel { display: none; flex-direction: column; }
.nav__panel.is-open {
  display: flex;
  border-top: 1px solid rgb(234 228 214 / 0.16);
  transform-origin: top center;
  animation: panel-in 260ms var(--ease) both;
}
.nav.is-solid .nav__panel.is-open { border-top-color: var(--rule); }

.nav__panel a {
  font: 400 30px/1.2 var(--display);
  color: var(--bone);
  padding: 17px 20px;
  border-bottom: 1px solid rgb(234 228 214 / 0.14);
}
.nav.is-solid .nav__panel a { color: var(--ink); border-bottom-color: var(--rule); }
.nav__panel.is-open a { animation: link-in 320ms var(--ease) both; }
.nav__panel.is-open a:nth-child(1) { animation-delay:  60ms; }
.nav__panel.is-open a:nth-child(2) { animation-delay: 105ms; }
.nav__panel.is-open a:nth-child(3) { animation-delay: 150ms; }
.nav__panel.is-open a:nth-child(4) { animation-delay: 195ms; }
.nav__panel.is-open a:nth-child(5) { animation-delay: 240ms; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-12px) scaleY(0.96); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes link-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__panel.is-open,
  .nav__panel.is-open a { animation: none; }
  .nav__burger span { transition: none; }
}


/* 7. Hero ================================================================== */

.hero {
  position: relative;
  background: var(--pine);
  color: var(--bone);
}

.hero__field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__dots {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background:
    radial-gradient(circle at 1px 1px, rgb(0 229 168 / 0.1) 1px, transparent 1.6px) 0 0 / 46px 46px,
    linear-gradient(105deg, rgb(0 229 168 / 0.04) 0%, transparent 42%);
}
.hero__curves {
  position: absolute;
  inset: -10% -6%;
  width: 112%;
  height: 120%;
  opacity: 0.16;
}

.hero__row {
  position: relative;
  display: flex;
  align-items: stretch;
  align-content: flex-start;
  gap: 56px;
  flex-wrap: wrap;
}

.hero__text {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 200px 0 96px;
}

.hero__title {
  font: 400 clamp(56px, 6.4vw, 104px)/0.9 var(--display);
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.hero__lede {
  font: 400 20px/1.6 var(--ui);
  color: var(--sage);
  max-width: 560px;
  margin-top: 34px;
}

.hero__actions {
  margin-top: auto;
  padding-top: 52px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.hero__origin { line-height: 1.8; }

.hero__figure {
  flex: 1 1 300px;
  min-width: 260px;
  min-height: 520px;
  display: flex;
  align-items: stretch;
  padding-top: 150px;
}
.hero__figure cs-dna-hero { flex: 1 1 auto; width: 100%; min-height: 0; }


/* 8. Section: what we do =================================================== */

.lead-in {
  font: 400 clamp(44px, 5.2vw, 74px)/0.99 var(--display);
  letter-spacing: -0.03em;
  max-width: 1000px;
  text-wrap: pretty;
}

.statement {
  margin-top: 52px;
  padding-block: 40px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 400 clamp(28px, 3vw, 42px)/1.26 var(--display);
}

.split {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 40px;
}
.split__body {
  flex: 1 1 600px;
  min-width: 0;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  font: 400 18px/1.7 var(--ui);
  color: var(--ink-soft);
}
.split__col { flex: 1 1 260px; }

.aside {
  flex: 0 1 320px;
  border-left: 1px solid var(--rule);
  padding-left: 32px;
  font: 400 24px/1.4 var(--display);
  font-style: italic;
  color: var(--pine);
}
.aside--soft { border-left-color: var(--rule-soft); padding-left: 24px; }
.aside--plain { border-left: 0; padding-left: 0; }


/* 9. Section: we go deep =================================================== */

.deep__head {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.deep__headline { flex: 1 1 600px; min-width: 0; }
.deep__title {
  font: 400 clamp(64px, 8vw, 118px)/0.92 var(--display);
  letter-spacing: -0.04em;
}
.deep__lede {
  font: 400 18px/1.7 var(--ui);
  color: var(--ink-soft);
  margin-top: 26px;
  max-width: 560px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 48px;
}
.tags li {
  font: 400 clamp(24px, 2.7vw, 38px)/1 var(--display);
  padding: 15px 21px;
  border: 1px solid var(--rule-strong);
}
.tags li[data-accent] {
  background: var(--mint);
  color: var(--pine);
  border-color: var(--mint);
}


/* 10. Section: what makes the cut ========================================== */

.cut__head {
  display: flex;
  gap: 48px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.cut__title {
  flex: 1 1 600px;
  min-width: 0;
  font: 400 clamp(44px, 5.2vw, 74px)/0.99 var(--display);
  letter-spacing: -0.03em;
}
.cut__aside { flex: 0 1 320px; font: 400 27px/1.3 var(--display); font-style: italic; color: var(--pine); }

.criteria {
  margin-top: 56px;
  border-top: 1px solid var(--rule);
}
.criteria__row {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding-block: 24px;
  border-bottom: 1px solid var(--rule);
}
.criteria__num {
  flex: none;
  width: 44px;
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.14em;
  color: var(--label);
}
.criteria__name {
  flex: 0 1 280px;
  font: 400 clamp(30px, 3vw, 42px)/1 var(--display);
  letter-spacing: -0.015em;
}
.criteria__copy {
  flex: 1 1 380px;
  max-width: 660px;
  font: 400 18px/1.6 var(--ui);
  color: var(--ink-soft);
}


/* 11. Section: the founder ================================================= */

.founder { display: flex; align-items: stretch; flex-wrap: wrap; }

.founder__figure {
  flex: 0 1 520px;
  min-width: 300px;
  min-height: 640px;
  display: flex;
  padding: 96px 0 96px 90px;
}
.founder__frame {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  border: 1px solid rgb(234 228 214 / 0.3);
  padding: 20px;
}
.founder__img {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  background: rgb(234 228 214 / 0.04);
}

.founder__copy { flex: 1 1 560px; min-width: 0; padding: 96px 80px; }
.founder__inner { max-width: 700px; }
.founder__rule { border-bottom: 1px solid var(--rule-pine); }

.founder__title {
  font: 400 clamp(40px, 4.4vw, 62px)/1.02 var(--display);
  letter-spacing: -0.025em;
  margin-top: 36px;
  text-wrap: pretty;
}
.founder__body {
  font: 400 18px/1.75 var(--ui);
  color: var(--sage);
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.founder__body p + p { margin-top: 20px; }
.founder__pull {
  font: 400 32px/1.3 var(--display);
  font-style: italic;
  color: var(--mint);
}

.founder__sign {
  border-top: 1px solid var(--rule-pine);
  margin-top: 36px;
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.founder__result { font: 400 32px/1.25 var(--display); max-width: 480px; }
.founder__name { text-align: right; }
.founder__name b { display: block; font: 400 46px/1 var(--display); font-style: italic; }
.founder__name .eyebrow { display: block; margin-top: 10px; }


/* 12. Section: point of view =============================================== */

.pov__title {
  font: 400 clamp(56px, 7vw, 106px)/0.95 var(--display);
  letter-spacing: -0.04em;
}
.pov__lede {
  font: 400 clamp(24px, 2.6vw, 34px)/1.35 var(--display);
  margin-top: 30px;
  max-width: 1100px;
  text-wrap: pretty;
}
.pov__list {
  margin-top: 52px;
  padding-block: 36px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 48px;
  font: 400 clamp(24px, 2.4vw, 33px)/1.25 var(--display);
}
.pov__list li { flex: 1 1 260px; }


/* 13. Section: what we are building ======================================== */

.building { position: relative; overflow: hidden; }
.building__field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.building__curves {
  position: absolute;
  inset: -8% -6%;
  width: 112%;
  height: 116%;
  opacity: 0.13;
}
.building__wrap { position: relative; }

.building__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 16px;
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
}
.building__status {
  color: var(--pine);
  background: var(--mint);
  padding: 7px 12px;
  border-radius: 999px;
  letter-spacing: 0.14em;
}

.building__title {
  font: 400 clamp(66px, 10.4vw, 158px)/0.88 var(--display);
  letter-spacing: -0.045em;
  margin-top: 64px;
  max-width: 1100px;
}

.building__foot {
  display: flex;
  gap: 48px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 48px;
}
.building__copy {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 760px;
  font: 400 clamp(24px, 2.7vw, 36px)/1.35 var(--display);
  color: var(--pine);
  text-wrap: pretty;
}
.building__foot .btn { flex: none; }


/* 14. Section: join ======================================================== */

.join__rule { border-bottom: 1px solid var(--rule-pine); }
.join__row {
  display: flex;
  gap: 48px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 48px;
}
.join__headline { flex: 1 1 600px; min-width: 0; }
.join__title {
  font: 400 clamp(72px, 9.4vw, 140px)/0.9 var(--display);
  letter-spacing: -0.04em;
}
.join__lede {
  font: 400 20px/1.6 var(--ui);
  color: var(--sage);
  margin-top: 30px;
  max-width: 620px;
}

.join__form { flex: 0 1 340px; display: flex; flex-direction: column; gap: 12px; }
.join__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--sage-muted);
  padding: 0 0 14px;
  font: 400 26px/1.2 var(--display);
  color: var(--bone);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 200ms var(--ease);
}
.join__input::placeholder { color: var(--sage-muted); opacity: 1; }
.join__input:focus { border-bottom-color: var(--mint); }
.join__input:focus-visible { outline: none; }
.join__input[aria-invalid='true'] { border-bottom-color: #FF8A6B; }

.join__submit {
  width: 100%;
  margin-top: 16px;
  padding: 22px;
  text-align: center;
  background: var(--mint);
  color: var(--pine);
  font: 600 13px/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background-color 200ms var(--ease);
}
.join__submit:hover:not(:disabled) { background: var(--bone); }
.join__submit:disabled { cursor: default; opacity: 0.75; }

.join__note { font: 400 13px/1.6 var(--ui); color: var(--sage-muted); }
.join__note[data-state='error'] { color: #FF8A6B; }


/* 15. Footer =============================================================== */

.footer { padding: 72px 0 52px; }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 40px;
}
.footer__brand { flex: 1 1 560px; min-width: 0; display: flex; align-items: center; color: var(--pine); }
.footer__mark { width: 340px; height: 29.75px; }

.footer__nav {
  flex: 0 1 320px;
  display: flex;
  gap: 48px;
  font: 500 13px/2 var(--ui);
  color: var(--ink-soft);
}
.footer__nav ul { display: flex; flex-direction: column; }
.footer__nav a { color: var(--ink-soft); }
.footer__nav a:hover { color: var(--pine); }
.footer__nav h2 {
  font: 500 11px/2.6 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}

.footer__bottom {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 32px;
}
.footer__legal {
  flex: 1 1 560px;
  min-width: 0;
  font: 400 13px/1.7 var(--ui);
  color: var(--label-soft);
}
.footer__origin {
  flex: 0 1 320px;
  font: 400 13px/1.7 var(--ui);
  color: var(--label);
}


/* 16. Responsive =========================================================== */

/* The founder row's two basis widths total 1080px, so it wraps before the
   900px block takes over. Stack it fully across that band. */
@media (max-width: 1080px) {
  .founder__figure { flex: 1 1 100%; min-height: 480px; padding: 72px 40px 0; }
  .founder__copy { flex: 1 1 100%; padding: 72px 40px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --nav-h: 62px; }

  .nav__link { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { padding: 12px 16px; font-size: 11px; }

  .section { padding-block: 60px; }
  .section--tall { padding-block: 76px; }

  .hero__row { gap: 0; }
  .hero__text { flex: 1 1 100%; padding: 104px 0 40px; }
  .hero__figure { flex: 1 1 100%; min-height: 380px; padding-top: 0; }
  .hero__origin br { display: none; }
  .hero__origin span::after { content: '.\00a0'; }
  .hero .btn { width: 100%; text-align: center; }

  .founder__figure { flex: 1 1 100%; min-height: 560px; padding: 40px 20px 0; }
  .founder__frame { padding: 12px; }
  .founder__copy { flex: 1 1 100%; padding: 60px 20px; }
  .founder__inner { max-width: none; }

  .criteria__row { gap: 6px 20px; padding-block: 20px; }
  .criteria__num { width: 100%; order: -1; }
  .criteria__name { flex: 1 1 100%; }
  .criteria__copy { flex: 1 1 100%; font-size: 16px; }

  .aside {
    flex: 1 1 100%;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 20px;
    margin-top: 8px;
  }
  .cut__aside { flex: 1 1 100%; }

  .split__col, .join__form, .footer__brand, .footer__legal, .footer__origin,
  .footer__nav { flex: 1 1 100%; }

  .pov__list li { flex: 1 1 45%; }
  .footer__mark { width: 240px; height: 21px; }
  .building__foot .btn { width: 100%; text-align: center; }
  .lead-in, .cut__title, .pov__title { max-width: none; }
}

@media (max-width: 560px) {
  .pov__list li { flex: 1 1 100%; }
  .section { padding-block: 48px; }
}


/* Print ==================================================================== */

@media print {
  .nav, .hero__field, .building__field, .join__form, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1; filter: none; transform: none; }
}