/* ==========================================================================
   MP International LLC · Landing page styles
   Direction: "Editorial Precision"

   How this file is organised
     1.  Design tokens (colors, fonts, sizes, spacing)  <- change the look here
     2.  Base
     3.  Layout (container, 12-column section grid)
     4.  Shared components (buttons, links, labels, focus, skip link)
     5.  Header
     6.  Section 1 · Hero
     7.  Section 2 · What We Do (#services)
     8.  Section 3 · Our Approach (#approach)
     9.  Section 4 · Who We Serve (#clients)
     10. Section 5 · Closing CTA (#contact)
     11. Footer
     12. User preferences (reduced motion, high-contrast mode)

   Styles are mobile-first: the base rules target small phones, and
   "@media (min-width: ...)" blocks add changes for larger screens.
   Text-driven breakpoints use em (48em = 768px, 64em = 1024px at the
   default text size) so the layout also adapts when visitors enlarge text.
   Hover effects sit inside "@media (hover: hover)" so they do not get
   stuck on touch screens.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand palette (from the brief)
     Navy and sky blue are also typed into assets/favicon.svg, the PNG icons
     in assets/, the <meta name="theme-color"> tag in index.html, and the
     <style> block and theme-color tag in 404.html. */
  --navy: #0B1E39;        /* Primary Navy: hero, dark sections, headings */
  --blue: #1D4ED8;        /* Brand Blue: buttons, links, small markers */
  --sky: #3B82F6;         /* Accent Sky Blue: hover states, accents on navy */
  --bg: #F8FAFC;          /* Background Light */
  --text: #0F172A;        /* Text Dark */
  --muted: #475569;       /* Text Muted */

  /* Derived from the brand palette (tints, shades and transparencies).
     If you change a brand color above, update the matching values below:
     the rgba(...) numbers are the same colors written as red, green, blue. */
  --white: #FFFFFF;
  --surface: var(--white);           /* "Our Approach" band between two light sections */
  --navy-deep: #08162B;              /* navy darkened 25%: footer */
  --blue-hover: #265EE1;             /* blue mixed 30% with sky: button hover (white text 5.6:1) */
  --sky-light: #9DC0FB;              /* sky mixed 50% with white: numbers + focus ring on navy (9:1) */
  --on-dark: var(--white);
  --on-dark-muted: rgba(255, 255, 255, 0.72);   /* 9.1:1 on navy */
  --on-dark-subtle: rgba(255, 255, 255, 0.64);  /* 7.5:1 on navy, 7.8:1 on deep navy */

  /* Rules (hairlines) and grid lines */
  --rule: rgba(15, 23, 42, 0.12);           /* hairline on light backgrounds */
  --rule-strong: var(--navy);               /* section top rule on light backgrounds */
  --rule-dark: rgba(255, 255, 255, 0.14);   /* hairline on navy */
  --rule-dark-strong: rgba(255, 255, 255, 0.32);
  --grid-line: rgba(255, 255, 255, 0.055);  /* hero background grid */
  --grid-size: 75px;                        /* 1200px content = 16 grid cells; also sets the hero ruler tick spacing */

  /* Decorative details */
  --sky-glow: rgba(59, 130, 246, 0.16);          /* --sky: soft light in the hero corner */
  --ruler-major: rgba(157, 192, 251, 0.5);       /* --sky-light: long ruler ticks */
  --ruler-minor: rgba(157, 192, 251, 0.22);      /* --sky-light: short ruler ticks */
  --mark-on-dark: rgba(157, 192, 251, 0.6);      /* --sky-light: crosshairs on navy */
  --mark-on-light: rgba(15, 23, 42, 0.45);       /* --text: crosshairs on light */
  --plate-line: rgba(15, 23, 42, 0.38);          /* --text: approach drawing */
  --plate-axis: rgba(15, 23, 42, 0.28);          /* --text: approach drawing axes */
  --chip-border: rgba(15, 23, 42, 0.2);          /* --text: approach chips */
  --button-highlight: rgba(255, 255, 255, 0.14); /* top edge of buttons on navy */

  /* Focus ring (overridden on navy areas below) */
  --focus: var(--blue);

  /* Fonts */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (fluid: min size, scaling rate, max size) */
  --fs-label: 0.75rem;                                    /* 12px mono labels */
  --fs-small: 0.875rem;                                   /* 14px */
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);     /* 16 to 17px */
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /* 17 to 20px */
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);    /* 20 to 26px */
  --fs-statement: clamp(1.25rem, 1.02rem + 1vw, 1.875rem);/* 20 to 30px */
  --fs-h2: clamp(2rem, 1.35rem + 2.9vw, 3.75rem);         /* 32 to 60px */
  --fs-display: clamp(2.5rem, 1.45rem + 5.2vw, 6rem);     /* 40 to 96px */
  --fs-closing: clamp(2.5rem, 1.3rem + 6vw, 6.5rem);      /* 40 to 104px */

  /* Tracking (letter-spacing) */
  --track-display: -0.045em;
  --track-heading: -0.03em;
  --track-tight: -0.015em;
  --track-label: 0.09em;

  /* Layout */
  --content-max: 1200px;
  /* side padding; max() keeps text clear of the notch on phones held sideways */
  --gutter: max(clamp(1rem, 0.5rem + 2.5vw, 2.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --col-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --section-space: clamp(4.5rem, 3rem + 6vw, 9rem);        /* top/bottom of sections */
  --header-h: 3.75rem;

  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48em) {
  :root {
    --header-h: 4.25rem;
  }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Keeps anchor targets and focused elements clear of the sticky header */
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
address {
  margin: 0;
}

address {
  font-style: normal;
}

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

a {
  color: inherit;
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* Centered content column with side gutters */
.container {
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

/* Generic section spacing */
.section {
  padding-block: var(--section-space);
}

/* Section header: hairline rule on top, index label, then content.
   On desktop this becomes the asymmetric 12-column grid:
   label in columns 1-3, content in columns 4-12. */
.section__grid {
  border-top: 1px solid var(--rule-strong);
  padding-top: 1rem;
}

.section__aside {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.section__index {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.section__index-num {
  color: var(--blue);
}

.section__title {
  max-width: 22ch;
  color: var(--navy);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
}

.section__intro {
  max-width: 40rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

@media (min-width: 64em) {
  .section__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    padding-top: 1.5rem;
  }

  .section__aside {
    grid-column: 1 / span 3;
    margin-bottom: 0;
    /* nudges the label down so it lines up with the top of the heading's capitals */
    padding-top: calc(var(--fs-h2) * 0.22 - 0.3rem);
  }

  .section__head {
    grid-column: 4 / -1;
  }
}


/* ==========================================================================
   4. SHARED COMPONENTS
   ========================================================================== */

/* --- Small mono label (footer + contact field names) --- */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* --- Small square marker --- */
.marker {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--sky);
}

/* --- Buttons (mailto links styled as buttons) --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 100%; /* long labels wrap instead of overflowing on small phones */
  min-height: 3rem;
  padding: 0.75rem 1.375rem;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition:
    background-color 200ms var(--ease),
    border-color 200ms var(--ease);
}

.button__arrow {
  flex: none;
  width: 0.875em;
  height: 0.875em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform 250ms var(--ease);
}

@media (hover: hover) {
  .button:hover {
    background: var(--blue-hover);
    border-color: var(--sky);
  }

  .button:hover .button__arrow {
    transform: translateX(4px);
  }
}

/* On navy areas the Brand Blue fill is close to the background, so the
   button gets a Sky Blue hairline and a faint top highlight to stand out. */
.site-header .button,
.hero .button,
.section--contact .button {
  border-color: var(--sky);
  box-shadow: inset 0 1px 0 var(--button-highlight);
}

@media (hover: hover) {
  .site-header .button:hover,
  .hero .button:hover,
  .section--contact .button:hover {
    border-color: var(--sky-light);
  }
}

.button--compact {
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem;
  font-size: var(--fs-small);
}

.button--large {
  min-height: 3.5rem;
  padding: 1rem clamp(1.125rem, 0.75rem + 1.5vw, 1.75rem);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
}

/* --- Text link with arrow ("See How We Work") --- */
.text-link {
  display: inline-block;
  padding-block: 0.75rem; /* comfortable tap target */
  color: var(--on-dark);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--rule-dark-strong);
  transition: text-decoration-color 200ms var(--ease);
}

@media (hover: hover) {
  .text-link:hover {
    text-decoration-color: var(--sky);
  }

  .text-link:hover .text-link__arrow {
    transform: translateY(3px);
  }
}

.text-link__arrow {
  display: inline-block; /* keeps the arrow out of the underline */
  margin-left: 0.25rem;
  transition: transform 250ms var(--ease);
}

/* --- Keyboard focus --- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Navy areas use a light sky ring so focus stays visible */
.site-header,
.hero,
.section--contact,
.site-footer {
  --focus: var(--sky-light);
}

/* --- Skip link: hidden until focused with the keyboard --- */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--white);
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 2px solid var(--sky-light);
  outline-offset: 2px;
}

/* The skip link moves keyboard focus to <main>; no ring is needed there */
#main:focus {
  outline: none;
}

/* --- Registration marks ---
   Add class="reg-marks" to a ruled block to draw a thin "+" crosshair on
   each of its four corners, like crop marks on a technical drawing.
   They appear only where the block has visible rules (see media queries). */
.reg-marks {
  --mark-arm: 6px;
  --mark-color: var(--mark-on-light);
  position: relative;
}

.reg-marks::before {
  content: "";
  display: none;
  position: absolute;
  inset: calc((var(--mark-arm) + 1px) * -1);
  pointer-events: none;
  background:
    linear-gradient(var(--mark-color), var(--mark-color)) left 0 top var(--mark-arm) / calc(var(--mark-arm) * 2 + 1px) 1px no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) left var(--mark-arm) top 0 / 1px calc(var(--mark-arm) * 2 + 1px) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) right 0 top var(--mark-arm) / calc(var(--mark-arm) * 2 + 1px) 1px no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) right var(--mark-arm) top 0 / 1px calc(var(--mark-arm) * 2 + 1px) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) left 0 bottom var(--mark-arm) / calc(var(--mark-arm) * 2 + 1px) 1px no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) left var(--mark-arm) bottom 0 / 1px calc(var(--mark-arm) * 2 + 1px) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) right 0 bottom var(--mark-arm) / calc(var(--mark-arm) * 2 + 1px) 1px no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) right var(--mark-arm) bottom 0 / 1px calc(var(--mark-arm) * 2 + 1px) no-repeat;
}

/* --- Decorative SVG line icons --- */
.services__icon,
.approach__plate {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: square;
}

.services__icon *,
.approach__plate * {
  vector-effect: non-scaling-stroke;
}


/* ==========================================================================
   5. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: var(--on-dark);
  border-bottom: 1px solid var(--rule-dark);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap; /* with very large text the items move to a second row instead of overlapping */
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-height: var(--header-h);
}

/* --- Wordmark (also used in the footer) --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--on-dark);
  text-decoration: none;
}

.brand__mark {
  display: none; /* shown from 360px up, see below */
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
}

.brand__mark-frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.brand__mark-fill {
  fill: var(--sky);
}

.brand__name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand__suffix {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--on-dark-muted);
}

@media (min-width: 360px) {
  .brand__mark {
    display: block;
  }
}

/* --- In-page navigation --- */
.site-nav {
  display: none; /* shown from 768px up */
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.625rem;
  color: var(--on-dark-muted);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 1px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--ease);
}

@media (hover: hover) {
  .site-nav__link:hover {
    color: var(--on-dark);
  }

  .site-nav__link:hover::after {
    transform: scaleX(1);
  }
}

/* --- Header button: short label on small screens, long label on desktop --- */
.site-header__cta {
  flex: none;
}

.site-header__cta-long {
  display: none;
}

@media (min-width: 48em) {
  .site-nav {
    display: block;
    margin-left: auto;
  }

  .site-nav__list {
    gap: 1rem;
  }

  .site-header__cta {
    margin-left: 1rem;
  }
}

@media (min-width: 64em) {
  .site-nav__list {
    gap: 2.25rem;
  }

  .site-header__cta {
    margin-left: 2.5rem;
  }

  .site-header__cta-long {
    display: inline;
  }

  .site-header__cta-short {
    display: none;
  }
}


/* ==========================================================================
   6. SECTION 1 · HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--on-dark);
}

/* Ultra-fine line grid that fades out toward the bottom.
   Lines are centred so they meet the edges of the 1200px content column. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: calc(50% + var(--grid-size) / 2) 0;
  /* A mask only reads transparency: solid = grid visible, transparent = hidden. */
  -webkit-mask-image: linear-gradient(to bottom, var(--navy) 0%, rgba(11, 30, 57, 0.55) 45%, transparent 88%);
  mask-image: linear-gradient(to bottom, var(--navy) 0%, rgba(11, 30, 57, 0.55) 45%, transparent 88%);
}

/* Very soft sky-blue light in the top-right corner */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse 55% 60% at 90% -10%, var(--sky-glow), transparent 70%);
}

/* Registration marks sitting exactly on grid intersections (1440px and wider) */
.hero__mark {
  display: none;
  position: absolute;
  top: calc(var(--grid-size) - 6px);
  width: 13px;
  height: 13px;
  opacity: 0.7;
  pointer-events: none;
}

.hero__mark::before,
.hero__mark::after {
  content: "";
  position: absolute;
  background: var(--sky);
}

.hero__mark::before {
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
}

.hero__mark::after {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 1px;
}

/* One grid cell outside the content column, so they never touch the text */
.hero__mark--left {
  left: calc(50% - var(--content-max) / 2 - var(--grid-size) - 6px);
}

.hero__mark--right {
  left: calc(50% + var(--content-max) / 2 + var(--grid-size) - 6px);
}

@media (min-width: 1440px) {
  .hero__mark {
    display: block;
  }
}

.hero__layout {
  padding-block: clamp(3.5rem, 2rem + 8vw, 8.5rem) clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.hero__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  max-width: 30ch;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  color: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__eyebrow .marker {
  transform: translateY(-0.05em);
}

.hero__title {
  color: var(--on-dark);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.hero__subhead {
  max-width: 36rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  color: var(--on-dark-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 64em) {
  .hero__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .hero__eyebrow {
    grid-column: 1 / span 3;
    align-self: start;
    margin-bottom: 0;
    /* lines the label up with the top of the headline's capitals */
    padding-top: calc(var(--fs-display) * 0.19 - 0.3rem);
    padding-right: 1rem;
  }

  .hero__main {
    grid-column: 4 / -1;
  }
}

/* On desktop screens the hero fills the first view, with the contents
   strip resting on the bottom edge. */
@media (min-width: 64em) and (min-height: 700px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: min(calc(100vh - var(--header-h)), 64rem);
  }

  .hero__layout {
    flex: 1 0 auto;
    align-content: center;
    /* tighter vertical padding so the contents strip lands above the fold */
    padding-block: clamp(3rem, 7vh, 6rem);
  }
}

/* Laptops with short screens: shrink the headline and spacing a little so
   the buttons and the contents strip still fit in the first view. */
@media (min-width: 64em) and (max-height: 880px) {
  :root {
    --fs-display: clamp(2.5rem, min(1.45rem + 5.2vw, 10.5vh), 6rem);
  }

  .hero__layout {
    padding-block: 1.5rem;
  }

  .hero__subhead {
    margin-top: 1.25rem;
  }

  .hero__actions {
    margin-top: 1.5rem;
  }

  .hero .ruler {
    margin-top: 0.5rem;
  }
}

/* --- Ruler: fine tick marks resting on the contents strip's top rule --- */
.ruler {
  height: 0.625rem;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  background-image:
    repeating-linear-gradient(90deg, var(--ruler-major) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(90deg, var(--ruler-minor) 0 1px, transparent 1px calc(var(--grid-size) / 5));
  background-size: 100% 100%, 100% 50%;
  background-repeat: no-repeat;
  background-position: left bottom, left bottom;
}

/* --- Hero "contents" strip (numbered links to each section) --- */
.contents {
  padding-bottom: 5px; /* keeps the keyboard focus ring on navy */
  border-top: 1px solid var(--rule-dark);
}

.contents__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0;
}

.contents__item:nth-child(even) {
  border-left: 1px solid var(--rule-dark);
}

.contents__item:nth-child(n + 3) {
  border-top: 1px solid var(--rule-dark);
}

.contents__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  padding: 1rem 0.75rem 1.25rem;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.contents__item:nth-child(odd) .contents__link {
  padding-left: 0;
}

/* Sky line that draws across the top on hover */
.contents__link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}

@media (hover: hover) {
  .contents__link:hover {
    color: var(--on-dark);
  }

  .contents__link:hover::before {
    transform: scaleX(1);
  }
}

.contents__num {
  color: var(--sky-light);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
}

.contents__label {
  font-size: 0.9375rem;
  line-height: 1.35;
}

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

  .contents__item:nth-child(n + 3) {
    border-top: 0;
  }

  .contents__item + .contents__item {
    border-left: 1px solid var(--rule-dark);
  }

  .contents__link,
  .contents__item:nth-child(odd) .contents__link {
    padding: 1.25rem 1.25rem 1.75rem;
  }

  .contents__item:first-child .contents__link {
    padding-left: 0;
  }
}


/* ==========================================================================
   7. SECTION 2 · WHAT WE DO (#services)
   Three columns divided by vertical hairlines (stacked on phones).
   ========================================================================== */

.services {
  display: grid;
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  list-style: none;
  padding: 0;
}

.services__item {
  padding-block: 1.75rem 2.25rem;
  border-top: 1px solid var(--rule);
}

.services__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

.services__num {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
}

.services__icon {
  width: 2rem;
  height: 2rem;
  color: var(--navy);
}

.icon-accent {
  fill: var(--blue);
  stroke: none;
}

.services__title {
  margin-bottom: 0.875rem;
  color: var(--navy);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

.services__body {
  max-width: 34rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Tablets: number and icon sit in a narrow column beside the text */
@media (min-width: 640px) and (max-width: 859.98px) {
  .services__item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }

  .services__meta {
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0;
  }

  .services__title {
    padding-top: 0.125rem;
  }
}

@media (min-width: 860px) {
  .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--rule);
  }

  .services.reg-marks::before {
    display: block;
  }

  .services__item {
    /* subgrid lines up the titles and texts across the three columns */
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start; /* keeps titles aligned in browsers without subgrid */
    padding: 2rem clamp(1.25rem, 0.5rem + 1.5vw, 2.25rem) 2.5rem;
    border-top: 0;
  }

  .services__item:first-child {
    padding-left: 0;
  }

  .services__item:last-child {
    padding-right: 0;
  }

  .services__item + .services__item {
    border-left: 1px solid var(--rule);
  }
}


/* ==========================================================================
   8. SECTION 3 · OUR APPROACH (#approach)
   ========================================================================== */

.section--approach {
  background: var(--surface);
  border-block: 1px solid var(--rule);
}

.approach__plate {
  display: none; /* shown on desktop only */
  width: min(100%, 11rem);
  height: auto;
  margin-top: 3rem;
  color: var(--plate-line);
}

.plate__axis,
.plate__ticks {
  stroke: var(--plate-axis);
}

.plate__radius {
  stroke: var(--blue);
}

.plate__dot {
  fill: var(--blue);
  stroke: none;
}

.approach__statement {
  max-width: 46rem;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  color: var(--text);
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--track-tight);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  list-style: none;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.chip::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--blue);
}

@media (min-width: 64em) {
  .approach__plate {
    display: block;
  }
}


/* ==========================================================================
   9. SECTION 4 · WHO WE SERVE (#clients)
   ========================================================================== */

.audience {
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  border-top: 1px solid var(--rule);
  list-style: none;
  padding: 0;
}

.audience__item {
  position: relative;
  padding: 1.25rem 0 1.25rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* Section 4's intro paragraph is the section's main body copy: Text Dark */
.section--clients .section__intro {
  color: var(--text);
}

/* Small blue square marker, aligned to the first line of text */
.audience__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.25rem + 0.75em - 0.1875rem);
  width: 0.375rem;
  height: 0.375rem;
  background: var(--blue);
}

@media (min-width: 64em) {
  .audience__item {
    padding-block: 1.5rem;
  }

  .audience__item::before {
    top: calc(1.5rem + 0.75em - 0.1875rem);
  }
}


/* ==========================================================================
   10. SECTION 5 · CLOSING CTA (#contact)
   ========================================================================== */

.section--contact {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--on-dark);
}

/* Same fine grid as the hero, fading in from the lower right */
.section--contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: calc(50% + var(--grid-size) / 2) 100%;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 100%, var(--navy), transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 100% 100%, var(--navy), transparent 75%);
}

.section--contact .section__grid {
  border-top-color: var(--rule-dark-strong);
}

.section--contact .section__index {
  color: var(--on-dark-muted);
}

.section--contact .section__index-num {
  color: var(--sky-light);
}

.contact__title {
  color: var(--on-dark);
  font-size: var(--fs-closing);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: var(--track-display);
  overflow-wrap: break-word; /* very large text on narrow phones must not scroll sideways */
}

.contact__title-line {
  display: block;
}

.contact__body {
  max-width: 40rem;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  color: var(--on-dark-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.contact__actions {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.contact__details {
  display: grid;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  border-top: 1px solid var(--rule-dark);
}

.contact__detail {
  display: grid;
  gap: 0.375rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule-dark);
}

.contact__detail dt {
  color: var(--on-dark-subtle);
}

.contact__link {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--on-dark);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--rule-dark-strong);
  transition: text-decoration-color 200ms var(--ease);
}

@media (hover: hover) {
  .contact__link:hover {
    text-decoration-color: var(--sky);
  }
}

@media (min-width: 640px) {
  .contact__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--rule-dark);
  }

  .contact__details.reg-marks {
    --mark-color: var(--mark-on-dark);
  }

  .contact__details.reg-marks::before {
    display: block;
  }

  .contact__detail {
    padding: 1.5rem 1.5rem 1.75rem 0;
    border-bottom: 0;
  }

  .contact__detail + .contact__detail {
    padding-left: 1.5rem;
    border-left: 1px solid var(--rule-dark);
  }
}

@media (min-width: 64em) {
  /* the closing headline is larger, so its label sits a little lower */
  .section--contact .section__aside {
    padding-top: calc(var(--fs-closing) * 0.19 - 0.3rem);
  }
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.site-footer {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2rem;
  background: var(--navy-deep);
  color: var(--on-dark-muted);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
}

.site-footer__brand .brand {
  min-height: 0;
}

.site-footer__facts {
  display: grid;
  border-top: 1px solid var(--rule-dark);
}

.site-footer__fact {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--rule-dark);
}

.site-footer__fact dt {
  color: var(--on-dark-subtle);
}

.site-footer__fact dd {
  color: var(--on-dark);
}

.site-footer__link {
  color: var(--on-dark);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--rule-dark-strong);
  transition: text-decoration-color 200ms var(--ease);
}

@media (hover: hover) {
  .site-footer__link:hover {
    text-decoration-color: var(--sky);
  }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  color: var(--on-dark-subtle);
  font-size: 0.8125rem;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.625rem;
}

.site-footer__legal-link {
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--on-dark-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--rule-dark-strong);
  transition:
    color 200ms var(--ease),
    text-decoration-color 200ms var(--ease);
}

@media (hover: hover) {
  .site-footer__legal-link:hover {
    color: var(--on-dark);
    text-decoration-color: var(--sky);
  }
}

.site-footer__sep {
  color: var(--on-dark-subtle);
}

/* Very narrow phones: drop the dots so none is left dangling at a line end */
@media (max-width: 359px) {
  .site-footer__sep {
    display: none;
  }

  .site-footer__legal {
    gap: 0 1rem;
  }
}

@media (min-width: 640px) {
  .site-footer__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-dark);
  }

  .site-footer__brand {
    grid-column: 1 / span 3;
  }

  .site-footer__facts {
    grid-column: 4 / -1;
    row-gap: 2.25rem;
    border-top: 0;
  }

  .site-footer__fact {
    padding-block: 0;
    border-bottom: 0;
  }
}


/* ==========================================================================
   12. USER PREFERENCES
   ========================================================================== */

/* Turn off movement for people who ask their system for less motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .button:hover .button__arrow,
  .text-link:hover .text-link__arrow {
    transform: none;
  }
}

/* Windows High Contrast / forced colors: keep markers visible */
@media (forced-colors: active) {
  .marker,
  .chip::before,
  .audience__item::before,
  .hero__mark::before,
  .hero__mark::after {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .ruler,
  .reg-marks::before {
    display: none !important;
  }
}