/* 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; --panel:rgba(255,255,255,.045);
  --po-container:1360px; --po-pad:clamp(20px,4vw,56px);
  --space:clamp(5.5rem,3rem + 8vw,11rem);
  --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}
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}

/* Lead Pronto brand rule: every Founders headline is trimmed to its capitals, so no spare space rides above or below it */
.po-h{text-box:trim-both cap alphabetic}
@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}
.card{border-radius:var(--r-xl);background:rgba(8,10,12,.3);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}

/* 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(7,9,11,.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:#07090B}
.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:#07090B;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(7,9,11,.95);box-shadow:inset 0 0 0 1px var(--po-hair);border-radius:14px}
.nav-logo{display:block;width:clamp(128px,11.5vw,168px);flex:none}
.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(7,9,11,.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}
.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)}}
@media (max-width:860px){
  .nav{height:64px;padding-inline:18px 10px}
  .nav-toggle{display:inline-flex}
  .nav-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;padding:12px;border-radius:14px;background:rgba(7,9,11,.96);box-shadow:inset 0 0 0 1px var(--po-hair)}
  .nav.open .nav-menu{display:flex}
  .nav-menu a.lnk{min-height:50px;font-size:1.125rem;color:#fff}
  .nav-menu .po-btn{display:inline-flex;margin:8px 0 0}
}

/* ---------- 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;text-box-trim:none;font-size:clamp(2.75rem,min(8.6cqw,13.5svh),9rem);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 */
.htile{position:relative;display:inline-block;vertical-align:baseline;width:1.08em;height:.72em;margin-inline:.05em;border-radius:.13em;overflow:hidden;background:#15181b}
.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:36ch;font-size:clamp(1.125rem,1.6cqw,1.4375rem);line-height:1.4;color:rgba(255,255,255,.9)}
/* 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}
/* 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 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(7,9,11,.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(7,9,11,.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(7,9,11,.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(7,9,11,.6),rgba(7,9,11,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}}
/* 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}
@media (max-width:900px){
  .hero-in{padding:92px 18px 24px}
  .hero h1{font-size:clamp(2.5rem,14.2cqw,6rem)}
  .hero h1 .w1{display:block}
  .hero h1 .htile{margin-left:0}
  .hero .po-lede{font-size:1.125rem}
  /* 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%}
  }
  /* 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)}
.sec.end{padding-bottom:clamp(3rem,5vw,5rem)}
.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)}
.head h2{font-size:var(--h2)}
.head h2>span{display:block;overflow:hidden;padding-top:.07em;margin-top:-.07em}
.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(20px);transition:opacity 800ms var(--po-ease),transform 1000ms 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 ---------- */
.flip{--deep:color-mix(in srgb,var(--c-base) 72%,#07090B)}
.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}
.state-h{line-height:.8;font-size:min(calc(var(--cw) / 8.4),25svh)}
.state-h .ln{display:block}
@media (max-width:760px){
  .state-h{font-size:min(calc(var(--cw) / 5.5),13svh)}
  .state-h .seg{display:block;margin-bottom:-.02em}
}

/* ---------- 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%,#07090B)}
.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 per slide and no hold at the end: each slide rises at the speed of the scroll, then the page carries straight on */
.steps-live{height:300svh}
.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 pattern behind each step; main.js slides it with the scroll */
.pat-w{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(100deg,transparent 28%,#000 78%);mask-image:linear-gradient(100deg,transparent 28%,#000 78%)}
.pat{position:absolute;inset:-18%;opacity:.2;will-change:transform}
.pat[data-pat="dots"]{background:radial-gradient(currentColor 1.6px,transparent 2.1px) 0 0/30px 30px}
.pat[data-pat="spots"]{background:radial-gradient(currentColor 3.2px,transparent 3.8px) 0 0/58px 58px}
/* a faint dot matrix on the right of the two word slides. main.js lets a few dots at a time catch the light on the first,
   and turn into pound signs and back on the second */
.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-ink::before{background:radial-gradient(circle,rgba(7,9,11,.22) 1.5px,transparent 2.2px) 0 0/72px 72px}
.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: a cover in the slide's own colour sits over the glass and the word is cut out of it */
/* the glass runs a little past the letters on every side, and the cover runs 4px past the glass, so neither edge can show as a line */
.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 */
.fx-lit[data-glass]{background:color-mix(in srgb,var(--acc) 52%,var(--c-base))}
.fx-lit .glass-cv{mix-blend-mode:screen}
.fx-lit .fx-t{background:var(--bg);color:#fff;mix-blend-mode:darken}
/* on a pale slide the glass is held under the slide's colour, so the letters stay dark and nothing shows outside them */
.fx-ink[data-glass]{background:#07090B}
.fx-ink::before{content:"";position:absolute;inset:0;z-index:0;background:var(--acc);mix-blend-mode:multiply}
.fx-ink .fx-t{background:var(--acc);color:#000;mix-blend-mode:lighten}
.no-glass .fx-t{background:none;mix-blend-mode:normal;color:inherit}
.no-glass .fx-ink::before{display:none}
.no-glass .fx[data-glass]{background:none}
/* 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)}
.ft{--off:-260px;position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--a,9/16);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}
.ft img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-tile);box-shadow:0 18px 40px rgba(7,9,11,.4)}
/* the further stills are dimmed with a veil rather than a filter, and bob on their own property, so both stay on the graphics card */
.ft::after{content:"";position:absolute;inset:0;border-radius:var(--r-tile);background:#07090B;opacity:calc(1 - var(--b,1))}
.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}}
.ft1{--ry:26deg;--rz:-2deg;--n:0}
.ft2{--a:4/5;--z:-160px;--ry:14deg;--b:.8;--n:3;--t:8.5s}
.ft3{--z:90px;--ry:30deg;--rz:2deg;--n:1;--t:6s}
.ft4{--a:4/5;--z:-220px;--ry:14deg;--b:.72;--n:4;--t:9s}
.ft5{--a:4/5;--z:-300px;--ry:18deg;--b:.6;--n:6;--t:10s}
.ft6{--ry:-26deg;--rz:2deg;--n:1}
.ft7{--a:4/5;--z:-160px;--ry:-14deg;--b:.8;--n:2;--t:8.5s}
.ft8{--z:90px;--ry:-30deg;--rz:-2deg;--n:0;--t:6s}
.ft9{--a:4/5;--z:-220px;--ry:-14deg;--b:.72;--n:5;--t:9s}
.ft10{--a:4/5;--z:-300px;--ry:-18deg;--b:.6;--n:7;--t:10s}
@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)}
.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,.step-h.four{font-size:min(calc(var(--cw) / 6.5),11.5svh)}
  .step-h .ln{white-space:normal}
  .final-logo{width:60vw}
}

/* ---------- client work: justified rows of tiles ---------- */
.jrow{display:flex;gap:var(--gap)}
.jrow+.jrow,.jrow+.rail,.rail+.jrow{margin-top:var(--gap)}
.jrow>*{flex:var(--r) 1 0%;min-width:0;aspect-ratio:var(--r)}
.tile{position:relative;overflow:hidden;border-radius:var(--r-tile);background:#15181b}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--po-ease-strong)}
.crop>img{transform:scale(1.075)}
.film figcaption{position:absolute;left:10px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:var(--r-s);background:rgba(7,9,11,.72);color:#fff;font-size:1rem;font-weight:600;line-height:1.2}
.film figcaption i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:#fff;color:var(--po-ink);flex:none}
.film figcaption svg{width:10px;height:10px;margin-left:2px}
.world::after{content:"";position:absolute;inset:45% 0 0 0;background:linear-gradient(180deg,rgba(7,9,11,0),rgba(7,9,11,.62));pointer-events:none}
.plate{position:absolute;z-index:2;left:16px;bottom:16px;display:flex;align-items:center;padding:12px 16px;border-radius:var(--r-s);background:#fff}
.plate img{height:clamp(22px,2vw,30px);width:auto}
.win{display:flex;flex-direction:column;background:#fff}
.win figcaption{flex:none;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;background:#fff;color:var(--po-ink);font-size:1rem;font-weight:600;line-height:1.2;border-bottom:1px solid rgba(7,9,11,.1)}
.win figcaption::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--acc-on-light);flex:none}
.win-view{position:relative;flex:1;min-height:0;overflow:hidden}
.win-view img{position:absolute;top:0;left:0;width:100%;height:auto;will-change:transform}
.rail{overflow:hidden;margin-inline:calc(var(--po-pad) * -1);padding-inline:var(--po-pad)}
.rail-in{display:flex;gap:var(--gap);width:max-content;will-change:transform}
.rail-in>*{flex:none;height:clamp(300px,29vw,440px);aspect-ratio:var(--r)}
@media (hover:hover) and (pointer:fine){
  .tile:hover>img{transform:scale(1.04)}
  .tile.crop:hover>img{transform:scale(1.115)}
}
@media (max-width:920px){
  .m-third.film figcaption{padding:5px}
  .m-third.film figcaption span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-width:720px){
  .jrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;gap:10px}
  .jrow>*{grid-column:span 3}
  .jrow>.m-full{grid-column:span 6;aspect-ratio:4/3}
  .jrow>.m-full.win{aspect-ratio:4/5}
  .jrow>.m-third{grid-column:span 2}
  .jrow>.m-wide{grid-column:span 6}
  .jrow>.m-stretch{aspect-ratio:auto;align-self:stretch;min-height:200px}
  .jrow+.jrow,.jrow+.rail,.rail+.jrow{margin-top:10px}
  .rail-in{gap:10px}
  .rail-in>*{height:300px}
}

/* ---------- case studies: a panel each, the facts first, then the work ---------- */
.sec.tight{padding-top:clamp(14px,1.6vw,24px)}
.case{--case-pad:clamp(18px,3vw,44px);border-radius:var(--r-xl);background:var(--panel);padding:var(--case-pad);overflow:hidden}
.case-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:end;margin-bottom:clamp(24px,3vw,44px)}
.case-logo{display:inline-flex;align-items:center;padding:10px 14px;border-radius:var(--r-s);background:#fff;margin-bottom:clamp(18px,2vw,28px)}
.case-logo img{height:clamp(22px,2vw,30px);width:auto}
.case h3{font-size:var(--po-text-h1)}
.case h3 span{display:block}
.spec{margin:0;border-bottom:1px solid var(--po-hair)}
.spec div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--po-hair)}
.spec dt{color:var(--po-w72);font-size:1rem;line-height:1.5}
.spec dd{margin:0;font-weight:500;font-size:1.1875rem;line-height:1.35;text-wrap:pretty}
.case .rail{margin-inline:calc(var(--case-pad) * -1);padding-inline:var(--case-pad)}
@media (max-width:860px){.case-top{grid-template-columns:1fr}.spec div{grid-template-columns:1fr;gap:2px}}

/* ---------- every brand: a glass stage; each name turns it to that name's colour ---------- */
.every{border-radius:var(--r-xl);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,104px);padding:clamp(24px,5.4vw,88px)}
.every h2{font-size:var(--h2)}
.every h2>span{display:block}
.every .po-lede{margin-top:clamp(16px,1.8vw,26px);color:rgba(255,255,255,.86)}
.every-list{list-style:none;margin:0;padding:0;align-self:end}
.every-list li{border-top:1px solid rgba(255,255,255,.2)}
.every-list li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.every-list button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:.26em 0 .2em;border:0;background:none;color:#fff;cursor:pointer;text-align:left;font-size:clamp(2rem,1rem + 3vw,4.25rem);line-height:.92;opacity:.42;transition:opacity 320ms var(--po-ease),transform 600ms var(--po-ease-strong)}
.every-list button::after{content:"";flex:none;width:.34em;height:.34em;border-radius:50%;background:var(--acc);transform:scale(.4);opacity:0;transition:transform 500ms var(--po-ease-strong),opacity 300ms var(--po-ease)}
.every-list button.on{opacity:1;transform:translateX(.18em)}
.every-list button.on::after{transform:none;opacity:1}
@media (max-width:860px){.every{grid-template-columns:1fr}}

/* ---------- AI: six panels in a row, each a picture in one of the six colours; then what the speed buys and what it runs on ---------- */
.caps{display:flex;gap:10px;height:clamp(420px,62svh,660px)}
.cap{position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;border:0;padding:0;border-radius:var(--r-card);background:var(--c-ground);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:flex-grow 500ms var(--po-ease-strong)}
.cap.on{flex-grow:5.2}
.cap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the presenter is cropped from the top, so her face stays clear of the words */
.cap:nth-child(2) img{object-position:50% 0}
/* two soft shades in the panel's own colour: one under the upright name at the foot, one that arrives with the words at the top */
.cap::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--c-ground) 72%,transparent),transparent 40%)}
.cap-c::before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100vw;height:calc(100% + 120px);background:linear-gradient(180deg,color-mix(in srgb,var(--c-ground) 86%,transparent),color-mix(in srgb,var(--c-ground) 58%,transparent) 52%,transparent)}
.cap-c{position:absolute;z-index:1;top:0;left:0;width:min(420px,calc(var(--cw) * .5));padding:clamp(18px,2vw,28px);opacity:0;transition:opacity 300ms var(--po-ease)}
.cap.on .cap-c{opacity:1;transition-delay:260ms}
.cap-h{display:block;font-family:var(--po-disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.875rem,1.1rem + 1.7vw,2.875rem);line-height:.9;letter-spacing:-.01em;text-box:trim-both cap alphabetic}
.cap-p{display:block;margin-top:14px;font-size:1.0625rem;line-height:1.45;color:rgba(255,255,255,.9);max-width:30ch;text-wrap:pretty}
.cap-v{position:absolute;z-index:1;left:50%;bottom:22px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-family:var(--po-disp);font-weight:700;text-transform:uppercase;font-size:1.625rem;line-height:1;white-space:nowrap;text-box:trim-both cap alphabetic;transition:opacity 260ms var(--po-ease)}
.cap.on .cap-v{opacity:0}
/* on a wide screen main.js eases the panels open and shut itself, so the mouse can change its mind mid-move */
.ai-live .cap,.ai-live .cap-c,.ai-live .cap-v{transition:none}
.gains,.made{margin-top:clamp(72px,9vw,140px)}
.gains-l{font:500 clamp(1.375rem,1.1rem + .9vw,1.875rem)/1.3 var(--po-sans)}
.gains-list,.points{list-style:none;margin:0;padding:0}
.gains-list{margin-top:clamp(28px,3.4vw,52px)}
.gains-list li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:end;padding:24px 0;border-top:1px solid var(--po-hair)}
.gains-list li:last-child{border-bottom:1px solid var(--po-hair)}
.gains-list h3{font-size:clamp(3rem,1.4rem + 6vw,7rem);line-height:.86}
.gains-list p{color:var(--po-w72);font-size:1.125rem;line-height:1.45;max-width:34ch;padding-bottom:.2em;text-wrap:pretty}
.points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);margin-top:clamp(32px,4vw,60px)}
.points h3{font:600 1.25rem/1.25 var(--po-sans)}
.points p{margin-top:8px;color:var(--po-w72);font-size:1.0625rem;line-height:1.45;text-wrap:pretty}
.made{font:500 clamp(1.625rem,1rem + 2vw,2.75rem)/1.26 var(--po-sans);letter-spacing:-.015em}
.made .ln{display:block;text-wrap:balance}
.made img{display:inline-block;height:1.02em;width:auto;vertical-align:-.225em;margin-inline:0 .08em}
.made .dim{color:var(--po-w55)}
/* narrow screens: every panel open, stacked, so nothing depends on a hover */
@media (max-width:860px){
  .caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;gap:var(--gap)}
  .cap,.cap.on{aspect-ratio:1/1;flex:none}
  .cap-c,.cap.on .cap-c{opacity:1;width:100%;transition:none}
  .cap-v{display:none}
  .gains-list li{grid-template-columns:1fr;gap:12px}
  .points{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.caps{grid-template-columns:1fr}.cap,.cap.on{aspect-ratio:5/4}.points{grid-template-columns:1fr}}

/* ---------- 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 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:start;padding:clamp(24px,2.8vw,40px) 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;text-wrap:pretty}
.svc ul{list-style:none;margin:clamp(16px,1.6vw,22px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.4vw,36px)}
.svc ul li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--po-hair);font-size:1.0625rem;line-height:1.35;color:rgba(255,255,255,.9)}
.svc ul svg{flex:none;width:22px;height:22px;margin-top:.03em;fill:none;stroke:var(--acc);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){
  .svc>li{grid-template-columns:1fr;gap:16px}
}
@media (max-width:480px){.svc ul{grid-template-columns:1fr}}

/* ---------- numbers, inside the swipe ---------- */
.nums{display:grid;gap:clamp(24px,3.4vw,52px)}
.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) / 6.7),30svh)}
.nums-row dd{margin:clamp(12px,1.4vw,20px) 0 0;max-width:14ch;font-size:var(--po-text-lead);line-height:1.3;font-weight:500}
@media (max-width:820px){
  .nums-row{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
  .nums-row div:nth-child(-n+2){grid-column:1 / -1}
  .nums-row dt{font-size:min(calc(var(--cw) / 3.1),15svh)}
  .nums-row dd{font-size:1.0625rem}
}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.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)}}
.more{border-radius:var(--r-card);aspect-ratio:4/5;background:var(--panel);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,2vw,28px)}
.more h3{font-size:clamp(2.5rem,1.4rem + 3vw,4.5rem)}
.more h3 span{display:block}
.more p{margin-top:12px;font-size:1.0625rem;line-height:1.45;color:var(--po-w72);max-width:18ch}
@media (max-width:980px){.people{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ---------- contact: a glass stage with the form on a glass card ---------- */
.cta{border-radius:var(--r-xl);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,104px);align-items:center;padding:clamp(24px,5.4vw,88px)}
.cta h2{font-size:clamp(2.75rem,1.2rem + 4.4vw,5.25rem)}
.cta h2 span{white-space:nowrap}
.cta h2 span{display:block}
.cta .po-lede{margin-top:clamp(16px,1.8vw,26px);max-width:28ch;color:rgba(255,255,255,.86)}
.form{display:grid;gap:16px;align-content:start;padding:clamp(20px,2.6vw,36px)}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:1rem;line-height:1.3}
.field input{width:100%;min-height:54px;padding:0 16px;border:0;border-radius:var(--r-s);background:rgba(7,9,11,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff;font:400 1.0625rem/1.3 var(--po-sans);transition:box-shadow 160ms var(--po-ease)}
.field input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #fff}
.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:8px}
.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}
@media (max-width:860px){.cta{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;background:var(--bg);padding-block:clamp(40px,5vw,80px) 40px}
.foot-logo{display:block;width:100%}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:clamp(40px,5vw,72px);padding-top:28px;border-top:1px solid var(--po-hair)}
.foot-row p{font-weight:600;font-size:var(--po-text-lead)}
.foot-row ul{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;padding:0;margin:0}
.foot-row a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-s);text-decoration:none;color:var(--po-w72);font-weight:500}
@media (hover:hover) and (pointer:fine){.foot-row a:hover{color:#fff}}
.legal{margin-top:28px;font-size:1rem;line-height:1.55;color:var(--po-w55);max-width:72ch}

@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}
  .rail{overflow-x:auto}
  .win-view{overflow-y:auto}
  .js .head h2 .li{transform:none;transition:none}
  .every-list button,.every-list button::after{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}
  .cap,.cap-c,.cap-v{transition:none}
  .step.last.on .enh-up svg{animation:none}
}

/* ---------- awards: Lead Pronto's, shown in the Pronto One look ---------- */
.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{flex:none;height:var(--ah);aspect-ratio:32/76;background:var(--acc);-webkit-mask: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") center/contain no-repeat;mask: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") center/contain no-repeat}
.crest-r{-webkit-mask-image: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");mask-image: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-t{font-size:.9375rem}.award-r,.award-l{gap:12px}}
.aw{border-radius:var(--r-card);background:var(--panel);box-shadow:inset 0 0 0 1px var(--po-hair);padding:clamp(22px,2.6vw,36px)}
.aw h3{margin-top:14px;font-weight:700;font-size:clamp(1.25rem,1rem + .7vw,1.625rem);line-height:1.2;text-wrap:balance}
.aw-year{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:7px;background:rgba(255,255,255,.1);font-weight:600;font-size:1rem;line-height:1}
.aw-body{margin-top:10px;font-size:1.0625rem;line-height:1.45;color:var(--po-w72)}
.aw-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;padding:clamp(24px,3.6vw,56px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 38%,transparent)}
.aw-top h3{font-size:clamp(1.75rem,1.1rem + 2.2vw,3rem);line-height:1.08;letter-spacing:-.02em}
.aw-seal{display:flex;align-items:center;justify-content:center;width:clamp(120px,12vw,168px);aspect-ratio:1.5;padding:14px;border-radius:var(--r-tile);background:rgba(255,255,255,.07)}
.aw-seal img{width:100%;height:auto}
.aw-story{margin-top:18px;max-width:52ch;font-size:var(--po-text-lead);line-height:1.5;color:var(--po-w72)}
.aw-row{list-style:none;margin:var(--gap) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.aw-logo{display:block;height:52px;width:auto;margin-bottom:18px}
@media (max-width:860px){.aw-top{grid-template-columns:1fr}.aw-row{grid-template-columns:1fr}}