/* astra1 2026-11-01 — botanical editorial system */ @font-face{font-family:DM;src:url('/assets/sans-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:DM;src:url('/assets/sans-500.woff2') format('woff2');font-weight:500;font-display:swap}@font-face{font-family:DM;src:url('/assets/sans-700.woff2') format('woff2');font-weight:700;font-display:swap} :root{--bg:#06110c;--fg:#f2eee5;--muted:#b9c4bc;--line:#ffffff30;--accent:#ff2424;--pad:clamp(22px,4vw,160px);--nav-height:100px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--fg);font-family:DM,Arial,sans-serif;font-size:clamp(16px,1.05vw,26px);line-height:1.55;transition:background-color .8s,color .8s}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{background:transparent;border:0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:6px}button:disabled{opacity:.5;cursor:not-allowed}img{display:block;width:100%;height:auto}::selection{background:#a31c1b;color:#fff}h1,h2,h3,p{margin:0}p+p{margin-top:1.2em}h1,h2,h3{font-weight:400}i,em{font-family:Georgia,'Times New Roman',serif;font-weight:400}section{scroll-margin-top:85px}.section{padding:clamp(65px,8vw,230px) var(--pad)}.section-label,.eyebrow{font-size:clamp(10px,.72vw,17px);letter-spacing:.16em;font-weight:500}.section-label{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px;margin-bottom:clamp(50px,6vw,140px)}.section-label span:last-child{text-align:right}h2{font-size:clamp(44px,6.4vw,180px);line-height:1.03;letter-spacing:-.055em}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:65px}.section-heading p{max-width:28em;color:var(--muted)}.nav{position:absolute;z-index:20;top:0;left:0;width:100%;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:25px;padding:0 var(--pad);color:#f2eee5;border-bottom:1px solid #ffffff30}.brand{display:flex;align-items:center;gap:10px;font-size:clamp(24px,1.8vw,48px);font-weight:500;letter-spacing:-.065em;line-height:1}.sun{color:#ff2424;font-size:1.75em}.brand-small{display:block;font-size:.25em;letter-spacing:.27em;margin-top:8px}.nav nav{display:flex;gap:clamp(20px,3vw,80px);font-size:clamp(13px,.9vw,22px)}.nav nav a{position:relative}.nav nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:right .3s}.nav nav a:hover:after{right:0}.nav-actions{display:flex;align-items:center;gap:22px}.nav-actions button{width:44px;height:44px;font-size:26px}.nav-cta{border:1px solid #ffffff60;border-radius:50px;padding:12px 24px;font-size:clamp(12px,.85vw,20px);transition:background .3s,box-shadow .3s}.nav-cta span{margin-left:20px}.nav-cta:hover{background:#a31c1b;box-shadow:0 10px 35px #a31c1b66}.nav #mobile-menu{display:none}.nav #mobile-links{display:none}.hero{min-height:850px;height:100svh;max-height:1800px;position:relative;overflow:hidden;background:#06110c;color:#f2eee5;padding:calc(var(--nav-height) + 35px) var(--pad) 30px;display:flex;flex-direction:column;justify-content:space-between}.hero-art{position:absolute;inset:0 0 0 18%;pointer-events:none;transform-origin:70% 75%;will-change:transform}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:75% 50%;mask-image:linear-gradient(90deg,transparent,#000 25%);opacity:.92}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#06110c99 0,transparent 60%),linear-gradient(0deg,#06110c 0,transparent 25%);pointer-events:none}.hero-topline,.hero-title,.hero-foot{position:relative;z-index:1}.hero-topline{display:flex;justify-content:space-between;font-size:clamp(9px,.65vw,16px);letter-spacing:.12em;gap:20px}.hero-title{margin-top:70px}.hero-title .eyebrow{margin-bottom:30px}.hero h1{font-size:clamp(80px,11.5vw,380px);line-height:.83;letter-spacing:-.075em}.hero h1 em{display:block;color:#ff2424;letter-spacing:-.07em;margin-left:12vw;margin-top:12px}.hero-bottom{display:flex;align-items:center;gap:5vw;margin-top:clamp(30px,3.5vw,100px)}.hero-bottom p{font-size:clamp(16px,1.1vw,28px)}.round-link{width:clamp(56px,5vw,100px);height:clamp(56px,5vw,100px);border:1px solid #ffffff80;border-radius:50%;display:grid;place-items:center;font-size:32px;transition:transform .3s,background .3s}.round-link:hover{transform:rotate(45deg);background:#a31c1b}.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:clamp(9px,.7vw,17px);letter-spacing:.1em;margin-top:50px}.trick-trigger{border:1px solid #ffffff60;border-radius:40px;padding:13px 20px;letter-spacing:.05em;font-size:14px;display:flex;align-items:center;gap:14px;background:#10271bd0;backdrop-filter:blur(15px)}.status-dot{width:7px;height:7px;background:#b9ebcb;border-radius:50%;box-shadow:0 0 13px #b9ebcb}.statement{font-size:clamp(56px,8.8vw,265px)}.statement>span{margin-left:12vw;color:var(--muted)}.statement>i{margin-left:28vw}.manifesto-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10vw;margin-top:90px;align-items:center}.giant-star{font-size:clamp(130px,24vw,600px);line-height:1;color:var(--accent);text-align:center}.manifesto-bottom>div{max-width:660px}.lead{font-size:clamp(24px,2.3vw,60px);line-height:1.2;letter-spacing:-.03em;margin-bottom:25px}.text-link{display:inline-flex;gap:40px;justify-content:space-between;border-bottom:1px solid currentColor;padding:12px 0;margin-top:25px;font-size:clamp(14px,1vw,23px)}.text-link:hover{color:var(--accent)}.work-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:4vw}.project-nova{padding-top:11vw}.project-image{position:relative;overflow:hidden;aspect-ratio:1.04;border-radius:3px}.project-jms img{height:100%;object-fit:cover;transition:transform .8s}.project-jms:hover img{transform:scale(1.05)}.project-overlay{position:absolute;inset:0;padding:35px;color:#fff;font-family:Georgia,serif;background:linear-gradient(#0005,transparent 80%);font-size:clamp(22px,2vw,50px)}.project-overlay>span{display:block;font-family:DM,Arial,sans-serif;letter-spacing:-.06em;font-size:clamp(30px,3.9vw,100px);line-height:1.05;margin-top:30px}.image-note{position:absolute;bottom:18px;left:20px;color:#fff;background:#0008;padding:4px 8px;font-size:9px;letter-spacing:.1em}.project-arrow{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;background:#8fbdb5;color:#06110c;width:52px;height:52px;border-radius:50%;font-size:25px;transition:transform .3s}.project:hover .project-arrow{transform:rotate(45deg)}.project-nova .project-image{background:#acc9c5;padding:12% 8%;display:flex;align-items:center}.browser-frame{background:#8fbdb5;border-radius:8px;box-shadow:0 30px 50px #123b4460;transform:rotate(-6deg);overflow:hidden;transition:transform .7s;width:100%}.browser-frame>span{display:block;color:#334a4c;background:#a2c9c1;font-size:10px;text-align:center;padding:7px}.browser-frame img{height:100%;object-fit:cover;object-position:top}.project-nova:hover .browser-frame{transform:rotate(0deg) scale(1.04)}.project-caption{display:flex;justify-content:space-between;gap:20px;margin-top:22px;align-items:start}.project-caption h3{font-size:clamp(20px,1.5vw,38px);line-height:1.15}.project-caption>span{font-size:clamp(9px,.65vw,16px);text-align:right;max-width:15em;letter-spacing:.09em;color:var(--muted)}.growth{overflow:hidden;padding-bottom:0}.growth-stage{position:relative;min-height:clamp(550px,52vw,1400px);display:flex;align-items:center;padding-bottom:100px}.growth-copy{position:relative;z-index:2;max-width:72%;pointer-events:none}.growth h2{font-size:clamp(60px,7.9vw,210px)}.growth h2 i{color:#cfe3d5}.growth p{margin-top:45px}.growing-flower{position:absolute;right:-12vw;top:-5vw;width:75%;height:110%;mix-blend-mode:screen;transform-origin:60% 100%;will-change:transform;mask-image:linear-gradient(90deg,transparent,#000 25%)}.growing-flower img{height:100%;object-fit:cover;filter:saturate(.8)}.specimen{position:absolute;bottom:30px;right:0;font-size:9px;letter-spacing:.15em;z-index:2}.service{border-top:1px solid var(--line)}.service:last-child{border-bottom:1px solid var(--line)}.service summary{list-style:none;display:grid;grid-template-columns:50px 1fr 24% 35px;align-items:center;gap:15px;padding:36px 0;cursor:pointer}.service summary::-webkit-details-marker{display:none}.service h3{font-size:clamp(25px,3.1vw,80px);letter-spacing:-.045em;line-height:1.12}.service-no{font-size:12px}.service-tag{font-size:clamp(9px,.7vw,17px);letter-spacing:.08em;color:var(--muted)}.plus{font-size:36px;line-height:1;transition:transform .3s}.service[open] .plus{transform:rotate(45deg)}.service summary:hover h3{color:var(--accent)}.service-body{display:grid;grid-template-columns:1fr 1fr;gap:25px 6vw;padding:5px 65px 40px}.service-body p+p{margin-top:0}.service-body .text-link{justify-self:start;margin:0}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw}.principle-grid article>span{font-size:11px;letter-spacing:.14em}.principle-grid h2{font-size:clamp(36px,3.5vw,95px);margin:35px 0}.principle-grid h2 i{color:var(--accent)}.principle-grid p{color:var(--muted);max-width:32em}.contact{padding-bottom:90px}.contact h2{position:relative;font-size:clamp(56px,9.5vw,270px);margin:30px 0 60px}.contact h2 a{display:inline-flex;vertical-align:middle;margin-left:5vw;font-size:.7em;transition:transform .4s;color:var(--accent)}.contact h2 a:hover{transform:translate(10px,-10px)}.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px}.footer{padding:60px var(--pad) 30px;background:#06110c;color:#f2eee5;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:50px;font-size:14px}.footer>div:not(.footer-base){display:flex;flex-direction:column;gap:10px;align-items:start}.footer .top{border:1px solid #ffffff80;width:55px;height:55px;display:grid;place-items:center;border-radius:50%;font-size:24px}.footer-base{grid-column:1/-1;border-top:1px solid #ffffff30;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.12em}.footer button{padding:0;text-decoration:underline;text-underline-offset:5px}.skip{position:fixed;z-index:100;left:20px;top:-100px;background:#8fbdb5;color:#06110c;padding:15px}.skip:focus{top:15px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#smoke{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25;opacity:0;transition:opacity .7s}body.trick #smoke{opacity:.8}#trick-panel{position:fixed;z-index:30;bottom:20px;right:20px;max-width:310px;background:#0c1c15ef;color:#f2eee5;backdrop-filter:blur(20px);border:1px solid #c9e8d660;border-radius:15px;padding:20px;font-size:13px;box-shadow:0 15px 60px #0007}#trick-panel>span{font-size:10px;letter-spacing:.12em}#trick-panel p{margin:15px 0;color:#c8d8ce}#trick-panel button{border:1px solid #ffffff60;border-radius:20px;padding:8px 12px;font-size:12px;margin-top:8px;margin-right:5px}.js-motion .reveal{opacity:0;transform:translateY(45px);transition:opacity .9s,transform 1.2s cubic-bezier(.2,.7,.2,1)}.js-motion .reveal.visible{opacity:1;transform:none}.subpage{padding-top:180px;min-height:80vh}.subpage .section-label{margin-bottom:60px}.subpage h1{font-size:clamp(55px,7.5vw,180px);line-height:1;letter-spacing:-.06em;max-width:14ch}.subpage .lead{max-width:36em;margin-top:50px}.subpage .article-body{max-width:850px;margin:70px 0 0 auto}.article-body h2{font-size:clamp(28px,3vw,65px);margin:50px 0 20px}.article-body p{margin-bottom:20px}.subpage+.footer{margin-top:60px}html[data-theme=light] .hero{background:#8fbdb5}html[data-theme=light] .hero:after{background:linear-gradient(90deg,#8fbdb5 0,#8fbdb5cc 22%,transparent 68%),linear-gradient(0deg,#8fbdb5 0,transparent 20%)}html[data-theme=light] .hero-title,html[data-theme=light] .hero-topline,html[data-theme=light] .hero-foot{color:#16231b}html[data-theme=light] .hero h1 em{color:#a31c1b}html[data-theme=light] .nav{background:#8fbdb5e6;color:#16231b;border-color:#17231b30}html[data-theme=light] .nav-cta,html[data-theme=light] .round-link{border-color:#16231b70}html[data-theme=light] .trick-trigger{color:#f2eee5}html[data-theme=light] .hero-art{opacity:.85}.no-motion *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.no-motion .reveal{opacity:1;transform:none}.no-motion .hero-art,.no-motion .growing-flower{transform:none!important} @media(min-width:2000px){:root{--nav-height:150px}.hero{min-height:1100px}.hero-title{margin-top:100px}.trick-trigger{font-size:22px;padding:20px 30px}.service summary{padding:65px 0}.work-grid{gap:5vw}.section-heading{margin-bottom:100px}.project-image{aspect-ratio:1.2}.project-overlay{padding:60px}.footer{font-size:22px}.footer-base{font-size:14px}.nav-actions button{font-size:36px;width:65px;height:65px}} @media(max-width:1000px){.nav nav{gap:20px}.nav-cta{padding:10px 15px}.nav-cta span{display:none}.hero{min-height:760px}.hero-topline span:last-child{display:none}.hero-art{inset:0 0 0 0}.hero h1{font-size:13vw}.hero-title{margin-top:110px}.hero h1 em{margin-left:8vw}.hero-foot>span:first-child{max-width:180px}.section-heading{align-items:start;flex-direction:column}.project-caption{flex-direction:column}.project-caption>span{text-align:left}.principle-grid{gap:30px}.service summary{grid-template-columns:35px 1fr 30px}.service-tag{display:none}.contact-bottom{align-items:start;flex-direction:column}.footer{grid-template-columns:1fr 1fr}.footer-base{flex-wrap:wrap}} @media(max-width:650px){:root{--nav-height:85px;--pad:22px}.nav>nav{display:none}.nav .nav-cta{display:none}.nav #mobile-menu{display:block}.nav #mobile-links:not([hidden]){display:flex;position:absolute;top:85px;left:0;right:0;flex-direction:column;gap:0;background:#06110c;padding:18px;color:#f2eee5}.nav #mobile-links a{padding:15px}.nav-actions{gap:5px}.hero{min-height:760px;height:100svh;padding-top:115px}.hero-art{inset:35px -32% 0 -5%}.hero-art img{object-position:65% 50%;opacity:.72}.hero:after{background:linear-gradient(90deg,#06110c99,transparent),linear-gradient(0deg,#06110c,transparent 40%)}.hero-title{margin-top:120px}.hero-title .eyebrow{font-size:9px;max-width:22em}.hero h1{font-size:17vw;line-height:.95}.hero h1 em{margin-left:17vw;margin-top:0}.hero-bottom{margin-top:35px;gap:18px;justify-content:space-between}.hero-bottom p{font-size:15px;max-width:19em}.round-link{flex:none;width:48px;height:48px;font-size:24px}.hero-foot{flex-wrap:wrap;margin-top:40px}.hero-foot>span:first-child{display:none}.scroll-note{font-size:8px}.hero-topline{font-size:8px}.section-label{font-size:9px;letter-spacing:.09em;margin-bottom:50px}.section-label span:last-child{max-width:14em}.statement{font-size:clamp(43px,10vw,65px)}.statement>span{margin-left:0}.statement>i{margin-left:10vw}.manifesto-bottom{grid-template-columns:1fr;margin-top:40px;gap:20px}.giant-star{font-size:100px;text-align:left}.manifesto-bottom .lead{font-size:30px}.work-grid{grid-template-columns:1fr;gap:50px}.project-nova{padding-top:0}.project-image{aspect-ratio:1.05}.project-overlay>span{font-size:11vw}.project-caption{flex-direction:row}.growth-stage{min-height:700px;align-items:start;padding-top:20px}.growth-copy{max-width:100%}.growth h2{font-size:13vw}.growth p{font-size:15px;max-width:19em}.growing-flower{width:145%;height:85%;right:-45%;top:25%;opacity:.8}.specimen{font-size:8px;bottom:25px}.service summary{padding:25px 0;gap:10px;grid-template-columns:25px 1fr 25px}.service h3{font-size:26px}.service-body{display:block;padding:0 0 30px 35px}.service-body p{margin-bottom:20px}.service-body .text-link{font-size:14px}.principle-grid{grid-template-columns:1fr;gap:50px}.principle-grid h2{font-size:44px}.principle-grid article{border-bottom:1px solid var(--line);padding-bottom:35px}.contact h2{font-size:14vw}.contact h2 a{display:block;margin-top:30px;margin-left:0}.contact .text-link{font-size:14px;overflow-wrap:anywhere}.footer{gap:35px 20px;font-size:13px}.footer-base{font-size:8px}.footer-base span:last-child{display:none}#trick-panel{max-width:260px;bottom:12px;right:12px}.subpage{padding-top:130px}.subpage h1{font-size:15vw}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.hero-art,.growing-flower{transform:none!important}} .discovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12vw}.discovery-grid h3{font-size:clamp(24px,2.2vw,55px);letter-spacing:-.03em;margin-bottom:25px}.discovery-grid p{max-width:36em;color:var(--muted)}.discovery-grid strong{color:var(--fg);font-weight:500}.explainer{margin:70px 0;padding:clamp(25px,4vw,80px);border:1px solid var(--line);background:linear-gradient(120deg,#a31c1b30,#cde9d509)}.explainer h2{font-size:clamp(30px,4vw,85px);margin:25px 0}.explainer>p{color:var(--muted)}.explainer details{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}.explainer summary{cursor:pointer;display:flex;justify-content:space-between}.explainer details p{max-width:60em;margin-top:25px}.subpage~.footer .trick-trigger{display:none}@media(max-width:650px){.discovery-grid{grid-template-columns:1fr;gap:45px}} .sun{width:1.65em;height:1.65em;display:block}.sun img{width:100%;height:100%}.growing-flower{right:-3vw;width:52%;top:-6vw;height:120%;mix-blend-mode:normal;mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,#000b 45%,transparent 72%)}.growing-flower img{object-fit:contain;filter:none}.giant-star{font-family:Arial,sans-serif}@media(max-width:650px){.growing-flower{width:105%;right:-20%;top:25%;height:90%}} .arrow-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}.round-link .arrow-icon{width:.9em;height:.9em}.nav-cta{display:flex;align-items:center;gap:20px}.project-arrow .arrow-icon{width:1em;height:1em} /* Original WebDifferent compositing. Black canvas is neutral under exclusion. */ #smoke{mix-blend-mode:exclusion}body.trick #smoke{opacity:1} body.trick main{user-select:none;-webkit-user-select:none} /* astra1 2026-11-01 — explicit services, restored full portfolio, original palette. */ .hero h1 em{color:#f2eee5}.hero-intro{max-width:49em;font-size:clamp(16px,1.04vw,26px)!important;line-height:1.6}.hero-bottom{align-items:flex-end;gap:35px}.hero-bottom .round-link{flex:none}.hero-title{margin-top:35px}.hero h1{font-size:clamp(80px,9vw,300px)}.hero h1 em{margin-left:7vw}.hero-art img{mask-image:linear-gradient(90deg,transparent,#000 40%)}.hero:after{background:linear-gradient(90deg,#06110ccc 0,#06110c66 40%,transparent 75%),linear-gradient(0deg,#06110c 0,transparent 35%)}.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px 4vw;margin-top:70px}.portfolio-card:nth-child(even){padding-top:7vw}.portfolio-image{position:relative;aspect-ratio:1.35;overflow:hidden;background:#171717}.portfolio-image>img{height:100%;object-fit:cover;object-position:top;transition:transform .8s}.portfolio-card:hover img{transform:scale(1.035)}.portfolio-card .project-caption{align-items:start}.service-directory{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:60px}.service-directory>a{padding:45px 30px 45px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:start;gap:22px;position:relative}.service-directory>a:not(:nth-child(3n+1)){padding-left:30px;border-left:1px solid var(--line)}.service-directory h3{font-size:clamp(28px,2.7vw,70px);letter-spacing:-.04em;line-height:1.1}.service-directory p{color:var(--muted);max-width:30em}.service-go{margin-top:auto;padding-top:15px;font-size:clamp(13px,.9vw,22px);border-bottom:1px solid currentColor}.service-directory a:hover .service-go{color:var(--accent)}.case-image{margin:80px 0 30px}.case-image img{height:auto;width:100%}.case-image figcaption{font-size:12px;color:var(--muted);margin-top:15px}.growth h2 i{color:#f2eee5}html[data-theme=light] .hero h1 em{color:#a31c1b}@media(max-width:1000px){.hero{min-height:950px}.hero h1{font-size:13vw}.hero-intro{max-width:40em}.service-directory{grid-template-columns:1fr 1fr}.service-directory>a:not(:nth-child(3n+1)){border-left:0;padding-left:0}.service-directory>a:nth-child(even){border-left:1px solid var(--line);padding-left:25px}.portfolio-grid{gap:45px 25px}}@media(max-width:650px){.hero{min-height:1040px;height:auto}.hero-title{margin-top:100px}.hero h1{font-size:17vw}.hero-intro{max-width:100%;font-size:16px!important}.hero-bottom{display:block}.hero-bottom .round-link{margin-top:25px}.hero-art{bottom:25%}.hero:after{background:linear-gradient(90deg,#06110c88,transparent),linear-gradient(0deg,#06110c 24%,#06110c99 45%,transparent 80%)}.portfolio-grid{grid-template-columns:1fr;gap:45px}.portfolio-card:nth-child(even){padding-top:0}.service-directory{grid-template-columns:1fr}.service-directory>a:nth-child(even){border-left:0;padding-left:0}.service-directory>a{padding:30px 0}.service-directory h3{font-size:34px}.hero-foot{margin-top:35px}.case-image{margin-top:40px}} .growing-flower.growth-sequence{right:-3vw;top:0;width:58%;height:100%;mask-image:radial-gradient(ellipse,#000 50%,transparent 73%);mix-blend-mode:normal;transform:none!important}.growth-sequence img.growth-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .18s linear}.growth-sequence img.frame-0{opacity:1}.no-motion .growth-sequence img.growth-frame{opacity:0!important}.no-motion .growth-sequence img.frame-5{opacity:1!important}@media(prefers-reduced-motion:reduce){.growth-sequence img.growth-frame{opacity:0!important}.growth-sequence img.frame-5{opacity:1!important}}@media(max-width:650px){.growing-flower.growth-sequence{width:100%;height:62%;right:-10%;top:37%}.growth-stage{min-height:900px}} /* astra1 2026-11-02 — growing film rests on the exact original artwork. */ .flower-film .bloom-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none} .hero-art .bloom-video{object-position:75% 50%;mask-image:linear-gradient(90deg,transparent,#000 25%)} .flower-film.film-playing>img{visibility:hidden}.flower-film.film-playing .bloom-video{opacity:.92} .no-motion .flower-film>img{visibility:visible}.no-motion .flower-film .bloom-video{display:none} .flower-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.flower-actions button{font-size:clamp(12px,.8vw,22px);min-height:44px;text-decoration:underline;text-underline-offset:5px} @media(prefers-reduced-motion:reduce){.flower-film>img{visibility:visible!important}.flower-film .bloom-video{display:none}} /* astra1 2026-11-02 — Dave: blue-green replaces white/cream section surfaces. */ /* astra1 2026-11-02 — a distinct protea for the second botanical section. */ .growing-flower.protea-art{top:-8%;height:112%;right:-2%;width:52%;mask-image:radial-gradient(ellipse at 50% 45%,#000 40%,#000d 58%,transparent 75%)} .protea-art img{object-fit:contain;object-position:center} @media(max-width:650px){.growing-flower.protea-art{top:32%;height:75%;right:-18%;width:100%}.growth-stage{min-height:850px}.growth-copy{align-self:flex-start;padding-top:20px}.growth-copy p{max-width:20em}} /* astra1 2026-11-02 — sculpted image edges throughout the agency. */ .portfolio-image,.project-image{border-radius:clamp(38px,5vw,150px) clamp(75px,10vw,300px) clamp(38px,5vw,150px) clamp(38px,5vw,150px);isolation:isolate} .portfolio-card:nth-child(even) .portfolio-image{border-radius:clamp(75px,10vw,300px) clamp(38px,5vw,150px) clamp(38px,5vw,150px) clamp(38px,5vw,150px)} .case-image img,.browser-frame{border-radius:clamp(28px,4vw,100px);overflow:hidden} .explainer{border-radius:clamp(28px,4vw,100px)} .protea-art{border-radius:46% 54% 43% 57% / 42% 45% 55% 58%;overflow:hidden} /* astra1 2026-11-02 — six distinct service compositions, not a ruled text table. */ .service-directory.service-showcase{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,70px);border:0;margin-top:clamp(40px,4vw,130px)} .service-showcase>a.service-feature{--card-ink:#b6d8d0;--card-bg:#06110c;display:flex;gap:0;padding:clamp(24px,2.2vw,70px);border:0;border-radius:clamp(32px,4vw,120px);background:var(--card-bg);color:var(--card-ink);overflow:hidden;isolation:isolate;transition:transform .5s,box-shadow .5s;min-width:0} .service-showcase>a.service-feature:nth-child(3n+2){border-top-right-radius:clamp(80px,10vw,280px)} .service-showcase>a.service-feature:nth-child(3n+1){border-bottom-left-radius:clamp(65px,8vw,220px)} .service-showcase>a.service-revamp,.service-showcase>a.service-social{--card-bg:#a31c1b;--card-ink:#d0e5df} .service-showcase>a.service-search,.service-showcase>a.service-repair{--card-bg:#171717;--card-ink:#a2c9c1} .service-meta{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;font-size:clamp(11px,.85vw,23px);letter-spacing:.035em} .service-meta>span:first-child{max-width:80%}.service-open{display:grid;place-items:center;flex:none;border:1px solid currentColor;width:clamp(42px,3.2vw,85px);height:clamp(42px,3.2vw,85px);border-radius:50%;transition:background .4s,transform .4s} .service-open svg,.service-discover svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.5}.service-open svg{width:45%} .service-art{position:relative;isolation:isolate;width:100%;height:clamp(220px,22vw,650px);margin:clamp(20px,2.5vw,70px) 0;display:grid;place-items:center} .service-copy{position:relative;width:100%;margin-top:auto}.service-showcase .service-copy h3{font-size:clamp(30px,2.8vw,80px);line-height:1.07;letter-spacing:-.045em;max-width:12em} .service-showcase .service-copy p{font-size:clamp(15px,1vw,26px);color:var(--card-ink);opacity:.85;max-width:31em;margin-top:24px;line-height:1.55} .service-discover{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #b6d8d04d;padding-top:22px;margin-top:30px;font-size:clamp(12px,.85vw,21px)} .service-feature:hover .service-open,.service-feature:focus-visible .service-open{transform:rotate(45deg);background:#8fbdb530}.service-feature:hover{box-shadow:0 24px 50px #06110c33} .service-screen{width:85%;height:80%;position:absolute;right:-6%;top:5%;border:1px solid #a2c9c166;border-radius:25px;overflow:hidden;transform:rotate(9deg);box-shadow:0 20px 50px #0005;transition:transform .7s}.service-screen>span{display:block;padding:8px 15px;font-size:clamp(7px,.5vw,14px);background:#8fbdb5;color:#06110c;letter-spacing:.1em}.service-screen img{height:100%;object-fit:cover;object-position:top} .art-word{position:absolute;left:0;bottom:0;font-size:clamp(44px,5vw,145px);line-height:.85;letter-spacing:-.06em;text-shadow:0 4px 25px #06110c}.art-word i{color:#8fbdb5} .service-feature:hover .service-screen{transform:rotate(3deg) translateY(-8px)} .revamp-window{width:85%;height:80%;border-radius:50% 50% 22px 22px;overflow:hidden;transform:rotate(-9deg);box-shadow:0 20px 40px #38070750;transition:transform .7s}.revamp-window img{height:100%;object-fit:cover;object-position:top}.revamp-orbit{position:absolute;right:-3%;bottom:7%;font-size:clamp(90px,12vw,320px);line-height:1;color:#8fbdb5;text-shadow:0 5px 25px #38070760}.art-caption{position:absolute;bottom:0;left:0;letter-spacing:.13em;font-size:clamp(9px,.6vw,17px)} .service-feature:hover .revamp-window{transform:rotate(-3deg) translateY(-8px)} .search-orbits{width:80%;aspect-ratio:1;position:absolute;top:-7%;left:10%;display:grid;place-items:center}.search-orbits>span{position:absolute;border:1px solid #8fbdb566;border-radius:50%;width:100%;height:100%}.search-orbits>span:nth-child(2){width:72%;height:72%}.search-orbits>span:nth-child(3){width:42%;height:42%;background:#8fbdb51a}.search-orbits b{font-size:clamp(65px,8vw,220px);line-height:1;font-weight:400;transition:transform .7s}.service-feature:hover .search-orbits b{transform:translate(10px,-10px)} .search-query{position:absolute;bottom:14%;left:0;right:0;border-radius:100px;background:#8fbdb5;color:#06110c;padding:clamp(14px,1.7vw,40px);font-size:clamp(14px,1.4vw,38px);box-shadow:0 18px 50px #0004;display:flex;align-items:center;gap:15px}.search-query>span{font-size:1.6em;line-height:1} .social-fan{position:relative;width:95%;height:85%;display:grid;place-items:center}.social-fan>div{position:absolute;width:52%;height:90%;overflow:hidden;border-radius:clamp(20px,3vw,75px);box-shadow:0 15px 30px #360a0966;transition:transform .7s;background:#06110c}.social-fan>div:first-child{transform:translateX(-45%) rotate(-16deg)}.social-fan>div:last-child{transform:translateX(45%) rotate(16deg)}.social-fan>div:nth-child(2){z-index:2;display:grid;place-items:center;background:#8fbdb5;color:#06110c;transform:translateY(-7%)}.social-fan img{height:100%;object-fit:cover}.social-fan span{font-size:clamp(24px,3vw,78px);line-height:1.05;letter-spacing:-.04em}.service-feature:hover .social-fan>div:first-child{transform:translateX(-55%) rotate(-22deg)}.service-feature:hover .social-fan>div:last-child{transform:translateX(55%) rotate(22deg)} .comms-orbit{position:absolute;width:75%;aspect-ratio:1;border:1px solid #8fbdb566;border-radius:50%;display:grid;place-items:center;transform:rotate(-20deg)}.comms-core{font-size:clamp(90px,13vw,330px);color:#a31c1b;line-height:1}.comms-dot{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:#8fbdb5;box-shadow:0 0 30px #8fbdb555}.dot-one{top:9%;left:10%}.dot-two{bottom:4%;right:18%}.comms-message{position:absolute;border:1px solid #8fbdb588;background:#123126ed;padding:clamp(12px,1.2vw,32px);border-radius:40px;font-size:clamp(12px,1.1vw,30px);box-shadow:0 15px 25px #0003;transition:transform .6s}.message-one{top:15%;left:0}.message-two{bottom:12%;right:0;background:#8fbdb5;color:#06110c}.service-feature:hover .message-one{transform:translateX(8px)}.service-feature:hover .message-two{transform:translateX(-8px)} .repair-mark{position:relative;width:85%;height:95%;display:grid;place-items:center}.repair-mark>span{font-family:Georgia,serif;font-size:clamp(150px,20vw,530px);color:#8fbdb529;line-height:1}.repair-mark svg{position:absolute;width:65%;height:85%;fill:#171717;stroke:#8fbdb5;stroke-width:1.4;filter:drop-shadow(0 10px 20px #0006);transition:transform .7s}.service-feature:hover .repair-mark svg{transform:rotate(-5deg)} @media(min-width:701px) and (max-width:1150px){.service-directory.service-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}.service-art{height:30vw}} @media(max-width:700px){.service-directory.service-showcase{grid-template-columns:1fr;gap:24px}.service-showcase>a.service-feature{padding:28px;border-radius:38px}.service-showcase>a.service-feature:nth-child(3n+2){border-top-right-radius:90px}.service-showcase>a.service-feature:nth-child(3n+1){border-bottom-left-radius:60px}.service-art{height:260px}.service-meta{font-size:12px}.service-showcase .service-copy h3{font-size:36px}.service-screen{height:75%}.art-word{font-size:70px}.revamp-orbit{font-size:140px}.search-orbits{max-width:270px;left:calc(50% - 135px)}.search-orbits b{font-size:110px}.social-fan span{font-size:36px}.comms-core{font-size:160px}.repair-mark>span{font-size:250px}} @media(prefers-reduced-motion:reduce){.service-art *{transition:none!important;animation:none!important}} .no-motion .service-art *{transition:none!important;animation:none!important} /* Each service demonstrates the craft on pointer and keyboard interaction. */ .service-feature{--light-x:50%;--light-y:40%}.service-feature:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#8fbdb51c,transparent 60%);pointer-events:none;opacity:0;transition:opacity .4s}.service-feature:hover:before,.service-feature:focus-visible:before{opacity:1}.service-art{transition:transform .55s cubic-bezier(.2,.7,.2,1);transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))} .service-feature:focus-visible .service-screen{transform:rotate(3deg) translateY(-8px)}.service-feature:focus-visible .revamp-window{transform:rotate(-3deg) translateY(-8px)}.service-feature:focus-visible .social-fan>div:first-child{transform:translateX(-55%) rotate(-22deg)}.service-feature:focus-visible .social-fan>div:last-child{transform:translateX(55%) rotate(22deg)}.service-feature:focus-visible .search-orbits b{transform:translate(10px,-10px)}.service-feature:focus-visible .message-one{transform:translateX(8px)}.service-feature:focus-visible .message-two{transform:translateX(-8px)}.service-feature:focus-visible .repair-mark svg{transform:rotate(-5deg)} @media(prefers-reduced-motion:reduce){.service-art{transform:none!important;transition:none!important}.service-feature:before{transition:none}} .no-motion .service-art{transform:none!important;transition:none!important} .service-showcase>a.service-design,.service-showcase>a.service-comms{--card-bg:#0d2a21} .revamp-orbit svg,.search-orbits b svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.1} .comms-core svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:10} /* astra1 2026-11-02 — crimson highlights against the green service surfaces. */ .service-showcase>a.service-revamp{--card-bg:#12352b;--card-ink:#b6d8d0} .service-showcase>a.service-social{--card-bg:#0d2a21;--card-ink:#b6d8d0} .service-feature .service-open{background:#a31c1b;border-color:#a31c1b;color:#f2eee5;box-shadow:0 7px 24px #a31c1b33} .service-feature:hover .service-open,.service-feature:focus-visible .service-open{background:#a31c1b;box-shadow:0 10px 35px #a31c1b77} .service-feature:before{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#a31c1b30,transparent 65%)} .service-feature .service-discover{border-top-color:#a31c1b88} .service-feature .service-discover svg{background:#a31c1b;color:#f2eee5;border-radius:50%;padding:7px;width:34px;height:34px;flex-shrink:0} .service-screen{border-color:#a31c1b99;box-shadow:0 20px 50px #0005,0 0 30px #a31c1b22} .service-screen>span{background:#a31c1b;color:#f2eee5} .revamp-orbit{color:#a31c1b;filter:drop-shadow(0 2px 1px #8fbdb5)} .search-orbits>span:nth-child(2){border-color:#a31c1baa} .search-orbits>span:nth-child(3){background:#a31c1b33;border-color:#a31c1b} .search-query{box-shadow:0 18px 50px #0004,0 8px 24px #a31c1b33} .social-fan>div:nth-child(2){box-shadow:inset 0 0 0 2px #a31c1b,0 18px 40px #a31c1b33} .social-fan>div:nth-child(2) i{color:#a31c1b} .comms-dot{background:#a31c1b;box-shadow:0 0 24px #a31c1b99} .comms-message{border-color:#a31c1b99} .repair-mark svg path:last-child{stroke:#a31c1b;stroke-width:4} /* astra1 2026-11-02 — replace every asterisk brand treatment with our sunrise. */ .giant-star img{width:clamp(150px,24vw,600px);height:auto;margin:auto} .comms-core img{width:1em;height:1em;object-fit:contain} /* astra1 2026-11-02 — cinematic automotive concept in Dave's palette. */ .automotive-section .growth-stage{display:grid;grid-template-columns:40% 60%;align-items:center;min-height:0;padding:clamp(50px,6vw,180px) 0 100px;gap:0} .automotive-section .growth-copy{max-width:none;margin-right:-15%;pointer-events:auto} .automotive-section .growth-copy h2{font-size:clamp(48px,6.6vw,230px)} .automotive-section .growth-copy h2 i{color:#ff2424} .automotive-section .growth-copy p{max-width:26em} .automotive-art{position:relative;width:110%;margin-left:-10%;overflow:hidden;border-radius:46% 14% 32% 16% / 38% 20% 34% 25%;box-shadow:0 35px 100px #0006;isolation:isolate} .automotive-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} .automotive-section .specimen{color:var(--ink);opacity:.7} @media(max-width:750px){.automotive-section .growth-stage{display:flex;flex-direction:column;align-items:stretch;gap:36px;padding:30px 0 85px}.automotive-section .growth-copy{margin:0;padding:0}.automotive-section .growth-copy h2{font-size:clamp(46px,10vw,76px)}.automotive-art{width:100%;margin:0}.automotive-section .specimen{bottom:20px;font-size:8px}} /* astra1 2026-11-02 — Dave: no blinding light sections, gentle colour drift. */ body{transition:background-color 2.4s ease-in-out,color 1.2s ease-in-out} html[data-theme=light] .hero{background:#10231c;color:#dedfd5} html[data-theme=light] .hero:after{background:linear-gradient(90deg,#10231ccc 0,#10231c66 40%,transparent 75%),linear-gradient(0deg,#10231c 0,transparent 35%)} html[data-theme=light] .hero-title,html[data-theme=light] .hero-topline,html[data-theme=light] .hero-foot{color:#dedfd5} html[data-theme=light] .hero h1 em{color:#ff2424} html[data-theme=light] .nav{background:#10231ce6;color:#dedfd5;border-color:#ffffff30} html[data-theme=light] .nav-cta,html[data-theme=light] .round-link{border-color:#dedfd570} .social-fan>div:nth-child(2),.message-two{background:#183a31;color:#dedfd5} @media(prefers-reduced-motion:reduce){body{transition:none}} /* astra1 2026-11-02 — hovering film, still fallback and global motion controls. */ .manifesto-bottom{grid-template-columns:1.2fr 1fr;gap:6vw} .hummingbird-film{position:relative;overflow:hidden;border-radius:44% 18% 36% 20% / 35% 24% 38% 28%;aspect-ratio:3/2;max-width:none!important;background:#06110c} .hummingbird-film>img,.hummingbird-film>video{width:100%;height:100%;object-fit:cover} .hummingbird-film>video{position:absolute;inset:0;opacity:0;transition:opacity .7s;pointer-events:none} .hummingbird-film.film-playing>video{opacity:1} @media(max-width:750px){.manifesto-bottom{grid-template-columns:1fr;gap:40px}} /* astra1 2026-11-02 — Before you buy: dark editorial service education. */ .reality-hero{padding-top:clamp(160px,12vw,330px)} .reality-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:7vw;align-items:center} .reality-intro h1{font-size:clamp(55px,6.5vw,210px);line-height:1.02;letter-spacing:-.055em} .reality-page h1 i,.reality-page h2 i{color:#ff2424} .reality-intro .lead{margin-top:45px;max-width:28em} .reality-intro p:not(.lead){max-width:38em;color:var(--muted)} .reality-price{background:radial-gradient(ellipse at top right,#a31c1b40,transparent 65%),#102b25;border:1px solid #a31c1b90;border-radius:40% 12% 30% 12% / 22% 14% 25% 18%;padding:clamp(35px,5vw,140px);box-shadow:0 30px 100px #0005} .reality-price strong{display:block;font-size:clamp(90px,11vw,320px);font-weight:400;letter-spacing:-.08em;line-height:1.1;color:#ff2424;margin:40px 0} .reality-price strong span{display:block;font-size:clamp(20px,1.5vw,40px);letter-spacing:-.02em;color:#dedfd5} .reality-price ol{list-style:none;padding:0;margin:35px 0}.reality-price li{border-bottom:1px solid #ffffff25;padding:14px 0}.reality-price li span{color:#ff2424;margin-right:25px;font-size:.65em}.reality-price p{font-size:.85em} .reality-jumps{display:flex;flex-wrap:wrap;gap:14px;margin-top:80px}.reality-jumps a{border:1px solid #ffffff35;border-radius:50px;padding:12px 22px;font-size:.8em;transition:background .3s}.reality-jumps a:hover{background:#a31c1b} .reality-split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.reality-page h2{font-size:clamp(42px,4.6vw,135px);margin-top:25px}.reality-prose{max-width:48em}.reality-prose p{margin-bottom:24px}.reality-prose a,.reality-cards a{text-decoration:underline;text-underline-offset:5px}.reality-prose strong{color:#efb1a4;font-weight:500} .reality-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.reality-cards article{padding:clamp(28px,3vw,85px);border-radius:70px 25px 70px 25px;background:#171717;border-top:1px solid #a31c1b}.reality-cards article:nth-child(2){background:#183a31}.reality-cards article>span,.reality-steps article>span{font-size:.65em;letter-spacing:.13em;color:#ff2424}.reality-page h3{font-size:clamp(28px,2.4vw,65px);line-height:1.13;letter-spacing:-.03em;margin:25px 0}.reality-cards p,.reality-cards a{font-size:.88em}.reality-cards a{display:inline-block;margin-top:20px} .reality-watch>.lead{margin:45px 0;max-width:40em}.reality-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin:65px 0}.reality-steps article{padding-top:25px;border-top:2px solid #a31c1b}.reality-steps h3{font-size:clamp(25px,2vw,55px)}.reality-steps p{font-size:.87em}.reality-note{font-size:.8em;color:var(--muted);max-width:85em;margin-top:45px} .reality-inner{margin-top:70px}.reality-month{background:#102b25;border-radius:75px 25px 75px 25px;padding:clamp(28px,3vw,90px)}.reality-month h3{margin-top:0}.reality-month ul{padding-left:1.1em}.reality-month li{margin-bottom:18px}.reality-month li::marker{color:#ff2424}.reality-month p{font-size:.85em;color:var(--muted)}.reality-promise>.lead{max-width:42em;margin-top:45px}.reality-faq details{border-bottom:1px solid #ffffff35;padding:25px 0}.reality-faq h2{margin-bottom:45px}.reality-faq summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-size:clamp(19px,1.5vw,38px)}.reality-faq summary::-webkit-details-marker{display:none}.reality-faq summary span{color:#ff2424;font-size:1.4em;transition:transform .3s}.reality-faq details[open] summary span{transform:rotate(45deg)}.reality-faq details p{margin-top:25px;max-width:60em;color:var(--muted)} @media(max-width:1000px){.reality-cards{grid-template-columns:1fr}.reality-steps{grid-template-columns:1fr 1fr}.reality-intro{gap:35px}.reality-price{padding:35px}.reality-split{gap:40px}.nav nav{gap:20px}} @media(max-width:700px){.reality-intro,.reality-split{grid-template-columns:1fr}.reality-intro h1{font-size:clamp(48px,10vw,72px)}.reality-price{margin-top:20px}.reality-price strong{font-size:100px}.reality-steps{grid-template-columns:1fr}.reality-jumps{margin-top:45px;gap:10px}.reality-jumps a{padding:10px 16px}.reality-inner{margin-top:45px}.reality-cards article{border-radius:45px 20px 45px 20px}} /* astra1 2026-11-02 — independent buyer guidance, whether or not they hire us. */ .reality-independent{max-width:62em;color:var(--muted);margin-top:60px;font-size:.9em;border-left:3px solid #a31c1b;padding-left:25px} .reality-checklist>.lead{max-width:38em;margin:40px 0 60px}.reality-checklist ul{padding-left:1.1em;font-size:.88em}.reality-checklist li{margin:20px 0}.reality-checklist li::marker{color:#ff2424} /* astra1 2026-11-02 — founder-reported scanner test experience. */ .reality-experience blockquote{margin:60px 0 0;padding:clamp(30px,4vw,110px);border-left:3px solid #a31c1b;border-radius:0 70px 70px 35px;background:#102b25;max-width:75em}.reality-experience blockquote p{font-size:clamp(25px,2.4vw,64px);line-height:1.35;letter-spacing:-.025em}.reality-experience blockquote footer{font-size:.75em;color:var(--muted);margin-top:35px} /* astra1 2026-11-02 — free scan invitations, no embedded scanner or operational disclosure. */ .reality-scan>div{background:radial-gradient(ellipse at right bottom,#a31c1b30,transparent 65%),#102b25;border:1px solid #a31c1b80;border-radius:clamp(35px,7vw,180px) 35px clamp(35px,7vw,180px) 35px;padding:clamp(28px,5vw,140px)} .reality-scan p{max-width:58em}.reality-scan .lead{margin:40px 0}.reality-scan-actions{display:flex;flex-wrap:wrap;align-items:center;gap:25px;margin-top:35px}.scan-button{display:inline-flex;align-items:center;gap:25px;border-radius:60px;background:#a31c1b;color:#fff0e8;border:1px solid #e6655e;padding:18px 30px;box-shadow:0 15px 40px #a31c1b30;font-size:clamp(16px,1vw,25px);transition:transform .3s,box-shadow .3s}.scan-button:hover{transform:translateY(-3px);box-shadow:0 18px 45px #a31c1b60}.reality-scan-actions .text-link{margin:0} @media(max-width:600px){.scan-button{width:100%;justify-content:space-between;padding:16px 22px}.reality-scan h2{font-size:clamp(34px,8vw,48px)}} /* astra1 2026-11-02 — expertise, not an apparent $500 price offer. */ .reality-judgement{background:radial-gradient(ellipse at top right,#a31c1b30,transparent 65%),#102b25;border:1px solid #a31c1b80;border-radius:90px 25px 90px 25px;padding:clamp(30px,3.5vw,110px)} .reality-judgement h2{font-size:clamp(36px,3.8vw,110px);margin:35px 0 45px;line-height:1.07}.reality-judgement ol{list-style:none;margin:0;padding:0}.reality-judgement li{display:flex;gap:22px;border-top:1px solid #ffffff25;padding:25px 0;font-size:clamp(20px,1.4vw,38px)}.reality-judgement li>span{font-size:.6em;color:#ff2424;padding-top:7px}.reality-judgement small{display:block;font-size:.7em;color:var(--muted);margin-top:10px;line-height:1.5}.reality-scan-note{padding-top:55px;padding-bottom:55px}.reality-scan-note h2{font-size:clamp(28px,2.4vw,64px);margin-bottom:25px}.reality-scan-note p{max-width:65em;font-size:.85em;color:var(--muted)}.reality-scan-note a{text-decoration:underline;text-underline-offset:4px} /* astra1 2026-11-02 — varied editorial rhythm; keep reading order intact on small screens. */ .reality-page>.section{position:relative;isolation:isolate} .reality-page .eyebrow{display:inline-block;max-width:42em;line-height:1.6} .reality-page .reality-reverse{grid-template-columns:1.12fr .88fr} .reality-reverse>div:first-child{grid-column:2;grid-row:1} .reality-reverse>.reality-prose{grid-column:1;grid-row:1} .reality-page #price{grid-template-columns:.75fr 1.25fr;border-top:1px solid #ff242440} #price>.reality-prose{columns:2;column-gap:clamp(28px,3vw,90px);max-width:none} #price>.reality-prose p{break-inside:avoid} .reality-page #threats .section-heading{align-items:end;gap:5vw} #threats .reality-cards{grid-template-columns:1.2fr .8fr;gap:clamp(24px,3vw,80px);align-items:start} #threats .reality-cards article:first-child{grid-row:span 2;background:linear-gradient(145deg,#183a31,#0b2019);border-radius:clamp(40px,7vw,180px) 35px 35px 35px} #threats .reality-cards article:nth-child(2){margin-top:clamp(30px,5vw,130px);background:#281817} #threats .reality-cards article:nth-child(3){background:transparent;padding-top:0;border:0} .reality-page #before-launch{background:#102b25;border-radius:0 clamp(60px,12vw,300px) 0 clamp(60px,12vw,300px)} .reality-experience{display:grid;grid-template-columns:.7fr 1.3fr;gap:25px 6vw;align-items:center} .reality-experience>.eyebrow{grid-column:1/-1} .reality-experience h2{margin:0}.reality-experience blockquote{margin:0;background:#251716;border:0;border-radius:80px 30px 80px 30px;position:relative} .reality-experience .reality-note{grid-column:2;margin:0} .reality-interlude{background:radial-gradient(ellipse at 90% 100%,#a31c1b66,transparent 60%),#231411;border-radius:clamp(40px,9vw,240px) 0 clamp(40px,9vw,240px) 0;overflow:hidden} .reality-interlude>p:first-child{font-family:Georgia,serif;font-size:clamp(40px,5.5vw,165px);line-height:1.12;letter-spacing:-.04em;max-width:20em} .reality-interlude em{color:#ff2424}.reality-interlude>p:last-child{margin:clamp(30px,4vw,100px) 0 0 auto;max-width:28em;border-left:2px solid #ff2424;padding-left:25px} .reality-craft-image{margin:45px 0 0}.reality-craft-image img{width:100%;height:auto;display:block;border-radius:45% 12% 30% 12%;aspect-ratio:3/2;object-fit:cover}.reality-craft-image figcaption{font-size:.6em;letter-spacing:.13em;color:var(--muted);margin-top:25px;line-height:1.6} .reality-page #responsibility{border-bottom:1px solid #ff242440} .reality-watch{background:radial-gradient(ellipse at top right,#183a31,transparent 65%)} .reality-steps{gap:clamp(20px,2vw,60px);align-items:start}.reality-steps article{padding:clamp(24px,2.5vw,70px);background:#102b25;border-radius:50px 20px 50px 20px;border-top:0}.reality-steps article:nth-child(even){margin-top:clamp(35px,5vw,130px);background:#281817} #proper-build .reality-cards{display:block;margin-top:60px} #proper-build .reality-cards article{display:grid;grid-template-columns:.75fr 1.25fr;gap:0 7vw;align-items:start;background:transparent;border-radius:0;border-top:1px solid #ffffff25;padding:clamp(30px,4vw,100px) 0} #proper-build .reality-cards article>span{grid-column:1;grid-row:1} #proper-build .reality-cards h3{grid-column:1;grid-row:2 / span 2;margin:20px 0} #proper-build .reality-cards p{grid-column:2;margin-bottom:20px} #proper-build .reality-cards article:nth-child(2){grid-template-columns:1.25fr .75fr} #proper-build .reality-cards article:nth-child(2)>span,#proper-build .reality-cards article:nth-child(2)>h3{grid-column:2} #proper-build .reality-cards article:nth-child(2)>p{grid-column:1} #proper-build .reality-cards article:nth-child(2)>p:first-of-type{grid-row:1 / span 2} .reality-page #visibility>h2{text-align:right;margin-left:auto;max-width:13em} .reality-page #honesty{background:linear-gradient(130deg,#311817,#102b25 75%);border-radius:clamp(45px,10vw,260px) 0 clamp(45px,10vw,260px) 0} .reality-page #honesty>h2{max-width:16em}.reality-page #honesty>.lead{margin-left:auto;max-width:30em} .reality-checklist .reality-cards article{background:#102b25;border-radius:25px 70px 25px 70px}.reality-checklist .reality-cards article:nth-child(2){margin-top:65px;background:#281817}.reality-checklist .reality-cards article:nth-child(3){margin-top:130px} .reality-faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:0 6vw}.reality-faq>.eyebrow{grid-column:1;grid-row:1}.reality-faq>h2{grid-column:1;grid-row:2 / span 4}.reality-faq>details,.reality-faq>.reality-note{grid-column:2}.reality-faq>details:first-of-type{grid-row:1 / span 2} @media(max-width:1100px){#price>.reality-prose{columns:auto}.reality-steps{grid-template-columns:1fr 1fr}.reality-checklist .reality-cards article:nth-child(n){margin-top:0}.reality-experience{grid-template-columns:1fr 1fr}} @media(max-width:700px){.reality-page #price,.reality-page .reality-reverse,.reality-experience,.reality-faq,#threats .reality-cards{display:block}.reality-reverse>.reality-prose{margin-top:35px}.reality-experience blockquote{margin-top:35px}.reality-experience .reality-note{margin-top:25px}#threats .reality-cards article{margin:25px 0!important}#threats .reality-cards article:nth-child(3){padding-top:25px}.reality-interlude>p:first-child{font-size:clamp(36px,8vw,55px)}.reality-steps{grid-template-columns:1fr}.reality-steps article:nth-child(even){margin-top:0}#proper-build .reality-cards article,#proper-build .reality-cards article:nth-child(2){display:block}#proper-build .reality-cards h3{margin:20px 0 30px}.reality-page #visibility>h2{text-align:left}.reality-checklist .reality-cards article{margin-bottom:25px}.reality-faq>h2{margin-bottom:30px}} /* astra1 2026-11-02 — cinematic chapter break and accessible micro motion. */ .reality-motion-story{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:6vw}.reality-motion-story h2{font-size:clamp(42px,4.4vw,130px)}.reality-motion-story p{max-width:32em;margin-top:30px}.reality-motion-story .motion-toggle{border:1px solid #ff242480;border-radius:40px;padding:12px 24px;margin-top:25px;font-size:.8em;min-height:44px}.reality-motion-story .hummingbird-film{box-shadow:0 30px 100px #0006} .reality-page .reality-cards article,.reality-page .reality-steps article{transition:transform .6s ease,box-shadow .6s ease,opacity .9s ease}.reality-page .reality-cards article:hover,.reality-page .reality-steps article:hover{box-shadow:0 18px 55px #0004;transform:translateY(-6px)} .reality-page .reality-cards article:nth-child(2),.reality-page .reality-steps article:nth-child(2){transition-delay:80ms}.reality-page .reality-cards article:nth-child(3),.reality-page .reality-steps article:nth-child(3){transition-delay:140ms} .reality-craft-image{overflow:hidden}.reality-craft-image img{transition:filter .7s,transform 1.2s}.reality-craft-image:hover img{filter:saturate(1.15);transform:scale(1.025)} .reality-jumps a:hover,.reality-motion-story button:hover{box-shadow:0 9px 30px #a31c1b45}.reality-faq summary:hover{color:#efb1a4}.reality-faq details[open] p{animation:reality-answer .35s ease-out}@keyframes reality-answer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(max-width:700px){.reality-motion-story{grid-template-columns:1fr;gap:35px}} @media(prefers-reduced-motion:reduce){.reality-page .reveal,.reality-page .reality-cards article,.reality-page .reality-steps article,.reality-craft-image img{transform:none!important;transition:none!important;opacity:1!important}.reality-faq details[open] p{animation:none}} .no-motion .reality-page article,.no-motion .reality-craft-image img{transform:none!important;transition:none!important}.no-motion .reality-faq details[open] p{animation:none} /* astra1 2026-11-02 — Dave: remove exaggerated shapes; retain clear editorial variety. */ .reality-page #before-launch,.reality-page #honesty,.reality-page .reality-interlude{border-radius:0} .reality-page .reality-judgement,.reality-page .reality-cards article,.reality-page #threats .reality-cards article:first-child,.reality-page .reality-steps article,.reality-page .reality-month,.reality-page .reality-experience blockquote,.reality-page .hummingbird-film{border-radius:clamp(18px,1.5vw,36px)} .reality-page .reality-cards article:nth-child(n),.reality-page .reality-steps article:nth-child(n){margin-top:0} .reality-page .reality-cards,.reality-page .reality-steps{align-items:stretch} .reality-page #proper-build .reality-cards article{border-radius:0} /* astra1 2026-11-02 — align buyer guide with the homepage botanical art direction. */ .reality-hero{overflow:hidden;min-height:100svh;background:#06110c;padding-top:clamp(150px,10vw,280px)} .reality-hero .section-label,.reality-hero .reality-independent,.reality-hero .reality-jumps{position:relative;z-index:2} .reality-intro{display:block;position:relative;padding:clamp(20px,4vw,100px) 0;isolation:isolate} .reality-intro>div:first-child{position:relative;z-index:2;max-width:62%} .reality-intro h1{font-size:clamp(64px,8vw,250px);line-height:.98;letter-spacing:-.055em;max-width:10em} .reality-intro h1 i{font-family:Georgia,serif;font-weight:400;display:block} .reality-intro p:not(.lead){max-width:32em;line-height:1.65}.reality-intro .lead{font-size:clamp(23px,2vw,55px);margin-top:45px} .reality-botanical{position:absolute;right:-8%;top:-24%;width:65%;height:145%;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 90%,transparent)} .reality-botanical img{width:100%;height:100%;object-fit:contain;object-position:right center;filter:saturate(1.1);animation:reality-breathe 12s ease-in-out infinite alternate} .reality-botanical:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#06110cbb,transparent 45%),linear-gradient(0deg,#06110c,transparent 25%)} .reality-independent{border:0;padding:0;max-width:38em;margin-top:30px}.reality-jumps{margin-top:45px} .reality-page .reality-cards article,.reality-page #threats .reality-cards article:first-child,.reality-page #threats .reality-cards article:nth-child(2),.reality-page .reality-steps article,.reality-page .reality-checklist .reality-cards article{background:transparent;border-radius:0;border-top:1px solid #ffffff30;box-shadow:none;padding:clamp(25px,3vw,75px) 0} .reality-page .reality-cards,.reality-page .reality-steps{gap:clamp(30px,4vw,110px)} .reality-page .reality-cards article:hover,.reality-page .reality-steps article:hover{box-shadow:none} .reality-page .reality-cards h3,.reality-page .reality-steps h3{font-family:Georgia,serif;font-weight:400;font-size:clamp(32px,3vw,85px)} .reality-page .reality-interlude{background:transparent;border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25} .reality-page #honesty{background:transparent}.reality-page #honesty>h2{font-size:clamp(48px,6.8vw,205px);line-height:1.05} .reality-page .reality-motion-story .hummingbird-film{border-radius:24px;box-shadow:none} @keyframes reality-breathe{from{transform:translateY(0) scale(1)}to{transform:translateY(-12px) scale(1.025)}} @media(max-width:700px){.reality-intro>div:first-child{max-width:100%}.reality-intro h1{font-size:clamp(58px,12vw,84px)}.reality-intro{padding-top:220px}.reality-botanical{width:100%;height:470px;top:-100px;right:-25%;opacity:.85;mask-image:linear-gradient(0deg,transparent,#000 35%,#000 80%,transparent)}.reality-botanical:after{background:linear-gradient(0deg,#06110c,transparent 80%)}.reality-intro .lead{margin-top:35px}.reality-intro p:not(.lead){max-width:none}} @media(prefers-reduced-motion:reduce){.reality-botanical img{animation:none}}.no-motion .reality-botanical img{animation:none} /* astra1 2026-11-02 — homepage service showcase: imagery and type, no gadget cards. */ .service-editorial{display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px,7vw,200px) clamp(30px,6vw,170px);margin-top:clamp(45px,5vw,140px)} .service-story{display:block;min-width:0}.service-story:nth-child(even){padding-top:clamp(45px,7vw,180px)} .service-story-image{position:relative;overflow:hidden;border-radius:clamp(18px,2vw,50px);aspect-ratio:16/10;background:#06110c} .service-story-image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .8s;filter:saturate(.85)} .service-story:nth-child(4) .service-story-image img{object-position:center 38%} .service-story-image>span{position:absolute;right:25px;bottom:25px;width:clamp(48px,4vw,100px);height:clamp(48px,4vw,100px);border-radius:50%;display:grid;place-items:center;background:#a31c1b;color:#fff;font-size:clamp(25px,2.8vw,65px);transition:transform .5s,box-shadow .5s;box-shadow:0 10px 30px #a31c1b44} .service-story-copy{padding-top:clamp(25px,2.5vw,65px)}.service-story-copy>.eyebrow{font-size:clamp(11px,.8vw,21px);color:#ff2424;letter-spacing:.1em} .service-story-copy h3{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4.6vw,130px);line-height:1.05;letter-spacing:-.045em;margin:24px 0}.service-story-copy h3 i{color:#ff2424} .service-story-copy p{max-width:32em;color:var(--muted);font-size:clamp(16px,1.2vw,31px)} .service-story-link{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff35;padding:22px 0;margin-top:25px;font-size:clamp(14px,1vw,26px)} .service-story:hover img,.service-story:focus-visible img{transform:scale(1.035);filter:saturate(1.1)}.service-story:hover .service-story-image>span,.service-story:focus-visible .service-story-image>span{transform:rotate(45deg);box-shadow:0 15px 45px #a31c1b88} @media(max-width:700px){.service-editorial{grid-template-columns:1fr;gap:60px}.service-story:nth-child(even){padding-top:0}.service-story-copy h3{font-size:clamp(38px,9vw,58px)}} @media(prefers-reduced-motion:reduce){.service-story img,.service-story-image>span{transition:none!important;transform:none!important}}.no-motion .service-story img,.no-motion .service-story-image>span{transition:none!important;transform:none!important} /* astra1 2026-11-02 — real phone view settles over scrolling desktop. */ .device-preview{position:relative;overflow:visible!important;border-radius:22px!important;isolation:isolate} .preview-desktop{height:100%;width:100%;overflow:hidden;border-radius:22px;background:#10231c} .device-preview .preview-desktop>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:none!important;transition:object-position 9s cubic-bezier(.25,.1,.25,1),filter .6s!important} .portfolio-card:hover .preview-scroll>img,.portfolio-card:focus-visible .preview-scroll>img,.service-story:hover .preview-scroll>img,.service-story:focus-visible .preview-scroll>img{object-position:50% 100%} .preview-phone{position:absolute;z-index:3;right:3%;bottom:-5%;width:26%;aspect-ratio:390/844;padding:clamp(4px,.5vw,11px);border-radius:clamp(16px,2vw,42px);background:#121817;border:1px solid #ffffff60;box-shadow:-12px 18px 45px #0007;opacity:0;transform:translateX(45%) translateY(12px) rotate(5deg);pointer-events:none;transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .5s} .preview-phone:after{content:'';position:absolute;top:2.5%;left:36%;width:28%;height:1.5%;background:#121817;border-radius:30px} .device-preview .preview-phone>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:clamp(12px,1.6vw,33px);transform:none!important;filter:none!important} .portfolio-card:hover .preview-phone,.portfolio-card:focus-visible .preview-phone,.service-story:hover .preview-phone,.service-story:focus-visible .preview-phone{opacity:1;transform:translateX(0) translateY(0) rotate(0)} @media(hover:none){.preview-phone{opacity:1;transform:none;width:25%;right:2%;bottom:-3%}.preview-scroll>img{object-position:top!important}} @media(prefers-reduced-motion:reduce){.preview-phone{transition:none!important;transform:none!important}.device-preview .preview-scroll>img{transition:none!important;object-position:top!important}} .no-motion .preview-phone{transition:none!important;transform:none!important}.no-motion .device-preview .preview-scroll>img{transition:none!important;object-position:top!important} main h1 em,main h1 i,main h2 i,.service-story-copy h3 i{color:#ff2424} /* astra1 2026-11-02 — one portfolio; services have their own natural art direction. */ .services-atmosphere{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(45px,7vw,200px);align-items:start;margin-top:clamp(60px,6vw,170px)} .services-betta{position:sticky;top:150px;margin:0;min-width:0}.services-betta img{width:115%;max-width:none;height:auto;margin-left:-8%;display:block;mask-image:radial-gradient(ellipse at center,#000 52%,transparent 73%)} .services-betta figcaption{font-size:clamp(11px,.85vw,23px);letter-spacing:.15em;line-height:1.8;color:#aac4b9;margin-top:40px;padding-left:4%} .services-index{min-width:0}.service-line{display:grid;grid-template-columns:35px 1fr;gap:clamp(15px,2vw,45px);padding:clamp(28px,3.2vw,80px) 0;border-top:1px solid #ffffff25}.service-line:first-child{padding-top:0;border-top:0}.service-line-number{font-size:clamp(12px,.85vw,24px);color:#ff2424;padding-top:10px} .service-line h3{font-family:Georgia,serif;font-size:clamp(32px,3.2vw,90px);font-weight:400;line-height:1.12;letter-spacing:-.035em;margin:0 0 22px;transition:color .35s,transform .5s}.service-line p{max-width:31em;color:var(--muted);font-size:clamp(16px,1.1vw,30px);line-height:1.6}.service-line-action{display:inline-block;margin-top:22px;font-size:clamp(13px,.85vw,23px);border-bottom:1px solid #ff242480;padding-bottom:5px;transition:color .35s}.service-line:hover h3,.service-line:focus-visible h3{color:#ff2424;transform:translateX(5px)}.service-line:hover .service-line-action{color:#ff2424} @media(max-width:800px){.services-atmosphere{grid-template-columns:1fr;gap:45px}.services-betta{position:relative;top:auto}.services-betta img{width:100%;margin:0}.services-betta figcaption{margin-top:15px}.service-line{grid-template-columns:24px 1fr;padding:30px 0}} @media(prefers-reduced-motion:reduce){.service-line h3{transform:none!important;transition:none}}.no-motion .service-line h3{transform:none!important;transition:none} /* astra1 2026-11-02 — proportions and stagger from original WebDifferent homevideo slider. */ .portfolio-image.device-preview{overflow:hidden!important;aspect-ratio:4/3;background:radial-gradient(ellipse at 65% 45%,#294a4055,transparent 70%),#101b17;border-radius:24px!important} .portfolio-image.device-preview .preview-desktop{position:absolute;left:8%;top:8%;width:76%;height:84%;border-radius:clamp(14px,1.5vw,32px);box-shadow:0 18px 50px #0005;transition:transform 1.2s ease} .portfolio-image.device-preview .preview-phone{right:5%;top:28%;bottom:auto;width:32%;height:65%;aspect-ratio:auto;border-radius:clamp(14px,1.5vw,32px);padding:clamp(3px,.25vw,6px);transform:translateX(120%);transition:transform 1.8s ease,opacity 1.2s ease;box-shadow:15px 22px 35px #0005} .portfolio-image.device-preview .preview-phone img{border-radius:clamp(10px,1.2vw,26px)} .portfolio-card:hover .device-preview .preview-phone,.portfolio-card:focus-visible .device-preview .preview-phone{opacity:1;transform:translateX(0)} .portfolio-card:hover .device-preview .preview-desktop,.portfolio-card:focus-visible .device-preview .preview-desktop{transform:translateX(-2%)} .portfolio-image .preview-phone:after{display:none} @media(hover:none){.portfolio-image.device-preview .preview-phone{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.portfolio-image.device-preview .preview-phone,.portfolio-image.device-preview .preview-desktop{transition:none!important;transform:none!important}} .no-motion .portfolio-image.device-preview .preview-phone,.no-motion .portfolio-image.device-preview .preview-desktop{transition:none!important;transform:none!important} /* astra1 2026-11-02 — a red rotating read-more cursor, not tiny arrow badges. */ .portfolio-image.device-preview{border-radius:3px!important}.portfolio-image.device-preview .preview-desktop{border-radius:7px} .project-read-cursor{display:none;position:absolute;left:var(--cursor-x,50%);top:var(--cursor-y,50%);width:clamp(85px,8vw,175px);aspect-ratio:1;background:#c62b2b;color:#fff;border-radius:50%;z-index:8;pointer-events:none;transform:translate(-50%,-50%) scale(.75);opacity:0;transition:opacity .25s,transform .35s;box-shadow:0 10px 30px #0002} .project-read-cursor svg{width:100%;height:100%;overflow:visible}.project-read-cursor text{fill:currentColor;font-family:DM,sans-serif;font-size:10px;font-weight:500;letter-spacing:.5px}.read-ring{transform-origin:60px 60px;animation:read-orbit 12s linear infinite}.read-swoop{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} @keyframes read-orbit{to{transform:rotate(360deg)}} @media(hover:hover) and (pointer:fine){.project-read-cursor{display:block}.portfolio-card .portfolio-image:hover{cursor:none}.portfolio-image:hover .project-read-cursor,.portfolio-card:focus-visible .project-read-cursor{opacity:1;transform:translate(-50%,-50%) scale(1)}} .portfolio-card:focus-visible .project-read-cursor{left:50%;top:50%} @media(prefers-reduced-motion:reduce){.read-ring{animation:none}.project-read-cursor{transition:none}} .no-motion .read-ring{animation:none}.no-motion .project-read-cursor{transition:none} .project-read-cursor{height:clamp(85px,8vw,175px)}.project-read-cursor svg{display:block;position:absolute;inset:0} /* astra1 2026-11-02 — drifting crimson silk through the deep green. */ .has-crimson-wisp{position:relative;isolation:isolate} .crimson-wisp{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;border-radius:inherit} .crimson-wisp:before{content:'';position:absolute;inset:-10%;background:url('/assets/crimson-wisp.svg') center/100% 100% no-repeat;opacity:.75;transform-origin:60% 50%;animation:crimson-drift 22s ease-in-out infinite alternate;animation-play-state:paused} .has-crimson-wisp.wisp-in-view .crimson-wisp:before{animation-play-state:running} .principles .crimson-wisp:before{transform:scaleX(-1);animation-delay:-8s;opacity:.5} @keyframes crimson-drift{from{translate:-2% 3%;rotate:-4deg;scale:1}to{translate:3% -3%;rotate:4deg;scale:1.09}} .no-motion .crimson-wisp:before{animation:none} @media(prefers-reduced-motion:reduce){.crimson-wisp:before{animation:none}} @media(max-width:700px){.crimson-wisp:before{background-size:auto 100%;opacity:.55}} /* astra1 2026-11-02 — gentle fish swim, transform-only and paused off screen. */ .services-betta img{transform-origin:50% 50%;animation:betta-swim 11s ease-in-out infinite;animation-play-state:paused} .services-betta.fish-in-view img{animation-play-state:running} @keyframes betta-swim{0%,100%{transform:translate(-1%,1%) rotate(-1.5deg)}45%{transform:translate(2%,-1.5%) rotate(1deg)}75%{transform:translate(.5%,-.5%) rotate(-.4deg)}} .no-motion .services-betta img{animation:none} @media(prefers-reduced-motion:reduce){.services-betta img{animation:none}} /* astra1 2026-11-02 — sparse, translucent bubbles from the mouth. */ .betta-water{position:relative;width:115%;margin-left:-8%;aspect-ratio:3/2} .services-betta .betta-water>img{width:100%;margin:0;animation:none} .betta-bubbles{position:absolute;left:82.5%;top:39%;width:1px;height:1px;pointer-events:none} .betta-bubbles i{position:absolute;width:clamp(4px,.4vw,12px);height:clamp(4px,.4vw,12px);border:1px solid #e1ffff65;border-radius:50%;background:radial-gradient(circle at 30% 25%,#e9ffff99,transparent 35%);box-shadow:inset -1px -1px 2px #b3e8db30;opacity:0;animation:betta-bubble 9s linear infinite;animation-play-state:paused} .betta-bubbles i:nth-child(2){animation-delay:.6s;scale:.65}.betta-bubbles i:nth-child(3){animation-delay:1.2s;scale:.8} .fish-in-view .betta-bubbles i{animation-play-state:running} @keyframes betta-bubble{0%{opacity:0;transform:translate(0,0) scale(.5)}4%{opacity:.65}30%{opacity:.4;transform:translate(12px,-95px) scale(1)}42%,100%{opacity:0;transform:translate(3px,-150px) scale(1.1)}} .no-motion .betta-bubbles{display:none} @media(prefers-reduced-motion:reduce){.betta-bubbles{display:none}} @media(max-width:800px){.betta-water{width:100%;margin:0}} /* astra1 2026-11-02 — actual fin movement in a locally hosted, lazy video loop. */ .betta-water>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 52%,transparent 73%)} .betta-water.film-playing>video{opacity:1} /* astra1 2026-11-02 — red northern lights: two independently drifting curtains. */ .crimson-wisp:before,.crimson-wisp:after{content:'';position:absolute;inset:-15%;background:url('/assets/crimson-aurora.svg') center/100% 100% no-repeat;transform-origin:50% 60%;opacity:.55;animation:aurora-curtain 24s ease-in-out infinite alternate;animation-play-state:paused} .crimson-wisp:after{opacity:.22;transform:scaleX(-1);animation-name:aurora-veil;animation-duration:31s;animation-delay:-13s;mix-blend-mode:screen} .has-crimson-wisp.wisp-in-view .crimson-wisp:after{animation-play-state:running} @keyframes aurora-curtain{0%{translate:-3% 4%;scale:1 .88;rotate:-7deg}50%{translate:1% -2%;scale:1.04 1.04;rotate:-3deg}100%{translate:4% -5%;scale:1.08 .94;rotate:4deg}} @keyframes aurora-veil{from{translate:5% -12%;scale:1.1 .8;rotate:9deg}to{translate:-5% 7%;scale:1 1.15;rotate:-6deg}} .no-motion .crimson-wisp:before,.no-motion .crimson-wisp:after{animation:none} @media(prefers-reduced-motion:reduce){.crimson-wisp:before,.crimson-wisp:after{animation:none}} @media(max-width:700px){.crimson-wisp:before,.crimson-wisp:after{background-size:auto 100%;opacity:.35}.crimson-wisp:after{opacity:.15}} /* astra1 2026-11-02 — feather section boundaries; retain crisp vector light strands. */ .crimson-wisp{mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent)} .crimson-wisp:before{opacity:.7} .crimson-wisp:after{opacity:.25} @media(max-width:700px){.crimson-wisp:before{opacity:.45}.crimson-wisp:after{opacity:.18}} /* astra1 2026-11-02 — one continuous, more dramatic aurora behind the page. */ body{isolation:isolate} .crimson-wisp{display:none} .site-aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 2.4s;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)} body[data-aurora="on"] .site-aurora{opacity:1} .site-aurora:before,.site-aurora:after{content:'';position:absolute;inset:-25%;background:url('/assets/crimson-aurora.svg') center/cover no-repeat;opacity:.9;animation:aurora-curtain 24s ease-in-out infinite alternate;animation-play-state:paused} .site-aurora:after{transform:scaleX(-1);opacity:.4;animation-name:aurora-veil;animation-duration:31s;animation-delay:-13s} body[data-aurora="on"] .site-aurora:before,body[data-aurora="on"] .site-aurora:after{animation-play-state:running} .no-motion .site-aurora:before,.no-motion .site-aurora:after{animation:none} @media(prefers-reduced-motion:reduce){.site-aurora:before,.site-aurora:after{animation:none}} @media(max-width:700px){.site-aurora:before{opacity:.55}.site-aurora:after{opacity:.2}} /* astra1 2026-11-02 — dissolve the source backdrop into the page, preserve bright fins. */ .betta-water{mix-blend-mode:lighten} .services-betta .betta-water>img,.betta-water>video{mask-image:radial-gradient(ellipse at 47% 49%,#000 35%,#000d 49%,#0007 60%,transparent 74%)} /* Blend at the figure boundary so reveal transforms cannot trap the dark backdrop. */ .has-crimson-wisp{isolation:auto} .services-betta{mix-blend-mode:lighten} .betta-water{mix-blend-mode:normal} /* astra1 2026-11-02 — loose crimson veils replace the regular light bars. */ .site-aurora:before{opacity:.72;background-size:cover} .site-aurora:after{opacity:.2;animation-duration:39s} @media(max-width:700px){.site-aurora:before{opacity:.45}.site-aurora:after{opacity:.12}} /* astra1 2026-11-02 — only the active preview animates; leaving snaps straight home. */ .portfolio-card .device-preview .preview-scroll>img{transition:none!important;object-position:50% 0!important} @media(hover:hover) and (pointer:fine){ .portfolio-card:hover .device-preview .preview-scroll>img,.portfolio-card:focus-visible .device-preview .preview-scroll>img{object-position:50% 100%!important;transition:object-position 9s linear!important} } .portfolio-card .device-preview .preview-desktop,.portfolio-card .device-preview .preview-phone{transition:none!important} .portfolio-card:hover .device-preview .preview-desktop,.portfolio-card:focus-visible .device-preview .preview-desktop{transition:transform 1.2s ease!important} .portfolio-card:hover .device-preview .preview-phone,.portfolio-card:focus-visible .device-preview .preview-phone{transition:transform 1.8s ease,opacity 1.2s ease!important} .portfolio-card .read-ring{animation-play-state:paused} .portfolio-card:hover .read-ring,.portfolio-card:focus-visible .read-ring{animation-play-state:running} .no-motion .portfolio-card .device-preview .preview-scroll>img{transition:none!important;object-position:50% 0!important} @media(prefers-reduced-motion:reduce){.portfolio-card .device-preview .preview-scroll>img{transition:none!important;object-position:50% 0!important}} /* astra1 2026-11-02 — silk billows slowly; fewer overlapping layers preserve the folds. */ .site-aurora:before{opacity:.85;animation-duration:28s} .site-aurora:after{opacity:.12;animation-duration:43s} @media(max-width:700px){.site-aurora:before{opacity:.5}.site-aurora:after{opacity:.08}} /* astra1 2026-11-02 — static website screenshots; phone reveal remains the interaction. */ .portfolio-card .device-preview .preview-scroll>img, .portfolio-card:hover .device-preview .preview-scroll>img, .portfolio-card:focus-visible .device-preview .preview-scroll>img{object-position:50% 0!important;transition:none!important;transform:none!important} .portfolio-image.device-preview{background:linear-gradient(#10231c30,#10231c30),url('/assets/crimson-aurora.svg') center/cover no-repeat,#101b17} /* astra1 2026-11-02 — reflected crimson studio lighting, with an uncut floor. */ .automotive-section{position:relative;isolation:isolate;background:#06110c;overflow:hidden} .automotive-section .growth-stage{grid-template-columns:36% 64%;padding-bottom:clamp(90px,8vw,200px)} .automotive-section .growth-copy{position:relative;z-index:2;margin-right:-12%} .automotive-art{width:120%;margin-left:-12%;border-radius:0;box-shadow:none;isolation:auto;overflow:visible;mix-blend-mode:lighten;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 93%,transparent)} .automotive-art img{mask-image:linear-gradient(transparent,#000 9%,#000 88%,transparent)} .automotive-section:after{content:'';position:absolute;z-index:-1;pointer-events:none;left:0;right:0;bottom:5%;height:35%;background:radial-gradient(ellipse at 72% 65%,#c71c1938,transparent 48%),linear-gradient(174deg,transparent 44%,#ff332418 45%,transparent 46%);opacity:.85} .automotive-section .specimen{color:#b9c4bc} .services.section{position:relative;isolation:isolate} .services.section:after{content:'';position:absolute;z-index:-1;pointer-events:none;left:0;bottom:8%;width:52%;height:20%;background:radial-gradient(ellipse at 48% 50%,#ea241d24,transparent 64%);transform:skewX(-20deg)} .ai-scene{display:grid;grid-template-columns:44% 56%;position:relative;align-items:center;min-height:65vh;isolation:isolate} .ai-scene-copy{position:relative;z-index:1;margin-right:-25%;padding:4vw 0} .ai-scene h1{font-size:clamp(58px,7vw,220px);max-width:8em;line-height:1.02} .ai-scene h1 i{color:#ff2424;display:block} .ai-scene .lead{max-width:25em;margin-top:32px} .ai-scene img{width:125%;margin-left:-16%;mix-blend-mode:lighten;mask-image:radial-gradient(ellipse at 58% 52%,#000 45%,transparent 75%)} @media(max-width:750px){.automotive-section .growth-stage{display:flex;padding-bottom:80px}.automotive-section .growth-copy{margin:0}.automotive-art{width:116%;margin-left:-8%}.services.section:after{width:100%;bottom:auto;top:38%;height:12%}.ai-scene{display:flex;flex-direction:column;min-height:0}.ai-scene-copy{margin:0;padding:0}.ai-scene h1{font-size:clamp(52px,12vw,86px)}.ai-scene img{width:115%;margin:-4% -7.5% 0}.ai-scene .lead{font-size:18px}} /* astra1 2026-11-02 — contain artwork at the viewport and keep studio blacks clean. */ .subpage:has(.ai-scene){overflow:clip;background:#06110c} .ai-scene img{width:116%;margin-left:-16%} .automotive-section .section-label{margin-bottom:clamp(30px,3vw,90px)} .automotive-section .growth-stage{padding-top:0} @media(max-width:750px){.ai-scene img{width:115%;margin:-4% -7.5% 0}} /* astra1 2026-11-02 — decorative reveal overshoot must not widen the page. */ body{overflow-x:clip} /* astra1 2026-11-02 — the reference's fine red edge and one-sided light spill. */ .site-aurora,.crimson-wisp{display:none!important} .has-light-blade{position:relative;isolation:isolate} .light-blade{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mask-image:linear-gradient(transparent,#000 8%,#000 87%,transparent)} .light-blade svg{width:100%;height:100%;display:block} .blade-edge{fill:none;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(-2px 0 4px #ff102b80)} .blade-spill,.blade-floor{opacity:0} .blade-drawn .blade-edge{animation:blade-cut 1.6s cubic-bezier(.2,.7,.3,1) forwards} .blade-drawn .blade-spill,.blade-drawn .blade-floor{animation:blade-light 1.8s ease .3s forwards} @keyframes blade-cut{to{stroke-dashoffset:0}} @keyframes blade-light{to{opacity:1}} .principles .light-blade{left:38%;right:-10%;opacity:.65} .contact .light-blade{left:28%;right:0} .services .light-blade{right:48%;left:-20%;opacity:.8} .portfolio-image.device-preview{background:linear-gradient(108deg,transparent 74.7%,#f2233320 77.7%,#ff3848a0 78%,transparent 78.2%),#101b17} .no-motion .blade-edge{animation:none;stroke-dashoffset:0} .no-motion .blade-spill,.no-motion .blade-floor{animation:none;opacity:1} @media(prefers-reduced-motion:reduce){.blade-edge{animation:none!important;stroke-dashoffset:0}.blade-spill,.blade-floor{animation:none!important;opacity:1}} @media(max-width:750px){.light-blade{left:30%;right:-20%;opacity:.6}.services .light-blade{left:-40%;right:15%;height:55%}.principles .light-blade{left:0;right:-30%}.contact .light-blade{left:20%;right:-20%}} /* Tight spill hugs the luminous edge instead of washing over the whole section. */ .blade-edge{filter:drop-shadow(-2px 0 5px #ff102bcc) drop-shadow(-5px 0 14px #ea001b70)} .blade-floor{filter:blur(3px)} .has-light-blade{overflow:clip} /* astra1 2026-11-02 — single desktop/phone stage, the site's palette around the work. */ #work:has(.work-showcase){padding-top:clamp(60px,5vw,150px);padding-bottom:clamp(65px,5vw,150px)} #work:has(.work-showcase) .section-label{margin-bottom:clamp(35px,3vw,80px)} #work:has(.work-showcase) .section-heading{margin-bottom:clamp(25px,3vw,70px)} #work:has(.work-showcase) .section-heading h2{font-size:clamp(44px,4.8vw,130px)} #work:has(.work-showcase) .section-heading h2 br{display:none} #work:has(.work-showcase) .section-heading h2 i{margin-left:.15em} .work-showcase{display:grid!important;margin:0!important} .work-showcase .portfolio-card{display:grid;grid-template-columns:65% 35%;gap:0;margin:0!important;padding:0!important;align-items:center;transform:none!important;opacity:1} .work-showcase .portfolio-card[hidden]{display:none!important} .work-showcase .portfolio-image{aspect-ratio:1.6!important;min-height:0;border-radius:0!important;overflow:hidden;background:radial-gradient(ellipse at 47% 94%,#b51e2428,transparent 50%),linear-gradient(0deg,#060e0c,transparent 40%)!important;box-shadow:none} .work-showcase .portfolio-image:before,.work-showcase .portfolio-image:after{display:none} .work-showcase .device-preview .preview-desktop{left:4%;top:8%;width:78%;height:75%;border:1px solid #c5d6d531;border-radius:10px;transform:none!important;box-shadow:0 24px 42px #0008} .work-showcase .device-preview .preview-phone{right:7%;top:29%;width:20%;height:66%;border-radius:clamp(15px,1.3vw,30px);background:#080e0c;border:1px solid #c4d6d54d;opacity:1;transform:none!important;box-shadow:0 22px 32px #000a} .work-showcase .device-preview .preview-phone img{object-fit:cover;object-position:top;border-radius:clamp(12px,1vw,24px)} .work-showcase .portfolio-image>img{width:84%;height:80%;margin:4% auto;object-fit:cover;object-position:top} .work-showcase .project-caption{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.8vw,40px);padding:0 0 0 clamp(25px,4vw,110px)} .work-showcase .project-caption h3{font-size:clamp(32px,4vw,110px);line-height:1.05;letter-spacing:-.045em} .work-showcase .project-caption>span:not(.showcase-view){order:-1;color:var(--accent);font-size:clamp(10px,.75vw,18px);letter-spacing:.15em} .showcase-story{font-size:clamp(17px,1.3vw,30px);max-width:23em;color:var(--muted)} .showcase-view{font-size:clamp(14px,1vw,22px);border-bottom:1px solid #ff2424;padding-bottom:6px;margin-top:10px} .showcase-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:24px 0;margin-bottom:35px;font-size:clamp(13px,.95vw,22px)} .showcase-controls button{min-height:48px;padding:10px 20px;border:1px solid #ffffff40;border-radius:40px;transition:border-color .2s,background .2s} .showcase-controls button:hover{background:#a31c1b30;border-color:#ff2424} .showcase-count{color:var(--muted);text-align:center} .showcase-active .preview-desktop{animation:showcase-enter .7s ease both} .showcase-active .preview-phone{animation:showcase-phone .9s ease both} @keyframes showcase-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}} @keyframes showcase-phone{from{opacity:0;translate:30px 0}to{opacity:1;translate:0 0}} .no-motion .work-showcase *{animation:none!important;transition:none!important} @media(prefers-reduced-motion:reduce){.work-showcase *{animation:none!important;transition:none!important}} @media(max-width:750px){.work-showcase .portfolio-card{grid-template-columns:1fr}.work-showcase .portfolio-image{aspect-ratio:1.2!important;margin:0 -12px;width:calc(100% + 24px)}.work-showcase .device-preview .preview-desktop{height:73%;width:80%;left:2%}.work-showcase .device-preview .preview-phone{width:25%;height:66%;right:3%;top:28%}.work-showcase .project-caption{padding:18px 0 28px;gap:14px}.work-showcase .project-caption h3{font-size:36px}.showcase-controls{flex-wrap:wrap;gap:10px;padding:18px 0}.showcase-count{order:3;flex-basis:100%;font-size:12px;margin-top:10px}#work:has(.work-showcase) .section-heading{display:block}#work:has(.work-showcase) .section-heading p{margin-top:20px;font-size:16px}} .work-showcase .project-caption,.work-showcase .project-caption>span{text-align:left;max-width:none} .work-showcase .project-caption h3{white-space:normal} /* astra1 2026-11-02 — alternating entrances: desktop first, phone follows, brand-toned stage. */ #work:has(.work-showcase){background:var(--work-colour,#10272d);transition:background-color 1.1s ease,background 1.1s ease} .work-showcase{--entry-x:-18%} .work-showcase[data-entry="right"]{--entry-x:18%} .work-showcase .showcase-active .preview-desktop{animation:showcase-desktop-arrive .95s cubic-bezier(.16,1,.3,1) both} .work-showcase .showcase-active .preview-phone{animation:showcase-phone-arrive 1.05s cubic-bezier(.16,1,.3,1) .38s both} .work-showcase .showcase-active .portfolio-image>img{animation:showcase-desktop-arrive .95s cubic-bezier(.16,1,.3,1) both} .work-showcase .showcase-active .project-caption{animation:showcase-caption-arrive .65s ease .15s both} @keyframes showcase-desktop-arrive{from{opacity:0;translate:var(--entry-x) 0}to{opacity:1;translate:0 0}} @keyframes showcase-phone-arrive{from{opacity:0;translate:var(--entry-x) 0}to{opacity:1;translate:0 0}} @keyframes showcase-caption-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}} .no-motion #work:has(.work-showcase){transition:none} .no-motion .work-showcase .showcase-active *{animation:none!important} @media(prefers-reduced-motion:reduce){#work:has(.work-showcase){transition:none}.work-showcase .showcase-active *{animation:none!important}} /* astra1 2026-11-02 — jade metal devices, lacquer floor, restrained crimson reflection. */ .work-showcase .portfolio-image{background:radial-gradient(ellipse at 50% 85%,#df182a30,transparent 43%),linear-gradient(0deg,#07110e 0%,#11221c88 25%,transparent 60%)!important} .work-showcase .device-preview .preview-desktop{top:9%;left:5%;width:76%;height:65%;padding:clamp(5px,.45vw,12px);background:linear-gradient(130deg,#d9eee4,#6f9d8c 25%,#335d50 50%,#b1d8c4 77%,#477460);border:1px solid #d1eee0aa;border-radius:clamp(10px,1vw,24px);overflow:visible;box-shadow:inset 0 1px 2px #ffffffb0,0 2px 0 #ff35465c,0 25px 45px #000b;-webkit-box-reflect:below 12px linear-gradient(transparent 65%,#ffffff18)} .work-showcase .device-preview .preview-desktop img{width:100%;height:100%;border-radius:clamp(5px,.5vw,13px);object-fit:cover;object-position:top} .work-showcase .device-preview .preview-desktop:after{content:'';position:absolute;left:-5%;right:-5%;bottom:clamp(-13px,-.65vw,-6px);height:clamp(7px,.8vw,19px);border-radius:2px 2px 50% 50% / 2px 2px 80% 80%;background:linear-gradient(#c5e2d3,#719c88 35%,#375e50 60%,#b8dbcb 75%,#1c332b);box-shadow:0 4px 10px #f1273a35} .work-showcase .device-preview .preview-phone{top:25%;height:62%;right:8%;padding:clamp(4px,.35vw,9px);border:1px solid #c4e8d3;background:linear-gradient(135deg,#c3e1d0,#598773 40%,#294d40 65%,#a7d3bc);box-shadow:inset 1px 1px 2px #ffffff9c,3px 1px 2px #ef334044,0 20px 30px #000a;-webkit-box-reflect:below 6px linear-gradient(transparent 75%,#ffffff14)} .work-showcase .device-preview .preview-phone img{height:100%;width:100%} .work-showcase .portfolio-image.device-preview:after{display:block;content:'';position:absolute;left:7%;right:9%;top:88%;height:1px;background:linear-gradient(90deg,transparent,#f2293980 40%,#b6dac244 70%,transparent);box-shadow:0 6px 18px 2px #d2152428;pointer-events:none} @media(max-width:750px){.work-showcase .device-preview .preview-desktop{width:77%;left:4%;height:64%}.work-showcase .device-preview .preview-phone{width:24%;height:60%;right:4%;top:27%}} /* astra1 2026-11-02 — reflections belong to devices and share their entrance/exit. */ .work-showcase .showcase-leaving .preview-desktop,.work-showcase .showcase-leaving .preview-phone,.work-showcase .showcase-leaving .portfolio-image>img{animation:showcase-device-leave .45s cubic-bezier(.5,0,.8,.3) forwards} .work-showcase .showcase-leaving .project-caption{animation:showcase-caption-leave .3s ease forwards} @keyframes showcase-device-leave{from{opacity:1;translate:0 0}to{opacity:0;translate:calc(var(--entry-x) * -1) 0}} @keyframes showcase-caption-leave{to{opacity:0;translate:0 -10px}} /* astra1 2026-11-02 — Dave's crimson heading accents, replacing coral pink. */ :root{--heading-crimson:#ff2424} main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{color:var(--heading-crimson)} /* astra1 2026-11-02 — polished crimson glass type; static specular highlight. */ @supports (background-clip:text){ main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{ background:linear-gradient(118deg,#ff2424 4%,#df1b2d 30%,#fa3544 44%,#ff817a 48%,#ff4d54 50%,#e51c30 55%,#f12a38 78%,#db1b2b 100%); background-clip:text;-webkit-background-clip:text;color:transparent; -webkit-text-stroke:.35px #ff566033;filter:drop-shadow(0 2px 0 #530b1630); } } @media(forced-colors:active){main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i{background:none;color:CanvasText;-webkit-text-stroke:0;filter:none}} /* astra1 2026-11-02 — illuminated crimson glass lettering, emitting its own light. */ @supports (background-clip:text){ main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{ background:linear-gradient(168deg,#ffb1a1 0%,#ff4553 13%,#cb1029 29%,#ff3046 43%,#fff0df 48%,#ff9a91 49.5%,#ff203b 53%,#d00a25 65%,#ff4050 82%,#ffb0a0 100%); background-clip:text;-webkit-background-clip:text;color:transparent; -webkit-text-stroke:.55px #ff7d8490; filter:drop-shadow(0 0 2px #ff304b90) drop-shadow(0 0 10px #f20a355c) drop-shadow(0 5px 30px #e000263d); } } @media(forced-colors:active){main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i{background:none;color:CanvasText;-webkit-text-stroke:0;filter:none}} /* astra1 2026-11-02 — match the cyborg: smoked glass, silver reflections, internal crimson. */ @supports (background-clip:text){ main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{ background:linear-gradient(122deg,#fd3046 0%,#a21b2c 9%,#253a35 19%,#b9d1c7 23%,#f4eee3 24%,#41504b 25.5%,#151e1b 34%,#7b1124 43%,#ff173b 48%,#ff8b8b 49%,#dc0b2e 51%,#3e1521 58%,#17221e 67%,#869e93 74%,#dce6db 75%,#35473e 77%,#af132c 88%,#ff2646 100%); background-clip:text;-webkit-background-clip:text;color:transparent; -webkit-text-stroke:clamp(.6px,.035vw,1.2px) #f64c639e; filter:drop-shadow(0 1px 0 #ff859666) drop-shadow(0 0 5px #ed123f55) drop-shadow(0 5px 18px #d5002833); } } @media(forced-colors:active){main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i{background:none;color:CanvasText;-webkit-text-stroke:0;filter:none}} /* astra1 2026-11-02 — actual liquid-crimson reference texture inside live heading text. */ @supports (background-clip:text){ main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{ background-image:url('/assets/crimson-glass-texture.avif'); background-size:100% 100%;background-position:center;background-repeat:no-repeat; background-clip:text;-webkit-background-clip:text;color:transparent; -webkit-text-stroke:clamp(.7px,.045vw,1.5px) #ed29448c; filter:drop-shadow(0 0 2px #ff163a70) drop-shadow(0 3px 12px #ce002b30); } } @media(forced-colors:active){main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i{background:none;color:CanvasText;-webkit-text-stroke:0;filter:none}} /* Keep the red glass body readable through the reference's deep shadows. */ @supports(background-clip:text){ main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{ background-color:#b91c32;background-blend-mode:screen;background-size:100% 170%;background-position:center 65%; -webkit-text-stroke:clamp(.7px,.045vw,1.5px) #ff5066a0; filter:drop-shadow(0 0 2px #ff163a80) drop-shadow(0 3px 12px #ce002b40); } } @media(forced-colors:active){main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i{background:none;color:CanvasText;-webkit-text-stroke:0;filter:none}} /* astra1 2026-11-02 — Dave's marked jawline highlight: hot red, no burgundy cast. */ @supports(background-clip:text){ main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{ background-color:#df0810;background-blend-mode:screen;background-size:250% 250%;background-position:55% 50%; -webkit-text-stroke:clamp(.7px,.045vw,1.5px) #ff3025b0; filter:drop-shadow(0 0 3px #ff100b90) drop-shadow(0 3px 14px #ed080038); } } @media(forced-colors:active){main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i{background:none;color:CanvasText;-webkit-text-stroke:0;filter:none}} /* astra1 2026-11-02 — solid hot red lettering with only a restrained surface highlight. */ main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{ background:none;color:#ff161b;-webkit-text-stroke:0; filter:drop-shadow(0 0 5px #ff100b35); } @supports(background-clip:text){ main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i, .hero h1 em,.automotive-section .growth-copy h2 i,.ai-scene h1 i, .service-story-copy h3 i,.reality-interlude em{ background:linear-gradient(172deg,#ff161b 0%,#ff161b 43%,#ff3437 49%,#ff161b 55%,#ff161b 100%); background-clip:text;-webkit-background-clip:text;color:transparent; } } @media(forced-colors:active){main h1 em,main h1 i,main h2 em,main h2 i,main h3 em,main h3 i{background:none;color:CanvasText;filter:none}} /* astra1 2026-11-02 — remove decorative homepage red lines; retain photographic reflections. */ .light-blade{display:none!important} .work-showcase .portfolio-image.device-preview:after{display:none} .automotive-section:after{background:radial-gradient(ellipse at 72% 65%,#c71c1938,transparent 48%)} .showcase-controls{flex-wrap:wrap} .showcase-controls .showcase-rotation{font-size:.8em;border-color:transparent;color:var(--muted)} /* astra1 2026-11-02 — broader jade laptop casing; keep the stage backgrounds. */ .work-showcase .device-preview .preview-desktop{left:4%;width:80%;padding:clamp(10px,.9vw,28px);padding-bottom:clamp(15px,1.35vw,40px);background:linear-gradient(130deg,#d9eee4 0%,#83b4a1 22%,#588d78 48%,#b1d8c4 77%,#639781 100%)} .work-showcase .device-preview .preview-desktop:after{height:clamp(10px,1vw,26px);bottom:clamp(-19px,-.85vw,-9px)} @media(max-width:750px){.work-showcase .device-preview .preview-desktop{width:80%;left:3%;padding:8px;padding-bottom:13px}} /* astra1 2026-11-02 — simultaneous push, then the phone arrives as a second beat. */ .work-showcase{display:grid;overflow:clip;isolation:isolate} .work-showcase .portfolio-card{grid-area:1 / 1;min-width:0;width:100%} .work-showcase .showcase-entering{animation:showcase-push-in .85s cubic-bezier(.65,0,.35,1) both;z-index:2} .work-showcase .showcase-leaving{animation:showcase-push-out .85s cubic-bezier(.65,0,.35,1) both;z-index:1;pointer-events:none} .work-showcase .showcase-entering .preview-desktop,.work-showcase .showcase-entering .project-caption,.work-showcase .showcase-leaving .preview-desktop,.work-showcase .showcase-leaving .preview-phone,.work-showcase .showcase-leaving .project-caption{animation:none} .work-showcase .showcase-active .preview-phone{animation:showcase-phone-arrive .8s cubic-bezier(.16,1,.3,1) 1.1s both} @keyframes showcase-push-in{from{translate:var(--push-from,100%) 0}to{translate:0 0}} @keyframes showcase-push-out{from{translate:0 0}to{translate:var(--push-to,-100%) 0}} .no-motion .work-showcase .portfolio-card{animation:none!important} @media(prefers-reduced-motion:reduce){.work-showcase .portfolio-card{animation:none!important}} /* astra1 2026-11-02 — push only the device stage; copy changes in place. */ .work-showcase .showcase-entering,.work-showcase .showcase-leaving{animation:none} .work-showcase .showcase-entering .portfolio-image{animation:none} .work-showcase .showcase-leaving .portfolio-image{animation:none} .work-showcase .showcase-leaving .project-caption{visibility:hidden} .work-showcase .showcase-active .project-caption{animation:none} .work-showcase .project-caption{position:relative;z-index:3;background:var(--work-colour,#10272d);transition:background-color 1.1s ease} .no-motion .work-showcase .portfolio-image{animation:none!important} @media(prefers-reduced-motion:reduce){.work-showcase .portfolio-image{animation:none!important}} /* astra1 2026-11-02 — stable overlapping tracks; no second entrance on cleanup. */ .work-showcase .portfolio-card{align-self:start} .work-showcase .preview-desktop,.work-showcase .project-caption{animation:none!important} .work-showcase .showcase-active .preview-phone{animation:showcase-phone-arrive .8s cubic-bezier(.16,1,.3,1) 1.1s both} .work-showcase .showcase-leaving .preview-phone{animation:none!important} .work-showcase .project-caption{background:transparent;transition:none} .work-showcase .portfolio-image{clip-path:inset(0);contain:paint} .work-showcase .showcase-entering .preview-desktop{animation:showcase-push-in .85s cubic-bezier(.65,0,.35,1) both!important} .work-showcase .showcase-leaving .preview-desktop,.work-showcase .showcase-leaving .preview-phone{animation:showcase-push-out .85s cubic-bezier(.65,0,.35,1) both!important} .work-showcase .showcase-leaving .portfolio-image{background:transparent!important} .work-showcase .showcase-entering .portfolio-image{background:transparent!important} .no-motion .work-showcase .preview-desktop,.no-motion .work-showcase .preview-phone{animation:none!important} @media(prefers-reduced-motion:reduce){.work-showcase .preview-desktop,.work-showcase .preview-phone{animation:none!important}} .work-showcase{position:relative} .work-showcase:before{content:'';position:absolute;left:0;top:0;width:65%;aspect-ratio:1.6;pointer-events:none;background:radial-gradient(ellipse at 50% 85%,#df182a30,transparent 43%),linear-gradient(0deg,#07110e 0%,#11221c88 25%,transparent 60%)} .work-showcase .portfolio-image{background:transparent!important} @media(max-width:750px){.work-showcase:before{width:100%;aspect-ratio:1.2}} /* Contain oversized hero artwork on phones without horizontal page scrolling. */ .hero{overflow:clip} html,body{overflow-x:clip} /* astra1 2026-11-02 — full-width stage, fixed hardware, content moves inside screens. */ .work-showcase{grid-template-columns:minmax(0,1fr)!important;gap:0!important} .work-showcase .device-screen{width:100%;height:100%;overflow:hidden;border-radius:inherit;position:relative} .work-showcase .preview-desktop,.work-showcase .preview-phone{animation:none!important;translate:none!important} .work-showcase .device-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} .work-showcase .showcase-entering .preview-desktop img{animation:showcase-push-in .85s cubic-bezier(.65,0,.35,1) both} .work-showcase .showcase-entering .preview-phone img{animation:showcase-push-in .8s cubic-bezier(.65,0,.35,1) 1.1s both} .work-showcase .showcase-leaving .preview-desktop img{animation:showcase-push-out .85s cubic-bezier(.65,0,.35,1) both} .work-showcase .showcase-leaving .preview-phone img{animation:showcase-push-out .8s cubic-bezier(.65,0,.35,1) 1.1s both} .work-showcase .showcase-entering .preview-desktop,.work-showcase .showcase-entering .preview-phone{background:transparent;border-color:transparent;box-shadow:none} .work-showcase .showcase-entering .preview-desktop:after{visibility:hidden} .no-motion .work-showcase img{animation:none!important} @media(prefers-reduced-motion:reduce){.work-showcase img{animation:none!important}} .work-showcase .showcase-entering .preview-desktop,.work-showcase .showcase-leaving .preview-desktop,.work-showcase .showcase-leaving .preview-phone{animation:none!important;translate:none!important} /* astra1 2026-11-02 — fixed hardware, isolated screen layers; no card animation state. */ .fixed-showcase .portfolio-card,.fixed-showcase .portfolio-image,.fixed-showcase .preview-desktop,.fixed-showcase .preview-phone,.fixed-showcase .project-caption{animation:none!important;translate:none!important} .fixed-showcase .fixed-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;isolation:isolate} .fixed-showcase .fixed-screen img{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:top;animation:none!important;transition:none!important;border-radius:0} .fixed-showcase .project-caption{min-height:390px;justify-content:center} @media(max-width:750px){.fixed-showcase .project-caption{min-height:290px;justify-content:flex-start}} /* astra1 2026-11-02 — persistent navigation and top-aligned preview screens. */ header.nav{position:fixed;top:0;z-index:100;background:#06110ce8;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} html{scroll-padding-top:calc(var(--nav-height) + 20px)} .fixed-showcase .fixed-screen img{object-position:50% 0;transform-origin:top center} .fixed-showcase .portfolio-card:hover .fixed-screen img{scale:1} /* astra1 2026-11-02 — bloom passes in front of the navigation; clicks pass through. */ .hero .hero-art{z-index:101;pointer-events:none;mix-blend-mode:screen} .hero .hero-topline,.hero .hero-title,.hero .hero-foot{z-index:102} body:has(#mobile-menu[aria-expanded="true"]) header.nav{z-index:110} header.nav:focus-within{z-index:110} /* astra1 2026-11-02 — direction-aware navigation. */ header.nav{transition:transform .24s ease;will-change:transform} header.nav.nav-away{transform:translateY(-105%)} header.nav:focus-within,body:has(#mobile-menu[aria-expanded="true"]) header.nav{transform:translateY(0)} @media(prefers-reduced-motion:reduce){header.nav{transition:none}} /* astra1 2026-11-02 — broad crimson backlight on the work archive. */ main.subpage .portfolio-card .portfolio-image{background:radial-gradient(ellipse at 50% 48%,#ff142b99 0%,#b309205e 42%,#65071320 70%,#07110e 100%)!important;box-shadow:0 0 55px #ff102645,0 0 120px #f20d2526;overflow:hidden} main.subpage .portfolio-card .portfolio-image:before,main.subpage .portfolio-card .portfolio-image:after{display:none!important} main.subpage .portfolio-card .preview-desktop{box-shadow:0 0 45px #ff20385c,0 20px 75px #d000304d} main.subpage .portfolio-card[href="https://jmsperth.au"] .preview-desktop{height:auto;aspect-ratio:1.44} main.subpage .portfolio-card[href="https://jmsperth.au"] .preview-desktop img{object-fit:contain;object-position:top;transform:none!important} /* astra1 2026-11-02 — staggered work archive; exterior hover light only. */ main.subpage .portfolio-grid{column-gap:6vw;row-gap:0;grid-auto-rows:calc((100vw - 2 * var(--pad) - 6vw) / 5.4 + 60px);align-items:start} main.subpage .portfolio-card{padding:0!important;min-width:0;grid-row:span 2} main.subpage .portfolio-card:nth-child(1){grid-column:1;grid-row:1 / span 2} main.subpage .portfolio-card:nth-child(2){grid-column:2;grid-row:2 / span 2} main.subpage .portfolio-card:nth-child(3){grid-column:1;grid-row:3 / span 2} main.subpage .portfolio-card:nth-child(4){grid-column:2;grid-row:4 / span 2} main.subpage .portfolio-card:nth-child(5){grid-column:1;grid-row:5 / span 2} main.subpage .portfolio-card:nth-child(6){grid-column:2;grid-row:6 / span 2} main.subpage .portfolio-card .portfolio-image{aspect-ratio:1.35;background:#0c1914!important;box-shadow:none;transition:box-shadow .35s ease;overflow:hidden} main.subpage .portfolio-card .preview-desktop{box-shadow:none} @media(hover:hover){main.subpage .portfolio-card:hover .portfolio-image{box-shadow:0 0 40px 8px #ff142b66,0 0 100px 22px #d4003038}} main.subpage .portfolio-card:focus-visible .portfolio-image{box-shadow:0 0 40px 8px #ff142b66,0 0 100px 22px #d4003038} @media(max-width:650px){main.subpage .portfolio-grid{grid-auto-rows:auto;row-gap:75px}main.subpage .portfolio-card:nth-child(n){grid-column:auto;grid-row:auto}} @media(prefers-reduced-motion:reduce){main.subpage .portfolio-card .portfolio-image{transition:none}} main.subpage .portfolio-card[href="/work/website-rescues/"] .preview-desktop{height:auto;aspect-ratio:1.44} main.subpage .portfolio-card[href="/work/website-rescues/"] .preview-desktop img{object-fit:contain;object-position:top} /* astra1 2026-11-02 — blog landing and four-link navigation. */ .nav nav[aria-label="Main navigation"]{gap:clamp(16px,2vw,60px)} .blog-start{margin-top:clamp(60px,8vw,160px);padding:clamp(35px,5vw,100px);border-radius:40px;background:radial-gradient(ellipse at 100% 100%,#a31c1b35,transparent 65%),#102b25;max-width:1400px} .blog-start h2{font-size:clamp(42px,5vw,100px);margin:20px 0 30px;line-height:1.05} .blog-start p{max-width:50ch;line-height:1.7}.blog-start .text-link{margin-top:25px}.blog-note{margin-top:50px;color:var(--muted)} /* astra1 2026-11-02 — living cyborg, meaningful service depth and editorial hierarchy. */ .ai-scene .cyborg-film{position:relative;width:116%;margin-left:-16%;aspect-ratio:3/2;mix-blend-mode:lighten;mask-image:radial-gradient(ellipse at 58% 52%,#000 45%,transparent 75%)} .ai-scene .cyborg-film img,.ai-scene .cyborg-film video{width:100%;height:100%;margin:0;object-fit:contain;mix-blend-mode:normal;mask-image:none}.cyborg-film video{position:absolute;inset:0;opacity:0;transition:opacity .4s}.cyborg-film.film-playing video{opacity:1} .service-depth{margin-top:clamp(80px,9vw,180px);padding:clamp(35px,5vw,100px) 0;border-top:1px solid #b6d5c52b}.service-depth-intro{display:grid;grid-template-columns:1.35fr .65fr;gap:7vw;align-items:center}.service-depth-intro h2{font-size:clamp(35px,4vw,90px);line-height:1.1;letter-spacing:-.04em;margin:25px 0}.service-depth-intro img{width:100%;height:auto;max-height:430px;object-fit:cover;object-position:top;border-radius:24px;box-shadow:0 30px 70px #0005}.service-depth p{font-size:clamp(17px,1.2vw,25px);line-height:1.75;color:var(--muted);max-width:65ch}.service-depth-columns{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin:65px 0}.service-depth h3{font-size:clamp(25px,2.2vw,52px);line-height:1.2;margin-bottom:24px}.service-depth details{border-block:1px solid #ffffff26;padding:25px 0}.service-depth summary{display:flex;justify-content:space-between;gap:30px;cursor:pointer;font-size:clamp(18px,1.4vw,30px)}.service-related{margin-top:35px}.service-related a{color:var(--fg);text-decoration-color:#ff2424;text-underline-offset:7px}.article-body strong,.service-depth strong{color:#ff393e;font-weight:500} .blog-editorial{padding-bottom:100px}.blog-editorial>h1{max-width:12em}.blog-feature{margin:70px 0 100px;display:grid;grid-template-columns:1.4fr .6fr;gap:5vw;align-items:center;color:inherit;text-decoration:none}.blog-feature-media{overflow:hidden;border-radius:30px;position:relative;box-shadow:0 30px 100px #0006}.blog-feature img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s}.blog-feature:hover img{transform:scale(1.025)}.blog-feature h2{font-size:clamp(38px,4.3vw,100px);line-height:1.07;margin:25px 0}.blog-feature p,.blog-card p{color:var(--muted);line-height:1.65}.blog-feature .eyebrow,.blog-card .eyebrow{color:#ff393e}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.blog-card{display:block;color:inherit;text-decoration:none}.blog-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:22px;margin-bottom:24px}.blog-card h3{font-size:clamp(26px,2.3vw,50px);line-height:1.15;margin:18px 0}.blog-more-title{font-size:clamp(30px,3vw,65px);margin:0 0 40px}.blog-story-image{width:100%;max-height:580px;object-fit:cover;border-radius:30px;margin:45px 0}.blog-story .article-body{max-width:850px}.blog-story .article-body p{font-size:clamp(18px,1.25vw,25px);line-height:1.8} @media(max-width:750px){.ai-scene .cyborg-film{width:115%;margin:-4% -7.5% 0}.service-depth-intro,.service-depth-columns,.blog-feature{grid-template-columns:1fr;gap:30px}.service-depth-intro img{max-height:260px}.service-depth-columns{margin:40px 0}.blog-feature{margin:45px 0 65px}.blog-grid{grid-template-columns:1fr}.blog-card{margin-bottom:25px}} @media(prefers-reduced-motion:reduce){.cyborg-film video{display:none}.blog-feature img{transition:none}} /* astra1 2026-11-03 — edge-to-edge hummingbird scene behind the entire approach section. */ #approach{position:relative;isolation:isolate;overflow:hidden;background:#06110c;min-height:100svh} #approach .manifesto-bottom{position:static;grid-template-columns:1.2fr 1fr} #approach .hummingbird-film{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;z-index:-2;max-width:none;background:#06110c} #approach .hummingbird-film>img,#approach .hummingbird-film>video{width:100%;height:100%;object-fit:cover;object-position:35% center;border-radius:0} #approach:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#06110ce6 0%,#06110c70 32%,transparent 55%),linear-gradient(90deg,transparent 30%,#06110c55 53%,#06110cf2 78%)} #approach .manifesto-bottom>.reveal{grid-column:2;padding:35px 0;color:#e0eadf} #approach .manifesto-bottom p{color:#d2dfd5} #approach .statement,#approach .section-label{position:relative;z-index:1} @media(max-width:750px){#approach{min-height:1100px}#approach .manifesto-bottom{grid-template-columns:1fr;margin-top:clamp(260px,65vw,460px)}#approach .manifesto-bottom>.reveal{grid-column:1;padding:0}#approach .hummingbird-film>img,#approach .hummingbird-film>video{object-position:38% center}#approach:after{background:linear-gradient(180deg,#06110ce6 0%,#06110c60 22%,transparent 38%,#06110c99 55%,#06110cf5 72%)}} /* astra1 2026-11-03 — literally a little trouble, Dave's visual pun. */ #contact h2 .little-trouble{display:inline-block;font-size:.22em;vertical-align:baseline;letter-spacing:-.035em;color:#ff2424} /* astra1 2026-11-03 — compositor-only scroll entrances; no hidden content. */ @keyframes art-swing-arrival{ 0%{translate:calc(var(--arrival-side,1)*48px) 42px;rotate:calc(var(--arrival-side,1)*-5deg);scale:.965} 64%{translate:0 -4px;rotate:calc(var(--arrival-side,1)*1.25deg);scale:1.004} 82%{translate:0 1px;rotate:calc(var(--arrival-side,1)*-.45deg);scale:1} 100%{translate:0 0;rotate:0deg;scale:1} } @keyframes copy-position-arrival{from{translate:calc(var(--arrival-side,1)*22px) 26px;opacity:.45}to{translate:0 0;opacity:1}} .js-motion .arrival-art.arrival-playing{animation:art-swing-arrival 1.25s cubic-bezier(.18,.7,.25,1) both;transform-origin:50% 70%} .js-motion .arrival-copy.arrival-playing{animation:copy-position-arrival .8s cubic-bezier(.2,.75,.25,1) both} .no-motion .arrival-playing{animation:none!important} @media(prefers-reduced-motion:reduce){.arrival-playing{animation:none!important}} @media(max-width:650px){.js-motion .arrival-art.arrival-playing{animation-duration:1s}} /* astra1 2026-11-03 — skip links place keyboard focus in main content. */ main[tabindex="-1"]:focus{outline:none} /* astra1 2026-11-03 — keep the hummingbird scene below the oversized heading. */ #approach .manifesto-bottom{position:relative;isolation:isolate;min-height:clamp(560px,48vw,1840px);align-items:center} #approach .hummingbird-film{inset:0 auto 0 50%;width:100vw;height:100%;transform:translateX(-50%);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)} #approach .hummingbird-film>img,#approach .hummingbird-film>video{object-position:35% center} @media(max-width:750px){ #approach .manifesto-bottom{margin-top:28px;min-height:0;padding-top:76vw} #approach .hummingbird-film{height:90vw;min-height:320px} #approach .hummingbird-film>img,#approach .hummingbird-film>video{object-position:38% center} } /* astra1 2026-11-03 — clear reading area beside the lowered bird and flower. */ #approach .manifesto-bottom:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 35%,#06110c99 49%,#06110cf5 58%,#06110c 75%)} #approach .manifesto-bottom>.reveal{position:relative;z-index:1;padding-left:3vw} @media(max-width:750px){#approach .manifesto-bottom:after{background:linear-gradient(180deg,transparent 0,transparent 52vw,#06110c 82vw)}#approach .manifesto-bottom>.reveal{padding-left:0;background:#06110c}} /* astra1 2026-11-03 — show the complete bird and flower beside the copy. */ #approach .manifesto-bottom{min-height:clamp(480px,38vw,1450px)} #approach .hummingbird-film{inset:0 auto 0 -4vw;width:60vw;transform:none;mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)} #approach .hummingbird-film>img,#approach .hummingbird-film>video{object-fit:contain;object-position:center} #approach .manifesto-bottom:after{display:none} @media(max-width:750px){#approach .manifesto-bottom{min-height:0;padding-top:76vw}#approach .hummingbird-film{left:-4vw;width:100vw;height:72vw;min-height:0}}