/* ─────────────────────────────────────────────────────────────────────────
   Rocket Farm Studios — homepage-specific styles
   Load after tokens.css and styles.css (which cover chrome + shared atoms).
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Scroll reveal ──────────────────────────────────────────────────────── */
.rfs-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.7,.3,1),
              transform .8s cubic-bezier(.2,.7,.3,1);
}
.rfs-reveal.is-visible { opacity: 1; transform: translateY(0); }
.rfs-reveal[data-delay="60"]  { transition-delay:  60ms; }
.rfs-reveal[data-delay="80"]  { transition-delay:  80ms; }
.rfs-reveal[data-delay="120"] { transition-delay: 120ms; }
.rfs-reveal[data-delay="160"] { transition-delay: 160ms; }
.rfs-reveal[data-delay="240"] { transition-delay: 240ms; }
.rfs-reveal[data-delay="320"] { transition-delay: 320ms; }

/* ─── Hero layout ────────────────────────────────────────────────────────── */
/* Three children: .lbp-hero-intro (chips+title+desc), .lbp-hero-form, and
   .lbp-hero-cta (buttons+open-slots line). On desktop the form sits in the
   right column spanning both rows so the intro and CTAs stack on the left,
   matching the original two-column composition. On iPad/phone the grid drops
   to a single column and the children flow in document order — intro, form,
   CTAs — which is what's asked for here. */
.lbp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 580px;
  grid-template-areas:
    "intro form"
    "cta   form";
  column-gap: 56px;
  row-gap: 32px;
  align-items: flex-start;
}
.lbp-hero-intro { grid-area: intro; }
.lbp-hero-form  { grid-area: form; }
.lbp-hero-cta   { grid-area: cta; }

/* ═════════════════════════════════════════════════════════════════════
   HERO GRAPHIC — "AI constellation" — pulsing core, 3 orbital rings,
   brand-colored nodes, expanding pulse rings, floating particles, corner
   UI brackets. All CSS animations, infinite loop. Pure SVG, no images.
═══════════════════════════════════════════════════════════════════════ */
.hgfx {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 640px;
  margin: 0 auto;
  isolation: isolate;
}
.hgfx-svg {
  width: 100%; height: 100%; display: block;
  color: var(--ink);
  filter: drop-shadow(0 24px 48px rgba(28, 26, 22, 0.10));
}

/* ── Rocket scene — sleek rocket with multi-layer animated flame,
     drifting sparks, motion streaks, and a soft halo glow under the
     thrust. All animations CSS, infinite loop, GPU-accelerated. ── */

/* Rocket body: gentle vertical bob to suggest sustained thrust */
.rkt-body {
  transform-origin: 300px 200px;
  animation: rkt-bob 4s ease-in-out infinite;
}
@keyframes rkt-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Flame layers — each pulses at a slightly different rate/scale so the
   stacked plume looks alive instead of a rigid triangle. Anchor at the
   nozzle exit so the flame stretches downward, not from its center. */
.rkt-flame-outer { transform-origin: 300px 386px; animation: rkt-flame-out 0.45s ease-in-out infinite alternate; }
.rkt-flame-mid   { transform-origin: 300px 386px; animation: rkt-flame-mid 0.32s ease-in-out infinite alternate; }
.rkt-flame-inner { transform-origin: 300px 386px; animation: rkt-flame-in  0.26s ease-in-out infinite alternate; }
@keyframes rkt-flame-out {
  0%   { transform: scale(1.06, 0.92); opacity: 0.7; }
  100% { transform: scale(0.96, 1.10); opacity: 1; }
}
@keyframes rkt-flame-mid {
  0%   { transform: scale(1.04, 0.94); opacity: 0.85; }
  100% { transform: scale(0.98, 1.06); opacity: 1; }
}
@keyframes rkt-flame-in {
  0%   { transform: scale(1.08, 0.90); opacity: 0.75; }
  100% { transform: scale(0.94, 1.10); opacity: 1; }
}

/* Halo glow under the flame — breathing radial bloom */
.rkt-halo {
  transform-origin: 300px 470px;
  animation: rkt-halo 1.5s ease-in-out infinite;
}
@keyframes rkt-halo {
  0%, 100% { opacity: 0.45; transform: scale(1);    }
  50%      { opacity: 0.85; transform: scale(1.15); }
}

/* Sparks dropping below the flame. translate only — no pivot needed. */
.rkt-spark { animation: rkt-spark-drift 1.6s linear infinite; }
.rkt-spark:nth-child(1) { animation-duration: 1.4s; animation-delay: 0s; }
.rkt-spark:nth-child(2) { animation-duration: 1.8s; animation-delay: 0.3s; }
.rkt-spark:nth-child(3) { animation-duration: 1.3s; animation-delay: 0.6s; }
.rkt-spark:nth-child(4) { animation-duration: 1.7s; animation-delay: 0.9s; }
.rkt-spark:nth-child(5) { animation-duration: 1.5s; animation-delay: 1.2s; }
.rkt-spark:nth-child(6) { animation-duration: 1.9s; animation-delay: 0.4s; }
.rkt-spark:nth-child(7) { animation-duration: 1.4s; animation-delay: 0.7s; }
.rkt-spark:nth-child(8) { animation-duration: 1.6s; animation-delay: 1.0s; }
@keyframes rkt-spark-drift {
  0%   { transform: translateY(0)    translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(120px) translateX(var(--sx, 0px)); opacity: 0; }
}

/* Background stars — subtle twinkle */
.rkt-star { animation: rkt-twinkle 2.4s ease-in-out infinite; }
.rkt-star:nth-child(2n)  { animation-delay: 0.4s; }
.rkt-star:nth-child(3n)  { animation-delay: 0.9s; }
.rkt-star:nth-child(5n)  { animation-delay: 1.3s; }
@keyframes rkt-twinkle {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.55; }
}

/* Motion streaks — vertical hairlines drifting downward, suggesting the
   rocket is climbing relative to the viewer. */
.rkt-streak { animation: rkt-streak-drift 1.4s linear infinite; }
.rkt-streak:nth-child(2) { animation-duration: 1.8s; animation-delay: 0.4s; }
.rkt-streak:nth-child(3) { animation-duration: 1.2s; animation-delay: 0.8s; }
.rkt-streak:nth-child(4) { animation-duration: 1.6s; animation-delay: 0.2s; }
.rkt-streak:nth-child(5) { animation-duration: 1.5s; animation-delay: 1.0s; }
.rkt-streak:nth-child(6) { animation-duration: 1.9s; animation-delay: 0.6s; }
@keyframes rkt-streak-drift {
  0%   { transform: translateY(-180px); opacity: 0; }
  20%  { opacity: 0.35; }
  80%  { opacity: 0.35; }
  100% { transform: translateY(220px);  opacity: 0; }
}

/* Window light — glows softly with the thrust */
.rkt-window { animation: rkt-window-pulse 2.4s ease-in-out infinite; transform-origin: 300px 244px; }
@keyframes rkt-window-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Orbital chip text styling — matches the site's .lb-pill aesthetic */
.rkt-chip-text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  pointer-events: none;
  dominant-baseline: middle;
}
.rkt-chip rect {
  filter: drop-shadow(0 2px 6px rgba(28, 26, 22, 0.08));
}
/* Subtle opacity flicker so the chips feel alive */
.rkt-chip { animation: rkt-chip-glow 3.4s ease-in-out infinite; }
.rkt-chip:nth-of-type(odd) { animation-delay: 0.8s; }
.rkt-chip:nth-of-type(3n)  { animation-delay: 1.6s; }
@keyframes rkt-chip-glow {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}

/* Honor user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rkt-body, .rkt-flame-outer, .rkt-flame-mid, .rkt-flame-inner,
  .rkt-halo, .rkt-spark, .rkt-star, .rkt-streak, .rkt-window {
    animation: none !important;
  }
}

/* ─── Inner-page hero (every page except the homepage) ─────────────────────
   Pattern locked here so future inner pages (services, about, etc.) inherit
   the exact same compact rhythm. Markup contract:

     <section class="lbp-hero-section" aria-label="Hero">
       <div class="lbp-blob-field" aria-hidden="true">…optional blobs…</div>
       <div class="lb-wrap lbp-hero-inner">
         <div class="lbp-hero-grid">
           <div>…pill + headline + sub + CTAs + eyebrow…</div>
         </div>
         <!-- optional N-up stat cards row -->
         <div class="lbp-hero-metrics" data-component="stat-cards">
           <script type="application/json">[ … ]</script>
         </div>
       </div>
     </section>

   The `.lbp-hero-section .lbp-hero-grid` selector outranks the homepage
   rule above (specificity 0,0,2,0 vs 0,0,1,0), so the homepage's two-column
   composition is preserved while inner pages get a single, flat column with
   no phantom row-gap.                                                       */
.lbp-hero-section            { position: relative; overflow: hidden; }
.lbp-hero-inner              { position: relative; z-index: 1; padding-top: 32px; padding-bottom: 24px; }
.lbp-hero-section .lbp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  gap: 0;
  align-items: flex-start;
}
/* Scoped under .lbp-hero-section so they outrank the homepage's
   `.lbp-metric-grid { margin-top: 40px; grid-template-columns: repeat(4,1fr); }`
   that the rendered stat-cards component also carries. */
.lbp-hero-section .lbp-hero-metrics {
  margin-top: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) {
  .lbp-hero-section .lbp-hero-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lbp-hero-section .lbp-hero-metrics { grid-template-columns: 1fr; }
}

.lbp-metric-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* ─── Role chips ─────────────────────────────────────────────────────────── */
.lbp-role       { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.lbp-role-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.lbp-role-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lbp-role-chip  {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  background: rgba(255,255,255,0.7);
  border: 1px solid color-mix(in oklab, var(--rc, var(--accent)) 25%, var(--hair));
  color: var(--ink); text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.lbp-role-chip:hover { background: rgba(255,255,255,0.95); transform: translateY(-1px); }
.lbp-role-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rc, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rc, var(--accent)) 22%, transparent);
  flex-shrink: 0;
}

/* ─── Hero lead form ──────────────────────────────────────────────────────── */
.lbp-lead-card {
  background: rgba(255,255,255,0.7); border-radius: 28px;
  padding: 22px; border: 1px solid var(--hair);
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 16px;
}
.lbp-lead-header { display: flex; justify-content: space-between; align-items: center; }
.lbp-lead-status { display: inline-flex; align-items: center; gap: 8px; }
.lbp-lead-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
  flex-shrink: 0;
}
.lbp-lead-tabs  {
  display: flex; gap: 6px;
  /* on narrow screens the four nowrap tabs sum past the card; scroll within
     the card instead of letting "Strategy" poke through the right edge. */
  overflow-x: auto; min-width: 0;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* nudge so the focus ring on the rightmost tab isn't clipped */
  margin: 0 -2px; padding: 0 2px;
}
.lbp-lead-tabs::-webkit-scrollbar { display: none; }
.lbp-lead-tab {
  font-size: 12px; padding: 6px 11px; border-radius: 99px;
  background: rgba(255,255,255,0.6); border: 1px solid var(--hair);
  color: var(--ink); cursor: pointer; font-family: inherit;
  transition: all .15s; white-space: nowrap; flex: 1 1 auto; text-align: center;
}
.lbp-lead-tab.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lbp-lead-input {
  width: 100%; box-sizing: border-box; padding: 14px 16px;
  font-size: 14.5px; line-height: 1.4; font-family: inherit;
  border: 1px solid var(--hair); border-radius: 14px;
  background: rgba(255,255,255,0.85); color: var(--ink);
  outline: none; transition: border-color .15s;
  display: block;
}
.lbp-lead-input:focus { border-color: var(--ink); }
.lbp-lead-textarea { resize: vertical; min-height: 120px; }
.lbp-lead-footer { display: flex; justify-content: space-between; align-items: center; margin-top: -4px; }
.lbp-lead-success {
  padding: 18px; border-radius: 16px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  display: none; align-items: center; gap: 14px;
}
.lbp-lead-success-icon {
  width: 34px; height: 34px; border-radius: 99px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ─── Services section ───────────────────────────────────────────────────── */
.lb-services-grid    { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.lb-services-head    { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 64px; }
.lb-service-card     { position: relative; overflow: hidden; min-height: 220px; height: 213px; }
.lb-service-blob     { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 99px; opacity: 0.7; pointer-events: none; }
.lb-service-bullets  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.lb-service-bullet   { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--hair); font-weight: 500; white-space: nowrap; }

/* ─── Capabilities dark tile ─────────────────────────────────────────────── */
.lbp-cap-dark {
  background: var(--ink); color: var(--bg);
  border-radius: 40px; padding: 56px; position: relative; overflow: hidden;
}
.lbp-cap-head   { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; position: relative; }

/* AI-stack capability grid — 8 all-visible cards (4-up desktop, 2-up tablet,
   1-up phone) on the dark tile. Replaces the old interactive button+terminal. */
.lbp-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.lbp-cap-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 20px 18px;
  transition: background .2s, border-color .2s, transform .2s;
}
.lbp-cap-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  transform: translateY(-2px);
}
.lbp-cap-card-key  { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; color: oklch(0.85 0.13 145); display: block; margin-bottom: 12px; }
.lbp-cap-card-name { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 600; font-size: 16.5px; line-height: 1.2; color: var(--bg); margin: 0 0 8px; }
.lbp-cap-card-desc { font-size: 13px; line-height: 1.5; color: rgba(251,247,240,0.6); margin: 0; text-wrap: pretty; }
@media (max-width: 820px) { .lbp-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lbp-cap-grid { grid-template-columns: 1fr; } }

.lbp-cap-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; position: relative; }
.lbp-cap-btns   { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.lbp-cap-btn {
  text-align: left; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px; padding: 18px 20px; color: var(--bg);
  transition: all .2s;
}
.lbp-cap-btn.is-active {
  background: rgba(255,255,255,0.12);
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.cap-key  { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.1em; color: rgba(251,247,240,0.5); display: block; margin-bottom: 8px; }
.lbp-cap-btn.is-active .cap-key { color: oklch(0.85 0.13 145); }
.cap-name { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.1; }
.lbp-cap-terminal {
  background: #0d0c0a; border-radius: 18px; padding: 24px 26px;
  border: 1px solid rgba(255,255,255,0.06); min-height: 300px;
  display: flex; flex-direction: column;
}
.lbp-cap-term-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lbp-cap-term-label  { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: oklch(0.85 0.13 145); }
.lbp-cap-term-dots   { display: flex; gap: 6px; }
.lbp-cap-term-dots span { width: 8px; height: 8px; border-radius: 99px; }
.lbp-cap-term-desc { font-size: 13.5px; color: rgba(251,247,240,0.7); margin: 0 0 16px; line-height: 1.5; }
.lbp-cap-term-code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  white-space: pre-wrap; word-break: break-word;
  margin: 0; font-size: 12.5px; line-height: 1.65;
  color: rgba(251,247,240,0.88);
  background: rgba(255,255,255,0.03); padding: 14px 16px; border-radius: 10px; flex: 1;
}
/* Decorative animations inside cap tile */
@keyframes lbcap-spin  { to { transform: rotate(360deg); } }
@keyframes lbcap-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes lbcap-pulse { 0%,100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.6); opacity: .9; } }
.lbcap-spin     { animation: lbcap-spin  28s linear infinite; }
.lbcap-spin-rev { animation: lbcap-spin  36s linear infinite reverse; }
.lbcap-float    { animation: lbcap-float  7s ease-in-out infinite; }
.lbcap-float-b  { animation: lbcap-float  9s ease-in-out infinite 1.4s; }
.lbcap-dot      { transform-origin: center; transform-box: fill-box; }
.lbcap-pulse    { animation: lbcap-pulse  3s ease-in-out infinite; }
.lbcap-pulse-b  { animation: lbcap-pulse  4s ease-in-out infinite 1.2s; }

/* ─── Tracks section ─────────────────────────────────────────────────────── */
.lbp-tracks { padding-top: 40px; padding-bottom: 120px; }
.lbp-tracks-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: flex-end; margin-bottom: 56px; }
.lbp-tk-grid-wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; align-items: stretch; }
.lbp-tk-card .lbp-tk-panel { color: var(--track-accent); }
/* Track icons scale to fill their panel — no fixed pixel sizes */
.lbp-tk-panel svg { display: block; width: 100%; height: 100%; }
.lbp-tk-cta {
  display: inline-flex; align-items: center; gap: 6px;
  /* pin to the card bottom so all CTAs align when cards are equal-height */
  margin-top: auto; align-self: flex-start; padding-top: 14px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none;
  transition: gap .25s cubic-bezier(.2,.7,.3,1);
}
.lbp-tk-cta .arr { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.lbp-tk-card:hover .lbp-tk-cta     { gap: 10px; }
.lbp-tk-card:hover .lbp-tk-cta .arr{ transform: translateX(3px); }

/* Per-icon micro-animations */
.lbp-tk-ent-pick {
  transform-origin: left center; transform-box: fill-box;
  opacity: 0.65; transform: scaleX(0.78);
  transition: transform .55s cubic-bezier(.5,1.6,.4,1), opacity .35s;
}
.lbp-tk-card:hover .lbp-tk-ent-pick { opacity: 1; transform: scaleX(1); }
.lbp-tk-ent-bar {
  transform: translateX(-6px); transform-box: fill-box;
  transition: transform .4s cubic-bezier(.2,.7,.3,1) var(--di, 0ms),
              opacity .4s var(--di, 0ms);
}
.lbp-tk-card:hover .lbp-tk-ent-bar  { transform: translateX(0); }
.lbp-tk-ent-bar:nth-of-type(1) { --di:  40ms; }
.lbp-tk-ent-bar:nth-of-type(2) { --di:  80ms; }
.lbp-tk-ent-bar:nth-of-type(3) { --di: 120ms; }
.lbp-tk-ent-bar:nth-of-type(4) { --di: 160ms; }
.lbp-tk-ent-bar:nth-of-type(5) { --di: 200ms; }

.lbp-tk-fnd-arc    { stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1); }
.lbp-tk-fnd-craft  { transform: scale(.35); transform-box: fill-box; opacity: 0; transition: transform .45s cubic-bezier(.5,1.6,.4,1) .7s, opacity .25s .7s; }
.lbp-tk-card:hover .lbp-tk-fnd-arc   { stroke-dashoffset: 0; }
.lbp-tk-card:hover .lbp-tk-fnd-craft { transform: scale(1); opacity: 1; }

.lbp-tk-ops-tangle    { transition: opacity .45s; }
.lbp-tk-ops-clean     { opacity: 0; transition: opacity .35s .25s; }
.lbp-tk-ops-clean-line{ stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .75s cubic-bezier(.2,.7,.3,1) .2s; }
.lbp-tk-ops-clean-tip { transform: translateX(-8px); transform-box: fill-box; opacity: 0; transition: transform .35s cubic-bezier(.5,1.6,.4,1) .8s, opacity .25s .8s; }
.lbp-tk-card:hover .lbp-tk-ops-tangle    { opacity: 0.15; }
.lbp-tk-card:hover .lbp-tk-ops-clean     { opacity: 1; }
.lbp-tk-card:hover .lbp-tk-ops-clean-line{ stroke-dashoffset: 0; }
.lbp-tk-card:hover .lbp-tk-ops-clean-tip { transform: translateX(0); opacity: 1; }

.lbp-tk-hrd-shield { transition: fill-opacity .35s; }
.lbp-tk-hrd-check  { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .7s cubic-bezier(.5,1.4,.4,1) .15s; }
.lbp-tk-card:hover .lbp-tk-hrd-shield { fill-opacity: 0.22; }
.lbp-tk-card:hover .lbp-tk-hrd-check  { stroke-dashoffset: 0; }

/* ─── Cases filter section ───────────────────────────────────────────────── */
.lbp-cases-section { padding-top: 60px; padding-bottom: 120px; position: relative; }
.lbp-cases-head    { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.lbp-filter-bar    { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; align-items: center; }
.lbp-filter-btn    { padding: 8px 16px; border-radius: 99px; font-size: 13px; cursor: pointer; border: 1px solid var(--hair); font-family: inherit; background: rgba(255,255,255,0.6); color: var(--ink); transition: all .2s; }
.lbp-filter-btn.is-on { background: var(--ink); color: var(--bg); }
.lbp-cases-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.lbp-case-card     { background: #fff; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.lbp-case-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(28,26,22,0.12); }
.lbp-case-img-wrap { aspect-ratio: 2 / 1; position: relative; overflow: hidden; }
.lbp-case-img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.lbp-case-card:hover .lbp-case-img-wrap img { transform: scale(1.04); }
.lbp-case-overlay  { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(28,26,22,.7) 100%); opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; padding: 24px; pointer-events: none; z-index: 2; color: #fff; }
.lbp-case-card:hover .lbp-case-overlay { opacity: 1; }
.lbp-case-body   { padding: 28px 32px 32px; flex: 1; display: flex; flex-direction: column; }
.lbp-case-footer { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--hair); }

/* Chips under the title — scoped override of .lb-tag (which uses a
   transparent white background designed for image-overlay use) so they read
   as proper pills against the white card body. */
.lbp-case-card .lb-tag {
  display: inline-flex; align-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hair);
  padding: 4px 10px;
  border-radius: 99px;
}

/* ─── Process calendar ───────────────────────────────────────────────────── */
.lbp-proc-section { padding-top: 80px; padding-bottom: 120px; }
.lbp-proc-head    { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: flex-end; margin-bottom: 56px; }
.lbp-cal-wrap  { position: relative; width: 100%; box-sizing: border-box; border: 1px solid var(--hair); border-radius: 24px; padding: 32px 28px 24px; background: rgba(255,255,255,0.4); }
.lbp-cal-phases{ display: grid; grid-template-columns: repeat(12,1fr); margin-bottom: 12px; }
.lbp-cal-phase { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.16em; font-weight: 600; color: var(--ink); padding-left: 4px; }
.lbp-cal-weeks { display: grid; grid-template-columns: repeat(12,1fr); border-top: 1px solid var(--hair); padding-top: 14px; margin-bottom: 18px; }
.lbp-cal-week  { position: relative; padding-left: 6px; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.lbp-cal-week::before { content:''; position:absolute; top:-14px; left:0; width:1px; height:8px; background:var(--hair); }
.lbp-cal-week .wn { display:block; font-size:11px; font-weight:600; letter-spacing:0.08em; color:var(--ink); }
.lbp-cal-week .wd { font-size:10.5px; color:var(--muted); letter-spacing:0.04em; margin-top:3px; display:block; }
.lbp-cal-grid  { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:36px; gap:18px 0; position:relative; padding:8px 0 12px; }
.lbp-cal-grid::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:repeating-linear-gradient(to right, var(--hair) 0, var(--hair) 1px, transparent 1px, transparent calc(100% / 12)); opacity:0.55; }
.lbp-cal-bar {
  position:relative; z-index:2;
  height:38px; border-radius:99px;
  display:flex; align-items:center; gap:10px; padding:0 38px 0 16px;
  min-width:0; font-size:13.5px; line-height:1.2; letter-spacing:-0.005em;
  background: color-mix(in oklab, var(--bar-tone) 16%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--bar-tone) 22%, transparent);
  transform: scaleX(0.02); transform-origin: left center; opacity: 0;
  transition: transform .8s cubic-bezier(.2,.7,.3,1), opacity .35s, background .25s, border-color .25s, box-shadow .3s, color .25s;
  cursor: default;
}
.lbp-cal-bar.on { transform: scaleX(1); opacity: 1; }
.lbp-cal-bar:hover { background:var(--bar-tone); border-color:var(--bar-tone); color:#fff; z-index:50; box-shadow: 0 14px 28px -10px color-mix(in oklab, var(--bar-tone) 60%, transparent); transform: scaleX(1.015) scaleY(1.06); }
.lbp-cal-bar .ttl { font-weight:600; flex-shrink:0; }

/* Description renders as a floating tooltip ABOVE the bar — sized
   independently of the bar's grid-column width so the full sentence is
   visible on hover, even on short bars (Discovery, Grow). */
.lbp-cal-bar .blr {
  position: absolute;
  left: 16px;
  bottom: calc(100% + 10px);
  z-index: 60;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: normal;
  text-wrap: pretty;
  width: max-content;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 32px -12px rgba(28,26,22,0.32), 0 2px 6px rgba(28,26,22,0.12);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .2s, transform .25s cubic-bezier(.2,.7,.3,1);
}
.lbp-cal-bar .blr::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 24px;
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.lbp-cal-bar:hover .blr {
  opacity: 1;
  transform: translateY(0);
}

.lbp-cal-bar .end-dot { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:99px; background:var(--bar-tone); box-shadow: 0 0 0 2px color-mix(in oklab, var(--bar-tone) 25%, transparent); transition:background .25s, box-shadow .25s; }
.lbp-cal-bar:hover .end-dot { background:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }
@media (prefers-reduced-motion:reduce) { .lbp-cal-bar { transition:none !important; transform:none !important; opacity:1 !important; } }

/* Process CTA */
.lbp-proc-cta { position:relative; margin-top:56px; padding:40px 44px; background:var(--ink); border-radius:28px; overflow:hidden; color:var(--bg); }
.lbp-proc-cta-bg { position:absolute; top:-120px; right:-120px; width:360px; height:360px; border-radius:99px; background:color-mix(in oklab,var(--accent) 55%,transparent); filter:blur(60px); pointer-events:none; opacity:0.65; }
.lbp-proc-cta-pattern { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.lbp-proc-cta .lbp-hero-pill { --accent:var(--accent-green); }
.lbp-proc-cta-body { position:relative; z-index:1; display:grid; grid-template-columns:1.5fr auto; gap:40px; align-items:center; }
.lbp-proc-cta-h { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:clamp(28px,3.2vw,42px); line-height:1.05; margin:18px 0 0; color:var(--bg); text-wrap:balance; letter-spacing:-0.02em; font-weight:600; }
.lbp-proc-cta-p { font-size:15px; line-height:1.55; color:rgba(251,247,240,.7); margin:16px 0 0; max-width:620px; text-wrap:pretty; }
.lbp-proc-cta-actions { display:flex; flex-direction:column; gap:12px; align-items:flex-end; flex-shrink:0; }
.lbp-proc-cta-btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent)!important; color:#fff!important; border:1.5px solid var(--accent)!important; padding:14px 26px!important; font-size:14.5px!important; border-radius:999px; text-decoration:none; transition:background .25s,border-color .25s,color .25s,transform .2s; }
.lbp-proc-cta-btn:hover { background:#fff!important; border-color:#fff!important; color:var(--accent)!important; transform:translateY(-1px); }
.lbp-proc-cta-mail { color:rgba(251,247,240,.6)!important; font-size:12.5px!important; border-bottom-color:transparent!important; }
.lbp-proc-cta-mail:hover { color:var(--bg)!important; border-bottom-color:rgba(255,255,255,.4)!important; }

/* ─── Engage services ────────────────────────────────────────────────────── */
.lbp-eng { padding-top:80px; padding-bottom:120px; }
.lbp-eng-head { margin-bottom:56px; display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:flex-end; }
.lbp-eng-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:64px 32px; align-items:stretch; }
.lbp-eng-card { position:relative; background:#fff; border-radius:24px; padding:16px 28px 24px; display:flex; flex-direction:column; gap:14px; height:100%; box-sizing:border-box; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s; }
.lbp-eng-card:hover { transform:translateY(-4px); box-shadow:0 24px 48px -16px rgba(28,26,22,.14); }
.lbp-eng-head-row { display:flex; align-items:center; justify-content:space-between; margin:0 0 4px; }
.lbp-eng-tag { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; background:color-mix(in oklab,var(--card-tone) 14%,transparent); color:var(--card-tone); font-weight:600; }
.lbp-eng-tag::before { content:''; width:6px; height:6px; border-radius:99px; background:var(--card-tone); }
.lbp-eng-card, .lbp-eng-card *, .lbp-eng-grid a {
  text-decoration: none;
}
.lbp-eng-arrow { width:40px; height:40px; border-radius:12px; background:color-mix(in oklab,var(--card-tone) 14%,transparent); color:var(--card-tone); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; transition:transform .35s cubic-bezier(.5,1.6,.4,1),background .25s,color .25s; }
.lbp-eng-arrow svg { width:22px; height:22px; }
.lbp-eng-card:hover .lbp-eng-arrow { background:var(--card-tone); color:#fff; transform:rotate(-6deg) scale(1.06); }
.lbp-eng-title { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:600; font-size:24px; line-height:1.1; letter-spacing:-0.025em; color:var(--ink); margin:0; }
.lbp-eng-q     { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-style:italic; font-weight:500; font-size:15px; color:var(--card-tone); letter-spacing:-0.01em; margin:-4px 0 0; }
.lbp-eng-desc  { font-size:14px; line-height:1.55; color:var(--muted); margin:0; min-height:4.65em; }
.lbp-eng-meta  { margin-top:auto; padding-top:20px; border-top:1px dashed var(--hair); display:flex; gap:36px; flex-wrap:wrap; }
.lbp-eng-meta-item { display:flex; flex-direction:column; gap:4px; min-width:0; }
.lbp-eng-meta-k { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.lbp-eng-meta-v { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:500; font-size:14.5px; color:var(--ink); letter-spacing:-0.005em; line-height:1.3; }

/* Growth Engine retainer */
.lbp-eng-retainer { margin-top:128px; position:relative; overflow:hidden; border-radius:28px; padding:56px 64px; background:var(--ink); color:var(--bg); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center; }
.lbp-eng-retainer-inner { position:relative; z-index:1; }
.lbp-eng-retainer::before { content:''; position:absolute; top:-100px; right:-100px; width:380px; height:380px; border-radius:99px; background:color-mix(in oklab,var(--accent) 55%,transparent); filter:blur(60px); pointer-events:none; opacity:0.55; }
.lbp-eng-retainer-pattern { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.lbp-eng-retainer > *:not(.lbp-eng-retainer-pattern) { position:relative; z-index:1; }
.lbp-eng-retainer .lbp-eng-tag { background:color-mix(in oklab,var(--accent) 22%,transparent); color:var(--accent); }
.lbp-eng-retainer .lbp-eng-tag::before { background:var(--accent); }
.lbp-eng-retainer h3 { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:clamp(36px,4.2vw,56px); line-height:1.02; letter-spacing:-0.025em; margin:18px 0 8px; color:var(--bg); text-wrap:balance; font-weight:600; }
.lbp-eng-retainer .q { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-style:italic; font-weight:500; font-size:16px; color:var(--accent); letter-spacing:-0.005em; margin:0 0 20px; }
.lbp-eng-retainer p  { font-size:15.5px; line-height:1.6; color:rgba(251,247,240,.72); margin:0; max-width:540px; text-wrap:pretty; }
.lbp-eng-retainer-cta { margin-top:28px; display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; padding:14px 24px; border-radius:99px; border:1.5px solid var(--accent); font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:600; font-size:14px; text-decoration:none; transition:background .25s,border-color .25s,color .25s,transform .2s; }
.lbp-eng-retainer-cta:hover { background:#fff; border-color:#fff; color:var(--accent); transform:translateY(-1px); }
.lbp-eng-retainer-pill { --accent:var(--accent-green); }
.lbp-eng-growth { position:relative; width:100%; max-width:520px; margin-left:auto; }
.lbp-eng-growth svg { width:100%; height:auto; display:block; }
@keyframes lbp-eng-growth-draw { to { stroke-dashoffset:0; } }
@keyframes lbp-eng-dot-in { 0% { transform:scale(0); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes lbp-eng-halo-soft { 0%,100% { transform:scale(1); opacity:.45; } 50% { transform:scale(1.25); opacity:.85; } }
.lbp-eng-growth-curve { stroke-dasharray:100; stroke-dashoffset:100; animation:lbp-eng-growth-draw 1.6s cubic-bezier(.2,.7,.3,1) .25s forwards; }
.lbp-eng-growth-dot { transform-origin:center; transform-box:fill-box; transform:scale(0); opacity:0; animation:lbp-eng-dot-in .5s cubic-bezier(.5,1.6,.4,1) forwards; }
.lbp-eng-growth-dot .halo { transform-origin:center; transform-box:fill-box; animation:lbp-eng-halo-soft 3s ease-in-out infinite; }
.lbp-eng-growth-dot:nth-of-type(2) .halo { animation-delay:.4s; }
.lbp-eng-growth-dot:nth-of-type(3) .halo { animation-delay:.8s; }
.lbp-eng-growth-dot:nth-of-type(4) .halo { animation-delay:1.2s; }
.lbp-eng-growth-dot:nth-of-type(5) .halo { animation-delay:1.6s; }
.lbp-eng-growth-dot.peak .halo { animation-duration:2.2s; }
@keyframes lbp-eng-pattern-spin  { to { transform:rotate(360deg); } }
@keyframes lbp-eng-pattern-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.lbp-eng-retainer-pattern .float-a { transform-origin:112px 112px; transform-box:fill-box; animation:lbp-eng-pattern-spin 38s linear infinite; }
.lbp-eng-retainer-pattern .float-b { transform-origin:150px 360px; transform-box:fill-box; animation:lbp-eng-pattern-float 6s ease-in-out infinite; }
.lbp-eng-retainer-pattern .float-c { transform-origin:720px 410px; transform-box:fill-box; animation:lbp-eng-pattern-spin 28s linear infinite reverse; }

/* ─── Track record ───────────────────────────────────────────────────────── */
.lbp-trk { padding-top:80px; padding-bottom:120px; }
.lbp-trk-head { margin-bottom:56px; display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:flex-end; }
.lbp-trk-eyebrow { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.lbp-trk-h  { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:clamp(40px,4.8vw,68px); line-height:0.98; letter-spacing:-0.03em; color:var(--ink); margin:0; font-weight:600; text-wrap:balance; }
.lbp-trk-h em { color:var(--accent); font-style:italic; font-weight:500; }
.lbp-trk-sub { font-size:17px; line-height:1.55; color:var(--muted); margin:0; max-width:560px; text-wrap:pretty; padding-bottom:8px; }
.lbp-trk-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.lbp-trk-card { position:relative; background:#fff; border-radius:24px; padding:36px 36px 32px; display:flex; flex-direction:column; gap:19px; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s; }
.lbp-trk-card:hover { transform:translateY(-4px); box-shadow:0 28px 56px -18px rgba(28,26,22,.18); }
.lbp-trk-brand { display:flex; align-items:center; min-height:28px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color:var(--card-tone); font-weight:700; }
.lbp-trk-brand img { height:26px; width:auto; max-width:170px; display:block; }
.lbp-trk-title { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:22px; line-height:1.15; letter-spacing:-0.02em; color:var(--ink); margin:0; font-weight:600; }
.lbp-trk-title em { font-style:italic; font-weight:500; color:var(--card-tone); }
.lbp-trk-pill { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; background:color-mix(in oklab,var(--card-tone) 14%,transparent); color:var(--card-tone); font-weight:600; }
.lbp-trk-pill::before { content:''; width:6px; height:6px; border-radius:99px; background:var(--card-tone); }
.lbp-trk-desc { font-size:14px; line-height:1.55; color:var(--muted); margin:0; text-wrap:pretty; }
.lbp-trk-stats { margin-top:0; padding-top:20px; border-top:1px dashed var(--hair); display:flex; gap:36px; flex-wrap:wrap; align-items:baseline; }
.lbp-trk-stat { display:flex; flex-direction:column; gap:4px; }
.lbp-trk-stat .v { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:32px; line-height:1; font-weight:600; color:var(--ink); letter-spacing:-0.025em; }
.lbp-trk-stat .k { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }

/* ─── Logo marquee hover ──────────────────────────────────────────────────── */
.lbp-logo img { opacity:0.5; transition:opacity .25s, transform .25s; }
.lbp-logo:hover img { opacity:0.85; transform:scale(1.04); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1450px) {
  .lbp-eng-grid {
    gap: 64px 16px;
  }
  .lbp-eng-meta {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media (max-width: 1100px) {
  .lbp-eng-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 980px) {
  .lbp-cap-layout   { grid-template-columns:1fr; }
  .lbp-eng-retainer { grid-template-columns:1fr; }
  .lbp-eng-growth   { display:none; }
  .lbp-trk-grid     { grid-template-columns:1fr; }
  .lbp-cases-grid   { grid-template-columns:1fr; }
}
@media (max-width: 820px) {
  /* iPad/phone: single column. Drop grid-template-areas to a vertical stack
     so children flow as intro → form → CTAs, with minmax(0,...) so the form's
     min-content (nowrap tabs + long email footer line) can't push the track
     past the wrap and force horizontal overflow. */
  .lbp-hero-grid     {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "intro" "form" "cta";
    row-gap: 24px;
  }
  .lbp-metric-grid   { grid-template-columns:repeat(2,1fr); }
  .lb-services-head  { grid-template-columns:1fr; }
  .lb-services-grid  { grid-template-columns:1fr; }
  .lb-service-card   { height:auto; }   /* let the card grow so bullet chips aren't clipped */
  /* Extend the chip bottom-padding fix from phones to iPad: the inline
     `padding: 24px 26px 2px` leaves only 2px under the chip row. */
  .lb-service-card   { padding-bottom: 22px !important; }
  .lbp-tracks-head   { grid-template-columns:1fr; }
  .lbp-tk-grid-wrap  { grid-template-columns:repeat(2,1fr); }
  .lbp-proc-head     { grid-template-columns:1fr; }
  .lbp-proc-cta-body { grid-template-columns:1fr; }
  .lbp-proc-cta-actions { align-items:flex-start; }
  .lbp-proc-cta      { padding:36px 28px; }
  .lbp-eng-head      { grid-template-columns:1fr; }
  .lbp-eng-grid      { grid-template-columns:1fr; }
  .lbp-eng-retainer  { padding:40px 28px; }
  .lbp-trk-head      { grid-template-columns:1fr; }
  .lbp-cap-dark      { padding:32px; }
  .lbp-cases-head    { flex-wrap:wrap; }

  /* ── Section heads (title | description): collapsed to single column, the
     60px grid gap becomes a row-gap and the inline padding-top stacks on
     top — ~90px of vertical space between title and description. Bring them
     close together. The attribute selectors zero the inline `padding-top:36px`
     / `padding-top:32px` on the right-side description columns. */
  .lb-services-head,
  .lbp-tracks-head,
  .lbp-proc-head,
  .lbp-eng-head,
  .lbp-trk-head,
  .lbp-fu-head,
  /* enterprise.html section heads use the same 1.4fr / 1fr pattern */
  .ent-sly-head,
  .ent-pp-header,
  .ent-paths-head,
  .ent-ind-head       { gap: 16px !important; margin-bottom: 28px !important; }
  .lb-services-head > div[style*="padding-top:36px"],
  .lbp-tracks-head  > div[style*="padding-top:32px"],
  .ent-pp-header    > div[style*="padding-top:32px"] { padding-top: 0 !important; }

  /* ── "How we work" calendar: reflow the 12-col timeline to a vertical
     stacked list with description visible under the "N weeks" line, and
     dial the pill radius down to a card-like 20px. ── */
  /* hide the 12-col phase + week header on every calendar (homepage and the
     service pages) — the bars stack into one column on mobile, so the
     column header no longer lines up with anything. */
  .lbp-cal-phases,
  .lbp-cal-weeks        { display: none; }
  .lbp-cal-grid         { display: flex; flex-direction: column; gap: 10px; }
  .lbp-cal-grid::before { display: none; }
  .lbp-cal-bar {
    grid-column: 1 / -1 !important;
    height: auto; min-height: 44px; padding: 14px 18px;
    flex-direction: column; align-items: flex-start; gap: 6px;
    white-space: normal; overflow: visible;
    border-radius: 20px !important;
    transform: none !important; opacity: 1 !important;
  }
  /* Reset the desktop tooltip styling for .blr — on mobile it needs to
     render inline as plain text under the title, not as an absolute-
     positioned dark popup. */
  .lbp-cal-bar .blr {
    position: static !important;
    transform: none !important;
    width: auto !important; max-width: none !important;
    padding: 0 !important; border-radius: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    opacity: 0.78 !important;
    white-space: normal !important;
    display: block !important;
    font-size: 13px; line-height: 1.45;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
  }
  /* hide the tooltip arrow */
  .lbp-cal-bar .blr::after { display: none !important; }
  /* and don't let hover state apply (no point on touch) */
  .lbp-cal-bar:hover .blr { opacity: 0.78 !important; transform: none !important; }
  .lbp-cal-bar .end-dot { display: none; }

  /* ── Mobile: dial down the card rounding.
     32–40 px corners read as desktop-marketing on a phone — soften the
     case-study cards, blog cards, and CTAs so they feel like list rows. */
  .lbp-case-card    { border-radius: 18px !important; }
  .lbp-blog-card    { border-radius: 16px !important; }
  .lbp-blog-img-wrap{ border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; }
  .lbp-proc-cta     { border-radius: 18px !important; }
  /* Light CTA (.rfs-cta-card lives in chrome.js — the mobile padding rule
     already targets it; add the radius alongside via a high-specificity
     descendant selector here so we don't need to touch chrome.js.) */
  section .rfs-cta-card { border-radius: 24px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINT SCALE  (max-width — keep new rules on these tiers)
     1100px · wide tablet / small laptop
      980px · tablet landscape
      820px · tablet portrait — page padding shrinks; most grids drop columns
      560px · phone — card grids collapse to ONE column; calendar becomes a list
   ───────────────────────────────────────────────────────────────────────── */

/* ── Phone (≤560px) ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Card grids → one column so cards aren't cramped/overlapping on phones.
     (Calendar reflow + bar styling lives in the ≤820 block so iPad gets it
     too.) */
  .lbp-metric-grid,
  .lbp-tk-grid-wrap,
  .lbp-cap-btns         { grid-template-columns: 1fr; }

  /* ── Tighter vertical rhythm on phones (was 120px between every section) ── */
  /* class-based sections */
  .lbp-tracks         { padding-top: 32px; padding-bottom: 56px; }
  .lbp-cases-section  { padding-top: 40px; padding-bottom: 56px; }
  .lbp-proc-section   { padding-top: 40px; padding-bottom: 56px; }
  .lbp-eng            { padding-top: 40px; padding-bottom: 56px; }
  .lbp-trk            { padding-top: 40px; padding-bottom: 56px; }
  /* inline-styled sections (homepage services/capabilities/insights AND
     enterprise sounds-like/problems/CTA/paths/industries/blog) */
  section.lb-wrap[style*="padding-top:120px"]    { padding-top: 48px !important; }
  section.lb-wrap[style*="padding-top:100px"]    { padding-top: 44px !important; }
  section.lb-wrap[style*="padding-top:80px"]     { padding-top: 40px !important; }
  section.lb-wrap[style*="padding-top:60px"]     { padding-top: 36px !important; }
  section.lb-wrap[style*="padding-top:40px"]     { padding-top: 28px !important; }
  section.lb-wrap[style*="padding-bottom:120px"] { padding-bottom: 56px !important; }
  section.lb-wrap[style*="padding-bottom:100px"] { padding-bottom: 48px !important; }
  section.lb-wrap[style*="padding-bottom:60px"]  { padding-bottom: 36px !important; }
  section.lb-wrap[style*="padding-bottom:32px"]  { padding-bottom: 24px !important; }
  /* large logo marquee section: drop top padding too */
  section[aria-label="Companies we’ve helped ship"] { padding-top: 24px !important; padding-bottom: 24px !important; }

  /* ── Services cards: chips were kissing the card bottom edge ── */
  .lb-service-card { padding-bottom: 22px !important; }
  .lb-service-bullets { margin-bottom: 4px; }

  /* ── "The AI stack" head: title gets its own row above the helper text ── */
  .lbp-cap-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; }

  /* ── Selected Work filter pills: one row, horizontal scroll (was wrap) ── */
  .lbp-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad));
    padding: 0 var(--pad) 4px;
  }
  .lbp-filter-bar::-webkit-scrollbar { display: none; }
  .lbp-filter-btn { flex-shrink: 0; }
  #case-count { margin-left: 8px !important; flex-shrink: 0; white-space: nowrap; }

  /* ── Case card footer: tag row on one line, CTA on the next ── */
  .lbp-case-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lbp-case-footer > .lb-mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }


  /* ── Hero lead form footer: keep the "Or email…" line on one row ── */
  .lbp-lead-footer .lb-mono { white-space: nowrap; font-size: 10px !important; }
}

/* Process calendar duration chip — shown on tablet+phone where the bars
   reflow to a vertical card list. On the wide desktop timeline the top
   "WEEK 1…WEEK 12" header gives the time context and each bar is too
   narrow for another inline label. Bars use a pale tint background, so we
   pull color from --bar-tone for visible contrast. */
.lbp-cal-bar .dur {
  display: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--bar-tone, var(--accent));
  font-weight: 600;
}
/* On hover the bar fills with its tone colour — keep EVERY bit of its text
   crisply white: the title (inherits), the duration chip, and the description.
   !important ensures no descendant rule (e.g. .dur's default tone colour)
   wins the cascade. */
.lbp-cal-bar:hover,
.lbp-cal-bar:hover .ttl,
.lbp-cal-bar:hover .dur,
.lbp-cal-bar:hover .blr { color: #fff !important; }
.lbp-cal-bar:hover .blr { opacity: 1; }
@media (max-width: 820px) {
  .lbp-cal-bar .dur { display: inline-block; }
}

/* ─── Boston AI app-dev service grid (homepage section 13) ─────────────────
   Compact icon cards — 3-up desktop, 2-up tablet, 1-up phone. Each card's
   accent comes from --svc-tone (set inline per card). */
/* 6-col track: default cards span 2 (→ 3 per row); .is-feature cards span 3
   (→ 2 per row, used for the iOS + Android first row). */
.lbp-svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.lbp-svc-card, .lbp-svc-card * {text-decoration: none !important;}
.lbp-svc-card h3 {color: initial;}
.lbp-svc-card            { grid-column: span 2; }   /* 3 per row */
.lbp-svc-card.is-feature { grid-column: span 3; }   /* 2 per row (iOS+Android) */
.lbp-svc-card.is-wide    { grid-column: 1 / -1; }   /* full row (Growth, App Marketing) */
.lbp-svc-card {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
.lbp-svc-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--svc-tone, var(--accent)) 40%, var(--hair));
  box-shadow: 0 16px 34px -18px rgba(28,26,22,0.16);
}
.lbp-svc-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--svc-tone, var(--accent)) 12%, transparent);
  color: var(--svc-tone, var(--accent));
  margin-bottom: 4px;
}
.lbp-svc-icon svg { width: 22px; height: 22px; }
.lbp-svc-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600; font-size: 18px; line-height: 1.2;
  letter-spacing: -0.01em; margin: 0;
}
.lbp-svc-desc {
  font-size: 14.5px; line-height: 1.5; color: var(--muted);
  margin: 0; text-wrap: pretty;
}

/* Full-width cards: icon on the left, title over description on the right. */
.lbp-svc-card.is-wide {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon desc";
  column-gap: 20px; row-gap: 2px;
  align-items: center;
  padding: 22px 26px;
}
.lbp-svc-card.is-wide .lbp-svc-icon  { grid-area: icon; margin-bottom: 0; align-self: center; }
.lbp-svc-card.is-wide .lbp-svc-title { grid-area: title; align-self: end; }
.lbp-svc-card.is-wide .lbp-svc-desc  { grid-area: desc; align-self: start; }

/* Standout card (AI Development): orange ground, white text, looping icon. */
.lbp-svc-card.is-highlight {
  background: var(--accent);
  border-color: var(--accent);
}
.lbp-svc-card.is-highlight:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 38px -16px color-mix(in oklab, var(--accent) 55%, transparent);
}
.lbp-svc-card.is-highlight .lbp-svc-title { color: #fff; }
.lbp-svc-card.is-highlight .lbp-svc-desc  { color: rgba(255,255,255,0.85); }
.lbp-svc-card.is-highlight .lbp-svc-icon  { background: rgba(255,255,255,0.18); color: #fff; }
@keyframes lbp-svc-spark {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.18) rotate(12deg); }
}
.lbp-svc-card.is-highlight .lbp-svc-icon svg {
  transform-origin: center;
  animation: lbp-svc-spark 2.4s ease-in-out infinite;
}

/* ─── FAQ accordion (homepage section 14) — native <details>/<summary> ──── */
.lbp-faq-list {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 860px;
  margin-left: auto; margin-right: auto;   /* centered accordion column */
}
.lbp-faq-item {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 18px;
  transition: border-color .2s, box-shadow .2s;
}
.lbp-faq-item[open] {
  border-color: color-mix(in oklab, var(--accent) 28%, var(--hair));
  box-shadow: 0 16px 34px -20px rgba(28,26,22,0.12);
}
.lbp-faq-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink);
}
.lbp-faq-q::-webkit-details-marker { display: none; }
.lbp-faq-q::marker { content: ''; }
.lbp-faq-q-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), background .2s, color .2s;
}
.lbp-faq-q-icon svg { width: 16px; height: 16px; }
.lbp-faq-item[open] .lbp-faq-q-icon { transform: rotate(180deg); background: var(--accent); color: #fff; }
.lbp-faq-a {
  padding: 0 24px 22px;
  font-size: 15.5px; line-height: 1.6; color: var(--ink); opacity: 0.78;
  text-wrap: pretty; max-width: 78ch;
}
.lbp-faq-a p { margin: 0; }

@media (max-width: 820px) {
  /* tablet: 2 per row; wide cards stay full-width */
  .lbp-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .lbp-svc-card,
  .lbp-svc-card.is-feature { grid-column: auto; }
  .lbp-svc-card.is-wide    { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .lbp-svc-grid { grid-template-columns: 1fr; }
  .lbp-svc-card,
  .lbp-svc-card.is-feature,
  .lbp-svc-card.is-wide { grid-column: auto; }
  /* wide cards back to the normal vertical stack on phones */
  .lbp-svc-card.is-wide {
    display: flex; flex-direction: column;
    grid-template-areas: none; padding: 24px 22px 22px;
  }
  .lbp-svc-card.is-wide .lbp-svc-icon { margin-bottom: 4px; }
  .lbp-faq-q { font-size: 16px; padding: 18px 18px; }
  .lbp-faq-a { padding: 0 18px 20px; }
}