/* MD3 color roles and purpose-specific type. This project owns its entire theme. */
:root {
    color-scheme: light;
    --md-surface: #faf9f5;
    --md-surface-1: #f1f2ec;
    --md-surface-3: #e9ede5;
    --md-on-surface: #202923;
    --md-on-surface-variant: #526157;
    --md-primary: #24664d;
    --md-on-primary: #ffffff;
    --md-primary-container: #c9ead6;
    --md-on-primary-container: #103b29;
    --md-secondary-container: #dce6dc;
    --md-on-secondary-container: #263d30;
    --md-outline: #738076;
    --md-outline-variant: #c4cec3;
    --md-font-plain: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --md-font-brand: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --type-display: 3.5625rem;
    --type-display-medium: 2.8125rem;
    --type-headline: 2rem;
    --type-title: 1.375rem;
    --type-body: 1rem;
    --type-body-medium: .875rem;
    --type-label: .875rem;
    --sp-xs: .25rem;
    --sp-sm: .5rem;
    --sp-md: .75rem;
    --sp-lg: 1rem;
    --sp-xl: 1.5rem;
    --sp-2xl: 2rem;
    --sp-3xl: 3rem;
    --shape-lg: 1.75rem;
    --shape-xl: 1.75rem;
    --shape-full: 100rem;
    --md-spring-fast-spatial: cubic-bezier(.2, 0, 0, 1.15);
    --md-spring-fast-spatial-dur: 350ms;
    --md-spring-fast-effects-dur: 150ms;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --md-surface: #111812;
    --md-surface-1: #19221b;
    --md-surface-3: #253128;
    --md-on-surface: #e1e9df;
    --md-on-surface-variant: #bacabd;
    --md-primary: #9ad5b3;
    --md-on-primary: #073824;
    --md-primary-container: #214e39;
    --md-on-primary-container: #c4eed5;
    --md-secondary-container: #344a3b;
    --md-on-secondary-container: #d5e8d8;
    --md-outline: #8b9b8f;
    --md-outline-variant: #3e4d42;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --md-surface: #111812;
        --md-surface-1: #19221b;
        --md-surface-3: #253128;
        --md-on-surface: #e1e9df;
        --md-on-surface-variant: #bacabd;
        --md-primary: #9ad5b3;
        --md-on-primary: #073824;
        --md-primary-container: #214e39;
        --md-on-primary-container: #c4eed5;
        --md-secondary-container: #344a3b;
        --md-on-secondary-container: #d5e8d8;
        --md-outline: #8b9b8f;
        --md-outline-variant: #3e4d42;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--sp-2xl); }
body { margin: 0; background: var(--md-surface); color: var(--md-on-surface); font: 400 var(--type-body)/1.5 var(--md-font-plain); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--md-font-brand); text-wrap: balance; }
p { max-width: 70ch; }
a { color: var(--md-primary); text-underline-offset: .2em; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: .1875rem solid var(--md-primary); outline-offset: .25rem; border-radius: var(--shape-sm); }
[hidden] { display: none; }
.shell { width: min(100% - 5rem, 75rem); margin-inline: auto; }
.accent { color: var(--md-primary); }
.skip-link { position: absolute; top: -10rem; left: var(--sp-lg); z-index: 10; padding: var(--sp-lg); background: var(--md-primary); color: var(--md-on-primary); border-radius: var(--shape-lg); }
.skip-link:focus { top: var(--sp-lg); }
.site-header { border-bottom: 1px solid var(--md-outline-variant); }
.header-inner { min-height: 7rem; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); }
.wordmark { display: flex; align-items: center; gap: var(--sp-md); text-decoration: none; color: var(--md-on-surface); font-weight: 600; }
.monogram { display: grid; place-content: center; position: relative; width: 3rem; height: 3rem; border-radius: var(--shape-lg); background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 2rem; line-height: 1; letter-spacing: -.1em; padding-right: .15em; }
.monogram span { position: absolute; right: .65rem; bottom: .5rem; }
.wordmark-caption { display: block; font-weight: 400; font-size: .75rem; line-height: 1rem; color: var(--md-on-surface-variant); margin-top: var(--sp-xs); }
.site-nav { display: flex; gap: var(--sp-sm); }
.site-nav a, .social-links a { display: inline-flex; align-items: center; min-height: 3rem; padding: var(--sp-md); font-size: var(--type-label); font-weight: 500; color: var(--md-on-surface); text-decoration: none; border-radius: var(--shape-full); }
.site-nav a:hover, .social-links a:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.site-nav a:active, .social-links a:active { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
.theme-toggle { min-height: 3rem; padding: var(--sp-md); display: inline-flex; align-items: center; gap: var(--sp-sm); border: 1px solid var(--md-outline); border-radius: var(--shape-full); background: transparent; color: var(--md-on-surface); font: 500 var(--type-label)/1.25rem var(--md-font-plain); cursor: pointer; transition: border-radius var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), background-color var(--md-spring-fast-effects-dur); }
.theme-toggle:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }

.theme-toggle:active { border-radius: var(--shape-sm); background: color-mix(in srgb, var(--md-on-surface) 10%, var(--md-surface-3)); }
.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; padding-block: 5.5rem 4.5rem; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: var(--sp-md); color: var(--md-on-surface-variant); font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .09em; }
.eyebrow-line { width: 1.5rem; height: .125rem; background: var(--md-primary); flex-shrink: 0; }
.legal-hero-title { margin-block: var(--sp-2xl) var(--sp-xl); font-size: var(--type-display); line-height: 1.12; letter-spacing: -.055em; font-weight: 600; }
.hero-statement { font: 400 var(--type-display-medium)/1.16 var(--md-font-brand); letter-spacing: -.04em; margin-bottom: var(--sp-xl); }
.hero-description { color: var(--md-on-surface-variant); max-width: 53ch; margin-top: var(--sp-lg); }
.hero-actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; margin-top: var(--sp-2xl); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xl); min-height: 3rem; padding: var(--sp-md) var(--sp-xl); border-radius: var(--shape-full); font-size: var(--type-label); font-weight: 600; text-decoration: none; transition: border-radius var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), background-color var(--md-spring-fast-effects-dur); }
.button-filled { background: var(--md-primary); color: var(--md-on-primary); }
.button-filled:hover { background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary)); }
.button-filled:active { background: color-mix(in srgb, var(--md-on-primary) 10%, var(--md-primary)); border-radius: var(--shape-sm); }
.button-text:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.button-text:active { background: color-mix(in srgb, var(--md-primary) 10%, transparent); border-radius: var(--shape-sm); }
.engineering-panel { padding: var(--sp-2xl); background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: var(--shape-xl); }
.panel-topline { display: flex; justify-content: space-between; font-size: .6875rem; line-height: 1rem; letter-spacing: .12em; font-weight: 600; }
.panel-title { font: 500 2rem/2.5rem var(--md-font-brand); letter-spacing: -.035em; }
.panel-description { margin-top: var(--sp-md); font-size: var(--type-body-medium); line-height: 1.25rem; }
.platform-labels { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-xl); }
.platform-labels span { min-height: 2rem; display: inline-flex; align-items: center; border: 1px solid var(--md-on-primary-container); border-radius: var(--shape-full); padding-inline: var(--sp-md); font-size: var(--type-label); font-weight: 500; }
.experience-strip { display: grid; grid-template-columns: 1fr 1fr 1.4fr; border-block: 1px solid var(--md-outline-variant); padding-block: var(--sp-2xl); gap: var(--sp-xl); }
.experience-strip > div { display: flex; flex-direction: column; gap: var(--sp-xs); }
.experience-strip strong { font: 500 var(--type-title)/1.75rem var(--md-font-brand); letter-spacing: -.025em; }
.experience-strip span { color: var(--md-on-surface-variant); font-size: var(--type-body-medium); line-height: 1.25rem; }
.section { padding-top: 6rem; scroll-margin-top: var(--sp-xl); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-2xl); margin-bottom: var(--sp-2xl); }
.section-heading h2 { font-size: var(--type-headline); line-height: 1.25; letter-spacing: -.035em; font-weight: 500; margin-top: var(--sp-lg); }
.section-heading > p { color: var(--md-on-surface-variant); font-size: var(--type-body-medium); line-height: 1.5rem; max-width: 32ch; }
.featured-project { display: grid; grid-template-columns: 1.2fr 1fr; border-radius: var(--shape-xl); overflow: hidden; background: var(--md-surface-1); }
.featured-copy { padding: var(--sp-3xl); }
.featured-copy h3 { font-size: var(--type-display-medium); line-height: 1.16; font-weight: 500; letter-spacing: -.04em; margin-block: var(--sp-xl); }
.featured-copy > p:not(.eyebrow) { color: var(--md-on-surface-variant); margin-top: var(--sp-lg); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-sm); padding: 0; margin: var(--sp-xl) 0 0; list-style: none; }
.tag-list li { font-size: .75rem; line-height: 1rem; padding: var(--sp-sm) var(--sp-md); border-radius: var(--shape-full); background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.project-link { display: inline-flex; align-items: center; gap: var(--sp-2xl); min-height: 3rem; margin-top: var(--sp-xl); font-size: var(--type-label); font-weight: 600; }
.product-study { padding: var(--sp-3xl); background: var(--md-surface-3); display: flex; flex-direction: column; justify-content: center; }
.study-title { font: 400 1.75rem/2.25rem var(--md-font-brand); letter-spacing: -.025em; margin-top: var(--sp-xl); }
.product-layers { list-style: none; padding: 0; margin: var(--sp-xl) 0 0; }
.product-layers li { display: flex; gap: var(--sp-lg); align-items: start; padding-block: var(--sp-lg); border-top: 1px solid var(--md-outline-variant); }
.layer-number { font: 400 .75rem/1.5rem ui-monospace, monospace; color: var(--md-primary); }
.product-layers strong { display: block; font-size: 1rem; font-weight: 500; }
.product-layers li div > span { display: block; font-size: var(--type-body-medium); line-height: 1.25rem; color: var(--md-on-surface-variant); margin-top: var(--sp-xs); }
.study-caption { font-size: .75rem; line-height: 1rem; margin-top: var(--sp-lg); color: var(--md-on-surface-variant); }
.project-list { margin-top: var(--sp-xl); }
.project-row { display: grid; grid-template-columns: 2.5rem 1fr 12rem; gap: var(--sp-xl); align-items: start; padding-block: var(--sp-2xl); border-bottom: 1px solid var(--md-outline-variant); }
.project-index { color: var(--md-on-surface-variant); font: 400 .875rem/1.5rem ui-monospace, monospace; }
.project-row h3 { margin-top: var(--sp-sm); font-size: var(--type-title); line-height: 1.75rem; font-weight: 500; letter-spacing: -.02em; }
.project-row p:not(.eyebrow) { margin-top: var(--sp-md); color: var(--md-on-surface-variant); font-size: var(--type-body-medium); line-height: 1.5rem; }
.project-category { text-align: right; color: var(--md-primary); font-size: .75rem; line-height: 1.25rem; }
.work-note { padding-top: var(--sp-xl); font-size: var(--type-body-medium); color: var(--md-on-surface-variant); }
.expertise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg); }
.expertise-card { border-radius: var(--shape-lg); background: var(--md-surface-3); padding: var(--sp-xl); }
.card-code { display: block; font: 500 .75rem/1rem ui-monospace, monospace; letter-spacing: .04em; color: var(--md-primary); margin-bottom: var(--sp-xl); }
.expertise-card h3, .ventures-grid h3, .timeline h3, .education-block h3 { font-size: var(--type-title); line-height: 1.75rem; font-weight: 500; letter-spacing: -.02em; }
.expertise-card p { color: var(--md-on-surface-variant); font-size: var(--type-body-medium); line-height: 1.5rem; margin-top: var(--sp-md); }
.ventures-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--md-outline-variant); }
.ventures-grid article { padding: var(--sp-2xl) var(--sp-xl); border-right: 1px solid var(--md-outline-variant); }
.ventures-grid article:first-child { padding-left: 0; }
.ventures-grid article:last-child { border-right: 0; padding-right: 0; }
.ventures-grid h3 { margin-top: var(--sp-xl); }
.ventures-grid p:not(.eyebrow) { margin-top: var(--sp-lg); color: var(--md-on-surface-variant); font-size: var(--type-body-medium); line-height: 1.5rem; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 10rem 1fr; gap: var(--sp-2xl); padding-block: var(--sp-2xl); border-top: 1px solid var(--md-outline-variant); }
.timeline-date { color: var(--md-primary); font: 500 1.75rem/2.25rem var(--md-font-brand); letter-spacing: -.03em; }
.timeline-date span { display: block; font: 400 var(--type-body-medium)/1.5rem var(--md-font-plain); color: var(--md-on-surface-variant); letter-spacing: 0; }
.timeline p { color: var(--md-on-surface-variant); font-size: var(--type-body-medium); line-height: 1.5rem; margin-top: var(--sp-md); }
.timeline .timeline-company { color: var(--md-primary); margin-top: var(--sp-sm); }
.education-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); background: var(--md-surface-1); padding: var(--sp-2xl); border-radius: var(--shape-lg); margin-top: var(--sp-lg); }
.education-block h3 { margin-top: var(--sp-md); }
.education-block p:not(.eyebrow) { color: var(--md-on-surface-variant); margin-top: var(--sp-md); font-size: var(--type-body-medium); line-height: 1.5rem; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-3xl); }
.faq-item { padding-block: var(--sp-xl); border-top: 1px solid var(--md-outline-variant); }
.about-faq-q { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.about-faq-a { margin-top: var(--sp-md); color: var(--md-on-surface-variant); font-size: var(--type-body-medium); line-height: 1.5rem; }
.contact-section { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-3xl); background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: var(--shape-xl); padding: var(--sp-3xl); margin-block: 5rem; align-items: center; }
.contact-section .eyebrow { color: var(--md-on-primary-container); }
.contact-section h2 { font-size: var(--type-display-medium); line-height: 1.16; font-weight: 500; letter-spacing: -.04em; margin-block: var(--sp-xl); }
.contact-section > div > p:not(.eyebrow) { font-size: var(--type-body-medium); line-height: 1.5rem; max-width: 43ch; }
.contact-links { display: flex; flex-direction: column; align-items: start; }
.contact-email { display: inline-flex; justify-content: space-between; gap: var(--sp-2xl); align-items: center; min-height: 3.5rem; font: 500 1.375rem/1.75rem var(--md-font-brand); color: var(--md-on-primary-container); }
.email-address { font-size: var(--type-body-medium); margin-top: var(--sp-xs); overflow-wrap: anywhere; }
.social-links { display: flex; flex-wrap: wrap; gap: var(--sp-lg); margin-block: var(--sp-xl) var(--sp-md); }
.social-links a { padding-left: 0; padding-right: var(--sp-md); gap: var(--sp-md); color: var(--md-on-primary-container); }
.contact-links > p { font-size: .75rem; line-height: 1rem; }
.site-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-xl); padding-block: var(--sp-2xl); border-top: 1px solid var(--md-outline-variant); }
.footer-name { display: inline-flex; align-items: center; min-height: 3rem; text-decoration: none; font-weight: 600; color: var(--md-on-surface); }
.site-footer p { color: var(--md-on-surface-variant); font-size: .75rem; line-height: 1rem; }
.error-page { min-height: 65vh; padding-block: 5rem; }

@media (max-width: 64rem) {
    .shell { width: min(100% - 3rem, 75rem); }
    .header-inner { gap: var(--sp-md); }
    .site-nav { gap: 0; }
    .hero { gap: var(--sp-2xl); padding-top: 4rem; }
    .legal-hero-title { font-size: var(--type-display-medium); line-height: 1.16; }
    .hero-statement { font-size: 2.25rem; line-height: 2.75rem; }
    .engineering-panel { padding: var(--sp-xl); }
    .featured-copy, .product-study { padding: var(--sp-2xl); }
    .ventures-grid { grid-template-columns: 1fr 1fr; }
    .ventures-grid article:nth-child(2) { border-right: 0; }
    .ventures-grid article:nth-child(3) { padding-left: 0; border-top: 1px solid var(--md-outline-variant); }
    .ventures-grid article:last-child { padding-left: var(--sp-xl); border-top: 1px solid var(--md-outline-variant); }
    .project-row { grid-template-columns: 2rem 1fr 9rem; gap: var(--sp-lg); }
    .contact-section { gap: var(--sp-xl); padding: var(--sp-2xl); }
}

@media (max-width: 48rem) {
    .shell { width: calc(100% - 2rem); }
    .header-inner { min-height: 4rem; flex-wrap: wrap; padding-top: var(--sp-md); gap: 0; }
    .wordmark { flex: 1; min-height: 4rem; }
    .site-nav { order: 3; width: 100%; justify-content: space-between; border-top: 1px solid var(--md-outline-variant); margin-top: var(--sp-md); padding-block: var(--sp-xs); }
    .site-nav a { justify-content: center; padding-inline: var(--sp-md); }
    .theme-toggle { padding-inline: var(--sp-md); }
    .hero { grid-template-columns: 1fr; padding-block: var(--sp-3xl); gap: var(--sp-2xl); }
    .legal-hero-title { font-size: var(--type-display-medium); }
    .hero-statement { font-size: 2.25rem; line-height: 2.75rem; }
    .engineering-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: center; }
    .panel-topline { grid-column: 1 / -1; }
    .panel-title { font-size: 1.5rem; line-height: 2rem; }
    .panel-description { margin: 0; }
    .platform-labels { grid-column: 1 / -1; margin: 0; }
    .experience-strip { grid-template-columns: 1fr 1fr; row-gap: var(--sp-xl); }
    .experience-strip > div:last-child { grid-column: 1 / -1; }
    .experience-strip strong { font-size: 1.375rem; }
    .section { padding-top: 4rem; }
    .section-heading { flex-direction: column; align-items: start; gap: var(--sp-lg); }
    .section-heading h2 { font-size: 1.75rem; line-height: 2.25rem; }
    .section-heading > p { max-width: 60ch; }
    .featured-project { grid-template-columns: 1fr; }
    .featured-copy, .product-study { padding: var(--sp-xl); }
    .featured-copy h3 { font-size: 2.25rem; line-height: 2.75rem; }
    .product-study { padding-block: var(--sp-2xl); }
    .project-row { grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--sp-md); }
    .project-category { grid-column: 2; text-align: left; }
    .expertise-grid, .education-block, .faq-list { grid-template-columns: 1fr; }
    .timeline li { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--sp-lg); }
    .timeline-date { font-size: 1.375rem; line-height: 1.75rem; }
    .timeline h3 { font-size: 1.375rem; line-height: 1.75rem; }
    .contact-section { grid-template-columns: 1fr; margin-block: var(--sp-3xl); gap: var(--sp-2xl); padding: var(--sp-xl); }
    .contact-section h2 { font-size: 2.25rem; line-height: 2.75rem; }
    .site-footer { flex-direction: column; align-items: start; gap: var(--sp-md); }
}

@media (max-width: 24rem) {
    .wordmark-caption { max-width: 9rem; }
    .theme-toggle { gap: var(--sp-xs); padding-inline: var(--sp-sm); }
    .hero > .hero-copy > .eyebrow { font-size: .6875rem; letter-spacing: .03em; }
    .legal-hero-title { font-size: 2.25rem; line-height: 2.75rem; }
    .hero-statement { font-size: 2rem; line-height: 2.5rem; }
    .engineering-panel { display: block; }
    .panel-description { margin-top: var(--sp-md); }
    .platform-labels { margin-top: var(--sp-lg); }
    .experience-strip, .ventures-grid { grid-template-columns: 1fr; }
    .experience-strip > div:last-child { grid-column: auto; }
    .ventures-grid article, .ventures-grid article:first-child, .ventures-grid article:last-child { padding-inline: 0; border-right: 0; }
    .ventures-grid article + article { border-top: 1px solid var(--md-outline-variant); }
}

@media (prefers-reduced-motion: reduce) {
    :root { --md-spring-fast-spatial-dur: .01ms; --md-spring-fast-effects-dur: .01ms; }
    html { scroll-behavior: auto; }
}

/* Expressive refinement across every surface, based on the Claude MD3 kit. */
:root {
    --md-surface-4: #dfe7da;
    --md-tertiary-container: #cee6f0;
    --md-on-tertiary-container: #163e50;
    --shape-sm: .5rem;
    --shape-xl: 1.75rem;
    --md-spring-fast-effects: cubic-bezier(.2, 0, 0, 1);
    --md-type-display-large: 600 3.5625rem/4rem var(--md-font-brand);
    --md-type-display-medium: 400 2.8125rem/3.25rem var(--md-font-brand);
    --md-type-display-small: 400 2.25rem/2.75rem var(--md-font-brand);
    --md-type-headline-large: 600 2rem/2.5rem var(--md-font-brand);
    --md-type-headline-medium: 600 1.75rem/2.25rem var(--md-font-brand);
    --md-type-headline-small: 600 1.5rem/2rem var(--md-font-brand);
    --md-type-title-large: 500 1.375rem/1.75rem var(--md-font-brand);
    --md-type-title-medium: 500 1rem/1.5rem var(--md-font-plain);
    --md-type-body-large: 400 1rem/1.5rem var(--md-font-plain);
    --md-type-body-medium: 400 .875rem/1.25rem var(--md-font-plain);
    --md-type-body-small: 400 .75rem/1rem var(--md-font-plain);
    --md-type-label-large: 500 .875rem/1.25rem var(--md-font-plain);
    --md-type-label-medium: 500 .75rem/1rem var(--md-font-plain);
    --md-type-label-small: 500 .6875rem/1rem var(--md-font-plain);
}
:root[data-theme="dark"] {
    --md-surface-4: #303d32;
    --md-tertiary-container: #244b5c;
    --md-on-tertiary-container: #c8e8f5;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --md-surface-4: #303d32;
        --md-tertiary-container: #244b5c;
        --md-on-tertiary-container: #c8e8f5;
    }
}
body { background: radial-gradient(ellipse at 90% 6%, color-mix(in srgb, var(--md-primary-container) 30%, transparent), transparent 34rem), var(--md-surface); font: var(--md-type-body-large); }
.shell > *, .hero > *, .featured-project > *, .contact-section > * { min-width: 0; }
.site-header { border: 0; background: color-mix(in srgb, var(--md-surface-1) 75%, transparent); }
.monogram { display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; border-radius: var(--shape-xl); font: var(--md-type-headline-small); letter-spacing: 0; }
.monogram span { position: static; }
.monogram-glyph { display: block; width: 2.25rem; height: 2.25rem; }
.wordmark { font: var(--md-type-title-medium); }
.wordmark-caption { font: var(--md-type-body-small); }
.site-nav a { gap: var(--sp-sm); padding-inline: var(--sp-lg); transition: background-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects), border-radius var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
.nav-icon { display: grid; place-items: center; }
.nav-icon svg { width: 1.5rem; height: 1.5rem; }
.site-nav a[aria-current="location"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.site-nav a[aria-current="location"]:hover { background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container)); }
.site-nav a:focus-visible, .site-nav a:active { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
.site-nav a:active { border-radius: var(--shape-sm); }
.theme-toggle { padding: 0; min-height: 3rem; gap: var(--sp-md); border: 0; background: transparent; border-radius: var(--shape-full); font: var(--md-type-body-large); flex: none; }
.theme-toggle:hover, .theme-toggle:active { background: transparent; }
.theme-input { position: absolute; width: .0625rem; height: .0625rem; opacity: 0; }
.theme-track { position: relative; flex: none; width: 3.25rem; height: 2rem; border: .125rem solid var(--md-outline); border-radius: var(--shape-full); background: var(--md-surface-4); transition: background-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects), border-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects); }
.theme-thumb { position: absolute; top: 50%; left: .375rem; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: var(--shape-full); background: var(--md-outline); color: var(--md-primary); transform: translateY(-50%); transition: transform var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), width var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), height var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), background-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects); }
.theme-check { width: 1rem; height: 1rem; opacity: 0; transition: opacity var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects); }
.theme-input:checked ~ .theme-track { background: var(--md-primary); border-color: var(--md-primary); }
.theme-input:checked ~ .theme-track .theme-thumb { width: 1.5rem; height: 1.5rem; transform: translate(.875rem, -50%); background: var(--md-on-primary); }
.theme-input:checked ~ .theme-track .theme-check { opacity: 1; }
.theme-toggle:hover .theme-track { background: color-mix(in srgb, var(--md-on-surface) 8%, var(--md-surface-4)); }
.theme-toggle:hover .theme-input:checked ~ .theme-track { background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary)); }
.theme-input:active ~ .theme-track .theme-thumb { width: 1.75rem; height: 1.75rem; left: .125rem; }
.theme-input:focus-visible ~ .theme-track { outline: .1875rem solid var(--md-primary); outline-offset: .125rem; background: color-mix(in srgb, var(--md-on-surface) 10%, var(--md-surface-4)); }
.theme-input:checked:focus-visible ~ .theme-track { background: color-mix(in srgb, var(--md-on-primary) 10%, var(--md-primary)); }
.legal-hero-title { font: var(--md-type-display-large); }
.hero-statement { font: var(--md-type-display-medium); }
.eyebrow, .card-code { font: var(--md-type-label-medium); }
.panel-topline { font: var(--md-type-label-small); }
.panel-title { font: var(--md-type-headline-large); }
.panel-description { font: var(--md-type-body-medium); }
.button { --_bg: transparent; --_c: var(--md-primary); min-height: 3.5rem; background: var(--_bg); color: var(--_c); font: var(--md-type-label-large); transition: border-radius var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), background-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects); }
.button-filled { --_bg: var(--md-primary); --_c: var(--md-on-primary); }
.button-tonal { --_bg: var(--md-secondary-container); --_c: var(--md-on-secondary-container); }
.button:hover { background: color-mix(in srgb, var(--_c) 8%, var(--_bg)); }
.button:focus-visible, .button:active { background: color-mix(in srgb, var(--_c) 10%, var(--_bg)); }
.button:active { border-radius: var(--shape-sm); }
.platform-labels span { border: 0; border-radius: var(--shape-sm); background: var(--md-surface); color: var(--md-on-surface); }
.experience-strip { border: 0; padding-block: 0; gap: var(--sp-lg); }
.experience-strip > div { padding: var(--sp-xl); border-radius: var(--shape-xl); background: var(--md-surface-3); }
.experience-strip > div:nth-child(2) { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.experience-strip > div:last-child { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.experience-strip strong { font: var(--md-type-title-large); }
.experience-strip.experience-strip--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-sm); }
.experience-strip--compact > div { padding: var(--sp-lg); }
.experience-strip.experience-strip--compact strong { font: var(--md-type-title-medium); }
.industry-summary { max-width: none; margin: var(--sp-lg) 0 var(--sp-3xl); color: var(--md-on-surface-variant); font: var(--md-type-body-medium); }
@media (max-width: 64rem) {
    .experience-strip.experience-strip--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .experience-strip.experience-strip--compact > div:last-child { grid-column: auto; }
}
.experience-strip span { color: inherit; font: var(--md-type-body-medium); }
.experience-strip .stat-symbol { display: grid; place-content: center; width: 2rem; height: 2rem; border-radius: var(--shape-sm); background: var(--md-surface); color: var(--md-primary); font: var(--md-type-title-medium); margin-bottom: var(--sp-md); }
.stat-symbol svg { width: 1.25rem; height: 1.25rem; }
.section-heading h2 { font: var(--md-type-headline-large); }
.section-heading > p, .project-row p:not(.eyebrow), .expertise-card p, .ventures-grid p:not(.eyebrow), .timeline p, .education-block p:not(.eyebrow), .about-faq-a { font: var(--md-type-body-medium); }
.featured-project { background: var(--md-surface-3); }
.featured-copy h3 { font: var(--md-type-display-small); }
.tag-list li { display: inline-flex; align-items: center; min-height: 2rem; border-radius: var(--shape-sm); font: var(--md-type-label-large); padding: var(--sp-xs) var(--sp-md); }
.project-link { padding: var(--sp-sm) var(--sp-md); border-radius: var(--shape-full); }
.project-link:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.project-link:focus-visible, .project-link:active { background: color-mix(in srgb, var(--md-primary) 10%, transparent); }
.product-study { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.product-study .eyebrow, .product-study .study-caption { color: inherit; }
.study-title { font: var(--md-type-headline-medium); }
.product-layers { display: grid; gap: var(--sp-sm); }
.product-layers li { border: 0; padding: var(--sp-lg); background: var(--md-surface); color: var(--md-on-surface); border-radius: var(--shape-sm); }
.product-layers strong { font: var(--md-type-title-medium); }
.product-layers li div > span { font: var(--md-type-body-medium); }
.project-list { display: grid; gap: var(--sp-md); }
.project-row { padding: var(--sp-xl); background: var(--md-surface-3); border: 0; border-radius: var(--shape-xl); grid-template-columns: 3rem minmax(0, 1fr) 11rem; }
.project-index { display: grid; place-items: center; min-height: 3rem; background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: var(--shape-xl); font: var(--md-type-title-medium); }
.project-row h3, .expertise-card h3, .ventures-grid h3, .timeline h3, .education-block h3 { font: var(--md-type-title-large); }
.expertise-card:nth-child(2), .expertise-card:nth-child(3) { background: var(--md-surface-1); }
.card-code { display: inline-flex; align-items: center; min-height: 2rem; padding: var(--sp-xs) var(--sp-md); border-radius: var(--shape-sm); background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.ventures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg); border: 0; }
.ventures-grid article, .ventures-grid article:first-child, .ventures-grid article:last-child, .ventures-grid article:nth-child(3) { padding: var(--sp-xl); border: 0; border-radius: var(--shape-xl); background: var(--md-surface-3); }
.timeline { display: grid; gap: var(--sp-md); }
.timeline li { border: 0; padding: var(--sp-xl); border-radius: var(--shape-xl); background: var(--md-surface-1); }
.timeline li:first-child { background: var(--md-surface-3); }
.timeline-date { align-self: start; padding: var(--sp-lg); border-radius: var(--shape-xl); background: var(--md-primary-container); color: var(--md-on-primary-container); font: var(--md-type-headline-small); }
.timeline-date span { color: inherit; }
.education-block { background: transparent; padding: 0; gap: var(--sp-lg); }
.education-block > div { padding: var(--sp-xl); border-radius: var(--shape-xl); background: var(--md-surface-3); }
.faq-list { gap: var(--sp-lg); }
.faq-item { border: 0; padding: var(--sp-xl); border-radius: var(--shape-xl); background: var(--md-surface-1); }
.about-faq-q { font: var(--md-type-title-medium); }
.contact-section h2 { font: var(--md-type-display-medium); }
.contact-email { padding: var(--sp-md) var(--sp-xl); border-radius: var(--shape-full); background: var(--md-surface); color: var(--md-primary); text-decoration: none; font: var(--md-type-label-large); transition: border-radius var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), background-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects); }
.contact-email:hover { background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface)); }
.contact-email:focus-visible, .contact-email:active { background: color-mix(in srgb, var(--md-primary) 10%, var(--md-surface)); }
.contact-email:active { border-radius: var(--shape-sm); }
.social-links a:focus-visible, .social-links a:active { background: color-mix(in srgb, var(--md-on-primary-container) 10%, transparent); }
.site-footer { border: 0; }
@media (max-width: 64rem) {
    .site-nav .nav-icon { display: none; }
    .site-nav a { padding-inline: var(--sp-md); }
    .legal-hero-title { font: var(--md-type-display-medium); font-weight: 600; }
    .hero-statement { font: var(--md-type-display-small); }
    .project-row { grid-template-columns: 3rem minmax(0, 1fr); }
    .project-category { grid-column: 2; text-align: left; }
}
@media (max-width: 48rem) {
    .header-inner { padding-block: 0; min-height: 7rem; flex-wrap: nowrap; gap: var(--sp-md); }
    .site-nav { order: initial; width: auto; border: 0; margin: 0; padding: 0; }
    .panel-title { font: var(--md-type-headline-small); }
    .section-heading h2 { font: var(--md-type-headline-medium); }
    .featured-copy h3 { font: var(--md-type-display-small); }
    .timeline li { grid-template-columns: 7rem minmax(0, 1fr); }
    .contact-section h2 { font: var(--md-type-display-small); }
}
@media (max-width: 40rem) {
    body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
    .header-inner { min-height: 4rem; }
    .wordmark { min-width: 0; }
    .theme-label { position: absolute; width: .0625rem; height: .0625rem; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
    .site-nav { position: fixed; inset: auto 0 0; z-index: 10; width: 100%; min-height: calc(5rem + env(safe-area-inset-bottom)); padding: 0 var(--sp-sm) env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--md-surface-3); gap: 0; }
    .site-nav a { flex-direction: column; justify-content: center; gap: var(--sp-xs); border-radius: 0; padding: var(--sp-md) var(--sp-xs); font: var(--md-type-label-medium); }
    .site-nav .nav-icon { display: grid; width: 4rem; height: 2rem; border-radius: var(--shape-full); transition: background-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects), border-radius var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
    .site-nav a[aria-current="location"] { background: transparent; }
    .site-nav a[aria-current="location"] .nav-icon { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
    .site-nav a:hover .nav-icon { background: color-mix(in srgb, var(--md-on-surface) 8%, var(--md-surface-3)); }
    .site-nav a:active .nav-icon { border-radius: var(--shape-sm); background: color-mix(in srgb, var(--md-on-surface) 10%, var(--md-secondary-container)); }
    .site-nav a:focus-visible { outline-offset: -.25rem; }
    .legal-hero-title { font: var(--md-type-display-small); font-weight: 600; }
    .hero-statement { font: var(--md-type-headline-large); font-weight: 400; }
    .hero-actions .button { flex: 1; }
    .experience-strip, .expertise-grid, .ventures-grid { grid-template-columns: 1fr; }
    .experience-strip > div:last-child { grid-column: auto; }
    .project-row { padding: var(--sp-lg); grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-md); }
    .project-index { min-height: 2rem; }
    .timeline li { grid-template-columns: 1fr; gap: var(--sp-lg); }
    .timeline-date { display: inline-flex; justify-self: start; align-items: baseline; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-lg); font: var(--md-type-title-large); }
    .timeline-date span { margin: 0; }
}
@media (max-width: 24rem) { .hero-actions .button { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
    :root { --md-spring-fast-spatial-dur: .01ms; --md-spring-fast-effects-dur: .01ms; }
}

[hidden], .theme-toggle[hidden] { display: none; }

.hero-identity { display: flex; align-items: center; gap: var(--sp-xl); }
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-xl); }
.hero-proof a { display: inline-flex; align-items: center; gap: var(--sp-sm); min-height: 3rem; padding: var(--sp-sm) var(--sp-md); border-radius: var(--shape-sm); background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: var(--md-type-label-large); text-decoration: none; }
.hero-proof a:hover { background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container)); }
.hero-proof a:focus-visible, .hero-proof a:active { background: color-mix(in srgb, var(--md-on-secondary-container) 10%, var(--md-secondary-container)); }
.hero-portrait { display: block; flex: none; width: 5.5rem; height: auto; border-radius: var(--shape-xl); }
.hero-identity .eyebrow { max-width: 26ch; text-wrap: balance; }
.engineering-panel { display: block; }
.engineering-flow { margin: var(--sp-2xl) 0; }
.flow-route { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 4.5rem; gap: var(--sp-md); align-items: center; max-width: 30rem; margin-inline: auto; }
.flow-endpoint { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); text-align: center; font: var(--md-type-label-large); }
.flow-icon { display: block; width: 2.25rem; height: 2.25rem; }
.flow-arrow { position: absolute; top: 1rem; color: var(--md-on-primary-container); font: var(--md-type-title-large); }
.flow-idea .flow-arrow { right: -1rem; }
.flow-delivery .flow-arrow { left: -1rem; }
.flow-stack { position: relative; min-width: 0; padding: var(--sp-xl) 0; }
.flow-network { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-frame { stroke: color-mix(in srgb, var(--md-on-primary-container) 30%, transparent); stroke-width: 1.5; }
.flow-mesh { stroke: color-mix(in srgb, var(--md-on-primary-container) 22%, transparent); stroke-width: 1; }
.flow-nodes { fill: var(--md-primary-container); stroke: var(--md-on-primary-container); stroke-width: 1.5; }
.flow-layers { position: relative; display: grid; gap: var(--sp-xl); justify-items: center; list-style: none; padding: 0; margin: 0; }
.flow-layers li { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); min-height: 2.5rem; padding: var(--sp-sm) var(--sp-md); border-radius: var(--shape-full); background: var(--md-on-primary-container); color: var(--md-primary-container); font: var(--md-type-label-large); }
.flow-layers svg { flex: none; width: 1.125rem; height: 1.125rem; }
.flow-caption { width: fit-content; margin: var(--sp-lg) auto 0; padding: var(--sp-sm) var(--sp-md); border-radius: var(--shape-sm); background: var(--md-surface); color: var(--md-on-surface); text-align: center; font: var(--md-type-label-large); }
@media (max-width: 40rem) {
    .hero-identity { gap: var(--sp-lg); }
    .hero-portrait { width: 4.5rem; }
    .hero { padding-top: var(--sp-xl); }
    .hero-copy .legal-hero-title { margin-block: var(--sp-xl) var(--sp-lg); }
}
@media (max-width: 24rem) {
    .flow-route { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .flow-stack { width: 100%; max-width: 15rem; justify-self: center; }
    .flow-endpoint { flex-direction: row; justify-content: center; }
    .flow-idea .flow-arrow { top: auto; bottom: -1.75rem; right: calc(50% - .5rem); transform: rotate(90deg); }
    .flow-delivery .flow-arrow { top: -1.75rem; left: calc(50% - .5rem); transform: rotate(90deg); }
}

/* Stack the flow whenever its card is narrow, including medium desktop columns. */
.flagship-overview { margin-bottom: var(--sp-3xl); }
.flagship-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-lg); }
.flagship-grid > .expertise-card { display: flex; flex-direction: column; align-items: flex-start; }
.flagship-grid .flagship-status { margin: 0 0 var(--sp-lg); color: var(--md-primary); font: var(--md-type-label-large); }
.flagship-grid .flagship-impact { margin-bottom: var(--sp-xl); }
.flagship-grid .case-study-link { margin-top: auto; }
@media (max-width: 64rem) {
    .flagship-grid { grid-template-columns: 1fr; }
}
.flow-layers li { padding: 0; min-height: 0; background: transparent; }
.flow-layer { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); min-height: 3rem; padding: var(--sp-sm) var(--sp-md); border: 0; border-radius: var(--shape-full); background: var(--md-on-primary-container); color: var(--md-primary-container); font: var(--md-type-label-large); cursor: pointer; transition: border-radius var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), background-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects); }
.flow-layer:hover { background: color-mix(in srgb, var(--md-primary-container) 8%, var(--md-on-primary-container)); }
.flow-layer:focus-visible, .flow-layer:active { outline: .1875rem solid var(--md-on-primary-container); outline-offset: .125rem; background: color-mix(in srgb, var(--md-primary-container) 10%, var(--md-on-primary-container)); }
.flow-layer:active, .flow-layer[aria-pressed="true"] { border-radius: var(--shape-sm); }
.flow-layer[aria-pressed="true"] { background: var(--md-surface); color: var(--md-primary); outline: .125rem solid var(--md-on-primary-container); outline-offset: .125rem; }
.flow-layer[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface)); }
.flow-layer[aria-pressed="true"]:focus-visible { outline-width: .1875rem; background: color-mix(in srgb, var(--md-primary) 10%, var(--md-surface)); }
.flow-layer:disabled { cursor: default; }
.layer-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-lg); min-height: 3.5rem; margin-bottom: var(--sp-xl); }
.layer-status { color: var(--md-on-surface-variant); font: var(--md-type-body-medium); }
.layer-feedback .button[hidden] { display: none; }
.expertise-card.is-related { outline: 1px solid var(--md-primary); outline-offset: 0; }
.expertise-card[data-layers] { scroll-margin-block: var(--sp-2xl); }
.expertise-card[data-layers]:focus-visible { outline: .1875rem solid var(--md-primary); outline-offset: .125rem; }
.expertise-grid { align-items: start; }
#expertise .expertise-grid { align-items: stretch; grid-auto-rows: 1fr; }
#expertise .expertise-card { display: flex; flex-direction: column; align-items: flex-start; }
#expertise .tag-list { margin-top: auto; padding-top: var(--sp-xl); }
@media (max-width: 48rem) {
    #expertise .expertise-grid { grid-auto-rows: auto; }
}
.case-grid { align-items: stretch; row-gap: 0; }
.case-grid > .expertise-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; margin-bottom: var(--sp-lg); }
.case-grid .card-code { justify-self: start; align-self: start; }
.case-grid .tag-list { align-self: start; margin-bottom: var(--sp-xl); }
.case-card-footer { display: flex; align-items: center; border-top: 1px solid var(--md-outline-variant); padding-top: var(--sp-sm); }
.case-study-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); min-height: 3rem; width: 100%; padding: var(--sp-sm); border-radius: var(--shape-sm); font: var(--md-type-label-large); text-decoration: none; }
.case-study-link:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.case-study-link:focus-visible, .case-study-link:active { background: color-mix(in srgb, var(--md-primary) 10%, transparent); }
.case-study-list { display: grid; gap: var(--sp-md); }
.case-study-list .case-detail { margin-top: 0; padding: var(--sp-xl); border: 0; border-radius: var(--shape-xl); background: var(--md-surface-1); scroll-margin-block: var(--sp-2xl); }
.case-study-list .case-detail summary { margin-top: 0; }
.case-detail summary h3 { margin: 0; font: var(--md-type-title-medium); }
.case-study-list .case-detail-content { max-width: 70ch; padding-inline: var(--sp-md); }
@supports not (grid-template-rows: subgrid) {
    .case-grid > .expertise-card { display: flex; flex-direction: column; }
    .case-grid .tag-list { margin-top: auto; padding-top: var(--sp-xl); }
}
#ai-era-title:focus-visible { outline: .1875rem solid var(--md-primary); outline-offset: .25rem; }
.case-detail { margin-top: var(--sp-xl); border-top: 1px solid var(--md-outline-variant); }
.case-detail summary { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-md); margin-top: var(--sp-sm); border-radius: var(--shape-sm); color: var(--md-primary); font: var(--md-type-label-large); cursor: pointer; list-style: none; }
.case-detail summary::-webkit-details-marker { display: none; }
.case-detail summary:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.case-detail summary:focus-visible, .case-detail summary:active { background: color-mix(in srgb, var(--md-primary) 10%, transparent); outline: .1875rem solid var(--md-primary); outline-offset: .125rem; }
.case-detail summary span { font: var(--md-type-title-large); transition: transform var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
.case-detail[open] summary span { transform: rotate(45deg); }
.case-detail-content { padding-top: var(--sp-lg); }
.case-detail-content h4 { margin: var(--sp-xl) 0 0; font: var(--md-type-title-medium); }
.case-detail-content h4:first-child { margin-top: 0; }
.case-detail-content p { font: var(--md-type-body-medium); }
.case-architecture { display: flex; flex-direction: column; gap: var(--sp-sm); margin: var(--sp-md) 0 0; padding-left: var(--sp-xl); }
.case-architecture li { padding: var(--sp-md); border-radius: var(--shape-sm); background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: var(--md-type-body-medium); overflow-wrap: anywhere; }
.engineering-panel { container-type: inline-size; }
@container (max-width: 18rem) {
    .flow-route { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .flow-stack { width: 100%; max-width: 15rem; justify-self: center; }
    .flow-endpoint { flex-direction: row; justify-content: center; }
    .flow-idea .flow-arrow { top: auto; bottom: -1.75rem; right: calc(50% - .5rem); transform: rotate(90deg); }
    .flow-delivery .flow-arrow { top: -1.75rem; left: calc(50% - .5rem); transform: rotate(90deg); }
}