/* Kontrastkopf materials. CD colours and typography remain canonical.
 * One layer per component; no nested backdrop filters or JavaScript dependencies.
 * Inspired by apple-design/references/liquid-glass.md (community skill).
 */
:root {
 --kk-glass-tint:rgb(11 11 12 / .60);
 --kk-glass-reading:rgb(11 11 12 / .88);
 --kk-glass-navigation:rgb(11 11 12 / .78);
 --kk-glass-rim:rgb(255 255 255 / .13);
 --kk-glass-light:rgb(255 255 255 / .055);
 --kk-glass-shadow:0 8px 32px rgb(0 0 0 / .12);
 --kk-glass-blur:32px;
}
/* Specificity deliberately matches the page components, without !important. */
body .kk-glass.kk-glass,body .contact-page .jep-contact-box,body .service-landing .section:is(.white,.paper) {
 background:linear-gradient(135deg,rgb(255 255 255 / .025),transparent 45%),var(--kk-glass-tint);
 color:var(--paper);
 border:1px solid var(--kk-glass-rim);
 border-radius:20px;
 box-shadow:inset 0 1px 0 var(--kk-glass-light),var(--kk-glass-shadow);
 -webkit-backdrop-filter:blur(var(--kk-glass-blur));
 backdrop-filter:blur(var(--kk-glass-blur));
}
body .kk-glass--control.kk-glass {border-radius:999px;--kk-glass-blur:12px;}
body .kk-glass--reading.kk-glass {--kk-glass-tint:var(--kk-glass-reading);}
.brand-editorial .entry-aside :is(dt,dd,p,a) {color:var(--paper);}
.brand-editorial .entry-aside .entry-service-links a {border-color:var(--kk-glass-rim);}
.brand-editorial .entry-aside a[target="_blank"] {background:var(--acid);color:var(--ink);border-color:var(--acid);}
/* Image and copy share one glass shell. A short feather softens their seam;
 * image/copy geometry stays separate at every breakpoint. */
:is(.brand-story,.brand-editorial) :is(.reference-media,.post-card-image) {
 -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);
 mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);
}
/* Dark, opaque reading surfaces keep motion behind the content. */
.brand-editorial .entry-layout>.entry-content,.brand-editorial .post-entry {border-radius:16px;}
@media(max-width:1100px) {
 :root {--kk-glass-blur:18px;}
 body .kk-glass.kk-glass,body .contact-page .jep-contact-box,body .service-landing .section:is(.white,.paper) {border-radius:16px;}
 body .kk-glass--control.kk-glass {border-radius:999px;}
 .brand-editorial .entry-aside.kk-glass {position:relative;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 body .kk-glass.kk-glass,body .contact-page .jep-contact-box,body .service-landing .section:is(.white,.paper) {background:var(--kk-color-night);}
}
@media(prefers-reduced-transparency:reduce) {
 body .kk-glass.kk-glass,body .contact-page .jep-contact-box,body .service-landing .section:is(.white,.paper) {background:var(--kk-color-night);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media(prefers-contrast:more) {
 body .kk-glass.kk-glass,body .contact-page .jep-contact-box,body .service-landing .section:is(.white,.paper) {background:var(--kk-color-night);border-color:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;}
}

@media(forced-colors:active) {
 body .kk-glass.kk-glass,body .contact-page .jep-contact-box,body .service-landing .section:is(.white,.paper) {background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
}

@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) {
 :is(.brand-story,.brand-editorial) :is(.reference-media,.post-card-image) {-webkit-mask-image:none;mask-image:none;}
}

/* Avoid repainting large backdrop filters during phone scrolling. */
@media(max-width:767px) {
 body .kk-glass.kk-glass,body .contact-page .jep-contact-box,body .service-landing .section:is(.white,.paper) {-webkit-backdrop-filter:none;backdrop-filter:none;--kk-glass-tint:rgb(11 11 12 / .86);}
}