/* =====================================================================================================================
   AGENTS.PENDLEPERFORMANCE.COM - the one stylesheet. Reads tokens.css (copied unchanged from the main site's theme
   pendle-2026, Direction A "Cinematic": near-black, ONE cyan accent, Bebas headings, Inter body, Lato keys).
   Unlike the main site this is an ordinary scrolling site (a few long pages), phone first: 390 -> 700 -> 1100 -> 1440.
   Order: base -> type -> keys -> bar -> sections -> finder -> cards -> map -> agent page -> pack -> tiles -> foot.
   ===================================================================================================================== */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--page);color:var(--text);font:400 16px/1.55 var(--f-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,address{margin:0}
address{font-style:normal}
.as-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.as-skip{position:fixed;left:12px;top:-60px;z-index:99;padding:12px 18px;border-radius:999px;background:var(--cyan);color:var(--on-cyan);font:700 15px var(--f-ui);text-decoration:none}
.as-skip:focus{top:12px}
:root{--pad:20px;--wrap:1240px;--sec:64px;--bar:64px}
@media (min-width:375px){:root{--pad:24px}}
@media (min-width:700px){:root{--pad:40px;--sec:88px;--bar:72px}}
@media (min-width:1200px){:root{--pad:56px;--sec:112px;--bar:80px}}
.as-wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}

/* ---------- type (the main site's roles) ---------- */
.as-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font:700 12px/16px var(--f-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--kick)}
.as-eyebrow::before{content:"";flex:0 0 auto;width:22px;height:2px;border-radius:2px;background:var(--cyan);box-shadow:0 0 12px rgba(var(--cyan-rgb),.9)}
@media (min-width:700px){.as-eyebrow{letter-spacing:.2em}.as-eyebrow::before{width:32px}}
@media (min-width:1200px){.as-eyebrow{font-size:13px;letter-spacing:.22em}.as-eyebrow::before{width:44px}}
.as-h1,.as-h2,.as-h3{font-family:var(--f-display);font-weight:400;letter-spacing:.012em;color:#fff;text-wrap:balance}
.as-h1{margin-top:14px;font-size:52px;line-height:50px;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.as-h2{margin-top:12px;font-size:40px;line-height:40px}
.as-h3{font-size:30px;line-height:32px}
.as-h1 em,.as-h2 em{font-style:normal;background:linear-gradient(180deg,#8fe2ff 0%,#2fbef4 46%,#22aee6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.as-h1 em{display:block}
@media (min-width:700px){.as-h1{font-size:80px;line-height:76px}.as-h2{font-size:56px;line-height:54px}.as-h3{font-size:36px;line-height:38px}}
@media (min-width:1200px){.as-h1{font-size:96px;line-height:90px}.as-h2{font-size:64px;line-height:62px}}
.as-h1--agent{font-size:44px;line-height:44px;overflow-wrap:anywhere}
@media (min-width:700px){.as-h1--agent{font-size:68px;line-height:66px}}
@media (min-width:1200px){.as-h1--agent{font-size:84px;line-height:80px}}
.as-lede{margin-top:14px;max-width:36em;font-size:16px;line-height:25px;color:var(--body);text-wrap:pretty}
@media (min-width:700px){.as-lede{font-size:18px;line-height:28px}}
.as-text{margin-top:14px;max-width:38em;font-size:16px;line-height:26px;color:var(--body);text-wrap:pretty}
.as-text--sm{font-size:14px;line-height:22px;color:var(--muted)}
@media (min-width:1200px){.as-text{font-size:17px;line-height:28px}}
.as-num{display:inline-grid;place-items:center;min-width:30px;height:22px;margin-right:2px;padding:0 6px;border-radius:999px;background:rgba(var(--cyan-rgb),.16);color:#bfeeff;letter-spacing:.06em}

/* ---------- keys (the main site's key, as cx-key) ---------- */
.as-key{--bf:rgba(16,22,30,.62);--bm:0;--bb:.10;--bh:#2d6db5;--rim:rgba(160,190,220,.46);--rim-h:#9fd0f2;--ring:transparent;--hi:rgba(255,255,255,.12);
  --lo:transparent;--lip:#06080c;--drop:rgba(0,0,0,.45);--gl:rgba(62,149,248,.5);--bloom:0 0 0 transparent;--fg:#fff;--emb:rgba(0,0,0,.45);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;margin:0;border:0;
  border-radius:999px;font:700 16px/1.2 var(--f-ui);color:var(--fg);text-decoration:none;text-align:center;text-wrap:balance;
  text-shadow:0 1px 0 var(--emb);cursor:pointer;-webkit-tap-highlight-color:transparent;
  background-color:var(--bf);background-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,var(--bm)) 52%,rgba(0,0,0,var(--bb)) 100%);
  box-shadow:inset 0 0 0 1px var(--rim),inset 0 0 0 2px var(--ring),inset 0 2px 0 var(--hi),inset 0 -3px 0 var(--lo),0 4px 0 var(--lip),0 7px 14px var(--drop),var(--bloom);
  transition:transform var(--t-press) ease,box-shadow .12s ease,background-color var(--t-colour) ease}
.as-key svg{width:20px;height:20px;stroke-width:2.2}
.as-key:focus-visible{background-color:var(--bh);box-shadow:inset 0 0 0 1px var(--rim-h),inset 0 0 0 2px var(--ring),inset 0 2px 0 var(--hi),0 4px 0 var(--lip),0 7px 14px var(--drop),0 0 20px var(--gl)}
@media (hover:hover) and (pointer:fine){.as-key:hover{transform:translateY(-1px);background-color:var(--bh);
  box-shadow:inset 0 0 0 1px var(--rim-h),inset 0 0 0 2px var(--ring),inset 0 2px 0 var(--hi),inset 0 -3px 0 var(--lo),0 5px 0 var(--lip),0 10px 18px var(--drop),0 0 22px var(--gl)}}
.as-key:active{transform:translateY(3px);box-shadow:inset 0 0 0 1px var(--rim),inset 0 2px 4px rgba(0,0,0,.35),0 1px 0 var(--lip),0 2px 3px rgba(0,0,0,.4)}
.as-key:disabled{cursor:default;transform:none;opacity:.7}
.as-key--cyan{--bf:#00aeef;--bm:.08;--bb:.18;--bh:#5fd3ff;--rim:#9be4ff;--rim-h:#e2f8ff;--ring:rgba(190,240,255,.5);--hi:rgba(255,255,255,.55);
  --lo:rgba(0,40,60,.22);--lip:#00435f;--drop:rgba(0,60,95,.55);--gl:rgba(var(--cyan-rgb),.65);--bloom:0 10px 32px rgba(var(--cyan-rgb),.30);--fg:var(--on-cyan);--emb:rgba(255,255,255,.35)}
.as-key--sm{min-height:44px;padding:10px 18px;font-size:15px}
.as-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;font:700 15px/1.2 var(--f-ui);color:#d8ecff;text-decoration:none;
  background:linear-gradient(90deg,rgba(var(--cyan-rgb),.8),rgba(var(--cyan-rgb),.8)) 0 calc(100% - 9px)/100% 1px no-repeat}
.as-link svg{width:18px;height:18px;color:var(--cyan);transition:transform .2s ease}
@media (hover:hover){.as-link:hover{color:#fff}.as-link:hover svg{transform:translateX(3px)}}
.as-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
@media (max-width:699px){.as-acts>.as-key{flex:1 1 100%}}

/* ---------- top bar ---------- */
.as-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:var(--bar);padding:0 var(--pad);padding-top:env(safe-area-inset-top,0px);
  background:rgba(8,11,15,.84);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.as-bar__home{display:flex;align-items:center;gap:12px;min-height:44px;margin-right:auto;min-width:0;text-decoration:none}
.as-bar__home img{width:140px;height:auto}
.as-bar__tag{padding-left:12px;border-left:1px solid rgba(255,255,255,.18);font:700 11px/14px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--kick);white-space:nowrap}
@media (max-width:519px){.as-bar__tag{display:none}}
@media (max-width:374px){.as-bar__home img{width:118px}}
@media (min-width:1200px){.as-bar__home img{width:190px}.as-bar__tag{font-size:12px}}
.as-bar__join{flex:0 0 auto}

/* ---------- sections ---------- */
.as-sec{position:relative;padding:var(--sec) 0}
.as-sec+.as-sec{border-top:1px solid rgba(255,255,255,.05)}
.as-split{display:grid;gap:36px;align-items:center}
@media (min-width:1000px){.as-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}
  .as-split--flip>:first-child{order:2}}
.as-ticks{display:grid;gap:16px;margin:24px 0 28px}
.as-ticks li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;font-size:16px;line-height:25px;color:var(--body)}
.as-ticks b{color:#fff;font-weight:600}
.as-ticks svg{width:44px;height:44px;padding:11px;border-radius:12px;color:var(--ice);background:rgba(var(--cyan-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.28)}
.as-panel{padding:26px 24px;border-radius:var(--radius);background:var(--card-face);box-shadow:var(--card-shadow),inset 0 3px 0 rgba(var(--cyan-rgb),.55)}
.as-panel__t{font:400 26px/28px var(--f-display);letter-spacing:.02em;color:#fff}
.as-big{margin-top:10px;font-size:18px;color:var(--body)}
.as-big b{font:400 64px/1 var(--f-display);color:var(--cyan);margin-right:8px;vertical-align:-6px}

/* ---------- hero + the finder ---------- */
.as-hero{position:relative;overflow:hidden;isolation:isolate;padding:44px 0 56px}
@media (min-width:700px){.as-hero{padding:80px 0 88px}}
@media (min-width:1200px){.as-hero{padding:112px 0 120px}}
.as-hero--page{padding-bottom:48px}
.as-hero__glow{position:absolute;z-index:-1;inset:-20% -10% auto auto;width:90%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--cyan-rgb),.20),rgba(var(--cyan-rgb),0) 70%)}
.as-hero__globe{position:absolute;z-index:-1;-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent 100%);mask-image:radial-gradient(closest-side,#000 82%,transparent 100%);right:-34%;top:-6%;width:min(118vw,620px);opacity:.36;pointer-events:none}
@media (min-width:700px){.as-hero__globe{right:-12%;top:-10%;width:640px;opacity:.5}}
@media (min-width:1200px){.as-hero__globe{right:4%;top:50%;width:720px;transform:translateY(-50%);opacity:.75}}
.as-hero__in{position:relative}
.as-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-6px 0 14px;font:700 14px/1 var(--f-ui);color:#cfe6ff;text-decoration:none}
.as-back svg{width:18px;height:18px;color:var(--cyan)}
.as-find{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;max-width:640px;margin-top:28px}
.as-find__field{position:relative;display:flex;align-items:center}
.as-find__field svg{position:absolute;left:16px;color:var(--cyan);pointer-events:none}
.as-find input{width:100%;height:52px;padding:0 16px 0 46px;border:0;border-radius:999px;background:rgba(10,14,20,.85);color:#fff;
  font:700 18px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(160,190,220,.46),inset 0 2px 6px rgba(0,0,0,.5)}
.as-find input::placeholder{color:#8496aa;letter-spacing:.02em;text-transform:none;font-weight:400}
.as-find input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cyan),0 0 0 4px rgba(var(--cyan-rgb),.18)}
.as-find__go{min-height:52px}
.as-find__loc{grid-column:1 / -1}
.as-find__msg{grid-column:1 / -1;min-height:22px;font-size:14px;line-height:22px;color:var(--body)}
.as-find__msg:empty{min-height:0;margin-top:-12px}
@media (min-width:700px){.as-find{grid-template-columns:minmax(0,1fr) auto auto}.as-find__loc{grid-column:auto}}
.as-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px;margin-top:32px}
.as-facts li{padding:14px 12px;border-radius:14px;background:rgba(16,22,30,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.as-facts b{display:block;font:400 34px/1 var(--f-display);color:#fff}
.as-facts span{display:block;margin-top:6px;font:700 11px/14px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (min-width:700px){.as-facts b{font-size:44px}.as-facts span{font-size:12px}}

/* ---------- the list of agents ---------- */
.as-results{padding-top:48px}
.as-results__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 24px;margin-bottom:28px}
.as-results__head .as-h2{margin:0}
.as-tabs{display:inline-flex;padding:4px;border-radius:999px;background:rgba(16,22,30,.8);box-shadow:inset 0 0 0 1px rgba(160,190,220,.3)}
.as-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:none;cursor:pointer;font:700 15px/1 var(--f-ui);color:#cfe0f2}
.as-tabs button[aria-selected="true"]{background:var(--cyan);color:var(--on-cyan)}
.as-tabs svg{width:18px;height:18px}
.as-cards{display:grid;gap:18px}
@media (min-width:700px){.as-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media (min-width:1100px){.as-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}}
.as-card__a{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--radius);text-decoration:none;
  background:var(--card-face);box-shadow:var(--card-shadow);transition:box-shadow .2s ease,transform .2s ease}
@media (hover:hover) and (pointer:fine){.as-card__a:hover{transform:translateY(-2px);box-shadow:var(--card-shadow),0 0 0 1px rgba(var(--cyan-rgb),.55),0 0 34px -8px rgba(var(--cyan-rgb),.55)}
  .as-card__a:hover .as-card__go svg{transform:translateX(3px)}}
.as-card__pic{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0b1016}
.as-card__pic img{width:100%;height:100%;object-fit:cover}
.as-card__pic::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(0deg,rgba(14,19,26,.92),rgba(14,19,26,0))}
.as-card__nopic{position:absolute;inset:0;background:radial-gradient(80% 90% at 70% 20%,rgba(var(--cyan-rgb),.22),rgba(var(--cyan-rgb),0) 70%),#0b1016}
.as-card__dist{position:absolute;z-index:1;top:12px;right:12px;padding:7px 12px;border-radius:999px;background:var(--cyan);color:var(--on-cyan);font:700 13px/1 var(--f-ui);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.as-card__body{position:relative;display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:0 20px 20px}
.as-card__logo,.as-ahero__logo,.as-mini__logo{display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.06)}
.as-logo-dark{background:#0d1219;box-shadow:0 8px 22px rgba(0,0,0,.55),inset 0 0 0 1px rgba(160,190,220,.28)}
.as-card__logo{width:116px;height:64px;margin-top:-40px;margin-bottom:14px;padding:8px 10px;border-radius:12px}
.as-card__logo img,.as-ahero__logo img,.as-mini__logo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.as-card__logo--word,.as-ahero__logo--word,.as-mini__logo--word{color:#0b1016;font:400 18px/1 var(--f-display);text-align:center;overflow:hidden}
.as-card__name{font:400 30px/31px var(--f-display);letter-spacing:.015em;color:#fff;text-wrap:balance}
.as-card__where,.as-card__since{display:flex;align-items:center;gap:7px;margin-top:8px;font:700 13px/18px var(--f-ui);color:#cfe0f2}
.as-card__where svg,.as-card__since svg{width:16px;height:16px;color:var(--cyan)}
.as-card__tag{margin-top:10px;font-size:15px;line-height:22px;color:var(--body)}
.as-card__since{margin-top:auto;padding-top:14px;color:var(--kick);letter-spacing:.04em;text-transform:uppercase;font-size:12px}
.as-card__go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:700 15px/1 var(--f-ui);color:#fff}
.as-card__go svg{width:18px;height:18px;color:var(--cyan);transition:transform .2s ease}

/* ---------- the map ---------- */
.as-mapbox[hidden]{display:none}
.as-map,.as-amap{height:min(70vh,640px);min-height:360px;border-radius:var(--radius);overflow:hidden;background:#0b1016;box-shadow:var(--card-shadow)}
.as-amap{height:360px;min-height:0}
@media (min-width:1000px){.as-amap{height:440px}}
.leaflet-container{font:400 14px/1.4 var(--f-text);background:#0b1016}
.leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.85) contrast(.92) saturate(.6)}
.as-pin{display:block;width:22px;height:22px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(var(--cyan-rgb),.3),0 0 18px rgba(var(--cyan-rgb),.8);border:2px solid #fff}
.as-pin--me{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.3)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#121922;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.leaflet-popup-content{margin:14px 16px;font:700 15px/1.3 var(--f-ui)}
.leaflet-popup-content a{color:var(--ice)}
.leaflet-popup-content small{display:block;margin-top:4px;font:400 13px/1.3 var(--f-text);color:var(--muted)}
.leaflet-container a.leaflet-popup-close-button{color:#fff;width:32px;height:32px;font-size:22px;line-height:32px}

/* ---------- the example pack (two sheets fanned) ---------- */
.as-fan{position:relative;display:block;width:min(100%,520px);aspect-ratio:1/1;margin:0 auto}
.as-fan img{position:absolute;width:58%;height:auto;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.as-fan__b{right:4%;top:2%;transform:rotate(6deg)}
.as-fan__a{left:4%;top:10%;transform:rotate(-5deg)}
.as-fan__tag,.as-sheet__tag{position:absolute;padding:6px 12px;border-radius:999px;background:rgba(5,7,10,.85);box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.6);font:700 12px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}
.as-fan__tag{left:50%;bottom:0;transform:translateX(-50%)}
.as-sheet{position:relative;display:grid;gap:16px;justify-items:center}
.as-sheet img{width:min(100%,460px);height:auto;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.as-sheet--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.as-sheet__tag{top:12px;left:12px}
.as-inv{max-width:820px}
.as-inv .as-key{margin-top:28px}
.as-join{background:radial-gradient(70% 120% at 85% 0%,rgba(var(--cyan-rgb),.14),rgba(var(--cyan-rgb),0) 70%)}
.as-join .as-key{margin-top:26px}

/* ---------- one agent ---------- */
.as-ahero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(86svh,780px);padding:120px 0 40px;overflow:hidden}
.as-ahero--nopic{min-height:0;padding-top:48px;background:radial-gradient(70% 90% at 80% 10%,rgba(var(--cyan-rgb),.18),rgba(var(--cyan-rgb),0) 70%)}
.as-ahero__pic{position:absolute;z-index:-2;inset:0}
.as-ahero__pic img{width:100%;height:100%;object-fit:cover}
.as-ahero__scrim{position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,rgba(5,7,10,.97) 0%,rgba(5,7,10,.86) 38%,rgba(5,7,10,.25) 72%,rgba(5,7,10,.45) 100%)}
/* phone + tablet: the photo is a picture of its own on top (16:10), the words start on its lower edge - never all under a scrim */
@media (max-width:999px){
  .as-ahero{display:block;min-height:0;padding:0 0 40px}
  .as-ahero__pic{position:relative;z-index:-2;aspect-ratio:16/10}
  .as-ahero__scrim{inset:0 0 auto;height:calc(62.5vw + 2px);background:linear-gradient(0deg,rgba(5,7,10,1) 0%,rgba(5,7,10,.55) 28%,rgba(5,7,10,0) 60%)}
  .as-ahero__in{margin-top:-64px}
  .as-ahero--nopic{padding-top:40px}.as-ahero--nopic .as-ahero__in{margin-top:0}
}
@media (min-width:1000px){.as-ahero{padding-bottom:64px}.as-ahero__scrim{background:linear-gradient(90deg,rgba(5,7,10,.95) 0%,rgba(5,7,10,.78) 40%,rgba(5,7,10,.15) 75%),linear-gradient(0deg,rgba(5,7,10,.8),rgba(5,7,10,0) 40%)}}
.as-ahero__logo{width:150px;height:84px;margin-bottom:22px;padding:10px 14px;border-radius:14px}
@media (min-width:700px){.as-ahero__logo{width:190px;height:104px}}
.as-ahero__where{display:flex;align-items:center;gap:8px;margin-top:12px;font:700 16px/22px var(--f-ui);color:#e4f0fb}
.as-ahero__where svg{color:var(--cyan)}
.as-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.as-chips li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(5,7,10,.7);
  box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.5);font:700 13px/1 var(--f-ui);letter-spacing:.04em;color:#e9f7ff}
.as-chips svg{width:16px;height:16px;color:var(--cyan)}
.as-ahero .as-acts{max-width:760px}
.as-do{display:grid;gap:10px;margin-top:16px}
.as-do li{display:flex;align-items:center;gap:12px;font:700 15px/22px var(--f-ui);color:#e8f1fa}
.as-do svg{width:22px;height:22px;padding:3px;border-radius:50%;background:rgba(53,192,122,.16);color:var(--ok)}
.as-panel__pendle{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font:700 14px/20px var(--f-ui);color:var(--kick)}
.as-panel__pendle svg{color:var(--cyan)}
@media (min-width:1000px){.as-split--about{align-items:start}.as-split--about .as-panel{margin-top:48px}}
.as-strip{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.as-strip::-webkit-scrollbar{display:none}
.as-strip li{scroll-snap-align:start;overflow:hidden;border-radius:14px;aspect-ratio:4/3;background:#0b1016;box-shadow:var(--card-shadow)}
.as-strip img{width:100%;height:100%;object-fit:cover}
@media (min-width:700px){.as-strip{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}}
@media (min-width:1100px){.as-strip--3{grid-template-columns:repeat(3,minmax(0,1fr))}.as-strip--1{grid-template-columns:minmax(0,1fr)}.as-strip--1 li{aspect-ratio:21/9}}
@media (min-width:700px){.as-strip--1{grid-template-columns:minmax(0,1fr)}.as-strip--1 li{aspect-ratio:16/7}}
.as-pics{padding-top:0}
.as-pics.as-sec+.as-sec,.as-sec+.as-pics{border-top:0}
.as-embed{margin-top:28px;overflow:hidden;border-radius:var(--radius);background:#fff;box-shadow:var(--card-shadow)}
.as-embed iframe{display:block;width:100%!important;min-height:760px;border:0}
.as-addr{margin-top:16px;font-size:17px;line-height:26px;color:#e8f1fa}
.as-contact{display:grid;gap:4px;margin:16px 0 22px}
@media (max-width:699px){.as-where .as-split__text>.as-key{display:flex;width:100%}}
.as-contact a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:700 16px/1.2 var(--f-ui);color:#e8f1fa;text-decoration:none;overflow-wrap:anywhere}
.as-contact svg{width:20px;height:20px;color:var(--cyan)}
@media (hover:hover){.as-contact a:hover{color:var(--ice)}}
.as-mini{display:grid;gap:12px;margin:22px 0 8px}
@media (min-width:900px){.as-mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.as-mini a{display:flex;align-items:center;gap:14px;min-height:84px;padding:12px 16px 12px 12px;border-radius:16px;text-decoration:none;background:var(--card-face);box-shadow:var(--card-shadow)}
.as-mini a>svg{margin-left:auto;color:var(--cyan)}
.as-mini__logo{flex:0 0 auto;width:84px;height:56px;padding:6px 8px;border-radius:10px}
.as-mini__logo--word{font-size:13px}
.as-mini__t{display:grid;gap:4px;min-width:0}
.as-mini__t b{font:400 22px/24px var(--f-display);color:#fff;letter-spacing:.02em}
.as-mini__t small{font:700 13px/18px var(--f-ui);color:var(--muted)}

/* ---------- Get listed tiles ---------- */
.as-grid{display:grid;gap:16px;margin-top:32px}
@media (min-width:700px){.as-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1100px){.as-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.as-tile{padding:24px 22px;border-radius:var(--radius);background:var(--card-face);box-shadow:var(--card-shadow),inset 0 3px 0 rgba(var(--cyan-rgb),.5)}
.as-tile svg{width:46px;height:46px;padding:11px;border-radius:12px;color:var(--ice);background:rgba(var(--cyan-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.28)}
.as-tile h3{margin-top:16px;font:400 28px/30px var(--f-display);letter-spacing:.02em;color:#fff}
.as-tile p{margin-top:8px;font-size:15px;line-height:23px;color:var(--body)}

/* ---------- foot ---------- */
.as-foot{padding:48px 0 calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.07);background:#030406}
.as-foot__in{display:grid;gap:18px}
.as-foot__brand{display:inline-flex;align-items:center;min-height:44px;justify-self:start}
.as-foot__brand img{width:170px;height:auto}
.as-foot__line{max-width:40em;font-size:15px;line-height:23px;color:var(--body)}
.as-foot__nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.as-foot__nav a{display:inline-flex;align-items:center;min-height:44px;font:700 15px/1 var(--f-ui);color:#d8ecff;text-decoration:none}
@media (hover:hover){.as-foot__nav a:hover{color:var(--ice)}}
.as-foot__legal{font-size:13px;line-height:20px;color:var(--muted)}
.as-foot__legal a{color:#c8d8ea}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* =====================================================================================================================
   11 OCT 2026 - THE NEXT LEVEL (Martin: "fine tuning and polishing... depth: the big faint words, layered cards, light and
   shadow"; two sides on every screen; a join path everywhere). Built on the approved design above - added, not redesigned.
   ===================================================================================================================== */
html{scroll-snap-type:y proximity}
.as-sec,.as-hero,.as-ahero{scroll-snap-align:start}
.as-sec{overflow:hidden;isolation:isolate}

/* depth: the main site's faint steel word behind a section (never read as text) */
.as-mark{position:absolute;z-index:-1;right:-.04em;top:.12em;pointer-events:none;user-select:none;white-space:nowrap;
  font:400 clamp(110px,24vw,340px)/.8 var(--f-display);letter-spacing:.01em;text-transform:uppercase;color:transparent;
  background:linear-gradient(180deg,rgba(214,226,240,.10) 0%,rgba(150,170,195,.04) 55%,rgba(150,170,195,0) 92%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(190,210,232,.08)}
.as-sec:nth-of-type(even) .as-mark{right:auto;left:-.04em}
.as-sec::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 10%,rgba(var(--cyan-rgb),.07),rgba(var(--cyan-rgb),0) 70%),radial-gradient(55% 45% at 5% 95%,rgba(49,122,190,.08),rgba(49,122,190,0) 70%)}

/* the top bar's three words (computer) */
.as-bar__nav{display:none}
@media (min-width:900px){.as-bar__nav{display:flex;gap:6px}
  .as-bar__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font:700 14px/1 var(--f-ui);letter-spacing:.04em;color:#cfe0f2;text-decoration:none;transition:color var(--t-colour) ease,background-color var(--t-colour) ease}
  .as-bar__nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
  .as-bar__nav a[aria-current="page"]{color:var(--on-cyan);background:var(--cyan)}}

/* the join path: a floating key on a computer, a slim two-key bar on a phone */
.as-dock{position:fixed;z-index:45;right:20px;bottom:20px;display:flex;gap:10px}
.as-dock__find{display:none}
@media (max-width:699px){
  .as-dock{left:0;right:0;bottom:0;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(8,11,15,.9);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -10px 30px rgba(0,0,0,.5)}
  .as-dock .as-key{flex:1 1 0;min-height:46px;padding:10px 12px;font-size:15px}
  .as-dock__find{display:inline-flex}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
.as-dock__join{animation:as-glow 2.6s ease-in-out infinite}
@keyframes as-glow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 12px rgba(var(--cyan-rgb),.65))}}

/* the join line on every screen */
.as-joinline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:28px;padding:12px 16px;border-radius:14px;max-width:640px;
  background:linear-gradient(90deg,rgba(var(--cyan-rgb),.10),rgba(var(--cyan-rgb),.02));box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.25);font-size:14px;line-height:20px;color:var(--body)}
.as-joinline>svg{width:18px;height:18px;color:var(--cyan)}
.as-joinline span{flex:1 1 240px}
.as-joinline b{color:#fff}
.as-joinline a{display:inline-flex;align-items:center;min-height:44px;font:700 14px/1 var(--f-ui);color:var(--ice);text-decoration:none}
.as-joinline a:hover{color:#fff}

/* reveal: cards rise in once as they come on screen (site.js); still with reduce motion or no script */
.js .as-reveal{opacity:0;transform:translate3d(0,22px,0) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .as-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .as-reveal{opacity:1;transform:none;transition:none}.as-dock__join{animation:none}}

/* the hero globe film (computer, motion allowed) over its poster */
.as-hero__globe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.as-hero__globe video.is-playing{opacity:1}
.as-hero__globe picture,.as-hero__globe img{display:block;width:100%;height:auto}
.as-hero__globe{aspect-ratio:1/1}

/* hero with a photo (For garages) */
.as-hero--photo{min-height:min(92svh,860px);display:flex;align-items:flex-end}
.as-hero__photo,.as-hero__photo img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover}
.as-hero__shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,rgba(5,7,10,.97) 0%,rgba(5,7,10,.88) 45%,rgba(5,7,10,.45) 80%,rgba(5,7,10,.6) 100%)}
@media (min-width:1000px){.as-hero__shade{background:linear-gradient(90deg,rgba(5,7,10,.96) 0%,rgba(5,7,10,.82) 45%,rgba(5,7,10,.25) 80%),linear-gradient(0deg,rgba(5,7,10,.85),rgba(5,7,10,0) 40%)}}
.as-switch{display:flex;gap:12px;align-items:flex-start;max-width:600px;margin-top:20px;padding:14px 16px;border-radius:14px;background:rgba(5,7,10,.6);box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.4);font-size:15px;line-height:23px;color:var(--body)}
.as-switch svg{color:var(--cyan);margin-top:2px}
.as-switch b{color:#fff}

/* spotlight */
.as-split--spot{align-items:center}
.as-spot__media{position:relative;padding-bottom:28px}
.as-spot__pic{overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.as-spot__pic img{width:100%;height:100%;object-fit:cover}
.as-spot__logo{position:absolute;left:18px;bottom:0;width:150px;height:84px;padding:10px 14px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.6)}
.as-spot__logo img{max-width:100%;max-height:100%;width:auto;height:auto}
.as-spot__badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--cyan);color:var(--on-cyan);font:700 13px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 24px rgba(var(--cyan-rgb),.45)}
.as-spot__badge svg{width:16px;height:16px}
.as-spot__name{margin-top:14px;font:400 30px/32px var(--f-display);letter-spacing:.02em;color:#fff}
.as-spot__where{display:flex;align-items:center;gap:8px;margin-top:6px;font:700 15px/22px var(--f-ui);color:#e4f0fb}
.as-spot__where svg{color:var(--cyan)}
.as-chips--row{margin-top:18px}

/* the dyno, drawn (the main site's rollers - same parts) */
.gx-dn__bed{fill:rgba(14,21,30,.88);stroke:rgba(127,217,255,.28);stroke-width:1.5}
.gx-dn__r rect{stroke:#9fb6cc;stroke-width:1}
.gx-dn__ax{stroke:rgba(10,16,24,.6);stroke-width:2.2}
.gx-dn__sync{stroke:var(--cyan);stroke-width:2.5;stroke-dasharray:6 6;filter:drop-shadow(0 0 6px rgba(0,174,239,.8))}
.gx-dn__node{fill:var(--cyan);filter:drop-shadow(0 0 6px rgba(0,174,239,.9))}
@keyframes gx-dash{to{stroke-dashoffset:-24}}
@keyframes gx-roll{to{transform:translateY(12px)}}
.as-dyno{display:inline-flex;align-items:center;gap:10px;margin-top:12px}
.as-dyno__ill{flex:none;height:36px;width:auto;overflow:visible}
.as-dyno__t{display:flex;flex-direction:column;gap:2px;font:700 11px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#d9e6f3}
.as-dyno__t i{font-style:normal;color:var(--ice)}
@media (prefers-reduced-motion:no-preference){.as-dyno.is-on .gx-dn__ax{animation:gx-roll .8s linear infinite}.as-dyno.is-on .gx-dn__sync{animation:gx-dash 1.6s linear infinite}}
.as-ahero .as-dyno{margin-top:16px}
.as-ahero .as-dyno__ill{height:44px}

/* why: four steps */
.as-steps{display:grid;gap:16px;margin-top:32px}
@media (min-width:700px){.as-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1100px){.as-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.as-step{position:relative;padding:26px 22px 24px;border-radius:var(--radius);background:var(--card-face);box-shadow:var(--card-shadow),inset 0 3px 0 rgba(var(--cyan-rgb),.5);transition:transform .25s ease,box-shadow .25s ease}
.as-step__n{position:absolute;right:16px;top:8px;font:400 64px/1 var(--f-display);color:rgba(var(--cyan-rgb),.14)}
.as-step>svg,.as-tile>svg{width:46px;height:46px;padding:11px;border-radius:12px;color:var(--ice);background:rgba(var(--cyan-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.28)}
.as-step h3{margin-top:16px;font:400 28px/30px var(--f-display);letter-spacing:.02em;color:#fff}
.as-step p{margin-top:8px;font-size:15px;line-height:23px;color:var(--body)}
@media (hover:hover) and (pointer:fine){.as-step:hover,.as-tile:hover,.as-tier:hover{transform:translateY(-4px);box-shadow:var(--card-shadow),inset 0 3px 0 rgba(var(--cyan-rgb),.8),0 0 0 1px rgba(var(--cyan-rgb),.45),0 0 40px -10px rgba(var(--cyan-rgb),.6)}}
.as-tile,.as-tier{transition:transform .25s ease,box-shadow .25s ease}

/* the certificate, tilting to the pointer (site.js) */
.as-tilt{position:relative;display:block;width:min(100%,420px);margin:0 auto;perspective:1200px;text-decoration:none}
.as-tilt img{width:100%;height:auto;border-radius:6px;transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transition:transform .4s ease;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08),0 0 60px -20px rgba(var(--cyan-rgb),.5)}
.as-tilt .as-fan__tag{left:50%;bottom:-16px;transform:translateX(-50%)}

/* the pack: three layered documents */
.as-docs{display:grid;gap:18px;margin-top:32px}
@media (min-width:800px){.as-docs{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.as-docs>.as-doc>a{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--radius);text-decoration:none;background:var(--card-face);box-shadow:var(--card-shadow);transition:transform .25s ease,box-shadow .25s ease}
@media (hover:hover) and (pointer:fine){.as-docs>.as-doc>a:hover{transform:translateY(-4px);box-shadow:var(--card-shadow),0 0 0 1px rgba(var(--cyan-rgb),.45),0 0 40px -10px rgba(var(--cyan-rgb),.6)}}
.as-doc__img{display:block;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(80% 80% at 50% 30%,rgba(var(--cyan-rgb),.18),rgba(var(--cyan-rgb),0) 70%),#0b1016}
.as-doc__img img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.as-doc__t{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:18px 20px 20px;align-items:center}
.as-doc__t svg{grid-row:span 2;width:40px;height:40px;padding:9px;border-radius:10px;color:var(--ice);background:rgba(var(--cyan-rgb),.1)}
.as-doc__t b{font:400 24px/26px var(--f-display);letter-spacing:.02em;color:#fff}
.as-doc__t span{font-size:14px;line-height:21px;color:var(--body)}
.as-note{display:flex;gap:12px;align-items:center;margin-top:24px;font-size:15px;line-height:23px;color:var(--body)}
.as-note svg{color:var(--cyan)}

/* loyalty */
.as-mini--stack{grid-template-columns:minmax(0,1fr)!important;margin-bottom:18px}
.as-key--block{display:flex;width:100%}

/* grids */
@media (min-width:1100px){.as-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* the portal, tap through */
.as-split--portal{align-items:start}
.as-ptabs{display:grid;gap:8px;margin-top:24px}
.as-ptabs button{display:flex;gap:14px;align-items:flex-start;width:100%;min-height:56px;padding:12px 14px;border:0;border-radius:14px;text-align:left;cursor:pointer;
  background:rgba(16,22,30,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background-color .2s ease,box-shadow .2s ease}
.as-ptabs i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font:400 18px/1 var(--f-display);font-style:normal;color:#cfe0f2;background:rgba(255,255,255,.06)}
.as-ptabs b{display:block;font:700 15px/20px var(--f-ui);color:#fff}
.as-ptabs small{display:none;margin-top:4px;font-size:14px;line-height:20px;color:var(--body)}
.as-ptabs [aria-selected="true"]{background:linear-gradient(90deg,rgba(var(--cyan-rgb),.16),rgba(var(--cyan-rgb),.04));box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.5)}
.as-ptabs [aria-selected="true"] i{background:var(--cyan);color:var(--on-cyan)}
.as-ptabs [aria-selected="true"] small{display:block}
.as-screens{position:relative}
.as-screen{margin:0;border-radius:16px;overflow:hidden;background:#0b0d10;box-shadow:0 40px 80px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08),0 0 80px -30px rgba(var(--cyan-rgb),.55)}
.as-screen[hidden]{display:none}
.as-screen img{width:100%;height:auto}
.as-screen figcaption{padding:10px 14px;font:700 12px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:#0d1117}
@media (min-width:1000px){.as-screens{position:sticky;top:110px}}

/* marketing tiers */
.as-tiers{margin-top:40px}
.as-tiers .as-h3 span{display:block;margin-top:6px;font:700 13px/18px var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--kick)}
.as-tiers__row{display:grid;gap:16px;margin-top:20px}
@media (min-width:800px){.as-tiers__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.as-tier{display:flex;flex-direction:column;gap:8px;padding:24px 22px;border-radius:var(--radius);background:var(--card-face);box-shadow:var(--card-shadow)}
.as-tier b{font:400 32px/1 var(--f-display);letter-spacing:.04em;color:#fff}
.as-tier em{font:400 44px/1 var(--f-display);font-style:normal;color:var(--cyan)}
.as-tier em small{font:700 13px/1 var(--f-ui);color:var(--muted)}
.as-tier span{display:flex;gap:8px;font-size:15px;line-height:22px;color:var(--body)}
.as-tier span::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--ok)}
.as-tier--pop{box-shadow:var(--card-shadow),inset 0 0 0 1px rgba(var(--cyan-rgb),.55),0 0 50px -16px rgba(var(--cyan-rgb),.6)}

/* branding kit */
.as-kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.as-kit__i{position:relative;overflow:hidden;border-radius:14px;background:#e9edf2;box-shadow:0 20px 40px -18px rgba(0,0,0,.8)}
.as-kit__i--big{grid-column:1 / -1}
.as-kit__i img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.as-kit__i span{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(5,7,10,.85);font:700 12px/1 var(--f-ui);color:#fff}
.as-kit__i span svg{width:14px;height:14px;color:var(--cyan)}

/* a framed photo */
.as-photo{margin:0;overflow:hidden;border-radius:var(--radius);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.as-photo img{width:100%;height:auto}

/* the numbers */
.as-money__row{display:grid;gap:18px;margin-top:28px}
@media (min-width:900px){.as-money__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.as-prices{display:grid;gap:4px;margin:14px 0}
.as-prices li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);font:700 15px/22px var(--f-ui);color:#e8f1fa}
.as-prices small{font-weight:400;color:var(--muted)}
.as-prices b{font:400 28px/1 var(--f-display);color:#fff;white-space:nowrap}

/* the vehicle search (agent page) */
.as-vsf{display:grid;gap:12px}
.as-vsf label{display:grid;gap:6px}
.as-vsf label span{font:700 12px/16px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--kick)}
.as-vsf select{width:100%;min-height:50px;padding:0 44px 0 16px;border:0;border-radius:14px;appearance:none;-webkit-appearance:none;cursor:pointer;
  font:700 16px/1 var(--f-ui);color:#fff;background:rgba(10,14,20,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300aeef' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/20px;
  box-shadow:inset 0 0 0 1px rgba(160,190,220,.4)}
.as-vsf select:disabled{opacity:.45;cursor:default}
.as-vsf select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cyan)}
.as-vsf option{color:#000}
.as-vsr{margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.as-vsr[hidden]{display:none}
.as-vsr__t{font:400 24px/27px var(--f-display);letter-spacing:.02em;color:#fff}
.as-vsr__figs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:14px}
.as-vsr__figs>svg{color:var(--cyan)}
.as-vsr__figs>div{padding:14px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.as-vsr__figs>div.is-tuned{background:linear-gradient(180deg,rgba(var(--cyan-rgb),.18),rgba(var(--cyan-rgb),.06));box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.5),0 0 30px -10px rgba(var(--cyan-rgb),.6)}
.as-vsr__figs small{display:block;font:700 11px/14px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.as-vsr__figs p{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.as-vsr__figs b{font:400 34px/1 var(--f-display);color:#fff}
.as-vsr__figs .is-tuned b{color:var(--cyan)}
.as-vsr__figs span{font:700 12px/1 var(--f-ui);color:var(--muted)}
.as-vsr__note{margin-top:12px;font-size:13px;line-height:19px;color:var(--muted)}
.as-split--vs{align-items:start}

/* a portal screen as a pack sheet */
.as-sheet--screen img{width:min(100%,560px);border-radius:12px}

/* "coming soon" (DESIGN.md: a deliberate purple pill, nothing moves) + the agent job app phone (example data) */
.as-soon{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:#734ecc;color:#fff;font:700 12px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase}
.as-app .as-eyebrow::before{display:none}
.as-phone{position:relative;width:min(100%,320px);margin:0 auto;padding:14px;border-radius:44px;background:linear-gradient(160deg,#2a3340,#0b0f14);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.95),inset 0 0 0 2px rgba(255,255,255,.08),0 0 80px -30px rgba(115,78,204,.7)}
.as-phone__in{display:flex;flex-direction:column;gap:14px;min-height:480px;padding:26px 18px 20px;border-radius:32px;background:linear-gradient(180deg,#141b25,#0a0e14)}
.as-phone__top{display:grid;gap:8px;font:700 13px/18px var(--f-ui);color:#e8f1fa}
.as-plate{justify-self:start;padding:4px 10px;border-radius:5px;background:#f7d117;color:#111;font:400 22px/1 var(--f-plate,"CX Bebas")}
.as-phone__shot{display:grid;place-items:center;gap:6px;height:150px;border-radius:18px;background:radial-gradient(70% 70% at 50% 40%,rgba(var(--cyan-rgb),.22),rgba(var(--cyan-rgb),0) 70%),#0d131b;
  box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.3);font:700 13px/1 var(--f-ui);color:var(--muted)}
.as-phone__shot svg{width:46px;height:46px;color:var(--ice)}
.as-phone__rows{display:grid;gap:10px}
.as-phone__rows li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);font:700 13px/18px var(--f-ui);color:#e8f1fa}
.as-phone__rows svg{width:22px;height:22px;padding:3px;border-radius:50%;background:rgba(53,192,122,.18);color:var(--ok)}
.as-phone__key{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:#3579c2;color:#fff;font:700 15px/1 var(--f-ui);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 4px 0 #1b3f6e}
.as-phone__soon{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap}

/* ---------- the agent job app (coming soon): one 16 s loop, example data ---------- */
.as-eyebrow--soon::before{display:none}
.as-phone__in{gap:10px;padding:30px 18px 22px}
.as-phone__lbl{font:700 11px/14px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
.as-phone__reg{min-height:34px}
.as-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:8ch;border-right:2px solid transparent}
.as-phone__veh{font:700 14px/20px var(--f-ui);color:#e8f1fa}
.as-phone__mi{font:400 28px/1 var(--f-display);color:#fff}
.as-phone__drop{position:relative;display:grid;place-items:center;height:110px;border-radius:16px;border:1.5px dashed rgba(var(--cyan-rgb),.45);background:#0d131b;font:700 13px/1 var(--f-ui);color:var(--muted)}
.as-phone__hint,.as-phone__pic{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px}
.as-phone__drop svg{width:34px;height:34px;color:var(--ice)}
.as-phone__pic{inset:8px;justify-content:center;border-radius:12px;background:radial-gradient(70% 80% at 50% 40%,rgba(var(--cyan-rgb),.35),rgba(var(--cyan-rgb),.05) 75%),#16202c;color:#e8f1fa}
.as-phone__key{margin-top:4px}
.as-phone__rows{gap:8px}
@media (prefers-reduced-motion:no-preference){
  .as-type{animation:ap-type 16s steps(8,end) infinite}
  .as-phone__veh{animation:ap-show 16s infinite;--a:16%}
  .as-phone__mi-l,.as-phone__mi{animation:ap-show2 16s infinite}
  .as-phone__hint{animation:ap-hide 16s infinite}
  .as-phone__pic{animation:ap-drop 16s infinite}
  .as-phone__key{animation:ap-press 16s infinite}
  .as-phone__rows li{animation:ap-tick1 16s infinite}
  .as-phone__rows li:nth-child(2){animation-name:ap-tick2}
  .as-phone__rows li:nth-child(3){animation-name:ap-tick3}
}
@keyframes ap-type{0%{width:0;border-color:var(--cyan)}3%{width:0}13%{width:8ch;border-color:var(--cyan)}15%,96%{width:8ch;border-color:transparent}100%{width:0}}
@keyframes ap-show{0%,15%{opacity:0;transform:translateY(6px)}19%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ap-show2{0%,22%{opacity:0;transform:translateY(6px)}26%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ap-hide{0%,32%{opacity:1}35%,96%{opacity:0}100%{opacity:1}}
@keyframes ap-drop{0%,32%{opacity:0;transform:translate(40px,-60px) scale(.6) rotate(-8deg)}38%{opacity:1;transform:none}94%{opacity:1}99%,100%{opacity:0}}
@keyframes ap-press{0%,44%{transform:none;filter:none}46%{transform:translateY(3px);filter:brightness(1.3)}49%,100%{transform:none;filter:none}}
@keyframes ap-tick1{0%,52%{opacity:0;transform:translateX(-10px)}55%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ap-tick2{0%,60%{opacity:0;transform:translateX(-10px)}63%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes ap-tick3{0%,68%{opacity:0;transform:translateX(-10px)}71%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
.as-phone__in{min-height:540px}

.as-split--an{align-items:center}

/* every make: a sideways rail of the main site's dyno-cell pictures (a finger or the trackpad moves it; it snaps) */
.as-makes__t{margin-top:44px}
.as-makes{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;margin-top:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:rgba(var(--cyan-rgb),.5) transparent}
@media (min-width:700px){.as-makes{grid-auto-columns:42%}}
@media (min-width:1100px){.as-makes{grid-auto-columns:28%}}
.as-makes li{position:relative;scroll-snap-align:start;overflow:hidden;border-radius:16px;aspect-ratio:16/9;box-shadow:var(--card-shadow)}
.as-makes img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
@media (hover:hover){.as-makes li:hover img{transform:scale(1.05)}}
.as-makes span{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(5,7,10,.82);font:700 13px/1 var(--f-ui);color:#fff}

/* a customer's own words - quiet, one line, never overbearing */
.as-said{position:relative;max-width:560px;margin:26px 0 0;padding:14px 18px 14px 22px;border-radius:4px 18px 18px 18px;background:rgba(255,255,255,.035);box-shadow:inset 3px 0 0 var(--cyan)}
.as-said blockquote{margin:0;font:italic 400 17px/26px var(--f-text);color:#e8f1fa}
.as-said figcaption{margin-top:6px;font:700 12px/16px var(--f-ui);letter-spacing:.06em;color:var(--muted)}

/* =====================================================================================================================
   11 OCT 2026 (pm) - HOME SCREEN BY SCREEN, the main site's way (Martin on his iPhone: "snappable page to page... the globe
   spinning... a dyno example... more depth and volume"). The deck is the page's scroller: mandatory snap + snap-stop, every
   screen exactly one screen tall; sideways decks = .cx-rail of .cx-panel (one card each). nav.js (copied unchanged from the
   main theme) keeps the index, dots and counts and puts Back where you were. Rules for .cx-* copied from components.css.
   ===================================================================================================================== */
body.as-deckpage{overflow:hidden;padding-bottom:0}
.as-deckpage .as-bar{position:fixed;left:0;right:0;top:0}
:root{--dockh:24px}
@media (max-width:699px){:root{--dockh:calc(70px + env(safe-area-inset-bottom,0px))}}
.as-deck{position:fixed;inset:0;height:100vh;height:100svh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;scroll-snap-type:y mandatory;scrollbar-width:none;outline:none}
.as-deck::-webkit-scrollbar{display:none}
.as-deck>.cx-sec{position:relative;height:100vh;height:100svh;overflow:hidden;overflow:clip;isolation:isolate;scroll-snap-align:start;scroll-snap-stop:always;background:var(--page)}
.as-deck>.cx-sec::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 88% 12%,rgba(var(--cyan-rgb),.10),rgba(var(--cyan-rgb),0) 70%),radial-gradient(60% 50% at 4% 96%,rgba(49,122,190,.14),rgba(49,122,190,0) 70%),
  url(../img/pendle-pattern-tile-300.webp) 0 0/300px 300px,linear-gradient(180deg,#0b1017 0%,#05070a 100%)}
.as-deck>.cx-sec:nth-child(even)::before{background:radial-gradient(70% 55% at 10% 10%,rgba(var(--cyan-rgb),.10),rgba(var(--cyan-rgb),0) 70%),radial-gradient(60% 50% at 96% 92%,rgba(49,122,190,.16),rgba(49,122,190,0) 70%),
  url(../img/pendle-pattern-tile-300.webp) 0 0/300px 300px,linear-gradient(180deg,#0a0e14 0%,#05070a 100%)}
.as-scr{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 16px) var(--pad) calc(var(--dockh) + 16px)}
.as-scr__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto}
.as-scr__head{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto 12px}
.as-scr .as-h2{margin-top:8px}
.as-scr .as-mark{top:auto;bottom:calc(var(--dockh) + 4px);right:-.04em;font-size:clamp(120px,30vw,360px)}
@media (max-height:760px) and (max-width:699px){
  .as-scr .as-h1{font-size:44px;line-height:43px}.as-scr .as-h2{font-size:34px;line-height:34px}
  .as-scr .as-lede{font-size:15px;line-height:22px;margin-top:8px}.as-scr .as-text{font-size:15px;line-height:22px;margin-top:8px}
  .as-scr .as-facts{margin-top:14px}.as-scr .as-find{margin-top:14px}.as-scr .as-joinline,.as-scr .as-said{margin-top:12px}
}

/* the sideways decks */
.as-scr--deck{justify-content:flex-start}
.as-scr--deck .cx-rail{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;margin:0 calc(-1 * var(--pad));overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;outline:none;touch-action:pan-x pan-y}
.as-scr--deck .cx-rail::-webkit-scrollbar{display:none}
.as-scr--deck .cx-panel{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;justify-content:center;padding:4px var(--pad) 8px;scroll-snap-align:start;scroll-snap-stop:always}
.cx-ctl{position:relative;z-index:6;display:flex;align-items:center;gap:12px;width:100%;max-width:var(--wrap);height:48px;margin:6px auto 0}
.cx-round{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent;background-color:rgba(18,26,36,.74);
  box-shadow:inset 0 0 0 1px rgba(127,217,255,.42),inset 0 2px 0 rgba(255,255,255,.16),0 3px 0 rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.5);transition:background-color var(--t-colour) ease,opacity .2s ease}
.cx-round:disabled{opacity:.32;cursor:default}
@media (hover:hover) and (pointer:fine){.cx-round:not(:disabled):hover{background-color:rgba(var(--cyan-rgb),.92);color:var(--on-cyan)}}
.cx-dots{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.cx-dots button{position:relative;width:20px;height:44px;padding:0;margin:0;border:0;background:none;cursor:pointer}
.cx-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:999px;background:rgba(214,226,240,.42);transition:transform .25s ease,background-color .25s ease}
.cx-dots button[aria-current="true"]::before{background:var(--cyan);transform:scaleX(3);box-shadow:0 0 10px rgba(var(--cyan-rgb),.8)}
.cx-dots li:has(~ li button[aria-current="true"]){transform:translateX(-8px)}
.cx-dots li:has(button[aria-current="true"]) ~ li{transform:translateX(8px)}
.cx-count{margin:0;font:400 22px/1 var(--f-display);letter-spacing:.06em;color:#fff;white-space:nowrap}
.cx-count span{color:var(--muted)}
.cx-ctl__hint{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:999px;margin:0 0 0 auto;background:rgba(12,17,24,.6);box-shadow:inset 0 0 0 1px rgba(127,217,255,.3);font:700 12px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:#cfe3ff;transition:opacity .4s ease}
.cx-ctl__hint svg{width:18px;height:18px;color:var(--cyan)}
.cx-ctl.is-used .cx-ctl__hint{opacity:0;pointer-events:none}
.cx-ctl .cx-prev{order:0}.cx-ctl .cx-dots{order:1}.cx-ctl .cx-count{order:2}.cx-ctl .cx-ctl__hint{order:3}.cx-ctl .cx-next{order:4}
@media (max-width:699px){.cx-ctl{gap:6px}.cx-ctl .cx-dots{margin:0 auto;max-width:56%;overflow:hidden}.cx-ctl .cx-count{order:3;font-size:20px}.cx-ctl__hint{display:none}.cx-ctl .cx-next{order:5;margin-left:6px}}
.cx-index{position:fixed;z-index:30;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.cx-index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cx-index a{position:relative;display:flex;align-items:center;justify-content:flex-end;height:20px;width:30px;text-decoration:none;color:transparent;pointer-events:auto}
.cx-index a::after{content:"";width:14px;height:2px;border-radius:2px;background:rgba(214,226,240,.38);transition:width .25s ease,background-color .25s ease}
.cx-index a[aria-current="true"]::after{width:28px;background:var(--cyan);box-shadow:0 0 10px rgba(var(--cyan-rgb),.8)}
.cx-index a span{position:absolute;right:38px;top:50%;transform:translate(6px,-50%);pointer-events:none;font:700 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s ease,transform .2s ease;color:#dfe6ee}
@media (hover:hover) and (pointer:fine){.cx-index:hover a span{opacity:1;transform:translate(0,-50%)}}
.cx-index__count{margin:0;font:400 18px/1 var(--f-display);letter-spacing:.08em;color:#fff}
.cx-index__count span{color:var(--muted)}
@media (max-width:1199px){.cx-index{right:1px;gap:0}.cx-index__count{display:none}.cx-index a{height:14px;width:10px}.cx-index a::after{width:6px}.cx-index a[aria-current="true"]::after{width:10px}.cx-index a span{display:none}}

/* an agent, one card a panel - a dyno agent stands out: glow, the badge, its rollers drawn big and turning */
.as-ap__card{position:relative;display:flex;flex-direction:column;width:100%;max-width:1040px;height:100%;overflow:hidden;border-radius:22px;text-decoration:none;
  background:var(--card-face);box-shadow:var(--card-shadow),0 40px 80px -30px rgba(0,0,0,.9)}
.as-ap__pic{position:relative;display:block;flex:1 1 auto;min-height:120px;overflow:hidden;background:#0b1016}
.as-ap__pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.as-ap__pic::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(0deg,rgba(14,19,26,.96),rgba(14,19,26,0))}
.as-ap__logo{position:absolute;z-index:2;left:16px;bottom:12px;display:flex;align-items:center;justify-content:center;width:120px;height:62px;padding:8px 10px;border-radius:12px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.6)}
.as-ap__logo img{max-width:100%;max-height:100%;width:auto;height:auto}
.as-ap__logo.as-logo-dark{background:#0d1219;box-shadow:0 10px 24px rgba(0,0,0,.6),inset 0 0 0 1px rgba(160,190,220,.28)}
.as-ap__logo--word{color:#0b1016;font:400 16px/1 var(--f-display);text-align:center}
.as-ap__badge{position:absolute;z-index:2;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--cyan);color:var(--on-cyan);font:700 13px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 24px rgba(var(--cyan-rgb),.5)}
.as-ap__badge svg{width:16px;height:16px}
.as-ap__body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 18px 16px}
.as-ap__name{font:400 30px/31px var(--f-display);letter-spacing:.015em;color:#fff;text-wrap:balance}
.as-ap__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:8px}
.as-ap__foot .as-card__since{margin:0;padding:0}
.as-ap__foot .as-card__go{margin:0}
.as-ap--dyno .as-ap__card{box-shadow:var(--card-shadow),0 0 0 1.5px rgba(var(--cyan-rgb),.65),0 0 60px -14px rgba(var(--cyan-rgb),.7),0 40px 80px -30px rgba(0,0,0,.9)}
.as-ap--dyno .as-dyno{margin-top:6px;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(var(--cyan-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.3)}
.as-ap--dyno .as-dyno__ill{height:52px}
.as-ap--dyno .as-dyno__t{font-size:12px}
@media (min-width:1000px){
  .as-ap__card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .as-ap__pic{height:100%}
  .as-ap__pic::after{inset:0 0 0 auto;width:30%;height:auto;background:linear-gradient(270deg,rgba(14,19,26,.96),rgba(14,19,26,0))}
  .as-ap__body{justify-content:center;gap:10px;padding:32px 36px}
  .as-ap__name{font-size:46px;line-height:46px}
  .as-ap--dyno .as-dyno__ill{height:72px}
}
.as-pin--dyno{background:#fff;box-shadow:0 0 0 4px rgba(var(--cyan-rgb),.7),0 0 22px rgba(var(--cyan-rgb),1)}

/* the hero: the globe, big, turning */
.as-scr--hero .as-hero__glow{z-index:0}
.as-globe{position:absolute;z-index:1;right:-30%;top:calc(var(--bar) - 10px);width:min(118vw,64svh);aspect-ratio:1;opacity:.7;cursor:grab;user-select:none;-webkit-user-select:none}
.as-globe__halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(var(--cyan-rgb),.24) 0%,rgba(var(--cyan-rgb),.06) 45%,rgba(var(--cyan-rgb),0) 70%)}
.as-globe__poster,.as-globe__poster img,.as-globe__v,.as-globe__anim{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.as-globe__poster img,.as-globe__v,.as-globe__anim{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 69%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 69%)}
.as-globe__v{opacity:0;transition:opacity .8s ease}
.as-globe__v.is-playing{opacity:1}
@media (min-width:1000px){.as-globe{right:3%;top:50%;transform:translateY(-50%);width:min(52vw,82vh);opacity:1}.as-scr--hero .as-scr__in>*{max-width:620px}}
@media (prefers-reduced-motion:reduce){.as-globe__v{display:none}}
.as-scr--hero .as-scr__in{z-index:3}

/* the map screen */
.as-scr--map{justify-content:flex-start}
.as-scr--map .as-map{position:relative;z-index:2;flex:1 1 auto;min-height:0;height:auto;width:100%;max-width:var(--wrap);margin:0 auto}
.as-scr--map .as-joinline{margin:12px auto 0;width:100%}

/* the newest agent: their photo behind */
.as-scr__bg,.as-scr__bg img{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}
.as-scr__shade{position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,rgba(5,7,10,.97) 0%,rgba(5,7,10,.86) 55%,rgba(5,7,10,.45) 85%,rgba(5,7,10,.7) 100%)}
@media (min-width:1000px){.as-scr__shade{background:linear-gradient(90deg,rgba(5,7,10,.96) 0%,rgba(5,7,10,.84) 42%,rgba(5,7,10,.2) 80%)}.as-scr--spot .as-scr__in>*{max-width:640px}}
.as-scr--spot{justify-content:flex-end}
.as-scr--spot .as-spot__badge{position:static;margin-bottom:12px}
.as-scr--spot .as-spot__logo{position:static;width:150px;height:70px;margin-bottom:12px}
.as-spot__name span{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font:700 14px/1 var(--f-ui);color:#e4f0fb;letter-spacing:0}
.as-spot__name span svg{width:16px;height:16px;color:var(--cyan)}

/* why: four compact steps */
.as-steps--tight{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.as-steps--tight .as-step{padding:16px 14px}
.as-steps--tight .as-step h3{margin-top:10px;font-size:22px;line-height:24px}
.as-steps--tight .as-step>svg{width:40px;height:40px;padding:9px}
.as-steps--tight .as-step__n{font-size:44px}
@media (min-width:1100px){.as-steps--tight{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.as-steps--tight .as-step{padding:24px 20px}}

/* every make: one big picture a panel */
.as-mk{margin:0}
.as-mk img{width:100%;height:100%;max-width:1200px;object-fit:cover;border-radius:20px;box-shadow:var(--card-shadow),0 40px 80px -30px rgba(0,0,0,.9)}
.as-mk figcaption{position:absolute;left:calc(var(--pad) + 14px);bottom:22px;padding:8px 14px;border-radius:999px;background:rgba(5,7,10,.85);font:700 14px/1 var(--f-ui);color:#fff}

/* the certificate screen */
.as-scr__split{display:grid;gap:18px;align-items:center}
.as-scr--cert .as-tilt{width:min(62vw,30svh,380px)}
@media (min-width:1000px){.as-scr__split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px}.as-scr--cert .as-tilt{width:min(100%,46svh,380px)}}

/* the pack deck */
.as-pk__card{display:flex;flex-direction:column;width:100%;max-width:880px;height:100%;overflow:hidden;border-radius:20px;text-decoration:none;background:var(--card-face);box-shadow:var(--card-shadow),0 40px 80px -30px rgba(0,0,0,.9)}
.as-pk__img{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:18px;background:radial-gradient(70% 70% at 50% 40%,rgba(var(--cyan-rgb),.2),rgba(var(--cyan-rgb),0) 70%),#0b1016}
.as-pk__img img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.7)}
.as-pk__t{display:grid;gap:4px;padding:16px 20px 18px}
.as-pk__t b{font:400 28px/30px var(--f-display);color:#fff;letter-spacing:.02em}
.as-pk__t span{font-size:15px;line-height:22px;color:var(--body)}

/* the last screen: scale + the footer */
.as-grid--tight{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.as-grid--tight .as-tile{padding:14px}
.as-grid--tight .as-tile h3{margin-top:10px;font-size:20px;line-height:22px}
.as-grid--tight .as-tile>svg{width:38px;height:38px;padding:8px}
@media (min-width:1100px){.as-grid--tight{grid-template-columns:repeat(4,minmax(0,1fr))}}
.as-foot--deck{display:grid;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.as-foot--deck .as-foot__brand img{width:130px}
.as-foot--deck .as-foot__line{display:none}
.as-foot--deck .as-foot__nav a{min-height:40px;font-size:14px}
@media (max-height:760px) and (max-width:699px){.as-foot--deck .as-foot__brand{display:none}}
.as-scr--loyal .as-mini{margin:14px 0 0}
.as-scr--loyal .as-mini a{min-height:68px}

/* ---------- 11 Oct (late) - the main site's frame: every screen's words start on the same line under the bar (its --anchor),
   the last thing on a screen sits on the bottom line; logos sized to the logo; the hero has the dyno cell behind the globe ---------- */
.as-scr{justify-content:flex-start}
.as-scr>.as-scr__in{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.as-scr--hero .as-facts{margin-top:auto}
.as-scr--hero .as-find{margin-top:20px}
#why .as-said,.as-scr--loyal .as-said{margin-top:auto}
.as-scr--end .as-foot--deck{margin-top:auto}
.as-scr--cert>.as-scr__in{justify-content:center}
.as-scr--spot{justify-content:flex-end}
.as-scr--spot>.as-scr__in{flex:0 0 auto}
.as-scr__cell,.as-scr__cell img{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.7)}
.as-scr--hero::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,10,.75) 0%,rgba(5,7,10,.35) 40%,rgba(5,7,10,.9) 100%)}
.as-scr--hero .as-globe{z-index:1}
.as-here{display:flex;align-items:center;gap:8px;margin-top:12px;font:700 14px/1 var(--f-ui);color:#cfe0f2}
.as-here svg{width:16px;height:16px;color:var(--cyan)}
.as-here b{color:#fff}
.as-here a{display:inline-flex;align-items:center;min-height:44px;margin-left:6px;color:var(--ice);text-decoration:none;
  background:linear-gradient(90deg,rgba(var(--cyan-rgb),.8),rgba(var(--cyan-rgb),.8)) 0 calc(100% - 12px)/100% 1px no-repeat}
/* logo tiles hug the logo (no empty white slab) */
.as-ap__logo{width:auto;min-width:72px;max-width:150px;height:58px;padding:8px 12px}
.as-ap__logo img{max-height:42px;max-width:126px}
.as-mini__logo{width:auto;min-width:60px;max-width:96px}
.as-spot__logo{width:auto!important;min-width:90px;max-width:170px}
/* the newest agent fits the shortest phone: the logo and the join line step aside, the story keeps to five lines */
.as-scr--spot .as-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:699px){.as-scr--spot .as-joinline{display:none}.as-scr--spot .as-spot__logo{display:none}}
@media (max-width:699px) and (max-height:760px){.as-scr--spot .as-text{-webkit-line-clamp:4}.as-scr--spot .as-chips li:nth-child(n+2){display:none}}
/* deeper cards: the main site's glass edge + glow */
.as-ap__card,.as-pk__card{box-shadow:var(--card-shadow),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(160,190,220,.14),0 40px 80px -30px rgba(0,0,0,.95),0 0 70px -40px rgba(var(--cyan-rgb),.55)}
.as-ap__card::before{content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 35%)}

/* a phone paints the faint words as plain faint text (a clipped gradient that big costs a frame on every flick) */
html:has(.as-deckpage){scroll-snap-type:none}
@media (max-width:699px){.as-mark{background:none;-webkit-text-stroke:0;color:rgba(214,226,240,.045)}}
/* the join key's glow breathes on its ::after ring (opacity only - a filter animation repainted every frame) */
.as-dock__join{animation:none}
.as-dock__join::after{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px rgba(var(--cyan-rgb),.55),0 0 22px rgba(var(--cyan-rgb),.6);opacity:0;animation:as-breathe 2.6s ease-in-out infinite}
@keyframes as-breathe{50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.as-dock__join::after{animation:none}}

/* a few words from Martin - quiet, premium */
.as-scr--martin>.as-scr__in{justify-content:center}
.as-martin{position:relative;margin:18px 0 0;padding:30px 24px 26px;border-radius:24px;background:var(--card-face);
  box-shadow:var(--card-shadow),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(160,190,220,.14),0 50px 90px -40px rgba(0,0,0,.95),0 0 90px -40px rgba(var(--cyan-rgb),.6)}
.as-martin::before{content:"\201C";position:absolute;right:18px;top:-30px;font:400 180px/1 var(--f-display);color:rgba(var(--cyan-rgb),.16);pointer-events:none}
.as-martin__face{display:block;width:96px;height:96px;overflow:hidden;border-radius:50%;box-shadow:0 0 0 3px rgba(var(--cyan-rgb),.6),0 0 30px rgba(var(--cyan-rgb),.4)}
.as-martin__face img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.as-martin__q{margin:20px 0 0;font:italic 400 21px/32px var(--f-text);color:#f1f6fb;text-wrap:pretty}
.as-martin figcaption{display:flex;flex-direction:column;gap:4px;margin-top:18px}
.as-martin figcaption b{font:400 30px/1 var(--f-display);letter-spacing:.04em;color:var(--cyan)}
.as-martin figcaption span{font:700 12px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (min-width:1000px){.as-martin{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:48px;align-items:center;max-width:1100px;padding:48px 56px}
  .as-martin__face{grid-row:1 / 3;width:200px;height:200px}.as-martin__q{margin:0;font-size:30px;line-height:44px}.as-martin figcaption{grid-column:2}}
@media (max-height:700px) and (max-width:699px){.as-martin__q{font-size:18px;line-height:27px}.as-martin__face{width:72px;height:72px}}

/* 11 Oct (final pass from the side-by-side): the pack pictures stay inside their card; the certificate fits above the bar;
   the globe sits in the open middle of the phone's first screen, big and turning */
.as-pk__img{position:relative;display:block}
.as-pk__img img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);max-width:none;max-height:none;object-fit:contain;box-shadow:none;filter:drop-shadow(0 20px 30px rgba(0,0,0,.7))}
@media (max-width:999px){.as-scr--cert .as-tilt{width:min(48vw,24svh)}.as-scr--cert .as-tilt .as-fan__tag{bottom:-12px}}
@media (max-width:999px){.as-globe{left:50%;right:auto;top:auto;bottom:calc(var(--dockh) + 96px);transform:translateX(-50%);width:min(92vw,40svh);opacity:.9}}
@media (max-width:999px) and (max-height:700px){.as-globe{width:min(80vw,30svh);bottom:calc(var(--dockh) + 84px)}}

/* =====================================================================================================================
   11 OCT 2026 (night) - EVERY PAGE SCREEN BY SCREEN (Martin: "no horizontal movement... all the way down... wants more
   depth"). For garages, the pack and each agent are decks like home: one flick = one screen. On phones and tablets every row
   of cards becomes a sideways swipe deck (the next card peeks in), the portal tour is a swipe through its screens.
   ===================================================================================================================== */
.as-deck>.as-sec,.as-deck>.as-hero,.as-deck>.as-ahero{position:relative;height:100vh;height:100svh;min-height:0;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 16px) 0 calc(var(--dockh) + 16px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;isolation:isolate;border:0}
.as-deck>.as-sec::-webkit-scrollbar{display:none}
.as-deck>.as-sec>.as-wrap,.as-deck>.as-hero>.as-wrap{position:relative;z-index:2}
.as-deck>.as-pics,.as-deck>.as-near{padding-top:calc(var(--bar) + 16px)}
.as-deck>.as-ahero{justify-content:flex-end}
@media (max-width:999px){.as-deck>.as-ahero{justify-content:flex-start;padding-top:var(--bar)}.as-deck>.as-ahero .as-ahero__in{margin-top:-48px}}
.as-deck .as-embed iframe{min-height:0!important;height:calc(100svh - var(--bar) - var(--dockh) - 170px)!important}
.as-deck .as-amap{height:min(44svh,440px)}
.as-endscr .as-foot--deck{margin-top:28px}
/* sideways decks for rows of cards (phones + tablets) */
@media (max-width:1099px){
  .as-deck>.as-sec .as-grid,.as-deck>.as-sec .as-docs,.as-deck>.as-sec .as-tiers__row,.as-deck>.as-sec .as-kit,.as-deck>.as-sec .as-money__row,.as-deck>.as-sec .as-mini,.as-deck>.as-sec .as-steps{
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scrollbar-width:none;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:6px var(--pad) 14px;scroll-padding-inline:var(--pad)}
  .as-deck>.as-sec .as-grid>*,.as-deck>.as-sec .as-docs>*,.as-deck>.as-sec .as-tiers__row>*,.as-deck>.as-sec .as-kit>*,.as-deck>.as-sec .as-money__row>*,.as-deck>.as-sec .as-mini>*,.as-deck>.as-sec .as-steps>*{scroll-snap-align:start}
  .as-deck .as-kit__i--big{grid-column:auto}
  .as-deck .as-grid::-webkit-scrollbar,.as-deck .as-docs::-webkit-scrollbar,.as-deck .as-kit::-webkit-scrollbar,.as-deck .as-mini::-webkit-scrollbar{display:none}
  /* the portal tour: every screen in one swipe deck, its step named under it */
  .as-deck .as-ptabs{display:none}
  .as-deck .as-screens{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:16px calc(-1 * var(--pad)) 0;padding:6px var(--pad) 14px;scroll-padding-inline:var(--pad)}
  .as-deck .as-screens::-webkit-scrollbar{display:none}
  .as-deck .as-screen,.as-deck .as-screen[hidden]{display:block;scroll-snap-align:start}
  .as-deck .as-screen figcaption b{color:#fff}
}
.as-swipe{display:none}
@media (max-width:1099px){.as-swipe{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:700 12px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:#cfe3ff}
  .as-swipe svg{width:18px;height:18px;color:var(--cyan);animation:as-nudge 2.2s ease-in-out infinite}}
@keyframes as-nudge{50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.as-swipe svg{animation:none}}
/* layered depth on every screen of these pages too: the faint word + a wash of light */
.as-deck>.as-sec::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 88% 12%,rgba(var(--cyan-rgb),.10),rgba(var(--cyan-rgb),0) 70%),radial-gradient(60% 50% at 4% 96%,rgba(49,122,190,.14),rgba(49,122,190,0) 70%),
  url(../img/pendle-pattern-tile-300.webp) 0 0/300px 300px,linear-gradient(180deg,#0b1017 0%,#05070a 100%)}

/* phones + tablets: a two-part screen (words + picture) is a sideways deck of its two parts - the words first, then a swipe
   to the picture, the map, the phone, the report; nothing has to fit both into one phone screen */
@media (max-width:999px){
  .as-deck .as-split{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;column-gap:var(--pad);align-items:center;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;max-height:100%}
  .as-deck .as-split::-webkit-scrollbar{display:none}
  .as-deck .as-split>*{scroll-snap-align:start;min-width:0}
  .as-deck .as-split>.as-split__text{order:-1}
  .as-deck .as-split>.as-split__text::after{content:"Swipe \2192";display:inline-flex;margin-top:16px;padding:8px 14px;border-radius:999px;background:rgba(12,17,24,.6);
    box-shadow:inset 0 0 0 1px rgba(127,217,255,.35);font:700 12px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:#cfe3ff}
  .as-deck .as-sheet img,.as-deck .as-sheet--screen img{width:auto;max-width:100%;max-height:calc(100svh - var(--bar) - var(--dockh) - 90px)}
  .as-deck .as-sheet--two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-deck .as-sheet--two img{max-height:calc(100svh - var(--bar) - var(--dockh) - 120px)}
  .as-deck .as-fan{width:min(100%,46svh)}
  .as-deck .as-amap{height:calc(100svh - var(--bar) - var(--dockh) - 60px)}
  .as-deck .as-phone{zoom:.86}
  .as-deck .as-hero--page .as-facts{display:none}
  .as-deck .as-switch{font-size:14px;line-height:20px;padding:10px 12px}
  /* an agent's first screen: a shorter photo, keys two to a row */
  .as-deck>.as-ahero .as-ahero__pic{aspect-ratio:auto;height:30svh}
  .as-deck>.as-ahero .as-ahero__scrim{height:calc(30svh + 2px)}
  .as-deck>.as-ahero .as-acts{gap:10px}
  .as-deck>.as-ahero .as-acts>.as-key{flex:1 1 calc(50% - 5px);min-height:46px;padding:10px 12px;font-size:15px}
  .as-deck>.as-ahero .as-acts>.as-key:first-child{flex-basis:100%}
  .as-deck>.as-ahero .as-ahero__logo{width:auto;height:64px;margin-bottom:12px}
  .as-deck .as-h1--agent{font-size:40px;line-height:40px}
}
@media (max-width:999px) and (max-height:760px){
  .as-deck .as-sec .as-h2{font-size:32px;line-height:32px}.as-deck .as-sec .as-lede,.as-deck .as-sec .as-text{font-size:15px;line-height:22px}
  .as-deck>.as-ahero .as-ahero__logo{display:none}.as-deck>.as-ahero .as-ahero__pic{height:24svh}.as-deck>.as-ahero .as-ahero__scrim{height:calc(24svh + 2px)}
  .as-deck .as-h1{font-size:42px;line-height:41px}.as-deck .as-phone{zoom:.72}
  .as-deck .as-hero--page .as-switch{display:none}
}
.as-deck .as-booking .as-embed iframe{height:calc(100svh - var(--bar) - var(--dockh) - 190px)!important}
/* final fits: the booking widget scrolls in its own box; an agent's first screen and the money cards a little tighter */
.as-deck .as-booking .as-embed{max-height:calc(100svh - var(--bar) - var(--dockh) - 170px);overflow:auto;-webkit-overflow-scrolling:touch}
@media (max-width:999px){.as-deck>.as-ahero .as-ahero__pic{height:25svh}.as-deck>.as-ahero .as-ahero__scrim{height:calc(25svh + 2px)}
  .as-deck>.as-ahero .as-dyno{margin-top:10px}.as-deck>.as-ahero .as-chips{margin-top:10px}.as-deck>.as-ahero .as-acts{margin-top:14px}
  .as-deck .as-money .as-panel{padding:18px 18px}.as-deck .as-money .as-do{gap:6px}.as-deck .as-money .as-do li{font-size:14px;line-height:20px}}
@media (max-width:999px) and (max-height:760px){.as-deck>.as-ahero .as-ahero__pic{height:20svh}.as-deck>.as-ahero .as-ahero__scrim{height:calc(20svh + 2px)}
  .as-deck>.as-ahero .as-chips li:nth-child(2){display:none}.as-deck .as-money .as-big b{font-size:44px}}
@media (min-width:1000px){.as-deck .as-pics .as-strip li{aspect-ratio:16/10}.as-deck .as-kit__i img{aspect-ratio:16/10}}

/* AGENT OF THE MONTH - gold (the house amber, brighter): the badge, the key, a gold edge of light */
.as-scr--aotm{justify-content:flex-end}
.as-scr--aotm>.as-scr__in{flex:0 0 auto}
.as-scr--aotm .as-scr__shade{background:linear-gradient(0deg,rgba(5,7,10,.98) 0%,rgba(5,7,10,.88) 52%,rgba(5,7,10,.35) 82%,rgba(5,7,10,.6) 100%)}
.as-scr--aotm::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(240,180,60,.25),inset 0 0 120px -40px rgba(240,180,60,.45)}
.as-aotm__badge{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin:0 0 14px;padding:9px 16px 9px 12px;border-radius:999px;
  background:linear-gradient(180deg,#ffd27a,#e3a52c);color:#2a1a00;font:700 13px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 10px 30px -6px rgba(240,180,60,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.as-aotm__badge svg{width:18px;height:18px}
.as-aotm__badge i{font-style:normal;padding-left:10px;border-left:1px solid rgba(42,26,0,.3);letter-spacing:.08em}
.as-aotm__name{color:#fff;margin-top:6px}
.as-scr--aotm .as-spot__logo{position:static;height:64px;margin-bottom:10px}
.as-scr--aotm .as-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.as-key--gold{--bf:#f0b43c;--bm:.06;--bb:.16;--bh:#ffc95c;--rim:#ffe2a3;--rim-h:#fff3d6;--ring:rgba(255,226,163,.5);--hi:rgba(255,255,255,.55);--lo:rgba(60,35,0,.22);--lip:#6b4a0a;--drop:rgba(80,50,0,.5);--gl:rgba(240,180,60,.65);--bloom:0 10px 32px rgba(240,180,60,.35);--fg:#2a1a00;--emb:rgba(255,255,255,.35)}
@media (min-width:1000px){.as-scr--aotm .as-scr__shade{background:linear-gradient(90deg,rgba(5,7,10,.96) 0%,rgba(5,7,10,.84) 44%,rgba(5,7,10,.15) 82%)}.as-scr--aotm>.as-scr__in>*{max-width:660px}.as-scr--aotm{justify-content:center}}
@media (max-width:699px){.as-scr--aotm .as-spot__logo{display:none}.as-scr--aotm .as-joinline{display:none}}
@media (max-width:699px) and (max-height:760px){.as-scr--aotm .as-text{-webkit-line-clamp:3}.as-scr--aotm .as-chips li:nth-child(2){display:none}}
.as-ap__badges{display:flex;gap:6px;min-height:0}
@media (max-width:999px){.as-deck .as-split--portal .as-screens{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}

/* the map's three frames */
.as-maptabs{position:relative;z-index:2;display:flex;gap:4px;width:100%;max-width:var(--wrap);margin:0 auto 10px;padding:4px;border-radius:999px;background:rgba(16,22,30,.8);box-shadow:inset 0 0 0 1px rgba(160,190,220,.3)}
.as-maptabs button{flex:1 1 0;min-height:44px;padding:0 10px;border:0;border-radius:999px;background:none;cursor:pointer;font:700 14px/1 var(--f-ui);color:#cfe0f2;white-space:nowrap}
.as-maptabs [aria-selected="true"]{background:var(--cyan);color:var(--on-cyan);box-shadow:0 6px 20px -6px rgba(var(--cyan-rgb),.7)}
@media (min-width:700px){.as-maptabs{width:auto;align-self:flex-start;margin-left:max(0px,calc((100% - var(--wrap)) / 2))}.as-maptabs button{flex:0 0 auto;padding:0 20px}}
.as-scr--map .as-mapgrow{margin:12px auto 0;width:100%}
.as-mapgrow:not([hidden])+.as-joinline{display:none}

/* 11 Oct (sweep): home screens - the row-to-deck rule is for the inner pages only (it was stacking the loyalty cards on top of each
   other and squeezing the four steps); a screen's content sits together in the middle, no empty gulf before the quote */
#why>.as-scr__in,.as-scr--loyal>.as-scr__in{justify-content:center}
#why .as-said,.as-scr--loyal .as-said{margin-top:18px}
.as-steps--tight .as-step p{margin-top:6px;font-size:14px;line-height:20px;color:var(--body)}
@media (max-width:699px) and (max-height:760px){.as-steps--tight .as-step p{display:none}}

/* sweep fixes (11 Oct): a words + picture screen on a phone STACKS when both fit the screen (site.js tries it); only when they
   don't is it a sideways swipe - and then the swipe runs edge to edge with the words on the same left edge as every screen */
@media (max-width:999px){
  .as-deck .as-split{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));column-gap:0;grid-auto-columns:100%}
  .as-deck .as-split>*{padding-left:var(--pad);padding-right:var(--pad)}
  .as-deck .as-split.is-stacked{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);row-gap:22px;overflow:visible}
  .as-deck .as-split.is-stacked>.as-split__text::after{display:none}
}
.as-deck>.as-ahero--nopic{justify-content:center}
.as-deck>.as-ahero--nopic .as-ahero__in{margin-top:0}
@media (max-width:999px){.as-deck .as-split.as-wrap,.as-deck .as-wrap .as-split{margin-left:0;margin-right:0;padding-left:0;padding-right:0;scroll-padding:0;max-width:none}.as-deck .as-split.is-stacked>*{padding-left:var(--pad);padding-right:var(--pad)}}
.as-deck .as-pics .as-strip li{aspect-ratio:auto;height:min(62svh,560px)}
@media (min-width:700px){.as-deck .as-pics .as-strip li{height:auto;aspect-ratio:16/10}}
@media (max-width:999px){.as-deck .as-split.is-stacked .as-fan{width:min(100%,38svh)}.as-deck .as-split .as-sheet img{loading:auto}}

/* every sideways deck looks swipeable: the next card peeks in (~11%), the next arrow + the Swipe pill pulse (opacity/transform only) */
@media (max-width:999px){
  .as-scr--deck .cx-panel{flex:0 0 89%;padding-right:0}
  .as-scr--deck .cx-panel:last-child{flex-basis:100%;padding-right:var(--pad)}
  .as-scr--deck .cx-panel.as-mk{flex-basis:89%}
  .as-deck .as-split:not(.is-stacked){grid-auto-columns:89%}
  .as-deck .as-split:not(.is-stacked)>*:last-child{padding-right:var(--pad)}
}
.as-ctl{margin:4px 0 0}
.as-ctl .cx-dots{margin:0}.as-ctl .cx-count{margin-left:auto;font-size:20px}
@keyframes as-pulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(127,217,255,.42),0 0 0 0 rgba(var(--cyan-rgb),.55)}50%{box-shadow:inset 0 0 0 1px #9be4ff,0 0 0 8px rgba(var(--cyan-rgb),0)}}
.cx-next:not(:disabled),.as-next:not(:disabled){animation:as-pulse 1.8s ease-out infinite;color:var(--ice)}
.cx-ctl.is-used .cx-next,.as-ctl.is-used .as-next{animation:none}
.as-deck .as-split>.as-split__text::after{animation:as-pulse 1.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.cx-next,.as-next,.as-deck .as-split>.as-split__text::after{animation:none!important}}

/* an agent's first screen on a phone: the shade sits exactly on the photo (it was offset by the bar's height - a dark band over
   the top of the photo and the bottom left bright = the "split" picture) */
@media (max-width:999px){.as-deck>.as-ahero .as-ahero__scrim{top:var(--bar)}}
.as-chips .as-chip--gold{background:rgba(240,180,60,.16);box-shadow:inset 0 0 0 1px rgba(240,180,60,.7);color:#ffe2a3}
.as-chips .as-chip--gold svg{color:#f0b43c}
/* the booking screen: their widget's box is the screen less the heading lines (it scrolls inside, their widget unchanged) */
.as-deck .as-booking .as-embed{max-height:calc(100svh - var(--bar) - var(--dockh) - 240px)}
.as-deck .as-booking .as-embed iframe{height:calc(100svh - var(--bar) - var(--dockh) - 240px)!important}

/* the agent card (every deck): the whole card is the link; a pulsing 'View <agent>' pill is the obvious thing to press; the logo
   tile sits fully inside the photo's corner */
.as-ap__card{-webkit-tap-highlight-color:rgba(0,174,239,.15)}
.as-ap__logo{left:12px;bottom:12px;max-height:56px}
.as-ap__pic::after{height:62%}
.as-ap__key{width:100%;margin-top:10px;min-height:48px;padding:12px 18px;font-size:15px;text-wrap:balance;white-space:normal}
.as-ap__key::after{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px rgba(var(--cyan-rgb),.6),0 0 24px rgba(var(--cyan-rgb),.7);opacity:0;animation:as-breathe 2.2s ease-in-out infinite}
@media (min-width:1000px){.as-ap__key{width:auto;align-self:flex-start}}
@media (prefers-reduced-motion:reduce){.as-ap__key::after{animation:none}}
.as-ap__foot{display:none}
/* the logo on the card is the tile's own picture, never the photo rule (it was being stretched absolute) */
.as-ap__logo img{position:static;width:auto;height:auto;max-width:126px;max-height:42px;object-fit:contain}

/* ---------- the Pendle Log Analyzer: the hero film (12 Oct 2026 - replaces the real-captures tab deck) ---------- */
.as-screens--an .as-screen video{display:block;width:100%;height:auto;background:#0b0d10}
@media (min-width:1000px){.as-split--an{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.as-screens--an{align-self:center}}
@media (max-width:999px){.as-deck .as-screens--an{align-items:start}.as-screens--an .as-screen figcaption{letter-spacing:.06em;line-height:16px}}