/*
 * THE HOMEPAGE DELIVERY BANNER.
 *
 * SCOPE. Every selector is under `.lf-delb`, a class used on no other page. It
 * borrows `.lf-dicon` and nothing else; the CTA is deliberately NOT `.lf-btn`,
 * because the reference's button is olive with a large radius and adopting
 * `.lf-btn` would have meant overriding almost all of it.
 *
 * IT DOES NOT USE `.lf-wrap`. That is the point of this revision. Sharing the
 * site container centred the composition inside a 1440px column, so at 1920 the
 * content began 288px from the left with a dead band beside it and the whole
 * thing read as a website component sitting on a photograph. A campaign banner
 * is measured from the EDGE OF THE CANVAS, so this section carries its own
 * layout: the copy starts 7vw from the viewport edge and the content column is
 * `min(76vw, 1260px)` — 1094px at 1440, 1260px at 1920 — which is the width the
 * reference gives its card row, not the width of a page container.
 *
 * THE SIZES ARE THE REFERENCE'S, NOT A SCALED-UP VERSION OF THE LAST ONE. The
 * previous pass moved everything up ten per cent and stayed a miniature. These
 * are absolute targets read off the reference and held with clamps that hit
 * them at BOTH 1440 and 1920 rather than at one width and drifting at the
 * other: 76px headline at 1440 and 96px at 1920, 260px cards at 1440 and 300px
 * at 1920, a 690px free-delivery bar, a 360x70 button.
 *
 * THE ACCENT IS A CAMPAIGN COLOUR, and named as one. Lomond's palette is navy,
 * cream, taupe and brass; the sage in the free-delivery bar and the olive in
 * the button are not in it. They are here because the owner supplied a
 * reference using them and chose it three times, so they live as
 * component-scoped tokens with `--db-` names rather than being promoted into
 * the site's variables — nothing outside this file can pick them up by accident.
 */

.lf-delb {
  --db-sage:      #DDE4D2;   /* the free-delivery bar */
  --db-sage-line: #C8D2B8;
  --db-olive:     #5E6B47;   /* the button */
  --db-olive-dk:  #4B5739;
  /* NEARLY SOLID. At .93 the two right-hand cards sat over the brightest part
     of the sofa and the throw showed through them — four objects that read as
     ghosts rather than as surfaces lifted off the photograph. */
  --db-card:      rgba(255, 255, 255, .98);
  --db-card-line: rgba(255, 255, 255, .92);

  /*
   * THE SECTION'S OWN LAYOUT, in two numbers.
   *
   * `--db-edge` is where the copy starts, measured from the canvas rather than
   * from a container. `--db-body` is how far it runs: the card row's width, and
   * the widest thing in the composition — the heading and the free-delivery bar
   * are both narrower, deliberately, because a card row that stops where the
   * heading stops is the shape the reference does not have.
   */
  /*
   * 195px at 1440, 234px at 1920 — 80px further in than the 8vw it was.
   *
   * A FLAT ADDITION ON TOP OF THE PROPORTIONAL FIGURE, not a bigger percentage.
   * The complaint was a fixed perceptual distance ("too close to the left"), and
   * a pure vw that satisfied it at 1440 would have thrown the content 260px in
   * at 1920 and squeezed it at 1280. `8vw + 80px` keeps the proportional
   * behaviour and moves the whole group the same 80px at every desktop width.
   * Capped so an ultra-wide monitor does not keep pushing.
   *
   * It is ONE variable, so the logo, the strapline, the heading, the
   * subheading, the bar, the four cards, the button and the supporting row all
   * move together and their relative alignment cannot drift.
   */
  --db-edge: min(calc(8vw + 80px), 300px);
  --db-body: min(65vw, 1250px);

  position: relative;
  isolation: isolate;
  /* A banner, with a floor and no ceiling: the content decides the height and
     never falls below the reference's proportions. 634px at 1440, 700px at
     1920 — the reference's 600-680 band, measured. */
  min-height: clamp(560px, 46vw, 760px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--lf-cream);
}
/* Nothing above or below it: the reference is edge to edge, and the sections
   either side supply their own rhythm. */
.lf-delb + * { margin-top: 0; }

/* ============================================================== the scene */

.lf-delb__scene { position: absolute; inset: 0; z-index: 0; }
.lf-delb__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  /*
   * The source is 1448x717 and the band is wider than it is tall at every
   * desktop width, so `cover` scales to the WIDTH and crops vertically; the
   * horizontal figure only starts doing work at the narrow breakpoints, where
   * it is set again. 42% keeps the sofa, the chaise and the rug and drops
   * ceiling and foreground floor.
   */
  object-position: 50% 42%;
  display: block;
}

/*
 * A WASH, NOT A SCRIM. The reference lightens the left towards warm white and
 * leaves the right almost clear. Darkening it would make a furniture photograph
 * look like a video thumbnail — the whole point is that the banner stays light.
 *
 * The stops are the brief's: strong under the logo and the first words, half
 * gone by the middle of the heading, effectively absent past three quarters, so
 * the room is still visible BEHIND the headline rather than only beside it.
 */
.lf-delb__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(252, 250, 246, .88) 0%,
      rgba(252, 250, 246, .78) 25%,
      rgba(252, 250, 246, .55) 45%,
      rgba(252, 250, 246, .25) 60%,
      rgba(252, 250, 246, .06) 75%,
      rgba(252, 250, 246, 0) 88%);
}
/*
 * A SECOND WASH, BELOW THE HEADLINE ONLY.
 *
 * The gradient above is the brief's, and it is deliberately weak past the
 * middle so the room stays visible behind the heading. Measured against the
 * photograph, that leaves the subheading at 3.93:1 and the three supporting
 * lines at 2.28-4.07:1 against a 4.5:1 requirement — they sit lower and further
 * right than the heading, over the navy cushion and the dark table.
 *
 * Darkening the whole wash would have fixed it and destroyed the composition.
 * This lifts ONLY the band below 40% of the height, fades in vertically so
 * there is no visible edge, and is gone by 72% of the width — the heading's own
 * band is untouched and the room still reads behind it. The cards and the bar
 * carry their own surfaces and are unaffected either way.
 */
/*
 * A POCKET, NOT A PANEL.
 *
 * The reference sets its flourish over flat cream; this photograph has the sofa
 * there, and measured across the band the whole 50-70% column runs at 1.0-2.2:1
 * against navy. A soft ellipse lifts about 300x200px of it — the back cushion,
 * nothing structural — so the words are readable without a veil going over the
 * furniture. It has no edge at any opacity.
 */
.lf-delb__wash::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(30% 30% at calc(var(--db-edge) + var(--db-body) * .72) 46%,
    rgba(252, 250, 246, .58) 0%,
    rgba(252, 250, 246, .48) 42%,
    rgba(252, 250, 246, .20) 72%,
    rgba(252, 250, 246, 0) 100%);
}
.lf-delb__wash::after {
  content: ""; position: absolute; inset: 40% 0 0 0;
  background: linear-gradient(90deg,
    rgba(252, 250, 246, .62) 0%,
    rgba(252, 250, 246, .60) 34%,
    rgba(252, 250, 246, .58) 54%,
    rgba(252, 250, 246, .52) 66%,
    rgba(252, 250, 246, .44) 76%,
    rgba(252, 250, 246, .26) 86%,
    rgba(252, 250, 246, .08) 94%,
    rgba(252, 250, 246, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 34%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 34%);
}

/* =============================================================== content */

.lf-delb__inner {
  position: relative; z-index: 1;
  width: 100%;
  /* Measured from the canvas edge. No max-width, no auto margins: the two
     things that made the last version a centred page container. */
  /*
   * 70px at 1440, 88px at 1920 — more than double what it was. The composition
   * did not read as inset because the content ran the full height of the band;
   * the reference leaves roughly a tenth of the canvas clear above the logo and
   * more below the button. This is where the "editorial inset" actually comes
   * from, far more than the horizontal figure does.
   */
  padding: clamp(2rem, 4.9vw, 4.6rem) var(--db-edge);
}
/*
 * ONE CONTENT COLUMN, not a cap on every child — and the column is the CARD
 * ROW's width, so the cards run to it and the heading and bar stop short of it.
 */
.lf-delb__body { width: var(--db-body); max-width: 100%; }

.lf-delb__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem;
  /*
   * The kicker belongs beside the logo, not out at the far edge of a 1260px
   * column. At 700px it reached 62% of the canvas at 1280, where the wash has
   * gone and 12.5px navy over dark wood measured 3.30:1. Pulled in, it stays
   * inside the wash at every width and reads as a pair with the logo.
   */
  max-width: min(520px, 100%);
  margin-bottom: clamp(.6rem, 1.1vw, 1rem);
}
.lf-delb__logo { margin: 0; }
/* 239px at 1440, 260px at 1920 — the reference's proportion, measured off it
   at 16.6% of the canvas. THE ARTWORK IS UNTOUCHED; only its size is set. */
.lf-delb__logo img { width: clamp(172px, 16.6vw, 260px); height: auto; display: block; }

.lf-delb__kicker {
  margin: .5rem 0 0;
  font-family: var(--lf-sans);
  font-size: .78rem;
  letter-spacing: .24em;
  line-height: 2.1;
  text-transform: uppercase;
  text-align: right;
  color: var(--lf-navy);
}
.lf-delb__kicker::after {
  content: ""; display: block; width: 2.6rem; height: 1px;
  margin: .75rem 0 0 auto; background: var(--lf-taupe);
}

.lf-delb__h {
  font-family: var(--lf-serif);
  /*
   * 70px at 1440, 93px at 1920 — the reference's proportion (4.85% of the
   * canvas), not the previous 76/96. Dominant and still one line, but no longer
   * filling the band, which is what made the section read as oversized.
   */
  font-size: clamp(2.2rem, 4.85vw, 93px);
  line-height: 1.0;
  letter-spacing: -.006em;
  color: var(--lf-navy);
  margin: 0 0 .62rem;
}
.lf-delb__lede {
  /* Deliberate separation: the reference gives this line room rather than
     tucking it under the headline. */
  margin: 0 0 clamp(1.1rem, 1.55vw, 1.75rem);
  /* 21px at 1440, 28px at 1920 — the reference's 1.47% of the canvas. */
  font-size: clamp(.95rem, 1.47vw, 1.75rem);
  line-height: 1.5;
  color: var(--lf-taupe-deep);
  /*
   * WIDE ENOUGH TO HOLD ONE LINE at 1440 and at 1920. It has wrapped twice:
   * at 34ch, and again at 760px once the type went up to 28px at 1920. A
   * second line of subheading costs ~40px of band height and breaks the
   * reference's single-line relationship with the headline above it.
   */
  max-width: min(48vw, 920px);
}

/* ------------------------------------------------- the free-delivery bar */

.lf-delb__free {
  /*
   * A BAR, NOT A TAG, and narrower than the card row on purpose — the reference
   * steps the composition down from the heading to the bar and out again to the
   * cards, which is what stops it reading as a stack of equal blocks.
   */
  display: flex; align-items: center; gap: .8rem;
  /* 500px at 1440, 665px at 1920 — the reference's 34% of the canvas, which is
     roughly the width of the copy above it rather than an arbitrary stretch. */
  width: min(34.6vw, 665px); max-width: 100%;
  min-height: clamp(40px, 3.05vw, 58px);
  margin: 0 0 clamp(1rem, 1.5vw, 1.7rem);
  padding: .6rem clamp(1rem, 1.35vw, 1.35rem);
  border: 1px solid var(--db-sage-line);
  border-radius: 10px;
  background: var(--db-sage);
  /* 17px at 1440, 22px at 1920. */
  font-size: clamp(.9rem, 1.17vw, 1.4rem);
  line-height: 1.3;
  color: var(--lf-navy);
}
.lf-delb__free .lf-dicon { width: clamp(1.35rem, 1.6vw, 1.9rem); height: clamp(1.35rem, 1.6vw, 1.9rem); flex: 0 0 auto; color: var(--lf-navy); }
.lf-delb__free strong { font-weight: 500; }
.lf-delb__free-num { font-weight: 600; }

/* ============================================================= the cards */

.lf-delb__cards {
  list-style: none; margin: 0 0 clamp(1.3rem, 2.1vw, 2.4rem); padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--lf-delb-cols, 4), minmax(0, 1fr));
  /* 26px at 1440, 30px at 1920 — the residue that lands the cards on 215px and
     289px inside a 936px and a 1248px row, which is the reference's card. */
  gap: clamp(.8rem, 1.8vw, 1.9rem);
}
/*
 * FOUR OBJECTS, FLOATING. Each card is its own surface with its own shadow,
 * lifted off the photograph rather than ruled into a table — the difference
 * between the reference and the version it replaced.
 */
.lf-delb__card {
  display: flex; align-items: center; gap: clamp(.6rem, .9vw, 1.05rem);
  /* 19px at 1440, 24px at 1920. */
  padding: clamp(.85rem, 1.35vw, 1.5rem);
  border: 1px solid var(--db-card-line);
  /* The reference's corner is a restrained 10-12px, not an app-card 18. */
  border-radius: 12px;
  background: var(--db-card);
  /* 97px at 1440, 129px at 1920 — the reference's compact landscape card. */
  min-height: clamp(84px, 6.75vw, 129px);
  /* Two shadows: a wide, very faint lift and a tight contact edge. One large
     soft shadow alone reads as a glow on a photograph. */
  box-shadow: 0 1px 2px rgba(0, 20, 46, .04), 0 10px 26px -16px rgba(0, 20, 46, .28);
}
.lf-delb__icon { flex: 0 0 auto; color: var(--lf-navy); line-height: 0; }
/* 37px at 1440, 50px at 1920 — the reference gives the icon real presence
   inside a card that is otherwise mostly whitespace. */
.lf-delb__icon .lf-dicon { width: clamp(1.75rem, 2.6vw, 3.15rem); height: clamp(1.75rem, 2.6vw, 3.15rem); margin: 0; }
.lf-delb__text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.lf-delb__name {
  font-family: var(--lf-sans);
  /* 14px at 1440, 18px at 1920 — clearly smaller than the price, as the
     reference has it. The canonical service names are not shortened to fit. */
  font-size: clamp(.78rem, .97vw, 1.13rem);
  line-height: 1.25;
  color: var(--lf-taupe-deep);
}
.lf-delb__price {
  font-family: var(--lf-sans);
  /* 24px at 1440, 32px at 1920 — bold and instantly scannable without turning
     the card into a dashboard tile. */
  font-size: clamp(1.25rem, 1.69vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--lf-navy);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ====================================================== button and notes */

.lf-delb__foot {
  display: flex; align-items: center; flex-wrap: wrap;
  /* The button and the supporting row are one compositional line across the
     content width, not a button with footnotes stacked next to it. */
  gap: clamp(1.1rem, 1.9vw, 2.3rem);
}

.lf-delb__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  /* 327x54 at 1440, 436x72 at 1920 — the reference's button, substantial but
     clearly secondary to the prices above it. */
  width: clamp(240px, 22.7vw, 440px); max-width: 100%;
  min-height: clamp(46px, 3.75vw, 72px); padding: 0 1.5rem;
  border: 1px solid var(--db-olive);
  border-radius: 999px;
  background: var(--db-olive);
  color: #fff;
  font-family: var(--lf-sans);
  /* 17px at 1440, 21.6px at 1920. */
  font-size: clamp(.9rem, 1.18vw, 1.35rem);
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .3s var(--lf-ease), border-color .3s var(--lf-ease);
}
.lf-delb__cta:hover { background: var(--db-olive-dk); border-color: var(--db-olive-dk); }
.lf-delb__cta svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; transition: transform .3s var(--lf-ease); }
.lf-delb__cta:hover svg { transform: translateX(3px); }

/*
 * THE SUPPORTING ROW IS THE BANNER'S SECOND COMPOSITIONAL LINE.
 *
 * It was a stack of three short lines pressed against the button — the
 * bunching the owner flagged. The reference spreads three icon-and-label pairs
 * horizontally across the remaining width with hairline separators between
 * them, and that rhythm is what stops the lower half reading as footnotes.
 *
 * WHAT THEY SAY IS UNCHANGED. The reference's own labels are marketing claims
 * about a shop that has not opened and has no customers, so the three
 * statements this banner already made — all of them true of the delivery
 * engine, the third read from the approved claims table — are the ones that
 * were redistributed. The layout was the defect, not the wording.
 */
.lf-delb__trust {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem clamp(.8rem, 1.4vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
  flex: 1 1 auto;
}
.lf-delb__trust li {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  /*
   * Two short lines rather than one long one, which is what lets three of them
   * sit BESIDE the button on one compositional line, as the reference has it.
   * At 15.5em the row was 687px wide, did not fit next to a 327px button and
   * wrapped underneath — which put the supporting copy back where it started,
   * on its own row, with 70px of dead canvas beneath it. Each label is about 35
   * characters, so ~12.3em is two comfortable lines and no more. Not 11.3: the
   * longest label needs about 11em for its first line, and at 11.3em it fell to
   * three lines at 1280 and 1600 while the other two stayed at two — three
   * items of different heights read as a mistake rather than a row. Probed at
   * 0.5em steps across four widths: 12.3em is two lines at every one of them
   * and still fits beside the button. Widening does NOT push the row right —
   * the row stretches to the content column either way.
   */
  max-width: 12.3em;
  /* 13.5px at 1440, 18px at 1920. */
  font-size: clamp(.76rem, .94vw, 1.125rem);
  line-height: 1.35;
  /*
   * NAVY, NOT TAUPE. This row sits lower and further right than anything else
   * in the copy, where the wash is deliberately thinning, and in taupe it
   * measured 2.85-3.77:1 against a 4.5:1 requirement. Navy is the site's own
   * text colour and 1.8x darker in luminance, which clears it without pushing
   * more cream across the photograph. Size, not colour, makes it subordinate.
   */
  color: var(--lf-navy);
}
.lf-delb__trust li + li::before {
  content: ""; position: absolute;
  left: calc(-1 * clamp(.5rem, 1.05vw, 1.2rem));
  top: .1em; bottom: .1em; width: 1px;
  background: var(--lf-line-strong);
}
.lf-delb__trust-icon { flex: 0 0 auto; line-height: 0; color: var(--lf-navy); }
.lf-delb__trust-icon .lf-dicon {
  width: clamp(1.25rem, 1.55vw, 1.85rem); height: clamp(1.25rem, 1.55vw, 1.85rem);
  margin: 0; opacity: .85;
}

/* ================================================= the editorial flourish = */

.lf-delb__script {
  position: absolute;
  /*
   * The one pocket on this photograph with usable contrast, found by sampling
   * the composited band rather than by eye. Placed at 32% it ran straight
   * through the word "pricing"; the copy block reaches 51% of the canvas at
   * both 1440 and 1920, and the headline and the subheading end at 39% and 44%
   * of the height. So: right of the free-delivery bar, level with it, below the
   * subheading and above the cards — the only rectangle that is clear of all
   * four at both widths.
   */
  /* 52.5%/44%: at 51%/42.5% the flourish's rotated bounding box still clipped
     the corner of the headline's line box by ~20px at 1440 — the ink never
     touched, but a decorative element should not be relying on that. */
  /*
   * Was `left: 52.5%` — a fraction of the CANVAS, which stopped tracking the
   * copy the moment the content moved. Expressed against the content block it
   * keeps the same relationship to the headline and the bar at any inset:
   * 68.5% of the way across the content column, which is where it already sat.
   */
  left: calc(var(--db-edge) + var(--db-body) * .685); top: 44%;
  width: min(12.5%, 185px);
  margin: 0;
  transform: rotate(-5deg);
  transform-origin: left center;
  display: flex; flex-direction: column;
  font-family: var(--lf-serif);
  font-weight: 400;
  /*
   * NEVER BELOW 24px. At 1241-1280 it rendered at 21.7-22.4px, which is under
   * WCAG's large-text threshold, so it needed 4.5:1 rather than 3:1 and
   * measured 3.50. It is only shown from 1241 up, and at every one of those
   * widths it is now large text.
   */
  font-size: clamp(1.5rem, 1.75vw, 2rem);
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--db-olive-dk);
  pointer-events: none;
}
.lf-delb__script span:nth-child(2) { padding-left: 1.1em; }
.lf-delb__swash {
  width: 78%; height: auto; margin: .3em 0 0 1.1em;
  opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .lf-delb__cta, .lf-delb__cta svg { transition: none; }
  .lf-delb__cta:hover svg { transform: none; }
}

/* ========================================================== no photograph */
/* If the slot is ever emptied the banner keeps its composition on cream
   instead of collapsing — the wash colour is the fallback ground. */
.lf-delb--noimg { background: var(--lf-cream); }

/* =========================================================== responsive = */

/*
 * The campaign proportions give way one step at a time rather than all at once.
 * The flourish is the first thing to go: below 1200 the pocket it sits in is
 * narrower than the words, and a decorative line that crowds the cards is worse
 * than no decorative line.
 */
@media (max-width: 1279px) {
  /*
   * 1279, not 1240: with the content 80px further in, the strapline reached 56%
   * of the canvas at 1241 and measured 4.46:1 against a 4.5 requirement. The
   * top of the band is governed by the main wash, which is not being touched,
   * so the fix is to end the desktop composition one step earlier instead.
   * 1280 itself stays on the desktop side; the six widths under review are
   * unaffected.
   *
   * The earlier reason still holds too: between 1220 and 1240 the supporting
   * row stopped fitting beside the button and wrapped in the one window where
   * nothing was capping it.
   */
  /* A proportionally smaller inset: +40px rather than +80. 96px at 1024. */
  .lf-delb { --db-edge: calc(5.5vw + 40px); --db-body: min(89vw, 1000px); min-height: clamp(560px, 52vw, 640px); }
  .lf-delb__script { display: none; }
  .lf-delb__wash::before { content: none; }
  .lf-delb__free { width: min(46vw, 460px); }
  /*
   * The supporting row drops under the button from here down. Beside it, on a
   * 1024 canvas, it ran to 94% of the width where the tablet wash has gone and
   * the third item measured 1.31:1. Capped to 70% it stays inside the wash, and
   * a row of its own is the more legible arrangement at this width anyway.
   */
  /*
   * A GRID, NOT A WRAP. `flex-basis: 100%` with a `max-width` cap is not a
   * line break: the capped item then FITS beside the button again, and it did
   * at 1100 and 1024 while wrapping at 1200 — the row ran to 86% of the canvas
   * at one width and 68% at another from the same rule. One column per row
   * makes it deterministic.
   */
  .lf-delb__foot { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .lf-delb__trust { max-width: 70%; }
  /*
   * THE WASH WIDENS HERE, NOT AT 1000. The copy column takes 89% of the canvas
   * from this breakpoint down, so at 1024 the subheading ran to 80% of the
   * width where the desktop gradient has gone — it measured 1.78:1. The rule
   * is that the wash follows the type: wherever the copy reaches, the wash
   * reaches, and the two must change at the same breakpoint.
   */
  .lf-delb__wash {
    background: linear-gradient(100deg,
      rgba(252,250,246,.96) 0%, rgba(252,250,246,.93) 42%,
      rgba(252,250,246,.74) 64%, rgba(252,250,246,.24) 86%, rgba(252,250,246,0) 100%);
  }
}

@media (max-width: 1000px) {
  .lf-delb { --db-edge: calc(5vw + 20px); --db-body: 100%; min-height: clamp(520px, 62vw, 620px); }
  .lf-delb__photo { object-position: 62% 45%; }
  .lf-delb__free { width: min(60vw, 520px); }
  .lf-delb__trust { max-width: 78%; }
}

@media (max-width: 900px) {
  /* THE MOBILE INSET IS UNCHANGED. Below 900 the content column is the full
     width between the paddings, so the desktop offset would take 40px out of a
     390px screen rather than moving anything. */
  .lf-delb { min-height: 0; --db-edge: 5vw; }
  .lf-delb__inner { padding-block: clamp(2rem, 5vw, 3rem); }
  /* Two by two rather than four columns squeezed to nothing. */
  .lf-delb__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-delb__kicker { display: none; }   /* nothing left of the room to sit over */
  .lf-delb__top { margin-bottom: 1.1rem; }
  .lf-delb__lede { max-width: none; }
  .lf-delb__free { width: 100%; }
  .lf-delb__trust { max-width: 100%; }
  .lf-delb__trust li { max-width: none; }
  /* The photograph still reads, under a wash that now covers the whole width
     because the type does too. */
  /*
   * THE PHOTOGRAPH BECOMES A BAND, NOT A BACKDROP.
   *
   * Full-bleed, the picture was unreadable here and lightening the wash did
   * nothing to fix it: a 2.02-ratio image in a 0.44-ratio box is scaled to the
   * HEIGHT, so a 390px phone was showing a 22% horizontal slice of it magnified
   * 2.3x — a smudge, which is why the mobile band read as a plain cream panel.
   * Held to the top 46% the frame is 390x408, the image covers it at roughly
   * 1:1, and the room is actually a room. The copy then sits on cream below,
   * which is also where the wash's own colour was already taking it.
   */
  .lf-delb__scene { inset: 0 0 auto 0; height: 46%; }
  .lf-delb__photo { object-position: 50% 42%; }
  .lf-delb__wash {
    background: linear-gradient(180deg,
      rgba(252,250,246,.58) 0%, rgba(252,250,246,.72) 55%,
      rgba(252,250,246,.94) 88%, var(--lf-cream) 100%);
  }
  .lf-delb__wash::after { content: none; }
}

@media (max-width: 560px) {
  /*
   * ONE CARD PER ROW, each a row rather than a column: name and price on one
   * baseline so the pair never comes apart, and four short rows instead of a
   * wall of tall boxes.
   */
  .lf-delb__cards { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  /* The reserved height exists so four COLUMNS match; four single rows match
     already, and holding 112px each turned the band into 170px of air. */
  .lf-delb__card { padding: .95rem 1.1rem; min-height: 0; gap: .85rem; }
  .lf-delb__icon .lf-dicon { width: 2rem; height: 2rem; }
  .lf-delb__text {
    flex: 1 1 auto; flex-direction: row; align-items: baseline;
    justify-content: space-between; gap: 1rem;
  }
  .lf-delb__price { font-size: 1.4rem; }
  .lf-delb__free { min-height: 0; }
  .lf-delb__cta { width: 100%; }
  .lf-delb__foot { gap: 1.1rem; }
  /*
   * The three statements stack on a phone. Side by side they would be three
   * two-word columns, and the separators would be doing nothing but adding
   * furniture to a 390px screen.
   */
  .lf-delb__trust { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .lf-delb__trust li + li::before { content: none; }
}