/* ================================================================
   ClinAdvize — Brand Tokens + Mobile / Responsive Styles
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
   ================================================================ */

/* ── BRAND TOKENS ─────────────────────────────────────────────────
   Edit --gold (and --gold-rgb to match) to swap the gold site-wide.
   --gold-rgb feeds rgba(var(--gold-rgb), a) tints.
   --gold-2 is the lighter gold used on dark panels. */
:root {
  --gold: #b5964b;
  --gold-rgb: 181, 150, 75;
  --gold-2: #b5964b;
  --gold-deep: #b5964b;
  --blue: #005E99;
  --blue-rgb: 0, 94, 153;
  --red: #AE2024;
  --red-rgb: 174, 32, 36;
}

/* ── STANDARD CTA PANELS ──────────────────────────────────────────
   Repeated page-ending CTA cards share one high-contrast treatment. */
[data-cta-card] {
  background: linear-gradient(110deg, #0a1820 0%, #0d2236 52%, #005e99 100%) !important;
  border: 2px solid rgba(0, 94, 153, 0.72) !important;
  box-shadow: 0 50px 110px -40px rgba(10, 18, 28, 0.5);
}
[data-cta-card] h1,
[data-cta-card] h2,
[data-cta-card] h3,
[data-cta-card] p {
  color: #FFFFFF !important;
}
[data-cta-card] p a {
  color: var(--gold-2, #b5964b) !important;
}
[data-cta-card] a:not([style*="background:"]) {
  color: var(--gold-2, #b5964b) !important;
  border-color: rgba(var(--gold-rgb), 0.5) !important;
}

@media (max-width: 680px) {
  [data-cta-card] { padding: 44px 24px !important; }
  [data-hero-values] { max-width: 100% !important; }
  [data-cta-card] [data-reach-grid] { padding: 42px 20px !important; }
  [data-reach-stats] { gap: 16px !important; }
  [data-reach-stats] > div:not([style*="width: 1px"]) { flex: 1 1 0; min-width: 0; }
  [data-reach-stat-number] { font-size: 30px !important; }
}

@media (max-width: 560px) {
  [data-hero-values] > div:nth-child(1) { padding: 22px 12px 22px 0 !important; }
  [data-hero-values] > div:nth-child(2) { padding: 22px 0 22px 12px !important; }
  [data-hero-values] > div:nth-child(3) { padding: 22px 12px 0 0 !important; }
  [data-hero-values] > div:nth-child(4) { padding: 22px 0 0 12px !important; }
  [data-hero-values] > div > div:first-of-type { font-size: 24px !important; }
  [data-hero-values] > div > div:last-child { font-size: 14px !important; }
}

/* ── SECTION TITLE SIDE LINES ── */
body { overflow-x: hidden; }
[data-title-lines] { position: relative; display: inline-block; }
[data-title-lines]::before,
[data-title-lines]::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 50vw;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 2px;
}
[data-title-lines]::before {
  right: calc(100% + 36px);
  background: linear-gradient(to left, rgba(var(--gold-rgb), 0.75), rgba(var(--gold-rgb), 0.12));
}
[data-title-lines]::after {
  left: calc(100% + 36px);
  background: linear-gradient(to right, rgba(var(--gold-rgb), 0.75), rgba(var(--gold-rgb), 0.12));
}

/* ── NAV ── */
@media (max-width: 900px) {
  [data-desktop-nav]     { display: none !important; }
  [data-desktop-actions] { display: none !important; }
  [data-mobile-btn]      { display: flex !important; }
}

/* ── GLOBAL TYPOGRAPHY ── */
@media (max-width: 768px) {
  h1, h2 { white-space: normal !important; }
  /* Inline spans inside h1/h2 may carry their own white-space: nowrap */
  h1 span, h2 span { white-space: normal !important; }
  /* Section eyebrow labels (data-title-lines) can be longer than the viewport */
  [data-title-lines] { white-space: normal !important; text-align: center; }
}

/* ── HOME PAGE ── */
@media (max-width: 1024px) {
  [data-trust-grid]    { grid-template-columns: 1fr 1fr !important; }
  [data-method-grid]   { grid-template-columns: 1fr 1fr !important; }
  [data-services-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-process-grid]  { grid-template-columns: 1fr !important; gap: 30px !important; }
}
@media (max-width: 768px) {
  [data-hero-inner]    { padding-top: 120px !important; padding-bottom: 100px !important; padding-left: 24px !important; padding-right: 24px !important; }
  [data-hero-photo]    { object-position: 95% 95% !important; opacity: 0.22 !important; }
  [data-compare-wrap]  { overflow-x: auto !important; -webkit-overflow-scrolling: touch; border-radius: 14px !important; }
  [data-compare-wrap] > div { min-width: 520px; }
  [data-fit-grid]      { grid-template-columns: 1fr !important; }
  [data-playbook-grid] { grid-template-columns: 1fr !important; }
  [data-two-col]       { grid-template-columns: 1fr !important; gap: 44px !important; }
  [data-trust-grid]    { grid-template-columns: 1fr !important; }
  [data-services-grid] { grid-template-columns: 1fr !important; }
  [data-stats-grid]    { grid-template-columns: 1fr 1fr !important; }
  [data-method-grid]   { grid-template-columns: 1fr 1fr !important; }
  [data-process-grid]  { grid-template-columns: 1fr !important; }
  [data-playbook-art]  { padding-top: 8px; }
  .ca-playbook-cover-wrap { width: min(235px, 72vw) !important; }
}
@media (max-width: 480px) {
  [data-hero-inner]    { padding-top: 100px !important; padding-left: 18px !important; padding-right: 18px !important; }
  [data-method-grid]   { grid-template-columns: 1fr !important; }
  [data-hero-photo]    { object-position: 98% 98% !important; opacity: 0.16 !important; }
  .ca-playbook-cover-wrap { width: min(210px, 64vw) !important; }
}

/* ── HOME CONTENT RAIL AUDIT ──
   Major homepage sections share a 1,200px outer rail. Narrower inner
   reading columns retain their own max-widths, while the former 1,380px
   Right Fit shell no longer creates a wider visual edge than the rest. */
[data-home-page] > section > [data-home-shell-wide] {
  width: calc(100% - 64px);
  max-width: 1200px;
}

/* ── CONSULTING PAGE ── */
@media (max-width: 900px) {
  [data-hero]          { grid-template-columns: 1fr !important; }
  [data-incl]          { grid-template-columns: 1fr 1fr !important; }
  [data-incl] > *      { grid-column: span 1 !important; }
  [data-value-strip]   { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  [data-incl]          { grid-template-columns: 1fr !important; }
  [data-value-strip]   { grid-template-columns: 1fr 1fr !important; }
}

/* ── DIGITAL PRODUCTS PAGE ── */
@media (max-width: 900px) {
  [data-feat-grid]     { grid-template-columns: 1fr !important; padding: 40px 32px !important; }
  [data-products]      { grid-template-columns: 1fr 1fr !important; }
  [data-feats]         { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
  [data-products]      { grid-template-columns: 1fr !important; }
}

/* ── SHOP PAGE ── */
@media (max-width: 900px) {
  [data-shop-grid], [data-shop-skel] { grid-template-columns: 1fr !important; padding: 32px !important; }
}
@media (max-width: 540px) {
  [data-shop-grid], [data-shop-skel] { padding: 24px !important; gap: 32px !important; }
}

/* ── FAQ PAGE ── */
@media (max-width: 900px) {
  [data-faq-cols]  { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-faq-aside] { position: static !important; }
}

/* ── MARKETPLACE PAGE ── */
@media (max-width: 1024px) {
  [data-vgrid]         { grid-template-columns: 1fr 1fr 1fr !important; }
}
@media (max-width: 900px) {
  [data-mkt-stats]     { grid-template-columns: 1fr 1fr !important; }
  [data-vgrid]         { grid-template-columns: 1fr 1fr !important; }
  [data-vgrid] > *     { min-width: 0; }
  [data-vgrid] span    { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  [data-vgrid]         { grid-template-columns: 1fr 1fr !important; }
  [data-vgrid] span[style*="font-size: 22px"] { font-size: 17px !important; }
}

/* ── BLOG PAGE ── */
@media (max-width: 900px) {
  [data-grid]          { grid-template-columns: 1fr 1fr !important; }
  [data-feat]          { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  [data-grid]          { grid-template-columns: 1fr !important; }
}

/* ── CONTACT PAGE ── */
@media (max-width: 900px) {
  [data-contact-grid]  { grid-template-columns: 1fr !important; }
}

/* ── OUR STORY PAGE ── */
@media (max-width: 768px) {
  [data-founders]      { grid-template-columns: 1fr !important; }
  [data-founder-hero]  { grid-template-columns: 1fr !important; }
  [data-founder-hero] > div:first-child { max-width: 380px; margin: 0 auto; }
}
@media (max-width: 900px) {
  [data-values]        { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
  [data-values]        { grid-template-columns: 1fr !important; }
}

/* ── PLAYBOOK PAGE ── */
@media (max-width: 900px) {
  [data-pb-grid]       { grid-template-columns: 1fr !important; }
  [data-inside]        { grid-template-columns: 1fr 1fr !important; }
  [data-ring-grid]     { grid-template-columns: 1fr !important; padding: 40px 32px !important; }
}
@media (max-width: 540px) {
  [data-pb-grid],
  [data-pb-grid] > * {
    min-width: 0 !important;
    width: 100% !important;
  }
  [data-pb-grid] h1 span {
    display: inline !important;
  }
  [data-pb-grid] .pb-input {
    flex-basis: 100% !important;
    min-width: 0 !important;
  }
  [data-pb-grid] form button[type="submit"] {
    width: 100% !important;
  }
}
@media (max-width: 540px) {
  [data-inside]        { grid-template-columns: 1fr !important; }
}

/* ── FOOTER ── */
@media (max-width: 900px) {
  [data-foot-grid]     { grid-template-columns: 1fr 1fr !important; gap: 48px 32px !important; }
}
@media (max-width: 540px) {
  [data-foot-grid]     { grid-template-columns: 1fr !important; gap: 40px 0 !important; }
}

/* ── HERO BACKGROUND VIDEO ── */
/* Desktop-only: on small screens fall back to the dimmed hero photo to save bandwidth */
@media (max-width: 768px) {
  [data-hero-video] { display: none !important; }
}

/* ── ORBIT CONSTELLATION (Home cosmic centerpiece) ── */
[data-orb] { position: relative; overflow: hidden; }
.ca-orb-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
/* Stronger strokes for light background */
.ca-orb-svgring { fill: none; stroke: none; vector-effect: non-scaling-stroke; }
.ca-orb-svgring2 { fill: none; stroke: rgba(0,94,153,0.4); stroke-width: 1.5; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.ca-orb-beam { stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.ca-orb-nodes { position: absolute; inset: 0; pointer-events: none; }
.ca-orb-node { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
.ca-orb-card { display: inline-flex; align-items: center; gap: 12px; background: var(--surface, #FFFFFF); border: 1.5px solid rgba(0,94,153,0.35); border-radius: 100px; padding: 10px 22px 10px 10px; box-shadow: 0 12px 56px -12px rgba(0,0,0,0.16), 0 0 0 2px rgba(0,0,0,0.05); white-space: nowrap; will-change: transform; cursor: default; transform-origin: center; transition: box-shadow 0.3s ease, border-color 0.3s ease; pointer-events: auto; }
.ca-orb-card:hover { border-color: rgba(0,94,153,0.75); box-shadow: 0 20px 72px -12px rgba(0,94,153,0.35), 0 0 0 2px rgba(0,94,153,0.25); }
[data-theme="dark"] .ca-orb-card { border-color: rgba(102,178,226,0.35); box-shadow: 0 12px 56px -12px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.06); }
[data-theme="dark"] .ca-orb-card:hover { border-color: rgba(102,178,226,0.65); box-shadow: 0 20px 72px -12px rgba(0,94,153,0.5), 0 0 0 2px rgba(102,178,226,0.2); }
.ca-orb-ic { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ca-orb-ic svg { width: 20px; height: 20px; }
.ca-orb-lbl { font-family: 'Hanken Grotesk', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.2px; color: var(--ink, #1C2426); }
.ca-orb-center { position: absolute; top: 0; left: 0; transform: translate(-50%,-50%); z-index: 20; pointer-events: none; }
.ca-orb-aura { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.ca-orb-aura1 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(181,150,75,0.12) 0%, rgba(181,150,75,0) 68%); animation: caOrbBreath 4.2s ease-in-out infinite; }
.ca-orb-aura2 { width: 210px; height: 210px; background: radial-gradient(circle, rgba(0,94,153,0.10) 0%, rgba(0,94,153,0) 70%); animation: caOrbBreath 4.2s ease-in-out 1.4s infinite; }
.ca-orb-aura3 { width: 130px; height: 130px; background: radial-gradient(circle, rgba(181,150,75,0.22) 0%, rgba(181,150,75,0) 65%); animation: caOrbBreath 4.2s ease-in-out 2.8s infinite; }
@keyframes caOrbBreath { 0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.65; } 50% { transform: translate(-50%,-50%) scale(1.32); opacity: 1; } }
.ca-orb-ring1 { position: absolute; top: 50%; left: 50%; width: 148px; height: 148px; border-radius: 50%; border: 1.5px dashed rgba(0,94,153,0.50); transform: translate(-50%, calc(-50% + 5px)); animation: caOrbSpin 22s linear infinite; pointer-events: none; }
@keyframes caOrbSpin { from { transform: translate(-50%, calc(-50% + 5px)) rotate(0deg); } to { transform: translate(-50%, calc(-50% + 5px)) rotate(360deg); } }
.ca-orb-logo { position: relative; z-index: 2; width: 116px; height: 116px; padding: 20px; box-sizing: content-box; border-radius: 0; background: transparent; display: flex; align-items: center; justify-content: center; box-shadow: none; pointer-events: auto; }
.ca-orb-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 14px rgba(0,94,153,0.28)); }
.ca-orb-heading { position: absolute; top: 0; left: 0; right: 0; z-index: 10; text-align: center; padding: 56px 20px 0; pointer-events: none; }
/* Drag hint cursor + no text selection while spinning */
[data-orb] { cursor: grab; user-select: none; -webkit-user-select: none; }
[data-orb]:active { cursor: grabbing; }
[data-orb] img { -webkit-user-drag: none; user-drag: none; }
@media (max-width: 640px) {
  .ca-orb-card { gap: 8px; padding: 7px 15px 7px 7px; }
  .ca-orb-ic { width: 28px; height: 28px; }
  .ca-orb-ic svg { width: 13px; height: 13px; }
  .ca-orb-lbl { font-size: 12px; }
  .ca-orb-logo { width: 88px; height: 88px; }
  .ca-orb-ring1 { width: 126px; height: 126px; }
  .ca-orb-aura1 { width: 200px; height: 200px; }
  .ca-orb-aura2 { width: 140px; height: 140px; }
  .ca-orb-aura3 { width: 94px; height: 94px; }
  .ca-orb-heading { padding: 22px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-orb-aura1, .ca-orb-aura2, .ca-orb-aura3, .ca-orb-ring1 { animation: none !important; }
  .ca-hub-card, .ca-hub-core { transition: none; opacity: 1; transform: none; }
  .ca-hub-card { transform: translateY(0) scale(1); }
}

/* ── PREMIUM GOLD DIVIDERS (site-wide) ── */
[data-gold-divider]::after,
[data-gold-divider="left"]::after {
  content: none;
  display: none;
}

/* ── GOLD SHINE (site-wide, ever-so-slight) ─────────────────────────
   Every element that uses the gold token gets a faint, slow specular
   pulse: gold text breathes a soft glow, gold fills brighten a touch,
   and dividers get a moving light sweep. Disabled for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  [style*="color: var(--gold"],
  [style*="color:var(--gold"] {
    animation: caGoldGlow 5.5s ease-in-out infinite;
  }
  [style*="background: var(--gold)"],
  [style*="background:var(--gold)"] {
    animation: caGoldSheen 5.5s ease-in-out infinite;
  }
  [data-gold-divider]::after { content: none; display: none; }
}
@keyframes caGoldGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(var(--gold-rgb), 0); }
  50%      { text-shadow: 0 0 14px rgba(var(--gold-rgb), 0.55); }
}
@keyframes caGoldSheen {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.07) saturate(1.04); }
}
@keyframes caGoldSweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* ── GOLD STAR FIELD, LIGHT VARIANT (stage-page heroes) ─────────────
   Same twinkle idea as .ca-stars (Home dark bands) but tuned for white
   backgrounds: solid gold specks at low layer opacity. Position the
   layer first inside a relative/overflow-hidden hero; content wrappers
   are position:relative so they paint above it. */
.ca-stars-gold { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .5;
  background-image:
    radial-gradient(2px 2px at 7% 24%, rgba(181,150,75,.75) 45%, transparent 55%),
    radial-gradient(1.3px 1.3px at 18% 66%, rgba(181,150,75,.5) 45%, transparent 55%),
    radial-gradient(1.7px 1.7px at 31% 15%, rgba(213,181,110,.7) 45%, transparent 55%),
    radial-gradient(1.2px 1.2px at 44% 78%, rgba(181,150,75,.45) 45%, transparent 55%),
    radial-gradient(2.1px 2.1px at 57% 30%, rgba(181,150,75,.8) 45%, transparent 55%),
    radial-gradient(1.2px 1.2px at 68% 60%, rgba(213,181,110,.5) 45%, transparent 55%),
    radial-gradient(1.8px 1.8px at 80% 20%, rgba(181,150,75,.7) 45%, transparent 55%),
    radial-gradient(1.2px 1.2px at 91% 55%, rgba(181,150,75,.5) 45%, transparent 55%);
  animation: caTwinkleGold 6s ease-in-out infinite;
}
.ca-stars-gold::after { content: ''; position: absolute; inset: 0; opacity: .8;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 48%, rgba(181,150,75,.6) 45%, transparent 55%),
    radial-gradient(1.9px 1.9px at 25% 22%, rgba(213,181,110,.65) 45%, transparent 55%),
    radial-gradient(1.2px 1.2px at 39% 62%, rgba(181,150,75,.45) 45%, transparent 55%),
    radial-gradient(1.6px 1.6px at 52% 12%, rgba(181,150,75,.65) 45%, transparent 55%),
    radial-gradient(1.2px 1.2px at 63% 74%, rgba(213,181,110,.45) 45%, transparent 55%),
    radial-gradient(1.9px 1.9px at 75% 40%, rgba(181,150,75,.75) 45%, transparent 55%),
    radial-gradient(1.2px 1.2px at 87% 28%, rgba(181,150,75,.55) 45%, transparent 55%);
  animation: caTwinkleGold 8s ease-in-out 2.2s infinite;
}
@keyframes caTwinkleGold { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ca-stars-gold, .ca-stars-gold::after { animation: none; } }

/* ── METALLIC GOLD + LIGHT SWEEP (site-wide) ────────────────────────
   ALL gold TEXT — headers, eyebrows, highlighted words, italic
   phrases — renders as brushed metal instead of a flat fill, with a
   slow light sweep traveling across the glyphs on a loop. Two layered
   backgrounds clipped to the text:
     layer 1 (top): the moving sweep highlight — transparent at both
       ends so the metal base always shows through when it is parked;
     layer 2 (base): the static brushed-metal gradient — champagne
       top, deep bronze mid-shadow, warm sheen at the bottom.
   currentColor keeps the right base per variant (--gold / --gold-2).
   Exclusions:
   - [data-fx] split headings: glyphs are 3D child spans, clip-to-text
     breaks there → solid fill + text-shadow glimmer fallback;
   - elements with an inline background (badges/chips): clip-to-text
     would erase their visible background;
   - [data-no-metal] opt-out.
   Reduced motion: metal base only, sweep stays parked off the text. */
@supports ((-webkit-background-clip: text) and (color: color-mix(in srgb, red, white))) {
  [style*="color: var(--gold"]:not([data-no-metal]):not([style*="background"]),
  [style*="color:var(--gold"]:not([data-no-metal]):not([style*="background"]) {
    background-image:
      linear-gradient(110deg,
        rgba(255,249,230,0) 0%,
        rgba(255,249,230,0) 43%,
        rgba(255,252,242,0.8) 50%,
        rgba(255,249,230,0) 57%,
        rgba(255,249,230,0) 100%),
      linear-gradient(172deg,
        color-mix(in srgb, currentColor 58%, #FFF3D6) 0%,
        color-mix(in srgb, currentColor 88%, #FFE9B8) 26%,
        currentColor 44%,
        color-mix(in srgb, currentColor 76%, #4A3A14) 62%,
        currentColor 80%,
        color-mix(in srgb, currentColor 68%, #FFF3D6) 100%);
    background-size: 200% 100%, 100% 100%;
    /* Resting position parks the sweep highlight off the text — matters
       when an inline animation (e.g. the hero word flip) overrides ours;
       the metal base layer stays painted either way. */
    background-position: 180% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* data-fx split headings: keep solid fill + glimmer fallback */
  [data-fx] [style*="color: var(--gold"],
  [data-fx][style*="color: var(--gold"],
  [data-fx] [style*="color:var(--gold"],
  [data-fx][style*="color:var(--gold"] {
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) and (color: color-mix(in srgb, red, white))) {
    [style*="color: var(--gold"]:not([data-no-metal]):not([data-no-shimmer]):not([style*="background"]),
    [style*="color:var(--gold"]:not([data-no-metal]):not([data-no-shimmer]):not([style*="background"]) {
      animation: caGoldMetalSweep 5.5s ease-in-out infinite;
    }
    /* !important: the main sweep rule above out-specifies these tied
       selectors; the fallback animation must always win on data-fx. */
    [data-fx] [style*="color: var(--gold"],
    [data-fx][style*="color: var(--gold"],
    [data-fx] [style*="color:var(--gold"],
    [data-fx][style*="color:var(--gold"] {
      animation: caGoldGlimmer 2.4s ease-in-out infinite !important;
    }
  }
}
/* Sweep travels across in ~2.5s, then rests ~3s before looping.
   Layer 2 (metal base) never moves. */
@keyframes caGoldMetalSweep {
  0%   { background-position: 180% 0, 0 0; }
  45%  { background-position: -20% 0, 0 0; }
  100% { background-position: -20% 0, 0 0; }
}
/* text-shadow only — a `filter` here would force the 3D flip chain flat */
@keyframes caGoldGlimmer {
  0%, 100% { text-shadow: 0 0 0 rgba(var(--gold-rgb), 0); }
  50%      { text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45); }
}

/* ── REACTBITS TEXT FX (motion.js data-fx engine) ── */
.ca-fx-w { display: inline-block; white-space: pre; }
.ca-fx-c { display: inline-block; }

/* 3d-letter-swap: two-face glyph boxes, flipped by motion.js (WAAPI) */
[data-fx="swap"] { perspective: 900px; }
[data-fx="swap"] .ca-fx-w { transform-style: preserve-3d; }
.ca-swap-box { display: inline-block; position: relative; transform-style: preserve-3d; transform: translateZ(calc(var(--ca-lh, 1.2em) / -2)); }
.ca-swap-f { display: inline-block; transform: translateZ(calc(var(--ca-lh, 1.2em) / 2)); backface-visibility: hidden; }
.ca-swap-b { position: absolute; top: 0; left: 0; display: inline-block; transform: rotateX(-90deg) translateZ(calc(var(--ca-lh, 1.2em) / 2)); backface-visibility: hidden; }

/* text-scatter: chars flee the cursor (gsap sets transforms) */
.ca-scatter .ca-fx-c { will-change: transform; }

/* ── SHADER FLAME CANVAS (per-card copies of the shared WebGL render) ── */
.ca-flame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* ── COMPARISON TABLE SCROLL HINT (Home #why-us, mobile only) ──────
   A right-edge fade gradient + "Scroll →" pill sits over the table.
   The hint is dismissed (opacity → 0, pointer-events: none) once the
   user has scrolled the table far enough to see the Competitors column
   (detected by the inline script in Home.dc.html). */
[data-compare-hint] {
  display: none; /* shown only inside the mobile media query below */
}
@media (max-width: 768px) {
  [data-compare-outer] {
    position: relative;
    /* Clip the fade to the table's rounded corners */
    border-radius: 14px;
  }
  [data-compare-hint] {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88px;
    background: linear-gradient(to left, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    border-radius: 0 14px 14px 0;
    z-index: 3;
    transition: opacity 0.4s ease;
  }
  [data-compare-hint].ca-hint-gone {
    opacity: 0;
  }
  [data-compare-hint-pill] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #005e99;
    color: #fff;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 10px 6px 11px;
    border-radius: 100px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,94,153,0.35);
    pointer-events: none;
  }
}

/* ── COMPARISON ROW STAGGER (Home #why-us) ── */
.ca-cmp-pre > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.ca-cmp-in > * { opacity: 1; transform: translateY(0); }

/* ── FOOTER GIANT WORDMARK (footer-8 port) ── */
.ca-wordmark {
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  line-height: 0.78;
  text-align: center;
  margin-top: 34px;
}
.ca-wordmark > span {
  display: block;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 12.5vw, 190px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--gold-rgb), 0.5);
  transform: translateY(0.16em);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 92%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 92%);
}
.ca-wordmark .ca-wm-clin,
.ca-wordmark .ca-wm-advize {
  display: inline;
}
@media (max-width: 560px) {
  .ca-wordmark span {
    font-size: 13.5vw;
    letter-spacing: 0.04em;
    -webkit-text-stroke-width: 1px;
  }
}
.ca-wordmark .ca-wm-clin { color: #ae2024; -webkit-text-stroke-color: rgba(174,32,36,0.55); }
.ca-wordmark .ca-wm-advize { color: #005e99; -webkit-text-stroke-color: rgba(0,94,153,0.55); }

/* Page background must live on <html>, NOT <body>: body backgrounds
   paint OVER fixed z-index:-1 layers (like the watermark backdrop
   below), and the dc-runtime canvas-preview mode even injects its own
   `html,body{background:#FFFFFF}` at runtime. Pinning the theme color
   to <html> (the canvas layer, painted under everything) and forcing
   <body> transparent keeps the backdrop visible in every mode. */
html { background: var(--bg, #FFFFFF) !important; }
body { background: transparent !important; }

/* ── HOME FLOATING WATERMARK — FIXED 3D BACKDROP (whole page) ───────
   One ghost CLINADVIZE wordmark pinned to the viewport (position:
   fixed, z-index -1) so it travels with the user through the ENTIRE
   page. It sits behind all content: the light Home sections have
   transparent backgrounds (the theme color paints on <html> — see
   the override above), so the word shows through them and "loses
   itself" behind the hero, cards, dark bands, and footer as they
   scroll over it. motion.js
   initWmParallax() drives a slow scroll-linked recede — translateZ
   pushes the word deeper into the parent perspective while it tips
   back (rotateX) and drifts up, reading as a landscape falling away
   as you descend. The idle 3D sway (caWmFloat) lives on the INNER
   .ca-wmf-word span so it keeps breathing even while the page is
   still; the JS transform lives on the layer wrapper, so the two
   never fight. */
.ca-wm-float {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  perspective: 1000px;
  perspective-origin: 50% 42%;
  overflow: hidden;
}
.ca-wmf-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 32vh;
  text-align: center;
  line-height: 1;
  will-change: transform;
  transform-style: preserve-3d;
}
.ca-wmf-word {
  display: inline-block;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: clamp(160px, 29vw, 510px);
  animation: caWmFloat 9s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.1) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.1) 100%);
}
/* CSS text — shown as fallback while Three.js loads, then hidden. */
.ca-wmf-clin   { color: rgba(174,32,36,0.02); }
.ca-wmf-advize { color: rgba(0,94,153,0.02); }
/* Dark theme */
[data-theme="dark"] .ca-wmf-clin   { color: rgba(233,106,110,0.03); }
[data-theme="dark"] .ca-wmf-advize { color: rgba(102,178,226,0.03); }
@keyframes caWmFloat {
  0%, 100% { transform: translateY(0) rotateY(-8deg); }
  50%      { transform: translateY(-38px) rotateY(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ca-wmf-word { animation: none; }
}
@media (max-width: 768px) {
  .ca-wmf-layer { top: 26vh; }
  .ca-wmf-word { font-size: 17vw; letter-spacing: 0.04em; }
}

/* ── BOOKING CALENDAR MODAL ENTRANCE (Nav.dc.html, all pages) ───────
   The calendar popup mounts fresh each time (sc-if), so mount-time
   keyframes give it an animated entrance instead of an instant pop:
   the dark overlay fades in while the dialog rises and settles with
   a gentle overshoot. */
.ca-cal-overlay {
  animation: caCalOverlayIn 0.32s ease-out both;
}
.ca-cal-dialog {
  animation: caCalDialogIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
@keyframes caCalOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes caCalDialogIn {
  from { opacity: 0; transform: translateY(34px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ca-cal-overlay, .ca-cal-dialog { animation: none; }
}

/* ── 404 PHYSICS STAGE (404-5 port) ── */
.ca-nf-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}
.ca-nf-stage:active { cursor: grabbing; }
.ca-nf-card {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 18px;
  box-shadow: 0 18px 40px -18px rgba(6,16,28,0.4);
  border: 1px solid rgba(20,32,36,0.12);
  will-change: transform;
  touch-action: none;
}
.ca-nf-card .ca-nf-ic { position: absolute; left: 16px; bottom: 14px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .ca-cmp-pre > * { opacity: 1; transform: none; transition: none; }
  .ca-flame { display: none; }
}

/* ── HOME HERO USP DIVIDERS — hide vertical 1px bars when items wrap ── */
@media (max-width: 640px) {
  [data-usp-divider] { display: none !important; }
}

/* ── HOME PLAYBOOK GRID — heavy horizontal padding on mobile ── */
@media (max-width: 768px) {
  [data-playbook-grid] { padding: 40px 28px !important; }
}

/* ── HOME INSURANCE CREDENTIALING CALLOUT ── */
@media (max-width: 600px) {
  [data-ins-callout] { padding: 40px 24px !important; }
}

/* ── CTA CARDS (Consulting, DigitalProducts, Shop, OurStory) ── */
@media (max-width: 600px) {
  [data-cta-card] { padding: 40px 24px !important; }
}

/* ── CONTACT REACH GRID — dark nationwide map card ── */
@media (max-width: 600px) {
  [data-reach-grid] { padding: 36px 24px !important; }
}

/* ── FOUNDERS NOTE (OurStory.dc.html) ── */
@media (max-width: 660px) {
  /* Portrait strip stacks vertically on narrow screens */
  [data-founder-grid] { grid-template-columns: 1fr !important; }
  [data-founder-grid] > div:nth-child(2) { border-left: none !important; border-top: 1px solid rgba(181,150,75,0.15) !important; }
}

/* ── PLAYBOOK BUSINESS PLAN GRID ── */
@media (max-width: 600px) {
  [data-bp-grid] { grid-template-columns: 1fr !important; }
}

/* ── INSURANCE CREDENTIALING PAGE ── */
@media (max-width: 900px) {
  [data-ic-hero]    { grid-template-columns: 1fr !important; }
  [data-ic-cards]   { grid-template-columns: 1fr !important; }
  [data-ic-partner] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-ic-steps]   { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  [data-ic-steps]   { grid-template-columns: 1fr !important; }
}

/* ── GOLD SPACE (3D star/dot field, motion.js initGoldSpace) ────────
   [data-gold-space] hosts get a Three.js canvas injected at runtime.
   Card hosts (Home Launch/Expand/Revive path cards) are absolute layers
   behind the card content — lift every other card child above them.
   The .ca-stars-gold class on a host is the no-WebGL / reduced-motion
   fallback; motion.js removes it once the 3D scene mounts. */
a[data-zoom-nav] > *:not([data-gold-space]) { position: relative; z-index: 1; }

/* ── BOOKING WIZARD (Book.dc.html / Reschedule.dc.html) ─────────────
   Mobile-specific overrides for the vanilla-JS multi-step booking
   wizard. Target: 390px (iPhone 14 Pro) and up.

   Critical fix: .ca-combo-search must be font-size ≥ 16px or iOS
   Safari auto-zooms the viewport on focus, jumping the form and
   breaking keyboard usability. All other overrides improve layout
   density and touch ergonomics on narrow viewports. */

/* ── Combobox ── */
.ca-combo-search {
  /* Prevent iOS Safari viewport-zoom on focus (< 16 px triggers zoom) */
  font-size: 16px;
  /* Slightly larger touch target for the search field */
  padding: 11px 14px;
}

@media (max-width: 768px) {
  /* Dropdown: cap to available viewport height so it never clips below fold */
  .ca-combo-dropdown { max-height: 48vh; }

  /* Chip remove buttons: slightly larger touch target */
  .ca-chip-remove { padding: 2px 4px; font-size: 18px; }

  /* ── Two-panel layout ── */
  /* Left panel: compact strip on mobile — remove the large gap and
     the margin-top:auto that only works when the panel has a fixed height */
  .ca-book-left {
    padding: 16px 20px;
    gap: 10px;
  }
  .ca-step-dots {
    padding-top: 6px;
    margin-top: 0;      /* margin-top:auto does nothing when height isn't constrained */
  }
  .ca-svc-name { font-size: 20px; }

  /* Right panel: reduce outer padding on narrow screens */
  .ca-book-right { padding: 22px 18px 56px !important; }

  /* ── Navigation buttons ── */
  /* Stack Back + Next full-width on 390 px so neither button is cramped */
  .ca-btn-row { flex-direction: column; }
  .ca-btn-primary,
  .ca-btn-secondary {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  /* Keep primary first visually (it's last in DOM; reverse visual order) */
  .ca-btn-row { flex-direction: column-reverse; }

  /* ── Next-available pill ── */
  /* Full date + time string is too wide for 390 px — allow wrap */
  .ca-next-avail-pill {
    white-space: normal;
    line-height: 1.5;
    align-items: flex-start;
  }

  /* ── Continue / saved-session banner ── */
  .ca-continue-banner { padding: 10px 14px; font-size: 13px; }

  /* ── Paid-service banner ── */
  .ca-paid-banner { word-break: break-word; }

  /* ── Confirmation / pending-payment box ── */
  .ca-confirm-box { padding: 28px 18px; }

  /* ── Reschedule page ── */
  .ca-rs-wrap { padding: 28px 18px 60px; }
  .ca-rs-heading { font-size: 26px; }
}

@media (max-width: 480px) {
  /* Extra-tight on very small phones */
  .ca-book-right { padding: 18px 14px 52px !important; }
  .ca-rs-wrap    { padding: 20px 14px 52px; }

  /* Calendar day cells — keep them square but don't let them grow huge */
  .ca-cal-day { font-size: 13px; }

  /* Slot buttons can be slightly more compact */
  .ca-slot-btn { padding: 8px 13px; font-size: 13px; }
}

/* ── GHOST GOLD BUTTONS — DARK MODE FIX ─────────────────────────────
   Ghost outline buttons styled with "border: 1px solid rgba(232,222,198,…)"
   use a hardcoded light-beige border that nearly disappears on dark
   backgrounds. Additionally, color: var(--gold) triggers the metallic
   background-clip:text treatment, which can render the button text
   completely invisible on mobile in dark mode. Fix both:
   (1) raise the border opacity to a gold-token value so it stays visible,
   (2) restore solid gold text fill and cancel the swept gradient. */
[data-theme="dark"] [style*="rgba(232,222,198"] {
  border-color: rgba(var(--gold-rgb), 0.5) !important;
}
[data-theme="dark"] [style*="color: var(--gold"][style*="rgba(232,222,198"] {
  -webkit-text-fill-color: var(--gold, #b5964b) !important;
  background-image: none !important;
}

/* ── PLAYBOOK EMAIL INPUT PLACEHOLDER — DARK MODE ───────────────────
   .pb-input::placeholder colour rgba(28,36,38,0.5) is near-invisible
   on the semi-transparent dark input background used in dark mode.
   Override to the dim-ink design token which is already calibrated for
   dark backgrounds. */
[data-theme="dark"] .pb-input::placeholder {
  color: var(--ink-4, #869194) !important;
}

/* ── WCAG 2.2 AA FOCUS-VISIBLE OUTLINES ─────────────────────────────
   One robust global :focus-visible indicator for every interactive
   element (links, buttons, form controls, and anything focusable via
   tabindex). Uses a two-tone ring: a dark outline plus a light box-shadow
   halo, so the indicator remains visible on both light and dark
   backgrounds without needing per-element exclusions. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible {
  outline: 3px solid #103B5C !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 0 0 8px rgba(16, 59, 92, 0.6) !important;
  border-radius: 4px;
}

/* Form controls also get a strong border in addition to the ring. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: #103B5C !important;
}

/* ── INLINE PROSE / CONTENT LINK STYLE ───────────────────────────────
   Neutral resting style for ordinary inline text links inside prose
   (p / li) and any link explicitly marked data-content-link. Inherits
   the surrounding text color and removes underline at rest, using a
   subtle currentColor bottom border as the non-color affordance
   (WCAG 1.4.1). Stronger border on hover; visible focus handled above.
   Excludes data-book-call so CTA triggers keep their own styling; the
   descendant scope (p / li) already avoids nav, card, and button CTAs. */
p a:not([data-book-call]),
li a:not([data-book-call]),
a[data-content-link] {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none;
  transition: opacity 0.2s ease;
  padding-bottom: 1px;
}
p a:not([data-book-call]):hover,
li a:not([data-book-call]):hover,
a[data-content-link]:hover {
  opacity: 0.82;
}
p a:not([data-book-call]):focus-visible,
li a:not([data-book-call]):focus-visible,
a[data-content-link]:focus-visible {
  border-bottom: none;
}

/* Scoped override: the trust-band founder link sits on a dark blue card
   and must stay white, overriding the color: inherit !important rule
   above. Narrowly targeted via its own class, not a global change. */
a.trust-band-founder-link[data-content-link] {
  color: #FFFFFF !important;
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────
   Respect prefers-reduced-motion without disabling functionality.
   Animations are reduced to instant-on/off rather than removed entirely
   so UI state still transitions (menus open, items appear, etc.). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep opacity/transform reveal animations but make them instant */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Allow gold-glow animations to be suppressed (they are purely decorative) */
  [style*="color: var(--gold"] {
    animation: none !important;
  }
}