/* =========================================================
   GraspingAI — Base Styles
   - Palette & tokens
   - Global reset & typography
   - Layout primitives
   - Header / Nav
   - Buttons
   - Hero
   - Section helpers & “Story” (section--alt)
   - Tables (incl. engagement section)
   - Footer
   - Responsive tweaks
   ========================================================= */

/* ---------- Tokens: color, type scale, rhythm ---------- */
/* ========================= Typography System =========================
Scale (fluid via CSS variables):
  --step--1  → Small (UI, tables, footnotes)     class: .text-sm
  --step-0   → Base (default body: p, li)        class: .text-base (optional)
  --step-1   → Lead (emphasis body, subheads)    class: .text-lead
Headings:
  h1 → --step-4   h2 → --step-3   h3 → --step-2

Usage:
- Body copy defaults to --step-0.
- Use .text-lead sparingly for intro/hero paragraphs.
- Use .text-sm for captions/footnotes only.
- Avoid hard-coded px/rem font-sizes; always route through tokens.

Alignment helpers:
- .section--center centers the section block (and can center text).
- For “centered layout + left body”, wrap body in .text-left inside .section--center.
- Optional: .text-center / .text-left for granular alignment.

Maintenance:
- No media query font overrides (clamp scale handles it).
- If you tune a token, the whole site follows automatically.
====================================================================== */


:root {
  /* ---------------- Colors ---------------- */
  --bg: #0b1220;
  --panel: #0f172a;
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --accent: #60a5fa;
  --border: #23304a;

  /* ---------------- Fluid type scale (mobile-first) ---------------- */
  --step--1: clamp(0.875rem, 0.83rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1rem, 0.97rem + 0.3vw, 1.1rem);
  --step-1:  clamp(1.125rem, 1.06rem + 0.6vw, 1.35rem);
  --step-2:  clamp(1.375rem, 1.22rem + 1.2vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.8vw, 2.25rem);
  --step-4:  clamp(2.125rem, 1.7rem + 2.6vw, 3rem);

  /* ---------------- Line height & measure ---------------- */
  --lh-tight: 1.15;
  --lh-text:  1.6;
  --lh-long:  1.7;
  --measure:  70ch;

  /* ---------------- Spacing scale ---------------- */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs:  0.5rem;    /* 8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1.25rem;   /* 20px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */

  /* Default vertical padding for sections */
  --section-padding: var(--space-2xl);
}

/* Typography utilities */
.text-base { font-size: var(--step-0); }
.text-lead { font-size: var(--step-1); line-height: var(--lh-long); }
.text-sm   { font-size: var(--step--1); line-height: 1.45; }
.text-center { text-align: center; }



/* ---------- Global reset & base type ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: var(--lh-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Normalize paragraph and list text size */
p, li {
  font-size: var(--step-0);
}

/* ---------- Text utilities ---------- */
.text-base { font-size: var(--step-0); }      /* explicit “normal” size */
.text-lead { font-size: var(--step-1); }      /* if you want a class instead of inline */
.text-sm   { font-size: var(--step--1); }

.muted { color: var(--muted); }

/* Optional: if you want links inside muted text to stay muted too */
.muted a {
  color: var(--muted);
  border-bottom-color: rgba(148, 163, 184, 0.35); /* subtle underline using the same grey */
}
.muted a:hover {
  color: var(--muted);                          /* keep color steady */
  border-bottom-color: rgba(148, 163, 184, 0.6); /* slightly stronger underline on hover */
}

/* Optional: quick alignment helpers */
.text-left   { text-align: left; }
.text-center { text-align: center; }



/* Headings */
h1 { font-size: var(--step-4); line-height: var(--lh-tight); letter-spacing: 0.005em; }
h2 { font-size: var(--step-3); line-height: var(--lh-tight); letter-spacing: 0.01em; }
h3 { font-size: var(--step-2); line-height: 1.25; }

/* Paragraph rhythm & measure */
p, li { max-width: var(--measure); }

/* ---------- Vertical rhythm: global element spacing ---------- */
h1, h2, h3, p, ul, ol, blockquote {
  margin-top: 0; /* avoid double-gaps when stacking */
}

h1 { margin-bottom: var(--space-sm); line-height: 1.1; }
h2 { margin-bottom: var(--space-xs); line-height: 1.2; }
h3 { margin-bottom: var(--space-xs); line-height: 1.3; }

p, ul, ol, blockquote {
  margin-bottom: var(--space-md);
  line-height: var(--lh-text);
}



/* Subhead in hero */
.hero .subhead { font-size: var(--step-1); line-height: var(--lh-long); color: var(--muted); }

/* Hyphenation for narrow widths */
@supports (hyphens: auto) {
  p, li, blockquote { hyphens: auto; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Links & focus ---------- */
a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}
a:hover, a:focus { color: var(--accent); border-bottom-color: var(--accent); }
a:visited { color: var(--accent); opacity: 0.9; }
a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-bottom-color: transparent;
}

/* ---------- Layout primitives ---------- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(2.5rem, 2rem + 2vw, 5rem) 0; border-bottom: 1px solid var(--border); }
.section h2 { margin-top: 0; line-height: 1.25; margin-bottom: 8px; }
.section--center { text-align: center; }
.section--center h2, .section--center p, .section--center .cta { margin-left: auto; margin-right: auto; }

/* Keep section centered, but body text left within a nice center column */
.section--center .text-left { text-align: left; }
.section--center .text-left > p,
.section--center .text-left > ul,
.section--center .text-left > ol,
.section--center .text-left > .grid {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

.section--center .lead { color: var(--muted); }
.section--center a { color: var(--accent); font-weight: 500; border-bottom: 1px solid transparent; }
.section--center a:hover { border-bottom-color: var(--accent); }
.section:not(.section--center) h2 { text-align: left; }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Center the section block, but keep text left by default */
.section--center-layout { text-align: left; }
.section--center-layout .container,
.section--center-layout .container-narrow {
  margin-left: auto;
  margin-right: auto;
}


/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,18,32,.9);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.brand-logo { height: 28px; width: auto; display: block; }
.brand-text { display: none; }
.menu { display: flex; align-items: center; gap: 18px; }
.menu a { color: var(--ink); text-decoration: none; font-weight: 500; }
.menu a:hover { color: #fff; }
.menu-toggle { display: none; background: none; border: 1px solid var(--border); color: var(--ink); padding: 6px 10px; border-radius: 8px; }

/* Mobile drawer */
.drawer {
  display: none; flex-direction: column; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.drawer.open { display: flex; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;              /* was inline-block */
  align-items: center;               /* vertically center text/icon */
  justify-content: center;
  box-sizing: border-box;            /* include border in size calc */
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: 0.15s ease;
  /* remove vertical-align and line-height hacks */
}

.btn.small { padding: 8px 12px; }

.btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--accent);
  color: #08111e;
  border: 0;
  font-weight: 700;
  transition: all 0.15s ease;
}

.btn.primary:hover,
.btn.primary:focus-visible {
  background: color-mix(in srgb, var(--accent) 85%, #ffffff 15%);
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.btn.primary:active {
  transform: translateY(0);
  background: color-mix(in srgb, var(--accent) 90%, #000000 10%);
}


/* Outline button rendered with inset stroke to avoid clipping */
.btn.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 10px;

  /* remove the real border and use an inset stroke instead */
  border: 0;
  box-shadow: inset 0 0 0 1px var(--accent);

  color: var(--accent);
  background: transparent;
  background-clip: padding-box; /* harmless with box-shadow but fine to keep */
}

.btn.secondary:hover {
  background: rgba(96,165,250,.15);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: #fff; /* adds light text contrast on hover */
  transform: translateY(-1px);
  transition: all 0.15s ease;
}

/* --- Nav & utility outline buttons (use same look as .btn.secondary) --- */
#nav-connect,
#meeting-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 12px;            /* small sizing to match .btn.small */
  border-radius: 10px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--accent);  /* inset stroke avoids clipping */
  color: var(--accent);
  background: transparent;
  transition: all 0.15s ease;
}

/* Hover/focus: subtle fill + lift, accessible focus visibility */
#nav-connect:hover,
#meeting-options:hover,
#nav-connect:focus-visible,
#meeting-options:focus-visible {
  background: rgba(96,165,250,.15);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

/* Press feedback */
#nav-connect:active,
#meeting-options:active {
  transform: translateY(0);
  background: rgba(96,165,250,.10);
}

/* Make sure the nav container doesn't override the hover color */
.menu a#nav-connect:hover,
.menu a#nav-connect:focus-visible {
  color: #fff;
}




/* Ensure the button row centers them on baseline */
.cta {
  display: flex;
  align-items: center;               /* keep buttons vertically centered */
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ---------- Hero ---------- */
.hero{
  padding: 64px 0 36px;
  background:
    radial-gradient(1200px 400px at 50% -100px, rgba(96,165,250,.25), transparent 60%),
    var(--panel);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.hero-inner { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.hero-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.hero-logo-img { max-width: 340px; width: 100%; height: auto; display: block; }
.subhead { color: var(--muted); margin: 0 0 12px 0; }
.cta {
  display: flex;
  align-items: center;      /* ✅ vertically centers both buttons */
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


/* ---------- Kicker (small all-caps label) ---------- */
.kicker { .kicker { font-size: var(--step--1); } }

/* ---------- Story / alt section (soft contrast band) ---------- */
.section--alt {
  background: #0f172a08;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding: 4rem 0;
}

.section--alt .container-narrow {
  max-width: 68ch;
}

.section--alt h2 {
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.section--alt p,
.section--alt ul {
  margin-bottom: 1.25rem;
}

.section--alt ul {
  padding-left: 1.1rem;
  margin: 0.25rem 0 1rem 0;
}

/* --- blockquote --- */
.section--alt blockquote {
  font-style: italic;
  font-size: var(--step-1); /* or var(--step-1) if you want more emphasis */
  border-left: 3px solid rgba(15, 23, 42, 0.3);
  padding-left: 1rem;
  margin-top: 2rem;
  color: var(--text); /* ✅ readable against the light background */
  border-left: 3px solid var(--accent);
}

/* Brand quote base */
.quote-brand {
  position: relative;
  margin-top: var(--space-lg);
  padding-left: calc(var(--space-sm) + 0.25rem);
  line-height: 1.5;
  font-size: var(--step-0);
}

/* Subtle left bar */
.quote-brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.35;
}

/* Opening quote -- the little " in the top left */
.quote-brand.signature::after {
  content: "“";
  position: absolute;
  left: calc(-1 * var(--space-sm)); /* moves the mark right */
  top: -0.35em;                     /* raises/lowers the mark */
  font-size: 2.6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 90%, #000 10%); /* color mix*/
  opacity: 0.35; /* contrast */
  pointer-events: none;
}

/* Color modifiers */
.quote-brand.is-muted  { color: var(--muted); }
.quote-brand.is-accent { color: var(--accent); }



/* Dark-mode refinements */
@media (prefers-color-scheme: dark) {
  .section--alt {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .section--alt blockquote {
    border-left-color: rgba(255, 255, 255, 0.35);
    color: var(--text); /* uses your light-mode token automatically */
  }
}

/* Divider after Story section */
#story {
  border-bottom: 1px solid var(--border) !important;
}


/* ---------- "Why GraspingAI" section ---------- */
#why.section--center { text-align: center; }

#why.section--center ul {
  list-style: none;
  margin: 1.25rem auto;
  padding-left: 0;      /* keep 0; we pad the li instead */
  text-align: left;
  max-width: 68ch;
  line-height: 1.30; /* ← controls spacing b/w lines within each bullet */
}

#why.section--center li {
  position: relative;    /* <-- anchor for ::before */
  padding-left: 0.75rem; /* space for the vertical line */
  margin-bottom: 0.75rem;
}

#why.section--center li strong {
  display: inline-block;
  margin-bottom: 0.15rem;
}

#why.section--center li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;      /* ← raises or lowers the top of the line */
  bottom: 0.3em;   /* ← extends or shortens the bottom of the line */
  width: 4px;       /* ← thickness of the line */
  background: var(--accent);
  opacity: 0.15;
  border-radius: 2px;
}



/* Services split */
.services-split h3 { margin-bottom: var(--space-sm); }

/* Cards for core services */
.card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.card h4 { margin: 0 0 6px 0; font-size: var(--step-1); line-height: 1.25; }
.card p  { margin: 0; color: var(--muted); }

/* Pills for specialized offerings */
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: transparent;
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.3;
}
@media (max-width: 900px){ .card h4 { font-size: var(--step-0); } }



/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.45; }

/* Base cell look */
th, td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}
tfoot td { color: var(--muted); }

/* Header divider: safe fallback + enhanced (where supported) */
thead th { border-bottom: 1px solid var(--border); } /* fallback */
@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  thead th { border-bottom-color: color-mix(in srgb, var(--border) 65%, #fff 35%); }
}

/* Engagement section: guarantee refined look */
#engagement table { border-collapse: collapse; }
#engagement th, #engagement td {
  border: 0;
  border-bottom: 1px solid var(--border);
}

.engagement-models {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: var(--step--1);
}

.engagement-models th,
.engagement-models td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.engagement-models th {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.engagement-models td strong {
  font-weight: 600;
  color: var(--text);
}

/* subtle styling for last column */
.engagement-models td:last-child {
  white-space: nowrap;
  color: var(--accent);
  font-weight: 500;
}

/* ---------- Footer ---------- */
.site-footer{
  padding: 28px 0; color: var(--muted); text-align: center;
  border-top: 1px solid var(--border); background: var(--panel);
}

/* Turn off auto-hyphenation sitewide */
p, li, blockquote {
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  word-break: normal;         /* avoid aggressive breaking */
  overflow-wrap: break-word;  /* still wrap long URLs nicely */
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 900px){
  .grid.two { grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .menu { display: none; }
  .menu-toggle { display: block; }
  .brand-text { display: inline; }
  .brand-logo { height: 24px; }
  .hero-logo-img { max-width: 260px; }

  /* Tighten hero spacing if needed */
  .hero {
    padding: 4rem 1rem;
  }
  /* Remove fixed h1 override — use clamp scale instead */
  /* h1 font-size now follows var(--step-4) fluidly */
}

/* === High-contrast quotes for Story & Who sections === */

/* 1) Base polish for quote-brand: small card feel (keeps your left bar + opening quote) */
.quote-brand {
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
  color: var(--ink);
  border-radius: 8px;
  padding: 0.9rem 1rem 0.9rem calc(var(--space-sm) + 0.75rem); /* extra right padding */
}

/* Ensure the left bar spans the full quote height */
.quote-brand::before {
  top: 0.25em;
  bottom: 0.25em;
  opacity: 0.35; /* keep your subtle brand look */
}

/* 2) Story band: slightly stronger so it stands out against the lighter alt background */
.section--alt .quote-brand {
  background: color-mix(in srgb, var(--accent) 26%, var(--panel) 74%);
  color: var(--ink);
}

/* 3) “Strong” variant you can opt into anywhere (max pop, reversed text) */
.quote-brand.is-strong {
  background: color-mix(in srgb, var(--accent) 70%, var(--bg) 30%);
  color: var(--bg);
}
.quote-brand.is-strong::before {
  background: color-mix(in srgb, var(--accent) 90%, #000 10%);
  opacity: 0.6;
}

/* Horizontal scroll for wide tables on small screens */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}

.table-scroll table {
  min-width: 720px; /* ensures all 4 columns fit; adjust if needed */
  border-collapse: collapse;
}

/* Optional: subtle hint there is more off-screen */
.table-scroll {
  background:
    linear-gradient(to right, var(--bg) 30%, transparent 30%) left/12px 100% no-repeat,
    linear-gradient(to left, var(--bg) 30%, transparent 30%) right/12px 100% no-repeat;
}
.table-scroll::-webkit-scrollbar { height: 8px; }                /* optional, style scrollbar */
.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }