/* ============================================================
   WE MAKE TREASURES — DESIGN SYSTEM
   Brand typeface: PP Neue Corp Compact (fallback: Archivo)
   Weight cap: 600 (Medium). Nothing renders heavier — anywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..600&display=swap');

/* — Brand typeface: PP Neue Corp Compact —
   Only two cuts are wired up: Ultralight (display fine print) and Medium.
   Medium (400–600) is the heaviest. The Ultrabold cut is intentionally NOT
   mapped so a stray font-weight:700+ can never pull in a heavier face. */
@font-face {
  font-family: "Neue Corp";
  src: url("../assets/fonts/PPNeueCorp-CompactUltralight.otf") format("opentype");
  font-weight: 100 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Corp";
  src: url("../assets/fonts/PPNeueCorp-CompactMedium.otf") format("opentype");
  font-weight: 400 900; font-style: normal; font-display: swap;   /* Medium answers for every weight ≥400, so 600 is the visual ceiling */
}

/* ----------------------------------------------------------
   TOKENS
   ---------------------------------------------------------- */
:root {
  /* — Color — */
  --coral:       #FF7E3E;   /* brand signal */
  --coral-press: #E86420;   /* pressed / hover */
  --ink:         #101216;   /* near-black, cool */
  --ink-soft:    #181B20;   /* raised dark surface */
  --paper:       #FFFFFF;
  --mist:        #F1F1EF;   /* light surface */
  --mist-deep:   #E5E5E2;
  --graphite:    #6B7178;   /* secondary text */
  --graphite-d:  #9AA1A8;   /* secondary on dark */

  /* — Hairlines — */
  --line:        rgba(16, 18, 22, 0.16);
  --line-strong: rgba(16, 18, 22, 0.42);
  --line-d:      rgba(255, 255, 255, 0.18);
  --line-d-strong: rgba(255, 255, 255, 0.42);

  /* — Type — */
  --sans: "Neue Corp", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: var(--sans);   /* Mono font removed — every label, eyebrow & caption now renders in Neue Corp */

  /* — Spacing scale — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  --maxw: 1400px;
}

/* ----------------------------------------------------------
   RESET
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;   /* never fake a bolder weight than the family provides */
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
b, strong { font-weight: 600; }   /* brand cap: nothing renders heavier than 600, including default bold */

/* ----------------------------------------------------------
   TYPE PRIMITIVES
   ---------------------------------------------------------- */
.u-mono {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.u-label {           /* eyebrow / section tag */
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--graphite);
}
.display {            /* condensed monumental */
  font-family: var(--sans);
  font-weight: 600;
  font-stretch: 78%;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.headline {          /* bold normal-width */
  font-family: var(--sans);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ----------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s6); }
.section { padding: var(--s9) 0; border-top: 1px solid var(--line); }
.section--dark { background: var(--ink); color: var(--paper); border-top-color: var(--line-d); }
.section--dark .u-label { color: var(--graphite-d); }
.section--mist { background: var(--mist); }

/* — GROUNDS —
   The system runs dark-first. Prefer these four grounds over plain paper;
   light surfaces are for quiet, dense reference content only. */
.section--coral { background: var(--coral); color: var(--ink); border-top-color: rgba(16,18,22,.28); }   /* ink-on-coral / black-on-red */
.section--coral .u-label { color: var(--ink); }
.section--media {            /* image- or video-backed ground; pair with .ground-scrim */
  position: relative; background: var(--ink); color: var(--paper);
  border-top-color: var(--line-d); overflow: hidden;
}
.section--media > .wrap, .section--media > .bleed { position: relative; z-index: 2; }
.ground-media { position: absolute; inset: 0; z-index: 0; }
.ground-media img, .ground-media video { width: 100%; height: 100%; object-fit: cover; }
.ground-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,18,22,.55) 0%, rgba(16,18,22,.30) 40%, rgba(16,18,22,.92) 100%); }

/* — FULL-BLEED STRUCTURE —
   Hairlines and grids run edge to edge of the viewport, not just inside the
   centered measure. .bleed is a full-width container; pad its rows with .wrap
   or row-internal padding so the dividing rules span the whole screen. */
.section--flush { padding: 0; }
.bleed { width: 100%; }
.bleed-row { border-top: 1px solid var(--line); }
.section--dark .bleed-row, .section--media .bleed-row { border-top-color: var(--line-d); }
.section--coral .bleed-row { border-top-color: rgba(16,18,22,.28); }

.sec-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s7); }
.sec-head .idx { font-family: var(--mono); font-size: 12px; color: var(--coral); letter-spacing: 0.1em; }

/* registration corner brackets — recurring blueprint motif */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
}
.bracket::before { top: 0; left: 0; border-top: 1.5px solid var(--coral); border-left: 1.5px solid var(--coral); }
.bracket::after { bottom: 0; right: 0; border-bottom: 1.5px solid var(--coral); border-right: 1.5px solid var(--coral); }

/* ----------------------------------------------------------
   COMPONENT — BUTTONS
   ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s5);
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em;
  padding: 14px 18px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  min-width: 168px;
}
.btn .arr { font-family: var(--mono); transition: transform .2s ease; }
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:hover .arr { transform: translateX(4px); }

.btn--coral { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.btn--coral:hover { background: var(--coral-press); border-color: var(--coral-press); color: var(--ink); }

.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--coral); border-color: var(--coral); color: var(--ink); }

.btn--ghost-d { border-color: var(--line-d-strong); color: var(--paper); }
.btn--ghost-d:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--sm { min-width: 0; padding: 9px 13px; font-size: 13px; }

/* link with underline-on-hover */
.link-arr { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px;
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .18s; }
.link-arr .arr { font-family: var(--mono); transition: transform .2s; }
.link-arr:hover { border-color: transparent; }
.link-arr:hover .arr { transform: translateX(4px); }

/* ----------------------------------------------------------
   COMPONENT — TAG / SPEC LABEL
   ---------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; padding: 5px 9px; border: 1px solid var(--line-strong); color: var(--ink);
}
.tag--coral { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.tag--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag--dot::before { content: ""; width: 6px; height: 6px; background: var(--coral); }

/* ----------------------------------------------------------
   COMPONENT — APPLICATION CATEGORIZATION  (Service + Discipline tags)
   Service = filled coral chip (parent) · Discipline = outline chip (child)
   Tuned for dark application grounds; flips on coral hover so chips stay legible.
   ---------------------------------------------------------- */
.app-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.app-svc, .app-disc {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1; padding: 4px 7px; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.app-svc { background: var(--coral); color: var(--ink); border: 1px solid var(--coral); }
.app-disc { background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.26); }
/* light/paper grounds */
.on-light .app-disc, .s--coral .app-disc { color: rgba(16,18,22,.72); border-color: rgba(16,18,22,.28); }
/* coral hover ground (e.g. .app:hover, .appcat:hover): flip service chip to ink so it stays distinct */
.app:hover .app-svc, .appcat:hover .app-svc { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.app:hover .app-disc, .appcat:hover .app-disc { color: var(--ink); border-color: rgba(16,18,22,.4); }

/* ----------------------------------------------------------
   COMPONENT — SWATCH
   ---------------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--line); border-bottom: 0; }
.swatch { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.swatch .chip { height: 132px; display: flex; align-items: flex-end; padding: 12px; }
.swatch .meta { padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.swatch .name { font-weight: 600; font-size: 15px; }
.swatch .val { font-family: var(--mono); font-size: 11.5px; color: var(--graphite); letter-spacing: 0.02em; }
.swatch .use { font-size: 12.5px; color: var(--graphite); margin-top: 4px; }

/* ----------------------------------------------------------
   COMPONENT — TYPE SPECIMEN ROW
   ---------------------------------------------------------- */
.type-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--line); align-items: baseline; }
.type-row .spec { font-family: var(--mono); font-size: 11.5px; color: var(--graphite); letter-spacing: 0.04em; line-height: 1.7; }
.type-row .spec b { color: var(--ink); font-weight: 500; display: block; }

/* ----------------------------------------------------------
   COMPONENT — CARDS
   ---------------------------------------------------------- */
/* solution row */
.sol { display: grid; grid-template-columns: 64px 1.1fr 1fr; gap: var(--s6); padding: var(--s6) 0; border-top: 1px solid var(--line); align-items: start; }
.sol .num { font-family: var(--mono); font-size: 13px; color: var(--coral); }
.sol h4 { font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.04; margin-bottom: 12px; }
.sol p { color: var(--graphite); font-size: 15px; max-width: 46ch; margin-bottom: var(--s5); }

/* case study card */
.case { border: 1px solid var(--line); background: var(--paper); }
.case .ph { aspect-ratio: 4/3; }
.case .cap { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-top: 1px solid var(--line); }
.case .cap h5 { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.case .code { font-family: var(--mono); font-size: 12px; color: var(--coral); }

/* coral feature panel */
.panel { background: var(--coral); color: var(--ink); display: grid; grid-template-columns: 1fr 150px; }
.panel .body { padding: var(--s7); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s8); border-right: 1px solid rgba(16,18,22,.28); }
.panel h3 { font-weight: 600; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.02em; line-height: 1.02; }
.panel p { font-size: 15px; max-width: 40ch; }
.panel .glyph { display: flex; align-items: center; justify-content: center; }

/* ----------------------------------------------------------
   PLACEHOLDER IMAGERY  (striped, with mono caption)
   ---------------------------------------------------------- */
.ph {
  position: relative; background-color: var(--mist-deep);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(16,18,22,.05) 11px 12px);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ph::after {
  content: attr(data-ph); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite); padding: 4px 8px; border: 1px solid var(--line-strong);
  background: var(--mist);
}
.ph--dark { background-color: #20242b; background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,.05) 11px 12px); }
.ph--dark::after { color: var(--graphite-d); border-color: var(--line-d-strong); background: var(--ink-soft); }

/* ----------------------------------------------------------
   BRAND MARK  (ORIGINAL PLACEHOLDER — swap for your own)
   corner-bracket / framing motif
   ---------------------------------------------------------- */
.mark { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-stretch: 100%; font-size: 21px; letter-spacing: -0.02em; }
.mark svg { display: block; }
.markword sup { font-size: 0.5em; vertical-align: super; font-weight: 600; }