/* Savageworks Concepts, Look C: Look A's layout in Charcoal, Royal Blue and Tangerine, set in one sans family.
   Tangerine is the highlight, Royal Blue is the atmosphere (glow), light blue is for links and focus. */

/* DM Sans, self-hosted (SIL Open Font License; licence text in fonts/OFL.txt). Variable weight, Latin subset,
   from Google Fonts (fonts.gstatic.com/s/dmsans/v17), added 2026-11-12 with the owner's approval.
   Characters outside the subset and any failed load fall back to the system sans in --font-sans. */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --page: #21232E;       /* Charcoal, the page */
  --white: #FFFFFF;      /* Pure White, the text: 15.6:1 on the page */
  --accent: #FE8500;     /* Tangerine, the highlight: 6.4:1 on the page */
  --blue: #105BFF;       /* Royal Blue, the glow only (never text) */
  --link: #8DB0FF;       /* light blue for links and focus: 7.3:1 on the page */

  /* Neutrals derived from the charcoal; hairlines carry a faint blue tint. */
  --surface: #282B38;
  --surface-2: #2F3241;
  --line: #363B52;
  --line-strong: #4F5675;
  --soft: #DEE1EA;       /* secondary text: 12.0:1 on the page, 10.8:1 on a card */
  --muted: #A9AEC0;      /* captions: 7.1:1 on the page, 6.4:1 on a card */
  --on-accent: #21232E;  /* charcoal on tangerine: 6.4:1 */

  /* One family for everything. */
  --font-sans: "DM Sans", system-ui, "Segoe UI Variable Text", "Segoe UI", -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-label: var(--font-sans);

  --wrap: 1200px;
  --radius: 20px;
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--white);
  font: 400 1.125rem/1.6 var(--font-sans);
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--white); }

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

.wrap {
  width: min(100% - 32px, var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 0.875rem/1.5 var(--font-label);
}
.skip-link:focus { top: 16px; }

/* Header */

.site-header { position: relative; z-index: 10; }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 80px;
}

.wordmark {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark:hover { color: var(--white); }

.mark {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--white);
  border-radius: 6px;
}
.mark::after {
  content: "";
  position: absolute;
  right: 2.5px;
  bottom: 2.5px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--muted);
  font: 500 0.8rem/1 var(--font-label);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.site-nav a:hover { color: var(--white); }
.site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.header-cta { justify-self: end; }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 0.85rem/1 var(--font-label);
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--white); color: var(--on-accent); }

.btn-outline {
  border-color: var(--line-strong);
  background: rgba(33, 35, 46, 0.6);
  color: var(--white);
}
.btn-outline:hover { border-color: var(--white); color: var(--white); }
.btn-outline[aria-current="page"] { border-color: var(--accent); }

.btn-small { padding: 0 1.1rem; font-size: 0.8rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.5rem;
  font: 500 0.8rem/1 var(--font-label);
  letter-spacing: 0.04em;
}

/* Headline type */

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 11.5vw, 6.25rem);
  line-height: 1.06;
  letter-spacing: -0.015em;   /* DM Sans at this size is already tight; tighter than this made letters touch */
  text-wrap: balance;
}
.display > span { display: block; }
.display em { font-style: normal; color: var(--accent); }

.sub {
  max-width: 52ch;
  margin: 1.5rem auto 0;
  color: var(--soft);
  font: 400 1rem/1.7 var(--font-label);
}

/* Glow: royal blue light rising from the bottom centre, with a faint vertical-line texture. */

/* The glow box runs past the bottom of the hero so the light fades out behind the cards
   instead of ending on a hard edge. */
.glow {
  position: absolute;
  inset: 0 0 -14rem;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22rem), transparent);
  mask-image: linear-gradient(#000 calc(100% - 22rem), transparent);
}
.glow-small { bottom: -8rem; }
.glow::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20%;
  width: min(1200px, 160%);
  height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(16, 91, 255, 0.85), rgba(16, 91, 255, 0.38) 45%, rgba(16, 91, 255, 0.1) 75%, transparent);
}
.glow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14rem;
  width: min(1000px, 140%);
  height: 60%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, rgba(77, 133, 255, 0.28) 0 1px, transparent 1px 8px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 100%, #000, rgba(0, 0, 0, 0.35) 55%, transparent);
  mask-image: radial-gradient(50% 100% at 50% 100%, #000, rgba(0, 0, 0, 0.35) 55%, transparent);
}
.glow-small::before { bottom: -45%; height: 100%; opacity: 0.9; }
.glow-small::after { height: 55%; opacity: 0.8; }

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(8rem, 13vw, 11rem);
  text-align: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 820px) 1fr;
  grid-template-areas: "left copy right";
  align-items: center;
  gap: 2rem;
}
.hero-copy { grid-area: copy; }
.hero-copy .actions { justify-content: center; margin-top: 2rem; }

.figs {
  display: grid;
  gap: 2.5rem;
  margin: 0;
}
.figs-left { grid-area: left; justify-items: start; text-align: left; }
.figs-right { grid-area: right; justify-items: end; text-align: right; }
.figs div { display: flex; flex-direction: column; }
.figs dd {
  order: -1;
  margin: 0;
  font: 600 clamp(2rem, 3vw, 2.75rem)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--white);
}
.figs dt {
  margin-top: 0.5rem;
  color: var(--muted);
  font: 500 0.7rem/1.3 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Cards */

.cards {
  position: relative;
  z-index: 1;
  margin-top: clamp(-6.5rem, -8vw, -4rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.venture-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(40, 43, 56, 0.94);
  box-shadow: 0 30px 60px -30px rgba(8, 10, 20, 0.8);
  scroll-margin-top: 2rem;
}
.card-large { padding: clamp(1.5rem, 3vw, 2.5rem); }

.card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font: 500 0.72rem/1.3 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 0.72rem/1.2 var(--font-label);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.card h2 {
  margin: 0;
  font: 600 clamp(1.75rem, 2.6vw, 2.25rem)/1.1 var(--font-display);
  letter-spacing: -0.02em;
}
.card-large h2 { font-size: clamp(2rem, 4vw, 3rem); }
.card p { margin: 0; color: var(--soft); }
.card .actions { margin-top: auto; padding-top: 0.5rem; }

.note { color: var(--muted); font-size: 1rem; }
.card p.note { color: var(--muted); }

.facts { margin: 0; }
.facts div {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.facts dt {
  color: var(--muted);
  font: 500 0.72rem/1.9 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.facts dd { margin: 0; font-size: 1rem; line-height: 1.5; }

/* Inner pages */

.page-head {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(6rem, 10vw, 8rem);
  text-align: center;
}
.page-head .display { font-size: clamp(2.25rem, 8vw, 4.75rem); }
.page-head .actions { justify-content: center; margin-top: 2rem; }

.updated {
  margin: 1rem 0 0;
  color: var(--muted);
  font: 500 0.8rem/1.5 var(--font-label);
  letter-spacing: 0.06em;
}

.prose {
  max-width: 44rem;
  padding: 1rem 0 clamp(4rem, 8vw, 6rem);
}
.prose h2 {
  margin: 2.5rem 0 0.75rem;
  font: 600 1.75rem/1.2 var(--font-display);
  letter-spacing: -0.02em;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 1rem; color: var(--soft); }
.prose li { margin-bottom: 0.35rem; }
.address { margin-bottom: 0.75rem; font-style: normal; line-height: 1.7; }
.prose p.note { color: var(--muted); }

/* Footer */

.site-footer { border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.5rem 0;
  color: var(--muted);
  font: 400 0.78rem/1.6 var(--font-label);
  letter-spacing: 0.02em;
}
.footer-inner p { margin: 0; max-width: 60ch; }
.footer-inner ul { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.footer-inner a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.6rem;
  color: var(--soft);
}
.footer-inner a:hover { color: var(--accent); }

/* Narrow screens */

@media (max-width: 960px) {
  .card-row, .venture-row { grid-template-columns: minmax(0, 1fr); }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy copy" "left right";
    align-items: stretch;
    gap: 2rem 0.75rem;
  }
  /* Under the buttons the figures sit in the glow, so they get a dark panel to keep contrast. */
  .figs {
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(33, 35, 46, 0.85);
  }
  .figs-left, .figs-right { justify-items: start; text-align: left; }
}

@media (max-width: 720px) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand cta" "nav nav";
    gap: 0 0.75rem;
    padding-top: 0.5rem;
  }
  .wordmark { grid-area: brand; font-size: 0.9rem; }
  .header-cta { grid-area: cta; }
  .site-nav { grid-area: nav; margin-left: -0.85rem; }
}

@media (max-width: 400px) {
  .site-nav a { padding: 0 0.7rem; }
  .btn { padding: 0 1.15rem; }
  .hero-copy .actions .btn { width: 100%; }
}

/* Motion: position only, never opacity, so every frame is readable. */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .page-head .wrap { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .figs { animation: rise 0.8s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .cards .wrap { animation: rise 0.9s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .btn { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }

  @keyframes rise {
    from { transform: translateY(16px); }
    to { transform: none; }
  }
}