/* ============================================================
   SCALE — Supply Chain & Logistics Excellence LLC
   Design direction "2b Sporty, Structured"
   Tokens taken from design_handoff_scale_site_2b/README.md
   Rules: 3px borders, hard offset shadows (never blurred),
          radius 0, dot-grid backgrounds.
   ============================================================ */

:root {
  --ink:        #16131f;  /* page background, dark card fill */
  --ink-deeper: #0e0c16;  /* services band */
  --paper:      #f2f0fa;  /* borders, display text, chips */
  --muted:      #b9b3d4;  /* body text on dark */

  --teal:    #00b3a4;
  --magenta: #e6007e;
  --violet:  #7a3ff2;
  --gold:    #f5c518;

  --dot:         #3a3450;  /* dot-grid dots */
  --violet-sub:  #e6dcff;  /* sub-text inside the violet stat cell */
  --btn-hover:   #2c2841;  /* secondary/dark button hover fill */

  --rule: 3px solid var(--paper);

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'Space Grotesk', system-ui, sans-serif;

  --page-max: 1200px;
  --gutter: 40px;
  --nav-h: 79px;
}

/* ---------- reset ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  font: 700 14px var(--body);
  padding: 12px 18px;
  border: var(--rule);
}
.skip-link:focus { left: 8px; top: 8px; }

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dotgrid {
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 20px 20px;
}

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

.chip {
  align-self: flex-start;
  background: var(--paper);
  color: var(--ink);
  padding: 4px 12px;
  font: 500 13px var(--body);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section__title {
  font: 900 italic 44px/1.05 var(--display);
  color: var(--paper);
  letter-spacing: -1px;
}

/* Chip stacked ABOVE the title, matching the About section.
   The handoff put the chip inline to the left of the title, but that pushes
   the title off the section's left margin by the width of the chip — and
   because the chip labels differ in length, "What clients buy" and "Where
   I've built" landed at different x positions (232 vs 275) while the chips
   and cards both sat at 73. Stacking gives every section one left edge.
   `.chip`'s own `align-self: flex-start` is correct in a column, so there's
   nothing to override here. */
.section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Deck: the positioning line under a name. Held closer to its heading than
   the section's 18px rhythm so the two read as one unit. */
.heading-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section__deck {
  font: 900 italic 22px/1.2 var(--display);
  color: var(--teal);
  letter-spacing: -0.5px;
}

.prose {
  font: 400 17px/1.6 var(--body);
  color: var(--muted);
  text-wrap: pretty;
}

.t-teal    { color: var(--teal); }
.t-magenta { color: var(--magenta); }

/* ---------- speed-dash logo mark (pure CSS) ---------- */

.mark {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mark__dash {
  display: block;
  height: 4px;
  transform: skewX(-30deg);
}
.mark__dash--1 { width: 20px; background: var(--teal); }
.mark__dash--2 { width: 13px; background: var(--magenta); }
.mark__dash--3 { width:  7px; background: var(--gold); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: var(--rule);
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}

/* Every .btn--* below sets an explicit line-height (the /1.25 in the font
   shorthand). Without it, Archivo and Space Grotesk contribute different
   default line boxes and sibling buttons end up 5px different in height.
   It must live inside the shorthand — `font:` resets line-height to normal. */

.btn--primary {
  background: var(--teal);
  color: var(--ink);
  font: 900 italic 16px/1.25 var(--display);
  text-transform: uppercase;
  padding: 14px 26px;
  box-shadow: 6px 6px 0 var(--paper);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--paper);
}

.btn--secondary {
  background: var(--ink);
  color: var(--paper);
  font: 700 16px/1.25 var(--body);
  padding: 14px 26px;
  gap: 6px;
}
.btn--secondary:hover,
.btn--secondary:focus-visible { background: var(--btn-hover); }

.btn--nav {
  background: var(--teal);
  color: var(--ink);
  font: 700 14px/1.25 var(--body);
  padding: 10px 18px;
  box-shadow: 4px 4px 0 var(--paper);
}
.btn--nav:hover,
.btn--nav:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--paper);
}

.btn-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: var(--rule);
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 16px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.brand__word {
  font: 900 italic 26px var(--display);
  color: var(--paper);
  letter-spacing: -1px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 14px var(--body);
  color: var(--paper);
  border-bottom: 3px solid transparent;
  transition: border-color 120ms ease-out, color 120ms ease-out;
}
.nav__link:hover { color: var(--teal); }
.nav__link.is-active { border-bottom-color: var(--teal); }

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

.hero { border-bottom: var(--rule); }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding-block: 90px 70px;
}

.hero .chip { padding: 5px 12px; }

.hero__plate {
  background: var(--ink);
  border: var(--rule);
  box-shadow: 10px 10px 0 var(--violet);
  padding: 22px 30px;
  max-width: 846px; /* = the mockup's 780px content box + 30px padding + 3px border, each side */
}

.hero__headline {
  font: 900 italic 72px/1.0 var(--display);
  color: var(--paper);
  letter-spacing: -2px;
  text-wrap: pretty;
}

/* 720px, not the handoff's 640px: at 640 this sets to four lines with
   "market operators." orphaned on the last one and "mid-market" broken across
   the line above. 720 gives three even lines with the compound intact, and
   clears the next wrap point by ~28px so it holds across font rendering. */
.hero__sub {
  font: 400 20px/1.5 var(--body);
  color: var(--muted);
  max-width: 720px;
  text-wrap: pretty;
}

/* ---------- stats strip ---------- */

.stats { border-bottom: var(--rule); }

.stats__inner {
  display: flex;
  padding-inline: 0; /* strip runs to the edge of the 1200px page, as in the board */
}

.stat {
  flex: 1;
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat + .stat { border-left: var(--rule); }

.stat__value {
  font: 900 italic 34px var(--display);
  color: var(--paper);
}
/* No text-transform here: "MASc" has meaningful mixed case, so the labels
   are written in their final casing in index.html. */
.stat__label {
  font: 500 13px/1.4 var(--body);
  color: var(--muted);
  letter-spacing: 1px;
}

.stat--violet { background: var(--violet); }
.stat--violet .stat__label { color: var(--violet-sub); }

/* ---------- about ---------- */

.about { border-bottom: var(--rule); }

/* The section header sits full width above the photo/bio row, so 01 lands on
   the same left margin as 02 and 03 rather than inside the right column. */
.about__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 70px;
}

.about__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  /* Centred, not top-aligned: with the header promoted out, the bio runs ~84px
     shorter than the 440px photo. Splitting that evenly above and below reads
     as deliberate; top-aligning leaves the photo dangling. */
  align-items: center;
}

.portrait {
  position: relative;
  width: 360px;
  max-width: 100%;
}
.portrait__plate {
  position: absolute;
  inset: 14px -14px -14px 14px;
  background: var(--magenta);
  border: var(--rule);
}
.portrait__img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 440;
  object-fit: cover;
  border: var(--rule);
}

/* 640px caps the measure at ~67 characters per line. The full 712px column
   ran ~83, above the 45-75 readability range. */
.about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 640px;
}

.callout {
  align-self: flex-start;
  border: var(--rule);
  background: var(--gold);
  color: var(--ink);
  padding: 12px 16px;
  font: 500 15px/1.5 var(--body);
}

/* ---------- services ---------- */

.services {
  background: var(--ink-deeper);
  border-bottom: var(--rule);
}

.services__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 70px;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.card {
  background: var(--ink);
  border: var(--rule);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card--teal    { box-shadow: 8px 8px 0 var(--teal); }
.card--magenta { box-shadow: 8px 8px 0 var(--magenta); }
.card--violet  { box-shadow: 8px 8px 0 var(--violet); }
.card--gold    { box-shadow: 8px 8px 0 var(--gold); }

.card__title {
  font: 900 italic 24px var(--display);
  color: var(--paper);
}
.card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 400 15px/1.5 var(--body);
  color: var(--muted);
}
.card__list li::before {
  content: "\2192\00a0"; /* → */
}

.icon { display: block; border: var(--rule); }
.icon--square  { width: 18px; height: 18px; background: var(--teal); }
.icon--circle  { width: 18px; height: 18px; background: var(--magenta); border-radius: 50%; }
.icon--diamond { width: 18px; height: 18px; background: var(--violet); transform: rotate(45deg); }
.icon--pill    { width: 26px; height: 14px; background: var(--gold); border-radius: 10px; }

/* ---------- track record ---------- */

.track { border-bottom: var(--rule); }

.track__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-block: 70px;
}

.track__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tcard {
  border: var(--rule);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tcard__title {
  font: 700 20px var(--body);
  color: var(--paper);
}
.tcard__body {
  font: 400 15px/1.5 var(--body);
  color: var(--muted);
}

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

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding-block: 80px;
}

/* .chip defaults to flex-start; the contact column is centred (used on 404.html) */
.contact .chip { align-self: center; }

/* the ink background punches the text out of the dot grid behind it */
.contact__title {
  font: 900 italic 60px/1.05 var(--display);
  color: var(--paper);
  letter-spacing: -2px;
  background: var(--ink);
  padding: 0 10px;
}
.contact__line {
  font: 400 18px/1.5 var(--body);
  color: var(--muted);
  background: var(--ink);
  padding: 0 10px;
}
.contact .btn--primary,
.contact .btn--secondary { padding: 14px 28px; }

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

.footer { border-top: var(--rule); }

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
}
.footer__copy {
  font: 500 13px var(--body);
  color: var(--muted);
}
.footer__word {
  font: 700 italic 13px var(--display);
  color: var(--paper);
}

/* ---------- scroll reveal (only when JS is on) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE — single column below ~1000px.
   Borders and hard shadows stay intact at every width.
   ============================================================ */

@media (max-width: 1000px) {
  :root { --gutter: 24px; --nav-h: 76px; }

  /* nav collapses to the mark + the one action that matters */
  .nav__link { display: none; }
  .nav__links { gap: 0; }

  .hero__inner { padding-block: 56px 48px; }
  .hero__headline { font-size: 46px; letter-spacing: -1px; }
  .hero__plate { padding: 18px 22px; max-width: 100%; box-shadow: 8px 8px 0 var(--violet); }
  .hero__sub { font-size: 18px; }

  .stats__inner { flex-direction: column; }
  .stat + .stat { border-left: 0; border-top: var(--rule); }

  .about__inner { gap: 26px; padding-block: 56px; }
  .about__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }
  .about__body { max-width: none; }
  .portrait { width: 100%; max-width: 360px; margin-inline: auto; }

  .section__title { font-size: 34px; }
  .section__deck { font-size: 19px; }

  .services__inner,
  .track__inner { padding-block: 56px; gap: 26px; }

  .services__grid,
  .track__grid { grid-template-columns: 1fr; }

  .contact__inner { padding-block: 60px; }
  .contact__title { font-size: 40px; letter-spacing: -1px; }
  .contact__line { font-size: 16px; }

  .btn-row { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; }

  .footer__inner { padding-block: 20px; }
}

@media (max-width: 560px) {
  .hero__headline { font-size: 36px; }
  .contact__title { font-size: 34px; }
  .section__title { font-size: 28px; }
  .section__deck { font-size: 17px; }
  .btn-row .btn { flex: 1 1 100%; }
  /* keep the offset shadows from spilling off a narrow screen */
  .card--teal    { box-shadow: 6px 6px 0 var(--teal); }
  .card--magenta { box-shadow: 6px 6px 0 var(--magenta); }
  .card--violet  { box-shadow: 6px 6px 0 var(--violet); }
  .card--gold    { box-shadow: 6px 6px 0 var(--gold); }
}

/* ---------- respect reduced motion ---------- */

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