/* ==========================================================================
   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;
  --color-rule: #D8CEBE;

  /* 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; }

html, body {
  /* Safety net: below ~360px a handful of sections' fractional grid/flex
     math (gap + padding-inline dividing unevenly across 1fr tracks)
     compounds into a few sub-pixel-per-section rounding overflows that no
     single element visibly exceeds its own box for — nothing to visually
     "fix" per element, just the accumulated total nudging the page a few
     pixels past 100vw. Standard, intentional safety net, not a patch over
     a visible break. */
  overflow-x: hidden;
  max-width: 100%;
}

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);
  /* Inherited by every piece of text on the page. Large display type
     (section headings, the manifesto-style statements) can have a single
     word wider than its column on a narrow phone ("requirement?" at 58px
     in a ~256px column, for one) — words don't break mid-word by default,
     so that word was rendering past its box and, combined with the
     overflow-x:hidden safety net above, being silently clipped off-screen
     rather than wrapping. This only ever engages for that specific
     word-too-wide case; everywhere else text already wraps normally and
     this changes nothing. */
  overflow-wrap: break-word;
  -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-ink);
  color: var(--color-corp-base);
  padding: var(--space-md);
}
.button--form:hover { background-color: var(--color-ink-deep); }
.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);
  text-transform: uppercase;
  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); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Hamburger toggle — hidden entirely above the 960px breakpoint where the
   full inline nav is shown instead. */
.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.site-header__menu-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-corp-base);
  border-radius: 1px;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-bar:nth-child(2) { opacity: 0; }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer — hidden entirely above 960px; below it, toggled open
   by the hamburger via [data-open]. A height-animated panel rather than a
   simple show/hide so the open/close reads as a deliberate motion, not a
   jump cut — matches the rest of the site's calm, no-bounce register. */
.site-header__mobile-nav { display: none; }

@media (max-width: 960px) {
  .site-header__menu-toggle { display: flex; }

  .site-header__mobile-nav {
    display: block;
    max-height: 0;
    overflow: hidden;
    background-color: var(--color-ink);
    border-top: 0px solid var(--color-divider-on-ink);
    transition: max-height var(--duration-fast) var(--ease-out);
  }
  .site-header__mobile-nav[data-open="true"] {
    max-height: 360px;
    /* The header is sticky, so a drawer taller than a short (landscape phone)
       screen would have its last links stuck below the fold with no way to
       reach them. Cap it to the space under the header and let it scroll. */
    max-height: min(360px, calc(100dvh - 128px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top-width: 1px;
  }

  .site-header__mobile-nav-list {
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--page-gutter) var(--space-xl);
    gap: var(--space-sm);
  }
  .site-header__mobile-nav-list a {
    display: block;
    padding-block: var(--space-xs);
    color: var(--color-corp-base);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
  }
  .site-header__mobile-nav-cta {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    padding: 12px 20px !important;
    width: fit-content;
    border-radius: var(--radius-sm);
    background-color: var(--color-corp-base);
    color: var(--color-ink) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__mobile-nav { transition: none; }
  }
}

@media (max-width: 600px) {
  .site-header__logo-mark { width: 56px; height: 55px; }
  .site-header__actions .button--nav { display: none; }
}

/* --------------------------------------------------------------------------
   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);
  /* `hidden`, not `clip` — at very narrow viewports `clip` was letting a
     sliver of the track's full (much wider than any viewport, by design)
     scrollable width leak into the page's own scrollWidth, which doesn't
     show as any single element visually breaking its bounds but does
     turn on real page-level horizontal scroll. `hidden` contains it
     completely, which is all this needs since the track never needs to
     be scrolled by the visitor. */
  overflow: hidden;
}

.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: 250px; overflow: clip; }
.sectors__card-media img { width: 100%; height: 100%; object-fit: cover; }

.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;
  width: 100%;
  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);
  /* clamp(), not the flat 200px token — at its full desktop size "2019"
     alone runs wider than any phone viewport and was pushing the whole
     page into horizontal scroll. Scales down smoothly below ~768px;
     unchanged (sits at the 200px max) at tablet-landscape and up. */
  font-size: clamp(90px, 26vw, var(--text-journey-numeral));
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-rule);
}

.journey__photo {
  width: 320px;
  max-width: 100%;
  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 {
  width: 100%;
  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 {
  width: 100%;
  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;
  /* No scroll-snap: both `mandatory` and `proximity` intercept every
     programmatic scrollTo (autoplay, dot clicks) and pull it toward the
     nearest slide boundary — which also can't reach the trailing slides at
     all, since their boundary sits past the track's real scrollable max.
     Free scrolling lets autoplay/dots and drag all land exactly where
     they're told to; js/main.js owns the "settle on a slide" feel instead. */
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.workshop__track::-webkit-scrollbar { display: none; }
.workshop__track--dragging { cursor: grabbing; }

.workshop__slide {
  height: var(--workshop-card-h);
  overflow: clip;
}
.workshop__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none; /* clicks/drags pass straight through to the track */
}

.workshop__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

/* The button is a 24px tap target (WCAG 2.5.8 minimum); the visible dot is
   still 8px, drawn by ::before, so the look is unchanged. */
.workshop__dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.workshop__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-corp-rule);
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.workshop__dot:hover::before { background-color: var(--color-corp-accent); }
.workshop__dot[aria-selected="true"]::before {
  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;
  padding-block: 3px; /* lifts the tap target past the 24px minimum */
  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__divider {
  border: none;
  border-top: 1px solid var(--color-divider-on-ink);
  width: 120px;
  margin: 0;
}

.site-footer__credit {
  /* Pulls tight against its own divider above (72px flex gap - 52px = a
     close ~20px pairing), so the credit line reads as its own small
     sub-footer tier rather than floating the same distance as everything
     else in the column. */
  margin-top: -52px;
  color: var(--color-corp-base);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   18. Floating WhatsApp button
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 60;
  display: flex;
  width: 60px;
  height: 60px;
  transition: transform var(--duration-fast) var(--ease-out);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.06);
}
.whatsapp-float__glyph { width: 100%; height: 100%; }

@media (max-width: 600px) {
  .whatsapp-float { right: 20px; bottom: 20px; width: 52px; height: 52px; }
}

/* --------------------------------------------------------------------------
   19. 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; justify-content: space-between; }
  .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; }

  /* Grid (and flex) items default to min-width: auto, which lets their
     content's own natural unwrapped width win over the column's actual
     available space — every one of the sections just collapsed to a
     single column above was overflowing the viewport at phone widths
     because of exactly this, text refusing to wrap down to fit. */
  .hero__row > *,
  .approach > *,
  .partnership__grid > *,
  .capabilities__header > *,
  .capabilities__row > *,
  .values__header > *,
  .sectors__banner > *,
  .journey__inner > *,
  .workshop__header > *,
  .cta__inner > * { min-width: 0; }

  .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); }

  /* The desktop 2x2 grid's nth-child rules set padding via the `padding`
     shorthand (all 4 sides at once, including the 40px left/right that
     separates the two desktop columns) — a plain `.values__item { ... }`
     override further down could never win against that: an :nth-child
     selector is more specific than a bare class, shorthand or not, so the
     40px inset on items 2 and 4 was silently surviving every "fix" that
     didn't also use :nth-child. That's what was misaligning every other
     item from the one above/below it. Single column now, so no side
     pairing exists to inset for in the first place — just top/bottom
     spacing, matched to the dividers below. */
  .values__item:nth-child(1),
  .values__item:nth-child(2),
  .values__item:nth-child(3),
  .values__item:nth-child(4) { padding-inline: 0; }
  .values__item:nth-child(1) { padding-block: 0 32px; }
  .values__item:nth-child(2) { padding-block: 32px; }
  .values__item:nth-child(3) { padding-block: 32px; }
  .values__item:nth-child(4) { padding-block: 32px 0; }

  .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); }

  .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; }

  /* The carousel's 420px card width was wider than every phone/small-
     tablet viewport tested, which doesn't break anything structurally
     (the track scrolls fine either way) but does lose the "peek of the
     next card" affordance that signals it's a carousel at all — each
     screen just showed one image cropped at the edge. */
  .workshop { --workshop-card-w: 300px; --workshop-card-h: 340px; }

  /* Every section's vertical rhythm (padding-block, the gap between a
     header and its content below) was still the full desktop scale -
     values tuned for a 1440 canvas where 120-160px of breathing room
     reads as calm, generous pacing. On a phone, where one section's own
     padding can be a third of the visible screen, the exact same numbers
     just read as empty dead space between a heading and its own body
     copy. Roughly halves the biggest gaps; the 600px tier below tightens
     once more on top of this for phones specifically. */
  .approach { padding-block: 64px 80px; gap: 40px; }
  .partnership { padding-block: 64px; }
  .partnership__grid { gap: 48px; }
  .partnership__body { padding-top: 24px; }
  .partnership__points { padding-top: 32px; }
  .capabilities { padding-block: 64px; }
  .capabilities__inner { gap: 40px; }
  .capabilities__header { gap: 48px; }
  .capabilities__support { padding-top: 24px; }
  .capabilities__row { padding-block: 32px; gap: 32px; }
  .sectors { padding-block: 64px; }
  .sectors__inner { gap: 32px; }
  .values { padding-block: 64px; }
  .values__inner { gap: 48px; }
  .values__header { gap: 48px; }
  .values__support { padding-top: 24px; }
  .statement { padding-block: 88px; gap: 32px; }
  .journey { padding-block: 64px; }
  .journey__inner { gap: 48px; }
  .journey__timeline { margin-top: 32px; }
  .philosophy { padding-block: 88px; gap: 40px; }
  .workshop { padding-block: 64px; gap: 40px; }
  .workshop__header { gap: 48px; }
  .cta { padding-block: 72px; gap: 48px; }
  .cta__inner { gap: 48px; }
  .cta__pitch { padding-top: 0; }
  .cta__contact-list { margin-top: 24px; }
}

@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); }
  /* "manufacturing" is the longest word in both of these. At full size it is
     wider than a phone's text column, so overflow-wrap split it mid-word
     ("manufactur / ing"). Scale each down with the viewport, just enough for
     that word to fit (word width ≈ 6.0x / 5.7x the font size; 64px = the two
     32px gutters), never above the design size. */
  .partnership__heading {
    font-size: min(var(--text-partnership-head), calc((100vw - 64px) / 6.2));
    line-height: 1.1;
  }
  .statement__quote {
    font-size: min(var(--text-manifesto), calc((100vw - 64px) / 5.9));
    line-height: 1.15;
  }
  .journey__photo { height: 280px; }
  .workshop { --workshop-card-w: 260px; --workshop-card-h: 300px; }

  /* Phone tier: tighten once more on top of the ≤960px reduction above. */
  .hero { padding-top: 40px; }
  .approach { padding-block: 48px 56px; gap: 32px; }
  .partnership { padding-block: 48px; }
  .capabilities { padding-block: 48px; }
  .capabilities__inner { gap: 32px; }
  .capabilities__row { padding-block: 24px; }
  .sectors { padding-block: 48px; }
  .values { padding-block: 48px; }
  .values__inner { gap: 32px; }
  .statement { padding-block: 64px; }
  .journey { padding-block: 48px; }
  .philosophy { padding-block: 64px; }
  .workshop { padding-block: 48px; }
  .cta { padding-block: 56px; gap: 40px; }

  /* Every section headline uses this one tier. At its full 58px it's the
     single biggest source of narrow-phone word-wrap strain (the
     overflow-wrap: break-word rule above is the safety net; this is the
     actual fix so it rarely has to engage) — scaling it down keeps section
     headings proportionate to a phone column instead of just technically
     fitting. */
  :root {
    --text-section-head: 38px;
    --leading-section-head: 44px;
  }
}