:root{
  --bg:#ffffff; --ink:#111111; --ink-2:#555553; --grey:#8a8a88;
  --gl:rgba(17,17,17,.1); --gx:rgba(17,17,17,.38);
  --m:16px; --g:12px; --cols:12;
  --sans:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1); --slow:cubic-bezier(.16,.84,.24,1); --wipe:cubic-bezier(.7,0,.25,1);
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Intentionally white in both schemes */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#ffffff; } }
:root[data-theme="dark"]{ --bg:#ffffff; }
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:var(--bg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lbl{margin:0;font:400 11px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lbl b{font-weight:400;color:var(--ink)}
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:90;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;animation:grain 1.4s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)}50%{transform:translate(-2%,-1%)}67%{transform:translate(3%,3%)}83%{transform:translate(-1%,-3%)}100%{transform:translate(0,0)}}

/* ---------- Board: one screen on a visible 12 x 3 grid ---------- */
.board{position:relative;width:100%;max-width:1440px;margin:0 auto;height:100vh;height:100svh;min-height:640px;padding:var(--m);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));column-gap:var(--g);row-gap:var(--g);overflow:hidden}
.lines{position:absolute;inset:0;pointer-events:none;z-index:0}
.lines .band{position:absolute;top:0;bottom:0;background:#f6f6f6;animation:bandIn 1.2s var(--slow) both;animation-delay:var(--d)}
@keyframes bandIn{from{opacity:0}to{opacity:1}}

/* header cells */
.cell{position:relative;z-index:3;min-width:0}
.logo-cell{grid-column:1 / span 3;grid-row:1;align-self:start}
.logo{display:block;height:clamp(26px,2.6vw,40px);color:var(--ink)}
.logo svg{height:100%;width:auto;overflow:visible;display:block}
.logo text{fill:currentColor;font-family:var(--sans)}
.logo .crescent{fill:currentColor}
.meta-cell{grid-column:1 / span 3;grid-row:1;align-self:start;padding-top:2px}
.nav-cell{grid-column:10 / span 3;grid-row:1;align-self:start;display:flex;justify-content:space-between;align-items:center;padding-top:2px}
.nav-cell a{position:relative;display:inline-flex;align-items:center;min-height:36px;font-size:15px;color:var(--ink);text-decoration:none;mix-blend-mode:difference}
.nav-cell a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--slow)}
.nav-cell a:hover::after,.nav-cell a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.fade{opacity:0;transform:translateY(8px);transition:opacity 1.3s var(--slow),transform 1.5s var(--slow);transition-delay:var(--d,0s)}
.loaded .fade{opacity:1;transform:none}

/* text columns */
.col{grid-row:2;align-self:start;z-index:2;margin:0;font-size:clamp(15px,1.28vw,20px);line-height:1.3;letter-spacing:-.012em}
.col p{margin:0}
.col p + p{margin-top:1.2em}
.col.a{grid-column:5 / span 4;grid-row:1 / -1;align-self:center;transform:translateY(-11vh);--cw:min(100vw,1440px);font-size:clamp(17px,max(calc(15.5px + var(--cw) * .002),calc(6px + var(--cw) * .0095)),30px);line-height:1.26;letter-spacing:-.018em}
.col.a p:first-of-type{text-indent:calc((100% - 3 * var(--g)) / 4 + var(--g))}
.col .wm,.col .wm *{text-indent:0}
.col.a p + p{margin-top:.6em}
.col.b{grid-column:4 / span 3}
.col.c{grid-column:7 / span 3}
.col .col-n{display:block;margin-bottom:12px}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wm > span{display:inline-block;transform:translateY(110%);transition:transform 1.4s var(--slow);transition-delay:var(--d,0ms)}
.loaded .wm > span{transform:none}

/* footer cells */
.foot-a{grid-column:1 / span 3;grid-row:3;align-self:end;z-index:3}
.foot-b{grid-column:10 / span 3;grid-row:3;align-self:end;z-index:3;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dots{display:flex;gap:4px}
.dots button{appearance:none;border:0;background:none;cursor:pointer;min-height:32px;min-width:36px;padding:0 6px;font:400 11px/1 var(--mono);letter-spacing:.07em;color:var(--grey);transition:color .5s var(--slow)}
.dots button[aria-pressed="true"]{color:var(--ink)}
.dots button:hover{color:var(--ink)}
.prog{position:relative;height:1px;background:var(--gl);overflow:hidden}
.prog i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.paused .prog i{opacity:.35}
.tbtns{display:flex;justify-content:space-between}
.tbtn{appearance:none;border:0;background:none;cursor:pointer;min-height:32px;padding:0;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.tbtn:hover,.tbtn[aria-pressed="true"]{color:var(--ink)}

/* image boxes: an overflow mask with a translating fill, so the wipe stays on the compositor */
.box{position:absolute;left:0;top:0;z-index:1;overflow:hidden;contain:strict}
.box .ph{position:absolute;inset:0;background:#b0b0ae;transform:translate3d(0,101%,0);will-change:transform;backface-visibility:hidden}
.t0{background:#b9b9b7}
.t1{background:#a9a9a7}
.t2{background:#c4c4c2}
.t3{background:#9f9f9d}
.t4{background:#b3b3b1}
.t5{background:#aeaeac}
.t6{background:#bfbfbd}
.t7{background:#a4a4a2}
.t8{background:#b6b6b4}

/* ---------- Generative (the only index style) ---------- */
.vibe-gen .lines .band{background:none;box-shadow:inset 1px 0 0 rgba(17,17,17,.065),inset -1px 0 0 rgba(17,17,17,.065)}
.lines{opacity:0;transition:opacity .6s var(--slow)}
.grid-on .lines{opacity:1}
.grid,.grid-spec{display:none !important}
.vibe-gen .box{visibility:hidden}
.vibe-gen .stage-m{display:none}
.gen{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.gen.slider{top:auto;bottom:0;overflow-x:auto;overflow-y:hidden;pointer-events:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 44px),transparent)}
.gen.slider::-webkit-scrollbar{display:none}
.gen-spacer{position:absolute;left:0;top:0;height:1px;pointer-events:none}
.items-wait .gen .gl > *,.items-wait .gen .gh{opacity:0}
.chrome-wait .logo-wrap,.chrome-wait .amb-t,.chrome-wait .top-ct{opacity:0 !important}
.gen.list{position:relative;inset:auto;grid-column:1 / -1;grid-row:3;align-self:start;overflow:visible;margin-top:28px;z-index:2}
.gen.list .gl{flex-direction:row;align-items:center;gap:10px;transform-origin:0 50%;transition:opacity .9s var(--slow)}
.gen.list .gl .dot{order:0;width:12px;height:12px}
.gen.list .gl .gt{writing-mode:horizontal-tb;display:flex;align-items:center;gap:10px;font-size:13px}
@media (max-width:700px){ .gen.list .gl .gt{font-size:12.5px} }
.gen.list .gl .dot{width:10px;height:10px}
.gen.list .gl .gt .tg{margin:0;font-size:10px}
.gen.list .gl:hover .gt,.gen.list .gl:focus-visible .gt{transform:none}
.gen.list .gh{padding:0}
.board:has(.gen.list){padding-bottom:45vh !important}
@media (max-width:700px){
  .board:has(.gen.list){padding-top:0 !important;row-gap:0 !important;overflow:visible !important;overflow-x:clip !important}
  .board:has(.gen.list) .col.a{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;z-index:1;transform:none}
  .gen.list{z-index:2;margin-top:0}
  .gen.list .gl{transform-origin:50% 50%}
  body.phone-loop{overflow:hidden;height:100vh;height:100svh;overscroll-behavior:none}
  .phone-loop .board{height:100vh !important;height:100svh !important;min-height:0 !important;padding-bottom:0 !important;overflow:hidden !important}
  .phone-loop .gen.list{position:fixed !important;inset:0 !important;height:100vh !important;height:100svh !important;margin:0 !important;overflow:hidden;pointer-events:none;z-index:2}
  .phone-loop .gen.list .gl,.phone-loop .gen.list .gh{pointer-events:auto}
  .gen.list .gl,.gen.list .gl.dim,.gen.list .gh{opacity:1 !important;transition:none !important}
  /* Contact open on a phone: the whole page fades back behind the email, items included */
  .gen.list:has(.gl.sel){z-index:2 !important}
  .ct-open .aw-veil{background:rgba(255,255,255,.9)}
  .col .wm > span{transition:opacity .45s var(--slow)}
  .col .wm > span.blk{background:var(--bk) !important;color:transparent !important;opacity:.5;transition:background .3s var(--slow),color .2s linear,opacity .45s var(--slow)}
  .col .wm > span.blk .c{color:transparent !important}
}
.row-dragging,.row-dragging *{user-select:none !important;-webkit-user-select:none !important}
.gh-rail{position:fixed;left:0;z-index:6;display:none;flex-direction:column-reverse;align-items:flex-start;gap:16px;pointer-events:none}
.gh-rail.on{display:flex}
.gh-rail .gh{position:static;pointer-events:auto;writing-mode:vertical-rl;transform:rotate(180deg) !important;min-height:0;min-width:0;padding:6px 2px;width:16px;justify-content:center}
.gh-rail .gh small{display:none}
.gl{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:9px;will-change:transform}
.gl .dot{width:clamp(12px,calc(8px + .4vw),18px);height:clamp(12px,calc(8px + .4vw),18px);border-radius:50%;background:var(--dc);flex-shrink:0;transition:background .5s}
.gl .gt{writing-mode:vertical-rl;font:400 clamp(13px,calc(9px + .35vw),17px)/1 var(--sans);letter-spacing:.01em;white-space:nowrap;color:#111}
.gl .gt .n{display:none;font:400 14px/1 var(--mono);padding:.25em 0;margin:.3em 0}
.gl .gt .nm{background:var(--hc);color:#111;padding:.18em 0;transition:background .5s}
.gl .gt .tg{font:400 clamp(9.5px,calc(7px + .2vw),11.5px)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-top:.9em;color:#8a8a88;background:none}
.vibe-gen .col .wm > span{transition:transform 1.4s var(--slow),background .5s,color .5s}
.vibe-gen .col .wm > span.chip{background:var(--cc);color:#111}
.col .c.alt-s{display:inline;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-style:italic;line-height:0;letter-spacing:0}
.vibe-gen .meta-cell .lbl,.vibe-gen .foot-a .lbl{font-family:var(--mono)}
/* clickable items grouped under tags */
.gen .gl{pointer-events:auto;appearance:none;border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;transition:opacity .9s var(--slow)}
.gen:has(.gl:hover) .gl:not(:hover),.gen:has(.gl:focus-visible) .gl:not(:focus-visible),.gen:has(.gl.open) .gl:not(.open){opacity:.14}
.gen:has(.gl.open){z-index:71}
/* while something is open, the row is look-only: the only action is closing */
.gc-open .gen.slider,.ct-open .gen.slider,.aw-open .gen.slider,.gc-open .gen.list,.ct-open .gen.list,.aw-open .gen.list{pointer-events:none !important}
.gc-open .gen .gl,.gc-open .gen .gh,.gc-open .gh-rail .gh,.ct-open .gen .gl:not(.sel),.ct-open .gen .gh,.aw-open .gen .gl:not(.sel),.aw-open .gen .gh{pointer-events:none !important}
.gen:has(.gl.sel){z-index:66}
.gen:has(.gl.sel) .gl:not(.sel):not(:hover),.gen:has(.gl.sel) .gh{opacity:.14}
.gen .gl.sel{opacity:1 !important}
.gen:has(.gl.open) .gh{opacity:.14;transition:opacity .9s var(--slow)}
.gen .gl .gt{transition:transform 1s var(--slow)}
.gen .gl:hover .gt,.gen .gl:focus-visible .gt{transform:translateY(-6px)}
.gen .gl:hover .dot,.gen .gl.open .dot{transform:scale(1.35)}
.gen .gl .dot{transition:background .5s,transform 1s var(--slow)}
.gen .gl:focus-visible{outline:2px solid #111;outline-offset:3px}
.gen .gl.dim{opacity:.16}
.gen .gl.open .gt .nm{background:var(--selc,#ffe066);color:#111}
.gen .gl .dot{order:2}
.gh{position:absolute;left:0;top:0;pointer-events:auto;appearance:none;border:0;border-radius:0;background:none;cursor:pointer;min-height:26px;padding:0 5px;text-transform:uppercase;transition:background .4s var(--slow);display:inline-flex;align-items:center;gap:6px;font:400 11px/1 var(--mono);letter-spacing:.04em;color:#8a8a88;white-space:nowrap;transition:background .4s,color .4s,border-color .4s}
.gh small{font-size:10px;color:#b7b7b5}
.gh[aria-pressed="true"]{text-decoration:none;background:var(--hc,#ffe066);color:#111}
.gh[aria-pressed="true"] small{color:#111}
.gh:focus-visible{outline:2px solid #111;outline-offset:2px}
.gback{position:fixed;inset:0;z-index:70;background:rgba(255,255,255,.86);opacity:0;pointer-events:none;transition:opacity .5s var(--slow)}
.gback.on{opacity:1;pointer-events:auto}
.gcard{position:fixed;z-index:72;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:none;padding:0;opacity:0;pointer-events:none;transition:opacity .15s linear}
.gcard.on{opacity:1;pointer-events:auto}
.gc-open .gback,.gc-open .gcard{cursor:none}
.gc-open .gcard .gc-img{cursor:default}
.gc-open .gcard .gc-nav,.gc-open .gcard .gc-nav *{cursor:default}
.gcard .gc-top{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gcard .gc-tag{font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#111}
.gcard h3{order:1;margin:0;font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1;transition:opacity .45s var(--slow),transform .6s var(--slow)}
.gcard.genie h3{opacity:0;transform:translateY(-10px)}
.gcard.springing .gc-img{visibility:hidden}
.gcard h3 span{background:var(--hc,#ffe600);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.gcard > p,.gcard .gc-meta,.gcard .aw-grid{display:none !important}
.gcard .gc-img{order:2;width:min(56vw,720px);aspect-ratio:4/3;background:#bdbdbb;margin:0}
.gcard.genie .gc-img{visibility:hidden}
.gcard .gc-img[hidden]{display:none}
.gcard .gc-img.has-img{width:auto;aspect-ratio:auto;background:none}
.gcard .gc-img img{display:block;width:auto;height:auto;max-height:min(72vh,780px);max-width:min(82vw,1100px)}
.gcard.drawer{left:0;right:0;top:auto;bottom:0;width:auto;align-items:stretch;gap:12px;background:#fff;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));opacity:1;transform:translateY(105%);pointer-events:none;transition:transform .55s var(--slow)}
.gcard.drawer.on{transform:none;pointer-events:auto}
.gcard.drawer.dragging{transition:none}
.gcard.drawer::before{content:'';order:0;align-self:center;width:40px;height:4px;border-radius:2px;background:#d4d4d2;margin-bottom:4px}
.gcard.drawer .gc-img{width:100%;aspect-ratio:4/3}
.gcard.drawer .gc-img.has-img{width:100%;aspect-ratio:auto}
.gcard.drawer .gc-img img{width:100%;max-width:100%;max-height:62vh;object-fit:contain;object-position:left top}
.gcard.drawer h3{font-size:22px;opacity:1;transform:none}
.gcard .gc-img.car{position:relative;overflow:visible;background:none;aspect-ratio:auto;width:100%}
.gcard.slider{left:0;right:0;width:100vw;transform:translateY(-50%);padding:0 var(--m);overflow:visible}
.gcard.slider.drawer{transform:translateY(105%);width:auto}
.gcard.drawer .car-slide img,.gcard.drawer .car-slide video{width:100%;height:100%;object-fit:contain}
.gcard.drawer,.gcard.slider.drawer{left:0;right:0;top:auto;bottom:0;width:auto;max-height:90vh;overflow:hidden;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));transform:translate3d(0,105%,0);transition:transform .6s cubic-bezier(.2,.9,.25,1)}
.gcard.drawer.on,.gcard.slider.drawer.on{transform:translate3d(0,0,0)}
.gcard.drawer.dragging{transition:none}
@media (max-width:700px){ .gback{background:rgba(17,17,17,.32)} }
.gcard.slider.drawer.on{transform:none}
.car-track{display:flex;align-items:flex-start;gap:var(--g);height:100%;width:max-content;transition:transform .7s var(--slow);will-change:transform}
.car-track.dragging{transition:none}
.car-slide{flex:0 0 auto;height:100%;align-self:flex-start;overflow:hidden;background:#f1f1ef;transition:opacity .7s var(--slow),transform .9s var(--slow);transition-delay:calc(var(--k,0) * 70ms)}
.gcard.genie .car-slide:not(:first-child){opacity:0;transform:translateX(60px)}
.car-slide img,.car-slide video{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.gcard.genie .gc-img.car{visibility:visible}
.gcard.genie .car-slide:first-child{visibility:hidden}
.car-ph{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:flex-start;padding:12px;font:400 10px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#6f6f6d}
.gc-nav{order:3;display:flex;align-items:center;gap:18px;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#111;transition:opacity .45s var(--slow)}
.gc-nav,.gc-nav[hidden]{display:none !important}
.gc-nav button{appearance:none;border:0;background:none;padding:6px 0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:#111;cursor:pointer}
.gc-nav button:disabled{color:#c2c2c0;cursor:default}
.gc-nav button:focus-visible{outline:2px solid #111;outline-offset:3px}
.gc-nav .gc-count{color:#8a8a88;font-variant-numeric:tabular-nums}
.gcard.genie .gc-nav{opacity:0}
.gcard.drawer .gc-nav{justify-content:space-between}
.gcard .gc-img .car-slide img,.gcard .gc-img .car-slide video{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.car-slide.info{background:#f1f1ef}
.car-slide.framed{background-size:cover;background-position:center;position:relative}
.gcard .gc-img .car-slide.framed video,.car-slide.framed video{position:absolute;left:50%;top:50%;width:66% !important;height:auto !important;max-height:none;transform:translate(-50%,-50%);object-fit:contain}
.car-slide.next{background:#f1f1ef;cursor:pointer;position:relative;overflow:hidden}
.car-next{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:20px 22px 22px}
.car-next .cn-top{display:flex;justify-content:space-between;font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.car-next .cn-thumb{position:absolute;left:50%;top:44%;width:46%;aspect-ratio:4/5;transform:translate(-50%,-50%) rotate(-6deg);background:#fff;padding:6px 6px 22px;box-shadow:none;transition:transform .7s cubic-bezier(.3,1.45,.5,1)}
.car-next .cn-thumb img{display:block;width:100% !important;height:100% !important;object-fit:cover;max-width:none;max-height:none}
.car-next .cn-thumb .cn-ph{width:100%;height:100%;display:grid;place-items:center;background:#111;color:var(--nc,#ffe066);font:500 64px/1 var(--sans);letter-spacing:-.05em}
.car-slide.next:hover .cn-thumb{transform:translate(-50%,-54%) rotate(2deg) scale(1.06)}
.car-next .cn-name{font:500 clamp(34px,3.6vw,58px)/.95 var(--sans);letter-spacing:-.05em;color:#111;text-wrap:balance}
.car-next .cn-arrow{display:inline-block;animation:cnNudge 1.4s cubic-bezier(.3,1.45,.5,1) infinite}
@keyframes cnNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.car-next .cn-tick{position:relative;z-index:1;margin:0 -22px;background:#111;color:#fff;overflow:hidden;white-space:nowrap;font:400 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:9px 0}
.car-next .cn-tick span{display:inline-block;padding-left:100%;animation:cnTick 9s linear infinite}
.car-slide.next:hover .cn-tick span{animation-duration:4s}
@keyframes cnTick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){ .car-next .cn-arrow,.car-next .cn-tick span{animation:none} }
.car-slide.embed{background:#fbfbfb}
.car-slide.embed iframe{display:block;width:100%;height:100%;border:0;pointer-events:none;background:transparent}
.car-info{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:20px 22px 22px;transition:opacity .6s var(--slow) .1s}
.gcard.genie .car-info{opacity:0}
.car-info p{margin:0;font-size:clamp(15px,calc(10px + .45vw),19px);line-height:1.34;letter-spacing:-.012em;color:#111;text-wrap:pretty}
.car-info .ci-meta{display:block;margin-bottom:14px;font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.car-info ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ci-bot{display:flex;flex-direction:column;gap:14px}
.car-info .cn-top + *{margin:0}
.car-info > div > ul{margin-top:14px}
.ab-now{font:500 clamp(34px,3.4vw,54px)/.95 var(--sans);letter-spacing:-.05em;color:#111}
.col.a .now{margin:1.1em 0 0;font-size:.62em;line-height:1.3;letter-spacing:-.01em;color:#8a8a88;text-indent:0 !important}
.col.a .now-b{position:relative;display:inline-block;color:#111;cursor:default;outline:none}
.col.a .now-brace{color:#FFCA05;margin-right:.06em}
.col.a .now-b:focus-visible{outline:2px solid #111;outline-offset:3px}
.col.a .now-logo{position:absolute;left:calc(100% + 10px);top:50%;width:2.6em;height:auto;pointer-events:none;opacity:0;transform:translateY(-50%) scale(.3) rotate(-16deg);transition:opacity .2s var(--slow),transform .6s cubic-bezier(.3,1.5,.5,1)}
.col.a .now-b:hover .now-logo,.col.a .now-b:focus-visible .now-logo,.col.a .now-b.pop .now-logo{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
.ci-res-l{display:block;margin-bottom:10px;font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.ci-res-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;outline:none}
.ci-res-v{position:relative;display:inline-block;font:500 clamp(17px,1.5vw,23px)/1.15 var(--sans);letter-spacing:-.035em;color:#111;white-space:nowrap}
.ci-res-t{font:400 9.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8a8a88;text-align:right}
.ci-res-row.aw{cursor:default}
.ci-res-row.aw:focus-visible .ci-res-v{outline:2px solid #111;outline-offset:3px}
.ci-res-ic,.gcard .gc-img .car-slide .ci-res-ic{position:absolute;left:calc(100% + 8px);top:50%;width:38px !important;height:38px !important;max-width:none;max-height:none;object-fit:contain;pointer-events:none;opacity:0;transform:translateY(-50%) scale(.3) rotate(-18deg);transition:opacity .2s var(--slow),transform .55s cubic-bezier(.3,1.5,.5,1)}
.ci-res-row.aw:hover .ci-res-ic,.ci-res-row.aw:focus-visible .ci-res-ic{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
.ci-aw-l{display:block;margin-bottom:8px;font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.ci-aw-r{display:flex;flex-wrap:wrap;gap:6px}
.ci-aw-i{position:relative;margin:0;display:grid;place-items:center;width:52px;height:52px;border-radius:0;cursor:default;outline:none;transition:transform .5s cubic-bezier(.3,1.45,.5,1)}
.ci-aw-i:hover,.ci-aw-i:focus-visible{transform:translateY(-3px) scale(1.08)}
.ci-aw-i:focus-visible{outline:2px solid #111;outline-offset:2px}
.ci-aw-i img,.gcard .gc-img .car-slide .ci-aw-i img,.pw-sl .ci-aw-i img{width:46px !important;height:46px !important;object-fit:contain;flex-shrink:0;max-width:none;max-height:none;image-rendering:auto;filter:drop-shadow(0 0 0 transparent)}
.ci-aw-i figcaption{position:absolute;left:0;bottom:calc(100% + 6px);transform:translate(0,4px);white-space:nowrap;pointer-events:none;opacity:0;background:#111;color:#fff;font:400 12px/1 var(--sans);letter-spacing:-.005em;padding:6px 8px 7px;z-index:5;transition:opacity .25s var(--slow),transform .35s var(--slow)}
.ci-aw-i figcaption span{color:#9a9a98}
.ci-aw-i:hover figcaption,.ci-aw-i:focus-visible figcaption{opacity:1;transform:none}
.car-slide.info{overflow:visible}
.car-info .ci-meta,.pp-info .ci-meta{display:none !important}
.ci-blurb .ci-p{margin:0}
.ci-blurb .ci-p + .ci-p{margin-top:.75em}
.car-info .ci-blurb .ci-p{font-size:clamp(14px,calc(9px + .36vw),17px);line-height:1.36;letter-spacing:-.012em;color:#111;text-wrap:pretty}
.pp-info .ci-blurb .ci-p{font-size:17px;line-height:1.36;letter-spacing:-.012em;color:#111}
.car-info li{font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#111;background:var(--hc,#ffe066);padding:.5em .6em}
.pw{position:fixed;left:0;top:0;z-index:30;touch-action:none;user-select:none;-webkit-user-select:none;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.3,1.35,.5,1),opacity .25s var(--slow)}
@supports (transition-timing-function: linear(0, 1)){ .pw{transition:transform .95s linear(0.0000, 0.0312, 0.1131, 0.2292, 0.3647, 0.5070, 0.6460, 0.7742, 0.8864, 0.9796, 1.0526, 1.1056, 1.1402, 1.1584, 1.1630, 1.1567, 1.1426, 1.1231, 1.1008, 1.0776, 1.0551, 1.0345, 1.0165, 1.0017, 0.9902, 0.9819, 0.9767, 0.9740, 0.9735, 0.9747, 0.9771, 0.9803, 0.9840, 0.9878, 0.9914, 0.9948, 0.9976, 1.0000, 1.0018, 1.0031, 1.0039, 1.0043, 1.0043, 1.0041, 1),opacity .25s var(--slow)} }
.pw.pw-in{opacity:0}
.pw.dragging{transition:none}
.pw.pw-out{transition:transform .42s cubic-bezier(.6,-0.28,.74,.05),opacity .2s var(--slow) .22s;opacity:0}
.pw img{display:block;width:100%;height:auto;-webkit-user-drag:none;pointer-events:none}
.pw .pw-vid{display:block;width:100%;height:auto;pointer-events:none;background:#111}
.pw-ph{aspect-ratio:1/1;background:#bdbdbb;display:flex;align-items:flex-end;padding:10px;font:400 10px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#6f6f6d}
.pw-bar{position:absolute;left:0;right:0;top:0;transform:translateY(-100%);display:flex;justify-content:space-between;align-items:flex-end;gap:8px;padding-bottom:6px;pointer-events:none}
.pw-t{font:500 13px/1 var(--sans);letter-spacing:-.01em;color:#111;background:var(--hc,#ffe066);padding:.28em .38em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 34px)}
.pw-x{pointer-events:auto;appearance:none;border:0;border-radius:0;background:#111;color:#fff;width:24px;height:24px;display:grid;place-items:center;font:400 15px/1 var(--sans);cursor:pointer;flex-shrink:0}
.pw-x:focus-visible{outline:2px solid #111;outline-offset:2px}
.pw.pw-aw .pw-awbox{background:#f4f4f2;padding:14px 14px 12px}
.pw.pw-aw img{width:100%;height:auto}
.pw-cap{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font:400 9.5px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.pw-cap b{font-weight:400;color:#111;background:var(--hc,#ffe066);padding:.3em .4em}
.kc-wrap{width:100%;height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#f1f1ef;padding:28px}
.kc{appearance:none;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:22px;outline:none}
.kc-top{display:grid;place-items:center;width:132px;height:132px;border-radius:22px;background:linear-gradient(180deg,#ffffff,#ececea);color:#111;font:500 58px/1 var(--mono);
  box-shadow:0 1px 0 #fff inset,0 -3px 0 rgba(0,0,0,.06) inset,0 9px 0 #c9c9c6,0 9px 1px #b5b5b2,0 18px 24px rgba(0,0,0,.14);transition:transform .18s var(--slow),box-shadow .18s var(--slow),background .4s var(--slow)}
.kc:hover .kc-top{transform:translateY(-1px)}
.kc:active .kc-top{transform:translateY(7px);box-shadow:0 1px 0 #fff inset,0 2px 0 #c9c9c6,0 4px 8px rgba(0,0,0,.12)}
.grid-on .kc-top{background:linear-gradient(180deg,#e6ff7a,#d6f060);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 9px 0 #b9cf4a,0 9px 1px #a3b83e,0 18px 24px rgba(0,0,0,.14)}
.kc:focus-visible .kc-top{outline:2px solid #111;outline-offset:4px}
.kc-lab{font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8a8a88}
.kc-lab kbd{font:inherit;color:#111;background:#fff;border:1px solid #d9d9d6;border-bottom-width:2px;border-radius:4px;padding:2px 6px;margin:0 2px}
.pw.pw-key{width:300px !important}
.pf-key .pf-hero{background:#f1f1ef}
.pf-key .kc-lab{display:none}
#pgrid{display:none}
@media (max-width:700px){ .phone-feed #pgrid{position:fixed;inset:0;z-index:80;pointer-events:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);padding:0 var(--m);opacity:0;transition:opacity .5s var(--slow)}
  .phone-feed #pgrid i{background:rgba(17,17,17,.045);border-left:1px solid rgba(17,17,17,.14);border-right:1px solid rgba(17,17,17,.14);transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 60ms)}
  .phone-feed.grid-on #pgrid{opacity:1}
  .phone-feed.grid-on #pgrid i{transform:none} }
.pw-stage{position:relative;width:100%;overflow:hidden;background:transparent;transition:height .5s var(--slow)}
.pw-track{display:flex;align-items:flex-start;gap:8px;height:100%;width:max-content;transition:transform .7s var(--slow);will-change:transform}
.pw.dragging .pw-track,.pw.resizing .pw-track{transition:none}
.pw.dragging .pw-stage,.pw.resizing .pw-stage{transition:none}
.pw-sl{position:relative;flex:0 0 auto;overflow:hidden;background:#f1f1ef;display:flex;align-items:stretch}
.pw-sl img,.pw-sl video,.pw-sl iframe{display:block;width:100%;height:100%;object-fit:contain;border:0;pointer-events:none}
.pw-sl .car-info{width:100%;height:100%;padding:16px 16px 18px}
.pw-sl .car-info p{font-size:clamp(13px,calc(9px + .35vw),16px)}
.pw-sl.ph{align-items:flex-end;padding:10px;font:400 10px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#6f6f6d}
.pw-n{font:400 10px/1 var(--mono);letter-spacing:.07em;color:#8a8a88;margin-left:auto;padding-bottom:6px;pointer-events:none;font-variant-numeric:tabular-nums}
.pw-rs{position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;background:#111;border:3px solid #fff;box-sizing:border-box;opacity:0;transition:opacity .3s var(--slow);cursor:nwse-resize}
.pw:hover .pw-rs,.pw.resizing .pw-rs,.touch-ui .pw-rs{opacity:1}
.gen .gl.pw-on .gt .nm{background:var(--selc,#ffe066);color:#111}
@media (prefers-reduced-motion:reduce){ .pw,.pw.pw-out{transition:opacity .2s} }
/* ===== phone feed + project pages ===== */
#pfeed,#ppage{display:none}
@media (max-width:700px){
  .phone-feed .board,.phone-feed .board:has(.gen.list){position:sticky !important;top:0;z-index:0;height:90vh !important;height:90svh !important;min-height:0 !important;padding:0 var(--m) !important;overflow:visible !important;display:flex !important;align-items:center}
  .phone-feed .board .col.a{position:static !important;height:auto !important;display:block !important;transform:none !important;width:100%;align-self:center !important}
  .phone-feed .gen,.phone-feed .gh-rail{display:none !important}
  .phone-feed #pfeed{display:block;position:relative;z-index:1;padding:0 var(--m) 0}
  .phone-feed #pfeed .pf-sec:last-child{padding-bottom:80px}
  .phone-feed #pfeed .pf-sec:first-child{padding-top:16px}
  .phone-feed #pfeed section.pf-sec:last-of-type{padding-bottom:100px}
  .phone-feed .scroller{overflow:visible !important}
  .phone-feed #ppage{display:block}
}
.pf-sec{margin:0 calc(var(--m) * -1);padding:48px var(--m) 4px;background:#fff}
.pf-lab{display:block;margin-bottom:18px;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.pf-proj + .pf-proj{padding-top:4px}
.pf-proj:last-child{padding-bottom:8px}
.pf-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#111}
.pf-cta i{font-style:normal;display:inline-block;animation:cnNudge 1.6s cubic-bezier(.3,1.45,.5,1) infinite}
.pf-proj:active .pf-cta i{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){ .pf-cta i{animation:none} }
.pf-proj{display:block;margin:0;padding-bottom:36px;background:#fff;color:#111;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px;font:400 18px/1 var(--sans);letter-spacing:-.02em}
.pf-title b{font-weight:400 !important;background:var(--hc,#ffe066);color:#111;padding:.14em .28em}
.pf-title span{display:none}
.pf-hero{position:relative;width:100%;background:#f1f1ef;overflow:hidden}
.pf-hero img,.pf-hero video{display:block;width:100%;height:100%;object-fit:cover}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-play{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 10px;align-items:start}
.pf-play .pf-tile .pf-hero{aspect-ratio:var(--pa,1/1)}
.pf-play .pf-tile.drop{margin-top:0}
.pf-play .pf-still{cursor:default}
.pf-play{row-gap:26px}
.pf-play .pf-tile video{display:block;width:100%;height:100%;object-fit:cover}
.pf-rect{position:relative;width:100%;aspect-ratio:4/3;background:#f1f1ef;overflow:hidden}
.pf-rect img,.pf-rect video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pf-rect.framed{background-size:cover;background-position:center}
.pf-rect.framed video{inset:auto;left:50%;top:50%;width:68%;height:auto;object-fit:contain;transform:translate(-50%,-50%)}
.pf-pair{display:flex;align-items:flex-start;gap:8px}
.pf-pair .pf-img{flex:var(--w,1) 1 0;min-width:0;background:#f1f1ef}
.pf-pair .pf-img:only-child{flex:0 0 64%}
.pf-pair.right{justify-content:flex-end}
.pf-pair .pf-img img{display:block;width:100%;height:auto}
.pf-pair .pf-img.ph{aspect-ratio:4/3}
.pf-slider{margin:0 calc(var(--m) * -1);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.pf-track{will-change:transform}
.pf-slide img{-webkit-user-drag:none;pointer-events:none}
.pf-slider::-webkit-scrollbar{display:none}
.pf-track{display:flex;gap:10px;padding:0 var(--m);width:max-content}
.pf-slide{flex:0 0 auto;display:block;color:#111;cursor:default;-webkit-tap-highlight-color:transparent}
.pf-slide .pf-simg{height:230px;background:#f1f1ef}
.pf-slide .pf-simg img{display:block;height:100%;width:auto}
.pf-slide .pf-simg.ph{width:230px}
.pf-slide b{display:block;margin-top:7px;font:400 10.5px/1.2 var(--mono);letter-spacing:.05em;font-weight:400}
.pf-tile{display:block;color:#111;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-tile .pf-hero{aspect-ratio:1/1}
.pf-tile b{display:block;margin-top:7px;font:400 10.5px/1.2 var(--mono);letter-spacing:.05em;color:#111;font-weight:400;word-break:break-all}
#ptrans{position:fixed;inset:0;z-index:88;background:var(--tc,#ffe066);transform:translateY(100%);pointer-events:none;will-change:transform;display:none}
.phone-feed #ptrans{display:block}
#ppage{position:fixed;inset:0;z-index:85;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;visibility:hidden}
#ppage.on{visibility:visible}
.pp-bar{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:3;transform:translateX(-50%);transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s var(--slow)}
.pp-bar.away{transform:translate(-50%,calc(100% + 40px));opacity:0}
.pp-back{appearance:none;border:0;background:var(--hc,#ffe066);color:#111;padding:13px 18px;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.pp-n{display:none}
.pp-body{padding:calc(104px + env(safe-area-inset-top,0px)) var(--m) calc(96px + env(safe-area-inset-bottom,0px))}
.pp-title{margin:14px 0 26px;font:500 42px/.95 var(--sans);letter-spacing:-.05em;color:#111;text-wrap:balance}
.pp-info{background:none;padding:0;margin:0 0 30px}
.pp-info .ci-meta{display:block;margin-bottom:16px;font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.pp-info p{margin:0;font-size:17px;line-height:1.34;letter-spacing:-.012em;color:#111}
.pp-info ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pp-info li{font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#111;background:var(--hc,#ffe066);padding:.5em .6em}
.pp-info .ci-res{margin-top:34px}
.pp-info .ci-res-row{padding:5px 0}
.pp-info .ci-res-v{font-size:20px}
.pp-info .ci-res-ic{position:static !important;display:inline-block;vertical-align:-8px;margin-left:8px;opacity:1 !important;transform:none !important;width:28px !important;height:28px !important}
.pp-media{margin:0 0 18px;background:#f1f1ef;overflow:hidden;position:relative}
.pp-media img,.pp-media video,.pp-media iframe{display:block;width:100%;height:auto;border:0}
.pp-media iframe{height:100%}
.pp-media.framed{aspect-ratio:1732/1000;background-size:cover;background-position:center}
.pp-media.framed video{position:absolute;left:50%;top:50%;width:66%;transform:translate(-50%,-50%)}
/* phone footer */
.pff{margin:0 calc(var(--m) * -1);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:56px var(--m) calc(22px + env(safe-area-inset-bottom,0px));background:#f1f1ef;box-sizing:border-box}
.pff-hello{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:24px}
.pff-hi{display:block;margin-bottom:10px;font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(17,17,17,.55)}
.pff-mail{appearance:none;border:0;padding:0;background:none;color:#111;text-align:left;font:500 clamp(30px,10.6vw,52px)/1.08 var(--sans);letter-spacing:-.05em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pff-mail span{background:#fff;padding:.02em .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .5s var(--slow)}
.pff-rows{margin-top:0;display:grid;gap:10px;font:400 17px/1.4 var(--sans);letter-spacing:-.01em;color:#111;text-wrap:pretty}
.pff-rows span{color:rgba(17,17,17,.55)}
.pff-rows .pff-clock{font-variant-numeric:tabular-nums}
.pff-now{position:relative;display:inline-flex;align-items:center;gap:6px}
.pff-now svg{width:22px;height:auto}
.pff-logo{position:relative;display:block;margin:48px 0 0;padding:0;background:none;color:#111;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-mask-image:linear-gradient(to bottom,#000 35%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,#000 35%,rgba(0,0,0,0) 100%)}
.pff-logo .pff-svg{display:block;width:100%;height:auto;transform-origin:50% 50%}
.pff-logo .pff-tap{display:none;position:absolute;right:10px;bottom:8px;font:400 9.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(17,17,17,.55)}
.pff-base{display:flex;justify-content:space-between;align-items:center;margin-top:40px;font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.pff-top{appearance:none;border:0;background:#111;color:#fff;padding:10px 12px;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.pp-rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--slow),transform 1.2s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0ms)}
.pp-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .pp-rv{opacity:1;transform:none;transition:none} }
/* the finale: same card as desktop — grey, small label, the name big — two of the four columns, on the right */
.pp-next{display:flex;flex-direction:column;justify-content:space-between;width:calc((100% - 3 * var(--g)) / 2 + var(--g));aspect-ratio:4/5;margin:44px 0 0 auto;padding:14px 14px 16px;background:#f1f1ef;color:#111;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pp-end{display:flex;justify-content:space-between;align-items:stretch;gap:var(--g);margin-top:44px}
.pp-end .pp-next{margin:0}
.pp-next .pn-top{display:flex;justify-content:space-between;font:400 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8a8a88}
.pp-next .pn-t{font:500 clamp(22px,7vw,30px)/.95 var(--sans);letter-spacing:-.05em;color:#111;text-wrap:balance}
.ppage-open{overflow:hidden}
.logo-wrap,.top-ct,.amb-t{z-index:92 !important}
/* the contact pop-up sits above everything: project pages, windows, the wipe and the corner controls */
.ct-ov{z-index:96 !important}
.ct-open .aw-veil{z-index:95 !important}
.dot-cur{z-index:99 !important}
.copy-cur{z-index:98 !important}
#genie{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:73;pointer-events:none;display:none}
#genie.on{display:block}
.gcard .gc-x{appearance:none;border:0;background:none;cursor:pointer;min-width:36px;min-height:36px;font:400 20px/1 var(--sans);color:#111}
.gcard .gc-x:focus-visible{outline:2px solid #111;outline-offset:2px}
.gcard.awards{width:min(1120px,calc(100vw - 32px))}
.awards-row{position:fixed;inset:0;z-index:67;margin:0;padding:0;list-style:none;pointer-events:none;visibility:hidden;transition:visibility 0s linear .9s}
.awards-row.show{visibility:visible;transition-delay:0s}
.awards-row.no-anim .aw-item{transition:none !important}
.aw-veil{position:fixed;inset:0;z-index:65;background:rgba(255,255,255,.72);opacity:0;pointer-events:none;transition:opacity .7s var(--slow)}
.aw-veil.show{opacity:1;pointer-events:auto}
.ct-ov{position:fixed;left:50%;top:50%;z-index:66;display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,calc(-50% + 14px));transition:opacity .8s var(--slow),transform 1s var(--slow),visibility 0s linear 1s}
.ct-ov.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%);transition-delay:0s}
.ct-mail{appearance:none;border:0;background:var(--hc,#ffe066);padding:.02em .12em .06em;margin:0;cursor:none;color:#111;transition:background .5s var(--slow);font:500 clamp(40px,8vw,140px)/1 var(--sans);letter-spacing:-.05em;white-space:nowrap}
.ct-mail:focus-visible{outline:2px solid #111;outline-offset:8px}
.ct-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.copy-cur{position:fixed;left:0;top:0;z-index:80;pointer-events:none;background:var(--hc,#ffe066);color:#111;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:.6em .8em;white-space:nowrap;transform:translate(-50%,-50%) scale(0);transition:transform .35s var(--slow),background .3s}
.copy-cur.on{transform:translate(-50%,-50%) scale(1)}
.dot-cur{position:fixed;left:0;top:0;z-index:90;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--cc,#ffb3c7);pointer-events:none;opacity:0;will-change:transform;transition:background .8s var(--slow),opacity .3s var(--slow),width .35s var(--slow),height .35s var(--slow),margin .35s var(--slow)}
.dot-cur.on{opacity:1}
.dot-cur.big{width:30px;height:30px;margin:-15px 0 0 -15px}
.dot-cur.hide{opacity:0}
@media (pointer:fine){ body:not(.touch-ui),body:not(.touch-ui) *{cursor:none !important} }
@media (pointer:coarse),(hover:none){ .dot-cur,.copy-cur{display:none !important} }
.touch-ui .dot-cur,.touch-ui .copy-cur{display:none !important}
.m-close{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:80;display:none;align-items:center;gap:8px;appearance:none;border:0;border-radius:0;background:var(--hc,#ffe066);color:#111;font:400 12px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;min-height:44px;padding:0 16px;cursor:pointer;animation:mcIn .35s var(--slow)}
.m-close span{font:400 18px/1 var(--sans)}
.m-close:focus-visible{outline:2px solid #111;outline-offset:3px}
@keyframes mcIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (pointer:coarse),(max-width:700px){ .gc-open .m-close,.aw-open .m-close{display:inline-flex} }
.gc-open:has(.gcard.drawer) .m-close{display:none !important}
.gcard.drawer::before{width:44px;height:5px;margin:2px 0 6px}
.gcard.drawer{touch-action:pan-x}
.ct-open .aw-veil,.ct-open .ct-ov{cursor:none}
@media (pointer:coarse){ .copy-cur{display:none} .ct-mail{cursor:pointer} }
@media (max-width:700px){ .ct-ov{width:calc(100vw - 40px)} .ct-mail{max-width:100%} }
.gen .gl.sel .gt .nm{background:var(--selc,#ffe066);color:#111}
.aw-item{position:absolute;left:0;top:0;margin:0;display:flex;flex-direction:row-reverse;align-items:center;gap:12px;pointer-events:auto;transform-origin:right center;transform:translate(var(--ox,0px),var(--oy,0px)) scale(.25);opacity:0;transition:transform .45s cubic-bezier(.55,0,.8,.2),opacity .3s var(--slow);transition-delay:calc(var(--ri,0) * 35ms)}
.awards-row.show .aw-item{transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));opacity:1;transition:transform .85s cubic-bezier(.3,1.45,.5,1),opacity .4s var(--slow);transition-delay:calc(var(--i,0) * 60ms)}
@supports (transition-timing-function: linear(0, 1)){ .awards-row.show .aw-item{transition:transform 1.25s linear(0.0000, 0.0480, 0.1721, 0.3425, 0.5326, 0.7202, 0.8886, 1.0269, 1.1297, 1.1960, 1.2284, 1.2321, 1.2135, 1.1798, 1.1376, 1.0929, 1.0503, 1.0133, 0.9839, 0.9631, 0.9506, 0.9456, 0.9468, 0.9527, 0.9614, 0.9717, 0.9820, 0.9916, 0.9996, 1.0058, 1.0099, 1.0122, 1.0127, 1.0120, 1.0104, 1.0082, 1.0057, 1.0033, 1.0012, 0.9995, 0.9982, 0.9974, 0.9971, 0.9971, 0.9973, 0.9978, 0.9983, 0.9989, 1),opacity .35s var(--slow);transition-delay:calc(var(--i,0) * 70ms)} }
.aw-item .aw-img{display:block;flex:0 0 auto;width:72px;height:72px;object-fit:contain;pointer-events:none;user-select:none;opacity:0;transition:opacity .6s var(--slow)}
.aw-item.ready .aw-img{opacity:1}
.aw-pill{display:flex;align-items:center;gap:10px;white-space:nowrap;background:#fff;border:0;border-radius:999px;padding:8px 10px 8px 16px;font:400 14px/1 var(--sans);letter-spacing:-.01em;color:#111}
.aw-pill .aw-f{font:400 10px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.aw-item .aw-p{font:400 10px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;background:var(--hc,#ffe066);padding:.45em .55em;border-radius:0}
.aw-item .aw-f{color:#8a8a88}
@media (prefers-reduced-motion:reduce){ .aw-item,.awards-row.show .aw-item{transition:opacity .2s} }
.awards-row.flash .aw-p{animation:awFlash .9s var(--slow)}
@keyframes awFlash{0%,100%{transform:none}40%{transform:translateY(-4px) scale(1.06)}}

.aw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.aw-grid[hidden]{display:none}
.aw-tile{margin:0;display:flex;flex-direction:column;gap:8px}
.aw-tile iframe{display:block;width:100%;aspect-ratio:1/1;border:0;background:#080a0e}
.aw-tile figcaption{display:flex;justify-content:space-between;gap:8px;font:400 10.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#111}
.aw-tile figcaption span:last-child{color:#8a8a88}
@media (max-width:1100px){ .aw-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .aw-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){ .gh small{display:none} .gh{font-size:10px} }
/* same labels on the loader, appearing as it loads */
.ld-gen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ld-gen .gl{opacity:0;transition:opacity .6s var(--slow)}
.ld-gen .gl.on{opacity:1}

/* loader: counter + moving line only */
.ld-status,.ld-squares,.ld-meta,.ld-ticks,.ld-vline,.ld-site{display:none !important}
body.locked{overflow:hidden}
.snd-btn-unused{position:fixed;top:16px;right:142px;z-index:62;appearance:none;border:1px solid rgba(17,17,17,.18);border-radius:999px;background:#fff;color:#111;cursor:pointer;min-height:36px;padding:0 14px;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;transition:background .4s,color .4s}
.snd-btn:hover,.snd-btn[aria-pressed="true"]{background:#111;color:#fff}
.snd-btn:focus-visible{outline:2px solid #111;outline-offset:3px}
.logo-wrap{position:fixed;top:16px;left:16px;z-index:62}
.logo-ph{position:relative;display:flex;align-items:center;gap:9px;color:#111;text-decoration:none;font:600 17px/1 var(--sans);letter-spacing:-.03em}
.top-ct{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:67;appearance:none;border:0;border-radius:0;background:var(--hc,#ffe066);padding:7px 10px 8px;font:400 14px/1 var(--sans);letter-spacing:-.01em;text-transform:none;color:#111;cursor:pointer;transition:background .4s var(--slow)}
.top-ct[aria-expanded="true"]{background:var(--selc,#ffe066);color:#111}
.top-ct:focus-visible{outline:2px solid #111;outline-offset:3px}
.amb-t{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:110px;z-index:67;appearance:none;border:0;border-radius:0;background:#111;color:#fff;width:27px;height:27px;padding:0;display:grid;place-items:center;cursor:pointer}
.amb-t svg{display:block}
.amb-t .amb-x{display:none}
.amb-t[aria-pressed="false"] .amb-w{display:none}
.amb-t[aria-pressed="false"] .amb-x{display:inline}
.amb-t:focus-visible{outline:2px solid #111;outline-offset:3px}
@media (pointer:coarse),(max-width:700px){ .gc-open .amb-t,.ct-open .amb-t,.aw-open .amb-t{display:none} }
@media (pointer:coarse),(max-width:700px){ .gc-open .top-ct,.ct-open .top-ct,.aw-open .top-ct{display:none} }
.logo-dd{position:absolute;left:0;top:100%;padding-top:8px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .35s var(--slow),transform .5s var(--slow)}
.logo-wrap:hover .logo-dd,.logo-wrap:focus-within .logo-dd,.logo-wrap.open .logo-dd{opacity:1;transform:none;pointer-events:auto}
@media (max-width:700px),(pointer:coarse){ .logo-dd{display:none !important} }
.touch-ui .logo-dd{display:none !important}
.dl-svg{appearance:none;border:0;border-radius:0;background:var(--hc,#ffe066);color:#111;padding:8px 9px;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.dl-svg:focus-visible{outline:2px solid #111;outline-offset:3px}
.logo-ph svg{width:auto;height:30px;display:block;color:#111}
.logo-ph:focus-visible{outline:2px solid #111;outline-offset:4px}
.replay-btn{position:fixed;top:16px;right:16px;z-index:62;appearance:none;border:1px solid rgba(17,17,17,.18);border-radius:999px;background:#fff;color:#111;cursor:pointer;min-height:36px;padding:0 14px;font:400 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;transition:background .4s var(--slow),color .4s var(--slow),border-color .4s}
.replay-btn:hover{background:#111;color:#fff;border-color:#111}
.replay-btn:focus-visible{outline:2px solid #111;outline-offset:3px}


/* ---------- 12-col grid overlay ---------- */
.grid{position:fixed;inset:0;z-index:40;pointer-events:none;padding-inline:calc(var(--m) + var(--g))}
.grid-cols{height:100%;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--g)}
.grid-cols i{position:relative;background:rgba(17,17,17,.045);border-inline:1px solid rgba(17,17,17,.14);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease);transition-delay:calc(var(--i) * 28ms)}
.grid-cols i b{position:absolute;left:50%;top:calc(var(--head) + 10px);transform:translateX(-50%);font:400 10px/1 var(--mono);letter-spacing:.06em;color:var(--ink-2);opacity:0;transition:opacity .4s;transition-delay:calc(var(--i) * 28ms + .3s)}
.grid-on .grid-cols i{transform:none}
.grid-on .grid-cols i b{opacity:1}
.grid-spec{position:fixed;z-index:41;left:calc(var(--m) + var(--g));bottom:16px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.92);padding:6px 8px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease);pointer-events:none}
.grid-on .grid-spec{opacity:1;transform:none}


/* ---------- Loader: word tiles flood the grid, black type on bright colour ---------- */
.loader{position:fixed;inset:0;z-index:200;background:#fff;overflow:hidden;transition:opacity .7s var(--slow)}
.loader[hidden]{display:none}
.loader.out{opacity:0}
.ld-field{position:absolute;inset:0}
.tile{position:absolute;left:0;top:0;background:var(--bc);color:#111;white-space:nowrap;padding:.14em .32em .1em;line-height:1;animation:tileIn .32s steps(6) both;transition:background .3s}
.tile.s{font:400 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tile.m{font:500 26px/1 var(--sans);letter-spacing:-.02em}
.tile.l{font:500 58px/.95 var(--sans);letter-spacing:-.04em}
.tile.xl{font:500 clamp(120px,17vw,260px)/.84 var(--sans);letter-spacing:-.06em;padding:.04em .1em 0}
.tile.gone{animation:tileOut .22s steps(4) forwards}
@keyframes tileIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tileOut{to{clip-path:inset(0 0 0 100%)}}
.ld-count{display:none;position:absolute;right:16px;bottom:16px;margin:0;background:var(--bc,#ffe600);color:#111;font:500 clamp(84px,15vw,240px)/.84 var(--sans);letter-spacing:-.06em;padding:.04em .1em 0;font-variant-numeric:tabular-nums;transition:background .25s}
.ld-count small{font-size:.32em;letter-spacing:0;vertical-align:top;margin-left:.08em}
.loader.clearing .ld-count{animation:tileOut .3s steps(5) .5s forwards}
body.locked{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .tile,.tile.gone,.loader.clearing .ld-count{animation:none} }

/* ---------- Scroll-read: board pins while the three columns light up ---------- */
.scroller{position:relative}
.col .wm > span{transition:transform 1.4s var(--slow),background .5s,color .5s}
.col .wm .c{display:inline-block}
.col .wm > span.lit .c{opacity:1;transform:none}
.vibe-gen .col .wm > span.chip:not(.lit){background:none}
.col .col-n{transition:opacity .7s var(--slow)}
.col:not(.on) .col-n{opacity:.3 !important}
@media (prefers-reduced-motion:reduce){ .col .wm .c{opacity:1;transform:none;transition:none} }
@media (max-width:1100px){ .scroller{height:auto} .scroller > .board{position:relative} }

/* ---------- Medium: 8 columns ---------- */
@media (max-width:1100px){
  :root{--cols:8}
  .board{height:auto;min-height:100vh;min-height:100svh;grid-template-rows:auto auto auto;row-gap:40px;padding-top:112px;padding-bottom:340px}
  .col{font-size:clamp(16px,2vw,19px)}
  .col.a{grid-column:2 / span 6;grid-row:1;align-self:start}
  .col.a p:first-of-type{text-indent:calc((100% - 5 * var(--g)) / 6 + var(--g))}
  .col.b{grid-column:5 / span 4;grid-row:2}
  .col.c{grid-column:1 / span 4;grid-row:3}
  .stage-m{display:none}
}
/* medium only: centre the paragraph above the strip, comfortable line length */
@media (min-width:701px) and (max-width:1100px){
  .board{grid-template-rows:1fr !important;row-gap:0 !important;padding-top:var(--m) !important;padding-bottom:var(--m) !important}
  .col.a{transform:translateY(-10vh);grid-column:3 / span 4 !important;grid-row:1 / -1 !important;align-self:center !important;font-size:clamp(18px,calc(12px + .7vw),21px) !important}
  .col.a p:first-of-type{text-indent:calc((100% - 3 * var(--g)) / 4 + var(--g)) !important}
}
/* ---------- Small: 4 columns ---------- */
@media (max-width:700px){
  :root{--cols:4}
  .board{row-gap:32px;padding-top:88px;padding-bottom:300px}
  .col{font-size:17px}
  .col.a,.col.b,.col.c{grid-column:1 / -1}
  .col.a p:first-of-type{text-indent:calc((100% - 3 * var(--g)) / 4 + var(--g))}

  .aw-pill{font-size:12px;padding:7px 8px 7px 12px}
  .aw-pill .aw-f{display:none}
  .aw-item .aw-img{width:56px;height:56px}
  .col.a{grid-row:2}.col.b{grid-row:3}.col.c{grid-row:4}
  .logo-ph span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .lines .v,.lines .h,.lines .x,.fade,.wm > span,.box .ph,.box .ph-in{transition:none}
}