/**
 * Leap Sourcing one-page demo — the whole design system in one file.
 * Loaded ONLY on demo.planzweb.com pages built from the Leap WPBakery elements (the front page; see
 * inc/leap-demo.php). Everything is scoped under body.lp-page so nothing leaks into other pages.
 * Markup comes from inc/leap/elements.php: every section is a <section class="lp-sec lp-<tone>"
 * data-lp-block> inside an ordinary WPBakery row, and any number of list items lays out.
 *
 * Specificity policy: Salient styles headings with `body .row .col h2` (0,2,2), so content rules
 * use `body.lp-page .lp-sec …` (0,3,1+). `!important` only where Salient itself uses !important or
 * prints inline styles (row padding, header colours); each such use is commented.
 *
 * Sections:  1 Fonts · 2 Tokens · 3 Salient resets · 4 Header · 5 Layout + type · 6 Components
 *            7 Hero · 8 Brands · 9 About · 10 Sourcing film · 11 Services · 12 How we work (track)
 *            12b How we work (T-shirt build) · 13 Products · 14 Sustainability (list) · 14b Sustainability (loop)
 *            12c Held sections fit the screen
 *            15 Team · 16 Locations · 17 Contact · 18 Footer
 *            19 Motion states · 20 Reduced motion
 *            21 Phase 1 additions (2026-10-13): new element params, new elements (partners, FAQ), v2-only fixes (body.lp-v2)
 *            22 Background photos (2026-10-14): section photo under a dark wash (Sustainability) · 23 Customer reviews pop-up (2026-10-14) · 24 Still logo row (2026-10-15) · 25 Text pages (2026-10-16) · 26 Motion polish (2026-10-16) · 27 Sustainability card crossfade (2026-10-16)
 */

/* ===== 1. Fonts (self-hosted variable fonts in the child theme's assets/fonts/) ============== */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../../fonts/plus-jakarta-sans-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../fonts/inter-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Salient's own rules still name "Inter Tight" (its fonts stylesheet is dropped on this page); alias it to the
   same Inter file so nothing falls back to a serif. Same URL, so no extra download. */
@font-face { font-family: "Inter Tight"; src: url("../../fonts/inter-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* ===== 2. Tokens ============================================================================= */
body.lp-page {
  /* brand (from the Leap logo) */
  --lp-blue: #0B45A4;        /* actions — white text 8.7:1 */
  --lp-blue-2: #1858C8;      /* hover, highlights */
  --lp-green: #00B078;       /* lines, icons, progress — never small text on white */
  --lp-green-ink: #007A55;   /* green text on light grounds 5.4:1 */
  --lp-green-light: #5FE0B6; /* green text on navy */
  --lp-navy: #061A3A;
  --lp-navy-2: #0B2550;
  --lp-ink: #0E1A2B;
  --lp-slate: #4A5568;
  --lp-white: #FFFFFF;
  --lp-cotton: #F4F7FB;
  --lp-mist: #EEF8F4;
  --lp-line: #DDE4EE;
  --lp-on-dark: #FFFFFF;
  --lp-on-dark-muted: #A9B8D0;
  --lp-line-dark: rgba(255, 255, 255, .14);
  /* type */
  --lp-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-fs-h1: clamp(2.5rem, 1.45rem + 4.2vw, 4rem);          /* 40 → 64 */
  --lp-fs-h2: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);      /* 30 → 44 */
  --lp-fs-h3: clamp(1.25rem, 1.18rem + .25vw, 1.375rem);      /* 20 → 22 */
  --lp-fs-lead: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);    /* 18 → 20 */
  --lp-fs-body: clamp(1rem, .98rem + .1vw, 1.0625rem);        /* 16 → 17 */
  --lp-fs-small: .875rem;                                      /* 14 */
  --lp-fs-eyebrow: .8125rem;                                   /* 13 */
  /* space + shape */
  --lp-gutter: clamp(24px, 5vw, 64px);
  --lp-max: 1200px;
  --lp-sec: clamp(72px, 9vw, 120px);
  --lp-sec-slim: 56px;
  --lp-gap: 24px;
  --lp-radius: 20px;
  --lp-radius-sm: 12px;
  --lp-shadow: 0 18px 40px -18px rgba(6, 26, 58, .28);
  --lp-header: 104px;
  /* motion */
  --lp-ease: cubic-bezier(.22, 1, .36, 1);
  --lp-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --lp-dur: 700ms;
  --lp-hover: 280ms;
  background-color: var(--lp-white);
  color: var(--lp-ink);
  font-family: var(--lp-body);
}
@media (max-width: 999px) { body.lp-page { --lp-header: 76px; } }
/* Visible screen height. On phones 100vh is the height with the address bar hidden; 100svh is what is
   actually visible when the page loads, so the held sections are sized against it. */
body.lp-page { --lp-screen: 100vh; }
@supports (height: 100svh) { body.lp-page { --lp-screen: 100svh; } }

/* Tones: each section (<section class="lp-sec lp-<tone>">) carries one. Components read only these local variables. */
body.lp-page .lp-white,
body.lp-page .lp-cotton,
body.lp-page .lp-mist { --bg: var(--lp-white); --fg: var(--lp-ink); --muted: var(--lp-slate); --accent: var(--lp-green-ink); --link: var(--lp-blue); --card: var(--lp-white); --card-line: var(--lp-line); --focus: var(--lp-blue); }
body.lp-page .lp-cotton { --bg: var(--lp-cotton); }
body.lp-page .lp-mist { --bg: var(--lp-mist); }
body.lp-page .lp-navy,
body.lp-page .lp-footer { --bg: var(--lp-navy); --fg: var(--lp-on-dark); --muted: var(--lp-on-dark-muted); --accent: var(--lp-green-light); --link: var(--lp-green-light); --card: rgba(255, 255, 255, .06); --card-line: var(--lp-line-dark); --focus: var(--lp-green-light); }

/* ===== 3. Salient resets (this page only) =================================================== */
/* Salient paints .container-wrap with the global page colour; let each section show its own tone. */
body.lp-page .container-wrap,
body.lp-page .container-wrap .container,
body.lp-page #ajax-content-wrap,
body.lp-page .ocm-effect-wrap,
body.lp-page .ocm-effect-wrap-inner { background-color: var(--lp-white); }
body.lp-page .container-wrap { padding-top: 0 !important; padding-bottom: 0 !important; } /* Salient sets these inline on some layouts */
body.lp-page .main-content > .row { padding-bottom: 0; }
/* Rows holding a Leap element: Salient prints inline padding on rows, so spacing lives inside .lp-sec instead.
   `.lp-section` is the class on the page's rows; `:has([data-lp-block])` also covers a row an editor adds from scratch. */
body.lp-page .wpb_row:is(.lp-section, :has([data-lp-block])) { padding: 0 !important; margin-bottom: 0 !important; }
body.lp-page .wpb_row:is(.lp-section, :has([data-lp-block])) > .row_col_wrap_12,
body.lp-page .wpb_row:is(.lp-section, :has([data-lp-block])) .vc_column-inner,
body.lp-page .wpb_row:is(.lp-section, :has([data-lp-block])) .wpb_wrapper { padding: 0 !important; margin: 0 !important; } /* column padding is inline/!important in Salient */
body.lp-page .wpb_row:is(.lp-section, :has([data-lp-block])) .wpb_column { margin: 0 !important; width: 100%; }
body.lp-page .wpb_row:is(.lp-section, :has([data-lp-block])) .row-bg-wrap { display: none; }
/* A new row left at Salient's default "in container" width: stretch it edge to edge like Salient's own full-width rows. */
body.lp-page .wpb_row:has([data-lp-block]):not(.full-width-content) { left: 50%; width: calc(100vw - var(--scroll-bar-w, 0px)); margin-left: calc(-50vw + var(--scroll-bar-w, 0px) / 2); }

/* ===== 4. Header (Salient #header-outer; its dynamic CSS sets colours with !important) ========= */
body.lp-page #header-outer #top nav > ul > li > a { font-family: var(--lp-display); font-weight: 600; font-size: .9375rem; letter-spacing: 0; }
body.lp-page #header-outer.transparent #top nav > ul > li:not([class*="button_"]) > a { color: var(--lp-on-dark) !important; }
body.lp-page #header-outer:not(.transparent) { background-color: var(--lp-white) !important; box-shadow: 0 1px 0 var(--lp-line); }
body.lp-page #header-outer:not(.transparent) #top nav > ul > li:not([class*="button_"]) > a { color: var(--lp-ink) !important; }
body.lp-page #header-outer #top nav > ul > li:not([class*="button_"]) > a .menu-title-text { position: relative; display: inline-block; }
body.lp-page #header-outer #top nav > ul > li:not([class*="button_"]) > a .menu-title-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--lp-green);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--lp-hover) var(--lp-ease);
}
body.lp-page #header-outer #top nav > ul > li > a:has(.menu-title-text)::after { display: none; } /* Salient's own underline: keep one underline only */
body.lp-page #header-outer #top nav > ul > li:not([class*="button_"]) > a:is(:hover, :focus-visible, .lp-current, [aria-current="true"]) .menu-title-text::after { transform: scaleX(1); }
body.lp-page #header-outer #top nav > ul > li.button_solid_color > a { color: var(--lp-white) !important; font-family: var(--lp-display); font-weight: 700; }
body.lp-page #header-outer #top nav > ul > li.button_solid_color > a::before { background-color: var(--lp-blue) !important; border-radius: 999px; transition: background-color var(--lp-hover) var(--lp-ease), transform var(--lp-hover) var(--lp-ease), scale var(--lp-hover) var(--lp-ease); }
body.lp-page #header-outer #top nav > ul > li.button_solid_color > a:is(:hover, :focus-visible)::before { background-color: var(--lp-blue-2) !important; scale: 1.04; } /* 2026-11-08: `scale`, not `transform` — Salient positions this pill with its own translateY; transform: scale() replaced it and the pill dropped below the text on hover (owner report) */
/* Mobile menu button: brand-blue circle (Salient paints it #000); Salient keeps its lines white. */
body.lp-page #header-outer #top .slide-out-widget-area-toggle[data-custom-color="true"] a::before { background-color: var(--lp-blue) !important; }
body.lp-page #header-outer :is(a, button):focus-visible { outline: 2px solid var(--lp-green); outline-offset: 3px; border-radius: 6px; }
/* Mobile off-canvas menu: navy, brand type (the cloned option paints it black). */
body.lp-page #slide-out-widget-area,
body.lp-page #slide-out-widget-area-bg { background-color: var(--lp-navy) !important; }
body.lp-page #slide-out-widget-area .off-canvas-menu-container li a { font-family: var(--lp-display) !important; font-weight: 600 !important; color: var(--lp-on-dark) !important; } /* Salient's off-canvas font rule is more specific */
body.lp-page #slide-out-widget-area .off-canvas-menu-container li a:is(:hover, :focus-visible, .lp-current) { color: var(--lp-green-light) !important; }
/* Scroll progress line (injected by leap.js) sits under the header. */
body.lp-page .lp-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 10001; background: var(--lp-green); transform-origin: left center; transform: scaleX(0); pointer-events: none; }
body.lp-page.admin-bar .lp-progress { top: 32px; }

/* ===== 5. Layout + type ====================================================================== */
body.lp-page .lp-sec { position: relative; padding-block: var(--lp-sec); background-color: var(--bg); color: var(--fg); font-size: var(--lp-fs-body); line-height: 1.65; }
body.lp-page .lp-sec[id] { scroll-margin-top: var(--lp-header); }
body.lp-page .lp-sec--slim { padding-block: var(--lp-sec-slim); }
body.lp-page .lp-container { width: 100%; max-width: calc(var(--lp-max) + 2 * var(--lp-gutter)); margin-inline: auto; padding-inline: var(--lp-gutter); box-sizing: border-box; }
body.lp-page .lp-sec :is(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
body.lp-page .lp-sec :is(ul, ol),
body.lp-page .lp-sec :is(ul, ol) > li { list-style: none !important; } /* Salient sets list-style on li */
body.lp-page .lp-sec :is(h1, h2, h3, h4, p, li, dt, dd, label, span) { color: inherit; }
body.lp-page .lp-sec :is(h1, h2, h3, h4) { font-family: var(--lp-display); text-wrap: balance; letter-spacing: -.015em; }
body.lp-page .lp-sec img { max-width: 100%; height: auto; margin: 0; } /* Salient adds 15px under every .row .col img */
body.lp-page .lp-sec a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* Section header: always eyebrow → H2 → lead, left-aligned. */
body.lp-page .lp-sec .lp-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 56px); }
body.lp-page .lp-sec .lp-head--split { max-width: none; grid-template-columns: minmax(0, 760px) auto; align-items: end; justify-content: space-between; gap: 14px 40px; }
body.lp-page .lp-sec .lp-head--split > .lp-head__text { display: grid; gap: 14px; }
body.lp-page .lp-sec .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--lp-fs-eyebrow)/1.2 var(--lp-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
body.lp-page .lp-sec .lp-eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-green); }
body.lp-page .lp-sec .lp-h2 { font-size: var(--lp-fs-h2); line-height: 1.12; font-weight: 700; color: var(--fg); }
body.lp-page .lp-sec .lp-lead { font-size: var(--lp-fs-lead); line-height: 1.6; color: var(--muted); max-width: 62ch; }
body.lp-page .lp-sec .lp-text { color: var(--muted); max-width: 62ch; }
/* Rich text from the WPBakery editor (About): paragraphs, lists, bold, links. */
body.lp-page .lp-sec .lp-rich > * + * { margin-top: .9em; }
body.lp-page .lp-sec .lp-rich :is(ul, ol) { padding-left: 1.25em; }
body.lp-page .lp-sec .lp-rich ul > li { list-style: disc !important; } /* beats the list reset above */
body.lp-page .lp-sec .lp-rich ol > li { list-style: decimal !important; }
body.lp-page .lp-sec .lp-rich strong { color: var(--fg); font-weight: 600; }
body.lp-page .lp-sec .lp-rich a { text-decoration: underline; }
body.lp-page .lp-sec .lp-h3 { font-size: var(--lp-fs-h3); line-height: 1.3; font-weight: 700; color: var(--fg); }

/* ===== 6. Components ========================================================================= */
/* Buttons: one family. Fill sweeps in from the left on hover. */
body.lp-page .lp-btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 999px; cursor: pointer; box-sizing: border-box;
  font: 600 .9375rem/1 var(--lp-display); letter-spacing: 0; text-decoration: none; white-space: nowrap;
  transition: color var(--lp-hover) var(--lp-ease), border-color var(--lp-hover) var(--lp-ease);
}
body.lp-page .lp-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-btn:is(:hover, :focus-visible)::before { transform: scaleX(1); }
body.lp-page .lp-sec .lp-btn--primary, body.lp-page .lp-btn--primary { background-color: var(--lp-blue); color: var(--lp-white); }
body.lp-page .lp-btn--primary::before { background-color: var(--lp-blue-2); }
body.lp-page .lp-sec .lp-btn--secondary { background-color: transparent; color: var(--lp-blue); border-color: var(--lp-blue); }
body.lp-page .lp-btn--secondary::before { background-color: var(--lp-blue); }
body.lp-page .lp-sec .lp-btn--secondary:is(:hover, :focus-visible) { color: var(--lp-white); }
body.lp-page .lp-sec .lp-btn--light { background-color: transparent; color: var(--lp-white); border-color: rgba(255, 255, 255, .6); }
body.lp-page .lp-btn--light::before { background-color: var(--lp-white); }
body.lp-page .lp-sec .lp-btn--light:is(:hover, :focus-visible) { color: var(--lp-navy); border-color: var(--lp-white); }
body.lp-page .lp-sec .lp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Text link with arrow. */
body.lp-page .lp-sec .lp-link { display: inline-flex; align-items: center; gap: 6px; font: 600 .9375rem/1.3 var(--lp-display); color: var(--link); text-decoration: none; }
body.lp-page .lp-sec .lp-link::after { content: "→"; transition: transform var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-link:is(:hover, :focus-visible)::after { transform: translateX(4px); }
body.lp-page .lp-sec .lp-link:is(:hover, :focus-visible) { text-decoration: underline; }
/* Focus: one visible ring everywhere. */
body.lp-page :is(.lp-sec, .lp-footer) :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
body.lp-page .lp-sec .lp-btn:focus-visible { outline-offset: 4px; }
/* Icon: one line-icon style, green on a mist circle. */
body.lp-page .lp-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-mist); }
body.lp-page .lp-navy .lp-icon { background: rgba(95, 224, 182, .12); }
body.lp-page .lp-icon svg, body.lp-page .lp-ico { width: 24px; height: 24px; fill: none; stroke: var(--lp-green-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
body.lp-page .lp-navy .lp-icon svg { stroke: var(--lp-green-light); }
/* Card: one card. */
body.lp-page .lp-sec .lp-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 32px); background: var(--card); border: 1px solid var(--card-line); border-radius: var(--lp-radius); box-sizing: border-box; transition: transform var(--lp-hover) var(--lp-ease), box-shadow var(--lp-hover) var(--lp-ease), border-color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-card p { color: var(--muted); }
body.lp-page .lp-sec .lp-card .lp-link { margin-top: auto; }
@media (hover: hover) {
  body.lp-page .lp-sec .lp-card--lift:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: var(--lp-shadow); border-color: var(--lp-blue); }
  body.lp-page .lp-navy .lp-card--lift:is(:hover, :focus-within) { border-color: var(--lp-green-light); box-shadow: none; }
}
/* Grids. */
body.lp-page .lp-sec .lp-grid { display: grid; gap: var(--lp-gap); }
body.lp-page .lp-sec .lp-grid--1 { grid-template-columns: minmax(0, 1fr); }
body.lp-page .lp-sec .lp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.lp-page .lp-sec .lp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.lp-page .lp-sec .lp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.lp-page .lp-sec .lp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
/* Tag chips. */
body.lp-page .lp-sec .lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.lp-page .lp-sec .lp-chips li { padding: 8px 14px; border: 1px solid var(--card-line); border-radius: 999px; font: 600 .8125rem/1.2 var(--lp-display); color: var(--fg); background: var(--card); }

/* ===== 7. Hero ============================================================================== */
body.lp-page .lp-sec--hero { padding: 0; }
body.lp-page .lp-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(560px, 88svh, 900px); padding-top: var(--lp-header); padding-bottom: clamp(140px, 14vw, 180px); background: var(--lp-navy); color: var(--lp-on-dark); box-sizing: border-box; }
body.lp-page .lp-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* The photo always covers the hero. !important: Salient's `.row .col img:not([srcset]) { width: auto }` (0,3,1)
   otherwise sizes it from its height, leaving it narrower than wide screens and pinned to the left. */
body.lp-page .lp-hero__media img { position: absolute; left: 0; top: 0; display: block; width: 100% !important; height: 115% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover; object-position: var(--lp-focus, 60% 50%); }
body.lp-page .lp-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 26, 58, .92) 0%, rgba(6, 26, 58, .72) 45%, rgba(6, 26, 58, .25) 100%), linear-gradient(0deg, rgba(6, 26, 58, .65) 0%, rgba(6, 26, 58, 0) 45%); }
body.lp-page .lp-hero__body { display: grid; gap: 22px; }
body.lp-page .lp-sec .lp-hero__title { font-size: var(--lp-fs-h1); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; color: var(--lp-on-dark); max-width: 13ch; }
body.lp-page .lp-sec .lp-hero__lead { font-size: var(--lp-fs-lead); line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 40ch; }
body.lp-page .lp-hero .lp-eyebrow { color: var(--lp-green-light); }
body.lp-page .lp-hero .lp-actions { margin-top: 10px; }
body.lp-page .lp-sec--hero-solo .lp-hero { padding-bottom: clamp(72px, 9vw, 120px); } /* no cards overlapping the bottom edge */
/* Four promise cards straddle the hero's bottom edge (their four slider messages). */
body.lp-page .lp-promises { position: relative; z-index: 2; margin-top: calc(-1 * clamp(96px, 10vw, 120px)); padding-bottom: clamp(56px, 7vw, 88px); }
body.lp-page .lp-sec .lp-promises .lp-card { box-shadow: 0 24px 48px -28px rgba(6, 26, 58, .45); }
body.lp-page .lp-sec .lp-promises .lp-h3 { font-size: 1.125rem; }
body.lp-page .lp-sec .lp-promises p { font-size: .9375rem; line-height: 1.55; }

/* ===== 8. Brands (logo marquee) ============================================================== */
body.lp-page .lp-brands .lp-head { margin-bottom: 32px; }
body.lp-page .lp-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
body.lp-page .lp-marquee__track { display: flex; width: max-content; animation: lp-marquee 48s linear infinite; }
body.lp-page .lp-sec .lp-marquee__list { display: flex; flex: none; align-items: center; gap: clamp(48px, 6vw, 96px); padding-inline: clamp(24px, 3vw, 48px); }
body.lp-page .lp-sec .lp-marquee__list li { display: flex; align-items: center; height: 72px; }
body.lp-page .lp-sec .lp-marquee__list img { display: block; width: auto; height: auto; max-height: 64px; max-width: 150px; opacity: .72; filter: grayscale(1); transition: opacity var(--lp-hover) var(--lp-ease), filter var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-marquee__list img.is-wide { max-height: 40px; max-width: 190px; }
body.lp-page .lp-sec .lp-marquee__list li:hover img { opacity: 1; filter: none; }
body.lp-page .lp-marquee:is(:hover, :focus-within) .lp-marquee__track,
body.lp-page .lp-marquee.is-paused .lp-marquee__track { animation-play-state: paused; }
body.lp-page .lp-sec .lp-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--lp-line); border-radius: 999px; background: var(--lp-white); color: var(--lp-ink); font: 600 .8125rem/1 var(--lp-display); cursor: pointer; }
body.lp-page .lp-sec .lp-pause:hover { border-color: var(--lp-blue); color: var(--lp-blue); }
@keyframes lp-marquee { to { transform: translateX(-50%); } }

/* ===== 9. About ============================================================================== */
body.lp-page .lp-about__text { display: grid; gap: 18px; position: sticky; top: calc(var(--lp-header) + 24px); }
body.lp-page .lp-about__text .lp-head { margin-bottom: 4px; }
body.lp-page .lp-sec .lp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-gap); }
body.lp-page .lp-sec .lp-fact { gap: 8px; min-height: 196px; justify-content: flex-end; }
body.lp-page .lp-sec .lp-fact__num { font: 800 clamp(3rem, 2.2rem + 3vw, 4.5rem)/1 var(--lp-display); letter-spacing: -.03em; color: var(--lp-blue); font-variant-numeric: tabular-nums; }
body.lp-page .lp-sec .lp-fact__label { font: 700 1.0625rem/1.3 var(--lp-display); color: var(--fg); }
body.lp-page .lp-sec .lp-fact p { font-size: .9375rem; line-height: 1.5; }

/* ===== 10. Sourcing film ====================================================================== */
body.lp-page .lp-sec .lp-film { position: relative; margin-inline: auto; width: 100%; max-width: calc(var(--lp-max) + 2 * var(--lp-gutter)); padding-inline: var(--lp-gutter); box-sizing: border-box; }
body.lp-page .lp-film__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--lp-radius); background: #DCDDDF; transform-origin: center center; will-change: transform; }
body.lp-page .lp-film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
body.lp-page .lp-film__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--lp-navy); color: var(--lp-white); font: 600 .9375rem/1 var(--lp-display); cursor: pointer; box-shadow: var(--lp-shadow); transition: background-color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-film__play:hover { background: var(--lp-blue); }
body.lp-page .lp-film__play svg { width: 16px; height: 16px; fill: currentColor; }
body.lp-page .lp-film__play[hidden] { display: none; }
body.lp-page .lp-film__caption { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; color: var(--muted); font-size: var(--lp-fs-small); }
/* Caption + link under the video as a navy call-to-action band (user, 2026-10-06): attached to the frame as a card
   on phones/static; full width and closing the section once the frame has grown to full width on desktop. */
body.lp-page .lp-sec .lp-film__caption { margin-top: 0; gap: 16px 32px; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px); border-radius: 0 0 var(--lp-radius) var(--lp-radius); background: var(--lp-navy); color: var(--lp-white); }
body.lp-page .lp-film:not(.is-live) .lp-film__frame:has(+ .lp-film__caption) { border-radius: var(--lp-radius) var(--lp-radius) 0 0; }
body.lp-page .lp-sec .lp-film__caption > span { max-width: 44ch; font: 600 clamp(1.125rem, .95rem + .8vw, 1.5rem)/1.35 var(--lp-display); letter-spacing: -.01em; text-wrap: balance; }
body.lp-page .lp-sec .lp-film__caption .lp-link { min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--lp-white); color: var(--lp-navy); transition: background-color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-film__caption .lp-link:is(:hover, :focus-visible) { background: var(--lp-green-light); text-decoration: none; }
body.lp-page .lp-sec .lp-film__caption .lp-link:focus-visible { outline: 2px solid var(--lp-green-light); outline-offset: 3px; }
/* Desktop expand (S2): JS scales the frame from .72 → 1 and lets it break out of the container. */
body.lp-page .lp-sec .lp-film.is-live { max-width: none; padding-inline: 0; }
body.lp-page .lp-sec .lp-film.is-live .lp-film__caption { padding-block: clamp(32px, 4vw, 56px); padding-inline: max(var(--lp-gutter), calc((100% - var(--lp-max)) / 2)); border-radius: 0; box-sizing: border-box; }
body.lp-page .lp-sec:has(> .lp-film.is-live > .lp-film__caption) { padding-bottom: 0; } /* the band ends the section */

/* ===== 11. Services (Leap Cards element) ======================================================= */
body.lp-page .lp-sec .lp-cardgrid .lp-card { gap: 12px; }
body.lp-page .lp-sec .lp-cardgrid .lp-card p { font-size: .96875rem; line-height: 1.6; }

/* ===== 12. How we work (pinned track on desktop, vertical timeline on mobile) ================ */
body.lp-page .lp-process { overflow: hidden; }
body.lp-page .lp-process__viewport { position: relative; }
body.lp-page .lp-sec .lp-process__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--lp-gap); counter-reset: none; }
body.lp-page .lp-process__step { position: relative; display: grid; gap: 12px; align-content: start; }
body.lp-page .lp-process__marker { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--lp-line-dark); background: var(--lp-navy); transition: background-color .4s var(--lp-ease), border-color .4s var(--lp-ease); }
body.lp-page .lp-process__marker svg { width: 22px; height: 22px; fill: none; stroke: var(--lp-on-dark-muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--lp-ease); }
body.lp-page .lp-sec .lp-process__num { font: 600 var(--lp-fs-eyebrow)/1 var(--lp-display); letter-spacing: .12em; color: var(--lp-green-light); }
body.lp-page .lp-sec .lp-process__step p { color: var(--muted); font-size: .96875rem; line-height: 1.6; max-width: 34ch; }
body.lp-page .lp-process__step.is-active .lp-process__marker { background: var(--lp-green); border-color: var(--lp-green); }
body.lp-page .lp-process__step.is-active .lp-process__marker svg { stroke: var(--lp-navy); }
body.lp-page .lp-process__marker-n { font: 700 1rem/1 var(--lp-display); color: var(--lp-on-dark-muted); transition: color .4s var(--lp-ease); } /* step without an icon */
body.lp-page .lp-process__step.is-active .lp-process__marker-n { color: var(--lp-navy); }
body.lp-page .lp-process__line { display: none; position: absolute; pointer-events: none; overflow: visible; }
body.lp-page .lp-process__line line { stroke-width: 2; vector-effect: non-scaling-stroke; }
body.lp-page .lp-process__line-bg { stroke: var(--lp-line-dark); }
body.lp-page .lp-process__line-fg { stroke: var(--lp-green); }
/* JS-live states */
body.lp-page .lp-process.is-pinned .lp-process__viewport { overflow: visible; }
body.lp-page .lp-process.is-pinned .lp-process__track { position: relative; width: max-content; padding-top: 0; }
body.lp-page .lp-sec.lp-process.is-pinned .lp-process__steps { display: flex; gap: clamp(32px, 4vw, 64px); }
body.lp-page .lp-process.is-pinned .lp-process__step { width: clamp(240px, 24vw, 320px); flex: none; }
body.lp-page .lp-process.is-pinned .lp-process__line--h { display: block; left: 26px; top: 25px; height: 4px; width: calc(100% - 52px); } /* svg is a replaced element: left/right alone would not stretch it */
body.lp-page .lp-sec.lp-process.is-pinned { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; box-sizing: border-box; padding-block: calc(var(--lp-header) + 16px) 48px; }
body.lp-page .lp-process.is-pinned .lp-head { margin-bottom: clamp(32px, 4vh, 48px); }

/* ===== 12b. How we work: T-shirt made as you scroll (Leap Steps, layout "build"; leap.js holds + plays it) ===
   Static (no JS / editor / reduced motion): every step listed, the drawing shows the finished, inspected shirt. */
body.lp-page .lp-build__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
body.lp-page .lp-build__text { display: grid; gap: 18px; align-content: center; min-width: 0; }
body.lp-page .lp-sec.lp-build .lp-head { margin-bottom: 4px; }
body.lp-page .lp-build__meter { display: none; gap: 8px; max-width: 380px; }
body.lp-page .lp-build__bar { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
body.lp-page .lp-build__bar > span { display: block; height: 100%; background: var(--lp-green); transform-origin: left center; transform: scaleX(0); }
body.lp-page .lp-sec .lp-build__count { font: 600 var(--lp-fs-small)/1.3 var(--lp-display); color: var(--lp-green-light); font-variant-numeric: tabular-nums; }
body.lp-page .lp-build__dots { display: none; gap: 6px; }
body.lp-page .lp-build__dots i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); transition: background-color .3s; }
body.lp-page .lp-build__dots i.is-on { background: var(--lp-green); }
body.lp-page .lp-sec .lp-build__steps { display: grid; gap: 4px; }
body.lp-page .lp-sec .lp-build__step button { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 14px; align-items: center; margin: 0; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--lp-white); text-align: left; text-transform: none; letter-spacing: 0; font: inherit; cursor: default; transition: background-color .25s var(--lp-ease), color .25s var(--lp-ease); }
body.lp-page .lp-build__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); box-sizing: border-box; font: 700 .75rem/1 var(--lp-display); color: var(--lp-green-light); transition: background-color .3s, border-color .3s, color .3s; }
body.lp-page .lp-build__mark svg { display: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.lp-page .lp-sec .lp-build__title { font: 600 .9375rem/1.3 var(--lp-display); }
body.lp-page .lp-sec .lp-build__desc { grid-column: 2; font-size: .875rem; line-height: 1.55; color: var(--lp-on-dark-muted); }
body.lp-page .lp-sec .lp-build__art { margin: 0; min-width: 0; }
body.lp-page .lp-build__svg { display: block; width: 100%; height: auto; max-height: 62vh; overflow: visible; }
body.lp-page .lp-build__t { font-family: var(--lp-display); }
body.lp-page .lp-build__svg--flow { font-family: var(--lp-body); } /* v2 scene (2026-10-16): body text, bold labels in the display face */
body.lp-page .lp-build__svg--flow text:is([font-weight="700"], [font-weight="800"]) { font-family: var(--lp-display); }
/* Live (held while it plays) */
/* Progress bar + "Step n of 6" text not shown (user, 2026-10-06): the highlighted step already says where you are. */
body.lp-page .lp-sec.lp-build.is-live .lp-build__step button { color: var(--lp-on-dark-muted); cursor: pointer; }
body.lp-page .lp-sec.lp-build.is-live .lp-build__step button:hover { background: rgba(255, 255, 255, .05); }
body.lp-page .lp-sec.lp-build.is-live .lp-build__desc { display: none; }
body.lp-page .lp-build.is-live .lp-build__mark { color: var(--lp-on-dark-muted); }
body.lp-page .lp-sec.lp-build.is-live .lp-build__step.is-done button { color: var(--lp-white); }
body.lp-page .lp-build.is-live .lp-build__step.is-done .lp-build__mark { background: var(--lp-green); border-color: var(--lp-green); color: var(--lp-navy); }
body.lp-page .lp-build.is-live .lp-build__step.is-done .lp-build__mark svg { display: block; }
body.lp-page .lp-build.is-live .lp-build__step.is-done .lp-build__mark b { display: none; }
body.lp-page .lp-sec.lp-build.is-live .lp-build__step.is-now button { background: rgba(255, 255, 255, .07); color: var(--lp-white); }
body.lp-page .lp-build.is-live .lp-build__step.is-now:not(.is-done) .lp-build__mark { border-color: var(--lp-green-light); color: var(--lp-green-light); }
body.lp-page .lp-sec.lp-build.is-live .lp-build__step.is-now .lp-build__desc { display: block; }
/* Held: fills the full screen (100vh, so no gap shows when a phone's address bar hides), while the content is
   centred in the part visible with the bar showing (the bottom padding adds 100vh − 100svh). leap.js reads
   --lp-hold-pb to check the content fits (see §12c). */
body.lp-page .lp-sec.lp-build.is-pinned,
body.lp-page .lp-sec.lp-loop.is-pinned { --lp-hold-pt: calc(var(--lp-header) + 16px); --lp-hold-pb: 32px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-block: var(--lp-hold-pt) calc(var(--lp-hold-pb) + var(--lp-cue, 0px) + 100vh - var(--lp-screen)); }

/* Held sections: "Scroll to continue" cue (leap.js holdCue) and the moving step rail of "How we work" (stepRail).
   Client feedback 2026-10-14: while a section was held the page looked finished; now the steps slide up with the scroll
   and a cue with a filling bar sits at the foot. The cue's room (--lp-cue) is part of the fit check. */
body.lp-page.lp-v2 .lp-sec.is-pinned:has(> .lp-hold-cue) { --lp-cue: 52px; }
body.lp-page.lp-v2 .lp-sec.is-pinned.lp-cue-off { --lp-cue: 0px; } /* very short screens: no room for the cue */
body.lp-page .lp-cue-off > .lp-hold-cue { display: none; }
body.lp-page .lp-hold-cue { position: absolute; left: 50%; bottom: calc(14px + 100vh - var(--lp-screen)); z-index: 2; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--lp-line); border-radius: 999px; background: var(--lp-white); color: var(--lp-ink); font: 600 .8125rem/1 var(--lp-display); white-space: nowrap; transform: translateX(-50%); pointer-events: none; transition: opacity .35s var(--lp-ease), transform .35s var(--lp-ease); }
body.lp-page .lp-navy > .lp-hold-cue { border-color: var(--lp-line-dark); background: rgba(255, 255, 255, .06); color: var(--lp-on-dark); }
body.lp-page .lp-hold-cue.is-end { opacity: 0; transform: translate(-50%, 8px); }
body.lp-page .lp-hold-cue__mouse { position: relative; width: 14px; height: 21px; border: 1.5px solid currentColor; border-radius: 8px; box-sizing: border-box; opacity: .8; }
body.lp-page .lp-hold-cue__mouse::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: var(--lp-green); animation: lp-cue-wheel 1.4s ease-in-out infinite; }
body.lp-page .lp-hold-cue__bar { display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--lp-line); overflow: hidden; }
body.lp-page .lp-navy > .lp-hold-cue .lp-hold-cue__bar { background: rgba(255, 255, 255, .16); }
body.lp-page .lp-hold-cue__bar > span { display: block; height: 100%; background: var(--lp-green); transform: scaleX(0); transform-origin: left center; }
@keyframes lp-cue-wheel { 0% { opacity: 0; transform: translateY(-2px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }
body.lp-page .lp-sec.lp-build.is-rail .lp-build__steps { position: relative; overflow: hidden; padding-block: 12px 24px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%); }
body.lp-page .lp-sec.lp-build.is-rail .lp-build__step { transform: translateY(var(--lp-rail-y, 0px)); transition: opacity .3s var(--lp-ease); }
body.lp-page .lp-sec.lp-build.is-rail .lp-build__step:not(.is-now) { opacity: .55; }
body.lp-page .lp-sec.lp-build.is-rail .lp-build__desc { display: block; }
@media (prefers-reduced-motion: reduce) { body.lp-page .lp-hold-cue__mouse::after { animation: none; } }

/* ===== 13. Products ========================================================================== */
body.lp-page .lp-sec .lp-products__intro { display: grid; gap: 18px; max-width: 62ch; }
body.lp-page .lp-rail { position: relative; margin-block: clamp(40px, 5vw, 56px); }
body.lp-page .lp-sec .lp-rail__list { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 280px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lp-gutter); padding-inline: var(--lp-gutter); padding-bottom: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
body.lp-page .lp-rail__list::-webkit-scrollbar { display: none; }
body.lp-page .lp-sec .lp-rail__item { scroll-snap-align: start; aspect-ratio: 1; border-radius: var(--lp-radius); background: #E8E8E8; overflow: hidden; }
body.lp-page .lp-sec .lp-rail__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--lp-ease); }
@media (hover: hover) { body.lp-page .lp-sec .lp-rail__item:hover img { transform: scale(1.05); } }
body.lp-page .lp-rail__nav { display: flex; gap: 8px; }
body.lp-page .lp-sec .lp-rail__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--lp-line); background: var(--lp-white); color: var(--lp-ink); cursor: pointer; transition: border-color var(--lp-hover) var(--lp-ease), color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-rail__btn:hover:not(:disabled) { border-color: var(--lp-blue); color: var(--lp-blue); }
body.lp-page .lp-sec .lp-rail__btn:disabled { opacity: .4; cursor: default; }
body.lp-page .lp-rail__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.lp-page .lp-sec .lp-catalogues .lp-card { gap: 12px; }

/* ===== 14. Sustainability ===================================================================== */
body.lp-page .lp-sustain { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 40px); }
body.lp-page .lp-sustain__thread { position: relative; width: 56px; }
body.lp-page .lp-sustain__thread svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.lp-page .lp-sustain__thread path { fill: none; stroke: var(--lp-green); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
body.lp-page .lp-sustain__thread .lp-thread-bg { stroke: rgba(0, 122, 85, .18); stroke-dasharray: 6 6; }
body.lp-page .lp-sec .lp-practices { display: grid; gap: 16px; }
body.lp-page .lp-sec .lp-practice { flex-direction: row; align-items: flex-start; gap: 20px; }
body.lp-page .lp-sec .lp-practice > div { display: grid; gap: 6px; }
body.lp-page .lp-sec .lp-sustain-foot { margin-top: 32px; padding-left: calc(56px + clamp(16px, 3vw, 40px)); }

/* ===== 14b. Sustainability loop (Leap Practices, layout "loop"; leap.js holds + plays it) ============
   Static (no JS / editor / reduced motion): the loop drawn in full, every stop lit, every card listed. */
body.lp-page .lp-loop__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
body.lp-page .lp-loop__text { display: grid; gap: 20px; align-content: center; min-width: 0; }
body.lp-page .lp-sec.lp-loop .lp-head { margin-bottom: 0; }
body.lp-page .lp-loop__meter { display: none; gap: 8px; max-width: 360px; }
body.lp-page .lp-loop__bar { display: block; height: 6px; border-radius: 6px; background: #D5EEE5; overflow: hidden; }
body.lp-page .lp-loop__bar > span { display: block; height: 100%; background: var(--lp-green); transform-origin: left center; }
body.lp-page .lp-sec .lp-loop__count { font: 600 var(--lp-fs-small)/1.3 var(--lp-display); color: var(--lp-green-ink); font-variant-numeric: tabular-nums; }
body.lp-page .lp-sec .lp-loop__cards { display: grid; gap: 12px; }
body.lp-page .lp-sec .lp-loop__card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 20px 22px; }
body.lp-page .lp-sec .lp-loop__card > .lp-icon { grid-row: span 3; }
body.lp-page .lp-sec .lp-loop__card > :not(.lp-icon) { grid-column: 2; }
body.lp-page .lp-sec .lp-loop__card .lp-loop__step { font: 600 var(--lp-fs-eyebrow)/1.3 var(--lp-display); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-green-ink); }
body.lp-page .lp-sec .lp-loop__card p:not(.lp-loop__step) { font-size: .9375rem; line-height: 1.55; }
body.lp-page .lp-sec .lp-loop__art { margin: 0; display: grid; gap: 14px; min-width: 0; }
body.lp-page .lp-loop__canvas { position: relative; }
body.lp-page .lp-loop__svg { display: block; width: 100%; height: auto; overflow: visible; }
body.lp-page .lp-loop__track { fill: none; stroke: #8FD3BC; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 8; }
body.lp-page .lp-loop__prog { fill: none; stroke: var(--lp-green); stroke-width: 4.5; stroke-linecap: round; }
body.lp-page .lp-loop__head { fill: var(--lp-blue); stroke: var(--lp-white); stroke-width: 3; opacity: 0; }
body.lp-page .lp-sec .lp-loop__stop { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 1; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer; }
body.lp-page .lp-sec .lp-loop__dot { display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; background: var(--lp-white); border: 2px solid #CFE9DF; color: #93A9BF; transition: background-color .35s var(--lp-ease), border-color .35s var(--lp-ease), color .35s var(--lp-ease), transform .45s cubic-bezier(.34, 1.56, .64, 1); }
body.lp-page .lp-loop__dot svg,
body.lp-page .lp-loop__leaf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body.lp-page .lp-loop__stop.is-on .lp-loop__dot { background: var(--lp-green); border-color: var(--lp-green); color: var(--lp-white); transform: scale(1.08); }
body.lp-page .lp-loop__stop:is(:hover, :focus-visible) .lp-loop__dot { border-color: var(--lp-blue); }
body.lp-page .lp-sec .lp-loop__stop:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 4px; }
body.lp-page .lp-sec .lp-loop__label { position: absolute; white-space: nowrap; font: 600 .8125rem/1 var(--lp-display); color: #7A8FA6; pointer-events: none; transition: color .35s var(--lp-ease); }
body.lp-page .lp-sec .lp-loop__stop.is-on .lp-loop__label { color: var(--lp-ink); }
body.lp-page .lp-loop__stop.is-above .lp-loop__label { bottom: calc(100% + 8px); left: 50%; translate: -50% 0; }
body.lp-page .lp-loop__stop.is-below .lp-loop__label { top: calc(100% + 8px); left: 50%; translate: -50% 0; }
body.lp-page .lp-loop__stop.is-right .lp-loop__label { left: calc(100% + 10px); top: 50%; translate: 0 -50%; }
body.lp-page .lp-loop__stop.is-left .lp-loop__label { right: calc(100% + 10px); top: 50%; translate: 0 -50%; }
body.lp-page .lp-sec .lp-loop__leaf { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%; background: var(--lp-white); border: 2px solid var(--lp-green); color: var(--lp-green-ink); opacity: 0; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
body.lp-page .lp-loop__leaf.is-on { opacity: 1; transform: none; }
body.lp-page .lp-sec .lp-loop__done { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--lp-white); color: var(--lp-green-ink); font: 700 .8125rem/1.25 var(--lp-display); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
body.lp-page .lp-loop__done.is-on { opacity: 1; transform: none; }
body.lp-page .lp-loop__done svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Static on wide screens: the drawing stays in view beside the long list. */
@media (min-width: 768px) {
  body.lp-page .lp-sec.lp-loop:not(.is-live) .lp-loop__art,
  body.lp-page .lp-sec.lp-build:not(.is-live) .lp-build__art { position: sticky; top: calc(var(--lp-header) + 24px); align-self: start; }
}
/* Live (held while it plays): one card at a time, meter on. */
/* Progress bar + "n of 5 practices" text not shown (user, 2026-10-06): the card already shows the practice. */
body.lp-page .lp-sec.lp-loop.is-live .lp-loop__card { display: none; }
body.lp-page .lp-sec.lp-loop.is-live .lp-loop__card.is-active { display: grid; animation: lp-card-in .45s var(--lp-ease); }
@keyframes lp-card-in { from { opacity: .2; transform: translateY(8px); } }

/* ===== 12c. Held sections fit the screen (How we work + Sustainability) ======================
   leap.js measures every state of a held section and adds the fewest of lp-fit-1 … lp-fit-3 it needs so
   the whole section shows on the visible screen (each level keeps the one before). A tall screen gets
   none of them: the full design. Only when even level 3 does not fit does the section stay static. */
@media (min-width: 768px) {
  body.lp-page .lp-sec.is-pinned.lp-fit-1 { --lp-hold-pt: calc(var(--lp-header) + 8px); --lp-hold-pb: 16px; }
  body.lp-page .lp-sec.is-pinned.lp-fit-1 .lp-head { gap: 10px; }
  body.lp-page .lp-sec.is-pinned.lp-fit-1 .lp-h2 { font-size: min(var(--lp-fs-h2), calc(var(--lp-screen) * .05)); }
  body.lp-page .lp-sec.is-pinned.lp-fit-1 .lp-lead { font-size: .9375rem; line-height: 1.5; }
  body.lp-page .lp-sec.is-pinned.lp-fit-1 :is(.lp-build__text, .lp-loop__text) { gap: 12px; }
  body.lp-page .lp-sec.lp-build.is-pinned.lp-fit-1 .lp-build__step button { padding-block: 6px; }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-1 .lp-loop__card { padding: 16px 18px; }
  /* the loop keeps its proportions, so it is narrowed until it fits the height left for it */
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-1 .lp-loop__canvas { justify-self: center; width: min(100%, calc((var(--lp-screen) - var(--lp-hold-pt) - var(--lp-hold-pb) - 64px) * 5 / 3)); }
  body.lp-page .lp-sec.lp-build.is-pinned.lp-fit-1 .lp-build__svg { max-height: calc(var(--lp-screen) - var(--lp-hold-pt) - var(--lp-hold-pb)); }

  body.lp-page .lp-sec.is-pinned.lp-fit-2 :is(.lp-lead, .lp-loop__more) { display: none; }
  body.lp-page .lp-sec.is-pinned.lp-fit-2 .lp-h2 { font-size: min(var(--lp-fs-h2), calc(var(--lp-screen) * .044)); }
  body.lp-page .lp-sec.lp-build.is-pinned.lp-fit-2 .lp-build__step button { grid-template-columns: 28px minmax(0, 1fr); padding-block: 4px; }
  body.lp-page .lp-sec.lp-build.is-pinned.lp-fit-2 .lp-build__mark { width: 28px; height: 28px; }
  body.lp-page .lp-sec.is-pinned.lp-fit-2 :is(.lp-build__desc, .lp-loop__card p:not(.lp-loop__step)) { font-size: .8125rem; line-height: 1.5; }

  body.lp-page .lp-sec.is-pinned.lp-fit-3 .lp-eyebrow,
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-3 :is(.lp-loop__done, .lp-loop__card > .lp-icon) { display: none; }
  body.lp-page .lp-sec.is-pinned.lp-fit-3 .lp-h2 { font-size: min(var(--lp-fs-h2), calc(var(--lp-screen) * .04)); }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-3 .lp-loop__card { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-3 .lp-loop__card > :not(.lp-icon) { grid-column: 1; }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-3 .lp-loop__canvas { width: min(100%, calc((var(--lp-screen) - var(--lp-hold-pt) - var(--lp-hold-pb) - 16px) * 5 / 3)); }
}
@media (max-width: 767px) {
  body.lp-page .lp-sec.is-pinned.lp-fit-1 { --lp-hold-pt: calc(var(--lp-header) + 4px); --lp-hold-pb: 12px; }
  body.lp-page .lp-sec.is-pinned.lp-fit-1 .lp-eyebrow,
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-1 :is(.lp-loop__done, .lp-loop__card > .lp-icon) { display: none; } /* the practice's icon is on its stop just above */
  body.lp-page .lp-sec.is-pinned.lp-fit-1 .lp-head .lp-h2 { font-size: 1.25rem; } /* .lp-head: outranks the phone size under "Responsive" */
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-1 .lp-loop__card { grid-template-columns: minmax(0, 1fr); }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-1 .lp-loop__card > :not(.lp-icon) { grid-column: 1; }
  body.lp-page .lp-sec.lp-build.is-pinned.lp-fit-1 .lp-build__svg { max-height: calc(var(--lp-screen) * .3); }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-1 .lp-loop__canvas { justify-self: center; width: min(100%, calc(var(--lp-screen) * .3 * 5 / 3)); }

  body.lp-page .lp-sec.is-pinned.lp-fit-2 :is(.lp-build__grid, .lp-loop__grid) { gap: 10px; }
  body.lp-page .lp-sec.is-pinned.lp-fit-2 :is(.lp-build__text, .lp-loop__text) { gap: 8px; }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-2 .lp-loop__card { padding: 12px 14px; }
  body.lp-page .lp-sec.is-pinned.lp-fit-2 :is(.lp-build__desc, .lp-loop__card p:not(.lp-loop__step)) { font-size: .8125rem; line-height: 1.5; }
  body.lp-page .lp-sec.lp-build.is-pinned.lp-fit-2 .lp-build__svg { max-height: calc(var(--lp-screen) * .24); }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-2 .lp-loop__canvas { width: min(100%, calc(var(--lp-screen) * .24 * 5 / 3)); }

  body.lp-page .lp-sec.is-pinned.lp-fit-3 .lp-head .lp-h2 { font-size: 1.125rem; }
  body.lp-page .lp-sec.lp-build.is-pinned.lp-fit-3 .lp-build__svg { max-height: calc(var(--lp-screen) * .2); }
  body.lp-page .lp-sec.lp-loop.is-pinned.lp-fit-3 .lp-loop__canvas { width: min(100%, calc(var(--lp-screen) * .2 * 5 / 3)); }
}

/* ===== 15. Team ============================================================================== */
body.lp-page .lp-sec .lp-team { gap: 40px var(--lp-gap); }
body.lp-page .lp-sec .lp-person { display: grid; gap: 14px; align-content: start; }
body.lp-page .lp-sec .lp-person__photo { aspect-ratio: 1; overflow: hidden; border-radius: 0 0 var(--lp-radius) var(--lp-radius); }
body.lp-page .lp-sec .lp-person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center bottom; transition: transform .5s var(--lp-ease); }
@media (hover: hover) { body.lp-page .lp-sec .lp-person:hover .lp-person__photo img { transform: scale(1.04); } }
body.lp-page .lp-sec .lp-person__photo--empty { display: grid; place-items: center; background: var(--lp-mist); color: var(--lp-green-ink); font: 700 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--lp-display); letter-spacing: -.02em; } /* person without a photo: initials */
body.lp-page .lp-sec .lp-person__name { font: 700 1.0625rem/1.3 var(--lp-display); color: var(--fg); }
body.lp-page .lp-sec .lp-person__role { font-size: .9375rem; color: var(--muted); }
body.lp-page .lp-sec .lp-person--cta { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--lp-radius); background: var(--lp-blue); color: var(--lp-white); aspect-ratio: 1; box-sizing: border-box; }
body.lp-page .lp-sec .lp-person--cta .lp-h3 { color: var(--lp-white); }
body.lp-page .lp-sec .lp-person--cta p { color: rgba(255, 255, 255, .85); font-size: .9375rem; }
body.lp-page .lp-sec .lp-person--cta .lp-btn--light { align-self: flex-start; }

/* ===== 16. Locations (map) ==================================================================== */
body.lp-page .lp-locations { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
body.lp-page .lp-sec .lp-locations .lp-head { margin-bottom: 28px; }
body.lp-page .lp-sec .lp-h2 .lp-count { color: var(--lp-green-light); }
body.lp-page .lp-sec .lp-offices { display: grid; gap: 12px; }
body.lp-page .lp-sec .lp-office { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; width: 100%; padding: 16px 18px; border: 1px solid var(--card-line); border-radius: var(--lp-radius-sm); background: var(--card); color: var(--fg); text-align: left; cursor: pointer; font: inherit; transition: border-color var(--lp-hover) var(--lp-ease), background-color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-office .lp-dot { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--lp-green); box-shadow: 0 0 0 4px rgba(0, 176, 120, .2); }
body.lp-page .lp-sec .lp-office strong { font: 700 1rem/1.3 var(--lp-display); }
body.lp-page .lp-sec .lp-office span:last-child { font-size: .875rem; color: var(--muted); }
body.lp-page .lp-sec .lp-office:is(:hover, .is-active) { border-color: var(--lp-green-light); background: rgba(95, 224, 182, .08); }
body.lp-page .lp-map { position: relative; margin: 0; }
body.lp-page .lp-map__canvas { position: relative; }
body.lp-page .lp-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
body.lp-page .lp-map__land { fill: none; stroke: var(--lp-on-dark); stroke-opacity: .22; stroke-width: 4.6; stroke-linecap: round; stroke-dasharray: 0 10; }
body.lp-page .lp-map__arc { fill: none; stroke: var(--lp-green-light); stroke-width: 2.5; stroke-linecap: round; opacity: .9; }
body.lp-page .lp-spot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 1; }
body.lp-page .lp-spot:is(:hover, :focus-within, .is-active) { z-index: 3; }
body.lp-page .lp-hotspot { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
body.lp-page .lp-hotspot__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--lp-green); border: 2px solid var(--lp-navy); box-shadow: 0 0 0 2px var(--lp-green); }
body.lp-page .lp-hotspot__pulse { position: absolute; inset: 6px; border-radius: 50%; background: var(--lp-green); opacity: 0; animation: lp-pulse 2.4s var(--lp-ease) infinite; }
body.lp-page .lp-spot--hq .lp-hotspot__dot { width: 18px; height: 18px; }
@keyframes lp-pulse { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }
/* .lp-sec in these selectors (tooltip, loop dot/leaf, practice label): the §3 reset `.lp-sec :is(…, p, span) { color: inherit }`
   otherwise outranks their colour (white text in a white tooltip, 2026-10-06). */
body.lp-page .lp-sec .lp-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; width: max-content; max-width: 220px; padding: 10px 12px; border-radius: 10px; background: var(--lp-white); color: var(--lp-ink); font: 500 .8125rem/1.35 var(--lp-body); box-shadow: var(--lp-shadow); opacity: 0; visibility: hidden; transition: opacity .2s var(--lp-ease), visibility .2s; pointer-events: none; }
body.lp-page .lp-tip strong { display: block; font: 700 .875rem/1.3 var(--lp-display); }
body.lp-page .lp-spot:is(:hover, :focus-within, .is-active) .lp-tip { opacity: 1; visibility: visible; }
body.lp-page .lp-map__caption { margin-top: 12px; font-size: .8125rem; color: var(--muted); }

/* ===== 17. Contact ============================================================================ */
/* Desktop: the form card stays in view while the offices scroll past, and stops at the last one (user, 2026-10-06).
   Only when the card fits the screen; the grid row ends with the office column, so that is where it stops. */
@media (min-width: 900px) and (min-height: 700px) {
  body.lp-page .lp-sec .lp-split > .lp-card:has(> [data-lp-form]) { position: sticky; top: calc(var(--lp-header) + 24px); }
}
body.lp-page .lp-sec .lp-contact__offices { display: grid; gap: 24px; margin-top: 8px; }
body.lp-page .lp-sec .lp-contact__office { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid var(--lp-line); }
body.lp-page .lp-sec .lp-contact__office h3 { font: 700 1.0625rem/1.3 var(--lp-display); }
body.lp-page .lp-sec .lp-contact__office .lp-role { font: 600 var(--lp-fs-eyebrow)/1.3 var(--lp-display); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-green-ink); }
body.lp-page .lp-sec .lp-contact__office address { font-style: normal; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
body.lp-page .lp-sec .lp-contact__office a { font-size: .9375rem; }
body.lp-page .lp-sec .lp-social { display: flex; flex-wrap: wrap; gap: 8px 18px; }
body.lp-page .lp-sec .lp-form { gap: 18px; }
body.lp-page .lp-sec .lp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
body.lp-page .lp-sec .lp-form__row--one { grid-template-columns: minmax(0, 1fr); }
body.lp-page .lp-sec .lp-field { display: grid; gap: 8px; }
body.lp-page .lp-sec .lp-field label { font: 600 .875rem/1.2 var(--lp-display); color: var(--lp-ink); text-transform: none; letter-spacing: 0; }
body.lp-page .lp-sec .lp-field label .lp-req { color: var(--lp-slate); font-weight: 500; }
/* Salient's form skin styles inputs globally; these win on this page. */
body.lp-page .lp-sec .lp-field :is(input, select, textarea) {
  width: 100%; box-sizing: border-box; min-height: 52px; margin: 0; padding: 14px 16px !important; border: 1px solid #C9D3E1 !important; border-radius: var(--lp-radius-sm) !important;
  background: var(--lp-white) !important; color: var(--lp-ink) !important; font: 400 1rem/1.4 var(--lp-body) !important; box-shadow: none !important; transition: border-color var(--lp-hover) var(--lp-ease), box-shadow var(--lp-hover) var(--lp-ease);
}
body.lp-page .lp-sec .lp-field textarea { min-height: 140px; resize: vertical; }
body.lp-page .lp-sec .lp-field select { appearance: none; -webkit-appearance: none; padding-right: 44px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 18px !important; }
body.lp-page .lp-sec .lp-field :is(input, select, textarea):focus { outline: none; border-color: var(--lp-green) !important; box-shadow: 0 0 0 4px rgba(0, 176, 120, .18) !important; }
body.lp-page .lp-sec .lp-field [aria-invalid="true"] { border-color: #B3261E !important; }
body.lp-page .lp-sec .lp-field__error { font-size: .8125rem; color: #B3261E; }
body.lp-page .lp-sec .lp-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
body.lp-page .lp-sec .lp-form__note { font-size: .8125rem; color: var(--lp-slate); }
body.lp-page .lp-sec button.lp-btn--primary { background-color: var(--lp-blue) !important; color: var(--lp-white) !important; border: 0 !important; border-radius: 999px !important; padding: 0 28px !important; box-shadow: none !important; font: 600 .9375rem/1 var(--lp-display) !important; letter-spacing: 0 !important; text-transform: none !important; } /* Salient's button skin uses !important */
body.lp-page .lp-sec .lp-form__done { display: grid; gap: 10px; padding: 20px; border-radius: var(--lp-radius-sm); background: var(--lp-mist); color: var(--lp-ink); }
body.lp-page .lp-sec .lp-form__done[hidden] { display: none; }
body.lp-page .lp-sec .lp-form__done strong { font: 700 1.0625rem/1.3 var(--lp-display); color: var(--lp-green-ink); }
body.lp-page .lp-sec .lp-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot: bots fill it, people never see it (2026-10-15) */
body.lp-page .lp-sec .lp-form__fail { padding: 16px 20px; border-radius: var(--lp-radius-sm); background: #FDECEC; color: #8A1F1F; }
body.lp-page .lp-sec .lp-form__fail[hidden] { display: none; }
body.lp-page .lp-sec .lp-form__fail p { margin: 0; color: inherit; }
body.lp-page .lp-sec .lp-form button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ===== 18. Footer (Leap Footer element, last row of the page) ================================== */
body.lp-page #footer-outer { background: var(--lp-navy) !important; padding: 0 !important; }
body.lp-page .lp-footer { background: var(--lp-navy); color: var(--lp-on-dark); padding-block: clamp(56px, 7vw, 80px) 28px; font-family: var(--lp-body); font-size: .9375rem; }
body.lp-page .lp-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--lp-line-dark); }
body.lp-page .lp-footer__brand { display: grid; gap: 18px; align-content: start; }
body.lp-page .lp-footer__logo { width: 140px !important; height: auto !important; margin: 0 !important; } /* footer sits in a WPBakery row: beat Salient's `.row .col img:not([srcset]) { width: auto }` */
body.lp-page .lp-footer p { margin: 0; padding: 0; color: var(--lp-on-dark-muted); max-width: 40ch; line-height: 1.6; }
body.lp-page .lp-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 40px; align-content: start; }
body.lp-page .lp-footer a { color: var(--lp-on-dark); text-decoration: none; }
body.lp-page .lp-footer a:hover { color: var(--lp-green-light); }
body.lp-page .lp-footer__contact { display: grid; gap: 10px; align-content: start; }
body.lp-page .lp-footer .lp-social { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0; padding: 0; list-style: none; }
body.lp-page .lp-footer .lp-social li { margin: 0; padding: 0; list-style: none; }
body.lp-page .lp-footer .lp-footer__legal p { max-width: none; }
body.lp-page .lp-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: .8125rem; }
body.lp-page .lp-footer__legal a { margin-left: 14px; color: var(--lp-on-dark-muted); }
body.lp-page .lp-footer__legal .lp-footer__top { margin-left: 0; color: var(--lp-on-dark); }
body.lp-page .lp-footer :is(a):focus-visible { outline: 2px solid var(--lp-green-light); outline-offset: 3px; }

/* ===== Responsive ============================================================================= */
@media (max-width: 1099px) {
  body.lp-page .lp-sec .lp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lp-page .lp-sec .lp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lp-page .lp-sec .lp-team.lp-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  body.lp-page .lp-sec .lp-split,
  body.lp-page .lp-locations { grid-template-columns: minmax(0, 1fr); }
  body.lp-page .lp-about__text { position: static; }
  body.lp-page .lp-sec .lp-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  body.lp-page .lp-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  body.lp-page .lp-sec .lp-grid--2,
  body.lp-page .lp-sec .lp-grid--3,
  body.lp-page .lp-sec .lp-grid--4 { grid-template-columns: minmax(0, 1fr); }
  body.lp-page .lp-sec .lp-team.lp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  body.lp-page .lp-sec .lp-promises .lp-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.lp-page .lp-sec .lp-facts { gap: 12px; }
  body.lp-page .lp-sec .lp-fact { min-height: 0; }
  body.lp-page .lp-sec .lp-form__row { grid-template-columns: minmax(0, 1fr); }
  body.lp-page .lp-hero { min-height: clamp(520px, 82svh, 720px); padding-bottom: 120px; }
  body.lp-page .lp-hero__shade { background: linear-gradient(0deg, rgba(6, 26, 58, .95) 10%, rgba(6, 26, 58, .55) 100%); }
  body.lp-page .lp-promises { margin-top: -88px; }
  body.lp-page .lp-sec .lp-btn { width: 100%; }
  body.lp-page .lp-sec .lp-hero .lp-actions { flex-direction: column; }
  /* Process: vertical timeline */
  body.lp-page .lp-sec .lp-process__steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.lp-page .lp-process__step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; }
  body.lp-page .lp-process__step > :not(.lp-process__marker) { grid-column: 2; }
  body.lp-page .lp-process__marker { grid-row: 1 / span 3; }
  body.lp-page .lp-process__line--v { display: block; left: 24px; top: 26px; width: 4px; height: calc(100% - 52px); }
  body.lp-page .lp-process__track { position: relative; }
  body.lp-page .lp-sustain { grid-template-columns: 28px minmax(0, 1fr); }
  body.lp-page .lp-sustain__thread { width: 28px; }
  body.lp-page .lp-sec .lp-practice { flex-direction: column; gap: 14px; }
  body.lp-page .lp-sec .lp-sustain-foot { padding-left: 0; }
  body.lp-page .lp-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lp-page .lp-sec .lp-rail__list { grid-auto-columns: 68%; }
  /* Held sections on phones: drawing on top, one step/practice under it. */
  body.lp-page .lp-build__grid,
  body.lp-page .lp-loop__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.lp-page .lp-build.is-live .lp-build__art,
  body.lp-page .lp-loop.is-live .lp-loop__art { order: -1; }
  body.lp-page .lp-sec.lp-build.is-live .lp-lead,
  body.lp-page .lp-sec.lp-loop.is-live .lp-lead,
  body.lp-page .lp-sec.lp-loop.is-live .lp-loop__more,
  body.lp-page .lp-build.is-live .lp-build__meter { display: none; }
  body.lp-page .lp-sec.lp-build.is-live .lp-h2,
  body.lp-page .lp-sec.lp-loop.is-live .lp-h2 { font-size: 1.5rem; }
  body.lp-page .lp-build.is-live .lp-build__svg { max-height: 36vh; }
  /* step dashes not shown on phones either (user, 2026-10-06) */
  body.lp-page .lp-sec.lp-build.is-live .lp-build__step:not(.is-now) { display: none; }
  body.lp-page .lp-sec.lp-build.is-live .lp-build__step button { padding: 4px 0; background: transparent; }
  body.lp-page .lp-sec.lp-build .lp-build__text,
  body.lp-page .lp-sec.lp-loop .lp-loop__text { gap: 12px; }
  body.lp-page .lp-sec .lp-loop__stop { width: 36px; height: 36px; }
  body.lp-page .lp-loop__dot svg { width: 18px; height: 18px; }
  body.lp-page .lp-sec .lp-loop__label { display: none; }
  body.lp-page .lp-sec .lp-loop__leaf { width: 40px; height: 40px; }
  body.lp-page .lp-sec .lp-loop__card { padding: 16px; gap: 4px 12px; grid-template-columns: 40px minmax(0, 1fr); }
  body.lp-page .lp-sec .lp-loop__card .lp-icon { width: 40px; height: 40px; }
  body.lp-page .lp-sec .lp-loop__card p:not(.lp-loop__step) { font-size: .875rem; }
  body.lp-page .lp-sec .lp-loop__done { font-size: .75rem; padding: 7px 12px; }
  body.lp-page .lp-sec.lp-build.is-pinned,
  body.lp-page .lp-sec.lp-loop.is-pinned { --lp-hold-pt: calc(var(--lp-header) + 8px); --lp-hold-pb: 20px; }
}

/* ===== Phones (< 768 px): mobile redesign (2026-10-07, research in research/mobile-2026-10-07/) ===========
   One spacing scale (48 px sections, 24 px heading → content), 16 px cards, ≥ 44 px tap targets, text ≥ 15 px.
   Hero promises 2 × 2; services tap-to-open (leap.js phoneServices); How we work + Sustainability static (no hold, stops inert);
   products intro "Read more"; team 6 + "Show all"; contact form before the addresses. Desktop is unchanged. */
.lp-hdr-cta, .lp-office__map { display: none; }
@media (max-width: 999px) {
  body.lp-page #header-outer .lp-hdr-cta { position: absolute; top: 50%; right: 60px; translate: 0 -50%; z-index: 2; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--lp-blue); color: var(--lp-white); font: 600 .875rem/1 var(--lp-display); text-decoration: none; }
  body.lp-page #header-outer .lp-hdr-cta::after { content: ""; position: absolute; inset: -4px 0; } /* 48 px tap height */
  body.lp-page #header-outer .slide-out-widget-area-toggle.mobile-icon a::after { content: ""; position: absolute; inset: -12px -4px; } /* tap area 48 × 44 (was 40 × 20) */
  body.lp-page #slide-out-widget-area .off-canvas-menu-container .menu > li > a { display: block; padding-block: 13px; }
}
@media (max-width: 767.98px) { /* same breakpoint as leap.js Q_PHONE */
  body.lp-page { --lp-sec: 48px; --lp-fs-h2: 1.75rem; }
  body.lp-page .lp-sec .lp-head { margin-bottom: 24px; gap: 10px; }
  body.lp-page .lp-sec .lp-card { border-radius: 16px; }
  body.lp-page .lp-sec .lp-link { min-height: 44px; }
  body.lp-page .lp-sec :is(.lp-fact p, .lp-promises p, .lp-loop__card p:not(.lp-loop__step), .lp-build__desc) { font-size: .9375rem; }

  /* hero: promises as a 2 × 2 grid of icon + title + two lines */
  body.lp-page .lp-promises { margin-top: -72px; padding-bottom: 8px; }
  body.lp-page .lp-sec.lp-sec .lp-promises > .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.lp-page .lp-sec .lp-promises .lp-card { padding: 16px; gap: 10px; }
  body.lp-page .lp-sec .lp-promises .lp-card .lp-icon { width: 36px; height: 36px; }
  body.lp-page .lp-sec .lp-promises .lp-h3 { font-size: .9375rem; line-height: 1.3; }
  body.lp-page .lp-sec .lp-promises .lp-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: .875rem; line-height: 1.4; }

  /* logos: tighter strip, clearer logos */
  body.lp-page .lp-sec.lp-brands { padding-block: 32px; }
  body.lp-page .lp-brands .lp-head { margin-bottom: 12px; }
  body.lp-page .lp-sec .lp-marquee__list { gap: 36px; }
  body.lp-page .lp-sec .lp-marquee__list img { opacity: .9; }

  /* about: compact number tiles */
  body.lp-page .lp-sec .lp-fact { padding: 16px; gap: 4px; justify-content: flex-start; }
  body.lp-page .lp-sec .lp-fact__num { font-size: 2.25rem; }
  body.lp-page .lp-sec .lp-fact__label { font-size: 1rem; }

  /* video: full-width button (wraps on narrow phones rather than clipping) */
  body.lp-page .lp-sec .lp-film__caption .lp-link { flex: 1 1 100%; justify-content: center; white-space: normal; text-align: center; font-size: .875rem; }

  /* services: tap-to-open rows (icon | title | chevron); the open one shows its text + PDF link */
  body.lp-page .lp-sec .lp-cardgrid { gap: 10px; }
  body.lp-page .lp-sec.lp-sec .lp-card.lp-acc { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 0 14px; padding: 6px 16px; }
  body.lp-page .lp-sec .lp-acc > .lp-icon { width: 40px; height: 40px; grid-row: auto; }
  body.lp-page .lp-sec .lp-acc > .lp-loop__step { display: none; } /* "Practice n of 5" label: the list shows the order */
  body.lp-page .lp-sec .lp-acc > :is(h2, h3) { margin: 0; font-size: 1.0625rem; }
  body.lp-page .lp-sec .lp-acc > :not(.lp-icon):not(h2):not(h3) { grid-column: 1 / -1; }
  body.lp-page .lp-sec .lp-acc > p { margin-top: 4px; }
  body.lp-page .lp-sec .lp-acc > .lp-link { margin: 0 0 6px; }
  body.lp-page .lp-sec .lp-acc [hidden] { display: none !important; }
  body.lp-page .lp-sec .lp-acc__btn { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; text-transform: none; letter-spacing: inherit; cursor: pointer; }
  body.lp-page .lp-sec .lp-acc__btn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--lp-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--lp-ease); }
  body.lp-page .lp-sec .lp-acc.is-open .lp-acc__btn svg { transform: rotate(180deg); }
  body.lp-page .lp-sec .lp-acc__btn:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 4px; border-radius: 6px; }

  /* How we work (static on phones): finished T-shirt first, then a numbered list joined by a line */
  body.lp-page .lp-sec.lp-build:not(.is-live) .lp-build__art { order: -1; }
  body.lp-page .lp-build:not(.is-live) .lp-build__svg { max-height: 38vh; margin-inline: auto; }
  body.lp-page .lp-sec.lp-build:not(.is-live) .lp-build__steps { gap: 0; }
  body.lp-page .lp-sec.lp-build:not(.is-live) .lp-build__step { position: relative; }
  body.lp-page .lp-sec.lp-build:not(.is-live) .lp-build__step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 44px; bottom: -4px; width: 2px; background: rgba(255, 255, 255, .16); }
  body.lp-page .lp-sec.lp-build:not(.is-live) .lp-build__step button { padding: 8px 0; align-items: start; }
  body.lp-page .lp-sec.lp-build:not(.is-live) .lp-build__title { padding-top: 6px; color: var(--lp-white); font-size: 1rem; }
  body.lp-page .lp-sec.lp-build:not(.is-live) .lp-build__desc { color: var(--lp-on-dark-muted); }

  /* Sustainability (static on phones): the loop first, then the practices as compact cards */
  body.lp-page .lp-sec.lp-loop:not(.is-live) .lp-loop__art { order: -1; }
  body.lp-page .lp-sec.lp-loop:not(.is-live) .lp-loop__cards { gap: 10px; }
  body.lp-page .lp-sec.lp-loop:not(.is-live) .lp-loop__card { padding: 14px 16px; }
  body.lp-page .lp-sec.lp-sec.lp-loop:not(.is-live) .lp-loop__card p { font-size: .875rem; line-height: 1.5; }
  body.lp-page .lp-sec.lp-loop:not(.is-live) .lp-loop__card .lp-loop__step,
  body.lp-page .lp-sec.lp-loop:not(.is-live) .lp-loop__done { display: none; } /* animation states: the list already shows the order */
  body.lp-page .lp-sec:is(.lp-loop, .lp-build):not(.is-live) :is([data-lp-stop], .lp-build__step button) { pointer-events: none; }

  /* products: shorter intro, no arrow buttons (swipe), catalogues stacked */
  body.lp-page .lp-sec .lp-text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  body.lp-page .lp-sec .lp-more { min-height: 44px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--lp-blue); font: 600 .9375rem/1 var(--lp-display); text-transform: none; letter-spacing: 0; cursor: pointer; justify-self: start; }
  body.lp-page .lp-sec .lp-rail__nav { display: none; }
  body.lp-page .lp-rail { margin-block: 24px; }
  body.lp-page .lp-sec .lp-catalogues { gap: 10px; }
  body.lp-page .lp-sec.lp-sec .lp-catalogues .lp-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 2px 14px; padding: 14px 16px; }
  body.lp-page .lp-sec .lp-catalogues .lp-card > .lp-icon { grid-row: 1 / span 3; width: 40px; height: 40px; }
  body.lp-page .lp-sec .lp-catalogues .lp-card > :not(.lp-icon) { grid-column: 2; margin: 0; }
  body.lp-page .lp-sec .lp-catalogues .lp-card p { font-size: .875rem; }

  /* team: 2 columns, faces not cropped; "Show all" button, then the call-to-action as a banner */
  body.lp-page .lp-sec .lp-team.lp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  body.lp-page .lp-sec .lp-team .lp-person { gap: 10px; }
  body.lp-page .lp-sec .lp-person__photo img { object-position: 50% 20%; }
  body.lp-page .lp-sec .lp-team [hidden] { display: none !important; }
  body.lp-page .lp-sec .lp-team__more { grid-column: 1 / -1; order: 1; }
  body.lp-page .lp-sec .lp-team__more .lp-btn { width: 100%; }
  body.lp-page .lp-sec .lp-person--cta { grid-column: 1 / -1; order: 2; aspect-ratio: auto; padding: 20px; gap: 12px; justify-content: flex-start; }
  body.lp-page .lp-sec .lp-person--cta .lp-btn { align-self: stretch; }

  /* contact: heading, then the form, then the offices as cards with Call / Email / Map buttons */
  body.lp-page .lp-sec .lp-split:has(> .lp-card [data-lp-form]) { gap: 24px; }
  body.lp-page .lp-sec .lp-split:has(> .lp-card [data-lp-form]) > div:first-child { display: contents; }
  body.lp-page .lp-sec .lp-split:has(> .lp-card [data-lp-form]) > .lp-card { order: 1; padding: 20px; }
  body.lp-page .lp-sec .lp-split:has(> .lp-card [data-lp-form]) .lp-contact__offices { order: 2; gap: 10px; margin-top: 0; }
  body.lp-page .lp-sec .lp-split:has(> .lp-card [data-lp-form]) .lp-head { margin-bottom: 0; }
  body.lp-page .lp-sec .lp-contact__office { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-white); }
  body.lp-page .lp-sec .lp-contact__office > :is(p, h3, address) { flex: 1 1 100%; margin: 0; }
  body.lp-page .lp-sec .lp-contact__office a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--lp-line); border-radius: 999px; font-size: .875rem; text-decoration: none; overflow-wrap: anywhere; }
  body.lp-page .lp-sec .lp-contact__office .lp-office__map { display: inline-flex; }
  body.lp-page .lp-sec .lp-social a { display: inline-flex; align-items: center; min-height: 44px; }

  /* footer: 44 px link rows, tighter groups */
  body.lp-page .lp-footer { padding-block: 48px 24px; }
  body.lp-page .lp-footer__grid { gap: 24px; padding-bottom: 24px; }
  body.lp-page .lp-footer__nav { row-gap: 0; }
  body.lp-page .lp-footer__nav a,
  body.lp-page .lp-footer__contact a { display: inline-flex; align-items: center; min-height: 44px; }
  body.lp-page .lp-footer__legal { column-gap: 16px; }
  body.lp-page .lp-footer__legal a { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; margin-left: 0; margin-right: 14px; }
}

/* ===== 19. Motion states (JS adds html.lp-js; without JS everything is visible) ============== */
html.lp-js body.lp-page [data-lp-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--lp-dur) var(--lp-ease), transform var(--lp-dur) var(--lp-ease); transition-delay: calc(var(--lp-i, 0) * 80ms); }
html.lp-js body.lp-page [data-lp-reveal].is-in { opacity: 1; transform: none; }
body.lp-page .lp-line { display: block; }

/* ===== 20. Reduced motion: everything in its final state ===================================== */
@media (prefers-reduced-motion: reduce) {
  html.lp-js body.lp-page [data-lp-reveal] { opacity: 1; transform: none; transition: none; }
  body.lp-page .lp-sec :is(.lp-loop__dot, .lp-loop__leaf, .lp-loop__done, .lp-build__mark) { transition: none; }
  body.lp-page .lp-marquee__track { animation: none; }
  body.lp-page .lp-marquee { overflow-x: auto; }
  body.lp-page .lp-hotspot__pulse { animation: none; }
  body.lp-page :is(.lp-btn, .lp-btn::before, .lp-card, .lp-link::after, .lp-rail__item img, .lp-person__photo img) { transition: none !important; }
}

/* ===== 21. Phase 1 additions (2026-10-13) ====================================================
   21a: markup that only appears when a new element param is used (the live homepage uses none, so it is unaffected).
   21b: the new elements (Leap Partners, Leap FAQ). 21c: fixes for existing sections on v2 pages only (body.lp-v2). */

/* 21a. Hero "compact" (inner pages): a band under the header, no full-screen photo, no cards. */
body.lp-page .lp-sec--hero-compact .lp-hero { min-height: 0; padding-top: calc(var(--lp-header) + clamp(40px, 6vw, 72px)); padding-bottom: clamp(48px, 6vw, 80px); }
body.lp-page .lp-sec.lp-sec--hero-compact .lp-hero__title { font-size: var(--lp-fs-h2); line-height: 1.1; max-width: 22ch; }
body.lp-page .lp-sec.lp-sec--hero-compact .lp-hero__lead { max-width: 56ch; }

/* 21a. Logo strip: certification badges (variant "certs"), file-size logos (sizing "file"), caption. */
body.lp-page .lp-brands--certs .lp-marquee__track { animation-duration: 40s; }
body.lp-page .lp-sec.lp-brands--certs .lp-marquee__list li { height: 88px; }
body.lp-page .lp-sec.lp-brands--certs .lp-marquee__list img { max-height: 72px; max-width: 120px; opacity: 1; filter: none; }
body.lp-page .lp-sec .lp-marquee__list img.lp-logo--file { max-width: none; max-height: none; height: auto; } /* width is set inline: half the file's pixels */
body.lp-page .lp-sec .lp-brands__caption { margin-top: 20px; font-size: var(--lp-fs-small); line-height: 1.5; color: var(--muted); }

/* 21a. Cards: photo on top (instead of the icon), tag chips, fixed column count. */
body.lp-page .lp-sec .lp-card__media { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--lp-radius-sm); background: var(--lp-cotton); }
body.lp-page .lp-sec .lp-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.lp-page .lp-sec .lp-card .lp-chips { margin-top: 2px; }

/* 21a. Products: magazine line, compact catalogue rows (layout "rows"), "View all" button. */
body.lp-page .lp-sec .lp-products__mag { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
body.lp-page .lp-sec .lp-products__mag p { color: var(--muted); }
body.lp-page .lp-sec .lp-catalogues--rows { display: grid; gap: 12px; }
body.lp-page .lp-sec .lp-catrow__text { display: grid; gap: 4px; min-width: 0; }
body.lp-page .lp-sec .lp-catrow .lp-h3 { font-size: 1.0625rem; }
body.lp-page .lp-sec .lp-catrow p { font-size: .9375rem; line-height: 1.55; }
body.lp-page .lp-sec .lp-catrow__img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--lp-radius-sm); background: var(--lp-cotton); } /* product photo instead of the icon (2026-10-20) */
@media (min-width: 768px) {
  body.lp-page .lp-sec .lp-catrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 18px 24px; }
  body.lp-page .lp-sec .lp-catrow:not(:has(> :is(.lp-icon, .lp-catrow__img, .lp-peek-photo))) { grid-template-columns: minmax(0, 1fr) auto; }
  body.lp-page .lp-sec .lp-catrow:has(> :is(.lp-catrow__img, .lp-peek-photo)) { grid-template-columns: 96px minmax(0, 1fr) auto; padding-block: 14px; }
}
body.lp-page .lp-sec .lp-products__all { margin-top: clamp(28px, 4vw, 40px); }

/* 21a. Several phone numbers in one field: "a / b". */
body.lp-page .lp-tels__sep { color: var(--muted); }

@media (max-width: 767.98px) {
  /* compact rows on phones reuse the §phones catalogue rows; the button stays a normal-size pill */
  body.lp-page .lp-sec .lp-catrow > .lp-btn { width: auto; min-height: 44px; justify-self: start; margin-top: 6px; }
  /* photo cards (no tap-to-open list) with 2 or 4 per row: 2 per row on phones */
  body.lp-page .lp-sec .lp-cardgrid[data-lp-accordion="no"]:is(.lp-grid--2, .lp-grid--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.lp-page .lp-sec .lp-cardgrid[data-lp-accordion="no"]:is(.lp-grid--2, .lp-grid--4) > .lp-card { padding: 12px; gap: 8px; }
  body.lp-page .lp-sec .lp-cardgrid[data-lp-accordion="no"]:is(.lp-grid--2, .lp-grid--4) > .lp-card .lp-h3 { font-size: 1rem; }
  body.lp-page .lp-sec .lp-cardgrid[data-lp-accordion="no"]:is(.lp-grid--2, .lp-grid--4) > .lp-card p { font-size: .875rem; line-height: 1.5; }
  /* office cards: each number is its own pill */
  body.lp-page .lp-sec .lp-contact__office .lp-tels { display: contents; }
  body.lp-page .lp-sec .lp-contact__office .lp-tels__sep { display: none; }
  body.lp-page .lp-sec.lp-sec--hero-compact .lp-hero__title { font-size: 2rem; }
}

/* 21b. Leap Partners: text + tiers (7 cols) | 9:16 video (5 cols), centred; phones: tiers as rows, video 4:5 cropped from the top. */
body.lp-page .lp-partners__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
body.lp-page .lp-partners__text { display: grid; gap: 20px; min-width: 0; }
body.lp-page .lp-sec .lp-partners__text .lp-head { margin-bottom: 4px; }
body.lp-page .lp-sec .lp-partners__label { margin-top: 8px; font: 600 .9375rem/1.3 var(--lp-display); color: var(--fg); }
body.lp-page .lp-sec .lp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.lp-page .lp-sec .lp-tier { gap: 8px; padding: 20px; }
body.lp-page .lp-tier__scale { display: flex; gap: 4px; max-width: 72px; }
body.lp-page .lp-tier__scale i { flex: 1; height: 6px; border-radius: 6px; background: var(--lp-line); }
body.lp-page .lp-tier__scale i.is-on { background: var(--lp-green); }
body.lp-page .lp-sec .lp-tier .lp-h3 { font-size: 1.0625rem; }
body.lp-page .lp-sec .lp-tier .lp-tier__moq { font: 700 .9375rem/1.3 var(--lp-display); color: var(--lp-blue); }
body.lp-page .lp-sec .lp-tier p:not(.lp-tier__moq) { font-size: .9375rem; line-height: 1.55; }
body.lp-page .lp-sec .lp-partners__media { margin: 0; min-width: 0; }
body.lp-page .lp-partners__frame { position: relative; overflow: hidden; width: min(100%, 340px, calc(min(70svh, 620px) * 9 / 16)); aspect-ratio: 9 / 16; margin-inline: auto; border-radius: var(--lp-radius); background: var(--lp-navy); }
body.lp-page .lp-partners__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
body.lp-page .lp-sec .lp-pvideo__btn { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(6, 26, 58, .8); box-shadow: none; color: var(--lp-white); font: 600 .875rem/1 var(--lp-display); letter-spacing: 0; text-transform: none; cursor: pointer; }
body.lp-page .lp-sec .lp-pvideo__btn:hover { background: var(--lp-blue); }
body.lp-page .lp-sec .lp-pvideo__btn:focus-visible { outline: 2px solid var(--lp-white); outline-offset: 2px; box-shadow: 0 0 0 4px var(--lp-blue); }
body.lp-page .lp-pvideo__btn[hidden] { display: none; }
body.lp-page .lp-pvideo__btn svg { width: 14px; height: 14px; fill: currentColor; }
body.lp-page .lp-pvideo__pause,
body.lp-page .lp-pvideo__btn.is-playing .lp-pvideo__play { display: none; }
body.lp-page .lp-pvideo__btn.is-playing .lp-pvideo__pause { display: block; }
body.lp-page .lp-sec .lp-partners__caption { margin-top: 12px; text-align: center; font-size: var(--lp-fs-small); line-height: 1.5; color: var(--muted); }

/* 21b. Leap FAQ: side column | accordion (native <details>, one open at a time). */
body.lp-page .lp-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
body.lp-page .lp-faq__side { display: grid; gap: 24px; align-content: start; }
body.lp-page .lp-sec .lp-faq__side .lp-head { margin-bottom: 0; }
body.lp-page .lp-faq__list { display: grid; gap: 12px; max-width: 760px; }
body.lp-page .lp-sec .lp-faq__item { border: 1px solid var(--card-line); border-radius: var(--lp-radius-sm); background: var(--card); transition: border-color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-faq__item[open] { border-color: var(--lp-blue); }
body.lp-page .lp-sec .lp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; box-sizing: border-box; list-style: none; cursor: pointer; font: 600 1.0625rem/1.35 var(--lp-display); color: var(--fg); }
body.lp-page .lp-sec .lp-faq__q::-webkit-details-marker { display: none; }
body.lp-page .lp-sec .lp-faq__q::marker { content: ""; }
body.lp-page .lp-sec .lp-faq__q:hover { color: var(--lp-blue); }
body.lp-page .lp-sec .lp-faq__q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--lp-radius-sm); }
body.lp-page .lp-faq__q svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--lp-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--lp-ease); }
body.lp-page .lp-faq__item[open] .lp-faq__q svg { transform: rotate(180deg); }
body.lp-page .lp-sec .lp-faq__a { display: grid; gap: 12px; padding: 0 20px 20px; color: var(--muted); }
body.lp-page .lp-sec .lp-faq__a ul { display: grid; gap: 6px; padding-left: 1.25em; }
body.lp-page .lp-sec .lp-faq__a ul > li { list-style: disc !important; } /* beats the §5 list reset (which uses !important against Salient) */
body.lp-page .lp-sec .lp-faq__a .lp-btn { justify-self: start; }

@media (max-width: 899px) {
  body.lp-page .lp-partners__grid,
  body.lp-page .lp-faq__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  body.lp-page .lp-sec .lp-tiers { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.lp-page .lp-sec .lp-tier { display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: center; gap: 2px 16px; padding: 14px 16px; }
  body.lp-page .lp-sec .lp-tier > .lp-tier__scale { grid-column: 2; grid-row: 1 / span 3; }
  body.lp-page .lp-sec .lp-tier > :not(.lp-tier__scale) { grid-column: 1; }
  body.lp-page .lp-partners__frame { width: 100%; aspect-ratio: 4 / 5; }
  body.lp-page .lp-partners__frame video { object-position: 50% 0; }
  body.lp-page .lp-sec .lp-partners__intro.is-clamped > :nth-child(n+2) { display: none; }
  body.lp-page .lp-sec .lp-faq__q { padding-inline: 16px; font-size: 1rem; }
  body.lp-page.lp-v2 .lp-sec .lp-faq__q { padding-block: 10px; } /* stays ≥ 56 px tall */
  body.lp-page.lp-v2 .lp-faq__list { gap: 8px; }
  body.lp-page .lp-sec .lp-faq__a { padding: 0 16px 16px; }
  body.lp-page .lp-sec .lp-cardgrid[data-lp-accordion="no"]:is(.lp-grid--2, .lp-grid--4) > .lp-card .lp-link { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.lp-page :is(.lp-faq__q svg, .lp-faq__item) { transition: none; }
}

/* 21c. v2 pages only (body.lp-v2 = page meta _lp_v2): type fixes for the existing sections. The live homepage has no lp-v2
   class, so none of this reaches it. Body text sizes are not changed beyond whole-pixel rounding (the held sections' fit
   levels are measured from them). */
/* Font leaks: Salient maps em/i to Crimson Text and b/strong to "Inter Tight"; form controls, summary and dialog do not
   inherit fonts. :where() keeps these at (0,1,1) so every element rule in this file still sets its own face. */
body.lp-v2 :where(.lp-sec, .lp-footer) :where(em, i, cite, b, strong) { font-family: inherit; }
body.lp-v2 :where(.lp-sec, .lp-footer) :where(button, input, select, textarea, summary, dialog) { font: inherit; }
/* Whole-pixel type scale on phones and tablets (instead of clamp() fractions such as 18.095 / 16.07 px), each value the
   clamp's own result rounded (max 0.6 px off). Up to 1000 px the root size is a fixed 16 px. From 1001 px Salient scales
   the root size with the window (12.8 px at 1100, 14.4 at 1280, 16 at 1440+), so sizes there are fractional by design and
   are left alone: changing them would change body text and the held sections' fit at laptop sizes. */
@media (max-width: 767.98px) { body.lp-page.lp-v2 { --lp-fs-h1: 40px; --lp-fs-h2: 28px; --lp-fs-h3: 20px; --lp-fs-lead: 18px; --lp-fs-body: 16px; } }
@media (min-width: 768px) and (max-width: 899.98px) { body.lp-page.lp-v2 { --lp-fs-h1: 56px; --lp-fs-h2: 38px; --lp-fs-h3: 21px; --lp-fs-lead: 19px; --lp-fs-body: 16px; } }
@media (min-width: 900px) and (max-width: 1000px) { body.lp-page.lp-v2 { --lp-fs-h1: 62px; --lp-fs-h2: 41px; --lp-fs-h3: 21px; --lp-fs-lead: 19px; --lp-fs-body: 17px; } }
/* Role fixes: links and labels in the UI face (Plus Jakarta Sans 600, 15 px), like in-page links and buttons. */
body.lp-page.lp-v2 .lp-footer :is(.lp-footer__nav, .lp-footer__contact) a,
body.lp-page.lp-v2 .lp-sec .lp-contact__office a,
body.lp-page.lp-v2 .lp-sec .lp-social a { font: 600 .9375rem/1.4 var(--lp-display); }
body.lp-page.lp-v2 .lp-footer__legal a { font-family: var(--lp-display); font-weight: 600; } /* legal row keeps its small size */
body.lp-page.lp-v2 .lp-sec .lp-field label { font-family: var(--lp-display); line-height: 1.3; font-size: .9375rem !important; font-weight: 600 !important; } /* !important: Salient's `form label` size/weight use it */
/* One eyebrow tracking (0.12em), office roles included. */
body.lp-page.lp-v2 .lp-sec .lp-contact__office .lp-role { letter-spacing: .12em; }
/* Map tooltip: the page's label size for the place, body size for the line under it. */
body.lp-page.lp-v2 .lp-sec .lp-tip { max-width: 240px; font: 400 var(--lp-fs-body)/1.45 var(--lp-body); }
body.lp-page.lp-v2 .lp-sec .lp-tip strong { font: 700 1rem/1.3 var(--lp-display); }
/* About: a last number card alone on its row spans the row (5 figures). */
body.lp-page.lp-v2 .lp-sec .lp-facts > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* G4: visible "|" between the legal links (decorative: empty alt text for screen readers). */
body.lp-page.lp-v2 .lp-footer__legal p > a + a::before { content: "|"; content: "|" / ""; margin-right: 14px; color: var(--lp-on-dark-muted); }
@media (min-width: 768px) { body.lp-page.lp-v2 .lp-footer__legal p > a + a { margin-left: 10px; } } /* + the space before it = 14 px each side of the bar */
@media (max-width: 767.98px) { body.lp-page.lp-v2 .lp-footer__legal p > a + a::before { content: none; } } /* phones: the links are separate 44 px pills, a bar would wrap alone */
/* Review G (2026-10-13): Team tile takes its column (aspect-ratio 1 made it wider than the column on every desktop); long figures
   such as "1–2.5M" stay on one line at a smaller size; the inherited Yellow Pencil rule (`#top .menu-item:nth-child(4) a
   { padding-left: 25px !important }`, inline, ≥ 1301 px) gave "Products" a wider gap: back to the 15 px the others have. */
body.lp-page.lp-v2 .lp-sec .lp-person--cta { aspect-ratio: auto; }
body.lp-page.lp-v2 .lp-sec .lp-fact__num { white-space: nowrap; }
body.lp-page.lp-v2 .lp-sec .lp-fact__num--long { font-size: calc(clamp(3rem, 2.2rem + 3vw, 4.5rem) * .72); } /* 72 % of §9's figure size (phones keep their 32 px, §21d) */
@media (min-width: 1301px) { body.lp-v2 #top .menu-item:nth-child(4) > a { padding-left: 15px !important; } } /* !important: beats the inline Yellow Pencil !important (higher specificity) */

/* v2 tablet grids (2026-10-13): below 1100 px 3/4-column grids fall to 2 columns, which left a card alone on a row.
   Products page grids (accordion "no") keep their columns from 900 px (4) / 768 px (3); any other odd last card
   in a 2-column grid spans the row (e.g. 5 services = 2 + 2 + 1 wide). */
@media (min-width: 768px) and (max-width: 1099px) {
  body.lp-page.lp-v2 .lp-sec .lp-cardgrid[data-lp-accordion="no"].lp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.lp-page.lp-v2 .lp-sec .lp-grid--3:not([data-lp-accordion="no"]) > .lp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  body.lp-page.lp-v2 .lp-sec .lp-cardgrid[data-lp-accordion="no"].lp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 21d. v2 pages, phones: page-length gate (390×844 ≤ 15.5 screens, 2026-10-13). No client text removed: longer texts sit behind
   "Read more" / tap-to-open rows (leap.js phonePartners, phoneV2Compact); tap targets stay ≥ 44 px; body text keeps its size. */
@media (max-width: 767.98px) {
  /* Partners: lead at body size; intro clamped to two lines with the closing paragraph behind the same "Read more";
     tiers as compact rows (scale cue right, order size · text in one flow); video as a thumbnail beside its caption. */
  body.lp-page.lp-v2 .lp-partners__text { gap: 12px; }
  body.lp-page.lp-v2 .lp-sec.lp-partners .lp-lead { font-size: var(--lp-fs-body); line-height: 1.6; }
  body.lp-page.lp-v2 .lp-sec .lp-partners__intro.is-clamped { display: block; }
  body.lp-page.lp-v2 .lp-sec .lp-partners__intro.is-clamped > :first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* a line clamp on the wrapper does not cut its paragraphs */
  body.lp-page.lp-v2 .lp-sec .lp-partners__text:has(.lp-partners__intro.is-clamped) .lp-partners__closing { display: none; }
  body.lp-page.lp-v2 .lp-sec .lp-partners__label { margin-top: 2px; }
  body.lp-page.lp-v2 .lp-sec .lp-tier { display: block; padding: 12px 16px; }
  body.lp-page.lp-v2 .lp-sec .lp-tier > .lp-tier__scale { float: right; width: 48px; margin: 9px 0 0 12px; }
  body.lp-page.lp-v2 .lp-sec .lp-tier .lp-h3 { font-size: 1rem; }
  body.lp-page.lp-v2 .lp-sec .lp-tier > p { display: inline; }
  body.lp-page.lp-v2 .lp-sec .lp-tier .lp-tier__moq::after { content: " · "; content: " · " / ""; font-weight: 400; color: var(--muted); }
  /* video: the approved full-width 4:5 crop (top kept, burned-in step titles readable), placed after the tiers and before the
     button (the text column's items join the grid so the figure can sit between them); a small icon-only pause button in the corner */
  body.lp-page.lp-v2 .lp-partners__grid { row-gap: 12px; }
  body.lp-page.lp-v2 .lp-partners__grid > .lp-partners__text { display: contents; }
  body.lp-page.lp-v2 .lp-partners__grid > .lp-partners__media { order: 1; margin-top: 4px; }
  body.lp-page.lp-v2 .lp-partners__grid > .lp-partners__text > .lp-actions { order: 2; margin-top: 4px; }
  body.lp-page.lp-v2 .lp-sec .lp-partners__caption { margin-top: 8px; }
  body.lp-page.lp-v2 .lp-sec .lp-pvideo__btn { left: 10px; bottom: 10px; width: 44px; padding: 0; justify-content: center; background: rgba(6, 26, 58, .6); }
  body.lp-page.lp-v2 .lp-sec .lp-pvideo__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* icon-only; the text stays the button's name */

  /* Products teaser (rows): intro 3 lines; magazine line + link in one flow; each row's action as a text link, with the whole
     row as its tap target. */
  body.lp-page.lp-v2 .lp-sec:has(.lp-catalogues--rows) .lp-text.is-clamped { -webkit-line-clamp: 3; }
  body.lp-page.lp-v2 .lp-sec .lp-products__mag { display: block; color: var(--muted); }
  body.lp-page.lp-v2 .lp-sec .lp-products__mag p { display: inline; }
  body.lp-page.lp-v2 .lp-sec :is(.lp-products__mag, .lp-catrow) > .lp-btn { display: inline; width: auto; min-height: 0; margin: 0; padding: 13px 0; border: 0; border-radius: 0; background: none; color: var(--link); font: 600 .9375rem/1.4 var(--lp-display); white-space: normal; overflow: visible; isolation: auto; }
  body.lp-page.lp-v2 .lp-sec :is(.lp-products__mag, .lp-catrow) > .lp-btn::before { display: none; }
  body.lp-page.lp-v2 .lp-sec :is(.lp-products__mag, .lp-catrow) > .lp-btn::after { content: " →"; }
  body.lp-page.lp-v2 .lp-sec .lp-products__mag > .lp-btn { margin-left: .3em; } /* padding-block widens the tap area to 44 px without a taller line */
  /* row = icon | title, then text with the action link running on after it (block-in-inline flow) */
  body.lp-page.lp-v2 .lp-sec .lp-catalogues--rows { gap: 0; border-top: 1px solid var(--card-line); }
  body.lp-page.lp-v2 .lp-sec.lp-sec .lp-catalogues .lp-card.lp-catrow { display: block; position: relative; min-height: 0; padding: 9px 0 9px 44px; border: 0; border-bottom: 1px solid var(--card-line); border-radius: 0; background: none; }
  body.lp-page.lp-v2 .lp-sec.lp-sec .lp-catalogues .lp-catrow > .lp-icon { position: absolute; left: 0; top: 9px; width: 32px; height: 32px; }
  body.lp-page.lp-v2 .lp-sec.lp-sec .lp-catalogues .lp-card.lp-catrow:has(> :is(.lp-catrow__img, .lp-peek-photo)) { padding-left: 64px; min-height: 70px; }
  body.lp-page.lp-v2 .lp-sec.lp-sec .lp-catalogues .lp-catrow > .lp-catrow__img { position: absolute; left: 0; top: 9px; width: 52px; height: 52px; }
  body.lp-page.lp-v2 .lp-sec .lp-catrow > .lp-icon svg { width: 18px; height: 18px; }
  body.lp-page.lp-v2 .lp-sec .lp-catrow .lp-catrow__text { display: inline; }
  body.lp-page.lp-v2 .lp-sec .lp-catrow .lp-catrow__text > .lp-h3 { display: inline; font-size: 1rem; line-height: 1.5; } /* title runs into its text: "Apparel · Denim, …" */
  body.lp-page.lp-v2 .lp-sec .lp-catrow .lp-catrow__text > .lp-h3::after { content: " · "; content: " · " / ""; font-weight: 400; color: var(--muted); }
  body.lp-page.lp-v2 .lp-sec .lp-catrow p { line-height: 1.5; }
  body.lp-page.lp-v2 .lp-sec:has(.lp-catalogues--rows) .lp-head { margin-bottom: 16px; }
  body.lp-page.lp-v2 .lp-sec:has(.lp-catalogues--rows) .lp-head__text { gap: 10px; }
  body.lp-page.lp-v2 .lp-sec .lp-catrow .lp-catrow__text > p { display: inline; }
  body.lp-page.lp-v2 .lp-sec .lp-catrow > .lp-btn { position: static; padding: 0; margin-left: .35em; }
  body.lp-page.lp-v2 .lp-sec .lp-catrow:has(> .lp-btn) { cursor: pointer; }
  body.lp-page.lp-v2 .lp-sec .lp-catrow > .lp-btn::before { content: ""; display: block; position: absolute; inset: 0; z-index: 1; transform: none; background: none; } /* the whole row is the link's tap area */
  body.lp-page.lp-v2 .lp-sec .lp-products__all { margin-top: 12px; }

  /* About: compact number cards (3 rows of 2 for 6 figures); the long text gets "Read more" after five lines. */
  body.lp-page.lp-v2 .lp-sec .lp-about__text .lp-rich.is-clamped { display: block; }
  body.lp-page.lp-v2 .lp-sec .lp-about__text .lp-rich.is-clamped > :first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  body.lp-page.lp-v2 .lp-sec .lp-about__text .lp-rich.is-clamped > :not(:first-child) { display: none; }
  body.lp-page.lp-v2 .lp-sec .lp-facts { gap: 10px; }
  body.lp-page.lp-v2 .lp-sec .lp-fact { padding: 12px 14px; gap: 2px; }
  body.lp-page.lp-v2 .lp-sec .lp-fact__num { font-size: 2rem; margin-bottom: 2px; }
  body.lp-page.lp-v2 .lp-sec .lp-fact__label { line-height: 1.25; }
  body.lp-page.lp-v2 .lp-sec .lp-fact p { line-height: 1.4; }

  /* Sustainability: practices as plain compact rows, all text visible (owner: no accordion here); smaller loop drawing above. */
  body.lp-page.lp-v2 .lp-sec.lp-loop:not(.is-live) .lp-loop__canvas { width: min(100%, 260px); justify-self: center; }
  body.lp-page.lp-v2 .lp-sec.lp-loop:not(.is-live) .lp-loop__text { gap: 10px; }
  body.lp-page.lp-v2 .lp-sec.lp-loop:not(.is-live) .lp-loop__cards { gap: 0; border-top: 1px solid var(--card-line); }
  body.lp-page.lp-v2 .lp-sec.lp-sec.lp-loop:not(.is-live) .lp-loop__card { grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--card-line); border-radius: 0; background: none; }
  body.lp-page.lp-v2 .lp-sec.lp-loop:not(.is-live) .lp-loop__card > .lp-icon { width: 32px; height: 32px; grid-row: span 2; }
  body.lp-page.lp-v2 .lp-sec.lp-loop:not(.is-live) .lp-loop__card > .lp-icon svg { width: 18px; height: 18px; }
  body.lp-page.lp-v2 .lp-sec.lp-loop:not(.is-live) .lp-loop__card .lp-h3 { font-size: 1rem; line-height: 1.3; }

  /* Tighter rhythm on v2 phones: section padding 48 → 40 px; team grid gaps. */
  body.lp-page.lp-v2 { --lp-sec: 40px; }
  body.lp-page.lp-v2 .lp-sec .lp-team.lp-grid--4 { gap: 16px 12px; }
  body.lp-page.lp-v2 .lp-sec .lp-team .lp-person { gap: 8px; }

  /* Contact: tighter form rhythm (fields keep 48 px height, labels 15 px) and office cards. */
  body.lp-page.lp-v2 .lp-sec .lp-split:has(> .lp-card [data-lp-form]) > .lp-card { padding: 16px; }
  body.lp-page.lp-v2 .lp-sec .lp-form,
  body.lp-page.lp-v2 .lp-sec .lp-form__row { gap: 12px; }
  body.lp-page.lp-v2 .lp-sec .lp-field { gap: 6px; }
  body.lp-page.lp-v2 .lp-sec .lp-field :is(input, select) { min-height: 48px; padding-block: 12px !important; } /* !important: §17 sets this padding with !important against Salient's form skin */
  body.lp-page.lp-v2 .lp-sec .lp-field textarea { min-height: 112px; }
  body.lp-page.lp-v2 .lp-sec .lp-contact__office { padding: 12px 14px; gap: 6px; }
  body.lp-page.lp-v2 .lp-sec .lp-split:has(> .lp-card [data-lp-form]) { gap: 16px; }
  body.lp-page.lp-v2 .lp-sec .lp-split:has(> .lp-card [data-lp-form]) .lp-contact__offices { gap: 8px; }
  body.lp-page.lp-v2 .lp-sec .lp-contact__office .lp-office__map { order: 1; } /* Call + Map share a row, the longer email pill goes last */
  body.lp-page.lp-v2 .lp-sec .lp-contact__office > a:not([href^="tel:"]):not(.lp-office__map) { order: 2; }
}

/* 21e. Leap Partners "production line" (owner's concept A, 2026-10-13; prototype concepts/process-2026-10-13, classes .ps/.psA).
   Desktop: right column of the partners grid. Phone (slot < 430 px, container query): progress dots instead of the station row.
   Without JS (or in the WPBakery editor) the first drawing and every caption show as a list; leap.js adds .is-live. */
body.lp-page .lp-pline { container: lp-pline / inline-size; position: relative; width: 100%; color: var(--lp-ink); font: 400 .9375rem/1.55 var(--lp-body); }
body.lp-page .lp-sec .lp-pline button { margin: 0; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.lp-page .lp-sec .lp-pline button:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
body.lp-page .lp-pline__in { display: grid; gap: 16px; }
body.lp-page .lp-pline__scene { display: grid; overflow: hidden; border-radius: var(--lp-radius); background: var(--lp-cotton); touch-action: pan-y; }
body.lp-page .lp-pline__slide { grid-area: 1 / 1; min-width: 0; }
body.lp-page .lp-pline__svg { display: block; width: 100%; height: auto; }
body.lp-page .lp-pline:not(.is-live) .lp-pline__slide:not(.is-on) { display: none; }
body.lp-page .lp-pline.is-live .lp-pline__slide { opacity: 0; transform: translateX(28px); transition: opacity .45s ease, transform .55s var(--lp-ease); }
body.lp-page .lp-pline.is-live .lp-pline__slide.is-past { transform: translateX(-28px); }
body.lp-page .lp-pline.is-live .lp-pline__slide.is-on { opacity: 1; transform: none; }
/* small machine motions, only on the visible drawing */
body.lp-page .lp-pline__svg [class*="lp-pa-"] { animation-play-state: paused; transform-box: fill-box; }
body.lp-page .lp-pline__slide.is-on [class*="lp-pa-"] { animation-play-state: running; }
body.lp-page .lp-pline--flow.is-playing [class*="lp-pa-"] { animation-play-state: running; } /* moving line (2026-10-14): machine loops run while it plays */
body.lp-page .lp-pa-bob { animation: lp-pa-bob .5s ease-in-out infinite alternate; }
body.lp-page .lp-pa-feed { animation: lp-pa-feed 1.4s linear infinite; }
body.lp-page .lp-pa-spin { animation: lp-pa-spin .5s linear infinite; }
body.lp-page .lp-pa-rope { animation: lp-pa-rope 1.2s linear infinite; }
body.lp-page .lp-pa-knife { animation: lp-pa-knife 3.2s ease-in-out infinite alternate; }
body.lp-page .lp-pa-needle { animation: lp-pa-needle .28s ease-in-out infinite alternate; }
body.lp-page .lp-pa-sew { stroke-dasharray: 1 1; animation: lp-pa-sew 4s linear infinite; }
body.lp-page .lp-pa-seam { animation: lp-pa-seam .6s linear infinite; }
body.lp-page .lp-pa-iron { animation: lp-pa-iron 2s ease-in-out infinite alternate; }
body.lp-page .lp-pa-steam { animation: lp-pa-steam 1.6s ease-in-out infinite; }
body.lp-page .lp-pa-drop { animation: lp-pa-drop 2.6s ease-in-out infinite; }
@keyframes lp-pa-bob { to { transform: translateY(4px); } }
@keyframes lp-pa-feed { to { transform: translateY(8px); } }
@keyframes lp-pa-spin { to { transform: translateX(6px); } }
@keyframes lp-pa-rope { to { stroke-dashoffset: -21; } }
@keyframes lp-pa-knife { from { transform: translateX(-90px); } to { transform: translateX(60px); } }
@keyframes lp-pa-needle { to { transform: translateY(5px); } }
@keyframes lp-pa-sew { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes lp-pa-seam { to { stroke-dashoffset: -7; } }
@keyframes lp-pa-iron { from { transform: translateX(-14px); } to { transform: translateX(10px); } }
@keyframes lp-pa-steam { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes lp-pa-drop { 0% { transform: translateY(-30px); } 45%, 100% { transform: translateY(0); } }
/* the line: stations, dashed track, green progress, a small T-shirt travelling along it */
body.lp-page .lp-pline__line { position: relative; display: flex; justify-content: space-between; padding-top: 18px; }
body.lp-page .lp-pline__track,
body.lp-page .lp-pline__fill { position: absolute; left: 22px; top: 40px; height: 2px; }
body.lp-page .lp-pline__track { right: 22px; background: repeating-linear-gradient(90deg, var(--lp-line) 0 6px, transparent 6px 10px); }
body.lp-page .lp-pline__fill { width: calc((100% - 44px) * var(--p, 0)); background: var(--lp-green); transition: width .55s var(--lp-ease); }
body.lp-page .lp-pline__puck { position: absolute; top: 0; left: calc(22px + (100% - 44px) * var(--p, 0)); width: 22px; height: 16px; transform: translateX(-50%); transition: left .55s var(--lp-ease); }
body.lp-page .lp-pline__puck svg { display: block; width: 100%; height: 100%; }
body.lp-page .lp-sec .lp-pline__st { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; width: 44px; height: 62px; padding: 0; border: 0; background: none; }
body.lp-page .lp-sec .lp-pline__ring { display: grid; place-items: center; width: 44px; height: 44px; box-sizing: border-box; border: 1.5px solid var(--lp-line); border-radius: 50%; background: var(--lp-white); color: var(--lp-slate); transition: border-color .3s, color .3s, background-color .3s; }
body.lp-page .lp-pline__ring svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body.lp-page .lp-sec .lp-pline__n { font: 600 .6875rem/1 var(--lp-body); color: var(--lp-slate); font-variant-numeric: tabular-nums; }
body.lp-page .lp-sec .lp-pline__st.is-done .lp-pline__ring { border-color: var(--lp-green); color: var(--lp-green-ink); }
body.lp-page .lp-sec .lp-pline__st[aria-current="step"] .lp-pline__ring { border-color: var(--lp-blue); background: var(--lp-blue); color: var(--lp-white); }
body.lp-page .lp-sec .lp-pline__st[aria-current="step"] .lp-pline__n { color: var(--lp-blue); }
body.lp-page .lp-sec .lp-pline__st:hover .lp-pline__ring { border-color: var(--lp-blue); }
body.lp-page .lp-pline__mini { display: none; }
/* caption + controls; captions share one cell, so the height never jumps */
body.lp-page .lp-pline__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.lp-page .lp-pline__caps { display: grid; gap: 12px; flex: 1; min-width: 0; }
body.lp-page .lp-pline.is-live .lp-pline__cap { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility .35s; }
body.lp-page .lp-pline.is-live .lp-pline__cap.is-on { visibility: visible; opacity: 1; }
body.lp-page .lp-sec .lp-pline__k { margin: 0 0 6px; font: 600 var(--lp-fs-eyebrow)/1 var(--lp-display); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-green-ink); }
body.lp-page .lp-sec .lp-pline__t { margin: 0 0 4px; font: 700 1.125rem/1.25 var(--lp-display); color: var(--lp-ink); }
body.lp-page .lp-sec .lp-pline__cap p:not(.lp-pline__k):not(.lp-pline__t) { color: var(--lp-slate); }
body.lp-page .lp-pline__ctl { display: flex; flex: none; align-items: center; gap: 8px; }
body.lp-page .lp-pline:not(.is-live) .lp-pline__ctl { display: none; } /* buttons need JS */
body.lp-page .lp-sec .lp-pline :is(.lp-pline__btn, .lp-pline__play) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0; border: 1px solid var(--lp-line); border-radius: 999px; background: var(--lp-white); transition: border-color .2s, background-color .2s; }
body.lp-page .lp-sec .lp-pline .lp-pline__play { padding: 0 16px 0 14px; color: var(--lp-blue); font: 600 .875rem/1 var(--lp-display); }
body.lp-page .lp-sec .lp-pline .lp-pline__play[hidden] { display: none; }
body.lp-page .lp-sec .lp-pline :is(.lp-pline__btn:not(:disabled), .lp-pline__play):hover { border-color: var(--lp-blue); }
body.lp-page .lp-sec .lp-pline .lp-pline__btn:disabled { opacity: .4; cursor: default; }
body.lp-page .lp-pline :is(.lp-pline__btn, .lp-pline__play) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.lp-page .lp-pline .lp-pline__i-play { fill: currentColor; stroke: none; }
body.lp-page .lp-pline__i-pause,
body.lp-page .lp-pline__play[aria-pressed="true"] .lp-pline__i-play { display: none; }
body.lp-page .lp-pline__play[aria-pressed="true"] .lp-pline__i-pause { display: block; }
body.lp-page .lp-sec .lp-pline__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) and (max-width: 899px) { body.lp-page .lp-partners__media--line { max-width: 560px; } } /* stacked tablet layout: the drawing stays a sensible size */
@container lp-pline (max-width: 430px) {
  body.lp-page .lp-pline__in { gap: 12px; }
  body.lp-page .lp-pline__line { display: none; }
  body.lp-page .lp-pline.is-live .lp-pline__mini { display: flex; align-items: center; gap: 8px; }
  body.lp-page .lp-pline__dots { position: relative; display: flex; flex: 1; align-items: center; justify-content: space-between; }
  body.lp-page .lp-pline__dots::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: var(--lp-line); }
  body.lp-page .lp-pline__dots i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-line); transition: background-color .3s, transform .3s; }
  body.lp-page .lp-pline__dots i.is-done { background: var(--lp-green); }
  body.lp-page .lp-pline__dots i.is-on { background: var(--lp-blue); transform: scale(1.5); }
  body.lp-page .lp-pline__foot { flex-direction: column; gap: 12px; }
  body.lp-page .lp-pline__ctl { width: 100%; }
  body.lp-page .lp-sec .lp-pline .lp-pline__play { margin-left: auto; }
  body.lp-page .lp-sec .lp-pline__t { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.lp-page .lp-pline *, body.lp-page .lp-pline *::before, body.lp-page .lp-pline *::after { transition: none !important; animation: none !important; } /* !important: beats every transition/animation above, as in the prototype */
}


/* ===== 22. Background photos (2026-10-14) ======================================================= */
/* A section with a "Background photo" (lp_el_open adds .lp-photo + data-lp-photo) shows it under a navy wash like the
   hero. leap.js initPhotos sets --lp-photo once the section is near the screen (smaller file on phones), so the photo
   never competes with the hero on load; until then (and without JS) the section is plain navy. */
body.lp-page .lp-sec.lp-photo { background-color: var(--lp-navy); background-image: linear-gradient(90deg, rgba(6, 26, 58, .93) 0%, rgba(6, 26, 58, .80) 45%, rgba(6, 26, 58, .62) 100%), linear-gradient(0deg, rgba(6, 26, 58, .55) 0%, rgba(6, 26, 58, 0) 50%), var(--lp-photo, none); background-size: cover; background-position: center 55%; }
@media (max-width: 767.98px) { body.lp-page .lp-sec.lp-photo { background-image: linear-gradient(180deg, rgba(6, 26, 58, .70) 0%, rgba(6, 26, 58, .90) 35%, rgba(6, 26, 58, .96) 100%), var(--lp-photo, none); background-position: top center; } }
/* Sustainability loop on navy: the diagram's light-theme colours, lightened */
body.lp-page .lp-navy .lp-loop__label { color: var(--lp-on-dark-muted); }
body.lp-page .lp-navy .lp-loop__stop.is-on .lp-loop__label { color: var(--lp-white); }
body.lp-page .lp-navy .lp-loop__dot { border-color: rgba(255, 255, 255, .28); background: rgba(6, 26, 58, .55); color: var(--lp-on-dark-muted); }
body.lp-page .lp-navy .lp-loop__track { stroke: rgba(143, 211, 188, .55); }
body.lp-page .lp-navy .lp-loop__head { stroke: var(--lp-navy); }
body.lp-page .lp-navy .lp-loop__bar { background: rgba(255, 255, 255, .16); }
body.lp-page .lp-sec.lp-navy :is(.lp-loop__count, .lp-loop__step) { color: var(--lp-green-light); }
body.lp-page .lp-sec.lp-navy .lp-loop__card { background: rgba(6, 26, 58, .72); border-color: var(--lp-line-dark); } /* no backdrop blur: it repainted (flickered) over the photo while scrolling (2026-10-16) */
body.lp-page .lp-sec.lp-navy .lp-loop__done { background: rgba(255, 255, 255, .1); color: var(--lp-green-light); }

/* ===== 23. Customer reviews pop-up (2026-10-14) ================================================= */
/* A logo with a review is a button (lp_el_render_brands); its review opens in the strip's <dialog> (leap.js initQuotes). */
body.lp-page .lp-sec .lp-logo-btn { display: flex; align-items: center; margin: 0; padding: 6px; border: 0; border-radius: 10px; background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.lp-page .lp-sec .lp-logo-btn:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
body.lp-page .lp-sec .lp-marquee__list li:has(.lp-logo-btn:focus-visible) img { opacity: 1; filter: none; }
body.lp-page .lp-quote-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: clamp(28px, 4vw, 44px); border: 0; border-radius: var(--lp-radius); background: var(--lp-white); color: var(--lp-ink); box-shadow: 0 30px 80px -20px rgba(6, 26, 58, .45); box-sizing: border-box; overflow: auto; }
body.lp-page .lp-quote-dlg::backdrop { background: rgba(6, 26, 58, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.lp-page .lp-quote-dlg[open] { animation: lp-quote-in .28s var(--lp-ease); }
@keyframes lp-quote-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
body.lp-page .lp-quote-dlg .lp-quote-dlg__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: var(--lp-slate); cursor: pointer; }
body.lp-page .lp-quote-dlg .lp-quote-dlg__close:hover { background: var(--lp-cotton); color: var(--lp-ink); }
body.lp-page .lp-quote-dlg .lp-quote-dlg__close:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
body.lp-page .lp-quote-dlg__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
body.lp-page .lp-quote { display: grid; gap: 20px; margin: 0; }
body.lp-page .lp-quote[hidden] { display: none; }
body.lp-page .lp-quote .lp-quote__logo { display: block; width: auto; height: auto; max-width: 160px; max-height: 56px; margin: 0; }
body.lp-page .lp-sec .lp-quote-dlg blockquote.lp-quote__text { position: relative; margin: 0; padding: 0 0 0 20px; border: 0; border-left: 3px solid var(--lp-green); font: 500 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.6 var(--lp-display); color: var(--lp-ink); quotes: none; }
body.lp-page .lp-quote__text p { margin: 0; }
body.lp-page .lp-sec .lp-quote-dlg blockquote.lp-quote__text::before { content: none; } /* Salient's own blockquote bar */
body.lp-page .lp-quote__who { display: grid; gap: 2px; font-size: .9375rem; line-height: 1.4; }
body.lp-page .lp-quote__who strong { font: 600 1rem/1.3 var(--lp-display); color: var(--lp-ink); }
body.lp-page .lp-quote__who span { color: var(--lp-slate); }
@media (prefers-reduced-motion: reduce) { body.lp-page .lp-quote-dlg[open] { animation: none; } }

/* ===== 24. Still logo row (2026-10-15) ========================================================== */
/* Leap Logo Strip "One still row": each logo once, centred (client: certifications must not repeat). Phones keep one row:
   logos shrink to fit (max-width beats the inline width of sizing "file"), so the strip is no taller than the scrolling one. */
body.lp-page .lp-sec .lp-marquee__list.lp-logorow { justify-content: center; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); padding-inline: 0; }
@media (max-width: 767.98px) {
  body.lp-page .lp-sec .lp-marquee__list.lp-logorow { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  body.lp-page .lp-sec .lp-marquee__list.lp-logorow li { flex: 1 1 0; min-width: 0; justify-content: center; height: 72px; }
  body.lp-page .lp-sec .lp-marquee__list.lp-logorow img { max-width: 100%; height: auto; } /* width only: keeps the proportions */
}

/* ===== 25. Text pages (2026-10-16) =============================================================== */
/* Leap Text (Privacy Policy, Terms of Use): one reading-width column; headings inside the text follow the site's type. */
body.lp-page .lp-sec.lp-text-sec .lp-head { margin-bottom: clamp(24px, 3vw, 40px); }
body.lp-page .lp-sec .lp-legal { max-width: 72ch; color: var(--lp-slate); }
body.lp-page .lp-sec .lp-legal :is(h2, h3) { margin: 1.8em 0 .5em; font-family: var(--lp-display); color: var(--fg); letter-spacing: -.01em; }
body.lp-page .lp-sec .lp-legal h2 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); line-height: 1.3; font-weight: 600; }
body.lp-page .lp-sec .lp-legal h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
body.lp-page .lp-sec .lp-legal > :first-child { margin-top: 0; }
body.lp-page .lp-sec .lp-legal li + li { margin-top: .5em; }
body.lp-page .lp-sec .lp-legal a { color: var(--lp-blue); text-decoration: underline; text-underline-offset: 2px; }
body.lp-page .lp-sec .lp-text-sec__note { margin-top: 2.5em; font-size: var(--lp-fs-small); color: var(--lp-slate); }

/* ===== 26. Motion polish (2026-10-16, client 14 Oct: "subtle animations, smooth transitions, interactive elements") ===== */
/* v2 pages only; nothing here runs with reduced motion, and hover effects only on devices that can hover.
   Cards answer the pointer (lift + icon fills), buttons press, the FAQ opens smoothly, logos come forward,
   the eyebrow dot pops in with its heading, form fields ease into focus. */
@media (prefers-reduced-motion: no-preference) {
  body.lp-page.lp-v2 .lp-sec .lp-icon { transition: background-color .3s var(--lp-ease), transform .45s cubic-bezier(.34, 1.56, .64, 1); }
  body.lp-page.lp-v2 .lp-sec .lp-icon svg { transition: stroke .3s var(--lp-ease); }
  /* keeps the scroll-reveal fade + stagger of §19 (overriding it made cards pop in: flicker fix 2026-10-16); the hover lift uses `translate` */
  body.lp-page.lp-v2 .lp-sec :is(.lp-card, .lp-tier, .lp-fact):not(.lp-loop__card) { transition: opacity var(--lp-dur) var(--lp-ease) calc(var(--lp-i, 0) * 80ms), transform var(--lp-dur) var(--lp-ease) calc(var(--lp-i, 0) * 80ms), translate var(--lp-hover) var(--lp-ease), box-shadow var(--lp-hover) var(--lp-ease), border-color var(--lp-hover) var(--lp-ease); }
  body.lp-page.lp-v2 .lp-sec .lp-card .lp-h3 { transition: color .25s var(--lp-ease); }
  body.lp-page.lp-v2 .lp-sec .lp-btn { transition: transform .15s var(--lp-ease), color var(--lp-hover) var(--lp-ease), border-color var(--lp-hover) var(--lp-ease); }
  body.lp-page.lp-v2 .lp-sec .lp-btn:active { transform: scale(.97); }
  body.lp-page.lp-v2 .lp-sec .lp-field :is(input, select, textarea) { transition: border-color .2s var(--lp-ease), box-shadow .2s var(--lp-ease); }

  /* eyebrow dot pops in when its heading reveals */
  html.lp-js body.lp-page.lp-v2 .lp-sec [data-lp-reveal] .lp-eyebrow::before { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .25s; } /* lp-js: without JS the dot just shows */
  html.lp-js body.lp-page.lp-v2 .lp-sec [data-lp-reveal].is-in .lp-eyebrow::before { transform: scale(1); }

  /* FAQ: answers open and close smoothly (browsers without ::details-content simply snap, as before) */
  body.lp-page.lp-v2 .lp-faq__item { interpolate-size: allow-keywords; }
  body.lp-page.lp-v2 .lp-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--lp-ease), content-visibility .35s allow-discrete; }
  body.lp-page.lp-v2 .lp-faq__item[open]::details-content { block-size: auto; }
  body.lp-page.lp-v2 .lp-sec .lp-faq__item { transition: background-color .25s var(--lp-ease), border-color .25s var(--lp-ease); }

  /* logos */
  body.lp-page.lp-v2 .lp-sec .lp-marquee__list img { transition: opacity var(--lp-hover) var(--lp-ease), filter var(--lp-hover) var(--lp-ease), transform .35s var(--lp-ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* service, product and partner cards: the icon fills, the title turns blue (the lift itself is §6 .lp-card--lift) */
  body.lp-page.lp-v2 .lp-sec :is(.lp-card--lift, .lp-catrow):is(:hover, :focus-within) .lp-icon { background: var(--lp-green); transform: scale(1.06) rotate(-4deg); }
  body.lp-page.lp-v2 .lp-sec :is(.lp-card--lift, .lp-catrow):is(:hover, :focus-within) .lp-icon svg { stroke: var(--lp-white); }
  body.lp-page.lp-v2 .lp-sec .lp-card--lift:is(:hover, :focus-within) .lp-h3 { color: var(--lp-blue); }
  body.lp-page.lp-v2 .lp-sec .lp-catrow:is(:hover, :focus-within) { border-color: var(--lp-blue); box-shadow: var(--lp-shadow); }
  /* key figures and MOQ tiers: a gentle lift */
  body.lp-page.lp-v2 .lp-sec :is(.lp-fact, .lp-tier):hover { translate: 0 -3px; border-color: var(--lp-blue); box-shadow: 0 14px 30px -20px rgba(6, 26, 58, .3); }
  /* the reveal's end state (… [data-lp-reveal].is-in { transform: none }) outranked the §6 hover lift: lift with `translate` instead */
  body.lp-page.lp-v2 .lp-sec .lp-card--lift:is(:hover, :focus-within) { transform: none; translate: 0 -4px; }
  /* FAQ rows tint on hover */
  body.lp-page.lp-v2 .lp-sec .lp-faq__item:hover { border-color: var(--lp-blue); }
  /* customer logos with a review and certificate logos come forward */
  body.lp-page.lp-v2 .lp-sec .lp-logo-btn:is(:hover, :focus-visible) img,
  body.lp-page.lp-v2 .lp-sec .lp-logorow li:hover img { transform: scale(1.08); }
}

/* ===== 27. Sustainability card crossfade (2026-10-16, flicker fix) =============================== */
/* While held, the practice cards swapped with display: none → grid: the old card vanished in one frame and the new one
   faded in from almost nothing, so each change blinked, and cards of different length changed the column's height.
   v2: all cards share one grid cell (height = the tallest, steady) and crossfade. The homepage keeps the original. */
body.lp-page.lp-v2 .lp-sec.lp-loop.is-live .lp-loop__cards { display: grid; }
body.lp-page.lp-v2 .lp-sec.lp-loop.is-live .lp-loop__card { display: grid; grid-area: 1 / 1; opacity: 0; visibility: hidden; animation: none; transition: opacity .35s var(--lp-ease), visibility 0s linear .35s; }
body.lp-page.lp-v2 .lp-sec.lp-loop.is-live .lp-loop__card.is-active { opacity: 1; visibility: visible; transition: opacity .35s var(--lp-ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { body.lp-page.lp-v2 .lp-sec.lp-loop.is-live .lp-loop__card { transition: none; } }

/* ===== 28. Catalogue previews (2026-10-20, client 14 Oct: "preview visual samples before asking for an email") === */
body.lp-page .lp-sec .lp-peek { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: 100%; margin: 4px 0 0; padding: 10px; border: 1px solid var(--card-line, var(--lp-line)); border-radius: var(--lp-radius-sm); background: var(--lp-cotton); box-shadow: none; color: var(--lp-ink); font: 600 .9375rem/1.35 var(--lp-display); text-align: left; cursor: pointer; transition: border-color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-peek:hover { border-color: var(--lp-blue); }
body.lp-page .lp-sec .lp-peek:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
body.lp-page .lp-peek__thumbs { display: flex; }
body.lp-page .lp-peek__thumbs img { display: block; width: 44px; height: 44px; margin: 0 0 0 -10px; object-fit: cover; object-position: top; border: 2px solid var(--lp-white); border-radius: 6px; background: var(--lp-white); box-shadow: 0 2px 6px rgba(6, 26, 58, .15); }
body.lp-page .lp-peek__thumbs img:first-child { margin-left: 0; }
body.lp-page .lp-peek__label { display: grid; gap: 2px; }
body.lp-page .lp-peek__count { font: 400 .8125rem/1.3 var(--lp-body, inherit); color: var(--lp-slate); }
body.lp-page .lp-quote-dlg.lp-peek-dlg { width: min(1000px, calc(100vw - 32px)); }
body.lp-page .lp-peek-dlg .lp-h3 { margin: 4px 48px 20px 0; }
body.lp-page .lp-peek__pages { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
body.lp-page .lp-peek__pages li { margin: 0; padding: 0; }
body.lp-page .lp-peek__pages img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 160px); margin: 0 auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--lp-line); } /* every page fits the screen, A4 ones too */
body.lp-page .lp-peek__more { position: sticky; bottom: calc(-1 * clamp(28px, 4vw, 44px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 20px calc(-1 * clamp(28px, 4vw, 44px)) calc(-1 * clamp(28px, 4vw, 44px)); padding: 16px clamp(28px, 4vw, 44px); border-top: 1px solid var(--lp-line); background: var(--lp-white); }
body.lp-page .lp-peek__more p { margin: 0; color: var(--lp-slate); font-size: .9375rem; }
/* homepage rows: the product photo opens the preview (one-page site, 2026-10-20) */
body.lp-page .lp-sec .lp-peek-photo { position: relative; display: block; margin: 0; padding: 0; border: 0; border-radius: var(--lp-radius-sm); background: none; box-shadow: none; line-height: 0; cursor: zoom-in; }
body.lp-page .lp-sec .lp-peek-photo:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
body.lp-page .lp-sec .lp-peek-photo .lp-peek-photo__tag { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 0; border-radius: 6px; background: rgba(6, 26, 58, .78); color: var(--lp-white); font: 600 .6875rem/1.2 var(--lp-display); letter-spacing: .02em; text-align: center; }
body.lp-page .lp-sec .lp-peek-photo:hover .lp-peek-photo__tag, body.lp-page .lp-sec .lp-peek-photo:focus-visible .lp-peek-photo__tag { background: var(--lp-blue); }
@media (max-width: 767.98px) {
  body.lp-page.lp-v2 .lp-sec.lp-sec .lp-catalogues .lp-catrow > .lp-peek-photo { position: absolute; left: 0; top: 9px; z-index: 2; } /* above the row-wide link area */
  body.lp-page.lp-v2 .lp-sec.lp-sec .lp-catalogues .lp-catrow > .lp-peek-photo .lp-catrow__img { position: static; width: 52px; height: 52px; }
  body.lp-page .lp-sec .lp-peek-photo .lp-peek-photo__tag { left: 2px; right: 2px; bottom: 2px; padding: 1px 0; font-size: .5625rem; }
}

/* ===== 29. Team as a moving strip (2026-10-20, client: "carousel like Brands we source for", small photos) ===== */
body.lp-page .lp-sec.lp-team-strip .lp-head { margin-bottom: clamp(24px, 3vw, 36px); }
body.lp-page .lp-marquee--team .lp-marquee__track { animation-duration: 70s; }
body.lp-page .lp-sec .lp-marquee--team .lp-marquee__list { align-items: flex-start; gap: clamp(24px, 3vw, 40px); padding-inline: clamp(12px, 1.5vw, 20px); }
body.lp-page .lp-sec .lp-marquee--team .lp-marquee__list li.lp-person { display: grid; justify-items: center; gap: 10px; width: 152px; height: auto; text-align: center; }
body.lp-page .lp-sec .lp-marquee--team .lp-person__photo { width: 120px; height: 120px; aspect-ratio: auto; border-radius: 50%; background: var(--lp-mist); }
body.lp-page .lp-sec .lp-marquee--team .lp-person__photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 20%; opacity: 1; filter: none; }
body.lp-page .lp-sec .lp-marquee--team .lp-person__photo--empty { font-size: 2rem; }
body.lp-page .lp-sec .lp-marquee--team .lp-person__name { font-size: .9375rem; line-height: 1.3; }
body.lp-page .lp-sec .lp-marquee--team .lp-person__role { font-size: .8125rem; line-height: 1.35; }
body.lp-page .lp-sec .lp-team-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: clamp(28px, 3.5vw, 44px); padding: clamp(20px, 2.4vw, 28px) clamp(20px, 3vw, 36px); border-radius: var(--lp-radius); background: var(--lp-blue); color: var(--lp-white); }
body.lp-page .lp-sec .lp-team-cta .lp-h3 { color: var(--lp-white); }
body.lp-page .lp-sec .lp-team-cta p { margin-top: 4px; color: rgba(255, 255, 255, .85); font-size: .9375rem; }
@media (max-width: 767.98px) {
  body.lp-page .lp-sec .lp-marquee--team .lp-marquee__list { gap: 16px; }
  body.lp-page .lp-sec .lp-marquee--team .lp-marquee__list li.lp-person { width: 120px; gap: 8px; }
  body.lp-page .lp-sec .lp-marquee--team .lp-person__photo { width: 88px; height: 88px; }
  body.lp-page .lp-sec .lp-marquee--team .lp-person__photo--empty { font-size: 1.5rem; }
  body.lp-page .lp-sec .lp-team-cta .lp-btn { width: 100%; }
}

/* ===== 30. Homepage catalogues as photo cards (2026-10-20, client: "like the Apparel section on the products page") ===== */
body.lp-page .lp-sec .lp-card__media--icon { display: grid; place-items: center; background: var(--lp-mist); }
body.lp-page .lp-sec .lp-card__media--icon .lp-icon { width: 96px; height: 96px; background: var(--lp-white); }
body.lp-page .lp-sec .lp-card__media--icon .lp-icon svg { width: 44px; height: 44px; }
@media (max-width: 767.98px) {
  body.lp-page .lp-sec .lp-card__media--icon .lp-icon { width: 64px; height: 64px; }
  body.lp-page .lp-sec .lp-card__media--icon .lp-icon svg { width: 30px; height: 30px; }
}
/* photo cards: the photo is the preview button (2026-10-20, client: the preview mini card took too much space) */
body.lp-page .lp-sec .lp-catcards .lp-peek-photo { width: 100%; }
body.lp-page .lp-sec .lp-catcards .lp-peek-photo .lp-card__media { border-radius: inherit; }
body.lp-page .lp-sec .lp-catcards .lp-peek-photo .lp-peek-photo__tag { left: auto; right: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; font-size: .8125rem; }
@media (max-width: 767.98px) { body.lp-page .lp-sec .lp-catcards .lp-peek-photo .lp-peek-photo__tag { right: 6px; bottom: 6px; padding: 4px 9px; font-size: .6875rem; } }
/* catalogue downloads (2026-10-20): up to two buttons in the preview footer, two links on a card */
body.lp-page .lp-peek__btns { display: flex; flex-wrap: wrap; gap: 10px; }
body.lp-page .lp-sec .lp-catcards .lp-card > .lp-link + .lp-link { margin-top: 0; } /* only the first link is pushed to the card bottom */

/* ===== 31. Catalogue card photo slides (2026-10-20, client: photos change automatically, with arrows; leap.js initSlides) ===== */
/* square white frame, whole product visible (the client's photos are mostly cut-outs on white, in mixed shapes) */
body.lp-page .lp-sec .lp-slides { position: relative; }
body.lp-page .lp-sec .lp-slides .lp-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--lp-white); border: 1px solid var(--card-line); box-sizing: border-box; }
body.lp-page .lp-sec .lp-slides .lp-card__media img { position: absolute; inset: 0; object-fit: contain; opacity: 0; transition: opacity .7s var(--lp-ease); }
body.lp-page .lp-sec .lp-slides .lp-card__media img.is-on { opacity: 1; }
body.lp-page .lp-sec .lp-slides .lp-slides__btn { position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; min-width: 0; margin: -18px 0 0; padding: 0; border-radius: 50% !important; background: rgba(255, 255, 255, .92); } /* theme: every button 8px !important */
body.lp-page .lp-sec .lp-slides .lp-slides__btn--prev { left: 8px; }
body.lp-page .lp-sec .lp-slides .lp-slides__btn--next { right: 8px; }
body.lp-page .lp-sec .lp-slides .lp-slides__btn:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
body.lp-page .lp-sec .lp-slides .lp-slides__btn svg { width: 16px; height: 16px; }
@media (max-width: 767.98px) {
  body.lp-page .lp-sec .lp-slides .lp-slides__btn { width: 30px; height: 30px; margin-top: -15px; }
  body.lp-page .lp-sec .lp-slides .lp-slides__btn--prev { left: 4px; }
  body.lp-page .lp-sec .lp-slides .lp-slides__btn--next { right: 4px; }
  body.lp-page .lp-sec .lp-slides .lp-slides__btn svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { body.lp-page .lp-sec .lp-slides .lp-card__media img { transition: none; } }
/* catalogue card text one step smaller (2026-10-21, owner: "make the text a bit smaller"; undo: delete these rules) */
body.lp-page .lp-sec.lp-sec .lp-cardgrid.lp-catcards[data-lp-accordion] > .lp-card > .lp-h3 { font-size: 1.1875rem; line-height: 1.3; }
body.lp-page .lp-sec.lp-sec .lp-cardgrid.lp-catcards[data-lp-accordion] > .lp-card > p { font-size: .875rem; line-height: 1.6; }
body.lp-page .lp-sec.lp-sec .lp-cardgrid.lp-catcards[data-lp-accordion] > .lp-card > .lp-link { font-size: .875rem; }
@media (max-width: 767.98px) {
  body.lp-page .lp-sec.lp-sec .lp-cardgrid.lp-catcards[data-lp-accordion] > .lp-card > .lp-h3 { font-size: .9375rem; }
  body.lp-page .lp-sec.lp-sec .lp-cardgrid.lp-catcards[data-lp-accordion] > .lp-card > p, body.lp-page .lp-sec.lp-sec .lp-cardgrid.lp-catcards[data-lp-accordion] > .lp-card > .lp-link { font-size: .8125rem; }
}
/* figure cards whose "number" is a word (2026-10-21: "Pakistan" / "Bangladesh" blocks): sized to fit the card, also under leap-tune.css */
body.lp-page.lp-v2 .lp-sec.lp-sec .lp-fact__num--word { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.375rem); white-space: nowrap; }
@media (max-width: 767.98px) { body.lp-page.lp-v2 .lp-sec.lp-sec .lp-fact__num--word { font-size: 1.375rem; } }
/* Sustainability loop, click mode (2026-10-21, client: no scroll hold, each practice opens with one click; leap.js loopLive) */
body.lp-page .lp-sec.lp-loop[data-lp-loop-click] .lp-loop__meter { display: none; } /* no progress to show */
body.lp-page .lp-sec.lp-loop[data-lp-loop-click] .lp-loop__stop { cursor: pointer; }
body.lp-page .lp-sec.lp-loop[data-lp-loop-click] .lp-loop__stop.is-sel .lp-loop__dot { background: var(--lp-blue); border-color: var(--lp-white); transform: scale(1.18); }
/* a white section straight after the white hero (2026-10-21: About moved up): no double padding between them (owner: one calm opening) */
@media (min-width: 768px) { body.lp-page.lp-v2 .wpb_row:has(> .row_col_wrap_12 .lp-sec--hero.lp-white) + .wpb_row .lp-sec.lp-white:not(.lp-sec--hero) { padding-top: clamp(40px, 3.5vw, 56px); } }

/* ===== 32. Catalogue download menu (2026-10-22, client chose "option C"; elements.php lp_el_downloads, leap.js initDownloads) ===== */
body.lp-page .lp-sec .lp-dl { position: relative; margin-top: auto; }
body.lp-page .lp-sec .lp-dl summary { display: inline-flex; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 999px; background: var(--lp-blue); color: var(--lp-white); font: 600 .875rem/1.2 var(--lp-display); cursor: pointer; list-style: none; transition: background-color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec .lp-dl summary::-webkit-details-marker { display: none; }
body.lp-page .lp-sec .lp-dl summary:hover { background: var(--lp-ink); }
body.lp-page .lp-sec .lp-dl summary:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 3px; }
body.lp-page .lp-dl svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.lp-page .lp-dl[open] .lp-dl__chev { rotate: 180deg; }
body.lp-page .lp-dl .lp-dl__chev { margin-left: 4px; }
body.lp-page .lp-sec .lp-dl__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; margin: 0; padding: 4px 12px; list-style: none; border: 1px solid var(--card-line); border-radius: 12px; background: var(--lp-white); box-shadow: 0 16px 32px -12px rgba(6, 26, 58, .3); }
body.lp-page .lp-sec .lp-dl__menu li { margin: 0; border-bottom: 1px solid var(--card-line); }
body.lp-page .lp-sec .lp-dl__menu li:last-child { border: 0; }
body.lp-page .lp-sec .lp-dl__menu a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 2px; color: var(--lp-blue); text-decoration: none; }
body.lp-page .lp-sec .lp-dl__menu a svg { margin-top: 2px; }
body.lp-page .lp-sec .lp-dl__menu span { display: flex; flex-direction: column; gap: 2px; }
body.lp-page .lp-sec .lp-dl__menu b { font: 600 .875rem/1.3 var(--lp-display); }
body.lp-page .lp-sec .lp-dl__menu small { color: var(--muted); font-size: .75rem; }
body.lp-page .lp-sec .lp-dl__menu a:is(:hover, :focus-visible) b { text-decoration: underline; }
body.lp-page .lp-sec .lp-catcards .lp-card:has(.lp-dl[open]) { z-index: 5; } /* the open menu stays above the next card */
body.lp-page .row_col_wrap_12:has(.lp-dl[open]) { z-index: 11; } /* every WPBakery row is z-index 10: lift this one so the next section does not cover the menu */
@media (max-width: 767.98px) {
  body.lp-page .lp-sec .lp-dl summary { padding: 9px 12px; font-size: .8125rem; }
  body.lp-page .lp-sec .lp-dl .lp-dl__w, body.lp-page .lp-sec .lp-dl__menu small { display: none; }
  body.lp-page .lp-sec .lp-dl__menu { min-width: 0; padding: 2px 10px; }
  body.lp-page .lp-sec .lp-dl__menu a { gap: 6px; padding: 8px 0; }
  body.lp-page .lp-sec .lp-dl__menu b { font-size: .8125rem; }
}
/* ===== 33. Client feedback 30 Oct (v2) ======================================================= */
/* About figures: content from the top, so numbers and labels line up across a row (bottom-aligned cards moved with the label's line count) */
body.lp-page.lp-v2 .lp-sec .lp-fact { justify-content: flex-start; }
/* Every figure the same size as the Pakistan / Bangladesh words, so no box looks louder than the others (client 2026-10-30) */
body.lp-page.lp-v2 .lp-sec.lp-sec .lp-fact__num { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.375rem); }
@media (max-width: 767.98px) { body.lp-page.lp-v2 .lp-sec.lp-sec .lp-fact__num { font-size: 1.375rem; } }
/* Cards in a row share line positions, so a label that wraps to two lines moves its neighbour's small text down too (client 2026-10-30) */
@supports (grid-template-rows: subgrid) {
  body.lp-page.lp-v2 .lp-sec .lp-facts { row-gap: 0; }
  body.lp-page.lp-v2 .lp-sec .lp-fact { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; align-content: start; margin-bottom: 10px; }
}
/* a card with one catalogue: the "Download catalogue" button is a direct link with the menu button's look */
body.lp-page .lp-sec a.lp-dl--one { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 999px; background: var(--lp-blue); color: var(--lp-white); font: 600 .875rem/1.2 var(--lp-display); text-decoration: none; transition: background-color var(--lp-hover) var(--lp-ease); }
body.lp-page .lp-sec a.lp-dl--one:hover { background: var(--lp-ink); color: var(--lp-white); }
body.lp-page .lp-sec a.lp-dl--one:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 3px; }
body.lp-page .lp-sec a.lp-dl--one svg { margin-left: 4px; }
@media (max-width: 767.98px) { body.lp-page .lp-sec a.lp-dl--one { padding: 9px 12px; font-size: .8125rem; } }

/* ===== 34. Client feedback 4 Nov (v2): taglines, smaller service boxes, tighter sections ===== */
body.lp-page .lp-sec .lp-tagline { font-style: italic; font-weight: 500; color: var(--lp-blue); }
body.lp-page .lp-navy .lp-tagline { color: var(--lp-green-light); }
body.lp-page .lp-sec .lp-cardgrid .lp-card .lp-tagline { margin-top: -4px; }
@media (min-width: 768px) {
  /* "reduce the vertical spacing between sections": was clamp(88px, 10vw, 144px) in leap-tune.css */
  html body.lp-page.lp-v2 { --lp-sec: clamp(56px, 6vw, 88px); } /* html: leap-tune.css loads later */
  /* "reduce the size of boxes": service cards were padded up to 40 px (leap-tune.css) */
  body.lp-page.lp-v2 .lp-sec .lp-cardgrid:not(.lp-catcards) > .lp-card { gap: 8px; padding: clamp(18px, 1.8vw, 24px); }
  body.lp-page.lp-v2 .lp-sec .lp-cardgrid:not(.lp-catcards) .lp-card p { line-height: 1.55; }
}
@media (max-width: 767.98px) {
  body.lp-page.lp-v2 { --lp-sec: 32px; } /* was 40px */
  body.lp-page.lp-v2 .lp-sec .lp-tier > .lp-tagline::after { content: " "; }
}
/* Partner tiers: bar, title, order size, tagline and text line up across the three cards (owner 2026-11-04, screenshot);
   rows shared via subgrid, so a two-line title or tagline pushes that row down in every card. Phones stack the tiers. */
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    body.lp-page.lp-v2 .lp-sec .lp-tiers { grid-template-rows: repeat(5, auto); row-gap: 0; }
    body.lp-page.lp-v2 .lp-sec .lp-tiers > .lp-tier { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 8px; align-content: start; }
    body.lp-page.lp-v2 .lp-sec .lp-tiers > .lp-tier > * { margin: 0; align-self: start; }
  }
}
/* Phones: the tier description starts on its own line under "order size · tagline" (owner 2026-11-04 screenshot) */
@media (max-width: 767.98px) {
  body.lp-page.lp-v2 .lp-sec .lp-tier > p:not(.lp-tier__moq):not(.lp-tagline) { display: block; margin-top: 2px; }
  body.lp-page.lp-v2 .lp-sec .lp-tier > .lp-tagline::after { content: none; }
}

/* ===== 35. Client feedback 6 Nov (v2) ===== */
/* About: the figure boxes sit in the vertical centre of the text column (client: "re-align the boxes so they sit in the center") */
body.lp-page.lp-v2 .lp-sec .lp-split:has(> .lp-about__text) { align-items: center; }
/* Services icons, option C "icons that draw themselves" (owner picked C, 2026-11-07; demo concepts/feedback-1106/icons/):
   green ring, blue line icon (drawn on scroll by leap.js iconDraw, redrawn on hover), step number behind each card (CSS counter). */
body.lp-page.lp-v2 #services .lp-cardgrid { counter-reset: lp-svc; }
body.lp-page.lp-v2 #services .lp-cardgrid > .lp-card { counter-increment: lp-svc; position: relative; overflow: hidden; }
body.lp-page.lp-v2 #services .lp-cardgrid > .lp-card > * { position: relative; z-index: 1; }
body.lp-page.lp-v2 #services .lp-icon { width: 58px; height: 58px; box-sizing: border-box; background: var(--lp-white); border: 2px solid var(--lp-green); transition: border-color .25s ease; }
body.lp-page.lp-v2 #services .lp-icon svg { width: 28px; height: 28px; stroke: var(--lp-blue); stroke-width: 1.8; }
body.lp-page.lp-v2 #services .lp-card:is(:hover, :focus-within) .lp-icon { background: var(--lp-white); border-color: var(--lp-blue); transform: none; }
body.lp-page.lp-v2 #services .lp-card:is(:hover, :focus-within) .lp-icon svg { stroke: var(--lp-blue); }
@media (min-width: 768px) {
  body.lp-page.lp-v2 #services .lp-cardgrid > .lp-card::before { content: counter(lp-svc, decimal-leading-zero); position: absolute; right: 16px; top: 4px; z-index: 0; font: 800 72px/1 var(--lp-display); letter-spacing: -.04em; color: #E3ECFA; pointer-events: none; }
}
@media (max-width: 767.98px) { body.lp-page.lp-v2 #services .lp-icon { width: 44px; height: 44px; } body.lp-page.lp-v2 #services .lp-icon svg { width: 22px; height: 22px; } }

/* ===== 36. Simple phone menu (2026-11-08, client: the off-canvas menu was confusing and its links did not work; leap.js initPhoneMenu) ===== */
.lp-mnav__btn, .lp-mnav { display: none; }
@media (max-width: 999px) {
  body.lp-page #header-outer .slide-out-widget-area-toggle.mobile-icon,
  body.lp-page #slide-out-widget-area, body.lp-page #slide-out-widget-area-bg { display: none !important; }
  body.lp-page #header-outer .lp-mnav__btn { display: inline-grid; place-items: center; position: absolute; top: 50%; right: 12px; translate: 0 -50%; z-index: 3; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50% !important; background: var(--lp-blue); color: var(--lp-white); box-shadow: none; cursor: pointer; } /* !important: the theme rounds buttons with its own radius */
  body.lp-page #header-outer .lp-mnav__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  body.lp-page #header-outer .lp-mnav__btn .lp-mnav__close,
  body.lp-page #header-outer .lp-mnav__btn[aria-expanded="true"] .lp-mnav__open { display: none; }
  body.lp-page #header-outer .lp-mnav__btn[aria-expanded="true"] .lp-mnav__close { display: inline; }
  body.lp-page #header-outer .lp-mnav__btn:focus-visible { outline: 2px solid var(--lp-white); outline-offset: 2px; box-shadow: 0 0 0 4px var(--lp-blue); }
  body.lp-page #header-outer .lp-mnav:not([hidden]) { display: block; position: fixed; top: calc(var(--lp-mnav-top, 72px) + 8px); left: 12px; right: 12px; z-index: 10000; max-height: calc(100svh - var(--lp-mnav-top, 72px) - 24px); overflow-y: auto; padding: 6px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-white); box-shadow: 0 24px 48px -24px rgba(6, 26, 58, .45); animation: lp-mnav-in .18s var(--lp-ease); }
  body.lp-page #header-outer .lp-mnav ul { list-style: none; margin: 0; padding: 0; }
  body.lp-page #header-outer .lp-mnav li { margin: 0; padding: 0; border-bottom: 1px solid var(--lp-line); }
  body.lp-page #header-outer .lp-mnav li:last-child { border-bottom: 0; }
  body.lp-page #header-outer .lp-mnav a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 14px; font: 600 1.0625rem/1.2 var(--lp-display); color: var(--lp-ink) !important; text-decoration: none; border-radius: 10px; }
  body.lp-page #header-outer .lp-mnav a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--lp-line); border-right: 2px solid var(--lp-line); rotate: 45deg; }
  body.lp-page #header-outer .lp-mnav a:is(:hover, :focus-visible) { background: var(--lp-mist); }
  body.lp-page #header-outer .lp-mnav a.lp-current { color: var(--lp-blue) !important; }
  body.lp-page #header-outer .lp-mnav a.lp-current::after { border-color: var(--lp-blue); }
  body.lp-page #header-outer .lp-mnav a:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: -2px; }
}
@keyframes lp-mnav-in { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { body.lp-page #header-outer .lp-mnav { animation: none !important; } }