/* Kyleness Wind Farm. Layout and components.
   Static HTML, CSS and JS. No framework, no build step. */

/* --- Reset ------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--sea-paper);
  color: var(--slate-ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

a { color: inherit; }

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

:focus-visible {
  outline: 3px solid var(--tp-yellow);
  outline-offset: 2px;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--tp-yellow);
  color: var(--slate-ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus { left: 0; }

/* --- Shell and bands --------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--band);
}

.band--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

.band--ruled { border-top: 1px solid var(--slate-line); }

.measure { max-width: var(--measure); }

.lead {
  font-size: var(--step-lead);
  color: var(--slate-mid);
  line-height: 1.55;
}

.prose p + p { margin-top: 1.05rem; }

.eyebrow {
  display: block;
  font-size: var(--step-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-mid);
  margin-bottom: 0.9rem;
}

h2.section-title {
  font-size: var(--step-h2);
  max-width: 20ch;
}

h3 { font-size: var(--step-h3); }

.textlink {
  display: inline-block;
  color: var(--slate-ink);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--tp-yellow);
}

.textlink:hover { border-bottom-color: var(--slate-ink); }

.btn {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  background: var(--tp-yellow);
  color: var(--slate-ink);
  font-weight: 600;
  font-size: var(--step-small);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--tp-yellow);
  border-radius: var(--radius);
}

.btn:hover {
  background: var(--slate-ink);
  color: var(--sea-paper);
  border-color: var(--slate-ink);
}

.footnote {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--tp-yellow);
  background: #EDF1F3;
  font-size: var(--step-small);
  color: var(--slate-mid);
  line-height: 1.6;
  max-width: 62ch;
}

/* --- Navigation --------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sea-paper);
  border-bottom: 1px solid var(--slate-line);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.wordmark__tail {
  font-size: var(--step-small);
  font-weight: 400;
  color: var(--slate-mid);
}

.nav-toggle {
  display: none;
  padding: 0.5rem 0.85rem;
  background: transparent;
  color: var(--slate-ink);
  font-size: var(--step-small);
  font-weight: 600;
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.7vw, 1.75rem);
}

.nav-links a {
  font-size: var(--step-nav);
  font-weight: 500;
  color: var(--slate-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover { border-bottom-color: var(--tp-yellow); }

.nav-links a[aria-current='page'] { border-bottom-color: var(--tp-yellow); }

.nav-links .nav-cta { border-bottom: 1px solid var(--tp-yellow); }

/* --- Image slots -------------------------------------------------- */

.img-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 16 / 9);
  padding: 1rem;
  background: var(--slot-fill);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.img-slot__label {
  text-align: center;
  font-size: var(--step-micro);
  line-height: 1.65;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-mid);
}

.img-slot__label strong {
  display: block;
  font-weight: 700;
  font-size: var(--step-small);
  letter-spacing: 0.1em;
  color: var(--slate-ink);
  margin-bottom: 0.35rem;
}

.img-slot__label span { display: block; }

/* --- THE WINDOW DEVICE -------------------------------------------- */
/* The media layer is fixed to the viewport and clipped to the section,
   so it holds perfectly still while the page slides over it. Nothing
   animates and nothing listens to scroll. The stillness IS the effect,
   so prefers-reduced-motion needs no override here. Do not "fix" this
   by adding a transition, a transform or a scroll handler: a transform
   on the section would make it the containing block for the fixed
   media and the whole device would collapse. */

.window {
  position: relative;
  display: block;
  width: 100%;
  height: 75vh;
  clip-path: inset(0);
  color: #FFFFFF;
  text-decoration: none;
  isolation: isolate;
}

.window__media {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--slot-fill-dark);
  border: 0;
  border-radius: var(--radius);
  aspect-ratio: auto;
}

/* The placeholder label for the joint image session. It is pinned to the
   SECTION, not to the still media, so it always sits dead centre of the
   window and clear of the text zone at the bottom. It disappears the moment
   a real image lands in .window__media. */
.window__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  pointer-events: none;
}

.window__label .img-slot__label { color: #FFFFFF; }
.window__label .img-slot__label strong { color: #FFFFFF; }

/* The structural scrim. The text zone always sits over this, never over
   raw image area. Bottom weighted so the copy has a floor to stand on. */
.window__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim);
  pointer-events: none;
}

.window__inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding-block: clamp(1.75rem, 3.6vw, 3rem);
}

.window__title {
  font-size: var(--step-window);
  font-weight: 600;
  max-width: 16ch;
  color: #FFFFFF;
}

.window__line {
  margin-top: 0.75rem;
  max-width: 46ch;
  font-size: var(--step-lead);
  color: #FFFFFF;
}

.window__cue {
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: 600;
  font-size: var(--step-small);
  letter-spacing: 0.02em;
  color: var(--tp-yellow);
  border-bottom: 2px solid var(--tp-yellow);
  padding-bottom: 2px;
}

a.window:hover .window__cue { color: #FFFFFF; border-bottom-color: #FFFFFF; }

a.window:focus-visible {
  outline: 4px solid var(--tp-yellow);
  outline-offset: -4px;
}

/* --- REAL PHOTOGRAPHY ---------------------------------------------- */
/* One block covers both kinds of slot, because both carry .img-slot and both
   already establish a containing block: the inline slots are relative, the
   window media layer is fixed. A live picture is taken out of flow and pinned
   to the slot, so the grid centring that holds a placeholder label has no say
   over a photograph.

   The padding goes when a picture arrives. An absolutely positioned child
   resolves inset against its containing block's PADDING box, so leaving the
   placeholder padding in place would frame every photograph in a band of
   slot fill. :has() is what makes that automatic rather than a class the next
   person has to remember.

   The slot keeps its own aspect ratio and the photograph is cropped to it
   with object-fit, never the other way round. The build writes each variant
   at the exact ratio of its slot, so on a straight inline slot there is
   nothing left to crop. The window media is the exception by design: it is
   viewport sized and clipped to a 75vh band, so cover is doing real work
   there. The placeholder fill stays as the colour behind a loading image. */

.img-slot:has(> picture) {
  padding: 0;
}

.img-slot > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.img-slot > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A video fills its slot exactly as a picture does. The poster frame carries
   the same crop, so the slot looks identical before the video decodes and
   whenever autoplay is refused (iOS Low Power Mode, Android Data Saver). */

.img-slot:has(> video) {
  padding: 0;
}

.img-slot > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Anyone who has asked their system to reduce motion gets the poster frame
   instead of the loop. The slot is unchanged, only the moving part goes. */

@media (prefers-reduced-motion: reduce) {
  .img-slot > video {
    display: none;
  }
  .img-slot:has(> video) {
    background-image: url("../video/hero-kyleness-poster.jpg");
    background-size: cover;
    background-position: center;
  }
}

/* --- Hero window --------------------------------------------------- */

.hero {
  height: calc(100svh - var(--nav-h));
  min-height: 32rem;
}

/* The hero carries four lines of copy where the other windows carry two, so
   its text block reaches higher up the frame than the shared scrim was drawn
   for. Behind moving footage with a bright sky that left the headline at
   3.59:1, under the 4.5:1 floor. This carries the dark further up so the top
   of the block has a floor to stand on too. Hero only, the other windows are
   measured passing on the shared scrim and are left alone. */

.hero .window__scrim {
  background: linear-gradient(
    to top,
    rgba(18, 33, 43, 0.92) 0%,
    rgba(18, 33, 43, 0.87) 28%,
    rgba(18, 33, 43, 0.66) 50%,
    rgba(18, 33, 43, 0.30) 70%,
    rgba(18, 33, 43, 0) 88%
  );
}

.hero__eyebrow {
  display: block;
  font-size: var(--step-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-yellow);
  margin-bottom: 0.85rem;
}

.hero__title {
  font-size: var(--step-hero);
  font-weight: 700;
  letter-spacing: -0.028em;
  max-width: 15ch;
  color: #FFFFFF;
}

.hero__stat {
  margin-top: 1rem;
  max-width: 42ch;
  font-size: var(--step-lead);
  color: #FFFFFF;
}

.hero__cta { margin-top: 1.6rem; }

/* --- Stats strip ---------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--slate-line);
}

.stats__item {
  padding: 1.6rem 1.25rem 1.75rem 0;
  border-right: 1px solid var(--slate-line);
}

.stats__item:last-child { border-right: 0; }

.stats__figure {
  display: block;
  font-size: var(--step-stat);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stats__label {
  display: block;
  margin-top: 0.65rem;
  font-size: var(--step-small);
  color: var(--slate-mid);
  max-width: 18ch;
}

/* --- Partners -------------------------------------------------------- */

.partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
}

.partner { border-top: 3px solid var(--slate-ink); padding-top: 1.25rem; }

.partner__name {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.partner__split {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.25rem 0.6rem;
  background: var(--tp-yellow);
  color: var(--slate-ink);
  font-size: var(--step-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.partner p { margin-top: 0.9rem; color: var(--slate-mid); }

/* --- Split band (heading left, prose right) --------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

/* --- Cards ------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.5rem;
}

.card { display: block; text-decoration: none; }

.card__date {
  display: block;
  margin-top: 1rem;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--slate-mid);
  font-variant-numeric: tabular-nums;
}

.card__title {
  margin-top: 0.5rem;
  font-size: var(--step-h3);
  font-weight: 600;
  max-width: 24ch;
}

a.card:hover .card__title { border-bottom: 2px solid var(--tp-yellow); display: inline-block; }

/* --- News list --------------------------------------------------------- */

.stories { margin-top: 2.5rem; display: grid; gap: clamp(2rem, 4vw, 3rem); }

.story {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--slate-line);
  align-items: start;
}

.story:first-child { padding-top: 0; border-top: 0; }

.story__date {
  display: block;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--slate-mid);
  font-variant-numeric: tabular-nums;
}

/* These headlines run to about 45 characters, which at this measure leaves the
   last word alone on a second line. Balance splits the lines evenly instead. */
.story__title {
  margin-top: 0.5rem;
  font-size: var(--step-h3);
  max-width: 32ch;
  text-wrap: balance;
}

.story p { margin-top: 0.85rem; color: var(--slate-mid); max-width: 62ch; }

/* --- Timeline table ------------------------------------------------------ */

.table-wrap { overflow-x: auto; margin-top: 2rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

caption {
  text-align: left;
  font-size: var(--step-small);
  color: var(--slate-mid);
  padding-bottom: 0.85rem;
}

th, td {
  text-align: left;
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid var(--slate-line);
  vertical-align: top;
}

thead th {
  font-size: var(--step-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-mid);
  border-bottom: 2px solid var(--slate-ink);
}

tbody th { font-weight: 600; white-space: nowrap; padding-right: 2rem; }

/* --- Phase and package blocks --------------------------------------------- */

.blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 2.25rem;
}

.blocks--three { grid-template-columns: repeat(3, 1fr); }

.block { border-top: 1px solid var(--slate-line); padding-top: 1.1rem; }

.block h3 { margin-bottom: 0.55rem; }

.block p { color: var(--slate-mid); }

.block__figure {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

/* --- Stage copy (construction) ---------------------------------------------- */

.stage { border-top: 1px solid var(--slate-line); padding-top: 1.5rem; margin-top: 2.25rem; }

.stage h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 0.75rem; }

.stage p { max-width: var(--measure); }

.stage p + p { margin-top: 1rem; }

.stage__stat {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--slate-line);
  background: #EDF1F3;
  font-size: var(--step-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Quote --------------------------------------------------------------- */

.quote {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--deep);
  color: #FFFFFF;
}

.quote blockquote {
  margin: 0;
  font-size: var(--step-lead);
  line-height: 1.5;
  max-width: 52ch;
}

.quote figcaption {
  margin-top: 1.1rem;
  font-size: var(--step-small);
  color: var(--deep-soft);
}

.quote figcaption strong { color: var(--tp-yellow); font-weight: 600; }

/* --- Roles ---------------------------------------------------------------- */

.roles { margin-top: 2.25rem; display: grid; gap: 0; }

.role {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--slate-line);
}

.role:last-child { border-bottom: 1px solid var(--slate-line); }

.role h3 { align-self: start; }

.role p { color: var(--slate-mid); max-width: 58ch; }

/* --- Contact -------------------------------------------------------------- */

.contact-key {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.25rem;
}

.contact-key__item { border-top: 3px solid var(--slate-ink); padding-top: 1.1rem; }

.contact-key__label {
  display: block;
  font-size: var(--step-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-mid);
  margin-bottom: 0.5rem;
}

.contact-key__value {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  border-bottom: 2px solid var(--tp-yellow);
}

.contact-key address { font-style: normal; line-height: 1.5; }

/* --- Form shape ------------------------------------------------------------ */

.form { margin-top: 2.25rem; max-width: 42rem; }

.field { margin-bottom: 1.5rem; }

.field label {
  display: block;
  font-size: var(--step-small);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: #FFFFFF;
  color: var(--slate-ink);
  border: 1px solid var(--slate-mid);
  border-radius: var(--radius);
}

.field textarea { min-height: 9rem; resize: vertical; }

.field__help {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--step-small);
  color: var(--slate-mid);
}

.form__note {
  margin-top: 1.5rem;
  font-size: var(--step-small);
  color: var(--slate-mid);
  max-width: 52ch;
}

/* --- Footer ------------------------------------------------------------------ */

.site-foot {
  background: var(--deep);
  color: #FFFFFF;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}

.foot-brand .wordmark__tail { color: var(--deep-soft); }

.foot-brand p {
  margin-top: 1rem;
  font-size: var(--step-small);
  color: var(--deep-soft);
  max-width: 34ch;
}

.foot-col h2 {
  font-size: var(--step-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tp-yellow);
  margin-bottom: 0.9rem;
}

.foot-col li + li { margin-top: 0.55rem; }

.foot-col a {
  font-size: var(--step-small);
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.foot-col a:hover { border-bottom-color: var(--tp-yellow); }

.foot-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--deep-rule);
}

.foot-contact span {
  display: block;
  font-size: var(--step-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tp-yellow);
  margin-bottom: 0.4rem;
}

.foot-contact a { color: #FFFFFF; text-decoration: none; border-bottom: 1px solid var(--deep-rule); }

.foot-contact a:hover { border-bottom-color: var(--tp-yellow); }

.foot-contact address { font-style: normal; }

.foot-base {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--deep-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: var(--step-small);
  color: var(--deep-soft);
}

.foot-base a { color: #FFFFFF; border-bottom: 1px solid var(--tp-yellow); text-decoration: none; }

/* --- Footer touch targets ------------------------------------------------------ */
/* These links sit in lists rather than inside a sentence, so the inline exception
   in the 24px minimum target size does not cover them. The line box alone gives
   19px, so this padding is what carries them over. The list spacing comes down by
   the same amount the padding adds, which keeps the footer rhythm as drawn. */

.foot-col a,
.foot-contact a,
.foot-base a {
  display: inline-block;
  padding-block: 3px;
}

.foot-col li + li { margin-top: 0.2rem; }

/* --- Reveal (light bands only, never windows) ---------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Responsive ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(2) { border-right: 0; }
  .stats__item:nth-child(1),
  .stats__item:nth-child(2) { border-bottom: 1px solid var(--slate-line); padding-bottom: 1.5rem; }
  .blocks--three { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--sea-paper);
    border-bottom: 1px solid var(--slate-line);
  }

  .nav-links.is-open { display: flex; }

  .nav-links a {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--slate-line);
  }

  .nav-links .nav-cta {
    margin-top: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--tp-yellow);
  }

  .site-nav__inner { position: relative; }

  .split,
  .story,
  .role { grid-template-columns: 1fr; }

  .cards { grid-template-columns: 1fr; }

  .partners,
  .blocks,
  .blocks--three,
  .contact-key { grid-template-columns: 1fr; }

  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .foot-contact { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; }
  .stats__item { border-right: 0; border-bottom: 1px solid var(--slate-line); padding-bottom: 1.5rem; }
  .stats__item:last-child { border-bottom: 0; }
  .foot-top { grid-template-columns: 1fr; }
  .window { height: 85svh; }
  .hero { height: calc(100svh - var(--nav-h)); }
  h2.section-title { max-width: none; }
}