:root {
  color-scheme:light;
  --case-project-bg:#f7fafd; --case-project-ink:#101010; --case-project-accent:#4e7e9e;
  --case-project-logo-filter:none;
  --case-bg:var(--case-project-bg); --case-ink:var(--case-project-ink);
  --case-accent:var(--case-project-accent); --case-logo-filter:var(--case-project-logo-filter);
  --case-transition:380ms;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --case-bg:#0c1118; --case-ink:#f1f4f6; --case-accent:#a9d2ef;
  --case-logo-filter:invert(1);
  --next-bg:#0c1118; --next-ink:#f1f4f6; --next-accent:#a9d2ef;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--case-ink); background:var(--case-bg); font-family:"Host Grotesk", Arial, sans-serif; transition:opacity 220ms ease, color var(--case-transition) ease, background-color var(--case-transition) ease; }
body.is-case-leaving { opacity:0; }
a, button { color:inherit; font:inherit; }
.case-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:10px max(20px, calc((100vw - 1120px) / 2)); background:color-mix(in srgb, var(--case-bg) 92%, transparent); border-bottom:1px solid color-mix(in srgb, var(--case-ink) 15%, transparent); backdrop-filter:blur(10px); }
.case-header__controls { display:flex; align-items:center; gap:14px; }
.case-logo img { width:86px; height:auto; filter:var(--case-logo-filter); }
.case-back { min-height:44px; padding:0; border:0; background:transparent; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.case-study { width:min(100% - 40px, 920px); margin:0 auto; padding:56px 0 72px; }
/* The page root receives programmatic focus after a case study renders so
   screen-reader and keyboard users land at its content. It is not a control;
   don't draw the sitewide control-focus ring around the entire page. */
.case-study:focus { outline:none; }
.case-kicker { margin:0 0 12px; font:11px/1.4 "Fragment Mono", monospace; color:var(--case-accent); text-transform:uppercase; letter-spacing:.08em; }
h1 { max-width:15ch; margin:0; font:500 clamp(36px, 8vw, 68px)/1.03 "Sora", Arial, sans-serif; letter-spacing:-.04em; }
.case-intro { max-width:62ch; margin:24px 0 44px; font-size:clamp(17px, 2.6vw, 21px); line-height:1.5; color:color-mix(in srgb, var(--case-ink) 72%, transparent); }
.case-images { display:grid; gap:24px; }
.case-image { margin:0; }
.case-image button { display:block; width:100%; padding:0; border:0; border-radius:6px; background:transparent; cursor:zoom-in; }
.case-image img { display:block; width:100%; height:auto; max-height:none; background:transparent; border-radius:6px; }
.case-image > figcaption {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0, 0, 0, 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.case-lightbox { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:64px 20px 20px; color:var(--case-ink); border:0; background:color-mix(in srgb, var(--case-bg) 97%, transparent); }
.case-lightbox::backdrop { background:rgba(16,16,16,.22); }
.case-lightbox img { width:100%; height:100%; object-fit:contain; }
.case-lightbox__close { position:fixed; top:10px; right:20px; min-height:44px; padding:0; border:0; background:transparent; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.case-image button:focus-visible, .case-lightbox__close:focus-visible, .case-back:focus-visible, .case-logo:focus-visible { outline:2px solid var(--case-ink); outline-offset:4px; }
body.is-pointer-input :focus { outline:none; }
.case-empty { max-width:42ch; margin-top:80px; font-size:18px; line-height:1.5; }
.il-story { display:none; }
body.case-immolosch-mobile { --case-bg:#0A2B52; --case-ink:#F8F2E9; --case-accent:#EF4B3F; --case-logo-filter:brightness(0) invert(1); }
:root[data-theme="dark"] body.case-immolosch-mobile { --case-bg:#0c1118; --case-ink:#f1f4f6; --case-accent:#a9d2ef; --case-logo-filter:invert(1); }
:root[data-theme="dark"] body.case-immolosch-mobile .case-header { background:var(--case-bg); }

.case-next { --next-bg:#dcecf7; --next-ink:#101010; --next-accent:#4e7e9e; width:100%; color:var(--next-ink); background:var(--next-bg); }
:root[data-theme="dark"] .case-next { --next-bg:var(--case-bg); --next-ink:var(--case-ink); --next-accent:var(--case-accent); }
.case-next { transition:color var(--case-transition) ease, background-color var(--case-transition) ease; }
.case-next__inner { width:min(100% - 40px, 1120px); margin:0 auto; padding:76px 0 42px; }
.case-next__eyebrow { margin:0 0 40px; font:11px/1.4 "Fragment Mono", monospace; letter-spacing:.1em; }
.case-next__project { display:grid; grid-template-columns:minmax(220px, .75fr) minmax(0, 1.55fr); gap:clamp(32px, 6vw, 80px); align-items:end; color:inherit; text-decoration:none; }
.case-next__copy { position:relative; display:flex; flex-direction:column; min-width:0; padding-bottom:8px; }
.case-next__title { max-width:12ch; font:500 clamp(44px, 6.4vw, 88px)/.96 "Sora", Arial, sans-serif; letter-spacing:-.055em; overflow-wrap:anywhere; }
.case-next__category { max-width:32ch; margin-top:20px; font:12px/1.45 "Fragment Mono", monospace; letter-spacing:.02em; }
.case-next__arrow { display:grid; place-items:center; width:48px; height:48px; margin-top:36px; color:var(--next-accent); border:1px solid currentColor; border-radius:50%; opacity:.72; transition:opacity 180ms ease, transform 180ms ease; }
.case-next__arrow svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.case-next__media { display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:10px; background:color-mix(in srgb, var(--next-ink) 8%, transparent); }
.case-next__media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 380ms cubic-bezier(.2,.7,.2,1); }
.case-next__all { display:inline-block; margin-top:34px; color:inherit; font:11px/1.4 "Fragment Mono", monospace; letter-spacing:.1em; text-underline-offset:5px; }
.case-next__project:focus-visible, .case-next__all:focus-visible { outline:2px solid var(--next-accent); outline-offset:7px; }

@media (hover:hover) and (pointer:fine) {
  .case-next__arrow { opacity:0; transform:translateX(-8px); }
  .case-next__project:hover .case-next__media img { transform:scale(1.018); }
  .case-next__project:hover .case-next__arrow { opacity:1; transform:translateX(0); }
}

@media (max-width:767px) {
  .case-study { padding:42px 0 64px; }
  .case-study--immolosch { width:100%; padding:0; }
  .case-study--immolosch .case-default { display:none; }
  .case-study--immolosch + .case-next { margin-top:0; }
  body.case-immolosch-mobile .case-header { border-bottom:0; backdrop-filter:none; background:#0A2B52; }
  .il-story { display:block; overflow:hidden; }
  .il-story__section { display:grid; gap:26px; padding:62px 20px 66px; }
  .il-story__section--opening { min-height:calc(100svh - 64px); padding-top:48px; }
  .il-story__copy { max-width:34rem; }
  .il-story__copy h1 { margin-bottom:18px; font-size:clamp(30px, 8vw, 44px); }
  .il-story__copy p { max-width:31rem; margin:0; color:var(--case-ink); font-size:20px; line-height:1.5; }
  .il-story figure { margin:0; }
  .il-story__image-button { display:block; width:100%; padding:0; overflow:hidden; border:0; border-radius:8px; background:transparent; cursor:zoom-in; }
  .il-story__image-button img { display:block; width:100%; height:auto; }
  .il-story__hero-media { width:calc(100% + 20px); }
  .il-story__hero-media .il-story__image-button { border-radius:8px 0 0 8px; }
  .il-story__hero-media img { aspect-ratio:4 / 3; object-fit:cover; object-position:center top; }
  .il-carousel { width:calc(100% + 20px); }
  .il-carousel__rail { display:flex; gap:12px; overflow-x:auto; padding:0 20px 8px 0; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .il-carousel__rail::-webkit-scrollbar { display:none; }
  .il-carousel__slide { flex:0 0 calc(100% - 34px); min-width:0; scroll-snap-align:start; }
  .il-carousel__slide .il-story__image-button { background:color-mix(in srgb, var(--case-ink) 5%, transparent); }
  .il-carousel__slide .il-story__image-button img { aspect-ratio:4 / 3; object-fit:cover; object-position:center top; }
  .il-carousel__slide--portrait .il-story__image-button img { object-fit:contain; background:#0a2b58; }
  .il-carousel__dots { display:flex; gap:8px; margin-top:16px; }
  .il-carousel__dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:color-mix(in srgb, var(--case-ink) 30%, transparent); }
  .il-carousel__dot.is-current { background:var(--case-accent); }
  .il-carousel__rail:focus-visible,
  .il-carousel__dot:focus-visible,
  .il-story__image-button:focus-visible { outline:2px solid var(--case-accent); outline-offset:4px; }

  .il-logo-comparison { display:grid; min-height:calc((100vw - 74px) * .75); grid-template-rows:1.15fr .85fr; overflow:hidden; border-radius:8px; background:#f9f4ec; }
  .il-logo-comparison > div { display:grid; align-content:center; gap:18px; padding:26px 24px; }
  .il-logo-comparison > div + div { background:#fff; }
  .il-logo-comparison span { color:color-mix(in srgb, var(--case-ink) 58%, transparent); font:9px/1.4 "Fragment Mono", monospace; letter-spacing:.08em; text-transform:uppercase; }
  .il-logo-comparison img { display:block; width:min(100%, 310px); max-height:72px; object-fit:contain; object-position:left center; }
  .il-logo-comparison > div + div img { width:min(78%, 270px); opacity:.76; }
  .case-next__inner { padding:58px 0 32px; }
  .case-next__eyebrow { margin-bottom:28px; }
  .case-next__project { grid-template-columns:1fr; gap:28px; }
  .case-next__copy { padding:0; }
  .case-next__title { max-width:10ch; font-size:clamp(38px, 12vw, 58px); }
  .case-next__category { margin-top:14px; }
  .case-next__arrow { position:absolute; right:0; bottom:0; width:42px; height:42px; margin:0; }
  .case-next__media { width:100%; border-radius:8px; }
  .case-next__all { margin-top:26px; min-height:44px; padding-top:10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  body.is-case-leaving { opacity:1; }
  .case-next__project:hover .case-next__media img { transform:none; }
}

.theme-control { min-width:42px; min-height:32px; padding:4px 7px; border:1px solid transparent; background:transparent; color:color-mix(in srgb, var(--case-ink) 58%, transparent); font:10px/1 "Fragment Mono", monospace; cursor:pointer; transition:color 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.theme-control:hover, .theme-control:focus-visible { color:var(--case-ink); border-color:color-mix(in srgb, var(--case-ink) 22%, transparent); }
.theme-animating body, .theme-animating body *:not(img):not(video) { transition:color 380ms ease, background-color 380ms ease, border-color 380ms ease, box-shadow 380ms ease, filter 380ms ease !important; }
.theme-animating .case-logo img { transition:filter 380ms ease !important; }
@media (prefers-reduced-motion:reduce) { .theme-animating body, .theme-animating body * { transition-duration:0ms !important; } }

.case-language { width:min(100% - 40px,920px); margin:12px auto 0; display:flex; gap:14px; }
.case-language a { display:inline-flex; align-items:center; min-height:44px; font:12px/1.4 "Fragment Mono",monospace; text-underline-offset:4px; }
.case-language a[aria-current="page"] { text-decoration-thickness:2px; }
.case-context { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:24px max(20px,calc((100vw - 920px) / 2)); }
.case-context a { min-height:44px; display:inline-flex; align-items:center; text-underline-offset:4px; }
@media (max-width:767px) { .case-header__controls { gap:10px; } .case-back { font-size:13px; } }