:root { --blue:#012bba; --ink:#102148; --paper:#fff; --case-gutter:clamp(24px,5.5vw,105px); font-family:'DM Sans',Arial,sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure { margin:0; font-weight:400; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; border:0; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
::selection { color:#fff; background:var(--blue); }
.case-skip { position:fixed; left:20px; top:10px; z-index:50; background:#fff; padding:12px; transform:translateY(-150%); }
.case-skip:focus { transform:none; }
.case-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:100px; padding:24px var(--case-gutter); border-bottom:1px solid #1021481a; }
.case-logo { font-size:24px; font-weight:600; letter-spacing:.035em; }
.case-header nav { display:flex; gap:clamp(20px,3vw,48px); font-size:12px; }
.case-header nav a { padding:12px 0; }
.case-intro { padding:60px var(--case-gutter) 45px; }
.case-topline { display:flex; justify-content:space-between; gap:20px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--blue); }
.case-intro h1 { margin:40px 0 30px; color:var(--blue); font-size:clamp(64px,10.8vw,190px); font-weight:500; letter-spacing:-.065em; line-height:.95; }
.case-intro__bottom { display:flex; justify-content:space-between; align-items:end; gap:40px; }
.case-intro__bottom p { max-width:34ch; font-size:clamp(20px,2.4vw,36px); line-height:1.25; letter-spacing:-.035em; }
.case-text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 0; font-size:16px; white-space:nowrap; }
.case-text-link > span:last-child { font-size:21px; }
.case-text-link .onform-copy,.case-text-link .onform-glyph { font-size:inherit; }
.case-figure { min-width:0; }
.case-figure figcaption { display:flex; justify-content:space-between; gap:20px; padding:15px 0 0; color:#667087; font-size:10px; line-height:1.5; }
.case-hero { padding:0 24px; }
.case-hero .case-image { aspect-ratio:1.8; max-height:760px; background:var(--project-color); }
.case-image { position:relative; display:block; width:100%; padding:0; overflow:hidden; background:#f2f3f6; color:#fff; }
.case-image img { display:block; width:100%; height:100%; object-fit:cover; }
.case-image--contain img { object-fit:contain; }
.case-image__expand { position:absolute; right:18px; bottom:18px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#102148cc; color:#fff; font-size:18px; }
.case-image:focus-visible { outline-offset:-6px; }
.case-overview { display:grid; grid-template-columns:1fr 1.8fr; gap:8vw; padding:90px var(--case-gutter); }
.case-meta { display:grid; gap:25px; align-content:start; margin:0; }
.case-meta div { border-top:1px solid #10214826; padding-top:14px; }
.case-meta dt,.case-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#667087; }
.case-meta dd { margin:9px 0 0; font-size:16px; line-height:1.4; }
.case-overview h2 { font-size:clamp(32px,3.5vw,58px); line-height:1.08; letter-spacing:-.045em; margin:18px 0 24px; }
.case-overview__story > p:last-child { max-width:46ch; font-size:18px; line-height:1.6; letter-spacing:-.015em; color:#566179; }
.case-gallery { padding:0 var(--case-gutter); }
.case-screen { padding:clamp(20px,4vw,64px); background:var(--project-soft); }
.case-screen img { height:auto; }
.case-gallery__pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin:30px 0; }
.case-gallery__pair .case-image { aspect-ratio:1.08; }
.case-highlights { padding:75px var(--case-gutter); }
.case-highlights > h2 { font-size:clamp(34px,4.2vw,65px); letter-spacing:-.05em; line-height:1.05; color:var(--blue); margin-bottom:35px; }
.case-highlights__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; }
.case-highlight { border-top:1px solid #10214826; padding-top:20px; }
.case-highlight > span { font-size:10px; color:var(--blue); }
.case-highlight h3 { font-size:22px; line-height:1.2; letter-spacing:-.03em; margin:15px 0 14px; }
.case-highlight p { font-size:14px; line-height:1.65; color:#667087; max-width:32ch; }
.case-mobile-pair { display:grid; grid-template-columns:1.35fr 1fr; gap:24px; margin:30px 0; }
.case-mobile-pair .case-image { height:clamp(470px,50vw,710px); }
.case-mobile-pair .case-mobile { padding:35px; background:var(--project-soft); }
.case-mobile img { object-fit:contain; height:100%; width:100%; }
.case-language { display:grid; grid-template-columns:1fr 1.5fr; gap:70px; padding:65px var(--case-gutter) 90px; align-items:center; }
.case-language h2 { color:var(--blue); font-size:clamp(28px,3vw,46px); letter-spacing:-.045em; line-height:1.1; margin:16px 0; }
.case-language p:last-child { font-size:15px; line-height:1.6; color:#667087; max-width:33ch; }
.case-palette { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.case-swatch { min-height:140px; padding:16px; display:flex; align-items:end; font-size:10px; }
.case-next { padding:50px var(--case-gutter) 80px; border-top:1px solid #10214826; }
.case-next__top { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-bottom:25px; }
.case-next-link { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; background:#f3f4f7; color:var(--blue); }
.case-next-link img { width:100%; height:320px; display:block; object-fit:cover; }
.case-next-link > div { padding:clamp(24px,4vw,65px); }
.case-next-link h2 { font-size:clamp(35px,5vw,80px); letter-spacing:-.055em; line-height:1; margin:20px 0; }
.case-next-link > div > span:last-child { font-size:32px; }
.footer-curve { height:8svh; position:relative; overflow:hidden; margin-bottom:-1px; }
.footer-curve > div { width:150%; height:750%; position:absolute; left:50%; top:0; border-radius:50%; background:#fff; transform:translate(-50%,-86.666%); }
.motion-mask,.motion-line { display:block; }
.project-lightbox { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:70px clamp(16px,4vw,70px) 70px; border:0; background:#080d18; color:#fff; }
.project-lightbox::backdrop { background:#080d18; }
.project-lightbox:not([open]) { display:none; }
.project-lightbox__image { width:100%; height:100%; object-fit:contain; display:block; }
.project-lightbox__close { position:absolute; top:20px; right:24px; background:transparent; color:#fff; padding:10px 0; display:flex; gap:16px; font-size:14px; }
.project-lightbox__bottom { position:absolute; inset:auto 24px 18px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.project-lightbox__caption { font-size:12px; line-height:1.4; }
.project-lightbox__controls { display:flex; align-items:center; gap:18px; }
.project-lightbox__controls button { background:transparent; color:#fff; font-size:22px; width:44px; height:44px; }
.project-lightbox__count { font-size:11px; }
@media(max-width:700px) {
  .case-header { min-height:85px; padding:20px 24px; }
  .case-logo { font-size:20px; }
  .case-header nav { gap:20px; font-size:11px; }
  .case-intro { padding-top:38px; }
  .case-intro h1 { font-size:clamp(54px,13vw,86px); margin:30px 0 22px; }
  .case-intro__bottom { flex-direction:column; align-items:start; gap:20px; }
  .case-intro__bottom p { font-size:24px; }
  .case-hero { padding:0 16px; }
  .case-hero .case-image { aspect-ratio:1.1; }
  .case-overview { grid-template-columns:1fr; padding:55px 24px; gap:40px; }
  .case-meta { grid-template-columns:1fr 1fr; gap:20px; }
  .case-meta div:last-child { grid-column:1 / -1; }
  .case-meta dd { font-size:14px; }
  .case-overview h2 { font-size:34px; }
  .case-overview__story > p:last-child { font-size:16px; }
  .case-gallery__pair { grid-template-columns:1fr; gap:24px; }
  .case-screen { padding:16px; }
  .case-highlights { padding:55px 24px; }
  .case-highlights__grid { grid-template-columns:1fr; gap:30px; }
  .case-highlight p { max-width:44ch; }
  .case-mobile-pair { grid-template-columns:1fr; }
  .case-mobile-pair .case-image { height:420px; }
  .case-mobile-pair .case-mobile { height:650px; }
  .case-language { grid-template-columns:1fr; gap:30px; padding:40px 24px 55px; }
  .case-swatch { min-height:120px; }
  .case-next { padding:40px 24px 55px; }
  .case-next-link { grid-template-columns:1fr; }
  .case-next-link img { height:260px; }
  .case-next-link h2 { font-size:48px; }
  .case-next__top .case-text-link { font-size:12px; }
  .project-lightbox__caption { max-width:60%; }
  .project-lightbox__controls { gap:4px; }
  .project-lightbox__bottom { inset:auto 16px 12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }