:root{
    --ink:#20011D;--ink-2:#2c0828;--paper:#ffffff;
    --muted:#6b5a67;--line:rgba(32,1,29,.12);
    --maxw:1180px;--pad:clamp(20px,5vw,64px);
  }
.r-tl{border-top-left-radius:clamp(18px,3vw,34px)}
.r-tr{border-top-right-radius:clamp(18px,3vw,34px)}
.r-bl{border-bottom-left-radius:clamp(18px,3vw,34px)}
.r-br{border-bottom-right-radius:clamp(18px,3vw,34px)}
.case-hero{padding-top:clamp(34px,6vw,76px);padding-bottom:clamp(20px,3vw,34px)}
.eyebrow{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--muted);margin:0 0 18px;display:flex;align-items:center;gap:12px}
h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-optical-sizing:auto;
    font-size:clamp(3.4rem,11vw,7rem);line-height:.9;letter-spacing:-.025em;margin:0;}
.lede{max-width:48ch;margin:22px 0 0;font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--muted);line-height:1.45}
.hero-banner{margin:clamp(26px,4vw,46px) 0 0;overflow:hidden}
.hero-banner img{width:100%;height:auto}
.hero-cap{margin-top:10px;font-size:.9rem;color:var(--muted)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 40px;
    border-top:1px solid var(--line);margin-top:clamp(40px,6vw,72px)}
.sec{padding-block:clamp(40px,7vw,82px)}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:24px}
.sec h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0;letter-spacing:-.01em}
.prose p:last-child{margin-bottom:0}
.plate{margin:0}
.plate .frame{overflow:hidden;background:var(--ink-2);display:block}
.plate img{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.plate:hover img{transform:scale(1.03)}
.plate figcaption{display:flex;justify-content:space-between;gap:14px;margin-top:11px;font-size:.92rem}
.c-t{font-weight:600}
.c-s{color:var(--muted);white-space:nowrap}
.plate-lg{margin-top:clamp(44px,6.5vw,78px)}
.full{margin-bottom:22px}

.more a{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.4rem,3vw,2rem);display:inline-flex;align-items:center;gap:14px}
.more a:hover .ar{transform:translateX(-6px)}
.scrollhint{display:inline-flex;align-items:center;gap:14px;margin-top:36px;
    color:var(--muted);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
    font-weight:600;transition:opacity .5s ease}
.scrollhint .bar{position:relative;width:1px;height:42px;background:var(--line);overflow:hidden;display:inline-block}
.scrollhint .bar::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;
    background:var(--ink);animation:railslide 1.9s cubic-bezier(.7,0,.3,1) infinite}
@keyframes railslide{0%{top:-50%}100%{top:100%}}
body.scrolled-once .scrollhint{opacity:0;pointer-events:none}
@media (max-width:760px){
    .bar{height:68px}
    nav ul{gap:16px}
    nav a{font-size:.92rem}
    
  }
@media (prefers-reduced-motion:reduce){
    *{transition:none!important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}.plate img{transition:none}
    .scrollhint .bar::after{animation:none}.rail-i .dot,.rail-i .n{transition:none}
  }

/* ---------- 04: de fire formater passer præcist sammen i én blok ---------- */
.fmt-wrap{margin-top:clamp(40px,6vw,72px);container-type:inline-size}
.fmt{display:grid;gap:1.5cqw;
  grid-template-columns:27.997cqw 24.77cqw 44.233cqw;grid-template-rows:23.501cqw 24.77cqw}
.tile{position:relative;margin:0;overflow:hidden;background:var(--ink-2);
  opacity:0;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.03)}
.t-screen{grid-column:1;grid-row:1/3;transform:translateX(-32px)}
.t-klaeb{grid-column:2/4;grid-row:1;transform:translateY(-32px);transition-delay:.1s}
.t-some{grid-column:2;grid-row:2;transform:translateY(32px);transition-delay:.2s}
.t-mail{grid-column:3;grid-row:2;transform:translateX(32px);transition-delay:.3s}
.fmt-wrap.in .tile{opacity:1;transform:none}
.chip{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:baseline;gap:8px;padding:9px 13px;
  background:#fff;color:var(--ink);font-size:.84rem;font-weight:600;line-height:1;border-top-right-radius:12px;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.chip span{color:var(--muted);font-weight:500}
.tile:hover .chip{opacity:1;transform:none}
.fmt-legend{display:none;list-style:none;margin:14px 0 0;padding:0;font-size:.88rem;color:var(--muted)}
.fmt-legend b{color:var(--ink);font-weight:600}
.fmt-note{margin:14px 0 0;font-size:.92rem;color:var(--muted)}
@media (hover:none),(max-width:700px){
  .chip{display:none}
  .fmt-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
}
@supports not (container-type:inline-size){
  .fmt{grid-template-columns:28fr 24.77fr 44.23fr;grid-template-rows:auto auto;gap:14px}
  .tile img{height:auto}
}
@media (prefers-reduced-motion:reduce){
  .tile{opacity:1;transform:none}
}