/* ════════════════════════════════════════════════════════════════════════════
   obris.css — shared style layer for obris.co
   ----------------------------------------------------------------------------
   Linked by every site page in <head>, BEFORE that page's own inline <style>
   block, so page-specific CSS still overrides the shared layer.

   Contains: design tokens · reset / base typography · skip-link · container ·
   buttons · primary nav (desktop + mobile) · back-to-top button.

   What stays inline per page: everything page-specific (heroes, sections,
   pricing, blog layout, the homepage-only transparent-nav-over-hero variant
   in index.html, etc.).

   Created 2026-05-11 — extracted from the per-page inline duplicates.
   Updated 2026-05-18 (Phase 1A): added named breakpoint tokens to :root;
   verified footer styles already consolidated (TODO closed); reset rule
   `*, *::before, *::after` already covers the per-page `*{box-sizing...}`
   redeclarations being stripped from inline page <style> blocks.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* Indigo — primary brand color (NM-style ladder system, hue locked at #2F2D7C) */
  --indigo-50:  #F4F4FB;
  --indigo-100: #EAEAF6;
  --indigo-200: #D5D5EE;
  --indigo-300: #B6B5DD;
  --indigo-400: #8E8DC8;
  --indigo-500: #4541B4;
  --indigo-600: #393696;
  --indigo-700: #2F2D7C;       /* Primary brand */
  --indigo-800: #1E1C5E;
  --indigo-900: #14123F;
  --indigo-950: #0E0E25;       /* Near-black indigo — deep sections */
  /* Cream — refined toward editorial parchment (WebMD-tuned) */
  --cream: #FBF6EC;
  --cream-deep: #F4ECDD;       /* Slightly deeper cream for vignette stops */
  --white: #FFFFFF;
  --gray-50: #F8F9FA;
  --gray-100: #EEF0F3;
  --gray-200: #DEE1E8;
  --gray-400: #96A0B0;
  --gray-600: #5C6475;
  --gray-700: #4B525F;
  --gray-900: #1F232A;
  --gray-950: #111318;
  /* Green — third color in the tri-color palette (Cigna-anchored) */
  --green-50:  #ECF8E8;        /* Faint wash — section bg */
  --green-100: #D6F0CC;        /* Light bg — callouts */
  --green-300: #92D277;        /* Mid-light — decorative */
  --green-500: #56B948;        /* Cigna primary — peer brand color, "Most Popular," pops */
  --green-600: #44A038;        /* Deeper — buttons, accent text */
  --green-700: #2F8228;        /* Deep emerald — hover, AAA contrast text on light */
  /* Velvet Editorial warm-dark layer (added 2026-05-05) — hero, brand story, final CTA, Premium+ */
  --umber: #0F0B08;            /* Deep umber-black base */
  --umber-2: #1C1510;          /* Secondary warm-brown dark */
  --gold-warm: #C9A96E;        /* Champagne gold — primary accent on dark surfaces */
  --gold-warm-hover: #D4B97A;  /* Hover lift */
  --warm-cream: #EDE4D4;       /* Text on dark — replaces white for editorial warmth */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --max-width: 1200px;
  --inset: clamp(20px, 5vw, 48px);
  /* Breakpoint tokens — single source of truth for the 5-tier ladder
     (added 2026-05-18, Phase 1A). Note: CSS custom properties cannot be
     used directly in @media queries; these tokens exist as canonical
     reference values so per-page and recipe drops stay coherent on the
     same ladder. Match the literal px values in @media (max-width: …). */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 900px;
  --bp-xl: 1100px;
}

/* ─── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--gray-950);
  background: var(--cream);
  line-height: 1.6;
  font-weight: 400;
  font-size: 17px;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--indigo-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, .btn { font-family: inherit; cursor: pointer; }
/* headline leading — standardized site-wide (was inheriting body's 1.6 on many pages) */
h1, h2, h3, h4 { text-wrap: balance; color: var(--gray-950); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
/* dark-bg override — .pillar h4 lives inside .differently (royal-indigo bg) on the 6 service pages.
   Promoted to shared layer 2026-05-19 after the gray-950 default leaked through and rendered the
   pillar headings as unreadable near-navy on indigo. Per-page rules still set font-size/weight. */
.pillar h4 { color: white; }

:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: -9999px;
  background: var(--indigo-700); color: white;
  padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ─── Container ────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--inset); }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--indigo-700); color: var(--white); }
.btn-primary:hover { background: var(--indigo-600); }
.btn-secondary {
  background: transparent; color: var(--indigo-700);
  border-color: var(--indigo-700);
}
.btn-secondary:hover { background: var(--indigo-100); }
.btn-inverse { background: var(--white); color: var(--indigo-950); }
.btn-inverse:hover { background: var(--cream); }
/* .btn-ghost — outlined indigo, transparent fill. Promoted from 6 service pages 2026-05-19. */
.btn-ghost { background: transparent; color: var(--indigo-700); border-color: var(--indigo-700); }
.btn-ghost:hover { background: var(--indigo-100); }

/* HTML5 [hidden] attribute enforcement — UA default loses to author rules that set
   explicit display (e.g. .btn{display:inline-block}). !important keeps `hidden` working
   as a sitewide kill-switch for any element. Standard convention (Bootstrap/Tailwind
   ship the same pattern). Added 2026-05-19 after `<a class="btn ... hidden>` was
   visible on services pages. */
[hidden] { display: none !important; }

/* ─── Primary nav (desktop + mobile) — was duplicated verbatim on all 22 pages ─ */
.obris-nav{position:sticky;top:0;left:0;right:0;z-index:100;background:rgba(251,246,236,0.92);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid rgba(0,0,0,0.07)}
.obris-nav *,.obris-nav *::before,.obris-nav *::after{box-sizing:border-box}
.obris-nav-inner{max-width:1200px;margin:0 auto;padding:10px clamp(16px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.obris-nav-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;min-width:0}
.obris-nav-logo-icon{height:40px;width:auto;display:block;flex-shrink:0;transition:transform 1.8s cubic-bezier(.22,1,.36,1)}
.obris-nav-logo:hover .obris-nav-logo-icon,.obris-nav-logo:focus-visible .obris-nav-logo-icon{transform:rotate(360deg)}
.obris-nav-logo:hover,.obris-nav-logo:focus-visible{text-decoration:none}
.obris-nav-logo-text{font-family:'Manrope',system-ui,sans-serif;font-weight:400;font-size:30px;letter-spacing:0;text-transform:lowercase;color:#16162B;line-height:1;white-space:nowrap;transition:color .25s ease}
.obris-nav-desktop{display:flex;align-items:center;gap:28px;margin-left:auto}
.obris-nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.obris-nav-links>li{position:relative}
.obris-nav-link{font-family:inherit;font-size:15px;font-weight:500;color:#2F2D7C;text-decoration:none;line-height:1;padding:8px 0;display:inline-block;background:none;border:none;cursor:pointer;transition:color .18s ease}
.obris-nav-link:hover,.obris-nav-link:focus-visible{color:#4541B4;text-decoration:none}
.obris-nav-link.active{color:#2F2D7C;font-weight:700}
.obris-nav-link.active::after{content:"";display:block;height:2px;background:#2F2D7C;border-radius:1px;margin-top:4px}
.obris-nav-has-sub>.obris-nav-link::after{content:" \25BE";font-size:0.8em;opacity:0.7}
.obris-nav-has-sub>.obris-nav-link.active::after{content:" \25BE";display:inline;height:auto;margin-top:0;background:transparent;border-radius:0;font-size:0.8em;opacity:0.7}
.obris-nav-sub{position:absolute;top:100%;left:0;min-width:200px;background:#FBF6EC;border:1px solid #DEE1E8;border-radius:10px;box-shadow:0 16px 32px -12px rgba(17,19,24,0.18);padding:8px;margin-top:6px;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.obris-nav-has-sub:hover .obris-nav-sub,.obris-nav-has-sub:focus-within .obris-nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.obris-nav-sub li{margin:0}
.obris-nav-sub a{display:block;padding:9px 12px;border-radius:6px;font-size:14px;font-weight:500;color:#2F2D7C;text-decoration:none;white-space:nowrap}
.obris-nav-sub a:hover,.obris-nav-sub a:focus-visible{background:#EAEAF6;color:#2F2D7C;text-decoration:none}
.obris-nav-sub a.active{font-weight:700;background:#EAEAF6}
.obris-nav-cta{display:inline-block;background:#2F2D7C;color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1;padding:11px 18px;border-radius:8px;text-decoration:none;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.obris-nav-cta:hover,.obris-nav-cta:focus-visible{background:#4541B4;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(47,45,124,0.45)}
.obris-nav-toggle{display:none;width:44px;height:44px;padding:11px;background:transparent;border:1px solid #DEE1E8;border-radius:8px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0}
.obris-nav-toggle:hover,.obris-nav-toggle:focus-visible{border-color:#2F2D7C}
.obris-nav-toggle span{display:block;width:20px;height:2px;background:#2F2D7C;border-radius:1px;transition:transform .25s ease,opacity .25s ease}
.obris-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.obris-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.obris-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.obris-nav-mobile{display:none;border-top:1px solid #DEE1E8;background:#FBF6EC;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.obris-nav-mobile[hidden]{display:none}
.obris-nav-mobile ul{list-style:none;margin:0;padding:12px clamp(16px,4vw,40px);display:flex;flex-direction:column}
.obris-nav-mobile li{margin:0}
.obris-nav-mobile a{display:block;padding:14px 4px;font-size:16px;font-weight:500;color:#2F2D7C;text-decoration:none;border-bottom:1px solid #DEE1E8;min-height:44px}
.obris-nav-mobile a.active{font-weight:700}
.obris-nav-mobile a:hover,.obris-nav-mobile a:focus-visible{color:#4541B4}
.obris-nav-mobile .obris-nav-mobile-subhead{padding:14px 4px 6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#5C6475;border-bottom:1px solid #DEE1E8}
.obris-nav-mobile .obris-nav-mobile-sublink{padding-left:18px;font-size:15px}
.obris-nav-mobile .obris-nav-mobile-cta-wrap{padding-top:16px;border-bottom:0}
.obris-nav-mobile a.obris-nav-mobile-cta{display:block;text-align:center;background:#2F2D7C;color:#fff;padding:14px 24px;border-radius:8px;font-weight:600;font-size:15px;border-bottom:0}
.obris-nav-mobile a.obris-nav-mobile-cta:hover{background:#4541B4;color:#fff}
@media (max-width:900px){.obris-nav-links{gap:18px}.obris-nav-desktop{gap:18px}}
@media (max-width:768px){.obris-nav-desktop{display:none}.obris-nav-toggle{display:flex}.obris-nav-mobile:not([hidden]){display:block}.obris-nav-logo{gap:10px}.obris-nav-logo-icon{height:32px}.obris-nav-logo-text{font-size:24px}.obris-nav-inner{padding:10px 16px}}
@media (max-width:380px){.obris-nav-logo-text{font-size:20px}.obris-nav-logo-icon{height:28px}}
@media (prefers-reduced-motion:reduce){.obris-nav-sub,.obris-nav-toggle span,.obris-nav-cta{transition:none}.obris-nav-logo-icon,.obris-footer-logo-icon{transition:none}.obris-nav-logo:hover .obris-nav-logo-icon,.obris-nav-logo:focus-visible .obris-nav-logo-icon,.obris-footer-logo:hover .obris-footer-logo-icon,.obris-footer-logo:focus-visible .obris-footer-logo-icon{transform:none}}

/* ─── Velvet hero compatibility — two-state nav over warm-dark hero ─────────
   Applied to any page whose <header.obris-nav> ALSO carries .has-velvet-hero.
   The .is-over-hero state class is toggled by JS based on scroll position
   (the initial markup MUST include both classes so the first paint is
   transparent — see the scroll-listener JS that ships with each Velvet page).
   Pages WITHOUT a warm-dark hero MUST NOT add .has-velvet-hero — the negative
   margin-bottom would pull the page content under the nav.

   Migrated from index.html inline 2026-05-18 (Phase 1B.0).
   ────────────────────────────────────────────────────────────────────────── */
.obris-nav.has-velvet-hero {
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
  /* pull the umber hero up under the nav so the transparent state reveals the
     hero, not the cream <body> behind it (nav height = 52px logo + 20px padding
     + 1px border = 73px desktop; 44px logo on mobile = 65px) */
  margin-bottom: -73px;
}
.obris-nav.has-velvet-hero.is-over-hero {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-link { color: var(--warm-cream); }
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-link:hover,
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-link:focus-visible { color: #fff; }
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-link.active { color: #fff; }
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-link.active::after { background: var(--gold-warm); }
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-sub a { color: #2F2D7C; }
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-cta {
  background: transparent;
  border: 1px solid rgba(237, 228, 212, 0.55);
  color: var(--warm-cream);
}
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-cta:hover,
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-cta:focus-visible {
  background: rgba(237, 228, 212, 0.14);
  color: #fff;
  border-color: #fff;
  box-shadow: none;
  transform: translateY(-1px);
}
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-toggle { border-color: rgba(237, 228, 212, 0.4); }
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-toggle:hover,
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-toggle:focus-visible { border-color: #fff; }
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-toggle span { background: var(--warm-cream); }
/* Velvet over-hero state — wordmark inverts to pure white (Julia 2026-05-18 spec), icon swaps to the cream/light variant.
   Path resolves relative to this CSS file (site/assets/) — works from any page that links obris.css. */
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-logo-text { color: #FFFFFF; }
.obris-nav.has-velvet-hero.is-over-hero .obris-nav-logo-icon { content: url('../images/obris-icon-dark.png'); }
@media (max-width: 768px) {
  .obris-nav.has-velvet-hero { margin-bottom: -65px; }
}
@media (prefers-reduced-motion: reduce) {
  .obris-nav.has-velvet-hero { transition: none; }
}

/* ─── Back-to-top button ───────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  width: 52px; height: 52px;
  background: var(--indigo-700);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(47, 45, 124, 0.45);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease;
  z-index: 40;
  pointer-events: none;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--indigo-600); }
.back-to-top:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: 3px;
}
.back-to-top svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.3s ease; }
}

/* ─── Site footer — was a different shape on almost every page; standardized 2026-05-11 ─── */
.obris-footer {
  background: var(--indigo-950);
  color: rgba(255, 255, 255, 0.72);
  padding: 56px 0 36px;
  text-align: left;
}
.obris-footer-inner,
.obris-footer-bar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--inset);
  padding-right: var(--inset);
}
.obris-footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.obris-footer-brand { min-width: 0; }
.obris-footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.obris-footer-logo:hover, .obris-footer-logo:focus-visible { text-decoration: none; }
.obris-footer-logo-icon {
  height: 36px; width: auto; display: block; flex-shrink: 0;
  transition: transform 1.8s cubic-bezier(.22, 1, .36, 1);
}
.obris-footer-logo:hover .obris-footer-logo-icon,
.obris-footer-logo:focus-visible .obris-footer-logo-icon { transform: rotate(360deg); }
.obris-footer-logo-text {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400; font-size: 26px;
  letter-spacing: 0; text-transform: lowercase;
  color: #FFFFFF;
  line-height: 1; white-space: nowrap;
}
.obris-footer-brand p {
  font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 44ch;
}
.obris-footer-col h4 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 14px;
}
.obris-footer-col ul { list-style: none; margin: 0; padding: 0; }
.obris-footer-col li { padding: 5px 0; }
.obris-footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.obris-footer-col a:hover,
.obris-footer-col a:focus-visible { color: #fff; text-decoration: underline; }
.obris-footer-bar {
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 900px) {
  .obris-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .obris-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .obris-footer { padding: 44px 0 32px; }
  /* Brand stacks full-width on top, then Services / Company / Legal sit side-by-side as 3 columns */
  .obris-footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: 28px 16px; }
  .obris-footer-brand { grid-column: 1 / -1; }
  .obris-footer-col h4 { margin-bottom: 12px; }
  .obris-footer-col li { padding: 4px 0; }
  .obris-footer-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* Very narrow phones — drop to 2 columns so long labels (HIPAA Notice, Google Ads) don't clip */
@media (max-width: 360px) {
  .obris-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
}
