/*
Theme Name: Latent
Theme URI: https://www.latenthq.com
Author: Latent (Alpha OBS LLP)
Description: Block theme for latenthq.com, rebuilt from the Framer design system. Tokens in theme.json.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: latent
*/

/* ---------------------------------------------------------------------------
   Named text styles.
   theme.json covers the scale (colour, size, spacing). These are the composite
   Framer styles whose weight/tracking/leading combination has no theme.json
   equivalent — one class per Framer text style so templates read the same way
   the design does.
   Source: Framer project text styles via MCP getProjectXml.

   NOTE: font-size slugs use the h-1 / h-2 form deliberately. WordPress runs preset
   slugs through _wp_to_kebab_case(), which splits letter-digit boundaries, so a slug
   of "h2" would emit --wp--preset--font-size--h-2 and every --h2 reference would
   silently resolve to nothing. Keeping slug === variable avoids that entire class of bug.
--------------------------------------------------------------------------- */

.ls-h1-large   { font-size: var(--wp--preset--font-size--h-1-large); font-weight: 700; line-height: 1.1;  letter-spacing: -3px; }
.ls-h1-cms     { font-size: var(--wp--preset--font-size--h-1-cms);   font-weight: 600; line-height: 1.2;  letter-spacing: 0; }
.ls-h2-large   { font-size: var(--wp--preset--font-size--h-2-large); font-weight: 600; line-height: 1;    letter-spacing: -2.3px; }
.ls-h2-big     { font-size: var(--wp--preset--font-size--h-2-big);   font-weight: 600; line-height: 1.2;  letter-spacing: 0; }
.ls-h3-small   { font-size: var(--wp--preset--font-size--h-3-small); font-weight: 600; line-height: 1;    letter-spacing: -1px; }

/* Heading 3b / 3c / 3d — the only places the design uses Inter */
.ls-h3-inter   { font-family: var(--wp--preset--font-family--inter);
                 font-size: var(--wp--preset--font-size--h-4); font-weight: 700;
                 line-height: 1.4; letter-spacing: -0.04em; }

.ls-body-large { font-size: var(--wp--preset--font-size--large); line-height: 1.5; letter-spacing: -0.03em; }
.ls-body-large-semibold { font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.5; }
.ls-body-bold  { font-size: var(--wp--preset--font-size--body);  font-weight: 700; line-height: 1.5; }
.ls-body-small { font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.ls-link-text  { font-size: var(--wp--preset--font-size--body);  font-weight: 500; line-height: 1.2; }

/* Eyebrow / overline */
.ls-body-label { font-size: var(--wp--preset--font-size--label); font-weight: 600; line-height: 1.2; }

/* Decorative numerics */
.ls-number     { font-size: var(--wp--preset--font-size--number); font-weight: 500; line-height: 1; }
.ls-price      { font-size: var(--wp--preset--font-size--price);  font-weight: 600; line-height: 1.2; }
.ls-quote      { font-size: var(--wp--preset--font-size--h-2);     font-weight: 400; line-height: 1.1; }

/* 404 — the only use of Outfit */
.ls-h1-404 { font-family: var(--wp--preset--font-family--outfit);
             font-size: var(--wp--preset--font-size--h-1-404); font-weight: 700;
             line-height: 1.1; letter-spacing: -0.05em; text-align: center; }

/* Report landing page family */
.ls-report-eyebrow  { font-size: var(--wp--preset--font-size--small);     font-weight: 600; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
.ls-report-heading  { font-size: var(--wp--preset--font-size--h-2-report); font-weight: 600; line-height: 1.15; letter-spacing: -1.5px; }
.ls-report-body     { font-size: var(--wp--preset--font-size--body-18);   line-height: 1.5; letter-spacing: -0.02em; }
.ls-report-subhead  { font-size: var(--wp--preset--font-size--subhead);   font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; }
.ls-report-label    { font-size: var(--wp--preset--font-size--field);     font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.ls-report-field    { font-size: var(--wp--preset--font-size--small);     font-weight: 500; line-height: 1.2; }

/* ---------------------------------------------------------------------------
   Structure — Framer's section rhythm
--------------------------------------------------------------------------- */

/* The reference steps its root side padding 15px -> 20px at exactly 1024
   (swept: 1024 is still 15, 1023 is 20). theme.json has no way to express a
   breakpoint, so the variable is overridden here and every .has-global-padding
   container follows. Left at 15px this shifted the whole page 5px and made every
   content box 10px too wide, which also moved where headings wrap.
   WordPress declares this variable on `body`, not `:root`, so overriding `:root`
   alone does nothing — body is a descendant and its own declaration wins. */
@media (max-width: 1023px) {
  :root, body {
    --wp--style--root--padding-left: 20px;
    --wp--style--root--padding-right: 20px;
  }
}

/* 130px between sections (see DESIGN.md §1), 80px below 1280 — swept on the
   reference, which steps at 1280→1279 for benefits, services, cases, tech and faq.
   CTA and the process wrapper are the exceptions and keep their own values. */
.ls-section { padding-bottom: var(--wp--preset--spacing--110); }
@media (max-width: 1279px) { .ls-section { padding-bottom: 80px; } }

/* The reference's sections sit FLUSH — every gap between them is 0, because each
   section carries its own bottom padding. WordPress's constrained-layout blockGap
   (`:root :where(.is-layout-constrained) > *`, 0,1,0) adds 50px on top of that
   between every pair, which is ~400px of page height the reference does not have.
   It never showed up in per-section parity, only in the gaps between them.
   Listed explicitly rather than `> *` so article prose keeps its own rhythm. */
.entry-content > :is(.ls-hero, .ls-logostrip, .ls-section, .ls-ctasection) {
  margin-block-start: 0;
}

/* Process carries its 130px on the inner .ls-process, which matches the reference
   box exactly; the wrapper was adding a second 130 on top of it. */
.ls-section.ls-processsec { padding-bottom: 0; }

/* Hero clears the fixed header.
   main already offsets 80px for the fixed header, so this is the REMAINDER,
   not Framer's full 195px - otherwise the two stack into ~275px of dead space. */
.ls-hero { padding-top: 195px; }
/* 10px shorter through the tablet tier (reference hero 545 vs 555 above 1280) */
@media (max-width: 1279px) and (min-width: 1024px) { .ls-hero { padding-top: 185px; } }

/* Blue CTA panel */
.ls-cta-panel {
  background: var(--wp--preset--color--primary-blue);
  border-radius: 20px;
  padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--60);
  color: #fff;
}
.ls-cta-panel :is(h1,h2,h3,h4,h5,h6) { color: #fff; }

/* Cards */
.ls-card {
  background: var(--wp--preset--color--snow-white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 20px;
  padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--60);
}

/* Outline button variant */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark-blue);
  border: 1px solid var(--wp--preset--color--primary-blue);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
}

/* Sticky header: announcement bar + nav, matching the Framer Header component */
.wp-site-blocks > header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--wp--preset--color--white);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-site-blocks > main { padding-top: 141px; }
.wp-site-blocks > main:has(.ls-hero, .ls-banner, .ls-abhero, .ls-svchero) { padding-top: 0; }

.ls-announce { background: var(--wp--preset--color--primary-blue); }
.ls-announce a {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 11px 20px; color: #fff; text-decoration: none;
  /* measured: 500 14px/18.2 — 12px/400 read visibly smaller than the reference */
  font-size: 14px; line-height: 1.3; font-weight: 500; text-align: center;
}
.ls-announce strong { text-decoration: underline; font-weight: 700; }
/* Header geometry measured on latenthq.com @1440:
     total 141 = nav row 106 (25px pad + 56px content row + 25px pad) + announce 35.
     theme.json's 50px blockGap was inserting itself between the two rows. */
.wp-site-blocks > header > .wp-block-group { gap: 0; }
.wp-site-blocks > header > .wp-block-group > * { margin-block-start: 0 !important; }
/* blockGap lands as margin-top on <main> itself (between the header part and main),
   pushing the hero 50px down. main's padding-top already clears the fixed header. */
.wp-site-blocks > main { margin-block-start: 0 !important; }
/* No side padding: the row inside carries its own 15px, and the reference's header
   row is a flat max-width:1200 centred box — at a 1200 viewport it spans 0..1200
   with the logo at 15. Root padding here as well put the logo at 30 and inset the
   whole row by 15. */
.ls-navbar { padding-top: 22px; padding-bottom: 22px; padding-left: 0; padding-right: 0; }
/* live logo sits at x=135: 120 (container) + 15 (inner padding) */
.ls-navbar > .wp-block-group { padding-left: 15px; padding-right: 15px; }
.ls-logo { display: inline-flex; align-items: center; }
.ls-logo svg { width: 155px; height: 40px; display: block; }

/* The header is just three items — logo | nav | button — distributed with
   space-between. Measured on the reference: the gaps either side of the nav are
   199px at 1512 and 30px at 1024, which is exactly what space-between yields for
   three children of 155 / 688 / 241 at those widths. `flex: 1` + centring on the
   nav produced a different distribution and put Home at 395 against the
   reference's 369. */
/* gap:0 is load-bearing. theme.json's 50px blockGap lands on this row too, and
   with three children that forces 100px of spacing into 87px of free space —
   space-between then cannot compress it, so the whole row overflowed 12px right.
   The reference spaces purely by distribution: 43px gaps at 1512, 30px at 1024. */
.ls-navbar > .wp-block-group { justify-content: space-between; gap: 0; }
.ls-navbar .wp-block-navigation { flex: 0 0 auto; justify-content: flex-start; gap: 50px; }
.ls-navbar .wp-block-navigation .wp-block-navigation-item { margin: 0; }
/* nav items are 500 16/19.2 #001047 on the reference — ours were 400/24 #2b2b2b */
.ls-navbar .wp-block-navigation .wp-block-navigation-item__content {
  font-weight: 500; line-height: 1.2; color: var(--wp--preset--color--dark-blue); }
/* 50px at 1280+, 20px through the tablet tier — swept. A flat 45px needed 640px
   of a ~597px slot at 1024 and wrapped the last two items onto a second row. */
@media (max-width: 1279px) and (min-width: 1024px) {
  .ls-navbar .wp-block-navigation { gap: 20px; }
}
/* "Services" carries a chevron on the reference — the word ends at 793, the
   chevron runs 802-811, and the item is 85px against our 64px text-only. */
.ls-navbar .wp-block-navigation-item > a[href="/services"] {
  /* word ends at 793, chevron runs 802-811, item ends 815 -> 9px gap + 10px
     chevron + 4px trailing = the reference's 85px */
  display: inline-flex; align-items: center; gap: 9px; padding-right: 4px;
}
.ls-navbar .wp-block-navigation-item > a[href="/services"]::after {
  content: ''; width: 7px; height: 7px; margin-top: -4px; flex: 0 0 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);            /* 7px box on the diagonal = ~10px wide */
}

/* Services dropdown — measured on the reference (hover, case-study page @1512):
   panel 415x235 at item-165px / 25px below the item text; #fafafa r20,
   shadow rgba(0,0,0,.04) 0 0 10, padding 20px 80px 20px 30px; items 500 16/19.2
   #001047 (inherited from the nav item rule) on a 35px pitch (19 + 16). */
.ls-navbar .wp-block-navigation .wp-block-navigation__submenu-container {
  /* the reference stacks TWO shadows (an outer wrapper adds 0 10px 20px) and a
     1px rgb(156,187,250) stroke drawn as a Framer inner overlay — sampled from
     pixels, since every wrapper's computed border reads 0 */
  background: #fafafa; border: 1px solid rgb(156, 187, 250); border-radius: 20px;
  box-shadow: rgba(0, 0, 0, .04) 0 0 10px 0, rgba(0, 0, 0, .05) 0 10px 20px 0;
  box-sizing: border-box;
  padding: 20px 80px 20px 30px;
  left: -165px; top: calc(100% + 25px); min-width: max-content;
}
/* the justified-right nav pins submenus right:0 (left resolved -361); re-pin */
.ls-navbar .items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
  left: -165px; right: auto; }
.ls-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item {
  margin-top: 16px; }
/* WP emits the .5em/1em submenu item padding from global styles after this
   sheet no matter the specificity — matching their weight, as with the margins */
.ls-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0 !important; white-space: nowrap; }
/* invisible bridge across the 25px gap so the hover chain survives the traverse */
.ls-navbar .wp-block-navigation .has-child { position: relative; }
.ls-navbar .wp-block-navigation .has-child:hover::before {
  content: ''; position: absolute; left: -165px; top: 100%; height: 25px; width: 415px; }
/* open state on the reference: the item goes primary-blue, no underline, chevron up */
.ls-navbar .wp-block-navigation .wp-block-navigation-item__content:hover {
  text-decoration: none; color: var(--wp--preset--color--primary-blue); }
.ls-navbar .has-child:hover > a[href="/services"] {
  color: var(--wp--preset--color--primary-blue); }
.ls-navbar .has-child:hover > a[href="/services"]::after {
  transform: rotate(-135deg); margin-top: 4px; }
/* the CTA is a pill: 55px radius, 56px tall. flex:0 0 auto or space-between
   compresses it to 208px at 1024 against the reference's 241. */
.ls-navbar .wp-block-buttons { margin-left: 0; flex: 0 0 auto; }
.ls-navbar .wp-block-button__link { white-space: nowrap; }
.ls-navbar .wp-block-button__link { border-radius: 55px; min-height: 56px;
  display: inline-flex; align-items: center; padding: 16px 28px; }

@media (max-width: 781px) {
  .wp-site-blocks > main { padding-top: 120px; }
  .wp-site-blocks > main:has(.ls-hero, .ls-banner, .ls-abhero, .ls-svchero) { padding-top: 0; }
}

/* Long-form article body */
.ls-prose { max-width: 920px; }   /* reference prose column is 920, not 820 */
.ls-prose :is(h2, h3, h4) { margin-top: 0; margin-bottom: 0; }
/* h3 is 32/32 on the reference (lh 1.0); the UA default 1.1 gave 35.2 */
.ls-prose h3 { line-height: 32px; }
/* Headings carry NO margin — measured directly on the reference article: the
   rhythm is uniform 20px paragraph margins plus the empty spacer <p>s the
   import preserved. The old 27px was a compensating hack: it absorbed the
   height of the author-bio / Related Posts / demo sections that were missing
   from the template entirely (found 2026-08-09, §37). */
.ls-prose p { margin: 20px 0 0; color: var(--wp--preset--color--dark-grey); }
.ls-prose li { margin: 0; }
.ls-prose li p { margin: 0; }
/* blockquote = large dark-blue callout, 25/30 w500, 4px primary-blue left bar,
   full 920 column (UA default margin:0 40px was shrinking it to 840). Measured on
   the Cerner article: box padding 10/20, text at +24 (4px bar + 20 gap). */
.ls-prose blockquote { margin: 20px 0 0; padding: 10px 20px 10px 20px;
  border-left: 4px solid var(--wp--preset--color--primary-blue);
  font-size: 25px; line-height: 30px; font-weight: 500;
  color: var(--wp--preset--color--dark-blue); }
.ls-prose blockquote p { margin: 0; color: inherit;
  font-size: inherit; line-height: inherit; font-weight: inherit; }
/* figures: 30 above and below on the reference; the flow blockGap was giving 50 */
.ls-prose figure { margin: 30px 0; }
.ls-prose img { border-radius: 20px; max-width: 100%; height: auto; }
.ls-prose ul, .ls-prose ol { margin: 17px 0 0; padding-left: 20px; }
/* content-sized, borderless, 10px cells — measured on the Cerner article's
   module table (531x316); the bordered full-width version added +212 height */
.ls-prose table { width: auto; max-width: 100%; border-collapse: collapse; margin: 0; }
.ls-prose :is(th, td) { border: 0; padding: 10px; text-align: left; }
.ls-prose th { background: none; font-weight: 600; }
/* cell content is import-wrapped in <p>; the prose 20px p-margin was padding every
   row +20 (64 vs the reference 44). Reference also draws a 1px divider under each row. */
.ls-prose :is(td, th) p { margin: 0; }
.ls-prose tr { border-bottom: 1px solid var(--wp--preset--color--border); }

@media (max-width: 781px) {
  .ls-hero { padding-top: 200px; }
}

/* ---------------------------------------------------------------------------
   CMS-driven sections (services / case studies) — rendered from _latent_* meta
--------------------------------------------------------------------------- */
.ls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--60); }
.ls-grid .ls-card { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
.ls-grid .ls-card img { width: 100%; height: auto; border-radius: 14px; margin-bottom: 14px; }
.ls-grid h3 { font-size: var(--wp--preset--font-size--h-4); margin: 0 0 8px; }
.ls-grid p  { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grey); margin: 0; }

.ls-step { border-top: 1px solid var(--wp--preset--color--border); padding: 24px 0; }
.ls-step h3 { font-size: var(--wp--preset--font-size--h-4); margin: 8px 0; }
.ls-step p  { color: var(--wp--preset--color--grey); margin: 0; }

.ls-techgroup { margin-bottom: var(--wp--preset--spacing--70); }
.ls-techgroup h3 { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--primary-blue); margin: 0 0 12px; }
.ls-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-chip { display: inline-flex; align-items: center; gap: 8px;
           border: 1px solid var(--wp--preset--color--border); border-radius: 20px;
           padding: 6px 14px; font-size: 14px; }
.ls-chip img { width: 18px; height: 18px; object-fit: contain; }

.ls-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--60);
                 background: var(--wp--preset--color--snow-white); border: 1px solid var(--wp--preset--color--border);
                 border-radius: 20px; padding: var(--wp--preset--spacing--70); margin-bottom: var(--wp--preset--spacing--80); }
.ls-highlights p { margin: 0; }

/* FAQ accordions are cards on the reference, not hairline-separated rows:
   740px wide and centred (560 below 1024), snow-white, radius 20, 30px padding,
   20px apart. The outline is drawn by an ::after overlay carrying
   `1px solid rgba(25,70,218,.3)` — blue-30 — so it does NOT take part in layout;
   an inset shadow reproduces that without disturbing the 30px/24px/30px box.
   Question is 20/24 weight 500 dark-blue, with a 24px glyph 20px to its right. */
.ls-faq { background: var(--wp--preset--color--snow-white); border-radius: 20px;
          box-shadow: inset 0 0 0 1px var(--wp--preset--color--blue-30);
          padding: 30px; }
.ls-faq summary { cursor: pointer; list-style: none; display: flex; gap: 20px;
                  align-items: center; justify-content: space-between;
                  font-size: 20px; line-height: 24px; font-weight: 500;
                  /* -0.6px measured; without it two questions wrap a line early */
                  letter-spacing: -0.03em;
                  color: var(--wp--preset--color--dark-blue); }
.ls-faq summary::-webkit-details-marker { display: none; }
/* the marker is drawn, not typed: measured off the reference at 16x16 with a 2px
   stroke, which no '+' glyph at this size matches (Public Sans renders ~10x2) */
.ls-faq summary::after {
  content: ''; flex: 0 0 24px; width: 24px; height: 24px;
  background: linear-gradient(currentColor 0 0) center / 16px 2px no-repeat,
              linear-gradient(currentColor 0 0) center / 2px 16px no-repeat;
}
/* the marker does NOT become a minus when open — measured on an expanded card,
   the reference's glyph is still a full 16x16 cross with both bars */
/* open state: the question turns primary-blue and the answer sits 20px below it,
   16/24 in grey — measured on an expanded card (84 collapsed -> 176 open) */
.ls-faq[open] summary { color: var(--wp--preset--color--primary-blue); }
/* the answer column is 95% of the card's content box, not the full width —
   646/680, 475/500 and 276/290 across the three widths. At full width several
   answers wrap a line short of the reference. */
.ls-faq-answer { width: 95%; margin-top: 20px; font-size: 16px; line-height: 24px;
                 color: var(--wp--preset--color--grey); }

@media (max-width: 900px) {
  .ls-grid, .ls-highlights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ls-grid, .ls-highlights { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Home hero — geometry measured against latenthq.com at 1440px:
     headline 60px in an 820px block (Framer "/Heading/Heading 1", per DESIGN.md)
     lead 420px · blobs 366px · logo strip 123px
--------------------------------------------------------------------------- */
.ls-hero { position: relative; }
.ls-herowrap { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ls-hero > *:not(.ls-herowrap) { position: relative; z-index: 1; }

/* Hero artwork — sampled at 100ms over 7s on the reference (qa/ANIMATION-SPEC.md #1).
   Both blobs share amplitude ~60px and a ~2100ms period but have different base
   sizes, and they run ANTIPHASE: the left one bottoms out at the exact sample
   where the right one peaks. Element boxes are sized to each blob's MAX and
   scaled down, so layout does not reflow as they breathe.
     left  pQHb0gQ…  312.9 -> 372.9   (scale 0.839 -> 1)
     right 0feF3sw…  366.5 -> 425.9   (scale 0.861 -> 1)
   `alternate` makes one there-and-back cycle 2x the duration, so 1050ms = 2100ms. */
.ls-blob { position: absolute; height: auto; opacity: 1; transform-origin: center;
           animation: ls-blobpulse 1050ms ease-in-out infinite alternate; }
@keyframes ls-blobpulse { from { transform: scale(var(--ls-blob-min, .85)); }
                          to   { transform: scale(1); } }
.ls-blob--l { width: 373px; --ls-blob-min: .839; left: -31px; top: 295px; }
.ls-blob--r { width: 426px; --ls-blob-min: .861; right: -29px; top: 226px;
              animation-delay: -1050ms; }   /* one full duration = opposite phase */


/* Measured in-section (NOT via a global h1/h2 query — Framer renders the desktop and
   tablet breakpoint variants into the same DOM, so a document-wide match returns the
   wrong variant. Scope every hero query to the hero section.)
   eyebrow 18/21.6 +0.72px w500, shrink-to-fit and centred; 20px full-width was wrong. */
.ls-eyebrow { font-size: 18px; line-height: 21.6px; font-weight: 500;
              color: var(--wp--preset--color--dark-blue); letter-spacing: 0.72px;
              margin: 0 0 20px; }

/* NOT ls-h1-large (90px) — Framer's hero uses the 60px Heading 1 in an 820px column */
/* 60/72 at desktop, 40/48 below 768 — both re-measured inside the hero section.
   The 55/48/45 read earlier came from Framer's tablet variant in the same DOM. */
.ls-herotitle { font-size: 60px; font-weight: 600;
                line-height: 1.2; letter-spacing: -3px; margin: 0 0 20px;
                max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 1023px) { .ls-herotitle { font-size: 50px; } }
@media (max-width: 767px)  { .ls-herotitle { font-size: 40px; letter-spacing: -2px; } }

.ls-herolead { max-width: 420px; margin: 0 auto 50px;
               font-size: 16px; line-height: 24px; }   /* 1.6 gave 25.6, reference is 24 */
@media (max-width: 767px) { .ls-herolead { margin-bottom: 40px; } }

/* Measured: a full-bleed band 1512x275 (100px 0 padding) at desktop and
   x235 (80px 0) below 1024, holding ONE row 75px tall. Logos are 123x40 at every
   width and the pitch is 202 desktop / 182 narrow, so gap = 79 / 59.
   The reference duplicates the track and translates it left at ~54px/s (linear,
   seamless, no wrap jump over 7.4s of sampling) — see qa/ANIMATION-SPEC.md #2. */
/* STATIC on purpose: the hero's blobs overflow ~100px past the hero into this band.
   A positioned (relative) band comes later in the DOM and PAINTS OVER the blobs,
   leaving a hard flat cut that flickers as they scale — the reference instead lets
   them show through and fade. Static keeps the band non-positioned, so the
   absolutely-positioned blobs paint straight over its (white) top padding and fade
   via their own PNG alpha at every scale. (The earlier note here had it backwards.)
   overflow:hidden still clips the marquee track (the band's own child), not the blobs. */
.ls-logostrip { position: static; background: var(--wp--preset--color--white);
                width: 100vw; margin-left: calc(50% - 50vw);
                overflow: hidden; padding: 100px 0; display: block; }
.ls-logotrack { display: flex; flex-wrap: nowrap; align-items: center; gap: 79px;
                height: 75px; width: max-content;
                animation: ls-marquee 45s linear infinite; }
@keyframes ls-marquee { from { transform: translateX(0); }
                        to   { transform: translateX(-50%); } }
.ls-logostrip img { width: 123px; height: 40px; object-fit: contain; flex: 0 0 auto;
                    opacity: .55;
                    transition: opacity .4s cubic-bezier(0.44, 0, 0.56, 1); }
.ls-logostrip img:hover { opacity: 1; }

/* The reference keeps its blobs all the way down to 1024 and drops them at 1023
   — swept, not guessed. Hiding them from 1200 lost them for a whole tier and was
   most of a 29% diff on the hero at 1024. */
@media (max-width: 1023px) { .ls-blob { display: none; } }
@media (max-width: 1023px) {
  /* band shortens but the logos and the single row do not change */
  .ls-logostrip { padding: 80px 0; }
  .ls-logotrack { gap: 59px; animation-duration: 40s; }   /* keeps ~54px/s */
}

/* ---------------------------------------------------------------------------
   Section headings — centred in a 600px block.
   Measured on latenthq.com: every section h2 sits at x=420 w=600 in a 1200px
   container, text-align:center. DESIGN.md §1 called this "Section title block
   max width ~600px"; it applies site-wide, not just on the home page.
--------------------------------------------------------------------------- */
.ls-section > h2,
.ls-section > .wp-block-heading {
  max-width: 600px; margin-left: auto; margin-right: auto; text-align: center;
}
/* the intro paragraph directly under a section heading follows it */
.ls-section > h2 + p,
.ls-section > .wp-block-heading + p {
  max-width: 600px; margin-left: auto; margin-right: auto; text-align: center;
}
/* article prose keeps its own left-aligned rhythm */
.ls-prose .ls-section > h2, .ls-prose h2 { max-width: none; text-align: left; margin-left: 0; }

/* ---------------------------------------------------------------------------
   Scroll reveal. Gated on .ls-js so content is visible when JS is off or fails —
   never hide content behind an animation that might not run.

   Measured off the reference with qa/reveal-capture.py, which parks a section
   below the fold, scrolls it in and samples every frame (Framer's appear
   animations are JS-driven and invisible to getComputedStyle). Curve fitted
   against the standard beziers: p25/p50/p75 = 0.17/0.51/0.87 is a symmetric
   ease-in-out, the same cubic-bezier(.44,0,.56,1) the reference already uses on
   its hover transitions. No sibling stagger — that was measured, not assumed:
   the three FAQ rows start within one frame of each other.

   Durations are set so the *observed* motion matches, not so the declared number
   matches: a transition-duration is not what the sampler sees, because the tails
   of an ease-in-out are too slow to register. Each value below was scaled by the
   ratio of reference-to-target measured windows until both sides read the same.
--------------------------------------------------------------------------- */
.ls-js .ls-reveal { opacity: 0; transform: translateY(60px);
                    transition: opacity .70s cubic-bezier(.44,0,.56,1),
                                transform .70s cubic-bezier(.44,0,.56,1); }
.ls-js .ls-reveal.ls-in { opacity: 1; transform: none; }

/* titles arrive a little quicker than the content beneath them */
.ls-js .ls-reveal--title { transition-duration: .59s; }

/* the process block is its own motion: 18px, and a hard ease-out instead of the
   symmetric curve, with opacity trailing the movement. Its heading rides with
   the steps rather than animating as a section title. */
.ls-js .ls-reveal--step { transform: translateY(18px);
                          transition: opacity .78s cubic-bezier(.22,1,.36,1),
                                      transform .64s cubic-bezier(.22,1,.36,1); }

/* the CTA banner fades without moving at all */
.ls-js .ls-reveal--fade { transform: none;
                          transition: opacity .80s cubic-bezier(.44,0,.56,1); }

@media (prefers-reduced-motion: reduce) {
  .ls-logotrack { animation: none; }
  .ls-blob { animation: none; }
  .ls-js .ls-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Benefits — two panels of four icon-led items.
   Measured on latenthq.com at 1440px: panels 573px wide, 60px gap, bg Snow White,
   radius 20px, padding 65px 30px (the "benefit cards" padding in DESIGN.md §1).
   Icon sits in a 64px white tile, radius 10px, holding a 34px SVG.
--------------------------------------------------------------------------- */
.ls-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.ls-benefit-panel {
  background: var(--wp--preset--color--snow-white);
  border-radius: 20px;
  padding: 65px 30px;
  display: flex; flex-direction: column; gap: 42px;
}
.ls-benefit { display: flex; gap: 55px; align-items: flex-start; }
.ls-benefit-icon {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.ls-benefit-icon img { width: 34px; height: 34px; display: block; }
/* measured: heading 26/26 (line-height 1, not 1.1 -> our rows were 29 tall),
   16px to the body, body 16/24. Icon sits 55 clear of the heading (35 below 768). */
.ls-benefit h3 { font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -0.03em;
                 color: var(--wp--preset--color--dark-blue); margin: 0 0 16px; }
.ls-benefit p  { font-size: 16px; line-height: 24px;
                 color: var(--wp--preset--color--grey); margin: 0; }

@media (max-width: 1023px) {
  /* measured at 768 AND 390: panel padding 30px 15px, item gap 40, icon 35 clear
     of the heading, section bottom padding 80 — all from 1023 down, not just phone */
  .ls-benefits { grid-template-columns: 1fr; gap: 24px; }
  .ls-benefit-panel { padding: 30px 15px; gap: 40px; }
  .ls-benefit { gap: 35px; }
}

/* Buttons are pills throughout — measured 55px radius / 56px tall on the live site,
   not the 20px card radius. theme.json sets 20px for cards/images; buttons differ. */
.wp-block-button__link.wp-element-button { border-radius: 55px; min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------------------
   Homepage FAQ. The live site renders 12 questions whose accordions are EMPTY —
   clicking changes nothing and no answer text exists in the page source. The
   questions are reproduced for parity; answers are a content task, and no
   FAQPage schema is emitted until they exist (empty answers = invalid markup).
--------------------------------------------------------------------------- */
/* 740px centred column, 20px between cards, 50px below the heading. Swept: the
   column is 740 down to 1024 and 560 from 1023, then simply fills the container
   once the container is narrower than 560. */
.ls-faqs .ls-faqlist { max-width: 740px; width: 100%; margin: 50px auto 0;
                       display: flex; flex-direction: column; gap: 20px; }

/* the reference puts 80px above this section as well as below, from 1279 down */
@media (max-width: 1279px) { .ls-faqs { padding-top: 80px; padding-bottom: 80px; } }
@media (max-width: 1023px) { .ls-faqs .ls-faqlist { max-width: 560px; margin-top: 40px; } }

/* ---------------------------------------------------------------------------
   Case studies — 3 feature rows. Live @1440: text column 670px at x=135,
   image 400x450 at x=905. Not a 3-card grid.
--------------------------------------------------------------------------- */
/* Measured: row 1170 = text 670 + gap 100 + thumb 400x450, text vertically centred.
   Internal rhythm: title -> 20 -> body -> 50 -> "View More" (52 tall).
   Thumbnail is object-fit CONTAIN with NO radius on the reference. */
.ls-cases { display: flex; flex-direction: column; gap: 50px;
            max-width: 1170px; margin-inline: auto; }
.ls-caserow { display: grid; grid-template-columns: 670px 400px; gap: 100px; align-items: center;
              background: #fafafa; border-radius: 20px; }
@media (max-width: 1279px) and (min-width: 1024px) {
  .ls-caserow { grid-template-columns: 1fr 400px; gap: 50px; }
}
/* 30px above and below the copy as well as the 50px inset. It only shows once the
   text column is narrow enough to out-grow the 450px photo: at 1024 the reference
   row is 528 = 30 + 468 + 30, and ours was exactly that 468 without the padding. */
.ls-casetext { padding: 30px 0 30px 50px; }
/* No max-width: the reference lets the copy fill its column. 620px happens to BE
   the column width at 1512 (670px track - 50px inset), so it was invisible there,
   but at 1200 the column is 670 and capping it wrapped the excerpt an extra line. */
.ls-casetext .ls-casetitle, .ls-casetext h3 { font-size: 42px; line-height: 50.4px; font-weight: 600;
                  letter-spacing: -2.3px; margin: 0 0 20px; }
.ls-casetext .ls-casetitle a, .ls-casetext h3 a { color: var(--wp--preset--color--dark-blue); text-decoration: none; }
.ls-casetext .ls-casetitle a:hover, .ls-casetext h3 a:hover { color: var(--wp--preset--color--primary-blue); }
.ls-casetext p { color: var(--wp--preset--color--grey); margin: 0; font-size: 16px; line-height: 24px; }
.ls-casetext .ls-more { margin-top: 50px; min-height: 52px; display: flex; align-items: center; }
.ls-more a { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 28px;
             background: var(--wp--preset--color--primary-blue); color: #fff;
             border-radius: 55px; font-weight: 500; text-decoration: none; }
.ls-more a span { display: inline-flex; align-items: center; justify-content: center;
                  width: 20px; height: 20px; border-radius: 50%; font-size: 11px;
                  background: rgba(255,255,255,.3); }
/* the reference thumbnail wrapper is 400x450 radius 20 overflow:hidden and its image
   fills it — its `contain` only works because Framer pre-crops to that aspect, so on
   our imported originals `cover` is what reproduces the same rendered box */
.ls-caseimg img { display: block; width: 400px; max-width: 100%; height: 450px;
                  object-fit: cover; border-radius: 20px; }

@media (max-width: 1023px) {
  /* reference tablet variant: rows 1 and 2 sit side by side at 344 wide,
     row 3 spans the full 728. Inside each row the thumb drops below the text. */
  .ls-cases { display: grid; grid-template-columns: repeat(2, 344px); gap: 40px;
              max-width: none; margin-inline: 0; }
  .ls-caserow:nth-child(3) .ls-casetext { padding-inline: 54px; }
  .ls-caserow { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .ls-caserow:nth-child(3) { grid-column: 1 / -1; }
  /* the reference tablet/mobile variant centres the copy and the button */
  .ls-casetext { padding: 40px 15px 0; text-align: center; }
  .ls-casetext > * { max-width: none; }
  .ls-more { justify-content: center; }
  .ls-caseimg img { width: 100%; height: 300px; }
}
@media (max-width: 767px) {
  .ls-cases { grid-template-columns: 1fr; }
  .ls-caserow:nth-child(3) .ls-casetext { padding-inline: 15px; }
  .ls-casetext .ls-casetitle, .ls-casetext h3 { font-size: 36px; line-height: 43.2px; }
}

/* ---------------------------------------------------------------------------
   Technology stack — 7 category rows, 36 logos.
   Measured off the reference at 1512/1280/1279/1024/1023/768/390:
     >=1024  row is [category label] ... [grid], space-between, grid 70% wide, 6 up
     <=1023  row stacks, grid full width, 3 up, 30px above it
   The column gap is the only thing that moves at 1280 (40 -> 16); the row->column
   switch is at 1024 exactly (1024 is still a row, 1023 is a column) — swept, not guessed.
   Rows are separated by a 1px blue-30 rule with 30px of air either side.
--------------------------------------------------------------------------- */
/* .wp-block-heading, not h2: the section defaults use `.ls-section > .wp-block-heading`
   (0,2,0), which quietly outranks a `.ls-techsec > h2` (0,1,1) override. */
.ls-techsec > .wp-block-heading,
.ls-techsec > .wp-block-heading + p { max-width: 850px; }
.ls-techsec > .wp-block-heading + p { font-size: 16px; line-height: 24px; margin-top: 8px; }

.ls-techstack { display: flex; flex-direction: column; gap: 30px; margin-top: 61px; }
.ls-techrow { display: flex; justify-content: space-between; align-items: flex-start; }
.ls-techrow + .ls-techrow { border-top: 1px solid var(--wp--preset--color--blue-30); padding-top: 30px; }
.ls-techrow h3 { font-size: 20px; line-height: 24px; font-weight: 500;
                 color: var(--wp--preset--color--dark-blue); margin: 0; }
.ls-techgrid { width: 70%; display: grid; grid-template-columns: repeat(6, 1fr);
               column-gap: 40px; row-gap: 0; }
.ls-tech { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100px; }
/* the img *is* the tile: 20px of padding inside the box leaves the logo at 60px */
.ls-tech img { width: 100px; height: 100px; padding: 20px; box-sizing: border-box;
               border: 1px solid var(--wp--preset--color--blue-30); border-radius: 18px;
               object-fit: contain; }
.ls-tech span { font-size: 16px; line-height: 24px; color: var(--wp--preset--color--dark-grey);
                text-align: center; }

/* the section's own bottom padding and the title→rows gap step down at 1280,
   not at 1024 — swept on the reference: 1280 is 130/60, 1279 is 80/50 */
@media (max-width: 1279px) {
  .ls-techstack { margin-top: 50px; }
}
@media (max-width: 1279px) and (min-width: 1024px) { .ls-techgrid { column-gap: 16px; } }

@media (max-width: 1023px) {
  .ls-techrow { flex-direction: column; }
  /* 1fr rows so a wrapped label ("React native") lifts every row to the same
     height, the way the reference grid does */
  .ls-techgrid { width: 100%; grid-template-columns: repeat(3, 1fr);
                 row-gap: 20px; grid-auto-rows: 1fr; padding-top: 30px; }
  .ls-tech { width: 80px; }
  .ls-tech img { width: 80px; height: 80px; }
}

/* ---------------------------------------------------------------------------
   Process — two columns. Live @1440: heading block 549px at x=135,
   steps 495px at x=810 with a 140px pitch. Section 724px tall.
--------------------------------------------------------------------------- */
/* Measured: two 549 columns 72 apart (h2 @x171, steps @x792, both inside the 1170
   content box). Each step is a timeline row — an 18x18 radius-4 blue dot at the left
   edge with a 1px connector running from its base to the next step, then 495 of text
   inset 54 from the dot. Head box 26 tall at step y+1, body at step y+53, 16/24 grey.
   Step pitch 140. Ours had no rail at all. */
[data-ls-section="process"] { padding-bottom: 130px; }
.ls-process { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.ls-processhead h2 { margin: 0; max-width: none; text-align: left; }
.ls-processsteps { display: flex; flex-direction: column; }
/* step height is content + 40 trailing (50 below 1024), not a min-height:
   desktop 26 head + 26 gap + 48 body + 40 = 140, and the 5th with a 3-line body = 164 */
.ls-pstep { position: relative; padding-left: 54px; padding-bottom: 40px; }
.ls-pstep::before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px;
                    border-radius: 4px; background: var(--wp--preset--color--primary-blue); }
.ls-pstep::after  { content: ''; position: absolute; left: 9px; top: 18px; bottom: 0; width: 1px;
                    background: var(--wp--preset--color--primary-blue); }
.ls-pstep h3 { font-size: 26px; font-weight: 500; line-height: 1;
               letter-spacing: -0.03em; color: var(--wp--preset--color--dark-blue);
               margin: 0 0 26px; }
.ls-pstep p  { font-size: 16px; line-height: 24px; color: var(--wp--preset--color--grey); margin: 0; }

@media (max-width: 1023px) {
  /* stacks: h2 above, steps full width, rail unchanged (dot 18, text inset 54) */
  .ls-process { grid-template-columns: 1fr; gap: 52px; }
  .ls-pstep { padding-bottom: 50px; }
}

/* ---------------------------------------------------------------------------
   CTA — measured on latenthq.com @1512:
     panel  1452x1144 @x30, bg rgb(25,70,218), radius 20, padding 100px 0
     inner  1200 wide, padding 0 15  (form 465 left, image 585 right, 120 gap)
     image  585x944 object-fit cover, radius 20 — full panel-content height
     field  wrapper 465 wide, input inset 28px and 277 wide
     button 165x48, radius 55, white bg, BLACK text, padding 10px 28px
--------------------------------------------------------------------------- */
.ls-ctasection { padding-bottom: var(--wp--preset--spacing--110); }
/* full-bleed without transform: margin-left:50% resolves against the CONTAINER,
   not the viewport, and threw the panel to x=-414. calc() against 50vw is safe. */
/* WordPress's constrained layout sets margin-left/right: auto !important on
   every child, which silently beat the calc() and left the panel inset by 156px.
   The !important here is matching theirs, not decoration. */
.ls-ctasection { max-width: none !important; width: 100vw;
                 margin-left: calc(50% - 50vw) !important;
                 margin-right: calc(50% - 50vw) !important; }
.ls-ctaouter { padding: 0 30px; }
.ls-ctapanel { background: var(--wp--preset--color--primary-blue); border-radius: 20px;
               padding: 100px 0; color: #fff; }
.ls-ctainner { max-width: 1200px; box-sizing: border-box; margin: 0 auto; padding: 0 15px;
               display: grid; grid-template-columns: calc(50% - 120px) 1fr; gap: 120px; align-items: stretch; }

/* label 18 + 8 + box 55 + 31 = 112px pitch, matching the reference */
.ls-ctaform { display: flex; flex-direction: column; gap: 25px; }
.ls-ctatitle { max-width: 660px; }          /* measured: 660 at 768, full width below */
.ls-ctatitle h2 { color: #fff; margin: 0 0 20px; max-width: none; text-align: left; }
.ls-ctatitle p  { color: rgba(255,255,255,.9); margin: 0 0 16px;
                  font-size: 20px; line-height: 30px; letter-spacing: -.03em; }

.ls-field { display: flex; flex-direction: column; gap: 8px; }
.ls-fbox--area textarea { min-height: 54px; }
.ls-flabel { font-size: 16px; line-height: 24px; font-weight: 700; color: #fff; }
.ls-flabel--light { font-weight: 400; }
.ls-fbox { position: relative; border: 0; border-radius: 55px; background: transparent;
           padding: 14px 160px 14px 28px; display: flex; align-items: center; gap: 10px;
           height: 55px; box-sizing: border-box; }
.ls-fbox::after { content: ''; position: absolute; inset: 0; border: 1px solid #fff;
                  border-radius: inherit; pointer-events: none; }
.ls-fbox input, .ls-fbox textarea {
  width: 277px; max-width: 100%; background: transparent; border: 0; color: #fff;
  font: inherit; font-weight: 400; padding: 0; }
.ls-fbox--area { align-items: stretch; height: 82px; border-radius: 20px; padding: 0; }
.ls-fbox--area textarea { padding: 14px 28px; box-sizing: border-box; }
.ls-fbox--area textarea { width: 100%; resize: vertical; min-height: 54px; }
.ls-fbox input::placeholder, .ls-fbox textarea::placeholder { color: rgba(255,255,255,.65); }
.ls-fbox input:focus, .ls-fbox textarea:focus { outline: none; }
.ls-fbox:focus-within { border-color: #fff; }
.ls-fbox--select { padding: 0; }
.ls-countrysel { -webkit-appearance: none; appearance: none; width: 100%; height: 100%;
  background: transparent; border: 0; color: #fff; font: inherit; font-weight: 400;
  padding: 14px 46px 14px 28px; border-radius: inherit; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 24px center; }
.ls-countrysel:focus { outline: none; }
.ls-countrysel option { color: #111; background: #fff; }

/* Country picker — custom searchable dropdown, JS-enhanced from .ls-countrysel
   (assets/forms.js). Matches the Framer design: flag · dial · name trigger and a
   translucent search panel over the blue CTA. The native <select> is kept for
   submission (display:none still posts its value). */
.ls-cselect-native { display: none !important; }
.ls-cselect { position: relative; padding: 0; }   /* zero the .ls-fbox padding; the trigger owns it */
.ls-cselect.is-open { z-index: 30; }
.ls-cselect-trigger {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 100%;
  min-height: 55px; background: transparent; border: 0; color: #fff; font: inherit;
  font-weight: 400; padding: 14px 46px 14px 28px; text-align: left; cursor: pointer;
  border-radius: inherit; position: relative; box-sizing: border-box;
}
.ls-cselect-flag { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.ls-cselect-dial { flex: 0 0 auto; min-width: 46px; }
.ls-cselect-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-cselect-arrow {
  position: absolute; right: 24px; top: 50%; width: 12px; height: 7px; margin-top: -3px;
  transition: transform .2s ease; background: no-repeat center / 12px 7px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.5'/></svg>");
}
.ls-cselect.is-open .ls-cselect-arrow { transform: rotate(180deg); }
.ls-cselect-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 40;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px; padding: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ls-cselect-search {
  width: 100%; box-sizing: border-box; height: 52px; padding: 0 20px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px; color: #fff; font: inherit; margin-bottom: 8px;
}
.ls-cselect-search::placeholder { color: rgba(255,255,255,.6); }
.ls-cselect-search:focus { outline: none; border-color: rgba(255,255,255,.5); }
.ls-cselect-list { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ls-cselect-opt {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px; color: #fff;
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.10);
}
.ls-cselect-opt:last-child { border-bottom: 0; }
.ls-cselect-opt:hover { background: rgba(255,255,255,.10); }
.ls-cselect-opt.is-selected { background: rgba(255,255,255,.18); }
.ls-cselect-empty { padding: 18px 16px; color: rgba(255,255,255,.7); }
.ls-cselect-list::-webkit-scrollbar { width: 8px; }
.ls-cselect-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 8px; }

/* Exit-intent "Free Interactive Demo" modal (assets/popup.js) — parity with the
   Framer site's exit-intent overlay. Injected + themed here; primary-blue card. */
.ls-exitpop {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(9, 18, 48, .55);
  opacity: 0; transition: opacity .25s ease;
}
.ls-exitpop.is-open { opacity: 1; }
.ls-exitpop-card {
  position: relative; width: 100%; max-width: 600px; box-sizing: border-box;
  background: var(--wp--preset--color--primary-blue); color: #fff; border-radius: 24px;
  padding: 56px 56px 40px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(14px) scale(.97); transition: transform .25s ease;
}
.ls-exitpop.is-open .ls-exitpop-card { transform: none; }
.ls-exitpop-card h2 { color: #fff; font-size: 40px; line-height: 1.1; margin: 0 0 18px; max-width: none; }
.ls-exitpop-card p { color: #fff; font-size: 20px; line-height: 1.5; margin: 0 auto 32px; max-width: 460px; opacity: .96; }
.ls-exitpop-btn {
  display: block; width: 100%; max-width: 420px; box-sizing: border-box; margin: 0 auto 14px;
  padding: 16px 24px; border-radius: 55px; font-weight: 500; font-size: 17px;
  text-decoration: none; cursor: pointer; transition: opacity .15s ease;
}
.ls-exitpop-btn:hover { opacity: .9; }
.ls-exitpop-btn--solid { background: #fff; color: var(--wp--preset--color--primary-blue); border: 0; }
.ls-exitpop-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.ls-exitpop-dismiss {
  display: block; margin: 12px auto 0; padding: 4px; background: none; border: 0;
  color: rgba(255,255,255,.8); text-decoration: underline; font: inherit; font-size: 15px; cursor: pointer;
}
.ls-exitpop-dismiss:hover { color: #fff; }
.ls-exitpop-x {
  position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 0; color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ls-exitpop-x:hover { background: rgba(255,255,255,.28); }
@media (max-width: 600px) {
  .ls-exitpop-card { padding: 44px 24px 30px; border-radius: 20px; }
  .ls-exitpop-card h2 { font-size: 30px; }
  .ls-exitpop-card p { font-size: 17px; margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-exitpop, .ls-exitpop-card { transition: none; }
}

/* Lead-form result (replaces the form on submit). The CTA form sits on the blue
   panel (white text); the report form on white (dark text). */
.ls-formsuccess { font-size: 18px; line-height: 1.6; }
.ls-formsuccess strong { display: block; font-size: 22px; margin-bottom: 6px; }
.ls-formdl { display: flex; width: fit-content; align-items: center; margin-top: 18px; border-radius: 55px;
  padding: 13px 28px; font-weight: 500; text-decoration: none; }
.ls-formhint { display: block; margin-top: 10px; font-size: 13px; opacity: .7; }
.ls-formerror { margin-top: 12px; font-size: 14px; color: #ff6b6b; }
.ls-ctainner .ls-formsuccess { color: #fff; }
.ls-ctainner .ls-formdl { background: #fff; color: var(--wp--preset--color--dark-blue); }
.ls-report-panel .ls-formsuccess { color: var(--wp--preset--color--dark-blue); }
.ls-report-panel .ls-formerror { color: #d33; }
.ls-report-panel .ls-formdl { background: var(--wp--preset--color--primary-blue); color: #fff; }

.ls-sendbtn { align-self: flex-start; background: #fff; color: #000; border: 0; cursor: pointer;
              border-radius: 55px; padding: 10px 28px; min-height: 48px; min-width: 165px;
              font: inherit; font-weight: 500; }
.ls-sendbtn:hover { background: rgba(255,255,255,.9); }

.ls-ctabanner { display: flex; }
.ls-ctabanner img { width: 585px; max-width: 100%; height: 100%; min-height: 944px;
                    object-fit: cover; border-radius: 20px; display: block; }

/* decorative blobs sit behind the panel */
.ls-ctaouter { position: relative; }
.ls-ctablob { position: absolute; pointer-events: none; z-index: 1; height: auto; object-fit: cover; }
.ls-ctablob--l { left: 25px;  top: -5px;     width: 354px; }   /* panel-relative -5 */
.ls-ctablob--r { right: 25px; bottom: -108px; width: 366px; }   /* panel-relative -5 */
.ls-ctapanel { position: relative; }
.ls-ctainner { position: relative; z-index: 2; }

/* measured on the reference: section padding-bottom 80, panel padding 50px 0,
   heading holds 42px at 768 and drops to 36px only on small phones */
@media (max-width: 1023px) {
  .ls-ctainner { grid-template-columns: 1fr; gap: 100px; }
  .ls-ctapanel { padding: 50px 0; }
  .ls-ctaouter { padding: 0 20px; }
  .ls-ctasection { padding-bottom: 80px; }
  .ls-ctatitle h2 { font-size: 42px; }
  .ls-ctabanner img { width: 100%; min-height: 0; height: 320px; }
  .ls-fbox input { width: 100%; }
  /* measured: the reference keeps both blobs at FULL size at 768 and 390 */
  .ls-ctablob--l { width: 354px; left: 15px;  top: -5px; }
  .ls-ctablob--r { width: 366px; right: 15px; bottom: 43px; }
  /* banner is 360 tall at both narrow widths, 580 wide at tablet */
  .ls-ctabanner img { width: 580px; max-width: 100%; height: 360px; }
}
@media (max-width: 767px) {
  .ls-ctatitle h2 { font-size: 36px; }
  .ls-ctablob--l { left: 18px;  top: -2px; }
  .ls-ctablob--r { right: 18px; bottom: 47px; }
  .ls-ctabanner img { width: 100%; height: 360px; }
}

/* ---------------------------------------------------------------------------
   Service cards — measured off latenthq.com, not approximated.
   The card is TWO stacked rounded blocks 10px apart, not one padded box:
     thumbnail  370x230  radius 20  (transparent, image cover)
     body panel 370x240  radius 20  background #fafafa  padding 20
   Inside the body: h3 32/32 w500 #001047, 10px, p 16/24 #676c80, 11px, link 16/19.2 w500.
   Every type value is flat — the fluid presets shrink at 768/390, the reference does not.
--------------------------------------------------------------------------- */
.ls-svccard { display: flex; flex-direction: column; gap: 10px;
              padding: 0; border: 0; background: none; }
/* the constrained-layout blockGap adds 50px between the thumbnail and the body;
   the reference gap is exactly the 10px flex gap above */
.wp-block-group.ls-svccard > * { margin-block-start: 0; margin-block-end: 0; }
/* measured: heading bottom -> first card row is 50px */
[data-ls-section="services"] > .wp-block-query { margin-block-start: 50px; }
@media (max-width: 1023px) {
  /* reference gap tightens to 40 and the rows become a uniform 521 tall
     (pitch 551) even though the cards themselves stay content-sized */
  [data-ls-section="services"] > .wp-block-query { margin-block-start: 40px; }
  .ls-svcbody .wp-block-read-more { margin-top: 20px; }
}
.ls-svccard .wp-block-post-featured-image { margin: 0; border-radius: 20px; overflow: hidden; }
.ls-svccard .wp-block-post-featured-image img { display: block; width: 100%; height: 230px;
                                                object-fit: cover; border-radius: 20px; }
/* The body panel is 240 tall on the reference at every width — thumbnail 230 +
   10px gap + 240 makes the card a uniform 480. It is a MINIMUM, not a fixed
   height: at 1512 the card is 370 wide, three titles wrap to an extra line and
   those cards grow to 501. Content-sized here, our cards came out 403-459 and
   the rows were ragged. */
.ls-svcbody { background: #fafafa; border-radius: 20px; padding: 20px;
              min-height: 240px; box-sizing: border-box; }
.ls-svcbody .wp-block-post-title { margin: 0; font-size: 32px; line-height: 32px;
                                   font-weight: 500; letter-spacing: normal; }
.ls-svcbody .wp-block-post-title a { color: #001047; text-decoration: none; }
.ls-svcbody .wp-block-post-excerpt { margin: 10px 0 0; }
.ls-svcbody .wp-block-post-excerpt__excerpt { margin: 0; font-size: 16px; line-height: 24px;
                                              color: #676c80; }
.ls-svcbody .wp-block-read-more { display: inline-flex; align-items: center; gap: 6px;
                                  margin-top: 11px; font-size: 16px; line-height: 19.2px;
                                  font-weight: 500; color: #001047; text-decoration: none; }
.ls-svcbody .wp-block-read-more::after { content: '\2197'; font-size: 14px; line-height: 1; }

/* 3 x 370 with 30px gutters = 1170, centred in the 1200 container -> x 171/571/971 */
.ls-section .wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(3, 370px); gap: 30px;
  justify-content: center; align-items: start; }
@media (max-width: 1279px) and (min-width: 1024px) {
  .ls-section .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
}
@media (max-width: 1023px) {
  /* the reference stacks at 768 and keeps the card at 370, left-aligned */
  .ls-section .wp-block-post-template.is-layout-grid {
    grid-template-columns: 370px; justify-content: start; grid-auto-rows: 521px; }
}
@media (max-width: 767px) {
  .ls-section .wp-block-post-template.is-layout-grid {
    grid-template-columns: min(370px, 100%); justify-content: center; }
}

/* Section headings are a flat 42px (36 on small phones) on the reference at every
   width; the fluid preset was shrinking them and shortening every section. */
.ls-section > h2 { font-size: 42px; line-height: 1.2; }
@media (max-width: 767px) { .ls-section > h2 { font-size: 36px; } }

/* ---------------------------------------------------------------------------
   Framer type scale, from getTextStyles() — framer-export/text-styles.json.
   Framer STEPS at breakpoints; it never scales fluidly. theme.json now has
   fluid:false, and the phone-tier values live here because theme.json cannot
   express a per-breakpoint preset. :root:root beats WordPress's own :root.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root:root {
    --wp--preset--font-size--h-1-large:  40px;   /* Heading 1 Large  50 -> 40 */
    --wp--preset--font-size--h-1-cms:    45px;   /* Heading 1 CMS    48 -> 45 */
    --wp--preset--font-size--h-2:        36px;   /* Heading 2        42 -> 36 */
    --wp--preset--font-size--h-2-large:  35px;   /* Heading 2 Large  45 -> 35 */
    --wp--preset--font-size--h-2-big:    45px;   /* Heading 2 Big    48 -> 45 */
  }
}
@media (min-width: 1920px) {
  :root:root { --wp--preset--font-size--h-1-large: 60px; }   /* only tier above 1920 */
}

/* The reference collapses the nav to a hamburger for the whole tablet tier; the
   core navigation block only does so below 600px, which left the menu wrapping
   onto three rows at 768. */
@media (max-width: 1023px) {
  .ls-navbar .wp-block-navigation__responsive-container-open { display: flex; }
  .ls-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  /* The reference's mobile header is logo + hamburger only, and its overlay menu
     carries the six links (plus a Services submenu) but NO CTA — checked by
     opening it. The button used to be nested in the nav and vanished with it;
     now that it is a row sibling it has to be hidden explicitly. */
  .ls-navbar .wp-block-buttons { display: none; }
  /* row is 80 tall on the reference: 20 + 40px logo + 20 */
  .ls-navbar { padding-top: 20px; padding-bottom: 20px; }
}

/* The reference hero section is full-bleed (1512 at a 1512 viewport); ours was the
   constrained 1200 content box. Blobs stay anchored to the 1200 content column via
   calc so they do not drift when the section widens. */
.ls-hero { width: 100vw; max-width: none !important;
           margin-left: calc(50% - 50vw) !important;
           margin-right: calc(50% - 50vw) !important;
           padding-inline: 20px; box-sizing: border-box; }   /* full-bleed loses the constrained layout's side padding; the
      reference keeps 20px (eyebrow is 350 wide at 390, 728 at 768) */
.ls-blob--l { left: calc(50% - 631px); }
.ls-blob--r { right: calc(50% - 629px); }

/* In the tablet tier the blobs are smaller and anchored to the centre line rather
   than to the viewport edges. Solved from three widths, which agree to a pixel:
     left  x = 143/103/14  at 1279/1200/1024  ->  calc(50% - 497px)
     right r = 129/90/2    at the same widths ->  calc(50% - 510px)
   Anchored to the edges instead, the left blob sat at x=-89 at 1024 against the
   reference's +14. Widths are the reference's measured 302/379. */
@media (max-width: 1279px) and (min-width: 1024px) {
  .ls-blob--l { width: 302px; left: calc(50% - 497px); top: 323px; }
  .ls-blob--r { width: 379px; right: calc(50% - 510px); top: 280px; }
}


/* OPEN: the reference nav uses a 50px item gap and a chevron on "Services" (making
   that item 85px vs our 64px), and its first item sits at x=369 where ours sits at
   439. Setting the gap alone pushed the row further right and took the hero from
   12.2% to 24%, and targeting .wp-block-navigation__container stacks the items —
   the selector is hitting the responsive dialog, not the top-level row. Needs a
   proper header-structure measurement before retrying; reverted for now. */

/* ---------------------------------------------------------------------------
   Footer — measured on the reference at 1512: band 1512x685, background
   rgb(43,43,43), padding 100px 0 60px, content 1170 centred (x171..1341).
     brand column  x171   H2 450x198 @y160, 55px/1.2 w600, CTA button @y398
     Company       x771   header @y100 (16 w700), links @y142/182/222/262 (40 pitch)
     Services      x991   header @y100, six links @y142..342
     bottom bar    @y594  copyright + two 20x20 social icons at x1241 / x1311
   Ours was rgb(0,16,71) with blue links, no heading, no CTA, no social icons and
   the wrong link sets — a full rebuild rather than a restyle.
--------------------------------------------------------------------------- */
.ls-footer { background: #2b2b2b; color: #fff; padding: 100px 0 60px; }
.ls-footinner { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.ls-footmain { display: grid; grid-template-columns: 600px 220px 350px; align-items: start; }

.ls-footlogo { display: inline-flex; color: #fff; }
.ls-footlogo svg { width: 155px; height: 40px; display: block; }
.ls-foottitle { font-size: 55px; line-height: 1.2; font-weight: 600; letter-spacing: normal;
                color: #fff; max-width: 450px; margin: 13px 0 40px; }
.ls-footcta { display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px;
              background: #fff; color: var(--wp--preset--color--dark-blue);
              border-radius: 55px; font-weight: 500; text-decoration: none;
              transition: background .4s cubic-bezier(0.44, 0, 0.56, 1); }
.ls-footcta:hover { background: rgba(255,255,255,.9); }

.ls-foothead { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 18px; }
.ls-footcol ul { list-style: none; margin: 0; padding: 0;
                 display: flex; flex-direction: column; gap: 21px; }   /* 19 + 21 = 40 pitch */
.ls-footcol a { color: #fff; font-size: 16px; line-height: 19px; font-weight: 400;
                text-decoration: none;
                transition: opacity .4s cubic-bezier(0.44, 0, 0.56, 1); }
.ls-footcol a:hover { opacity: .7; }

/* divider above the copyright bar — reference draws a 1px full-content-width line
   at every tier (rgba 255/.1), 65px above + 65px below = the 131 desktop gap */
.ls-footbar { display: flex; align-items: center; justify-content: space-between;
              margin-top: 65px; padding-top: 65px;
              border-top: 1px solid rgba(255,255,255,.1); }
.ls-footbar p { margin: 0; font-size: 16px; color: #fff; }
.ls-social { display: flex; gap: 30px; }
.ls-social a { width: 40px; height: 40px; border-radius: 50%; color: #fff;
               background: rgba(255,255,255,.12); display: inline-flex;
               align-items: center; justify-content: center; }
.ls-social svg { width: 20px; height: 20px; display: block; }

/* Reference footer tiers (measured on /about-us, band = footer.bottom − CTA.bottom):
   ≥1280  685   3-col, dark top-gap 100
   1000–1279  645   3-col, top-gap drops to 60
   <1000  1078/1205 @768/390   single centred column: brand, then Company, then
          Services (NOT a 2-col grid — that was a mis-read), gap 60, top-gap 50. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .ls-footer { padding-top: 60px; }               /* band 685 → 645 */
}
@media (max-width: 999px) {
  .ls-footer { padding: 50px 0 60px; text-align: center; }
  .ls-footmain { display: flex; flex-direction: column; align-items: center;
                 gap: 60px; max-width: 570px; margin: 0 auto; }
  .ls-footbrand { display: flex; flex-direction: column; align-items: center; }
  .ls-foottitle { font-size: 48px; letter-spacing: normal; max-width: 570px;
                  margin: 20px 0 0; }
  .ls-footcol { width: 100%; }
  .ls-footcol ul { align-items: center; }
  /* copyright + social on one centred row; the 1px divider tightens to 40+40 = 81 */
  .ls-footbar { flex-direction: row; justify-content: center; align-items: center;
                gap: 40px; margin-top: 40px; padding-top: 40px; }
  .ls-footbar p { max-width: 250px; }
}
@media (max-width: 767px) {
  .ls-bannersplit-text h1 { font-size: 40px; }
  .ls-foottitle { font-size: 45px; }
  /* 390 stacks copyright above the icons; the divider stays (reference keeps it) */
  .ls-footbar { flex-direction: column; gap: 40px; }
}

/* Away from the homepage the CTA lives INSIDE the footer and is 98px shorter.
   From the offline scrape (qa/ref.py): every non-home page has a single
   site_footer section of 1861, against the homepage's separate 1274 CTA section
   plus a 685 footer — so the article CTA is 1861-685 = 1176 against 1274, and the
   panel simply halves its 100px vertical padding. An earlier attempt removed all
   200px and constrained the panel to 1200, which was measured off an inner div. */
/* Correction to the above (measured on /case-studies/monkify-guided-journey):
   the inline panel keeps the FULL 100px padding — 1452x1146 @ footer_top+30 —
   and sits on the footer's dark background, which starts 30px above it. The
   dark region after the panel is exactly the standalone footer: 685 with its
   own 100px top padding. So: dark section, 30 top, full panel, 0 bottom. */
.ls-ctasection--inline { background: #2b2b2b; padding-top: 30px; padding-bottom: 0; }
/* padding-top on the section, not margin-top on the panel — the margin
   collapses through the section at some widths and the 30px escapes */
.ls-ctasection--inline .ls-ctapanel { padding: 100px 0; }
/* inline-CTA tiers, measured on /case-studies/monkify-guided-journey:
   1024–1279  panel pad 80, still 2-col, image fills its column (540/452 wide)
   ≤1023      dark offset 20 (not 30) · form→image gap 40 (not the homepage 100) */
@media (max-width: 1279px) and (min-width: 1024px) {
  .ls-ctasection--inline .ls-ctapanel { padding: 80px 0; }
  .ls-ctasection--inline .ls-ctabanner img { width: 100%; min-height: 0; height: 100%; }
}
/* the inline CTA's corner outlines are 246x250 top-left (9px proud of the
   panel) and 326x440 inside lower-right — not the homepage's 354/366 corners */
.ls-ctasection--inline .ls-ctablob--l { width: 246px; height: 250px; left: 21px; top: -9px; }
.ls-ctasection--inline .ls-ctablob--r { width: 326px; height: 440px; left: 853px; right: auto;
  top: 778px; bottom: auto; }
@media (max-width: 1023px) {
  .ls-ctasection--inline { padding-top: 20px; }
  .ls-ctasection--inline .ls-ctainner { gap: 40px; }
  /* re-assert the 50px tier: the unscoped --inline 100px rule out-specifies
     the generic .ls-ctapanel tier rule above */
  .ls-ctasection--inline .ls-ctapanel { padding: 50px 0; }
}

/* ---------------------------------------------------------------------------
   Inner banner — the shared blue hero panel Framer calls "Inner Banner Section".
   Used by case-study details (17), insight details, about-us, contact-us and all
   three archives — build once, every non-home hero follows.
   Measured on /case-studies/monkify-guided-journey @1512:
     section pt 200 pb 130 · 30px gutters · panel #1946da r20 padding 105px 0
     decorations 596x596, panel-relative (right -209, top -247) / (left -261,
     bottom -253), clipped by the panel's overflow
     h1 700w 60/66 ls -3px white centred max 700 · lead 400w 20/30 ls -.6 max 650
     gaps h1→lead 20 · lead→button 50 · button white pill 241x56 r55 pad 16/28
--------------------------------------------------------------------------- */
.ls-banner { max-width: none !important; width: 100vw;
             margin-left: calc(50% - 50vw) !important;
             margin-right: calc(50% - 50vw) !important;
             box-sizing: border-box;
             padding: 200px 30px var(--wp--preset--spacing--110);
             margin-block-start: 0 !important; }
.ls-banner + .ls-section { margin-block-start: 0; }
.ls-bannerpanel { position: relative; overflow: hidden; color: #fff;
                  background: var(--wp--preset--color--primary-blue);
                  border-radius: 20px; padding: 105px 0; }
.ls-bannerpanel::before, .ls-bannerpanel::after {
  content: ''; position: absolute; width: 596px; height: 596px;
  background: url(assets/media/8c1HhaAYookIPDMaa3EFdEQYCCk.png) 50%/contain no-repeat;
  pointer-events: none; }
.ls-bannerpanel::before { right: -209px; top: -247px; }
.ls-bannerpanel::after  { left: -261px; bottom: -253px; }
.ls-bannerpanel > * { position: relative; margin-block-start: 0; margin-block-end: 0; }
.ls-bannertitle { color: #fff; font-size: 60px; line-height: 1.1; font-weight: 700;
                  letter-spacing: -.05em; text-align: center; }
.ls-bannerlead { margin-block-start: 20px; max-width: 650px; }
.ls-bannerlead p { margin: 0; color: #fff; text-align: center;
                   font-size: 20px; line-height: 30px; letter-spacing: -.6px; }
.ls-bannerbtns { margin-block-start: 50px; }
.ls-bannerbtn .wp-block-button__link { background: #fafafa; color: #000;
  border-radius: 55px; padding: 16px 28px; font-size: 16px; line-height: 24px;
  font-weight: 500; }

/* ---------------------------------------------------------------------------
   Case-study details. Highlights: centred h2 (injected by the_content filter —
   the imported strip has no heading), then a 2x575 grid of #fafafa cards, icon
   40 + 12 gap + label 24/24 #676c80, 18px to value 26/31.2 #001047.
   Narrative: 1170 column; headings carry no top margin on the reference — the
   spacer <p>s in the content provide the rhythm (24px + two 20px margins).
--------------------------------------------------------------------------- */
.single-case_study .ls-prose { max-width: 1170px; }
/* case-study body copy is grey #676c80 on the reference; the darker #2b2b2b
   belongs to the insight articles */
.single-case_study .ls-prose :is(p, li) { color: var(--wp--preset--color--grey); }
.single-case_study .ls-prose :is(h2, h3, h4) { margin-top: 0; }
.single-case_study .ls-prose ul { margin: 17px 0 0; padding-left: 20px; }
.single-case_study .ls-prose li { margin: 0; }
/* the imported lists are <li><p>…</p></li>; the prose p margin doubled every row */
.single-case_study .ls-prose li p { margin: 0; }
/* the reference narrative sits flush against the CTA — its 130 bottom padding
   is the whole gap; WP's constrained blockGap lands on the template-part WRAPPER
   around .ls-ctasection, not on the section itself */
.single-case_study .ls-section + .wp-block-template-part { margin-block-start: 0; }
/* same blockGap between </main> and the footer part — the reference is flush */
.single-case_study main + footer.wp-block-template-part { margin-block-start: 0; }

.ls-prose .ls-hlheading { text-align: center; margin: 0; }
/* 1fr columns inside the 1170 prose column = the reference's 575px tracks;
   auto-rows 1fr reproduces Framer's uniform rows (all rows = tallest card) */
.single-case_study .ls-highlights { display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr; gap: 20px; background: none; border: 0; padding: 0;
  margin: 50px 0 var(--wp--preset--spacing--110); }
.single-case_study .ls-highlights > div { background: #fafafa; border-radius: 20px;
  padding: 30px; box-sizing: border-box; }
/* the WP colour-preset class carries !important, so matching it is required */
.single-case_study .ls-highlights .ls-body-label { color: #676c80 !important;
  font-size: 24px; line-height: 24px; font-weight: 400; letter-spacing: -.03em;
  display: flex; align-items: center; gap: 12px; }
.single-case_study .ls-highlights .ls-body-label::before { content: '';
  width: 40px; height: 40px; flex: 0 0 40px; background: 50%/contain no-repeat; }
.single-case_study .ls-highlights > div:nth-child(1) .ls-body-label::before {
  background-image: url(assets/icon/83itdyVXLSREggIMEL51wlyCis.svg); }
.single-case_study .ls-highlights > div:nth-child(2) .ls-body-label::before {
  background-image: url(assets/icon/TSq05olb3w6zDERVUNG2xarUg.svg); }
.single-case_study .ls-highlights > div:nth-child(3) .ls-body-label::before {
  background-image: url(assets/icon/WWz5EIzLdowrewDoWfpx4xCMvBY.svg); }
.single-case_study .ls-highlights > div:nth-child(4) .ls-body-label::before {
  background-image: url(assets/icon/DAr5xAqc4rN3cyyskEIBK7r76tg.svg); }
.single-case_study .ls-highlights .ls-body-bold { margin-top: 18px;
  font-size: 26px; line-height: 34px; font-weight: 500;
  color: var(--wp--preset--color--dark-blue); }
/* 34px per line, not the type-scale 31.2: reproduces the reference's value
   wrapper at every width — single-line card 152, two-line rows 186@390/226@1024 */

/* Breakpoint tiers, measured on the reference (not assumed from the homepage):
   1024–1279  banner unchanged (pt200 pb130, panel 105, gutters 30) ·
              highlights gap 38, card pad 50/30, section-bottom 80 ·
              details keeps pb 130 where the site-wide tier rule says 80
   ≤1023      banner pb 80, gutters 20, panel pad 80/15, lead→button gap 40 ·
              highlights single column, gap 40, card pad 30/15 ·
              h1 stays 60/66 at every width, lead stays 20/30 */
@media (max-width: 1279px) and (min-width: 1024px) {
  .single-case_study .ls-highlights { gap: 38px; margin-bottom: 80px; }
  .single-case_study .ls-highlights > div { padding: 50px 30px; }
  .single-case_study .ls-section { padding-bottom: 130px; }
}
@media (max-width: 1023px) {
  .ls-banner { padding: 200px 20px 80px; }
  .ls-bannerpanel { padding: 80px 15px; }
  .ls-bannerbtns { margin-block-start: 40px; }
  .single-case_study .ls-highlights { grid-template-columns: 1fr; gap: 40px;
    margin-bottom: 80px; }
  .single-case_study .ls-highlights > div { padding: 30px 15px; }
}

/* ---------------------------------------------------------------------------
   About-us page — measured on https://www.latenthq.com/about-us @1512.
   Five bespoke sections in page content (wp:html), template page-about-us.html.
   Sections: hero 914 (pt200) · story 1030 (130/130) · team 800 (pb130) ·
   impact 708 (pb130) · values 480 (pb130); all flush, content column 1170.
--------------------------------------------------------------------------- */
.entry-content > [class^="ls-ab"], .page .wp-block-post-content > * { margin-block-start: 0; }
.page main .wp-block-template-part,
.page main + footer.wp-block-template-part { margin-block-start: 0; }
.ls-abwrap { max-width: 1170px; margin: 0 auto; position: relative; }
section[class^="ls-ab"] { max-width: none !important; width: 100vw;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }

/* hero: text col 510 · h1 700w 60/66 ls-3 #001047 · lead +20 20/30 grey ·
   avatars +180 (3×60 overlapped 20, h3 30/30 600 ls-1) · media 500 abs right,
   top -100 from the wrap; calendar 334 at (196,322); search glass at (-160,606) */
.ls-abhero { padding-top: 200px; position: relative; overflow: visible; }
.ls-abhero-text { max-width: 510px; }
.ls-abhero-text h1 { margin: 0; font-size: 60px; line-height: 66px; font-weight: 700;
  letter-spacing: -3px; color: var(--wp--preset--color--dark-blue); }
.ls-abhero-text > p { margin: 20px 0 0; max-width: 510px; font-size: 20px; line-height: 30px;
  letter-spacing: -.6px; color: var(--wp--preset--color--grey); }
.ls-abavatars { margin-top: 180px; display: flex; align-items: center; }
.ls-abavs { display: flex; }
.ls-abavs img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-sizing: border-box; }
.ls-abavs img + img { margin-left: -20px; }
.ls-abavtext { margin-left: 10px; display: flex; flex-direction: column; gap: 4px; }
.ls-abavtext strong { font-size: 30px; line-height: 30px; font-weight: 600;
  letter-spacing: -1px; color: var(--wp--preset--color--dark-blue); }
.ls-abavtext span { font-size: 20px; line-height: 30px; letter-spacing: -.6px;
  color: var(--wp--preset--color--grey); }
.ls-abhero-media { position: absolute; top: -100px; right: 0; width: 500px; }
.ls-abcollage { display: block; width: 500px; height: 814px; object-fit: cover;
  border-radius: 20px; }
.ls-abcal { position: absolute; left: 196px; top: 322px; width: 334px; height: auto; }
.ls-absearch { position: absolute; left: -160px; top: 606px; width: 293px;
  box-sizing: border-box; padding: 15px; border-radius: 20px;
  background: rgba(0, 0, 0, .02); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); }
.ls-abicons { display: flex; gap: 15px; }
.ls-abicons span { width: 47px; height: 47px; border-radius: 12px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: rgba(0, 0, 0, .04) 0 0 10px 0; }
.ls-abicons img { width: 29px; height: 29px; }
.ls-abfield { margin-top: 15px; height: 41px; border-radius: 12px; background: #fff;
  display: flex; align-items: center; padding: 0 16px; font-size: 12px;
  color: var(--wp--preset--color--grey);
  box-shadow: rgba(0, 0, 0, .04) 0 0 10px 0; }

/* story: h2 centred · lead 800 centred 20/30 · video 1170x500 r20 +50 ·
   glass card 340x440 at (30,30): 70/70 500 blue stats, labels +10, items gap 30,
   blue pill bottom-aligned (86 above it) */
.ls-abstory { padding: 130px 0; }
.ls-abstory h2, .ls-abteam h2 { margin: 0; text-align: center; font-size: 42px;
  line-height: 1.2; letter-spacing: -2.3px; color: var(--wp--preset--color--dark-blue); }
.ls-abstory-lead, .ls-abteam-lead { margin: 20px auto 0; max-width: 800px;
  text-align: center; font-size: 20px; line-height: 30px; letter-spacing: -.6px;
  color: var(--wp--preset--color--grey); }
.ls-abvideo { margin-top: 50px; position: relative; }
.ls-abvideo video { display: block; width: 100%; height: 500px; object-fit: cover;
  border-radius: 20px; }
.ls-abstat { position: absolute; left: 30px; top: 30px; width: 340px; height: 440px;
  box-sizing: border-box; padding: 30px; border-radius: 20px;
  background: rgba(255, 255, 255, .3); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); display: flex; flex-direction: column; }
.ls-abstat-item + .ls-abstat-item { margin-top: 30px; }
.ls-abstat-item strong { display: block; font-size: 70px; line-height: 70px;
  font-weight: 500; color: var(--wp--preset--color--primary-blue); }
.ls-abstat-item span { display: block; margin-top: 10px; font-size: 16px;
  line-height: 24px; color: var(--wp--preset--color--grey); }
.ls-abbtn-blue { margin-top: auto; align-self: flex-start; display: inline-flex;
  align-items: center; background: var(--wp--preset--color--primary-blue);
  color: #fff; border-radius: 55px; padding: 16px 28px; font-size: 16px;
  line-height: 24px; font-weight: 500; text-decoration: none; }

/* team: grid 4x270 gap 30 +50 · photo 270x350 r20 · name +20 26/26 500 · role +10 */
.ls-abteam { padding-bottom: 130px; }
.ls-abteam-grid { margin-top: 50px; display: grid;
  grid-template-columns: repeat(4, 270px); gap: 30px; justify-content: center; }
.ls-abteam-card img { display: block; width: 270px; height: 350px; object-fit: cover;
  border-radius: 20px; }
.ls-abteam-card strong { display: block; margin-top: 20px; font-size: 26px;
  line-height: 26px; font-weight: 500; color: var(--wp--preset--color--dark-blue); }
.ls-abteam-card span { display: block; margin-top: 10px; font-size: 16px;
  line-height: 24px; color: var(--wp--preset--color--grey); }

/* impact: left col 350 (h2 left, p +20 20/30, outline pill +50) ·
   right 770: 2 cards visible (370, gap 30) + arrows +50 · card = thumb 230 r20 +
   #fafafa body 240 pad 20 (32/32 title, p +10, Learn More 16/19.2 500) */
.ls-abimpact { padding-bottom: 130px; }
.ls-abimpact .ls-abwrap { display: flex; gap: 50px; }
.ls-abimpact-text { width: 350px; flex: 0 0 350px; }
.ls-abimpact-text h2 { margin: 0; text-align: left; font-size: 42px; line-height: 1.2;
  letter-spacing: -2.3px; color: var(--wp--preset--color--dark-blue); }
.ls-abimpact-text p { margin: 20px 0 0; font-size: 20px; line-height: 30px;
  letter-spacing: -.6px; color: var(--wp--preset--color--grey); }
.ls-abbtn-outline { margin-top: 50px; display: inline-flex; align-items: center;
  background: var(--wp--preset--color--primary-blue); color: #fff;
  border-radius: 55px; padding: 16px 28px; font-size: 16px; line-height: 22px;
  font-weight: 500; text-decoration: none; }
.ls-abcase-body a::after { content: ' \2197'; }
.ls-abcarousel { margin-left: auto; width: 770px; }
.ls-abtrack { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; }
.ls-abtrack::-webkit-scrollbar { display: none; }
.ls-abcase { flex: 0 0 370px; display: flex; flex-direction: column; gap: 10px; }
.ls-abcase img { display: block; width: 370px; height: 230px; object-fit: cover;
  border-radius: 20px; }
.ls-abcase-body { background: #fafafa; border-radius: 20px; padding: 20px;
  min-height: 240px; box-sizing: border-box; }
.ls-abcase-body strong { display: block; font-size: 32px; line-height: 32px;
  font-weight: 500; color: var(--wp--preset--color--dark-blue); }
.ls-abcase-body p { margin: 10px 0 0; font-size: 16px; line-height: 24px;
  color: var(--wp--preset--color--grey); }
.ls-abcase-body a { display: inline-block; margin-top: 11px; font-size: 16px;
  line-height: 19.2px; font-weight: 500; color: var(--wp--preset--color--dark-blue); }
.ls-abarrows { margin-top: 50px; display: flex; gap: 20px; }
.ls-abarrow { width: 48px; height: 48px; border-radius: 50%; background: #fff;
  border: 1px solid var(--wp--preset--color--border); cursor: pointer;
  position: relative; }
.ls-abarrow::after { content: '\2190'; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -52%); font-size: 18px; line-height: 1;
  color: var(--wp--preset--color--dark-blue); }
.ls-abarrow--r::after { content: '\2192'; }

/* values: left 573 = rows (icon box 64 + gap 40 + text: 26/26 500, p +16 16/24),
   rows gap 44 · right 538: h2 left + p +20 20/30 */
.ls-abvalues { padding-bottom: 130px; }
.ls-abvalues .ls-abwrap { display: flex; gap: 60px; }
.ls-abvalues-list { width: 573px; flex: 0 0 573px; }
.ls-abvalue { display: flex; gap: 40px; }
.ls-abvalue + .ls-abvalue { margin-top: 44px; }
.ls-abvicon { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 16px;
  background: #fafafa; display: flex; align-items: center; justify-content: center; }
.ls-abvicon img { width: 34px; height: 34px; }
.ls-abvtext strong { display: block; font-size: 26px; line-height: 26px;
  font-weight: 500; color: var(--wp--preset--color--dark-blue); }
.ls-abvtext p { margin: 16px 0 0; font-size: 16px; line-height: 24px;
  color: var(--wp--preset--color--grey); }
.ls-abdrives { margin-left: auto; width: 538px; }
.ls-abdrives h2 { margin: 0; text-align: left; font-size: 42px; line-height: 1.2;
  letter-spacing: -2.3px; color: var(--wp--preset--color--dark-blue); }
.ls-abdrives p { margin: 20px 0 0; font-size: 20px; line-height: 30px;
  letter-spacing: -.6px; color: var(--wp--preset--color--grey); }

/* the hero media is bottom-aligned with the avatars at every desktop tier:
   the wrap takes the media's height and the avatar row pins to its bottom */
.ls-abhero .ls-abwrap { min-height: 714px; }
.ls-abavatars { position: absolute; left: 0; bottom: 0; margin: 0; }

/* Tiers, measured on the reference (1200 and 1024 share a design):
   1024–1279  hero pt180, h1 col 410, media 500x670 top+94, cal 280@(240,264),
              search @(-110,462) · every section pad 80 · team 4x1fr gap 10 ·
              impact text 300 + carousel · values cols 487/457
   ≤1023      stacked: h1 50/55 centred (40/44 left @≤767) · media 500x450
              (350 @390) with the search glass kept at (25,262), no calendar ·
              story = stat card ABOVE a 340-tall video · team 1 col, img 300 ·
              impact/values single column, drives-us before the value rows */
@media (max-width: 1279px) and (min-width: 1024px) {
  .ls-abhero { padding-top: 180px; }
  .ls-abhero .ls-abwrap { min-height: 764px; }
  .ls-abhero-text { max-width: 410px; }
  .ls-abhero-media { top: 94px; }
  .ls-abcollage { height: 670px; }
  .ls-abcal { left: 240px; top: 264px; width: 280px; }
  .ls-absearch { left: -110px; top: 462px; }
  .ls-abstory { padding: 80px 0; }
  .ls-abteam, .ls-abimpact, .ls-abvalues { padding-bottom: 80px; }
  .ls-abteam-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ls-abteam-card img { width: 100%; height: 350px; }
  .ls-abimpact-text { width: 300px; flex: 0 0 300px; }
  .ls-abcarousel { width: auto; min-width: 0; flex: 1; }
  .ls-abvalues-list { width: 487px; flex: 0 0 487px; }
  .ls-abdrives { width: auto; }
  .ls-abwrap { padding: 0 15px; }
}
@media (max-width: 1023px) {
  .ls-abwrap { padding: 0 20px; }
  .ls-abhero { padding-top: 200px; }
  .ls-abhero .ls-abwrap { min-height: 0; }
  .ls-abhero-text { max-width: none; display: flex; flex-direction: column;
    align-items: center; text-align: center; }
  .ls-abhero-text h1 { font-size: 50px; line-height: 55px; letter-spacing: -2.5px;
    max-width: 420px; }
  .ls-abhero-text > p { max-width: 420px; }
  .ls-abavatars { position: static; margin-top: 60px; justify-content: center; }
  .ls-abhero-media { position: relative; top: 0; right: auto; width: 500px;
    max-width: 100%; margin: 40px auto 0; }
  .ls-abcollage { width: 100%; height: 450px; }
  .ls-abcal { display: none; }
  .ls-absearch { left: 25px; top: 262px; }
  .ls-abstory { padding: 80px 0; }
  .ls-abvideo { display: flex; flex-direction: column-reverse; gap: 40px; }
  .ls-abvideo video { height: 340px; }
  .ls-abstat { position: static; width: auto; height: auto; }
  .ls-abbtn-blue { margin-top: 30px; }
  .ls-abteam, .ls-abimpact, .ls-abvalues { padding-bottom: 80px; }
  .ls-abteam-grid { grid-template-columns: 1fr; gap: 30px; }
  .ls-abteam-card img { width: 100%; height: 300px; }
  .ls-abimpact .ls-abwrap { flex-direction: column; }
  .ls-abimpact-text { width: auto; flex: none; max-width: 450px;
    margin: 0 auto; text-align: center; }
  .ls-abimpact-text h2 { text-align: center; }
  .ls-abcarousel { width: 100%; margin-left: 0; }
  .ls-abvalues .ls-abwrap { flex-direction: column-reverse; gap: 40px; }
  .ls-abvalues-list, .ls-abdrives { width: auto; flex: none; }
}
@media (max-width: 1023px) {
  /* reference order on the stacked tier: heading, copy, carousel, arrows, button */
  .ls-abimpact-text { display: contents; }
  .ls-abimpact .ls-abwrap > *, .ls-abimpact-text > * { order: 0; }
  .ls-abimpact-text h2 { order: 1; text-align: center; }
  .ls-abimpact-text p { order: 2; max-width: 450px; margin: 20px auto 0;
    text-align: center; }
  .ls-abcarousel { order: 3; margin-top: 40px; }
  .ls-abbtn-outline { order: 4; align-self: center; margin-top: 40px; }
  .ls-abarrows { justify-content: center; }
  /* stat card rides above the video as a row at tablet width */
  .ls-abstat { flex-direction: row; align-items: center; gap: 40px; padding: 30px; }
  .ls-abstat-item + .ls-abstat-item { margin-top: 0; }
  .ls-abbtn-blue { margin: 0 0 0 auto; }
}
@media (max-width: 767px) {
  .ls-abhero-text h1 { font-size: 40px; line-height: 44px; letter-spacing: -2px; }
  /* the glass card dissolves on phones: plain centred stack, no background */
  .ls-abstat { flex-direction: column; background: none; backdrop-filter: none;
    -webkit-backdrop-filter: none; padding: 0; border-radius: 0;
    text-align: center; align-items: center; }
  .ls-abstat-item + .ls-abstat-item { margin-top: 30px; }
  .ls-abstat-item strong { font-size: 50px; line-height: 50px; }
  .ls-abbtn-blue { margin: 30px auto 0; }
  .ls-announce a { flex-direction: column; gap: 2px; }
}

/* ---------------------------------------------------------------------------
   Contact-us — measured on https://www.latenthq.com/contact-us @1512.
   hero 858 (pt200, split panel 528: white text left in the 1170 col, photo
   570x528 flush right) · hours 771 (card 371 #fafafa r20 pad40 + right col 729
   reusing the about value rows) · contacts 680 (full-bleed map iframe, blue
   overlay card 440x346 vertically centred at the content-left edge) · pb 130.
--------------------------------------------------------------------------- */
.entry-content > .ls-banner { margin-block-start: 0; }
.ls-banner--split { padding-bottom: var(--wp--preset--spacing--110); }
.ls-bannerpanel--split { padding: 90px 0; min-height: 528px; box-sizing: border-box; }
.ls-bannersplit { max-width: 1170px; margin: 0 auto; position: relative; z-index: 1; }
.ls-bannersplit-text { max-width: 600px; }
.ls-bannersplit-text h1 { margin: 0; color: #fff; font-size: 60px; line-height: 66px;
  font-weight: 700; letter-spacing: -3px; text-align: left; }
.ls-bannersplit-text p { margin: 20px 0 0; color: #fff; font-size: 20px;
  line-height: 30px; letter-spacing: -.6px; text-align: left; }
.ls-bannerbtn-pill { margin-top: 50px; display: inline-flex; align-items: center;
  background: #fafafa; color: #000; border-radius: 55px; padding: 16px 28px;
  font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; }
.ls-bannerphoto { position: absolute; top: 0; right: 0; width: 570px; height: 100%;
  object-fit: cover; }

.ls-cthours { padding-bottom: var(--wp--preset--spacing--110); }
.ls-cthours-row { display: flex; gap: 70px; }
.ls-cthours-card { flex: 0 0 371px; width: 371px; box-sizing: border-box;
  background: #fafafa; border-radius: 20px; padding: 40px; align-self: flex-start; }
.ls-ctday { display: flex; }
.ls-ctday + .ls-ctday { margin-top: 40px; }
.ls-ctday span { width: 156px; flex: 0 0 156px; font-size: 16px; line-height: 24px;
  font-weight: 700; color: var(--wp--preset--color--grey); }
.ls-ctday em { font-style: normal; font-size: 16px; line-height: 24px;
  white-space: nowrap; color: var(--wp--preset--color--dark-blue); }
.ls-cthours-right { min-width: 0; }
.ls-cthours-right h2 { margin: 0; text-align: left; font-size: 42px; line-height: 1.2;
  letter-spacing: -2.3px; color: var(--wp--preset--color--dark-blue); }
.ls-cthours-right > p { margin: 20px 0 0; font-size: 20px; line-height: 30px;
  letter-spacing: -.6px; color: var(--wp--preset--color--grey); }
.ls-cthours-values { margin-top: 50px; width: auto; flex: none; }

.ls-ctmap { position: relative; height: 680px; }
.ls-ctmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ls-ctmap .ls-abwrap { height: 100%; display: flex; align-items: center; }
.ls-ctcard { position: relative; width: 440px; box-sizing: border-box;
  background: var(--wp--preset--color--primary-blue); border-radius: 20px;
  padding: 60px 50px 50px; color: #fff; }
.ls-ctrow { display: flex; gap: 20px; }
.ls-ctrow + .ls-ctrow { margin-top: 20px; }
.ls-cticon { width: 36px; height: 36px; flex: 0 0 36px; }
.ls-cticon img { width: 36px; height: 36px; display: block; }
.ls-cttext strong { display: block; font-size: 20px; line-height: 24px;
  font-weight: 500; color: #fff; }
.ls-cttext p { margin: 10px 0 0; font-size: 16px; line-height: 24px; color: #fff; }
.ls-cttext a { color: #fff; }
.ls-ctcard-btn { display: inline-flex; align-items: center; background: #fff;
  color: var(--wp--preset--color--dark-blue); border-radius: 55px; padding: 16px 28px;
  font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none;
  align-self: center; }

@media (max-width: 1023px) {
  /* split banner stacks: full-width photo on top (320, panel clips the corners),
     centred text below — reference /insights@768 is 671 tall, photo 320 + text.
     Was hiding the photo entirely (display:none). */
  .ls-banner--split { padding-top: 0; padding-bottom: 40px; }
  .ls-bannerpanel--split { min-height: 0; padding: 0; display: flex; flex-direction: column;
    border-radius: 20px; overflow: hidden; }
  .ls-bannerphoto { display: block; position: static; order: -1;
    width: 100%; height: 320px; }
  .ls-bannerphoto--wide { width: 100%; }
  .ls-bannersplit { max-width: none; margin: 0; padding: 40px 20px 40px; }
  .ls-bannersplit-text { max-width: none; text-align: center; }
  .ls-bannersplit-text h1 { font-size: 50px; line-height: 1.1; text-align: center; }
  .ls-bannersplit-text p { margin-left: auto; margin-right: auto; text-align: center; }
  .ls-bannerbtn-pill { margin-top: 40px; }
  .ls-cthours-row { flex-direction: column; gap: 50px; }
  .ls-cthours-card { width: auto; flex: none; }
  .ls-ctmap { height: auto; padding: 0; }
  .ls-ctmap iframe { position: static; display: block; height: 420px; }
  .ls-ctmap .ls-abwrap { height: auto; display: block; padding: 0; }
  .ls-ctcard { width: auto; border-radius: 0; }
}

/* ---------------------------------------------------------------------------
   Insight detail hero — measured on /insights/what-is-cerner-ehr-system @1512.
   White hero, 920 col, pt 185: meta row 50 (category chip 34 pad 5/15 blue +
   date grey 16/24 at gap 10 · avatar 50 round + author 20/30 #2b2b2b right),
   h1 600w 55/66 ls 0 at +30, banner image 920x620 r20 at +30. No excerpt.
--------------------------------------------------------------------------- */
.single-insight .ls-hero { padding-top: 185px; }
.ls-insmeta { min-height: 50px; align-items: center; }
.ls-insmeta > * { margin-block-start: 0; }
.ls-insmeta-left { gap: 10px; align-items: center; }
.ls-inschip { font-size: 16px; line-height: 24px; }
.ls-inschip a { display: inline-block; background: var(--wp--preset--color--primary-blue);
  color: #fff !important; border-radius: 55px; padding: 5px 15px; text-decoration: none; }
.ls-insdate { font-size: 16px; line-height: 24px; color: var(--wp--preset--color--grey); }
.ls-insauthor { gap: 10px; align-items: center; }
.ls-insavatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.ls-insauthor-name { font-size: 20px; line-height: 30px; letter-spacing: -.6px;
  color: var(--wp--preset--color--dark-grey); }
.single-insight .ls-h1-cms { margin-top: 30px; font-size: 55px; line-height: 66px;
  font-weight: 600; letter-spacing: 0; }
.ls-insbanner { margin-block-start: 30px; max-width: 920px !important;
  margin-left: auto !important; margin-right: auto !important; }
.ls-insbanner img { width: 100%; height: auto; aspect-ratio: 920 / 620;
  object-fit: cover; border-radius: 20px; }
@media (max-width: 767px) {
  .single-insight .ls-h1-cms { font-size: 36px; line-height: 1.2; }
  .ls-insmeta { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Insight article tail — three blocks the template never had (§37), measured
   on /insights/what-is-cerner-ehr-system @1512:
   author card 920x277 #fafafa r20 pad30 at +80 (avatar 140, h4 26/26 + 32px
   socials, bio 16/24 at +45) · Related Posts 1170 (h2 + blue View All pill
   117x56; two 570-wide cards at +50: image 300 r20 with a blue category chip
   overlaid at (30,280), title, excerpt 510, blue Read-full-post) · demo panel
   1200x374 blue r20 pad 80/40, centred, 80 below.
--------------------------------------------------------------------------- */
.ls-insauthorcard { margin-top: 80px; background: #fafafa; border-radius: 20px;
  padding: 30px; display: flex; gap: 30px; }
.ls-insauthorcard-avatar { width: 140px; height: 140px; border-radius: 50%;
  object-fit: cover; flex: 0 0 140px; }
.ls-insauthorcard-body { padding-top: 26px; }
.ls-insauthorcard-row { display: flex; align-items: center; gap: 10px; }
.ls-insauthorcard-row h4 { margin: 0; font-size: 26px; line-height: 26px;
  font-weight: 500; color: var(--wp--preset--color--dark-blue); }
.ls-insauthorcard-row img { width: 32px; height: 32px; display: block; }
.ls-insauthorcard-body p { margin: 45px 0 0; font-size: 16px; line-height: 24px;
  color: var(--wp--preset--color--grey); }

.ls-insrelated { padding-bottom: var(--wp--preset--spacing--110); }
.ls-insrelated-head { align-items: center; }
.ls-insrelated-head > * { margin-block-start: 0; }
.ls-insrelated-head h2 { margin: 0; max-width: none; text-align: left;
  font-size: 42px; line-height: 1.2; letter-spacing: -2.3px;
  color: var(--wp--preset--color--dark-blue); }
.ls-insviewall { display: inline-flex; align-items: center;
  background: var(--wp--preset--color--primary-blue); color: #fff;
  border-radius: 55px; padding: 16px 28px; font-size: 16px; line-height: 24px;
  font-weight: 400; text-decoration: none; }
.ls-insrelated .wp-block-query { margin-block-start: 50px; }
.ls-insrelated .wp-block-post-template.is-layout-grid {
  grid-template-columns: 1fr 1fr; gap: 30px; }
.ls-relcard { position: relative; }
.ls-relcard > * { margin-block-start: 0; }
.ls-relcard .wp-block-post-featured-image { margin: 0; }
.ls-relcard .wp-block-post-featured-image img { display: block; width: 100%;
  height: 300px; object-fit: cover; border-radius: 20px; }
.ls-relchip { position: absolute; left: 30px; top: 280px; display: inline-block;
  background: var(--wp--preset--color--primary-blue); border-radius: 20px;
  padding: 5px 15px; font-size: 16px; line-height: 24px; }
.ls-relchip a { color: #fff !important; text-decoration: none; }
.ls-reltitle { margin: 34px 0 0; font-size: 26px; line-height: 31.2px;
  font-weight: 500; }
.ls-reltitle a { color: var(--wp--preset--color--dark-blue); text-decoration: none; }
.ls-relexcerpt { margin-top: 10px; max-width: 510px; }
.ls-relexcerpt p { margin: 0; font-size: 16px; line-height: 24px;
  color: var(--wp--preset--color--grey); }
.ls-relmore { display: inline-block; margin-top: 50px; font-size: 16px;
  line-height: 19.2px; font-weight: 500;
  color: var(--wp--preset--color--primary-blue); text-decoration: none; }

.ls-insdemo { margin: 0 0 80px; }
.ls-insdemo-panel { max-width: 1200px; margin: 0 auto; box-sizing: border-box;
  background: var(--wp--preset--color--primary-blue); border-radius: 20px;
  padding: 80px 40px; text-align: center; }
.ls-insdemo-panel h2 { margin: 0; color: #fff; font-size: 42px; line-height: 1.2;
  letter-spacing: -2.3px; max-width: none; }
.ls-insdemo-panel p { margin: 20px auto 0; max-width: 700px; color: rgba(255,255,255,.85);
  font-size: 20px; line-height: 30px; letter-spacing: -.6px; }
.ls-insdemo-panel a { display: inline-flex; align-items: center; margin-top: 32px;
  background: #fff; color: var(--wp--preset--color--primary-blue);
  border-radius: 55px; padding: 16px 28px; font-size: 16px; line-height: 19.2px;
  font-weight: 500; text-decoration: none; }
/* the section following the article keeps the flush rhythm */
.single-insight .ls-insrelated, .single-insight .ls-insdemo { margin-block-start: 0; }
/* image→text gap is 30 on the reference; blockGap + the 50 preset gave 100 */
.single-insight .ls-section { margin-block-start: 0; padding-top: 30px !important;
  padding-bottom: 80px; }
@media (max-width: 767px) {
  .ls-insauthorcard { flex-direction: column; }
  .ls-insrelated .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
  .ls-insrelated-head { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Archives (#232) — measured on /case-studies, /services, /insights @1512.
   All three heroes are the split banner (photo 590 wide, panel content-sized:
   492/462/432). Case-study & service listings: full-width 1170x450 #fafafa r20
   rows on a 500 pitch — title 42 in a 620 col at 50 inset, excerpt +20, blue
   View More pill +50, image 400 filling the right edge. Blue Load More pill
   centred +50 (4 of 6 services / 4 of 17 cases shown — the heights prove the
   reference paginates). Insights: the Related-Posts card grid, 2 cols,
   gaps 30/60, 6 per page.
--------------------------------------------------------------------------- */
.ls-bannerphoto--wide { width: 590px; }
/* contact's 528 panel is photo-driven; archives are content-sized */
.page-template-page-contact-us .ls-bannerpanel--split { min-height: 528px; }
.ls-bannerpanel--split { min-height: 0; }

.ls-lsarchive, .ls-insarchive { padding-bottom: var(--wp--preset--spacing--110);
  margin-block-start: 0; }
.ls-lsarchive .wp-block-query, .ls-insarchive .wp-block-query { margin-block-start: 0; }
/* the post-template <li>s carry blockGap margins on top of the flex gap */
.ls-lsarchive .wp-block-post-template li, .ls-insarchive .wp-block-post-template li {
  margin: 0; }
.post-type-archive main .wp-block-template-part { margin-block-start: 0; }
.ls-lsarchive .wp-block-post-template { display: flex; flex-direction: column;
  gap: 50px; margin: 0; }
.ls-lsrow { display: flex; background: #fafafa; border-radius: 20px;
  overflow: hidden; min-height: 450px; }
.ls-lsrow > * { margin-block-start: 0; }
.ls-lsrow-text { padding: 50px; flex: 1; min-width: 0; }
.ls-lsrow-text > * { margin-block-start: 0; }
.ls-lsrow-text .wp-block-post-title { margin: 0; max-width: 620px; font-size: 42px;
  line-height: 50.4px; font-weight: 600; letter-spacing: -2.3px; }
.ls-lsrow-text .wp-block-post-title a { color: var(--wp--preset--color--dark-blue);
  text-decoration: none; }
.ls-lsrow-text .wp-block-post-excerpt { margin-top: 20px; max-width: 620px; }
.ls-lsrow-text .wp-block-post-excerpt p { margin: 0; font-size: 16px;
  line-height: 24px; color: var(--wp--preset--color--grey); }
.ls-lsrow-more { display: inline-flex; align-items: center; margin-top: 50px;
  background: var(--wp--preset--color--primary-blue); color: #fff;
  border-radius: 55px; padding: 14px 28px; font-size: 16px; line-height: 24px;
  text-decoration: none; }
.ls-lsrow .wp-block-post-featured-image { margin: 0; flex: 0 0 400px; }
.ls-lsrow .wp-block-post-featured-image a, .ls-lsrow .wp-block-post-featured-image img {
  display: block; width: 400px; height: 100%; min-height: 450px; object-fit: cover;
  border-radius: 0; }
.ls-loadmore { margin-top: 50px; }
.ls-loadmore a { display: inline-flex; align-items: center;
  background: var(--wp--preset--color--primary-blue); color: #fff;
  border-radius: 55px; padding: 14px 28px; font-size: 16px; line-height: 24px;
  text-decoration: none; }
.ls-insarchive .wp-block-post-template.is-layout-grid {
  grid-template-columns: 1fr 1fr; gap: 60px 30px; }
@media (max-width: 1023px) {
  .ls-lsrow { flex-direction: column; min-height: 0; }
  .ls-lsrow-text { padding: 30px; }
  .ls-lsrow-text .wp-block-post-title { font-size: 32px; line-height: 1.2; }
  .ls-lsrow .wp-block-post-featured-image { flex: none; }
  .ls-lsrow .wp-block-post-featured-image a, .ls-lsrow .wp-block-post-featured-image img {
    width: 100%; min-height: 0; height: 280px; }
}
/* the insight cards stay a 2-col grid down to ~640 (reference: 2-col at 640,
   1-col at 620); the old rule dropped to 1-col a whole tier early (+2030 @768) */
@media (max-width: 639px) {
  .ls-insarchive .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
}
/* archive card variant: chip at (45, −15) and 20px title/excerpt gaps — the
   Related-Posts variant on singles uses (30, −20) and 34/10; both measured */
.ls-insarchive .ls-relchip { left: 45px; top: 285px; }
.ls-insarchive .ls-reltitle { margin-top: 20px; }
.ls-insarchive .ls-relexcerpt { margin-top: 20px; }

/* ---------------------------------------------------------------------------
   Report landing (#233) — measured on /report/state-of-ai-in-healthcare-2026
   @1512: grey #fafafa band (pad 64 0 110) · white panel 1200 pad 24 · left col
   620 (eyebrow 14/14, h1 60/72, lead 22/30.8 blue, sub 16/24, checklist pitch
   62, blue quote card + attribution) · form card 440 r20 pad 32/30 (labels
   14/16.8 #222, inputs 380x48 r10 border #e0e0e0, blue submit 380x49 r10).
--------------------------------------------------------------------------- */
.ls-report { max-width: none !important; width: 100vw;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  background: #fafafa; padding: 64px 0 110px; }
.ls-report-panel { max-width: 1200px; margin: 0 auto; box-sizing: border-box;
  background: #fff; padding: 24px; display: flex; justify-content: space-between; }
.ls-report-left { width: 620px; }
.ls-report-eyebrow { margin: 8px 0 0; display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 14px; font-weight: 500;
  color: var(--wp--preset--color--dark-blue); }
.ls-report-eyebrow span { font-size: 16px; font-weight: 700;
  color: var(--wp--preset--color--primary-blue); }
.ls-report-left h1 { margin: 40px 0 0; font-size: 60px; line-height: 72px;
  font-weight: 600; letter-spacing: -2px; color: var(--wp--preset--color--dark-blue); }
.ls-report-lead { margin: 26px 0 0; font-size: 22px; line-height: 30.8px;
  font-weight: 500; color: var(--wp--preset--color--primary-blue); }
.ls-report-sub { margin: 26px 0 0; font-size: 16px; line-height: 24px;
  color: var(--wp--preset--color--grey); }
.ls-report-learn { margin: 34px 0 0; font-size: 18px; line-height: 1.2;
  font-weight: 600; color: var(--wp--preset--color--dark-blue); }
.ls-report-list { margin: 27px 0 0; padding: 0; list-style: none; }
.ls-report-list li { position: relative; padding-left: 24px; font-size: 16px;
  line-height: 24px; color: var(--wp--preset--color--grey); }
.ls-report-list li + li { margin-top: 14px; }
.ls-report-list li::before { content: '\2713'; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--wp--preset--color--primary-blue); }
.ls-rquote { margin-top: 26px; background: var(--wp--preset--color--primary-blue);
  border-radius: 10px; padding: 14px 20px; font-size: 20px; line-height: 30px;
  font-weight: 600; color: #fff; box-sizing: border-box; }
.ls-rquote-attr { margin: 12px 0 0; font-size: 14px; line-height: 21px;
  color: var(--wp--preset--color--dark-blue); }
.ls-report-form { width: 440px; flex: 0 0 440px; box-sizing: border-box;
  background: #fff; border-radius: 20px; padding: 32px 30px; align-self: flex-start; }
.ls-report-form label { display: block; font-size: 14px; line-height: 16.8px;
  font-weight: 500; color: #222; }
.ls-report-form label + label { margin-top: 16px; }
.ls-req { color: rgb(217, 45, 32); margin-left: 2px; }
.ls-report-form input[type="text"], .ls-report-form input[type="email"],
.ls-report-form input[type="url"], .ls-report-form select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px;
  height: 48px; border: 1px solid rgb(224, 224, 224); border-radius: 10px;
  padding: 0 15px; font: 400 15px/1.4 inherit; font-family: inherit; color: #222;
  background: #fff; }
.ls-report-form .ls-rcheck { display: flex; align-items: center; gap: 13px;
  font-weight: 400; font-size: 15px; line-height: 21px; margin-top: 19px; }
.ls-report-form .ls-rcheck input { width: 18px; height: 18px; margin: 0; }
.ls-report-form button { display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; margin-top: 19px; background: var(--wp--preset--color--primary-blue);
  color: #fff; border: 0; border-radius: 10px; padding: 15px 24px;
  font-size: 15px; line-height: 1.2; font-weight: 500; cursor: pointer; }
.ls-report-form button span { font-size: 18px; line-height: 18px; }
/* the report hero stays a 2-col content|form panel down to ~700 (reference: 2-col
   at 700, stacked at 640); ours stacked a whole tier early at 1023. Between 700 and
   1023 the columns shrink (left flexes ~340, form 320, h1 50/60). */
@media (min-width: 700px) and (max-width: 1023px) {
  .ls-report-panel { justify-content: flex-start; gap: 30px; }
  .ls-report-left { width: auto; flex: 1 1 0; }
  .ls-report-left h1 { font-size: 50px; line-height: 60px; }
  .ls-report-form { width: 320px; flex: 0 0 320px; }
}
@media (max-width: 699px) {
  .ls-report-panel { flex-direction: column; gap: 40px; }
  .ls-report-left { width: auto; }
  .ls-report-left h1 { font-size: 40px; line-height: 1.15; }
  .ls-report-form { width: auto; flex: none; }
}

/* ---------------------------------------------------------------------------
   Service detail (§39) — measured on /services/diagnostic-lab-software-development
   @1512. Order: hero → why (2-col value rows) → success (.ls-lsrow reuse) →
   solutions → process timeline → why-Latent split → tech tiles → CTA (homepage
   panel on WHITE, "We Bring the Team.") → FAQ → bare footer.
--------------------------------------------------------------------------- */
.ls-svcsec, .ls-svchero { max-width: none !important; width: 100vw;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box; }
.ls-svcsec { max-width: 1170px !important; width: auto;
  margin: 0 auto !important; padding-bottom: 130px; }
.entry-content > .ls-svchero, .entry-content > .ls-svcsec { margin-block-start: 0; }
.single-service main .wp-block-template-part { margin-block-start: 0; }
.single-service .wp-block-post-content > * { margin-block-start: 0; }

/* hero: eyebrow = post title 18/21.6 · marketing H2 60/72 820 · sub 500 ·
   blue + white pills gap 16 at +50 · wave pngs at (131,449) 361 / (971,386) 404 */
.ls-svchero { position: relative; padding: 200px 0; text-align: center; }
.ls-svcwave { position: absolute; pointer-events: none; }
.ls-svcwave--l { left: 131px; top: 449px; width: 361px; }
.ls-svcwave--r { left: 971px; top: 386px; width: 404px; }
.ls-svchero > *:not(.ls-svcwave) { position: relative; }
.ls-svchero-eyebrow { margin: 0; font-size: 18px; line-height: 21.6px; font-weight: 500;
  letter-spacing: 0; color: var(--wp--preset--color--dark-blue); }
.ls-svchero-title { margin: 20px auto 0; max-width: 820px; font-size: 60px;
  line-height: 72px; font-weight: 600; letter-spacing: -2px;
  color: var(--wp--preset--color--dark-blue); }
.ls-svchero-sub { margin: 20px auto 0; max-width: 500px; font-size: 16px;
  line-height: 24px; color: var(--wp--preset--color--grey); }
.ls-svchero-btns { margin-top: 50px; display: flex; justify-content: center; gap: 16px; }
.ls-svcbtn-blue, .ls-svcbtn-white { display: inline-flex; align-items: center;
  border-radius: 55px; padding: 16px 28px; font-size: 16px; line-height: 24px;
  font-weight: 400; text-decoration: none; }
.ls-svcbtn-blue { background: var(--wp--preset--color--primary-blue); color: #fff; }
.ls-svcbtn-white { background: #fff; color: var(--wp--preset--color--dark-blue);
  box-shadow: rgba(0, 0, 0, .04) 0 0 10px 0; }

.ls-svcsec > h2 { margin: 0 auto; max-width: 600px; text-align: center;
  font-size: 42px; line-height: 50.4px; letter-spacing: -2.3px; font-weight: 600;
  color: var(--wp--preset--color--dark-blue); }
.ls-svcwhy-cols { margin-top: 100px; display: flex; gap: 60px; }
.ls-svcwhy-cols > div { flex: 1; }
.ls-svcwhy-cols .ls-abvalue + .ls-abvalue { margin-top: 40px; }
.ls-svcwhy-cols .ls-abvicon + .ls-abvtext, .ls-svcwhy-cols .ls-abvalue { gap: 52px; }

.ls-svcrows { margin-top: 50px; display: flex; flex-direction: column; gap: 50px; }
.ls-svcrows .wp-block-post-title { pointer-events: none; }

.ls-svcsol-grid { margin-top: 50px; display: grid;
  grid-template-columns: repeat(3, 370px); gap: 30px; justify-content: center; }
.ls-svcsol-card img { display: block; width: 370px; height: 230px; object-fit: cover;
  border-radius: 20px; }
.ls-svcsol-card h3 { margin: 30px 0 0 20px; max-width: 330px; font-size: 32px;
  line-height: 32px; font-weight: 500; color: var(--wp--preset--color--dark-blue); }
.ls-svcsol-card p { margin: 10px 0 0 20px; max-width: 330px; font-size: 16px;
  line-height: 24px; color: var(--wp--preset--color--grey); }

/* process carries ~246 bottom space in the reference, not the section default 130 */
.ls-svcproc { display: flex; gap: 72px; padding-bottom: 246px; }
.ls-svcproc-left { width: 549px; flex: 0 0 549px; }
.ls-svcproc-left h2 { margin: 0; max-width: none; text-align: left; }
.ls-svcproc-left .ls-svcbtn-blue { margin-top: 50px; }
.ls-svcproc-steps { flex: 1; }
.ls-svcstep { display: flex; gap: 36px; padding-bottom: 40px; position: relative; }
.ls-svcstep-line { width: 18px; flex: 0 0 18px; position: relative; }
.ls-svcstep-line::before { content: ''; position: absolute; left: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  border: 4px solid var(--wp--preset--color--primary-blue); background: #fff; }
.ls-svcstep:not(:last-child) .ls-svcstep-line::after { content: ''; position: absolute;
  left: 8px; top: 24px; bottom: -8px; width: 2px;
  background: var(--wp--preset--color--border); }
.ls-svcstep-text h4 { margin: 0; font-size: 26px; line-height: 26px; font-weight: 500;
  color: var(--wp--preset--color--dark-blue); }
.ls-svcstep-text p { margin: 26px 0 0; font-size: 16px; line-height: 24px;
  color: var(--wp--preset--color--grey); }

.ls-svcwcl { display: flex; gap: 60px; }
.ls-svcwcl-list { width: 573px; flex: 0 0 573px; }
.ls-svcwcl-right { margin-left: auto; max-width: 538px; }
.ls-svcwcl-right h2 { margin: 0; max-width: none; text-align: left; }
.ls-svcwcl-right .ls-svcbtn-blue { margin-top: 50px; }

/* tech section — two tiers. Sub-labels ("We Build For" / "We Integrate With")
   are 20/30 blue centred; the build row is 8 grey cards, the integrate rows are
   category-label-left + white cards right, divided by a hairline. */
.ls-svctech-sub { margin: 18px 0 0; text-align: center; font-size: 20px;
  line-height: 30px; font-weight: 400; color: var(--wp--preset--color--primary-blue); }
.ls-svctiles--build + .ls-svctech-sub { margin-top: 52px; }
.ls-svctiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
  justify-items: center; }
.ls-svctiles--build { margin-top: 40px; }
.ls-svctile { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* SCOPED to .ls-svctile — `.ls-svccard` is ALSO the homepage services card class
   (home.html), so a bare rule here collapsed those cards to 100x124 (fixed §47.1). */
.ls-svctile .ls-svccard { width: 100px; height: 124px; border-radius: 24px; background: #fafafa;
  display: flex; align-items: center; justify-content: center; }
.ls-svctile .ls-svccard--int { height: 100px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--blue-30); }
.ls-svctile .ls-svccard img { width: 60px; height: 60px; object-fit: contain; }
.ls-svctile-name { font-size: 16px; line-height: 24px; text-align: center;
  color: #2b2b2b; }

/* integrate: category label (~350) left, tiles right (~819), hairline between rows */
/* reference H2 sits on one line (~850 wide), not the section default 600 */
.ls-svctech > h2 { max-width: none; }
.ls-svcintgroups { margin-top: 40px; }
.ls-svcintrow { display: flex; align-items: flex-start; gap: 0; padding: 30px 0; }
.ls-svcintrow:first-child { padding-top: 0; }
.ls-svcintrow:last-child { padding-bottom: 0; }
.ls-svcintrow + .ls-svcintrow { border-top: 1px solid var(--wp--preset--color--border); }
.ls-svcintcat { flex: 0 0 351px; margin: 0; font-size: 20px; line-height: 24px;
  font-weight: 500; color: var(--wp--preset--color--dark-blue); }
.ls-svctiles--int { flex: 1; display: flex; flex-wrap: wrap; gap: 10px 8px;
  justify-content: flex-start; }
.ls-svctiles--int .ls-svctile { flex: 0 0 138px; }

/* reference stacks the FAQ cards with a 20px gap; ours were flush (−140 over 8) */
.ls-svcfaq .ls-faqlist { max-width: 740px; margin: 50px auto 0;
  display: flex; flex-direction: column; gap: 20px; }
.single-service .ls-svcfaq { padding-bottom: 130px; }

/* the service CTA is the HOMEPAGE panel on white — undo the dark inline variant */
.single-service .ls-ctasection--inline { background: transparent; padding-top: 0;
  padding-bottom: 130px; }
.single-service .ls-ctasection--inline .ls-ctapanel { padding: 100px 0; }
.single-service .ls-ctasection--inline .ls-ctablob--l { width: 354px; height: auto;
  left: 25px; top: -5px; }
.single-service .ls-ctasection--inline .ls-ctablob--r { width: 366px; height: auto;
  left: auto; right: 25px; top: auto; bottom: -108px; }
/* the service CTA image column is 854 tall, not the homepage's 944 — DESKTOP ONLY;
   at ≤1023 the shared rule (image 360) must win, so scope this or it forces 854 tall */
@media (min-width: 1024px) { .single-service .ls-ctabanner img { min-height: 854px; } }

@media (max-width: 1023px) {
  .ls-svchero { padding: 125px 20px 140px; }   /* reference mobile hero pad (measured) */
  .ls-svchero-title { font-size: 40px; line-height: 1.15; }
  .ls-svcwave { display: none; }
  .ls-svcsec { padding-left: 20px; padding-right: 20px; padding-bottom: 80px; }
  .ls-svcwhy-cols { flex-direction: column; gap: 40px; margin-top: 50px; }
  .ls-svcsol-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 370px)); }
  .ls-svcproc, .ls-svcwcl { flex-direction: column; gap: 40px; }
  .ls-svcproc-left, .ls-svcwcl-list { width: auto; flex: none; }
  .ls-svctiles { grid-template-columns: repeat(4, 1fr); }
  /* integrate rows stack: category label above full-width tiles (reference at ≤1023) */
  .ls-svcintrow { flex-direction: column; gap: 20px; }
  .ls-svcintcat { flex: none; }
  .ls-svctiles--int { display: grid; grid-template-columns: repeat(4, 1fr); }
  .ls-svctiles--int .ls-svctile { flex: none; }
}