@import url('glass-primitives.css');
/* =====================================================
   MARKETSWAVE — Design System
   Locked palette from site map specification
===================================================== */
:root {
  /* Core palette (locked) */
  --bg: #F7F6F3;                  /* Soft Hospital White — main page background */
  --surface: #EDE8E1;             /* Warm Stone Cream — cards, soft sections */
  --border: #E5E2DC;              /* Soft border */
  --border-strong: #D4CFC7;
  --text: #1A1C1E;                /* Deep Graphite — headlines, primary text */
  --text-muted: #6B7178;          /* Precision Grey — secondary text, labels */
  --primary: #1B3A4B;             /* Institutional Navy — buttons, key highlights, links */
  --primary-dark: #122A38;        /* Darker navy for hover / footer */
  --primary-light: #2A4F63;       /* Lighter navy */
  --white: #FFFFFF;
  --accent: #1B3A4B;              /* Same as primary for consistency with locked palette */

  /* Homepage Visual Redesign — Stage 1 (2026-09-05): a deliberate, SCOPED palette
     expansion — same category as risk-management.html's own gold/mahogany + deep-green
     accent moment, not a change to the locked navy/cream system above. Originally scoped
     to ONLY the .blob and .gradient-text utilities below; extended (Get Access Modal
     Redesign, 2026-09-06) to one more real, measured use — --accent-teal-soft as accent
     TEXT on the new dark navy value-proposition panel inside the Get Access modal. That
     panel's own --primary/--primary-dark gradient background made --accent-teal (the
     "deep" stop below) fail contrast there — 2.47:1 to 3.07:1, computed directly, well
     under WCAG's 3:1 floor even for large text — while --accent-teal-soft measures 6.83:1
     to 8.47:1 against the same background, comfortably passing. Still never used as a flat
     UI background, never on buttons/cards, never as body text on the light --bg/--surface
     tokens. See CLAUDE.md's Tech Stack entry for the full writeup. */
  --accent-teal: #16815F;         /* deep teal — gradient-text stop, eyebrow badge text/dot */
  --accent-teal-soft: #7FD4B4;    /* soft pastel teal — blob backgrounds, and (2026-09-06)
                                      accent text on the Get Access modal's dark value panel */
  --accent-gold-soft: #F0C878;    /* soft pastel gold — blob backgrounds only. NOTE: the
                                      DEEP gold used in gradient-text is NOT a new color —
                                      it reuses the already-locked #C8860A risk-meter/
                                      service-tag gold (see styles.css's own comment near
                                      that exception), deliberately not duplicated as a
                                      second token here. */

  /* Layout & effects */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(27, 58, 75, 0.07);
  --shadow-hover: 0 12px 40px rgba(27, 58, 75, 0.12);
  --container: 1180px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =====================================================
   2. RESET & BASE
===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.text-center {
  text-align: center;
}

/* =====================================================
   3. BUTTONS
===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.btn-sm {
  padding: 9px 18px;
  font-size: 0.88rem;
}

.btn-full {
  width: 100%;
}

.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-outline {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: white;
}

.btn-white {
  background: white;
  color: var(--primary);
}
.btn-white:hover {
  background: #f0f4f8;
}

.btn-ghost {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.35);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: white;
}

/* =====================================================
   4. HEADER + NAVIGATION
===================================================== */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.logo span {
  font-weight: 800;
  color: var(--primary);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
}
.main-nav a:hover {
  color: var(--primary);
}
.main-nav a.active {
  color: var(--primary);
  font-weight: 600;
}
.main-nav a.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

/* Keep Get Access + Contact the same width */
.header-actions .btn {
  min-width: 118px;
}

/* Mobile nav toggle (simple) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: 0.2s;
}

/* =====================================================
   4A. SHARED VISUAL PRIMITIVES — Homepage Visual Redesign, Stage 1-2 (2026-09-05)
   .glass / .glass-subtle / .gradient-text / .blob(+modifiers) / .grid-overlay /
   .blob-field now live in glass-primitives.css (imported at the very top of this
   file) — extracted there so the Tailwind-based dashboard family (which never loads
   this file — see CLAUDE.md's Tech Stack boundary) can reuse the exact same rules
   instead of a forked second copy (Client Dashboard Visual Treatment, 2026-09-06).
   See that file's own header for the full rationale.
===================================================== */

/* =====================================================
   5. HERO — Homepage Visual Redesign, Stage 1 (2026-09-05)
   Liquid-glass, light background — replaces the previous dark navy-gradient/
   photographic hero entirely (see the removed second .hero rule this used to be
   overridden by, further down this file, now deleted along with it). Built against the
   approved "final, liquid glass, light background" reference preview. Reuses the four
   shared primitives above: .grid-overlay, .blob, .glass (eyebrow badge + secondary
   button), .gradient-text (second headline line).
===================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FDFCFA 0%, var(--bg) 100%);
  color: var(--text);
  padding: 140px 0 100px;
  text-align: center;
}

/* Position classes for this section's own 5 blobs — 3 main (teal/gold/soft-blue) + 2
   smaller accent blobs (rose/violet), matching the reference preview's exact layout.
   Position is section-specific by design (see the shared .blob comment above); size and
   color come from the shared modifiers applied alongside these in the HTML. */
.hero .blob-1 { top: -140px; left: -100px; opacity: 0.5; }
.hero .blob-2 { bottom: -180px; right: -100px; opacity: 0.55; }
.hero .blob-3 { top: 25%; right: 10%; opacity: 0.45; }
.hero .blob-4 { top: 12%; left: 18%; opacity: 0.4; }
.hero .blob-5 { bottom: 18%; left: 8%; opacity: 0.4; }

.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -0.9px;
  color: var(--primary);
}

.hero-lead {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 42px;
  color: var(--text-muted);
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-btn-primary {
  padding: 15px 30px;
  border-radius: 12px;
  font-size: 0.95rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  box-shadow: 0 14px 28px rgba(27,58,75,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
}
.hero-btn-primary:hover {
  box-shadow: 0 18px 34px rgba(27,58,75,0.34), inset 0 1px 0 rgba(255,255,255,0.15);
}

.hero-btn-secondary {
  padding: 14px 29px;
  border-radius: 12px;
  font-size: 0.95rem;
  color: var(--primary);
}
.hero-btn-secondary span {
  position: relative;
  z-index: 1;
}
.hero-btn-secondary:hover {
  filter: brightness(1.03);
}

/* =====================================================
   6. STATS BAR — Homepage Visual Redesign, Stage 1 (2026-09-05)
   Converted from 4 plain text stats into 4 real liquid-glass stat cards, reusing the
   same .glass/.grid-overlay/.blob primitives as the Hero above, at a deliberately
   lighter touch (2 small blobs, not 5) so the card itself stays the visual focus. The
   .stat/.value/.label class names and their text-node structure are UNCHANGED — the
   real count-up animation (home-motion.js's animateStatCounters(), which queries
   `.stats-bar .stat .value` and regex-parses each one's numeric prefix/value/suffix)
   keeps working with zero changes to that script, confirmed by direct testing.
===================================================== */
.stats-bar {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: 60px 0 80px;
}

.stats-bar .blob-1 { top: -80px; left: 10%; opacity: 0.35; }
.stats-bar .blob-2 { bottom: -100px; right: 12%; opacity: 0.4; }

.stats-bar .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat {
  position: relative;
  text-align: left;
  border-radius: 18px;
  padding: 22px 26px;
}

.stat-icon {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(27,58,75,0.1), rgba(27,58,75,0.04));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat .label {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
  font-weight: 500;
}

.stat .value {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 3px;
}

.stat .trend {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0.75rem;
  color: var(--accent-teal);
  font-weight: 600;
  margin-top: 6px;
}

/* =====================================================
   7. SECTION SHARED
===================================================== */
.section {
  padding: 90px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header h2 {
  font-size: 2.15rem;
  margin-bottom: 14px;
  color: var(--primary);
  letter-spacing: -0.4px;
}

.section-header p {
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.08rem;
}

.section-alt {
  background: var(--surface);
}

/* =====================================================
   8. ACCOUNT TYPES (Home)
===================================================== */
.account-types {
  padding: 80px 0;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): background/border/box-shadow moved to
   .glass (applied in the HTML alongside this class); the hover lift is kept but its
   shadow is redefined below to something that reads correctly on top of .glass's own
   translucent surface, rather than var(--shadow-hover), which was tuned for an opaque
   white card. */
.account-card {
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.account-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -14px rgba(27,58,75,0.24), inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 1px rgba(27,58,75,0.06);
}

.account-card .icon {
  width: 56px;
  height: 56px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  font-size: 1.4rem;
  color: var(--primary);
  font-weight: 700;
}

.account-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--primary);
}

.account-card p {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* =====================================================
   9. SERVICES
===================================================== */
.services {
  padding: 90px 0 80px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): background/border/box-shadow moved to
   .glass (applied in the HTML alongside this class, on every .service-card everywhere it
   appears — Core Services on index.html, and the Blog/Help Center teaser cards on
   resources.html, since all three share this one class); hover shadow redefined for a
   translucent surface. */
.service-card {
  border-radius: var(--radius);
  padding: 40px 34px;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 44px -14px rgba(27,58,75,0.24), inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 1px rgba(27,58,75,0.06);
}

.service-card .icon {
  width: 56px;
  height: 56px;
  background: var(--surface);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--primary);
}

.service-card h3 {
  font-size: 1.35rem;
  margin-bottom: 16px;
  color: var(--primary);
}

.service-card p {
  color: var(--text-muted);
  font-size: 0.98rem;
  flex-grow: 1;
  margin-bottom: 28px;
  line-height: 1.65;
}

.service-card .benefits {
  margin-bottom: 28px;
}
.service-card .benefits li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 0.94rem;
  color: var(--text);
}
.service-card .benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--primary);
  border-radius: 50%;
}

/* Full-width scrolling service sections (services.html) — one full-width section per
   service, stacked vertically down the page in order, replacing the earlier card-grid
   and nav+single-detail-panel designs entirely. Each section carries its own locked
   anchor id directly (no JS panel-swapping — a normal scrolling/anchor-jump page). */
.services-full {
  padding: 12px 0 20px;
}

.service-section {
  padding: 64px 0;
}
.service-section + .service-section {
  border-top: 1px solid var(--border-strong);
}

/* Gold accent — a scoped exception to the navy/cream palette, same category as the
   Risk Meter's own .rm-* gold/mahogany accent (risk-management.html). Do not reuse
   #C8860A anywhere else on this page or site. */
.service-tag {
  display: block;
  color: #C8860A;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  margin-bottom: 12px;
}

.service-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.15rem;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 22px;
}

.service-copy {
  max-width: 760px;
  margin-bottom: 28px;
}
.service-intro {
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.service-secondary {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): background moved to .glass (applied in
   the HTML alongside this class). */
.service-stat {
  display: inline-block;
  border-radius: var(--radius);
  padding: 20px 28px;
  margin-bottom: 36px;
}

.service-stat-number {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 6px;
}

.service-stat-label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.service-stat-text {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}

.service-checklist {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.service-check-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.service-check-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.service-check-text {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  padding-top: 4px;
}
.service-check-text strong {
  color: var(--primary);
}

/* =====================================================
   10. STRATEGIES
===================================================== */
.strategies {
  padding: 90px 0;
}

.strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): background/border moved to .glass
   (applied in the HTML alongside this class); hover redefined as a shadow boost, since
   .glass's own border is no longer a plain color this rule could swap on :hover. */
.strategy-card {
  border-radius: var(--radius);
  padding: 36px 32px;
  transition: box-shadow 0.2s;
  height: 100%;
}
.strategy-card:hover {
  box-shadow: 0 20px 36px -12px rgba(27,58,75,0.2);
}

.strategy-card .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--primary);
  background: var(--surface);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.strategy-card h3 {
  font-size: 1.28rem;
  margin-bottom: 14px;
  color: var(--text);
}

.strategy-card p {
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

/* =====================================================
   11. HOW IT WORKS
===================================================== */
.how-it-works {
  padding: 90px 0;
  background: var(--surface);
}

.workflow {
  display: grid;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.workflow::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: var(--border-strong);
}

.workflow-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 28px;
  padding: 28px 0;
  position: relative;
}

.workflow-step .num {
  width: 56px;
  height: 56px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  z-index: 2;
  flex-shrink: 0;
}

.workflow-step h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: var(--primary);
}

.workflow-step p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* How it works table */
.workflow-table-wrap {
  margin-top: 70px;
  overflow-x: auto;
}

.workflow-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.workflow-table th {
  background: var(--primary);
  color: white;
  text-align: left;
  padding: 18px 24px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.workflow-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text);
  vertical-align: top;
}

.workflow-table tr:last-child td {
  border-bottom: none;
}

.workflow-table tr:nth-child(even) td {
  background: #FAF9F7;
}

/* =====================================================
   12. APPROACH / PHILOSOPHY
===================================================== */
.approach {
  padding: 90px 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.approach h2 {
  font-size: 2rem;
  margin-bottom: 22px;
  color: var(--primary);
}

.approach p {
  color: var(--text-muted);
  margin-bottom: 18px;
  font-size: 1.05rem;
}

.values-block {
  margin-top: 70px;
}

.values-label {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--primary);
  margin-bottom: 32px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): gains a real, subtle glass treatment
   (.glass-subtle, applied in the HTML) explicitly requested for this section — the
   border-top navy accent is deliberately KEPT alongside it (its own longhand
   border-top-* declarations, defined here, later in the cascade than .glass-subtle's own
   shorthand border, correctly win for that one side), so each item reads as a light glass
   card with the site's own established top-accent language, not a plain box. */
.value-item {
  border-top: 2px solid var(--primary);
  padding: 20px 18px 22px;
  border-radius: 0 8px 8px 0;
}

.value-item h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.value-item p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): background/border/border-radius moved
   to .glass (applied in the HTML alongside this class) — kept here only as a comment so
   it's clear why they're gone, rather than silently missing. */
.approach-visual {
  height: 360px;
  color: var(--text-muted);
  font-size: 1.05rem;
  border-radius: 20px;
}

.process-steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 32px;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.process-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.process-step-text h4 {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 2px;
}

.process-step-text p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.philosophy {
  background: var(--primary-dark);
  color: white;
  padding: 90px 0;
  text-align: center;
}

.philosophy h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  letter-spacing: -0.4px;
}

.philosophy p {
  max-width: 640px;
  margin: 0 auto 40px;
  opacity: 0.92;
  font-size: 1.12rem;
  line-height: 1.7;
}

/* ---- .philosophy-featured — Homepage Visual Redesign, Stage 2 (2026-09-05). Scoped to
   index.html's own Philosophy CTA ONLY, via this additional class alongside the shared
   .philosophy — .philosophy itself (background/color/padding above) is deliberately left
   completely untouched, since services.html and about.html each have their own closing
   CTA sharing that same base class, and neither was asked to change. Gives this one
   closing moment "similar visual weight to the Hero," per instruction: blobs behind a
   still-dark backdrop, plus a genuine light .glass panel wrapping the actual message. ----
   A real contrast decision, not an oversight: .glass's own recipe assumes a light
   backdrop and reads as a light, near-white surface — the section's own default white
   text (from .philosophy above) would be nearly unreadable sitting on top of it. Every
   text/button element inside .philosophy-panel therefore explicitly switches to the same
   dark-on-light pairing already proven throughout this project's own glass surfaces
   (Hero's eyebrow/stat cards): navy headline, muted-grey body copy, a real dark button —
   never white-on-light. */
.philosophy-featured {
  position: relative;
  overflow: hidden;
}

.philosophy-panel {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 48px;
  border-radius: 24px;
  /* A real contrast bug found via browser verification, not a cosmetic choice: .glass's
     own default background (55%/22% white) is tuned for sitting on a LIGHT Hero
     background, where even the more-transparent 22% corner still reads against a pale
     backdrop. This panel sits on a vivid, busy DARK background instead — at .glass's
     default opacity, the body paragraph (positioned over the gradient's more-transparent
     lower-right, per .glass's own 135deg direction) was measurably unreadable, muted-grey
     text nearly disappearing into the dark backdrop showing through. Overridden here to a
     substantially more opaque white gradient — still visibly translucent/glass at the
     edges and under the sheen highlight, but solid enough that text contrast no longer
     depends on what happens to be behind it. */
  background: linear-gradient(135deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 100%);
}
.philosophy-panel h2 {
  color: var(--primary);
}
.philosophy-panel p {
  color: var(--text);
  opacity: 1;
}

/* =====================================================
   13. ABOUT
===================================================== */
.about-hero {
  padding: 80px 0 60px;
  text-align: center;
}

.vision-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 70px;
}

/* Editorial treatment — deliberately not a card. Reuses the same top-rule accent
   already established by the homepage's Our Values section (.value-item), rather
   than a boxed/shadowed container. */
.vm-card {
  border-top: 2px solid var(--primary);
  padding-top: 22px;
}

.vm-card h3 {
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.vm-card p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Background & History narrative + company facts (about.html) */
.about-narrative p {
  margin-bottom: 16px;
}
.about-narrative p:last-child {
  margin-bottom: 0;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 40px;
  margin-top: 40px;
  text-align: left;
}

.fact {
  border-top: 2px solid var(--primary);
  padding-top: 12px;
}

.fact-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.fact-value {
  display: block;
  font-size: 0.97rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.5;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): background/border/box-shadow moved to
   .glass (applied in the HTML alongside this class); overflow:hidden was already here
   (needed to clip .photo's own square corners to the card's rounded ones) and is kept —
   redundant with .glass's own overflow:hidden, but harmless. */
.team-card {
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}

.team-card .photo {
  height: 220px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.team-card .body {
  padding: 24px 20px 28px;
}

.team-card h4 {
  font-size: 1.15rem;
  margin-bottom: 4px;
  color: var(--text);
}

.team-card .role {
  font-size: 0.88rem;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 12px;
}

.team-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* =====================================================
   14. LEGAL
===================================================== */
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 0 80px;
}

.legal-content h1 {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: 12px;
}

.legal-content .updated {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 40px;
}

.legal-content h2 {
  font-size: 1.35rem;
  color: var(--primary);
  margin: 40px 0 14px;
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 14px;
}

.legal-content ul {
  margin: 12px 0 20px 24px;
  list-style: disc;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.legal-nav a {
  padding: 10px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  transition: all 0.2s;
}
.legal-nav a:hover,
.legal-nav a.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* =====================================================
   15. FOOTER
===================================================== */
.site-footer {
  background: var(--primary-dark);
  color: #94a3b8;
  padding: 80px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer-brand .logo {
  color: white;
  margin-bottom: 18px;
  display: inline-block;
}

.footer-brand p {
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 290px;
}

.footer-col h4 {
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul a {
  font-size: 0.92rem;
  transition: color 0.2s;
}
.footer-col ul a:hover {
  color: white;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
}

.footer-legal a {
  color: #94a3b8;
  margin-left: 20px;
}
.footer-legal a:hover {
  color: white;
}

/* =====================================================
   16. PAGE HERO (inner pages)
===================================================== */
/* Client Dashboard Visual Treatment, Stage 3 (2026-09-06): a real, project-wide gap found
   during investigation, not previously flagged — this banner (shared across 7 inner pages:
   about, blog-press, contact, help-center, legal, resources, services) never received any
   glass treatment while every one of those pages' own content BELOW it did (Homepage Visual
   Redesign, Stage 2). Its own solid gradient (#1B3A4B -> #122A38) is near-identical to
   .glass-dark's own navy tones, making that the natural, zero-risk fit here — unlike the
   admin sidebar, no new variant was needed. background removed from this rule; `glass-dark
   blob-field` is added to the real `<section class="page-hero">` markup on all 7 pages
   instead, with `.blob-field`'s own position:relative + overflow:hidden hosting 1-2 blobs
   safely (this section has no scroll to protect, unlike a dashboard <main>, so the plain
   .blob-field marker applies directly with no workaround needed). */
.page-hero {
  color: white;
  padding: 70px 0 60px;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.page-hero p {
  font-size: 1.15rem;
  max-width: 620px;
  margin: 0 auto;
  opacity: 0.9;
  line-height: 1.65;
}

/* Bold sub-heading line between h1 and the descriptive paragraph — used only where a
   page hero needs a second, shorter title beneath the main h1 (about.html). */
.page-hero .subtitle {
  font-size: 1.3rem;
  font-weight: 700;
  opacity: 1;
  margin-bottom: 14px;
}

/* =====================================================
   16B. HOMEPAGE — PLATFORM PITCH / DIFFERENTIATORS
===================================================== */
.platform-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.platform-column-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--primary);
  padding-bottom: 14px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-strong);
}

.platform-item {
  margin-bottom: 28px;
}
.platform-item:last-child {
  margin-bottom: 0;
}

.platform-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.platform-item p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.diff-list {
  max-width: 900px;
  margin: 0 auto;
}

.diff-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid var(--border-strong);
}
.diff-row:last-child {
  border-bottom: 1px solid var(--border-strong);
}

.diff-num {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--border-strong);
  line-height: 1;
}

.diff-content h3 {
  font-size: 1.25rem;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 12px;
}

.diff-content p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* =====================================================
   16C. MOTION (index.html + services.html)
   [data-reveal]/[data-reveal-scale] only take effect once a page's own motion script
   (home-motion.js or services-motion.js) has added .js-motion to <html> — if JS never
   runs, or the browser lacks IntersectionObserver, or prefers-reduced-motion is set,
   that class is never added and every element here stays in its normal, fully-visible
   static state. No content is ever hidden waiting on JS that might not run.
===================================================== */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-motion [data-reveal-scale] {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.js-motion [data-reveal-scale].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Defense-in-depth: even if .js-motion were ever present, a reduced-motion
   preference always wins and shows everything immediately, no transition. */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion [data-reveal-scale] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Card icon hover response, paired with the existing .account-card/.service-card
   hover lift (transform/box-shadow transitions already defined on the cards
   themselves) — a subtle scale-up on the icon badge only. */
.account-card .icon,
.service-card .icon {
  transition: transform 0.2s ease;
}
.account-card:hover .icon,
.service-card:hover .icon {
  transform: scale(1.1);
}

/* =====================================================
   17. RESPONSIVE
===================================================== */
@media (max-width: 960px) {
  .main-nav {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .service-section {
    padding: 44px 0;
  }
  .service-title {
    font-size: 1.7rem;
  }
  .account-grid {
    grid-template-columns: 1fr;
  }
  .vision-mission {
    grid-template-columns: 1fr;
  }
  .facts-grid {
    grid-template-columns: 1fr;
  }
  .platform-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .diff-row {
    grid-template-columns: 64px 1fr;
    gap: 20px;
    padding: 32px 0;
  }
  .diff-num {
    font-size: 2rem;
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .stats-bar .container {
    grid-template-columns: 1fr 1fr;
  }
  .two-col {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero {
    padding: 70px 0 60px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .workflow::before {
    left: 22px;
  }
  .workflow-step {
    grid-template-columns: 48px 1fr;
    gap: 18px;
  }
  .workflow-step .num {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
  .values-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 480px) {
  .stats-bar .container {
    grid-template-columns: 1fr;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* =====================================================
   18. GET ACCESS MODAL
===================================================== */
.access-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.access-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.access-modal[hidden] {
  display: none;
}

.access-modal.is-open[hidden] {
  display: flex;
}

.access-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 42, 56, 0.55);
  backdrop-filter: blur(4px);
}

/* Get Access Modal Redesign (2026-09-06): .glass REMOVED from this panel entirely — a real,
   measured contrast failure, not a stylistic call. The prior .glass treatment layered a
   light translucent gradient over the modal's OWN already-blurred dark backdrop
   (.access-modal-backdrop, rgba(18,42,56,0.55) + blur(4px)) — composited, real body text
   (--text-muted) against that stack measured 1.86:1 to 2.93:1 depending on where in the
   glass gradient it fell, and even the navy title text sat right at 4.51:1, a hair above
   the WCAG floor with no real margin. Glass belongs on a card sitting over a page's own
   content; a modal already floating over a blurred backdrop doesn't have a second surface
   worth seeing through underneath it, so glass there just subtracts contrast for no real
   visual gain. Panel is now solid --white, full-contrast navy/graphite text throughout,
   restructured into two columns (.access-modal-columns) — .access-options (real navy/
   graphite text on white) and .access-value-panel (a genuine, deliberately OPAQUE dark
   navy gradient, not glass — nothing needs to show through it, so there is no reason to
   spend translucency/blur cost here at all). Mobile-first: single-column stacking is the
   DEFAULT (no media query needed) with the value panel first in source order, so it
   naturally renders above the options on narrow viewports; the two-column split with the
   value panel visually on the RIGHT is achieved via `order` inside a min-width query,
   without needing to reorder the HTML itself. */
.access-modal-panel {
  position: relative;
  border-radius: 16px;
  max-width: 820px;
  width: 100%;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 24px 64px rgba(18, 42, 56, 0.25);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}

.access-modal.is-open .access-modal-panel {
  transform: translateY(0) scale(1);
}

.access-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.access-modal-close:hover {
  background: var(--surface);
  color: var(--text);
}

.access-modal-columns {
  display: grid;
  grid-template-columns: 1fr;
}

.access-modal-title {
  font-size: 1.55rem;
  color: var(--primary);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.access-modal-lead {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin-bottom: 24px;
}

/* ---- Left column: the two access options as compact horizontal rows ---- */
.access-options {
  padding: 40px 36px 36px;
  order: 1;
}

.access-option-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.access-option-row + .access-option-row {
  margin-top: 14px;
}
.access-option-row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  background: var(--bg);
}

.access-option-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.access-option-text {
  flex: 1;
  min-width: 0;
}

.access-option-text h3 {
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 3px;
}

.access-option-text p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.access-option-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s, color 0.2s;
}
.access-option-row:hover .access-option-arrow {
  color: var(--primary);
  transform: translateX(3px);
}

/* ---- Right column: dark navy value-proposition panel ---- */
.access-value-panel {
  position: relative;
  overflow: hidden;
  padding: 40px 32px;
  order: 0;
  background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  display: flex;
  flex-direction: column;
}

.access-value-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-teal-soft);
  margin-bottom: 10px;
}

.access-value-heading {
  position: relative;
  z-index: 1;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 26px;
}

.access-value-benefits {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.access-value-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.access-value-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--accent-teal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-value-benefit h4 {
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 3px;
}

.access-value-benefit p {
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 640px) {
  .access-modal-columns {
    grid-template-columns: 1.05fr 1fr;
  }
  .access-options {
    order: 1;
  }
  .access-value-panel {
    order: 2;
  }
}

@media (max-width: 560px) {
  .access-options {
    padding: 32px 22px 28px;
  }
  .access-value-panel {
    padding: 32px 22px;
  }
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): the original "19. CONTACT PAGE" block
   that used to live here is deleted outright — confirmed genuinely dead, not just
   overridden by luck: a second, later "CONTACT PAGE – Restored Styles" block (further
   down this file) defines the exact same selectors and, being later in the file at equal
   specificity, is the one that actually rendered. Same duplicate-rule pattern already
   found and fixed once for .hero (Stage 1) — the later block is now the sole, real
   source of Contact page styling, and is itself updated in place below to use the real
   .glass primitive instead of its own prior ad-hoc translucency. */

.form-actions {
  margin-top: 8px;
}

.form-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.form-note a {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-form-wrap {
    padding: 28px 20px 24px;
  }
}
/* Homepage Visual Redesign, Stage 1 (2026-09-05): this second, later .hero rule — a
   dark-tinted overlay on hero-bg.jpg, which won the cascade over the first .hero rule
   above (identical specificity, later in the file) and was therefore the one actually
   rendering — is deleted outright, confirmed orphaned via grep (hero-bg.jpg is no longer
   referenced anywhere in the project). The new light-glass hero design lives in the
   single, consolidated .hero rule in section 5 above. The image file itself is left on
   disk, unused rather than deleted, in case it's wanted again later. */
/* Keep Get Access + Contact the same size */
.header-actions .btn {
  width: 132px;
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 0.88rem;
  line-height: 1;
}
/* =====================================================
   CONTACT PAGE – Restored Styles
===================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}

.contact-details-title {
  display: none; /* removes the title so cards align cleanly with the form */
}

.contact-form-title {
  font-size: 1.45rem;
  color: var(--primary);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.contact-form-lead {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin-bottom: 24px;
}

/* Homepage Visual Redesign, Stage 2 (2026-09-05): upgraded from this file's own prior
   ad-hoc translucency (a plain rgba background + blur, predating Stage 1) to the real,
   shared .glass primitive (applied in the HTML alongside this class) — consolidating
   onto one consistent recipe site-wide instead of leaving two different "glass-ish"
   treatments coexisting. Hover redefined as a shadow boost to suit a translucent surface. */
.contact-card {
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 14px;
  transition: box-shadow 0.2s;
}

.contact-card:hover {
  box-shadow: 0 20px 36px -12px rgba(27,58,75,0.2);
}

.contact-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--primary);
  margin-bottom: 10px;
}

.contact-card-value {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.6;
  font-weight: 500;
}

.contact-card-value a {
  color: var(--text);
  font-weight: 500;
  transition: color 0.15s;
}
.contact-card-value a:hover {
  color: var(--primary);
}

/* Same upgrade as .contact-card just above — real .glass, applied in the HTML. */
.contact-form-wrap {
  border-radius: var(--radius);
  padding: 36px 36px 32px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.form-group .required {
  color: var(--primary);
  font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #D8D4CD;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text);
  background: #FCFBF9;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9A9690;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: #C4BFB6;
  background: #FFFFFF;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(27, 58, 75, 0.10);
}

.form-group textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}

.form-actions {
  margin-top: 8px;
}

.form-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.form-note a {
  color: var(--primary);
  text-decoration: underline;
}

/* Frosted section background */
.section:has(.contact-layout) {
  position: relative;
  background: #EDE8E1;
  overflow: hidden;
}

.section:has(.contact-layout)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(27, 58, 75, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(27, 58, 75, 0.05) 0%, transparent 50%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.section:has(.contact-layout) .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-form-wrap {
    padding: 28px 20px 24px;
  }
}
/* =====================================================
   CUSTOM SELECT (Modern Dropdown)
===================================================== */
.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border: 1.5px solid #D8D4CD;
  border-radius: 10px;
  background: #FCFBF9;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  text-align: left;
}

.custom-select-trigger:hover {
  border-color: #C4BFB6;
  background: #FFFFFF;
}

.custom-select.is-open .custom-select-trigger {
  border-color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(27, 58, 75, 0.10);
}

.custom-select-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-arrow {
  width: 12px;
  height: 8px;
  margin-left: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7178' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.custom-select.is-open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(27, 58, 75, 0.12);
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.custom-select.is-open .custom-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-select-option {
  padding: 12px 16px;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}

.custom-select-option:hover {
  background: var(--surface);
}

.custom-select-option.is-selected {
  background: rgba(27, 58, 75, 0.08);
  color: var(--primary);
  font-weight: 500;
}

.custom-select-option:first-child {
  border-radius: 10px 10px 0 0;
}

.custom-select-option:last-child {
  border-radius: 0 0 10px 10px;
}
/* Client Dashboard Visual Treatment, Stage 3 (2026-09-06): this was a white-translucent
   pill, designed for the dark photographic backgrounds login.html/signup.html used to have
   — its only two real usages, confirmed via a project-wide grep before changing it. Both
   pages now have a light background, so the colors are inverted to navy-on-light instead
   of white-on-dark; the shape/sizing is unchanged. */
.back-link-panel {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(27, 58, 75, 0.06);
  border: 1px solid rgba(27, 58, 75, 0.14);
  border-radius: 8px;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.back-link-panel:hover {
  background: rgba(27, 58, 75, 0.1);
  border-color: rgba(27, 58, 75, 0.25);
  color: var(--primary-dark);
}