/* ============================================================
   Loudspeaker — site components, built on GTM 8020 tokens
   (links lm-base.css first for tokens, then this file)
   ============================================================ */

/* Declare the site as dark so mobile browsers don't force-dark / invert it
   (was flipping the white logos to black under auto dark mode). */
:root { color-scheme: dark; }

/* ---- Site shell ---- */
.ls-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-6); }
@media (max-width: 768px){ .ls-wrap { padding: 0 var(--sp-4); } }
.ls-section { padding: var(--sp-16) 0; position: relative; }
.ls-section.tight { padding: var(--sp-12) 0; }
@media (max-width: 768px){ .ls-section { padding: var(--sp-12) 0; } }

/* faint signal grid backdrop, used on hero + dark blocks */
.signal-bg { position: relative; }
.signal-bg::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(ellipse 82% 72% at 50% -4%, transparent 0%, var(--bg) 74%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  opacity:.6;
}
.signal-bg > * { position: relative; z-index: 1; }

/* ---- Top nav ---- */
.ls-nav{
  position: sticky; top: 0; z-index: 200;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}
.ls-nav-inner{ display:flex; align-items:center; gap: var(--sp-6); height: 66px; }
.ls-brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.ls-brand img{ height: 21px; width:auto; }
.ls-nav-links{ display:flex; align-items:center; gap: 4px; margin-left: var(--sp-4); }
.ls-nav-links a{
  font-size: 14px; font-weight:500; color: var(--text-soft);
  padding: 8px 12px; border-radius: var(--radius); transition: color .18s var(--ease-standard), background .18s var(--ease-standard);
  letter-spacing:-.01em;
}
.ls-nav-links a:hover{ color: var(--text-strong); background: var(--surface); }
.ls-nav-links a[aria-current="page"]{ color: var(--accent); }
.ls-nav-right{ margin-left:auto; display:flex; align-items:center; gap: var(--sp-3); }
.ls-nav-social{ display:flex; gap:2px; }
.ls-nav-social a{ width:34px; height:34px; display:grid; place-items:center; border-radius:var(--radius); color:var(--text-muted); transition:.18s var(--ease-standard); }
.ls-nav-social a:hover{ color:var(--accent); background:var(--surface); }
.ls-nav-social svg{ width:15px; height:15px; }
.ls-burger{ display:none; width:40px;height:40px; border-radius:var(--radius); color:var(--text-strong); }
.ls-burger:hover{ background:var(--surface); }
@media (max-width: 900px){
  .ls-nav-links, .ls-nav-social{ display:none; }
  .ls-burger{ display:grid; place-items:center; }
  .ls-nav-links.open{
    display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch;
    background: var(--bg); border-bottom:1px solid var(--border); padding: var(--sp-3); gap:2px;
  }
  .ls-nav-links.open a{ padding: 12px; font-size:16px; }
}

/* ---- Eyebrow w/ live dot (reuses .eyebrow) ---- */
.ls-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-pill);
  padding: 6px 14px 6px 10px; font-size: 12px; font-weight:600; color: var(--text-medium);
  letter-spacing:.01em; white-space:nowrap;
}
.ls-eyebrow .av{ display:flex; }
.ls-eyebrow .av img{ width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid var(--bg); margin-left:-7px; }
.ls-eyebrow .av img:first-child{ margin-left:0; }
.ls-eyebrow b{ color:var(--accent); font-weight:700; }

/* ---- Buttons (extend lm-base) ---- */
.btn-xl{ padding: 15px 26px; font-size: 16px; min-height: 56px; border-radius: var(--radius-md); }

/* ---- Equalizer accent mark (3 lime bars) ---- */
.eq{ display:inline-flex; align-items:flex-end; gap:3px; height:1em; }
.eq i{ width:3px; background: var(--accent); border-radius:2px; animation: eqp 1.1s ease-in-out infinite; }
.eq i:nth-child(1){ height:40%; animation-delay:0s; }
.eq i:nth-child(2){ height:100%; animation-delay:.18s; }
.eq i:nth-child(3){ height:65%; animation-delay:.36s; }
.eq i:nth-child(4){ height:85%; animation-delay:.54s; }
@keyframes eqp{ 0%,100%{ transform: scaleY(.4); } 50%{ transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .eq i{ animation:none; } }

/* ---- Hero ---- */
.ls-hero{ padding: var(--sp-16) 0 var(--sp-12); text-align:center; }
.ls-hero h1{
  font-size: clamp(46px, 9vw, 116px); line-height: .92; letter-spacing: -.045em; font-weight: 500;
  margin: var(--sp-6) 0 var(--sp-4); text-wrap: balance;
}
.ls-hero h1 .vol{ color: var(--accent); position:relative; white-space:nowrap; }
.ls-hero h1 .eq{ height:.55em; gap:.08em; margin-left:.2em; vertical-align:baseline; }
.ls-hero h1 .eq i{ width:.1em; border-radius:.04em; }
.ls-hero .lede{ font-size: clamp(17px, 2.4vw, 21px); color: var(--text-soft); max-width: 52ch; margin: 0 auto var(--sp-6); line-height:1.45; }
.ls-hero .cta-row{ display:flex; gap: var(--sp-3); justify-content:center; flex-wrap:wrap; }

/* ---- Result-card marquee ---- */
.marquee{ position:relative; overflow:hidden; }
.marquee::before, .marquee::after{ content:''; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.marquee-track{ display:flex; gap: var(--sp-3); width:max-content; animation: scrollx var(--mq-dur,52s) linear infinite; }
.marquee.rev .marquee-track{ animation-direction: reverse; }
@keyframes scrollx{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

.result-card{
  flex:0 0 300px; width:300px; border:1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--c-dark); overflow:hidden; position:relative;
}
.result-card .thumb{ height:150px; background: var(--surface); overflow:hidden; position:relative; }
.result-card .thumb img{ width:100%;height:100%;object-fit:cover; opacity:.92; }
.result-card .thumb .vizsvg{ display:block; width:100%; height:100%; }
.result-card .thumb .chip{ position:absolute; top:10px; left:10px; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-pill); background:rgba(0,0,0,.6); backdrop-filter:blur(6px); border:1px solid var(--border); color:var(--text-medium); }
.result-card .body{ padding: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-3); }
.result-card .name{ font-size:16px; font-weight:600; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.result-card .stat{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.result-card .stat .k{ font-size:11.5px; color:var(--text-muted); }
.result-card .stat .v{ font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--accent); font-variant-numeric:tabular-nums; }
.result-card .stat .v.up::after{ content:'▲'; font-size:9px; margin-left:5px; color:var(--positive); }
.result-card .spark{ height:34px; width:100%; }

/* ---- Logo wall ---- */
.logowall{ }
.logowall .head{ text-align:center; max-width: 60ch; margin: 0 auto var(--sp-8); }
.logo-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background: var(--border); }
@media (max-width: 880px){ .logo-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px){ .logo-grid{ grid-template-columns: repeat(2,1fr); } }
.logo-cell{ background: var(--bg); aspect-ratio: 16/9; display:grid; place-items:center; padding: var(--sp-3); transition: background .2s var(--ease-standard); user-select:none; -webkit-user-select:none; }
.logo-cell img{ max-height: 30px; max-width: 78%; width:auto; object-fit:contain; opacity:.85; filter: brightness(0) invert(1); transition:.25s var(--ease-standard); user-select:none; -webkit-user-select:none; -webkit-user-drag:none; pointer-events:none; }
.logo-cell img[alt="Herb"], .logo-cell img[alt="Modal"], .logo-cell img[alt="Workstream"]{ max-height:23px; }
.logo-cell img[alt="Landbase"], .logo-cell img[alt="Luxury Presence"]{ max-height:38px; max-width:86%; }
.logo-cell img[alt="Alma"]{ height:32px; max-height:none; max-width:90%; }
.logo-cell:hover img{ opacity:1; }
.logo-txt{ font-size:17px; font-weight:600; letter-spacing:-.02em; color:rgba(230,230,230,.9); opacity:1; transition:.25s var(--ease-standard); }
.logo-cell:hover .logo-txt{ color:#fff; }
.logo-cell .ico-wrap{ display:flex; align-items:center; gap:9px; opacity:.85; transition:.25s var(--ease-standard); }
.logo-cell:hover .ico-wrap{ opacity:1; }
.logo-cell .ico-wrap .logo-txt{ opacity:1; }
.logo-ico{ width:26px; height:26px; object-fit:contain; border-radius:6px; background:#fff; padding:3px; }
.logo-combo{ display:inline-flex; align-items:center; gap:9px; }
.logo-combo svg{ width:27px; height:27px; color:#fff; flex:0 0 auto; }
.logo-combo img{ height:21px; width:auto; max-height:none; }

/* ---- Logo wall responsive: keep cells compact + logos a consistent size ---- */
@media (max-width: 880px){
  .logo-cell{ aspect-ratio:auto; height:118px; }
}
@media (max-width: 520px){
  .logo-cell{ aspect-ratio:auto; height:94px; padding: var(--sp-3); }
  .logo-cell img{ max-height:24px; max-width:62%; }
  .logo-cell img[alt="Herb"], .logo-cell img[alt="Modal"], .logo-cell img[alt="Workstream"]{ max-height:19px; }
  .logo-cell img[alt="Landbase"], .logo-cell img[alt="Luxury Presence"]{ max-height:29px; max-width:68%; }
  .logo-cell img[alt="Alma"]{ height:24px; max-width:68%; }
  .logo-combo img{ height:18px; }
  .logo-combo svg{ width:23px; height:23px; }
  .logo-txt{ font-size:14px; }
}

/* ---- Logo wall: starfield twinkle (--lit driven from rAF in ls.js) ---- */
@property --lit{ syntax:'<number>'; inherits:true; initial-value:0; }

.logo-grid.anim-on .logo-cell{ --lit:0; position:relative; isolation:isolate; overflow:hidden; }

/* center bloom + accent ring */
.logo-grid.anim-on .logo-cell::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(120% 145% at 50% 50%, rgba(231,254,59,.20), transparent 60%);
  opacity: var(--lit);
  box-shadow: inset 0 0 0 1px rgba(231,254,59, calc(.24 * var(--lit)));
  transition: opacity .2s linear;
}
.logo-grid.anim-on .logo-cell > *{ position:relative; z-index:1; }
.logo-grid.anim-on .logo-cell img{
  opacity: calc(.8 + .2 * var(--lit));
  filter: brightness(0) invert(1)
          drop-shadow(0 0 calc(10px * var(--lit)) rgba(231,254,59, calc(.55 * var(--lit))));
  transform: translateY(calc(-2px * var(--lit)));
}
.logo-grid.anim-on .logo-cell .logo-txt{
  color: color-mix(in oklab, #fff, var(--accent) calc(60% * var(--lit)));
  text-shadow: 0 0 calc(14px * var(--lit)) rgba(231,254,59, calc(.45 * var(--lit)));
}

/* one-time entrance — real props, ticks fine as a CSS keyframe */
@keyframes logoCellIn{
  from{ opacity:0; transform: translateY(12px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.logo-grid.anim-on.in .logo-cell{ animation: logoCellIn .55s cubic-bezier(.2,.75,.25,1) both; }

@media (prefers-reduced-motion: reduce){
  .logo-grid.anim-on .logo-cell{ animation:none; --lit:0; opacity:1; }
  .logo-grid.anim-on .logo-cell::before{ display:none; }
}

/* ---- Process / steps ---- */
.steps-head{ display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items:end; margin-bottom: var(--sp-8); }
@media (max-width: 820px){ .steps-head{ grid-template-columns:1fr; gap:var(--sp-4); } }
/* Side-nav + large panel layout */
.step-layout{ display:grid; grid-template-columns: 248px 1fr; gap: var(--sp-6); align-items:start; }
@media (max-width: 820px){ .step-layout{ grid-template-columns:1fr; gap: var(--sp-4); } }
.step-nav{ display:flex; flex-direction:column; gap:2px; }
.step-item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding: 13px 16px; border-radius: var(--radius-md); border-left:2px solid transparent;
  background:transparent; color: var(--text-muted); font:inherit; cursor:pointer;
  transition: color .18s var(--ease-standard), background .18s var(--ease-standard), border-color .18s var(--ease-standard);
}
.step-item .n{ font-variant-numeric:tabular-nums; font-size:12px; font-weight:600; opacity:.65; flex:0 0 auto; }
.step-item .t{ font-size:15px; font-weight:500; letter-spacing:-.01em; }
.step-item:hover{ color: var(--text-soft); background: var(--surface); }
.step-item[aria-selected="true"]{ color: var(--text-strong); background: color-mix(in srgb, var(--accent) 9%, transparent); border-left-color: var(--accent); }
.step-item[aria-selected="true"] .n{ color: var(--accent); opacity:1; }

.step-panel{ display:grid; grid-template-columns: 1fr 1.15fr; gap:0; border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; background: var(--c-dark); }
@media (max-width: 820px){ .step-panel{ grid-template-columns:1fr; } }
.step-panel .meta{ padding: var(--sp-8); display:flex; flex-direction:column; gap: var(--sp-3); }
.step-panel .meta .lab{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-muted); }
.step-panel .meta .lab b{ color: var(--accent); }
.step-panel .meta h3{ font-size: clamp(26px,3.4vw,38px); line-height:1.02; letter-spacing:-.03em; font-weight:500; }
.step-panel .meta p{ font-size: 15.5px; color: var(--text-soft); line-height:1.55; max-width: 44ch; }
.step-panel .meta .dots{ display:flex; gap:6px; margin-top:auto; }
.step-panel .meta .dots i{ width:7px;height:7px;border-radius:50%; background:var(--surface-raised); transition:.2s; }
.step-panel .meta .dots i.on{ background: var(--accent); width:22px; border-radius:var(--radius-pill); }
.step-panel .vis{ border-left:1px solid var(--border); min-height:340px; background: linear-gradient(#111a0f, #06090a); position:relative; overflow:hidden; }
@media (max-width: 820px){ .step-panel .vis{ border-left:none; border-top:1px solid var(--border); min-height:260px; } }
.step-panel .vis img{ width:100%;height:100%;object-fit:cover; position:absolute; inset:0; opacity:0; transition: opacity .5s var(--ease-standard); }
.step-panel .vis img.on{ opacity:.95; }
.step-panel .vis .vis-item{ position:absolute; inset:0; opacity:0; transition: opacity .5s var(--ease-standard); }
.step-panel .vis .vis-item.on{ opacity:1; }
.step-panel .vis .vis-item svg{ display:block; width:100%; height:100%; }

/* ---- Testimonials ---- */
.tm-feature{ display:grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-8); align-items:stretch; }
@media (max-width: 860px){ .tm-feature{ grid-template-columns:1fr; } }
.tm-big{ padding: var(--sp-8); }
.tm-big .q{ font-size: clamp(20px, 2.6vw, 27px); line-height: 1.32; letter-spacing:-.02em; color: var(--text-strong); font-weight:500; text-wrap:pretty; }
.tm-big .q::before{ content:'“'; color: var(--accent); }
.tm-big .who{ display:flex; align-items:center; gap: var(--sp-3); margin-top: var(--sp-6); }
.tm-big .who img{ width:46px;height:46px;border-radius:50%;object-fit:cover; }
.tm-big .who .tm-ava{ width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);display:grid;place-items:center;font-weight:700;font-size:15px;letter-spacing:-.01em;flex:0 0 auto; }
.tm-big .who .nm{ font-weight:600; font-size:15px; }
.tm-big .who .ro{ font-size:13px; color: var(--text-muted); }
.tm-big .who .logo{ margin-left:auto; }
.tm-rail{ display:flex; flex-direction:column; gap: var(--sp-3); }
.tm-mini{ padding: var(--sp-4); cursor:pointer; transition:.2s var(--ease-standard); }
.tm-mini:hover{ background: var(--surface-raised); }
.tm-mini[aria-pressed="true"]{ border-top-color: var(--accent); }
.tm-mini .mq{ font-size:14px; line-height:1.5; color: var(--text-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tm-mini .who{ display:flex; align-items:center; gap:10px; margin-top: var(--sp-3); }
.tm-mini .who img{ width:30px;height:30px;border-radius:50%;object-fit:cover; }
.tm-mini .who .tm-ava{ width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);display:grid;place-items:center;font-weight:700;font-size:10.5px;flex:0 0 auto; }
.tm-mini .who .nm{ font-size:13px; font-weight:600; }
.tm-mini .who .ro{ font-size:11.5px; color: var(--text-muted); }

/* ---- FAQ accordion ---- */
.faq{ max-width: 820px; margin: 0 auto; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); padding: var(--sp-4) 0; font-size: clamp(17px,2.2vw,21px); font-weight:500; letter-spacing:-.02em; color: var(--text-strong); }
.faq-q .ic{ flex:0 0 auto; width:28px;height:28px;border-radius:50%; border:1px solid var(--border); display:grid;place-items:center; color:var(--accent); transition:.25s var(--ease-standard); }
.faq-q[aria-expanded="true"] .ic{ transform: rotate(45deg); background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); }
.faq-a{ overflow:hidden; max-height:0; transition: max-height .3s var(--ease-standard); }
.faq-a .inner{ padding: 0 0 var(--sp-4); color: var(--text-soft); font-size:16px; line-height:1.6; max-width: 64ch; }

/* ---- Big CTA band ---- */
.cta-band{ text-align:center; border:1px solid var(--border); border-top:2.5px solid var(--accent); border-radius: 18px; padding: var(--sp-16) var(--sp-6); background: var(--c-dark); position:relative; overflow:hidden; }
.cta-band::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 100% at 50% 120%, rgba(231,254,59,.14), transparent 70%); pointer-events:none; }
.cta-band h2{ font-size: clamp(32px,5vw,60px); line-height:1; letter-spacing:-.04em; font-weight:500; margin-bottom: var(--sp-4); }
.cta-band p{ color: var(--text-soft); max-width: 48ch; margin: 0 auto var(--sp-6); font-size:17px; }

/* ---- Footer ---- */
.ls-foot{ border-top:1px solid var(--border); padding: var(--sp-16) 0 var(--sp-8); }
.ls-foot-top{ display:grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-12); }
@media (max-width: 860px){ .ls-foot-top{ grid-template-columns:1fr; gap: var(--sp-8); } }
.ls-foot .brand img{ height:24px; margin-bottom: var(--sp-4); }
.ls-foot .brand p{ color: var(--text-muted); font-size:14px; max-width:34ch; line-height:1.5; }
.ls-foot .col h4{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-muted); font-weight:700; margin-bottom: var(--sp-4); }
.ls-foot .col a{ display:block; color: var(--text-soft); font-size:15px; padding: 5px 0; transition:color .15s; }
.ls-foot .col a:hover{ color: var(--accent); }
.ls-foot .news label{ font-size:14px; color: var(--text-soft); display:block; margin-bottom: var(--sp-3); line-height:1.5; }
.ls-foot .news .field{ display:flex; gap:8px; }
.ls-foot .news input{ flex:1; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; color: var(--text-strong); font: inherit; font-size:14px; }
.ls-foot .news input:focus{ outline:none; border-color: var(--accent); }
.ls-foot .news .fine{ font-size:11.5px; color: var(--text-muted); margin-top: var(--sp-3); line-height:1.5; max-width:40ch; }
.ls-foot-bot{ display:flex; justify-content:space-between; align-items:center; gap: var(--sp-4); flex-wrap:wrap; margin-top: var(--sp-12); padding-top: var(--sp-6); border-top:1px solid var(--border); font-size:13px; color: var(--text-muted); }
.ls-foot-bot .socials{ display:flex; gap:4px; }
.ls-foot-bot .socials a{ width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius);border:1px solid var(--border);color:var(--text-muted);transition:.18s var(--ease-standard); }
.ls-foot-bot .socials a:hover{ color:var(--accent); border-color:var(--border-strong); }
.ls-foot-bot .socials svg{ width:15px;height:15px; }

/* ---- Parent-brand banner ---- */
.gtm-banner{ border-top:1px solid var(--border); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.gtm-banner-inner{ display:flex; align-items:center; justify-content:center; gap:14px; padding: var(--sp-6) var(--sp-6); flex-wrap:wrap; text-align:center; }
.gtm-banner .lbl{ font-size:13.5px; color: var(--text-muted); letter-spacing:.01em; white-space:nowrap; }
.gtm-banner .lbl b{ color: var(--text-soft); font-weight:600; }
.gtm-banner .gtm-lockup{ display:inline-flex; align-items:center; gap:10px; }
.gtm-banner .gtm-lockup img{ height:26px; width:auto; }
.gtm-banner .gtm-li{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:var(--radius); border:1px solid var(--border); color:var(--text-muted); transition:.18s var(--ease-standard); }
.gtm-banner .gtm-li:hover{ color:var(--accent); border-color:var(--border-strong); }
.gtm-banner .gtm-li svg{ width:15px; height:15px; }

/* ---- A/B compare switcher ---- */
.ab-switch{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9998; display:flex; align-items:center; gap:6px; padding:6px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.ab-switch .lbl{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); font-weight:700; padding:0 8px; }
.ab-switch a{ padding:7px 14px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; color:var(--text-soft); transition:.18s var(--ease-standard); }
.ab-switch a:hover{ color:var(--text-strong); }
.ab-switch a[aria-current="page"]{ background:var(--accent); color:var(--text-on-accent); }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---- Section label ---- */
.sec-label{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom: var(--sp-4); }
.sec-label .ln{ height:1px; width:42px; background: var(--accent); opacity:.6; }
.sec-h{ font-size: clamp(30px,5vw,54px); line-height:1; letter-spacing:-.035em; font-weight:500; text-wrap:balance; }
.sec-sub{ font-size:17px; color: var(--text-soft); max-width:58ch; margin-top: var(--sp-4); line-height:1.5; }
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* ============ Inner pages ============ */
.page-hero{ padding: var(--sp-16) 0 var(--sp-8); }
.page-hero h1{ font-size: clamp(40px,7vw,84px); line-height:.95; letter-spacing:-.04em; font-weight:500; text-wrap:balance; margin: var(--sp-4) 0; }
.page-hero h1 .vol{ color: var(--accent); }
.page-hero p{ font-size: clamp(17px,2.2vw,20px); color: var(--text-soft); max-width: 56ch; line-height:1.45; }

/* Filter toolbar */
.filterbar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom: var(--sp-8); }
.fb-btn{ padding: 9px 16px; border-radius: var(--radius-pill); border:1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size:13px; font-weight:600; transition:.18s var(--ease-standard); }
.fb-btn:hover{ color: var(--text-strong); border-color: var(--border-strong); }
.fb-btn[aria-pressed="true"]{ background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

/* Post / case grid */
.post-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
@media (max-width: 900px){ .post-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .post-grid{ grid-template-columns: 1fr; } }
.post{ border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; background: var(--c-dark); display:flex; flex-direction:column; transition:.25s var(--ease-standard); }
.post:hover{ border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.3); }
.post .thumb{ aspect-ratio: 16/10; background: var(--surface); overflow:hidden; position:relative; }
.post .thumb img{ width:100%;height:100%;object-fit:cover; opacity:.92; transition: transform .4s var(--ease-standard); }
.post:hover .thumb img{ transform: scale(1.04); }
.post .thumb .cat{ position:absolute; top:12px; left:12px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-pill); background: var(--accent); color: var(--text-on-accent); }
.post .body{ padding: var(--sp-4); display:flex; flex-direction:column; gap:10px; flex:1; }
.post .body h3{ font-size:19px; line-height:1.15; letter-spacing:-.02em; font-weight:600; text-wrap:balance; }
.post .body p{ font-size:14px; color: var(--text-soft); line-height:1.5; flex:1; }
.post .body .meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:10px; border-top:1px solid var(--border); font-size:12px; color: var(--text-muted); }
.post .body .meta .arr{ color: var(--accent); }

/* Featured post / case */
.feat-post{ display:grid; grid-template-columns: 1.2fr 1fr; gap:0; border:1px solid var(--border); border-top:2.5px solid var(--accent); border-radius: var(--radius-lg); overflow:hidden; background: var(--c-dark); margin-bottom: var(--sp-8); }
@media (max-width: 820px){ .feat-post{ grid-template-columns:1fr; } }
.feat-post .img{ min-height: 320px; position:relative; background: var(--surface); }
.feat-post .img img{ position:absolute; inset:0; width:100%;height:100%;object-fit:cover; }
.feat-post .meta{ padding: var(--sp-8); display:flex; flex-direction:column; gap: var(--sp-3); justify-content:center; }
.feat-post .meta .cat{ align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:var(--radius-pill); background: var(--accent); color: var(--text-on-accent); }
.feat-post .meta h2{ font-size: clamp(26px,3.4vw,40px); line-height:1.04; letter-spacing:-.03em; font-weight:500; text-wrap:balance; }
.feat-post .meta p{ font-size:16px; color: var(--text-soft); line-height:1.55; }

/* Case study card */
.case{ border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; background: var(--c-dark); transition:.25s var(--ease-standard); display:flex; flex-direction:column; }
.case:hover{ border-color: var(--border-strong); transform: translateY(-3px); }
.case .img{ aspect-ratio: 16/9; position:relative; background: var(--surface); overflow:hidden; }
.case .img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9; }
.case .img .logo{ position:absolute; top:14px; left:14px; font-size:13px; font-weight:700; letter-spacing:-.01em; padding:5px 12px; border-radius:var(--radius); background: rgba(0,0,0,.6); backdrop-filter: blur(6px); border:1px solid var(--border); }
.case .body{ padding: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-3); flex:1; }
.case .body .tag{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--text-muted); }
.case .body h3{ font-size:20px; line-height:1.15; letter-spacing:-.02em; font-weight:600; text-wrap:balance; }
.case .body p{ font-size:14px; color: var(--text-soft); line-height:1.5; flex:1; }
.case .metrics{ display:flex; gap: var(--sp-4); padding-top: var(--sp-3); border-top:1px solid var(--border); }
.case .metrics .m{ flex:1; min-width:0; }
.case .metrics .m .v{ font-size:22px; font-weight:600; letter-spacing:-.02em; color: var(--accent); line-height:1; font-variant-numeric:tabular-nums; }
.case .metrics .m .l{ font-size:11px; color: var(--text-muted); margin-top:4px; }
.case .case-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top:1px solid var(--border); }
.case .case-foot .by{ font-size:12px; color: var(--text-muted); }
.case .case-foot .li-link{ font-size:12px; color: var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.case:hover .case-foot .li-link{ text-decoration:underline; }

/* Case-study branded illustration (replaces stock photos) */
.case-illu{ position:absolute; inset:0; background:linear-gradient(160deg,#121b10 0%,#06090a 100%); overflow:hidden; }
.case-illu::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:42px 42px; -webkit-mask-image:linear-gradient(180deg,transparent 8%,#000 55%); mask-image:linear-gradient(180deg,transparent 8%,#000 55%); }
.case-illu .ci-chart{ position:absolute; left:0; right:0; bottom:0; width:100%; height:60%; display:block; }
.case-illu .ci-glow{ position:absolute; left:50%; top:42%; width:62%; aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(231,254,59,.16), transparent 68%); pointer-events:none; }
.case-illu .ci-brand{ position:absolute; inset:0; display:grid; place-items:center; padding:6% 14% 14%; z-index:1; }
.case-illu .ci-brand img{ max-width:62%; max-height:34%; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.96; }
.case-illu .ci-brand span{ font-size:clamp(22px,3.2vw,34px); font-weight:600; letter-spacing:-.03em; color:#fff; opacity:.96; text-align:center; text-wrap:balance; }

/* Team */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
@media (max-width: 860px){ .team-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .team-grid{ grid-template-columns: 1fr; } }
.member{ border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); background: var(--c-dark); transition:.25s var(--ease-standard); }
.member:hover{ border-color: var(--border-strong); transform: translateY(-3px); }
.member .ava{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:22px; font-weight:600; letter-spacing:-.02em; background: var(--accent); color: var(--text-on-accent); margin-bottom: var(--sp-4); }
.member h3{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.member .role{ font-size:13px; color: var(--accent); font-weight:600; margin-top:2px; }
.member p{ font-size:14px; color: var(--text-soft); line-height:1.5; margin-top: var(--sp-3); }
.member .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top: var(--sp-4); }
.member .tags span{ font-size:11px; padding:3px 9px; border-radius:var(--radius-pill); background: var(--surface); border:1px solid var(--border); color: var(--text-muted); }

/* Value props row */
.values{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
@media (max-width: 760px){ .values{ grid-template-columns:1fr; } }
.value{ padding: var(--sp-6); border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--c-dark); }
.value .n{ font-size:13px; font-weight:700; color: var(--accent); font-variant-numeric:tabular-nums; margin-bottom: var(--sp-3); }
.value h3{ font-size:20px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.value p{ font-size:14.5px; color: var(--text-soft); line-height:1.55; }

/* Co-founder photo cards (from Figma) */
.cf-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-6); }
@media (max-width:1100px){ .cf-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .cf-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cf-grid{ grid-template-columns:1fr; max-width:360px; margin:0 auto; } }
.cf{ display:flex; flex-direction:column; gap:18px; }
.cf .photo{ position:relative; aspect-ratio:347/400; border-radius: var(--radius-lg); overflow:hidden; background:linear-gradient(180deg, #fefefe 0%, #686f86 100%); border:1px solid var(--border); }
.cf .photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.cf .photo::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:46%; background:linear-gradient(180deg, rgba(4,4,10,0), rgba(4,4,10,.92)); }
.cf .photo .mono{ position:absolute; inset:0; display:grid; place-items:center; font-size:64px; font-weight:600; letter-spacing:-.03em; color:rgba(4,4,10,.22); }
.cf .photo .bio{ position:absolute; right:16px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:15px; color:var(--accent); font-weight:500; }
.cf .photo .bio u{ text-decoration:underline; }
.cf .photo .bio svg{ width:13px; height:13px; }
.cf .info{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cf .info .nm{ font-size:20px; letter-spacing:-.02em; color:var(--text-strong); font-weight:500; line-height:1; }
.cf .info .ti{ font-size:14px; color:var(--text-soft); margin-top:9px; line-height:1.3; }
.cf .info a.li{ color:var(--accent); flex:0 0 auto; display:inline-flex; }

/* ============================================================
   Test-branch animation experiments
   ============================================================ */

/* ---- Result marquee: travelling spotlight + card hover ---- */
.hero-marquees{ position:relative; }
.hero-marquees::after{
  content:''; position:absolute; inset:-10% -5%; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background: radial-gradient(closest-side at 50% 50%, rgba(231,254,59,.16), rgba(231,254,59,.05) 45%, transparent 72%);
  width:34%; filter: blur(6px);
  animation: heroSpot 7.5s ease-in-out infinite alternate;
}
@keyframes heroSpot{ from{ transform: translateX(-40%); } to{ transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce){ .hero-marquees::after{ display:none; } }

.result-card{ transition: transform .28s var(--ease-standard), border-color .28s var(--ease-standard), box-shadow .28s var(--ease-standard); }
.result-card:hover{ transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.result-card .stat .v{ transition: text-shadow .28s var(--ease-standard); }
.result-card:hover .stat .v{ text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---- Testimonial masonry: staggered cascade reveal ---- */
.tm-masonry .tm-quote{
  opacity:0; transform: translateY(20px) scale(.985);
  transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard);
  transition-delay: calc(var(--i,0) * .055s);
}
.tm-masonry.in .tm-quote{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .tm-masonry .tm-quote{ opacity:1; transform:none; transition:none; } }

/* ---- Section signal-lines: draw-in + brief flare on reveal ---- */
.reveal .sec-label .ln{ width:0; transition: width .7s var(--ease-standard) .12s, opacity .7s var(--ease-standard) .12s, box-shadow .7s var(--ease-standard); }
.reveal.in .sec-label .ln{ width:42px; animation: lnFlare 1s var(--ease-standard) .35s 1; }
@keyframes lnFlare{ 0%{ opacity:.6; box-shadow:none; } 35%{ opacity:1; box-shadow:0 0 10px var(--accent); } 100%{ opacity:.6; box-shadow:none; } }
@media (prefers-reduced-motion: reduce){ .reveal .sec-label .ln{ width:42px; transition:none; animation:none; } }

/* ---- Process step illustrations: purposeful, on-topic motion (active panel only) ---- */
/* 1 Content Strategy — a topic cluster map builds out from the pillar */
.vis-item.on .s1-line{ stroke-dasharray:260; animation: s1line 4.4s ease-in-out infinite; }
@keyframes s1line{ 0%{ stroke-dashoffset:260; opacity:0; } 8%{ opacity:1; } 40%{ stroke-dashoffset:0; } 88%{ opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } }
.vis-item.on .s1-dot{ transform-box:fill-box; transform-origin:center; animation: s1dot 4.4s ease-in-out infinite; }
@keyframes s1dot{ 0%,12%{ transform:scale(0); opacity:0; } 30%{ transform:scale(1.12); opacity:1; } 40%{ transform:scale(1); } 88%{ transform:scale(1); opacity:1; } 100%{ transform:scale(0); opacity:0; } }
.vis-item.on .s1-pillar{ transform-box:fill-box; transform-origin:center; animation: s1pillar 4.4s ease-in-out infinite; }
@keyframes s1pillar{ 0%{ transform:scale(.82); opacity:.5; } 10%{ transform:scale(1); opacity:1; } 88%{ opacity:1; } 100%{ transform:scale(1); opacity:.85; } }

/* 2 AI Workflows — converge: 5 inputs draw into 3 steps, then 1 finalized output */
.vis-item.on .s2-link{ stroke-dasharray:300; animation: s2link 4.2s ease-in-out infinite; }
@keyframes s2link{ 0%{ stroke-dashoffset:300; opacity:0; } 8%{ opacity:1; } 45%{ stroke-dashoffset:0; } 88%{ opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } }
.vis-item.on .s2-node, .vis-item.on .s2-fin{ transform-box:fill-box; transform-origin:center; animation: s2node 4.2s ease-in-out infinite; }
@keyframes s2node{ 0%,16%{ transform:scale(0); opacity:0; } 34%{ transform:scale(1.08); opacity:1; } 44%{ transform:scale(1); } 88%{ transform:scale(1); opacity:1; } 100%{ transform:scale(0); opacity:0; } }
.vis-item.on .s2-fin{ animation-delay:.95s; }
.vis-item.on .s2-check{ transform-box:fill-box; transform-origin:center; animation: s2check 4.2s ease-out infinite; }
@keyframes s2check{ 0%,62%{ transform:scale(0); opacity:0; } 74%{ transform:scale(1.2); opacity:1; } 84%,100%{ transform:scale(1); opacity:1; } }

/* 3 Testing Content — the winning variant grows and its check pops (kept) */
.vis-item.on .s3-win{ transform-box:fill-box; transform-origin:left center; animation: s3win 2.6s ease-in-out infinite; }
@keyframes s3win{ 0%{ transform:scaleX(.32); } 55%,100%{ transform:scaleX(1); } }
.vis-item.on .s3-check{ transform-box:fill-box; transform-origin:center; animation: s3check 2.6s ease-in-out infinite; }
@keyframes s3check{ 0%,40%{ transform:scale(0); opacity:0; } 55%{ transform:scale(1.15); opacity:1; } 66%,100%{ transform:scale(1); opacity:1; } }

/* 4 Tracking Conversions — the conversion-rate chart climbs, the metric ticks up */
.vis-item.on .s4-line{ stroke-dasharray:520; animation: s4line 4s ease-in-out infinite; }
@keyframes s4line{ 0%{ stroke-dashoffset:520; } 55%{ stroke-dashoffset:0; } 90%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:520; } }
.vis-item.on .s4-area{ animation: s4area 4s ease-in-out infinite; }
@keyframes s4area{ 0%,12%{ opacity:0; } 60%{ opacity:1; } 90%{ opacity:1; } 100%{ opacity:0; } }
.vis-item.on .s4-stat{ transform-box:fill-box; transform-origin:left center; animation: s4stat 4s ease-out infinite; }
@keyframes s4stat{ 0%,18%{ transform:scaleX(.18); opacity:.4; } 48%{ transform:scaleX(1); opacity:1; } 90%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(.18); opacity:.4; } }
.vis-item.on .s4-arrow{ animation: s4arrow 4s ease-in-out infinite; }
@keyframes s4arrow{ 0%,30%{ transform:translateY(8px); opacity:0; } 55%{ transform:translateY(0); opacity:1; } 90%{ opacity:1; } 100%{ opacity:0; } }

/* 5 Content Scaling — cells pop in as a diagonal scaling wave, then settle */
.vis-item.on .s5-cell{ transform-box:fill-box; transform-origin:center; animation: s5cell 3.8s cubic-bezier(.2,.8,.3,1) infinite; }
@keyframes s5cell{ 0%{ transform:scale(0); opacity:0; } 16%{ transform:scale(1.06); opacity:1; } 24%{ transform:scale(1); } 90%{ transform:scale(1); opacity:1; } 100%{ transform:scale(0); opacity:0; } }
.vis-item.on .s5-arrow{ animation: s5arrow 3.8s ease-in-out infinite; }
@keyframes s5arrow{ 0%,40%{ transform:translateY(6px); opacity:0; } 55%{ transform:translateY(-2px); opacity:1; } 65%,100%{ transform:translateY(0); opacity:1; } }

/* 6 Content Refreshes — a re-index scan sweeps the doc, line updates, icon ticks once */
.vis-item.on .s6-scan{ animation: s6scan 3.2s ease-in-out infinite; }
@keyframes s6scan{ 0%{ transform:translateY(0); opacity:0; } 10%{ opacity:.95; } 80%{ opacity:.95; } 100%{ transform:translateY(238px); opacity:0; } }
.vis-item.on .s6-spin{ transform-box:view-box; transform-origin:372px 250px; animation: s6spin 3.2s cubic-bezier(.55,0,.2,1) infinite; }
@keyframes s6spin{ 0%{ transform:rotate(0); } 34%{ transform:rotate(360deg); } 100%{ transform:rotate(360deg); } }
.vis-item.on .s6-line{ transform-box:fill-box; transform-origin:left center; animation: s6line 3.2s ease-in-out infinite; }
@keyframes s6line{ 0%,30%{ transform:scaleX(0); opacity:.4; } 52%{ transform:scaleX(1); opacity:1; } 90%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(0); opacity:.4; } }

@media (prefers-reduced-motion: reduce){
  .vis-item .s1-line, .vis-item .s1-dot, .vis-item .s1-pillar, .vis-item .s2-link, .vis-item .s2-node, .vis-item .s2-fin, .vis-item .s2-check,
  .vis-item .s3-win, .vis-item .s3-check, .vis-item .s4-line, .vis-item .s4-area, .vis-item .s4-stat, .vis-item .s4-arrow,
  .vis-item .s5-cell, .vis-item .s5-arrow, .vis-item .s6-scan, .vis-item .s6-spin, .vis-item .s6-line{ animation:none !important; transform:none !important; opacity:1 !important; }
  .vis-item .s6-scan{ opacity:0 !important; }
}