@font-face{font-family:'Portfolio Inter';src:url('assets/inter-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
/* Keep the continuous ocean full-height on short pages and tall displays.
   Content can still grow and scroll; svh remains stable under mobile toolbars. */
body{min-height:100vh;min-height:100svh}
:root{color-scheme:light;--bg:#f6f6f3;--ink:#202522;--secondary:#3f4b42;--muted:#647168;--line:#cbd2ca;--surface:rgba(250,251,248,.64);--sage:#7b947f;--font:'Portfolio Inter',system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--ease:cubic-bezier(.22,.68,0,1.01)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);position:relative;isolation:isolate}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}h1,h2,h3,p{margin:0}button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #405b48;outline-offset:5px}::selection{background:#d6e4d3;color:#142018}[hidden]{display:none!important}.wrap{max-width:1440px;margin:auto;padding-inline:6%}.mono{font-family:var(--mono)}.skip-link{position:fixed;top:8px;left:8px;z-index:20;padding:14px;background:var(--ink);color:white;transform:translateY(-180%)}.skip-link:focus{transform:none}
.nav{height:82px;max-width:1440px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(88,96,90,.22)}.logo{display:flex;align-items:center;gap:10px;font:700 9px/1.15 var(--mono);letter-spacing:.1em}.logo-mark{font:800 23px var(--font);letter-spacing:-.08em;color:white;background:var(--ink);width:38px;height:38px;display:grid;place-items:center}.nav nav{display:flex;gap:32px;color:#444b46;font-size:12px}.nav nav a{position:relative;padding-block:12px}.nav nav a:after{content:"";position:absolute;height:1px;bottom:5px;left:0;right:0;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}.nav nav a:hover:after{transform:scaleX(1)}.nav-right{display:flex;align-items:center;gap:18px}.nav-contact{font:11px var(--mono);border:1px solid #888f89;padding:13px 17px;transition:color .25s,background .25s}.nav-contact:hover{background:var(--ink);color:white}.nav-contact span{margin-left:20px}.lang-switch{font:10px var(--mono);white-space:nowrap}.lang-switch span{color:#606963}.motion-toggle{border:1px solid #a9b1aa;background:rgba(249,249,247,.7);color:#253029;width:34px;height:34px;font:12px var(--mono);transition:background .2s,color .2s}.motion-toggle:hover{background:#222a24;color:white}
.hero{position:relative;display:flex;align-items:center;min-height:750px;padding-top:72px;padding-bottom:75px}.hero-copy{width:min(740px,65%);min-height:530px;display:flex;flex-direction:column;align-items:flex-start}.overline{font:10px/1.5 var(--mono);letter-spacing:.1em;color:#4d5a50;display:flex;align-items:center;gap:9px}.signal{display:inline-block;border-radius:50%;width:6px;height:6px;background:#728d78;box-shadow:0 0 10px #aabcae;flex:none}h1,h2{font-weight:570;letter-spacing:-.065em;line-height:1.06}h1{font-size:clamp(62px,7.6vw,108px);margin:36px 0 28px;letter-spacing:-.075em}h1 em,h2 em{font-style:normal;color:#69736b}.hero-text{color:#364339;font-size:17px;line-height:1.7;max-width:440px}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:35px}.btn{display:inline-flex;justify-content:space-between;align-items:center;gap:36px;padding:18px 21px;font-weight:650;font-size:12px;transition:transform .35s var(--ease),background .25s}.btn.primary{background:var(--ink);color:white}.btn.primary:hover{background:#414b43;transform:translateY(-3px)}.btn:active{transform:translateY(0)}.btn span,.text-link span{transition:transform .3s var(--ease)}.btn:hover span{transform:translate(2px,-2px)}.text-link{font-size:12px;background:rgba(248,248,246,.74);padding:9px;display:flex;gap:10px}.text-link:hover span{transform:translateY(3px)}.hero-meta{margin-top:auto;display:flex;gap:25px;flex-wrap:wrap;padding-top:60px;font:9px/1.6 var(--mono);letter-spacing:.07em;color:#626d64}.ocean-caption{position:absolute;right:6%;bottom:55px;font:8px var(--mono);letter-spacing:.14em;color:#829084;writing-mode:vertical-rl}.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(245,246,243,.72);color:#525b54}.ticker div{width:max-content;white-space:nowrap;padding:17px 0;font:10px var(--mono);letter-spacing:.18em;animation:marquee 44s linear infinite}.ticker span{color:#778d7c;margin:0 38px}@keyframes marquee{to{transform:translateX(-50%)}}
.section{padding-block:110px}.section-kicker{display:flex;justify-content:space-between;gap:20px;color:#59645c;border-bottom:1px solid #bfc6bf;padding-bottom:17px;font:10px/1.5 var(--mono);letter-spacing:.1em}.section-intro{display:grid;grid-template-columns:1fr .55fr;gap:50px;align-items:end;margin:48px 0 55px}h2{font-size:clamp(42px,4.7vw,68px)}.section-intro p,.about-copy p,.project-desc p,.process-grid p{color:#3f4b42;font-size:14px;line-height:1.8;text-shadow:0 0 12px rgba(249,249,247,.9)}.services-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--surface)}.service{padding:30px 34px;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s var(--ease)}.service:hover{background:rgba(231,235,230,.86)}.service-top{display:flex;justify-content:space-between;color:#657569;font:10px var(--mono)}.service-top span:last-child{font:17px var(--font)}.service h3{font-size:23px;letter-spacing:-.04em;margin:24px 0 13px}.service p{font-size:14px;line-height:1.75;color:var(--secondary);max-width:490px}.service-result{margin-top:23px;padding-top:16px;border-top:1px solid #dfe4dd;color:#3c4a40;font-size:12px;line-height:1.7}.service-result>span{display:block;font:9px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#6d796f;margin-bottom:7px}.service-tags{font:8px/1.8 var(--mono);letter-spacing:.08em;margin-top:24px;color:#66756a}
.work-section{background:rgba(244,246,242,.64);border-block:1px solid #d2d9d2}.project-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:34px}.project-filters button{border:1px solid #b5c0b6;background:#f6f7f4;color:#46554a;font-size:11px;padding:11px 15px;transition:background .25s,color .25s}.project-filters button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.project-filters button:hover{border-color:var(--ink)}#projectCount{margin-left:auto;font:9px var(--mono);color:var(--muted)}.projects{display:grid;grid-template-columns:1fr 1fr;gap:55px 27px}.project{min-width:0}.project-visual{height:350px;display:block;position:relative;overflow:hidden;border:1px solid #c4cec5;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}.project-visual:hover{transform:translateY(-5px);box-shadow:0 18px 32px rgba(25,39,29,.08)}.project-visual>div{height:100%;position:relative;padding:24px;overflow:hidden;display:flex;flex-direction:column}.mini-top,.mini-bottom{font:9px/1.4 var(--mono);letter-spacing:.08em;display:flex;justify-content:space-between;gap:15px;z-index:1}.mini-top span{font-size:7px;align-self:center}.mini-bottom{margin-top:auto;align-items:center;font-size:8px}.mini-bottom b{font:21px var(--font)}.mini-game{background:#182120;color:#eef3e9}.mini-game-title{font-size:66px;line-height:.85;font-weight:700;letter-spacing:-.07em;margin-top:40px;position:relative;z-index:1}.mini-game-title span{display:block;color:#badb9e}.mini-orbit{position:absolute;width:230px;height:230px;border:23px solid #9cba86;border-radius:50%;right:-13px;top:81px;transform:rotate(-28deg) scaleX(.55);box-shadow:0 0 0 2px #3c4e3e,0 0 0 30px #25332b,inset 0 0 0 2px #42593e;transition:transform .8s var(--ease)}.project-visual:hover .mini-orbit{transform:rotate(-17deg) scaleX(.6)}.mini-store{background:#e9e4db;color:#39392e}.mini-store-title{font-size:43px;line-height:1.05;letter-spacing:-.055em;margin-top:45px;z-index:1}.mini-store-title em{font-family:Georgia,serif;font-weight:400}.vase{position:absolute;background:linear-gradient(90deg,#8f9e8a,#c0c8b5 37%,#8c9a84 85%);border-radius:20% 20% 42% 42%;box-shadow:16px 15px 19px #766f6020}.vase-one{width:100px;height:140px;right:53px;bottom:53px}.vase-two{width:70px;height:104px;right:130px;bottom:49px;background:linear-gradient(90deg,#b19e88,#ddc6ab,#b9a68e)}.vase:before{content:"";position:absolute;left:20%;right:20%;top:-18px;height:38px;border-radius:9px 9px 25% 25%;background:inherit;box-shadow:inset 0 6px 3px #5553}.mini-flow{background:#edf0e9;color:#35413a}.flow-preview{margin:auto;width:90%;display:flex;align-items:center;flex-direction:column}.flow-preview span{width:100%;padding:16px;border:1px solid #becabd;background:#f8f9f4;font:9px var(--mono)}.flow-preview i{font-style:normal;line-height:1.8;color:#7e9680}.flow-preview b{float:right;color:#42694b}.mini-ascii{background:#1e2923;color:#aec5aa}.mini-ascii pre{margin:auto;text-align:center;font:25px/1.05 var(--mono);letter-spacing:2px}.mini-sheet{background:#e9eee7;color:#465c4c}.sheet-preview{margin:auto;width:92%;box-shadow:10px 12px 0 #ccd9c8;font:10px var(--mono);border:1px solid #b2c2ae;background:#f4f6f0}.sheet-preview>div{display:grid;grid-template-columns:1fr 1fr 1fr;padding:12px;border-bottom:1px solid #d7e0d3}.sheet-preview>div:first-child{background:#d6e1d0;font-size:8px}.sheet-preview b{font-weight:400;font-size:8px}.mini-audit{background:#f4f1e9;color:#434a3c}.audit-preview{margin:auto;width:90%}.audit-preview strong{font-size:38px;line-height:1;letter-spacing:-.055em;font-weight:550;display:block;margin-bottom:24px}.audit-preview p{border-bottom:1px solid #cdd1c3;padding:8px 0;font:9px var(--mono)}.audit-preview p span{float:right}.project-desc{display:flex;justify-content:space-between;gap:18px;margin-top:24px}.project-type{font:9px/1.6 var(--mono);letter-spacing:.07em;color:#617067}.project-desc h3{font-size:23px;letter-spacing:-.035em;margin:12px 0 14px}.project-desc h3 a:hover{text-decoration:underline;text-underline-offset:5px}.project-desc p{font-size:12px;line-height:1.75;max-width:470px}.project-desc p+p{margin-top:7px}.project-desc b{font-weight:600}.round-link{flex:none;width:40px;height:40px;border:1px solid #a9b8ac;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#303b32;transition:color .25s,background .25s,transform .3s var(--ease)}.round-link:hover{background:#252d27;color:white;transform:rotate(9deg)}
.packages h2{margin-block:46px}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--surface)}.package-grid article{padding:30px;border-right:1px solid var(--line)}.package-grid article:last-child{border:0}.package-grid .mono{font-size:9px;color:var(--muted)}.package-grid h3{font-size:31px;letter-spacing:-.05em;margin-top:27px}.package-grid p{font-size:14px;line-height:1.6;margin-top:15px;min-height:45px}.package-grid article>div{font:10px/1.8 var(--mono);color:var(--muted);margin-top:20px;min-height:38px}.package-grid a{display:block;margin-top:27px;font-size:12px;text-decoration:underline;text-underline-offset:5px}.package-note{font-size:12px;line-height:1.75;color:var(--secondary);margin-top:20px;max-width:720px}.process{padding-top:25px}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.process-grid article{padding:24px 27px 0 0}.process-grid article+article{border-left:1px solid var(--line);padding-left:27px}.process-grid span{font:9px var(--mono);letter-spacing:.06em;color:#637168}.process-grid h3{font-size:21px;letter-spacing:-.035em;margin:32px 0 12px}.process-grid p{font-size:13px;max-width:330px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding-top:50px}.signature{font:10px var(--mono);letter-spacing:.1em;color:#637168;margin-top:40px}.signature span{margin-left:15px}.about-copy .about-lead{color:#263029;font-size:23px;line-height:1.45;letter-spacing:-.025em;margin-bottom:22px}.about-copy>p+p{margin-top:18px}.about-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;border-top:1px solid var(--line);margin-top:34px;padding-top:20px}.about-facts div{display:flex;flex-direction:column;gap:9px}.about-facts span{font:8px/1.5 var(--mono);letter-spacing:.07em;color:#637168}.about-facts strong{font-size:11px;font-weight:500}.faq{padding-top:35px}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;padding-top:48px}.faq h2{font-size:46px}.faq details{border-bottom:1px solid var(--line);padding:20px 0}.faq details:first-child{padding-top:0}.faq summary{list-style:none;display:flex;justify-content:space-between;gap:30px;cursor:pointer;font-size:15px;font-weight:550;line-height:1.5}.faq summary::-webkit-details-marker{display:none}.faq summary span{color:#5c7160;font:22px var(--mono);transition:transform .3s}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{font-size:13px;line-height:1.85;color:var(--secondary);padding:18px 34px 0 0}
.contact{background:rgba(233,237,232,.82);border-block:1px solid #d5ddd5}.contact-inner{padding-block:100px;display:grid;grid-template-columns:1.2fr .8fr;gap:9%;align-items:center}.contact h2{margin:28px 0;font-size:clamp(45px,4.8vw,68px)}.contact p{font-size:14px;line-height:1.8;color:#4d5c50;max-width:460px;margin-bottom:28px}.brief{background:#f8f9f4bd;border:1px solid #c7d0c5;padding:25px}.brief label{font:10px var(--mono);letter-spacing:.07em;display:block;margin-bottom:13px}.brief textarea{display:block;width:100%;border:1px solid #c7d0c5;background:#f9faf7;color:var(--ink);resize:vertical;min-height:150px;font-size:13px;line-height:1.7;padding:14px;border-radius:0}.brief textarea::placeholder{color:#687367}.brief-copy{display:flex;justify-content:space-between;width:100%;border:0;background:#dce4d8;color:#27382c;padding:14px;margin-top:12px;text-align:left;font-size:12px;transition:background .2s}.brief-copy:hover{background:#c6d5c0}.brief .brief-hint{font-size:10px;line-height:1.6;margin:15px 0 0}.brief #briefStatus{font-size:11px;margin:12px 0 0;min-height:18px}.footer{min-height:90px;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#5f6b61;font:9px var(--mono)}.footer-brand{font-weight:700;color:#263029}.footer-brand span{color:#617966}
.ocean-world{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(#f7f7f4,#f2f4f1)}#oceanCanvas{position:absolute;left:0;display:block;image-rendering:pixelated;opacity:.98;filter:blur(.4px)}.ocean-glass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(249,249,247,.65),rgba(249,249,247,.32) 48%,rgba(249,249,247,.17)),radial-gradient(ellipse at 75% 30%,rgba(250,250,247,.035),rgba(247,248,245,.19) 85%)}.ocean-glass:after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 25%,#ffffff18 35%,transparent 45%,transparent 70%,#ffffff0c 78%,transparent 84%)}.motion-paused .ticker div{animation-play-state:paused}
@media(prefers-reduced-motion:no-preference){.hero-copy{animation:hero-enter .9s var(--ease) both}.reveal.is-pending{opacity:0;transform:translateY(16px)}.reveal{transition:opacity .75s var(--ease),transform .75s var(--ease)}@keyframes hero-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}
@media(min-width:1600px){.hero{min-height:790px}}
@media(max-width:1000px){.nav nav{gap:18px}.nav-right{gap:12px}.nav-contact{padding:12px}.nav-contact span{margin-left:9px}.hero-copy{width:73%}.section-intro{grid-template-columns:1.1fr .8fr;gap:30px}.project-visual{height:310px}.mini-game-title{font-size:57px}.mini-orbit{right:-60px}.mini-store-title{font-size:37px}.vase-one{right:20px;width:82px}.vase-two{right:80px;width:65px;height:94px}.mini-store-title{max-width:190px}.package-grid article{padding:23px}.package-grid h3{font-size:26px}.faq-grid{gap:45px}.contact-inner{gap:6%}}
@media(max-width:760px){.nav nav{display:none}.section-intro{grid-template-columns:1fr;gap:22px;margin:36px 0}.section-intro p{max-width:560px}.service{padding:25px}.service h3{font-size:21px}.projects{gap:40px 20px}.project-visual{height:280px}.project-visual>div{padding:18px}.mini-game-title{font-size:48px}.mini-store-title{font-size:30px}.mini-top span{display:none}.mini-orbit{width:185px;height:185px}.vase-one{width:65px;height:111px;right:20px;bottom:48px}.vase-two{width:51px;height:70px;right:64px}.audit-preview strong{font-size:30px}.flow-preview{width:100%}.flow-preview span{font-size:7px;padding:12px}.mini-ascii pre{font-size:19px}.project-desc h3{font-size:20px}.round-link{width:34px;height:34px}.process-grid{grid-template-columns:1fr}.process-grid article,.process-grid article+article{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}.process-grid h3{margin:18px 0 12px}.process-grid p{max-width:none}.about-grid{gap:7%}.faq-grid{grid-template-columns:1fr;gap:35px}.contact-inner{grid-template-columns:1fr;gap:45px}.brief{max-width:600px}.package-grid{grid-template-columns:1fr}.package-grid article{border-right:0;border-bottom:1px solid var(--line);padding:28px}.package-grid p,.package-grid article>div{min-height:0}.package-grid h3{margin-top:18px}.package-grid a{margin-top:20px}}
@media(max-width:650px){.wrap{padding-inline:6%}.nav{height:67px;gap:8px}.nav-right{gap:10px}.nav-contact{font-size:9px;padding:10px}.nav-contact span{margin-left:5px}.lang-switch{font-size:9px}.motion-toggle{width:30px;height:30px}.hero{min-height:680px;padding-top:65px;padding-bottom:45px;align-items:flex-start}.hero-copy{width:100%;min-height:530px}.hero h1{font-size:clamp(52px,13.9vw,80px);margin:34px 0 25px;line-height:1.04}.hero-text{font-size:15px;max-width:350px;line-height:1.75}.hero-actions{flex-wrap:wrap;gap:14px;margin-top:28px}.btn{padding:16px;font-size:11px;gap:22px}.text-link{font-size:11px;padding:8px 0}.hero-meta{font-size:8px;gap:11px;display:flex;flex-direction:column;padding-top:55px}.ocean-caption{display:none}.section{padding-block:75px}.section-kicker{font-size:8px;letter-spacing:.07em}.section-kicker>span:last-child{font-size:7px}h2{font-size:clamp(39px,10.5vw,54px)}.services-grid{grid-template-columns:1fr}.service{padding:26px}.service h3{font-size:23px}.service-result{margin-top:18px}.service-tags{margin-top:19px}.projects{grid-template-columns:1fr;gap:42px}.project-visual{height:320px}.project-visual>div{padding:24px}.mini-top span{display:block}.mini-game-title{font-size:62px}.mini-orbit{width:220px;height:220px;right:-35px;top:80px}.mini-store-title{font-size:39px}.vase-one{right:32px;width:85px;height:135px}.vase-two{right:99px;width:66px;height:94px}.flow-preview{width:95%}.flow-preview span{font-size:9px;padding:16px}.mini-ascii pre{font-size:24px}.audit-preview strong{font-size:37px}.project-desc h3{font-size:23px}.project-desc p{font-size:13px}.project-filters{gap:6px;margin-bottom:25px}.project-filters button{font-size:10px;padding:10px 12px}#projectCount{width:100%;margin-top:7px}.packages h2{margin:35px 0}.process,.faq{padding-top:20px}.about-grid{grid-template-columns:1fr;gap:32px;padding-top:35px}.signature{margin-top:25px}.about-copy .about-lead{font-size:22px}.faq h2{font-size:42px}.faq summary{font-size:14px}.contact-inner{padding-block:70px}.contact h2{font-size:clamp(43px,11.6vw,60px)}.contact p{font-size:14px}.brief{padding:20px}.footer{font-size:8px;min-height:85px}.footer>span{display:none}.ocean-glass{background:linear-gradient(90deg,rgba(249,249,247,.40),rgba(249,249,247,.23) 65%,rgba(249,249,247,.19))}}
@media(max-width:360px){.logo>span:last-child{display:none}.nav-right{gap:7px}.nav-contact{padding:10px 8px}.motion-toggle{width:28px}.hero h1{font-size:49px}.section-kicker>span:last-child{display:none}.project-visual{height:285px}.mini-top span{display:none}.mini-game-title{font-size:54px}.vase-one{right:22px}.vase-two{right:70px}.mini-store-title{font-size:34px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.is-pending{opacity:1;transform:none}}

/* Production enquiry form */
.contact-email{display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere;margin-top:20px;border-bottom:1px solid #98a494;font-size:14px;padding-bottom:5px}.contact-form input,.contact-form select{width:100%;min-width:0;border:1px solid #bac7b7;border-radius:0;background:#f9faf7;color:var(--ink);padding:12px;font-size:16px}.contact-form label{font-size:11px;line-height:1.5;margin-bottom:8px}.contact-fields{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px}.contact-form select{margin-bottom:18px}.contact-form textarea{font-size:16px;min-height:145px}.contact-form .contact-send{background:#25342a;color:#fff;font-size:14px;padding:16px}.contact-form .contact-send:hover{background:#405a47}.contact-form .contact-send:disabled{opacity:.7;cursor:wait}.contact-form .contact-status{margin:14px 0 0;font-size:13px;line-height:1.6;min-height:0}.contact-status:empty{display:none}.contact-status[data-state="error"]{color:#8b3025}.contact-status[data-state="success"]{color:#24543b}.contact-form .brief-hint{font-size:11px}.brief-hint a{text-decoration:underline;text-underline-offset:3px}.contact-copy{padding:9px 0;border:0;background:transparent;color:#405a47;text-decoration:underline;text-underline-offset:3px;font-size:11px;margin-top:9px}.contact-honey{display:none}.contact-form input:focus-visible,.contact-form select:focus-visible{outline:2px solid #405b48;outline-offset:3px}.contact-inner{align-items:start}

/* Compact service navigation and practical work. */
.hero{min-height:650px}.hero-copy{min-height:470px}.section{padding-block:82px}.section-intro{margin:40px 0 40px}.capabilities{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line);background:rgba(250,251,248,.72)}.capability{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.capability summary{display:grid;grid-template-columns:28px 1fr 28px;gap:15px;align-items:start;padding:25px 28px;cursor:pointer;list-style:none;transition:background .25s}.capability summary::-webkit-details-marker{display:none}.capability summary:hover,.capability[open] summary{background:rgba(229,235,228,.8)}.cap-number{font:10px var(--mono);color:#728075;padding-top:5px}.capability strong{display:block;font-size:21px;letter-spacing:-.035em}.capability small{display:block;font-size:12px;line-height:1.5;color:#59685c;margin-top:7px}.cap-plus{font:24px var(--mono);color:#637a68;text-align:right;transition:transform .25s}.capability[open] .cap-plus{transform:rotate(45deg)}.cap-body{padding:0 28px 26px 71px;color:#3f4b42;font-size:13px;line-height:1.7}.cap-body a,.more-work a{display:inline-block;margin-top:16px;text-decoration:underline;text-underline-offset:4px;font-weight:600;color:#34483a}.projects{gap:40px 27px}.project-visual{height:285px}.more-work{margin-top:36px;font-size:13px;line-height:1.8;color:#4b5a4e}.more-work a{margin:0}.more-work span{padding:0 7px}.mini-utm{background:#dce7dd;color:#344b3c}.utm-preview{margin:auto;width:88%;font:10px/1.5 var(--mono);display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.utm-preview span,.utm-preview strong{grid-column:1/-1;padding:13px;background:#f9faf6;border:1px solid #b9c9ba}.utm-preview b{padding:10px 5px;font-weight:400;border:1px solid #9fb2a1;text-align:center}.utm-preview strong{background:#314b39;color:white;border:0}.process{padding-top:30px}.anchor-alias{display:block;position:relative;top:-20px}.footer a:nth-child(2){text-decoration:underline;text-underline-offset:4px}.footer a:focus-visible{outline-offset:4px}
@media(max-width:700px){.hero{min-height:620px}.hero-copy{min-height:460px}.section{padding-block:64px}.capabilities{grid-template-columns:1fr}.capability summary{padding:22px}.cap-body{padding:0 22px 23px 65px}.project-visual{height:260px}.projects{gap:34px}.more-work{margin-top:28px}.footer{flex-wrap:wrap;padding-block:22px}}

/* Standalone tools and the anonymised project case. */
.contact-telegram{display:block;width:fit-content;margin-top:22px;font-size:14px;font-weight:650;text-decoration:underline;text-underline-offset:5px}.client-hub{padding-block:55px;display:grid;grid-template-columns:1fr auto;gap:35px;align-items:end}.client-hub h2{font-size:clamp(36px,4vw,54px);margin:16px 0}.client-hub p{font-size:14px;line-height:1.7;color:#46564a;max-width:560px}.hub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:15px}.hub-link{padding:14px;font-size:12px;text-decoration:underline;text-underline-offset:4px}.mini-pwa{background:#d7dfd7;color:#273c30}.pwa-illustration{display:grid;place-items:center;background:linear-gradient(135deg,#d4dfd5,#ecf0e9);padding:38px;min-height:330px;overflow:hidden}.mini-pwa .pwa-illustration{position:absolute;inset:0;background:transparent;min-height:0;padding:20px}.pwa-phone{position:relative;width:200px;height:330px;border-radius:22px;background:#202c27;color:#e5eee6;padding:23px;box-shadow:0 20px 45px #283d3033;transform:rotate(-5deg)}.mini-pwa .pwa-phone{transform:rotate(-7deg) scale(.72);transform-origin:center}.pwa-phone-top{display:flex;justify-content:space-between;align-items:center;color:#b9ccb9;font:7px var(--mono)}.pwa-blur{width:70px;height:9px;background:#b8c9ba;filter:blur(5px);border-radius:8px}.pwa-phone p{font:8px var(--mono);letter-spacing:.12em;color:#a0b2a2;margin-top:37px}.pwa-phone strong{display:block;font:600 14px var(--font);letter-spacing:.03em;margin-top:8px}.pwa-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:19px 0}.pwa-stat span{padding:15px 3px;border:1px solid #738b76;text-align:center;font:9px var(--mono)}.pwa-line{height:8px;background:#6f8574;border-radius:4px;margin-top:13px}.pwa-line.short{width:70%}.pwa-nav{position:absolute;bottom:20px;left:0;right:0;text-align:center;font:14px var(--mono);color:#a7bba9}.mini-pwa .mini-top,.mini-pwa .mini-bottom{position:relative;z-index:2}.utility-page{max-width:1050px;padding-top:90px;padding-bottom:100px}.utility-page h1{font-size:clamp(55px,7vw,92px);margin:25px 0}.utility-kicker{font:10px var(--mono);letter-spacing:.12em;color:#647469}.utility-intro{font-size:17px;line-height:1.75;color:#425047;max-width:760px;margin-bottom:40px}.utility-note{font-size:12px;line-height:1.8;color:#526257;margin-top:20px}.utility-note a,.legal-content a{text-decoration:underline;text-underline-offset:4px}.legal-content{max-width:800px}.legal-content section{padding:26px 0;border-top:1px solid var(--line)}.legal-content h2{font-size:27px;letter-spacing:-.035em;margin-bottom:12px}.legal-content p{font-size:15px;line-height:1.85;color:#354238}.legal-content p+p{margin-top:13px}.case-action{margin-top:25px}.utm-form{max-width:760px;border:1px solid var(--line);padding:30px;background:rgba(250,251,248,.9);display:flex;flex-direction:column;align-items:stretch;gap:12px}.utm-form label,.utm-form legend{font-size:12px;font-weight:600;line-height:1.5}.utm-form input:not([type=checkbox]),.utm-form select,.utm-form textarea{width:100%;border:1px solid #b7c4b8;background:#fff;color:var(--ink);border-radius:0;padding:13px;font:16px var(--font)}.utm-form textarea{resize:vertical;line-height:1.6}.utm-form .btn{width:fit-content;margin:10px 0}.utm-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.utm-fields>div{display:flex;flex-direction:column;gap:9px}.utm-copy{width:fit-content;padding:12px 16px;border:1px solid #9eafa0;background:#e3ebe1;color:#263b2b;font-size:12px}.utm-copy:disabled{opacity:.55;cursor:not-allowed}.utm-copy.quiet{background:transparent}.utm-status{min-height:1.4em;font-size:12px;line-height:1.5;color:#355d40}.workspace-form fieldset{border:1px solid #c7d3c7;margin:7px 0;padding:15px}.workspace-form legend{padding:0 5px}.workspace-checks{display:grid;grid-template-columns:1fr 1fr;gap:14px}.workspace-checks label{display:flex;align-items:center;gap:9px;font-weight:400}.workspace-checks input{accent-color:#3e674b}.workspace-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.workspace-actions .btn{margin:0}.install-guide{font:10px/1.6 var(--mono);max-width:240px}.install-guide summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}.install-guide p{padding:8px 0;color:#536258}.install-guide button{border:1px solid #a3b2a5;background:#e3ebe1;padding:8px 12px;font:inherit}.offline-hint{font-size:12px!important;color:#7c4d24!important;padding-top:12px}
@media(max-width:700px){.client-hub{grid-template-columns:1fr;gap:20px;padding-block:40px}.utility-page{padding-top:58px;padding-bottom:70px}.utility-intro{font-size:15px}.utm-form{padding:20px}.utm-fields,.workspace-checks{grid-template-columns:1fr}.pwa-illustration{padding:20px}.pwa-phone{transform:rotate(-4deg) scale(.95)}}
.mini-bot{background:#dae6dc;color:#334a39}.mini-chat{margin:auto;width:84%;display:flex;flex-direction:column;gap:8px;font:10px/1.5 var(--mono)}.mini-chat p{background:#f9faf7;padding:9px 12px;align-self:flex-start}.mini-chat p:nth-child(even){background:#9bb69e;align-self:flex-end}.bot-demo{max-width:720px;background:#f7faf6;border:1px solid #bac9ba;padding:25px}.bot-demo-head{display:flex;gap:9px;align-items:center;font:10px var(--mono);color:#526657;letter-spacing:.1em;border-bottom:1px solid #c6d3c6;padding-bottom:17px}.bot-demo-head>span:last-child{margin-left:auto}.bot-log{display:flex;flex-direction:column;gap:12px;min-height:220px;padding:25px 0}.bot-message{max-width:85%;padding:12px 15px;font-size:14px;line-height:1.6;white-space:pre-line}.bot-message.bot{align-self:flex-start;background:#e3ece2}.bot-message.user{align-self:flex-end;background:#344f3b;color:#fff}.bot-choices{display:flex;gap:8px;flex-wrap:wrap}.bot-choices button{border:1px solid #91a793;background:transparent;color:#2c4933;padding:11px 14px;font-size:12px}.bot-choices button:hover{background:#dce9db}
.bot-case-visual{background:#24332a;color:#e7efe7;padding:34px;min-height:310px;display:flex;flex-direction:column;justify-content:space-between}.bot-case-header{display:flex;gap:10px;align-items:center;font:10px var(--mono);letter-spacing:.08em}.bot-case-header span:last-child{margin-left:auto}.bot-case-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.bot-case-cards div{border:1px solid #718d76;padding:22px}.bot-case-cards small{font:9px var(--mono);color:#afc1b1}.bot-case-cards strong{display:block;font-size:20px;letter-spacing:-.04em;margin:24px 0 8px}.bot-case-cards p{font-size:11px;color:#b5c8b7}@media(max-width:700px){.bot-case-visual{padding:20px}.bot-case-cards{grid-template-columns:1fr}.bot-case-cards strong{margin:12px 0 4px}}
.hero-copy h1,.hero-copy p,.utility-page h1,.utility-page h2,.utility-page p{text-shadow:0 1px 12px rgba(250,251,248,.9)}.utility-page .bot-case-visual p,.utility-page .pwa-phone p{text-shadow:none}

.logo-mark{background:transparent}.logo-mark img{display:block;width:100%;height:100%}.bot-message.user{text-shadow:none}
.case-demo{max-width:850px;background:#1f2c25;color:#edf3eb;border-radius:8px;padding:28px;box-shadow:0 22px 55px rgba(35,53,41,.14)}.case-demo-top{display:flex;align-items:center;gap:16px;color:#a5b8a7;font:9px var(--mono);letter-spacing:.1em;border-bottom:1px solid #41574a;padding-bottom:20px}.case-demo-top>span:last-child{margin-left:auto}.case-brand-mask{display:inline-block;width:80px;height:10px;background:#b6c8b8;filter:blur(5px);border-radius:8px}.case-demo-tabs{display:flex;gap:8px;padding-top:20px}.case-demo-tabs button{border:1px solid #6a8270;background:transparent;color:#c9d8c9;padding:10px 14px;font-size:12px}.case-demo-tabs button[aria-selected=true]{background:#e2eee0;color:#26382a;border-color:#e2eee0}.case-demo-panel{padding:30px 0 0}.case-demo-kicker{font:9px var(--mono);color:#a6bfa9;letter-spacing:.1em}.case-demo-panel h2{font-size:28px;letter-spacing:-.04em;margin:12px 0;color:#f1f6ef;text-shadow:none}.case-demo-panel p{font-size:13px;color:#bdd0bd;text-shadow:none;margin-bottom:20px}.case-demo-row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;padding:16px;border:1px solid #42594a;margin-top:8px;font-size:13px}.case-demo-row b{font:10px var(--mono);color:#b0cab1}.case-demo-row span:last-child{font-size:16px;color:#b4cdb5}@media(max-width:600px){.case-demo{padding:18px}.case-demo-tabs{flex-wrap:wrap}.case-demo-tabs button{padding:10px}.case-demo-row{grid-template-columns:48px 1fr auto;padding:12px}}
.character-section{padding-block:25px 35px}.character-showcase{display:grid;grid-template-columns:1fr .52fr;gap:40px;align-items:center;border:1px solid #cbd6cc;background:rgba(245,248,243,.76);overflow:hidden}.character-copy{padding:42px 0 42px 45px}.character-copy h2{font-size:clamp(38px,4vw,58px);margin:20px 0}.character-copy p{max-width:530px;color:#46564a;font-size:14px;line-height:1.8;text-shadow:0 1px 12px #f9faf8}.character-copy .hub-link{display:inline-block;padding:12px 0;margin-top:12px}.character-frame{height:330px;align-self:stretch;display:flex;align-items:end;justify-content:center;position:relative;background:linear-gradient(145deg,rgba(209,225,211,.48),rgba(245,248,244,.4));overflow:hidden}.character-frame img{width:min(92%,340px);height:auto;max-height:97%;object-fit:contain;object-position:bottom;image-rendering:auto;transition:transform .5s var(--ease)}.character-showcase:hover .character-frame img{transform:translateY(-3px)}.character-frame span{position:absolute;bottom:12px;right:14px;font:8px var(--mono);letter-spacing:.1em;color:#576b5a}@media(max-width:700px){.character-section{padding-block:20px}.character-showcase{grid-template-columns:1fr;gap:0}.character-copy{padding:30px 25px 18px}.character-frame{height:265px}.character-frame img{max-height:98%}}
.hero-copy{position:relative;isolation:isolate}.hero-copy:before{content:"";position:absolute;z-index:-1;inset:-20px -45px;background:radial-gradient(ellipse at 30% 48%,rgba(250,251,248,.72) 0%,rgba(250,251,248,.48) 45%,transparent 75%);pointer-events:none}
.mobile-contact{display:none}@media(max-width:700px){.mobile-contact:not([hidden]){display:flex;position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:10;align-items:center;gap:18px;padding:14px 17px;background:#24342a;color:#fff;font-size:12px;font-weight:650;box-shadow:0 8px 24px rgba(22,36,25,.2)}.mobile-contact:focus-visible{outline:3px solid #83a68a;outline-offset:3px}}
/* Small pixel details echo the underwater scene without covering content. */
.signal{border-radius:0;width:5px;height:5px;box-shadow:5px 5px 0 rgba(128,159,135,.45)}
.section-kicker span:first-child,.utility-kicker{display:inline-flex;align-items:center;gap:12px}
.section-kicker span:first-child:before,.utility-kicker:before{content:"";display:inline-block;flex:none;width:4px;height:4px;background:#6c8b72;box-shadow:5px 0 0 rgba(108,139,114,.35),0 5px 0 rgba(108,139,114,.35)}
.project-filters button[aria-pressed=true]:before{content:"";display:inline-block;width:4px;height:4px;margin-right:9px;vertical-align:2px;background:#a3bda8;box-shadow:4px 4px 0 rgba(163,189,168,.45)}
.utility-page.audit-page{max-width:none;padding:0}
.audit-page .section-intro p{background:rgba(250,251,248,.84);padding:12px;margin:-12px}
.focus-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;max-width:100%}.focus-links a{display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid #9aada0;padding:6px 0;color:#35483a;font-size:12px;font-weight:650;line-height:1.45;transition:color .2s,border-color .2s}.focus-links a:hover{color:#1a2b1e;border-color:#1a2b1e}.focus-links a span,.focus-tag{font:9px var(--mono);letter-spacing:.06em;color:#718476}.focus-links a b{font-weight:400}.focus-tag{display:block;margin-bottom:9px}.capability-focus{background:rgba(225,236,225,.43)}.capability-support .focus-tag{color:#7d8980}.capability[id]{scroll-margin-top:24px}
@media(max-width:700px){.focus-links{gap:0 15px;margin-top:18px}.focus-links a{font-size:11px;min-height:44px;padding:10px 0}.hero-actions{margin-top:24px}.hero-copy:before{inset:-20px -16px}}
@media(max-width:700px){html{overscroll-behavior-x:none}body{overflow-x:clip}.wrap{padding-left:max(6%,env(safe-area-inset-left));padding-right:max(6%,env(safe-area-inset-right))}.nav{padding-left:max(6%,env(safe-area-inset-left));padding-right:max(6%,env(safe-area-inset-right))}.footer{padding-bottom:max(22px,env(safe-area-inset-bottom))}.mobile-contact:not([hidden]){right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}}
@media(max-width:650px){.nav{height:calc(67px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}}
.legal-content{overflow-wrap:anywhere}@media(max-width:650px){.privacy-page h1{font-size:clamp(34px,9vw,55px);letter-spacing:-.055em}}
.app-bar{display:none}.app-desktop-menu{position:fixed;z-index:12;left:20px;bottom:20px;display:flex;align-items:center;gap:20px;padding:14px 16px;background:#25352a;color:#fff;font-size:12px;font-weight:650;box-shadow:0 8px 24px #1a2d1e28}.app-desktop-menu span{font-weight:400}.app-desktop-menu:hover{background:#405d47}.app-panel{width:min(680px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 32px));border:1px solid #bccdbf;background:rgba(248,250,246,.97);color:#25332a;padding:28px;box-shadow:0 24px 80px #172b1b30;overflow:auto}.app-panel::backdrop{background:rgba(24,36,27,.25);backdrop-filter:blur(2px)}.app-panel-heading{display:flex;justify-content:space-between;gap:16px;align-items:start}.app-panel-heading small{font:9px var(--mono);letter-spacing:.09em;color:#617568}.app-panel-heading h2{font-size:clamp(29px,3vw,40px);letter-spacing:-.055em;margin-top:10px}.app-panel-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #b6c8b9;background:transparent;color:#304637;font-size:26px;line-height:1}.app-tabs{display:flex;gap:5px;margin:25px 0 20px;border-bottom:1px solid #c7d4c7}.app-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:#586b5c;padding:12px 14px;font-size:12px;font-weight:600;min-height:44px}.app-tabs button[aria-selected=true]{color:#1d3323;border-bottom-color:#4d7658}.app-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.app-card,.app-case-list a{border:1px solid #cbd8cc;background:rgba(237,244,236,.8);padding:17px;display:flex;flex-direction:column;gap:8px;min-width:0}.app-card:hover,.app-case-list a:hover{border-color:#799c81;background:#e4eee3}.app-card small,.app-case-list small{font:9px/1.4 var(--mono);letter-spacing:.06em;color:#657b68}.app-card strong,.app-case-list strong{font-size:16px;letter-spacing:-.025em}.app-card span{font-size:12px;line-height:1.55;color:#536356}.app-case-list{display:grid;gap:8px}.app-case-list a{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px}.app-case-list a>span{display:flex;flex-direction:column;gap:5px}.app-case-list a>b{font-weight:400;font-size:17px}.app-panel-intro{color:#526257;font-size:14px;line-height:1.6;margin-bottom:14px}.app-contact-list{display:grid;gap:8px}.app-contact-list a{padding:13px 16px;border:1px solid #c4d2c6;background:#f2f6f0;font-size:13px;font-weight:600}.app-contact-list a:hover{background:#e4eee3}.app-contact-list .app-action-primary{background:#25352a;color:#fff;border-color:#25352a}
.app-desktop-menu kbd{font:10px var(--mono);color:#cedbd0;border:1px solid #8b9f90;padding:2px 5px}
.app-panel{background:rgba(248,250,246,.82)}.app-panel::backdrop{background:rgba(24,36,27,.12);backdrop-filter:none}.app-card,.app-case-list a{background:rgba(239,245,238,.72)}.app-contact-list a{background:rgba(243,247,241,.76)}.app-panel-heading,.app-tabs,.app-card,.app-case-list a,.app-panel-intro,.app-contact-list a{text-shadow:0 0 10px rgba(250,252,248,.9)}.app-contact-list .app-action-primary{text-shadow:none}
@media(max-width:760px){.app-desktop-menu{display:none}.app-bar{position:fixed;z-index:12;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);padding:6px max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:rgba(247,249,245,.95);border-top:1px solid #c6d5c8;box-shadow:0 -5px 20px #23362a12;backdrop-filter:blur(10px)}.app-bar a{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#405847;font-size:10px;font-weight:600}.app-nav-symbol{font-size:18px;line-height:1}.footer{padding-bottom:calc(90px + env(safe-area-inset-bottom))}.app-panel{padding:20px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.app-panel-heading h2{font-size:30px}.app-tabs{margin:18px 0 14px}.app-tabs button{flex:1;padding:10px 5px}.app-card{padding:12px}.app-card strong,.app-case-list strong{font-size:14px}.app-card span{font-size:11px}.app-case-list a{padding:11px 13px}.app-contact-list a{padding:12px 14px}}
@media(max-width:350px){.app-card-grid{grid-template-columns:1fr}.app-card{gap:4px;padding:11px}.app-card span{line-height:1.4}}
.contact-person,.app-person{display:flex;align-items:center;gap:15px}.contact-person{margin-top:22px}.contact-person-art,.app-person-art{display:flex;align-items:end;justify-content:center;overflow:hidden;flex:none;background:linear-gradient(145deg,#d9e8db,#edf3eb);border:1px solid #c6d7c8}.contact-person-art{width:86px;height:86px}.app-person-art{width:62px;height:62px}.contact-person-art img,.app-person-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.contact-person strong,.app-person strong{display:block;font-size:15px;letter-spacing:-.02em}.contact-person small,.app-person small{display:block;margin-top:7px;color:#617565;font:9px/1.4 var(--mono);letter-spacing:.06em}.app-person{gap:12px;margin:0 0 14px}.app-person small{font-family:var(--font);font-size:12px;letter-spacing:0}
@supports (backdrop-filter:blur(3px)){.app-panel{backdrop-filter:blur(3px)}}
@media(max-width:760px) and (max-height:650px){.app-panel{padding:16px}.app-panel-heading h2{font-size:26px}.app-tabs{margin:10px 0}.app-person{margin-bottom:8px}.app-panel-intro{display:none}.app-contact-list{gap:4px}.app-contact-list a{min-height:44px;display:flex;align-items:center;padding:10px 12px}}
.character-speech{position:relative;max-width:430px;margin-top:18px;padding:14px 16px;background:rgba(248,251,247,.9);border-left:2px solid #9bb99e}.character-copy .character-speech p{font-size:13px;line-height:1.55;color:#354c3a}.character-speech button{border:0;background:none;color:#42684a;font-size:11px;font-weight:650;padding:8px 0 0;text-decoration:underline;text-underline-offset:3px}.contact-person-art,.app-person-art{background:transparent;border:0}.contact-person-art{width:120px;height:120px}.app-person-art{width:86px;height:86px}.character-frame{height:380px}.character-frame img{max-height:97%;transform-origin:50% 100%}
@media(prefers-reduced-motion:no-preference){.character-frame img{animation:character-idle 6s ease-in-out infinite}body.motion-paused .character-frame img{animation-play-state:paused}@keyframes character-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}}
@media(max-width:700px){.character-frame{height:320px}.contact-person-art{width:100px;height:100px}.app-person-art{width:76px;height:76px}}
@media(max-width:760px) and (max-height:650px){.app-person-art{width:62px;height:62px}}
.contact-person-art{width:105px;height:160px}@media(max-width:700px){.contact-person-art{width:90px;height:140px}}

/* The portfolio preview remains an anonymous illustration, with no client data. */
.case-demo{max-width:920px;padding:clamp(20px,4vw,38px);border:1px solid rgba(132,165,137,.55);border-radius:20px;background:radial-gradient(ellipse at 80% -20%,#50705a 0,transparent 52%),linear-gradient(145deg,#263a2c,#192720);box-shadow:0 25px 70px rgba(35,53,41,.18)}
.case-demo-top{padding-bottom:20px;border-color:rgba(184,211,186,.23);color:#c5d9c7}
.case-brand-mask{width:78px;height:10px;background:#d4e5d3;filter:blur(4px)}
.case-highlights{display:flex;flex-wrap:wrap;gap:8px;padding-top:22px}
.case-highlights span{padding:7px 10px;border:1px solid rgba(188,214,189,.24);border-radius:100px;color:#c5d9c7;font:9px var(--mono);letter-spacing:.08em}
.case-demo-tabs{gap:8px;padding-top:24px;border-bottom:1px solid rgba(184,211,186,.18);padding-bottom:14px}
.case-demo-tabs button{min-height:44px;border:1px solid transparent;border-radius:8px;color:#c4d7c5;padding:11px 16px}
.case-demo-tabs button:hover{background:rgba(211,230,212,.1);border-color:rgba(211,230,212,.24)}
.case-demo-tabs button[aria-selected=true]{background:#dbeadd;color:#223b29;border-color:#dbeadd}
.case-demo-panel{min-height:260px;padding:26px 0 4px}
.case-demo-panel h2{font-size:clamp(26px,3vw,34px);margin:12px 0;color:#f1f7ef}
.case-demo-row{min-height:55px;border:1px solid rgba(187,213,190,.2);border-radius:9px;background:rgba(234,246,232,.05);margin-top:10px}
.case-demo-row b{font-size:11px;color:#d1e4d0}
.case-demo-row span:last-child{color:#c6dfc8}
@media(max-width:600px){.case-demo{border-radius:15px}.case-highlights span{font-size:8px}.case-demo-tabs{gap:3px}.case-demo-tabs button{padding:10px}.case-demo-panel{min-height:245px}}
/* Keep the entire character inside each frame at every breakpoint. */
.character-frame{align-items:center}.character-frame img{height:94%;width:auto;max-height:94%;max-width:85%;object-fit:contain}
.app-person-art{width:66px;height:100px}.app-person-art img{object-fit:contain;object-position:center}
@media(max-width:760px) and (max-height:650px){.app-person-art{width:52px;height:78px}}

.pwa-capabilities{max-width:920px;margin:42px 0 12px}.pwa-capabilities-intro h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.045em;margin:14px 0}.pwa-capabilities-intro p{max-width:650px;color:#506254;line-height:1.6;font-size:14px}.pwa-capabilities-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}.pwa-capabilities-grid article{padding:22px;background:rgba(241,247,240,.85);border:1px solid #cad9cb}.pwa-capabilities-grid small{color:#6c856e;font:9px var(--mono);letter-spacing:.1em}.pwa-capabilities-grid h3{font-size:17px;letter-spacing:-.03em;margin:14px 0 8px}.pwa-capabilities-grid p{color:#526356;font-size:13px;line-height:1.55}
@media(max-width:700px){.pwa-capabilities-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pwa-capabilities-grid article{padding:17px}.pwa-capabilities-grid h3{font-size:15px}}@media(max-width:380px){.pwa-capabilities-grid{grid-template-columns:1fr}}

/* Light, cool glass keeps the ocean visible while preserving readable text. */
.ocean-world{background:linear-gradient(155deg,#f7fafb,#e9f0f3)}
.ocean-glass{background:linear-gradient(115deg,rgba(249,252,253,.52),rgba(225,236,242,.36) 52%,rgba(249,252,253,.46)),radial-gradient(ellipse at 85% 18%,rgba(192,215,226,.22),transparent 52%)}
.app-panel,.service-detail{background:linear-gradient(145deg,rgba(249,253,255,.92),rgba(229,239,245,.88));border:1px solid rgba(159,183,195,.75);box-shadow:0 28px 90px rgba(34,52,65,.2),inset 0 1px rgba(255,255,255,.9)}
.app-card{background:rgba(250,253,255,.58);border-color:rgba(164,186,198,.6)}
.service-detail{position:fixed;max-width:600px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;color:#253743;padding:clamp(22px,4vw,38px);border-radius:22px}
.service-detail::backdrop{background:rgba(31,46,56,.28)}
.service-detail-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.service-detail-heading span{font:10px var(--mono);letter-spacing:.12em;color:#627d8b}
.service-detail-heading button{width:42px;height:42px;border:1px solid #b8cbd4;border-radius:50%;background:rgba(255,255,255,.72);font-size:24px;color:#304a58;cursor:pointer}
.service-detail h2{font-size:clamp(28px,5vw,42px);line-height:1.08;letter-spacing:-.04em;margin:22px 0 12px}
.service-detail p{font-size:15px;line-height:1.65;color:#455f6a}.service-detail ul{margin:20px 0;padding-left:20px;color:#344f5c;line-height:1.75;font-size:14px}
.service-detail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}.service-detail-actions>a:first-child{color:#315d6e;font-size:13px;font-weight:700;text-underline-offset:4px}.service-detail-actions [hidden],.service-detail-subservices[hidden]{display:none}
.service-detail-subservices{display:flex;flex-wrap:wrap;gap:8px}.service-detail-subservices button{cursor:pointer;border:1px solid #bbced8;background:rgba(255,255,255,.7);border-radius:8px;padding:10px 12px;color:#294b5b}
.real-screens{max-width:920px;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,310px);gap:clamp(24px,5vw,60px);align-items:center;margin:38px 0 56px;padding:clamp(22px,4vw,42px);border-radius:24px;border:1px solid rgba(161,184,196,.65);background:linear-gradient(135deg,rgba(249,252,254,.9),rgba(224,235,242,.74));box-shadow:0 24px 64px rgba(55,79,93,.1)}
.real-screens-copy h2{font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.04em;margin:14px 0}.real-screens-copy>p{font-size:14px;line-height:1.65;color:#405c6b}.real-screen-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.real-screen-tabs button{display:flex;gap:7px;align-items:center;min-height:42px;border:1px solid #bbced8;background:rgba(255,255,255,.62);border-radius:9px;padding:9px 12px;color:#294958;font-weight:650;cursor:pointer}.real-screen-tabs button span{font:9px var(--mono);opacity:.7}.real-screen-tabs button[aria-pressed=true]{background:#294c5b;color:#fff;border-color:#294c5b}.real-screens-copy .real-screen-caption{min-height:3em;color:#4c6977;font-size:13px}.real-screen-device{margin:0;text-align:center}.real-screen-device img{display:block;max-width:100%;width:260px;height:auto;margin:auto;border:5px solid #1f3039;border-radius:23px;box-shadow:0 16px 35px rgba(27,43,52,.25)}.real-screen-device figcaption{font:10px var(--mono);color:#5b7480;letter-spacing:.03em;margin-top:12px}
@media(max-width:760px){#oceanCanvas{filter:none}.app-bar{background:rgba(241,247,250,.94);backdrop-filter:none;-webkit-backdrop-filter:none}.app-panel,.service-detail{backdrop-filter:none;-webkit-backdrop-filter:none}.real-screens{grid-template-columns:1fr;gap:18px;margin-top:26px}.real-screen-device img{width:min(74%,260px)}.real-screens-copy .real-screen-caption{min-height:0}.service-detail-actions{align-items:stretch;flex-direction:column}}
.group-feature{max-width:920px;margin:38px 0 12px;padding:clamp(22px,4vw,38px);background:rgba(242,249,252,.78);border:1px solid rgba(161,184,196,.64);border-radius:20px}.group-feature h2{font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.04em;margin:14px 0}.group-feature>div>p,.group-feature article p{font-size:14px;line-height:1.6;color:#405c6b}.group-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:22px}.group-feature-grid article{border-top:1px solid #acc3ce;padding-top:14px}.group-feature-grid strong{font-size:13px;color:#294d5d}.group-feature-grid article p{font-size:13px}.pwa-real-preview{overflow:hidden}.pwa-real-preview img{display:block;height:92%;width:auto;max-width:90%;object-fit:contain;border:4px solid #23353e;border-radius:15px;box-shadow:0 12px 25px rgba(26,43,51,.25)}
@media(max-width:600px){.group-feature-grid{grid-template-columns:1fr;gap:8px}.group-feature-grid article{padding-top:10px}}

/* A compact first screen: services and a real example share one row. */
.portfolio-home .home-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(38px,6vw,92px);align-items:center;min-height:calc(100svh - 82px);padding-top:40px;padding-bottom:48px}
.portfolio-home .home-hero .hero-copy{width:100%;min-height:0;align-self:center}
.home-hero h1{font-size:clamp(58px,6.1vw,87px);margin:24px 0 20px;line-height:1.02}
.home-hero .hero-text{font-size:15px;line-height:1.65;max-width:420px;color:#34454a}
.home-hero .hero-actions{margin-top:25px;gap:20px}.home-all-work{font-size:12px;font-weight:650;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.home-guide{display:flex;align-items:center;gap:13px;margin-top:30px;max-width:390px;padding:8px 14px 8px 8px;border:1px solid rgba(177,196,199,.65);background:rgba(247,251,250,.75)}
.home-guide img{width:51px;height:70px;object-fit:contain;flex:none}.home-guide span{font:9px var(--mono);letter-spacing:.1em;color:#5c7471}.home-guide p{margin:5px 0 3px;font-size:12px;line-height:1.45;color:#304640;text-shadow:none}.home-guide button{border:0;padding:3px 0;background:transparent;color:#355e54;text-decoration:underline;text-underline-offset:3px;font-size:11px;font-weight:650}
.home-directions{min-width:0;padding:24px;background:rgba(241,248,250,.75);border:1px solid rgba(169,190,198,.7);box-shadow:0 16px 44px rgba(43,68,80,.08),inset 0 1px rgba(255,255,255,.8)}
.home-directions-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:16px}.home-directions-heading h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.05em;margin-top:8px}.home-directions-heading>a,.home-directions-footer a{font-size:11px;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:4px;color:#365866}
.home-direction-list{display:grid;gap:8px}.home-direction{display:grid;grid-template-columns:minmax(0,1fr) minmax(115px,.61fr);gap:12px;align-items:center;padding:14px 15px;background:rgba(252,254,254,.83);border:1px solid rgba(180,198,204,.7);transition:border-color .2s,background .2s}.home-direction:hover,.home-direction:focus-within{border-color:#7f9eaa;background:rgba(255,255,255,.93)}
.home-direction-number,.home-example small,.home-directions-footer span{display:block;font:9px/1.35 var(--mono);letter-spacing:.07em;color:#607882}.home-direction-title{display:flex;justify-content:space-between;gap:7px;align-items:baseline;margin:6px 0;font-size:15px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:#243b43}.home-direction-title span{font-size:13px;font-weight:400}.home-direction p{font-size:11px;line-height:1.45;color:#52676d}.home-example{display:flex;flex-direction:column;gap:7px;padding:9px 10px;border-left:1px solid #c8d8dc;min-width:0}.home-example strong{font-size:12px;line-height:1.35;color:#2a5966}.home-example:hover strong{text-decoration:underline;text-underline-offset:4px}
.home-directions-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:17px}.portfolio-more>summary{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:68px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;font-size:13px;font-weight:650;list-style:none}.portfolio-more>summary::-webkit-details-marker{display:none}.portfolio-more>summary span:last-child{font-size:24px;font-weight:400;color:#5d7c78}.portfolio-more[open]>summary span:last-child{transform:rotate(45deg)}.portfolio-more-content{padding-bottom:20px}.portfolio-more-content>.wrap,.portfolio-more-content>.section.wrap{padding-left:0;padding-right:0}
.contact-dialog{position:fixed;width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(20px,3vw,34px);border:1px solid #b3cbd4;border-radius:20px;background:linear-gradient(145deg,rgba(250,253,254,.97),rgba(229,240,245,.96));color:#223940;box-shadow:0 26px 80px rgba(30,51,61,.24)}.contact-dialog::backdrop{background:rgba(27,43,51,.28)}.contact-dialog-heading{display:flex;justify-content:space-between;gap:20px;align-items:start}.contact-dialog-heading small{font:9px var(--mono);letter-spacing:.1em;color:#5a7985}.contact-dialog-heading h2{font-size:clamp(26px,3.2vw,38px);margin:10px 0;letter-spacing:-.05em}.contact-dialog-heading p{font-size:13px;line-height:1.5;color:#526d76}.contact-dialog-heading button{flex:none;width:42px;height:42px;border:1px solid #b7ccd4;border-radius:50%;background:rgba(255,255,255,.8);color:#2d4d58;font-size:24px}.contact-dialog-body{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1fr);gap:20px;margin-top:22px}.contact-dialog-methods{display:grid;align-content:start;gap:8px}.contact-dialog-methods a{display:flex;flex-direction:column;gap:5px;min-height:62px;padding:12px;border:1px solid #c3d5db;background:rgba(255,255,255,.72)}.contact-dialog-methods strong{font-size:13px}.contact-dialog-methods span{font-size:11px;color:#58727a;overflow-wrap:anywhere}.contact-dialog-methods a:hover{border-color:#7699a5}.contact-dialog .contact-form{max-width:none;padding:18px;background:rgba(255,255,255,.7);border-color:#c3d5db}.contact-dialog .contact-fields{gap:12px;margin-bottom:12px}.contact-dialog .contact-form select{margin-bottom:12px}.contact-dialog .contact-form textarea{min-height:105px}
@media(max-width:760px){.portfolio-home .home-hero{grid-template-columns:1fr;gap:22px;min-height:0;padding-top:26px;padding-bottom:30px}.home-hero h1{font-size:clamp(43px,10vw,62px);margin:16px 0 13px}.home-hero .hero-text{font-size:14px;line-height:1.5;max-width:440px}.home-hero .hero-actions{margin-top:17px;gap:14px}.home-guide{margin-top:18px;max-width:none}.home-guide img{width:43px;height:58px}.home-directions{padding:16px}.home-directions-heading{margin-bottom:12px}.home-directions-heading h2{font-size:25px}.home-direction{padding:11px 12px;grid-template-columns:minmax(0,1fr) minmax(110px,.68fr)}.home-direction-title{font-size:14px;margin:5px 0}.home-direction p{font-size:11px}.home-example{padding:7px 8px}.home-directions-footer{margin-top:12px}.home-directions-footer span{font-size:8px}.portfolio-more>summary{min-height:58px}.contact-dialog-body{grid-template-columns:1fr;gap:14px}.contact-dialog-methods{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.contact-dialog-methods a{padding:10px;min-height:58px}.contact-dialog-methods span{font-size:10px}.contact-dialog{padding:20px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}}
@media(max-width:380px){.home-hero h1{font-size:42px}.home-direction{grid-template-columns:minmax(0,1fr) minmax(100px,.7fr);gap:6px}.home-direction-title{font-size:13px}.home-example strong{font-size:11px}.home-direction p{font-size:10px}.home-directions-footer span{max-width:155px}.contact-dialog-methods a{padding:8px}.contact-dialog-methods strong{font-size:11px}}
@media(max-width:760px){.home-guide{margin-top:12px;padding:5px 10px 5px 5px;gap:10px}.home-guide img{width:35px;height:46px}.home-guide span{display:none}.home-guide p{margin:0 0 2px;font-size:11px}.home-guide button{padding:1px 0}.home-direction{padding:8px 11px}.home-direction-number,.home-direction p{display:none}.home-direction-title{margin:0;font-size:13px;line-height:1.3}.home-example{padding:5px 8px;gap:3px}.home-example small{font-size:8px}.home-example strong{font-size:11px}}
@media(max-width:760px){.contact-dialog-methods a{min-height:44px;align-items:center;justify-content:center;text-align:center}.contact-dialog-methods strong{font-size:11px;white-space:nowrap}.contact-dialog-methods span{display:none}}
@media(max-width:350px){.portfolio-home .home-hero{padding-top:16px;padding-bottom:22px;gap:14px}.home-hero h1{font-size:36px;margin:12px 0 9px}.home-hero .hero-text{font-size:12px;line-height:1.45}.home-hero .hero-actions{flex-wrap:nowrap;gap:10px;margin-top:12px}.home-hero .hero-actions .btn{padding:12px 10px;gap:9px;white-space:nowrap;font-size:10px}.home-all-work{font-size:10px}.home-guide{margin-top:9px}.home-directions{padding:12px}.home-directions-heading{margin-bottom:9px}.home-directions-heading h2{font-size:20px}.home-direction{padding:7px 8px}.home-direction-title{font-size:12px}.home-example strong{font-size:10px}.home-directions-footer{margin-top:8px}}
@media(max-width:760px){.home-direction-title,.home-example{min-height:44px}.home-direction-title{align-items:center}.home-example{justify-content:center}}
@media(max-width:350px){.portfolio-home .home-hero{padding-top:10px;gap:11px}.home-hero h1{font-size:34px;margin:9px 0 7px}.home-guide img{height:37px;width:31px}.home-directions-heading .overline{display:none}.home-directions-heading h2{font-size:18px;margin-top:0}.home-direction{padding:3px 7px}.home-example strong{font-size:11px}.home-directions-footer span{display:none}}
/* Let the animals read through open water while retaining contrast under text. */
.portfolio-home .ocean-glass{background:linear-gradient(100deg,rgba(249,252,253,.49),rgba(229,239,244,.27) 52%,rgba(247,251,253,.22)),radial-gradient(ellipse at 85% 18%,rgba(192,215,226,.13),transparent 52%)}
.home-hotkeys{display:none}
@media(min-width:1000px){.home-hotkeys{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid rgba(177,196,204,.7);font-size:10px;color:#506872}.home-hotkeys>span:first-child{font:8px var(--mono);letter-spacing:.08em;color:#718791}.home-hotkeys kbd{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-right:4px;border:1px solid #bbccd2;background:rgba(255,255,255,.7);font:10px var(--mono);color:#375661}}
.service-detail{max-width:720px}.service-detail ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:16px 0;padding:0}.service-detail li{padding:7px 9px;background:rgba(255,255,255,.6);border:1px solid rgba(182,203,211,.7);font-size:11px;line-height:1.4}.service-examples{margin-top:22px}.service-examples h3{font-size:15px;letter-spacing:-.02em;margin:0 0 10px}.service-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.service-example{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:13px;border:1px solid #c0d2d9;background:rgba(255,255,255,.75);color:#294450}.service-example:hover,.service-example:focus-visible{border-color:#769aa7;background:#fff}.service-example>span{display:flex;flex-direction:column;gap:5px;min-width:0}.service-example small{font:9px/1.4 var(--mono);letter-spacing:.06em;color:#64808a}.service-example strong{font-size:13px;line-height:1.3}.service-example span span{font-size:11px;line-height:1.45;color:#56717a}.service-example b{font-size:16px;font-weight:400;flex:none}.service-detail-actions{margin-top:18px}
@media(max-width:600px){.service-detail ul{margin:12px 0;gap:5px}.service-detail li{font-size:10px;padding:5px 7px}.service-examples{margin-top:16px}.service-example-grid{grid-template-columns:1fr}.service-example{padding:10px 12px}.service-example>span{gap:3px}.service-detail h2{margin:14px 0 9px}}
.service-switch{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.service-switch button{min-height:38px;padding:8px 12px;border:1px solid #bbced6;background:rgba(255,255,255,.65);color:#375965;font-size:11px;font-weight:650}.service-switch button[aria-pressed=true]{background:#315665;color:#fff;border-color:#315665}
.contact-dialog-guide{display:flex;gap:12px;align-items:center;margin-top:8px;padding:12px 10px;background:rgba(230,240,241,.7);border:1px solid #c1d4d7}.contact-dialog-guide img{width:92px;height:154px;object-fit:contain;flex:none}.contact-dialog-guide small{font:9px var(--mono);letter-spacing:.07em;color:#5a797c}.contact-dialog-guide p{margin:6px 0;font-size:12px;line-height:1.5;color:#3d5c61}.contact-dialog-guide button{border:0;padding:5px 0;background:none;color:#315f67;font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px}.contact-dialog-guide [data-guide-status]{display:block;font-size:11px;line-height:1.45;color:#375b5e}
.contact-dialog-guide a{display:block;padding:5px 0;color:#3e6870;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.contact-dialog-methods .contact-dialog-guide a{display:block;min-height:0;padding:4px 0;border:0;background:transparent;text-align:left;color:#3e6870;font-size:11px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.service-switch{display:none}.contact-dialog-guide{grid-column:1/-1;margin-top:2px;padding:7px 10px;gap:10px}.contact-dialog-guide img{width:55px;height:88px}.contact-dialog-guide p{margin:4px 0;font-size:11px;line-height:1.4}}
@media(max-width:760px){.contact-dialog-methods .contact-dialog-guide [data-guide-status]{display:block}.contact-dialog-heading h2{font-size:24px}}
@media(max-width:350px){.contact-dialog-methods{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-dialog-methods>a:nth-of-type(3){grid-column:1/-1}}
@media(min-width:761px){.portfolio-home .app-desktop-menu{display:none}}

/* Case studies share the cool glass of the homepage. */
.ocean-glass,.portfolio-home .ocean-glass{background:linear-gradient(100deg,rgba(249,252,253,.44),rgba(229,239,244,.21) 52%,rgba(247,251,253,.16)),radial-gradient(ellipse at 85% 18%,rgba(192,215,226,.10),transparent 52%)}
.case-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);align-items:center;gap:clamp(25px,5vw,70px);max-width:920px}
.case-lead h1{font-size:clamp(48px,6vw,80px);line-height:1.06}.case-lead .utility-intro{margin-bottom:22px}.case-lead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}.case-lead-link{font-size:12px;font-weight:650;text-decoration:underline;text-underline-offset:4px}.case-lead .case-status{font:10px/1.6 var(--mono);color:#54717d;letter-spacing:.03em;margin-top:20px}
.case-lead-preview{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px;border:1px solid #bdcfd8;border-radius:20px;background:rgba(237,246,250,.62);color:#4b6976}.case-lead-preview img{width:auto;max-width:100%;height:clamp(260px,35vw,380px);border:5px solid #1f3039;border-radius:21px;box-shadow:0 14px 30px rgba(27,43,52,.18)}.case-lead-preview span{font:9px/1.5 var(--mono);letter-spacing:.06em;text-align:center}
.real-screens{scroll-margin-top:90px}.gallery-controls{display:flex;align-items:center;gap:12px;margin-top:14px}.gallery-controls button{min-height:40px;padding:9px 12px;border:1px solid #b8cdd7;background:rgba(255,255,255,.7);color:#294958;font-size:12px;font-weight:650}.gallery-controls span{font:10px var(--mono);color:#526f7b}.gallery-controls button:hover,.gallery-controls button:focus-visible{background:#fff;border-color:#6c95a5}
.pwa-capabilities-intro p,.pwa-capabilities-grid p{color:#46606d}.pwa-capabilities-grid article{background:rgba(237,246,250,.76);border-color:#bfd2dc}.pwa-capabilities-grid small{color:#5a7b88}
.case-status-banner{max-width:920px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;align-items:center;padding:18px 20px;border:1px solid #b6cdd8;background:rgba(237,247,251,.8);color:#345561;font-size:13px;line-height:1.55}.case-status-banner strong{font:10px/1.5 var(--mono);letter-spacing:.07em;color:#315b6b}.case-status-banner span{max-width:620px}.case-status-banner a{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.case-page>.utility-intro{padding:10px 12px;margin-left:-12px;border-radius:8px;background:linear-gradient(90deg,rgba(249,252,253,.9),rgba(249,252,253,.74) 80%,transparent);color:#344b55}.case-lead .utility-intro{color:#344b55}
.case-flow{max-width:920px;margin:36px 0;padding:clamp(22px,4vw,38px);border:1px solid #bfd2dc;border-radius:20px;background:rgba(241,248,251,.78)}.case-flow h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.04em;margin:14px 0 22px}.case-flow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.case-flow-grid article{border-top:1px solid #bfd1da;padding:16px 4px}.case-flow-grid small{font:10px var(--mono);color:#668592;letter-spacing:.08em}.case-flow-grid h3{font-size:18px;margin:10px 0 6px;color:#263d47}.case-flow-grid p{font-size:13px;line-height:1.6;color:#49636e}.case-content{margin-top:35px}.site-case-screen{max-width:920px;margin:32px 0}.site-case-screen img{display:block;width:100%;height:auto;border:1px solid #b9cdd7;border-radius:16px;box-shadow:0 18px 45px rgba(35,58,70,.12)}.site-case-screen figcaption{font:10px/1.6 var(--mono);color:#577581;margin-top:10px}.mini-site{background:#dfebef;color:#304b56}.mini-site img{position:absolute;inset:52px 14px 44px;width:calc(100% - 28px);height:calc(100% - 96px);object-fit:contain}.mini-site .mini-top,.mini-site .mini-bottom{position:relative;z-index:1}
.mini-pwa,.mini-bot{background:#dce9ee;color:#304b56}.service-example:only-child{grid-column:1/-1}
.guide-dialog{position:fixed;width:min(690px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(20px,3vw,32px);border:1px solid #b6cdd8;border-radius:20px;background:linear-gradient(145deg,rgba(250,253,254,.97),rgba(227,240,246,.96));color:#223b46;box-shadow:0 26px 80px rgba(30,51,61,.22)}.guide-dialog::backdrop{background:rgba(27,43,51,.28)}.guide-dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:18px}.guide-dialog-heading small{font:9px var(--mono);letter-spacing:.1em;color:#5a7985}.guide-dialog-heading h2{font-size:clamp(25px,3vw,34px);line-height:1.15;letter-spacing:-.04em;margin:10px 0}.guide-dialog-heading p{font-size:13px;line-height:1.5;color:#526d76}.guide-dialog-heading>button{flex:none;width:40px;height:40px;border:1px solid #b7ccd4;border-radius:50%;background:rgba(255,255,255,.8);color:#2d4d58;font-size:24px}.guide-dialog-body{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:18px;margin-top:20px}.guide-dialog-body>img{width:130px;height:218px;object-fit:contain}.guide-choices{display:grid;gap:8px}.guide-choices>button{display:grid;grid-template-columns:1fr auto;gap:4px 10px;min-height:61px;padding:12px 14px;border:1px solid #c3d5db;background:rgba(255,255,255,.73);color:#2c4b58;text-align:left}.guide-choices>button strong{font-size:13px}.guide-choices>button span{grid-column:1;font-size:11px;line-height:1.4;color:#58727a}.guide-choices>button b{grid-column:2;grid-row:1 / 3;align-self:center;font-size:17px;font-weight:400}.guide-choices>button:hover,.guide-choices>button:focus-visible{background:#fff;border-color:#789ca9}.guide-choices>a{width:fit-content;padding:7px 0;color:#355e6b;font-size:11px;font-weight:650;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.guide-dialog{padding:18px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.guide-dialog-heading h2{font-size:24px}.guide-dialog-heading p{font-size:12px}.guide-dialog-body{grid-template-columns:64px minmax(0,1fr);gap:10px;margin-top:14px}.guide-dialog-body>img{width:64px;height:120px}.guide-choices>button{min-height:55px;padding:9px 10px}.guide-choices>button span{font-size:10px}}
/* A restrained pixel signature for interactive controls. */
.home-direction,.guide-choices>button,.service-example{position:relative}.home-direction::before,.guide-choices>button::before,.service-example::before{content:"";position:absolute;top:0;left:0;width:4px;height:4px;background:#779ba9;box-shadow:6px 0 #9bb8c2,0 6px #a8c1ca;opacity:.36;pointer-events:none;transition:opacity .2s ease}.home-direction:focus-within::before,.guide-choices>button:focus-visible::before,.service-example:focus-visible::before{opacity:1}.home-direction-title span,.guide-choices>button b,.service-example b{display:inline-block;transition:transform .2s ease}.guide-choices>button:focus-visible,.service-example:focus-visible,.home-direction-title:focus-visible,.home-example:focus-visible{outline:2px solid #396d80;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.home-direction:hover::before,.guide-choices>button:hover::before,.service-example:hover::before{opacity:1}.home-direction-title:hover span,.guide-choices>button:hover b,.service-example:hover b{transform:translate(2px,-2px)}}
@media(prefers-reduced-motion:reduce){.home-direction::before,.guide-choices>button::before,.service-example::before,.home-direction-title span,.guide-choices>button b,.service-example b{transition:none}}
.service-example>.service-preview{display:none}
@media(min-width:1000px){.service-example>.service-preview{display:flex;flex:none;align-items:center;justify-content:center;width:118px;height:78px;overflow:hidden;border:1px solid #c3d5dd;background:rgba(224,238,244,.72);gap:5px}.service-preview img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .22s ease}.service-preview strong{font:700 10px var(--mono);color:#3e6472}.service-preview small{font-size:8px!important}.service-example:hover .service-preview img{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.service-preview img{transition:none!important}}
/* A consistent, cool glass finish for navigation and contact. */
.portfolio-home .contact{background:linear-gradient(135deg,rgba(241,248,251,.70),rgba(222,237,244,.58));border-block:1px solid rgba(169,194,205,.65)}
.portfolio-home .contact p{color:#49636d}.portfolio-home .contact .contact-form{background:rgba(249,253,255,.76);border-color:#bdd1da}
.portfolio-home .nav-contact{border-color:#a8c1cd;background:rgba(244,250,252,.6);color:#294853}.portfolio-home .nav-contact:hover,.portfolio-home .nav-contact:focus-visible{background:#294b59;color:#fff}
.btn.primary{background:#263f4a;color:#fff}.btn.primary:hover{background:#355b6b}.home-guide{border-color:rgba(172,195,205,.7);background:rgba(244,250,252,.75)}.home-guide span{color:#58727d}.home-guide p{color:#314d58}.home-guide button{color:#315f70}
.app-card,.app-case-list a,.app-contact-list a{background:rgba(241,248,251,.76);border-color:#c1d3dc}.app-bar a{color:#3c5b68}
.contact-dialog::before,.guide-dialog::before,.service-detail::before,.app-panel::before{content:"";position:absolute;left:0;top:0;width:5px;height:5px;background:#789aa7;box-shadow:7px 0 #a0bdc7,0 7px #a0bdc7;pointer-events:none;opacity:.6}
.real-screen-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:20px 0 16px}.real-screen-tabs button{position:relative;justify-content:flex-start;gap:9px;min-width:0;min-height:48px;padding:10px 12px;border-radius:8px;background:rgba(252,254,255,.72);border:1px solid #c3d6df;font-size:12px;line-height:1.3;text-align:left;transition:background .2s ease,border-color .2s ease,color .2s ease}.real-screen-tabs button span{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid #c5d9e1;border-radius:5px;background:rgba(232,242,246,.8);color:#527783;font:9px var(--mono);opacity:1}.real-screen-tabs button[aria-pressed=true]{background:#315969;border-color:#315969;color:#fff}.real-screen-tabs button[aria-pressed=true] span{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff}.real-screen-tabs button:focus-visible{outline:2px solid #396d80;outline-offset:2px}.real-screens-copy .real-screen-caption{min-height:0;margin:0;padding:12px 14px;border-left:2px solid #86aab7;background:rgba(255,255,255,.55);color:#405f6c}.gallery-controls button{border-radius:7px}
@media(max-width:760px){.real-screens{gap:15px;padding:20px}.real-screens-copy h2{margin:10px 0;font-size:28px}.real-screens-copy>p{font-size:13px;line-height:1.5}.real-screen-tabs{gap:6px;margin:16px 0 12px}.real-screen-tabs button{min-height:46px;padding:8px 9px;font-size:11px}.real-screens-copy .real-screen-caption{padding:9px 10px;font-size:12px}.real-screen-device img{width:min(85%,290px)}}
@media(prefers-reduced-motion:reduce){.real-screen-tabs button{transition:none}}

/* Cool silver-blue surfaces and a small pixel signature. */
:root{--bg:#f5f9fb;--ink:#22343c;--secondary:#415b66;--muted:#667f89;--line:#c7d8df;--surface:rgba(247,252,254,.7);--sage:#7895a1}
.ocean-world{background:linear-gradient(#f7fbfd,#edf5f8)}h1 em,h2 em{color:#637d88}.signal{background:#82a9b8;box-shadow:0 0 10px #b5d1dd}.hero-pixel{display:inline-block;width:6px;height:6px;margin-left:.16em;background:#7da1af;box-shadow:8px 0 #adc5ce,0 8px #adc5ce;vertical-align:middle}
.home-direction-title{justify-content:flex-start;gap:8px}.home-direction-title .direction-icon{width:32px;height:32px;flex:none;color:var(--pixel-ink)}.home-direction-title .direction-label{flex:1;min-width:0;font-size:inherit;font-weight:inherit;line-height:inherit}.home-direction-title .direction-arrow{flex:none;margin-left:auto;font-size:13px;font-weight:400}
.contact-form input,.contact-form select,.contact-form textarea,.brief textarea{background:#fbfdfe;border-color:#bfd2dc;color:#263e48}.contact-form .contact-send{background:#263f4a;color:#fff}.contact-form .contact-send:hover{background:#355b6b}.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline:2px solid #477b8e;outline-offset:2px}.app-tabs{border-color:#c2d5dd}.app-tabs button{color:#56727e}.app-tabs button[aria-selected=true]{color:#294c5b;border-bottom-color:#578395}.character-showcase{border-color:#c1d5dd;background:rgba(241,248,251,.76)}.character-frame{background:linear-gradient(145deg,rgba(206,227,236,.48),rgba(245,251,253,.4))}.character-copy p{color:#405b66}.character-speech{background:rgba(249,253,255,.9);border-color:#8fb3c0}.character-copy .character-speech p{color:#34535f}.character-speech button{color:#356577}

/* Compact access to the work, while preserving old deep links. */
.portfolio-more>summary{min-height:84px;padding:16px 18px;border:1px solid #c3d6de;background:rgba(242,249,252,.68);gap:20px}.portfolio-more>summary:hover,.portfolio-more>summary:focus-visible{background:rgba(251,254,255,.9);border-color:#90b0bd}.more-summary-copy{display:grid;gap:4px}.more-summary-copy small{font:9px var(--mono);letter-spacing:.08em;color:#63818d}.more-summary-copy strong{font-size:15px;color:#294752}.more-summary-copy p{font-size:12px;line-height:1.4;color:#58737d}.portfolio-more>summary>span:last-child{color:#5e8491}.more-quick{display:none}.compact-more .more-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 0}.compact-more .portfolio-more:not(.show-full)>.portfolio-more-content{display:none}.more-quick a{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px;border:1px solid #c2d5de;background:rgba(248,253,255,.74)}.more-quick a:hover,.more-quick a:focus-visible{background:#fff;border-color:#85a9b7}.more-quick small{font:9px var(--mono);letter-spacing:.06em;color:#6a8995}.more-quick strong{font-size:13px;color:#294a57}.more-quick span{font-size:11px;line-height:1.4;color:#5a7681}
.more-dialog{position:fixed;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(20px,3vw,32px);border:1px solid #b6cdd8;border-radius:20px;background:linear-gradient(145deg,rgba(250,253,254,.97),rgba(227,240,246,.96));color:#223b46;box-shadow:0 26px 80px rgba(30,51,61,.22)}.more-dialog::backdrop{background:rgba(27,43,51,.28)}.more-dialog-heading{display:flex;justify-content:space-between;gap:16px}.more-dialog-heading small,.more-steps small{font:9px var(--mono);letter-spacing:.08em;color:#63828e}.more-dialog-heading h2{font-size:32px;letter-spacing:-.04em;margin:10px 0 20px}.more-dialog-heading button{flex:none;width:40px;height:40px;border:1px solid #b7ccd4;border-radius:50%;background:rgba(255,255,255,.8);color:#2d4d58;font-size:24px}.more-character{display:grid;grid-template-columns:140px minmax(0,1fr);gap:22px;align-items:center}.more-character img{width:140px;height:235px;object-fit:contain}.more-character h3{font-size:21px;letter-spacing:-.03em}.more-character p,.more-steps p{font-size:13px;line-height:1.6;color:#516d77;margin:9px 0 16px}.more-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.more-steps article{padding:16px;border:1px solid #c6d9e0;background:rgba(255,255,255,.62)}.more-steps strong{display:block;font-size:14px;margin-top:9px}.more-steps p{font-size:12px;margin-bottom:0}

/* Swipeable case cards, with buttons and keyboard support. */
.case-carousel{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#a7c2cd transparent}.case-carousel:focus-visible{outline:2px solid #477b8e;outline-offset:3px}.case-carousel .app-case-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(225px,68%);grid-template-columns:none;gap:10px;padding:2px 2px 8px}.case-carousel .app-case-list>a{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;min-width:0;padding:12px;border:1px solid #bfd3dc;border-radius:10px;background:rgba(250,253,255,.78);scroll-snap-align:start}.case-carousel .app-case-list>a:hover,.case-carousel .app-case-list>a:focus-visible{border-color:#7fa5b4;background:#fff}.case-carousel .app-case-list>a>span:not(.carousel-art){display:flex;flex-direction:column;gap:5px}.case-carousel .app-case-list>a>span span{font-size:11px;line-height:1.4;color:#57717c}.case-carousel .app-case-list>a>b{position:absolute;right:13px;bottom:13px;color:#3f6a7a}.case-carousel .app-case-list strong{font-size:14px;padding-right:18px}.case-carousel .app-case-list small{color:#64828e}.case-carousel .carousel-art{height:105px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:#e5f0f4}.case-carousel .carousel-art img{height:100%;width:100%;object-fit:contain}.case-carousel .carousel-bot{flex-direction:column;gap:7px;background:linear-gradient(135deg,#dcecf1,#edf6f8);color:#355c6c}.carousel-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;color:#65808a;font-size:10px}.carousel-controls>div{display:flex;align-items:center;gap:8px}.carousel-controls button{width:38px;height:38px;border:1px solid #bdd2db;border-radius:7px;background:rgba(255,255,255,.78);color:#315767;font-size:16px}.carousel-controls button:disabled{opacity:.35}.carousel-controls [data-carousel-position]{min-width:35px;text-align:center;font:10px var(--mono)}
@media(max-width:760px){.home-direction-title .direction-icon{width:28px;height:28px}.home-direction-title{gap:5px}.portfolio-more>summary{min-height:76px;padding:13px}.compact-more .more-quick{grid-template-columns:1fr;gap:6px}.more-quick a{padding:12px}.more-dialog{padding:18px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.more-character{grid-template-columns:80px minmax(0,1fr);gap:12px}.more-character img{width:80px;height:150px}.more-character h3{font-size:17px}.more-steps{grid-template-columns:1fr;gap:7px}.more-steps article{padding:12px}.case-carousel .app-case-list{grid-auto-columns:86%}.carousel-controls button{width:44px;height:44px}}

/* A quiet pixel signature in the navigation, with no extra controls. */
.portfolio-home .nav{border-bottom-color:rgba(105,143,158,.24)}
.portfolio-home .logo::after{content:"";width:4px;height:4px;align-self:center;margin-left:4px;background:#86a8b6;box-shadow:6px 0 #c1d3da,0 6px #c1d3da;opacity:.68;animation:nav-pixel-breathe 7s ease-in-out infinite}
@keyframes nav-pixel-breathe{0%,100%{opacity:.45}50%{opacity:.9}}
@media(min-width:761px){.portfolio-home .home-hero h1{font-size:clamp(43px,4.1vw,60px)}}
@media(min-width:381px) and (max-width:760px){.portfolio-home .home-hero h1{font-size:clamp(34px,9.4vw,48px)}}
@media(max-width:380px){.portfolio-home .home-hero h1{font-size:32px;letter-spacing:-.065em}}
@media(max-width:760px){.app-panel-open .app-bar{visibility:hidden;pointer-events:none}}
@supports selector(body:has(dialog[open])){@media(max-width:760px){body:has(dialog[open]) .app-bar{visibility:hidden;pointer-events:none}}}
@media(max-width:760px){.app-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px max(14px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:rgba(241,248,251,.94)}.app-bar .app-menu-trigger{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;min-height:52px;padding:3px 4px;color:#304f5d;text-align:left}.app-menu-symbol{display:grid;place-items:center;width:38px;height:38px;border:1px solid #b9ced7;background:rgba(255,255,255,.64);font-size:19px;line-height:1}.app-menu-copy{display:flex;flex-direction:column;gap:3px}.app-menu-copy strong{font-size:12px}.app-menu-copy small{font-size:9px;color:#607e8a}.app-bar .app-contact-trigger{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 13px;border:1px solid #9ebdc9;background:rgba(251,254,255,.82);font-size:11px;color:#315564}.app-contact-trigger span{font-size:14px}.app-menu-trigger:focus-visible,.app-contact-trigger:focus-visible{outline:2px solid #477b8e;outline-offset:2px}}
.app-card:hover,.app-card:focus-visible{border-color:#83a9b7;background:rgba(250,253,255,.96)}
.app-contact-list .app-action-primary{background:#263f4a;border-color:#263f4a;color:#fff}
.home-guide{position:relative}.home-guide::after{content:"";position:absolute;right:7px;top:7px;width:3px;height:3px;background:#8eafbc;box-shadow:5px 0 #c0d3da,0 5px #c0d3da;opacity:.7;pointer-events:none}
.home-guide{width:min(100%,340px);margin:0 0 18px;padding:6px 15px 6px 8px;border-color:#b4cfd9;background:rgba(244,251,253,.85)}.home-guide img{width:60px;height:76px;object-fit:contain}.home-guide p{font-size:13px;font-weight:550;line-height:1.4}.home-guide button{font-size:12px;min-height:28px}.home-hero .hero-copy>.overline{margin-top:0}
.guide-shortcuts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.guide-shortcuts a{min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 5px;border:1px solid #c2d6de;background:rgba(250,253,255,.74);color:#315b6c;font-size:11px;font-weight:650;text-align:center}.guide-shortcuts a:hover,.guide-shortcuts a:focus-visible{background:white;border-color:#83a9b7}
.contact-channels{display:grid;gap:8px;max-width:430px}.contact-channel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:13px 14px;border:1px solid #bdd2da;background:rgba(250,253,255,.76);color:#315463}.contact-channel strong{font-size:13px}.contact-channel small{grid-column:1;font-size:11px;color:#5b7681;overflow-wrap:anywhere}.contact-channel>span{grid-column:2;grid-row:1/3;font-size:16px}.contact-channel:hover,.contact-channel:focus-visible{border-color:#7da5b3;background:#fff}.contact-channel-telegram,.contact-dialog-methods>a:first-of-type{background:rgba(224,241,248,.93);border-color:#8eb8c8}.contact-dialog-methods>a:first-of-type strong{color:#28566b}
@media(max-width:760px){.home-hero .hero-copy>.overline{display:none}.home-guide{margin:0 0 12px;max-width:100%}.home-guide img{width:44px;height:58px}.home-guide p{font-size:12px}.home-guide button{font-size:11px;min-height:24px}.app-bar .app-menu-trigger{grid-template-columns:46px minmax(0,1fr)}.app-guide-art{display:grid;place-items:center;width:46px;height:48px;overflow:hidden}.app-guide-art img{width:auto;height:48px;max-width:100%;max-height:100%;min-height:0;object-fit:contain}.guide-shortcuts a{font-size:10px}}
@media(max-width:350px){.home-guide img{width:50px;height:62px}.home-guide{margin-bottom:5px}.home-directions-heading h2{font-size:16px}.contact-dialog-methods>a:nth-of-type(1){grid-column:1/-1}.contact-dialog-methods>a:nth-of-type(3){grid-column:auto}}
/* Four useful destinations remain easy to tap on narrow phones. */
@media(max-width:350px){.home-direction-list{gap:3px}.home-direction{padding:2px 6px}.home-direction-title{line-height:1.2}.home-example{padding:2px 5px;gap:2px}.home-guide img{width:40px;height:50px}.guide-dialog{padding:14px}.guide-dialog-heading h2{font-size:22px;margin:7px 0}.guide-dialog-body{grid-template-columns:44px minmax(0,1fr);gap:8px;margin-top:10px}.guide-dialog-body>img{width:44px;height:100px}.guide-choices{gap:5px}.guide-choices>button{min-height:48px;padding:6px 8px;gap:2px 6px}.guide-choices>button strong{font-size:12px}.guide-choices>button span{font-size:10px;line-height:1.2}}
@media(prefers-reduced-motion:reduce){.portfolio-home .logo::after{animation:none}}
@media(max-width:760px){.case-lead{grid-template-columns:1fr;gap:22px}.case-lead h1{font-size:clamp(43px,10vw,62px)}.case-lead-preview{flex-direction:row;justify-content:center;padding:12px}.case-lead-preview img{height:185px;border-width:4px;border-radius:14px}.case-lead-preview span{max-width:120px;text-align:left}.gallery-controls{margin-bottom:4px}.case-flow-grid{grid-template-columns:1fr}.case-status-banner{padding:15px}.case-status-banner strong{width:100%}}

/* Desktop composition: readable services and a full-height personal guide.
   Keep the compact phone layout; never scale the whole page or crop the figure. */
@media (min-width: 1000px) {
  .portfolio-home .wrap { max-width: 1760px; padding-inline: clamp(40px, 4vw, 80px); }
  .portfolio-home .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(32px, 4vw, 72px); padding-block: 36px; }
  .portfolio-home .home-hero h1 { font-size: clamp(44px, 4.1vw, 72px); margin: 22px 0 18px; }
  .home-hero .hero-text { font-size: clamp(16px, 1.1vw, 19px); max-width: 540px; }
  .home-hero .hero-actions { gap: 24px; flex-wrap: wrap; }
  .home-hero .hero-actions .btn, .home-all-work { font-size: 14px; }
  .home-guide { width: 100%; max-width: 540px; min-height: 210px; margin-bottom: 22px; padding: 12px 24px 12px 8px; gap: 20px; background: linear-gradient(120deg, rgba(241,249,253,.32), rgba(245,251,254,.86)); border-color: rgba(158,189,204,.65); border-radius: 4px 24px 24px 24px; }
  .home-guide img { width: clamp(130px, 11vw, 190px); height: clamp(210px, 17vw, 280px); object-fit: contain; object-position: center; }
  .home-guide span { font-size: 11px; }
  .home-guide p { font-size: clamp(18px, 1.45vw, 23px); line-height: 1.4; margin-block: 12px; }
  .home-guide button { font-size: 15px; min-height: 44px; text-align: left; }
  .home-directions { padding: clamp(22px, 2vw, 36px); }
  .home-directions-heading h2 { font-size: clamp(28px, 2.2vw, 38px); }
  .home-directions-heading>a, .home-directions-footer a { font-size: 13px; }
  .home-direction { padding: 16px; grid-template-columns: minmax(0, 1fr) minmax(110px, .48fr); gap: 14px; }
  .home-direction-title { font-size: clamp(16px, 1.25vw, 21px); line-height: 1.35; }
  .home-direction p { font-size: 13px; line-height: 1.5; }
  .home-direction-number, .home-example small, .home-directions-footer span { font-size: 10px; }
  .home-example strong { font-size: 14px; }
  .guide-dialog { width: min(980px, calc(100vw - 80px)); padding: 36px; }
  .guide-dialog-heading h2 { font-size: 38px; }
  .guide-dialog-heading p { font-size: 16px; }
  .guide-dialog-body { grid-template-columns: minmax(180px, .6fr) minmax(0, 1fr); gap: 28px; }
  .guide-dialog-body>img { width: 100%; height: min(390px, 48dvh); object-fit: contain; }
  .guide-choices>button { min-height: 80px; padding: 16px 20px; }
  .guide-choices>button strong { font-size: 18px; }
  .guide-choices>button span { font-size: 14px; }
  .guide-shortcuts a { min-height: 48px; font-size: 14px; }
  .contact-dialog { width: min(1080px, calc(100vw - 80px)); padding: 36px; }
  .contact-dialog-body { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 28px; }
  .contact-dialog-methods>a { min-height: 76px; padding: 16px 20px; }
  .contact-dialog-methods strong { font-size: 17px; }
  .contact-dialog-methods span { font-size: 13px; }
  .contact-dialog-guide { gap: 16px; background: rgba(230,241,248,.6); }
  .contact-dialog-guide img { width: 135px; height: 225px; object-fit: contain; }
  .contact-dialog-guide p { font-size: 14px; }
  .contact-dialog-guide button { font-size: 13px; min-height: 44px; }
  .more-dialog { width: min(960px, calc(100vw - 80px)); }
  .more-character { grid-template-columns: 260px minmax(0, 1fr); gap: 36px; }
  .more-character img { width: 260px; height: min(440px, 55dvh); object-fit: contain; }
  .more-character h3 { font-size: 28px; }
  .more-character p { font-size: 16px; }
  .service-detail, .app-panel { width: min(1040px, calc(100vw - 80px)); }
  .case-carousel .app-case-list { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
  .case-carousel .carousel-art { height: 200px; }
  .case-carousel .app-case-list strong { font-size: 18px; }
  .case-carousel .app-case-list>a>span span { font-size: 14px; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .portfolio-home .home-hero { padding-block: 24px; }
  .home-guide { min-height: 170px; margin-bottom: 16px; }
  .home-guide img { height: 180px; width: 120px; }
  .home-direction { padding-block: 12px; }
}
@media (min-width: 761px) and (max-width: 999px) {
  .home-guide img { width: 90px; height: 140px; }
  .home-guide { width: 100%; max-width: 460px; }
}
@media (max-width: 760px) {
  .contact-dialog-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-dialog-methods>a:first-of-type { grid-column: auto; }
}
/* Demchyk Studio: scalable wordmark and an accessible three-language menu. */
.nav .logo .studio-wordmark { display: flex; flex-direction: column; gap: 5px; font-family: var(--sans, Inter, sans-serif); }
.studio-wordmark strong { font-size: 16px; line-height: 1; letter-spacing: .035em; font-weight: 720; }
.studio-wordmark small { font-size: 9px; line-height: 1; letter-spacing: .33em; font-weight: 600; color: #57788c; }
.language-menu { position: relative; flex: 0 0 auto; z-index: 40; }
.language-menu summary { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 650; color: #294b5c; border: 1px solid transparent; border-radius: 6px; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu[open] summary, .language-menu summary:hover { background: #eaf2f8; border-color: #bdd0dc; }
.nav .language-menu nav { display: flex; flex-direction: column; position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; gap: 2px; padding: 6px; margin: 0; background: #f6faff; border: 1px solid #b6cdda; box-shadow: 0 12px 32px #294b5c20; border-radius: 10px; }
.nav .language-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; width: 100%; border-radius: 5px; font-size: 13px; color: #294b5c; }
.nav .language-menu a[aria-current="page"] { background: #deebf3; font-weight: 700; }
.nav .language-menu a:hover { background: #e5eff6; }
.language-menu summary:focus-visible, .language-menu a:focus-visible { outline: 2px solid #396d80; outline-offset: 2px; }
@media(max-width:380px) { .studio-wordmark strong { font-size: 13px; }.studio-wordmark small { font-size: 8px; }.language-menu summary { padding-inline: 6px; } }
@media(max-width:760px) { .nav .nav-contact { display: none; } }
/* Tablet composition avoids squeezed two-column service cards. */
@media (min-width:761px) and (max-width:999px) {
  .portfolio-home .home-hero { grid-template-columns: 1fr; min-height: 0; align-items: start; padding-top: 28px; padding-bottom: 24px; gap: 24px; }
  .home-hero .hero-copy { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); column-gap: 24px; min-height: 0; align-self: start; }
  .home-hero .hero-copy>.overline { grid-column: 1; grid-row: 1; }
  .portfolio-home .home-hero h1 { grid-column: 1; grid-row: 2; font-size: 38px; margin: 14px 0; }
  .home-hero .hero-text { grid-column: 1; grid-row: 3; font-size: 14px; line-height: 1.5; }
  .home-hero .hero-actions { grid-column: 1; grid-row: 4; margin-top: 18px; gap: 12px; flex-wrap: wrap; }
  .home-hero .home-guide { grid-column: 2; grid-row: 1 / 5; align-self: start; display: flex; flex-direction: column; align-items: start; padding: 14px; gap: 10px; width: 100%; margin: 0; }
  .home-hero .home-guide img { width: 100%; height: 160px; }
  .home-hero .home-guide p { font-size: 13px; }
  .home-directions { padding: 18px; }
  .home-direction-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .home-direction { grid-template-columns: minmax(0,1fr); padding: 14px; gap: 10px; }
  .home-direction-title { font-size: 16px; }
  .home-example { border-left: 0; border-top: 1px solid #c8d8e1; padding: 9px 0 0; }
  .home-direction p { font-size: 12px; }
  .home-directions-heading h2 { font-size: 26px; }
}
/* v38: a deliberate first screen, helpful character, and readable aquarium dialogs. */
html { scrollbar-gutter: stable; }
.portfolio-home.contact-dialog-ready #contact { display: none; }
.guide-case-link { display: block; width: fit-content; padding-block: 8px; font-size: 12px; color: #476778; text-underline-offset: 4px; }
.guide-case-link:hover { text-decoration: underline; }
.home-guide button:focus-visible, .guide-case-link:focus-visible { outline: 2px solid #396d80; outline-offset: 4px; }
.brief-assistant { display: none; }
.contact-dialog .brief-assistant { display: block; margin: 0 0 16px; border: 1px solid #bfd3de; border-radius: 8px; background: rgba(237,247,252,.85); }
.brief-assistant summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 12px; min-height: 44px; color: #315767; font-size: 13px; font-weight: 650; }
.brief-assistant summary::-webkit-details-marker { display: none; }
.brief-assistant summary span { font-size: 20px; }
.brief-assistant[open] summary span { transform: rotate(45deg); }
.brief-assistant summary:focus-visible { outline: 2px solid #396d80; outline-offset: 3px; }
.brief-assistant .contact-dialog-guide { margin: 0; padding: 0 12px 12px; border: 0; background: none; }
.brief-assistant .contact-dialog-guide img { width: 76px; height: 120px; }
.brief-assistant .contact-dialog-guide a { padding: 8px 0; min-height: 0; font-size: 12px; }
.brief-assistant .contact-dialog-guide p { font-size: 13px; }
.contact-dialog-body { align-items: start; }
.contact-dialog-methods>a { text-align: left; align-items: flex-start; }
/* Hide background page lettering without changing layout or resizing the ocean.
   The live aquarium stays painted beneath the glass; dialogs remain in top layer. */
@supports selector(body:has(dialog[open])) {
  .portfolio-home:has(dialog[open]) > main { visibility: hidden; }
  .portfolio-home:has(dialog[open]) > header,
  .portfolio-home:has(dialog[open]) > footer { opacity: .16; }
  .portfolio-home:has(dialog[open]) { overflow: hidden; }
}
.portfolio-home :is(.app-panel, .service-detail, .contact-dialog, .guide-dialog, .more-dialog) {
  background: rgba(241,248,252,.90);
  color: #223b46;
  border: 1px solid rgba(157,184,199,.85);
  box-shadow: 0 24px 80px rgba(27,51,66,.18), inset 0 1px rgba(255,255,255,.9);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.portfolio-home dialog::backdrop { background: rgba(34,58,72,.16); backdrop-filter: none; }
@media (min-width: 1000px) {
  .portfolio-home .nav { max-width: 1760px; width: 100%; margin-inline: auto; padding-inline: clamp(40px,4vw,80px); }
  .portfolio-home .home-hero { min-height: 0; align-items: start; padding-top: clamp(32px,3.5vw,64px); padding-bottom: 24px; }
  .portfolio-home .home-hero .hero-copy { align-self: start; }
  .home-hero .hero-copy>.overline { order: 0; }
  .portfolio-home .home-hero h1 { order: 1; margin-top: 18px; }
  .home-hero .hero-text { order: 2; }
  .home-hero .hero-actions { order: 3; margin-top: 22px; }
  .home-hero .home-guide { order: 4; margin: 28px 0 0; max-width: 620px; min-height: 0; padding: 12px 24px 12px 12px; gap: 24px; }
  .home-hero .home-guide img { width: clamp(145px,11vw,190px); height: clamp(220px,16vw,270px); }
  .home-hero .home-guide p { font-size: clamp(18px,1.35vw,22px); max-width: 290px; }
  .home-hero .home-guide span { font-size: 10px; }
  .home-hero .home-guide button { font-size: 15px; }
  .home-directions-heading { align-items: start; }
  .home-directions-heading h2 { font-size: clamp(26px,2vw,34px); line-height: 1.12; }
  .home-directions-heading>a { margin-top: 28px; }
  .portfolio-more>summary { min-height: 64px; }
  .case-carousel .app-case-list>a { padding: 16px; }
  .contact-dialog-body { grid-template-columns: minmax(220px,.62fr) minmax(0,1fr); }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .portfolio-home .home-hero { padding-top: 28px; }
  .home-hero .home-guide { margin-top: 20px; padding-block: 8px; }
  .home-hero .home-guide img { height: 200px; width: 135px; }
  .home-hero .home-guide p { font-size: 18px; }
}
@media (max-width: 760px) {
  .portfolio-home .home-hero { padding-top: 16px; gap: 16px; padding-bottom: 24px; }
  .home-hero .home-guide { margin: 0 0 10px; padding: 6px 10px 6px 4px; gap: 10px; }
  .home-hero .home-guide img { width: 64px; height: 96px; }
  .home-hero .home-guide p { font-size: 12px; line-height: 1.35; margin: 0 0 4px; }
  .home-hero .home-guide span { display: none; }
  .home-hero .home-guide button { min-height: 32px; font-size: 12px; }
  .home-guide .guide-case-link { display: none; }
  .home-hero h1 { margin: 10px 0 12px; }
  .home-hero .hero-text { font-size: 13px; line-height: 1.45; }
  .home-hero .hero-actions { margin-top: 14px; }
  .home-directions { padding: 12px; }
  .home-directions-heading { margin-bottom: 10px; align-items: center; }
  .home-directions-heading .overline { display: none; }
  .home-directions-heading h2 { margin: 0; font-size: 19px; line-height: 1.2; letter-spacing: -.03em; }
  .home-directions-heading>a { font-size: 10px; }
  .home-direction { padding: 4px 8px; }
  .home-direction-title { font-size: 12px; }
  .home-direction-number, .home-direction p { display: none; }
  .home-example { padding-block: 4px; }
  .home-directions-footer { margin-top: 8px; }
  .home-directions-footer>span { display: none; }
  .home-directions-footer>a { min-height: 32px; display: flex; align-items: center; }
  .portfolio-home { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .portfolio-home .footer { padding-bottom: 24px; }
  .app-bar { box-shadow: 0 -6px 24px rgba(38,67,82,.06); }
  .app-panel-heading h2 { font-size: 25px; }
  .contact-dialog-methods>a { min-height: 48px; justify-content: center; align-items: center; }
  .contact-dialog-heading h2 { font-size: 26px; }
  .contact-dialog .contact-form { padding: 14px; }
  .contact-dialog .contact-form textarea { min-height: 100px; }
}
@media (max-width: 350px) {
  .home-hero .home-guide img { width: 52px; height: 84px; }
  .home-hero .home-guide p { font-size: 11px; }
  .home-hero .home-guide button { font-size: 11px; }
  .home-directions-heading h2 { font-size: 17px; }
  .home-directions-heading>a { font-size: 9px; }
}

@media(max-width:760px){.contact-dialog-methods a span{display:block;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.contact-dialog-methods a{min-height:62px;justify-content:center;gap:5px}}

@media(max-width:480px){.contact-dialog-methods{grid-template-columns:1fr}.contact-dialog-methods a{align-items:flex-start;min-height:58px;padding:11px 14px}.contact-dialog-methods a span{overflow-wrap:normal}}

/* Landscape phones: use the short viewport instead of a tall tablet portrait. */
@media(min-width:761px) and (max-width:999px) and (max-height:500px){
 .portfolio-home .home-hero{padding-top:20px;gap:20px}
 .home-hero .hero-copy{grid-template-rows:repeat(4,max-content);align-items:start}
 .portfolio-home .home-hero h1{font-size:30px;margin:8px 0}
 .home-hero .hero-text{font-size:13px;margin:8px 0}
 .home-hero .hero-actions{margin-top:10px}
 .home-hero .home-guide{flex-direction:row;align-items:center;padding:10px;gap:10px}
 .home-hero .home-guide img{width:56px;height:88px;flex:0 0 56px}
 .home-hero .home-guide p{font-size:12px;line-height:1.35}
 .home-hero .home-guide span,.home-hero .guide-case-link{display:none}
 .home-hero .home-guide button{font-size:12px;min-height:36px}
 .persistent-contact{bottom:14px;right:18px;min-height:52px;padding:9px 13px}
}
/* Website collection: real project previews, optional scope, no automatic sliding. */
.website-detail .service-examples{margin-top:18px}
.website-detail .service-example-grid.website-projects{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 16px)/2);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:2px;overscroll-behavior-x:contain;padding:2px 2px 10px;scrollbar-width:thin;scrollbar-color:#90aab7 transparent}
.website-project{min-width:0;display:flex;flex-direction:column;border:1px solid #bdd0da;border-radius:12px;background:rgba(250,253,255,.85);overflow:hidden;scroll-snap-align:start}
.website-project>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid #c2d4dd;background:#e5eef3}
.website-project-body{padding:18px;display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px}
.website-project-body>small{font:9px/1.5 var(--mono);letter-spacing:.06em;color:#527181}
.website-project h4{font-size:20px;line-height:1.2;letter-spacing:-.035em;margin:0;color:#223d4b}
.website-project p{font-size:13px;line-height:1.55;margin:0}
.project-tags{display:flex;flex-wrap:wrap;gap:5px}
.project-tags span{font:10px/1.3 var(--mono);color:#456778;background:#e6eff4;padding:5px 7px;border-radius:3px}
.project-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px;width:100%}
.project-actions a{display:flex;justify-content:center;align-items:center;min-height:44px;padding:10px 12px;border:1px solid #b4cbd6;border-radius:6px;color:#2f5264;font-size:12px;font-weight:650;flex:1;white-space:nowrap}
.project-actions a:last-child{background:#2b4d5e;color:#fff;border-color:#2b4d5e}
.project-actions a:hover{border-color:#4b778a;background:#e9f2f6}.project-actions a:last-child:hover{background:#3c6274}
.website-project p.project-note{font-size:10px;line-height:1.5;color:#5d7681}
.project-gallery-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
.project-gallery-controls>span{margin-right:auto;font:11px var(--mono);color:#4e6d7d}
.project-gallery-controls button{width:44px;height:40px;border:1px solid #bbd0db;border-radius:6px;background:rgba(255,255,255,.7);color:#34596b;font-size:19px;cursor:pointer}
.project-gallery-controls button:disabled{opacity:.36;cursor:default}
.project-gallery-controls[hidden]{display:none}
.website-projects:focus-visible,.project-actions a:focus-visible,.project-gallery-controls button:focus-visible{outline:2px solid #396d80;outline-offset:2px}
@media(min-width:1000px){.website-detail{max-width:1040px!important;padding:24px}.website-detail h2{margin-top:12px;font-size:32px}.website-detail>p{max-width:760px}.website-project>img{height:200px;object-fit:contain}.website-project-body{padding:16px;gap:8px}}
@media(max-width:640px){.website-detail{padding:18px}.website-detail .service-example-grid.website-projects{grid-auto-columns:92%;gap:12px}.website-project-body{padding:14px;gap:8px}.website-project h4{font-size:18px}.website-project p{font-size:12px}.website-detail>p{font-size:13px}.website-detail .service-examples{margin-top:14px}.website-detail .service-detail-actions{margin-top:14px}.website-detail .service-switch{margin-top:12px}.website-project>img{aspect-ratio:16/9}.project-actions a{font-size:11px;padding:9px 8px}}
/* The founder stands in the interface; only his short message has a quiet accent. */
.portfolio-home .home-hero .home-guide{background:none;border:0;border-radius:0;box-shadow:none;padding:0;position:relative}
.home-guide::after{display:none}
.home-guide>div{position:relative;min-width:0;border-left:2px solid #a3bdcd;padding-left:14px}
.home-guide>div::before{content:"";position:absolute;left:-3px;top:0;width:4px;height:4px;background:#426b7f;box-shadow:6px 0 #a8c1d0}
.home-guide img{filter:drop-shadow(0 12px 10px rgba(42,68,82,.10));object-fit:contain}
.home-guide button{border:0;background:none;padding:8px 0;color:#2b5368;text-decoration:underline;text-underline-offset:4px}
.home-guide .guide-case-link{color:#527080}
@media(min-width:1000px){
 .portfolio-home .home-hero .hero-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.61fr);column-gap:20px;grid-template-rows:repeat(4,max-content);min-height:0}
 .home-hero .hero-copy>.overline{grid-column:1;grid-row:1;align-self:start;font-size:9px}
 .portfolio-home .home-hero h1{grid-column:1;grid-row:2;font-size:clamp(38px,3.35vw,58px);margin:18px 0 16px;line-height:1.06}
 .home-hero .hero-text{grid-column:1;grid-row:3;font-size:15px;line-height:1.55}
 .home-hero .hero-actions{grid-column:1;grid-row:4;display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:24px}
 .portfolio-home .home-hero .home-guide{grid-column:2;grid-row:1/5;display:flex;flex-direction:column;align-items:stretch;align-self:start;gap:12px;margin:0;max-width:none}
 .home-hero .home-guide img{width:100%;height:clamp(230px,20vw,320px)}
 .home-hero .home-guide span{font-size:9px;line-height:1.4;letter-spacing:.06em}
 .home-hero .home-guide p{font-size:14px;line-height:1.5;margin:9px 0 3px;font-weight:450}
 .home-hero .home-guide button{font-size:12px;min-height:44px;text-align:left}
 .home-guide .guide-case-link{font-size:11px;padding:6px 0}
}
@media(min-width:761px) and (max-width:999px){.home-hero .home-guide{align-items:stretch}.home-hero .home-guide img{height:190px}}
@media(max-width:760px){
 .portfolio-home .home-hero .home-guide{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;align-items:center;margin:0 0 14px;max-width:100%;width:100%}
 .home-hero .home-guide img{width:90px;height:140px}
 .home-hero .home-guide>div{padding-left:12px}
 .home-hero .home-guide span{display:block;font-size:9px;letter-spacing:.04em;line-height:1.4;margin-bottom:8px}
 .home-hero .home-guide p{font-size:12px;font-weight:450;line-height:1.45;margin-bottom:4px}
 .home-hero .home-guide button{font-size:12px;min-height:36px}
 .home-guide .guide-case-link{display:block;font-size:10px;padding:6px 0}
}
@media(min-width:761px) and (max-width:999px) and (max-height:500px){.portfolio-home .home-hero .home-guide{flex-direction:row;gap:12px}.home-hero .home-guide img{width:68px;height:112px;flex:none}.home-hero .home-guide p{font-size:12px}.home-guide .guide-case-link{display:none}}
.website-detail .website-projects.single-project{grid-auto-columns:100%}
.website-project.character-project>img{object-fit:contain;height:300px;padding:16px;border:0;background:rgba(225,238,246,.5)}
.character-project .website-project-body{justify-content:center}
.character-project .project-actions{flex:0;margin-top:4px}
@media(min-width:641px){.single-project .character-project{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1fr)}.single-project .character-project>img{height:340px;width:100%;aspect-ratio:auto}}
@media(max-width:640px){.website-project.character-project>img{height:230px}.character-detail .website-project-body{padding-top:12px}}
.home-direction-title::after{content:"";position:absolute;inset:0;z-index:1}
.home-direction:focus-within{outline:2px solid #396d80;outline-offset:2px}
.home-example{pointer-events:none}
.home-directions-footer>span{text-transform:none;letter-spacing:0;font-family:var(--font);font-size:12px;color:#587586}
@media(max-width:760px){.home-directions-footer{display:none}}
.service-detail-heading{position:sticky;top:0;z-index:3;background:rgba(241,248,252,.97);border-radius:8px;padding-block:2px}
/* A speech note belongs to the guide, while the person remains unframed. */
.home-guide>div{--guide-glass:rgba(235,246,252,.62);--guide-edge:rgba(134,165,184,.38);border:1px solid var(--guide-edge);border-radius:10px;background:var(--guide-glass);padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 24px rgba(44,73,91,.035);animation:guide-welcome .36s ease-out both}
.home-guide>div::before{width:12px;height:12px;top:-7px;left:calc(50% - 6px);background:var(--guide-glass);border-left:1px solid var(--guide-edge);border-top:1px solid var(--guide-edge);box-shadow:none;transform:rotate(45deg)}
.home-guide>div::after{content:"";position:absolute;right:11px;top:11px;width:3px;height:3px;background:#a8c0cf;box-shadow:4px 0 #d6e3eb,0 4px #d6e3eb;pointer-events:none}
.home-guide .guide-contact{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;font-size:12px;font-weight:650;color:#285268;text-decoration:underline;text-underline-offset:4px}
.home-guide .guide-contact:hover{color:#143d53}.home-guide .guide-contact:focus-visible{outline:2px solid #396d80;outline-offset:3px}
@keyframes guide-welcome{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.home-hero .home-guide>div{padding:12px}.home-guide>div::before{left:-7px;top:28px;transform:rotate(-45deg)}.home-hero .home-guide span{font-size:8px;padding-right:8px}.home-guide .guide-contact{font-size:11px;min-height:40px}}
@media(min-width:761px) and (max-width:999px) and (max-height:500px){.home-guide>div::before{left:-7px;top:28px;transform:rotate(-45deg)}}
@media(prefers-reduced-motion:reduce){.home-guide>div{animation:none}}
@media(min-width:1000px){
 .home-hero .home-guide>div{order:0}
 .home-hero .home-guide img{order:1;height:clamp(230px,18vw,290px)}
 .home-guide>div::before{top:auto;bottom:-7px;border:0;border-right:1px solid var(--guide-edge);border-bottom:1px solid var(--guide-edge)}
}
/* Portfolio-first navigation: one collection per discipline, shared card language. */
.character-case-header{max-width:760px;margin-bottom:18px}.character-case-header h3{font-size:clamp(22px,3vw,32px);line-height:1.2;letter-spacing:-.03em;margin:12px 0}.character-case-header p{font-size:14px;line-height:1.65;color:#506b7b}
.character-back{display:block;background:none;border:0;padding:6px 0 10px;color:#446c82;font:600 12px var(--font);cursor:pointer}.character-back[hidden]{display:none}.character-back:focus-visible{outline:2px solid #446c82;outline-offset:3px}.more-dialog:has([data-more-panel="visuals"]:not([hidden])) .more-dialog-heading small{display:none}.more-dialog:has([data-more-panel="visuals"]:not([hidden])) .more-dialog-heading h2{font-size:24px}.character-case-header h3{font-size:22px}.more-dialog-heading{position:sticky;top:0;z-index:4;background:rgba(239,247,251,.97);padding-block:4px}
.more-dialog .more-dialog-heading .character-back{width:auto;height:auto;min-height:36px;display:block;white-space:nowrap;padding:0 0 7px;font:600 12px/1.4 var(--font);border:0;border-radius:0;background:none;color:#446c82}.more-dialog .more-dialog-heading .character-back[hidden]{display:none}
@media(max-width:760px){.service-detail .service-switch{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 14px}.service-detail .service-switch button{min-height:40px;padding:7px 9px;font-size:10px;white-space:nowrap;flex:1}.more-dialog:has([data-more-panel="visuals"]:not([hidden])) .more-dialog-heading h2{font-size:22px;margin:4px 0 16px}.character-case-header h3{font-size:19px;margin:8px 0}}
.character-viewer{border:1px solid #bfd2dd;border-radius:16px;overflow:hidden;background:rgba(239,247,253,.87)}
.character-stage{height:420px;position:relative;background:radial-gradient(ellipse at 50% 45%,#fbfeff99,#c7dbe84d);isolation:isolate}
.character-stage::after{content:"";position:absolute;left:32%;right:32%;bottom:24px;height:16px;border-radius:50%;background:#416b821f;filter:blur(9px);z-index:-1}
.character-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;opacity:0;cursor:grab}.character-stage canvas:active{cursor:grabbing}.character-stage canvas:focus-visible{outline:2px solid #527c93;outline-offset:-4px}
.character-poster{display:block;width:100%;height:100%;object-fit:contain;padding:18px 0 62px;transition:opacity .2s}.character-start{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:2;font-size:13px;min-height:44px}.character-start:hover{transform:translateX(-50%)}
.character-viewer.is-loaded canvas{opacity:1}.character-viewer.is-loaded .character-poster{visibility:hidden}.character-viewer.is-loading .character-poster{opacity:.45}
.character-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid #c0d3de;background:#f8fcffbf}.character-toolbar[hidden]{display:none}.character-poses,.character-options{display:flex;gap:5px;flex-wrap:wrap}.character-toolbar button{min-height:42px;min-width:42px;border:1px solid #bcd0dd;border-radius:6px;background:#fff9;color:#355a6f;padding:8px 12px;font:500 12px var(--font);cursor:pointer}.character-toolbar button:hover{background:#e8f2f8}.character-toolbar button[aria-pressed=true]{background:#284c60;color:#fff;border-color:#284c60}.character-toolbar button:focus-visible{outline:2px solid #406d88;outline-offset:2px}
.character-viewer [role=status]{margin:10px 16px 0;font-size:12px;color:#3d5f72}.character-viewer [role=status]:empty{display:none}.character-hint{margin:10px 16px 14px;font-size:11px;color:#627d8b;line-height:1.5}.character-case-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px}.character-case-footer p{font-size:11px;line-height:1.5;max-width:340px;color:#627985}.character-case-footer .btn{font-size:12px;white-space:nowrap}
@media(max-width:640px){.character-stage{height:340px}.character-toolbar{gap:8px;padding:10px}.character-toolbar button{font-size:11px;padding:8px 10px;min-height:44px}.character-case-header p{font-size:12px}.character-case-footer{align-items:flex-start;flex-direction:column;gap:12px}.character-case-footer .btn{width:100%}.character-hint{font-size:10px}.character-case-header{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.character-poster{transition:none}}
.home-directions-heading .portfolio-intro{margin:7px 0 0;font-size:13px;line-height:1.4;color:#537080;letter-spacing:0}
.website-detail .service-examples>h3{font:10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#577787;margin:0 0 12px}
.website-projects.single-project .website-project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.website-projects.single-project .website-project>img{height:340px;aspect-ratio:auto;object-fit:contain}
.project-app-preview{display:flex;justify-content:center;gap:10px;align-items:center;min-height:300px;padding:24px 15px;overflow:hidden;background:linear-gradient(145deg,#dceaf1,#f3f9fc);border-right:1px solid #c4d5de}
.project-app-preview img{width:29%;max-height:275px;height:auto;object-fit:contain;border:1px solid #b7cbd8;border-radius:9px;box-shadow:0 12px 25px #34556a17}
.project-app-preview img:nth-child(2){transform:translateY(-9px)}
.project-system-preview{min-height:280px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;padding:32px;background:radial-gradient(circle at 80% 20%,#355d70,#173444);color:#eef7ff;position:relative}
.project-system-preview::before{content:"";position:absolute;right:24px;top:24px;width:5px;height:5px;background:#afccdd;box-shadow:8px 0 #6e97ae,0 8px #6e97ae}
.project-system-preview>span{font:11px var(--mono);letter-spacing:.12em;padding:7px 9px;border:1px solid #8aaabb66}
.project-system-preview small{font:10px/1.4 var(--mono);color:#b6cfdd}.project-system-preview strong{font-size:22px;line-height:1.5;font-weight:500;max-width:260px}
.website-projects.single-project .website-project-body{justify-content:center}.website-projects.single-project .project-actions{flex:0;margin-top:8px}
@media(min-width:1000px){.home-hero .hero-copy{align-content:center}.home-hero .hero-copy>.hero-text{margin-bottom:0}.home-directions-heading{margin-bottom:18px}.portfolio-home .home-hero{align-items:center}}
@media(max-width:640px){.website-projects.single-project .website-project{display:flex}.project-app-preview{min-height:0;height:220px;padding:20px 12px;border-right:0;border-bottom:1px solid #c4d5de}.project-app-preview img{width:auto;max-width:30%;height:180px}.project-system-preview{min-height:175px;padding:24px;gap:14px}.project-system-preview strong{font-size:19px;max-width:none}.website-projects.single-project .website-project>img{height:230px}.home-directions-heading .portfolio-intro{font-size:11px;margin-top:4px}}
/* Founder and greeting form a single composition beneath the spacious introduction. */
@media(min-width:1000px){
 .portfolio-home .home-hero{grid-template-columns:minmax(0,1fr) minmax(380px,1.03fr);gap:clamp(30px,4vw,64px);align-items:center}
 .portfolio-home .home-hero .hero-copy{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,max-content);align-content:center;column-gap:0}
 .portfolio-home .home-hero h1{font-size:clamp(42px,3.8vw,62px);line-height:1.06;margin:18px 0 18px;max-width:650px}
 .home-hero .hero-text{font-size:15px;line-height:1.6;max-width:540px}
 .portfolio-home .home-hero .home-guide{grid-column:1;grid-row:4;display:grid;grid-template-columns:minmax(160px,.82fr) minmax(0,1fr);align-items:center;gap:18px;margin-top:22px;width:100%;max-width:550px}
 .home-hero .home-guide img{order:0;grid-column:1;grid-row:1;height:clamp(260px,23vw,330px);width:100%}
 .home-hero .home-guide>div{order:1;grid-column:2;grid-row:1;padding:18px;max-width:285px;align-self:start;margin-top:24px}
 .home-hero .home-guide>div::before{top:32px;bottom:auto;left:-7px;transform:rotate(-45deg);border:0;border-left:1px solid var(--guide-edge);border-top:1px solid var(--guide-edge)}
 .home-hero .home-guide p{font-size:14px;line-height:1.6}
}
.character-stage{height:clamp(380px,55dvh,560px)}
.character-case-header{margin-bottom:12px}
.character-viewer{position:relative}.character-viewer.is-loading [data-character-status]{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);padding:12px 16px;margin:0;min-width:200px;text-align:center;background:rgba(247,252,255,.96);border:1px solid #bfd2dd;border-radius:8px;box-shadow:0 6px 20px #34556a15}
@media(max-width:640px){.character-stage{height:clamp(300px,48dvh,410px)}.character-toolbar{padding:10px}.character-case-footer{margin-top:12px}.character-case-footer p{max-width:none}}

/* Keep the model and its controls together on shorter desktop displays. */
@media(min-width:641px){.character-stage{height:clamp(260px,calc(100dvh - 400px),560px)}}

/* Readable type, restrained pixel accents; the existing composition stays intact. */
body{font-optical-sizing:auto}
h1,h2{letter-spacing:-.035em;line-height:1.12}
.portfolio-home .home-hero h1{font-weight:600;letter-spacing:-.035em;line-height:1.13}
.portfolio-home .home-hero h1 em{font-weight:500;color:#536c79}
.portfolio-home .home-hero .hero-text{font-size:16px;line-height:1.65;color:#3b5360;max-width:54ch}
.home-directions-heading h2{font-weight:600;letter-spacing:-.025em;line-height:1.2}
.home-directions-heading .portfolio-intro{font-size:13px;line-height:1.55;color:#466170;margin-top:8px}
.home-direction-title{font-size:18px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.home-direction p{font-size:13px;line-height:1.6;color:#465d69}
.home-direction-number,.home-example small{letter-spacing:.065em}
.home-hero .home-guide p{font-size:14px;line-height:1.6;color:#334e5d}
.nav nav{font-size:13px}
.service-detail h2,.more-dialog-heading h2{letter-spacing:-.025em;line-height:1.2}
.website-project h4{letter-spacing:-.02em;line-height:1.3}
@media(max-width:760px){.portfolio-home .home-hero .hero-text{font-size:15px;line-height:1.6}.home-hero .home-guide p{font-size:13px;line-height:1.55}.home-direction-title{font-size:16px}.home-direction p{font-size:12px;line-height:1.55}.home-directions-heading .portfolio-intro{font-size:12px}}

/* Lightweight silver iPhone 17 Pro presentation, based on Apple's 71.9 × 150 mm body.
   Original screenshots are contained in full, never stretched or cropped. */
.device-iphone{width:260px;aspect-ratio:71.9/150;position:relative;flex:none;box-sizing:border-box;padding:3%;border-radius:18% / 8.63%;background:linear-gradient(115deg,#fbfdff 0%,#9cabb5 14%,#e5edf2 35%,#b5c4cd 68%,#f8fcff 94%);border:1px solid #8a9ba7;box-shadow:inset 0 0 0 1px #f8fcff,0 14px 24px #24445726;container-type:inline-size}
.device-iphone::before,.device-iphone::after{content:"";position:absolute;width:3px;background:linear-gradient(90deg,#8697a3,#d8e3eb);border-radius:2px;z-index:-1}
.device-iphone::before{left:-3px;top:20%;height:16%;box-shadow:0 -18px 0 -1px #9babb5}.device-iphone::after{right:-3px;top:28%;height:13%}
.device-screen{height:100%;overflow:hidden;border-radius:16% / 7.7%;background:#0d171e;border:3px solid #10171c;display:grid;grid-template-rows:7% minmax(0,1fr) 3%;box-shadow:0 0 0 1px #2a353e}
.device-status{display:flex;align-items:center;justify-content:space-between;gap:8%;padding:0 7%;color:#edf4f9;font:600 4.5cqw/1 var(--font)}
.device-status b{font-weight:600}.device-status i{height:65%;width:32%;border-radius:20px;background:#020405;box-shadow:inset -5px 0 5px #111b26}.device-status svg{width:16%;height:auto}
.device-app{min-height:0;position:relative;overflow:hidden}
.device-iphone .device-app img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border:0;border-radius:0;box-shadow:none;margin:0;transform:none}
.device-home{position:relative}.device-home::after{content:"";position:absolute;left:32%;right:32%;top:38%;height:2px;border-radius:5px;background:#cdd7df}
.project-app-preview .device-iphone{width:30%;max-width:148px;padding:1%;box-shadow:0 12px 24px #24445720}
.project-app-preview .device-iphone:nth-child(2){transform:translateY(-12px)}
.project-app-preview .device-screen{border-width:2px}
.project-app-preview{padding:30px 18px;gap:10px}
.case-lead-preview>.device-iphone{width:210px;padding:6px}
.real-screen-device>.device-iphone{width:min(100%,286px);padding:7px;margin-inline:auto}
.real-screen-device figcaption{font:11px/1.5 var(--font);letter-spacing:0;color:#476373;margin-top:16px}
@media(max-width:760px){.case-lead-preview>.device-iphone{width:170px;padding:5px}.case-lead-preview{gap:20px}.real-screen-device>.device-iphone{width:min(100%,270px);padding:6px}.project-app-preview{height:auto;min-height:240px;padding:26px 16px}.project-app-preview .device-iphone{width:29%;max-width:130px;padding:1%}}
@media(prefers-reduced-motion:no-preference){.real-screen-device .device-app img{animation:screen-appear .25s ease-out}@keyframes screen-appear{from{opacity:.7}to{opacity:1}}}

.utility-page h1,.case-lead h1{letter-spacing:-.035em;line-height:1.12}.real-screens-copy h2{letter-spacing:-.025em}

@media(max-width:640px){.project-app-preview .device-iphone{width:160px;max-width:78%;padding:4px}.project-app-preview .device-iphone:nth-child(n+2){display:none}.project-app-preview{min-height:0;padding:24px 16px}}

/* Studio typography: service names first, a lighter personal line, one quiet pixel signature. */
.portfolio-home .home-hero .studio-headline{font-size:clamp(42px,3.9vw,62px);font-weight:650;letter-spacing:-.035em;line-height:1.16;color:#1d3744;margin-block:18px 22px}
.studio-headline .title-offer{display:block}
.studio-headline .title-join{font-weight:420;color:#547181}
.portfolio-home .home-hero .studio-headline em{position:relative;display:block;margin-top:.15em;font-size:.88em;font-weight:420;letter-spacing:-.025em;color:#4d6878;line-height:1.2}
.studio-headline .title-pixels{display:inline-block;position:relative;width:.2em;height:.2em;margin-left:.2em;vertical-align:.08em;background:#7f9caa;box-shadow:.25em 0 #bbced8,0 -.25em #bbced8}
.portfolio-home .home-hero .hero-text{max-width:44ch;font-size:16px;line-height:1.7;letter-spacing:0;color:#415b6a}
@media(min-width:1000px){.portfolio-home .home-hero .home-guide{margin-top:28px}.home-hero .home-guide img{height:clamp(250px,22vw,310px)}}
@media(min-width:761px) and (max-width:999px){.portfolio-home .home-hero .studio-headline{font-size:38px}}
@media(max-width:760px){.portfolio-home .home-hero .studio-headline{font-size:clamp(29px,8.8vw,48px);margin-block:12px 16px;letter-spacing:-.03em}.portfolio-home .home-hero .studio-headline em{font-size:.92em}.portfolio-home .home-hero .hero-text{font-size:14px;line-height:1.65;max-width:44ch;margin-bottom:4px}}

/* The greeting shares the aquarium glass, with opaque text above the moving scene. */
.home-guide>div::after{background:#819faf;box-shadow:4px 0 #c1d3df,0 4px #c1d3df}
.home-hero .home-guide p{color:#294657;font-weight:500;text-shadow:0 1px 1px rgba(247,252,255,.65)}
.home-guide .guide-contact{color:#244d63;text-decoration-thickness:1px;text-decoration-color:#8caabd;text-underline-offset:5px}
.home-guide .guide-contact:hover{text-decoration-color:currentColor}
@media(prefers-reduced-transparency:reduce){.home-guide>div{--guide-glass:rgba(240,248,252,.97)}}

/* Small pixel signatures frame the copy without changing its letterforms. */
.studio-headline .title-offer{position:relative;width:fit-content;max-width:100%}
.studio-headline .title-offer::before{content:"";position:absolute;right:0;top:-24px;width:56px;height:32px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 32' shape-rendering='crispEdges'%3E%3Cpath fill='%2367899e' d='M24 0h6v6h-6zM16 8h6v6h-6zM24 8h6v6h-6zM8 16h6v6H8zM16 16h6v6h-6zM0 24h6v6H0zM8 24h6v6H8z'/%3E%3Cpath fill='%239ebaca' d='M32 8h6v6h-6zM24 16h6v6h-6zM32 16h6v6h-6zM40 24h6v6h-6z'/%3E%3Cpath fill='%23c5d8e3' d='M40 16h6v6h-6zM48 24h6v6h-6z'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.studio-headline .title-pixels{width:.82em;height:.52em;margin-left:.22em;vertical-align:.02em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' shape-rendering='crispEdges'%3E%3Cpath fill='%237798ac' d='M0 16h6v6H0zM8 8h6v6H8zM16 0h6v6h-6z'/%3E%3Cpath fill='%23abc4d3' d='M8 16h6v6H8zM16 8h6v6h-6zM24 8h6v6h-6z'/%3E%3Cpath fill='%23d0e0e9' d='M24 16h6v6h-6zM32 16h6v6h-6z'/%3E%3C/svg%3E") center/100% 100% no-repeat;box-shadow:none;pointer-events:none}
.portfolio-home .home-hero .hero-text{position:relative;padding-left:17px}
.home-hero .hero-text::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;background:#8ca8b8;box-shadow:0 6px #c4d6df,6px 0 #c4d6df;pointer-events:none}
.home-guide>div::after{box-shadow:5px 0 #c1d3df,0 5px #c1d3df,5px 10px #d3e2ea,10px 10px #c1d3df}
/* Contact belongs to the greeting; the mobile dock keeps one navigation action. */
.home-guide .guide-contact{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:10px 0 3px;min-height:44px;border-top:1px solid rgba(133,166,185,.3);text-decoration:none;transition:color .2s ease}
.home-guide .guide-contact strong{font-size:13px;font-weight:650;line-height:1.4}
.home-guide .guide-contact b{font-size:18px;font-weight:400;transition:transform .2s ease}
.home-guide .guide-contact:hover b{transform:translate(2px,-2px)}
.home-guide .guide-contact-note{display:block;color:#4c6a7d;font:10px/1.5 var(--font);letter-spacing:.015em;margin-top:3px}
@media(max-width:760px){.app-bar{grid-template-columns:minmax(0,1fr)}.app-bar .app-menu-trigger{grid-template-columns:46px minmax(0,1fr) 20px}.app-menu-trigger::after{content:"↗";font-size:18px;color:#55778c}.home-guide .guide-contact{margin-top:10px}.home-guide .guide-contact strong{font-size:12px}.home-guide .guide-contact-note{font-size:9px}.studio-headline .title-offer::before{top:-19px;right:0;width:42px;height:24px}}
@media(prefers-reduced-motion:reduce){.home-guide .guide-contact,.home-guide .guide-contact b{transition:none}.home-guide .guide-contact:hover b{transform:none}}
/* Owner-only browser shortcut; access is verified by the separate protected server. */
.portfolio-home .hero-copy>.overline{display:block;font:600 12px/1.6 var(--font);letter-spacing:.04em;color:#365c73;max-width:46ch}
.portfolio-home .home-directions{background:rgba(235,245,251,.64)}
.portfolio-home .home-direction-list{gap:12px}
.portfolio-home .home-direction{grid-template-columns:minmax(0,1fr) 116px;gap:16px;padding:18px;background:rgba(251,254,255,.62);transition:background .2s,border-color .2s}
.portfolio-home .home-direction:hover{background:rgba(251,254,255,.85);border-color:#8baabd}
.portfolio-home .home-direction-number{display:block;font:9px/1.5 var(--mono);letter-spacing:.07em;color:#55778b;margin-bottom:10px}
.portfolio-home .home-direction-title{font-size:19px;line-height:1.35;margin:0}
.portfolio-home .home-direction p{display:block;margin:12px 0 0;font-size:13px;line-height:1.6;max-width:29ch}
.portfolio-home .focus-preview{min-width:0;display:flex;flex-direction:column;gap:7px;padding:0 0 0 14px;border-left:1px solid #b4cbd86b;border-top:0;justify-content:center}
.focus-preview img{width:100%;height:70px;object-fit:cover;object-position:top;border:1px solid #bacdd766;border-radius:4px;box-shadow:0 4px 12px #3659710a}
.focus-preview-app img{object-fit:contain;background:#ecf3f8}
.portfolio-home .focus-preview small{font:9px/1.45 var(--font);letter-spacing:0;text-transform:none;color:#587183}
.portfolio-home .focus-preview strong{font:600 10px/1.45 var(--font);color:#365a70}
.portfolio-support{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 2px 5px;margin-top:12px;border-top:1px solid #b4cbd880;color:#3d6178;text-decoration:none;min-height:64px}
.portfolio-support>span{display:grid;gap:4px}.portfolio-support small{font:9px/1.5 var(--mono);letter-spacing:.05em;color:#58768a}.portfolio-support strong{font-size:14px;font-weight:600}.portfolio-support>span>span{font-size:11px;line-height:1.5;color:#546f80}.portfolio-support>b{font-size:19px;font-weight:400;transition:transform .2s}.portfolio-support:hover>b{transform:translate(2px,-2px)}.portfolio-support:focus-visible{outline:2px solid #446c82;outline-offset:5px}
.expertise-intro{border-bottom:1px solid #acc3d180;padding:4px 0 20px;margin-bottom:20px}.expertise-intro>small{font:10px var(--mono);letter-spacing:.08em;color:#55758a}.expertise-intro h3{font-size:clamp(23px,3vw,31px);font-weight:600;line-height:1.2;letter-spacing:-.025em;max-width:25ch;margin:12px 0}.expertise-intro p{font-size:14px;line-height:1.7;color:#415f72;max-width:65ch;margin:12px 0 0}
@media(min-width:761px) and (max-width:999px){.portfolio-home .home-direction{grid-template-columns:minmax(0,1fr) 90px;padding:15px;gap:10px}.portfolio-home .home-direction-title{font-size:17px}.portfolio-home .home-direction p{font-size:12px}.portfolio-home .focus-preview{padding-left:10px}.portfolio-support>span{grid-template-columns:auto auto;column-gap:18px;align-items:baseline}.portfolio-support small{grid-column:1/-1}}
@media(max-width:760px){.portfolio-home .hero-copy>.overline{font-size:10px;letter-spacing:.035em;max-width:40ch}.portfolio-home .home-direction{grid-template-columns:minmax(0,1fr) 86px;gap:10px;padding:13px}.portfolio-home .home-direction-title{font-size:16px;min-height:0}.portfolio-home .home-direction-number{font-size:8px;margin-bottom:7px}.portfolio-home .home-direction p{font-size:12px;line-height:1.5;margin-top:8px}.portfolio-home .focus-preview{padding-left:10px}.focus-preview img{height:58px}.portfolio-home .focus-preview strong{font-size:9px}.portfolio-support{padding-top:14px;min-height:70px}.portfolio-support strong{font-size:13px}.expertise-intro p{font-size:13px}}
@media(max-width:360px){.portfolio-home .home-direction{grid-template-columns:minmax(0,1fr) 70px;padding:10px;gap:9px}.portfolio-home .home-direction-title{font-size:15px}.portfolio-home .home-direction .direction-icon{display:block;width:24px;height:24px}.portfolio-home .focus-preview{padding-left:8px}.portfolio-home .focus-preview strong{display:none}.portfolio-home .home-direction-number{font-size:7px}.portfolio-home .home-direction p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.portfolio-home .home-direction,.portfolio-support>b{transition:none}.portfolio-support:hover>b{transform:none}}
.owner-insights{display:inline-flex;align-items:center;gap:7px;border:1px solid #9fb8c8;background:#eef6fac9;color:#385b70;padding:9px 11px;border-radius:6px;font-size:10px;font-weight:600;min-height:36px}.owner-insights svg{width:16px;height:16px;fill:currentColor}.owner-insights:hover{background:#dcecf6}.analytics-choice{margin-top:18px;padding:12px 17px;border:1px solid #9fb8c8;background:#edf5fa;color:#35596e;border-radius:6px;font-size:12px}@media(max-width:650px){.owner-insights{padding:8px}.owner-insights span{display:none}.owner-insights svg{width:15px;height:15px}}
@media(max-width:650px){.owner-insights{min-width:42px;min-height:42px;justify-content:center}}

/* A typographic author signature framed by two quiet pixel corners. */
@font-face{font-family:'Studio Manrope';src:url('assets/manrope-variable.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
.portfolio-home{--display:'Studio Manrope',var(--font);--studio-deep:#203e53;--studio-blue:#42677f;--studio-edge:rgba(142,175,195,.48);--pixel-ink:#355d77;--pixel-mid:#7f9fb4;--pixel-light:#bed0dd;--pixel-paper:#eff7fb}
.portfolio-home .hero-copy>.studio-signature{display:block;position:relative;width:fit-content;max-width:100%;padding:10px 24px 10px 22px;margin:0 0 8px;border:0;background:transparent;color:var(--studio-deep);letter-spacing:0;text-transform:none;isolation:isolate}
.studio-signature::before{content:"";position:absolute;left:0;top:10px;width:3px;height:3px;background:#406b85;box-shadow:4px 0 #406b85,8px 0 #89aabe,0 4px #406b85,0 8px #89aabe;pointer-events:none}.studio-signature::after{content:"";position:absolute;right:2px;bottom:12px;width:3px;height:3px;background:#89aabe;box-shadow:-4px 0 #adc6d5,-8px 0 #cfdee7,0 -4px #adc6d5,0 -8px #cfdee7;pointer-events:none}

.signature-copy{min-width:0}
.studio-signature .signature-name{display:block;font:600 10px/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--studio-blue);margin-bottom:6px}
.studio-signature .signature-role{margin:0;font:650 clamp(18px,1.45vw,21px)/1.3 var(--display);letter-spacing:-.012em;text-shadow:0 1px 2px #f4f9fc;color:var(--studio-deep)}
.signature-role>span{display:block}
.signature-role>span:last-child{font-weight:500;color:var(--studio-blue)}

.portfolio-home .home-hero .studio-headline{font-family:var(--display);font-size:clamp(40px,3.75vw,60px);font-weight:650;font-kerning:normal;letter-spacing:-.045em;line-height:1.14;color:#1f3d4c;margin-block:22px 20px;text-shadow:0 1px 12px rgba(248,252,255,.7)}
.portfolio-home .studio-headline .title-join{font-weight:420;color:#557587}
.portfolio-home .home-hero .studio-headline em{font-family:var(--display);font-size:.88em;font-weight:500;letter-spacing:-.025em;line-height:1.22;margin-top:.2em;color:#355f7d}
.portfolio-home .home-hero .hero-text{font-size:15px;font-weight:400;line-height:1.7;letter-spacing:0;max-width:45ch;color:#415d6e}
.portfolio-home .home-directions-heading h2{font-family:var(--display);font-weight:650;letter-spacing:-.035em}
.portfolio-home .home-direction-title{font-family:var(--display);font-weight:650;letter-spacing:-.02em}
@media(min-width:761px) and (max-width:999px){.portfolio-home .home-hero .studio-headline{font-size:37px}.portfolio-home .hero-copy>.studio-signature{padding:8px 22px 8px 20px}.studio-signature .signature-role{font-size:17px}}
@media(max-width:760px){.portfolio-home .hero-copy>.studio-signature{padding:8px 22px 8px 20px;max-width:100%;margin-bottom:8px}.studio-signature .signature-role{font-size:17px;line-height:1.3}.studio-signature .signature-name{font-size:9px;letter-spacing:.1em;margin-bottom:5px}.portfolio-home .home-hero .studio-headline{font-size:clamp(28px,8.35vw,47px);margin-block:16px 16px;letter-spacing:-.04em;line-height:1.17}.portfolio-home .home-hero .studio-headline em{font-size:.94em;letter-spacing:-.025em;margin-top:.18em}.portfolio-home .home-hero .hero-text{font-size:14px;line-height:1.65}}
@media(max-width:360px){.portfolio-home .hero-copy>.studio-signature{padding:8px 20px 8px 18px}.studio-signature .signature-role{font-size:15px}.studio-signature .signature-name{font-size:8px}}

/* Genuine feedback belongs to its project category; no empty public section. */
.client-reviews{margin:24px 0;padding-top:20px;border-top:1px solid #aec4d178}
.client-reviews h3{font:600 17px/1.4 var(--font);color:#294b60;margin:0 0 14px}
.client-review-rail{display:flex;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#91abba transparent;overscroll-behavior-x:contain;padding:2px 2px 10px}
.client-review{position:relative;box-sizing:border-box;flex:0 0 100%;min-width:0;scroll-snap-align:start;margin:0;padding:24px;background:rgba(238,247,253,.85);border:1px solid #b0c7d580;border-radius:8px}
.client-review::before{content:"";position:absolute;right:20px;top:16px;width:4px;height:4px;background:#809fb3;box-shadow:-6px 6px #aac4d4,-12px 12px #c8dbe7}
.client-review blockquote{margin:0 18px 20px 0;font:500 clamp(15px,1.4vw,18px)/1.65 var(--font);color:#294858;overflow-wrap:anywhere}
.client-review figcaption{display:grid;gap:4px;border-top:1px solid #bdd0db7d;padding-top:14px;font-size:12px;line-height:1.6;color:#506d80}.client-review figcaption strong{font-weight:650;color:#294b60}.client-review figcaption a{width:fit-content;color:#315f7a;text-decoration:underline;text-underline-offset:3px}
.client-review-controls{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:8px}.client-review-controls span{font:11px var(--mono);min-width:42px;text-align:center;color:#526f82}.client-review-controls button{width:44px;height:44px;border:1px solid #a3bdcd;border-radius:6px;background:#eef6fac9;color:#31566d;font-size:20px;cursor:pointer}.client-review-controls button:disabled{opacity:.4;cursor:default}.client-review-controls button:hover:enabled{background:#dbeaf4}.client-review-rail:focus-visible,.client-review-controls button:focus-visible{outline:2px solid #3f6c87;outline-offset:3px}
@media(max-width:760px){.client-review{padding:18px}.client-review blockquote{font-size:14px;margin-right:12px}}
@media(prefers-reduced-transparency:reduce){.client-review{background:#eef6fa}}

/* Contact symbols echo the same precise geometry as the service icons. */
.contact-dialog-methods>a.contact-method{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:center;justify-content:start;text-align:left;min-height:80px;padding:16px}
.contact-method-icon{display:block;width:36px;height:36px;color:var(--pixel-ink);flex:none}.contact-method-copy{min-width:0}.contact-dialog-methods .contact-method-copy strong{display:block;margin-bottom:5px;font-size:15px;line-height:1.4;color:#294f67}.contact-dialog-methods .contact-method-copy span{display:block;font-size:11px;line-height:1.5;color:#4f6c80;overflow-wrap:anywhere}.contact-method:focus-visible{outline:2px solid #416d88;outline-offset:3px}
@media(max-width:760px){.contact-dialog-methods>a.contact-method{grid-template-columns:28px minmax(0,1fr);gap:12px;min-height:70px;padding:12px}.contact-method-icon{width:28px;height:28px}.contact-dialog-methods .contact-method-copy strong{font-size:13px;margin-bottom:3px}}

/* Filled pixel glyphs: a single grid and three ocean tones at every breakpoint. */
.pixel-icon{shape-rendering:crispEdges;overflow:visible;--pixel-ink:#355d77;--pixel-mid:#7f9fb4;--pixel-light:#bed0dd;--pixel-paper:#eff7fb}
.home-direction-title:hover .direction-label{transform:none}.home-direction-title:hover .direction-arrow{transform:translate(2px,-2px)}

/* Project approach: four clear stages, one focused panel, an explicit outcome. */
.process-intro{max-width:680px;margin:0 0 24px}.process-intro>small{font:10px/1.5 var(--mono);letter-spacing:.08em;color:#55768c}.process-intro h3{font-family:var(--display);font-size:clamp(24px,3vw,32px);font-weight:650;line-height:1.2;letter-spacing:-.025em;color:#244960;margin:10px 0 12px}.process-intro p{font-size:14px;line-height:1.7;color:#4a6679;margin:0;max-width:65ch}
.process-explorer{border:1px solid #a9c2d180;border-radius:8px;background:rgba(246,251,254,.55);overflow:hidden}.process-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #a9c2d180;background:rgba(227,239,248,.65)}.process-tabs button{position:relative;display:flex;align-items:center;gap:10px;min-height:64px;padding:14px 16px;border:0;border-right:1px solid #b4cad77d;background:transparent;color:#46677e;text-align:left;cursor:pointer}.process-tabs button:last-child{border-right:0}.process-tabs button>span{font:10px var(--mono);opacity:.8}.process-tabs button strong{font:600 13px/1.4 var(--font)}.process-tabs button[aria-selected="true"]{background:#355d77;color:#f0f7fb}.process-tabs button[aria-selected="true"]::after{content:"";position:absolute;right:8px;bottom:8px;width:3px;height:3px;background:#a9c5d8;box-shadow:-5px 0 #6f94ae,0 -5px #6f94ae}.process-tabs button:hover:not([aria-selected="true"]){background:#daeaf4}.process-tabs button:focus-visible{outline:2px solid #213e52;outline-offset:-4px;z-index:1}
.process-step{padding:24px;min-height:240px;box-sizing:border-box}.process-step[hidden]{display:none}.process-step h4{font-family:var(--display);font-size:23px;line-height:1.3;font-weight:600;letter-spacing:-.02em;color:#294d65;margin:0 0 12px;max-width:40ch}.process-step>p{font-size:14px;line-height:1.75;color:#476479;margin:0;max-width:65ch}.process-outcome{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;border-top:1px solid #b0c7d57d;margin-top:24px;padding-top:18px;align-items:baseline}.process-outcome>span{font:10px/1.5 var(--mono);color:#55768c}.process-outcome>strong{font:550 14px/1.65 var(--font);color:#294d65}.process-contact{display:flex;justify-content:flex-end;margin-top:20px}.process-step:focus-visible{outline:2px solid #416c87;outline-offset:-4px}
@media(max-width:760px){.process-intro{margin-bottom:18px}.process-intro h3{font-size:24px}.process-intro p,.process-step>p{font-size:13px}.process-tabs button{padding:12px 9px;gap:7px;min-height:56px}.process-tabs button strong{font-size:11px}.process-step{padding:18px;min-height:270px}.process-step h4{font-size:21px}.process-outcome{grid-template-columns:1fr;gap:7px;margin-top:20px;padding-top:14px}.process-outcome>strong{font-size:13px}.process-contact .btn{width:100%;justify-content:center}}
@media(max-width:440px){.process-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.process-tabs button{padding:12px;min-height:48px}.process-tabs button:nth-child(2){border-right:0}.process-tabs button:nth-child(-n+2){border-bottom:1px solid #b4cad77d}.process-tabs button strong{font-size:12px}.process-step{min-height:300px}}
@media(prefers-reduced-transparency:reduce){.process-explorer{background:#f3f9fc}.process-tabs{background:#e4f0f7}}

/* Homepage masthead: brand, a quiet pixel seam and one utility group. */
.portfolio-home .nav{height:80px;gap:24px;border-bottom-color:rgba(105,143,158,.18)}
.portfolio-home .nav .logo{flex-shrink:0;gap:10px}
.portfolio-home .logo::after{content:none}
.portfolio-home .header-current{position:relative;flex:1;height:1px;margin-inline:8px;background:linear-gradient(90deg,rgba(111,150,171,.24),rgba(111,150,171,.06));pointer-events:none}
.portfolio-home .header-current::before{content:"";position:absolute;left:0;top:-1px;width:3px;height:3px;background:#7899ad;box-shadow:5px 0 #b5cbd7,10px 0 #d7e4ec}
.portfolio-home .nav-right{flex-shrink:0;gap:4px;padding:3px;border:1px solid rgba(131,160,178,.3);border-radius:10px;background:rgba(242,248,252,.6);box-shadow:inset 0 1px rgba(255,255,255,.8)}
.portfolio-home .nav-right .motion-toggle{display:flex;align-items:center;justify-content:center;gap:10px;min-width:44px;width:auto;height:44px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--studio-deep,#355d77);font-size:0}
.portfolio-home .nav-right .motion-toggle::before{content:"";width:20px;height:20px;flex:0 0 20px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M4 3h3v1h1v12H7v1H4v-1H3V4h1zM13 3h3v1h1v12h-1v1h-3v-1h-1V4h1z'/%3E%3C/svg%3E") center/20px 20px no-repeat}
.portfolio-home .nav-right .motion-toggle[aria-pressed="true"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M5 2h2v2h3v2h3v2h2v4h-2v2h-3v2H7v2H5z'/%3E%3C/svg%3E")}
.portfolio-home .nav-right .motion-toggle::after{content:attr(data-motion-caption);font:600 12px/1.2 var(--font);letter-spacing:0}
.portfolio-home .nav-right .motion-toggle:hover,.portfolio-home .nav-right .motion-toggle[aria-pressed="true"]{background:rgba(209,226,237,.5);color:#274d65}
.portfolio-home .nav-right .motion-toggle:focus-visible,.portfolio-home .nav-right .owner-insights:focus-visible{outline:2px solid #396d80;outline-offset:2px}
.portfolio-home .nav-right .language-menu{padding-left:4px;border-left:1px solid rgba(131,160,178,.25)}
.portfolio-home .nav-right .language-menu summary{min-width:56px;border:0;border-radius:6px}
.portfolio-home .nav-right .language-menu[open] summary,.portfolio-home .nav-right .language-menu summary:hover{background:rgba(209,226,237,.5)}
.portfolio-home .nav-right .owner-insights{min-height:44px;border:0;background:transparent;box-shadow:none;border-radius:6px}
.portfolio-home .nav-right .owner-insights:hover{background:rgba(209,226,237,.5)}
.portfolio-home .nav-right .language-menu nav{border-radius:8px;box-shadow:0 8px 24px #294b5c16}
.portfolio-home .nav-right .language-menu a::after{content:none}
@media(max-width:1000px){.portfolio-home .nav{gap:16px}.portfolio-home .header-current{margin-inline:0}.portfolio-home .nav-right .owner-insights span{display:none}.portfolio-home .nav-right .owner-insights{justify-content:center;min-width:44px;padding:8px}}
@media(max-width:650px){.portfolio-home .nav{height:calc(72px + env(safe-area-inset-top));gap:12px}.portfolio-home .header-current{display:none}.portfolio-home .nav-right{gap:0;padding:2px;border-radius:8px}.portfolio-home .nav-right .motion-toggle{padding:0;width:44px}.portfolio-home .nav-right .motion-toggle::after{display:none}.portfolio-home .nav-right .language-menu{padding-left:0}.portfolio-home .nav-right .language-menu summary{min-width:48px;padding-inline:8px}.portfolio-home .nav .logo{gap:8px}.portfolio-home .nav .logo-mark{width:34px;height:34px}}
@media(max-width:360px){.portfolio-home .nav{padding-inline:max(16px,env(safe-area-inset-left));gap:8px}.portfolio-home .nav .logo{gap:6px}.portfolio-home .nav .studio-wordmark strong{font-size:12px}.portfolio-home .nav .studio-wordmark small{font-size:7px}.portfolio-home .nav .logo-mark{width:30px;height:32px}}

/* Selected work heading and optically aligned pixel category marks. */
.owner-insights .owner-insights-short{display:none}
.owner-insights .owner-chart-glint{fill:#7a9bb1}
.portfolio-home .nav-right .owner-insights{color:#315773;background:rgba(216,233,244,.55);box-shadow:inset 0 0 0 1px rgba(116,151,173,.25)}
@media(max-width:1000px){
  .portfolio-home .nav-right .owner-insights{width:44px;height:44px;min-width:44px;padding:4px 2px;flex-direction:column;gap:3px;flex-shrink:0}
  .portfolio-home .nav-right .owner-insights svg{width:18px;height:18px;flex:none}
  .portfolio-home .nav-right .owner-insights .owner-insights-short{display:block;font:650 9px/1 var(--font);letter-spacing:0;white-space:nowrap}
}

.portfolio-home .home-directions-heading{position:relative;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid rgba(125,158,177,.25)}
.portfolio-home .home-directions-heading::after{content:"";position:absolute;left:0;bottom:-2px;width:20px;height:3px;background:#6e91a8;box-shadow:24px 0 #a6c0d0,48px 0 #d1e0e9;pointer-events:none}
.portfolio-home .home-directions-heading .overline{display:flex;align-items:center;gap:8px;color:#55758a;letter-spacing:.09em}
.portfolio-home .home-directions-heading h2{font-size:clamp(25px,2.4vw,32px);line-height:1.15;letter-spacing:-.04em;font-weight:650;color:#294b60;margin-top:10px}
.portfolio-home .home-directions-heading .portfolio-intro{max-width:40ch;margin-top:8px;color:#526d7e}
.portfolio-home .home-direction .direction-icon{width:36px;height:36px;flex:0 0 36px;filter:none;color:#355d77}
.portfolio-home .home-direction-title{align-items:center;gap:10px}
@media(max-width:760px){.portfolio-home .home-directions-heading{padding-bottom:14px;margin-bottom:16px}.portfolio-home .home-directions-heading h2{font-size:25px}.portfolio-home .home-direction .direction-icon{width:32px;height:32px;flex-basis:32px}.portfolio-home .home-direction-title{gap:8px}}
@media(max-width:360px){.portfolio-home .home-direction .direction-icon{width:28px;height:28px;flex-basis:28px}.portfolio-home .home-directions-heading h2{font-size:23px}}

/* Collection windows: the homepage pixel language continues into the work. */
#service-detail{--collection-ink:#355d77;--collection-line:#b9cedb;border-radius:14px;background:#f1f8fc;padding:24px;max-height:calc(100dvh - 40px)}
#service-detail .service-detail-heading{padding:0 0 12px;border-bottom:1px solid var(--collection-line);border-radius:0;background:#f1f8fc;gap:16px}
#service-detail .service-detail-heading>span{position:relative;padding-left:16px;font:10px/1.4 var(--mono);letter-spacing:.09em;color:#506f83}
#service-detail .service-detail-heading>span::before{content:"";position:absolute;left:0;top:3px;width:3px;height:3px;background:#668ba4;box-shadow:5px 0 #9fbccd,0 5px #9fbccd}
#service-detail .service-detail-heading button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--collection-line);border-radius:7px;background:rgba(249,253,255,.65);color:var(--collection-ink)}
.collection-icon{width:20px;height:20px;flex:0 0 20px;display:block;pointer-events:none;color:inherit}
#service-detail .service-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:16px 0 20px;padding:4px;background:rgba(223,235,244,.55);border:1px solid var(--collection-line);border-radius:9px}
#service-detail .service-switch button{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:48px;padding:8px 12px;border:1px solid transparent;border-radius:5px;color:#42667e;background:transparent;font:600 13px/1.3 var(--font);transition:background .16s,color .16s,border-color .16s}
#service-detail .service-switch .collection-icon{width:26px;height:26px;flex-basis:26px}
#service-detail .service-switch button[aria-pressed="true"]{color:#244b65;background:#f5faff;border-color:#9fbdcf;box-shadow:0 2px 5px #355d7708}
#service-detail .service-switch button[aria-pressed="true"]::after{content:"";position:absolute;bottom:3px;right:3px;width:3px;height:3px;background:#7296ae;box-shadow:-4px 0 #b7cddc,0 -4px #b7cddc}
#service-detail .service-switch button:hover{background:rgba(247,252,255,.8)}
#service-detail h2{font-family:var(--display);font-size:32px;line-height:1.2;letter-spacing:-.035em;font-weight:650;color:#294b60;margin:0 0 10px}
#service-detail>[data-detail-intro]{max-width:76ch;font-size:14px;line-height:1.65;color:#4c687a;margin:0 0 22px}
#service-detail .collection-gallery-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;min-height:44px}
#service-detail .collection-gallery-heading h3{font:10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#55768c;margin:0}
#service-detail .project-gallery-controls{gap:5px;margin:0;flex:0 0 auto}
#service-detail .project-gallery-controls>span{margin:0 10px 0 0;font-size:11px;min-width:42px;text-align:center;color:#43677e}
#service-detail .project-gallery-controls button{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;border:1px solid var(--collection-line);background:rgba(250,253,255,.72);color:var(--collection-ink)}
#service-detail .gallery-previous .collection-icon{transform:rotate(180deg)}
#service-detail .project-gallery-controls button:hover:not(:disabled),#service-detail .service-detail-heading button:hover{background:#dfedf6;border-color:#90b2c9}
#service-detail .project-gallery-controls button:disabled{opacity:.32}
#service-detail .service-examples{margin-top:0}
#service-detail .website-project{border:1px solid var(--collection-line);border-radius:9px;background:#fafdff}
.collection-browser{min-width:0;border-bottom:1px solid var(--collection-line);background:#e4eff6}
.collection-browser-bar{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(142,171,189,.22);background:rgba(238,246,251,.84)}
.collection-browser-bar i{width:3px;height:3px;background:#7c9caf;box-shadow:6px 0 #a4bece,12px 0 #c8dbe6}
.collection-browser-bar span{font:8px/1 var(--mono);letter-spacing:.06em;color:#57798e}
.collection-browser>img{display:block;width:100%;height:190px;object-fit:cover;object-position:top;background:#edf4f8}
#service-detail .website-project-body{padding:18px;gap:10px}
#service-detail .project-status{display:flex;align-items:center;gap:7px;font:9px/1.4 var(--mono);color:#5a778b;letter-spacing:.04em}
#service-detail .project-status::before{content:"";width:4px;height:4px;flex:0 0 4px;background:#8aabbe}
#service-detail .website-project h4{font-family:var(--display);font-size:21px;line-height:1.3;font-weight:650;letter-spacing:-.025em;color:#294b60}
#service-detail .website-project p{font-size:13px;line-height:1.65;color:#4b687c}
#service-detail .project-tags{gap:5px}
#service-detail .project-tags span{border:1px solid rgba(155,185,204,.35);background:#eaf3f980;color:#4a6c83;font:10px/1.4 var(--font);padding:4px 7px;border-radius:4px}
#service-detail .project-actions{gap:8px;padding-top:14px;border-top:1px solid var(--collection-line)}
#service-detail .project-actions a{gap:8px;white-space:normal;text-align:left;line-height:1.4;min-height:44px;padding:10px 12px;font-weight:600;font-size:12px;border-radius:6px;background:transparent;color:#355d77;border-color:#a7c1d1;transition:background .16s,color .16s,border-color .16s}
#service-detail .project-actions .project-action-case{background:#355d77;color:#f5faff;border-color:#355d77}
#service-detail .project-actions .project-action-live{background:#edf5fa;color:#294b60;border-color:#91afc2}
#service-detail .project-actions .project-action-case:hover{background:#294c65;border-color:#294c65}
#service-detail .project-actions .project-action-live:hover{background:#e0eef7;border-color:#759ab3}
#service-detail .project-actions .collection-icon{width:18px;height:18px;flex-basis:18px}
#service-detail .website-project p.project-note{font-size:11px;line-height:1.55;color:#58768a}
#service-detail .service-detail-actions{justify-content:flex-end;margin-top:18px}
#service-detail [data-detail-contact]{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:#355d77;color:#f5faff;border:1px solid #355d77;border-radius:6px;font-size:12px;font-weight:600;padding:12px 18px}
#service-detail [data-detail-contact]:hover{background:#294c65}
#service-detail :is(.service-switch button,.service-detail-heading button,[data-detail-contact]):focus-visible{outline:2px solid #355d77;outline-offset:3px}
@media(min-width:1000px){#service-detail.website-detail{max-width:1100px!important;width:calc(100% - 64px);padding:24px}}
@media(max-width:760px){#service-detail{padding:18px;max-height:calc(100dvh - 24px)}#service-detail h2{font-size:27px}#service-detail .service-switch{margin:14px 0 18px}#service-detail .service-switch button{flex-direction:column;gap:5px;min-height:62px;padding:7px 5px;font-size:11px}#service-detail .service-switch .collection-icon{width:24px;height:24px;flex-basis:24px}#service-detail>[data-detail-intro]{font-size:13px;margin-bottom:16px}#service-detail .website-project-body{padding:14px}#service-detail .website-project h4{font-size:19px}}
@media(max-width:480px){#service-detail{width:calc(100% - 20px);padding:14px;border-radius:10px}#service-detail .service-detail-heading>span{font-size:9px}#service-detail .collection-gallery-heading h3{font-size:9px;min-width:0}#service-detail .project-gallery-controls>span{margin-right:4px;font-size:10px;min-width:36px}#service-detail .project-gallery-controls button{width:44px;height:44px}#service-detail .project-actions a{flex:1 1 100%;justify-content:center}#service-detail .website-project p{font-size:12px}.collection-browser>img{height:auto;aspect-ratio:16/10;object-fit:contain}#service-detail h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){#service-detail .service-switch button,#service-detail .project-actions a{transition:none}}

/* Natural card flow tolerates badges, translations and long notes without overlap. */
#service-detail .service-detail-heading{box-shadow:0 -24px 0 #f1f8fc}
#service-detail .website-collection .project-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-top:0;align-self:start}
#service-detail .website-collection .project-actions a{min-width:0;justify-content:center;white-space:nowrap;height:44px;padding:8px 10px;gap:7px}
#service-detail .website-collection .website-project{display:flex;flex-direction:column;min-width:0}
#service-detail .website-collection .website-project-body{display:flex;flex:1;flex-direction:column;gap:12px;min-width:0}
#service-detail .website-collection .website-project-body>*{min-width:0;flex-shrink:0}
#service-detail .website-collection .project-actions{margin-top:auto}
#service-detail .website-collection .project-note{margin:0;padding-top:2px}
@media(max-width:480px),(min-width:641px) and (max-width:999px){#service-detail .website-collection .project-actions{grid-template-columns:1fr}}

/* A visible, category-specific offer leads into the evidence. */
#service-detail .service-offer{position:relative;margin:0 0 20px;padding:14px 16px 16px;border:1px solid var(--collection-line);border-radius:7px;background:rgba(236,246,252,.62)}
#service-detail .service-offer[hidden]{display:none}
#service-detail .service-offer::before{content:"";position:absolute;left:-1px;top:-1px;width:3px;height:3px;background:#668ba4;box-shadow:4px 0 #97b8cc,0 4px #97b8cc}
#service-detail .service-offer h3{font:10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#55768c;margin:0 0 12px}
#service-detail .service-offer ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:0;margin:0;padding:0}
#service-detail .service-offer li{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:0 16px;border:0;border-right:1px solid var(--collection-line);background:transparent}
#service-detail .service-offer li:first-child{padding-left:0}
#service-detail .service-offer li:last-child{padding-right:0;border-right:0}
#service-detail .service-offer li>div{min-width:0}
#service-detail .service-offer .collection-icon{margin-top:1px;color:#507b97;width:20px;height:20px;flex-basis:20px}
#service-detail .service-offer h4{font:650 14px/1.4 var(--display);letter-spacing:-.015em;color:#294b60;margin:0 0 5px}
#service-detail .service-offer p{font:12px/1.6 var(--font);color:#4b687c;margin:0}
@media(max-width:760px){
  #service-detail .service-offer{padding:12px;margin-bottom:14px}
  #service-detail .service-offer h3{font-size:9px;margin-bottom:10px}
  #service-detail .service-offer ul{grid-template-columns:1fr;gap:10px}
  #service-detail .service-offer li{padding:0 0 10px;border-right:0;border-bottom:1px solid var(--collection-line);gap:10px}
  #service-detail .service-offer li:last-child{padding-bottom:0;border-bottom:0}
  #service-detail .service-offer h4{font-size:13px;margin-bottom:3px}
  #service-detail .service-offer p{font-size:12px;line-height:1.5}
}

/* Consistent glass surfaces and controls throughout the portfolio windows. */
.portfolio-home :is(#app-panel,#contact-dialog,#guide-dialog,#more-dialog){--window-ink:#355d77;--window-line:rgba(126,160,181,.34);border:1px solid var(--window-line);border-radius:14px;background:rgba(241,248,252,.95);padding:24px;color:#294b60;overscroll-behavior:contain}
.portfolio-home :is(.app-panel-heading,.contact-dialog-heading,.guide-dialog-heading,.more-dialog-heading){gap:16px;padding:0 0 16px;border-bottom:1px solid var(--window-line);text-shadow:none}
.portfolio-home :is(.app-panel-heading,.contact-dialog-heading,.guide-dialog-heading,.more-dialog-heading)>div{min-width:0}
.portfolio-home :is(.app-panel-heading,.contact-dialog-heading,.guide-dialog-heading,.more-dialog-heading) h2{font:650 28px/1.25 var(--display);letter-spacing:-.03em;color:#294b60;margin:8px 0}
.portfolio-home :is(.app-panel-heading,.contact-dialog-heading,.guide-dialog-heading,.more-dialog-heading) small{font:9px/1.5 var(--mono);letter-spacing:.07em;color:#55768c}
.portfolio-home :is([data-app-close],[data-contact-close],[data-guide-close],[data-more-close]){display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--window-line);border-radius:7px;background:rgba(249,253,255,.65);color:var(--window-ink)}
.portfolio-home :is([data-app-close],[data-contact-close],[data-guide-close],[data-more-close]):hover{background:#dfedf6;border-color:#90b2c9}
.portfolio-home dialog :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid #355d77;outline-offset:3px}
.portfolio-home :is(.app-card,.guide-choices>button,.app-contact-list>a){border:1px solid var(--window-line);border-radius:7px;color:#355d77;background:rgba(250,253,255,.72);text-shadow:none}
.portfolio-home .guide-choices>button{grid-template-columns:24px minmax(0,1fr) 18px;gap:4px 10px;padding:12px;min-height:64px}
.portfolio-home .guide-choices>button>.collection-icon{grid-row:1 / 3;align-self:center;width:24px;height:24px}
.portfolio-home .guide-choices>button strong,.portfolio-home .guide-choices>button span{grid-column:2;min-width:0}
.portfolio-home .guide-choices>button strong{font:600 13px/1.4 var(--display)}
.portfolio-home .guide-choices>button b{grid-column:3;grid-row:1 / 3}
.portfolio-home .guide-choices>button b .collection-icon{width:18px;height:18px}
.portfolio-home .app-card{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;gap:12px;align-items:start}
.portfolio-home .app-card>.collection-icon:first-child{width:28px;height:28px}
.portfolio-home .app-card>.collection-icon:last-child{width:18px;height:18px;align-self:center}
.app-card-copy{display:grid;gap:7px;min-width:0}
.portfolio-home .app-contact-list>a{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 14px}
.portfolio-home .app-contact-list>a>span{min-width:0}
.portfolio-home .app-contact-list>a.app-action-primary{background:#355d77;color:#f5faff;border-color:#355d77}
.portfolio-home .app-contact-list>a.app-action-primary svg{--pixel-paper:#355d77;--pixel-mid:#bfd8e8;--pixel-light:#dcecf6}
.portfolio-home :is(.guide-choices>button,.app-card,.app-contact-list>a):hover{background:#e5f1f9;border-color:#90b2c9}
.portfolio-home .app-contact-list>a.app-action-primary:hover{background:#294c65;color:#f5faff}
.portfolio-home .character-toolbar button{min-width:44px;min-height:44px}
.portfolio-home .carousel-controls button{display:grid;place-items:center;width:44px;height:44px}
.ui-arrow-back{transform:rotate(180deg)}
@media(max-width:760px){
  .portfolio-home :is(#app-panel,#contact-dialog,#guide-dialog,#more-dialog){padding:16px;width:calc(100% - 20px);max-height:calc(100dvh - 24px);border-radius:10px}
  .portfolio-home :is(.app-panel-heading,.contact-dialog-heading,.guide-dialog-heading,.more-dialog-heading) h2{font-size:24px}
  .portfolio-home .guide-choices>button{grid-template-columns:20px minmax(0,1fr) 16px;gap:4px 8px;padding:10px}
  .portfolio-home .guide-choices>button>.collection-icon{width:20px;height:20px}
  .portfolio-home .guide-dialog-body{grid-template-columns:56px minmax(0,1fr);gap:12px}
  .portfolio-home .guide-dialog-body>img{width:56px;height:112px}
  .portfolio-home .app-card-grid{grid-template-columns:1fr}
}
@media(max-width:360px){.portfolio-home .guide-dialog-body{grid-template-columns:44px minmax(0,1fr);gap:8px}.portfolio-home .guide-dialog-body>img{width:44px;height:100px}.portfolio-home .guide-choices>button strong{font-size:12px}}

/* One visible introduction and four concrete project stages. */
.studio-collaboration{padding-top:24px;padding-bottom:32px;scroll-margin-top:90px;background:linear-gradient(90deg,#f0f7fbf5,#f4f9fcf5)}
.collaboration-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:40px;padding-top:32px;border-top:1px solid var(--line)}
.collaboration-intro>small{font:9px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#56768a}
.collaboration-intro h2{font:600 clamp(27px,3vw,40px)/1.15 var(--display);letter-spacing:-.035em;margin:14px 0 18px;max-width:430px}
.collaboration-intro p{font-size:14px;line-height:1.7;color:#496476;margin-bottom:20px;max-width:440px}
.collaboration-intro .btn{background:#355d77;color:#fff;gap:24px;min-height:44px}
.studio-collaboration .process-explorer{margin:0;min-width:0;align-self:start}
.studio-collaboration .process-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.studio-collaboration .process-tabs button{min-width:0;min-height:64px;padding:10px 8px}
.studio-collaboration .process-tabs strong{font-size:12px;overflow-wrap:anywhere}
.studio-collaboration .process-step{min-height:218px;padding:22px}
.studio-collaboration .process-step h4{font-size:19px;line-height:1.3}
.collaboration-feedback{display:flex;justify-content:space-between;align-items:center;gap:12px 28px;margin-top:26px;padding:17px 0 0;border-top:1px dashed #b1c9d6;color:#496476}
.collaboration-feedback p{font-size:12px;line-height:1.7;margin:0}.collaboration-feedback strong{font-weight:500}
.collaboration-feedback a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:650;color:#294d65;text-decoration:underline;text-underline-offset:4px}
.collaboration-feedback>small{max-width:280px;font-size:11px;line-height:1.5}
.hero-trust-link{display:inline-flex;align-items:center;gap:12px;min-height:60px;max-width:100%;margin-top:16px;padding:10px 14px 10px 0;border-top:1px solid #b6cad5;border-bottom:1px solid #b6cad5;color:#31586c;text-decoration:none}
.hero-trust-link>svg{width:24px;height:24px;flex:none;shape-rendering:crispEdges}
.hero-trust-link>span{display:grid;gap:4px}.hero-trust-link strong{font-size:13px;line-height:1.4;font-weight:650}.hero-trust-link small{font:9px/1.5 var(--mono);color:#58798b}.hero-trust-link>b{font-size:20px;font-weight:400;margin-left:18px}
.hero-trust-link:hover{border-color:#355d77;color:#203f54}.hero-trust-link:focus-visible{outline:2px solid #355d77;outline-offset:5px}
.legacy-overview>summary{display:none!important}.legacy-overview:not([open]){display:none}
@media(max-width:760px){.collaboration-layout{grid-template-columns:1fr;gap:24px;padding-top:24px}.collaboration-intro h2{max-width:350px}.studio-collaboration .process-step{min-height:240px;padding:18px}.collaboration-feedback{align-items:flex-start;flex-direction:column;gap:2px}.collaboration-feedback>small{max-width:none}.hero-trust-link{margin-top:12px}.studio-collaboration{padding-bottom:24px}}
@media(max-width:360px){.studio-collaboration .process-tabs strong{font-size:10px}.studio-collaboration .process-tabs button{padding:8px 4px}.hero-trust-link>b{margin-left:0}.hero-trust-link strong{font-size:12px}}
@media(max-width:440px){.studio-collaboration .process-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-collaboration .process-tabs button{min-height:48px;padding:10px 12px}.studio-collaboration .process-tabs strong{font-size:12px}}

/* Website formats describe complexity, not a lower quality tier. */
.website-format-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.website-format-cards>button{display:grid;grid-template-columns:24px 1fr;gap:10px 12px;text-align:left;padding:18px;border:1px solid #b4cbd9;border-radius:6px;background:#edf5faf2;color:#294d65;min-width:0}
.website-format-cards>button[aria-pressed="true"]{border-color:#355d77;background:#dcecf6;box-shadow:inset 0 0 0 1px #355d77}
.website-format-cards>button:hover{background:#e3f0f8}.website-format-cards strong{font-size:16px;line-height:1.4}.website-format-cards>button>span{grid-column:1/-1;font-size:12px;line-height:1.65}.website-format-cards small{grid-column:1/-1;font:10px var(--mono);font-weight:600}
.website-format-footer{display:flex;align-items:center;gap:16px;margin-top:12px}.website-format-footer p{flex:1;font-size:11px;line-height:1.6;color:#4d6b7d;margin:0}.website-format-footer button{min-height:44px;flex:none;padding:9px 14px;background:transparent;border:1px solid #aac4d4;color:#294d65;border-radius:4px;font-size:12px}.website-format-footer button[aria-pressed="true"]{background:#355d77;color:#fff;border-color:#355d77}
.project-format{display:inline-flex;align-self:flex-start;padding:6px 9px;margin-bottom:10px;background:#dfedf6;color:#294d65;font:9px var(--mono)}
@media(max-width:600px){.website-format-cards{gap:8px}.website-format-cards>button{padding:12px;grid-template-columns:1fr;gap:8px}.website-format-cards strong{font-size:14px}.website-format-cards>button>span{font-size:11px}.website-format-footer{align-items:flex-start;gap:10px}.website-format-footer button{font-size:11px;padding:8px 10px}}
@media(max-width:350px){.website-format-cards{grid-template-columns:1fr}.website-format-cards>button{grid-template-columns:22px 1fr}.website-format-cards>button>span{font-size:12px}.website-format-footer{flex-direction:column}}
/* Feedback belongs to the pixel studio identity, with legible, opaque form surfaces. */
.hero-feedback-link{display:flex;align-items:center;gap:10px;min-height:44px;width:fit-content;margin-top:12px;color:#34566a;font-size:13px;text-decoration:none}.hero-feedback-link svg{width:21px;height:21px;flex:none}.hero-feedback-link b{font-weight:400;margin-left:10px}.hero-feedback-link:hover span{text-decoration:underline;text-underline-offset:4px}
.studio-feedback{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;padding-block:38px 50px;border-top:1px solid #a6c1d0;scroll-margin-top:100px}.feedback-intro{position:relative;padding-left:62px}.feedback-pixel{position:absolute;left:0;top:4px;display:grid;place-items:center;width:42px;height:42px;color:#426c81;background:#dcebf2;box-shadow:4px 4px 0 #a7c7d6}.feedback-pixel svg{width:28px;height:28px}.feedback-intro>small,.feedback-work>small{font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:.09em;color:#52768b}.studio-feedback h2{font-size:clamp(25px,2.4vw,36px);font-weight:600;line-height:1.18;margin:16px 0}.studio-feedback p{font-size:14px;line-height:1.8;color:#506b7b;max-width:550px}.feedback-open,.review-primary{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 18px;min-height:46px;background:#365f75;color:#fff;border:1px solid #365f75;border-radius:4px;font-family:inherit;font-weight:600;font-size:13px;line-height:1.4;cursor:pointer}.feedback-open:hover,.review-primary:hover{background:#254d63}.feedback-channel-note{display:block;font-size:11px;line-height:1.7;color:#607c8c;max-width:380px;margin-top:12px}.feedback-proof{padding:28px;border:1px solid #bad0db;background:linear-gradient(135deg,#f6fbfd,#e9f3f7);position:relative}.feedback-proof::after{content:'';position:absolute;right:10px;top:10px;width:5px;height:5px;background:#8bafc0;box-shadow:-9px 0 #bad1dc,0 9px #bad1dc}.feedback-proof h3{font-size:19px;line-height:1.4;font-weight:500;margin:0 0 12px}.feedback-proof p{font-size:13px}.feedback-work{border-top:1px solid #bfd1da;padding-top:16px;margin-top:20px}.feedback-work a{display:block;color:#31566c;font-size:13px;margin-top:8px;text-underline-offset:4px}.studio-review-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.studio-review{margin:0;padding:24px;background:#f8fcff;border:1px solid #bdd0dc}.studio-review blockquote{font-size:17px;line-height:1.7;margin:0 0 22px}.studio-review figcaption{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#5a7586}.studio-review figcaption strong{color:#284b61;font-size:14px}.studio-review a{color:#31566c;text-underline-offset:4px}
.review-dialog{width:min(620px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid #9ebaca;border-radius:10px;background:#f1f8fc;color:#243e50;box-shadow:0 24px 80px #102b4866;overflow:hidden}.review-dialog::backdrop{background:#18334980;backdrop-filter:blur(5px)}.review-dialog[open]{display:flex;flex-direction:column}.review-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:24px 28px 20px;border-bottom:1px solid #bfd1dc;flex:none;background:#edf6fb}.review-dialog-head small{font:10px/1.5 monospace;letter-spacing:.1em;color:#5b7b90}.review-dialog h2{font-size:25px;line-height:1.2;margin:8px 0 0}.review-close{width:44px;height:44px;flex:none;font-size:25px;color:#365b70;background:#fff;border:1px solid #b5ccd9;border-radius:4px;cursor:pointer}.review-dialog-scroll{overflow:auto;overscroll-behavior:contain;padding:22px 28px 28px}.review-form{display:grid;gap:18px}.review-form p,.review-prepared p{font-size:13px;line-height:1.7;color:#587184;margin:0 0 6px}.review-form>label:not(.review-consent),.review-form details>label{display:grid;gap:8px;font-size:13px;font-weight:500}.review-form input:not([type=checkbox]):not([type=radio]),.review-form textarea,.review-message{box-sizing:border-box;width:100%;min-width:0;border:1px solid #a7c1d1;background:#fff;color:#243e50;border-radius:4px;padding:12px;font:inherit;font-size:16px;line-height:1.5}.review-form input{min-height:46px}.review-form textarea{resize:vertical;min-height:112px}.review-form summary{font-size:12px;cursor:pointer;color:#42657c;min-height:36px;padding:8px 0}.review-form details>label{margin-top:14px}.review-form details>small{display:block;font-size:11px;line-height:1.6;color:#5a7587;margin-top:8px}.review-form fieldset{border:0;padding:0;margin:20px 0 0}.review-form legend{font-size:12px;margin-bottom:10px}.review-rating{display:flex;gap:8px}.review-rating label{display:block;position:relative;flex:1}.review-rating input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.review-rating span{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;background:#fff;border:1px solid #b4cbd8;border-radius:4px;font-size:14px}.review-rating b{font-weight:400;color:#64889c}.review-rating input:checked+span{color:#fff;background:#365f75;border-color:#365f75}.review-rating input:checked+span b{color:#fff}.review-consent{display:flex;align-items:flex-start;gap:11px;font-size:12px;line-height:1.7;color:#456376}.review-consent input{width:18px;min-height:18px;margin-top:3px;flex:none;accent-color:#365f75}.review-privacy{font-size:11px;line-height:1.7;color:#607b8c}.review-prepared h3{font-size:23px;line-height:1.3;margin:0 0 14px}.review-message{font-size:13px;background:#fff;resize:vertical;min-height:170px;margin:14px 0}.review-send-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.review-send-actions a,.review-send-actions button{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px;background:#365f75;color:#fff;border:1px solid #365f75;border-radius:4px;text-decoration:none;font:inherit;font-size:13px;cursor:pointer}.review-send-actions button{grid-column:1/-1;background:#e2eff6;color:#31566c;border-color:#aec7d7}.review-status{margin-top:14px!important}.review-edit{padding:12px 0;border:0;background:none;color:#365f75;font:inherit;font-size:13px;cursor:pointer;min-height:44px}.review-dialog [hidden],.studio-feedback [hidden]{display:none!important}.review-dialog :focus-visible,.feedback-open:focus-visible,.hero-feedback-link:focus-visible{outline:2px solid #366b89;outline-offset:4px}.review-rating input:focus-visible+span{outline:2px solid #366b89;outline-offset:3px}
@media(max-width:680px){.studio-feedback{grid-template-columns:1fr;gap:22px;padding-block:28px 36px}.feedback-intro{padding-left:0;padding-top:56px}.feedback-pixel{top:0}.feedback-proof{padding:22px}.studio-review-list{grid-template-columns:1fr}.review-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:8px}.review-dialog-head{padding:16px 18px}.review-dialog h2{font-size:22px}.review-dialog-scroll{padding:18px}.review-send-actions{grid-template-columns:1fr}.review-send-actions button{grid-column:auto}.review-rating{gap:6px}.feedback-open{width:100%;max-width:330px}}
@media(prefers-reduced-motion:reduce){.review-dialog{scroll-behavior:auto}}

.studio-feedback{background:#eff7fcf5}.review-form [name="feedback"]::placeholder{font-size:14px}

.review-honey{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.review-alternative{background:transparent;border:1px solid #a8c2d1;border-radius:4px;min-height:44px;padding:10px 14px;color:#31566c;font:inherit;font-size:12px;cursor:pointer}.review-submit-status:empty{display:none}.review-submit-status{margin:0!important;font-size:12px!important}.review-primary:disabled,.review-alternative:disabled{opacity:.6;cursor:wait}.review-success-mark{display:grid;place-items:center;width:46px;height:46px;background:#d8eaf3;color:#31566c;font-size:24px;margin-bottom:18px}.review-success h3{font-size:25px;line-height:1.3}.review-success p{font-size:14px;line-height:1.8;margin:16px 0 24px;color:#47677b}.review-privacy a{color:#31566c;text-underline-offset:3px}

/* Mobile editorial refinement: visible ocean, compact collaboration. */
@media(max-width:760px){
 .portfolio-home .ocean-glass{background:linear-gradient(100deg,rgba(249,252,253,.25),rgba(229,239,244,.10) 52%,rgba(247,251,253,.12))}
 .portfolio-home .hero-copy:before{inset:-12px -12px;background:radial-gradient(ellipse at 30% 45%,rgba(250,251,248,.68),rgba(250,251,248,.32) 55%,transparent 78%)}
 .studio-collaboration{background:transparent;padding-top:26px;padding-bottom:28px}
 .collaboration-layout{gap:22px;padding-top:0;border-top:0}
 .collaboration-intro{position:relative;border-left:2px solid #6f9db3;padding:2px 0 2px 18px}
 .collaboration-intro>small{font-size:9px;letter-spacing:.04em}
 .collaboration-intro h2{font-size:30px;line-height:1.13;margin:12px 0 14px;max-width:300px}
 .collaboration-intro p{font-size:13px;line-height:1.7;margin-bottom:18px}
 .collaboration-intro .btn{min-height:48px;padding:13px 18px;justify-content:space-between;width:100%;max-width:330px}
 .studio-collaboration .process-explorer{border:1px solid #b9cdd8;background:#f3f8fbed;box-shadow:0 12px 28px #274c6310}
 .studio-collaboration .process-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid #c3d4dd}
 .studio-collaboration .process-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:64px;padding:10px 8px;border:0;border-right:1px solid #d2dfe5;background:transparent}
 .studio-collaboration .process-tabs button:last-child{border-right:0}
 .studio-collaboration .process-tabs button[aria-selected=true]{background:#315b73;color:white}
 .studio-collaboration .process-tabs button[aria-selected=true] span{color:#d2e5ef}
 .studio-collaboration .process-tabs strong{font-size:10px;overflow-wrap:normal}
 .studio-collaboration .process-step{min-height:230px;padding:20px 18px;background:transparent;border:0}
 .studio-collaboration .process-step h4{font-size:19px;line-height:1.3;margin-bottom:12px}
 .studio-collaboration .process-step p{font-size:13px;line-height:1.7}
 .studio-collaboration .process-outcome{padding:14px 0 0;margin-top:18px;border-top:1px solid #c7d8e1}
 .collaboration-feedback{margin-top:18px;padding-top:14px;border-top:1px solid #c1d3dd;gap:6px}
 .collaboration-feedback a{min-height:44px}
}
@media(max-width:360px){.studio-collaboration .process-tabs button{padding:10px 5px}.studio-collaboration .process-tabs strong{font-size:9px}}
@media(max-width:760px){.collaboration-intro{background:linear-gradient(90deg,#f2f8fbf5,#f2f8fbd9);padding:18px;border-left:2px solid #6f9db3}.portfolio-home .hero-copy h1,.portfolio-home .hero-copy>p{text-shadow:0 0 7px #f6fafc,0 0 15px #f6fafc}}
/* A single pixel-studio workbench: introduction and process share one surface. */
.studio-collaboration{background:transparent}
.collaboration-layout{position:relative;gap:28px;padding:28px;border:1px solid #adc6d4;background:linear-gradient(125deg,#f2f8fbeb,#e7f1f7d9);box-shadow:8px 8px 0 #89adbf20}
.collaboration-layout:before{content:"";position:absolute;top:-5px;left:24px;width:8px;height:8px;background:#416c83;box-shadow:12px 0 #88adbf,24px 0 #bad1de}
.collaboration-intro{border:0;background:none;padding:0}
.collaboration-avatar{float:right;width:64px;height:94px;object-fit:contain;margin:0 0 12px 14px;image-rendering:pixelated}
.studio-feedback{background:transparent}
.feedback-intro{background:linear-gradient(90deg,#f2f8fbea,#f2f8fb70)}
@media(max-width:760px){
 .collaboration-layout{padding:20px 16px;gap:20px;box-shadow:5px 5px 0 #89adbf20}
 .collaboration-intro{padding:0;border:0;background:none}
 .collaboration-intro h2{font-size:28px;max-width:none}
 .collaboration-intro p{clear:both}
 .collaboration-avatar{width:56px;height:86px;margin-left:10px}
 .studio-collaboration .process-explorer{box-shadow:none;background:#f4f9fbcf}
 .feedback-proof{background:#f3f8fbdf}
}
/* Project showroom: one complete story, real screen, clear next steps. */
#service-detail .project-index{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0}
#service-detail .project-index[hidden]{display:none}
#service-detail .project-index button{min-height:42px;padding:8px 12px;border:1px solid #b9cedb;background:#edf5fa;color:#40647a;font:10px/1.4 var(--mono);cursor:pointer;border-radius:4px}
#service-detail .project-index button[aria-current=true]{background:#315b73;color:white;border-color:#315b73;box-shadow:3px 3px 0 #9ab9ca55}
#service-detail .project-index button:focus-visible{outline:2px solid #315b73;outline-offset:3px}
#service-detail .website-collection{grid-auto-columns:100%;gap:16px}
#service-detail .website-collection .website-project{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;overflow:hidden;border-radius:6px}
#service-detail .website-collection .website-project>img.portfolio-cover-image{height:100%;min-height:330px;max-height:570px;aspect-ratio:auto;object-fit:contain;border-bottom:0;background:#dce8f0}
#service-detail .website-collection .website-project-body{padding:24px;gap:12px;border-left:1px solid #bfd1dd;background:#f7fbfd}
#service-detail .website-collection .website-project h4{font-size:24px;line-height:1.15}
#service-detail .project-purpose{padding:13px 0;border-block:1px solid #d2e0e8;width:100%}
#service-detail .project-purpose strong{font-size:12px;color:#315b73}
#service-detail .project-purpose p{margin:6px 0 0;font-size:13px;line-height:1.55;color:#3e5e71}
#service-detail .website-collection .project-actions{grid-template-columns:1fr 1fr;margin-top:4px}
#service-detail .website-collection .project-action-live{background:#315b73;color:white;border-color:#315b73}
#service-detail .website-collection .project-action-case{background:transparent}
#service-detail .website-collection .project-note{font-size:10px;line-height:1.5;color:#647b89}
@media(max-width:760px){
 #service-detail .website-collection .website-project{display:flex;flex-direction:column}
 #service-detail .website-collection .website-project>img.portfolio-cover-image{height:auto;min-height:0;max-height:none;aspect-ratio:3/2;width:100%}
 #service-detail .website-collection .website-project-body{border-left:0;border-top:1px solid #bfd1dd;padding:18px;gap:10px}
 #service-detail .website-collection .website-project h4{font-size:21px}
 #service-detail .project-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 #service-detail .project-index button{font-size:8px;padding:8px 4px;overflow-wrap:anywhere}
 #service-detail .website-format-cards>button{padding:12px}
 #service-detail .website-format-cards>button>span{font-size:11px}
 #service-detail .website-collection .project-actions a{white-space:normal;font-size:11px}
}
.collaboration-avatar{width:80px;height:100px;object-fit:cover;object-position:center top;image-rendering:auto;background:#e2edf4;border:1px solid #b4cbd9;border-radius:4px;float:right;margin:0 0 16px 16px}
#service-detail .website-collection .project-action-case{color:#315b73;border-color:#6e94ac}
#service-detail .service-examples+.service-offer{margin-top:24px}
@media(max-width:760px){.collaboration-avatar{width:72px;height:90px;margin-left:12px}.collaboration-intro h2{font-size:27px}}
/* Portrait is an integrated, generously sized bust, not a framed thumbnail. */
.collaboration-portrait{float:right;position:relative;display:block;width:150px;height:210px;margin:-8px -8px 12px 16px;overflow:hidden;mask-image:linear-gradient(#000 87%,transparent);pointer-events:none}
.collaboration-portrait .collaboration-avatar{position:absolute;left:50%;top:0;transform:translateX(-50%);width:300px;height:auto;max-width:none;max-height:none;margin:0;float:none;border:0;border-radius:0;background:none;object-fit:contain;image-rendering:auto}
.collaboration-intro>p{clear:both}
@media(max-width:760px){.collaboration-portrait{width:132px;height:188px;margin:-6px -8px 10px 10px}.collaboration-portrait .collaboration-avatar{width:264px;height:auto}.collaboration-intro h2{font-size:28px;line-height:1.15}}
@media(max-width:360px){.collaboration-portrait{width:108px;height:158px;margin-left:8px}.collaboration-portrait .collaboration-avatar{width:216px}.collaboration-intro h2{font-size:25px}.collaboration-intro>small{font-size:8px}}

/* Explicit grid prevents translated headings wrapping around the portrait. */
.collaboration-intro{display:grid;grid-template-columns:minmax(0,1fr) 140px;grid-template-rows:auto auto 1fr auto;column-gap:16px;align-items:start}
.collaboration-intro>small{grid-column:1/-1;grid-row:1}
.collaboration-intro h2{grid-column:1/-1;grid-row:2;max-width:none;margin:10px 0 20px}
.collaboration-portrait{grid-column:2;grid-row:3;float:none;width:140px;height:200px;margin:0;align-self:end}
.collaboration-portrait .collaboration-avatar{width:280px}
.collaboration-intro>p{grid-column:1;grid-row:3;clear:none;font-size:14px;line-height:1.75;margin:8px 0 16px}
.collaboration-intro>.btn{grid-column:1/-1;grid-row:4;margin-top:12px}
@media(max-width:760px){.collaboration-intro{grid-template-columns:minmax(0,1fr) 124px;column-gap:12px}.collaboration-portrait{width:124px;height:176px}.collaboration-portrait .collaboration-avatar{width:248px}.collaboration-intro h2{font-size:28px;margin:10px 0 14px}.collaboration-intro>p{font-size:13px;line-height:1.65;margin:6px 0 0}}
@media(max-width:360px){.collaboration-intro{grid-template-columns:minmax(0,1fr) 100px;column-gap:10px}.collaboration-portrait{width:100px;height:152px}.collaboration-portrait .collaboration-avatar{width:210px}.collaboration-intro>p{font-size:12px;line-height:1.6}.collaboration-intro h2{font-size:25px}}
/* Compact, always-visible format selector; projects remain the main content. */
#service-detail .service-offer:has(.website-format-chooser){padding:12px;margin:12px 0 16px}
#service-detail .service-offer:has(.website-format-chooser)>h3{margin:0 0 8px;font-size:9px}
#service-detail .website-format-cards{display:grid;grid-template-columns:.65fr 1fr 1fr;gap:6px}
#service-detail .website-format-cards>button{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;min-height:44px;border-radius:4px;font-size:12px;font-weight:600}
#service-detail .website-format-cards>button>span,#service-detail .website-format-cards>button>small{display:none}
#service-detail .website-format-cards strong{font-size:12px}
#service-detail .website-format-cards .collection-icon{width:17px;height:17px;flex-basis:17px}
#service-detail .website-format-footer{margin-top:8px}
#service-detail .website-format-footer p{font-size:11px;line-height:1.5}
#service-detail .website-format-cards>button[aria-pressed=true]{background:#315b73;color:#fff;border-color:#315b73}
@media(max-width:480px){#service-detail .service-switch{margin:8px 0 14px}#service-detail>[data-detail-intro]{font-size:12px;margin-bottom:12px}#service-detail .website-format-footer p{font-size:10px}#service-detail .project-index{margin-bottom:8px}}
/* Fit the frame to each real cover, instead of letterboxing the cover in a tall panel. */
#service-detail .website-collection{grid-auto-columns:calc((100% - 16px)/2);align-items:start}
#service-detail .website-collection .website-project{display:flex;flex-direction:column;align-self:start;border-radius:6px;background:#f7fbfd}
#service-detail .website-collection .website-project>img.portfolio-cover-image{display:block;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain;align-self:start;border:0;background:transparent}
#service-detail .website-collection .website-project-body{border-left:0;border-top:1px solid #bfd1dd;padding:20px;gap:10px;flex:none}
#service-detail .website-collection .website-project h4{font-size:21px}
#service-detail .website-collection .project-actions{margin-top:4px}
#service-detail .website-collection.single-project{grid-auto-columns:100%;max-width:760px;margin-inline:auto}
#service-detail .website-collection .project-format{position:relative;padding-left:14px}
#service-detail .website-collection .project-format:before{content:'';position:absolute;left:5px;top:50%;width:4px;height:4px;transform:translateY(-50%);background:#5d889f}
@media(max-width:760px){#service-detail .website-collection{grid-auto-columns:100%}#service-detail .website-collection .website-project-body{padding:16px}#service-detail .website-collection .website-project>img.portfolio-cover-image{height:auto;aspect-ratio:auto;min-height:0;max-height:none}}
.portfolio-case-cover img{height:auto;aspect-ratio:auto}
/* A light personal invitation, aligned with the studio's pixel navigation. */
.hero-trust-link{position:relative;display:flex;width:fit-content;max-width:100%;gap:12px;padding:10px 12px 10px 0;margin-top:14px;border:0;background:transparent;min-height:64px}
.hero-trust-link>svg{width:38px;height:38px;padding:9px;background:#e1edf4;border:1px solid #b7cfdd;box-shadow:3px 3px 0 #8aafc333;flex:none}
.hero-trust-link strong{font-size:15px;letter-spacing:-.02em;color:#2c5269}.hero-trust-link small{font:10px/1.5 var(--font);letter-spacing:0;color:#57788b}
.hero-trust-link>b{display:grid;place-items:center;width:30px;height:30px;margin-left:8px;font-size:19px;color:#406d87;transition:transform .18s}
.hero-trust-link:hover>b{transform:translate(2px,2px)}.hero-trust-link:hover strong{text-decoration:underline;text-underline-offset:4px}
.hero-feedback-link{margin-top:2px;gap:12px;font-size:12px;padding-left:0}.hero-feedback-link>svg{width:38px;height:32px;padding:7px 9px;color:#6a8fa4}
@media(max-width:360px){.hero-trust-link{gap:10px;padding-right:0}.hero-trust-link strong{font-size:14px}.hero-trust-link small{font-size:9px}.hero-trust-link>b{margin-left:0;width:24px}}
@media(prefers-reduced-motion:reduce){.hero-trust-link>b{transition:none}}
/* Unified gallery rhythm: equal previews and cards without image distortion. */
#service-detail .website-collection{align-items:stretch}
#service-detail .website-collection .website-project{align-self:stretch;height:100%}
#service-detail .website-collection .website-project>img.portfolio-cover-image{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center top;flex:none;min-height:0;max-height:none}
#service-detail .website-collection .website-project-body{flex:1;display:flex;flex-direction:column}
#service-detail .website-collection .project-actions{margin-top:auto;padding-top:8px}
#service-detail .website-collection .project-note{min-height:60px}
@media(max-width:760px){#service-detail .website-collection .website-project>img.portfolio-cover-image{aspect-ratio:3/2;object-fit:cover;height:auto}#service-detail .website-collection .project-note{min-height:75px}}
#service-detail .website-collection .website-project>img.portfolio-cover-image{object-position:left top}
/* Ocean glass: retain the animated studio identity behind open windows. */
.portfolio-home dialog,#service-detail,.portfolio-home .review-dialog{background:rgba(239,247,252,.68);border-color:#a9c4d4;box-shadow:0 22px 65px #24445925,inset 0 1px 0 #ffffffc4;backdrop-filter:none}
.portfolio-home dialog::backdrop,.portfolio-home .review-dialog::backdrop{background:rgba(38,67,84,.07);backdrop-filter:none}
#service-detail .service-detail-heading,.review-dialog-head{background:rgba(239,247,252,.91)}
#service-detail .service-offer{background:rgba(238,247,252,.52)}
#service-detail .website-collection .website-project{background:transparent}
#service-detail .website-collection .website-project-body{background:rgba(247,251,253,.72)}
#service-detail .service-switch{background:rgba(221,235,244,.48)}
.portfolio-home dialog input,.portfolio-home dialog textarea,.portfolio-home dialog select{background:rgba(250,253,255,.96)}
.portfolio-home dialog h2,.portfolio-home dialog h3,.portfolio-home dialog h4{color:#294b60}
.portfolio-home dialog p,.portfolio-home dialog label{text-shadow:0 1px 2px #f6fbff70}
@media(prefers-reduced-transparency:reduce){.portfolio-home dialog,#service-detail,.portfolio-home .review-dialog{background:#f1f8fc}.portfolio-home dialog::backdrop{background:#b6c6d2cc}#service-detail .website-collection .website-project-body{background:#f7fbfd}}

/* Two distinct collections, with clear compact typography. */
#service-detail .website-format-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#service-detail .website-format-cards strong{font:600 14px/1.3 var(--font);letter-spacing:.01em}

.portfolio-home :is(#app-panel,#contact-dialog,#guide-dialog,#more-dialog){background:rgba(239,247,252,.76);backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){.portfolio-home :is(#app-panel,#contact-dialog,#guide-dialog,#more-dialog){background:#f1f8fc}}

#service-detail .website-collection .website-project[data-project-id='aurel']>img.portfolio-cover-image{object-fit:contain;object-position:center;background:#405951}

#service-detail .website-collection .website-project[data-project-id='apex']>img.portfolio-cover-image{object-fit:contain;object-position:center;background:#151515}