/* ============================================================================
   HOME.CSS — lsfab.com front page body
   ----------------------------------------------------------------------------
   Loaded only on the front page (functions.php, is_front_page()).

   WHY THIS FILE EXISTS
   The homepage was authored entirely as inline `style="..."` attributes inside
   Divi text modules: 12 hand-rolled anchor "buttons" in Inter sentence case at
   three heights and two radii, cards on #1c1c1c with two different hairline
   alphas, headings pinned to 30px so they never scaled down, and a stat bar
   that stacked to 602px on a phone. None of it went through the theme's tokens,
   so the front page was the one page on the site that did not look like the
   site. Everything here is expressed in the tokens declared in style.css.

   HOW IT IS SCOPED
   `body.home` — no extra body-class filter needed, and it cannot leak onto any
   other page. Two classes deep beats Divi's own per-module output (0,1,0) and
   its .et_pb_text_N selectors (0,2,0) for everything except the properties Divi
   writes with !important, which are set in the module attributes instead so the
   Visual Builder still shows the true value.

   DIVI TRAP DOCUMENTED HERE ONCE
   .et_pb_row carries a `::after { content:""; clear:both }` clearfix. The moment
   a row becomes `display:grid` that pseudo-element becomes a GRID ITEM and
   silently occupies a cell — a 4-up row renders 3 tiles and a phantom. Every
   grid row below therefore kills ::before/::after. Do not remove those rules.
   ========================================================================= */


/* ============================================================================
   0. WHY THE GEOMETRY BELOW IS RESTATED HERE AND NOT LEFT TO DIVI
   ----------------------------------------------------------------------------
   Divi normally writes each module's padding, border, radius and margin into a
   per-page <style id="et-builder-module-design-...-cached-inline-styles"> block.
   On this page it does so only PARTIALLY and not deterministically: measured on
   live, section 7 got its 60px padding while sections 2-6 and 8 got only their
   background-color; the six product-card modules got background-color but no
   border, radius or padding; the seven eyebrow modules lost their 10px bottom
   margin. The companion `-late.css` file Divi writes deferred styles into is
   0 bytes. The same content re-saved with those attributes untouched flips some
   of them back on, so this is Divi's dynamic-CSS split misfiring, not a bad
   attribute value.

   The module attributes are therefore left INTACT — they are what the Visual
   Builder reads and edits, and they are the record of intent — but every value
   the page actually depends on is also stated here, in tokens, at (0,2,1) so it
   wins whether or not Divi's block turns up. The two agree; if you change one,
   change both. Divi's own module margins are zeroed just below so the vertical
   rhythm cannot double up on a request where Divi does emit them.
   ========================================================================= */

body.home .ls-home-sec  > .et_pb_row > .et_pb_column > .et_pb_text,
body.home .ls-home-hero > .et_pb_row > .et_pb_column > .et_pb_text {
    margin-bottom: 0 !important;
}


/* ----------------------------------------------------------------------------
   0a. THE SAME TRAP, SECOND FORM — STALE .et_pb_text_N RULES
   Divi does not rebuild wp-content/et-cache/604277/et-core-unified-*.css when
   the page changes; it APPENDS to it. The rules written for modules that have
   since been deleted survive in that file, and because Divi numbers modules by
   position, every module after the deletion shifts down into a number that
   already has a rule. On Sep 8 the six best-seller card bodies (.et_pb_text_27
   through _32) were replaced by one Code module, so those six numbers landed on
   the Best Sellers tools, the New Arrivals eyebrow / heading / tools and the
   Reviews eyebrow / heading — and six section headers rendered as #111 cards
   with an 18px inset and a hairline round three sides.

   Deleting the cache file fixes the symptom for one build. This rule fixes the
   class of bug: every surface the homepage wants is stated in this file by
   class, so no homepage text module is allowed to wear a surface Divi's cached
   file hands it. The three classes that ARE cards are exempt and keep theirs
   from section 4 below. If a homepage text module ever legitimately needs a
   background, give it a class and add it to the exemption list.
   ------------------------------------------------------------------------- */

body.home .ls-home-hero  .et_pb_text:not(.ls-card__body):not(.ls-tile__body):not(.ls-tile-more),
body.home .ls-home-stats .et_pb_text:not(.ls-card__body):not(.ls-tile__body):not(.ls-tile-more),
body.home .ls-home-sec   .et_pb_text:not(.ls-card__body):not(.ls-tile__body):not(.ls-tile-more) {
    background-color: transparent !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}


/* ============================================================================
   1. SECTION RHYTHM
   ========================================================================= */

body.home .ls-home-sec { padding: var(--ls-section-md) 20px; }


/* ============================================================================
   2. SECTION HEADERS — eyebrow, heading, group label
   ========================================================================= */

body.home .ls-eyebrow,
body.home .ls-eyebrow p {
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-soft);
}
/* The gap under an eyebrow is the module's own custom_margin, so it stays
   editable in the Builder. Only the paragraph's default margin is cleared. */
body.home .ls-eyebrow p { margin: 0; }
body.home .ls-eyebrow    { margin-bottom: var(--ls-space-3) !important; }
body.home .ls-home-hero .ls-eyebrow { text-align: center; }

body.home .ls-home-sec h2 {
    margin: 0 0 var(--ls-space-5);
    font-size: var(--ls-h2);
    line-height: var(--ls-leading-tight);
    color: var(--ls-text);
}
/* The last heading in a section header has nothing under it but the grid, whose
   row already carries the gap. */
body.home .ls-home-sec .et_pb_text:last-child h2 { margin-bottom: 0; }

/* "GMC / CHEVY TRUCKS" / "FORD TRUCKS" — the group label inside the era grid.
   It sits between the section heading and the tiles, so it is deliberately a
   step quieter than the eyebrow above it rather than a second heading. */
body.home .ls-subhead { margin-bottom: var(--ls-space-3) !important; }
/* The "FORD TRUCKS" label opens its own row after a grid; the "GMC / CHEVY
   TRUCKS" one closes the section header, so only the standalone one needs air
   above it. */
body.home .ls-home-eras > .et_pb_row > .et_pb_column > .ls-subhead:first-child {
    margin-top: var(--ls-space-6);
}

body.home .ls-subhead,
body.home .ls-subhead p {
    margin: 0;
    font-family: var(--ls-font-display);
    font-size: var(--ls-h5);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-caps);
    text-transform: uppercase;
    color: var(--ls-text);
    line-height: 1;
}


/* ============================================================================
   3. GRID ROWS
   Divi's gutter maths is percentage-based and changes the gap at every
   breakpoint. A real grid gives one gap value, equal-height cells for free,
   and a 2-up phone layout instead of a 13-tile stack.
   ========================================================================= */

body.home .ls-grid {
    display: grid !important;
    gap: var(--ls-space-5);
    align-items: stretch;
}
/* See the clearfix note in the file header. */
body.home .ls-grid::before,
body.home .ls-grid::after { display: none !important; }

body.home .ls-grid > .et_pb_column {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
}

body.home .ls-grid--3 { grid-template-columns: repeat(3, 1fr); }
body.home .ls-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Both grids are authored as SEVERAL Divi rows stacked (two rows of three
   products, two rows of four eras), so the vertical gutter between them is row
   padding and the horizontal one is the grid's gap — 12px against 22px in the
   Builder's values. Zeroing the bottom and putting the gap on the following
   row's top makes the two gutters the same number, and gives whatever follows
   the last grid the same breathing room. */
body.home .ls-home-featured .ls-grid--3,
body.home .ls-home-eras     .ls-grid--4 { padding-bottom: 0 !important; }

body.home .ls-home-featured .ls-grid--3 + .et_pb_row,
body.home .ls-home-eras     .ls-grid--4 + .et_pb_row { padding-top: var(--ls-space-5) !important; }


/* ============================================================================
   4. CARDS
   Same object as the shop grid: --ls-surface-1, one hairline, --ls-radius-lg,
   and the brand gradient rule under the image. The card is authored as two
   Divi modules (image, then text) so the border has to be split across them —
   top/left/right on the media, left/right/bottom on the body — or the top half
   of every card floats borderless above a bordered bottom half, which is what
   it did before.
   ========================================================================= */

body.home .ls-card__media {
    position: relative;
    margin-bottom: 0 !important;
    overflow: hidden;
    line-height: 0;
    border: 1px solid var(--ls-hairline);
    border-bottom: 0;
    border-radius: var(--ls-radius-lg) var(--ls-radius-lg) 0 0;
}
body.home .ls-card__media img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(106%);
    transition: filter 300ms ease;
}
body.home .ls-grid > .et_pb_column:hover .ls-card__media img { filter: brightness(112%); }

/* The card signature from the shop grid. A pseudo-element rather than
   border-image, because border-image replaces ALL four borders and this box
   needs three of them to stay hairlines. */
body.home .ls-home-featured .ls-card__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ls-card-line-h);
    background: var(--ls-gradient-brand);
}

body.home .ls-card__body,
body.home .ls-tile__body {
    flex: 1 1 auto;
    margin: 0 !important;
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-top: 0;
    border-radius: 0 0 var(--ls-radius-lg) var(--ls-radius-lg);
}
body.home .ls-card__body { padding: var(--ls-space-4); }
body.home .ls-tile__body { padding: var(--ls-space-3) var(--ls-space-4); }
body.home .ls-card__body .et_pb_text_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.home .ls-card__kicker {
    margin: 0 0 var(--ls-space-2);
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint);
}

/* Matches .woocommerce ul.products li.product h3 exactly. */
body.home .ls-card__title {
    margin: 0 0 var(--ls-space-2);
    font-family: var(--ls-font-display);
    font-size: var(--ls-h4);
    font-weight: 600;
    line-height: var(--ls-leading-h4);
    color: var(--ls-text);
}

/* Price is white here for the same reason it is white on every shop card: red
   is the action colour on this site, and a red price directly above a red
   button made the two read as one control. */
body.home .ls-card__price {
    margin: 0 0 var(--ls-space-4);
    font-family: var(--ls-font-body);
    font-size: var(--ls-price-card);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ls-text);
    letter-spacing: 0;
}

/* Pushes the action to the bottom edge so six cards of unequal title length
   still line their buttons up. */
body.home .ls-card__action { margin: auto 0 0; }


/* ============================================================================
   5. ERA TILES
   ========================================================================= */

body.home .ls-tile__title {
    margin: 0 0 var(--ls-space-1);
    font-size: var(--ls-h3);
    line-height: var(--ls-leading-snug);
    color: var(--ls-text);
}
body.home .ls-tile__sub {
    margin: 0;
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    line-height: 1.4;
    color: var(--ls-text-soft);
}

/* The dashed "View all" cell closes each era row. It has no image, so it has to
   stretch to the height its neighbours reach on their own. */
body.home .ls-tile-more {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: var(--ls-space-7) var(--ls-space-4);
    background-color: transparent;
    border: 1px dashed var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    transition: border-color var(--ls-transition);
}
body.home .ls-tile-more .et_pb_text_inner { width: 100%; }
body.home .ls-tile-more p { margin: 0; }
body.home .ls-tile-more a {
    display: block;
    font-family: var(--ls-font-display);
    font-size: var(--ls-h6);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    text-align: center;
    color: var(--ls-text-soft);
    transition: color var(--ls-transition);
}
body.home .ls-tile-more:hover { border-color: var(--ls-hairline-strong) !important; }
body.home .ls-tile-more:hover a { color: var(--ls-text); }

/* Whole-card hover, matching the shop grid's `li.product:hover`. */
body.home .ls-card__media,
body.home .ls-card__body,
body.home .ls-tile__body { transition: border-color var(--ls-transition); }
body.home .ls-grid > .et_pb_column:hover > .ls-card__media,
body.home .ls-grid > .et_pb_column:hover > .ls-card__body,
body.home .ls-grid > .et_pb_column:hover > .ls-tile__body {
    border-color: var(--ls-hairline-strong) !important;
}


/* ============================================================================
   6. HERO
   ========================================================================= */

body.home .ls-home-hero { padding: var(--ls-section-lg) 20px; }

body.home .ls-hero__h1 {
    margin: 0 0 var(--ls-space-5);
    font-size: var(--ls-display);
    font-weight: 700;
    line-height: var(--ls-leading-display);
    color: var(--ls-text);
}

body.home .ls-hero__sub p {
    margin: 0 0 var(--ls-space-7);
    font-size: var(--ls-lede);
    line-height: var(--ls-leading-body);
    color: var(--ls-text-soft);
}

body.home .ls-hero__cta p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-3);
    justify-content: center;
    margin: 0 0 var(--ls-space-5);
}

/* ----------------------------------------------------------------------------
   6a. HERO VEHICLE FINDER  (the hero's primary call to action)
   The YMM finder shortcode is the main hero CTA; "Shop all parts" and "Shop by
   era" sit under it as outline buttons. The panel's LOOK (surface, hairline,
   gradient top edge, dropdowns, red submit) is the site-wide VPF block in
   Appearance > Additional CSS and is deliberately not repeated here - only the
   hero's own LAYOUT is set below: the three dropdowns share one row and the
   submit spans the full width beneath them, so the button reads as the primary
   action rather than a fourth field.
   -------------------------------------------------------------------------- */

body.home .ls-hero__finder p { margin: 0; }

body.home .ls-hero__finder .woo_vpf_ymm_filter_wrapper {
    max-width: 100%;
    margin: 0 auto var(--ls-space-5);
    padding: var(--ls-space-5);
    text-align: left;
}

body.home .ls-hero__finder .woo_vpf_ymm_filter_wrapper form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: var(--ls-space-3);
}

body.home .ls-hero__finder .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field {
    flex: none;
    width: auto !important;
    min-width: 0;
}

/* Year and Make are required to search; Model narrows it. The badge sits in the
   field's top border like a fieldset legend so it costs no vertical space and
   cannot push the three controls out of alignment. Homepage instance only - the
   Shop by Vehicle page and the shop sidebar are unchanged. */
body.home .ls-hero__finder .woo_vpf_ymm_filter_wrapper input[type="submit"]:hover {
    background-color: var(--ls-red-btn-hover);
}

body.home .ls-hero__finder .woo-vpf-ymm-field-model { position: relative; }

body.home .ls-hero__finder .woo-vpf-ymm-field-model::after {
    content: "Optional";
    position: absolute;
    top: -7px;
    right: 12px;
    z-index: 2;
    padding: 0 6px;
    background-color: var(--ls-surface-1);
    font-family: var(--ls-font-body);
    font-size: var(--ls-caption);
    font-weight: 600;
    line-height: 14px;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint);
    pointer-events: none;
}

body.home .ls-hero__finder .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit {
    grid-column: 1 / -1;
    flex: none;
}

/* The finder's submit is green everywhere else (site.css) because it sits in a
   sidebar card, but in the hero it IS the page's primary action, so it takes the
   site's primary red. Homepage only. */
body.home .ls-hero__finder .woo_vpf_ymm_filter_wrapper input[type="submit"] {
    width: 100%;
    min-width: 0;
    background-color: var(--ls-red-btn);
    /* The site-wide VPF block adds margin-top: 4px to the submit under 980px,
       which made the gap under "Select Model" 16px while the gaps between the
       three dropdowns stayed 12px. The grid owns the spacing here. */
    margin-top: 0;
}

body.home .ls-hero__trust p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-2) var(--ls-space-4);
    justify-content: center;
    margin: 0;
    font-size: var(--ls-small);
    line-height: 1.5;
    color: var(--ls-text-faint);
}
/* Separators are drawn, not typed, so they cannot end a wrapped line. */
body.home .ls-hero__trust span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-right: var(--ls-space-4);
    vertical-align: -0.05em;
    background: var(--ls-hairline);
}


/* ============================================================================
   7. STAT BAR
   The 1px grid gap over a hairline background draws the dividers, so they never
   have to be re-authored per breakpoint the way border-right did.
   ========================================================================= */

body.home .ls-home-stats { padding: 0 !important; }

body.home .ls-home-stats__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--ls-hairline-faint);
}
body.home .ls-home-stats__grid::before,
body.home .ls-home-stats__grid::after { display: none !important; }

body.home .ls-home-stats__grid > .et_pb_column {
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 24px !important;
    background-color: #0d0d0d;
}

body.home .ls-stat__num {
    margin: 0 0 var(--ls-space-1);
    font-family: var(--ls-font-display);
    font-size: var(--ls-h2);
    font-weight: 700;
    line-height: 1.1;
    background: var(--ls-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
body.home .ls-stat__label {
    margin: 0;
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint);
}


/* ============================================================================
   8. WHY-US BLURBS
   Given the same card object as everything else, so the section stops reading
   as three loose paragraphs floating on the background.
   ========================================================================= */

body.home .ls-why__card {
    height: 100%;
    /* The modules ask for 24px, but after the why-us and story sections were
       merged Divi stopped emitting the padding for the THIRD blurb only — the
       same dynamic-CSS misfire section 0 documents. Stated here so all three
       cards are padded whether Divi turns up or not. Change both if you change
       one. */
    padding: 24px;
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    transition: border-color var(--ls-transition);
}
body.home .ls-why__card:hover { border-color: var(--ls-hairline-strong); }
body.home .ls-why__card .et_pb_main_blurb_image { margin-bottom: var(--ls-space-4); }
/* The module asks for 36px; Divi's own `icon_font_size` rule is one of the
   declarations it is not reliably emitting for this page (see section 0), and
   the fallback is its 96px default — a third of the card's height in icon. */
body.home .ls-why__card .et-pb-icon {
    font-size: 36px !important;
    line-height: 1 !important;
    height: auto !important;
}
body.home .ls-why__card h3 {
    font-size: var(--ls-h4);
    line-height: var(--ls-leading-h4);
}
body.home .ls-why__card .et_pb_blurb_description { color: var(--ls-text-soft); }


/* ============================================================================
   9. NEW ARRIVALS  (drop board — one feature card + two side cards)

   Markup lives in a Divi Code module (`.ls-new__board`) so the Builder cannot
   wrap it in paragraphs. Card object = the site card (surface-1, hairline,
   radius-lg) with the brand gradient rule that every other homepage card uses.
   ========================================================================= */

/* header row: eyebrow + h2 on the left, count + "View all new" on the right.
   The column becomes a 2-col grid; its pseudo-elements are killed for the same
   reason the row clearfix is killed everywhere else in this file. */
body.home .ls-new__headrow > .et_pb_column,
body.home .ls-sechead > .et_pb_column {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--ls-space-5);
}
body.home .ls-new__headrow > .et_pb_column::before,
body.home .ls-new__headrow > .et_pb_column::after,
body.home .ls-sechead > .et_pb_column::before,
body.home .ls-sechead > .et_pb_column::after { display: none; }
body.home .ls-new__headrow .ls-eyebrow,
body.home .ls-sechead .ls-eyebrow { grid-column: 1; }
body.home .ls-new__headrow .et_pb_text:not(.ls-eyebrow):not(.ls-new__tools),
body.home .ls-sechead .et_pb_text:not(.ls-eyebrow):not(.ls-sechead__tools) { grid-column: 1; margin-bottom: 0 !important; }
body.home .ls-new__headrow h2,
body.home .ls-sechead h2 { margin-bottom: 0; padding-bottom: 0; }
body.home .ls-new__tools,
body.home .ls-sechead__tools { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0 !important; }
body.home .ls-new__tools p,
body.home .ls-sechead__tools p { display: flex; align-items: center; gap: var(--ls-space-4); margin: 0; }
body.home .ls-new__count,
body.home .ls-sechead__count {
    font: 600 var(--ls-small)/1 var(--ls-font-body);
    color: var(--ls-text-muted);
    white-space: nowrap;
}
body.home .ls-new__boardrow,
body.home .ls-sechead__boardrow { padding-top: 0 !important; }

/* the board */
body.home .ls-new__grid {
    display: grid;
    grid-template-columns: 1.32fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--ls-space-5);
}

body.home .ls-drop {
    position: relative;
    display: flex;
    background: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    overflow: hidden;
    isolation: isolate;
    color: var(--ls-text);
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.home .ls-drop::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(115deg, var(--ls-cyan) 0%, var(--ls-purple) 100%);
    z-index: 3;
    transform: scaleX(.35);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
body.home .ls-drop:hover {
    transform: translateY(-4px);
    border-color: var(--ls-hairline-strong);
    box-shadow: 0 24px 50px -22px rgba(124, 0, 255, .55);
    color: var(--ls-text);
}
body.home .ls-drop:hover::before { transform: scaleX(1); }

body.home .ls-drop__num {
    position: absolute; right: 14px; top: -4px;
    font: 700 84px/1 var(--ls-font-display);
    color: rgba(255, 255, 255, .05);
    letter-spacing: -.02em;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}
body.home .ls-drop__media { position: relative; overflow: hidden; background: #000; }
body.home .ls-drop__media img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
body.home .ls-drop:hover .ls-drop__media img { transform: scale(1.05); }
body.home .ls-drop__body {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; justify-content: center;
    padding: 26px 28px;
}

body.home .ls-tag {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font: 600 var(--ls-micro)/1 var(--ls-font-body);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ls-text);
    background: rgba(255, 0, 68, .14);
    border: 1px solid rgba(255, 0, 68, .45);
    border-radius: var(--ls-radius-pill);
    padding: 7px 11px 7px 9px;
    margin-bottom: 14px;
}
body.home .ls-tag i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ls-red);
    box-shadow: 0 0 0 0 rgba(255, 0, 68, .7);
    animation: lsDropPulse 1.8s infinite;
}
@keyframes lsDropPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 0, 68, .7); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 0, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 68, 0); }
}
body.home .ls-tag--ghost {
    background: rgba(255, 255, 255, .05);
    border-color: var(--ls-hairline-input);
    color: var(--ls-text-muted);
}
body.home .ls-tag--ghost i { display: none; }

body.home .ls-drop__fit {
    font: 600 12px/1 var(--ls-font-body);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ls-text-faint);
    margin: 0 0 8px;
}
body.home .ls-drop__title {
    font: 700 26px/1.08 var(--ls-font-display);
    letter-spacing: .01em; text-transform: uppercase;
    color: var(--ls-text);
    margin: 0 0 10px; padding: 0;
}
body.home .ls-drop__copy {
    font: 400 15px/1.55 var(--ls-font-body);
    color: var(--ls-text-muted);
    margin: 0 0 18px; max-width: 46ch;
}
body.home .ls-drop__foot { display: flex; align-items: center; gap: 18px; }
body.home .ls-drop__price { font: 700 22px/1 var(--ls-font-display); letter-spacing: .02em; color: var(--ls-text); }
body.home .ls-drop__price small {
    display: block;
    font: 600 var(--ls-micro)/1 var(--ls-font-body);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ls-text-faint);
    margin-bottom: 5px;
}
body.home .ls-drop__link {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 8px;
    font: 700 14px/1 var(--ls-font-display);
    letter-spacing: var(--ls-tracking-button); text-transform: uppercase;
    color: var(--ls-text);
}
body.home .ls-drop__link::after { content: "\2192"; transition: transform .2s; }
body.home .ls-drop:hover .ls-drop__link::after { transform: translateX(4px); }

/* feature card */
body.home .ls-drop--feature { grid-row: 1 / span 2; flex-direction: column; }
body.home .ls-drop--feature .ls-drop__media { flex: 0 0 auto; height: 400px; }
body.home .ls-drop--feature .ls-drop__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(17,17,17,0) 45%, var(--ls-surface-1) 100%);
}
body.home .ls-drop--feature .ls-drop__media img { object-position: center 42%; }
body.home .ls-drop--feature .ls-drop__body { padding: 0 32px 30px; margin-top: -72px; }
body.home .ls-drop--feature .ls-drop__title { font-size: var(--ls-h2); }
body.home .ls-drop--feature .ls-drop__num { font-size: 120px; right: 18px; top: 12px; color: rgba(255, 255, 255, .06); }

/* side cards */
body.home .ls-drop--side .ls-drop__media { flex: 0 0 42%; }
body.home .ls-drop--side .ls-drop__body { flex: 1 1 auto; padding: 24px 24px 26px; }
body.home .ls-drop--side .ls-drop__copy {
    font-size: var(--ls-small);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.home .ls-drop--side .ls-drop__price { font-size: var(--ls-price-card); }

@media (prefers-reduced-motion: reduce) {
    body.home .ls-tag i { animation: none; }
    body.home .ls-drop, body.home .ls-drop::before, body.home .ls-drop__media img { transition: none; }
}


/* ============================================================================
   9a. REVIEWS  (Smash Balloon "reviews-feed" carousel, feed 1)

   The plugin prints its own settings into an inline <style> on the page as
   `#sb-reviews-container-1 .thing { ... }` rules — specificity (1,1,0), an ID.
   Every selector below therefore carries that same ID plus one more class, so
   it wins on specificity rather than on !important. Do NOT "tidy" the ID out of
   these selectors: without it the plugin's own colours (green button, #161616
   cards, 4px radii) come straight back.

   The footer runs a SECOND feed on #sb-reviews-container-4 — scoping to the
   container id keeps that one untouched.
   ========================================================================= */

/* --- Rating bar: big number, stars, count, and the write-a-review action --- */

body.home #sb-reviews-container-1 .sb-feed-header {
    margin: 0 0 var(--ls-space-6);
    padding: 0 0 var(--ls-space-5);
    border-bottom: 1px solid var(--ls-hairline-faint);
}

body.home #sb-reviews-container-1 .sb-feed-header-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-4);
}

body.home #sb-reviews-container-1 .sb-feed-header-average {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ls-space-3);
}

body.home #sb-reviews-container-1 .sb-feed-header-rating {
    font-family: var(--ls-font-display);
    font-size: var(--ls-h2);
    font-weight: 700;
    line-height: 1;
    color: var(--ls-text);
}

body.home #sb-reviews-container-1 .sb-feed-header-rating-icons { color: var(--ls-amber); }

body.home #sb-reviews-container-1 .sb-feed-header-rating-subtext {
    font-size: var(--ls-micro);
    font-weight: 600;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint);
    font-family: var(--ls-font-body);
    line-height: 1.3;
}

/* Secondary action: red stays with the finder and the cart, so this is the
   site's outline button, sized like every other button on the page. */
body.home #sb-reviews-container-1 .sb-feed-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ls-space-2);
    height: var(--ls-btn-h);
    padding: 0 var(--ls-btn-pad-x);
    background: transparent;
    border: 1px solid var(--ls-hairline-strong);
    border-radius: var(--ls-btn-radius);
    font-family: var(--ls-font-display);
    font-size: var(--ls-btn-font);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    color: var(--ls-text);
    transition: background-color var(--ls-transition), border-color var(--ls-transition);
}
body.home #sb-reviews-container-1 .sb-feed-header-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--ls-text);
}
body.home #sb-reviews-container-1 .sb-feed-header-btn .sb-btn-icon { margin: 0; }
body.home #sb-reviews-container-1 .sb-feed-header-btn svg { width: 14px; height: 14px; }

/* --- Cards ---------------------------------------------------------------
   Owl sizes the stage to the TALLEST review in the whole feed, not the tallest
   one on screen, so short reviews used to leave 100-140px of dead space under
   them. Making the stage and its items flex containers stretches every card to
   the stage height instead, which is also what the rest of the page does. */

body.home #sb-reviews-container-1 .sbr-owl-stage { display: flex; }
body.home #sb-reviews-container-1 .sbr-owl-item  { display: flex; }

body.home #sb-reviews-container-1 .sb-post-item-wrap {
    position: relative;
    display: flex;
    width: 100%;
    padding: var(--ls-space-5);
    padding-top: 26px;
    overflow: hidden;
    background: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    transition: border-color var(--ls-transition), transform var(--ls-transition);
}
/* The same brand rule the finder panel and the era tiles carry. */
body.home #sb-reviews-container-1 .sb-post-item-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-image: var(--ls-gradient-brand);
}
/* Star-only reviews leave a card mostly empty once every card is the same
   height. A cropped quote glyph fills that space on purpose instead. */
body.home #sb-reviews-container-1 .sb-post-item-wrap::after {
    content: "\201D";
    position: absolute;
    right: 16px;
    bottom: -34px;
    font-family: var(--ls-font-display);
    font-size: 104px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

body.home #sb-reviews-container-1 .sb-post-item-wrap:hover {
    border-color: var(--ls-hairline-strong);
    transform: translateY(-2px);
}

body.home #sb-reviews-container-1 .sb-post-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

body.home #sb-reviews-container-1 .sb-item-author-img img {
    width: 44px;
    height: 44px;
    border: 1px solid var(--ls-hairline);
}

body.home #sb-reviews-container-1 .sb-item-author-name {
    font-family: var(--ls-font-display);
    font-size: var(--ls-h4);
    font-weight: 600;
    line-height: var(--ls-leading-h4);
    color: var(--ls-text);
}

body.home #sb-reviews-container-1 .sb-item-author-date {
    font-size: var(--ls-micro);
    font-weight: 600;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint);
    font-family: var(--ls-font-body);
    line-height: 1.3;
}

body.home #sb-reviews-container-1 .sb-item-provider-icon { opacity: 0.85; }

body.home #sb-reviews-container-1 .sb-item-rating {
    margin: var(--ls-space-4) 0 var(--ls-space-3);
    color: var(--ls-amber);
}

/* Owl sizes the stage to the longest review in the FEED, so one 12-line review
   sets the height of every card on every page of the carousel. Five lines is
   enough to read the gist; the plugin's own "..." control expands the rest. */
body.home #sb-reviews-container-1 .sb-item-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    font-size: var(--ls-body);
    line-height: var(--ls-leading-body);
    color: var(--ls-text-muted);
}
body.home #sb-reviews-container-1 .sb-post-item-wrap.sb-expanded .sb-item-text,
body.home #sb-reviews-container-1 .sb-item-text.sb-expanded {
    -webkit-line-clamp: unset;
}

/* --- Arrows: dark discs on the row's edges, not lilac dots on the cards --- */

body.home #sb-reviews-container-1 .sbr-owl-prev,
body.home #sb-reviews-container-1 .sbr-owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    background: rgba(17, 17, 17, 0.94);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-pill);
    color: var(--ls-text);
    transition: background-color var(--ls-transition), border-color var(--ls-transition);
}
/* Far enough out that the disc clears the card's 22px text inset — at -12px it
   sat on top of the first line of the review. */
body.home #sb-reviews-container-1 .sbr-owl-prev { left: -26px; }
body.home #sb-reviews-container-1 .sbr-owl-next { right: -26px; }
body.home #sb-reviews-container-1 .sbr-owl-prev:hover,
body.home #sb-reviews-container-1 .sbr-owl-next:hover {
    background: #1a1a1a;
    border-color: var(--ls-hairline-strong);
}
body.home #sb-reviews-container-1 .sbr-owl-prev svg,
body.home #sb-reviews-container-1 .sbr-owl-next svg { width: 13px; height: 13px; }

/* --- Dots: the active one stretches into a brand-gradient bar -------------- */

body.home #sb-reviews-container-1 .sbr-owl-dots {
    display: flex;
    justify-content: center;
    gap: var(--ls-space-2);
    margin: var(--ls-space-5) 0 0;
    padding: 0;
}
body.home #sb-reviews-container-1 .sbr-owl-dot {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}
body.home #sb-reviews-container-1 .sbr-owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0;
    background: rgba(255, 255, 255, 0.22);
    border-radius: var(--ls-radius-pill);
    transition: width var(--ls-transition), background-color var(--ls-transition);
}
body.home #sb-reviews-container-1 .sbr-owl-dot:hover span { background: rgba(255, 255, 255, 0.45); }
body.home #sb-reviews-container-1 .sbr-owl-dot.active span {
    width: 24px;
    background: transparent;
    background-image: var(--ls-gradient-brand);
}


/* ============================================================================
   9b. BEST SELLERS — PICK BOARD  (.ls-feat__grid)

   The same card object as the New Arrivals drop board in section 9 — surface-1
   on a hairline, the brand rule across the top that grows on hover, the ghosted
   rank glyph, the image fading into the body — laid out 3-up x 2 rather than as
   a bento, because this section is the merchandising and every one of the six
   cards has to carry a price and an action of its own.

   Markup is a Divi Code module so the Builder cannot wrap the anchors in
   paragraphs, the same as section 9.
   ========================================================================= */

body.home .ls-feat__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ls-space-5);
}

body.home .ls-drop--pick { flex-direction: column; }

/* A fixed band rather than the square the file is: six 800x800 photos stacked
   full height would push the prices two screens apart. */
body.home .ls-drop--pick .ls-drop__media { flex: 0 0 auto; height: 230px; }
/* Three stops, not two: these six photos have LIGHT bottoms (a white S10 bed,
   a concrete floor) where the New Arrivals feature photo is dark, and a plain
   two-stop fade left the kicker line sitting unreadable on the picture. */
body.home .ls-drop--pick .ls-drop__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(17,17,17,0) 34%,
        rgba(17,17,17,.72) 68%,
        var(--ls-surface-1) 92%);
}
body.home .ls-drop--pick .ls-drop__body {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding: 0 22px 22px;
    margin-top: -44px;
}
body.home .ls-drop--pick .ls-drop__num { font-size: 92px; right: 14px; top: 0; }
body.home .ls-drop--pick .ls-drop__fit { margin-bottom: 6px; }
body.home .ls-drop--pick .ls-drop__title {
    font-size: var(--ls-h4);
    line-height: var(--ls-leading-h4);
    margin-bottom: var(--ls-space-4);
}
/* Pins the six feet to the bottom edge so cards with a one-line and a two-line
   title still line their prices and buttons up across the row. */
body.home .ls-drop--pick .ls-drop__foot { margin-top: auto; }
body.home .ls-drop--pick .ls-drop__price { font-size: var(--ls-price-card); }
body.home .ls-drop--pick .ls-btn--sm { margin-left: auto; }


/* --- the 1px hover seam ---------------------------------------------------
   While a card runs its translateY the scaled <img> is handed to the
   compositor as its own layer, and the card's rounded overflow clip gets
   applied a fraction of a pixel out (the rows land on fractional y — a card
   top of 296.14px, not 296). What flashes through is one row of UN-FADED
   photo along the bottom of the image band. Three things together close it:
   the card is promoted up front so no layer is created mid-animation, the
   media does its own rounded clipping so the image and its fade rasterise
   together, and the fade is pulled 1px past the band so any rounding that is
   left has nothing to reveal. Applies to the New Arrivals cards too — same
   object, same seam. */
body.home .ls-drop { will-change: transform; }
body.home .ls-drop__media {
    backface-visibility: hidden;
    transform: translateZ(0);
}
body.home .ls-drop--pick .ls-drop__media,
body.home .ls-drop--feature .ls-drop__media {
    border-radius: var(--ls-radius-lg) var(--ls-radius-lg) 0 0;
}
body.home .ls-drop--side .ls-drop__media {
    border-radius: var(--ls-radius-lg) 0 0 var(--ls-radius-lg);
}
body.home .ls-drop--pick .ls-drop__media::after,
body.home .ls-drop--feature .ls-drop__media::after { bottom: -1px; }


/* ============================================================================
   10. ABOUT — STORY + WHY-US IN ONE SECTION  (.ls-home-about)

   The "Built different" why-us section and the "Our story" section were merged
   Sep 4 2026: one section that opens with the story and closes with the three
   proof cards under a hairline. The why-us card object itself is unchanged and
   still lives in section 8; only the rhythm between the two rows is set here.
   The third card was "Designed by builders, for builders" — the same words as
   the story heading it now sits under — and is "Parts we run ourselves" here.
   ========================================================================= */

body.home .ls-about__story { padding-bottom: var(--ls-space-7); }

/* "Read our full story" is a ghost button with a drawn arrow — the label stays
   clean text and the glyph is a flex item, so the button's own 8px gap spaces
   it and it nudges on hover. */
body.home .ls-btn--arrow::after {
    content: "\2192";
    font-family: var(--ls-font-body);
    font-size: 1.0625em;
    line-height: 1;
    transition: transform var(--ls-transition);
}
body.home .ls-btn--arrow:hover::after { transform: translateX(3px); }

body.home .ls-about__cards {
    padding-top: var(--ls-space-7);
    border-top: 1px solid var(--ls-hairline-faint);
}

body.home .ls-story__body { margin-bottom: var(--ls-space-5) !important; }
body.home .ls-story__body p {
    margin: 0;
    font-size: var(--ls-lede);
    line-height: var(--ls-leading-body);
    color: var(--ls-text-soft);
}


/* ============================================================================
   11. SM BUTTONS INSIDE CARDS
   components.css sizes .ls-btn--sm with min-height and font-size but leaves
   line-height at the 48px base, which only stays invisible while the button is
   a flex container. Restating it keeps the label centred if any sheet ever
   knocks the flex off, and costs nothing when it does not.
   ========================================================================= */

body.home .ls-btn--sm { line-height: var(--ls-btn-h-sm) !important; }
/* components.css resets button line-height to 1.2 under 640px because it also
   adds 12px of vertical padding there; the pin above out-ranks that reset
   (0,2,0 vs 0,1,0) and made every small button on this page 66px tall on a
   phone. Restate the reset at matching weight, after the pin. */
@media (max-width: 640px) {
    body.home .ls-btn--sm { line-height: 1.2 !important; }
}


/* ============================================================================
   12. TABLET
   ========================================================================= */

@media (max-width: 980px) {

    body.home .ls-home-sec  { padding: var(--ls-section-md) 20px; }
    body.home .ls-home-hero { padding: var(--ls-section-lg) 20px; }

    body.home .ls-grid--3,
    body.home .ls-grid--4 { grid-template-columns: repeat(2, 1fr); }

    body.home .ls-home-stats__grid { grid-template-columns: repeat(2, 1fr); }

    body.home .ls-feat__grid { grid-template-columns: repeat(2, 1fr); }

    body.home .ls-new__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    body.home .ls-drop--feature { grid-row: auto; }
    body.home .ls-drop--feature .ls-drop__media { height: auto; aspect-ratio: 16 / 9; }

    /* The row is only ~3% off each edge here, which is less than the 26px the
       arrows hang out by on desktop. */
    body.home #sb-reviews-container-1 .sbr-owl-prev { left: -6px; }
    body.home #sb-reviews-container-1 .sbr-owl-next { right: -6px; }
}


/* ============================================================================
   13. PHONE
   ========================================================================= */

@media (max-width: 767px) {

    body.home .ls-home-sec  { padding: var(--ls-section-md) 20px; }
    body.home .ls-home-hero { padding: var(--ls-section-lg) 20px; }

    /* The section already owns 20px each side; the rows' 94% on top of it left
       cards 275px wide on a 375px screen. */
    body.home .ls-home-sec > .et_pb_row,
    body.home .ls-home-hero > .et_pb_row { width: 100% !important; }

    body.home .ls-grid { gap: var(--ls-space-3); }

    /* Featured products stay one-up: they carry a price and an action and are
       the merchandising, not the index. The era tiles ARE an index, so they go
       two-up — thirteen full-width tiles was 5,000px of scrolling. */
    body.home .ls-grid--3 { grid-template-columns: 1fr; }
    body.home .ls-grid--4 { grid-template-columns: repeat(2, 1fr); }

    body.home .ls-tile__title { font-size: var(--ls-h3); }
    body.home .ls-tile__sub   { font-size: var(--ls-small); }
    body.home .ls-tile-more   { min-height: 96px; }

    /* Two buttons at 16px uppercase do not fit side by side at 375px, and a
       half-width wrapped button is a poor tap target. */
    /* Three dropdowns side by side are ~105px wide at 375px. Stack them. */
    body.home .ls-hero__finder .woo_vpf_ymm_filter_wrapper { padding: var(--ls-space-4); }
    body.home .ls-hero__finder .woo_vpf_ymm_filter_wrapper form { grid-template-columns: 1fr; }

    body.home .ls-hero__cta p { flex-direction: column; align-items: stretch; }
    body.home .ls-hero__cta .ls-btn { width: 100%; }

    /* Three claims on one 375px line means two wraps, and a drawn separator
       that wraps with its span lands at the START of the new line. Stacked,
       they need no separators at all. */
    body.home .ls-hero__trust p { flex-direction: column; gap: var(--ls-space-1); }
    body.home .ls-hero__trust span + span::before { content: none; }

    /* Swipe is the gesture here; 40px discs on the card edges are a mis-tap. */
    body.home #sb-reviews-container-1 .sbr-owl-nav { display: none; }
    body.home #sb-reviews-container-1 .sb-post-item-wrap { padding: var(--ls-space-4); padding-top: 22px; }
    body.home #sb-reviews-container-1 .sb-feed-header-bottom { flex-direction: column; align-items: stretch; }
    body.home #sb-reviews-container-1 .sb-feed-header-btn { width: 100%; }

    body.home .ls-about__story { padding-bottom: var(--ls-space-6); }
    body.home .ls-about__cards { padding-top: var(--ls-space-6); }

    body.home .ls-home-stats__grid > .et_pb_column { padding: 20px 12px !important; }
    body.home .ls-stat__num { font-size: var(--ls-h2); line-height: 1.1; }

    body.home .ls-new__headrow > .et_pb_column,
    body.home .ls-sechead > .et_pb_column { grid-template-columns: 1fr; row-gap: 14px; }
    body.home .ls-new__tools,
    body.home .ls-sechead__tools { grid-column: 1; grid-row: auto; }
    body.home .ls-new__tools p,
    body.home .ls-sechead__tools p { justify-content: space-between; }

    body.home .ls-feat__grid { grid-template-columns: 1fr; gap: 14px; }
    body.home .ls-drop--pick .ls-drop__media { height: auto; aspect-ratio: 3 / 2; }
    body.home .ls-drop--pick .ls-drop__body { padding: 0 20px 20px; margin-top: -40px; }
    body.home .ls-drop--pick .ls-drop__num { font-size: 64px; }
    body.home .ls-new__grid { gap: 14px; }
    body.home .ls-drop--feature .ls-drop__media { aspect-ratio: 4 / 3; }
    body.home .ls-drop--feature .ls-drop__body { padding: 0 20px 22px; margin-top: -56px; }
    body.home .ls-drop--feature .ls-drop__num { font-size: 88px; }
    body.home .ls-drop--side { flex-direction: column; }
    body.home .ls-drop--side .ls-drop__media {
        flex: none;
        aspect-ratio: 3 / 2;
        border-radius: var(--ls-radius-lg) var(--ls-radius-lg) 0 0;
    }
    body.home .ls-drop--side .ls-drop__media::after {
        content: ""; position: absolute; inset: 0 0 -1px;
        background: linear-gradient(180deg, rgba(17,17,17,0) 60%, var(--ls-surface-1) 100%);
    }
    body.home .ls-drop--side .ls-drop__body { padding: 0 20px 20px; margin-top: -28px; }
    body.home .ls-drop__num { font-size: 64px; }
    body.home .ls-drop__foot { gap: 12px; }

    /* Divi's default gap between stacked modules is generous for text and far
       too generous once a column is a card. */
    body.home .ls-grid > .et_pb_column > .et_pb_module { margin-bottom: 0; }

    /* The story column carries 40px of right padding to hold the photo off the
       copy on desktop. The photo is hidden on phones, so that padding is just
       a shortened measure. */
    body.home .ls-home-about > .et_pb_row > .et_pb_column { padding-right: 0 !important; }
}


/* ============================================================================
   14. NARROW PHONE
   ========================================================================= */

@media (max-width: 400px) {
    body.home .ls-grid--4     { gap: var(--ls-space-2); }
    body.home .ls-tile__title { font-size: var(--ls-h3); }
}