/* ================================================================
   SHARED FOUNDATION — used by every feature
   Design tokens, resets, and small utility classes that more than
   one feature depends on. If a style is only used by one feature
   (the hero, the quote form, etc.), it belongs in that feature's
   own CSS file instead of here — see README.md for the full map.
   ----------------------------------------------------------------
   BRAND REFERENCE
   (Source: internal brand brief. Keep this comment block in sync
   if the brand colors, type scale, or UI patterns ever change.)

   COLORS — Light mode
     Primary Blue   #0980B0  — buttons, links, white text 4.5:1
     Deep Blue      #0B4F73  — links/labels on white, 6:1
     Seafoam        #098276  — CTA/accent, white text 4.7:1
     Deep Water     #1E2F52  — dark accent, badges/cross-tier notes
     Cyan           #17ABC7  — light accent tint, badges
     Teal           #1293AB  — Tier 4 accent, white text
     Error red      #C0392B  — form validation only
     Off-white bg   #F7F9FB  — page background
     Surface white  #FFFFFF  — cards/surfaces
     Border         #E3E8ED  — card/table borders
     Text primary   #262B33
     Text muted     #5B6470

   COLORS — Dark mode
     Page           #12181F
     Surface        #1C232C
     Border         #2A323C
     Text primary   #F2F5F7
     Text muted     #9AA5B1
     Error red      #FF8A75  — form validation only

   TYPOGRAPHY
     Variable system font stack (-apple-system / Segoe UI Variable /
     system-ui) — no external font requests.
     Weight is a deliberate 4-stop scale, not flat bold/normal:
       430 body copy · 560 labels & controls · 650 card headings
       · 780 display headings (h1 / h2)
     Heading and lede sizes scale fluidly via clamp() instead of
     jumping at breakpoints.

   UI PATTERNS
     - 18–20px card corner radius, 10px control radius, pill badges
     - Cards sit flat on the page (border only). Shadow is reserved
       for things that actually float above content: the scrolled
       top bar, the open mobile menu, the chat panel.
     - Hero: color gradient + translucent wave watermark — the one
       deliberately bold moment on the page. Everything else stays
       quiet so it reads clearly.
     - Reusable cards (tier, work) use container queries so they
       adapt to their own width, not just the viewport.
     - Spacing/position use logical properties (margin-block,
       padding-inline, inset-inline-start, border-inline-start …)
       so layout mirrors correctly in RTL contexts.
     - Shell chrome (top bar + footer) inverts relative to the page:
       dark navy with white text/logo in day mode, flipping to a
       light bar with dark text in night mode. The header's icon
       buttons invert the same way (white square with a colored
       icon ↔ colored square with a white icon), so the mode switch
       reads as one coherent swap, not several unrelated toggles.

   VOICE & TONE
     Approachable, precise, warm, resourceful, grounded.
     Plain language, active voice — no jargon, no overpromising.
   ================================================================ */


/* ---------- Design tokens ----------
   Every color, radius, and shadow the site uses is a variable here.
   Change a value once and it updates everywhere. */
:root {
  --color-primary: #0980B0;
  --color-primary-deep: #0B4F73;
  /* Deep-blue accent text (links, chip labels, eyebrow labels) reads
     fine on the light page but goes near-invisible on the dark one —
     this token exists so those spots can flip independently of
     --color-primary-deep, which also anchors backgrounds/gradients
     that shouldn't change. */
  --color-accent-text: var(--color-primary-deep);
  --color-seafoam: #098276;
  --color-deepwater: #1E2F52;
  --color-cyan: #17ABC7;
  --color-teal: #1293AB;
  --color-error: #C0392B;

  /* Accent gradient: top-bar rule + home-page section dividers. */
  --gradient-divider: linear-gradient(to right, var(--color-cyan), var(--color-teal), var(--color-primary), var(--color-seafoam), var(--color-primary-deep), var(--color-deepwater));

  --bg-page: #F7F9FB;
  --bg-surface: #FFFFFF;
  --border: #E3E8ED;
  --text-primary: #262B33;
  --text-muted: #5B6470;

  /* Elevation: three tiers, used for what they mean, not decoration.
     control  — transient hover feedback on buttons/toggles
     overlay  — bars/menus that sit above content (scrolled nav, open mobile menu)
     elevated — floating panels (chat window) */
  --shadow-control: 0 6px 16px rgba(15, 23, 32, 0.14);
  --shadow-overlay: 0 8px 24px rgba(15, 23, 32, 0.16);
  --shadow-elevated: 0 20px 48px rgba(15, 23, 32, 0.26);

  --radius-card: 18px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Shell chrome (top bar + footer) follows the same day/night flip
     as the rest of the page: white bar with dark text/icons by day,
     dark navy bar with white text/icons by night. */
  --shell-bg: #FFFFFF;
  --shell-text: #262B33;
  --shell-border: #E3E8ED;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --weight-body: 430;
  --weight-label: 560;
  --weight-heading: 650;
  --weight-display: 780;

  --section-padding: clamp(40px, 4vw + 20px, 64px);
  --topbar-height: 64px;
}

[data-theme="dark"] {
  --bg-page: #12181F;
  --bg-surface: #1C232C;
  --border: #2A323C;
  --text-primary: #F2F5F7;
  --text-muted: #9AA5B1;
  --color-error: #FF8A75;
  --color-accent-text: var(--color-cyan);

  /* Night mode: shell goes dark navy with white text, the same
     direction the rest of the page flips. */
  --shell-bg: var(--color-deepwater);
  --shell-text: #FFFFFF;
  --shell-border: rgba(255, 255, 255, 0.16);
}

/* ---------- Tier accent colors ----------
   Tier cards AND work cards color-code by tier, so both features
   share this one mapping instead of each defining it separately.
   To change a tier's color, edit it here — it updates both places. */
.tier-color-1 { --tier-color: var(--color-primary);      --thumb-color: var(--color-primary); }
.tier-color-2 { --tier-color: var(--color-seafoam);       --thumb-color: var(--color-seafoam); }
.tier-color-3 { --tier-color: var(--color-primary-deep);  --thumb-color: var(--color-primary-deep); }
.tier-color-4 { --tier-color: var(--color-teal);           --thumb-color: var(--color-teal); }


/* ---------- Section dividers ----------
   Same accent gradient as the top-bar rule, on the boundary between
   every top-level section on the home page — so section breaks read
   as one consistent system instead of each feature inventing its own
   border color. #view-home gives this an ID in the selector, which
   out-specifies the plain --border lines .section-alt/.about set
   themselves, so it always wins the top edge; their border-block-end
   is cleared here too, so each boundary shows the gradient exactly
   once instead of gradient-on-top-plus-gray-on-bottom. */
#view-home > section + section {
  border-block-start: 2px solid transparent;
  border-image: var(--gradient-divider) 1;
  border-block-end: none;
}


/* ---------- Brand logo swap ----------
   Shared by the header and footer, since both sit on the same
   --shell-bg: whichever logo variant reads against that background is
   the one that should show. Day mode's shell is white, so the colored
   logo shows; night mode's shell is dark navy, so the white logo shows. */
.brand-logo-light { display: block; }
.brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: block; }


/* ---------- Reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-family);
  font-weight: var(--weight-body);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.55;
  transition: background 0.2s ease, color 0.2s ease;
}

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

a { color: var(--color-accent-text); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* ---------- Layout containers ---------- */
.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 24px;
}
.container.narrow { max-width: 640px; }

.section { padding-block: var(--section-padding); }
.section-alt { background: var(--bg-surface); border-block: 1px solid var(--border); }


/* ---------- Typography ---------- */
h1, h2, h3 { line-height: 1.2; }
h1 { font-weight: var(--weight-display); font-size: clamp(2rem, 1.6rem + 2vw, 2.6rem); margin-block-end: 12px; }
h2 { font-weight: var(--weight-display); }
h2.section-title { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); margin-block-end: 8px; }
h3 { font-weight: var(--weight-heading); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); margin-block-end: 8px; }

/* Browsers default <strong>/<b> to a "bolder" relative weight, which
   isn't one of the site's 4 deliberate stops — pin it to one so
   inline emphasis is consistent everywhere it appears, not just in
   the components that happen to set their own override. */
strong, b { font-weight: var(--weight-heading); }

.section-lede {
  color: var(--text-muted);
  max-width: 640px;
  margin-block-end: 32px;
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.08rem);
}

.subhead { margin-block: 32px 12px; font-size: 1.2rem; font-weight: var(--weight-heading); }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-pill);
  padding-block: 10px;
  padding-inline: 20px;
  font-size: 1rem;
  font-weight: var(--weight-label);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: 0.92; }

.btn-primary { background: var(--color-seafoam); color: #fff; }
.btn-primary:hover { box-shadow: var(--shadow-control); }

.btn-light { background: #fff; color: var(--color-primary-deep); }
.btn-light:hover { box-shadow: var(--shadow-control); }

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.btn[disabled] {
  opacity: 0.7;
  cursor: default;
  transform: none;
}


/* ---------- Accessibility utility ---------- */
/* Hides an element visually but keeps it readable by screen readers.
   Used for form labels, the honeypot spam field, etc. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Off-screen until keyboard-focused, then drops into view above
   everything else — the standard "Skip to content" pattern for
   keyboard users who don't want to tab through the whole top nav
   on every page load. */
.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: -60px;
  background: var(--color-primary-deep);
  color: #fff;
  padding-block: 10px;
  padding-inline: 16px;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-label);
  z-index: 300;
  transition: inset-block-start 0.15s ease;
}
.skip-link:focus {
  inset-block-start: 12px;
}


/* ---------- Scroll reveal ----------
   Cards fade/slide in as they enter view. Shared by the tier,
   process, and work card grids (see shared/scroll-reveal.js).
   The stagger delays are keyed to card position (1st, 2nd, 3rd...)
   with nth-child instead of inline styles, so no card markup needs
   a style attribute just to stagger its animation. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(1) { --delay: 0s; }
.reveal:nth-child(2) { --delay: 0.08s; }
.reveal:nth-child(3) { --delay: 0.16s; }
.reveal:nth-child(4) { --delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}