/* ============================================================ FILMIC V2 LAYER. Loaded after styles.css on every page. V1 (site/) is untouched. Pass 1 (28 Sep 2026): Apple learnings, Liquid Glass, Pharos line field. Pass 2 (28 Sep 2026): palette, ivory sections with living line fields, one glass pill top bar, clean film carousel, focus-four billboards, Apple fleet tiles, Pharos blur reveals and text micro-interactions, iOS style scroll-driven effects. Filmic Signal Orange stays on its four blessed uses; the palette's warm tones (Book Cloth, Kraft, Manilla) only appear as ambient light and field index lines. ============================================================ */ /* ---------- 0. PALETTE ---------- */ :root{ --slate-d:#191919;--slate-m:#262625;--slate-l:#40403E; --cloud-d:#666663;--cloud-m:#91918D;--cloud-l:#BFBFBA; --ivory-d:#E5E4DF;--ivory-m:#F0F0EB;--ivory-l:#FAFAF7; --book:#CC785C;--kraft:#D4A27F;--manilla:#EBDBBC; --focus:#61AAF2;--error:#BF4D43; /* critically damped spring, damping 1.0, response 0.4 */ --spring: linear(0, .118, .329, .527, .682, .793, .868, .917, .949, .969, .981, .989, .993, .996, .998, .999, 1); /* sheet spring, damping 0.8, response 0.3 */ --spring-sheet: linear(0, .122, .355, .584, .763, .884, .957, .995, 1.011, 1.015, 1.014, 1.010, 1.007, 1.004, 1.002, 1.001, 1); --mi-out:cubic-bezier(.16,1,.3,1); } body{background:var(--slate-d);overflow-x:clip} /* clip, not hidden: hidden makes a scroll container and every sticky (field canvases, capability heading) stops sticking */ /* slate carries the dark line field; true black is kept for film sections */ :focus-visible{outline-color:var(--focus)} /* ---------- 1. LIQUID GLASS TOKENS ---------- */ :root{ --lg-fill:linear-gradient(180deg,rgba(64,64,62,.46),rgba(25,25,25,.34)); --lg-fill-bar:linear-gradient(180deg,rgba(48,48,46,.74),rgba(18,18,18,.66)); --lg-fill-card:linear-gradient(180deg,rgba(60,60,58,.52),rgba(25,25,25,.42)); --lg-fill-sheet:linear-gradient(180deg,rgba(30,30,29,.74),rgba(12,12,12,.68)); --lg-fx:blur(18px) saturate(190%) brightness(1.05); --lg-fx-card:blur(14px) saturate(170%); --lg-spec:radial-gradient(120% 90% at var(--mx,26%) -34%,rgba(255,255,255,.26),rgba(255,255,255,0) 58%); --lg-spec-card:radial-gradient(420px circle at var(--mx,18%) var(--my,-40%),rgba(255,255,255,.12),rgba(255,255,255,0) 60%); --lg-rim:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -1px 1px rgba(0,0,0,.30),inset 0 12px 20px -14px rgba(255,255,255,.20); --lg-lift:0 12px 32px -14px rgba(0,0,0,.7); --lg-lift-card:0 24px 60px -28px rgba(0,0,0,.8); /* the same material over ivory: bright, milky glass */ --lgl-fill:linear-gradient(180deg,rgba(255,255,255,.78),rgba(250,250,247,.52)); --lgl-spec:radial-gradient(420px circle at var(--mx,24%) var(--my,-30%),rgba(255,255,255,.95),rgba(255,255,255,0) 60%); --lgl-rim:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -1px 1px rgba(25,25,25,.06),inset 0 14px 22px -16px rgba(255,255,255,.95); --lgl-lift:0 1px 2px rgba(25,25,25,.04),0 26px 60px -30px rgba(25,25,25,.28); } /* ---------- 2. TOP BAR: ONE LIQUID GLASS PILL ---------- */ .site-head{ top:14px;left:0;right:0;margin-inline:auto; width:min(1240px,calc(100% - 2 * var(--gutter))); padding:7px 7px 7px 22px !important;border-radius:999px; background:var(--lg-spec),var(--lg-fill-bar); -webkit-backdrop-filter:var(--lg-fx);backdrop-filter:var(--lg-fx); box-shadow:var(--lg-rim),var(--lg-lift); transition:scale .55s var(--spring),box-shadow .4s var(--spring); transform-origin:50% 0; } .site-head::before{display:none} /* the bar waits out the opening shot and materializes at 80% of it (main.js toggles html.hero-live) */ .site-head{transition:opacity .5s var(--spring),translate .6s var(--spring-sheet),filter .5s var(--spring),scale .55s var(--spring),box-shadow .4s var(--spring)} html.hero-live .site-head{opacity:0 !important;translate:0 -18px;filter:blur(8px);pointer-events:none} html.hero-live .site-head:focus-within{opacity:1 !important;translate:none;filter:none;pointer-events:auto} html.nav-min .site-head{scale:.965} .site-head.over-film{padding-top:7px !important} .nav{gap:2px;position:relative} .nav a:not(.btn){padding:.62rem .95rem;border-radius:999px;letter-spacing:.14em;position:relative;z-index:1;color:#e8e8e6} .nav a:not(.btn)::after{display:none} .nav .btn{margin-left:8px;padding:.72rem 1.35rem !important} .lg-lens{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;pointer-events:none;z-index:0;opacity:0; background:radial-gradient(90% 120% at 50% -20%,rgba(255,255,255,.30),rgba(255,255,255,.06) 60%),rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.10);transition:opacity .35s var(--spring)} .burger{border-radius:999px} @media (max-width:900px){ .site-head{top:10px;width:calc(100% - 20px);padding:6px 6px 6px 18px !important} .lg-lens{display:none} } /* ---------- 3. SECTION THEMES + LIVING LINE FIELDS ---------- */ .hero,.proof,.work,.crew,.foot{background:#000} [data-theme="black"]{background:#000} /* black where the film needs it */ [data-theme]{position:relative;isolation:isolate} [data-theme] > :not(.fx){position:relative;z-index:1} .fx{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:0} /* clip, not hidden: hidden makes .fx a scroll container and the sticky canvas stops sticking in tall sections */ .fx canvas{position:sticky;top:calc(var(--band,0px) * -1);display:block;width:100%;height:calc(100vh + 2 * var(--band,0px));height:calc(100lvh + 2 * var(--band,0px));will-change:transform} [data-theme^="ivory"]{ --white:var(--slate-d);--silver:var(--slate-l);--grey-lift:var(--cloud-d);--grey:var(--cloud-m);--charcoal:rgba(25,25,25,.14); color:var(--slate-d);color-scheme:light} [data-theme="ivory"],[data-theme="ivory-l"]{background:var(--ivory-l)} [data-theme="ivory-m"]{background:var(--ivory-m)} [data-theme="ivory-d"]{background:var(--ivory-d)} [data-theme^="ivory"] .caps{color:var(--cloud-d)} [data-theme^="ivory"] .btn{color:var(--ivory-l) !important} [data-theme^="ivory"] .cap__list li,[data-theme^="ivory"] .cap__list li:last-child{border-color:rgba(25,25,25,.12)} [data-theme="slate-m"]{background:rgba(38,38,37,.72)} .steps{padding-top:var(--section)} /* crew: Apple rhythm, the grid gets a full section of air before the testimonials */ .crew{padding-bottom:calc(var(--section) * 1.15)} .crew__grid{margin-bottom:0} .quotes{max-width:none;padding-inline:max(var(--gutter),calc((100% - 70rem) / 2))} .comp{max-width:none;padding-inline:max(var(--gutter),calc((100% - 70rem) / 2))} /* closing section: a warm light pooling on slate, the palette's Book Cloth and Kraft */ @property --gx{syntax:'';inherits:false;initial-value:22%} @property --gy{syntax:'';inherits:false;initial-value:62%} @property --gs{syntax:'';inherits:false;initial-value:1} [data-theme="glow"]{ overflow:hidden; background: radial-gradient(calc(62% * var(--gs)) calc(88% * var(--gs)) at var(--gx) var(--gy),rgba(204,120,92,.40),rgba(204,120,92,.15) 36%,rgba(212,162,127,.05) 60%,transparent 78%), radial-gradient(24% 32% at var(--gx) var(--gy),rgba(255,79,0,calc(.10 * var(--gh,0))),transparent 70%), radial-gradient(40% 50% at 88% 8%,rgba(235,219,188,.05),transparent 60%), var(--slate-d)} [data-theme="glow"]::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,")} /* ---------- 4. REVEALS: Pharos blur-in, spring settle ---------- */ .js [data-reveal]{filter:blur(8px)} [data-reveal].in{filter:none;transition:opacity .7s var(--spring),transform .8s var(--spring-sheet),filter .7s var(--spring)} .js [data-split] .w > span{filter:blur(6px)} .js [data-split].in .w > span{filter:none;transition:transform .8s var(--spring-sheet),font-weight .9s var(--ease),filter .7s var(--spring)} /* statement: words light as you scroll (Pharos), from blur and haze into ink */ [data-words] .wd{opacity:.14;filter:blur(3px);transition:opacity .5s var(--spring),filter .5s var(--spring)} [data-words] .wd.lit{opacity:1;filter:none} .statement h2{color:var(--cloud-d)} .statement h2 em .wd{color:var(--slate-d)} /* headings trail scroll speed a touch, then settle (Pharos fluid) */ .statement h2,.cap__sticky h2,.fleet__head,.crew h2,.close h2,.fleet__introtext h2{translate:0 calc(var(--vel,0) * -10px)} /* type: negative tracking as size grows */ .hero__title{letter-spacing:-.02em;line-height:.92} .statement h2,.cap__sticky h2,.fleet__introtext h2,.crew h2,.close h2,.fp-done h2{letter-spacing:-.018em} [data-theme^="ivory"] h2{font-weight:300} .menu a{letter-spacing:-.01em} /* ---------- 5. FILM: Apple TV shelf. One big player, the four clips as glass thumbnails ---------- */ .work{padding-top:clamp(3rem,7vw,6rem)} .work .film{--fw:min(88vw,1240px);height:auto;min-height:0;overflow:visible;position:relative;background:none;padding:0} .work .film::before,.work .film::after{display:none} .work .film__track{position:relative;display:block;width:var(--fw);aspect-ratio:16/9;margin:0 auto;padding:0;overflow:hidden; border-radius:clamp(16px,2.2vw,32px);transform:none !important;background:#0b0b0b;cursor:auto; box-shadow:0 60px 110px -60px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.06)} .work .film__track::before,.work .film__track::after{display:none} .work .film__frame{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;box-shadow:none;animation:none; background:#0b0b0b center/cover no-repeat;opacity:0;scale:1.04;filter:blur(10px);z-index:0;transform:none; transition:opacity .6s var(--spring),scale .9s var(--spring-sheet),filter .6s var(--spring)} .work .film__frame.is-on{opacity:1;scale:1;filter:none;z-index:1} .work .film__frame:not(:last-child)::after{display:none} .work .film__media{position:static;width:100%;height:100%;object-fit:cover;display:block} .work .film__count{display:none} .film__shelf{display:flex;justify-content:center;gap:clamp(8px,1.2vw,16px);width:var(--fw);margin:clamp(14px,1.8vw,22px) auto 0} .film__thumb{position:relative;flex:0 1 clamp(120px,15vw,210px);aspect-ratio:16/9;border:0;padding:0;cursor:pointer;border-radius:clamp(10px,1.2vw,16px);overflow:hidden; background:#111 center/cover no-repeat;opacity:.5;filter:saturate(.6);scale:var(--press,1); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.10),0 18px 36px -20px rgba(0,0,0,.9); transition:opacity .45s var(--spring),filter .45s var(--spring),translate .6s var(--spring-sheet),box-shadow .45s var(--spring)} .film__thumb::before{content:"";position:absolute;inset:0;background:var(--lg-spec);pointer-events:none} .film__thumb::after{content:"";position:absolute;left:10%;right:10%;bottom:8px;height:3px;border-radius:9px; background:linear-gradient(90deg,var(--accent) calc(var(--p,0) * 100%),rgba(255,255,255,.25) 0);opacity:0;transition:opacity .3s} .film__thumb.on{opacity:1;filter:none;translate:0 -4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1.5px var(--accent),0 24px 44px -20px rgba(255,79,0,.35)} .film__thumb.on::after{opacity:1} @media (hover:hover){.film__thumb:not(.on):hover{opacity:.85;filter:none}} @media (max-width:699px){.work .film{--fw:calc(100vw - 24px)}.film__thumb{flex-basis:22vw}.film__thumb::after{bottom:5px;height:2px}} @media (prefers-reduced-motion:reduce){.work .film__frame{scale:1;filter:none;transition:opacity .3s}} /* ---------- 6. BILLBOARDS: full width, smaller posters, slow continuous drift ---------- */ .bills{--pw:clamp(118px,10.5vw,168px);--pg:clamp(12px,1.4vw,20px);--side:clamp(28px,6vw,110px);padding-top:clamp(4rem,8vw,7rem)} .bills__rail{position:relative;overflow:visible;max-width:none;margin-inline:calc(-1 * var(--gutter));-webkit-mask-image:none;mask-image:none} .bills__grid{ animation:none !important;width:auto;margin:0;gap:var(--pg); overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;overscroll-behavior-x:contain;padding:10px 0 18px;cursor:grab} .bills__grid.dragging{cursor:grabbing} .bills__grid::-webkit-scrollbar{display:none} .bills__grid li{width:var(--pw)} .bills__art{opacity:1;border:0;border-radius:12px;box-shadow:0 24px 50px -26px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.07)} .bills__art img{filter:none;pointer-events:none} .bills__grid .caps{opacity:.6;font-size:.52rem} .bills__grid h3{font-size:.76rem} .bills__veil{position:absolute;top:0;bottom:0;width:var(--side);z-index:2;pointer-events:none; -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center} .bills__veil--l{left:0;background:linear-gradient(90deg,rgba(0,0,0,.7),transparent); -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)} .bills__veil--r{right:0;background:linear-gradient(270deg,rgba(0,0,0,.7),transparent); -webkit-mask-image:linear-gradient(270deg,#000 40%,transparent);mask-image:linear-gradient(270deg,#000 40%,transparent)} .bills__btn{display:none} @media (max-width:699px){.bills{--pw:30vw;--side:20px}} @media (hover:hover) and (pointer:fine){.bills__grid li:hover .bills__art{transform:translateY(-6px) scale(1.03)}} /* ---------- 7. FLEET: Apple product tiles on ivory ---------- */ .fleet{padding-bottom:0} .fleet__intro{z-index:1} .fleet__group{ margin-inline:calc(-1 * var(--gutter));padding:var(--section) var(--gutter) calc(var(--section) * .6); display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(14px,1.6vw,22px);overflow:hidden} .fleet__group:last-of-type{padding-bottom:var(--section)} @media (min-width:700px){.fleet__group{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.fleet__group:has(> .band:nth-of-type(3)){grid-template-columns:repeat(3,1fr)}} .fleet__group > .caps,.fleet__head{grid-column:1 / -1} .fleet__group > .caps{margin-bottom:0} .fleet__group::before{content:attr(data-ghost);position:absolute;z-index:0;top:.35em;right:-.06em;pointer-events:none; font-size:clamp(6rem,24vw,24rem);font-weight:600;letter-spacing:-.06em;line-height:.8;color:rgba(25,25,25,.05);white-space:nowrap} .fleet__head{font-size:clamp(2.4rem,6vw,5.4rem);font-weight:500;letter-spacing:-.04em;line-height:1;margin:.6rem 0 clamp(1.6rem,3.4vw,3rem);color:var(--slate-d)} .fleet__group .band{ display:flex;flex-direction:column;gap:14px;padding:clamp(12px,1.2vw,16px);border-radius:32px;align-items:stretch; background:var(--lgl-spec),var(--lgl-fill);-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); box-shadow:var(--lgl-rim),var(--lgl-lift);scale:var(--press,1);transition:translate .6s var(--spring),box-shadow .6s var(--spring)} .fleet__group .band:nth-of-type(even){grid-template-columns:none} .fleet__group .band .band__media{order:0 !important;border-radius:22px;aspect-ratio:4/3} .band__text{padding:4px 10px 14px} .band__text h3{font-size:clamp(1.35rem,1.9vw,1.85rem);font-weight:500;letter-spacing:-.022em;color:var(--slate-d)} .band__text p{color:var(--cloud-d);margin-top:.5rem} .band__media--drone{background:radial-gradient(62% 58% at var(--kx,50%) var(--ky,42%),#fff,var(--ivory-m) 62%,var(--ivory-d));overflow:hidden} .band__media--drone::before{display:none} .band__media--drone::after{background:radial-gradient(50% 50% at 50% 50%,rgba(25,25,25,.16),transparent 72%)} .band__drone{filter:drop-shadow(0 30px 24px rgba(25,25,25,.28))} .band__media--drone.airborne .band__drone{filter:drop-shadow(0 54px 30px rgba(25,25,25,.18))} @media (hover:hover) and (pointer:fine){ .fleet__group .band:hover{translate:0 -6px;box-shadow:var(--lgl-rim),0 40px 80px -36px rgba(25,25,25,.34)} .band:hover .band__media{transform:none} } /* iOS style scroll effect: tiles rise out of a soft blur as they come on screen */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .js .fleet__group .band[data-reveal]{opacity:1;filter:none;transform:none;transition:translate .6s var(--spring),box-shadow .6s var(--spring); animation:tile-in linear both;animation-timeline:view();animation-range:entry 0% cover 28%} @keyframes tile-in{from{opacity:0;transform:translateY(70px) scale(.93);filter:blur(12px)}to{opacity:1;transform:none;filter:none}} .fleet__group::before{animation:ghost-drift linear both;animation-timeline:view()} @keyframes ghost-drift{from{translate:12% 0}to{translate:-12% 0}} @media (hover:none){[data-theme="glow"]{animation:glow-drift linear both;animation-timeline:view()}} @keyframes glow-drift{from{--gx:6%}to{--gx:62%}} .bills__rail{animation:rail-in linear both;animation-timeline:view();animation-range:entry 0% cover 30%} @keyframes rail-in{from{opacity:0;transform:scale(.94);filter:blur(10px)}to{opacity:1;transform:none;filter:none}} } } /* ---------- 8. CONTROLS + MICRO-INTERACTIONS (Pharos micro.css, Filmic colours) ---------- */ .btn,.motion-toggle{ background:var(--lg-spec),var(--lg-fill) !important; -webkit-backdrop-filter:var(--lg-fx);backdrop-filter:var(--lg-fx); box-shadow:var(--lg-rim),var(--lg-lift); border-color:transparent !important;border-radius:999px;isolation:isolate;scale:var(--press,1)} .btn::before{border-radius:inherit} .btn:active,.btn:active:not([disabled]){transform:none} .fp-card{background:var(--lg-spec-card),var(--lg-fill-card) !important; -webkit-backdrop-filter:var(--lg-fx-card);backdrop-filter:var(--lg-fx-card); box-shadow:var(--lg-rim),var(--lg-lift-card);border-radius:24px} .menu{background:var(--lg-fill-sheet);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)} .nav a:not(.btn):active,.menu a:active,.foot__nav a:active,.proof__reel-cta:active{opacity:.55;transition:opacity 0s} /* text links: a rule draws in from the left and leaves to the right */ main p a,.close__details a,.foot__nav a{text-decoration:none; background:linear-gradient(currentColor,currentColor) no-repeat right 100%/0 1px;transition:background-size .4s var(--mi-out),color .25s} @media (hover:hover){main p a:hover,.close__details a:hover,.foot__nav a:hover{background-position:0 100%;background-size:100% 1px}} /* the focus ring arrives instead of blinking on */ :focus-visible{outline-offset:3px;animation:mi-focus .22s var(--mi-out)} @keyframes mi-focus{from{outline-offset:8px;outline-color:rgba(97,170,242,0)}} @media (prefers-reduced-motion:no-preference){ .band__media,.bills__art,.proof__reel-shot img,.proof__reel-play svg{transition-timing-function:var(--spring) !important;transition-duration:.6s !important} .menu{transform-origin:calc(100% - var(--gutter)) 2rem;transform:scale(.96);filter:blur(8px); transition:opacity .4s var(--spring),transform .55s var(--spring-sheet),filter .4s var(--spring),visibility 0s .55s} .menu.open{transform:none;filter:none;transition:opacity .4s var(--spring),transform .55s var(--spring-sheet),filter .4s var(--spring)} .reel[open]{animation:reel-in .6s var(--spring) both} .reel[open]::backdrop{animation:reel-dim .4s ease both} @keyframes reel-in{from{opacity:0;transform:scale(.94);filter:blur(10px)}to{opacity:1;transform:none;filter:none}} @keyframes reel-dim{from{opacity:0}to{opacity:1}} } /* ---------- 9. ACCESSIBILITY MODES ---------- */ @media (prefers-reduced-motion:reduce){ .js [data-reveal],.js [data-split] .w > span,[data-words] .wd{filter:none} .work .film__frame{transition:none} html.nav-min .site-head{scale:none} *{translate:none !important} } @media (prefers-contrast:more){ :root{--silver:#f2f2f2;--grey:#9a9a9a;--grey-lift:#b5b5b5;--charcoal:#6a6a6a} [data-theme^="ivory"]{--silver:#262625;--grey-lift:#40403E} .site-head,.btn,.motion-toggle,.fp-card,.film__ctrl{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7) !important} .fleet__group .band{box-shadow:inset 0 0 0 1px rgba(25,25,25,.5) !important} [data-words] .wd{opacity:.45} } @media (prefers-reduced-transparency:reduce){ .site-head,.btn,.motion-toggle,.fp-card,.menu,.film__ctrl,.bills__btn{background:#161616 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important} .fleet__group .band{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none} .bills__veil{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.8)} .reel::backdrop{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none} } /* global dark field behind the slate sections */ #field{position:fixed;left:0;right:0;top:calc(var(--band,0px) * -1);width:100%;height:calc(100% + 2 * var(--band,0px));z-index:-1;pointer-events:none;will-change:transform} /* -1: Filmic sections are unpositioned, 0 would draw over them */ /* ---------- 10. ACCENT (owner, 28 Sep 2026: "use more accent colour"). Signal Orange widened for V2 ---------- */ :root{--accent:#ff4f00;--accent-hi:#ff7a3d;--accent-lo:#d94300} .acc{color:var(--accent)} .hud-lvl::after{background:var(--accent) !important} .cap__list li::before,.steps__n{color:var(--accent)} .comp__list svg{color:var(--accent)} .bills__grid .caps,.crew__grid .caps,.fleet__group > .caps{color:var(--accent);opacity:1} [data-theme^="ivory"] .fleet__group > .caps,.fleet__group > .caps{color:var(--accent-lo)} /* primary calls to action wear an orange gel: nav Enquire, closing Enquire, watch the reel */ .nav .btn,.close .btn,#reelopen{ background:var(--lg-spec),linear-gradient(180deg,var(--accent-hi) 0%,var(--accent) 55%,var(--accent-lo) 100%) !important; box-shadow:inset 0 1px 0 rgba(255,230,210,.75),inset 0 0 0 1px rgba(255,200,170,.3),inset 0 -1px 1px rgba(110,30,0,.35),0 12px 28px -12px rgba(255,79,0,.7) !important; color:#fff !important} .nav .btn::before,.close .btn::before,#reelopen::before{background:rgba(255,255,255,.14)} @media (hover:hover){.nav .btn:hover,.close .btn:hover,#reelopen:hover{translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,230,210,.85),0 16px 34px -12px rgba(255,79,0,.85) !important}} /* nav: the lens carries a thin orange rim on its lower edge */ .lg-lens{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -2px 0 rgba(255,79,0,.75)} /* links draw an orange rule */ main p a,.close__details a,.foot__nav a{background-image:linear-gradient(var(--accent),var(--accent))} @media (hover:hover){main p a:hover,.foot__nav a:hover,.close__details a:hover{color:var(--accent)}} /* statement: the final phrase lands in orange once lit */ .statement h2 em .wd.lit{color:var(--accent-lo)} /* big numbers get a warm gradient */ .num__big{background:linear-gradient(180deg,#fff 30%,var(--accent-hi));-webkit-background-clip:text;background-clip:text;color:transparent} @media (prefers-contrast:more){.statement h2 em .wd.lit{color:#a33000}} /* hero (desktop, 29 Sep 2026): ONE 50 fps clip plays at half speed and the wheel raises its rate (main.js). The only transition is the first reveal over the poster; there are no hand-offs any more. */ .hero__slow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;pointer-events:none; transition:opacity .35s ease;transform-origin:50% 50%;will-change:transform} .hero__slow.on{opacity:1} /* loop seam: main.js holds the clip's last frame on this canvas and dissolves it out once the loop has landed */ .hero__seam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;pointer-events:none;transform-origin:50% 50%} .hero__seam.on{opacity:1} @media (max-width:699px),(hover:none) and (max-height:520px),(prefers-reduced-motion:reduce){.hero__slow,.hero__seam{display:none}} /* billboards that have a case on /work/ open it; a small glass pill says so on hover */ .bills__link{display:block;position:relative;cursor:pointer} .bills__link::after{content:"See the work";position:absolute;left:50%;bottom:10px;translate:-50% 6px;opacity:0;white-space:nowrap; padding:6px 11px;border-radius:999px;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#fff; background:var(--lg-spec),var(--lg-fill);-webkit-backdrop-filter:var(--lg-fx);backdrop-filter:var(--lg-fx);box-shadow:var(--lg-rim),var(--lg-lift); transition:opacity .3s var(--spring),translate .45s var(--spring-sheet)} @media (hover:hover){.bills__grid li:hover .bills__link::after,.bills__link:focus-visible::after{opacity:1;translate:-50% 0}} .bills__link:focus-visible{outline:2px solid var(--focus);outline-offset:3px} /* award badge: a small glass pill with an orange lamp (Philipstown WireCar Grand Prix, Emmy nomination) */ .award{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:7px 13px 7px 10px;border-radius:999px;margin:0 0 .9rem; font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff; background:var(--lg-spec),var(--lg-fill);-webkit-backdrop-filter:var(--lg-fx);backdrop-filter:var(--lg-fx);box-shadow:var(--lg-rim),inset 0 0 0 1px rgba(255,79,0,.45),var(--lg-lift)} .award__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} .award--bill{position:absolute;top:8px;left:8px;z-index:2;margin:0;padding:5px 9px 5px 7px;font-size:.5rem;gap:6px} .award--bill .award__dot{width:5px;height:5px} /* showreel card (pass 6): bigger, clearer, one glass card on the dark field, with room before the statement */ .proof{padding-bottom:clamp(5rem,9vw,8.5rem)} .proof__line{margin-top:3rem} .proof__reel{margin:3.2rem auto 0;display:inline-flex;align-items:center;gap:clamp(1.2rem,2.4vw,2rem); padding:12px clamp(18px,2.2vw,28px) 12px 12px;border:0;border-radius:28px;text-align:left; background:var(--lg-spec-card),var(--lg-fill-card);-webkit-backdrop-filter:var(--lg-fx-card);backdrop-filter:var(--lg-fx-card); box-shadow:var(--lg-rim),var(--lg-lift-card);scale:var(--press,1); transition:translate .6s var(--spring),box-shadow .5s var(--spring)} .proof__reel-shot{width:clamp(220px,26vw,340px);border-radius:18px;background:#0b0b0b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .proof__reel-shot img{filter:saturate(.75) brightness(.85)} .proof__reel-play svg{width:22px;height:22px;fill:#fff;filter:none;margin-left:3px} .proof__reel-play span,.proof__reel-play{pointer-events:none} .proof__reel-play::before{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;translate:-50% -50%;border-radius:999px; background:radial-gradient(90% 90% at 50% 0%,rgba(255,255,255,.35),transparent 60%),linear-gradient(180deg,var(--accent-hi),var(--accent) 55%,var(--accent-lo)); box-shadow:inset 0 1px 0 rgba(255,230,210,.8),0 10px 26px -8px rgba(255,79,0,.8);transition:scale .5s var(--spring-sheet)} .proof__reel-play svg{position:relative} .proof__reel-text{gap:.45rem;min-width:13ch} .proof__reel-text .caps{color:var(--accent);font-size:.66rem} .proof__reel-cta{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:400;letter-spacing:-.015em;color:#fff} .proof__reel-sub{font-size:var(--step--1);color:var(--cloud-l)} .proof__reel-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;flex:none;color:#fff; background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08);transition:translate .5s var(--spring-sheet),background .3s} .proof__reel-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){ .proof__reel:hover{background:var(--lg-spec-card),var(--lg-fill-card);translate:0 -3px;box-shadow:var(--lg-rim),0 34px 70px -30px rgba(0,0,0,.9)} .proof__reel:hover .proof__reel-shot img{filter:none;transform:scale(1.04)} .proof__reel:hover .proof__reel-play::before{scale:1.1} .proof__reel:hover .proof__reel-arrow{translate:3px 0;background:rgba(255,255,255,.14)} } @media (max-width:600px){ .proof__reel{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;max-width:420px;padding:10px 10px 16px} .proof__reel-shot{width:100%} .proof__reel-text{padding:0 8px;align-items:center;text-align:center} .proof__reel-arrow{display:none} } /* ScrollTrigger measures pins by scrolling to the top during a refresh; smooth scroll-behavior turned that jump into an animation and shifted the hero pin by -scrollY whenever a refresh happened while scrolled (verified 28 Sep). Lenis already handles anchors, so native smooth scrolling goes. */ html.js,html.lenis{scroll-behavior:auto} /* ============================================================ PRE-LIVE AUDIT FIXES (28 Sep 2026): visual QA, accessibility, SEO and copy audits. ============================================================ */ :root{--accent-ink:#a33000;--band:min(420px,40vh)} /* line-field band: in CSS so nothing shifts after first paint */ /* orange that reads on ivory (5.5:1) */ html{scroll-padding-top:96px;scroll-padding-bottom:72px} /* anchors and focus never land under the pill or the pause button */ /* fleet: 'hidden' made the group the scroll-timeline source, so the tiles never finished rising (blurred) */ .fleet__group{overflow:clip} .fleet__group::before{color:#EEEEEA;content:attr(data-ghost);content:attr(data-ghost) / ""} /* solid (no stacked overlaps); silent to screen readers */ @media (min-width:700px) and (max-width:999px){ .fleet__group > .band:nth-of-type(3){grid-column:1 / -1} .fleet__group > .band:nth-of-type(3) .band__media{aspect-ratio:21/9} } .band__drone[src*="komodo-cut"]{left:15%;width:70%;height:66%} /* matches the Ember's visual weight */ .band__text :is(h3,h4){font-size:clamp(1.35rem,1.9vw,1.85rem);font-weight:500;letter-spacing:-.022em;color:var(--slate-d)} .cap,.crew{padding-top:var(--section)} /* each now follows a colour change: full rhythm, not half */ h2.caps{font-weight:400} /* orange and grey text on ivory: darker ink so small text passes 4.5:1 */ [data-theme^="ivory"] .caps{color:#555552} [data-theme^="ivory"] .cap__list li::before,[data-theme^="ivory"] .steps__n,[data-theme^="ivory"] .fleet__group > .caps, .fleet__group > .caps{color:var(--accent-ink)} [data-theme^="ivory"] .acc{color:var(--accent-lo)} [data-theme="slate"],[data-theme="slate-m"]{--grey-lift:#8f8f8f} /* primary buttons: brand orange with dark text (white on #ff4f00 is 3:1); .doc__cta-top matches the bottom CTA (29 Sep) */ .nav .btn,.close .btn,#reelopen,.doc__cta .btn,.doc__cta-top .btn,.fp-file .btn,.menu__enquire{ background:var(--lg-spec),linear-gradient(180deg,var(--accent-hi) 0%,var(--accent) 55%,var(--accent-lo) 100%) !important; box-shadow:inset 0 1px 0 rgba(255,230,210,.75),inset 0 0 0 1px rgba(255,200,170,.3),inset 0 -1px 1px rgba(110,30,0,.35),0 12px 28px -12px rgba(255,79,0,.7) !important; color:#191919 !important;border:0 !important;border-radius:999px} .nav .btn span,.close .btn span,#reelopen span{color:#191919} /* the reel lightbox: keep no transform after the entrance, or the fixed close button is trapped behind the video */ @media (prefers-reduced-motion:no-preference){.reel[open]{animation:none}.reel[open] .reel__frame{animation:reel-in .6s var(--spring) backwards}} .reel__close{z-index:2} /* pause control: solid, readable over ivory and footage alike */ .motion-toggle{background:#191919 !important;color:#fff !important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 8px 20px -8px rgba(0,0,0,.6)} .motion-toggle.v2-injected{display:flex} .motion-off *::before,.motion-off *::after{animation-play-state:paused !important} .foot__bar{padding-right:64px} /* focus: a 2px ring that shows on every surface */ :focus-visible{outline:2px solid var(--focus);outline-offset:3px} [data-theme^="ivory"] :focus-visible{outline-color:var(--slate-d)} .site-head :focus-visible,.fp-head :focus-visible{outline-color:#fff} .film__thumb:focus-visible{opacity:1;filter:none} .brand{border-radius:999px} [data-reveal]:focus-within{opacity:1 !important;transform:none !important;filter:none !important} /* small caps over moving footage */ .hero__kicker,.fleet__introtext .caps{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55)} /* the pill's hover lens: softer highlight so link text keeps contrast */ .lg-lens{background:radial-gradient(90% 120% at 50% -20%,rgba(255,255,255,.12),rgba(255,255,255,.03) 60%),rgba(255,255,255,.05)} /* the pill over ivory: milky glass with dark type (the smoky pill read as a flat grey slab) */ html.on-ivory .site-head{background:var(--lgl-spec),var(--lgl-fill);box-shadow:var(--lgl-rim),var(--lgl-lift)} html.on-ivory .site-head .nav a:not(.btn){color:#262625} html.on-ivory .site-head .brand img{filter:invert(1) brightness(.2)} html.on-ivory .site-head .burger span{background:#191919} html.on-ivory .site-head :focus-visible{outline-color:var(--slate-d)} /* phone menu: starts below the pill, opaque enough to read, Enquire as the orange pill */ .menu{align-items:flex-start;padding-top:calc(76px + 1.2rem);padding-bottom:1.5rem;background:rgba(10,10,10,.94)} .menu nav{margin-block:auto} .menu a.menu__enquire{display:inline-flex;align-items:center;justify-content:center;width:fit-content;min-height:48px;margin-top:1rem;padding:.6rem 1.6rem;font-size:var(--step--1) !important;letter-spacing:.18em;text-transform:uppercase;font-weight:500} /* Work page: the Emmy badge spans the head row instead of taking the title's column */ .case__head .award{grid-column:1 / -1;margin-bottom:0} /* contact form on touch devices: labels stacked above their fields; legends above the padding */ @media (hover:none){.fp-block label.fp-field{display:block;min-height:0}} .fp-block{padding:0;margin:2.6rem 0 0} .fp-block:first-of-type{margin-top:0} .fp-label,.fp-status{color:var(--cloud-l) !important} .fp-card ::placeholder{color:#a3a39e} /* text pages on touch devices: links inside sentences stay inline (they were forced onto their own lines) */ @media (hover:none){ .doc a:not([class]){display:inline;min-height:0} .doc .doc__also a{display:inline-flex;min-height:44px;align-items:center} } .doc__tablewrap.scrolls:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)} /* subpages: the same glass pill header, sticky, and the same heading weight as the home page */ .fp-head{position:sticky;top:14px;z-index:100;width:min(1240px,calc(100% - 2 * var(--gutter)));margin:14px auto 0; padding:9px 9px 9px 22px !important;border-radius:999px; background:var(--lg-spec),var(--lg-fill-bar);-webkit-backdrop-filter:var(--lg-fx);backdrop-filter:var(--lg-fx);box-shadow:var(--lg-rim),var(--lg-lift)} .fp-head .fp-back{padding:.55rem 1rem;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.08)} @media (max-width:900px){.fp-head{top:10px;width:calc(100% - 20px)}} .doc h1,.wk__intro h1,.fp-intro h1{font-weight:300} /* posters: legible labels */ .bills__grid .caps{font-size:.58rem} .award--bill{font-size:.56rem} .bills__grid{scroll-padding-inline:calc(var(--side) + 8px)} /* no glass support: solid bars rather than see-through ones */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .site-head,.fp-head,.film__ctrl{background:rgba(20,20,20,.94) !important} html.on-ivory .site-head{background:rgba(250,250,247,.96) !important} } @media (prefers-reduced-transparency:reduce){html.on-ivory .site-head{background:#FAFAF7 !important}} .work .film__track{touch-action:pan-y pinch-zoom} /* a sideways swipe changes clip, never triggers browser Back */ .menu{overscroll-behavior:contain} /* regression pass */ .bills__rail:has(:focus-visible) .bills__veil{opacity:0} body .wk__intro h1,body .case__head h2{font-weight:300} .fp-card :is(input,textarea,select):focus-visible{outline:2px solid var(--focus);outline-offset:4px} .fp-card :is(input,textarea){border-bottom-color:rgba(255,255,255,.3)} @media (min-width:900px){.comp__list li{white-space:nowrap}} /* the decode effect changed line widths and re-wrapped the copy below */ .film__shelf{touch-action:pan-y pinch-zoom} /* phone polish (29 Sep, owner) */ .bills__award{display:none} @media (max-width:699px){ /* the fleet opener: the rig sits at ~40% of the frame, so the portrait crop centres on it */ .fleet__intro video,.fleet__intro .media-fallback{object-position:37% 50%} /* Emmy: off the small poster (it covered the key art) and into the caption */ .award--bill{display:none} .bills__award{display:flex;align-items:center;gap:6px;margin-top:.35rem;font-size:.56rem;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;color:#fff} .bills__award .award__dot{width:6px;height:6px} /* crew: an even two-by-two grid, portraits aligned on one line, names and roles beneath */ .crew__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 1.2rem;align-items:start;justify-items:center} .crew__grid li{width:100%;max-width:170px} .crew__grid h3,.crew__grid .crew__name{line-height:1.25;min-height:2.5em;display:flex;align-items:flex-start;justify-content:center} } /* hero call to action: the desktop bar waits for 80% of the opening shot, so the first screen carries its own Enquire (ads land here) */ .hero__cta{display:inline-flex;align-items:center;margin-top:1.4rem;padding:.8rem 1.6rem !important;pointer-events:auto} .hero__cta{background:var(--lg-spec),linear-gradient(180deg,var(--accent-hi) 0%,var(--accent) 55%,var(--accent-lo) 100%) !important; box-shadow:inset 0 1px 0 rgba(255,230,210,.75),inset 0 0 0 1px rgba(255,200,170,.3),inset 0 -1px 1px rgba(110,30,0,.35),0 12px 28px -12px rgba(255,79,0,.7) !important;color:#191919 !important;border:0 !important;border-radius:999px} .hero__cta span{color:#191919} @media (max-width:699px){.hero__cta{display:none}} /* phones keep the menu bar visible from the first screen */ /* Search engine renderers resize the viewport to the page's full height; no real screen is this tall. There the reveal animations never fire and the viewport-tall sections balloon, so show everything as a reader would see it. */ @media (min-height:3000px){ .js [data-reveal]{opacity:1 !important;transform:none !important;filter:none !important} .js [data-split] .w > span{transform:none !important;filter:none !important} [data-words] .wd{opacity:1 !important;filter:none !important} .hero{height:900px !important;min-height:0 !important} .fleet__intro{height:820px !important;min-height:0 !important} .close{min-height:0 !important} #field,.grade,.fx{display:none !important} } .hero__lead{display:flex;flex-direction:column;align-items:flex-start} /* permit guides: visible author and date under the h1 (E-E-A-T; matches the Article JSON-LD) */ .doc .doc__byline{font-size:var(--step--1,.85rem);letter-spacing:.01em;color:var(--grey-lift,#8a8a8a);margin:-.75rem 0 1.5rem} /* ---------- polish 29 Sep 2026: one vertical rhythm on the doc pages ---------- Paragraphs step 1.1rem; lists and tables stepped 1.4rem and 1.6rem, so the flow jumped after every list and table. The top CTA sat tighter under the lede (1.1rem) than the lede under the H1 (1.5rem); it now matches. */ .doc ul,.doc ol{margin-bottom:1.1rem} .doc__tablewrap{margin-bottom:1.1rem} .doc .doc__cta-top{margin-top:1.5rem}