@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap";:root{color-scheme:light;--primary: #0ea2bd;--primary-light: #1ec3e0;--primary-dark: #0189a1;--secondary: #485664;--secondary-dark: #3a4753;--secondary-light: #8f9fae;--ink: #1a1f24;--surface: #ffffff;--soft: #f7f9fa;--line: #e3e8eb;--font-default: "Open Sans", system-ui, sans-serif;--font-primary: "Source Sans 3", sans-serif;--font-secondary: "Poppins", sans-serif;font-family:var(--font-default)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--ink)}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{position:fixed;inset:0 0 auto;z-index:20;padding:15px 0;background:transparent;box-shadow:none;transition:background .25s ease,box-shadow .25s ease,padding .25s ease}.site-header.scrolled{background:#fffffff5;box-shadow:0 2px 20px #4856641a;padding:10px 0}.header-inner{width:calc(100% - 24px);margin:auto;display:flex;align-items:center;justify-content:space-between}.brand,.footer-brand{font-family:var(--font-secondary);color:var(--secondary);font-size:32px;font-weight:300;line-height:1}.brand span,.footer-brand span{color:var(--primary);font-weight:500}.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}.main-nav a{position:relative;padding:14px 17px;color:#3a4753b8;font-family:var(--font-secondary);font-size:16px;transition:color .2s ease}.main-nav a:after{content:"";position:absolute;left:15%;right:15%;bottom:3px;height:2px;background:var(--primary);transform:scaleX(0);transition:transform .2s ease}.main-nav a:hover,.main-nav a.active{color:var(--primary)}.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}.menu-toggle{display:none;width:42px;height:42px;border:0;background:transparent;padding:10px}.menu-toggle span{display:block;height:2px;margin:5px 0;background:var(--secondary)}.portfolio-hero{min-height:390px;display:grid;place-items:center;padding:112px 24px 54px;position:relative;isolation:isolate;background:url(/portfolio/brand/ryotek-bg.jpg) center/cover no-repeat}.portfolio-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:#ffffffe0}.hero-inner{width:min(880px,100%);text-align:center;opacity:0;transform:translateY(20px)}.motion-ready .hero-inner{animation:hero-enter .8s cubic-bezier(.2,.7,.2,1) .1s forwards}.eyebrow{margin:0 0 14px;color:var(--primary);font-family:var(--font-default);font-size:13px;font-weight:700;text-transform:uppercase}.portfolio-hero h1{margin:0;color:var(--secondary);font-family:var(--font-secondary);font-size:clamp(36px,4.5vw,58px);font-weight:300;line-height:1.14;letter-spacing:0}.portfolio-hero h1:first-line{color:var(--primary)}.hero-summary{max-width:720px;margin:17px auto 0;color:#485664d1;font-size:17px;line-height:1.65}.projects-section{width:min(1440px,calc(100% - 48px));margin:auto;padding:70px 0 100px}.section-heading{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--line)}.section-heading .eyebrow{grid-column:1 / -1}.section-heading h2{margin:0;color:var(--secondary);font-family:var(--font-secondary);font-size:clamp(28px,3vw,40px);font-weight:300;line-height:1.18}.section-heading>span{color:var(--secondary-light);font-size:13px;font-weight:600}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 20px}.project-card{min-width:0}.browser-frame{position:relative;isolation:isolate;overflow:hidden;padding:7px;border:1px solid rgba(255,255,255,.72);border-radius:12px;background:linear-gradient(145deg,#fff9,#c5e5eb47);box-shadow:0 18px 42px #3a475329,inset 0 1px #fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.browser-frame:after{content:"";position:absolute;z-index:4;top:-70%;bottom:-70%;left:-55%;width:28%;pointer-events:none;opacity:0;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),rgba(255,255,255,.16),transparent);filter:blur(1px)}.browser-frame:hover:after{animation:browser-reflection .9s cubic-bezier(.2,.65,.3,1)}.browser-bar{position:relative;z-index:2;display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;height:30px;padding:0 6px}.browser-controls{display:flex;gap:4px}.browser-controls span{width:6px;height:6px;border-radius:50%;background:#4856647a;box-shadow:inset 0 1px 1px #ffffff59}.browser-address{grid-column:2;overflow:hidden;padding:5px 12px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:#48566414;color:#3a47537a;font-family:var(--font-default);font-size:8px;line-height:1;text-align:center;text-overflow:ellipsis;white-space:nowrap}.project-preview{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background:#e8edef;box-shadow:0 8px 22px #3a47531f}.project-preview video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .45s ease}.project-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,24,39,.62),transparent 42%);opacity:.5;transition:opacity .3s ease}.project-number{position:absolute;z-index:2;top:15px;left:15px;display:grid;place-items:center;width:38px;height:32px;border-radius:4px;background:#ffffffeb;color:var(--secondary);font-family:var(--font-secondary);font-size:12px;font-weight:600}.preview-action{position:absolute;z-index:2;right:18px;bottom:16px;color:#fff;font-family:var(--font-secondary);font-size:14px;font-weight:500}.preview-action span{margin-left:7px;color:var(--primary-light);font-size:18px}.project-preview:hover video,.project-preview:focus-visible video{transform:scale(1.025);filter:saturate(1.05)}.project-preview:hover:after{opacity:.8}.project-preview:focus-visible{outline:3px solid rgba(14,162,189,.45);outline-offset:4px}.project-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:17px 3px 0}.project-category{margin:0 0 7px;color:var(--primary-dark);font-size:12px;font-weight:700;text-transform:uppercase}.project-copy h2{margin:0;color:var(--secondary);font-family:var(--font-secondary);font-size:21px;font-weight:500;line-height:1.25}.project-footer{display:flex;align-items:center;gap:10px;padding-top:2px}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags span{padding:5px 7px;border-radius:4px;background:#0ea2bd17;color:var(--primary-dark);font-size:10px;font-weight:700}.project-footer>a{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;color:var(--primary);font-size:18px}.project-footer>a span{color:var(--primary)}.project-footer>a:hover{color:var(--primary)}.contact-band{display:flex;align-items:center;justify-content:space-between;gap:48px;padding:64px max(24px,calc((100vw - 1320px)/2));background:var(--secondary-dark);color:#fff}.contact-band h2{margin:0;font-family:var(--font-secondary);font-size:clamp(30px,3.5vw,46px);font-weight:400}.contact-band p:not(.eyebrow){max-width:680px;margin:12px 0 0;color:#ffffffad;line-height:1.7}.contact-band>a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border-radius:4px;background:var(--primary);color:#fff;font-family:var(--font-secondary);font-weight:500}.contact-band>a span{margin-left:12px;font-size:19px}.contact-band>a:hover{background:var(--primary-light)}.site-footer{padding:54px max(24px,calc((100vw - 1320px)/2)) 24px;background:#2f3b46;color:#fff}.footer-inner{display:flex;justify-content:space-between;gap:60px;padding-bottom:42px}.footer-brand{color:#fff}.footer-inner p{max-width:500px;margin:16px 0 0;color:#fff9;line-height:1.7}.footer-contact{display:grid;align-content:start;gap:8px;min-width:220px}.footer-contact span{margin-bottom:3px;color:var(--primary-light);font-family:var(--font-secondary);font-size:13px;font-weight:600;text-transform:uppercase}.footer-contact a{color:#ffffffbf}.footer-contact a:hover{color:#fff}.copyright{padding-top:22px;border-top:1px solid rgba(255,255,255,.1);color:#ffffff80;font-size:13px}.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.revealed{opacity:1;transform:translateY(0)}.project-card.reveal:nth-child(2n){transition-delay:90ms}@keyframes hero-enter{to{opacity:1;transform:translateY(0)}}@keyframes browser-reflection{0%{left:-55%;opacity:0}18%{opacity:.78}70%{opacity:.45}to{left:135%;opacity:0}}@media(max-width:900px){.menu-toggle{display:block;position:relative;z-index:2}.main-nav{position:fixed;inset:0;display:none;align-content:center;justify-content:center;flex-direction:column;background:#3a4753fa}.main-nav.open{display:flex}.main-nav a{color:#fffc;font-size:20px}.main-nav a:hover,.main-nav a.active{color:#fff}.menu-toggle[aria-expanded=true] span{background:#fff}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.header-inner{width:calc(100% - 30px)}.projects-section{width:min(100% - 30px,1320px)}.site-header{padding:12px 0}.portfolio-hero{min-height:350px;padding:100px 18px 42px}.portfolio-hero h1{font-size:36px}.hero-summary{font-size:16px}.projects-section{padding:52px 0 76px}.section-heading{margin-bottom:26px}.project-grid{grid-template-columns:1fr;gap:38px}.project-copy{padding-top:18px}.contact-band,.footer-inner{display:block}.contact-band>a{margin-top:26px}.footer-contact{margin-top:34px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}.hero-inner,.reveal{opacity:1;transform:none;animation:none}.browser-frame:hover:after{animation:none}}