/* ============================================================================
   HResolved — site stylesheet (shared across all pages)

   Self-hosted fonts, no third-party requests. Fonts imported below are the
   OFL-licensed woff2 files in /fonts. See NOTES.md for WHY the fonts are
   self-hosted (privacy/GDPR — NOT performance). Do not swap in a CDN font.
   ========================================================================== */

@import "../fonts/fonts.css";

:root {
  --navy-900: #16294A;   /* darkest — dark sections, nav */
  --navy-800: #1E3A5F;   /* body background */
  --navy-700: #24466f;   /* raised surfaces */
  --teal:     #4ABCD4;   /* primary accent — buttons, links, highlights */
  --ivory:    #E4EDF3;   /* body text */
  --ivory-dim:#A9BDD1;   /* muted text */
  --white:    #FFFFFF;   /* headings */
  --status-active:  #34D399;  /* green */
  --status-review:  #FBBF24;  /* amber */
  --status-missing: #FB7185;  /* rose */
  --radius: 14px;
  --wrap: 1040px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--navy-800);
  color: var(--ivory);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--white);
  margin: 0;
  line-height: 1.15;
}
a { color: var(--teal); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
section.dark { background: var(--navy-900); }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); display: inline-block; margin-bottom: 18px;
}
.eyebrow.center { display: block; text-align: center; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
nav.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22,41,74,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* The logo and the five links CANNOT share one row on a phone: they need 437px, and a 375px screen offers
   327px after padding (390 -> short by 95, 430 -> short by 55). `space-between` responds by giving up all
   slack, so the logo and "Home" ended up touching (Selena, 2026-08-28). Two declarations fix it without a
   new breakpoint and without a JS menu: the column-gap is the floor that stops them ever touching, and
   flex-wrap lets the links drop to their own row when even that floor cannot be honoured — which is
   exactly when it is needed, and never above ~600px where the row fits with room to spare. */
nav.site .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 18px; padding-bottom: 18px; }
.logo-wrap { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-mark { height: 28px; width: auto; display: block; }
.logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; color: var(--white); letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.nav-links a { color: var(--ivory); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--teal); }

/* ── Menu button (phones only) ────────────────────────────────────────────────
   Hidden by default and revealed ONLY under the breakpoint AND only when JS is
   running (`html.has-js`, set by site.js). That ordering is the point: with JS
   off, the button never appears and the links stay visible as a wrapped second
   row — a menu you cannot open would be worse than no menu at all. */
.nav-toggle { display: none; background: none; border: 0; padding: 8px; margin: -8px; cursor: pointer; color: var(--ivory); }
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
                   transition: transform 0.25s ease, opacity 0.2s ease; }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle:hover { color: var(--teal); }
.nav-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
/* open = the three bars fold into an X, so the control shows its own state */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 15px; text-decoration: none; padding: 12px 26px;
  border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--teal); color: var(--navy-900); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(74,188,212,0.3); }
.btn-ghost { background: transparent; color: var(--ivory); border-color: rgba(228,237,243,0.35); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-sm { padding: 9px 20px; font-size: 14px; }

/* ── Page-title hero (inner pages) ───────────────────────────────────────── */
/* The 96/48 asymmetry is DELIBERATE where the hero carries a .sub/.lede: the tighter bottom pulls the
   subtitle toward the content below. With an h1 ALONE there is nothing to pull, so the same padding just
   reads as the title sitting low in its band — hence `.title-only`, which balances it (Selena,
   2026-08-28). Scoped rather than global so approach/solutions keep the intended tighter bottom. */
.page-hero { padding: 96px 0 48px; text-align: center; }
.page-hero.title-only { padding: 96px 0; }
.page-hero h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.02em; }
.page-hero .sub { max-width: 620px; margin: 20px auto 0; font-size: clamp(18px, 2.4vw, 22px); color: var(--ivory); font-weight: 500; }
.page-hero .lede { max-width: 620px; margin: 14px auto 0; font-size: 16px; color: var(--ivory-dim); }

/* ── Home hero (two-column) ──────────────────────────────────────────────── */
.hero { padding: 96px 0; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.hero h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.02em; }
.hero .sub { margin: 22px 0 0; font-size: 18px; color: var(--ivory-dim); max-width: 420px; }
.hero .hero-ctas { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-side h2 { font-size: 20px; margin-bottom: 14px; }
.hero-side p { font-size: 15px; color: var(--ivory-dim); margin: 0 0 14px; }
.checklist { list-style: none; margin: 18px 0 0; padding: 0; }
.checklist li { font-size: 14.5px; color: var(--ivory); padding-left: 26px; position: relative; margin-bottom: 10px; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

/* ── Section headings ────────────────────────────────────────────────────── */
h2.section-title { font-size: clamp(26px, 3.4vw, 34px); text-align: center; margin: 0 auto; max-width: 640px; }
.section-intro { text-align: center; max-width: 640px; margin: 16px auto 0; color: var(--ivory-dim); font-size: 16px; }

/* ── Card grids (services, intro cards) ──────────────────────────────────── */
.card-grid { display: grid; gap: 24px; margin-top: 52px; }
.card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 28px;
}
.card .icon-badge {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(74,188,212,0.12); border: 1px solid rgba(74,188,212,0.28);
  display: inline-flex; align-items: center; justify-content: center; color: var(--teal);
  margin-bottom: 16px;
}
.card .icon-badge svg { width: 20px; height: 20px; }
.card .num { font-family: 'IBM Plex Mono', monospace; color: var(--ivory-dim); font-size: 13px; margin-bottom: 6px; }
.card h3 { font-size: 18px; margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--ivory-dim); margin: 0; }

/* ── Product spotlight + mock panel (home) ───────────────────────────────── */
.spotlight { background: var(--navy-900); border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.06); padding: 44px; }
.spotlight-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.spotlight h2 { font-size: 28px; margin-bottom: 6px; }
.spotlight .tagline { color: var(--ivory-dim); font-size: 15px; margin: 0 0 18px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--teal); background: rgba(74,188,212,0.08); border: 1px solid rgba(74,188,212,0.28); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.spotlight .footnote { font-size: 12.5px; color: var(--ivory-dim); margin-top: 18px; }

.mock-panel { background: var(--navy-800); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 26px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }
.mock-score { font-family: 'Space Grotesk', sans-serif; font-size: 40px; color: var(--white); font-weight: 700; }
.mock-score span { font-size: 20px; color: var(--ivory-dim); }
.mock-score-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ivory-dim); letter-spacing: 0.06em; }
.mock-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 14px 0 22px; }
.mock-bar-fill { height: 100%; width: 72%; background: linear-gradient(90deg, var(--teal), var(--status-active)); }
.mock-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.mock-row-name { font-size: 14px; color: var(--ivory); }
.pill { font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.pill-active { background: rgba(52,211,153,0.15); color: var(--status-active); }
.pill-review { background: rgba(251,191,36,0.15); color: var(--status-review); }
.pill-missing { background: rgba(251,113,133,0.15); color: var(--status-missing); }

/* ── Testimonials ────────────────────────────────────────────────────────── */
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 52px; }
.testimonial { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 32px; text-align: center; }
.testimonial .stars { color: var(--teal); letter-spacing: 3px; font-size: 15px; }
.testimonial blockquote { margin: 16px 0 20px; font-size: 15px; color: var(--ivory); line-height: 1.7; }
.testimonial .attribution { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ivory-dim); }

/* ── Process steps (approach) ────────────────────────────────────────────── */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 56px auto 0; max-width: 900px; position: relative; }
.process-step { text-align: center; position: relative; }
.process-step .dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--teal); color: var(--teal); font-family: 'Space Grotesk', sans-serif; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; background: var(--navy-900); position: relative; z-index: 2; }
.process-step .line { position: absolute; top: 21px; left: -50%; width: 100%; height: 2px; background: rgba(74,188,212,0.3); z-index: 1; }
.process-step:first-child .line { display: none; }
.process-step h3 { font-size: 18px; margin: 18px 0 12px; }
.process-step p { font-size: 14px; color: var(--ivory-dim); margin: 0; }

/* ── Numbered feature list (approach "what sets us apart") ────────────────── */
.feature-list { max-width: 900px; margin: 52px auto 0; }
.feature-item { display: flex; gap: 22px; padding: 30px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.feature-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.feature-item .icon-badge { flex-shrink: 0; margin: 0; }
.feature-item .num { font-family: 'IBM Plex Mono', monospace; color: var(--teal); font-size: 12px; margin-bottom: 4px; }
.feature-item h3 { font-size: 19px; margin-bottom: 8px; }
.feature-item p { font-size: 15px; color: var(--ivory-dim); margin: 0; }

/* ── Solution blocks (solutions) ─────────────────────────────────────────── */
.solution { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; margin-top: 56px; }
.solution:nth-child(even) { grid-template-columns: 1.2fr 0.8fr; }   /* mirror: keep the illustration the SAME 0.8fr size as odd rows; text stays 1.2fr */
.solution:nth-child(even) .solution-media { order: 2; }
.solution-media { aspect-ratio: 1/1; border-radius: 8%; background: linear-gradient(160deg, rgba(74,188,212,0.10), rgba(22,41,74,0.4)); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: var(--teal); overflow: hidden; }   /* 8%: clips past the illustrations' black corner notch incl. its antialiased edge (worst-corner lum 132 = navy) on all four */
.solution-media svg { width: 42%; height: 42%; opacity: 0.85; }
.solution-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solution h3 { font-size: 24px; margin-bottom: 12px; }
.solution > div > p { font-size: 15.5px; color: var(--ivory-dim); }
.price-tag { display: inline-block; margin-top: 18px; border: 1px solid rgba(74,188,212,0.3); border-radius: 10px; padding: 12px 18px; }
.price-tag .label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ivory-dim); display: block; }
.price-tag .amount { font-family: 'Space Grotesk', sans-serif; font-size: 18px; color: var(--white); font-weight: 700; }

/* ── Support tiers (solutions) ───────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 24px; margin-top: 52px; align-items: stretch; }
.tier { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 30px; position: relative; }
.tier.featured { border-color: var(--teal); }
.tier .tier-flag { position: absolute; top: -12px; left: 24px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--navy-900); background: var(--teal); padding: 4px 10px; border-radius: 999px; }
.tier h3 { font-size: 20px; margin-bottom: 10px; }
.tier p { font-size: 14.5px; color: var(--ivory-dim); margin: 0; }

/* ── Team ────────────────────────────────────────────────────────────────── */
.vision { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center; max-width: 880px; margin: 0 auto; }
.vision-media { aspect-ratio: 3/2; border-radius: var(--radius); background: linear-gradient(160deg, rgba(74,188,212,0.12), rgba(22,41,74,0.5)); border: 1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color: var(--teal); overflow: hidden; }
.vision-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vision h2 { font-size: 24px; margin-bottom: 12px; }
.vision p { color: var(--ivory-dim); margin: 0; }
.member { max-width: 760px; margin: 56px auto 0; }
.member h3 { font-size: 22px; }
/* The credential strip must sit on ONE line within the 760px reading measure (Selena, 2026-08-28).
   Selena's is the long one: at 12.5px it needs 832px and wrapped to two lines, and because the font is
   MONOSPACE its width is deterministic (characters x advance) — no separator tightening gets 12.5px under
   760 (772px is the floor). So 12px plus 6px separator padding: 749px, ~11px clear. The 760px measure is
   NOT widened — it is the reading width for the bio prose below, and the strip must keep its left edge
   aligned with the name above it. Separators are spans rather than  |  so the spacing is a
   token here, not typed punctuation — and so the line may still break at a separator when it stacks. */
.member .credentials { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--teal); margin: 6px 0 18px; line-height: 1.6; }
.member .credentials .sep { padding: 0 6px; opacity: 0.55; }
.member .lead { font-style: italic; color: var(--ivory); font-size: 16px; margin: 0 0 16px; }
.member p { font-size: 15px; color: var(--ivory-dim); margin: 0 0 14px; }
.perspective { background: rgba(74,188,212,0.06); border: 1px solid rgba(74,188,212,0.22); border-radius: var(--radius); padding: 24px; margin-top: 20px; }
.perspective .eyebrow { margin-bottom: 10px; }
.perspective p { font-style: italic; color: var(--ivory); margin: 0; }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; max-width: 940px; margin: 0 auto; }
/* navy-700 is the RAISED-SURFACE token: the card must read as sitting ON the page, so it is LIGHTER than
   the navy-800 body. It was navy-900 (the darkest token) — darker than its own background, which made the
   card read as a hole punched in the page rather than a panel on it (Selena, 2026-08-28). */
.get-in-touch { background: var(--navy-700); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 36px; }
.get-in-touch h2 { font-size: 22px; margin-bottom: 24px; }
.gi-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--teal); text-transform: uppercase; margin-bottom: 6px; }
.gi-block { margin-bottom: 22px; }
.gi-block a { color: var(--ivory); text-decoration: none; }
.gi-block a:hover { color: var(--teal); }
.gi-block p { margin: 0; color: var(--ivory); font-size: 15px; }
.social-btn { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; background: var(--teal); color: var(--navy-900); align-items: center; justify-content: center; }
.social-btn svg { width: 20px; height: 20px; }
/* The two column headings are PEERS and must read as one row: same size, same baseline. The card's 36px
   padding pushes "Get in Touch" down, so the book column takes a matching top offset — otherwise the
   right-hand heading floats above its neighbour (Selena, 2026-08-28). Reset when the grid stacks. */
.book { padding-top: 36px; }
.book h2 { font-size: 22px; margin-bottom: 10px; }
.book .lede { color: var(--ivory-dim); font-size: 16px; margin: 0 0 26px; }

/* ── CTA band + footer ───────────────────────────────────────────────────── */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 30px; }
footer.site { padding: 36px 0; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; }
footer.site p { margin: 0; font-size: 13.5px; color: var(--ivory-dim); }

/* ── Reveal-on-scroll + motion ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* ── Responsive — single 760px breakpoint ────────────────────────────────── */
@media (max-width: 760px) {
  section { padding: 64px 0; }
  .hero { padding: 56px 0; }
  .hero-grid, .spotlight-grid, .vision, .contact-grid, .solution { grid-template-columns: 1fr; gap: 32px; }
  .book { padding-top: 0; }   /* the heading-alignment offset is a TWO-COLUMN concern; stacked it is a gap */
  .solution:nth-child(even) .solution-media { order: 0; }
  .solution:nth-child(even) { grid-template-columns: 1fr; }
  .vision-media { max-width: 300px; width: 100%; justify-self: center; }   /* don't let the stacked team photo go full-width */
  .card-grid.cols-2, .card-grid.cols-3, .testimonial-grid, .process, .tiers { grid-template-columns: 1fr; }
  .process-step .line { display: none; }
  /* Phones: the logo + five links need 437px and a 375px screen offers 327px, so the row cannot hold
     them (see nav.site .wrap). With JS the links collapse behind the menu button; the `.has-js` guard
     means that without JS they simply stay on the wrapped second row instead of becoming unreachable. */
  .has-js .nav-toggle { display: block; }
  .has-js .nav-links { display: none; flex-direction: column; align-items: stretch; gap: 2px; }
  /* The open menu OVERLAYS the page instead of expanding the bar and pushing the page down (Selena,
     2026-08-28). It is taken out of flow and anchored to nav.site — which is already `position: sticky`,
     so it is a positioned ancestor and no extra positioning is needed on the bar itself. Because it now
     floats over live content it must paint its OWN background: the bar's own translucent fill stops at
     the bar, so without this the page text would read straight through the menu. */
  .has-js .nav-links.open {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(22, 41, 74, 0.98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 6px 24px 12px;
  }
  /* Full-width rows: the tap target is the whole line, not just the word (24px inset matches .wrap). */
  .has-js .nav-links a { font-size: 15px; padding: 11px 0; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13px; }
}