@charset "UTF-8";

/* ==========================================================================
   Fyve Labs, fyve.dev
   Static page. No build step, no dependencies, no framework.

   MACROSTRUCTURE STAMP
   Archetype .......... asymmetric 4/8 editorial, dark ground, one accent.
   Nav ................ sticky bar, wordmark left, anchors right, one filled CTA.
                        Mobile is a real disclosure, open by default without JS.
   Footer ............. single row: wordmark, contact, legal.
   Sections, in order, with deliberately unequal vertical rhythm:
     hero      160 / 128   full bleed, 4/8 grid
     proof      48         band edge to edge, figures on the page grid
     problem   128         narrow measure, 8 columns
     services   96         full 12 columns
     how        128        4/8 split, circle and dotted rail motif
     work      160         full bleed panel, 4/8 split
     why        96         full 12 columns
     team       96         full 12 columns
     contact   128         narrow measure, centered
   Palette ............ four surfaces, three inks, one accent, one accent ink.
                        Nine values, no tenth, no intermediate greys.
   Type ............... Archivo variable (wdth, wght) for display and headings,
                        Urbanist variable for body and UI. Self-hosted woff2.
   Motion ............. additive only. Nothing is hidden before it animates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts. Self-hosted so the page makes no third party request at all,
   which is what lets the Content-Security-Policy in customHttp.yml stay tight.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-variable-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/urbanist-variable-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Tokens. Nine colors, expressed in OKLCH with the sRGB hex in the comment.
   Every one of these round trips to its hex exactly.
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces, four steps on an even lightness ramp */
  --ground: oklch(0% 0 0); /* #000000 */
  --panel: oklch(15.9% 0 0); /* #0D0D0D */
  --card: oklch(19.1% 0 0); /* #141414 */
  --hairline: oklch(26.9% 0 0); /* #262626 */

  /* Inks, three */
  --text: oklch(100% 0 0); /* #FFFFFF */
  --warm: oklch(78.2% 0.014 60.5); /* #BFB6AF */
  --muted: oklch(60.6% 0.017 61.2); /* #8A8078 */

  /* Accent, one hue only */
  --accent: oklch(66.8% 0.148 45.1); /* #DD733F */
  --accent-ink: oklch(53.4% 0.131 46.2); /* #A8501F */

  /* Spacing scale, 8px base */
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --space-160: 10rem;

  /* Grid */
  --shell-max: 80rem; /* 1280px */

  /* Reading measure. Urbanist's zero is 0.673em, so a ch is much wider than the
     average glyph: the 68ch this page used to carry set 89 to 98 characters a
     line, well past the 75 that stays comfortable. 52ch measures 70. Being
     font relative, one value holds that count at body size and lede size both. */
  --measure: 52ch;
  --gutter: var(--space-24);
  --column-gap: var(--space-24);

  /* Focus ring offset, retokened per section so the ring reads on any ground */
  --ring-offset: var(--ground);

  color-scheme: dark;
}

/* Font system lives on html, not body. Declared anywhere lower and the page
   silently renders in the OS default while the woff2 files go unused. */
html {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-body);
}

@media (min-width: 64em) {
  :root {
    --gutter: var(--space-64);
  }
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--warm);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* One ring pattern, accent colored, with the gap painted in the section's own
   ground so it reads on every surface. Never the browser default blue. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ring-offset);
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--ground);
}

/* Parked off canvas with position rather than a transform, so the rule below
   that cancels transforms under reduced motion cannot strand it on screen. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-16);
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--ground);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-16);
}

/* --------------------------------------------------------------------------
   4. Type roles. Archivo carries both axes explicitly, since the point of a
   variable grotesk is the width axis, not a faked horizontal scale.
   -------------------------------------------------------------------------- */

/* Display is pushed to the top of the width axis and up in weight, so the
   grotesk reads as a different voice from Urbanist rather than as the same
   voice enlarged.

   The second size term is a container query unit, so the line measures itself
   against its own column rather than against the viewport. Below 48em the cap
   is derived from the longest single word: "Roadmap" sets at 5.628 times the
   font size at wdth 125, so 17.3cqi is the largest size that cannot force a
   mid-word break, even at 320px. Above 48em the cap tightens to 9.6cqi, which
   is derived from "Funded Roadmap" set as one unbreakable unit at 10.268
   times the font size. Balanced wrapping then lands the headline as three
   stepped lines with the phrase that matters widest and last. */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: min(clamp(3rem, 9vw, 4.5rem), 17.3cqi);
  text-wrap: balance;
  letter-spacing: -0.025em;
  line-height: 0.9;
  color: var(--text);
  margin: 0;
  overflow-wrap: break-word;
  min-width: 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: 650;
  font-variation-settings: "wdth" 122, "wght" 650;
  font-size: clamp(2rem, 4vw, 3.25rem);
  text-wrap: balance;
  letter-spacing: -0.022em;
  line-height: 1.04;
  color: var(--text);
  margin: 0;
  overflow-wrap: break-word;
}

h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "wdth" 115, "wght" 560;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* 1.25rem from tablet up, as specified. It eases to 1.125rem on a phone,
   where holding the specified size costs the hero's call to action its place
   on the first screen. */
.lede {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--warm);
  max-width: var(--measure);
}

.body-copy {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--warm);
  max-width: var(--measure);
}

.note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */

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

.grid-12 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--column-gap);
}

@media (min-width: 48em) {
  .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* The 4/8 split used by The Problem, How We Work and Our Work. The eyebrow is
   its own grid item on row one, and the heading and the body both begin on row
   two, so a section's first line of copy starts level with the big white
   heading rather than level with the small label above it.

   Row placement rather than a margin on purpose. The offset is not a constant:
   Our Work's eyebrow wraps to two lines at 768 and needs 59px where the others
   need 42px. A grid row measures that for itself; a number would have been
   right twice and wrong once. */
.split__eyebrow,
.split__title,
.split__body {
  grid-column: 1 / -1;
}

.split__body {
  /* 24px of row gap plus this reaches the 32px the stacked layout wants. */
  margin-top: var(--space-8);
}

@media (min-width: 48em) {
  .split__eyebrow {
    grid-column: 1 / 5;
    grid-row: 1;
  }

  .split__title {
    grid-column: 1 / 5;
    grid-row: 2;
    align-self: start;
  }

  .split__body {
    grid-column: 5 / -1;
    grid-row: 2;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   6. Buttons and links. Hover is differentiated by element class, never a
   global opacity fade, and text never fades toward its background.
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6875rem 1.375rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

/* Black on orange measures 6.60:1. White on orange is 3.18:1 and fails, so the
   fill always carries black, and the label is never enlarged to dodge AA. */
.button--filled {
  background: var(--accent);
  color: var(--ground);
}

.button--filled:hover {
  background: var(--text);
  color: var(--ground);
}

.button--quiet {
  color: var(--accent);
  border-color: var(--hairline);
  background: transparent;
}

.button--quiet:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* Text links are underlined at rest, so they are identifiable without relying
   on colour, and the rule thickens on hover. A real text-decoration rather
   than a painted background: it tracks the text exactly at any size, and it
   leaves the element's background undefined, which is what lets a contrast
   checker actually evaluate these links instead of giving up on a gradient. */
.link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.2s ease, color 0.2s ease;
}

.link:hover,
.link:focus-visible {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   7. Masthead. Sticky, with a ground that gains opacity past the fold via a
   scroll driven animation, so no script is responsible for legibility.
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--ground) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  animation: masthead-settle linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 60vh;
}

@keyframes masthead-settle {
  to {
    background-color: var(--ground);
    border-bottom-color: var(--hairline);
  }
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  min-height: 72px;
  padding-block: 0.75rem;
}

.masthead__mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
  margin-right: auto;
}

.masthead__mark img {
  width: 132px;
  height: auto;
}

.masthead__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.75rem;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.masthead__toggle:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.masthead__toggle-bars {
  display: block;
  width: 16px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.masthead__links {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.masthead__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  min-width: 44px;
  justify-content: center;
  position: relative;
  color: var(--warm);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* The drawn underline wipes in from the left on width, not on a transform,
   so the reduced motion rule that cancels transforms cannot strand it on. */
.masthead__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.masthead__link:hover,
.masthead__link:focus-visible {
  color: var(--text);
}

.masthead__link:hover::after,
.masthead__link:focus-visible::after {
  width: 100%;
}

/* Below 1024px the nav is a disclosure. It ships open in the markup, and the
   script closes it at parse time, so with JavaScript off every link is
   readable rather than hidden behind a button that cannot work. */
@media (max-width: 63.99em) {
  .js .masthead__toggle {
    display: inline-flex;
  }

  .masthead__inner {
    flex-wrap: wrap;
  }

  .masthead__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding-bottom: var(--space-16);
    border-top: 1px solid var(--hairline);
    margin-top: 0.75rem;
  }

  /* Closed is the default the moment the script announces itself, which it
     does in the head, before first paint. Waiting for the script to set
     data-state would render the menu open for one frame and then collapse
     it, which is a 351px layout shift on a phone. Without the script there
     is no js class, so the menu simply stays visible. */
  .js .masthead__nav:not([data-state="open"]) {
    display: none;
  }

  .masthead__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .masthead__link {
    min-height: 48px;
    padding-inline: 0.25rem;
    justify-content: flex-start;
    border-bottom: 1px solid var(--hairline);
  }

  .masthead__link:hover,
  .masthead__link:focus-visible {
    background-color: var(--panel);
  }

  .masthead__nav .button {
    margin-top: var(--space-16);
    align-self: flex-start;
  }
}

/* --------------------------------------------------------------------------
   8. Hero. 4/8 split, display right aligned in the wide column, flat ground.
   Rendered at full opacity at first paint, unconditionally. There is no
   scroll above the fold to trigger a reveal on.
   -------------------------------------------------------------------------- */

/* Phone rhythm is tighter than the desktop 160/128 on purpose: the headline
   is six words and the subhead is two sentences, and the whole hero, call to
   action included, has to land on the first screen of a small phone. */
.hero {
  position: relative;
  overflow: clip;
  padding-block: var(--space-48) var(--space-48);
  background: var(--ground);
}

@media (min-width: 64em) {
  .hero {
    padding-block: var(--space-160) var(--space-128);
  }
}

/* The well is the size container the display measures itself against. */
/* Cropped by the left edge on purpose, so the page has one element that does
   not sit inside a rectangle. Sized in vw so it scales with the composition
   rather than floating at a fixed size. */
.hero__motif {
  position: absolute;
  left: -13vw;
  top: -6vw;
  width: min(38vw, 30rem);
  height: auto;
  color: var(--accent);
  opacity: 0.38;
  pointer-events: none;
}

@media (max-width: 47.99em) {
  /* On a phone the hero has no spare quadrant to put it in. */
  .hero__motif {
    display: none;
  }
}

.hero__well {
  grid-column: 1 / -1;
  container-type: inline-size;
}

.hero__display {
  margin: 0;
}

.hero__qualifiers {
  grid-column: 1 / -1;
  margin-top: var(--space-24);
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "wdth" 112, "wght" 500;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* All three read at full strength at all times. These three words are the
   whole positioning statement, so nothing here dims one to lift another. */
.hero__qualifiers b {
  font-weight: inherit;
  font-variation-settings: inherit;
  color: var(--accent);
}

.hero__say {
  grid-column: 1 / -1;
  margin-top: var(--space-24);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

@media (min-width: 48em) {
  /* Four narrow, eight wide, display right aligned in the wide one. */
  .hero__well {
    grid-column: 5 / -1;
    text-align: right;
  }

  /* The payoff phrase is never split across two lines once there is a column
     wide enough to hold it. On a phone it wraps freely, because holding it
     together there would shrink the whole headline to fit the narrowest
     screen. */
  .display__keep {
    white-space: nowrap;
  }

  .display {
    font-size: min(clamp(3rem, 9vw, 4.5rem), 9.6cqi);
  }

  .hero__qualifiers {
    grid-column: 1 / 5;
    margin-top: var(--space-64);
  }

  .hero__say {
    grid-column: 6 / -1;
    margin-top: var(--space-64);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .hero__say .lede {
    margin-left: auto;
  }

  .hero__actions {
    justify-content: flex-end;
  }
}

.hero__reassure {
  margin-top: var(--space-16);
}

/* --------------------------------------------------------------------------
   9. Proof bar. The band runs edge to edge, its figures sit on the page grid.
   Its own 48px rhythm, tighter than anything either side of it.
   -------------------------------------------------------------------------- */

.proof {
  --ring-offset: var(--panel);
  background: var(--panel);
  border-block: 1px solid var(--hairline);
  padding-block: var(--space-48);
}

.proof__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

@media (min-width: 48em) {
  .proof__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .proof__tile + .proof__tile {
    border-left: 1px solid var(--hairline);
    padding-left: var(--space-48);
  }

  .proof__tile {
    padding-right: var(--space-48);
  }
}

.proof__figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 118, "wght" 600;
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.proof__label {
  margin-top: var(--space-16);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   10. The problem. Narrow measure, eight columns, hung left of centre so it
   is not another centred prose block. 128 of vertical air, more than the
   sections either side of it.
   -------------------------------------------------------------------------- */

.problem {
  padding-block: var(--space-96);
}

@media (min-width: 64em) {
  .problem {
    padding-block: var(--space-128);
  }
}

/* The 4/8 split the hero, How We Work and Our Work all use. */


/* Third party evidence for the claim the heading makes. Deliberately not the
   proof band's treatment and not a card row: a citation list, figure hung in
   its own column with the claim and the publisher beside it, hairline between
   entries. The figure is 1.75rem rather than the band's 2.5rem so it reads as
   a reference rather than as a second headline statistic.

   Publishers are named in type. A logo would imply BCG and Gartner endorse
   Fyve Labs, which they do not, and design.md rules out decorative logo
   lockups besides. */
.problem__lead {
  margin-top: var(--space-32);
}

.evidence {
  margin-top: var(--space-32);
  border-top: 1px solid var(--hairline);
}

.evidence__item {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 40em) {
  .evidence__item {
    grid-template-columns: 5rem 1fr;
    gap: var(--space-24);
    align-items: baseline;
  }
}

.evidence__figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 118, "wght" 600;
  font-size: 1.75rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.evidence__claim {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--warm);
  max-width: var(--measure);
}

/* The link carries a 44px hit area, which already supplies the separation
   from the claim above it, so this adds no margin of its own. */
.evidence__source {
  font-size: 0.875rem;
}

.evidence__source .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   11. Services. Full twelve columns, 96 of vertical air, three cards.
   -------------------------------------------------------------------------- */

.services {
  --ring-offset: var(--panel);
  padding-block: var(--space-64);
  background: var(--ground);
}

@media (min-width: 64em) {
  .services {
    padding-block: var(--space-96);
  }
}

.services__head h2 {
  margin-top: var(--space-24);
}

.services__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-48);
}

@media (min-width: 48em) {
  .services__list {
    grid-template-columns: repeat(3, 1fr);
    /* Heading, copy, call to action. The subgrid below ties all three cards to
       these rows, so the three headings share a baseline and the three copy
       blocks start together however many lines a title runs to. Without it a
       one line title lifts its whole card's copy above its neighbours', which
       is the misalignment left over once the boxes themselves are level. */
    grid-template-rows: auto auto auto;
  }

}

/* Cards answer a pointer with a border shift and a 2px lift, which is a
   different answer from the one a nav link gives. Nothing here fades. */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  background: var(--panel);
  border: 1px solid var(--hairline);
  transition: border-color 0.2s ease, transform 0.2s ease,
    background-color 0.2s ease;
}

.card:hover,
.card:focus-within {
  border-color: var(--accent);
  background: var(--card);
  transform: translateY(-2px);
}

.card__copy {
  margin-top: var(--space-16);
  color: var(--warm);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: var(--measure);
}

/* auto keeps the three calls to action on one baseline no matter how long
   each card's copy runs. */
.card__link {
  margin-top: auto;
  padding-top: var(--space-32);
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Has to sit after .card's own display: flex above, or source order wins and
   the card silently stays a flex column with the subgrid ignored. */
@media (min-width: 48em) {
  .card {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

/* A list of formats, not prose, so it is not held to the 68 character
   body measure that would orphan the last item onto its own line. */
.services__formats {
  margin-top: var(--space-32);
  max-width: 62rem;
}

/* --------------------------------------------------------------------------
   12. How we work. The 4/8 split again, carrying the hero's structure below
   the fold, with the brand's own circle and dotted rail device.
   -------------------------------------------------------------------------- */

.how {
  padding-block: var(--space-96);
  background: var(--ground);
  /* 100vw counts the scrollbar, so the figure above can overshoot by its width.
     Clipping absorbs that without costing a horizontal scrollbar. */
  overflow-x: clip;
}

@media (min-width: 64em) {
  .how {
    padding-block: var(--space-128);
  }
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  margin: var(--space-48) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* On a phone the rail runs down the left as a timeline and the content is
   indented clear of it. Drawing the rail at the same x as full width text is
   how you get a dotted line struck through your own copy. */
.step {
  position: relative;
  padding-left: 80px;
  min-height: 56px;
}

/* Thin orange outlined circle holding the numeral, and a dotted orange rail
   running to the next step. The rail is drawn between circles only, never
   across the full width. */
.step__numeral {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "wdth" 112, "wght" 500;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 64px;
  bottom: calc(-1 * var(--space-48) + 8px);
  border-left: 2px dotted var(--accent);
}

.step__name {
  margin-top: 0;
  padding-top: 0.75rem;
}

.step__copy {
  margin-top: var(--space-8);
  color: var(--warm);
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
  }

  /* Wide enough for the columns to sit side by side, so the numerals return to
     the flow, the rail turns horizontal, and it runs between circles only. */
  .step {
    padding-left: 0;
  }

  .step__numeral {
    position: static;
  }

  .step__name {
    margin-top: var(--space-24);
    padding-top: 0;
  }

  .step:not(:last-child)::after {
    left: 64px;
    right: calc(-1 * var(--space-32) + 8px);
    top: 27px;
    bottom: auto;
    border-left: 0;
    border-top: 2px dotted var(--accent);
  }
}

/* The one photograph on the page. It sits here because this is the section
   that claims how an engagement runs, and it is evidence for that claim. */
/* Runs off the right edge of the grid rather than sitting as one more
   rectangle inside a column. It stops exactly at the viewport edge, so this
   costs no horizontal scroll. */
.how__figure {
  margin: var(--space-48) 0 0;
  margin-right: calc(
    -1 * max(var(--gutter), (100vw - var(--shell-max)) / 2 + var(--gutter))
  );
}

.how__figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   13. Our work. Full bleed panel, 4/8 split, 160 of vertical air. This is the
   strongest proof on the page for a consulting buyer, so it gets the most room.
   -------------------------------------------------------------------------- */

.work {
  --ring-offset: var(--panel);
  background: var(--panel);
  border-block: 1px solid var(--hairline);
  padding-block: var(--space-96);
}

@media (min-width: 64em) {
  .work {
    padding-block: var(--space-160);
  }
}

/* Standalone links carry the 44px hit area on the anchor itself, not on a
   wrapper, so the target is the thing you are actually pointing at. */
.work__action {
  margin-top: var(--space-32);
}

.work__action .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   14. Why Fyve Labs. Full twelve columns, 96 of air. Four plain items on
   hairlines rather than four more cards, so the page does not become a card
   grid repeated at three different sizes.
   -------------------------------------------------------------------------- */

.why {
  padding-block: var(--space-64);
  background: var(--ground);
}

@media (min-width: 64em) {
  .why {
    padding-block: var(--space-96);
  }
}

.why__head h2 {
  margin-top: var(--space-24);
}

.why__copy {
  margin-top: var(--space-24);
}

/* Divided vertically, where the founder blocks below are divided
   horizontally. Both sections run the full twelve at the same 96 of vertical
   air, which the brief fixes, so the device has to be what tells them apart.
   Two sections that share a rhythm and a container and a rule treatment are
   how a page starts to read as a template. */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-48);
}

.pillar {
  padding-block: var(--space-24);
  border-top: 1px solid var(--hairline);
}

.pillar:last-child {
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 48em) {
  .pillars {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .pillar {
    padding-block: 0;
    padding-right: var(--space-32);
    border-top: 0;
  }

  .pillar:last-child {
    border-bottom: 0;
  }

  .pillar + .pillar {
    padding-left: var(--space-32);
    border-left: 1px solid var(--hairline);
  }
}

/* The four marks are the page's own device at small scale: circle, dotted rail
   and dot, one stroke weight, nothing a second visual language had to be
   invented for. Each says its idea as geometry rather than as a picture, and
   the heading carries the meaning, so they are decorative and hidden from
   assistive technology. */
.pillar__mark {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-24);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   15. Team. Full twelve columns, 96 of air. Four founders, which is the
   honest picture, presented as text blocks rather than as cards.
   -------------------------------------------------------------------------- */

.team {
  padding-block: var(--space-64);
  background: var(--ground);
}

@media (min-width: 64em) {
  .team {
    padding-block: var(--space-96);
  }
}

.team__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  margin-top: var(--space-48);
}

@media (min-width: 40em) {
  .team__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-48) var(--space-24);
  }
}

@media (min-width: 64em) {
  .team__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.founder {
  padding-top: var(--space-24);
  border-top: 1px solid var(--hairline);
}

.founder__role {
  margin-top: var(--space-8);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}

.founder__bio {
  margin-top: var(--space-16);
  color: var(--warm);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   16. Contact. Narrow measure, centred, 128 of air. The only centred block
   on the page, which is what lets it read as an arrival rather than as more
   of the same rhythm.
   -------------------------------------------------------------------------- */

.contact {
  --ring-offset: var(--panel);
  padding-block: var(--space-96);
  background: var(--panel);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 64em) {
  .contact {
    padding-block: var(--space-128);
  }
}

.contact__inner {
  max-width: 44rem;
  text-align: center;
}

.contact__copy {
  margin: var(--space-24) auto 0;
}

.contact .button--filled {
  margin-top: var(--space-32);
}

.contact__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-16);
  font-size: 0.9375rem;
  color: var(--muted);
}

.contact__direct .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.contact__sep {
  padding-inline: var(--space-8);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.footer {
  padding-block: var(--space-48);
  background: var(--ground);
  border-top: 1px solid var(--hairline);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
}

.footer__mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer__mark img {
  width: 112px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
}

.footer__legal {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   18. Terms of Service and Privacy. A reading surface, not a selling one, so
   the job is comprehension: one column of prose at the page's own measure, the
   section list parked beside it, and the display voice turned down. The global
   h2 is sized for a landing page and would shout at 3.25rem over legal text.
   -------------------------------------------------------------------------- */

.legal {
  padding-block: var(--space-64) var(--space-96);
}

@media (min-width: 64em) {
  .legal {
    padding-block: var(--space-96) var(--space-128);
  }
}

.legal__head,
.legal__body {
  grid-column: 1 / -1;
}

.legal__title {
  font-family: var(--font-display);
  font-weight: 650;
  font-variation-settings: "wdth" 122, "wght" 650;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  text-wrap: balance;
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--text);
  margin: 0;
}

.legal__toc {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--hairline);
}

.legal__toc ul {
  margin-top: var(--space-16);
}

.legal__toc-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* TL;DR is short enough that a content sized box lands at 39px wide. */
  min-width: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--warm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal__toc-link:hover,
.legal__toc-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal__body {
  margin-top: var(--space-48);
}

@media (min-width: 64em) {
  .legal__head {
    grid-column: 1 / 5;
    position: sticky;
    top: 6rem;
    align-self: start;
  }

  .legal__body {
    grid-column: 6 / -1;
    margin-top: 0;
  }
}

/* More air above a heading than below it, so each section reads as owned by
   the heading that opens it rather than floating between two of them. */
.legal__body h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-variation-settings: "wdth" 118, "wght" 620;
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-top: var(--space-64);
  padding-top: var(--space-24);
  border-top: 1px solid var(--hairline);
}

.legal__body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal__body h3 {
  font-size: 1.125rem;
  font-variation-settings: "wdth" 115, "wght" 560;
  margin-top: var(--space-32);
}

.legal__body h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--space-24) 0 0;
}

.legal__body p {
  margin-top: var(--space-16);
  max-width: var(--measure);
  color: var(--warm);
}

/* The one place on the site that needs list markers: these are enumerated
   obligations, and stripping the marker would lose that they are a set. */
.legal__list {
  margin-top: var(--space-16);
  padding-left: 1.25rem;
  list-style: disc;
  max-width: var(--measure);
}

.legal__list li {
  margin-top: var(--space-8);
  color: var(--warm);
}

.legal__list li::marker {
  color: var(--accent);
}

.legal__top {
  margin-top: var(--space-32);
  font-size: 0.875rem;
}

.legal__top .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   19. Reduced motion. Every transition, transform and animation is cancelled,
   including the scroll driven masthead, whose resting state is already legible.
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}