/* =====================================================================
   customico.com v3 — design system
   Static CSS, no framework, no external requests.
   Direction: "specification sheet" — quiet, exact, left-aligned,
   section names in a left rail, hairline structure, one accent (logo blue).
   ===================================================================== */

/* ---------- 0. Fonts (self-hosted, OFL) ------------------------------
   IBM Plex Sans, variable (wght 100–700), from @fontsource-variable/ibm-plex-sans
   (npm) or IBM/plex GitHub releases. Files go to /fonts/. If the files are
   absent the system stack below is used and the layout still holds.      */
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  font-weight:100 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-weight:100 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibm-plex-sans-latin-wght-italic.woff2") format("woff2");
  font-weight:100 700; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibm-plex-sans-latin-ext-wght-italic.woff2") format("woff2");
  font-weight:100 700; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 1. Tokens ------------------------------------------------ */
:root{
  color-scheme:light dark;

  /* colour — light (default) */
  --bg:#ffffff;
  --surface:#f6f7f9;          /* panels: product block, "Where AI is used" */
  --fg:#101317;               /* v2 ink */
  --muted:#5f6672;            /* 5.8:1 on --bg, 5.4:1 on --surface (v2 #6b7280 was 4.5 on surface) */
  --line:#ececf0;             /* v2 hairline — decorative rules */
  --line-strong:#d8dade;      /* v2 underline grey — card tops, pill outlines */
  --accent:#1d5fd1;           /* logo hue 216°, darkened: 5.8:1 on white, white text on it 5.8:1 */
  --accent-hover:#174ea9;
  --on-accent:#ffffff;
  --focus:var(--accent);
  --logo-blue:#5599ff;        /* logo only; never for text on light */

  /* CTA band — always the ink field in light mode */
  --band-bg:#101317;
  --band-fg:#f3f4f6;
  --band-muted:#b4bac3;       /* 9.5:1 on band */
  --band-accent:#5599ff;      /* 6.5:1 on band; button text = band-bg */
  --band-on-accent:#101317;
  --band-accent-hover:#7fb2ff;

  /* type */
  --font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:.8125rem;           /* 13 — legal footer, pills, labels */
  --fs-sm:.9375rem;           /* 15 — nav, meta, dt */
  --fs-base:1.0625rem;        /* 17 — body */
  --fs-md:1.25rem;            /* 20 — h3, lede, rail h2 */
  --fs-lg:clamp(1.375rem,1.15rem + .9vw,1.75rem);   /* 22–28 — case h2, stats */
  --fs-xl:clamp(1.75rem,1.3rem + 1.9vw,2.5rem);     /* 28–40 — band h2, case h1 on mobile */
  --fs-2xl:clamp(2rem,1.35rem + 2.7vw,3rem);        /* 32–48 — case h1, 404 */
  --fs-3xl:clamp(2.25rem,1.35rem + 3.8vw,3.5rem);   /* 36–56 — home h1 */
  --lh-body:1.6;
  --lh-tight:1.12;
  --measure:38rem;            /* ~68 characters at 17px */

  /* space (4px base) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
  --section:clamp(4rem,2.8rem + 5vw,7rem);
  --gutter:clamp(1.25rem,.8rem + 2.2vw,3rem);
  --max:76rem;
  --col-gap:2rem;

  /* shape */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;

  --dur:150ms;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#101317;             /* v2 ink becomes the ground */
    --surface:#171b21;
    --fg:#eceef1;             /* 15.7:1 */
    --muted:#9aa1ac;          /* 7.3:1 on bg, 6.8:1 on surface */
    --line:#23272e;
    --line-strong:#343a43;
    --accent:#5599ff;         /* logo blue: 6.5:1 on bg */
    --accent-hover:#7fb2ff;
    --on-accent:#101317;
    --band-bg:#171b21;        /* band = raised surface in dark mode */
  }
}

/* ---------- 2. Base -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; font-weight:500; line-height:var(--lh-tight); letter-spacing:-.01em; text-wrap:balance}
p,ul,ol,dl,figure{margin:0}
p{text-wrap:pretty}
ul,ol{padding:0; list-style:none}
strong{font-weight:600}
address{font-style:normal}

a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
  transition:color var(--dur) ease, text-decoration-color var(--dur) ease}
a:hover{color:var(--accent-hover); text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}

.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:var(--gutter); top:-3rem; z-index:10; background:var(--fg); color:var(--bg);
  padding:var(--s2) var(--s4); border-radius:var(--r-sm); text-decoration:none; font-size:var(--fs-sm)}
.skip:focus{top:var(--s3)}

.container{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:var(--s4)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- 3. Buttons and links ------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:0 1.25rem; border-radius:var(--r-sm);
  background:var(--accent); color:var(--on-accent);
  font:600 var(--fs-sm)/1 var(--font); letter-spacing:0; text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur) ease;
}
.btn:hover{background:var(--accent-hover); color:var(--on-accent)}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"]{background:var(--line-strong); color:var(--muted); pointer-events:none}

.link{font-weight:500}                      /* standalone text link (See our work, Services, All work) */
.links{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5)}
.more{margin-top:var(--s6); font-size:var(--fs-sm)}

/* ---------- 4. Header / nav ----------------------------------------- */
.site-header{border-bottom:1px solid var(--line)}
.header-inner{position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:0 var(--s6); padding-block:var(--s3)}
.brand{display:inline-flex; align-items:center; min-height:44px; line-height:0}
.brand img{height:26px; width:auto}
.nav{display:flex; align-items:center; gap:var(--s5)}
.nav a:not(.btn){
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--muted); font-size:var(--fs-sm); font-weight:500; text-decoration:none;
  box-shadow:inset 0 -2px 0 transparent; transition:color var(--dur) ease, box-shadow var(--dur) ease;
}
.nav a:not(.btn):hover{color:var(--fg)}
.nav a[aria-current]:not(.btn){color:var(--fg); box-shadow:inset 0 -2px 0 var(--accent)}
.nav .btn{min-height:40px; padding:0 1rem}

/* mobile: row 1 = logo + Contact button, row 2 = four text links */
@media (max-width:47.99rem){
  .site-header nav{width:100%}
  .nav{gap:var(--s5)}           /* 4 links fit 320px; no overflow container (it would clip focus rings) */
  .nav-cta{position:absolute; top:var(--s3); right:var(--gutter)}
  .nav .btn{min-height:44px}
}
@media (min-width:48rem){
  .header-inner{padding-block:var(--s4)}
  .brand img{height:30px}
  .nav{gap:var(--s6)}
  .nav-cta{margin-left:var(--s2)}
}

/* ---------- 5. Hero (home) ------------------------------------------ */
.hero{padding-block:clamp(4rem,2.5rem + 7vw,9rem) var(--section)}
.hero h1{font-size:var(--fs-3xl); font-weight:450; letter-spacing:-.022em; line-height:1.08; max-width:21ch}
.lede{margin-top:var(--s5); max-width:var(--measure); font-size:var(--fs-md); line-height:1.5; color:var(--muted)}
.hero .actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s6); margin-top:var(--s7)}

/* ---------- 6. Section with left rail ------------------------------- */
.section{padding-block:var(--section); border-top:1px solid var(--line)}
.section > .container{display:grid; gap:var(--s6)}
.section--compact{padding-block:clamp(2rem,1.4rem + 2.5vw,3.5rem)}
.section__title{font-size:var(--fs-md); font-weight:500; letter-spacing:-.005em}
@media (min-width:64rem){
  .section > .container{grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap)}
  .section__head{grid-column:1 / span 3}
  .section__body{grid-column:4 / -1}
  .section__body:only-child{grid-column:1 / -1}
}

/* service lines summary (home "What we do") */
.service-summary{display:grid; gap:var(--s6)}
.service-summary h3{font-size:var(--fs-md); margin-bottom:var(--s2)}
.service-summary p{color:var(--muted)}
@media (min-width:48rem){.service-summary{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--col-gap)}}

/* principles (home + company "How we work") */
.principles{display:grid; gap:0 var(--col-gap)}
.principles > li{padding-block:var(--s5); border-top:1px solid var(--line)}
.principles h2,.principles h3{font-size:var(--fs-base); font-weight:600; margin-bottom:var(--s2); letter-spacing:0}
.principles h3 a{color:var(--fg); text-decoration-color:var(--muted)}
.principles h3 a:hover{color:var(--accent); text-decoration-color:currentColor}
@media (min-width:48rem){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 7. Stage pills ------------------------------------------ */
.stages{display:flex; flex-wrap:wrap; gap:var(--s2)}
.stage{
  display:inline-flex; align-items:center; min-height:1.625rem; padding:0 .625rem;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:500; line-height:1.2; color:var(--fg); white-space:nowrap;
}
.stage--operated{background:var(--surface); border-color:var(--surface)} /* who runs it ≠ stage: filled, not outlined */

/* ---------- 8. Work cards ------------------------------------------- */
.work-grid{display:grid; gap:var(--s7)}
@media (min-width:64rem){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--col-gap)}}
.work-card{position:relative; display:flex; flex-direction:column; gap:var(--s3);
  padding-top:var(--s5); border-top:1px solid var(--line-strong)}
.work-card__logo{height:44px; display:flex; align-items:flex-end; margin-bottom:var(--s3)}
.work-card h2,.work-card h3{font-size:var(--fs-md)}
.work-card .party{font-size:var(--fs-sm); color:var(--muted); margin-top:calc(var(--s2) * -1)}
.work-card .summary{font-size:var(--fs-base)}
.work-card .rel,.work-card .role{font-size:var(--fs-sm); color:var(--muted)}
.work-card .card-link{margin-top:auto; padding-top:var(--s2); font-size:var(--fs-sm); font-weight:500}
.work-card .card-link::after{content:""; position:absolute; inset:0}
.work-card .card-link:focus-visible{outline:none}
.work-card:focus-within{outline:2px solid var(--focus); outline-offset:8px; border-radius:2px}
.work-card:hover h2,.work-card:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.work-card h3 a{color:var(--fg); text-decoration-color:var(--line-strong)}
.work-card h3 a:hover{color:var(--accent); text-decoration-color:currentColor}
.work-card:hover .partner-logo{opacity:1}

/* partner / product logos — monochrome, one optical class each */
.partner-logo{width:auto; filter:grayscale(1); opacity:.85; transition:opacity var(--dur) ease}
.logo-mark{height:44px}        /* square marks (Wilczy Łup) */
.logo-word{height:22px}        /* wordmarks (Lovetopus) */
.logo-word-sm{height:15px}     /* wide wordmarks (Brandworder) */
.logo-boxed{height:30px}       /* boxed marks (Peoplemore) */
.logo-lockup{height:34px}      /* Dictorio lockup — uses its own dark version, no filter */
@media (prefers-color-scheme:dark){
  .partner-logo{filter:grayscale(1) invert(1); opacity:.9}
}

/* ---------- 9. Product block ---------------------------------------- */
.product{display:grid; gap:var(--s5); padding:clamp(1.5rem,1rem + 3vw,3rem); background:var(--surface); border-radius:var(--r-lg)}
.product + .product{margin-top:var(--s6)}
.product__head{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4)}
.product h3{font-size:var(--fs-lg)}
.product .tag{font-weight:600}
.product .prose > * + *{margin-top:var(--s3)}
@media (min-width:48rem){
  .product{grid-template-columns:12rem minmax(0,1fr); column-gap:var(--s7)}
  .product__logo{padding-top:var(--s2)}
}

/* ---------- 10. CTA band -------------------------------------------- */
.band{background:var(--band-bg); color:var(--band-fg); padding-block:clamp(3.5rem,2.5rem + 4vw,6rem)}
.band .container{display:grid; gap:var(--s5); align-items:end}
.band h2{font-size:var(--fs-xl); font-weight:450; letter-spacing:-.018em; max-width:22ch}
.band p{color:var(--band-muted); max-width:var(--measure); margin-top:var(--s4)}
.band .btn{background:var(--band-accent); color:var(--band-on-accent); justify-self:start}
.band .btn:hover{background:var(--band-accent-hover)}
.band :focus-visible{outline-color:var(--band-accent)}
@media (min-width:64rem){
  .band .container{grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap)}
  .band__text{grid-column:1 / span 8}
  .band .btn{grid-column:10 / -1; justify-self:end}
}

/* ---------- 11. Footer ---------------------------------------------- */
.site-footer{padding-block:var(--s7) var(--s8); border-top:1px solid var(--line);
  font-size:var(--fs-xs); line-height:1.85; color:var(--muted); font-variant-numeric:tabular-nums}
.site-footer .legal a{color:inherit; text-decoration-color:var(--line-strong)}
.site-footer .legal a:hover{color:var(--fg); text-decoration-color:currentColor}
.sep{padding:0 .5rem; color:var(--line-strong)}
.footer-links{display:flex; flex-wrap:wrap; gap:0 var(--s5); margin-top:var(--s5)}
.footer-links a{display:inline-flex; align-items:center; min-height:44px; color:var(--fg); text-decoration:none; font-size:var(--fs-sm)}
.footer-links a:hover{color:var(--accent); text-decoration:underline}
@media (max-width:34rem){.sep{display:block; height:0; overflow:hidden}}

/* ---------- 12. Case-study page ------------------------------------- */
.case-hero{padding-block:clamp(3rem,2rem + 5vw,6rem) clamp(2rem,1.5rem + 2vw,3.5rem)}
.case-hero__meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s5); margin-bottom:var(--s6)}
.case-hero h1{font-size:var(--fs-2xl); font-weight:450; letter-spacing:-.02em; line-height:1.1; max-width:22ch}
.case-hero .lede{margin-top:var(--s4)}

.case-layout{display:grid; gap:var(--s7); padding-bottom:var(--section)}
@media (min-width:64rem){
  .case-layout{grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap)}
  .case-main{grid-column:1 / span 7; grid-row:1}
  .case-aside{grid-column:9 / -1; grid-row:1; position:sticky; top:var(--s5); align-self:start}
}

/* facts sidebar ("At a glance") and company facts table share one pattern */
.facts-title{font-size:var(--fs-sm); font-weight:600; margin-bottom:var(--s3)}
.facts{border-top:1px solid var(--line-strong); font-size:var(--fs-sm); font-variant-numeric:tabular-nums}
.facts > div{display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:var(--s3); padding-block:var(--s3); border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.facts dd ul li + li{margin-top:var(--s1)}
.facts--wide{font-size:var(--fs-base)}
@media (min-width:48rem){.facts--wide > div{grid-template-columns:14rem minmax(0,1fr); gap:var(--s6)}}

.case-main > section + section{margin-top:clamp(3rem,2.4rem + 2vw,4.5rem)}
.case-main h2{font-size:var(--fs-lg); margin-bottom:var(--s5)}

.components{border-top:1px solid var(--line)}
.components > li{padding-block:var(--s4); border-bottom:1px solid var(--line); max-width:var(--measure)}

/* "Where AI is used" — mandatory on every case */
.ai-use{display:grid; background:var(--surface); border-radius:var(--r-md)}
.ai-use > div{padding:var(--s5)}
.ai-use > div + div{border-top:1px solid var(--line)}
.ai-use dt{display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm); font-weight:600; margin-bottom:var(--s2)}
.ai-use dt svg{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--muted)}
.ai-use dd{margin:0}
.ai-use .none{font-weight:600}
@media (min-width:40rem){
  .ai-use{grid-template-columns:1fr 1fr}
  .ai-use > div + div{border-top:0; border-left:1px solid var(--line)}
}

/* engineering facts — max 3, from facts_approved only */
.stats{display:grid; gap:var(--s5)}
.stats > li{padding-top:var(--s4); border-top:1px solid var(--line-strong)}
.stats .value{display:block; font-size:var(--fs-lg); font-weight:500; letter-spacing:-.01em; line-height:1.2; font-variant-numeric:tabular-nums lining-nums}
.stats .label{display:block; margin-top:var(--s2); font-size:var(--fs-sm); color:var(--muted)}
@media (min-width:48rem){.stats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--col-gap)}}

/* visuals — only with approved images */
.figure{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:var(--s4)}
.figure img{border-radius:var(--r-sm); width:100%; height:auto}
.figure figcaption{margin-top:var(--s3); font-size:var(--fs-sm); color:var(--muted)}
.figures{display:grid; gap:var(--s5)}
@media (min-width:48rem){.figures{grid-template-columns:1fr 1fr}}

/* previous / next */
.pager{border-top:1px solid var(--line); padding-block:var(--s7)}
.pager .container{display:grid; gap:var(--s5)}
.pager__next{display:inline-grid; gap:var(--s1); text-decoration:none; color:var(--fg); max-width:32ch}
.pager__next .k{font-size:var(--fs-sm); color:var(--muted)}
.pager__next .t{font-size:var(--fs-lg); font-weight:500; line-height:1.25; text-decoration:underline; text-decoration-color:var(--line-strong); text-decoration-thickness:1px; text-underline-offset:.2em}
.pager__next:hover .t{color:var(--accent); text-decoration-color:currentColor}
@media (min-width:48rem){
  .pager .container{grid-template-columns:1fr auto; align-items:end}
}

/* ---------- 13. Services page --------------------------------------- */
.service + .service{margin-top:var(--s8)}
.service h2{font-size:var(--fs-lg); margin-bottom:var(--s4)}
.service h3{font-size:var(--fs-sm); font-weight:600; margin:var(--s5) 0 var(--s2)}
.bullets > li{position:relative; padding-left:1.1rem; max-width:var(--measure)}
.bullets > li + li{margin-top:var(--s2)}
.bullets > li::before{content:""; position:absolute; left:0; top:.72em; width:.4rem; height:1px; background:var(--muted)}
.evidence{margin-top:var(--s5); font-size:var(--fs-sm)}
.evidence strong{font-weight:600; margin-right:var(--s2)}
.steps{display:grid; gap:var(--s6)}
.steps h3{font-size:var(--fs-md); margin-bottom:var(--s2)}
@media (min-width:48rem){.steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--col-gap)}}
.tech{columns:2 12rem; column-gap:var(--col-gap)}
.tech li{break-inside:avoid; padding-block:var(--s2); border-top:1px solid var(--line)}

/* ---------- 14. Contact --------------------------------------------- */
.contact-email{display:inline-block; font-size:var(--fs-xl); font-weight:450; letter-spacing:-.015em; overflow-wrap:anywhere; user-select:all}

/* ---------- 15. Page head (inner pages) and 404 ---------------------- */
.page-head{padding-block:clamp(3rem,2rem + 5vw,6rem) var(--s7)}
.page-head h1{font-size:var(--fs-2xl); font-weight:450; letter-spacing:-.02em}
.notfound{padding-block:clamp(5rem,3rem + 10vw,10rem)}
.notfound h1{font-size:var(--fs-2xl); font-weight:450; letter-spacing:-.02em}
.notfound p{margin-top:var(--s4); color:var(--muted)}
.notfound .links{margin-top:var(--s6)}

/* ---------- 16. Motion ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important}
}

/* ---------- 17. Print (company details get printed by counterparties) */
@media print{
  .site-header nav,.band,.pager,.skip{display:none}
  body{color:#000; background:#fff}
  a{color:#000}
  .case-aside{position:static}
}