:root{
/* type scale. Host Grotesk headings scale with the screen (phone floor to desktop cap); body and labels are fixed */
  --fs-display:clamp(48px,7.23vw,104px); /* hero line */
  --fs-title:clamp(40px,6.12vw,88px);    /* case study titles, big stats, hero greeting */
  --fs-h1:clamp(34px,3.9vw,56px);        /* section headings */
  --fs-h2:clamp(26px,2.5vw,36px);        /* sub-headings, pull quotes, project card titles */
  --fs-h3:clamp(22px,1.95vw,28px);       /* ticker, how-might-we, stat numbers */
  --fs-h4:18px;                          /* card headings, chips */
  --fs-h5:16px;                          /* feature names, testimonial names */
  --fs-glyph:32px;                       /* the badge star */
  --fs-body-lg:18px;                     /* Geist: lead and body copy */
  --fs-body:16px;                        /* Geist: UI text, lists, nav */
  --fs-body-sm:14px;                     /* Geist: dates, footer, back links */
  --fs-mono-lg:16px;                     /* Geist Mono: hero description */
  --fs-mono:12px;                        /* Geist Mono: labels, eyebrows, captions */
  --fs-mono-sm:10px;                     /* Geist Mono: tiny tags, badge ring */
  --fs-logo:42px;                        /* the "k" brand mark */
  --fs-wordmark:clamp(80px,21vw,300px);  /* footer wordmark block */
  --fs-wordmark-svg:250px;               /* wordmark text, in SVG units */
  /* language fallbacks for the multilingual greetings */
  --font-ta:"Noto Sans Tamil",var(--display);
  --font-ta-display:"Oi","Noto Sans Tamil",var(--display);
  --font-ja:"Noto Sans JP",var(--display);
  --tt-fs-xs:8px;                        /* turntable micro labels (record speed, plinth badge) */
/* ── Colour tokens: the only place raw colours live ── */
  /* surfaces */
  --bg:#08080a;
  --black:#000;
  --surface:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--bg);
  --surface-raised:#18181b;
  --media:#0e0e11;
  /* text */
  --fg:#f0f1f4;
  --fg-2:#a1a2a8;
  --fg-3:#68696f;
  --fg-4:rgba(255,255,255,.28);
  --white:#fff;
  /* text roles: what every piece of copy should use */
  --text-primary:var(--fg);
  --text-secondary:var(--fg-2);
  --text-tertiary:var(--fg-3);
  --text-placeholder:rgba(var(--rgb-white),.32);
  --text-disabled:var(--fg-4);
  --text-brand:var(--accent);
  /* strokes */
  --stroke:rgba(255,255,255,.07);
  --stroke-strong:rgba(255,255,255,.12);
  --stroke-brand:rgba(var(--rgb-accent),var(--o40));
  /* brand */
  --accent:#2457ff;
  --accent-deep:#1a4dff;
  --accent-soft:#788dff;
  --accent-pale:#9fb5ff;
  /* canvas grids (LED matrix, snake intro) */
  --grid-dot:rgba(255,255,255,.045);
  --grid-dot-faint:rgba(255,255,255,.035);
  /* status */
  --live:#3ddc6a;
  /* print (gallery polaroids) */
  --paper-ink:#1b1b1d;
  --paper-muted:#8a8680;
  --paper-blank:#d9d6d0;
  /* font weights: the only three the site uses */
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;
  /* legacy aliases */
  --card:var(--media);
  /* effect layer: channel tokens + one shared opacity scale.
     Use as rgba(var(--rgb-white),var(--o12)) */
  --rgb-white:255,255,255;--rgb-black:0,0,0;--rgb-bg:8,8,10;--rgb-accent:36,87,255;--rgb-accent-deep:26,77,255;--rgb-accent-soft:120,141,255;--rgb-live:61,220,106;
  --o2:.02;--o4:.04;--o6:.06;--o8:.08;--o12:.12;--o16:.16;--o22:.22;--o30:.3;--o40:.4;--o50:.5;--o70:.7;--o90:.9;
/* gold: the award pill's metal, light to deep */
  --gold-pale:#fff3cc;--gold-light:#f7d98a;--gold:#e8b64a;
  --rgb-gold:232,182,74;--rgb-gold-pale:255,243,204;
  /* About sticker board: warm paper and the shadow it casts */
  --paper-board:#f1eee7;--paper-board-hi:#f7f5f0;--paper-board-lo:#e9e5dc;
  --rgb-paper-shadow:40,30,10;
--cta-primary:#151518;--cta-primary-hover:var(--surface-raised);--cta-primary-pressed:#101012;
--grad-brand:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 17.436%);
  --display:"Host Grotesk",ui-sans-serif,system-ui,sans-serif;--body:"Geist",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;color-scheme:dark;
--glow-brand:0 30px 120px -30px rgba(var(--rgb-accent),.25),0 0 90px -20px rgba(var(--rgb-accent),var(--o16));
/* corner radius */
  --r-2xs:2px;--r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;--r-round:50%;
  /* line height */
  --lh-display:.95;--lh-none:1;--lh-tight:1.1;--lh-snug:1.25;--lh-normal:1.45;--lh-relaxed:1.6;--lh-loose:1.7;  /* loose: long-form case study copy */
  /* letter-spacing: tighter as type gets bigger; caps and labels open up */
  --ls-tightest:-.05em;--ls-tighter:-.035em;--ls-tight:-.02em;--ls-snug:-.01em;--ls-wide:.04em;--ls-caps:.12em;
  --ls-mono:-.4px;      /* Geist Mono everywhere */
  --ls-ring:.24em;      /* text set round the badge circle */
  --ls-wordmark:-10px;  /* footer wordmark, SVG units */
--jb-grey-25:#3a3a40;
  --jb-orange-95-rgb:242,240,237;
  --tt-green-22:#1c3a24;
  --tt-green-85:#4cf07a;--tt-green-85-rgb:76,240,122;
  --tt-grey-16:#26272a;
  --tt-grey-18:#2c2c30;
  --tt-grey-30:#46474b;
  --tt-grey-40:#5b5e63;
  --tt-grey-72:#aeb1b6;
  --tt-grey-76:#b9bcc1;
  --tt-grey-91:#e2e4e7;
  --tt-orange-03:#140804;
  --tt-orange-07-rgb:36,18,6;
  --tt-orange-10:#2a180b;
  --tt-orange-16:#3a2410;
  --tt-orange-21:#4a2c16;
  --tt-orange-30:#7a2e08;
  --tt-orange-42:#8a5733;
  --tt-orange-48:#9a6640;
  --tt-orange-78:#ffb13b;--tt-orange-78-rgb:255,177,59;
  --tt-orange-79-rgb:222,190,140;
  --tt-orange-81-rgb:255,190,110;
  --tt-orange-89:#ffd9a6;
  --tt-orange-91-rgb:255,226,190;
  --tt-orange-92-rgb:255,226,196;
  --tt-orange-94-rgb:255,236,210;
  --tt-red-56-rgb:255,50,30;
  --rec-grey-18:#2c2c2e;
  --cv-amber-71:#e5a100;--cv-amber-71-rgb:229,161,0;
  --cv-amber-82:#f5c451;
  --cv-blue-41:#1245ff;--cv-blue-41-rgb:18,69,255;
  --cv-green-75:#25d366;
  --cv-green-78:#3ddc84;--cv-green-78-rgb:61,220,132;
  --cv-green-79:#4ade80;--cv-green-79-rgb:74,222,128;
  --cv-grey-14:#232325;
  --cv-grey-19:#2e2e31;
  --cv-grey-50:#77757a;
  --cv-grey-57:#8a8890;
  --cv-grey-82:#cfcdca;
  --cv-grey-91:#e8e6e3;
  --cv-red-55-rgb:239,68,68;
  --cv-red-67:#ff7a7a;
  --cv-red-76:#fca5a5;
  --cv-red-79:#ffb199;
  --cv-violet-45:#6b55f5;--cv-violet-45-rgb:107,85,245;--cv-green-58:#18a058;--cv-green-58-rgb:24,160,88;
  --cv-instagram:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);
}

/* ── Shape and rhythm scales ── */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{color:var(--text-primary);font:var(--fs-body)/var(--lh-relaxed) var(--display);letter-spacing:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--o6);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}

.shell{max-width:1240px;margin:0 auto;padding:0 40px}
.mono{font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;color:var(--text-tertiary)}
.it{font-family:var(--display);font-style:italic;font-weight:var(--fw-regular)}
.acc{color:var(--text-brand)}

/* nav */

.nav .in{display:flex;justify-content:space-between}
.logo{display:flex;font-weight:var(--fw-medium)}

.links{display:flex;border-radius:var(--r-pill)}
.links a{transition:.2s}
.links a:hover{color:var(--text-primary);background:var(--stroke-strong)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r-pill);font-size:var(--fs-body-lg);font-weight:var(--fw-medium);border:1px solid var(--stroke-strong);transition:.25s}
.btn:hover{border-color:var(--fg-3)}

.btn .ar{transition:transform .25s}.btn:hover .ar{transform:translateX(3px)}
.btn.sm{height:38px;font-size:var(--fs-body-sm)}

/* hero */
.hero{position:relative;margin:40px 0 0;padding:96px 64px 72px}
.hero .c{position:absolute;width:22px;height:22px;border:0 solid var(--fg-3)}
.hero .c.tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}.hero .c.tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.hero .c.bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}.hero .c.br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}

.hero .rec{display:flex;align-items:center;gap:8px}.hero .rec i{width:7px;height:7px;border-radius:var(--r-round);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:var(--o22)}}
.hero h1{font-family:var(--display);font-weight:var(--fw-regular);font-size:var(--fs-display);line-height:var(--lh-none);letter-spacing:var(--ls-tight);max-width:15ch}
.hero h1 em{font-style:italic;color:var(--text-brand)}
.hero .sub{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:48px}
.hero .sub p{color:var(--text-secondary);font-size:var(--fs-body-lg);max-width:46ch}
.hero .sub p b{color:var(--text-primary);font-weight:var(--fw-medium)}
.hero .cta{display:flex;gap:10px}

/* section labels */
section{padding:112px 0 0}
.lab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:40px}
.lab h2{font-family:var(--display);font-weight:var(--fw-regular);font-size:var(--fs-h1);letter-spacing:var(--ls-tight);line-height:var(--lh-none)}
.lab h2 .n{font-family:var(--mono);font-size:var(--fs-mono);color:var(--text-brand);vertical-align:super;margin-right:10px;letter-spacing:var(--ls-wide)}

/* projects:editorial rows */
.work{display:grid;gap:88px}
.pr{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center}
.pr:nth-child(even){grid-template-columns:1fr 1.35fr}

/* experience timeline */
.tl{position:relative}
.tl li{list-style:none;display:grid;grid-template-columns:160px 1fr auto;gap:32px;padding:26px 0;border-bottom:1px solid var(--stroke)}
.tl .yr{font-family:var(--mono);font-size:var(--fs-mono);color:var(--text-tertiary)}

.tl h3{font-family:var(--display);font-weight:var(--fw-regular);font-size:var(--fs-h2);line-height:var(--lh-tight)}
.tl p{color:var(--text-secondary);margin-top:6px;max-width:60ch;font-size:var(--fs-body)}

.tl .role{font-size:var(--fs-body-sm);color:var(--text-secondary);white-space:nowrap}

/* two-col block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.quote p{font-family:var(--display);font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:var(--ls-snug)}
.quote p::before{content:"“";color:var(--text-brand)}.quote p::after{content:"”";color:var(--text-brand)}
.quote cite{display:block;margin-top:22px;font-style:normal;font-size:var(--fs-body-sm);color:var(--text-tertiary)}
.kit li{list-style:none;display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--stroke);font-size:var(--fs-body)}
.kit li span{color:var(--text-tertiary);font-size:var(--fs-body-sm)}

/* galleries */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shot,.photo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--card);aspect-ratio:4/3;display:grid;place-items:center;color:var(--text-tertiary);font-family:var(--mono);font-size:var(--fs-mono)}
.shot img,.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.shot:hover img,.photo:hover img{transform:scale(1.03)}
.shot .cap{display:none}
.photos{columns:3 260px;column-gap:14px}.photos .photo{margin-bottom:14px;break-inside:avoid;aspect-ratio:auto;cursor:zoom-in}
.photos .photo img{position:static;height:auto}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(var(--rgb-black),var(--o90));display:none;place-items:center;padding:24px;cursor:zoom-out}
.lightbox.on{display:grid}.lightbox img{max-height:90vh;border-radius:var(--r-sm)}

/* about */
.about p{color:var(--text-secondary);margin-bottom:18px;line-height:var(--lh-relaxed)}
.about p b{color:var(--text-primary);font-weight:var(--fw-regular)}
.portrait{aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--card);display:grid;place-items:center;position:relative;overflow:hidden}
.portrait>span:first-child{font-family:var(--display);font-size:var(--fs-display);color:var(--stroke-strong)}
.portrait .mono{position:absolute;left:16px;bottom:14px}

/* footer CTA */
footer{padding:140px 0 48px}

/* case study pages */
.cs .wrap{max-width:820px;margin:0 auto;padding:0 24px}
.cs-hero{padding:72px 0 12px}
.back{font-size:var(--fs-body-sm);color:var(--text-tertiary)}.back:hover{color:var(--text-primary)}
.cs h1{font-family:var(--display);font-weight:var(--fw-regular);letter-spacing:var(--ls-tight);line-height:var(--lh-none);font-size:var(--fs-title);margin:22px 0 18px;max-width:none!important}
.lede{color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:var(--lh-relaxed)}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;padding:20px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.meta b{display:block;font-weight:var(--fw-medium);font-size:var(--fs-body);margin-top:4px}

.cs section{padding:56px 0 0}
.cs h2{font-family:var(--display);font-size:var(--fs-h1);font-weight:var(--fw-regular);letter-spacing:var(--ls-snug);margin:10px 0 16px;line-height:var(--lh-tight)}
.cs section>.mono:first-child{color:var(--text-brand)}
.cs p{color:var(--text-secondary);margin-bottom:14px;font-size:var(--fs-body-lg)}
.cs p b{color:var(--text-primary);font-weight:var(--fw-medium)}
.cs blockquote{font-family:var(--display);line-height:var(--lh-snug);margin:28px 0;padding-left:22px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.card{border-radius:var(--r-lg);padding:18px 20px;background:var(--card)}
.card h4{font-size:var(--fs-h4);font-weight:var(--fw-medium);margin-bottom:6px}
.card p{font-size:var(--fs-body);margin:0;line-height:var(--lh-relaxed)}
.hmw{counter-reset:h;margin-top:18px;border-top:1px solid var(--stroke)}
.hmw li{list-style:none;counter-increment:h;display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--stroke);font-family:var(--display);font-size:var(--fs-h3);line-height:var(--lh-snug)}
.hmw li::before{content:"0" counter(h);font:var(--fs-mono) var(--mono);color:var(--text-brand);padding-top:8px}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.metric{border-radius:var(--r-lg);padding:18px;background:var(--card)}
.metric b{font-family:var(--display);font-size:var(--fs-h1);display:block;line-height:var(--lh-none)}
.metric span{font-size:var(--fs-body-sm);color:var(--text-tertiary);line-height:var(--lh-normal);display:block;margin-top:8px}
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.matrix div{background:var(--card);padding:18px;border-radius:var(--r-lg)}

.matrix p{font-size:var(--fs-body-sm);margin:6px 0 0}

.cs-foot{max-width:820px;margin:0 auto;padding:96px 24px 56px;display:flex;justify-content:space-between;font-size:var(--fs-mono);color:var(--text-tertiary)}
.cs-foot a:hover{color:var(--text-primary)}

.rv{transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero .rec i{animation:none}}
@media (max-width:900px){.pr,.pr:nth-child(even){grid-template-columns:1fr;gap:28px}.split{grid-template-columns:1fr;gap:48px}.shots{grid-template-columns:1fr 1fr}.metrics,.meta{grid-template-columns:1fr 1fr}.tl li{grid-template-columns:1fr;gap:6px}.hero .sub{grid-template-columns:1fr}}
@media (max-width:600px){.shell{padding:0 16px}.links a.x{display:none}.hero{padding:72px 20px 40px;margin-top:16px}.cards,.shots{grid-template-columns:1fr}section{padding-top:88px}.logo .nm{display:none}}
.hero h1 em{padding-right:.08em}

.hero .rec i{background:var(--accent);box-shadow:0 0 10px var(--accent)}

.matrix div.hot{box-shadow:inset 0 0 0 1px rgba(var(--rgb-accent-deep),var(--o50))}

::selection{background:var(--accent);color:var(--text-primary)}

/* ===== artsy layer ===== */

.links{border:0;background:none;backdrop-filter:none;padding:0;gap:28px}
.links a{padding:0;border-radius:0;background:none!important;font-family:var(--display);color:var(--text-secondary);position:relative}
.links a:nth-child(2){font-style:italic}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.links a:hover,.links a.on{color:var(--text-primary)}.links a:hover::after,.links a.on::after{transform:scaleX(1)}

/* hero composition */
.art{position:relative;padding:72px 0 40px}
.art h1{font-family:var(--display);position:relative;z-index:2}
.art h1 span{display:block}
.art h1 .l3{padding-left:4%}
.art h1 em{font-style:italic;position:relative;display:inline-block}
.art h1 em svg{position:absolute;left:-4%;bottom:-.12em;width:108%;height:.32em;overflow:visible}
.art h1 em svg path{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.6s .6s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.art .blurb{color:var(--text-secondary);font-size:var(--fs-body-lg);position:relative;z-index:2}
.art .blurb b{color:var(--text-primary);font-weight:var(--fw-regular)}
.art .blurb .cta{display:flex}
.badge{position:absolute;width:150px;height:150px;z-index:3}
.badge>svg{width:100%;height:100%}
.badge text{font-family:var(--mono);font-size:var(--fs-mono-sm);letter-spacing:var(--ls-ring);fill:var(--fg-2);text-transform:uppercase}
.badge .star{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--fs-glyph)}
@keyframes spin{to{transform:rotate(360deg)}}
.pola{position:absolute;background:var(--fg);padding:8px 8px 30px;border-radius:var(--r-xs);box-shadow:0 30px 60px -20px rgba(var(--rgb-black),var(--o90));transition:transform .6s cubic-bezier(.22,1,.36,1);z-index:1}
.pola img{display:block;border-radius:var(--r-2xs)}
.pola figcaption{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:var(--display);font-style:italic;font-size:var(--fs-body);color:var(--paper-ink)}
.pola:hover{transform:rotate(0) scale(1.04)!important;z-index:4}

/* marquee */
.marq{overflow:hidden;padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,var(--black) 10%,var(--black) 90%,transparent);mask-image:linear-gradient(90deg,transparent,var(--black) 10%,var(--black) 90%,transparent)}
.marq div{display:flex;gap:48px;width:max-content;animation:marq 38s linear infinite;font-family:var(--display);white-space:nowrap;color:var(--text-secondary)}

.marq b{font-weight:var(--fw-regular)}
@keyframes marq{to{transform:translateX(-50%)}}

/* gallery page */

.strip{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-mono);color:var(--text-tertiary);letter-spacing:var(--ls-caps);padding:14px 0;border-top:1px dashed var(--stroke-strong);border-bottom:1px dashed var(--stroke-strong);margin:48px 0 56px}
.wall{columns:3 280px;column-gap:36px}
.wall .pola{position:relative;break-inside:avoid;margin:0 0 44px;width:100%;padding:10px 10px 44px;cursor:zoom-in}
.wall .pola .ph{aspect-ratio:var(--r,4/5);background:var(--paper-blank);display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-mono);color:var(--paper-muted)}
.wall .pola img{width:100%;height:auto}
.wall .pola figcaption{bottom:12px;font-size:var(--fs-body-lg)}
.wall .pola .no{position:absolute;right:12px;bottom:14px;font-family:var(--mono);font-size:var(--fs-mono-sm);color:var(--paper-muted)}
.wall .tape{position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(var(--jb-orange-95-rgb),var(--o30));backdrop-filter:blur(2px);transform:rotate(-3deg)}
.gh{display:flex;justify-content:space-between;align-items:baseline;margin:24px 0 36px}
.gh h2{font-family:var(--display);font-weight:var(--fw-regular);font-size:var(--fs-h1);letter-spacing:var(--ls-tight)}
.gh h2 i{color:var(--text-secondary)}

@media (prefers-reduced-motion:reduce){.badge>svg,.marq div{animation:none}.art h1 em svg path{animation:none;stroke-dashoffset:0}}
@media (max-width:900px){.art{min-height:0;padding-bottom:0}.art .blurb{margin:32px 0 0}.art .pola{display:none}.badge{width:110px;height:110px;top:auto;bottom:-20px;right:0}}
@media (max-width:600px){.art h1 .l2{padding-left:6%}.marq div{font-size:var(--fs-h3)}.badge{display:none}}

/* accents:solid blue text, gradient reserved for buttons */
.gt,.hero h1 em,.art h1 em,.acc,.lab h2 .n,.cs section>.mono:first-child,.hmw li::before,.metric b,.quote p::before,.quote p::after,.badge .star,.marq b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text-brand)}
.links a::after{background:var(--accent)}

.cs blockquote{border-image:none;border-left:2px solid var(--accent)}
.tl .yr.now{color:var(--text-brand)}

.wall .pola{display:inline-block;vertical-align:top}
#shots-grid{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;align-items:start}@media (max-width:900px){#shots-grid{grid-template-columns:1fr 1fr}}@media (max-width:600px){#shots-grid{grid-template-columns:1fr}}
/* live LED matrix */
.art{isolation:isolate}
.led{position:absolute;left:50%;bottom:-40px;width:100vw;max-width:1600px;height:260px;transform:translateX(-50%);opacity:var(--o40);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--black) 55%,var(--black) 85%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,var(--black) 55%,var(--black) 85%,transparent 100%)}
@media (max-width:600px){.led{height:180px;opacity:var(--o30)}}

/* Host Grotesk primary + Geist Mono secondary */
.mono{letter-spacing:var(--ls-wide);font-weight:var(--fw-regular)}
.art h1{font-weight:var(--fw-medium);letter-spacing:var(--ls-tightest);line-height:var(--lh-display)}
.lab h2,.gh h2,.tl h3,.cs h1,.cs h2,.quote p,.hmw li{font-weight:var(--fw-medium);letter-spacing:var(--ls-tighter)}
.it,.art h1 em,.marq i,.links a:nth-child(2),.pola figcaption{font-style:italic;font-weight:var(--fw-regular)}

.metric b{font-weight:var(--fw-medium);letter-spacing:var(--ls-tighter)}
.links a{font-weight:var(--fw-regular)}
.marq div{font-size:var(--fs-h3);letter-spacing:var(--ls-tight)}
.pola figcaption,.wall .pola figcaption{font-family:var(--mono);font-style:normal;font-size:var(--fs-mono);letter-spacing:var(--ls-wide)}
.tl .yr,.metric span,.meta .mono,.quote cite,.strip,.badge text,.cs-foot,.kit li span,.tl .role{font-family:var(--mono)}
.metric span,.kit li span,.tl .role,.quote cite{font-size:var(--fs-mono);letter-spacing:var(--ls-snug)}

.portrait>span:first-child{font-style:normal}
.cs blockquote{font-weight:var(--fw-medium);letter-spacing:var(--ls-tighter);font-size:var(--fs-h2)}
.badge{right:0;top:20px}

/* intro:photo chip + pun */
.art h1 .me{transition:transform .5s cubic-bezier(.22,1,.36,1)}

.art h1 span:first-child{display:block}
.art h1 .l2{padding-left:0}

.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait .mono{z-index:1;color:var(--text-primary);text-shadow:0 1px 6px rgba(var(--rgb-black),var(--o70))}

/* photo footer */
.fphoto{position:relative;margin-top:140px;border-radius:var(--r-xl);overflow:hidden;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end;padding:0}
.fbg{position:absolute;inset:0;background-size:cover}
.fphoto::before{content:"";position:absolute;inset:0;z-index:1}
.fphoto::after{content:"";position:absolute;inset:0;z-index:1;background-image:radial-gradient(rgba(var(--rgb-white),var(--o16)) 1px,transparent 1px);background-size:14px 14px;-webkit-mask-image:linear-gradient(180deg,var(--black),transparent 60%);mask-image:linear-gradient(180deg,var(--black),transparent 60%)}
.fin{position:relative;z-index:2;text-align:center;padding:0 24px;margin:auto 0 0;transform:translateY(-40px)}
.fin h2{font-weight:var(--fw-medium);letter-spacing:var(--ls-tighter);font-size:var(--fs-h1);line-height:var(--lh-tight);max-width:20ch;margin:0 auto 28px;color:var(--text-primary)}
.fin h2 em{font-style:italic;font-weight:var(--fw-regular);color:var(--text-primary)}
.fbot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin:0 auto;width:min(760px,calc(100% - 48px));padding:18px 0 26px;border-top:1px solid rgba(var(--rgb-white),var(--o16));font-size:var(--fs-body-sm)}
.fbot nav{display:flex;gap:18px;align-items:center}
.fbot a:hover{color:var(--text-primary)}
.fbot nav a:last-child{width:26px;height:26px;border:1.5px solid rgba(var(--rgb-white),var(--o70));border-radius:var(--r-xs);display:grid;place-items:center;font-weight:var(--fw-semibold);font-size:var(--fs-mono)}
.copy{text-align:center;font-family:var(--mono);font-size:var(--fs-body-sm);color:var(--text-tertiary);padding:22px 0 36px}
@media (max-width:600px){.fphoto{min-height:520px;margin-top:96px;border-radius:var(--r-lg)}}
.btn,.btn.sm{border-radius:var(--r-lg)}
.art h1{font-size:var(--fs-display)}

/* rolling testimonials */
.tst{position:relative;text-align:center;isolation:isolate}
.tst .c{position:absolute;border:0 solid var(--fg-3)}
.tst .c.tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}.tst .c.tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.tst .c.bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}.tst .c.br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.led.soft{left:50%;bottom:0;width:78%;height:150px;opacity:var(--o30);-webkit-mask-image:radial-gradient(ellipse 50% 90% at 50% 100%,var(--black) 30%,transparent 75%);mask-image:radial-gradient(ellipse 50% 90% at 50% 100%,var(--black) 30%,transparent 75%)}

.tst-item{grid-area:1/1;opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .7s;pointer-events:none}
.tst-item.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.tst-item blockquote{font-size:var(--fs-h3)}
.tst-item figcaption{display:grid;gap:4px}
.tst-item figcaption b{font-size:var(--fs-body)}
.tst-item figcaption span{font-family:var(--mono);font-size:var(--fs-mono);color:var(--text-tertiary)}

.tst-dots{display:flex;gap:8px}
.tst-dots button{width:8px;height:8px;padding:0;border:0;border-radius:var(--r-pill);background:var(--stroke-strong);transition:width .4s,background .4s}
.tst-dots button.on{width:26px}

@media (max-width:600px){.tst{padding:56px 12px 72px}}
/* reveal only when JS is running, so content never stays hidden */
.rv{opacity:1;transform:none;filter:none}
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none}
.about .ah{font-weight:var(--fw-medium);letter-spacing:var(--ls-tighter);font-size:var(--fs-h1);line-height:var(--lh-none);margin-bottom:28px;color:var(--text-primary)}
.about .ah span{color:var(--text-tertiary)}
.about p{font-size:var(--fs-body-lg)}

.btn.primary{height:auto;padding:8px 18px;border-radius:var(--r-lg);box-sizing:border-box;border-width:1px;line-height:var(--lh-relaxed)}

/* secondary button (from design spec) */
.btn.primary,.btn.primary:hover{box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;height:auto;overflow:hidden;font-weight:var(--fw-medium)}
.btn.primary{transition:transform .2s,filter .2s}
.btn.primary:hover{transform:translateY(-1px)}
.btn.primary:active{transform:translateY(0)}
.btn.primary:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}

/* secondary button:updated dark spec */
.btn.primary,.btn.primary:hover{padding:8px 18px;gap:10px;border-radius:var(--r-lg);box-shadow:0 .602px 1.084px -1.25px rgba(var(--rgb-white),var(--o12)),0 2.289px 4.119px -2.5px rgba(var(--rgb-white),var(--o12)),0 10px 18px -3.75px rgba(var(--rgb-black),var(--o40)),
    inset 0 -.723px 1.012px -.833px rgba(var(--rgb-white),var(--o12)),inset 0 -2.746px 3.845px -1.667px rgba(var(--rgb-white),var(--o8)),inset 0 -12px 16.8px -2.5px rgba(var(--rgb-white),var(--o4))}

/* nav:upright, colour-only hover */
.links a,.links a:nth-child(2){font-style:normal}
.links a::after{display:none}
.links a.on{color:var(--text-brand)}
/* no underlines on hover anywhere; colour change only */
.links a:hover,.fbot a:hover,.cs-foot a:hover,.back:hover,.lab .mono:hover,.gh .mono:hover{color:var(--text-primary);text-decoration:none}
.tl p a{border-bottom:0;color:var(--text-primary);transition:color .2s}.tl p a:hover{color:var(--text-brand);border:0}

.u,.u:hover,.exp .body a{text-decoration:none}
a:hover{text-decoration:none}
.btn svg{flex:none}
.art .blurb{margin:36px 0 0;max-width:46ch}
/* wordmark */
.logo{gap:6px;font-size:var(--fs-body);letter-spacing:var(--ls-snug);align-items:baseline}
.logo .at{color:var(--text-tertiary);font-weight:var(--fw-regular)}

@media (max-width:600px){.logo .at{display:inline}}
.logo,.links a{white-space:nowrap}.nav .in{gap:16px}@media (max-width:600px){.logo{font-size:var(--fs-mono);gap:4px}}
@media (max-width:400px){.logo{font-size:var(--fs-mono);gap:3px}}

/* frosted top bar:blurs whatever scrolls behind it, full window width */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:none;isolation:isolate}
.nav::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;
  background:rgba(var(--rgb-bg),var(--o70));-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid var(--stroke)}
.nav .in{height:72px}
/* footer photo:silhouettes sit right, keep the text readable */

.fphoto::before{background:linear-gradient(180deg,rgba(var(--rgb-bg),var(--o6)) 0%,rgba(var(--rgb-bg),var(--o30)) 45%,rgba(var(--rgb-bg),var(--o90)) 100%)}

/* floating social dock */
.dock{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-pill);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.dock a,.dock .status{position:relative;width:44px;height:44px;border-radius:var(--r-round);display:grid;place-items:center;flex:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s,color .2s}
.dock a{color:var(--text-primary)}
.dock a svg{width:21px;height:21px}
.dock a:hover,.dock a:focus-visible{transform:translateY(-4px) scale(1.14);background:var(--stroke-strong);color:var(--text-primary)}
.dock a:focus-visible,.dock .status:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}

.dock .status i{width:12px;height:12px;border-radius:var(--r-round);background:var(--live);box-shadow:0 0 12px rgba(var(--rgb-live),var(--o90));position:relative}
.dock .status i::after{content:"";position:absolute;inset:0;border-radius:var(--r-round);background:var(--live);animation:dockping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes dockping{70%,100%{transform:scale(2.4);opacity:0}}
.dock [data-tip]::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,4px);white-space:nowrap;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--stroke-strong);padding:5px 9px;border-radius:var(--r-sm);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.dock [data-tip]:hover::before,.dock [data-tip]:focus-visible::before{opacity:1;transform:translate(-50%,0)}
.copy{padding-bottom:110px}
@media (max-width:600px){.dock{gap:10px;padding:8px 12px}.dock a{width:40px;height:40px}.dock a svg{width:19px;height:19px}}
@media (prefers-reduced-motion:reduce){.dock .status i::after{animation:none}.dock a{transition:none}}
.tst{padding-bottom:88px}

/* greeting chip (replaces wordmark): rolls from Tamil to English on hover */
.hi{display:inline-flex;align-items:center;background:linear-gradient(180deg,var(--surface-raised),var(--surface-raised));border:1px solid var(--stroke-strong);color:var(--text-primary);font-size:var(--fs-body);font-weight:var(--fw-medium);white-space:nowrap;box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o6));transition:border-color .25s}
.hi img{width:36px;height:36px;border-radius:var(--r-md);object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(1.05);flex:none}

.hi-a,.hi-b{display:block;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.hi-a [lang="ta"]{font-family:var(--font-ta);font-weight:var(--fw-semibold)}
.hi-b{left:0;top:0;transform:translateY(110%);opacity:0}
.hi:hover,.hi:focus-visible{border-color:var(--stroke-strong)}
.hi:hover .hi-a,.hi:focus-visible .hi-a{transform:translateY(-110%);opacity:0}
.hi:hover .hi-b,.hi:focus-visible .hi-b{transform:none;opacity:1}

.hi-a{padding-right:0}
.links a{font-size:var(--fs-body)}
@media (max-width:600px){.links a{font-size:var(--fs-body)}.links{gap:14px}.hi{gap:9px;padding-right:12px}.hi img{width:32px;height:32px}}
@media (max-width:400px){.hi{font-size:var(--fs-body-sm);gap:8px}.links a{font-size:var(--fs-body-sm)}.links{gap:12px}}
@media (prefers-reduced-motion:reduce){.hi-a,.hi-b{transition:opacity .2s}}

/* overlay both lines in one grid cell so the chip fits the longer one */
.hi-a,.hi-b{grid-area:1/1;position:static}
.hi .sm{display:none}
@media (max-width:600px){.hi .sm{display:inline}}

/* intro loader:7 greetings in ~2.6s, then slides away (pure CSS, can't get stuck) */
.loader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:grid;place-items:center;pointer-events:none;
  animation:ldout .5s 2.62s cubic-bezier(.65,0,.35,1) forwards}
@keyframes ldout{to{transform:translateY(-100%);visibility:hidden}}
.lw{display:flex;align-items:center;font-size:var(--fs-glyph);font-weight:var(--fw-regular);color:var(--text-primary);letter-spacing:var(--ls-snug)}
.lw i{width:.2em;height:.2em;border-radius:var(--r-round);background:var(--white);flex:none}
.words{display:grid}
.words span{grid-area:1/1;opacity:0;white-space:nowrap;animation:wd .374s linear both}
.words [lang="ja"]{font-family:var(--font-ja)}
.words [lang="ta"]{font-family:var(--font-ta)}
.words span:nth-child(2){animation-delay:.374s}.words span:nth-child(3){animation-delay:.748s}.words span:nth-child(4){animation-delay:1.122s}
.words span:nth-child(5){animation-delay:1.496s}.words span:nth-child(6){animation-delay:1.87s}
.words span:nth-child(7){animation:wdl .4s 2.244s linear both}
@keyframes wd{0%{opacity:0}8%,92%{opacity:1}100%{opacity:0}}
@keyframes wdl{0%{opacity:0}15%,100%{opacity:1}}
.loader.skip{display:none}
@media (prefers-reduced-motion:reduce){.loader{animation:ldfade .3s .7s forwards}.words span{animation:none}.words span:nth-child(7){animation:none;opacity:1}}
@keyframes ldfade{to{opacity:0;visibility:hidden}}

/* end cap:copyright + giant faded name cut off by the page edge */

.giant{font-family:var(--display);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tightest);white-space:nowrap;text-align:center;font-size:var(--fs-wordmark);color:var(--surface-raised);user-select:none;pointer-events:none}
.giant{display:block;width:100%;height:auto;margin:48px 0 0;font-size:inherit;line-height:var(--lh-none)}
.giant text{font-family:var(--display);font-weight:var(--fw-semibold);font-size:var(--fs-wordmark-svg);letter-spacing:var(--ls-wordmark);fill:var(--surface-raised)}

/* hero photo tile (design spec) */
.art h1 .me{box-sizing:border-box;display:inline-block;border:3px solid var(--fg);object-fit:cover;object-position:center;overflow:hidden;box-shadow:0 .723px .723px -1.083px rgba(var(--rgb-black),var(--o30)),0 2.746px 2.746px -2.167px rgba(var(--rgb-black),var(--o30)),0 12px 12px -3.25px rgba(var(--rgb-black),var(--o16))}

/* no partial italics:accents stay upright (colour only) */
.it,.art h1 em,.hero h1 em,.fin h2 em,.marq i,.gh h2 i,.lab h2 .it,.acc{font-style:normal}
.art h1 em{padding-right:0}
.loader:not(.skip) ~ .shell .art h1 em svg path{animation-delay:3.1s}
/* chip location tag */
.hi .loc{display:inline-flex;align-items:center;gap:4px;margin-left:12px;padding-left:12px;border-left:1px solid var(--stroke-strong);color:var(--text-secondary);font-weight:var(--fw-regular)}
.hi .loc .pin{flex:none;color:var(--accent-soft)}
@media (max-width:600px){.hi .loc{display:none}}
/* ribbon:proof points (figure bright, context muted) */

.marq span{color:var(--text-tertiary)}
.marq i{color:var(--text-primary);font-style:normal}
.portrait img{object-position:50% 30%}

/* chip v3: pin + Madras, rolls to வணக்கம் on hover */
.hi{height:40px;padding:0 16px 0 12px;gap:8px;border-radius:var(--r-md)}
.hi .pin{flex:none}
.hi-a{color:var(--text-primary)}
.hi-b{font-family:var(--font-ta);font-weight:var(--fw-semibold);color:var(--text-primary)}
@media (max-width:600px){.hi{height:38px;padding:0 13px 0 10px;font-size:var(--fs-body)}}

/* toolkit:logo chips */
.tools{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.tool{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 12px}
.tool:hover{transform:translateY(-2px)}
.tl-ic{width:28px;height:28px;display:grid;place-items:center;flex:none}
.tl-ic svg{width:24px;height:24px;display:block}
.tool:nth-child(1) .tl-ic svg{width:17px;height:25px}
.tl-n{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-primary)}
.tl-r{font-family:var(--mono);font-size:var(--fs-mono);color:var(--text-tertiary);padding-left:12px;border-left:1px solid var(--stroke-strong)}
@media (max-width:600px){.tools{gap:8px}.tool{padding:8px 14px 8px 10px;gap:10px}.tl-r{display:none}}

/* company logo tiles in the path timeline (swap letter for a logo <img> when available) */
.tl h3.co{display:flex;align-items:center;gap:14px}
.co-logo{width:40px;height:40px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(180deg,var(--surface-raised),var(--surface-raised));border:1px solid var(--stroke-strong);font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);letter-spacing:0;color:var(--text-primary)}
.co-logo img{width:100%;height:100%;object-fit:cover}
.tl li:first-child .co-logo{color:var(--accent-pale)}
@media (max-width:600px){.co-logo{width:34px;height:34px;border-radius:var(--r-sm);font-size:var(--fs-body)}.tl h3.co{gap:11px}}

/* footer photo:original colours, no overlay or dots; shadow keeps the headline legible */
.fphoto::before,.fphoto::after{content:none;display:none}
.fbg{background-color:transparent;background-position:60% 50%}
.fin h2{text-shadow:0 2px 18px rgba(var(--rgb-black),var(--o50)),0 1px 3px rgba(var(--rgb-black),var(--o40))}
.fbot{border-top-color:rgba(var(--rgb-white),var(--o30));color:var(--text-primary);text-shadow:0 1px 8px rgba(var(--rgb-black),var(--o50))}

/* finale:full-bleed photo footer with the giant wordmark on its bottom edge */
.fphoto.finale{position:relative;flex-direction:column;justify-content:flex-end}
.finale .fbg{position:absolute;inset:0;background-size:cover;background-position:60% 45%}
.finale::before{position:absolute;inset:auto 0 0 0;height:45%;z-index:1;background:linear-gradient(180deg,transparent,rgba(var(--rgb-bg),var(--o50)))}

.finale .fbot{width:min(1240px,calc(100% - 80px));padding:16px 0 0;border-top:1px solid rgba(var(--rgb-white),var(--o30));margin:0 auto}
.finale .fbot .copy{padding:0;font-family:var(--mono);font-size:var(--fs-body-sm);color:rgba(var(--rgb-white),var(--o70))}
.finale .giant{position:relative;z-index:2;display:block;width:100%;height:auto;pointer-events:none}
.finale .giant text{font-size:var(--fs-wordmark-svg);letter-spacing:var(--ls-wordmark);font-weight:var(--fw-semibold);font-family:var(--display)}

@media (max-width:600px){.fphoto.finale{min-height:620px}.finale .fbot{width:calc(100% - 32px);flex-wrap:wrap;gap:8px}}

.tl li:first-child .co-logo{border-color:var(--stroke-strong)}.co-logo:has(img){border-color:var(--stroke)}
.tl li{align-items:start}.tl .yr,.tl .role{line-height:40px}@media (max-width:900px){.tl .yr,.tl .role{line-height:var(--lh-relaxed)}}

/* finale v2: photo block + black band carrying the wordmark */
.fphoto.finale{display:block;min-height:0}
.finale::before{content:none;display:none}
.finale .fimg{position:relative;display:flex;flex-direction:column}

.finale .fin,.finale .fbot{position:relative;z-index:1}
.finale .fbot{padding-bottom:28px}
.finale .fband{overflow:hidden}
.finale .giant{mix-blend-mode:normal;margin:0 0 -1px}

@media (max-width:600px){.finale .fband{padding-top:24px}}

/* chip:red pin; Tamil scales to fit the Madras width */

.hi-a{position:relative}
.hi-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;white-space:nowrap;letter-spacing:var(--ls-snug)}

/* dock:expanding status pill */
.dock .status{width:auto;min-width:28px;height:44px;border-radius:var(--r-pill);padding:0 8px;display:flex;align-items:center;gap:0;cursor:default;transition:background .35s,padding .35s,gap .35s}
.dock .status em{font-style:normal;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;transition:max-width .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.dock .status:hover,.dock .status:focus-visible{gap:10px}
.dock .status:hover em,.dock .status:focus-visible em{max-width:280px;opacity:1}
@media (max-width:600px){.dock .status:hover em,.dock .status:focus-visible em{max-width:170px;white-space:normal;line-height:var(--lh-snug)}}
/* chip:site-blue pin; Tamil sized by script to fit the Madras width */
.hi .pin{color:var(--text-brand)}
.hi-b{font-size:var(--fs-mono);overflow:hidden}

/* gallery of trying:jumbled preview (6 prints scattered on a table) */
.jumble{position:relative;margin-top:8px}
.jf{position:absolute;display:block;background:var(--fg);padding:9px 9px 34px;border-radius:var(--r-xs);box-shadow:0 26px 50px -18px rgba(var(--rgb-black),var(--o90));
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;z-index:1}
.jf-img{display:block;overflow:hidden;background:var(--paper-blank)}
.jf-img img{width:100%;height:100%;object-fit:cover;display:block}
.jf-low img{object-position:50% 100%}   /* subject sits low in the frame: keep the bottom edge */
.jf .ph{display:grid;place-items:center;height:100%;font-family:var(--mono);font-size:var(--fs-mono);color:var(--paper-muted)}
.jf-cap{position:absolute;left:12px;right:12px;bottom:9px;font-family:var(--mono);font-size:var(--fs-mono);color:var(--paper-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jf:hover,.jf:focus-visible{transform:rotate(0) scale(1.06)!important;z-index:5;box-shadow:0 34px 70px -18px rgba(var(--rgb-black),var(--o90))}

@media (max-width:900px){
  .jumble{display:grid}
  .jf{position:relative;left:auto!important;top:auto!important;width:auto!important}
  .jf:nth-child(odd){transform:rotate(-3deg)}.jf:nth-child(even){transform:rotate(3deg);margin-top:18px}
}
@media (max-width:900px){.jumble{align-items:start}}

/* v3: page bg, brand wordmark, solid secondary, card footer, centred loader, experience accordions */
body{background:var(--bg)}
.btn.primary,.btn.primary:hover{background:var(--surface-raised);border:1px solid var(--stroke-strong);color:var(--text-primary)}
.brand{font-family:var(--display);font-weight:var(--fw-semibold);color:var(--text-primary);text-decoration:none;display:inline-flex;transition:opacity .2s}
.brand:hover{text-decoration:none}
.brand:focus-visible{outline:2px solid var(--accent-soft);outline-offset:4px;border-radius:var(--r-sm)}

.fphoto.finale{width:auto;margin:140px 0 0;background:transparent;border-radius:0;overflow:visible}
.finale .fimg{border-radius:var(--r-xl);overflow:hidden;min-height:620px}
.finale .fband{background:transparent}
.finale .giant text{fill:var(--surface-raised)}
@media (max-width:600px){.fphoto.finale{margin-top:96px}.finale .fimg{min-height:520px;border-radius:var(--r-lg)}}

.lw{flex-direction:column;gap:0}
.lw i{display:none}
.words{justify-items:center;text-align:center}
.words span{justify-self:center;text-align:center}

.xp{margin-top:14px;border:1px solid var(--stroke-strong);border-radius:var(--r-lg);background:var(--media);overflow:hidden}
.xp summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-secondary);transition:color .2s}
.xp summary::-webkit-details-marker{display:none}
.xp summary:hover{color:var(--text-primary)}

.xp .chev{flex:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.xp[open] .chev{transform:rotate(180deg)}
.xp ul{list-style:none;margin:0;padding:4px 16px 16px;display:grid;gap:12px}
.xp li{position:relative;padding-left:18px;font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-secondary)}
.xp li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:var(--r-round);background:var(--accent)}
.xp li b{color:var(--text-primary);font-weight:var(--fw-medium)}
.xp a{color:var(--text-brand);text-decoration:none}.xp a:hover{color:var(--accent-soft);text-decoration:none}
.tl .xp{width:100%;box-sizing:border-box}
.tl .xp li{display:block;grid-template-columns:none;border:0;padding:0 0 0 18px;margin:0;align-items:initial}
.tl .xp li::after{content:none}
.tl .xp{max-width:760px}

/* v4 ---------------------------------------------------------------- */

.lab h2 .n{display:none}

/* cursor:solid accent dot */
html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%232457FF' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%232457FF' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%232457FF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23h)'/%3E%3Ccircle cx='20' cy='20' r='7' fill='%232457FF'/%3E%3C/svg%3E") 20 20,auto}
a,button,summary,[role=button],label,.totop,.pc,.jf{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%232457FF' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%232457FF' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%232457FF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='26' cy='26' r='26' fill='url(%23h)'/%3E%3Ccircle cx='26' cy='26' r='10' fill='%232457FF'/%3E%3C/svg%3E") 26 26,pointer}
input,textarea{cursor:text}

/* project cards */
#work .work{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pc{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--media);border:1px solid var(--stroke);text-decoration:none;color:inherit}
.pc::before{content:"";position:absolute;z-index:-1;inset:8% 6% -4%;border-radius:var(--r-xl);background:radial-gradient(60% 55% at 50% 45%,rgba(var(--rgb-accent),var(--o50)),rgba(var(--rgb-accent),var(--o16)) 45%,transparent 75%);filter:blur(48px);opacity:0;transform:scale(.9);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);pointer-events:none}
.pc:hover{border-color:var(--stroke-brand);transform:translateY(-4px)}
.pc:hover::before{transform:scale(1.04)}
.pc:hover,.pc:hover *{text-decoration:none}
.pc-img{display:block;margin:10px 10px 0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;background:var(--media)}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .8s;filter:saturate(.9) brightness(.94)}
.pc:hover .pc-img img{transform:scale(1.035);filter:none}
.pc-body{display:flex;flex-direction:column;gap:12px;padding:22px 24px 26px;flex:1}

.pc h3{margin:4px 0 0;font-size:var(--fs-h2);font-weight:var(--fw-medium);letter-spacing:var(--ls-tighter);line-height:var(--lh-tight);color:var(--text-primary)}
.pc p{margin:0;font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-secondary);max-width:52ch}

@media (max-width:900px){#work .work{grid-template-columns:1fr}}
@media (max-width:600px){.pc-body{padding:18px 18px 22px}}

/* journey */
.jr{overflow:hidden}
.jr-row+.jr-row{border-top:1px solid var(--stroke)}
.jr-row summary{list-style:none;display:flex;align-items:center;gap:18px;padding:22px 26px;transition:background .3s}
.jr-row summary::-webkit-details-marker{display:none}

.jr-row summary:focus-visible{outline:2px solid var(--accent-soft);outline-offset:-2px;border-radius:var(--r-xl)}
.jr .co-logo{width:52px;height:52px;border-radius:var(--r-lg);flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid var(--stroke-strong);margin:0}
.jr .co-logo img{width:100%;height:100%;object-fit:cover}
.jr-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.jr-co{display:flex;align-items:center;gap:10px}
.jr-co b{font-size:var(--fs-h3);font-weight:var(--fw-medium);letter-spacing:var(--ls-tight);color:var(--text-primary)}

.jr-role{font-size:var(--fs-body);color:var(--text-primary)}
.jr-date{font-size:var(--fs-body-sm);color:var(--text-tertiary)}
.jr-row .chev{flex:none;color:var(--text-secondary);transition:transform .35s cubic-bezier(.22,1,.36,1)}

.jr-body{padding:0 26px 24px 96px}
.jr-body ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.jr-body li{position:relative;padding-left:18px;font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-secondary)}
.jr-body li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:var(--r-round)}
.jr-body li b{color:var(--text-primary);font-weight:var(--fw-regular)}

@media (max-width:600px){.jr-row summary{padding:18px;gap:14px}.jr .co-logo{width:44px;height:44px;border-radius:var(--r-md)}.jr-co b{font-size:var(--fs-h3)}.jr-body{padding:0 18px 20px}}

/* footer:photo holds only headline + CTA; meta row sits above the wordmark */
.finale .fimg{justify-content:center;align-items:center}
.finale .fimg::after{content:"";position:absolute;inset:0;height:auto;background:rgba(var(--rgb-black),var(--o22));z-index:0}
.finale .fin{margin:0;padding:0 24px;transform:none}
.finale > .fbot{width:auto;margin:0;padding:22px 4px 0;border-top:0;display:flex;justify-content:space-between;align-items:center;text-shadow:none;color:var(--text-secondary)}
.finale > .fbot .copy{font-family:var(--mono);font-size:var(--fs-body-sm);color:var(--text-tertiary);padding:0}
.finale > .fbot .totop{font-size:var(--fs-body-sm);color:var(--text-secondary);text-decoration:none}.finale > .fbot .totop:hover{color:var(--text-primary)}
.finale .fband{padding-top:8px}

/* case study screens */

.scr{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke);background:var(--media)}
.scr img{display:block;width:100%;height:auto}
.scr.ph{aspect-ratio:16/10;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--media) 0 14px,var(--media) 14px 28px)}
.scr.ph span{font-family:var(--mono);font-size:var(--fs-mono);color:var(--text-tertiary);letter-spacing:var(--ls-wide)}
.pc{box-shadow:0 0 0 0 rgba(var(--rgb-accent),var(--o2));transition:border-color .5s,transform .7s cubic-bezier(.22,1,.36,1),box-shadow .9s cubic-bezier(.22,1,.36,1)}

.art h1 span:first-child{margin-bottom:0}
@media (max-width:600px){}
.brand{font-size:var(--fs-h3);letter-spacing:var(--ls-tight)}
.marq div{animation-duration:78s}
.nowat{color:var(--text-secondary);opacity:1}
.art h1 span:first-child{font-size:var(--fs-title)}@media (max-width:600px){.art h1 span:first-child{font-size:var(--fs-title)}}
/* brand mark:serif k + accent dot */
.brand{align-items:baseline;height:auto;line-height:var(--lh-none);padding:6px 0}
.brand .bk{line-height:var(--lh-none);color:var(--text-primary);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.brand .bd{border-radius:var(--r-round);box-shadow:0 0 12px rgba(var(--rgb-accent),var(--o70));transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.brand:hover{opacity:1}
.brand:hover .bk{transform:rotate(-6deg)}
.brand:hover .bd{transform:scale(1.25);box-shadow:0 0 18px rgba(var(--rgb-accent),var(--o90))}
.nav .in{align-items:center}
/* dock:status text expands inside the bar; all hover text in Host Grotesk */
.dock [data-tip]::before{font-family:var(--display);font-size:var(--fs-h5);letter-spacing:0}
.dock .status em{font-family:var(--display);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);letter-spacing:0;color:var(--text-primary)}
.dock .status:hover,.dock .status:focus-visible{background:none;padding:0 12px 0 8px}
@media (max-width:600px){.dock .status:hover em,.dock .status:focus-visible em{font-size:var(--fs-mono)}}
.brand .bk{font-family:var(--display);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tighter)}
.brand{gap:2px}

.brand .bk{font-size:var(--fs-logo)}
.brand .bd{width:10px;height:10px}
.brand .bd,.brand:hover .bd{box-shadow:none}
.brand .bd{background:var(--accent)}

/* case study:looping "what it looks like" strip */
.cs .wl{padding:72px 0 8px}
.cs .wl .wrap .read>.mono{color:var(--text-brand)}
.wl-view{position:relative;overflow:hidden;margin-top:28px;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,var(--black) 6%,var(--black) 94%,transparent);mask-image:linear-gradient(90deg,transparent,var(--black) 6%,var(--black) 94%,transparent)}
.wl-track{display:flex;gap:24px;width:max-content;animation:wlloop 70s linear infinite}
.wl-view:hover .wl-track{animation-play-state:paused}
@keyframes wlloop{to{transform:translateX(calc(-50% - 12px))}}
.wl-item{margin:0;width:min(640px,78vw);flex:none}
.wl-img{display:block;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke);background:var(--media)}
.wl-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.wl-item figcaption{display:flex;gap:12px;align-items:baseline;margin-top:14px;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-secondary)}
.wl-item figcaption span{color:var(--text-tertiary)}
@media (prefers-reduced-motion:reduce){.wl-track{animation:none}.wl-view{overflow-x:auto}}

/* case study:objectives/findings, takeaways, edge, dimensions */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.twocol>div{border-radius:var(--r-lg);padding:20px 22px;background:var(--card)}
.twocol h4,.take h4,.edge h4{margin:0 0 12px;font-family:var(--mono);font-size:var(--fs-mono);font-weight:var(--fw-regular);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-tertiary)}
.twocol ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:10px}
.twocol li{counter-increment:n;position:relative;padding-left:30px;color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-relaxed)}
.twocol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.15em;font-family:var(--mono);font-size:var(--fs-mono);color:var(--text-brand)}
.take{margin-top:24px;border-top:1px solid var(--stroke);padding-top:20px}

.edge{margin-top:16px;border-radius:var(--r-lg);padding:20px 22px;border:1px solid var(--stroke-brand);background:rgba(var(--rgb-accent),var(--o6))}
.edge ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.edge li{padding:6px 12px;border-radius:var(--r-pill);background:rgba(var(--rgb-white),var(--o6));font-size:var(--fs-body-sm);color:var(--text-primary)}
.dims{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dims li{border-radius:var(--r-md);padding:14px 16px;background:var(--card);color:var(--text-primary);font-size:var(--fs-h4);display:flex;flex-direction:column;gap:6px}
.dims li span{font-family:var(--mono);font-size:var(--fs-mono);font-weight:var(--fw-regular);color:var(--text-brand)}
@media (max-width:600px){.twocol{grid-template-columns:1fr}}
/* hero photo tile:smaller, tucked against the name */
.art h1 .me{width:.5em;height:.5em;min-width:36px;min-height:36px;border-radius:.14em;border-width:1px;border-color:var(--stroke);margin-left:.16em;vertical-align:baseline;transform:rotate(4deg)}
.art h1 .me:hover{transform:scale(1.6) rotate(-3deg)}

/* ===================== v5: case study layout from the PDFs ===================== */
.cs{overflow-x:clip}
.csx{margin:0 auto}
.csx .x-k{font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;color:var(--text-tertiary)}
.csx .x-n{font-family:var(--mono);font-size:var(--fs-mono);color:var(--text-brand);text-transform:uppercase}
.csx h1,.csx h2,.csx h3{font-family:var(--display);color:var(--text-primary);font-weight:var(--fw-medium);letter-spacing:var(--ls-tighter)}
.csx p{font-family:var(--body);font-size:var(--fs-body-lg);line-height:var(--lh-loose);color:var(--text-secondary);margin:0 0 18px;max-width:64ch}
.csx p b{color:var(--text-primary);font-weight:var(--fw-medium)}

/* looping strip:full bleed */
.csx .wl{width:100vw;margin-left:calc(50% - 50vw)}
.x-wlhead{margin:0 auto;display:flex;justify-content:space-between;gap:16px}
.csx .wl-item figcaption{justify-content:space-between;letter-spacing:0}
/* sections */
.x-sec,.x-wide{border-top:1px solid var(--stroke);padding:120px 0}
.x-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:40px}
.x-lab{padding-top:14px}
.x-body h2,.x-wide h2{font-size:var(--fs-h1);line-height:var(--lh-none);margin:0 0 56px}
.x-wide>.x-k{display:block;margin-bottom:24px}
.x-wide h2{max-width:20ch}

/* bordered grids */

.x-rows>div{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:44px 40px}

.x-rows h3{font-size:var(--fs-h3);margin:0 0 12px;line-height:var(--lh-snug)}
.csx .x-rows p,.csx .x-ins p{font-size:var(--fs-body);margin:0}
.x-ast{color:var(--text-brand);font-size:var(--fs-body);line-height:var(--lh-relaxed);flex:none}

.x-quote{margin:56px 0!important;padding:4px 0 4px 44px!important;border-left:2px solid var(--accent)!important;border-image:none!important;font-family:var(--display)!important;font-size:var(--fs-body)!important;line-height:var(--lh-snug)!important;font-weight:var(--fw-medium)!important;letter-spacing:var(--ls-tighter)!important;color:var(--text-primary)}
.x-quote em{font-style:normal;color:var(--text-brand)}

.x-ins h3{font-size:var(--fs-h3);line-height:var(--lh-snug);margin:0 0 16px}
.x-ins>div{padding:36px 32px}
.x-ins .x-ast{display:block;margin-bottom:18px}

.x-arr{color:var(--text-brand)}

/* screenshots */
.x-shot{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke);background:var(--media)}
.x-shot img{display:block;width:100%;height:auto}
.x-shots{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:56px}
.x-shots figure{margin:0}
.x-shots figcaption{display:block;margin-top:16px}
/* features */

.x-sec:has(.x-feats){grid-template-columns:1fr}

/* numbers */
.x-nums{display:grid;border:1px solid var(--stroke-strong);margin-bottom:48px}
.x-nums>div{padding:56px 56px 60px;border-bottom:1px solid var(--stroke-strong)}
.x-nums>div:nth-child(odd){border-right:1px solid var(--stroke-strong)}
.x-nums>div:nth-last-child(-n+2){border-bottom:0}
.x-nums b{display:block;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--fs-display);line-height:var(--lh-none);letter-spacing:var(--ls-tightest);color:var(--text-brand);margin-bottom:28px}
.csx .x-nums p{font-size:var(--fs-body);margin:0;max-width:26ch}

.x-nums.x-nums3>div{border-right:1px solid var(--stroke-strong);border-bottom:1px solid var(--stroke-strong)}
.x-nums.x-nums3>div:nth-child(3){border-right:0}
.x-nums.x-nums3>div:nth-child(n+4){border-bottom:0}
.x-nums.x-nums3>div.x-span2{grid-column:span 2;border-right:0}
.x-nums.x-nums3>div.x-span2 b{font-size:var(--fs-h1)}
.x-nums.x-nums3>div.x-span2 p{max-width:44ch}

/* case study responsive */
@media (max-width:900px){
  .x-sec{grid-template-columns:1fr;gap:20px}.x-lab{padding-top:0}
  
  
  .x-nums.x-nums3>div{border-right:1px solid var(--stroke-strong)!important;border-bottom:1px solid var(--stroke-strong)!important}.x-nums.x-nums3>div:nth-child(2n){border-right:0!important}
}
@media (max-width:640px){
  .x-sec,.x-wide{padding:72px 0}
  .x-shots,.x-nums{grid-template-columns:1fr}
  .x-nums>div{border-right:0!important;border-bottom:1px solid var(--stroke-strong)!important}
  .x-nums>div:last-child{border-bottom:0!important}
  .x-rows>div{grid-template-columns:1fr;gap:14px;padding:32px 22px}
  .x-ins>div,.x-nums>div{padding:28px 22px}
  .x-nums.x-nums3>div.x-span2{grid-column:auto}
  
}

/* ===================== v5: typography — Geist for body, Host Grotesk for headers & bold ===================== */
body,p,li,dd,figcaption,blockquote,.links a,.art p,.pc p,.jr-role,.jr-date,.jr-body li,.tst-item blockquote,.kit li,.blurb p,.about p,input,textarea{font-family:var(--body)}
h1,h2,h3,h4,b,strong,.btn,.brand,.marq div,.giant text,.pc h3,.jr-co b,.metric b,.fin h2,.lab h2,.gh h2,.words,.art h1,.art h1 span{font-family:var(--display)}
.marq i{font-family:var(--display)}
/* Geist Mono:-0.4px tracking everywhere */
.mono,.lab h2 .n,.tl .yr,.metric span,.meta .mono,.quote cite,.strip,.badge text,.cs-foot,.kit li span,.tl .role,.copy,.tst-item figcaption span,.tl-r,.finale .fbot .copy,.jf .ph,.jf-cap,.xp summary,.scr.ph span,.wl-item figcaption,.dock [data-tip]::before,.x-k,.x-n,.nowat,.wall .pola .ph,.wall .pola .no,.pola figcaption,.hmw li::before,.twocol h4,.twocol li::before{letter-spacing:var(--ls-mono)!important}

/* ===================== v5: glass cursor ===================== */
.has-gcur,.has-gcur *{cursor:none!important}
.has-gcur input,.has-gcur textarea{cursor:text!important}
.gcur{position:fixed;left:0;top:0;z-index:10000;border-radius:var(--r-round);pointer-events:none;opacity:0;transition:opacity .25s,width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),margin .35s cubic-bezier(.22,1,.36,1),background .35s;-webkit-backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.1);backdrop-filter:url(#glass-lens) blur(.6px) saturate(1.7) brightness(1.12);background:radial-gradient(120% 120% at 30% 25%,rgba(var(--rgb-white),var(--o22)),rgba(var(--rgb-white),var(--o4)) 38%,rgba(var(--rgb-accent),var(--o6)) 70%,rgba(var(--rgb-accent),var(--o16)))}
.gcur.on{opacity:1}
.gcur i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:var(--r-round);background:var(--accent);box-shadow:0 0 10px rgba(var(--rgb-accent),var(--o90));transition:transform .3s}
.gcur.hot{background:radial-gradient(120% 120% at 30% 25%,rgba(var(--rgb-white),var(--o30)),rgba(var(--rgb-white),var(--o6)) 38%,rgba(var(--rgb-accent),var(--o12)) 70%,rgba(var(--rgb-accent),var(--o22)))}
.gcur.hot i{transform:scale(.6)}

@media (prefers-reduced-motion:reduce){.gcur{transition:opacity .2s}}
.x-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-nums.x-nums3{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-nums.x-nums3>div{padding:44px 36px 48px}
.x-nums.x-nums3 b{font-size:var(--fs-h1);white-space:nowrap}
.x-nums.x-nums3>div.x-span2 b{font-size:var(--fs-h1);white-space:normal}

@media (max-width:900px){.x-nums.x-nums3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.x-nums.x-nums3{grid-template-columns:1fr}}
.x-nums.x-nums3 b{font-size:var(--fs-h1)}
.gcur i{display:none}
.btn,.btn.sm{font-size:var(--fs-body-lg)}
/* hero intro in Geist Mono */
.art .blurb p,.art .blurb p b{font-family:var(--mono)!important;letter-spacing:var(--ls-mono)!important}
.art .blurb p{font-size:var(--fs-mono-lg);line-height:var(--lh-loose);font-weight:var(--fw-medium)}
.art .blurb p b{font-weight:var(--fw-regular)}

/* glass cursor at half size */
.gcur{width:32px;height:32px;margin:-16px 0 0 -16px;box-shadow:inset 0 1px 1px rgba(var(--rgb-white),var(--o50)),inset 0 -3px 7px rgba(var(--rgb-accent),var(--o30)),inset 0 0 0 1px rgba(var(--rgb-white),var(--o16)),0 5px 15px -3px rgba(var(--rgb-black),var(--o50)),0 0 14px -3px rgba(var(--rgb-accent),var(--o50))}
.gcur.hot{width:42px;height:42px;margin:-21px 0 0 -21px}
.gcur.down{width:26px;height:26px;margin:-13px 0 0 -13px}

/* case study v6: single column (step label above title), fixed section spacing */
.csx section.x-sec,.csx section.x-wide{display:block}
.csx .x-lab{padding:0}

.x-sec:has(.x-feats) .x-body h2{text-align:left}

.csx .wl{padding-bottom:112px}
.csx .x-nums,.csx .x-shots{margin-top:48px;margin-bottom:0}

.csx .x-nums+p{margin-top:48px}

.csx .x-body>h2+.x-nums{margin-top:0}
.csx .x-body>*:last-child{margin-bottom:0}
@media (max-width:640px){.csx section.x-sec,.csx section.x-wide{padding:72px 0}.csx .x-body h2,.csx .x-wide h2{margin-bottom:28px}.csx .wl{padding-bottom:72px}}

/* case study v7: old card components on the new structure; 2x2 emphasis for features + numbers */
.csx .cards{gap:12px;margin-top:40px}
.csx .card{padding:26px 28px;border-radius:var(--r-lg)}
.csx .card .x-n{display:block;margin-bottom:14px;font-size:var(--fs-mono)}
.csx .card h4{font-family:var(--display);font-size:var(--fs-h4);font-weight:var(--fw-medium);letter-spacing:var(--ls-snug);color:var(--text-primary);margin:0 0 8px}
.csx .card p{font-size:var(--fs-body);line-height:var(--lh-relaxed);margin:0;max-width:none}

.csx .hmw{margin:8px 0 0;padding:0}
.csx .hmw li{font-size:var(--fs-h3);line-height:var(--lh-snug);padding:26px 0;color:var(--text-primary)}
.csx .take{margin-top:40px}
.csx .take h4,.csx .twocol h4,.csx .edge h4{letter-spacing:var(--ls-mono)}

.csx .take+.cards{margin-top:16px}

.csx .twocol{margin-top:40px}
.csx .twocol>div{padding:26px 28px;border-radius:var(--r-lg)}
.csx .twocol li{font-size:var(--fs-body)}
.csx .edge{margin-top:24px;padding:24px 26px;border-radius:var(--r-lg)}
.csx .edge li{font-family:var(--body)}
.csx .dims{margin-top:32px;grid-template-columns:repeat(4,minmax(0,1fr))}
.csx .dims li{padding:18px 20px;min-height:96px;justify-content:space-between;font-family:var(--display);font-size:var(--fs-h4);font-weight:var(--fw-medium)}
.csx .dims li.x-always{background:var(--grad-brand);color:var(--text-primary);box-shadow:inset 0 -.723px 1.012px -.833px rgba(var(--rgb-white),var(--o22)),inset 0 -2.746px 3.845px -1.667px rgba(var(--rgb-white),var(--o16)),inset 0 -12px 16.8px -2.5px rgba(var(--rgb-white),var(--o12))}
.csx .dims li.x-always span{color:var(--text-primary)}
.csx .x-matrix{margin-top:40px}
.csx .x-matrix>div{padding:24px 26px;border-radius:var(--r-lg)}
.csx .x-matrix .mono{font-size:var(--fs-mono);text-transform:uppercase;color:var(--text-tertiary)}
.csx .x-matrix .hot .mono{color:var(--accent-pale)}
.csx .x-matrix ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.csx .x-matrix li{font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-secondary)}
.csx .x-matrix li b{color:var(--text-primary);font-weight:var(--fw-medium)}
.csx .x-matrix div.hot{background:rgba(var(--rgb-accent),var(--o8));box-shadow:inset 0 0 0 1px rgba(var(--rgb-accent),var(--o50))}

/* 2x2 emphasis:numbers */
.x-ngrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.x-ncard{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-xl);padding:40px 40px 44px}
.x-ncard b{display:block;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--fs-title);line-height:var(--lh-none);letter-spacing:var(--ls-tightest);color:var(--text-brand);margin-bottom:22px}
.csx .x-ncard p{font-size:var(--fs-body);margin:0;max-width:34ch}
.x-ncard.x-wide2{grid-column:1/-1}
.x-ncard.x-wide2 b{font-size:var(--fs-h1)}
.x-ncard.x-wide2 p{max-width:60ch}
.csx .x-ngrid+p{margin-top:40px}
@media (max-width:900px){.csx .dims{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.x-ngrid,.csx .cards,.csx .twocol,.csx .x-matrix{grid-template-columns:1fr}.x-ncard{padding:26px 22px}}
/* What we built:sticky stacked cards that collapse as the next one arrives */
.x-scards{display:grid;gap:28px;margin-top:8px;padding-bottom:8px}
.x-scard{position:sticky;top:calc(96px + var(--i) * 14px)}
.x-sc-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:40px;align-items:center;background:var(--media);border:1px solid var(--stroke);border-radius:var(--r-xl);padding:40px;box-shadow:0 -20px 50px -20px rgba(var(--rgb-black),var(--o90));transform-origin:50% 0;will-change:transform,filter;transition:filter .2s}
.x-sc-t .x-n em{font-style:normal;color:var(--text-tertiary);margin-left:8px}
.csx .x-sc-t h3{font-size:var(--fs-h2);line-height:var(--lh-tight);margin:18px 0 14px}
.csx .x-sc-t p{font-size:var(--fs-body);margin:0;max-width:40ch}
.x-sc-in .x-shot{border-radius:var(--r-lg)}
@media (max-width:900px){.x-sc-in{grid-template-columns:1fr;gap:24px;padding:28px}.x-scard{top:calc(80px + var(--i) * 10px)}}
@media (prefers-reduced-motion:reduce){.x-scard{position:static}}

/* case study v8: centered reading column like the original layout */
.csx section.x-sec,.csx section.x-wide{margin-left:auto;margin-right:auto}

/* case study v9: old frame restored — plain hero, blue step labels, 56px rhythm, 820 column, © footer line */
.csx{max-width:none;padding:0}
.csx .cs-hero .lede{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);max-width:none;margin:0}
.csx .cs-hero h1{font-size:var(--fs-title);line-height:var(--lh-none);margin:22px 0 18px;white-space:nowrap}
.csx .meta b{font-family:var(--body);font-weight:var(--fw-medium);line-height:var(--lh-normal);color:var(--text-primary)}

.csx .wl{padding:56px 0 0}
.x-wlhead{max-width:820px;padding:0 24px}
.csx section.x-sec,.csx section.x-wide{max-width:none;margin:0;padding:56px 0 0;border-top:0}
.csx .x-lab{margin:0 0 10px}
.csx .x-lab .x-k,.csx .x-wide>.x-k{color:var(--text-brand);font-size:var(--fs-mono)}
.csx .x-body h2,.csx .x-wide h2{margin:0 0 20px;max-width:none}
.csx .x-body>p,.csx .x-wide>p{max-width:none}
.csx section.x-sec:has(.x-scards){max-width:none}
.csx section.x-sec:has(.x-scards) .x-lab,.csx section.x-sec:has(.x-scards) .x-body>h2{max-width:none;margin-left:0;margin-right:0}
.csx .x-scards{--w:min(1152px,calc(100vw - 48px));width:var(--w);margin-left:calc(50% - var(--w) / 2);margin-top:24px}
.csx .x-shots{margin-top:28px}
.csx .cs-foot{max-width:none;padding:96px 0 56px}
.csx .cs-foot a:hover{color:var(--text-primary)}
@media (max-width:640px){.csx .cs-hero h1{white-space:normal}}

/* live status dot (the old dock green) */
.livedot{position:relative;display:inline-flex;width:8px;height:8px;margin-right:2px}
.livedot i{position:relative;width:8px;height:8px;border-radius:var(--r-round);background:var(--live);box-shadow:0 0 10px rgba(var(--rgb-live),var(--o90))}
.livedot i::after{content:"";position:absolute;inset:0;border-radius:var(--r-round);background:var(--live);animation:dockping 2.2s cubic-bezier(0,0,.2,1) infinite}
@media (prefers-reduced-motion:reduce){.livedot i::after{animation:none}}

/* hand-drawn note beside Say hello */
.art .blurb .cta{align-items:center;gap:6px;flex-wrap:wrap}

@keyframes hndraw{to{stroke-dashoffset:0}}
@keyframes hnfade{to{opacity:1}}

.art h1 span:first-child{letter-spacing:var(--ls-tightest)}

/* Say hello:text snakes around the button border on hover */

.snake-wrap{position:relative;display:inline-flex}
.snake{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;opacity:0;transition:opacity .35s}
.snake text{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);fill:rgba(var(--rgb-white),var(--o70))}
.snake text .sk{fill:var(--accent)}
.snake-wrap:hover .snake,.snake-wrap:focus-within .snake{opacity:1}
.snake .trail{fill:none;stroke:rgba(var(--rgb-accent),var(--o16));stroke-width:1;stroke-dasharray:2 5}

/* hero "better.": hand-drawn loop around the word */
.art h1 em svg.loop{position:absolute;bottom:auto;overflow:visible;pointer-events:none}
.art h1 em svg.loop .lp{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.5s .7s cubic-bezier(.6,0,.3,1) forwards}

@media (prefers-reduced-motion:reduce){.art h1 em svg.loop .lp{animation:none;stroke-dashoffset:0}}
.art h1 em svg.loop{left:-8%;top:-.16em;width:116%;height:1.36em}

/* first fold:banner + Projects title visible above the fold */
.art{padding-top:40px;padding-bottom:28px;min-height:0}
.art .blurb{margin-top:28px}
.art .blurb .cta{margin-top:44px;margin-bottom:28px}
.marq{margin-top:28px!important}
#work{padding-top:56px!important}
.marq b{color:var(--text-disabled)!important;-webkit-text-fill-color:rgba(var(--rgb-white),var(--o30))}
/* dock tucks away at the top of the page */
.dock{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s}
.dock.dock-away{transform:translate(-50%,140%);opacity:0;pointer-events:none}
/* LED matrix:brighter (same footprint as before) */
.art .led:not(.soft){opacity:var(--o70)}
@media (max-width:600px){.art .led:not(.soft){opacity:var(--o50)}}
/* LED matrix extended behind the banner, dimmed there; banner has no rules */
.art .led:not(.soft){bottom:-128px;height:420px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--black) 36%,var(--black) 64%,rgba(var(--rgb-black),var(--o30)) 76%,rgba(var(--rgb-black),var(--o22)) 92%,transparent 100%)}
.marq{position:relative;z-index:1;border-top:0!important;border-bottom:0!important}
@media (max-width:600px){.art .led:not(.soft){height:320px}}
/* LED matrix:full-bleed at any width, with soft faded sides */
.art .led:not(.soft){max-width:none;width:100vw;-webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--black) 36%,var(--black) 64%,rgba(var(--rgb-black),var(--o40)) 76%,rgba(var(--rgb-black),var(--o30)) 92%,transparent 100%),linear-gradient(90deg,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,var(--black) 36%,var(--black) 64%,rgba(var(--rgb-black),var(--o40)) 76%,rgba(var(--rgb-black),var(--o30)) 92%,transparent 100%),linear-gradient(90deg,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}

/* location tag:plain text, bottom-right */

.snake .trail{display:none}

/* intro:Snake-style greeting (replaces the word switcher) */
.loader .lw{display:none!important}
.snk-cv{position:absolute;inset:0;width:100%;height:100%}

.snk-g{position:absolute;white-space:nowrap;font-family:var(--display);font-weight:var(--fw-semibold);font-size:var(--fs-h2);letter-spacing:var(--ls-tighter);color:var(--text-primary);
  text-shadow:0 0 18px rgba(var(--rgb-accent),var(--o90)),0 0 2px rgba(var(--rgb-accent),var(--o90));transform:translateY(-50%) scale(.6);opacity:0;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.snk-g.mid{transform:translate(-50%,-50%) scale(.6);font-size:var(--fs-h1)}
.snk-g.mid.on{transform:translate(-50%,-50%) scale(1)}
.snk-g.on{opacity:1;transform:translateY(-50%) scale(1)}
.snk-g.gone{opacity:0;transform:translateY(-70%) scale(.92);transition:transform .35s,opacity .35s}
.snk-g[lang="ja"]{font-family:var(--font-ja)}
.loader:not(.skip) ~ .shell .art h1 em svg.loop .lp{animation-delay:var(--intro,3.4s)!important}
/* intro:Tamil greeting in Oi */
.snk-g[lang="ta"]{font-family:var(--font-ta-display);font-weight:var(--fw-regular);letter-spacing:0}
.snk-g.mid[lang="ta"]{font-size:var(--fs-h1)}

/* toolbar:refractive glass, matching the cursor */
.dock{-webkit-backdrop-filter:blur(6px) saturate(1.8) brightness(1.08);backdrop-filter:blur(6px) saturate(1.8) brightness(1.08);border:1px solid var(--stroke-strong)}
.dock.glass-ref{backdrop-filter:url(#glass-dock) blur(2px) saturate(1.8) brightness(1.1)}
.dock a{background:rgba(var(--rgb-white),var(--o8));box-shadow:inset 0 1px 1px rgba(var(--rgb-white),var(--o22)),inset 0 -2px 6px rgba(var(--rgb-black),var(--o22))}
.dock a:hover{background:rgba(var(--rgb-white),var(--o16))}
/* toolbar glass:neutral, no accent tint */
.dock{background:radial-gradient(140% 120% at 30% 0%,rgba(var(--rgb-white),var(--o16)),rgba(var(--rgb-white),var(--o4)) 45%,rgba(var(--rgb-white),var(--o2)));box-shadow:inset 0 1px 1.5px rgba(var(--rgb-white),var(--o50)),inset 0 -8px 18px rgba(var(--rgb-black),var(--o16)),inset 0 0 0 1px rgba(var(--rgb-white),var(--o8)),0 14px 40px -12px rgba(var(--rgb-black),var(--o70))}
/* project cards:tag line removed, arrow sits on the title line */
.pc-body{position:relative}
/* journey "Now designing": plain mono line with the hero's green dot, no pill */
.jr-now{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-mono);font-weight:var(--fw-regular);letter-spacing:var(--ls-mono);text-transform:uppercase;line-height:var(--lh-none);color:var(--text-secondary);vertical-align:middle;margin-left:4px;padding:0!important;border:0!important;background:none!important;border-radius:0!important;white-space:nowrap}
.jr-now::before{content:"";width:8px;height:8px;border-radius:var(--r-round);background:var(--live);box-shadow:0 0 10px rgba(var(--rgb-live),var(--o90));flex:none}
/* journey bullets:grey like the marquee ✦; links white, light blue on hover, regular weight, no underline */
.jr-body li::before{background:var(--fg-4)}
.jr-body a{color:var(--text-primary);font-weight:var(--fw-regular);text-decoration:none;transition:color .2s}.jr-body a:hover{color:var(--accent-soft);text-decoration:none}
/* case study meta row:divided columns, role sized to its content */
.csx .meta{grid-template-columns:1.25fr 1fr 1fr;gap:32px;padding:26px 0 28px;margin-top:44px}
.csx .meta>div{padding:0;border:0}
.csx .meta .mono{display:block;margin-bottom:10px}
.csx .meta b{font-size:var(--fs-body);margin-top:0}
@media (max-width:640px){.csx .meta{grid-template-columns:1fr 1fr;gap:26px 24px;padding:22px 0 24px}}
/* case study point tiles (replaces arrow grid) */
.csx .x-pts{list-style:none;margin:32px 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.csx .x-pts li{display:flex;align-items:baseline;gap:14px;padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(var(--rgb-white),var(--o4)),rgba(var(--rgb-white),var(--o2)));font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--text-primary)}
.csx .x-i{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);color:var(--text-tertiary);flex:none}
.csx .x-pts+p{margin-top:32px}
/* case study takeaway rows (replaces arrow list) */
.csx .x-take{border-top:0;padding-top:0}
.csx .x-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--stroke)}
.csx .x-rows li{display:grid;grid-template-columns:48px 1fr;align-items:baseline;padding:18px 0;border-top:1px solid var(--stroke);font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--text-primary)}
/* case study quote:centred pull-quote on a faint LED dot-field, no card or rule */
.csx .x-quote{position:relative;margin:72px 0!important;padding:56px 24px!important;border:0!important;border-radius:0;background:none;text-align:center;isolation:isolate;font:inherit!important;letter-spacing:normal!important}
.csx .x-quote::before{content:"";position:absolute;z-index:-1;-webkit-mask-image:radial-gradient(ellipse 55% 50% at 50% 50%,var(--black) 0%,rgba(var(--rgb-black),var(--o40)) 45%,transparent 72%)}
.csx .x-quote::after{content:"";position:absolute;inset:0;z-index:-1}
.csx .x-quote figcaption{display:block;margin:0 0 22px;color:var(--text-tertiary)}
.csx .x-quote blockquote{max-width:700px;margin:0 auto;padding:0;border:0!important;font-family:var(--display);font-size:var(--fs-h2);line-height:var(--lh-snug);font-weight:var(--fw-medium);letter-spacing:var(--ls-tighter);color:var(--text-primary);text-wrap:balance}
.csx .x-quote blockquote em{font-style:normal;color:var(--text-brand)}
@media (max-width:640px){.csx .x-pts{grid-template-columns:1fr}.csx .x-quote{margin:48px 0!important;padding:40px 4px!important}.csx .x-rows li{grid-template-columns:36px 1fr;font-size:var(--fs-body)}}
/* case study section labels (e.g. Key market insights): no hairline above */
.csx .take{border-top:0;padding-top:0}
/* about:bold phrases stay in Geist, not Host Grotesk */
#about .about b,#about .about strong{font-family:var(--body);font-weight:var(--fw-regular)}
/* about heading:"Forever curious." in the accent blue */
#about .ah span{color:var(--text-brand);-webkit-text-fill-color:var(--accent)}
/* quote dot-field:full-bleed band so the dots reach left and right, fading only at the edges */
.csx .x-quote::before{inset:-24px auto;opacity:1;background-image:radial-gradient(rgba(var(--rgb-accent-soft),var(--o50)) 1.4px,transparent 1.7px);background-size:16px 16px;-webkit-mask-image:linear-gradient(180deg,transparent,var(--black) 28%,var(--black) 72%,transparent),linear-gradient(90deg,transparent 2%,var(--black) 22%,rgba(var(--rgb-black),var(--o22)) 50%,var(--black) 78%,transparent 98%);-webkit-mask-composite:source-in;mask-composite:intersect}
.csx .x-quote::after{background:radial-gradient(ellipse 36% 55% at 50% 50%,rgba(var(--rgb-accent),var(--o6)),transparent 70%)}
/* case study end:next-project CTA (replaces "More work") */
.csx .x-next{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;margin-top:112px;padding:28px 28px 28px 36px;border-radius:var(--r-xl);color:var(--text-primary);text-decoration:none;transition:border-color .4s,transform .6s cubic-bezier(.22,1,.36,1)}
.csx .x-next:hover{border-color:var(--stroke-brand);transform:translateY(-3px)}
.csx .x-next-txt{display:flex;flex-direction:column;align-items:flex-start}
.csx .x-next .x-k{color:var(--text-tertiary)}
.csx .x-next-t{margin-top:14px;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--fs-h1);line-height:var(--lh-none);letter-spacing:var(--ls-tightest)}
.csx .x-next-d{margin-top:14px;max-width:34ch;font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--text-secondary)}
.csx .x-next-go{margin-top:28px;display:inline-flex;align-items:center;gap:10px;font-family:var(--display)}
.csx .x-next-go svg{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.csx .x-next:hover .x-next-go svg{transform:translateX(4px)}
.csx .x-next-img{display:block;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke)}
.csx .x-next-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.csx .x-next:hover .x-next-img img{transform:scale(1.04)}
.csx .x-next+.cs-foot{padding-top:48px}
@media (max-width:720px){.csx .x-next{grid-template-columns:1fr;gap:24px;padding:24px;margin-top:80px}.csx .x-next-img{order:-1}}
/* quote dot-field:kept inside the content column, fading at its left and right edges */
.csx .x-quote::before{left:0;right:0;width:auto;transform:none;-webkit-mask-image:linear-gradient(180deg,transparent,var(--black) 28%,var(--black) 72%,transparent),linear-gradient(90deg,transparent 0%,var(--black) 16%,rgba(var(--rgb-black),var(--o22)) 50%,var(--black) 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent,var(--black) 28%,var(--black) 72%,transparent),linear-gradient(90deg,transparent 0%,var(--black) 16%,rgba(var(--rgb-black),var(--o22)) 50%,var(--black) 84%,transparent 100%)}
.csx .x-quote::after{left:0;right:0;width:auto;transform:none}
/* next-project button:secondary style, same as the hero "Say hello" button */
.csx .x-next-go{background:var(--surface-raised);border:1px solid var(--stroke-strong);color:var(--text-primary);border-radius:var(--r-lg);padding:10px 18px;font-weight:var(--fw-medium);font-size:var(--fs-body);box-shadow:0 .602px 1.084px -1.25px rgba(var(--rgb-white),var(--o12)),0 2.289px 4.119px -2.5px rgba(var(--rgb-white),var(--o12)),0 10px 18px -3.75px rgba(var(--rgb-black),var(--o40)),inset 0 -.723px 1.012px -.833px rgba(var(--rgb-white),var(--o12)),inset 0 -2.746px 3.845px -1.667px rgba(var(--rgb-white),var(--o8)),inset 0 -12px 16.8px -2.5px rgba(var(--rgb-white),var(--o4));transition:background .3s,border-color .3s}
.csx .x-next:hover .x-next-go{background:var(--surface-raised);border-color:var(--stroke-strong)}
/* In their words:quote-style testimonial — blue dot-field inside the column, Geist regular, first sentence in white */
.tst{padding:64px 24px 72px}
.tst::before{position:absolute;z-index:-1;opacity:var(--o70);background-image:radial-gradient(rgba(var(--rgb-accent-soft),var(--o50)) 1.4px,transparent 1.7px);background-size:16px 16px;-webkit-mask-image:linear-gradient(180deg,transparent,var(--black) 28%,var(--black) 72%,transparent),linear-gradient(90deg,transparent 0%,var(--black) 16%,rgba(var(--rgb-black),var(--o22)) 50%,var(--black) 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,var(--black) 28%,var(--black) 72%,transparent),linear-gradient(90deg,transparent 0%,var(--black) 16%,rgba(var(--rgb-black),var(--o22)) 50%,var(--black) 84%,transparent 100%);mask-composite:intersect}
.tst-item blockquote{font-family:var(--body);font-size:var(--fs-h2);line-height:var(--lh-snug);font-weight:var(--fw-regular);letter-spacing:var(--ls-tight);color:rgba(var(--rgb-white),var(--o70));text-wrap:balance}
.tst-item blockquote::before{content:"“"}.tst-item blockquote::after{content:"”"}
.tst-item blockquote em{font-style:normal;color:var(--text-primary)}
.tst-item figcaption{margin-top:30px}

.tst-dots button.on{background:var(--white)}
@media (max-width:640px){.tst{padding:44px 4px 52px}}
/* section headers:no rule underneath */
.lab{border-bottom:0;padding-bottom:0}

/* testimonial:subtle outline around the quote block */

.tst::before{inset:0}
@media (max-width:640px){.tst{padding-left:16px;padding-right:16px}}
/* testimonial:LED matrix at the bottom instead of the dot-field */
.tst::before{content:none}
/* testimonial:curved corner brackets instead of the outline; brighter LED */
.tst{border:0;border-radius:0}
.tst .c{display:block;width:32px;height:32px;border-color:rgba(var(--rgb-white),var(--o30))}
.tst .c.tl{border-top-left-radius:var(--r-lg)}.tst .c.tr{border-top-right-radius:var(--r-lg)}
.tst .c.bl{border-bottom-left-radius:var(--r-lg)}.tst .c.br{border-bottom-right-radius:var(--r-lg)}

@media (max-width:600px){.tst .c{width:24px;height:24px}.tst .c.tl{border-top-left-radius:var(--r-md)}.tst .c.tr{border-top-right-radius:var(--r-md)}.tst .c.bl{border-bottom-left-radius:var(--r-md)}.tst .c.br{border-bottom-right-radius:var(--r-md)}}
/* testimonial attribution name in Host Grotesk */
.tst-item figcaption b{font-family:var(--display);font-weight:var(--fw-medium);letter-spacing:var(--ls-snug)}
/* testimonial LED:fills the whole container at 80%; dimmer behind the quote so it stays readable */
.tst .led.soft{left:0;top:0;bottom:auto;width:100%;height:100%;max-width:none;transform:none;-webkit-mask-image:radial-gradient(ellipse 48% 42% at 50% 42%,rgba(var(--rgb-black),var(--o16)),var(--black) 100%)}
@media (max-width:600px){.tst .led.soft{height:100%}}
/* testimonial LED:clipped to the bracket frame, a little dimmer */
.tst{overflow:hidden}
.tst .led.soft{opacity:var(--o40);border-radius:var(--r-xl);clip-path:inset(0 round var(--r-xl))}
@media (max-width:600px){.tst .led.soft{opacity:var(--o40);border-radius:var(--r-xl);clip-path:inset(0 round var(--r-xl))}}
/* testimonial LED:even across the card, no fade behind the quote */
.tst .led.soft{-webkit-mask-image:none;mask-image:none}
/* ── Testimonials:scattered card pile that fans out into a grid on hover ── */
.tk{position:relative;margin-top:8px;height:560px}
.tk-c{position:absolute;left:0;top:0;margin:0;padding:26px 26px 22px;border-radius:var(--r-xl);border:1px solid transparent;display:flex;flex-direction:column;gap:14px;cursor:default;outline:none;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));transition:transform .75s cubic-bezier(.22,1,.36,1) var(--d,0s),box-shadow .5s;box-shadow:0 24px 60px -24px rgba(var(--rgb-black),var(--o70));will-change:transform}
.tk-q{font-family:var(--display);font-weight:var(--fw-semibold);font-size:var(--fs-h2);line-height:var(--lh-display);height:18px;letter-spacing:var(--ls-tighter)}
.tk-c blockquote{margin:0;font-family:var(--body);font-weight:var(--fw-regular);font-size:var(--fs-body);line-height:var(--lh-normal);letter-spacing:var(--ls-snug)}
.tk-c figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}

.tk-c b{display:block;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--fs-h5);letter-spacing:var(--ls-snug);line-height:var(--lh-snug)}
.tk-c small{display:block;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);line-height:var(--lh-normal);margin-top:2px}
/* tones — drawn from the site palette */

.t-pale{background:var(--accent-pale);color:var(--bg)}.t-pale small{color:rgba(var(--rgb-bg),var(--o70))}
.t-card{background:var(--card);border-color:var(--stroke-strong);color:var(--text-primary)}.t-card .tk-q{color:var(--text-brand)}.t-card small{color:var(--text-tertiary)}

.tk.open .tk-c:hover,.tk.open .tk-c:focus-visible{box-shadow:0 30px 70px -24px rgba(var(--rgb-black),var(--o90)),0 0 0 1px rgba(var(--rgb-white),var(--o12))}
/* phones:plain stacked list */
@media (max-width:760px){.tk .tk-c:not(.ph){order:-1}.tk{height:auto!important;display:grid;gap:14px}.tk-c{position:relative;width:auto!important;transform:none!important;transition:none}}
@media (prefers-reduced-motion:reduce){.tk-c{transition:none}}

/* testimonial cards:subtle glass */
.tk-c.t-card{border-color:var(--stroke);-webkit-backdrop-filter:blur(16px) saturate(1.3)}

.tk-c.t-card{-webkit-backdrop-filter:blur(26px) saturate(1.3)}
/* testimonial cards:project-card finish (replaces the glass) */
.tk-c.t-card{background:var(--media);border:1px solid var(--stroke);border-radius:var(--r-xl);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 24px 60px -28px rgba(var(--rgb-black),var(--o90));transition:transform .75s cubic-bezier(.22,1,.36,1) var(--d,0s),box-shadow .6s cubic-bezier(.22,1,.36,1),border-color .4s}
.tk.open .tk-c.t-card:hover{border-color:var(--stroke-strong)}
/* softer blue hover glow on project + testimonial cards */
.pc:hover{box-shadow:0 30px 110px -34px rgba(var(--rgb-accent),var(--o22)),0 0 80px -24px rgba(var(--rgb-accent),var(--o12))}
.pc:hover::before{opacity:var(--o22)}
.tk.open .tk-c.t-card:hover{box-shadow:0 30px 110px -34px rgba(var(--rgb-accent),var(--o22)),0 0 80px -24px rgba(var(--rgb-accent),var(--o12))}
/* Journey so far:matched to the project cards (no glow) */
.jr{background:var(--media);border:1px solid var(--stroke);border-radius:var(--r-xl)}

/* Toolkit chips:same card fill + border as project / journey / testimonial cards (no glow) */
.tool{background:var(--media);border:1px solid var(--stroke);border-radius:var(--r-md)}

/* testimonial cards:no blue hover glow, just a slightly brighter border */
.tk.open .tk-c.t-card:hover,.tk.open .tk-c.t-card:focus-visible{box-shadow:0 24px 60px -28px rgba(var(--rgb-black),var(--o90))}
/* project cards:no blue glow inside the card on hover (outer glow stays) */
.pc::before,.pc:hover::before{opacity:0!important}
/* hover stroke:same blue-tinted border as the project cards */

.tk.open .tk-c.t-card:hover,.tk.open .tk-c.t-card:focus-visible{border-color:var(--stroke-brand)}
/* Toolkit:real app icons */
.tl-ic img{width:28px;height:28px;display:block;border-radius:var(--r-sm);box-shadow:0 0 0 1px rgba(var(--rgb-white),var(--o8))}
/* ── Shared card surface (single source of truth for every card on the homepage) ── */

.pc,.jr,.tk-c.t-card,.tool{background:var(--surface);border:1px solid var(--stroke)}
.jr-row+.jr-row{border-top-color:var(--stroke)}
.pc:hover,.tool:hover,.tk.open .tk-c.t-card:hover,.tk.open .tk-c.t-card:focus-visible{border-color:var(--stroke-brand)}
/* ── Case studies:shared card surface ── */
.csx .card,.csx .twocol>div,.csx .x-matrix>div:not(.hot),.csx .dims li:not(.x-always),.csx .x-sc-in,.csx .x-ncard{background:var(--surface);border:1px solid var(--stroke)}
.csx .x-next{background:radial-gradient(420px 220px at 0% 0%,rgba(var(--rgb-accent),var(--o16)),transparent 70%),var(--surface);border:1px solid var(--stroke)}
/* accent cards (Our edge, Big bets): soft blue wash + pale-blue stroke, no glow */
.csx .edge,.csx .x-matrix div.hot{background:linear-gradient(180deg,rgba(var(--rgb-accent),var(--o8)),rgba(var(--rgb-accent),var(--o4))),var(--surface);border:1px solid var(--stroke-brand);box-shadow:none}
.csx .edge{margin-bottom:40px}
.csx .edge h4,.csx .x-matrix .hot .mono{color:var(--accent-pale)}

.csx .x-matrix .hot li b{color:var(--text-primary)}
/* Impact / Effort as a 2x2 graph with axes */
.csx .x-graph{display:grid;grid-template-columns:34px 1fr;grid-template-rows:1fr auto;column-gap:14px;row-gap:12px;margin-top:40px}
.csx .x-graph .x-matrix{grid-column:2;grid-row:1;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--stroke);border-radius:var(--r-xl);background:var(--surface);overflow:hidden}
.csx .x-graph .x-matrix>div{background:none;border:0;border-radius:0;box-shadow:none;padding:26px 28px 30px;min-height:170px}
.csx .x-graph .x-matrix>div:nth-child(-n+2){border-bottom:1px solid var(--stroke-strong)}
.csx .x-graph .x-matrix>div:nth-child(odd){border-right:1px solid var(--stroke-strong)}
.csx .x-graph .x-matrix>div.hot{background:linear-gradient(180deg,rgba(var(--rgb-accent),var(--o12)),rgba(var(--rgb-accent),var(--o4)));border-top:0;border-left:0;border-right:0}
.csx .x-graph .x-matrix .mono{font-size:var(--fs-mono);letter-spacing:var(--ls-mono)}
.csx .g-yax{grid-column:1;grid-row:1;position:relative}
.csx .g-yax span{position:absolute;left:50%;transform:translateX(-50%)}
.csx .g-yax span:first-child{top:4px}.csx .g-yax span:last-child{bottom:4px}
.csx .g-yax b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font-family:var(--mono);font-weight:var(--fw-regular);font-size:var(--fs-mono);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-secondary)}
.csx .g-yax b::after{content:" \2192";color:var(--text-tertiary)}
.csx .g-xax{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.csx .g-xax b{font-family:var(--mono);font-weight:var(--fw-regular);font-size:var(--fs-mono);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-secondary)}
.csx .g-xax b::after{content:" \2192";color:var(--text-tertiary)}
.csx .g-yax span,.csx .g-xax span{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-tertiary)}
@media (max-width:640px){.csx .x-graph .x-matrix{grid-template-columns:1fr 1fr}.csx .x-graph .x-matrix>div{padding:16px 14px 18px;min-height:140px}.csx .x-graph .x-matrix li{font-size:var(--fs-body-sm)}.csx .x-graph{grid-template-columns:30px 1fr;column-gap:8px}}

/* hero loop uses the accent token */
.art h1 em svg.loop .lp{stroke:var(--accent)}

/* buttons always set in Geist */
.btn,.btn.sm,.csx .x-next-go,button{font-family:var(--body)}
/* journey current-role dot breathes like the hero live dot */
.jr-now{position:relative}
.jr-now::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:var(--r-round);background:var(--live);animation:dockping 2.2s cubic-bezier(0,0,.2,1) infinite}
@media (prefers-reduced-motion:reduce){.jr-now::after{animation:none}}
/* journey hover covers the whole row, expanded body included */
.jr-row{transition:background .3s}
.jr-row summary:hover{background:none}
.jr-row:hover{background:rgba(var(--rgb-white),var(--o2))}
/* journey accordion: chevron follows the animated state, not [open] */
.jr-row[open] .chev{transform:none}
.jr-row.is-open .chev{transform:rotate(180deg)}

/* placeholder testimonial quotes use the placeholder text role */
.tk-c.ph blockquote{color:var(--text-placeholder)!important;opacity:1!important}
/* case studies: bold runs inside body copy stay in Geist, same weight */
.csx p b,.csx p strong,.csx ul li b,.csx ul li strong{font-family:var(--body)}
/* case-study eyebrows at medium weight */
.csx .x-k{font-weight:var(--fw-medium)}
/* list numbers and Template / Feature numbers in brand blue; section eyebrows carry words only */
.csx .x-i,.csx .x-n.x-num,.twocol li::before,.hmw li::before,.dims li:not(.x-always) span{color:var(--text-brand)!important}
/* case-study list numbers and card labels: one size and weight, matching the eyebrows */
.csx .x-i,.csx .x-n,.twocol li::before,.hmw li::before,.dims li span{font-size:var(--fs-mono)!important;font-weight:var(--fw-medium)!important}
/* Our edge + Big bets back on tokens: surface containers, brand labels, brand stroke on Our edge; pills styled like Toolkit cards */
.csx .edge,.csx .x-matrix div.hot,.csx .x-graph .x-matrix>div.hot{background:var(--surface)!important}
.csx .edge{border:1px solid var(--accent)!important}
.csx .edge h4,.csx .x-matrix .hot .mono,.csx .x-matrix .hot .x-k{color:var(--text-brand)!important}
.csx .edge li{background:var(--surface)!important;border:1px solid var(--stroke)!important;border-radius:var(--r-md)!important;color:var(--text-primary)}
/* Our edge: brand stroke at 40%; Big bets: the earlier top-down brand gradient, softer */
.csx .edge{border-color:var(--stroke-brand)!important}
.csx .x-matrix div.hot,.csx .x-graph .x-matrix>div.hot{background:linear-gradient(180deg,rgba(var(--rgb-accent),var(--o16)),rgba(var(--rgb-accent),var(--o4))),var(--surface)!important}
/* 2x2 graph: centre axes use the same stroke as the outer frame */
.csx .x-graph .x-matrix>div{border-color:var(--stroke)!important}
/* the top bar sticks for the whole page: its wrapper no longer creates a box, so the bar gets the shell's width itself */
.nav-shell{display:contents}
.nav-shell>.nav{max-width:1240px;margin-inline:auto;padding-inline:40px}
@media (max-width:600px){.nav-shell>.nav{padding-inline:16px}}
/* case-study reading progress: brand bar under the top bar, with the percentage riding at its tip */
.rprog{position:absolute;left:50%;bottom:0;width:100vw;height:2px;transform:translateX(-50%);opacity:0;transition:opacity .3s;pointer-events:none}
.rprog.on{opacity:1}
.rprog i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
.rprog span{position:absolute;left:clamp(8px,calc(var(--p,0) * 100vw - 44px),calc(100vw - 52px));background:var(--surface-raised);border:1px solid var(--stroke);letter-spacing:var(--ls-mono);color:var(--text-brand);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.rprog{transition:none}}
/* bold runs inside running text keep the paragraph's font; never mix Host Grotesk into Geist copy */
p b,p strong,li b,li strong,dd b,blockquote b{font-family:inherit}
.csx .x-matrix li b{font-family:var(--display)}
/* About: body copy in secondary so the two key lines can be highlighted in primary */
#about .about p{color:var(--text-secondary)}
#about .about p b,#about .about p .hl{color:var(--text-primary)}
/* footer copyright matches the back-to-top link: Geist, same size and weight */
.finale > .fbot .copy,.cs-foot span{font-family:var(--body);font-size:var(--fs-body-sm);font-weight:var(--fw-regular);letter-spacing:0}
/* stronger brand hover glow, shared by project, testimonial and toolkit cards */

.pc:hover,.tool:hover,.tk.open .tk-c.t-card:hover,.tk.open .tk-c.t-card:focus-visible{box-shadow:var(--glow-brand)}
/* toolkit: the logo spins on its vertical axis while a tool is hovered (driven from main.js) */

.tool .tl-ic img{backface-visibility:visible}
/* short-film card in the homepage gallery: play mark + festival tag over the still */
.jf-img{position:relative}
.jf-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:var(--r-round);background:rgba(var(--rgb-bg),var(--o50));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(var(--rgb-white),var(--o30));transition:transform .3s cubic-bezier(.22,1,.36,1)}
.jf-play::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--text-primary)}
.jf-film:hover .jf-play{transform:scale(1.12)}
.jf-tag{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:var(--r-sm);background:rgba(var(--rgb-bg),var(--o70));font-family:var(--mono);font-size:var(--fs-mono-sm);font-weight:var(--fw-medium);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-primary)}

/* progress %: sits on the line, right at the tip of the blue bar */
.rprog span{top:50%;left:min(calc(var(--p,0) * 100vw),calc(100vw - 56px));transform:translateY(-50%);padding:1px 7px;border-radius:var(--r-sm);font-family:var(--mono);font-weight:var(--fw-medium);font-size:var(--fs-mono);line-height:16px;border-color:var(--stroke-brand)}
/* homepage gallery teaser: 8 prints in two loose rows */

@media (max-width:900px){}

.jf-tag{white-space:nowrap}
@media (max-width:600px){.jf-tag{font-size:var(--fs-mono-sm);padding:2px 5px;left:6px;top:6px}.jf-play{width:34px;height:34px;margin:-17px 0 0 -17px}.jf-play::after{left:13px;top:10px;border-width:7px 0 7px 11px}}
/* homepage gallery board: 12 crowded prints you can drag around (desktop) */

.jumble.is-live .jf{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.jumble.is-live .jf.dragging{cursor:grabbing;transition:box-shadow .2s;box-shadow:0 40px 80px -20px rgba(var(--rgb-black),var(--o90))}
.jumble .jf img{-webkit-user-drag:none}
@media (max-width:900px){}
/* board: Reparo charm (appears after the first drag) and the glide back into the pattern */
.jb-spell{position:absolute;right:0;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:var(--fs-mono);font-weight:var(--fw-medium);letter-spacing:var(--ls-mono);color:var(--text-brand);animation:jb-in .4s cubic-bezier(.22,1,.36,1)}
.jb-spell:hover span{display:inline-block;animation:jb-twirl .6s cubic-bezier(.22,1,.36,1)}
.jb-spell:focus-visible{outline:2px solid var(--accent-soft);outline-offset:4px;border-radius:var(--r-xs)}
.jumble .jf.returning{transition:left .7s cubic-bezier(.22,1,.36,1),top .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
@keyframes jb-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes jb-twirl{to{transform:rotate(180deg) scale(1.2)}}
@media (prefers-reduced-motion:reduce){.jumble .jf.returning{transition:none}.jb-spell,.jb-spell:hover span{animation:none}}
.jb-spell{top:-34px}
.jb-spell[hidden]{display:none}
/* homepage gallery board: 20 prints, crowded scatter (entry state; Mischief managed restores it) */

.j1{width:16.5%;top:35px;transform:rotate(4.7deg);z-index:4}
.j2{width:15.5%;left:11.5%;top:31px;transform:rotate(-2.6deg);z-index:5}
.j3{width:16.5%;left:25.0%;top:33px;transform:rotate(-5.6deg);z-index:7}
.j4{width:16.5%;left:45.0%;top:42px;transform:rotate(-5.7deg);z-index:9}

.j6{width:13%;left:70.9%;top:37px;transform:rotate(-5.1deg);z-index:5}
.j7{width:16.5%;left:81.5%;top:43px;transform:rotate(5.9deg);z-index:7}
.j8{width:11.5%;top:325px;transform:rotate(-6.2deg);z-index:6}
.j9{width:16.5%;left:15.0%;top:286px;transform:rotate(-2.4deg);z-index:2}
.j10{width:16.5%;left:26.8%;top:313px;transform:rotate(2.4deg);z-index:1}
.j11{width:15.5%;left:44.7%;top:245px;transform:rotate(-7.6deg);z-index:1}
.j12{width:11.5%;left:58.3%;top:323px;transform:rotate(4.5deg);z-index:4}
.j13{width:18%;left:71.5%;top:267px;transform:rotate(-3.9deg);z-index:1}
.j14{width:13%;left:85.0%;top:306px;transform:rotate(-2.8deg);z-index:2}
.j15{width:16.5%;top:537px;transform:rotate(3.1deg);z-index:9}

.jumble .jf-photo{cursor:zoom-in}
.jumble.is-live .jf-photo{cursor:grab}
@media (max-width:900px){.jumble{grid-template-columns:repeat(3,1fr)!important;gap:18px 12px!important}.jf-cap{font-size:var(--fs-mono-sm)}}

.j1{left:1.5%}.j15{left:1.5%}.j8{left:4%}
.jumble{height:830px}
/* reading progress: the % chip and a little runner ride the tip of the bar */
.rprog .rp-tip{position:absolute;top:50%;left:min(calc(var(--p,0) * 100vw),calc(100vw - 56px));display:flex;align-items:center;transform:translateY(-50%)}
.rprog .rp-tip span{position:static;transform:none;left:auto;top:auto}
/* gallery: black pegboard behind the prints */
.jumble{background-color:var(--cta-primary);background-image:radial-gradient(circle,rgba(var(--rgb-black),var(--o90)) 0 2.4px,rgba(var(--rgb-white),var(--o4)) 2.9px 3.5px,transparent 3.9px);background-size:26px 26px;background-position:13px 13px}
.jumble.is-live{overflow:hidden}
/* each print hangs on a small peg */
.jumble .jf::before{content:"";position:absolute;left:50%;top:-5px;width:12px;height:12px;margin-left:-6px;border-radius:var(--r-round);z-index:2;background:radial-gradient(circle at 35% 30%,var(--fg),var(--fg-2) 45%,var(--jb-grey-25) 80%);box-shadow:0 2px 3px rgba(var(--rgb-black),var(--o70))}
.lab .jb-spell{position:static;margin-left:auto;align-self:center;animation:jb-in .4s cubic-bezier(.22,1,.36,1)}
@media (max-width:900px){.jumble{padding:22px 14px!important}}
/* pegboard uses the same card styling as the rest of the homepage: surface fill, --stroke border, 24px radius */
.jumble{border:1px solid var(--stroke);border-radius:var(--r-xl);box-shadow:none}
/* pegboard holes: punched black holes with a faint lit lower lip, so the board reads as perforated */
.jumble{background:radial-gradient(circle at 50% 46%,var(--black) 0 3.3px,transparent 3.8px) 0 0/24px 24px,
  radial-gradient(circle at 50% 56%,rgba(var(--rgb-white),var(--o16)) 0 3.6px,transparent 4.1px) 0 0/24px 24px,
  var(--surface)}
/* reading bar: the brand-blue crewmate runs at the tip of the bar (replaces the % chip) */
.rprog .rp-tip{left:min(calc(var(--p,0) * 100vw),calc(100vw - 48px));gap:0}
.rprog .rp-run{display:block;width:46px;height:46px;margin-left:-8px;transform:translateY(-19px);pointer-events:none}
.rprog .rp-run svg{display:block}
.rprog.back .rp-run{scale:-1 1}
.rprog .rp-tip .rp-run{display:block;pointer-events:none}
.rprog .rp-tip .rp-run svg{width:100%!important;height:100%!important}

/* hero greeting in secondary text; the "I design" line stays primary */
.art h1 span:first-child{color:var(--text-secondary)}
/* Made in Madras: the original ring badge, held still and in one colour */

.badge .star{color:var(--text-secondary)}

/* phones and tablets: the film takes a full row, the shots and photos fill in around it */
@media (max-width:900px){.jumble{grid-auto-flow:dense;height:auto!important}.jumble .jf-film{grid-column:span 2;width:auto!important}}
/* pegboard prints sit straight: no tilts on the board or in the phone grid */
@media (max-width:900px){.jumble .jf:nth-child(odd),.jumble .jf:nth-child(even){transform:rotate(var(--tilt,0deg));margin-top:0}}
.jumble .jf-film{z-index:2}
/* hero: "better." in primary text; the hand-drawn loop around it stays brand blue */
.art h1 em{color:var(--text-primary);-webkit-text-fill-color:var(--text-primary)}
/* spell button: gold like "mischief managed", Geist Mono 500, the usual tracking */

.lab .jb-spell,.jb-spell{color:var(--gold);font-family:var(--mono);font-weight:var(--fw-medium);letter-spacing:var(--ls-mono)}
/* pegboard holes fit a whole number of rows and columns, so the bottom and right edges match the top and left (no sliced holes) */
.jumble{background-repeat:round}
/* primary CTA: flat fills per state (no brightness filters) */

.btn.primary{background:var(--cta-primary)}
.btn.primary:hover{background:var(--cta-primary-hover);filter:none}
.btn.primary:active{background:var(--cta-primary-pressed);filter:none}

/* pegboard runs edge to edge like the hero LED matrix: the board surface and holes fade out on all four sides,
   the prints stay crisp in a centred band */
#trying .jumble{overflow-x:clip;width:100vw;margin-left:calc(50% - 50vw);border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate}
#trying .jumble::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,var(--black) 0 3.3px,transparent 3.8px) 0 0/24px 24px,
    radial-gradient(circle at 50% 56%,rgba(var(--rgb-white),var(--o16)) 0 3.6px,transparent 4.1px) 0 0/24px 24px,
    var(--surface);
  background-repeat:round;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--black) 16%,var(--black) 84%,transparent 100%),linear-gradient(90deg,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,var(--black) 16%,var(--black) 84%,transparent 100%),linear-gradient(90deg,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);
  mask-composite:intersect}
@media (max-width:900px){#trying .jumble{padding:56px 16px!important}}

/* Made in Madras badge at 50%, turning ultra slowly (one turn every 3 minutes) */
.badge{opacity:var(--o50)}
.badge>svg{animation:spin 60s linear infinite}
@media (prefers-reduced-motion:reduce){.badge>svg{animation:none}}
/* after the spell: "Mischief managed" inks in, faint gold footprints walk away, the words fade */
.jb-mm{position:absolute;z-index:61;pointer-events:none;transform:translateY(-50%);color:var(--gold)}
.jb-mm-words{position:absolute;right:0;top:0;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-weight:var(--fw-medium);font-size:var(--fs-mono);line-height:var(--lh-none);letter-spacing:var(--ls-mono)}
.jb-mm-words span{opacity:0;animation:jb-ink .5s ease-out forwards}
.jb-mm.out .jb-mm-words{transition:opacity .9s ease,filter .9s ease;opacity:0;filter:blur(1.5px)}
.jb-foot{position:absolute;width:9px;height:16px;fill:var(--gold);opacity:0;animation:jb-step 1.9s ease-out forwards}
@keyframes jb-ink{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}
@keyframes jb-step{0%{opacity:0}12%{opacity:.6}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.jb-mm-words span{animation:none;opacity:1}}

/* reading bar: the running fox is wide and low, so the tip box is wider; its right edge still meets the bar end at 100% */
.rprog .rp-tip{left:calc(var(--p,0) * (100% - 44px))}
.rprog .rp-tip .rp-run{width:50px;height:30px;margin-left:-6px;transform:translateY(-15px)}

/* hero photo tile links to About, where the same photo is shown large */
.art h1 .me-link{display:inline-block;vertical-align:middle;cursor:pointer}
.art h1 .me-link .me{vertical-align:middle}
.art h1 .me{border:2px solid var(--stroke-strong)}  /* white photo tile: soft grey edge */
.art h1 .me-link:focus-visible{outline:2px solid var(--stroke-brand);outline-offset:4px;border-radius:var(--r-lg)}
#about{scroll-margin-top:88px}

/* ✦ as an inline SVG: none of the three brand fonts has the glyph, so it no longer borrows a system font */
.i-star{display:inline-block;width:.72em;height:.72em;vertical-align:-.06em;fill:currentColor;flex:none}
.marq b .i-star{fill:rgba(var(--rgb-white),var(--o30))}

/* hero name slot: "Kaushik" rolls to "h0lyykau" (the domain) and back once, one reel per letter */
.art h1 .slot{white-space:nowrap}
.slot x-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.slot x-col{--cell:1.16em;position:relative;display:inline-block;white-space:pre}
.slot x-win{position:absolute;left:-.04em;right:-.04em;top:calc((1lh - var(--cell)) / 2);height:var(--cell);overflow:hidden;display:none;
  -webkit-mask-image:linear-gradient(transparent,var(--black) 14%,var(--black) 86%,transparent);mask-image:linear-gradient(transparent,var(--black) 14%,var(--black) 86%,transparent)}
.slot x-strip{display:block;padding-left:.04em;will-change:transform}
.slot x-cell{display:block;height:var(--cell);line-height:var(--cell);white-space:pre}
.slot x-col.on x-win{display:block}
.slot x-col.on x-size{visibility:hidden}

/* toolkit pills link out to each tool's site */
.tools>li{display:flex}
a.tool{color:inherit;cursor:pointer}
a.tool:focus-visible{outline:2px solid var(--stroke-brand);outline-offset:3px}

/* project cards: no arrow button; over a card the cursor turns into a "View project" button (fine pointers only) */
.pc h3{padding-right:0}
.btn.primary.vcur{position:fixed;left:0;top:0;z-index:10001;pointer-events:none;white-space:nowrap;opacity:0;
  transform:translate3d(var(--x,-200px),var(--y,-200px),0) translate(-50%,-50%) scale(.6);transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.25,1.2)}
.btn.primary.vcur.on{opacity:1;transform:translate3d(var(--x,-200px),var(--y,-200px),0) translate(-50%,-50%) scale(1)}
.btn.primary.vcur.down{transform:translate3d(var(--x,-200px),var(--y,-200px),0) translate(-50%,-50%) scale(.94)}
.gcur.off{opacity:0!important}
/* compact size of the primary button: same look, 36px tall instead of 44px */
.btn.primary.sm,.btn.primary.sm:hover{height:36px;padding:0 12px;gap:6px;border-radius:var(--r-md);font-size:var(--fs-body-sm);font-weight:var(--fw-medium)}
.btn.primary.sm svg{width:12px;height:12px;flex:none}
@media (prefers-reduced-motion:reduce){.btn.primary.vcur{transition:opacity .15s}}

/* ---------- What I'm currently listening to: a turntable and a crate of five records ---------- */
#listening .deck{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
/* the deck: a walnut plinth, brushed-aluminium platter with strobe dots, rubber mat, S-shaped chrome tonearm */
#listening .tt{position:relative;aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;background:linear-gradient(95deg,var(--tt-orange-42) 0%,var(--tt-orange-48) 28%,var(--tt-orange-42) 55%,var(--tt-orange-48) 82%,var(--tt-orange-42) 100%);box-shadow:inset 0 1px 0 rgba(var(--tt-orange-92-rgb),var(--o30)),inset 0 0 0 1px rgba(var(--rgb-black),var(--o30)),inset 0 -2px 0 rgba(var(--rgb-black),var(--o30)),
    0 2px 0 var(--tt-orange-21),0 6px 0 var(--tt-orange-10),0 8px 2px rgba(var(--rgb-black),var(--o40)),0 46px 80px -28px rgba(var(--rgb-black),var(--o90))}
.tt-grain{position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='560'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.42' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.04 0 0 0 2.4 -1.0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0018 0.06' numOctaves='2' seed='41'/%3E%3CfeColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.52 0 0 0 0 0.32 0 0 0 1.8 -1.0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E") center/cover,linear-gradient(180deg,rgba(var(--tt-orange-94-rgb),var(--o12)),transparent 30%,transparent 75%,rgba(var(--rgb-black),var(--o16)))}
.tt-grain::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 80% at 30% 15%,rgba(var(--tt-orange-94-rgb),var(--o16)),transparent 60%)}  /* soft light across the lacquer */
.tt-hinge{position:absolute;top:0;width:8%;height:9px;border-radius:0 0 var(--r-xs) var(--r-xs);background:linear-gradient(180deg,var(--paper-ink),var(--tt-grey-18));box-shadow:0 1px 0 rgba(var(--rgb-white),var(--o8))}
.tt-hinge.l{left:16%}.tt-hinge.r{right:16%}
.tt-badge{position:absolute;left:5.5%;top:5.5%;font:var(--fw-medium) var(--fs-mono-sm)/var(--lh-none) var(--mono);letter-spacing:var(--ls-caps);text-transform:uppercase;color:rgba(var(--tt-orange-07-rgb),var(--o70));
  text-shadow:0 1px 0 rgba(var(--tt-orange-92-rgb),var(--o16))}
.tt-badge b{font-weight:var(--fw-medium);color:rgba(var(--tt-orange-07-rgb),var(--o90));margin:0 .4em}
/* platter */
.tt-platter{position:absolute;left:6%;top:47.5%;width:57%;aspect-ratio:1;transform:translateY(-50%);border-radius:var(--r-round)}
.tt-rim{position:absolute;inset:0;border-radius:var(--r-round)}
/* two rows of strobe dots round the rim edge */
.tt-rim::before{content:"";position:absolute;inset:0;border-radius:var(--r-round);background:repeating-conic-gradient(var(--tt-grey-16) 0 .8deg,transparent .8deg 2.25deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 93.4%,var(--black) 93.8% 95.6%,transparent 96% 97.2%,var(--black) 97.6% 99.2%,transparent 99.5%);
  mask-image:radial-gradient(circle,transparent 0 93.4%,var(--black) 93.8% 95.6%,transparent 96% 97.2%,var(--black) 97.6% 99.2%,transparent 99.5%)}
/* the strobe lamp throws red light onto the dots when the deck is on */
.tt-rim::after{content:"";position:absolute;inset:0;border-radius:var(--r-round);background:radial-gradient(circle at 13% 86%,rgba(var(--tt-red-56-rgb),var(--o50)),transparent 34%);
  mix-blend-mode:screen;opacity:0;transition:opacity .5s}
.tt.on .tt-rim::after{opacity:1}
.tt-mat{position:absolute;inset:4.6%;border-radius:var(--r-round);background:radial-gradient(circle,transparent 0 16%,rgba(var(--rgb-white),var(--o4)) 16.5% 17.5%,transparent 18%),repeating-radial-gradient(circle,var(--media) 0 2px,var(--bg) 2px 4px);box-shadow:inset 0 0 0 1px rgba(var(--rgb-black),var(--o70)),inset 0 2px 6px rgba(var(--rgb-black),var(--o70))}
.tt-rec{position:absolute;inset:6.4%;border-radius:var(--r-round);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.tt-rec.off{opacity:0;transform:scale(.94)}
/* the rotation lives on its own layer with no transitions, so the spin is perfectly even and the drop-in animation above can't fight it */
.tt-spin{position:absolute;inset:0;border-radius:var(--r-round);will-change:transform;transition:none}
.tt-rec.in{animation:recIn .55s cubic-bezier(.2,.9,.25,1.1)}
@keyframes recIn{from{transform:scale(1.07);filter:drop-shadow(0 30px 30px rgba(var(--rgb-black),var(--o70)))}to{transform:scale(1)}}
.tt-grooves,.vr-disc,.ghost-disc{border-radius:var(--r-round);
  background:radial-gradient(circle,transparent 0 29.5%,rgba(var(--rgb-black),var(--o40)) 30%,transparent 31.5%,transparent 96%,rgba(var(--rgb-white),var(--o8)) 97%,transparent 98.5%),
    repeating-radial-gradient(circle,var(--bg) 0 1px,var(--surface-raised) 1px 2.2px),var(--media);
  box-shadow:inset 0 0 0 1px rgba(var(--rgb-white),var(--o6)),0 8px 22px -8px rgba(var(--rgb-black),var(--o90))}
.tt-grooves{position:absolute;inset:0}
.tt-label,.vr-label,.ghost-label{position:absolute;inset:29.6%;border-radius:var(--r-round);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--rgb-black),var(--o40))}
.tt-label img,.vr-label img,.ghost-label img,.vr-sleeve img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
/* a record label shows the cover, with the pressing ring around the spindle */
.tt-label::after,.vr-label::after,.ghost-label::after{content:"";position:absolute;inset:0;border-radius:var(--r-round);box-shadow:inset 0 0 0 1.5px rgba(var(--rgb-black),var(--o30)),inset 0 0 18px rgba(var(--rgb-black),var(--o22))}
.tt-sheen{position:absolute;inset:6.4%;border-radius:var(--r-round);pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 35deg,transparent 0 9%,rgba(var(--rgb-white),var(--o8)) 13%,transparent 19% 58%,rgba(var(--rgb-white),var(--o6)) 63%,transparent 69%);
  -webkit-mask-image:radial-gradient(circle,transparent 0 33%,var(--black) 34%);mask-image:radial-gradient(circle,transparent 0 33%,var(--black) 34%)}
.tt-spindle{position:absolute;left:50%;top:50%;width:2.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:var(--r-round);
  background:radial-gradient(circle at 35% 35%,var(--white),var(--fg-2) 55%,var(--tt-grey-30));box-shadow:0 1px 2px rgba(var(--rgb-black),var(--o70))}
.tt-hint{position:absolute;inset:0;display:grid;place-items:center;color:rgba(var(--tt-orange-79-rgb),var(--o50));font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .3s}
.tt-platter.empty .tt-hint{opacity:1}
.tt-platter.empty .tt-sheen,.tt-platter.empty .tt-spindle{opacity:var(--o40)}
/* drop target while dragging */
.tt-platter::after{content:"";position:absolute;inset:-3%;border-radius:var(--r-round);border:1.5px dashed rgba(var(--tt-orange-91-rgb),var(--o50));
  opacity:0;transform:scale(.97);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s;pointer-events:none}
.deck.dragging .tt-platter::after{opacity:1;transform:scale(1)}
.deck.over .tt-platter::after{border-style:solid;border-color:var(--tt-orange-89);box-shadow:0 0 40px -6px rgba(var(--tt-orange-81-rgb),var(--o50));transform:scale(1.02)}
/* tonearm: the base, rest, cue lever and anti-skate dial stay put; the arm pivots on the gimbal and swings on when the deck starts */
.tt-armbase,.tt-arm{position:absolute;right:6.5%;top:4%;height:84%;overflow:visible}
.tt-armbase{filter:drop-shadow(0 4px 5px rgba(var(--rgb-black),var(--o50)))}
.tt-arm{transform-origin:50% 21.67%;transform:rotate(0deg);transition:transform .9s cubic-bezier(.45,0,.2,1);filter:drop-shadow(-6px 12px 7px rgba(var(--rgb-black),var(--o50)))}
/* controls */
.tt-ctrl{position:absolute;left:5.5%;bottom:5.5%;display:flex;align-items:flex-end;gap:12px}
.tt-led{position:absolute;left:0;top:-14px;width:6px;height:6px;border-radius:var(--r-round);background:var(--tt-orange-16);box-shadow:inset 0 1px 1px rgba(var(--rgb-black),var(--o70));transition:background .3s,box-shadow .3s}
.tt.on .tt-led{background:var(--tt-orange-78);box-shadow:0 0 8px 1px rgba(var(--tt-orange-78-rgb),var(--o90))}
.tt-start{height:34px;min-width:74px;padding:0 12px;border-radius:var(--r-xs);border:0;cursor:pointer;
  background:repeating-linear-gradient(90deg,rgba(var(--rgb-white),var(--o6)) 0 1px,transparent 1px 3px),linear-gradient(180deg,var(--fg),var(--tt-grey-76));
  color:var(--tt-grey-18);font:var(--fw-semibold) var(--fs-mono-sm)/var(--lh-none) var(--mono);letter-spacing:var(--ls-caps);text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o90)),0 2px 0 var(--tt-grey-40),0 3px 0 var(--tt-orange-03),0 6px 10px rgba(var(--rgb-black),var(--o50));transition:transform .1s,box-shadow .1s}
.tt-start:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o90)),0 0 0 var(--tt-grey-40),0 1px 0 var(--tt-orange-03),0 2px 4px rgba(var(--rgb-black),var(--o50))}
.tt-start:focus-visible,.tt-rpm button:focus-visible{outline:2px solid var(--tt-orange-89);outline-offset:3px}
.tt-rpm{display:flex;gap:8px}
.tt-rpm button{position:relative;height:24px;width:34px;border-radius:var(--r-xs);border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--tt-grey-91),var(--tt-grey-72));color:var(--tt-grey-18);font:var(--fw-semibold) var(--fs-mono-sm)/var(--lh-none) var(--mono);letter-spacing:var(--ls-wide);
  box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o90)),0 2px 0 var(--tt-grey-40),0 3px 0 var(--tt-orange-03),0 5px 8px rgba(var(--rgb-black),var(--o40));transition:transform .1s,box-shadow .1s}
.tt-rpm button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o90)),0 1px 0 var(--tt-orange-03)}
.tt-rpm button::before{content:"";position:absolute;left:50%;top:-11px;width:5px;height:5px;margin-left:-2.5px;border-radius:var(--r-round);background:var(--tt-orange-16);box-shadow:inset 0 1px 1px rgba(var(--rgb-black),var(--o70));transition:background .25s,box-shadow .25s}
.tt-rpm button.on::before{background:var(--tt-orange-78);box-shadow:0 0 7px 1px rgba(var(--tt-orange-78-rgb),var(--o90))}
/* pitch fader with a printed scale; a green lamp lights at 0% (quartz lock) */
.tt-pitchbox{position:absolute;right:6%;bottom:6%;height:30%;width:48px}
.tt-plab{position:absolute;top:-16px;right:0;font:var(--fw-medium) var(--tt-fs-xs)/var(--lh-none) var(--mono);letter-spacing:var(--ls-caps);text-transform:uppercase;color:rgba(var(--tt-orange-07-rgb),var(--o90));text-shadow:0 1px 0 rgba(var(--tt-orange-92-rgb),var(--o16))}
.tt-pitch{position:absolute;right:8px;top:0;bottom:0;width:7px;border-radius:var(--r-xs);background:repeating-linear-gradient(90deg,var(--bg) 0 1px,var(--cta-primary) 1px 2px);box-shadow:inset 0 1px 2px rgba(var(--rgb-black),var(--o90)),0 1px 0 rgba(var(--tt-orange-91-rgb),var(--o16));
  cursor:ns-resize;touch-action:none}
.tt-pitch::before{content:"";position:absolute;inset:-6px -16px}  /* a wider grab area than the thin rail */
.tt-pitch::after{content:"";position:absolute;right:13px;top:0;bottom:0;width:7px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(var(--tt-orange-07-rgb),var(--o70)) 0 1px,transparent 1px calc(100% / 8)),linear-gradient(rgba(var(--tt-orange-07-rgb),var(--o90)),rgba(var(--tt-orange-07-rgb),var(--o90))) 0 50%/11px 1.5px no-repeat}
.tt-pitch i{position:absolute;left:50%;top:calc(50% - 7px);width:26px;height:14px;transform:translateX(-50%);border-radius:var(--r-2xs);
  background:repeating-linear-gradient(180deg,rgba(var(--rgb-black),var(--o22)) 0 1px,transparent 1px 3px),linear-gradient(180deg,var(--fg),var(--tt-grey-72));
  box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o90)),0 3px 5px rgba(var(--rgb-black),var(--o50))}
.tt-pitch:hover i,.tt-pitch.drag i{filter:brightness(1.06)}
.tt-pitch:focus-visible{outline:2px solid var(--tt-orange-89);outline-offset:6px}
.tt-pv{position:absolute;right:30px;bottom:-16px;font-size:var(--fs-mono-sm);color:rgba(var(--tt-orange-07-rgb),var(--o90));letter-spacing:var(--ls-mono);white-space:nowrap;transition:color .2s}
.tt-pv::before{content:"";display:inline-block;width:5px;height:5px;border-radius:var(--r-round);margin-right:5px;vertical-align:1px;background:var(--tt-green-85);box-shadow:0 0 6px rgba(var(--tt-green-85-rgb),var(--o90));transition:background .2s,box-shadow .2s}
.tt-pv.moved{color:var(--tt-orange-30)}
.tt-pv.moved::before{background:var(--tt-green-22);box-shadow:none}
/* now playing */

.np{border:1px solid var(--stroke);background:var(--surface)}
.np-top{display:flex;align-items:center;justify-content:space-between}
.np-eye{font-size:var(--fs-mono);text-transform:uppercase;color:var(--text-tertiary);letter-spacing:var(--ls-mono)}
.eq{display:flex;align-items:flex-end;gap:3px;height:14px}
.eq i{width:3px;height:30%;border-radius:var(--r-2xs);background:var(--accent);opacity:var(--o30)}
.playing .eq i{opacity:1;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.4s!important}.eq i:nth-child(3){animation-delay:-.7s!important}.eq i:nth-child(4){animation-delay:-.2s!important}
@keyframes eq{0%,100%{height:25%}30%{height:100%}60%{height:50%}80%{height:80%}}
.np-txt{overflow:hidden}
.np-title{font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--fs-h3);letter-spacing:var(--ls-tight);line-height:var(--lh-tight);color:var(--text-primary)}
.np-artist{margin-top:4px;color:var(--text-secondary);font-size:var(--fs-body)}
.np-txt.swap{animation:npSwap .5s cubic-bezier(.2,.8,.2,1)}
@keyframes npSwap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.np-bar{display:flex;align-items:center;gap:10px}
.np-t,.np-d{font-size:var(--fs-mono);color:var(--text-tertiary);letter-spacing:var(--ls-mono);min-width:30px}
.np-d{text-align:right}
.np-track{flex:1;height:3px;border-radius:var(--r-xs);background:rgba(var(--rgb-white),var(--o8));overflow:hidden}
.np-track i{display:block;height:100%;width:0;background:var(--accent);border-radius:var(--r-xs)}
.np-meta{margin-top:6px;font-size:var(--fs-mono);color:var(--text-tertiary);letter-spacing:var(--ls-mono)}
.np-foot{display:flex;align-items:center}
.np-note{font-size:var(--fs-mono);color:var(--text-tertiary);letter-spacing:var(--ls-mono);text-transform:uppercase}
.np-note{display:none}.no-audio .np-note{display:inline}  /* only shown when the preview can't load */
.np-link{display:inline-block;font-size:var(--fs-mono);color:var(--text-secondary);letter-spacing:var(--ls-mono);transition:color .2s}
.np-link:hover{color:var(--text-primary)}
/* sound toggle */
.np-r{display:flex;align-items:center;gap:14px}
.snd{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--stroke);background:transparent;
  color:var(--text-tertiary);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.snd:hover{color:var(--text-primary);border-color:var(--stroke-strong)}
.snd svg{width:14px;height:14px;fill:currentColor}.snd svg .w{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;opacity:var(--o30)}
.snd[aria-pressed="true"]{color:var(--text-primary)}.snd[aria-pressed="true"] svg .w{opacity:1}
/* crate */
.crate{flex-direction:column;padding-top:14px}
.vr{grid-template-columns:77px minmax(0,1fr) auto;color:inherit;cursor:grab;touch-action:pan-y;transition:background .25s,border-color .25s}
.vr:hover,.vr:focus-visible{z-index:3;border-color:var(--stroke)}
.vr:focus-visible{outline:2px solid var(--stroke-brand);outline-offset:2px}
/* the record sits in its sleeve, peeking out of the top; on hover it slides up out of the sleeve and past the row */
.vr-art{position:relative}
.vr-sleeve{position:relative;z-index:2;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.vr-disc{position:absolute;z-index:1;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .3s,box-shadow .4s}
.vr:hover .vr-disc,.vr:focus-visible .vr-disc{box-shadow:inset 0 0 0 1px rgba(var(--rgb-white),var(--o8)),0 14px 24px -6px rgba(var(--rgb-black),var(--o90))}

.vr.on .vr-disc{opacity:0;transform:translateY(0) rotate(0)}
.vr.lifted .vr-disc{opacity:0}
.vr-title{color:var(--text-primary);text-overflow:ellipsis}
.vr-artist{display:block;margin-top:2px}
.vr-meta{font-size:var(--fs-mono);color:var(--text-tertiary);letter-spacing:var(--ls-mono)}
.vr.on .vr-meta{color:var(--accent-pale)}
.crate-tip{font-size:var(--fs-mono);color:var(--text-tertiary);letter-spacing:var(--ls-mono);padding-left:10px}
/* the record in your hand while dragging */
.ghost{position:fixed;z-index:60;left:0;top:0;pointer-events:none;will-change:transform}
.ghost-disc{position:absolute;inset:0;box-shadow:0 30px 50px -14px rgba(var(--rgb-black),var(--o90)),inset 0 0 0 1px rgba(var(--rgb-white),var(--o8))}
@media (max-width:900px){#listening .deck{gap:28px}}
@media (max-width:600px){.tt-platter{width:53%;top:44.5%;left:5%}.tt-badge{font-size:var(--tt-fs-xs)}.tt-ctrl{gap:8px;bottom:4.5%}.tt-start{height:28px;min-width:60px;font-size:var(--fs-mono-sm)}
  .tt-rpm button{height:22px;width:30px}.tt-pitchbox{height:24%;bottom:7%}.np{padding:16px 18px}}
@media (prefers-reduced-motion:reduce){.tt-arm,.tt-rec,.vr-disc,.vr-sleeve{transition:none}.playing .eq i{animation:none;height:60%}}

/* vinyl styling from the oak deck: a black platter the record almost fully covers (no aluminium rim, strobe dots or mat) */
.tt-rim{background:radial-gradient(circle,var(--paper-ink) 0 60%,var(--media) 100%);box-shadow:0 18px 30px -10px rgba(var(--rgb-black),var(--o70)),0 0 0 1px rgba(var(--rgb-black),var(--o50)),inset 0 0 0 1px rgba(var(--rgb-white),var(--o8))}
.tt-rim::before,.tt-rim::after{display:none}
.tt-mat{display:none}
.tt-rec,.tt-sheen{inset:1.6%}

/* arm sweep per screen size (read by the deck script) */
#listening .tt{--arm-in:29}
@media (max-width:600px){#listening .tt{--arm-in:36.5}}

/* ---- listening: records mounted on the wall above a bento row (turntable tile + now-spinning tile) ---- */
#listening{--cv:min(clamp(88px,13vh,140px),calc((100vw - 80px) / 5))}
#listening .lab{margin-bottom:0;flex-wrap:wrap;row-gap:10px}
#listening .shelf{--lift:44px;position:relative;margin-bottom:22px}
.crate{position:relative;z-index:1;list-style:none;display:grid;grid-template-columns:repeat(5,var(--cv));justify-content:space-between;padding:var(--lift) 0 0;gap:0}
.vr{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;width:var(--cv);padding:0;background:none;border:0;border-radius:var(--r-sm);text-align:left}
.vr:hover,.vr:focus-visible{background:none;border:0}
.vr-art{width:var(--cv);height:var(--cv)}
.vr-sleeve{width:100%;height:100%;border-radius:var(--r-xs);box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o6)),0 0 0 1px rgba(var(--rgb-black),var(--o50)),8px 14px 22px -8px rgba(var(--rgb-black),var(--o90))}
/* two black wall brackets hold each sleeve at its bottom corners */
.vr-art::before,.vr-art::after{content:"";position:absolute;z-index:3;bottom:-5px;width:12%;min-width:10px;height:9px;border-radius:var(--r-2xs) var(--r-2xs) var(--r-2xs) var(--r-2xs);pointer-events:none;
  background:linear-gradient(180deg,var(--rec-grey-18),var(--media) 60%,var(--bg));box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o16)),0 3px 5px rgba(var(--rgb-black),var(--o70))}
.vr-art::before{left:12%}.vr-art::after{right:12%}
.vr-disc{left:5%;top:5%;width:90%;height:90%;transform:translateX(12%) rotate(0deg)}
.vr:hover .vr-disc,.vr:focus-visible .vr-disc{transform:translateX(56%) rotate(140deg)}
.vr:hover .vr-sleeve,.vr:focus-visible .vr-sleeve{transform:translateX(-4px)}
.vr-txt{min-width:0;margin-top:16px}
.vr-title{font-size:var(--fs-body-sm);line-height:var(--lh-snug);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vr-artist{font-size:var(--fs-mono);color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-meta{display:none}

.vr.on .vr-sleeve{filter:brightness(.8)}
.crate-tip{padding:0}
/* bento: turntable and now spinning split 65:35 at the same height */
#listening .deck{--ttw:clamp(400px,calc((100vh - var(--cv) - 308px) * 1.25),800px);grid-template-columns:minmax(0,13fr) minmax(0,7fr);gap:24px;align-items:stretch}
.tt-stage{display:block}
#listening .tt{width:100%;max-width:none}
#listening .side{position:relative;display:flex;flex-direction:column;gap:0;min-width:0}
@media (min-width:901px){#listening .np{position:absolute;inset:0;container-type:size}}
.np{position:relative;flex:1;display:flex;flex-direction:column;padding:22px 24px;border-radius:var(--r-lg);overflow:hidden;isolation:isolate}
/* surface fill with the cover's colours glowing through; only a faint lit top edge is left of the glass */
#listening .np{background:var(--surface);border:1px solid var(--stroke);box-shadow:0 14px 40px -12px rgba(var(--rgb-black),var(--o70))}
.np::before{content:"";position:absolute;inset:-30%;z-index:-2;background:var(--np-art) center/cover;filter:blur(60px) saturate(1.8);opacity:var(--o50);pointer-events:none}
.np::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(var(--rgb-white),var(--o8))}
.np-top{margin-bottom:0}
.np-main{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin:auto 0}
.np-foot{flex-direction:column;justify-content:center;gap:6px;text-align:center;margin-top:12px}
.np-cover{width:clamp(80px,min(62cqw,100cqh - 290px),260px);aspect-ratio:1;border-radius:var(--r-xs);overflow:hidden;flex:none;
  box-shadow:0 0 0 1px rgba(var(--rgb-white),var(--o6)),0 18px 34px -12px rgba(var(--rgb-black),var(--o90))}
.np-cover img{display:block;width:100%;height:100%;object-fit:cover}
.np-bar{margin-top:0}
@media (max-width:900px){#listening .deck{grid-template-columns:1fr}#listening .tt{width:100%;max-width:560px;margin:0 auto}
  .np-main{flex-direction:row;align-items:center;text-align:left;margin:18px 0}.np-cover{width:88px}}
@media (max-width:600px){#listening .shelf{--lift:34px}.vr-disc{transform:translateX(7%)}.crate{padding:var(--lift) 0 0}.vr-txt{margin-top:12px}.vr-title{font-size:var(--fs-mono)}.vr-artist{display:none}
  .vr-art::before,.vr-art::after{min-width:7px;height:6px;bottom:-3px}}
@media (prefers-reduced-motion:reduce){.vr:hover .vr-disc{transform:translateX(12%)}}
/* the lighter glass needs the small labels a step brighter to stay readable */
#listening .np .np-eye,#listening .np .np-meta,#listening .np .np-note,#listening .np .np-t,#listening .np .np-d,#listening .np .snd{color:var(--text-secondary)}
#listening .np .snd[aria-pressed="true"]{color:var(--text-primary)}
/* on the cover-coloured card every label is text-primary, and the seek bar and level meter take a light colour
   picked from the cover (--np-tint, set per track) instead of brand blue */
#listening .np .np-eye,#listening .np .np-title,#listening .np .np-artist,#listening .np .np-meta,#listening .np .np-note,
#listening .np .np-t,#listening .np .np-d,#listening .np .np-link,#listening .np .snd{color:var(--text-primary)}
#listening .np .snd{border-color:rgba(var(--rgb-white),var(--o22))}
#listening .np .np-track{background:rgba(var(--rgb-white),var(--o22))}
#listening .np .np-track i,#listening .np .eq i{background:var(--np-tint,var(--text-primary))}

/* tilt on hover (fine pointers only): JS springs --tilt-x/-y (angle), --tilt-s (scale) and --tilt-l (lift) every
   frame, and sets .tilt while it runs so CSS transitions don't smear the frames */
@media (hover:hover) and (pointer:fine){
  /* !important so it also beats the artifact bundle's no-motion override for revealed blocks */
  .pc.rv.in,.pc.rv.in:hover,.portrait.rv.in{transform:perspective(800px) translateY(var(--tilt-l,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--tilt-s,1))!important}
  .tool,.tool:hover{transform:perspective(500px) translateY(var(--tilt-l,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--tilt-s,1))}
  #listening .np{transform:perspective(800px) translateY(var(--tilt-l,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--tilt-s,1))}
  .tk-c{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) perspective(800px) translateY(var(--tilt-l,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--tilt-s,1))}
  .tilt{transition-property:border-color,box-shadow,background-color,color!important}
}

/* journey: Freshworks award pill and a white logo tile */
.jr-award{display:inline-flex;align-items:center;vertical-align:middle;color:var(--gold);font-family:var(--mono);font-size:var(--fs-mono);font-weight:var(--fw-regular);line-height:var(--lh-none);white-space:nowrap}
.jr-award svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.jr-award svg .st{fill:currentColor;stroke:none}
@media (max-width:600px){.jr-award{font-size:var(--fs-mono-sm)}}
.co-fw{background:var(--white)}
.co-fw svg{width:36px;height:36px}
@media (max-width:600px){.co-fw svg{width:30px;height:30px}}
/* bling: a metallic gold rim, gold-foil text, a soft glow and a glint that sweeps across every few seconds */
.jr-award{position:relative;isolation:isolate}
.jr-award .t{-webkit-background-clip:text}

.jr-award::after{content:"";position:absolute;z-index:1;top:-2px;bottom:-2px;left:-40%;width:28%;pointer-events:none;transform:skewX(-20deg) translateX(0);background:linear-gradient(90deg,transparent,rgba(var(--rgb-gold-pale),var(--o50)),transparent);animation:awGlint 4.2s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@keyframes awGlint{0%{transform:skewX(-20deg) translateX(0)}28%,100%{transform:skewX(-20deg) translateX(620%)}}
@media (prefers-reduced-motion:reduce){.jr-award::after{animation:none;display:none}}
/* plain text instead of a pill: no rim or fill, just the glowing medal and gold-foil text with a shimmer running through it */
.jr-award{padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;gap:6px}
.jr-award::after{display:none}
.jr-award .t{background:linear-gradient(100deg,var(--gold) 0%,var(--gold-light) 30%,var(--gold-pale) 45%,var(--gold-light) 60%,var(--gold) 100%);background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:awShine 4.2s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@keyframes awShine{0%{background-position:100% 0}35%,100%{background-position:0 0}}
.jr-award svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.jr-award .t{animation:none;background-position:50% 0}}
@media (hover:hover) and (pointer:fine){.jr-award{transform:perspective(500px) translateY(var(--tilt-l,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--tilt-s,1))}}

/* toolkit pills: hover border is stroke-strong, no glow (too small for the brand glow to read); it follows the tilt
   (.tilt-hot while the pointer is on it), not :hover, so it holds right up to the edges */
.tool:hover{border-color:var(--stroke-strong);box-shadow:none}
.tool.tilt-hot{border-color:var(--stroke-strong);box-shadow:none}

/* journey rows: tight company-name line, 8px name→role, 3px role→dates */
.jr-co b{line-height:var(--lh-tight)}
.jr-co{margin-bottom:5px}

/* the playing record on the wall: title in its cover's tint, with the level meter beside it (moved off the card) */
.vr.on .vr-title{color:var(--tint,var(--text-brand))}
.vr-eq{display:none;height:10px;margin-left:7px;vertical-align:baseline;gap:2px}
.vr.on .vr-eq{display:inline-flex}
.vr-eq i{width:2px;background:var(--tint,var(--text-primary))}
/* the hint in the heading row is plain text: no hover (it was catching the header-link hover) */
.lab .crate-tip:hover{color:var(--text-tertiary)}
/* journey: award marker 12px from the company name (row gap 10px + 2px) */
.jr-award{margin-left:2px}
@media (max-width:600px){.jr-award{margin-left:0}}
/* award: one glow for the whole tag (medal and text), and the shine sweep lights the medal as it starts */

.jr-award svg{filter:none;animation:awMedal 4.2s cubic-bezier(.4,0,.2,1) 1.2s infinite}

@media (prefers-reduced-motion:reduce){.jr-award svg{animation:none}}

/* toolkit pills: no tilt, just the slight bump on hover */
@media (hover:hover) and (pointer:fine){.tool{transform:none}.tool:hover{transform:translateY(-2px)}}
.tool{transition:border-color .25s,transform .35s cubic-bezier(.22,1,.36,1)}

/* desktop: a wider, lower plinth (1.6:1) so the section fits one screen at full width; the record and arm are
   sized by the plinth's height (same geometry and arm sweep as before); the pitch fader stays at the right edge */
@media (min-width:901px){
  #listening .tt{aspect-ratio:1.6;container-type:size}
  #listening .tt-platter{width:71.25cqh;left:7.5cqh}
  #listening .tt-armbase,#listening .tt-arm{right:auto;left:88.9cqh}
}

/* desktop: 33/45 stacked beside the pitch fader (the speed group); Start/Stop alone at bottom left, 24px under the
   record, with its light beside it */
#listening .tt-rpm{position:absolute;right:calc(6% + 48px + 20px)}

#listening .tt-ctrl{align-items:center;gap:10px}
#listening .tt-led{position:static;flex:none}
@media (min-width:901px){#listening .tt-ctrl{bottom:max(8px,calc(16.875cqh - 58px))}}
@media (max-width:600px){#listening .tt-rpm{right:calc(6% + 48px + 14px);gap:8px}}

/* the tonearm can be picked up: the tube and headshell take the pointer, the rest of its box doesn't */
#listening .tt-arm{pointer-events:none;touch-action:none}
#listening .tt-arm path,#listening .tt-arm g,#listening .tt-arm circle,#listening .tt-arm rect{pointer-events:visiblePainted;cursor:grab}
#listening .tt-arm.lifted{filter:drop-shadow(-12px 22px 10px rgba(var(--rgb-black),var(--o50)))}
/* the arm's path spans the whole grooved area: outer edge (start of the preview) to just outside the label (end) */
#listening .tt{--arm-out:44}
@media (max-width:600px){#listening .tt{--arm-out:50}}
/* speed keys side by side (33 left of 45), lights above them, bottom level with the pitch fader */
#listening .tt-rpm{flex-direction:row;gap:8px}
#listening .tt-rpm button::before{left:50%;top:-11px;margin:0 0 0 -2.5px}
/* pitch readout (light + value) centred right under the fader's rail */
#listening .tt-pv{right:11.5px;bottom:-22px;transform:translateX(50%)}
/* the fader sits 16px higher so the readout has room under it */
#listening .tt-pitchbox{bottom:calc(6% + 16px)}
@media (max-width:600px){#listening .tt-pitchbox{bottom:calc(7% + 16px)}}
/* 33/45 share the STOP key's bottom line (STOP sits on the same inset at every size) */
#listening .tt-rpm{bottom:5.5%}
@media (min-width:901px){#listening .tt-rpm{bottom:max(8px,calc(16.875cqh - 58px))}}
@media (max-width:600px){#listening .tt-rpm{bottom:4.5%}}

/* ---- project covers: live, animated product screens (1600x1100 stage scaled to the card) ---- */
.pc-img{position:relative}
.cv{--cv-fs-sm:14px;--cv-fs-md:16px;--cv-fs-lg:19px;--cv-fs-xl:22px;--cv-fs-h1:34px;position:absolute;inset:0;overflow:hidden;display:block;background:var(--bg);color:var(--paper-board-hi);font-family:var(--body);letter-spacing:var(--ls-snug);line-height:var(--lh-snug);text-align:left;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.pc:hover .cv{transform:scale(1.035)}
.cv span,.cv b,.cv small,.cv i,.cv em,.cv s,.cv strong{display:block;font-style:normal}
.cv-st{position:absolute;left:0;top:0;width:1600px;height:1100px;transform-origin:0 0;transform:scale(var(--cvs,.4));transition:opacity .6s}
.cv-qa .cv-st{background:radial-gradient(900px 600px at 15% 0%,rgba(var(--rgb-accent-deep),var(--o30)),transparent 70%),radial-gradient(800px 700px at 100% 100%,rgba(var(--rgb-white),var(--o6)),transparent 70%),var(--bg)}
.cv-qc .cv-st{background:radial-gradient(900px 650px at 100% 0%,rgba(var(--rgb-accent-deep),var(--o30)),transparent 70%),radial-gradient(900px 700px at 0% 100%,rgba(var(--rgb-white),var(--o6)),transparent 70%),var(--bg)}
.cv-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(var(--rgb-white),var(--o8)) 1.2px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,var(--black) 20%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,var(--black) 20%,transparent 80%)}
.cv-win{position:absolute;background:var(--cta-primary);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--rgb-white),var(--o8)),0 40px 90px -20px rgba(var(--rgb-black),var(--o90))}
.cv .cv-tb{display:flex;align-items:center;gap:9px;height:52px;padding:0 22px;border-bottom:1px solid var(--cv-grey-14)}
.cv-tb i{width:12px;height:12px;border-radius:var(--r-round);background:var(--cv-grey-19)}
.cv-tb em{margin-left:14px;font-size:var(--cv-fs-md);color:var(--cv-grey-50);font-weight:var(--fw-medium)}
/* quick automations */
.cv-qa .cv-main{left:110px;top:200px;width:1000px}
.cv .cv-hd{display:flex;justify-content:space-between;align-items:flex-end;padding:34px 40px 22px}
.cv-h1{font-size:var(--cv-fs-h1);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tighter);color:var(--paper-board-hi)}
.cv-hd small{font-size:var(--cv-fs-md);color:var(--cv-grey-57);margin-top:6px}
.cv-btn{background:var(--cv-blue-41);color:var(--white);font-size:var(--cv-fs-md);font-weight:var(--fw-semibold);padding:12px 20px;border-radius:var(--r-md)}
.cv .cv-tabs{display:flex;gap:26px;padding:0 40px;border-bottom:1px solid var(--cv-grey-14);font-size:var(--cv-fs-md);color:var(--cv-grey-57)}
.cv-tabs b{color:var(--paper-board-hi);font-weight:var(--fw-semibold);padding-bottom:14px;border-bottom:2px solid var(--cv-blue-41)}.cv-tabs em{padding-bottom:14px}
.cv .cv-row{display:flex;align-items:center;gap:20px;padding:22px 40px;border-bottom:1px solid var(--paper-ink)}
.cv-row:last-child{border-bottom:0}
.cv .cv-ic{width:52px;height:52px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none}.cv-ic svg{width:24px;height:24px}
.cv-t{flex:1;min-width:0}.cv-t b{font-size:var(--cv-fs-lg);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);color:var(--paper-board-hi)}.cv-t small{font-size:var(--cv-fs-md);color:var(--cv-grey-57);margin-top:3px}
.cv .cv-ch{display:flex;gap:6px;margin-right:18px}
.cv .cv-ch i{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center}.cv-ch svg{width:16px;height:16px}
.cv-sw{position:relative;flex:none;width:50px;height:30px;border-radius:var(--r-pill);background:var(--cv-blue-41);transition:background .35s}
.cv-sw::after{content:"";position:absolute;top:3px;left:23px;width:24px;height:24px;border-radius:var(--r-round);background:var(--white);box-shadow:0 1px 3px rgba(var(--rgb-black),var(--o30));transition:left .4s cubic-bezier(.3,.7,.3,1.25)}
.cv-sw.off{background:var(--cv-grey-19)}.cv-sw.off::after{left:3px}
.cv-qa .cv-chat{left:1080px;top:480px;width:440px}
.cv .cv-chh{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--cv-grey-14)}
.cv .cv-wa{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-xs);background:var(--cv-green-75);margin-right:6px;vertical-align:-4px}.cv-wa svg{width:12px;height:12px}
.cv-av{width:38px;height:38px;border-radius:var(--r-round);background:linear-gradient(135deg,var(--cv-red-79),var(--cv-blue-41));flex:none}
.cv-chh b{font-size:var(--cv-fs-md);font-weight:var(--fw-semibold);color:var(--paper-board-hi)}.cv-chh small{font-size:var(--cv-fs-sm);color:var(--cv-green-78);margin-top:2px}
.cv .cv-msgs{display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--media)}
.cv-m{max-width:82%;padding:14px 16px;border-radius:var(--r-lg);font-size:var(--cv-fs-md);line-height:var(--lh-normal)}
.cv-m.c{align-self:flex-start;background:var(--paper-ink);border:1px solid var(--cv-grey-19);border-bottom-left-radius:var(--r-sm);color:var(--cv-grey-91)}
.cv-m.a{align-self:flex-end;background:var(--cv-blue-41);color:var(--white);border-bottom-right-radius:var(--r-sm)}
.cv-sys{align-self:center;font-size:var(--cv-fs-sm);font-weight:var(--fw-semibold);color:var(--accent-pale);background:rgba(var(--cv-blue-41-rgb),var(--o16));padding:7px 12px;border-radius:var(--r-pill)}
.cv .cv-timer{position:absolute;left:930px;top:150px;display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:var(--r-lg);background:var(--paper-board-hi);color:var(--bg);
  font-size:var(--cv-fs-md);font-weight:var(--fw-semibold);box-shadow:0 20px 40px -12px rgba(var(--rgb-black),var(--o50))}
.cv-timer i{width:10px;height:10px;border-radius:var(--r-round);background:var(--cv-green-78);box-shadow:0 0 0 5px rgba(var(--cv-green-78-rgb),var(--o22))}
/* quality coach */
.cv-qc .cv-main{left:90px;top:230px;width:1060px}
.cv .cv-conv{display:flex;flex-direction:column;gap:16px;padding:30px 40px;background:var(--media);border-bottom:1px solid var(--cv-grey-14)}
.cv-who{font-size:var(--cv-fs-sm);color:var(--cv-grey-50);margin-bottom:6px;font-weight:var(--fw-medium)}
.cv-qc .cv-m{max-width:70%;font-size:var(--cv-fs-md);line-height:var(--lh-normal);padding:16px 18px}
.cv-qc .cv-m.a{background:var(--cv-grey-14);color:var(--cv-grey-82)}
.cv-comp{padding:28px 40px}
.cv-box{max-width:780px;border:1.5px solid var(--cv-blue-41);border-radius:var(--r-lg);padding:22px 24px;background:var(--cta-primary);box-shadow:0 0 0 5px rgba(var(--cv-blue-41-rgb),var(--o12))}
.cv .cv-txt{display:block;font-size:var(--cv-fs-xl);line-height:var(--lh-loose);color:var(--paper-board);letter-spacing:var(--ls-tight);min-height:75px}
.cv .cv-txt span{display:inline}
.cv .cv-g{text-decoration:underline wavy var(--accent-soft);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .4s}
.cv .cv-tn{background:rgba(var(--cv-amber-71-rgb),var(--o16));border-bottom:2.5px solid var(--cv-amber-71);border-radius:var(--r-xs);padding:0 2px;transition:background .4s,border-color .4s}
.cv .cv-tn .new{display:none;color:var(--cv-green-79)}
.cv .cv-bar{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--cv-grey-14)}
.cv-pill{font-size:var(--cv-fs-sm);font-weight:var(--fw-semibold);padding:7px 12px;border-radius:var(--r-pill);transition:opacity .35s,transform .35s cubic-bezier(.3,.7,.3,1.3)}
.cv-pill.sp{background:rgba(var(--cv-red-55-rgb),var(--o16));color:var(--cv-red-76)}.cv-pill.tone{background:rgba(var(--cv-amber-71-rgb),var(--o16));color:var(--cv-amber-82)}.cv-pill.qc{background:rgba(var(--rgb-white),var(--o6));color:var(--cv-grey-91)}
.cv-send{margin-left:auto;background:var(--paper-board-hi);color:var(--bg);font-weight:var(--fw-semibold);font-size:var(--cv-fs-md);padding:12px 22px;border-radius:var(--r-md)}
.cv-qc .cv-pop{left:1060px;top:520px;width:460px;padding:24px;border-radius:var(--r-xl)}
.cv .cv-k{display:flex;align-items:center;gap:10px;font-size:var(--cv-fs-sm);font-weight:var(--fw-semibold);color:var(--accent-pale);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.cv .cv-k i{width:28px;height:28px;border-radius:var(--r-sm);background:var(--cv-blue-41);display:grid;place-items:center;color:var(--white);font-size:var(--cv-fs-md)}
.cv-h3{font-size:var(--cv-fs-xl);font-weight:var(--fw-semibold);margin:16px 0 8px;letter-spacing:var(--ls-tight);color:var(--paper-board-hi)}
.cv-pop small{font-size:var(--cv-fs-md);color:var(--cv-grey-57);line-height:var(--lh-normal)}
.cv-diff{margin:18px 0;padding:16px;border-radius:var(--r-lg);background:var(--paper-ink);font-size:var(--cv-fs-md);line-height:var(--lh-relaxed)}
.cv-diff s{color:var(--cv-red-67);text-decoration:line-through;text-decoration-thickness:2px}
.cv-diff b{color:var(--cv-green-79);font-weight:var(--fw-semibold);background:rgba(var(--cv-green-79-rgb),var(--o12));padding:1px 4px;border-radius:var(--r-xs);margin-top:4px}
.cv .cv-acts{display:flex;gap:10px}
.cv-acts span{flex:1;text-align:center;padding:13px;border-radius:var(--r-md);font-weight:var(--fw-semibold);font-size:var(--cv-fs-md);background:var(--cv-grey-14);color:var(--cv-grey-82);transition:transform .15s,filter .15s}
.cv-acts .cv-apply{background:var(--cv-blue-41);color:var(--white)}
.cv .cv-score{position:absolute;left:1010px;top:120px;display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:var(--r-xl);background:var(--cta-primary);
  box-shadow:0 0 0 1px rgba(var(--rgb-white),var(--o8)),0 30px 60px -20px rgba(var(--rgb-black),var(--o90))}
.cv .cv-ring{--p:82;width:66px;height:66px;border-radius:var(--r-round);display:grid;place-items:center;background:conic-gradient(var(--cv-green-79) 0 calc(var(--p) * 1%),var(--cv-grey-19) 0)}
.cv-ring b{width:52px;height:52px;border-radius:var(--r-round);background:var(--cta-primary);display:grid;place-items:center;font-size:var(--cv-fs-lg);font-weight:var(--fw-semibold);color:var(--paper-board-hi)}
.cv-score small{font-size:var(--cv-fs-sm);color:var(--cv-grey-50)}.cv-score strong{font-size:var(--cv-fs-lg);font-weight:var(--fw-semibold);color:var(--paper-board-hi);margin-top:2px}

/* the loop (only when JS runs it: .anim). Without it the cover shows its finished frame. */
.cv.rs *,.cv.rs .cv-st{transition:none!important}
.cv.out .cv-st{opacity:0}
.cv.anim .cv-row,.cv.anim .cv-chat,.cv.anim .cv-msgs>*,.cv.anim .cv-timer,.cv.anim .cv-score,.cv.anim .cv-pop,.cv.anim .cv-pill{
  transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.cv-qa.anim:not(.s1) .cv-row{opacity:0;transform:translateY(14px)}
.cv-qa.anim .cv-row{transition-delay:calc(var(--i) * 90ms)}
.cv-qa.anim:not(.s2) .cv-sw.go{background:var(--cv-grey-19)}.cv-qa.anim:not(.s2) .cv-sw.go::after{left:3px}
.cv-qa.anim.s2:not(.s3) .cv-row:first-of-type{background:rgba(var(--cv-blue-41-rgb),var(--o6))}
.cv-qa.anim .cv-row:first-of-type{transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1),background .6s}
.cv-qa.anim:not(.s3) .cv-chat{opacity:0;transform:translateX(40px)}
.cv-qa.anim:not(.s3) .cv-m.c{opacity:0;transform:translateY(8px) scale(.97)}
.cv-qa.anim .cv-m.c{transition-delay:.35s}
.cv-qa.anim:not(.s4) .cv-sys{opacity:0;transform:scale(.9)}
.cv-qa.anim:not(.s5) .cv-m.a{opacity:0;transform:translateY(10px) scale(.97)}
.cv-qa.anim:not(.s6) .cv-timer{opacity:0;transform:translateY(8px) scale(.85)}
.cv-qc.anim:not(.s1) .cv-w{opacity:0}
.cv-qc.anim.s1 .cv-w{transition:opacity .05s;transition-delay:calc(var(--i) * 65ms)}
.cv-qc.anim:not(.s2) .cv-g{text-decoration-color:transparent}
.cv-qc.anim:not(.s2) .cv-tn{background:transparent;border-color:transparent}
.cv-qc.anim:not(.s2) .cv-pill{opacity:0;transform:scale(.8)}
.cv-qc.anim .cv-pill:nth-child(2){transition-delay:.1s}.cv-qc.anim .cv-pill:nth-child(3){transition-delay:.2s}
.cv-qc.anim:not(.s3) .cv-score{opacity:0;transform:translateY(-10px) scale(.92)}
.cv-qc.anim:not(.s4) .cv-pop{opacity:0;transform:translateX(40px)}
.cv-qc.s5:not(.s6) .cv-apply{transform:scale(.95);filter:brightness(1.25)}
.cv-qc.s6 .cv-tn .old{display:none}.cv-qc.s6 .cv-tn .new{display:inline}
.cv-qc.s6 .cv-tn{background:rgba(var(--cv-green-79-rgb),var(--o12));border-color:var(--cv-green-79)}
.cv-qc.s6 .cv-pill.tone{opacity:0;transform:scale(.8)}
.cv-qc.s6 .cv-pop{opacity:0;transform:translateY(12px)}

/* ---- case study lightbox: product screenshots, full size, browsable ---- */
.cs .x-shot img,.cs .wl-img img,.cs [data-zoom]{cursor:zoom-in}
.clb{position:fixed;inset:0;z-index:400;display:grid;grid-template-rows:auto 1fr auto;padding:16px 24px 24px;
  background:rgba(var(--rgb-bg),var(--o90));-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.22,1,.36,1),visibility 0s .3s}
.clb.on{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.22,1,.36,1)}
.clb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:48px}
.clb-n{font:var(--fw-regular) var(--fs-mono)/var(--lh-none) var(--mono);letter-spacing:var(--ls-wide);color:var(--text-tertiary)}
.clb-n b{font-weight:inherit;color:var(--text-primary)}
.clb-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 64px;touch-action:pan-y}
.clb-img{max-width:min(100%,1600px);max-height:calc(100vh - 152px);max-height:calc(100dvh - 152px);width:auto;height:auto;border-radius:var(--r-md);display:block;
  box-shadow:0 0 0 1px var(--stroke-strong),0 32px 64px -24px rgba(var(--rgb-black),var(--o90));
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s;user-select:none;-webkit-user-drag:none}
.clb-img.swap{opacity:0;transform:scale(.98)}
.clb-cap{min-height:24px;margin-top:16px;text-align:center;font-size:var(--fs-body-sm);color:var(--text-secondary)}
.clb button{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-lg);border:1px solid var(--stroke-strong);cursor:pointer;
  background:rgba(var(--rgb-bg),var(--o50));color:var(--text-primary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .2s,transform .2s}
.clb button:hover{background:var(--surface-raised)}
.clb button:active{transform:scale(.96)}
.clb button:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.clb button svg{width:20px;height:20px}
.clb-prev,.clb-next{position:absolute;top:50%;margin-top:-22px;z-index:1}
.clb-prev{left:0}.clb-next{right:0}
.clb.one .clb-prev,.clb.one .clb-next{display:none}

.clb:focus{outline:none}
@media (max-width:600px){.clb{padding:8px 16px 16px}.clb-stage{padding:0}.clb .clb-prev,.clb .clb-next{display:none}.clb-img{border-radius:var(--r-sm);max-height:calc(100dvh - 136px)}}
@media (prefers-reduced-motion:reduce){.clb,.clb.on,.clb-img{transition:none}}

/* Now spinning: surface fill at 30% over the blurred cover, so the colour glow is quieter */
.np::after{background:linear-gradient(180deg,rgba(var(--rgb-white),var(--o4)),rgba(var(--rgb-white),var(--o2))),rgba(var(--rgb-bg),var(--o30))}

/* award tag: no glow (it blurred the text), back to all caps */
.jr-award{text-transform:uppercase;letter-spacing:var(--ls-wide)}

/* award tag: glow back; gold end to end at rest, the bright band only passes through during the shine */
.jr-award{filter:drop-shadow(0 0 5px rgba(var(--rgb-gold),var(--o50)))}
.jr-award .t{background-image:linear-gradient(100deg,var(--gold) 0%,var(--gold) 30%,var(--gold-light) 42%,var(--gold-pale) 50%,var(--gold-light) 58%,var(--gold) 70%,var(--gold) 100%);background-size:300% 100%}

/* About: the whole body copy in secondary text, highlights and bold included */
#about .about p,#about .about p b,#about .about p .hl{color:var(--text-secondary)}

/* award medal: same gold as the text (it used to be a paler gold), and a gentler flash so it never washes out */
.jr-award svg{color:var(--gold)}
.jr-award svg circle{fill:rgba(var(--rgb-gold),var(--o22))}
@keyframes awMedal{0%,100%{filter:brightness(1)}6%{filter:brightness(1.25)}18%{filter:brightness(1)}}

/* project cards: a quiet sub-category line above the title instead of metrics */
.pc-sub{display:block;font-family:var(--mono);font-size:var(--fs-body-sm);letter-spacing:0;color:var(--text-secondary);line-height:var(--lh-normal)}
.pc-sub + h3{margin-top:0}
.pc p .pc-met{font-weight:var(--fw-regular);color:var(--text-primary)}

/* lightbox close: a text button, "Esc to close" (just "Close" on touch screens) */
.clb .clb-x{width:auto;height:36px;padding:0 14px;border-radius:var(--r-md);font:var(--fw-medium) var(--fs-mono)/var(--lh-none) var(--mono);letter-spacing:var(--ls-wide);color:var(--text-secondary)}
.clb .clb-x:hover{color:var(--text-primary)}
.clb-x .t{display:none}
@media (hover:none),(max-width:600px){.clb-x .k{display:none}.clb-x .t{display:inline}}

/* toolkit logo: odometer tick instead of a spin */
.tool .tl-ic{position:relative;perspective:none;overflow:hidden;border-radius:var(--r-sm)}
.tool .tl-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(var(--rgb-white),var(--o8));pointer-events:none}
.tool .tl-ic img{will-change:auto;box-shadow:none}
.tl-roll{display:flex;flex-direction:column;gap:4px;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.tool:hover .tl-roll,.tool:focus-visible .tl-roll{transform:translateY(-32px)}
@media (prefers-reduced-motion:reduce){.tl-roll{transition:none}.tool:hover .tl-roll,.tool:focus-visible .tl-roll{transform:none}}

/* ---- About: light paper sticker board (same 4:5 frame as the old photo) ---- */
.portrait.cl{container-type:inline-size;overflow:hidden;border-radius:var(--r-xl);background-color:var(--paper-board);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 10%,var(--paper-board-hi),var(--paper-board-lo))}
.portrait.cl img.cl-me{position:absolute;inset:auto;left:50%;bottom:-3%;top:auto;width:auto;object-fit:contain;z-index:2;transform:translateX(-50%) rotate(-1.5deg);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cl:hover img.cl-me{transform:translateX(-50%) rotate(0deg) scale(1.015)}
.cl-s{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:3;transform:rotate(var(--r));
  animation:clFloat 5.5s ease-in-out var(--d) infinite;transition:scale .35s cubic-bezier(.3,.7,.3,1.4),rotate .35s cubic-bezier(.3,.7,.3,1.4)}
.cl-s:hover{scale:1.12;rotate:calc(var(--r) * -.6);z-index:6}
@keyframes clFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
.portrait.cl .cl-s img{position:static;inset:auto;display:block;width:100%;height:auto;object-fit:contain}
/* die-cut stickers already carry their white edge; add the paper shadow */
.cl-cut img{filter:drop-shadow(0 8px 10px rgba(var(--rgb-paper-shadow),var(--o30)))}

.portrait.cl img.cl-paper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portrait.cl img.cl-me{height:82%;filter:drop-shadow(0 14px 20px rgba(var(--rgb-paper-shadow),var(--o22)))}

/* film still as a polaroid */

@media (prefers-reduced-motion:reduce){.cl-s{animation:none}}

/* case-study key insight: a pull quote. Eyebrow on top, the line in display type, a brand bar on the left,
   a soft brand wash and an oversized closing mark behind */
.csx .x-pull{position:relative;isolation:isolate;overflow:hidden;margin:48px 0;padding:30px 36px 34px 40px;border-radius:var(--r-xl);border:1px solid var(--stroke);
  background:linear-gradient(100deg,rgba(var(--rgb-accent),var(--o8)),transparent 60%),var(--surface);transition:border-color .4s}
.csx .x-pull::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:3px;border-radius:0 var(--r-pill) var(--r-pill) 0;background:linear-gradient(180deg,var(--accent-soft),var(--accent-deep))}
.csx .x-pull::after{content:"\201D";position:absolute;z-index:-1;right:26px;top:8px;font-family:var(--display);font-weight:var(--fw-semibold);font-size:200px;line-height:var(--lh-none);color:rgba(var(--rgb-accent),var(--o12));pointer-events:none}
.csx .x-pull:hover{border-color:var(--stroke-brand)}
.csx .x-pull figcaption{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-secondary)}
.csx .x-pull figcaption .i-star{width:12px;height:12px;fill:var(--text-brand)}
.csx .x-pull figcaption span{color:var(--text-tertiary)}
.csx .x-pull figcaption span::before{content:"·";margin-right:8px}
.csx .x-pull blockquote{margin:0;padding:0;border:0;max-width:none;font-family:var(--display);font-weight:var(--fw-semibold);font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);color:var(--text-primary);text-wrap:pretty}
.csx .x-pull blockquote em{font-style:normal;color:var(--text-brand)}
@media (max-width:600px){.csx .x-pull{padding:24px 22px 26px 26px}.csx .x-pull::before{top:22px;bottom:22px}.csx .x-pull::after{font-size:150px;right:12px;top:6px}}

/* About board: stickers that play a sound */
.cl-s[data-snd]{cursor:pointer}
.cl-s[data-snd]:focus-visible{outline:2px solid var(--accent-soft);outline-offset:4px;border-radius:var(--r-sm)}
.cl-s.snd-on{animation:clPlay .9s ease-in-out infinite;z-index:6}

@keyframes clPlay{0%,100%{translate:0 0;scale:1.06}50%{translate:0 -4px;scale:1.1}}
@keyframes clPing{to{box-shadow:0 0 0 12px color-mix(in srgb,var(--snd-c,var(--accent)) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.cl-s.snd-on{animation:none;scale:1.06}.cl-dot{animation:none}}

/* now-playing dot: on the playing sticker's top-right corner, in that sticker's colour */
.cl-dot{position:absolute;z-index:7;pointer-events:none;opacity:0;scale:.4;transition:opacity .25s,scale .35s cubic-bezier(.3,.7,.3,1.4);width:22px;height:22px;border-radius:var(--r-round);
  background:var(--snd-c,var(--accent)) radial-gradient(circle,var(--white) 0 3px,transparent 3.5px);box-shadow:0 0 0 0 color-mix(in srgb,var(--snd-c,var(--accent)) 50%,transparent);animation:clPing 1.2s ease-out infinite}
.cl-dot.on{opacity:1;scale:1}
.cl-tag{position:absolute;z-index:7;pointer-events:none;opacity:0;translate:0 4px;transition:opacity .25s,translate .35s cubic-bezier(.3,.7,.3,1.4);max-width:calc(100% - 32px);padding:5px 9px;border-radius:var(--r-pill);background:rgba(var(--rgb-black),var(--o70));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);font-family:var(--mono);font-size:var(--fs-mono-sm);letter-spacing:var(--ls-mono);text-transform:uppercase;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-tag.on{opacity:1;translate:0 0}

/* About: hovering the sticker board shows a mono caption above it, in the heading row */
.cl-wrap{position:relative;display:flex;flex-direction:column}
/* touch screens (and narrow ones): no hover, so the caption is always there, above the board, its arrow pointing down at it */
/* 12px mono like the site's other labels; the arrow follows the last word and drops down, tip 4px off the board */
.cl-cap{order:-1;position:relative;display:block;margin:0 0 1px;padding:0;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);line-height:var(--lh-relaxed);color:var(--text-secondary)}
.cl-end{white-space:nowrap}
/* stacked under the bio: pull the caption up so it sits 32px below the last paragraph (18px margin + 48px column gap otherwise) */
@media (max-width:900px){.cl-cap{margin-top:-35px}}
.cl-cap svg{display:inline-block;vertical-align:top;width:31px;height:28px;margin:4px 0 0 6px;color:var(--text-secondary)}
@media (hover:hover) and (min-width:901px){
  /* slides in from the right, just above the board's top-right corner; a hand-drawn loop arrow curls down, its tip 4px off the board */
  .cl-cap{display:flex;align-items:flex-start;justify-content:flex-start;gap:6px;position:absolute;right:4px;bottom:calc(100% + 3px);z-index:8;margin:0;padding:0;pointer-events:none;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);line-height:var(--lh-relaxed);color:var(--text-secondary);white-space:nowrap;opacity:0;translate:24px 0;transition:opacity .3s,translate .5s cubic-bezier(.22,1,.36,1)}
  .cl-cap span{padding:2px 0 0}
  .cl-cap svg{display:block;width:44px;height:40px;margin:0;flex:none;color:var(--text-secondary)}
  .cl-cap .cl-end{white-space:normal;word-spacing:normal}
  .cl-cap path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease .15s}
  .cl-cap path + path{transition-delay:.6s;transition-duration:.2s}
  .portrait.cl:hover + .cl-cap,.portrait.cl:focus-within + .cl-cap{opacity:1;translate:0 0}
  .portrait.cl:hover + .cl-cap path,.portrait.cl:focus-within + .cl-cap path{stroke-dashoffset:0}
}
/* wide screens have room beside the board: the caption sits to its right, one word per line, its arrow curling left into the board */
@media (hover:hover) and (min-width:1440px){
  .cl-cap{flex-direction:column;align-items:flex-start;gap:4px;white-space:normal;left:calc(100% + 25px);right:auto;bottom:auto;top:28px;width:max-content}
  .cl-cap span{width:min-content;word-spacing:100vw}
  .cl-cap svg{rotate:90deg;margin:4px 0 0 -18px}
}
@media (hover:hover) and (min-width:901px) and (prefers-reduced-motion:reduce){.cl-cap{translate:0 0;transition:opacity .3s}.cl-cap path{transition:none;stroke-dashoffset:0}}
/* touch screens: one staggered wiggle the first time the board comes into view */
@keyframes clWiggle{0%,100%{rotate:0deg}25%{rotate:-6deg}55%{rotate:5deg}80%{rotate:-2deg}}
.cl-wiggle .cl-s[data-snd] img{animation:clWiggle .6s ease-in-out calc(var(--wi,0) * 90ms) both}