/* =====================================================================
   Web design page (services/web-design), on the v4 service template.
   Loaded after svc4.css and only by this page. Everything here is a
   wd5- class, or a narrow override scoped to body.wd5.
   Motion budget: transform and opacity only, no backdrop-filter, no
   filter animation, nothing read from layout on scroll. The one long
   movement (a screenshot panning through a page) is a single CSS
   transition on one composited image, started by hover or a button.
   ===================================================================== */

/* svc4 drifts the hero dot grid by animating background-position, which
   repaints the whole hero every frame. This page keeps the grid still. */
body.wd5 .s4-dots-bg { animation: none; }

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

/* ---------- shared bits ---------- */
.wd5-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  color: var(--s4-violet-ink); background: var(--s4-violet-soft);
}
.wd5-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wd5-kicker-d { color: #d6d0ff; background: rgba(139, 123, 255, .16); }

/* =====================================================================
   HERO
   ===================================================================== */
.wd5-crumbs { margin: 0 0 22px; font-size: 13.5px; color: var(--s4-on-3); }
.wd5-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; row-gap: 4px; }
.wd5-crumbs li { display: inline-flex; align-items: center; }
.wd5-crumbs li + li::before {
  content: ""; width: 6px; height: 6px; margin: 0 11px 0 9px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .7;
}
.wd5-crumbs a { color: var(--s4-on-2) !important; text-decoration: none !important; transition: color .2s; }
.wd5-crumbs a:hover { color: #fff !important; }
.wd5-crumbs a:focus-visible { outline: 2px solid var(--s4-violet-2); outline-offset: 3px; border-radius: 4px; }
.wd5-crumbs [aria-current] { color: var(--s4-on-3); }

/* The stage: two real client sites and one on a phone */
.wd5-stage-wrap { position: relative; margin-top: clamp(52px, 6vw, 80px); }
.wd5-stage { position: relative; margin: 0 auto; max-width: 1100px; aspect-ratio: 1100 / 640; }
.wd5-win {
  position: absolute; overflow: hidden; border-radius: 16px;
  background: #15121f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 50px 110px -40px rgba(0,0,0,.85), 0 30px 70px -40px rgba(109,92,246,.5);
}
.wd5-win img { display: block; width: 100%; height: auto; aspect-ratio: 1170 / 732; object-fit: cover; object-position: 50% 0; background: #1d1a2a; }
.wd5-win-back { left: 0; top: 10%; width: 57%; }
.wd5-win-front { right: 3%; top: 0; width: 63%; z-index: 2; }
.wd5-win-bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: #1c1928; border-bottom: 1px solid rgba(255,255,255,.07); }
.wd5-win-bar .wd5-dots i { background: rgba(255,255,255,.16); }
.wd5-win-bar .wd5-url { background: rgba(255,255,255,.06); box-shadow: none; color: var(--s4-on-2); }
.wd5-bar-gap { width: 42px; flex: none; }
.wd5-hphone {
  position: absolute; z-index: 3; left: 41%; bottom: -5%; width: 15.5%;
  padding: 7px; border-radius: 30px;
  background: linear-gradient(160deg, #2b2741, #110f1d);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 40px 80px -24px rgba(0,0,0,.85);
}
.wd5-hphone img { display: block; width: 100%; height: auto; border-radius: 23px; aspect-ratio: 480 / 1040; object-fit: cover; object-position: 50% 0; background: #050711; }
.wd5-pin {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border-radius: 16px;
  background: rgba(22, 19, 36, .92); color: var(--s4-on);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 24px 44px -20px rgba(0,0,0,.7);
  white-space: nowrap;
}
.wd5-pin > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.wd5-pin b { font-family: var(--s4-display); font-size: 14.5px; font-weight: 700; color: #fff; }
.wd5-pin em { font-style: normal; font-size: 12.5px; color: var(--s4-on-3); }
.wd5-pin-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(139,123,255,.2); color: #d6d0ff; flex: none; }
.wd5-pin-ic svg, .wd5-label-ic svg, .wd5-loc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wd5-pin-a { right: 0; top: -4%; }
.wd5-pin-b { left: -1.5%; bottom: 14%; }
.wd5-stage-note { margin-top: clamp(64px, 7vw, 92px); }
.wd5-stage-note a { color: #d6d0ff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(214,208,255,.4); }
.wd5-stage-note a:hover { text-decoration-color: currentColor; }

/* entrance: the windows land one after another (svc4.js adds .is-in) */
.s4-live-js .wd5-stage .wd5-win, .s4-live-js .wd5-stage .wd5-hphone, .s4-live-js .wd5-stage .wd5-pin { opacity: 0; transform: translateY(18px); }
.s4-live-js .wd5-stage.is-in .wd5-win, .s4-live-js .wd5-stage.is-in .wd5-hphone, .s4-live-js .wd5-stage.is-in .wd5-pin {
  opacity: 1; transform: none;
  transition: transform .5s var(--s4-snap), opacity .22s linear;
  transition-delay: calc(var(--d, 0ms) + var(--dd, 0ms));
}
.wd5-win-back { --dd: 0ms; }
.wd5-win-front { --dd: 70ms; }
.wd5-hphone { --dd: 140ms; }
.wd5-pin-a { --dd: 260ms; }
.wd5-pin-b { --dd: 320ms; }

/* =====================================================================
   BROWSER FRAME + THE PAN THROUGH A FULL PAGE
   ===================================================================== */
.wd5-frame { position: relative; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(21,19,29,.09), 0 30px 60px -32px rgba(40,30,90,.45), 0 12px 24px -16px rgba(40,30,90,.2); }
.wd5-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: #f4f3f7; border-bottom: 1px solid rgba(21,19,29,.07); }
.wd5-dots { display: flex; gap: 6px; flex: none; }
.wd5-dots i { width: 10px; height: 10px; border-radius: 50%; background: #dcd9e4; }
.wd5-url {
  flex: 1; min-width: 0; max-width: 360px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 8px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(21,19,29,.08);
  font-size: 12.5px; font-weight: 500; color: var(--s4-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd5-url svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .7; }
.wd5-livechip { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #0b6d4a; }
.wd5-livechip i { width: 7px; height: 7px; border-radius: 50%; background: var(--s4-green); box-shadow: 0 0 0 3px var(--s4-green-soft); }

.wd5-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #ecebf1; container-type: inline-size; }
.wd5-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: 1; }
.wd5-reel {
  position: absolute; left: 0; top: 0; z-index: 2; display: block; width: 100%; height: auto;
  opacity: 0; transform: translate3d(0, 0, 0);
  /* on the way back: glide up, then hand over to the sharp still */
  transition: transform .9s var(--s4-snap), opacity .25s linear .85s;
}
.wd5-reel:not([src]) { visibility: hidden; }
/* pan: the image's own height (100%) less one frame of view (62.5cqw at 16:10) */
.wd5-site.is-playing .wd5-reel {
  opacity: 1; transform: translate3d(0, calc(-100% + 62.5cqw), 0);
  transition: transform var(--dur, 6s) cubic-bezier(.42, .02, .35, 1) .12s, opacity .18s linear;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .wd5-site.is-ready .wd5-frame:hover .wd5-reel {
    opacity: 1; transform: translate3d(0, calc(-100% + 62.5cqw), 0);
    transition: transform var(--dur, 6s) cubic-bezier(.42, .02, .35, 1) .12s, opacity .18s linear;
    will-change: transform;
  }
  .wd5-card:not([data-wd-site]) .wd5-shot { transition: transform .8s var(--s4-snap); }
  .wd5-card:not([data-wd-site]) .wd5-frame:hover .wd5-shot { transform: scale(1.035); }
}

/* the control: a real button, so touch and keyboard get the same pan */
.wd5-play {
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(17, 15, 27, .84); color: #fff;
  font: 600 13px/1 var(--s4-body); letter-spacing: -0.005em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset, 0 10px 24px -10px rgba(0,0,0,.6);
  transition: transform .45s var(--s4-snap), background-color .2s;
}
.wd5-play:hover { background: rgba(17, 15, 27, .96); transform: translateY(-1px); }
.wd5-play:active { transform: scale(.96); }
.wd5-play:focus-visible { outline: 3px solid var(--s4-violet-2); outline-offset: 2px; }
.wd5-play-ic { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--s4-violet); flex: none; }
.wd5-play-ic::before { content: ""; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.wd5-play[aria-pressed="true"] .wd5-play-ic::before { left: 7px; top: 7px; width: 8px; height: 8px; border: 0; border-left: 2.5px solid #fff; border-right: 2.5px solid #fff; box-sizing: border-box; }
.wd5-site.is-loading .wd5-play-ic { animation: wd5-spin .8s linear infinite; background: conic-gradient(var(--s4-violet-2) 0 70%, rgba(255,255,255,.2) 0); }
.wd5-site.is-loading .wd5-play-ic::before { display: none; }
@keyframes wd5-spin { to { transform: rotate(1turn); } }

/* =====================================================================
   CLIENT WEBSITES
   ===================================================================== */
.wd5-work .s4-head { margin-bottom: clamp(44px, 5vw, 68px); }
.wd5-work .s4-sub b { color: var(--s4-ink); font-weight: 600; }
.wd5-label {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px !important;
  font-family: var(--s4-body) !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  color: var(--s4-ink-2);
}
.wd5-label::after { content: ""; flex: 1; height: 1px; background: var(--s4-line); }
.wd5-label-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--s4-violet-soft); color: var(--s4-violet-ink); }

/* featured local pair */
.wd5-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 2.8vw, 44px); }
.wd5-stagebox { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--s4-r); padding: clamp(56px, 5vw, 72px) clamp(20px, 3vw, 44px) 0; }
.wd5-stagebox .wd5-frame { border-radius: 14px 14px 0 0; }
.wd5-tint-sand { background: radial-gradient(120% 100% at 15% 0%, #fcf7ef, #eedfc6); }
.wd5-tint-mint { background: radial-gradient(120% 100% at 15% 0%, #f2faf5, #d3ecdd); }
.wd5-loc {
  position: absolute; z-index: 3; left: clamp(20px, 3vw, 44px); top: 16px;
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 10px; border-radius: 999px;
  background: rgba(255,255,255,.82); color: var(--s4-ink); font-size: 13px; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(21,19,29,.07);
}
.wd5-loc svg { width: 15px; height: 15px; color: var(--s4-violet-ink); }
.wd5-meta { padding: 26px 6px 0; }
.wd5-id { display: flex; align-items: center; gap: 16px; }
.wd5-id > div { min-width: 0; }
.wd5-logo { width: 64px; height: 64px; flex: none; display: grid; place-items: center; padding: 9px; border-radius: 16px; background: #0d0b16; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 20px -12px rgba(13,11,22,.6); }
.wd5-logo img { width: 100%; height: 100%; object-fit: contain; }
.wd5-site h4, .wd5-spot h3 { margin: 0; font-family: var(--s4-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--s4-ink); }
.wd5-site-lg h4 { font-size: clamp(24px, 2.2vw, 30px); }
.wd5-where { margin: 4px 0 0; font-size: 14.5px; color: var(--s4-ink-3); }
.wd5-desc { margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--s4-ink-2); max-width: 56ch; text-wrap: pretty; }
.wd5-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wd5-tags li { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--s4-ink-2); box-shadow: inset 0 0 0 1px var(--s4-line); }
.wd5-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.wd5-cs {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 7px 0 20px; border-radius: 999px;
  background: var(--s4-ink); color: #fff !important; text-decoration: none !important;
  font-family: var(--s4-display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform .5s var(--s4-snap);
}
.wd5-cs:hover { transform: translateY(-2px); }
.wd5-cs:focus-visible, .wd5-live:focus-visible, .wd5-more:focus-visible { outline: 3px solid var(--s4-violet-2); outline-offset: 3px; border-radius: 999px; }
.wd5-cs-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--s4-violet); transition: transform .5s var(--s4-snap); }
.wd5-cs:hover .wd5-cs-ic { transform: translateX(3px); }
.wd5-cs svg, .wd5-live svg, .wd5-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.wd5-cs-light { background: #fff; color: var(--s4-ink) !important; }
.wd5-live, .wd5-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 15px; color: var(--s4-ink) !important;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(21,19,29,.25);
  transition: text-decoration-color .2s;
}
.wd5-live:hover, .wd5-more:hover { text-decoration-color: currentColor; }
.wd5-live svg { color: var(--s4-violet-ink); }

/* Frontline spotlight */
.wd5-spot {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(28px, 3vw, 44px);
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(28px, 4vw, 64px);
  padding: clamp(14px, 1.4vw, 18px); padding-right: clamp(24px, 4vw, 60px);
  border-radius: calc(var(--s4-r) + 6px);
  background: radial-gradient(90% 120% at 0% 0%, #2a2350, var(--s4-night-2) 62%); color: var(--s4-on);
}
.wd5-spot .wd5-frame-dark { background: #121019; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -40px rgba(0,0,0,.8); border-radius: calc(var(--s4-r) - 6px); }
.wd5-frame-dark .wd5-bar { background: #1c1928; border-bottom-color: rgba(255,255,255,.07); }
.wd5-frame-dark .wd5-dots i { background: rgba(255,255,255,.16); }
.wd5-frame-dark .wd5-url { background: rgba(255,255,255,.06); box-shadow: none; color: var(--s4-on-2); }
.wd5-frame-dark .wd5-livechip { color: #7ff0bf; }
.wd5-frame-dark .wd5-livechip i { box-shadow: 0 0 0 3px rgba(61,220,151,.18); }
.wd5-view-video { aspect-ratio: 16 / 9; background: #121019; }
.wd5-view-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wd5-spot-copy { padding: clamp(10px, 2vw, 24px) 0; }
.wd5-spot h3 { color: #fff; font-size: clamp(28px, 2.8vw, 38px); }
.wd5-spot .wd5-kicker { margin-bottom: 16px; }
.wd5-spot .wd5-where { color: var(--s4-on-3); }
.wd5-spot .wd5-desc { color: var(--s4-on-2); }
.wd5-spot-stats { margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--s4-line-d); }
.wd5-spot-stats div { padding: 18px 14px 0 0; }
.wd5-spot-stats div + div { padding-left: 16px; border-left: 1px solid var(--s4-line-d); }
.wd5-spot-stats dt { order: 2; font-size: 13px; line-height: 1.4; color: var(--s4-on-3); }
.wd5-spot-stats div { display: flex; flex-direction: column; gap: 6px; }
.wd5-spot-stats dd { order: 1; margin: 0; font-family: var(--s4-display); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: -0.045em; color: #fff; white-space: nowrap; }
.wd5-spot-stats dd small { font-size: .42em; letter-spacing: 0; margin-left: 4px; color: var(--s4-on-2); }
.wd5-spot-stats dd span[aria-hidden] { color: var(--s4-violet-2); margin: 0 2px; font-size: .8em; }
.wd5-spot .wd5-live { color: #fff !important; text-decoration-color: rgba(255,255,255,.3); }
.wd5-spot .wd5-live svg { color: #c9c2ff; }

/* the grid */
.wd5-work .wd5-label + .wd5-grid { margin-top: 0; }
.wd5-spot + .wd5-label { margin-top: clamp(56px, 6vw, 84px) !important; }
.wd5-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wd5-card {
  display: flex; flex-direction: column;
  padding: 10px 10px 24px; border-radius: 24px; background: var(--s4-card);
  box-shadow: 0 0 0 1px var(--s4-line), 0 24px 48px -38px rgba(40,30,90,.5);
}
.wd5-card .wd5-frame { border-radius: 15px; box-shadow: 0 0 0 1px rgba(21,19,29,.08); }
.wd5-card .wd5-bar { height: 34px; gap: 10px; padding: 0 11px; }
.wd5-card .wd5-dots i { width: 8px; height: 8px; }
.wd5-card .wd5-url { height: 22px; font-size: 11.5px; margin-right: 34px; }
.wd5-card .wd5-play { right: 9px; bottom: 9px; height: 32px; font-size: 12.5px; padding-right: 12px; }
.wd5-card .wd5-play-ic { width: 20px; height: 20px; }
.wd5-card .wd5-play-ic::before { left: 7px; top: 5px; }
.wd5-card .wd5-play[aria-pressed="true"] .wd5-play-ic::before { left: 6px; top: 6px; }
.wd5-card .wd5-meta { display: flex; flex-direction: column; flex: 1; padding: 20px 14px 0; }
.wd5-card h4 { font-size: 20px; }
.wd5-card .wd5-where { font-size: 13.5px; }
.wd5-card .wd5-desc { margin-top: 10px; font-size: 15px; }
.wd5-card .wd5-tags { margin-top: 14px; }
.wd5-card .wd5-tags li { background: var(--s4-paper); box-shadow: none; }
.wd5-card .wd5-links { margin-top: auto; padding-top: 18px; gap: 10px 20px; }
.wd5-card .wd5-live, .wd5-card .wd5-more { font-size: 14.5px; }
.wd5-more svg { color: var(--s4-violet-ink); }

/* next step strip */
.wd5-next {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px); border-radius: var(--s4-r);
  background: radial-gradient(120% 140% at 100% 0%, #f1edff, var(--s4-lilac));
}
.wd5-next > div:first-child { max-width: 560px; }
.wd5-next-h { margin: 0; font-family: var(--s4-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.03em; color: var(--s4-ink); }
.wd5-next p:not(.wd5-next-h) { margin: 8px 0 0; color: var(--s4-ink-2); font-size: 16px; }
.wd5-next-cta { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; }

/* =====================================================================
   LOCAL
   ===================================================================== */
.wd5-local { overflow: hidden; overflow: clip; }
.wd5-local::before { content: ""; position: absolute; right: -10%; top: -10%; width: 70%; height: 80%; background: radial-gradient(closest-side, rgba(109,92,246,.2), transparent 75%); pointer-events: none; }
.wd5-local-grid { position: relative; display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(40px, 5vw, 76px); align-items: center; }
.wd5-local .s4-sub { margin: 22px 0 0; }
.wd5-meet-k { margin: 32px 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--s4-on-3); }

/* meet in person: three steps joined by one line */
.wd5-meet { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wd5-meet::before { content: ""; position: absolute; left: 20px; right: calc((100% - 28px) / 3 - 20px); top: 20px; height: 1px; background: linear-gradient(90deg, rgba(139,123,255,.75), rgba(139,123,255,.2)); }
.wd5-meet li { position: relative; display: flex; flex-direction: column; gap: 5px; padding-right: 4px; font-size: 14px; line-height: 1.45; color: var(--s4-on-2); }
.wd5-meet-ic { position: relative; width: 40px; height: 40px; margin-bottom: 9px; border-radius: 12px; display: grid; place-items: center; color: #cfc8ff; background: #17142b; box-shadow: 0 0 0 1px rgba(139,123,255,.4) inset, 0 12px 26px -14px rgba(109,92,246,.9); }
.wd5-meet-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wd5-meet b { font-family: var(--s4-display); font-size: 16px; letter-spacing: -0.015em; color: #fff; }

.wd5-towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wd5-towns li { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; color: var(--s4-on-2); background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--s4-line-d) inset; }
.wd5-towns .wd5-towns-all { color: #ddd8ff; background: rgba(139,123,255,.16); box-shadow: 0 0 0 1px rgba(139,123,255,.34) inset; }

.wd5-local-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.wd5-llink {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 17px; border-radius: 18px;
  color: var(--s4-on-2); text-decoration: none !important;
  background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--s4-line-d) inset;
  transition: background-color .25s, box-shadow .25s, transform .4s var(--s4-snap);
}
.wd5-llink:hover { background: rgba(255,255,255,.075); box-shadow: 0 0 0 1px rgba(139,123,255,.4) inset; transform: translateY(-2px); }
.wd5-llink:focus-visible { outline: 2px solid var(--s4-violet-2); outline-offset: 3px; }
.wd5-llink-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #cfc8ff; background: rgba(139,123,255,.16); }
.wd5-llink-ic svg, .wd5-llink-go { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wd5-llink > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wd5-llink b { font-family: var(--s4-display); font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; color: #fff; }
.wd5-llink em { font-style: normal; font-size: 13px; line-height: 1.45; color: var(--s4-on-3); }
.wd5-llink-go { flex: none; margin-top: 8px; color: var(--s4-on-3); transition: transform .3s var(--s4-snap), color .2s; }
.wd5-llink:hover .wd5-llink-go { transform: translateX(3px); color: #fff; }
.wd5-local-fine { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--s4-on-3); }

/* the map: drawn from real coordinates, the river is the state line */
.wd5-map {
  position: relative; margin: 0; width: 100%; max-width: 590px; justify-self: end;
  display: flex; flex-direction: column; border-radius: calc(var(--s4-r) + 4px); overflow: hidden;
  background: linear-gradient(180deg, #17142c, #0e0c1a);
  box-shadow: 0 0 0 1px var(--s4-line-d) inset, 0 60px 120px -50px rgba(0,0,0,.85);
}
.wd5-map-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 14px 18px; border-bottom: 1px solid var(--s4-line-d); font-size: 12.5px; color: var(--s4-on-3); }
.wd5-map-place { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.wd5-map-place svg { width: 16px; height: 16px; fill: none; stroke: #b9b0ff; stroke-width: 2; stroke-linejoin: round; }
.wd5-map-place i { font-style: normal; color: var(--s4-on-3); }
.wd5-map-key { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.wd5-map-key i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.wd5-map-key .k-client { background: #fff; box-shadow: 0 0 0 2.5px var(--s4-violet); }
.wd5-map-key .k-meet { margin-left: 8px; border: 1.5px dashed rgba(207,200,255,.8); }

.wd5-map-canvas { position: relative; aspect-ratio: 560 / 520; container-type: inline-size; background: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.2px) 0 0 / 20px 20px; }
.wd5-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wd5-nsw { fill: rgba(139,123,255,.075); }
.wd5-contours path { fill: none; stroke: rgba(255,255,255,.065); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wd5-lake { fill: rgba(124,200,255,.15); stroke: rgba(124,200,255,.5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wd5-road { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 1.6; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.wd5-river-glow { fill: none; stroke: rgba(139,123,255,.2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wd5-river { fill: none; stroke: url(#wd5-river-g); stroke-width: .66; stroke-linecap: round; stroke-linejoin: round; }

.wd5-meet-zone { position: absolute; left: 20%; top: 6%; width: 44%; height: 47%; border-radius: 50%; border: 1.5px dashed rgba(207,200,255,.42); background: radial-gradient(closest-side, rgba(139,123,255,.13), transparent); pointer-events: none; }

.wd5-state, .wd5-rlabel, .wd5-lakelabel, .wd5-shield, .wd5-edge, .wd5-city, .wd5-town, .wd5-cpin { position: absolute; left: var(--x); top: var(--y); }
.wd5-state { font-family: var(--s4-display); font-weight: 700; font-size: clamp(11px, 2.3cqw, 13px); letter-spacing: .32em; color: rgba(245,244,250,.24); }
.wd5-rlabel { font-size: clamp(10.5px, 2.1cqw, 12px); font-style: italic; color: rgba(190,182,255,.9); white-space: nowrap; transform: rotate(17deg); transform-origin: left center; }
.wd5-lakelabel { font-size: clamp(10.5px, 2.1cqw, 12px); font-style: italic; line-height: 1.2; text-align: center; color: rgba(165,215,255,.9); transform: translate(-50%, -50%); }
.wd5-shield { transform: translate(-50%, -50%); padding: 2px 5px; border-radius: 4px; font: 700 10px/1.25 var(--s4-display); letter-spacing: .04em; color: #f6d248; background: #1d6b3a; box-shadow: 0 0 0 1px rgba(246,210,72,.55) inset; }
.wd5-edge { display: inline-flex; align-items: center; gap: 5px; font-size: clamp(10.5px, 2cqw, 12px); color: var(--s4-on-3); white-space: nowrap; }
.wd5-edge svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wd5-edge-t { transform: translate(8px, 10px); }
.wd5-edge-l { transform: translate(10px, -50%); }
.wd5-edge-b { transform: translate(10px, -100%); }
.wd5-city { font-family: var(--s4-display); font-weight: 700; font-size: clamp(14px, 3.5cqw, 20px); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.92); white-space: nowrap; transform: translate(-100%, -50%); }
.wd5-city-v { transform: translate(0, -50%); }
.wd5-town { display: flex; align-items: center; gap: 6px; font-size: clamp(10.5px, 2.15cqw, 12.5px); color: var(--s4-on-2); white-space: nowrap; transform: translate(-3px, -50%); }
.wd5-town::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: rgba(245,244,250,.6); box-shadow: 0 0 0 3px rgba(245,244,250,.08); }

/* client pins: the logo sits above the spot, the site shows on hover or focus */
.wd5-cpin { z-index: 3; width: 0; height: 0; text-decoration: none !important; }
.wd5-cpin:hover, .wd5-cpin:focus-visible { z-index: 4; }
.wd5-cpin::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--s4-violet), 0 0 16px 3px rgba(139,123,255,.7); }
.wd5-cpin::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(139,123,255,.8); animation: wd5-ping 2.6s var(--s4-glide) infinite; }
.wd5-cpin-l::after { animation-delay: 1.3s; }
.wd5-off .wd5-cpin::after { animation-play-state: paused; }
.wd5-cpin-dot {
  position: absolute; left: 0; bottom: 14px; width: 64px; height: 32px; padding: 6px 8px; border-radius: 10px;
  display: grid; place-items: center; background: #08070e; transform: translateX(-50%);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 14px 28px -12px rgba(0,0,0,.9);
  transition: transform .35s var(--s4-snap), box-shadow .25s;
}
.wd5-cpin-dot::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: #08070e; transform: translateX(-50%) rotate(45deg); box-shadow: 1.5px 1.5px 0 0 rgba(255,255,255,.85); }
.wd5-cpin-dot img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.wd5-cpin:hover .wd5-cpin-dot, .wd5-cpin:focus-visible .wd5-cpin-dot { transform: translateX(-50%) translateY(-3px); box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(139,123,255,.45), 0 18px 34px -12px rgba(0,0,0,.9); }
.wd5-cpin:focus-visible { outline: none; }
.wd5-cpin-card {
  position: absolute; top: 18px; width: 220px; border-radius: 14px; overflow: hidden; background: #fff; color: var(--s4-ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); opacity: 0; transform: translateY(8px) scale(.97); pointer-events: none;
  transition: opacity .2s, transform .3s var(--s4-snap);
}
.wd5-cpin-r .wd5-cpin-card { left: -20px; }
.wd5-cpin-l .wd5-cpin-card { right: -20px; }
.wd5-cpin:hover .wd5-cpin-card, .wd5-cpin:focus-visible .wd5-cpin-card { opacity: 1; transform: none; }
.wd5-cpin-card img { display: block; width: 100%; height: auto; aspect-ratio: 1170 / 732; object-fit: cover; }
.wd5-cpin-card > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.wd5-cpin-card b { font-family: var(--s4-display); font-size: 14px; letter-spacing: -0.01em; }
.wd5-cpin-card em { font-style: normal; font-size: 12px; color: var(--s4-ink-3); }
.wd5-cpin-card i { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--s4-violet-ink); }
.wd5-cpin-card i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) { .wd5-cpin-card { display: none; } }
/* small maps: the river label lifts clear of the line, and Corowa (also in the town list) steps aside */
@container (max-width: 480px) {
  .wd5-rlabel { top: 5.6%; }
  .wd5-edge-l { display: none; }
}

.wd5-map-foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--s4-line-d); }
.wd5-map-foot span { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; font-size: 12px; line-height: 1.4; color: var(--s4-on-3); }
.wd5-map-foot span + span { box-shadow: -1px 0 0 var(--s4-line-d); }
.wd5-map-foot b { font-family: var(--s4-display); font-size: 14px; letter-spacing: -0.01em; color: #fff; }

/* on arrival the river draws itself in, then the meeting area and the pins land */
.s4-live-js .wd5-map .wd5-river { stroke-dasharray: 1; stroke-dashoffset: 1; }
.s4-live-js .wd5-map.is-in .wd5-river { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--s4-glide) .1s; }
.s4-live-js .wd5-map .wd5-meet-zone, .s4-live-js .wd5-map .wd5-cpin { opacity: 0; transform: scale(.6); }
.s4-live-js .wd5-map.is-in .wd5-meet-zone, .s4-live-js .wd5-map.is-in .wd5-cpin { opacity: 1; transform: none; transition: opacity .3s linear, transform .5s var(--s4-snap); }
.s4-live-js .wd5-map.is-in .wd5-meet-zone { transition-delay: .25s; }
.s4-live-js .wd5-map.is-in .wd5-cpin-r { transition-delay: .45s; }
.s4-live-js .wd5-map.is-in .wd5-cpin-l { transition-delay: .6s; }

@media (max-width: 960px) {
  .wd5-map { justify-self: stretch; max-width: none; }
}
@media (max-width: 640px) {
  .wd5-meet { grid-template-columns: 1fr; gap: 16px; }
  .wd5-meet::before { left: 20px; right: auto; top: 20px; bottom: 20px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(139,123,255,.75), rgba(139,123,255,.2)); }
  .wd5-meet li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; }
  .wd5-meet-ic { grid-row: span 2; margin: 0; }
  .wd5-local-links { grid-template-columns: 1fr; }
  .wd5-map-bar { padding: 12px 14px; }
  .wd5-map-foot span { padding: 12px 10px 13px; font-size: 11px; }
  .wd5-map-foot b { font-size: 12.5px; }
  .wd5-cpin-dot { width: 54px; height: 28px; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .wd5-map .wd5-river { stroke-dasharray: none !important; }
  .wd5-map .wd5-meet-zone, .wd5-map .wd5-cpin { opacity: 1 !important; transform: none !important; }
  .wd5-cpin::after { animation: none !important; }
}

.wd5-locals { position: relative; margin-top: clamp(56px, 6vw, 88px); }
.wd5-locals-h { margin: 0 0 18px; font-size: 14.5px; color: var(--s4-on-3); }
.wd5-locals-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.wd5-locals-row a, .wd5-locals-static {
  height: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 18px;
  background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--s4-line-d) inset;
  text-decoration: none !important; color: var(--s4-on-2);
}
.wd5-locals-row a { transition: background-color .3s, transform .5s var(--s4-snap); }
.wd5-locals-row a:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.wd5-locals-row a:focus-visible { outline: 2px solid var(--s4-violet-2); outline-offset: 3px; }
.wd5-locals-row a > span:last-child, .wd5-locals-static > span:last-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.wd5-locals-row b { font-family: var(--s4-display); font-size: 14.5px; letter-spacing: -0.01em; color: #fff; }
.wd5-locals-row em { font-style: normal; font-size: 12.5px; color: var(--s4-on-3); }
.wd5-locals-logo { width: 46px; height: 46px; flex: none; display: grid; place-items: center; padding: 6px; border-radius: 12px; background: #08070e; box-shadow: 0 0 0 1px var(--s4-line-d) inset; }
.wd5-locals-logo img { width: 100%; height: 100%; object-fit: contain; }

/* =====================================================================
   WHAT EVERY BUILD INCLUDES: the art
   ===================================================================== */
.wd5-pals { display: grid; gap: 12px; width: min(84%, 400px); }
.wd5-pal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; }
.wd5-pal:nth-child(2) { margin-left: 8%; margin-right: -8%; }
.wd5-pal-sw { display: flex; }
.wd5-pal-sw i { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.wd5-pal-sw i + i { margin-left: -8px; }
.wd5-pal-sw i:nth-child(1) { background: var(--a); }
.wd5-pal-sw i:nth-child(2) { background: var(--b); }
.wd5-pal-sw i:nth-child(3) { background: var(--c); box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(21,19,29,.1); }
.wd5-pal > span:last-child { font-size: 12.5px; color: var(--s4-ink-3); text-align: right; }
.wd5-pal-aa { font-size: 30px; line-height: 1; color: var(--a); }
.wd5-aa-1 { font-family: var(--s4-body); font-weight: 300 !important; letter-spacing: .08em !important; text-transform: uppercase; font-size: 24px; }
.wd5-aa-2 { font-weight: 700; letter-spacing: -0.04em !important; }
.wd5-aa-3 { font-family: var(--s4-body); font-weight: 800 !important; font-style: italic; text-transform: uppercase; letter-spacing: -0.02em !important; color: var(--b); }

.wd5-fphone {
  width: min(40%, 190px); padding: 7px; border-radius: 30px; margin-top: 6%;
  background: linear-gradient(160deg, #2b2741, #121020);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 40px 70px -30px rgba(20,30,70,.6);
}
.wd5-fphone img { display: block; width: 100%; height: auto; border-radius: 23px; aspect-ratio: 480 / 1040; object-fit: cover; }
.wd5-chip-speed { top: 12%; right: 5%; }
.wd5-chip-devices { bottom: 12%; left: 5%; }

.wd5-code { width: min(86%, 420px); padding: 18px 20px 20px; background: #16131f; color: var(--s4-on); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 70px -30px rgba(40,30,20,.55); }
.wd5-code-top { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--s4-on-3); margin-bottom: 12px; }
.wd5-code-top b { color: #fff; font-size: 14px; }
.wd5-code-top span:last-child { margin-left: auto; font-family: var(--s4-mono); }
.wd5-code-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s4-green); }
.wd5-code pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--s4-mono); font-size: 13px; line-height: 1.7; color: var(--s4-on-2); }
.wd5-code em { font-style: normal; color: #c9c2ff; }
.wd5-code s { text-decoration: none; color: #7ff0bf; }
.wd5-code i { font-style: normal; color: var(--s4-on-3); }

.wd5-qform { width: min(82%, 380px); padding: 20px; display: grid; gap: 12px; margin-top: -6%; }
.wd5-qform-top { display: flex; justify-content: space-between; align-items: baseline; }
.wd5-qform-top b { font-size: 17px; }
.wd5-qform-top span { font-size: 12px; color: var(--s4-ink-3); }
.wd5-qform-bar { display: flex; gap: 5px; }
.wd5-qform-bar i { flex: 1; height: 4px; border-radius: 4px; background: var(--s4-paper-2); }
.wd5-qform-bar i:first-child { background: var(--s4-green); }
.wd5-qform-q { margin: 4px 0 0; font-weight: 600; font-size: 14.5px; }
.wd5-qform-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wd5-qform-opts span { padding: 10px 12px; border-radius: 12px; font-size: 13px; box-shadow: inset 0 0 0 1px var(--s4-line); color: var(--s4-ink-2); }
.wd5-qform-opts .is-on { box-shadow: inset 0 0 0 2px var(--s4-green); color: var(--s4-ink); font-weight: 600; background: #f3fbf7; }
.wd5-qform-go { justify-self: end; padding: 9px 16px; border-radius: 999px; background: #0f6b4a; color: #fff; font-size: 13px; font-weight: 600; }

.wd5-admin { width: min(88%, 470px); display: grid; grid-template-columns: 116px 1fr; overflow: hidden; background: #1d1932; color: var(--s4-on); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 40px 80px -30px rgba(0,0,0,.7); margin: -6% 10% 0 0; }
.wd5-admin-side { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; background: rgba(255,255,255,.035); border-right: 1px solid rgba(255,255,255,.07); }
.wd5-admin-side b { font-size: 13px; color: #fff; padding: 0 8px 8px; }
.wd5-admin-side span { font-size: 12.5px; padding: 7px 8px; border-radius: 8px; color: var(--s4-on-3); }
.wd5-admin-side .is-on { background: rgba(139,123,255,.2); color: #fff; }
.wd5-admin-main { padding: 16px 18px 18px; display: grid; gap: 12px; }
.wd5-admin-top { display: flex; justify-content: space-between; align-items: baseline; }
.wd5-admin-top b { font-size: 15px; color: #fff; }
.wd5-admin-top span { font-size: 12px; color: var(--s4-on-3); }
.wd5-admin-main label { display: grid; gap: 6px; }
.wd5-admin-main label span { font-size: 11.5px; color: var(--s4-on-3); }
.wd5-admin-main label i { display: block; height: 9px; width: calc(var(--w, 1) * 100%); border-radius: 5px; background: rgba(255,255,255,.12); }
.wd5-admin-main .wd5-admin-img { height: 44px; width: 64%; border-radius: 9px; background: linear-gradient(135deg, rgba(139,123,255,.45), rgba(61,220,151,.3)); }
.wd5-admin-save { justify-self: end; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--s4-ink); font-size: 12.5px; font-weight: 700; }
.wd5-feats-foot { text-align: center; }

/* =====================================================================
   PRICE
   ===================================================================== */
.wd5-price-sec { padding-top: 0; }
.wd5-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.wd5-price {
  display: flex; flex-direction: column; padding: clamp(28px, 3vw, 38px); border-radius: var(--s4-r);
  background: var(--s4-card); box-shadow: 0 0 0 1px var(--s4-line), 0 20px 40px -32px rgba(40,30,90,.35);
}
.wd5-price h3 { font-size: 21px; }
.wd5-from { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 0; }
.wd5-from span { font-size: 14px; color: var(--s4-ink-3); }
.wd5-from b { font-family: var(--s4-display); font-weight: 700; font-size: clamp(42px, 4vw, 56px); letter-spacing: -0.05em; line-height: 1; color: var(--s4-violet-ink); }
.wd5-price-k { margin: 14px 0 22px; font-size: 15.5px; color: var(--s4-ink-2); }
.wd5-price .s4-list { font-size: 15px; gap: 9px; padding-top: 20px; border-top: 1px solid var(--s4-line); }
.wd5-price-mid { background: var(--s4-night-2); color: var(--s4-on); box-shadow: 0 30px 60px -36px rgba(20,14,50,.7); }
.wd5-price-mid .wd5-from span, .wd5-price-mid .wd5-price-k { color: var(--s4-on-2); }
.wd5-price-mid .wd5-from b { color: #fff; }
.wd5-price-mid .s4-list { color: var(--s4-on-2); border-top-color: var(--s4-line-d); }
.wd5-price-mid .s4-list li::before { background-color: rgba(139,123,255,.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c2ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }
.wd5-price-foot { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: var(--s4-r); box-shadow: 0 0 0 1px var(--s4-line) inset; }
.wd5-price-foot p { margin: 0; padding: 22px clamp(20px, 2.4vw, 30px); font-size: 15px; line-height: 1.55; color: var(--s4-ink-2); }
.wd5-price-foot p + p { border-left: 1px solid var(--s4-line); }
.wd5-price-foot b { display: block; margin-bottom: 4px; font-family: var(--s4-display); font-size: 16px; color: var(--s4-ink); }

/* =====================================================================
   PROCESS: a five-stop line
   ===================================================================== */
.wd5-steps-sec { overflow: hidden; overflow: clip; }
.wd5-steps-sec::after { content: ""; position: absolute; right: -15%; bottom: -30%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(109,92,246,.2), transparent 75%); pointer-events: none; }
.wd5-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wd5-steps::before {
  content: ""; position: absolute; left: 10px; right: 0; top: 10px; height: 2px;
  background: linear-gradient(90deg, var(--s4-violet-2), rgba(139,123,255,.15));
  transform-origin: 0 50%;
}
.wd5-steps li { position: relative; padding-top: 44px; }
.wd5-step-dot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--s4-night); box-shadow: 0 0 0 2px var(--s4-violet-2) inset, 0 0 0 6px rgba(139,123,255,.12); }
.wd5-step-dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--s4-violet-2); }
.wd5-when { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; color: #d6d0ff; background: rgba(139,123,255,.16); }
.wd5-steps h3 { margin: 14px 0 10px !important; font-size: clamp(20px, 1.7vw, 23px); color: #fff; }
.wd5-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--s4-on-2); }
/* the line draws, then each stop lands (only once svc4.js is running) */
.s4-live-js .wd5-steps[data-rv] { opacity: 1; transform: none; }
.s4-live-js .wd5-steps::before { transform: scaleX(0); }
.s4-live-js .wd5-steps li { opacity: 0; transform: translateY(18px); }
.s4-live-js .wd5-steps.is-in::before { transform: none; transition: transform .8s var(--s4-snap); }
.s4-live-js .wd5-steps.is-in li { opacity: 1; transform: none; transition: transform .6s var(--s4-snap), opacity .25s linear; transition-delay: calc(var(--i) * 140ms + 120ms); }

/* =====================================================================
   REVIEWS: a still grid (no scroll-driven rows on this page)
   ===================================================================== */
.wd5-revs { columns: 3 300px; column-gap: 20px; }
.wd5-revs .s4-rev-card { width: auto; break-inside: avoid; margin: 0 0 20px; display: flex; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1080px) {
  .wd5-spot { grid-template-columns: 1fr; padding-right: clamp(14px, 1.4vw, 18px); }
  .wd5-spot-copy { padding: 4px clamp(10px, 3vw, 28px) 18px; }
  .wd5-locals-row { grid-template-columns: repeat(3, 1fr); }
  .wd5-steps { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .wd5-steps::before { display: none; }
}
@media (max-width: 960px) {
  .wd5-feature { grid-template-columns: 1fr; }
  .wd5-grid { grid-template-columns: 1fr 1fr; }
  .wd5-local-grid { grid-template-columns: 1fr; }
  .wd5-prices { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .wd5-price-foot { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .wd5-price-foot p + p { border-left: 0; border-top: 1px solid var(--s4-line); }
}
@media (max-width: 700px) {
  .wd5-stage { aspect-ratio: 1 / .86; }
  .wd5-win-back { left: 0; top: 0; width: 80%; }
  .wd5-win-front { right: 0; top: 30%; width: 84%; }
  .wd5-hphone { display: none; }
  .wd5-pin { padding: 6px 12px 6px 6px; border-radius: 13px; }
  .wd5-pin-ic { width: 28px; height: 28px; border-radius: 9px; }
  .wd5-pin b { font-size: 13px; }
  .wd5-pin em { font-size: 11.5px; }
  .wd5-pin-a { right: 0; top: auto; bottom: -4%; }
  .wd5-pin-b { left: 0; bottom: auto; top: 18%; }
  .wd5-win-bar { height: 28px; gap: 8px; padding: 0 8px; }
  .wd5-win-bar .wd5-dots i { width: 7px; height: 7px; }
  .wd5-win-bar .wd5-url { height: 20px; font-size: 10.5px; }
  .wd5-bar-gap { width: 26px; }
  .wd5-locals-row { grid-template-columns: 1fr 1fr; }
  .wd5-map { justify-self: stretch; max-width: none; }
}
@media (max-width: 640px) {
  .wd5-grid { grid-template-columns: 1fr; }
  .wd5-stagebox { padding: 54px 14px 0; }
  .wd5-loc { left: 14px; top: 14px; }
  .wd5-bar { height: 34px; gap: 8px; padding: 0 10px; }
  .wd5-dots i { width: 8px; height: 8px; }
  .wd5-url { height: 22px; font-size: 11.5px; }
  .wd5-livechip { font-size: 11px; }
  .wd5-play { height: 32px; font-size: 12.5px; right: 8px; bottom: 8px; padding-right: 12px; }
  .wd5-meta { padding: 22px 4px 0; }
  .wd5-logo { width: 54px; height: 54px; border-radius: 14px; }
  .wd5-links { gap: 12px 18px; }
  .wd5-spot-stats { grid-template-columns: 1fr; }
  .wd5-spot-stats div { flex-direction: row; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--s4-line-d); }
  .wd5-spot-stats div + div { padding-left: 0; border-left: 0; }
  .wd5-spot-stats dd { min-width: 96px; font-size: 30px; }
  .wd5-next { flex-direction: column; align-items: stretch; }
  .wd5-next-cta .s4-btn { justify-content: space-between; }
  .wd5-locals-row { grid-template-columns: 1fr; }
  .wd5-steps { grid-template-columns: 1fr; gap: 30px; }
  .wd5-steps::before { display: block; left: 10px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; background: linear-gradient(180deg, var(--s4-violet-2), rgba(139,123,255,.15)); transform-origin: 50% 0; }
  .s4-live-js .wd5-steps::before { transform: scaleY(0); }
  .wd5-steps li { padding: 0 0 0 46px; }
  .wd5-steps h3 { margin-top: 12px !important; }
  .wd5-pals { width: 92%; }
  .wd5-pal { padding: 10px 12px 10px 10px; gap: 10px; }
  .wd5-pal:nth-child(2) { margin-left: 4%; margin-right: -4%; }
  .wd5-pal-sw i { width: 24px; height: 24px; }
  .wd5-fphone { width: 44%; }
  .wd5-code pre { font-size: 11.5px; }
  .wd5-qform { width: 100%; margin-top: -14%; }
  .wd5-admin { width: 100%; margin: -10% 0 0; grid-template-columns: 92px 1fr; }
}

/* =====================================================================
   Reduced motion: no pan. The button opens the full page in a frame
   you scroll yourself, and nothing loops.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wd5-reel, .wd5-site.is-playing .wd5-reel, .wd5-site.is-ready .wd5-frame:hover .wd5-reel { transition: none !important; transform: none !important; will-change: auto !important; }
  .wd5-site.is-ready .wd5-frame:hover .wd5-reel { opacity: 0; }
  .wd5-site.is-playing .wd5-view { overflow-y: auto; overscroll-behavior: contain; }
  .wd5-site.is-playing .wd5-reel { opacity: 1; }
  .wd5-site.is-playing .wd5-view:focus-visible { outline: 3px solid var(--s4-violet-2); outline-offset: -3px; }
  .wd5-site.is-loading .wd5-play-ic { animation: none !important; }
  .s4-live-js .wd5-stage .wd5-win, .s4-live-js .wd5-stage .wd5-hphone, .s4-live-js .wd5-stage .wd5-pin,
  .s4-live-js .wd5-steps li { opacity: 1 !important; transform: none !important; }
  .s4-live-js .wd5-steps::before { transform: none !important; }
}

/* loops wait while their section is off screen (webdesign-v5.js) */
.wd5-off *, .wd5-off *::before, .wd5-off *::after { animation-play-state: paused !important; }