/* ============================================================
   LLS GROUP - HARD LANDSCAPE SPECIALISTS
   Implemented from LLS_FINAL_APPROVED_PACKAGE:
     desktop/LLS_GROUP_FINAL_DESKTOP_STITCHED.png   1440 x 6690
     mobile/LLS_GROUP_FINAL_MOBILE_STITCHED.png      390 x 5370

   --u resolves to exactly one reference pixel at a 1440px viewport and
   scales proportionally above and below it, so the composition fills
   any width edge to edge and every calc(N * var(--u)) below is the
   value measured off the approved master.

   Photography and video are the exact production sources supplied in
   LLS_OPUS_EXACT_IMAGE_MAP (see 00_IMAGE_PROVENANCE.json). Board
   gradients are reproduced in CSS, never baked into the sources.
   ============================================================ */
:root{
  --u:calc(100vw / 1440);
  --cream:#f5f2ea;
  --cream-2:#ede9e0;
  --char:#1c1d1a;
  --char-2:#121311;
  --night:#0a0b09;
  --olive:#66761c;
  --ink:#181916;
  --body:#5b5952;
  --paper:#f9f8f4;
  --paper-2:#c9c7c0;
  --chip:#24272b;
  --hair:#d6d2c8;
  --hair-d:#2f322c;
  --wa:#25d366;
  --serif:"EB Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
figure{margin:0}
.lls-br{display:inline}
main>section{width:100%}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

/* ---------- shared type ---------- */
.l-label{margin:0;font-weight:600;font-size:calc(12 * var(--u));line-height:1;
  letter-spacing:calc(1.1 * var(--u));text-transform:uppercase;color:var(--olive)}
.l-rule{display:block;width:calc(56 * var(--u));height:calc(2 * var(--u));
  background:var(--olive);margin-top:calc(14 * var(--u))}
.l-h{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink);
  max-width:none;letter-spacing:normal}
.l-copy{margin:0;color:var(--body);font-size:calc(15 * var(--u));
  line-height:calc(26 * var(--u))}
.l-band--dark .l-h{color:var(--paper)}
.l-band--dark .l-copy{color:var(--paper-2)}

/* primary action - wording locked to QUOTE NOW */
.l-cta{display:inline-flex;align-items:center;justify-content:space-between;
  gap:calc(24 * var(--u));background:var(--olive);color:#fff;
  padding:calc(17 * var(--u)) calc(24 * var(--u));
  font-weight:600;font-size:calc(13 * var(--u));line-height:1;
  letter-spacing:calc(1.2 * var(--u));text-transform:uppercase;
  transition:background .3s}
.l-cta:hover{background:#556218}
.l-cta svg{width:calc(16 * var(--u));height:calc(16 * var(--u));flex:0 0 auto}
.l-ghost{display:inline-flex;align-items:center;gap:calc(8 * var(--u));
  font-weight:600;font-size:calc(12 * var(--u));letter-spacing:calc(1 * var(--u));
  text-transform:uppercase;color:var(--ink);transition:opacity .3s}
.l-band--dark .l-ghost{color:var(--paper)}
.l-ghost:hover{opacity:.7}
.l-ghost svg{width:calc(14 * var(--u));height:calc(14 * var(--u))}

/* secondary contact actions */
.l-tel{display:inline-flex;align-items:center;gap:calc(9 * var(--u));color:inherit}
.l-tel-i{width:calc(13 * var(--u));height:calc(13 * var(--u));fill:currentColor;flex:0 0 auto}
.l-tel-k{font-size:calc(9 * var(--u));letter-spacing:calc(.8 * var(--u));
  text-transform:uppercase;opacity:.55;display:block;line-height:1.3}
.l-tel-n{font-weight:600;font-size:calc(12 * var(--u));letter-spacing:calc(.4 * var(--u));
  display:block;line-height:1.3}
.l-wa{display:inline-flex;align-items:center;gap:calc(9 * var(--u));color:inherit}
.l-wa-mark{width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;
  background:var(--wa);display:grid;place-items:center;flex:0 0 auto}
.l-wa-mark svg{width:calc(15 * var(--u));height:calc(15 * var(--u));fill:#fff}
.l-wa-t{font-weight:600;font-size:calc(10 * var(--u));letter-spacing:calc(.9 * var(--u));
  text-transform:uppercase}

/* ============================================================
   HEADER + HERO   (master y0-839)
   ============================================================ */
.l-hero{position:relative;height:calc(840 * var(--u));overflow:hidden;background:var(--night)}
.l-hero-media{position:absolute;inset:calc(92 * var(--u)) 0 0;z-index:0}
.l-hero-media video,.l-hero-media img{width:100%;height:100%;object-fit:cover}
.l-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,10,8,.88) 0%,rgba(8,10,8,.66) 40%,rgba(8,10,8,.14) 72%,rgba(8,10,8,0) 100%)}

.l-head{position:absolute;top:0;left:0;right:0;height:calc(92 * var(--u));z-index:5;
  background:var(--night);display:flex;align-items:center;
  padding:0 calc(70 * var(--u)) 0 calc(48 * var(--u))}
.l-brand{display:flex;align-items:center;gap:calc(14 * var(--u))}
.l-brand img{width:calc(46 * var(--u));height:auto}
.l-brand-t{color:#fff}
.l-brand-n{display:block;font-family:var(--serif);font-size:calc(23 * var(--u));line-height:1.05}
.l-brand-d{display:block;font-size:calc(7.5 * var(--u));letter-spacing:calc(1.2 * var(--u));
  text-transform:uppercase;color:#9aa08e;margin-top:calc(3 * var(--u))}
.l-nav{display:flex;gap:calc(46 * var(--u));margin-left:auto}
.l-nav a{font-weight:500;font-size:calc(11 * var(--u));letter-spacing:calc(1.1 * var(--u));
  text-transform:uppercase;color:#d7dad2;transition:color .3s}
.l-nav a:visited{color:#d7dad2}
.l-nav a:hover,.l-nav a:active,.l-nav a:focus-visible{color:#fff}
.l-head-acts{display:flex;align-items:center;gap:calc(26 * var(--u));margin-left:calc(60 * var(--u))}
.l-head .l-tel,.l-head .l-wa{color:#fff}


.l-hero-in{position:relative;z-index:2;padding:calc(198 * var(--u)) 0 0 calc(60 * var(--u));
  max-width:calc(820 * var(--u))}
.l-hero .l-h{font-size:calc(64 * var(--u));line-height:calc(83 * var(--u));color:#fff}
.l-hero .l-rule{margin-top:calc(34 * var(--u))}
.l-hero .l-copy{margin-top:calc(26 * var(--u));color:#dcded6;
  font-size:calc(15 * var(--u));line-height:calc(27 * var(--u))}
.l-hero-acts{display:flex;align-items:center;gap:calc(34 * var(--u));margin-top:calc(36 * var(--u))}
.l-hero .l-ghost{color:#fff}
/* customer-facing quoter explanation only - no quoter internals */
.l-quoter-note{margin:calc(24 * var(--u)) 0 0;background:var(--chip);
  padding:calc(11 * var(--u)) calc(16 * var(--u));max-width:calc(560 * var(--u))}
.l-quoter-note b{display:block;font-weight:600;font-size:calc(8.5 * var(--u));
  letter-spacing:calc(.9 * var(--u));text-transform:uppercase;color:var(--olive)}
.l-quoter-note span{display:block;margin-top:calc(6 * var(--u));font-size:calc(11 * var(--u));
  line-height:calc(17 * var(--u));color:#c6c9c1}
.l-hero-strip{position:absolute;left:calc(58 * var(--u));right:calc(60 * var(--u));
  bottom:calc(96 * var(--u));z-index:2;border-top:1px solid rgba(255,255,255,.24);
  padding-top:calc(24 * var(--u));display:flex;gap:calc(70 * var(--u))}
.l-hero-strip span{font-weight:600;font-size:calc(9.5 * var(--u));
  letter-spacing:calc(1.1 * var(--u));text-transform:uppercase;color:#e3e5dd}
.l-hero-credit{position:absolute;right:calc(60 * var(--u));bottom:calc(34 * var(--u));z-index:2;
  margin:0;font-size:calc(8 * var(--u));letter-spacing:calc(.6 * var(--u));
  text-transform:uppercase;color:rgba(255,255,255,.42)}

/* ============================================================
   S2  BUILT FOR REAL LIFE   (840-1739)
   ============================================================ */
.l-real{position:relative;height:calc(872 * var(--u));background:var(--cream);overflow:hidden}
.l-real-in{position:absolute;left:calc(60 * var(--u));top:calc(75 * var(--u));
  width:calc(460 * var(--u));z-index:2}
.l-real .l-h{margin-top:calc(46 * var(--u));font-size:calc(58 * var(--u));text-wrap:balance;
  line-height:calc(65 * var(--u))}
.l-real .l-copy{margin-top:calc(52 * var(--u))}
.l-real-fig{position:absolute;left:calc(546 * var(--u));top:calc(30 * var(--u));
  width:calc(894 * var(--u));height:calc(700 * var(--u));overflow:hidden}
.l-real-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.l-real-fig::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--cream) 0%,rgba(245,242,234,.5) 14%,rgba(245,242,234,0) 34%)}
.l-svc{position:absolute;left:calc(60 * var(--u));right:calc(60 * var(--u));
  top:calc(765 * var(--u));margin:0;display:grid;grid-template-columns:repeat(7,1fr);
  border-top:1px solid var(--hair);padding-top:calc(28 * var(--u))}
.l-svc div{padding-right:calc(24 * var(--u))}
.l-svc dt{font-weight:600;font-size:calc(10 * var(--u));letter-spacing:calc(.6 * var(--u));white-space:nowrap;
  text-transform:uppercase;color:var(--ink)}
.l-svc dd{margin:calc(8 * var(--u)) 0 0;font-size:calc(11 * var(--u));color:var(--body)}

/* ============================================================
   S3  FINISHED WORK   (1740-2630)
   ============================================================ */
.l-work{position:relative;height:calc(891 * var(--u));background:var(--cream-2);overflow:hidden}
.l-work-in{position:absolute;left:calc(60 * var(--u));top:calc(66 * var(--u));
  width:calc(470 * var(--u))}
.l-work .l-h{margin-top:0;font-size:calc(69 * var(--u));
  line-height:calc(55 * var(--u))}
.l-work .l-copy{margin-top:calc(58 * var(--u))}
.l-work .l-ghost{margin-top:calc(66 * var(--u))}
/* the right-hand media area is the finished-work carousel - see
   lls-work-carousel.css / .js */

/* ============================================================
   S4  TRANSFORMATIONS   (2631-3390)
   ============================================================ */
.l-ba{position:relative;height:calc(760 * var(--u));background:var(--char);overflow:hidden}
.l-ba-in{position:absolute;left:calc(60 * var(--u));top:calc(67 * var(--u));
  width:calc(470 * var(--u))}
.l-ba .l-h{margin-top:calc(52 * var(--u));font-size:calc(62 * var(--u));
  line-height:calc(52 * var(--u))}
.l-ba .l-copy{margin-top:calc(58 * var(--u))}
.l-ba-pair{position:absolute;left:calc(600 * var(--u));top:calc(44 * var(--u));
  width:calc(780 * var(--u));height:calc(610 * var(--u));
  display:grid;grid-template-columns:1fr 1fr;gap:calc(16 * var(--u))}
.l-ba-panel{position:relative;background:#000;overflow:hidden}
.l-ba-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.l-ba-tag{position:absolute;top:0;left:0;z-index:2;
  padding:calc(7 * var(--u)) calc(13 * var(--u));font-weight:600;
  font-size:calc(9.5 * var(--u));letter-spacing:calc(1 * var(--u));text-transform:uppercase}
.l-ba-tag--b{background:#111;color:#fff}
.l-ba-tag--a{background:var(--olive);color:#fff}

/* ============================================================
   S5  LOCAL / MAP   (3391-4149)
   ============================================================ */
.l-map{position:relative;height:calc(620 * var(--u));background:var(--char-2);overflow:hidden}
.l-map-in{position:absolute;left:calc(60 * var(--u));top:calc(66 * var(--u));
  width:calc(490 * var(--u));z-index:2}
.l-map .l-h{margin-top:calc(54 * var(--u));font-size:calc(60 * var(--u));
  line-height:calc(46 * var(--u))}
.l-map .l-copy{margin-top:calc(56 * var(--u))}
/* supplied premium V5 graphic - transparent over the section ground,
   anchored to the right of the copy column, full viewBox preserved */
.l-map-fig{position:absolute;right:0;top:50%;transform:translateY(-50%);
  /* handoff recommends clamp(720px,58vw,1160px); the 720px floor collides
     with the copy column below ~1200px, and the same handoff requires the
     copy stay collision-free and the graphic scale down first */
  width:min(58vw, 1160px);max-width:100%;height:auto;z-index:1}
/* the supplied artwork sits a touch too far into the black to read.
   A ~13% lift only - it must stay atmospheric, never a bright map. */
.l-map-fig img{width:100%;height:auto;filter:brightness(1.13) contrast(1.04)}
.l-map-fig .l-map-desk{display:block}
.l-map-fig .l-map-mob{display:none}

/* ============================================================
   S6  WHAT SHAPES A QUOTE   (4150-4940)
   ============================================================ */
.l-quote{position:relative;height:calc(791 * var(--u));background:var(--cream);overflow:hidden}
.l-quote-in{position:absolute;left:calc(60 * var(--u));top:calc(64 * var(--u));
  width:calc(440 * var(--u))}
.l-quote .l-h{margin-top:calc(52 * var(--u));font-size:calc(77 * var(--u));
  line-height:calc(64 * var(--u))}
.l-quote .l-copy{margin-top:calc(56 * var(--u))}
.l-steps{position:absolute;left:calc(520 * var(--u));right:calc(60 * var(--u));
  top:calc(105 * var(--u));margin:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(48 * var(--u))}
/* Each factor is one group, delimited by the same hairline the explainer
   below already uses. Previously the numeral floated 20px clear of its
   label at 1.9:1 contrast, so 01/02/03 read as decoration and the eye had
   to hunt for which label belonged to which number. */
.l-steps > div{border-top:1px solid var(--hair);padding-top:calc(18 * var(--u))}
.l-steps .n{font-family:var(--serif);font-size:calc(30 * var(--u));line-height:1;
  color:#9c9788;display:block}
.l-steps dt{margin-top:calc(11 * var(--u));font-weight:600;font-size:calc(11 * var(--u));
  letter-spacing:calc(1 * var(--u));text-transform:uppercase;color:var(--ink)}
.l-steps dd{margin:calc(9 * var(--u)) 0 0;font-size:calc(11.5 * var(--u));
  line-height:calc(17 * var(--u));color:var(--body)}
/* pulled up so it reads as a note on the three factors, not a stray block */
.l-quote-expl{position:absolute;left:calc(520 * var(--u));right:calc(60 * var(--u));
  top:calc(296 * var(--u));border-top:1px solid var(--hair);padding-top:calc(24 * var(--u))}
.l-quote-expl .l-mob{display:none}
.l-quote-expl b{display:block;font-weight:600;font-size:calc(9.5 * var(--u));
  letter-spacing:calc(1 * var(--u));text-transform:uppercase;color:var(--ink)}
.l-quote-expl span{display:block;margin-top:calc(10 * var(--u));font-size:calc(11.5 * var(--u));
  line-height:calc(18 * var(--u));color:var(--body);max-width:calc(700 * var(--u))}
.l-quote-figs{position:absolute;left:calc(60 * var(--u));right:calc(60 * var(--u));
  top:calc(515 * var(--u));height:calc(205 * var(--u));
  display:grid;grid-template-columns:repeat(3,1fr);gap:calc(40 * var(--u))}
.l-quote-figs figure{overflow:hidden}
.l-quote-figs img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   S7  JACK TURNER   (4941-5659)
   ============================================================ */
.l-jack{position:relative;height:calc(650 * var(--u));background:var(--cream-2);overflow:hidden}
.l-jack-in{position:absolute;left:calc(60 * var(--u));top:calc(72 * var(--u));
  width:calc(440 * var(--u))}
.l-jack .l-h{margin-top:calc(52 * var(--u));font-size:calc(68 * var(--u));
  line-height:calc(56 * var(--u))}
.l-jack .l-copy{margin-top:calc(54 * var(--u))}
.l-jack .l-ghost{margin-top:calc(70 * var(--u))}
.l-jack-fig{position:absolute;left:calc(510 * var(--u));top:calc(54 * var(--u));
  width:calc(870 * var(--u));height:calc(545 * var(--u));overflow:hidden;
  background:#000;display:block}
.l-jack-fig video{width:100%;height:100%;object-fit:cover}
/* first frame as the still. The poster attribute alone is not enough on
   iOS, which letterboxes it and may show black until playback starts, so
   the same frame sits on top as an image until the video is playing. */
.l-jack-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.l-jack.is-playing .l-jack-poster{display:none}
.l-jack-play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;z-index:2;
  background:none;border:0;padding:0;cursor:pointer;transition:opacity .35s}
.l-jack-play svg{width:calc(78 * var(--u));height:calc(78 * var(--u))}
.l-jack.is-playing .l-jack-play{opacity:0;pointer-events:none}

/* ============================================================
   S8  READY TO TALK   (5660-6380)
   ============================================================ */
.l-ready{position:relative;height:calc(721 * var(--u));background:var(--cream);overflow:hidden}
.l-ready-in{position:absolute;left:calc(60 * var(--u));top:calc(140 * var(--u));
  width:calc(560 * var(--u));z-index:2}
.l-ready .l-h{margin-top:0;font-size:calc(55 * var(--u));
  line-height:calc(62 * var(--u))}
.l-ready .l-copy{margin-top:calc(58 * var(--u));max-width:calc(500 * var(--u))}
.l-ready .l-cta{margin-top:calc(56 * var(--u))}
.l-ready-acts{display:flex;align-items:center;gap:calc(40 * var(--u));
  margin-top:calc(34 * var(--u))}
.l-ready-hint{font-size:calc(9.5 * var(--u));color:#6f6d66}
.l-ready-fig{position:absolute;left:calc(759 * var(--u));top:calc(121 * var(--u));
  right:0;bottom:0;overflow:hidden}
.l-ready-fig img{width:100%;height:100%;object-fit:cover}
.l-ready-fig::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--cream) 0%,rgba(245,242,234,.55) 26%,rgba(245,242,234,0) 62%)}

/* ============================================================
   FOOTER   (6381-6689)
   ============================================================ */
.l-foot{background:var(--char-2);color:#e6e8e2;padding:calc(26 * var(--u)) calc(60 * var(--u)) calc(22 * var(--u))}
.l-foot-top{display:flex;align-items:center;gap:calc(40 * var(--u))}
.l-foot .l-brand-t{color:#fff}
.l-foot-acts{display:flex;align-items:center;gap:calc(40 * var(--u));margin-left:auto}
.l-foot-note{margin:calc(22 * var(--u)) 0 0;padding-top:calc(14 * var(--u));
  border-top:1px solid var(--hair-d);display:flex;justify-content:space-between;
  font-size:calc(10 * var(--u));letter-spacing:calc(.4 * var(--u));color:#8c9186}
/* a taller hit area than the small type suggests, without moving it */
.l-foot-note a{text-decoration:underline;text-underline-offset:2px;padding:12px 0;margin:-12px 0}
.l-foot-note a:hover{color:#e6e8e2}

/* ============================================================
   MOBILE - its own composition, from the 390 x 5370 master
   ============================================================ */
.l-bar{display:none}
@media (max-width:900px){
  :root{--u:min(1px, 100vw / 390)}
  .lls-br{display:none}
  /* desktop-only break: on the phone the column is wide enough for
     "Working across Merseyside." on one line, which removes the orphan */
  .lls-br-d{display:none}
  main>section{max-width:none}

  .l-hero-in,.l-hero-strip,.l-hero-credit,
  .l-real-in,.l-real-fig,.l-real-mark,.l-svc,
  .l-work-in,.l-work-stage,.l-work-bar,
  .l-ba-in,.l-ba-pair,
  .l-map-in,.l-map-fig,
  .l-quote-in,.l-steps,.l-quote-expl,.l-quote-figs,
  .l-jack-in,.l-jack-fig,
  .l-ready-in,.l-ready-fig{
    position:static;inset:auto;width:auto}
  .l-hero,.l-real,.l-work,.l-ba,.l-map,.l-quote,.l-jack,.l-ready{height:auto;overflow:visible}

  .l-head{position:relative;height:auto;padding:calc(14 * var(--u));gap:calc(10 * var(--u))}
  .l-brand{gap:calc(9 * var(--u));min-width:0}
  .l-brand-t{display:block;min-width:0}
  .l-brand-n{font-size:calc(14.5 * var(--u));line-height:1.1;white-space:nowrap}
  .l-brand-d{font-size:calc(6 * var(--u));letter-spacing:calc(1 * var(--u));margin-top:calc(2 * var(--u))}
  .l-brand img{width:calc(40 * var(--u));flex:none}
  .l-nav{display:none}
  .l-head-acts{margin-left:auto;gap:calc(12 * var(--u))}
  /* phone collapses to an icon-only round button, the size of the
     WhatsApp mark, so the wordmark has the room it needs */
  .l-head .l-tel{width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;
    background:#2a2e27;display:inline-flex;align-items:center;justify-content:center;gap:0;padding:0}
  .l-head .l-tel > span{display:none}
  .l-head .l-wa-t{display:none}

  /* the mobile master runs text before image; desktop DOM order is
     image-first for absolute placement, so re-order in flow here */
  .l-real,.l-map,.l-ready{display:flex;flex-direction:column}
  .l-real-in,.l-map-in,.l-ready-in{order:1}
  .l-real-fig,.l-map-fig,.l-ready-fig{order:2}
  .l-svc{order:3}

  /* header must fit 390 without wrapping */
  .l-head .l-tel-i{width:calc(12 * var(--u));height:calc(12 * var(--u))}
  .l-head .l-wa-mark{width:calc(24 * var(--u));height:calc(24 * var(--u))}
  .l-head-acts{gap:calc(9 * var(--u))}
  /* the icons stay 24px; their tap area does not */
  .l-head .l-tel,.l-head .l-wa{position:relative}
  .l-head .l-tel::after,.l-head .l-wa::after{content:"";position:absolute;inset:-10px}

  /* action bar must not exceed the viewport */
  .l-bar{max-width:100vw;overflow:hidden}
  .l-bar>*{min-width:0;letter-spacing:calc(.5 * var(--u));font-size:calc(10.5 * var(--u));
    padding:calc(15 * var(--u)) calc(4 * var(--u));gap:calc(6 * var(--u))}

  /* The hero owns the whole first screen. It previously stopped at 610px
     inside an 844px viewport, so the first thing a phone showed was the
     hero plus a sliced-off band of the next section, and every layer was
     packed into the 364px that left. Filling the screen buys the room the
     headline, copy and CTA needed without shrinking any of them. */
  .l-hero{position:relative;min-height:calc(610 * var(--u));min-height:100svh}
  .l-hero-media{inset:0}
  /* the montage runs to some near-white paving frames; the old top stop
     let the headline wash out on those */
  .l-hero-media::after{background:linear-gradient(180deg,rgba(8,10,8,.66) 0%,rgba(8,10,8,.46) 30%,rgba(8,10,8,.5) 62%,rgba(8,10,8,.34) 100%)}
  .l-hero-in{position:relative;display:flex;flex-direction:column;
    padding:calc(150 * var(--u)) calc(20 * var(--u)) calc(38 * var(--u));max-width:none}
  .l-hero .l-h{font-size:calc(30 * var(--u));line-height:calc(38 * var(--u))}
  .l-hero .l-rule{margin-top:calc(30 * var(--u))}
  .l-hero .l-copy{font-size:calc(13.5 * var(--u));line-height:calc(22 * var(--u));
    margin-top:calc(28 * var(--u));max-width:calc(320 * var(--u))}
  .l-hero-acts{flex-direction:column;align-items:stretch;gap:calc(16 * var(--u));
    margin-top:calc(46 * var(--u))}
  .l-hero .l-cta{justify-content:space-between;padding:calc(18 * var(--u)) calc(22 * var(--u))}
  .l-hero .l-ghost{display:none}
  /* secondary: a footnote under the CTA, not a second filled block
     competing with it. Quieter ground, hairline instead of a solid chip. */
  .l-quoter-note{max-width:none;margin-top:calc(30 * var(--u));background:none;
    border-top:1px solid rgba(255,255,255,.16);padding:calc(16 * var(--u)) 0 0}
  /* the micro-label only repeated the CTA directly above it, and olive
     on light paving was unreadable - one less layer, and the sentence
     that carries the actual information is legible instead */
  .l-quoter-note b{display:none}
  .l-quoter-note span{margin-top:0;font-size:calc(11.5 * var(--u));
    line-height:calc(18 * var(--u));color:rgba(255,255,255,.8)}
  .l-hero-strip,.l-hero-credit{display:none}

  .l-real{padding:calc(44 * var(--u)) 0 calc(30 * var(--u))}
  .l-real-in{padding:0 calc(20 * var(--u))}
  .l-real .l-h{font-size:calc(30 * var(--u));line-height:calc(38 * var(--u));
    margin-top:calc(30 * var(--u))}
  .l-real .l-copy{margin-top:calc(26 * var(--u));font-size:calc(13 * var(--u));
    line-height:calc(21 * var(--u))}
  .l-svc{display:none}
  .l-real-fig{margin-top:calc(30 * var(--u));height:calc(323 * var(--u))}
  .l-real-fig::before{display:none}

  .l-work{padding:calc(42 * var(--u)) 0 calc(34 * var(--u))}
  .l-work-in{padding:0 calc(20 * var(--u))}
  .l-work .l-h{font-size:calc(29 * var(--u));line-height:calc(37 * var(--u));
    margin-top:calc(28 * var(--u))}
  .l-work .l-copy,.l-work .l-ghost{display:none}

  .l-ba{padding:calc(44 * var(--u)) 0}
  .l-ba-in{padding:0 calc(20 * var(--u))}
  .l-ba .l-h{font-size:calc(27 * var(--u));line-height:calc(35 * var(--u));
    margin-top:calc(28 * var(--u))}
  .l-ba .l-copy{display:none}
  .l-ba-pair{margin:calc(30 * var(--u)) calc(20 * var(--u)) 0;height:calc(425 * var(--u));
    gap:calc(14 * var(--u))}

  /* Recomposed for 390 rather than stacked from desktop. The artwork now
     bleeds past both edges so it reads as a full-width map instead of a
     small graphic sitting in a black field, and the gap above it plus the
     empty tail of the viewBox (drawn content stops at y602 of 650) come
     out - so the section gets shorter while the map gets bigger. */
  .l-map{padding:calc(34 * var(--u)) 0 calc(26 * var(--u))}
  .l-map-in{padding:0 calc(20 * var(--u))}
  .l-map .l-h{font-size:calc(27 * var(--u));line-height:calc(34 * var(--u));
    margin-top:calc(28 * var(--u))}
  .l-map-fig{position:static;transform:none;width:100%;max-width:none;
    margin:calc(16 * var(--u)) 0 0;overflow:hidden;
    height:calc(330 * var(--u))}
  .l-map-fig .l-map-desk{display:none}
  /* Crop window measured off the artwork, not guessed: in a 700x650 viewBox
     the first place name (Crosby) sits at y137 and the last line
     ("Liverpool + wider Merseyside") at y602, so only the empty bands above
     and below them are removed. Every label stays in frame. */
  .l-map-fig .l-map-mob{display:block;width:100%;max-width:none;
    height:auto;margin:calc(-52 * var(--u)) 0 0}
  .l-map .l-copy{margin-top:calc(22 * var(--u));font-size:calc(13 * var(--u));
    line-height:calc(20 * var(--u))}
  
  .l-quote{padding:calc(36 * var(--u)) 0 calc(46 * var(--u))}
  .l-quote-in{padding:0 calc(20 * var(--u))}
  .l-quote .l-h{font-size:calc(30 * var(--u));line-height:calc(38 * var(--u));
    margin-top:calc(22 * var(--u))}
  .l-quote .l-copy{margin-top:calc(24 * var(--u));font-size:calc(13 * var(--u));
    line-height:calc(20 * var(--u))}
  .l-steps{margin:calc(30 * var(--u)) calc(20 * var(--u)) 0;grid-template-columns:1fr;gap:0}
  .l-steps>div{display:grid;grid-template-columns:calc(44 * var(--u)) 1fr;
    align-items:start;padding:calc(18 * var(--u)) 0;border-top:1px solid var(--hair)}
  .l-steps .n{grid-column:1;grid-row:1 / span 2}
  .l-steps dt,.l-steps dd{grid-column:2}
  .l-steps .n{font-size:calc(24 * var(--u))}
  .l-steps dt{margin-top:0}
  .l-quote-expl{margin:calc(20 * var(--u)) calc(20 * var(--u)) 0}
  .l-quote-figs{margin:calc(22 * var(--u)) calc(20 * var(--u)) 0;height:calc(90 * var(--u));
    grid-template-columns:1fr 1fr;gap:calc(14 * var(--u))}
  .l-quote-figs figure:nth-child(3){display:none}
  .l-steps>div:nth-child(3){display:none}
  .l-quote-expl .l-desk{display:none}
  .l-quote-expl .l-mob{display:block}

  .l-jack{padding:calc(42 * var(--u)) 0 calc(40 * var(--u))}
  .l-jack-in{padding:0 calc(20 * var(--u))}
  .l-jack .l-h{font-size:calc(30 * var(--u));line-height:calc(38 * var(--u));
    margin-top:calc(28 * var(--u))}
  .l-jack .l-copy{margin-top:calc(24 * var(--u))}
  .l-jack .l-ghost{display:none}
  /* the clip is a 1080x1440 portrait source; a 350x225 landscape box was
     cropping the top and bottom off the subject */
  .l-jack-fig{position:relative;margin:calc(24 * var(--u)) calc(20 * var(--u)) 0;
    height:calc(380 * var(--u));width:calc(100% - 40 * var(--u))}
  .l-jack-fig video,.l-jack-poster{object-position:50% 32%}
  .l-jack-play svg{width:calc(64 * var(--u));height:calc(64 * var(--u))}

  .l-ready{padding:calc(44 * var(--u)) 0 0}
  .l-ready-in{padding:0 calc(20 * var(--u))}
  .l-ready .l-h{font-size:calc(30 * var(--u));line-height:calc(38 * var(--u));
    margin-top:calc(28 * var(--u))}
  .l-ready .l-copy{margin-top:calc(24 * var(--u));max-width:none;
    font-size:calc(13 * var(--u));line-height:calc(21 * var(--u))}
  .l-ready .l-cta{display:flex;margin-top:calc(30 * var(--u))}
  .l-ready-acts{gap:calc(30 * var(--u));margin-top:calc(22 * var(--u))}
  .l-ready-hint{display:none}
  .l-ready-fig{margin-top:calc(26 * var(--u));height:calc(253 * var(--u))}
  .l-ready-fig::before{display:none}

  .l-foot{padding:calc(14 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u))}
  .l-foot-top{flex-wrap:wrap;gap:calc(14 * var(--u))}
  .l-foot .l-brand-t{display:block}
  .l-foot-acts{margin-left:0;width:100%;justify-content:space-between;flex-wrap:wrap;
    gap:calc(14 * var(--u)) calc(10 * var(--u))}
  .l-foot-note{flex-direction:column;gap:calc(5 * var(--u));margin-top:calc(8 * var(--u));
    padding-top:calc(10 * var(--u));font-size:calc(8.5 * var(--u))}

  /* fixed action bar - QUOTE NOW primary, call and WhatsApp secondary */
  /* the bar overlays; give the footer the scroll clearance so it covers
     nothing, and the clearance paints in the footer's own colour instead
     of showing as a band of page ground beneath it */
  .l-foot{padding-bottom:calc(22 * var(--u) + 46 * var(--u) + env(safe-area-inset-bottom))}
  .l-bar{display:grid;grid-template-columns:1.5fr 1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--night);
    border-top:1px solid #23261f;padding-bottom:env(safe-area-inset-bottom)}
  .l-bar>*{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));
    padding:calc(15 * var(--u)) calc(6 * var(--u));font-weight:600;
    font-size:calc(11 * var(--u));letter-spacing:calc(.9 * var(--u));
    text-transform:uppercase;color:#fff}
  .l-bar-quote{background:var(--olive)}
  .l-bar svg{width:calc(15 * var(--u));height:calc(15 * var(--u));fill:currentColor}
  .l-bar-wa svg{fill:var(--wa)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   SERVICE INDEX - breadth of work, readable immediately
   Rule-led and typographic. No icons, no cards, no new background,
   no new section furniture: it reads as a caption band under the
   hero rather than a block bolted on.
   ============================================================ */
.l-idx{background:var(--cream);padding:0 calc(60 * var(--u))}
.l-idx ul{margin:0;padding:calc(20 * var(--u)) 0;list-style:none;
  display:flex;align-items:center;
  border-bottom:1px solid var(--hair)}
.l-idx li{font-weight:600;font-size:calc(11 * var(--u));line-height:1;
  letter-spacing:calc(1.1 * var(--u));text-transform:uppercase;color:var(--ink);
  padding-right:calc(30 * var(--u));margin-right:calc(30 * var(--u));
  border-right:1px solid var(--hair);white-space:nowrap}
.l-idx li:last-child{border-right:0;margin-right:0;padding-right:0}
/* options are the service-panel triggers: same type as the plain items,
   with an olive state while their panel is open */
.l-idx li button{all:unset;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:inherit;transition:color .25s;
  padding:12px 0}   /* inline padding: a finger-sized target, no change to the line */
.l-idx li button:hover{color:var(--olive)}
.l-idx li button[aria-expanded="true"]{color:var(--olive);text-decoration:underline;
  text-underline-offset:calc(6 * var(--u));text-decoration-thickness:1px}
.l-idx li button:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
/* the strip is a set of openers, and says so: a hint line and a small
   plus after each label that turns into a cross while its panel is open */
.l-idx-hint{margin:0;padding-top:calc(16 * var(--u));font-size:calc(10 * var(--u));
  letter-spacing:calc(.6 * var(--u));color:var(--body)}
.l-idx-hint-m{display:none}
.l-idx ul{padding-top:calc(12 * var(--u))}
.l-idx-plus{display:inline-block;position:relative;width:calc(9 * var(--u));height:calc(9 * var(--u));
  margin-left:calc(9 * var(--u));vertical-align:-1px;opacity:.55;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .25s}
.l-idx-plus::before,.l-idx-plus::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;
  background:currentColor;transform:translateY(-50%)}
.l-idx-plus::after{transform:translateY(-50%) rotate(90deg)}
.l-idx li button:hover .l-idx-plus{opacity:1}
.l-idx li button[aria-expanded="true"] .l-idx-plus{transform:rotate(45deg);opacity:1}

@media (max-width:900px){
  /* two columns rather than a squeezed single line - the names stay
     full size and readable instead of shrinking to fit one row */
  .l-idx{padding:0 calc(20 * var(--u))}
  .l-idx ul{display:grid;grid-template-columns:1fr 1fr;
    gap:calc(11 * var(--u)) calc(16 * var(--u));
    padding:calc(18 * var(--u)) 0;border-top:1px solid var(--hair)}
  .l-idx li{font-size:calc(10.5 * var(--u));letter-spacing:calc(.9 * var(--u));
    padding-right:0;margin-right:0;border-right:0;white-space:normal}
  /* labels wrap to two lines here, where an underline cuts the first */
  .l-idx li button[aria-expanded="true"]{text-decoration:none}
  /* rows are 11px apart here, so the target grows by half of that */
  .l-idx li button{padding:12px 0}   /* 44px tall on a phone */
  .l-idx-hint{padding-top:calc(14 * var(--u));font-size:calc(9.5 * var(--u))}
  .l-idx-hint-d{display:none}
  .l-idx-hint-m{display:inline}
  .l-idx ul{padding-top:calc(10 * var(--u))}
  .l-idx-plus{width:calc(8 * var(--u));height:calc(8 * var(--u));margin-left:calc(7 * var(--u))}
}

/* ============================================================
   PRELOADER - restored from the original build
   Same structure as index-v4: mark, hairline bar, counter. Mapped to
   this site's tokens (--night ground, Inter in place of the old mono,
   olive fill). Fixed overlay, so it can never shift layout.
   ============================================================ */
.pre{position:fixed;inset:0;z-index:200;background:var(--night);
  display:grid;place-items:center;
  transition:opacity .45s ease,visibility .45s}
.pre.done{opacity:0;visibility:hidden;pointer-events:none}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:26px}
.pre img{width:120px;height:auto;opacity:.92}
.pre-bar{width:200px;height:1px;background:rgba(249,248,244,.14);
  position:relative;overflow:hidden}
.pre-bar span{position:absolute;inset:0 100% 0 0;background:var(--olive);
  transition:right .2s linear}
.pre-count{font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.32em;color:var(--paper-2);opacity:.75}

@media (max-width:900px){
  .pre img{width:92px}
  .pre-bar{width:160px}
  .pre-inner{gap:22px}
}

/* reduced motion: no crawl, no fade - it just goes */
@media (prefers-reduced-motion:reduce){
  .pre{transition:none}
  .pre-bar span{transition:none}
}

/* ============================================================
   BRAND PARALLAX - one section-aware LS mark
   A single fixed element for the whole page. lls-parallax.js reads each
   section's data-logo-* attributes and sets position, scale, opacity and
   tone; a small drift is added from the active section's own scroll
   progress, so it never accumulates page-scroll translation.

   Stacking: the mark sits UNDER the page. main is lifted above it, so
   every panel (cream-2 / charcoal grounds, photos, cards) covers it, and
   it shows only through the sections that share the body's cream ground,
   which are made transparent below for that reason.
   ============================================================ */
.lls-parallax-logo{
  position:fixed;left:0;top:0;z-index:0;
  /* one variable so the right-hand anchor can be derived from the real
     rendered width instead of being guessed against a clamp */
  --logo-w:clamp(300px, 26vw, 420px);
  width:var(--logo-w);
  pointer-events:none;user-select:none;
  opacity:var(--logo-opacity,.09);
  transform:translate3d(var(--logo-x,0px),var(--logo-y,25vh),0) scale(var(--logo-scale,1));
  transition:opacity 500ms ease, filter 500ms ease;
  will-change:transform,opacity;
}
.lls-parallax-logo img{display:block;width:100%;height:auto}
/* no tagged section on screen - fade out rather than linger */
.lls-parallax-logo.is-idle{opacity:0}

/* tonal treatments - one source, tinted, silhouette untouched */
html[data-logo-theme="light"] .lls-parallax-logo img{
  filter:grayscale(.55) sepia(.25) brightness(1.02) saturate(.7)}
html[data-logo-theme="dark"]  .lls-parallax-logo img{
  filter:grayscale(.6) sepia(.35) brightness(.72) saturate(.85)}

/* Horizontal anchors. The whole mark stays in frame: the LS is wide and
   open, so any real crop removes a stroke and it stops reading as a logo.
   The effect comes from the mark moving side to side between sections,
   not from cropping it. */
html[data-logo-position="left"]  {--logo-x:4vw}
html[data-logo-position="right"] {--logo-x:calc(100vw - clamp(300px, 26vw, 420px) - 4vw)}

/* the whole page sits above the mark */
main,.l-foot{position:relative;z-index:1}
/* cream sections share the body ground: let the mark show through them */
.l-real,.l-quote,.l-ready,.l-idx{background:transparent}


@media (max-width:900px){
  .lls-parallax-logo{--logo-w:clamp(170px, 50vw, 220px)}
  html[data-logo-position="left"]  {--logo-x:5vw}
  html[data-logo-position="right"] {--logo-x:calc(100vw - clamp(170px, 50vw, 220px) - 5vw)}
}

@media (prefers-reduced-motion:reduce){
  .lls-parallax-logo{transition:opacity 200ms ease;will-change:auto}
}

/* ---- position dots, shared by the reviews, work and before/after bars ---- */
.l-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.l-dots{display:inline-flex;align-items:center;gap:calc(8 * var(--u))}
.l-dots i{display:block;width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;
  background:currentColor;opacity:.28;transition:opacity 180ms,transform 180ms,background 180ms}
.l-dots i.is-on{opacity:1;background:var(--olive);transform:scale(1.25)}
/* small olive labels on the charcoal grounds need a lighter olive to
   pass 4.5:1; the brand olive stays for everything on cream */
.l-band--dark .l-label,.l-ba .l-label,.l-map .l-label{color:#9db03a}
.l-steps .n{color:#8a8577}
@media (max-width:900px){
  .l-idx ul{align-items:center}
  .l-idx li{font-size:calc(10 * var(--u));letter-spacing:calc(.7 * var(--u))}
  /* the longest name gets the full width of its row rather than wrapping */
  .l-idx li:last-child{grid-column:1 / -1}
}
/* the poster and video are portrait: keep the boxer's head in the crop */
.l-jack-poster,.l-jack-fig video{object-position:50% 22%}
.l-copy,.svp-body{text-wrap:pretty}