/* Floor-system layer diagrams ("What is in your floor" on the home page, "Purpose-built systems" on the service pages).
   js/system-layers.js owns the motion: the layers install bottom to top when a card scrolls in, and a label and its
   layer light up together. Movement runs on the shared spring engine (NEEMotion), so there is no CSS transition,
   keyframe or animation here. Without JS, or with reduced motion, the finished stack simply renders.
   This file holds only what the script needs to draw: room for the lift, the label pill, the layer outline. */

/* The top plate lowers in from above the art and lifts past its edge on hover. */
.sl-fig svg{overflow:visible}
.sl-fig{-webkit-tap-highlight-color:transparent}

/* Label highlight: a soft pill behind the text. JS drives its opacity; at rest it is invisible (JS writes 0). */
.sl-fig .sl-li{position:relative;isolation:isolate}
.sl-fig .sl-pill{position:absolute;z-index:-1;inset:-5px -8px;border-radius:8px;background:rgba(248,112,0,.1);box-shadow:inset 0 0 0 1px rgba(248,112,0,.55);pointer-events:none}

/* Layer highlight: an outline copy of the layer's faces, travelling with the layer. */
.sl-fig .sl-hl{pointer-events:none}

/* "Purpose-built systems", wide screens only: the dark margins either side of the cards carry a faint section drawing of a
   floor (surface coat, flake band, base coat, hatched concrete, a break line, an unlabelled scale rule) in img/system-section.svg.
   Pure decoration: no text, no motion, no pointer events, clipped to the band so it can never widen the page.
   The drawing ends 16px short of the outer card edge; a two-card row (commercial) is narrower than three, so its inset is 1/6 of the row + 4px. */
@media (min-width:1200px){
  body .service-systems.has-seam{overflow-x:clip}
  .service-systems .service-system-row{position:relative;--sys-inset:0px}
  .service-systems .service-system-row:not(:has(.service-system:nth-child(3))){--sys-inset:calc(100% / 6 + 4px)}
  .service-systems .service-system-row::before,
  .service-systems .service-system-row::after{content:"";position:absolute;top:0;width:640px;height:560px;background:url(../img/system-section.svg) right top/640px 560px no-repeat;opacity:.1;pointer-events:none;z-index:0}
  .service-systems .service-system-row::before{right:calc(100% - var(--sys-inset) + 16px)}
  .service-systems .service-system-row::after{left:calc(100% - var(--sys-inset) + 16px);transform:scaleX(-1)}
}
@media (max-width:1199.98px){
  .service-systems .service-system-row::before,
  .service-systems .service-system-row::after{content:none}
}
/* Three-card rows leave under ~200px of margin below 1600px; a cropped sliver there reads as a glitch, so the drawing waits for room. */
@media (min-width:1200px) and (max-width:1599.98px){
  .service-systems .service-system-row:has(.service-system:nth-child(3))::before,
  .service-systems .service-system-row:has(.service-system:nth-child(3))::after{content:none}
}

/* "Purpose-built systems" as the home page's "What Is in Your Floor" frames (css/home-art.css .h-art--sys): tall ink frames,
   soft layered shadow and an inner vignette instead of borders, the layer drawing in a quiet glass plate at the head with white
   labels, an orange rule, the big condensed name, the description in Playfair, and "Learn more" as a tracked-caps arrow link.
   CSS only: the markup, the ids and js/system-layers.js (the layers install and light up with their labels) are untouched. */
.service-systems{--sy-ink:#171716;--sy-hair:rgba(255,255,255,.13);--sy-serif:var(--font-body);--sy-gap:clamp(12px,1.1vw,16px)}
.service-systems .service-system-row:not(#_){gap:var(--sy-gap)}
@media (min-width:1024px){
  .service-systems .service-system:not(#_){flex-basis:calc((100% - 2 * var(--sy-gap)) / 3)}
  .service-systems .service-system-row:has(.service-system:nth-child(2)):not(:has(.service-system:nth-child(3))){justify-content:center}
  .service-systems .service-system-row:has(.service-system:nth-child(2)):not(:has(.service-system:nth-child(3))) > .service-system:not(#_){flex-basis:calc((100% - var(--sy-gap)) / 2);max-width:560px}
  .service-systems .service-system-row:not(:has(.service-system:nth-child(2))){justify-content:center}
  .service-systems .service-system-row:not(:has(.service-system:nth-child(2))) > .service-system:not(#_){flex-basis:min(520px,100%);max-width:520px}
}
.service-systems .service-system:not(#_):not(#_){position:relative;isolation:isolate;border:0;border-radius:var(--r-s);background:var(--sy-ink);color:var(--white);box-shadow:0 40px 64px -38px rgba(0,0,0,.9),0 16px 28px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.07)}
.service-systems .service-system:not(#_)::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -140px 120px -100px rgba(0,0,0,.7)}

/* the drawing in a glass plate, labels in white */
.service-systems .service-system .service-diagram:not(#_):not(#_){background:rgba(255,255,255,.035);border-bottom:1px solid var(--sy-hair);padding:28px 18px 24px}
@container (min-width:340px){
  .service-systems .service-system .service-diagram:not(#_):not(#_){padding:26px 14px 22px 10px}
}
.service-systems .service-system .service-diagram .h-sys__lbl li:not(#_){color:#fff}
.service-systems .service-system .service-diagram .h-sys__lname:not(#_){color:#fff;font-weight:700}
.service-systems .service-system .service-diagram .h-sys__ldesc:not(#_){color:rgba(255,255,255,.72)}

/* the copy: orange rule, the condensed name (the home frame's 24px caps), Playfair description */
.service-systems .service-system .service-card-copy:not(#_):not(#_){padding:32px clamp(24px,2.6vw,36px) 30px;gap:0}
.service-systems .service-system .service-card-copy h3:not(#_):not(#_),
.service-systems .service-system:hover .service-card-copy h3:not(#_):not(#_){display:block;overflow:visible;max-height:none;-webkit-line-clamp:unset;line-clamp:unset;margin:0 0 16px;color:#fff;letter-spacing:-.02em;text-transform:uppercase}
.service-systems .service-system .service-card-copy h3:not(#_):not(#_)::before,
.service-systems .service-system:hover .service-card-copy h3:not(#_):not(#_)::before,
.service-systems .service-system:focus-within .service-card-copy h3:not(#_):not(#_)::before{content:"";display:block;width:36px;height:3px;margin:0 0 18px;padding:0;background:var(--orange);background-size:auto;font:0/0 serif}
.service-systems .service-system .service-card-copy p:not(#_):not(#_){margin:0 0 20px;font:400 16px/1.45 var(--sy-serif);letter-spacing:0;color:rgba(255,255,255,.88)}

/* "Learn more": the shared arrow link, tracked caps, 48px to tap */
.service-systems .service-system .service-card-copy a.btn.btn.btn:not(#_):not(#_){margin-top:auto;display:inline-flex;align-items:center;align-self:flex-start;gap:12px;min-height:48px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;filter:none;color:var(--white);font:700 13px/1.2 var(--font-body);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.service-systems .service-system .service-card-copy a.btn.btn.btn:not(#_):not(#_)::after{content:"";display:inline-block;flex:none;width:1em;height:1em;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.service-systems .service-system .service-card-copy a.btn.btn.btn:not(#_):not(#_):hover::after{transform:translateX(3px)}
@media (max-width:767.98px){
  .service-systems .service-system .service-card-copy:not(#_):not(#_){padding:28px 24px 24px}
}