/* ==========================================================================
   NANG U — Landing page styles
   Vanilla CSS. Custom properties mirror the design tokens defined in the
   Paper file 1:1 (see brain/How We Work.md — "Components reference tokens,
   never raw hex"). BEM class naming throughout. CSS Grid is used for every
   multi-column layout; flex is reserved for one-dimensional clusters
   (nav links, button label + icon, marquee items, meta rows).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (global, :root scope)
   -------------------------------------------------------------------------- */
:root {
  /* Colour — ink / neutrals */
  --color-ink: #1E2347;
  --color-ink-deep: #151931;
  --color-ground: #EFE7DA;

  /* Colour — corporate-mockup palette (client-sampled; the live palette
     this build uses for panels, muted text and the accent) */
  --color-corp-base: #FAF9F5;
  --color-corp-panel: #EBF0F4;
  --color-corp-rule: #D7DFE6;
  --color-corp-muted: #5B6B80;
  --color-corp-accent: #677D94;
  --color-corp-accent-cta: #55687B;
  --color-corp-accent-hover: #465768;
  --color-corp-hero-cta: #1E2347;

  /* Colour — text on dark (navy) grounds */
  --color-on-ink: var(--color-corp-base);
  --color-muted-on-ink: #C7CBD9;

  /* Colour — surface helpers */
  --color-divider-on-ink: rgb(250 249 245 / 30%);
  --color-divider-on-ink-soft: rgb(250 249 245 / 15%);
  --color-shadow-ink: rgb(21 25 49 / 28%);

  /* Type families */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type sizes / line-heights — matched to the artboard's actual rendered
     values (a couple of the named Paper tokens had drifted from real
     usage; these follow the design as built, not the stale token). */
  --text-2xs: 12px;   --leading-2xs: 16px;   /* compact meta labels (Phone/Email dt) */
  --text-xs: 13px;    --leading-xs: 16px;    /* form field labels */
  --text-sm: 14px;    --leading-sm: 18px;    /* nav links, buttons, numerals */
  --text-label: 15px; --leading-label: 20px; /* uppercase eyebrow labels */
  --text-base: 16px;  --leading-base: 20px;  /* contact detail values */
  --text-body: 19px;  --leading-body: 31px;  /* standalone paragraphs */
  --text-item-head: 26px;      --leading-item-head: 32px;
  --text-form-head: 22px;      --leading-form-head: 28px;
  --text-statement: 34px;      --leading-statement: 44px;
  --text-section-head: 58px;   --leading-section-head: 64px;
  --text-partnership-head: 52px; --leading-partnership-head: 60px;
  --text-manifesto: 68px;      --leading-manifesto: 80px;
  --text-hero: 88px;           --leading-hero: 92px;
  --text-journey-numeral: 200px;

  --weight-regular: 400;
  --weight-medium: 500;

  --tracking-label: 0.16em;
  --tracking-tight: -0.02em;

  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 120px;
  --space-4xl: 160px;

  /* Recurring gap that doesn't sit on the spacing scale steps above, but
     shows up identically in every section's label+heading intro block
     (approach, partnership, capabilities, sectors, values, journey,
     philosophy, the CTA pitch) — named so it reads as deliberate. */
  --gap-intro: 24px;
  --gap-card: 16px;

  --radius-sm: 4px;
  --radius-full: 999px;

  /* Layout — no max-width cap: every section uses the same mechanism as
     the nav (fixed padding-inline, full width), so left/right edges stay
     pixel-identical across sections at any viewport width. */
  --page-gutter: var(--space-2xl);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-reveal: 700ms;
  --duration-fast: 200ms;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--color-corp-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Shared utilities
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-md);
  z-index: 100;
  background-color: var(--color-ink);
  color: var(--color-corp-base);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-md); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.button:active { transform: translateY(1px); }
.button__icon { transition: transform var(--duration-fast) var(--ease-out); }
.button:hover .button__icon { transform: translateX(3px); }

.button--nav {
  background-color: var(--color-corp-base);
  color: var(--color-ink);
  padding: 14px 24px;
}
.button--nav:hover { background-color: var(--color-corp-panel); }

.button--hero {
  background-color: var(--color-corp-hero-cta);
  color: var(--color-corp-base);
  padding: 14px 26px;
}
.button--hero:hover { background-color: var(--color-ink-deep); }

.button--form {
  width: 100%;
  justify-content: center;
  background-color: var(--color-corp-accent-cta);
  color: var(--color-corp-base);
  padding: var(--space-md);
}
.button--form:hover { background-color: var(--color-corp-accent-hover); }
.button--form:disabled { opacity: 0.6; cursor: progress; }

/* Scroll-reveal primitive — JS toggles [data-revealed] on intersection */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}
[data-reveal][data-revealed] { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   4. Site header
   -------------------------------------------------------------------------- */
.site-header {
  --site-header-bg: var(--color-ink);
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--site-header-bg);
  box-shadow: 0 0 0 rgb(0 0 0 / 0%);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.site-header[data-scrolled] { box-shadow: 0 8px 24px rgb(21 25 49 / 25%); }

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-xl);
  padding-block: 24px;
  padding-inline: var(--page-gutter);
}

.site-header__logo { flex-shrink: 0; line-height: 0; }
.site-header__logo-mark {
  width: 84px;
  height: 82px;
  filter: brightness(0%) invert(100%);
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.site-header__nav-link {
  color: var(--color-corp-base);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-sm);
  position: relative;
}
.site-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}
.site-header__nav-link:hover::after,
.site-header__nav-link:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  --hero-gap: 48px;
  background-color: var(--color-corp-panel);
  padding-top: 64px;
  padding-bottom: var(--space-lg);
  padding-inline: var(--page-gutter);
}

.hero__label {
  color: var(--color-corp-muted);
  margin-bottom: 28px;
}

.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 920px) minmax(280px, 340px);
  align-items: end;
  justify-content: space-between;
  gap: var(--hero-gap);
}

.hero__heading {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.hero__word[data-revealed] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__word { opacity: 1; transform: none; transition: none; }
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__support {
  color: var(--color-corp-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* --------------------------------------------------------------------------
   6. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  --marquee-speed: 42s;
  background-color: var(--color-corp-base);
  border-bottom: 1px solid var(--color-corp-rule);
  padding-block: var(--space-xl);
  overflow: clip;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}
.marquee[data-paused] .marquee__track { animation-play-state: paused; }

.marquee__list {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  flex-shrink: 0;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: var(--text-item-head);
  line-height: var(--leading-item-head);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-corp-muted);
  white-space: nowrap;
}

.marquee__glyph {
  color: var(--color-corp-accent);
  font-family: var(--font-display);
  font-size: var(--text-item-head);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   7. Hero image
   -------------------------------------------------------------------------- */
.hero-image {
  background-color: var(--color-corp-panel);
  padding-inline: var(--page-gutter);
}

.hero-image__frame {
  border-radius: var(--radius-sm);
  overflow: clip;
}

.hero-image__img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center 40%;
}

/* --------------------------------------------------------------------------
   8. Approach
   -------------------------------------------------------------------------- */
.approach {
  background-color: var(--color-corp-panel);
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 64px;
  padding-block: 120px 160px;
  padding-inline: var(--page-gutter);
}

.approach__intro { display: flex; flex-direction: column; gap: var(--gap-intro); }
.approach__intro .eyebrow { color: var(--color-corp-muted); }

.approach__heading {
  font-family: var(--font-display);
  font-size: var(--text-section-head);
  line-height: var(--leading-section-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.approach__content { display: flex; flex-direction: column; gap: var(--space-lg); }

.approach__statement {
  font-family: var(--font-display);
  font-size: var(--text-statement);
  line-height: var(--leading-statement);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.approach__body {
  color: var(--color-corp-muted);
  padding-top: var(--space-xs);
}

/* --------------------------------------------------------------------------
   9. Partnership (navy)
   -------------------------------------------------------------------------- */
.partnership {
  background-color: var(--color-ink);
  padding-block: 120px;
  padding-inline: var(--page-gutter);
}

.partnership__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.partnership__intro { display: flex; flex-direction: column; gap: var(--gap-intro); }
.partnership__intro .eyebrow { color: var(--color-corp-base); }

.partnership__heading {
  font-family: var(--font-display);
  font-size: var(--text-partnership-head);
  line-height: var(--leading-partnership-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-corp-base);
}

.partnership__body {
  color: var(--color-corp-base);
  padding-top: 44px;
  max-width: 600px;
}

.partnership__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-lg);
  padding-top: 56px;
  border-top: 1px solid var(--color-divider-on-ink);
}

.partnership__point {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-right: 40px;
}
.partnership__point + .partnership__point {
  border-left: 1px solid var(--color-divider-on-ink);
  padding-left: 40px;
}

.partnership__point-number {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-corp-base);
}

.partnership__point-title {
  font-family: var(--font-display);
  font-size: var(--text-item-head);
  line-height: var(--leading-item-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-corp-base);
}

.partnership__point-body { color: var(--color-corp-base); }

/* --------------------------------------------------------------------------
   10. Capabilities
   -------------------------------------------------------------------------- */
.capabilities {
  background-color: var(--color-ground);
  padding-block: 120px;
  padding-inline: var(--page-gutter);
}

.capabilities__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.capabilities__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 80px;
  align-items: start;
}

.capabilities__intro { display: flex; flex-direction: column; gap: var(--gap-intro); }
.capabilities__intro .eyebrow { color: var(--color-corp-muted); }

.capabilities__heading {
  font-family: var(--font-display);
  font-size: var(--text-section-head);
  line-height: var(--leading-section-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.capabilities__support { color: var(--color-corp-muted); padding-top: 44px; }

.capabilities__list { border-top: 1px solid var(--color-corp-rule); }

.capabilities__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 80px;
  align-items: center;
  padding-block: 56px;
  border-bottom: 1px solid var(--color-corp-rule);
}
.capabilities__row:last-child { border-bottom: none; }

.capabilities__row-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card);
  max-width: 560px;
}

.capabilities__row-number {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-corp-accent-cta);
}

.capabilities__row-title {
  font-family: var(--font-display);
  font-size: var(--text-item-head);
  line-height: var(--leading-item-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.capabilities__row-body { color: var(--color-corp-muted); }

.capabilities__row-media { height: 330px; overflow: clip; }
.capabilities__row-media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   11. Sectors
   -------------------------------------------------------------------------- */
.sectors {
  background-color: var(--color-corp-panel);
  padding-block: 120px;
  padding-inline: var(--page-gutter);
}

.sectors__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.sectors__intro { display: flex; flex-direction: column; gap: var(--gap-intro); max-width: 720px; }

.sectors__label {
  position: relative;
  display: inline-flex;
  width: fit-content;
  color: var(--color-ink);
}
.sectors__label::before {
  content: "";
  position: absolute;
  inset: auto -8px 1px -8px;
  height: 11px;
  background-color: var(--color-accent);
  opacity: 0.4;
  z-index: -1;
}

.sectors__heading {
  font-family: var(--font-display);
  font-size: var(--text-section-head);
  line-height: var(--leading-section-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-width: 640px;
}

.sectors__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.sectors__card { display: flex; flex-direction: column; gap: var(--gap-card); }
.sectors__card-media { height: 340px; overflow: clip; }
.sectors__card-media img { width: 100%; height: 100%; object-fit: cover; }

.sectors__card-label {
  color: var(--color-corp-accent-cta);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.sectors__card-title {
  font-family: var(--font-display);
  font-size: var(--text-item-head);
  line-height: var(--leading-item-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.sectors__card-body { color: var(--color-corp-muted); }

.sectors__banner {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  background-color: var(--color-ink);
  padding: 40px;
}

.sectors__banner-media { height: 220px; overflow: clip; }
.sectors__banner-media img { width: 100%; height: 100%; object-fit: cover; }

.sectors__banner-content { display: flex; flex-direction: column; gap: 14px; }
.sectors__banner-label {
  color: var(--color-corp-base);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.sectors__banner-title {
  font-family: var(--font-display);
  font-size: var(--text-item-head);
  line-height: var(--leading-item-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-corp-base);
}
.sectors__banner-body { color: var(--color-corp-base); }

/* --------------------------------------------------------------------------
   12. Values ("Why NANG U")
   -------------------------------------------------------------------------- */
.values {
  background-color: var(--color-ground);
  padding-block: 120px;
  padding-inline: var(--page-gutter);
}

.values__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.values__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 80px;
  align-items: start;
}

.values__intro { display: flex; flex-direction: column; gap: var(--gap-intro); }
.values__intro .eyebrow { color: var(--color-corp-muted); }

.values__heading {
  font-family: var(--font-display);
  font-size: var(--text-section-head);
  line-height: var(--leading-section-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-width: 640px;
}

.values__support { color: var(--color-corp-muted); padding-top: 44px; }

.values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.values__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
/* Each cell only carries padding on its two inner-facing edges — the grid's
   outer edges (against the section's intro block and side gutters) stay
   flush, matching Paper exactly rather than an even padding on all four. */
.values__item:nth-child(1) { padding: 0 40px 48px 0; border-right: 1px solid var(--color-corp-rule); border-bottom: 1px solid var(--color-corp-rule); }
.values__item:nth-child(2) { padding: 0 0 48px 40px; border-bottom: 1px solid var(--color-corp-rule); }
.values__item:nth-child(3) { padding: 48px 40px 0 0; border-right: 1px solid var(--color-corp-rule); }
.values__item:nth-child(4) { padding: 48px 0 0 40px; }

.values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background-color: var(--color-ink);
  flex-shrink: 0;
}
.values__icon svg { width: 30px; height: 30px; }

.values__item-label {
  color: var(--color-corp-accent-cta);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.values__item-title {
  font-family: var(--font-display);
  font-size: var(--text-item-head);
  line-height: var(--leading-item-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.values__item-body { color: var(--color-corp-muted); }

/* --------------------------------------------------------------------------
   13. Statement ("Listening")
   -------------------------------------------------------------------------- */
.statement {
  position: relative;
  background-color: var(--color-ink);
  overflow: clip;
  padding-block: 160px;
  padding-inline: var(--page-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.statement__media {
  position: absolute;
  inset: 0;
}
.statement__media img { width: 100%; height: 100%; object-fit: cover; }
.statement__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-ink);
  opacity: 0.88;
}

.statement__quote {
  position: relative;
  max-width: 820px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-manifesto);
  line-height: var(--leading-manifesto);
  font-style: italic;
  letter-spacing: var(--tracking-tight);
  color: var(--color-corp-base);
}

.statement__list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.statement__list li {
  font-family: var(--font-display);
  font-size: var(--text-item-head);
  line-height: var(--leading-item-head);
  letter-spacing: var(--tracking-tight);
  text-align: center;
  color: var(--color-corp-base);
}

/* --------------------------------------------------------------------------
   14. Journey
   -------------------------------------------------------------------------- */
.journey {
  background-color: var(--color-ground);
  padding-block: 120px;
  padding-inline: var(--page-gutter);
}

.journey__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
  align-items: start;
}

.journey__content { display: flex; flex-direction: column; gap: var(--gap-intro); }
.journey__content .eyebrow { color: var(--color-corp-muted); }

.journey__heading {
  font-family: var(--font-display);
  font-size: var(--text-section-head);
  line-height: var(--leading-section-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.journey__body { color: var(--color-corp-muted); }
.journey__body:first-of-type { padding-top: var(--space-xs); }

.journey__visual { position: relative; }

.journey__numeral {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-journey-numeral);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.journey__photo {
  width: 320px;
  height: 380px;
  margin-left: 140px;
  margin-top: -28px;
  box-shadow: 0 20px 40px var(--color-shadow-ink);
  overflow: clip;
}
.journey__photo img { width: 100%; height: 100%; object-fit: cover; }

.journey__timeline { margin-top: 56px; display: flex; flex-direction: column; gap: var(--space-sm); }

.journey__timeline-track {
  display: flex;
  align-items: center;
}
.journey__timeline-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background-color: var(--color-corp-accent-cta);
}
.journey__timeline-line {
  flex: 1 0 0;
  height: 1px;
  background-color: var(--color-corp-rule);
}

.journey__timeline-labels {
  display: flex;
  justify-content: space-between;
}
.journey__timeline-labels span {
  color: var(--color-corp-muted);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   15. Philosophy ("Crafted with Purpose")
   -------------------------------------------------------------------------- */
.philosophy {
  background-color: var(--color-corp-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding-block: 160px;
  padding-inline: var(--page-gutter);
}

.philosophy__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-intro);
  max-width: 820px;
  text-align: center;
}
.philosophy__intro .eyebrow { color: var(--color-corp-muted); }

.philosophy__manifesto {
  font-family: var(--font-display);
  font-size: var(--text-manifesto);
  line-height: var(--leading-manifesto);
  font-style: italic;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.philosophy__columns {
  display: grid;
  grid-template-columns: 340px 1px 400px;
  gap: 64px;
  justify-content: center;
}

.philosophy__divider { background-color: var(--color-corp-rule); }

.philosophy__column { display: flex; flex-direction: column; gap: var(--gap-card); }
.philosophy__column-label {
  color: var(--color-corp-accent-cta);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.philosophy__column-list { display: flex; flex-direction: column; gap: var(--gap-card); }
.philosophy__column-list li {
  font-family: var(--font-display);
  font-size: var(--text-item-head);
  line-height: var(--leading-item-head);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.philosophy__closing {
  max-width: 680px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-statement);
  line-height: var(--leading-statement);
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--color-corp-muted);
}

/* --------------------------------------------------------------------------
   16. Workshop carousel
   -------------------------------------------------------------------------- */
.workshop {
  --workshop-card-w: 420px;
  --workshop-card-h: 480px;
  background-color: var(--color-ground);
  padding-block: 120px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.workshop__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 80px;
  align-items: end;
  padding-inline: var(--page-gutter);
}

.workshop__intro { display: flex; flex-direction: column; gap: var(--space-md); max-width: 700px; }
.workshop__intro .eyebrow { color: var(--color-corp-muted); }

.workshop__heading {
  font-family: var(--font-display);
  font-size: var(--text-section-head);
  line-height: var(--leading-section-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.workshop__support { color: var(--color-corp-muted); }

.workshop__carousel {
  padding-left: var(--page-gutter);
}

.workshop__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--workshop-card-w);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.workshop__track::-webkit-scrollbar { display: none; }

.workshop__slide {
  scroll-snap-align: start;
  height: var(--workshop-card-h);
  overflow: clip;
}
.workshop__slide img { width: 100%; height: 100%; object-fit: cover; }

.workshop__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
}

.workshop__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-corp-rule);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.workshop__dot:hover { background-color: var(--color-corp-accent); }
.workshop__dot[aria-selected="true"] {
  background-color: var(--color-corp-accent);
  transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   17. Final CTA + footer
   -------------------------------------------------------------------------- */
.cta {
  background-color: var(--color-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  padding-block: 140px;
  padding-inline: var(--page-gutter);
}

.cta__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 80px;
  align-items: start;
}

.cta__pitch { display: flex; flex-direction: column; gap: var(--gap-intro); padding-top: var(--space-lg); }
.cta__pitch .eyebrow { color: var(--color-corp-base); }

.cta__heading {
  font-family: var(--font-display);
  font-size: var(--text-section-head);
  line-height: var(--leading-section-head);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-corp-base);
}

.cta__body { color: var(--color-corp-base); padding-top: var(--space-2xs); }

.cta__contact-list {
  display: flex;
  gap: var(--space-xl);
  margin-top: 40px;
}

.cta__contact-item { display: flex; flex-direction: column; gap: var(--space-xs); }
.cta__contact-item dt {
  color: var(--color-muted-on-ink);
  font-size: var(--text-2xs);
  line-height: var(--leading-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.cta__contact-item dd a {
  display: inline-block;
  color: var(--color-corp-base);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-position: from-font;
}
.cta__contact-item dd a:hover { color: var(--color-corp-panel); }

.cta__form {
  background-color: var(--color-corp-base);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 48px rgb(21 25 49 / 28%);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cta__form-heading {
  font-family: var(--font-display);
  font-size: var(--text-form-head);
  line-height: var(--leading-form-head);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.cta__form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-card);
}

.cta__field { display: flex; flex-direction: column; gap: 6px; }
.cta__field label {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.cta__field input,
.cta__field select,
.cta__field textarea {
  background-color: var(--color-corp-panel);
  border: 1px solid var(--color-corp-rule);
  border-radius: var(--radius-sm);
  padding-inline: 14px;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-ink);
}
.cta__field input,
.cta__field select { height: 44px; }
.cta__field textarea { height: 100px; padding-block: 12px; resize: vertical; }
.cta__field input::placeholder,
.cta__field textarea::placeholder { color: var(--color-corp-muted); }
.cta__field input:focus,
.cta__field select:focus,
.cta__field textarea:focus {
  outline: none;
  border-color: var(--color-corp-accent);
}
.cta__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6B80' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 34px;
}

.cta__field[data-invalid] input,
.cta__field[data-invalid] select,
.cta__field[data-invalid] textarea { border-color: #B4483F; }

.cta__form-status {
  min-height: 20px;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-corp-accent-cta);
}
.cta__form-status[data-state="success"] { color: #3D6E4E; }
.cta__form-status[data-state="error"] { color: #B4483F; }

.cta__divider {
  border: none;
  border-top: 1px solid var(--color-divider-on-ink);
  width: 120px;
  margin: 0;
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.site-footer__mark-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.site-footer__mark { width: 48px; height: 47px; filter: brightness(0%) invert(100%); }
.site-footer__tagline {
  color: var(--color-corp-base);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.site-footer__credit {
  margin-top: var(--space-xs);
  color: var(--color-corp-base);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   18. Responsive safety net
   (Full bespoke 390px design is a separate pending Paper artboard — see
   brain/roadmap.md "Mobile artboard - 390 landing page". This is a
   reasonable fluid fallback so the desktop build doesn't break below 1440,
   not a substitute for that dedicated design.)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --page-gutter: var(--space-xl); }
  .hero__heading { font-size: clamp(44px, 7vw, 88px); line-height: 1.05; }
}

@media (max-width: 960px) {
  :root { --page-gutter: var(--space-lg); }

  .site-header__inner { grid-template-columns: auto auto; }
  .site-header__nav { display: none; }

  .hero__row,
  .approach,
  .partnership__grid,
  .capabilities__header,
  .capabilities__row,
  .values__header,
  .values__grid,
  .sectors__banner,
  .journey__inner,
  .workshop__header,
  .cta__inner { grid-template-columns: 1fr; }

  .partnership__points { grid-template-columns: 1fr; gap: var(--space-lg); }
  .partnership__point + .partnership__point { border-left: none; padding-left: 0; border-top: 1px solid var(--color-divider-on-ink); padding-top: var(--space-lg); }

  .sectors__grid { grid-template-columns: repeat(2, 1fr); }

  .values__item:nth-child(1),
  .values__item:nth-child(3) { border-right: none; }
  .values__item:nth-child(3) { border-bottom: 1px solid var(--color-corp-rule); }
  .values__item { padding-inline: 0; }

  .philosophy__columns { grid-template-columns: 1fr; }
  .philosophy__divider { display: none; }

  .cta__form { max-width: 100%; }
  .cta__form-row { grid-template-columns: 1fr; }

  .journey__photo { margin-left: 0; }
}

@media (max-width: 600px) {
  .hero-image__img { height: 320px; }
  .sectors__grid { grid-template-columns: 1fr; }
  .cta__contact-list { flex-direction: column; gap: var(--space-md); }
}