/* ============ TOKENS (sampled from Figma) ============ */ :root{ --bg:#010101; --charcoal:#141414; --card:#1a1a1a; --text:#f3f3f3; --muted-70:rgba(255,255,255,.5); /* about body / translucent white */ --muted-cool:#b3b6bd; /* subtitle / secondary label */ --orange:#FE7A02; --font:'Inter','Inter Display',sans-serif; --ease:cubic-bezier(.16,.84,.44,1); --gutter:clamp(24px, 8vw, 139px); } *{margin:0;padding:0;box-sizing:border-box;} html{background:var(--bg);scroll-behavior:smooth;} /* overflow-x:clip (not hidden) — `overflow-x:hidden` on turns it into a scroll container, which silently breaks `position:sticky` for every descendant on the page (this is what broke the Selected Work stacking effect). `clip` prevents the same horizontal-scroll bleed without creating a scroll container. */ body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip;} a{color:inherit;text-decoration:none;} button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;} ::selection{background:var(--orange);color:var(--bg);} ::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:var(--charcoal);border-radius:4px;} .container{max-width:1728px;margin:0 auto;padding:0 var(--gutter);} .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease);} .reveal.in-view{opacity:1;transform:translateY(0);} .d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;} .d5{transition-delay:.4s;} /* ============ NAV (standardized to Inter, per decision) ============ */ /* .nav is the full-viewport fixed bar (background/blur/border only); .nav-inner is what actually holds the logo/links/CTA and is capped at the same max-width as .container so the nav lines up with every other section on the page instead of hugging the raw viewport edges on screens wider than 1728px. */ .nav{position:fixed;top:0;left:0;right:0;z-index:200;background:linear-gradient(to bottom, rgba(1,1,1,.85), transparent);transition:background .4s var(--ease);} .nav.scrolled{background:rgba(1,1,1,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);} .nav-inner{max-width:1728px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:28px var(--gutter);transition:padding .4s var(--ease);} .nav.scrolled .nav-inner{padding:18px var(--gutter);} .logo{font-family:var(--font);font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.05;display:inline-flex;align-items:center;} .logo span{color:var(--orange);} .logo-mark{height:48px;width:auto;display:block;} .footer-brand .logo-mark{height:44px;} .case-header .logo-mark{height:34px;} .nav-links{display:flex;align-items:center;gap:36px;} .nav-links a{font-size:14px;font-weight:500;color:var(--text);position:relative;padding:4px 0;transition:color .3s;} .nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--orange);transition:width .35s var(--ease);} .nav-links a:hover{color:var(--orange);} .nav-links a:hover::after{width:100%;} .nav-actions{display:flex;align-items:center;gap:22px;} .nav-cta{ font-family:var(--font);font-size:13px;font-weight:600;color:#1a0d00;background:var(--orange); padding:12px 24px;border-radius:100px;display:inline-flex;align-items:center;gap:8px; letter-spacing:-.005em;white-space:nowrap; transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(254,122,2,.35);} .nav-toggle{display:none;} /* ============ SITE LOADER (first-load entrance only — see index.html for the inline script that turns this on; hidden by default here so a blocked/slow JS never leaves it stuck covering the page) ============ */ .site-loader{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;background:var(--bg);opacity:1;transition:opacity .5s var(--ease);} .site-loader.is-active{display:flex;} .site-loader.is-hiding{opacity:0;pointer-events:none;} .site-loader-dot{width:10px;height:10px;border-radius:50%;background:var(--orange);animation:loaderPulse 1s ease-in-out infinite;} @keyframes loaderPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.7);opacity:.35;}} /* ============ HERO + ABOUT (pinned scroll-video) ============ */ .video-pin{position:relative;height:350vh;background:var(--bg);} .video-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;} /* Poster (z-order via DOM position, not z-index) always fills the frame first — a real image, not a loading state — so there's never a black hero even on a slow connection. The video sits directly above it at opacity:0 and only fades in once ready. */ .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:transparent;opacity:0;transition:opacity .9s var(--ease);will-change:opacity;} .hero-video.is-ready{opacity:1;} .video-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom, rgba(1,1,1,.6) 0%, rgba(1,1,1,.05) 26%, rgba(1,1,1,.08) 66%, rgba(1,1,1,.8) 100%);} .hero-content{position:relative;z-index:3;text-align:left;width:100%;max-width:1728px;margin:0 auto;padding:0 var(--gutter) 96px;transition:opacity .3s linear;will-change:opacity;} .hero-ticker{height:24px;overflow:hidden;margin-bottom:14px;} .ticker-track{display:flex;flex-direction:column;animation:tickerLoop 10s ease-in-out infinite;} .ticker-track span{height:24px;line-height:24px;font-size:clamp(14px,1.5vw,17px);font-weight:400;color:var(--text);letter-spacing:-.01em;} @keyframes tickerLoop{ 0%,20%{transform:translateY(0);} 25%,45%{transform:translateY(-24px);} 50%,70%{transform:translateY(-48px);} 75%,95%{transform:translateY(-72px);} 100%{transform:translateY(-96px);} } .hero-name-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;} .hero-name{font-family:var(--font);font-weight:800;font-size:clamp(32px,5.8vw,92px);line-height:.98;letter-spacing:-.02em;} .hero-name-line{display:block;} .hero-name .accent-dot{color:var(--orange);} /* Designer-signature badge — a small circular "seal": center mark ("UX / MED.") stays upright and legible while the ring of text around it rotates slowly and continuously. Pure SVG (text-on-a-path) so it stays crisp at any size, no image asset needed. */ .hero-badge{flex-shrink:0;width:clamp(84px,7.4vw,124px);height:clamp(84px,7.4vw,124px);margin-top:6px;} .hero-badge-svg{width:100%;height:100%;display:block;overflow:visible;} .hero-badge-ring{transform-origin:100px 100px;animation:badgeSpin 28s linear infinite;} @keyframes badgeSpin{to{transform:rotate(360deg);}} .hero-badge-outline{fill:rgba(1,1,1,.3);stroke:rgba(255,255,255,.4);stroke-width:1;} .hero-badge-ring-text{fill:rgba(255,255,255,.85);font-family:var(--font);font-weight:600;font-size:8.4px;letter-spacing:.5px;text-transform:uppercase;} .hero-badge-center{fill:var(--text);font-family:var(--font);font-weight:800;font-size:23px;letter-spacing:-.01em;} .hero-role-row{display:flex;align-items:center;gap:14px;margin-top:20px;} .hero-role{font-size:13px;font-weight:500;color:var(--muted-cool);letter-spacing:.02em;} .hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;} .hero-tags span{font-size:11.5px;font-weight:500;color:var(--text);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:100px;background:rgba(1,1,1,.3);backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:6px;} .hero-tags span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--orange);} .about-content{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%, -50%);text-align:center;max-width:900px;padding:0 24px;pointer-events:none;} /* Each piece below starts hidden (opacity:0, offset) and is revealed progressively by js/home.js as a slice of the same scroll-driven `progress` value that scrubs the video — accent → heading line 1 → line 2 → paragraph → link, each overlapping the next slightly. A short transition on top of the per-frame JS updates smooths the motion between scroll frames so it reads as a fluid glide rather than a stepped/jittery one. */ .about-accent{display:block;width:26px;height:2px;background:var(--orange);margin:0 auto 22px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease), transform .5s var(--ease);will-change:opacity,transform;} .about-heading{font-family:var(--font);font-weight:600;font-size:clamp(26px,4.6vw,66px);line-height:1.08;letter-spacing:-.02em;margin-bottom:20px;} .about-line-wrap{display:block;overflow:hidden;} .about-line{display:block;opacity:0;transform:translateY(100%);transition:opacity .5s var(--ease), transform .5s var(--ease);will-change:opacity,transform;} .about-body{font-size:clamp(14px,1.4vw,18px);color:var(--muted-70);line-height:1.6;max-width:480px;margin:0 auto;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease), transform .5s var(--ease);will-change:opacity,transform;} .about-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:600;color:var(--orange);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease), transform .5s var(--ease);will-change:opacity,transform;} .about-link .arrow{transition:transform .3s var(--ease);} .about-link:hover .arrow{transform:translateX(4px);} .scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:opacity .3s;} .scroll-cue .line{width:1px;height:32px;background:linear-gradient(var(--orange), transparent);animation:pulse 2s infinite;} @keyframes pulse{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}} /* ============ SECTION HEADERS (matches Figma: heading + subtitle + optional link, no eyebrow) ============ */ .section{padding:130px 0;} .section-tight{padding:100px 0;} .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap;} .section-head-text{max-width:420px;} .section-title{font-family:var(--font);font-weight:500;font-size:clamp(32px,3.2vw,48px);letter-spacing:-.015em;margin-bottom:16px;} .section-sub{font-size:clamp(15px,1.3vw,20px);font-weight:500;color:var(--muted-cool);letter-spacing:-.01em;line-height:1.4;} .section-link{font-size:clamp(14px,1.1vw,17.6px);font-weight:500;color:var(--text);display:inline-flex;align-items:center;gap:8px;letter-spacing:-.01em;flex-shrink:0;padding-bottom:4px;position:relative;} .section-link::after{content:'';position:absolute;left:0;bottom:0;width:13px;height:1px;background:var(--text);} .section-link .arrow{transition:transform .3s var(--ease);} .section-link:hover .arrow{transform:translateX(4px);} /* ============ SELECTED WORK — scroll-driven horizontal showcase ============ Desktop: `.ws-pin` gets pinned by GSAP ScrollTrigger (js/home.js) at full viewport height while `.ws-track` glides horizontally as the user scrolls, one project panel in focus at a time — neighboring panels dim/scale down continuously (computed in ScrollTrigger's onUpdate, not a snap between fixed states). Mobile/tablet and prefers-reduced-motion get `.ws-scroll-mode` instead: a plain native horizontally-scrollable, snap-to-panel row, no pin, no JS required for it to work at all — GSAP is strictly an enhancement on top of it, applied by js/home.js only when the viewport is wide enough, motion is allowed, and the GSAP CDN actually loaded. */ /* Global utility — used by page headers and this section's progress row alike, so it's one plain class instead of scoping the same rule per-section. */ .eyebrow-label{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;display:block;} .ws-pin{position:relative;width:100%;} .ws-viewport{position:relative;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;} /* --ws-inset: same left/right inset as .container's content edge (gutter, OR further in to match the centered 1728px box once the viewport is wider than that) — .ws-pin/.ws-viewport are intentionally full-bleed (outside .container) so GSAP can scrub the track edge to edge, but the progress row and the track's own padding still need to line up with every other section on the page instead of just hugging the raw viewport edge on wide screens. */ .ws-viewport{--ws-inset:max(var(--gutter), calc((100vw - 1728px) / 2 + var(--gutter)));} .ws-progress{position:absolute;top:120px;left:var(--ws-inset);right:var(--ws-inset);z-index:2;display:flex;align-items:center;gap:20px;} .ws-count{font-family:var(--font);font-size:13px;font-weight:600;color:var(--muted-cool);letter-spacing:.04em;white-space:nowrap;} .ws-line{flex:1;max-width:220px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;} .ws-line-fill{display:block;height:100%;width:25%;background:var(--orange);border-radius:2px;transition:width .4s var(--ease);} .ws-browse-all{margin-left:auto;font-size:14px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;} .ws-browse-all .arrow{transition:transform .3s var(--ease);} .ws-browse-all:hover .arrow{transform:translateX(4px);} .ws-track{display:flex;align-items:center;gap:clamp(24px,4vw,64px);padding:0 var(--ws-inset);will-change:transform;} .ws-panel{flex:0 0 85vw;max-width:1360px;display:grid;grid-template-columns:360px 1fr;gap:64px;align-items:center;transition:opacity .3s linear;} .ws-panel-text{display:flex;flex-direction:column;gap:16px;} .ws-panel-cat{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ws-accent, var(--orange));} .ws-panel-title{font-family:var(--font);font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-.02em;} .ws-panel-desc{font-size:15.5px;line-height:1.7;color:var(--muted-70);max-width:340px;} .ws-panel-meta{display:flex;gap:28px;margin-top:4px;} .ws-panel-meta div span{display:block;font-size:11px;color:var(--muted-cool);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;} .ws-panel-meta div strong{font-size:14px;font-weight:600;} .ws-panel-cta{align-self:flex-start;margin-top:8px;} /* Layered visual: a large main screenshot plus two smaller, offset, gently rotated supporting screenshots behind it — a collage/depth composition instead of one flat image in a box. `--ws-accent` (set per-panel in js/home.js from a small per-project color map) tints the ambient glow so each project has its own atmosphere rather than all four looking identical. All three layers fade/scale in once, the first time the section scrolls into view (`.reveal`-style progressive enhancement — see the IntersectionObserver in js/home.js); nothing here depends on JS to be readable, only to animate in. */ .ws-panel-visual{position:relative;height:min(60vh,540px);} .ws-glow{position:absolute;inset:-15%;background:radial-gradient(closest-side, var(--ws-accent, var(--orange)) 0%, transparent 70%);opacity:.14;filter:blur(46px);pointer-events:none;animation:wsGlowPulse 7s ease-in-out infinite;} @keyframes wsGlowPulse{0%,100%{opacity:.1;transform:scale(1);}50%{opacity:.2;transform:scale(1.08);}} /* Single image per panel (see js/home.js) — a 3-layer collage made the current placeholder mockup imagery look messier, not more premium, so this is just one large framed shot per project plus the per-project glow behind it for atmosphere. */ .ws-layer{position:absolute;inset:4%;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,#1c1c1c,#0a0a0a);box-shadow:0 30px 70px rgba(0,0,0,.55);opacity:0;transform:translateY(24px) scale(.96);transition:opacity .8s var(--ease), transform .8s var(--ease);} .ws-layer img{width:100%;height:100%;object-fit:cover;display:block;} .ws-panel-visual.in-view .ws-layer{opacity:1;transform:translateY(0) scale(1);} /* Native scroll-snap fallback — mobile/tablet (js/home.js also uses this for prefers- reduced-motion and a blocked/offline GSAP CDN, on any screen width, via the same class). */ .ws-track.ws-scroll-mode{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;} .ws-track.ws-scroll-mode::-webkit-scrollbar{display:none;} .ws-track.ws-scroll-mode{scroll-snap-type:x mandatory;} .ws-track.ws-scroll-mode .ws-panel{scroll-snap-align:start;opacity:1 !important;transform:none !important;} /* ============ PROCESS (new — same visual language) ============ */ .process-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .process-card{border-top:1px solid rgba(255,255,255,.12);padding-top:28px;} .process-num{font-family:var(--font);font-weight:800;font-size:15px;color:var(--orange);letter-spacing:.02em;margin-bottom:60px;display:block;} .process-card h3{font-family:var(--font);font-weight:600;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em;margin-bottom:12px;} .process-card p{font-size:15px;color:var(--muted-70);line-height:1.6;max-width:280px;} /* ============ EXPERIENCE & IMPACT ============ */ .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:48px;margin-bottom:70px;} .metric{border-right:1px solid rgba(255,255,255,.08);padding-right:16px;} .metric:last-child{border-right:none;} .metric-num{font-family:var(--font);font-weight:800;font-size:clamp(30px,3vw,44px);letter-spacing:-.02em;margin-bottom:10px;} .metric-num span{color:var(--orange);} .metric-label{font-size:13px;color:var(--muted-cool);line-height:1.5;} /* ============ CONTACT / FOOTER ============ */ .contact{text-align:center;padding:150px 0 0;position:relative;} .contact-title{font-family:var(--font);font-weight:700;font-size:clamp(32px,5.4vw,72px);letter-spacing:-.02em;line-height:1.05;max-width:900px;margin:0 auto 22px;} .contact-body{font-size:16px;color:var(--muted-70);max-width:480px;margin:0 auto 40px;line-height:1.6;} .contact-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .btn{font-size:14px;font-weight:600;padding:15px 30px;border-radius:100px;transition:all .4s var(--ease);display:inline-flex;align-items:center;gap:8px;} .btn-primary{background:var(--orange);color:#1a0d00;} .btn-primary:hover{box-shadow:0 8px 32px rgba(255,138,0,.35);transform:translateY(-2px);} .btn-ghost{border:1px solid rgba(255,255,255,.18);} .btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.04);transform:translateY(-2px);} footer{padding:80px 0 40px;margin-top:80px;border-top:1px solid rgba(255,255,255,.08);} .footer-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;} .footer-brand .logo{font-size:16px;display:block;margin-bottom:8px;} .footer-brand p{font-size:13px;color:var(--muted-cool);} .footer-links{display:flex;gap:26px;flex-wrap:wrap;} .footer-links a{font-size:13.5px;color:var(--muted-cool);transition:color .3s;} .footer-links a:hover{color:var(--orange);} .footer-bottom{margin-top:40px;font-size:12px;color:rgba(255,255,255,.35);text-align:center;} /* ============ CASE STUDY OVERLAY ============ */ .case-overlay{position:fixed;inset:0;z-index:1000;background:var(--bg);transform:translateY(100%);opacity:0;pointer-events:none;transition:transform .7s var(--ease), opacity .5s var(--ease);overflow-y:auto;} .case-overlay.open{transform:translateY(0);opacity:1;pointer-events:auto;} .case-header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:24px var(--gutter);background:rgba(1,1,1,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);} .case-close{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.16);padding:9px 18px;border-radius:100px;transition:all .3s;} .case-close:hover{border-color:var(--orange);background:rgba(255,138,0,.08);} .case-hero-img{max-width:1456px;height:360px;margin:36px auto 0;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#1c1c1c,#0a0a0a);} .case-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .case-hero{padding:36px var(--gutter) 40px;max-width:1000px;margin:0 auto;} .case-hero .case-cat{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;display:block;} .case-hero h1{font-family:var(--font);font-weight:700;font-size:clamp(28px,4.6vw,52px);letter-spacing:-.02em;margin-bottom:18px;} .case-tags{display:flex;gap:8px;flex-wrap:wrap;} .case-tags span{font-size:12px;color:var(--muted-cool);border:1px solid rgba(255,255,255,.12);padding:5px 12px;border-radius:100px;} .case-body{max-width:820px;margin:0 auto;padding:40px var(--gutter) 120px;} .case-block{margin-bottom:54px;} .case-block h2{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;} .case-block p{font-size:16px;line-height:1.8;color:var(--muted-70);} .case-block ul{margin-top:14px;display:grid;gap:12px;} .case-block ul li{font-size:15px;color:var(--text);padding-left:22px;position:relative;line-height:1.6;} .case-block ul li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--orange);} .case-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:54px;padding:26px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);} .case-meta div span{display:block;font-size:12px;color:var(--muted-cool);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;} .case-meta div strong{font-family:var(--font);font-size:15px;font-weight:600;} .case-screens{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .case-screen{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#1c1c1c,#0a0a0a);} .case-screen img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .takeaway{border-left:2px solid var(--orange);padding-left:24px;font-family:var(--font);font-size:19px;font-weight:500;line-height:1.5;} /* ============ ABOUT PAGE ============ */ .page-header{padding:180px 0 90px;} .page-title{font-family:var(--font);font-weight:700;font-size:clamp(38px,6vw,84px);letter-spacing:-.02em;line-height:1.02;max-width:900px;margin-bottom:26px;} .page-lede{font-size:clamp(16px,1.6vw,22px);color:var(--muted-cool);font-weight:500;letter-spacing:-.01em;line-height:1.5;max-width:640px;} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;} .about-bio p{font-size:16.5px;line-height:1.85;color:var(--muted-70);margin-bottom:22px;} .about-bio p:last-child{margin-bottom:0;} .about-tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;} .about-tags-row span{font-size:11.5px;font-weight:500;color:var(--text);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:100px;display:inline-flex;align-items:center;gap:6px;} .about-tags-row span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--orange);} .skills-groups{display:flex;flex-direction:column;gap:26px;} .skill-group{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;} .skill-group h3{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:14px;} .skill-group .tags{display:flex;flex-wrap:wrap;gap:8px;} .skill-group .tags span{font-size:13px;color:var(--muted-cool);border:1px solid rgba(255,255,255,.1);padding:6px 12px;border-radius:100px;} /* Experience timeline */ .timeline{border-top:1px solid rgba(255,255,255,.1);} .timeline-item{border-bottom:1px solid rgba(255,255,255,.1);padding:34px 0;display:grid;grid-template-columns:.9fr 2.1fr;gap:32px;} .timeline-period{font-family:var(--font);font-size:13px;font-weight:600;color:var(--muted-cool);letter-spacing:.04em;padding-top:4px;} .timeline-role{font-family:var(--font);font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.01em;margin-bottom:6px;} .timeline-org{font-size:13.5px;color:var(--orange);font-weight:500;margin-bottom:12px;} .timeline-desc{font-size:15px;color:var(--muted-70);line-height:1.7;max-width:620px;} .timeline-desc ul{margin-top:10px;display:grid;gap:8px;} .timeline-desc ul li{padding-left:18px;position:relative;} .timeline-desc ul li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--orange);} /* Certificates */ .cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .cert-card{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px;transition:border-color .4s var(--ease), transform .4s var(--ease);} .cert-card:hover{border-color:rgba(255,138,0,.35);transform:translateY(-4px);} .cert-card .cert-year{font-family:var(--font);font-size:13px;color:var(--orange);font-weight:600;margin-bottom:14px;display:block;} .cert-card h3{font-family:var(--font);font-size:17px;font-weight:600;line-height:1.4;} /* ============ STANDALONE CASE STUDY PAGES (reuses overlay's .case-* components) ============ */ .case-page{padding-top:130px;} .work-page-card .case-tags{margin-top:2px;} .work-page-card .case-tags span{font-size:11px;padding:4px 10px;} /* ============ CASE STUDY V2 — standalone project pages only ============ Layout reference: https://portfolixtemplate.webflow.io/services-pages/case-studies-v1 Deliberately namespaced cs2- rather than reusing .case-* above: those classes are shared with the on-page overlay in work.html (for projects with no standalone page yet, e.g. Initia Formation), which keeps its existing look for now. Only case-studies/*.html use these. */ .cs2-page{padding-top:130px;} .cs2-head{max-width:900px;margin:0 auto 40px;} .cs2-head-row{display:flex;align-items:center;gap:16px;margin-bottom:22px;} .cs2-head-icon{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .cs2-head-icon img{width:22px;height:22px;display:block;} .cs2-title{font-family:var(--font);font-weight:700;font-size:clamp(32px,5vw,56px);letter-spacing:-.02em;} .cs2-sub{font-size:16px;color:var(--muted-70);line-height:1.7;max-width:620px;} .cs2-layout{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start;margin-top:40px;} .cs2-hero-frame{border-radius:24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg, rgba(255,138,0,.14), rgba(255,255,255,.02));padding:20px;margin-bottom:64px;} .cs2-hero-frame img{width:100%;border-radius:14px;display:block;box-shadow:0 30px 60px rgba(0,0,0,.5);} /* Empty image slot — for case studies awaiting real screenshots. Deliberately not another wireframe-style mockup (see .cs2-hero-frame/.cs2-g-item's own background/border for the frame itself) — an icon + label sitting quietly inside the existing frame, not a separate dashed box nested inside it. */ .cs2-placeholder{width:100%;height:100%;min-height:260px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0));} .cs2-hero-frame .cs2-placeholder{min-height:420px;} .cs2-placeholder svg{width:30px;height:30px;color:var(--muted-cool);opacity:.6;} .cs2-placeholder span{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-cool);} .cs2-meta{position:sticky;top:120px;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:20px;} .cs2-meta div span{display:block;font-size:12px;color:var(--muted-cool);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;} .cs2-meta div strong{font-family:var(--font);font-size:15px;font-weight:600;} .cs2-meta-divider{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;} .cs2-meta .case-tags{margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;} .cs2-section{margin-bottom:56px;} .cs2-section h2{font-family:var(--font);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;margin-bottom:16px;} .cs2-section p{font-size:16px;line-height:1.8;color:var(--muted-70);} .cs2-section ol,.cs2-section ul{margin-top:16px;display:grid;gap:12px;} .cs2-section ol{counter-reset:cs2step;list-style:none;} .cs2-section ol li{position:relative;padding-left:30px;font-size:15px;line-height:1.7;color:var(--text);} .cs2-section ol li::before{counter-increment:cs2step;content:counter(cs2step)'.';position:absolute;left:0;top:0;color:var(--orange);font-weight:600;} .cs2-section ul li{position:relative;padding-left:22px;font-size:15px;line-height:1.7;color:var(--text);} .cs2-section ul li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--orange);} .cs2-gallery-title{font-family:var(--font);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;margin-bottom:24px;} .cs2-gallery{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:200px;gap:16px;} .cs2-g-item{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,#1c1c1c,#0a0a0a);} .cs2-g-item img{width:100%;height:100%;object-fit:cover;display:block;} .cs2-g-item.tall{grid-row:span 2;} .cs2-g-item.wide{grid-column:span 2;} .cs2-related{padding:100px 0;border-top:1px solid rgba(255,255,255,.08);} .cs2-related-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px;flex-wrap:wrap;} .cs2-related-head h2{font-family:var(--font);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.01em;} .cs2-related-head a{font-size:14px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;} .cs2-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .cs2-related-card{display:block;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);transition:transform .4s var(--ease), border-color .4s var(--ease);} .cs2-related-card:hover{transform:translateY(-4px);border-color:rgba(255,138,0,.3);} .cs2-related-card .thumb{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(160deg,#1c1c1c,#0a0a0a);} .cs2-related-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);} .cs2-related-card:hover .thumb img{transform:scale(1.05);} .cs2-related-card .info{padding:16px 18px 20px;} .cs2-related-card .info h3{font-family:var(--font);font-size:16px;font-weight:600;margin-bottom:4px;} .cs2-related-card .info p{font-size:13px;color:var(--muted-70);line-height:1.5;} /* ============ WORK PAGE (full project grid) ============ */ .work-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .work-page-card{ background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden; display:flex;flex-direction:column;cursor:pointer; transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } .work-page-card:hover{transform:translateY(-6px);border-color:rgba(255,138,0,.3);box-shadow:0 30px 60px rgba(0,0,0,.4);} /* The card controls the image's size, never the other way around: a fixed 16:9 frame capped at 560px tall, with a dark gradient underneath as a fallback while the image loads (or in the rare case a path is ever missing) — never an empty box. The itself just fills that frame with object-fit:cover, so swapping in a real screenshot later can't ever stretch the card or shift the layout. */ .work-page-media{ position:relative;width:100%;aspect-ratio:16/9;max-height:560px;overflow:hidden; background:linear-gradient(160deg,#1c1c1c,#0a0a0a); } .work-page-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s var(--ease);} .work-page-card:hover .work-page-media img{transform:scale(1.045);} .work-page-body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1;} .work-page-cat{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);} .work-page-card h3{font-family:var(--font);font-size:clamp(19px,1.8vw,24px);font-weight:600;letter-spacing:-.01em;} .work-page-desc{font-size:14.5px;color:var(--muted-70);line-height:1.65;flex:1;} .work-page-cta{align-self:flex-start;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:8px;padding-bottom:2px;position:relative;} .work-page-cta::after{content:'';position:absolute;left:0;bottom:0;width:13px;height:1px;background:var(--text);} .work-page-cta .arrow{transition:transform .3s var(--ease);} .work-page-card:hover .work-page-cta .arrow{transform:translateX(4px);} /* ============ MOBILE ============ */ @media (max-width:900px){ .nav-inner{padding:20px 24px;} .nav-actions{gap:12px;} .nav-links{position:fixed;top:0;right:0;height:100vh;width:70%;max-width:300px;background:rgba(6,6,6,.98);backdrop-filter:blur(20px);flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:40px;transform:translateX(100%);transition:transform .5s var(--ease);border-left:1px solid rgba(255,255,255,.08);} .nav-links.open{transform:translateX(0);} .nav-links a{font-size:17px;} .nav-toggle{display:flex;flex-direction:column;gap:5px;width:24px;z-index:220;} .nav-toggle span{height:1.5px;background:var(--text);width:100%;transition:all .3s;} .nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .nav-toggle.open span:nth-child(2){opacity:0;} .nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} .video-pin{height:250vh;} .hero-content{padding:0 24px 60px;} .hero-badge{width:58px;height:58px;margin-top:2px;} .section{padding:90px 0;} .section-tight{padding:70px 0;} .process-list{grid-template-columns:1fr 1fr;row-gap:40px;} .metrics{grid-template-columns:1fr 1fr;row-gap:30px;} .metric:nth-child(2n){border-right:none;} .work-page-grid{grid-template-columns:1fr;} /* Selected Work on small screens: no pin, GSAP is never invoked (js/home.js checks isMobile before creating the ScrollTrigger) — .ws-scroll-mode's native scroll-snap row (see the base rules above) takes over instead, so this only needs to resize the panel itself down to a comfortable single-column, swipeable card. */ .ws-viewport{height:auto;overflow:visible;} .ws-progress{position:static;margin-bottom:24px;} .ws-browse-all{display:none;} .ws-track{padding:0 24px;gap:16px;} .ws-panel{flex:0 0 88vw;grid-template-columns:1fr;gap:24px;scroll-snap-align:start;} .ws-panel-visual{height:280px;order:-1;} .ws-layer{inset:0;} .ws-panel-desc{max-width:100%;} .cs2-page{padding-top:100px;} .cs2-layout{grid-template-columns:1fr;gap:32px;} .cs2-meta{position:relative;top:auto;} .cs2-hero-frame{padding:12px;margin-bottom:40px;} .cs2-gallery{grid-template-columns:1fr;grid-auto-rows:220px;} .cs2-g-item.tall,.cs2-g-item.wide{grid-row:span 1;grid-column:span 1;} .cs2-related-grid{grid-template-columns:1fr;} .case-meta{grid-template-columns:1fr;gap:16px;} .case-screens{grid-template-columns:1fr;} .case-hero{padding:30px 20px 30px;} .case-body{padding:20px 20px 80px;} .case-header{padding:18px 20px;} .footer-grid{flex-direction:column;} .page-header{padding:150px 0 60px;} .about-grid{grid-template-columns:1fr;gap:44px;} .timeline-item{grid-template-columns:1fr;gap:10px;} .cert-grid{grid-template-columns:1fr;} } @media (max-width:560px){ .process-list{grid-template-columns:1fr;} .metrics{grid-template-columns:1fr 1fr;} .nav-cta{padding:9px 16px;font-size:12px;} } @media (prefers-reduced-motion: reduce){ .site-loader{transition:none;} .site-loader-dot{animation:none;} .hero-video{transition:none;} .video-pin{height:auto;} .video-sticky{position:relative;height:100vh;} .hero-content{opacity:1 !important;} .about-content{position:relative;left:auto;top:auto;transform:none;opacity:1;pointer-events:auto;margin:60px auto 0;} /* js/home.js skips the whole scroll-driven reveal loop when reduced motion is on, so these children would otherwise stay stuck at their hidden opacity:0 starting state forever. */ .about-accent,.about-line,.about-body,.about-link{opacity:1 !important;transform:none !important;} .scroll-cue{display:none;} .ticker-track{transform:translateY(0) !important;} .hero-badge-ring{animation:none !important;} /* Selected Work: js/home.js never creates the ScrollTrigger pin when reduced motion is on — same native .ws-scroll-mode row used on mobile — and skips the glow pulse + layer entrance animation, so those need to land in their finished state instantly instead. */ .ws-glow{animation:none;opacity:.12;} .ws-layer{transition:none;opacity:1;transform:none;} *{transition:none !important;animation:none !important;} }