/* VIBRIYOGN.US brand layer — Archivo ExtraBold Expanded, VIBGYOR spectrum, rainbow V.
   Loaded last so it overrides spacing tuned for the previous (Cinzel) typeface. */
:root{
  --spectrum:linear-gradient(90deg,#7B3FBF 0%,#3B3FB5 16.67%,#1E7FD8 33.33%,#1FA85A 50%,#FFD400 66.67%,#FF8A00 83.33%,#E63B2E 100%);
}

/* Logo: lowercase wordmark with spectrum period (the V mark is used for the favicon) */
.brand{gap:9px;font-weight:800;font-size:19px;letter-spacing:-.01em;text-transform:none}
.brand-word{line-height:1}
.brand-word i{font-style:normal;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Spectrum rule under the header and above the footer */
.site-header{border-bottom:0}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--spectrum);pointer-events:none}
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--spectrum)}

/* Archivo Expanded is already wide: pull tracking in on display type */
.hero h1,.zm-copy h1,h1,h2{font-weight:800;letter-spacing:-.02em}
.site-footer h4,.steps .step b,.pipe-node b,.pillars a{letter-spacing:0}

/* Wordmark keeps the original Cinzel serif (VIBRIYOGN.US), with the rainbow period */
:root{--wordmark:"Cinzel",Georgia,"Times New Roman",serif}
.brand{font-family:var(--wordmark);font-stretch:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:18px}
.zm-word text{font-family:var(--wordmark);font-stretch:normal;font-weight:700}

/* Menu bar uses the single rainbow V; the footer keeps the VIBRIYOGN.US wordmark */
.site-header .brand .brand-v{display:block;height:48px;width:auto;overflow:visible}
.site-header .brand{padding:2px 0}

/* Menu: hovering one item dims the others */
.nav>*{transition:opacity .2s ease}
.nav:has(>a:hover,>.dd:hover,>.btn:hover)>*:not(:hover){opacity:.4}
.dd-menu a{transition:opacity .2s ease}
.dd-menu:has(a:hover) a:not(:hover){opacity:.4}

/* About hero: no grid squares; a dark gradient that blooms into the rainbow V on the left */
.about-hero{background:
  radial-gradient(120% 90% at 0% 60%,rgba(123,63,191,.30) 0%,rgba(30,127,216,.14) 35%,rgba(10,10,10,0) 65%),
  radial-gradient(60% 60% at 100% 0%,rgba(230,59,46,.10),rgba(10,10,10,0) 70%),
  var(--ink)}
.about-hero::before{content:none}
.about-v{position:absolute;left:-6%;top:50%;height:150%;aspect-ratio:19.44/23.4;transform:translateY(-50%);
  background:url(v-mark.svg) center/contain no-repeat;opacity:.16;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 95%);mask-image:linear-gradient(90deg,#000 35%,transparent 95%)}
.about-hero .wrap{position:relative;z-index:1}
@media (max-width:760px){.about-v{left:-30%;height:120%;opacity:.12}}

/* Promo banner once per visit (site.js adds .promo-banner-off after the first page); pricing details still show the offer */
.promo-banner-off .promo.promo-on{display:none}

/* Stop iPhone Safari from auto-enlarging some text blocks (made checklist lines uneven sizes) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
ul.chk label{font-size:16px;line-height:1.45}
@media (max-width:640px){ul.chk label{font-size:15px}}

/* Home: "Today is a good day for…" weather bar under the hero (assets/weather.js) */
.wx-bar{background:var(--ink);color:#e9e9e9;border-top:1px solid var(--line)}
.wx-bar .wrap{padding-top:16px;padding-bottom:16px}
.wx-row{display:flex;align-items:center;justify-content:center;gap:14px;min-height:40px}
.wx-line{margin:0;font-size:15px;font-weight:500;text-align:center}
.wx-line b{font-weight:700;color:#fff}
.wx-icon{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:#fff;background:var(--spectrum)}
.wx-go{flex:none;background:var(--accent);color:var(--ink);border:0;border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.wx-bar.is-done .wx-go{background:transparent;color:#bdbdbd;border:1px solid #444;font-weight:500;font-size:13px;padding:6px 12px}
.wx-go:disabled{opacity:.6;cursor:wait}
.wx-bar.is-loading .wx-icon{animation:wxPulse 1s ease-in-out infinite}
@keyframes wxPulse{50%{transform:scale(.85);opacity:.6}}
.wx-bar[data-wx=rain] .wx-icon,.wx-bar[data-wx=storm] .wx-icon,.wx-bar[data-wx=snow] .wx-icon,.wx-bar[data-wx=cold] .wx-icon{background:#1E7FD8}
.wx-bar[data-wx=sunny] .wx-icon,.wx-bar[data-wx=hot] .wx-icon{background:#FF8A00}
.wx-bar[data-wx=cloudy] .wx-icon,.wx-bar[data-wx=fog] .wx-icon,.wx-bar[data-wx=windy] .wx-icon{background:#3B3FB5}
.wx-bar[data-wx=night] .wx-icon{background:#7B3FBF}
.wx-bar[data-wx=alert] .wx-icon{background:#E63B2E;font-weight:800}
.wx-panel{max-width:860px;margin:14px auto 0}
.wx-ideas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wx-ideas li{display:flex;align-items:center;gap:10px;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;color:#f1f1f1}
.wx-ideas i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.wx-note{margin:10px 0 0;text-align:center;font-size:13px;color:var(--accent)}
.wx-alert{border:1px solid #E63B2E;border-left:4px solid #E63B2E;background:rgba(230,59,46,.08);border-radius:12px;padding:14px 16px;margin-bottom:12px;font-size:14px}
.wx-alert-soft{border-color:#FF8A00;background:rgba(255,138,0,.07)}
.wx-alert p{margin:0 0 6px}
.wx-alert-h{font-weight:800;color:#fff;font-size:15px}
.wx-pack{margin:6px 0 8px;padding-left:18px;columns:2;column-gap:28px}
.wx-pack li{margin:0 0 4px;break-inside:avoid}
.wx-src{margin:6px 0 0;font-size:12px;color:#9a9a9a}
.wx-src a{color:#d6d6d6}
.wx-credit{text-align:center;margin-top:10px}
@media (max-width:640px){.wx-row{flex-wrap:wrap;justify-content:flex-start}.wx-line{text-align:left;font-size:14px;flex:1 1 200px}.wx-ideas{grid-template-columns:1fr}.wx-pack{columns:1}.wx-credit{text-align:left}}

/* Service-page buttons jump to that service's tool or estimate group: leave room for the sticky menu, flash the target */
[id]{scroll-margin-top:96px}
fieldset.svc:target{animation:svcFlash 1.6s ease 1}
@keyframes svcFlash{0%,40%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}

/* Digital Footprint: free website check (assets/sitecheck.js) */
.sc-lbl{display:block;font-weight:700;margin:0 0 8px}
.sc-row{display:flex;gap:10px;flex-wrap:wrap}
.sc-row input{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;padding:13px 14px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink)}
.sc-row input:focus{outline:3px solid var(--accent);outline-offset:1px}
.sc-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.sc-ts{margin-top:10px}
.sc-err,.sc-merr{color:#c0392b;font-weight:600;font-size:14px;margin:10px 0 0}
.sc-merr{color:#ff8a7a}
.sc-what{margin:22px 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.sc-list li{display:flex;gap:10px;align-items:baseline}
.sc-list i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c);transform:translateY(-1px)}
.sc-out.is-scanning .sc-score{animation:wxPulse 1s ease-in-out infinite}
.sc-out.is-scanning .meter span{width:100%!important;background:var(--spectrum)!important;background-size:200% 100%!important;animation:scSweep 1.2s linear infinite}
@keyframes scSweep{to{background-position:-200% 0}}
.sc-result{display:flex;flex-direction:column;gap:10px}
.sc-host{color:var(--muted-dark);font-size:14px}
.sc-h{font-weight:800;color:#fff;margin-top:6px!important}
.sc-fixes{margin:0;padding-left:20px;display:grid;gap:10px}
.sc-fixes li{padding-left:4px}
.sc-fixes b{display:block;color:var(--accent)}
.sc-fixes span{color:#d6d6d6;font-size:14px;line-height:1.5}
.sc-mail{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.sc-mail input{font:inherit;font-size:16px;padding:11px 12px;border:1px solid #444;border-radius:10px;background:#141414;color:#fff}
.sc-mail input:focus{outline:2px solid var(--accent);outline-offset:1px}
.sc-mail .btn{justify-self:start;margin-top:2px}
[data-sitecheck]{align-items:start}

/* Weather bar: after loading, "Update my location" lives as a small link in the source line */
.wx-bar.is-done:not(.no-data) .wx-go{display:none}
.wx-upd{background:none;border:0;padding:0;font:inherit;color:#d6d6d6;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wx-upd:hover{color:var(--accent)}

/* Menu "Start a project": yellow at rest; on hover a dark button with white text and a rainbow border */
.nav .btn-accent{border:2px solid transparent;transition:background .2s ease,color .2s ease,transform .15s}
.nav .btn-accent:hover,.nav .btn-accent:focus-visible{background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--spectrum) border-box;color:#fff!important}

/* "Four services" cards: dark fade along the bottom on hover so the yellow "Learn more" pops */

/* "Have a project in mind?" strip: thinner and quieter */
.cta-mini{padding:16px 0}
.cta-mini p{font-size:15px}
.cta-mini b{font-size:16px;font-weight:700}

/* Footer without the Services column */
.site-footer .cols{grid-template-columns:2fr 1fr}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr}}

/* Brand bullet: the rainbow V turned on its side, pointing right (replaces glowing dots) */
.vy-arrow{flex:none;display:inline-block;width:16px;height:13px;background:url(v-mark.svg) center/contain no-repeat;transform:rotate(-90deg)}
.wx-ideas li{padding:0;display:block}
.wx-ideas a{display:flex;align-items:center;gap:10px;padding:12px 14px;color:#f1f1f1;text-decoration:none;border-radius:12px;transition:background .15s}
.wx-ideas a:hover{background:#1f1f1f}
.wx-ideas .wx-t{flex:1}
.wx-ideas .wx-where{flex:none;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8d8d8d}
.wx-ideas a:hover .wx-where{color:var(--accent)}
.wx-ideas a:hover .vy-arrow{transform:rotate(-90deg) translateY(3px)}
.vy-arrow{transition:transform .15s}
.sc-list .vy-arrow{transform:rotate(-90deg) translateX(-2px)}
.sc-list .vy-arrow{background-image:url(v-mark-light.svg)}

/* About hero: name + role, round portrait */
.about-role{margin:-10px 0 18px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.about-hero .portrait{max-width:320px}
.about-hero .portrait img{aspect-ratio:1/1;border-radius:50%;object-position:50% 18%;box-shadow:0 0 0 4px var(--ink),0 0 0 7px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.45)}
@media (max-width:760px){.about-hero .portrait{max-width:220px}}

/* Services header: four-service image strip behind a dark gradient; a slow spotlight passes over each */
.svc-hero::before{content:none}
.svc-mosaic{position:absolute;top:-10%;bottom:-10%;right:-4%;width:68%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;transform:skewX(-10deg);pointer-events:none}
.svc-mosaic span{position:relative;overflow:hidden;border-radius:6px;background:#111}
.svc-mosaic span::before{content:"";position:absolute;inset:-6%;background:var(--img) center/cover no-repeat;transform:skewX(10deg) scale(1.15);filter:grayscale(.55) contrast(1.05);opacity:.16;animation:svcPan 18s ease-in-out infinite alternate,svcSpot 16s ease-in-out infinite}
.svc-mosaic span:nth-child(2)::before{animation-delay:-4s,4s}
.svc-mosaic span:nth-child(3)::before{animation-delay:-8s,8s}
.svc-mosaic span:nth-child(4)::before{animation-delay:-12s,12s}
@keyframes svcPan{from{background-position:30% 40%}to{background-position:70% 60%}}
@keyframes svcSpot{0%,30%,100%{opacity:.14;filter:grayscale(.6) contrast(1.05)}12%{opacity:.42;filter:grayscale(0) contrast(1.05)}}
.svc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--ink) 30%,rgba(10,10,10,.75) 55%,rgba(10,10,10,.25) 100%),linear-gradient(0deg,var(--ink),rgba(10,10,10,0) 30%)}
.svc-hero .wrap{position:relative;z-index:1}
@media (max-width:760px){.svc-mosaic{width:110%;right:-30%;opacity:.8}.svc-hero::after{background:linear-gradient(90deg,var(--ink) 15%,rgba(10,10,10,.7) 60%,rgba(10,10,10,.45))}}
@media (prefers-reduced-motion:reduce){.svc-mosaic span::before{animation:none}}

/* Clients page: 3D map */
.clients-hero{background:var(--ink);color:#fff;padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px);position:relative;overflow:hidden}
.clients-hero h1{font-size:clamp(36px,5.2vw,62px);margin:0 0 12px}
.clients-hero .lead{color:#cfcfcf;max-width:640px;margin:0}
.cl-stage{position:relative;height:min(70vh,620px);margin-top:0;background:radial-gradient(70% 60% at 50% 45%,rgba(30,127,216,.14),rgba(10,10,10,0) 70%);touch-action:none;cursor:grab}
.cl-stage:active{cursor:grabbing}
.cl-canvas{display:block;width:100%;height:100%}
.cl-labels{position:absolute;inset:0;pointer-events:none}
.cl-tag{font-size:12px;color:#fff;background:rgba(10,10,10,.82);border:1px solid #3a3a3a;border-radius:999px;padding:4px 10px;white-space:nowrap;display:flex;gap:6px;align-items:center}
.cl-tag b{color:var(--accent);letter-spacing:.06em}
.cl-tag-home{display:none}
.cl-here{position:relative;width:18px;height:18px}
.cl-core{position:absolute;inset:0;border-radius:50%;background:#0A84FF;border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.cl-pulse{position:absolute;inset:-14px;border-radius:50%;background:rgba(10,132,255,.28);animation:clPulse 2.2s ease-out infinite}
.cl-name{position:absolute;left:24px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 4px #000;white-space:nowrap}
@keyframes clPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.cl-pulse{animation:none;opacity:.5}}
.cl-legend{position:absolute;left:var(--pad);bottom:14px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:12px;color:#bdbdbd}
.cl-legend span{display:flex;align-items:center;gap:8px}
.cl-home{display:inline-block;width:12px;height:12px;border-radius:50%;background:#0A84FF;border:2px solid #fff}
.cl-bar{display:inline-block;width:22px;height:8px;border-radius:2px;background:linear-gradient(90deg,#1E7FD8,#1FA85A,#FF8A00)}
.cl-reset{background:none;border:1px solid #444;color:#ddd;border-radius:999px;padding:5px 12px;font:inherit;font-size:12px;cursor:pointer}
.cl-reset:hover{border-color:var(--accent);color:var(--accent)}
.cl-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;color:#cfcfcf;font-size:15px}
.cl-list li{display:flex;align-items:center;gap:8px}
.cl-list b{color:#fff}
.cl-failed .cl-canvas,.cl-failed .cl-legend{display:none}
@media (max-width:640px){.cl-stage{height:62vh}}

/* Guides & case studies */
.g-hero{background:var(--ink);color:#fff;padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px)}
.g-hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.1;margin:6px 0 12px}
.g-index h1{font-size:clamp(36px,5.2vw,62px)}
.g-index .lead{color:#cfcfcf;max-width:640px;margin:0}
.g-narrow{max-width:780px}
.g-crumbs{font-size:13px;color:#9a9a9a}.g-crumbs a{color:#cfcfcf;text-decoration:none}.g-crumbs a:hover{color:var(--accent)}
.g-kind{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:14px 0 0}
.g-meta{color:#a9a9a9;font-size:14px;margin:0}.g-meta a{color:#e9e9e9}
.g-body{padding-top:28px;padding-bottom:12px;font-size:17px;line-height:1.7}
.g-body h2{font-size:clamp(22px,2.6vw,28px);margin:34px 0 10px;line-height:1.2}
.g-body ul,.g-body ol{padding-left:22px}.g-body li{margin:0 0 8px}
.g-body a{color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.g-answer{background:#fff8d6;border-left:4px solid var(--accent);border-radius:10px;padding:16px 20px;margin:0 0 8px}
.g-answer-h{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.g-answer p:last-child{margin:0}
.g-table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 12px}
.g-table th,.g-table td{text-align:left;padding:10px 12px;border-bottom:1px solid #e3e1db}
.g-table th{background:#f4f3ef;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.g-table td:last-child{white-space:nowrap;font-weight:600}
.g-steps li{padding-left:4px}
.g-sources{font-size:14px;color:var(--muted)}
.g-faq{margin-top:28px}
.g-cta{margin:28px 0 8px;padding:16px 20px;border:1px solid #e3e1db;border-radius:12px;background:#fff;font-size:16px}
.g-cta p{margin:0}
.g-rel-h{font-size:20px;margin:28px 0 12px}
.g-rel,.g-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:48px}
.g-grid{grid-template-columns:repeat(3,1fr);margin:0}
.g-card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid #e3e1db;border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.g-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.g-card .g-kind{margin:0;color:var(--muted)}
.g-card b{font-size:18px;line-height:1.3}
.g-desc{color:var(--muted);font-size:15px}
.g-more{margin-top:auto;font-weight:700;font-size:14px}.g-more::after{content:" →"}
@media (max-width:900px){.g-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.g-grid,.g-rel{grid-template-columns:1fr}.g-table td:last-child{white-space:normal}}
.g-hero h1{font-family:var(--serif);font-stretch:125%;font-weight:800;letter-spacing:-.02em}

/* CTA strip: the question itself is the link */
.cta-mini .cta-q{font-weight:700;font-size:16px;border-bottom:2px solid var(--accent)}
.cta-mini .cta-q span{display:inline-block;transition:transform .15s}
.cta-mini .cta-q:hover span{transform:translateX(3px)}
/* Clients page: plain state line under the map */
p.cl-list{display:block;margin:20px 0 0;color:#bdbdbd;font-size:15px}
.wx-ideas li{display:flex}.wx-ideas a{flex:1}

/* Home: rotating, typed headline (assets/tagline.js) */
.tl-h .tl-text{white-space:pre-line}
.tl-h{min-height:2.1em}
.tl-caret{display:inline-block;width:.08em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--accent);animation:tlBlink 1s steps(1) infinite}
@keyframes tlBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tl-caret{display:none}}
.zm-copy:has(.tl-h){max-width:760px}

/* Four services: hovering a card changes the whole section's background */
.svc-stage{position:relative;isolation:isolate;overflow:hidden}
.svc-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#0b0b0b;opacity:0;transition:opacity .9s ease}
.svc-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.svc-photo-l{background-size:cover;background-position:center;transform:scale(1.06)}
.svc-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.38) 45%,rgba(0,0,0,.55))}
.svc-stage.is-on .svc-bg{opacity:1}
.svc-stage[data-on=flow] .svc-shade{opacity:.25}
.svc-shade{transition:opacity .4s}
.svc-stage[data-on=web] [data-layer=web],.svc-stage[data-on=flow] [data-layer=flow],.svc-stage[data-on=gis] [data-layer=gis],.svc-stage[data-on=photo] [data-layer=photo]{opacity:1}
.svc-stage[data-on=web] [data-layer=web]{animation:svcPush 9s ease-out forwards}
.svc-stage[data-on=gis] [data-layer=gis]{animation:svcFly 14s linear forwards}
.svc-stage[data-on=photo] [data-layer=photo]{animation:svcOut 9s ease-out forwards}
@keyframes svcPush{from{transform:scale(1.04)}to{transform:scale(1.16)}}
@keyframes svcFly{from{transform:scale(1.3) translate(6%,4%)}to{transform:scale(1.3) translate(-6%,-4%)}}
@keyframes svcOut{from{transform:scale(1.18)}to{transform:scale(1.03)}}
.svc-stage .section-head h2,.svc-stage .section-head p{transition:color .8s ease}
.svc-stage.is-on .section-head h2{color:#fff}.svc-stage.is-on .section-head p{color:rgba(255,255,255,.78)}
/* workflow layer: content flowing through a pipeline into a finished post */
.svc-flow{background:radial-gradient(110% 90% at 85% 0%,#1c1c22,#0a0a0a 70%)}
.wf-flow{position:absolute;inset:0;width:100%;height:100%}
.wf-line{fill:none;stroke-width:2;opacity:.35;stroke-dasharray:2200;stroke-dashoffset:2200}
.svc-stage[data-on=flow] .wf-line{animation:wfDraw 1.6s ease-out forwards}
@keyframes wfDraw{to{stroke-dashoffset:0}}
.wf-pk{opacity:.85}
.wf-post{position:absolute;top:58px;right:calc((100% - 1100px)/2);width:380px;display:flex;gap:16px;padding:14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.wf-art{flex:none;width:150px;height:150px;border-radius:10px;overflow:hidden}
.wf-art svg{display:block;width:100%;height:100%}
.wf-route{stroke-dasharray:330;stroke-dashoffset:330}
.wf-stops circle{opacity:0;transform-box:fill-box;transform-origin:center}
.wf-scan{animation:none}
.wf-meta{flex:1;display:flex;flex-direction:column;gap:9px;padding-top:6px}
.wf-cap{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.28);width:0}
.wf-chans{display:flex;gap:7px;margin-top:6px}.wf-chans i{width:22px;height:22px;border-radius:7px;background:var(--c);opacity:.2;transform:scale(.7)}
.wf-pill{margin-top:auto;align-self:flex-start;font:600 12px/1 Archivo,system-ui,sans-serif;letter-spacing:.02em;color:#0b0b0b;background:#1fa85a;padding:8px 12px;border-radius:99px;opacity:0;transform:translateY(8px) scale(.9)}
.svc-stage[data-on=flow] .wf-route{animation:wfRoute 7s ease infinite}
.svc-stage[data-on=flow] .wf-stops circle{animation:wfPop 7s ease infinite}
.svc-stage[data-on=flow] .wf-stops circle:nth-child(2){animation-delay:.25s}.svc-stage[data-on=flow] .wf-stops circle:nth-child(3){animation-delay:.5s}.svc-stage[data-on=flow] .wf-stops circle:nth-child(4){animation-delay:.75s}
.svc-stage[data-on=flow] .wf-scan{animation:wfScan 7s linear infinite}
.svc-stage[data-on=flow] .wf-north{animation:wfNorth 7s ease infinite}
.svc-stage[data-on=flow] .wf-cap{animation:wfCap 7s ease infinite}
.svc-stage[data-on=flow] .wf-cap:nth-child(2){animation-delay:.3s}.svc-stage[data-on=flow] .wf-cap:nth-child(3){animation-delay:.6s}
.svc-stage[data-on=flow] .wf-chans i{animation:wfChan 7s ease infinite}
.svc-stage[data-on=flow] .wf-chans i:nth-child(2){animation-delay:.2s}.svc-stage[data-on=flow] .wf-chans i:nth-child(3){animation-delay:.4s}
.svc-stage[data-on=flow] .wf-pill{animation:wfPill 7s cubic-bezier(.2,.9,.3,1.3) infinite}
@keyframes wfRoute{0%,8%{stroke-dashoffset:330}38%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:330}}
@keyframes wfPop{0%,30%{opacity:0;transform:scale(0)}36%{opacity:1;transform:scale(1.5)}40%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes wfScan{0%,4%{transform:translateY(0);opacity:0}6%{opacity:1}24%{transform:translateY(24px);opacity:1}26%,100%{opacity:0}}
@keyframes wfNorth{0%,50%{transform:translate(118px,40px);opacity:.4}58%,94%{transform:translate(132px,18px);opacity:1}100%{transform:translate(118px,40px);opacity:.4}}
@keyframes wfCap{0%,40%{width:0}52%,94%{width:var(--w)}100%{width:0}}
@keyframes wfChan{0%,58%{opacity:.2;transform:scale(.7)}64%,94%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(.7)}}
@keyframes wfPill{0%,70%{opacity:0;transform:translateY(8px) scale(.9)}76%,94%{opacity:1;transform:none}100%{opacity:0}}
.wf-pipe{position:absolute;bottom:34px;left:calc((100% - 1100px)/2 + 30px);right:calc((100% - 1100px)/2 + 30px);height:40px}
.wf-rail{position:absolute;left:0;right:0;top:8px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.wf-run{position:absolute;inset:0;background:linear-gradient(90deg,#ff3b30,#ff8a00,#ffd400,#1fa85a,#1e7fd8,#5b4bdb,#b44bdb);transform-origin:left;transform:scaleX(0)}
.svc-stage[data-on=flow] .wf-run{animation:wfRun 7s linear infinite}
@keyframes wfRun{0%,4%{transform:scaleX(0)}76%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.wf-st{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.wf-st b{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px rgba(10,10,10,1),0 0 18px var(--c);opacity:.35;transform:scale(.8)}
.wf-st em{font:600 11px/1 Archivo,system-ui,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap}
@media (max-width:1180px){.wf-post{right:4vw}.wf-pipe{left:6vw;right:6vw}}
@media (max-width:1000px){.wf-post{display:none}}
@keyframes wfSt0{0%,4%{opacity:.35;transform:scale(.8)}7%{opacity:1;transform:scale(1.25)}10%,94%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.8)}}
.svc-stage[data-on=flow] .wf-st:nth-of-type(2) b{animation:wfSt0 7s ease infinite}
@keyframes wfSt1{0%,16%{opacity:.35;transform:scale(.8)}19%{opacity:1;transform:scale(1.25)}22%,94%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.8)}}
.svc-stage[data-on=flow] .wf-st:nth-of-type(3) b{animation:wfSt1 7s ease infinite}
@keyframes wfSt2{0%,28%{opacity:.35;transform:scale(.8)}31%{opacity:1;transform:scale(1.25)}34%,94%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.8)}}
.svc-stage[data-on=flow] .wf-st:nth-of-type(4) b{animation:wfSt2 7s ease infinite}
@keyframes wfSt3{0%,40%{opacity:.35;transform:scale(.8)}43%{opacity:1;transform:scale(1.25)}46%,94%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.8)}}
.svc-stage[data-on=flow] .wf-st:nth-of-type(5) b{animation:wfSt3 7s ease infinite}
@keyframes wfSt4{0%,52%{opacity:.35;transform:scale(.8)}55%{opacity:1;transform:scale(1.25)}58%,94%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.8)}}
.svc-stage[data-on=flow] .wf-st:nth-of-type(6) b{animation:wfSt4 7s ease infinite}
@keyframes wfSt5{0%,64%{opacity:.35;transform:scale(.8)}67%{opacity:1;transform:scale(1.25)}70%,94%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.8)}}
.svc-stage[data-on=flow] .wf-st:nth-of-type(7) b{animation:wfSt5 7s ease infinite}
@keyframes wfSt6{0%,76%{opacity:.35;transform:scale(.8)}79%{opacity:1;transform:scale(1.25)}82%,94%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.8)}}
.svc-stage[data-on=flow] .wf-st:nth-of-type(8) b{animation:wfSt6 7s ease infinite}
@media (prefers-reduced-motion:reduce){.svc-stage [data-layer],.svc-stage .svc-flow *{animation:none!important}.wf-route,.wf-line{stroke-dashoffset:0}.wf-cap{width:var(--w)}.wf-pill,.wf-stops circle{opacity:1;transform:none}.wf-st b{opacity:1}.wf-run{transform:none}}
.svc-stage .service-card{transition:border-color .15s,transform .15s,opacity .5s ease}
.svc-stage.is-on .service-card:not(:hover):not(:focus-visible){opacity:.7}
/* offline / back-online notice */
.vy-net{position:fixed;left:50%;bottom:20px;z-index:200;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#0b0b0b;color:#fff;font:500 14px/1.3 Inter,system-ui,sans-serif;padding:11px 16px 11px 34px;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .3s,transform .3s;max-width:calc(100% - 32px)}
.vy-net::before{content:"";position:absolute;left:15px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#1fa85a}
.vy-net.is-on::before{background:#ff8a00}
.vy-net.show{opacity:1;transform:translate(-50%,0)}
.off-h{font-size:20px;margin:0 0 12px}.off-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px}
.off-list a{display:inline-block;padding:8px 14px;border:1px solid #e3e1db;border-radius:99px;text-decoration:none;color:inherit}
.off-list a:hover{border-color:#0b0b0b}

/* Digital Footprint: "Envision your website" promo */
.ev-promo{padding:clamp(40px,6vw,70px) 0}
.ev-promo-in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,60px);align-items:center;background:#0a0a0a;color:#fff;border-radius:22px;padding:clamp(26px,5vw,56px);position:relative;overflow:hidden}
.ev-promo-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--spectrum,linear-gradient(90deg,#7b3fbf,#3b3fb5,#1e7fd8,#1fa85a,#ffd400,#ff8a00,#e63b2e))}
.ev-promo h2{color:#fff;margin:6px 0 12px}.ev-promo .muted{color:rgba(255,255,255,.75);margin:0 0 22px}
.ev-promo-art{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ev-promo-art span{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(140deg,var(--a) 55%,var(--b) 55%);display:flex;align-items:flex-end;padding:10px;font:600 13px Inter,sans-serif;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .3s}
.ev-promo-in:hover .ev-promo-art span:nth-child(odd){transform:translateY(-4px)}.ev-promo-in:hover .ev-promo-art span:nth-child(even){transform:translateY(4px)}
@media (max-width:760px){.ev-promo-in{grid-template-columns:1fr}}
/* place search (OpenStreetMap via Photon) */
.vp{position:relative}
.vp-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;color:#0a0a0a;border:1.5px solid #0a0a0a;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.18);overflow:hidden;text-align:left}
.vp-list button{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;width:100%;padding:11px 14px;border:0;border-bottom:1px solid #f0eee8;background:#fff;font:inherit;font-size:15px;color:inherit;cursor:pointer;text-align:left}
.vp-list button:hover,.vp-list button[aria-selected=true]{background:#fff6c7}
.vp-list b{font-weight:600}.vp-list span{color:#666;font-size:13.5px}
.vp-msg{margin:0;padding:12px 14px;font-size:14px;color:#666}
.vp-attr{margin:0;padding:6px 14px;font-size:11px;color:#999;background:#faf9f6}.vp-attr a{color:#999}
/* GIS demo: try your own address */
.map-search{position:absolute;left:12px;right:12px;top:12px;z-index:5;max-width:420px}
.map-search input{width:100%;font:500 15px Inter,system-ui,sans-serif;padding:12px 14px 12px 38px;border:1.5px solid #0a0a0a;border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23111' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 13px center;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.map-search input:focus{outline:0;box-shadow:0 0 0 4px rgba(255,212,0,.5)}
.map-note a{color:inherit}
.map-info{margin:0 0 6px}.map-info b{color:#fff}
.map-reset{background:none;border:0;color:#ffd400;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
/* weather bar: type a city */
.wx-or{background:none;border:0;color:rgba(255,255,255,.7);font:500 14px Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:6px 4px;white-space:nowrap}
.wx-or:hover{color:#fff}
.wx-bar.is-done .wx-or{display:none}
.wx-pick{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.wx-find{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.wx-find-l{display:flex;align-items:center;gap:10px;flex:1;min-width:240px;font:500 14px Inter,system-ui,sans-serif;color:rgba(255,255,255,.8)}
.wx-find-l .vp{flex:1}
.wx-find input{width:100%;font:500 15px Inter,system-ui,sans-serif;padding:10px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,.3);background:#fff;color:#0a0a0a}
.wx-gps{font:600 14px Inter,system-ui,sans-serif;padding:10px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer}
@media (max-width:560px){.wx-find-l span{display:none}}
.wx-find .vp-list{position:static;margin-top:6px}
.wx-find{align-items:flex-start}.wx-find-l{align-items:flex-start}.wx-find-l > span{padding-top:11px}
/* guides: "my take" callout, wide tables, numbered steps */
.g-take{margin:28px 0;padding:18px 22px;border-radius:12px;background:var(--ink);color:#eee}
.g-take p{margin:0;line-height:1.65}.g-take p+p{margin-top:10px}
.g-take a{color:var(--accent)}
.g-take-h{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)!important;margin:0 0 6px!important}
.g-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 12px}
.g-scroll .g-table{margin:0;min-width:620px}
.g-table.g-wide td:last-child{white-space:normal;font-weight:400}
.g-table.g-wide td:first-child{font-weight:600}
.g-src{font-size:13px;color:var(--muted);margin-top:0}
.g-steps{padding-left:1.3em}.g-steps li{margin:0 0 10px;padding-left:4px}
.g-sec-h{font-size:22px;margin:8px 0 14px}
.g-grid+.g-sec-h{margin-top:44px}

/* intro: explain the name on the first screen */
.zm-on .zm-name{top:calc(50% + min(8vw,18vh) + 20px);text-transform:none;letter-spacing:0;color:#fff;font:500 clamp(15px,1.6vw,19px)/1.45 Inter,system-ui,sans-serif;max-width:640px;margin:0 auto;padding:0 20px}
.zm-on .zm-name{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(12px,1.3vw,16px);font-weight:600;max-width:900px}
.zm-name i{font-style:normal;color:var(--accent)}
@media (max-width:640px){.zm-on .zm-name{flex-direction:column;gap:4px}.zm-name i{display:none}}

/* inventory & CRM example screen */
.inv-demo{background:#141414;border:1px solid #2a2a2a;border-radius:16px;padding:18px;max-width:860px;margin:0 auto;font:500 15px Inter,system-ui,sans-serif;color:#eee}
.inv-bar{display:flex;align-items:center;gap:12px;padding:4px 6px 12px}.inv-bar span{color:#9a9a9a;font-size:14px}
.inv-pill{margin-left:auto;background:var(--accent);color:#0b0b0b!important;font-weight:700;border-radius:999px;padding:3px 10px}
.inv-t{width:100%;border-collapse:collapse}.inv-t th{text-align:left;color:#8a8a8a;font-weight:600;font-size:13px;padding:8px 6px;border-bottom:1px solid #2a2a2a}
.inv-t td{padding:11px 6px;border-bottom:1px solid #222}.inv-s{font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 9px}
.inv-s.ok{background:rgba(31,168,90,.18);color:#5fd38f}.inv-s.low{background:rgba(255,138,0,.18);color:#ffb35c}
.inv-sub{padding-top:18px}.inv-f{list-style:none;margin:0;padding:0}.inv-f li{display:flex;gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid #222;color:#cfcfcf}
.inv-f li span{margin-left:auto;font-size:13px;color:var(--accent);font-weight:600}
@media (max-width:560px){.inv-t th:nth-child(2),.inv-t td:nth-child(2){display:none}}
/* home quick links strip (replaced the weather bar) */
.ql-bar{background:var(--ink);color:#e9e9e9;border-top:1px solid var(--line)}
.ql-bar .wrap{display:flex;align-items:center;justify-content:center;gap:12px 18px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.ql-h{font:700 12px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ql-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;justify-content:center}
.ql-list a{display:inline-block;font:600 14px Inter,system-ui,sans-serif;color:#fff;text-decoration:none;padding:9px 16px;border:1.5px solid rgba(255,255,255,.28);border-radius:999px;transition:background-color .25s,border-color .25s,color .25s}
.ql-list a:hover,.ql-list a:focus-visible{background:var(--accent);border-color:var(--accent);color:#0b0b0b}
@media (max-width:640px){.ql-bar .wrap{justify-content:flex-start}.ql-list{justify-content:flex-start}.ql-list a{font-size:13px;padding:8px 13px}}