/* V11 - the super version. The brand showcase's page made into the site: near-black ground, live fluted glass, one colour at a time.
   Radius scale: 24 the top fold and big panels, 18 cards, 12 media, 9 controls. */
:root{
  --bg:#07090B; --ink-rgb:7,9,11; --tile:#15181b; --panel:rgba(255,255,255,.045);
  --po-container:1360px; --po-pad:clamp(20px,4vw,56px);
  --space:clamp(6.5rem,3.5rem + 9.5vw,13.5rem);
  --h2:clamp(3.25rem,1.6rem + 6.2vw,7.25rem);
  --cw:calc(min(100vw,var(--po-container)) - 2*var(--po-pad));
  --gut:12px; --gap:14px; --r-xl:24px; --r-card:18px; --r-tile:12px; --r-s:9px;
}
html{scroll-behavior:smooth;color-scheme:dark}
/* nothing may ever be wider than the screen: Safari on a phone zooms the whole page out to fit anything that pokes past the edge,
   and does not zoom back in. On the root it clips without making the page a scroll box, so the pinned panels still pin */
html{overflow-x:clip}
body{background:var(--bg)}
[id]{scroll-margin-top:96px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* keyboard only: the first Tab on the page shows a way past the bar */
.skip{position:fixed;z-index:300;top:var(--gut);left:var(--gut);display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:var(--r-s);background:#fff;color:var(--po-ink);font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none;outline:2px solid #fff;outline-offset:3px}

/* Lead Pronto brand rule: every Founders headline is trimmed to its capitals, so no spare space rides above or below it */
/* the top is padding, not trim: Safari will not trim upwards when the line is tighter than the letters, so the capitals rode above the box
   and crowded what sat over them. Founders' capitals stand exactly at its ascent, so this is the same edge everywhere */
.po-h{text-box:trim-end cap alphabetic;padding-top:max(0px,(1em - 1lh) / 2)}
@supports not (text-box:trim-both cap alphabetic){.po-h{margin-block-end:-.15em}}

/* ---------- glass ---------- */
[data-glass]{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(200deg,var(--c-base),#06080B 55%)}
.glass-cv{position:absolute;inset:0;z-index:-1;width:100%;height:100%;display:block}
.no-glass .glass-cv{display:none}

/* the button never takes the turning colour: white, ink chip, white arrow, everywhere */
/* buttons: a dark pill, the label, a round white arrow on the right. The colours never turn */
.po-btn{flex-direction:row-reverse;gap:16px;min-height:60px;padding:6px 6px 6px 26px;border-radius:999px;background:rgba(var(--ink-rgb),.74);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.po-btn .po-chip{width:48px;height:48px;border-radius:50%;background:#fff;color:var(--po-ink)}
.po-btn .po-chip svg{width:16px;height:16px}
.po-btn.po-sm{min-height:48px;gap:12px;padding:4px 4px 4px 20px}
.po-btn.po-sm .po-chip{width:40px;height:40px}
.po-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.po-btn:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.po-btn:hover .po-chip svg{transform:translate(2px,-2px)}}
/* over a call to action, and nowhere else, a round arrow in the section's colour takes the place of the pointer. Mouse only */
.cta-cur{position:fixed;z-index:200;left:0;top:0;pointer-events:none;will-change:transform}
.cta-cur i{display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--c,#fff);color:var(--po-ink);opacity:0;transform:scale(.5);transition:transform 260ms var(--po-ease-strong),opacity 160ms var(--po-ease)}
.cta-cur svg{width:22px;height:22px}
.cta-on .cta-cur i{opacity:1;transform:scale(1)}
.cta-on .po-btn{cursor:none}

/* ---------- navigation ---------- */
.nav{position:fixed;z-index:60;top:var(--gut);left:var(--gut);right:var(--gut);height:76px;display:flex;align-items:center;gap:24px;padding-inline:clamp(20px,4.2vw,64px);border-radius:var(--r-xl) var(--r-xl) 14px 14px;transition:background-color 260ms var(--po-ease),box-shadow 260ms var(--po-ease)}
.nav.stuck,.nav.open{background:rgba(var(--ink-rgb),.62);box-shadow:inset 0 0 0 1px var(--po-hair);border-radius:14px}
/* once it has stuck the bar is frosted glass: the page shows through it, blurred. The blur is on a layer of its own, because on the
   bar itself it would shut the phone menu, which is fixed to the screen, inside the bar */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);transition:opacity 260ms var(--po-ease)}
.nav.stuck::before{opacity:1}
/* no blur to be had, or the visitor has asked for less see-through: the bar goes back to near-solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav.stuck{background:rgba(var(--ink-rgb),.95)}}
@media (prefers-reduced-transparency:reduce){.nav.stuck{background:rgba(var(--ink-rgb),.95)}.nav.stuck::before{opacity:0}}
/* phones and tablets get the near-solid bar too: re-blurring the films and moving panels under it on every frame of a scroll
   is a cost a phone pays in dropped frames */
@media (hover:none){.nav.stuck:not(.open){background:rgba(var(--ink-rgb),.95)}.nav::before{display:none}}
/* wider than a phone the bar hugs its contents: the logo and the button stay where they were, the bar's ends come in to meet them */
@media (min-width:861px){.nav{--in:clamp(20px,4.2vw,64px);left:calc(var(--gut) + var(--in) - 20px);right:calc(var(--gut) + var(--in) - 8px);padding-inline:20px 8px}}
.nav-logo{display:block;width:clamp(128px,11.5vw,168px);flex:none;padding-block:12px}
.nav-menu{margin-left:auto;display:flex;align-items:center;gap:clamp(2px,1vw,14px)}
.nav-menu a.lnk{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-s);text-decoration:none;font-weight:500;font-size:1.0625rem;color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(var(--ink-rgb),.6);transition:color 160ms var(--po-ease),background-color 160ms var(--po-ease)}
.nav-menu .po-btn{margin-left:8px}
.nav-toggle{display:none;margin-left:auto;width:48px;height:44px;border:0;border-radius:var(--r-s);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:20px;height:20px}
/* three lines when shut, a cross when open */
.nav-toggle .x,.nav-toggle[aria-expanded="true"] .m{display:none}
.nav-toggle[aria-expanded="true"] .x{display:block}
.nav-toggle:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.nav-menu a.lnk:hover{color:#fff;background:rgba(255,255,255,.09)}}
/* Pronto Group menu: a dropdown on desktop, an inline section in the phone menu */
.pg{position:relative}
.pg-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 14px;border:0;border-radius:var(--r-s);background:none;cursor:pointer;font:500 1.0625rem/1 var(--po-sans);color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(var(--ink-rgb),.6);transition:color 160ms var(--po-ease),background-color 160ms var(--po-ease)}
.pg-lab{position:relative;display:inline-block}
.pg-chev{width:13px;height:13px;flex:none;transition:transform 200ms var(--po-ease)}
.pg.open .pg-chev{transform:rotate(180deg)}
.pg.open .pg-btn{color:#fff;background:rgba(255,255,255,.09)}
.pg-menu{position:absolute;z-index:3;top:100%;right:0;width:min(360px,calc(100vw - 2 * var(--gut) - 16px));padding-top:12px;transform-origin:top center;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:opacity 200ms ease-out,transform 200ms ease-out,visibility 0s linear 200ms}
.pg.open .pg-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pg-card{list-style:none;margin:0;padding:6px;border-radius:var(--r-card);background:#0D1013;box-shadow:inset 0 0 0 1px var(--po-hair)}
.pg-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 12px;border-radius:12px;color:#fff;text-decoration:none;text-shadow:none;transition:background-color 160ms var(--po-ease)}
.pg-row.is-here{background:rgba(255,255,255,.07)}
.pg-row:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pg-tile{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:11px}
.pg-tile-lp{background:#002620}
.pg-tile-lp img{display:block;width:18px;height:auto}
.pg-tile-one{background:#07090B;box-shadow:inset 0 0 0 1px var(--po-hair)}
.pg-tile-one [data-logo]{display:block;width:26px;line-height:0}
.pg-txt{display:grid;gap:3px;min-width:0}
.pg-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-weight:600;font-size:1rem;line-height:1.25}
.pg-name u{text-decoration-color:var(--po-hair);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 160ms var(--po-ease)}
.pg-name svg{width:13px;height:13px;flex:none;margin-left:-6px;transition:transform 260ms var(--po-ease-strong)}
.pg-desc{font-size:.875rem;line-height:1.35;color:var(--po-w72)}
.pg-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-weight:500;font-size:.8125rem;line-height:1.2}
.pg-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
@media (hover:hover) and (pointer:fine){
  .pg-btn:hover{color:#fff;background:rgba(255,255,255,.09)}
  .pg-row:not(.is-here):hover{background:rgba(255,255,255,.06)}
  .pg-row:hover u{text-decoration-color:currentColor}
  .pg-row:hover svg{transform:translate(2px,-2px)}
}
.pg-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:861px){.nav-menu a.lnk,.pg-btn{white-space:nowrap}}
@media (min-width:861px) and (max-width:1100px){.nav-menu{gap:0}.pg-btn{padding-inline:8px 6px;gap:4px}.nav-menu a.lnk{padding-inline:8px}.nav-menu .po-btn{margin-left:4px}}
@media (min-width:861px) and (max-width:960px){.nav{left:var(--gut);right:var(--gut);padding-inline:20px 10px}.nav-menu a.lnk{padding-inline:6px}.pg-btn{padding-inline:6px 4px}}
@media (prefers-reduced-motion:reduce){.pg-menu,.pg-chev{transition:none}}
@media (max-width:860px){
  .nav{height:64px;padding-inline:18px 10px}
  .nav-toggle{display:inline-flex}
  /* the menu is the whole screen, as the contact form is: the links in the headline face, the button at the foot. The bar's own
     logo and button sit on top of it, and the glow at the foot is whichever colour the page is on */
  .nav.open{background:none;box-shadow:none}
  .nav.open::before{opacity:0}
  .nav-menu{display:none;position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:stretch;gap:0;padding:112px 22px 30px 30px;overflow-y:auto;overscroll-behavior:contain;
    background:radial-gradient(70% 46% at 0% 100%,color-mix(in srgb,var(--c-b) 34%,transparent),transparent 72%),radial-gradient(60% 40% at 100% 100%,color-mix(in srgb,var(--c-a) 22%,transparent),transparent 72%),var(--bg)}
  .nav.open .nav-menu{display:flex;animation:menu-in 200ms var(--po-ease) both}
  /* Founders, so trimmed to its capitals like every headline; the padding makes up the space the trim takes, so the links keep their rhythm */
  .nav-menu a.lnk{display:block;flex:none;min-height:0;padding:calc(10px + .135em) 0;padding-top:calc(10px + .135em + max(0px,(1em - 1lh) / 2));border-radius:0;font:700 clamp(2.5rem,min(18vw,11svh),4.5rem)/.9 var(--po-disp);text-transform:uppercase;letter-spacing:-.01em;color:#fff;text-shadow:none;text-box:trim-end cap alphabetic}
  @supports not (text-box:trim-both cap alphabetic){.nav-menu a.lnk{padding-block:calc(10px + .075em);margin-block-end:-.15em}}
  .nav-menu a.lnk:hover{background:none}
  .nav-menu a.lnk:active{color:var(--acc)}
  /* the Pronto Group section sits in the menu as one more big word that opens its two rows in place */
  .nav-toggle{position:relative}
  .pg-btn{display:flex;width:100%;justify-content:flex-start;align-items:center;text-align:left;white-space:nowrap;gap:14px;min-height:0;padding:calc(10px + .135em) 0;border-radius:0;background:none;font:700 clamp(2.5rem,min(18vw,11svh),4.5rem)/.9 var(--po-disp);text-transform:uppercase;letter-spacing:-.01em;color:#fff;text-shadow:none;text-box:trim-end cap alphabetic}
  .pg.open .pg-btn{background:none}
  .pg-btn .pg-chev{display:none}
  .pg-menu{position:static;display:none;width:auto;max-width:420px;padding:2px 0 14px;opacity:1;visibility:visible;transform:none;transition:none}
  .pg.open .pg-menu{display:block;animation:menu-up 300ms var(--po-ease-strong) both}
  .pg-card{background:rgba(255,255,255,.05)}
  .nav-menu .po-btn{display:flex;flex:none;justify-content:space-between;min-height:60px;max-width:420px;margin:auto 0 0;padding:6px 6px 6px 24px;font-size:1.125rem}
  .nav-menu .po-btn .po-chip{width:48px;height:48px}
  .nav.open .nav-menu>*{animation:menu-up 300ms var(--po-ease-strong) both}
  .nav.open .nav-menu>:nth-child(2){animation-delay:40ms}.nav.open .nav-menu>:nth-child(3){animation-delay:80ms}.nav.open .nav-menu>:nth-child(4){animation-delay:120ms}
  /* the page behind does not scroll while the menu is open */
  .nav-on{overflow:hidden}
}
@keyframes menu-in{from{opacity:0}}
@keyframes menu-up{from{opacity:0;transform:translateY(14px)}}

/* ---------- top fold: centred on the glass, a picture set in the headline that grows to fill the panel ---------- */
.hero{position:sticky;top:0;z-index:0;height:100vh;height:100svh;padding:var(--gut)}
.hero.off{visibility:hidden}
.hero-panel{height:100%;border-radius:var(--r-xl);container-type:inline-size;transform-origin:50% 100%;will-change:transform}
.hero-in{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding:96px clamp(20px,4.2vw,64px) clamp(22px,3.4svh,34px);text-align:center}
/* one gap between every part of the copy, measured from the capitals and the baselines rather than the line boxes */
.hero-copy{--fg:clamp(22px,3.8svh,40px);grid-row:2;display:flex;flex-direction:column;align-items:center;width:100%;min-width:0}
@media (max-height:740px){.hero-copy{--fg:20px}}
.hero h1{margin:-.01em 0 -.32em;padding-top:0;text-box-trim:none;font-size:clamp(2.75rem,min(11.4cqw,17.5svh),12.5rem);line-height:.9}
.hero h1 .ln{display:block;overflow:hidden;padding-top:.06em;white-space:nowrap}
.hero h1 .ln>span{display:block}
/* the picture: as tall as the capitals, sitting in the line like a word */
/* the film is exactly as tall as a capital letter and stands on the baseline, so it reads as one more letter in the line.
   The negative top margin stops it adding height to its line */
.htile{position:relative;display:inline-block;vertical-align:baseline;width:.96em;height:.64em;margin:-.2em .05em 0;border-radius:.115em;overflow:hidden;background:var(--tile)}
@supports (height:1cap){.htile{width:1.5cap;height:1cap}}
.htile video{position:absolute;left:50%;top:50%;width:calc(100% / .82);max-width:none;height:auto;aspect-ratio:9/16;object-fit:cover;transform:translate(-50%,-44%)}
.hero.growing .htile{background:none}
.hero.growing .htile video{visibility:hidden}
.hero .po-lede{margin:calc(var(--fg) - .305em) 0 -.385em;max-width:46ch;text-wrap:balance;font-size:clamp(1.125rem,1.6cqw,1.4375rem);line-height:1.4;color:rgba(255,255,255,.9)}
/* the services, in a row, a dot of the colour of the moment between each */
.hero .fold-serv{list-style:none;padding:0;max-width:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .85em;font-weight:500;color:#fff}
.fold-serv li{display:flex;align-items:center;gap:.85em;white-space:nowrap}
.fold-serv li+li::before{content:"";width:.3em;height:.3em;border-radius:50%;background:var(--acc)}
/* one still row of the names, white, at the foot of the panel */
.fold-logos{grid-row:3;align-self:end;display:flex;align-items:center;justify-content:center;gap:clamp(20px,3.5cqw,54px);margin:0;padding:0;list-style:none}
.fold-logos li{flex:none;display:flex}
.fold-logos img{height:calc(var(--k,1) * clamp(15px,1.75cqw,24px));width:auto;filter:brightness(0) invert(1);opacity:.82}
.fold-logos-w{display:contents}
.fold-logos .dup{display:none}
/* the copy of the picture that grows: a clipped window the size of the finished view, scaled down onto the tile by main.js */
.grow-win,.grow-shade{display:none}
/* at rest the window sits on the picture in the headline, all but invisible, so it is already drawn when the first scroll asks for it */
.grow .grow-win{display:block;position:absolute;z-index:3;left:50%;top:50%;overflow:hidden;background:var(--bg);opacity:.01;pointer-events:none;will-change:transform,opacity}
.grow .hero.growing .grow-win{opacity:1}
/* the copy fades and the shade comes up as the picture grows: on layers of their own, so each frame of that is only a change of
   opacity and the panel under them is not painted again */
.grow .hero.growing .hero-in,.grow .hero.growing .grow-shade{will-change:opacity}
/* the wall is a single film of fifteen tiles in five staggered columns, 4.61 by 3.35 column-widths; the film from the headline is the middle tile */
.grow-grid{position:absolute;left:50%;top:50%;width:calc(var(--cw,300px) * 4.6095);height:calc(var(--cw,300px) * 3.3524);will-change:transform}
.grow-grid video{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:none;transform:translateX(-50%)}
.gl{position:absolute;z-index:2;height:calc(var(--k,1) * var(--cw,300px) * .095);width:auto;max-width:none;transform:translateX(-50%);filter:brightness(0) invert(1) drop-shadow(0 1px 12px rgba(var(--ink-rgb),.7))}
.gl.lb{transform:translate(-50%,-100%)}
/* on a narrow screen only the middle column is fully in view, so the logos on the side columns would be cut in half */
.narrow .gl:not(.mid){display:none}
.fold-pause{position:absolute;z-index:5;right:clamp(14px,2cqw,26px);bottom:clamp(14px,2cqw,26px);width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(var(--ink-rgb),.42);color:#fff;cursor:pointer;transition:background-color 200ms var(--po-ease)}
.fold-pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fold-pause .i-play{display:none;fill:currentColor;stroke-width:1.4}
.fold-pause.on .i-play{display:block}.fold-pause.on .i-pause{display:none}
.fold-pause:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.fold-pause:hover{background:rgba(var(--ink-rgb),.7)}}
@media (prefers-reduced-motion:reduce){.fold-pause{display:none}}
.grow .grow-shade{display:block;position:absolute;z-index:4;inset:0 0 auto;height:150px;background:linear-gradient(180deg,rgba(var(--ink-rgb),.6),rgba(var(--ink-rgb),0));opacity:0;pointer-events:none}
.js .hero h1 .ln>span{transform:translateY(106%);animation:rise 700ms var(--po-ease-strong) 40ms forwards}
.js .hero h1 .ln:nth-child(2)>span{animation-delay:110ms}
.js .hero .po-lede,.js .fold-logos{opacity:0;animation:fadeup 600ms var(--po-ease-strong) 240ms forwards}
.js .fold-logos{animation-delay:400ms}
@keyframes rise{to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fold-logos{to{transform:translateX(-50%)}}
/* the growth needs the fold held for one more screen before the page starts to ride over it */
.grow main{margin-top:100vh;margin-top:100svh}
/* wider than a tablet the headline sits on the centre of the panel; the awards hang above it and the line of copy below, so the group as a whole is no longer what is centred */
@media (min-width:901px){
  .hero-in{--pt:96px;--pb:clamp(22px,3.4svh,34px);grid-template-columns:minmax(0,1fr);padding-bottom:var(--pt)}
  .hero-copy{display:contents}
  .hero .award{grid-area:1/1;align-self:end}
  .hero h1{grid-area:2/1}
  .hero .po-lede{grid-area:3/1;align-self:start}
  .fold-logos{grid-area:3/1;margin-bottom:calc(var(--pb) - var(--pt))}
}
@media (max-width:900px){
  .hero-in{padding:92px 18px 24px}
  .hero h1{font-size:clamp(2.5rem,14.2cqw,6rem)}
  .hero .po-lede{font-size:1.125rem}
  @media (max-width:600px){.hero .fold-serv{max-width:19em}.fold-serv li:nth-child(3)::before{display:none}}
  /* all eight logos, in rows: four to a row on a tablet, three on a phone. The last row is short, which leaves the corner for the pause button */
  .fold-logos{flex-wrap:wrap;gap:22px 0;width:100%;padding-inline:54px;margin-top:26px}
  .fold-logos li{flex:0 0 25%;justify-content:center}
  .fold-logos img{height:calc(var(--k,1) * 19px)}
  @media (max-width:600px){
    /* on a phone the copy and the logos sit together as one block, with the same space under the bar as above the foot of the panel */
    .hero-in{grid-template-rows:1fr auto auto 1fr;padding:64px 18px 0}
    .fold-logos{align-self:start;padding-inline:0;margin-top:clamp(36px,6.5svh,64px)}
    .fold-logos li{flex-basis:33.33%}
  }
  /* on a phone the logos drift past in one endless row, edge to edge of the panel and fading out at each side. Only a transform
     moves, so the browser runs it by itself; it stops with the films, and once the wall has covered it */
  @media (max-width:600px) and (prefers-reduced-motion:no-preference){
    .fold-logos-w{display:block;grid-row:3;align-self:start;width:calc(100% + 36px);margin:clamp(36px,6.5svh,64px) -18px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
    .js .fold-logos-w{opacity:0;animation:fadeup 600ms var(--po-ease-strong) 400ms forwards}
    .fold-logos,.js .fold-logos{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;margin-top:0;opacity:1;animation:fold-logos 30s linear infinite}
    .fold-logos li,.fold-logos .dup{display:flex;flex:none;padding-inline:18px}
    .hero.held .fold-logos,.hero.covered .fold-logos,.hero.off .fold-logos,.hero .away .fold-logos{animation-play-state:paused}
  }
  /* without the growth (reduced motion, or a screen too short for it) the fold is a plain panel in the flow, as before */
  html:not(.grow) .hero{position:relative;height:auto}
  html:not(.grow) .hero-panel{height:auto;min-height:calc(100svh - 2*var(--gut));display:flex;flex-direction:column}
  html:not(.grow) .hero-in{height:auto;flex:1}
}

/* ---------- the page that rides over the top fold ---------- */
main{position:relative;z-index:1;background:var(--bg);border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:clip}
.sec{padding-top:var(--space)}
.over{position:relative;z-index:1;margin-top:calc(var(--r-xl) * -1);border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--bg)}
.head{margin-bottom:clamp(34px,4.4vw,68px)}
/* no top padding here: each line is its own clipped box, which the trim never reached, and its pull upwards must still pass through */
.head h2{font-size:var(--h2);padding-top:0}
.head h2>span{display:block;overflow:hidden;padding-top:.07em;margin-top:-.07em}
/* and the trim under the last line is set on that line itself: Chrome reaches into a clipped box to trim it, Safari does not */
.head h2>span:last-child{text-box:trim-end cap alphabetic}
.head h2 .li{display:block}
.js .head h2[data-reveal]{opacity:1;transform:none}
.js .head h2 .li{transform:translateY(106%);transition:transform 1100ms var(--po-ease-strong)}
.js .head h2>span+span .li{transition-delay:110ms}
.js .head h2.in .li{transform:none}
.head .po-lede{margin-top:clamp(16px,1.8vw,26px);max-width:40ch}

.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 420ms var(--po-ease),transform 560ms var(--po-ease-strong);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- the swipe: a field of the module's colour rises over the dark and the type inverts ---------- */
/* word, then work: one word on a full field of colour, held in place while the work rides up over it */
.pre-burst{padding-bottom:calc(var(--space) * .62 + var(--r-xl))}
.burst{position:relative;z-index:1;margin-top:calc(var(--r-xl) * -1);border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--acc);color:var(--po-ink)}
/* the card is the whole run of colour down to the work, and the word is what pins: it holds the middle of the screen until the
   work's top edge reaches the foot of its letters, then that edge carries it up and off, touching all the way (no script).
   overflow is clip, not hidden, so the card is not a scroll box and the word can still pin inside it */
.burst{--fs:min(12vw,16rem);--hold:0svh;--foot:calc(var(--fs) * var(--fk))}
.burst-card{--mid:calc(50svh + 38px - (var(--rl) * var(--rn) + var(--rp)) / 2);display:grid;grid-template-rows:minmax(0,1fr);justify-items:center;align-items:start;height:calc(100svh + var(--hold) + var(--foot));padding:var(--mid) var(--po-pad) 0;font-size:var(--fs);text-align:center;overflow:clip}
/* overflow: the word never wraps, and until the typeface arrives it is set in a far wider stand-in that runs off a phone's screen */
.burst-card h2{position:sticky;top:var(--mid);font-size:inherit;line-height:1;white-space:nowrap;text-box:none}
/* the word arrives inside a window one line tall. On the first card two faint copies run past and the third stops; on the second the word rises and "convert." puts on weight */
/* --fk is how far the foot of a capital stands above the foot of its line, in the word's ems; it changes with the line height */
.burst{--rl:1.2em;--rn:1;--rp:0em;--fk:.475}
/* --rl is the height of one line of the word, --rn how many lines it takes (two on a phone); the window is that tall, plus --rp
   of headroom above it: at a phone's tight line height, some devices draw the round capitals a little above the top of the line */
.roll{display:block;height:calc(var(--rl) * var(--rn) + var(--rp));padding-top:var(--rp);overflow:hidden}
.roll-in{display:block;transform:translateY(calc(var(--rl) * var(--rn) * -2))}
.roll-in>span{display:block;height:calc(var(--rl) * var(--rn));line-height:var(--rl)}
.roll-in>span:not(:last-child){opacity:.22}
.roll-one{transform:none}
/* the first card's word, a reel to each letter (main.js builds it): odd letters come up from below and even ones down from above,
   one at a time from the left. Every letter keeps the width it had in the whole word, so the word that lands is unchanged */
.reel{display:block;line-height:var(--rl)}
/* each line of the word is its own window, so a letter on its way into one line never shows across the other */
/* each line's window reaches --rp up into the space above it, so the letters stay exactly where they were */
.reel-ln{display:block;height:calc(var(--rl) + var(--rp));margin-top:calc(-1 * var(--rp));padding-top:var(--rp);overflow:hidden}
.rl{display:inline-block;height:var(--rl);vertical-align:top;text-align:left}
.rl-s{display:block;height:var(--rl);transform:translateY(calc(var(--rl) + .05em + var(--rp)))}
.rl.dn .rl-s{transform:translateY(calc(-1 * var(--rl) - .05em - var(--rp)))}
/* this card is held a little longer too, so the last letters can be watched in before the work rides over them */
#ads{--hold:35svh}
/* the type has one weight, so weight is drawn: an outline in the card's colour thins the letters, one in ink thickens them.
   This is where it ends; main.js runs it from thin to here with the scroll */
.grow-w{-webkit-text-stroke:.03em currentColor;letter-spacing:.02em}
/* this card is held a little longer before its work rides over it, so the change of weight can be watched */
#pages{--hold:36svh}
.js .burst-card:not(.in) .roll-in{transform:translateY(calc(var(--rl) * var(--rn) + .05em + var(--rp)))}
/* on a phone each word takes two lines at twice the size: "Scroll-" breaks at its own hyphen, "Built to" over "convert." */
@media (max-width:600px){.burst{--rl:.92em;--rn:2;--rp:.1em;--fk:.335;--fs:min(23vw,15svh)}.burst-card h2{white-space:normal}}
.burst-card.in .roll-in{transition:transform 1150ms cubic-bezier(.16,1,.3,1)}
.burst-card.in .roll-one{transition-duration:700ms}
/* scrub: main.js sets the word from the scroll position */
.burst-card.scrub .roll-in{transition:none}
/* the work starts where the letters stand, a little above the card's own foot */
.burst-work{position:relative;min-height:100svh;margin-top:calc(-1 * var(--foot));border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--bg);color:#fff}
.tiles{--g:clamp(6px,.7vw,12px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g);padding:calc(var(--gut) + 76px + var(--g)) var(--g) var(--g)}
.tiles>div{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-tile);background:var(--tile)}
.tiles>div:nth-child(n+19){display:none}
.tiles img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
@media (min-width:1600px){.tiles{grid-template-columns:repeat(7,minmax(0,1fr))}.tiles>div:nth-child(n+19){display:block}}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.tiles>div:nth-child(n+17){display:none}}
@media (max-width:600px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles>div:nth-child(n+13){display:none}}
/* the pages: four tiles, each a close-up of a landing page doing one thing. They are drawn here in code and belong to no client.
   Everything inside a tile is sized from the tile's own width (cqw, and 1em is 4cqw), so a close-up is the same picture at
   every size. At rest each tile shows its last frame; .go plays it through */
.clips{--cd:1900ms;--ui-a:var(--c-b);--ui-l:rgba(7,9,11,.11);--ui-m:rgba(7,9,11,.6);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) var(--gap);align-content:center;max-width:1680px;min-height:100svh;margin:0 auto;padding:calc(var(--gut) + 112px) var(--po-pad) 80px;list-style:none}
.clip-v{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-card);container-type:inline-size;background:radial-gradient(120% 90% at 16% 0%,var(--c-base),#0A2C44 48%,#061521)}
.clip-v img{max-width:none}
.clip-v i,.clip-v em{font-style:normal}
/* whose turn it is: a line in the section's colour runs along the foot of the tile */
.clip-v::after{content:"";position:absolute;z-index:4;left:0;bottom:0;width:100%;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%}
.clip.go .clip-v::after{animation:clip-run var(--cd) linear both}
@keyframes clip-run{0%{transform:scaleX(0);opacity:1}90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
/* a tile, its name and its line sit on rows shared along the row, so a name that takes two lines keeps every line level */
.clip{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
.clip h3{margin-top:clamp(14px,1.4vw,20px);text-wrap:balance;font:600 clamp(1.1875rem,1rem + .5vw,1.5rem)/1.15 var(--po-sans);letter-spacing:-.015em}
.clip>p{margin-top:8px;max-width:32ch;font-size:1.0625rem;line-height:1.42;color:var(--po-w72);text-wrap:pretty}
/* the pieces every close-up is made of: a white card, a small label, a bar, a button and a round tick */
.ui{position:absolute;border-radius:1.25em;background:#fff;color:var(--po-ink);font:400 4cqw/1.25 var(--po-sans);box-shadow:0 .5em 1.75em rgba(2,10,18,.42)}
.ui p,.ui dl,.ui dd,.ui ul{margin:0;padding:0}
.ui b{font-weight:600}
.ui-k{display:block;font-size:.84em;color:var(--ui-m)}
.ui-bar{display:block;height:.5em;overflow:hidden;border-radius:99px;background:var(--ui-l)}
.ui-bar i{display:block;height:100%;border-radius:inherit;background:var(--ui-a)}
.ui-btn{display:flex;align-items:center;justify-content:center;height:2.9em;border-radius:.75em;background:var(--acc);color:var(--po-ink);font-weight:600}
.ui-tk{flex:none;display:grid;width:1.5em;height:1.5em;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ui-l)}
.ui-tk svg{width:100%;height:100%;border-radius:50%;background:var(--ui-a);fill:none;stroke:var(--po-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* a page for every campaign: the ad fills the tile, then steps back into the corner as its page comes up under it */
.cm-page,.cm-ad{overflow:hidden;background:#0B1118;color:#fff}
.cm-page>img,.cm-ad>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cm-page::before,.cm-ad::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(rgba(7,9,11,.2),rgba(7,9,11,.7) 34%,rgba(7,9,11,.82))}
.cm-ad::before{background:linear-gradient(rgba(7,9,11,0) 30%,rgba(7,9,11,.86) 78%)}
.cm-page>:not(img),.cm-ad>:not(img){position:relative;z-index:2}
.cm-h{display:block;font-size:2.3em;line-height:1.02;letter-spacing:-.02em}
.cm-page{left:8cqw;top:22cqw;bottom:-8cqw;width:84cqw;padding:25cqw 6cqw 0}
.cm-page p{margin:.8em 0 1.2em;color:rgba(255,255,255,.84)}
.cm-f{display:flex;align-items:center;height:2.9em;margin-bottom:.6em;padding:0 1em;border-radius:.75em;background:#fff;color:var(--ui-m)}
.cm-ad{display:flex;flex-direction:column;justify-content:flex-end;left:15cqw;top:13cqw;width:70cqw;aspect-ratio:4/5;padding:6cqw;transform-origin:0 0;transform:translate(-12cqw,-8cqw) scale(.4286);box-shadow:0 0 0 .2em rgba(255,255,255,.92),0 .5em 1.75em rgba(2,10,18,.42)}
.cm-ad .cm-h{font-size:2.3em}
.cm-ad .ui-btn{align-self:flex-start;height:2.5em;margin-top:.9em;padding:0 1.1em}
.clip.go .cm-page{animation:cm-page var(--cd) both}
.clip.go .cm-ad{animation:cm-ad var(--cd) both}
@keyframes cm-page{0%{transform:none}9%,36%{transform:translateY(112cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}74%,100%{transform:none}}
@keyframes cm-ad{0%{transform:translate(-12cqw,-8cqw) scale(.4286)}9%,36%{transform:none;animation-timing-function:cubic-bezier(.16,1,.3,1)}74%,100%{transform:translate(-12cqw,-8cqw) scale(.4286)}}
/* an easy first question: a finger comes down on one answer, the answer is marked and the bar moves on */
.ct-card{left:8cqw;top:15cqw;bottom:-8cqw;width:116cqw;padding:7cqw}
.ct-card .ui-bar{width:71cqw;margin:.8em 0 1.5em}
.ct-card .ui-bar i{transform:translateX(-75%)}
.ui-q{display:block;font-size:1.6em;line-height:1.1;letter-spacing:-.015em}
.ct-opts{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-top:1.4em}
.ct-opts span{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:7.4em;padding:1.1em;border-radius:.9em;box-shadow:inset 0 0 0 1px var(--ui-l);font-weight:600}
.ct-opts span>svg{position:relative;width:2.6em;height:2.6em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ct-opts .on::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,196,255,.1);box-shadow:inset 0 0 0 .14em var(--ui-a)}
.ct-opts .ui-tk{position:absolute;right:1.1em;top:1.1em;box-shadow:none}
.ct-dot{position:absolute;z-index:3;left:39cqw;top:65cqw;width:8cqw;height:8cqw;margin:-4cqw 0 0 -4cqw;border-radius:50%;background:rgba(7,9,11,.3);box-shadow:0 0 0 .5cqw rgba(255,255,255,.8);opacity:0}
.clip.go .ct-card .ui-bar i{animation:ct-bar var(--cd) both}
.clip.go .ct-opts .on::before,.clip.go .ct-opts .ui-tk{animation:ct-on var(--cd) both}
.clip.go .ct-dot{animation:ct-dot var(--cd) both}
@keyframes ct-bar{0%{transform:translateX(-75%)}8%,52%{transform:translateX(-101%);animation-timing-function:cubic-bezier(.16,1,.3,1)}80%,100%{transform:translateX(-75%)}}
@keyframes ct-on{0%{opacity:1}7%,39%{opacity:0}43%,100%{opacity:1}}
@keyframes ct-dot{0%,10%{opacity:0;transform:translate(15cqw,17cqw)}30%{opacity:1;transform:none}38%{opacity:1;transform:scale(.78)}46%{opacity:1;transform:none}58%,100%{opacity:0;transform:none}}
/* one thing at a time: the bar fills a quarter at a time, the figure keeps count and each part is ticked as it is done */
.cb-card{left:6cqw;top:27cqw;width:88cqw;padding:1.75em 1.75em .6em;font-size:4.4cqw}
.cb-top{display:flex;align-items:baseline;justify-content:space-between}
.cb-top b{font-size:1.6em;letter-spacing:-.015em}
.cb-pct{height:1.25em;overflow:hidden;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--acc-on-light)}
.cb-pct i{display:block;transform:translateY(-80%)}
.cb-pct span{display:block}
.cb-card .ui-bar{margin:1em 0 .5em}
.cb-card li{display:flex;align-items:center;gap:.9em;height:3.1em;border-top:1px solid var(--ui-l);font-weight:600}
.cb-card li:first-child{border-top:0}
.clip.go .cb-card .ui-bar i{animation:cb-fill var(--cd) both}
.clip.go .cb-pct i{animation:cb-pct var(--cd) step-end both}
.clip.go .cb-card li:nth-child(1) svg{animation:cb-t1 var(--cd) both}
.clip.go .cb-card li:nth-child(2) svg{animation:cb-t2 var(--cd) both}
.clip.go .cb-card li:nth-child(3) svg{animation:cb-t3 var(--cd) both}
.clip.go .cb-card li:nth-child(4) svg{animation:cb-t4 var(--cd) both}
@keyframes cb-fill{0%{transform:none}7%,14%{transform:translateX(-101%)}26%,32%{transform:translateX(-75%)}44%,50%{transform:translateX(-50%)}62%,68%{transform:translateX(-25%)}80%,100%{transform:none}}
@keyframes cb-pct{0%{transform:translateY(-80%)}7%{transform:none}20%{transform:translateY(-20%)}38%{transform:translateY(-40%)}56%{transform:translateY(-60%)}74%,100%{transform:translateY(-80%)}}
@keyframes cb-t1{0%{opacity:1;transform:none}7%,22%{opacity:0;transform:scale(.6)}30%,100%{opacity:1;transform:none}}
@keyframes cb-t2{0%{opacity:1;transform:none}7%,40%{opacity:0;transform:scale(.6)}48%,100%{opacity:1;transform:none}}
@keyframes cb-t3{0%{opacity:1;transform:none}7%,58%{opacity:0;transform:scale(.6)}66%,100%{opacity:1;transform:none}}
@keyframes cb-t4{0%{opacity:1;transform:none}7%,76%{opacity:0;transform:scale(.6)}84%,100%{opacity:1;transform:none}}
/* every enquiry checked: what reaches the sales team, on top of the ones before it, the phone and postcode marked as
   checked. An example, with the details part covered */
.ce-b{position:absolute;left:17cqw;top:16.5cqw;width:66cqw;height:12cqw;border-radius:5cqw;background:rgba(255,255,255,.22)}
.ce-b+.ce-b{left:13cqw;top:20cqw;width:74cqw;background:rgba(255,255,255,.5)}
.ce-card{left:9cqw;top:24cqw;width:82cqw;overflow:hidden;padding:6.5cqw 7cqw 0}
.ce-t{display:flex;align-items:center;gap:.5em;font-size:.84em;font-weight:600}
.ce-t i{width:.62em;height:.62em;border-radius:50%;background:var(--ui-a)}
.ce-t span{margin-left:auto;font-weight:400;color:var(--ui-m)}
.ce-n{display:block;margin:.55em 0 .5em;font-size:1.9em;letter-spacing:-.02em}
.ce-card dl div{display:flex;align-items:center;height:2.75em;border-top:1px solid var(--ui-l)}
.ce-card dt{flex:none;width:5.2em;color:var(--ui-m)}
.ce-card dd{display:flex;align-items:center;gap:.6em;font-weight:600}
.ce-card em{padding:.22em .6em;border-radius:99px;background:rgba(0,196,255,.16);font-size:.78em;color:var(--acc-on-light)}
.ce-card .ce-s{display:flex;align-items:center;gap:.6em;height:3.3em;margin:0 -7cqw;padding:0 7cqw;background:rgba(0,196,255,.12);font-weight:600}
.ce-s .ui-tk{width:1.3em;height:1.3em;box-shadow:none}
.clip.go .ce-card{animation:ce-card var(--cd) both}
.clip.go .ce-b{animation:ce-back var(--cd) both}
.clip.go .ce-card dd,.clip.go .ce-s{animation:ce-row var(--cd) both}
.clip.go .ce-card div:nth-child(2) dd{animation-delay:90ms}
.clip.go .ce-card div:nth-child(3) dd{animation-delay:180ms}
.clip.go .ce-card div:nth-child(4) dd{animation-delay:270ms}
.clip.go .ce-s{animation-delay:520ms}
.clip.go .ce-card em{animation:ce-chip var(--cd) both}
.clip.go .ce-card div:nth-child(2) em{animation-delay:150ms}
@keyframes ce-card{0%{opacity:1;transform:none}7%,14%{opacity:0;transform:translateY(-9cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}44%,100%{opacity:1;transform:none}}
@keyframes ce-back{0%{transform:none}7%,14%{transform:translateY(5cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}44%,100%{transform:none}}
@keyframes ce-chip{0%{opacity:1;transform:none}7%,56%{opacity:0;transform:scale(.8);animation-timing-function:cubic-bezier(.16,1,.3,1)}66%,100%{opacity:1;transform:none}}
@keyframes ce-row{0%{opacity:1}7%,34%{opacity:0}50%,100%{opacity:1}}
/* two by two below a small laptop */
@media (max-width:900px){.clips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.clips{gap:26px 10px;padding-bottom:56px}.clip>p{font-size:1rem}}

.flip{--deep:color-mix(in srgb,var(--c-base) 72%,var(--bg))}
.flip-on{background:var(--acc);color:var(--po-ink)}
.flip-off{display:none;background:var(--bg);color:#fff}
.flip-in{display:grid;align-items:center;min-height:100svh;padding:100px 0 48px}
.flip .po-acc{color:var(--deep)}
.flip-off .po-acc{color:var(--acc)}
.flip-live{height:200svh}
.flip-live .flip-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg)}
.flip-live .flip-on,.flip-live .flip-off{display:block;position:absolute;inset:0;overflow:hidden;will-change:transform}
.flip-live .flip-in{position:absolute;inset:0;min-height:0;will-change:transform}

/* ---------- the steps: one pinned panel; at each step a field of a new colour rises and brings the next line ---------- */
.step{background:var(--bg);color:#fff;--deep:color-mix(in srgb,var(--c-base) 78%,var(--bg))}
.step.tint{background:var(--acc);color:var(--po-ink)}
.step.tint .po-acc{color:var(--deep)}
.step-in{display:grid;align-items:center;min-height:76svh;padding:100px 0 48px}
/* one screen of scrolling for each slide that rises, then 2.3 more with the last one held while its logo is made (SCRUB in main.js) */
.steps-live{height:530svh}
.steps-live .steps-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg)}
.steps-live .step{position:absolute;inset:0;overflow:hidden;will-change:transform}
.steps-live .step+.step{border-radius:var(--r-xl) var(--r-xl) 0 0}
.steps-live .step-in{position:absolute;inset:0;min-height:0;will-change:transform}
.step-in{position:relative}
.step .po-wrap{display:grid;gap:clamp(16px,4svh,44px)}
.step-h,.final-logo,.final-p{position:relative;z-index:1}
/* a faint dot matrix on the right of the first word slide. main.js lets a few dots at a time catch the light */
.spark{position:absolute;inset:0;pointer-events:none}
.spark::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.13) 1.1px,transparent 1.7px) 0 0/28px 28px;-webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 88%);mask-image:linear-gradient(100deg,transparent 40%,#000 88%)}
.spark canvas{position:absolute;inset:0;width:100%;height:100%}
.step-h{line-height:.8;font-size:min(calc(var(--cw) / 8.45),25svh)}
/* one word per slide is a window onto the brand's glass. The letters never move: the glass around them is painted in the slide's own colour */
/* the glass runs a little past the letters on every side, so no letter touches its edge */
.fx{position:relative;display:inline-block;isolation:isolate;line-height:1;padding:.08em .04em 0;margin:-.18em -.04em -.1em;pointer-events:none}
.fx-t{position:relative;z-index:1;display:block;margin:calc(-.08em - 4px) calc(-.04em - 4px) -4px;padding:calc(.08em + 4px) calc(.04em + 4px) 4px}
/* the general glass rule clips its box, which would knock an inline word off its baseline */
.fx[data-glass]{overflow:visible}
/* on the dark slide the letters hold the turning colour and the glass adds its ribs and light on top, so no letter ever falls into the dark.
   glass.js cuts the letters out of the glass itself and paints the rest in the slide's colour; the text here is only read, not seen */
.fx-lit .fx-t{color:transparent}
.fx-bl{display:inline-block;width:0;height:0}
.no-glass .fx-t{color:inherit}
/* the last panel: the showcase's own hero, logo centred on the glass */
/* stills float round the logo at different depths, turned in towards it. main.js places each one clear of the logo and the copy, and leans the set to the mouse */
.float{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;perspective:1400px}
.float-lean{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1100ms var(--po-ease-strong)}
/* the sides of the panel fall away to the page black, over the glass and the pieces, so the logo is the brightest thing on it */
.float::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--ink-rgb),.96),rgba(var(--ink-rgb),.56) 12%,rgba(var(--ink-rgb),0) 32%,rgba(var(--ink-rgb),0) 68%,rgba(var(--ink-rgb),.56) 88%,rgba(var(--ink-rgb),.96))}
.ft{--off:-260px;position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--a,1);opacity:0;transform:translate(-50%,-50%) translateZ(calc(var(--z,0px) + var(--off))) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));transition:opacity 900ms var(--po-ease) calc(var(--n,0) * 70ms),transform 1500ms var(--po-ease-strong) calc(var(--n,0) * 70ms)}
.step.on .ft{--off:0px;opacity:1}
/* every floating piece is a cut-out with its depth already in the file: the further back it sits, the smaller, darker and softer it was saved */
.ft img{display:block;width:100%;height:100%;object-fit:contain}
/* a product takes a little of the colour of the moment: the colour is laid over it lightly, as coloured light, held to its own outline (--m is the same picture). It keeps its own colours */
.float.lit .ft-cut::after{content:"";position:absolute;inset:0;background:var(--c-w1);mix-blend-mode:multiply;opacity:.28;pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.step.last.on .ft{animation:bob var(--t,7s) ease-in-out calc(var(--n,0) * -1.3s) infinite alternate}
@keyframes bob{from{translate:0 -9px}to{translate:0 11px}}
@media (prefers-reduced-motion:reduce){.ft{--off:0px;opacity:1;transition:none}.step.last.on .ft{animation:none}}
.step .po-wrap.final{justify-items:center;text-align:center;gap:clamp(20px,3.6svh,38px)}
.final-logo{display:block;width:min(42vw,600px)}
/* the merge is drawn by logoMerge() in an overlay on the logo's own viewBox. These rules swap the overlay for the real
   logo, hold back the line of copy, and keep the floating stills away until the three names have closed up */
.lm{position:relative}
.lm>.lm-ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.lm.lm-play>.lm-ov{display:block}
.lm-pre>.po-logo,.lm-play>.po-logo,.lm-pre~.final-p{opacity:0}
.lm-play~.final-p{animation:lm-in 450ms var(--po-ease) 2050ms both}
@keyframes lm-in{from{opacity:0;transform:translateY(16px)}}
.step.last.lm-wait .ft{--off:-260px;opacity:0}
/* pinned, main.js sets all of this from the scroll position, so nothing here may run on its own clock */
/* the logo panel starts dark and its glass comes up once the three names have closed into the logo */
.step.last::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--bg);opacity:0;transition:opacity 700ms var(--po-ease)}
.step.last.lm-wait::after{opacity:1}
.step.last.scrub::after{opacity:var(--veil,1);transition:none}
.step.last.scrub .ft,.step.last.scrub .final-q{transition:none}
.step.last.scrub .final-p{animation:none}
/* "pay." on the second slide: an outline that fills with ink spreading out of its own full stop, once (main.js adds go, then done) */
.pay-w{position:relative;display:inline-block;white-space:nowrap}
.pay-t{color:transparent;-webkit-text-stroke:max(1.5px,.016em) var(--po-ink)}
/* its own layer, so the fill growing with the scroll only moves the edge of the circle and never repaints the letters */
.pay-f{position:absolute;left:-.1em;top:-.25em;padding:.25em .1em;pointer-events:none;will-change:transform}
.js .pay-w:not(.done) .pay-f{clip-path:circle(0 at 93% 73%)}
.pay-w.go .pay-f{animation:pay-fill 950ms cubic-bezier(.6,0,.2,1) both}
.pay-w.scrub .pay-f{animation:none}
@keyframes pay-fill{from{clip-path:circle(0 at 93% 73%)}to{clip-path:circle(140% at 93% 73%)}}
/* the answer shares the logo's place on the slide. main.js clears it (q-out), then takes it away (q-done) as the merge starts */
.step.last .step-in>.po-wrap{grid-area:1/1}
.final-q{transition:opacity 280ms var(--po-ease)}
.final-q .ln{display:block}
.q-out .final-q{opacity:0}
.q-done .final-q,html:not(.js) .final-q{display:none}
.q-one{display:inline-block;height:.7em;margin:0 .06em;vertical-align:baseline}
@supports (height:1cap){.q-one{height:1cap}}
.q-one svg{display:block;height:100%;width:auto}
.q-one .po-dot{display:none}
.final-p{font-weight:500;font-size:clamp(1.25rem,.85rem + 1.25vw,2.125rem);line-height:1.15;letter-spacing:-.02em;max-width:25em;text-wrap:balance}
.enh{color:var(--acc);white-space:nowrap}
.enh-up{display:inline-block;width:.5em;height:.78em;margin-left:.14em;vertical-align:-.05em;overflow:hidden}
.enh-up svg{display:block;width:100%;height:100%}
.step.last.on .enh-up svg{animation:lift 2200ms var(--po-ease-strong) 300ms infinite}
@keyframes lift{0%,10%{transform:translateY(0)}46%{transform:translateY(-130%)}46.01%{transform:translateY(130%)}84%,100%{transform:translateY(0)}}
@media (max-width:760px){
  .step-h{font-size:min(calc(var(--cw) / 6.5),11.5svh)}
  .step-h .ln{white-space:normal}
  .final-logo{width:60vw}
}
/* on a phone the lines on the word slides break more often and the type is about half as large again, so it fills the slide.
   Sized so the longest word ("generation") still fits on the narrowest phones */
@media (max-width:600px){
  .step-h{font-size:min(calc(var(--cw) / 4.55),15svh);line-height:.82}
  .step-h .ln{display:block}
}

/* ---------- the count and the square arrow buttons that the brands row and the team row share ---------- */
.cs-count{font-weight:600;font-size:1rem;line-height:1;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.cs-count b{color:#fff;font-weight:600}
.cs-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--r-s);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background-color 200ms var(--po-ease),transform 160ms var(--po-ease)}
.cs-btn svg{width:14px;height:14px}
.cs-btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.cs-btn:not([disabled]):hover{background:rgba(255,255,255,.2)}}


/* ---------- AI: a bento grid. Two wide cards and four upright ones, every service on show with its picture, name and line ---------- */
/* behind the whole AI module: a grey pattern of characters on black, drawn by main.js on a layer one screen tall that stays
   put while the module scrolls over it, kept very faint */
.ai-bg{position:sticky;top:0;z-index:-1;height:100svh;margin:calc(var(--space) * -1) 0 calc(var(--space) - 100svh);border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;pointer-events:none}
/* the light (.09) and the characters (.26) are mixed onto the ground inside the one canvas */
.ai-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.ai-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0,rgba(var(--ink-rgb),0) 20%)}
/* the layer takes up no room, so at the foot of the module it hangs most of a screen below it: cut it off at the module's own edge */
.ai{overflow:clip}
/* the section after each of these rides up over its last few pixels, so both keep that much clear at the foot */
.ai,#what-we-do{padding-bottom:var(--r-xl)}
/* room under the "Also made here" panel, so it never sits against the top of the next module */
.ai{padding-bottom:calc(var(--r-xl) + clamp(56px,6.5vw,104px))}
.ai .head{text-align:center}
.ai .head .po-lede{margin-inline:auto}
/* the list sits on its own dark panel so the drifting characters never run behind the words */
.also-w{margin-top:clamp(56px,6.5vw,104px);padding:clamp(26px,3.2vw,48px) clamp(22px,3.2vw,48px) clamp(14px,2vw,30px);border-radius:var(--r-card);background:var(--bg);box-shadow:inset 0 0 0 1px var(--po-hair)}
.also-t{font-size:1.0625rem;color:var(--po-w72)}
.also{list-style:none;margin:clamp(18px,2vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3.4vw,56px)}
.also li{display:flex;align-items:center;gap:16px;padding:clamp(18px,1.7vw,24px) 0;border-top:1px solid var(--po-hair);font-size:1.0625rem;line-height:1.4}
.also svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
@media (max-width:860px){
  .also{grid-template-columns:1fr}
}
.bento{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,13.4vw,214px);grid-template-areas:"film film pres prod" "film film pres prod" "voice brand vol vol" "voice brand vol vol"}
.bn{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;border-radius:var(--r-card);background:#101316}
.bn-film{grid-area:film}.bn-pres{grid-area:pres}.bn-prod{grid-area:prod}.bn-voice{grid-area:voice}.bn-brand{grid-area:brand}.bn-vol{grid-area:vol}
.bn img,.bn video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a card's film opens on the frame its picture shows, so it fades in over the picture once it is running */
.bn video{opacity:0;transition:opacity .5s}.bn video.on{opacity:1}
/* where each picture holds its subject, kept clear of the words at the foot: the house and the lake are brought up a little */
.bn-brand img,.bn-voice img,.bn-voice video{transform-origin:50% 100%}
.bn-brand img{transform:scale(1.2)}.bn-voice img,.bn-voice video{transform:scale(1.35)}
/* enhancements: the finished picture lies whole underneath; the snapshot it started as sits over its left side, cut by a white
   line that sways from a fifth of the way across to four fifths and back, on its own. The snapshot fades out before the words,
   so the caption reads on one picture. Nothing here can be dragged */
.bn-split>img{z-index:-1}
/* the cut is a window the width of the card slid left, with the snapshot slid back by the same amount so it stays put. Both are
   transforms, so the browser sways them on its own thread and no frame of it is painted again */
.bn-cut{position:absolute;inset:0;overflow:hidden;transform:translateX(-50%);animation:bn-cut 5341ms cubic-bezier(.37,0,.63,1) infinite alternate}
.bn-cut img{-webkit-mask-image:linear-gradient(#000 50%,transparent 62%);mask-image:linear-gradient(#000 50%,transparent 62%);transform:translateX(50%) scale(1.2);animation:bn-cut-in 5341ms cubic-bezier(.37,0,.63,1) infinite alternate}
.bn-cut::after{content:"";position:absolute;top:0;bottom:46%;right:0;width:2px;background:linear-gradient(#fff 80%,rgba(255,255,255,0))}
@keyframes bn-cut{from{transform:translateX(-80%)}to{transform:translateX(-20%)}}
@keyframes bn-cut-in{from{transform:translateX(80%) scale(1.2)}to{transform:translateX(20%) scale(1.2)}}
.bn-split.away .bn-cut,.bn-split.away .bn-cut img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.bn-cut,.bn-cut img{animation:none}}
/* one neutral shade rising from the foot, so the words read on any picture; the colour is the picture's own */
.bn::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(0deg,rgba(var(--ink-rgb),.84) 0,rgba(var(--ink-rgb),.56) 26%,rgba(var(--ink-rgb),0) 56%)}
.bn-c{position:relative;z-index:1;width:100%;padding:clamp(18px,1.7vw,26px)}
/* the name is set in Pulp, sentence case: a label for the picture, where the module's headline keeps the capitals */
.bn-c h3{font:600 clamp(1.3125rem,1.05rem + .6vw,1.625rem)/1.15 var(--po-sans);letter-spacing:-.015em}
.bn-c p{margin-top:8px;max-width:32ch;font-size:1.0625rem;line-height:1.42;color:rgba(255,255,255,.88);text-wrap:pretty}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;grid-template-areas:"film film" "pres prod" "voice brand" "vol vol"}
  .bn{aspect-ratio:4/5}.bn-film,.bn-vol{aspect-ratio:16/10}
}
/* on a phone one card to a row, wide enough for its line to read */
@media (max-width:560px){
  .bento{grid-template-columns:1fr;grid-template-areas:none;gap:10px}
  .bn,.bn-film,.bn-vol{grid-area:auto;aspect-ratio:4/3}
  .bn-c{padding:16px}.bn-c h3{font-size:1.3125rem}
  .bn-prod img,.bn-prod video{object-position:50% 80%}
  /* the words fill more of a short card, so the shade rises further */
  .bn::after{background:linear-gradient(0deg,rgba(var(--ink-rgb),.86) 0,rgba(var(--ink-rgb),.6) 36%,rgba(var(--ink-rgb),0) 74%)}
}

/* ---------- what we do: the channels as one moving band, then four open rows of type ---------- */
.chan{margin-inline:calc(var(--po-pad) * -1);overflow:hidden;border-block:1px solid var(--po-hair);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.chan-t{display:flex;width:max-content;animation:chan 40s linear infinite}
.chan.away .chan-t,.steps.away .step.last.on .ft,.steps.away .step.last.on .enh-up svg{animation-play-state:paused}
.chan ul{display:flex;flex:none;margin:0;padding:clamp(20px,2.2vw,30px) 0;list-style:none}
.chan li{display:flex;align-items:center;gap:.55em;padding-inline:clamp(22px,2.6vw,40px);font:600 clamp(1.125rem,1rem + .4vw,1.3125rem)/1 var(--po-sans);white-space:nowrap}
.chan svg{flex:none;width:1.3em;height:1.3em;fill:currentColor}
@keyframes chan{to{transform:translateX(-50%)}}
.svc{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;border-bottom:1px solid var(--po-hair)}
.svc>li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,3.4vw,52px) 0;border-top:1px solid var(--po-hair)}
.svc h3{font-size:clamp(2.75rem,1.2rem + 5.4vw,6.75rem);line-height:.86}
.svc p{font-size:var(--po-text-lead);line-height:1.4;color:var(--po-w72);max-width:30ch;text-wrap:pretty}
@media (max-width:860px){
  .svc>li{grid-template-columns:1fr;gap:16px}
}

/* ---------- numbers, inside the swipe ---------- */
.nums{display:grid;gap:clamp(24px,3.4vw,52px)}
/* the partner marks run in a row above the heading, closer to it than the heading is to the figures */
.nums-top{display:grid;gap:clamp(14px,1.6vw,24px)}
.nums-h{font-size:var(--po-text-h2);line-height:.86}
.nums-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:0}
.nums-row dt{line-height:.78;white-space:nowrap;font-size:min(calc(var(--cw) / 5.6),28svh)}
.nums-by{margin-top:clamp(10px,1.2vw,18px);font-size:var(--po-text-lead);line-height:1.3;font-weight:500}
.nums-pt{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.2vw,32px);font-size:1rem;line-height:1.2;font-weight:600}
.nums-pt li{display:flex;align-items:center;gap:.55em;white-space:nowrap}
.nums-pt svg{flex:none;width:1.25em;height:1.25em;fill:currentColor}
.nums-row dd{margin:clamp(12px,1.4vw,20px) 0 0;white-space:nowrap;font-size:var(--po-text-lead);line-height:1.3;font-weight:500}
/* phones: the first figure leads on its own row, the other two share the row under it at a smaller size, and the partner marks
   drop below the figures, a little faded, so the heading and one number are what the eye meets first */
@media (max-width:820px){
  .nums{gap:clamp(36px,6svh,56px)}
  .nums-top{display:contents}
  .nums-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4svh,36px) 20px}
  .nums-row div:first-child{grid-column:1 / -1}
  .nums-row dt{font-size:min(calc(var(--cw) / 4.6),10svh)}
  .nums-row div:first-child dt{font-size:min(calc(var(--cw) / 3.3),15svh)}
  .nums-row dd{margin-top:8px;font-size:1.0625rem;white-space:normal}
  .nums-pt{order:3;gap:8px 20px;opacity:.72}
}

/* ---------- people ---------- */
/* the team is one row that runs off the right-hand edge; the arrows, a drag or the keyboard move it along */
.ppl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ppl-nav{display:flex;gap:10px;padding-bottom:.4em}
.ppl-nav .cs-btn[disabled]{opacity:.35;cursor:default}
.people{display:flex;gap:var(--gap);margin-inline:calc(var(--po-pad) * -1);padding-inline:var(--po-pad);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--po-pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.people::-webkit-scrollbar{display:none}
.po-person{border-radius:var(--r-card)}
.po-person img{transition:transform 900ms var(--po-ease-strong)}
@media (hover:hover) and (pointer:fine){.po-person:hover img{transform:scale(1.04)}}
.people:focus-visible{outline:2px solid #fff;outline-offset:6px}
/* the last card in the row: no photo, the section's colour, so whoever reaches the end knows the people before it are not the whole team */
.ppl-more{background:var(--acc)}
.ppl-more figcaption{background:none;color:var(--po-ink);padding:clamp(18px,1.8vw,24px)}
.ppl-more .po-h{display:block;font-size:clamp(2.25rem,1.6rem + 1.6vw,3.25rem);line-height:.9;color:inherit}
.people .po-person{flex:none;width:calc((var(--cw) - 4 * var(--gap)) / 5);margin:0;scroll-snap-align:start}
@media (max-width:1100px){.people .po-person{width:calc((var(--cw) - 3 * var(--gap)) / 3.6)}}
@media (max-width:640px){.people .po-person{width:58vw}.ppl-head{flex-direction:column;align-items:stretch;gap:18px}.ppl-nav{padding-bottom:0}}

/* ---------- contact: a glass stage with the form on a glass card ---------- */
.cta{border-radius:var(--r-xl);display:grid;justify-items:center;gap:clamp(28px,3.6vw,52px);padding:clamp(56px,9vw,150px) clamp(20px,4vw,64px);text-align:center}
.cta h2{font-size:clamp(3rem,1.2rem + 7vw,8.5rem)}
.cta h2 span{display:block;white-space:nowrap}
/* the form: a popup the size of the screen */
.talk{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--c-ground);color:#fff;overflow-y:auto;overscroll-behavior:contain}
.talk::backdrop{background:#07090B}
.talk[open]{animation:talk-in 260ms var(--po-ease) both}
@keyframes talk-in{from{opacity:0;transform:translateY(18px)}}
/* closing runs the same path backwards, speeding up as it goes where opening slowed down, and the dark behind it fades both ways */
.talk[open].out{animation:talk-out 220ms cubic-bezier(.4,0,1,1) both}
@keyframes talk-out{to{opacity:0;transform:translateY(18px)}}
.talk[open]::backdrop{animation:talk-bg 260ms var(--po-ease) both}
.talk[open].out::backdrop{animation:talk-bg 220ms cubic-bezier(.4,0,1,1) reverse both}
@keyframes talk-bg{from{opacity:0}}
.talk-on{overflow:hidden}
/* without JavaScript the closing button is a plain link to #talk, and that is what opens the form */
html:not(.js) .talk:target{display:block;z-index:300}
html:not(.js) .talk-x{display:none}
.talk-x{position:fixed;z-index:1;top:calc(var(--gut) + 16px);right:clamp(16px,3vw,44px);display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:var(--r-s);background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.talk-x svg{width:16px;height:16px}
.talk-x:active{transform:scale(.96)}
.talk-in{display:grid;align-content:center;gap:clamp(32px,5svh,60px);width:min(100%,760px);min-height:100%;margin-inline:auto;padding:88px clamp(20px,4vw,40px) 48px}
.talk h2{font-size:clamp(2.75rem,1.4rem + 5vw,5.5rem);line-height:.9}
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4svh,34px) 28px}
.form .wide{grid-column:1/-1}
.field{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
.field label{font-weight:500;font-size:1rem;line-height:1.3;color:rgba(255,255,255,.74)}
.field input,.field textarea{width:100%;min-height:52px;padding:0;border:0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.5);color:#fff;font:500 1.375rem/1.3 var(--po-sans);transition:box-shadow 160ms var(--po-ease)}
.field input:focus,.field textarea:focus{outline:0;box-shadow:inset 0 -2px 0 var(--acc)}
.field input[aria-invalid="true"]{box-shadow:inset 0 -2px 0 #fff}
.field textarea{display:block;min-height:0;padding:10px 0 12px;resize:none;field-sizing:content}
.field .err{font-size:1rem;font-weight:600;line-height:1.3}
.field .err:empty{display:none}
.form .po-btn{justify-self:start;margin-top:6px;cursor:pointer!important}
.form-note{font-size:1.0625rem;font-weight:600;line-height:1.45;padding:14px 16px;border-radius:var(--r-s);background:rgba(255,255,255,.14)}
.form-note:empty{display:none}
.field label i{font-style:normal;color:rgba(255,255,255,.55)}
.field input[type="tel"]{font-variant-numeric:tabular-nums}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-legal{font-size:1rem;line-height:1.45;color:rgba(255,255,255,.62)}
.form-legal a{color:#fff;text-decoration-thickness:1px;text-underline-offset:4px}
.form[aria-busy="true"] .po-btn{opacity:.6;pointer-events:none}
@media (max-width:600px){.form{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.talk[open],.talk[open]::backdrop,.nav.open .nav-menu,.nav.open .nav-menu>*,.pg.open .pg-menu{animation:none}}
@media (max-width:860px){.cta{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;overflow:hidden;padding-top:clamp(56px,7vw,104px);--gl:color-mix(in srgb,var(--c-a) 72%,var(--c-b));background:radial-gradient(50% 70% at 0% 100%,color-mix(in srgb,var(--gl) 42%,transparent),transparent 72%),radial-gradient(52% 78% at 100% 100%,color-mix(in srgb,var(--c-b) 50%,transparent),transparent 72%),var(--bg)}
/* full width; the left edge sits under the logo in the top bar, the right edge under its button */
.foot-in{padding-inline:calc(var(--gut) + clamp(20px,4.2vw,64px))}
.foot-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;padding-bottom:clamp(28px,3vw,44px);border-bottom:1px solid var(--po-hair)}
.foot-grp{font-size:1rem;line-height:1.2;color:var(--po-w55)}
.foot-lp{display:block;width:clamp(128px,10.5vw,164px);margin-top:14px}
.foot-lp img{display:block;width:100%;height:auto}
.foot-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
/* a plain link, never the pill: the pill is for calls to action */
.foot-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--po-w72);font-weight:500;text-decoration:underline;text-decoration-color:var(--po-hair);text-decoration-thickness:1px;text-underline-offset:5px;transition:color 160ms var(--po-ease),text-decoration-color 160ms var(--po-ease)}
.foot-go svg{width:13px;height:13px;flex:none;transition:transform 260ms var(--po-ease-strong)}
.foot-go:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.foot-go:hover{color:#fff;text-decoration-color:currentColor}.foot-go:hover svg{transform:translate(2px,-2px)}}
.legal{margin-top:clamp(14px,1.6vw,22px);font-size:1rem;line-height:1.5;color:var(--po-w55);max-width:56ch}
.legal-l{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:6px}
.legal-l a,.legal-l button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--po-w72);font:inherit;text-decoration:underline;text-decoration-color:var(--po-hair);text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.legal-l [hidden]{display:none}
@media (hover:hover) and (pointer:fine){.legal-l a:hover,.legal-l button:hover{color:#fff;text-decoration-color:currentColor}}
.foot-soc{display:flex;gap:2px;list-style:none;margin:0 -10px -10px 0;padding:0;flex:none}
.foot-soc a{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-s);color:rgba(255,255,255,.5);transition:color 160ms var(--po-ease)}
.foot-soc svg{width:25px;height:25px;fill:currentColor}
@media (hover:hover) and (pointer:fine){.foot-soc a:hover{color:#fff}}
.foot-one{display:block;margin-top:clamp(48px,6.4vw,104px)}
.foot-one svg{display:block;width:100%;height:auto}
.foot-one .po-dot{display:none}
@media (max-width:700px){.foot-top{flex-direction:column;align-items:flex-start}.foot-side{align-items:flex-start}.foot-soc{margin:0 0 0 -11px}}
@media (max-width:860px){.foot-in{padding-inline:calc(var(--gut) + 18px)}}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js .hero h1 .ln>span,.js .hero .po-lede,.js .fold-logos{opacity:1;transform:none;transition:none;animation:none}
  .js .burst-card .roll-in{transform:translateY(calc(var(--rl) * var(--rn) * -2))!important;transition:none!important}.js .burst-card .roll-one{transform:none!important}
  .js .head h2 .li{transform:none;transition:none}
  .chan{-webkit-mask-image:none;mask-image:none}.chan-t{animation:none;width:auto}.chan ul{flex-wrap:wrap;justify-content:center;padding-inline:var(--po-pad)}.chan ul+ul{display:none}
  .step.last.on .enh-up svg{animation:none}
}

.award{--ah:clamp(40px,5.4svh,50px);display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 0 var(--fg,30px)}
.award-t{margin:0;font-weight:500;font-size:1rem;line-height:1.2;color:#fff;text-wrap:balance}
.award-r{display:flex;align-items:center;gap:clamp(12px,1.5vw,20px)}
.award-l{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);margin:0;padding:0;list-style:none}
.award-l img{display:block;height:calc(var(--ah) * var(--k,1));width:auto}
.award b{font-weight:700;color:var(--acc);margin-left:.2em}
.crest{--crest:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2276%22 viewBox=%220 0 32 76%22 fill=%22none%22%3E%3Cpath d=%22M25.3596 3.42663C23.9713 6.04849 21.729 8.60681 18.5906 8.85671C17.909 5.51903 20.7193 2.60915 23.5253 1.38929C24.5014 0.965725 25.5363 0.690409 26.5922 0.567575C26.2515 1.55024 25.8434 2.51173 25.3596 3.42663ZM10.8161 11.415C11.8468 14.4096 12.6461 18.6453 10.7067 21.4535C6.35252 18.7766 6.82791 12.2706 9.37733 8.06041C9.94106 9.1405 10.4207 10.2672 10.8161 11.4193V11.415ZM8.66214 30.3229C4.39207 28.8786 3.13419 23.6137 3.81992 19.5009C3.95455 18.7046 4.13124 18.0099 4.38366 17.2433C7.27384 20.6487 10.164 25.8882 8.66214 30.3229ZM4.02607 29.8019C6.35252 32.2374 8.89353 35.9224 8.35924 39.4931C4.30793 39.0822 1.9352 35.0245 1.31678 31.331C1.09381 29.9968 1.06016 28.6287 1.21161 27.286C2.21707 28.0441 3.15943 28.8913 4.02607 29.8019ZM3.35716 39.8192C6.31465 41.9201 9.52457 44.8427 9.87375 48.7225C4.14807 49.4426 0.521664 42.8223 0 37.9174C1.16954 38.4511 2.2928 39.0949 3.35716 39.8192ZM13.1384 57.4183C8.36345 59.1972 3.7442 55.0717 1.70803 50.8488C1.39251 50.1838 1.13588 49.5527 0.900291 48.8538C1.57761 49.0021 4.27428 49.756 4.69497 50.0398C8.25407 51.5731 11.7332 53.5765 13.1384 57.414V57.4183ZM7.93854 59.7945C11.6196 60.4425 15.2166 61.5353 17.5935 64.6189C17.7197 64.801 17.8333 64.9789 17.9427 65.1695C17.1602 65.6651 16.5039 65.9277 15.5994 66.1183C10.8077 67.012 6.32307 63.4752 3.95455 59.5149C5.28395 59.4895 6.62176 59.5911 7.93854 59.7945ZM16.689 3.5537C17.0172 6.64571 16.8783 10.8898 14.4046 13.1474C10.8245 9.61913 12.6966 3.47746 16.0538 0C16.3525 1.1648 16.5628 2.35501 16.689 3.5537ZM12.9575 68.6427C16.6512 68.4267 21.5397 68.99 24.1985 71.8914C21.0559 75.1359 16.0117 74.2507 12.5031 72.1456C11.1863 71.3493 10.0042 70.3793 8.94401 69.2569C10.2818 68.9307 11.586 68.7274 12.9575 68.6427ZM19.7643 16.4809C16.4703 16.9595 13.273 18.5055 12.9196 22.2032C16.0327 22.5548 19.2973 20.8902 21.4345 18.7088C22.0655 18.065 22.6251 17.3576 23.1047 16.5952C22.0024 16.4131 20.8792 16.3665 19.7643 16.4851V16.4809ZM10.9802 30.6279C14.9852 30.4161 18.7252 27.0106 20.3407 23.296C16.1169 23.296 10.6604 25.5663 10.9802 30.6279ZM15.5994 31.3141C12.44 32.9109 9.84009 35.5116 10.6983 39.3406C14.6907 38.4342 17.9385 34.1985 18.9356 30.306C17.787 30.5008 16.6596 30.827 15.5952 31.3098L15.5994 31.3141ZM15.7004 39.0187C12.9743 41.0433 10.4417 44.5801 12.1455 48.1083C15.9612 46.5073 18.5149 41.4669 18.8977 37.4176C17.7702 37.8158 16.689 38.341 15.7004 39.0144V39.0187ZM15.2545 56.3594C18.8682 54.0679 20.5258 48.7225 20.2397 44.4233C16.1085 46.7784 12.4232 51.8061 15.2545 56.3594ZM20.2986 53.6697C18.2751 56.6389 17.1939 60.0528 19.4067 63.2507C19.4488 63.3355 19.7391 63.6319 19.819 63.7124C23.0163 60.7475 23.8577 55.1183 22.8943 50.9674C21.9267 51.7595 21.0432 52.6574 20.2986 53.6697ZM23.9671 9.79702C20.6983 9.7589 17.3411 10.7712 16.424 14.3037C19.4067 15.1424 22.806 14.0538 25.225 12.2495C25.9444 11.7115 26.6048 11.1016 27.1938 10.4197C26.1505 10.0723 25.0651 9.85209 23.9671 9.79702ZM24.4887 59.8241C22.8691 63.3948 22.4189 67.389 25.7677 70.0955C28.4727 66.652 28.2666 60.6797 26.6469 56.6601C25.8013 57.6428 25.0735 58.6635 24.4887 59.8241Z%22 fill=%22white%22 fill-opacity=%221%22%3E%3C/path%3E%3Cpath d=%22M18.5606 8.89486C15.4769 13.2915 13.5879 17.0696 11.922 22.182C9.23373 31.4411 9.09911 38.862 11.4466 48.2185C13.1799 54.2162 15.2918 58.5492 18.9602 63.5854C22.6834 68.414 26.1668 71.6119 31.2908 74.8945C31.0637 75.263 30.8365 75.6315 30.6093 76C25.3716 72.5903 21.8168 69.2781 18.0389 64.28C14.3326 59.0871 12.2207 54.6312 10.5337 48.4642C8.28296 38.9255 8.5522 31.3818 11.5139 22.0423C13.3187 16.9468 15.3212 13.2067 18.5648 8.89062L18.5606 8.89486Z%22 fill=%22white%22 fill-opacity=%221%22%3E%3C/path%3E%3C/svg%3E");flex:none;height:var(--ah);aspect-ratio:32/76;background:var(--acc);-webkit-mask:var(--crest) center/contain no-repeat;mask:var(--crest) center/contain no-repeat}
.crest-r{--crest:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2276%22 viewBox=%220 0 32 76%22 fill=%22none%22%3E%3Cpath d=%22M5.93643 3.42663C7.32473 6.04849 9.56704 8.60681 12.7054 8.85671C13.387 5.51903 10.5767 2.60915 7.77067 1.38929C6.79465 0.965725 5.75974 0.690409 4.70379 0.567575C5.04455 1.55024 5.45263 2.51173 5.93643 3.42663ZM20.4799 11.415C19.4492 14.4096 18.6499 18.6453 20.5893 21.4535C24.9435 18.7766 24.4681 12.2706 21.9187 8.06041C21.355 9.1405 20.8754 10.2672 20.4799 11.4193V11.415ZM22.6297 30.3229C26.8997 28.8786 28.1576 23.6137 27.4719 19.5009C27.3373 18.7046 27.1606 18.0099 26.9081 17.2433C24.018 20.6487 21.1278 25.8882 22.6297 30.3229ZM27.2699 29.8019C24.9435 32.2374 22.4025 35.9224 22.9368 39.4931C26.9881 39.0822 29.3608 35.0245 29.9792 31.331C30.2022 29.9968 30.2359 28.6287 30.0844 27.286C29.0789 28.0441 28.1366 28.8913 27.2699 29.8019ZM27.9389 39.8192C24.9814 41.9201 21.7714 44.8427 21.4223 48.7225C27.1479 49.4426 30.7744 42.8223 31.296 37.9174C30.1265 38.4511 29.0032 39.0949 27.9389 39.8192ZM18.1577 57.4183C22.9326 59.1972 27.5518 55.0717 29.588 50.8488C29.9035 50.1838 30.1601 49.5527 30.3957 48.8538C29.7184 49.0021 27.0217 49.756 26.601 50.0398C23.042 51.5731 19.5628 53.5765 18.1577 57.414V57.4183ZM23.3575 59.7945C19.6764 60.4425 16.0794 61.5353 13.7025 64.6189C13.5763 64.801 13.4627 64.9789 13.3533 65.1695C14.1358 65.6651 14.7921 65.9277 15.6966 66.1183C20.4883 67.012 24.9729 63.4752 27.3415 59.5149C26.0121 59.4895 24.6743 59.5911 23.3575 59.7945ZM14.6028 3.5537C14.2746 6.64571 14.4135 10.8898 16.8872 13.1474C20.4673 9.61913 18.5952 3.47746 15.238 0C14.9393 1.1648 14.729 2.35501 14.6028 3.5537ZM18.3386 68.6427C14.6448 68.4267 9.75636 68.99 7.09755 71.8914C10.2402 75.1359 15.2843 74.2507 18.7929 72.1456C20.1097 71.3493 21.2919 70.3793 22.352 69.2569C21.0142 68.9307 19.71 68.7274 18.3386 68.6427ZM11.5317 16.4809C14.8257 16.9595 18.023 18.5055 18.3764 22.2032C15.2633 22.5548 11.9987 20.8902 9.86153 18.7088C9.23048 18.065 8.67096 17.3576 8.19136 16.5952C9.29359 16.4131 10.4168 16.3665 11.5317 16.4851V16.4809ZM20.3116 30.6279C16.3066 30.4161 12.5666 27.0106 10.9511 23.296C15.1749 23.296 20.6314 25.5663 20.3116 30.6279ZM15.6966 31.3141C18.856 32.9109 21.4559 35.5116 20.5977 39.3406C16.6053 38.4342 13.3575 34.1985 12.3605 30.306C13.509 30.5008 14.6364 30.827 15.7008 31.3098L15.6966 31.3141ZM15.5956 39.0187C18.3217 41.0433 20.8543 44.5801 19.1505 48.1083C15.3348 46.5073 12.7812 41.4669 12.3983 37.4176C13.5258 37.8158 14.607 38.341 15.5956 39.0144V39.0187ZM16.0416 56.3594C12.4278 54.0679 10.7702 48.7225 11.0563 44.4233C15.1875 46.7784 18.8728 51.8061 16.0416 56.3594ZM10.9932 53.6697C13.021 56.6389 14.0979 60.0528 11.8851 63.2507C11.843 63.3355 11.5527 63.6319 11.4728 63.7124C8.2755 60.7475 7.43411 55.1183 8.39751 50.9674C9.36511 51.7595 10.2486 52.6574 10.9932 53.6697ZM7.32894 9.79702C10.5978 9.7589 13.9549 10.7712 14.872 14.3037C11.8893 15.1424 8.49006 14.0538 6.07105 12.2495C5.35166 11.7115 4.69117 11.1016 4.10219 10.4197C5.14552 10.0723 6.23092 9.85209 7.32894 9.79702ZM6.80727 59.8241C8.42695 63.3948 8.8771 67.389 5.52836 70.0955C2.82328 66.652 3.02942 60.6797 4.6491 56.6601C5.4947 57.6428 6.2225 58.6635 6.80727 59.8241Z%22 fill=%22white%22 fill-opacity=%221%22%3E%3C/path%3E%3Cpath d=%22M12.7303 8.89486C15.814 13.2915 17.7029 17.0696 19.3689 22.182C22.0571 31.4411 22.1917 38.862 19.8443 48.2185C18.111 54.2162 15.9991 58.5492 12.3306 63.5854C8.60746 68.414 5.12408 71.6119 0 74.8945C0.227176 75.263 0.454357 75.6315 0.681533 76C5.9192 72.5903 9.47409 69.2781 13.2519 64.28C16.9583 59.0871 19.0702 54.6312 20.7572 48.4642C23.0079 38.9255 22.7387 31.3818 19.7769 22.0423C17.9722 16.9468 15.9696 13.2067 12.7261 8.89062L12.7303 8.89486Z%22 fill=%22white%22 fill-opacity=%221%22%3E%3C/path%3E%3C/svg%3E")}
@media (max-width:480px){.award{--ah:38px;gap:12px}.award-r,.award-l{gap:12px}}

/* ---------- the brands: a card each; the middle one is the large one and the row turns by itself ---------- */
.cases{padding-bottom:calc(var(--space) * .5);overflow:clip}
.brands-head{text-align:center}
.brands{--bw:clamp(258px,30vw,448px)}
.brands:focus-visible{outline:2px solid #fff;outline-offset:-2px}
/* without scripts it is a plain row to scroll sideways */
.brands-stage{list-style:none;margin:0;padding:0 var(--po-pad);display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.brands-stage::-webkit-scrollbar{display:none}
.bc{position:relative;flex:none;width:var(--bw);aspect-ratio:5/6;padding:clamp(20px,2.25vw,31px);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;overflow:hidden;isolation:isolate;contain:layout paint;border-radius:var(--r-xl);background:#101316;scroll-snap-align:center}
.bc-p{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.bc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--ink-rgb),.55) 0,rgba(var(--ink-rgb),0) 30%,rgba(var(--ink-rgb),0) 48%,rgba(var(--ink-rgb),.88) 86%)}
.bc-l{height:calc(var(--k,1) * clamp(29px,2.7vw,38px));width:auto;max-width:none;filter:brightness(0) invert(1)}
.bc p{margin:0;font-size:1.1875rem;line-height:1.3;font-weight:500;color:rgba(255,255,255,.92);text-wrap:balance}
.brands-nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:clamp(26px,4svh,44px)}
.brands-nav .cs-count{min-width:4.4em;text-align:center}
/* with scripts each card is placed by how far it is from the middle (--d, set in main.js); only transforms and opacity move.
   A card is drawn once at full size and the side cards are that copy scaled down; the cards on stage keep their own layer */
.js .brands-stage{position:relative;display:block;overflow:visible;padding:0;height:calc(var(--bw) * 1.2 + 8px);touch-action:pan-y}
.js .bc{position:absolute;left:50%;top:50%;margin:calc(var(--bw) * -.6) 0 0 calc(var(--bw) * -.5);cursor:pointer;transform:translateX(calc(var(--d,0) * (var(--bw) * .9286 + 14px))) scale(var(--s,.84));opacity:var(--o,1);transition:transform var(--bt,900ms) var(--po-ease-strong),opacity 600ms var(--po-ease);will-change:transform,opacity}
.js .bc.far{visibility:hidden;transition:none;will-change:auto}
/* a dark veil over every card but the middle one, heavier the further out it sits (--v, set in main.js); the row also fades into the page at both edges */
.js .bc::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:var(--v,.5);pointer-events:none;transition:opacity 600ms var(--po-ease);will-change:opacity}
.js .bc.far::after{will-change:auto}
/* while a finger drags the row the cards follow it exactly; on letting go main.js sets --bt so the settle starts at the finger's speed */
.js .brands-stage.drag .bc,.js .brands-stage.drag .bc::after{transition:none}
.js .bc.on{z-index:1;cursor:default}
.js .brands-stage::before,.js .brands-stage::after{content:"";position:absolute;top:-8%;bottom:-8%;z-index:2;width:clamp(36px,10vw,170px);pointer-events:none}
.js .brands-stage::before{left:0;background:linear-gradient(90deg,var(--bg) 8%,rgba(var(--ink-rgb),0))}
.js .brands-stage::after{right:0;background:linear-gradient(270deg,var(--bg) 8%,rgba(var(--ink-rgb),0))}
.js .bc p{opacity:0;transform:translateY(8px);transition:opacity 500ms var(--po-ease) 200ms,transform 700ms var(--po-ease-strong) 200ms}
.js .bc.on p{opacity:1;transform:none}
@media (max-width:700px){.brands{--bw:76vw}.bc p{font-size:1.0625rem}}
@media (prefers-reduced-motion:reduce){.js .bc,.js .bc::after,.js .bc p{transition:none}}

/* ---------- the roster: every brand logo in one row under the cards; each one turns the row to its card, and the one showing is lit ---------- */
.cases .roster-l{margin-top:clamp(44px,5.4vw,84px)}
.roster-l{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:18px clamp(14px,2.2vw,36px)}
.roster-l li{flex:none;display:flex}
.roster-l button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:none;cursor:pointer}
.roster-l button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.roster-l img{display:block;height:calc(var(--k,1) * clamp(15px,1.75vw,25px));width:auto;filter:brightness(0) invert(1);opacity:.6;transition:opacity 300ms var(--po-ease)}
.roster-l button.on img{opacity:1}
@media (hover:hover) and (pointer:fine){.roster-l button:hover img{opacity:1}}
@media (max-width:900px){.roster-l{flex-wrap:wrap;justify-content:flex-start;gap:26px 0}.roster-l li{flex:0 0 20%;justify-content:center}.roster-l img{height:calc(var(--k,1) * 16px);max-width:86%;object-fit:contain}}
/* phones: three to a row, and the last row sits in the middle rather than leaving a logo alone on the left */
@media (max-width:520px){.cases .roster-l{margin-top:36px}.roster-l{justify-content:center;gap:30px 0}.roster-l li{flex-basis:33.333%}.roster-l img{height:calc(var(--k,1) * 19px);max-width:84%}}

/* ---------- Pronto AI, simplified: what it follows for each ad. Bars, no figures ---------- */
.svc>li>.pai{grid-column:1 / -1}
.pai{--c:minmax(0,1fr);padding:clamp(18px,2.2vw,34px);border:1px solid var(--po-hair);border-radius:var(--r-card);background:#0D1013}
.pai-top{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding-bottom:clamp(18px,2vw,28px);margin-bottom:clamp(6px,1vw,14px);border-bottom:1px solid var(--po-hair)}
.pai-top>img{display:block;height:clamp(22px,2.1vw,30px);width:auto}
.pai-path{list-style:none;margin:0;padding:0;display:flex;align-items:center;font:600 1rem/1 var(--po-sans)}
.pai-path li{display:flex;align-items:center;color:var(--po-w72)}
.pai-path li.on{color:var(--acc)}
.pai-path li+li::before{content:"";width:clamp(18px,3vw,54px);height:1px;margin-inline:clamp(8px,1vw,14px);background:var(--po-hair)}
.pai-hd,.pai-r{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,var(--c));align-items:center;gap:clamp(14px,2.2vw,36px)}
.pai-hd{padding:14px clamp(10px,1.2vw,16px) 10px;font-size:1rem;line-height:1.2;color:var(--po-w72)}
.pai-r{padding:clamp(10px,1.1vw,14px) clamp(10px,1.2vw,16px);border-radius:var(--r-tile)}
.pai-r+.pai-r{margin-top:4px}
.pai-r.on{background:rgba(255,255,255,.06)}
.pai-ad{display:flex;align-items:center;gap:14px;font-weight:600;font-size:1.0625rem;white-space:nowrap}
.pai-ad img{flex:none;width:clamp(36px,3.4vw,52px);height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:7px}
.pai-r i{position:relative;display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.pai-r i::after{content:"";position:absolute;inset:0;border-radius:4px;background:rgba(255,255,255,.5);transform-origin:0 50%;transform:scaleX(0);transition:transform 1100ms var(--po-ease-strong) 250ms}
.pai-r.on i::after{background:var(--acc)}
.pai.in .pai-r i::after{transform:scaleX(var(--v))}
.pai.in .pai-r+.pai-r i::after{transition-delay:370ms}.pai.in .pai-r+.pai-r+.pai-r i::after{transition-delay:490ms}
@media (max-width:760px){
  .pai-top{flex-direction:column;align-items:flex-start}
  .pai-hd{display:none}
  .pai-r{grid-template-columns:8.5em minmax(0,1fr);gap:18px 14px;padding:16px 12px 20px}
  .pai-ad{grid-column:1 / -1}
  .pai-r i{grid-column:2}
  .pai-r i::before{content:attr(data-l);position:absolute;right:calc(100% + 14px);top:50%;width:8.5em;transform:translateY(-50%);font:400 1rem/1 var(--po-sans);color:var(--po-w72)}
  .pai-r i{overflow:visible}
  .pai-path li+li::before{width:14px;margin-inline:7px}
}
@media (prefers-reduced-motion:reduce){.pai-r i::after{transition:none}}