/* ==========================================================================
   NomSou Services LLC — studio site stylesheet
   --------------------------------------------------------------------------
   Structure of this file:
     1.  Design tokens (colors, type, spacing)
     2.  Reset and base elements
     3.  Layout helpers (container, section, grid)
     4.  Reusable components (buttons, labels, cards, forms)
     5.  Site header and navigation
     6.  Homepage sections
     7.  Case study pages
     8.  Footer
     9.  Motion (scroll reveal)
     10. Responsive adjustments
   Every color and size lives in section 1. Change a value there and it
   updates everywhere on the site.
   ========================================================================== */

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

:root {
  /* Brand palette — Coolors board (lime gold, charcoal olive, slate, blue, pale ground) */
  --charcoal: #3D3B30;
  --navy: #4D5061;
  --gold: #E7E247;
  --blue: #5C80BC;
  --mist: #E9EDDE;
  --white: #ffffff;

  /* Shades derived from the palette (kept in one place on purpose) */
  --navy-deep: #3D3B30;   /* darkest charcoal olive for the hero and footer */
  --navy-soft: #5C6070;   /* hairlines and borders on dark backgrounds */
  --gold-bright: #EDE975; /* hover state for gold fills */
  --gold-ink: #615F1E;    /* gold dark enough to read as TEXT on light backgrounds
                             (5.6:1 on --paper — plain gold is only 1.15:1) */
  --blue-ink: #4A6696;    /* blue dark enough to read as TEXT on light backgrounds
                             (4.9:1 on --paper — plain blue is only 3.3:1) */
  --paper: #E9EDDE;       /* pale ground page background */
  --ink-soft: #6B6B5F;    /* secondary body text on light backgrounds */
  --mist-soft: #BEC0B2;   /* secondary body text on dark backgrounds */

  /* Typography */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* Type scale — clamp() means the size flexes with the viewport */
  --step-display: clamp(2.75rem, 7vw, 5.5rem);
  --step-h1: clamp(2.25rem, 5vw, 4rem);
  --step-h2: clamp(1.75rem, 3.4vw, 3rem);
  --step-h3: clamp(1.25rem, 2vw, 1.75rem);
  --step-body-lg: clamp(1.05rem, 1.4vw, 1.25rem);
  --step-body: 1rem;
  --step-small: 0.875rem;
  --step-micro: 0.75rem;

  /* Spacing */
  --gutter: 1.5rem;
  --section-y: clamp(5rem, 11vw, 9.5rem);
  --max-width: 1240px;
  --max-text: 62ch;

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

/* 2. RESET AND BASE ======================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--charcoal);
}

p { margin: 0 0 1.25rem; max-width: var(--max-text); }
p:last-child { margin-bottom: 0; }

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

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

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

::selection { background: var(--gold); color: var(--navy-deep); }

/* Several components below set display:flex or display:grid, which would
   otherwise override the browser's own rule for the hidden attribute.
   This keeps hidden meaning hidden. */
[hidden] { display: none !important; }

/* Visible keyboard focus everywhere — accessibility baseline */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Gold is the readable focus ring on dark panels (blue is only 2.8:1 there) */
.section--dark :focus-visible,
.section--navy :focus-visible,
.hero :focus-visible,
.case-hero :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.next-project :focus-visible {
  outline-color: var(--gold);
}

/* Screen-reader-only text (used for the skip link and form hints) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.skip-link:focus { top: 1rem; }

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

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.section--dark {
  background: var(--navy-deep);
  color: var(--mist);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--white); }

.section--navy { background: var(--navy); color: var(--mist); }
.section--navy h2, .section--navy h3 { color: var(--white); }

/* A thin rule with the section number, used above every section heading */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head__title { font-size: var(--step-h2); }

.section-head__intro {
  font-size: var(--step-body-lg);
  color: var(--ink-soft);
  max-width: 48ch;
}
.section--dark .section-head__intro,
.section--navy .section-head__intro { color: var(--mist-soft); }

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

/* Small uppercase monospace label — the recurring accent of the site */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0;
}
/* On dark panels the brighter brand gold is the readable one */
.section--dark .label,
.section--navy .label,
.hero .label,
.case-hero .label,
.next-project .label,
.site-footer .label { color: var(--gold); }
.label::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.label--plain::before { display: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--speed) var(--ease),
              color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
  transform: translateY(-2px);
}
.btn__arrow { transition: transform var(--speed) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(233, 237, 222, 0.35);
}
.btn--ghost:hover { background: var(--white); color: var(--navy-deep); border-color: var(--white); }

.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Inline text link with an animated gold underline */
.link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-ink);
  padding-bottom: 0.35rem;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.section--dark .link, .section--navy .link { color: var(--white); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(61, 59, 48, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
/* JavaScript adds .is-scrolled once the page moves down */
.site-header.is-scrolled { border-bottom-color: var(--navy-soft); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--white);
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__name {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand__name span { color: var(--gold); }

.nav { display: flex; align-items: center; gap: 2rem; }

.nav__list { display: flex; align-items: center; gap: 1.75rem; }

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  padding-block: 0.4rem;
  transition: color var(--speed) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--gold); }

.nav__cta { padding: 0.7rem 1.15rem; }

/* Mobile menu button — hidden on desktop */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--navy-soft);
  color: var(--white);
  cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }

/* 6. HOMEPAGE ============================================================== */

/* --- Hero --- */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--mist);
  padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}

/* Faint gold grid behind the hero, drawn in CSS so there is no image to load */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(231, 226, 71, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 226, 71, 0.11) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__title {
  font-size: var(--step-display);
  color: var(--white);
  margin-block: 1.75rem 1.5rem;
  max-width: 17ch;
}
.hero__title em { font-style: normal; color: var(--gold); }

.hero__lede {
  font-size: var(--step-body-lg);
  color: var(--mist-soft);
  max-width: 54ch;
  margin-bottom: 2.25rem;
}

/* Row of stats under the hero copy */
.hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--navy-soft);
}
.hero__stat-value {
  font-size: var(--step-h3);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
}
.hero__stat-label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-soft);
  margin-top: 0.35rem;
}

/* --- Featured work grid --- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
/* First and last cards span both columns — full, half, half, full.
   That rhythm keeps the grid from leaving a lonely card in one column. */
.work-grid > .work-card:first-child,
.work-grid > .work-card:last-child { grid-column: 1 / -1; }

.work-card { display: block; color: inherit; }

.work-card__media {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 16 / 10;
}
.work-card:first-child .work-card__media,
.work-card:last-child .work-card__media { aspect-ratio: 21 / 9; }

.work-card__media img,
.work-card__media svg {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.work-card:hover .work-card__media img,
.work-card:hover .work-card__media svg { transform: scale(1.04); }

.work-card__index {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  color: var(--gold);
  background: rgba(61, 59, 48, 0.75);
  padding: 0.35rem 0.6rem;
}

.work-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(61, 59, 48), 0.15);
  margin-top: 1.25rem;
}

.work-card__title {
  font-size: var(--step-h3);
  transition: color var(--speed) var(--ease);
}
.work-card:hover .work-card__title { color: var(--blue-ink); }

.work-card__tags {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.work-card__summary {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: var(--step-small);
  max-width: 60ch;
}

/* --- Services (the three-tier engagement model) --- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--navy-soft);
  border: 1px solid var(--navy-soft);
}

.tier {
  background: var(--navy-deep);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background var(--speed) var(--ease);
}
.tier:hover { background: var(--navy); }

.tier__step {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.18em;
  color: var(--gold);
}
.tier__name { font-size: var(--step-h3); color: var(--white); }
.tier__desc { color: var(--mist-soft); font-size: var(--step-small); margin: 0; }

.tier__list { display: grid; gap: 0.6rem; margin-top: auto; padding-top: 1rem; }
.tier__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--step-small);
  color: var(--mist);
}
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 1px;
  background: var(--gold);
}

/* --- Process --- */
.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}
.process__item { border-top: 1px solid rgba(61, 59, 48), 0.2); padding-top: 1.25rem; }
.process__num {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.18em;
  color: var(--gold-ink);
}
.process__title { font-size: 1.15rem; margin-block: 0.6rem 0.5rem; }
.process__text { font-size: var(--step-small); color: var(--ink-soft); margin: 0; }

/* --- Pull quote --- */
.quote { text-align: center; }
.quote__text {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--white);
  max-width: 22ch;
  margin-inline: auto;
}
.quote__text b { color: var(--gold); font-weight: 500; }
.quote__attr {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-soft);
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-detail { display: grid; gap: 0.3rem; margin-bottom: 1.75rem; }
.contact-detail__label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact-detail__value { font-size: var(--step-body-lg); color: var(--white); }
.contact-detail__value a:hover { color: var(--gold); }

/* Forms */
.form { display: grid; gap: 1.25rem; }
/* Keep the submit button its natural width on desktop, full width on phones */
.form > .btn { justify-self: start; padding-inline: 2.25rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-soft);
}
.field__label .req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--navy-soft);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(190, 192, 178, 0.6); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}
/* The native dropdown arrow is removed for consistency, so we draw our own.
   The image below is a small chevron encoded directly in the CSS. */
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23E7E247' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}
.field select option { background: var(--navy-deep); color: var(--white); }

/* Inline validation message under a field */
.field__error {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  color: #ff9b8a;
  min-height: 1rem;
}

/* Honeypot field — hidden from people, visible to naive bots */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Form status banner */
.form__status {
  font-family: var(--font-mono);
  font-size: var(--step-small);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--navy-soft);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-success { border-color: var(--gold); color: var(--gold); }
.form__status.is-error { border-color: #ff9b8a; color: #ff9b8a; }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* 7. CASE STUDY PAGES ====================================================== */

.case-hero {
  background: var(--navy-deep);
  color: var(--mist);
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem);
}
.case-hero__title { font-size: var(--step-h1); color: var(--white); margin-block: 1.5rem 1.25rem; max-width: 18ch; }
.case-hero__lede { font-size: var(--step-body-lg); color: var(--mist-soft); max-width: 56ch; }

/* Project fact table under the case study hero */
.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--navy-soft);
}
.case-meta__label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.case-meta__value { font-size: var(--step-small); color: var(--mist); }

/* Full-width project image band */
.case-figure { margin: 0; }
.case-figure__media { background: var(--navy); overflow: hidden; }
.case-figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}
.section--dark .case-figure figcaption { color: var(--mist-soft); }

/* Two-column narrative block: sticky heading beside body copy */
.case-block {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(61, 59, 48), 0.15);
}
.case-block:first-of-type { border-top: 0; }
.case-block__aside { position: sticky; top: 100px; align-self: start; }
.case-block__title { font-size: var(--step-h3); margin-top: 0.75rem; }
.case-block__body > p { font-size: var(--step-body-lg); }

.bullet-list { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.bullet-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: var(--gold-ink);
}
.section--dark .bullet-list li::before,
.section--navy .bullet-list li::before { background: var(--gold); }
.section--dark .bullet-list li,
.section--navy .bullet-list li { color: var(--mist-soft); }
.section--dark .bullet-list b,
.section--navy .bullet-list b { color: var(--white); }
.bullet-list b { color: var(--charcoal); font-weight: 600; }

/* Outcome metrics */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--navy-soft);
  border: 1px solid var(--navy-soft);
}
.metric { background: var(--navy-deep); padding: clamp(1.5rem, 3vw, 2.25rem); }
.metric__value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--gold);
  line-height: 1;
}
.metric__label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-soft);
  margin-top: 0.85rem;
}

/* Swatches and type specimen used in the identity section */
.swatch-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.swatch { width: 120px; }
.swatch__chip { height: 76px; border: 1px solid rgba(61, 59, 48), 0.15); }
.swatch__name {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

/* Next-project footer link */
.next-project {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.next-project__title {
  font-size: var(--step-h2);
  color: var(--white);
  transition: color var(--speed) var(--ease);
}
.next-project:hover .next-project__title { color: var(--gold); }

/* View counter pill */
.view-count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-soft);
}
.view-count__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* 8. FOOTER ================================================================ */

.site-footer {
  background: var(--navy-deep);
  color: var(--mist-soft);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  border-top: 1px solid var(--navy-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.footer__blurb { font-size: var(--step-small); max-width: 34ch; margin-top: 1.25rem; }

.footer__heading {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
}

.footer__list { display: grid; gap: 0.7rem; }
.footer__list a { font-size: var(--step-small); transition: color var(--speed) var(--ease); }
.footer__list a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-soft);
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.08em;
}

/* 9. MOTION ================================================================ */

/* Elements start slightly offset and fade in when scrolled into view.
   JavaScript adds .is-visible; if JS never runs, a fallback in the HTML
   <noscript> shows everything. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger children of a revealed group */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* Respect the visitor's system setting for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* 9b. SMALL UTILITY CLASSES ================================================
   A handful of named classes so the HTML never needs a style="" attribute.
   If you want to nudge one of these spacings, change it here once. */

.u-center        { margin-inline: auto; }
.u-center-items  { justify-content: center; }
.u-mt-md         { margin-top: 2rem; }
.u-mt-lg         { margin-top: clamp(2rem, 4vw, 3rem); }
.u-mt-xl         { margin-top: 3rem; }
.u-text-sm       { font-size: 1rem; }

/* The band that holds a case study's cover image, tucked against the hero */
.section--flush-top { padding-top: 0; background: var(--navy-deep); }

/* Contact block headings */
.contact__title  { margin-block: 1.25rem 1.5rem; }
.contact__intro  { margin-bottom: 2.5rem; }

/* Case study: approach list and outcome copy */
.case-approach       { max-width: 78ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.case-outcome        { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 70ch; }
.case-outcome__lede  { font-size: var(--step-body-lg); color: var(--mist); }
.case-outcome__note  { color: var(--mist-soft); margin-top: 1rem; }

/* Next-project link */
.next-project__title { display: block; margin-top: 0.75rem; }
.link--gold          { color: var(--gold); }

/* The 404 page centres its single block in the window */
.page-center { min-height: 100vh; display: grid; place-items: center; text-align: center; }
.u-measure-short { max-width: 14ch; }

/* 10. RESPONSIVE =========================================================== */

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .case-block { grid-template-columns: minmax(0, 1fr); }
  .case-block__aside { position: static; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; position: relative; }

  /* Mobile navigation panel */
  .nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--navy-soft);
    padding: 1.25rem var(--gutter) 2rem;
    transform: translateY(-12px);
    opacity: 0;
    /* visibility:hidden — not just opacity — so the links are also out of the
       keyboard tab order and hidden from screen readers while the menu is shut */
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--speed) var(--ease),
                transform var(--speed) var(--ease),
                visibility var(--speed);
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding-block: 1rem;
    border-bottom: 1px solid var(--navy-soft);
    font-size: var(--step-small);
  }
  .nav__cta { margin-top: 1.25rem; justify-content: center; }

  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .work-grid > .work-card:first-child .work-card__media,
  .work-grid > .work-card:last-child .work-card__media { aspect-ratio: 4 / 3; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .form > .btn { justify-self: stretch; justify-content: center; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .hero__meta { grid-template-columns: minmax(0, 1fr); }
}