:root{ --paper:#FFFFFF; --cream:#F2EAD4; --ink:#282820; --ink-72:rgba(40,40,32,.72); --ink-56:rgba(40,40,32,.56); --white-74:rgba(255,255,255,.74); --white-58:rgba(255,255,255,.58); --pad:clamp(18px,2.2vw,42px); --max:1920px; --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.22,1,.36,1); --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; --canvas:var(--paper); --charcoal:var(--ink); --ink-04:rgba(40,40,32,.04); --ink-08:rgba(40,40,32,.08); --ink-30:rgba(40,40,32,.30); --menu-wipe-height:100vh; } @supports (height:100dvh){:root{--menu-wipe-height:100dvh}} *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--paper)} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; overflow-x:hidden; } html.menu-open, body.menu-open{overflow:hidden;overscroll-behavior:none} body.menu-open{ position:fixed; top:var(--menu-scroll-lock-y,0px); right:0; left:0; width:100%; } body.menu-open .nav{position:fixed!important} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit} html,body,a,button,input,select,textarea{-webkit-tap-highlight-color:transparent} a,button,[role="button"]{touch-action:manipulation} button{-webkit-appearance:none;appearance:none} body.modal-open{overscroll-behavior:none} img,video{display:block;max-width:100%} h1,h2,h3,p,figure{margin:0} ::selection{background:var(--cream);color:var(--ink)} :focus-visible{outline:2px solid currentColor;outline-offset:5px} .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 } .shell{width:min(100%,var(--max));margin-inline:auto;padding-inline:var(--pad)} .display{letter-spacing:-.055em;line-height:.88;font-weight:500;text-wrap:balance} .body{ font-size:clamp(18px,1.45vw,25px); line-height:1.46; letter-spacing:-.022em; max-width:34ch; color:var(--ink-72); } .body.on-dark{color:var(--white-74)} /* Legacy opening choreography, preserved exactly in timing while keeping the new visual system. */ .hero-pop,.hero-token,.hero-copy-word{ display:inline-block;opacity:0;transform:translate3d(0,26px,0);filter:blur(6px); animation:heroWordIn 720ms cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--hero-d,0ms); will-change:transform,opacity,filter; } .hero-copy-word{transform:translate3d(0,18px,0);filter:blur(4px);animation-duration:430ms;color:inherit;-webkit-background-clip:text;background-clip:text} .hero-line{display:block} .hero-goal{--hero-d:340ms} .hero-walk{--hero-d:680ms} .hero-away{--hero-d:920ms} @keyframes heroWordIn{ 0%{opacity:0;transform:translate3d(0,28px,0);filter:blur(8px)} 65%{opacity:1;filter:blur(0)} 100%{opacity:1;transform:translate3d(0,0,0);filter:blur(0)} } /* The same reveal grammar reused intelligently after the hero. */ .stagger-piece,.stagger-copy-word{display:inline-block;opacity:0;transform:translate3d(0,24px,0);filter:blur(6px);will-change:transform,opacity,filter} .stagger-copy-word{transform:translate3d(0,16px,0);filter:blur(4px)} .stagger-reveal.is-visible .stagger-piece{animation:heroWordIn 520ms cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--stagger-d,0ms)} .stagger-reveal.is-visible .stagger-copy-word{animation:heroWordIn 430ms cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--stagger-d,0ms)} /* Atmospheric navbar veil: no white wash; the blur wakes only after the opening composition has begun to leave. */ .nav{ position:fixed; inset:0 0 auto 0; height:82px; z-index:100; color:var(--ink); pointer-events:none; isolation:isolate; transition:color 240ms ease; --nav-veil-opacity:0; } .nav::before{ content:""; position:absolute; z-index:-1; inset:0 0 -14px; background:transparent; -webkit-backdrop-filter:blur(13px) saturate(106%); backdrop-filter:blur(13px) saturate(106%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.58) 72%,rgba(0,0,0,.14) 90%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.58) 72%,rgba(0,0,0,.14) 90%,transparent 100%); opacity:var(--nav-veil-opacity); transition:opacity 110ms linear; pointer-events:none; } .nav.is-dark{color:#fff} .nav.is-dark .brand img{filter:invert(1) brightness(1.08)} .nav__inner{ position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:space-between; pointer-events:auto; } /* The menu header is a complete, self-contained visual state. It wipes over the adaptive header as one opaque layer, so surface, logo and close glyph can never land on different compositor frames. */ .nav__menu-chrome{ position:absolute; z-index:2; inset:0 0 auto 0; display:none; height:calc(var(--nav-height,82px) + var(--nav-overhang,0px) + var(--nav-veil-tail,14px)); overflow:hidden; color:var(--ink); background:#fff; pointer-events:none; clip-path:inset(0 0 100% 0); transition:clip-path 560ms var(--ease); will-change:clip-path; contain:paint; transform:translateZ(0); } .nav.is-menu-active .nav__menu-chrome{clip-path:inset(0 0 calc(100% - var(--menu-wipe-height)) 0)} .nav__menu-chrome-inner{ height:var(--nav-height,82px); display:flex; align-items:center; justify-content:space-between; } .nav__menu-brand img{filter:none!important} .nav__menu-close .menu-button__lines i{transition:none!important} .nav__menu-close .menu-button__lines i:nth-child(1){top:10px;width:28px;transform:rotate(45deg)} .nav__menu-close .menu-button__lines i:nth-child(2){top:10px;width:28px;opacity:0} .nav__menu-close .menu-button__lines i:nth-child(3){top:10px;width:28px;transform:rotate(-45deg)} .brand{display:inline-flex;align-items:center;width:clamp(126px,9vw,158px);height:42px} .brand img{width:100%;height:auto;filter:none} .nav__links{display:flex;align-items:center;gap:clamp(22px,2.3vw,42px);font-size:15px;letter-spacing:-.02em} .nav__links a{opacity:.66;transition:opacity 220ms ease} .nav__links a:hover,.nav__links a:focus-visible{opacity:1} .menu-button{ display:none; width:46px; height:46px; border:0; color:inherit; background:transparent; padding:9px 0 9px 14px; cursor:pointer; position:relative; } .menu-button__lines{width:30px;height:23px;display:block;position:relative} .menu-button__lines i{ position:absolute;right:0;height:1.5px;background:currentColor;display:block; transition:transform 300ms var(--ease),top 300ms var(--ease),width 300ms var(--ease),opacity 180ms ease; } .menu-button__lines i:nth-child(1){top:1px;width:17px} .menu-button__lines i:nth-child(2){top:10px;width:29px} .menu-button__lines i:nth-child(3){top:19px;width:23px} .menu-button[aria-expanded="true"] .menu-button__lines i:nth-child(1){top:10px;width:28px;transform:rotate(45deg)} .menu-button[aria-expanded="true"] .menu-button__lines i:nth-child(2){opacity:0} .menu-button[aria-expanded="true"] .menu-button__lines i:nth-child(3){top:10px;width:28px;transform:rotate(-45deg)} /* hero */ .hero{ min-height:100svh; background:#F7F1E7; position:relative; display:flex; align-items:stretch; overflow:hidden; isolation:isolate; } .hero__art{ position:absolute; inset:0; z-index:0; pointer-events:none; user-select:none; } .hero__art img{width:100%;height:100%;object-fit:fill;object-position:center} .hero__art source{display:none} .hero__inner{ position:relative; z-index:1; min-height:100svh; padding-top:clamp(152px,19vh,190px); padding-bottom:clamp(54px,7.5vh,78px); display:grid; grid-template-rows:auto 1fr auto; } .hero__name{font-size:clamp(92px,15.2vw,286px);white-space:nowrap;align-self:start} .hero__name sup{ font-size:.18em;letter-spacing:-.03em;vertical-align:top;position:relative;top:.22em;margin-left:.12em;font-weight:500 } .hero__bottom{ align-self:end; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.55fr); gap:clamp(48px,8vw,150px); align-items:end; } .hero__promise{font-size:clamp(46px,6.35vw,118px);max-width:10ch} .hero__promise--mobile{display:none} .hero__copy{padding-bottom:.55em;position:relative;z-index:3} .hero__copy .body{font-size:clamp(18px,1.5vw,26px);color:var(--ink-72);mix-blend-mode:normal} /* dark execution */ .execution{ min-height:100svh;background:var(--ink);color:var(--paper);position:relative;overflow:hidden } .execution__inner{ min-height:100svh;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:3vw; padding-top:92px;padding-bottom:72px } .execution__copy{position:relative;z-index:2;align-self:center} .execution__title{font-size:clamp(64px,7.6vw,142px);max-width:8.8ch} .execution__copy .body{margin-top:clamp(32px,4vh,52px)} .execution__media{position:absolute;z-index:1;inset:1% -5% 0 23%;display:flex;align-items:center;justify-content:center;pointer-events:none} .execution__media img{width:100%;height:100%;object-fit:contain;object-position:center} .execution__ghost{position:absolute;right:var(--pad);bottom:clamp(28px,4vw,58px);font-size:clamp(44px,7.5vw,142px);letter-spacing:-.06em;line-height:.86;font-weight:500;color:rgba(255,255,255,.055);user-select:none} /* THE WORK KEEPS MOVING: sticky visual sequence; supplied artwork is used at its authored framing, never zoomed. */ .work-motion{height:360svh;min-height:2200px;background:var(--paper);position:relative} .work-motion__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center} .work-motion__layout{ width:100%;height:100%;display:grid;grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr); align-items:center;gap:clamp(38px,5vw,92px);padding-top:94px;padding-bottom:44px } .work-motion__text{ font-size:clamp(58px,min(8.6vw,18svh),162px);max-width:6.2ch;letter-spacing:-.068em;line-height:.80;font-weight:500;text-transform:uppercase; position:relative;z-index:3 } .work-motion__word{display:inline-block} .work-motion__media{position:relative;width:100%;aspect-ratio:1672/941;max-height:74svh;pointer-events:none} .work-motion__panel{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;overflow:hidden; border-radius:clamp(20px,2vw,34px); transform:translate3d(0,1.5%,0) scale(.992); transition:opacity 520ms var(--ease),transform 680ms var(--ease);will-change:opacity,transform } .work-motion__panel.is-current{opacity:1;transform:none} .work-motion__panel img{ width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:inherit; box-shadow:0 18px 48px rgba(40,40,32,.08) } /* film — player styling transplanted from the supplied video-player.html */ .film{background:var(--paper);padding:13vh 0 14vh} .film__title{font-size:clamp(58px,8.5vw,160px);max-width:none;margin:0 auto clamp(44px,7vh,92px);text-align:center;white-space:nowrap} .video{ position:relative;margin-inline:auto;width:100%;max-width:1040px;border-radius:clamp(20px,2.6vw,40px); overflow:hidden;background:#d8d8d4;aspect-ratio:16/9;box-shadow:0 60px 120px -40px var(--ink-30);--video-progress:0% } .video video{width:100%;height:100%;object-fit:cover} @keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}} .video__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border:0;border-radius:0;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:3;filter:drop-shadow(0 2px 9px rgba(0,0,0,.5));padding:0} .video__play svg{width:34px;height:34px;margin-left:3px}.video__play .pause-icon{margin-left:0} .video.is-playing .video__play{opacity:0;transform:scale(.8);pointer-events:none} .video.is-ui-visible .video__play{opacity:1;transform:scale(1);pointer-events:auto} .video.ui-dismissed:not(.is-ui-visible) .video__play{opacity:0;transform:scale(.82);pointer-events:none} @media(hover:hover){.video:hover .video__play{opacity:1;transform:scale(1);pointer-events:auto}.video.is-playing:hover .video__play{opacity:1;transform:scale(1);pointer-events:auto}} .video__play .pause-icon{display:none}.video.is-playing .video__play .play-icon{display:none}.video.is-playing .video__play .pause-icon{display:block} .video__controls{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:28px 22px 18px;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);color:#fff;pointer-events:none} .video.is-ui-visible .video__controls{opacity:1;transform:translateY(0);pointer-events:auto} .video__timeline{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:99px;background:rgba(255,255,255,.28);cursor:pointer;margin-bottom:14px;touch-action:none} .video__timeline::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)} .video__timeline::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0} .video__row{display:flex;align-items:center;justify-content:space-between;gap:16px}.video__time{font-size:13px;font-variant-numeric:tabular-nums;opacity:.85} .video__actions{display:flex;align-items:center;gap:14px}.video__action{width:30px;height:30px;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .25s;background:none;border:0;cursor:pointer;color:inherit} .video__action:hover{opacity:1}.video__action svg{width:19px;height:19px;fill:currentColor}.video__vol-off{display:none}.video.is-muted .video__vol-on{display:none}.video.is-muted .video__vol-off{display:block} .video__speed select{background:rgba(255,255,255,.12);border-radius:8px;padding:4px 8px;font-size:12px;color:#fff;border:0}.video__speed select option{color:#111} .video.reveal{transform:translateY(12px) scale(.996);transition:opacity 760ms var(--ease-soft),transform 900ms var(--ease-soft)} .video.reveal.in{transform:none} .video:fullscreen,.video.is-fullscreen,.video:-webkit-full-screen{width:100vw!important;height:100vh!important;max-width:none!important;aspect-ratio:auto!important;border-radius:0!important;background:#000!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important} .video:fullscreen video,.video.is-fullscreen video,.video:-webkit-full-screen video{width:100%!important;height:100%!important;object-fit:contain!important;background:#000!important} .video:fullscreen .video__controls,.video.is-fullscreen .video__controls,.video:-webkit-full-screen .video__controls{padding-bottom:max(18px,env(safe-area-inset-bottom))} /* long horizon */ .continuity{background:var(--cream);position:relative} .continuity__intro{min-height:100svh;display:flex;align-items:center;padding-top:14vh;padding-bottom:10vh} .continuity__intro h2{font-size:clamp(64px,8.9vw,166px);width:100%;line-height:.78;letter-spacing:-.064em;font-weight:500;display:flex;flex-direction:column;gap:clamp(34px,5.4vh,70px)} .continuity__line{display:block;width:max-content;max-width:100%} .continuity__line:nth-child(1){margin-left:0} .continuity__line:nth-child(2){margin-left:29vw} .continuity__line:nth-child(3){margin-left:auto;text-align:right;padding-right:.04em} /* Route / Continue / Verify: copy scrolls, media is truly fixed in the second grid column. */ .story{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);position:relative;align-items:start} .story__steps{grid-column:1;grid-row:1;position:relative;z-index:2} .story__step{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-right:6vw} .story__step h3{font-size:clamp(76px,9.9vw,186px);line-height:.84;letter-spacing:-.064em;font-weight:500} .story__step p{margin-top:clamp(28px,4vh,50px);max-width:28ch;font-size:clamp(19px,1.5vw,26px);line-height:1.45;letter-spacing:-.022em;color:var(--ink-72)} .story__sticky{grid-column:2;grid-row:1;position:sticky;top:0;height:100svh;align-self:start;pointer-events:none;overflow:hidden} .story__media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .story__media figure{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.985);filter:blur(7px);transition:opacity 520ms var(--ease),transform 700ms var(--ease),filter 520ms var(--ease)} .story__media figure.is-active{opacity:1;transform:none;filter:none} .story__media img{width:106%;height:auto;max-width:none;max-height:88svh;object-fit:contain;object-position:center;background:var(--cream)} .story__inline{display:none} .continuity-mobile{display:none} /* research */ .notes{background:var(--paper);padding:16vh 0 18vh} .notes__grid{display:grid;grid-template-columns:minmax(270px,.45fr) minmax(0,1.55fr);gap:clamp(26px,4vw,74px);align-items:start} .notes__masthead{position:sticky;top:112px;padding-top:.04em;font-size:clamp(68px,7.55vw,142px);line-height:.78;letter-spacing:-.068em;font-weight:500;text-transform:uppercase} .notes__masthead span{display:block;white-space:nowrap} .notes__content{min-width:0;margin-left:calc(-1.35vw + 10px)} .note-feature{display:block} .note-feature__visual{aspect-ratio:1672/941;background:var(--paper);overflow:hidden;margin-bottom:clamp(26px,3vw,44px)} .note-feature__visual img{width:100%;height:100%;object-fit:contain;object-position:center} .note-feature h3{font-size:clamp(42px,5.4vw,102px);line-height:.92;letter-spacing:-.052em;font-weight:500;max-width:9ch} .note-feature p{margin-top:24px;max-width:52ch;font-size:clamp(17px,1.25vw,22px);line-height:1.5;letter-spacing:-.018em;color:var(--ink-72)} .note-feature__meta{margin-top:26px;display:flex;justify-content:space-between;gap:20px;font-size:14px;color:var(--ink-56)} .note-list{margin-top:clamp(62px,8vh,118px)} .note-link{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:clamp(26px,3vw,44px) 0;border-top:1px solid rgba(40,40,32,.14)} .note-link:last-child{border-bottom:1px solid rgba(40,40,32,.14)} .note-link h3{font-size:clamp(26px,3.2vw,58px);line-height:.98;letter-spacing:-.045em;font-weight:500;max-width:14ch} .note-feature h3,.note-link h3{transition:color 260ms var(--ease)} .note-feature:hover h3,.note-feature:focus-visible h3,.note-link:hover h3,.note-link:focus-visible h3{color:color-mix(in srgb,var(--ink) 58%,var(--cream) 42%)} .note-link span{font-size:28px;transition:transform 220ms var(--ease),color 260ms var(--ease)} .note-link:hover span,.note-link:focus-visible span{transform:translate(4px,-4px);color:color-mix(in srgb,var(--ink) 58%,var(--cream) 42%)} /* final */ .final{min-height:100svh;background:var(--ink);color:var(--paper);display:grid;grid-template-rows:1fr auto} .final__center{display:grid;place-items:center;text-align:center;padding:16vh var(--pad) 9vh} .final__center h2{font-size:clamp(56px,8.4vw,160px);max-width:10ch;line-height:.9;letter-spacing:-.058em;font-weight:500} .final__actions{margin-top:clamp(42px,6vh,72px);display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap} .primary{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 32px;border-radius:999px;background:var(--cream);color:var(--ink);font-size:18px;font-weight:600;letter-spacing:-.025em;transition:transform 220ms var(--ease)} .primary:hover{transform:translateY(-2px)} .quiet-link{font-size:18px;color:var(--white-74);transition:color 220ms ease} .quiet-link:hover{color:var(--paper)} .footer{padding:26px var(--pad) 30px;width:min(100%,var(--max));margin-inline:auto;display:flex;justify-content:space-between;gap:24px;font-size:14px;color:var(--white-58)} .footer__links{display:flex;gap:28px} /* Modal layer — compact editorial sheets. The backdrop remains composited while closed so blur begins on frame one. */ .modal-layer{position:fixed;z-index:180;inset:0;display:grid;place-items:center;padding:clamp(14px,2.2vw,24px);pointer-events:none;isolation:isolate} .modal-layer.is-open{pointer-events:auto} .modal-layer__backdrop{position:absolute;inset:0;background:rgba(40,40,32,.28);-webkit-backdrop-filter:blur(16px) saturate(88%);backdrop-filter:blur(16px) saturate(88%);opacity:.001;transition:opacity 300ms cubic-bezier(.22,1,.36,1);will-change:opacity,backdrop-filter;transform:translateZ(0)} .modal-layer.is-open .modal-layer__backdrop{opacity:1} .modal{position:relative;visibility:hidden;overflow:hidden;background:rgba(252,250,245,.985);border-radius:clamp(28px,2.6vw,38px);padding:clamp(34px,3.6vw,46px) clamp(30px,3.6vw,44px) clamp(30px,3.2vw,40px);box-shadow:0 30px 90px rgba(40,40,32,.18);transform:translateY(16px) scale(.992);opacity:0;transition:transform 440ms var(--ease),opacity 280ms ease,visibility 0s linear 440ms;overscroll-behavior:none;will-change:transform,opacity} .modal-layer[data-modal="early"] .modal{width:min(620px,calc(100vw - 40px))} .modal-layer[data-modal="direct"] .modal{width:min(600px,calc(100vw - 40px))} @media(min-width:761px){.modal-layer[data-modal="direct"] .modal__title{max-width:none;white-space:nowrap;font-size:clamp(44px,3.35vw,56px)}} .modal-layer.is-open .modal{visibility:visible;transform:none;opacity:1;transition-delay:0s} .modal__close{position:absolute;right:clamp(14px,1.8vw,20px);top:clamp(14px,1.8vw,20px);width:48px;height:48px;border:0;border-radius:50%;background:rgba(40,40,32,.045);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background 220ms ease,transform 260ms var(--ease)} .modal__close:hover{background:rgba(40,40,32,.08);transform:rotate(3deg)} .modal__close::before,.modal__close::after{content:"";position:absolute;width:18px;height:1.5px;background:currentColor} .modal__close::before{transform:rotate(45deg)}.modal__close::after{transform:rotate(-45deg)} .modal__eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.12em;font-weight:700;color:var(--ink-56)} .modal__title{margin-top:clamp(17px,2.2vh,23px);font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,3.7vw,60px);line-height:.92;letter-spacing:-.055em;font-weight:400;max-width:11ch} .modal__body{margin-top:clamp(19px,2.4vh,24px);font-size:clamp(16px,1.05vw,19px);line-height:1.45;letter-spacing:-.022em;color:var(--ink-72);max-width:40ch} .modal__body p+p{margin-top:13px} .modal__email{display:block;margin-top:20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.01em;color:var(--ink-56)} .modal__action{margin-top:clamp(18px,2.4vh,24px);display:inline-flex;min-height:52px;align-items:center;justify-content:center;padding:0 27px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:650;letter-spacing:-.025em;transition:transform 240ms var(--ease),background 220ms ease} .modal__action:hover{transform:translateY(-2px);background:#1d1d18} @media(max-width:760px){ .modal-layer{padding:12px} .modal-layer[data-modal="early"] .modal{width:min(100%,500px)} .modal-layer[data-modal="direct"] .modal{width:min(100%,470px)} .modal{border-radius:28px;padding:29px 23px 25px} .modal__close{width:44px;height:44px;right:12px;top:12px} .modal__eyebrow{font-size:10.5px}.modal__title{font-size:clamp(38px,10vw,50px);margin-top:15px;line-height:.93}.modal__body{font-size:clamp(14.5px,3.7vw,17px);margin-top:17px;line-height:1.4;max-width:36ch}.modal__body p+p{margin-top:11px}.modal__email{margin-top:16px;font-size:12.5px}.modal__action{min-height:50px;padding:0 23px;margin-top:18px;font-size:14.5px} } @media(max-height:650px){ .modal{padding-top:22px;padding-bottom:20px}.modal__close{width:40px;height:40px}.modal__title{margin-top:10px;font-size:clamp(34px,8.1vh,44px)}.modal__body{margin-top:13px;font-size:clamp(13.5px,2.6vh,16px);line-height:1.34}.modal__body p+p{margin-top:8px}.modal__email{margin-top:12px}.modal__action{margin-top:13px;min-height:46px} } [data-optional-image].is-missing{display:none} .reveal{opacity:0;transform:translateY(18px);transition:opacity 640ms var(--ease),transform 760ms var(--ease)} .reveal.in{opacity:1;transform:none} .mobile-menu{ position:fixed;z-index:95;inset:0;background:#fff;color:var(--ink);display:flex;padding:118px var(--pad) 42px; isolation:isolate; overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y; visibility:hidden;pointer-events:none;clip-path:inset(0 0 100% 0); transition:clip-path 560ms var(--ease),visibility 0s linear 560ms } .mobile-menu.is-open{visibility:visible;pointer-events:auto;clip-path:inset(0 0 calc(100% - var(--menu-wipe-height)) 0);transition-delay:0s} .mobile-menu__links{margin:auto 0;display:flex;flex-direction:column;gap:14px;transform:translateY(-1.5vh)} .mobile-menu__links a{font-size:clamp(54px,14vw,92px);line-height:.93;letter-spacing:-.055em;font-weight:500;opacity:0;transform:translateY(24px);transition:opacity 360ms var(--ease),transform 480ms var(--ease)} .mobile-menu.is-open .mobile-menu__links a{opacity:1;transform:none} .mobile-menu.is-open .mobile-menu__links a:nth-child(1){transition-delay:120ms} .mobile-menu.is-open .mobile-menu__links a:nth-child(2){transition-delay:165ms} .mobile-menu.is-open .mobile-menu__links a:nth-child(3){transition-delay:210ms} .mobile-menu.is-open .mobile-menu__links a:nth-child(4){transition-delay:255ms} @media (max-width:1100px){ .work-motion__layout{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:36px} .story{grid-template-columns:44% 56%} .story__step{padding-right:4vw} .story__media img{width:110%} .notes__content{margin-left:calc(-.7vw + 8px)} } @media (max-width:760px){ .hero-goal{--hero-d:320ms}.hero-walk{--hero-d:620ms}.hero-away{--hero-d:840ms} .nav{height:84px}.nav::before{inset:0 0 -12px}.nav__links{display:none}.menu-button{display:block}.brand{width:clamp(142px,21vw,180px);height:48px} .nav__menu-chrome{display:block} .hero__inner{display:block;padding:0;min-height:100svh} .hero__art{inset:0;overflow:hidden} .hero__art img{position:absolute;width:auto;max-width:none;height:100svh;right:0;left:auto;top:0;object-fit:contain;object-position:center right;transform:none;transform-origin:center} .hero__name{position:absolute;left:4vw;top:14.6svh;font-size:clamp(126px,37.5vw,300px);white-space:nowrap;line-height:.82} .hero__name sup{top:.08em;margin-left:.08em;font-size:.17em} .hero__bottom{display:block} .hero__promise{position:absolute;left:5.2vw;top:39.2svh;font-size:clamp(55px,9.9vw,84px);line-height:.89;max-width:none} .hero__promise--desktop{display:none}.hero__promise--mobile{display:block} .hero__copy{position:absolute;right:4vw;bottom:2.5svh;width:38vw;padding:0} .hero__copy .body{font-size:clamp(12.5px,2.78vw,16px);line-height:1.45;max-width:none} .execution__inner{grid-template-columns:1fr;align-items:flex-start;padding-top:18vh}.execution__title{font-size:clamp(66px,17vw,112px);max-width:7ch}.execution__copy .body{max-width:28ch}.execution__media{inset:49% -18% 1% -8%;opacity:.96}.execution__ghost{display:none} .work-motion{height:330svh;min-height:1800px} .work-motion__layout{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:clamp(18px,3svh,28px);padding-top:96px;padding-bottom:5svh} .work-motion__text{font-size:clamp(48px,12.4vw,78px);max-width:none;width:100%;line-height:.76} .work-motion__text br{display:none} .work-motion__word{display:block;width:max-content} .work-motion__word:nth-of-type(1){margin-left:0} .work-motion__word:nth-of-type(2){margin-left:10vw} .work-motion__word:nth-of-type(3){margin-left:22vw} .work-motion__word:nth-of-type(4){margin-left:auto;text-align:right} .work-motion__media{width:100%;height:auto;min-height:0;aspect-ratio:1672/941;transform:none} .work-motion__panel img{width:100%;height:auto;max-height:100%;object-fit:contain} .film{padding-top:12svh}.film__title{font-size:clamp(40px,11.8vw,84px);text-align:center;white-space:nowrap} .video{width:94%;border-radius:clamp(20px,5vw,30px)} .video__controls{padding:24px 14px 14px}.video__actions{gap:8px}.video__time{font-size:12px}.video__speed select{padding:4px 6px} .continuity__desktop{display:none} .continuity-mobile{display:block;height:430svh;position:relative;background:var(--cream)} .continuity-mobile__sticky{position:sticky;top:0;height:100svh;overflow:hidden} .continuity-mobile__scene{position:absolute;inset:0;padding:clamp(96px,13.5svh,126px) var(--pad) clamp(22px,4svh,34px);display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translate3d(0,18px,0);filter:blur(6px);transition:opacity 520ms var(--ease),transform 620ms var(--ease),filter 520ms var(--ease),visibility 0s linear 620ms} .continuity-mobile__scene.is-active{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s} .continuity-mobile__intro h2{font-size:clamp(50px,12.7vw,78px);line-height:.79;letter-spacing:-.064em;font-weight:500;display:flex;flex-direction:column;gap:clamp(34px,7svh,58px);width:100%} .continuity-mobile__intro .continuity__line:nth-child(2){margin-left:13vw}.continuity-mobile__intro .continuity__line:nth-child(3){margin-left:auto;text-align:right} .continuity-mobile__step{justify-content:flex-start} .continuity-mobile__copy h3{font-size:clamp(58px,15vw,90px);line-height:.84;letter-spacing:-.064em;font-weight:500} .continuity-mobile__copy p{margin-top:clamp(18px,2.8svh,26px);font-size:clamp(16px,3.9vw,20px);line-height:1.4;letter-spacing:-.022em;color:var(--ink-72);max-width:29ch} .continuity-mobile__figure{margin-top:clamp(16px,2.6svh,24px);flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:visible} .continuity-mobile__figure img{display:block;width:120%;max-width:none;height:auto;max-height:52svh;object-fit:contain;background:var(--cream);margin-inline:-10%} .notes__grid{grid-template-columns:1fr;gap:54px}.notes__masthead{position:static;padding-top:0;font-size:clamp(68px,19vw,128px)}.notes__content{margin-left:0} .final__center h2{font-size:clamp(54px,14.5vw,98px)}.footer{flex-direction:column} } @media (max-width:560px){ .nav{height:76px}.brand{width:clamp(132px,25vw,156px)} .hero__art img{height:100svh;top:0;right:0} .hero__name{top:15.2svh;font-size:36.5vw} .hero__promise{top:39.8svh;font-size:9.65vw;left:5vw} .hero__copy{width:38vw;right:4vw;bottom:2.3svh}.hero__copy .body{font-size:clamp(13px,2.9vw,16px);line-height:1.46} .execution__media{inset:52% -25% 2% -15%;opacity:.94} .note-feature__meta{flex-direction:column;gap:6px}.footer__links{flex-wrap:wrap;gap:16px 24px} } @media (max-width:760px) and (max-height:790px){ .hero__name{top:15.5svh;font-size:31.3vw;line-height:.80} .hero__promise{top:40.2svh;font-size:8.75vw;line-height:.91;left:5vw} .hero__copy{right:4vw;bottom:2.1svh;width:38vw}.hero__copy .body{font-size:clamp(13px,2.85vw,16px);line-height:1.44} .execution__inner{padding-top:14.5svh;padding-bottom:4svh}.execution__copy{align-self:start}.execution__title{font-size:clamp(54px,13.6vw,84px);line-height:.86;max-width:7.2ch}.execution__copy .body{margin-top:3svh;font-size:clamp(15px,3.45vw,19px);line-height:1.4;max-width:28ch}.execution__media{inset:65% -3% 1.5% 38%;opacity:.96} .work-motion__layout{padding-top:84px;padding-bottom:3.8svh;gap:2.2svh}.work-motion__text{font-size:clamp(43px,11.4vw,67px);line-height:.75}.work-motion__media{aspect-ratio:1672/941} .continuity-mobile__scene{padding-top:clamp(82px,12.5svh,96px);padding-bottom:18px} .continuity-mobile__intro h2{font-size:clamp(44px,11.4vw,65px);gap:clamp(28px,6.1svh,40px)} .continuity-mobile__copy h3{font-size:clamp(52px,13.4vw,74px)} .continuity-mobile__copy p{margin-top:2.2svh;font-size:clamp(15px,3.55vw,18px);line-height:1.36;max-width:29ch} .continuity-mobile__figure{margin-top:2.1svh}.continuity-mobile__figure img{width:116%;margin-inline:-8%;max-height:47svh} } @media (min-width:561px) and (max-width:760px) and (max-height:790px){ .hero__art img{height:100svh;right:0;top:0;object-position:center right} } /* Short landscape phones/tablets need a different hero composition: preserve hierarchy and reserve a clean copy zone. */ @media (max-width:760px) and (orientation:landscape){ .hero__art img{height:78svh;right:0;top:3svh;object-position:center right} .hero__name{left:4vw;top:16svh;font-size:24vw;line-height:.80} .hero__promise{left:5vw;top:50svh;font-size:5.4vw;line-height:.91} .hero__copy{right:4vw;bottom:3svh;width:31vw} .hero__copy .body{font-size:clamp(11px,1.75vw,14px);line-height:1.4} } /* Near-square short screens get the same protected composition before they become technically landscape. */ @media (max-width:760px) and (max-height:650px) and (min-aspect-ratio:9/10){ .hero__art img{height:76svh;right:0;top:3svh} .hero__name{left:4vw;top:16svh;font-size:24vw;line-height:.80} .hero__promise{left:5vw;top:50svh;font-size:5.4vw;line-height:.91} .hero__copy{right:4vw;bottom:3svh;width:31vw} .hero__copy .body{font-size:clamp(11px,1.75vw,14px);line-height:1.4} } /* Tablet-like portrait mobile layouts: use the wide desktop artwork instead of the tall phone art. This keeps the brush fully resolved rather than ending in a visible rectangular cutoff. */ @media (min-width:600px) and (max-width:679px) and (orientation:portrait){ .hero__art img{ width:96vw;height:auto;max-width:none;max-height:none; right:0;left:auto;top:30svh; object-fit:contain;object-position:top right; } .hero__promise{left:5vw;top:37.5svh;font-size:clamp(60px,10vw,68px);line-height:.89} .hero__copy{right:4vw;bottom:2.6svh;width:41vw} .hero__copy .body{font-size:17px;line-height:1.43} } @media (min-width:680px) and (max-width:729px) and (orientation:portrait){ .hero__art img{ width:90vw;height:auto;max-width:none;max-height:none; right:0;left:auto;top:30svh; object-fit:contain;object-position:top right; } .hero__promise{left:5vw;top:39.5svh;font-size:clamp(66px,9.8vw,72px);line-height:.89} .hero__copy{right:4vw;bottom:2.6svh;width:40vw} .hero__copy .body{font-size:17.5px;line-height:1.43} } @media (min-width:730px) and (max-width:760px) and (orientation:portrait){ .hero__art img{ width:90vw;height:auto;max-width:none;max-height:none; right:0;left:auto;top:30svh; object-fit:contain;object-position:top right; } .hero__promise{left:5vw;top:42.5svh;font-size:clamp(70px,9.7vw,74px);line-height:.89} .hero__copy{right:4vw;bottom:2.6svh;width:40vw} .hero__copy .body{font-size:18px;line-height:1.43} } /* Preserve the existing normal-phone treatment exactly. */ @media (max-width:560px) and (max-height:650px) and (min-aspect-ratio:9/10) and (orientation:portrait){ .hero__art img{width:auto;height:97svh;max-width:none;max-height:none;right:0;top:3svh;object-fit:contain;object-position:top right} } /* 561–599px near-square / short tablet-like layouts: switch to the wide desktop artwork. Keep the right edge fixed, scale from the bottom edge, and avoid the mobile art's visible bottom cutoff. */ @media (min-width:561px) and (max-width:599px) and (min-aspect-ratio:9/10){ .hero__art{inset:0;overflow:hidden} .hero__art img{width:115vw;height:auto;max-width:none;max-height:none;right:0;left:auto;top:auto;bottom:0;object-fit:contain;object-position:bottom right} .hero__promise{left:5vw;top:42.5svh;font-size:6.35vw;line-height:.9} .hero__copy{right:4vw;bottom:3svh;width:32vw} .hero__copy .body{font-size:13px;line-height:1.4} } /* V8.8: one continuous tablet/compact-desktop hero regime — no width holes. Every viewport from 502px through the desktop breakpoint uses the transparent desktop artwork. It is always anchored to the exact right + bottom edges, and its scale is derived continuously from BOTH viewport width and height instead of hand-fixing individual widths. */ @media (min-width:451px) and (max-width:760px){ .hero{background:#F8EFE5} .hero__art{inset:0;overflow:hidden} .hero__art img{ width:min(1320px,max(115vw,128svh)); height:auto;max-width:none;max-height:none; right:0;left:auto;top:auto;bottom:0; object-fit:contain;object-position:bottom right; transform:none; } .hero__copy .body{font-size:clamp(14px,2.25vw,18px);line-height:1.42} } /* Short / near-square compact screens need tighter copy geometry, but use the exact same continuous artwork rule above — no special 561/599/600 boundary behavior. */ @media (min-width:451px) and (max-width:760px) and (max-height:650px){ .hero__promise{top:41svh;font-size:clamp(36px,6.8vw,50px);line-height:.9} .hero__copy{right:4vw;bottom:3svh;width:34vw} .hero__copy .body{font-size:clamp(14px,2.35vw,17px);line-height:1.4} } /* V8.9: continuous compact-width typography. The promise is sized generously, while JS pins it directly beneath the rendered Halo wordmark so it never feels detached at odd widths. */ @media (min-width:451px) and (max-width:760px){ .hero{background:#F8EFE5} .hero__promise{ top:var(--hero-promise-top,35svh)!important; font-size:var(--hero-promise-size,clamp(50px,min(11vw,10svh),84px))!important; line-height:.89!important; } .hero__copy{right:4vw!important;bottom:clamp(8px,1.6svh,18px)!important;width:clamp(194px,40vw,278px)!important} .hero__copy .body{font-size:clamp(17.5px,min(3.25vw,3svh),21px)!important;line-height:1.37!important} } /* V8.10 final compact/tablet hero art: use the transparent desktop brush as a deliberately placed artwork, not as a viewport-filling background. The visible brush stays large, right-aligned and complete, while preserving clean zones for both text blocks. */ @media (min-width:451px) and (max-width:760px){ .hero{background:#F8EFE5} .hero__art img{ width:min(650px,86vw)!important; height:auto!important; max-width:none!important; max-height:none!important; right:0!important; left:auto!important; top:27svh!important; bottom:auto!important; object-fit:contain!important; object-position:top right!important; transform:none!important; } } /* V8.13 desktop hero: use the new completed brush construction exactly, with its full horizontal composition always visible. The source is scaled to exactly the viewport width and vertically centered, so neither the left nor right brush endings can ever be clipped. On taller desktop aspect ratios, the remaining vertical breathing room is filled with a sampled paper tone rather than stretching or distorting the artwork. */ @media (min-width:761px){ .hero{background:#F7F1E7} .hero__art{inset:0;overflow:hidden} .hero__art img{ position:absolute!important; width:100vw!important;height:auto!important; max-width:none!important;max-height:none!important; right:0!important;left:auto!important; top:calc(50% - (var(--hero-handoff-tail) / 2))!important;bottom:auto!important; object-fit:contain!important;object-position:center right!important; transform:translateY(-50%)!important; } } /* V8.16 — full brush-field handoff, with the second chapter physically beginning lower. We keep the complete V8.14 dry-brush asset (no vertical crop / no reduced silhouette). Instead of shrinking the brush, the hero receives a proportional paper tail; the section boundary is moved down into the brush's already-opaque field. This preserves the complete dry-brush language while only the sparse upper fringe reaches the original hero viewport. */ :root{--hero-handoff-tail:clamp(140px,14vw,360px)} .hero{padding-bottom:var(--hero-handoff-tail)} .hero__inner{min-height:100svh} .execution{overflow:visible;isolation:isolate} .execution__handoff{ position:absolute; z-index:0; left:0; top:0; width:100%; pointer-events:none; user-select:none; transform:translateY(-78.65%); transform-origin:top left; } .execution__handoff img{display:block;width:100%;height:auto} /* Phone/tablet tails are smaller because the same full source naturally scales shallower. This keeps the overlap perceptually consistent rather than breakpoint-hacking its shape. */ @media (max-width:760px){:root{--hero-handoff-tail:clamp(42px,12vw,92px)}} .execution__inner{position:relative;z-index:2} .execution__media{z-index:1} .execution__ghost{z-index:2} /* V8.18 mobile/tablet transplant — donor interface reproduced at <=760px only. Desktop remains the current V8.17/current composition unchanged. */ .execution__handoff-mobile{display:none!important} @media (max-width:760px){ .hero{background:var(--paper);padding-bottom:0} .execution__handoff{height:auto;aspect-ratio:2048/300;transform:translateY(-35%)} .execution__handoff > img:first-child{display:none!important} .execution__handoff-mobile{ display:block!important; width:100%!important; height:100%!important; object-fit:fill!important; } .hero__copy{bottom:calc(2.5svh + 24px)!important} } /* Exact donor V8.17 tablet/compact-mobile hero construction. */ @media (min-width:451px) and (max-width:760px){ .hero{background:#F8EFE5} .hero__art img{ width:clamp(388px,72vw,540px)!important; height:auto!important;max-width:none!important;max-height:none!important; right:0!important;left:auto!important;top:27svh!important;bottom:auto!important; object-fit:contain!important;object-position:top right!important;transform:none!important; } .hero__copy{bottom:calc(clamp(8px,1.6svh,18px) + 24px)!important} } /* Work-motion responsive compositor. The authored headline has two semantic lines. At compact/tablet widths we keep those lines intact instead of allowing the four inline word boxes to wrap into the mobile cascade. The artwork then occupies the *remaining block-size* of the sticky viewport and uses object-fit:contain, so neither a high-DPR tablet nor a short browser viewport can make type and media collide. */ @media (min-width:640px) and (max-width:1240px){ .work-motion{height:340svh;min-height:1900px} .work-motion__sticky{align-items:stretch} .work-motion__layout{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-content:stretch; align-items:stretch; gap:clamp(16px,2.8svh,28px); padding-top:clamp(92px,11svh,116px); padding-bottom:clamp(16px,4svh,38px) } .work-motion__text{ width:100%;max-width:none;align-self:end; font-size:clamp(52px,min(9.2vw,11svh),104px); line-height:.82;white-space:nowrap } .work-motion__text br{display:block} .work-motion__word, .work-motion__word:nth-of-type(n){display:inline-block;width:auto;margin-left:0;text-align:left} .work-motion__media{ width:100%;height:100%;min-height:0;max-height:none; aspect-ratio:auto;align-self:stretch;justify-self:stretch;transform:none } .work-motion__panel img{ width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center } } /* Short landscape viewports use the same bounded compositor in two columns. This keeps the film legible on rotated phones, split-screen tablets and small embedded browsers without sacrificing the artwork to a postage-stamp strip. */ @media (min-width:640px) and (max-width:1240px) and (max-height:620px) and (orientation:landscape){ .work-motion__layout{ grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr); grid-template-rows:minmax(0,1fr); align-items:center; gap:clamp(18px,3vw,42px); padding-top:clamp(84px,24svh,92px);padding-bottom:clamp(8px,3svh,20px) } .work-motion__text{ align-self:center;font-size:clamp(30px,min(6.2vw,13svh),74px); line-height:.78;white-space:normal } .work-motion__text br{display:none} .work-motion__word, .work-motion__word:nth-of-type(n){display:block;width:max-content;margin-left:0;text-align:left} } /* Compact portrait/square windows retain the mobile cascade, but the media row is block-size bounded. This closes the last failure mode: a wide authored image can never force itself upward through the final word simply because the window is short. */ @media (max-width:639.98px) and (max-height:640px){ .work-motion__sticky{align-items:stretch} .work-motion__layout{ grid-template-rows:auto minmax(0,1fr);align-content:stretch; padding-top:84px;padding-bottom:clamp(10px,3.8svh,18px) } .work-motion__media{ width:100%;height:100%;min-height:0;max-height:none; aspect-ratio:auto;align-self:stretch;justify-self:stretch;transform:none } .work-motion__panel img{ width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center } } @media (max-width:639.98px) and (max-height:560px) and (orientation:landscape){ .work-motion__sticky{align-items:stretch} .work-motion__layout{ display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,1.28fr); grid-template-rows:minmax(0,1fr);align-content:stretch;align-items:center; gap:clamp(12px,3vw,22px);padding-top:clamp(76px,24svh,82px);padding-bottom:8px } .work-motion__text{ width:100%;max-width:none;align-self:center; font-size:clamp(26px,min(7.2vw,12svh),48px);line-height:.78;white-space:normal } .work-motion__text br{display:none} .work-motion__word, .work-motion__word:nth-of-type(n){display:block;width:max-content;margin-left:0;text-align:left} .work-motion__media{ width:100%;height:100%;min-height:0;max-height:none; aspect-ratio:auto;align-self:stretch;justify-self:stretch;transform:none } .work-motion__panel img{ width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center } } /* Ultra-short desktop surfaces (embedded windows, split panes) preserve the side-by-side editorial hierarchy while letting height participate in type sizing. */ @media (min-width:1241px) and (max-height:420px){ .work-motion__layout{padding-top:82px;padding-bottom:8px} .work-motion__text{font-size:clamp(30px,min(8.6vw,18svh),162px);line-height:.76} .work-motion__media{max-height:calc(100svh - 90px)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} .hero-pop,.hero-token,.hero-copy-word,.stagger-piece,.stagger-copy-word{opacity:1!important;transform:none!important;filter:none!important} .work-motion__panel,.story__media figure,.continuity-mobile__scene{filter:none!important} .mobile-menu,.mobile-menu__links a,.nav__menu-chrome,.modal-layer,.modal-layer__backdrop,.modal{transition:none!important} } /* Legacy site preloader: same centered Oscerra symbol and breathing grammar. */ html.oscerra-preloading, html.oscerra-preloading body { overflow: hidden !important; overscroll-behavior: none !important; } .oscerra-site-preloader { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 520ms cubic-bezier(.16,1,.3,1), visibility 520ms step-end; } html.oscerra-preloading .oscerra-site-preloader { opacity: 1; visibility: visible; pointer-events: auto; transition: none; } .oscerra-site-preloader__symbol { width: clamp(68px, 7vw, 94px); height: auto; display: block; animation: oscerraLoaderBreath 1500ms cubic-bezier(.16,1,.3,1) infinite; transform-origin: center; } @keyframes oscerraLoaderBreath { 0%,100% { opacity:.58; transform:scale(.965); } 50% { opacity:1; transform:scale(1); } } /* Do not let the hero's engineered opening sequence finish invisibly behind the loader. */ html.oscerra-opening-held .hero__name.reveal { opacity: 0 !important; transform: translateY(18px) !important; } html.oscerra-opening-held .hero-pop, html.oscerra-opening-held .hero-token { animation: none !important; opacity: 0 !important; transform: translate3d(0,26px,0) !important; filter: blur(6px) !important; } html.oscerra-opening-held .hero-copy-word { animation: none !important; opacity: 0 !important; transform: translate3d(0,18px,0) !important; filter: blur(4px) !important; } /* Video loading surface: neutral grey with a soft diagonal shimmer; no poster artwork. */ .video::before { content:""; position:absolute; z-index:1; inset:-42%; pointer-events:none; opacity:1; background:linear-gradient(135deg, transparent 31%, rgba(255,255,255,.025) 38%, rgba(255,255,255,.13) 46%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.13) 54%, rgba(255,255,255,.025) 62%, transparent 69%); filter:blur(18px); transform:translate3d(-34%,-34%,0); animation:oscerraDiagonalShimmer 1750ms cubic-bezier(.45,0,.55,1) infinite; transition:opacity 900ms var(--ease-soft); will-change:transform,opacity; } @keyframes oscerraDiagonalShimmer { 0% { transform:translate3d(-34%,-34%,0); } 100% { transform:translate3d(34%,34%,0); } } .video video { position:relative; z-index:2; opacity:0; transform:scale(1.006); transition:opacity 900ms var(--ease-soft),transform 1100ms var(--ease-soft); will-change:opacity,transform; } .video.is-video-visible::before { opacity:0;animation:none; } .video.is-video-visible video { opacity:1;transform:none; } .video:not(.is-video-visible) .video__play, .video:not(.is-video-visible) .video__controls, .video.is-video-transitioning .video__play, .video.is-video-transitioning .video__controls { opacity:0 !important; pointer-events:none !important; } /* Compositor-invariant navigation rail. Sticky positioning avoids the native-mobile fixed-layer re-anchoring path; the negative flow offset keeps the hero fully overlaid. No geometry property changes in response to scroll direction or viewport chrome. */ html,body { overflow-x:clip; } .nav { --nav-height: 82px; --nav-veil-tail: 14px; --nav-overhang: 0px; position:sticky !important; top:0 !important; right:0 !important; bottom:auto !important; left:0 !important; height:calc(var(--nav-height) + var(--nav-overhang)) !important; min-height:calc(var(--nav-height) + var(--nav-overhang)) !important; max-height:calc(var(--nav-height) + var(--nav-overhang)) !important; margin-bottom:calc(0px - var(--nav-height) - var(--nav-overhang)) !important; transform:none !important; overflow:visible; } .nav__inner { height:var(--nav-height) !important; min-height:var(--nav-height) !important; max-height:var(--nav-height) !important; transform:none !important; will-change:auto; } .nav::before { inset:0 0 auto 0 !important; height:calc(var(--nav-height) + var(--nav-overhang) + var(--nav-veil-tail)) !important; } @media (max-width:760px) { .nav { --nav-height:84px; --nav-veil-tail:12px; --nav-overhang:24px; } } @media (max-width:560px) { .nav { --nav-height:76px; } } /* Hovering the FIELD NOTES image must not proxy-hover the linked heading. */ @media (hover:hover) { .note-feature:has(.note-feature__visual:hover) h3 { color:var(--ink) !important; } } @media (prefers-reduced-motion:reduce) { .oscerra-site-preloader, .oscerra-site-preloader__symbol, .video video, .video::before { animation:none !important; transition:none !important; } } /* Cross-page navigation uses the exact centered Oscerra loader grammar, now as a fade. */ .oscerra-route-loader{ position:fixed;z-index:2147483646;inset:0;display:grid;place-items:center;background:#fff; opacity:0;visibility:hidden;pointer-events:none; transition:opacity 520ms cubic-bezier(.16,1,.3,1),visibility 520ms step-end; will-change:opacity } .oscerra-route-loader .oscerra-site-preloader__symbol{animation-play-state:paused} html.oscerra-page-leaving .oscerra-route-loader, html.oscerra-route-arriving .oscerra-route-loader{ opacity:1;visibility:visible;pointer-events:auto;transition:opacity 420ms cubic-bezier(.16,1,.3,1),visibility 0s; } html.oscerra-page-leaving .oscerra-route-loader .oscerra-site-preloader__symbol, html.oscerra-route-arriving .oscerra-route-loader .oscerra-site-preloader__symbol{animation-play-state:running} html.oscerra-page-leaving body{pointer-events:none} @media(prefers-reduced-motion:reduce){ .oscerra-route-loader{transition:none!important} .oscerra-route-loader .oscerra-site-preloader__symbol{animation:none!important} } #execution,#film,#research,#start{scroll-margin-top:86px}