/**
 * BASE STYLES — shared foundation loaded by ALL THREE pages on this
 * site: index.html (the marketing homepage), admin.html (the partner
 * admin dashboard), and partner.html (the lead-submission form).
 *
 * WHAT LIVES HERE: the CSS reset, the color/spacing/font "design tokens"
 * (see the TOKENS section just below — this is where the whole site's
 * color scheme is actually controlled), the page background texture and
 * scrollbar glow, small reusable layout helpers (.wrap/.sec), basic text
 * styles (.eyebrow/.h2/.muted), the button styles (.btn*) used
 * everywhere a button appears, and the .rev "fade in on scroll" effect.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change the site's colors (background, text, the green accent) —
 *     see the TOKENS section;
 *   - change button appearance (.btn-fill, .btn-ghost);
 *   - change the base page background/scroll behavior.
 *
 * admin.html only actually uses the color TOKENS from this file (its own
 * <style> block in admin.html defines everything else it needs) —
 * that's why this file has to load on every page, even admin.html, even
 * though most of its rules do nothing there. partner.html additionally
 * uses .brand-icon, .btn/.btn-fill, .eyebrow, and .grid-bg. index.html
 * uses everything in this file.
 *
 * IMPORTANT: this file must be the FIRST stylesheet linked on every
 * page. Every other CSS file assumes the color tokens defined here
 * already exist — if you reorder the <link> tags in the HTML and put
 * something before base.css, colors/spacing will likely break.
 */

/* ── RESET ─────────────────────────────────────── */
/* Removes each browser's own default spacing/styling so the site looks
   the same everywhere, instead of every browser adding its own margins,
   link colors, underlines, etc. You should rarely need to touch this. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; } /* smooth-scrolls to #sections instead of jumping instantly */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* Utility class, NOT a bare `picture` selector: applied only to the
   specific <picture> wrappers added for WebP delivery (nav/footer logos,
   the hero robot, client logos, tech icons), never to every <picture> on
   the site by default. Without it, a <picture> wrapper inserts its own
   inline box into whatever flex/absolute layout the original bare <img>
   used to sit in directly, since <picture> isn't layout-transparent on
   its own. display:contents makes the wrapper invisible to layout, so
   the <img> inside behaves exactly as if <picture> weren't there. Add
   this class to any *new* <picture> you introduce for the same reason;
   a <picture> that doesn't need to slot into an existing flex/absolute
   layout (e.g. one placed fresh inside ordinary flow) doesn't need it. */
.pic-contents { display: contents; }

/* ══════════════════════════════════════════════════
   COLOR & SPACING TOKENS
   This is THE place to change the site's colors. Every other CSS file
   uses `var(--something)` instead of writing colors directly, so
   changing a value here changes it everywhere that variable is used.

   --accent is the green brand color used for buttons, links, glows,
   and highlights across the whole site — change it here to re-theme
   the whole site's accent color in one place.
══════════════════════════════════════════════════ */
:root {
  /* --bg/--bg-2/--bg-3: page background shades, darkest to lightest.
     --card/--card-hov: the semi-transparent panel background used behind
     cards/boxes (e.g. pricing cards), and its hover state.
     --border/--border-mid: subtle line colors used for dividers/outlines. */
  --bg:          #0a0a0a;
  --bg-2:        #0f0f0f;
  --bg-3:        #141414;
  --card:        rgba(255,255,255,0.032);
  --card-hov:    rgba(255,255,255,0.055);
  --border:      rgba(255,255,255,0.07);
  --border-mid:  rgba(255,255,255,0.11);
  /* NOTE: these 3 accent values are overridden further down this same
     file (search for "RELOCATED" below) to a slightly softer green. If
     you change the accent color here and nothing looks different,
     that's why — edit the values in that later block instead, or edit
     both together so they stay consistent. */
  --accent:      #00ff8c;
  --accent-lt:   #4dffb0;
  --accent-dim:  rgba(0,255,140,0.14);
  /* Text colors, most-visible to least-visible (--text is near-white,
     --text-4 is barely distinguishable from the background). */
  --text:        #f0ede8;
  --text-2:      #b8b2ab;
  --text-3:      #6b6560;
  --text-4:      #2e2b28;
  /* Fonts: --display is used for headings/big text, --body for
     everything else. Both are loaded from Google Fonts in the <head> of
     each HTML page — changing the name here without also changing the
     Google Fonts <link> tag will just fall back to the browser default. */
  --display:     'Syne', sans-serif;
  --body:        'Space Grotesk', sans-serif;
  /* Corner roundness used across cards/buttons/inputs (--r = normal,
     --r-lg = larger, used on bigger panels), and the shared "ease" curve
     used by most hover/transition animations on the site. */
  --r:           12px;
  --r-lg:        20px;
  --ease:        cubic-bezier(.4,0,.2,1);
}

/* Light mode — toggled by clicking the hero lamp (the JavaScript for
   that lives in public/js/marketing/theme.js). When light mode is on,
   the page gets a `data-theme="light"` attribute, which makes these
   values override the dark-mode ones above. Mirrors the dark palette's
   structure: same warm undertone, tints flipped. To change light-mode
   colors, edit here; to change dark-mode colors, edit the :root block
   above instead. */
:root[data-theme="light"] {
  --bg:          #f7f5f2;
  --bg-2:        #f1efea;
  --bg-3:        #e9e6df;
  --card:        rgba(20,16,10,0.035);
  --card-hov:    rgba(20,16,10,0.06);
  --border:      rgba(20,16,10,0.09);
  --border-mid:  rgba(20,16,10,0.16);
  --accent:      #009c5c;
  --accent-lt:   #00b869;
  --accent-dim:  rgba(0,156,92,0.12);
  --text:        #18160f;
  --text-2:      #4a453c;
  --text-3:      #837c70;
  --text-4:      #d9d4c9;
}

/* THIS is the block that actually controls the green accent color you
   see on the live site in dark mode — it overrides the --accent/
   --accent-lt/--accent-dim values set in the first :root block above.
   To change the site's green accent color, change the values HERE (and
   optionally also update the first block above, so both stay in sync
   for anyone reading the file top-to-bottom).

   Why a second, separate :root block instead of just editing the values
   in the first one? Because this block is what makes the toned-down
   accent color apply everywhere. In CSS, when the same custom property
   is declared twice, the LATER declaration wins — so as long as this
   block stays physically after the first :root block above (it does),
   these are the values every `var(--accent)`/`var(--accent-lt)`/
   `var(--accent-dim)` resolves to, on all three pages. Moving this block
   above the first :root block, or deleting it, would make the site fall
   back to the brighter values declared there instead. */
:root {
  --accent:     #00c870;
  --accent-lt:  #00e882;
  --accent-dim: rgba(0,200,112,0.13);
}

/* ── BASE ───────────────────────────────────────── */
/* The page's overall background/text color and default font — these
   read from the tokens above via var(--bg)/var(--text)/var(--body), so
   they update automatically if you change those. The `transition` line
   is what makes colors fade smoothly instead of flashing instantly when
   switching between dark and light mode. */
body {
  background: var(--bg); color: var(--text);
  font-family: var(--body); line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

/* ── GRID TEXTURE ────────────────────────────────── */
/* The faint graph-paper-style grid pattern visible in the page
   background, plus the glowing scrollbar. Purely decorative — safe to
   ignore unless you specifically want to change/remove that grid look. */
/* Subtle graph-paper grid that fades toward edges & bottom */
.grid-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 0%, rgba(0,0,0,.45) 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 0%, rgba(0,0,0,.45) 45%, transparent 78%);
}
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(20,16,10,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,16,10,.06) 1px, transparent 1px);
}
::selection { background: var(--accent-dim); color: var(--accent-lt); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0,255,140,.8), 0 0 18px rgba(0,255,140,.4);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-lt);
  box-shadow: 0 0 14px rgba(0,255,140,1), 0 0 36px rgba(0,255,140,.9), 0 0 70px rgba(0,255,140,.55), 0 0 120px rgba(0,255,140,.25);
}
/* Moving glow that follows the scrollbar thumb */
.scroll-light {
  position: fixed; right: 0; pointer-events: none; z-index: 98;
  width: 90px; height: 220px; transform: translateY(-50%);
  background: radial-gradient(ellipse at 100% 50%, rgba(0,255,140,.22) 0%, rgba(0,255,140,.07) 38%, transparent 68%);
  will-change: top; transition: width .25s ease, height .25s ease, background .25s ease;
}
.scroll-light.lit {
  width: 150px; height: 300px;
  background: radial-gradient(ellipse at 100% 50%, rgba(0,255,140,.32) 0%, rgba(0,255,140,.14) 35%, rgba(0,255,140,.05) 58%, transparent 72%);
}

/* ── LAYOUT ─────────────────────────────────────── */
/* .wrap centers page content and caps how wide it can get on large
   screens (1160px here) — used by nearly every section on the site as
   the outer content container. .sec adds consistent top/bottom spacing
   for a full-page section. Change 1160px to make the whole site's
   content column wider or narrower; change 108px to add/remove space
   above and below each section. The mobile version of .sec's spacing
   lives further down in this file, in the @media block. */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.sec  { padding: 108px 0; }

/* ── TYPE ───────────────────────────────────────── */
/* .eyebrow = the small uppercase label that appears above section
   headings (e.g. "OUR SERVICES"). .h2 = the big section heading style.
   .muted = smaller, dimmer paragraph text used for descriptions. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content:''; display:block; width:18px; height:1px; background:var(--accent); }

.h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
  margin: 10px 0;
}
.muted { font-size: .94rem; color: var(--text-3); line-height: 1.75; max-width: 480px; }

/* ── BUTTONS ─────────────────────────────────────── */
/* .btn is the shared base look for every button on the site (size,
   padding, rounded corners). .btn-fill is the solid accent-colored
   "primary" button (e.g. "Get a Quote"); .btn-ghost is the outlined
   "secondary" style. Change .btn's `padding`/`border-radius` to resize
   ALL buttons at once; change .btn-fill/.btn-ghost to only change one
   style. */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border-radius: 10px;
  font-family: var(--body); font-size: .88rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
  transition: all .22s var(--ease); cursor: pointer;
}
.btn-fill  { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-fill:hover  { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,255,140,.28); }
.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-mid); }
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); transform: translateY(-1px); }
[data-theme="light"] .btn-ghost:hover { border-color: rgba(20,16,10,.25); background: rgba(20,16,10,.04); }

/* Shared fixed-size icon slot for the logo mark, used anywhere it sits
   next to/above the wordmark (nav, footer, partner page). It lives here
   in base.css, not in nav.css, because partner.html loads base.css but
   not nav.css, and it needs this class too. A fixed container +
   object-fit:contain means the source PNG/SVG's own intrinsic width/
   height can never stretch or overflow this slot, regardless of its
   aspect ratio. .nav-logo/.foot-brand-top override its size with a
   higher-specificity compound selector, so it's safe regardless of
   which file loads first. */
.brand-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 36px;
  overflow: hidden;
}
.brand-icon img {
  width: 100%; height: 100%;
  max-width: 32px; max-height: 32px;
  object-fit: contain;
}

/* ── REVEAL ─────────────────────────────────────── */
/* The "fade + slide up as you scroll to it" effect applied to most
   sections. `.rev` is the hidden starting state; JavaScript (see
   nav.js's IntersectionObserver code) adds the `.in` class once an
   element scrolls into view, which triggers this transition. Change
   `22px`/`.65s` to make the slide distance or fade speed bigger/smaller. */
.rev { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.rev.in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════
   MOBILE / SMALL-SCREEN OVERRIDES for this file
   Only applies when the browser window is 640px wide or narrower
   (phones, most tablets in portrait). Every CSS file in this project
   keeps its own mobile overrides in a block like this one, right at the
   bottom of the file, next to the component they adjust — so if you're
   looking for "why does X look different on mobile", check the bottom
   of whichever file defines X, not a separate global file.
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .sec { padding: 64px 0; }
}