/* Our own copies. Nothing about a visit is sent to a font provider. */ @font-face{font-family:'Plus Jakarta Sans';src:url('/assets/fonts/plus-jakarta-sans.woff') format('woff'); font-weight:400 700;font-style:normal;font-display:swap} @font-face{font-family:'Playfair Display';src:url('/assets/fonts/playfair-display.woff') format('woff'); font-weight:400 700;font-style:normal;font-display:swap} :root{ --surface-page:#faf7f1; --surface-raised:#fff; --surface-sunken:#f0e9de; --surface-sand:#f1d6b4; --surface-brand-soft:#fff0e5; --surface-sonar-soft:#eaf5fc; --surface-relay-soft:#f7ecef; --surface-gravity-soft:#eef3ea; --ink:#171717; --ink-copy:#55514c; --ink-muted:#77716a; --ink-on-brand:#fff; --brand:#ff6602; --brand-hover:#d95500; --brand-ink:#c24a00; --sonar:#0167bb; --relay:#7b3041; --gravity:#58724d; --hairline:rgba(23,23,23,.09); --hairline-strong:rgba(23,23,23,.18); --focus:#0167bb; --r-sm:7px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px; --shadow-card:0 1px 2px rgba(23,23,23,.06); --shadow-raised:0 8px 24px rgba(23,23,23,.08); --shadow-float:0 18px 48px rgba(23,23,23,.12); --font-display:"Playfair Display",Georgia,serif; --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --container:1120px; /* Type scale. Every size on the site should come from this ladder, so that "small body" means one thing on every page instead of drifting between 14, 14.5, 15, 15.5 and 16 as it does today. Steps are derived from the sizes already in use, so adopting them moves most text by a pixel or less. Text steps are fixed; display steps are fluid and already clamp themselves. */ --t-micro:11px; /* uppercase kickers and eyebrows */ --t-meta:12.5px; /* metadata, read times, dateline */ --t-fine:13.5px; /* fine print, form help, captions */ --t-sm:15px; /* secondary body, card decks */ --t-body:17px; /* body copy; matches the base */ --t-lg:19px; /* lead paragraph */ --t-xl:21px; /* standfirst, pull-out statement */ --d-sm:clamp(21px,2.2vw,26px); /* card and item titles */ --d-md:clamp(26px,3vw,36px); /* section headings */ --d-lg:clamp(30px,3.8vw,46px); /* major headings */ --d-xl:clamp(38px,5vw,64px); /* page headline */ --d-2xl:clamp(44px,7vw,86px); /* masthead */ } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--surface-page);color:var(--ink);font-family:var(--font-sans); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased; /* without this the browser rounds each glyph advance to a whole pixel, which opens gaps inside words at small sizes: "Ne derlandse", "brief ng" */ text-rendering:geometricPrecision} img{max-width:100%;height:auto;display:block} a{color:inherit} .wrap{max-width:var(--container);margin:0 auto;padding:0 24px} h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;margin:0} h1{font-size:clamp(42px,6.6vw,74px);line-height:1.02} h2{font-size:clamp(34px,5vw,58px);line-height:1.05} h3{font-size:clamp(26px,3.4vw,40px);line-height:1.12} p{margin:0} .lead{font-size:clamp(17px,2.2vw,20px);line-height:1.6;color:var(--ink-copy)} .eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)} .caption{font-size:13px;color:var(--ink-muted)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 24px; border-radius:var(--r-sm);text-decoration:none;font-size:16px;font-weight:600;line-height:1.1; border:1px solid transparent;transition:background .18s ease,box-shadow .18s ease,transform .18s ease} .btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .btn-primary{background:var(--brand);color:var(--ink-on-brand)} .btn-primary:hover{background:var(--brand-hover)} .btn-secondary{background:var(--surface-raised);color:var(--ink);border-color:var(--hairline-strong)} .btn-secondary:hover{box-shadow:var(--shadow-raised)} section{padding:clamp(72px,10vw,128px) 0} @media(max-width:620px){ h1{font-size:40px;line-height:1.05} h2{font-size:31px;line-height:1.12} h3{font-size:25px;line-height:1.18} .lead{font-size:15.5px;line-height:1.55} .head .lead{max-width:36ch;margin-inline:auto} .panel h3{font-size:28px;line-height:1.12} .panel .lead{font-size:15.5px;min-height:4.7em} .closing h2{font-size:29px} .say blockquote{font-size:16px} body{font-size:16px} } /* ---------- announcement bar ---------- */ .topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:center; gap:14px;padding:15px 48px 15px 24px;background:var(--brand);color:#fff;font-size:14.5px;line-height:1.45} .topbar p{margin:0;text-align:center} .tb-tag{display:inline-block;margin-right:8px;padding:3px 8px;border-radius:5px;background:var(--ink); color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;vertical-align:1px} .topbar a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.55);white-space:nowrap;margin-left:6px} .topbar a:hover{text-decoration-color:#fff} .tb-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px; display:grid;place-items:center;border:0;border-radius:50%;background:none;color:rgba(255,255,255,.8); font-size:20px;line-height:1;cursor:pointer} .tb-close:hover{background:rgba(23,23,23,.16);color:#fff} .tb-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px} body.has-topbar .nav{top:calc(16px + var(--tb-h,52px))} body.has-topbar .hero{margin-top:var(--tb-h,52px)} @media(max-width:700px){ .topbar{font-size:13.5px;padding:13px 44px 13px 16px} .topbar a{display:inline;margin-left:5px} .topbar p{max-width:30ch;margin:0 auto} } /* ---------- attention: one orange button per screen ---------- */ .topbar{background:#f7f1e4 !important;color:var(--ink) !important;border-bottom:1px solid var(--hairline)} .topbar .tb-tag{background:var(--brand) !important;color:#fff !important} .topbar a{color:var(--brand-ink) !important;text-decoration-color:rgba(194,74,0,.4) !important} .topbar a:hover{text-decoration-color:var(--brand-ink) !important} .topbar .tb-close{color:var(--ink-muted) !important} .topbar .tb-close:hover{background:rgba(23,23,23,.06) !important;color:var(--ink) !important} .nav .nav-cta{background:transparent;color:var(--ink);border:1.5px solid rgba(23,23,23,.28);box-shadow:none; transition:background .3s ease,color .3s ease,border-color .3s ease} .nav .nav-cta:hover{border-color:var(--ink);background:rgba(255,255,255,.5)} .past-hero .nav .nav-cta{background:var(--brand);color:#fff;border-color:var(--brand)} .past-hero .nav .nav-cta:hover{background:#e85c00;border-color:#e85c00} /* secondary buttons: navigation, not the page's main action */ .btn-quiet{background:transparent;color:var(--ink);border:1.5px solid rgba(23,23,23,.32);box-shadow:none} .btn-quiet span{display:inline-block;transition:transform .2s ease} .btn-quiet:hover{border-color:var(--ink);background:rgba(255,255,255,.55)} .btn-quiet:hover span{transform:translateX(4px)} /* ---------- nav ---------- */ .nav{position:fixed;top:16px;left:0;right:0;z-index:50;padding:0 24px} .nav-inner{display:flex;align-items:center;gap:26px;max-width:var(--container);margin:0 auto; background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border:1px solid var(--hairline); border-radius:var(--r-pill);padding:10px 20px 10px 24px;box-shadow:var(--shadow-card)} .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.06em} .nav-logo img{width:28px;height:28px} .nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:15px;font-weight:500} .nav-links > a,.nav-trigger{color:var(--ink-copy);text-decoration:none;background:none;border:0; font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:6px 0;position:relative} .nav-links > a:hover,.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--ink)} .nav-links > a::after,.nav-trigger::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--brand);transition:right .22s ease} .nav-links > a:hover::after,.nav-trigger:hover::after,.nav-trigger[aria-expanded="true"]::after{right:0} .chev{width:11px;height:7px;transition:transform .22s ease} .nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)} .nav-drop{position:relative} .nav-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:280px; background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-lg); box-shadow:var(--shadow-raised);padding:8px;display:grid;gap:2px;animation:fade .22s ease} .nav-menu[hidden]{display:none} .nav-menu a{display:grid;gap:2px;padding:11px 14px;border-radius:var(--r-sm);text-decoration:none} .nav-menu a:hover{background:var(--surface-sunken)} .nav-menu b{font-size:15px;font-weight:600;color:var(--ink)} .nav-menu i{font-style:normal;font-size:13px;color:var(--ink-muted)} .nav .btn{padding:11px 18px;font-size:15px} .burger{display:none;width:42px;height:42px;border:1px solid var(--hairline-strong);border-radius:50%; background:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px} .burger span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .2s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)} .mobilemenu{display:none} @media(max-width:860px){ .nav-links{display:none} .burger{display:flex} .nav-inner{gap:12px;padding:8px 10px 8px 16px} .nav-logo span{font-size:13px} .nav .btn{padding:10px 14px;font-size:14px;margin-left:auto} .mobilemenu{display:grid;gap:4px;max-width:var(--container);margin:10px auto 0; background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-xl); padding:14px;box-shadow:var(--shadow-raised);animation:fade .22s ease} .mobilemenu[hidden]{display:none} .mm-head{margin:4px 6px 6px;font-size:12px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--brand-ink)} .mobilemenu a{display:grid;gap:2px;padding:13px 14px;border-radius:var(--r-md);text-decoration:none} .mobilemenu a:hover{background:var(--surface-sunken)} .mobilemenu b{font-size:16px;font-weight:600;color:var(--ink)} .mobilemenu i{font-style:normal;font-size:13px;color:var(--ink-muted)} .mm-plain{font-size:16px;font-weight:600;color:var(--ink);border-top:1px solid var(--hairline); border-radius:0;margin-top:4px;padding-top:15px} .mm-cta{margin-top:10px;width:100%;justify-content:center;padding:15px} } /* ---------- hero ---------- */ /* the picture sits on the bottom edge; extra sky above it gives the headline room of its own */ .hero{position:relative;width:100%;aspect-ratio:1669/1160;min-height:560px;overflow:hidden; background:#80cefd} .hero-media{position:absolute;inset:0;overflow:hidden;background:#80cefd} .hero-zoom{position:absolute;left:0;right:0;bottom:0;top:0;animation:drift 22s ease-in-out infinite alternate; transform-origin:50% 100%;will-change:transform} .hero-media picture,.hero-media img{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto; display:block;backface-visibility:hidden} @keyframes drift{from{transform:scale(1)}to{transform:scale(1.05)}} .hero-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column; align-items:center;justify-content:flex-start;text-align:center; padding:clamp(104px,14vh,180px) 24px 0} .hero-copy .brandline{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.14em;margin-bottom:16px} .hero-copy .brandline img{width:22px;height:22px} .hero-copy h1{max-width:none} .hero-copy .lead{margin-top:16px;max-width:none;color:var(--ink);text-wrap:balance} .hero-copy .lead br{display:inline} @media(max-width:560px){.hero-copy .lead br{display:none}.hero-copy .lead{max-width:34ch}} .hero-copy .btn,.closing .btn{margin-top:26px;padding:17px 44px;min-width:230px;font-size:17px} .hero-copy .caption{margin-top:10px;color:#6b6259} @media(max-width:700px){ .hero{aspect-ratio:941/1672;min-height:0} .hero-copy{padding-top:clamp(104px,17vh,168px)} .hero-media picture,.hero-media img{top:0;height:100%;object-fit:cover;object-position:50% 100%} .hero-zoom{animation:driftm 20s ease-in-out infinite alternate;transform-origin:50% 88%} .hero-copy .brandline{display:none} .hero-copy h1{max-width:14ch} .hero-copy .lead{font-size:15px;line-height:1.5;max-width:40ch;margin-top:12px} .hero-copy .btn{width:100%;max-width:340px} } @keyframes driftm{from{transform:scale(1)}to{transform:scale(1.09)}} /* ---------- logo tape ---------- */ .tape{position:relative;width:100%;height:64px;overflow:hidden;background:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)} .tape-track{display:flex;align-items:center;gap:64px;height:100%;width:max-content; padding-left:64px;animation:tape 42s linear infinite} .tape:hover .tape-track{animation-play-state:paused} .tape img{height:30px;width:auto;opacity:.6;filter:grayscale(1);flex:none; transition:opacity .2s ease,filter .2s ease} .tape img:hover{opacity:1;filter:none} .tape-label{text-align:center;margin:0 0 22px} .tape-wrap{padding:clamp(56px,7vw,88px) 0 0} @keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:700px){.tape{height:56px}.tape img{height:26px}.tape-track{gap:44px;padding-left:44px}} /* ---------- generic section head ---------- */ .head{max-width:960px;margin:0 auto clamp(40px,5.5vw,64px);text-align:center} .head .lead{max-width:none;text-wrap:balance} @media(max-width:1000px) and (min-width:621px){.head .lead br{display:none}} @media(max-width:620px){ .head .lead br{display:none} .head .lead{line-height:1.7;max-width:32ch;color:var(--ink-copy)} } @media(max-width:620px){.head .lead{font-size:16px;max-width:30ch;margin-inline:auto}} .head h2{margin-bottom:clamp(20px,2.6vw,32px);text-wrap:balance} @media(max-width:620px){.head h2 br{display:none}} /* ---------- floating proof over artwork ---------- */ .figure-stack{position:relative} .float{position:absolute;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(2px); border:1px solid var(--hairline);border-radius:var(--r-md);padding:14px 18px; box-shadow:var(--shadow-raised);min-width:150px;opacity:0;transform:scale(.82) translateY(10px)} .float.pop{animation:pop .44s cubic-bezier(.2,.9,.3,1.25) forwards} @keyframes pop{0%{opacity:0;transform:scale(.82) translateY(10px)} 62%{opacity:1;transform:scale(1.05) translateY(0)} 100%{opacity:1;transform:scale(1) translateY(0)}} .float.floaty{opacity:1;animation:bob 7s ease-in-out infinite alternate} .float.floaty:nth-child(2){animation-delay:-2.4s} .float.floaty:nth-child(3){animation-delay:-4.8s} .float.floaty:nth-child(4){animation-delay:-1.2s} @keyframes bob{from{transform:translateY(0)}to{transform:translateY(-8px)}} .float .n{font-size:clamp(22px,2.4vw,30px);line-height:1.1;font-weight:600;letter-spacing:-.02em; display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .float .unit{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-copy)} .float .n::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none} .float .l{margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--ink-copy);max-width:19ch} .float .who{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--ink)} .float .e{margin-top:5px;font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--brand-ink)} .float-1{left:3%;top:9%} .float-2{left:27%;top:2%} .float-3{right:26%;top:4%} .float-4{right:3%;top:13%} @media(max-width:900px){ .float{position:static;min-width:0;width:100%;transform:translateY(12px)} .float.pop{animation:rise .55s cubic-bezier(.2,.7,.3,1) both} .float.floaty{animation:none;opacity:1;transform:none} .floats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px} .float .l{max-width:none} } @media(max-width:620px){.floats{grid-template-columns:1fr}} @media(max-width:1060px) and (min-width:901px){.float{min-width:0;max-width:24%}.float .l{max-width:none}} .figure{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-float);background:var(--surface-sand)} .figure img{width:100%;height:auto;aspect-ratio:1670/941;object-fit:cover} @media(max-width:700px){.figure img{aspect-ratio:1122/1402}} /* ---------- engines ---------- */ .engines{background:var(--surface-sunken)} .tabs{display:flex;gap:4px;margin:0 0 -1px 36px;position:relative;z-index:2;flex-wrap:wrap} .tab{font-family:var(--font-sans);cursor:pointer;display:flex;align-items:baseline;gap:9px; padding:13px 22px 14px;border:1px solid var(--hairline);border-bottom-color:transparent; border-radius:12px 12px 0 0;background:rgba(250,247,241,.7);color:var(--ink-muted); font-size:15px;font-weight:600;letter-spacing:.02em; transition:background .2s ease,color .2s ease,transform .2s ease} .tab{position:relative} .tab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-muted);flex:none;align-self:center;opacity:.5;transition:opacity .2s ease,background .2s ease} @keyframes signal{ 0%{box-shadow:0 0 0 0 rgba(var(--eng),.5)} 70%{box-shadow:0 0 0 9px rgba(var(--eng),0)} 100%{box-shadow:0 0 0 0 rgba(var(--eng),0)}} #tab-sonar[aria-selected="true"]::before{background:var(--sonar);opacity:1} #tab-relay[aria-selected="true"]::before{background:var(--relay);opacity:1} #tab-gravity[aria-selected="true"]::before{background:var(--gravity);opacity:1} .tab .role{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--ink-muted);opacity:.85} .tab:hover{color:var(--ink);transform:translateY(-1px)} .tab[aria-selected="true"]{background:var(--surface-raised);color:var(--ink); border-color:var(--hairline);border-bottom-color:var(--surface-raised); box-shadow:inset 0 3px 0 var(--brand)} .tab[aria-selected="true"] .role{color:var(--brand-ink);opacity:1} @media(max-width:700px){.tabs{margin-left:0;gap:6px}.tab{padding:11px 14px}.tab .role{display:none}} .panel{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,44px);align-items:center; background:var(--surface-raised);border:1px solid var(--hairline);border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl); padding:clamp(28px,3.4vw,44px);box-shadow:var(--shadow-card); aspect-ratio:1670/941;min-height:420px} .panel .art{height:100%} .panel .art img{width:100%;height:100%;object-fit:cover;object-position:50% 45%} .panel[hidden]{display:none} .panel.fade{animation:fade .3s ease} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .panel .eyebrow{display:block;text-wrap:balance;max-width:24ch} .thought{position:relative;display:inline-block;margin:0 0 34px;padding:13px 20px; background:var(--surface-brand-soft);border:1px solid rgba(255,102,2,.22); border-radius:20px;box-shadow:0 2px 0 rgba(23,23,23,.05),var(--shadow-card); transform-origin:12% 120%} .thought .dot{position:absolute;display:block;border-radius:50%; background:var(--surface-brand-soft);border:1px solid rgba(255,102,2,.22)} .thought .dot-1{width:11px;height:11px;left:18px;bottom:-9px} .thought .dot-2{width:7px;height:7px;left:8px;bottom:-21px} .panel.fade .thought{animation:balloon 1.7s cubic-bezier(.2,.7,.3,1) .12s both} .panel.fade .thought .eyebrow{animation:thinkInk 1.7s cubic-bezier(.2,.7,.3,1) .12s both} .panel.fade .thought .dot-1{animation:puff .5s cubic-bezier(.2,.9,.3,1.3) .5s both} .panel.fade .thought .dot-2{animation:puff .5s cubic-bezier(.2,.9,.3,1.3) .3s both} @keyframes balloon{ 0%{opacity:0;transform:translateY(9px) scale(.9)} 35%{opacity:.75;transform:translateY(3px) scale(.97)} 70%{opacity:1;transform:translateY(0) scale(1.03)} 100%{opacity:1;transform:none}} @keyframes thinkInk{ 0%{color:#e0d6c6}35%{color:#f0b083}70%{color:#ff7a1a}100%{color:var(--brand-ink)}} @keyframes puff{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes balloonm{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} br.m{display:none} .cardtab{display:none} .panel h3{margin-bottom:16px;font-size:clamp(30px,3.9vw,48px);line-height:1.06} .panel .lead{margin-bottom:28px;font-size:clamp(16px,1.3vw,18px)} .panel .art{border-radius:var(--r-lg);overflow:hidden;background:var(--surface-sand)} .panel .art{box-shadow:inset 0 0 0 1px rgba(23,23,23,.06)} .panel[data-engine="sonar"] .art{background:var(--surface-sonar-soft);box-shadow:inset 0 0 0 1px rgba(1,103,187,.18)} .panel[data-engine="relay"] .art{background:var(--surface-relay-soft);box-shadow:inset 0 0 0 1px rgba(123,48,65,.18)} .panel[data-engine="gravity"] .art{background:var(--surface-gravity-soft);box-shadow:inset 0 0 0 1px rgba(88,114,77,.18)} .panel[data-engine="sonar"]{border-top:2px solid var(--sonar)} .panel[data-engine="relay"]{border-top:2px solid var(--relay)} .panel[data-engine="gravity"]{border-top:2px solid var(--gravity)} @media(max-width:980px){.panel{aspect-ratio:auto;min-height:0}.panel .art{height:auto}.panel .art img{height:auto;aspect-ratio:16/10}} @media(max-width:820px){ /* no tabs on mobile — the three engines become swipe cards */ .tabs{display:none} .engines .wrap > .reveal:not(.head){display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; margin:0 -24px;padding:4px 24px 8px} .engines .wrap > .reveal:not(.head)::-webkit-scrollbar{display:none} .panel,.panel[hidden]{display:block;flex:0 0 86%;scroll-snap-align:center; border-radius:var(--r-xl);padding:22px 22px 24px;aspect-ratio:auto;min-height:0; opacity:.34;transition:opacity .4s ease} .panel.incard{opacity:1} .panel{transform:translateZ(0);backface-visibility:hidden} .panel.fade{animation:none} /* only the thought animates, not the card */ .panel.fade .thought{animation:balloonm 1.1s cubic-bezier(.2,.7,.3,1) .1s both} .panel.fade .thought .dot-1{animation:puff .4s ease .45s both} .panel.fade .thought .dot-2{animation:puff .4s ease .3s both} .thought{display:inline-block;width:238px;max-width:100%;padding:10px 14px;border-radius:14px; background:var(--surface-page);border-color:rgba(255,102,2,.16);box-shadow:none;margin-bottom:24px} .thought .eyebrow{font-size:11.5px;letter-spacing:.09em;max-width:none;min-height:2.3em} .thought .dot{background:var(--surface-page);border-color:rgba(255,102,2,.16);box-shadow:none} .thought .dot-1{width:9px;height:9px;bottom:-7px} .thought .dot-2{width:6px;height:6px;bottom:-17px} .panel .btn{box-shadow:0 2px 0 rgba(23,23,23,.12)} .cardtab{display:flex;align-items:baseline;gap:9px;margin:-2px 0 18px;padding-bottom:12px; border-bottom:1px solid var(--hairline)} .cardtab b{font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--ink); display:inline-flex;align-items:center;gap:8px} .cardtab b::before{content:"";width:7px;height:7px;border-radius:50%;flex:none} .cardtab b::before{position:relative} .panel.fade .cardtab b::before{animation:dotpulse 1.1s ease-out .15s 1} @keyframes dotpulse{0%{transform:scale(.5);opacity:.4}55%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}} .panel[data-engine="sonar"] .cardtab b::before{background:var(--sonar)} .panel[data-engine="relay"] .cardtab b::before{background:var(--relay)} .panel[data-engine="gravity"] .cardtab b::before{background:var(--gravity)} .panel[data-engine="sonar"] .cardtab{border-bottom-color:rgba(1,103,187,.28)} .panel[data-engine="relay"] .cardtab{border-bottom-color:rgba(123,48,65,.28)} .panel[data-engine="gravity"] .cardtab{border-bottom-color:rgba(88,114,77,.28)} .cardtab i{font-style:normal;font-size:12.5px;font-weight:500;color:var(--brand-ink)} .panel .art{order:0;margin-top:22px} .panel .art img{height:auto;aspect-ratio:16/10} .panel .btn{width:100%} .panel h3 br.m{display:inline} .thought .eyebrow br.m{display:inline} .panel h3{min-height:2.24em} .swipehint{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--ink-muted)} } .swipehint{display:none} /* ---------- proof (night) ---------- */ .proof{background:var(--ink);color:var(--surface-page)} .proof .head h2{color:var(--surface-page)} .proof .head .lead{color:#c9c2ba} .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .metric{background:#211f1e;border:1px solid rgba(250,247,241,.14);border-radius:var(--r-md);padding:28px} .metric .n{font-size:clamp(32px,4vw,40px);line-height:1.05;font-weight:600;letter-spacing:-.02em} .metric .l{margin:8px 0 18px;font-size:15px;line-height:1.5;color:#c9c2ba} .metric .e{font-size:13px;font-weight:600;letter-spacing:.12em;color:#ff8a3d} .quote-unused{margin-top:20px;background:#211f1e;border:1px solid rgba(250,247,241,.14);border-radius:var(--r-md); padding:28px;display:flex;gap:20px;align-items:flex-start} .quote blockquote{margin:0;font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);line-height:1.35} .quote .who{margin-top:12px;font-size:14px;color:#c9c2ba} @media(max-width:820px){.metrics{grid-template-columns:1fr}} /* ---------- founder ---------- */ .founder{display:grid;grid-template-columns:260px 1fr;grid-template-areas:"pic id" "pic body"; gap:clamp(18px,3vw,32px) clamp(24px,4vw,48px);align-items:center; background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-xl); padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-card)} .founder img{border-radius:var(--r-lg);grid-area:pic} .founder .idblock{grid-area:id;align-self:end} .founder .fbody{grid-area:body;align-self:start} .founder h3{margin:8px 0 12px} .founder .ctarow{margin-top:22px} .founder .elsewhere{margin:12px 0 0;font-size:13.5px;color:var(--ink-muted)} .mailto{display:block;margin-top:5px} .founder .elsewhere a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(194,74,0,.35)} .founder .elsewhere a:hover{text-decoration-color:var(--brand-ink)} .proof .founder .elsewhere{color:#ada69e} .proof .founder .elsewhere a{color:#ff8a3d;text-decoration-color:rgba(255,138,61,.4)} .proof .founder .elsewhere a:hover{text-decoration-color:#ff8a3d} .founder{position:relative} .says{position:absolute;right:-14px;top:-58px;left:auto;width:min(430px,60%);min-height:0;z-index:3} .say{right:0;left:auto;max-width:100%} .say::before{left:auto;right:30px;bottom:-12px} .say::after{left:auto;right:18px;bottom:-28px} @media(max-width:900px){ .says{position:relative;right:auto;top:auto;width:auto;margin:28px 0 0;min-height:210px} .say{position:absolute;left:0;right:auto;top:0;max-width:100%;transform:rotate(-.5deg) translateY(10px) scale(.985)} .say.is-on{transform:rotate(-.5deg)} .say::before{left:30px;right:auto;bottom:-12px} .say::after{left:18px;right:auto;bottom:-28px}} .say{position:absolute;left:0;top:0;margin:0;max-width:640px; /* matte cardstock: flat colour, fine paper fibre, no sheen */ background-color:#f5eee1; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.3 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='0.16'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23m)' opacity='0.05'/%3E%3C/svg%3E"); border:1px solid rgba(23,23,23,.12);border-radius:20px; padding:22px 26px; box-shadow:inset 0 -2px 0 rgba(23,23,23,.05),0 2px 0 rgba(23,23,23,.16),0 8px 16px rgba(0,0,0,.18); transform:rotate(-.5deg) translateY(10px) scale(.985); opacity:0;pointer-events:none; transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)} .say::before,.say::after{content:"";position:absolute;background-color:#f5eee1; border:1px solid rgba(23,23,23,.12);border-radius:50%; box-shadow:0 2px 0 rgba(23,23,23,.12)} .say::before{width:15px;height:15px;left:26px;bottom:-12px} .say::after{width:9px;height:9px;left:14px;bottom:-28px} .say.is-on{opacity:1;transform:rotate(-.5deg) translateY(0);pointer-events:auto} .say blockquote{margin:0;font-family:var(--font-sans);font-size:clamp(16px,1.5vw,18.5px); line-height:1.5;font-weight:500;font-style:italic;color:var(--ink)} .say figcaption{margin-top:12px;font-size:13px;font-weight:600;color:var(--ink)} .say figcaption span{font-weight:500;color:var(--brand-ink)} @media(max-width:700px){.says{min-height:230px}.say{padding:18px 20px}} .founder .creds{margin:0 0 16px;font-size:12.5px;font-weight:600;letter-spacing:.07em; line-height:1.7;text-transform:uppercase;color:var(--ink-muted);max-width:34ch} .proof .founder .creds{color:#ada69e} .proof .founder{background:#211f1e;border-color:rgba(250,247,241,.14);margin-top:clamp(56px,7vw,80px)} .proof .founder h3{color:var(--surface-page)} .proof .founder .lead{color:#c9c2ba} .proof .founder .btn-secondary{background:transparent;color:#faf7f1;border-color:rgba(250,247,241,.26)} .proof .founder .btn-secondary:hover{background:rgba(250,247,241,.06);box-shadow:none} @media(max-width:760px){ .founder{position:relative;grid-template-columns:88px 1fr;grid-template-areas:"pic id" "body body"; text-align:left;padding:20px;gap:14px 16px;align-items:center} .proof .founder{margin-top:118px} .founder img{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 20%;aspect-ratio:1} .founder h3{margin:4px 0 6px} .founder .idblock .creds{margin-bottom:0} .founder .creds{font-size:12px;letter-spacing:.04em;text-transform:none;line-height:1.5;margin-bottom:12px} .founder .lead{font-size:15.5px} .founder .btn{width:100%} .founder .elsewhere{margin-top:14px} .says{position:absolute;top:-98px;left:8px;right:8px;margin:0;min-height:0;z-index:4} .say{position:absolute;left:0;right:0;top:0;max-width:none;opacity:0; transform:rotate(-1.2deg) translateY(8px);transition:opacity .5s ease,transform .5s ease} .say.is-on{opacity:1;transform:rotate(-1.2deg)} .say{padding:16px 18px} .say blockquote{font-size:16px;line-height:1.5} .say figcaption{margin-top:8px;font-size:12.5px} } /* ---------- closing ---------- */ .closing{background:var(--surface-brand-soft);text-align:center} .closing h2{max-width:none;margin:0 auto 16px;text-wrap:balance} .secondroute{margin-top:22px;font-size:15px;color:var(--ink-copy)} .secondroute a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(194,74,0,.35)} .secondroute a:hover{text-decoration-color:var(--brand-ink)} /* ---------- footer ---------- */ footer{background:var(--ink);color:#c9c2ba;padding:clamp(72px,9vw,104px) 0 48px;font-size:15px} footer a{color:#c9c2ba;text-decoration:none} footer a:hover{color:#fff} .f-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-bottom:56px} .f-brand{display:flex;align-items:center;gap:12px;color:#faf7f1;font-weight:700;letter-spacing:.06em;font-size:14px} .f-brand img{width:34px;height:34px} .f-brand span small{display:block;font-weight:500;letter-spacing:.04em;color:#8d8781;font-size:11px;margin-top:3px} .f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px} .f-grid h4{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8d8781;font-family:var(--font-sans);font-weight:600} .f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .f-grid a{display:inline-flex;align-items:center;gap:9px} .ic{width:16px;height:16px;flex:none;opacity:.75} .f-grid a:hover .ic{opacity:1} .legal{margin-top:56px;padding-top:22px;border-top:1px solid rgba(250,247,241,.14); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#8d8781} @media(max-width:820px){.f-grid{grid-template-columns:repeat(2,1fr)}} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(16px)} .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)} @media(prefers-reduced-motion:reduce){ .reveal,.reveal.in{opacity:1;transform:none;transition:none} .hero-zoom{animation:none !important;transform:none} .panel.fade{animation:none} .tape-track{animation:none;justify-content:center;width:100%;padding-left:0;flex-wrap:wrap} .says{min-height:0} .say{position:static;opacity:1;transform:none;margin-bottom:14px;transition:none} html{scroll-behavior:auto} } /* phones: once the menu button fills in, the name slides down out of view and gives the button room */ .nav-logo span{display:inline-block;overflow:hidden;white-space:nowrap;max-width:160px; transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .3s ease,transform .45s cubic-bezier(.4,0,.2,1)} @media(max-width:860px){ .past-hero .nav-logo{gap:0} .past-hero .nav-logo span{max-width:0;opacity:0;transform:translateY(14px)} .nav-logo{transition:gap .45s ease} } @media(prefers-reduced-motion:reduce){.nav-logo span,.nav-logo{transition:none}} .nav .nav-cta{white-space:nowrap} @media(max-width:360px){.nav .nav-cta{padding-left:12px;padding-right:12px;font-size:13px}} /* case studies: hero illustration, and cards that arrive as you scroll */ .c-art{width:100%;margin:0;padding:0;line-height:0;background:#f9ead8} .page-head{background:#f9ead8} /* the intro shares the illustration's cream */ .c-art img{display:block;width:min(1240px,100%);margin:0 auto;height:auto;aspect-ratio:1672/941;object-fit:cover} .c-art + #all{margin-top:clamp(-56px,-4vw,-32px);position:relative;z-index:2} .cases-top{background:#f9ead8} @media(max-width:820px){.c-art img{aspect-ratio:4/5}.c-art + #all{margin-top:-24px}}