/*
    Public marketing site.

    Ported from the design prototype, which was a React page built entirely out
    of inline styles at a fixed 1420 px width — it had no stylesheet, no reuse
    and no layout below desktop. Everything here is the same design expressed as
    reusable classes, with the fixed widths turned into fluid ones so the site
    works from 320 px up.

    Conventions:
      .lp-*        public landing components
      is-*         state toggled by landing.js
      --lp-*       design tokens

    Colours are the prototype's, unchanged. They are named by role rather than
    by hue so a rebrand touches this block and nothing else.
*/

:root {
    /* Surfaces, darkest to lightest */
    --lp-bg: #102C48;
    --lp-bg-deep: #08182B;
    --lp-bg-hero: #153552;
    --lp-bg-band: #163A5E;
    --lp-bg-card: #1B4066;
    --lp-bg-card-alt: #1E4468;
    --lp-bg-aside: #1F4A70;
    --lp-bg-well: #0B2038;

    /* Light bands. The rest of the site is navy on navy, so these are the only
       tokens that invert it. Kept together here, rather than spelled out at
       each override, so the light surface can be retuned in one place. */
    --lp-bg-light: #E6EDF5;
    --lp-bg-light-card: #F4F8FC;
    --lp-line-ink: rgba(16, 44, 72, 0.13);
    --lp-text-ink: #0C2340;
    --lp-text-ink-body: #3E5C7A;
    --lp-text-ink-faint: #4F6684;
    --lp-shadow-light: 0 10px 26px rgba(16, 44, 72, 0.09);

    /* Card gradients */
    --lp-grad-card: linear-gradient(165deg, #14314F 0%, #163A5E 100%);
    --lp-grad-card-cool: linear-gradient(170deg, #143255 0%, #1A3D60 100%);
    --lp-grad-card-lift: linear-gradient(170deg, #24507B 0%, #1A3D60 100%);
    --lp-grad-red: linear-gradient(180deg, #DF2431, #B80F1D);
    --lp-grad-red-hover: linear-gradient(180deg, #EE3B46, #CF1725);

    /* Brand */
    --lp-red: #C8102E;
    --lp-red-bright: #E01230;
    --lp-red-dark: #A50D26;
    --lp-accent: #FF3B57;
    --lp-accent-hot: #FF2E4D;
    --lp-blue: #3A76BD;
    --lp-green: #4FBF7B;

    /* Text, brightest to dimmest */
    --lp-text: #FFFFFF;
    --lp-text-body: #E8EEF4;
    --lp-text-muted: #C0D0E0;
    --lp-text-soft: #B9C8D8;
    --lp-text-dim: #A9BCCE;
    --lp-text-meta: #A9BFD4;
    --lp-text-faint: #9FB3CA;
    --lp-text-footer: #93A6BB;
    --lp-text-label: #7FA3C9;
    --lp-text-quiet: #6B819A;
    --lp-text-link: #C6D2E0;
    --lp-text-icon: #C6D8EC;

    /* Lines */
    --lp-line: rgba(255, 255, 255, 0.14);
    --lp-line-strong: rgba(255, 255, 255, 0.16);
    --lp-line-input: rgba(255, 255, 255, 0.18);
    --lp-line-pill: rgba(255, 255, 255, 0.28);

    /* Elevation */
    --lp-shadow-card: 0 16px 34px rgba(0, 0, 0, 0.36);
    --lp-shadow-card-hover: 0 26px 50px rgba(0, 0, 0, 0.5);
    --lp-shadow-panel: 0 20px 46px rgba(0, 0, 0, 0.38);
    --lp-shadow-modal: 0 40px 90px rgba(0, 0, 0, 0.45);

    /* Type */
    --lp-font-display: 'Archivo', system-ui, sans-serif;
    --lp-font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --lp-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    /* The prototype set eyebrows in Tahoma. Kept, with a stack that degrades
       sensibly on the platforms that do not ship it. */
    --lp-font-eyebrow: Tahoma, Verdana, Geneva, sans-serif;

    /* Rhythm. The prototype's 1420 px canvas with 40 px gutters, made fluid. */
    --lp-max: 1420px;
    --lp-max-wide: 1760px;
    --lp-gutter: clamp(20px, 4vw, 40px);
    --lp-section-y: clamp(56px, 8vw, 96px);
    --lp-radius: 10px;
}

/* ------------------------------------------------------------------ *
   Base
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.lan-public {
    margin: 0;
    background: var(--lp-bg);
    color: var(--lp-text-body);
    font-family: var(--lp-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.lan-public h1,
.lan-public h2,
.lan-public h3 {
    font-family: var(--lp-font-display);
    color: var(--lp-text);
    margin: 0;
}

.lan-public p {
    margin: 0;
}

.lan-public img {
    max-width: 100%;
}

/*
 * Links inherit the surrounding text colour — but buttons must not. This
 * selector (0,1,1) outranks every .lp-btn--* modifier (0,1,0), so without the
 * :not() it silently overrode all of them. The dark-background variants only
 * looked right because they declare #fff and inherited white anyway; the
 * white-background ones came out white-on-white. Every variant declares its
 * own colour, so excluding them here is safe.
 */
.lan-public a:not(.lp-btn) {
    color: inherit;
}

/* Focus is never removed, only restyled — the design has no focus treatment of
   its own and the prototype was mouse-only throughout. */
.lan-public :focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 3px;
}

.lp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    padding: 12px 20px;
    background: var(--lp-red);
    color: #fff;
    font-family: var(--lp-font-display);
    font-weight: 700;
}

.lp-skip:focus {
    left: 0;
}

/* ------------------------------------------------------------------ *
   Icons
   ------------------------------------------------------------------
   One sprite of <symbol>s per page, referenced with <use>; see
   Views/Home/_Icons.cshtml. Stroke, width and colour are set here rather
   than in the symbols, and they inherit through <use>, so the same mark is
   white in the hero, red in a fact grid and pale blue in the panel without
   a second definition.

   The sprite itself must be out of flow but not display:none — a symbol in a
   hidden subtree still resolves, but Safari has historically dropped the
   referenced geometry. Zero-size and clipped is the safe way to hide it.
 * ------------------------------------------------------------------ */

.lp-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.lp-icon {
    display: block;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------------ *
   Layout primitives
 * ------------------------------------------------------------------ */

.lp-container {
    max-width: var(--lp-max);
    margin: 0 auto;
    padding-left: var(--lp-gutter);
    padding-right: var(--lp-gutter);
}

/*
 * The hero only. On a 1920px monitor the 1420px canvas leaves 250px of empty
 * navy each side of the banner, which the client read — correctly — as the
 * content not reaching the edge of the page. Widening it also opens the gap
 * between the copy and the panel, which is where the photograph shows through.
 * The rest of the site stays on --lp-max: a 1760px measure would make the body
 * copy on the interior pages unreadably wide.
 */
.lp-container--wide {
    max-width: var(--lp-max-wide);
}

.lp-section {
    padding-top: var(--lp-section-y);
    padding-bottom: var(--lp-section-y);
}

.lp-section--tight {
    padding-top: clamp(40px, 5vw, 60px);
    padding-bottom: 0;
}

.lp-band {
    background: var(--lp-bg-band);
}

.lp-band--deep {
    background: var(--lp-bg-deep);
}

/*
 * A feature section that takes its background from its own illustration, so the
 * picture sits on the page rather than in a box on it. The colour is the median
 * of that file's border, passed inline — it is a fact about the image, not a
 * design token, and each of the three is a different navy.
 *
 * This is what replaced the light treatment on 01 and 03 and the glow on 02.
 */
.lp-band--figure {
    background: var(--lp-fig-bg, var(--lp-bg-deep));
}

.lp-band--dotted {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.055) 1.1px, transparent 1.2px),
        linear-gradient(160deg, rgba(47, 143, 224, 0.16) 0%, rgba(14, 39, 64, 0) 45%);
    background-size: 30px 30px, auto;
    background-color: var(--lp-bg-card);
    border-top: 1px solid var(--lp-line);
    border-bottom: 1px solid var(--lp-line);
}

/* ------------------------------------------------------------------ *
   Light band

   The home page alternates: hero, strip and quicklinks dark, then 01 light,
   02 dark, 03 light, 04 dark, results light, CTA dark. On a phone, where the
   sections stack into one uninterrupted column, the change of surface is what
   tells the reader a section ended — a job the padding alone was doing badly.

   Everything below is an override of a component that was written for navy.
   The band is full-bleed, so the markup is `.lp-band--light` wrapping a
   `.lp-container.lp-section`, never both on one element: `.lp-section` is
   shared with every other public page and must stay dark there.
 * ------------------------------------------------------------------ */

.lp-band--light {
    background: var(--lp-bg-light);
    color: var(--lp-text-ink-body);
}

.lp-band--light .lp-h2,
.lp-band--light .lp-h3 {
    color: var(--lp-text-ink);
}

.lp-band--light .lp-body {
    color: var(--lp-text-ink-body);
}

/* --lp-accent is a hot pink-red tuned for navy; on near-white it vibrates and
   drops below 4.5:1. The flat brand red holds both. */
.lp-band--light .lp-eyebrow {
    color: var(--lp-red);
}

.lp-band--light .lp-fact b {
    color: var(--lp-text-ink);
}

.lp-band--light .lp-fact span {
    color: var(--lp-text-ink-body);
}

.lp-band--light .lp-advantage b {
    color: var(--lp-text-ink);
}

.lp-band--light .lp-advantage p {
    color: var(--lp-text-ink-body);
}

/* The numeral is outlined in a translucent red that only holds up over navy; on
   the light band the fill and the stroke both go to the flat brand red, which is
   the same trade .lp-band--light .lp-eyebrow makes. */
.lp-band--light .lp-advantage__no {
    color: var(--lp-red);
    -webkit-text-stroke-color: var(--lp-red);
}

/* The hairlines between facts are the one part of the row that has to know
   which band it is on: white at 14% disappears on near-white. */
.lp-band--light .lp-facts {
    --lp-fact-rule: var(--lp-line-ink);
    --lp-fact-no: rgba(16, 44, 72, 0.19);
}

/* border-color is a shorthand and would take the 3px red top rule with it, so
   the accent is restated after it. */
.lp-band--light .lp-quote {
    background: var(--lp-bg-light-card);
    border-color: var(--lp-line-ink);
    border-top-color: var(--lp-red-bright);
    box-shadow: var(--lp-shadow-light);
}

.lp-band--light .lp-quote blockquote {
    color: var(--lp-text-ink);
}

.lp-band--light .lp-quote figcaption b,
.lp-band--light .lp-quote figcaption span {
    color: var(--lp-text-ink-faint);
}

.lp-band--light .lp-quotes__title {
    color: var(--lp-text-ink);
}

.lp-band--light .lp-quotes__stars {
    color: var(--lp-text-ink);
}

.lp-band--light .lp-quotes__foot {
    color: var(--lp-text-ink-faint);
}

/* Two-column split used by the home feature sections and the about page. */
.lp-split {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}

.lp-split--even {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.lp-split--narrow {
    grid-template-columns: 0.6fr 1fr;
    gap: clamp(32px, 5vw, 64px);
}

/*
 * Home feature sections 01-03. The client asked for the figure to be "the same
 * height as all of the writing" and for the artwork to sit centred on the dark
 * ground behind it: stretch gives the figure the row's full height, and
 * .lp-figure centres the picture inside it. Scoped to a modifier because the
 * about page's splits are top-aligned by design.
 */
.lp-split--stretch {
    align-items: stretch;
}

/* ------------------------------------------------------------------ *
   Type
 * ------------------------------------------------------------------ */

.lp-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--lp-font-eyebrow);
    font-size: clamp(17px, 2vw, 25px);
    letter-spacing: 0.14em;
    color: var(--lp-accent);
}

.lp-eyebrow--cool {
    color: var(--lp-text-label);
}

/* The prototype drew this star with a clip-path polygon on an empty span
   rather than an icon font, which keeps it free of any icon dependency. */
.lp-eyebrow::before {
    content: '';
    flex: none;
    width: 22px;
    height: 21px;
    background: var(--lp-red-bright);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.lp-label {
    font-family: var(--lp-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    color: var(--lp-accent);
    font-weight: 600;
}

.lp-label--quiet {
    color: var(--lp-text-meta);
    letter-spacing: 0.1em;
    font-weight: 400;
}

.lp-h1 {
    font-weight: 800;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

/*
 * The second line of the hero headline. It was breaking as "COMPLETE" /
 * "CONTROL." wherever the column happened to run out, which made the banner
 * four lines deep against the three in the design. It holds together now and
 * the break above it is the only one.
 */
.lp-h1__accent {
    color: var(--lp-red-bright);
    white-space: nowrap;
}

/*
 * A grid item's min-width is auto, which means "at least min-content" — and
 * with the line above, the headline's min-content is the whole of "Complete
 * control." on one line. On a phone that made the hero's column wider than the
 * screen and took the paragraph and the benefit titles off the right edge with
 * it. The line still holds together wherever there is room for it; the 760px
 * query lets it break, and this stops any single long word doing the same
 * thing again.
 */
.lp-hero__copy {
    min-width: 0;
}

.lp-h1--uppercase {
    text-transform: uppercase;
}

.lp-h1--page {
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.lp-h2 {
    font-weight: 700;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.lp-h3 {
    font-weight: 700;
    font-size: clamp(20px, 1.9vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.lp-lead {
    font-size: clamp(15.5px, 1.2vw, 18.5px);
    line-height: 1.6;
    color: var(--lp-text-soft);
    max-width: 62ch;
}

.lp-body {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.65;
    color: var(--lp-text-muted);
}

.lp-body + .lp-body {
    margin-top: 16px;
}

.lp-measure {
    max-width: 540px;
}

/* ------------------------------------------------------------------ *
   Buttons
 * ------------------------------------------------------------------ */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 28px;
    border: 0;
    border-radius: 4px;
    font-family: var(--lp-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.lp-btn--primary {
    background: var(--lp-red-bright);
    color: #fff;
}

.lp-btn--primary:hover {
    background: var(--lp-red);
}

.lp-btn--gradient {
    background: var(--lp-grad-red);
    color: #fff;
    border-radius: 5px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(207, 23, 37, 0.3);
    white-space: nowrap;
}

.lp-btn--gradient:hover {
    background: var(--lp-grad-red-hover);
}

.lp-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: #fff;
}

.lp-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lp-btn--light {
    background: #fff;
    color: var(--lp-red);
    border-radius: 7px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 17px 30px;
    white-space: nowrap;
}

.lp-btn--light:hover {
    background: #F4E7E9;
}

.lp-btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 6px;
    font-family: var(--lp-font-body);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 14px 24px;
}

.lp-btn--outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

.lp-btn--white {
    background: #fff;
    color: var(--lp-bg-band);
    border-radius: 6px;
    font-family: var(--lp-font-body);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 14px 24px;
}

.lp-btn--white:hover {
    background: #E6EDF5;
}

.lp-btn--portal {
    background: var(--lp-bg-band);
    color: #fff;
    border-radius: 6px;
    font-family: var(--lp-font-body);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 12px 22px;
}

.lp-btn--portal:hover {
    background: #16385C;
}

.lp-btn--play::after {
    content: '\25B6';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    font-size: 9px;
    padding-left: 2px;
}

/* ------------------------------------------------------------------ *
   Header
 * ------------------------------------------------------------------ */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--lp-bg-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.lp-header.is-scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.lp-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 44px);
    min-height: 84px;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    text-decoration: none;
}

.lp-brand img {
    height: clamp(46px, 5vw, 68px);
    width: auto;
    display: block;
}

.lp-brand__name {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.lp-brand__name b {
    font-family: var(--lp-font-display);
    font-weight: 800;
    font-size: clamp(21px, 2.2vw, 30px);
    letter-spacing: -0.025em;
    color: #fff;
    white-space: nowrap;
}

.lp-brand__name span {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: clamp(10px, 1vw, 13.5px);
    letter-spacing: 0.11em;
    color: var(--lp-accent);
    margin-top: 5px;
    white-space: nowrap;
}

.lp-navwrap {
    display: flex;
    align-items: center;
    flex: 1;
    gap: clamp(16px, 2vw, 44px);
}

.lp-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
}

.lp-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 30px 0 6px;
    font-family: var(--lp-font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
}

.lp-nav__link:hover {
    color: var(--lp-red);
}

.lp-nav__link[aria-current='page'] {
    border-bottom-color: var(--lp-red);
}

.lp-nav__caret {
    font-size: 9px;
    margin-top: 2px;
}

.lp-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.lp-header__actions .lp-btn {
    padding: 14px 30px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.lp-btn--login {
    background: #163A5E;
    color: #fff;
}

.lp-btn--login:hover {
    background: #16385C;
}

/* Services dropdown. Opens on hover for pointers and on click/focus for
   keyboards and touch, which the prototype's hover-only menu could not do. */
.lp-menu {
    position: relative;
}

.lp-menu__panel {
    position: absolute;
    top: 100%;
    left: -18px;
    width: 260px;
    padding: 8px;
    background: linear-gradient(170deg, #24507B 0%, #163A5E 100%);
    border: 1px solid var(--lp-line-strong);
    border-top: 3px solid var(--lp-red);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    z-index: 80;
    display: none;
}

.lp-menu.is-open .lp-menu__panel {
    display: block;
}

.lp-menu__panel a {
    display: block;
    padding: 12px 14px;
    border-radius: 5px;
    font-family: var(--lp-font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.lp-menu__panel a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--lp-accent);
}

.lp-menu__all {
    border-top: 1px solid var(--lp-line);
    margin: 6px 4px 0;
    padding-top: 8px;
}

.lp-menu__all a {
    font-family: var(--lp-font-mono);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--lp-text-meta);
    padding: 10px 14px;
}

.lp-menu__all a:hover {
    color: #fff;
    background: none;
}

.lp-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--lp-line-pill);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.lp-nav-toggle span,
.lp-nav-toggle span::before,
.lp-nav-toggle span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    margin: 0 auto;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.lp-nav-toggle span::before,
.lp-nav-toggle span::after {
    content: '';
    position: relative;
}

.lp-nav-toggle span::before {
    top: -6px;
}

.lp-nav-toggle span::after {
    top: 4px;
}

.lp-nav-toggle[aria-expanded='true'] span {
    background: transparent;
}

.lp-nav-toggle[aria-expanded='true'] span::before {
    transform: translateY(6px) rotate(45deg);
}

.lp-nav-toggle[aria-expanded='true'] span::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* The flag stripe under the header. */
.lp-flagline {
    height: 5px;
    background: linear-gradient(90deg, var(--lp-red) 0 34%, #fff 34% 67%, #163A5E 67% 100%);
}

/* ------------------------------------------------------------------ *
   Hero
 * ------------------------------------------------------------------ */

.lp-hero {
    position: relative;
    overflow: hidden;
    background: var(--lp-bg-hero);
    color: #fff;
    min-height: 620px;
}

.lp-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
     * The photograph is 1707x921 in a box around 620 tall, so cover crops about
     * 160px of it. Centred, half of that came off the top and cut the aeroplane
     * in half. Weighted towards the top instead: the sky has the aeroplane and
     * the flag, the bottom has empty forecourt.
     */
    object-position: center 26%;
}

/*
 * The first stop used to be an opaque colour, which meant the left third of
 * the photograph was not visible at all — the client asked to "see most of the
 * image in the background". It is a translucent wash now: heavy enough over
 * the copy to keep white text well clear of 4.5:1 against the brightest part
 * of the picture (the flag), and gone by the time it reaches the panel.
 */
.lp-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10, 27, 46, 0.93) 0 24%, rgba(10, 27, 46, 0.84) 38%, rgba(10, 27, 46, 0.34) 56%, rgba(10, 27, 46, 0.08) 72%, rgba(10, 27, 46, 0.02) 100%);
}

/* Narrower and fainter than it was: with the scrim opened up, a dot grid over
   the part of the photograph that now shows through reads as dirt on the lens.
   It stays over the dark end, behind the copy. */
.lp-dots {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 32%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.4px, transparent 1.5px);
    background-size: 38px 38px;
    opacity: 0.5;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, black 60%, transparent);
    mask-image: linear-gradient(90deg, black 60%, transparent);
}

/* The interior pages' banners are unchanged: this resets the hero's fade,
   which would otherwise inherit here — the client asked for nothing on those
   pages and the dot grid is the whole decoration on them. */
.lp-dots--page {
    width: 40%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.3px, transparent 1.4px);
    background-size: 36px 36px;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
}

/* The little notch the design tucks into the bottom-left of every banner. */
.lp-notch {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 10px;
    background: var(--lp-bg-band);
}

.lp-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 470px;
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
    padding-top: clamp(48px, 6vw, 68px);
    padding-bottom: clamp(48px, 6vw, 72px);
}

.lp-hero__copy {
    max-width: 620px;
}

.lp-hero__kicker {
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: clamp(18px, 1.7vw, 23px);
    letter-spacing: -0.01em;
    margin-top: 22px;
    color: #fff;
}

.lp-hero__intro {
    font-size: 16.5px;
    line-height: 1.6;
    color: #BFCEDD;
    max-width: 470px;
    margin-top: 16px;
}

.lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

/* Benefit list with the small geometric markers. */
.lp-benefits {
    display: grid;
    gap: 18px;
    margin-top: 32px;
}

.lp-benefit {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/*
 * These were four geometric marks — a dash, a ring, a square and two bars,
 * each inside a hairline circle — standing in for artwork nobody had. The
 * client's review of 2026-09-19 asked for real icons "like the ones in the
 * image above", so they are line icons now, at 30px rather than the 26px
 * circle, with no ring around them: the mark is the icon.
 */
.lp-benefit__icon {
    width: 30px;
    height: 30px;
    margin-top: 1px;
    color: #fff;
}

.lp-benefit b {
    display: block;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 15.5px;
}

/* Scoped to the description, not to every span in the benefit: as a bare
   descendant selector it also matched the wrapper span, so the <b> inherited
   the dim colour meant for the line underneath it. `b + span` is the same
   selector the 760px query uses to drop this line. */
.lp-benefit b + span {
    display: block;
    font-size: 14.5px;
    color: var(--lp-text-dim);
    margin-top: 2px;
}

/* ------------------------------------------------------------------ *
   Performance panel (hero right column)
 * ------------------------------------------------------------------ */

.lp-panel {
    background: rgba(11, 32, 56, 0.86);
    border: 1px solid var(--lp-line-strong);
    border-radius: 6px;
    padding: 22px;
    backdrop-filter: blur(6px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

/* ---- Portfolio tiles --------------------------------------------- *
   Two by two, hairline-separated the way the ABOUT panel has them. */

.lp-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--lp-line);
    border: 1px solid var(--lp-line);
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
}

/*
 * Three rows, two columns: the label spans the tile, the figure and its caption
 * stack under it, and the icon stands beside both. The client marked this tile
 * up on 2026-09-19 asking for a larger icon, less air between the three lines,
 * and the label on one line — and the last of those is why the label moved out
 * from beside the icon. Sharing that row left it 126px to fit "WEEKLY ZONE SKIP
 * LANES", which needs about 145; across the tile it has 166.
 */
.lp-stat {
    background: var(--lp-bg-card);
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        'label label'
        'figure icon'
        'caption icon';
    align-items: center;
    column-gap: 8px;
}

.lp-stat dt {
    grid-area: label;
    font-size: 10.5px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--lp-text-faint);
}

.lp-stat dd {
    grid-area: figure;
    align-self: end;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 1px 0 0;
}

.lp-stat small {
    grid-area: caption;
    align-self: start;
    display: block;
    font-size: 9.5px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lp-text-faint);
}

.lp-stat__icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
    stroke-width: 1.1;
    color: var(--lp-text-icon);
}

/* Their own drawing, so its proportions are its own: the height is pinned and
   the width follows, as in .lp-value__art. */
.lp-stat__art {
    width: auto;
    height: 34px;
    object-fit: contain;
}

/* ---- Spend-by-month plot ------------------------------------------ */

.lp-chart {
    margin-top: 16px;
}

.lp-chart__plot {
    width: 100%;
    height: 106px;
    margin-top: 10px;
    display: block;
}

/*
 * The plot is stretched horizontally by preserveAspectRatio="none", which
 * would stretch its strokes with it. non-scaling-stroke keeps every line the
 * width it is declared at, whatever the panel ends up measuring.
 */
.lp-chart__grid line,
.lp-chart__line {
    vector-effect: non-scaling-stroke;
    fill: none;
}

.lp-chart__grid line {
    stroke: rgba(255, 255, 255, 0.09);
    stroke-width: 1;
}

.lp-chart__bars rect {
    fill: url(#lp-bar);
}

.lp-chart__line {
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Circles scale with the viewBox, so they would go oval under a stretched
   plot. Drawn as a filled dot with no stroke, the distortion is invisible at
   this radius. */
.lp-chart__dots circle {
    fill: #FFFFFF;
}

.lp-chart__axis {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--lp-text-faint);
    text-align: center;
}

.lp-panel__mix {
    margin-top: 18px;
}

.lp-donut {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 12px;
}

.lp-donut__ring {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: conic-gradient(#2F7FE0 0 48%, #E01230 48% 82%, #9AA9B8 82% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The hole is punched rather than filled with a figure: the ABOUT panel has
   no centre label and a second number here competed with the tiles above. */
.lp-donut__ring::after {
    content: '';
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #0C2138;
}

.lp-legend {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.lp-legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.lp-legend b {
    margin-left: auto;
    color: #D6E2EE;
    font-weight: 400;
}

/* ------------------------------------------------------------------ *
   Value strip + partner logos
 * ------------------------------------------------------------------ */

.lp-strip {
    background: var(--lp-bg-band);
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.11) 1.3px, transparent 1.4px);
    background-size: 34px 34px;
    color: #fff;
    border-bottom: 4px solid var(--lp-red);
}

/* One column since the partner list was removed (4513). The values were the
   `auto` track beside it; on their own they spread across the full row rather
   than huddling at the left edge of an empty band. */
.lp-strip__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 24px;
}

/*
 * Ten values on two rows of five, from the client's list of 2026-09-19. The
 * dividers are on the right of every cell except the last in its row, which is
 * what nth-child(5n) picks out — :last-child alone would have left a hairline
 * hanging off the end of the first row.
 */
/* Tightened on 2026-09-22 — "they should look more like this in terms of
   spacing between each", against their own five-across reference. */
.lp-values {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px 10px;
}

.lp-value {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 7px;
    text-align: center;
    padding-right: 10px;
    border-right: 1px solid var(--lp-line-strong);
}

.lp-value:nth-child(5n),
.lp-value:last-child {
    padding-right: 0;
    border-right: 0;
}

.lp-value b {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.07em;
    line-height: 1.3;
}

/* The geometric stand-ins these replace — a ring, a rounded box, three bars,
   two rails and a ring with a line through it — were the best that could be
   done without artwork. 34px because the client asked for the row to read as
   icons first, and 26px marks were reading as bullets.

   The lighter stroke is deliberate: five of the ten are the client's own
   drawings, cut out of the strip he sent, and 1.6 next to them read as a
   heavier set of icons in the same row. */
.lp-value__icon {
    width: 34px;
    height: 34px;
    stroke-width: 1.15;
    color: var(--lp-text-icon);
}

/*
 * The client's cut-outs. Each of his five has its own proportions — the group
 * of people is wider than it is tall, the globe is square — so the height is
 * pinned and the width follows, which is how they sit in his own strip. They
 * are raster and cannot be recoloured, but they are white line art on nothing,
 * and this band is the only place they appear.
 */
.lp-value__art {
    width: auto;
    height: 34px;
    object-fit: contain;
}

/* ------------------------------------------------------------------ *
   Card grids
 * ------------------------------------------------------------------ */

/* White since 2026-09-22, asked for on desktop and on mobile both. The cards
   carry their own dark ground, so only the band behind them changes. */
.lp-quicklinks {
    background: #fff;
    border-bottom: 1px solid var(--lp-line-ink);
}

.lp-quicklinks__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    padding-top: 34px;
    padding-bottom: 34px;
}

.lp-qcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--lp-grad-card-cool);
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--lp-shadow-card);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/*
 * Guarded on a real pointer. A touch tap leaves :hover latched on the card
 * until the next tap lands elsewhere, so on a phone the unguarded rule parks
 * one card 4px off the grid with a hover shadow for as long as you keep
 * reading. Same reason .lp-scard:hover is guarded below.
 */
@media (hover: hover) {
    .lp-qcard:hover {
        border-color: var(--lp-red-bright);
        transform: translateY(-4px);
        box-shadow: var(--lp-shadow-card-hover);
    }
}

.lp-qcard__media {
    height: 132px;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 10px, rgba(255, 255, 255, 0.03) 10px 20px);
}

.lp-qcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-qcard__body {
    padding: 18px 18px 46px;
    position: relative;
    flex: 1;
}

.lp-qcard__body b {
    display: block;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
    min-height: 2.6em;
    letter-spacing: 0.04em;
    color: #fff;
}

.lp-qcard__body p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--lp-text-muted);
    margin-top: 8px;
}

.lp-qcard__go {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lp-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

/* Services index cards */
.lp-services {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 20px;
}

.lp-scard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--lp-grad-card-lift);
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--lp-shadow-card);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Scoped to the anchor form: the cards are plain <div>s while the service
   detail pages are withdrawn (4513), and a card that lifts under the cursor
   reads as clickable when it no longer is. Restores itself with the link. */
@media (hover: hover) {
    a.lp-scard:hover {
        border-color: rgba(255, 255, 255, 0.36);
        transform: translateY(-7px);
        box-shadow: var(--lp-shadow-card-hover);
    }
}

.lp-scard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--lp-red-bright), var(--lp-blue));
    z-index: 2;
}

/*
 * The card art is photographs, and the client asked that they be neither cut off
 * nor distorted. The six sources did not share a ratio — three were 1.88 and
 * three 2.04 — so `contain` left the wider three letterboxed by 8%, and the row
 * read as uneven. They are now all encoded at 960x512, so the box matches the
 * picture exactly: object-fit has nothing left to do, there are no bands, and
 * nothing is scaled out of shape.
 *
 * A single ratio for all six rather than each image's own, because the cards sit
 * in a row: differing media heights would start the six titles at six heights,
 * which is the thing the client asked to have fixed one item earlier.
 *
 * The inset padding and the drop shadow went with the old icon art. They were
 * there to float an icon on the card; under a photograph they read as a printing
 * fault.
 */
.lp-scard__media {
    aspect-ratio: 960 / 512;
    overflow: hidden;
    background: linear-gradient(160deg, #0F2A47 0%, #0A1E33 100%);
}

.lp-scard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-scard__body {
    padding: 20px 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lp-scard__body b {
    font-family: var(--lp-font-display);
    font-weight: 800;
    font-size: 16.5px;
    letter-spacing: 0.02em;
    color: #fff;
    text-transform: uppercase;
}

.lp-scard__body p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--lp-text-muted);
    margin: 10px 0 18px;
    flex: 1;
}

.lp-scard__more {
    font-family: var(--lp-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--lp-accent);
}

/* ------------------------------------------------------------------ *
   Feature sections
 * ------------------------------------------------------------------ */

/*
 * Facts follow the design the client sent on 2026-09-19: each one centred under
 * its own icon, with a hairline between neighbours. Counters are reset here
 * because the phone layout numbers the rows 01, 02, 03 — see the 760px query.
 */
.lp-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 0;
    margin-top: 34px;
    counter-reset: lp-fact;
    /* Held as custom properties because the divider moves between borders as
       the grid reflows — nth-child at two up, a top hairline on a phone — and
       each of those rules would otherwise have to restate which band it is on.
       --lp-fact-no is the ghost numeral the phone layout puts in front of each
       row. */
    --lp-fact-rule: var(--lp-line);
    --lp-fact-no: rgba(255, 255, 255, 0.22);
}

/*
 * Five across, and the titles hold one line each — which means this row sets
 * the minimum width of the whole left-hand column, and whatever it takes is
 * taken from the illustration beside it. Smaller type and tighter gutters here
 * are worth about 120px of picture, which is the difference between the figure
 * matching the column of writing and falling well short of it.
 */
.lp-facts--five {
    grid-template-columns: repeat(5, 1fr);
}

.lp-facts--five .lp-fact {
    padding: 0 10px;
}

.lp-facts--five .lp-fact b {
    font-size: 12px;
}

.lp-fact {
    display: grid;
    justify-items: center;
    row-gap: 8px;
    align-content: start;
    text-align: center;
    padding: 0 16px;
}

.lp-fact + .lp-fact {
    border-left: 1px solid var(--lp-fact-rule);
}

/*
 * Transparent, and twice the size they were, both asked for by name. The set
 * that came before was neon PNG art with its own dark ground baked in, which
 * is why each one needed a chip behind it; these are strokes on nothing, so
 * they sit on the light band and the dark one alike.
 *
 * Red on both bands: the icon is the only colour in the row, and the brand red
 * is the one hue that holds against near-white and against navy.
 */
.lp-fact__icon {
    width: 60px;
    height: 60px;
    stroke-width: 1.3;
    color: var(--lp-red-bright);
}

/* One of the fourteen is the client's own artwork rather than a symbol — the
   handshake, asked for by name. Recoloured to the brand red off the white
   original, since this row sits on a light band. */
.lp-fact__art {
    width: auto;
    height: 60px;
    object-fit: contain;
}

/*
 * One line per title, asked for by name. At 13px with the tracking off, the
 * longest of the fourteen ("Warehousing & Distribution") measures about 168px
 * against the 180px a fifth of the column gives it. Two lines were being
 * reserved before, for alignment — with the row centred and the icons a fixed
 * size, the titles line up anyway.
 */
.lp-fact b {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
    letter-spacing: 0;
}

.lp-fact span {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--lp-text-dim);
}

/*
 * "The image should be the same height as all of the writing" and "perfectly
 * centered on the dark background behind it" (client, 2026-09-19). The box
 * takes the row's height from .lp-split--stretch and carries the same deep navy
 * the artwork itself is drawn on, so the picture floats in the middle of it
 * instead of being stretched or cropped to fill.
 */
/*
 * No box of its own: the section behind it already carries the artwork's ground
 * (see .lp-band--figure), so a background here would only draw an edge where
 * there should be none. What is left is the centring and the height.
 */
.lp-figure {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * The picture is never scaled past its own width — a 916px infographic blown
 * up to 1100 would go soft — and never cropped. It used to be a fixed-height
 * box with object-fit: cover, which cut the edges off a very wide diagram,
 * where the labels are.
 */
.lp-figure img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.lp-feature--glow {
    background: var(--lp-bg-band);
    background-image: radial-gradient(ellipse 60% 90% at 88% 10%, rgba(224, 18, 48, 0.3) 0%, rgba(12, 35, 64, 0) 60%),
        radial-gradient(ellipse 70% 80% at 8% 95%, rgba(47, 143, 224, 0.26) 0%, rgba(12, 35, 64, 0) 62%);
    color: #fff;
}

/* Numbered steps */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 36px;
}

.lp-step {
    border-top: 3px solid rgba(255, 255, 255, 0.24);
    padding-top: 20px;
}

.lp-step:last-child {
    border-top-color: var(--lp-red);
}

.lp-step__no {
    font-family: var(--lp-font-mono);
    font-size: 11px;
    color: #9CB3C9;
}

.lp-step:last-child .lp-step__no {
    color: var(--lp-accent);
}

.lp-step b {
    display: block;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 19px;
    color: #fff;
    margin-top: 10px;
}

.lp-step p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--lp-text-muted);
    margin-top: 8px;
}

/* ------------------------------------------------------------------ *
   Client testimonials
   ------------------------------------------------------------------
   To the design the client sent on 2026-09-19. It replaces three invented
   result figures ($412K / 31% / 19 sec) that were labelled PLACEHOLDER on
   the page itself; .lp-result* went with them.
 * ------------------------------------------------------------------ */

/*
 * The design puts a flag behind the left of this section and a map of the
 * United States behind the right. Both are rebuilt here rather than lifted out
 * of the reference image, which has the cards and the copy baked into it: the
 * stripes are a gradient and the map is the same silhouette the hero panel
 * uses, at 4% ink. Kept behind everything and out of the accessibility tree.
 */
.lp-quotes-band {
    position: relative;
    overflow: hidden;
}

.lp-quotes-band > * {
    position: relative;
    z-index: 1;
}

.lp-quotes-band::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 42%;
    background-image: repeating-linear-gradient(-8deg,
        rgba(200, 16, 46, 0.09) 0 22px,
        rgba(255, 255, 255, 0) 22px 44px);
    -webkit-mask-image: linear-gradient(90deg, black, transparent 88%);
    mask-image: linear-gradient(90deg, black, transparent 88%);
    pointer-events: none;
}

.lp-quotes__map {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: min(38%, 520px);
    height: auto;
    fill: rgba(16, 44, 72, 0.06);
    stroke: none;
    pointer-events: none;
}

.lp-quotes__head {
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
}

/* Three stars between two rules, the way the design opens the section. The
   rules are flex children so they take whatever width is left rather than a
   measured one. */
.lp-quotes__stars {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(320px, 70%);
    font-size: 15px;
    line-height: 1;
    color: var(--lp-text);
}

.lp-quotes__stars i {
    flex: 1;
    height: 1px;
    background: var(--lp-red);
}

/* The middle star is the larger of the three in the design. */
.lp-quotes__stars span:nth-child(3) {
    font-size: 1.55em;
    line-height: 0.8;
}

.lp-quotes__title {
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.lp-quotes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 40px;
}

.lp-quote {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 26px 24px;
    background: var(--lp-grad-card);
    border: 1px solid var(--lp-line);
    border-top: 3px solid var(--lp-red-bright);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-panel);
}

/* The quotation stays in the flow of the card and the attribution is pushed to
   the foot of it, so four cards of unequal length still line their captions up
   with each other. */
.lp-quote blockquote {
    margin: 0;
    flex: 1;
    font-size: 15px;
    line-height: 1.62;
    color: var(--lp-text-body);
}

/*
 * Three lines' worth of room whether the block needs them or not. Two of the
 * four companies wrap onto a second line and two do not, so without it the
 * signature blocks started at four different heights across the row.
 */
.lp-quote figcaption {
    margin-top: 22px;
    display: grid;
    gap: 3px;
    min-height: 4.6em;
    align-content: start;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-text-faint);
}

.lp-quote figcaption b {
    font-weight: 600;
}

.lp-quotes__foot {
    margin-top: 34px;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lp-text-faint);
}

/* ------------------------------------------------------------------ *
   CTA bands
 * ------------------------------------------------------------------ */

.lp-cta {
    background: var(--lp-bg-deep);
    padding: 40px 0;
}

.lp-cta__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 3vw, 48px);
    min-height: 110px;
    padding: 26px 32px;
    border: 2px solid var(--lp-red);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(9, 32, 56, 0.97) 0%, rgba(19, 53, 86, 0.9) 60%, rgba(19, 53, 86, 0.55) 100%);
}

.lp-cta__inner--quiet {
    border: 1px solid var(--lp-line-strong);
}

.lp-cta__media {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 46%;
    object-fit: cover;
    object-position: right center;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 45%);
    mask-image: linear-gradient(90deg, transparent, black 45%);
}

.lp-cta__copy {
    position: relative;
}

.lp-cta__copy h2 {
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.lp-cta__copy p {
    font-size: 14.5px;
    color: var(--lp-text-soft);
    margin-top: 6px;
}

.lp-cta .lp-btn {
    position: relative;
}

/* The red striped band that closes every service detail page. */
.lp-cta--red {
    background: var(--lp-red);
    background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 26px, transparent 26px 52px);
    color: #fff;
    border-top: 6px solid var(--lp-bg-band);
    padding: 0;
}

.lp-cta--red .lp-cta__inner {
    border: 0;
    background: none;
    border-radius: 0;
    padding-top: clamp(44px, 6vw, 66px);
    padding-bottom: clamp(44px, 6vw, 66px);
}

/* ------------------------------------------------------------------ *
   Page banners (services, service detail, packaging, about, contact)
 * ------------------------------------------------------------------ */

.lp-banner {
    position: relative;
    overflow: hidden;
    background: var(--lp-bg-band);
    color: #fff;
}

.lp-banner__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.28;
}

.lp-banner__media--strong {
    opacity: 0.35;
}

.lp-banner__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, var(--lp-bg-band) 30%, rgba(22, 58, 94, 0.82) 62%, rgba(22, 58, 94, 0.6) 100%);
}

.lp-banner__scrim--deep {
    background: linear-gradient(95deg, #153552 30%, rgba(10, 27, 46, 0.82) 62%, rgba(10, 27, 46, 0.6) 100%);
}

.lp-banner__inner {
    position: relative;
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(48px, 6vw, 72px);
}

.lp-banner__inner--compact {
    padding-top: clamp(28px, 3vw, 40px);
}

.lp-banner__split {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: end;
}

.lp-banner__split img {
    width: 100%;
    height: auto;
    display: block;
}

.lp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lp-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--lp-text-meta);
    text-decoration: none;
}

.lp-back:hover {
    color: #fff;
}

/* ------------------------------------------------------------------ *
   Service detail body
 * ------------------------------------------------------------------ */

.lp-detail {
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.8fr;
    gap: clamp(28px, 3.5vw, 48px);
}

.lp-detail__intro {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.65;
    color: var(--lp-text-body);
}

.lp-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.lp-specs li {
    font-size: 15px;
    color: var(--lp-text-muted);
    border-top: 1px solid var(--lp-line);
    padding-top: 12px;
}

.lp-aside {
    background: var(--lp-bg-aside);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 28px;
    align-self: start;
}

.lp-aside__figure {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 34px);
    color: #fff;
    margin-top: 10px;
    line-height: 1.15;
}

.lp-aside p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--lp-text-muted);
    margin-top: 10px;
}

.lp-detail__extra {
    padding-bottom: var(--lp-section-y);
}

/* ------------------------------------------------------------------ *
   Packaging catalog
 * ------------------------------------------------------------------ */

.lp-cathead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    border-bottom: 1px solid var(--lp-line);
    padding-bottom: 20px;
}

.lp-cathead__note {
    font-family: var(--lp-font-eyebrow);
    font-size: 15px;
    color: var(--lp-text-meta);
}

.lp-catalog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.lp-product {
    background: var(--lp-grad-card);
    border: 1px solid var(--lp-line);
    border-top: 3px solid var(--lp-red-bright);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-panel);
    overflow: hidden;
}

.lp-product__media {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 10px, rgba(255, 255, 255, 0.03) 10px 20px);
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--lp-line);
    font-family: var(--lp-font-mono);
    font-size: 11px;
    color: #9CB3C9;
    text-align: center;
    padding: 0 16px;
}

.lp-product__body {
    padding: 24px;
}

.lp-product__body b {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.lp-product__body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--lp-text-muted);
    margin: 8px 0 16px;
}

/* Spec tables. Real <table> markup, styled as the design's row grid. */
.lp-spec {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--lp-line);
    border-radius: 7px;
    overflow: hidden;
    font-size: 13.5px;
    text-align: left;
}

.lp-spec th {
    background: var(--lp-bg-card-alt);
    font-family: var(--lp-font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--lp-text-meta);
    padding: 8px 12px;
}

.lp-spec td {
    background: var(--lp-bg-card);
    padding: 9px 12px;
    border-top: 1px solid var(--lp-line);
}

.lp-spec td + td {
    color: var(--lp-text-muted);
}

.lp-spec th:first-child,
.lp-spec td:first-child {
    width: 56%;
}

.lp-tiles4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--lp-line);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    overflow: hidden;
    margin-top: 32px;
}

.lp-tiles4 > div {
    background: var(--lp-bg-card);
    padding: 26px;
}

.lp-tiles4 figure {
    margin: 0 0 18px;
    height: 120px;
    border-radius: 7px;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 10px, rgba(255, 255, 255, 0.03) 10px 20px);
}

.lp-tiles4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-tiles4 b {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
}

.lp-tiles4 p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--lp-text-muted);
    margin-top: 8px;
}

/* Split panel: copy on the left, form on the right. */
.lp-panelsplit {
    background: var(--lp-grad-card);
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    box-shadow: var(--lp-shadow-panel);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.lp-panelsplit__copy {
    padding: clamp(28px, 3vw, 44px);
}

.lp-panelsplit__form {
    background: var(--lp-bg-well);
    border-left: 1px solid var(--lp-line);
    padding: clamp(28px, 3vw, 44px);
}

.lp-checks {
    display: grid;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.lp-checks li {
    font-size: 15px;
    color: var(--lp-text-body);
    border-top: 1px solid var(--lp-line);
    padding-top: 10px;
}

.lp-checks li::before {
    content: '\2713\00a0';
    color: var(--lp-green);
}

/* ------------------------------------------------------------------ *
   About
 * ------------------------------------------------------------------ */

.lp-mission__figure {
    margin-top: 24px;
    height: clamp(220px, 26vw, 320px);
    border-radius: var(--lp-radius);
    overflow: hidden;
}

.lp-mission__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-mission__lead {
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: pretty;
}

.lp-advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.lp-advantage__no {
    font-family: var(--lp-font-display);
    font-weight: 800;
    font-size: clamp(42px, 4.4vw, 58px);
    color: var(--lp-accent-hot);
    -webkit-text-stroke: 1.5px rgba(255, 46, 77, 0.55);
    letter-spacing: -0.03em;
    line-height: 1;
}

.lp-advantage b {
    display: block;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    margin-top: 14px;
}

.lp-advantage p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--lp-text-muted);
    margin-top: 10px;
}

.lp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.lp-pills li {
    border: 1px solid var(--lp-line-pill);
    border-radius: 100px;
    padding: 9px 16px;
    font-size: 13.5px;
    color: #fff;
}

/*
 * Height comes from the picture. It used to be a clamp with object-fit: cover,
 * which trimmed both edges to fill a box far taller than the image is — and the
 * right edge is where the figures the client wants read are. Cropping from the
 * left was offered and is not needed once nothing is being forced to fill.
 */
.lp-serve__figure {
    border-radius: 6px;
    overflow: hidden;
    align-self: center;
}

.lp-serve__figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------------------------------------------ *
   Forms
 * ------------------------------------------------------------------ */

.lp-form {
    display: grid;
    gap: 16px;
}

.lp-form--tight {
    gap: 14px;
}

.lp-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.lp-field {
    display: grid;
    gap: 7px;
}

/*
 * Same min-width: auto trap as .lp-contact, one level in: the intrinsic width
 * of a form control would otherwise hold the column open on narrow phones.
 */
.lp-form > *,
.lp-field > * {
    min-width: 0;
}

.lp-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--lp-text-body);
}

.lp-field input,
.lp-field select,
.lp-field textarea,
.lp-form > input,
.lp-form > select,
.lp-form > textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--lp-line-input);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14.5px;
    background-color: #fff;
    color: #000;
}

.lp-field textarea,
.lp-form > textarea {
    min-height: 120px;
    resize: vertical;
}

.lp-field select {
    background: var(--lp-bg-card);
    color: var(--lp-text-muted);
}

.lp-form button {
    padding: 16px;
    background: var(--lp-red);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.lp-form button:hover {
    background: var(--lp-red-dark);
}

.lp-drop {
    border: 1px dashed var(--lp-line-input);
    border-radius: 8px;
    padding: 22px;
    text-align: center;
    background: var(--lp-bg-card-alt);
}

.lp-drop b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lp-text-body);
}

.lp-drop span {
    display: block;
    font-size: 13.5px;
    color: var(--lp-text-meta);
    margin-top: 4px;
}

.lp-drop input {
    margin-top: 12px;
    font-size: 13px;
    color: var(--lp-text-body);
    /* A file input sizes to its button plus filename text, which overflows a 320px viewport. */
    max-width: 100%;
}

.lp-form__note {
    font-size: 12.5px;
    color: var(--lp-text-meta);
    text-align: center;
}

.lp-notice {
    background: rgba(79, 191, 123, 0.14);
    border: 1px solid rgba(79, 191, 123, 0.45);
    border-radius: 6px;
    padding: 13px 16px;
    font-size: 14.5px;
    color: var(--lp-green);
}

.lp-error {
    color: #FF8A9B;
    font-size: 13px;
}

.field-validation-error {
    color: #FF8A9B;
    font-size: 13px;
}

/*
 * The form-level summary. Only ever carries one message - that the enquiry did not
 * leave - and that is the one thing on this page a visitor must not miss, so it is a
 * panel rather than a line of red text among the fields.
 *
 * MVC renders the same element with .validation-summary-valid and an empty list when
 * there is nothing to say, which is why the panel is scoped to the errors class.
 */
.lp-form__error.validation-summary-valid {
    display: none;
}

.lp-form__error.validation-summary-errors {
    border: 1px solid rgba(255, 138, 155, 0.5);
    background: rgba(200, 16, 46, 0.14);
    border-radius: 6px;
    padding: 12px 14px;
    color: #FF8A9B;
    font-size: 13.5px;
}

.lp-form__error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.input-validation-error {
    border-color: #FF8A9B !important;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.lp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ *
   Contact sidebar
 * ------------------------------------------------------------------ */

.lp-contact {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}

/*
 * Grid items default to min-width: auto, so an fr track cannot shrink below
 * its content's min-content width. Without this the single collapsed column
 * stays 359px inside a 320px container on a 375px viewport.
 */
.lp-contact > * {
    min-width: 0;
}

.lp-formcard {
    background: var(--lp-grad-card);
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    box-shadow: var(--lp-shadow-panel);
    padding: clamp(24px, 3vw, 40px);
}

.lp-side {
    display: grid;
    gap: 20px;
}

.lp-sidecard {
    border-radius: 12px;
    padding: 32px;
}

.lp-sidecard--plain {
    background: var(--lp-bg-band);
}

.lp-sidecard--raised {
    background: var(--lp-grad-card);
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-shadow-panel);
}

.lp-sidecard--aside {
    background: var(--lp-bg-aside);
    border: 1px solid var(--lp-line);
}

.lp-sidecard__label {
    font-family: var(--lp-font-eyebrow);
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--lp-text-label);
}

.lp-sidecard__label--dim {
    color: var(--lp-text-meta);
}

.lp-phone {
    font-family: var(--lp-font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    margin-top: 8px;
    color: #fff;
    text-decoration: none;
    display: block;
}

.lp-hours {
    border-top: 1px solid var(--lp-line-strong);
    margin-top: 22px;
    padding-top: 18px;
    display: grid;
    gap: 8px;
    font-size: 15px;
}

.lp-hours div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.lp-hours dt {
    color: var(--lp-text-soft);
}

.lp-hours dd {
    margin: 0;
}

.lp-emails {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.lp-emails b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.lp-emails a {
    font-size: 15px;
    color: var(--lp-text-icon);
}

/* ------------------------------------------------------------------ *
   Footer
 * ------------------------------------------------------------------ */

.lp-footer {
    background: var(--lp-bg-hero);
    color: #fff;
}

.lp-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(32px, 4vw, 48px);
    padding-top: clamp(44px, 5vw, 64px);
    padding-bottom: 32px;
}

.lp-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-footer__brand img {
    height: 52px;
    width: auto;
    display: block;
}

.lp-footer__brand span {
    font-family: var(--lp-font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.lp-footer__tagline {
    font-size: 15px;
    line-height: 1.65;
    color: var(--lp-text-footer);
    margin-top: 18px;
    max-width: 320px;
}

.lp-footer__phone {
    display: inline-block;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 20px;
    margin-top: 20px;
    color: #fff;
    text-decoration: none;
}

.lp-footer__title {
    font-family: var(--lp-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--lp-text-quiet);
}

.lp-footer__links {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.lp-footer__links a {
    font-size: 14.5px;
    color: var(--lp-text-link);
    text-decoration: none;
}

.lp-footer__links a:hover {
    color: #fff;
}

.lp-footer__legal {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 22px;
    padding-bottom: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    color: var(--lp-text-quiet);
}

.lp-footer__legal ul {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ *
   Login modal
   The prototype's sign-in dialog, rebuilt against the real /Login form.
   Hidden via the [hidden] attribute so it stays closed with no JS and no
   flash before landing.js runs; the server drops [hidden] when a failed
   attempt comes back, so the error is visible even if scripting is off.
 * ------------------------------------------------------------------ */

.lp-login[hidden] {
    display: none;
}

/* Set by landing.js while the dialog is open. */
body.lp-noscroll {
    overflow: hidden;
}

.lp-login {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    padding: clamp(16px, 4vw, 40px);
    background: rgba(8, 20, 34, 0.62);
    /* Progressive: browsers without backdrop-filter just get the scrim. */
    backdrop-filter: blur(3px);
    overflow-y: auto;
}

/*
 * Centred with margin rather than align-items: center. A centred flex item
 * that outgrows the scroll container has its overflow pushed past the top edge,
 * where scrolling cannot reach it — on a landscape phone that puts the close
 * button out of reach. auto margins centre without ever clipping.
 */
.lp-login__panel {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 880px;
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    /* Grid items default to min-width: auto — same trap as .lp-contact. */
    align-items: stretch;
    background: var(--lp-bg);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--lp-shadow-modal);
}

.lp-login__panel > * {
    min-width: 0;
}

.lp-login__main {
    padding: clamp(28px, 4vw, 44px);
}

.lp-login__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-login__brand img {
    height: 62px;
    width: 94px;
    object-fit: contain;
}

.lp-login__wordmark {
    font-family: var(--lp-font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--lp-text);
}

.lp-login__title {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 27px);
    letter-spacing: -0.02em;
    color: var(--lp-text);
    margin: 26px 0 0;
}

.lp-login__form {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.lp-login__form > * {
    min-width: 0;
}

.lp-login__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--lp-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.lp-login__close:hover {
    background: rgba(255, 255, 255, 0.18);
}

.lp-login__submit {
    padding: 15px;
    border: 0;
    border-radius: 6px;
    background-color: var(--lp-red-dark);
    color: var(--lp-text);
    font-family: var(--lp-font-body);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.lp-login__submit:hover {
    background-color: var(--lp-bg-band);
}

.lp-login__foot {
    font-size: 13.5px;
    color: var(--lp-text-muted);
    text-align: center;
}

.lp-login__foot a {
    color: var(--lp-red-bright);
    font-weight: 600;
}

/*
 * Server-rendered failure from LoginController. role="alert" moves focus-free
 * announcements to assistive tech the moment the page comes back.
 */
.lp-login__error {
    border: 1px solid var(--lp-red-bright);
    border-left-width: 3px;
    border-radius: 6px;
    padding: 11px 13px;
    background: rgba(224, 18, 48, 0.12);
    color: var(--lp-text-body);
    font-size: 13.5px;
}

.lp-login__aside {
    background: var(--lp-bg-band);
    color: var(--lp-text);
    padding: clamp(28px, 4vw, 44px);
}

.lp-login__eyebrow {
    font-family: var(--lp-font-eyebrow);
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--lp-text-label);
}

.lp-login__list {
    display: grid;
    gap: 16px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.lp-login__list li {
    border-top: 1px solid var(--lp-line-strong);
    padding-top: 14px;
}

.lp-login__list b {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.lp-login__list span {
    display: block;
    font-size: 13.5px;
    color: var(--lp-text-faint);
    margin-top: 3px;
}

/* ------------------------------------------------------------------ *
   Motion
   Reveals only apply under html.lp-motion, which the inline guard in the
   layout sets before first paint and withholds when the visitor prefers
   reduced motion. Without the class these rules never match and the page
   renders exactly as the server sent it.
 * ------------------------------------------------------------------ */

.lp-motion [data-lp-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--lp-i, 0) * 60ms);
    will-change: opacity, transform;
}

.lp-motion [data-lp-reveal].is-inview {
    opacity: 1;
    transform: none;
}

.lp-motion [data-lp-reveal].is-settled {
    will-change: auto;
}

/* The prototype's lanRise, kept for the modal. Unlike the reveals this is not
   gated on html.lp-motion — the dialog is opened by a deliberate click, not by
   scrolling past it — but the reduced-motion block below still flattens it. */
@keyframes lp-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lp-login__panel {
    animation: lp-rise 0.24s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .lan-public *,
    .lan-public *::before,
    .lan-public *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ------------------------------------------------------------------ *
   Responsive
   The prototype was a fixed 1420 px canvas with a hard min-width, so every
   breakpoint below is new work rather than a port.
 * ------------------------------------------------------------------ */

@media (max-width: 1240px) {
    .lp-quicklinks__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Two up, so the divider is between the columns rather than after every
       card: nth-child(2n) is the right-hand one of each pair. */
    .lp-facts,
    .lp-facts--five {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 0;
    }

    .lp-fact + .lp-fact {
        border-left: 0;
    }

    .lp-fact:nth-child(2n) {
        border-left: 1px solid var(--lp-fact-rule);
    }

    .lp-quotes {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-detail {
        grid-template-columns: 1fr 1fr;
    }

    .lp-detail__head {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1080px) {
    /* The nav and its actions stop fitting on one line well before the layout
       does, so the disclosure takes over here rather than at a phone width. */
    .lp-navwrap {
        display: none;
    }

    .lp-nav-toggle {
        display: block;
    }

    .lp-header__inner {
        position: relative;
    }

    .lp-navwrap.is-open {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px var(--lp-gutter) 20px;
        background: var(--lp-bg-card);
        border-bottom: 1px solid var(--lp-line);
        box-shadow: 0 24px 40px rgba(0, 0, 0, 0.4);
        /*
         * dvh, because 100vh on a phone is the *large* viewport — the height
         * the page would have if the browser's own chrome were collapsed. With
         * the address bar showing, a vh-sized panel runs under it and the last
         * item in the menu cannot be reached. vh first for browsers that do not
         * know dvh, which are all desktop-sized anyway.
         */
        max-height: calc(100vh - 84px);
        max-height: calc(100dvh - 84px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .lp-navwrap.is-open .lp-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .lp-navwrap.is-open .lp-header__actions {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        gap: 10px;
        padding-top: 18px;
    }

    .lp-navwrap.is-open .lp-nav__link {
        padding: 14px 0;
        border-bottom: 1px solid var(--lp-line);
        justify-content: space-between;
        width: 100%;
    }

    .lp-navwrap.is-open .lp-menu__panel {
        position: static;
        width: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        padding: 0 0 8px 12px;
    }

    .lp-hero__grid {
        grid-template-columns: 1fr;
    }

    .lp-hero {
        min-height: 0;
    }

    .lp-hero__scrim {
        background: linear-gradient(180deg, rgba(10, 27, 46, 0.86) 0%, rgba(10, 27, 46, 0.94) 100%);
    }

    .lp-panel {
        max-width: 520px;
    }

    .lp-split,
    .lp-split--even,
    .lp-split--narrow,
    .lp-banner__split,
    .lp-contact,
    .lp-panelsplit {
        grid-template-columns: 1fr;
    }

    .lp-panelsplit__form {
        border-left: 0;
        border-top: 1px solid var(--lp-line);
    }

    .lp-services,
    .lp-catalog,
    .lp-advantages,
    .lp-quotes {
        grid-template-columns: repeat(2, 1fr);
    }

    /* The panel is a fixed 470px column in the hero grid; once that grid is one
       column it is a block of its own, and the strip of ten values has room for
       five of them only on a wide row. */
    .lp-values {
        grid-template-columns: repeat(3, 1fr);
    }

    .lp-value:nth-child(5n) {
        padding-right: 22px;
        border-right: 1px solid var(--lp-line-strong);
    }

    .lp-value:nth-child(3n),
    .lp-value:last-child {
        padding-right: 0;
        border-right: 0;
    }

    .lp-tiles4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .lp-cta__media {
        width: 100%;
        opacity: 0.3;
    }

    .lp-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/*
 * Phone.
 *
 * The desktop design is wide and generous: multi-column grids, tall cards,
 * large figures. Stacked verbatim onto a 375 px screen that turned into ten-plus
 * screens of scrolling per page, most of it card art and decorative panels. The
 * rules below are not just "one column" — they change what a component *is* on a
 * phone, so the same content reads in roughly half the scroll:
 *
 *   - list cards turn side-on (thumbnail left, copy right) instead of stacking a
 *     full-bleed image above every heading,
 *   - long card copy is clamped rather than dropped, so nothing leaves the DOM
 *     and nothing is hidden from search engines or assistive tech,
 *   - purely decorative panels (the illustrative donut, the sparkline) are the
 *     only things that go, and only where they carry no information,
 *   - vertical rhythm, card padding and figure heights come down across the
 *     board, since the desktop values were tuned against 1420 px.
 */
@media (max-width: 760px) {
    /* Sections were pitched for a wide canvas; on a phone the same air reads as
       dead space between every block. Once the trim block at the foot of this
       query has run the sections are shorter too, so the gap between them can
       come down again without them running together.

       40px turned out to be the overcorrection: with the figures dropped, one
       section's last fact sat a thumb's width from the next section's eyebrow
       and the two read as one block. 56 is still well under the desktop
       clamp's floor, and pairs with the light bands doing the same job. */
    :root {
        --lp-section-y: 56px;
    }

    .lp-quicklinks__grid,
    .lp-services,
    .lp-catalog,
    .lp-advantages,
    .lp-quotes,
    .lp-steps,
    .lp-detail,
    .lp-tiles4,
    .lp-form__row,
    .lp-specs {
        grid-template-columns: 1fr;
    }

    /* Headings set at display sizes strand single words on a 375px line. */
    .lp-h1,
    .lp-h2,
    .lp-h3,
    .lp-mission__lead {
        text-wrap: balance;
    }

    /* ---- Header ----------------------------------------------------- *
       84px of sticky chrome is a tenth of a phone viewport, gone for the
       whole session. Trimmed to 64, which still clears the 44px toggle. */
    .lp-header__inner {
        min-height: 64px;
        gap: 12px;
    }

    .lp-brand img {
        height: 40px;
    }

    .lp-brand__name b {
        font-size: 19px;
    }

    .lp-brand__name span {
        font-size: 9.5px;
        letter-spacing: 0.08em;
        margin-top: 3px;
    }

    .lp-navwrap.is-open {
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
    }

    /* ---- Hero ------------------------------------------------------- */

    /*
     * The headline breaks again down here. Holding "Complete control." on one
     * line is a desktop instruction; at 375px that line is wider than the
     * screen, and because a grid item will not shrink below its min-content it
     * took the whole hero column with it — the paragraph and the benefit
     * titles were being cut off against the right edge, not just the headline.
     */
    .lp-h1__accent {
        white-space: normal;
    }

    /*
     * Both asked for on 2026-09-22, for the phone: the flag stripe under the
     * navigation bar, and the notch tucked into the bottom-left of the banner
     * under the Schedule Consultation button. They stay on the desktop layout,
     * which was reviewed separately and where neither was raised.
     */
    .lp-flagline,
    .lp-notch {
        display: none;
    }

    .lp-hero__grid {
        gap: 26px;
        padding-top: 32px;
        padding-bottom: 36px;
    }

    .lp-hero__kicker {
        margin-top: 16px;
    }

    .lp-hero__intro {
        margin-top: 12px;
    }

    .lp-benefits {
        gap: 13px;
        margin-top: 24px;
    }

    /* Two benefits to a row down here, so the icon gives back the width the
       title needs to break in fewer places. */
    .lp-benefit__icon {
        width: 26px;
        height: 26px;
    }

    .lp-hero__actions {
        margin-top: 24px;
        gap: 10px;
    }

    /*
     * Performance panel. Every figure in it is design copy — a picture of the
     * product, not live data — and at full height it ran past a screen of
     * decoration before the visitor reaches the first real section. What stays
     * is what says something: the four portfolio tiles and the spend plot. The
     * donut is pure ornament and is the part that goes.
     */
    .lp-panel {
        max-width: none;
        padding: 16px;
    }

    .lp-panel__mix {
        display: none;
    }

    .lp-stat {
        padding: 10px;
    }

    .lp-stat dd {
        font-size: 19px;
    }

    .lp-stat__icon {
        width: 24px;
        height: 24px;
    }

    .lp-chart__plot {
        height: 84px;
    }

    /* Twelve three-letter months do not fit a phone column, so the axis thins
       to the quarters the bars are read by anyway. */
    .lp-chart__axis li:not(:nth-child(3n+1)) {
        visibility: hidden;
    }

    /*
     * ---- Value strip -------------------------------------------------
     * Gone on a phone, asked for by name: "remove the section between the
     * services and hero banner — after the button for Schedule Consultation it
     * should go directly to the Services list" (client, 2026-09-19). Ten values
     * stacked was the tallest block on the page and says nothing the sections
     * below it do not.
     *
     * display:none rather than removing it from the markup: it is the desktop
     * design's opening statement, and this is a viewport decision, not a
     * content one.
     */
    .lp-strip {
        display: none;
    }

    /* ---- List cards: side-on ---------------------------------------- *
       Six stacked cards with a full-width image each ran 1800px on the home
       page and 2350px on the services index — two screens to see two cards.
       Side-on puts five or six in view instead, and the body copy is clamped
       rather than removed. */
    .lp-quicklinks__grid {
        gap: 12px;
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .lp-qcard {
        display: grid;
        grid-template-columns: 104px 1fr;
    }

    /*
     * The thumbnail column is stretched by the grid, so its height is whatever
     * the copy beside it comes to, and the image is taken out of flow to fill
     * that. Sizing the image in flow instead would make the row depend on the
     * image, and these are loading="lazy": until one arrives the browser sizes
     * it from the width/height attributes, which are the full 640x300 card art.
     * That is how this first went wrong — cards five times too tall, collapsing
     * as each image landed.
     */
    .lp-qcard__media {
        position: relative;
        height: auto;
    }

    .lp-qcard__media img {
        position: absolute;
        inset: 0;
    }

    .lp-qcard__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 13px 42px 13px 14px;
    }

    /* The reserved second title line exists so six cards in a row start their
       descriptions level. Side-on there is one card per row and nothing to line
       up with, so it would just be a gap under the shorter titles. */
    .lp-qcard__body b {
        min-height: 0;
    }

    .lp-qcard__body p {
        margin-top: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .lp-qcard__go {
        top: 50%;
        bottom: auto;
        right: 12px;
        transform: translateY(-50%);
    }

    .lp-services {
        gap: 12px;
    }

    .lp-scard {
        display: grid;
        grid-template-columns: 116px 1fr;
    }

    /* Side-on the thumbnail is a 116px column stretched by the grid, so it is
       the same problem .lp-qcard__media has: the picture is taken out of flow to
       fill it, because sizing it in flow would let a lazy image's width/height
       attributes set the row height until it arrives. Cropped rather than
       contained here — a photograph letterboxed into a column this narrow is
       mostly background. */
    .lp-scard__media {
        position: relative;
        aspect-ratio: auto;
    }

    .lp-scard__media img {
        position: absolute;
        inset: 0;
        object-fit: cover;
    }

    .lp-scard__body {
        padding: 14px;
        justify-content: center;
    }

    .lp-scard__body b {
        font-size: 15px;
    }

    /*
     * Not clamped. It was three lines with the rest hidden, which was fine
     * while the card led somewhere — "since the Services are not yet enabled
     * to click on and view more, people need to be able to see 100% of the
     * description" (client, 2026-09-19). The card is the only place that copy
     * exists now, so all of it shows.
     *
     * flex: 0 0 auto because flex: 1 from the desktop card would stretch the
     * paragraph and push what follows to the bottom of a taller box.
     */
    .lp-scard__body p {
        flex: 0 0 auto;
        margin: 6px 0 0;
    }

    .lp-scard__more {
        font-size: 12px;
    }

    /* ---- Feature sections ------------------------------------------- *
       Facts are a numbered list on a phone, to the design the client sent on
       2026-09-19: a ghost numeral, a red rule, the icon, then the title and its
       description. Two up with the description hidden was the previous answer
       and the client's verdict on it was "this looks terrible".

       The numeral is generated rather than written into the markup — it is the
       row's position in the list and nothing else, and the desktop layout has
       no use for it. */
    .lp-facts,
    .lp-facts--five {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 22px;
    }

    .lp-fact {
        grid-template-columns: auto auto 1fr;
        grid-template-areas:
            'no icon title'
            'no icon body';
        column-gap: 13px;
        row-gap: 3px;
        align-items: center;
        justify-items: start;
        text-align: left;
        padding: 15px 0;
        border-left: 0;
        border-top: 1px solid var(--lp-fact-rule);
    }

    .lp-fact:nth-child(2n) {
        border-left: 0;
    }

    .lp-facts > .lp-fact:first-child {
        border-top: 0;
        padding-top: 4px;
    }

    .lp-fact::before {
        grid-area: no;
        counter-increment: lp-fact;
        content: counter(lp-fact, decimal-leading-zero);
        font-family: var(--lp-font-display);
        font-weight: 700;
        font-size: 31px;
        line-height: 1;
        letter-spacing: -0.02em;
        color: var(--lp-fact-no);
    }

    /* The rule between the numeral and the icon is a border on the icon, so it
       is the icon's own height and needs no element of its own. content-box
       keeps the 34px the drawing, not the drawing plus its padding. */
    .lp-fact__icon {
        grid-area: icon;
        box-sizing: content-box;
        width: 34px;
        height: 34px;
        padding-left: 14px;
        border-left: 2px solid var(--lp-red-bright);
    }

    .lp-fact b {
        grid-area: title;
        align-self: end;
        font-size: 14px;
    }

    .lp-fact span {
        grid-area: body;
        align-self: start;
        font-size: 12.5px;
    }

    .lp-steps {
        gap: 22px;
        margin-top: 24px;
    }

    .lp-quotes {
        gap: 14px;
        margin-top: 26px;
    }

    .lp-quote {
        padding: 20px;
    }

    .lp-quote figcaption {
        margin-top: 16px;
    }

    .lp-quotes__foot {
        margin-top: 24px;
        letter-spacing: 0.14em;
    }

    /* ---- Banners and CTAs ------------------------------------------- */
    .lp-banner__inner {
        padding-top: 32px;
        padding-bottom: 34px;
    }

    .lp-banner__split {
        gap: 22px;
    }

    .lp-cta {
        padding: 28px 0;
    }

    .lp-cta__inner {
        min-height: 0;
        gap: 18px;
        padding: 22px 20px;
    }

    .lp-hero__actions .lp-btn,
    .lp-cta .lp-btn {
        width: 100%;
    }

    /* ---- Eyebrows and labels ---------------------------------------- *
       25px eyebrows in 0.14em tracking were sized against a 1420px canvas;
       at 17px they still crowd out the heading they are supposed to
       introduce. */
    .lp-eyebrow {
        font-size: 14px;
        letter-spacing: 0.1em;
        gap: 7px;
    }

    .lp-eyebrow::before {
        width: 17px;
        height: 16px;
    }

    .lp-cathead {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 14px;
    }

    .lp-cathead__note,
    .lp-sidecard__label,
    .lp-login__eyebrow {
        font-size: 13px;
    }

    /* ---- Packaging --------------------------------------------------- */
    .lp-catalog {
        gap: 16px;
        margin-top: 22px;
    }

    /* A hatched "product shot pending" placeholder does not earn 190px. */
    .lp-product__media {
        height: 120px;
    }

    .lp-product__body {
        padding: 18px;
    }

    .lp-product__body b {
        font-size: 18px;
    }

    /* Side-on, same as the list cards above: 1070px of stacked tiles for four
       one-line descriptions. */
    .lp-tiles4 {
        margin-top: 22px;
    }

    .lp-tiles4 > div {
        display: grid;
        grid-template-columns: 92px 1fr;
        column-gap: 14px;
        align-items: center;
        padding: 14px;
    }

    .lp-tiles4 figure {
        grid-row: 1 / 3;
        height: 92px;
        margin: 0;
    }

    .lp-tiles4 b {
        align-self: end;
        font-size: 15.5px;
    }

    .lp-tiles4 p {
        align-self: start;
        font-size: 13.5px;
        margin-top: 4px;
    }

    /* ---- About ------------------------------------------------------- */
    .lp-mission__figure {
        height: 190px;
        margin-top: 16px;
    }

    .lp-advantages {
        gap: 26px;
        margin-top: 26px;
    }

    .lp-advantage__no {
        font-size: 34px;
    }

    .lp-advantage b {
        font-size: 18px;
        margin-top: 8px;
    }

    .lp-advantage p {
        font-size: 15px;
    }

    /* ---- Service detail ---------------------------------------------- */

    /* The only way back up a level on these pages, and a 20px line box. */
    .lp-back {
        min-height: 40px;
    }

    .lp-specs {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .lp-aside {
        padding: 22px;
    }

    /* ---- Contact ----------------------------------------------------- *
       The form is a screen and a half tall, and on a phone the thing most
       visitors want is the phone number. display: contents lifts the three
       side cards out of their column so the call card can be ordered above
       the form without moving it in the markup, where the desktop layout
       still needs it in the right-hand column.
     */
    .lp-contact {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .lp-side {
        display: contents;
    }

    .lp-sidecard--plain {
        order: -1;
    }

    .lp-formcard {
        padding: 20px;
    }

    .lp-sidecard {
        padding: 22px;
    }

    .lp-phone {
        font-size: 27px;
    }

    .lp-hours {
        margin-top: 16px;
        padding-top: 14px;
    }

    /* A 19px line box is not a tap target. */
    .lp-emails a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* ---- Forms -------------------------------------------------------- *
       Anything under 16px makes iOS Safari zoom the page on focus and leave
       it zoomed, which is the single most common way a mobile form feels
       broken. Every control the visitor types into is pinned at 16.
     */
    .lp-field input,
    .lp-field select,
    .lp-field textarea,
    .lp-form > input,
    .lp-form > select,
    .lp-form > textarea {
        font-size: 16px;
        padding: 14px;
    }

    .lp-field textarea,
    .lp-form > textarea {
        min-height: 104px;
    }

    .lp-drop {
        padding: 18px;
    }

    .lp-drop input {
        font-size: 14px;
    }

    /*
     * The "inside the portal" column is supporting copy, not part of signing
     * in, so on a phone it drops rather than pushing the form down the screen.
     */
    .lp-login__panel {
        grid-template-columns: 1fr;
    }

    .lp-login__aside {
        display: none;
    }

    /* ---- Footer ------------------------------------------------------- *
       Fully stacked, the four columns ran 980px with 19px link rows. Two up
       is shorter *and* leaves room to give every link a real tap target. */
    .lp-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 26px 20px;
        padding-top: 40px;
        padding-bottom: 24px;
    }

    .lp-footer__grid > :first-child {
        grid-column: 1 / -1;
    }

    .lp-footer__brand img {
        height: 44px;
    }

    .lp-footer__brand span {
        font-size: 19px;
    }

    .lp-footer__tagline {
        margin-top: 12px;
    }

    .lp-footer__phone {
        margin-top: 12px;
        padding: 4px 0;
    }

    .lp-footer__links {
        gap: 0;
        margin-top: 8px;
    }

    .lp-footer__links a {
        display: block;
        padding: 9px 0;
    }

    .lp-footer__legal {
        gap: 12px;
        padding-top: 18px;
        padding-bottom: 28px;
    }

    .lp-footer__legal ul {
        gap: 16px;
    }

    .lp-dots,
    .lp-dots--page {
        width: 100%;
        opacity: 0.35;
    }

    /* ================================================================== *
       Editorial trim
       ------------------------------------------------------------------
       Everything above this line makes the desktop design fit a phone.
       This block decides what does not belong on one at all.

       The desktop pages carry a lot of supporting copy: every headline has
       a paragraph under it, every paragraph has a four-or-five item fact
       grid restating it, and every fact grid sits beside a diagram. Read at
       arm's length on a 375px screen that is the same argument three times
       over, and it was the bulk of what was left after the layout work.

       What goes is reinforcement and ornament — never the only copy saying
       something. Headings, leads, body paragraphs, prices, specs, contact
       details, navigation and calls to action are all untouched. Each rule
       below is grouped here rather than next to its component so this stays
       one block to soften or revert if the balance is wrong.
     * ================================================================== */

    /*
     * Illustrative dashboard. Fake figures drawn to look like the product;
     * the copy beside it already makes the claim. Round one cut it to the
     * parts that read as information — on reflection none of it is.
     */
    .lp-panel {
        display: none;
    }

    /*
     * Hero benefits keep their headings and lose the restatement under each
     * one ("Reduce Costs" / "Maximize savings across freight and packaging").
     * Two up, since a heading on its own is a short line.
     */
    .lp-benefits {
        grid-template-columns: 1fr 1fr;
        gap: 14px 12px;
    }

    .lp-benefit b + span {
        display: none;
    }

    /*
     * The six home cards duplicate the services index one screen further
     * down. Here they are a menu, so they read as one: art, name, arrow.
     * min-height because without the paragraph the row collapses to the
     * height of a single line and the thumbnail beside it becomes a slot.
     */
    .lp-qcard__body p {
        display: none;
    }

    .lp-qcard {
        min-height: 76px;
    }

    /*
     * Footer services column. The header menu lists these same six one tap
     * away, and the footer was the tallest block left on the page.
     */
    .lp-footer__col--services {
        display: none;
    }

    /*
     * The three feature diagrams are 1300px-wide infographics dropped into a
     * 335px column and cropped by object-fit: cover — about a third of the
     * width, at a third of the scale, with labels far past legible. A reader
     * cannot get anything from them, so they are not worth 570px and three
     * image downloads.
     */
    .lp-figure {
        display: none;
    }

    /*
     * The line under each fact used to be dropped here as reinforcement of the
     * label above it. It is back: the client's phone design has a description
     * on every row, and with the rows numbered and the figures gone it is the
     * only copy carrying the detail.
     */

    /* Steps: the copy stays, capped so no single card runs on. A testimonial
       is not capped — three lines of someone's quotation ending mid-sentence
       reads as a fault, and the section is four cards, not eight. */
    .lp-step p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .lp-steps {
        gap: 18px;
    }

    /* Packaging: the spec table under each product is the point of the
       card, so the prose above it is the part that gives way. */
    .lp-product__body p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 12px;
    }
}

/*
 * Small phones. The two-up facts survive down to 320px — the longest label
 * ("Warehousing & Distribution") still breaks between words in a 132px cell —
 * so only the side-on thumbnails need narrowing here, to keep the copy beside
 * them above roughly 20 characters a line.
 */
@media (max-width: 400px) {
    .lp-qcard {
        grid-template-columns: 88px 1fr;
    }

    .lp-scard {
        grid-template-columns: 100px 1fr;
    }

    .lp-tiles4 > div {
        grid-template-columns: 78px 1fr;
    }

    .lp-tiles4 figure {
        height: 78px;
    }
}