:root{--nav-ink:rgba(9,38,96,.6);--body-ink:#351d16;--design-scale:1}
html{scroll-behavior:auto;scroll-padding-top:70px;background:#fff}
body{margin:0;background:#fff;color:var(--body-ink);font-family:Urbanist,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
#main{position:relative;overflow:clip}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:1px solid #9ca6bd;outline-offset:6px}
.site-header{position:absolute;z-index:20;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;width:min(100%,1600px);padding:24px clamp(32px,4vw,64px);line-height:1.2;white-space:nowrap;gap:24px}
.brand{font-size:calc(24px * var(--design-scale));font-weight:800;color:rgba(184,180,207,.6)}
.project-back{display:inline-flex;align-items:center;gap:calc(8px * var(--design-scale))}
.back-icon{position:relative;flex:none;width:calc(24px * var(--design-scale));height:calc(24px * var(--design-scale))}
.back-icon img{transform:scale(var(--design-scale));transform-origin:top left}
.site-header nav{display:flex;align-items:center;gap:calc(48px * var(--design-scale));font-size:calc(16px * var(--design-scale));font-weight:500;letter-spacing:calc(1.6px * var(--design-scale));color:var(--nav-ink)}
.site-header a{padding-block:8px}
.site-header a{transition:color .25s ease,opacity .25s ease}
.site-header a:hover{color:#3c537f}
.site-header nav a{position:relative}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;opacity:0;transform:scaleX(0);transform-origin:center center;transition:transform .28s cubic-bezier(.2,.65,.2,1),opacity .28s ease;pointer-events:none}
@media(hover:hover){.site-header nav a:hover::after{transform:scaleX(1);opacity:.65}}
.site-header nav a:focus-visible::after{transform:scaleX(1);opacity:.65}
.site-footer{position:relative;display:flex;justify-content:space-between;gap:16px;width:min(100%,1440px);margin:0 auto;padding:24px min(8.3333vw,120px);font-size:calc(16px * var(--design-scale));font-weight:500;line-height:1.2;color:var(--nav-ink);letter-spacing:1.6px}
.site-footer a{text-decoration:underline;text-underline-offset:3px}
.figma-sheet{position:relative;margin:0 auto;isolation:isolate;transform-origin:top center;overflow:clip}
.mobile-home,.mobile-case,.mobile-about{display:none}
[data-node-id="1:1900"],[data-node-id="1:2701"]{white-space:nowrap;transform-origin:left center}
/* The title also uses linear burn in Figma. Chromium has no plus-darker;
   multiply preserves the intended darkening against this near-white field. */
[data-node-id="1:1900"],[data-node-id="1:2699"]{mix-blend-mode:multiply}
@supports(mix-blend-mode:plus-darker){[data-node-id="1:1900"],[data-node-id="1:2699"]{mix-blend-mode:plus-darker}}
.project-card{color:inherit;cursor:pointer;transition:filter .4s ease}
/* Figma's backing paint is white at 72%, with LINEAR_BURN on the node.
   Linear burn = max(0, backdrop + source - 1). For a white source the
   composite equals the backdrop at every opacity. A transparent backing is
   the exact result, including inside reveal-animation stacking contexts. */
.card-backing{background-color:transparent!important}
.project-card:after,.related-card:after{position:absolute;inset:0;content:"";border:1px solid transparent;border-radius:20px;pointer-events:none;transition:border-color .35s ease,box-shadow .35s ease}
.project-card:hover:after,.related-card:hover:after{border-color:rgba(184,180,207,.25);box-shadow:0 10px 35px rgba(120,105,115,.06)}
.creative-section{width:1200px!important;max-width:1200px}
.selected-projects>p,.creative-section>p,.related-heading{font-family:Urbanist,sans-serif;font-weight:400;letter-spacing:.1em}
.creative-viewport{width:100%;overflow:auto hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:0;scroll-behavior:smooth}
.creative-track{width:max-content!important;min-width:100%;touch-action:pan-x pan-y;cursor:grab;user-select:none}
.creative-track:active{cursor:grabbing}
.creative-track>*{scroll-snap-align:start}
.creative-picture{align-self:center;isolation:isolate}
.creative-item{align-items:center!important}
.creative-item>p{white-space:nowrap}
.creative-viewport{scroll-snap-type:x proximity}
.creative-viewport::-webkit-scrollbar{display:none}
.creative-scroll-hint{position:relative;width:100%;height:1px;margin:22px auto 0;background:rgba(184,180,207,.09);border-radius:1px;pointer-events:none}
.creative-scroll-hint span{position:absolute;top:0;left:0;width:20%;height:1px;background:rgba(160,157,181,.23);border-radius:1px}
.creative-scroll-hint[hidden]{display:none}
.creative-scroll-area{width:100%;min-width:0}
.creative-track:focus-visible{outline:none}
.creative-scroll-area:focus-within .creative-scroll-hint{background-color:rgba(184,180,207,.18)}
.desktop-home .creative-section{width:1320px!important;max-width:1320px}
.desktop-home .creative-track{gap:120px!important}
.desktop-home .creative-item{width:260px}
.project-switch{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:center;gap:42px;padding:18px 24px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(255,255,255,.84);border-bottom:1px solid rgba(184,180,207,.16);color:rgba(9,38,96,.5);font-size:14px;letter-spacing:1px;transform:translateY(-110%);transition:transform .45s cubic-bezier(.22,.68,0,1),color .3s ease}
.project-switch{pointer-events:none}
.project-switch.is-visible,.project-switch:focus-within{transform:translateY(0);pointer-events:auto}
.project-switch a{position:relative;padding:5px 0;white-space:nowrap}
.project-switch a[aria-current]{color:#4d5475}
.project-switch a[aria-current]:after{position:absolute;bottom:0;left:0;right:0;content:"";height:1px;background:rgba(125,130,156,.5)}
.related{position:relative;max-width:1200px;margin:100px auto 100px;padding:0 0 20px}
.related-heading{margin:0 0 calc(100px * var(--design-scale));font-family:Urbanist,sans-serif;font-size:calc(24px * var(--design-scale));font-weight:400;line-height:1.2;letter-spacing:.1em;color:var(--nav-ink)}
.related-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.related-all{width:calc(1200px * var(--design-scale));max-width:1200px;margin-top:60px}
.related-all .related-track{display:flex;gap:40px;overflow:auto hidden;overscroll-behavior-x:contain;scroll-snap-type:none;scroll-behavior:auto;scrollbar-width:none;padding-bottom:0}
.related-all .related-track::-webkit-scrollbar{display:none}
.related-all .related-slot{flex:none;scroll-snap-align:none}
.related-slot{width:353px;position:relative;justify-self:center}
.related-card{display:inline-grid;position:relative;cursor:pointer;color:inherit}
/* Shared layout keeps every compact project card and its baselines identical. */
.project-tile{position:relative;display:flex;flex-direction:column;gap:16px;width:353px;height:440px;padding:20px;border-radius:20px;flex:none;line-height:normal}
.project-tile .tile-picture{width:313px;height:206px;flex:none}
.tile-copy{display:grid;grid-template-rows:44px 19.2px minmax(57.6px,1fr) 22px;gap:8px;width:100%;flex:1;min-height:0}
.tile-title{align-self:center}
.tile-description{width:100%;min-width:0}
.project-tags{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap;align-items:center}
.project-tile .project-tags{align-self:end;flex-wrap:nowrap}
.desktop-home .project-tags{gap:12px}
.project-tile .project-tags p{white-space:nowrap}
.reveal{transition:opacity .8s ease,translate 1s cubic-bezier(.2,.65,.2,1)}
@media(prefers-reduced-motion:no-preference){.motion-ready .reveal:not(.is-inview){opacity:0;translate:0 16px}}
.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}
.about-sheet{overflow:hidden}
body[data-page=about]{min-height:100svh;display:flex;flex-direction:column;background-image:url('assets/c18f8.svg');background-size:calc(100% + 1000px) calc(100% + 1000px);background-position:center;background-repeat:no-repeat}
body[data-page=about] #main{flex:1}
body[data-page=about] .site-footer{flex-shrink:0}
body[data-page=about] .about-sheet{background-color:transparent!important}
body[data-page=about] [data-node-id="1:2135"]{display:none}
body[data-page=about] .mobile-about{background:none}
@media(min-width:761px){
 body[data-page=kivro]{background-color:#f6f6f6}
 body:not([data-page=home]) .site-header{padding-top:24px;padding-bottom:24px}
 .desktop-home{margin-bottom:0}
 .desktop-home [data-node-id="1:1897"]{top:calc(var(--hero-design-height,900px) - 168px)!important}
 .desktop-home [data-node-id="1:1910"]{top:calc(var(--hero-design-height,900px) + 100px)!important}
}
/* Expand only decorative color layers beyond the original 1440px canvas.
   The page content and product screenshots retain their Figma dimensions. */
@media(min-width:1441px){
 .desktop-home,.case-sheet,.about-sheet{overflow:visible;clip-path:inset(0 calc((1440px - 100vw) / 2))}
 .desktop-home [data-node-id="1:1882"],
 .desktop-home [data-node-id="1:1886"],
 .desktop-home [data-node-id="1:1887"],
 .desktop-home [data-node-id="1:1892"],
 .case-sheet [data-node-id="1:1444"],
 .case-sheet [data-node-id="1:781"],
 .infinity-sheet>[data-node-id="1:132"],
 .about-sheet [data-node-id="1:2135"]{transform:scaleX(var(--background-scale,1));transform-origin:50% 50%}
}
@media(max-width:760px){
 :root{--design-scale:1}
 html{scroll-padding-top:74px}
 .site-header{padding:16px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
 .brand{font-size:16px}
 .site-header .back-icon{width:24px;height:24px}
 .site-header nav{font-size:12px;letter-spacing:1.2px;gap:0;justify-content:space-between;width:100%;max-width:550px}
 .site-footer{padding:24px max(24px,6vw);font-size:10px;letter-spacing:.5px;gap:12px}
 .desktop-home{display:none}
 .mobile-home{display:block}
 .mobile-home .creative-section{width:353px!important;max-width:353px}
 .mobile-home .creative-viewport{padding-bottom:0}
 .mobile-home .creative-scroll-hint{margin-top:16px}
 .project-switch{gap:0;justify-content:space-between;font-size:11px;letter-spacing:.4px;padding:15px 22px}
 .case-sheet{display:none}
 .mobile-case{display:flex;flex-direction:column;gap:80px;padding:140px 24px 0;overflow:hidden}
 .mobile-case section{width:100%;min-width:0;display:flex;flex-direction:column;gap:32px}
 .mobile-case .mobile-flow{display:flex;flex-direction:column;align-items:stretch;gap:24px;position:relative;width:100%;min-width:0;height:auto}
 .mobile-case .mobile-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;width:100%;min-width:0}
 .mobile-case .mobile-copy{position:relative;width:auto!important;min-width:0!important;max-width:100%;height:auto!important;white-space:normal!important;overflow-wrap:break-word;line-height:1.55!important}
 .mobile-case .mobile-hero{margin-bottom:10px}
 .mobile-case .mobile-hero .mobile-copy{max-width:100%}
 .mobile-case .mobile-hero-title{font-size:38px!important;line-height:1.2!important}
 .mobile-case .hero-tags{flex-direction:row!important;flex-wrap:wrap!important;justify-content:center;gap:8px 16px!important}
 .mobile-case .hero-tags .mobile-copy{font-size:13px!important;letter-spacing:.3px!important}
 .mobile-artboard{position:relative;width:100%;overflow:hidden;flex-shrink:0}
 .mobile-artboard>.artboard-inner{position:absolute!important;top:0!important;left:0!important;transform-origin:top left;translate:none!important;max-width:none}
 .mobile-artboard img{max-width:none}
 .related{margin:80px 24px 50px;padding:0}
 .related-all{width:auto}
 .related-heading{margin-bottom:32px;font-size:16px;letter-spacing:.1em}
 .related-track{display:flex;gap:24px;width:100%;overflow:auto hidden;scrollbar-width:thin;scrollbar-color:#e5e1eb transparent;scroll-snap-type:x proximity;padding-bottom:16px}
 .related-all .related-track{gap:24px}
 .related-slot{flex-shrink:0;scroll-snap-align:start}
 .about-sheet{display:none}
 .mobile-about{padding:138px 24px 40px;background:#fff url('assets/c18f8.svg') center top/cover no-repeat;display:flex;flex-direction:column;gap:36px}
 .mobile-about .mobile-flow{display:flex;flex-direction:column;gap:24px}
 .mobile-about .mobile-copy{width:auto!important;min-width:0!important;white-space:normal!important;line-height:1.6!important}
 .mobile-about .mobile-artboard{max-width:398px;align-self:center}
 .mobile-about .mobile-row{display:flex;flex-wrap:wrap;gap:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.site-header a,.project-switch,.project-card:after,.related-card:after{transition:none}.creative-viewport{scroll-behavior:auto}}
@media(prefers-reduced-motion:reduce){.site-header nav a::after{transition:none}}