/* Red Banana v2 design system. One type and colour system for every page.
   Loaded after any older page bundle, so its tokens and shell rules win.
   Ground #080808, ink #e1e5e5, one signal red #e2422e (the mark's tiles). Bricolage Grotesque display, Instrument Sans text, IBM Plex Mono labels.
   Motif: the square tile from the mark, used as a bullet, a rule end and a focus cue. */

@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/v3/bricolage-grotesque-var.woff2)format("woff2-variations"),url(../fonts/v3/bricolage-grotesque-var.woff2)format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+2018-2019,U+201C-201D,U+2026,U+2122,U+2192}
@font-face{font-family:"Bricolage Grotesque Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Helvetica");ascent-override:93%;descent-override:27%;line-gap-override:0%;size-adjust:96%}
@font-face{font-family:"Instrument Sans";src:url(../fonts/v3/instrument-sans-var.woff2)format("woff2-variations"),url(../fonts/v3/instrument-sans-var.woff2)format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+2018-2019,U+201C-201D,U+2026,U+2122,U+2192}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Helvetica");ascent-override:97%;descent-override:25%;line-gap-override:0%;size-adjust:102%}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/v3/ibm-plex-mono-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A9,U+00B7,U+2018-2019,U+201C-201D,U+2026,U+2122,U+2192}
@font-face{font-family:"IBM Plex Mono Fallback";src:local("Courier New"),local("Liberation Mono"),local("DejaVu Sans Mono"),local("Courier");ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%;size-adjust:100%}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/v3/bodoni-moda-var.woff2)format("woff2-variations"),url(../fonts/v3/bodoni-moda-var.woff2)format("woff2");font-weight:400 500;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+00D7,U+2018-2019,U+201C-201D,U+2022,U+2026,U+20B9,U+2122,U+2192}
@font-face{font-family:"Bodoni Moda Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("DejaVu Serif");font-style:normal;size-adjust:113%}

:root,[data-theme=dark]{
  --ground:#080808;--surface:#111111;--surface-2:#191919;--line:#2b2b2b;--line-strong:#454545;
  --ink:#e1e5e5;--ink-2:#c9cdcd;--ink-3:#a3a7a7;--ink-4:#7e8282;
  --red:#e2422e;--red-2:#c2362a;--red-deep:#a92f21;--red-ink:#ff8a78;--accent:#e2422e;--online:#5fd38a;
  --grey-1:#141414;--grey-2:#212121;--grey-3:#333333;--grey-4:#545454;--grey-5:#7d7d7d;--grey-6:#aeaeae;
  --font-display:"Bricolage Grotesque","Bricolage Grotesque Fallback",ui-sans-serif,sans-serif;
  --font-accent:"Bricolage Grotesque","Bricolage Grotesque Fallback",ui-sans-serif,sans-serif;
  --font-text:"Instrument Sans","Instrument Sans Fallback",ui-sans-serif,sans-serif;
  --font-body:var(--font-text);
  --font-mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --pad-x:clamp(20px,5vw,64px);--section-pad-x:var(--pad-x);--section-y:clamp(72px,10vw,144px);--max:1360px;
  --head-h:72px;--radius:6px;
  --size-h1:clamp(2.45rem,6vw + .9rem,5rem);--size-h2:clamp(2rem,3.4vw + 1rem,3.75rem);--size-h3:clamp(1.25rem,1vw + 1rem,1.625rem);
  --mb-dock-ink:#0d0d0d;--mb-dock-paper:#e1e5e5;--mb-red:#e2422e;--mb-ease:var(--ease-out);--mb-safe:env(safe-area-inset-bottom,0px);
  color-scheme:dark
}
[data-theme=light]{
  --ground:#f1ede4;--surface:#e9e4d9;--surface-2:#e0dacd;--line:#cfc8b9;--line-strong:#a9a293;
  --ink:#1d1c18;--ink-2:#3a3832;--ink-3:#57544b;--ink-4:#6b675d;
  --red:#c2362a;--red-2:#a92f21;--red-deep:#8c2519;--red-ink:#a92f21;--accent:#c2362a;--online:#1f7a45;
  --grey-1:#e8e3d8;--grey-2:#d3cdbf;--grey-3:#bdb7a9;--grey-4:#6b675a;--grey-5:#5c584c;--grey-6:#4b483f;
  --mb-dock-ink:#1d1c18;--mb-dock-paper:#f1ede4;
  color-scheme:light
}

/* Base */
html{background:var(--ground);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.022em;line-height:1.02;text-wrap:balance;color:var(--ink)}
html body h1 em,html body h2 em,html body h3 em{font-family:inherit!important;font-style:normal!important;font-synthesis:none;font-weight:inherit!important;font-size:1em!important;font-variation-settings:normal!important;letter-spacing:inherit!important;color:var(--red)!important}
html body .foot-cta h2 em,html body #contact-cta h2 em{display:block}
p{text-wrap:pretty}
a{color:inherit}
::selection{background:var(--red);color:#ffffff}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.visually-hidden,.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:max(12px,env(safe-area-inset-left,0px));top:-100px;z-index:500;display:inline-flex;align-items:center;min-height:48px;min-width:48px;padding:12px 18px;background:var(--ink);color:var(--ground);font-weight:600;text-decoration:none;border-radius:4px;transform:none;transition:top .15s var(--ease-out)}
.skip-link:focus,.skip-link:focus-visible{top:calc(12px + env(safe-area-inset-top,0px));transform:none}

/* Labels: mono, spaced, a red tile in front */
.rb-label,.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font:500 .75rem/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rb-label::before,.eyebrow::before{content:"";flex:none;width:8px;height:8px;background:var(--red)}
.sheet-kicker{display:none!important}

/* Header */
#site-header.v3-nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--head-h);display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:0 var(--pad-x)!important;max-width:none!important;width:auto!important;margin:0!important;background:color-mix(in srgb,var(--ground) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);transform:none!important;animation:none!important;opacity:1!important;visibility:visible!important}
#site-header.v3-nav::before,#site-header.v3-nav::after{content:none!important;display:none!important}
#site-header .wordmark{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--ink);text-decoration:none;flex:none}
#site-header .wordmark-mark,#site-header .wordmark-lockup{width:40px;height:34px;flex:none;overflow:visible}
#site-header .wordmark-name{font:700 .8125rem/1.1 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
#site-header .wordmark-tiles,#site-header .wordmark-tiles rect,#site-header .wordmark-plug{opacity:1!important;transform:none!important;animation:none!important}
#site-header .v3-nav-links{display:flex;align-items:center;gap:clamp(4px,1.4vw,18px);margin:0 auto;padding:0;position:static;transform:none;background:none;border:0;height:auto;width:auto;min-width:0;overflow-x:auto;flex-direction:row;opacity:1;visibility:visible}
#site-header .v3-nav-links a{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:0 8px;font:500 .9375rem/1 var(--font-text);letter-spacing:0;text-transform:none;color:var(--ink-2);text-decoration:none;border:0;background:none}
#site-header .v3-nav-links a:focus-visible{outline-offset:-3px}
#site-header .v3-nav-links a::after{content:"";position:absolute;left:8px;right:8px;bottom:12px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s var(--ease-out)}
#site-header .v3-nav-links a:hover{color:var(--ink)}
#site-header .v3-nav-links a:hover::after{transform:scaleX(.35)}
#site-header .v3-nav-links a.is-current,#site-header .v3-nav-links a[aria-current=page]{color:var(--ink)}
#site-header .v3-nav-links a.is-current::after,#site-header .v3-nav-links a[aria-current=page]::after{transform:scaleX(1)}
#site-header .v3-menu-toggle,#site-header .rb-nav-bar{display:none!important}
#site-header .rbq{display:none!important}

/* Settings: one button, one small panel with the four switches */
.rb-set{position:relative;flex:none;margin-left:auto}
#site-header .v3-nav-links + .rb-set,#site-header .v3-nav-links ~ .rb-set{margin-left:0}
.rb-set-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;min-width:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);
  font:500 .875rem/1 var(--font-text);cursor:pointer;transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out)}
.rb-set-btn:hover{border-color:var(--ink-3)}
.rb-set-btn[aria-expanded=true]{background:var(--surface-2);border-color:var(--ink-3)}
.rb-set-btn svg{width:18px;height:18px;flex:none}
#site-header .hero-settings{all:unset;display:flex}
html.js #site-header .hero-settings{position:absolute;right:0;top:calc(100% + 10px);z-index:210;flex-direction:column;align-items:stretch;gap:2px!important;min-width:236px;padding:8px!important;
  background:var(--surface)!important;border:1px solid var(--line-strong)!important;border-radius:10px!important;box-shadow:0 18px 50px rgba(0,0,0,.45)!important;animation:none!important;transform:none!important}
html.js #site-header .hero-settings[hidden]{display:none!important}
html:not(.js) .rb-set-btn{display:none}
html #site-header .hero-settings .hero-setting{all:unset;box-sizing:border-box;display:flex!important;align-items:center;justify-content:flex-start!important;gap:12px!important;min-height:48px!important;min-width:0!important;padding:0 12px!important;border-radius:6px;cursor:pointer;
  font:500 .9375rem/1.2 var(--font-text)!important;color:var(--ink);letter-spacing:0!important;text-transform:none!important;width:100%}
html #site-header .hero-settings .hero-setting .setting-caption{font-size:.9375rem!important}
#site-header .hero-setting:hover{background:var(--surface-2)}
#site-header .hero-setting:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
#site-header .hero-setting .setting-caption{display:inline!important;font:inherit!important;border:0!important;padding:0!important;text-decoration:none!important}
#site-header .hero-setting .theme-icon-wrap{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
#site-header .hero-setting svg{width:18px;height:18px}
#site-header .theme-svg,#site-header .sound-svg{display:none}
html:not([data-theme=light]) #site-header .theme-moon,[data-theme=light] #site-header .theme-sun{display:block}
#site-header .sound-toggle[aria-pressed=true] .sound-on,#site-header .sound-toggle:not([aria-pressed=true]) .sound-off{display:block}
#site-header .quality-pulse-radar{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
#site-header .quality-dot{width:8px;height:8px;border-radius:0;background:var(--red);animation:none!important}
#site-header .quality-dot.is-lite{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
#site-header .quality-ring{display:none}
.rb-set-note{margin:4px 12px 4px;font:500 .6875rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}

@media (max-width:760px){
  :root{--head-h:64px}
  #site-header.v3-nav{gap:10px}
  html.mb-on #site-header .v3-nav-links{display:none!important}
  html:not(.mb-on) #site-header .v3-nav-links{position:absolute;left:0;right:0;top:100%;overflow-x:auto;justify-content:flex-start;margin:0;padding:0 var(--pad-x);background:var(--ground);border-bottom:1px solid var(--line)}
  .rb-set,#site-header .v3-nav-links ~ .rb-set{margin-left:auto}
  .rb-set-btn{padding:0 12px}
  .rb-set-btn .rb-set-txt{font-size:.8125rem}
}

/* Phone tab bar (built by mobile.js): one bar only */
.mb-dock{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--mb-dock-ink);color:var(--mb-dock-paper);border-top:1px solid var(--line)}
.mb-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(48px,1fr);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:var(--mb-safe)}
.mb-tabs::-webkit-scrollbar{display:none}
.mb-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;min-width:48px;scroll-snap-align:start;padding:7px 2px 6px;color:var(--ink-3);text-decoration:none;font:500 .6875rem/1 var(--font-text)}
.mb-tab svg{width:22px;height:22px;flex:none}
.mb-tab[aria-current=page]{color:var(--ink)}
.mb-tab[aria-current=page]::before{content:"";position:absolute;top:-1px;left:50%;width:8px;height:8px;margin-left:-4px;background:var(--red)}
.mb-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
[data-theme=light] .mb-dock{background:#1d1c18;color:#f1ede4}
[data-theme=light] .mb-tab{color:rgba(241,237,228,.82)}
[data-theme=light] .mb-tab > span{color:rgba(241,237,228,.82)}
[data-theme=light] .mb-tab[aria-current=page],
[data-theme=light] .mb-tab[aria-current=page] > span{color:#ffffff}
[data-theme=light] .wk-media--kiosk{background:var(--surface)}
[data-theme=light] .wk-label{color:#1B1F2A!important}
html.mb-on{scroll-padding-bottom:calc(var(--mb-dock-h,58px) + 16px + env(safe-area-inset-bottom,0px))}
html.mb-on #site-footer{padding-bottom:calc(var(--mb-dock-h,58px) + 24px + env(safe-area-inset-bottom,0px))}
.mb-legal-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0;background:0 0;border:0;border-top:1px solid var(--line);color:inherit;cursor:pointer;font:500 .75rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.mb-legal-btn svg{width:16px;height:16px;transition:transform .25s var(--ease-out)}
.mb-legal-btn[aria-expanded=true] svg{transform:rotate(180deg)}
#site-footer .legal.mb-folded>span:last-child{display:none}
#site-footer .legal.mb-folded.is-open>span:last-child{display:block}
.mb-hint{display:none!important}

/* Buttons */
.btn,.rb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  font:600 1rem/1 var(--font-text);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out)}
.btn:hover,.rb-btn:hover{border-color:var(--ink)}
.btn-primary,.rb-btn--solid{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.btn-primary:hover,.rb-btn--solid:hover{background:var(--ink-2);border-color:var(--ink-2)}

/* RB credit mark (shared credit component) */
:root{--foot-mark:56px;--foot-gap:40px}
@media (max-width:600px){:root{--foot-mark:48px;--foot-gap:24px}}
.rbc-mark-wrap{height:var(--foot-mark);width:auto;display:inline-block;position:relative;perspective:600px;margin:0 0 14px}
.foot-lockup.rbc-mark{height:100%;width:auto;display:block;overflow:visible;transform-style:preserve-3d;transform-origin:50% 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
[data-foot-mark]:hover .rbc-c1,[data-foot-mark]:focus-within .rbc-c1,[data-foot-mark].rbc-tap .rbc-c1{fill:#e2422e}
[data-foot-mark]:hover .rbc-c2,[data-foot-mark]:focus-within .rbc-c2,[data-foot-mark].rbc-tap .rbc-c2{fill:#c2362a}
[data-foot-mark]:hover .rbc-c3,[data-foot-mark]:focus-within .rbc-c3,[data-foot-mark].rbc-tap .rbc-c3{fill:#a92f21}
[data-foot-mark]:hover .rbc-c4,[data-foot-mark]:focus-within .rbc-c4,[data-foot-mark].rbc-tap .rbc-c4{fill:#7a1f16}
.rbc-sheen{display:none}
.foot-lockup rect,.foot-lockup g{fill:currentColor;transition:fill .25s ease}
.rbc-mark-wrap{color:var(--ink)}
.foot-lockup .rbc-sheen-rect{fill:url(#rbc-sheen-grad-lockup);opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity .25s ease}
[data-foot-mark]:hover .rbc-sheen-rect,[data-foot-mark]:focus-within .rbc-sheen-rect{opacity:1}
@keyframes rbc-tap{0%{transform:scale(1)}45%{transform:scale(.9) rotate(-3deg)}to{transform:scale(1)}}
[data-foot-mark].rbc-tap .rbc-mark{animation:rbc-tap .32s cubic-bezier(.3,1.4,.4,1)}
@media (prefers-reduced-motion:reduce){.foot-lockup.rbc-mark,.rbc-sheen-rect{transition:none!important;animation:none!important;transform:none!important}.foot-lockup .rbc-sheen-rect{display:none}}

/* Closing call: Planning a gallery? */
.foot-cta{position:relative;padding:var(--section-y) var(--pad-x) clamp(56px,7vw,96px);background:var(--ground);color:var(--ink);border-top:1px solid var(--line);overflow:hidden}
.foot-cta::before{content:none!important}
.foot-cta .wrap{max-width:var(--max);margin:0 auto;padding:0}
.foot-cta .wrap>div{display:grid;grid-template-columns:1fr;gap:28px;align-items:end}
.foot-cta h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,6vw + .6rem,6rem);line-height:.96;letter-spacing:-.03em;max-width:14ch}
.foot-cta h2 em{display:block;font-family:inherit;font-style:normal;font-weight:700;color:var(--red)}
.foot-cta .rbc-mark-wrap{display:block;height:auto;width:clamp(150px,18vw,220px);margin:0}
.foot-cta .foot-lockup.rbc-mark{width:100%;height:auto;display:block}
.foot-cta p{margin:0;color:var(--ink-3);font-size:.9375rem}
.foot-cta .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
@media (min-width:900px){
  .foot-cta .wrap>div{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:64px}
  .foot-cta h2{grid-row:span 3}
}

/* Footer */
#site-footer{padding:40px var(--pad-x) 40px;background:var(--ground);color:var(--ink-3);border-top:1px solid var(--line);font-size:.875rem;line-height:1.6}
#site-footer .wrap{max-width:var(--max);margin:0 auto;padding:0;display:grid;gap:20px}
#site-footer .brand-link{margin:0;color:var(--ink);font-weight:600}
#site-footer .foot-links{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 -10px}
#site-footer .foot-links a{display:inline-flex;align-items:center;min-height:48px;padding:0 10px;color:var(--ink-2);text-decoration:none;font-size:.9375rem}
#site-footer .foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
#site-footer .legal{display:grid;gap:10px;font-size:.8125rem;color:var(--ink-3)}
#site-footer .legal a{color:var(--ink-2);text-underline-offset:3px;display:inline-flex;align-items:center;gap:6px;min-height:48px}
#site-footer .legal svg{width:14px;height:14px}
#site-footer .station-close{display:none}

/* Section shell for redesigned pages */
.rb-section{padding:var(--section-y) var(--pad-x);border-top:1px solid var(--line)}
.rb-wrap{max-width:var(--max);margin:0 auto}
.rb-h2{margin:14px 0 0;font-size:var(--size-h2)}
.rb-lede{margin:18px 0 0;max-width:38rem;font-size:clamp(1.05rem,.5vw + .95rem,1.25rem);line-height:1.55;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  #site-header .v3-nav-links a::after,.skip-link{transition:none}
}

/* Case pages: clear the fixed header; facts read as figures with small labels */
html body .pf-case-head{padding-top:calc(var(--head-h) + clamp(28px,5vw,64px))!important}
html body .pf-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 .75rem/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
html body .pf-crumbs a{display:inline-flex;align-items:center;min-height:48px;color:var(--ink-2)}
html body .pf-fact-v{font-family:var(--font-display);letter-spacing:-.02em}
html body .pf-fact-l{font:500 .75rem/1.4 var(--font-mono)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--ink-3)!important}

/* v1 ornament mark under page titles: the header mark already says it */
.rb-mark-ornament{display:none!important}

/* Continuity between pages (cross-document View Transitions, Chrome and Safari 18+; others just navigate) */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:rb-vt-out .2s cubic-bezier(.65,0,.35,1) both}
::view-transition-new(root){animation:rb-vt-in .32s cubic-bezier(.22,1,.36,1) both}
@keyframes rb-vt-out{to{opacity:0}}
@keyframes rb-vt-in{from{opacity:0}}
#site-header{view-transition-name:rb-head}
::view-transition-group(rb-head){animation:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.01s!important}
}
html.reduced-motion::view-transition-group(*),html.reduced-motion::view-transition-old(*),html.reduced-motion::view-transition-new(*){animation-duration:.01s!important}

/* Capabilities plaques: the case-study link is a full tap */
.plaque .medium a{display:inline-flex;align-items:center;min-height:48px}

/* Work index figures: plain ruled row, no cards */
html body .pf-scale-grid{gap:0!important;border-top:1px solid var(--line-strong)}
html body .pf-scale-card{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:20px 24px 4px 0!important;border-right:1px solid var(--line)!important}
html body .pf-scale-card:last-child{border-right:0!important}
html body .pf-scale-card::before,html body .pf-scale-card::after{content:none!important}
html body .pf-scale-val{font:700 clamp(2.2rem,3vw + 1rem,3.6rem)/1 var(--font-display)!important;letter-spacing:-.03em!important;color:var(--ink)!important}
html body .pf-scale-lbl{display:block;margin-top:10px;font:500 .75rem/1.45 var(--font-mono)!important;letter-spacing:.1em!important;text-transform:uppercase;color:var(--ink-3)!important;max-width:22ch}
html body .pf-scale-card + .pf-scale-card{padding-left:24px!important}
@media (max-width:760px){html body .pf-scale-grid{display:grid!important;grid-template-columns:1fr 1fr!important}html body .pf-scale-card,html body .pf-scale-card + .pf-scale-card{border-right:0!important;border-bottom:1px solid var(--line)!important;padding:16px 12px 14px 0!important}html body .pf-scale-card:nth-child(odd){border-right:1px solid var(--line)!important}html body .pf-scale-card:nth-child(even){padding-left:16px!important}html body .pf-scale-val{font-size:2rem!important}}

/* Settings rows (rb-switch): text on the left, the same switch on the right for every row */
html #site-header .hero-settings .hero-setting .theme-icon-wrap,html #site-header .hero-settings .hero-setting .quality-pulse-radar{display:none!important}
html #site-header .hero-settings .hero-setting{justify-content:space-between!important}
html #site-header .hero-settings .hero-setting::after{content:"";flex:none;width:38px;height:22px;border-radius:999px;margin-left:16px;
  background:radial-gradient(circle at 11px 50%,var(--ink-3) 0 7px,transparent 7.5px),var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .15s linear}
html #site-header .hero-settings .hero-setting[aria-pressed=true]::after,
html #site-header .hero-settings .hero-setting:has(.quality-dot:not(.is-lite))::after{background:radial-gradient(circle at 27px 50%,#ffffff 0 7px,transparent 7.5px),var(--red);box-shadow:none}

/* Labs index: two columns of notes on wide screens, the evidence link reads as a link */
@media (min-width:1100px){
  html body .labs-list{display:grid!important;grid-template-columns:1fr 1fr;gap:0 48px}
  html body .labs-list > .labs-note:first-child{grid-column:1 / -1}
}
html body .labs-list,html body .plaques.labs-list{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
html body .labs-note{border-radius:0!important;background:none!important;border:0!important;border-top:1px solid var(--line-strong)!important;padding:28px 0 32px!important}
html body .labs-ev a{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--ink)!important;font-weight:600;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
html body .labs-ev a::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}

/* Case pages on phones: one-line breadcrumb, smaller film control */
@media (max-width:600px){
  html body .pf-crumbs{font-size:.625rem!important;letter-spacing:.06em!important;gap:4px 6px!important;flex-wrap:nowrap!important;white-space:nowrap}
  html body .pf-crumbs .pf-crumb-n{margin-left:auto}
  html body .pf-play{min-height:48px!important;padding:0 14px!important;font-size:.6875rem!important;top:10px!important;right:10px!important;bottom:auto!important;left:auto!important}
}

/* No scroll reveals on work pages (banned: fade-and-rise on every section). pf.js wipes blocks in with inline clip-paths;
   this keeps every block visible at rest, without scrolling and in still captures. Only inline styles are touched. */
.pf-case [style*="clip-path"],.pf-index [style*="clip-path"]{clip-path:none!important}

/* Tablet header (761 to 1099 px): Settings shows its icon only, so the header keeps equal side margins; the name stays for screen readers */
@media (min-width:761px) and (max-width:1099px){.rb-set-btn{min-width:48px;min-height:48px;padding:0 12px;justify-content:center}.rb-set-btn .rb-set-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* Home on phones and tablets: the main action sits in the header on the first screen (the hero button is below the stage there) */
.rb-head-cta{display:none}
@media (max-width:760px){#site-header .rb-head-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;margin-left:auto;border-radius:999px;background:var(--ink);color:#080808;font:600 .8125rem/1 "Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;text-decoration:none;white-space:nowrap;flex:none}#site-header .rb-head-cta:focus-visible{outline:3px solid var(--red);outline-offset:3px}[data-theme=light] #site-header .rb-head-cta{background:#24231e;color:#f1ede4}.rb-head-cta~.rb-set .rb-set-btn{min-width:48px;min-height:48px;padding:0 12px;justify-content:center}.rb-head-cta~.rb-set .rb-set-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* Footer: the decorative dot after the copyright read as a stray bullet */
.legal .station-close{display:none!important}

/* job M: 600 to 760 px shows "Discuss your project" beside the lede, so the header copy is not repeated there */
@media (min-width:600px) and (max-width:760px){#site-header .rb-head-cta{display:none}}
/* job M: no fade-and-rise reveals (banned pattern; it also left the About founder text blank in full-page captures) */
html.js:not(.reduced-motion) [data-reveal]{opacity:1;filter:none;transform:none}
/* seven nav links since Games; keep Settings on screen just above the phone tab bar width (higher specificity than v3.css) */
@media (min-width:761px) and (max-width:900px){html #site-header .v3-nav-links{gap:2px}html #site-header .v3-nav-links a{padding:0 6px}html #site-header .v3-nav-links a::after{left:6px;right:6px}}
@media (max-width:400px){.mb-tab{padding:7px 0 6px;font-size:.625rem;letter-spacing:-.015em}}

/* ==== MOBILE-01 (Opus mobile worker, 30 Oct 2026): phone floor for 320-412px. See 01-MOBILE-RESPONSIVENESS-REPORT.md.
   1) 48px touch targets (site was built to 44px)  2) tactile press feedback  3) legibility floor  4) 320px tab bar */
@media (max-width:760px){
  /* 1. touch targets. "html body" beats the 44px rules in rb-home/rb-inner and the late kiosk/collection sheets */
  html body #site-header .rb-set-btn,html body .rb-set-btn{min-width:48px;min-height:48px}
  #site-header.v3-nav{padding-top:env(safe-area-inset-top,0px)!important;height:calc(var(--head-h,64px) + env(safe-area-inset-top,0px));padding-left:max(var(--pad-x),env(safe-area-inset-left,0px))!important;padding-right:max(var(--pad-x),env(safe-area-inset-right,0px))!important}
  #site-footer{padding-left:max(var(--pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--pad-x),env(safe-area-inset-right,0px));padding-bottom:calc(clamp(40px,5vw,64px) + env(safe-area-inset-bottom,0px))}
  html body #site-footer .foot-links a,html body #site-footer .legal a{min-height:48px}
  html body .mp-all,html body .wk-all,html body .cl-cta,html body .cl-links a,html body .cl-table a,html body .cl-rowmore>summary,html body .st-index a,html body .g3-link,html body .plaque .medium a,html body .labs-ev a{min-height:48px}
  html body .cl-links a,html body .cl-table a{min-width:48px}
  html body .v3-hero__in .v3-hero__label{min-height:48px!important} /* index.html inline style sets 44px later in the cascade */
  html body .cl-btn{min-width:48px}
  html body .kq-lang button,html body .kq-home,html body .kq-answers button,html body .kq .kq-next,html body .kq .kq-again{min-height:48px;min-width:48px}
  html body .rb-a11y-opt,html body .rb-set .hero-setting{min-height:48px!important;min-width:48px!important}
  /* 2. tactile feedback: touch has no hover, so give every control a press state and kill the grey flash + double-tap delay */
  a,button,summary,[role=button],label,input,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  :is(.rb-set-btn,.mb-tab,.cl-btn,.cl-cta,.mp-all,.wk-all,.kq-lang button,.kq-home,.kq-next,.kq-again,.rb-head-cta,.btn,[class*="-cta"],#site-footer a,.cl-links a,.cl-rowmore>summary){transition:transform .12s var(--ease-out,ease),opacity .12s,background-color .12s}
  :is(.rb-set-btn,.rb-a11y-opt,.cl-btn,.cl-cta,.mp-all,.wk-all,.kq-lang button,.kq-home,.kq-next,.kq-again,.rb-head-cta,.btn,[class*="-cta"],#site-footer a,.cl-links a,.cl-rowmore>summary):active{transform:scale(.96);opacity:.82}
  .mb-tab:active{transform:scale(.92);color:var(--ink)}
  .mb-tab:active svg{transform:translateY(1px)}
  /* 3. legibility floor: nothing a reader needs below 12px; Devanagari needs more */
  html body #site-header .wordmark-name{font-size:.8125rem;line-height:1.1}
  html body .wk-url{font-size:.75rem}
  html body .kq-sub .kq-hi{font-size:max(13px,.92em)}
}
@media (max-width:360px){
  :root{--pad-x:16px;--section-pad-x:16px}
}
/* 4. seven tabs cannot each be 48px inside 320px (7 x 48 = 336). Below 336px the bar scrolls sideways by 16px
   instead of shrinking taps; the clipped last tab signals the scroll. */
@media (max-width:335px){
  html body .mb-tabs{grid-auto-columns:minmax(48px,1fr);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity}
  html body .mb-tabs::-webkit-scrollbar{display:none}
  html body .mb-tab{scroll-snap-align:start}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  :is(.rb-set-btn,.mb-tab,.cl-btn,.cl-cta,.mp-all,.wk-all,.kq-lang button,.kq-home,.rb-head-cta,.btn,[class*="-cta"],#site-footer a,.cl-links a,.cl-rowmore>summary):active{transform:none}
}