@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
html{color-scheme:light}
@media (prefers-color-scheme: dark){html{color-scheme:dark}}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Rechtstexte */
.legal{max-width:44rem;padding-block:3rem 0}
.legal h1{font-weight:800;font-stretch:110%;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.025em;margin-bottom:1.5rem}
.legal h2{font-weight:700;font-size:1.25rem;margin:2rem 0 .5rem}
.legal p,.legal ul{margin:0 0 .9rem;color:var(--ink-2)}
.legal address{font-style:normal;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Layout: Druckbogen-Metapher – Passermarken, Schnittmarken, CMYK-Kontrollstreifen; Inhalt als großzügige Bogenflächen */
:root{
  --paper:#F5F6F4; --sheet:#FFFFFF; --ink:#151617; --ink-2:#4A4E52; --rule:#D9DCD9;
  --c:#00A3E0; --m:#E5007E; --y:#FFE100; --k:#151617;
  --accent:#E5007E; --on-accent:#FFFFFF; --pm-bg:#0D0E0F; --pm-fg:#F2F3F1; --tile:#E7E9E6;
  --f-display:"Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --s-1:.8125rem; --s0:1rem; --s1:1.25rem; --s2:1.75rem; --s3:2.5rem; --s4:clamp(3rem, 9vw, 7.5rem);
  --wrap:72rem;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#111314; --sheet:#1A1D1F; --ink:#EEF0EE; --ink-2:#A6ACB0; --rule:#2E3336;
  --accent:#FF3BA3; --on-accent:#111314; --k:#EEF0EE; --tile:#202427; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#111314; --sheet:#1A1D1F; --ink:#EEF0EE; --ink-2:#A6ACB0; --rule:#2E3336;
  --accent:#FF3BA3; --on-accent:#111314; --k:#EEF0EE; --tile:#202427; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s0);line-height:1.6}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;line-height:1.02;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.04em}
.label{font-family:var(--f-mono);font-size:var(--s-1);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}

/* Kopfzeile */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--paper)}
header.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.logo{font-family:var(--f-display);font-weight:900;font-stretch:125%;font-size:1.5rem;text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}
.logo .dots{display:inline-flex;gap:3px}
.logo .dots i{width:8px;height:8px;border-radius:50%;display:block}
nav.main{display:flex;gap:1.25rem;flex-wrap:wrap}
nav.main a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink-2)}
nav.main a:hover{color:var(--ink)}
@media (max-width:640px){nav.main{display:none}}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;text-decoration:none;padding:.7rem 1.1rem;border:2px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:2px;cursor:pointer;font-family:var(--f-body);font-size:.95rem;transition:background .15s ease;position:relative;overflow:hidden;will-change:transform}

.btn.ghost{background:transparent;color:var(--ink)}

/* Hero als Druckbogen */
.hero{padding-block:var(--s3) var(--s4)}
.sheet{position:relative;background:var(--sheet);border:1px solid var(--rule);padding:clamp(1.5rem, 5vw, 4rem)}
.crop{position:absolute;width:22px;height:22px;pointer-events:none}
.crop::before,.crop::after{content:"";position:absolute;background:var(--ink)}
.crop::before{width:22px;height:1px}
.crop::after{width:1px;height:22px}
.crop.tl{top:-12px;left:-12px}.crop.tl::before{top:11px;left:0}.crop.tl::after{left:11px;top:0}
.crop.tr{top:-12px;right:-12px}.crop.tr::before{top:11px;right:0}.crop.tr::after{right:11px;top:0}
.crop.bl{bottom:-12px;left:-12px}.crop.bl::before{bottom:11px;left:0}.crop.bl::after{left:11px;bottom:0}
.crop.br{bottom:-12px;right:-12px}.crop.br::before{bottom:11px;right:0}.crop.br::after{right:11px;bottom:0}
.reg{position:absolute;top:50%;right:-34px;width:26px;height:26px;transform:translateY(-50%)}
@media (max-width:640px){.reg{display:none}}
.hero-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:var(--s3)}
.sheet{overflow:visible;isolation:isolate}
.halftone{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg, transparent 34%, rgba(0,0,0,.55) 58%, #000 82%);mask-image:linear-gradient(100deg, transparent 34%, rgba(0,0,0,.55) 58%, #000 82%)}
@media (max-width:640px){.halftone{opacity:.55;-webkit-mask-image:linear-gradient(180deg, transparent 35%, #000 100%);mask-image:linear-gradient(180deg, transparent 35%, #000 100%)}}
.hero h1{--dx:0px;--dy:0px;font-weight:900;font-stretch:115%;font-size:clamp(2.6rem, 8.5vw, 6.5rem);letter-spacing:-.035em;
  text-shadow:calc(var(--dx) * -1) calc(var(--dy) * -.6) 0 color-mix(in srgb, var(--c) 80%, transparent),
              var(--dx) calc(var(--dy) * .4) 0 color-mix(in srgb, var(--m) 75%, transparent),
              calc(var(--dx) * .3) var(--dy) 0 color-mix(in srgb, var(--y) 85%, transparent)}
.hero-hint{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(.75rem,2vw,1.25rem);color:var(--ink-2)}
@media (hover:none){.hero-hint{display:none}}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{max-width:38rem;margin-top:var(--s2);font-size:var(--s1);color:var(--ink-2)}
.hero .actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:var(--s3)}
.colorbar{display:flex;margin-top:var(--s3);height:14px;max-width:22rem}
.colorbar span{flex:1}
.colorbar-legend{display:flex;max-width:22rem;margin-top:.35rem}
.colorbar-legend span{flex:1;text-align:center}

/* Sektionen */
section.block{padding-block:var(--s4) 0}
.section-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:end;margin-bottom:var(--s3)}
@media (max-width:800px){.section-head{grid-template-columns:1fr}}
.section-head h2{font-weight:800;font-stretch:110%;font-size:clamp(1.9rem, 4.4vw, 3.4rem);letter-spacing:-.025em}
.section-head p{color:var(--ink-2);max-width:36rem}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));border-top:2px solid var(--ink)}
@media (max-width:760px){.services{grid-template-columns:1fr}}
.service{padding:var(--s2) var(--s2) var(--s3) 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:1rem;min-width:0}
.services .service:nth-child(odd){border-right:1px solid var(--rule)}
.services .service:nth-child(even){padding-left:var(--s2)}
@media (max-width:760px){.services .service:nth-child(odd){border-right:0}.services .service:nth-child(even){padding-left:0}.service{padding-right:0}}
.service-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.swatch{width:18px;height:18px;border-radius:50%;flex:none}
.service h3{font-weight:800;font-stretch:105%;font-size:var(--s2);letter-spacing:-.015em}
.service p{color:var(--ink-2)}
.service ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.service li{font-size:.85rem;padding:.25rem .6rem;border:1px solid var(--rule);border-radius:999px;background:var(--sheet)}

/* Printmanagement hervorgehoben */
.pm{margin-top:var(--s4);background:var(--pm-bg);color:var(--pm-fg)}
html.motion .pm{margin-top:0}
.pm .wrap{padding-block:var(--s4)}
.pm .section-head p{color:color-mix(in srgb, var(--pm-fg) 72%, transparent)}
.pm .label{color:color-mix(in srgb, var(--pm-fg) 62%, transparent)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:0;border-top:1px solid color-mix(in srgb, var(--pm-fg) 25%, transparent)}
@media (max-width:860px){.steps{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{padding:var(--s2) var(--s1) var(--s2) 0;border-bottom:1px solid color-mix(in srgb, var(--pm-fg) 25%, transparent);display:flex;flex-direction:column;gap:.5rem;min-width:0}
.steps .n{font-family:var(--f-mono);font-size:var(--s-1);color:var(--y)}
.steps h3{font-weight:700;font-size:var(--s1);font-stretch:100%}
.steps p{color:color-mix(in srgb, var(--pm-fg) 72%, transparent);font-size:.95rem}

/* Vorteile */
.benefits{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--s2)}
@media (max-width:800px){.benefits{grid-template-columns:1fr}}
.benefit{border-top:2px solid var(--ink);padding-top:var(--s1);display:flex;flex-direction:column;gap:.5rem}
.benefit h3{font-weight:700;font-size:var(--s1);font-stretch:100%}
.benefit p{color:var(--ink-2)}

/* Spezifikation – typisches Druckprojekt */
.spec{margin-top:var(--s3);overflow-x:auto;border:1px solid var(--rule);background:var(--sheet)}
.spec table{width:100%;border-collapse:collapse;min-width:520px}
.spec th,.spec td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--rule);font-size:.95rem;vertical-align:top}
.spec th{font-family:var(--f-mono);font-weight:500;font-size:var(--s-1);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);width:34%}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec td{font-variant-numeric:tabular-nums}

/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s3);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.contact .info{display:flex;flex-direction:column;gap:var(--s1)}
.contact .info h2{font-weight:800;font-stretch:110%;font-size:clamp(2rem, 5vw, 3.5rem);letter-spacing:-.025em}
.contact .info p{color:var(--ink-2)}
.mail{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.mail code{font-family:var(--f-mono);font-size:1.05rem;padding:.55rem .8rem;border:1px solid var(--rule);background:var(--sheet);user-select:all}
form.inq{background:var(--sheet);border:1px solid var(--rule);padding:var(--s2);display:grid;gap:1rem;position:relative}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--f-mono);font-size:var(--s-1);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:.65rem .75rem;width:100%}
.field textarea{min-height:7.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);padding:.4rem .8rem;border:1px solid var(--rule);border-radius:999px;cursor:pointer;background:var(--paper)}
.chips input:checked + label{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input:focus-visible + label{outline:3px solid var(--accent);outline-offset:2px}
.note{font-size:.9rem;color:var(--ink-2)}
.ok{border-left:4px solid var(--accent);padding:.75rem 1rem;background:var(--paper)}

footer{margin-top:var(--s4);border-top:1px solid var(--rule)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:var(--s2);color:var(--ink-2);font-size:.9rem}
footer nav{display:flex;gap:1.25rem}

/* ================= Motion ================= */
html,body{overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;z-index:20;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--c),var(--m) 55%,var(--y));pointer-events:none}
.sw{display:inline-block;white-space:nowrap}
.split-mask h2 .sw{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;vertical-align:top}
.swi,.sc{display:inline-block;will-change:transform}
.service{display:block}
.service-in{display:flex;flex-direction:column;gap:1rem;will-change:transform}
.lined{position:relative;border-top-color:transparent!important}
.grid-line{position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--ink);transform-origin:0 50%;pointer-events:none}
.steps .grid-line{top:-1px;height:1px;background:color-mix(in srgb,var(--pm-fg) 35%,transparent)}
.count{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.media{overflow:hidden;margin:0}
.media img{display:block;width:100%;height:auto;will-change:transform}
.btn-l{display:inline-flex;align-items:center;gap:.5rem;position:relative;z-index:1;pointer-events:none}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--m) 50%,transparent) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
.logo .dots i{will-change:transform}
.pm-fade{height:18vh;background:linear-gradient(to bottom,var(--pm-bg),var(--paper))}

/* Wellpappen-Sequenz */
.board-seq{display:none;position:relative;height:100vh;height:100svh;overflow:clip;background:var(--paper)}
html.motion .board-seq{display:block}
.board-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1600px;perspective-origin:50% 45%}
.board,.board-shadow{grid-area:1/1}
.board{--bw:min(56vw,540px);--bh:calc(var(--bw)*.68);--bt:max(9px,calc(var(--bw)*.026));position:relative;width:var(--bw);height:var(--bh);transform-style:preserve-3d;will-change:transform}
@media (max-width:760px){.board{--bw:min(72vw,420px)}}
.face{position:absolute;left:50%;top:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.f-front,.f-back{width:var(--bw);height:var(--bh);margin:calc(var(--bh)/-2) 0 0 calc(var(--bw)/-2)}
.f-front{transform:translateZ(calc(var(--bt)/2));
  background:
    linear-gradient(130deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%,rgba(0,0,0,.07)),
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(60,50,30,.028) calc(var(--bt)*.8),rgba(0,0,0,0) calc(var(--bt)*1.6)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    #F6F6F2}
.f-back{transform:rotateY(180deg) translateZ(calc(var(--bt)/2));
  background:
    linear-gradient(130deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%),
    repeating-linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.025) calc(var(--bt)*.8),rgba(255,255,255,0) calc(var(--bt)*1.6)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--pm-bg)}
.f-top,.f-bottom{width:var(--bw);height:var(--bt);margin:calc(var(--bt)/-2) 0 0 calc(var(--bw)/-2);background-size:calc(var(--bt)*1.5) 100%;background-repeat:repeat-x}
/* Schnittkante: weiße Decke, Welle aus Kraftpapier, schwarze Gegendecke */
.f-top{transform:rotateX(90deg) translateZ(calc(var(--bh)/2));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='none'%3E%3Crect width='24' height='12' fill='%23231d16'/%3E%3Cpath d='M0 10.4C6 10.4 6 1.6 12 1.6S18 10.4 24 10.4' fill='none' stroke='%23d8c39d' stroke-width='1.5'/%3E%3Crect width='24' height='1.7' fill='%230D0E0F'/%3E%3Crect y='10.3' width='24' height='1.7' fill='%23F6F6F2'/%3E%3C/svg%3E")}
.f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--bh)/2));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='none'%3E%3Crect width='24' height='12' fill='%23231d16'/%3E%3Cpath d='M0 1.6C6 1.6 6 10.4 12 10.4S18 1.6 24 1.6' fill='none' stroke='%23c9b38b' stroke-width='1.5'/%3E%3Crect width='24' height='1.7' fill='%23F6F6F2'/%3E%3Crect y='10.3' width='24' height='1.7' fill='%230D0E0F'/%3E%3C/svg%3E")}
.f-left,.f-right{width:var(--bt);height:var(--bh);margin:calc(var(--bh)/-2) 0 0 calc(var(--bt)/-2)}
.f-right{transform:rotateY(90deg) translateZ(calc(var(--bw)/2));background:linear-gradient(90deg,#E9E8E2 0 14%,#b9a27a 14% 20%,#8f7a58 20% 48%,#c9b38b 48% 54%,#8f7a58 54% 80%,#b9a27a 80% 86%,#0D0E0F 86%)}
.f-left{transform:rotateY(-90deg) translateZ(calc(var(--bw)/2));background:linear-gradient(90deg,#0D0E0F 0 14%,#b9a27a 14% 20%,#8f7a58 20% 48%,#c9b38b 48% 54%,#8f7a58 54% 80%,#b9a27a 80% 86%,#E9E8E2 86%)}
.board-shadow{width:calc(var(--bw-s,min(56vw,540px))*1.05);height:min(14vw,90px);border-radius:50%;background:radial-gradient(closest-side,rgba(20,18,14,.32),rgba(20,18,14,0));will-change:transform,opacity}
@media (max-width:760px){.board-shadow{--bw-s:min(72vw,420px)}}
.board-cap{position:absolute;left:0;right:0;text-align:center;color:var(--ink-2);padding-inline:16px}
.cap-1{top:14vh}.cap-2{bottom:12vh;opacity:0}
.board-fill{position:absolute;inset:0;background:var(--pm-bg);opacity:0;pointer-events:none}
html.reduced .board-seq{display:none}

html.motion .pm .wrap{padding-top:var(--s3)}
.hero h1{word-spacing:.1em}

/* Logo */
.logo img{display:block;height:44px;width:auto}
@media (max-width:640px){.logo img{height:38px}}

/* Referenzen */
.works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3) var(--s2);align-items:start}
.work{grid-column:span var(--span,6);margin:0;display:flex;flex-direction:column;gap:.85rem;min-width:0}
.work-frame{position:relative;aspect-ratio:var(--ar);background:var(--tile);padding:5%;display:grid;place-items:center}
.work-frame img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(20,18,14,.16))}
.work figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
.work figcaption .label{flex-basis:100%}
.work figcaption strong{font-family:var(--f-display);font-weight:700;font-size:var(--s1);font-stretch:100%}
.work figcaption .client{color:var(--ink-2);font-size:.95rem}
@media (max-width:860px){.work{grid-column:span 12}.work-frame{aspect-ratio:auto;max-height:80vh}.work-frame img{height:auto;max-height:70vh}}
.clients{margin-top:var(--s4);display:grid;gap:var(--s2)}
.clients-head{display:grid;gap:.4rem}
.clients-head h3{font-weight:800;font-stretch:105%;font-size:var(--s2);letter-spacing:-.015em}
.client-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s0)}
@media (max-width:640px){.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.client-logo{background:#FFFFFF;box-shadow:0 0 0 1px var(--rule);display:grid;place-items:center;aspect-ratio:16/9;padding:12% 14%}
.client-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}