/* System fonts, local assets and no third-party trackers. */
:root{--paper:#f6f4ef;--white:#fffefb;--ink:#20322d;--muted:#65716a;--line:#d8ddd5;--soft:#ebece3;--dark:#1b3029;--accent:#ae4c2e;--orange:#e49a70;--green:#2c624c;--radius:20px;--sans:'Segoe UI',Candara,'Trebuchet MS',Arial,sans-serif;--serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button:disabled{cursor:default;opacity:.6}::selection{background:#f3c7a9;color:#17261f}:focus-visible{outline:3px solid #b95732;outline-offset:5px}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-weight:500}em{font-weight:inherit}h1,h2{font-family:var(--serif);letter-spacing:-.04em;font-weight:400}h2{font-size:clamp(36px,4.1vw,60px);line-height:1.12}h2 em{color:var(--accent)}p{color:var(--muted)}.wrap{width:min(1272px,calc(100% - 88px));margin:auto}.section{padding:105px 0}.section-label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px;margin-bottom:22px;color:var(--accent)}.section-label:before{content:'';width:22px;height:1px;background:currentColor}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:48px}.section-head>p{max-width:405px;font-size:16px}.section-head .text-link{flex-shrink:0}.skip{position:fixed;z-index:999;left:12px;top:-70px;background:var(--ink);color:white;padding:10px 18px;border-radius:6px}.skip:focus{top:12px}.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}.button{border:1px solid var(--ink);border-radius:7px;display:inline-flex;gap:20px;align-items:center;justify-content:center;padding:14px 22px;min-height:48px;font-size:14px;font-weight:600;transition:background .2s,transform .2s;background:var(--ink);color:var(--white);text-align:center}.button:hover{transform:translateY(-2px);background:#345145}.button.outline{color:var(--ink);background:transparent;border-color:#a9b5a8}.button.outline:hover{background:#e6eadd}.button.light{background:#f5efe2;color:#25382d;border-color:#f5efe2}.button.small{padding:10px 16px;min-height:42px;font-size:13px}.button.wide{width:100%}.text-link{display:inline-flex;gap:12px;align-items:center;border:0;border-bottom:1px solid #a7b0a4;background:none;padding:7px 0;color:inherit;font-size:14px;font-weight:600}.text-link:hover{color:var(--accent);border-color:var(--accent)}.actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.chip{display:inline-flex;gap:7px;align-items:center;border:1px solid var(--line);border-radius:30px;padding:5px 12px;font-size:12px}.subtle{color:var(--muted);font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The masthead stays small; the work gets the space. */
.site-header{position:sticky;top:0;z-index:30;background:rgba(246,244,239,.96);border-bottom:1px solid transparent;backdrop-filter:blur(12px)}.header-inner{min-height:88px;display:flex;justify-content:space-between;align-items:center;gap:28px}.brand{display:flex;gap:11px;align-items:center;font-size:17px;font-weight:650;letter-spacing:-.03em;white-space:nowrap}.brand img{width:34px;height:36px;object-fit:contain}.nav{display:flex;gap:29px;align-items:center;font-size:14px}.nav a{position:relative;padding:9px 0}.nav a:after{content:'';height:1px;width:0;position:absolute;left:0;bottom:3px;background:var(--ink);transition:width .2s}.nav a:hover:after{width:100%}.header-tools{display:flex;gap:22px;align-items:center}.languages{display:flex;gap:3px;font-size:12px;border:1px solid #d8dcd1;border-radius:30px;padding:3px}.languages a{display:block;padding:5px 9px;border-radius:30px}.languages a[aria-current]{color:var(--paper);background:var(--ink)}.menu-button{display:none;background:none;border:1px solid var(--line);border-radius:5px;padding:9px}.header-contact{font-size:13px;padding:10px 17px;min-height:42px}.header-contact .icon{width:15px}
/* A personal, editorial opening rather than a software landing-page grid. */
.hero-shell{width:calc(100% - 40px);max-width:1600px;margin:0 auto;background:var(--dark);border-radius:14px;color:#f5f0e7;position:relative;overflow:hidden}.hero-inner{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.78fr);gap:48px;padding-top:68px;padding-bottom:40px;align-items:center}.hero-kicker{display:flex;gap:12px;align-items:center;color:#d8b391;font-size:13px;font-weight:500;margin-bottom:22px}.hero-kicker:before{content:'';width:8px;height:8px;flex-shrink:0;border-radius:50%;border:1px solid currentColor}.hero h1{font-size:clamp(49px,5.65vw,83px);line-height:1.06;margin:0 0 26px}.hero h1 em{color:#edac83;display:block;max-width:780px}.hero-copy>p{max-width:577px;color:#bfccc1;line-height:1.8;font-size:16px;margin-bottom:28px}.hero .text-link{color:#f4efe4;border-color:#6c8071}.hero .text-link:hover{color:#edac83}.hero-portrait{position:relative;align-self:end;padding-top:13px}.portrait-region{display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:#ccdbcc;gap:8px;margin-bottom:16px}.portrait-frame{position:relative;overflow:hidden;border-radius:160px 160px 10px 10px;background:#b7a998;aspect-ratio:.77;max-height:450px;border:5px solid rgba(255,255,255,.08);box-shadow:15px 18px 0 rgba(231,171,132,.08)}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 37%;transition:transform .7s}.portrait-frame:hover img{transform:scale(1.035)}.portrait-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px}.portrait-caption strong{font-size:17px;letter-spacing:-.02em;font-weight:500}.portrait-caption span{font-size:11px;line-height:1.55;color:#b3c2b7;text-align:right}.focus-strip{grid-column:1/-1;display:flex;align-items:center;gap:22px;border-top:1px solid #465a4a;padding:22px 0 0;margin-top:6px}.focus-strip>span{font-size:12px;color:#9dad9f;margin-right:auto}.focus-strip a{display:flex;align-items:center;gap:16px;font-size:13px;color:#d8e1d6}.focus-strip a+a{border-left:1px solid #405645;padding-left:22px}.focus-strip .icon{color:#d9a17e;width:16px}
/* Selected work: one focused project at a time. */
.workbench{display:grid;grid-template-columns:.72fr 1.28fr;gap:40px;align-items:start}.project-index{display:grid}.project-tab{position:relative;display:flex;align-items:center;gap:20px;width:100%;padding:23px 18px 23px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left}.project-tab:last-child{border-bottom:1px solid var(--line)}.project-tab>span:first-child{font-family:var(--serif);font-size:20px;color:#91a091;width:30px}.project-tab>div{flex:1}.project-tab strong{display:block;font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1.3}.project-tab small{font-size:12px;color:var(--muted);display:block;margin-top:6px}.project-tab .icon{color:var(--muted);transition:transform .2s;flex-shrink:0}.project-tab[aria-selected=true]{background:#e9eadf;padding-left:17px;border-color:transparent;border-radius:7px}.project-tab[aria-selected=true]>span:first-child{color:var(--accent)}.project-tab[aria-selected=true] .icon{transform:rotate(-35deg);color:var(--accent)}.project-tab:hover:not([aria-selected=true]){background:#efefe6}.project-index-note{font-size:12px;margin-top:23px;max-width:365px;color:#758074;line-height:1.65}.project-panel{min-width:0}.project-visual{background:#e4e8e5;border:1px solid #d1dad4;border-radius:11px;padding:24px 24px 0;overflow:hidden;position:relative}.screen-top{display:flex;align-items:center;gap:5px;margin-bottom:15px;color:#536b5f;font-size:11px}.screen-top i{width:6px;height:6px;border-radius:50%;background:#9caea3}.screen-top span{margin-left:auto}.screen-image-button{border:0;padding:0;display:block;width:100%;background:#fff;border-radius:6px 6px 0 0;position:relative;overflow:hidden;box-shadow:0 14px 32px #16291a24;height:310px}.screen-image-button img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .45s}.screen-image-button:hover img{transform:scale(1.025)}.play-label{position:absolute;bottom:20px;right:20px;display:flex;gap:8px;align-items:center;background:#fff9ec;padding:10px 15px;border-radius:6px;box-shadow:0 3px 17px #0002;color:var(--ink);font-size:12px;font-weight:600}.project-copy{padding:23px 0 0}.project-copy h3{font-size:25px;letter-spacing:-.035em;line-height:1.3;margin-bottom:12px}.project-copy p{font-size:15px;max-width:670px;line-height:1.75}.project-copy .actions{margin-top:22px}.project-tag{display:inline-flex;border-bottom:1px solid #b6c4b7;color:#566959;font-size:12px;padding:0 0 2px}.project-actions-header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}.fade-in{animation:fade-in .35s both}@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Small, real interaction instead of decorative animation. */
.try-section{padding:0 0 85px}.try-strip{display:grid;grid-template-columns:1fr 1.1fr;gap:55px;align-items:center;border-top:1px solid var(--line);padding-top:48px}.try-copy h3{font:400 28px/1.3 var(--serif);letter-spacing:-.025em;margin:8px 0 12px}.try-copy p{font-size:14px;max-width:425px}.live-task{display:flex;gap:20px;align-items:center;background:#ece9dd;border:1px solid #d7d7c7;border-radius:10px;padding:25px;transition:background .35s}.live-task.done{background:#e3ecdf;border-color:#bfd0b5}.task-symbol{width:45px;height:45px;display:grid;place-items:center;border:1px solid #baa886;border-radius:50%;color:#96724a;flex-shrink:0}.live-task.done .task-symbol{color:#356147;border-color:#9fb593}.live-task h4{font-size:17px;font-weight:500}.live-task p{font-size:13px;line-height:1.7;margin:5px 0 13px}.mini-foot{font-size:11px;display:block;text-align:right;color:var(--muted);margin-top:8px}
/* Needs, not a catalog of fixed products. */
.custom-section{background:#eae9df;border-block:1px solid #dcded0}.custom-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:95px;align-items:start}.custom-intro>p{margin:25px 0 35px;font-size:16px;line-height:1.8}.connect-note{border-top:1px solid #cbd0c1;padding-top:25px}.connect-note h3{font-size:18px;line-height:1.4;margin-bottom:13px;font-weight:550}.connect-note p{font-size:14px;line-height:1.8}.connection-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.connection-tags span{font-size:12px;padding:5px 11px;border:1px solid #c3ccbc;border-radius:4px;background:#f3f4ec}.challenge-label{font-size:16px;font-weight:550;display:block;margin:5px 0 17px}.challenge-list{display:grid;gap:7px}.challenge-button{display:flex;align-items:center;text-align:left;gap:13px;width:100%;border:1px solid #cfd4c8;background:#f5f4ed;border-radius:7px;padding:16px 18px;font-size:14px;line-height:1.5}.challenge-button>span:first-child{width:20px;height:20px;border-radius:50%;border:1px solid #acb9a6;display:grid;place-items:center;flex-shrink:0;font-size:11px}.challenge-button[aria-pressed=true]{background:var(--dark);color:#f9f4e9;border-color:var(--dark)}.challenge-button[aria-pressed=true]>span:first-child{background:#e3a278;color:var(--ink);border-color:#e3a278}.challenge-result{margin-top:23px;padding:24px 0 0;border-top:1px solid #cad1c2;min-height:227px}.challenge-result h3{font:400 26px/1.25 var(--serif);letter-spacing:-.02em;max-width:440px;margin-bottom:12px}.challenge-result p{font-size:14px;line-height:1.8;margin-bottom:20px}.integration-boundary{font-size:12px;border-top:1px solid #cad1c2;padding-top:17px;margin-top:35px;line-height:1.7}
.approach-layout{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:start}.approach-header{position:sticky;top:120px}.step-list details{border-top:1px solid var(--line);padding:22px 0}.step-list details:last-child{border-bottom:1px solid var(--line)}.step-list summary{cursor:pointer;display:flex;gap:20px;align-items:center;list-style:none;font-size:18px;line-height:1.4;letter-spacing:-.02em}.step-list summary::-webkit-details-marker{display:none}.step-list summary span{font:400 20px var(--serif);color:#8e9b8a}.step-list summary b{font-weight:500;flex:1}.step-list summary .plus{width:24px;height:24px;border:1px solid #c5cfc0;border-radius:50%;display:grid;place-items:center;font-size:16px;color:var(--ink);flex-shrink:0}.step-list details[open] .plus{transform:rotate(45deg);background:#e7eadf}.step-list details p{margin:14px 35px 0 44px;font-size:14px;line-height:1.8}.ai-note{margin-top:65px;border:1px solid #d5dacd;border-radius:10px;background:#efefe5;display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;padding:35px 40px}.ai-note h3{font:400 29px/1.27 var(--serif);letter-spacing:-.025em}.ai-note p{font-size:14px;line-height:1.8}.ai-note small{display:block;margin-top:12px;color:#727b6f;font-size:12px}
.about-section{background:var(--dark);color:#f5f0e7;position:relative}.about-section .section-label{color:#d7a681}.about-section h2 em{color:#edac83}.about-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:95px}.about-intro p{margin:28px 0;font-size:15px;line-height:1.85;color:#bccabd}.cert-row{display:flex;gap:14px;align-items:center;margin:26px 0 0;padding:20px 0;border-top:1px solid #465948}.cert-mark{font-size:13px;border:1px solid #9aaf9a;border-radius:50%;width:55px;height:55px;display:grid;place-items:center;flex-shrink:0}.cert-row strong{display:block;font-size:14px;font-weight:500}.cert-row small{display:block;color:#aebdab;font-size:12px;margin-top:4px}.cert-row .icon{margin-left:auto}.experience-item{display:grid;grid-template-columns:87px 1fr;gap:22px;border-top:1px solid #475e4c;padding:25px 0}.experience-item>span{font-size:12px;color:#a7b7a5;padding-top:4px}.experience-item h3{font-size:20px;line-height:1.35;font-weight:500;letter-spacing:-.02em}.experience-item h4{font-size:13px;color:#e4b391;margin-top:7px;font-weight:400}.experience-item p{font-size:14px;line-height:1.8;color:#acbdac;margin-top:13px}.education{border-top:1px solid #475e4c;padding-top:19px;display:flex;gap:12px;font-size:12px;color:#b5c5b3}.education .icon{width:17px;margin-top:3px}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}.lab-item{border-top:1px solid var(--line);padding-top:22px}.lab-visual{height:180px;margin-bottom:25px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:9px;background:#e8e2d7}.lab-visual.video{background:#dce7e1}.lab-item>span{font-size:12px;color:var(--accent)}.lab-item h3{font-size:25px;letter-spacing:-.03em;margin:8px 0 12px;line-height:1.3}.lab-item p{font-size:15px;line-height:1.8;max-width:520px}.lab-item small{display:inline-block;font-size:12px;color:#768270;margin-top:15px}.phone{background:#f9f6ed;width:102px;height:177px;border:5px solid #405046;border-radius:19px;transform:rotate(-9deg) translateY(23px);padding:27px 11px;box-shadow:14px 17px 20px #2b402718}.phone+ .phone{transform:rotate(12deg) translate(-8px,33px);background:#f5dcc4}.phone:before{content:'';display:block;width:29px;height:5px;background:#c9c8b9;border-radius:5px;margin:auto auto 17px}.phone .bubble{height:19px;border-radius:6px;background:#c1d2bc;margin-bottom:8px}.phone .bubble:nth-child(2){width:78%;background:#e4cfb8}.phone .bubble:nth-child(3){width:87%}.video-board{width:310px;height:153px;transform:rotate(-3deg) translateY(20px);border:5px solid #3b5146;border-radius:8px;background:#f0f2e8;padding:10px;box-shadow:12px 14px 0 #213b2420}.video-frame{height:55px;width:90px;background:#8aa99a;border-radius:3px;margin:0 auto 12px;position:relative}.video-frame:after{content:'';position:absolute;left:40px;top:18px;border-left:15px solid #f2ebda;border-top:10px solid transparent;border-bottom:10px solid transparent}.track{height:14px;display:flex;gap:4px;margin-bottom:6px;position:relative}.track i{flex:1;background:#bba386;border-radius:2px}.track:nth-child(3) i{background:#91aca0}.track:last-child{height:7px;background:repeating-linear-gradient(90deg,#567c64 0 4px,transparent 4px 7px);opacity:.5}
.blog-section{padding-top:0}.blog-head{border-top:1px solid var(--line);padding-top:60px}.blog-empty{border-block:1px solid var(--line);padding:35px 0;display:flex;align-items:center;gap:30px}.empty-icon{width:58px;height:70px;border:1px solid #b7c3b2;border-radius:4px;display:grid;place-items:center;background:#e8ecdf;flex-shrink:0}.empty-icon .icon{width:25px;height:25px}.blog-empty h3{font-size:20px;font-weight:500;letter-spacing:-.02em}.blog-empty p{font-size:14px;margin-top:5px}.blog-empty .text-link{margin-left:auto;flex-shrink:0}.blog-list{display:grid}.article-card{display:grid;grid-template-columns:140px 1fr auto;gap:25px;align-items:center;border-top:1px solid var(--line);padding:25px 0}.article-card:last-child{border-bottom:1px solid var(--line)}.article-cover{aspect-ratio:1.35;object-fit:cover;border-radius:6px;width:100%;background:#e3e6d8}.article-cover.blank{display:grid;place-items:center;color:#8a9c82;font:40px var(--serif)}.article-card h3{font:400 27px/1.25 var(--serif);margin:7px 0 8px;letter-spacing:-.03em}.article-card p{font-size:14px}.article-meta{font-size:11px;color:#72806c;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.article-card:hover h3{color:var(--accent)}.blog-page{min-height:70vh}.blog-page .section-head{align-items:flex-start}.blog-search{padding:12px 16px;border:1px solid #bfcaba;background:#fffdf6;border-radius:6px;width:260px}.blog-toolbar{margin:32px 0;display:flex;gap:15px;align-items:center;justify-content:space-between}.filter-links{display:flex;gap:8px;flex-wrap:wrap}.filter-links a{border:1px solid var(--line);padding:6px 12px;border-radius:4px;font-size:12px}.filter-links a.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.article-page{max-width:780px;margin:auto;padding-top:60px}.article-page h1{font-size:clamp(39px,5vw,65px);line-height:1.13;margin:25px 0}.article-lead{font-size:20px;line-height:1.7;margin:20px 0 35px}.article-hero-cover{width:100%;max-height:450px;object-fit:cover;border-radius:9px;margin-bottom:40px}.prose{font-size:18px;line-height:1.95;color:#354638}.prose p{color:inherit;margin:0 0 24px}.prose h2{font:400 33px/1.3 var(--serif);letter-spacing:-.02em;margin:45px 0 18px}.prose h3{font-size:23px;line-height:1.4;margin:35px 0 18px}.prose ul,.prose ol{padding-left:24px;margin:20px 0}.prose li{padding:4px 0}.prose a{color:var(--accent);border-bottom:1px solid #c08972}.prose blockquote{border-left:3px solid #c5885f;padding:8px 0 8px 25px;margin:28px 0;color:#53674f}.prose code{font:14px monospace;background:#eaece2;padding:3px 6px}.article-end{margin:45px 0 10px;border-top:1px solid var(--line);padding-top:25px;display:flex;justify-content:space-between;gap:20px}.reading-progress{position:fixed;top:87px;left:0;height:3px;background:#ba7050;width:0;z-index:40}
.contact-section{background:#e5e8dc;border-top:1px solid #cdd6c4}.contact-layout{display:grid;grid-template-columns:1fr .86fr;gap:90px}.contact-copy h2{font-size:clamp(39px,4.5vw,63px)}.contact-copy>p{max-width:480px;margin:26px 0;line-height:1.8}.mail-address{display:inline-block;font:400 clamp(20px,2.4vw,29px)/1.4 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere;border-bottom:1px solid #8b9e83;padding-bottom:6px;margin-bottom:15px}.contact-copy .actions{gap:22px}.contact-copy .text-link{font-size:13px}.contact-form{border:1px solid #ccd3c2;background:#f3f4e9;border-radius:10px;padding:28px}.contact-form h3{font-size:21px;letter-spacing:-.03em;margin-bottom:23px;font-weight:500}.field{display:grid;gap:7px;margin-bottom:17px;font-size:13px}.field input,.field textarea,.field select{width:100%;padding:12px;border:1px solid #bbc8b3;background:#fffef8;border-radius:5px;color:var(--ink);font-size:14px;min-width:0}.field textarea{min-height:125px;resize:vertical;line-height:1.6}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contact-form .actions{gap:17px}.contact-form .button{font-size:12px;padding:12px 17px;gap:12px}.form-note{font-size:11px;line-height:1.8;margin-top:17px;color:#798671}.site-footer{padding:45px 0 22px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:35px}.footer-top p{font-size:13px;max-width:370px}.footer-wordmark{font:400 clamp(50px,11.3vw,158px)/1.05 var(--serif);letter-spacing:-.055em;padding:40px 0 25px;color:#d5d9c9;user-select:none}.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#7c8774;font-size:11px}.footer-bottom button{background:transparent;border:0;padding:0;color:inherit;font-size:11px}.footer-bottom button:hover{text-decoration:underline}
/* Accessible case-study and demo viewer. */
dialog{border:0;margin:auto;padding:0;background:var(--paper);color:var(--ink);max-width:none;max-height:none}dialog::backdrop{background:#101d18c9;backdrop-filter:blur(5px)}.project-dialog{width:min(1150px,calc(100% - 50px));height:min(90dvh,980px);border-radius:12px;overflow:hidden}.dialog-shell{display:flex;flex-direction:column;height:100%}.dialog-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;background:var(--paper);flex:0 0 auto}.dialog-head>div{flex:1;min-width:0}.dialog-head small{font-size:11px;color:var(--muted)}.dialog-head h2{font:500 20px/1.35 var(--sans);letter-spacing:-.02em;margin:3px 0 0}.close-button{height:38px;width:38px;border:1px solid #c3cbbc;border-radius:50%;background:none;display:grid;place-items:center;flex-shrink:0}.dialog-tabs{display:flex;gap:7px;padding:12px 22px;border-bottom:1px solid var(--line);flex-shrink:0;overflow:auto;background:#ebeee3}.dialog-tabs button{background:transparent;border:1px solid transparent;padding:9px 13px;border-radius:5px;white-space:nowrap;font-size:12px}.dialog-tabs button.active{background:var(--ink);color:var(--paper)}.dialog-content{overflow:auto;flex:1;min-height:0}.case-content{padding:30px 40px;max-width:1020px;margin:auto}.case-lead{font:400 35px/1.3 var(--serif);letter-spacing:-.03em;color:var(--ink);margin-bottom:30px;max-width:850px}.case-columns{display:grid;grid-template-columns:1fr 1fr;gap:38px}.case-block{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}.case-block h3{font-size:17px;font-weight:600;margin-bottom:12px}.case-block p{font-size:14px;line-height:1.8}.case-block ul{padding-left:17px;color:var(--muted);font-size:14px;line-height:1.9}.case-custom{background:#e7eadc;border-radius:8px;padding:24px;margin-top:30px}.case-custom h3{font:400 26px/1.3 var(--serif);letter-spacing:-.02em;margin-bottom:12px}.case-custom p{font-size:14px;line-height:1.8}.case-custom .actions{margin-top:20px}.demo-content{display:flex;flex-direction:column;overflow:hidden;height:100%}.demo-notice{padding:8px 20px;border-bottom:1px solid var(--line);font-size:11px;color:#6b775f;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:15px}.demo-notice button{background:transparent;border:0;font-size:11px;color:var(--accent);text-decoration:underline}.demo-frame{width:100%;flex:1;min-height:0;border:0;display:block;background:white}.advanced-warning{background:#f4e9d9;color:#715b38}.modal-note{font-size:12px;color:#788371;margin-top:22px}.privacy-dialog{width:min(680px,calc(100% - 36px));max-height:85dvh;border-radius:10px;padding:32px;overflow:auto}.privacy-dialog .close-button{float:right}.privacy-dialog h2{font-size:35px;margin:12px 0 24px}.privacy-dialog p{font-size:14px;line-height:1.85;margin-bottom:18px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 20px;z-index:200;border-radius:7px;box-shadow:0 8px 25px #0002;font-size:13px;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 32px)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1500px){.hero-inner{padding-block:90px 40px}.portrait-frame{max-height:505px}.hero h1{font-size:87px}}
@media(max-width:1100px){.wrap{width:calc(100% - 60px)}.hero-inner{gap:33px;grid-template-columns:1.2fr .75fr;padding-top:50px}.hero h1{font-size:clamp(46px,6vw,68px)}.hero-copy>p{font-size:14px}.hero-portrait{align-self:center}.portrait-frame{aspect-ratio:.74}.nav{gap:18px;font-size:13px}.header-tools{gap:14px}.header-contact{display:none}.workbench{gap:25px;grid-template-columns:.8fr 1.2fr}.project-tab strong{font-size:18px}.project-visual{padding:15px 15px 0}.screen-image-button{height:280px}.custom-layout,.approach-layout,.about-layout,.contact-layout{gap:45px}.section{padding:80px 0}.section-head{gap:30px}.section-head>p{max-width:330px;font-size:14px}.focus-strip{gap:16px}.focus-strip a{font-size:12px;gap:10px}.focus-strip a+a{padding-left:14px}.focus-strip>span{font-size:11px}.form-row{grid-template-columns:1fr;gap:0}.contact-form{padding:23px}.case-content{padding:25px}}
@media(max-width:780px){html{scroll-padding-top:80px}.wrap{width:calc(100% - 40px)}.header-inner{min-height:72px;gap:16px}.brand{font-size:15px}.brand img{width:28px;height:30px}.header-tools{gap:10px}.menu-button{display:grid;place-items:center}.nav{display:none;position:absolute;left:0;right:0;top:72px;background:#f6f4ef;border-bottom:1px solid #cfd6c8;padding:15px 22px;box-shadow:0 12px 20px #1423130d;flex-wrap:wrap;gap:15px}.nav.is-open{display:flex}.languages{font-size:11px}.languages a{padding:4px 8px}.hero-shell{width:calc(100% - 20px);border-radius:9px}.hero-inner{grid-template-columns:1fr;gap:30px;padding-top:39px;padding-bottom:22px;width:calc(100% - 42px)}.hero-kicker{font-size:11px;margin-bottom:22px}.hero h1{font-size:clamp(42px,7.7vw,65px);margin-bottom:23px}.hero h1 em{max-width:550px}.hero-copy>p{font-size:15px;line-height:1.8;max-width:580px}.hero .actions{gap:21px}.hero .button{font-size:13px;padding:12px 18px}.hero .text-link{font-size:12px}.hero-portrait{display:grid;grid-template-columns:115px 1fr;gap:0 22px;align-items:center;max-width:100%;width:100%;padding-top:8px;margin-top:2px}.portrait-frame{grid-column:1;grid-row:1/3;width:115px;height:140px;aspect-ratio:unset;border-radius:60px 60px 6px 6px;box-shadow:6px 7px 0 #e7ab8410;border-width:3px}.portrait-frame img{object-position:50% 33%}.portrait-region{grid-column:2;grid-row:2;justify-content:flex-start;align-self:start;margin:9px 0 0;font-size:11px}.portrait-caption{grid-column:2;grid-row:1;display:block;align-self:end;margin:0}.portrait-caption span{display:block;text-align:left;margin-top:6px;font-size:11px}.portrait-caption strong{font-size:17px}.focus-strip{gap:9px;flex-wrap:wrap;margin-top:0;padding-top:19px}.focus-strip>span{width:100%;margin-bottom:3px}.focus-strip a{font-size:10px;gap:5px}.focus-strip a+a{padding-left:9px}.focus-strip .icon{width:12px}.section{padding:67px 0}.section-head{display:block;margin-bottom:28px}.section-head h2{font-size:39px}.section-head>p{margin-top:21px;max-width:100%;font-size:15px}.section-head .text-link{margin-top:20px}.section-label{font-size:12px;margin-bottom:16px}.workbench{grid-template-columns:1fr;gap:25px}.project-index{grid-template-columns:1fr 1fr;gap:7px}.project-tab,.project-tab[aria-selected=true]{border:1px solid #d0d6c7;border-radius:6px;padding:15px 11px;gap:10px;align-items:flex-start}.project-tab>span:first-child{font-size:15px;width:19px;flex-shrink:0}.project-tab strong{font-size:15px;line-height:1.4}.project-tab small{font-size:10px;margin-top:4px}.project-tab .icon{display:none}.project-index-note{grid-column:1/-1;margin-top:12px;font-size:11px;max-width:none}.project-visual{padding:16px 16px 0}.screen-image-button{height:285px}.project-copy h3{font-size:23px}.project-copy p{font-size:14px}.play-label{font-size:11px;bottom:13px;right:13px}.project-copy .button{font-size:12px;padding:12px 18px}.project-copy .text-link{font-size:12px}.try-strip,.custom-layout,.approach-layout,.about-layout,.contact-layout{grid-template-columns:1fr;gap:35px}.try-section{padding-bottom:55px}.try-strip{padding-top:25px;gap:25px}.live-task{padding:19px;gap:13px}.try-copy h3{font-size:26px}.custom-intro>p{font-size:15px}.connect-note{padding-top:20px}.challenge-result{min-height:0}.integration-boundary{margin-top:25px}.approach-header{position:static}.step-list summary{font-size:17px;gap:15px}.step-list details p{margin-left:39px}.ai-note{grid-template-columns:1fr;gap:20px;padding:25px;margin-top:38px}.ai-note h3{font-size:26px}.about-layout{gap:45px}.about-intro p{font-size:15px}.experience-item{grid-template-columns:72px 1fr;gap:14px}.experience-item h3{font-size:19px}.experience-item p{font-size:13px}.lab-grid{grid-template-columns:1fr;gap:35px}.lab-visual{height:175px;margin-bottom:20px}.lab-item h3{font-size:23px}.lab-item p{font-size:14px}.blog-section{padding-top:0}.blog-head{padding-top:45px}.blog-empty{gap:18px;flex-wrap:wrap;padding:25px 0}.blog-empty h3{font-size:17px}.blog-empty>div:not(.empty-icon){flex:1;min-width:190px}.blog-empty p{font-size:13px}.blog-empty .text-link{margin-left:76px;font-size:12px}.contact-copy h2{font-size:40px}.contact-copy>p{font-size:15px}.contact-form{padding:22px}.form-row{grid-template-columns:1fr 1fr;gap:12px}.footer-top{align-items:flex-start}.footer-top p{font-size:11px;max-width:170px}.footer-wordmark{font-size:clamp(43px,12.2vw,90px);padding:32px 0 22px}.footer-bottom{flex-wrap:wrap;font-size:10px;gap:12px}.footer-bottom button{font-size:10px}.project-dialog{width:calc(100% - 16px);height:95dvh;border-radius:8px}.dialog-head{padding:13px 15px;gap:10px}.dialog-head h2{font-size:17px}.dialog-head small{font-size:10px}.dialog-tabs{padding:10px 12px;gap:3px}.dialog-tabs button{font-size:11px;padding:8px 9px}.case-content{padding:24px 20px}.case-lead{font-size:28px}.case-columns{grid-template-columns:1fr;gap:0}.case-block{padding-top:18px;margin-top:18px}.demo-notice{font-size:10px;padding:7px 12px;align-items:flex-start}.demo-notice button{font-size:10px;flex-shrink:0}.privacy-dialog{padding:25px}.privacy-dialog h2{font-size:30px}.article-card{grid-template-columns:87px 1fr;gap:17px;padding:20px 0}.article-card>.icon{display:none}.article-card h3{font-size:22px}.article-card p{font-size:12px}.article-meta{font-size:10px;gap:7px}.blog-toolbar{align-items:flex-start;flex-direction:column}.blog-search{width:100%}.article-page{padding-top:30px}.article-lead{font-size:18px}.prose{font-size:17px;line-height:1.9}.reading-progress{top:71px}.article-end{flex-wrap:wrap}.article-end .text-link{font-size:12px}}
@media(max-width:390px){.wrap{width:calc(100% - 32px)}.hero-inner{width:calc(100% - 34px)}.hero h1{font-size:40px}.hero .actions{gap:14px}.hero .text-link{font-size:11px}.focus-strip a{font-size:9px}.focus-strip a+a{padding-left:6px}.form-row{grid-template-columns:1fr;gap:0}.project-tab strong{font-size:14px}.contact-copy h2{font-size:37px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.screen-image-button:hover img,.portrait-frame:hover img{transform:none}}
@media print{.site-header,.hero-portrait,.focus-strip,.project-visual,.try-section,.custom-section,.contact-form,.lab-visual,.footer-wordmark,.button,.text-link,dialog{display:none!important}.section{padding:25px 0}.wrap{width:100%}.hero-shell,.about-section,.contact-section{background:white!important;color:black!important}.hero-inner,.about-layout,.contact-layout,.workbench,.approach-layout{display:block}.hero h1{font-size:40px;color:black}.hero-copy>p,.about-intro p,.experience-item p{color:#333}.project-index{display:none}.hero h1 em,h2 em{color:black}.ai-note{margin-top:20px}.site-footer{padding-top:15px}}
.hero-portrait{margin:0}

/* Mobile layout only. Desktop typography, colours, artwork and content remain unchanged. */
@media screen and (max-width: 1024px) {
  .hero-inner > *, .workbench > *, .project-index > *, .custom-layout > *,
  .approach-layout > *, .about-layout > *, .contact-layout > *, .lab-grid > *,
  .ai-note > *, .try-strip > *, .article-card > *, .form-row > * { min-width: 0; }
  .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-board { max-width: 90%; }
  .project-tab strong, .project-copy h3, .case-lead, .dialog-head h2,
  .article-page h1, .article-card h3 { overflow-wrap: break-word; }
}
@media screen and (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-copy > p { max-width: 620px; }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 780px) {
  html { scroll-padding-top: 88px; }
  .wrap { width: calc(100% - clamp(32px, 8vw, 48px)); }
  .section { padding-top: clamp(48px, 8vw, 64px); padding-bottom: clamp(48px, 8vw, 64px); }
  .section-head { margin-bottom: 28px; }
  .section-head h2, .contact-copy h2 { font-size: clamp(32px, 8.7vw, 43px); line-height: 1.15; }
  .header-inner { min-height: 76px; gap: 10px; }
  .header-tools { gap: 8px; flex-shrink: 0; }
  .brand { gap: 8px; }
  .languages a { min-width: 34px; min-height: 36px; display: grid; place-items: center; }
  .menu-button { width: 44px; height: 44px; flex-shrink: 0; }
  .nav { top: 100%; padding: 14px max(16px, 4vw); gap: 6px 16px; max-height: calc(100svh - 80px); overflow-y: auto; }
  .nav.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 6px; font-size: 15px; }
  .hero-inner { width: calc(100% - 40px); padding-top: 34px; gap: 28px; }
  .hero h1 { font-size: clamp(35px, 9.8vw, 61px); line-height: 1.08; }
  .hero-copy > p { font-size: 15px; line-height: 1.8; }
  .hero-kicker { line-height: 1.65; font-size: 12px; }
  .hero-portrait { grid-template-columns: clamp(108px, 29vw, 150px) minmax(0, 1fr); gap: 0 18px; }
  .portrait-frame { width: 100%; height: auto; aspect-ratio: 3 / 4; max-height: none; }
  .portrait-caption { min-width: 0; }
  .portrait-caption strong { font-size: clamp(15px, 4.4vw, 19px); }
  .portrait-caption span { font-size: 12px; line-height: 1.65; }
  .portrait-region { font-size: 12px; line-height: 1.5; }
  .focus-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .focus-strip > span { grid-column: 1 / -1; font-size: 12px; }
  .focus-strip a { min-width: 0; min-height: 40px; font-size: 12px; line-height: 1.5; gap: 8px; }
  .focus-strip a + a { padding-left: 0; border-left: 0; }
  .focus-strip .icon { width: 15px; }
  .button { min-height: 48px; max-width: 100%; }
  .text-link { min-height: 44px; line-height: 1.6; }
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .project-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-tab, .project-tab[aria-selected=true] { height: 100%; padding: 14px 12px; gap: 8px; }
  .project-tab strong { font-size: 15px; line-height: 1.4; }
  .project-tab small { font-size: 12px; line-height: 1.5; }
  .project-index-note { font-size: 12px; line-height: 1.7; }
  .screen-image-button { height: auto; aspect-ratio: 1200 / 833; max-height: 420px; }
  .screen-top { font-size: 12px; }
  .screen-top span { text-align: right; }
  .project-actions-header { align-items: flex-start; flex-wrap: wrap; }
  .project-tag { max-width: 100%; line-height: 1.65; }
  .project-copy .actions { gap: 12px 20px; }
  .project-copy .button, .project-copy .text-link { font-size: 14px; }
  .try-strip, .custom-layout, .approach-layout, .about-layout, .contact-layout,
  .ai-note, .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-grid { gap: 36px; }
  .blog-section { padding-top: 0; }
  .blog-head { padding-top: 40px; }
  .blog-toolbar { align-items: stretch; gap: 20px; }
  .blog-toolbar form { width: 100%; min-width: 0; }
  .blog-search { display: block; width: 100%; max-width: 100%; font-size: 16px; min-height: 48px; }
  .filter-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
  .article-meta { font-size: 12px; line-height: 1.65; gap: 5px 10px; }
  .article-card p { font-size: 14px; line-height: 1.8; }
  .article-page { padding-top: 4px; }
  .article-page h1 { font-size: clamp(33px, 8.6vw, 49px); line-height: 1.17; margin: 22px 0; }
  .article-lead { font-size: 18px; line-height: 1.8; }
  .article-hero-cover { height: auto; max-height: none; object-fit: contain; margin-bottom: 30px; }
  .prose { overflow-wrap: break-word; }
  .prose h2 { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.28; }
  .prose blockquote { padding-left: 18px; }
  .article-end { align-items: flex-start; gap: 12px 22px; }
  .reading-progress { top: 75px; }
  .field input, .field textarea, .field select { font-size: 16px; line-height: 1.6; min-height: 48px; }
  .contact-form { padding: clamp(18px, 5vw, 26px); }
  .contact-form .actions { align-items: stretch; gap: 12px; }
  .contact-form .button { font-size: 14px; }
  .form-note { font-size: 12px; line-height: 1.8; }
  .mail-address { max-width: 100%; font-size: clamp(20px, 6.5vw, 29px); }
  .footer-top { flex-wrap: wrap; gap: 20px; }
  .footer-top p { font-size: 13px; max-width: 360px; }
  .footer-wordmark { max-width: 100%; font-size: clamp(38px, 11.4vw, 88px); }
  .footer-bottom, .footer-bottom button { font-size: 12px; }
  .footer-bottom button, .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; text-align: left; }
  .project-dialog { width: calc(100% - 16px); height: 94vh; height: 94dvh; max-height: calc(100dvh - 16px); }
  .dialog-shell { min-width: 0; min-height: 0; }
  .dialog-head { padding: 12px 14px; }
  .dialog-head h2 { font-size: 17px; }
  .close-button { width: 44px; height: 44px; }
  .dialog-tabs { padding: 9px 12px; gap: 5px; flex-wrap: wrap; overflow-x: visible; }
  .dialog-tabs button { min-height: 44px; font-size: 12px; padding: 8px 10px; }
  .case-content { padding: 22px 18px; }
  .case-lead { font-size: clamp(24px, 6.8vw, 32px); }
  .case-block p, .case-block ul, .case-custom p { font-size: 15px; }
  .case-custom { padding: 20px; }
  .demo-notice { flex-wrap: wrap; gap: 2px 12px; font-size: 12px; line-height: 1.6; }
  .demo-notice button { font-size: 12px; min-height: 36px; }
  .demo-frame { min-width: 0; }
  .privacy-dialog { max-height: calc(100dvh - 24px); padding: 22px; }
  .privacy-dialog p { font-size: 15px; }
  .toast { width: max-content; max-width: calc(100% - 32px); overflow-wrap: anywhere; }
}
@media screen and (max-width: 600px) {
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact-form .actions { flex-direction: column; align-items: flex-start; }
  .contact-form .button { width: 100%; }
  /* Keep the original artwork square; give summaries the full reading width. */
  .article-card { grid-template-columns: clamp(88px, 26vw, 122px) minmax(0, 1fr); gap: 12px 16px; align-items: start; padding: 24px 0; }
  .article-card > div { display: contents; }
  .article-card > .article-cover { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; align-self: start; }
  .article-card .article-meta { grid-column: 2; grid-row: 1; font-size: 11px; gap: 3px 9px; }
  .article-card h3 { grid-column: 2; grid-row: 2; font-size: clamp(21px, 5.7vw, 26px); line-height: 1.27; margin: 0; }
  .article-card p { grid-column: 1 / -1; grid-row: 3; font-size: 15px; margin-top: 3px; }
}
@media screen and (max-width: 380px) {
  .header-inner { gap: 6px; }
  .brand { font-size: 14px; gap: 7px; }
  .brand img { width: 25px; height: 28px; }
  .header-tools { gap: 6px; }
  .languages a { min-width: 31px; padding: 4px 7px; }
  .hero-inner { width: calc(100% - 34px); }
  .hero .actions { align-items: flex-start; gap: 10px; }
  .hero .button { width: 100%; }
  .hero .text-link { font-size: 13px; }
  .hero-portrait { grid-template-columns: 98px minmax(0, 1fr); gap: 0 14px; }
  .portrait-caption span, .portrait-region { font-size: 11px; }
  .focus-strip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .project-index { grid-template-columns: minmax(0, 1fr); }
  .project-tab small { margin-top: 2px; }
  .project-tab .icon { display: block; width: 17px; }
  .live-task { align-items: flex-start; padding: 16px; }
  .live-task .button { padding: 10px 13px; gap: 10px; }
  .experience-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .experience-item > span { padding-top: 0; }
  .article-card { gap: 10px 14px; }
}
@media screen and (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .site-header { position: relative; }
  .project-dialog { width: calc(100% - 16px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
  .dialog-head { padding-block: 7px; }
  .dialog-tabs { padding-block: 4px; }
  .dialog-tabs button { min-height: 36px; }
  .reading-progress { top: 0; }
}