/* Detail pages share the portfolio's dark, high-contrast visual language. */
:root {
  --bg: #101312;
  --surface: #1a1e1b;
  --surface2: #252a25;
  --ink: #f3f5ed;
  --muted: #bac4b9;
  --line: #ffffff24;
  --accent: #c6f28a;
  --paper: #eeefe7;
  --dark: #101312;
  --radius: 0px;
}
body { background: var(--bg); color: var(--ink); }
.wrap { width: min(1440px, calc(100% - 64px)); }
.site-header { background: var(--bg); backdrop-filter: none; border: 0; }
.header-inner { height: 76px; }
.brand svg { color: var(--accent); }
.brand strong { font-size: 20px; letter-spacing: 0; }
.brand small { font-family: inherit; font-size: 11px; line-height: 1.4; letter-spacing: 0; }
.nav { color: var(--ink); font-size: 14px; }
.nav .nav-contact { border: 0; border-radius: 0; background: var(--accent); color: var(--dark); padding: 12px 18px; }
.menu-toggle { color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.detail-main { padding-top: 36px; }
.breadcrumb { font-size: 13px; margin-bottom: 38px; }
.detail-kicker { font-family: inherit; font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--accent); }
.detail-title { font-size: clamp(48px, 7vw, 96px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; margin: 12px 0 20px; max-width: 100%; }
.detail-subtitle { font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: var(--ink); margin-bottom: 16px; }
.tags { gap: 8px; }
.tag { color: var(--ink); background: var(--surface2); border: 0; border-radius: 0; padding: 7px 10px; font-size: 12px; }
.detail-meta { border: 0; padding: 0; margin: 28px 0 30px; gap: 24px; }
.detail-meta dt { font-family: inherit; font-size: 13px; line-height: 1.4; letter-spacing: 0; color: var(--muted); }
.detail-meta dd { font-size: 15px; line-height: 1.5; }
.detail-hero { margin: 0; border: 0; border-radius: 0; background: var(--surface); }
.detail-hero img { max-height: 800px; }
.detail-caption { font-size: 13px; margin-top: 12px; }
.recruiting-brief { margin: 70px 0 0; padding: clamp(28px, 4vw, 58px); background: var(--surface); border: 0; border-radius: 0; }
.recruiting-brief .eyebrow { font-family: inherit; font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--accent); }
.recruiting-brief h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.25; font-weight: 600; max-width: 1050px; margin: 16px 0 36px; }
.brief-grid { gap: 36px; }
.brief-grid h3 { font-size: 16px; color: var(--ink); font-weight: 600; }
.brief-grid p, .brief-grid li { color: var(--muted); font-size: 15px; line-height: 1.75; }
.detail-body { gap: 7vw; padding: 88px 0; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
.detail-side { top: 100px; }
.detail-side p { font-family: inherit; font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.detail-side a { font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.detail-copy .case-section { margin-bottom: 88px; }
.detail-copy .case-section h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; margin-bottom: 26px; }
.detail-copy .case-section h3 { font-size: 19px; font-weight: 600; line-height: 1.4; }
.detail-copy .case-section p, .case-bullets li, .case-deliverables dd { font-size: 16px; line-height: 1.8; color: var(--ink); }
.detail-copy .case-role { color: var(--dark); background: var(--accent); border: 0; border-radius: 0; font-size: 14px; padding: 8px 12px; }
.case-flow li { border-color: var(--line); }
.case-flow .case-step, .case-overline { font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; }
.case-decisions { gap: 8px; }
.case-decisions article { background: var(--surface); border: 0; border-radius: 0; padding: 28px; }
.case-decisions article h3 { color: var(--ink) !important; }
.case-deliverables dt { font-size: 16px; font-weight: 600; }
.detail-gallery img, .detail-video, .story-video, .story-scene, .story-overview { border: 0; border-radius: 0; }
.detail-gallery figcaption { font-size: 13px; }
.story-scene { background: var(--surface); }
.story-scene-copy p { font-size: 15px !important; }
.next-case { border: 0; background: var(--surface); padding: 36px; }
.next-case small { font-family: inherit; font-size: 13px; line-height: 1.4; letter-spacing: 0; }
.next-case strong { font-size: clamp(24px, 3vw, 38px); }
.button, .detail-buttons .button { border-radius: 0; font-size: 14px; }
.contact-section { background: var(--surface); }
.prototype-page, .spec-page { --proto-panel: #1a1e1b; --proto-panel-raised: #252a25; --proto-muted: #bac4b9; --proto-green: #c6f28a; }
.prototype-wrap, .spec-wrap { width: min(1440px, calc(100% - 64px)); }
.prototype-eyebrow, .prototype-kicker { font-family: inherit; letter-spacing: 0; }
.prototype-hero h1, .spec-hero h1 { letter-spacing: -.04em; }
@media (max-width: 760px) {
  .wrap, .prototype-wrap, .spec-wrap { width: calc(100% - 32px); }
  .header-inner { height: 68px; }
  .nav { top: 68px; background: var(--surface); box-shadow: none; border: 0; }
  .detail-title { font-size: clamp(40px, 11vw, 64px); }
  .detail-subtitle { font-size: 17px; }
  .detail-meta { grid-template-columns: 1fr 1fr; }
  .detail-meta dd { font-size: 14px; }
  .recruiting-brief { margin-top: 48px; padding: 24px; }
  .brief-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail-body { display: block; padding: 56px 0; }
  .detail-side { position: static; display: flex; gap: 12px 18px; border: 0; margin-bottom: 40px; }
  .detail-side a { font-size: 13px; margin: 0; }
  .detail-copy .case-section { margin-bottom: 60px; }
  .detail-copy .case-section h2 { font-size: 28px; }
  .case-decisions article { padding: 22px; }
  .next-case { padding: 24px; }
}

/* 2026 refresh: editorial project pages, with every asset shown in full. */
:root {
  --bg: #101419;
  --surface: #1b242d;
  --surface2: #273440;
  --ink: #f0f5f6;
  --muted: #bac8cf;
  --line: #42515c;
  --accent: #71cfff;
  --dark: #101419;
  --paper: #e5edf0;
}
body { font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
.site-header { position: relative; background: var(--bg); }
.site-header .nav-contact, .button.primary { background: var(--accent); color: var(--dark); }
.site-header .brand svg, .detail-kicker, .case-overline, .detail-side a[aria-current="true"] { color: var(--accent); }
.detail-main { padding-top: 28px; }
.detail-main .wrap { width: min(1500px, calc(100% - 64px)); }
.breadcrumb { color: var(--muted); margin: 0 0 52px; }
.detail-kicker { font-size: 14px; }
.detail-title { max-width: 1200px; margin: 14px 0 20px; font-size: clamp(44px, 6.2vw, 88px); line-height: 1.1; }
.detail-subtitle { max-width: 850px; color: var(--muted); }
.detail-meta { background: var(--surface); padding: 24px; margin: 36px 0 24px; }
.detail-meta dt { color: var(--muted); }
.detail-meta dd { color: var(--ink); }
.detail-hero { background: var(--surface); overflow: visible; }
/* Screenshots, photos and diagrams must retain their native frame. */
.detail-main img { display:block; width:100%; height:auto !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; object-position:center !important; transform:none !important; }
.detail-hero img { position:static !important; }
.detail-hero .film-triptych { height:auto; padding:12px; gap:12px; align-items:start; background:var(--surface); }
.detail-hero .film-triptych img { max-height:none; height:auto; }
.detail-hero .story-keyart { min-height:0; overflow:visible; background:var(--surface); }
.detail-hero .story-keyart-copy { padding:clamp(24px,4vw,60px); }
.detail-hero .story-keyart-images { height:auto; align-items:start; gap:4px; }
.detail-hero .story-keyart-images img { height:auto; }
.vr-capture, .vr-hero .vr-capture { aspect-ratio:auto; overflow:visible; }
.detail-caption, .detail-gallery figcaption { color:var(--muted); font-size:14px; line-height:1.5; }
.recruiting-brief { background:var(--surface); margin-top:64px; }
.recruiting-brief h2 { max-width:1000px; }
.brief-grid p, .brief-grid li { color:var(--ink); font-size:16px; }
.detail-body { grid-template-columns:minmax(150px, 220px) minmax(0, 1fr); gap:clamp(40px,6vw,100px); }
.detail-side { border:0; padding:0; }
.detail-side a { color:var(--muted); }
.case-section h2 { max-width:900px; }
.case-decisions article, .story-scene, .vr-tour, .portfolio-video-card, .portfolio-grade-card, .portfolio-photo-card { background:var(--surface); border:0; border-radius:0; }
.case-flow li { border-color:var(--line); }
.case-metrics, .case-metrics>div { background:var(--surface); border-color:var(--line); }
.story-scene-image, .portfolio-grade-card>a, .portfolio-photo-card>a { background:var(--surface); }
.detail-main video { display:block; width:100%; height:auto !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; background:var(--surface); border:0; border-radius:0; }
.detail-main video.portrait, .detail-main .story-video { width:min(100%, 480px); margin-inline:auto; }
.story-overview, .story-scene, .vr-tour, .portfolio-video-card, .portfolio-grade-card, .portfolio-photo-card { overflow:visible; }
.next-case { background:var(--surface); }
.contact-section { background:#25323b; }
.contact-section .eyebrow, .contact-bottom { font-family:inherit; letter-spacing:0; }
.contact-links a, .contact-links button { color:var(--ink); }
.prototype-page, .spec-page { --proto-line:#42515c; --proto-panel:#1b242d; --proto-panel-raised:#273440; --proto-paper:#e5edf0; --proto-ink:#101419; --proto-muted:#bac8cf; --proto-green:#71cfff; background:var(--bg); color:var(--ink); }
.prototype-wrap, .spec-wrap { width:min(1500px, calc(100% - 64px)); }
.prototype-hero h1, .spec-hero h1 { color:var(--ink); }
.prototype-example, .prototype-card, .prototype-disclosure, .prototype-reference-card, .spec-boundary, .spec-state-lane { background:var(--surface); border-radius:0; box-shadow:none; }
.prototype-example { border:0; }
.prototype-button, .prototype-card, .prototype-disclosure, .prototype-reference-card, .spec-boundary, .spec-state-lane, .transcript-list, .spec-table-wrap { border-radius:0; }
.prototype-button-primary { background:var(--accent); color:var(--dark); }
.prototype-lead, .spec-lead { color:var(--ink); font-size:16px; }
.prototype-eyebrow, .prototype-kicker, .prototype-example-label, .prototype-reference-label, .prototype-state-label { font-family:inherit; letter-spacing:0; font-size:14px; }
@media(max-width:760px) {
  .detail-main .wrap, .prototype-wrap, .spec-wrap { width:calc(100% - 32px); }
  .detail-main { padding-top:20px; }
  .breadcrumb { margin-bottom:32px; }
  .detail-title { font-size:clamp(38px, 10vw, 58px); }
  .detail-meta { padding:20px; }
  .detail-body { display:block; }
  .detail-hero .story-keyart { grid-template-columns:1fr; }
  .detail-hero .story-keyart-images { grid-template-columns:1fr 1fr; }
  .detail-hero .film-triptych { gap:5px; padding:5px; }
  .detail-copy .case-section { margin-bottom:60px; }
}
.prototype-disclosure, .prototype-disclosure strong { color:var(--ink); }
.prototype-disclosure span { color:var(--muted); }
.prototype-spec-boundary, .spec-boundary { background:var(--surface); border-color:var(--accent); color:var(--ink); }
.detail-caption .detail-original { display:inline-block; margin-left:16px; color:var(--accent); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:760px) { .detail-caption .detail-original { display:block; width:fit-content; margin:10px 0 0; } }

/* Customer portfolio: a restrained cool palette shared with the project workbench. */
:root {
  --bg: #11171b;
  --surface: #202a30;
  --surface2: #29363b;
  --ink: #f4f4f4;
  --muted: #bfcbcf;
  --line: #4b6069;
  --accent: #b8cdd4;
  --dark: #172a31;
  --paper: #e5edf0;
}
body { background:var(--bg); color:var(--ink); }
.site-header { background:var(--bg); border:0; backdrop-filter:none; }
.site-header .brand svg { color:var(--accent); }
.site-header .brand small { font-family:inherit; font-size:14px; letter-spacing:0; color:var(--muted); }
.site-header .nav { font-size:16px; color:var(--ink); }
.site-header .nav-contact { background:var(--accent); color:var(--dark); }
.site-header .nav-contact:hover { background:#d8e5e8; color:var(--dark); }
.menu-toggle { border:0; border-radius:0; padding:11px 15px; background:var(--surface2); color:var(--ink); }
.detail-main .wrap { width:min(1500px, calc(100% - 60px)); }
.breadcrumb { font-size:15px; line-height:1.5; }
.detail-kicker { color:var(--muted); }
.detail-title { font-weight:700; }
.detail-meta { background:var(--surface); }
.detail-meta dd { font-size:16px; }
.tag { font-size:14px; color:var(--ink); background:var(--surface2); }
.detail-hero, .detail-gallery, .story-scene-image, .vr-capture, .portfolio-grade-card>a, .portfolio-photo-card>a { background:var(--surface); }
.detail-hero, .detail-hero .story-keyart, .story-keyart-images, .story-scene-image, .vr-capture, .vr-hero .vr-capture { overflow:visible; }
.detail-main img, .detail-main video { max-width:100%; height:auto !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; transform:none !important; }
.detail-main .detail-hero > img { width:100%; }
.detail-caption, .detail-gallery figcaption { font-size:15px; color:var(--muted); }
.detail-caption .detail-original { color:var(--accent); }
.recruiting-brief { background:var(--surface); }
.recruiting-brief .eyebrow { color:var(--muted); }
.brief-grid h3 { font-size:18px; }
.brief-grid p, .brief-grid li, .detail-copy .case-section p, .case-bullets li, .case-deliverables dd { font-size:16px; line-height:1.75; color:var(--ink); }
.detail-copy .case-role { background:var(--accent); color:var(--dark); }
.case-decisions article, .story-scene, .vr-tour, .portfolio-video-card, .portfolio-grade-card, .portfolio-photo-card, .case-metrics, .case-metrics > div, .next-case { background:var(--surface); }
.contact-section { background:var(--accent); color:var(--dark); padding:70px 0 30px; }
.contact-section .eyebrow { display:none; }
.contact-section .contact-row { align-items:start; margin-top:0; }
.contact-section .contact-row h2 { color:var(--dark); font-weight:700; letter-spacing:-.04em; }
.contact-section .contact-links a, .contact-section .contact-links button, .contact-section .contact-links small, .contact-section .contact-caption, .contact-section .contact-bottom { color:var(--dark); }
.contact-section .contact-links a, .contact-section .contact-links button, .contact-section .contact-bottom { border:0; }
.contact-section .contact-links small, .contact-section .contact-bottom { font-family:inherit; font-size:14px; letter-spacing:0; }
.contact-section .contact-bottom a { border:0; }
.prototype-page, .spec-page {
  --proto-line:#4b6069;
  --proto-panel:#202a30;
  --proto-panel-raised:#29363b;
  --proto-paper:#e5edf0;
  --proto-ink:#172a31;
  --proto-muted:#bfcbcf;
  --proto-green:#b8cdd4;
  background:var(--bg);
  color:var(--ink);
}
.prototype-button-primary { background:var(--accent); color:var(--dark); }
.prototype-reference-card, .prototype-disclosure, .prototype-card, .prototype-example, .spec-boundary, .spec-state-lane { background:var(--surface); color:var(--ink); }
@media(max-width:760px) {
  .detail-main .wrap, .prototype-wrap, .spec-wrap { width:calc(100% - 32px); }
  .site-header .nav { background:var(--surface); }
  .detail-main { padding-top:20px; }
  .detail-meta { padding:18px; gap:16px; }
  .detail-meta dd { font-size:15px; }
  .detail-title { font-size:clamp(38px, 10vw, 58px); }
  .recruiting-brief { padding:24px; }
  .detail-side { flex-wrap:wrap; }
  .detail-side a { font-size:14px; }
  .detail-copy .case-section p, .case-bullets li, .case-deliverables dd { font-size:16px; }
  .contact-section .contact-row { display:block; }
  .contact-section .contact-links { margin-top:28px; }
}