/* ============================================================================
   LEAD — leadiamonds.com
   ----------------------------------------------------------------------------
   Visual system follows Kering's: black and white as the whole palette — black
   dense and authoritative, white a blank canvas — carried by whitespace and
   scale rather than by colour. The crest gold is the single accent, used at
   label size only, so the brand mark stays the one warm thing on the page.

   No serif anywhere. The LEAD wordmark is a light, wide-tracked sans, and the
   headings are set to match it rather than argue with it.
   ========================================================================== */

:root {
  /* Ground and ink */
  --white: #ffffff;
  --paper: #ffffff;
  --off: #f5f3f0;          /* warm off-white, for alternating sections */
  --black: #0a0a0a;
  --ink: #0a0a0a;

  /* Text */
  --body: #57534d;
  --muted: #8a857e;

  /* Line work */
  --line: #e4e1dd;
  --line-strong: #cbc6bf;
  --line-invert: rgba(255, 255, 255, 0.22);

  /* The single accent — the crest gold, sampled from the artwork */
  --gold: #c7a879;

  --header-height: 84px;
  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* Malmoe is the brand face — the same one the film is set in. It carries the
     display type: headings, the small tracked labels, and the buttons. Body
     copy stays in the system sans, because Malmoe is a light geometric display
     face and a paragraph of it at 1rem is markedly harder to read than the
     headline it was drawn for. */
  --display: Malmoe, "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

@font-face {
  font-family: Malmoe;
  src: url("assets/Malmoe.woff2") format("woff2"),
       url("assets/Malmoe.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  /* Show the fallback immediately and swap when Malmoe lands: a headline that
     is invisible until a font downloads is worse than one that reflows. */
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- type ---- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  margin: 0;
}

h1 {
  font-size: clamp(2.9rem, 6.4vw, 6rem);
  letter-spacing: -0.025em;
  line-height: 1.0;
  max-width: 16ch;
}

h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.9rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 24ch;
}

h3 {
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

p {
  color: var(--body);
  font-size: 1.035rem;
  line-height: 1.72;
  margin: 0;
  max-width: 62ch;
}

/* The small uppercase label that opens most sections. Gold, and the only
   place colour appears at all outside the crest. */
.kicker {
  color: var(--gold);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
}

.kicker.dark { color: var(--gold); }

.lede {
  color: var(--body);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.66;
  max-width: 60ch;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  background: var(--black);
  color: var(--white);
  left: 16px;
  padding: 12px 16px;
  position: fixed;
  top: -80px;
  z-index: 2000;
}

.skip-link:focus { top: 16px; }

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

/* ------------------------------------------------------------- buttons ---- */

.button {
  align-items: center;
  font-family: var(--display);
  border: 1px solid currentColor;
  display: inline-flex;
  font-size: 0.72rem;
  justify-content: center;
  letter-spacing: 0.2em;
  min-height: 52px;
  padding: 16px 30px 15px;
  text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}

.button-light {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.button-light:hover {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}

.button-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.button-ghost:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* On the black bands the polarity flips. */
.closing-section .button-light {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.closing-section .button-light:hover {
  background: transparent;
  color: var(--white);
}

/* Buttons sitting directly in a grid copy block must not stretch. */
.statement > .button,
.craft-copy > .button,
.legacy-copy > .button,
.opening-copy > .button,
.proof-inner > .button,
.section-inner > .button {
  justify-self: start;
}

/* -------------------------------------------------------------- header ---- */

.site-header {
  background: transparent;
  color: var(--ink);
  height: var(--header-height);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: background 240ms ease, border-color 240ms ease;
  z-index: 1000;
}

.site-header.is-scrolled,
.site-header.is-solid,
.site-header.menu-active {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.nav-shell {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1560px;
  padding: 0 40px;
}

.brand { align-items: center; display: inline-flex; flex-shrink: 0; }
.brand img { height: 48px; width: auto; }

.site-menu {
  align-items: center;
  display: flex;
  font-family: var(--display);
  font-size: 0.7rem;
  gap: 40px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-menu a {
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.site-menu a:hover { border-color: var(--ink); }
.site-menu a[aria-current="page"] { border-color: var(--gold); }

.nav-cta {
  border: 1px solid var(--ink) !important;
  min-height: 44px;
  padding: 14px 22px 12px !important;
  display: inline-flex;
  align-items: center;
  transition: background 200ms ease, color 200ms ease;
}

.nav-cta:hover {
  background: var(--black);
  color: var(--white);
}

.site-menu a.nav-cta[aria-current="page"] {
  background: var(--black);
  color: var(--white);
}

.menu-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--ink);
  color: inherit;
  cursor: pointer;
  display: none;
  height: 46px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 46px;
}

.menu-toggle span {
  background: currentColor;
  height: 1px;
  position: absolute;
  transition: transform 200ms ease;
  width: 20px;
}

.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* ---------------------------------------------------------------- hero ---- */

.hero {
  background: var(--white);
  display: grid;
  min-height: 88svh;
  padding: calc(var(--header-height) + 80px) 40px 100px;
  place-items: center;
  position: relative;
  text-align: center;
}

/* The old design put a grid pattern behind the hero. The page is a blank
   canvas now; the mark and the sentence carry it. */
.hero-media,
.hero-overlay { display: none; }

.hero-content {
  align-items: center;
  display: grid;
  gap: 30px;
  justify-items: center;
  max-width: 1000px;
  position: relative;
}

.hero-logo {
  animation: markIn 1400ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
  width: min(370px, 62vw);
  height: auto;
}

.hero-copy {
  animation: rise 900ms ease-out 620ms both;
  color: var(--body);
  font-size: clamp(1.12rem, 1.6vw, 1.42rem);
  line-height: 1.62;
  max-width: 40ch;
}

.hero .kicker { animation: rise 900ms ease-out 480ms both; }

.hero-actions {
  animation: rise 900ms ease-out 760ms both;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding-top: 14px;
}

/* ------------------------------------------------------------ sections ---- */

.section,
.opening-band,
.thesis-section,
.proof-section,
.process-section {
  padding: clamp(80px, 11vw, 168px) 40px;
}

.section-inner,
.section-grid,
.thesis-layout,
.craft-section,
.legacy-section,
.proof-inner,
.proof-grid,
.site-footer,
.technology-layout,
.page-hero-inner {
  margin: 0 auto;
  max-width: 1400px;
}

.section-alt,
.thesis-section { background: var(--off); }

.section-mist,
.proof-section { background: var(--off); }

.opening-band { background: var(--white); }

.section-heading {
  display: grid;
  gap: 22px;
  margin: 0 auto clamp(48px, 6vw, 88px);
  max-width: 1400px;
}

/* A single wide statement, centred — the "blank canvas" beat. */
.opening-copy {
  display: grid;
  gap: 28px;
  justify-items: center;
  margin: 0 auto;
  max-width: 900px;
  text-align: center;
}

.opening-copy p { margin: 0 auto; }

/* ------------------------------------------------------ inner page hero ---- */

/* Black, not green. Dense and authoritative against the white everywhere else. */
.page-hero {
  background: var(--black);
  color: var(--white);
  padding: calc(var(--header-height) + clamp(64px, 9vw, 128px)) 40px clamp(64px, 9vw, 128px);
}

.page-hero-inner { display: grid; gap: 26px; }
.page-hero h1 { color: var(--white); max-width: 18ch; }
.page-hero p { color: rgba(255, 255, 255, 0.7); font-size: 1.1rem; max-width: 52ch; }
.page-hero .kicker { color: var(--gold); }

/* ------------------------------------------------------------- thesis ---- */

.thesis-layout {
  display: grid;
  gap: clamp(48px, 6vw, 100px);
  grid-template-columns: 1fr 1fr;
}

.statement {
  align-content: start;
  border-top: 1px solid var(--ink);
  display: grid;
  gap: 26px;
  padding-top: 34px;
}

.statement p { font-size: 1.1rem; }

.trace-rail { display: grid; }

.trace-step {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding: 32px 0;
}

.trace-step:last-child { border-bottom: 1px solid var(--line); }

.trace-step span,
.proof-item span,
.dept span,
.ledger-index {
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- craft ---- */

.craft-section,
.legacy-section,
.technology-layout {
  align-items: center;
  display: grid;
  gap: clamp(48px, 6vw, 104px);
  grid-template-columns: 1fr 1fr;
  padding: clamp(80px, 11vw, 168px) 40px;
}

.legacy-section { grid-template-columns: 1fr 1fr; }

.craft-copy,
.legacy-copy { display: grid; gap: 26px; align-content: center; }

.craft-image,
.legacy-media,
.laser-image {
  aspect-ratio: 4 / 5;
  background: var(--black);
  color: var(--gold);
  overflow: hidden;
}

.laser-image { aspect-ratio: 4 / 3; }

.craft-image svg,
.legacy-media svg,
.laser-image svg,
.node-media svg { display: block; height: 100%; width: 100%; }

.plate-grid { stroke: currentColor; stroke-opacity: 0.14; stroke-width: 1; }
.plate-mark { stroke: currentColor; fill: none; stroke-linejoin: round; }
.plate-label {
  fill: currentColor;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  opacity: 0.6;
}

.craft-facts,
.stat-row {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 8px 0 0;
}

.stat-row { grid-template-columns: repeat(4, 1fr); }

.craft-facts div,
.stat-row div {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 26px 20px 24px 0;
}

.craft-facts div + div,
.stat-row div + div {
  border-left: 1px solid var(--line);
  padding-left: 20px;
}

.craft-facts dt,
.stat-row dt,
.spec dt {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.craft-facts dd,
.stat-row dd {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.stat-row dd { font-size: 2rem; }

/* --------------------------------------------------------------- proof ---- */

.proof-inner { display: grid; gap: 24px; }

.proof-grid {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(44px, 5vw, 72px);
}

.proof-item {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 26px;
  min-height: 220px;
  padding: 30px 30px 30px 0;
}

.proof-item + .proof-item { border-left: 1px solid var(--line); padding-left: 30px; }
.proof-grid .proof-item:nth-child(3n + 1) { border-left: 0; padding-left: 0; }

.proof-item p {
  font-family: var(--display);
  align-self: end;
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* -------------------------------------------------------------- ledger ---- */

.ledger { display: grid; margin-top: clamp(44px, 5vw, 72px); }

.ledger-stage {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px 36px;
  grid-template-columns: 68px minmax(180px, 240px) 1fr auto;
  padding: 34px 0;
}

.ledger-stage:last-child { border-bottom: 1px solid var(--line); }
.ledger-index { align-self: start; padding-top: 5px; }
.ledger-stage h3 { align-self: start; }
.ledger-stage p { max-width: 56ch; }

.ledger-hash {
  align-self: center;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ledger-hash::before {
  color: var(--gold);
  content: "sealed ";
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- departments ---- */

.dept-grid {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  margin-top: clamp(44px, 5vw, 72px);
}

.dept {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 12px;
  min-height: 168px;
  padding: 28px 28px 30px;
}

.dept strong {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.dept small { color: var(--body); font-size: 0.88rem; line-height: 1.6; }

/* ----------------------------------------------------------------- spec ---- */

.spec { border-top: 1px solid var(--ink); margin-top: clamp(40px, 5vw, 64px); }

.spec div {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px 40px;
  grid-template-columns: minmax(180px, 300px) 1fr;
  padding: 28px 0;
}

.spec dd {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0;
}

/* -------------------------------------------------------------- closing ---- */

.closing-section {
  align-items: center;
  background: var(--black);
  color: var(--white);
  display: flex;
  gap: 48px;
  justify-content: space-between;
  padding: clamp(72px, 9vw, 132px) 40px;
}

.closing-copy { display: grid; gap: 26px; max-width: 54ch; }
.closing-copy h2 { max-width: 20ch; }
.closing-copy h2 { color: var(--white); }
.closing-copy p { color: rgba(255, 255, 255, 0.66); }

/* --------------------------------------------------------------- forms ---- */

.contact-layout {
  display: grid;
  gap: clamp(48px, 6vw, 104px);
  grid-template-columns: 1.1fr 0.9fr;
}

.contact-block {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-top: 26px;
}

.contact-block:first-of-type { border-top: 1px solid var(--ink); }
.contact-block a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.contact-block a:hover { border-color: var(--ink); }

.contact-form { display: grid; gap: 22px; }
.field { display: grid; gap: 10px; }

.field label {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.field input,
.field textarea,
.field select {
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.02rem;
  min-height: 52px;
  padding: 14px 2px;
  width: 100%;
}

.field textarea { min-height: 160px; resize: vertical; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--gold);
  outline: none;
}

.form-note { color: var(--muted); font-size: 0.85rem; }

.form-status { display: none; font-size: 0.95rem; padding: 14px 0; }
.form-status.is-error { color: #8c2f22; display: block; }
.form-status.is-ok { color: var(--ink); display: block; }

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

.site-footer {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 36px;
  justify-content: space-between;
  padding: 44px 40px;
}

.site-footer div { display: grid; gap: 6px; }

.site-footer strong {
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.16em;
}

.site-footer span,
.site-footer p {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  line-height: 1.6;
  max-width: none;
  text-transform: uppercase;
}

.site-footer p { text-align: right; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 30px; }

.footer-nav a {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------ redirect ---- */

.redirect-page {
  display: grid;
  gap: 22px;
  justify-items: center;
  min-height: 100svh;
  padding: 40px;
  place-content: center;
  text-align: center;
}

.redirect-page a {
  border: 1px solid var(--ink);
  display: inline-flex;
  font-size: 0.72rem;
  justify-content: center;
  letter-spacing: 0.2em;
  min-height: 50px;
  padding: 16px 28px 14px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- motion ---- */

@keyframes markIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.reveal { opacity: 1; transform: none; }

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease, transform 800ms ease;
}

.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1120px) {
  .thesis-layout,
  .craft-section,
  .legacy-section,
  .technology-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .craft-image,
  .legacy-media { aspect-ratio: 16 / 10; }

  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid .proof-item:nth-child(3n + 1) { border-left: 1px solid var(--line); padding-left: 30px; }
  .proof-grid .proof-item:nth-child(2n + 1) { border-left: 0; padding-left: 0; }

  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-row div:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 860px) {
  :root { --header-height: 72px; }

  .nav-shell { padding: 0 22px; }
  .brand img { height: 40px; }
  .menu-toggle { display: inline-flex; z-index: 1002; }

  .site-menu {
    align-items: stretch;
    background: var(--white);
    display: grid;
    gap: 0;
    inset: 0;
    padding: 104px 22px 32px;
    position: fixed;
    transform: translateX(100%);
    transition: transform 260ms ease;
    z-index: 1001;
  }

  .site-menu.is-open { transform: none; }

  .site-menu a {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0;
    min-height: 82px;
    text-transform: none;
  }

  .site-menu .nav-cta {
    font-size: 0.72rem;
    justify-content: center;
    letter-spacing: 0.2em;
    margin-top: 26px;
    min-height: 56px;
    text-transform: uppercase;
  }

  .hero { min-height: 78svh; padding: calc(var(--header-height) + 56px) 22px 76px; }

  .section,
  .opening-band,
  .thesis-section,
  .proof-section,
  .craft-section,
  .legacy-section,
  .page-hero,
  .closing-section { padding-left: 22px; padding-right: 22px; }

  .hero-actions { align-items: stretch; flex-direction: column; width: 100%; max-width: 340px; }
  .button { width: 100%; }

  .craft-facts,
  .stat-row,
  .proof-grid,
  .spec div { grid-template-columns: 1fr; }

  .craft-facts div + div,
  .stat-row div + div,
  .proof-item + .proof-item,
  .proof-grid .proof-item:nth-child(n) { border-left: 0; padding-left: 0; }

  .dept { border-right: 0; }

  .ledger-stage { grid-template-columns: 54px 1fr; gap: 10px 16px; }
  .ledger-stage h3,
  .ledger-stage p,
  .ledger-hash { grid-column: 2; }
  .ledger-hash { white-space: normal; word-break: break-all; }

  .closing-section { align-items: flex-start; flex-direction: column; }
  .closing-section .button { width: auto; }

  .site-footer { align-items: flex-start; flex-direction: column; gap: 22px; padding: 36px 22px; }
  .site-footer p { text-align: left; }
}

/* The footer's three columns were fighting for room: the company name wrapped
   mid-phrase and the nav broke onto two lines. Give each column what it needs. */
.site-footer div:first-child { flex: 0 0 auto; }
.site-footer .footer-nav { flex: 1 1 auto; justify-content: center; }
.site-footer > p { flex: 0 0 auto; max-width: 34ch; }

@media (max-width: 1120px) {
  .site-footer .footer-nav { justify-content: flex-start; }
  .site-footer > p { max-width: none; }
}