@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { color-scheme: dark; --case-bg:#080e15; --case-panel:#111c27; --case-line:#263441; --case-text:#edf3f7; --case-muted:#a5b4c2; --case-accent:#a1d7ed; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; scroll-padding-top:94px; }
body.case-layout { margin:0; height:auto; background:var(--case-bg); color:var(--case-text); font:400 16px/1.6 'DM Sans',sans-serif; overflow-x:clip; overflow-y:visible; }
.case-main a { color:inherit; text-decoration:none; }
.case-main button { font:inherit; cursor:pointer; }
.case-main img { display:block; max-width:100%; }
.case-main h1,.case-main h2,.case-main h3,.case-product { font-family:'Space Grotesk','DM Sans',sans-serif; font-weight:500; }
.case-main h1 { font-size:clamp(2.5rem,4.5vw,5rem); line-height:1.08; letter-spacing:-.055em; margin:18px 0 28px; text-wrap:balance; }
.case-main h2 { font-size:clamp(1.8rem,3vw,3rem); line-height:1.15; letter-spacing:-.035em; margin:0 0 18px; }
.case-main h3 { font-size:1.18rem; line-height:1.4; letter-spacing:-.015em; margin:14px 0 12px; }
.case-main p { margin:0 0 18px; }
.case-main a:focus-visible,.case-main button:focus-visible,.case-main summary:focus-visible { outline:2px solid #c2f2ff; outline-offset:5px; }
.case-sidebar { position:fixed; inset:0 auto 0 0; width:128px; padding:36px 14px 24px; border-right:1px solid var(--case-line); display:flex; flex-direction:column; align-items:center; z-index:100; background:#0b131c; }
.case-brand { display:block; padding:8px 0 36px; }
.case-brand img,.case-mobile img { object-fit:contain; filter:brightness(0) invert(1); }
.case-sidebar nav { display:flex; flex-direction:column; width:100%; gap:8px; }
.case-sidebar nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:24px; padding:14px 5px; color:#8c9fae; border-radius:10px; }
.case-sidebar nav a span { font:500 .68rem/1.4 'DM Sans',sans-serif; text-align:center; }
.case-sidebar nav a:hover,.case-sidebar nav a[aria-current=page] { background:#192a38; color:#c3edff; }
.case-sidebar-cta { margin-top:auto; text-align:center; font-size:24px; color:#b5e7f4!important; }
.case-sidebar-cta span { display:block; font:500 .75rem/1.5 'DM Sans',sans-serif; margin-top:8px; }
.case-mobile { display:none; }
.case-main { max-width:1560px; margin-left:210px; padding:38px clamp(28px,4vw,72px) 60px; }
.case-eyebrow { color:var(--case-accent); text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; font-weight:600; }
.case-intro { font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.8; color:var(--case-muted); max-width:650px; }
.case-index-intro { padding:60px 0 40px; max-width:930px; }
.case-index-intro h1 { max-width:850px; }
.case-index-intro .case-intro { max-width:700px; }
.case-filter { display:flex; gap:8px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--case-line); }
.case-filter button { color:var(--case-muted); border:1px solid var(--case-line); padding:10px 20px; border-radius:30px; background:transparent; min-height:44px; }
.case-filter button:hover { border-color:#708fa4; color:#fff; }
.case-filter button[aria-pressed=true] { background:#d0edf1; border-color:#d0edf1; color:#102027; }
.case-filter-status { font-size:.8rem; color:var(--case-muted); min-height:1.5em; margin:12px 0!important; }
.case-projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px 30px; }
.case-project { min-width:0; }
.case-project-image { position:relative; display:block; aspect-ratio:1.5; overflow:hidden; background:var(--case-panel); border:1px solid var(--case-line); border-radius:14px; }
.case-project-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.case-project-image:hover img { transform:scale(1.035); }
.case-project-arrow { position:absolute; bottom:18px; right:18px; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#0a131ed9; color:#fff; border:1px solid #8296a5; font-size:25px; }
.case-project-copy { padding:25px 3px 0; }
.case-project-copy h2 { font-size:2rem; }
.case-project-copy > p:not(.case-eyebrow) { font-size:.98rem; color:var(--case-muted); max-width:60ch; }
.case-text-link { display:inline-flex; align-items:center; gap:20px; min-height:44px; font-weight:500; color:var(--case-accent)!important; }
.case-accent-mint { --case-accent:#a6ded3; }
.case-accent-violet { --case-accent:#c7b5ef; }
.case-accent-sand { --case-accent:#e7cfad; }
.case-reading { padding:55px 0 0; display:flex; gap:18px; flex-wrap:wrap; }
.case-reading h2 { flex-basis:100%; font-size:1.3rem; }
.case-reading a { padding:18px 22px; border:1px solid var(--case-line); border-radius:8px; font-size:.9rem; }
.case-breadcrumb { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:.8rem; padding:0 0 30px; color:#a8b7c4; }
.case-breadcrumb span { color:#eef3f7; }
.case-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; padding:30px 0 65px; }
.case-product { font-size:1.5rem; color:var(--case-accent); margin-bottom:12px!important; }
.case-hero h1 { font-size:clamp(2.2rem,3.6vw,4rem); }
.case-hero .case-intro { font-size:1.02rem; }
.case-hero-media { min-width:0; margin:0; background:#121d29; border:1px solid var(--case-line); border-radius:16px; overflow:hidden; }
.case-hero-media > img { width:100%; height:clamp(340px,40vw,590px); object-fit:cover; }
.case-hero-media figcaption { padding:17px 22px; display:flex; justify-content:space-between; gap:12px; font-size:.72rem; letter-spacing:.04em; }
.case-hero-media figcaption span { color:var(--case-muted); }
.case-button { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-height:50px; padding:14px 24px; background:#c0e8ec; border:1px solid #c0e8ec; color:#0d232a!important; border-radius:6px; font-size:.9rem; font-weight:600; }
.case-button:hover { background:#e0f7fa; }
.case-button span { font-size:1.3rem; }
.case-chapters { position:sticky; top:0; z-index:40; display:flex; gap:30px; padding:20px 0; background:#080e15f5; backdrop-filter:blur(12px); border-block:1px solid var(--case-line); }
.case-chapters a { display:flex; gap:12px; color:#667f90; font-size:.78rem; }
.case-chapters a span { color:#a5b4c2; }
.case-chapters a[aria-current] span,.case-chapters a:hover span { color:#eaf7ff; }
.case-section { padding:70px 0 12px; scroll-margin-top:80px; }
.case-section-head { margin-bottom:36px; }
.case-section-head .case-eyebrow { margin-bottom:12px; }
.case-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.case-capabilities article { padding:28px; border:1px solid var(--case-line); border-radius:12px; background:linear-gradient(130deg,#13202d,#0e1822); min-width:0; }
.case-capabilities p { font-size:.94rem; color:var(--case-muted); line-height:1.8; margin-bottom:0; }
.case-number { display:inline-block; color:#76a8bd; font-size:.8rem; border-bottom:1px solid #35596b; padding-bottom:8px; min-width:32px; }
.case-more { margin-top:24px; border-block:1px solid var(--case-line); }
.case-more summary { padding:22px 6px; cursor:pointer; font-weight:500; }
.case-more summary span { margin-left:18px; color:#849bab; }
.case-more[open] .case-capabilities { margin:0 0 24px; }
.case-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.case-gallery figure { margin:0; min-width:0; }
.case-gallery figure:first-child { grid-column:1/-1; }
.case-gallery a { display:block; border:1px solid var(--case-line); background:#0e1923; border-radius:12px; overflow:hidden; }
.case-gallery img { width:100%; max-height:660px; height:auto; object-fit:contain; transition:filter .25s; }
.case-gallery a:hover img { filter:brightness(1.12); }
.case-gallery figcaption { padding:12px 0; font-size:.75rem; color:var(--case-muted); }
.case-contact { padding:44px; margin-top:70px; border:1px solid #3e5c6d; border-radius:14px; display:flex; align-items:center; gap:40px; justify-content:space-between; background:radial-gradient(ellipse at 90% 70%,#25405266,transparent 65%),#0e1a25; }
.case-contact h2 { font-size:clamp(1.7rem,2.6vw,2.8rem); }
.case-contact p:not(.case-eyebrow) { color:var(--case-muted); max-width:600px; margin-bottom:0; }
.case-contact .case-button { flex-shrink:0; }
.case-other-projects { display:flex; flex-wrap:wrap; gap:20px; padding-top:40px; font-size:.9rem; color:#b2cddd; }
.case-other-projects a { padding:10px 0; }
.case-footer { margin-left:210px; padding:28px clamp(28px,4vw,72px); display:flex; align-items:center; gap:24px; border-top:1px solid var(--case-line); font-size:.8rem; color:#91a4b5; flex-wrap:wrap; }
.case-footer p { margin:0; margin-right:auto; }
.case-footer>a:first-child { color:#eef5fa; letter-spacing:.12em; }
.logistics-visual { position:relative; display:grid; place-items:center; height:100%; min-height:320px; background:radial-gradient(ellipse at center,#18394b,#0e1b28); }
.logistics-visual svg { display:block; width:100%; height:auto; }
.logistics-visual > span { position:absolute; bottom:20px; left:24px; font-size:.65rem; letter-spacing:.12em; color:#a7d8e1; }
@media(min-width:1600px) { .case-main { margin-inline:auto; padding-left:190px; } }
@media(max-width:1100px) { .case-capabilities { grid-template-columns:repeat(2,minmax(0,1fr)); } .case-contact { flex-direction:column; align-items:flex-start; } }
@media(max-width:900px) {
 .case-sidebar { display:none; } .case-main,.case-footer { margin-left:0; }
 .case-main { padding:110px 24px 40px; }
 .case-mobile { display:flex; position:fixed; inset:0 0 auto; height:78px; align-items:center; justify-content:space-between; padding:16px 24px; background:#0a121bef; border-bottom:1px solid var(--case-line); z-index:100; }
 .case-mobile button { width:44px; height:44px; border:1px solid #3a505f; border-radius:50%; background:transparent; color:#edf6ff; font-size:22px; }
 .case-mobile .navbar-mobile { display:none; position:absolute; top:77px; left:0; right:0; padding:12px 20px 22px; border-bottom:1px solid #385262; background:#0b1621; }
 .case-mobile.is-open .navbar-mobile { display:block; }
 .case-mobile .navbar-mobile a { display:block; min-height:44px; padding:12px; }
 .case-index-intro { padding-top:20px; }
 .case-hero { padding-top:10px; grid-template-columns:1fr; }
 .case-hero-copy { max-width:700px; } .case-hero-media>img { height:420px; }
 .case-chapters { top:78px; }
 .case-layout .case-section { scroll-margin-top:150px; }
}
@media(max-width:600px) {
 .case-main { padding:105px 20px 36px; }
 .case-projects,.case-capabilities,.case-gallery { grid-template-columns:minmax(0,1fr); }
 .case-main h1 { font-size:2.65rem; }
 .case-index-intro { padding-bottom:28px; }
 .case-projects { gap:36px; } .case-filter { gap:8px; } .case-filter button { padding:9px 15px; font-size:.84rem; }
 .case-hero-media>img { height:310px; } .case-hero { gap:28px; padding-bottom:34px; }
 .case-chapters { gap:16px; justify-content:space-between; padding:16px 0; }
 .case-chapters a { flex-direction:column; gap:4px; font-size:.72rem; }
 .case-section { padding-top:46px; } .case-capabilities article { padding:24px; }
 .case-contact { padding:28px 22px; gap:24px; margin-top:44px; }
 .case-contact .case-button { width:100%; gap:12px; }
 .case-footer { padding:28px 20px; gap:18px; } .case-footer p { flex-basis:70%; }
 .case-reading a { width:100%; } .case-breadcrumb { font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Keep the shared sidebar and footer in the original site style. */
body.case-layout { padding:0 !important; }
.case-main h1,.case-main h2,.case-main h3 { color:var(--case-text); background:none; -webkit-text-fill-color:currentColor; }
.case-layout > .footer { margin-left:210px; }
.case-layout > .header .railcol:empty { display:none; }
@media(max-width:900px) { .case-layout > .footer { margin-left:0; } }
