/* Shared rhythm: compact groups 8–16, content groups 24–32, sections 64–96. */
:root { --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-6:48px; --space-8:64px; --space-12:96px; }
body { font-size:18px; }
p, .intro, .project-meta p, .about-copy p, .ux-skillset li, .ux-skillset li span,
.tubi-case p, .tubi-case dd, .tubi-case li:not(.case-step), .tubi-case blockquote,
.lotto-comparison-layout .lotto-decisions p, .audit-status .lotto-metrics-note {
 font-size:18px !important; line-height:1.55;
}
#project-view h1, #project-view h2, #project-view h3,
.tubi-case h1, .tubi-case h2, .tubi-case h3 { font-size:24px !important; line-height:1.33; }
.work-title, .section-heading, .practice-title, .project-meta h3 { font-size:24px; line-height:1.33; }
figcaption, .case-figure figcaption, .tubi-case .case-phase { font-size:14px !important; line-height:1.5; }
.project-card .project-badge, .project-card .project-badge.badge-forma, .project-card .project-badge.badge-pulse { background:#632509; color:#fff0da; padding:8px 16px; }
.lotto-card-metrics span { background:#087b43; color:#fff; font-weight:600; padding:8px 16px; }
.lotto-card-metrics { gap:16px; }
.lotto-card-metrics span:nth-child(2) { margin-left:32px; }
.section { padding-block:96px; }
.section-heading, .section-top { margin-bottom:32px; }
.about-copy p { margin:0 0 24px; }
.about-practice { margin-top:64px; }
.practice-columns { gap:48px; }
.case-step { padding-bottom:64px; }
.case-step-content { padding-top:0; }
.case-step-content > h2 { margin-bottom:24px; }
.case-step-content > p { margin-bottom:24px; }
.lotto-comparison-layout { gap:32px; max-width:1040px; grid-template-columns:1fr 1.4fr 1fr; }
.lotto-comparison-layout .lotto-decisions { gap:24px; }
.lotto-comparison-layout .lotto-decisions h3 { margin-bottom:8px; }
.case-summary dl div { gap:24px; }
.case-figure { margin-block:32px; }
.case-figure figcaption { margin-top:8px; gap:16px; }
.sr-only { margin:-1px; padding:0; }
@media(max-width:899px) {
 .lotto-comparison-layout { grid-template-columns:1fr 1fr; gap:24px; }
 .lotto-comparison-layout .lotto-decisions { grid-template-columns:1fr; }
}
@media(max-width:700px) {
 .section { padding-block:64px; }
 .about-layout, .practice-columns { gap:32px; }
 .case-step { gap:16px; }
 .case-summary dl div { grid-template-columns:1fr; gap:8px; }
 .lotto-comparison-layout { gap:16px; }
 .nav { gap:8px; }
 .nav-right { gap:8px; }
}

.tubi-case .lotto-metrics dd, .tubi-case .audit-counts dd { font-size:32px !important; line-height:1.25; }

/* Homepage and project hierarchy share the same rhythm. */
*, *::before, *::after { letter-spacing:0 !important; }
#project-view .detail-title { font-size:clamp(40px,5vw,64px) !important; line-height:1.08; margin:0 0 24px; }
.hero h1 { font-size:clamp(32px,3.5vw,48px); line-height:1.17; margin:0; }
.hero-contact { display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:32px; }
.hero-contact p { margin:0; }
.hero-email { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:16px 24px; border-radius:999px; background:#fff1df; color:#382011; font-size:18px; font-weight:600; text-decoration:none; transition:background .25s; }
.hero-email:hover { background:#ffdaaa; box-shadow:none; }
.hero-email:focus-visible { outline:2px solid #fff; outline-offset:8px; }
#home-view .work-title, #home-view .section-heading { font-size:24px; line-height:1.33; margin:0 0 32px; }
#home-view .section-top { margin-bottom:0; }
#home-view .project-meta h3 { font-size:24px; margin:0; line-height:1.33; }
#home-view .project-meta { gap:16px; padding:24px; }
#home-view .practice-title { font-size:24px; margin:0 0 32px; }
#home-view .practice-columns h4 { font-size:20px; font-weight:600; color:#fff0dc; text-transform:none; margin:0 0 24px; }
#home-view .tool-item { font-size:18px; padding:16px; gap:16px; }
@media(max-width:700px) {
 .hero-contact { grid-column:1 / -1; grid-row:2; margin-top:24px; }
 .hero h1 { font-size:clamp(24px,5.6vw,32px); }
 #home-view .project-meta { padding:16px; }
 #project-view .detail-title { font-size:40px !important; }
}
.lotto-comparison-layout .lotto-decisions li:nth-child(1) h3 { color:#ffdaaa; }
.lotto-comparison-layout .lotto-decisions li:nth-child(2) h3 { color:#efbc7c; }
.lotto-comparison-layout .lotto-decisions li:nth-child(3) h3 { color:#eaa583; }
.lotto-comparison-layout .lotto-decisions li:nth-child(4) h3 { color:#e7c8ab; }
.lotto-comparison-layout .lotto-decisions li:nth-child(5) h3 { color:#d8ad82; }
.lotto-comparison-layout .lotto-decisions li:nth-child(6) h3 { color:#f5ce93; }

/* Reusable roles: action, section heading, supporting heading, body. */
:root { --action-bg:#ffdfb5; --action-hover:#ffcb8a; --action-text:#382011; --heading-color:#fff0dc; --body-color:#ebd2b8; }
.site-header .nav .contact-link, .hero-email, .project-card .project-arrow {
 background:var(--action-bg); color:var(--action-text); border:0; border-radius:999px;
 box-shadow:none; text-shadow:none; filter:none; font-weight:600; font-size:18px;
 transition:background .25s ease,color .25s ease;
}
.site-header .nav .contact-link, .hero-email { min-height:48px; padding:16px 24px; line-height:1; }
.site-header .nav .contact-link span { font-size:18px; }
.project-card .project-arrow { width:48px; height:48px; flex:0 0 48px; padding:0; }
.site-header .nav .contact-link:hover, .hero-email:hover, .project-card .project-arrow:hover,
.project-card:focus-visible .project-arrow {
 background:var(--action-hover); color:var(--action-text); box-shadow:none; filter:none; text-shadow:none;
}
.site-header .nav .contact-link:focus-visible, .hero-email:focus-visible, .project-card:focus-visible { outline:2px solid var(--action-bg); outline-offset:8px; }
#project-view .case-step-content > h2, #project-view .audit-intro h2 { color:var(--heading-color); font-weight:600; }
#project-view .lotto-decisions h3 { font-size:18px !important; line-height:1.55; font-weight:600; }
.lotto-comparison-layout { column-gap:64px; }
.audit-intro { margin-bottom:96px; padding-bottom:0; }
#project-view .next-project > span { font-size:24px; line-height:1.33; color:var(--heading-color); }
#project-view .next-project { margin-top:64px; padding-block:32px; gap:16px; }
#project-view .case-change { margin:32px 0 48px 32px; }
#project-view .case-change h3 { color:var(--heading-color); font-weight:600; }
#project-view .audit-method dt { font-family:'Poppins',sans-serif; font-size:18px; line-height:1.55; font-weight:600; color:var(--heading-color); }
#project-view .audit-method dd { margin:0; color:var(--body-color); }
@media(max-width:899px){ .lotto-comparison-layout { column-gap:24px; } }
@media(max-width:700px){
 .site-header .nav .contact-link { padding:16px; }
 .audit-intro { margin-bottom:64px; }
 #project-view .case-change { margin-left:16px; }
 .lotto-comparison-layout { column-gap:16px; }
}
.site-header .nav .contact-link:hover, .hero-email:hover { transform:none; }

/* Supporting evidence on the audit cover, in front of the phone. */
.audit-card-metrics { position:absolute; inset:0; z-index:3; pointer-events:none; transform:translateZ(38px); transform-style:preserve-3d; transition:transform .32s ease; }
.project-card.is-tilting .audit-card-metrics { transform:translateZ(48px); }
.audit-card-metrics > span { position:absolute; padding:8px 16px; border-radius:24px; font-size:14px; font-weight:600; line-height:1.2; white-space:nowrap; box-shadow:0 8px 16px #160b0833; }
.audit-card-metrics .minor { top:36%; left:8%; background:#087b43; color:#fff; }
.audit-card-metrics .major { top:54%; right:8%; background:#f6cd68; color:#382011; }
.audit-card-metrics .critical { top:67%; left:12%; background:#a73d30; color:#fff; }
.project-card .project-arrow { background:#7a2e0b; color:#fff0dc; width:40px; height:40px; flex-basis:40px; border-radius:12px; }
.project-card .project-arrow:hover, .project-card:focus-visible .project-arrow { background:var(--action-bg); color:var(--action-text); }
#project-view .next-project > span { color:#c5ab93; }
#project-view .tubi-hero-copy > p:last-child, #project-view .audit-hero-copy > p:last-child, #project-view .lotto-hero-copy > p:last-child { font-size:24px !important; line-height:1.4; }
.case-findings > div { position:relative; isolation:isolate; overflow:hidden; min-height:240px; padding:32px; }
.case-findings > div > .finding-number { position:absolute; z-index:-1; right:-8px; bottom:-40px; margin:0; color:#ffd9a3; opacity:.1; font-size:288px; line-height:1; font-weight:600; pointer-events:none; }
.case-findings h3,.case-findings p { position:relative; }
@media(max-width:700px){
 .audit-card-metrics,.project-card.is-tilting .audit-card-metrics { transform:none; }
 .hero h1 em { font-size:.85em; }
 .case-findings > div { padding:24px; }
}
@media(prefers-reduced-motion:reduce){ .audit-card-metrics { transition:none; } }

/* Keep the audit counts inside the phone artwork, including during tilt. */
.project-card .project-art.forma { overflow:hidden; isolation:isolate; }
.project-card .audit-card-metrics, .project-card.is-tilting .audit-card-metrics { transform:none; overflow:hidden; border-radius:inherit; }
.audit-card-metrics > span { min-width:40px; padding:8px; text-align:center; }
.audit-card-metrics .minor { top:32%; left:40%; }
.audit-card-metrics .major { top:44%; right:8%; }
.audit-card-metrics .critical { top:68%; left:46%; }

@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
html body, html body *, html body *::before, html body *::after { font-family:'Poppins',sans-serif !important; }
.hero h1 { font-size:clamp(32px,3.3vw,48px); }
.project-card .audit-card-metrics { overflow:visible; }
.audit-card-metrics > span { display:grid; place-items:center; width:40px; height:40px; min-width:0; padding:8px; border-radius:50%; margin:-20px 0 0 -20px; }
.audit-card-metrics svg { width:24px; height:24px; }
.audit-card-metrics .minor { top:33%; left:28%; right:auto; }
.audit-card-metrics .major { top:49%; left:40%; right:auto; }
.audit-card-metrics .critical { top:67%; left:31%; right:auto; }
@media(max-width:700px){
 .hero h1 { font-size:clamp(24px,5.5vw,32px); }
 #home-view .project-meta h3 { font-size:22px; }
 .practice-columns .tools-grid { grid-template-columns:1fr; }
}

/* Outcome-led project captions and compact phone annotations. */
#home-view .project-meta h3 { font-size:18px; line-height:1.5; font-weight:500; }
.audit-card-metrics > span { width:32px; height:32px; margin:-16px 0 0 -16px; padding:8px; }
.audit-card-metrics svg { width:20px; height:20px; stroke-width:3.5; transform:rotate(7deg) skewX(4deg); }
.audit-card-metrics > span { box-shadow:0 4px 8px #160b0833; }
#nav-cv[aria-disabled="true"] { opacity:.6; cursor:default; }
.portrait-intro, html[lang="en"] .portrait-intro { right:9%; top:46%; font-size:22px; line-height:1.2; white-space:nowrap; z-index:4; }
@media(max-width:1000px){
 .portrait-intro,html[lang="en"] .portrait-intro { right:5%; top:47%; font-size:18px; }
}
@media(max-width:600px){
 .portrait-intro,html[lang="en"] .portrait-intro { right:0; top:45%; font-size:14px; padding:8px; max-width:none; }
}

/* One thumbnail frame for all three homepage projects. */
#project-grid .project-art { width:100%; height:auto; aspect-ratio:3 / 2; }
#project-grid .project-card { display:flex; flex-direction:column; height:100%; }
#project-grid .project-meta { flex:1; align-items:center; }
#project-grid .project-meta h3 { font-size:18px; line-height:1.5; }

/* Responsive content safeguards. */
#nav-cv { opacity:1; cursor:pointer; }
#home-view .hero-contact { min-width:0; }
@media(min-width:601px) and (max-width:1000px){
 #project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .practice-columns { grid-template-columns:1fr; gap:32px; }
 .audit-method > div { grid-template-columns:1fr; gap:8px; }
}
@media(max-width:700px){
 .hero h1 { grid-row:1; }
 .hero .portrait-scene { grid-row:1; }
 .hero-contact { grid-row:2; }
 .case-summary, .audit-intro { grid-template-columns:1fr; }
 .audit-method > div { grid-template-columns:1fr; gap:8px; }
 .next-project { flex-wrap:wrap; }
 .contact-methods a { overflow-wrap:anywhere; }
 .tubi-case .case-step-content { min-width:0; }
}
@media(max-width:380px){
 .site-header .nav { padding-inline:8px; }
 .site-header .nav .contact-link { padding:16px 8px; }
 .site-header .nav .contact-link span { font-size:16px; }
}

/* User-composed 3:2 Tubi thumbnail: preserve the complete composition. */
.project-card .tubi-cover-image.tubi-custom-cover { inset:0; width:100%; height:100%; max-width:100%; transform:none; object-fit:contain; object-position:center; filter:none; }

/* Shared, full-resolution cover compositions on cards and case studies. */
.project-card .lotto-cover-image.lotto-custom-cover {
 inset:0; width:100%; height:100%; max-width:100%; transform:none;
 object-fit:contain; object-position:center; border-radius:0; box-shadow:none; filter:none;
}
#project-view .tubi-hero, #project-view .lotto-hero {
 display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
 align-items:center; gap:32px; height:auto; min-height:480px; padding:128px 32px 32px;
}
#project-view .tubi-hero-copy, #project-view .lotto-hero-copy {
 position:relative; inset:auto; width:auto; order:0; min-width:0;
}
#project-view .tubi-hero .detail-art, #project-view .lotto-hero .detail-art {
 position:relative; inset:auto; width:100%; height:auto; aspect-ratio:3 / 2; order:1;
}
#project-view .tubi-hero .tubi-custom-cover, #project-view .lotto-hero .lotto-custom-cover {
 inset:0; width:100%; height:100%; max-width:100%; transform:none; object-fit:contain;
 object-position:center; border-radius:0; filter:none; box-shadow:none;
}
#project-view .tubi-hero .tubi-cover-logo, #project-view .lotto-hero .lotto-hero-logo { top:24px; left:32px; }
@media(max-width:700px) {
 #home-view .hero { grid-template-columns:minmax(0,1fr) clamp(112px,29vw,176px); grid-template-rows:auto; gap:16px; align-items:start; }
 #home-view .hero-copy { display:block; grid-column:1; grid-row:1; padding:0; min-width:0; }
 #home-view .hero-contact { margin-top:16px; gap:16px; }
 #home-view .hero-contact p { font-size:18px; line-height:1.5; }
 #home-view .hero-email { padding:16px; text-align:center; font-size:16px; }
 #home-view .hero .portrait-scene { grid-column:2; grid-row:1; align-self:start; margin-top:0; }
 #home-view .portrait-greeting, #home-view .portrait-intro, #home-view .portrait-name {
 font-size:14px; line-height:1.2; padding:8px; white-space:nowrap; z-index:5; max-width:none;
 }
 #home-view .portrait-greeting { left:-8px; top:20%; bottom:auto; }
 #home-view .portrait-intro { right:-8px; top:49%; left:auto; bottom:auto; }
 #home-view .portrait-name { left:50%; bottom:-16px; top:auto; }
 #project-view .tubi-hero, #project-view .lotto-hero {
 grid-template-columns:minmax(0,1fr); gap:24px; min-height:0; padding:128px 24px 24px;
 }
 #project-view .tubi-hero .tubi-cover-logo, #project-view .lotto-hero .lotto-hero-logo { left:24px; }
}

/* One continuous cover surface, with a distinct warm palette per project. */
:root {
 --lotto-cover-surface:linear-gradient(135deg,#1F80D1 0%,#085DA9 100%);
 --tubi-cover-surface:radial-gradient(ellipse at 85% 30%,#7aafc5 0%,#477a99 40%,#294e68 76%,#1d3549 100%);
}
#project-grid .project-art.pulse, #project-view .lotto-hero { background:var(--lotto-cover-surface); }
#project-grid .project-art.nova, #project-view .tubi-hero { background:var(--tubi-cover-surface); }
#project-view .lotto-hero .detail-art, #project-view .tubi-hero .detail-art,
#project-view .lotto-hero .project-art.pulse, #project-view .tubi-hero .project-art.nova {
 background:transparent;
}

/* Dark copy keeps the light LOTTO cover readable. */
#project-view .lotto-hero-copy .detail-title, #project-view .lotto-hero-copy > p { color:#382011; text-shadow:none; }

/* Edge-aligned cover compositions and a softer LOTTO case-study surface. */
#project-view .lotto-hero::before {
 content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
 background:linear-gradient(135deg,#00172b14,#00172b30);
 animation:lotto-cover-dim 800ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes lotto-cover-dim { from { opacity:0; } to { opacity:1; } }
#project-view .lotto-hero-copy .detail-title, #project-view .lotto-hero-copy > p { color:#fff; }
#project-view .tubi-hero, #project-view .lotto-hero { padding-right:0; padding-bottom:0; }
#project-view .tubi-hero .detail-art, #project-view .lotto-hero .detail-art { align-self:end; z-index:1; }
#project-view .tubi-hero-copy, #project-view .lotto-hero-copy { padding-bottom:32px; z-index:2; }
#project-view .lotto-hero-logo, #project-view .tubi-cover-logo { z-index:3; }
@media(max-width:700px) {
 #project-view .tubi-hero-copy, #project-view .lotto-hero-copy { padding-right:24px; padding-bottom:0; }
}
@media(prefers-reduced-motion:reduce) { #project-view .lotto-hero::before { animation:none; } }

/* Photo supplied for About: retain natural framing and the existing tilt. */
.orbit-portrait.about-photo { left:8%; width:84%; border-radius:0; overflow:hidden; mask-image:linear-gradient(#000 0%,#000 86%,transparent 100%); }
.orbit-portrait.about-photo::before, .orbit-portrait.about-photo::after { display:none; }
.orbit-portrait.about-photo img { inset:0; width:100%; height:100%; max-width:100%; object-fit:contain; object-position:center top; mask-image:none; }
.lotto-research-findings { margin:16px 0 0; padding-left:24px; font-size:18px; line-height:1.7; }
.lotto-research-findings li + li { margin-top:8px; }

/* Keep the portrait below the upper banner row and protect the top of the head. */
.orbit-portrait.about-photo { top:64px; height:calc(100% - 64px); }
.orbit-portrait.about-photo img { object-position:center top; filter:sepia(.48) saturate(1.12) hue-rotate(-8deg) brightness(1.07); }
.lotto-case .case-step-content .lotto-research-findings { list-style:disc outside; color:var(--body-color); font-weight:400; }
.lotto-case .case-step-content .lotto-research-findings li { display:list-item; font-family:inherit; font-size:18px; font-weight:400; line-height:1.7; color:inherit; padding:0; }
.lotto-case .case-step-content .lotto-research-findings li::marker { color:currentColor; font-size:1em; font-weight:400; }
.lotto-case .case-step-content .lotto-research-findings li::before { content:none; }
@media(max-width:1000px) { .orbit-portrait.about-photo { top:48px; height:calc(100% - 48px); } }

/* Cropped source documents remain fully visible, with matching top alignment. */
.aplisens-case .audit-document-grid { gap:24px; align-items:start; }
.aplisens-case .audit-document-grid .case-figure { margin:0; min-width:0; }
.aplisens-case .audit-document-grid .case-figure a,
.aplisens-case .audit-evidence-wide a { display:block; height:auto; overflow:hidden; border-radius:16px; background:#fff; }
.aplisens-case .audit-document-grid img,
.aplisens-case .audit-evidence-wide img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; border-radius:16px; }
.aplisens-case .audit-evidence-wide { max-width:640px; margin:24px 0 32px; }
@media(max-width:700px) { .aplisens-case .audit-document-grid { grid-template-columns:minmax(0,1fr); gap:32px; } }

/* Near-white logo surfaces, shared by project cards and case headers. */
#project-grid .project-card > .tubi-card-logo,
#project-view .tubi-cover-logo,
#project-view .lotto-hero-logo,
#project-view .aplisens-logo-frame,
#project-view .case-ending > .tubi-logo { background:#fffdfa; }

/* A quiet instruction over the lower portrait, without blocking banner interaction. */
.panorama-hint {
  position:absolute; left:44%; bottom:56px; z-index:12;
  transform:translateX(-50%) rotate(-12deg); transform-origin:center;
  padding:8px 16px; border-radius:8px;
  background:#ffd9a3; color:#40210e;
  font:500 14px/1.5 Poppins,sans-serif;
  white-space:nowrap; pointer-events:none;
  box-shadow:0 8px 16px #1a0d0640,0 2px 4px #1a0d0626;
}
@media(max-width:700px) {
  .panorama-hint { left:46%; bottom:48px; }
}

/* Compact portraits: keep every greeting above the cutout and inside the frame. */
@media(max-width:1000px) {
  #home-view .portrait-frame { overflow:visible; }
  #home-view .portrait-greeting,
  #home-view .portrait-intro,
  #home-view .portrait-name {
    z-index:6; white-space:nowrap; max-width:none;
  }
  #home-view .portrait-greeting,
  #home-view .portrait-frame.is-tilting .portrait-greeting,
  #home-view .portrait-intro,
  #home-view .portrait-frame.is-tilting .portrait-intro { transform:translateZ(64px); }
  #home-view .portrait-name,
  #home-view .portrait-frame.is-tilting .portrait-name { transform:translateX(-50%) translateZ(72px); }
  #home-view .portrait-greeting { left:0; top:16%; }
  #home-view .portrait-intro { right:0; left:auto; top:58%; }
  #home-view .portrait-name { left:50%; }
}
@media(max-width:700px) {
  #home-view .portrait-greeting,
  #home-view .portrait-intro,
  #home-view .portrait-name { font-size:14px; line-height:1.2; padding:8px; }
  #home-view .portrait-greeting { top:8%; }
  #home-view .portrait-intro { top:58%; }
  #home-view .portrait-name { bottom:-16px; }
}

/* Compact mobile display case: crop the portrait rather than shrinking its proportions. */
@media(max-width:700px) {
  .panorama-block { height:var(--compact-panorama-height,280px); overflow:hidden; }
  .orbit-portrait.about-photo {
    mask-image:linear-gradient(to bottom,#000 0%,#000 calc(var(--compact-panorama-height,280px) - 96px),transparent calc(var(--compact-panorama-height,280px) - 48px));
  }
  .panorama-hint { top:calc(var(--compact-panorama-height,280px) - 64px); bottom:auto; }
  .panorama-pause { bottom:8px; }
}

.portrait-mobile-greeting { display:none; }
@media(max-width:700px) {
  #home-view .portrait-greeting,
  #home-view .portrait-intro,
  #home-view .portrait-name { display:none; }
  #home-view .portrait-mobile-greeting {
    display:block; position:absolute; left:auto; right:-8px; bottom:-16px; z-index:6;
    width:max-content; max-width:none; box-sizing:border-box;
    padding:8px; border-radius:8px; background:#8c430e; color:#fff0d6;
    font:500 14px/1.4 Poppins,sans-serif; text-align:center; white-space:nowrap;
    transform:translateZ(72px);
    box-shadow:0 8px 16px #1a0d0633;
  }
  .orbit-portrait.about-photo {
    top:8px;
    mask-image:linear-gradient(to bottom,#000 0%,#000 calc(var(--compact-panorama-height,280px) - 56px),transparent calc(var(--compact-panorama-height,280px) - 8px));
  }
}

/* Mobile case studies: one set of gutters, with a dedicated rail on the right. */
@media(max-width:700px) {
  #project-view .tubi-case > .wrap {
    width:100%; max-width:none; margin-inline:0; padding-left:16px; padding-right:40px;
    box-sizing:border-box;
  }
  #project-view .case-stage-label {
    left:auto; right:8px; top:50%; width:24px; max-width:24px;
    font-size:20px; line-height:1.2; writing-mode:vertical-rl;
    transform:translateY(-50%); white-space:nowrap;
  }
  #project-view .case-step { grid-template-columns:32px minmax(0,1fr); gap:16px; }
  #project-view .case-node { width:32px; height:32px; }
  #project-view .case-timeline::before { left:15px; }
  #project-view .case-step-content > h2 { min-height:32px; }
  #project-view .case-step-content,
  #project-view .case-summary,
  #project-view .audit-intro { min-width:0; overflow-wrap:break-word; }
  #project-view .case-step-content blockquote,
  #project-view .case-step-content .case-takeaway,
  #project-view .audit-method > div { padding:16px; }
}

/* Mobile case studies share equal screen gutters; stage labels are desktop-only. */
@media(max-width:700px) {
  #project-view .tubi-case > .wrap { padding-inline:16px; }
  #project-view .case-stage-label { display:none; }
  #project-view .case-step { display:block; }
  #project-view .case-step > .case-node { position:absolute; left:0; top:0; }
  #project-view .case-step-content > h2 { padding-left:48px; min-height:32px; }
  #project-view .case-step-content { width:100%; }
  #project-view .case-timeline::before { display:none; }
}