.xsvc{
  --xsvc-edge:var(--gutter);
  --xsvc-panel-bg:var(--page-bg,#c4c2bd);
  --xsvc-ink:var(--page-fg,#10121A);
  --xsvc-ink-soft:rgba(16,18,26,.68);
  --xsvc-grid-line:rgba(16,18,26,.28);
  --xsvc-progress-color:#10121A;
  --xsvc-panel-height:clamp(420px,calc(100svh - 280px),520px);
  --xsvc-sticky-top:calc(82px + clamp(.75rem,2vh,1.5rem));
  --xsvc-panel-top:clamp(9rem,18vh,12rem);
  --xsvc-ease:cubic-bezier(.22,1,.36,1);
  position:relative;
  z-index:4;
  padding:clamp(5rem,9vw,9rem) var(--xsvc-edge) clamp(4rem,7vw,7rem)!important;
  background:transparent;
  color:var(--xsvc-ink);
  font-family:var(--font-body),"Aeonik",system-ui,sans-serif;
}

.xsvc :where(h2,h3,h4,p,span,li,button,progress){font-family:"Aeonik",sans-serif}

.xsvc-intro{
  position:sticky;
  top:var(--xsvc-sticky-top);
  z-index:6;
  margin-block-end:clamp(1.5rem,2.8vw,3rem);
  background:transparent;
}

.xsvc-intro__content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(1rem,2vh,1.75rem);
  max-inline-size:min(100%,88rem);
  text-align:left;
}

.xsvc-intro__title{
  inline-size:min(100%,11.8em);
  margin:0;
  font-family:var(--font-heading),"Aeonik",system-ui,sans-serif;
  font-size:clamp(3.25rem,5.2vw,5.75rem);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.045em;
  color:var(--xsvc-ink);
}

.xsvc-intro__sub{
  max-inline-size:54rem;
  margin:0;
  font-size:clamp(1rem,1.15vw,1.25rem);
  line-height:1.35;
  letter-spacing:0;
  color:var(--xsvc-ink-soft);
  text-wrap:pretty;
  white-space:pre-line;
  text-align:left;
}

.xsvc-scroll{
  position:relative;
  min-block-size:var(--xsvc-panel-height);
  padding-block-end:var(--xsvc-travel,280svh);
}

.xsvc-panel{
  --xsvc-grid-x:52.5%;
  position:sticky;
  top:var(--xsvc-panel-top);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-rows:minmax(0,1fr);
  inline-size:100%;
  block-size:var(--xsvc-panel-height);
  overflow:visible;
  /* Shell only — copy column carries the opaque fill so the WebGL organism
     (fixed z3) shows through the transparent art column, under grid + lines. */
  background:transparent;
  color:var(--xsvc-ink);
  border:1px solid var(--xsvc-grid-line);
  border-radius:0;
  box-sizing:border-box;
}

html.xsvc-scrolltrigger .xsvc-panel{position:relative;top:auto}
.xsvc-panel.is-xsvc-fixed{
  position:fixed;
  top:var(--xsvc-sticky-top);
  left:var(--xsvc-fixed-left);
  right:var(--xsvc-fixed-right);
  z-index:5;
  inline-size:auto;
}
.xsvc-panel.is-xsvc-ended{
  position:absolute;
  inset:auto 0 0;
  inline-size:100%;
}

.xsvc-copy-stack,
.xsvc-art-stack{
  position:relative;
  min-inline-size:0;
  min-block-size:0;
  margin:0;
}

.xsvc-copy-stack{
  grid-column:1;
  grid-row:1;
  overflow:hidden;
  z-index:1;
  /* Let the shared organism continue beneath the divider instead of clipping
     against a solid half-panel. The opaque copy surface now dissolves before
     the seam, retaining text contrast without exposing a vertical crop. */
  background:linear-gradient(
    to right,
    var(--xsvc-panel-bg) 0%,
    color-mix(in srgb,var(--xsvc-panel-bg) 96%,transparent) 62%,
    color-mix(in srgb,var(--xsvc-panel-bg) 72%,transparent) 84%,
    transparent 100%
  );
}

/* Carry the art's "+" field across the divider into the copy column: same 32px
   tile and same glyph as the SVG <pattern> behind the icons (M12 16H20M16 12V20,
   1px currentColor at .34). Anchored right so it continues off the divider and
   dissolves toward the left. The stack is overflow:hidden, so it stays inside
   the panel box — never above or below it. Desktop only; the mobile deck has
   its own cards. */
@media (min-width:821px){
  .xsvc-copy-stack::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M10 16H22M16 10V22' fill='none' stroke='%2310121A' stroke-width='1'/%3E%3C/svg%3E");
    /* Tile size and phase are measured off the art in services-experiment.js
       (syncCopyGrid) so the columns and rows line up across the divider. */
    background-position:var(--xsvc-copy-grid-x,0px) var(--xsvc-copy-grid-y,0px);
    background-size:var(--xsvc-copy-grid-tile,32px) var(--xsvc-copy-grid-tile,32px);
    /* Keep in step with .xsvc-grid-mark below — the two must read as one field. */
    opacity:.12;
    -webkit-mask-image:linear-gradient(to left,#000,rgba(0,0,0,.52) 58%,rgba(0,0,0,.16) 100%);
    mask-image:linear-gradient(to left,#000,rgba(0,0,0,.52) 58%,rgba(0,0,0,.16) 100%);
    pointer-events:none;
  }
}
.xsvc-art-stack{
  grid-column:2;
  grid-row:1;
  overflow:hidden;
  z-index:2;
  color:var(--xsvc-ink);
  background:transparent;
  pointer-events:none;
}
.xsvc-art-grid,
.xsvc-art-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* Local stack only: organism lives under the whole .xsvc context (z4 > z3). */
.xsvc-art-grid{z-index:0}
.xsvc-art-lines{z-index:1}

.xsvc-panel-grid{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  pointer-events:none;
}
.xsvc-panel-grid i{
  position:absolute;
  inline-size:13px;
  block-size:13px;
  transform:translate(-50%,-50%);
  background:var(--xsvc-panel-bg);
}
.xsvc-panel-grid i::before,.xsvc-panel-grid i::after{content:"";position:absolute;background:rgba(16,18,26,.78)}
.xsvc-panel-grid i::before{inset:6px 1px auto;block-size:1px}
.xsvc-panel-grid i::after{inset:1px auto 1px 6px;inline-size:1px}
.xsvc-panel-grid i:nth-child(1),.xsvc-panel-grid i:nth-child(4){left:-1px}
.xsvc-panel-grid i:nth-child(2),.xsvc-panel-grid i:nth-child(5){left:var(--xsvc-grid-x)}
.xsvc-panel-grid i:nth-child(3),.xsvc-panel-grid i:nth-child(6){left:calc(100% + 1px)}
.xsvc-panel-grid i:nth-child(-n+3){top:-1px}
.xsvc-panel-grid i:nth-child(n+4){top:100%}

.xsvc-slide{
  --xsvc-slide-pad:clamp(1.75rem,3.3vw,3.5rem);
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:clamp(.9rem,1.6vw,1.5rem);
  padding:var(--xsvc-slide-pad);
  opacity:0;
  visibility:hidden;
  transform:translateY(1rem);
  transition:opacity .36s var(--xsvc-ease),transform .52s var(--xsvc-ease),visibility .36s step-end;
  pointer-events:none;
}

.xsvc-slide > :not(.xsvc-mini-grid){position:relative;z-index:1}

.xsvc-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .46s var(--xsvc-ease),transform .62s var(--xsvc-ease),visibility 0s;
  pointer-events:auto;
}

.xsvc-slide__title{
  inline-size:max-content;
  max-inline-size:100%;
  margin:0;
  font-family:var(--font-heading),"Aeonik",system-ui,sans-serif;
  font-size:clamp(1.25rem,1.85vw,1.5625rem);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.035em;
  color:var(--xsvc-ink);
  white-space:nowrap;
}

.xsvc-slide__desc{
  max-inline-size:54ch;
  margin:0;
  font-size:clamp(1rem,1.25vw,1.25rem);
  line-height:1.48;
  letter-spacing:0;
  color:var(--xsvc-ink-soft);
  text-wrap:pretty;
}

.xsvc-icons{--xsvc-icon-base:clamp(3.55rem,4.9vw,4.35rem);display:flex;flex-wrap:wrap;gap:clamp(.85rem,1.4vw,1.35rem);margin:auto 0 1rem}
.xsvc-icons__item{display:grid;place-items:center;inline-size:calc(var(--xsvc-icon-base) * var(--xsvc-icon-box-scale,1));block-size:calc(var(--xsvc-icon-base) * var(--xsvc-icon-box-scale,1));border:1px solid color-mix(in srgb,var(--xsvc-ink) 24%,transparent);border-radius:0;color:var(--xsvc-ink)}
.xsvc-icons__item svg{display:block;inline-size:calc(52% * var(--xsvc-icon-scale,1));block-size:calc(52% * var(--xsvc-icon-scale,1));overflow:visible}
.xsvc-icons__item img{inline-size:calc(52% * var(--xsvc-icon-scale,1));block-size:calc(52% * var(--xsvc-icon-scale,1));object-fit:contain}

.xsvc-scope{min-inline-size:0;max-inline-size:100%}

.xsvc-mini-grid{
  position:absolute;
  inset:42% var(--xsvc-slide-pad) 0;
  z-index:0;
  display:block;
  margin:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8M10 6v8' fill='none' stroke='%2310121A' stroke-width='.8'/%3E%3C/svg%3E");
  background-position:center top;
  background-size:20px 20px;
  opacity:.12;
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.52) 58%,rgba(0,0,0,.16) 100%);
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.52) 58%,rgba(0,0,0,.16) 100%);
  pointer-events:none;
}

.xsvc-scope__label{
  margin:0 0 .8rem;
  font-size:.75rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--xsvc-ink);
}

.xsvc-scope__list{
  display:block;
  max-inline-size:100%;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--xsvc-ink-soft);
  font-size:10.5px;
  line-height:1.6;
  letter-spacing:-.035em;
  white-space:normal;
  text-wrap:pretty;
}

.xsvc-scope__list li{display:inline;min-inline-size:0;white-space:nowrap}
.xsvc-scope__list li:not(:last-child)::after{content:" " attr(data-separator) " ";color:var(--xsvc-ink)}

.xsvc-art{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:0;
  color:var(--xsvc-ink);
  opacity:0;
  visibility:hidden;
  transform:scale(.985);
  /* Retire the previous drawing immediately so two geometric systems never
     composite into one broken-looking illustration during a slide change. */
  transition:none;
}

.xsvc-art.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  animation:xsvc-art-enter .36s var(--xsvc-ease) both;
  transition:none;
}

@keyframes xsvc-art-enter{
  from{opacity:.8;transform:scale(.99)}
  to{opacity:1;transform:none}
}

.xsvc-art svg{display:block;inline-size:100%;block-size:100%;overflow:hidden}
/* Stronger than the copy-column field (.12) so marks stay legible over the pale WebGL organism. */
.xsvc-art .xsvc-grid-mark{fill:none;stroke:currentColor;stroke-width:1;opacity:.32;vector-effect:non-scaling-stroke}
.xsvc-art .xsvc-line{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
  /* Keep every construction stroke continuous. The previous pathLength-based
     1px dash is replaced at runtime with each geometry's measured SVG length. */
  stroke-dasharray:var(--xsvc-path-length,none);
  stroke-dashoffset:var(--xsvc-path-length,0);
  transition:none;
}
.xsvc-art.is-active.is-drawing .xsvc-line{
  stroke-dashoffset:0;
  transition:stroke-dashoffset var(--xsvc-draw-duration,.72s) var(--xsvc-ease) var(--xsvc-delay,0s);
}
.xsvc-art .xsvc-node{
  fill:currentColor;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  transition:transform .45s var(--xsvc-ease) var(--xsvc-delay,0s);
}
.xsvc-art.is-active.is-drawing .xsvc-node{transform:scale(1)}
.xsvc-art .xsvc-node--open{fill:var(--xsvc-panel-bg);stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}

.xsvc-progress,
.xsvc-mobile__progress{
  display:block;
  inline-size:100%;
  block-size:.0625rem;
  border:0;
  border-radius:0;
  overflow:hidden;
  appearance:none;
  background:rgba(16,18,26,.16);
  background:color-mix(in srgb,var(--xsvc-progress-color) 18%,transparent);
  color:var(--xsvc-progress-color);
}
.xsvc-progress{position:absolute;inset:auto 0 -.5px;z-index:5}
.xsvc-progress::-webkit-progress-bar,.xsvc-mobile__progress::-webkit-progress-bar{background:rgba(16,18,26,.16);background:color-mix(in srgb,var(--xsvc-progress-color) 18%,transparent)}
.xsvc-progress::-webkit-progress-value,.xsvc-mobile__progress::-webkit-progress-value{background:var(--xsvc-progress-color)}
.xsvc-progress::-moz-progress-bar,.xsvc-mobile__progress::-moz-progress-bar{background:var(--xsvc-progress-color)}

.xsvc-mobile{display:none}
.xsvc-noscript{max-inline-size:65ch;margin:2rem 0 0;font-size:1rem;line-height:1.5}

@media (max-width:64rem){
  .xsvc{padding-block-start:clamp(4rem,8vw,6.5rem)}
  .xsvc-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .xsvc-slide{padding:clamp(1.75rem,3.4vw,3rem)}
  .xsvc-slide__title{font-size:25px}
}

/* Phones AND portrait tablets: the same range mobile-experience.css governs.
   Above 768 in portrait the pinned scroller was still running while the rest
   of the page was already flat, so services alone spent ~4,000px of scroll on
   an iPad. services-experiment.js gates its pin on the same pair. */
@media (max-width:48rem), (max-width:63.9375rem) and (orientation:portrait){
  .xsvc{
    --xsvc-edge:var(--gutter);
    padding:clamp(4rem,12vw,6rem) 0 clamp(4rem,12vw,6rem)!important;
  }
  .xsvc-intro{
    position:relative;
    top:auto;
    z-index:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-inline:var(--xsvc-edge);
    margin-block-end:2.75rem;
  }
  .xsvc-intro__content{inline-size:100%;gap:1rem}
  .xsvc-intro__title{font-size:clamp(2.65rem,10vw,4.25rem)}
  .xsvc-intro__sub{max-inline-size:100%;font-size:15px}
  .xsvc-scroll{display:none}
  .xsvc-panel.is-xsvc-fixed,.xsvc-panel.is-xsvc-ended{position:relative;inset:auto;inline-size:100%}
  .xsvc-mobile{display:block}
  .xsvc-mobile__hint{
    margin:0 var(--xsvc-edge) 1rem;
    font-size:.875rem;
    line-height:1.4;
    color:var(--xsvc-ink-soft);
  }
  .xsvc-mobile__deck{
    display:flex;
    gap:.75rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    padding-inline:var(--xsvc-edge);
    -webkit-overflow-scrolling:touch;
  }
  .xsvc-mobile__deck::-webkit-scrollbar{display:none}
  .xsvc-mobile-card{
    flex:0 0 calc(100vw - (2 * var(--xsvc-edge)));
    display:flex;
    flex-direction:column;
    min-inline-size:0;
    min-block-size:42rem;
    overflow:hidden;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    background:var(--xsvc-panel-bg);
    color:var(--xsvc-ink);
    border:1px solid var(--xsvc-grid-line);
  }
  .xsvc-mobile-card__art{display:grid;place-items:center;block-size:18rem;margin:0;padding:1rem}
  .xsvc-mobile-card__art.xsvc-art{position:relative;inset:auto;opacity:1;visibility:visible;transform:none}
  .xsvc-mobile-card__art svg{display:block;inline-size:100%;block-size:100%}
  .xsvc-mobile-card__body{--xsvc-slide-pad:1.75rem;position:relative;display:flex;flex:1;flex-direction:column;padding:var(--xsvc-slide-pad)}
  .xsvc-mobile-card__body > :not(.xsvc-mini-grid){position:relative;z-index:1}
  .xsvc-mobile-card__title{
    max-inline-size:11ch;
    margin:0;
    font-family:var(--font-heading),"Aeonik",system-ui,sans-serif;
    font-size:25px;
    font-weight:500;
    line-height:.94;
    letter-spacing:-.035em;
    color:var(--xsvc-ink);
    text-wrap:balance;
  }
  .xsvc-mobile-card__desc{margin:1.25rem 0 0;font-size:1rem;line-height:1.5;color:var(--xsvc-ink-soft)}
  .xsvc-mobile-card .xsvc-icons{
    --xsvc-icon-base:3.3rem;
    flex-wrap:nowrap;
    align-items:center;
    margin:var(--xsvc-mobile-icons-offset,0) 0 1rem;
  }
  .xsvc-mobile-card .xsvc-icons__item{flex:0 0 auto}
  .xsvc-mobile-card .xsvc-mini-grid{inset:40% var(--xsvc-slide-pad) 0}
  .xsvc-mobile-card .xsvc-scope__list{font-size:.875rem;white-space:normal}
  .xsvc-mobile__progress{position:relative;inset:auto;inline-size:calc(100% - (2 * var(--xsvc-edge)));margin:1.25rem var(--xsvc-edge) 0}
}

@media (max-width:23rem){
  .xsvc-mobile-card__body{padding:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  .xsvc-slide,.xsvc-art,.xsvc-art .xsvc-line,.xsvc-art .xsvc-node{animation:none!important;transition:none!important}
  .xsvc-art .xsvc-line{stroke-dashoffset:0}
  .xsvc-art .xsvc-node{transform:scale(1)}
  .xsvc-mobile__deck{scroll-behavior:auto}
}