:root{--ink:#203f4d;--muted:#526570;--teal:#26786e;--mint:#4fd1c7;--paper:#fff;--soft:#f3f6f5;--line:#dce5e2;--yellow:#f6c052}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:110px}body{font-family:'Lato',Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}a{color:inherit;text-underline-offset:5px}a:hover{color:var(--teal)}a:focus-visible{outline:3px solid var(--teal);outline-offset:6px}::selection{background:#bceee7}.container{width:min(1160px,calc(100% - 64px));margin-inline:auto}.skip-link{position:fixed;top:-100px;left:20px;z-index:20;background:white;padding:12px}.skip-link:focus{top:12px}.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px}.logo{display:block;width:145px;height:auto}.header nav{display:flex;align-items:center;gap:30px;font-size:.9rem;font-weight:700}.header nav a{text-decoration:none}.nav-contact{border:1px solid var(--line);padding:10px 18px;border-radius:4px}.nav-contact span{margin-left:12px}.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:80px;align-items:center;padding-block:100px 110px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:900;color:var(--teal);margin-bottom:22px}h1,h2,h3{line-height:1.15;letter-spacing:-.035em}h1{font-size:clamp(2.7rem,4.4vw,4rem);max-width:690px;font-weight:900}h1 em{font-style:normal;color:var(--teal)}.hero-description{font-size:1.1rem;color:var(--muted);margin-top:28px;max-width:550px}.actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:32px}.button{display:inline-flex;gap:28px;padding:14px 23px;background:var(--ink);color:white;border-radius:4px;text-decoration:none;font-weight:700}.button:hover{background:var(--teal);color:white}.text-link{font-size:.9rem;font-weight:700}.text-link span{margin-left:10px}.hero-note{font-size:.78rem;color:var(--muted);margin-top:30px}.hero-aside{background:var(--ink);color:white;padding:34px;border-radius:6px;position:relative;border-top:4px solid var(--mint)}.aside-label{font-size:.9rem;color:#c8d9dc}.project-flow{list-style:none;margin-block:30px}.project-flow li{border-left:1px solid #75959e;padding:0 0 28px 22px;position:relative}.project-flow li:before{content:'';position:absolute;left:-5px;top:7px;width:9px;height:9px;background:var(--mint);border-radius:50%}.project-flow li:last-child{padding-bottom:0}.project-flow span{display:block;font-size:.73rem;color:#82dfd4;margin-bottom:8px}.project-flow strong{font-size:1.25rem;line-height:1.3;display:block}.aside-bottom{border-top:1px solid #55707c;padding-top:20px;font-size:.76rem;color:#c8d9dc}.section{padding-block:88px}.section-tinted{background:var(--soft)}h2{font-size:clamp(2rem,3.2vw,2.9rem);font-weight:900}.section-heading{max-width:660px;margin-bottom:46px}.section-heading>p:last-child{color:var(--muted);margin-top:20px;max-width:570px}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.service{border-top:1px solid #b9ceca;padding-top:20px}.service-number{font-size:.75rem;color:var(--teal)}h3{font-size:1.35rem}.service h3{margin-block:22px 16px}.service p{color:var(--muted);font-size:.95rem}.service .service-detail{font-size:.75rem;margin-top:24px;color:var(--teal);font-weight:700}.project{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden}.project-visual{background:#e4eeeb;padding:34px;display:flex;flex-direction:column;justify-content:space-between;min-height:420px}.project-visual>span{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}.project-visual>p{font-size:clamp(2.8rem,5vw,4.5rem);font-weight:900;letter-spacing:-.06em}.project-visual p>span{color:var(--teal)}.project-visual small{display:block;letter-spacing:0;font-weight:400;font-size:.9rem}.project-content{padding:38px}.project-content .eyebrow{margin-bottom:12px}.project-content h3{font-size:1.9rem;margin-bottom:16px}.project-content p,.project-content dd{font-size:.92rem;color:var(--muted)}dl{margin-block:24px}dt{font-size:.8rem;font-weight:900;margin-top:15px}dd{margin-top:4px}.approach{background:var(--soft)}.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.approach-grid h2{margin-bottom:26px}.approach-grid>div>p:not(.eyebrow){color:var(--muted);margin-top:16px}.steps{list-style:none;counter-reset:steps}.steps li{counter-increment:steps;position:relative;padding:0 0 26px 50px;border-bottom:1px solid var(--line);margin-bottom:26px}.steps li:before{content:'0' counter(steps);position:absolute;left:0;top:0;font-size:.8rem;color:var(--teal);font-weight:900}.steps h3{font-size:1.15rem;margin-bottom:12px}.steps p{font-size:.95rem;color:var(--muted)}.contact-cta{background:var(--ink);color:white}.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}.contact-cta .eyebrow{color:#82dfd4}.contact-cta h2{font-size:clamp(2rem,3vw,2.65rem)}.contact-cta p:not(.eyebrow){margin-top:22px;color:#cfdee1}.contact-details{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.contact-details a:hover{color:var(--mint)}.contact-email{font-size:clamp(1.2rem,2.3vw,1.8rem);text-decoration:none;border-bottom:1px solid #78949d;padding-bottom:14px}.contact-email span{margin-left:20px}.contact-details p{font-size:.85rem}.footer{padding:38px 0 22px;background:#fff;color:var(--muted);font-size:.8rem}.footer-top,.footer-bottom{display:flex;justify-content:space-between;gap:24px}.footer .heading{font-size:1.2rem;font-weight:900;color:var(--ink);margin-bottom:6px}.footer-bottom{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}.footer .links{display:flex;gap:24px}.body.terms{max-width:1000px;margin:auto;padding:60px 32px;line-height:1.8}.body.terms h1{font-size:2.5rem;margin-bottom:30px}.body.terms h3{margin-block:28px 12px}.body.terms p{margin-bottom:16px}body:not(.home)>.header{padding:15px 32px}body:not(.home)>.footer{padding:35px 32px}body:not(.home)>.footer .links{margin-block:20px}
@media(max-width:900px){.hero{gap:36px;padding-block:70px}.hero-aside{padding:26px}.services-grid{gap:24px}.approach-grid{gap:40px}.contact-grid{gap:30px}.header nav{gap:20px}}
@media(max-width:680px){.container{width:calc(100% - 40px)}.header-inner{min-height:85px;gap:12px;flex-wrap:wrap;padding-block:14px}.logo{width:115px}.header nav{gap:16px;font-size:.76rem;flex-wrap:wrap}.nav-contact{padding:6px 10px}.nav-contact span{display:none}.hero{grid-template-columns:1fr;padding-block:52px;gap:40px}.hero-aside{max-width:none}.section{padding-block:56px}.services-grid,.project,.approach-grid,.contact-grid{grid-template-columns:1fr}.services-grid{gap:30px}.service h3{margin-top:12px}.project-visual{min-height:280px;padding:26px}.project-content{padding:26px}.approach-grid{gap:36px}.contact-grid{gap:32px}.footer-top,.footer-bottom{flex-direction:column;gap:16px}.footer .links{flex-wrap:wrap}.section-heading{margin-bottom:32px}html{scroll-padding-top:135px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Personal introduction and editorial project list. */
.work-note{padding:12px 0 12px 34px;border-left:2px solid var(--line)}.work-note>a{display:block;text-decoration:none;border-bottom:1px solid var(--line);padding:20px 0}.work-note>a:last-child{border-bottom:0}.work-note strong{display:block;font-size:1.5rem;letter-spacing:-.03em}.work-note a span{display:block;font-size:.85rem;color:var(--muted);margin-top:5px}.service h3{margin-top:0}.portfolio-case{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:110px}.project-type{font-size:.78rem;color:var(--teal);margin-bottom:14px}.case-heading h3{font-size:2.3rem;margin-bottom:20px}.case-heading>p:last-child{color:var(--muted);font-size:1.1rem}.case-body>p{margin-bottom:18px;color:var(--muted)}.case-body .case-credit{font-size:.8rem;margin-block:24px 18px;color:var(--ink)}.deliverables{list-style:none;margin-top:24px}.deliverables li{display:grid;grid-template-columns:140px 1fr;gap:16px;border-top:1px solid var(--line);padding:16px 0;font-size:.9rem}.deliverables span{color:var(--muted)}.steps li{padding-left:0}.steps li:before{display:none}
@media(max-width:680px){.work-note{padding-left:22px}.portfolio-case{grid-template-columns:1fr;gap:24px;padding-block:32px}.deliverables li{grid-template-columns:1fr;gap:5px}}

/* Screenshots retain their full contents and open as original images. */
.portfolio-case{column-gap:64px;row-gap:30px}.project-gallery{grid-column:1/-1;display:grid;gap:24px;align-items:start}.denbaba-gallery{grid-template-columns:minmax(0,1.2fr) minmax(0,.55fr) minmax(0,1fr)}.project-shot{min-width:0}.project-shot a{display:flex;align-items:center;justify-content:center;background:#eef2f0;border:1px solid var(--line);border-radius:6px;overflow:hidden;padding:12px}.project-shot img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}.project-shot a:hover{border-color:var(--teal)}.project-shot figcaption{font-size:.8rem;color:var(--muted);margin-top:10px}.phone-shot a{background:#f3f6f5}.phone-shot img{max-width:200px}.single-gallery{max-width:640px;width:100%}.website-gallery{max-width:760px}
@media(max-width:680px){.denbaba-gallery{grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:18px}.denbaba-gallery .project-shot:last-child{grid-column:1/-1;max-width:480px;width:100%}.project-shot a{padding:6px}.portfolio-case{row-gap:24px}}
@media(max-width:380px){.denbaba-gallery{grid-template-columns:1fr}.denbaba-gallery .phone-shot{max-width:220px}}

.kraamr-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:680px){.kraamr-gallery{grid-template-columns:1fr}}

/* Give the website the lead, with related app screens below. */
.denbaba-gallery{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);max-width:960px;width:100%;margin-inline:auto}.denbaba-gallery .project-shot:first-child{grid-column:1/-1}.denbaba-gallery .phone-shot{max-width:282px;width:100%;justify-self:center}.phone-shot img{max-width:282px}.denbaba-gallery .project-shot:last-child{grid-column:auto;max-width:none}.kraamr-gallery{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);align-items:center}.website-gallery{max-width:640px;margin-inline:auto}.project-shot a{padding:0}.website-crop{width:100%;overflow:hidden;border-radius:5px}.project-shot .website-crop img{width:108.7%;max-width:none;margin:-7% -4.35% -6%}.legal .body.terms{max-width:960px;padding-block:65px}.legal .body.terms h1{text-align:left;font-size:clamp(2rem,5vw,3rem);margin-bottom:12px}.legal-date{font-size:.85rem;color:var(--muted)}.legal-intro{font-size:1.1rem;max-width:750px}.legal-toc{background:var(--soft);padding:24px 30px;border:1px solid var(--line);margin-block:32px}.legal-toc ol{columns:2;column-gap:40px;padding-left:22px}.legal-toc li{break-inside:avoid;margin-bottom:7px;font-size:.9rem}.legal .body.terms section{margin-top:40px;scroll-margin-top:120px}.legal .body.terms h2{font-size:1.45rem;margin-bottom:20px;line-height:1.35}.legal .body.terms h3{font-size:1.15rem;margin-block:0 18px}.legal .body.terms ul{padding-left:24px;margin-block:16px}.legal .body.terms li{margin-bottom:12px}.legal-box{background:var(--soft);border-left:3px solid var(--teal);padding:24px;margin-block:24px}.legal-table-wrap{overflow-x:auto;margin-block:24px}.legal table{border-collapse:collapse;min-width:620px;width:100%;font-size:.86rem}.legal caption{text-align:left;color:var(--muted);margin-bottom:12px}.legal th,.legal td{text-align:left;vertical-align:top;border:1px solid var(--line);padding:14px}.legal th{background:var(--soft)}.legal-back{margin-top:40px}body.legal>.header{padding:0}body.legal>.footer{padding:38px 0 22px}
@media(max-width:680px){.denbaba-gallery,.kraamr-gallery{grid-template-columns:1fr}.denbaba-gallery .project-shot:last-child{grid-column:auto;max-width:none}.denbaba-gallery .phone-shot{max-width:282px}.legal-toc ol{columns:1}.legal .header nav{gap:12px}.legal .body.terms{padding:40px 20px}}
