/* Shared system for all three directions. One grotesk, one label style, one button style.
   Sections sit on white, grey or black bands; images are square cornered, artist tiles are rounded.
   Components follow the references they came from: top bar and hero (Clavo), intro and logo row (Studio Aton),
   faces wall (the testimonials layout), who we are (Stodio). */

:root{
  --bg:#FFFFFF;
  --fg:#0F0F0F;
  --muted:#9B9B9B;
  --muted2:#5C5C5C;
  --line:#ECECEC;
  --line2:#D8D8D8;
  --soft:#F4F4F4;
  --ghost:#F0F0F0;
  --string:#DDDDDD;
  --accent:#E5352B;
  --btn_hover:#2A2A2A;
  --gut:clamp(18px,1.9vw,28px);
  --sp:clamp(120px,12vw,190px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease2:cubic-bezier(.65,0,.35,1);
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
.band_dark{--bg:#0F0F0F;--fg:#FFFFFF;--muted:#7A7A7A;--muted2:#B3B3B3;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.26);--soft:#1B1B1B;--ghost:#1C1C1C;--string:#3A3A3A;--btn_hover:#E6E6E6;background:var(--bg);color:var(--fg)}
.band_grey{--bg:#F3F3F3;--soft:#E8E8E8;--line:#E0E0E0;--line2:#CDCDCD;--ghost:#E6E6E6;--string:#CFCFCF;background:var(--bg)}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:#fff;color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-.011em;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{list-style:none;padding:0}
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}
::selection{background:#2F6BFF;color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:#0F0F0F;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;transition:top .3s}
.skip:focus{top:12px}
.lock{display:inline-block;width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:1.8;vertical-align:-.05em}

/* Rhythm: every section carries half the gap above and below, bands carry their own */
.sec{padding:calc(var(--sp) * .5) var(--gut)}
.band{padding:calc(var(--sp) * .55) var(--gut)}
.band.flush{padding:0}
.sec.tight{padding-top:calc(var(--sp) * .3)}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--btn_h,46px);padding:0 22px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:14.5px;font-weight:500;white-space:nowrap;line-height:1;transition:background .3s,transform .6s var(--ease)}
.btn:hover{background:var(--btn_hover)}
.btn:active{transform:scale(.97)}
.btn.light{background:var(--soft);color:var(--fg)}
.btn.light:hover{background:var(--line2)}
.btn.white{background:#fff;color:#0F0F0F}
.btn.white:hover{background:#EDEDED}
.btn.outline{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.outline:hover{background:rgba(255,255,255,.1)}
.btn .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.btn_txt{position:relative;display:block;overflow:hidden;height:1.25em;line-height:1.25em}
.btn_txt>span{position:relative;display:block;transition:transform .7s var(--ease)}
.btn_txt>span::after{content:attr(data-t);position:absolute;left:0;top:100%}
.btn:hover .btn_txt>span{transform:translateY(-100%)}
.btn_arrow{position:relative;width:13px;height:13px;overflow:hidden;flex:none}
.btn_arrow svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .7s var(--ease)}
.btn_arrow svg+svg{transform:translateX(-140%)}
.btn:hover .btn_arrow svg:first-child{transform:translateX(140%)}
.btn:hover .btn_arrow svg+svg{transform:none}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* Reveals */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js .wi{display:inline-block;transform:translateY(112%);transition:transform 1.15s var(--ease);transition-delay:calc(var(--i,0) * 32ms + var(--d,0ms))}
.js .in .wi{transform:none}
.js [data-reveal=fade]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease) var(--d,0ms),transform 1.3s var(--ease) var(--d,0ms)}
.js [data-reveal=fade].in{opacity:1;transform:none}
.fillw{transition:opacity .25s linear}

/* Labels and headings */
.sq{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.sq::before{content:'';width:9px;height:9px;border-radius:2px;background:var(--accent);flex:none}
.pill{display:inline-flex;padding:7px 14px;border-radius:999px;background:var(--soft);font-size:13.5px;font-weight:500}
.h2{margin-top:clamp(14px,1.4vw,20px);font-size:clamp(44px,5.6vw,84px);font-weight:500;letter-spacing:-.05em;line-height:.96}
.lead{margin-top:clamp(16px,1.6vw,24px);font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.15;max-width:20em}
.lead .gray{color:var(--muted)}

/* Top bar: four points across the width */
.tb{position:fixed;z-index:70;top:0;left:0;right:0;display:grid;grid-template-columns:29.7% 33.7% 1fr auto;align-items:center;height:64px;padding:0 var(--gut);font-size:14px;color:#0F0F0F;transition:background .5s var(--ease),color .5s,box-shadow .5s,transform .7s var(--ease)}
.tb.is_solid{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 #ECECEC}
.tb.is_hidden{transform:translateY(-100%)}
.tb.on_dark:not(.is_solid){color:#fff}
.logo{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;letter-spacing:-.025em;white-space:nowrap}
.logo i{width:8px;height:12px;border-radius:2px;background:var(--accent);transform:skewX(-16deg)}
.pt{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.pt::before{content:'';width:5px;height:5px;background:currentColor}
.tb_menu{display:inline-flex;align-items:center;gap:9px}
.tb_menu::before{content:'';width:5px;height:5px;background:currentColor}
.menu{position:fixed;z-index:80;inset:0;display:grid;grid-template-rows:64px 1fr auto;padding:0 var(--gut) 26px;background:#fff;color:#0F0F0F;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.menu_open .menu{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.menu_top{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.menu nav{align-self:center}
.menu nav a{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid #ECECEC;font-size:clamp(34px,5.4vw,70px);font-weight:500;letter-spacing:-.045em;line-height:1.05;transform:translateY(20px);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.menu nav a small{font-size:14px;letter-spacing:0;color:#9B9B9B}
.menu_open .menu nav a{transform:none;opacity:1}
.menu nav a:nth-child(2){transition-delay:.04s}.menu nav a:nth-child(3){transition-delay:.08s}.menu nav a:nth-child(4){transition-delay:.12s}
.menu_foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#5C5C5C}
.menu_foot nav{display:flex;gap:18px}

/* Link nav (direction 2) */
.nb{position:fixed;z-index:70;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px;padding:0 var(--gut);color:#0F0F0F;transition:background .5s var(--ease),color .5s,box-shadow .5s,transform .7s var(--ease)}
.nb.is_solid{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 #ECECEC}
.nb.is_hidden{transform:translateY(-100%)}
.nb.on_dark:not(.is_solid){color:#fff}
.nb .logo{font-size:16px}
.nb_links{display:flex;gap:28px;font-size:14.5px}
.nb_links a{display:inline-flex;align-items:center;gap:5px;opacity:.7;transition:opacity .3s}
.nb_links a:hover{opacity:1}
.nb_cta{justify-self:end;--btn_h:42px;padding:0 18px;background:#0F0F0F;color:#fff}
.nb.on_dark:not(.is_solid) .nb_cta{background:#fff;color:#0F0F0F}
.nb_menu{display:none;justify-self:end;font-size:14.5px;font-weight:500}

/* Hero from the Clavo reference: headline, description, scroll circle, square image */
.hx{padding:clamp(140px,15vw,196px) var(--gut) calc(var(--sp) * .5)}
.hx_top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr) auto;align-items:start;gap:24px}
.hx_h{font-size:clamp(40px,4.1vw,60px);font-weight:500;letter-spacing:-.045em;line-height:1.08}
.hx_d{padding-top:clamp(12px,1.4vw,22px);font-size:15px;line-height:1.5;color:#8A8A8A;max-width:27ch}
.circle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:clamp(92px,8.3vw,120px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;transition:box-shadow .4s}
.circle:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.circle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;animation:nudge 2.2s var(--ease2) infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.hx_img{position:relative;margin-top:clamp(16px,1.9vw,26px);aspect-ratio:2.23;overflow:hidden;background:#111}
.js .hx_img.reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.6s var(--ease) .15s}
.is_loaded .hx_img.reveal{clip-path:inset(0 0 0 0)}
.wide .hx_img{margin-top:clamp(18px,2vw,30px)}

/* Slideshow (inside .hx_img or .stmt) */
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s var(--ease)}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 6.5s linear}
.slide.on img{transform:scale(1)}
.slide_dots{position:absolute;z-index:4;right:clamp(14px,1.6vw,22px);bottom:clamp(16px,1.8vw,24px);display:flex;gap:6px}
.slide_dots button{position:relative;width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.5);overflow:hidden}
.slide_dots button i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.slide_dots button.on i{animation:fillbar 5.5s linear forwards}
.slide_dots button.done i{transform:none}
@keyframes fillbar{to{transform:scaleX(1)}}

/* Statement over the slideshow, edge to edge, square */
.stmt{position:relative;height:clamp(520px,64vh,760px);overflow:hidden;background:#111;color:#fff;isolation:isolate}
.stmt::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.25) 45%,rgba(0,0,0,.6));pointer-events:none}
.stmt_copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.stmt_l{font-size:13px;opacity:.75}
.stmt_h{max-width:13.5em;font-size:clamp(34px,4.6vw,66px);font-weight:500;letter-spacing:-.045em;line-height:1.05}
.stmt_s{max-width:34em;font-size:clamp(15px,1.3vw,18px);line-height:1.5;opacity:.85}
.stmt_copy .btn{margin-top:6px}
.stmt.hero{height:calc(100svh - 64px);min-height:600px;max-height:940px;margin-top:64px}

/* Dark hero with the artist strip (direction 2) */
.hd{padding:clamp(140px,15vw,200px) 0 calc(var(--sp) * .55)}
.hd_in{padding:0 var(--gut)}
.hd_l{font-size:13px;color:var(--muted2)}
.hd_h{margin-top:clamp(18px,2vw,28px);max-width:12em;font-size:clamp(42px,5.6vw,86px);font-weight:500;letter-spacing:-.05em;line-height:1}
.hd_row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:clamp(26px,3vw,44px)}
.hd_s{max-width:36em;font-size:clamp(15px,1.25vw,18px);color:var(--muted2);line-height:1.5}
.strip{overflow:hidden;margin-top:clamp(48px,5vw,80px);display:grid;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip_row{display:flex;gap:12px;width:max-content;animation:marq 70s linear infinite}
.strip_row.rev{animation-direction:reverse}
.strip:hover .strip_row{animation-play-state:paused}
.strip_tile{flex:none;width:clamp(120px,11vw,172px);aspect-ratio:97/120;border-radius:12px;overflow:hidden;background:var(--soft)}
.strip_tile img{width:100%;height:100%;object-fit:cover}
@keyframes marq{to{transform:translateX(-50%)}}

/* Mosaic hero (direction 3): giant wordmark over a grid of the artists */
.hm{padding:clamp(120px,12vw,160px) var(--gut) calc(var(--sp) * .5)}
.hm_word{display:block;white-space:nowrap;font-weight:600;letter-spacing:-.05em;line-height:.9;text-transform:uppercase;text-align:center}
.hm_word sup{font-size:.4em;font-weight:600;vertical-align:top;position:relative;top:.08em;margin-left:.03em}
.mosaic{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;grid-auto-flow:dense;margin-top:clamp(18px,2.4vw,34px)}
.tile{position:relative;aspect-ratio:97/120;border-radius:12px;overflow:hidden;background:var(--soft)}
.tile.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm_row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(28px,3vw,44px)}
.hm_line{font-size:clamp(24px,2.6vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1.15;max-width:18em}

/* Intro from the Studio Aton reference, with the logo row */
.intro{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--sp) * .5) var(--gut)}
.band .intro{padding:calc(var(--sp) * .55) var(--gut)}
.intro_l{font-size:12px;color:var(--muted2)}
.intro_t{margin-top:clamp(20px,2vw,30px);max-width:18.6em;font-size:clamp(26px,3.2vw,46px);font-weight:400;letter-spacing:-.032em;line-height:1.3}
.intro .btn{margin-top:clamp(28px,2.6vw,40px)}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px clamp(30px,3.2vw,50px);width:min(1240px,100%);margin:clamp(60px,6.5vw,96px) auto 0}
.logo_cell{display:flex;align-items:center;height:44px}
.logo_img{display:block;width:auto;max-width:none;height:calc(22px * var(--lh,1));filter:brightness(0)}
.logo_img.raster{filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply}
.band_dark .logo_img{filter:brightness(0) invert(1)}
.band_dark .logo_img.raster{filter:grayscale(1) invert(1) contrast(1.3);mix-blend-mode:screen}
.logo_word{font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.logos_sec{display:flex;flex-direction:column;align-items:center;text-align:center}
.logos_sec .logos{margin-top:clamp(28px,3vw,44px)}
.logo_tiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:clamp(28px,3vw,44px)}
.ltile{display:grid;place-items:center;aspect-ratio:1.9;border-radius:8px;background:var(--soft);--lh_scale:1}
.ltile .logo_img{height:calc(20px * var(--lh,1))}

/* Faces wall, on a band, edge to edge, no names, no hover */
.wall_band{position:relative;height:clamp(620px,56vw,860px);overflow:hidden}
.wall_band::before{content:'';position:absolute;z-index:2;left:0;right:0;top:0;height:20%;background:linear-gradient(var(--bg),transparent);pointer-events:none}
.wall{position:absolute;top:0;left:5.9%;right:5.9%;display:grid;grid-template-columns:repeat(var(--cols,9),minmax(0,1fr));gap:var(--wg,11px);align-items:start}
.wcol{display:flex;flex-direction:column;gap:var(--wg,11px);will-change:transform}
.ghost{flex:none;border-radius:0 0 12px 12px;background:var(--ghost)}
.face{position:relative;flex:none;aspect-ratio:97/120;margin:0;border-radius:12px;overflow:hidden;background:var(--soft)}
.face img{width:100%;height:100%;object-fit:cover}
.string{position:relative;flex:none;width:1px;margin:0 auto;background:repeating-linear-gradient(180deg,var(--string) 0 2px,transparent 2px 6px);-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
.string.hot::after{content:'';position:absolute;left:0;top:var(--hot,40%);width:1px;height:24%;background:repeating-linear-gradient(180deg,#F08A4B 0 2px,transparent 2px 5px)}
.wall_copy{position:absolute;z-index:3;left:50%;top:52%;transform:translateX(-50%);width:min(700px,50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.wall_copy::before{content:'';position:absolute;z-index:-1;inset:-50px -140px -70px;background:radial-gradient(closest-side,var(--bg) 55%,transparent)}
.wall_h{margin-top:clamp(18px,1.8vw,26px);font-size:clamp(30px,2.9vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1.05}
.wall_h .gray{color:var(--muted)}
.wall_sub{margin-top:clamp(16px,1.6vw,24px);max-width:30em;font-size:clamp(15px,1.3vw,19px);line-height:1.45;color:var(--muted2)}
.wall_copy .btns{margin-top:clamp(24px,2.6vw,36px);justify-content:center}

/* Who we are, from the Stodio reference */
.who_row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.who_t{margin-top:clamp(18px,2vw,28px);font-size:clamp(32px,4.3vw,62px);font-weight:500;letter-spacing:-.04em;line-height:1.3;max-width:15.2em}
.who_t .keep{color:var(--muted)}
.about{flex:none;display:inline-flex;align-items:center;gap:12px;margin-bottom:.5em;padding-bottom:12px;font-size:clamp(15px,1.5vw,21px);font-weight:500;text-transform:uppercase;letter-spacing:-.01em;background:repeating-linear-gradient(90deg,rgba(229,53,43,.6) 0 2px,transparent 2px 5px) 0 100%/100% 1px no-repeat}
.about svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .6s var(--ease)}
.about:hover svg{transform:translateX(6px)}

/* How we work: four columns and live clocks */
.how_grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,72px)}
.how_item{padding-top:16px;border-top:1px solid var(--line2)}
.how_n{font-size:13px;color:var(--muted)}
.how_t{margin-top:clamp(40px,4.6vw,72px);font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.how_d{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted2);max-width:28ch}
.clocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(48px,5vw,80px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line2)}
.clock b{display:block;font-size:clamp(30px,3.2vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.clock span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted2)}

/* Process (direction 2) */
.proc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,72px)}
.proc_n{font-size:clamp(60px,7vw,110px);font-weight:500;letter-spacing:-.06em;line-height:.9;color:var(--line2)}
.proc_t{margin-top:clamp(16px,2vw,28px);font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.035em}
.proc_d{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted2);max-width:26ch}

/* Questions (direction 3) */
.faq{margin-top:clamp(28px,3vw,44px);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(18px,1.8vw,26px) 0;font-size:clamp(18px,1.9vw,28px);font-weight:500;letter-spacing:-.03em;cursor:pointer}
.faq summary i{position:relative;width:28px;height:28px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);transition:transform .5s var(--ease)}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq p{padding:0 0 clamp(18px,1.8vw,26px);max-width:58ch;font-size:16px;line-height:1.55;color:var(--muted2)}

/* Client work gate: the catalogue opens in its own tab */
.pf_gate{position:relative;margin-top:clamp(24px,2.6vw,38px);overflow:hidden;background:var(--soft)}
.pf_blur{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;filter:blur(18px) saturate(1.15);transform:scale(1.06);opacity:.85}
.pf_blur img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.pf_blur img:nth-child(even){aspect-ratio:1;margin-top:18%}
.pf_card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,90%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 26px;border-radius:18px;background:rgba(255,255,255,.94);color:#0F0F0F;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 70px rgba(0,0,0,.14);text-align:center}
.pf_ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#0F0F0F;color:#fff}
.pf_ic .lock{width:16px;height:16px}
.pf_card h3{font-size:22px;font-weight:600;letter-spacing:-.03em}
.pf_card p{font-size:14.5px;color:#5C5C5C;line-height:1.45}
.pf_form{display:flex;gap:6px;width:100%;padding:5px;border-radius:999px;background:#F2F2F2}
.pf_form input{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:0 16px;font-size:15px}
.pf_form .btn{--btn_h:40px;padding:0 18px;background:#0F0F0F;color:#fff}
.pf_form.shake{animation:shake .45s var(--ease2)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.busy .pf_form{opacity:.6;pointer-events:none}
.pf_err{min-height:18px;font-size:13.5px;color:var(--accent)}
.pf_req{font-size:13.5px;color:#5C5C5C;border-bottom:1px solid #D8D8D8}
.pf_open{display:none;flex-direction:column;align-items:center;gap:12px}
.pf_open p{font-size:14.5px;color:#5C5C5C}
.pf_open .btn{background:#0F0F0F;color:#fff}
.pf_open button{font-size:13.5px;color:#5C5C5C;border-bottom:1px solid #D8D8D8}
.is_open .pf_form,.is_open .pf_err,.is_open .pf_req,.is_open .pf_card>p{display:none}
.is_open .pf_open{display:flex}
.pf_note{margin-top:14px;font-size:13.5px;color:var(--muted2)}

/* Contact: direct first, form second */
.ct_grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);margin-top:clamp(14px,1.4vw,20px);align-items:start}
.ct_mail{display:inline-block;margin-top:clamp(8px,1vw,14px);font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.1;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:4px;transition:background-size .8s var(--ease)}
.ct_mail:hover{background-size:100% 2px}
.ct_meta{margin-top:18px;font-size:15px;color:var(--muted2)}
.ct_social{margin-top:clamp(28px,3vw,40px)}
.ct_social a{display:flex;align-items:center;gap:12px;padding:clamp(14px,1.3vw,18px) 0;border-top:1px solid var(--line);font-size:15.5px;font-weight:500;transition:padding .5s var(--ease)}
.ct_social a:last-child{border-bottom:1px solid var(--line)}
.ct_social a:hover{padding-left:8px}
.ct_social .ico{width:20px;height:20px;flex:none}
.ct_social .ne{width:12px;height:12px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.5}
.ct_form{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);margin-top:clamp(50px,6vw,90px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.ct_form_l{font-size:clamp(22px,2.1vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.25;max-width:18em}
.ct_form_s{margin-top:12px;font-size:15px;color:var(--muted2);max-width:32em}
.cform{display:grid;gap:16px}
.cform_row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:block;min-width:0}
.field>span{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500}
.field input,.field textarea{width:100%;background:var(--soft);border:1px solid transparent;border-radius:10px;padding:13px 16px;font-size:16px;outline:none;transition:border-color .3s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field textarea{resize:vertical;min-height:120px;line-height:1.45}
.field input:focus,.field textarea:focus{border-color:var(--fg)}
.field.bad input{border-color:var(--accent)}
.cform_send{justify-self:start;margin-top:6px}
.form_err{display:none;font-size:14px;color:var(--accent)}
.form_err.on{display:block}
.form_done{display:none}
.form_done h3{font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.04em}
.form_done p{margin-top:8px;color:var(--muted2)}
.is_sent .cform{display:none}
.is_sent .form_done{display:block}

/* Footer */
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px var(--gut) 26px;border-top:1px solid var(--line);font-size:13px;color:var(--muted2)}
.band .foot{margin-top:calc(var(--sp) * .5);padding-left:0;padding-right:0}
.foot nav{display:flex;gap:20px}
.foot a:hover{color:var(--fg)}
.foot .credits{flex-basis:100%;font-size:11.5px;color:var(--muted)}

/* Responsive */
@media (max-width:1250px){.mosaic{grid-template-columns:repeat(7,minmax(0,1fr))}.logo_tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:980px){
  .tb{grid-template-columns:1fr auto}
  .tb .pt{display:none}
  .nb{grid-template-columns:1fr auto}
  .nb_links,.nb_cta{display:none}
  .nb_menu{display:block}
  .hx_top{grid-template-columns:1fr auto}
  .hx_d{grid-column:1/-1;grid-row:2;padding-top:0}
  .who_row,.hm_row,.hd_row{flex-direction:column;align-items:flex-start}
  .how_grid,.proc,.clocks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .ct_grid,.ct_form{grid-template-columns:1fr}
  .ct_form{gap:20px}
  .logo_tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mosaic{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pf_blur{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wall_band{height:clamp(640px,95vw,800px)}
  .wall_copy{width:min(620px,92%);top:auto;bottom:40px}
}
@media (max-width:620px){
  .hx_img{aspect-ratio:4/5}
  .circle{display:none}
  .hx_top{grid-template-columns:1fr}
  .pf_blur{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cform_row{grid-template-columns:1fr}
  .wall_band{height:700px}
  .wall_h br,.stmt_h br{display:none}
  .logos{gap:18px 26px}
  .logo_img{height:calc(18px * var(--lh,1))}
  .logo_tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mosaic{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .stmt{height:clamp(480px,80vh,640px)}
  .strip_tile{width:110px}
  .clocks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* ===== Round 7 components ===== */

/* Codot style nav: logo, place and time, menu */
.cn{position:fixed;z-index:70;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 var(--gut);color:#fff;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:background .5s var(--ease),color .5s,box-shadow .5s,transform .7s var(--ease)}
.cn.is_solid{background:rgba(255,255,255,.92);color:#0F0F0F;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 #ECECEC}
.cn.is_hidden{transform:translateY(-100%)}
.cn .logo{text-transform:none;letter-spacing:-.025em}
.cn_meta{text-align:center;line-height:1.4}
.cn_menu{justify-self:end;display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;background:#fff;color:#0F0F0F;font-size:11.5px;font-weight:600;letter-spacing:.06em}
.cn.is_solid .cn_menu{background:#0F0F0F;color:#fff}
.cn_menu i{display:block;width:12px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}

/* Wordmark hero: full bleed photo, small meta, the name along the bottom edge, a floating work card */
.hw{position:relative;height:100svh;min-height:640px;max-height:1040px;background:#111;color:#fff;overflow:hidden}
.hw_slides{position:absolute;inset:0}
.hw::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.05) 35%,rgba(0,0,0,.05) 60%,rgba(0,0,0,.45));pointer-events:none}
.hw_meta{position:absolute;z-index:3;left:var(--gut);top:clamp(120px,18vh,180px);max-width:30em;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.hw_meta i{display:block;font-style:normal;margin-bottom:12px;opacity:.75}
.hw_wrap{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:-.04em}
.hw_word{display:block;margin:0;font-weight:700;letter-spacing:-.05em;line-height:.8;text-transform:uppercase;white-space:nowrap}
.hw_word sup{font-size:.42em;font-weight:600;vertical-align:top;position:relative;top:.1em;margin-left:.02em}
.hw_card{position:absolute;z-index:4;right:var(--gut);bottom:clamp(170px,28vh,260px);width:124px;padding:8px 8px 10px;background:#fff;color:#0F0F0F;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hw_card .thumb{position:relative;width:100%;aspect-ratio:1.5;overflow:hidden;background:#ddd;margin:10px 0 10px}
.hw_card .thumb img{width:100%;height:100%;object-fit:cover;filter:blur(3px)}
.hw_card .thumb .lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;color:#fff}
.hw_card .top{display:flex;justify-content:space-between;align-items:center}
.hw_card .top .logo{font-size:12px}

/* Codot statement: mark on the left, statement on the right */
.st{display:grid;grid-template-columns:clamp(60px,12vw,180px) minmax(0,1fr);gap:24px;align-items:start}
.st .mark{width:30px;height:30px}
.st_t{font-size:clamp(26px,2.7vw,38px);font-weight:500;letter-spacing:-.032em;line-height:1.25;max-width:22em}

/* Approach: label and image cluster left, text right */
.ap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-top:28px;border-top:1px solid var(--line)}
.ap_l{display:flex;flex-direction:column;justify-content:space-between;gap:120px}
.cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cap span{color:var(--muted)}
.ap_cl{display:flex;align-items:center;gap:10px}
.ap_cl i{display:block;width:84px;height:62px;overflow:hidden;border-radius:4px;background:var(--soft)}
.ap_cl i.round{width:62px;height:62px;border-radius:50%}
.ap_cl img{width:100%;height:100%;object-fit:cover}
.ap_t{font-size:17px;font-weight:600;letter-spacing:-.02em}
.ap_p{margin-top:22px;font-size:13.5px;line-height:1.65;color:var(--muted2);max-width:44em}
.ap_p+.ap_p{margin-top:16px}
.ul{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}

/* Numbers */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.num_n{font-size:clamp(48px,5.8vw,92px);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.num_l{margin-top:12px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}

/* Featured case study, locked */
.feat_head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.feat_head .cap{color:var(--muted2)}
.feat_t{font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.2;max-width:18em}
.feat{position:relative;display:block;width:100%;margin-top:clamp(22px,2.4vw,34px);aspect-ratio:2.1;overflow:hidden;background:var(--soft);cursor:pointer}
.feat img{width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(1.1);transform:scale(1.1)}
.feat_lk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;background:#fff;color:#0F0F0F;font-size:13.5px;font-weight:500;white-space:nowrap}
.feat_cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:12.5px;color:var(--muted2)}

/* Locked work cards */
.wk3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(22px,2.4vw,34px)}
.wk{display:block;width:100%;text-align:left;cursor:pointer}
.wk_img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.wk_img img{width:100%;height:100%;object-fit:cover;filter:blur(12px) saturate(1.1);transform:scale(1.12)}
.wk_img .lk{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:#fff;color:#0F0F0F;font-size:11.5px;font-weight:500}
.wk_cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12.5px}
.wk_cap b{font-weight:600}
.wk_cap span{color:var(--muted2)}
.wk_cap small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Avatar stack */
.avs{display:inline-flex;align-items:center;gap:12px}
.avs_row{display:flex}
.avs_row i{display:block;width:34px;height:34px;border-radius:50%;overflow:hidden;border:2px solid var(--bg);margin-left:-9px;background:var(--soft)}
.avs_row i:first-child{margin-left:0}
.avs_row img{width:100%;height:100%;object-fit:cover}
.avs_row b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-left:-9px;background:var(--soft);font-size:10px;font-weight:600;border:2px solid var(--bg)}
.avs span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}

/* Bubble cluster */
.bub{position:relative;aspect-ratio:2.3;margin-top:clamp(28px,3vw,44px)}
.b{position:absolute;left:var(--x);top:var(--y);width:var(--d);aspect-ratio:1;margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;overflow:hidden;background:var(--soft);transform:translateY(var(--rise,0px))}
.b img{width:100%;height:100%;object-fit:cover}
.b.more{display:grid;place-items:center;overflow:visible;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);font-size:12.5px;font-weight:500}
.b.more:hover{background:var(--fg);color:var(--bg)}

/* Quote */
.quote{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.quote b{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.quote small{font-size:12px;color:var(--muted)}
.quote p{margin-top:8px;max-width:38em;font-size:15.5px;line-height:1.55;color:var(--muted2)}

/* Release timeline: the all in one story */
.tl{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(40px,5vw,72px)}
.tl::before{content:'';position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line2)}
.tl_i{position:relative;padding-top:30px}
.tl_i::before{content:'';position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--accent)}
.tl_n{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tl_t{margin-top:10px;font-size:clamp(20px,1.9vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.tl_d{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted2);max-width:22ch}

/* Filmstrip */
.film{overflow:hidden}
.film_row{display:flex;gap:3px;width:max-content;animation:marq 90s linear infinite}
.film:hover .film_row{animation-play-state:paused}
.film_row i{display:block;flex:none;width:clamp(72px,7.2vw,112px);aspect-ratio:1;overflow:hidden;background:var(--soft)}
.film_row img{width:100%;height:100%;object-fit:cover}
.film.locked img{filter:blur(6px) saturate(1.1);transform:scale(1.1)}

/* Announcement bar and static nav (direction 2) */
.ann{display:flex;justify-content:center;align-items:center;gap:8px;height:34px;background:#F3F3F3;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.ann a{font-weight:600;border-bottom:1px solid currentColor}
.nbs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 var(--gut);font-size:14px}
.nbs_links{display:flex;gap:26px;color:var(--muted2)}
.nbs_links a:hover{color:var(--fg)}
.nbs .btn{justify-self:end;--btn_h:42px;padding:0 18px}

/* Split hero */
.hs{padding:clamp(40px,6vw,80px) var(--gut) 0;text-align:center}
.hs_badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.hs_h{margin:clamp(16px,2vw,28px) auto 0;max-width:11em;font-size:clamp(42px,6.2vw,96px);font-weight:500;letter-spacing:-.05em;line-height:.98}
.hs_cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;margin-top:clamp(28px,3.4vw,52px);text-align:left}
.hs_dark{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;min-height:560px;padding:clamp(28px,3vw,48px);background:#0F0F0F;color:#fff;text-align:center;--bg:#0F0F0F;--fg:#fff;--soft:#1B1B1B;--muted2:#B3B3B3;--line2:rgba(255,255,255,.26);--btn_hover:#E6E6E6}
.hs_tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.1);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.hs_dark h2{max-width:13em;font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
.hs_photo{position:relative;min-height:560px;overflow:hidden;background:#111}
.hs_check{position:absolute;z-index:5;left:50%;bottom:28px;transform:translateX(-50%);display:grid;gap:8px;width:min(300px,84%);padding:14px 16px;background:#fff;color:#0F0F0F;border-radius:10px;font-size:13px}
.hs_check span{display:flex;align-items:center;gap:10px}
.hs_check span::before{content:'';width:14px;height:14px;border-radius:50%;background:#0F0F0F;flex:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7'/%3E%3Cpath d='M4 7.2l2 2 4-4' stroke='%23fff' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7'/%3E%3Cpath d='M4 7.2l2 2 4-4' stroke='%23fff' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") center/contain no-repeat}

/* Bracket label and who statement (direction 2) */
.brk{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.6;color:var(--muted2)}
.who2{display:grid;grid-template-columns:clamp(120px,18vw,260px) minmax(0,1fr);gap:24px;align-items:start}
.who2_t{font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.22;max-width:22em}
.who2_meta{display:flex;justify-content:space-between;margin-top:clamp(22px,2.4vw,34px);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.blk{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:clamp(22px,2.4vw,34px)}
.blk_n{display:flex;flex-direction:column;justify-content:space-between;min-height:260px;padding:22px;background:var(--soft)}
.blk_n b{font-size:clamp(48px,5.4vw,84px);font-weight:500;letter-spacing:-.05em;line-height:1}
.blk_n span{font-size:13px;color:var(--muted2)}
.blk_img{position:relative;overflow:hidden;background:#111;min-height:260px}
.blk_img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blk_t{padding:22px 0 0 8px;font-size:14.5px;line-height:1.6;color:var(--muted2)}

/* Grid hero (Studio Aton) */
.hg{position:relative;height:100svh;min-height:600px;max-height:1040px;background:#0C0C0C;overflow:hidden}
.hg_grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(50,minmax(0,1fr));grid-template-rows:1fr 1.83fr 1fr;gap:clamp(5px,.55vw,8px)}
.hg_grid figure{position:relative;margin:0;overflow:hidden;background:#1B1B1B}
.hg_grid img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);opacity:0;transition:transform 2.6s var(--ease),opacity 1.4s var(--ease);transition-delay:calc(var(--k) * 90ms)}
.is_loaded .hg_grid img{transform:scale(1);opacity:1}
.hg_grid .c1{grid-area:1/1/2/26}.hg_grid .c2{grid-area:1/26/2/51}
.hg_grid .c3{grid-area:2/1/3/14}.hg_grid .c4{grid-area:2/14/3/37}.hg_grid .c5{grid-area:2/37/3/51}
.hg_grid .c6{grid-area:3/1/4/26}.hg_grid .c7{grid-area:3/26/4/51}
.hg::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.3),transparent 15%,transparent 65%,rgba(0,0,0,.35))}
.hg_wrap{position:absolute;z-index:3;left:calc(var(--gut) + 4px);right:calc(var(--gut) + 4px);bottom:clamp(10px,3.4vw,50px);display:flex;align-items:center;color:#fff;pointer-events:none}
.hg_word{font-size:10.4vw;font-weight:600;letter-spacing:-.05em;line-height:1;white-space:nowrap}
.hg_rule{flex:1;height:max(1.5px,.08vw);margin:0 .2em;background:rgba(255,255,255,.85)}
.hg_reg{font-size:7.5vw;font-weight:500;line-height:1;align-self:flex-start;margin-top:.1em;margin-left:.08em}
.nm{position:fixed;z-index:70;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 var(--gut);color:#fff;font-size:13.5px;transition:background .5s var(--ease),color .5s,box-shadow .5s,transform .7s var(--ease)}
.nm.is_solid{background:rgba(255,255,255,.92);color:#0F0F0F;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 #ECECEC}
.nm.is_hidden{transform:translateY(-100%)}
.nm nav{display:flex;gap:clamp(16px,2vw,28px)}
.nm nav a{opacity:.85}
.nm nav a:hover{opacity:1}

/* Latest projects: giant heading with a locked stack */
.lp_h{text-align:center;font-size:clamp(76px,13.4vw,200px);font-weight:600;letter-spacing:-.06em;line-height:.86}
.lp_stack{position:relative;height:clamp(420px,46vw,660px);margin-top:calc(clamp(76px,13.4vw,200px) * -.3)}
.lp_card{position:absolute;left:50%;top:0;height:100%;overflow:hidden;transform:translate(-50%,var(--y,0));background:#333;box-shadow:0 -10px 30px rgba(0,0,0,.08);cursor:pointer}
.lp_card img{width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(1.1);transform:scale(1.1)}
.lp_card.k0{width:min(50%,640px);--y:0}
.lp_card.k1{width:min(58%,740px);--y:18px}
.lp_card.k2{width:min(66%,840px);--y:38px}
.lp_card .feat_lk{z-index:2}

/* Clavo rows and about block */
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px}
.ab_p{margin-top:clamp(28px,3.4vw,52px);font-size:clamp(24px,2.85vw,41px);font-weight:400;letter-spacing:-.03em;line-height:1.36;text-indent:14.5%}
.ab_foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px;align-items:end;margin-top:clamp(14px,1.6vw,24px)}
.soc p{padding-bottom:10px;font-size:14px}
.soc a{display:flex;justify-content:space-between;align-items:center;padding:clamp(13px,1.3vw,18px) 0;border-top:1px solid var(--line);font-size:14.5px}
.soc a:last-child{border-bottom:1px solid var(--line)}
.soc svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5}
.pill_blk{--btn_h:46px;padding:0 6px 0 18px;gap:12px;justify-self:start}
.pill_blk .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--fg)}
.pill_blk .ico svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Card hero (Stodio) */
.hc{padding:clamp(8px,1vw,14px)}
.hc_card{position:relative;height:calc(100svh - clamp(16px,2vw,28px));min-height:640px;max-height:1000px;background:#111;color:#fff;overflow:hidden;isolation:isolate}
.hc_card::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.3) 55%,rgba(0,0,0,.45)),linear-gradient(transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.hc_nav{position:absolute;z-index:3;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:clamp(76px,8vw,110px);padding:0 clamp(20px,3vw,44px)}
.hc_nav nav{display:flex;gap:clamp(18px,2vw,30px);font-size:14px}
.hc_nav .btn{justify-self:end;--btn_h:42px;background:#fff;color:#0F0F0F;font-size:13.5px}
.hc_top{position:absolute;z-index:3;left:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px);top:clamp(150px,12vw,180px)}
.hc_top .sq{color:#fff}
.hc_h{margin-top:clamp(18px,2.2vw,32px);max-width:9.8em;font-size:clamp(46px,6.6vw,100px);font-weight:500;letter-spacing:-.04em;line-height:1.08}
.hc_side{position:absolute;z-index:3;right:clamp(20px,3vw,44px);bottom:clamp(70px,8vw,112px);width:min(420px,36%);font-size:clamp(18px,1.9vw,28px);line-height:1.34;letter-spacing:-.02em}
.hc_side .btns{margin-top:clamp(18px,2vw,28px)}
.hc_side .btn.red{background:var(--accent);color:#fff}
.hc_tags{position:absolute;z-index:3;left:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px);bottom:clamp(24px,2.6vw,38px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));font-size:14px;color:rgba(255,255,255,.85)}
.hc_tags span::before{content:'+';margin-right:8px;font-weight:300}
.hc_card .slide_dots{display:none}
.strip_head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;height:clamp(84px,7vw,100px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip_head .lab{display:flex;align-items:center;gap:14px;padding:0 clamp(22px,3vw,40px) 0 var(--gut);font-size:12px;font-weight:600;text-transform:uppercase;line-height:1.4;letter-spacing:.01em}
.star{width:30px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.marq{position:relative;overflow:hidden;height:100%;display:flex;align-items:center}
.marq_track{display:flex;width:max-content;animation:marq 60s linear infinite}
.marq_group{display:flex;align-items:center;gap:clamp(48px,5vw,80px);padding-right:clamp(48px,5vw,80px)}
.marq .logo_cell{height:auto}

/* Portrait strip (single row, bigger tiles) */
.pstrip{overflow:hidden}
.pstrip_row{display:flex;gap:clamp(8px,.9vw,13px);width:max-content;animation:marq 110s linear infinite}
.pstrip:hover .pstrip_row{animation-play-state:paused}
.pstrip_row i{display:block;flex:none;width:clamp(220px,24vw,360px);aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.pstrip_row img{width:100%;height:100%;object-fit:cover}

/* Bubble hero */
.hb{padding:clamp(130px,14vw,180px) var(--gut) 0;text-align:center}
.hb_h{margin:0 auto;max-width:11em;font-size:clamp(42px,5.8vw,88px);font-weight:500;letter-spacing:-.05em;line-height:.98}
.hb_s{margin:clamp(16px,1.8vw,24px) auto 0;max-width:34em;font-size:clamp(15px,1.3vw,18px);color:var(--muted2)}
.hb .btns{justify-content:center;margin-top:clamp(20px,2.2vw,30px)}

/* Filmstrip hero */
.hf{padding:clamp(110px,12vw,150px) 0 0}
.hf_in{padding:0 var(--gut)}
.hf_word{display:block;font-weight:700;letter-spacing:-.06em;line-height:.84;text-transform:uppercase;white-space:nowrap}
.hf_word sup{font-size:.4em;font-weight:600;vertical-align:top;position:relative;top:.1em;margin-left:.03em;color:var(--accent)}
.hf_row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(18px,2vw,30px);padding-bottom:clamp(18px,2vw,30px)}
.hf_d{max-width:30em;font-size:clamp(15px,1.3vw,18px);line-height:1.45}
.hf_meta{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);text-align:right;line-height:1.7}

/* Campaign chapters */
.ch{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
.ch.flip .ch_txt{order:2}
.ch_n{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ch_t{margin-top:14px;font-size:clamp(36px,4.6vw,68px);font-weight:500;letter-spacing:-.045em;line-height:1}
.ch_d{margin-top:16px;font-size:16px;line-height:1.55;color:var(--muted2);max-width:30em}
.ch_img{aspect-ratio:4/3;overflow:hidden;background:#111}
.ch_img img{width:100%;height:100%;object-fit:cover}

@media (max-width:980px){
  .cn{grid-template-columns:1fr auto}.cn_meta{display:none}
  .st{grid-template-columns:1fr}
  .ap{grid-template-columns:1fr}.ap_l{gap:28px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .wk3{grid-template-columns:1fr}
  .tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}.tl::before{display:none}
  .hs_cards{grid-template-columns:1fr}.hs_dark,.hs_photo{min-height:460px}
  .nbs_links{display:none}
  .who2{grid-template-columns:1fr}
  .blk{grid-template-columns:1fr}
  .hg_grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr .9fr 1.25fr 1fr}
  .hg_grid .c1{grid-area:1/1/2/7}.hg_grid .c2{grid-area:2/1/3/4}.hg_grid .c3{grid-area:2/4/3/7}.hg_grid .c4{grid-area:3/1/4/7}.hg_grid .c5{display:none}.hg_grid .c6{grid-area:4/1/5/4}.hg_grid .c7{grid-area:4/4/5/7}
  .hg_word{font-size:12vw}
  .ab_foot{grid-template-columns:1fr}
  .hc_nav nav,.hc_nav .btn{display:none}.hc_side{position:absolute;left:clamp(20px,3vw,44px);right:auto;width:auto}.hc_tags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch{grid-template-columns:1fr}.ch.flip .ch_txt{order:0}
  .bub{aspect-ratio:1.4}
}
@media (max-width:620px){
  .hw_card{display:none}
  .hw_meta{top:100px}
  .hf_row{flex-direction:column;align-items:flex-start}.hf_meta{text-align:left}
  .lp_stack{height:120vw}.lp_card.k0{width:74%}.lp_card.k1{width:84%}.lp_card.k2{width:94%}
  .ab_p{text-indent:0}
  .strip_head{grid-template-columns:1fr;height:auto}.strip_head .lab{padding:16px var(--gut)}.marq{height:70px}
}

/* Round 7 extras */
.cn.on_light:not(.is_solid){color:#0F0F0F}
.cn.on_light:not(.is_solid) .cn_menu{background:#0F0F0F;color:#fff}
.nm.on_light:not(.is_solid){color:#0F0F0F}
.nm.lazy:not(.is_solid){opacity:0;pointer-events:none}
.nm.lazy.is_solid{opacity:1;pointer-events:auto}
.hw .slide_dots{bottom:auto;top:clamp(120px,18vh,180px);right:var(--gut)}
.nums.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec.flushx{padding-left:0;padding-right:0}
.sec.flushx .in{padding:0 var(--gut)}
.hc_menu{display:none}
.lp_card.k2 .feat_lk{position:absolute}
.hb_av{display:flex;justify-content:center;margin-top:clamp(20px,2.2vw,30px)}
@media (max-width:980px){
  .hc_menu{display:inline-flex;justify-self:end;font-size:14px;font-weight:500}
  .nums.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .nums.n3{grid-template-columns:1fr}
}

/* Round 7 fixes */
.hb.bubbles{position:relative;min-height:clamp(640px,92svh,900px);padding-top:clamp(150px,18vh,200px)}
.hb.bubbles .hb_h{position:relative;z-index:2;max-width:9.5em;font-size:clamp(38px,5.2vw,76px)}
.hb.bubbles .hb_s,.hb.bubbles .btns{position:relative;z-index:2}
.hb.bubbles .bub{position:absolute;inset:0;margin:0;aspect-ratio:auto}
.ab_p *{text-indent:0}
.lp_stack{height:calc(clamp(420px,46vw,660px) + 80px);margin-top:calc(clamp(76px,13.4vw,200px) * -.12)}
.lp_card{height:calc(100% - 80px)}
.lp_card.k0{width:min(58%,700px);--y:0}
.lp_card.k1{width:min(67%,800px);--y:40px}
.lp_card.k2{width:min(76%,900px);--y:80px}
.lp_card.k0 img,.lp_card.k1 img{opacity:.55}
@media (max-width:980px){
  .hb.bubbles{min-height:0}
  .hb.bubbles .bub{position:relative;inset:auto;aspect-ratio:1.25;margin-top:28px}
  .lp_stack{height:calc(110vw + 60px)}.lp_card{height:calc(100% - 60px)}.lp_card.k0{width:74%}.lp_card.k1{width:84%;--y:30px}.lp_card.k2{width:94%;--y:60px}
}
.lp_card.k0,.lp_card.k1{background:#DCDCDC;box-shadow:none}
.lp_card.k1{background:#C9C9C9}
.lp_card.k0 img,.lp_card.k1 img{display:none}
.lp_card.k2{background:#222}
/* Phone fixes */
.nbs_menu{display:none}
@media (max-width:980px){
  .nbs{grid-template-columns:1fr auto auto;gap:14px}
  .nbs_menu{display:inline-flex;font-size:14px;font-weight:500}
  .ann{height:auto;min-height:34px;padding:8px var(--gut);flex-wrap:wrap;text-align:center;line-height:1.5}
}
@media (max-width:620px){
  .hw .slide_dots{display:none}
  .nm nav a:not([data-menu-btn]){display:none}
  .b.more{--d:16%;font-size:12px}
}
/* Review only: direction number at the top of the page */
.dirno{position:fixed;z-index:95;top:0;left:50%;transform:translateX(-50%);height:22px;padding:0 12px;border-radius:0 0 7px 7px;background:#E5352B;color:#fff;font-size:12.5px;font-weight:700;line-height:22px;letter-spacing:.02em;pointer-events:none}

/* ===== Board 2 (E directions) ===== */
.ht{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(72px + 20px) var(--gut) clamp(28px,3vw,48px)}
.ht_meta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.ht_h{margin-top:auto;padding-top:60px;max-width:12.5em;font-size:clamp(40px,6.2vw,104px);font-weight:500;letter-spacing:-.045em;line-height:1}
.ht_row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(24px,2.8vw,44px)}
.ht_s{max-width:32em;font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:var(--muted2)}
.lgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:clamp(24px,2.6vw,38px)}
.lgrid .logo_cell{justify-content:center;height:clamp(84px,7.4vw,112px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.lgrid .logo_img{height:calc(18px * var(--lh,1))}
.fgrid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin-top:clamp(24px,2.6vw,38px)}
.fgrid figure{aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.fgrid img{width:100%;height:100%;object-fit:cover}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.head p.lead{margin-top:clamp(12px,1.2vw,18px)}
.head .note{max-width:26em;font-size:14.5px;line-height:1.5;color:var(--muted2);text-align:right}
.lines{margin-top:clamp(28px,3vw,48px);border-top:1px solid var(--line)}
.lines div{display:grid;grid-template-columns:clamp(60px,8vw,120px) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:baseline;padding:clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--line)}
.lines small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lines b{font-size:clamp(28px,3.6vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1}
.lines p{font-size:15px;line-height:1.5;color:var(--muted2);max-width:30em}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(40px,5vw,72px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line2)}
.facts b{display:block;font-size:clamp(34px,3.8vw,60px);font-weight:500;letter-spacing:-.045em;line-height:1}
.facts span{display:block;margin-top:10px;font-size:14px;color:var(--muted2);max-width:22em}
.hsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:end;padding:calc(72px + 24px) var(--gut) 0}
.hsplit .hx_img{margin:0;aspect-ratio:4/5;max-height:calc(100svh - 120px)}
.hsplit_h{font-size:clamp(40px,5.4vw,88px);font-weight:500;letter-spacing:-.045em;line-height:1}
.hsplit_s{margin-top:clamp(18px,2vw,30px);max-width:30em;font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:var(--muted2)}
.hfull{position:relative;height:100svh;min-height:620px;background:#111;color:#fff;overflow:hidden}
.hfull::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,.25),transparent 30%,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.hfull_in{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(28px,3.4vw,52px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hfull_h{max-width:10em;font-size:clamp(40px,6vw,100px);font-weight:500;letter-spacing:-.045em;line-height:.98}
.hfull_s{max-width:26em;font-size:clamp(15px,1.2vw,17px);line-height:1.45;opacity:.9}
.hfull .slide_dots{display:none}
.dirno.wide{padding:0 12px;white-space:nowrap}
@media (max-width:980px){.lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.lines div{grid-template-columns:1fr}.facts{grid-template-columns:1fr;gap:28px}.hsplit{grid-template-columns:1fr}.hsplit .hx_img{aspect-ratio:4/5}.hfull_in{flex-direction:column;align-items:flex-start}.head{flex-direction:column;align-items:flex-start}.head .note{text-align:left}}
@media (max-width:620px){.fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Landing video */
.lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lv_sh{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.18) 30%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.6));pointer-events:none}
.lv_btn{position:absolute;z-index:6;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}
.lv_btn i{display:block;width:8px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.lv_btn.paused i{width:0;height:0;border:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.hA h1,.hA>span,.hA .n8_list{z-index:2}
.hh1 .lv{opacity:.7}
.hC .lv{opacity:.55}
.hA .c2{display:block;padding:0;background:none;color:#fff;grid-template-columns:none;gap:0;border:0}

.lv_btn b{position:static!important;font-weight:400;font-size:12px;line-height:1;color:#fff;max-width:none}
.lv_btn{left:var(--gut);bottom:clamp(64px,7vh,84px);transform:none}
.hA .c3{bottom:28px}
.hA.lvr .lv_btn{left:auto;right:var(--gut);bottom:clamp(64px,7vh,84px)}
.sn_toast{position:fixed;z-index:400;left:50%;bottom:28px;transform:translate(-50%,16px);display:flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:#0F0F0F;color:#fff;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .25s,transform .4s cubic-bezier(.16,1,.3,1)}
.sn_toast.on{opacity:1;transform:translate(-50%,0)}
.soc_i{display:inline-block;width:1em;height:1em;margin-right:.45em;vertical-align:-.14em;flex:none}
.cla_cols .r.plus{color:var(--muted2,#7A7A7A);cursor:pointer;font-weight:400}
.cla_cols .r.plus i{display:grid;place-items:center;background:transparent;border:1px solid var(--line2,#D8D8D8);font-style:normal;font-size:20px;font-weight:300;color:var(--fg,#0F0F0F)}
.tb7:not(.is_solid) .wm{pointer-events:none}

/* Round: subtler pause, no line over the corner text, header appears after a quarter of the landing */
.hA .c3{border-top:0!important;margin-top:0!important}
.lv_btn{height:24px;padding:0 9px;gap:6px;background:rgba(255,255,255,.08);opacity:.55;transition:opacity .3s,background .3s}
.lv_btn:hover{opacity:1;background:rgba(255,255,255,.14)}
.lv_btn b{font-size:11px!important}
.lv_btn i{width:6px;height:7px;border-left-width:2px;border-right-width:2px}
.lv_btn.paused i{border-left-width:6px;border-top-width:4px;border-bottom-width:4px}
.hA.lvr .lv_btn{right:calc(var(--gut) + 78px);bottom:25px}
.tb7:not(.is_solid),.dnav:not(.is_solid),.n11:not(.is_solid){opacity:0;pointer-events:none!important;transform:translateY(-10px)}
.tb7,.dnav,.n11{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),background .4s,box-shadow .4s}
.tb7:not(.is_solid) *{pointer-events:none!important}

/* Hover "and many more": square pictures the size of the rows, side by side */
.cla3 .r.plus .pics b,.cla_cols .r.plus .pics b{display:block;width:40px;height:40px;flex:none;border:0!important;border-radius:0!important;margin-left:6px!important;overflow:hidden;opacity:0;transform:translateX(-8px);transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.cla_cols .r.plus .pics b{width:42px;height:42px}
.cla3 .r.plus .pics b img,.cla_cols .r.plus .pics b img{width:100%;height:100%;object-fit:cover}
.cla3 .r.plus .pics,.cla_cols .r.plus .pics{display:inline-flex;margin-left:6px}
.cla3 .r.plus:hover .pics b,.cla_cols .r.plus:hover .pics b{opacity:1!important;transform:none!important}
.cla3 .r.plus:hover .pics b:nth-child(2),.cla_cols .r.plus:hover .pics b:nth-child(2){transition-delay:60ms}
.cla3 .r.plus:hover .pics b:nth-child(3),.cla_cols .r.plus:hover .pics b:nth-child(3){transition-delay:120ms}
.cla3{column-gap:clamp(28px,3.4vw,56px)!important}
.cla_cols{column-gap:clamp(28px,3.4vw,56px)!important}
.cl7>div{padding-right:clamp(24px,3vw,48px)}.cl7>div+div{padding-left:clamp(24px,3vw,48px)}
/* Round portraits: a pill that opens to three more portraits */
.av_pill{display:inline-flex;align-items:center;gap:10px;height:clamp(56px,6.2vw,88px);padding:0 clamp(18px,1.8vw,26px);border-radius:999px;background:#F2F2F2;color:#5C5C5C;font-size:14px;cursor:pointer;transition:background .3s}
.av_pill b{font-weight:500;white-space:nowrap}
.av_pill .pics{display:inline-flex;max-width:0;overflow:hidden;transition:max-width .7s cubic-bezier(.16,1,.3,1)}
.av_pill .pics i{display:block;flex:none;width:clamp(36px,3.8vw,52px);aspect-ratio:1;margin-left:6px;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.7);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.av_pill .pics img{width:100%;height:100%;object-fit:cover}
.av_pill:hover{background:#EAEAEA}
.av_pill:hover .pics{max-width:220px}
.av_pill:hover .pics i{opacity:1;transform:none}
.av_pill:hover .pics i:nth-child(2){transition-delay:70ms}.av_pill:hover .pics i:nth-child(3){transition-delay:140ms}
.av_row{align-items:center}
/* Pause in the very corner on the J sites, Scroll moves beside it */
.hA.lvr .lv_btn{right:var(--gut);bottom:25px}
.hA.lvr .c4{right:calc(var(--gut) + 82px)}
/* Landing contact pill (F7, F8, F12) */
.hA .lpill{position:absolute;z-index:4;top:20px;right:var(--gut);display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.55);color:#fff;font-size:13px;cursor:pointer}
.hA .lpill:hover{background:rgba(255,255,255,.12)}
/* F11 header: name and contact over the landing, menu after scrolling */
.n11:not(.is_solid){opacity:1!important;pointer-events:auto!important;transform:none!important}
.n11:not(.is_solid) nav{opacity:0;pointer-events:none}
.n11 nav{transition:opacity .4s}
.hero11 .lv_btn{left:auto;right:var(--gut);bottom:18px}
.z7.dark .row9 .px i{background:#1E1E1E;color:#BDBDBD}
.z7.dark .tabs9{background:#1A1A1A}
.z7.dark .tabs9 button{color:#8A8A8A}
.z7.dark .tabs9 button.on{background:#2A2A2A;color:#fff;box-shadow:none}
.z7.dark .row9{border-color:rgba(255,255,255,.12)}
.z7.dark .pane9{border-color:rgba(255,255,255,.12)}
/* ===== Round: corners, spacing, "and many more" ===== */
.hA .c1,.hA .c2{top:22px!important}
.hC_in{padding-top:22px!important}
.hA .lpill .di,.lpill .di{position:static!important;max-width:none}
.lpill{position:absolute;z-index:4;top:20px;right:var(--gut);display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.55);color:#fff;font-size:13px;cursor:pointer}
.lpill:hover{background:rgba(255,255,255,.12)}
/* hover pictures: each one more faded than the last */
.r.plus .pics b.mp{opacity:0!important}
.r.plus:hover .pics b.mp{opacity:var(--o)!important;transform:none!important}
b.mp.mono{display:grid!important;place-items:center;background:#ECECEC;color:#7A7A7A;font-size:12px;font-weight:600;letter-spacing:.02em}
/* portrait row: compact pill, then the portraits */
.av_grp{display:inline-flex;align-items:center;cursor:pointer}
.av_pill{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:#F2F2F2;color:#5C5C5C;font-size:13.5px;font-weight:500;white-space:nowrap;transition:background .3s}
.av_grp:hover .av_pill{background:#E6E6E6}
.av_grp .pics{display:inline-flex;max-width:0;overflow:hidden;transition:max-width .8s cubic-bezier(.16,1,.3,1)}
.av_grp .pics i{display:block;flex:none;width:clamp(56px,6.2vw,88px);aspect-ratio:1;margin-left:clamp(12px,1.4vw,20px);border-radius:50%;overflow:hidden;opacity:0;transform:scale(.8);transition:opacity .45s,transform .55s cubic-bezier(.16,1,.3,1)}
.av_grp .pics img{width:100%;height:100%;object-fit:cover}
.av_grp:hover .pics{max-width:480px}
.av_grp:hover .pics i{opacity:var(--o);transform:none}
.av_grp:hover .pics i:nth-child(2){transition-delay:70ms}.av_grp:hover .pics i:nth-child(3){transition-delay:140ms}.av_grp:hover .pics i:nth-child(4){transition-delay:210ms}
/* logo row: ninth cell */
.logo_cell.lmore{display:inline-flex;align-items:center;gap:0;cursor:pointer}
.lm_t{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:#F2F2F2;color:#5C5C5C;font-size:13px;font-weight:500;white-space:nowrap}
.lmore .pics{display:inline-flex;max-width:0;overflow:hidden;transition:max-width .8s cubic-bezier(.16,1,.3,1)}
.lmore .pics b{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:8px;border-radius:10px;opacity:0;transition:opacity .45s}
.lmore:hover .pics{max-width:240px}
.lmore:hover .pics b{opacity:var(--o)}
.band_dark .lm_t{background:#1E1E1E;color:#B3B3B3}
/* capitalised services */
.fc7 li>span:first-child{text-transform:capitalize}
/* services list running off the page (H1) */
.sl11{margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--line2)}
.sl11 .r{display:grid;grid-template-columns:clamp(160px,18vw,260px) minmax(0,1fr);align-items:center;gap:20px;min-height:60px;border-bottom:1px solid var(--line2)}
.sl11 .r b{font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.015em}
.sl11 .px{display:flex;gap:6px;margin-right:calc(var(--gut) * -1);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.15) 92%,transparent);mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.15) 92%,transparent)}
.sl11 .px i{flex:none;font-style:normal;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:#1E1E1E;color:#CFCFCF;font-size:13px;white-space:nowrap}
@media (min-width:981px){.av_row{flex-wrap:nowrap!important}}
.cla_cols .r.plus span,.cla3 .r.plus span{white-space:nowrap}
.cla_cols[style*="repeat(3"] .r{font-size:clamp(14px,1.15vw,17px);gap:12px}
.cla_cols[style*="repeat(3"] .r i{width:38px;height:38px}
.r.plus{position:relative;overflow:visible!important}
.r.plus .pics{position:absolute;left:0;top:calc(100% + 8px);margin:0!important;pointer-events:none}
.r.plus .pics b.mp{margin-left:0!important;margin-right:6px}
/* ===== Black sections (.sd) and light versions of the black services (.slt) ===== */
main>section.sd{background:#0F0F0F!important;color:#fff;--bg:#0F0F0F;--fg:#fff;--muted:#7A7A7A;--muted2:#B3B3B3;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.22);--soft:#1B1B1B}
main>section.sd::before{display:none!important}
.sd .z7_h2,.sd .h,.sd .h6,.sd .s9_h,.sd .z7_blurb,.sd h2,.sd h3{color:#fff}
.sd .z7_p,.sd .p,.sd .p6,.sd .s9_p,.sd .row_lab,.sd .lab6,.sd .cl7h,.sd .cap{color:#A8A8A8}
.sd .tg7 i,.sd .tg7 i+i::before{background:#1E1E1E;color:#8A8A8A}
.sd .logo_img{filter:brightness(0) invert(1)!important}
.sd .logo_img.raster{filter:grayscale(1) invert(1) contrast(1.3)!important;mix-blend-mode:screen}
.sd .cla3 .r,.sd .cla_cols .r{border-color:rgba(255,255,255,.12)}
.sd .cla3 .r:first-child,.sd .cla_cols>div>.r:first-child{border-top-color:rgba(255,255,255,.12)}
.sd .cla3 .r i.lg,.sd .cla_cols .r i.lg{background:#1E1E1E}
.sd .cla3 .r.plus i,.sd .cla_cols .r.plus i{border-color:rgba(255,255,255,.3);color:#fff}
.sd b.mp.mono{background:#1E1E1E;color:#8A8A8A}
.sd .cl7>div+div{border-left-color:rgba(255,255,255,.18)}
.sd .cl7h>span{border-bottom-color:#fff}
.sd .av_pill{background:#1E1E1E;color:#BDBDBD}
.sd .av_grp:hover .av_pill{background:#2A2A2A}
.sd .mix7 figure.lg{background:#1E1E1E}
.sd .mix7 .mp{background:#1E1E1E;color:#A8A8A8}
.sd .pw,.sd .pw8,.sd .z7.cs6 .pw{background:#1A1A1A!important}
.sd .pw input,.sd .pw8 input{color:#fff}
.sd .pw .btn,.sd .pw8 button{background:#fff!important;color:#0F0F0F!important}
.sd .btn8{background:#fff;color:#0F0F0F}.sd .btn8 .ar{background:#EDEDED}
.sd .btn8.lt{background:#1E1E1E;color:#fff}
.sd .btn7{background:#fff;color:#0F0F0F}.sd .btn7 .ar{background:#EDEDED}
.sd .ask7_row .alt a,.sd .z7_req,.sd a.m{color:#fff}
.sd .t2 .rows div,.sd .clk9,.sd .clk9 div,.sd .sv6_clk,.sd .sv6_clk div,.sd .ww11 .clk,.sd .ww11 .clk div{border-color:rgba(255,255,255,.18)}
.sd .ww7 .sv6_clk span,.sd .t2 .rows span,.sd .t2 .rows small{color:#B3B3B3}
.sd .p2 .fc i,.sd .ask7_faces i{border-color:#0F0F0F}
.sd .c2{padding-left:0;padding-right:0;background:transparent}
.sd .c4{border-color:rgba(255,255,255,.22)}
.sd .c4 .st i{border-color:#0F0F0F;background:#1E1E1E}
.sd .names h4{color:#A8A8A8;border-color:#fff}
.sd .names li.more{color:#A8A8A8}
.sd .cs11 .pw,.sd.cs11 .pw{background:#1A1A1A}
.sd.cs11 .pw input{color:#fff}.sd.cs11 .pw .btn{background:#fff;color:#0F0F0F}
.sd .lab11{color:#A8A8A8}
.sd .jk3,.sd.jk3{background:#0F0F0F}
.sd .av_row .av_more{background:#1E1E1E;color:#BDBDBD}
main>section.slt{background:#fff!important;color:#0F0F0F;--bg:#fff;--fg:#0F0F0F;--muted:#9B9B9B;--muted2:#5C5C5C;--line:#ECECEC;--line2:#D8D8D8}
.slt .tg7 i,.slt .tg7 i+i::before{background:#F1F1F1;color:#A0A0A0}
.slt .z7_h2{color:#0F0F0F}
.slt.jmake .rw{border-color:#E6E6E6}.slt.jmake .rws{border-color:#E6E6E6}
.slt.jmake .rw small{color:#9B9B9B}
.slt.jmake .px i,.slt .sl11 .px i{background:#F2F2F2;color:#444}
.slt .fc7>div{border-color:#D8D8D8}
.slt .fc7 h3,.slt .fc7>div:first-child{color:#7A7A7A}
.slt .fc7 li .ex i{background:#F2F2F2;color:#555}
.slt .sl11{border-color:#E2E2E2}.slt .sl11 .r{border-color:#E2E2E2}
/* About sits as close to the top as the page margin */
main>section[id="about"]{padding-top:calc(var(--gut) * 1.6)!important}
/* H1 services: pills start further right and every row runs off the page */
.sl11 .r{grid-template-columns:clamp(220px,26vw,380px) minmax(0,1fr)}
/* Contact Us fixed in the corner, lined up with the menu bar button */
.lpill{position:fixed!important;z-index:125;top:18px;right:var(--gut);height:32px;padding:0 12px!important;box-sizing:border-box;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font-size:13px;gap:8px;display:inline-flex;align-items:center;transition:opacity .3s}
.tb7 .dl.cta{height:32px;padding:0 12px!important;box-sizing:border-box;border:1px solid rgba(15,15,15,.14);background:transparent!important;font-size:13px}
.tb7:not(.is_solid) .dl.cta{border-color:rgba(255,255,255,.55)}
.tb7{height:68px}
html.cp_open .lpill{opacity:0;pointer-events:none}
/* F11 Contact Us like F9 */
.n11 .r a.ct{height:32px;padding:0 12px;gap:8px;background:transparent!important;border:1px solid rgba(255,255,255,.55);color:inherit;font-size:13px}
.n11.is_solid .r a.ct{border-color:rgba(15,15,15,.2);background:transparent!important;color:#0F0F0F}
.n11 .r a.ct .di{position:static}
main>section.slt .tg7 i,main>section.slt .tg7 i+i::before{background:#F1F1F1;color:#A0A0A0}
main>section.sd .tg7 i,main>section.sd .tg7 i+i::before{background:#1E1E1E;color:#8A8A8A}
.hA .lpill,.lpill{top:18px}
body:has(.tb7.is_solid) .lpill{opacity:0;pointer-events:none}
.n11 .r a.ct{box-sizing:border-box}
.n11.is_solid .r a.ct{color:#0F0F0F!important;border-color:rgba(15,15,15,.2)!important;background:transparent!important}
.n11 .r a.ct{height:32px!important;padding:0 12px!important}
section.sd.sd{background:#0F0F0F!important;color:#fff;--bg:#0F0F0F;--fg:#fff;--muted:#7A7A7A;--muted2:#B3B3B3;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.22);--soft:#1B1B1B}
section.slt.slt{background:#fff!important;color:#0F0F0F;--bg:#fff;--fg:#0F0F0F;--muted:#9B9B9B;--muted2:#5C5C5C;--line:#ECECEC;--line2:#D8D8D8}
section.sd.sd .tg7 i,section.sd.sd .tg7 i+i::before{background:#1E1E1E;color:#8A8A8A}
section.slt.slt .tg7 i,section.slt.slt .tg7 i+i::before{background:#F1F1F1;color:#A0A0A0}
section.sd.sd .s9_h,section.sd.sd h2{color:#fff}
.sd .cla3 .r b,.sd .cla_cols .r b,.sd .cla3 .r span{color:#fff}
/* ===== 15 Oct round 2 ===== */
/* Tags sit in the section corner: top space equals the side margin */
section.z7:not(#contact.jl),section.b8:not(#contact.jl),section.jmake,section.jl:not(#contact),section#clients.sd,section.abt,section.ctf,section.st11,section.sv11,section.who11,section.ww11,section.cs11,section.meta11{padding-top:var(--gut)!important}
section.sec#work,section.sec#clients,section.sec#services{padding-top:var(--gut)!important}
section.s9{padding-top:clamp(24px,4vw,72px)!important}
/* "and many more": the four extra logos or faces slide in to the right of the text */
.r.plus .pm_t{position:relative;white-space:nowrap}
.r.plus .pm_t .pics{position:absolute!important;left:calc(100% + 14px)!important;top:50%!important;transform:translateY(-50%);display:flex!important;margin:0!important;pointer-events:none}
.r.plus .pm_t .pics b.mp{margin:0 6px 0 0!important;transform:translateX(-10px)}
.r.plus:hover .pm_t .pics b.mp{transform:none!important}
/* J1 and F3 faces row: extra faces extend to the right, existing faces never move or shrink */
.av_row figure{flex:none!important}
.av_row:has(.av_grp){width:100%!important;max-width:none!important}
.av_grp{position:relative;flex:none;--av:clamp(56px,6.2vw,88px);--avg:clamp(12px,1.4vw,20px);margin-right:calc((var(--av) + var(--avg)) * 4)}
.av_grp .pics{position:absolute!important;left:100%;top:50%;transform:translateY(-50%);max-width:none!important;overflow:visible!important;display:flex}
.av_grp .pics i{width:var(--av)!important;margin-left:var(--avg)!important;transform:translateX(-14px)!important}
.av_grp:hover .pics i{transform:none!important}
main>section.jmake.jmake,main>section.jl.jl:not(#contact){padding-top:var(--gut)!important}
section.s9.s9.s9{padding-top:clamp(24px,4vw,72px)!important}
.zx>.tg7{margin-top:0!important}
.sd .c2{padding-top:0!important}
main>section[id="about"]:not(.s9){padding-top:var(--gut)!important}
section#clients.s9.s9{padding-top:clamp(24px,4vw,72px)!important}
.r.plus .pm_t .pics{left:calc(100% + 12px)!important}
.r.plus .pm_t .pics b.mp{width:34px!important;height:34px!important;margin:0 5px 0 0!important;font-size:10px}
.r.plus .pm_t .pics b.mp.mono{overflow:hidden;white-space:nowrap}
.r.plus>.pm_t{display:flex!important;align-items:center;gap:12px;min-width:0;width:100%}
.r.plus .pm_t .pics{position:static!important;transform:none!important;flex:1 1 auto;min-width:0;display:flex!important;gap:5px;max-width:160px}
.r.plus .pm_t .pics b.mp{flex:0 1 34px;width:auto!important;height:auto!important;aspect-ratio:1;min-width:0;margin:0!important}
/* ===== 15 Oct round 3 ===== */
/* label hover tiles: initials always fit their square */
.r.plus .pm_t .pics b.mp.mono{font-size:9px!important;letter-spacing:0!important;line-height:1;padding:0!important;display:grid!important;place-items:center;min-width:20px}
/* contact overlay */
.ov7_mail{border-bottom-width:1px!important;padding-bottom:2px}
.ov7_lead{max-width:none}
/* clocks: city sits in the middle of its row, bottom space matches the top */
.t2 .rows div{align-items:center!important}
.t2 .rows span,.t2 .rows small{line-height:1}
main>section:has(.t2),section.b8:has(.t2){padding-bottom:var(--gut)!important}
/* What we provide rows on J1/J3: one line of pills that runs to the edge and fades */
.jmake .px{flex-wrap:nowrap!important;overflow:hidden;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
.jmake .px i{flex:none}
.jmake .rw{grid-template-columns:clamp(60px,8vw,130px) minmax(0,.9fr) minmax(0,1.1fr)!important}
/* F9 rows: pills run to the very edge of the site */
.row9 .px{margin-right:calc(-1 * clamp(24px,4vw,72px));-webkit-mask-image:linear-gradient(90deg,#000 66%,transparent)!important;mask-image:linear-gradient(90deg,#000 66%,transparent)!important}
.s9{overflow-x:clip}
/* H1 case study: six names on one row, small */
.c2:has(.bx){align-items:center}
.c2 .bx{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.c2 .bx figure{padding:10px!important}
.c2 .bx .logo_img{max-width:70%;max-height:30%}
/* J3 case studies bar hugs its content */
.c4{padding:10px 10px 10px 14px!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:16px!important}
.c4 .pw8{width:360px!important}
.c4 .pf_err:empty{display:none}
/* J1/F3 faces row: centred like the logos, extension fits on the right without moving anything */
.av_row:has(.av_grp){--av:clamp(40px,4.5vw,92px);--avg:clamp(10px,1vw,20px);gap:var(--avg)!important;justify-content:center!important}
.av_row:has(.av_grp) figure{width:var(--av)!important}
.av_row .av_grp{margin-right:0!important;--av:inherit;--avg:inherit}
.av_row .av_grp .pics i{width:var(--av)!important;margin-left:var(--avg)!important}
.r.plus .pm_t .pics b.mp.mono{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center}
::selection{background:#2F6BFF!important;color:#fff!important}::-moz-selection{background:#2F6BFF;color:#fff}
/* Footers: the same space below the text as above it */
main>section.z7.ft,section.z7.ft{padding-top:clamp(40px,4vw,64px)!important;padding-bottom:clamp(40px,4vw,64px)!important}
.ft11{padding-top:clamp(40px,4vw,64px)!important;padding-bottom:clamp(40px,4vw,64px)!important}
html main>section.z7.ft,html section.z7.ft{padding-top:clamp(40px,4vw,64px)!important;padding-bottom:calc(clamp(40px,4vw,64px) - 14px)!important}
html .ft11{padding-bottom:calc(clamp(40px,4vw,64px) + 14px)!important}
.ctf_mail,.jkp .m,.kk8 .m,a.m{border-bottom-width:1px!important;text-decoration-thickness:1px!important}
/* ===== 16 Oct ===== */
/* Trusted by: the divider starts at the first horizontal line */
.cl7>div>.cla_cols:first-child,.cl7>div>.cla3:first-child{margin-top:0!important}
/* F9 labels and artists joined */
.s9 .cl7{gap:0!important;row-gap:0!important}
.s9 .cl7>div+div .cla3,.s9 .cl7>div+div .cla_cols{margin-top:0!important}
.s9 .cl7>div+div .r:first-child{border-top:0!important}
/* F12: content starts right after the tag pills */
.zx{grid-template-columns:clamp(190px,15vw,240px) minmax(0,1fr)!important}
.hA:not(.lvr) .lv_btn{bottom:calc(clamp(64px,7vh,84px) + 12px)!important}
/* ===== K1 ===== */
.k1s .r{grid-template-columns:clamp(240px,26vw,400px) minmax(0,1fr)!important;padding:16px 0;min-height:0}
.k1s .r b{font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.025em}
.k1s .px2{display:grid;gap:8px;min-width:0}
.kcs_row{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px);margin-top:clamp(24px,2.6vw,40px)}
.kcs_row .mix7{margin:0!important;flex:1 1 auto;min-width:0}
.kcs_row .pw{flex:none;width:clamp(240px,20vw,300px)!important;margin:0!important;height:44px}
.kcs_row .pw input{font-size:14px}
.kcs_row .pw .btn{height:36px!important;padding:0 16px!important;font-size:14px}
.ask7_side .k1row{margin-top:clamp(24px,2.4vw,36px);display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.k1row .alt{font-size:15px}
.k1row .alt a{font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.015em}
.ask7_g:has(.k1row){align-items:end}
/* K1 round 2 */
.k1s .px{-webkit-mask-image:none!important;mask-image:none!important;margin-right:0!important;flex-wrap:nowrap}
.kcs_row .z7_req{flex:none;margin:0 0 0 auto!important;white-space:nowrap}
.kcs_row .pw{margin-left:0!important}
.ask7_g:has(.k1row) .ask7_h{font-size:clamp(35px,4.3vw,70px)!important}
.ask7_g:has(.k1row){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.k1row .alt a{font-size:clamp(16px,1.25vw,19px)!important}
/* Tags in the corner on every section that opens with them */
main>section:has(>.tg7:first-child):not(.hA):not(#contact.jl){padding-top:var(--gut)!important}
.kcs_row .mix7{flex:0 1 auto!important;flex-wrap:nowrap!important;display:flex}.kcs_row .mix7>*{flex:none}
.kcs_row{flex-wrap:wrap;row-gap:20px}.kcs_row .mix7{flex:none!important}
.kcs_row{gap:16px!important}.kcs_pw{display:flex;align-items:center;gap:20px;margin-left:auto}.kcs_pw .z7_req{margin:0!important}.kcs_row .pw{width:clamp(220px,17vw,280px)!important}
/* K2: plus labels instead of pill tags */
.tg7.plus{display:inline-flex!important;align-items:center;gap:12px;height:auto;font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:#7A7A7A;line-height:1}
.tg7.plus b{font-weight:300;font-size:16px;letter-spacing:0;line-height:1}
.sd .tg7.plus,.ov7 .tg7.plus{color:#A8A8A8}
.tg7.plus{display:flex!important;width:max-content;margin-top:0!important}
.tg7.plus{font-size:14.5px}.tg7.plus b{font-size:18px}
.tg7.plus{font-size:11.25px;gap:10px}.tg7.plus b{font-size:14px}
/* ===== K2 amends ===== */
.k2s .r{grid-template-columns:clamp(380px,37vw,580px) minmax(0,1fr)!important}
.k2s .r b{font-size:clamp(25px,2.25vw,34px)!important}
.k2s .px i{height:32px!important;padding:0 14px!important;font-size:14px!important}
.k2pw{flex-direction:column;align-items:flex-start!important;gap:10px!important}
.k2pw .z7_req{font-size:12.5px!important}
.kcs_row .k2pw .pw{width:clamp(300px,24vw,380px)!important}
i.lg.mono_t{display:grid!important;place-items:center;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.02em;background:#F2F2F2;color:#7A7A7A}
.sd i.lg.mono_t{background:#1E1E1E;color:#8A8A8A}
.t2 .p{text-wrap:pretty;max-width:34em}
@media (min-width:1100px){.kcs_row:has(.k2pw){flex-wrap:nowrap!important}.kcs_row:has(.k2pw) .mix7{flex:0 1 auto!important;min-width:0}}
.kcs_row:has(.k2pw) .mpx figure:nth-child(n+5){display:none!important}.kcs_row .k2pw .pw{width:clamp(280px,22vw,340px)!important}
/* K2 round 2 */
.k2pw{align-items:flex-end!important;gap:8px!important}
.k2pw .z7_req{font-size:10px!important;opacity:.5;letter-spacing:.01em}
.kcs_row .k2pw .pw{height:44px!important;min-height:0!important;padding:0 5px 0 0!important;box-sizing:border-box;align-items:center}
.kcs_row .k2pw .pw input{height:100%;padding:0 18px!important;font-size:14px}
.kcs_row .k2pw .pw .btn{height:34px!important;min-height:0!important;padding:0 16px!important;font-size:13.5px}
.ask7_g:has(.k1row){align-items:center!important}
.ask7_g:has(.k1row) .k1row{margin-top:0!important}
#services:has(.k2s){padding-bottom:calc(var(--s5) * .75)!important}
.kcs_row:has(.k2pw) .mpx figure:nth-child(n+4){display:none!important}.ask7_side:has(.k1row){align-self:center!important;margin:0!important;padding:0!important}.ask7_side:has(.k1row)>p:empty{display:none}
.ask7_side:has(.k1row){margin-top:22px!important}
.k2pw{position:relative}.k2pw .z7_req{position:absolute!important;right:8px;bottom:calc(100% + 7px)}
/* K2 round 3 */
.tb7.di_once .dl .di i{animation:dot .9s steps(1) 1;animation-delay:calc(var(--k) * 45ms + .25s)}
.k2s .r .px{opacity:.38;transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.k2s .r:hover .px{opacity:1}
.kcs_row:has(.k2pw) .mix7{gap:10px!important}
.kcs_row:has(.k2pw) .mix7 figure{width:clamp(48px,4.4vw,66px)!important}
.kcs_row:has(.k2pw) .mpx figure:nth-child(n+4){display:flex!important}
.kcs_row:has(.k2pw) .mpx figure:nth-child(n+5){display:none!important}
.k1row .btn7{transform:scale(.75);transform-origin:left center;margin-right:-30px}
.kcs_row:has(.k2pw) .mix7 .mp:hover+.mpx figure,.kcs_row:has(.k2pw) .mix7 .mpx:hover figure{width:clamp(48px,4.4vw,66px)!important}.kcs_row:has(.k2pw) .mpx{gap:10px!important}
/* K2 round 4 */
.k1row .btn7{transform:none!important;zoom:.75;margin-right:0!important}
.k1row{gap:14px!important}
.kcs_row .k2pw .pw{width:clamp(308px,24.2vw,374px)!important}
.k2s .px2{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);margin-right:calc(var(--gut) * -1)}@media (max-width:760px){.k2m .k2s .px2{-webkit-mask-image:none;mask-image:none;margin-right:0}}
/* ===== K2 contact: Index rows ===== */
.ov7.ov_ix{background:#fff!important;color:#0F0F0F!important;--bg:#fff;--fg:#0F0F0F}
.ov_ix .ov7_top{position:sticky;top:0;background:#fff;z-index:2}
.ov_ix .ov7_top .wm{font-size:15px;font-weight:600;letter-spacing:-.02em}
.ov_ix .ov7_x{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;border:1px solid rgba(15,15,15,.14);font-size:13px;color:#0F0F0F;background:transparent}
.ov_ix .ov7_x svg{width:9px;height:9px;stroke:currentColor;stroke-width:1.6;fill:none}
.ix{position:relative;min-height:calc(100vh - 68px);padding:52px var(--gut) 150px}
.ix_rw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gut);padding:34px 0 46px;border-top:1px solid #E3E3E3}
.ix_rw:first-child{border-top:0}
.ix_rw h2{font-size:34px;font-weight:400;letter-spacing:-.03em;line-height:1.1}
.ix_lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8A8A8A;margin-bottom:10px}
.ix_it+.ix_it{margin-top:26px}
.ix_it p,.ix_mail{font-size:18px;color:#0F0F0F}
.ix_mail{border-bottom:1px solid transparent;transition:border-color .3s}
.ix_mail:hover{border-bottom-color:#0F0F0F}
.ix_hq{position:absolute;left:var(--gut);bottom:34px;font-size:13px;line-height:1.5}
.ix_form{text-align:left;max-width:none}
.ix_form .cform{display:block}
.ix_form .cform_row{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.ix_form .field{display:block;margin:0 0 30px}
.ix_form .cform_row .field{margin-bottom:30px}
.ov_ix .ix_form .field>span{display:block;font-size:12.5px!important;letter-spacing:0!important;text-transform:none!important;font-weight:500;color:#0F0F0F;margin-bottom:2px}
.ov_ix .ix_form .field input,.ov_ix .ix_form .field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #D6D6D6!important;border-radius:0;padding:10px 0 12px;font-size:15px;color:#0F0F0F!important;outline:0;resize:none}
.ov_ix .ix_form .field input::placeholder,.ov_ix .ix_form .field textarea::placeholder{color:#B5B5B5}
.ov_ix .ix_form .field input:focus,.ov_ix .ix_form .field textarea:focus{border-bottom-color:#0F0F0F!important}
.ov_ix .ix_form .cform_send{display:inline-flex;align-items:center;height:38px;padding:0 22px;border-radius:4px!important;background:#0F0F0F!important;color:#fff!important;font-size:13px;margin-top:4px}
.ov_ix .ix_form .cform_send .btn_arrow{display:none}
.ov_ix .ix_form .form_err{color:#C0392B;font-size:13px}
.ov_ix .ix_form .form_done h3{font-size:34px;font-weight:400;letter-spacing:-.03em;color:#0F0F0F}
.ov_ix .ix_form .form_done p{font-size:15px;color:#555;margin-top:8px}
@media (max-width:760px){.ix{padding:24px var(--gut) 130px}.ix_rw{grid-template-columns:1fr;gap:18px;padding:26px 0 34px}.ix_rw h2{font-size:28px}.ix_form .cform_row{grid-template-columns:1fr;gap:0}}
.ix{padding-top:8px!important;padding-bottom:110px!important}.ix_rw{padding:28px 0 36px!important}.ov_ix .ix_form .field textarea{height:92px}.ix_form .field{margin-bottom:24px!important}
/* K2 contact: black, under the white menu bar */
.ov7.ov_ix{top:68px!important;background:#0F0F0F!important;color:#fff!important;--bg:#0F0F0F;--fg:#fff}
.ov_ix .ov7_top{position:absolute;top:0;right:0;left:auto;background:transparent;height:auto;padding:22px var(--gut) 0}
.ov_ix .ov7_top .wm{display:none}
.ov_ix .ov7_x{color:#fff;border-color:rgba(255,255,255,.3)}
.ov_ix .ix{min-height:calc(100vh - 68px);padding-top:30px!important}
.ix_rw{border-top-color:rgba(255,255,255,.14)!important}
.ix_rw h2{color:#fff}
.ix_lab{color:#7A7A7A}
.ix_it p,.ix_mail{color:#fff}
.ix_mail:hover{border-bottom-color:#fff}
.ix_hq{color:#BDBDBD}
.ov_ix .ix_form .field>span{color:#fff}
.ov_ix .ix_form .field input,.ov_ix .ix_form .field textarea{color:#fff!important;border-bottom-color:rgba(255,255,255,.22)!important}
.ov_ix .ix_form .field input::placeholder,.ov_ix .ix_form .field textarea::placeholder{color:#5E5E5E}
.ov_ix .ix_form .field input:focus,.ov_ix .ix_form .field textarea:focus{border-bottom-color:#fff!important}
.ov_ix .ix_form .cform_send{background:#fff!important;color:#0F0F0F!important}
.ov_ix .ix_form .form_done h3{color:#fff}.ov_ix .ix_form .form_done p{color:#A8A8A8}
body.ov_on .tb7{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body.ov_on .tb7 *{pointer-events:auto!important}
@media (max-width:760px),(max-height:500px) and (orientation:landscape) and (max-width:1000px){.ov7.ov_ix{top:56px!important}}
/* contact form corner text sits exactly where the landing corner text is */
.ov_ix .ix_hq{position:fixed!important;left:var(--gut);bottom:28px!important;font-size:12px!important;line-height:18px!important;color:#B3B3B3!important}
.hA .c3,.ov_ix .ix_hq{white-space:nowrap;max-width:none!important}
.k2s .px2{-webkit-mask-image:none!important;mask-image:none!important;margin-right:0!important}
.k2s .px{flex-wrap:wrap!important;row-gap:8px}
/* Normalised client logos: every file is the same square canvas with the logo optically balanced inside,
   so they simply fill whatever tile, row cell or circle they sit in */
img.logo_img.nl{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain;filter:none}
.sd img.logo_img.nl,.night img.logo_img.nl,.band_dark img.logo_img.nl{filter:brightness(0) invert(1)!important}
.cla3 .r i.lg,.cla_cols .r i.lg,.mix7 figure.lg,.c2 .bx figure i,.c4 .st i{padding:0!important;overflow:hidden}
.logos .logo_cell img.logo_img.nl{width:auto!important;height:clamp(72px,7.5vw,118px)!important;aspect-ratio:1}
b.mp.lgm{display:block!important;background:#F2F2F2;overflow:hidden}
.sd b.mp.lgm{background:#1E1E1E}
.cla3 .r i.lg img.logo_img.nl,.cla_cols .r i.lg img.logo_img.nl,b.mp.lgm img.logo_img.nl,.cp img.logo_img.nl{transform:scale(1.4)}
.cla3 .r i.lg img.logo_img.nl,.cla_cols .r i.lg img.logo_img.nl,b.mp.lgm img.logo_img.nl,.cp img.logo_img.nl{transform:scale(1.22)}