*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0}
:root{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* Film-grain overlay utility: add class="grain" to body or any positioned element. */
.grain-layer{position:fixed;inset:-50%;z-index:9998;pointer-events:none;background-image:var(--grain);opacity:var(--grain-o,.07);mix-blend-mode:overlay;animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.grain-layer{animation:none}}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:fixed;left:-999px;top:8px;z-index:999;padding:10px 14px;background:#000;color:#fff}
.skip:focus{left:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jw-art{width:100%;height:100%;overflow:hidden}
.jw-art path{vector-effect:none}

/* Motion toggle (shared contract) */
.jw-motion{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.02em;padding:7px 12px 7px 10px;border-radius:999px;border:1px solid currentColor;line-height:1}
.jw-motion-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:jwpulse 2.4s infinite}
.jw-motion.is-paused .jw-motion-dot{animation:none;opacity:.35}
@keyframes jwpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Motion pill: James's Framer MotionButton, 168 × 48 */
.jw-pill{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:168px;height:48px;padding:0 18px 0 14px;border:0;border-radius:9999px;background:#F5F0E8;color:#1C1917;font:600 13px/1 'Google Sans','Inter',system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;cursor:pointer;touch-action:manipulation;box-shadow:0 2px 10px rgba(20,17,15,.35)}
.jw-pill svg{display:block;width:20px;height:20px;flex:none;fill:currentColor}
.jw-pill:focus{outline:none}
.jw-pill:focus-visible{box-shadow:0 0 0 3px #1C1917,0 0 0 6px #fff}
@media (forced-colors:active){.jw-pill{border:2px solid ButtonText}.jw-pill:focus-visible{outline:3px solid Highlight;outline-offset:3px}}
.jw-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Live Belong search demo */
.jw-search-demo{margin:28px 0 20px;padding:clamp(20px,3vw,32px);border-radius:24px;background:#141414;color:#eee}
.jw-search-caption{color:#d5d5d5;font:500 13px/1.4 var(--sans,system-ui)}
.jw-search-panel{width:88%;margin:clamp(36px,6vw,72px) auto 0;padding:clamp(32px,5vw,64px) clamp(20px,3vw,40px);border-radius:24px;background:#000;color:#fff}
.jw-search-panel h3{margin:0 0 36px;font:700 clamp(30px,3.4vw,44px)/1.15 var(--sans,system-ui);letter-spacing:-.03em;text-align:center;color:#e7edf4}
.jw-search-panel label{display:block;margin-bottom:10px;font:600 16px/1.4 var(--sans,system-ui)}
.jw-search-row{display:flex;align-items:stretch;gap:10px}
.jw-search-row input{min-width:0;width:100%;height:54px;padding:12px 14px;border:1px solid #929292;border-radius:4px;background:#1b1b1b;color:#fff;font:400 16px/1.4 var(--sans,system-ui);color-scheme:dark}
.jw-search-row button{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:54px;padding:12px 22px;border-radius:999px;background:#4ab3e4;color:#061b27;font:600 16px/1.4 var(--sans,system-ui)}
.jw-search-row button:hover{background:#79c9ee}
.jw-search-row :focus-visible{outline:3px solid #6bc8f3;outline-offset:4px}
.jw-search-hint{margin:24px auto 0;max-width:25ch;color:#e0e0e0;font:600 16px/1.4 'Segoe Print','Comic Sans MS',cursive;text-align:center}
.jw-search-note{margin:10px auto 0;color:#bdbdbd;font:400 12px/1.5 var(--sans,system-ui);text-align:center}
.jw-media-group,.jw-media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0 32px;align-items:stretch}
.jw-media-pair{margin-top:0}
.jw-media-card{min-width:0}
.jw-media-card.is-wide{grid-column:1/-1}
.jw-media-card.is-tall{grid-row:span var(--media-rows,2);display:flex;flex-direction:column;min-height:0}
.jw-showcase{position:relative;width:100%;min-width:0;min-height:340px;aspect-ratio:1.1;overflow:hidden;padding:28px;border-radius:24px;background:#2b2b2b;color:#dedede}
.jw-showcase figcaption{font:500 13px/1.4 var(--sans,system-ui)}
.jw-media-heading{font:inherit;letter-spacing:inherit}
.jw-image-showcase{display:grid;grid-template-rows:minmax(0,1fr);gap:24px}
.jw-image-showcase.has-caption{grid-template-rows:auto minmax(0,1fr)}
.jw-image-stage{display:grid;place-items:center;min-width:0;min-height:0}
.jw-image-stage>img{display:block;width:100%;height:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:6px}
.jw-image-stage>.jw-comparison{width:100%}
.jw-media-card.is-wide .jw-showcase{aspect-ratio:16/10;min-height:0}
.jw-media-card .jw-comparison-showcase{aspect-ratio:auto}
.jw-media-card.is-tall .jw-showcase{flex:1;min-height:0;aspect-ratio:auto}
@media (min-width:641px){
  .jw-media-card.is-tall .jw-image-stage{position:relative}
  .jw-media-card.is-tall .jw-image-stage>img{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-height:100%;object-fit:contain}
}
.jw-media-card.is-compact .jw-showcase{min-height:0;aspect-ratio:auto}
.jw-media-card.is-compact .jw-image-showcase{grid-template-rows:auto}
.jw-media-card.is-compact .jw-image-showcase.has-caption{grid-template-rows:auto auto}
.jw-media-card.is-compact .jw-image-stage>img{height:auto;max-height:none}
.jw-media-card.is-compact .jw-video-showcase{aspect-ratio:16/10;min-height:280px}
.jw-media-card:is(.is-tall,.is-compact) .jw-video-showcase .jw-showcase-stage{bottom:88px}
.jw-comparison-showcase .jw-compare-hint{color:#dedede}
.jw-media-description{margin-top:16px;color:var(--body,currentColor)}
.jw-media-text{margin:0;font:400 17px/1.7 var(--sans,system-ui);color:inherit;text-wrap:pretty}
.jw-media-text+.jw-media-text{margin-top:16px}
.jw-media-details{margin:12px 0 24px;color:var(--body,currentColor);font:400 15px/1.6 var(--sans,system-ui)}
.jw-media-details summary{cursor:pointer;width:fit-content;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.jw-media-details summary:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:3px}
.jw-media-details>div{margin-top:12px}
.jw-showcase-stage{position:absolute;inset:84px 24px 24px;display:grid;place-items:center}
.jw-showcase-stage video{width:100%;height:100%;min-height:0;object-fit:contain;object-position:center top;border-radius:6px}
.jw-showcase-play{position:absolute;right:24px;bottom:24px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:999px;background:#f5f0e8;color:#1c1917;box-shadow:0 2px 12px #0002;font:500 13px/1.2 var(--sans,system-ui);font-variant-numeric:tabular-nums}
.jw-showcase-play[hidden]{display:none}
.jw-showcase-play svg{width:18px;height:18px}
.jw-showcase-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (max-width:640px){.jw-media-group,.jw-media-pair{grid-template-columns:1fr}.jw-search-panel{width:100%}.jw-showcase{min-height:360px}.jw-media-card.is-wide .jw-showcase{min-height:360px}.jw-media-card.is-tall{grid-row:auto;display:block}.jw-media-card.is-tall .jw-image-stage>img{height:auto;max-height:min(660px,75vh)}.jw-media-card.is-tall .jw-video-showcase{aspect-ratio:3/5;min-height:480px;max-height:720px}}
@media (max-width:520px){.jw-search-row{flex-direction:column}.jw-search-row button{align-self:flex-end;min-width:130px}}

/* Before/after comparison */
.jw-comparison{width:100%;min-width:0}
.jw-compare{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#f7f7f7;isolation:isolate}
.jw-compare-layer{position:absolute;inset:0}
.jw-compare img.jw-compare-image{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;user-select:none}
.jw-compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.jw-compare-label{position:absolute;top:12px;left:12px;padding:7px 11px;border-radius:999px;background:#fff;color:#1c1917;box-shadow:0 1px 6px #0002;font:600 12px/1.2 var(--sans,system-ui)}
.jw-compare-after-label{left:auto;right:12px}
.jw-compare-divider{position:absolute;inset:0 auto 0 var(--split);width:2px;transform:translateX(-50%);background:#1c1917;pointer-events:none}
.jw-compare-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#1c1917;color:#fff;box-shadow:0 2px 8px #0003;font:700 26px/1 system-ui;white-space:nowrap}
.jw-compare input{position:absolute;z-index:1;top:0;left:-24px;width:calc(100% + 48px);height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;touch-action:pan-y}
.jw-compare input::-webkit-slider-thumb{appearance:none;width:48px;height:48px}
.jw-compare input::-moz-range-thumb{width:48px;height:48px;border:0}
.jw-compare:focus-within .jw-compare-divider span{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 8px #1c1917}
.jw-compare-hint{margin:12px 0 0;font:400 13px/1.5 var(--sans,system-ui);color:var(--mute,currentColor);text-align:center}

/* Reveal helper */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.js [data-reveal]{opacity:1;transform:none}}
/* Pausing stops looping motion only; one-off entrance animations still finish. */
.motion-paused .loop,.motion-paused .mq-track,.motion-paused .grain-layer,.motion-paused .orb,.motion-paused .jw-motion-dot{animation-play-state:paused!important}

/* Concept switcher (exploration chrome, not part of the designs) */
.xbar{position:fixed;z-index:9999;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:2px;align-items:center;padding:4px;border-radius:999px;background:rgba(20,20,20,.86);backdrop-filter:blur(10px);font:500 11px/1 ui-sans-serif,system-ui,sans-serif;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.xbar a{color:#fff;text-decoration:none;padding:7px 9px;border-radius:999px;opacity:.65}
.xbar a:hover,.xbar a[aria-current]{opacity:1;background:rgba(255,255,255,.14)}
.xbar .xbar-all{opacity:1;padding:7px 12px}
@media (max-width:700px){.xbar{bottom:10px}.xbar a:not(.xbar-all):not([aria-current]){display:none}}

html,body{overflow-x:clip}