/* ==========================================================================
   Nerchure — site styles

   The design system keeps its component styling inside React components
   (components/core/Button.jsx, Badge.jsx, Card.jsx, forms/Input.jsx,
   forms/Select.jsx), not in a stylesheet. Those styles are ported here as
   plain classes. Values are copied from the components verbatim; where this
   file departs from them, the reason is stated in a comment.

   Layout values come from the handoff spec and the signed-off prototype.
   ========================================================================== */

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

/* The hidden attribute is only display:none in the UA stylesheet, so any
   author rule that sets display beats it and the element stays visible. This
   makes hidden actually hide. Kept as a standing safeguard. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* The prototype set font-family:var(--font-body), which no token file
     defines. --font-sans (Public Sans) is the intended body face. */
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--text-brand);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--text-primary); }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Horizontal gutter. The design is drawn at 64px; it steps down rather than
   letting content run to the edge on narrow viewports. */
:root {
  --gutter: 64px;
  --rail: 1000px;
}

/* One centred content rail, shared by every full-bleed band. The inline padding
   absorbs whatever space is left once the rail is placed, so backgrounds and
   border rules still span the window while their contents line up with the body
   column. Done with padding rather than a wrapper element so the markup — which
   is duplicated across five hand-written pages — stays flat.
   Every rule below therefore sets padding-block only; a padding shorthand here
   would silently reset the inline padding and break the alignment. */
.nav,
.hero,
.steps,
.featured,
.page,
.footer {
  padding-inline: max(var(--gutter), (100% - var(--rail)) / 2);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: 600;
}
.skip-link:focus { left: var(--gutter); top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- nav ----------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-page);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 24px; width: auto; display: block; }

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

.nav__link {
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.nav__link:hover { color: var(--text-brand); }
/* Active page. aria-current carries the state for assistive tech and styling
   at once, so no separate class is needed. */
.nav__link[aria-current="page"] { color: var(--text-brand); }

/* --- buttons (from components/core/Button.jsx) --------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 9px 16px;
  font-size: var(--text-body-md);
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}

.btn--lg { padding: 12px 20px; font-size: var(--text-body-lg); }

.btn--primary {
  background: var(--action-primary);
  color: var(--text-on-brand);
}
.btn--primary:hover {
  background: var(--action-primary-hover);
  color: var(--text-on-brand);
}

.btn--secondary {
  background: transparent;
  color: var(--text-brand);
  border-color: var(--border-default);
}
.btn--secondary:hover {
  color: var(--text-brand);
  background: var(--bg-brand-subtle);
}

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* --- badge (from components/core/Badge.jsx) ------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 600;
  font-family: var(--font-ui);
  line-height: 1.4;
  white-space: nowrap;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}
.badge--brand {
  background: var(--bg-brand-subtle);
  color: var(--text-brand);
}

/* --- card (from components/core/Card.jsx) -------------------------------- */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* --- venture card -------------------------------------------------------- */

.venture { max-width: 400px; }

.venture__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: 10px;
}
.venture__name {
  font-family: var(--font-sans);
  font-size: var(--text-title-md);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
  margin: 0;
}
.venture__sector {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: 6px;
}
.venture__desc {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin: 0;
}

/* --- page scaffolding ---------------------------------------------------- */

.page { padding-block: 72px 96px; }
/* Prose pages keep the shared rail on the band itself and cap only the text
   column inside it, left-aligned. Putting max-width on .page instead collapses
   it: percentage padding resolves against the containing block, not the
   element, so the rail padding (392px a side at 1785px) exceeded the 720px cap
   and squeezed the content to zero width. */
.page--narrow > * { max-width: 720px; }

.page__title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 12px;
  max-width: 700px;
}
.page__intro {
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 0 40px;
}

/* --- home: hero ---------------------------------------------------------- */

.hero {
  padding-block: 96px 72px;
}
.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: 20px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 24px;
  color: var(--text-primary);
}
.hero__lede {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 0 36px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --- home: three steps --------------------------------------------------- */

.steps {
  padding-block: 0 80px;
}
/* An <ol>, because the stages are a sequence. In a 2x2 arrangement nothing
   otherwise tells a reader whether to go across the row or down the column, so
   the number carries the order visually and the list element carries it for
   assistive tech. */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
/* The stage number as a watermark: large italic Newsreader, faded, sitting
   behind the text so it signals order without competing with it. On .step
   rather than .step__title so it positions against the whole cell.
   The title and body are given position:relative rather than the numeral a
   negative z-index — positioned siblings paint in DOM order, so the text lands
   on top without .step needing to own a stacking context. */
.step {
  counter-increment: step;
  position: relative;
}
.step::before {
  content: counter(step);
  position: absolute;
  top: -0.34em;
  left: -0.03em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-lg);
  line-height: 1;
  color: var(--text-brand);
  /* Sized and lifted so the glyph clears the body copy beneath. It has to:
     --text-secondary on --bg-page is only 4.78:1, so tinting the background
     behind it drops body text under the 4.5:1 AA floor. Behind the title,
     which is --text-primary at roughly 15:1, the tint costs nothing. */
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}
.step__title,
.step__body { position: relative; }

/* Approach carries a paragraph per stage rather than a clause, which needs a
   wider column than a quarter of the rail. */
.steps__grid--pairs { grid-template-columns: repeat(2, 1fr); }
.step__title {
  font-family: var(--font-sans);
  font-size: var(--text-title-md);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
  margin: 0 0 8px;
}
.step__body {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin: 0;
}

/* --- home: featured venture ---------------------------------------------- */

.featured {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding-block: 72px;
}
.featured__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: 28px;
}
/* Spacing below this lives on .featured__head, the flex row that pairs it with
   the "View portfolio" link. Used outside that wrapper it has no gap at all —
   reach for .approach__heading instead, which carries its own. */
.featured__title {
  font-family: var(--font-sans);
  font-size: var(--text-title-lg);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
  margin: 0;
}
.featured__link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
}

/* --- portfolio ----------------------------------------------------------- */


/* --- approach ------------------------------------------------------------ */

.approach__title { margin-bottom: 24px; }
.approach__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-sm);
  font-weight: 400;
  /* Departure: the system pairs display sizes with --lh-display (1.08). That
     is drawn for single-line headlines; this quote runs to three lines, where
     1.08 collides. --lh-title is the nearest step that stays legible. */
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-display);
  color: var(--text-brand);
  margin: 0 0 32px;
}
.approach__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-primary);
}
.approach__body p { margin: 0; }

.approach__heading {
  font-family: var(--font-sans);
  font-size: var(--text-title-lg);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
  margin: 0 0 24px;
}


.page__intro a {
  color: var(--text-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.page__intro a:hover { border-bottom-color: var(--action-primary); }

/* --- portfolio stage groups ---------------------------------------------- */

/* Stage rail: label in a left column, contents on the right, so a stage with
   nothing in it costs one line rather than a whole section. With one venture
   and four stages that difference is most of the page. */
.stage-group {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-8);
}
.stage-group__title {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
  /* Nudged to sit on the first baseline of the body column beside it. */
  margin: 0;
  padding-top: 4px;
}
.stage-group__body { min-width: 0; }
.stage-group__empty {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* --- contact ------------------------------------------------------------- */

.contact__intro {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  margin: 0 0 32px;
}
.contact__email {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.contact__email a {
  color: var(--text-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.contact__email a:hover { border-bottom-color: var(--action-primary); }
/* Same size as the address it sits beside — the rank difference is carried by
   --text-secondary, not by a 1px step, which only reads as a mistake. */
.contact__note {
  margin: 0;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
/* First block sits under the intro's own 32px gap; only later blocks need
   separating from the one above. */
.contact__block + .contact__block { margin-top: 56px; }
.contact__label {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
  margin: 0 0 12px;
}
.contact__address {
  margin: 0;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.featured__invite {
  margin: var(--space-6) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 640px;
}
.featured__invite a {
  color: var(--text-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}
.featured__invite a:hover { border-bottom-color: var(--action-primary); }

/* --- footer -------------------------------------------------------------- */

.footer {
  padding-block: 40px;
  border-top: 1px solid var(--border-subtle);
}
.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
/* Sized from the letterforms, not the file. wordmark.svg's viewBox is 34%
   empty padding and also carries the baseline rule, so the letters occupy only
   32.84/68 = 48.3% of its height. 20px therefore renders them at 9.7px, which
   matches the 9.8px ink height of the 13px copyright beside it. Setting 16px
   here made the letters 7.7px — visibly smaller than the text. */
.footer__wordmark { height: 20px; width: auto; opacity: 0.7; display: block; }
.footer__copyright {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* Companies (Names and Trading Disclosures) Regulations 2015, reg 25(2):
   place of registration, registered number and registered office must be
   disclosed on the company's website. Kept quiet, but present on every page. */
/* Deliberately uncapped. A measure cap exists to stop unbounded prose reaching
   an unreadable width; this string is bounded by its own content at ~830px and
   can never grow wider, so a cap could only ever force a wrap. The 60-70
   character guidance in the design system governs continuous prose, not
   single-line reference metadata like this. */
.footer__legal {
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* --- responsive ----------------------------------------------------------
   The handoff specifies no breakpoints; the design is drawn at a fixed width
   throughout. These steps keep it usable below that without altering the
   desktop composition. */

/* The rail stops engaging around 1128px; the grid needs to step down before
   a quarter-column gets too narrow for its text. */
@media (max-width: 1128px) {
  .steps__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --gutter: 32px; }

  .hero { padding-top: 72px; }
  .hero__title { font-size: var(--text-display-md); }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }

  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .nav__links {
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  .hero { padding-top: 56px; padding-bottom: 56px; }
  .hero__title { font-size: var(--text-display-sm); }
  .hero__lede { font-size: var(--text-body-md); }
  .hero__actions { gap: var(--space-2); }
  .hero__actions .btn { flex: 1 1 auto; }

  .page { padding-top: 56px; padding-bottom: 72px; }
  .page__title { font-size: var(--text-display-sm); }
  .featured { padding-top: 56px; padding-bottom: 56px; }
  .approach__quote { font-size: var(--text-title-lg); }

  .steps__grid,
  .steps__grid--pairs {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .stage-group {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .stage-group__title { padding-top: 0; }

  .footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}