/* =====================================================================
   CHAVANS — SERVICES PAGE
   Standalone stylesheet — no other CSS needed.
   Source of truth: "Landing Page_Services COPY" PDF / PPTX.
   Reference canvas: 1600px wide. Sizes in vw scale from that.
   (1vw @1600 = 16px)

   FONTS
   - Helvetica Neue (display + body).
   - JetBrains Mono (nav, labels, buttons). Open font (OFL), self-hosted
     from /fonts. Weights: 400, 500, 700 + 400 Italic (hero card WHAT/HOW).
===================================================================== */

/* ---------- 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;
}
@font-face{
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Italic-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;
}

/* ---------- 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;
  --charcoal:#181818;
  --white:   #ffffff;
  --grey:    #d6d6d6;

  --ink:      #111111;
  --ink-bold: #1a1a1a;
  --ink-body: #4a4a4a;
  --ink-mute: #6a6a6a;
  --ink-ondark: #c4c4c4;
}

/* ---------- 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;
  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;
  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: 10vw;
}
.hero-tag{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: #fff;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.hero-tag .plus{ font-family: var(--font-sans); font-weight: 300; font-size: 1.2em; line-height: 1; }
.hero-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 5.4vw;            /* 3-line title ~86px @1600 */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 1.4vw 0 0;
}

/* White card */
.hero-card{
  position: relative; z-index: 5;
  width: 78vw;
  margin: 3.5vw auto -18vw;
  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;
  align-items: center;
  gap: 4vw;
}
.hero-card-art img{ width: 100%; height: auto; display: block; }
.card-label{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9375rem;
  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;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-body);
  text-transform: uppercase;
  margin: 0;
}
.card-body em{ font-style: italic; }   /* WHAT / HOW in italics */

/* =====================================================================
   02 HOW TO READ THIS SECTION (charcoal, framed)
===================================================================== */
.s-read{
  background: var(--charcoal);
  color: #fff;
  padding: 22vw var(--gutter) 8vw;
  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;
  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);
  line-height: 1.55;
  color: var(--ink-ondark);
  max-width: 44vw;
  margin: 0 auto;
}

/* =====================================================================
   03 OUR SERVICE MODELS (white, 1 row × 4 tiles)
===================================================================== */
.s-models{
  background: var(--white);
  color: var(--ink);
  padding: 10vw var(--gutter) 7vw;
}
.models-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 5.5vw;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  margin: 0 0 5vw;
}
.cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4vw;
}
.card-tile img{ width: 100%; height: auto; }
.card-cap{
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.875rem, 1.05vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 1.25rem;
  padding: 0 0.15vw;
}
.card-title{
  display: block;
  font-weight: 700;
  color: var(--ink-bold);
  margin-bottom: 0.35em;
}
.card-desc{ display: block; }

/* =====================================================================
   04 HOW THIS CONNECTS / WHERE THIS LEADS (grey)
===================================================================== */
.s-two{
  background: var(--grey);
  color: var(--ink);
  padding: 0 var(--gutter);
  min-height: 46vw;
  display: flex; align-items: center;
}
.two-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; width: 100%; padding: 9vw 4vw; align-items: start; }
.two-col{ position: relative; padding-left: 1.6vw; }
.brk{
  position: absolute; left: 0; top: 0;
  width: 12px; height: 100%;
  border: 1px solid #6b6b6b; border-right: 0;
}
.two-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 3.5vw;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 1.4vw;
}
.two-p{
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 28vw;
  margin: 0;
}
.two-p .two-link{
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.two-p .two-link:hover{ color: var(--ink); }

/* =====================================================================
   05 START WITH CLARITY (black) — EXACT AIE / PLATFORMS PATTERN
===================================================================== */
.s-svc-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;
  position: relative;
  overflow: hidden;
}
.cta-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 4.5vw;
  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;
  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; }

/* =====================================================================
   06 FOOTER (black) — EXACT AIE / PLATFORMS PATTERN
===================================================================== */
.s-svc-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;
  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: 14vw; }
  .hero-title{ font-size: 9vw; }
  .hero-card{ width: 88vw; padding: 8vw 6vw; margin: 8vw auto -40vw; }
  .hero-card-inner{ grid-template-columns: 1fr; gap: 6vw; }
  .card-label, .card-body{ font-size: 0.8125rem; }

  .s-read{ padding-top: 52vw; }
  .frame{ width: 88vw; padding: 12vw 6vw; }
  .read-title{ font-size: 12vw; }
  .read-body{ max-width: 76vw; font-size: 4.2vw; }

  .models-title{ font-size: 10vw; white-space: normal; }
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8vw 3vw; }
  .card-cap{ font-size: 3.6vw; }

  .s-two{ padding: 8vw var(--gutter); }
  .two-grid{ grid-template-columns: 1fr; gap: 12vw; padding: 0 4vw; }
  .two-title{ font-size: 9vw; }
  .two-p{ max-width: 80vw; font-size: 0.9375rem; }

  .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; }
}