/* Shared responsive composition. Existing artwork and case-demo animation stay intact. */
:root {
  --page-gutter: clamp(20px, 5vw, 240px);
  --content-width: calc(100% - 2 * var(--page-gutter));
  --spyker-ease: cubic-bezier(.625, .05, 0, 1);
  --body-size: clamp(18px, calc(.94 * var(--fluid-unit)), 28px);
  --case-content-width: 1000px;
  --fluid-unit: min(1vw, 15.111111px);
  --section-title-size: clamp(28px, calc(2 * var(--fluid-unit)), 64px);
  --subtitle-size: clamp(22px, calc(1.35 * var(--fluid-unit)), 40px);
  --section-heading-gap: 50px;
  --content-leading: 1.4;
  --ui-size: 18px;
}
body { font-size: var(--body-size); }
.container, .header-shell .header, .case-footer { width: var(--content-width); max-width: none; }
.header-shell .header { gap: 24px; }
.header-shell .languages > span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 10px; }
.languages [aria-current] { border-bottom: 2px solid var(--accent); border-radius: 12px; }
.language-pending { color: var(--muted); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: var(--page-gutter); padding: 12px 20px; background: white; border-radius: 12px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:where(a, button, [tabindex]):focus-visible { outline: 3px solid #9e772b; outline-offset: 5px; }
:where(button, a) { touch-action: manipulation; }
.hero { height: auto; padding-block: clamp(40px, calc(4 * var(--fluid-unit)), 100px) calc(clamp(80px, calc(7 * var(--fluid-unit)), 220px) + 20px); }
.hero h1 { font-size: clamp(40px, calc(10.9 * var(--fluid-unit)), 420px); line-height: 1.15; white-space: nowrap; }
.introduction { width: min(58%, 1320px); margin-left: auto; gap: clamp(20px, calc(2 * var(--fluid-unit)), 64px); margin-top: clamp(32px, calc(3 * var(--fluid-unit)), 100px); }
.introduction h2 { font-size: clamp(28px, calc(2.15 * var(--fluid-unit)), 64px); }
.introduction-copy { gap: clamp(16px, calc(1.4 * var(--fluid-unit)), 40px); }
.introduction-copy > p, .intro-footer > p { max-width: 55ch; line-height: 1.4; }
.portrait { width: clamp(170px, calc(11 * var(--fluid-unit)), 340px); height: auto; aspect-ratio: 170 / 220; align-self: flex-start; }
.portrait-image { width: 109.275%; height: 113.15%; left: -7.6235%; top: -11.327%; }
.portrait-detail { left: 94.6%; top: 85.86%; }
/* Let the portrait grow leftward without narrowing or rewrapping the copy. */
@media (min-width: 2560px) {
  .introduction { width: max-content; }
  .introduction-copy { flex: none; align-self: flex-start; width: calc(1360px * .58 - 170px - clamp(20px, calc(2 * var(--fluid-unit)), 64px)); }
  .portrait { width: var(--portrait-wide-width, 170px); }
}
.intro-footer { align-items: last baseline; }
.local-time { font-size: clamp(16px, calc(.94 * var(--fluid-unit)), 28px); }
.section > h2, .section > .container > h2, .study-next h2 { font-size: var(--section-title-size); line-height: 1.2; }
.case-card { height: clamp(650px, calc(43 * var(--fluid-unit)), 1380px); --phone-top: clamp(230px, calc(14.5 * var(--fluid-unit)), 550px); --phone-right: clamp(32px, calc(3 * var(--fluid-unit)), 110px); }
.case-card .phone { width: clamp(235.563px, calc(17 * var(--fluid-unit)), 580px); height: auto; aspect-ratio: 235.563 / 480; }
.case-card .phone-screen { width: 90.494%; height: 96.563%; left: 4.619%; top: 1.908%; }
.case-card .phone-frame { width: 100%; height: 100%; }
.case-card .phone-island { left: 35.358%; top: 3.221%; width: 28.919%; height: 4.115%; }
.case-card .phone-island img { left: 77.728%; top: 24.658%; width: 14.286%; height: 49.276%; }
/* Cover both bezel apertures, including antialiased screen edges. */
.case-card .phone-dashboard .phone-screen { width: 92.2%; height: 97.65%; left: 3.6%; top: 1.35%; }
.case-copy, .case-voa .case-copy, .case-dashboard .case-copy { left: clamp(24px, calc(2.1 * var(--fluid-unit)), 80px); top: clamp(24px, calc(2.1 * var(--fluid-unit)), 80px); width: min(80%, 35ch); max-width: calc(100% - 2 * clamp(24px, calc(2.1 * var(--fluid-unit)), 80px)); }
.case-copy h3 { font-size: clamp(22px, calc(1.55 * var(--fluid-unit)), 48px); line-height: 1.2; }
.chips { width: min(62%, 38ch); gap: clamp(10px, calc(.8 * var(--fluid-unit)), 24px); }
.chips li, .chip, .study-tags li { white-space: normal; }
.case-note { left: clamp(24px, calc(2.1 * var(--fluid-unit)), 80px); bottom: clamp(24px, calc(2.1 * var(--fluid-unit)), 80px); }
[data-project-preview] { cursor: default; }
.project-preview-trigger {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.project-preview-trigger:focus-visible { outline: 3px solid #1c1b1b; outline-offset: -4px; }
.project-preview-message {
  position: absolute;
  z-index: 9;
  inset-inline-start: 16px;
  inset-block-end: 16px;
  max-inline-size: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: 12px;
  background: #fff;
  color: #1c1b1b;
  font: 400 16px/1.25 Archivo, 'Noto Sans', sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms cubic-bezier(.23,1,.32,1);
}
.case-card > .project-preview-message {
  inset-inline-start: max(16px, 6cqw);
  inset-block-end: calc(max(16px, 6cqw) + 24px);
}
.next-case > .project-preview-message { inset-block-end: 122px; }
.project-preview-cursor {
  position: fixed;
  z-index: 90;
  inset: 0 auto auto 0;
  box-sizing: border-box;
  max-inline-size: calc(100% - 16px);
}
[data-preview-active] > .project-preview-message,
.project-preview-cursor[data-preview-active] { opacity: 1; }
.project-preview-status {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
@media (max-width: 700px) {
  .next-case > .project-preview-message { inset-block-end: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-preview-message { transition: none; }
}
.project-card { height: auto; aspect-ratio: 392 / 270; }
.project-caption { gap: 14px; top: clamp(20px, calc(2 * var(--fluid-unit)), 60px); }
.project-caption h3 { font-size: clamp(22px, calc(1.6 * var(--fluid-unit)), 48px); }
.project-card > img { transition: transform 300ms var(--motion-easing); }
.project-card:hover > img, .project-card:focus-visible > img { transform: translateY(42%); }
.experience { padding-block: clamp(64px, calc(7.3 * var(--fluid-unit)), 240px); }
.experience-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, calc(6 * var(--fluid-unit)), 180px); }
.experience-meta, .experience-copy { width: auto; }
.experience-copy { max-width: 70ch; line-height: 1.4; }
.experience-copy h3, .about-card h3 { font-size: var(--subtitle-size); }
.experience-divider { height: 1px; overflow: hidden; }
.about-grid { align-items: stretch; }
.about-photo { height: auto; aspect-ratio: 1; }
.about-card p { line-height: 1.4; }
.contact { width: calc(100% - var(--page-gutter)); padding: clamp(64px, calc(7.3 * var(--fluid-unit)), 240px) calc(var(--page-gutter) / 2); }
.contact-copy { width: 100%; max-width: none; padding-inline-end: clamp(120px, calc(20 * var(--fluid-unit)), 460px); }
.contact-copy h2 { max-width: none; font-size: clamp(28px, calc(2.2 * var(--fluid-unit)), 72px); }
.contact-copy p { max-width: none; line-height: 1.4; }
.contact-arrow { left: auto; right: 6%; width: clamp(120px, calc(16 * var(--fluid-unit)), 460px); top: 10%; height: auto; transform: none; }
.footer { flex-direction: row; align-items: center; justify-content: space-between; }
.footer nav, .case-footer nav { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.footer nav a, .case-footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
.study-padding { padding-inline: max(var(--page-gutter), calc((100% - var(--case-content-width)) / 2)); }
.study { line-height: var(--content-leading); }
.study h1, .study h2 { font-size: clamp(28px, calc(2.2 * var(--fluid-unit)), 64px); line-height: 1.2; }
.study h3 { font-size: var(--subtitle-size); line-height: 1.2; }
.study h2, .study .study-summary h2 { font-size: var(--section-title-size); }
.study-hero h1 { max-width: 38ch; }
.study-lead { max-width: 60ch; line-height: var(--content-leading); }
.study-about-intro > h3, .study-about-intro > p { max-width: 62ch; }
.study-facts > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.study-facts-wide > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-facts dd { max-width: 70ch; }
.study-about { min-height: 0; }
.study-outcomes p, .study-summary p, .study-comparison figcaption, .nda-card figcaption { line-height: var(--content-leading); }
.study-outcomes p, .study-finish > p, .study-research-part > p, .study-summary p { max-width: 70ch; }
.mbulak-cover-image { max-width: none; }
.study-summary { padding-inline: max(var(--page-gutter), calc((100% - var(--case-content-width)) / 2)); background: var(--accent); }
.study-summary-inner { max-width: none; padding: 70px 0 80px; background: transparent; border-radius: 0; }
.study .study-summary h2 { font-size: var(--section-title-size); line-height: 1.2; }
.study-next { --rail-inset: 0px; }
.study-next-track { margin-inline: 0; padding-inline: 4px; scroll-padding-inline: 4px; }
.study-next .next-case { flex-basis: calc((100% - (var(--rail-columns) - 1) * var(--rail-gap)) / var(--rail-columns)); }
.next-case { position: relative; }
.next-case-caption > p { font-size: var(--body-size); }
.study-next-arrow { min-width: 44px; min-height: 44px; }
.study-next-arrow img { width: 24px; height: 24px; }
/* Dialog follows the supplied reference, with the portfolio's existing type and color. */
.contact-dialog { position: fixed; margin: auto; box-sizing: border-box; width: min(534px, calc(100% - 16px)); max-height: calc(100dvh - 16px); padding: 44px; border: 0; border-radius: 24px; background: #fff; color: var(--ink); overflow-y: auto; }
.contact-dialog::backdrop { background: rgba(28,27,27,.35); backdrop-filter: none; }
.contact-dialog h2 { margin: 0 32px 24px; text-align: center; font-size: 22px; color: #6c6963; }
.contact-dialog-close { position: absolute; top: 28px; right: 28px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; background: transparent; }
.contact-dialog-close:hover { background: transparent; opacity: .65; }
.contact-dialog-close:focus-visible { outline: none; }
.contact-dialog-close:focus-visible img { transform: scale(1.15); opacity: .7; }
.contact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.contact-list a { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 16px; padding: 8px 0; align-items: center; border-radius: 12px; font-size: var(--ui-size); line-height: 1.4; }
.contact-list a > span:not(.contact-icon) { display: grid; gap: 4px; overflow-wrap: anywhere; }
.contact-label { color: #6c6963; font-size: var(--body-size); }
.contact-icon {
  width: 24px;
  height: 24px;
  color: #737373;
  background-color: currentColor;
  mask: var(--contact-icon) center / contain no-repeat;
}
.contact-icon-envelope-simple { --contact-icon: url('../assets/icons/envelope-simple.svg'); }
.contact-icon-telegram-logo { --contact-icon: url('../assets/icons/telegram-logo.svg'); }
.contact-icon-linkedin-logo { --contact-icon: url('../assets/icons/linkedin-logo.svg'); }
.contact-list a:is(:hover, :focus-visible) { color: #9e772b; }
.contact-list a:is(:hover, :focus-visible) .contact-icon { color: inherit; }
html:has(.contact-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
@media (min-width: 981px) {
  .projects, .experience, .about, .contact, .footer { margin-top: clamp(100px, calc(7.3 * var(--fluid-unit)), 240px); }
}
@media (max-width: 1100px) {
  .header-shell .navigation { gap: 24px; }
  .header-shell .header-actions { gap: 24px; }
  .case-card { height: 620px; --phone-top: 280px; --phone-right: 24px; --phone-scale: 1; }
  .case-card .phone { width: 235.563px; }
  .case-copy h3 { font-size: 22px; }
  .case-copy { gap: 16px; }
  .chips { width: 100%; gap: 10px; }
  .chips li { font-size: 14px; padding: 7px 12px; }
}
@media (max-width: 900px) {
  .introduction { width: 85%; }
  .intro-footer { flex-direction: column; align-items: flex-start; }
  .local-time { position: static; width: auto; order: 1; transform: none; margin-top: 24px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { aspect-ratio: 2 / 1; }
  .project-card > img { width: 70%; left: 15%; }
  .project-caption { top: 24px; }
  .about-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-copy { max-width: none; }
  .contact-arrow { right: 3%; width: 110px; top: 15%; }
  .study-facts > div, .study-facts-wide > div { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
}
@media (max-width: 700px) {
  :root { --page-gutter: 20px; }
  :root { --body-size: 16px; --ui-size: 14px; }
  body { font-size: var(--body-size); }
  .header-shell .header { height: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; padding-block: 10px; gap: 4px 12px; }
  .header-brand { grid-column: 1; grid-row: 1; font-size: 18px; }
  .header-shell .header-actions { display: contents; }
  .header-shell .languages { grid-column: 2; grid-row: 1; justify-self: end; gap: 0; font-size: 14px; }
  .header-shell .navigation { grid-column: 1; grid-row: 2; gap: clamp(10px, calc(2.4 * var(--fluid-unit)), 24px); justify-content: flex-start; }
  .header-shell .navigation a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .header-shell .button { grid-column: 2; grid-row: 2; min-height: 44px; padding-inline: 12px; font-size: 14px; }
  .hero h1 { font-size: calc(10.65 * var(--fluid-unit)); }
  .introduction { width: 100%; flex-direction: column; gap: 24px; }
  .introduction h2 { font-size: 28px; }
  .portrait { width: 170px; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card { height: 620px; --phone-top: 285px; --phone-right: 24px; --phone-scale: 1; }
  .case-copy h3 { font-size: 22px; }
  .case-copy { left: 24px; top: 24px; max-width: calc(100% - 48px); width: auto; }
  .chips { width: 100%; }
  .project-card { aspect-ratio: 392 / 320; }
  .project-card > img { width: 100%; left: 0; }
  .experience-row { grid-template-columns: 1fr; gap: 24px; }
  .experience-meta, .experience-copy { width: 100%; }
  .experience-copy h3 { font-size: 24px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-card h3 { font-size: 24px; }
  .contact { width: var(--content-width); padding: 64px 24px; }
  .contact-copy { padding-inline-end: 0; }
  .contact-copy, .contact-copy h2 { max-width: 100%; }
  .contact-arrow { display: none; }
  .footer { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer nav, .case-footer nav { gap: 8px 24px; }
  .study-facts > div, .study-facts-wide > div { grid-template-columns: 1fr; }
  .study-outcomes { grid-template-columns: 1fr; }
  .study-about-intro { grid-template-columns: 1fr; }
  .study-summary-inner { padding: 48px 0; }
  .contact-dialog { padding: 60px 36px 44px; border-radius: 24px; }
  .contact-dialog h2 { margin: 0 0 24px; }
  .contact-list { gap: 16px; }
  .contact-list a { grid-template-columns: 24px minmax(0,1fr); gap: 16px; font-size: var(--ui-size); }
  .next-case-caption > p { font-size: 16px; }
}
@media (max-width: 360px) {
  .header-shell .navigation { grid-column: 1 / -1; justify-content: space-between; }
  .header-shell .button { grid-column: 1 / -1; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-scroll-reveal] { opacity: 1 !important; transform: none !important; }
}
/* Long Russian NBSP groups must not widen a narrow grid track. */
.experience-row > *, .study-facts > div > *, .study-about-intro > * { min-width: 0; }
p, dd, h1, h2, h3 { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media(max-width:700px) { .experience-row { grid-template-columns: minmax(0,1fr); } }
/* Keep the original status sequence fully inside its panel on narrow phones. */
.study-status-demo { container-type: inline-size; }
@media(max-width:700px) { .status-demo-view { --phone-width: min(236px, calc(100cqw / 1.1)); } }

/* Home grows to a 1360px content frame; case and shared chrome rules are separate. */
.home-page { --fluid-unit: min(1vw, 15.111111px); }
@media (min-width: 701px) {
  /* Resolve body type beside the home scale instead of inheriting the root's uncapped value. */
  .home-page { --body-size: clamp(18px, calc(.94 * var(--fluid-unit)), 28px); }
}
.home-page main .container, .home-page main .contact { max-width: 1360px; }
.home-page main .contact { width: var(--content-width); }
.home-page .contact { padding-inline: clamp(24px, calc(4 * var(--fluid-unit)), 64px); }
.home-page .footer { padding-bottom: 24px; }
.footer { display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; }
.footer .footer-updated { grid-column: 1; }
.footer .footer-zone { grid-column: 2; grid-row: 2; justify-self: end; }
.case-footer { padding-bottom: 24px; }
.study-project { margin-bottom: 60px; }
.study-cover, .mbulak-page .study-cover { padding-top: 60px; }
.mbulak-page .study-summary { padding-bottom: 0; }
.mbulak-page .study-summary-inner { background: transparent; border-radius: 0; }
@media(max-width:700px) {
 .study-project { margin-bottom: 32px; }
 .study-cover, .mbulak-page .study-cover { padding-top: 32px; }
 .mbulak-page .study-summary-inner { padding-inline: 0; }
 .footer { grid-template-columns: 1fr; }
 .footer .footer-zone { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* These paddings provide resolved CSS geometry to the retained phone transition. */
.case-card { padding-top: var(--phone-top); padding-right: var(--phone-right); }
.header-shell .languages > a { display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:10px; color:var(--ui-ink); }
.header-shell .languages > a:hover { color:var(--ui-hover); }
.case-footer { display:grid; grid-template-columns:1fr auto; gap:12px 24px; }
.case-footer .footer-updated { grid-column:1; }
.case-footer .footer-zone { grid-column:2; grid-row:2; justify-self:end; }
@media(max-width:700px) {
 .header-shell .languages > a { padding:7px 8px; font-size:14px; }
 .case-footer { grid-template-columns:1fr; }
 .case-footer .footer-zone { grid-column:1; grid-row:auto; justify-self:start; }
}

/* Cards use their available inner width rather than fixed text measures. */
.case-card .case-copy { width:auto; right:clamp(24px,calc(2.1 * var(--fluid-unit)),80px); max-width:none; }
.case-card .chips { width:100%; }
.case-card .chips li { white-space:nowrap; }
.back-top { border:1px solid #f5f3ef; }
.footer .footer-updated,.footer .footer-zone,.case-footer .footer-updated,.case-footer .footer-zone { font-family:Archivo,'Noto Sans',sans-serif; font-size:var(--body-size); color:#948c7e; }
/* The reference reveals a centered 80% surface; text never inherits its scale. */
.surface-panel { position:relative; isolation:isolate; background:transparent; }
.surface-backdrop { position:absolute; inset:0; z-index:-1; background:#f8d185; transform-origin:center; pointer-events:none; }
/* Uniform card subdivisions, with the original off-edge preview composition. */
.study-next-scroll { background:#f5f3ef; }
.study-next { --rail-card-width:352px; --rail-gap:24px; }
.study-next .study-next-track { margin:0 calc(-1 * var(--rail-bleed,var(--page-gutter))); padding:4px var(--rail-bleed,var(--page-gutter)); scroll-padding-inline:0; scroll-snap-type:none; }
.study-next .next-case { flex:0 0 var(--rail-card-width); height:352px; aspect-ratio:auto; grid-template-rows:246px 106px; }
.study-next .next-case-caption { padding:12px 20px; gap:8px; }
.study-next .next-case-caption h3 { font-size:24px; line-height:29px; }
.study-next .next-case-caption > p { font-size:18px; line-height:22px; }
.study-next.is-scroll-pinned { position:sticky; }
.study-next.is-scroll-pinned .study-next-track { scroll-behavior:auto; overflow-x:auto; }
.study-next .study-next-track.is-dragging, .study-next .study-next-track.is-dragging * { cursor:grabbing; }
.home-page { overflow-x:clip; }
.home-page .hero h1 { position:relative; z-index:21; width:max-content; transform-origin:left top; }
.home-page.signature-motion .header-brand { visibility:hidden; }
.home-page.signature-arrived .header-brand { visibility:visible; }
@media(max-width:700px) {
 .study-next { --rail-card-width:280px; --rail-gap:16px; }
 .study-next .next-case { height:320px; grid-template-rows:210px 110px; }
 .study-next .next-case-caption h3 { font-size:22px; line-height:26px; }
 .study-next .next-case-caption > p { font-size:16px; line-height:22px; }
}
@media(prefers-reduced-motion:reduce) {
 .surface-backdrop { transform:none!important; }
 .home-page .hero h1 { transform:none!important; }
}

.intro-clip { overflow:clip; }
.hero-name-content,.intro-slide-content { display:block; }

/* The supplied card composition scales from each card, independently of the viewport. */
.case-card { container-type:inline-size; height:auto; min-height:360px; aspect-ratio:506 / 476; padding:0; --phone-scale:1.18864; }
.case-card .case-copy { left:max(16px,6cqw); right:max(16px,6cqw); top:max(16px,6cqw); gap:max(12px,3.6cqw); }
.case-card .case-copy h3 { max-width:80%; font-size:clamp(16px,3.56cqw,24px); line-height:1.2; }
.case-card .chips { display:grid; grid-template-columns:max-content max-content; justify-content:start; gap:max(8px,2.2cqw); width:100%; }
.case-card .chips li { font-size:clamp(12px,2.37cqw,16px); padding:max(5px,1.2cqw) max(10px,2.2cqw); justify-self:start; }
.case-card .chips li:nth-child(n+3) { grid-column:1 / -1; }
.case-dashboard .chips li:nth-child(3) { grid-column:1; grid-row:2; }
.case-dashboard .chips li:nth-child(4) { grid-column:2; grid-row:2; }
.case-card .phone { width:var(--phone-width,34cqw); }
.case-card .case-note { left:max(16px,6cqw); bottom:max(16px,6cqw); font-size:clamp(12px,2.37cqw,16px); }
.home-page .contact { background:transparent; isolation:isolate; }
.contact-backdrop { position:absolute; inset:0; z-index:-1; background:#fff; border-radius:inherit; pointer-events:none; transform-origin:center; }
@media(prefers-reduced-motion:reduce) {
 .about-card,.contact-backdrop { transform:none!important; }
}

/* Independent tag rows retain natural spacing despite different label lengths. */
.case-card .chips { grid-template-columns:minmax(0,1fr); }
.case-card .chips li { grid-column:1; }
.case-card .chips li:nth-child(1),.case-card .chips li:nth-child(2) { grid-row:1; }
.case-card .chips li:nth-child(2) { margin-left:calc(var(--chip-first-width,48px) + max(8px,2.2cqw)); }
.case-card .chips li:nth-child(3) { grid-row:2; grid-column:1; }
.case-card .chips li:nth-child(4) { grid-row:3; grid-column:1; }
.case-dashboard .chips li:nth-child(4) { grid-row:2; margin-left:calc(var(--chip-third-width,90px) + max(8px,2.2cqw)); }


@media (width > 700px) and (hover: hover) {
 .case-card { --phone-hover-lift: var(--phone-safe-lift, 0px); }
}
.contact-arrow path {
 stroke-dasharray: 1;
 stroke-dashoffset: var(--contact-arrow-offset, 0);
}

/* Give the English introduction a shorter reading measure at desktop widths. */
@media (width > 980px) {
  :lang(en) .introduction-copy { max-width: 450px; }
  :lang(en) .introduction-copy > :is(h2, p) { text-wrap: balance; }
}

/* Maria's main 960 reference: one proportional text scale down to a 15px mobile body. */
@media (max-width: 960px) {
  :root, .home-page {
    --page-gutter: clamp(20px, 2.291667vw, 22px);
    --body-size: 18px;
    --ui-size: var(--body-size);
    --section-title-size: clamp(28px, calc(-4px + 4.166667vw), 36px);
    --subtitle-size: clamp(22px, calc(14px + 1.041667vw), 24px);
    --intro-title-size: clamp(28px, calc(12px + 2.083333vw), 32px);
    --compact-gap: clamp(64px, 10.416667vw, 100px);
    --section-heading-gap: clamp(28px, 5.208333vw, 50px);
    --content-leading: 1.2;
  }
  .header-shell .header { min-height: 70px; padding-block: 12px; font-size: var(--ui-size); }
  .header-brand { font-size: calc(var(--ui-size) * 19 / 18); line-height: 1.2; }
  .header-shell .navigation a, .header-shell .button,
  .header-shell .languages > a, .button, .contact-pill,
  .footer nav a, .case-footer nav a { font-size: var(--ui-size); line-height: 1.25; }
  .header-shell .languages > a { padding-inline: 8px; }
  .header-shell .header-actions { gap: 20px; }
  .hero { padding-block: 40px var(--compact-gap); }
  .hero h1 { font-size: clamp(84px, calc(20px + 8.333333vw), 100px); line-height: 1.2; }
  .introduction { width: min(100%, clamp(682px, calc(892px - 21.875vw), 724px)); margin-top: clamp(28px, calc(20px + 1.041667vw), 30px); gap: 20px; }
  .introduction h2 { font-size: var(--intro-title-size); }
  .introduction-copy { gap: 20px; }
  .introduction-copy > p, .intro-footer > p { line-height: 1.2; }
  .intro-footer { flex-direction: row; align-items: last baseline; }
  .local-time { position: absolute; left: 0; top: auto; bottom: var(--compact-gap); width: auto; order: -1; margin-top: 0; transform: none; font-size: var(--body-size); }
  .portrait { width: clamp(146px, calc(98px + 6.25vw), 158px); }
  .section > h2, .section > .container > h2, .contact-copy h2,
  .study h1, .study h2, .study .study-summary h2, .study-next h2 { font-size: var(--section-title-size); line-height: 1.2; }
  .section > h2, .section > .container > h2 { margin-bottom: clamp(28px, 5.208333vw, 50px); }
  .projects, .experience, .about, .contact, .footer { margin-top: var(--compact-gap); }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .case-card { aspect-ratio: 448 / 486.9565; min-height: 0; }
  .case-card .case-copy h3 { font-size: var(--subtitle-size); max-width: 100%; }
  .case-card .chips li, .case-card .case-note,
  .project-caption .chip, .study-tags li { font-size: var(--body-size); }
  .case-card .chips li { white-space: normal; }
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .project-card { aspect-ratio: 292 / 254; }
  .project-caption { top: 20px; gap: 12px; }
  .project-caption h3, .experience-copy h3, .about-card h3,
  .study h3, .study-project > p:first-child,
  .study-next .next-case-caption h3 { font-size: var(--subtitle-size); line-height: 1.2; }
  .project-card > img { width: 100%; left: 0; }
  .project-card:is(:hover, :focus-visible) > img { transform: translateY(42%); }
  .experience { padding-block: clamp(64px, 9.375vw, 90px); }
  .experience-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 20px; }
  .experience-copy { line-height: 1.2; }
  .about-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(255px, calc(167px + 11.458333vw), 277px);
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--page-gutter);
    margin-inline: calc(-1 * var(--page-gutter));
    padding: 4px var(--page-gutter) 12px;
  }
  .about-card { scroll-snap-align: start; }
  .about-card p { line-height: 1.2; }
  .home-page main .contact { width: 100%; padding: clamp(64px, 9.375vw, 90px) var(--page-gutter); }
  .contact-copy { padding-inline-end: 24%; }
  .contact-copy p { line-height: 1.2; }
  .contact-arrow { display: block; right: 4%; width: 22%; top: 30%; }
  .study-next .next-case-caption > p, .project-preview-message { font-size: var(--body-size); line-height: 1.2; }
  .contact-dialog h2 { font-size: calc(var(--body-size) * 11 / 9); }
  .contact-list a { font-size: var(--ui-size); }
  .nda-card figcaption { font-size: var(--body-size); }
}
@media (min-width: 901px) and (max-width: 960px) {
  .header-shell .header { display: flex; height: 70px; gap: 20px; }
  .header-shell .navigation { gap: 24px; }
  .header-shell .button { padding-inline: 24px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .header-shell .header { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; }
  .header-shell .header-actions { display: flex; justify-self: end; }
  .header-shell .languages { display: flex; }
  .header-shell .navigation { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 24px; }
  .introduction { flex-direction: row; }
  .hero { padding-bottom: calc(var(--compact-gap) + 44px); }
}
/* The 768 composition applies between 480 and 960; 960 remains its own anchor. */
.navigation-contact { display: none; }
.navigation-toggle { display: none; }
.navigation-toggle[hidden] { display: none; }
@media (max-width: 959.98px) {
  :root, .home-page {
    --page-gutter: clamp(20px, 2.864583vw, 22px);
    --body-size: clamp(15px, calc(10px + 1.041667vw), 18px);
    --section-title-size: calc(var(--body-size) * 28 / 18);
    --subtitle-size: calc(var(--body-size) * 22 / 18);
    --intro-title-size: var(--section-title-size);
    --compact-gap: calc(var(--body-size) * 80 / 18);
    --rail-card-gap: calc(var(--body-size) * 20 / 18);
  }
  html { scroll-padding-top: 94px; }
  .header-shell .header { display: flex; flex-wrap: wrap; height: auto; min-height: 70px; gap: 0 20px; }
  .header-shell .header-actions { display: flex; align-items: center; gap: 20px; }
  .header-shell .languages { display: flex; }
  .header-shell .languages > a { padding: 10px; }
  .header-shell .button { padding-inline: 32px; }
  .header-shell .navigation { flex-basis: 100%; justify-content: space-between; gap: 12px; }
  .header-shell:has(.navigation[data-open]) { z-index: 30; }
  .header-shell.menu-ready .navigation-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; margin-left: 8px; background: transparent; }
  .header-shell.menu-ready .navigation:not([data-open]) { display: none; }
  .header-shell.menu-ready .navigation[data-open] { position: absolute; top: calc(100% + 8px); left: auto; right: var(--page-gutter); display: flex; flex-direction: column; align-items: stretch; width: min(280px, calc(100% - 2 * var(--page-gutter))); max-height: calc(100dvh - 94px); overflow-y: auto; padding: 16px; gap: 4px; border: 1px solid #e5e1d9; border-radius: 20px; background: var(--ui-page); }
  .header-shell.menu-ready .navigation a { display: flex; align-items: center; min-height: 44px; padding-inline: 16px; }
  .header-shell.menu-ready .navigation .navigation-contact { display: none; }
  .study-page .header-shell.menu-ready .navigation[data-open] { background: #fff; }
  .header-shell.menu-ready .navigation-toggle[aria-expanded="true"] { background: var(--accent); border-radius: 12px; }
  .hero { padding-block: calc(var(--body-size) * 30 / 18) var(--compact-gap); }
  .hero h1 { font-size: 10.9375vw; line-height: 1.2; }
  .introduction { width: 100%; max-width: none; margin-top: calc(var(--body-size) * 28 / 18); gap: var(--rail-card-gap); flex-direction: row; }
  .introduction-copy { gap: calc(var(--body-size) * 16 / 18); }
  .portrait { width: calc(var(--body-size) * 146 / 18); aspect-ratio: 146 / 188; }
  .portrait-image { width: 112.2683%; height: 116.8307%; left: -7.8339%; top: -11.6954%; }
  .portrait-detail { left: 97.226%; top: 88.6625%; }
  .local-time { display: none; }
  .section > h2, .section > .container > h2 { margin-bottom: calc(var(--body-size) * 40 / 18); }
  .case-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--rail-card-gap); }
  .case-card { aspect-ratio: 352 / 400; min-height: 0; border-radius: calc(var(--body-size) * 15 / 18); }
  .project-grid, .about-grid { grid-template-columns: none; grid-auto-flow: column; gap: var(--rail-card-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: none; scroll-padding-inline: var(--page-gutter); margin-inline: calc(-1 * var(--page-gutter)); padding: 4px var(--page-gutter) 12px; }
  .project-grid { grid-auto-columns: calc(var(--body-size) * 286 / 18); }
  .project-card { aspect-ratio: 286 / 234; scroll-snap-align: start; }
  .home-page .project-card .project-caption { opacity: 1; top: calc(var(--body-size) * 16 / 18); }
  .project-caption .chip { display: none; }
  .home-page .project-card > img, .home-page .project-card:is(:hover, :focus-visible) > img { transform: none; }
  .about-grid { grid-auto-columns: calc(var(--body-size) * 320 / 18); grid-auto-rows: minmax(calc(var(--body-size) * 436 / 18), auto); }
  .about-photo { aspect-ratio: 247 / 230; }
  .experience { padding-block: calc(var(--body-size) * 90 / 18); }
  .experience-row { grid-template-columns: minmax(0, 228fr) minmax(0, 476fr); gap: var(--rail-card-gap); }
  .experience-meta { gap: calc(var(--body-size) * 15 / 18); }
  .experience-list { gap: calc(var(--body-size) * 40 / 18); }
  .home-page main .contact { padding: calc(var(--body-size) * 70 / 18) var(--page-gutter) calc(var(--body-size) * 80 / 18); }
  .contact-copy { padding-inline-end: 0; gap: calc(var(--body-size) * 20 / 18); }
  .contact-copy h2 { max-width: 670px; }
  .contact-copy p { max-width: calc(100% - 230px); }
  .contact-arrow { display: block; width: calc(var(--body-size) * 207 / 18); right: calc(var(--body-size) * 37 / 18); top: calc(var(--body-size) * 122 / 18); }
  .footer, .case-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .footer .footer-zone, .case-footer .footer-zone { grid-column: 2; grid-row: 2; justify-self: end; }
  .study h1, .study h2 { letter-spacing: normal; }
  .back-top { width: 40px; height: 40px; right: 20px; bottom: calc(var(--body-size) * 129 / 18); }
  .back-top img { width: 20px; height: 20px; }
}
/* Keep the tablet composition, including two case columns, above 480px. */
@media (min-width: 480.01px) and (max-width: 959.98px) {
  .hero h1 { font-size: clamp(43px, 10.9375vw, 100px); }
  .introduction { flex-direction: row; }
  .portrait { height: auto; }
  .case-card .case-copy h3 { font-size: clamp(16px, 6.25cqw, 22px); }
  .case-card .chips li { font-size: clamp(12px, 5.1136cqw, 18px); white-space: normal; }
  .case-card .chips { grid-template-columns: minmax(0, max-content) minmax(0, max-content); }
  .case-card .case-note { font-size: clamp(12px, 5.1136cqw, 18px); }
}
@media (min-width: 480.01px) and (max-width: 620px) {
  .header-shell .header { gap: 0 8px; }
  .header-shell .header-actions { gap: 8px; }
  .header-shell .button { padding-inline: 12px; }
  .header-shell .languages > a { min-width: 36px; padding-inline: 6px; }
  .header-shell.menu-ready .navigation-toggle { margin-left: 0; }
}
/* Maria's main 360 reference, shared unchanged in composition through 480px. */
@media (max-width: 480px) {
  :root, .home-page {
    --page-gutter: 12px;
    --body-size: 15px;
    --ui-size: 16px;
    --section-title-size: 28px;
    --subtitle-size: 20px;
    --intro-title-size: 24px;
    --compact-gap: 60px;
    --rail-card-gap: 20px;
    --section-heading-gap: 32px;
  }
  html { scroll-padding-top: 94px; }
  .header-shell .header { display: flex; flex-wrap: wrap; padding-block: 8px; gap: 0; height: auto; min-height: 70px; }
  .header-brand { font-size: 16px; line-height: 22px; }
  .header-shell .header-actions { display: flex; gap: 18px; }
  .header-shell .languages { gap: 0; }
  .header-shell .languages > a { min-width: 40px; padding: 12px 8px; line-height: 22px; }
  .header-shell .button { display: none; }
  .header-shell.menu-ready .navigation-toggle { margin: 0 -10px 0 0; }
  .hero { padding-block: 24px 60px; min-height: 570px; container-type: inline-size; }
  .hero h1 { font-size: min(57.333px, calc(43 / 336 * 100cqw)); }
  .introduction { flex-direction: column; gap: 24px; margin-top: 24px; }
  .portrait { width: 100%; height: auto; aspect-ratio: 336 / 200; border-radius: 20px; }
  .portrait-image { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: center; }
  .portrait-detail { display: none; }
  .introduction-copy { gap: 16px; }
  .introduction h2 br { display: none; }
  .section > h2, .section > .container > h2 { margin-bottom: 32px; }
  .case-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .case-card { height: 400px; aspect-ratio: auto; border-radius: 20px; }
  .project-grid { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; gap: 20px; margin: 0; padding: 0; overflow: visible; }
  .project-card { height: auto; aspect-ratio: 336 / 263; border-radius: 20px; }
  .home-page .project-card .project-caption { top: 16px; }
  .project-caption h3 { font-size: 20px; }
  .experience { padding-block: 56px 60px; }
  .experience-row { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .experience-meta { gap: 16px; }
  .experience-copy { gap: 8px; }
  .experience-copy h3 { font-size: 20px; }
  .experience-row:last-child .experience-copy h3 { font-size: 22px; }
  .experience-list { gap: 32px; }
  .about-grid { grid-auto-columns: 286px; grid-auto-rows: auto; gap: 20px; }
  .about-card > div { padding: 20px 16px 16px; gap: 12px; }
  .about-photo { height: 230px; aspect-ratio: auto; }
  .home-page main .contact { padding: 54px var(--page-gutter) 60px; }
  .contact-copy { gap: 20px; }
  .contact-copy p { max-width: 100%; }
  .contact-copy > .button { margin-top: 0; font-size: 15px; line-height: 18px; }
  .contact-arrow { display: none; }
  .footer, .case-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 16px 8px; }
  .footer nav, .case-footer nav { grid-column: 1 / -1; justify-content: center; gap: 0 32px; }
  .footer nav a, .case-footer nav a { font-size: 16px; }
  .footer .footer-updated, .case-footer .footer-updated { font-size: 15px; white-space: nowrap; }
  .footer .footer-zone, .case-footer .footer-zone { grid-column: 2; grid-row: 2; justify-self: end; font-size: 15px; }
  .back-top { right: 10px; bottom: 143px; }
}
/* Hide the affordance, retaining native touch/wheel and keyboard row scrolling. */
.about-grid, .project-grid { scrollbar-width: none; }
.about-grid::-webkit-scrollbar, .project-grid::-webkit-scrollbar { display: none; }

/* Touch-only devices keep the supplied pre-hover artwork, even after a sticky tap hover. */
@media (hover: none) {
  .home-page .case-card, .home-page .case-card :is(.case-copy, .case-note, .phone, .phone-default, .phone-hover),
  .home-page .project-card :is(.project-caption, img) { transition: none; }
  .home-page .case-card { background: var(--white); }
  .home-page .case-card .case-copy, .home-page .case-card .case-note { opacity: 0; }
  .home-page .case-card .phone { transform: translate(-50%, -50%); }
  .home-page .case-card .phone-default { opacity: 1; }
  .home-page .case-card .phone-hover { opacity: 0; }
  .home-page .project-card .project-caption { opacity: 0; }
  .home-page .project-card > img { transform: none; }
}

/* The 768 design keeps project names visible above static preview artwork. */
@media (max-width: 959.98px) and (hover: none) {
  .home-page .project-card .project-caption { opacity: 1; }
}

/* Updated 960/768/360 references: artwork starts 20px below the outer card edge. */
@media (max-width: 960px) {
  .home-page .project-card { height: auto; aspect-ratio: auto; padding-top: 16px; }
  .home-page .project-card .project-caption { display: none; }
  .home-page .project-card > img,
  .home-page .project-card:is(:hover,:focus-visible) > img { position: relative; top: auto; bottom: auto; left: 0; width: 100%; height: auto; aspect-ratio: 384 / 238; margin-bottom: -4px; transform: none; }
}
.header-shell.menu-ready .navigation-toggle[aria-expanded="true"] { position: relative; }
.header-shell.menu-ready .navigation-toggle[aria-expanded="true"] img { visibility: hidden; }
.header-shell.menu-ready .navigation-toggle[aria-expanded="true"]::before,
.header-shell.menu-ready .navigation-toggle[aria-expanded="true"]::after { content: ""; position: absolute; width: 22px; height: 2px; background: currentColor; transform: rotate(45deg); }
.header-shell.menu-ready .navigation-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
@media (max-width: 480px) {
  .header-shell[data-menu-modal] { position: fixed; inset: 0; height: 100dvh; z-index: 50; }
  .header-shell.menu-ready .navigation[data-open] { inset: 70px 0 0; width: 100%; max-height: none; padding: 24px var(--page-gutter) max(24px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; justify-content: safe center; align-items: center; gap: 12px; }
  .header-shell.menu-ready .navigation a { justify-content: center; font-size: 16px; min-height: 48px; }
  .header-shell.menu-ready .navigation .navigation-contact { display: inline-flex; margin-top: 12px; padding-inline: 32px; font-size: 16px; }
  .header-shell[data-menu-modal] .header { margin-bottom: 0; }
  body:has(.header-shell[data-menu-modal]) { padding-top: 70px; }
}
html.navigation-modal-open { overflow: hidden; }
/* The open phone menu keeps its logo while the hero transfer is covered. */
.header-shell[data-menu-modal] .header-brand { visibility: visible !important; }

/* Restore the footer notice using the shared accessible dialog behavior. */
.footer-privacy { grid-column: 2; grid-row: 1; justify-self: end; min-height: 44px; font: inherit; font-family: var(--ui-font); font-size: var(--ui-size); text-align: right; }
.privacy-dialog .privacy-copy { display: grid; gap: 16px; }
.privacy-dialog .privacy-copy p { margin: 0; font-size: var(--body-size); line-height: 1.4; }
.privacy-dialog .privacy-copy a { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:480px) {
  .footer-privacy { grid-column: 1 / -1; grid-row: 2; justify-self: center; text-align: center; font-size: 16px; }
  .footer .footer-updated, .case-footer .footer-updated { grid-row: 3; }
  .footer .footer-zone, .case-footer .footer-zone { grid-row: 3; }
}

/* Current narrow header reference: one row, name / languages / menu. */
@media (max-width: 767.98px) {
  html { scroll-padding-top: 94px; }
  .header-shell .header { display: flex; flex-wrap: nowrap; min-height: 70px; height: 70px; padding-block: 8px; gap: 12px; }
  .home-page .header-brand { visibility: visible; }
  .header-brand { grid-column: auto; grid-row: auto; justify-self: auto; font-size: 16px; line-height: 22px; }
  .header-shell .header-actions { display: flex; align-items: center; gap: 18px; }
  .header-shell .languages { display: flex; gap: 4px; }
  .header-shell .languages > a { min-width: 40px; padding: 12px 8px; font-size: 16px; line-height: 22px; }
  .header-shell .header-actions > .button { display: none; }
  .header-shell.menu-ready .navigation-toggle { margin: 0 -10px 0 0; }
}
@media (min-width: 959.99px) and (max-width: 960px) {
  .experience { padding-bottom: 100px; }
}
/* Links and the policy button share one type rule, including mobile text sizing. */
.footer, .case-footer { --footer-action-size: var(--ui-size); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.footer nav a, .case-footer nav a,
.footer .footer-privacy, .case-footer .footer-privacy { font: 400 var(--footer-action-size)/1.25 var(--ui-font); letter-spacing: .02em; }

/* Phone switches follow Maria’s explicit 39px size; header remains 62px. */
.header-shell { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 480px) {
  .header-shell .header { height: 62px; min-height: 62px; }
  .header-shell .languages { gap: 8px; }
  .header-shell .languages > a { width: 39px; min-width: 39px; height: 39px; min-height: 39px; flex: none; padding: 0; font-size: 16px; line-height: 22px; }
  .header-shell .languages > a[aria-current] { border-bottom: 0; box-shadow: inset 0 -2px var(--accent); }
  .header-shell.menu-ready .navigation[data-open] { top: 62px; }
  body:has(.header-shell[data-menu-modal]) { padding-top: 62px; }
  /* Keep the approved hero name position while correcting the header above it. */
  .hero { padding-top: 32px; min-height: 578px; }
}
@media (max-width: 359.98px) {
  .header-shell .header-actions { gap: 12px; }
}

/* Keep the 960 About heading on two lines and tune the English reading measure. */
@media (min-width: 959.99px) and (max-width: 960px) {
  .about-grid { grid-auto-columns: 352px; }
  :lang(en) .introduction-copy { max-width: 464px; }
}
@media (min-width: 480.01px) and (max-width: 959.98px) {
  :lang(en) .introduction-copy { max-width: calc(var(--body-size) * 420 / 18); }
}

@media (min-width: 480.01px) and (max-width: 960px) {
  :lang(en) .introduction-copy > :is(h2, p) { text-wrap: balance; }
}

/* Shared ready-case rhythm and readable related-card insets. */
.home-page :is(.case-card,.project-card) { cursor: pointer; }
.study { --case-section-space: clamp(100px, 8.823529vw, 120px); }
.study .study-cover { padding-bottom: var(--case-section-space); }
.study :is(.study-outcomes, .study-about, .study-research) { padding-block: var(--case-section-space); }
.study .study-chapter, .study .study-chapter:first-child { padding-top: var(--case-section-space); padding-bottom: 0; }
.study .study-finish { padding-block: var(--case-section-space); }
.study .study-summary { padding-block: 0; }
.study .study-summary-inner, .study .study-next { padding-block: var(--case-section-space); }
/* Adjacent white Mbulak sections share one interval, without adding two paddings. */
.mbulak-page .study-cover, .mbulak-page .study-about { padding-bottom: 0; }
.study-about > h2, .study-research > h2, .study-finish > h2,
.study-next-header, .study-about-intro { margin-bottom: var(--section-heading-gap); }
.study-facts:not(.study-facts-wide), .study-research-part,
.study-chapter .study-comparison, .study-chapter .study-placeholder,
.mbulak-page .study-chapter .nda-card { margin-top: var(--section-heading-gap); }
@media(max-width:960px) {
  .study { --case-section-space: var(--compact-gap); }
}
.study-hero { overflow-x: clip; }
.study-next .next-case { height: auto; grid-template-rows: 246px auto; }
.study-next .next-case-caption { padding: 20px; }
.surface-backdrop { border-radius: inherit; }
@media(max-width:700px) {
 .study-next .next-case { grid-template-rows: 210px auto; }
}

/* Figma 501:9416: 32px between links, 16px between their text rows. */
@media (max-width: 480px) {
  .footer nav a, .case-footer nav a,
  .footer .footer-privacy, .case-footer .footer-privacy {
    position: relative; min-height: 20px; height: 20px;
  }
  .footer nav a::before, .case-footer nav a::before,
  .footer .footer-privacy::before, .case-footer .footer-privacy::before {
    content: ''; position: absolute; inset: -8px 0;
  }
}

/* Keep the left rule visible while the callout opens to the right. */
@media (prefers-reduced-motion: reduce) {
  .study-callout { clip-path: none !important; }
}

/* Related-work copy uses the same editorial roles as home About/Experience cards. */
.study-next .next-case-caption h3 { font-size: var(--subtitle-size); line-height: 1.2; }
.study-next .next-case-caption > p { font-size: var(--body-size); line-height: var(--content-leading); }

/* Phone case facts use spacing alone to separate rows. */
@media (max-width: 480px) {
  .study .study-facts > div::before { display: none; }
}