/* ==========================================================================
   Safe Home Pestochem — homepage experience
   Layered on top of style.css. Every section renders as complete, static
   content first; `html.xp-anim` (added by experience.js when motion is
   allowed) switches on the animated initial states.
   ========================================================================== */

:root{
  --xp-ink:#0c1712;
  --xp-ink-2:#12241b;
  --xp-paper:#f7f3ea;
  --xp-paper-2:#eef1e8;
  --xp-sun:#f5c24b;
  --xp-safe:#5cbf8a;
  --xp-safe-soft:rgba(92,191,138,.16);
  --xp-risk:#d9573f;
  --xp-warn:#e2a23a;
  --xp-line:rgba(18,36,27,.12);
  --xp-line-light:rgba(255,255,255,.16);
  --xp-ease:cubic-bezier(.22,.8,.2,1);
  --xp-ease-io:cubic-bezier(.65,0,.35,1);
  --xp-radius:20px;
}

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

/* Touch vs. pointer copy */
.xp-only-coarse{ display:none; }
@media (hover:none), (pointer:coarse){ .xp-only-fine{ display:none; } .xp-only-coarse{ display:inline; } }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */
.xp-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body); font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--green-600);
  margin:0 0 18px;
}
.xp-eyebrow::before{ content:""; width:26px; height:2px; background: currentColor; opacity:.55; }
.xp-eyebrow--light{ color: rgba(255,255,255,.82); }
.xp-num{
  display:inline-grid; place-items:center; min-width:30px; height:22px; padding:0 7px;
  border-radius:999px; background: var(--green-800); color: var(--xp-sun);
  font-size:.7rem; letter-spacing:.06em;
}
.xp-eyebrow .xp-num + *{ margin-left:2px; }

.xp-h2{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(2.2rem, 4.6vw, 4.1rem); line-height:1.02; letter-spacing:-.035em;
  color: var(--xp-ink); margin:0;
}
.xp-h2--sm{ font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.xp-h2--light{ color:#fff; }
.xp-h3{ font-family: var(--font-display); font-weight:800; font-size: clamp(1.7rem, 2.8vw, 2.5rem); letter-spacing:-.03em; line-height:1.05; margin:0; }
.xp-lede{ font-size: clamp(1rem, 1.2vw, 1.12rem); line-height:1.65; color: var(--text-secondary); max-width: 52ch; margin-top:18px; }
.xp-lede--light{ color: rgba(240,244,238,.82); }
.xp-head{ max-width: 760px; margin: 0 0 56px; }

.xp-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem;
  color: var(--green-700); text-decoration:none; padding:6px 0; position:relative;
}
.xp-link::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px; background: currentColor;
  transform: scaleX(.3); transform-origin:left; transition: transform .45s var(--xp-ease);
}
.xp-link:hover::after, .xp-link:focus-visible::after{ transform: scaleX(1); }
.xp-link--light{ color: var(--xp-sun); }

/* Buttons */
.xp-btn{ position:relative; will-change: transform; }
.xp-btn .xp-arrow{ transition: transform .35s var(--xp-ease); }
.xp-btn:hover .xp-arrow{ transform: translateX(3px); }
.xp-btn--glass{
  background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.xp-btn--glass:hover{ background: rgba(255,255,255,.18); color:#fff; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.xp-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height: max(640px, calc(100svh - 150px));
  display:flex; flex-direction:column; justify-content:center;
  background: var(--xp-ink); color:#fff;
}
.xp-hero__media{ position:absolute; inset:-3%; z-index:0; will-change: transform; }
.xp-hero__media picture, .xp-hero__img{ display:block; width:100%; height:100%; object-fit:cover; object-position: center right; }
.xp-hero__gl{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition: opacity 1s var(--xp-ease); }
.xp-hero__gl.is-ready{ opacity:1; }
.xp-hero__particles{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.xp-hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,18,13,.94) 0%, rgba(8,18,13,.86) 26%, rgba(8,18,13,.55) 46%, rgba(8,18,13,.16) 64%, rgba(8,18,13,0) 80%),
    linear-gradient(180deg, rgba(8,18,13,.35) 0%, rgba(8,18,13,0) 26%, rgba(8,18,13,0) 70%, rgba(8,18,13,.55) 100%);
}
.xp-hero__inner{
  position:relative; z-index:3; width:100%;
  display:grid; grid-template-columns: minmax(0, 660px) 1fr; align-items:end; gap: 40px;
  padding-top: 72px; padding-bottom: 104px;
}
.xp-hero__title{
  font-family: var(--font-display); font-weight:800; color:#fff;
  font-size: clamp(2.9rem, 6.6vw, 5.8rem); line-height:.98; letter-spacing:-.04em;
  text-shadow: 0 2px 30px rgba(0,0,0,.3); margin:0;
}
.xp-line{ display:block; overflow:hidden; padding-bottom:.06em; }
.xp-line > span{ display:inline-block; will-change: transform; }
.xp-hero__title em{ font-style:normal; color: var(--xp-sun); }
.xp-hero__lede{ margin-top:22px; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height:1.65; color: rgba(236,242,236,.86); max-width: 50ch; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.xp-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.xp-hero__badges{
  list-style:none; margin:44px 0 0; padding:0;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; max-width: 720px;
}
.xp-hero__badges li{ display:flex; flex-direction:column; gap:8px; font-size:.8rem; color: rgba(226,234,228,.8); line-height:1.35; position:relative; }
.xp-hero__badges li + li::before{ content:""; position:absolute; left:-9px; top:2px; bottom:2px; width:1px; background: rgba(255,255,255,.16); }
.xp-hero__badges svg{ width:22px; height:22px; color: var(--xp-sun); }
.xp-hero__badges strong{ display:block; color:#fff; font-size:.86rem; }
.xp-hero__card{
  justify-self:end; max-width:250px; padding:18px 20px; border-radius:14px;
  background: rgba(10,24,17,.66); border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--xp-sun);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size:.82rem; color: rgba(222,232,225,.82); line-height:1.45;
}
.xp-hero__card-big{ font-family: var(--font-display); font-weight:800; font-size:1.14rem; line-height:1.3; color:#fff; margin:0 0 8px; }
.xp-hero__card-big span{ color: var(--xp-sun); }
.xp-hero__cue{
  position:absolute; z-index:3; left:50%; bottom:22px; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.72); text-decoration:none;
}
.xp-hero__cue-line{ width:1px; height:40px; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)); position:relative; overflow:hidden; }
.xp-hero__cue-line::after{ content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background: var(--xp-sun); animation: xpCue 2.2s var(--xp-ease-io) infinite; }
@keyframes xpCue{ to{ top:110%; } }

@media (max-width: 1024px){
  .xp-hero__inner{ grid-template-columns: 1fr; }
  .xp-hero__card{ display:none; }
  .xp-hero__badges{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width:480px; }
  .xp-hero__badges li:nth-child(3)::before{ display:none; }
}
@media (max-width: 767px){
  .xp-hero{ min-height: calc(100svh - 120px); justify-content:flex-end; }
  .xp-hero__media{ inset:-4% -4% -4% -4%; }
  .xp-hero__img{ object-position: 60% center; }
  .xp-hero__scrim{
    background: linear-gradient(180deg, rgba(8,18,13,.62) 0%, rgba(8,18,13,.35) 30%, rgba(8,18,13,.6) 58%, rgba(8,18,13,.92) 100%);
  }
  .xp-hero__inner{ padding-top: 120px; padding-bottom: 84px; }
  .xp-hero__title{ font-size: clamp(2.5rem, 11vw, 3.3rem); }
  .xp-hero__badges{ gap:14px; margin-top:32px; }
  .xp-hero__badges li::before{ display:none; }
  .xp-hero__cue{ display:none; }
}

/* --------------------------------------------------------------------------
   01 INSPECTION — scroll X-ray
   -------------------------------------------------------------------------- */
.xp-inspect{ background: linear-gradient(180deg, var(--xp-paper) 0%, #f1efe6 100%); position:relative; }
.xp-inspect__pin{ min-height: calc(100svh - var(--hdr, 0px)); display:flex; align-items:center; padding: 56px 0; }
.xp-inspect__grid{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(32px, 6vw, 88px); align-items:center; width:100%; }
.xp-swap{ display:grid; }
.xp-swap > *{ grid-area:1/1; }
.xp-h2--alt{ color: var(--green-600); }
html.xp-anim .xp-swap > *{ transition: opacity .6s var(--xp-ease), transform .7s var(--xp-ease), filter .6s; }
html.xp-anim .xp-swap > :not(.is-active){ opacity:0; transform: translateY(26px); filter: blur(6px); }
html:not(.xp-anim) .xp-h2--alt{ display:none; }

.xp-findings{ list-style:none; counter-reset: f; margin: 30px 0 0; padding:0; display:grid; gap:10px; max-width:520px; }
.xp-findings li{
  counter-increment:f; display:grid; grid-template-columns: 34px 1fr; column-gap:14px; align-items:start;
  padding:12px 14px; border-radius:12px; background: rgba(255,255,255,.55); border:1px solid var(--xp-line);
  font-size:.9rem; line-height:1.45; color: var(--text-secondary);
}
.xp-findings li::before{
  content: counter(f); grid-row: span 2; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:.8rem;
  background: var(--xp-risk); color:#fff;
}
.xp-findings strong{ color: var(--xp-ink); font-size:.95rem; }
html.xp-anim .xp-findings li{ opacity:.32; transform: translateX(-6px); transition: opacity .5s var(--xp-ease), transform .5s var(--xp-ease), background .5s, border-color .5s; }
html.xp-anim .xp-findings li::before{ background: #c9cdc5; transition: background .4s; }
html.xp-anim .xp-findings li.is-on{ opacity:1; transform:none; background:#fff; border-color: rgba(217,87,63,.3); }
html.xp-anim .xp-findings li.is-on::before{ background: var(--xp-risk); }
html.xp-anim .xp-findings li.is-done::before{ background: var(--xp-safe); content:"\2713"; }
.xp-inspect__outro{ margin-top:22px; font-family: var(--font-display); font-weight:800; font-size:1.2rem; color: var(--green-700); }
html.xp-anim .xp-inspect__outro{ opacity:0; transform: translateY(12px); transition: opacity .6s var(--xp-ease), transform .6s var(--xp-ease); }
html.xp-anim .xp-inspect__outro.is-in{ opacity:1; transform:none; }

.xp-scope{ margin:0; width: min(460px, 38vw); }
.xp-scope__view{
  position:relative; aspect-ratio: 963/1190; max-height: 80svh; border-radius: var(--xp-radius); overflow:hidden;
  background: var(--xp-ink); box-shadow: 0 40px 80px -30px rgba(12,23,18,.55), 0 0 0 1px rgba(12,23,18,.08);
}
.xp-scope__photo, .xp-scope__scan{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.xp-scope__scan{ clip-path: inset(0 0 0 0); }
html.xp-anim .xp-scope__scan{ clip-path: inset(0 0 100% 0); }
html:not(.xp-anim) .xp-scope__scan{ display:none; }
.xp-scope__line{
  position:absolute; left:0; right:0; top: var(--scan, -2%); height:2px; z-index:3; pointer-events:none;
  background: var(--xp-safe); box-shadow: 0 0 18px 3px rgba(92,191,138,.55); opacity:0;
}
.xp-scope__line::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:60px; background: linear-gradient(0deg, rgba(92,191,138,.2), rgba(92,191,138,0)); }
.xp-scope__marks{ position:absolute; inset:0; width:100%; height:100%; z-index:2; overflow:visible; }
.xp-mark rect, .xp-mark path, .xp-mark ellipse{
  fill: rgba(217,87,63,.14); stroke: var(--xp-risk); stroke-width:1.6; stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.xp-mark--zone ellipse{ fill: rgba(226,162,58,.2); stroke: var(--xp-warn); }
.xp-mark--path path{ fill:none; stroke-width:2.4; stroke-dasharray: 2 6; stroke-linecap: round; }
html.xp-anim .xp-mark{ opacity:0; transition: opacity .5s var(--xp-ease); }
html.xp-anim .xp-mark.is-on{ opacity:1; }
.xp-mark.is-done rect, .xp-mark.is-done path, .xp-mark.is-done ellipse{ stroke: var(--xp-safe); fill: var(--xp-safe-soft); }
.xp-scope__pins{ list-style:none; margin:0; padding:0; position:absolute; inset:0; z-index:4; pointer-events:none; }
.xp-scope__pins li{
  position:absolute; left: var(--x); top: var(--y); transform: translate(-12px,-50%);
  display:flex; align-items:center; gap:6px;
}
.xp-scope__pins b{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; color:#fff;
  background: var(--xp-risk); box-shadow: 0 0 0 4px rgba(217,87,63,.25);
}
.xp-scope__pins span{
  font-size:.7rem; font-weight:700; color:#fff; background: rgba(12,23,18,.78); padding:4px 8px; border-radius:6px; white-space:nowrap;
}
.xp-scope__pins li.is-done b{ background: var(--xp-safe); box-shadow: 0 0 0 4px rgba(92,191,138,.25); }
html.xp-anim .xp-scope__pins li{ opacity:0; transform: translate(-12px,-50%) scale(.7); transition: opacity .45s var(--xp-ease), transform .45s var(--xp-ease); }
html.xp-anim .xp-scope__pins li.is-on{ opacity:1; transform: translate(-12px,-50%) scale(1); }
.xp-scope__hud{ position:absolute; inset:12px; z-index:5; pointer-events:none; }
.xp-scope__corner{ position:absolute; width:18px; height:18px; border-color: rgba(255,255,255,.75); border-style:solid; border-width:0; }
.xp-scope__corner.tl{ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.xp-scope__corner.tr{ top:0; right:0; border-top-width:2px; border-right-width:2px; }
.xp-scope__corner.bl{ bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; }
.xp-scope__corner.br{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }
.xp-scope__tag, .xp-scope__count{
  position:absolute; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background: rgba(12,23,18,.66); padding:5px 9px; border-radius:6px;
}
.xp-scope__tag{ top:10px; left:26px; }
.xp-scope__tag.is-scan{ background: var(--green-700); color: #d8f2e2; }
.xp-scope__count{ bottom:10px; right:26px; letter-spacing:.06em; text-transform:none; }
.xp-scope__count b{ color: var(--xp-sun); }
.xp-scope figcaption{ margin-top:12px; font-size:.76rem; color: var(--text-secondary); }

@media (max-width: 900px){
  .xp-inspect__grid{ grid-template-columns:1fr; }
  .xp-scope{ width:100%; max-width:420px; justify-self:center; }
  .xp-scope__view{ max-height:none; }
  html.xp-anim .xp-inspect__pin{ min-height:auto; }
}

/* --------------------------------------------------------------------------
   Scanner
   -------------------------------------------------------------------------- */
.xp-scanner{ background: #f1efe6; padding: clamp(72px, 10vw, 128px) 0; }
.xp-scanner__grid{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(32px, 6vw, 88px); align-items:center; }
.xp-scanner__found{ margin-top:24px; font-weight:700; color: var(--xp-ink); }
.xp-scanner__found b{ color: var(--xp-risk); font-size:1.3rem; }
.xp-scanner__list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:8px; max-width:500px; }
.xp-scanner__list li{ padding:10px 14px 10px 40px; border-radius:10px; border:1px dashed var(--xp-line); font-size:.88rem; color: var(--text-secondary); position:relative; line-height:1.45; }
.xp-scanner__list li strong{ display:block; color: var(--xp-ink); }
.xp-scanner__list li::before{ content:"?"; position:absolute; left:12px; top:11px; width:18px; height:18px; border-radius:50%; background:#d8dbd3; color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; }
.xp-scanner__list li.is-found{ border-style:solid; border-color: rgba(217,87,63,.3); background:#fff; }
.xp-scanner__list li.is-found::before{ content:"!"; background: var(--xp-risk); }
html.xp-anim .xp-scanner__list li:not(.is-found) strong,
html.xp-anim .xp-scanner__list li:not(.is-found){ color: #9aa39c; }

.xp-lens{
  position:relative; width: min(460px, 38vw); aspect-ratio: 960/1190; max-height: 82svh;
  border-radius: var(--xp-radius); overflow:hidden; background: var(--xp-ink);
  box-shadow: 0 40px 80px -30px rgba(12,23,18,.5);
  touch-action: pan-y; user-select:none; -webkit-user-select:none;
  --mx: 50%; --my: 55%; --r: 92px;
}
.xp-lens__photo, .xp-lens__scan{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.xp-lens__scan{
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0 88%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0 88%, transparent 100%);
}
html:not(.xp-anim) .xp-lens__scan{ display:none; }
.xp-lens__ring{
  position:absolute; left: var(--mx); top: var(--my); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  transform: translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:3;
  border: 1.5px solid rgba(92,191,138,.9); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 30px rgba(92,191,138,.35);
}
.xp-lens__ring::before, .xp-lens__ring::after{ content:""; position:absolute; background: rgba(255,255,255,.55); }
.xp-lens__ring::before{ left:50%; top:30%; bottom:30%; width:1px; }
.xp-lens__ring::after{ top:50%; left:30%; right:30%; height:1px; }
html:not(.xp-anim) .xp-lens__ring{ display:none; }
.xp-lens__spots{ list-style:none; margin:0; padding:0; position:absolute; inset:0; z-index:4; pointer-events:none; }
.xp-lens__spots li{ position:absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); }
.xp-lens__spots li::before{
  content:""; display:block; width:14px; height:14px; border-radius:50%; margin:0 auto;
  background: var(--xp-risk); box-shadow: 0 0 0 5px rgba(217,87,63,.28), 0 0 0 11px rgba(217,87,63,.12);
}
.xp-lens__spots span{
  display:block; margin-top:8px; font-size:.7rem; font-weight:700; color:#fff; white-space:nowrap;
  background: rgba(12,23,18,.8); padding:4px 8px; border-radius:6px; text-align:center;
}
html.xp-anim .xp-lens__spots li{ opacity:0; transform: translate(-50%,-50%) scale(.6); transition: opacity .4s var(--xp-ease), transform .5s var(--xp-ease); }
html.xp-anim .xp-lens__spots li.is-found{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.xp-lens__hint{
  position:absolute; left:50%; bottom:16px; transform: translateX(-50%); z-index:5; margin:0;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background: rgba(12,23,18,.7); padding:6px 12px; border-radius:999px; transition: opacity .4s;
}
.xp-lens.is-touched .xp-lens__hint{ opacity:0; }
html:not(.xp-anim) .xp-lens__hint{ display:none; }

@media (max-width: 900px){
  .xp-scanner__grid{ grid-template-columns: 1fr; }
  .xp-lens{ width:100%; max-width:440px; justify-self:center; --r: 74px; }
}

/* --------------------------------------------------------------------------
   02 PROTECTION — 3D story
   -------------------------------------------------------------------------- */
.xp-story{
  --dusk: 0;
  position:relative;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #eef1e8 0%, #dfe7dc 100%);
}
.xp-story::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, #1b2e25 0%, #0f1e17 100%);
  opacity: calc(var(--dusk) * .9);
}
.xp-story__pin{ position:relative; height: calc(100svh - var(--hdr, 0px)); min-height:560px; overflow:hidden; }
.xp-story__stage{ position:absolute; inset:0; }
.xp-story__gl{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action: pan-y; }
.xp-story__gl.is-grab{ cursor: grab; }
.xp-story__hotspots{ position:absolute; inset:0; pointer-events:none; }
.xp-hot{
  position:absolute; left:0; top:0; pointer-events:auto;
  display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px;
  border:1px solid rgba(255,255,255,.5); background: rgba(12,23,18,.72); color:#fff;
  font: 700 .74rem/1 var(--font-body); letter-spacing:.02em; cursor:pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translate3d(var(--hx,-999px), var(--hy,-999px), 0) translate(-50%, -50%);
  transition: opacity .45s var(--xp-ease), background .3s, border-color .3s;
  white-space:nowrap;
}
.xp-hot i{ width:18px; height:18px; border-radius:50%; background: var(--xp-risk); position:relative; flex:none; }
.xp-hot i::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--xp-risk); opacity:.6; animation: xpPulse 1.8s ease-out infinite; }
.xp-hot[data-state="inspected"] i{ background: var(--xp-warn); }
.xp-hot[data-state="inspected"] i::after{ border-color: var(--xp-warn); }
.xp-hot[data-state="protected"] i{ background: var(--xp-safe); }
.xp-hot[data-state="protected"] i::after{ border-color: var(--xp-safe); animation:none; opacity:0; }
.xp-hot[data-state="protected"] i::before{ content:"\2713"; position:absolute; inset:0; display:grid; place-items:center; font-size:.66rem; color:#fff; }
.xp-hot.is-hidden{ opacity:0; pointer-events:none; }
.xp-hot:hover, .xp-hot:focus-visible, .xp-hot.is-active{ background: var(--green-700); border-color: var(--xp-sun); }
@keyframes xpPulse{ from{ transform: scale(.7); opacity:.8; } to{ transform: scale(1.6); opacity:0; } }

.xp-story__hud{ position:absolute; inset:0; pointer-events:none; padding-top: clamp(28px, 6vh, 64px); padding-bottom: clamp(28px, 6vh, 56px); display:flex; flex-direction:column; }
.xp-story__head{ max-width: 520px; transition: opacity .5s var(--xp-ease), transform .6s var(--xp-ease); }
.xp-story__head.is-faded{ opacity:0; transform: translateY(-12px); }
.xp-story .xp-h2{ transition: color .6s; }
.xp-story.is-dusk .xp-h2, .xp-story.is-dusk .xp-story__captions p{ color:#fff; }
.xp-story.is-dusk .xp-eyebrow{ color: rgba(255,255,255,.8); }
.xp-stages{
  list-style:none; margin:0; padding:0; display:flex; gap:6px; max-width:560px; order:2;
}
.xp-stages li{ flex:1; position:relative; padding-top:14px; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: rgba(12,23,18,.45); transition: color .4s; }
.xp-stages li::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px; background: rgba(12,23,18,.12); }
.xp-stages li::after{ content:""; position:absolute; left:0; top:0; height:3px; border-radius:3px; width: calc(var(--fill, 0) * 100%); background: var(--xp-risk); }
.xp-stages li[data-stage="1"]::after{ background: var(--xp-warn); }
.xp-stages li[data-stage="2"]::after, .xp-stages li[data-stage="3"]::after{ background: var(--xp-safe); }
.xp-stages li.is-active{ color: var(--xp-ink); }
.xp-story.is-dusk .xp-stages li{ color: rgba(255,255,255,.45); }
.xp-story.is-dusk .xp-stages li.is-active{ color:#fff; }
.xp-story.is-dusk .xp-stages li::before{ background: rgba(255,255,255,.16); }
.xp-story__captions{ position:relative; min-height: 3.2em; margin: auto 0 18px; max-width: 520px; order:1; }
.xp-story__captions p{
  position:absolute; left:0; bottom:0; margin:0;
  font-family: var(--font-display); font-weight:700; font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height:1.25; letter-spacing:-.015em; color: var(--xp-ink);
  opacity:0; transform: translateY(14px); transition: opacity .5s var(--xp-ease), transform .5s var(--xp-ease);
}
.xp-story__captions p.is-active{ opacity:1; transform:none; }
.xp-story__captions + .xp-stages{ margin-top:0; }
.xp-meter{ position:absolute; right: max(24px, calc((100vw - var(--container)) / 2 + 24px)); top: clamp(28px, 6vh, 64px); width:180px; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: rgba(12,23,18,.55); }
.xp-story.is-dusk .xp-meter{ color: rgba(255,255,255,.6); }
.xp-meter__bar{ margin-top:8px; height:6px; border-radius:6px; background: rgba(12,23,18,.1); overflow:hidden; }
.xp-meter__bar i{ display:block; height:100%; width: calc(var(--threat, 0) * 100%); border-radius:6px; background: linear-gradient(90deg, var(--xp-warn), var(--xp-risk)); transition: background .6s; }
.xp-meter.is-safe .xp-meter__bar i{ background: var(--xp-safe); }

.xp-panel{
  position:absolute; z-index:6; right: max(72px, calc((100vw - var(--container)) / 2 + 72px)); top:50%; transform: translateY(-50%);
  width: min(360px, calc(100vw - 40px)); padding:24px 24px 20px; border-radius:18px;
  background: rgba(255,255,255,.96); box-shadow: 0 30px 70px -20px rgba(12,23,18,.4);
  font-size:.9rem; line-height:1.55; color: var(--text-secondary);
}
.xp-panel[hidden]{ display:none; }
.xp-panel.is-open{ animation: xpPanelIn .5s var(--xp-ease) both; }
@keyframes xpPanelIn{ from{ opacity:0; transform: translateY(calc(-50% + 16px)); } to{ opacity:1; transform: translateY(-50%); } }
.xp-panel__close{ position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; border:0; background: var(--green-050); font-size:1.3rem; cursor:pointer; color: var(--xp-ink); }
.xp-panel__zone{ margin:0; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--xp-risk); }
.xp-panel__title{ margin:6px 0 12px; font-family: var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; color: var(--xp-ink); }
.xp-panel__label{ margin:12px 0 2px; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--green-600); }
.xp-panel .xp-link{ margin-top:14px; }

.xp-zones{ list-style:none; margin:0; padding:0; }
html.xp-webgl .xp-zones{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
html:not(.xp-webgl) .xp-story__pin{ height:auto; min-height:0; padding: 96px 0; }
html:not(.xp-webgl) .xp-story__stage, html:not(.xp-webgl) .xp-meter, html:not(.xp-webgl) .xp-story__captions, html:not(.xp-webgl) .xp-stages{ display:none; }
html:not(.xp-webgl) .xp-story__hud{ position:static; }
html:not(.xp-webgl) .xp-zones{ max-width: var(--container); margin: 32px auto 0; padding: 0 24px; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
html:not(.xp-webgl) .xp-zones li{ background:#fff; border-radius:14px; padding:20px; border:1px solid var(--xp-line); }
.xp-zones h3{ font-size:1.02rem; margin:0 0 6px; }
.xp-zones p{ font-size:.88rem; color: var(--text-secondary); line-height:1.55; }

@media (max-width: 767px){
  .xp-meter{ top:auto; bottom: 150px; right:24px; width:120px; }
  .xp-panel{ top:auto; bottom:16px; right:16px; left:16px; width:auto; transform:none; max-height: 62svh; overflow:auto; }
  @keyframes xpPanelIn{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }
  .xp-hot span{ display:none; }
  .xp-hot{ padding:6px; }
  .xp-stages li{ font-size:.6rem; letter-spacing:.06em; }
  .xp-story__hud{ padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .xp-meter{ bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   03 SOLUTIONS — ecosystem
   -------------------------------------------------------------------------- */
.xp-eco{ background: radial-gradient(90% 70% at 50% 60%, #1c3429 0%, var(--xp-ink) 70%); color:#fff; padding: clamp(80px, 10vw, 128px) 0 clamp(40px, 6vw, 80px); overflow:hidden; }
.xp-eco .xp-h2{ color:#fff; }
.xp-eco .xp-eyebrow{ color: rgba(255,255,255,.75); }
.xp-eco .xp-lede{ color: rgba(236,242,236,.72); }
.xp-eco__stage{ position:relative; height: min(84svh, 760px); min-height: 560px; }
.xp-eco__gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.xp-eco__ring{ list-style:none; margin:0; padding:0; }
.xp-orb{
  display:block; width: 250px; padding:18px 18px 14px; border-radius:16px; text-decoration:none;
  background: rgba(18,36,27,.72); border:1px solid rgba(255,255,255,.12); color: rgba(226,234,228,.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.xp-orb__k{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.08rem; color:#fff; letter-spacing:-.01em; }
.xp-orb__d{ display:block; margin-top:6px; font-size:.82rem; line-height:1.45; }
.xp-orb__go{ display:inline-block; margin-top:10px; font-size:.8rem; font-weight:700; color: var(--xp-sun); }
.xp-eco__ring li.is-active .xp-orb, .xp-orb:hover, .xp-orb:focus-visible{ background: rgba(35,70,54,.94); border-color: var(--xp-sun); box-shadow: 0 24px 60px -18px rgba(0,0,0,.6); }
/* static layout (no 3D / small screens): a clean grid */
.xp-eco__ring{ position:relative; z-index:2; display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:14px; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.xp-eco__ring .xp-orb{ width:auto; }
html.xp-eco-live .xp-eco__ring{ display:block; position:absolute; inset:0; padding:0; max-width:none; }
html.xp-eco-live .xp-eco__ring li{ position:absolute; left:0; top:0; will-change: transform; transition: opacity .3s; }
html.xp-eco-live .xp-eco__ring .xp-orb{ width: 236px; }
html:not(.xp-webgl) .xp-eco__stage{ height:auto; min-height:0; }
html:not(.xp-webgl) .xp-eco__gl{ display:none; }
@media (max-width: 900px){
  .xp-eco__stage{ height:auto; min-height:0; }
  .xp-eco__gl{ position:relative; height: 62svh; max-height:460px; }
  html.xp-eco-live .xp-eco__ring{ position:relative; display:flex; gap:12px; overflow-x:auto; scroll-snap-type: x mandatory; padding: 8px 24px 18px; scrollbar-width:none; }
  html.xp-eco-live .xp-eco__ring::-webkit-scrollbar{ display:none; }
  html.xp-eco-live .xp-eco__ring li{ position:static; flex: 0 0 76%; scroll-snap-align:center; transform:none!important; opacity:1!important; }
  .xp-eco__ring{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
  .xp-eco__ring li{ flex:0 0 76%; scroll-snap-align:center; }
}

/* --------------------------------------------------------------------------
   Field notes — documentary chapters
   -------------------------------------------------------------------------- */
.xp-docs{ background: var(--xp-ink); color:#fff; padding-top: clamp(80px, 10vw, 128px); }
.xp-docs .xp-h2{ color:#fff; }
.xp-docs .xp-eyebrow{ color: rgba(255,255,255,.75); }
.xp-docs .xp-lede{ color: rgba(236,242,236,.72); }
.xp-docs__pin{ position:relative; }
.xp-chapter{ display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100svh; }
.xp-chapter + .xp-chapter{ border-top:1px solid rgba(255,255,255,.08); }
.xp-chapter__media{ position:relative; overflow:hidden; background:#000; }
.xp-chapter__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin: 50% 70%; will-change: transform; }
.xp-chapter__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(12,23,18,0) 60%, rgba(12,23,18,.85) 100%), linear-gradient(0deg, rgba(12,23,18,.35), rgba(12,23,18,0) 40%); pointer-events:none; }
.xp-chapter__fx{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; transform-origin: 50% 70%; will-change: transform; }
.xp-docs .xp-h3{ color:#fff; }
.xp-docs .xp-link{ color: var(--xp-sun); }
.xp-eco .xp-link, .xp-ind .xp-link{ color: var(--xp-sun); }
.xp-fx-threat{ fill:none; stroke: var(--xp-warn); stroke-width:.55; stroke-dasharray: .2 1.3; stroke-linecap:round; filter: drop-shadow(0 0 1px rgba(226,162,58,.8)); animation: xpCrawl 1.4s linear infinite; }
.xp-fx-treat{ fill:none; stroke: var(--xp-safe); stroke-width:.7; stroke-linecap:round; filter: drop-shadow(0 0 1.2px rgba(92,191,138,.9)); }
@keyframes xpCrawl{ to{ stroke-dashoffset: -1.5; } }
.xp-fx-dot{ fill: #dff5e6; stroke: var(--xp-safe); stroke-width:1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(92,191,138,.9)); }
.xp-fx-zone{ fill: rgba(226,162,58,.16); stroke: var(--xp-warn); stroke-width:1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.xp-fx-box{ fill: #1b2a22; stroke: var(--xp-safe); stroke-width:1.6; vector-effect: non-scaling-stroke; }
.xp-chapter__copy{ padding: clamp(40px, 7vw, 110px) clamp(24px, 6vw, 96px); display:flex; flex-direction:column; justify-content:center; }
.xp-chapter__no{ font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--xp-sun); margin:0 0 12px; }
.xp-steps{ list-style:none; counter-reset: s; margin: 28px 0 24px; padding:0; display:grid; gap:18px; max-width: 460px; }
.xp-steps li{ counter-increment:s; position:relative; padding-left:48px; font-size:.95rem; line-height:1.6; color: rgba(226,234,228,.75); }
.xp-steps li::before{ content: "0" counter(s); position:absolute; left:0; top:1px; font-family: var(--font-display); font-weight:800; font-size:.9rem; color: var(--xp-safe); }
.xp-steps strong{ display:block; color:#fff; font-size:1.05rem; margin-bottom:2px; }
.xp-docs__ticks{ display:none; }

/* pinned documentary (desktop, motion allowed) */
html.xp-anim .xp-docs__pin.is-pinned{ height: calc(100svh - var(--hdr, 0px)); overflow:hidden; }
html.xp-anim .xp-docs__pin.is-pinned .xp-chapter{ position:absolute; inset:0; min-height:0; border:0; }
html.xp-anim .xp-docs__pin.is-pinned .xp-chapter:not(.is-active){ pointer-events:none; }
html.xp-anim .xp-docs__pin.is-pinned .xp-docs__ticks{
  display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0;
  position:absolute; right:28px; top:50%; transform: translateY(-50%); z-index:3;
}
.xp-docs__ticks li{ width:3px; height:34px; border-radius:3px; background: rgba(255,255,255,.18); position:relative; overflow:hidden; }
.xp-docs__ticks li i{ position:absolute; left:0; right:0; top:0; height: calc(var(--p,0) * 100%); background: var(--xp-sun); }

@media (max-width: 900px){
  .xp-chapter{ grid-template-columns:1fr; min-height:0; }
  .xp-chapter__media{ height: 70svh; max-height:560px; }
  .xp-chapter__media::after{ background: linear-gradient(0deg, rgba(12,23,18,.9), rgba(12,23,18,0) 45%); }
  .xp-chapter__copy{ padding: 32px 24px 64px; }
}

/* --------------------------------------------------------------------------
   Before / after
   -------------------------------------------------------------------------- */
.xp-ba{ background: var(--xp-paper); padding: clamp(80px, 10vw, 128px) 0; }
.xp-ba__grid{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(32px, 6vw, 88px); align-items:center; }
.xp-ba__benefits{ list-style:none; margin: 26px 0 0; padding:0; display:grid; gap:10px; }
.xp-ba__benefits li{ display:flex; align-items:center; gap:12px; font-weight:600; color: var(--xp-ink); transition: opacity .4s, transform .4s var(--xp-ease); }
.xp-ba__benefits li::before{ content:"\2713"; width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.78rem; color:#fff; background: var(--xp-safe); transition: background .4s; }
html.xp-anim .xp-ba__benefits li:not(.is-on){ opacity:.35; transform: translateX(-4px); }
html.xp-anim .xp-ba__benefits li:not(.is-on)::before{ background:#c9cdc5; }

.xp-ba__stage{
  --pos: 50%;
  position:relative; width: min(460px, 38vw); aspect-ratio: 1053/1302; max-height: 82svh;
  border-radius: var(--xp-radius); overflow:hidden; user-select:none; -webkit-user-select:none; touch-action: pan-y;
  box-shadow: 0 40px 80px -30px rgba(12,23,18,.45); background:#111;
}
.xp-ba__layer{ position:absolute; inset:0; isolation:isolate; }
.xp-ba__layer--after{ z-index:1; }
.xp-ba__layer--before{ z-index:2; }
.xp-ba__layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.xp-ba__layer--after img{ filter: saturate(1.08) brightness(1.04) contrast(1.02); }
.xp-ba__layer--before{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.xp-ba__layer--before img{ filter: saturate(.5) sepia(.32) brightness(.8) contrast(1.1); }
.xp-ba__layer--before::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 40%, rgba(40,20,5,.45) 100%); pointer-events:none; }
.xp-ba__dust{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.xp-ba__tags{ list-style:none; margin:0; padding:0; position:absolute; inset:0; z-index:2; pointer-events:none; }
.xp-ba__tags li{
  position:absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
  font-size:.7rem; font-weight:700; color:#fff; padding:5px 10px 5px 24px; border-radius:999px; white-space:nowrap;
}
.xp-ba__tags li::before{ content:""; position:absolute; left:8px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#fff; }
.xp-ba__tags--risk li{ background: rgba(170,54,34,.9); }
.xp-ba__tags--ok li{ background: rgba(35,112,72,.92); }
.xp-ba__handle{ position:absolute; top:0; bottom:0; left: var(--pos); width:2px; margin-left:-1px; background:#fff; z-index:3; pointer-events:none; box-shadow: 0 0 20px rgba(0,0,0,.4); }
.xp-ba__handle span{
  position:absolute; top:50%; left:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  background:#fff; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.xp-ba__handle span::before, .xp-ba__handle span::after{
  content:""; position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border: solid var(--green-700); border-width: 0 2px 2px 0;
}
.xp-ba__handle span::before{ left:12px; transform: rotate(135deg); }
.xp-ba__handle span::after{ right:12px; transform: rotate(-45deg); }
.xp-ba__label{ position:absolute; top:14px; z-index:3; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:5px 9px; border-radius:6px; background: rgba(12,23,18,.66); pointer-events:none; transition: opacity .3s; }
.xp-ba__label--l{ left:14px; }
.xp-ba__label--r{ right:14px; background: rgba(35,112,72,.9); }
.xp-ba__range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; z-index:4; cursor: ew-resize; -webkit-appearance:none; appearance:none; }
.xp-ba__range:focus-visible ~ .xp-ba__handle span{ outline: 3px solid var(--xp-sun); }
.xp-ba__note{ position:absolute; left:0; right:0; bottom:0; margin:0; z-index:3; padding: 18px 14px 10px; font-size:.68rem; color: rgba(255,255,255,.85); background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events:none; }
@media (max-width: 900px){
  .xp-ba__grid{ grid-template-columns:1fr; }
  .xp-ba__stage{ width:100%; max-width:440px; justify-self:center; }
}

/* All services grid — keep existing cards, add depth on hover */
.xp-all .service-card{ transform-style: preserve-3d; will-change: transform; }

/* --------------------------------------------------------------------------
   04 INDUSTRIES — horizontal cinematic track
   -------------------------------------------------------------------------- */
.xp-ind{ background: var(--xp-ink); color:#fff; position:relative; }
.xp-ind__pin{ position:relative; padding: clamp(80px, 10vw, 120px) 0; }
.xp-ind__track{
  display:flex; gap: 24px; align-items:stretch;
  overflow-x:auto; scroll-snap-type: x mandatory; padding: 0 max(24px, calc((100vw - var(--container)) / 2 + 24px)) 12px;
  scrollbar-width: thin;
}
.xp-ind__intro{ flex: 0 0 min(420px, 84vw); display:flex; flex-direction:column; justify-content:center; padding-right: 24px; scroll-snap-align:start; }
.xp-ind__hint{ margin-top:28px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--xp-sun); }
.xp-env{
  --tint: rgba(12,23,18,.2); --grade: none; --bg:#15271e;
  flex: 0 0 min(900px, 84vw); height: min(76svh, 620px); min-height: 460px;
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0, .9fr);
  border-radius: 22px; overflow:hidden; background: var(--bg); scroll-snap-align:center;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
}
.xp-env__media{ position:relative; overflow:hidden; }
.xp-env__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: var(--grade); transform: scale(1.12) translateX(var(--px, 0)); will-change: transform; }
.xp-env__media::after{ content:""; position:absolute; inset:0; background: var(--tint); mix-blend-mode: soft-light; pointer-events:none; }
.xp-env__media::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(0,0,0,0) 55%, var(--bg) 100%); }
.xp-env__body{ padding: clamp(28px, 4vw, 52px); display:flex; flex-direction:column; justify-content:flex-end; }
.xp-env__no{ margin:0 0 auto; font-size:.74rem; font-weight:700; letter-spacing:.16em; color: rgba(255,255,255,.45); }
.xp-env__title{ font-family: var(--font-display); font-weight:800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height:1.02; letter-spacing:-.03em; margin: 0 0 18px; color:#fff; }
.xp-env__risk{ font-size:.9rem; color: rgba(255,255,255,.82); margin:0 0 14px; line-height:1.5; }
.xp-env__risk span{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--xp-warn); margin-bottom:4px; }
.xp-env__fix{ font-size:1rem; line-height:1.6; color: rgba(236,242,236,.9); margin:0 0 18px; }
/* Each environment gets its own light */
.xp-env[data-env="offices"]{ --bg:#18212a; --tint: rgba(120,160,200,.45); --grade: saturate(.85) contrast(1.05); }
.xp-env[data-env="hotels"]{ --bg:#2a2016; --tint: rgba(230,170,90,.5); --grade: saturate(1.05) contrast(1.05); }
.xp-env[data-env="healthcare"]{ --bg:#16242a; --tint: rgba(170,215,230,.55); --grade: saturate(.7) brightness(1.05); }
.xp-env[data-env="restaurants"]{ --bg:#2b1d14; --tint: rgba(240,150,70,.5); --grade: saturate(1.1) contrast(1.06); }
.xp-env[data-env="manufacturing"]{ --bg:#141c22; --tint: rgba(110,140,170,.55); --grade: saturate(.65) contrast(1.1); }
.xp-env[data-env="warehouses"]{ --bg:#1b1f1a; --tint: rgba(150,160,120,.45); --grade: saturate(.8) contrast(1.08) brightness(.95); }
.xp-env[data-env="homes"]{ --bg:#16261c; --tint: rgba(250,210,120,.45); --grade: saturate(1.05); }
.xp-ind__progress{ display:none; }

html.xp-anim .xp-ind__pin.is-pinned{ height: calc(100svh - var(--hdr, 0px)); padding:0; display:flex; align-items:center; overflow:hidden; }
html.xp-anim .xp-ind__pin.is-pinned .xp-ind__track{ overflow:visible; scroll-snap-type:none; padding-bottom:0; will-change: transform; }
html.xp-anim .xp-ind__pin.is-pinned .xp-ind__progress{ display:block; position:absolute; left: max(24px, calc((100vw - var(--container)) / 2 + 24px)); right: max(24px, calc((100vw - var(--container)) / 2 + 24px)); bottom: 28px; height:2px; background: rgba(255,255,255,.12); }
.xp-ind__progress i{ display:block; height:100%; width: calc(var(--p, 0) * 100%); background: var(--xp-sun); }
@media (max-width: 767px){
  .xp-env{ grid-template-columns:1fr; grid-template-rows: 46% 1fr; height: auto; min-height: 560px; }
  .xp-env__media::before{ background: linear-gradient(0deg, var(--bg) 0%, rgba(0,0,0,0) 45%); }
  .xp-env__body{ padding: 22px 22px 26px; }
  .xp-env__no{ margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   05 TRUST
   -------------------------------------------------------------------------- */
.xp-trust{ background: linear-gradient(180deg, #f6f4ee, #eef1e8); padding: clamp(80px, 10vw, 128px) 0; }
.xp-stats{ list-style:none; margin:0 0 56px; padding:0; display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:14px; }
.xp-stat{
  position:relative; padding: 26px 18px 22px; border-radius:18px; background:#fff; border:1px solid var(--xp-line);
  transform-style: preserve-3d; will-change: transform; box-shadow: 0 18px 40px -26px rgba(12,23,18,.35);
}
.xp-stat__n{ display:block; font-family: var(--font-display); font-weight:800; font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing:-.04em; line-height:1; color: var(--green-700); transform: translateZ(28px); white-space:nowrap; }
.xp-stat__l{ display:block; margin-top:10px; font-size:.84rem; line-height:1.4; color: var(--text-secondary); transform: translateZ(20px); }
html.xp-anim .xp-stat{ animation: xpFloat 7s ease-in-out infinite; }
html.xp-anim .xp-stat:nth-child(2n){ animation-delay: -2.4s; }
html.xp-anim .xp-stat:nth-child(3n){ animation-delay: -4.6s; }
@keyframes xpFloat{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -6px; } }
.xp-recog{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: auto auto; gap:14px; }
.xp-recog figure{ margin:0; position:relative; overflow:hidden; border-radius:18px; background:#fff; border:1px solid var(--xp-line); }
.xp-recog__main{ grid-row: span 2; }
.xp-recog img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 3/2; }
.xp-recog__main img{ aspect-ratio:auto; min-height: 100%; }
.xp-recog figure:nth-child(3) img, .xp-recog figure:nth-child(4) img{ object-fit:contain; background:#fafaf7; padding:10px; }
.xp-recog figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 26px 16px 12px; font-size:.78rem; font-weight:600; color:#fff; background: linear-gradient(0deg, rgba(12,23,18,.82), rgba(12,23,18,0)); }
.xp-trust__more{ display:flex; gap:28px; flex-wrap:wrap; margin-top:28px; }
@media (max-width: 1024px){ .xp-stats{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 767px){
  .xp-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xp-recog{ grid-template-columns: 1fr 1fr; }
  .xp-recog__main{ grid-column: span 2; grid-row:auto; }
}

/* Coverage network */
.xp-net{ position:relative; margin: 0 0 36px; border-radius:22px; overflow:hidden; background: radial-gradient(90% 120% at 30% 0%, #1f3a2d, var(--xp-ink) 70%); padding: 18px 18px 14px; }
.xp-net__svg{ display:block; width:100%; height:auto; max-height: 440px; }
.xp-net__note{ margin: 4px 8px 4px; font-size:.8rem; color: rgba(226,234,228,.72); }
.xp-net .n-grid line{ stroke: rgba(255,255,255,.07); stroke-width:1; }
.xp-net .n-arc{ fill:none; stroke: rgba(245,194,75,.55); stroke-width:1.4; stroke-dasharray: 3 5; }
.xp-net .n-beam{ stroke: rgba(92,191,138,.55); stroke-width:2; }
.xp-net .n-node{ cursor:pointer; }
.xp-net .n-node circle.core{ fill: var(--xp-safe); }
.xp-net .n-node circle.halo{ fill: rgba(92,191,138,.18); transition: r .4s var(--xp-ease); }
.xp-net .n-node.is-hq circle.core{ fill: var(--xp-sun); }
.xp-net .n-node.is-hq circle.halo{ fill: rgba(245,194,75,.2); }
.xp-net .n-node text{ fill:#fff; font: 700 12px var(--font-body); }
.xp-net .n-node text.role{ fill: rgba(226,234,228,.6); font-weight:600; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.xp-net .n-node:hover circle.halo, .xp-net .n-node.is-active circle.halo, .xp-net .n-node:focus-visible circle.halo{ r: 22; }
.xp-net .n-node:focus{ outline:none; }
.xp-net .n-pulse{ fill:none; stroke: var(--xp-sun); stroke-width:1.5; opacity:0; }
html.xp-anim .xp-net .n-node.is-hq .n-pulse{ animation: xpNet 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes xpNet{ from{ transform: scale(.5); opacity:.9; } to{ transform: scale(2.6); opacity:0; } }

/* --------------------------------------------------------------------------
   FINAL SCENE
   -------------------------------------------------------------------------- */
.xp-final{ position:relative; isolation:isolate; overflow:hidden; min-height: 88svh; display:flex; align-items:center; background: var(--xp-ink); color:#fff; padding: 120px 0; }
.xp-final__media{ position:absolute; inset:-4%; z-index:-2; }
.xp-final__media img{ width:100%; height:100%; object-fit:cover; object-position: 75% center; filter: brightness(.5) saturate(.85) contrast(1.05); }
.xp-final__glow{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 70% at 78% 55%, rgba(92,191,138,.28), rgba(92,191,138,0) 70%),
    linear-gradient(90deg, rgba(8,18,13,.94) 0%, rgba(8,18,13,.7) 45%, rgba(8,18,13,.2) 100%),
    linear-gradient(0deg, rgba(8,18,13,.8), rgba(8,18,13,0) 40%);
}
.xp-final__title{ font-family: var(--font-display); font-weight:800; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height:1; letter-spacing:-.04em; margin:0; color:#fff; max-width: 12ch; }
.xp-final__inner{ width:100%; }
.xp-final__call{ margin-top:22px; font-size:.9rem; }
.xp-final__call a{ color: rgba(255,255,255,.8); }

/* --------------------------------------------------------------------------
   Scroll progress rail
   -------------------------------------------------------------------------- */
.xp-rail{ position:fixed; right:22px; top:50%; transform: translateY(-50%); z-index:40; opacity:0; pointer-events:none; transition: opacity .5s var(--xp-ease); }
.xp-rail.is-visible{ opacity:1; pointer-events:auto; }
.xp-rail ol{ list-style:none; margin:0; padding:10px 0; display:flex; flex-direction:column; gap:14px; position:relative; }
.xp-rail ol::before{ content:""; position:absolute; right:5px; top:10px; bottom:10px; width:1px; background: rgba(120,130,125,.35); }
.xp-rail ol::after{ content:""; position:absolute; right:5px; top:10px; width:1px; height: calc((100% - 20px) * var(--rail, 0)); background: var(--green-600); transition: height .2s linear; }
.xp-rail a{ display:flex; align-items:center; justify-content:flex-end; gap:12px; text-decoration:none; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: rgba(60,70,65,.6); }
.xp-rail a::after{ content:""; width:11px; height:11px; border-radius:50%; background: #fff; border:1.5px solid rgba(120,130,125,.55); position:relative; z-index:1; transition: background .3s, border-color .3s, transform .3s; }
.xp-rail a span{ opacity:0; transform: translateX(6px); transition: opacity .3s, transform .3s var(--xp-ease); padding:3px 7px; border-radius:5px; background: rgba(255,255,255,.85); }
.xp-rail a:hover span, .xp-rail a.is-active span{ opacity:1; transform:none; }
.xp-rail a.is-active{ color: var(--green-800); }
.xp-rail a.is-active::after{ background: var(--green-600); border-color: var(--green-600); transform: scale(1.15); }
.xp-rail.on-dark a{ color: rgba(255,255,255,.6); }
.xp-rail.on-dark a span{ background: rgba(12,23,18,.7); }
.xp-rail.on-dark a.is-active{ color:#fff; }
.xp-rail.on-dark ol::before{ background: rgba(255,255,255,.25); }
.xp-rail.on-dark a::after{ background: transparent; border-color: rgba(255,255,255,.5); }
.xp-rail.on-dark a.is-active::after{ background: var(--xp-sun); border-color: var(--xp-sun); }
.xp-rail.on-dark ol::after{ background: var(--xp-sun); }
.xp-progress-bar{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:1001; transform-origin: left; transform: scaleX(var(--rail,0)); background: var(--xp-sun); pointer-events:none; }
@media (max-width: 1100px){ .xp-rail{ display:none; } }
@media (min-width: 1101px){ .xp-progress-bar{ display:none; } }

/* --------------------------------------------------------------------------
   Custom cursor (fine pointers only)
   -------------------------------------------------------------------------- */
.xp-cursor{ position:fixed; left:0; top:0; z-index:10000; pointer-events:none; display:none; }
html.xp-cursor-on .xp-cursor{ display:block; }
.xp-cursor__dot, .xp-cursor__ring{ position:fixed; left:0; top:0; border-radius:50%; transform: translate3d(-100px,-100px,0); }
.xp-cursor__dot{ width:6px; height:6px; margin:-3px 0 0 -3px; background: var(--green-700); transition: opacity .2s, background .3s; }
.xp-cursor__ring{
  width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid rgba(35,70,54,.45);
  display:grid; place-items:center; transition: width .35s var(--xp-ease), height .35s var(--xp-ease), margin .35s var(--xp-ease), background .35s, border-color .35s;
}
.xp-cursor__ring span{ font: 800 .6rem/1 var(--font-body); letter-spacing:.14em; color:#fff; opacity:0; transition: opacity .25s; }
.xp-cursor.is-hover .xp-cursor__ring{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color: var(--green-600); }
.xp-cursor.has-label .xp-cursor__ring{ width:74px; height:74px; margin:-37px 0 0 -37px; background: var(--green-700); border-color: var(--green-700); }
.xp-cursor.has-label .xp-cursor__ring span{ opacity:1; }
.xp-cursor.has-label .xp-cursor__dot{ opacity:0; }
.xp-cursor.on-dark .xp-cursor__dot{ background: var(--xp-sun); }
.xp-cursor.on-dark .xp-cursor__ring{ border-color: rgba(255,255,255,.5); }
.xp-cursor.on-dark.has-label .xp-cursor__ring{ background: var(--xp-sun); border-color: var(--xp-sun); }
.xp-cursor.on-dark.has-label .xp-cursor__ring span{ color: var(--xp-ink); }
.xp-cursor.is-hidden{ opacity:0; }
html.xp-cursor-on main.xp, html.xp-cursor-on main.xp a, html.xp-cursor-on main.xp button, html.xp-cursor-on main.xp [data-cursor]{ cursor:none; }
html.xp-cursor-on main.xp input, html.xp-cursor-on main.xp textarea, html.xp-cursor-on main.xp select{ cursor:auto; }
html.xp-cursor-on .xp-ba__range{ cursor:none; }

/* --------------------------------------------------------------------------
   Reveal primitives
   -------------------------------------------------------------------------- */
html.xp-anim [data-reveal]{ opacity:0; transform: translateY(30px); filter: blur(6px); transition: opacity .9s var(--xp-ease), transform 1s var(--xp-ease), filter .9s var(--xp-ease); }
html.xp-anim [data-reveal].is-in{ opacity:1; transform:none; filter:none; }
html.xp-anim [data-clip]{ clip-path: inset(10% 8% 10% 8% round 18px); transition: clip-path 1.2s var(--xp-ease); }
html.xp-anim [data-clip].is-in{ clip-path: inset(0 0 0 0 round 18px); }
[data-parallax]{ will-change: transform; }
html.xp-anim .xp-recog [data-parallax]{ transform: scale(1.12) translateY(var(--py, 0)); }

@media (prefers-reduced-motion: reduce){
  .xp-hero__cue-line::after, .xp-hot i::after{ animation:none; }
}

/* Lenis smooth scrolling */
html.lenis, html.lenis body{ height:auto; }
html.lenis{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis [data-lenis-prevent]{ overscroll-behavior: contain; }