@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-site-ascii-symbols-300-700-normal.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
:root{--ink:#101b2d;--muted:#435771;--paper:#dfeafb;--accent:#087dff;--accent-dark:#0864d0;--line:rgba(67,104,157,.19);--glass:linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,249,255,.91));--glass-border:rgba(106,149,205,.42);--shadow:0 30px 65px -28px rgba(31,74,137,.34),0 7px 18px rgba(48,91,154,.09),inset 0 1px 0 #fff;--original-header:96px;font-family:'Space Grotesk',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--original-header);overflow-x:clip}body{margin:0;background:radial-gradient(ellipse at 12% 8%,#f5f9ff99,transparent 40%),linear-gradient(135deg,#e9f0fe,#dfeafb 55%,#edf4ff);min-width:280px}button,input{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button,a,input{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}h1,h2,h3,p{margin:0}svg{display:block}button svg{pointer-events:none}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:#087dff25}.glass{background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(140%)}
.site-header{height:var(--original-header);position:sticky;top:0;z-index:50;padding:16px 24px}.site-nav{height:64px;max-width:1440px;margin:auto;border:1px solid rgba(124,162,211,.36);border-radius:999px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.88);box-shadow:0 10px 28px #356ba015,inset 0 1px 0 #fff;backdrop-filter:blur(18px) saturate(150%)}.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:.04em}.wordmark img{object-fit:contain}.nav-contact{display:inline-flex;gap:25px;align-items:center;font-size:12px}.nav-contact span{font-size:25px;font-weight:300}.nav-contact:hover{color:var(--accent)}

.sample-story{position:relative;height:175svh}
.sample-stage{position:sticky;top:var(--original-header);height:calc(100svh - var(--original-header));min-height:470px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:48px;padding:40px 28px 62px}
.sample-intro{width:100%;max-width:1280px;text-align:center;container-type:inline-size}
.sample-intro h2{max-width:1050px;margin-inline:auto;font-size:clamp(30px,3.5vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1.12;text-wrap:balance}
.sample-intro p{margin-top:19px;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--muted);text-wrap:balance}
.sample-grid{--cards:4;--card-width:min(500px,calc((100vw - 90px)/(.6125*(var(--cards) + 1))));position:relative;width:100%;height:calc(var(--card-width)*.5625 + 22px);flex-shrink:0;isolation:isolate}
.sample-grid>.sample-tile{--shift:0;--tilt:0deg;--lift:0px;--scale:1;position:absolute;left:50%;top:0;width:var(--card-width);transform:translateX(calc(-50% + var(--shift)*100%)) translateY(var(--lift)) rotate(var(--tilt)) scale(var(--scale));transform-origin:50% 50%;transition:transform .46s cubic-bezier(.2,.7,.15,1),box-shadow .35s,border-color .35s;cursor:zoom-in;will-change:transform}
.sample-tile{overflow:hidden;border-radius:25px;background:linear-gradient(150deg,#fcfdff,#eff5ff);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 55px -22px #22467855,0 4px 10px #355f8d14,inset 0 1px 0 #fff;min-width:0}
.sample-grid>.sample-tile:nth-child(2){z-index:3}
.sample-grid:not(.is-carousel)>.sample-tile.is-hovered{--scale:1.13;box-shadow:0 42px 70px -22px #23456e66,0 0 0 1px #77b3f94d;border-color:#fff}
.sample-tile-heading{height:88px;display:flex;align-items:center;justify-content:center;padding:17px 42px;text-align:center;font-size:clamp(17px,1.75vw,24px);line-height:1.18;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
.sample-expand{position:absolute;z-index:4;right:15px;top:15px;color:#6588b2;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}
.sample-expand svg{width:22px;height:22px}
.sample-tile:is(:hover,:focus-visible) .sample-expand{opacity:1;transform:none}
.sample-viewer-frame{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;pointer-events:none;background:#dce8f7}
.sample-loading{min-height:16px;font-size:10px;color:#738eae;text-align:center;margin-top:-20px}

.recording-open{overflow:hidden;scrollbar-gutter:stable}
.recording-dialog{--modal-block-gap:18px;--modal-inline-gap:28px;position:fixed;inset:max(var(--modal-block-gap),env(safe-area-inset-top)) max(var(--modal-inline-gap),env(safe-area-inset-right)) max(var(--modal-block-gap),env(safe-area-inset-bottom)) max(var(--modal-inline-gap),env(safe-area-inset-left));margin:auto;width:min(1060px,calc(100vw - max(var(--modal-inline-gap),env(safe-area-inset-left)) - max(var(--modal-inline-gap),env(safe-area-inset-right))));height:min(900px,calc(100dvh - max(var(--modal-block-gap),env(safe-area-inset-top)) - max(var(--modal-block-gap),env(safe-area-inset-bottom))));max-width:none;max-height:none;min-height:0;padding:0;border:1px solid #ffffffdd;border-radius:29px;background:linear-gradient(145deg,#f8fbff,#e8f1ff);color:var(--ink);box-shadow:0 45px 140px #10284655,0 0 0 1px #9cb5d444;overflow:hidden;overscroll-behavior:contain}
.recording-dialog::backdrop{background:#4b618b38;backdrop-filter:blur(16px) saturate(.8)}
.recording-dialog[open]{animation:open-recording .3s cubic-bezier(.16,1,.3,1)}
@keyframes open-recording{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
/* Header and controls take their natural size; the recording owns exactly the
   remaining viewport height. Its iframe lays out every data panel within it. */
.recording-shell{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;padding:18px}
.recording-header{position:relative;min-height:44px;display:flex;align-items:center;justify-content:center;margin:0;padding:0 52px}
.recording-header h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;font-weight:500;font-size:clamp(20px,2.5vw,29px);letter-spacing:-.04em;text-align:center;line-height:1.15}
.icon-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;padding:6px;border:0;border-radius:50%;background:transparent;color:#5a7b9f}
.icon-button svg{width:20px;height:20px}.icon-button:hover{background:#dce9fa}.icon-button:disabled{opacity:.35}
.close-recording{position:absolute;right:0;top:50%;transform:translateY(-50%);background:#ffffff9c;border:1px solid #d7e3f2;width:40px;height:40px}
.recording-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;margin:0;border:1px solid #bdcfe744;border-radius:15px;background:#ffffffa6;box-shadow:inset 0 1px 0 #fff}
.recording-transport{display:flex;align-items:center;gap:9px;flex:1;min-width:280px}
.play-recording{display:flex;align-items:center;justify-content:center;gap:6px;min-width:80px;min-height:40px;border:1px solid #ffffff88;border-radius:99px;padding:6px 11px 6px 8px;color:white;background:linear-gradient(140deg,#1784f8,#0864d0);box-shadow:0 4px 10px #087dff22,inset 0 1px 0 #ffffff60;font-size:12px}
.play-recording svg{width:20px;height:20px}.play-recording:hover{background:#0864d0}.play-recording:disabled{opacity:.42}
.time-label{color:#6f88a8;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.recording-transport input{flex:1;min-width:42px;max-width:none;height:30px;margin:0;accent-color:#087dff;cursor:ew-resize}
.recording-layers{display:flex;align-items:center;gap:4px}
.layer-toggle{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid transparent;border-radius:9px;padding:6px 8px;min-height:36px;background:transparent;color:#6d829c;font-size:11px;white-space:nowrap}
.layer-toggle svg{width:15px;height:15px}.layer-toggle[aria-pressed=true]{background:#e3edfc;color:#126dce;border-color:#c3d9f633}.layer-toggle:hover{background:#dceafa}
.expanded-viewer{min-width:0;min-height:0;height:100%}
.expanded-viewer>.sample-tile{position:relative;height:100%;min-height:0;border:0;border-radius:12px;background:none;box-shadow:none}
.expanded-viewer .sample-viewer-frame{pointer-events:auto;aspect-ratio:auto;width:100%;height:100%;min-height:0;background:transparent}
.recording-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 2px;font-size:10px;line-height:1.3;color:#7189a9}
.recording-footer>span:last-child{color:#8094ae;text-align:right}
/* No footer text in normal use (2026-10-18): the footer only appears for the two recovery messages. */
.recording-footer:has(#recording-status:empty){display:none}.recording-shell:has(#recording-status:empty){grid-template-rows:auto auto minmax(0,1fr)}
@media(max-width:899px){.recording-dialog{--modal-inline-gap:12px;--modal-block-gap:12px;border-radius:23px}.recording-shell{padding:12px;gap:8px}.recording-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}.recording-transport{min-width:0;gap:8px}.recording-layers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:3px}.layer-toggle{padding-inline:3px;gap:4px}}
@media(max-width:620px){.recording-dialog{--modal-inline-gap:8px;--modal-block-gap:8px;border-radius:20px}.recording-shell{padding:10px;gap:6px}.recording-header{min-height:44px;padding:0 42px 0 4px}.recording-header h2{font-size:20px}.recording-toolbar{padding:5px;gap:3px;border-radius:12px}.recording-transport{gap:6px}.play-recording{min-width:68px;font-size:12px;padding-inline:7px}.recording-transport .icon-button{width:32px;height:38px;padding:5px}.time-label{font-size:10px}.layer-toggle{font-size:10px;min-height:36px;gap:3px;padding-inline:2px}.layer-toggle svg{width:14px;height:14px}.recording-footer{font-size:9px;gap:6px}}
/* Landscape spends width on one control row, leaving height for all four views. */
@media(max-height:500px) and (min-width:600px){.recording-dialog{--modal-inline-gap:8px;--modal-block-gap:6px;border-radius:17px}.recording-shell{padding:7px 9px;gap:5px}.recording-header{min-height:34px;padding-inline:44px}.recording-header h2{font-size:19px}.close-recording{width:34px;height:34px}.recording-toolbar{display:flex;flex-wrap:nowrap;padding:3px 5px;gap:8px}.recording-transport{min-width:0;gap:5px}.recording-layers{display:flex;width:auto;gap:1px}.layer-toggle{min-height:34px;font-size:10px;padding:4px;gap:3px}.layer-toggle svg{width:13px;height:13px}.play-recording{min-width:65px;min-height:34px;font-size:11px;padding-inline:6px}.recording-transport .icon-button{width:30px;height:32px}.time-label{font-size:10px}.recording-footer{font-size:9px}}

.site-footer{max-width:1440px;margin:auto;display:flex;align-items:center;gap:30px;padding:13px 49px 36px;color:#7188a5;font-size:10px}.site-footer .wordmark{color:var(--ink);font-size:15px}.site-footer>span:last-child{margin-left:auto;font-size:9px;color:#8ca0ba}.skip-link{position:fixed;top:0;left:24px;z-index:99;padding:15px 22px;border-radius:0 0 10px 10px;background:white;transform:translateY(-120%)}.skip-link:focus{transform:none}
@media(max-width:1100px){.sample-stage{gap:40px}.sample-tile-heading{height:76px;padding:15px 30px}.sample-grid{height:calc(var(--card-width)*.5625 + 22px)}.sample-expand{right:10px;top:10px}.sample-expand svg{width:17px;height:17px}}
@media(max-width:899px){:root{--original-header:86px}.site-header{padding:14px 18px}.site-nav{height:58px;padding-inline:22px}.site-footer{padding-inline:28px;gap:20px;font-size:9px}}
@media(max-width:620px){.site-header{padding-inline:12px}.site-nav{padding-inline:18px}.wordmark{font-size:15px;gap:8px}.nav-contact{font-size:11px;gap:22px}.sample-stage{min-height:400px;padding:30px 0 50px;gap:35px}.sample-intro{width:calc(100% - 40px)}.sample-intro h2{font-size:clamp(24px,5.6vw,32px)}.sample-intro p{max-width:440px;margin:15px auto 0;font-size:15px;text-wrap:balance}.sample-grid{--card-width:calc((100vw - 52px)/2);height:calc(var(--card-width)*.5625 + 22px)}.sample-tile-heading{height:80px;font-size:16px;padding:14px 17px}.sample-tile{border-radius:20px}.sample-expand{right:11px;top:11px}.sample-loading{font-size:9px;max-width:75%}.site-footer{padding:9px 24px 29px;flex-wrap:wrap;gap:16px;font-size:8px}.site-footer .wordmark{font-size:14px}.site-footer>span:last-child{flex-basis:100%;margin-left:0;font-size:7px}}
@media(max-height:680px) and (min-width:621px){.sample-stage{gap:26px;min-height:390px;padding-block:20px}.sample-intro h2{font-size:32px}.sample-grid{--card-width:min(410px,calc((100vw - 90px)/(.6125*(var(--cards) + 1))))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.sample-story{height:auto}.sample-stage{position:relative;top:0;height:auto;padding-block:95px}.sample-grid>.sample-tile{will-change:auto}}
/* The gallery is small genuine frame-zero images (raw + annotated per card), not live engines. */
.sample-preview{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#dce8f7}
.sample-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sample-poster-annotated{opacity:var(--sample-reveal,0)}
.recording-dialog:not([open]){display:block;position:fixed;top:0;left:0;visibility:hidden;pointer-events:none;z-index:-1}
.expanded-viewer>.sample-tile{position:relative}
.recording-poster{position:absolute;left:var(--recording-video-x,0px);top:var(--recording-video-y,0px);z-index:2;display:block;width:var(--recording-video-width,100%);height:var(--recording-video-height,43%);object-fit:cover;background:#111b21;border-radius:12px;pointer-events:none}
.expanded-viewer .sample-tile[data-ready=true]>.recording-poster{display:none}
.expanded-viewer .sample-tile[data-activation-required=true]>.recording-poster{display:none}

/* Desktop lazy susan (src/sample-carousel.js): the cards stand on a turning ring; the front card is centred and
   annotated, side cards are angled with the ring, the back card is raised, smaller, dimmer and blurred.
   Phones (<=620px) keep the fan above and its scroll-driven reveal. */
@property --hover-lift{syntax:'<length>';inherits:false;initial-value:0px}
.sample-carousel{position:relative;width:100%;flex-shrink:0;isolation:isolate;--ring-w:min(540px,38vw,calc((100vw - 180px)/2.1));--ring-h:calc(var(--ring-w)*.5625);--ring-top:calc(var(--ring-h)*.36)}
.carousel-arrow{display:none}
.sample-carousel-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(min-width:621px){.sample-story{height:auto}.sample-stage{position:relative;top:0;height:auto;min-height:calc(100svh - var(--original-header))}}
.sample-grid.is-carousel{--card-width:var(--ring-w);height:calc(var(--ring-top) + var(--ring-h) + 34px);perspective:1700px;perspective-origin:50% 0;user-select:none;-webkit-user-select:none;touch-action:pan-y pinch-zoom;cursor:grab}
.sample-grid.is-carousel>.sample-tile{top:var(--ring-top);transition:box-shadow .35s,border-color .35s,--hover-lift .3s cubic-bezier(.2,.7,.15,1);will-change:transform,filter;cursor:pointer}
.sample-grid.is-carousel>.sample-tile.is-front{cursor:zoom-in}
.sample-grid.is-carousel.is-dragging,.sample-grid.is-carousel.is-dragging>.sample-tile{cursor:grabbing}
.sample-grid.is-carousel>.sample-tile.is-front:is(:hover,:focus-visible){--hover-lift:-8px;box-shadow:0 42px 70px -22px #23456e66,0 0 0 1px #77b3f94d;border-color:#fff}
.sample-grid.is-carousel img{pointer-events:none;-webkit-user-drag:none}
.sample-grid.is-carousel .sample-poster-annotated{opacity:var(--card-reveal,0);transition:opacity .45s}
.sample-grid.is-carousel:not(.is-visible) .sample-poster-annotated{opacity:0}
.sample-carousel.is-carousel .carousel-arrow{position:absolute;z-index:200;top:calc(var(--ring-top) + var(--ring-h)/2 - 23px);display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass);box-shadow:0 12px 26px -14px #1f4a8955,inset 0 1px 0 #fff;color:#3d6ea9;backdrop-filter:blur(14px);transition:transform .2s,color .2s,box-shadow .2s}
.sample-carousel.is-carousel .carousel-arrow svg{width:22px;height:22px}
.sample-carousel.is-carousel .carousel-arrow:hover{color:var(--accent);transform:scale(1.06);box-shadow:0 16px 30px -14px #1f4a8977,inset 0 1px 0 #fff}
.sample-carousel.is-carousel .carousel-prev{left:max(0px,calc(50% - var(--ring-w)*1.12 - 46px))}
.sample-carousel.is-carousel .carousel-next{right:max(0px,calc(50% - var(--ring-w)*1.12 - 46px))}
@media(max-height:680px) and (min-width:621px){.sample-carousel{--ring-w:min(410px,38vw,calc((100vw - 180px)/2.1))}}

/* Sample cards on the conveyor belt (src/conveyor.js + src/research.css; Julian 10/22: "like a conveyor belt across
   the screen that constantly loops around", replacing the lazy susan and the phone fan). Every card always shows its
   annotated preview with the contact overlays (Julian 10/22). */
.sample-story{height:auto}
.sample-stage{position:relative;top:0;height:auto;min-height:0;padding-block:72px 64px}   /* the belt is shorter than the ring was, so the section hugs it */
.sample-carousel.belt-window{--belt-gap:26px;--belt-pad:30px;--belt-pad-bottom:76px;margin-block:-30px -56px}
.sample-grid.belt-track{--card-width:clamp(270px,29vw,440px);position:relative;height:auto;isolation:auto}
.sample-grid.belt-track>.sample-tile{position:relative;left:auto;top:auto;flex:none;width:var(--card-width);transform:none;transition:transform .35s cubic-bezier(.2,.7,.15,1),box-shadow .35s,border-color .35s;cursor:zoom-in;will-change:auto}
.sample-grid.belt-track>.sample-tile:is(:hover,:focus-visible){transform:translateY(-8px);box-shadow:0 42px 70px -22px #23456e66,0 0 0 1px #77b3f94d;border-color:#fff}
.sample-grid.belt-track .sample-poster-annotated{opacity:1}
@media(max-width:620px){.sample-stage{min-height:0;padding-bottom:30px}.sample-carousel.belt-window{--belt-gap:16px;--belt-pad:24px;--belt-pad-bottom:64px;margin-block:-24px -48px}.sample-grid.belt-track{--card-width:min(74vw,330px)}}