/* ============================================================
   FLO AX — page-specific blocks layered on the FLO design system
   (1) Service cards — always-open "What we do"
   (2) Case-study slider — scalable Proof section
   Uses the same tokens/primitives as styles.css; nothing here overrides the kernel.
   ============================================================ */

/* ---------- (1) Service cards ---------- */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2vw,1.6rem); }
.svc-card {
  display:flex; flex-direction:column; position:relative;
  padding:clamp(1.5rem,2.4vw,2.15rem);
  background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:16px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc-card::before { content:''; position:absolute; top:-1px; left:clamp(1.5rem,2.4vw,2.15rem); width:46px; height:2px; background:var(--cyan); }
.svc-card:hover { transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(20,20,43,.5); border-color:rgba(8,255,163,.55); }
.svc-num { font-size:.82rem; font-weight:500; color:var(--navy); opacity:.4; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.svc-name { font-family:var(--font-sans); font-weight:500; font-size:clamp(1.25rem,1.7vw,1.5rem); letter-spacing:-.02em; line-height:1.12; margin:.5rem 0 .4rem; color:var(--navy); }
.svc-tag { font-size:1.05rem; line-height:1.3; color:var(--navy); margin:0 0 .85rem; }
.svc-tag em { font-family:var(--font-editorial); font-style:italic; font-weight:200; color:inherit; background:linear-gradient(var(--cyan),var(--cyan)) 0 90%/100% .1em no-repeat; }
.svc-desc { font-size:.95rem; line-height:1.58; color:rgba(20,20,43,.74); margin:0 0 1.25rem; }
.svc-pills { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; }
.svc-pills span { font-size:.72rem; font-weight:500; color:var(--navy); background:rgba(20,20,43,.05); border:1px solid var(--line); padding:.42em .9em; border-radius:999px; }
.svc-get { font-size:1rem; line-height:1.6; color:rgba(20,20,43,.78); margin:0 0 1.25rem; }
.svc-label { display:block; font-size:var(--fs-small); font-weight:500; text-transform:uppercase; letter-spacing:.13em; color:var(--navy); opacity:.82; margin-bottom:.5rem; }
.svc-how { font-size:.95rem; line-height:1.56; color:var(--muted); margin:0 0 1.4rem; }
.svc-card .roles { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; }
@media (max-width:860px) { .svc-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .svc-grid { grid-template-columns:1fr; } }

/* ---------- About: highlight AX (the navy/cyan treatment, now on the home team) ---------- */
.apr.is-ax { background:var(--navy); color:#fff; border-color:var(--navy); }
.apr.is-ax > span:first-child { color:var(--cyan); opacity:1; }

/* ---------- (2) Proof section + case-study slider ---------- */
.proof {
  padding:var(--space-sec) 0; position:relative; overflow:hidden; color:var(--navy);
  background:
    radial-gradient(52% 36% at 90% 0%, rgba(8,255,163,.16), transparent 60%),
    radial-gradient(66% 52% at 2% 104%, rgba(67,255,185,.24), transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#EFFCF6 32%,#D2F8E7 70%,#B6F5DB 100%);
}
.proof-head { max-width:62ch; margin-bottom:clamp(2.25rem,4vw,3.25rem); }

.cs { position:relative; }
.cs-viewport { overflow:hidden; border-radius:18px; }
.cs-track { display:flex; transition:transform var(--dur-slow) var(--ease-out); will-change:transform; }
.cs-slide { flex:0 0 100%; min-width:0; }
.cs-card {
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
  padding:clamp(1.75rem,4vw,3.25rem);
  background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:18px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cs-tag { display:inline-flex; align-items:center; font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.13em;
  padding:.5em 1em; border-radius:var(--r-pill); background:var(--navy); color:#fff; margin-bottom:1.1rem; }
/* card badges: company (logo or name) once, then a smaller product-line pill */
.cs-badges { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem; }
.cs-co { display:inline-flex; align-items:center; background:var(--navy); color:#fff; border-radius:12px;
  padding:.5rem .85rem; font-weight:500; font-size:.9rem; letter-spacing:.01em; }
.cs-pl { display:inline-flex; align-items:center; font-size:.66rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.12em; padding:.5em .9em; border-radius:var(--r-pill);
  background:rgba(20,20,43,.06); color:var(--navy); }
/* client logo chip (logos are white/light, so they sit on a navy chip) */
.cs-logo, .csm-logo { display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); border-radius:12px; padding:.5rem .85rem; }
.csm-logo { margin-bottom:1rem; }
.cs-logo img { height:20px; width:auto; max-width:150px; display:block; object-fit:contain; }
.csm-logo img { height:28px; width:auto; max-width:200px; display:block; object-fit:contain; }
.cs-title { font-family:var(--font-sans); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.3rem); letter-spacing:-.025em; line-height:1.08; margin:0 0 1rem; color:var(--navy); }
/* FLO signature: exactly one italic serif accent word per card title */
.cs-title em { font-family:var(--font-editorial); font-style:italic; font-weight:200; color:inherit;
  background:linear-gradient(var(--cyan),var(--cyan)) 0 92%/100% .09em no-repeat; }
.csm-title em { font-family:var(--font-editorial); font-style:italic; font-weight:200; color:inherit;
  background:linear-gradient(var(--cyan),var(--cyan)) 0 92%/100% .09em no-repeat; }
.cs-blurb { font-size:1.03rem; line-height:1.62; color:var(--muted); margin:0; max-width:44ch; }
.cs-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.75rem); align-items:start; }
.cs-metric { display:flex; flex-direction:column; }
/* reserve equal heights so the values and labels align across columns */
.cs-metric .why-eyebrow { min-height:2.8em; align-content:flex-start; margin-bottom:.55rem; }
.cs-metric .why-num { font-size:clamp(1.7rem,2.3vw,2.2rem); line-height:1.05; white-space:nowrap; }  /* keep "2 wks" / "5 days" on one line so values share a baseline */
.cs-metric .why-mlabel { font-size:.9rem; margin-top:.5rem; max-width:22ch; }

.cs-controls { display:flex; align-items:center; gap:1rem; margin-top:1.6rem; }
.cs-arrow { width:46px; height:46px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.6); color:var(--navy);
  font-size:1.05rem; cursor:pointer; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cs-arrow:hover { border-color:var(--cyan); background:var(--cyan); transform:translateY(-2px); }
.cs-dots { display:flex; gap:.5rem; margin:0 .25rem; }
.cs-dot { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(20,20,43,.22); cursor:pointer; transition:all var(--dur) var(--ease); }
.cs-dot.active { background:var(--navy); width:22px; border-radius:var(--r-pill); }
.cs[data-single] .cs-controls { display:none; }

@media (max-width:760px) { .cs-card { grid-template-columns:1fr; } }
@media (max-width:480px) { .cs-metrics { grid-template-columns:1fr; gap:1.25rem; } }

/* ---------- (3) Case-study DETAIL MODAL (mock; toggled by the dev switcher) ---------- */
/* primary CTA of the card: a cyan pill button (matches the hero / nav primary CTA) */
.cs-more { margin-top:1.5rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  font-family:var(--font-sans); font-weight:500; font-size:.9rem; line-height:1;
  padding:.85em 1.45em; border-radius:var(--r-pill); border:1px solid transparent;
  background:var(--cyan); color:var(--navy);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), gap var(--dur) var(--ease); }
.cs-more:hover { background:#fff; transform:translateY(-2px); box-shadow:0 12px 34px -12px rgba(8,255,163,.7); gap:.85em; }
.cs-more span { transition:transform var(--dur) var(--ease); }
.cs-more:hover span { transform:translateX(3px); }

.cs-modal[hidden] { display:none; }
.cs-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(1rem,4vw,3rem); overflow-y:auto; }
.cs-modal-scrim { position:fixed; inset:0; background:rgba(10,10,22,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cs-modal-panel { position:relative; z-index:1; width:min(960px,100%); margin:auto;
  background:linear-gradient(180deg,#fff 0%,#F1FBF7 100%); border:1px solid var(--line); border-radius:22px;
  padding:clamp(1.75rem,4vw,3.25rem); box-shadow:0 40px 120px -30px rgba(10,10,22,.6); animation:csmIn .4s var(--ease-out); }
@keyframes csmIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.cs-modal-x { position:absolute; top:1rem; right:1rem; width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--navy); font-size:1.4rem; line-height:1; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease); }
.cs-modal-x:hover { background:var(--navy); color:#fff; }
.csm-sample { display:inline-block; font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em;
  color:var(--navy); background:rgba(20,20,43,.06); border-radius:999px; padding:.4em 1em; margin-bottom:1.1rem; }
.csm-head { max-width:64ch; margin-bottom:1.9rem; padding-right:3rem; }
/* modal identity line mirrors the card: company once + cyan-ticked product-line label */
.csm-badges { display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.5rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line); }
.csm-co { display:inline-flex; align-items:center; background:var(--navy); color:#fff; border-radius:12px;
  padding:.55rem .95rem; font-weight:500; font-size:1rem; }
.csm-pl { display:inline; font-size:var(--fs-small); font-weight:500;
  text-transform:uppercase; letter-spacing:.13em; color:var(--navy); line-height:1.5; }
.csm-pl::before { content:''; display:inline-block; width:24px; height:2px; background:var(--cyan);
  vertical-align:middle; margin-right:.6em; }
.csm-title { font-family:var(--font-sans); font-weight:500; font-size:clamp(1.8rem,3.2vw,2.6rem); letter-spacing:-.025em; line-height:1.05; margin:0 0 .8rem; color:var(--navy); }
.csm-summary { font-size:1.08rem; line-height:1.6; color:var(--muted); margin:0; }
.csm-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.75rem); align-items:start;
  padding:1.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:.9rem; }
.csm-src { font-size:.78rem; color:var(--faint); margin:0 0 2rem; }
.csm-metrics .cs-metric { display:flex; flex-direction:column; }
.csm-metrics .why-eyebrow { min-height:2.6em; margin-bottom:.5rem; }
.csm-metrics .why-num { font-size:clamp(2rem,3.2vw,2.8rem); white-space:nowrap; }
.csm-metrics .why-mlabel { min-height:0; margin-top:.5rem; }
.csm-video { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  aspect-ratio:16/9; border-radius:16px; margin-bottom:2rem; border:1px solid var(--line); color:rgba(255,255,255,.82);
  background:radial-gradient(120% 120% at 50% 0%, rgba(8,255,163,.18), transparent 60%), linear-gradient(160deg,#14142B,#20204a); }
.csm-play { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%;
  background:var(--cyan); color:var(--navy); font-size:1.4rem; padding-left:5px; }
.csm-vlabel { font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; }
/* real walkthrough video (last section, below screenshots) */
.csm-vidsection { margin-top:2rem; }
.csm-videowrap { border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000; line-height:0; }
.csm-videowrap video { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.csm-story { display:grid; gap:1.4rem; margin-bottom:2rem; }
.csm-block h4 { font-family:var(--font-sans); font-weight:500; font-size:1.15rem; color:var(--navy); margin:0 0 .4rem; }
.csm-block p { font-size:1rem; line-height:1.62; color:var(--muted); margin:0; max-width:70ch; }
.csm-facts { margin-bottom:2rem; }
.csm-facts-label, .csm-shots-label { display:block; font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--navy); opacity:.6; margin-bottom:.8rem; }
.csm-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.csm-chips span { font-size:.8rem; font-weight:500; color:var(--navy); background:rgba(8,255,163,.16); border:1px solid rgba(8,255,163,.4); padding:.45em 1em; border-radius:999px; }
.csm-shot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.csm-shot { aspect-ratio:16/10; border-radius:12px; border:1px dashed rgba(20,20,43,.25); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3rem; color:var(--navy);
  background:repeating-linear-gradient(135deg,rgba(20,20,43,.03) 0 10px,rgba(20,20,43,.06) 10px 20px); }
.csm-shot span { font-weight:500; font-size:.95rem; }
.csm-shot em { font-style:normal; font-size:.75rem; color:var(--faint); }
/* real screenshots (replace the dashed placeholders) */
.csm-shotimg { margin:0; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; padding:8px; }
.csm-shotimg img { max-width:100%; max-height:360px; width:auto; height:auto; display:block; border-radius:6px; }
@media (max-width:680px) { .csm-metrics { grid-template-columns:1fr; } }

/* ============================================================
   BAKED FROM THE DEV VERSION SWITCHER (2026-07): hero v3 (kinetic, marketing-approved) +
   "What we do" variant B (split). Migrated here when versions.css/js
   were stripped for the production launch build. v3 = "not" full-size on the
   baseline + slower, smoother beats.
   ============================================================ */

/* ---------- Hero v2 · AI — kinetic "Adopted, not Installed" ----------
   The cyan capitals A & I persist (the "AI" never leaves); tails unfurl,
   "not" fades in, a cyan strike draws across "Installed". */
.kinetic { font-family:var(--font-sans); font-weight:500; line-height:1.05; letter-spacing:-.035em;
  font-size:clamp(2rem,5.4vw,4.4rem); color:#fff; white-space:nowrap; }  /* one line: starts as "A I", expands sideways only */
.kx { display:inline-block; opacity:0; }
.kx-word { display:inline-flex; align-items:baseline; position:relative; white-space:nowrap; }
.kx-cap { color:var(--cyan); text-shadow:0 0 40px rgba(8,255,163,.5); }
.kx-tail { display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; opacity:0; vertical-align:bottom; }
.kx-comma { opacity:0; }
.kx-installed { color:rgba(255,255,255,.5); }
.kx-installed .kx-cap { color:var(--cyan); }
.kx-not { display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; opacity:0; margin:0; vertical-align:-0.23em; }
.kx-not i { display:inline-block; font-family:var(--font-editorial); font-style:italic; font-weight:200; color:rgba(255,255,255,.72); font-size:1em; letter-spacing:0; padding:0 .05em; transform:none; line-height:1; vertical-align:baseline; }
.kx-strike { position:absolute; left:-.03em; right:-.03em; top:54%; height:.055em; background:var(--cyan); border-radius:3px; box-shadow:0 0 18px rgba(8,255,163,.7); transform:scaleX(0); transform-origin:left center; }

/* play state (JS adds .play to the .hero) — sequential, non-overlapping beats */
.hero.play .kx { animation:kxIntro .9s cubic-bezier(.4,0,.2,1) forwards; }
.hero.play .kx-adopted .kx-tail { animation:kxTail 1.1s cubic-bezier(.4,0,.2,1) 1.0s forwards; }
.hero.play .kx-comma { animation:kxFade .5s ease 1.9s forwards; }
.hero.play .kx-not { animation:kxNot .9s cubic-bezier(.4,0,.2,1) 2.2s forwards; }
.hero.play .kx-installed .kx-tail { animation:kxTail 1.1s cubic-bezier(.4,0,.2,1) 3.0s forwards; }
.hero.play .kx-strike { animation:kxStrike 1.0s cubic-bezier(.4,0,.2,1) 4.2s forwards; }
/* done / reduced-motion: final static state */
.hero.done .kx { opacity:1; }
.hero.done .kx-tail { max-width:12ch; opacity:1; }
.hero.done .kx-comma { opacity:1; }
.hero.done .kx-not { max-width:6ch; opacity:1; margin:0 .34em; }
.hero.done .kx-strike { transform:scaleX(1); }

@keyframes kxIntro { from{opacity:0;transform:translateY(20px) scale(.96)} to{opacity:1;transform:none} }
@keyframes kxTail  { from{max-width:0;opacity:0} to{max-width:12ch;opacity:1} }
@keyframes kxFade  { to{opacity:1} }
@keyframes kxNot   { from{max-width:0;opacity:0;margin:0} to{max-width:6ch;opacity:1;margin:0 .34em} }
@keyframes kxStrike{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@media (prefers-reduced-motion: reduce) {
  .kx,.kx-tail,.kx-comma,.kx-not,.kx-strike { animation:none !important; }
}

/* shared variant icon */
.ic { width:30px; height:30px; display:block; }
.ic svg { width:30px; height:30px; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- "What we do" — split list + detail panel ---------- */
.svc-variant--b .split { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.5rem,3vw,3rem); align-items:stretch; }
.svc-variant--b .slist { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.svc-variant--b .srow { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.1rem; padding:1.35rem .4rem;
  border-bottom:1px solid var(--line); cursor:pointer; transition:padding-left .35s var(--ease); background:none; border-left:0; border-right:0; border-top:0; width:100%; text-align:left; font-family:inherit; }
.svc-variant--b .srow .n { font-size:.8rem; color:var(--navy); opacity:.45; font-variant-numeric:tabular-nums; }
.svc-variant--b .srow .nm { font-family:var(--font-sans); font-weight:500; font-size:clamp(1.2rem,1.7vw,1.6rem); letter-spacing:-.02em; color:var(--navy); }
.svc-variant--b .srow .ar { color:var(--navy); opacity:.3; transition:.35s; }
.svc-variant--b .srow:hover { padding-left:1rem; }
.svc-variant--b .srow.active { padding-left:1rem; border-bottom-color:#08FFA3; }
.svc-variant--b .srow.active .nm { color:#0b8f63; }
.svc-variant--b .srow.active .ar { opacity:1; color:#08c97e; transform:translateX(4px); }
.svc-variant--b .sdetail { background:#14142B; border-radius:20px; padding:clamp(1.8rem,3vw,2.6rem); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.svc-variant--b .sdetail::after { content:''; position:absolute; right:-60px; bottom:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(8,255,163,.2),transparent 70%); }
.svc-variant--b .sdetail .ic { margin-bottom:1.3rem; } .svc-variant--b .sdetail .ic svg { stroke:#08FFA3; }
.svc-variant--b .sd-name { font-family:var(--font-sans); font-weight:500; font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.025em; color:#fff; margin:0 0 .5rem; }
.svc-variant--b .sd-tag { font-size:1.2rem; line-height:1.25; color:#fff; margin:0 0 1rem; }
.svc-variant--b .sd-tag em { font-family:var(--font-editorial); font-style:italic; font-weight:200; color:var(--cyan); }
.svc-variant--b .sd-get { font-size:1rem; line-height:1.6; color:rgba(255,255,255,.74); margin:0 0 1.2rem; }
.svc-variant--b .sd-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.svc-variant--b .sd-pills span { font-size:.74rem; font-weight:500; color:#0b1020; background:#08FFA3; padding:.45em 1em; border-radius:999px; }
@media(max-width:760px){ .svc-variant--b .split{ grid-template-columns:1fr; } }