/* =====================================================================
   CHAVANS — RESOURCES PAGE
   Final dev stylesheet (standalone: this page needs nothing else).
   Source of truth: "Landing Page_Resources COPY" PDF / PPTX.
   Reference canvas: 1600px wide. Desktop sizes are in vw so the page
   scales from that canvas.  1vw @1600 = 16px.

   FONTS
   - Helvetica Neue (display + body). Licensed (Monotype), so it's not
     bundled. Built into macOS/iOS. For Windows/Android, license a web
     font and declare it with family name "Helvetica Neue".
     Weights used: 400 Regular, 500 Medium, 700 Bold (card titles).
   - JetBrains Mono (nav, tag, hero card, buttons, footer headings).
     Open font (OFL), self-hosted from /fonts. Weights 400 / 500 / 700.
===================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 4.6875vw;          /* 75px @1600 */

  --black:    #000000;         /* hero, CTA, footer */
  --charcoal: #181818;         /* How to read this section */
  --white:    #ffffff;         /* Insights, News, hero card */
  --grey:     #d9d9d9;         /* Closing statement */

  --ink:        #111111;       /* headings on light */
  --ink-bold:   #1a1a1a;       /* card titles */
  --ink-body:   #4a4a4a;       /* hero card body */
  --ink-mute:   #6a6a6a;       /* card descriptions */
  --ink-ondark: #c4c4c4;       /* body on charcoal */
  --rule:       #7f7f7f;       /* closing-statement bracket */
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
body{
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.s{ position: relative; width: 100%; overflow: hidden; }

/* =====================================================================
   01 HERO (black) + NAV + hanging white card
===================================================================== */
.s-hero{
  background: var(--black);
  color: var(--white);
  display: flow-root;          /* keeps the card's negative margin from collapsing */
  overflow: visible;
  z-index: 2;
}
.hero-bg{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 60%, #1a1a1a 0%, #050505 55%, #000 100%);
}

/* Nav */
.nav{
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 2.6vw var(--gutter);
}
.nav .logo img{ width: 8.75vw; min-width: 110px; max-width: 160px; height: auto; }
.nav-pills{ margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
.pill{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;        /* 11px ≈ PPT 9pt */
  letter-spacing: 0.06em;
  color: #f5f5f5;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.pill:hover{ background: rgba(255,255,255,0.14); }
.pill--active{ background: rgba(20,20,20,0.85); border-color: rgba(255,255,255,0.10); }
.search{ color: #fff; margin-left: 0.5rem; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.search svg{ width: 20px; height: 20px; }
.nav-toggle{ display: none; flex-direction: column; gap: 5px; width: 28px; height: 22px; }
.nav-toggle span{ display: block; height: 2px; background: #fff; border-radius: 1px; }

/* Hero copy */
.hero-body{
  position: relative; z-index: 3;
  text-align: center;
  padding: 0 var(--gutter);
  margin-top: 8.75vw;          /* 140px @1600 */
}
.hero-tag{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.9375rem;        /* 15px (PPT 10pt) */
  letter-spacing: 0.04em;
  color: #fff;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.hero-tag .plus{ font-weight: 500; font-size: 1.05em; line-height: 1; }
.hero-title{
  font-family: var(--font-sans);
  font-weight: 500;            /* Helvetica Neue Medium */
  font-size: 5vw;              /* 80px @1600 (PPT 48pt) — 3 fixed lines */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0.375vw 0 0;
}

/* White card */
.hero-card{
  position: relative; z-index: 5;
  width: 78vw;
  margin: 2.5vw auto -18vw;    /* 40px under title; lower part hangs into section 02 */
  padding: 4.5vw 5vw;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
}
.hero-card-inner{
  display: grid;
  grid-template-columns: 1fr 1.25fr;   /* artwork | copy */
  align-items: center;
  gap: 4.5vw;
}
.hero-card-art img{ width: 100%; height: auto; }   /* supplied grid geometry, whitespace pre-cropped */
.card-label{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9375rem;        /* 15px */
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 1.1rem;
  display: flex; align-items: baseline; gap: 0.55em;
}
.card-label .arrow{ font-weight: 500; }
.card-body{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.9375rem;        /* 15px */
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-body);
  text-transform: uppercase;
  margin: 0;
}

/* =====================================================================
   02 HOW TO READ THIS SECTION (charcoal, framed by 2 vertical rules)
===================================================================== */
.s-read{
  background: var(--charcoal);
  color: #fff;
  min-height: 56.25vw;               /* 16:9 */
  padding: 22vw var(--gutter) 8vw;   /* top clears the hanging card */
  display: flex; align-items: center; justify-content: center;
}
.frame{ position: relative; width: 58vw; padding: 6vw 4vw; text-align: center; }
.frame-rule{ position: absolute; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,0.28); }
.frame-rule--l{ left: 0; }
.frame-rule--r{ right: 0; }
.read-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 5.5vw;            /* ~88px @1600 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 2vw;
}
.read-body{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.35vw, 1.5rem);   /* 18–24px, ~22px @1600 */
  line-height: 1.55;
  color: var(--ink-ondark);
  max-width: 36vw;
  margin: 0 auto;
}

/* =====================================================================
   03 INSIGHTS + 04 NEWS (white) — shared tile system
   Both use the same 4-column grid, so the 2 News tiles line up
   exactly under Insights tiles 1 and 2.
===================================================================== */
.s-group{
  background: var(--white);
  color: var(--ink);
  padding: 9.375vw 3vw 8.75vw;       /* 150 / 48 / 140 px @1600 */
}
.s-group--news{ padding-top: 2.5vw; padding-bottom: 10.625vw; }

.group-title{
  font-family: var(--font-sans);
  font-weight: 500;            /* Helvetica Neue Medium */
  font-size: 4.1667vw;         /* 66.7px @1600 (PPT 40pt) */
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 6.25vw;
}
.group-title--center{ text-align: center; }     /* Insights */
.group-title--left{ margin-left: 0.6875vw; }     /* News */

.cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5vw;
}
.card{ display: flex; flex-direction: column; color: inherit; }
.card-tile img{
  width: 100%; height: auto;   /* supplied PNG incl. rounded corners + tone — don't redraw */
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-tile img{ transform: translateY(-0.375vw); }
.card-cap{
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;   /* PPT: Helvetica 12pt */
  font-size: clamp(0.875rem, 1.05vw, 1.1875rem);   /* 14–19px, ~17px @1600 */
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 1.25rem;
  padding: 0 0.75vw;
}
.card-title{                   /* LINE 1: bold "[01] Title" */
  display: block;
  font-weight: 700;
  color: var(--ink-bold);
  margin-bottom: 0.35em;
}
.card-desc{ display: block; }  /* LINE 2+: regular description */

/* =====================================================================
   05 CLOSING STATEMENT (light grey, left bracket)
===================================================================== */
.s-close{
  background: var(--grey);
  color: #000;
  min-height: 56.25vw;               /* 16:9 */
  display: flex; align-items: center;
  padding: 0 0 0 11.1875vw;          /* 179px @1600 */
}
.close{
  position: relative;
  padding: 3.25vw 0 3.25vw 1.9375vw;
}
.brk{
  position: absolute; left: 0; top: 0;
  width: 1.1875vw; height: 100%;     /* 19px @1600 */
  border: 1px solid var(--rule); border-right: 0;
}
.close p{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 3.3333vw;               /* 53.3px @1600 (PPT 32pt) */
  line-height: 1.22;
  letter-spacing: -0.005em;
  max-width: 73.75vw;
}

/* =====================================================================
   06 START WITH CLARITY (black)
===================================================================== */
.s-cta{
  background: var(--black);
  color: #fff;
  padding: 6vw var(--gutter);
  min-height: 30vw;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.cta-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 4.5vw;            /* ~72px @1600 */
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.cta-sub{ font-family: var(--font-sans); font-size: 1rem; color: #d0d0d0; margin: 1.1vw 0 3vw; }
.cta-btns{ display: flex; gap: 1.4vw; }
.cta-btn{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;        /* 13px */
  letter-spacing: 0.06em;
  padding: 1.1rem 1.8rem;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  min-width: 22vw;
  white-space: nowrap;
}
.cta-btn svg{ width: 40px; height: 12px; }
.cta-btn--dark{ background: #1a1a1a; color: #fff; border: 1px solid #2a2a2a; }
.cta-btn--light{ background: #fff; color: #111; }

/* =====================================================================
   07 FOOTER (black)
===================================================================== */
.footer{ background: var(--black); color: #d0d0d0; padding: 5vw var(--gutter) 4vw; }
.foot-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw; }
.foot-col h4{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;        /* 13px */
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 1.6rem;
}
.foot-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.foot-col a{ font-family: var(--font-sans); font-size: 0.9375rem; color: #cfcfcf; }
.foot-col a:hover{ color: #fff; }
.foot-copy{ font-family: var(--font-sans); font-size: 0.875rem; color: #8a8a8a; margin: 1.8rem 0 0; }

/* =====================================================================
   MOBILE (≤ 900px)
===================================================================== */
@media (max-width: 900px){
  :root{ --gutter: 5vw; }
  .nav{ padding: 5vw var(--gutter); gap: 0.75rem; }
  .nav .logo img{ width: 110px; }
  .nav-pills, .search{ display: none; }
  .nav-toggle{ display: inline-flex; margin-left: auto; }

  .hero-body{ margin-top: 12vw; }
  .hero-title{ font-size: 9.6vw; line-height: 1.12; }
  .hero-card{ width: 88vw; padding: 8vw 6vw; margin: 8vw auto -40vw; }
  .hero-card-inner{ grid-template-columns: 1fr; gap: 7vw; }
  .card-label, .card-body{ font-size: 0.8125rem; }

  .s-read{ min-height: 0; padding-top: 60vw; padding-bottom: 14vw; }
  .frame{ width: 88vw; padding: 12vw 6vw; }
  .read-title{ font-size: 12vw; }
  .read-body{ max-width: 76vw; font-size: 4.2vw; }

  .s-group{ padding: 18vw var(--gutter) 12vw; }
  .s-group--news{ padding-top: 6vw; padding-bottom: 18vw; }
  .group-title{ font-size: 11vw; margin-bottom: 8vw; }
  .group-title--left{ margin-left: 0; }
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8vw 3vw; }
  .card-cap{ font-size: 3.6vw; padding: 0; }

  .s-close{ min-height: 0; padding: 22vw var(--gutter); }
  .close{ padding: 6vw 0 6vw 6vw; }
  .brk{ width: 12px; }
  .close p{ font-size: 6.6vw; line-height: 1.25; }
  .close br{ display: none; }

  .cta-title{ font-size: 9vw; }
  .cta-btns{ flex-direction: column; width: 100%; gap: 3vw; }
  .cta-btn{ min-width: 0; width: 100%; white-space: normal; }

  .foot-grid{ grid-template-columns: 1fr 1fr; gap: 8vw 4vw; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .card-tile img{ transition: none; }
  .card:hover .card-tile img{ transform: none; }
}