/* ============================================================
   Pishina-KS
   The film goes down into dark water. The page surfaces into light.
   ============================================================ */

:root{
  /* ----------------------------------------------------------------
     The redesign palette. The reference site is a white page with
     near-white product stages, near-black headings and one turquoise
     to lilac gradient used sparingly. The names below are the ones
     the rest of this stylesheet already uses, repointed at those
     values, so the whole site moves with the tokens instead of
     needing a second competing system beside the first.
     ---------------------------------------------------------------- */
  /* light, the page */
  --canvas:#FFFFFF;        /* the page is white now, not pale blue */
  --canvas-alt:#F8F8F9;    /* the product stage: almost white, no blue cast */
  --panel:#FFFFFF;
  --surface-aqua:#EEF9FA;  /* the one tinted surface, used sparingly */
  --text-primary:#212322;  /* soft near-black, not blue-black */
  --text-secondary:#5F6B73;
  --line:#E5E9EC;
  --line-strong:#CBD3D8;

  /* dark, the water. The hero footage and the footer both live here. */
  --deep:#08202B;
  --deep-2:#0C2A38;
  --night:#070D17;         /* the smart-care feature, darker than the water */
  --warm:#171310;
  --on-deep:#EAF3F6;
  --on-deep-2:#93AAB6;
  --line-deep:rgba(234,243,246,.16);
  --footer:#151515;

  /* the brand. The logo artwork stays the blue it has always been; the
     interface accents are the turquoise and lilac of the reference.
     --accent is the functional teal rather than the bright turquoise
     because white on #1ECAD3 measures about 2:1, which is unreadable.
     #066B78 gives about 6.2:1 on white and carries white text safely. */
  --brand-cyan:#1ECAD3;
  --brand-lilac:#9486F7;
  --brand-gradient:linear-gradient(90deg,#1ECAD3,#9486F7);
  --on-gradient:#102B35;   /* ~7.4:1 on the cyan end, ~4.9:1 on the lilac */
  --accent:#066B78;
  --accent-hover:#05545E;
  --accent-bright:#1ECAD3;
  --accent-soft:#EEF9FA;
  --accent-muted:rgba(6,107,120,.18);
  --ink:#102B35;
  --logo-blue:#0B72B5;     /* the mark only, never body text on white */

  /* Poppins for everything. The old pairing was a serif for display and
     a grotesk for text; the reference runs one family at four weights and
     gets its hierarchy from size and weight instead of from contrast
     between two faces. --display is kept as a name so every existing rule
     that asks for it keeps working. */
  --font:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,1,.36,1);

  --tshadow:0 1px 2px rgba(4,10,14,.9),0 3px 14px rgba(4,10,14,.7),0 10px 44px rgba(4,10,14,.72);
  --shadow:0 1px 2px rgba(33,35,34,.04),0 8px 28px rgba(33,35,34,.06);
  --shadow-lift:0 2px 6px rgba(33,35,34,.06),0 18px 48px rgba(33,35,34,.11);

  --radius-card:20px;
  --radius-button:999px;

  --gut:clamp(20px,4.5vw,64px);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;background:var(--canvas)}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font);
  font-size:17px;
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  animation:pageIn .9s var(--ease) .05s forwards;
}
@keyframes pageIn{to{opacity:1}}

img{max-width:100%;display:block;height:auto}
::selection{background:var(--accent);color:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:500}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* the one fixed environment layer */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(110% 70% at 12% 6%, rgba(34,182,214,.10) 0%, rgba(34,182,214,0) 58%),
    radial-gradient(90% 66% at 90% 94%, rgba(11,114,181,.07) 0%, rgba(11,114,181,0) 60%);
  animation:envDrift 96s var(--ease-soft) -22s infinite alternate;
}
@keyframes envDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2.2%,0) scale(1.06)}}


/* ============================================================
   NAV
   Rebuilt as one block. The bar used to be a floating pill with
   14.5px/400 links, which read as a layer of text laid over the
   page rather than part of it. This is an architectural bar: it
   shares the section container so the logo lines up with every
   heading below it, it keeps a real height instead of shrinking
   to its contents, and the links carry enough weight to hold
   their own against the hero.

   One markup serves both layouts. Above the compact breakpoint a
   nav item with a mega menu opens it under the bar; below, the
   same markup is an accordion inside a full-height panel.
   ============================================================ */
:root{
  --nav-h:88px;          /* over the hero */
  --nav-h-solid:72px;    /* once you have scrolled */
  --nav-ease:cubic-bezier(.4,0,.2,1);
  --nav-t:260ms;
}
@media (max-width:1200px){
  :root{--nav-h:68px;--nav-h-solid:64px}
}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:linear-gradient(to bottom,rgba(6,20,28,.58),rgba(6,20,28,.14) 62%,rgba(6,20,28,0));
  /* border-box, not the default padding-box: the transparent 1px border sat
     outside the gradient's tile, the tile repeated into it, and its darkest
     top row drew a black hairline under the bar over the hero */
  background-origin:border-box;
  border-bottom:1px solid transparent;
  transition:height var(--nav-t) var(--nav-ease),
             background var(--nav-t) var(--nav-ease),
             border-color var(--nav-t) var(--nav-ease),
             box-shadow var(--nav-t) var(--nav-ease);
}
/* the same container every section uses, so the logo sits on the
   same line as the headings underneath it */
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:100%;display:flex;align-items:center;gap:clamp(16px,2.6vw,44px);
}

.nav.solid{
  height:var(--nav-h-solid);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
          backdrop-filter:blur(20px) saturate(1.5);
  border-bottom-color:var(--line);
}

/* ---------- brand ---------- */
.brand{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  flex:0 0 auto;color:var(--on-deep);
  transition:color var(--nav-t) var(--nav-ease);
}
.nav.solid .brand{color:var(--accent)}
.mark,.wordmark,.small-mark{background:transparent}
@supports ((-webkit-mask-image:url("img/logo-mark.png")) or (mask-image:url("img/logo-mark.png"))){
  .mark,.wordmark{background:currentColor}
  .small-mark{background:var(--on-deep)}
}
.mark{
  width:38px;height:38px;flex:0 0 auto;
  -webkit-mask:url("img/logo-mark.png") center/contain no-repeat;
          mask:url("img/logo-mark.png") center/contain no-repeat;
  transition:width var(--nav-t) var(--nav-ease),height var(--nav-t) var(--nav-ease);
}
.wordmark{
  display:block;height:21px;width:160px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("img/logo-word.png") left center/contain no-repeat;
          mask:url("img/logo-word.png") left center/contain no-repeat;
  transition:height var(--nav-t) var(--nav-ease),width var(--nav-t) var(--nav-ease);
}
.nav.solid .mark{width:33px;height:33px}
.nav.solid .wordmark{height:18px;width:138px}
.small-mark{
  display:block;height:26px;width:198px;margin:0 0 12px;background:var(--on-deep);
  -webkit-mask:url("img/logo-word.png") left center/contain no-repeat;
          mask:url("img/logo-word.png") left center/contain no-repeat;
}

/* ---------- the link row ---------- */
.navmain{flex:1 1 auto;min-width:0;display:flex;align-items:stretch}
.navlinks{
  display:flex;align-items:stretch;gap:clamp(4px,1.5vw,20px);
  list-style:none;margin:0;padding:0;height:100%;
}
.navlinks > li{display:flex;align-items:center;position:static}
.navlinks > li > a{
  position:relative;display:inline-flex;align-items:center;
  height:100%;padding:0 2px;min-height:24px;
  color:rgba(234,243,246,.92);text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:.012em;
  transition:color var(--nav-t) var(--nav-ease);
}
.nav.solid .navlinks > li > a{color:var(--text-primary)}
/* the underline: 1px, drawn from the centre, and already drawn on
   the page you are reading */
.navlinks > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(50% - .92em);
  height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 200ms var(--nav-ease);
}
.navlinks > li > a:hover::after,
.navlinks > li > a:focus-visible::after{transform:scaleX(1)}
.navlinks > li > a[aria-current]{color:#fff}
.nav.solid .navlinks > li > a[aria-current]{color:var(--accent)}
.navlinks > li > a[aria-current]::after{transform:scaleX(1)}

/* the disclosure beside a section that has a menu */
.megatoggle{
  appearance:none;-webkit-appearance:none;background:none;border:0;
  margin:0 0 0 5px;padding:0;width:24px;height:24px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:inherit;
}
.megatoggle span{
  width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform 220ms var(--nav-ease);
  color:rgba(234,243,246,.8);
}
.nav.solid .megatoggle span{color:var(--text-secondary)}
.has-mega.open > .megatoggle span{transform:translateY(1px) rotate(-135deg)}

/* ---------- the right hand side ---------- */
/* margin-left:auto, because below the compact breakpoint .navmain becomes
   a fixed panel and leaves the flex flow, so nothing was left to push
   this to the right: the burger sat 113px inside the screen edge rather
   than against it. On desktop .navmain still grows and this is a no-op. */
.navright{display:flex;align-items:center;gap:clamp(10px,1.3vw,18px);flex:0 0 auto;margin-left:auto}

.langsw{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:600;letter-spacing:.09em;
}
.langsw .lang-on,.langsw .lang-off{
  padding:6px 8px;min-height:24px;display:inline-flex;align-items:center;
  text-decoration:none;border-radius:5px;
}
.langsw .lang-on{color:#fff}
.langsw .lang-off{
  color:rgba(234,243,246,.62);
  transition:color 200ms var(--nav-ease),background 200ms var(--nav-ease);
}
.langsw .lang-off:hover,.langsw .lang-off:focus-visible{color:#fff;background:rgba(255,255,255,.12)}
/* the divider is drawn, not typed, so it cannot be read aloud */
.langsw .lang-off::before{
  content:"";display:block;width:1px;height:11px;margin-right:9px;
  background:rgba(234,243,246,.3);
}
.nav.solid .langsw .lang-on{color:var(--text-primary)}
.nav.solid .langsw .lang-off{color:var(--text-secondary)}
.nav.solid .langsw .lang-off:hover,
.nav.solid .langsw .lang-off:focus-visible{color:var(--accent);background:var(--accent-soft)}
.nav.solid .langsw .lang-off::before{background:var(--line-strong)}

/* the primary action reads as a button, not another link */
.navright .cta-nav{
  flex:0 0 auto;white-space:nowrap;
  padding:11px 20px;font-size:14px;font-weight:600;letter-spacing:.01em;
}

/* ---------- the burger ---------- */
.burger{
  display:none;width:44px;height:44px;padding:0;
  /* Pulled out through the container's own gutter rather than by a fixed
     amount, so it sits the same distance from the screen edge at every width.
     A flat -8px was fine on a phone, where the gutter is 20px, and left the
     icon 63px inside the edge on a 1200px tablet, where the gutter is 60. The
     4px it stops short of the edge keeps the whole 44px target on screen, and
     the pull is always smaller than the padding it moves into, so it cannot
     widen the page. */
  margin-right:calc(-1 * (var(--gut) - 4px));
  background:transparent;border:0;cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--on-deep);
  transition:transform 300ms var(--nav-ease),opacity 200ms var(--nav-ease),
             background var(--nav-t) var(--nav-ease);
}
.nav.solid .burger span{background:var(--text-primary)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.nav.open .burger span{background:var(--text-primary)}
.nav.open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- the mega menu ---------- */
.mega{
  position:absolute;top:100%;left:0;right:0;
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 24px 60px rgba(12,32,41,.13);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 200ms var(--nav-ease),transform 240ms var(--nav-ease),
             visibility 0s linear 240ms;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(24px,4vw,64px);
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(28px,3vw,44px) var(--gut);
}
.has-mega.open > .mega{
  opacity:1;visibility:visible;transform:none;
  transition:opacity 200ms var(--nav-ease),transform 240ms var(--nav-ease),
             visibility 0s linear 0s;
}
.mega-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,2.4vw,40px);
}
.mega-h{
  margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li + li{margin-top:2px}
.mega-col a{
  display:block;padding:7px 0;min-height:24px;
  color:var(--text-primary);text-decoration:none;
  font-size:14.5px;font-weight:500;line-height:1.35;
  transition:color 180ms var(--nav-ease),transform 180ms var(--nav-ease);
}
.mega-col a:hover,.mega-col a:focus-visible{color:var(--accent);transform:translateX(2px)}

.mega-feature{
  display:block;text-decoration:none;color:inherit;
  border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,40px);
}
.mega-feature-img{
  display:block;overflow:hidden;border-radius:12px;background:var(--canvas-alt);
  aspect-ratio:4/3;
}
.mega-feature-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 500ms var(--ease);
}
.mega-feature:hover .mega-feature-img img{transform:scale(1.035)}
.mega-feature-t{
  display:block;margin:16px 0 0;font-family:var(--display);font-weight:400;
  font-size:21px;line-height:1.2;letter-spacing:-.012em;color:var(--text-primary);
}
.mega-feature-c{
  display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--accent);
}
.mega-ar{
  width:16px;height:1.5px;background:currentColor;position:relative;
  transition:width 220ms var(--nav-ease);
}
.mega-ar::after{
  content:"";position:absolute;right:0;top:-2.5px;
  width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.mega-feature:hover .mega-ar{width:24px}

/* ============================================================
   The compact layout. It starts at 1200px rather than at a
   width where the links have already been squeezed: five items,
   a language switch and a button stop having room well before
   the bar looks visibly broken.
   ============================================================ */
@media (min-width:1201px){
  .nav-actions{display:none}
}

@media (max-width:1200px){
  .burger{display:block}
  .navright .langsw-bar,.navright .cta-nav{display:none !important}

  /* the panel: full height, its own ground, sliding in from the right */
  .navmain{
    position:fixed;top:0;right:0;bottom:0;
    width:min(420px,100%);
    display:block;
    padding:calc(var(--nav-h) + 12px) 0 0;
    background:var(--panel);
    box-shadow:-24px 0 70px rgba(6,20,28,.24);
    transform:translateX(100%);
    visibility:hidden;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transition:transform 320ms var(--nav-ease),visibility 0s linear 320ms;
  }
  .nav.open .navmain{
    transform:none;visibility:visible;
    transition:transform 320ms var(--nav-ease),visibility 0s linear 0s;
  }
  /* the notch and the home indicator */
  .navmain{
    padding-left:max(var(--gut),env(safe-area-inset-left));
    padding-right:max(var(--gut),env(safe-area-inset-right));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }

  .navlinks{display:block;height:auto}
  .navlinks > li{display:block;border-bottom:1px solid var(--line);position:relative}
  .navlinks > li > a{
    height:auto;display:block;padding:17px 44px 17px 0;
    font-size:19px;font-weight:500;letter-spacing:-.012em;
    color:var(--text-primary);
  }
  .navlinks > li > a::after{display:none}
  .navlinks > li > a[aria-current]{color:var(--accent)}

  /* the disclosure becomes the accordion control, sized for a thumb */
  .megatoggle{
    position:absolute;top:6px;right:-6px;width:48px;height:48px;margin:0;
  }
  .megatoggle span{color:var(--text-secondary);width:8px;height:8px}

  /* the mega menu, read as an accordion */
  /* The accordion is a grid row that grows from 0fr to 1fr. height:0 could
     not close it -- with border-box sizing the padding is a floor, and six
     pixels of the first group stayed on screen -- and height:auto cannot be
     transitioned, so it would have snapped open. */
  .mega{
    position:static;
    display:grid;grid-template-columns:1fr;grid-template-rows:0fr;
    max-width:none;margin:0;padding:0;
    background:none;border:0;box-shadow:none;
    transform:none;opacity:1;visibility:visible;
    transition:grid-template-rows 280ms var(--nav-ease);
  }
  .has-mega.open > .mega{grid-template-rows:1fr}
  /* no padding on the grid item itself: an item's own padding is not clipped
     by its own overflow, and a 0fr track cannot shrink below it, so eight
     pixels of the first group stayed visible */
  .mega-cols{display:block;overflow:hidden;min-height:0}
  .mega-col:last-child{padding-bottom:10px}
  .mega-col + .mega-col{margin-top:14px}
  .mega-h{
    margin:0 0 6px;padding:0 0 6px;font-size:10.5px;
  }
  .mega-col a{padding:10px 0;font-size:16px;color:var(--text-secondary)}
  .mega-col a:hover{transform:none}
  /* the picture is desktop furniture; on a phone it is 60KB between a
     visitor and the link they came for */
  .mega-feature{display:none}

  /* the actions, below the links */
  .nav-actions{
    display:flex;flex-direction:column;align-items:stretch;gap:14px;
    padding:22px 0 8px;
  }
  .nav-actions .langsw{align-self:flex-start;font-size:13px}
  .nav-actions .langsw .lang-on{color:var(--text-primary)}
  .nav-actions .langsw .lang-off{color:var(--text-secondary)}
  .nav-actions .langsw .lang-off::before{background:var(--line-strong)}
  .nav-actions .cta-nav{display:block;text-align:center;padding:15px 22px;font-size:15px}
  .nav-tel{
    font-size:17px;font-weight:500;color:var(--text-primary);text-decoration:none;
    letter-spacing:-.01em;min-height:44px;display:flex;align-items:center;
  }
  .nav-tel:hover{color:var(--accent)}
  .nav-wa{font-size:15px;min-height:44px;display:flex;align-items:center}

  /* the page behind it */
  /* position:fixed, not overflow:hidden alone: the panel holds the page at
     the offset the script wrote into `top`, and iOS scrolls straight past an
     overflow lock. */
  body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  body.nav-open::before{
    content:"";position:fixed;inset:0;z-index:99;
    background:rgba(6,20,28,.44);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  body.nav-open .dock{opacity:0;pointer-events:none}
  /* the bar keeps its own ground while the panel is open, so the burger
     and the logo stay legible against white */
  .nav.open{
    background:var(--panel);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom-color:var(--line);
  }
  .nav.open .brand{color:var(--accent)}

  /* rows arrive in sequence rather than all at once */
  .nav.open .navlinks > li{animation:navIn 360ms var(--nav-ease) both}
  .nav.open .navlinks > li:nth-child(1){animation-delay:40ms}
  .nav.open .navlinks > li:nth-child(2){animation-delay:70ms}
  .nav.open .navlinks > li:nth-child(3){animation-delay:100ms}
  .nav.open .navlinks > li:nth-child(4){animation-delay:130ms}
  .nav.open .navlinks > li:nth-child(5){animation-delay:160ms}
  .nav.open .nav-actions{animation:navIn 360ms var(--nav-ease) 190ms both}
  @keyframes navIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){
  .nav,.navmain,.mega,.mark,.wordmark{transition-duration:1ms}
  .mega-cols{transition:none}
  .nav.open .navlinks > li,.nav.open .nav-actions{animation:none}
  .mega-feature-img img,.mega-ar{transition:none}
}

/* <picture> wraps every photograph that has a WebP beside it. display:contents
   takes it out of the layout entirely, so wrapping changed nothing: the <img>
   is still what the parent lays out. The two .head-hero rules that used to say
   "> img" now say "img", because the direct child is the <picture> now. */
picture{display:contents}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;position:relative;
  background:var(--ink);color:#fff;
  font-family:var(--font);font-weight:500;font-size:15.5px;letter-spacing:.005em;
  text-decoration:none;padding:15px 30px;border-radius:100px;border:1px solid var(--ink);
  cursor:pointer;
  box-shadow:0 1px 2px rgba(9,26,34,.10),0 6px 18px rgba(9,26,34,.10);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{
  background:var(--accent);border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(11,114,181,.16),0 12px 26px rgba(11,114,181,.22);
}
.btn:active{transform:translateY(0)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-wide{width:100%;text-align:center}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--accent);box-shadow:none}
.on-deep .btn-ghost,.band .btn-ghost,.static-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.on-deep .btn-ghost:hover,.band .btn-ghost:hover,.static-hero .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.band .btn,.static-hero .btn{text-shadow:none}
/* on the dark bands the ink button would vanish, so it stays bright and inverts on hover */
.on-deep .btn,.band .btn,.static-hero .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.on-deep .btn:hover,.band .btn:hover,.static-hero .btn:hover{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.28)}

.wa{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);text-decoration:none;
  font-size:14.5px;font-weight:500;
  transition:color .3s var(--ease)
}
.wa::before{
  content:"";width:15px;height:15px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6a11 11 0 0 1-4.2-3.9c-.3-.5-.7-1.2-.7-2s.4-1.2.6-1.4c.2-.2.4-.3.6-.3h.4c.2 0 .4 0 .6.4l.7 1.7c.1.2 0 .4-.1.5l-.3.4c-.1.1-.2.3-.1.5.2.4.7 1.1 1.3 1.6.7.6 1.3.8 1.6.9.2.1.4 0 .5-.1l.6-.7c.2-.2.3-.1.5-.1l1.6.8c.2.1.3.2.4.3 0 .1 0 .6-.2 1.2Z'/%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'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6a11 11 0 0 1-4.2-3.9c-.3-.5-.7-1.2-.7-2s.4-1.2.6-1.4c.2-.2.4-.3.6-.3h.4c.2 0 .4 0 .6.4l.7 1.7c.1.2 0 .4-.1.5l-.3.4c-.1.1-.2.3-.1.5.2.4.7 1.1 1.3 1.6.7.6 1.3.8 1.6.9.2.1.4 0 .5-.1l.6-.7c.2-.2.3-.1.5-.1l1.6.8c.2.1.3.2.4.3 0 .1 0 .6-.2 1.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wa:hover{color:var(--accent-hover)}
.on-deep .wa{color:var(--accent-bright)}

/* ---------- links and buttons, stated once ----------
   Three of the five faults the review found were link and button styling
   that had never been written down, so the browser's defaults or a
   neighbouring rule decided instead. Each is measured beside its fix.

   1. Product titles in the shop were #0000EE underlined, and purple once
      visited: .pcard-name carried no rule for its <a> at all.
   2. "Pyet cmimin" on a product page is class="btn wa". .btn paints the
      dark ink background, then .wa repaints the text --accent on top of
      it: #0B72B5 on #0E2E3E, measured at 2.76:1. A button's own colour
      has to win over the link colour that decorates it.
   3. Nothing declared :visited or :focus-visible anywhere. */
.pcard-name a,
.prow h3 a,
.prod h3 a{
  color:var(--text-primary);text-decoration:none;
  transition:color .22s var(--ease-out);
}
.pcard-name a:visited,
.prow h3 a:visited,
.prod h3 a:visited{color:var(--text-primary)}
.pcard-name a:hover,
.prow h3 a:hover,
.prod h3 a:hover{color:var(--accent)}

/* The whole product card opens the product, the way the service tiles do.
   Styling the title as plain text left it a 133x24 inline box on a phone --
   the responsive sweep caught it the moment the browser's default link
   styling stopped padding it out. The two actions inside the card sit above
   the overlay so they keep their own targets. */
.pcard{position:relative}
.pcard-name a::after{content:"";position:absolute;inset:0;z-index:1}
.pcard-actions{position:relative;z-index:2}

/* a button keeps its own text colour whatever link class rides along */
.btn.wa,.btn.wa:visited{color:#fff}
.btn.wa:hover{color:#fff}
.btn-ghost.wa,.btn-ghost.wa:visited{color:var(--accent)}
.btn-ghost.wa:hover{color:var(--accent-hover)}

/* one visible focus ring for everything that takes focus, drawn outside the
   shape so a round button is not clipped by it */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}
.btn:focus-visible,.wa:focus-visible{border-radius:var(--radius-button)}

/* the gradient, used sparingly and always with dark text: white on the
   turquoise end measures about 2:1, which is why the reference site's own
   treatment is not copied literally */
.btn-brand{
  background:var(--brand-gradient);border-color:transparent;
  color:var(--on-gradient);
}
.btn-brand:hover{
  background:var(--brand-gradient);color:var(--on-gradient);
  border-color:transparent;filter:saturate(1.1);
  box-shadow:0 2px 4px rgba(30,202,211,.18),0 12px 26px rgba(148,134,247,.22);
}
.on-deep .wa:hover{color:#fff}
.wa-wide{border:1px solid var(--line-strong);border-radius:100px;padding:13px 26px;margin-top:22px}
.wa-wide:hover{background:var(--accent-soft);border-color:var(--accent)}
.on-deep .wa-wide{border-color:rgba(255,255,255,.4)}
.on-deep .wa-wide:hover{background:rgba(255,255,255,.12)}

/* ============================================================
   HERO, the dark half
   ============================================================ */
/* svh is the viewport with the browser toolbar showing -- by definition the
   smallest it gets. The moment iOS Safari retracts its toolbar on the way
   down, which is exactly while this hero is being scrubbed, the visible
   viewport grows past the pinned stage and the next section appears in the
   strip underneath it. dvh is the live viewport, so the stage stays exactly
   as tall as what the reader can see, and it is the same number the scroll
   maths already reads from window.innerHeight.

   The deep background on .hero is the floor under all of it: iOS does not
   report the toolbar transition continuously, so if the stage ever lags the
   viewport by a frame, what shows is the same dark as the water rather than
   the white of the next section. */
/* 380vh was three and a half screens of scrolling before the page's first
   real content. The brief asks for 140-180svh, and nothing about the
   sequence has to be retimed to get it: heroProgress() normalises the
   scroll against the section's own height, and every caption's data-a and
   data-b is a fraction of that progress, so shortening the runway makes the
   same film play over a shorter distance rather than breaking its cues.
   vh and not svh for the spacer: it is the one number here that should not
   move when the toolbar does, and the stage it pins is already dvh. */
/* The number that matters is not this height, it is this height minus the
   viewport: the stage is pinned, so the scroll the animation actually gets is
   the spacer left over underneath it. At 120vh that was 0.2 of a screen --
   one flick and the whole film had run, which is why it read as instant. At
   170vh it is 0.7 of a screen: one comfortable scroll from the first caption
   to the last, and still a quarter of what it was when the review ran.

     380vh -> 2.8 screens of scrolling
     180vh -> 0.8
     120vh -> 0.2   too fast
     170vh -> 0.7 */
/* 230vh: the scroll distance is the height less one screen, so the video
   plays over 1.3 screens of scrolling. History, all the client's calls:
   380vh (2.8 screens) too slow, 170vh (0.7) too quick, 300vh (2.0) then
   asked to be faster on 14 September 2026. */
.hero{position:relative;height:230vh;z-index:1;background:var(--deep)}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--deep)}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 1.1s var(--ease)}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed #hero-video{display:none}

/* Legibility without a dark blob behind the words.
   A directional grade from the left, where the text lives, plus a soft floor.
   It reads as cinematography, not as a shadow stuck on the picture. */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(4,13,20,.90) 0%,rgba(4,13,20,.72) 30%,rgba(4,13,20,.34) 60%,rgba(4,13,20,0) 84%),
    linear-gradient(to top,rgba(4,13,20,.34) 0%,rgba(4,13,20,0) 34%);
}

.ring{position:absolute;left:50%;bottom:56px;transform:translateX(-50%) rotate(-90deg);width:44px;height:44px;color:var(--accent-bright);opacity:.8;pointer-events:none}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0;transition:opacity .6s var(--ease)}

.cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:1px;height:52px;background:linear-gradient(to bottom,transparent,rgba(234,243,246,.35));pointer-events:none}
.cue span{position:absolute;left:0;top:0;width:1px;height:16px;background:var(--accent-bright);animation:cueRun 2.8s var(--ease-soft) -.6s infinite}
@keyframes cueRun{0%{transform:translateY(0);opacity:0}22%{opacity:.9}78%{opacity:.9}100%{transform:translateY(36px);opacity:0}}

.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;left:0;right:0;padding:0 var(--gut);opacity:0;color:var(--on-deep);text-shadow:var(--tshadow)}
.band .btn,.band a{pointer-events:auto}

/* no per-band blob. the grade above does the work, evenly, all the way through. */
.band-1{top:22%}
.band-2{top:30%}
.band-3{top:26%}
.band-4{top:20%}

.line{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(34px,6.6vw,88px);line-height:1.05;letter-spacing:-.018em;
  max-width:19ch;
}
@media (max-width:720px){
  .line{font-size:clamp(31px,8.6vw,46px);max-width:13ch}
  .band-1{top:26%}
  .band-2{top:26%}
  .band-3{top:20%}
  .settle-sub{font-size:15.5px;max-width:26ch;margin-top:16px}
  .settle-cta{margin-top:22px;gap:10px}
  .settle-cta .btn{padding:13px 22px;font-size:15px}
}
.band-2 .line{max-width:14ch}
.band-3 .line{max-width:13ch}
.h-settle{max-width:15ch}
/* the captions list the work, so they run longer than a headline: a little
   smaller, a wider measure */
.band .line-list{font-size:clamp(30px,4.6vw,66px);line-height:1.08;max-width:22ch}
@media (max-width:720px){
  .band .line-list{font-size:clamp(26px,7.4vw,36px);max-width:18ch}
}

.split{display:inline-block}
.w{display:inline-block;white-space:pre;padding:.06em 0 .16em}
.c{display:inline-block;will-change:transform,opacity}

.settle-sub{margin:22px 0 0;font-size:clamp(15px,1.5vw,19px);max-width:44ch;opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0)) * 14px))}
.settle-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0)) * 16px))}
.static-hero .settle-cta{opacity:1;transform:none}

/* entrances */
.band[data-entrance="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
.band[data-entrance="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
.band[data-entrance="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks2:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks2)));
}
.band[data-entrance="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
.band[data-entrance="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}

/* ---------- the static hero ---------- */
.static-hero{display:none;position:relative;overflow:hidden;background:var(--deep)}
.static-media{position:absolute;inset:0;background:url("img/static-hero.jpg") center 40%/cover no-repeat}
.static-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,14,20,.50) 0%,rgba(5,14,20,.30) 26%,rgba(5,14,20,.62) 62%,rgba(5,14,20,.88) 86%,var(--canvas) 100%)}
.static-inner{position:relative;padding:clamp(104px,17vh,150px) var(--gut) clamp(46px,8vh,72px);color:var(--on-deep);text-shadow:var(--tshadow)}
/* a local scrim behind the words only, so the photograph stays bright around them */
.static-inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 118% 62% at 34% 44%,rgba(4,10,15,.80) 0%,rgba(4,10,15,.58) 48%,rgba(4,10,15,0) 82%);
}
.static-kicker{margin:0 0 16px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright)}
.static-h{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(40px,10vw,68px);line-height:1.02;letter-spacing:-.018em;max-width:14ch}
.static-sub{margin:16px 0 0;max-width:34ch;font-size:17px}

/* ============================================================
   THE WATERLINE, the signature element
   ============================================================ */
.waterline{position:relative;height:1px;z-index:3;overflow:hidden;background:transparent;margin-bottom:-1px}
.waterline svg{width:100%;height:2px;display:block;overflow:visible}
.waterline line{stroke:rgba(11,114,181,.32);stroke-width:1}
.waterline::after{
  content:"";position:absolute;top:0;left:0;height:1px;width:24%;
  background:linear-gradient(90deg,transparent,var(--accent-bright),transparent);
  animation:wlRun 14s linear -3s infinite;
}
@keyframes wlRun{0%{transform:translateX(-30%)}100%{transform:translateX(420%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{position:relative;z-index:2;padding:clamp(88px,14vh,172px) 0;background:var(--canvas)}
.sec.alt{background:var(--canvas-alt)}
.sec.sand{background:#F6F1E9}
.sec.sky{background:#E9F2FA}
.sec.on-deep{background:var(--deep);color:var(--on-deep)}
.sec.warm{background:var(--warm);color:var(--on-deep)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:860px}
.wrap.center{text-align:center;margin-top:44px}

.kicker{
  margin:0 0 18px;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);display:flex;align-items:baseline;gap:12px;
}
.kicker .num{color:var(--accent)}
.on-deep .kicker,.warm .kicker{color:var(--on-deep-2)}
.on-deep .kicker .num,.warm .kicker .num{color:var(--accent-bright)}

/* The brief's scale: H2 34-44 on desktop and 26-32 on a phone, H3 24-30.
   These were 64 and 32 at weight 400, which is a serif's scale -- the old
   display face was Instrument Serif and a serif carries size that a grotesk
   does not. Poppins at 600 gets its authority from weight instead, so the
   sizes come down and the page reads as one system rather than as headings
   shouting over their own body text. */
.h2{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3.4vw,42px);line-height:1.14;letter-spacing:-.02em;max-width:20ch;
}
.h3{margin:0 0 12px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,28px);line-height:1.2;letter-spacing:-.015em}
.lede{margin:24px 0 0;color:var(--text-secondary);font-size:clamp(16px,1.55vw,20px);max-width:54ch}
.on-deep .lede,.warm .lede{color:var(--on-deep-2)}
.body{margin:0 0 16px;color:var(--text-secondary);max-width:52ch}
.on-deep .body,.warm .body{color:var(--on-deep-2)}
.small{font-size:14px;color:var(--text-secondary);margin:0 0 6px}
.on-deep .small,.warm .small{color:var(--on-deep-2)}
.suppliers{margin-top:44px}

/* ---------- cards ---------- */
/* ---------- the system band ----------
   This was three boxes of text saying a pool is a shell, water and upkeep,
   which is a claim rather than a demonstration. It is three photographs of
   those three things now: the poured shell before anything covers it, the
   plant room, and a cover closed over finished water.

   One band with hairline dividers rather than three separate cards, because
   the page already carries two card grids above this point and a third would
   read as more of the same. The band is one object; the dividers are what say
   it has three parts.

   Deliberately unlinked. The six service cards two sections up already go to
   construction, filtration and maintenance, and a third set of the same three
   destinations within two screens is the repetition the client has twice
   asked me to take out. */
.sysband{
  list-style:none;margin:clamp(40px,5vh,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);
}
.sys{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.sys:first-child{border-left:0}
.sys-shot{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--canvas-alt)}
.sys-shot img{width:100%;height:100%;object-fit:cover;display:block}
.sys-body{padding:24px 26px 28px}
.sys-n{
  margin:0 0 10px;display:flex;align-items:baseline;gap:12px;
  font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.012em;
  color:var(--accent);
}
.sys-i{
  font-family:var(--font);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  color:var(--text-secondary);
}
.sys-t{margin:0;color:var(--text-secondary);font-size:15.5px;line-height:1.6}

/* Below the three-column width the panels turn on their side rather than
   stacking full bleed: three 3/2 photographs stacked is about 1000px of
   scrolling on a phone to read three sentences. */
@media (max-width:900px){
  .sysband{grid-template-columns:1fr}
  .sys{flex-direction:row;border-left:0;border-top:1px solid var(--line)}
  .sys:first-child{border-top:0}
  .sys-shot{flex:0 0 clamp(122px,26vw,220px);aspect-ratio:auto}
  .sys-body{padding:16px 20px;min-width:0}
}
@media (max-width:560px){
  .sys-body{padding:13px 15px}
  .sys-n{font-size:19px;margin:0 0 5px;gap:9px}
  .sys-t{font-size:13.5px;line-height:1.45}
}

/* ---------- the work strip ---------- */
.strip{display:grid;gap:14px;grid-template-columns:repeat(6,1fr);padding:52px var(--gut) 0;max-width:1560px;margin:0 auto}
.shot{margin:0;position:relative;overflow:hidden;background:var(--canvas-alt);border-radius:14px}
.strip .shot.wide{grid-column:span 3}
.strip .shot:not(.wide){grid-column:span 3}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.3s var(--ease)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:24px 20px 16px;
  font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(4,10,15,.78),rgba(4,10,15,0));
  text-shadow:0 1px 3px rgba(4,10,15,.9);
}

/* ============================================================
   THE BUILD STORY
   A pinned sequence: five stages, advanced by scroll.
   ============================================================ */
.story{position:relative;height:420vh;margin-top:clamp(40px,7vh,80px)}
.story-stage{
  position:sticky;top:0;height:100vh;height:100dvh;
  display:grid;grid-template-columns:1.15fr .85fr;
  align-items:center;gap:clamp(24px,4vw,56px);
  padding:clamp(70px,10vh,96px) var(--gut) clamp(40px,7vh,64px);
  max-width:1560px;margin:0 auto;
}
.story-media{position:relative;width:100%;height:min(66vh,620px);border-radius:16px;overflow:hidden;background:var(--canvas-alt)}
/* two classes deep on purpose: the lightbox adds .zoomable to these figures and
   .zoomable sets position:relative, which would otherwise unstack the slides */
.story-media .story-shot{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:scale(1.06);
  transition:opacity .8s var(--ease),transform 1.6s var(--ease);
}
.story-shot.on{opacity:1;transform:scale(1)}
.story-shot img{width:100%;height:100%;object-fit:cover}

.story-copy{position:relative;align-self:center}
.story-progress{
  margin:0 0 20px;font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--text-secondary);
}
.story-progress .story-n{
  font-family:var(--display);font-size:44px;letter-spacing:0;color:var(--accent);
  display:inline-block;vertical-align:-6px;margin-right:6px;
}
.story-texts{position:relative;min-height:210px}
.story-text{
  position:absolute;inset:0;
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .7s var(--ease);
  pointer-events:none;
}
.story-text.on{opacity:1;transform:none;pointer-events:auto}
.story-text h3{
  margin:0 0 12px;font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,42px);letter-spacing:-.012em;
}
.story-text p{margin:0;color:var(--text-secondary);max-width:34ch;font-size:clamp(15.5px,1.4vw,18px)}
.story-bar{position:absolute;left:0;right:0;bottom:-34px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.story-bar span{display:block;height:100%;width:calc(var(--sp,0) * 100%);background:var(--accent);transition:width .35s var(--ease)}

@media (max-width:900px){
  .story{height:460vh}
  .story-stage{
    grid-template-columns:1fr;align-content:center;gap:22px;
    padding:clamp(76px,12vh,104px) var(--gut) 46px;
  }
  .story-media{height:min(42vh,340px)}
  .story-texts{min-height:170px}
  .story-progress{margin-bottom:12px}
  .story-progress .story-n{font-size:34px;vertical-align:-4px}
  .story-bar{bottom:-22px}
}

/* an editorial arrow link, so two solid pills never compete on one screen */
.btn-arrow{
  display:inline-flex;align-items:center;gap:16px;
  background:transparent;border:0;box-shadow:none;
  color:var(--ink);padding:6px 0;border-radius:0;
  font-size:clamp(17px,1.7vw,21px);font-weight:500;letter-spacing:-.01em;
  transition:color .35s var(--ease);
}
.btn-arrow::after{
  content:"";position:absolute;left:0;right:52px;bottom:0;height:1px;
  background:var(--line-strong);
  transform-origin:left;transform:scaleX(1);
  transition:transform .5s var(--ease),background .35s var(--ease);
}
.btn-arrow:hover{background:transparent;color:var(--accent);transform:none;box-shadow:none}
.btn-arrow:hover::after{background:var(--accent)}
.btn-arrow .arrow{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line-strong);
  position:relative;
  transition:transform .4s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.btn-arrow .arrow::before{
  content:"";position:absolute;left:16px;top:50%;width:9px;height:9px;
  margin-top:-4.5px;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);
}
.btn-arrow:hover .arrow{transform:translateX(5px);border-color:var(--accent);background:var(--accent-soft)}

@media (prefers-reduced-motion: reduce){
  .story{height:auto}
  .story-stage{position:static;height:auto;display:block;padding-bottom:0}
  .story-media{height:auto;aspect-ratio:4/3;margin-bottom:20px}
  .story-media .story-shot{position:relative;inset:auto;opacity:1;transform:none;margin-bottom:14px}
  .story-shot img{border-radius:16px}
  .story-texts{position:static;min-height:0}
  .story-text{position:static;opacity:1;transform:none;margin-bottom:28px}
  .story-bar{display:none}
}

/* ---------- the interactive depth moment ---------- */
.depth{
  margin-top:64px;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(26px,4vw,46px);box-shadow:var(--shadow);
  display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:1fr 1.1fr;align-items:center;
}
.depth-head h3{margin:0 0 10px;font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px);letter-spacing:-.012em}
.depth-head p{margin:0;color:var(--text-secondary);max-width:36ch}
.depth-svg{width:100%;height:auto;display:block}
.d-shell{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.d-water{fill:var(--accent-bright);opacity:.34;transition:y .55s var(--ease),height .55s var(--ease)}
.d-mark{stroke:var(--accent);stroke-width:2;transition:y1 .55s var(--ease),y2 .55s var(--ease)}
.depth-ctl{margin-top:18px}
.depth-ctl input[type=range]{width:100%;accent-color:var(--accent);height:26px;cursor:pointer;background:transparent}
.depth-out{margin:10px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.depth-m{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:0;color:var(--accent)}
.depth-for{font-size:15px;color:var(--text-secondary)}

/* ---------- two-column blocks ---------- */
.models{list-style:none;margin:22px 0 0;padding:0}
.models li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.on-deep .models li{border-color:var(--line-deep)}
.models li:last-child{border-bottom:1px solid var(--line)}
.on-deep .models li:last-child{border-bottom-color:var(--line-deep)}
.models .m-n{font-size:16px;font-weight:500;flex:1 1 auto}
.models .m-t{font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.on-deep .models .m-t{color:var(--on-deep-2)}
.badge{
  display:inline-block;margin:0 0 16px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  border-radius:100px;padding:8px 15px;
}
.on-deep .badge{color:var(--accent-bright);background:rgba(34,182,214,.14)}


/* narrow screens: give each model its own line, then tag and price beneath,
   so a long name like "Scuba S1 Pro" cannot force a ragged double row */
@media (max-width:620px){
  .models li{flex-wrap:wrap;gap:6px 14px;padding:14px 0}
  .models .m-n{flex:1 1 100%;font-size:16.5px;line-height:1.35}
  .models .m-t{order:2}
  .models .wa{order:3;margin-left:auto;white-space:nowrap}
}

/* ---------- the upkeep card ----------
   This was a pair until the covers card came out of it: covers already have
   their own picture card at the top of the page, and saying the same thing
   twice on one page is the thing the client asked me to stop doing. auto-fit
   rather than a hard single column, so the row still splits by itself if a
   second card is ever put back. */
.care-grid{
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin-top:52px;align-items:stretch;
}
.care-card{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,2.6vw,34px);
  box-shadow:var(--shadow);
}
/* the card is a column flex container, so it stretches its children across:
   the pill was inline-block and still came out the full width of the card.
   Only showed once the card went full width and the badge became a bar. */
.care-card .badge{align-self:flex-start}
.care-card .h3{margin-bottom:10px}
.care-card .body{margin-bottom:18px}
.care-card .models{margin-top:auto}
.care-note{margin-top:16px;margin-bottom:0}

.care-media{
  margin:0 0 22px;border-radius:12px;overflow:hidden;background:var(--canvas-alt);
}
.care-media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}

.care-list{list-style:none;margin:0 0 auto;padding:0}
.care-list li{
  position:relative;padding:9px 0 9px 28px;
  color:var(--text-secondary);font-size:15.5px;
  border-top:1px solid var(--line);
}
.care-list li:first-child{border-top:0;padding-top:0}
.care-list li::before{
  content:"";position:absolute;left:2px;top:50%;margin-top:-4px;
  width:9px;height:9px;border-radius:50%;
  border:2px solid var(--accent);
}
.care-list li:first-child::before{top:9px;margin-top:0}

.care-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:24px}
.care-actions .wa-wide{margin-top:0}
.care-more{
  /* inline-flex with a floor, not a bare inline box: as a plain inline link
     this measured 116x23 and failed the 24px target the moment it appeared
     somewhere the sweep looks at. The underline is drawn on a child so the
     extra height does not push the rule away from the text. */
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--text-secondary);text-decoration:none;font-size:14.5px;
  box-shadow:inset 0 -1px 0 0 var(--line-strong);
  transition:color .3s var(--ease),box-shadow .3s var(--ease);
}
.care-more:hover{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent)}

@media (max-width:900px){
  .care-grid{grid-template-columns:1fr}
  .care-card .models{margin-top:0}
  .care-list{margin-bottom:0}
}

/* ---------- sauna ---------- */
.sauna-two{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:.92fr 1.08fr;align-items:center;margin-top:8px}
.sauna-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.sauna-grid .shot{background:#EDE4D8;border-radius:12px}
.sauna-grid .shot img{aspect-ratio:4/5}
.sec.sand .kicker .num{color:#B07A32}
@media (max-width:900px){.sauna-two{grid-template-columns:1fr}}

/* ---------- products ---------- */
.prods{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:52px}
.prod{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 24px 28px;box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.prod img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:10px;padding:6px;margin-bottom:20px}
.prod h3{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:25px;letter-spacing:-.012em}
.prod p{margin:0 0 16px;color:var(--text-secondary);font-size:15px;max-width:36ch}

/* ---------- faq ---------- */
.faq{margin-top:44px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-weight:500;font-size:clamp(17px,1.9vw,20px);letter-spacing:-.015em;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .45s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq p{margin:0 0 24px;color:var(--text-secondary);max-width:64ch}

/* ---------- form ---------- */
.form{margin-top:44px;display:grid;gap:18px;max-width:560px}
.field label{display:block;margin-bottom:8px;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-2)}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line-deep);
  color:var(--on-deep);font-family:var(--font);font-size:16px;
  padding:14px 15px;border-radius:10px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(147,170,182,.75)}
.field input:focus,.field select:focus,.field textarea:focus{background:rgba(255,255,255,.1);border-color:var(--accent-bright)}
.field select{appearance:none;cursor:pointer}
.field option{background:var(--deep-2);color:var(--on-deep)}
.form-note{margin:0;font-size:14px;color:var(--on-deep-2)}
.form-ok{margin:0;padding:15px 17px;border:1px solid rgba(34,182,214,.5);background:rgba(34,182,214,.12);border-radius:10px;font-size:15px}
.form-ok a{color:var(--accent-bright)}

.contact-rows{margin-top:52px;border-top:1px solid var(--line-deep);padding-top:28px}
.contact-rows p{display:flex;gap:18px;align-items:baseline;margin:0 0 10px;font-size:16px}
.contact-rows .lbl{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-2);min-width:104px}
.contact-rows a{color:var(--accent-bright);text-decoration:none}
.contact-rows a:hover{color:#fff}

/* ---------- the dock: always one thumb away on a phone ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:99;
  display:none;gap:10px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 -1px 0 var(--line),0 -10px 30px rgba(12,32,41,.10);
  transform:translateY(0);
  transition:transform .45s var(--ease),opacity .35s var(--ease);
}
.dock.away{transform:translateY(115%);opacity:0;pointer-events:none}
.dock a{
  flex:1 1 0;min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:100px;text-decoration:none;
  font-family:var(--font);font-size:15.5px;font-weight:500;
}
.dock .dock-primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.dock .dock-wa{background:transparent;color:var(--accent);border:1px solid var(--line-strong)}
.dock .dock-wa::before{
  content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6a11 11 0 0 1-4.2-3.9c-.3-.5-.7-1.2-.7-2s.4-1.2.6-1.4c.2-.2.4-.3.6-.3h.4c.2 0 .4 0 .6.4l.7 1.7c.1.2 0 .4-.1.5l-.3.4c-.1.1-.2.3-.1.5.2.4.7 1.1 1.3 1.6.7.6 1.3.8 1.6.9.2.1.4 0 .5-.1l.6-.7c.2-.2.3-.1.5-.1l1.6.8c.2.1.3.2.4.3 0 .1 0 .6-.2 1.2Z'/%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'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6a11 11 0 0 1-4.2-3.9c-.3-.5-.7-1.2-.7-2s.4-1.2.6-1.4c.2-.2.4-.3.6-.3h.4c.2 0 .4 0 .6.4l.7 1.7c.1.2 0 .4-.1.5l-.3.4c-.1.1-.2.3-.1.5.2.4.7 1.1 1.3 1.6.7.6 1.3.8 1.6.9.2.1.4 0 .5-.1l.6-.7c.2-.2.3-.1.5-.1l1.6.8c.2.1.3.2.4.3 0 .1 0 .6-.2 1.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:820px){
  .dock{display:flex}
  .footer{padding-bottom:calc(62px + 78px)}
}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2;background:var(--deep);color:var(--on-deep);padding:54px 0 62px}
.foot{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}


.footer .small{color:var(--on-deep-2);max-width:40ch}
.footer a{color:var(--accent-bright);text-decoration:none}
.footer a:hover{color:#fff}

/* ============================================================
   THE WORK PAGE
   ============================================================ */
.page-work{padding-top:0}
.page-head{
  position:relative;z-index:2;
  padding:clamp(120px,17vh,180px) 0 clamp(48px,7vh,72px);
  background:var(--canvas);
}
/* 48-60px on desktop and 32-38px on a phone, which is the brief's scale and
   not the 80px this was. The size was also the real cause of two legibility
   failures: an 80px heading of two lines reached 91% of the way up the hero,
   into the part of the scrim that is nearly transparent by design, so no
   amount of strengthening the middle stops could reach it. At 56px the same
   heading sits inside the band the scrim was built for. Weight 600 rather
   than 400, because Poppins at 400 is too light to carry a headline. */
.h1{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(32px,4.6vw,58px);line-height:1.1;letter-spacing:-.02em;
  max-width:18ch;
}
.page-head .kicker .num{
  color:var(--accent);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
}
.proj-n{
  margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--accent);
}
.on-deep .proj-n,.warm .proj-n{color:var(--accent-bright)}
.proj .h2{max-width:16ch}

.gal{
  display:grid;gap:14px;grid-template-columns:repeat(4,1fr);
  padding:44px var(--gut) 0;max-width:1560px;margin:0 auto;
}
.gal .shot{grid-column:span 1}
.gal .shot.wide{grid-column:span 2}
.gal .shot img{aspect-ratio:4/3}
.gal .shot.wide img{aspect-ratio:16/10}
.sand .gal .shot img{aspect-ratio:3/4}

.center-block{text-align:center}
.center-block .h2,.center-block .lede{margin-left:auto;margin-right:auto}
.center-block .settle-cta{justify-content:center;opacity:1;transform:none;margin-top:34px}
/* the WhatsApp link's own top margin (for when it stands alone under text)
   pushed it 22px down in this row, and the row stretched the quote button to
   match, leaving its label at the top: same height, same line, centred */
.settle-cta{align-items:center}
.settle-cta .wa-wide{margin-top:0;padding-top:15px;padding-bottom:15px}

@media (max-width:1080px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .shot.wide{grid-column:span 2}
}
@media (max-width:640px){
  .gal{grid-template-columns:1fr}
  .gal .shot,.gal .shot.wide{grid-column:span 1}
}

/* ============================================================
   THE PAGE'S OWN LIFE
   Transform and opacity only. Paused off screen. Off entirely
   under reduced motion.
   ============================================================ */

/* headings rise word by word */
.hw{
  display:inline-block;white-space:pre;
  padding:.02em 0 .14em;
  opacity:0;transform:translateY(.42em);
  transition:opacity .7s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 45ms);
}
.lit .hw{opacity:1;transform:none}
/* retire the per-word delay once it has played, so nothing lags later */
.lit.done .hw{transition-delay:0s !important}

/* photos unveil from the bottom instead of fading */
.reveal .shot{
  clip-path:inset(0 0 18% 0 round 14px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),clip-path .6s var(--ease-out);
}
.reveal.in .shot{clip-path:inset(0 0 0 0 round 14px)}

/* whisper-level parallax */
[data-par]{transform:translate3d(0,var(--par,0px),0);will-change:transform}


/* one living element per section, at whisper level, paused off screen */
.sec.alt::before,.sec.sand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 40% at 24% 16%, rgba(34,182,214,.10) 0%, rgba(34,182,214,0) 72%);
}
.sec.alt.vis::before,.sec.sand.vis::before{animation:caustic 84s var(--ease-soft) -20s infinite alternate}
.sec.sand::before{background:radial-gradient(58% 40% at 24% 16%, rgba(196,146,74,.12) 0%, rgba(196,146,74,0) 72%)}

.sec.on-deep::before,.sec.warm::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 22% 18%, rgba(34,182,214,.10) 0%, rgba(34,182,214,0) 70%),
    radial-gradient(50% 36% at 78% 76%, rgba(34,182,214,.07) 0%, rgba(34,182,214,0) 70%);
  opacity:.9;
}
.sec.on-deep.vis::before,.sec.warm.vis::before{
  animation:caustic 72s var(--ease-soft) -14s infinite alternate;
}
@keyframes caustic{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(2.5%,-3%,0) scale(1.1)}
}
.sec.warm::before{
  background:
    radial-gradient(58% 40% at 26% 20%, rgba(233,200,146,.10) 0%, rgba(233,200,146,0) 70%),
    radial-gradient(48% 34% at 76% 78%, rgba(233,200,146,.07) 0%, rgba(233,200,146,0) 70%);
}
.sec > *{position:relative}

/* the dealer badge breathes */
.badge{position:relative}
.badge::after{
  content:"";position:absolute;inset:-1px;border-radius:100px;
  box-shadow:0 0 0 1px var(--accent-bright),0 0 18px rgba(34,182,214,.45);
  opacity:0;
}
.on-deep .vis .badge::after,.sec.vis .badge::after{animation:badgePulse 6.5s var(--ease-soft) -2s infinite}
@keyframes badgePulse{0%,100%{opacity:0}50%{opacity:.5}}

/* ============================================================
   ENTRANCES
   ============================================================ */
/* Faster, and less of it. 0.9s with 26px of travel and a 90ms step meant
   the last card in a row of four arrived 1.17s after the first; a reader
   scrolling at any speed had already passed it. 0.42s, 14px, 45ms. */
.reveal .part{opacity:0;transform:translateY(14px);transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)}
.reveal.in .part{opacity:1;transform:none}
.reveal.in .part:nth-child(1){transition-delay:0s}
.reveal.in .part:nth-child(2){transition-delay:.045s}
.reveal.in .part:nth-child(3){transition-delay:.090s}
.reveal.in .part:nth-child(4){transition-delay:.135s}
.reveal.in .part:nth-child(5){transition-delay:.180s}
.reveal.in .part:nth-child(6){transition-delay:.225s}
.reveal.in .part:nth-child(7){transition-delay:.270s}
.reveal.in .part:nth-child(8){transition-delay:.315s}
.reveal.in.settled .part:nth-child(n){transition-delay:0s !important}

/* nothing animates while the tab is hidden */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   THE FIVE STATIC-HERO GATES
   These five strings must match site.js character for character.
   ============================================================ */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px){ .hero{display:none} .static-hero{display:block} }
@media (prefers-reduced-motion: reduce){ .hero{display:none} .static-hero{display:block} }
/* Data Saver, or a link the browser calls 2g. The class is set in the <head>
   before the first paint, so the video hero is never shown and then taken
   away, and site.js reads the same class and never starts the fetch. The
   still hero is the same photograph, the same words and the same two
   buttons: nothing is lost but the download.
   prefers-reduced-data is the standards-track way to ask the same question,
   and costs nothing to honour where a browser supports it. */
@media (prefers-reduced-data: reduce){ .hero{display:none} .static-hero{display:block} }
html.lowdata .hero{display:none}
html.lowdata .static-hero{display:block}
/* and the still hero's own photograph, at a size a phone can use */
@media (max-width:900px){
  .static-media{background-image:url("img/static-hero-800w.jpg")}
}

@media (max-height:560px){ .cue,.ring{display:none} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sauna-grid{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:repeat(4,1fr)}
  .strip .shot.wide,.strip .shot:not(.wide){grid-column:span 2}
  .depth{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .btn,.wa,.lang,.faq summary,.chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .faq summary{justify-content:flex-start}
  .btn-wide{display:flex}
  .wa{justify-content:flex-start}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important;
  }
  body{opacity:1;animation:none}
  .reveal .part{opacity:1;transform:none}
  .env,.waterline::after{animation:none}
  .waterline::after{opacity:.5}
  .cue{display:none}
  .ring{transform:translateX(-50%) rotate(-90deg)}
  .settle-sub,.settle-cta{opacity:1;transform:none}
  /* the page's own life, switched off completely but shown finished */
  .hw{opacity:1;transform:none}
  .reveal .shot,.reveal.in .shot{clip-path:none}
  [data-par]{transform:none}
  .rail .rail-line{stroke-dashoffset:0}
  .rail .rail-tick{opacity:1}
  .sec.on-deep::before,.sec.warm::before,.sec.on-deep.vis::before,.sec.warm.vis::before{animation:none}
  .badge::after{animation:none;opacity:0}
}


/* ---------- the drawn underline, a 21Oaks-style hand mark ---------- */
.underline{
  display:block;width:min(360px,62%);height:18px;margin:14px 0 0;overflow:visible;
}
.underline path{
  fill:none;stroke:var(--accent-bright);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0));
}
.center-block .underline{margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion: reduce){ .underline path{stroke-dashoffset:0} }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.zoomable{cursor:zoom-in;position:relative}
.zoomable::after{
  content:"";position:absolute;right:12px;top:12px;
  width:34px;height:34px;border-radius:50%;
  background:rgba(8,24,32,.55) center/15px 15px no-repeat;
  backdrop-filter:blur(6px);
  -webkit-mask:none;
  opacity:0;transform:scale(.9);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 3H3v6M15 21h6v-6M21 9V3h-6M3 15v6h6'/%3E%3C/svg%3E");
  pointer-events:none;
}
.zoomable:hover::after,.zoomable:focus-visible::after{opacity:1;transform:scale(1)}
.care-media.zoomable::after{right:14px;top:14px}

body.lb-open{overflow:hidden}

/* display:flex on a class beats the browser's own [hidden]{display:none},
   which would leave this invisible overlay swallowing every click on the page */
.lb[hidden]{display:none}
.lb{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(5,14,20,.94);
  backdrop-filter:blur(8px);
  opacity:0;transition:opacity .26s var(--ease);
}
.lb.on{opacity:1}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-fig img{
  max-width:100%;max-height:82vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.5);
  transform:scale(.97);transition:transform .32s var(--ease);
}
.lb.on .lb-fig img{transform:scale(1)}
.lb-fig figcaption{
  color:var(--on-deep);font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;
  text-align:center;max-width:60ch;
}
.lb-count{
  position:absolute;left:0;right:0;bottom:clamp(14px,3vh,26px);margin:0;
  text-align:center;color:var(--on-deep-2);font-size:13px;letter-spacing:.14em;
}
.lb-close,.lb-nav{
  position:absolute;border:1px solid rgba(234,243,246,.28);
  background:rgba(234,243,246,.06);
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.lb-close:hover,.lb-nav:hover{background:rgba(234,243,246,.16);border-color:rgba(234,243,246,.5)}
.lb-close{top:clamp(14px,3vh,28px);right:clamp(14px,3vw,28px)}
.lb-close::before,.lb-close::after{
  content:"";position:absolute;left:17px;top:25px;width:18px;height:1.5px;background:var(--on-deep);
}
.lb-close::before{transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-nav{top:50%;margin-top:-26px}
.lb-prev{left:clamp(10px,2vw,28px)}
.lb-next{right:clamp(10px,2vw,28px)}
.lb-nav::before{
  content:"";position:absolute;top:50%;width:11px;height:11px;margin-top:-5.5px;
  border-right:1.5px solid var(--on-deep);border-top:1.5px solid var(--on-deep);
}
.lb-prev::before{left:22px;transform:rotate(-135deg)}
.lb-next::before{right:22px;transform:rotate(45deg)}
.lb-prev:hover{transform:translateX(-3px)}
.lb-next:hover{transform:translateX(3px)}

@media (max-width:640px){
  .lb-nav{width:46px;height:46px;margin-top:-23px}
  .lb-close{width:46px;height:46px}
  .lb-close::before,.lb-close::after{left:14px;top:22px;width:17px}
  .lb-fig img{max-height:72vh}
  .lb-fig figcaption{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .lb,.lb-fig img{transition:none}
  .lb-fig img{transform:none}
  .zoomable::after{opacity:1;transform:none}
}

/* ============================================================
   THE SHOP
   ============================================================ */
.page-shop .page-head{padding-bottom:clamp(28px,4vh,44px)}

/* clears the floating nav pill: at top:0 the bar parks underneath it and the
   search field disappears the moment you scroll */
.page-shop{--stick:82px}
@media (max-width:900px){.page-shop{--stick:96px}}
.filterbar{
  position:sticky;top:var(--stick,0);z-index:60;
  background:rgba(245,248,250,.94);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
  padding:14px 0 15px;
}
.filters{
  display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font);font-size:14px;font-weight:500;
  color:var(--text-secondary);
  background:transparent;border:1px solid var(--line-strong);
  border-radius:100px;padding:9px 15px;
  transition:color .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease);
}
.chip span{
  font-size:11.5px;font-weight:500;color:var(--text-secondary);
  background:rgba(12,32,41,.07);border-radius:100px;padding:2px 7px;
  transition:background .28s var(--ease),color .28s var(--ease);
}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.on span{background:rgba(255,255,255,.22);color:#fff}

.shop-sec{padding-top:clamp(44px,6vh,72px)}
.shop-grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.pcard{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.pcard[hidden]{display:none}
/* --pbg is set only on the Aiper press shots, whose own background was
   measured by aiperimg.py: half are cut-outs on white and half are shot on
   black, and a black one on a white card reads as a broken image. Everything
   else falls back to the white it always had. */
.pcard-media{margin:0;background:var(--pbg,#fff);border-bottom:1px solid var(--line)}
.pcard-media img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:14px;background:var(--pbg,#fff)}
.pcard-nomedia{
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(135deg,var(--canvas-alt) 0 10px,rgba(231,239,244,.55) 10px 20px);
}
.pcard-body{display:flex;flex-direction:column;flex:1 1 auto;padding:20px 20px 22px}
.pcard-brand{
  margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);
}
.pcard-name{
  margin:0 0 10px;font-family:var(--display);font-weight:400;
  font-size:22px;line-height:1.15;letter-spacing:-.012em;
}
/* the card is a preview: the sheet carries the full text and every spec, so
   trimming here keeps a row of cards close to the same height */
.pcard-desc{
  margin:0 0 14px;color:var(--text-secondary);font-size:15px;line-height:1.6;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  overflow:hidden;
}
.pcard-specs{list-style:none;margin:0 0 18px;padding:0}
.pcard-specs li:nth-child(n+4){display:none}
.pcard-specs li{
  position:relative;padding:5px 0 5px 16px;
  font-size:14px;color:var(--text-secondary);line-height:1.5;
}
.pcard-specs li::before{
  content:"";position:absolute;left:0;top:12px;
  width:5px;height:5px;border-radius:50%;background:var(--accent-muted);
}
.pcard-cta{margin-top:auto;align-self:flex-start}

.shop-empty{
  text-align:center;color:var(--text-secondary);
  padding:60px var(--gut);margin:0;font-size:17px;
}
.shop-foot{margin-top:clamp(56px,8vh,90px)}
.shop-foot .lede{margin-bottom:26px}

@media (max-width:640px){
  .shop-grid{grid-template-columns:1fr 1fr;gap:14px}
  .pcard-body{padding:15px 15px 17px}
  .pcard-name{font-size:18px}
  .pcard-desc{font-size:13.5px;margin-bottom:10px}
  .pcard-specs{display:none}
  .pcard-cta{font-size:13.5px}
  .filterbar{padding:11px 0 12px}
  .chip{font-size:13px;padding:8px 14px;min-height:44px}
}
@media (max-width:380px){
  .shop-grid{grid-template-columns:1fr}
}

/* ---------- the search field ---------- */
.searchrow{display:flex;align-items:center;gap:16px;padding-bottom:12px}
.search{position:relative;flex:1 1 auto;max-width:460px}
.search-ico{
  position:absolute;left:15px;top:50%;margin-top:-8px;
  width:16px;height:16px;pointer-events:none;background:var(--text-secondary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%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='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background .3s var(--ease);
}
.search:focus-within .search-ico{background:var(--accent)}
.search-input{
  width:100%;font-family:var(--font);font-size:15px;color:var(--text-primary);
  background:var(--panel);border:1px solid var(--line-strong);border-radius:100px;
  padding:12px 52px 12px 42px;-webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.search-input::placeholder{color:var(--text-secondary);opacity:.9}
.search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
/* the browser's own clear affordance would sit beside ours */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.search-clear{
  position:absolute;right:4px;top:50%;margin-top:-22px;
  width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;
}
.search-clear[hidden]{display:none}
.search-clear::before,.search-clear::after{
  content:"";position:absolute;left:16px;top:21px;width:13px;height:1.5px;
  background:var(--text-secondary);transition:background .25s var(--ease);
}
.search-clear::before{transform:rotate(45deg)}
.search-clear::after{transform:rotate(-45deg)}
.search-clear:hover::before,.search-clear:hover::after{background:var(--ink)}
.search-count{
  margin:0;flex:0 0 auto;font-size:12.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);
}

/* ---------- the card opens ---------- */
.pcard{position:relative}
.pcard-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard-cta{margin-top:0;position:relative;z-index:2}
.pcard-more{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font);font-size:13.5px;font-weight:500;
  color:var(--text-secondary);background:transparent;border:0;padding:4px 0;cursor:pointer;
  transition:color .28s var(--ease);
}
/* the whole card is this one button's hit area, so the photo, the name and the
   body all open the detail; the WhatsApp link rides above it on z-index */
.pcard-more::after{content:"";position:absolute;inset:0;z-index:1;border-radius:14px}
.pcard-more-ar{
  width:13px;height:10px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.6 1.6 14 6l-4.4 4.4'/%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 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.6 1.6 14 6l-4.4 4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.pcard:hover .pcard-more{color:var(--ink)}
.pcard:hover .pcard-more-ar{transform:translateX(3px)}
.pcard-more:focus-visible{outline:none}
.pcard-more:focus-visible::after{outline:2px solid var(--accent);outline-offset:3px}

.shop-empty{text-align:center;padding:60px var(--gut);margin:0}
.shop-empty p{margin:0 0 20px;color:var(--text-secondary);font-size:17px}

/* ---------- the product sheet ---------- */
body.pdet-open{overflow:hidden}
.pdet[hidden]{display:none}
.pdet{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vh,40px) clamp(12px,3vw,40px);
  opacity:0;transition:opacity .34s var(--ease);
}
.pdet.on{opacity:1}
.pdet-back{position:absolute;inset:0;background:rgba(6,18,25,.62);backdrop-filter:blur(6px)}
.pdet-sheet{
  position:relative;z-index:1;width:min(1000px,100%);max-height:100%;
  display:flex;flex-direction:column;
  background:var(--panel);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 90px rgba(4,16,22,.42);
  transform:translateY(18px) scale(.985);
  transition:transform .44s var(--ease);
}
.pdet.on .pdet-sheet{transform:none}
.pdet-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.pdet-media{
  margin:0;padding:26px;background:#fff;border-right:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.pdet-media img{width:100%;height:auto;max-height:58vh;object-fit:contain}
.pdet-media img.sm{width:auto;max-width:100%}
.pdet-media.is-empty{
  background:repeating-linear-gradient(135deg,var(--canvas-alt) 0 10px,rgba(231,239,244,.55) 10px 20px);
  min-height:220px;
}
.pdet-media.is-empty img{display:none}
.pdet-body{padding:clamp(24px,3vw,38px)}
.pdet-cat{
  margin:0 0 16px;font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);
}
.pdet-brand{
  margin:0 0 6px;font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
}
.pdet-brand:empty{display:none}
.pdet-name{
  margin:0 0 14px;font-family:var(--display);font-weight:400;
  font-size:clamp(27px,3.2vw,37px);line-height:1.08;letter-spacing:-.015em;
}
.pdet-desc{margin:0 0 24px;color:var(--text-secondary);font-size:16px;line-height:1.7}
.pdet-specs{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line)}
.pdet-specs:empty{display:none}
.pdet-specs li{
  position:relative;padding:11px 0 11px 18px;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--text-primary);line-height:1.5;
}
.pdet-specs li::before{
  content:"";position:absolute;left:0;top:18px;
  width:5px;height:5px;border-radius:50%;background:var(--accent-muted);
}
.pdet-cta{font-size:15.5px}
.pdet-note{margin:14px 0 0;max-width:40ch;font-size:12.5px;line-height:1.6;color:var(--text-secondary)}
.pdet-close{
  position:absolute;z-index:3;top:12px;right:12px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--line);cursor:pointer;
  transition:background .25s var(--ease),transform .35s var(--ease);
}
.pdet-close:hover{background:#fff;transform:rotate(90deg)}
.pdet-close::before,.pdet-close::after{
  content:"";position:absolute;left:14px;top:21px;width:16px;height:1.6px;background:var(--ink);
}
.pdet-close::before{transform:rotate(45deg)}
.pdet-close::after{transform:rotate(-45deg)}
.pdet-steps{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:18px;
  padding:11px;border-top:1px solid var(--line);background:var(--canvas);
}
.pdet-count{
  min-width:92px;text-align:center;font-size:12.5px;letter-spacing:.07em;
  color:var(--text-secondary);
}
.pdet-nav{
  position:relative;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);background:transparent;cursor:pointer;
  transition:border-color .28s var(--ease),background .28s var(--ease);
}
.pdet-nav:hover:not(:disabled){border-color:var(--ink);background:rgba(12,32,41,.05)}
.pdet-nav:disabled{opacity:.32;cursor:default}
.pdet-nav::before{
  content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;
  border-right:1.6px solid var(--text-secondary);border-bottom:1.6px solid var(--text-secondary);
}
.pdet-prev::before{left:19px;transform:rotate(135deg)}
.pdet-next::before{right:19px;transform:rotate(-45deg)}

@media (max-width:820px){
  .pdet{padding:0;align-items:flex-end}
  .pdet-sheet{width:100%;max-height:92vh;border-radius:18px 18px 0 0;transform:translateY(32px)}
  .pdet-grid{grid-template-columns:1fr}
  .pdet-media{border-right:0;border-bottom:1px solid var(--line);padding:18px}
  .pdet-media img{max-height:32vh}
  .pdet-desc{font-size:15px}
  .pdet-close{top:10px;right:10px}
}
@media (max-width:560px){
  .searchrow{flex-wrap:wrap;gap:6px;padding-bottom:9px}
  .search{flex:1 1 100%;max-width:none}
  .search-input{padding-top:11px;padding-bottom:11px}
  .search-count{display:none;width:100%;font-size:11.5px}
  .filterbar.searching .search-count{display:block}
}
@media (max-width:640px){
  .pcard-actions{flex-direction:column;align-items:flex-start;gap:4px}
}
@media (pointer:coarse){
  .pcard-more{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .pdet,.pdet-sheet,.pcard-more-ar,.search-ico,.pdet-close{transition:none}
  .pdet-sheet{transform:none}
}

/* ---------- the social row in the footer ---------- */
.social{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 0;padding:0}
.footer .social a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--on-deep-2);text-decoration:none;
  transition:color .28s var(--ease);
}
.footer .social a:hover{color:#fff}
.social svg{flex:0 0 auto}
@media (pointer:coarse){
  .social a{min-height:44px}
}

/* ============================================================
   CONTENT PAGES: breadcrumbs, prose, process, tables, related.
   For the service, product, location and knowledge pages.
   Reuses the existing tokens; introduces no new colours.
   ============================================================ */

/* ---------- breadcrumb trail ---------- */
.crumbs{
  position:relative;z-index:2;background:var(--canvas);
  padding:clamp(104px,15vh,150px) 0 0;
}
/* Two selectors because the trail sits in two places: before <main> on the
   generated pages, and inside it on the hand-written ones. Without the second,
   the page head keeps its full nav-clearance padding and leaves a hole. */
.crumbs + .page-head,
.crumbs + main .page-head{padding-top:clamp(18px,3vh,30px)}
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12.5px;color:var(--text-secondary);
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{
  content:"";width:5px;height:5px;flex:0 0 auto;
  border-right:1.4px solid var(--line-strong);border-bottom:1.4px solid var(--line-strong);
  transform:rotate(-45deg);
}
.crumbs a{color:var(--text-secondary);text-decoration:none;transition:color .28s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--text-primary)}

/* ---------- the short answer, first thing under the H1 ---------- */
.answer{
  margin:34px 0 0;padding:24px 26px;
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:4px 14px 14px 4px;
  box-shadow:var(--shadow);
}
.answer p{margin:0;font-size:clamp(16px,1.5vw,18.5px);line-height:1.65;color:var(--text-primary);max-width:62ch}
.sec.on-deep .answer,.sec.warm .answer{background:rgba(255,255,255,.06);border-color:var(--line-deep)}
.sec.on-deep .answer p{color:var(--on-deep)}

/* ============================================================
   PAGE OPENINGS
   Four treatments, not one. Every page type used to open with the same
   kicker / H1 / bordered answer, and sixty pages sharing one rhythm read as a
   template. The short answer stays first on every page, because that is what a
   search engine or an assistant quotes; only its form changes.
   ============================================================ */

/* --- a project or the About page: the photograph leads --- */
.head-hero{
  position:relative;z-index:2;isolation:isolate;
  min-height:clamp(380px,58vh,560px);
  display:flex;align-items:flex-end;
  padding:clamp(40px,7vh,72px) 0 clamp(30px,5vh,48px);
  background:var(--deep);overflow:hidden;
}
.head-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
/* Measured, not guessed. The copy sits in the bottom half, and these
   photographs run bright there - pale stone, sky, sunlit water, with worst-case
   pixels around rgb(180). White type needs the background under it below about
   L 0.18 to clear 4.5:1, which takes roughly 0.34 alpha of near-black over
   rgb(180); the stops below hold 0.6 or more across the whole text band, for
   margin. Checked with work/heroleg.js, which hides the copy and samples the
   photograph itself. */
.head-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* The two middle stops carry more than they used to. Changing the
       display face from a serif to Poppins moved the heading onto a
       different band of these photographs, and the night villa and the
       mountain view fell to 2.20:1 and 2.66:1 against a floor of 3.0 -- the
       same failure mode the note below this one records from the last time
       the type changed. Worked out rather than nudged: white needs the
       ground under it at about L 0.30 for 3:1, the worst pixel measured
       L 0.427, and (1-a) has to fall by that ratio, which puts .78 at about
       .85. Re-measured after: 3.31 and 3.71. */
    linear-gradient(to top,
      rgba(4,13,20,.96) 0%,rgba(4,13,20,.92) 30%,rgba(4,13,20,.86) 55%,
      rgba(4,13,20,.70) 72%,rgba(4,13,20,.30) 88%,rgba(4,13,20,0) 100%),
    linear-gradient(105deg,rgba(4,13,20,.55) 0%,rgba(4,13,20,.22) 48%,rgba(4,13,20,0) 80%);
}
/* the bright cyan accent cannot hold on a pale photograph: it measured 1.0
   against sunlit stone. On a hero head the kicker goes white. */
.head-hero .kicker,.head-hero .kicker .num{color:#fff;opacity:.86}

/* On a phone the head is short, so the heading sits high in the frame where
   the scrim is weakest. That was measured at 3.40:1 before the type changed
   and 2.94:1 after, because the sans above it sets to a different depth and
   moved the heading onto a paler part of the photograph. The floor for large
   text is 3.0, so the scrim carries more weight at the top on narrow screens
   rather than the heading being nudged around per photo. */
@media (max-width:820px){
  .head-hero::after{
    background:
      linear-gradient(to top,
        rgba(4,13,20,.96) 0%,rgba(4,13,20,.92) 30%,rgba(4,13,20,.84) 55%,
        rgba(4,13,20,.72) 72%,rgba(4,13,20,.52) 88%,rgba(4,13,20,.34) 100%),
      linear-gradient(105deg,rgba(4,13,20,.55) 0%,rgba(4,13,20,.22) 48%,rgba(4,13,20,0) 80%);
  }
}
.head-hero .h1{color:#fff;text-shadow:0 1px 3px rgba(4,10,14,.5),0 8px 34px rgba(4,10,14,.45)}
.head-hero .standfirst{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(4,10,14,.55)}
.crumbs + .head-hero{margin-top:14px}

/* --- a service: the title and the picture share the row --- */
.head-split{
  position:relative;z-index:2;background:var(--canvas);
  padding:clamp(18px,3vh,32px) 0 clamp(46px,7vh,76px);
}
.head-split .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,60px);align-items:center;
}
.head-split-media{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--canvas-alt)}
.head-split-media img{width:100%;height:100%;object-fit:cover;display:block}

/* --- a category or a place: no picture, no box, straight to it --- */
.head-lean{
  position:relative;z-index:2;background:var(--canvas);
  padding:clamp(18px,3vh,34px) 0 clamp(34px,5vh,52px);
}

/* the short answer, as type rather than as a card */
.standfirst{
  margin:22px 0 0;max-width:60ch;
  font-size:clamp(17px,1.75vw,21px);line-height:1.6;color:var(--text-secondary);
}
.head-hero .standfirst{max-width:54ch}

@media (max-width:820px){
  .head-split .wrap{grid-template-columns:1fr;gap:24px}
  .head-split-media{order:-1;aspect-ratio:16/10}
  .head-hero{min-height:clamp(320px,52vh,440px)}
}
@media (prefers-reduced-motion:reduce){
  .head-hero img{transition:none}
}

/* ---------- long-form body copy ---------- */
.prose{max-width:760px}
.prose > * + *{margin-top:22px}
.prose h2{
  margin:clamp(46px,7vh,72px) 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(25px,3vw,36px);line-height:1.12;letter-spacing:-.014em;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  margin:clamp(30px,4vh,44px) 0 0;font-family:var(--font);font-weight:600;
  font-size:clamp(17px,1.8vw,20px);letter-spacing:-.005em;
}
.prose p{color:var(--text-secondary);font-size:16.5px;line-height:1.72;max-width:68ch}
.prose strong{color:var(--text-primary);font-weight:500}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent-hover)}
.prose ul,.prose ol{margin:22px 0 0;padding:0;list-style:none;max-width:68ch}
.prose ul li,.prose ol li{
  position:relative;padding:9px 0 9px 24px;
  color:var(--text-secondary);font-size:16px;line-height:1.6;
  border-bottom:1px solid var(--line);
}
.prose ul li::before{
  content:"";position:absolute;left:2px;top:18px;
  width:6px;height:6px;border-radius:50%;background:var(--accent-muted);
}
.prose ol{counter-reset:pr}
.prose ol li{counter-increment:pr;padding-left:34px}
.prose ol li::before{
  content:counter(pr);position:absolute;left:0;top:9px;
  font-size:12px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;
}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;margin-top:24px;-webkit-overflow-scrolling:touch}
.ctable{border-collapse:collapse;width:100%;min-width:420px;font-size:15.5px}
.ctable caption{text-align:left;padding-bottom:10px;color:var(--text-secondary);font-size:13px}
.ctable th,.ctable td{
  text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.5;
}
.ctable thead th{
  font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);border-bottom-color:var(--line-strong);
}
.ctable tbody th{font-weight:500;color:var(--text-primary);padding-right:28px}
.ctable td{color:var(--text-secondary)}

/* ---------- numbered process ---------- */
.process{list-style:none;margin:44px 0 0;padding:0;counter-reset:st}
.process li{
  counter-increment:st;position:relative;
  padding:26px 0 26px 62px;border-top:1px solid var(--line);
}
.process li:last-child{border-bottom:1px solid var(--line)}
.process li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:27px;
  font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.process h3{margin:0 0 7px;font-family:var(--font);font-weight:600;font-size:17px;letter-spacing:-.005em}
.process p{margin:0;color:var(--text-secondary);font-size:15.5px;line-height:1.62;max-width:62ch}

/* ---------- related links ---------- */
.related{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.related a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 19px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  color:var(--text-primary);text-decoration:none;font-size:15.5px;font-weight:500;
  box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.related a::after{
  content:"";width:13px;height:10px;flex:0 0 auto;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.6 1.6 14 6l-4.4 4.4'/%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 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.6 1.6 14 6l-4.4 4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.related a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--accent)}
.related a:hover::after{transform:translateX(3px)}


/* ============================================================
   THE FOUR WAYS IN
   Wide split panels, two by two: copy on one side, a photograph on the
   other. The reference site's product panels are the model -- a pale
   surface, a generous radius, quiet framing, and the shadow arriving on
   hover rather than sitting there all the time.
   ============================================================ */
.ftiles{
  list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
.ftile{
  position:relative;display:grid;grid-template-columns:1fr .9fr;
  align-items:stretch;
  background:var(--canvas-alt);border-radius:var(--radius-card);
  overflow:hidden;min-height:320px;
  transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out);
}
.ftile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.ftile-body{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(24px,2.4vw,34px);
}
.ftile-label{
  margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
}
.ftile-title{
  margin:0 0 10px;font-weight:600;font-size:clamp(21px,1.9vw,27px);
  line-height:1.16;letter-spacing:-.02em;color:var(--text-primary);
}
.ftile-title a{color:inherit;text-decoration:none}
/* the whole panel opens the first destination; the smaller links inside sit
   above that layer so they stay clickable in their own right */
.ftile-title a::after{content:"";position:absolute;inset:0;z-index:1}
/* three lines, so four panels of different sentence lengths still make two
   even rows rather than one tall panel dragging its neighbour with it */
.ftile-text{
  margin:0 0 14px;color:var(--text-secondary);font-size:15.5px;line-height:1.6;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  overflow:hidden;
}
.ftile-also{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px 16px;position:relative;z-index:2}
.ftile-also a{
  font-size:13.5px;font-weight:500;color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-muted);padding-bottom:1px;
  transition:border-color .2s var(--ease-out);
}
.ftile-also a:hover{border-color:var(--accent)}
.ftile-go{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:24px;
  font-size:14px;font-weight:600;color:var(--accent);
}
.ftile-go::after{
  content:"";width:16px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.6 1.6 14 6l-4.4 4.4'/%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 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.6 1.6 14 6l-4.4 4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s var(--ease-out);
}
.ftile:hover .ftile-go::after{transform:translateX(3px)}
.ftile-media{margin:0;overflow:hidden;background:var(--canvas-alt)}
.ftile-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .26s var(--ease-out);
}
.ftile:hover .ftile-media img{transform:scale(1.06)}
/* a cut-out on transparency is fitted, never cropped */
.ftile-media.contain{background:var(--panel);display:grid;place-items:center;padding:18px}
.ftile-media.contain img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

@media (max-width:900px){
  .ftiles{grid-template-columns:1fr;gap:16px}
  /* image first on a phone, as the reference does below its own breakpoint */
  .ftile{grid-template-columns:1fr;min-height:0}
  .ftile-media{order:-1;aspect-ratio:16/9}
  .ftile-media.contain{aspect-ratio:16/10}
  .ftile-body{padding:20px 20px 22px}
}
@media (prefers-reduced-motion:reduce){
  .ftile,.ftile-media img,.ftile-go::after{transition:none}
  .ftile:hover{transform:none}
  .ftile:hover .ftile-media img{transform:none}
}

/* ---------- an index of cards ---------- */
.tiles{
  list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;
  display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.tile{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.tile-media{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--canvas-alt)}
.tile-media img{width:100%;height:100%;object-fit:cover;display:block}
.tile-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1 1 auto}
.tile h2,.tile h3{
  margin:0 0 10px;font-family:var(--display);font-weight:400;
  font-size:23px;line-height:1.14;letter-spacing:-.012em;
}
.tile h2 a,.tile h3 a{color:inherit;text-decoration:none}
/* the whole tile is the link target, so the card is one hit area */
.tile h2 a::after,.tile h3 a::after{content:"";position:absolute;inset:0}
.tile p{margin:0 0 16px;color:var(--text-secondary);font-size:15px;line-height:1.6}
.tile .tile-go{
  margin-top:auto;font-size:13.5px;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;
}





/* ---------- three projects, each opening its case study ---------- */
.jobs{
  list-style:none;margin:clamp(36px,5vh,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.job{
  background:var(--panel);border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out);
}
.job:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.job-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.job-media{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--canvas-alt)}
.job-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s var(--ease-out);
}
.job:hover .job-media img{transform:scale(1.05)}
.job-body{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 24px 24px}
.job-name{
  margin:0 0 8px;font-weight:600;font-size:20px;line-height:1.18;letter-spacing:-.015em;
  color:var(--text-primary);
}
.job-text{
  margin:0 0 16px;color:var(--text-secondary);font-size:14.5px;line-height:1.55;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.job-go{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:24px;
  font-size:14px;font-weight:600;color:var(--accent);
}
.job-go::after{
  content:"";width:16px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.6 1.6 14 6l-4.4 4.4'/%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 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.6 1.6 14 6l-4.4 4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s var(--ease-out);
}
.job:hover .job-go::after{transform:translateX(3px)}
.jobs-all{margin:clamp(28px,4vh,40px) 0 0}

@media (max-width:900px){
  .jobs{grid-template-columns:1fr;gap:14px}
  /* on a phone the card turns on its side, the way the service cards do, so
     three projects are one screen rather than three */
  .job-link{flex-direction:row;align-items:stretch}
  .job-media{flex:0 0 clamp(122px,30vw,200px);aspect-ratio:auto}
  .job-body{padding:14px 16px;min-width:0}
  .job-name{font-size:17px;margin-bottom:5px}
  .job-text{font-size:13.5px;line-height:1.45;-webkit-line-clamp:2;line-clamp:2;margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .job,.job-media img,.job-go::after{transition:none}
  .job:hover{transform:none}
  .job:hover .job-media img{transform:none}
}

/* ---------- a selection from the shop ---------- */
.picks{
  list-style:none;margin:clamp(36px,5vh,56px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
.pick{
  display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch;
  background:var(--canvas-alt);border-radius:var(--radius-card);overflow:hidden;
  position:relative;
  transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out);
}
.pick:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.pick-media{margin:0;display:grid;place-items:center;background:var(--panel);padding:16px}
.pick-media img{
  width:auto;height:auto;max-width:100%;max-height:190px;object-fit:contain;display:block;
  transition:transform .24s var(--ease-out);
}
.pick:hover .pick-media img{transform:scale(1.05)}
.pick-body{display:flex;flex-direction:column;padding:22px 24px 24px}
.pick-brand{
  margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
}
.pick-name{margin:0 0 8px;font-weight:600;font-size:19px;line-height:1.2;letter-spacing:-.015em}
.pick-name a{color:var(--text-primary);text-decoration:none}
.pick-name a:visited{color:var(--text-primary)}
.pick-name a:hover{color:var(--accent)}
/* the panel is the target; the two actions sit above it */
.pick-name a::after{content:"";position:absolute;inset:0;z-index:1}
.pick-desc{
  margin:0 0 16px;color:var(--text-secondary);font-size:14.5px;line-height:1.55;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.pick-actions{
  margin-top:auto;position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
}

.chips-h{
  margin:clamp(32px,4vh,46px) 0 14px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);
}
.chips-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips-row .chip{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:9px 16px;border-radius:var(--radius-button);
  border:1px solid var(--line);background:var(--panel);
  color:var(--text-primary);text-decoration:none;font-size:14.5px;font-weight:500;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.chips-row .chip:hover{border-color:var(--accent);color:var(--accent)}
.chips-row .chip-n{
  font-size:12px;font-weight:600;color:var(--text-secondary);
  background:var(--canvas-alt);border-radius:100px;padding:2px 8px;
}
.picks-all{margin:clamp(28px,4vh,40px) 0 0}
/* the link under the four questions, given the same air as the list it
   follows rather than sitting hard against it */
.faq-more{margin:clamp(22px,3vh,32px) 0 0}

@media (max-width:900px){
  .picks{grid-template-columns:1fr;gap:16px}
  .pick{grid-template-columns:1fr}
  .pick-media{order:-1;padding:22px}
  .pick-media img{max-height:210px}
  .pick-body{padding:18px 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  .pick,.pick-media img{transition:none}
  .pick:hover{transform:none}
  .pick:hover .pick-media img{transform:none}
}

/* ============================================================
   ELBE POOL SURFACE
   A photograph of a finished pool beside the three things ELBE state about
   the material, then the eight families as swatches. The swatches are what
   a buyer actually chooses between, so they are shown at a size a colour
   and a texture can be read at rather than as decoration.
   ============================================================ */
.elbe-top{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(24px,3.5vw,48px);align-items:center;
  margin-top:clamp(32px,5vh,52px);
}
.elbe-lead{margin:0;border-radius:var(--radius-card);overflow:hidden;background:var(--canvas)}
.elbe-lead img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.elbe-facts{list-style:none;margin:0;padding:0}
.elbe-facts li{
  position:relative;padding:12px 0 12px 28px;
  color:var(--text-secondary);font-size:15.5px;line-height:1.55;
  border-top:1px solid var(--line);
}
.elbe-facts li:first-child{border-top:0}
.elbe-facts li::before{
  content:"";position:absolute;left:2px;top:20px;
  width:9px;height:9px;border-radius:50%;border:2px solid var(--accent);
}
.elbe-facts li:first-child::before{top:14px}

.elbe-mat-h{
  margin:clamp(38px,5vh,58px) 0 18px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);
}
.mats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
}
.mat{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);overflow:hidden;
  transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out);
}
.mat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.mat-shot{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--canvas-alt)}
.mat-shot img{width:100%;height:100%;object-fit:cover;display:block}
.mat-n{
  margin:14px 16px 4px;font-weight:600;font-size:15px;letter-spacing:-.01em;
  color:var(--text-primary);
}
.mat-t{margin:0 16px 16px;color:var(--text-secondary);font-size:13.5px;line-height:1.5}
.elbe-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-top:clamp(28px,4vh,40px);
}

@media (max-width:1100px){ .mats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .elbe-top{grid-template-columns:1fr;gap:22px}
  .mats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .mat-n{margin:12px 13px 3px;font-size:14px}
  .mat-t{margin:0 13px 13px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .mat{transition:none}
  .mat:hover{transform:none}
}

/* ============================================================
   SMART POOL CARE, THE ONE DARK SECTION
   Deep ink, a wide aqua glow behind the robot and a weaker lilac one for
   depth, and a canvas of small stars behind all of it. The glows are
   gradients the browser paints once rather than fill the canvas repeats
   every frame. The section is complete without the canvas: take it away
   and the ink, the glows, the robot and the copy are all still here.
   ============================================================ */
.smart{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--night);color:#EAF3F6;
  padding:clamp(56px,8vh,96px) 0;
  min-height:clamp(520px,62vh,680px);
  display:grid;align-items:center;
}
/* The home page runs a water canvas behind the whole document and clears
   every section background so it shows through: .has-water .sec is
   transparent, and being two classes deep it beat this section's own ink.
   The one section that must not be see-through says so at the same depth. */
.has-water .sec.smart{background:var(--night)}
.smart-sky{position:absolute;inset:0;z-index:-2;pointer-events:none}
.smart-sky canvas{display:block;width:100%;height:100%}
/* the two glows, offset with the pointer by at most 6px and only where the
   starfield script found a fine pointer to read */
.smart-sky::before,.smart-sky::after{
  content:"";position:absolute;inset:0;
  transform:translate3d(var(--px,0),var(--py,0),0);
  transition:transform .5s var(--ease-out);
}
.smart-sky::before{
  background:radial-gradient(46% 54% at 30% 52%,
    rgba(30,202,211,.20) 0%,rgba(30,202,211,.10) 42%,rgba(30,202,211,0) 72%);
}
.smart-sky::after{
  background:radial-gradient(38% 44% at 72% 34%,
    rgba(148,134,247,.13) 0%,rgba(148,134,247,0) 68%);
}
.smart-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,5vw,72px);align-items:center;
}
.smart-shot{margin:0;display:grid;place-items:center}
/* Every Aiper render in this repository is opaque -- checked, not assumed:
   fifteen files, none with an alpha channel. On ink each one is a bright
   rectangle with a hard edge. This one is the dark press shot, so screen
   blending drops its near-black surround into the night and lets only the
   robot and its light come through. The mask softens what is left of the
   frame; where blending is unsupported the shot simply sits in a rounded
   panel, which is a worse picture and not a broken one. */
.smart-video{
  width:100%;max-width:520px;height:auto;display:block;
  border-radius:14px;
  /* the clip is a real scene, not a cut-out, so it keeps a frame rather than
     being screen-blended the way the opaque product renders are */
  box-shadow:0 28px 60px rgba(0,0,0,.55);
}
.smart-shot img{
  width:100%;max-width:460px;height:auto;display:block;
  border-radius:14px;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(78% 82% at 50% 50%,#000 58%,transparent 100%);
          mask-image:radial-gradient(78% 82% at 50% 50%,#000 58%,transparent 100%);
}
@supports not (mix-blend-mode:screen){
  .smart-shot img{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;
                  box-shadow:0 28px 60px rgba(0,0,0,.55)}
}
.smart .badge{background:rgba(30,202,211,.14);color:var(--brand-cyan)}
.smart .h2{color:#fff;margin-bottom:14px}
.smart .lede{color:var(--on-deep-2);margin-bottom:22px}
.smart-list{list-style:none;margin:0 0 28px;padding:0}
.smart-list li{
  position:relative;padding:9px 0 9px 28px;
  color:#D6E4EA;font-size:15.5px;line-height:1.55;
  border-top:1px solid rgba(234,243,246,.12);
}
.smart-list li:first-child{border-top:0}
.smart-list li::before{
  content:"";position:absolute;left:2px;top:17px;
  width:9px;height:9px;border-radius:50%;
  border:2px solid var(--brand-cyan);
}
.smart-list li:first-child::before{top:9px}
.smart .btn{background:var(--brand-cyan);border-color:var(--brand-cyan);color:var(--on-gradient)}
.smart .btn:hover{background:#fff;border-color:#fff;color:var(--night);box-shadow:0 12px 30px rgba(0,0,0,.4)}

@media (max-width:900px){
  .smart{min-height:0;padding:clamp(44px,6vh,64px) 0}
  .smart-grid{grid-template-columns:1fr;gap:26px}
  .smart-shot img{max-width:min(300px,62vw)}
}
@media (prefers-reduced-motion:reduce){
  .smart-sky::before,.smart-sky::after{transition:none;transform:none}
}

/* ---------- closing call to action ---------- */
.cta-band{text-align:center}
.cta-band .h2,.cta-band .lede{margin-left:auto;margin-right:auto}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}

/* ---------- footer columns ---------- */
.foot{align-items:flex-start}
.foot-id{flex:1 1 260px;max-width:340px}
.foot-col{flex:0 1 auto;min-width:150px}
.foot-h{
  margin:0 0 14px;font-family:var(--font);
  font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-deep);
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:9px}
/* the footer sets a bright link colour for the contact details; the column
   links are secondary and must stay quieter than those */
.foot-col a{font-size:13.5px;color:var(--on-deep-2);text-decoration:none;transition:color .28s var(--ease)}
.foot-col a:hover{color:#fff}
.foot-nap address{font-style:normal;display:flex;flex-direction:column;gap:5px;color:var(--on-deep-2)}
.foot-nap address a{color:var(--accent-bright);text-decoration:none}
.foot-nap address a:hover{color:#fff}
.foot-lbl{
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-deep);margin-top:9px;
}
.foot-lbl:first-child{margin-top:0}
.foot-legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-deep)}
.foot-legal .small{color:var(--on-deep-2);margin:0}

@media (max-width:900px){
  .foot{gap:30px}
  .foot-id{flex:1 1 100%;max-width:none}
  .foot-col{flex:1 1 40%}
}
@media (max-width:560px){
  .crumbs ol{font-size:12px}
  .answer{padding:20px}
  .process li{padding:22px 0 22px 46px}
  .process li::before{top:23px}
}
/* WCAG 2.2 SC 2.5.8 asks for a 24px minimum target on every pointer, not only
   on touch. These are list links rather than links inside a sentence, so the
   inline-link exemption does not cover them. */
.crumbs a,.foot-col a,.foot-nap address a,.social a,.related a,.tile-go{
  min-height:24px;display:inline-flex;align-items:center;
}
.nap dd a{min-height:24px;display:inline-flex;align-items:center}
@media (pointer:coarse){
  .crumbs a,.foot-col a,.foot-nap address a{min-height:36px}
}

/* --accent on --accent-soft measured 4.41, just under the 4.5 needed at this
   size; the darker accent clears it at 5.9 */
.badge{color:var(--accent-hover)}
@media (prefers-reduced-motion:reduce){
  .related a,.related a::after,.tile{transition:none}
}

/* ---------- the identity block under the hero ---------- */
/* Reads as an introduction rather than a full section: the cinematic hero says
   how it feels, this says plainly what the company is. */
.identity{padding:clamp(56px,9vh,96px) 0 clamp(48px,7vh,80px)}
.identity .lede{max-width:66ch}
.identity .related{margin-top:30px}
.identity + .waterline + .sec,.identity + .sec{padding-top:clamp(64px,10vh,120px)}

/* ---------- link from a section of the work page into its own page ---------- */
.proj-more{margin:26px 0 0}
.proj-note{margin:18px 0 0;color:var(--text-secondary);max-width:64ch;line-height:1.6}
/* a heading that follows a prose block inside the same section needs the same
   breathing room a prose h2 gets, or it crowds the paragraph above it */
.wrap.prose + .wrap > .h2:first-child{margin-top:clamp(46px,7vh,72px)}
/* stacked related-link groups: each group's heading clears the list above */
.related + .h2{margin-top:clamp(40px,6vh,64px)}

/* ============================================================
   SERVICE DIAGRAMS AND DEMOS
   Drawings, not photographs: there is no step-by-step photography for four of
   the five services, and a section shows what a photograph cannot anyway.
   The palette below is the trade's own materials, added only inside .scene.
   ============================================================ */
.scene,.svcov-stage,.svbot-stage,.svcparts-draw{
  --soil:#DCD3C4; --soil-2:#C6BAA6; --grass:#9CB189;
  --steel:#93A0A8; --timber:#C6A97F; --conc:#B4BEC3;
  --waterC:#5FBBDE; --waterDeep:#2E93BC;
}
.scene-svg{width:100%;height:100%;display:block;overflow:visible}
.scene-svg text{font-family:var(--font);fill:var(--text-secondary)}
.tag{font-size:17px;font-weight:500;letter-spacing:.02em;fill:var(--text-secondary)}
.nlab{font-size:14px;font-weight:500;fill:var(--text-secondary)}

/* a layer appears when the stage reaches it, and in build mode stays on */
.lay{opacity:0;transition:opacity .55s var(--ease)}
.lay.on{opacity:1}

/* ---------- earth and structure ---------- */
.soil{fill:var(--soil)}
.grass{fill:var(--grass)}
.void{fill:var(--canvas)}
.voidline{fill:none;stroke:var(--soil-2);stroke-width:3}
.dim{stroke:var(--accent);stroke-width:1.6;fill:none}
/* concentric strokes on one path, drawn in build order, so each stage buries
   the one before it exactly the way it does on site */
.formband{fill:none;stroke:var(--timber);stroke-width:26;stroke-linejoin:round;opacity:.9}
.rebarband{fill:none;stroke:var(--steel);stroke-width:26;stroke-linejoin:round;
  stroke-dasharray:2 9;opacity:.85}
.shell{fill:none;stroke:var(--conc);stroke-width:26;stroke-linejoin:round}
.tileband{fill:none;stroke:#CBE2EE;stroke-width:9;stroke-linejoin:round}
.shellwall{fill:var(--conc);opacity:.5}
.poolbox{fill:none;stroke:var(--conc);stroke-width:9}
.coping{fill:var(--conc)}
.pipe{fill:none;stroke:var(--steel);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.pipe.waste{stroke:var(--soil-2)}
.plantbox{fill:var(--canvas-alt);stroke:var(--line-strong);stroke-width:2}
.skim,.port{fill:var(--accent)}
.water{fill:var(--waterC);opacity:.92}
.ripple{fill:none;stroke:#fff;stroke-width:2.5;opacity:.6}
.flow,.sweep{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:8 14;animation:dash 1.5s linear infinite;opacity:.85}
@keyframes dash{to{stroke-dashoffset:-56}}

/* ---------- the sauna section ---------- */
.room{fill:var(--canvas)}
.studs rect{fill:var(--timber);opacity:.75}
.insul rect{fill:#EADFC8;stroke:#DACDAF;stroke-width:1.5}
.room{fill:var(--canvas)}
.vapour{fill:none;stroke:var(--accent-bright);stroke-width:2;opacity:.55;stroke-dasharray:5 6}
.clad rect{fill:var(--timber)}
.bench{fill:#D9BE93;stroke:#B9996F;stroke-width:1.5}
.stove{fill:var(--ink);opacity:.9}
.stones circle{fill:var(--steel)}
.heatwave{fill:none;stroke:#D98A4A;stroke-width:2.5;stroke-linecap:round;opacity:.85}
.glass{fill:var(--accent-bright);opacity:.16;stroke:var(--accent-bright);stroke-width:2}
.glassbar{fill:var(--steel)}
.ledline{stroke:#F2C97A;stroke-width:3;stroke-linecap:round;opacity:.9}

/* ---------- the flow schematic ---------- */
.poolshape{fill:none;stroke:var(--conc);stroke-width:9}
.deck{fill:var(--canvas-alt)}
.node rect{fill:var(--panel);stroke:var(--line-strong);stroke-width:2}
.node.pumpn rect{stroke:var(--accent)}
.media{fill:var(--soil);opacity:.85}
.flowline{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:14 18;opacity:0}
.mode-run .flowline.run,.mode-wash .flowline.wash{opacity:1;animation:dash 1.4s linear infinite}
.mode-wash .flowline.wash{stroke:var(--soil-2)}

/* ---------- upkeep ---------- */
.arrows{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.arrows .head{fill:var(--accent);stroke:none}
.vials rect{fill:var(--panel);stroke:var(--line-strong);stroke-width:2}
.fillA{fill:var(--accent-bright);stroke:none}
.fillB{fill:var(--accent);stroke:none}
.robot2 .rbody,.robot .rbody{fill:var(--ink)}
.robot2 .rtop,.robot .rtop{fill:var(--steel)}
.robot2 .rled,.robot .rled{fill:var(--accent-bright)}
.rtrack{fill:var(--text-secondary)}
.snow{fill:none;stroke:var(--accent-bright);stroke-width:2.5;stroke-linecap:round}
.coverlid{fill:var(--panel);opacity:.82;stroke:var(--line-strong);stroke-width:2}

/* ---------- the robot demo ---------- */
.track{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 8;opacity:.3}
.robot{transition:transform .05s linear}
.speck{fill:var(--soil-2);opacity:.9;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.speck.gone{opacity:0;transform:scale(.3)}
.running .track{opacity:.55}

/* ---------- the cover demo ---------- */
.roller{fill:var(--steel)}
.rollercap{fill:var(--ink)}
.slats rect{fill:#E3E9EC;stroke:#C6D0D5;stroke-width:1.5}
.keysw rect{fill:var(--panel);stroke:var(--line-strong);stroke-width:2}
.keysw circle{fill:none;stroke:var(--accent);stroke-width:2.5}
.keysw path{stroke:var(--accent);stroke-width:2.5;fill:none;stroke-linecap:round}
/* each slat rolls out behind the one before it, so the cover unfurls */
.dslat{
  fill:#E3E9EC;stroke:#C6D0D5;stroke-width:1.5;
  transform:translateX(0);opacity:0;
  transition:transform .85s var(--ease) calc(var(--i) * 24ms),
             opacity .2s linear calc(var(--i) * 24ms);
}
.closed .dslat{transform:translateX(calc(var(--i) * 23px));opacity:1}

/* ---------- demo shell ---------- */
.demo{
  margin:clamp(34px,5vh,54px) 0 0;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);
}
.demo-stage{background:var(--canvas);padding:clamp(14px,2.5vw,26px)}
.demo-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  padding:15px 18px;border-top:1px solid var(--line);background:var(--panel);
}
.demo-status{
  margin:0;font-size:13.5px;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
}
.demo-tabs{display:flex;gap:8px}
.demo-tab{
  font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;
  color:var(--text-secondary);background:transparent;
  border:1px solid var(--line-strong);border-radius:100px;padding:9px 16px;
  transition:color .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease);
}
.demo-tab:hover{color:var(--ink);border-color:var(--ink)}
.demo-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.demo-note{margin:14px 0 0;font-size:14px;color:var(--text-secondary);line-height:1.6;max-width:64ch}

/* the diagram inside a pinned story */
.story-media.scene{background:var(--canvas);display:flex;align-items:center;padding:10px}

@media (max-width:640px){
  .demo-bar{padding:13px 14px}
  .tag{font-size:19px}
  .nlab{font-size:16px}
}
@media (pointer:coarse){
  .demo-tab{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .lay,.speck,.dslat,.robot{transition:none}
  .flow,.sweep,.flowline,.mode-run .flowline.run,.mode-wash .flowline.wash{animation:none}
}

/* ============================================================
   THE PINNED GALLERY  (work page only)
   One large photograph with six around it. ScrollTrigger pins the stage and
   scrubs the timeline; see initGallery() in site.js.

   The resting state below is the FINISHED state, on purpose. If GSAP fails to
   load, or the browser asks for reduced motion, the pictures are simply all
   there. Only transform and opacity are animated.
   ============================================================ */
.gs{padding:0;background:var(--canvas)}
.gs-stage{
  height:100vh;height:100dvh;
  display:grid;place-items:center;
  /* the outer pictures leave through the sides, so the stage clips them */
  overflow:hidden;
  padding:clamp(70px,10vh,110px) var(--gut) clamp(40px,6vh,70px);
}
.gs-inner{
  position:relative;display:grid;place-items:center;
  width:100%;height:100%;max-width:1500px;margin:0 auto;
}
.gs-centre{
  position:relative;z-index:2;margin:0;
  width:min(560px,44vw);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lift);
  will-change:transform;
}
.gs-sat{
  position:absolute;z-index:1;margin:0;
  width:min(214px,16.5vw);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
  will-change:transform,opacity;
}
.gs-centre img,.gs-sat img{width:100%;height:100%;object-fit:cover;display:block}
/* the aspect ratios differ, so each frame keeps its own and nothing is squashed */
.gs-centre{aspect-ratio:4/3}
.gs-sat{aspect-ratio:3/4}
.gs-r1{aspect-ratio:4/3}

/* Tops are capped so a portrait frame still fits inside the stage box: the
   stage clips (the pictures leave through its sides), and at 74% the bottom
   pair was being cut off along the fold. */
.gs-l1{left:2%;top:3%}
.gs-l2{left:9%;top:33%}
.gs-l3{left:1%;top:61%}
.gs-r1{right:2%;top:6%}
.gs-r2{right:9%;top:32%}
.gs-r3{right:1%;top:59%}

@media (max-width:1180px){
  .gs-centre{width:min(480px,46vw)}
  .gs-sat{width:min(180px,17vw)}
  .gs-l2{left:5%}
  .gs-r2{right:5%}
}
@media (max-width:820px){
  /* a phone cannot hold six satellites round a centre and stay legible, so the
     outermost pair steps out. The same photographs are in the projects below. */
  .gs-l3,.gs-r3{display:none}
  /* still a full screen while pinned, or the spacer shows as dead canvas
     under the stage; the run is shortened in JS instead */
  .gs-stage{height:100dvh;padding:clamp(52px,8vh,74px) var(--gut) clamp(28px,4vh,44px)}
  .gs-centre{width:min(420px,64vw)}
  .gs-sat{width:min(132px,26vw)}
  .gs-l1{left:0;top:4%}
  .gs-l2{left:0;top:64%}
  .gs-r1{right:0;top:6%}
  .gs-r2{right:0;top:62%}
}
@media (prefers-reduced-motion:reduce){
  /* no pin and no scrub: initGallery() bails out, and this is what remains */
  .gs-stage{height:auto;min-height:0;padding-top:clamp(40px,6vh,64px)}
}

/* ============================================================
   FLOWING PROJECT GALLERIES  (work page only)
   Neighbouring photographs travel in opposite directions as the gallery
   crosses the viewport, so they slide past each other, meet level in the
   middle, and part again. Driven by initProjectGalleries() in site.js.
   ============================================================ */

/* The entrance system drives transform and opacity on .part with a CSS
   transition. GSAP scrubs the same two properties here, and the two fighting
   over one element is jank, so inside a flowing gallery those properties are
   handed over. The clip-path unveil is untouched and still runs. */
.gal.gs-flow .part{opacity:1;transform:none;transition:none}
.gal.gs-flow .shot{will-change:transform,opacity}

/* The frame takes the aspect ratio here, instead of getting its height from
   the picture inside it. That frees the picture to be cut taller than the
   frame, and the overhang top and bottom is the room the parallax drifts into.
   Without it the drift would open a gap at one edge.

   transition:none matters as much as the rest: .shot img carries a 1.3s
   transform transition for the hover, and GSAP writing a new transform every
   frame through a 1.3s transition is a fight neither side wins. The hover
   zoom is replaced below, because an inline transform would beat it anyway. */
.gal.gs-flow .shot{aspect-ratio:4/3}
.gal.gs-flow .shot.wide{aspect-ratio:16/10}
.sand .gal.gs-flow .shot{aspect-ratio:3/4}
.gal.gs-flow .shot img{
  position:absolute;left:0;right:0;top:-9%;
  width:100%;height:118%;aspect-ratio:auto;transition:none;
}
.gal.gs-flow .shot figcaption{z-index:2}
.gal.gs-flow .shot::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(4,10,15,0);transition:background .45s var(--ease);
}
.gal.gs-flow .shot:hover::after{background:rgba(4,10,15,.18)}
/* Clipped at the section, which runs the full width, not at the gallery box.
   The gallery is inset by its own gutter, so clipping there would have the
   photographs emerging from a hard line a couple of dozen pixels inside the
   window. At the section they come in past the edge of the screen. */
.sec.proj{overflow:clip}

@media (prefers-reduced-motion:reduce){
  /* initProjectGalleries() bails out, so the grid is simply the grid */
  .gal.gs-flow .shot{will-change:auto}
}

/* ---------- the name/address/phone block ---------- */
.nap{margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.napr{display:flex;flex-wrap:wrap;gap:6px 22px;padding:15px 0;border-bottom:1px solid var(--line)}
.nap dt{
  flex:0 0 150px;font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);padding-top:3px;
}
.nap dd{margin:0;flex:1 1 240px;color:var(--text-primary);font-size:16px;line-height:1.55}
.nap dd a{color:var(--accent);text-decoration:none}
.nap dd a:hover{text-decoration:underline}
@media (max-width:560px){
  .napr{gap:3px}
  .nap dt{flex:1 1 100%}
}

/* ---------- a category's product list ---------- */
/* a real list rather than a picture wall: the name, brand and every catalogue
   specification stay as crawlable text */
.prows{list-style:none;margin:clamp(34px,5vh,52px) 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.prow{
  display:flex;gap:18px;padding:18px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);
}
.prow-media{margin:0;flex:0 0 108px;align-self:flex-start}
.prow-media img{width:108px;height:108px;object-fit:contain;background:#fff;border-radius:8px}
.prow-body{flex:1 1 auto;min-width:0}
.prow-brand{
  margin:0 0 5px;font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
}
.prow h3{
  margin:0 0 8px;font-family:var(--display);font-weight:400;
  font-size:20px;line-height:1.15;letter-spacing:-.012em;
}
.prow h3 a{color:inherit;text-decoration:none}
.prow h3 a:hover{color:var(--accent)}
/* The whole card opens the product, not just the four words of its name.
   All 244 of these carry a heading link; stretching it over the card is what
   makes the photograph and the specifications clickable too, without nesting
   anything inside an anchor. The WhatsApp button is lifted above it so it
   still wins its own click. */
.prow{position:relative}
.prow h3 a::after{content:"";position:absolute;inset:0;z-index:0}
.prow .wa,.prow .prow-note{position:relative;z-index:1}
.prow:hover{box-shadow:var(--shadow-lift)}
.prow:has(h3 a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.prow > .prow-body > p{margin:0 0 10px;color:var(--text-secondary);font-size:14.5px;line-height:1.6}
.prow-specs{list-style:none;margin:0 0 12px;padding:0}
.prow-specs li{
  position:relative;padding:3px 0 3px 14px;
  font-size:13.5px;color:var(--text-secondary);line-height:1.5;
}
.prow-specs li::before{
  content:"";position:absolute;left:0;top:11px;
  width:4px;height:4px;border-radius:50%;background:var(--accent-muted);
}
.prow-note{
  margin:28px 0 0;color:var(--text-secondary);font-size:14.5px;line-height:1.65;max-width:70ch;
}

/* The Aiper card now lists fifteen models, so letting the grid stretch both
   cards to match left a large void under the covers card. */
.care-grid{align-items:start}

/* ---------- press photography: image on top, on its own ground ---------- */
/* The Aiper shots are marketing images, not catalogue cut-outs: some are wide
   banners, some sit on black. A shared white box letterboxed the banners into
   a thumbnail and made the black ones read as broken. --pbg is measured off
   each file by work/aiperimg.py. */
.prows-cards{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.prow-card{flex-direction:column;gap:0;padding:0;overflow:hidden}
/* place-items rather than flex, and a picture sized by max- rather than by
   width/height: as a flex item at height:100% the picture's own intrinsic
   height won the cascade against aspect-ratio, so every card in the grid was
   a different height and the row read as a mistake. Measured: seven cards at
   264, 233, 287, 220, 220, 224 and 390 tall in one row of a 4/3 grid. */
.prow-hero{
  margin:0;background:var(--pbg,#fff);
  aspect-ratio:4/3;display:grid;place-items:center;padding:12px;min-height:0;
}
.prow-hero img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  min-width:0;min-height:0;object-fit:contain;display:block;
}
.prow-card .prow-body{padding:17px 18px 19px}
.prow-card h3{font-size:19px}
.prow-note a{color:var(--accent)}
@media (max-width:560px){
  .prows{grid-template-columns:1fr}
  .prow{gap:14px;padding:15px}
  .prow-media{flex:0 0 78px}
  .prow-media img{width:78px;height:78px}
  .prow h3{font-size:18px}
}

/* ============================================================
   THE HALO
   The opening of the pool construction page, and only that page.

   The skeleton is head-split's: copy on the left, media on the
   right, same grid and the same vertical rhythm. What changes is
   that the band goes dark and the photograph is set in a ring of
   ticks. Geometry is generated in scenes.halo(); the motion is
   initHalo() in site.js.

   Everything here renders finished without JavaScript. The ring
   is fully visible by default and initHalo() is what hides it in
   order to bring it back in, so a failed script or a blocked file
   leaves an opening that simply does not animate, rather than an
   empty dark band.
   ============================================================ */
.head-halo{
  position:relative;z-index:2;background:var(--deep);color:var(--on-deep);
  padding:clamp(34px,6vh,64px) 0 clamp(46px,7vh,84px);
  overflow:clip;
}
.head-halo .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,60px);align-items:center;
}
.head-halo .h1{color:#fff}
.head-halo .standfirst{color:var(--on-deep-2)}

.halo-stage{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin-inline:auto}
/* The idle turn rotates this element rather than the group inside it. Both
   look identical and the outer one is markedly cheaper: rotating an SVG
   subtree makes the browser re-raster 204 vector children every frame, while
   rotating the element that holds them is an ordinary composited transform.
   Measured sitting still on the hero, that is 4% of a core against 7%, and
   against a 2% floor with nothing turning at all. */
.halo-svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  will-change:transform;
}
.halo-svg .tick{stroke-linecap:round}

/* dim at twelve o'clock, brightening towards the water at the bottom */
.halo-svg .t0{stroke:rgba(147,170,182,.38)}
.halo-svg .t1{stroke:rgba(11,114,181,.72)}
.halo-svg .t2{stroke:#1189C7}
.halo-svg .t3{stroke:var(--accent-bright)}
.halo-svg .t4{stroke:#7FD9EA}
.halo-svg .t5{stroke:#EAF3F6}
.halo-edge{fill:none;stroke:var(--line-deep);stroke-width:1}

/* The eye sits inside the inner ring. That circle has r=95.5 in a 320-unit
   viewBox, so it occupies 59.7% of the stage and insetting by the remaining
   half centres it — without a transform, which leaves transform free for
   the animation to use. */
.halo-eye{
  position:absolute;inset:20.15%;margin:0;
  border-radius:50%;overflow:hidden;background:var(--deep-2);
  box-shadow:0 0 0 1px rgba(234,243,246,.14),0 30px 80px rgba(0,0,0,.5);
}
.halo-eye img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:900px){
  .head-halo .wrap{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .halo-stage{max-width:min(420px,86vw)}
}
@media (prefers-reduced-motion: reduce){
  .halo-spin{transform:none}
}

/* ---------- the stage dial: the halo again, small, counting ----------
   One arc of ticks per stage, with the stage number in the middle. Lit by
   initStoryDial() from the same stage event the diagrams listen to.

   The flex row is scoped to .has-dial rather than applied to every
   .story-progress, because the home page has one of these paragraphs too and
   nothing to put in it; its counter stays on the inline layout it was
   designed for. */
.story-progress.has-dial{
  display:flex;align-items:center;gap:14px;margin:0 0 26px;
}
/* One progress indicator, not two. The bar under the copy said exactly what
   the ring says; with the counter gone they were simply repeating each other.
   The home page story has no dial, so it keeps its bar. */
.story:has(.story-dial) .story-bar{display:none}
.story-dial{
  /* Smaller than it was. It used to hold a numeral, so it needed the room;
     with the number gone a 96px ring around nothing read as a medallion
     rather than as an indicator. */
  position:relative;flex:0 0 auto;width:clamp(52px,4.6vw,62px);aspect-ratio:1;
}
.dial-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial-svg .dtick{stroke:var(--line-strong);stroke-linecap:round}
/* the number sits in the eye of the dial, not beside it */
.story-progress.has-dial .story-n{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:clamp(26px,2.4vw,32px);letter-spacing:0;
  color:var(--accent);vertical-align:baseline;
}
@media (max-width:900px){
  .story-progress.has-dial{gap:11px}
}

/* ============================================================
   THE WATER
   One fixed canvas behind the home page, painted by assets/water.js.
   Scroll moves it from the deep end under the hero, up into the pale
   shallows behind the reading sections, and back down to close.

   It is decorative in the strict sense: every word on the page is
   ordinary HTML above it, and the gradient declared here is a real
   floor, so a browser with no WebGL loses a shimmer and nothing else.
   ============================================================ */
#water{
  position:fixed;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#EFF5F9 0%,#E5EEF3 62%,#DCE8EF 100%);
}

/* Only once the canvas has a context do the sections stop painting their
   own ground; has-water is set from JS after the shader links. Until then
   they keep exactly the colours they always had, so a failure here is
   invisible rather than a page of transparent boxes on white. */
.has-water .sec{background:transparent}
/* The closing section is white on dark, so it carries its own dark ground
   rather than borrowing one from the water. The water still reads through
   it, caustics and all, but the contrast under that text is a fixed
   property of the stylesheet and not a thing the animation has to arrive at
   in time. Legibility never waits on an ease. */
.has-water .sec.on-deep{background:rgba(6,32,44,.86)}
/* the sauna is the one warm material in the story, and it keeps its floor:
   continuity is not the same thing as making everything one colour */
.has-water .sec.sand{background:#F6F1E9}

/* the divider rules were drawn to sit between two flat colours; over moving
   water they read as a scratch on the lens */
.has-water .waterline{opacity:.45}

/* The old atmosphere layer is this same layer, done with two big radial
   gradients. It was only ever seen through the gaps between opaque sections;
   with those sections transparent it sits under the whole page, and a
   gradient that wide bands into visible rings on an eight bit display. The
   water is the atmosphere now, so it stands down. Without the water it is
   untouched, and the page looks exactly as it did. */
.has-water .env{display:none}

@media (prefers-reduced-motion: reduce){
  /* water.js renders a single still frame; nothing here needs to move either */
  #water{background:linear-gradient(180deg,#EFF5F9 0%,#E5EEF3 62%,#DCE8EF 100%)}
}

/* ============================================================
   PAGE TRANSITIONS
   Cross-document view transitions. This is a static multi-page
   site, which is the case the browser feature was built for: no
   router, no framework, no interception. Pages that support it
   cross-fade with a slight rise; pages and browsers that do not
   navigate exactly as they always did.

   Kept short on purpose. A transition is a courtesy between two
   pages, not a thing to sit through.
   ============================================================ */
@view-transition{ navigation: auto; }

@keyframes vt-out{
  from{opacity:1;transform:none}
  to  {opacity:0;transform:translateY(-1.2vh)}
}
@keyframes vt-in{
  from{opacity:0;transform:translateY(1.8vh)}
  to  {opacity:1;transform:none}
}
::view-transition-old(root){
  animation:vt-out .26s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root){
  animation:vt-in .42s cubic-bezier(.16,1,.3,1) both;
}
/* the header is the one thing that should not move between pages: it is in
   the same place on both, and sliding it makes the site feel unmoored */
.nav{view-transition-name:site-nav}
::view-transition-group(site-nav){animation-duration:.28s}
::view-transition-old(site-nav),
::view-transition-new(site-nav){animation:none;mix-blend-mode:normal}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
}



/* ---------- product page ----------
   A product now has a page rather than a panel. The vocabulary is the one the
   category pages already use: a white panel on the canvas, the display face
   for the name, hairlines rather than boxes. */
.prod-sec{padding-top:clamp(36px,5vh,68px)}
.prod-top{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}
.prod-shot{
  margin:0;padding:clamp(24px,3vw,48px);
  background:var(--pbg,#fff);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  position:sticky;top:calc(var(--nav-h,84px) + 20px);
}
.prod-shot img{
  display:block;max-width:100%;height:auto;max-height:min(62vh,560px);
  width:auto;object-fit:contain;
}
.prod-noshot{
  min-height:280px;background:var(--canvas-alt);border-style:dashed;
}
.prod-noshot p{margin:0;color:var(--text-secondary);font-size:14.5px;text-align:center;max-width:26ch}
.prod-info .kicker{margin-bottom:14px}
.prod-info .h1{font-size:clamp(32px,4.4vw,54px);max-width:18ch}
.prod-info .lede{margin-top:18px;font-size:clamp(15.5px,1.35vw,18px)}

.prod-specs-h{
  margin:38px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);font-family:var(--font);
}
.prod-specs{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.prod-specs li{
  padding:13px 0;border-bottom:1px solid var(--line);
  color:var(--text-primary);font-size:15.5px;line-height:1.5;
}
.prod-actions{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.prod-note{margin:18px 0 0;color:var(--text-secondary);font-size:13.5px;max-width:46ch;line-height:1.6}
.prod-back{margin:26px 0 0;font-size:14.5px}
.prod-back a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-muted);padding-bottom:2px;
  transition:border-color .22s var(--ease);
}
.prod-back a:hover{border-bottom-color:var(--accent)}

/* related products */
.rel-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(16px,2vw,26px);margin:38px 0 0;padding:0;list-style:none;
}
.rel-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.rel-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.rel-media{margin:0;padding:16px;background:var(--pbg,#fff);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.rel-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rel-body{padding:14px 16px 18px;border-top:1px solid var(--line)}
.rel-brand{
  margin:0 0 5px;font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
}
.rel-name{margin:0;font-family:var(--display);font-weight:400;font-size:18px;line-height:1.18}
.rel-name a{color:inherit;text-decoration:none}
.rel-name a:hover{color:var(--accent)}
/* the whole card is the target, without nesting anything inside the link */
.rel-name a::after{content:"";position:absolute;inset:0}
.rel-card{position:relative}

@media (max-width:900px){
  .prod-top{grid-template-columns:1fr;gap:28px}
  .prod-shot{position:static;padding:20px}
  .prod-shot img{max-height:46vh}
  .prod-info .h1{font-size:clamp(28px,7vw,38px)}
  .prod-actions .btn{flex:1 1 100%;text-align:center}
}

/* ============================================================
   TARGET SIZE
   WCAG 2.5.8 asks for 24 by 24 CSS pixels. These are text links
   whose box was only as tall as the line, and one product whose
   name is a single letter, so its link was eight pixels wide.
   Measured by work/targets.js; the values are the real ones.
   ============================================================ */
.prow-note a,
.prod-back a,
.shop-find a,
.pcard-name a{
  display:inline-flex;align-items:center;
  min-height:24px;min-width:24px;
}
/* the shop's price button carried the whole card's conversion on a 23px box */
.pcard-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;
}
@media (pointer:coarse){
  .pcard-cta{min-height:44px;padding-left:16px;padding-right:16px}
}

/* the row that leads to the rest of the range */
.models-more{justify-content:flex-start !important}
.models-more a{
  display:inline-flex;align-items:center;gap:10px;min-height:24px;
  color:var(--accent);text-decoration:none;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
}
.on-deep .models-more a{color:var(--accent-bright)}
.models-ar{
  width:16px;height:1.5px;background:currentColor;position:relative;
  transition:width 220ms var(--ease);
}
.models-ar::after{
  content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.models-more a:hover .models-ar{width:24px}
.models .m-n a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.models .m-n a:hover{color:var(--accent)}
.on-deep .models .m-n a:hover{color:var(--accent-bright)}

/* ============================================================
   THE ROBOT GRID
   The Aiper block was fifteen rows of name, descriptor and a
   WhatsApp button, then four rows of the same. It is a product
   people buy with their eyes, so it shows the robots.
   Each card keeps its own ground: half the Aiper press shots are
   cut-outs on white and half are on black, and on one shared
   white card the black ones read as broken boxes.
   ============================================================ */
.robots{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  /* every row the same height: a name that wraps to two lines was making one
     row 26px taller than the other */
  grid-auto-rows:1fr;
  gap:clamp(12px,1.4vw,18px);margin:24px 0 0;padding:0;list-style:none;
}
.robot{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.robot:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.robot > a{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;
}
.robot-shot{
  display:flex;align-items:center;justify-content:center;
  background:var(--pbg,#fff);aspect-ratio:4/3;padding:12px;
  /* min-height:0, or the flex item's automatic minimum size lets a tall image
     stretch the box past its ratio: the four shots measured 201, 170, 227 and
     170 pixels, so the names under them sat at four different heights */
  min-height:0;overflow:hidden;
}
.robot-shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.robot-n{
  display:block;margin:12px 14px 0;font-weight:500;font-size:15px;
  letter-spacing:-.01em;color:var(--text-primary);
}
.robot-t{
  display:block;margin:3px 14px 14px;font-size:11px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-secondary);
}
.robot:hover .robot-n{color:var(--accent)}
.robots-more{margin:16px 0 0}
.robots-more a{
  display:inline-flex;align-items:center;gap:10px;min-height:24px;
  color:var(--accent);text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:.01em;
}
.robots-more a:hover .models-ar{width:24px}
@media (max-width:520px){
  .robots{grid-template-columns:repeat(2,1fr)}
  .robot-n{font-size:14px}
}
/* the card holds the whole width now, so four robots make one row instead of
   a 2x2 block stranded in the middle of it. Four, never three: an auto-fit
   track count would land on three at some widths and leave one robot alone
   on a second row. */
@media (min-width:901px){
  .robots{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* One column on a phone. Two columns of 180px each is not enough for a
   photograph, a heading, two lines and a button, and a plain 1fr could not
   shrink below its content, so the pair came out 191px beside 137px --
   measured, and the reason the row read as crooked. */
@media (max-width:560px){
  .prods{grid-template-columns:1fr}
  .prod p{max-width:none}
}
/* every robot card the same height, whatever the length of its name */
.robot-n{min-height:2.6em}
@media (max-width:560px){
  .robot-n{min-height:3.6em}
}
/* ============================================================
   THE EQUIPMENT CARDS
   Two faults, both measured. The cards were the same height but
   their buttons were not: a one-line description put the button
   at 391px and a two-line one at 417px, so the row read as
   crooked. And there was nothing to click but WhatsApp -- every
   one of these categories has had a page of its own since the
   product pages were built, and none of them led there.
   ============================================================ */
.prod{display:flex;flex-direction:column}
.prod p{flex:0 0 auto}
.prod .wa{margin-top:auto;align-self:flex-start;position:relative;z-index:1}
.prod-go{color:inherit;text-decoration:none}
.prod-go::after{content:"";position:absolute;inset:0;z-index:0}
.prod{position:relative}
.prod:hover .prod-go{color:var(--accent)}
.prod-go:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ============================================================
   THE MAP
   Address, hours and a button. The Google iframe is a few
   hundred kilobytes of third-party script that sets third-party
   cookies before a visitor has done anything, so it is fetched
   on the click and not before. Without JavaScript this is still
   an address and a working link to the place.
   ============================================================ */
.mapblock{
  margin:44px 0 0;padding:22px 24px;
  border:1px solid var(--line-deep);border-radius:14px;
  background:rgba(255,255,255,.04);
}
.mapblock-head{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.mapblock-where{margin:0;font-size:16px;font-weight:500;color:var(--on-deep)}
.mapblock-hours{margin:0;font-size:13.5px;color:var(--on-deep-2)}
.mapblock-btn{
  margin:16px 0 0;padding:10px 18px;min-height:44px;
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--on-deep);
  border:1px solid var(--line-deep);border-radius:100px;
  font:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.mapblock-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(234,243,246,.4)}
.mapblock-ar{
  width:16px;height:1.5px;background:currentColor;position:relative;
  transition:width 220ms var(--ease);
}
.mapblock-ar::after{
  content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.mapblock-btn:hover .mapblock-ar{width:24px}
.mapblock-alt{margin:14px 0 0;font-size:13.5px}
.mapblock-alt a,.foot-map{
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--accent-bright);
}
.foot-map{color:var(--accent)}
/* once the iframe is in, the button and the fallback link step aside */
.mapblock.loaded .mapblock-btn,.mapblock.loaded .mapblock-alt{display:none}
.mapblock-frame{
  margin:18px 0 0;border-radius:10px;overflow:hidden;
  aspect-ratio:16/10;background:var(--deep-2);
}
.mapblock-frame iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:560px){
  .mapblock{padding:18px}
  .mapblock-frame{aspect-ratio:4/3}
}

/* ---------- the home page service cards, on a phone ----------
   Six full-bleed cards at 16/10 is about 2700px of scrolling before the
   fold below them, which is most of a phone screen per card and four
   swipes to read six links. On a narrow screen they turn on their side:
   the photograph becomes a thumbnail the height of the card, the sentence
   clamps to two lines, and the whole row is still one hit area. Scoped to
   .identity so the service and work indexes keep their full-size cards --
   there a card is the page's content, here it is a way in. */
@media (max-width:560px){
  .identity .tiles{gap:12px;margin-top:clamp(28px,4vh,40px)}
  .identity .tile{flex-direction:row;border-radius:12px}
  /* aspect-ratio off: the figure takes its height from the card beside it */
  .identity .tile-media{flex:0 0 122px;aspect-ratio:auto}
  .identity .tile-body{padding:13px 15px;min-width:0}
  .identity .tile h3{font-size:17.5px;line-height:1.16;margin:0 0 6px}
  .identity .tile p{
    margin:0 0 10px;font-size:13.5px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .identity .tile .tile-go{font-size:12.5px}
}

/* ============================================================
   THE STORE
   The shop page as a store: an introduction, a category rail, horizontal
   shelves, the clips, help, reasons, then the full catalogue. The browsing
   model borrows from Apple's store -- light grey ground, large quiet cards,
   native scrolling shelves with a peeking next card -- and everything else is
   this site's: Poppins, the teal accent, the cyan-to-lilac gradient used only
   as a detail. Scoped to .page-shop so no other page changes.
   ============================================================ */
.page-shop{
  --shop-page:#F5F5F7;--shop-card:#FFFFFF;--shop-ink:#1D1D1F;--shop-muted:#6E6E73;
  --shop-line:#D2D2D7;--shop-dark:#071923;--shop-radius:18px;
  --shop-shadow:2px 4px 12px rgba(0,0,0,.08);--shop-shadow-hover:2px 4px 16px rgba(0,0,0,.16);
  --shop-ease:cubic-bezier(0,0,.5,1);
  background:var(--shop-page);
}
.page-shop main{background:var(--shop-page)}

/* ---------- announcement and introduction ---------- */
.store-announce{background:var(--shop-card);border-bottom:1px solid var(--shop-line)}
.store-announce p{
  max-width:var(--maxw);margin:0 auto;padding:12px var(--gut);
  text-align:center;font-size:14px;line-height:1.5;color:var(--shop-ink);
}
.store-announce a,.store-announce a:visited{color:var(--accent);font-weight:500;text-decoration:none;white-space:nowrap}
.store-announce a:hover{text-decoration:underline}

.store-intro{padding:clamp(40px,6vw,76px) 0 0}
.store-intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:end}
.store-eyebrow{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.store-h1{margin:0;font-family:var(--display);font-size:clamp(44px,5vw,68px);font-weight:600;line-height:1.05;letter-spacing:-.022em;color:var(--shop-ink)}
.store-statement{margin:0 0 12px;font-size:clamp(20px,2vw,26px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--shop-ink)}
.store-links{margin:0;display:flex;flex-wrap:wrap;gap:0 26px}
.store-link,.store-link:visited{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--accent);text-decoration:none}
.store-link::after{content:"\203A";margin-left:6px;font-size:18px;line-height:1;transition:transform .3s var(--shop-ease)}
.store-link:hover::after{transform:translateX(3px)}

/* ---------- shelves ---------- */
.store-shelf{padding-top:clamp(52px,7vw,88px)}
.store-rail{padding-top:clamp(28px,4vw,44px)}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:6px}
.shelf-head--rail{justify-content:flex-end;margin-bottom:0}
.shelf-h{
  margin:0;font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:600;
  line-height:1.15;letter-spacing:-.015em;color:var(--shop-ink);max-width:36ch;
}
.shelf-h .muted{color:var(--shop-muted);font-weight:500}
.shelf-nav{display:flex;gap:10px;flex:0 0 auto}
.shelf-nav[hidden]{display:none}
.shelf-btn{
  position:relative;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(210,210,215,.64);color:var(--shop-ink);
  transition:background .3s var(--shop-ease),opacity .3s var(--shop-ease);
}
.shelf-btn::before{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border:solid currentColor;border-width:0 2px 2px 0;
  transform:translate(-30%,-50%) rotate(135deg);
}
.shelf-btn.next::before{transform:translate(-70%,-50%) rotate(-45deg)}
.shelf-btn:hover:not(:disabled){background:rgba(210,210,215,.95)}
.shelf-btn:disabled{opacity:.35;cursor:default}
.shelf-btn:focus-visible{border-radius:50%}

/* The track is the full width of the page, so a card can scroll off the edge
   of the screen, but its first card lines up with the heading: the leading
   padding is the page gutter plus whatever the centred column leaves. */
.shelf-list{
  --edge:max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
  position:relative;list-style:none;margin:0;
  display:flex;gap:20px;padding:22px 0 34px var(--edge);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.shelf-list::-webkit-scrollbar{display:none}
/* trailing space: padding-right on a scrolling flex row is not honoured
   everywhere, an empty flex item is */
.shelf-list::after{content:"";flex:0 0 max(1px, calc(var(--edge) - 20px))}
.shelf-item{flex:0 0 auto;scroll-snap-align:start;display:flex}

/* ---------- the card every shelf shares ---------- */
.store-card{
  position:relative;overflow:hidden;background:var(--shop-card);
  border-radius:var(--shop-radius);box-shadow:var(--shop-shadow);
  transition:transform 300ms var(--shop-ease),box-shadow 300ms var(--shop-ease);
}
@media (hover:hover) and (pointer:fine){
  .store-card:hover{transform:scale(1.01);box-shadow:var(--shop-shadow-hover)}
}
.card-link,.card-link:visited{color:inherit;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--shop-radius)}
.card-link:focus-visible{outline:none}
.store-card:has(.card-link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.card-actions{position:relative;z-index:2}

/* ---------- category rail ---------- */
.rail-list{gap:8px;padding-top:12px;padding-bottom:18px}
.rail-link,.rail-link:visited{
  display:flex;flex-direction:column;align-items:center;gap:8px;width:132px;
  padding:12px 6px 14px;border-radius:16px;text-align:center;
  color:var(--shop-ink);text-decoration:none;
  transition:background .3s var(--shop-ease);
}
.rail-link:hover{background:var(--shop-card)}
.rail-media{
  width:104px;height:88px;display:grid;place-items:center;overflow:hidden;
  border-radius:14px;background:var(--pbg,transparent);
}
.rail-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rail-icon{color:var(--accent);background:transparent}
.rail-label{font-size:14px;font-weight:500;line-height:1.25}
.rail-count{font-size:12px;color:var(--shop-muted)}

/* ---------- editorial cards ---------- */
.ecard{width:400px;height:500px;display:flex;flex-direction:column}
.ecard-copy{padding:28px 28px 0}
.ecard-kicker{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ecard-title{margin:0 0 10px;font-family:var(--display);font-size:clamp(24px,2.3vw,30px);font-weight:600;line-height:1.12;letter-spacing:-.015em}
.ecard-desc{
  margin:0;font-size:15px;line-height:1.5;color:var(--shop-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.ecard-media{
  margin:18px 28px 74px;flex:1 1 auto;min-height:0;display:grid;place-items:center;
  border-radius:14px;background:var(--pbg,transparent);overflow:hidden;
}
.ecard-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ecard .card-actions{position:absolute;left:28px;bottom:22px}
.ecard .wa{min-height:44px}
.ecard--aqua{background:linear-gradient(180deg,#EAF7F8 0%,#F7FBFC 100%)}
.ecard--dark{background:var(--shop-dark);color:#fff}
.ecard--dark .ecard-kicker{color:#7FE0E6}
.ecard--dark .ecard-desc{color:rgba(255,255,255,.74)}
.ecard--dark .wa,.ecard--dark .wa:visited{color:#7FE0E6}
.ecard--dark .wa:hover{color:#fff}

/* ---------- product cards ---------- */
.scard{width:300px;height:470px;display:flex;flex-direction:column}
.scard-media{
  margin:0;height:230px;flex:0 0 230px;display:grid;place-items:center;padding:22px;
  background:var(--pbg,#fff);
}
.scard-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.scard-body{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 22px 18px}
.scard-brand{margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.scard-name{
  margin:0 0 8px;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.01em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
.scard-desc{
  margin:0;font-size:14px;line-height:1.5;color:var(--shop-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
.scard-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.scard-actions .wa{min-height:44px}
.scard-more,.scard-more:visited{
  display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;
  color:var(--shop-muted);text-decoration:none;
}
.scard-more::after{content:"\203A";margin-left:5px;font-size:17px;line-height:1}
.scard-more:hover{color:var(--shop-ink)}

/* ---------- category stories ---------- */
.story-card{width:400px;height:470px;display:flex;flex-direction:column}
.story-media{margin:0;height:270px;flex:0 0 270px;overflow:hidden;background:var(--canvas-alt)}
.story-media img{width:100%;height:100%;object-fit:cover}
.story-copy{padding:22px 28px 24px;display:flex;flex-direction:column;flex:1 1 auto}
.story-title{margin:0 0 8px;font-family:var(--display);font-size:clamp(24px,2.3vw,28px);font-weight:600;line-height:1.15;letter-spacing:-.012em}
.story-desc{margin:0;font-size:15px;line-height:1.5;color:var(--shop-muted)}
.story-more{margin:auto 0 0;padding-top:12px;font-size:14.5px;font-weight:500;color:var(--accent)}
.story-more::after{content:" \203A"}

/* ---------- clips ---------- */
.vcard{position:relative;overflow:hidden;border-radius:var(--shop-radius);background:#0B1419;color:#fff;box-shadow:var(--shop-shadow)}
.vcard--portrait{width:300px}
.vcard-stage{position:relative;width:100%;background:#0B1419}
.vcard-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.vcard--portrait .vcard-stage::after{
  content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(to top,rgba(4,12,16,.86) 0%,rgba(4,12,16,.5) 45%,rgba(4,12,16,0) 100%);
}
.vcard--portrait .vcard-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px 16px}
.vcard-title{margin:0 0 6px;font-family:var(--display);font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.vcard-sub{margin:0 0 4px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.82)}
.vcard-cta,.vcard-cta:visited{
  display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:500;
  color:#fff;text-decoration:none;
}
.vcard-cta::after{content:"\203A";margin-left:6px;font-size:18px;line-height:1;transition:transform .3s var(--shop-ease)}
.vcard-cta:hover::after{transform:translateX(3px)}
.vcard-btn{
  position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(0,0,0,.5);color:#fff;
  transition:background .3s var(--shop-ease);
}
.vcard-btn:hover{background:rgba(0,0,0,.72)}
.vcard-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}
/* play: a triangle; pause: two bars. Drawn, so the state is a shape and not
   only a colour */
.vcard-btn::before{
  content:"";position:absolute;left:50%;top:50%;
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;
  transform:translate(-35%,-50%);
}
.vcard-btn[aria-pressed="true"]::before{
  width:12px;height:15px;border:0;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,#fff 0 4px,transparent 4px 8px,#fff 8px 12px);
}
.vcard--lead{width:780px;display:grid;grid-template-columns:292px minmax(0,1fr)}
.vcard--lead .vcard-copy{
  display:flex;flex-direction:column;justify-content:flex-end;padding:44px 40px 36px;
  background:linear-gradient(155deg,#0C3140 0%,#071923 58%,#1A1B3C 100%);
}
.vcard--lead .vcard-title{font-size:clamp(26px,2.4vw,32px);line-height:1.12;margin-bottom:12px}
.vcard--lead .vcard-sub{font-size:16px;margin-bottom:10px}
.vcard--lead .vcard-copy::before{
  content:"";width:44px;height:3px;border-radius:2px;margin-bottom:22px;
  background:var(--brand-gradient);
}

/* ---------- help ---------- */
.hcard{width:400px;height:480px;display:flex;flex-direction:column}
.hcard-media{margin:0;height:230px;flex:0 0 230px;overflow:hidden;background:var(--canvas-alt)}
.hcard-media img{width:100%;height:100%;object-fit:cover}
.hcard-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto;padding:24px 28px 26px}
.hcard-title{margin:0 0 8px;font-family:var(--display);font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.012em}
.hcard-text{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--shop-muted)}
.hcard-cta{margin-top:auto}
.hcard-link,.hcard-link:visited{
  margin-top:auto;display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:500;color:var(--accent);text-decoration:none;
}
.hcard-link::after{content:"\203A";margin-left:6px;font-size:18px;line-height:1}

/* ---------- why ---------- */
.store-why{padding:clamp(52px,7vw,88px) 0 0}
.why-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.why-card{background:var(--shop-card);border-radius:var(--shop-radius);box-shadow:var(--shop-shadow);padding:26px 26px 24px}
.why-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:16px;color:var(--accent);background:linear-gradient(135deg,rgba(30,202,211,.14),rgba(148,134,247,.14))}
.why-h{margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--shop-ink)}
.why-sub{margin:4px 0 0;font-size:14px;color:var(--shop-muted)}

/* ---------- the complete catalogue ---------- */
.store-catalog{padding:clamp(64px,8vw,104px) 0 clamp(64px,8vw,96px)}
.page-shop .filterbar{
  position:static;margin-top:20px;padding:10px 0 12px;
  background:rgba(245,245,247,.94);border-bottom:0;
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
}
@media (min-width:900px){
  .page-shop .filterbar{position:sticky;top:var(--stick,0)}
}
.page-shop .search-input{background:var(--shop-card);border-color:var(--shop-line)}
.filter-toggle{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 18px;border-radius:100px;border:1px solid var(--shop-line);cursor:pointer;
  background:var(--shop-card);color:var(--shop-ink);font-family:var(--font);font-size:14.5px;font-weight:500;
  transition:border-color .3s var(--shop-ease),background .3s var(--shop-ease);
}
.filter-toggle::before{
  content:"";width:16px;height:12px;flex:0 0 auto;
  background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
             linear-gradient(currentColor,currentColor) 3px 5px/10px 2px no-repeat,
             linear-gradient(currentColor,currentColor) 6px 10px/4px 2px no-repeat;
}
.filter-toggle:hover,.filter-toggle[aria-expanded="true"]{border-color:var(--shop-ink)}
.page-shop .chip{background:var(--shop-card);border-color:var(--shop-line);color:var(--shop-ink)}
.page-shop .chip.on{background:var(--shop-ink);border-color:var(--shop-ink);color:#fff}
.filter-panel{margin-top:12px;padding:18px 20px 20px;background:var(--shop-card);border-radius:var(--shop-radius);box-shadow:var(--shop-shadow)}
.filter-panel[hidden]{display:none}
.filter-panel-h{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shop-muted)}
.filter-grid{display:flex;flex-wrap:wrap;gap:8px}

.page-shop .shop-grid{
  margin-top:26px;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1180px){.page-shop .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.page-shop .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.page-shop .pcard{
  border:0;border-radius:var(--shop-radius);box-shadow:var(--shop-shadow);background:var(--shop-card);
  transition:transform 300ms var(--shop-ease),box-shadow 300ms var(--shop-ease);
}
.page-shop .pcard:hover{transform:none;box-shadow:var(--shop-shadow)}
@media (hover:hover) and (pointer:fine){
  .page-shop .pcard:hover{transform:scale(1.01);box-shadow:var(--shop-shadow-hover)}
}
.page-shop .pcard.is-paged{display:none}
.page-shop .pcard-media{border-bottom:0}
.page-shop .pcard-name{font-weight:600;font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.page-shop .pcard-desc{-webkit-line-clamp:2;line-clamp:2;font-size:14px}
.page-shop .pcard-specs{display:none}
.page-shop .pcard-brand{font-weight:600;letter-spacing:.08em}
.page-shop .pcard-more::after{border-radius:var(--shop-radius)}
.shop-more-row{display:flex;justify-content:center;margin-top:34px}
.shop-more[hidden]{display:none}
.shop-more-n{color:var(--shop-muted);font-weight:400}

/* ---------- tablets and phones ---------- */
@media (max-width:900px){
  .store-intro-grid{grid-template-columns:1fr;align-items:start;gap:20px}
  .ecard{width:min(76vw,400px);height:480px}
  .scard{width:min(52vw,300px)}
  .story-card,.hcard{width:min(76vw,400px)}
  .vcard--lead{width:min(82vw,780px)}
  .vcard--portrait{width:min(46vw,300px)}
  .shelf-nav{display:none}
}
@media (max-width:767px){
  .store-announce p{font-size:13.5px}
  .shelf-list{gap:14px;padding-bottom:26px}
  .shelf-list::after{flex-basis:max(1px, calc(var(--edge) - 14px))}
  .ecard{width:min(86vw,380px);height:460px}
  .ecard-copy{padding:24px 22px 0}
  .ecard-media{margin:16px 22px 70px}
  .ecard .card-actions{left:22px;bottom:18px}
  .scard{width:min(76vw,300px);height:450px}
  .story-card,.hcard{width:min(86vw,380px)}
  .rail-link{width:112px}
  .rail-media{width:88px;height:76px}
  /* the lead clip keeps its ratio on a phone: the copy panel sits over the
     lower part of the video instead of beside it */
  .vcard--lead{width:min(86vw,340px);display:block}
  .vcard--lead .vcard-copy{
    position:absolute;left:0;right:0;bottom:0;z-index:2;padding:60px 22px 16px;
    background:linear-gradient(to top,rgba(4,12,16,.9) 0%,rgba(4,12,16,.55) 55%,rgba(4,12,16,0) 100%);
  }
  .vcard--lead .vcard-copy::before{display:none}
  .vcard--lead .vcard-title{font-size:22px}
  .vcard--lead .vcard-sub{font-size:14px}
  .vcard--portrait{width:min(74vw,300px)}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .why-card{padding:20px 18px}
  .why-h{font-size:15px}
  .searchrow{flex-wrap:wrap}
  .search{flex:1 1 100%;max-width:none}
}
@media (max-width:420px){
  .why-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .store-card,.page-shop .pcard,.shelf-btn,.rail-link,.vcard-btn{transition:none}
  .store-card:hover,.page-shop .pcard:hover{transform:none}
}

/* the catalogue's price button was 32px tall on a phone: storetest.js caught it */
.page-shop .pcard .wa,.page-shop .pcard-more{min-height:44px}

/* the announcement link sits inside a line of text, so its target grows with an
   overlay rather than with padding that would open up the line: the sweep
   measured it at 81x19 */
.store-announce a{position:relative}
.store-announce a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}

/* a service with no build diagram shows its steps as a numbered list */
.steps-plain{counter-reset:step;list-style:none;margin:24px 0 0;padding:0}
.steps-plain li{counter-increment:step;position:relative;padding:0 0 24px 54px}
.steps-plain li::before{content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:600;font-size:15px}
.steps-plain h3{margin:5px 0 6px;font-size:19px;font-weight:600;line-height:1.3}
.steps-plain p{margin:0}

/* .prose li (a bullet dot and 16px of indent) won over the step list, so the
   number circle sat on top of each title with no number in it */
.prose ol.steps-plain li{padding:0 0 24px 56px;margin:0;border:0;background:none;list-style:none}
.prose ol.steps-plain li::before{content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;margin:0;transform:none;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:600;font-size:15px;line-height:1}

/* the step number is real text now; the CSS-drawn circle is retired */
.prose ol.steps-plain li::before{content:none;display:none}
.prose ol.steps-plain li{position:relative}
.steps-plain .step-n{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:600;font-size:15px;line-height:1}

/* ============================================================
   FAQ AND ABOUT, IN THE STORE SYSTEM
   The same tokens as the shop, so the three pages read as one site: light
   grey fields, white 18px cards, the soft shadow, the 1.01 hover. Scoped to
   .page-store; nothing outside these two pages changes.
   ============================================================ */
.page-store{
  --shop-page:#F5F5F7;--shop-card:#FFFFFF;--shop-ink:#1D1D1F;--shop-muted:#6E6E73;
  --shop-line:#D2D2D7;--shop-dark:#071923;--shop-radius:18px;--radius-feature:28px;
  --shop-shadow:2px 4px 12px rgba(0,0,0,.08);--shop-shadow-hover:2px 4px 16px rgba(0,0,0,.14);
  --shop-ease:cubic-bezier(0,0,.5,1);
  --read-max:920px;
  background:#fff;
}
.page-store main{background:#fff}

.sx-sec{padding:clamp(56px,8vw,112px) 0}
.sx-gray{background:var(--shop-page)}
.sx-pt0{padding-top:0}
.sx-read{max-width:calc(var(--read-max) + 2 * var(--gut))}
.sx-center{text-align:center;max-width:calc(820px + 2 * var(--gut))}
.sx-eyebrow{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sx-h1{margin:0;font-family:var(--display);font-size:clamp(44px,6vw,80px);font-weight:600;line-height:1.04;letter-spacing:-.025em;color:var(--shop-ink)}
.sx-lede{margin:18px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--shop-muted)}
.sx-h2{margin:0 0 clamp(24px,3vw,40px);font-family:var(--display);font-size:clamp(30px,4vw,54px);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--shop-ink);max-width:22ch}
.sx-h2 .muted{color:var(--shop-muted);font-weight:500}
.sx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.sx-link,.sx-link:visited{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--accent);text-decoration:none}
.sx-link::after{content:"\203A";margin-left:6px;font-size:18px;line-height:1}
.sx-link:hover{text-decoration:underline}
.page-store .store-card{
  position:relative;overflow:hidden;display:block;background:var(--shop-card);color:var(--shop-ink);
  border-radius:var(--shop-radius);box-shadow:var(--shop-shadow);text-decoration:none;
  transition:transform 300ms var(--shop-ease),box-shadow 300ms var(--shop-ease);
}
@media (hover:hover) and (pointer:fine){
  .page-store a.store-card:hover,.page-store .store-card:has(.card-link):hover{transform:scale(1.01);box-shadow:var(--shop-shadow-hover)}
}
.page-store a.store-card:visited{color:var(--shop-ink)}

/* ---------- FAQ: hero and search ---------- */
.sx-hero{padding:clamp(48px,7vw,104px) 0 clamp(28px,4vw,48px)}
.faq-search{margin:clamp(28px,4vw,40px) auto 0;max-width:640px;text-align:left}
.faq-search-label{display:block;margin:0 0 8px 4px;font-size:14px;font-weight:600;color:var(--shop-ink)}
.faq-search-box{position:relative}
.faq-search-box .search-ico{left:20px;width:18px;height:18px;margin-top:-9px}
.faq-search-input{
  width:100%;height:60px;padding:0 60px 0 52px;font-family:var(--font);font-size:17px;color:var(--shop-ink);
  background:#fff;border:1px solid var(--shop-line);border-radius:16px;-webkit-appearance:none;appearance:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .25s var(--shop-ease),box-shadow .25s var(--shop-ease);
}
.faq-search-input::placeholder{color:var(--shop-muted)}
.faq-search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
.faq-search-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.faq-search-box .search-clear{right:8px}
.faq-count{min-height:22px;margin:10px 0 0 4px;font-size:14px;color:var(--shop-muted)}
/* during a search the answers sit right under the box */
.sx-sec.is-searching{padding-top:clamp(8px,1.6vw,20px)}
/* the matching questions, as links under the box */
.faq-hits{list-style:none;margin:8px 0 0;padding:6px;background:#fff;border:1px solid var(--shop-line);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.07)}
.faq-hits[hidden]{display:none}
.faq-hits a,.faq-hits a:visited{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;border-radius:10px;color:var(--shop-ink);font-size:16px;font-weight:500;line-height:1.35;text-decoration:none}
.faq-hits a::after{content:"\203A";margin-left:auto;color:var(--accent);font-size:20px;line-height:1}
.faq-hits a:hover{background:var(--shop-page)}
.faq-hits a:focus-visible{outline:none;background:var(--shop-page);box-shadow:inset 0 0 0 2px var(--accent)}
/* hidden groups still count as siblings, so the first group left showing
   kept the gap meant to separate it from the one before */
.sx-sec.is-searching .faq-list .faq-group{margin-top:0}
.sx-sec.is-searching .faq-list .faq-group:not([hidden]) ~ .faq-group:not([hidden]){margin-top:clamp(32px,4vw,48px)}

.faq-topics-wrap{padding:0 0 clamp(40px,6vw,72px)}
.faq-topics{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.faq-topic,.faq-topic:visited{
  display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;
  padding:22px 12px 20px;border-radius:var(--shop-radius);text-align:center;text-decoration:none;
  color:var(--shop-ink);background:var(--shop-page);transition:background .3s var(--shop-ease),box-shadow .3s var(--shop-ease);
}
.faq-topic:hover{background:#fff;box-shadow:var(--shop-shadow)}
.faq-topic:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--shop-radius)}
.faq-topic-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:var(--accent);background:linear-gradient(135deg,rgba(30,202,211,.16),rgba(148,134,247,.16))}
.faq-topic-t{font-size:16px;font-weight:600;line-height:1.3}
.faq-topic-n{font-size:13px;color:var(--shop-muted)}

/* ---------- FAQ: the four decision questions ---------- */
.faq-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.faq-feat{display:flex!important;flex-direction:column;min-height:340px;padding:26px 24px 24px}
.faq-feat-k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.faq-feat-q{margin:12px 0 10px;font-family:var(--display);font-size:clamp(21px,1.9vw,26px);font-weight:600;line-height:1.18;letter-spacing:-.012em}
.faq-feat-a{font-size:15px;line-height:1.55;color:var(--shop-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.faq-feat-go{margin-top:auto;padding-top:18px;font-size:15px;font-weight:500;color:var(--accent)}
.faq-feat-go::after{content:" \203A"}
.faq-feat--aqua{background:linear-gradient(180deg,#EAF7F8 0%,#F7FBFC 100%)!important}
.faq-feat--dark{background:var(--shop-dark)!important;color:#fff!important}
.faq-feat--dark .faq-feat-k,.faq-feat--dark .faq-feat-go{color:#7FE0E6}
.faq-feat--dark .faq-feat-a{color:rgba(255,255,255,.76)}
.faq-feat:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- FAQ: the full list ---------- */
.faq-intro{margin:-12px 0 clamp(36px,5vw,56px);font-size:17px;line-height:1.65;color:var(--shop-muted);max-width:68ch}
.faq-group{scroll-margin-top:96px}
.faq-group + .faq-group{margin-top:clamp(44px,6vw,72px)}
.faq-group[hidden]{display:none}
.faq-group-head{margin-bottom:18px}
.faq-group-h{margin:0;font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.015em;color:var(--shop-ink)}
.faq-group-d{margin:6px 0 0;font-size:15px;color:var(--shop-muted)}
.faqx{display:grid;gap:12px}
.faqx-item{background:#fff;border-radius:16px;box-shadow:var(--shop-shadow);scroll-margin-top:96px}
.faqx-item[hidden]{display:none}
.faqx-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:44px;padding:20px 22px 20px 24px;border-radius:16px;
}
.faqx-item summary::-webkit-details-marker{display:none}
.faqx-q{font-size:clamp(17px,1.6vw,20px);font-weight:600;line-height:1.35;color:var(--shop-ink);overflow-wrap:anywhere}
.faqx-ico{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--shop-page)}
.faqx-ico::before,.faqx-ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--accent);border-radius:1px;transition:transform 250ms var(--shop-ease)}
.faqx-ico::after{transform:rotate(90deg)}
.faqx-item[open] .faqx-ico::after{transform:rotate(0deg)}
.faqx-item summary:hover .faqx-q{color:var(--accent)}
.faqx-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faqx-a{padding:0 24px 22px}
.faqx-a p{margin:0;font-size:16.5px;line-height:1.7;color:#3E4449;max-width:70ch}
.faqx-item[open] .faqx-a{animation:faqx-in 250ms var(--shop-ease)}
@keyframes faqx-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faq-empty{margin-top:24px;padding:32px 28px;background:#fff;border-radius:var(--shop-radius);box-shadow:var(--shop-shadow)}
.faq-empty[hidden]{display:none}
.faq-empty-q{margin:0 0 6px;font-size:19px;font-weight:600;color:var(--shop-ink)}
.faq-empty p{margin:0 0 18px;color:var(--shop-muted)}

/* ---------- FAQ: related services and help ---------- */
.svc-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc-card{display:flex!important;flex-direction:column}
.svc-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--shop-page)}
.svc-card-media img{width:100%;height:100%;object-fit:cover}
.svc-card-t{display:block;padding:16px 20px 18px;font-size:17px;font-weight:600}
.svc-card-t::after{content:" \203A";color:var(--accent)}
.help-card{
  padding:clamp(32px,5vw,64px);border-radius:var(--radius-feature);
  background:linear-gradient(135deg,#EAF7F8 0%,#F2F0FE 100%);
}
.help-h{margin:0 0 10px;font-family:var(--display);font-size:clamp(28px,3.4vw,44px);font-weight:600;line-height:1.12;letter-spacing:-.02em;color:var(--shop-ink)}
.help-p{margin:0 0 26px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--shop-muted);max-width:52ch}

/* ---------- About: hero ---------- */
.ax-hero{padding-bottom:clamp(40px,6vw,80px)}
.ax-h1{max-width:18ch}
.ax-lede{max-width:46ch}
.ax-hero-media{margin:clamp(32px,5vw,56px) auto 0;padding:0 var(--gut);max-width:var(--maxw)}
.ax-hero-media img{display:block;width:100%;height:clamp(300px,52vw,640px);object-fit:cover;border-radius:var(--radius-feature)}

/* ---------- About: who we are ---------- */
.ax-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,6vw,96px);align-items:start}
.ax-split-h{margin:0}
.ax-body{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.65;color:#3E4449}
.ax-body-s{margin:0 0 18px;font-size:17px;line-height:1.7;color:#3E4449}
.ax-intro{margin:-10px 0 clamp(32px,4vw,48px);font-size:18px;line-height:1.65;color:var(--shop-muted);max-width:64ch}

/* ---------- About: six responsibilities ---------- */
.ax-story{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ax-story-item:nth-child(1),.ax-story-item:nth-child(4),.ax-story-item:nth-child(5){grid-column:span 2}
.ax-story-card{display:flex!important;flex-direction:column;height:100%;border-radius:24px!important}
.ax-story-media{display:block;height:clamp(200px,22vw,300px);overflow:hidden;background:var(--shop-page)}
.ax-story-media img{width:100%;height:100%;object-fit:cover}
.ax-story-copy{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 26px 24px}
.ax-story-k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ax-story-t{margin:8px 0 6px;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.15;letter-spacing:-.012em}
.ax-story-p{font-size:15.5px;line-height:1.55;color:var(--shop-muted)}
.ax-story-go{margin-top:auto;padding-top:14px;font-size:15px;font-weight:500;color:var(--accent)}
.ax-story-go::after{content:" \203A"}

/* ---------- About: how we work ---------- */
.ax-prins{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ax-prin{padding:28px 26px;background:var(--shop-page);border-radius:var(--shop-radius)}
.ax-prin-n{display:block;font-family:var(--display);font-size:44px;font-weight:600;line-height:1;letter-spacing:-.03em;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.ax-prin-t{margin:18px 0 8px;font-size:19px;font-weight:600;line-height:1.3;color:var(--shop-ink)}
.ax-prin-p{margin:0;font-size:15px;line-height:1.6;color:var(--shop-muted)}

/* ---------- About: the one dark section ---------- */
.ax-night{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#EAF3F6;padding:clamp(64px,9vw,120px) 0}
.ax-night-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,88px);align-items:center}
.ax-night .sx-eyebrow{color:#7FE0E6}
.ax-night .sx-h2{color:#fff;max-width:18ch}
.ax-night-p{margin:0 0 28px;font-size:18px;line-height:1.65;color:rgba(234,243,246,.84);max-width:46ch}
.ax-night .btn{background:var(--brand-cyan);border-color:var(--brand-cyan);color:var(--on-gradient)}
.ax-night .btn:hover{background:#fff;border-color:#fff;color:var(--night)}
.ax-night-media{margin:0}
.ax-night-media img{display:block;width:100%;height:clamp(360px,44vw,580px);object-fit:cover;border-radius:var(--radius-feature)}

/* ---------- About: who we work for ---------- */
.ax-aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ax-aud-card{display:flex!important;flex-direction:column;border-radius:24px!important}
.ax-aud-media{display:block;height:clamp(220px,26vw,340px);overflow:hidden;background:var(--shop-page)}
.ax-aud-media img{width:100%;height:100%;object-fit:cover}
.ax-aud-copy{padding:24px 28px 28px}
.ax-aud-copy p{margin:0;font-size:16px;line-height:1.65;color:var(--shop-muted)}
.ax-aud-t{margin:0 0 8px;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.2;color:var(--shop-ink)}
.ax-aud-compact{grid-column:1 / -1;background:linear-gradient(135deg,#EAF7F8 0%,#F7FBFC 100%)!important}
.ax-aud-compact .sx-link{margin-top:10px}

/* ---------- About: region ---------- */
.ax-region{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.ax-locs{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ax-loc{display:flex!important;flex-direction:column;gap:4px;min-height:44px;padding:18px 20px}
.ax-loc-k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--shop-muted)}
.ax-loc-t{font-size:18px;font-weight:600}
.ax-loc-t::after{content:" \203A";color:var(--accent)}
.ax-loc-base{background:var(--shop-dark)!important;color:#fff!important}
.ax-loc-base .ax-loc-k{color:#7FE0E6}
.ax-region-media{margin:0}
.ax-region-media img{display:block;width:100%;height:clamp(320px,40vw,540px);object-fit:cover;border-radius:var(--radius-feature)}

/* ---------- About: brands ---------- */
.ax-brands{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ax-brands li{padding:12px 20px;border-radius:100px;background:#fff;box-shadow:var(--shop-shadow);font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--shop-ink)}

/* ---------- About: gallery and contact ---------- */
.ax-gallery{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(24px,4vw,48px)}
.ax-gallery .shelf-h,.ax-gallery .sx-h2{margin-bottom:0}
.ax-contact .nap{background:#fff;border-radius:var(--shop-radius);box-shadow:var(--shop-shadow);border-top:0;padding:8px 26px;margin-bottom:clamp(40px,6vw,64px)}
.ax-contact .napr:last-child{border-bottom:0}
.ax-contact .h2{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.02em}
.ax-cta .help-h{margin-bottom:24px}

/* ---------- tablets and phones ---------- */
@media (max-width:1100px){
  .faq-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ax-prins{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ax-split,.ax-night-grid,.ax-region{grid-template-columns:1fr}
  .ax-story{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ax-story-item:nth-child(n){grid-column:span 1}
  .ax-story-item:nth-child(1){grid-column:1 / -1}
}
@media (max-width:767px){
  .faq-topics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .faq-feats{grid-template-columns:1fr}
  .faq-feat{min-height:0}
  .svc-cards{grid-template-columns:1fr 1fr;gap:12px}
  .svc-card-t{font-size:15px;padding:12px 14px 14px}
  .ax-story{grid-template-columns:1fr}
  .ax-aud{grid-template-columns:1fr}
  .ax-prins{grid-template-columns:1fr}
  .ax-locs{grid-template-columns:1fr}
  .faqx-item summary{padding:16px 16px 16px 18px}
  .faqx-a{padding:0 18px 18px}
  .help-card{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .page-store .store-card,.faq-topic,.faqx-ico::before,.faqx-ico::after{transition:none}
  .page-store a.store-card:hover{transform:none}
  .faqx-item[open] .faqx-a{animation:none}
}

/* ---------- the ELBE section, dark like the Aiper one ----------
   Pishina-KS is an authorised Elbe dealer, and the client asked for the liner
   section to carry the same treatment as the Aiper feature: the night ground,
   the star layer and the cyan badge. Only colours change; the layout above
   is the same section. */
.elbe-dark{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#EAF3F6}
.has-water .sec.elbe-dark{background:var(--night)}
.elbe-dark > .wrap{position:relative;z-index:1}
.elbe-dark .badge{background:rgba(30,202,211,.14);color:var(--brand-cyan)}
.elbe-dark .h2{color:#fff}
.elbe-dark .lede{color:var(--on-deep-2)}
.elbe-dark .elbe-lead{background:transparent}
.elbe-dark .elbe-facts li{color:#D6E4EA;border-top-color:rgba(234,243,246,.12)}
.elbe-dark .elbe-facts li::before{border-color:var(--brand-cyan)}
.elbe-dark .elbe-mat-h{color:rgba(234,243,246,.72)}
.elbe-dark .mat{background:rgba(255,255,255,.06);border-color:rgba(234,243,246,.12)}
.elbe-dark .mat:hover{box-shadow:0 18px 40px rgba(0,0,0,.35)}
.elbe-dark .mat-shot{background:rgba(255,255,255,.04)}
.elbe-dark .mat-n{color:#fff}
.elbe-dark .mat-t{color:rgba(234,243,246,.74)}
.elbe-dark .btn{background:var(--brand-cyan);border-color:var(--brand-cyan);color:var(--on-gradient)}
.elbe-dark .btn:hover{background:#fff;border-color:#fff;color:var(--night);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.elbe-dark .care-more,.elbe-dark .care-more:visited{color:var(--brand-cyan)}
.elbe-dark .care-more:hover{color:#fff}

/* ============================================================
   THE LINER TESTER
   One rendered pool, every Elbe material, water in or out. The picture is
   the point, so it takes two thirds of the row; the choices sit beside it
   as swatches with names, never colour alone.
   ============================================================ */
.lt-lede{max-width:56ch}
.lt-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start;margin-top:clamp(24px,3vw,36px)}
.lt-stage{margin:0;position:relative;border-radius:var(--radius-card);overflow:hidden;background:#0B1419;box-shadow:0 2px 6px rgba(0,0,0,.06),0 18px 48px rgba(0,0,0,.12)}
.lt-img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;transition:opacity .28s var(--ease-out)}
.lt-img.is-swapping{opacity:.55}
.lt-cap{position:absolute;left:14px;bottom:14px;padding:7px 13px;border-radius:100px;background:rgba(7,25,35,.72);color:#fff;font-size:13.5px;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lt-panel{display:flex;flex-direction:column;gap:18px}
.lt-toggle{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:100px;background:var(--canvas-alt);border:1px solid var(--line)}
.lt-tg{min-height:44px;border:0;border-radius:100px;background:transparent;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:500;color:var(--text-secondary);transition:background .25s var(--ease-out),color .25s var(--ease-out)}
.lt-tg.on{background:#fff;color:var(--text-primary);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lt-tg:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:100px}
.lt-sws{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lt-sw{width:100%;min-height:56px;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;font-family:var(--font);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.lt-sw:hover{border-color:var(--line-strong)}
.lt-sw.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-muted)}
.lt-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lt-sw-img{flex:0 0 42px;width:42px;height:42px;border-radius:10px;overflow:hidden;background:var(--canvas-alt)}
.lt-sw-img img{width:100%;height:100%;object-fit:cover;display:block}
.lt-sw-n{font-size:14px;font-weight:600;line-height:1.25;color:var(--text-primary)}
.lt-ask{align-self:flex-start}
.lt-note{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
@media (max-width:900px){
  .lt-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .lt-img,.lt-tg,.lt-sw{transition:none}
}

/* ============================================================
   OPENING A VIDEO
   The open button sits top-left on every clip card (play/pause keeps the
   top-right), and the dialog shows the clip as large as the screen allows,
   in its own shape, with the browser's controls.
   ============================================================ */
.vcard-open{
  position:absolute;top:14px;left:14px;z-index:3;width:44px;height:44px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(0,0,0,.5);color:#fff;
  transition:background .3s var(--ease-out);
}
.vcard-open:hover{background:rgba(0,0,0,.72)}
.vcard-open:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}
/* four corner marks: the expand symbol, drawn so it needs no icon file */
.vcard-open::before{
  content:"";position:absolute;left:13px;top:13px;width:18px;height:18px;
  background:
    linear-gradient(#fff,#fff) 0 0/7px 2px no-repeat,
    linear-gradient(#fff,#fff) 0 0/2px 7px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/7px 2px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/2px 7px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/7px 2px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/2px 7px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/7px 2px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/2px 7px no-repeat;
}
.smart-shot{position:relative}
.smart-shot .vcard-open{top:12px;left:12px}

.vdlg{
  margin:0;padding:0;border:0;background:transparent;color:#fff;
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
}
.vdlg[open]{display:block}
.vdlg::backdrop{background:rgba(4,10,14,.92)}
.vdlg-inner{
  position:relative;box-sizing:border-box;width:100%;height:100%;
  display:grid;place-items:center;padding:64px 16px 20px;
}
.vdlg-video{
  display:block;width:auto;height:auto;border-radius:14px;background:#000;
  max-width:min(94vw,1500px);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);
}
.vdlg-close{
  position:absolute;top:12px;right:14px;width:44px;height:44px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.16);
  transition:background .25s var(--ease-out);
}
.vdlg-close::before,.vdlg-close::after{
  content:"";position:absolute;left:12px;top:21px;width:20px;height:2px;background:#fff;border-radius:1px;
}
.vdlg-close::before{transform:rotate(45deg)}
.vdlg-close::after{transform:rotate(-45deg)}
.vdlg-close:hover{background:rgba(255,255,255,.28)}
.vdlg-close:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}
body.vdlg-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .vcard-open,.vdlg-close{transition:none}
}

/* ============================================================
   THE SERVICE PAGES: POOL, SAUNA, LINER
   One system for three pages, in the store tokens: a slim section bar under
   the header, a short promise, large real media, one idea per section, the
   process as numbered steps, real work, the questions and one calm action.
   Each page keeps its own temperature: the pool is cool and structural, the
   sauna warm and quiet, the liner neutral so the material can be the colour.
   Scoped to .page-svc; the other three service pages are unchanged.
   ============================================================ */
.page-svc{
  --service-white:#FFFFFF;--service-gray:#F5F5F7;--service-ink:#1D1D1F;--service-muted:#6E6E73;
  --service-line:#D2D2D7;--service-blue:#087BB8;--service-cyan:#1ECAD3;--service-lilac:#9486F7;
  --service-dark:#071923;--service-radius:18px;--feature-radius:28px;
  --service-ease:cubic-bezier(0,0,.5,1);--reading-max:820px;
  --svc-accent:var(--accent);--svc-eyebrow:var(--accent);--svc-ground:var(--service-gray);
  --svc-hl:linear-gradient(90deg,#066B78 0%,#087BB8 55%,#5B4FD6 100%);
  --svc-bar:calc(var(--nav-h-solid) + 56px);
}
.svc-sauna{--svc-eyebrow:#955A1C;--svc-ground:#F6F2EC;--svc-hl:linear-gradient(90deg,#8A4E14 0%,#B8691F 100%)}
.page-svc .sx-gray{background:var(--svc-ground)}
.page-svc .sx-eyebrow{color:var(--svc-eyebrow)}
.page-svc main [id]{scroll-margin-top:calc(var(--svc-bar) + 16px)}
/* a section receives focus after a jump from the bar, so the next Tab starts
   there; the whole block is not outlined for it */
.page-svc main section[tabindex="-1"]:focus{outline:none}

/* ---------- the section bar ---------- */
.svn{
  position:sticky;top:var(--nav-h-solid);z-index:90;
  background:rgba(255,255,255,.82);border-bottom:1px solid rgba(0,0,0,.08);
  backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);
  transition:box-shadow .3s var(--service-ease),background .3s var(--service-ease);
}
.svn.is-stuck{background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(0,0,0,.06)}
/* the bar and its menu are never a scroll anchor: when the menu closed after a
   jump, the browser re-anchored and pulled the section 24px back down */
.svn,.svn *{overflow-anchor:none}
.svn-in{display:flex;align-items:center;gap:20px;min-height:56px}
.svn-name{margin:0;flex:0 1 auto;min-width:0;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--service-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svn-menu{margin-left:auto;display:flex;align-items:center;gap:6px}
.svn-links{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.svn-links a,.svn-links a:visited{
  display:inline-flex;align-items:center;min-height:44px;padding:0 11px;border-radius:100px;
  font-size:13.5px;font-weight:500;color:#3A3A3C;text-decoration:none;white-space:nowrap;
  transition:color .2s var(--service-ease),background .2s var(--service-ease);
}
.svn-links a:hover{color:var(--service-ink);background:rgba(0,0,0,.04)}
.svn-links a[aria-current="true"]{color:var(--service-ink);font-weight:600}
.svn-cta,.svn-cta:visited{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;
  margin-left:8px;border-radius:100px;background:var(--svc-accent);color:#fff;
  font-size:13.5px;font-weight:600;text-decoration:none;position:relative;
  transition:background .25s var(--service-ease);
}
.svn-cta::after{content:"";position:absolute;inset:-4px -2px}
.svn-cta:hover{background:var(--ink)}
.svn-toggle{
  display:none;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:100px;
  background:transparent;color:var(--service-ink);font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;
}
.svn-toggle::after{
  content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.8px 1.8px 0;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--service-ease);
}
.svn-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.svn a:focus-visible,.svn-toggle:focus-visible{outline:2px solid var(--svc-accent);outline-offset:2px}
@media (max-width:980px){
  .svn-toggle{display:inline-flex}
  .svn-links{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gut) 14px;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 14px 28px rgba(0,0,0,.08);
  }
  .svn:not(.is-open) .svn-links{display:none}
  .svn-links a{min-height:48px;padding:0 4px;border-radius:0;font-size:16px;border-bottom:1px solid rgba(0,0,0,.06)}
  .svn-links li:last-child a{border-bottom:0}
}
@media (max-width:980px){
  .svn-in{gap:10px}
  .svn-menu{flex:0 0 auto;gap:2px}
  .svn-cta{margin-left:4px}
}
@media (max-width:420px){
  .svn-name{font-size:16px}
  .svn-toggle{padding:0 6px;font-size:13.5px}
  .svn-cta{padding:0 12px;font-size:13px}
}

/* ---------- hero ---------- */
.svh{padding:clamp(44px,6.5vw,96px) 0 0}
.svh-copy{max-width:1040px}
.svh-h1{
  margin:0;font-family:var(--display);font-size:clamp(44px,7vw,92px);font-weight:600;
  line-height:1.02;letter-spacing:-.03em;color:var(--service-ink);max-width:15ch;text-wrap:balance;
}
.svh-lede{margin:22px 0 0;font-size:clamp(19px,2.2vw,28px);line-height:1.38;letter-spacing:-.01em;color:var(--service-muted);max-width:36ch}
.svh .sx-actions{margin-top:30px}
.svh-media{margin:clamp(40px,5.5vw,72px) auto 0;padding:0 var(--gut);max-width:var(--maxw)}
.svh-media img,.svh-media video{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .svh-copy > *{animation:svc-rise 640ms var(--service-ease) both}
  .svh-copy > :nth-child(2){animation-delay:60ms}
  .svh-copy > :nth-child(3){animation-delay:120ms}
  .svh-copy > :nth-child(4){animation-delay:180ms}
  .svh-media .svh-frame img{animation:svc-settle 1200ms var(--service-ease) both}
}
@keyframes svc-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes svc-settle{from{transform:scale(1.03)}to{transform:none}}
.svh-frame{position:relative;margin:0;overflow:hidden;border-radius:var(--feature-radius);background:#DCE3E6}

/* pool: the same riverside pool, as the shell and finished */
.svh-cmp .svh-frame{aspect-ratio:16/9}
/* each photograph arrives wrapped in a <picture> for its webp twin, so the two
   layers are the frame's children, not two adjacent images */
.svh-cmp .svh-frame > *{position:absolute;inset:0;display:block;transition:opacity 380ms var(--service-ease)}
.svh-cmp .svh-frame img{position:absolute;inset:0}
.svh-cmp .svh-frame > :nth-child(2){opacity:0}
.svh-cmp[data-show="after"] .svh-frame > :nth-child(2){opacity:1}
.svh-cmp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:16px}
.svh-cmp-cap{margin:0;font-size:15px;line-height:1.5;color:var(--service-muted)}
.svh-cmp-cap a,.svh-cmp-cap a:visited{color:var(--svc-accent);font-weight:500;text-decoration:none;white-space:nowrap}
.svh-cmp-cap a:hover{text-decoration:underline}

/* a segmented control, shared by the hero, the depth and the water toggle */
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:100px;background:#E8E8ED}
.seg button,.seg label{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border:0;border-radius:100px;background:transparent;cursor:pointer;
  font-family:var(--font);font-size:15px;font-weight:500;color:#48484A;white-space:nowrap;
  transition:background .25s var(--service-ease),color .25s var(--service-ease),box-shadow .25s var(--service-ease);
}
.seg button[aria-pressed="true"],.seg label:has(input:checked){background:#fff;color:var(--service-ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg button:focus-visible,.seg label:has(input:focus-visible){outline:2px solid var(--svc-accent);outline-offset:2px}

/* sauna: three portrait interiors side by side, so nothing is cropped to a strip */
.svh-tri{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.svh-tri .svh-frame{height:clamp(360px,44vw,620px)}
.svh-tri .svh-frame:first-child{border-radius:var(--feature-radius) 12px 12px var(--feature-radius)}
.svh-tri .svh-frame:nth-child(2){border-radius:12px}
.svh-tri .svh-frame:last-child{border-radius:12px var(--feature-radius) var(--feature-radius) 12px}

/* liner: a liner pool beside the clip of one being laid */
.svh-duo{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(10px,1.4vw,18px)}
.svh-duo .svh-frame{height:clamp(380px,46vw,640px)}
.svh-duo .vcard{width:auto;height:100%;border-radius:var(--feature-radius)}
.svh-duo .vcard-stage{height:100%}
.svh-duo .vcard-copy{padding:0 24px 20px}

/* ---------- the statement ---------- */
.svs{text-align:center}
.svs-h{
  margin:0 auto;font-family:var(--display);font-size:clamp(30px,4.6vw,58px);font-weight:600;
  line-height:1.12;letter-spacing:-.022em;color:var(--service-ink);max-width:22ch;text-wrap:balance;
}
.svs-hl{background:var(--svc-hl);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.svs-p{margin:clamp(22px,3vw,34px) auto 0;font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:#48484A;max-width:62ch}

/* ---------- headings and reading ---------- */
.page-svc .sx-h2{max-width:24ch;text-wrap:balance}
.svc-intro{margin:-8px 0 clamp(30px,4vw,48px);font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:#48484A;max-width:64ch}
.svc-read{max-width:calc(var(--reading-max) + 2 * var(--gut))}
.svc-p{margin:0 0 18px;font-size:clamp(17px,1.4vw,19px);line-height:1.7;color:#3A3A3C;max-width:62ch}
.svc-p:last-child{margin-bottom:0}

/* ---------- feature cards ---------- */
.svf-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.svf{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--feature-radius);overflow:hidden;box-shadow:var(--shop-shadow)}
.svf-media{margin:0;aspect-ratio:4/3.4;overflow:hidden;background:#E8E8ED}
.svf-media img{display:block;width:100%;height:100%;object-fit:cover}
.svf-copy{display:flex;flex-direction:column;flex:1 1 auto;padding:26px 28px 30px}
.svf-k{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--svc-eyebrow)}
.svf-t{margin:0 0 10px;font-family:var(--display);font-size:clamp(26px,2.5vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.018em;color:var(--service-ink)}
.svf-p{margin:0;font-size:16.5px;line-height:1.55;color:var(--service-muted)}
.svf-go,.svf-go:visited{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--accent);text-decoration:none}
.svf-go::after{content:"\203A";margin-left:6px;font-size:18px;line-height:1}
.svf-go:hover{text-decoration:underline}
.svf--text{background:linear-gradient(160deg,#fff 0%,var(--svc-ground) 100%)}
.svf--text .svf-copy{justify-content:flex-end;min-height:280px}
.svf-shelf .shelf-item{width:min(400px,84vw)}
.svf-shelf .svf{min-height:520px}
.svf-shelf .svf--text{min-height:520px}

/* ---------- what is included ---------- */
.svi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svi-g{padding:28px 30px 30px;background:#fff;border-radius:var(--service-radius);box-shadow:var(--shop-shadow)}
.svi-h{margin:0 0 14px;font-size:19px;font-weight:600;line-height:1.3;color:var(--service-ink)}
.svi-l{list-style:none;margin:0;padding:0}
.svi-l li{position:relative;padding:11px 0 11px 34px;font-size:16.5px;line-height:1.5;color:#3A3A3C;border-top:1px solid #EDEDF0}
.svi-l li:first-child{border-top:0}
.svi-l li::before{
  content:"";position:absolute;left:4px;top:17px;width:12px;height:7px;
  border:solid var(--svc-accent);border-width:0 0 2px 2px;transform:rotate(-45deg);
}
.svi-note{margin:22px 0 0;font-size:15.5px;line-height:1.6;color:var(--service-muted);max-width:70ch}

/* ---------- a split editorial section ---------- */
.svx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.svx--flip .svx-media{order:2}
.svx-media{margin:0;overflow:hidden;border-radius:var(--feature-radius);background:#E8E8ED}
.svx-media img{display:block;width:100%;height:clamp(360px,44vw,620px);object-fit:cover}
.svx-copy .sx-h2{margin-bottom:22px}
.svx-cmp{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svx-cmp li{padding:20px 20px 22px;border-radius:var(--service-radius);background:#fff;box-shadow:var(--shop-shadow)}
.sx-gray .svx-cmp li{background:#fff}
.svx-cmp h3{margin:0 0 8px;font-size:16px;font-weight:600;line-height:1.35;color:var(--service-ink)}
.svx-cmp p{margin:0;font-size:15px;line-height:1.55;color:var(--service-muted)}
.svx-cmp li:first-child{box-shadow:inset 0 0 0 2px var(--svc-accent),var(--shop-shadow)}

/* ---------- depth ---------- */
.svd{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.svd-stage{margin:0;padding:clamp(18px,3vw,34px);background:#fff;border-radius:var(--feature-radius);box-shadow:var(--shop-shadow)}
.svd-svg{display:block;width:100%;height:auto}
.svd-ground{fill:#E9E3D8}
.svd-deck{fill:#CFC8BC}
.svd-shell{fill:#B9BDC1}
.svd-water{fill:url(#svd-w)}
.svd-mov,.svd-scale,.svd-wall{transform-box:view-box;transition:transform 420ms var(--service-ease)}
.svd-scale{transform-origin:0 76px}
.svd-wall{transform-origin:0 60px}
/* 120 px to the metre: the floor sits 144, 180 or 240 px under the waterline */
.svd[data-depth="150"] .svd-wall{transform:scaleY(1.2)}
.svd[data-depth="200"] .svd-wall{transform:scaleY(1.5333)}
.svd-table{display:grid;gap:0;margin:22px 0 0}
.svd-table div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid #EDEDF0}
.svd-table dt{font-weight:600;color:var(--service-ink)}
.svd-table dd{margin:0;color:#48484A}
.page-svc .story-card{display:flex}
.svh-clip{background:#0B1419}
.svd-tick{stroke:#8E8E93;stroke-width:1.2}
.svd-tick-t{font-family:var(--font);font-size:13px;fill:#6E6E73}
.svd-dim{stroke:var(--svc-accent);stroke-width:2}
.svd-dim-t{font-family:var(--font);font-size:17px;font-weight:600;fill:var(--svc-accent)}
.svd[data-depth="150"] .svd-mov{transform:translateY(36px)}
.svd[data-depth="200"] .svd-mov{transform:translateY(96px)}
.svd[data-depth="150"] .svd-scale{transform:scaleY(1.25)}
.svd[data-depth="200"] .svd-scale{transform:scaleY(1.6667)}
.svd-dim-t{transition:opacity .2s}
.svd-panel fieldset{margin:0;padding:0;border:0;min-width:0}
.svd-legend{margin:0 0 12px;padding:0;font-size:14px;font-weight:600;color:var(--service-ink)}
.svd-panel .seg{display:grid;width:100%;max-width:420px}
.svd-out{margin:26px 0 0}
.svd-m{display:block;font-family:var(--display);font-size:clamp(46px,5vw,68px);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--service-ink)}
.svd-for{display:block;margin-top:8px;font-size:clamp(19px,1.7vw,23px);font-weight:500;color:var(--svc-accent)}
.svd-notes{margin-top:24px;padding-top:20px;border-top:1px solid var(--service-line)}
.svd-notes p{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:#48484A}
.svd-notes .svd-caveat{font-size:14px;color:var(--service-muted)}
.svd-table{margin-top:26px}

/* ---------- process ---------- */
.svp{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.4vw,28px)}
.svp-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(22px,3vw,36px);background:#fff;border-radius:var(--feature-radius);box-shadow:var(--shop-shadow)}
.sx-sec:not(.sx-gray) .svp-step{background:var(--svc-ground);box-shadow:none}
.svp-step--text{grid-template-columns:minmax(0,1fr)}
.svp-step--text .svp-copy{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,3vw,40px);align-items:baseline}
.svp-step--text .svp-n{grid-row:span 2}
.svp-n{display:block;font-family:var(--display);font-size:clamp(44px,5vw,72px);font-weight:600;line-height:1;letter-spacing:-.04em;background:var(--svc-hl);-webkit-background-clip:text;background-clip:text;color:transparent}
.svp-t{margin:14px 0 10px;font-family:var(--display);font-size:clamp(24px,2.4vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--service-ink)}
.svp-step--text .svp-t{margin-top:0}
.svp-p{margin:0;font-size:clamp(16.5px,1.3vw,18px);line-height:1.6;color:#48484A;max-width:52ch}
.svp-media{margin:0;overflow:hidden;border-radius:20px;background:#E8E8ED}
.svp-media img{display:block;width:100%;height:clamp(240px,28vw,400px);object-fit:cover}
.svp-media--clip{justify-self:center;width:min(100%,300px);background:transparent;border-radius:var(--service-radius)}
.svp-media--clip .vcard{width:100%}
.svp-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.svp-card{padding:24px 22px 26px;background:#fff;border-radius:var(--service-radius);box-shadow:var(--shop-shadow)}
.sx-sec:not(.sx-gray) .svp-card{background:var(--svc-ground);box-shadow:none}
.svp-card .svp-n{font-size:40px}
.svp-card .svp-t{font-size:20px;margin:14px 0 8px}
.svp-card .svp-p{font-size:15.5px}

/* ---------- the dark detail ---------- */
.svk{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#EEF2F4;padding:clamp(72px,10vw,136px) 0}
.svc-sauna .svk{background:#15110E;color:#F4EEE7}
.svk-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.svk .sx-eyebrow{color:#E0A866}
.svk .sx-h2{color:#fff;max-width:16ch}
.svk-p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:rgba(244,238,231,.8);max-width:44ch}
.svk-media{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:end}
.svk-media figure{margin:0;overflow:hidden;border-radius:22px;background:#221A14}
.svk-media img{display:block;width:100%;object-fit:cover}
.svk-media figure:first-child img{height:clamp(360px,42vw,580px)}
.svk-media figure:last-child img{height:clamp(260px,30vw,420px)}

/* ---------- chips ---------- */
.svchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.svchips li{padding:12px 20px;border-radius:100px;background:#fff;box-shadow:var(--shop-shadow);font-size:16px;font-weight:600;color:var(--service-ink)}
.svsub{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3vw,36px);border-radius:var(--feature-radius);background:#fff;box-shadow:var(--shop-shadow)}
.svsub-h{margin:0;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.2;color:var(--service-ink)}
.svsub-p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--service-muted)}
.svsub .svchips li{background:var(--service-gray);box-shadow:none}

/* ---------- two choices ---------- */
.svtwo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svtwo li{display:flex;flex-direction:column;min-height:300px;padding:clamp(28px,3.4vw,44px);border-radius:var(--feature-radius);background:#fff;box-shadow:var(--shop-shadow)}
.svtwo li:first-child{background:linear-gradient(150deg,#EAF7F8 0%,#FFFFFF 70%)}
.svtwo li:last-child{background:linear-gradient(150deg,#F2F0FE 0%,#FFFFFF 70%)}
.svtwo-k{margin:0 0 auto;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--accent)}
.svtwo-t{margin:40px 0 12px;font-family:var(--display);font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--service-ink)}
.svtwo-p{margin:0;font-size:17px;line-height:1.6;color:#48484A;max-width:46ch}

/* ---------- the material explorer ---------- */
.svm{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.svm-stage{position:relative;margin:0;aspect-ratio:8/5;overflow:hidden;border-radius:var(--feature-radius);background:#0B1419;box-shadow:0 2px 6px rgba(0,0,0,.06),0 20px 50px rgba(0,0,0,.14)}
.svm-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.svm-top{opacity:0;transition:opacity 320ms var(--service-ease)}
.svm-top.is-on{opacity:1}
.svm-cap{position:absolute;left:16px;bottom:16px;z-index:2;margin:0;padding:8px 14px;border-radius:100px;background:rgba(7,25,35,.72);color:#fff;font-size:13.5px;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.svm-note{margin:14px 2px 0;font-size:14px;line-height:1.55;color:var(--service-muted)}
.svm-panel{display:flex;flex-direction:column;gap:18px}
.svm-name{margin:0;font-family:var(--display);font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.018em;color:var(--service-ink)}
.svm-desc{margin:8px 0 0;min-height:3.2em;font-size:16px;line-height:1.55;color:#48484A}
.svm-panel fieldset{margin:0;padding:0;border:0;min-width:0}
.svm-legend{margin:0 0 10px;padding:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--service-muted)}
.svm-panel .seg{display:grid;width:100%}
.svm-sws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.svm-sw{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:6px 10px 6px 6px;border-radius:14px;border:1px solid var(--service-line);background:#fff;cursor:pointer;transition:border-color .2s var(--service-ease),box-shadow .2s var(--service-ease)}
.svm-sw:hover{border-color:#AEAEB2}
.svm-sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.svm-sw:has(input:checked){border-color:var(--svc-accent);box-shadow:0 0 0 2px var(--accent-muted)}
.svm-sw:has(input:focus-visible){outline:2px solid var(--svc-accent);outline-offset:2px}
.svm-sw-img{flex:0 0 44px;width:44px;height:44px;border-radius:10px;overflow:hidden;background:#E8E8ED}
.svm-sw-img img{display:block;width:100%;height:100%;object-fit:cover}
.svm-sw-n{font-size:14px;font-weight:600;line-height:1.25;color:var(--service-ink)}
.svm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.sva{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);padding:clamp(26px,3.4vw,44px);border-radius:var(--feature-radius);background:#fff;box-shadow:var(--shop-shadow)}
.sva-h{margin:0;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.2;color:var(--service-ink)}
.sva-src{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--service-muted)}
/* our own warranty, kept apart from what the manufacturer states */
.sva-warranty{margin:18px 0 0;padding:16px 18px;border-radius:14px;background:#EAF7F8;color:#134A52;font-size:16px;line-height:1.5;font-weight:600}

/* ---------- liner parts ---------- */
.svparts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svpart{display:flex!important;flex-direction:column;height:100%}
.svpart-media{display:grid;place-items:center;aspect-ratio:4/3;padding:22px;background:#fff;border-bottom:1px solid #F0F0F2}
.svpart-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.svpart-copy{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 22px 20px}
.svpart-k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.svpart-t{margin:6px 0 0;font-size:18px;font-weight:600;line-height:1.3;color:var(--service-ink)}
.svpart-go{margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:500;color:var(--accent)}
.svpart-go::after{content:" \203A"}

/* ---------- where, related, and the last word ---------- */
.svr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.svr-h3{margin:0 0 16px;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--service-muted)}
.svr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.svr-list a,.svr-list a:visited{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:14px 18px;
  border-radius:16px;background:#fff;box-shadow:var(--shop-shadow);color:var(--service-ink);
  font-size:16px;font-weight:600;text-decoration:none;
  transition:transform 300ms var(--service-ease),box-shadow 300ms var(--service-ease);
}
.svr-list a::after{content:"\203A";font-size:20px;color:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .svr-list a:hover{transform:scale(1.01);box-shadow:var(--shop-shadow-hover)}
}
.svr-list a:focus-visible{outline:2px solid var(--svc-accent);outline-offset:3px}
.svc-cta .help-card{text-align:left}
.svc-cta .help-p{max-width:56ch}

/* ---------- the photo shelf ---------- */
.svg-shelf .shelf-item{width:auto}
.svg-fig{margin:0;overflow:hidden;border-radius:var(--service-radius);background:#E8E8ED;box-shadow:var(--shop-shadow)}
.svg-fig img{display:block;height:clamp(340px,40vw,520px);width:auto;aspect-ratio:3/4;object-fit:cover}

/* ---------- tablets and phones ---------- */
@media (max-width:1100px){
  .svp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svparts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .svf-grid{grid-template-columns:1fr}
  .svf-grid .svf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .svf-grid .svf-media{aspect-ratio:auto;height:100%;min-height:240px}
  .svi{grid-template-columns:1fr}
  .svx,.svd,.svk-grid,.svm,.svr,.sva,.svsub{grid-template-columns:1fr}
  .svx--flip .svx-media{order:0}
  .svp-step{grid-template-columns:1fr}
  .svp-step .svp-media{order:-1}
  .svh-tri{grid-template-columns:1fr 1fr}
  .svh-tri .svh-frame:first-child{grid-column:1 / -1;border-radius:var(--feature-radius) var(--feature-radius) 12px 12px}
  .svh-tri .svh-frame:nth-child(2){border-radius:12px 12px 12px var(--feature-radius)}
  .svh-tri .svh-frame:last-child{border-radius:12px 12px var(--feature-radius) 12px}
  .svh-tri .svh-frame{height:clamp(240px,52vw,420px)}
  .svh-tri .svh-frame:first-child{height:clamp(300px,70vw,520px)}
  .svm-sws{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:767px){
  .svh-cmp .svh-frame{aspect-ratio:4/5}
  .svh-duo{grid-template-columns:1fr 1fr}
  .svh-duo .svh-frame{height:clamp(300px,90vw,440px)}
  .svh-duo .vcard-copy{padding:0 14px 12px}
  .svh-duo .vcard-title{font-size:16px}
  .svf-grid .svf{display:flex}
  .svf-grid .svf-media{aspect-ratio:4/3;height:auto;min-height:0}
  /* on a phone the cards size to their words; the row still evens them out */
  .svf-shelf .svf,.svf-shelf .svf--text{min-height:0}
  .svf--text .svf-copy{min-height:220px}
  .svf-copy{padding:22px 22px 26px}
  .svx-cmp{grid-template-columns:1fr}
  .svp-cards{grid-template-columns:1fr}
  .svp-step{padding:18px 18px 24px}
  .svp-step--text .svp-copy{grid-template-columns:1fr}
  .svp-step--text .svp-n{grid-row:auto}
  .svp-step--text .svp-t{margin-top:12px}
  .svk-media{grid-template-columns:1fr 1fr}
  .svk-media figure:first-child img{height:clamp(260px,70vw,380px)}
  .svk-media figure:last-child img{height:clamp(200px,52vw,300px)}
  .svm-sws{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svtwo{grid-template-columns:1fr}
  .svtwo li{min-height:0}
  .svtwo-t{margin-top:24px}
  .svparts{grid-template-columns:1fr 1fr;gap:12px}
  .svpart-copy{padding:14px 14px 16px}
  .svpart-t{font-size:15.5px}
  .svr-list{grid-template-columns:1fr}
  .svg-fig img{height:clamp(300px,96vw,420px)}
  .svd-panel .seg{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .svn,.svn-links a,.svn-cta,.seg button,.seg label,.svh-cmp .svh-frame img,.svd-mov,.svd-scale,.svm-top,.svm-sw,.svr-list a{transition:none}
  .svr-list a:hover{transform:none}
}

/* ============================================================
   FILTRATION, COVERS, MAINTENANCE
   The same system as pool, sauna and liner. Filtration is cool and exact,
   covers wide and calm, maintenance bright with small teal marks. Each has
   one navy section: the plant room, the safety note, the winter.
   ============================================================ */
.svc-filter{--svc-hl:linear-gradient(90deg,#066B78 0%,#087BB8 60%,#1C9FB0 100%)}
.svc-care{--svc-eyebrow:#0B7A6E;--svc-hl:linear-gradient(90deg,#0B7A6E 0%,#087BB8 100%)}
.svh-one .svh-frame{aspect-ratio:16/8}
.svf-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.svf-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.svf-grid--2 .svf--text .svf-copy{justify-content:flex-start;min-height:0;padding:30px 34px 34px}
.svf-grid--2 .svf-p{font-size:17.5px;line-height:1.6;max-width:46ch}
.svf-grid--4 .svf--text .svf-copy{justify-content:flex-start;min-height:0}
.svf-grid--4 .svf-t{font-size:clamp(22px,1.9vw,27px)}
.svf-grid--compact .svf-media{aspect-ratio:1/1}
.svf-grid--compact .svf--text{min-height:100%}
.svf-grid--compact .svf--text .svf-copy{min-height:200px;justify-content:flex-end}
.svf--product .svf-media{aspect-ratio:4/3;display:grid;place-items:center;padding:26px;background:#fff;border-bottom:1px solid #F0F0F2}
.svf--product .svf-media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

/* the water's route */
.svflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;position:relative}
.svflow-step{position:relative;padding:22px 18px 22px;background:var(--service-gray);border-radius:var(--service-radius)}
.svflow-step.is-optional{background:#fff;box-shadow:inset 0 0 0 1.5px var(--service-line)}
.svflow-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--svc-accent);color:#fff;font-size:14px;font-weight:600}
.svflow-step.is-optional .svflow-n{background:#fff;color:var(--svc-accent);box-shadow:inset 0 0 0 2px var(--svc-accent)}
.svflow-t{margin:14px 0 6px;font-size:16.5px;font-weight:600;line-height:1.3;color:var(--service-ink)}
.svflow-opt{display:inline-block;margin-left:2px;padding:1px 8px;border-radius:100px;background:#EAF7F8;color:var(--accent);font-size:11.5px;font-weight:600;vertical-align:2px}
.svflow-p{margin:0;font-size:14.5px;line-height:1.5;color:#48484A}
/* the connector: a cyan dash that runs one way */
.svflow-step:not(:last-child)::after{
  content:"";position:absolute;top:38px;right:-14px;width:14px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-cyan) 0 50%,rgba(30,202,211,.25) 50% 100%) 0 0/8px 3px repeat-x;
}
@media (prefers-reduced-motion:no-preference){
  .svflow-step:not(:last-child)::after{animation:svflow-run 900ms linear infinite}
  body.paused .svflow-step::after{animation-play-state:paused}
}
@keyframes svflow-run{to{background-position:8px 0}}

/* sand or glass */
.svcmp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svcmp-card{padding:clamp(26px,3.4vw,40px);border-radius:var(--feature-radius);background:var(--service-gray)}
.svcmp-t{margin:6px 0 10px;font-family:var(--display);font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.018em;color:var(--service-ink)}
.svcmp-p{margin:0;font-size:17px;line-height:1.6;color:#48484A}
.svcmp-after{margin-top:26px}

/* dark chips and the dark section's action */
.svchips--dark li{background:rgba(255,255,255,.08);box-shadow:none;color:#EEF2F4}
.svk .svchips{margin-top:22px}
.svk-act{margin:26px 0 0}
.svk .btn.wa{background:var(--brand-cyan);border-color:var(--brand-cyan);color:var(--on-gradient)}
.svk .btn.wa:hover{background:#fff;border-color:#fff;color:var(--night)}
.svc-filter .svk .sx-eyebrow,.svc-cover .svk .sx-eyebrow,.svc-care .svk .sx-eyebrow{color:#7FE0E6}
.svk-one{margin:0;overflow:hidden;border-radius:22px}
.svk-one img{display:block;width:100%;height:clamp(320px,40vw,560px);object-fit:cover}

/* the cover, as an illustration */
.svcov-stage{margin:0;padding:clamp(12px,2.4vw,28px);background:var(--service-gray);border-radius:var(--feature-radius)}
.svcov-stage svg{display:block;width:100%;height:auto}
.svcov-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:18px}
.svcov-state{margin:0;font-size:16px;font-weight:600;color:var(--service-ink)}
.svcov-note{margin:12px 2px 0;font-size:14px;line-height:1.55;color:var(--service-muted);max-width:70ch}

/* safety */
.svsafe-k{display:flex;align-items:center;gap:10px}
.svsafe-i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.8px solid currentColor;font-size:14px;font-weight:700;font-style:italic;font-family:Georgia,serif;letter-spacing:0;text-transform:none}
.svsafe .sx-h2{max-width:14ch}
.svsafe-l{list-style:none;margin:22px 0 0;padding:0}
.svsafe-l li{position:relative;padding:14px 0 14px 30px;font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:#EEF2F4;border-top:1px solid rgba(234,243,246,.14)}
.svsafe-l li::before{content:"";position:absolute;left:4px;top:24px;width:10px;height:2px;background:var(--brand-cyan)}

/* the care loop */
.svloop{position:relative;display:grid;grid-template-columns:1fr;place-items:center}
.svloop-ring{position:absolute;width:min(46%,400px);height:auto;opacity:.9}
.svloop-track{fill:none;stroke:#DDEFEF;stroke-width:3}
.svloop-run{fill:none;stroke:var(--svc-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:60 430;transform-origin:100px 100px}
.svloop-head{fill:none;stroke:var(--svc-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .svloop-run{animation:svloop-spin 6s linear infinite}
  body.paused .svloop-run{animation-play-state:paused}
}
@keyframes svloop-spin{to{transform:rotate(360deg)}}
.svloop-list{position:relative;list-style:none;margin:0 auto;padding:0;width:100%;max-width:1040px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px) clamp(120px,24vw,340px)}
/* the cover's parts */
.svcparts{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.svcparts-draw{margin:0;padding:clamp(12px,2.4vw,28px);background:var(--service-gray);border-radius:var(--feature-radius)}
.svcparts-draw svg{display:block;width:100%;height:auto}
.svcparts-draw figcaption{margin:10px 4px 0;font-size:13.5px;color:var(--service-muted)}
.svcparts-l{list-style:none;margin:0;padding:0;counter-reset:none}
.svcparts-l li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid #EDEDF0;font-family:var(--display);font-size:clamp(20px,1.8vw,24px);font-weight:600;color:var(--service-ink)}
.svcparts-l li:first-child{border-top:0}
.svcparts-n{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--svc-accent);color:#fff;font-family:var(--font);font-size:14px}
.svcparts-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.svcparts-photos figure{margin:0;overflow:hidden;border-radius:16px}
.svcparts-photos img{display:block;width:100%;height:180px;object-fit:cover}
@media (max-width:900px){.svcparts{grid-template-columns:1fr}}
.svloop-i{padding:24px 26px;background:#fff;border-radius:var(--service-radius);box-shadow:var(--shop-shadow)}
.svloop-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#E3F4F1;color:var(--svc-eyebrow);font-size:14px;font-weight:700}
.svloop-t{margin:12px 0 4px;font-family:var(--display);font-size:clamp(22px,2vw,28px);font-weight:600;color:var(--service-ink)}
.svloop-p{margin:0;font-size:16px;line-height:1.5;color:#48484A}

/* the schedule */
.svtable-wrap{border-radius:var(--feature-radius);background:var(--service-gray);padding:clamp(8px,1.4vw,16px)}
.svtable{width:100%;border-collapse:separate;border-spacing:0 8px}
.svtable thead th{padding:6px 22px 2px;text-align:left;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--service-muted)}
.svtable tbody th,.svtable tbody td{padding:18px 22px;background:#fff;text-align:left;vertical-align:top;font-size:17px;line-height:1.45}
.svtable tbody th{width:44%;font-weight:600;color:var(--service-ink);border-radius:14px 0 0 14px}
.svtable tbody td{color:#3A3A3C;border-radius:0 14px 14px 0;position:relative;padding-left:44px}
.svtable tbody td::before{content:"";position:absolute;left:22px;top:26px;width:8px;height:8px;border-radius:50%;background:var(--svc-eyebrow)}

/* the robot */
.svbot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.svbot-stage{margin:0;padding:clamp(10px,2vw,22px);background:var(--service-gray);border-radius:var(--feature-radius)}
.svbot-stage svg{display:block;width:100%;height:auto}
.svbot-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:16px}
.svbot-btns{display:flex;flex-wrap:wrap;gap:8px}
.svbot-btns .btn{min-height:44px}
.svbot-btns .btn:disabled{opacity:.4;cursor:default;pointer-events:none}
.svbot-state{margin:0;font-size:15.5px;font-weight:600;color:var(--service-ink);font-variant-numeric:tabular-nums}
.vcard--wide{width:100%}
.svbot-real .vcard{border-radius:var(--feature-radius)}
.svbot-model{margin:14px 0 18px;font-size:14px;font-weight:600;color:var(--service-muted)}
.svbot-limit{margin:0 0 18px;padding:18px 20px;border-radius:var(--service-radius);background:#E9F6F4;color:#20443F;font-size:16.5px;line-height:1.55;font-weight:500}
.svbot-links{display:flex;flex-wrap:wrap;gap:0 22px;margin:0}

/* winter */
.svseason-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.svseason-card{padding:20px 22px;border-radius:var(--service-radius);background:rgba(255,255,255,.07)}
.svseason-card h3{margin:0 0 8px;font-size:16px;font-weight:600;color:#fff}
.svseason-card ul{margin:0;padding-left:18px;color:rgba(238,242,244,.84);font-size:15px;line-height:1.55}
.svseason-card li{margin:4px 0}
.svseason-note{margin:18px 0 0;font-size:14.5px;color:rgba(238,242,244,.72);max-width:52ch}

/* catalogue cards on a service page */
.page-svc .scard{display:flex}
.scard-media--none{color:var(--service-muted);font-size:15px;font-weight:600;background:var(--service-gray)}

@media (max-width:1100px){
  .svflow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svflow-step:nth-child(3n)::after{display:none}
  .svf-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .svbot{grid-template-columns:1fr}
  .svloop-ring{display:none}
  .svloop-list{gap:14px}
  .svf-grid--4 .svf{display:flex}
  .svf-grid--4 .svf-media{aspect-ratio:4/3;height:auto;min-height:0}
}
@media (max-width:767px){
  .svh-one .svh-frame{aspect-ratio:4/5}
  .svflow{grid-template-columns:1fr;gap:18px}
  .svflow-step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:18px}
  .svflow-n{grid-row:span 2}
  .svflow-t{margin:4px 0 4px}
  .svflow-step:nth-child(n)::after{display:block;top:auto;bottom:-18px;left:34px;right:auto;width:3px;height:18px;
    background:linear-gradient(180deg,var(--brand-cyan) 0 50%,rgba(30,202,211,.25) 50% 100%) 0 0/3px 8px repeat-y}
  .svflow-step:last-child::after{display:none}
  .svcmp{grid-template-columns:1fr}
  .svf-grid--4{grid-template-columns:1fr}
  .svloop-list{grid-template-columns:1fr}
  .svseason-cards{grid-template-columns:1fr}
  /* the schedule stacks, each row keeping its column name */
  .svtable,.svtable tbody,.svtable tr,.svtable th,.svtable td{display:block;width:auto}
  .svtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .svtable tbody tr{margin:0 0 10px;border-radius:14px;overflow:hidden;background:#fff}
  .svtable tbody th{border-radius:0;padding:16px 18px 4px;width:auto}
  .svtable tbody td{border-radius:0;padding:0 18px 16px}
  .svtable tbody td::before{content:attr(data-label);position:static;display:block;width:auto;height:auto;border-radius:0;background:none;
    margin:0 0 2px;font-size:12.5px;font-weight:600;color:var(--service-muted)}
}
@media (prefers-reduced-motion:reduce){
  .svflow-step::after,.svloop-run{animation:none}
}
@media (prefers-reduced-motion:no-preference){
  @media (max-width:767px){
    .svflow-step:not(:last-child)::after{animation:svflow-down 900ms linear infinite}
  }
}
@keyframes svflow-down{to{background-position:0 8px}}