/* Editorial Odoo portfolio: no external fonts, images, or runtime dependencies. */
:root {
  color-scheme: light;
  --color-bg: #f5f7f8;
  --color-surface: #ffffff;
  --color-ink: #142235;
  --color-muted: #526276;
  --color-accent: #485fc7;
  --color-accent-strong: #354ba8;
  --color-border: #dce2e8;
  --color-tint: #e9eef5;
  --color-soft-blue: #edf1ff;
  --color-warning: #7a4e13;
  --color-warning-bg: #fff5df;
  --radius: 10px;
  --motion-fast: 180ms;
  --motion-normal: 260ms;
  --motion-media: 320ms;
  --motion-slow: 520ms;
  --motion-stagger: 90ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-card-lift: -4px;
  --motion-media-scale: 1.02;
  --motion-reveal-distance: 20px;
  --container: 1184px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--color-ink);
  background: var(--color-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; border-radius: 3px; }
p { color: var(--color-muted); line-height: 1.72; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 650; letter-spacing: -.04em; }
h1 { font-size: clamp(42px, 5.2vw, 72px); line-height: 1.08; }
h2 { font-size: clamp(29px, 3.2vw, 42px); line-height: 1.17; }
h3 { font-size: 22px; line-height: 1.3; }
.container, .nav-container { width: min(calc(100% - 96px), var(--container)); margin-inline: auto; }
.accent, .logo span { color: var(--color-accent); }

.skip-link { position: fixed; left: 16px; top: -100px; z-index: 30; padding: 14px 18px; color: white; background: var(--color-ink); }
.skip-link:focus { top: 12px; }
.preview-banner { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 34px; padding: 7px 16px; color: white; background: #263751; font: 10px/1.4 Consolas, "Courier New", monospace; letter-spacing: .13em; text-align: center; }
.preview-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #ffd16a; }
.site-header { position: relative; z-index: 5; border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.94); }
.nav-container { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { padding-block: 9px; font-size: 27px; font-weight: 750; letter-spacing: -1.8px; }
.nav-right { display: flex; align-items: center; gap: 31px; }
.nav-links { display: flex; align-items: center; gap: 27px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 560; }
.nav-links a, .lang-option { display: inline-flex; min-height: 44px; align-items: center; }
.nav-links a { color: var(--color-muted); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-accent-strong); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.lang-option { gap: 8px; padding-left: 20px; border-left: 1px solid var(--color-border); color: var(--color-ink); font-size: 11px; font-weight: 700; }
.nav-toggle { display: none; }

.hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr); align-items: center; gap: 8%; padding: 88px 0 82px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--color-muted); font: 10px/1.5 Consolas, "Courier New", monospace; font-weight: 600; letter-spacing: .14em; }
.eyebrow > span:first-child:not(.line) { color: var(--color-accent); }
.line { display: inline-block; width: 25px; height: 1px; background: var(--color-accent); }
.hero h1 { max-width: 720px; margin-top: 25px; letter-spacing: -.055em; }
.hero-role { display: block; margin-top: 8px; color: var(--color-accent); font-weight: 520; }
.hero-specialties { margin-top: 20px; color: var(--color-ink); font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.hero-description { max-width: 610px; margin-top: 14px; font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 22px; padding: 12px 18px; border: 1px solid var(--color-accent); border-radius: 5px; color: white; background: var(--color-accent); font-size: 12px; font-weight: 650; transition: background .15s ease, border-color .15s ease; }
.button:hover { border-color: var(--color-accent-strong); background: var(--color-accent-strong); }
.button.secondary { color: var(--color-ink); border-color: #bdc8d5; background: transparent; }
.button.secondary:hover { border-color: var(--color-ink); background: var(--color-tint); }
.hero-footnote { display: flex; align-items: center; gap: 10px; margin-top: 27px; color: var(--color-muted); font-size: 11px; }
.small-square { width: 6px; height: 6px; background: var(--color-accent); }
.hero-panel { position: relative; min-height: 360px; overflow: hidden; padding: 22px 25px; border: 1px solid #253851; border-radius: var(--radius); color: white; background: #14253b; }
.hero-panel::after { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 34px 34px; content: ""; mask-image: linear-gradient(135deg, black, transparent 75%); }
.panel-top, .panel-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #c0ccdc; font: 9px/1.5 Consolas, "Courier New", monospace; letter-spacing: .12em; }
.panel-dot { width: 7px; height: 7px; border-radius: 50%; background: #91dab0; }
.hero-mark { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 140px; margin: 24px 0 8px; color: #91a9ff; }
.hero-mark span:first-child { font-size: 142px; font-weight: 650; line-height: .9; letter-spacing: -.12em; }
.hero-mark span:last-child { align-self: flex-start; padding: 21px 26px 0 0; font-size: 42px; }
.panel-caption, .panel-bottom { position: relative; z-index: 1; }
.panel-caption > span { color: #9eafc4; font: 9px Consolas, "Courier New", monospace; letter-spacing: .16em; }
.panel-caption strong { display: block; margin: 7px 0 8px; color: white; font-size: 20px; font-weight: 560; }
.panel-caption p { color: #ced7e3; font-size: 12px; line-height: 1.65; }
.panel-bottom { margin-top: 19px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.panel-bottom > span:last-child { font-size: 20px; }

.section { padding: 58px 0; border-top: 1px solid var(--color-border); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.section-heading .eyebrow { margin-bottom: 13px; }
.section-heading h2 { max-width: 760px; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--color-accent-strong); font-size: 12px; font-weight: 650; white-space: nowrap; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-card { min-width: 0; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--color-border); border-top: 3px solid #29466d; border-radius: var(--radius); background: var(--color-surface); overflow: hidden; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.project-card.additional-card { border-top-color: #9aa9bd; background: #f8f9fb; }
.project-card[hidden] { display: none; }
.project-card:hover { transform: translateY(-2px); border-color: #9cb1d4; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); }
.project-card-content { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 20px; }
.project-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font: 11px/1.4 Consolas, "Courier New", monospace; letter-spacing: .05em; color: #627288; }
.project-card-meta .project-domain { margin-top: 0; color: var(--color-accent-strong); font-weight: 700; }
.project-card-meta .meta-sep { color: #94a3b8; }
.project-card-meta .project-employer { color: #475569; }
.project-section-note { margin: -10px 0 22px; color: #64748b; font-size: 12px; line-height: 1.5; font-style: italic; }
.project-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.project-card-top .eyebrow { font-size: 10px; }
.status-badge { display: inline-flex; min-height: 25px; align-items: center; padding: 4px 8px; border: 1px solid #d7dfec; border-radius: 3px; color: #526176; background: #f2f5f9; font: 9px/1.4 Consolas, "Courier New", monospace; }
.draft-badge { border-color: #e8d3a4; color: var(--color-warning); background: var(--color-warning-bg); }
.project-domain { margin-top: 0; color: var(--color-accent-strong); font: 11px/1.45 Consolas, "Courier New", monospace; letter-spacing: .08em; }
.project-card h3 { margin-top: 10px; font-size: 21px; line-height: 1.35; }
.project-card h3 a:hover { color: var(--color-accent-strong); }
.project-card h3 a span { color: var(--color-accent); font-size: 16px; }
.project-card > p, .project-card .project-summary { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #334155; flex: 1 1 auto; }
.project-card .project-problem { color: #425168; }
.project-card .contribution-summary { display: grid; gap: 4px; margin-top: 12px; color: var(--color-ink); font-size: 13px; }
.contribution-summary strong { color: var(--color-accent-strong); }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tags span, .tags a { display: inline-flex; min-height: 28px; align-items: center; padding: 5px 9px; border: 1px solid var(--color-border); border-radius: 3px; color: #4c5a6b; background: #f7f8fa; font: 11px/1.4 Consolas, "Courier New", monospace; }
.tags a:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
.project-card-link { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; margin-top: 14px; color: var(--color-accent-strong); font-size: 13px; font-weight: 700; text-decoration: none; transition: gap .15s ease; }
.draft-badge { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 9px; border: 1px solid #e8d3a4; border-radius: 3px; color: var(--color-warning); background: var(--color-warning-bg); font-size: 10px; }
.project-card-link:hover { text-decoration: underline; text-underline-offset: 4px; gap: 10px; }
.review-notice { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 27px; padding: 15px 18px; border: 1px solid #e6cc96; border-radius: 6px; color: var(--color-warning); background: var(--color-warning-bg); font-size: 12px; line-height: 1.6; }
.review-notice strong { flex: 0 0 auto; }
.case-notice { margin-top: 36px; }
.how-section { background: #f0f3f7; }
.approach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.approach-grid article { min-height: 170px; padding: 22px; border: 1px solid var(--color-border); border-radius: 7px; background: white; }
.approach-grid article > span { color: var(--color-accent); font: 10px Consolas, "Courier New", monospace; }
.approach-grid h3 { margin-top: 17px; font-size: 18px; }
.approach-grid p { margin-top: 9px; font-size: 12px; }
.technical-section .writing-card { margin-top: 22px; }
.section-note { margin-top: 15px; font-size: 10px; }
.writing-card { display: grid; grid-template-columns: 28% minmax(0, 1fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.article-art { display: flex; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; gap: 20px; color: #d8e1f1; background: #263851; }
.code-mark { font: 63px/1.1 Consolas, "Courier New", monospace; letter-spacing: -.1em; }
.article-art > span:last-child { color: #bfcbde; font: 9px Consolas, "Courier New", monospace; letter-spacing: .15em; }
.article-copy { padding: 28px 32px; }
.article-copy .eyebrow { font-size: 9px; }
.article-copy h3 { margin-top: 13px; font-size: 21px; }
.article-copy h3 a:hover { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 4px; }
.article-copy p { margin-top: 11px; font-size: 12px; }
.article-copy .source-note { font-size: 10px; }
.contact-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 10px 0 74px; padding: 34px; border: 1px solid #d4ddea; border-radius: var(--radius); background: var(--color-soft-blue); }
.contact-band h2 { margin-top: 11px; font-size: 30px; }
.contact-band p:last-child { margin-top: 8px; font-size: 13px; }
.contact-band .button { flex: 0 0 auto; }
.empty-work > p { max-width: 680px; font-size: 14px; }
.empty-work .text-link { margin-top: 9px; }
.site-footer { border-top: 1px solid var(--color-border); background: #fff; }
.footer-main { display: flex; align-items: center; gap: 24px; padding-block: 24px; }
.footer-main > p { font-size: 11px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-left: auto; font-size: 11px; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-links a:hover { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 17px; border-top: 1px solid var(--color-border); color: var(--color-muted); font: 9px Consolas, "Courier New", monospace; }

.page-intro { max-width: 860px; min-height: 300px; padding: 74px 0 48px; }
.page-intro h1 { margin: 17px 0; }
.page-intro > p:not(.eyebrow) { max-width: 730px; font-size: 16px; }
.content-start { padding-top: 0; border-top: 0; padding-bottom: 80px; }
.empty-state { max-width: 740px; padding: 36px; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; }
.empty-state h2 { margin-top: 15px; font-size: 26px; }
.empty-state p { margin-top: 10px; font-size: 13px; }
.empty-state .button { margin-top: 20px; }
.empty-mark { color: var(--color-accent); font: 11px Consolas, "Courier New", monospace; }
.empty-state.compact { margin: 0 0 70px; }
.project-filters { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.js .project-filters { display: flex; }
.project-filters button { min-height: 44px; padding: 9px 14px; border: 1px solid #bdc8d5; border-radius: 4px; color: var(--color-ink); background: white; cursor: pointer; font-size: 11px; font-weight: 600; }
.project-filters button:hover, .project-filters button[aria-pressed="true"] { border-color: var(--color-ink); color: white; background: var(--color-ink); }
.filter-status { min-height: 24px; margin: 5px 0 12px; font-size: 10px; }
.panel { padding: 30px; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; }
.contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 54px; margin-bottom: 80px; }
.contact-link { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--color-border); font-size: 16px; overflow-wrap: anywhere; }
.contact-email { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.contact-label { color: var(--color-muted); font: 10px/1.4 Consolas, "Courier New", monospace; letter-spacing: .1em; }
.contact-email-address { width: fit-content; color: var(--color-ink); font-size: clamp(17px, 2vw, 22px); font-weight: 650; overflow-wrap: anywhere; }
.contact-email-address:hover { color: var(--color-accent-strong); }
.copy-email-button { width: fit-content; min-height: 38px; padding: 7px 11px; border: 1px solid #bdc8d5; border-radius: 4px; color: var(--color-ink); background: white; cursor: pointer; font-size: 11px; font-weight: 600; }
.copy-email-status { min-height: 18px; color: var(--color-muted); font-size: 11px; }
.contact-link:hover { color: var(--color-accent-strong); }
.contact-aside { padding-top: 8px; }
.contact-aside h2 { font-size: 25px; }
.contact-aside p { margin-top: 14px; font-size: 13px; }
.contact-aside .text-link { margin-top: 12px; }
.experience-list { display: grid; gap: 14px; margin-bottom: 80px; }
.career-history-section .experience-list { margin-bottom: 0; }
.career-history-section + .career-history-section { margin-top: 42px; }
.career-subsection-heading { margin: 20px 0 0; color: var(--color-ink); font-size: 15px; }
.experience-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 22px; padding: 26px; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease; }
@media (hover: hover) and (pointer: fine) {
  .experience-card:hover { border-color: rgba(37,99,235,0.3); box-shadow: 0 6px 24px rgba(8,15,36,0.06); transform: translateY(-1px); }
  .experience-card:hover .experience-logo-box { transform: scale(1.02); }
}
.experience-logo-box { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; min-width: 72px; border-radius: 12px; background: #ffffff; border: 1px solid rgba(8,15,36,0.08); box-shadow: 0 2px 8px rgba(8,15,36,0.04); padding: 8px; box-sizing: border-box; overflow: hidden; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.experience-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.experience-logo-box--symbol { background: #0f1d38; color: #60a5fa; border-color: rgba(96,165,250,0.25); }
.experience-symbol-icon { display: block; }
.experience-logo-box--initial { background: #1e293b; color: #f8fafc; }
.experience-logo-box--initial .experience-mark { font-size: 24px; font-weight: 700; color: #fff; background: transparent; width: auto; height: auto; }
.experience-mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 7px; color: white; background: #20324b; font-size: 21px; font-weight: 650; }
.experience-card .eyebrow { font-size: 10px; }
.experience-card h2 { margin-top: 7px; font-size: 22px; }
.experience-role { margin-top: 5px; color: var(--color-ink); font-size: 12px; font-weight: 650; }
.experience-card .experience-summary { margin-top: 12px; font-size: 14px; }
.experience-progression { display: grid; gap: 5px; margin-top: 16px; color: var(--color-muted); font-size: 10px; }
.experience-progression > span { color: var(--color-muted); font-size: 10px; font-weight: 500; }
.experience-progression strong { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--color-accent-strong); font-size: 13px; }
.experience-timeline { display: grid; margin: 13px 0 0; padding: 0; list-style: none; }
.experience-position { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.experience-role { margin: 0; font-size: 14px; font-weight: 700; }
.experience-period { margin-top: 4px; color: var(--color-muted); font-size: 12px; }
.current-role { margin-left: 7px; padding: 3px 7px; border-radius: 99px; color: var(--color-accent-strong); background: var(--color-soft-blue); font-size: 10px; font-weight: 700; }
.experience-card .tags { margin-top: 15px; }
.experience-work-label { margin-top: 21px; color: var(--color-muted); font: 10px/1.45 Consolas, "Courier New", monospace; letter-spacing: .08em; }
.experience-work-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 5px; }
.experience-work-links a { display: inline-flex; min-height: 38px; align-items: center; gap: 6px; color: var(--color-accent-strong); font-size: 12px; font-weight: 650; }
.experience-work-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.evidence-links { margin-top: 12px; }
.freelance-directory { margin-top: 18px; }
.freelance-directory summary { min-height: 44px; padding: 12px 0; color: var(--color-accent-strong); font-weight: 650; cursor: pointer; }
.freelance-project-list { margin: 4px 0 16px; padding: 0; list-style: none; }
.freelance-project-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.freelance-project-year { padding-top: 9px; color: var(--color-muted); font-size: 12px; }
.freelance-project-list a { display: block; width: fit-content; min-height: 44px; padding: 8px 0; color: var(--color-accent-strong); font-size: 14px; overflow-wrap: anywhere; }
.freelance-project-list .freelance-secondary-link { font-size: 12px; }
.credential-resource-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; padding: 0; list-style: none; }
.credential-resource { min-width: 0; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; }
.credential-resource h4 { font-size: 17px; overflow-wrap: anywhere; }
.credential-resource > p { margin-top: 10px; color: var(--color-muted); font-size: 14px; }
.initiative-card { grid-template-columns: minmax(0, 1fr); }
.experience-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 80px; padding: 28px; border: 1px solid #d4ddea; border-radius: var(--radius); background: var(--color-soft-blue); }
.experience-cta h2 { font-size: 23px; }
.experience-cta p { margin-top: 7px; font-size: 13px; }
.experience-cta .button { flex: 0 0 auto; }
.client-disclosure-note { margin-top: 14px; color: var(--color-muted); font-size: 13px !important; }
.case-intro { max-width: 980px; padding: 57px 0 38px; }
.case-intro h1 { margin-top: 15px; }
.case-summary { max-width: 780px; margin-top: 14px; font-size: 16px; }
.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.case-meta > div { min-height: 93px; padding: 14px; border: 1px solid var(--color-border); border-radius: 5px; background: white; }
.case-meta span { color: #64748a; font: 9px Consolas, "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.case-meta p { margin-top: 7px; color: var(--color-ink); font-size: 11px; line-height: 1.55; }
.case-body { max-width: 850px; padding-bottom: 75px; }
.case-body > section { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 17px; padding: 23px 0; border-top: 1px solid var(--color-border); }
.case-section-number { padding-top: 5px; color: var(--color-accent); font: 10px Consolas, "Courier New", monospace; }
.case-body h2 { margin-bottom: 8px; font-size: 20px; }
.case-body section p:not(.case-section-number) { font-size: 13px; }
.evidence-link { margin-top: 8px; }
.related-work { display: flex; flex-direction: column; gap: 9px; margin-top: 35px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.related-work a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--color-accent-strong); font-size: 12px; font-weight: 650; }
main:focus { outline: none; }
body:has(.page-intro), body:has(.case-intro) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(.page-intro) main, body:has(.case-intro) main { flex: 1; }

@media (min-width: 1600px) {
  .hero { padding-block: 102px 94px; }
}
@media (max-width: 1024px) {
  .container, .nav-container { width: calc(100% - 64px); }
  .nav-right { gap: 20px; }
  .nav-links { gap: 18px; font-size: 12px; }
  .hero { gap: 5%; padding-block: 65px; }
  .hero-panel { min-height: 340px; }
  .project-card { padding: 0; }
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-layout { gap: 34px; }
  .footer-main { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .container { width: calc(100% - 40px); }
  
  /* Unified Floating Mobile Header across all pages */
  .site-header {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    z-index: 100 !important;
    background: rgba(3, 7, 18, 0.90) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    transform: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
  }
  .site-header.is-scrolled {
    background: rgba(3, 7, 18, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  }
  .site-header.nav-is-open,
  .site-header:has(.nav-open) {
    border-radius: 24px !important;
    background: rgba(3, 7, 18, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7) !important;
  }

  .nav-container {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    margin: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  .site-header .logo {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    text-decoration: none !important;
  }
  .site-header .logo span {
    color: #818cf8 !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 6px 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  }
  .nav-toggle:hover,
  .nav-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    outline: none !important;
  }
  .nav-toggle:active {
    transform: scale(0.96) !important;
  }
  .nav-toggle .toggle-icon {
    font-size: 15px;
    line-height: 1;
    font-weight: 400;
  }

  /* Progressive enhancement: when JS is disabled, links stay visible and toggle is hidden */
  .nav-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 0 16px !important;
    margin: 0 !important;
    gap: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  html:not(.js) .nav-toggle {
    display: none !important;
  }
  .js .nav-right {
    display: none !important;
  }
  .js .nav-container.nav-open .nav-right {
    display: flex !important;
    animation: navSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
  @keyframes navSlideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .nav-links li {
    width: 100% !important;
  }
  .nav-links a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: color 0.18s ease, background-color 0.18s ease !important;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
  }
  .nav-links a[aria-current="page"] {
    color: #ffffff !important;
    background: rgba(99, 102, 241, 0.22) !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  .lang-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    margin-top: 6px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.18s ease, border-color 0.18s ease !important;
  }
  .lang-option:hover,
  .lang-option:focus-visible {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    outline: none !important;
  }

  /* Clear top space on non-hero pages so fixed header doesn't cover content */
  body:not(:has(.hero-editorial)) main.container {
    padding-top: 84px !important;
  }
}

/* Subtle backdrop dimming when mobile menu is open */
.nav-backdrop {
  display: none;
}
@media (max-width: 767px) {
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  body.mobile-nav-active .nav-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header,
    .nav-right,
    .nav-backdrop {
      transition: none !important;
      animation: none !important;
    }
  }
}

@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; gap: 31px; padding: 48px 0 42px; }
  .hero h1 { font-size: clamp(40px, 10vw, 58px); }
  .hero .eyebrow { gap: 8px; font-size: 9px; letter-spacing: .1em; }
  .hero-specialties { margin-top: 17px; font-size: 13px; line-height: 1.6; }
  .hero-description { margin-top: 9px; font-size: 15px; }
  .actions { gap: 8px; margin-top: 22px; }
  .button { min-height: 46px; gap: 12px; padding: 11px 13px; font-size: 11px; }
  .hero-footnote { margin-top: 20px; }
  .hero-panel { min-height: 300px; padding: 18px 20px; }
  .hero-mark { height: 105px; margin: 17px 0 4px; }
  .hero-mark span:first-child { font-size: 108px; }
  .hero-mark span:last-child { padding: 11px 19px 0 0; font-size: 33px; }
  .section { padding: 40px 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .section-heading .eyebrow { margin-bottom: 10px; }
  .section-heading h2 { font-size: 29px; }
  .text-link { min-height: 42px; }
  .project-grid, .approach-grid { grid-template-columns: 1fr; gap: 12px; }
  .project-card { padding: 0; }
  .project-card h3 { font-size: 20px; }
  .project-card > p { font-size: 13px; }
  .approach-grid article { min-height: 0; padding: 19px; }
  .approach-grid h3 { margin-top: 12px; }
  .writing-card { grid-template-columns: 1fr; }
  .article-art { min-height: 150px; gap: 9px; }
  .code-mark { font-size: 48px; }
  .article-copy { padding: 23px; }
  .article-copy h3 { font-size: 20px; }
  .article-copy p { font-size: 13px; }
  .review-notice { flex-direction: column; gap: 3px; padding: 13px 14px; font-size: 11px; }
  .contact-band { align-items: flex-start; flex-direction: column; gap: 18px; margin: 4px 0 44px; padding: 24px; }
  .contact-band h2 { font-size: 27px; }
  .footer-main { align-items: flex-start; flex-direction: column; gap: 11px; padding-block: 21px; }
  .footer-links { gap: 6px 16px; margin-left: 0; }
  .footer-bottom { font-size: 8px; }
  .page-intro { min-height: 0; padding: 48px 0 34px; }
  .page-intro h1, .case-intro h1 { font-size: 42px; letter-spacing: -.05em; }
  .page-intro > p:not(.eyebrow) { font-size: 15px; }
  .empty-state { padding: 25px; }
  .project-filters { gap: 6px; }
  .project-filters button { min-height: 44px; padding-inline: 11px; font-size: 10px; }
  .contact-layout { grid-template-columns: 1fr; gap: 26px; margin-bottom: 55px; }
  .contact-layout .panel { padding: 22px; }
  .experience-cta { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 55px; padding: 22px; }
  .experience-cta h2 { font-size: 21px; }
  .contact-link { min-height: 64px; font-size: 15px; }
  .case-intro { padding: 36px 0 26px; }
  .case-summary { font-size: 14px; }
  .case-meta { gap: 7px; margin-top: 21px; }
  .case-meta > div { min-height: 88px; padding: 11px; }
  .case-meta span { font-size: 8px; }
  .case-meta p { font-size: 10px; }
  .case-body > section { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 19px 0; }
  .case-body h2 { font-size: 18px; }
  .case-body section p:not(.case-section-number) { font-size: 12px; }
  .experience-card { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .experience-logo-box { width: 56px; height: 56px; min-width: 56px; border-radius: 10px; padding: 6px; }
  .experience-mark { width: 40px; height: 40px; font-size: 16px; }
  .experience-card h2 { font-size: 18px; overflow-wrap: anywhere; }
  .experience-card .eyebrow { font-size: 8px; }
  .experience-progression strong { font-size: 12px; }
  .experience-position { gap: 4px 10px; }
  .experience-role { font-size: 13px; }
  .experience-card > div:last-child > p:last-of-type { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}
@media print {
  .preview-banner, .site-header, .site-footer, .skip-link, .actions, .project-filters { display: none !important; }
  .container { width: 100%; }
  body { color: #000; background: #fff; }
  .project-card, .panel, .writing-card, .experience-card { break-inside: avoid; }
  .page-intro { padding-top: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; overflow-wrap: anywhere; }
}

/* Hero availability pulse badge */
.hero-status-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .05em; }
.hero-status-badge .status-indicator { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 10px; }
.hero-status-badge .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,.7); animation: pulse-green 2s infinite ease-in-out; }
@keyframes pulse-green {
  0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* R3 evidence-led engineering visuals */
.hero-engineering-showcase { overflow: hidden; padding: 23px; border: 1px solid #263b58; border-radius: var(--radius); color: #f6f8fc; background: linear-gradient(145deg,#192b44,#101d30); box-shadow: 0 20px 42px rgba(20,34,53,.12); }
.showcase-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.showcase-heading .eyebrow { color: #aebbd0; }
.showcase-heading > span { color: #aebbd0; font: 9px Consolas,"Courier New",monospace; }
.showcase-controls { display: inline-flex; align-items: center; gap: 6px; }
.showcase-counter { color: #aebbd0; font: 11px/1 Consolas,"Courier New",monospace; letter-spacing: .05em; min-width: 48px; text-align: center; }
.showcase-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid #334d70; border-radius: 4px; background: rgba(255,255,255,.08); color: #c4d0ff; font-size: 13px; font-weight: bold; line-height: 1; cursor: pointer; transition: all .2s ease; user-select: none; }
.showcase-nav-btn:hover { background: rgba(255,255,255,.18); border-color: #6382b0; color: #fff; }
.showcase-nav-btn:focus-visible { outline: 2px solid #10B981; outline-offset: 2px; }
.showcase-slide { transition: opacity .2s ease-in-out; }
.showcase-slide:not(.active)[hidden] { display: none !important; }
.showcase-slide .engineering-image { width: 100%; height: auto; border-radius: 6px; display: block; }
.showcase-slide .showcase-visual-wrapper .engineering-visual { min-height: 170px; margin-top: 20px; padding: 17px; }
.hero-engineering-showcase h2 { margin-top: 25px; color: white; font-size: 24px; }
.showcase-attribution { margin-top: 19px; color: #d1dae7; font-size: 11px; line-height: 1.8; }
.showcase-attribution strong { color: #fff; }
.hero-engineering-showcase .text-link { margin-top: 11px; color: #c4d0ff; }
.engineering-visual { min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid rgba(157,180,224,.27); border-radius: 8px; color: #eef3ff; background: radial-gradient(ellipse at 88% 12%,rgba(92,116,203,.22),transparent 50%),linear-gradient(135deg,#1b2c46,#142238); }
.engineering-visual-label { color: #a9bad8; font: 9px/1.5 Consolas,"Courier New",monospace; letter-spacing: .13em; }
.engineering-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 7px; }
.flow-node { min-height: 43px; display: grid; place-items: center; padding: 8px 6px; border: 1px solid rgba(169,190,229,.34); border-radius: 5px; color: #f6f8fc; background: rgba(255,255,255,.055); font-size: 10px; font-weight: 620; line-height: 1.35; text-align: center; }
.flow-arrow { color: #a8baff; font-size: 14px; text-align: center; }
.flow-node-core { border-color: rgba(145,170,255,.6); background: rgba(82,107,193,.2); }
.engineering-visual-note { color: #bdc9da; font-size: 10px; line-height: 1.55; }
.engineering-visual.large { min-height: 186px; margin-top: 18px; padding: 22px; }
.engineering-visual.large .flow-node { min-height: 52px; font-size: 12px; }
.hero-engineering-showcase .engineering-visual { min-height: 170px; margin-top: 20px; padding: 17px; }
.hero-engineering-showcase .engineering-flow { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 5px; }
.project-card:not(.lead-card) > .engineering-visual {
  width: 100%;
  margin: 0;
  padding: 18px 20px 14px;
  border: 0;
  border-bottom: 1px solid rgba(157,180,224,.18);
  border-radius: 0;
}
.project-card .engineering-flow { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 5px; }
.project-card .flow-node { min-height: 40px; font-size: 9px; }
.project-card h3 { overflow-wrap: anywhere; }
.project-client-attribution { color: #58687d; font-size: 10px !important; line-height: 1.55; }
.project-client-attribution strong { color: #33445b; }
.project-visual-note { margin-top: 8px !important; color: #56667b; font-size: 10px !important; }
.lead-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 0;
  padding: 0;
}
.lead-card > .engineering-visual {
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-height: 280px;
  margin: 0;
  padding: 24px;
  border: 0;
  border-right: 1px solid rgba(157, 180, 224, 0.18);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lead-card > .project-card-content {
  grid-column: 2;
  padding: 28px 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lead-card h3 { font-size: 24px; line-height: 1.3; }
.lead-card .project-summary { font-size: 14.5px; }
.lead-card .engineering-flow { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); }
.project-section.featured .project-card:not(.lead-card) { border-top-color: #425b96; }
.project-section.additional .project-card { border-top-color: #9ba8b9; }
.project-filters + .filter-status + .project-section { border-top: 0; padding-top: 18px; }

/* Editorial Selected Odoo Work Layout */
.editorial-project-section {
  padding: 42px 0 46px;
}
.section-subheading {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: #526276;
  max-width: 680px;
}
.editorial-work-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.editorial-featured-col {
  display: flex;
  flex-direction: column;
}
.editorial-featured-card {
  display: flex !important;
  flex-direction: column !important;
  grid-column: auto !important;
  height: 100%;
  border: 1px solid var(--color-border);
  border-top: 3px solid #29466d;
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.editorial-featured-card:hover {
  transform: translateY(-2px);
  border-color: #9cb1d4;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.editorial-featured-card > .editorial-featured-media {
  display: block;
  position: relative;
  overflow: hidden;
  background: #0f172a;
  text-decoration: none;
  border-bottom: 1px solid rgba(157, 180, 224, 0.18);
}
.editorial-featured-card .engineering-visual {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
  position: relative;
  background: transparent !important;
}
.editorial-featured-card .engineering-visual-label {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  margin: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  font: 9.5px/1.3 Consolas, "Courier New", monospace;
  letter-spacing: .08em;
  color: #93c5fd;
}
.editorial-featured-card .engineering-image {
  display: block;
  width: 100%;
  height: 236px;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}
.editorial-featured-card:hover .engineering-image {
  transform: scale(1.025);
}
.editorial-featured-card .engineering-visual-note {
  position: absolute;
  bottom: 8px;
  right: 12px;
  z-index: 2;
  margin: 0;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.8);
  font-size: 9.5px;
  line-height: 1.3;
  color: #cbd5e1;
}
.editorial-featured-card > .project-card-content,
.editorial-featured-card .editorial-featured-content {
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  padding: 20px 24px 20px !important;
  justify-content: flex-start !important;
}
.editorial-featured-card .editorial-featured-heading {
  margin-top: 8px;
  font-size: 21px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.editorial-featured-card .editorial-featured-heading a {
  color: var(--color-ink);
  transition: color .15s ease;
}
.editorial-featured-card .editorial-featured-heading a:hover {
  color: var(--color-accent-strong);
}
.editorial-featured-card .project-summary {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #334155;
  flex: 1 1 auto;
}
.editorial-featured-card .tags {
  margin-top: 14px;
}
.editorial-featured-card .project-card-link {
  margin-top: 14px;
  align-self: flex-start;
}

.editorial-compact-col {
  display: flex;
  flex-direction: column;
}
.editorial-compact-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border: 1px solid var(--color-border);
  border-top: 3px solid #425b96;
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 8px 22px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.compact-work-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  transition: background-color .15s ease;
}
.compact-work-item:last-child {
  border-bottom: none;
}
.compact-work-thumb-wrap {
  display: block;
  width: 110px;
  height: 74px;
  border-radius: 6px;
  overflow: hidden;
  background: #0f172a;
  flex-shrink: 0;
  border: 1px solid rgba(203, 213, 225, 0.5);
  text-decoration: none;
}
.compact-work-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .25s ease;
}
.compact-work-item:hover .compact-work-thumb {
  transform: scale(1.05);
}
.compact-work-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.compact-work-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font: 10.5px/1.3 Consolas, "Courier New", monospace;
  letter-spacing: .05em;
  color: #64748b;
  margin-bottom: 4px;
}
.compact-work-company {
  font-weight: 650;
  color: #475569;
}
.compact-work-category {
  color: var(--color-accent-strong);
  font-weight: 700;
}
.compact-work-title {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0 0 4px;
}
.compact-work-title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.compact-work-item:hover .compact-work-title a {
  color: var(--color-accent-strong);
}
.compact-work-arrow {
  display: inline-block;
  color: var(--color-accent);
  transition: transform .18s ease;
  font-size: 13px;
  margin-left: 2px;
}
.compact-work-item:hover .compact-work-arrow {
  transform: translateX(4px);
  color: var(--color-accent-strong);
}
.compact-work-summary {
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 960px) {
  .editorial-work-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .editorial-featured-card .engineering-image {
    height: 220px;
  }
  .editorial-compact-list {
    height: auto;
  }
}

@media (max-width: 640px) {
  .compact-work-item {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }
  .compact-work-thumb-wrap {
    width: 88px;
    height: 60px;
  }
  .compact-work-title {
    font-size: 14px;
  }
  .compact-work-summary {
    font-size: 12px;
  }
  .editorial-compact-list {
    padding: 6px 16px;
  }
}

/* Open editorial composition, matching CryptoSharia's featured stories. */
.editorial-project-section { padding-block: 84px 88px; }
.editorial-work-layout { grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.editorial-featured-col, .editorial-compact-col { min-width: 0; }
.editorial-featured-col .section-heading { margin-bottom: 40px; }
.editorial-featured-col .section-subheading { max-width: 520px; margin-top: 12px; font-size: 16px; line-height: 1.65; }
.editorial-featured-col .eyebrow { margin-bottom: 12px; }
.editorial-featured-card.project-card { height: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.editorial-featured-card.project-card:hover { transform: none; box-shadow: none; }
.editorial-featured-card .engineering-image { height: auto; aspect-ratio: 16 / 9; }
.editorial-featured-card .engineering-visual-label { display: none; }
.editorial-featured-card > .editorial-featured-content { padding: 24px 0 0 !important; }
.editorial-featured-card .editorial-featured-heading { margin-top: 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.13; letter-spacing: -.045em; text-wrap: balance; }
.editorial-featured-card .project-summary { margin-top: 16px; font-size: 16px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.editorial-featured-card .tags { display: none; }
.editorial-featured-card .project-card-link { margin-top: 24px; }
.editorial-compact-col { position: sticky; top: 104px; align-self: start; padding-top: 30px; }
.editorial-all-work { align-self: flex-start; padding-block: 4px; border-bottom: 1px solid var(--color-border); color: var(--color-ink); }
.editorial-all-work-mobile { display: none; }
.editorial-compact-list { height: auto; margin-top: 18px; padding: 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; box-shadow: none; }
.compact-work-item { grid-template-columns: 136px minmax(0, 1fr); min-height: 152px; padding-block: 20px; gap: 18px; }
.compact-work-item:last-child { border-bottom: 1px solid var(--color-border); }
.compact-work-thumb-wrap { width: 100%; height: auto; aspect-ratio: 3 / 2; border: 0; border-radius: 0; }
.compact-work-meta { flex-direction: column; align-items: flex-start; gap: 4px; font-family: inherit; font-size: 11px; letter-spacing: .04em; }
.compact-work-meta .meta-sep { display: none; }
.compact-work-category { order: -1; }
.compact-work-title { margin-top: 8px; font-size: 18px; line-height: 1.3; letter-spacing: -.025em; }
.compact-work-summary, .compact-work-arrow { display: none; }
@media (min-width: 900px) and (max-width: 1100px) {
  .editorial-work-layout { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 32px; }
  .compact-work-item { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; min-height: 132px; }
}
@media (max-width: 899px) {
  .editorial-project-section { padding-block: 72px 64px; }
  .editorial-work-layout { grid-template-columns: 1fr; gap: 40px; }
  .editorial-featured-col .section-heading { margin-bottom: 24px; }
  .editorial-all-work-mobile { display: inline-flex; align-self: flex-start; margin-bottom: 32px; }
  .editorial-all-work { display: none; }
  .editorial-compact-col { position: static; padding-top: 0; }
  .editorial-compact-list { margin-top: 0; }
  .editorial-featured-card .engineering-image { height: auto; }
  .compact-work-item { grid-template-columns: 112px minmax(0, 1fr); min-height: 126px; padding-block: 16px; }
  .compact-work-title { font-size: 17px; }
}
@media (max-width: 420px) {
  .compact-work-item { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; min-height: 110px; }
  .compact-work-title { font-size: 16px; }
}

.case-visual-section { max-width: 980px; padding: 27px 0 34px; border-top: 1px solid var(--color-border); }
.case-visual-section > .eyebrow { margin-bottom: 14px; }
.visual-source-note { margin-top: 10px; font-size: 10px; }
.case-meta { grid-template-columns: repeat(3,minmax(0,1fr)); }
.case-meta > div { min-height: 100px; }
.case-meta .case-meta-note { padding-top: 7px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 10px; }
.case-section-note { margin-top: 11px; padding-left: 11px; border-left: 2px solid #9baad5; color: #59697d; font-size: 12px !important; }
.application-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 1fr; align-items:stretch; gap: 24px; }
.application-card { min-width: 0; display: grid; grid-template-columns: minmax(150px,.72fr) minmax(0,1.28fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.application-visual { min-height: 265px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 17px; background: linear-gradient(155deg,#edf1fa,#e3eaf2); }
.application-device { width: min(100%,154px); min-height: 196px; padding: 17px 12px 12px; border: 1px solid #425570; border-radius: 13px; background: #1a2d47; box-shadow: 0 10px 18px rgba(25,43,68,.15); }
.application-device-camera { width: 21px; height: 3px; display: block; margin: 0 auto 13px; border-radius: 99px; background: #74839a; }
.application-device-screen { min-height: 145px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 13px 9px; border-radius: 5px; background: #f7f8fc; }
.application-screen-line { display: flex; min-height: 24px; align-items: center; padding: 4px 7px; border-left: 2px solid #5c70c4; color: #26364d; background: #ebeff8; font: 8px/1.3 Consolas,"Courier New",monospace; letter-spacing: .05em; }
.application-screen-line.line-2 { width: 86%; }
.application-screen-line.line-3 { width: 72%; }
.application-visual-caption { color: #65748a; font: 8px/1.4 Consolas,"Courier New",monospace; text-align: center; }
.application-copy { min-width: 0; display: flex; flex-direction: column; padding: 20px; }
.application-copy .eyebrow { align-items: flex-start; font-size: 8px; }
.application-copy h3 { margin-top: 10px; font-size: 18px; overflow-wrap: anywhere; }
.application-contribution { margin-top: 9px; font-size: 12px; }
.application-package { display: grid; gap: 4px; margin-top: 10px; color: #637287; font-size: 9px; }
.application-package code { width: fit-content; max-width: 100%; padding: 5px 7px; overflow-wrap: anywhere; border-radius: 3px; color: #2c3e59; background: #eef1f6; font-size: 9px; }
.application-platforms { margin-top: 11px; }
.application-platforms span { min-height: 25px; font-size: 9px; }
.application-current-note { margin-top: 10px; font-size: 9px; line-height: 1.5; }
.application-links { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: auto; padding-top: 11px; }
.application-links a { display: inline-flex; min-height: 38px; align-items: center; gap: 5px; color: var(--color-accent-strong); font-size: 11px; font-weight: 700; }
.application-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.application-visual + .application-copy { border-left: 1px solid var(--color-border); }
.application-card.application-card--screenshots { display: flex; flex-direction: column; border-radius: 16px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.application-card--screenshots:hover { transform: translateY(-3px); border-color: #acbad0; box-shadow: 0 12px 28px rgba(20,34,53,.07); }
.product-media { margin: 0; padding: 32px 24px 18px; background: #edf1f4; border-bottom: 1px solid var(--color-border); }
.product-media--abadi { background: #eef0f7; }
.product-screen-composition { position: relative; height: 320px; max-width: 420px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 14px; }
.product-screen { width: 142px; flex: 0 0 auto; padding: 5px; border: 1px solid #c2cad3; border-radius: 18px; background: #f9fafb; box-shadow: 0 10px 22px rgba(20,34,53,.12); overflow: hidden; }
.product-screen img { display: block; width: 100%; height: auto; border-radius: 12px; }
.product-media--bp .product-screen--1, .product-media--bp .product-screen--3 { width: 114px; position: absolute; top: 40px; }
.product-media--bp .product-screen--1 { left: 4px; transform: rotate(-5deg); }
.product-media--bp .product-screen--3 { right: 4px; transform: rotate(5deg); }
.product-media--bp .product-screen--2 { position: relative; z-index: 1; width: 166px; }
.product-media--abadi .product-screen--1 { width: 144px; transform: translateY(-6px) rotate(-3deg); }
.product-media--abadi .product-screen--2 { width: 137px; transform: translateY(10px) rotate(3deg); padding: 0; border: 0; border-radius: 16px; }
.product-media figcaption { margin-top: 16px; font-size: 11px; line-height: 1.5; color: var(--color-muted); text-align: center; }
.application-card--screenshots .application-copy { flex: 1; padding: 28px; }
.application-card--screenshots .eyebrow { font: 600 10px/1.5 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .1em; color: var(--color-accent-strong); }
.application-card--screenshots h3 { font-size: clamp(22px,2.2vw,27px); line-height: 1.25; margin-top: 12px; }
.product-description { margin-top: 12px; font-size: 15px; line-height: 1.65; }
.product-facts { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--color-border); display: grid; gap: 14px; }
.product-facts > div { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; }
.product-facts dt { font-size: 12px; font-weight: 650; color: var(--color-ink); }
.product-facts dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-muted); }
.application-card--screenshots .application-links { padding-top: 24px; gap: 12px 24px; }
.application-card--screenshots .application-links a { min-height: 44px; font-size: 13px; }
.application-section-footer { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.application-evidence-note { max-width: 700px; font-size: 12px; line-height: 1.65; }
.application-section-footer .text-link { flex-shrink: 0; padding-block: 12px; }

/* Handheld product evidence: natural card heights and smaller, uncropped screens. */
@media (max-width: 767px) {
  .applications-section .application-grid { grid-auto-rows: auto; gap: 20px; }
  .application-card--screenshots .product-media { padding: 20px 12px 14px; }
  .application-card--screenshots .product-screen-composition { height: 230px; }
  .application-card--screenshots .product-media--bp .product-screen--2 { width: 122px; }
  .application-card--screenshots .product-media--bp .product-screen--1,
  .application-card--screenshots .product-media--bp .product-screen--3 { width: 88px; top: 26px; }
  .application-card--screenshots .product-media--abadi .product-screen--1 { width: 110px; }
  .application-card--screenshots .product-media--abadi .product-screen--2 { width: 106px; }
  .application-card--screenshots .product-media figcaption { margin-top: 10px; }
  .application-card--screenshots .application-copy { padding: 20px; }
  .application-card--screenshots h3 { margin-top: 8px; }
  .application-card--screenshots .product-description { margin-top: 10px; }
  .application-card--screenshots .product-facts { margin-top: 16px; padding-top: 14px; gap: 10px; }
  .application-card--screenshots .application-links { margin-top: 8px; padding-top: 8px; gap: 4px 20px; }
}

/* WORKS R4: Product Contributions Subsections & Web Platform Cards */
.product-subsection { margin-top: 48px; }
.product-subsection--mobile { margin-top: 32px; }
.subsection-header { margin-bottom: 22px; }
.subsection-kicker { display: block; font: 600 10px/1.5 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; color: var(--color-accent-strong); margin-bottom: 4px; }
.subsection-title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; color: var(--color-ink); letter-spacing: -.02em; }
.subsection-desc { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--color-muted); max-width: 720px; }

.web-platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.application-card.web-platform-card { display: flex; flex-direction: column; grid-template-columns: none; min-height: auto; border-radius: 16px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.application-card.web-platform-card:hover { transform: translateY(-3px); border-color: #acbad0; box-shadow: 0 12px 28px rgba(20, 34, 53, .07); }
.web-platform-media { margin: 0; position: relative; background: linear-gradient(155deg, #edf1fa, #e3eaf2); border-bottom: 1px solid var(--color-border); padding: 24px 24px 16px; overflow: hidden; }
.web-platform-card--radio .web-platform-media { background: linear-gradient(155deg, #eef3f9, #e4ecf7); }
.web-platform-card--lms .web-platform-media { background: linear-gradient(155deg, #edf1fa, #e2e9f4); }
.web-platform-card--tour .web-platform-media { background: linear-gradient(155deg, #eaf2fa, #dfe9f5); }
.web-platform-frame { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(66, 85, 112, 0.22); box-shadow: 0 10px 24px rgba(20, 34, 53, 0.1); background: #ffffff; }
.web-platform-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; transition: transform .3s var(--motion-ease-out); }
.web-platform-card:hover .web-platform-frame img { transform: scale(1.015); }
.web-platform-caption { margin-top: 12px; font-size: 11px; line-height: 1.5; color: var(--color-muted); text-align: center; }

.web-platform-body { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.web-platform-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.web-platform-category { font: 600 10px/1.5 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .1em; color: var(--color-accent-strong); }
.web-platform-org { font-size: 12px; font-weight: 600; color: var(--color-muted); }
.web-platform-title { margin: 0; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; color: var(--color-ink); letter-spacing: -.02em; }
.web-platform-contribution { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-ink); }
.web-platform-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.web-platform-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--color-border); background: rgba(235, 239, 248, 0.7); color: #2c3e59; font-size: 11px; font-weight: 550; }

.conceptual-mini-diagram { margin-top: 4px; padding: 14px 16px; border-radius: 12px; background: #f8fafc; border: 1px dashed #c8d3e2; }
.diagram-label { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.diagram-tag { font: 700 9px/1.3 Consolas, monospace; letter-spacing: .08em; color: var(--color-accent-strong); }
.diagram-disclaimer { font-size: 10px; color: var(--color-muted); font-style: italic; }
.diagram-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.diagram-node { flex: 1; min-width: 0; padding: 8px 6px; border-radius: 8px; background: #ffffff; border: 1px solid #d8e1ee; text-align: center; box-shadow: 0 2px 6px rgba(20, 34, 53, 0.04); }
.diagram-node--focus { border-color: #354ba8; background: #edf2fa; box-shadow: 0 2px 8px rgba(53, 75, 168, 0.12); }
.node-icon { display: block; font-size: 14px; line-height: 1; margin-bottom: 4px; }
.node-title { display: block; font-size: 11px; font-weight: 700; color: var(--color-ink); line-height: 1.2; word-break: break-word; }
.node-sub { display: block; font-size: 9px; color: var(--color-muted); margin-top: 2px; line-height: 1.2; word-break: break-word; }
.diagram-connector { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.connector-badge { font: 700 8px/1 Consolas, monospace; padding: 2px 5px; border-radius: 3px; background: #e2e8f4; color: #354ba8; }
.connector-arrow { color: #526276; }

.secondary-context-detail { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-muted); padding: 8px 12px; background: rgba(238, 241, 246, 0.6); border-radius: 6px; border-left: 2px solid #8fa2bf; }
.secondary-context-detail code { font-size: 11px; padding: 1px 4px; background: #e4e9f2; border-radius: 3px; color: #2c3e59; }
.web-platform-provenance { margin: 0; font-size: 11px; line-height: 1.55; color: var(--color-muted); border-top: 1px solid var(--color-border); padding-top: 12px; }
.web-platform-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 14px; }
.web-platform-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--color-accent-strong); font-size: 13px; font-weight: 700; text-decoration: none; }
.web-platform-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.web-platform-link .link-arrow { display: inline-block; transition: transform .2s ease; }
.web-platform-link:hover .link-arrow { transform: translateX(3px); }
.web-platform-secondary-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--color-muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.web-platform-secondary-link:hover { color: var(--color-ink); text-decoration: underline; }

@media (max-width: 1100px) {
  .web-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-platform-grid .web-platform-card:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 768px) {
  .applications-section .application-grid,
  .web-platform-grid { grid-template-columns: 1fr; }
  .web-platform-grid .web-platform-card:last-child:nth-child(odd) { grid-column: span 1; }
}
@media (max-width: 600px) {
  .product-media { padding: 24px 12px 16px; }
  .product-screen-composition { height: 290px; }
  .product-media--bp .product-screen--2 { width: 146px; }
  .product-media--bp .product-screen--1, .product-media--bp .product-screen--3 { width: 96px; top: 46px; }
  .product-media--abadi .product-screen--1 { width: 125px; }
  .product-media--abadi .product-screen--2 { width: 120px; }
  .application-card--screenshots .application-copy { padding: 24px 20px; }
  .product-facts > div { grid-template-columns: 78px minmax(0,1fr); gap: 10px; }
  .application-section-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .web-platform-media { padding: 16px 14px 12px; }
  .web-platform-body { padding: 20px 18px 16px; }
  .conceptual-mini-diagram { padding: 12px 10px; }
  .diagram-flow { gap: 4px; }
  .diagram-node { padding: 6px 2px; }
  .node-icon { font-size: 12px; margin-bottom: 2px; }
  .node-title { font-size: 9.5px; }
  .node-sub { font-size: 8px; }
  .connector-badge { font-size: 7px; padding: 1px 3px; }
  .diagram-tag { font-size: 8px; }
  .diagram-disclaimer { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .application-card--screenshots:hover,
  .application-card.web-platform-card:hover { transform: none; }
  .application-card.web-platform-card:hover .web-platform-frame img { transform: none; }
  .web-platform-link:hover .link-arrow { transform: none; }
}
.qweb-preview { min-height: 240px; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 25px; color: #e5ecf7; background: radial-gradient(ellipse at 85% 5%,rgba(111,132,206,.32),transparent 40%),#1b2d46; }
.qweb-preview > .eyebrow { color: #bdc9dc; }
.qweb-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qweb-flow span { padding: 9px 10px; border: 1px solid rgba(183,199,229,.34); border-radius: 4px; color: #f5f7fc; font-size: 10px; }
.qweb-flow i { color: #a8baff; font-style: normal; }
.qweb-code-lines { display: grid; gap: 7px; }
.qweb-code-lines b { height: 5px; display: block; border-radius: 99px; background: rgba(183,199,229,.38); }
.qweb-code-lines b:nth-child(1) { width: 84%; }
.qweb-code-lines b:nth-child(2) { width: 66%; margin-left: 15px; background: rgba(145,170,255,.52); }
.qweb-code-lines b:nth-child(3) { width: 74%; margin-left: 15px; }
.qweb-code-lines b:nth-child(4) { width: 48%; }
.qweb-caption { color: #bdc9dc; font: 9px/1.4 Consolas,"Courier New",monospace; }

@media (max-width: 1024px) {
  .application-grid { gap: 12px; }
  .application-card { grid-template-columns: minmax(125px,.65fr) minmax(0,1.35fr); }
  .application-visual { min-height: 252px; padding: 12px; }
  .application-copy { padding: 16px; }
  .case-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .lead-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .lead-card > .engineering-visual {
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(157,180,224,.18);
    border-radius: 0;
  }
  .lead-card > .project-card-content {
    padding: 22px 24px 20px;
  }
}
@media (max-width: 767px) {
  .hero-engineering-showcase { padding: 19px; }
  .hero-engineering-showcase h2 { margin-top: 19px; font-size: 22px; }
  .engineering-visual.large { min-height: 168px; padding: 16px; }
  .engineering-visual.large .flow-node { min-height: 44px; font-size: 10px; }
  .project-card .engineering-visual, .lead-card .engineering-visual { min-height: 0; margin: 0; padding: 16px; border-radius: 0; }
  .lead-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .lead-card .engineering-flow { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); }
  .project-card-content, .lead-card > .project-card-content { padding: 18px 20px 18px; }
  .lead-card h3 { font-size: 20px; }
  .project-client-attribution { line-height: 1.7; }
  .case-visual-section { padding-block: 22px 28px; }
  .case-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .application-grid { grid-template-columns: 1fr; }
  .application-card { grid-template-columns: minmax(112px,.62fr) minmax(0,1.38fr); }
  .application-visual { min-height: 240px; }
  .application-device { width: min(100%,135px); min-height: 174px; padding: 15px 9px 9px; }
  .application-device-screen { min-height: 127px; padding: 10px 7px; }
  .application-screen-line { padding-inline: 5px; font-size: 7px; }
  .application-copy { padding: 16px; }
  .qweb-preview { min-height: 180px; padding: 20px; gap: 15px; }
}
@media (max-width: 420px) {
  .hero-engineering-showcase { padding: 16px; }
  .engineering-flow { grid-template-columns: 1fr auto 1fr; }
  .engineering-visual.large { gap: 14px; }
  .project-card .engineering-flow { grid-template-columns: 1fr auto 1fr; }
  .lead-card .engineering-flow { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .application-card { grid-template-columns: 1fr; }
  .application-visual { min-height: 204px; }
  .application-device { width: min(100%,130px); min-height: 165px; }
  .application-device-screen { min-height: 119px; }
  .application-visual + .application-copy { border-top: 1px solid var(--color-border); border-left: 0; }
  .case-meta { grid-template-columns: 1fr; }
}

/* R3.1: responsive, semantically ordered engineering diagrams. */
.engineering-visual {
  width: 100%;
  margin: 0;
  justify-content: center;
  gap: 20px;
}
.engineering-visual.large { min-height: 208px; }
.engineering-visual-label { margin: 0; font: 12px/1.45 Consolas,"Courier New",monospace; }
.engineering-visual .engineering-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.engineering-visual:has(.engineering-image) {
  min-height: 0;
}
.engineering-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow-step { min-width: 0; flex: 1 1 0; display: flex; align-items: center; }
.flow-node {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 10px 8px;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.flow-step:not(:last-child)::after {
  flex: 0 0 auto;
  content: "→";
  padding: 0 12px;
  color: #b5c4ff;
  font-size: 20px;
}
.engineering-visual.large .engineering-flow { width: 100%; }
.engineering-visual.large .flow-node { min-height: 66px; font-size: 14px; }
.hero-engineering-showcase .engineering-visual { min-height: 194px; gap: 18px; }
.hero-engineering-showcase .flow-node { min-height: 56px; padding-inline: 7px; font-size: 12px; }
.project-card:not(.lead-card) > .engineering-visual {
  width: 100%;
  min-height: 170px;
  margin: 0;
  padding: 19px 21px;
  border-radius: 0;
}
.lead-card { align-items: stretch; }
.lead-card > .engineering-visual {
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  border-radius: 0;
}
.lead-card .flow-step:not(:last-child)::after { padding-inline: 8px; }
.project-client-attribution { color: #44546a; font-size: 12px !important; line-height: 1.55; }
.project-client-attribution strong { color: #253650; }
.project-domain { font-size: 12px; }
.project-card-top .eyebrow { font-size: 12px; }
/* R2 Editorial Grid Composition */
@media (min-width: 1024px) {
  .project-grid--featured {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .project-grid--featured .project-card.lead-card:not([hidden]) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.22fr 1fr;
    align-items: stretch;
  }
  .project-grid--featured .project-card.lead-card > .engineering-visual {
    height: 100%;
    min-height: 100%;
    padding: 24px;
    border-bottom: none;
    border-right: 1px solid rgba(157, 180, 224, 0.2);
  }
  .project-grid--featured .project-card.lead-card .engineering-picture,
  .project-grid--featured .project-card.lead-card .engineering-image {
    height: 100%;
    max-height: 420px;
    object-fit: cover;
  }
  .project-grid--additional {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .project-grid--featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .project-grid--featured .project-card.lead-card:not([hidden]) {
    grid-column: 1 / -1;
  }
  .project-grid--additional {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .project-grid--additional .project-card:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Works R3: Interactive Expanding Project Gallery & Detail Companion
   ========================================================================== */
.expanding-gallery {
  display: flex;
  gap: 14px;
  height: 440px;
  margin: 20px 0 24px;
  width: 100%;
  position: relative;
}

.expanding-gallery .project-card,
.gallery-panel {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: #091124;
  border: 1px solid rgba(157, 180, 224, 0.22);
  transition: flex 450ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms ease,
              box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: flex;
}
.expanding-gallery .project-card:focus-visible,
.gallery-panel:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
  z-index: 10;
}

.gallery-panel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gallery-panel-media .engineering-visual {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: transparent;
}
.gallery-panel-media .engineering-visual-label,
.gallery-panel-media .engineering-visual-note {
  display: none !important;
}
.gallery-panel-media .engineering-picture,
.gallery-panel-media .engineering-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 350ms ease;
  display: block;
}

.gallery-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 15, 30, 0.12) 0%,
    rgba(8, 15, 30, 0.42) 40%,
    rgba(8, 15, 30, 0.85) 75%,
    rgba(8, 15, 30, 0.98) 100%
  );
  pointer-events: none;
  transition: opacity 300ms ease;
}

/* Collapsed state badge & title */
.gallery-panel-collapsed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.gallery-panel-collapsed-num {
  font: 11px/1 Consolas, "Courier New", monospace;
  font-weight: 700;
  color: #9db4e0;
  letter-spacing: .08em;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(157, 180, 224, 0.3);
  flex-shrink: 0;
}
.gallery-panel-collapsed-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  letter-spacing: -.01em;
}
.gallery-panel-collapsed-arrow {
  display: none;
}

/* Expanded state overlay */
.gallery-panel-expanded {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 24px 22px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-panel-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.gallery-panel-num-tag {
  font: 11px/1.4 Consolas, "Courier New", monospace;
  font-weight: 700;
  color: #9db4e0;
  letter-spacing: .08em;
}
.gallery-panel-expanded .project-domain {
  font: 11px/1.4 Consolas, "Courier New", monospace;
  color: #93c5fd;
  font-weight: 700;
  letter-spacing: .06em;
}
.gallery-panel-expanded .project-employer {
  font-size: 12px;
  color: #cbd5e1;
}
.gallery-panel-expanded .meta-sep {
  color: #64748b;
  font-size: 11px;
}
.gallery-panel-title {
  font-size: 21px;
  line-height: 1.3;
  color: #ffffff;
  margin: 6px 0 10px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.gallery-panel-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #d1dcfa;
  margin: 0 0 14px;
  max-width: 58ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-panel-footer {
  display: flex;
  align-items: center;
}
.gallery-panel-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  background: rgba(30, 58, 102, 0.85);
  border: 1px solid rgba(157, 180, 224, 0.45);
  padding: 7px 16px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all .2s ease;
}
.gallery-panel-link:hover {
  background: rgba(43, 90, 168, 0.95);
  border-color: #9db4e0;
  color: #ffffff;
}
.gallery-panel-link .cta-arrow {
  display: inline-block;
  transition: transform .22s ease;
}
.expanding-gallery .project-card:hover .gallery-panel-link .cta-arrow,
.gallery-panel:hover .gallery-panel-link .cta-arrow,
.gallery-panel-link:hover .cta-arrow {
  transform: translateX(4px);
}

/* Desktop Hover & Expansion Mechanics (>= 1024px) */
@media (min-width: 1024px) {
  .expanding-gallery:hover .project-card:not(:hover),
  .expanding-gallery:hover .gallery-panel:not(:hover) {
    flex: 1 1 0%;
  }
  .expanding-gallery:hover .project-card:not(:hover) .gallery-panel-media .engineering-image,
  .expanding-gallery:hover .gallery-panel:not(:hover) .gallery-panel-media .engineering-image {
    filter: brightness(0.72) saturate(0.85);
  }
  .expanding-gallery:hover .project-card:not(:hover) .gallery-panel-collapsed,
  .expanding-gallery:hover .gallery-panel:not(:hover) .gallery-panel-collapsed {
    opacity: 0.95;
    transform: translateY(0);
  }
  .expanding-gallery:hover .project-card:not(:hover) .gallery-panel-expanded,
  .expanding-gallery:hover .gallery-panel:not(:hover) .gallery-panel-expanded {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }

  .expanding-gallery .project-card:hover,
  .expanding-gallery .project-card:focus-within,
  .expanding-gallery[data-keyboard-active="true"] .project-card[data-active="true"],
  .expanding-gallery .gallery-panel:hover,
  .expanding-gallery .gallery-panel:focus-within,
  .expanding-gallery[data-keyboard-active="true"] .gallery-panel[data-active="true"] {
    flex: 3.5 1 0% !important;
    border-color: #7b96c2;
    box-shadow: 0 16px 38px rgba(10, 18, 38, 0.3), 0 2px 8px rgba(10, 18, 38, 0.15);
    z-index: 5;
  }
  .expanding-gallery .project-card:hover .gallery-panel-media .engineering-image,
  .expanding-gallery .project-card:focus-within .gallery-panel-media .engineering-image,
  .expanding-gallery[data-keyboard-active="true"] .project-card[data-active="true"] .gallery-panel-media .engineering-image,
  .expanding-gallery .gallery-panel:hover .gallery-panel-media .engineering-image,
  .expanding-gallery .gallery-panel:focus-within .gallery-panel-media .engineering-image,
  .expanding-gallery[data-keyboard-active="true"] .gallery-panel[data-active="true"] .gallery-panel-media .engineering-image {
    transform: scale(1.025);
    filter: brightness(1) saturate(1.05);
  }
  .expanding-gallery .project-card:hover .gallery-panel-collapsed,
  .expanding-gallery .project-card:focus-within .gallery-panel-collapsed,
  .expanding-gallery[data-keyboard-active="true"] .project-card[data-active="true"] .gallery-panel-collapsed,
  .expanding-gallery .gallery-panel:hover .gallery-panel-collapsed,
  .expanding-gallery .gallery-panel:focus-within .gallery-panel-collapsed,
  .expanding-gallery[data-keyboard-active="true"] .gallery-panel[data-active="true"] .gallery-panel-collapsed {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }
  .expanding-gallery .project-card:hover .gallery-panel-expanded,
  .expanding-gallery .project-card:focus-within .gallery-panel-expanded,
  .expanding-gallery[data-keyboard-active="true"] .project-card[data-active="true"] .gallery-panel-expanded,
  .expanding-gallery .gallery-panel:hover .gallery-panel-expanded,
  .expanding-gallery .gallery-panel:focus-within .gallery-panel-expanded,
  .expanding-gallery[data-keyboard-active="true"] .gallery-panel[data-active="true"] .gallery-panel-expanded {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Tablet (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .expanding-gallery {
    height: 380px;
    gap: 8px;
  }
  .expanding-gallery .project-card:hover,
  .expanding-gallery .project-card:focus-within,
  .expanding-gallery .project-card[data-active="true"],
  .gallery-panel:hover,
  .gallery-panel:focus-within,
  .gallery-panel[data-active="true"] {
    flex: 3 1 0% !important;
    border-color: #7b96c2;
  }
  .expanding-gallery .project-card:hover .gallery-panel-expanded,
  .expanding-gallery .project-card:focus-within .gallery-panel-expanded,
  .expanding-gallery .project-card[data-active="true"] .gallery-panel-expanded,
  .gallery-panel:hover .gallery-panel-expanded,
  .gallery-panel:focus-within .gallery-panel-expanded,
  .gallery-panel[data-active="true"] .gallery-panel-expanded {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .expanding-gallery .project-card:hover .gallery-panel-collapsed,
  .expanding-gallery .project-card:focus-within .gallery-panel-collapsed,
  .expanding-gallery .project-card[data-active="true"] .gallery-panel-collapsed,
  .gallery-panel:hover .gallery-panel-collapsed,
  .gallery-panel:focus-within .gallery-panel-collapsed,
  .gallery-panel[data-active="true"] .gallery-panel-collapsed {
    opacity: 0;
  }
  .gallery-panel-title {
    font-size: 18px;
  }
  .gallery-panel-desc {
    font-size: 12.5px;
    -webkit-line-clamp: 2;
  }
}

/* Mobile Accordion (< 768px) */
@media (max-width: 767px) {
  .expanding-gallery {
    flex-direction: column;
    height: auto;
    gap: 10px;
  }
  .expanding-gallery .project-card,
  .gallery-panel {
    flex: none !important;
    width: 100%;
    height: 68px;
    transition: height 400ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 300ms ease,
                box-shadow 300ms ease;
  }
  .gallery-panel-collapsed {
    opacity: 1;
    transform: translateY(0);
    padding: 16px 16px;
    height: 100%;
    box-sizing: border-box;
  }
  .gallery-panel-collapsed-arrow {
    display: inline-block;
    margin-left: auto;
    font-size: 14px;
    color: #9db4e0;
    transition: transform 300ms ease;
  }
  .gallery-panel-expanded {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    padding: 18px 16px;
  }

  /* Active panel on mobile expands */
  .expanding-gallery .project-card[data-mobile-active="true"],
  .gallery-panel[data-mobile-active="true"] {
    height: 350px;
    border-color: #7b96c2;
    box-shadow: 0 10px 24px rgba(10, 18, 38, 0.25);
  }
  .expanding-gallery .project-card[data-mobile-active="true"] .gallery-panel-collapsed,
  .gallery-panel[data-mobile-active="true"] .gallery-panel-collapsed {
    opacity: 0;
    pointer-events: none;
  }
  .expanding-gallery .project-card[data-mobile-active="true"] .gallery-panel-collapsed-arrow,
  .gallery-panel[data-mobile-active="true"] .gallery-panel-collapsed-arrow {
    transform: rotate(180deg);
  }
  .expanding-gallery .project-card[data-mobile-active="true"] .gallery-panel-expanded,
  .gallery-panel[data-mobile-active="true"] .gallery-panel-expanded {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .expanding-gallery .project-card[data-mobile-active="true"] .gallery-panel-title,
  .gallery-panel[data-mobile-active="true"] .gallery-panel-title {
    font-size: 18px;
  }
  .expanding-gallery .project-card[data-mobile-active="true"] .gallery-panel-desc,
  .gallery-panel[data-mobile-active="true"] .gallery-panel-desc {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
}

/* Filter Adaptations on the Expanding Gallery */
.expanding-gallery[data-visible-count="3"] .project-card:hover,
.expanding-gallery[data-visible-count="3"] .gallery-panel:hover {
  flex: 3 1 0% !important;
}
.expanding-gallery[data-visible-count="2"] .project-card:hover,
.expanding-gallery[data-visible-count="2"] .gallery-panel:hover {
  flex: 2.4 1 0% !important;
}
.expanding-gallery[data-visible-count="1"] {
  height: auto;
  min-height: 390px;
}
.expanding-gallery[data-visible-count="1"] .project-card:not([hidden]),
.expanding-gallery[data-visible-count="1"] .gallery-panel:not([hidden]) {
  flex: 1 1 100% !important;
  cursor: default;
  height: 390px;
}
.expanding-gallery[data-visible-count="1"] .project-card:not([hidden]) .gallery-panel-collapsed,
.expanding-gallery[data-visible-count="1"] .gallery-panel:not([hidden]) .gallery-panel-collapsed {
  display: none;
}
.expanding-gallery[data-visible-count="1"] .project-card:not([hidden]) .gallery-panel-expanded,
.expanding-gallery[data-visible-count="1"] .gallery-panel:not([hidden]) .gallery-panel-expanded {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Active Project Details Companion Area */
.gallery-detail-area {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 36px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  transition: border-color .2s ease;
}
.gallery-detail-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}
.gallery-detail-kicker {
  font: 11px/1.3 Consolas, "Courier New", monospace;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-accent-strong);
}
.gallery-detail-hint {
  font-size: 12px;
  color: #64748b;
}
.gallery-detail-item {
  transition: opacity 200ms ease, transform 200ms ease;
}
.gallery-detail-item[hidden] {
  display: none !important;
}
.gallery-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12px;
  margin-bottom: 10px;
}
.gallery-detail-index-badge {
  font: 10.5px/1.4 Consolas, "Courier New", monospace;
  font-weight: 700;
  color: #1e3a66;
  background: #edf2f9;
  border: 1px solid #c8d6ea;
  padding: 1px 7px;
  border-radius: 3px;
  letter-spacing: .04em;
}
.gallery-detail-content-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 28px;
  align-items: start;
}
.gallery-detail-title {
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-text-title);
  margin: 0 0 10px;
  font-weight: 700;
}
.gallery-detail-summary {
  font-size: 14.5px;
  line-height: 1.6;
  color: #334155;
  margin: 0 0 16px;
}
.gallery-detail-highlights {
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.gallery-detail-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gallery-detail-cta-btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (max-width: 900px) {
  .gallery-detail-content-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .gallery-detail-area {
    padding: 20px 18px;
  }
}

.project-card[hidden] {
  display: none !important;
}

/* Card hierarchy & metadata refinements */
.project-card {
  border-radius: var(--radius);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: #7b96c2;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09), 0 2px 8px rgba(15, 23, 42, 0.04);
}
.project-card .engineering-image {
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .engineering-image {
  transform: scale(1.02);
}

.project-version-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 3px;
  background: #edf2f9;
  color: #1e3a66;
  font: 10px/1.4 Consolas, "Courier New", monospace;
  font-weight: 700;
  border: 1px solid #c8d6ea;
  letter-spacing: .02em;
}

.project-highlights {
  margin: 16px 0 14px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #f6f8fb;
  border: 1px solid #e2e8f0;
}
.highlights-label {
  display: block;
  font: 10px/1.4 Consolas, "Courier New", monospace;
  letter-spacing: .08em;
  color: #5a6e88;
  font-weight: 700;
  margin-bottom: 8px;
}
.highlights-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.highlights-list li {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #334155;
  font-weight: 500;
}
.highlights-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent-strong);
  font-weight: bold;
}

.project-card-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
}
.project-card-link {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  color: var(--color-accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px;
  transition: all .2s ease;
}
.project-card-link .cta-arrow {
  display: inline-block;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card-link:hover {
  text-decoration: none;
  border-bottom-color: var(--color-accent-strong);
}
.project-card:hover .project-card-link .cta-arrow,
.project-card-link:hover .cta-arrow {
  transform: translateX(4px);
}

.filter-empty-state {
  padding: 44px 24px;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin: 20px 0 32px;
}
.filter-empty-text {
  color: #475569;
  font-size: 15px;
  margin-bottom: 14px;
}
.filter-reset-btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid #7b96c2;
  border-radius: 4px;
  color: var(--color-accent-strong);
  background: #f0f4fa;
  font: 12px/1.4 Consolas, "Courier New", monospace;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}
.filter-reset-btn:hover {
  background: #e2ebf6;
  border-color: #5579ad;
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-card .engineering-image,
  .project-card-link .cta-arrow,
  .project-card-link {
    transition: none !important;
    transform: none !important;
  }
}

.engineering-visual--version-bridge .version-bridge {
  display: grid;
  grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.version-endpoint {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 13px;
  border: 1px solid rgba(169,190,229,.38);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
}
.version-endpoint strong { font-size: 18px; }
.version-endpoint span { color: #d1daea; font-size: 12px; }
.version-connector { height: 1px; border-top: 2px dotted #a8baff; }
.system-connection {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(64px,.7fr) minmax(0,1fr);
  align-items: center;
  gap: 14px;
}
.system-endpoint {
  min-height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(169,190,229,.38);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  font-size: 19px;
  font-weight: 700;
}
.system-link { display:flex; justify-content:space-between; }
.system-link i { width: 5px; height: 5px; border-radius: 50%; background:#adbcff; }
.system-direction-note { grid-column: 1 / -1; color:#d1daea; font-size:12px; text-align:center; }
.scope-map { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.scope-map li { min-height:76px; display:grid; place-items:center; padding:12px; border:1px solid rgba(169,190,229,.38); border-radius:6px; color:#f6f8fc; background:rgba(255,255,255,.06); font-size:13px; font-weight:650; line-height:1.4; text-align:center; }

/* R3.1: compact, readable case facts and focused Pennyu disclosure. */
.case-intro { padding-bottom:24px; }
.case-meta {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 18px;
  margin-top:22px;
  padding:10px 18px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface);
}
.case-meta > div { min-width:0; min-height:0; padding:12px 0; border:0; border-bottom:1px solid #e8ecf2; border-radius:0; background:transparent; }
.case-meta > div:nth-last-child(-n+3) { border-bottom:0; }
.case-meta dt { color:#52647c; font:12px/1.4 Consolas,"Courier New",monospace; letter-spacing:.04em; text-transform:uppercase; }
.case-meta dd { margin:6px 0 0; color:var(--color-ink); font-size:14px; line-height:1.55; }
.case-meta-note { display:block; margin-top:6px; padding-top:6px; border-top:1px solid var(--color-border); color:#52647c; font-size:12px; line-height:1.5; }
.case-visual-section { padding-top:21px; padding-bottom:25px; }
.visual-source-note { font-size:12px; line-height:1.55; }
.case-body { max-width:850px; }
.case-body > section { padding:21px 0; }
.case-body section p:not(.case-section-number) { font-size:15px; line-height:1.65; }
.case-body .case-section-number { padding-top:6px; font-size:12px; }
.case-problem-preview { max-width:850px; margin-top:18px; }
.case-problem-preview > section { display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding:13px 0 17px; border-bottom:1px solid var(--color-border); }
.case-problem-preview h2 { margin:0 0 7px; font-size:20px; }
.case-problem-preview p:not(.case-section-number) { font-size:15px; line-height:1.65; }
.case-problem-preview .case-section-number { padding-top:4px; font-size:12px; }
.case-meta .case-meta-note { font-size:12px; }

/* R3.1: four product-specific original visuals; none imitates an app screen. */
.application-card { grid-template-columns:minmax(230px,.78fr) minmax(0,1.22fr); }
.application-visual {
  margin:0;
  min-width:0;
  min-height:315px;
  gap:15px;
  padding:19px;
  background:#eef2f8;
}
.application-art { width:100%; min-height:245px; display:grid; place-items:center; overflow:hidden; }
.application-visual-caption { color:#435671; font:13px/1.5 Consolas,"Courier New",monospace; text-align:center; }
.application-copy { padding:21px; }
.application-illustration-note { max-width:920px; margin:-3px 0 17px; color:#455770; font-size:14px; line-height:1.6; }
.application-copy .eyebrow { align-items:flex-start; font-size:12px; }
.application-contribution { margin-top:12px; font-size:15px; line-height:1.6; }
.application-package { font-size:13px; }
.application-package code { font-size:12px; }
.application-platforms span { min-height:29px; font-size:12px; }
.application-current-note { margin-top:12px; color:#455770; font-size:12px; line-height:1.6; }
.application-links { margin-top:12px; padding-top:0; }
.application-links a { font-size:13px; }
.home-work-cta { display:flex; justify-content:flex-end; margin-top:-22px; padding-bottom:22px; }
.attendance-orbit { position:relative; width:190px; aspect-ratio:1; display:grid; place-items:center; border:1px solid #d0d9e8; border-radius:50%; background:radial-gradient(circle at center,#fff 0 25%,#e7edfa 26% 54%,#dfe6f4 55% 100%); }
.orbit-ring { position:absolute; inset:25px; border:1px solid #a5b5d2; border-radius:50%; }
.orbit-dot { position:absolute; width:13px; height:13px; border:3px solid #eff3fa; border-radius:50%; background:#4c62c4; }
.orbit-dot-one { top:32px; left:46px; }
.orbit-dot-two { right:33px; bottom:39px; background:#638c91; }
.orbit-core { display:flex; align-items:center; gap:8px; color:#263c5c; }
.orbit-core b { width:42px; height:42px; display:grid; place-items:center; border:1px solid #c8d2e2; border-radius:50%; background:#fff; font-size:14px; }
.orbit-core i { color:#4b61c3; font-style:normal; font-size:17px; }
.concept-terms { color:#425671; font:12px/1.5 Consolas,"Courier New",monospace; letter-spacing:.05em; text-align:center; }
.concept-terms span { color:#556ccc; }
.digital-book-concept, .book-object { position:relative; width:min(100%,190px); height:172px; display:flex; align-items:center; }
.book-cover { z-index:1; width:146px; height:166px; display:flex; flex-direction:column; justify-content:center; gap:13px; padding:18px; border:1px solid #67789a; border-radius:6px 14px 14px 6px; color:white; background:linear-gradient(145deg,#283d62,#172a46); box-shadow:9px 9px 0 #cad4e3; }
.book-cover .book-kicker { color:#c5d0e3; font:11px/1.4 Consolas,"Courier New",monospace; }
.book-cover strong { font-size:28px; letter-spacing:.06em; }
.book-rule { width:82%; height:2px; background:#aebcff; }
.book-cover small { color:#d2dced; font-size:12px; }
.book-spine { width:7px; height:153px; border-radius:5px 0 0 5px; background:#6577be; }
.book-page { position:absolute; top:14px; right:0; width:45px; height:145px; border:1px solid #ccd5e2; border-radius:0 5px 5px 0; background:repeating-linear-gradient(to bottom,#fff 0 15px,#e7ebf1 16px 17px); }
.browser-frame { width:min(100%,390px); overflow:hidden; border:1px solid #b8c5d8; border-radius:9px; background:#fff; box-shadow:0 14px 30px rgba(24,42,68,.12); }
.browser-toolbar { height:40px; display:flex; align-items:center; gap:7px; padding:0 12px; border-bottom:1px solid #e0e5ed; background:#f6f8fb; }
.browser-toolbar i { width:8px; height:8px; border-radius:50%; background:#8e9cb1; }
.browser-toolbar i:first-child { background:#6275cb; }
.browser-toolbar span { min-width:0; overflow:hidden; margin-left:8px; padding:5px 10px; border:1px solid #e2e7ef; border-radius:4px; color:#4c5d75; background:#fff; font:12px/1.3 Consolas,"Courier New",monospace; text-overflow:ellipsis; white-space:nowrap; }
.browser-body { min-height:187px; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:23px 21px; color:#243752; background:linear-gradient(135deg,#fff 48%,#edf1fc); }
.browser-product-kicker { color:#4c62c4; font:12px/1.4 Consolas,"Courier New",monospace; letter-spacing:.09em; }
.browser-body strong { max-width:285px; font-size:21px; line-height:1.25; }
.browser-rule { width:62%; height:3px; border-radius:99px; background:#667bd1; }
.browser-categories { color:#53647a; font:11px/1.5 Consolas,"Courier New",monospace; letter-spacing:.02em; overflow-wrap:anywhere; }
.archive-card { width:min(100%,340px); min-height:184px; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:20px; border:1px solid #cfdae8; border-left:4px solid #8794aa; border-radius:4px 10px 10px 4px; background:linear-gradient(135deg,#fff,#f4f6fa); }
.archive-kicker { color:#596a82; font:12px/1.4 Consolas,"Courier New",monospace; letter-spacing:.08em; }
.archive-card code { color:#283b58; font:13px/1.5 Consolas,"Courier New",monospace; overflow-wrap:anywhere; }
.archive-divider { width:100%; height:1px; background:#d8e0eb; }
.archive-card strong { color:#4e5e73; font-size:13px; line-height:1.45; }
.qweb-preview { min-height:255px; gap:17px; }
.qweb-flow { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.qweb-flow li { min-height:43px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(183,199,229,.2); color:#f5f7fc; font-size:14px; }
.qweb-flow li > span { padding:0; border:0; border-radius:0; color:#bdcaff; background:transparent; font:12px/1.4 Consolas,"Courier New",monospace; }
.qweb-caption { color:#cbd5e5; font:12px/1.5 Consolas,"Courier New",monospace; }
.article-copy .eyebrow { font-size:12px; }

/* R3.1: replace skill-chip walls with clear grouped disclosure on the timeline. */
.experience-work-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:15px; }
.experience-work-group { min-width:0; }
.experience-work-group > p { margin-bottom:5px; color:#5a6b82; font:12px/1.5 Consolas,"Courier New",monospace; }
.experience-work-links { gap:2px 12px; margin-top:0; }
.experience-work-links a { min-height:36px; font-size:13px; }
.experience-competencies { margin-top:13px; color:#53647a; font-size:13px; line-height:1.55; }
.experience-competencies strong { margin-right:7px; color:#30435f; font-weight:650; }
.experience-card .experience-progression { font-size:13px; }
.experience-card .experience-progression > span { font-size:12px; }
.showcase-attribution,.hero-footnote,.lang-option,.nav-toggle,.button,.project-filters button,.filter-status,
.status-badge,.draft-badge,.review-notice,.preview-banner,.contact-label,.copy-email-button,.copy-email-status,
.section-note,.article-copy .source-note,.experience-work-label,.experience-progression,.current-role,
.footer-main > p,.footer-links,.experience-card > div:last-child > p:last-of-type { font-size:12px; }
.tags span,.tags a { font-size:12px; }

@media (min-width: 768px) {
  .case-meta { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .eyebrow,.project-card-top .eyebrow,.experience-card .eyebrow,.application-copy .eyebrow { font-size:12px; }
  .hero .eyebrow { font-size:11px; }
  .engineering-flow { flex-direction:column; align-items:stretch; }
  .flow-step { width:100%; flex:none; flex-direction:column; }
  .flow-node,.engineering-visual.large .flow-node,.hero-engineering-showcase .flow-node { min-height:48px; padding:10px 12px; font-size:13px; }
  .flow-step:not(:last-child)::after { padding:7px 0; content:"↓"; font-size:19px; }
  .engineering-visual,.engineering-visual.large { min-height:0; gap:16px; }
  .project-card .engineering-visual, .lead-card .engineering-visual { width: 100%; height: auto; min-height: 0; margin: 0; padding: 17px; border-radius: 0; }
  .lead-card .engineering-flow { display:flex; flex-direction:column; }
  .project-section.featured .project-card:nth-child(4):nth-last-child(1),
  .project-section.additional .project-card:nth-child(3):nth-last-child(1) { width:auto; }
  .version-bridge { grid-template-columns:1fr !important; justify-items:stretch; gap:0 !important; }
  .version-endpoint { min-height:62px; }
  .version-connector { width:1px; height:21px; justify-self:center; border-top:0; border-left:2px dotted #a8baff; }
  .system-connection { grid-template-columns:minmax(0,1fr); justify-items:stretch; gap:8px; }
  .system-endpoint { min-height:56px; }
  .system-link { flex-direction:column; align-items:center; gap:4px; }
  .system-direction-note { font-size:12px; }
  .scope-map { grid-template-columns:1fr; gap:8px; }
  .scope-map li { min-height:50px; }
  .case-meta { grid-template-columns:1fr; }
  .case-meta > div,.case-meta > div:nth-last-child(-n+3) { display:grid; grid-template-columns:minmax(90px,.38fr) minmax(0,1fr); align-items:start; gap:6px 10px; border-bottom:1px solid #e8ecf2; }
  .case-meta > div:last-child { border-bottom:0; }
  .case-meta dd { margin:0; font-size:14px; }
  .case-meta-note { grid-column:2; margin-top:0; }
  .application-card { grid-template-columns:1fr; }
  .application-visual { min-height:270px; padding:18px; }
  .application-art { min-height:213px; }
  .application-visual + .application-copy { border-top:1px solid var(--color-border); border-left:0; }
  .experience-work-groups { grid-template-columns:1fr; gap:10px; }
  .experience-work-group > p { margin-bottom:2px; }
  .qweb-preview { min-height:0; gap:12px; }
}
@media (max-width: 420px) {
  .engineering-visual-label,.engineering-visual-note,.visual-source-note,.application-visual-caption,.application-current-note { font-size:12px; }
  .case-meta { grid-template-columns:1fr; padding:8px 12px; }
  .case-problem-preview > section { grid-template-columns:28px minmax(0,1fr); gap:10px; }
}

/* Keep multi-step flows readable when the showcase column is narrow. */
ol.engineering-flow.engineering-flow--3,
ol.engineering-flow.engineering-flow--4 {
  display:grid;
  align-items:stretch;
  gap:18px;
}
ol.engineering-flow.engineering-flow--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
ol.engineering-flow.engineering-flow--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
ol.engineering-flow .flow-step { position:relative; display:block; width:auto; min-width:0; flex:none; }
ol.engineering-flow .flow-node { min-height:62px; padding:8px 4px; font-size:12px; line-height:1.35; overflow-wrap:normal; }
ol.engineering-flow .flow-step:not(:last-child)::after {
  position:absolute;
  top:50%;
  left:calc(100% + 1px);
  width:16px;
  padding:0;
  transform:translateY(-50%);
  font-size:16px;
  line-height:1;
}
.hero-engineering-showcase { container:hero-flow / inline-size; }
.attendance-pipeline { margin: 20px 0 0; overflow: hidden; border: 1px solid rgba(157,180,224,.27); border-radius: 8px; }
.attendance-pipeline img { display: block; width: 100%; height: auto; }
@container hero-flow (max-width: 339px) {
  ol.engineering-flow.engineering-flow--4 { display:flex; flex-direction:column; gap:0; }
  ol.engineering-flow.engineering-flow--4 .flow-step { display:flex; flex-direction:column; width:100%; }
  ol.engineering-flow.engineering-flow--4 .flow-step:not(:last-child)::after {
    position:static;
    width:auto;
    padding:7px 0;
    transform:none;
    content:"↓";
    font-size:19px;
  }
}
@media (max-width: 900px) {
  ol.engineering-flow.engineering-flow--4 { display:flex; flex-direction:column; gap:0; }
  ol.engineering-flow--4 .flow-step { display:flex; flex-direction:column; width:100%; }
  ol.engineering-flow--4 .flow-step:not(:last-child)::after {
    position:static;
    width:auto;
    padding:7px 0;
    transform:none;
    content:"↓";
    font-size:19px;
  }
}
@media (max-width: 767px) {
  ol.engineering-flow.engineering-flow--3 { display:flex; flex-direction:column; gap:0; }
  ol.engineering-flow--3 .flow-step { display:flex; flex-direction:column; width:100%; }
  ol.engineering-flow--3 .flow-step:not(:last-child)::after {
    position:static;
    width:auto;
    padding:7px 0;
    transform:none;
    content:"↓";
    font-size:19px;
  }
}

/* ==========================================================================
   Editorial Hero Section (Dark Mode Default)
   ========================================================================== */

.hero-editorial {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #111216;
  color: #ffffff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  body:has(.hero-editorial) .site-header {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 3rem), 1400px);
    margin: 0 auto;
    padding: 0.85rem 2rem;
    z-index: 50;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    box-sizing: border-box;
    transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body:has(.hero-editorial) .site-header.is-scrolled {
    top: 1rem;
    width: min(calc(100% - 2.5rem), 1220px);
    padding: 0.65rem 1.75rem;
    background: rgba(3, 7, 18, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.08);
  }

  body:has(.hero-editorial) .site-header .nav-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    min-height: 48px;
    transition: min-height 0.35s ease;
  }

  body:has(.hero-editorial) .site-header.is-scrolled .nav-container {
    min-height: 44px;
  }

  body:has(.hero-editorial) .site-header .logo {
    color: #ffffff;
  }

  body:has(.hero-editorial) .site-header .logo span {
    color: #818cf8;
  }

  body:has(.hero-editorial) .nav-links a {
    text-transform: lowercase;
    font-size: 0.875rem;
    letter-spacing: 0.025em;
    color: #a1a1aa;
  }

  body:has(.hero-editorial) .nav-links a:hover,
  body:has(.hero-editorial) .nav-links a[aria-current="page"] {
    color: #ffffff;
  }

  body:has(.hero-editorial) .lang-option {
    color: #a1a1aa;
    border-left-color: rgba(255, 255, 255, 0.2);
  }

  body:has(.hero-editorial) .lang-option:hover {
    color: #ffffff;
  }

  body:has(.hero-editorial) .nav-toggle {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

.container--editorial-home {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.container--editorial-home > .section,
.container--editorial-home > .home-work-cta,
.container--editorial-home > .contact-band {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* 1. Full-Bleed Background Stage with Parallax bounds */
.hero-bg-stage {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.7s;
}

.hero-bg-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.hero-bg-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  display: block;
}

/* Edge Hover Peek Zones */
.hero-edge-peek {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(100px, 11vw, 170px);
  z-index: 28;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  outline: none;
}

.hero-edge-peek::after {
  content: "";
  position: absolute;
  top: 40%;
  bottom: 40%;
  width: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.hero-edge-peek--prev {
  left: 0;
  justify-content: flex-start;
}

.hero-edge-peek--prev::after {
  left: 8px;
  background: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.65);
}

.hero-edge-peek--next {
  right: 0;
  justify-content: flex-end;
}

.hero-edge-peek--next::after {
  right: 8px;
  background: rgba(129, 140, 248, 0.5);
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.65);
}

.hero-edge-peek:hover::after,
.hero-edge-peek:focus-visible::after,
.hero-editorial.hero-peek-left-hover .hero-edge-peek--prev::after,
.hero-editorial.hero-peek-right-hover .hero-edge-peek--next::after {
  opacity: 0;
  transform: scaleY(1.4);
}

.hero-edge-peek-curtain {
  position: absolute;
  top: 22%;
  bottom: 22%;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.85);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease;
  pointer-events: auto;
  cursor: pointer;
}

.hero-edge-peek--prev .hero-edge-peek-curtain {
  left: 0;
  border-radius: 0 20px 20px 0;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-left: none;
  transform: translateX(-100%);
  opacity: 0;
}

.hero-edge-peek--next .hero-edge-peek-curtain {
  right: 0;
  border-radius: 20px 0 0 20px;
  border: 1px solid rgba(129, 140, 248, 0.45);
  border-right: none;
  transform: translateX(100%);
  opacity: 0;
}

.hero-edge-peek-curtain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.15);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-edge-peek-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(3, 7, 18, 0.2), rgba(3, 7, 18, 0.75));
  transition: opacity 0.3s ease;
}

.hero-edge-peek--prev .hero-edge-peek-overlay {
  background: linear-gradient(to left, rgba(3, 7, 18, 0.2), rgba(3, 7, 18, 0.75));
}

.hero-edge-peek-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.05rem;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f1f5f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  cursor: pointer;
}

.hero-edge-peek-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: #38bdf8;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-edge-peek--next .hero-edge-peek-arrow {
  color: #818cf8;
}

.hero-edge-peek--prev .hero-edge-peek-badge {
  margin-left: 0.85rem;
  border-radius: 9999px;
  transform: translateX(-18px);
}

.hero-edge-peek--next .hero-edge-peek-badge {
  margin-right: 0.85rem;
  border-radius: 9999px;
  transform: translateX(18px);
}

/* Revealed state on direct hover, focus-visible, or 35% hero zones */
.hero-edge-peek:hover .hero-edge-peek-curtain,
.hero-edge-peek:focus-visible .hero-edge-peek-curtain,
.hero-editorial.hero-peek-left-hover .hero-edge-peek--prev .hero-edge-peek-curtain,
.hero-editorial.hero-peek-right-hover .hero-edge-peek--next .hero-edge-peek-curtain {
  opacity: 1;
  transform: translateX(0);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(56, 189, 248, 0.35);
}

.hero-edge-peek:hover .hero-edge-peek-curtain img,
.hero-edge-peek:focus-visible .hero-edge-peek-curtain img,
.hero-editorial.hero-peek-left-hover .hero-edge-peek--prev .hero-edge-peek-curtain img,
.hero-editorial.hero-peek-right-hover .hero-edge-peek--next .hero-edge-peek-curtain img {
  transform: scale(1.05);
}

.hero-edge-peek:hover .hero-edge-peek-badge,
.hero-edge-peek:focus-visible .hero-edge-peek-badge,
.hero-editorial.hero-peek-left-hover .hero-edge-peek--prev .hero-edge-peek-badge,
.hero-editorial.hero-peek-right-hover .hero-edge-peek--next .hero-edge-peek-badge {
  opacity: 1;
  transform: translateX(0);
  background: rgba(3, 7, 18, 0.94);
  border-color: rgba(56, 189, 248, 0.65);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.45);
}

.hero-edge-peek--next:hover .hero-edge-peek-badge,
.hero-editorial.hero-peek-right-hover .hero-edge-peek--next .hero-edge-peek-badge {
  border-color: rgba(129, 140, 248, 0.7);
  box-shadow: 0 0 24px rgba(129, 140, 248, 0.45);
}

/* Micro-interaction on arrow badge when directly hovered */
.hero-edge-peek-badge:hover {
  border-color: #38bdf8;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.65);
  transform: scale(1.06);
}

.hero-edge-peek--prev .hero-edge-peek-badge:hover .hero-edge-peek-arrow {
  transform: translateX(-4px);
}

.hero-edge-peek--next .hero-edge-peek-badge:hover .hero-edge-peek-arrow {
  transform: translateX(4px);
}

.hero-edge-peek:active .hero-edge-peek-badge,
.hero-edge-peek-badge:active {
  transform: scale(0.95);
}

.hero-edge-peek:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: -2px;
}

/* 2. Readability Gradient Overlay */
.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(3, 7, 18, 0.97) 0%,
      rgba(3, 7, 18, 0.88) 22%,
      rgba(3, 7, 18, 0.72) 36%,
      rgba(3, 7, 18, 0.35) 52%,
      rgba(3, 7, 18, 0.06) 68%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 7, 18, 0.75) 0%,
      transparent 15%,
      transparent 82%,
      rgba(3, 7, 18, 0.95) 100%
    );
}

/* 3. Hero Content Stage (Left-Aligned) */
.hero-content-stage {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 6.5rem 2.5rem 1.5rem;
  display: flex;
  align-items: center;
  flex: 1;
  box-sizing: border-box;
}

.hero-text-container {
  position: relative;
  z-index: 35;
  width: 100%;
  max-width: 650px;
  margin-left: clamp(1rem, 4vw, 4.5rem);
}

.hero-text-slide {
  position: relative;
  display: none;
  width: 100%;
}

.hero-text-slide.active {
  display: block;
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a5b4fc;
  margin: 0 0 1.25rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hero-text-slide.active .hero-eyebrow {
  animation: heroSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-eyebrow-line {
  display: inline-block;
  width: 2.25rem;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #38bdf8);
  border-radius: 1px;
}

.hero-eyebrow-text {
  color: #c7d2fe;
}

/* Headline */
.hero-headline {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: #ffffff;
  margin: 0 0 1.25rem 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
}

.hero-text-slide.active .hero-headline {
  animation: heroSlideIn 0.45s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.headline-line--1 {
  display: block;
  color: #ffffff;
}

.headline-line--2 {
  display: block;
  color: #f1f5f9;
}

/* Description */
.hero-description {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6;
  color: #cbd5e1;
  max-width: 520px;
  margin: 0 0 2rem 0;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.hero-text-slide.active .hero-description {
  animation: heroSlideIn 0.5s 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CTA Group */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.hero-text-slide.active .hero-cta-group {
  animation: heroSlideIn 0.5s 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-btn {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.hero-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
}

.hero-btn--primary {
  background: #ffffff;
  color: #090d16;
  padding: 0.85rem 1.85rem;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.16), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-btn--primary:hover {
  background: #f8fafc;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.hero-btn--secondary {
  background: transparent;
  color: #cbd5e1;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  font-weight: 500;
  gap: 0.35rem;
}

.hero-btn--secondary:hover {
  color: #ffffff;
  border-color: #ffffff;
  transform: translateX(3px);
}

/* 4. Bottom Bar */
.hero-bottom-bar {
  position: relative;
  z-index: 30;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.25rem 2.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-sizing: border-box;
}

.hero-nav {
  display: flex;
  align-items: center;
}

.hero-progress-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hero-progress-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 0.75rem 0.25rem;
  min-height: 44px;
  cursor: pointer;
  color: #71717a;
  transition: all 0.3s ease;
  font-family: inherit;
}

.hero-progress-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
  border-radius: 4px;
}

.hero-progress-num {
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
}

.hero-progress-bar {
  position: relative;
  width: 2.25rem;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.hero-progress-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #6366f1, #38bdf8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-progress-btn:hover .hero-progress-num {
  color: #e4e4e7;
}

.hero-progress-btn:hover .hero-progress-bar {
  background: rgba(255, 255, 255, 0.38);
}

.hero-progress-btn.active .hero-progress-num {
  color: #ffffff;
  font-weight: 700;
}

.hero-progress-btn.active .hero-progress-bar {
  width: 3.75rem;
  background: transparent;
}

.hero-progress-btn.active .hero-progress-fill {
  opacity: 1;
}

/* Recruiter bar */
.hero-recruiter-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.025em;
  color: #a1a1aa;
}

.hero-recruiter-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #d4d4d8;
  font-weight: 500;
}

.pulse-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-green 2s infinite;
}

.hero-quick-link {
  color: #a1a1aa;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.hero-quick-link:hover {
  color: #ffffff;
}

/* Animation Keyframes */
@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .hero-content-stage {
    padding-top: 5.5rem;
  }
  .hero-text-container {
    max-width: 580px;
    margin-left: clamp(0.5rem, 2.5vw, 2rem);
  }
  .hero-headline {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  }
  .hero-bg-slide img {
    object-position: 68% center;
  }
}

@media (max-width: 900px) {
  .hero-editorial {
    /* Content sets the height, including on short phones and with larger text. */
    min-height: 0;
    height: auto;
  }
  .hero-content-stage {
    padding: clamp(128px, 18svh, 176px) 1.5rem 0;
    align-items: flex-start;
    flex: none;
  }
  .hero-text-container {
    max-width: 100%;
    margin-left: 0;
  }
  .hero-headline {
    font-size: clamp(2rem, 5.8vw, 3rem);
  }
  .hero-bg-slide img {
    object-position: 65% center;
  }
  .hero-gradient-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(3, 7, 18, 0.98) 0%,
        rgba(3, 7, 18, 0.92) 42%,
        rgba(3, 7, 18, 0.6) 72%,
        rgba(3, 7, 18, 0.25) 100%
      ),
      linear-gradient(
        180deg,
        rgba(3, 7, 18, 0.75) 0%,
        transparent 15%,
        transparent 80%,
        rgba(3, 7, 18, 0.95) 100%
      );
  }
  .hero-bottom-bar {
    padding: 24px 1.5rem 2rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .hero-recruiter-bar {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .hero-quick-link { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-progress-btn { min-width: 44px; }
}

@media (max-width: 640px) {
  .hero-content-stage {
    padding: clamp(112px, 18svh, 160px) 1.25rem 0;
  }
  .hero-eyebrow {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .hero-eyebrow-line {
    width: 1.75rem;
  }
  .hero-headline {
    font-size: clamp(1.75rem, 7.5vw, 2.3rem);
    line-height: 1.08;
    margin-bottom: 0.75rem;
  }
  .hero-description {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
  }
  .hero-cta-group {
    gap: 8px 20px;
  }
  .hero-btn {
    min-height: 44px;
  }
  .hero-btn--primary {
    padding: 0.7rem 1.35rem;
    font-size: 0.875rem;
  }
  .hero-btn--secondary {
    padding: 0.7rem 0.25rem;
    font-size: 0.875rem;
  }
  .hero-bottom-bar {
    padding: 24px 1.25rem max(24px, env(safe-area-inset-bottom));
    gap: 12px;
  }
  .hero-progress-group {
    width: 100%;
    justify-content: space-between;
    gap: 0.35rem;
  }
  .hero-progress-btn {
    padding: 0.5rem 0.15rem;
    min-width: 44px;
    min-height: 44px;
    gap: 0.35rem;
  }
  .hero-progress-num {
    font-size: 0.75rem;
  }
  .hero-progress-bar {
    width: 1.25rem;
  }
  .hero-progress-btn.active .hero-progress-bar {
    width: 2.25rem;
  }
  .hero-recruiter-bar {
    font-size: 0.75rem;
    gap: 0 20px;
  }
  .hero-recruiter-status {
    flex-basis: 100%;
  }
  .hero-quick-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hero-bg-slide img {
    object-position: center 25%;
  }
  .hero-gradient-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(3, 7, 18, 0.7) 0%,
        rgba(3, 7, 18, 0.35) 25%,
        rgba(3, 7, 18, 0.9) 60%,
        rgba(3, 7, 18, 0.98) 100%
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide,
  .hero-text-slide.active .hero-eyebrow,
  .hero-text-slide.active .hero-headline,
  .hero-text-slide.active .hero-description,
  .hero-text-slide.active .hero-cta-group,
  .hero-progress-bar,
  .hero-progress-fill,
  .hero-btn {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Shared interaction layer. Static content stays visible without JavaScript. */
[id] { scroll-margin-top: 112px; }
.project-section-note { color: var(--color-muted); }
@media (min-width: 768px) {
  body:has(.hero-editorial) .site-header {
    transition: background-color var(--motion-normal) var(--motion-ease-out), border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-normal) var(--motion-ease-out);
  }
  body:has(.hero-editorial) .site-header .nav-container { transition: none; }
  body:has(.hero-editorial) .site-header.is-scrolled { background: rgba(3,7,18,.9); }
  body:has(.hero-editorial) .site-header.is-scrolled .nav-links a,
  body:has(.hero-editorial) .site-header.is-scrolled .lang-option { color: #d1d5df; }
}
.application-card.application-card--screenshots,
.approach-grid article,
.writing-card,
.button,
.hero-btn {
  transition: transform var(--motion-normal) var(--motion-ease-out), border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-normal) var(--motion-ease-out), background-color var(--motion-fast) var(--motion-ease-standard);
}
.product-screen,
.editorial-featured-card .engineering-image,
.compact-work-thumb {
  transition: transform var(--motion-media) var(--motion-ease-out);
}
.compact-work-item {
  position: relative;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard);
}
.compact-work-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: calc(50% - 12px);
  height: 24px;
  width: 2px;
  background: var(--color-accent);
  opacity: 0;
  transform: scaleY(.4);
  transition: opacity var(--motion-fast) var(--motion-ease-out), transform var(--motion-normal) var(--motion-ease-out);
}
.compact-work-title a,
.nav-links a,
.text-link,
.project-card-link,
.application-links a { transition: color var(--motion-fast) var(--motion-ease-standard); }
.text-link > span,
.project-card-link > span,
.application-links a > span,
.button > span { display: inline-block; transition: transform var(--motion-fast) var(--motion-ease-out); }
.compact-work-item:focus-within::before { opacity: 1; transform: scaleY(1); }
.compact-work-item:focus-within .compact-work-title a { color: var(--color-accent-strong); }
.application-card--screenshots:focus-within,
.writing-card:focus-within { border-color: #acbad0; }
.nav-links a:hover,
.nav-links a:focus-visible { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
/* Touch gets the static composition; keyboard feedback never moves the screenshots. */
.application-card--screenshots:hover { transform: none; box-shadow: none; }
.editorial-featured-card:hover .engineering-image,
.compact-work-item:hover .compact-work-thumb { transform: none; }
.pulse-dot, .hero-status-badge .status-dot { animation: none; }
.hero-bg-slide { transition: opacity var(--motion-slow) var(--motion-ease-out), transform var(--motion-slow) var(--motion-ease-out), visibility var(--motion-slow); }
.hero-text-slide.active .hero-eyebrow { animation-duration: var(--motion-slow); animation-timing-function: var(--motion-ease-out); }
.hero-text-slide.active .hero-headline,
.hero-text-slide.active .hero-description,
.hero-text-slide.active .hero-cta-group { animation-duration: var(--motion-slow); animation-timing-function: var(--motion-ease-out); }
.hero-progress-btn { transition: color var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard); }
/* Keep indicator geometry fixed; the progress fill provides the active cue. */
.hero-progress-btn .hero-progress-bar,
.hero-progress-btn:hover .hero-progress-bar,
.hero-progress-btn.active .hero-progress-bar { width: 60px; transition: background-color var(--motion-fast) var(--motion-ease-standard); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .application-card--screenshots:hover { transform: translateY(var(--motion-card-lift)); border-color: #acbad0; box-shadow: 0 12px 28px rgba(20,34,53,.07); }
  .application-card--screenshots:hover .product-media--bp .product-screen--1 { transform: translateX(-8px) rotate(-7deg); }
  .application-card--screenshots:hover .product-media--bp .product-screen--2 { transform: translateY(-8px); }
  .application-card--screenshots:hover .product-media--bp .product-screen--3 { transform: translateX(8px) rotate(7deg); }
  .application-card--screenshots:hover .product-media--abadi .product-screen--1 { transform: translate(-5px,-11px) rotate(-4deg); }
  .application-card--screenshots:hover .product-media--abadi .product-screen--2 { transform: translate(5px,5px) rotate(4deg); }
  .compact-work-item:hover::before { opacity: 1; transform: scaleY(1); }
  .compact-work-item:hover { background: rgba(72,95,199,.025); border-bottom-color: #acbad0; }
  .compact-work-item:hover .compact-work-thumb,
  .editorial-featured-card:hover .engineering-image { transform: scale(var(--motion-media-scale)); }
  .approach-grid article:hover { transform: translateY(-2px); border-color: #acbad0; }
  .writing-card:hover { transform: translateY(-2px); border-color: #acbad0; box-shadow: 0 6px 18px rgba(20,34,53,.04); }
  .button:hover, .hero-btn:hover { transform: translateY(-2px); }
  .text-link:hover > span, .project-card-link:hover > span, .application-links a:hover > span, .button:hover > span { transform: translateX(3px); }
}
@media (max-width: 600px) {
  .hero-progress-btn .hero-progress-bar,
  .hero-progress-btn:hover .hero-progress-bar,
  .hero-progress-btn.active .hero-progress-bar { width: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .product-screen-composition, .hero-bg-stage { translate: none !important; }
  .application-card--screenshots:hover, .approach-grid article:hover, .writing-card:hover, .button:hover, .hero-btn:hover { transform: none !important; }
}

/* Practical Approach: a compact, connected engineering blueprint. */
.container--editorial-home > .workflow-blueprint {
  padding: clamp(28px,4vw,48px);
  margin-block: 24px 44px;
  border: 1px solid #dce3ed;
  border-radius: 18px;
  background-color: #f0f3f7;
  background-image: radial-gradient(ellipse at 80% 0%,rgba(224,221,248,.32),transparent 65%),linear-gradient(145deg,#f7f9fc,#f0f2f8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.workflow-blueprint .section-heading { margin-bottom: 24px; }
.workflow-blueprint h2 { max-width: 760px; font-size: clamp(29px,3vw,40px); }
.workflow-blueprint .section-subheading { max-width: 720px; margin-top: 14px; font-size: 15px; line-height: 1.65; }
.workflow-connector { position: absolute; right: -29px; top: 29px; width: 28px; height: 12px; pointer-events: none; color: #8396c5; }
.workflow-connector-base, .workflow-connector .workflow-track-progress { position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: #cad3e5; }
.workflow-connector .workflow-track-progress { background: #7d92c7; transform-origin: left center; }
.workflow-connector svg { position: absolute; top: 0; right: 0; }
.workflow-blueprint .approach-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.workflow-blueprint .workflow-stage { position: relative; min-width: 0; min-height: 0; padding: 0; border: 1px solid #d3ddea; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(29,47,77,.025); }
.workflow-stage-label { display: flex; align-items: center; gap: 9px; padding: 18px 16px 0; color: #354765; font: 600 10.5px/1.5 Consolas, "Courier New", monospace; letter-spacing: .025em; }
.workflow-stage-label > span:first-child { display: grid; place-items: center; flex: 0 0 26px; height: 24px; border: 1px solid #dce3f2; border-radius: 5px; color: var(--color-accent-strong); background: #f3f5fc; font-size: 10px; }
.workflow-stage-visual { position: relative; height: auto; aspect-ratio: 1.6; margin: 12px 0 0; overflow: hidden; background: #e9edf6; }
.workflow-illustration { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; mix-blend-mode: multiply; filter: contrast(1.06); transition: transform var(--motion-media) var(--motion-ease-out); }
.workflow-stage-visual::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 80%,rgba(110,119,221,.09),transparent 75%); transition: opacity var(--motion-normal) var(--motion-ease-standard); }
.workflow-stage:nth-child(3) .workflow-stage-visual::after { background: radial-gradient(ellipse at 50% 65%,rgba(67,186,168,.11),transparent 75%); }
.workflow-blueprint .workflow-stage-copy { padding: 22px; }
.workflow-blueprint .workflow-stage h3 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -.025em; }
.workflow-blueprint .workflow-stage p { margin-top: 12px; font-size: 14px; line-height: 1.7; }
.workflow-stage-label > span:first-child { transition: background-color var(--motion-normal) var(--motion-ease-standard), border-color var(--motion-normal) var(--motion-ease-standard); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .workflow-blueprint .workflow-stage:hover { transform: translateY(var(--motion-card-lift)); border-color: #9baed6; box-shadow: 0 10px 24px rgba(35,55,91,.08); }
  .workflow-stage:hover .workflow-illustration { transform: translateY(-4px); }
  .workflow-stage:hover .workflow-stage-visual::after { opacity: 1; }
  .workflow-stage:hover .workflow-stage-label > span:first-child { background: #e8edff; border-color: #b5c2e8; }
}
@media (max-width: 899px) {
  .workflow-blueprint .approach-grid { grid-template-columns: 1fr; gap: 22px; position: relative; margin-left: 12px; }
  .workflow-connector { display: none; }
  .workflow-blueprint .approach-grid::before { content: ''; position: absolute; left: -12px; top: 30px; bottom: 30px; width: 1px; background: #c0cce2; }
  .workflow-stage::before { content: ''; position: absolute; left: -16px; top: 29px; width: 7px; height: 7px; border: 1px solid #9aadd6; border-radius: 50%; background: #f0f3f7; }
  .workflow-stage-visual { aspect-ratio: 1.7; max-height: 300px; }
  .workflow-blueprint .workflow-stage-copy { padding: 20px; }
}
@media (max-width: 430px) {
  .container--editorial-home > .workflow-blueprint { padding: 24px 18px; border-radius: 14px; }
  .workflow-stage-label { padding-inline: 14px; font-size: 10px; }
  .workflow-blueprint .workflow-stage h3 { font-size: 20px; }
  .workflow-blueprint .workflow-stage-copy { padding: 18px 16px 22px; }
}
@media (max-width: 767px) {
  .workflow-blueprint .approach-grid { gap: 16px; }
  .workflow-blueprint .workflow-stage-visual { height: clamp(120px, 32vw, 168px); aspect-ratio: auto; margin-top: 10px; }
  .workflow-blueprint .workflow-stage-copy { padding: 16px; }
  .workflow-blueprint .workflow-stage p { margin-top: 8px; }
  .container--editorial-home > .workflow-blueprint { margin-block: 16px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-blueprint .workflow-stage:hover { transform: none !important; }
  .workflow-track-progress { transform: none !important; }
  .workflow-stage .workflow-illustration { transform: none !important; }
}

/* Homepage publication: conceptual engineering visual + authentic publisher hero. */
.publication-feature.writing-card { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: center; border-radius: 16px; }
.publication-media { min-width: 0; padding: 24px; background: linear-gradient(145deg,#edf0f7,#f6f7fb); }
.publication-media figure { margin: 0; }
.publication-media img { display: block; width: 100%; height: auto; transition: transform var(--motion-media) var(--motion-ease-out); }
.publication-concept { position: relative; border-radius: 12px; overflow: hidden; background: #152348; }
.publication-concept figcaption { position: absolute; top: 10px; left: 10px; padding: 5px 8px; border-radius: 4px; background: rgba(9,18,40,.85); color: #e3e9fc; font-size: 10px; line-height: 1.4; }
.publication-media .publication-proof { position: relative; z-index: 1; width: 92%; margin: -18px 0 0 auto; overflow: hidden; border: 1px solid #cbd5e7; border-radius: 9px; background: white; box-shadow: 0 10px 24px rgba(21,39,72,.12); }
.publication-proof figcaption { padding: 9px 12px; font-size: 11px; line-height: 1.5; color: var(--color-muted); }
.publication-copy { min-width: 0; padding: clamp(24px,3vw,40px); }
.publication-copy .eyebrow { font: 600 10px/1.6 Inter,"Segoe UI",Arial,sans-serif; letter-spacing: .08em; color: var(--color-accent-strong); }
.publication-copy h3 { margin-top: 16px; font-size: clamp(26px,2.5vw,34px); line-height: 1.17; letter-spacing: -.035em; }
.publication-description { margin-top: 16px; font-size: 15px; line-height: 1.7; }
.publication-copy .tags { margin-top: 20px; }
.publication-copy .tags span { font-size: 11px; }
.publication-author { display: grid; gap: 5px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.publication-author > span { color: var(--color-muted); font-size: 12px; }
.publication-author strong { color: var(--color-ink); font-size: 17px; font-weight: 650; }
.publication-author small { color: var(--color-muted); font-size: 11px; line-height: 1.6; }
.publication-copy .button { margin-top: 24px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .publication-feature:hover .publication-concept img { transform: translateY(-2px) scale(1.01); }
  .publication-feature:hover .publication-proof img { transform: scale(1.015); }
}
@media (max-width: 899px) {
  .publication-feature.writing-card { grid-template-columns: 1fr; }
  .publication-media { display: grid; justify-items: center; padding: 24px; }
  .publication-concept { width: 100%; max-width: 580px; }
  .publication-media .publication-proof { max-width: 520px; margin-top: -16px; }
}
@media (max-width: 430px) {
  .publication-media { padding: 16px; }
  .publication-copy { padding: 24px 20px; }
  .publication-copy .eyebrow { font-size: 9px; }
  .publication-concept figcaption { font-size: 9px; }
  .publication-media .publication-proof { width: 96%; }
  .publication-proof figcaption { font-size: 10px; }
}
@media (max-width: 767px) {
  .container--editorial-home > .technical-section { padding-block: 32px; }
  .publication-feature .publication-media { padding: 16px; }
  .publication-feature .publication-copy { padding: 20px; }
  .publication-copy h3, .publication-description { margin-top: 12px; }
  .publication-copy .tags { margin-top: 14px; }
  .publication-author { margin-top: 16px; padding-top: 14px; }
  .publication-copy .button { margin-top: 16px; }
  .container--editorial-home > .contact-band { padding-block: 22px; gap: 16px; margin-bottom: 32px; }
  .web-platform-actions a, .editorial-all-work-mobile { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .publication-feature:hover .publication-concept img, .publication-feature:hover .publication-proof img { transform: none !important; }
}

/* Curated knowledge sharing: existing QWeb publication and click-to-play tutorial. */
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 24px; }
.knowledge-grid > * { min-width: 0; margin: 0; }
.knowledge-grid .publication-feature.writing-card { display: flex; flex-direction: column; align-items: stretch; margin: 0; }
.knowledge-grid .publication-media { padding: 20px; }
.knowledge-grid .publication-concept { max-height: 140px; }
.knowledge-grid .publication-concept img { height: 140px; object-fit: cover; }
.knowledge-grid .publication-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px; }
.knowledge-grid .publication-copy :is(h2,h3), .tutorial-copy :is(h2,h3) { margin-top: 14px; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.knowledge-grid .publication-copy .button { margin-top: auto; }
.knowledge-grid .publication-author { width: 100%; margin-bottom: 24px; }
.tutorial-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.tutorial-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; padding: 18px 24px; font-size: 10px; line-height: 1.6; color: var(--color-muted); }
.tutorial-meta > span { font-weight: 650; letter-spacing: .06em; color: var(--color-accent-strong); }
.tutorial-preview { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111832; }
.tutorial-poster, .tutorial-preview iframe { display: block; width: 100%; height: 100%; }
.tutorial-poster { position: relative; color: white; }
.tutorial-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(9,18,40,.72)); pointer-events: none; }
.tutorial-poster img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; transition: transform var(--motion-media) var(--motion-ease-out); }
.tutorial-image-fallback { position: absolute; inset: 0; display: grid; place-content: center; padding-bottom: 90px; font-size: 24px; font-weight: 650; }
.tutorial-play { position: absolute; z-index: 1; inset: 50% auto auto 50%; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(16,31,66,.88); box-shadow: 0 4px 24px rgba(0,0,0,.18); transform: translate(-50%,-50%); transition: background var(--motion-fast) ease; }
.tutorial-preview-label { position: absolute; z-index: 1; bottom: 14px; left: 20px; font-size: 10px; font-weight: 650; letter-spacing: .06em; }
.tutorial-poster:focus-visible { outline-offset: -4px; outline-color: white; }
.tutorial-preview iframe { position: absolute; inset: 0; border: 0; background: #111832; }
.tutorial-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px; }
.tutorial-copy :is(h2,h3) { margin-top: 0; }
.tutorial-copy > p { margin-top: 16px; font-size: 15px; line-height: 1.7; }
.tutorial-copy .tags { margin-top: 20px; }
.tutorial-copy .tags span { font-size: 11px; }
.tutorial-copy .tutorial-attribution { width: 100%; margin-block: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 12px; }
.tutorial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: auto; }
.tutorial-actions .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12px; }
.tutorial-copy .tutorial-privacy { margin-top: 16px; font-size: 11px; color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tutorial-poster:hover img { transform: scale(1.015); }
  .tutorial-poster:hover .tutorial-play { background: var(--color-accent-strong); }
}
@media (max-width: 899px) {
  .knowledge-grid { grid-template-columns: minmax(0,1fr); }
  .knowledge-grid .publication-concept { max-height: 260px; }
  .knowledge-grid .publication-concept img { height: clamp(150px, 40vw, 260px); }
}
@media (max-width: 430px) {
  .knowledge-grid { gap: 20px; }
  .knowledge-grid .publication-copy, .tutorial-copy { padding: 22px 20px; }
  .tutorial-meta { padding: 16px 20px; }
  .tutorial-play { width: 54px; height: 54px; }
  .tutorial-preview-label { bottom: 10px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-poster img, .tutorial-play { transition: none; }
  .tutorial-poster:hover img { transform: none; }
}

.tutorial-card [hidden] { display: none !important; }

/* Cinematic Experience Journey Section & Native Player */
.experience-journey-section { padding-block: 48px; border-top: 1px solid var(--color-border); }
.experience-journey-section .section-heading { margin-bottom: 18px; }
.experience-journey-section .journey-description { max-width: 780px; margin: 0 0 28px; font-size: 15px; line-height: 1.7; color: var(--color-ink); }
.journey-player { position: relative; max-width: 980px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #080f24; border: 1px solid var(--color-border); box-shadow: 0 10px 32px rgba(8,15,36,0.14); }
.journey-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.journey-facade { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey-iframe-container { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.journey-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.journey-play-trigger { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; z-index: 2; text-align: center; color: #fff; transition: opacity var(--motion-fast) ease; }
.journey-play-trigger:focus-visible { outline: 3px solid #60a5fa; outline-offset: -3px; }
.journey-play-trigger:focus-visible .journey-play-badge { outline: 3px solid #60a5fa; outline-offset: 4px; box-shadow: 0 0 0 6px rgba(96,165,250,0.4); }
.journey-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #080f24; transition: transform var(--motion-media) var(--motion-ease-out); }
.journey-overlay-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,36,0.2) 0%, rgba(8,15,36,0.5) 60%, rgba(8,15,36,0.85) 100%); pointer-events: none; transition: background var(--motion-fast) ease; }
.journey-play-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.journey-play-badge { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(16,31,66,0.92); border: 2px solid rgba(255,255,255,0.85); box-shadow: 0 6px 28px rgba(0,0,0,0.45); color: #fff; transition: transform var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.journey-play-icon { margin-left: 3px; }
.journey-play-label { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.journey-play-meta { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #ced7e3; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.journey-fallback { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; }
.journey-fallback-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: rgba(16,31,66,0.92); color: #fff; border: 1px solid rgba(255,255,255,0.4); text-decoration: none; font-size: 13px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: background var(--motion-fast) ease; }
.journey-fallback-btn:hover { background: #1d4ed8; text-decoration: underline; }
.journey-fallback-btn:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.journey-skip-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--color-accent-strong); text-decoration: none; }
.journey-skip-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.journey-skip-link:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .journey-play-trigger:hover .journey-poster { transform: scale(1.015); }
  .journey-play-trigger:hover .journey-play-badge { transform: scale(1.08); background: #2563eb; border-color: #fff; }
  .journey-play-trigger:hover .journey-overlay-scrim { background: linear-gradient(180deg, rgba(8,15,36,0.1) 0%, rgba(8,15,36,0.4) 60%, rgba(8,15,36,0.75) 100%); }
}
.journey-player.is-playing .journey-facade { display: none; }
.journey-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(8,15,36,0.94); color: #fff; z-index: 4; text-align: center; padding: 24px; }
.journey-error p { margin: 0; font-size: 14px; color: #e2e8f0; }
.journey-transcript { max-width: 980px; margin: 20px auto 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); padding: 14px 20px; }
.journey-transcript-summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--color-muted); list-style: none; min-height: 28px; }
.journey-transcript-summary::-webkit-details-marker { display: none; }
.journey-transcript-summary:hover { color: var(--color-ink); }
.journey-transcript-summary:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 2px; }
.transcript-indicator { font-size: 18px; font-weight: 400; line-height: 1; transition: transform var(--motion-fast) ease; }
.journey-transcript[open] .transcript-indicator { transform: rotate(45deg); }
.journey-transcript-body { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 13px; line-height: 1.7; color: var(--color-muted); }
.journey-transcript-body .transcript-intro { margin: 0 0 10px; font-weight: 560; color: var(--color-ink); }
.journey-transcript-body .transcript-scenes { margin: 0 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.journey-transcript-body .transcript-scenes li { margin: 0; }
.journey-transcript-body .transcript-scenes strong { color: var(--color-ink); }
@media (max-width: 767px) {
  .experience-journey-section { padding-block: 36px; }
  .experience-journey-section .journey-description { font-size: 14px; margin-bottom: 22px; }
  .journey-play-badge { width: 56px; height: 56px; }
  .journey-play-badge svg { width: 26px; height: 26px; }
  .journey-play-label { font-size: 13px; }
  .journey-play-meta { font-size: 10px; }
  .journey-transcript { padding: 12px 16px; margin-top: 16px; }
  .journey-transcript-summary { font-size: 12px; }
  .journey-transcript-body { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-poster, .journey-play-badge, .journey-replay-btn, .transcript-indicator { transition: none !important; transform: none !important; }
}
.journey-player [hidden] { display: none !important; }

/* Works navigation and complete archive share the established card tokens. */
.work-category-nav {display:flex;flex-wrap:wrap;gap:12px;margin-block:24px 40px}
.work-category-nav a {display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #cbd5e1;border-radius:12px;color:#183453;background:#fff}
#odoo-work,#applications-heading,#web-platforms,#independent-heading,#academic-work {scroll-margin-top:110px}
.archive-controls {display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}
.archive-controls label {display:grid;gap:8px;flex:1;min-width:0;font-weight:600}
.archive-controls input,.archive-controls select {width:100%;min-width:0;min-height:48px;padding:12px;border:1px solid #94a3b8;border-radius:10px;font:inherit;background:#fff;color:#183453}
.archive-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-block:24px}
.archive-grid .panel {min-width:0;padding:24px;overflow-wrap:anywhere}
.archive-grid h2,.archive-grid h3 {font-size:22px;line-height:1.35;margin-block:12px 20px}
.archive-grid [hidden] {display:none}
.credential-resource-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0}
.credential-resource {min-width:0;border:1px solid #dce3ec;border-radius:14px;padding:20px;overflow-wrap:anywhere}
@media(max-width:900px){.archive-grid,.credential-resource-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.archive-grid,.credential-resource-list{grid-template-columns:1fr}.archive-controls{flex-direction:column}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.gallery-select{font:inherit;font-size:13px;min-height:44px;padding:8px 12px;border:1px solid #9aacbf;border-radius:8px;background:#fff;color:#183453;cursor:pointer}
.gallery-select[aria-pressed="true"]{background:#183453;color:#fff}
.gallery-panel-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.certificate-expansion>summary{cursor:pointer;min-height:44px;padding:12px 0;color:#244363;font-weight:600}
[data-gallery-panel]>.gallery-select{position:absolute;z-index:6;top:12px;right:12px;box-shadow:0 2px 8px #07172a25}

/* Career history: scoped editorial timeline, with readable no-script defaults. */
.career-intro { position: relative; padding-block: 76px 58px; }
.career-intro h1 { max-width: 860px; font-size: clamp(38px,5vw,66px); letter-spacing: -.055em; }
.career-intro > p:not(.eyebrow) { max-width: 690px; }
.career-system { display:flex; align-items:center; gap:14px; margin-top:26px; color:var(--color-accent-strong); font: 12px/1.5 Consolas,monospace; }
.career-system span { background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:10px 16px; }
.career-system i { font-style:normal; }
.career-timeline { --rail:164px; position:relative; }
.career-stage { position:relative; display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:30px; padding-bottom:40px; }
.career-stage::before,.career-stage::after { content:""; position:absolute; top:25px; bottom:-25px; left:7px; width:2px; background:var(--color-border); }
.career-stage::after { background:var(--color-accent); transform:scaleY(0); transform-origin:top; transition:transform 600ms ease-out; }
.career-stage.is-visited::after { transform:scaleY(1); }
.career-stage:last-child::before,.career-stage:last-child::after { display:none; }
.career-meta { padding:27px 0 0 30px; position:relative; font-size:12px; font-weight:650; line-height:1.5; }
.career-meta small { display:block; margin-top:8px; color:var(--color-muted); font-size:11px; font-weight:450; }
.career-node { position:absolute; left:0; top:29px; z-index:1; width:16px; height:16px; background:var(--color-surface); border:3px solid #b7c2d1; border-radius:50%; box-shadow:0 0 0 5px var(--color-bg); }
.is-visited .career-node { border-color:var(--color-accent); }
.career-primary.experience-card { display:block; padding:32px; border:1px solid var(--color-border); border-radius:18px; background:var(--color-surface); box-shadow:0 8px 26px #14223505; }
.career-primary.career-current { border-color:#bdc9ed; background:linear-gradient(135deg,#f3f6ff,white 65%); }
.career-company-header { display:flex; gap:18px; align-items:flex-start; }
.career-company-header > div:last-child { min-width:0; }
.career-company-header .experience-logo-box { flex-shrink:0; width:64px; height:64px; }
.career-company-header h2 { font-size:clamp(23px,2.5vw,30px); line-height:1.25; letter-spacing:-.04em; }
.career-company-header .eyebrow { margin-bottom:8px; font-size:10px; }
.career-current .eyebrow { color:var(--color-accent-strong); }
.career-body { margin-top:24px; }
.career-primary .experience-summary { margin-top:0; font-size:14px; }
.company-descriptor { margin-top:10px; font-size:13px; }
.achievement-badge { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; margin-top:13px; padding:7px 13px; border:1px solid #ebcb74; border-radius:20px; background:linear-gradient(120deg,#fff8e3,#fff0bf); color:#73520d; font-size:12px; font-weight:650; line-height:1.5; letter-spacing:0; }
.achievement-badge:hover { border-color:#b78b28; box-shadow:0 3px 10px #73520d12; }
.achievement-badge::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,#ffffffa6 50%,transparent 75%); transform:translateX(-130%); pointer-events:none; }
.is-visited .achievement-badge { animation:award-enter 550ms ease-out both; }
.is-visited .achievement-badge::after { animation:award-sweep 900ms 300ms ease-out both; }
@keyframes award-enter { from {opacity:0;transform:translateY(6px) scale(.97)} to {opacity:1;transform:none} }
@keyframes award-sweep { to {transform:translateX(130%)} }
.career-primary .experience-progression { margin:0 0 18px; padding:0; background:none; border:0; }
.career-primary .experience-progression strong { font-size:12px; }
.role-heading { margin-top:24px; font-size:15px; letter-spacing:-.02em; }
.career-primary .experience-timeline { margin:12px 0 20px; padding:20px 22px 8px 36px; background:#f6f8fa; border:1px solid #e6eaf0; border-radius:12px; }
.career-primary .experience-role { font-size:16px; }
.career-primary .experience-position { padding-bottom:15px; }
.career-primary .experience-period { font-size:12px; margin-top:5px; }
.role-scope { margin-top:7px; font-size:12px; }
.career-chips { display:flex; gap:7px; flex-wrap:wrap; padding:0; margin:0; list-style:none; }
.career-chips li { padding:5px 9px; border:1px solid var(--color-border); border-radius:6px; color:var(--color-muted); font-size:11px; line-height:1.5; background:var(--color-surface); }
.career-work { margin-top:28px; padding-top:24px; border-top:1px solid var(--color-border); }
.career-work > h3 { font-size:15px; letter-spacing:-.02em; margin-bottom:15px; }
.career-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.career-current .career-project-grid { grid-template-columns:1fr; }
.career-project { display:block; position:relative; padding:18px 16px 34px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); transition:transform 200ms,border-color 200ms,box-shadow 200ms; }
.career-project h4 { margin:12px 0 8px; font-size:13px; line-height:1.5; letter-spacing:-.015em; }
.career-project p { font-size:12px; line-height:1.7; }
.project-symbol { color:var(--color-accent-strong); font-size:22px; }
.project-arrow { position:absolute; right:15px; bottom:12px; color:var(--color-accent-strong); transition:transform 200ms; }
@media(hover:hover) { .career-project:hover { transform:translateY(-3px); border-color:#a6b5e7; box-shadow:0 8px 20px #14223508; } .career-project:hover .project-arrow { transform:translateX(3px); } }
.career-additional { display:grid; gap:9px; margin-top:18px; font-size:12px; color:var(--color-muted); }
.career-additional a { padding-block:7px; }
.career-all { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:13px; font-size:12px; }
.career-earlier-list { padding:8px 28px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface); }
.career-earlier.experience-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; padding:23px 0; border:0; border-bottom:1px solid var(--color-border); border-radius:0; box-shadow:none; background:none; }
.career-earlier:last-child { border-bottom:0; }
.career-earlier h2 { font-size:20px; line-height:1.4; }
.career-earlier .experience-logo-box { width:48px; height:48px; }
.career-earlier .eyebrow { font-size:9px; margin-bottom:5px; }
.career-earlier .experience-role { font-size:13px; margin-top:5px; }
.career-earlier .experience-period { font-size:12px; }
.career-disclosure summary { display:flex; justify-content:space-between; gap:12px; align-items:center; cursor:pointer; min-height:44px; font-size:12px; color:var(--color-accent-strong); list-style:none; }
.career-disclosure summary::-webkit-details-marker { display:none; }
.career-disclosure summary:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; }
.career-disclosure summary span { font-size:20px; transition:transform 240ms; }
.career-disclosure[open] summary span { transform:rotate(45deg); }
.career-disclosure[open] > div { animation:award-enter 250ms ease-out; }
.career-disclosure .experience-summary { font-size:13px; }
.career-expertise { margin:24px 0 0 194px; padding-top:28px; border-top:1px solid var(--color-border); }
.career-expertise > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin-top:24px; }
.career-expertise section > span { color:var(--color-accent); font-size:23px; }
.career-expertise h3 { font-size:16px; margin:12px 0 8px; }
.career-expertise section p { font-size:13px; }
@media(max-width:1100px) { .career-timeline { --rail:120px; } .career-stage { gap:22px; } .career-expertise { margin-left:142px; } .career-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) {
 .career-intro { padding-block:46px 36px; } .career-intro h1 { font-size:clamp(35px,8vw,48px); }
 .career-system { gap:8px; font-size:10px; flex-wrap:wrap; } .career-system span { padding:8px; }
 .career-timeline { --rail:0px; } .career-stage { display:block; padding:0 0 28px 24px; }
 .career-meta { padding:0 0 12px; font-size:11px; } .career-meta small { display:none; }
 .career-stage::before,.career-stage::after { top:7px; bottom:-7px; left:4px; }
 .career-node { top:2px; left:-26px; width:13px; height:13px; border-width:2px; }
 .career-primary.experience-card { padding:20px; border-radius:13px; }
 .career-company-header { gap:12px; } .career-company-header .experience-logo-box { width:44px; height:44px; }
 .career-company-header h2 { font-size:22px; } .career-company-header .eyebrow { line-height:1.5; }
 .achievement-badge { font-size:11px; padding:6px 9px; }
 .career-company-header:has(.achievement-badge) { flex-wrap:wrap; }
 .career-company-header:has(.achievement-badge) > div:last-child { flex:1 1 200px; }
 .career-project-grid { grid-template-columns:1fr; } .career-expertise { margin-left:24px; }
 .career-expertise > div { grid-template-columns:1fr; gap:24px; }
 .career-earlier-list { padding:0 16px; } .career-earlier.experience-card { grid-template-columns:36px minmax(0,1fr); gap:10px; }
 .career-earlier .experience-logo-box { width:36px; height:36px; } .career-earlier h2 { font-size:18px; }
 .career-primary .experience-timeline { padding:17px 14px 4px 27px; }
 .career-primary .experience-role { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
 .career-stage::after,.career-project,.project-arrow,.career-disclosure summary span { transition:none; }
 .is-visited .achievement-badge,.is-visited .achievement-badge::after,.career-disclosure[open] > div { animation:none; }
}
.career-primary .experience-position { position:relative; border-top:0; padding-top:0; padding-left:14px; border-left:1px solid #b8c5ee; }
.career-primary .experience-position::before { content:""; position:absolute; left:-4px; top:5px; width:7px; height:7px; border-radius:50%; background:var(--color-accent); }
.career-primary .experience-position:last-child { border-left-color:transparent; }
@media(min-width:1024px) { .career-arkana .experience-position > div { display:grid; grid-template-columns:1fr 1fr; column-gap:28px; width:100%; } .career-arkana .role-scope { grid-column:2; grid-row:1 / 3; margin:0; align-self:center; } }
.career-company-header .experience-logo-box,.career-earlier .experience-logo-box { min-width:0; }
@supports (interpolate-size:allow-keywords) {
 .career-disclosure { interpolate-size:allow-keywords; }
 .career-disclosure::details-content { block-size:0; overflow:clip; opacity:0; transition:block-size 260ms ease,opacity 260ms ease,content-visibility 260ms allow-discrete; }
 .career-disclosure[open]::details-content { block-size:auto; opacity:1; }
}
@media(prefers-reduced-motion:reduce) { .career-disclosure::details-content { transition:none; } }

/* Video-first opening: the full 16:9 film stays uncropped at every size. */
.cinematic-hero.page-intro { position:relative; padding:56px 0 28px; color:#f4f7ff; background:#101e33; box-shadow:0 0 0 100vmax #101e33; clip-path:inset(0 -100vmax); border:0; }
.cinematic-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center; min-height:min(700px,72svh); }
.cinematic-copy .eyebrow { color:#a9baff; font-size:10px; letter-spacing:.16em; }
.cinematic-copy h1 { margin-top:22px; max-width:570px; font-size:clamp(40px,4.2vw,62px); line-height:1.09; letter-spacing:-.055em; text-wrap:balance; }
.cinematic-copy .cinematic-description { max-width:470px; margin-top:24px; color:#becbdd; font-size:15px; line-height:1.8; }
.cinematic-actions { margin-top:28px; gap:10px; }
.cinematic-actions .button { font-size:12px; min-height:48px; background:#aec0ff; border-color:#aec0ff; color:#101e33; }
.cinematic-actions .button.secondary { background:transparent; color:#edf2ff; border-color:#60728e; }
.cinematic-cv { display:inline-flex; align-items:center; min-height:44px; gap:12px; margin-top:10px; font-size:12px; color:#becbdd; text-decoration:underline; text-underline-offset:4px; }
.cinematic-story { min-width:0; }
.cinematic-story-heading { display:flex; gap:16px; align-items:baseline; margin-bottom:18px; }
.cinematic-story-heading > span { font:11px/1.6 Consolas,monospace; color:#a9baff; }
.cinematic-story-heading h2 { font-size:20px; line-height:1.4; letter-spacing:-.025em; font-weight:500; max-width:360px; text-wrap:balance; }
.cinematic-player.journey-player { max-width:none; margin:0; border-radius:14px; border-color:#415572; box-shadow:0 20px 50px #0003; overflow:hidden; background:#08101d; }
.cinematic-film { position:relative; aspect-ratio:16/9; background:#08101d; }
.cinematic-video,.cinematic-poster { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.cinematic-poster { pointer-events:none; transition:opacity 300ms ease; }
.cinematic-player.has-frame .cinematic-poster { opacity:0; }
.cinematic-player.has-frame .cinematic-play { display:none; }
.cinematic-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:60px; height:60px; padding:0; border-radius:50%; border:1px solid #ffffffa6; background:#101e33d9; color:white; cursor:pointer; box-shadow:0 4px 20px #0004; }
.cinematic-play span { margin-left:3px; font-size:20px; }
.cinematic-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid #344764; }
.cinematic-controls button { padding:8px 10px; min-height:44px; background:transparent; border:1px solid transparent; border-radius:6px; color:#edf2ff; font-size:11px; cursor:pointer; }
.cinematic-controls button:hover { background:#22334d; border-color:#60728e; }
.cinematic-controls > span { margin-left:auto; color:#9cafc8; font:9px/1.5 Consolas,monospace; letter-spacing:.05em; }
.cinematic-film-note { margin-top:14px; color:#a9b9cf; font-size:11px; line-height:1.7; }
.cinematic-film-note a { text-decoration:underline; text-underline-offset:3px; }
.cinematic-status { padding:10px 18px; color:#ffdfa3; font-size:12px; }
.cinematic-hero .journey-transcript { margin-top:10px; border:0; background:none; color:#c6d2e3; }
.cinematic-hero .journey-transcript-summary { min-height:44px; padding:8px 0; font-size:11px; color:#c6d2e3; }
.cinematic-hero .journey-transcript-body { border-top:1px solid #344764; padding:16px 0; font-size:12px; }
.cinematic-hero .journey-transcript p,.cinematic-hero .journey-transcript li { color:#becbdd; }
.cinematic-skip.text-link { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:44px; margin-top:28px; padding-top:16px; border-top:1px solid #344764; color:#becbdd; font:11px/1.5 Consolas,monospace; }
.cinematic-hero :focus-visible { outline-color:#c3d0ff; }
.professional-intro { padding:64px 0 48px; max-width:800px; }
.professional-intro h2 { margin:16px 0; font-size:clamp(28px,3vw,38px); }
.professional-intro > p:not(.eyebrow) { max-width:760px; font-size:15px; }
.professional-intro .text-link { display:inline-flex; min-height:44px; align-items:center; gap:14px; margin-top:14px; font-size:12px; }
@media(min-width:1600px) { .cinematic-layout { min-height:740px; } }
@media(max-width:1100px) and (min-width:768px) { .cinematic-layout { gap:28px; grid-template-columns:1fr 1fr; } .cinematic-copy h1 { font-size:42px; } .cinematic-controls > span { display:none; } }
@media(max-width:767px) {
 .cinematic-hero.page-intro { padding:24px 0 16px; }
 .cinematic-layout { display:flex; flex-direction:column; align-items:stretch; gap:24px; min-height:0; }
 .cinematic-story { display:contents; }
 .cinematic-story-heading { order:-3; margin:0; gap:12px; }
 .cinematic-story-heading h2 { font-size:17px; max-width:none; }
 .cinematic-player { order:-2; }
 .cinematic-copy { order:-1; }
 .cinematic-copy .eyebrow { font-size:9px; }
 .cinematic-copy h1 { margin-top:12px; font-size:clamp(32px,8.7vw,40px); max-width:520px; text-wrap:initial; }
 .cinematic-copy .cinematic-description { margin-top:14px; font-size:13px; line-height:1.7; }
 .cinematic-actions { margin-top:20px; }
 .cinematic-actions .button { padding:12px 14px; font-size:11px; }
 .cinematic-cv { margin-top:4px; font-size:11px; }
 .cinematic-film-note { margin-top:-8px; }
 .cinematic-hero .journey-transcript { margin-top:-20px; }
 .cinematic-controls { padding:4px 6px; gap:0; }
 .cinematic-controls button { padding:7px 8px; }
 .cinematic-controls > span { font-size:8px; }
 .cinematic-skip.text-link { margin-top:18px; }
 .professional-intro { padding:42px 0 24px; }
 .professional-intro > p:not(.eyebrow) { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .cinematic-poster { transition:none; } }
.cinematic-hero .transcript-scenes strong { color:#e3eaff; }
.cinematic-hero .journey-transcript { padding:0; }
.cinematic-hero .cinematic-film-note { max-width:none; }
.cinematic-hero.page-intro { max-width:none; min-height:0; }
.cinematic-story-heading > span { flex-shrink:0; white-space:nowrap; }
.cinematic-video { opacity:0; }
.cinematic-player.has-frame .cinematic-video { opacity:1; }
@media(max-width:767px) {
 .cinematic-copy { display:flex; flex-direction:column; align-items:flex-start; }
 .cinematic-copy > .eyebrow { order:0; }
 .cinematic-copy > h1 { order:1; }
 .cinematic-copy > .cinematic-actions { order:2; }
 .cinematic-copy > .cinematic-description { order:3; }
 .cinematic-copy > .cinematic-cv { order:4; }
}
/* Privacy-enhanced YouTube playback, retaining the cinematic opening. */
.cinematic-embed { position:absolute; inset:0; opacity:0; }
.cinematic-embed iframe { width:100%; height:100%; border:0; display:block; }
.cinematic-player.has-frame .cinematic-embed { opacity:1; }

/* Nusativ engineering: public-safe mechanisms, with no runtime diagram dependencies. */
.eng-project-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:20px; margin-top:22px; }
.eng-project { min-width:0; position:relative; padding:28px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; }
.eng-project-flagship { background:linear-gradient(145deg,#f1f4ff,white 70%); border-color:#c3cdeb; }
.eng-project h3 { margin:15px 0 12px; font-size:24px; line-height:1.3; letter-spacing:-.035em; }
.eng-project h3 a:hover { color:var(--color-accent-strong); }
.eng-project > p { font-size:14px; }
.eng-project .eng-role { margin-top:15px; font-size:12px; }
.eng-highlights { padding:0 0 0 17px; margin:18px 0; color:var(--color-ink); font-size:13px; line-height:1.8; }
.eng-project .eng-stack { font-size:11px; color:var(--color-muted); line-height:1.8; }
.eng-project > .text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:14px; font-size:12px; }
.eng-project .eyebrow { font-size:10px; color:var(--color-accent-strong); }
.eng-engagement-note { margin-top:10px; font-size:12px; color:var(--color-muted); }
.career-nusativ .eng-project { padding:20px; }
.career-nusativ .eng-project h3 { font-size:20px; }
.eng-hero { padding:50px 0 46px; border-bottom:1px solid var(--color-border); }
.eng-back { display:inline-flex; min-height:44px; align-items:center; gap:10px; margin-bottom:25px; font-size:12px; }
.eng-hero h1 { margin:20px 0; max-width:990px; font-size:clamp(37px,5vw,65px); line-height:1.1; text-wrap:balance; }
.eng-hero-summary { max-width:740px; font-size:18px; }
.eng-hero .career-chips { margin-top:25px; }
.eng-hero-foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:24px; color:var(--color-muted); font-size:12px; line-height:1.7; }
.eng-hero-foot a { color:var(--color-accent-strong); text-decoration:underline; text-underline-offset:4px; }
.eng-toc { display:flex; gap:20px; flex-wrap:wrap; padding:16px 0; border-bottom:1px solid var(--color-border); }
.eng-toc a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; color:var(--color-muted); }
.eng-toc a:hover { color:var(--color-accent-strong); text-decoration:underline; text-underline-offset:5px; }
.eng-section { padding:56px 0; border-bottom:1px solid var(--color-border); scroll-margin-top:30px; }
.eng-section > h2 { margin:14px 0 24px; font-size:clamp(28px,3vw,38px); max-width:800px; }
.eng-section > p:not(.eyebrow) { max-width:900px; font-size:15px; }
.eng-overview { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; margin-top:22px; }
.eng-overview h2 { margin-bottom:20px; font-size:34px; }
.eng-overview p { font-size:15px; }
.eng-overview dl { margin:0; display:grid; gap:16px; }
.eng-overview dl div { padding-bottom:16px; border-bottom:1px solid var(--color-border); }
.eng-overview dt { color:var(--color-muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.eng-overview dd { margin:8px 0 0; font-size:13px; line-height:1.7; }
.eng-architecture { padding:30px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface); margin:26px 0 0; }
.eng-architecture figcaption,.eng-workflow figcaption { font:11px/1.7 Consolas,monospace; color:var(--color-muted); margin-bottom:22px; }
.eng-architecture ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:0; gap:22px; list-style:none; }
.eng-architecture li { position:relative; border:1px solid #c6d0e5; border-radius:10px; padding:20px 16px; background:#f4f7fc; }
.eng-architecture li:not(:last-child)::after { content:'→'; position:absolute; right:-20px; top:30px; color:var(--color-accent); }
.eng-architecture li strong { display:block; font-size:15px; line-height:1.4; }
.eng-architecture li span { display:block; font-size:12px; line-height:1.6; color:var(--color-muted); margin-top:8px; }
.eng-optional { margin-top:26px; border:1px dashed #bbc5d8; border-radius:10px; padding:20px; }
.eng-optional strong { font-size:12px; }
.eng-optional p { font-size:12px; margin-top:8px; }
.eng-architecture > p,.eng-workflow > p { margin-top:22px; font-size:12px; line-height:1.8; }
.eng-workflow { margin:28px 0; padding:26px; border-radius:14px; border:1px solid #c6d0e5; background:var(--color-surface); }
.eng-workflow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; margin:0; padding:0; gap:35px; }
.eng-workflow li { position:relative; min-width:0; }
.eng-step { color:var(--color-accent-strong); font:11px/1.6 Consolas,monospace; }
.eng-workflow strong { display:block; margin-top:8px; font-size:30px; letter-spacing:-.04em; }
.eng-workflow small { display:block; margin-top:8px; color:var(--color-muted); font-size:12px; line-height:1.6; }
.eng-approval { display:block; margin-top:16px; padding-top:12px; border-top:1px solid var(--color-border); color:var(--color-accent-strong); font-size:11px; }
.eng-approval > span { float:right; }
.eng-modules { border:1px solid var(--color-border); border-radius:14px; overflow:hidden; background:var(--color-surface); }
.eng-modules details + details { border-top:1px solid var(--color-border); }
.eng-modules summary { display:flex; align-items:center; gap:18px; padding:22px 26px; cursor:pointer; list-style:none; }
.eng-modules summary::-webkit-details-marker { display:none; }
.eng-modules summary:focus-visible { outline:3px solid var(--color-accent); outline-offset:-4px; }
.eng-modules summary h3 { font-size:19px; letter-spacing:-.025em; }
.eng-module-index { font:11px/1.5 Consolas,monospace; color:var(--color-muted); }
.eng-expand { margin-left:auto; color:var(--color-accent); font-size:22px; }
.eng-modules details[open] .eng-expand { transform:rotate(45deg); }
.eng-modules details > div { padding:0 26px 24px 62px; }
.eng-modules details p { font-size:14px; }
.eng-deep-grid,.eng-verification-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.eng-deep-grid article,.eng-verification-grid article { background:var(--color-surface); padding:28px; border:1px solid var(--color-border); border-radius:14px; min-width:0; }
.eng-deep-grid article > span,.eng-status { color:var(--color-accent-strong); font:11px/1.6 Consolas,monospace; }
.eng-deep-grid h3,.eng-verification-grid h3 { margin:14px 0; font-size:23px; line-height:1.35; }
.eng-deep-grid p,.eng-verification-grid p { font-size:14px; }
.eng-transaction,.eng-formula { padding:18px; margin-top:24px; border-radius:8px; background:var(--color-soft-blue); }
.eng-transaction p { font-size:12px; }
.eng-transaction p + p { margin-top:8px; }
.eng-deep-grid .eng-formula { font-size:13px; color:var(--color-ink); line-height:1.8; }
.eng-evidence-note { margin-top:24px; font-size:12px !important; }
.eng-investigation { padding:0; margin:30px 0; list-style:none; }
.eng-investigation li { display:grid; grid-template-columns:40px minmax(0,1fr); gap:20px; padding:24px 0; border-top:1px solid var(--color-border); }
.eng-investigation li > span { color:var(--color-accent-strong); font:12px/1.7 Consolas,monospace; }
.eng-investigation h3 { font-size:23px; margin-bottom:12px; }
.eng-investigation p { max-width:850px; font-size:15px; }
.eng-boundary { padding:26px; border:1px solid #dfd3b2; background:#fffaf0; border-radius:12px; }
.eng-boundary strong { color:#72521a; font-size:20px; line-height:1.4; }
.eng-boundary p { color:#72521a; margin-top:12px; font-size:14px; }
.eng-related { padding:50px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:25px; }
.eng-related h2 { margin-top:12px; font-size:30px; }
.eng-related > div:last-child { display:flex; flex-wrap:wrap; gap:12px; }
@media(max-width:1023px) { .eng-architecture ol { grid-template-columns:repeat(2,minmax(0,1fr)); } .eng-architecture li::after { display:none; } .eng-overview { gap:30px; } .career-nusativ .eng-project-grid { grid-template-columns:1fr; } }
@media(max-width:767px) {
 .eng-project-grid,.eng-overview,.eng-deep-grid,.eng-verification-grid { grid-template-columns:1fr; }
 .eng-project,.eng-deep-grid article,.eng-verification-grid article { padding:22px; }
 .eng-project h3 { font-size:23px; }
 .eng-hero { padding:30px 0; } .eng-hero h1 { font-size:clamp(34px,8vw,46px); }
 .eng-hero-summary { font-size:16px; } .eng-back { margin-bottom:18px; }
 .eng-hero-foot { font-size:11px; }
 .eng-toc { column-gap:18px; row-gap:0; }
 .eng-section { padding:38px 0; }
 .eng-architecture { padding:20px; }
 .eng-architecture ol { grid-template-columns:1fr; gap:12px; }
 .eng-architecture li { padding:16px; }
 .eng-workflow { padding:20px; }
 .eng-workflow ol { grid-template-columns:1fr; gap:22px; }
 .eng-workflow li:not(:last-child) { padding-bottom:20px; border-bottom:1px solid var(--color-border); }
 .eng-workflow strong { font-size:28px; }
 .eng-modules summary { padding:20px; gap:12px; }
 .eng-modules summary h3 { font-size:17px; }
 .eng-modules details > div { padding:0 20px 22px; }
 .eng-investigation li { grid-template-columns:26px minmax(0,1fr); gap:12px; }
 .eng-investigation h3 { font-size:20px; }
 .eng-boundary { padding:20px; }
 .eng-boundary strong { font-size:18px; }
}
.eng-hero-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:42px; align-items:center; }
.eng-hero-layout h1 { font-size:clamp(36px,4.2vw,57px); }
.eng-hero-diagram { margin:0; padding:28px; border:1px solid #c1cde8; border-radius:16px; background:linear-gradient(150deg,#edf2ff,#fff 80%); }
.eng-hero-diagram figcaption { color:var(--color-accent-strong); font:10px/1.7 Consolas,monospace; letter-spacing:.08em; }
.eng-hero-diagram ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:28px 0; gap:18px; }
.eng-hero-diagram li { position:relative; min-width:0; }
.eng-hero-diagram li span { display:block; font:10px/1.6 Consolas,monospace; color:var(--color-muted); }
.eng-hero-diagram strong { display:block; margin-top:8px; font-size:21px; letter-spacing:-.035em; }
.eng-hero-diagram b { position:absolute; top:26px; right:-14px; color:var(--color-accent); font-weight:400; }
.eng-hero-diagram p { padding-top:18px; border-top:1px solid var(--color-border); font-size:12px; }
.eng-hero-diagram small { display:block; margin-top:14px; color:var(--color-muted); font-size:10px; line-height:1.6; }
@media(max-width:1023px) { .eng-hero-layout { grid-template-columns:1fr; gap:28px; } }
@media(max-width:767px) { .eng-hero-diagram { padding:22px; } .eng-hero-diagram strong { font-size:20px; } }

/* Flagship hierarchy: shared facts, distinct discovery and career contexts. */
.nusativ-engineering .eng-project-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
.eng-project-flagship:has(.eng-feature-visual) { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; align-items:center; }
.eng-project-copy { min-width:0; }
.eng-project-copy > p:not(.eyebrow) { font-size:14px; }
.eng-project-copy .text-link { display:inline-flex; align-items:center; min-height:44px; gap:12px; font-size:12px; }
.eng-project-name { display:block; font-size:11px; letter-spacing:.16em; margin-bottom:10px; color:var(--color-accent-strong); }
.nusativ-home .eng-project-flagship h3 { font-size:clamp(25px,3vw,38px); max-width:560px; }
.nusativ-home .section-heading p:not(.eyebrow) { max-width:690px; margin-top:18px; }
.eng-project-support { background:var(--color-surface); padding:20px 28px; }
.eng-project-support .eng-project-copy { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; column-gap:28px; align-items:center; }
.eng-project-support .eyebrow { grid-column:1/-1; margin-bottom:4px; }
.eng-project-support h3,.eng-project-support h4 { font-size:19px; margin:10px 0; letter-spacing:-.025em; line-height:1.35; }
.eng-project-support .eng-project-name { display:inline; margin-right:10px; }
.eng-project-support .eng-stack { grid-column:2; margin:0; }
.eng-project-support .text-link { grid-column:3; grid-row:2/4; }
.eng-feature-visual { min-width:0; margin:0; padding:26px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; }
.eng-feature-visual figcaption { font-size:10px; letter-spacing:.1em; color:var(--color-accent-strong); line-height:1.7; }
.eng-feature-system { margin:22px 0 16px; border-block:1px solid var(--color-border); padding:18px 0; }
.eng-feature-system > span { display:block; font-size:11px; color:var(--color-muted); margin-bottom:8px; }
.eng-feature-system > strong { font-size:18px; line-height:1.4; }
.eng-feature-system ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; gap:10px; margin:22px 0 12px; }
.eng-feature-system li { border-left:2px solid var(--color-accent-strong); padding:8px 10px; background:var(--color-bg); }
.eng-feature-system li small { display:block; font-size:10px; color:var(--color-muted); margin-bottom:6px; }
.eng-feature-system li strong { font-size:20px; }
.eng-feature-system p,.eng-feature-visual > small { font-size:11px; color:var(--color-muted); line-height:1.7; }
.eng-feature-foundation { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; font-size:12px; line-height:1.6; }
.nusativ-projects .eng-project-flagship { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
.nusativ-projects .eng-feature-visual { padding:20px; }
.career-nusativ .eng-project-grid { grid-template-columns:1fr; gap:12px; }
.career-nusativ .eng-project h4 { font-size:21px; line-height:1.35; margin:12px 0; letter-spacing:-.025em; }
.career-nusativ .eng-highlights { display:flex; flex-wrap:wrap; column-gap:28px; margin:12px 0; }
.career-nusativ .eng-project-support { padding:16px 20px; }
.career-nusativ .eng-project-support .eng-project-copy { grid-template-columns:1fr auto; gap:0 24px; }
.career-nusativ .eng-project-support .text-link { grid-column:2; grid-row:2/4; }
.career-nusativ .eng-project-support h4 { font-size:17px; }
.eng-hero-role { max-width:650px; font-size:14px; color:var(--color-muted); }
.eng-project a:focus-visible { outline:2px solid var(--color-accent-strong); outline-offset:5px; border-radius:3px; }
@media(max-width:767px) {
 .eng-project-flagship:has(.eng-feature-visual),.nusativ-projects .eng-project-flagship { grid-template-columns:1fr; gap:22px; }
 .nusativ-engineering .eng-project { padding:22px; }
 .eng-project-support .eng-project-copy,.career-nusativ .eng-project-support .eng-project-copy { display:block; }
 .eng-project-support .eng-stack { margin:12px 0; }
 .eng-feature-visual { padding:18px; }
 .eng-feature-system { margin:14px 0; padding:14px 0; }
 .eng-feature-system ol { margin-top:16px; }
 .eng-feature-foundation { gap:12px; font-size:11px; }
 .career-nusativ .eng-project { padding:18px; }
 .career-nusativ .eng-highlights { display:block; }
}

/* ERISKA: neutral product-context reconstructions, distinct from contribution diagrams. */
.eng-project-flagship:has(.eriska-media) { grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
.eriska-media { padding:14px!important; background:#101e35; border-color:#33435e; box-shadow:0 20px 45px #101e3517; }
.eriska-window { display:flex; justify-content:space-between; padding:4px 2px 14px; color:#c9d7ed; font-size:10px; letter-spacing:.08em; }
.eriska-media a { display:block; border-radius:4px; overflow:hidden; background:#f1f4f8; }
.eriska-media a:focus-visible { outline:3px solid #80c9ff; outline-offset:4px; }
.eriska-media img { width:100%; height:auto; display:block; }
.eriska-media figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:#d0dcee; padding-top:13px; font-size:10px; letter-spacing:.02em; }
.eriska-story > p:not(.eyebrow) { max-width:780px; margin-bottom:28px; }
.eriska-story .eriska-media { max-width:1050px; }
.eng-hero-layout:has(.eriska-media) { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
@media(max-width:1023px) {
 .eng-project-flagship:has(.eriska-media),.eng-hero-layout:has(.eriska-media) { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 .eriska-media { padding:8px!important; }
 .eng-context-home .eng-project-copy { display:contents; }
 .eng-context-home:has(.eriska-media) { display:flex; flex-direction:column; align-items:stretch; gap:16px; }
 .eng-context-home .eriska-media { order:3; }
 .eng-context-home .eng-highlights { order:4; }
 .eng-context-home .text-link { order:5; }
}