/* ==========================================================================
   Take It to the Net — clean static rebuild (v2 design)
   Type, size, weight & color follow the Figma spec
   (var/redesign/typography_dumps_from_figma.txt); layout is measured off the
   comp (var/redesign/Website.png), a 1440-wide desktop frame.

   Sizes use clamp(min, <vw>, <spec px>) where the vw term is tuned to reach
   the spec value at exactly 1440px, so desktop is pixel-accurate and
   everything scales fluidly below it.
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------- */
/* Robust — all display headings (uppercase) */
@font-face {
  font-family: "Robust";
  src: url("../fonts/robust-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Martian Mono (wdth 100) — all body copy, labels, legal */
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* TAN Memories — stat numerals only (subset to 0-9 and %) */
@font-face {
  font-family: "TAN Memories";
  src: url("../fonts/tan-memories-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --gold: #FFCD00;       /* section / icon fills — sampled from the comp */
  --gold-type: #FDCB02;  /* rules + © line — per the Figma dump */
  --blue: #0285FE;
  --black: #000000;
  --text: #000000;
  --white: #FFFFFF;

  --font-display: "Robust", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-numeral: "TAN Memories", Georgia, "Times New Roman", serif;

  --wrap: 1318px;                          /* comp: 1440 − 2×61 gutters */
  --gutter: clamp(1.25rem, 4.25vw, 61px);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul { list-style: none; padding: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--black); padding: .75rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Robust display headings — 70/70 uppercase, centred */
.band__headline, .stats__heading, .section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.87vw, 70px);
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
}

/* --- 1. Header ---------------------------------------------------------- */
/* The lockup scales as one unit off --lockup-h (The Net lockup height). */
.site-header {
  --lockup-h: clamp(56px, 6.26vw, 90px);
  background: var(--black);
  display: flex; justify-content: center;
  padding: calc(var(--lockup-h) / 3) var(--gutter);   /* comp: 30px at 90px */
}
.lockup { display: flex; align-items: center; }
.lockup__sky  { height: calc(var(--lockup-h) * 88 / 90); width: auto; }
.lockup__net  { height: var(--lockup-h); width: auto; }
.lockup__rule {
  flex: 0 0 auto;
  width: 3px; height: calc(var(--lockup-h) * 89 / 90);
  background: var(--white);
  margin-left: calc(var(--lockup-h) / 3);            /* comp: 30px */
  margin-right: calc(var(--lockup-h) * 0.2);         /* comp: 18px */
}

/* --- 2. Hero ------------------------------------------------------------ */
.hero { background: var(--black); }
.hero__img { width: 100%; }

/* --- 3. Blue band (masthead) -------------------------------------------- */
.band {
  background: var(--blue);
  color: var(--white);
  text-align: center;
  padding: clamp(2rem, 3.96vw, 57px) var(--gutter) clamp(2.25rem, 4.17vw, 60px);
}
.band__inner { max-width: 1178px; margin-inline: auto; }
.band__headline { margin-bottom: clamp(.9rem, 1.6vw, 23px); }
.band__copy {                                        /* Martian Mono 20/28 */
  font-size: clamp(1rem, 1.39vw, 20px);
  line-height: 1.4;
}
.band__copy + .band__copy { margin-top: clamp(1.25rem, 1.95vw, 28px); }

/* --- 4. Stats ----------------------------------------------------------- */
.stats {
  background: var(--white);
  padding: clamp(2.5rem, 5.42vw, 78px) var(--gutter) clamp(3rem, 6.26vw, 90px);
}
.stats__heading {
  color: var(--text);
  max-width: 1178px;
  margin: 0 auto clamp(2rem, 4.17vw, 60px);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(1rem, 4.25vw, 61px);
  row-gap: clamp(2rem, 3vw, 2.75rem);
  max-width: 1210px;
  margin-inline: auto;
}
.stat { text-align: center; }
.stat__num {                                         /* TAN Memories italic 80 */
  display: block;
  font-family: var(--font-numeral);
  font-style: italic;
  font-size: clamp(3.25rem, 5.56vw, 80px);
  line-height: 1.325;
  color: var(--blue);
}
.stat__label {                                       /* Martian Mono 14/18 */
  display: block;
  margin-top: 4px;
  font-size: clamp(.75rem, .98vw, 14px);
  line-height: 1.2858;
}

/* --- 5 + 6. Gold section with white panel ------------------------------ */
.gold-section {
  background: var(--gold);
  padding: clamp(2rem, 5vw, 72px) var(--gutter) clamp(2rem, 4.93vw, 71px);
}
.panel {
  background: var(--white);
  border-radius: clamp(24px, 4.17vw, 60px);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.5rem, 5.84vw, 84px) clamp(1.25rem, 4.73vw, 68px) clamp(2.75rem, 6.6vw, 95px);
}
.panel__rule {
  border: 0;
  height: 4px;
  background: var(--gold-type);
  max-width: 761px;
  margin: clamp(2.5rem, 6.18vw, 89px) auto clamp(2.25rem, 5.35vw, 77px);
}

.section-heading { color: var(--text); }
.section-intro {                                     /* Martian Mono 16/24 */
  max-width: 880px;
  margin: clamp(.9rem, 1.28vw, 18px) auto 0;
  text-align: center;
  font-size: clamp(.875rem, 1.12vw, 16px);
  line-height: 1.5;
}
.resources .section-intro { max-width: 620px; }

/* Cards (circle icon + linked title + body) */
.cards {
  margin-top: clamp(2rem, 4.45vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(1rem, 3.62vw, 52px);
  row-gap: clamp(2rem, 4vw, 3.25rem);
}
.cards--half {
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1rem, 2.09vw, 30px);
  max-width: 860px;
  margin-inline: auto;
}
.card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.card__icon {
  width: clamp(64px, 6.67vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: clamp(6px, .7vw, 10px);
}
.card__icon--blue { background: var(--blue); }
.card__icon--gold { background: var(--gold); }
/* Glyph sizes are % of the circle, taken from the comp (circle = 96px there) */
.card__glyph { width: 52.1%; height: auto; }
.card__glyph--playbook { width: 60.4%; }
.card__glyph--globe { width: 58.3%; height: auto; }
.card__title {                                       /* Robust 50/50, underlined */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.48vw, 50px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: underline;
  text-underline-position: from-font;
  margin-bottom: clamp(1rem, 1.81vw, 26px);
}
.card__title:hover, .card__title:focus { color: var(--text); }
.card__body {                                        /* Martian Mono 14/18 */
  font-size: clamp(.75rem, .98vw, 14px);
  line-height: 1.2858;
}

/* --- 7. Footer ---------------------------------------------------------- */
.site-footer__band {
  background: var(--blue);
  color: var(--white);
  text-align: center;
  padding: clamp(2rem, 3.82vw, 55px) var(--gutter) clamp(2.5rem, 5.42vw, 78px);
}
.site-footer__lockup {
  width: clamp(240px, 26.2vw, 377px);
  height: auto;
  margin: 0 auto clamp(1.25rem, 2.3vw, 33px);
}
.site-footer__copy {                                 /* Martian Mono 18/26 */
  max-width: 1090px;
  margin-inline: auto;
  font-size: clamp(.875rem, 1.26vw, 18px);
  line-height: 1.4445;
}

.site-footer__bar {
  background: var(--black);
  color: var(--white);
  padding: clamp(1.5rem, 2.16vw, 31px) var(--gutter);
}
.partners {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 3.48vw, 50px);
  margin: 0 auto clamp(1rem, 1.67vw, 24px);
  max-width: var(--wrap);
}
.partners__peril    { height: clamp(44px, 4.31vw, 62px); width: auto; }
.partners__mesirow  { height: clamp(26px, 2.5vw, 36px); width: auto; }

.site-footer__legal {
  max-width: var(--wrap);
  margin-inline: auto;
  border-top: 1px solid var(--white);
  padding-top: clamp(1rem, 1.74vw, 25px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-size: clamp(.7rem, .98vw, 14px);
  line-height: 1.2858;
  text-transform: uppercase;
}
.site-footer__cr { color: var(--gold-type); }
.site-footer__privacy {
  color: var(--white);
  justify-self: end;
  text-align: right;
  text-decoration: none;
}
.site-footer__privacy:hover, .site-footer__privacy:focus { text-decoration: underline; }

.social { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.39vw, 20px); }
.social li { display: flex; }
.social a { color: var(--white); display: flex; }
.social a:hover, .social a:focus { color: var(--gold); }
.social svg { flex: 0 0 auto; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}
@media (max-width: 700px) {
  /* An 8:3 crop gets too letterboxed on phones — hold a usable height. */
  .hero__img { height: 240px; object-fit: cover; object-position: 62% center; }
  .band__headline, .stats__heading, .section-heading { font-size: clamp(2rem, 8.5vw, 2.75rem); }
  .card__title { font-size: clamp(1.5rem, 6.5vw, 2.25rem); }
  .stat__num { font-size: clamp(3rem, 13vw, 4rem); }
}
@media (max-width: 560px) {
  .cards, .cards--half { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .stats__grid { grid-template-columns: 1fr; max-width: 340px; }
  .site-footer__legal {
    grid-template-columns: 1fr;
    justify-items: center; text-align: center;
    gap: 1.25rem;
  }
  .site-footer__privacy { justify-self: center; text-align: center; }
}

/* --- Focus visibility --------------------------------------------------- */
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.band a:focus-visible, .site-footer a:focus-visible, .site-header a:focus-visible {
  outline-color: var(--gold);
}