/* Generated from the static site: same rules, same order (loader, carousel, base, fonts, main, menu, theme). */ /* --- site-loader (critical) --- */ /* Immediate, self-contained drawing sequence; no image or font request needed. */ .site-loader{display:none;position:fixed;inset:0;z-index:1000;place-items:center;grid-template-columns:minmax(0,1fr);background:#000;overflow:hidden;opacity:1;transition:background-color 500ms ease;contain:layout paint} .site-loading .site-loader{display:grid} html.site-loading{overflow:hidden} .site-loading:not(.site-revealing) #site-shell{visibility:hidden} .site-revealing .site-loader{background-color:transparent;pointer-events:none}.site-revealing .site-loader::before,.site-revealing .loader-blueprint{opacity:0}.site-loader::before,.loader-blueprint{transition:opacity 350ms ease}.site-revealing .loader-monogram .fill{fill:#fff;transition:fill 800ms cubic-bezier(.7,0,.2,1)}.site-revealing .loader-word{color:transparent;transform:translateY(6px)}.loader-word{transition:color 300ms ease,transform 300ms ease}.site-loading .nav .logo{opacity:0}.site-loading.logo-landed .nav .logo{opacity:1;transition:opacity 300ms ease} .site-loader::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,85,0,.14),transparent 64%)} .loader-art{position:relative;width:min(650px,112vw,85svh);aspect-ratio:1;display:grid;place-items:center} .loader-blueprint{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:#ff9500} .loader-blueprint .draw{stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;animation:loader-draw 560ms cubic-bezier(.3,0,.2,1) both;animation-delay:60ms} .loader-blueprint circle.draw{stroke-width:2.3;animation-delay:30ms} .loader-blueprint rect.draw{animation-delay:90ms} .loader-blueprint path.draw{animation-delay:150ms;stroke-width:2.2} .loader-blueprint .details{animation:loader-details 350ms ease both;animation-delay:250ms} .loader-logo{position:relative;display:grid;justify-items:center;gap:22px;margin-top:6px} .loader-monogram{width:92px;height:99px;overflow:visible} .loader-monogram .outline{fill:none;stroke:#ff9500;stroke-width:4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:loader-draw 560ms cubic-bezier(.35,0,.2,1) both} .loader-monogram .fill{fill:#ff5500;opacity:0;animation:loader-fill 280ms ease 440ms both} .loader-word{font:700 15px/1 Arial,Helvetica,sans-serif;letter-spacing:.19em;color:#ff5500;animation:loader-details 300ms ease 320ms both} @keyframes loader-draw{to{stroke-dashoffset:0}} @keyframes loader-fill{to{opacity:1}} @keyframes loader-details{from{opacity:0}to{opacity:1}} @media(max-width:700px){.loader-monogram{width:72px;height:77px}.loader-logo{gap:18px}.loader-word{font-size:12px}.loader-blueprint .draw{stroke-width:2.5}} @media(prefers-reduced-motion:reduce){.site-loader{transition:none}.loader-blueprint .draw,.loader-monogram .outline{animation:none;stroke-dashoffset:0}.loader-blueprint .details,.loader-word,.loader-monogram .fill{animation:none;opacity:1}} /* --- hero-carousel --- */ /* Applied only after the carousel has initialized. */ .hero.carousel-ready { touch-action: pan-y pinch-zoom; } .hero.carousel-ready .slide { opacity: 1; transition: none; overflow: hidden; } .hero.carousel-ready.carousel-moving .slide { will-change: transform; } .hero.carousel-ready.carousel-settling .slide { transition: transform 420ms cubic-bezier(.2,.8,.2,1); } @media (prefers-reduced-motion: reduce) { .hero.carousel-ready.carousel-settling .slide { transition-duration: 0s; } } /* --- base --- */ :root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} img{max-width:100%} [hidden]{display:none!important} /* --- fonts --- */ /* GT Alpina Fine (hero), GT Maru (headings), GT America (text). Grilli Type trial fonts, embedded for the prototype */ @font-face{font-family:'BeSans';font-weight:300;font-style:normal;font-display:swap;src:url('/fonts/PPNeueMontreal-Light.woff2') format('woff2')} @font-face{font-family:'BeSans';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/PPNeueMontreal-Regular.woff2') format('woff2')} @font-face{font-family:'BeSans';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/PPNeueMontreal-Semibold.woff2') format('woff2')}@font-face{font-family:'BeSans';font-weight:400;font-style:italic;font-display:swap;src:url('/fonts/PPNeueMontreal-Italic.woff2') format('woff2')} /* --- main --- */ /* Layout: full-screen work slideshow as the opening, then projects one after another at full width, a short studio note, the address. No cards, no badges, no uppercase. */ :root{ --bg:#000; --ink:#F1EEE8; --ink-2:#BDB9B1; --ink-3:#8F8B84; --line:#222; --accent:#ff5500; --accent-2:#ff9500; --serif:"BeSans","Helvetica Neue",Helvetica,Arial,sans-serif; --sans:"BeSans","Helvetica Neue",Helvetica,Arial,sans-serif; --gl:max(24px,env(safe-area-inset-left,0px),7vw,calc((100vw - 1240px) / 2)); --gr:max(24px,env(safe-area-inset-right,0px),7vw,calc((100vw - 1240px) / 2)); color-scheme:dark; } *{box-sizing:border-box} html{background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);position:relative;font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding:0} body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)} @media(min-width:701px){.hero .slide[data-name="Slyde"] img,.hero .slide[data-name="Tidii"] img,.hero .slide[data-name="Mad Monkeys"] img{position:absolute;left:50%;top:calc(50% - 44px);width:calc((100vw - var(--gl) - var(--gr)) / .8);height:auto;max-width:none;object-fit:fill;transform:translate(-50%,-50%)}} @media(max-width:700px){.intro{padding-top:128px;padding-bottom:112px;gap:40px}.work .word{margin-bottom:56px}.proj{gap:56px}.proj .info{gap:24px}.contact{padding-top:136px;padding-bottom:96px}} /* Identic slide: the dark render as a rounded card, sized like the phone rows on the other slides */ .hero .slide[data-name="Identic.ai"] img{position:absolute;left:50%;top:calc(50% - 44px);width:calc(100vw - var(--gl) - var(--gr));height:calc((100vw - var(--gl) - var(--gr)) * .492);max-width:none;object-fit:cover;object-position:57% 52%;border-radius:28px;transform:translate(-50%,-50%);box-shadow:0 30px 80px rgba(0,0,0,.35);-webkit-mask-image:none;mask-image:none} @media(min-width:701px){.intro{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;padding-top:clamp(120px,14vw,220px);padding-bottom:clamp(120px,14vw,220px)}.intro>p{grid-column:1/8;max-width:none;align-self:start;margin:0}.intro .small{grid-column:9/13;justify-self:stretch;align-self:start;max-width:none;margin:0;padding-top:.55em}.intro .small p{max-width:none}} @media(max-width:700px){.hero .slide[data-name="Mad Monkeys"] img{width:240vw;transform:translate(-28.3%,-50%);clip-path:inset(0 52% 0 8%)}} @media(prefers-reduced-motion:reduce){.hero .text{transform:none}} section,footer{position:relative;z-index:1} .hero{z-index:2} .nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,0));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);opacity:1;transition:opacity .45s ease} .nav.at-top::before{opacity:0} @media(prefers-reduced-motion:reduce){.nav::before{transition:none}} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.025em;text-wrap:balance} p{margin:0} .g{padding-left:var(--gl);padding-right:var(--gr)} /* nav */ .nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:20px} .nav .logo{display:flex;align-items:center;line-height:0} .nav .logo img{height:26px;width:auto;display:block} .nav ul{align-items:center} @media(max-width:600px){.nav .logo img{height:22px}.nav ul{gap:18px}.nav a{font-size:14px}} .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:30px} .nav a{font-size:15px;color:#fff;opacity:.85;transition:opacity .3s} .nav a:hover,.nav a:focus-visible{opacity:1;outline:none} /* hero slideshow */ .hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000} .hero::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none;z-index:4} .hero .text{transform:translate3d(0,calc(var(--hero-out,0) * -70px),0);opacity:calc(1 - var(--hero-out,0) * 1.15);will-change:transform,opacity} /* the carousel arrows fade out with the headline as the hero scrolls away */ .hero .arrow{opacity:calc(1 - var(--hero-out,0) * 1.15)} .hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} .hero .slide.on{opacity:1} .hero .slide img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.0)} .hero .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.66) 24%,rgba(0,0,0,.18) 50%,rgba(0,0,0,0) 64%),linear-gradient(to bottom,rgba(0,0,0,.22),rgba(0,0,0,0) 14%)} .hero .arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:border-color .3s,background .3s;z-index:3;padding:0} .hero .arrow:hover,.hero .arrow:focus-visible{border-color:#fff;background:rgba(0,0,0,.45);outline:none} .hero .arrow.prev{left:max(16px,calc(var(--gl) - 60px))} .hero .arrow.next{right:max(16px,calc(var(--gr) - 60px))} .hero .arrow svg{width:18px;height:18px;display:block} @media(max-width:700px){.hero .arrow{top:auto;bottom:max(48px,env(safe-area-inset-bottom,0px));transform:none;width:44px;height:44px}.hero .arrow.prev{left:auto;right:calc(var(--gr) + 54px)}.hero .arrow.next{right:var(--gr)}} .hero .text{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:max(48px,env(safe-area-inset-bottom,0px))} .hero h1{font-family:var(--sans);font-weight:400;letter-spacing:-.045em;font-size:clamp(56px,8.6vw,152px);line-height:.9;max-width:9ch;color:#fff} .hero h1 i{font-style:italic} .hero h1{max-width:none} .hero h1 .line{display:block;white-space:nowrap} /* two lines that never overflow the column: the longest line ("Development &") is ~5.9em */ .hero h1{font-size:min(clamp(56px,8.6vw,152px),calc((100vw - var(--gl) - var(--gr)) / 6))} .hero h1 .amp{font-size:1em} .hero .side{text-align:right;color:rgba(255,255,255,.85);font-size:15px;display:grid;gap:6px;flex-shrink:0} .hero .side b{font-weight:500;color:#fff} .hero .side .count{color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums} @media(max-width:700px){ .hero .slide[data-name="Identic.ai"] img{top:calc(50% - 122px);height:calc(100vw - var(--gl) - var(--gr));border-radius:22px} .hero .slide[data-name="Slyde"] img,.hero .slide[data-name="Tidii"] img,.hero .slide[data-name="Mad Monkeys"] img{position:absolute;top:calc(50% - 122px);left:50%;height:auto;max-width:none;width:min(232%,max(354.2px,calc(253svh - 1062.6px)));transform:translate(-50%,-50%);clip-path:inset(0 30%)} @media(max-height:700px){ .hero .slide[data-name="Identic.ai"] img{top:calc(50% - 110px);height:calc((100vw - var(--gl) - var(--gr)) * .78)} } } @media(max-width:700px){.hero .text{flex-direction:column;align-items:flex-start}.hero .side{text-align:left}} /* intro */ .intro{padding-top:clamp(80px,12vw,160px);padding-bottom:clamp(60px,8vw,120px);display:grid;gap:28px} @media(min-width:900px){.intro{grid-template-columns:1fr 1fr;align-items:end}} .intro p{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,44px);line-height:1.15;letter-spacing:-.02em;max-width:22ch;text-wrap:pretty} .intro .small{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-2);max-width:40ch;justify-self:end;letter-spacing:0;display:grid;gap:22px} .intro .small p{font-family:var(--sans);font-size:15px;line-height:1.6;max-width:40ch;letter-spacing:0;color:var(--ink)} .intro dl{display:grid;grid-template-columns:auto 1fr;gap:8px 28px;margin:0;font-size:15px} .intro dt{color:rgba(255,255,255,.86)} .intro dd{margin:0;color:var(--ink)} .location,.intro dd.location{color:#fff} /* work: one project per screen. A single image, a short description, a button to the case page. */ .work{padding-bottom:clamp(40px,6vw,90px);position:relative} .proj{z-index:1} .work .word{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.015em;margin:0 0 clamp(28px,4vw,56px)} .projects{display:grid;gap:clamp(72px,9vw,140px)} .proj{display:grid;gap:clamp(36px,4vw,60px);min-width:0} .proj .head{display:grid;gap:4px} .proj .pic{display:block;overflow:hidden;background:transparent;aspect-ratio:1920/880;position:relative;border-radius:28px} .proj .pic.phones{aspect-ratio:1920/960;border-radius:0} .proj .pic.phones img{transform:none} .proj .pic.float{overflow:visible} .proj .pic.float{aspect-ratio:1920/806} .proj .pic.float img{width:106.25%;max-width:none;height:auto;margin-left:-6.25%;margin-top:-9.375%} .proj .pic.dark{background:#000} .proj .pic.dark::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.28);border-radius:inherit;pointer-events:none;z-index:1} .proj .pic.light{background:#F3F5F9} .proj .pic img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.06)} .proj:hover .pic img{transform:scale(1.0)} .proj .pic.square{aspect-ratio:1920/880} .proj .pic.square img{object-fit:contain;background:#D9B3B8} .proj .info{display:grid;gap:18px;align-items:start;max-width:62ch} .proj h3{font-size:clamp(30px,3vw,44px);line-height:1} .proj .meta{font-size:15px;color:var(--ink-2);margin-top:10px} .proj .desc{display:grid;gap:20px;justify-items:start} .proj .desc p{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink);max-width:58ch} .btn{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:0 0 4px;border-bottom:1.5px solid currentColor;transition:gap .3s,color .3s} .btn{cursor:default} .btn svg{width:18px;height:18px} /* contact */ .contact{padding-top:clamp(80px,12vw,160px);padding-bottom:clamp(60px,8vw,120px)} .c-grid{display:grid;gap:48px} @media(min-width:960px){.c-grid{grid-template-columns:1.2fr 1fr;gap:80px;align-items:start}} .c-left{display:grid;gap:28px} .contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.02em;word-break:break-word} .contact h2 a{border-bottom:1px solid var(--ink-3);transition:border-color .3s} .contact h2 a:hover{border-color:var(--ink)} .contact .lines{display:grid;gap:6px;font-size:16px;color:var(--ink-2)} .c-form{display:grid;gap:26px;padding-top:0} .c-title{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.02em;margin:0 0 6px} .c-form label{display:grid;gap:8px;font-size:14px;color:#fff} .c-form input,.c-form textarea{background:transparent;border:0;border-bottom:1px solid rgba(241,238,232,.42);color:var(--ink);font:inherit;font-size:17px;padding:10px 0 12px;border-radius:0;outline:none;resize:vertical;transition:border-color .3s} .c-form input:focus,.c-form textarea:focus{border-color:var(--ink)} .c-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:6px} .c-form button{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:999px;padding:16px 28px;cursor:pointer;transition:background .3s,color .3s;width:100%} .c-form button:hover{background:var(--ink);color:var(--bg)} .c-form .c-row{margin-top:25px} .c-note{font-size:14px;color:var(--ink-3)} .c-done{font-size:16px;color:var(--ink-2)} footer{padding-top:24px;padding-bottom:max(36px,env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-3)} .r{will-change:transform,opacity} :focus-visible{outline:1px solid var(--ink-2);outline-offset:4px} @media(prefers-reduced-motion:reduce){.hero .slide.on img{animation:none}.item .pic img{transition:none}} /* Ribbons: pre-rendered soft orange/pink light with a silky S-curve edge (see tools/ribbons.html). A fixed layer behind the sections: scrolling makes the ribbons run down the screen and loop, so they keep dripping to the very end of the page; each one also sways on its own. Transform/opacity only. */ .ribbons{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:0;pointer-events:none;overflow:hidden} .ribbons .rb{position:absolute;top:0;width:min(1100px,80vw);will-change:transform} .ribbons .rb.right{right:-16vw}.ribbons .rb.left{left:-18vw} .ribbons img{display:block;width:100%;height:auto;opacity:.95;will-change:transform;animation:rb-sway 17s ease-in-out infinite alternate} .ribbons .rb:nth-child(2) img{animation-duration:21s;animation-delay:-7s;animation-name:rb-sway-2} .ribbons .rb:nth-child(3) img{animation-duration:15s;animation-delay:-4s} .ribbons .rb:nth-child(4) img{animation-duration:19s;animation-delay:-11s;animation-name:rb-sway-2} @keyframes rb-sway{0%{transform:translate3d(0,0,0) rotate(-3deg) scale(1)}50%{transform:translate3d(3vw,2vh,0) rotate(2deg) scale(1.06)}100%{transform:translate3d(-2vw,-1vh,0) rotate(-1deg) scale(.97)}} @keyframes rb-sway-2{0%{transform:translate3d(0,0,0) rotate(3deg) scale(1.04)}50%{transform:translate3d(-3vw,3vh,0) rotate(-2deg) scale(.96)}100%{transform:translate3d(2vw,-2vh,0) rotate(1deg) scale(1.05)}} @media(max-width:700px){.ribbons .rb{width:130vw}.ribbons .rb.right{right:-55vw}.ribbons .rb.left{left:-55vw}} @media(prefers-reduced-motion:reduce){.ribbons img{animation:none}} .ribbons-gl{position:absolute;inset:0;width:100%;height:100%;display:block} /* with the live drop: one continuous gradient from the hero into About us (no fades, no edges) */ .ribbons-gl .hero{background:transparent}.ribbons-gl .hero-bg{display:block;background:url(/img/hero-texture.webp) 0 0/270px 270px;opacity:.6;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 40%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.18) 80%,transparent 96%);mask-image:linear-gradient(to bottom,#000 0,#000 40%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.18) 80%,transparent 96%)}.ribbons-gl .hero-bg::after{display:none}/* stacking inside the hero: texture < slides < shade < text and arrows */.hero-bg{z-index:0}.hero .slide{z-index:1}.hero .shade{z-index:2}.hero .text{z-index:3}.hero .arrow{z-index:4}.hero .text{pointer-events:none}.hero .text a,.hero .text button{pointer-events:auto}.ribbons-gl .intro{background:none} .ribbons-gl .hero .shade{background:radial-gradient(ellipse 62% 19% at 34% 77%,rgba(0,0,0,.55),rgba(0,0,0,0) 100%),linear-gradient(to bottom,rgba(0,0,0,.22),rgba(0,0,0,0) 14%)} .ribbons.is-gl .rb{display:none} /* Hero backdrop: warm orange gradient (amber top, red-orange core, into black) with a fine grain. Static, behind the slides. */ .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 56% 42% at 50% 56%,rgba(255,64,24,.9),rgba(255,64,24,.5) 45%,rgba(255,64,24,0) 100%),linear-gradient(to bottom,#ff7420 0%,#ff6418 18%,#ff5a14 40%,#f44a18 56%,#dc381a 67%,#a42410 78%,#480f07 88%,#0b0302 96%,#000 100%)} .hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none} .hero-bg::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:220px 220px;opacity:.06} /* Below the hero the page starts pure black and the glow fades in, so there is no edge. */ .intro{background:linear-gradient(#000 0,rgba(0,0,0,.85) 90px,rgba(0,0,0,.45) 180px,rgba(0,0,0,0) 260px)} /* right column of About us: larger body text so it balances the statement on the left */ @media(min-width:701px){.intro .small,.intro .small p,.intro dl{font-size:clamp(17px,1.4vw,20px);line-height:1.55}.intro .small{gap:28px}.intro dl{gap:10px 32px}} /* Blueprints behind the app and 3D projects: a dimensioned phone layout sheet (tools/blueprints.py). Thin, faint, soft-edged, static. */ .proj.bp{position:relative} .work{overflow-x:clip} .proj.bp::before{content:"";position:absolute;left:50%;top:50%;width:min(1400px,112vw);aspect-ratio:14/11;z-index:-1;pointer-events:none;background:center/contain no-repeat;opacity:.22;transform:translate(-50%,-50%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%)} .proj.bp-app::before{background-image:url(/img/bp-app.svg)} @media(max-width:700px){.proj.bp::before{width:170vw;opacity:.28}} @media(max-width:700px){.hero .slide[data-name="Slyde"] img{clip-path:inset(14.6% 30.6% 15.4% 30.6% round 20px)}.hero .slide[data-name="Tidii"] img{clip-path:inset(12.8% 30.6% 12.9% 30.6% round 20px)}.hero .text{padding-bottom:max(104px,env(safe-area-inset-bottom,0px))}.hero .arrow{bottom:max(104px,env(safe-area-inset-bottom,0px))}.ribbons-gl .hero .shade{background:none}/* a light, soft shadow under the phone screens (applied to the slide so it follows the clipped shape) */.hero .slide{filter:drop-shadow(0 10px 22px rgba(40,10,0,.28)) drop-shadow(0 2px 5px rgba(40,10,0,.18))}} /* same title-to-picture gap on every project; it clears the gift that sticks out of the Mad Monkeys card */ @media(min-width:701px){.proj .head{margin-bottom:calc(clamp(36px,4.725vw,70px) - clamp(36px,4vw,60px))}} /* One vertical rhythm for the whole page: hero -> About us -> Portfolio -> every project -> Contact are all separated by the same --space (ids win over the older per-section paddings). */ :root{--space:clamp(120px,11vw,168px)} #studio{padding-top:var(--space);padding-bottom:0} /* phone: the hero text already sits 104px above the hero edge, so About us starts --space below the hero text, not below the hero */ @media(max-width:700px){#studio{padding-top:calc(var(--space) - 104px)}} #work{padding-top:var(--space);padding-bottom:0} #work .word{margin-top:0;margin-bottom:var(--space)} /* desktop: the hero text sits 48px above the hero edge, so About us starts --space below the text */ @media(min-width:701px){#studio{padding-top:calc(var(--space) - 48px)}} /* phone-row pictures have transparent space above the phones: pull them up so the visible top edge is the picture edge, like the other projects */ .proj .pic img[src*="work-slyde"]{margin-top:-1.615%}.proj .pic img[src*="work-tidii4"]{margin-top:-1.51%} #work .projects{gap:var(--space)} #contact{padding-top:var(--space)} /* --- mobile-menu --- */ /* Mobile burger navigation. Loaded after the inline styles of index.html. Desktop (>700px) keeps the original header untouched: the burger is display:none there. On <=700px the script moves the header's