/* ============================================================
   LLS GROUP - SHARED SERVICE PANEL
   One inline panel holding six service views. Everything here is
   scoped under .svp so it cannot reach the approved main site.

   Paving, Driveways, Groundwork and Garden transformations are built
   from LLS_SERVICE_PAGES_OPUS_HANDOFF; Patios and Artificial grass from
   LLS_PATIOS_ARTIFICIAL_GRASS_OPUS_HANDOFF (see the .svx block at the
   end). The approved boards drive each composition, and cream /
   charcoal / olive, the hairline rules and the type scale are inherited
   from the existing site rather than restated.
   ============================================================ */
.svp{
  position:relative;background:var(--cream);
  overflow:hidden;                       /* the brand marks crop to section */
}
.svp[hidden]{display:none}

/* ---------- controls ---------- */
.svp-btn{
  display:inline-flex;align-items:center;gap:calc(9 * var(--u));
  min-height:calc(44 * var(--u));padding:0 calc(16 * var(--u));
  border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--paper);
  font-weight:600;font-size:calc(10.5 * var(--u));letter-spacing:calc(.9 * var(--u));
  text-transform:uppercase;cursor:pointer;
  transition:background 180ms var(--e-out,ease),border-color 180ms var(--e-out,ease)}
.svp-btn:hover:not(:disabled){background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.45)}
.svp-btn:disabled{opacity:.32;cursor:default}
.svp-btn svg{width:calc(13 * var(--u));height:calc(13 * var(--u));
  stroke:currentColor;stroke-width:1.5;fill:none;flex:none}
/* close sits in the panel's top-right corner, over the chapter */
.svp-close{position:absolute;top:calc(16 * var(--u));right:calc(16 * var(--u));z-index:6;
  width:calc(44 * var(--u));height:calc(44 * var(--u));
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);
  background:rgba(10,12,10,.55);cursor:pointer;backdrop-filter:blur(4px)}
.svp-close svg{width:calc(13 * var(--u));height:calc(13 * var(--u));
  stroke:#fff;stroke-width:1.5;fill:none}
.svp-close:hover{background:rgba(10,12,10,.8)}
.svp-btn:focus-visible,.svp-close:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
/* service controls sit under the service */
.svp-dots{display:flex;align-items:center;gap:calc(10 * var(--u))}
.svp-dot{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;padding:0;border:0;
  background:rgba(255,255,255,.28);cursor:pointer;transition:background 180ms,transform 180ms}
.svp-dot[aria-selected="true"]{background:var(--olive);transform:scale(1.25)}
.svp-dot:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.svp-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(14 * var(--u));
  background:var(--night);color:var(--paper);padding:calc(12 * var(--u)) calc(60 * var(--u))}

/* ---------- a service view: one complete panel, chapters stacked ---------- */
/* a service view: its chapters slide, one in frame */
.svp-view{display:flex;align-items:flex-start;width:100%;
  transition:transform 480ms cubic-bezier(.22,.61,.36,1),height 360ms cubic-bezier(.22,.61,.36,1)}
.svp-view[hidden]{display:none}
.svp-view > section{flex:0 0 100%;min-width:0}

/* ---------- one chapter: copy column + dominant image ---------- */
.svp-sec{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.svp-sec--dark {background:var(--char);color:var(--paper)}
.svp-sec--cream{background:var(--cream)}

.svp-copy{position:relative;z-index:2;
  padding:calc(48 * var(--u)) calc(70 * var(--u)) calc(48 * var(--u)) calc(60 * var(--u));
  max-width:calc(620 * var(--u))}
.svp-label{margin:0;font-weight:600;font-size:calc(11 * var(--u));line-height:1;
  letter-spacing:calc(1.1 * var(--u));text-transform:uppercase;color:var(--olive)}
.svp-rule{display:block;width:calc(56 * var(--u));height:calc(2 * var(--u));
  background:var(--olive);margin-top:calc(13 * var(--u))}

/* hero display is Fraunces; chapters below it are EB Garamond */
.svp-h{margin:calc(30 * var(--u)) 0 0;font-family:var(--serif);font-weight:400;
  font-size:calc(46 * var(--u));line-height:calc(52 * var(--u));letter-spacing:normal}
.svp-h--hero{font-family:"Fraunces",Georgia,serif;
  font-size:calc(54 * var(--u));line-height:calc(58 * var(--u))}
.svp-sec--dark .svp-h{color:var(--paper)}
.svp-sec--cream .svp-h{color:var(--ink)}

.svp-body{margin:calc(26 * var(--u)) 0 0;font-size:calc(15 * var(--u));
  line-height:calc(26 * var(--u));max-width:calc(430 * var(--u))}
.svp-sec--dark .svp-body{color:var(--paper-2)}
.svp-sec--cream .svp-body{color:var(--body)}

.svp-util{margin:calc(34 * var(--u)) 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(24 * var(--u))}
.svp-util dt{font-weight:600;font-size:calc(11 * var(--u));
  letter-spacing:calc(.9 * var(--u));text-transform:uppercase}
.svp-util dd{margin:calc(9 * var(--u)) 0 0;font-size:calc(11.5 * var(--u));
  line-height:calc(17 * var(--u))}
.svp-sec--dark .svp-util dt{color:var(--paper)}
.svp-sec--dark .svp-util dd{color:var(--paper-2)}
.svp-sec--cream .svp-util dt{color:var(--ink)}
.svp-sec--cream .svp-util dd{color:var(--body)}
.svp-cta{margin-top:calc(38 * var(--u))}

/* dominant genuine project image */
.svp-fig{position:relative;z-index:1;margin:0;align-self:stretch;min-height:calc(400 * var(--u))}
.svp-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the cream chapters hold the image in from the edge, as the boards show */
.svp-sec--cream .svp-fig{margin:calc(36 * var(--u)) calc(60 * var(--u)) calc(36 * var(--u)) 0;
  align-self:center;height:calc(300 * var(--u));min-height:0}
/* groundwork's secondary detail stays visibly secondary */
.svp-fig--second{position:absolute;right:calc(60 * var(--u));bottom:calc(46 * var(--u));
  z-index:3;width:calc(196 * var(--u));min-height:0;height:calc(132 * var(--u));
  border:1px solid rgba(255,255,255,.18)}

/* ---------- brand mark: varied per chapter, never a repeated stamp ---------- */
.svp-mark{position:absolute;z-index:0;pointer-events:none;user-select:none;
  height:auto;max-width:none}
.svp-mark--1{left:calc(-46 * var(--u));bottom:calc(38 * var(--u));
  width:calc(300 * var(--u));opacity:.10}
.svp-mark--2{right:calc(58 * var(--u));top:calc(30 * var(--u));
  width:calc(260 * var(--u));opacity:.13}
.svp-mark--3{left:calc(30 * var(--u));bottom:calc(-34 * var(--u));
  width:calc(280 * var(--u));opacity:.09}
.svp-mark--4{right:calc(-40 * var(--u));bottom:calc(30 * var(--u));
  width:calc(320 * var(--u));opacity:.12}

/* ---------- restrained view change ---------- */
.svp-view{animation:svp-in 320ms cubic-bezier(.22,.61,.36,1) both}
@keyframes svp-in{from{opacity:0}to{opacity:1}}

/* ============================================================
   MOBILE - the supplied mobile boards, not a scaled desktop:
   copy first, then the image full width beneath it.
   ============================================================ */
@media (max-width:900px){
  .svp-btn{padding:0 calc(12 * var(--u));font-size:calc(10 * var(--u));
    min-height:calc(44 * var(--u))}
  .svp-btn span{display:none}
  .svp-close{top:calc(10 * var(--u));right:calc(10 * var(--u));width:calc(40 * var(--u));height:calc(40 * var(--u))}
  .svp-foot{padding:calc(10 * var(--u)) calc(20 * var(--u))}
  .svp-btn span{display:inline}

  .svp-sec{display:block}
  .svp-copy{padding:calc(28 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));max-width:none}
  .svp-h{margin-top:calc(22 * var(--u));font-size:calc(27 * var(--u));
    line-height:calc(34 * var(--u))}
  .svp-h--hero{font-size:calc(29 * var(--u));line-height:calc(36 * var(--u))}
  .svp-body{margin-top:calc(18 * var(--u));font-size:calc(13.5 * var(--u));
    line-height:calc(22 * var(--u));max-width:none}
  .svp-util{margin-top:calc(26 * var(--u));grid-template-columns:1fr;gap:calc(18 * var(--u))}
  .svp-cta{margin-top:calc(28 * var(--u));width:100%;justify-content:space-between}

  .svp-fig{min-height:0;height:calc(200 * var(--u))}
  .svp-sec--cream .svp-fig{margin:0 calc(20 * var(--u)) calc(24 * var(--u));
    height:calc(190 * var(--u))}
  .svp-fig--second{position:static;width:auto;height:calc(150 * var(--u));
    margin:calc(14 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));border:0}

  .svp-mark--1{width:calc(150 * var(--u));left:auto;right:calc(-28 * var(--u));
    bottom:auto;top:calc(120 * var(--u));opacity:.09}
  .svp-mark--2{width:calc(140 * var(--u));right:calc(-24 * var(--u));top:calc(24 * var(--u))}
  .svp-mark--3{width:calc(150 * var(--u));left:calc(-30 * var(--u));bottom:auto;
    top:calc(150 * var(--u));opacity:.08}
  .svp-mark--4{width:calc(160 * var(--u));right:calc(-30 * var(--u));bottom:calc(24 * var(--u))}
}

@media (prefers-reduced-motion:reduce){
  .svp-view{animation:none}
  .svp-btn,.svp-close{transition:none}
}

/* ============================================================
   PATIOS + ARTIFICIAL GRASS  (.svx chapters)
   From LLS_PATIOS_ARTIFICIAL_GRASS_OPUS_HANDOFF. Each board has its
   own composition, so these chapters do not use the generic two-column
   .svp-sec; they reuse the label / rule / heading / body / CTA tokens
   and the brand mark, and place them where the boards put them.
   Positions are measured off the boards: desktop at 1440, mobile at 390.
   ============================================================ */
.svx{position:relative;overflow:hidden;background:var(--cream);color:var(--ink)}
.svx--dark{background:var(--char);color:var(--paper)}
.svx--night{background:var(--night);color:var(--paper)}
.svx-fig{position:relative;z-index:1;margin:0;overflow:hidden}
.svx-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.svx-copy{position:relative;z-index:2}
.svx .svp-label{font-size:calc(13.5 * var(--u));letter-spacing:calc(.2 * var(--u))}
.svx .svp-rule{width:calc(57 * var(--u));height:calc(3 * var(--u));margin:0}
/* the boards set every heading here in EB Garamond, the hero included */
.svx .svp-h{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink)}
.svx .svp-body{margin:0;max-width:none;color:var(--body)}
.svx--dark .svp-h,.svx--night .svp-h{color:var(--paper)}
.svx--dark .svp-body,.svx--night .svp-body{color:var(--paper-2)}
.svx .svp-cta{margin:0;width:auto;justify-content:space-between;letter-spacing:0;font-size:calc(14 * var(--u))}
.svx-kicker{margin:0;font-weight:600;text-transform:uppercase;color:var(--olive);
  font-size:calc(12 * var(--u));letter-spacing:calc(.3 * var(--u));line-height:1.2}
.svx-support{margin:0;font-weight:600;text-transform:uppercase;color:var(--ink);
  font-size:calc(13.5 * var(--u));letter-spacing:calc(.2 * var(--u));line-height:calc(31 * var(--u))}
.svx-olive{color:var(--olive)}
/* the boards draw the mark as a neutral tint of the ground, not in brand colour */
.svx .svx-mark{width:calc(285 * var(--u));filter:grayscale(1);opacity:.12}
.svx--dark .svx-mark,.svx--night .svx-mark{filter:grayscale(1) brightness(2);opacity:.12}
/* image edges that dissolve into the chapter ground, as drawn */
.svx-fig--fade::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}

@media (min-width:901px){
  .svx-mb{display:none!important}

  /* ---------------- PATIOS · desktop ---------------- */
  .svx-p1{display:grid;grid-template-columns:calc(806 * var(--u)) 1fr;height:calc(687 * var(--u))}
  .svx-p1 .svx-copy{padding:calc(80 * var(--u)) calc(60 * var(--u)) 0 calc(80 * var(--u))}
  .svx-p1 .svp-rule{width:calc(58 * var(--u));margin-top:calc(17 * var(--u))}
  .svx-p1 .svp-h{margin-top:calc(28 * var(--u));font-size:calc(56.5 * var(--u));line-height:calc(64 * var(--u));max-width:calc(410 * var(--u))}
  .svx-p1 .svp-body{margin-top:calc(24 * var(--u));max-width:calc(460 * var(--u));font-size:calc(19 * var(--u))}
  .svx-p1 .svp-cta{margin-top:calc(48 * var(--u));min-width:calc(195 * var(--u));height:calc(57 * var(--u));font-size:calc(13.5 * var(--u))}
  .svx-p1 .svx-mark{right:calc(20 * var(--u));bottom:calc(5 * var(--u))}

  .svx-p2{display:grid;grid-template-columns:1fr calc(676 * var(--u));height:calc(590 * var(--u));
    padding-right:calc(66 * var(--u))}
  .svx-p2 .svx-copy{padding:calc(60 * var(--u)) calc(50 * var(--u)) 0 calc(83 * var(--u))}
  .svx-p2 .svp-h{font-size:calc(60 * var(--u));line-height:calc(65 * var(--u))}
  .svx-p2 .svp-body{margin-top:calc(30 * var(--u));font-size:calc(19 * var(--u))}
  .svx-p2 .svp-rule{width:calc(68 * var(--u));height:calc(4 * var(--u));margin-top:calc(31 * var(--u))}
  .svx-p2 .svx-support{margin-top:calc(16 * var(--u));font-size:calc(15.75 * var(--u))}
  .svx-p2 .svx-fig{margin:calc(47 * var(--u)) 0 calc(54 * var(--u))}
  .svx-p2 .svx-mark{left:calc(-85 * var(--u));top:calc(445 * var(--u))}

  /* the right-hand ground runs 20px past the photograph, over the next chapter */
  .svx-p3{display:grid;grid-template-columns:calc(620 * var(--u)) 1fr;
    grid-template-rows:auto auto auto auto auto 1fr;height:calc(630 * var(--u));
    overflow:visible;z-index:3;padding-right:calc(66 * var(--u))}
  .svx-p3::after{content:"";position:absolute;left:calc(620 * var(--u));right:0;top:100%;
    height:calc(20 * var(--u));background:var(--cream)}
  .svx-p3 > :not(.svx-fig--a){grid-column:2;margin-left:calc(78 * var(--u))}
  .svx-p3 .svx-fig--a{grid-column:1;grid-row:1 / -1}
  .svx-p3 .svp-rule{width:calc(68 * var(--u));height:calc(4 * var(--u));margin-top:calc(37 * var(--u))}
  .svx-p3 .svp-h{margin-top:calc(23 * var(--u));font-size:calc(56.7 * var(--u));line-height:calc(64 * var(--u))}
  .svx-p3 .svx-b1{margin-top:calc(19 * var(--u));font-size:calc(20.75 * var(--u));max-width:calc(612 * var(--u))}
  .svx-p3 .svx-kicker{margin-top:calc(45 * var(--u));font-size:calc(15.75 * var(--u))}
  .svx-p3 .svx-b2{margin-top:calc(11 * var(--u));font-size:calc(18.4 * var(--u));max-width:calc(612 * var(--u))}
  .svx-p3 .svx-fig--b{margin-top:calc(22 * var(--u));height:calc(259 * var(--u));align-self:start}

  .svx-p4{display:grid;grid-template-columns:calc(790 * var(--u)) 1fr;height:calc(475 * var(--u))}
  .svx-p4 .svx-copy{padding:calc(77 * var(--u)) calc(70 * var(--u)) 0 calc(70 * var(--u))}
  .svx-p4 .svp-rule{width:calc(63 * var(--u));height:calc(4 * var(--u))}
  .svx-p4 .svp-h{margin-top:calc(22 * var(--u));font-size:calc(53.7 * var(--u));line-height:calc(59 * var(--u));max-width:calc(480 * var(--u))}
  .svx-p4 .svp-body{margin-top:calc(22 * var(--u));font-size:calc(18.6 * var(--u))}
  .svx-p4 .svx-mark{left:calc(-40 * var(--u));top:calc(325 * var(--u))}

  .svx-p5{display:grid;grid-template-columns:calc(765 * var(--u)) 1fr;height:calc(455 * var(--u))}
  .svx-p5 .svx-copy{padding:calc(66 * var(--u)) calc(60 * var(--u)) 0 calc(70 * var(--u))}
  .svx-p5 .svp-h{font-size:calc(47 * var(--u));line-height:calc(56 * var(--u))}
  .svx-p5 .svp-body{margin-top:calc(20 * var(--u));font-size:calc(18 * var(--u))}
  .svx-p5 .svp-cta{margin-top:calc(62 * var(--u));min-width:calc(217 * var(--u));height:calc(60 * var(--u));font-size:calc(13.5 * var(--u))}
  .svx-p5 .svx-mark{right:calc(35 * var(--u));top:calc(278 * var(--u));width:calc(257 * var(--u))}

  .svp-view--patios .svp-body{line-height:calc(29 * var(--u))}
  /* photo crops: object-position only, chosen to sit closest to each board */
  .svx-p1 .svx-fig img{object-position:50% 100%}
  .svx-p2 .svx-fig img{object-position:50% 100%}
  .svx-p3 .svx-fig--a img{object-position:50% 70%}
  .svx-p3 .svx-fig--b img{object-position:50% 75%}
  .svx-p4 .svx-fig img{object-position:50% 0%}
  .svx-p5 .svx-fig img{object-position:50% 85%}
  .svx-p3 .svx-b1{line-height:calc(30 * var(--u))}

  /* ---------------- ARTIFICIAL GRASS · desktop ---------------- */
  .svx-g1{display:grid;grid-template-columns:calc(610 * var(--u)) 1fr;height:calc(690 * var(--u))}
  .svx-g1 .svx-copy{padding:calc(76 * var(--u)) calc(60 * var(--u)) 0 calc(68 * var(--u))}
  .svx-g1 .svp-rule{margin-top:calc(17 * var(--u))}
  .svx-g1 .svp-h{margin-top:calc(30 * var(--u));font-size:calc(58 * var(--u));line-height:calc(68 * var(--u))}
  .svx-g1 .svp-body{margin-top:calc(28 * var(--u));max-width:calc(450 * var(--u));
    font-size:calc(18 * var(--u));line-height:calc(29 * var(--u))}
  .svx-g1 .svp-cta{margin-top:calc(61 * var(--u));min-width:calc(191 * var(--u));height:calc(58 * var(--u))}
  .svx-g1 .svx-mark{left:calc(-45 * var(--u));bottom:calc(-12 * var(--u))}

  .svx-g2{display:grid;grid-template-columns:calc(830 * var(--u)) 1fr;height:calc(710 * var(--u));background:var(--cream-2)}
  .svx-g2 .svx-fig{grid-column:1;grid-row:1}
  .svx-g2 .svx-copy{grid-column:2;grid-row:1;padding:calc(80 * var(--u)) calc(60 * var(--u)) 0 calc(70 * var(--u))}
  .svx-g2 .svp-h{margin-top:calc(25 * var(--u));font-size:calc(45 * var(--u));line-height:calc(52 * var(--u));max-width:calc(340 * var(--u))}
  .svx-g2 .svp-body{margin-top:calc(30 * var(--u));font-size:calc(17 * var(--u));line-height:calc(28 * var(--u));max-width:calc(390 * var(--u))}
  .svx-g2 .svx-kicker{margin-top:calc(58 * var(--u));font-size:calc(11.5 * var(--u))}
  .svx-g2 .svx-b2{margin-top:calc(13 * var(--u));font-size:calc(14 * var(--u));line-height:calc(23 * var(--u));max-width:calc(370 * var(--u))}
  .svx-g2 .svx-fig--fade::after{background:linear-gradient(90deg,rgba(237,233,224,0) 90%,var(--cream-2))}
  .svx-g2 .svx-mark{right:calc(-25 * var(--u));top:calc(465 * var(--u))}

  .svx-g3{height:calc(758 * var(--u))}
  .svx-g3 .svx-copy{position:absolute;left:calc(70 * var(--u));top:calc(68 * var(--u));width:calc(500 * var(--u))}
  .svx-g3 .svp-h{font-size:calc(50 * var(--u));line-height:calc(57 * var(--u));max-width:calc(400 * var(--u))}
  .svx-g3 .svp-body{margin-top:calc(38 * var(--u));font-size:calc(18 * var(--u));line-height:calc(29 * var(--u))}
  .svx-g3 .svx-fig--a{position:absolute;left:calc(690 * var(--u));top:calc(48 * var(--u));width:calc(680 * var(--u));height:calc(500 * var(--u))}
  .svx-g3 .svx-fig--b{position:absolute;left:calc(70 * var(--u));top:calc(456 * var(--u));width:calc(460 * var(--u));height:calc(250 * var(--u))}
  .svx-g3 .svx-cap{position:absolute;z-index:3;left:calc(560 * var(--u));top:calc(488 * var(--u));width:calc(250 * var(--u))}
  .svx-cap p{margin:calc(24 * var(--u)) 0 0;font-weight:500;color:var(--ink);font-size:calc(14 * var(--u));line-height:calc(24 * var(--u))}
  .svx-g3 .svx-mark{left:calc(-50 * var(--u));top:calc(193 * var(--u))}

  .svx-g4{display:grid;grid-template-columns:calc(520 * var(--u)) 1fr;height:calc(430 * var(--u))}
  .svx-g4 .svx-copy{padding:calc(60 * var(--u)) calc(60 * var(--u)) 0 calc(90 * var(--u))}
  .svx-g4 .svp-h{font-size:calc(46 * var(--u));line-height:calc(54 * var(--u));max-width:calc(400 * var(--u))}
  .svx-g4 .svp-body{margin-top:calc(31 * var(--u));font-size:calc(17 * var(--u));line-height:calc(28 * var(--u));max-width:calc(560 * var(--u))}
  .svx-g4 .svx-support{margin-top:calc(45 * var(--u));text-transform:none;font-weight:500;color:var(--paper);
    font-size:calc(15 * var(--u));line-height:calc(24 * var(--u));letter-spacing:0}
  .svx-g4 .svx-fig--fade::after{background:linear-gradient(90deg,rgba(28,29,26,0) 84%,var(--char))}
  .svx-g4 .svx-mark{right:calc(-40 * var(--u));top:calc(268 * var(--u))}

  .svx-g1 .svx-fig img{object-position:100% 50%}
  .svx-g2 .svx-fig img{object-position:65% 50%}
  .svx-g3 .svx-fig--a img,.svx-g3 .svx-fig--b img{object-position:50% 100%}
  .svx-g4 .svx-fig img{object-position:10% 50%}

  .svx-g5{display:grid;grid-template-columns:1fr auto;height:calc(300 * var(--u));padding-right:calc(124 * var(--u))}
  .svx-g5 .svx-copy{padding:calc(48 * var(--u)) 0 0 calc(70 * var(--u))}
  .svx-g5 .svp-h{font-size:calc(52 * var(--u));line-height:calc(60 * var(--u))}
  .svx-g5 .svp-body{margin-top:calc(26 * var(--u));font-size:calc(15 * var(--u));line-height:calc(24 * var(--u));max-width:calc(600 * var(--u))}
  .svx-g5 .svp-cta{align-self:start;margin-top:calc(95 * var(--u));min-width:calc(236 * var(--u));height:calc(69 * var(--u))}
  .svx-g5 .svx-mark{left:calc(-30 * var(--u));top:calc(183 * var(--u));width:calc(255 * var(--u))}
}

@media (max-width:900px){
  .svx-dk{display:none!important}
  .svx{display:block;height:auto}
  .svx .svx-mark{display:none}
  .svx .svp-cta{display:inline-flex}

  /* ---------------- PATIOS · mobile ---------------- */
  .svp-view--patios .svp-label{font-size:calc(10.25 * var(--u))}
  .svp-view--patios .svp-rule{width:calc(35 * var(--u));height:calc(4 * var(--u))}
  .svp-view--patios .svp-body{font-size:calc(12.5 * var(--u));line-height:calc(17.5 * var(--u))}
  .svp-view--patios .svp-h{font-size:calc(33 * var(--u));line-height:calc(35 * var(--u))}
  .svp-view--patios .svp-cta{min-width:calc(183 * var(--u));height:calc(46 * var(--u));font-size:calc(12 * var(--u))}
  .svp-view--patios .svx-kicker{font-size:calc(10 * var(--u))}
  .svp-view--patios .svx-support{font-size:calc(9.2 * var(--u));line-height:1.2}

  .svx-p1 .svx-fig{height:calc(270 * var(--u))}
  .svx-p1 .svx-copy{padding:calc(19 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)) calc(23 * var(--u))}
  .svx-p1 .svp-rule{margin-top:calc(11 * var(--u))}
  .svx-p1 .svp-h{margin-top:calc(12 * var(--u));font-size:calc(34.6 * var(--u));max-width:calc(300 * var(--u))}
  .svx-p1 .svp-body{margin-top:calc(10 * var(--u));font-size:calc(12.2 * var(--u))}
  .svx-p1 .svp-cta{margin-top:calc(13 * var(--u))}

  .svx-p2{background:var(--cream-2);padding-bottom:calc(15 * var(--u))}
  .svx-p2 .svx-copy{padding:calc(29 * var(--u)) calc(23 * var(--u)) 0}
  .svx-p2 .svp-h{margin-top:calc(10 * var(--u));max-width:calc(290 * var(--u))}
  .svx-p2 .svp-body{margin-top:calc(11 * var(--u));line-height:calc(18 * var(--u))}
  .svx-p2 .svx-fig{height:calc(184 * var(--u));margin:calc(14 * var(--u)) calc(23 * var(--u)) 0}
  .svx-p2 .svx-support{margin:calc(13 * var(--u)) calc(23 * var(--u)) 0}

  .svx-p3{display:flex;flex-direction:column;padding:calc(21 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(23 * var(--u))}
  .svx-p3 .svp-rule{order:1}
  .svx-p3 .svp-h{order:2;margin-top:calc(15 * var(--u));font-size:calc(33.2 * var(--u))}
  .svx-p3 .svx-b1{order:3;margin-top:calc(10 * var(--u));font-size:calc(12.75 * var(--u));line-height:calc(18 * var(--u));max-width:calc(312 * var(--u))}
  .svx-p3 .svx-fig--a{order:4;height:calc(151 * var(--u));margin-top:calc(15 * var(--u));margin-right:calc(3 * var(--u))}
  .svx-p3 .svx-kicker{order:5;margin-top:calc(14 * var(--u))}
  .svx-p3 .svx-b2{order:6;margin-top:calc(5 * var(--u));font-size:calc(12.25 * var(--u));line-height:calc(18 * var(--u))}
  .svx-p3 .svx-fig--b{order:7;height:calc(102 * var(--u));margin-top:calc(10 * var(--u));margin-right:calc(3 * var(--u))}

  .svx-p4{display:flex;flex-direction:column;padding-bottom:calc(10 * var(--u))}
  .svx-p4 .svx-fig{order:-1;height:calc(88 * var(--u))}
  .svx-p4 .svx-fig::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(28,29,26,0) 55%,var(--char))}
  .svx-p4 .svx-copy{padding:calc(4 * var(--u)) calc(23 * var(--u)) 0}
  .svx-p4 .svp-h{margin-top:calc(10 * var(--u));font-size:calc(29.6 * var(--u));line-height:calc(31 * var(--u));max-width:calc(260 * var(--u))}
  .svx-p4 .svp-body{margin-top:calc(9 * var(--u));font-size:calc(13.1 * var(--u))}

  .svx-p5{background:var(--char)}
  .svx-p5 .svx-fig{height:calc(78 * var(--u))}
  .svx-p5 .svx-copy{display:grid;grid-template-columns:1fr auto;column-gap:calc(20 * var(--u));
    padding:calc(8 * var(--u)) calc(23 * var(--u)) calc(24 * var(--u))}
  .svx-p5 .svp-rule,.svx-p5 .svp-h{grid-column:1 / -1}
  .svx-p5 .svp-h{margin-top:calc(6 * var(--u));font-size:calc(22.2 * var(--u));line-height:calc(25 * var(--u));color:var(--paper);max-width:calc(220 * var(--u))}
  .svx-p5 .svp-body{margin-top:calc(8 * var(--u));font-size:calc(11.3 * var(--u));line-height:calc(16 * var(--u));color:var(--paper-2)}
  .svx-p5 .svp-cta{align-self:end;min-width:calc(133 * var(--u));height:calc(39 * var(--u));padding:0 calc(16 * var(--u));font-size:calc(10.5 * var(--u))}

  .svx-p1 .svx-fig img{object-position:50% 70%}
  .svx-p2 .svx-fig img{object-position:50% 25%}
  .svx-p3 .svx-fig--a img{object-position:50% 35%}
  .svx-p3 .svx-fig--b img{object-position:50% 60%}
  .svx-p4 .svx-fig img{object-position:50% 45%}
  .svx-p5 .svx-fig img{object-position:50% 55%}

  /* ---------------- ARTIFICIAL GRASS · mobile ---------------- */
  .svp-view--grass .svp-label{font-size:calc(10.7 * var(--u))}
  .svp-view--grass .svp-rule{width:calc(39 * var(--u));height:calc(4 * var(--u))}
  .svp-view--grass .svp-body{font-size:calc(15 * var(--u));line-height:calc(22 * var(--u))}
  .svp-view--grass .svp-h{font-size:calc(36 * var(--u));line-height:calc(40 * var(--u))}
  .svp-view--grass .svx-kicker{font-size:calc(10.5 * var(--u))}
  .svp-view--grass .svp-cta{font-size:calc(12 * var(--u))}

  .svx-g1 .svx-copy{padding:calc(41 * var(--u)) calc(22 * var(--u)) calc(23 * var(--u))}
  .svx-g1 .svp-rule{margin-top:calc(15 * var(--u))}
  .svx-g1 .svp-h{margin-top:calc(15 * var(--u));font-size:calc(38.75 * var(--u));line-height:calc(48 * var(--u))}
  .svx-g1 .svp-body{margin-top:calc(14 * var(--u))}
  .svx-g1 .svp-cta{margin-top:calc(42 * var(--u));min-width:calc(211 * var(--u));height:calc(55 * var(--u))}
  .svx-g1 .svx-fig{height:calc(315 * var(--u))}

  .svx-g2{background:var(--cream-2)}
  .svx-g2 .svx-copy{padding:calc(48 * var(--u)) calc(22 * var(--u)) 0}
  .svx-g2 .svp-h{margin-top:calc(17 * var(--u));font-size:calc(35 * var(--u));max-width:calc(300 * var(--u))}
  .svx-g2 .svp-body{margin-top:calc(30 * var(--u))}
  .svx-g2 .svx-kicker{margin-top:calc(57 * var(--u))}
  .svx-g2 .svx-b2{margin-top:calc(14 * var(--u));font-size:calc(14 * var(--u));line-height:calc(21 * var(--u))}
  .svx-g2 .svx-fig{height:calc(164 * var(--u));margin:calc(44 * var(--u)) calc(18 * var(--u)) 0}

  .svx-g3{display:grid;grid-template-columns:calc(165 * var(--u)) 1fr;column-gap:calc(18 * var(--u));
    padding:0 calc(22 * var(--u)) calc(12 * var(--u))}
  .svx-g3 .svx-copy,.svx-g3 .svx-fig--a{grid-column:1 / -1}
  .svx-g3 .svx-copy{padding-top:calc(45 * var(--u))}
  .svx-g3 .svp-h{margin-top:calc(17 * var(--u));font-size:calc(34 * var(--u));max-width:calc(285 * var(--u))}
  .svx-g3 .svp-body{margin-top:calc(21 * var(--u));font-size:calc(14 * var(--u));line-height:calc(21 * var(--u));max-width:calc(330 * var(--u))}
  .svx-g3 .svx-fig--a{height:calc(254 * var(--u));margin-top:calc(61 * var(--u))}
  .svx-g3 .svx-fig--b{height:calc(94 * var(--u));margin-top:calc(16 * var(--u))}
  .svx-g3 .svx-cap{margin-top:calc(27 * var(--u))}
  .svx-cap p{margin:calc(13 * var(--u)) 0 0;font-weight:600;color:var(--ink);font-size:calc(10.9 * var(--u));line-height:calc(17 * var(--u))}

  .svx-g4 .svx-fig{height:calc(135 * var(--u))}
  .svx-g4 .svx-fig--fade::after{background:linear-gradient(180deg,rgba(28,29,26,0) 60%,var(--char))}
  .svx-g4 .svx-copy{padding:calc(18 * var(--u)) calc(22 * var(--u)) calc(32 * var(--u))}
  .svx-g4 .svp-h{margin-top:calc(13 * var(--u));font-size:calc(31 * var(--u));line-height:calc(38 * var(--u));max-width:calc(280 * var(--u))}
  .svx-g4 .svp-body{margin-top:calc(10 * var(--u));font-size:calc(13 * var(--u));line-height:calc(19 * var(--u))}

  .svx-g1 .svx-fig img{object-position:100% 50%}
  .svx-g2 .svx-fig img{object-position:50% 0%}
  .svx-g3 .svx-fig--a img{object-position:50% 95%}
  .svx-g3 .svx-fig--b img{object-position:50% 100%}
  .svx-g4 .svx-fig img{object-position:50% 75%}

  .svx-g5{display:grid;grid-template-columns:1fr auto;column-gap:calc(18 * var(--u));
    padding:calc(22 * var(--u)) calc(21 * var(--u)) calc(54 * var(--u)) calc(22 * var(--u))}
  .svx-g5 .svx-copy{display:contents}
  .svx-g5 .svp-h{grid-column:1 / -1;font-size:calc(30 * var(--u));line-height:calc(34 * var(--u))}
  .svx-g5 .svp-body{grid-column:1;margin-top:calc(15 * var(--u));font-size:calc(12 * var(--u));line-height:calc(18 * var(--u))}
  .svx-g5 .svp-cta{grid-column:2;grid-row:2;align-self:start;margin-top:calc(14 * var(--u));width:calc(151 * var(--u));height:calc(51 * var(--u));padding:0 calc(16 * var(--u))}
}
@media (prefers-reduced-motion:reduce){
  .svp-view{transition:none}
}

/* ============================================================
   ALIGNMENT PASS - appended last so it wins over the per-chapter rules
   above. Nothing may bleed past a chapter's edge, and the copy column
   sits at the same inset and vertical centre in every chapter.
   ============================================================ */
/* brand marks: one contained placement, small and quiet, never over
   copy. Where a photo occupies the corner the mark sits behind it. */
.svp .svp-mark,.svp .svx-mark{
  left:auto;right:calc(28 * var(--u));top:auto;bottom:calc(22 * var(--u));
  width:calc(170 * var(--u));max-width:32%;opacity:.07;transform:none;
  filter:grayscale(1)}
.svp .svp-sec--dark .svp-mark,.svp .svx--dark .svx-mark,.svp .svx--night .svx-mark{
  filter:grayscale(1) brightness(2);opacity:.08}

@media (min-width:901px){
  /* copy columns share one inset and centre vertically */
  .svp .svx:not(.svx-p3):not(.svx-g3){align-items:center}
  .svp .svx:not(.svx-p3):not(.svx-g3) .svx-copy{
    padding-top:calc(48 * var(--u));padding-bottom:calc(48 * var(--u));
    padding-left:calc(60 * var(--u));padding-right:calc(60 * var(--u))}
  /* the photos fill the row; centring must not collapse them */
  .svp .svx:not(.svx-p3):not(.svx-g3) .svx-fig{align-self:stretch}
  /* where the photo owns the bottom-right corner the mark could only
     peek out from under it, so it is not shown there */
  .svp .svp-sec .svp-mark,.svp .svx-p2 .svx-mark,.svp .svx-g1 .svx-mark{display:none}
  /* artificial grass chapter 3: the caption sat across the main photo */
  .svp .svx-g3 .svx-fig--a{left:calc(830 * var(--u));width:calc(540 * var(--u))}
  .svp .svx-g3 .svx-cap{left:calc(560 * var(--u));width:calc(240 * var(--u))}
}
@media (max-width:900px){
  .svp .svp-mark,.svp .svx-mark{display:none}
}

/* ---- rhythm pass: one height, one baseline, arrow controls ---- */
@media (min-width:901px){
  .svp .svp-sec,.svp .svx{height:calc(560 * var(--u))}
  /* hero chapters: the display heading sized to fit the fixed frame */
  .svp .svx-p1 .svp-h--hero,.svp .svx-g1 .svp-h--hero{font-size:calc(46 * var(--u));line-height:calc(52 * var(--u));max-width:calc(440 * var(--u))}
  .svp .svx-p1 .svp-body,.svp .svx-g1 .svp-body{font-size:calc(16 * var(--u));line-height:calc(25 * var(--u));margin-top:calc(20 * var(--u))}
  .svp .svx-p1 .svp-cta,.svp .svx-g1 .svp-cta{margin-top:calc(32 * var(--u))}
  /* patios chapter 3 has no copy wrapper: its column starts on the baseline */
  .svp .svx-p3 > .svp-label{margin-top:calc(48 * var(--u))}
  .svp .svx-p3 .svp-h{margin-top:calc(22 * var(--u));font-size:calc(46 * var(--u));line-height:calc(52 * var(--u))}
  .svp .svx-p3 .svx-fig--b{height:calc(140 * var(--u));margin-top:calc(18 * var(--u))}
  .svp .svx-p3{overflow:hidden;align-content:start}
  .svp .svx-p3 .svx-fig--a{position:absolute;grid-area:auto;left:0;top:0;bottom:0;width:calc(620 * var(--u));height:100%;margin:0;align-self:auto}
  /* the label's rule sits the same 13 units under it in every chapter */
  .svp .svx .svp-label + .svp-rule{margin-top:calc(13 * var(--u));margin-bottom:0;width:calc(56 * var(--u));height:calc(2 * var(--u))}
  .svp .svx-p3 .svx-kicker{margin-top:calc(26 * var(--u))}
  .svp .svx-g3 .svx-copy{padding-top:0}
  .svp .svp-sec,.svp .svx:not(.svx-p3):not(.svx-g3){align-items:start}
  .svp .svp-copy,.svp .svx-copy{padding-top:calc(48 * var(--u));padding-bottom:calc(40 * var(--u))}
  .svp .svx .svp-label ~ .svp-h{margin-top:calc(30 * var(--u))}
  .svp .svp-sec--cream .svp-fig{height:calc(380 * var(--u))}
  .svp .svx-g3 .svx-copy{top:calc(48 * var(--u))}
  .svp .svx-g3 .svx-fig--a{top:calc(40 * var(--u));height:calc(460 * var(--u))}
  .svp .svx-g3 .svp-body{margin-top:calc(22 * var(--u));font-size:calc(16 * var(--u));line-height:calc(25 * var(--u))}
  .svp .svx-g3 .svx-fig--b{top:calc(380 * var(--u));height:calc(130 * var(--u))}
  .svp .svx-g3 .svx-cap{top:calc(388 * var(--u))}
}
.svp .svp-btn{width:calc(44 * var(--u));height:calc(44 * var(--u));min-height:0;padding:0;
  border-radius:50%;justify-content:center;gap:0}
.svp .svp-btn span{display:none}
.svp .svp-btn svg{width:calc(15 * var(--u));height:calc(15 * var(--u))}

/* ---- type pass: Patios and Artificial grass on the pack sizes ---- */
@media (min-width:901px){
  .svp .svx .svp-label{font-size:calc(11 * var(--u));letter-spacing:calc(1.1 * var(--u));text-transform:uppercase;line-height:1}
  .svp .svx .svp-h{font-size:calc(46 * var(--u));line-height:calc(52 * var(--u));max-width:none}
  .svp .svx .svp-h--hero{font-size:calc(54 * var(--u));line-height:calc(58 * var(--u));max-width:calc(440 * var(--u))}
  .svp .svx .svp-body,.svp .svx .svx-b1,.svp .svx .svx-b2{font-size:calc(15 * var(--u));line-height:calc(26 * var(--u));max-width:calc(430 * var(--u))}
  .svp .svx .svx-kicker,.svp .svx .svx-support{font-size:calc(11 * var(--u));letter-spacing:calc(.9 * var(--u))}
  .svp .svx-cap p{font-size:calc(12 * var(--u));line-height:calc(19 * var(--u))}
}
@media (max-width:900px){
  /* the secondary photo's image is absolutely positioned inside its
     figure; the figure must stay positioned or the image fills the
     whole chapter and paints behind the copy */
  .svp .svp-fig--second{position:relative;inset:auto}
}
@media (min-width:901px){
  .svp .svx .svp-h--hero{font-size:calc(50 * var(--u));line-height:calc(56 * var(--u));max-width:calc(470 * var(--u))}
}

/* ---- fill pass: the photo takes whatever height the copy does not ---- */
.svp-view{align-items:stretch}
/* close: an opaque disc so it reads on any photo */
.svp .svp-close{background:var(--night);border:0;border-radius:50%;backdrop-filter:none;
  width:calc(40 * var(--u));height:calc(40 * var(--u))}
.svp .svp-close:hover{background:#000}
@media (min-width:901px){
  .svp .svp-sec--cream .svp-fig{height:auto;align-self:stretch;
    margin:calc(36 * var(--u)) calc(60 * var(--u)) calc(36 * var(--u)) 0}
}
@media (max-width:900px){
  .svp .svp-sec{display:flex;flex-direction:column;align-items:stretch}
  .svp .svp-sec--cream .svp-fig{align-self:stretch}
  .svp .svp-sec .svp-fig:not(.svp-fig--second){flex:1 1 auto;height:auto;min-height:calc(170 * var(--u))}
  .svp .svx:not(.svx-g3){display:flex;flex-direction:column}
  .svp .svx > .svx-fig{flex:1 1 auto;height:auto;min-height:calc(160 * var(--u))}
  .svp .svx-p3 > .svx-fig--b{flex:0 0 auto}
}
/* dark chapters: lighter olive for the 11px label, 4.5:1 on charcoal */
.svp .svp-sec--dark .svp-label,.svp .svx--dark .svp-label{color:#9db03a}
/* dots keep their size but grow a 44px hit area */
.svp .svp-dot{position:relative}
.svp .svp-dot::after{content:"";position:absolute;left:50%;top:50%;width:calc(19 * var(--u));height:44px;transform:translate(-50%,-50%)}   /* tall, not wide: neighbours must not overlap */
@media (max-width:900px){
  /* the two later panels take the pack panels' phone type */
  .svp .svx .svp-h{font-size:calc(27 * var(--u));line-height:calc(34 * var(--u))}
  .svp .svx .svp-h--hero{font-size:calc(29 * var(--u));line-height:calc(36 * var(--u))}
  .svp .svx .svp-body,.svp .svx .svx-b1,.svp .svx .svx-b2{font-size:calc(13.5 * var(--u));line-height:calc(22 * var(--u));max-width:none}
  .svp .svx .svp-label{font-size:calc(10.5 * var(--u))}
  .svp .svx-copy{padding-left:calc(20 * var(--u));padding-right:calc(20 * var(--u))}
  .svp .svx .svp-cta{height:auto;min-height:calc(46 * var(--u));font-size:calc(12 * var(--u))}
  .svp .svx-p5 .svx-copy{grid-template-columns:1fr}
  .svp .svx-p5 .svp-h{max-width:none;font-size:calc(27 * var(--u));line-height:calc(34 * var(--u))}
  .svp .svx-p5 .svp-cta{align-self:start;margin-top:calc(22 * var(--u))}
}
/* hero heading is Fraunces in every service */
.svp .svx .svp-h--hero{font-family:"Fraunces",Georgia,serif}
/* the groundwork inset reads as a deliberate picture-in-picture */
.svp .svp-fig--second{outline:8px solid var(--char);border:0}
@media (min-width:901px){
  .svp .svx-g3 .svx-copy{left:calc(60 * var(--u))}
  .svp .svx-g3 .svx-mark{display:none}
}

/* ---- fencing pass (2026-09-20) ----
   The fencing photos carry the fence in their upper half; anchor the crop
   there so the short phone figure and the near-square desktop figure both
   keep the fence in frame rather than the lawn or paving beneath it. */
#svp-fencing .svp-sec:nth-child(1) .svp-fig img{object-position:50% 30%}
#svp-fencing .svp-sec:nth-child(3) .svp-fig img{object-position:50% 25%}
#svp-fencing .svp-sec:nth-child(4) .svp-fig img{object-position:50% 15%}
#svp-fencing .svp-sec:nth-child(5) .svp-fig img{object-position:50% 10%}