/* A quiet, glassy surface. All navigation and form behavior work without JavaScript. */
:root {
  color-scheme: dark;
  --bg: #101714;
  --text: #edf1e9;
  --muted: #a5b0a8;
  --subtle: #829086;
  --accent: #c5ebcb;
  --accent-strong: #a5deb0;
  --accent-ink: #182c1e;
  --border: rgba(211, 232, 215, .13);
  --border-strong: rgba(211, 232, 215, .24);
  --glass: rgba(217, 240, 222, .035);
  --glass-top: rgba(217, 240, 222, .065);
  --input: rgba(3, 12, 7, .22);
  --header: rgba(29, 39, 32, .7);
  --ambient: rgba(91, 139, 96, .15);
  --shadow: rgba(0, 0, 0, .18);
  --error: #f1ada8;
  --art-line: rgba(198, 231, 202, .12);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f4f0;
  --text: #25382c;
  --muted: #58695d;
  --subtle: #65786b;
  --accent: #355d42;
  --accent-strong: #315c40;
  --accent-ink: #f6fff7;
  --border: rgba(43, 76, 53, .14);
  --border-strong: rgba(43, 76, 53, .25);
  --glass: rgba(255, 255, 255, .38);
  --glass-top: rgba(255, 255, 255, .75);
  --input: rgba(255, 255, 255, .57);
  --header: rgba(255, 255, 255, .67);
  --ambient: rgba(137, 181, 147, .20);
  --shadow: rgba(35, 65, 40, .055);
  --error: #9d3330;
  --art-line: rgba(43, 76, 53, .13);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 40px; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 100%; height: 1080px; top: 0; background: radial-gradient(ellipse at 77% 30%, var(--ambient), transparent 46%), radial-gradient(ellipse at 1% 0%, var(--ambient), transparent 38%); }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
img { max-width: 100%; display: block; }
svg { display: block; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; }
h1 { font-size: clamp(46px, 5.4vw, 76px); line-height: 1.12; letter-spacing: 0; }
h1 > span { color: var(--accent); }
h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.2; letter-spacing: 0; }
h3 { font-size: 22px; line-height: 1.3; letter-spacing: 0; }
p { color: var(--muted); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 5px; }
[hidden] { display: none !important; }
.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; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px 18px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-shell { width: min(1192px, calc(100% - 96px)); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; margin: 29px 0 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 40px; flex: 0 0 38px; color: var(--accent); }
.brand-name { font-size: 17px; letter-spacing: -.5px; font-weight: 400; }
.brand-name > span:not(.brand-dot) { font-weight: 650; }
.brand-dot { color: var(--accent); }
.main-nav { display: flex; align-items: center; gap: 5px; padding: 6px; border-radius: 100px; border: 1px solid var(--border-strong); background: var(--header); box-shadow: inset 0 1px 0 var(--glass-top), 0 8px 25px var(--shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.main-nav a { padding: 9px 21px; border-radius: 100px; color: var(--muted); font-size: 13px; line-height: 1.7; transition: color .2s, background .2s; }
.main-nav a:hover { color: var(--text); background: var(--glass-top); }
.main-nav a.active { color: var(--text); background: linear-gradient(145deg, var(--glass-top), var(--glass)); box-shadow: inset 0 0 0 1px var(--border), 0 2px 8px var(--shadow); }
.header-actions { display: flex; gap: 22px; align-items: center; }
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 50%; color: var(--muted); }
.theme-toggle:hover { background: var(--glass-top); border-color: var(--border); color: var(--text); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-moon { display: none; }
[data-theme="light"] .theme-moon { display: block; }
[data-theme="light"] .theme-sun { display: none; }
.header-connect { display: inline-flex; align-items: center; gap: 20px; font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--border-strong); padding: 7px 0; }
.header-connect span { font-size: 19px; color: var(--accent); }
.header-connect:hover { border-color: var(--accent); }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; min-height: 655px; gap: 12px; padding: 64px 0 75px; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 10px; line-height: 1.8; letter-spacing: 1.55px; color: var(--subtle); font-weight: 550; }
.status-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 4px var(--glass); }
.hero h1 { margin-top: 25px; }
.hero-description { max-width: 458px; margin-top: 26px; font-size: 16px; line-height: 1.85; }
.button-row { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 48px; padding: 12px 22px; border-radius: 10px; font-size: 13px; line-height: 1.6; font-weight: 550; border: 1px solid transparent; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.button-primary { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 16px var(--shadow); }
.button-primary:hover:not(:disabled) { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 8px 24px var(--shadow); }
.button span { font-size: 18px; line-height: 1; }
.text-link { display: inline-flex; align-items: center; gap: 17px; color: var(--text); font-size: 13px; font-weight: 500; }
.text-link > span[aria-hidden] { font-size: 19px; color: var(--accent); transition: transform .2s; }
.text-link:hover > span[aria-hidden] { transform: translate(3px,-1px); }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 36px; font-size: 11px; color: var(--subtle); }
.tiny-cross { font-size: 22px; color: var(--accent); font-weight: 300; }
.hero-note .tiny-cross { font-size: 17px; }
.hero-art { position: relative; height: 450px; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; inset: 30% 8% 5%; border-radius: 50%; background: radial-gradient(ellipse, rgba(146,205,147,.12), transparent 65%); filter: blur(24px); }
.art-orbit { position: absolute; width: 330px; height: 330px; left: calc(50% - 165px); top: 40px; border: 1px solid var(--art-line); border-radius: 50%; transform: rotate(-24deg) scaleY(.83); }
.orbit-two { width: 410px; height: 410px; left: calc(50% - 205px); top: 0; border-style: dashed; opacity: .65; transform: rotate(24deg) scaleY(.83); }
.glass-sculpture { position: absolute; width: 275px; height: 275px; left: calc(50% - 137px); top: 85px; }
.glass-slab { position: absolute; inset: 0; border-radius: 56px; border: 1px solid rgba(211,247,216,.37); background: linear-gradient(138deg, rgba(230,255,232,.11) 0%, rgba(195,244,207,.025) 40%, rgba(167,221,181,.055) 69%, rgba(210,250,218,.17) 100%); box-shadow: inset 1px 1px 1px rgba(246,255,247,.32), inset -1px -1px 1px rgba(214,250,225,.2), inset 8px 8px 30px rgba(221,255,228,.025), 12px 22px 35px rgba(0,0,0,.15); backdrop-filter: blur(4px); }
.slab-front { display: grid; place-items: center; overflow: hidden; background-color: rgba(103,147,110,.045); }
.slab-front::after { content: ""; position: absolute; inset: 12px; border-radius: 44px; border: 1px solid rgba(213,244,220,.16); box-shadow: inset 0 0 16px rgba(183,234,190,.055); }
.slab-front svg { width: 111px; height: 111px; color: rgba(218,248,223,.85); stroke-width: 2; filter: drop-shadow(0 3px 3px rgba(0,0,0,.12)); }
.slab-shine { position: absolute; width: 150%; height: 40%; left: -20%; top: -12%; transform: rotate(-26deg); background: linear-gradient(0deg, transparent, rgba(231,255,235,.1), transparent); filter: blur(9px); }
.art-caption { position: absolute; bottom: 0; left: 50%; width: max-content; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 16px 22px 16px 16px; border: 1px solid var(--border-strong); border-radius: 15px; background: var(--header); box-shadow: inset 0 1px 0 var(--glass-top), 0 8px 24px var(--shadow); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
.caption-symbol { display: grid; place-items: center; width: 36px; height: 36px; font-size: 21px; color: var(--accent); border: 1px solid var(--border); border-radius: 9px; background: var(--glass); }
.art-caption div > span { display: block; font-size: 8px; letter-spacing: 1.4px; color: var(--subtle); }
.art-caption strong { display: block; font-size: 12px; font-weight: 450; margin-top: 3px; }
.art-coordinate { position: absolute; color: var(--subtle); font-size: 8px; letter-spacing: 1.5px; }
.coordinate-top { right: 13%; top: 13px; }
.art-cross { position: absolute; color: var(--subtle); font-size: 17px; font-weight: 300; }
.cross-one { top: 86px; left: 7%; }.cross-two { bottom: 98px; right: 3%; }
[data-theme="light"] .glass-slab { border-color: rgba(70,113,79,.28); background-color: rgba(115,169,128,.10); box-shadow: inset 1px 1px 1px rgba(255,255,255,.9), inset -1px -1px 1px rgba(74,118,84,.2), 12px 22px 35px rgba(41,79,49,.07); }
[data-theme="light"] .slab-front svg { color: rgba(45,91,58,.8); }
[data-theme="light"] .slab-front::after { border-color: rgba(62,111,75,.14); }
.section-space { padding: 80px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 35px; }
.section-heading h2 { margin-top: 14px; }
.section-heading > p { font-size: 14px; line-height: 1.8; padding-bottom: 4px; }
.services { border-top: 1px solid var(--border); }
.glass-panel { border: 1px solid var(--border); background: linear-gradient(135deg, var(--glass-top), var(--glass)); box-shadow: inset 0 1px 0 var(--glass), 0 12px 35px var(--shadow); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { padding: 28px; border-radius: 18px; transition: border-color .25s, transform .25s; }
.service-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.card-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.service-icon { width: 43px; height: 43px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--border); border-radius: 12px; background: var(--glass); }
.service-icon svg { width: 24px; height: 24px; stroke-width: 1.2; }
.card-number { font-size: 10px; color: var(--subtle); letter-spacing: 2px; }
.service-card h3 { font-size: 20px; margin-bottom: 13px; }
.service-card > p { font-size: 13px; line-height: 1.85; min-height: 73px; }
.service-detail { display: flex; gap: 10px; margin-top: 27px; padding-top: 17px; border-top: 1px solid var(--border); color: var(--subtle); font-size: 10px; }
.home-evidence, .working-process { border-top: 1px solid var(--border); }
.evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.evidence-card { padding: 28px; border-radius: 18px; }
.evidence-organization { color: var(--accent); font-size: 13px; margin-bottom: 12px; }
.evidence-card h3 { font-size: 21px; }
.evidence-card > p:last-child { font-size: 14px; line-height: 1.85; margin-top: 16px; }
.evidence-link { margin-top: 26px; }
.working-process .principle-grid { margin-top: 0; }
.project-content > .project-description { padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 650px) { .evidence-grid { grid-template-columns: 1fr; }.evidence-card { padding: 24px; } }
.work-invitation { display: flex; align-items: center; gap: 27px; padding: 34px 0 68px; border-bottom: 1px solid var(--border); }
.invitation-mark { width: 65px; height: 65px; display: grid; place-items: center; flex: 0 0 65px; border: 1px solid var(--border-strong); border-radius: 20px; background: linear-gradient(140deg, var(--glass-top), var(--glass)); }
.invitation-mark span { font-size: 35px; color: var(--accent); font-weight: 300; }
.work-invitation h2 { font-size: 25px; margin-top: 8px; }
.work-invitation p:not(.eyebrow) { font-size: 13px; margin-top: 9px; }
.work-invitation > .text-link { margin-left: auto; white-space: nowrap; }
.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: start; padding-top: 100px; padding-bottom: 110px; }
.contact-copy { padding-top: 17px; }
.contact-copy h2 { font-size: clamp(42px,4.5vw,60px); margin-top: 22px; line-height: 1.16; }
.contact-copy > p:not(.eyebrow) { margin-top: 23px; font-size: 14px; line-height: 1.9; }
.contact-methods { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.contact-methods a { display: flex; align-items: center; gap: 13px; max-width: 365px; }
.contact-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--border); border-radius: 12px; color: var(--subtle); }
.contact-icon svg { width: 19px; height: 19px; stroke-width: 1.35; }
.contact-methods small { display: block; font-size: 8px; letter-spacing: 1.4px; color: var(--subtle); margin-bottom: 3px; }
.contact-methods strong { font-size: 13px; font-weight: 450; }
.contact-arrow { margin-left: auto; font-size: 17px; color: var(--subtle); }
.contact-methods a:hover strong { color: var(--accent); }
.contact-form-panel { border-radius: 22px; padding: 29px; }
.form-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 23px; }
.form-heading h3 { font-size: 24px; }
.form-heading > span { color: var(--accent); font-size: 24px; }
.form-notice { background: var(--glass); border: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.75; padding: 13px 15px; border-radius: 10px; margin-bottom: 21px; }
.form-notice a, .body-large a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.success-notice strong { color: var(--accent); font-weight: 550; }
.success-notice p { margin-top: 4px; }
.contact-form fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 18px; min-width: 0; }
.form-field label { display: block; font-size: 11px; font-weight: 450; margin-bottom: 7px; }
.form-field input, .form-field textarea { border: 1px solid var(--border); background: var(--input); color: var(--text); padding: 12px 13px; border-radius: 8px; display: block; width: 100%; font-size: 12px; }
.form-field input { min-height: 44px; }.form-field textarea { resize: vertical; min-height: 113px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--subtle); opacity: .85; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); outline-offset: 2px; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-submit { width: 100%; justify-content: space-between; margin-top: 1px; min-height: 44px; }
fieldset:disabled input, fieldset:disabled textarea { opacity: .65; cursor: not-allowed; }
fieldset:disabled .form-submit { opacity: .45; cursor: not-allowed; }
.form-footnote { text-align: center; color: var(--subtle); font-size: 10px; margin-top: 14px; }
.validation-summary-errors { border: 1px solid var(--error); border-radius: 8px; padding: 10px 16px; color: var(--error); margin-bottom: 18px; font-size: 12px; }
.validation-summary-valid { display: none; }
.validation-summary ul { margin: 0; padding-left: 14px; }
.field-error { display: block; color: var(--error); font-size: 11px; margin-top: 5px; }
.input-validation-error { border-color: var(--error) !important; }
.site-footer { border-top: 1px solid var(--border); min-height: 104px; display: flex; align-items: center; gap: 28px; padding: 25px 0; }
.footer-name { font-size: 14px; font-weight: 550; letter-spacing: -.5px; }.footer-name span { color: var(--accent); }
.site-footer > p { font-size: 10px; color: var(--subtle); }
.footer-links { display: flex; align-items: center; gap: 24px; margin-left: auto; font-size: 10px; color: var(--muted); }
.footer-links a:hover { color: var(--text); }.footer-links a > span[aria-hidden] { margin-left: 5px; }
.copyright { color: var(--subtle); }
.page-hero { padding: 99px 0 85px; }
.page-hero h1 { margin-top: 23px; font-size: clamp(45px,5vw,67px); }
.about-hero { display: grid; grid-template-columns: 1.3fr .85fr; align-items: center; gap: 92px; }
.about-intro { color: var(--text); font-size: 21px; letter-spacing: -.4px; margin-top: 30px; }
.body-large { font-size: 16px; line-height: 1.85; }
.about-copy .body-large { margin-top: 16px; max-width: 510px; }
.about-copy .text-link { margin-top: 30px; }
.portrait-frame { border-radius: 23px; padding: 12px; }
.portrait-placeholder, .headshot { width: 100%; border-radius: 13px; }
.headshot { display: block; height: auto; aspect-ratio: 6 / 5; object-fit: cover; }
.portrait-placeholder { height: 340px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); background: radial-gradient(ellipse at 50% 40%, rgba(130,174,137,.13), transparent 70%), var(--glass); }
.portrait-initials { font-size: 137px; line-height: 1; letter-spacing: -17px; font-weight: 350; color: var(--accent); opacity: .8; padding-right: 18px; padding-bottom: 25px; }
.portrait-initials span { color: var(--text); opacity: .7; }
.portrait-line { position: absolute; width: 340px; height: 340px; border: 1px solid var(--art-line); border-radius: 50%; transform: rotate(-30deg) scaleY(.64); }
.line-two { transform: rotate(34deg) scaleY(.64); width: 390px; height: 390px; }
.portrait-placeholder-note { position: absolute; bottom: 23px; font-size: 8px; letter-spacing: 1.5px; color: var(--subtle); }
.portrait-caption { display: flex; align-items: center; justify-content: space-between; padding: 17px 10px 7px; }
.portrait-caption strong { display: block; font-size: 13px; font-weight: 500; }.portrait-caption div > span { display: block; color: var(--subtle); font-size: 10px; margin-top: 3px; }
.about-principles { border-top: 1px solid var(--border); }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 42px; margin-top: 45px; }
.principle-index { color: var(--accent); font-size: 11px; letter-spacing: 1px; }
.principle-grid h3 { font-size: 19px; margin: 18px 0 13px; }.principle-grid p { font-size: 13px; line-height: 1.9; }
.experience-section { display: grid; grid-template-columns: 1fr 1.25fr; gap: 90px; border-top: 1px solid var(--border); }
.experience-section h2 { margin-top: 16px; }
.experience-list { border-left: 1px solid var(--border-strong); padding-left: 35px; }
.experience-item { position: relative; padding-bottom: 39px; }.experience-item:last-child { padding-bottom: 0; }
.experience-item::before { content: ""; position: absolute; left: -40px; top: 9px; width: 9px; height: 9px; border: 2px solid var(--bg); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--border-strong); }
.experience-period { color: var(--subtle); font-size: 11px; margin-bottom: 12px; }
.experience-item h3 { font-size: 21px; }.experience-organization { color: var(--accent); font-size: 13px; margin-top: 7px; }.experience-item p:last-child { font-size: 13px; line-height: 1.9; margin-top: 13px; }
.experience-empty { padding: 25px; border-radius: 15px; }.empty-icon { display: inline-block; color: var(--accent); font-size: 30px; margin-bottom: 12px; }.experience-empty h3 { font-size: 20px; }.experience-empty p { font-size: 13px; margin: 12px 0 22px; }
.simple-cta { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 42px 0 65px; }.simple-cta h2 { font-size: 31px; margin-top: 12px; }.simple-cta p:not(.eyebrow) { font-size: 14px; margin-top: 12px; }.simple-cta .button { flex-shrink: 0; }
.portfolio-hero { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 70px; padding-bottom: 66px; }
.portfolio-intro { padding-bottom: 3px; }.portfolio-intro > p { font-size: 15px; line-height: 1.85; }.portfolio-intro .text-link { margin-top: 23px; }
.portfolio-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 23px 0; border-top: 1px solid var(--border); margin-bottom: 16px; gap: 20px; }
.category-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.filter-link { font-size: 11px; padding: 9px 16px; border-radius: 100px; border: 1px solid transparent; color: var(--muted); }
.filter-link:hover { background: var(--glass); color: var(--text); }.filter-link.selected { background: var(--glass-top); border-color: var(--border-strong); color: var(--accent); box-shadow: inset 0 1px 0 var(--glass-top); }
.project-count { font-size: 11px; white-space: nowrap; color: var(--subtle); }
.sample-notice { display: flex; align-items: center; gap: 13px; padding: 14px 18px; margin-bottom: 25px; border: 1px solid var(--border); border-radius: 11px; background: var(--glass); }
.sample-notice p { font-size: 12px; }.sample-badge { font-size: 8px; letter-spacing: 1px; color: var(--accent); }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.project-card { --project-color: #b9dec1; --project-rgb: 185,222,193; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.accent-blue { --project-color: #b9d1de; --project-rgb: 185,209,222; }
.accent-lilac { --project-color: #d4cfb6; --project-rgb: 212,207,182; }
.project-preview { position: relative; height: 270px; border-bottom: 1px solid var(--border); overflow: hidden; background: radial-gradient(ellipse at 55% 45%, rgba(var(--project-rgb),.08), transparent 70%), rgba(0,0,0,.06); }
.project-preview > img { width: 100%; height: 100%; object-fit: cover; }
.preview-category { position: absolute; top: 18px; left: 20px; color: var(--muted); font-size: 9px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 100px; background: var(--header); backdrop-filter: blur(12px); }
.project-sample-label { position: absolute; top: 23px; right: 20px; font-size: 10px; color: var(--subtle); }
.project-illustration { position: absolute; inset: 0; }
.preview-window { position: absolute; width: 218px; height: 145px; border: 1px solid rgba(var(--project-rgb),.3); border-radius: 13px; top: 65px; left: calc(50% - 109px); background: linear-gradient(140deg, rgba(var(--project-rgb),.07), rgba(var(--project-rgb),.015)); box-shadow: inset 0 1px 0 rgba(var(--project-rgb),.08), 15px 20px 25px rgba(0,0,0,.08); backdrop-filter: blur(4px); }
.preview-window::before { content: ""; position: absolute; inset: -12px 13px 13px -12px; border: 1px solid rgba(var(--project-rgb),.1); border-radius: 13px; z-index: -1; }
.preview-window-bar { display: flex; gap: 4px; padding: 12px; border-bottom: 1px solid rgba(var(--project-rgb),.13); }.preview-window-bar i { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--project-rgb),.4); }
.preview-window-body { display: flex; align-items: center; gap: 21px; height: 107px; padding: 0 25px; }.preview-symbol { font-size: 47px; color: var(--project-color); font-weight: 200; line-height: 1; }.preview-lines { flex: 1; }.preview-lines i { display: block; height: 4px; margin: 10px 0; border-radius: 3px; background: rgba(var(--project-rgb),.19); }.preview-lines i:nth-child(2) { width: 65%; }.preview-lines i:nth-child(3) { width: 83%; }
.preview-orbit { position: absolute; border: 1px solid rgba(var(--project-rgb),.1); border-radius: 50%; width: 360px; height: 200px; left: calc(50% - 180px); top: 38px; transform: rotate(-18deg); }
.preview-grid-mark { position: absolute; right: 35px; bottom: 25px; color: var(--subtle); font-weight: 300; }
.accent-blue .preview-orbit { transform: rotate(18deg); }

.project-content { padding: 28px 29px 23px; display: flex; flex-direction: column; flex: 1; }
.project-content h2 { font-size: 24px; overflow-wrap: anywhere; }.project-content > p { font-size: 13px; line-height: 1.85; margin-top: 13px; }
.technology-list { list-style: none; padding: 0; margin: 21px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }.technology-list li { font-size: 9px; border: 1px solid var(--border); background: var(--glass); border-radius: 6px; padding: 4px 8px; color: var(--subtle); }
.project-links { display: flex; gap: 25px; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 25px; }.project-links a { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; }.project-links a > span[aria-hidden] { color: var(--accent); font-size: 16px; }.project-links a:hover { color: var(--accent); }
[data-theme="light"] .project-card { --project-color: #466c51; --project-rgb: 70,108,81; }
[data-theme="light"] .accent-blue { --project-color: #4f6e80; --project-rgb: 79,110,128; }
[data-theme="light"] .accent-lilac { --project-color: #807653; --project-rgb: 128,118,83; }
.portfolio-empty { border-radius: 20px; padding: 58px 35px; text-align: center; }.portfolio-empty h2 { font-size: 29px; }.portfolio-empty p { max-width: 450px; margin: 18px auto 22px; font-size: 14px; }
.portfolio-cta { margin-top: 64px; padding-top: 45px; border-top: 1px solid var(--border); }
.error-page { min-height: 650px; }.error-page .body-large { max-width: 500px; margin: 27px 0; }.error-reference { font-size: 11px; margin-top: 25px; overflow-wrap: anywhere; }
@media (min-width: 1500px) { .hero { min-height: 710px; }.hero h1 { font-size: 80px; }.hero-art { height: 470px; } }
@media (max-width: 1100px) {
  .site-shell { width: calc(100% - 64px); }.site-header { gap: 16px; }.header-actions { gap: 13px; }.main-nav a { padding-left: 17px; padding-right: 17px; }
  .hero { min-height: 610px; }.hero h1 { font-size: 61px; }.hero-description { font-size: 15px; }.button-row { gap: 20px; }.button-row .button { padding-left: 17px; padding-right: 17px; gap: 18px; }.hero-art { transform: scale(.9); transform-origin: center right; }
  .service-card { padding: 23px; }.service-detail { gap: 7px; font-size: 9px; }.service-card h3 { font-size: 19px; }.contact-section { gap: 50px; }.contact-form-panel { padding: 24px; }.contact-copy .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .about-hero { gap: 55px; grid-template-columns: 1.2fr 1fr; }.page-hero h1 { font-size: 56px; }.portrait-placeholder { height: 315px; }.experience-section { gap: 50px; }.portfolio-hero { gap: 45px; }.site-footer { gap: 20px; }.footer-links { gap: 18px; }
}
@media (max-width: 850px) {
  .brand-name { font-size: 15px; }.brand-mark { width: 33px; height: 36px; flex-basis: 33px; }.main-nav { gap: 0; }.main-nav a { font-size: 12px; padding: 8px 14px; }.header-connect { font-size: 11px; gap: 10px; }.header-actions { gap: 8px; }.theme-toggle { width: 34px; height: 34px; padding: 8px; }
  .hero { grid-template-columns: 1.2fr .8fr; min-height: 560px; padding: 55px 0; }.hero h1 { font-size: 53px; }.hero .eyebrow { font-size: 8px; letter-spacing: 1.1px; }.hero-description { font-size: 14px; max-width: 370px; }.hero-art { transform: scale(.71); transform-origin: 50% 50%; margin-left: -60px; margin-right: -30px; }.button-row { gap: 18px; }.button-row .button, .button-row .text-link { font-size: 11px; }.hero-note { font-size: 10px; }
  .section-space { padding: 60px 0; }.section-heading > p { font-size: 12px; }.service-grid { gap: 12px; }.service-card { padding: 20px 18px; }.service-card h3 { font-size: 17px; }.service-card > p { font-size: 12px; }.service-detail { display: block; font-size: 9px; min-height: 46px; }.service-detail span { padding: 0 3px; }.work-invitation { gap: 20px; padding-bottom: 50px; }.work-invitation h2 { font-size: 22px; }.work-invitation .text-link { font-size: 11px; gap: 9px; }.invitation-mark { width: 50px; height: 50px; flex-basis: 50px; border-radius: 15px; }
  .contact-section { gap: 30px; padding-top: 65px; padding-bottom: 70px; }.contact-form-panel { padding: 20px; }.contact-copy h2 { font-size: 45px; }.contact-copy > p:not(.eyebrow) { font-size: 13px; }.contact-methods strong { font-size: 11px; }.contact-methods { gap: 20px; }.contact-methods a { gap: 10px; }.contact-icon { flex-basis: 35px; width: 35px; height: 35px; border-radius: 9px; }.contact-arrow { display: none; }.form-row { grid-template-columns: 1fr; gap: 0; }.form-field { margin-bottom: 15px; }
  .site-footer { flex-wrap: wrap; gap: 10px 20px; }.site-footer > p { flex: 1; }.footer-links { gap: 16px; }
  .about-hero { gap: 40px; padding-top: 75px; padding-bottom: 65px; }.page-hero h1 { font-size: 46px; }.about-intro { font-size: 18px; }.body-large { font-size: 14px; }.portrait-placeholder { height: 295px; }.portrait-initials { font-size: 113px; }.principle-grid { gap: 25px; }.principle-grid h3 { font-size: 17px; }.principle-grid p { font-size: 12px; }.experience-section { gap: 30px; }.experience-section h2 { font-size: 32px; }.simple-cta h2 { font-size: 25px; }.portfolio-hero { gap: 40px; grid-template-columns: 1.15fr .85fr; padding-top: 75px; }.portfolio-intro > p { font-size: 13px; }.project-grid { gap: 20px; }.project-preview { height: 235px; }.preview-window { top: 57px; transform: scale(.85); }.accent-blue .preview-window { transform: scale(.85); }.accent-lilac .preview-window { transform: scale(.85); }.preview-orbit { width: 300px; left: calc(50% - 150px); height: 170px; }.project-content { padding: 22px; }.project-content h2 { font-size: 22px; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 20px; }.site-shell { width: calc(100% - 40px); }.site-header { flex-wrap: wrap; margin-top: 16px; gap: 22px 12px; }.brand { gap: 9px; }.brand-name { font-size: 16px; }.header-actions { margin-left: auto; gap: 13px; }.header-connect { font-size: 12px; gap: 13px; }.theme-toggle { width: 36px; height: 36px; }
  .main-nav { order: 3; width: 100%; justify-content: center; padding: 5px; }.main-nav a { flex: 1; text-align: center; padding: 8px 17px; font-size: 12px; }
  .hero { display: flex; flex-direction: column; gap: 0; align-items: stretch; padding: 54px 0 34px; min-height: auto; }.hero h1 { font-size: clamp(47px, 9.8vw, 64px); margin-top: 22px; }.hero .eyebrow { font-size: 9px; letter-spacing: 1.1px; }.hero-description { font-size: 14px; max-width: 450px; line-height: 1.8; margin-top: 22px; }.button-row { gap: 24px; margin-top: 27px; }.button-row .button { font-size: 12px; min-height: 47px; gap: 20px; }.button-row .text-link { font-size: 12px; gap: 10px; }.hero-note { font-size: 10px; margin-top: 27px; }.hero-art { height: 365px; transform: scale(.85); transform-origin: center; margin: -10px -15px -15px; }.glass-sculpture { top: 54px; width: 235px; height: 235px; left: calc(50% - 118px); }.glass-slab { border-radius: 48px; }.slab-front::after { border-radius: 37px; }.slab-front svg { width: 98px; height: 98px; }.art-orbit { width: 285px; height: 285px; left: calc(50% - 142px); top: 20px; }.orbit-two { width: 355px; height: 355px; left: calc(50% - 177px); top: -14px; }.art-caption { bottom: 0; left: 50%; padding: 12px 20px 12px 13px; }.coordinate-top { top: 0; right: 10%; }.cross-one { left: 8%; top: 60px; }.cross-two { right: 5%; bottom: 75px; }
  .section-space { padding: 48px 0; }.section-heading { display: block; margin-bottom: 28px; }.section-heading h2 { font-size: 32px; margin-top: 11px; }.section-heading > p { font-size: 13px; margin-top: 19px; }.eyebrow { font-size: 9px; letter-spacing: 1.3px; }.service-grid { grid-template-columns: 1fr; gap: 14px; }.service-card { padding: 25px; }.card-topline { margin-bottom: 23px; }.service-card h3 { font-size: 21px; }.service-card > p { font-size: 13px; min-height: 0; max-width: 430px; }.service-detail { display: flex; font-size: 10px; margin-top: 24px; min-height: auto; }.service-detail span { padding: 0; }.work-invitation { flex-wrap: wrap; gap: 20px; padding: 6px 0 44px; }.work-invitation > div:nth-child(2) { width: calc(100% - 73px); }.work-invitation h2 { font-size: 21px; }.work-invitation p:not(.eyebrow) { font-size: 12px; }.work-invitation > .text-link { margin-left: 73px; font-size: 12px; }
  .contact-section { grid-template-columns: 1fr; gap: 35px; padding-top: 38px; padding-bottom: 60px; }.contact-copy { padding-top: 0; }.contact-copy .eyebrow { font-size: 8px; letter-spacing: .9px; }.contact-copy h2 { font-size: 46px; margin-top: 20px; }.contact-copy > p:not(.eyebrow) { font-size: 14px; margin-top: 20px; }.contact-methods { margin-top: 29px; gap: 20px; }.contact-methods strong { font-size: 13px; }.contact-methods a { gap: 13px; }.contact-arrow { display: block; }.contact-icon { width: 40px; height: 40px; flex-basis: 40px; }.contact-form-panel { padding: 25px; border-radius: 18px; }.form-row { grid-template-columns: 1fr 1fr; gap: 13px; }.form-field label { font-size: 11px; }.form-field input, .form-field textarea { font-size: 16px; padding: 11px; }.form-field input::placeholder, .form-field textarea::placeholder { font-size: 12px; }.form-submit { font-size: 12px; }.form-footnote { font-size: 10px; }.form-notice { font-size: 12px; }
  .site-footer { padding: 26px 0 30px; gap: 12px 20px; }.footer-name { font-size: 14px; }.site-footer > p { flex: unset; margin-left: auto; font-size: 9px; }.footer-links { flex-basis: 100%; margin-left: 0; gap: 22px; font-size: 11px; }.copyright { margin-left: auto; }
  .page-hero { padding: 52px 0; }.page-hero h1 { font-size: clamp(42px,8.4vw,54px); margin-top: 20px; }.about-hero { grid-template-columns: 1fr; gap: 38px; }.about-intro { font-size: 20px; margin-top: 26px; }.body-large { font-size: 14px; }.about-copy .text-link { margin-top: 23px; }.portrait-frame { width: min(345px, calc(100% - 14px)); margin: 0 auto; }.portrait-placeholder { height: 310px; }.portrait-initials { font-size: 125px; }.portrait-placeholder-note { font-size: 8px; }.portrait-caption { padding: 17px 8px 7px; }.portrait-caption strong { font-size: 13px; }.portrait-caption div > span { font-size: 10px; }
  .principle-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }.principle-grid article { padding-top: 21px; border-top: 1px solid var(--border); }.principle-grid h3 { font-size: 20px; margin: 11px 0; }.principle-grid p { font-size: 13px; }.experience-section { grid-template-columns: 1fr; gap: 35px; }.experience-section h2 { font-size: 32px; }.experience-list { margin-left: 5px; padding-left: 26px; }.experience-item::before { left: -31px; }.experience-item h3 { font-size: 20px; }.simple-cta { flex-direction: column; align-items: flex-start; gap: 24px; padding: 14px 0 48px; }.simple-cta h2 { font-size: 29px; line-height: 1.2; }.simple-cta .button { font-size: 12px; }
  .portfolio-hero { grid-template-columns: 1fr; gap: 25px; padding-bottom: 36px; }.portfolio-intro > p { font-size: 14px; max-width: 440px; }.portfolio-intro .text-link { margin-top: 18px; }.portfolio-toolbar { align-items: flex-start; gap: 12px; padding: 18px 0; margin-bottom: 7px; }.category-filters { gap: 4px; }.filter-link { padding: 8px 12px; font-size: 10px; }.project-count { font-size: 10px; padding-top: 9px; }.project-grid { grid-template-columns: 1fr; gap: 23px; }.project-preview { height: 245px; }.project-content { padding: 24px; }.project-content h2 { font-size: 24px; }.project-content > p { font-size: 13px; }.technology-list li { font-size: 10px; }.project-links a { font-size: 12px; }.preview-window { top: 62px; transform: scale(.92); }.accent-blue .preview-window { transform: scale(.92); }.accent-lilac .preview-window { transform: scale(.92); }.preview-orbit { top: 35px; }.portfolio-cta { margin-top: 45px; padding-top: 35px; }.sample-notice { align-items: flex-start; }.sample-badge { margin-top: 4px; }.portfolio-empty { padding: 38px 25px; }.portfolio-empty h2 { font-size: 26px; }.error-page { min-height: 590px; }
}
@media (max-width: 390px) {
  .site-shell { width: calc(100% - 32px); }.brand-name { font-size: 14px; }.header-actions { gap: 7px; }.header-connect { gap: 7px; font-size: 11px; }.hero h1 { font-size: 45px; }.button-row { gap: 17px; }.button-row .button { font-size: 11px; gap: 14px; padding: 12px 15px; }.button-row .text-link { font-size: 11px; gap: 7px; }.hero-note { font-size: 9px; }.form-row { grid-template-columns: 1fr; gap: 0; }.contact-form-panel { padding: 21px; }.site-footer > p { margin-left: 0; flex-basis: 100%; }.portfolio-toolbar { flex-wrap: wrap; }.project-count { padding-top: 0; }.about-hero h1 { font-size: 41px; }.contact-copy .eyebrow { font-size: 7px; }.contact-methods strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .glass-panel, .main-nav, .portrait-frame, .filter-link, .button { border: 1px solid CanvasText; }.hero-art { display: none; }.hero { display: block; }.status-dot { background: CanvasText; }.main-nav a.active, .filter-link.selected { outline: 1px solid CanvasText; }.theme-toggle { border: 1px solid CanvasText; } }