/* ─────────────────────────────────────────────────────────────────
   Silverstone Technology Group — site.css
   Shared design system for all six pages.
───────────────────────────────────────────────────────────────── */

:root {
  /* Color */
  --navy: #002C5F;
  --grey: #8C92AC;
  --steel: #B0C4DE;
  --ink: #1A1A1F;
  --ink-soft: #3D3D45;
  --page: #F7F4EE;
  --rule: rgba(140, 146, 172, 0.28);

  /* Type stacks (overridden by Tweaks) */
  --display-stack: "Source Serif 4", "Newsreader", Georgia, serif;
  --body-stack:    "Source Serif 4", "Newsreader", Georgia, serif;
  --util-stack:    "IBM Plex Sans", "Inter Tight", system-ui, sans-serif;

  /* Display tuning per family */
  --display-tracking: -0.022em;
  --display-weight: 400;
  --display-leading: 1.04;
  --display-opsz: 60;

  /* Rhythm */
  --measure: 64ch;
  --rail-w: 200px;
  --gutter: 56px;
  --page-x: clamp(24px, 5vw, 80px);

  /* Type scale */
  --t-hero:    clamp(48px, 7.4vw, 116px);
  --t-closing: clamp(28px, 3.6vw, 52px);
  --t-h2:      clamp(26px, 2.6vw, 36px);
  --t-h3:      clamp(20px, 1.7vw, 24px);
  --t-h4:      clamp(17px, 1.25vw, 19px);
  --t-body:    clamp(17px, 1.18vw, 19px);
  --t-util:    11.5px;
  --t-nav:     13px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--body-stack);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.15em 0; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
em, i { font-style: italic; }
strong, b { font-weight: 600; color: var(--ink); }

/* ── Utility marks ────────────────────────────────────────────── */
.util {
  font-family: var(--util-stack);
  font-size: var(--t-util);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--grey);
  font-feature-settings: "ss01" 1;
}

.sr-only {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--page-x) 0;
  gap: 32px;
}
.site-header .mark { display: flex; align-items: center; }
.site-header .mark img { height: 60px; width: auto; display: block; }
.site-nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
  font-family: var(--util-stack);
  font-size: var(--t-nav);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.site-nav a {
  position: relative;
  padding: 6px 0;
  transition: color 120ms linear;
}
.site-nav a[aria-current="page"] { color: var(--navy); }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--navy);
}
.site-nav a:hover { color: var(--navy); }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  padding: clamp(72px, 12vh, 140px) var(--page-x) clamp(48px, 8vh, 96px);
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.hero .eyebrow {
  margin-bottom: clamp(40px, 6vh, 72px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero .eyebrow .tick {
  width: 28px;
  height: 1px;
  background: var(--navy);
}
.hero h1 {
  font-family: var(--display-stack);
  font-weight: var(--display-weight);
  font-size: var(--t-hero);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  color: var(--navy);
  font-variation-settings: "opsz" var(--display-opsz);
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}
.hero h1 .s { display: block; }
.hero h1 .s + .s { margin-top: 0.42em; }
/* Stacked vs flowing hero variants */
body[data-hero="flowing"] .hero h1 .s { display: inline; }
body[data-hero="flowing"] .hero h1 .s + .s { margin-top: 0; }
body[data-hero="flowing"] .hero h1 .s + .s::before { content: " "; }

/* ── Indexed section layout ───────────────────────────────────── */
.indexed {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, var(--measure));
  column-gap: var(--gutter);
  padding: clamp(40px, 6vw, 80px) var(--page-x);
  align-items: start;
}
.indexed > .rail {
  position: sticky;
  top: 32px;
  align-self: start;
  padding-top: 0.55em;
}
.indexed > .rail .num {
  color: var(--navy);
  font-family: var(--util-stack);
  font-size: var(--t-util);
  letter-spacing: 0.14em;
  font-weight: 500;
  margin-bottom: 8px;
}
.indexed > .rail .lbl {
  color: var(--grey);
  font-family: var(--util-stack);
  font-size: var(--t-util);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.indexed > .body { max-width: var(--measure); }
.indexed > .body h2 {
  font-family: var(--display-stack);
  font-weight: var(--display-weight);
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0 0 0.7em 0;
  font-variation-settings: "opsz" 36;
  max-width: 24ch;
  text-wrap: balance;
}

/* Sub-section heading (h3 inside indexed body — used for stages /
   parallel offerings on the pillar pages). Same display face,
   smaller, slightly muted color so it sits within the prose flow
   rather than acting as a standalone title.
*/
.indexed > .body h3.sub {
  font-family: var(--display-stack);
  font-weight: var(--display-weight);
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--navy);
  font-variation-settings: "opsz" 28;
  margin: 1.9em 0 0.55em 0;
  max-width: 26ch;
}
.indexed > .body h3.sub:first-child { margin-top: 0; }

/* ── "Disclaimer" sections (About / Field & Civil) ──────────────
   The "What we say no to" / "What we're not going to claim" sections.
   Same indexed layout, but the prose color shifts to the secondary
   palette. No border, no callout, no icon. The color does the
   structural work.
*/
.indexed.disclaimer > .body p { color: var(--grey); }
.indexed.disclaimer > .body h2 { color: var(--navy); }

/* ── M&A bold-led paragraphs (single page, single use) ──────────
   Sequential workstreams. The bold lead-in sits inline in the prose,
   not as a heading. Earned only here.
*/
.workstream { margin-top: 1.55em; }
.workstream .lead {
  font-family: var(--body-stack);
  font-weight: 600;
  color: var(--ink);
  font-style: normal;
}

/* ── Negation paragraph (How We Work) ───────────────────────────
   Tightly-set, three-beat negation. Restrained typographic care:
   slightly tighter leading + thin left indent equal to a single
   character measure. No quote marks. No callout.
*/
.negation {
  line-height: 1.5;
  padding-left: 1.2em;
  border-left: 1px solid transparent; /* maintains alignment without visible rule */
}

/* ── Inline emphasis blocks ─────────────────────────────────────
   The buyer-queue dialogue on Distribution Chain. Italic only;
   stays in the body flow.
*/
.dialogue { font-style: italic; }

/* ── Three pillars (home only) ──────────────────────────────────── */
.pillars {
  padding: clamp(56px, 8vw, 112px) var(--page-x);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pillars-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pillar {
  padding: clamp(6px, 1vw, 14px) clamp(20px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  color: inherit;
}
.pillar + .pillar { border-left: 1px solid var(--rule); }
.pillar:first-child { padding-left: 0; }
.pillar:last-child  { padding-right: 0; }
.pillar .pnum { display: block; margin-bottom: 28px; }
.pillar h3 {
  font-family: var(--display-stack);
  font-weight: var(--display-weight);
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--navy);
  margin: 0 0 0.85em 0;
  font-variation-settings: "opsz" 28;
  max-width: 16ch;
  transition: color 120ms linear;
}
.pillar p {
  color: var(--ink);
  font-size: calc(var(--t-body) * 0.96);
  line-height: 1.6;
  margin-bottom: 0;
}
.pillar .pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 1.6em;
  align-self: flex-start;
  font-family: var(--util-stack);
  font-size: var(--t-util);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
}
.pillar .pillar-link::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 140ms ease;
}
.pillar:hover .pillar-link::after { width: 32px; }
.pillar:hover h3 { color: #001b3a; }

/* ── Closing bookend ──────────────────────────────────────────── */
.closing {
  padding: clamp(96px, 14vh, 180px) var(--page-x) clamp(120px, 16vh, 200px);
}
.closing-inner { max-width: none; }
.closing .cap-rule {
  width: clamp(160px, 22vw, 280px);
  height: 1px;
  background: var(--grey);
  margin: 0 0 clamp(36px, 5vh, 56px) 0;
}
.closing p {
  font-family: var(--display-stack);
  font-weight: var(--display-weight);
  font-size: var(--t-closing);
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--navy);
  margin: 0;
  max-width: 38ch;
  text-wrap: balance;
  font-variation-settings: "opsz" 44;
}
.closing p + p { margin-top: 0.55em; color: var(--grey); }

/* Inline link inside prose */
.prose-link {
  color: var(--navy);
  border-bottom: 1px solid var(--grey);
  padding-bottom: 1px;
  transition: border-color 120ms linear, color 120ms linear;
}
.prose-link:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* Mini "next" link below prose blocks */
.mini-link {
  font-family: var(--util-stack);
  font-size: var(--t-util);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 1.6em;
}
.mini-link::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 140ms ease;
}
.mini-link:hover::after { width: 32px; }

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 40px var(--page-x) 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  column-gap: 40px;
  row-gap: 32px;
}
.site-footer .foot-mark {
  font-family: var(--util-stack);
  font-size: var(--t-util);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.site-footer .foot-nav {
  display: flex;
  gap: clamp(16px, 1.8vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--util-stack);
  font-size: var(--t-util);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
}
.site-footer .foot-nav a {
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.site-footer .foot-nav a[aria-current="page"] { color: var(--navy); }
.site-footer .foot-nav a:hover { color: var(--navy); }
.site-footer .foot-contact {
  text-align: right;
  font-family: var(--util-stack);
  font-size: var(--t-util);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  line-height: 1.7;
  font-weight: 400;
}
.site-footer .foot-contact a { color: var(--ink); }
.site-footer .foot-contact a:hover { color: var(--navy); }
.site-footer .foot-copy {
  grid-column: 1 / -1;
  font-family: var(--util-stack);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 400;
  margin-top: 12px;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
  :root {
    --rail-w: 0px;
    --gutter: 0px;
    --measure: 100%;
  }
  .indexed { grid-template-columns: 1fr; row-gap: 18px; padding-block: 48px; }
  .indexed > .rail { position: static; padding-top: 0; }
  .indexed > .rail .num { display: inline; margin-right: 12px; }
  .pillars-inner { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--rule); padding-top: 36px; margin-top: 36px; }
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child  { padding-right: 0; }
  .site-header .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--page);
    padding: calc(26px + 72px + 48px) var(--page-x) 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    z-index: 50;

    font-family: var(--display-stack);
    font-size: clamp(26px, 6vw, 40px);
    letter-spacing: -0.012em;
    color: var(--navy);
    line-height: 1.1;
    max-width: 100%;

    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .site-nav a {
    padding: 0;
    color: var(--navy);
    text-transform: none;
    font-weight: 400;
  }
  .site-nav a[aria-current="page"] { color: var(--grey); }
  .site-nav a[aria-current="page"]::after { display: none; }

  body.nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }

  /* Hamburger → X transition */
  body.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .site-footer {
    grid-template-columns: 1fr;
    row-gap: 28px;
    text-align: left;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .site-footer .foot-nav {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    font-size: 12px;
  }
  .site-footer .foot-nav a { padding: 2px 0; }
  .site-footer .foot-contact { text-align: left; }
  .site-footer .foot-copy { margin-top: 8px; }
}

/* ── Type direction variants (Tweaks) ─────────────────────────── */
body[data-type="A"] {
  --display-stack: "Source Serif 4", Georgia, serif;
  --body-stack:    "Source Serif 4", Georgia, serif;
  --display-weight: 400;
  --display-tracking: -0.022em;
  --display-leading: 1.04;
}
body[data-type="B"] {
  --display-stack: "Inter Tight", system-ui, sans-serif;
  --body-stack:    "Source Serif 4", Georgia, serif;
  --display-weight: 500;
  --display-tracking: -0.034em;
  --display-leading: 1.02;
}
body[data-type="C"] {
  --display-stack: "Newsreader", Georgia, serif;
  --body-stack:    "Newsreader", Georgia, serif;
  --display-weight: 400;
  --display-tracking: -0.016em;
  --display-leading: 1.06;
}

/* Page background variants */
body[data-paper="ivory"]  { --page: #F7F4EE; }
body[data-paper="cool"]   { --page: #F6F7F8; }
body[data-paper="paper"]  { --page: #F1EDE3; }

/* Steel variants — supporting color B0C4DE.
   The body grey (#8C92AC) sits too close to these to read on the
   disclaimer sections, so we shift the muted-text variable to a
   darker tone of the secondary palette and tighten the rule color. */
body[data-paper="steel"]  {
  --page: #B0C4DE;
  --grey: #4A5470;          /* darkened from #8C92AC for legibility */
  --rule: rgba(0, 44, 95, 0.22);
}
body[data-paper="mist"]   {
  --page: #DCE6F2;
  --grey: #5E6883;          /* darkened slightly less; wash is lighter */
  --rule: rgba(0, 44, 95, 0.18);
}

/* When Tweaks is active, give it room at the bottom-right */
body.tweaks-on .closing { padding-bottom: clamp(160px, 22vh, 260px); }


/* ── Nav toggle (hamburger) ──────────────────────────────────────
   Hidden by default; revealed below the mobile breakpoint above.
   [silverstone-nav-toggle-base] */
.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 8px;
  margin: 0;
  cursor: pointer;
  color: var(--ink-soft);
  z-index: 60;
  position: relative;
}
.nav-toggle .bar {
  display: block;
  width: 26px;
  height: 1.5px;
  background: currentColor;
  margin: 6px 0;
  transition: transform 220ms ease, opacity 180ms ease;
}
.nav-toggle:hover { color: var(--navy); }
.nav-toggle:focus-visible { outline: 1px solid var(--navy); outline-offset: 4px; }

/* ── Hero eyebrow — prevent mid-word breaks ──────────────────────
   At narrow widths the flex items were breaking inside their text
   ("PRACTICE" / "I"). Keep each item atomic and let whole items wrap. */
.hero .eyebrow {
  flex-wrap: wrap;
  row-gap: 8px;
}
.hero .eyebrow > * { white-space: nowrap; }

/* ── Hero on phones — drop the vertical centering ────────────────
   On tall narrow viewports, justify-content:center on a min-height
   100vh hero pushes the eyebrow to mid-screen, leaving an empty
   top half. Collapse to natural flow. */
@media (max-width: 600px) {
  .hero {
    padding-top: clamp(40px, 8vh, 72px);
    padding-bottom: clamp(40px, 8vh, 80px);
    min-height: auto;
    justify-content: flex-start;
  }
  .hero .eyebrow .tick { display: none; }
  .hero .eyebrow { margin-bottom: 28px; }
}