/**
Theme Name: Glimpse
Author: Karen Walsh
Author URI: http://wpastra.com/about/
Description: A child theme of Astra. 

Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glimpse
Template: astra
*/
/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg:      #080a0f;
  --bg-2:    #0c0f16;
  --panel:   #0f131c;
  --panel-2: #141a24;
  --text:    #f3f6fb;
  --muted:   #9aa6b6;
  --faint:   #5a6678;
  --line:    #1c232f;
  --line-2:  #2a3340;
  --teal:    #2dd4bf;
  --cyan:    #38bdf8;
  --mint:    #5eead4;
  --danger:  #fb7185;
  --warm:    #fbbf24;
  --grad:    linear-gradient(95deg,#5eead4 0%,#2dd4bf 38%,#38bdf8 100%);
  --shadow:  0 30px 90px rgba(0,0,0,.55);

  /* Translucent "glass" surfaces (sticky header, ticker) */
  --glass:      rgba(8,10,15,.72);
  --glass-2:    rgba(8,10,15,.6);
  --stars-op:   .6;
  --glow-op-a:  .22;
  --glow-op-b:  .12;
  --shimmer-op: 0;

  /* Role-reversed "light" button (white pill on dark bg) */
  --btn-light-bg:   #fff;
  --btn-light-text: #0a0f16;

  color-scheme: dark;
}

/* ============================================================
   CLASSIC MODE — a plainer light theme; palette pulled from the
   telescope-illustration reference (teal pants, mustard sweater,
   navy hair, tan skin, pale-blue sky).
   ============================================================ */
:root[data-theme="classic"] {
  --bg:      #eef9fa;
  --bg-2:    #e2f2f4;
  --panel:   #ffffff;
  --panel-2: #eef5f8;
  --text:    #1b2a4a;
  --muted:   #5b6b85;
  --faint:   #98a7bd;
  --line:    #e1e9f0;
  --line-2:  #cfdbe6;
  --teal:    #2b6777;
  --cyan:    #4fa3b0;
  --mint:    #f472b6;
  --danger:  #e11d48;
  --warm:    #c68958;
  --grad:    linear-gradient(95deg,#4fa3b0 0%,#6f8fc9 33%,#ab7bc9 67%,#f472b6 100%);
  --shadow:  0 20px 50px rgba(27,42,74,.10);

  --glass:      rgba(255,255,255,.75);
  --glass-2:    rgba(255,255,255,.6);
  --stars-op:   0;
  --glow-op-a:  .20;
  --glow-op-b:  .16;
  --shimmer-op: .55;

  --btn-light-bg:   #1b2a4a;
  --btn-light-text: #fff;

  color-scheme: light;
}

:root[data-theme="classic"] h1,
:root[data-theme="classic"] h2 {
  color: #2b6777 !important;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .25s ease, color .25s ease;
}

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

h1, h2, h3 {
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--text) !important;
}

/* ============================================================
   ASTRA OVERRIDES — strip default white background, padding etc.
   ============================================================ */
.ast-container,
.site-content .ast-container {
  max-width: 1200px;
  padding: 0 26px;
}

.site-content { padding: 0 !important; }

#page { background: var(--bg) !important; transition: background-color .25s ease; }

.ast-page-builder-template .entry-content { margin: 0; }

header.entry-header .entry-title {
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -.025em;
}



/* Remove Astra default site-header if using custom header 
.site-header { display: none !important; }
.site-footer  { display: none !important; }
*/
/* ============================================================
   UTILITY
   ============================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 26px;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   AMBIENT BACKGROUND — stars & glow
   ============================================================ */
.glimpse-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.25), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(45,212,191,.4), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(56,189,248,.3), transparent),
    radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,.2), transparent);
  background-size: cover;
  opacity: var(--stars-op);
  transition: opacity .25s ease;
}

.glimpse-glow {
  position: fixed;
  z-index: 0;
  border-radius: 999px;
  filter: blur(120px);
  pointer-events: none;
  opacity: var(--glow-op-a);
  transition: opacity .25s ease;
}
.glimpse-glow.a {
  width: 560px; height: 560px;
  top: -160px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--teal), transparent 70%);
}
.glimpse-glow.b {
  width: 420px; height: 420px;
  top: 520px; right: -120px;
  background: radial-gradient(circle, var(--cyan), transparent 70%);
  opacity: var(--glow-op-b);
}

/* Underwater shimmer — classic (mermaid) theme only; drifting
   caustic-light washes + sparkle highlights. Off (opacity 0) in
   dark/light via --shimmer-op. */
.glimpse-shimmer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--shimmer-op);
  transition: opacity .25s ease;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.95), transparent),
    radial-gradient(2px 2px at 78% 12%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 58% 38%, rgba(244,114,182,.8), transparent),
    radial-gradient(1.5px 1.5px at 28% 62%, rgba(79,163,176,.8), transparent),
    radial-gradient(2px 2px at 88% 72%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 44% 86%, rgba(244,114,182,.7), transparent),
    radial-gradient(ellipse 900px 520px at 12% -5%, rgba(79,163,176,.32), transparent 65%),
    radial-gradient(ellipse 800px 560px at 105% 15%, rgba(244,114,182,.24), transparent 65%),
    radial-gradient(ellipse 750px 620px at 40% 105%, rgba(79,163,176,.26), transparent 65%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: glimpse-shimmer-drift 20s ease-in-out infinite alternate;
}
@keyframes glimpse-shimmer-drift {
  0%   { background-position: 0% 10%; }
  50%  { background-position: 55% 45%; }
  100% { background-position: 15% 70%; }
}
@media (prefers-reduced-motion: reduce) {
  .glimpse-shimmer { animation: none; }
}

main, .glimpse-header, .glimpse-footer { position: relative; z-index: 1; }

.hero-right {
  position: relative;
  height: 580px;
  overflow: hidden;
  margin-left: -60px;
}

.soft-edge-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;

  /* Sharp only away from the edges; the blurred ::before layer
     shows through in the edge band this fades out over. */
  --edge: 30px;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent);
  -webkit-mask-composite: source-in;
}

/* Blurred, more saturated duplicate — visible only in the edge
   band the sharp layer above fades out over. */
.soft-edge-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  filter: blur(4px) saturate(1.4);

  mask-image:
    linear-gradient(to right, #000, transparent var(--edge), transparent calc(100% - var(--edge)), #000),
    linear-gradient(to bottom, #000, transparent var(--edge), transparent calc(100% - var(--edge)), #000);
  -webkit-mask-image:
    linear-gradient(to right, #000, transparent var(--edge), transparent calc(100% - var(--edge)), #000),
    linear-gradient(to bottom, #000, transparent var(--edge), transparent calc(100% - var(--edge)), #000);
}

/* ============================================================
   ANNOUNCEMENT TOPBAR
   ============================================================ */
.glimpse-topbar {
  background: linear-gradient(90deg, rgba(45,212,191,.16), rgba(56,189,248,.12));
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
  padding: 9px 16px;
  position: relative;
  z-index: 61;
}
.glimpse-topbar a {
  color: var(--mint);
  font-weight: 800;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

/* ============================================================
   STICKY HEADER / NAV
   ============================================================ */
.glimpse-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--glass);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.glimpse-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  gap: 18px;
}

.glimpse-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -.02em;
  min-width: 40px;
}
.glimpse-brand-logo-mobile { display: none; }
@media(max-width:980px) {
  .glimpse-brand-logo-desktop { display: none; }
  .glimpse-brand-logo-mobile { display: block; }
}

.glimpse-nav-links {
  display: flex;
  gap: 28px;
  color: var(--muted);
  font-size: .93rem;
  font-weight: 500;
  list-style: none;
  margin: 0; padding: 0;
}
.glimpse-nav-links a:hover { color: var(--text); }

.glimpse-nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.glimpse-nav-drawer-mood {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
}

/* Below this width the top bar gets too cramped (logo + toggle +
   log in + book a demo + hamburger); move the mood toggle into
   the bottom of the hamburger drawer instead. */
@media(max-width:426px) {
  .glimpse-nav-cta .glimpse-mood-toggle { display: none; }
  .glimpse-nav-drawer-mood { display: flex; }
}

/* ============================================================
   MOOD TOGGLE — dark / classic (2-way switch)
   ============================================================ */
.glimpse-mood-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 28px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  transition: border-color .18s;
}
.glimpse-mood-toggle:hover { border-color: var(--teal); }

.glimpse-mood-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--grad);
  transform: translateX(0); /* default (dark): 1st segment */
  transition: transform .25s ease;
  z-index: 0;
}
:root[data-theme="classic"] .glimpse-mood-toggle .glimpse-mood-thumb {
  background: var(--mint);
  transform: translateX(24px); /* 2nd segment */
}

.glimpse-mood-opt {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 !important;
  width: auto !important;
  height: 24px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--faint) !important;
  font-size: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .2s ease;
}
.glimpse-mood-opt[aria-checked="true"] { color: #062028 !important; }
:root[data-theme="classic"] .glimpse-mood-opt[aria-checked="true"] { color: #fff !important; }

.glimpse-mood-opt svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 19px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .92rem;
  border: 1px solid transparent;
  transition: .18s;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.btn-light {
  background: var(--btn-light-bg);
  color: var(--btn-light-text);
}
.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  color: var(--btn-light-text);
}

.btn-ghost {
  border-color: var(--line-2);
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--teal);
  color: var(--mint);
}

.btn-grad {
  background: var(--grad);
  border: none;
  color: #062028;
  font-weight: 800;
}
.btn-grad:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  color: #062028;
}

:root[data-theme="classic"] .btn-grad,
:root[data-theme="classic"] .btn-grad:hover {
  color: #fff;
}

/* ============================================================
   KPI TICKER
   ============================================================ */
.glimpse-ticker {
  border-bottom: 1px solid var(--line);
  background: var(--glass-2);
  overflow: hidden;
  position: relative;
}
.glimpse-ticker::before,
.glimpse-ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.glimpse-ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 30%, transparent);
}
.glimpse-ticker::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 30%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 32s linear infinite;
}
.glimpse-ticker:hover .ticker-track { animation-play-state: paused; }

.tk {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 30px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
  flex: 0 0 auto;
}
.tk .tkv {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.tk .tkl {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.glimpse-hero { padding: 56px 0 30px; }

.hero-split {
  display: grid; 
   grid-template-columns: 1.25fr .75fr; 
  /*grid-template-columns: 1fr;*/
  gap: 46px;
  align-items: center;
}

.hero-left { text-align: left; }

.glimpse-hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.02;
  margin: 0;
  max-width: 15ch;
  font-weight: 900;
}

.hero-lead {
  font-size: 1.08rem;
  max-width: 52ch;
  margin: 20px 0 0;
  color: var(--muted);
}

/* rotating hero states */
.hero-rotator { display: grid; margin-top: 26px; }
.hero-state {
  grid-area: 1/1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
  visibility: hidden;
}
.hero-state h1 { margin: 0; max-width: 15ch; }
.hero-state-sub {
  font-size: 1.08rem;
  max-width: 52ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-weight: 400;
}
.hero-state.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .hero-state { transition: opacity .35s ease; }
  .hero-state:not(.is-active) { transform: none; }
}

.hero-dots { display: flex; gap: 10px; margin-top: 24px; }
.hero-dot {
  width: 9px; height: 9px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  transition: all .3s ease;
}
.hero-dot:hover { border-color: var(--teal); }
.hero-dot.is-active {
  width: 26px;
  background: linear-gradient(95deg, var(--mint), var(--cyan));
  border-color: transparent;
}

.hero-actions {
  display: flex;
  gap: 13px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-actions .btn {
  padding: 13px 24px;
  font-size: .98rem;
}

.hero-trust {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  color: var(--faint);
  font-size: .88rem;
  font-weight: 500;
}
:root[data-theme="classic"] .hero-trust {
  color: var(--muted);
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-trust .d {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--teal);
}

/* Ask panel */
.ask-panel {
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  box-shadow: var(--shadow);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.ask-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(45,212,191,.5), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ask-eyebrow { color: var(--mint); font-weight: 800; font-size: .92rem; }
.ask-q { font-weight: 800; font-size: 1.18rem; margin: 4px 0 16px; color: var(--text); }
.ask-input {
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: var(--bg);
  padding: 14px 15px;
  min-height: 96px;
  color: var(--muted);
  font-size: .95rem;
  position: relative;
  transition: .2s;
}
.ask-input.focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45,212,191,.14);
}
.ask-input .typed { color: var(--text); }
.ask-input .caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  background: var(--teal);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.ask-send {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #062028;
  font-weight: 900;
  font-size: 1.05rem;
}
.ask-out { margin-top: 14px; display: grid; gap: 9px; }
.ask-step {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: .9rem;
  color: var(--muted);
  opacity: 0;
  transform: translateY(6px);
  transition: .4s;
}
.ask-step.show { opacity: 1; transform: none; }
.ask-step .sdot {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(45,212,191,.16);
  border: 1px solid var(--teal);
  color: var(--teal);
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 900;
  flex: 0 0 auto;
}
.ask-step b { color: var(--text); font-weight: 600; }

@media(max-width:900px) {
  .hero-split { grid-template-columns: 1fr; gap: 34px; }
  .hero-right { margin-left: 0; }
}

/* ============================================================
   HERO DASHBOARD
   ============================================================ */
.glimpse-dash {
  max-width: 1060px;
  margin: 54px auto 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
}
.dash-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(8,10,15,.5);
}
.dash-dots { display: flex; gap: 6px; }
.dash-dots span {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--line-2);
}
.dash-title {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
}
.dash-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.dash-live .pulse {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(45,212,191,.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(45,212,191,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(45,212,191,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); }
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.kpi {
  padding: 24px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kpi:nth-child(4n) { border-right: none; }
.kpi .klabel {
  font-size: .76rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.kpi .kdot {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--teal);
}
.kpi .kval {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 900;
  line-height: 1.05;
  margin-top: 10px;
  letter-spacing: -.02em;
}
.kpi .ktrend {
  font-size: .76rem;
  color: var(--faint);
  font-weight: 600;
  margin-top: 6px;
}
.kpi .ktrend b { color: var(--teal); }

.dash-foot {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
}
.dash-sys {
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.syschip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}
.syschip .ok {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--teal);
}
.dash-spark {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.dash-spark .slabel {
  font-size: .74rem;
  color: var(--muted);
  font-weight: 600;
}
.dash-spark svg { width: 100%; height: 38px; }

@media(max-width:860px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(4n) { border-right: 1px solid var(--line); }
  .kpi:nth-child(2n) { border-right: none; }
  .dash-foot { grid-template-columns: 1fr; }
  .dash-sys { border-right: none; border-bottom: 1px solid var(--line); }
}
@media(max-width:520px) {
  .dash-grid { grid-template-columns: 1fr; }
  .kpi { border-right: none !important; }
}

/* ============================================================
   LOGO STRIP
   ============================================================ */
.glimpse-strip {
  margin-top: 60px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip-inner {
  overflow: hidden;
}
.strip-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  /* Fallback until JS measures the exact pixel width of one set;
     an exact px value avoids the sub-pixel rounding snap that
     -50% can introduce at the loop point. */
  --strip-shift: 50%;
  animation: strip-scroll 26s linear infinite;
}
.strip-inner:hover .strip-track {
  animation-play-state: paused;
}
@keyframes strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--strip-shift))); }
}
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
}
.strip-cell {
  flex: 0 0 auto;
  max-width: 180px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .7;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s;
}
.strip-cell:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* Olympia's mark reads poorly in dark mode as-is; force it white. */
:root[data-theme="dark"] .strip-logo-olympia,
:root[data-theme="dark"] .strip-logo-olympia:hover {
  filter: brightness(0) invert(1);
}

/* Clancy's mark reads poorly on the light classic background; force it dark. */
:root[data-theme="classic"] .strip-logo-clancy,
:root[data-theme="classic"] .strip-logo-clancy:hover {
  filter: brightness(0);
}

/* This mark reads poorly in dark mode as-is; force it white. */
:root[data-theme="dark"] .strip-logo-white-on-dark,
:root[data-theme="dark"] .strip-logo-white-on-dark:hover {
  filter: brightness(0) invert(1);
}

/* These marks read too dark/muddy in dark mode; brighten without fully inverting. */
:root[data-theme="dark"] .strip-logo-lighten-dark {
  filter: grayscale(1) brightness(1.8);
}
:root[data-theme="dark"] .strip-logo-lighten-dark:hover {
  filter: brightness(1.3);
}
.strip-cap {
  text-align: center;
  color: var(--faint);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 18px 0 22px;
}

/* ============================================================
   SECTIONS GENERAL
   ============================================================ */
.glimpse-section { padding: 70px 0; }

.center-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 44px;
}
.center-head .kick {
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--teal);
  margin-bottom: 16px;
}
.center-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  margin: 0 0 16px;
}
.center-head p { color: var(--muted); font-size: 1.08rem; margin: 0; }

/* ============================================================
   PRODUCT TABS / SWITCHER
   ============================================================ */
.glimpse-switcher {
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  overflow: hidden;
  box-shadow: var(--shadow);
}
.glimpse-tabs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.glimpse-tab {
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  cursor: pointer;
  text-align: left;
  color: var(--muted);
  font-weight: 700;
  font-size: .95rem;
  transition: .18s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.glimpse-tab .ti {
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--faint);
}
.glimpse-tab:hover { color: var(--text); border-color: var(--line-2); }
.glimpse-tab.active {
  background: linear-gradient(180deg, rgba(45,212,191,.14), rgba(56,189,248,.06));
  border-color: var(--teal);
  color: var(--text);
}
.glimpse-tab.active .ti { background: var(--teal); }

.tab-body { display: grid; grid-template-columns: .85fr 1.15fr; }
.tab-copy {
  padding: 34px 32px;
  border-right: 1px solid var(--line);
}
.tab-copy h3 { font-size: 1.45rem; margin: 0 0 12px; }
.tab-copy p { color: var(--muted); margin: 0 0 18px; font-size: 1rem; }
.tab-copy ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.tab-copy li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: .95rem;
}
.tab-copy li b { color: var(--text); font-weight: 600; }
.chk { color: var(--teal); font-weight: 900; flex: 0 0 auto; }
.glimpse-pane { display: none; }
.glimpse-pane.active { display: grid; grid-template-columns: .85fr 1.15fr; }

.glimpse-iso {
  padding: 24px;
  background: radial-gradient(120% 120% at 70% 0%, rgba(45,212,191,.08), transparent 60%), var(--bg-2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.glimpse-iso svg { width: 100%; height: auto; max-width: 640px; }

@media(max-width:860px) {
  .glimpse-pane.active { grid-template-columns: 1fr; }
  .tab-copy { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ============================================================
   PROBLEM CARDS
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.glimpse-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  transition: .2s;
}
.glimpse-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
.glimpse-card .ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  margin-bottom: 18px;
  font-size: 1.25rem;
  background: rgba(251,113,133,.12);
  color: var(--danger);
  border: 1px solid rgba(251,113,133,.28);
}
.glimpse-card h3 { margin: 0 0 10px; font-size: 1.18rem; font-weight: 700; }
.glimpse-card p { margin: 0; color: var(--muted); font-size: .96rem; }

.closing-line {
  text-align: center;
  margin: 30px auto 0;
  font-size: 1.15rem;
  font-weight: 600;
  max-width: 72ch;
  color: var(--text);
}
.closing-line b { color: var(--teal); }

/* ============================================================
   JOURNEY / SHIFT CARDS
   ============================================================ */
.glimpse-journey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
/* A 5th card sits alone in the last row of the 2-column grid —
   center it instead of leaving it stuck in column 1. Only above
   the breakpoint where this grid is actually 2 columns. */
@media(min-width:981px) {
  .glimpse-journey .jcard:nth-child(5):last-child {
    grid-column: 1 / -1;
    max-width: 490px;
    margin: 0 auto;
  }
}
.jcard {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
}
.jhead {
  padding: 18px 24px;
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}
.jhead.old .badge { background: rgba(251,113,133,.14); color: var(--danger); border: 1px solid rgba(251,113,133,.3); }
.jhead.new .badge { background: rgba(45,212,191,.14); color: var(--teal); border: 1px solid rgba(45,212,191,.3); }
.jhead.new .badge.badge-coming-soon { background: rgba(255,214,10,.14); color: #ffd60a; border: 1px solid rgba(255,214,10,.35); }
:root[data-theme="classic"] .jhead.new .badge.badge-coming-soon { background: rgba(244,114,182,.14); color: var(--mint); border: 1px solid rgba(244,114,182,.35); }
.badge {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
}
.jrow {
  padding: 15px 24px;
  border-bottom: 1px solid var(--line);
  font-size: .97rem;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--muted);
}
.jrow:last-child { border-bottom: none; }
.jcard.new .jrow { color: var(--text); font-weight: 500; }
.jrow .mk { flex: 0 0 auto; font-weight: 900; }
.jcard.old .mk { color: var(--danger); }
.jcard.new .mk { color: var(--teal); }
.jcard.new.jcard-coming-soon .mk { color: #ffd60a; }
:root[data-theme="classic"] .jcard.new.jcard-coming-soon .mk { color: var(--mint); }
.jcard.new {
  background: linear-gradient(180deg, rgba(45,212,191,.05), var(--panel));
  border-color: var(--line-2);
}

/* ============================================================
   MODERNIZE GRID
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.prod-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  transition: .2s;
}
.prod-card:hover { border-color: var(--teal); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(45,212,191,.1);
  color: var(--teal);
  font-weight: 800;
  font-size: .76rem;
  border: 1px solid rgba(45,212,191,.28);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.prod-card h3 { font-size: 1.3rem; margin: 16px 0 10px; font-weight: 700; }
.prod-card p { color: var(--muted); margin: 0; font-size: 1rem; }
.prod-card ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.prod-card li { display: flex; gap: 10px; color: var(--muted); font-size: .96rem; }

/* ============================================================
   AGENT GRID
   ============================================================ */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-bottom: 34px;
}
.agent {
  padding: 16px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-weight: 600;
  font-size: .94rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.agent .gd {
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--teal);
  flex: 0 0 auto;
}
.agent.hl {
  background: linear-gradient(180deg, rgba(45,212,191,.12), transparent);
  border-color: rgba(45,212,191,.3);
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
.rule {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
}
.rule .b { font-size: 1.35rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.rule .t { font-size: .92rem; color: var(--muted); }
.rule .t b { color: var(--text); }

.governance {
  margin-top: 28px;
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  justify-content: center;
}
.gchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: .86rem;
}
.gchip .gd { width: 7px; height: 7px; border-radius: 999px; background: var(--teal); }

/* ============================================================
   HOW IT WORKS — FLOW
   ============================================================ */
.glimpse-flow {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
}
.flow-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  transition: .2s;
}
.flow-step:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
.flow-step .num {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}
.flow-step h3 { margin: 12px 0 8px; font-size: 1.05rem; font-weight: 700; }
.flow-step p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ============================================================
   INTEGRATION CLOUD
   ============================================================ */
.int-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 880px;
  margin: 0 auto;
}
.int {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  transition: .2s;
}
.int:hover { border-color: var(--teal); transform: translateY(-2px); }
.int .id { width: 8px; height: 8px; border-radius: 3px; background: var(--teal); }

/* ============================================================
   PROOF / STATS
   ============================================================ */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.stat { text-align: center; }
.stat .big {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
}
.stat .lbl {
  color: var(--muted);
  font-size: .92rem;
  margin: 10px auto 0;
  max-width: 24ch;
}

.tiers {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
.tier {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: var(--panel);
  text-align: center;
  transition: .2s;
}
.tier:hover { border-color: var(--teal); }
.tier .tn { font-weight: 800; font-size: .95rem; color: var(--muted); }
.tier .tp { font-size: 1.7rem; font-weight: 900; margin: 6px 0 4px; }
.tier .td { color: var(--faint); font-size: .84rem; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-rail {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.quote {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 230px;
}
.quote p { font-size: 1.02rem; color: var(--text); margin: 0 0 24px; line-height: 1.5; }
.qfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.qav {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #062028;
  font-weight: 900;
  font-size: .9rem;
}
.qname { font-weight: 700; font-size: .92rem; }
.qrole { color: var(--muted); font-size: .82rem; }

/* ============================================================
   ENTERPRISE / BUILT-FOR-OPERATORS
   ============================================================ */
.ent-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.ent {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: 24px;
  transition: .2s;
}
.ent:hover { border-color: var(--line-2); transform: translateY(-3px); }
.ent .ei {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  font-size: 1.1rem;
  background: rgba(45,212,191,.1);
  color: var(--teal);
  border: 1px solid rgba(45,212,191,.26);
}
.ent h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 700; }
.ent p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.glimpse-manifesto {
  max-width: 880px;
  margin: 0 auto;
  border-left: 2px solid var(--teal);
}
.mline {
  padding: 18px 0 18px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 1.16rem;
  font-weight: 500;
  position: relative;
  color: var(--text);
}
.mline:last-child { border-bottom: none; }
.mline::before {
  content: "";
  position: absolute;
  left: -7px; top: 26px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--teal);
}
.mline b { color: var(--teal); font-weight: 700; }

/* ============================================================
   FINAL CTA BOX
   ============================================================ */
.cta-box {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 44px;
  border-radius: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: radial-gradient(120% 140% at 50% 0%, rgba(45,212,191,.16), transparent 60%), var(--panel);
}
.cta-box h2 {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.05;
  margin: 0 auto 18px;
  max-width: 20ch;
  font-weight: 900;
}
.cta-box p {
  max-width: 58ch;
  margin: 0 auto 30px;
  color: var(--muted);
  font-size: 1.08rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.glimpse-footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  margin-top: 30px;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.glimpse-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: .92rem;
  font-weight: 600;
}
.glimpse-footer-nav a { color: var(--muted); }
.glimpse-footer-nav a:hover { color: var(--teal); }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media(max-width:980px) {
  .glimpse-nav-links { display: none; }
  .grid-3, .grid-2, .glimpse-flow, .glimpse-journey,
  .agent-grid, .rule-grid, .proof-grid, .quote-rail, .tiers {
    grid-template-columns: 1fr;
  }
  .agent-grid, .rule-grid, .proof-grid, .tiers { grid-template-columns: 1fr 1fr; }
  .quote-rail { grid-template-columns: 1fr; }
}
@media(max-width:860px) {
  .ent-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:560px) {
  .agent-grid, .proof-grid, .tiers { grid-template-columns: 1fr; }
  .cta-box { padding: 40px 22px; }
  .glimpse-tabs { grid-template-columns: 1fr; }
  .ent-grid { grid-template-columns: 1fr; }
}


/* Careers Board */
#BambooHR, #BambooHR *,
#BambooHR-Footer, #BambooHR-Footer * {
  all: revert !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#BambooHR ul {
  list-style: none !important;
}

/* Optional: hide the "Powered by BambooHR" footer/logo entirely */
#BambooHR-Footer {
  display: none !important;
}

.BambooHR-ATS-board h2 {color: #fff !important;}

#BambooHR {
  background: var(--panel)  !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  transition: .2s;
}
#BambooHR:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
#BambooHR h2 {
  font-size: 1.4rem !Important;
  margin-bottom: 1em !important;
}
#BambooHR  .BambooHR-ATS-Department-Header  { 
  color: var(--mint) !important; 
  font-weight: 800 !important; 
  font-size: .75rem !important; 
  text-transform: uppercase !important;
}

#BambooHR .BambooHR-ATS-Location {
  display: inline-flex  !important;
  align-items: center  !important;
  gap: 8px  !important;
  padding: 6px 13px  !important;
  border-radius: 999px  !important;
  background: rgba(45,212,191,.1)  !important;
  color: var(--teal)  !important;
  font-weight: 800  !important;
  font-size: .6rem  !important;
  border: 1px solid rgba(45,212,191,.28)  !important;
  letter-spacing: .04em  !important;
  text-transform: uppercase  !important;
}

#BambooHR .BambooHR-ATS-Jobs-Item a{
  text-decoration: none !important;
  margin-right: .5em !important;
  font-weight: bold !important;
  vertical-align: middle !Important;
  line-height: 2em !Important;
}

#BambooHR .BambooHR-ATS-Jobs-List {
  margin-bottom: 1em !important;
}
#BambooHR  #BambooHR-ATS + div {display: none !Important;}

/* ============================================================
   SINGLE POST (single.php)
   ============================================================ */
.glimpse-single { 
  padding: 60px 0 90px;
  margin: 0px auto; }

.glimpse-single-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.glimpse-post-header { 
  margin-bottom: 30px; 
  padding-bottom: 30px; 
  border-bottom: 1px solid #1ECECE;}

header.glimpse-post-header .entry-title span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
figcaption {
  font-size: 11px;
  color: var(--text);
  font-style: italic;
  margin-top: 8px;
  letter-spacing: 0.04em;
}
.photo-caption { color: #ffd60a; }
:root[data-theme="classic"] .photo-caption { color: #d946ef; }
.subheadline {
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  max-width: 580px;
}

.glimpse-post-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.glimpse-post-header .entry-title {
  margin: 0 0 16px;
}

.glimpse-post-header .kick {
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--teal);
  margin-bottom: 16px;
  margin-left: 14px;
}

.glimpse-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 500;
}
.glimpse-post-meta a { color: var(--muted); }
.glimpse-post-meta a:hover { color: var(--teal); }
.glimpse-post-sep { color: var(--faint); }

.glimpse-post-thumb {
  margin: 30px 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.glimpse-post-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.glimpse-post-content {
  color: var(--text);
  font-size: 1.06rem;
  line-height: 1.75;
}
.glimpse-post-content > * + * { margin-top: 1.4em; }
.glimpse-post-content h2,
.glimpse-post-content h3,
.glimpse-post-content h4 {
  line-height: 1.25;
  margin-top: 1.8em;
}
.glimpse-post-content p { color: var(--text); }
.glimpse-post-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.glimpse-post-content a:hover { color: var(--mint); }
.glimpse-post-content ul,
.glimpse-post-content ol { padding-left: 1.4em; color: var(--text); }
.glimpse-post-content li + li { margin-top: .5em; }
.glimpse-post-content blockquote {
  margin: 0;
  padding: 4px 22px;
  border-left: 3px solid var(--teal);
  color: var(--muted);
  font-style: italic;
}
.glimpse-post-content code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: .9em;
}
.glimpse-post-content pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  overflow-x: auto;
}
.glimpse-post-content pre code {
  background: none;
  border: none;
  padding: 0;
}
.glimpse-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}
.glimpse-post-content hr {
  border: none;
  border-top: 1px solid var(--line);
}
.glimpse-post-content .page-links {
  font-weight: 700;
  color: var(--muted);
}

.glimpse-post-footer { margin-top: 40px; }
.glimpse-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.glimpse-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.glimpse-post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  transition: .18s;
}
.glimpse-post-nav-link:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.glimpse-post-nav-link.is-next { text-align: right; align-items: flex-end; }
.glimpse-post-nav-kick {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal);
}
.glimpse-post-nav-title {
  font-weight: 700;
  color: var(--text);
}

.glimpse-post-comments { margin-top: 50px; }

@media(max-width:640px) {
  .glimpse-post-nav { grid-template-columns: 1fr; }
  .glimpse-post-nav-link.is-next { text-align: left; align-items: flex-start; }
}

/* ============================================================
   BLOG ARCHIVE / INDEX (archive.php)
   ============================================================ */
.glimpse-blog { padding: 60px 0 90px; }
.glimpse-blog .subheadline {margin: 0 auto;max-width: 100%;}
.glimpse-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Center the row (instead of stretching/left-aligning) when
   there are fewer than 3 posts, keeping cards a fixed width. */
.glimpse-post-grid:has(.glimpse-post-card:nth-child(1):last-child) {
  grid-template-columns: min(382px, 100%);
  justify-content: center;
}
.glimpse-post-grid:has(.glimpse-post-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, min(382px, 100%));
  justify-content: center;
}

.glimpse-post-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line) !important;
  border-radius: 18px;
  overflow: hidden;
  transition: .2s;
  background-color: var(--panel) !important;
  padding: 24px !Important;
}
.glimpse-post-card:hover {
  border-color: var(--teal) !important;
  transform: translateY(-3px);
}

.glimpse-post-card-thumb {
  display: block;
  aspect-ratio: 16 / 8;
 /* background: var(--panel-2); */
  overflow: hidden;
  margin-bottom: 1em;
}
.glimpse-post-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: .3s;
}
.glimpse-post-card:hover .glimpse-post-card-thumb img { transform: scale(1.04); }
.glimpse-post-card-thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--grad);
  opacity: .18;
}

.glimpse-post-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  flex: 1;
}
.glimpse-post-card-body .pill {
  text-align: center;
  display: block;
}

.glimpse-post-card-title {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.35;
}
.glimpse-post-card-title a { color: var(--text); }
.glimpse-post-card-title a:hover { color: var(--mint); }

.glimpse-post-card-excerpt {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.6;
  flex: 1;
}

.glimpse-post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--faint);
}

.glimpse-post-card-link {
  color: var(--teal);
  font-weight: 700;
}
.glimpse-post-card-link:hover { color: var(--mint); }

.glimpse-no-posts {
  text-align: center;
  color: var(--muted);
  padding: 60px 0;
}

/* Pagination */
.glimpse-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 54px;
}
.glimpse-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  font-size: .92rem;
}
.glimpse-pagination .page-numbers:hover { border-color: var(--teal); color: var(--text); }
.glimpse-pagination .page-numbers.current {
  background: var(--grad);
  border-color: transparent;
  color: #062028;
  font-weight: 800;
}
.glimpse-pagination .page-numbers.dots {
  border: none;
  color: var(--faint);
}

@media(max-width:980px) {
  .glimpse-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:640px) {
  .glimpse-post-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BOOK A DEMO MODAL
   ============================================================ */
body.glimpse-modal-open { overflow: hidden; }

.glimpse-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.glimpse-modal.is-open { display: flex; }

.glimpse-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4,6,10,.78);
  backdrop-filter: blur(4px);
}

.glimpse-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 40px;
  animation: glimpse-modal-in .22s ease;
}

@keyframes glimpse-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.glimpse-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--line-2) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: .18s;
  box-shadow: none !important;
}
.glimpse-modal-close:hover {
  border-color: var(--teal) !important;
  color: var(--text) !important;
  background: transparent !important;
}

.glimpse-modal-title {
  margin: 0 0 20px;
  font-size: 1.5rem;
  padding-right: 30px;
}

/* WPForms dark-theme overrides inside the modal */
.glimpse-modal-body .wpforms-container { margin: 0 !important; }
.glimpse-modal-body .wpforms-field-label,
.glimpse-modal-body .wpforms-field-label-inline { color: var(--text) !important; }
.glimpse-modal-body .wpforms-field-description,
.glimpse-modal-body .wpforms-field-sublabel { color: var(--muted) !important; }
.glimpse-modal-body input[type="text"],
.glimpse-modal-body input[type="email"],
.glimpse-modal-body input[type="tel"],
.glimpse-modal-body input[type="number"],
.glimpse-modal-body input[type="url"],
.glimpse-modal-body select,
.glimpse-modal-body textarea {
  background: var(--panel-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.glimpse-modal-body .wpforms-submit-container button {
  background: var(--grad) !important;
  color: #062028 !important;
  border: none !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
}

@media(max-width:640px) {
  .glimpse-modal-panel { padding: 32px 22px; }
}

/* WPForms multi-page (Page Break) overrides inside the modal */
.glimpse-modal-body .wpforms-page-indicator-page-title,
.glimpse-modal-body .wpforms-page-indicator-page-number { color: var(--muted) !important; }
.glimpse-modal-body .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number,
.glimpse-modal-body .wpforms-page-indicator-page.active .wpforms-page-indicator-page-title { color: var(--teal) !important; }

.glimpse-modal-body .wpforms-page-indicator-page-number {
  background: var(--panel-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text) !important;
}
.glimpse-modal-body .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
  background: var(--grad) !important;
  border-color: transparent !important;
  color: #062028 !important;
}

.glimpse-modal-body .wpforms-page-indicator-steps,
.glimpse-modal-body .wpforms-page-indicator-steps-current {
  color: var(--muted) !important;
}

.glimpse-modal-body .wpforms-page-indicator-page-progress-wrap {
  background-color: var(--panel-2) !important;
}
.glimpse-modal-body .wpforms-page-indicator-page-progress {
  background-color: var(--teal) !important;
  background-image: var(--grad) !important;
}

.glimpse-modal-body .wpforms-page-indicator.connector .wpforms-page-indicator-page::before,
.glimpse-modal-body .wpforms-page-indicator.connector .wpforms-page-indicator-page::after {
  background: var(--line-2) !important;
}

.glimpse-modal-body .wpforms-page-button {
  border-radius: 10px !important;
  font-weight: 800 !important;
  padding: 11px 19px !important;
  border: 1px solid transparent !important;
}
.glimpse-modal-body .wpforms-page-next {
  background: var(--grad) !important;
  color: #062028 !important;
}
.glimpse-modal-body .wpforms-page-prev {
  background: transparent !important;
  border-color: var(--line-2) !important;
  color: var(--text) !important;
}

/* Match the .wp-block-glimpse-blocks-blog-intro.intro treatment */
#wpforms-confirmation-160,
#wpforms-confirmation-96 {
  background: var(--panel-2);
  border: none !important;
  border-left: 3px solid var(--teal) !important;
  padding: 20px 24px;
  margin-bottom: 40px;
  font-style: italic;
  color: var(--text);
  line-height: 1.75;
}
#wpforms-confirmation-160 p,
#wpforms-confirmation-96 p { color: #fff; }
:root[data-theme="classic"] #wpforms-confirmation-160 p,
:root[data-theme="classic"] #wpforms-confirmation-96 p { color: #2b6777; }