:root{color-scheme:light;--bg:#f7f6f2;--surface:#eeeee7;--paper:#fbfaf7;--ink:#242d29;--muted:#59645c;--line:#cdd5cb;--accent:#2d5d4d;--soft:#e1e9df;--contact:#243e33;--contact-ink:#f7f6f2;--contact-muted:#d0dccf;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}

:root[data-theme=dark]{color-scheme:dark;--bg:#161c19;--surface:#202a23;--paper:#1a221d;--ink:#e9ede5;--muted:#b0bdaf;--line:#3b4c3e;--accent:#b5d4ac;--soft:#2a3c2d;--contact:#cadcbe;--contact-ink:#182218;--contact-muted:#394c34}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.75 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--bg)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.skip{position:absolute;left:20px;top:-100px;z-index:10;padding:12px 18px;background:var(--ink);color:var(--bg)}
.skip:focus{top:12px}
.wrap{max-width:1400px;margin:auto;padding:0 6%}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:400;letter-spacing:-.045em;line-height:1.15}
h2{font-size:clamp(34px,3.6vw,49px)}
h3{font-size:29px}
p+p{margin-top:18px}
p{max-width:72ch}
img{max-width:100%;display:block}
header{padding:25px 0;display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center;border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:12px;width:fit-content;font-size:16px;font-weight:600;line-height:1.3}
.wordmark:hover{text-decoration:none}
.initials{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;flex-shrink:0;background:var(--accent);color:var(--bg);font-size:14px;letter-spacing:-.05em;font-weight:400}
nav{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:16px;line-height:1.5}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink)}
.theme-toggle:hover{background:var(--soft)}
.theme-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}
.sun{display:none}
[data-theme=dark] .sun{display:block}
[data-theme=dark] .moon{display:none}
.eyebrow,.status{font:14px/1.7 var(--mono);color:var(--accent)}
.eyebrow{letter-spacing:.01em}
.hero{padding:62px 0 48px}
.hero h1{font-size:clamp(42px,5.8vw,81px);line-height:1.05;letter-spacing:-.055em;margin:26px 0 40px}
.hero h1 span{color:var(--accent)}
.desktop-break{display:none}
.hero-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:9%}
.lead{font-size:25px;line-height:1.5;letter-spacing:-.02em;color:var(--ink);margin-bottom:20px}
.hero-grid p:not(.lead):not(.eyebrow){color:var(--muted)}
.hero-aside{border-left:2px solid var(--line);padding-left:28px}
.hero-aside .eyebrow{margin-bottom:18px}
.hero-aside .text-link{margin-top:20px}
.link-row{display:flex;flex-wrap:wrap;gap:13px 25px;align-items:center;margin-top:25px}
.button{display:inline-flex;gap:30px;align-items:center;justify-content:space-between;padding:13px 20px;background:var(--accent);color:var(--bg);border:1px solid var(--accent);border-radius:4px;font-size:17px}
.button:hover{text-decoration:none;filter:brightness(1.1)}
.text-link{display:inline-block;padding:6px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--accent)}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:25px;margin-top:38px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.hero-foot a{color:var(--accent)}
.section{padding:76px 0;border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;align-items:end;margin:19px 0 42px}
.section-head>p{color:var(--muted)}
.project{min-width:0}
.project h3{font-size:36px;margin:13px 0 21px}
.project p{color:var(--muted)}
.project .status{color:var(--accent)}
.project .project-lead{font-size:22px;line-height:1.5;letter-spacing:-.02em;color:var(--ink);margin-bottom:18px}
.range-project{display:grid;grid-template-columns:1.1fr 1fr;gap:7%;padding-bottom:40px}
.project .tech{font:14px/1.8 var(--mono);color:var(--accent);margin-top:23px}
.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:7%;border-top:1px solid var(--line);padding-top:40px}
.project-pair .project{display:flex;flex-direction:column}
.project-pair .compact-diagram{margin-top:28px}
.project-pair .tech{margin-top:18px}
.diagram{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:27px;align-self:start}
.diagram figcaption{font-size:15px;color:var(--muted);line-height:1.7}
.diagram figcaption strong{display:block;font-size:24px;line-height:1.35;letter-spacing:-.025em;font-weight:400;color:var(--ink);margin:14px 0 25px}
.diagram-stack{list-style:none;padding:0;margin:0;display:grid;gap:25px}
.diagram-stack li{position:relative;padding:15px 18px;border:1px solid var(--line);background:var(--paper)}
.diagram-stack li+li:before{content:'↓';position:absolute;left:50%;top:-28px;color:var(--accent)}
.diagram b,.research-path b,.lifecycle b{display:block;font-size:18px;font-weight:400;color:var(--ink)}
.diagram span{display:block;font-size:15px;color:var(--muted);line-height:1.6}
.diagram-branches{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding-top:30px;position:relative}
.diagram-branches:before{content:'↓';position:absolute;left:50%;top:0;color:var(--accent)}
.diagram-branches>div{padding:13px;background:var(--soft)}
.diagram .diagram-note{font-size:14px;line-height:1.7;color:var(--muted);margin-top:20px}
.compact-diagram{padding:22px;width:100%}
.mini-flow{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-flow li{font-size:16px;line-height:1.5;border-left:2px solid var(--accent);padding-left:12px}
.lineage{display:grid;grid-template-columns:1fr 2fr;gap:7%;padding-top:35px;margin-top:38px;border-top:1px solid var(--line)}
.lineage h3{font-size:24px}
.lineage p{font-size:17px;color:var(--muted)}
.lineage a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
details{margin-top:23px;border-top:1px solid var(--line);padding-top:16px}
summary{cursor:pointer;color:var(--accent);font-size:17px;width:fit-content;max-width:100%}
details p{font-size:17px;margin-top:18px}
details[open] summary{margin-bottom:18px}
.research-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:8%;row-gap:36px}
.research-grid h3{font-size:28px;margin-bottom:22px}
.research-grid p{color:var(--muted)}
.workflow{padding-top:38px;margin-top:42px;border-top:1px solid var(--line)}
.workflow-head{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;margin-bottom:27px}
.workflow-head h3{font-size:29px}
.workflow-head p{color:var(--muted);font-size:17px}
.lifecycle{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:step}
.lifecycle li{background:var(--bg);padding:20px;counter-increment:step;min-width:0}
.lifecycle li:before{content:counter(step,decimal-leading-zero);font:14px/1.6 var(--mono);color:var(--accent);display:block;margin-bottom:10px}
.lifecycle span{font-size:15px;line-height:1.6;color:var(--muted);display:block;margin-top:7px}
.talk-list{border-top:1px solid var(--line)}
.talk{display:grid;grid-template-columns:190px 1fr;gap:35px;border-bottom:1px solid var(--line);padding:30px 0}
.talk-event{font:15px/1.8 var(--mono);color:var(--accent)}
.talk-event time{display:block;color:var(--muted);font-size:14px;margin-top:5px}
.talk h3{font-size:28px;margin-bottom:17px}
.talk p{color:var(--muted);max-width:800px}
.about-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:9%}
.about-grid h2{margin-top:19px}
.about-grid p:not(.lead){color:var(--muted)}
.about-grid .text-link{margin-top:22px}
.renovation{padding-bottom:65px}
.renovation-intro{display:grid;grid-template-columns:1fr 1.6fr;gap:9%;margin-bottom:28px}
.renovation-intro h3{font-size:clamp(30px,3vw,40px);margin-top:15px}
.renovation-intro p:not(.eyebrow){color:var(--muted);font-size:18px}
.renovation-intro .renovation-lead{font-size:23px;color:var(--ink);line-height:1.5;letter-spacing:-.02em}
.renovation-intro .renovation-purpose{padding:18px 22px;border-left:3px solid var(--accent);background:var(--soft);color:var(--ink)}
.renovation-photos{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:0}
.renovation-photos>summary{width:100%;padding:22px 26px;font-size:19px;line-height:1.5}
.renovation-photos>summary .gallery-hint{display:block;margin:6px 0 0 22px;font-size:16px;color:var(--muted)}
.renovation-photos[open]>summary{border-bottom:1px solid var(--line);margin-bottom:0}
.renovation-gallery{padding:28px}
.renovation-room+.renovation-room{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.room-heading{margin-bottom:22px;max-width:760px}
.room-heading h4{margin:0;font-size:25px;font-weight:400;letter-spacing:-.025em;line-height:1.3}
.room-heading p{font-size:18px;margin-top:12px}
.photo-label{display:inline-block;margin-right:7px;font-weight:600;color:var(--accent)}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.photo-pair img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:5px}
.photo-pair .kitchen-before{object-position:center 65%}
figcaption{margin-top:10px;font-size:15px;color:var(--muted)}
.diagram figcaption{margin:0}
.bathroom-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
.bathroom-gallery img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:5px}
.renovation details p{color:var(--muted)}
.renovation figcaption{font-size:16px;line-height:1.6}
.contact{padding:43px;margin-bottom:28px;background:var(--contact);color:var(--contact-ink);border-radius:5px;display:grid;grid-template-columns:1.1fr 1fr;gap:8%}
.contact .eyebrow{color:var(--contact-muted)}
.contact h2{font-size:clamp(32px,3.1vw,43px);margin:16px 0 22px}
.contact p{color:var(--contact-muted)}
.contact-links{align-self:center;min-width:0}
.contact-links a{display:flex;justify-content:space-between;gap:14px;padding:17px 0;border-bottom:1px solid var(--contact-muted);font-size:17px}
.contact-links span:first-child{overflow-wrap:anywhere;min-width:0}
.contact a:focus-visible{outline-color:var(--contact-ink)}
footer{display:flex;justify-content:space-between;gap:20px;padding:10px 0 30px;font-size:14px;color:var(--muted)}
footer a{color:var(--accent)}

@media(min-width:1350px){.desktop-break{display:block}
.hero h1{font-size:78px}
}

@media(max-width:1100px){header{gap:19px}
nav{gap:12px 16px;font-size:15px}
.hero-grid{gap:6%}
.contact{grid-template-columns:1fr;gap:25px}
.contact-links{width:100%}
.range-project{gap:5%}
.diagram{padding:22px}
}

@media(max-width:900px){header{grid-template-columns:1fr auto;gap:20px;padding:22px 0}
nav{grid-column:1/-1;grid-row:2;font-size:16px;gap:12px 24px}
.theme-toggle{grid-column:2;grid-row:1}
.hero{padding-top:40px}
.hero h1{font-size:clamp(38px,6.3vw,62px)}
.hero-grid{grid-template-columns:1fr;gap:30px}
.hero-aside{max-width:720px}
.section{padding:58px 0}
.section-head,.range-project,.research-example,.workflow-head,.about-grid,.renovation-intro{grid-template-columns:1fr;gap:26px}
.range-project .diagram{max-width:650px;width:100%}
.project-pair{gap:5%}
.project-pair .project h3{font-size:30px}
.section-head{align-items:start}
.talk{grid-template-columns:145px 1fr;gap:26px}
.lifecycle{grid-template-columns:repeat(2,minmax(0,1fr))}
.lineage{grid-template-columns:1fr;gap:18px}
.renovation-intro{gap:22px}
.desktop-break{display:none}
}

@media(max-width:650px){body{font-size:18px}
.wrap{padding:0 6%}
.wordmark{font-size:15px}
.initials{width:40px;height:40px}
nav{gap:12px 21px}
.hero{padding-top:32px}
.hero h1{font-size:clamp(30px,7.2vw,46px);letter-spacing:-.045em;line-height:1.12;margin:23px 0 28px}
.lead{font-size:23px}
.hero-aside{padding-left:20px}
.hero-foot{font-size:15px}
.section{padding:46px 0}
.section-head{margin-bottom:30px}
.project-pair,.research-grid{grid-template-columns:1fr;gap:34px}
.project-pair .project+.project{border-top:1px solid var(--line);padding-top:32px}
.project h3,.project-pair .project h3{font-size:31px}
.project .project-lead{font-size:22px}
.diagram{padding:22px 18px}
.diagram-branches{grid-template-columns:1fr}
.diagram-branches>div{padding:14px}
.diagram b{font-size:18px}
.diagram span{font-size:16px}
.diagram .diagram-note{font-size:15px}
.mini-flow{gap:20px 12px}
.talk{grid-template-columns:1fr;gap:14px}
.talk h3{font-size:26px}
.talk-event time{margin:0}
.research-grid h3{font-size:28px}
.about-grid .lead{font-size:23px}
.photo-pair,.bathroom-gallery{grid-template-columns:1fr;gap:22px}
.photo-pair img{aspect-ratio:4/3}
.bathroom-gallery{max-width:430px;margin-inline:auto}
.renovation-gallery{padding:22px 18px}
.renovation-photos>summary{padding:20px 18px}
.room-heading h4{font-size:24px}
.renovation{padding-bottom:46px}
.contact{padding:28px 22px}
.contact h2{font-size:33px}
.contact-links a{font-size:16px}
.link-row{gap:14px 22px}
.lifecycle li{padding:17px 14px}
footer{flex-wrap:wrap}
h2{font-size:34px}
}

@media(max-width:360px){.hero h1{font-size:30px}
.lifecycle{grid-template-columns:1fr}
.mini-flow{grid-template-columns:1fr}
.contact h2{font-size:29px}
h2{font-size:31px}
.project h3,.project-pair .project h3{font-size:29px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}

@media print{header,.hero .link-row,.contact-links,footer a{display:none}
.wrap{max-width:none;padding:0}
.section{padding:28px 0}
.hero h1{font-size:40px}
.hero-grid,.section-head,.range-project,.project-pair,.research-grid,.research-example,.workflow-head,.about-grid,.renovation-intro,.talk,.contact{display:block}
.diagram{break-inside:avoid;margin:20px 0}
.contact{background:transparent;color:inherit;padding:20px 0}
.contact p{color:inherit}
}


.hero h1{margin-top:0;margin-bottom:10px}
.hero-role{font-size:30px;line-height:1.35;letter-spacing:-.025em;color:var(--accent);margin-bottom:32px}
.engineering-leadership{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr;gap:7%;border-top:1px solid var(--line);padding-top:32px;margin-top:10px}
.research-grid .text-link{margin-top:18px}
@media(max-width:900px){.engineering-leadership{grid-template-columns:1fr;gap:8px}}

.research-notebook{border-top:1px solid var(--line);padding-top:38px;margin-top:42px}
.research-notebook>h3{font-size:30px;margin:14px 0 20px}
.notebook-intro{color:var(--muted);margin-bottom:28px}
.research-themes{border-top:1px solid var(--line)}
.research-themes article{display:grid;grid-template-columns:1fr 1.8fr;gap:8%;padding:26px 0;border-bottom:1px solid var(--line)}
.research-themes h4{margin:0;font-size:24px;font-weight:400;line-height:1.3;letter-spacing:-.025em}
.research-themes p{color:var(--muted);font-size:18px}
.research-themes .potential{margin-top:13px}
.potential>span{display:block;font:14px/1.8 var(--mono);color:var(--accent);margin-bottom:3px}
@media(max-width:750px){.research-themes article{grid-template-columns:1fr;gap:16px}.research-themes h4 br{display:none}}

/* Give each capability a clear reading boundary without turning it into a product card. */
.capabilities-grid{row-gap:34px}
.capabilities-grid>article:not(.engineering-leadership){border-top:2px solid var(--line);padding-top:24px}
.capabilities-grid h3{font-size:28px;line-height:1.25;max-width:24ch}
.capabilities-grid .engineering-leadership h3{max-width:18ch}
@media(max-width:650px){.capabilities-grid h3{font-size:26px}.capabilities-grid{gap:30px}}