/* Aviation and paper details, without color treatment on photographs. */
.intro-experience{z-index:4}
/* The sticky signature stays legible when cream pricing cards pass beneath it. */
.scroll-brand{background:var(--mat-panel);border-radius:12px;box-shadow:0 0 0 8px var(--mat-panel)}
.mobile-fixed-header{background:var(--mat-bg)}
.intro-hero{background-image:url('/mat-site/20261014-mobile/mat/paper-texture.webp');background-size:800px;background-blend-mode:multiply}
/* Contain the lens to its gallery band; it must never sit behind the bio. */
#hero-carousel{clip-path:inset(-20px 0 -80px)}
.contact-crown,.contact-crown-sequence{filter:none!important}
.contact-crown-sequence{z-index:7}
.mat-memory-collage{position:absolute;inset:0;z-index:6;pointer-events:none}
.mat-memory{position:absolute;bottom:2%;width:17%;max-width:215px;margin:0;padding:7px 7px 9px;background:#fbfaf5;color:#1f3151;box-shadow:0 8px 24px #0003;opacity:0;will-change:transform,opacity;border-radius:3px}
.mat-memory:nth-child(1){left:7%}.mat-memory:nth-child(2){left:28%}.mat-memory:nth-child(3){left:50%}.mat-memory:nth-child(4){left:73%}
.mat-memory img{display:block;width:100%;height:18svh;object-fit:contain;background:#fbfaf5;filter:none}
.mat-memory figcaption{font-size:clamp(10px,1vw,14px);line-height:1.15;padding-top:7px;text-align:center}
.contact-ending-art .contact-poster{top:7%;max-height:57svh;justify-content:center;padding-bottom:0;background-image:url('/mat-site/20261014-mobile/mat/paper-texture.webp');background-size:700px;background-blend-mode:multiply}
.mat-web-preview.brand-trace{position:absolute;inset:6%;width:88%;height:88%;border:1px solid var(--mat-border);border-radius:16px;background:var(--mat-panel);color:var(--mat-text);padding:15px;opacity:1!important;box-shadow:0 12px 24px #0002;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.mat-web-bar{font:9px monospace;display:flex;justify-content:space-between;color:var(--mat-text-muted);padding-bottom:8px;border-bottom:1px solid var(--mat-border)}
.mat-web-preview>img{width:90px;height:30px;object-fit:contain;object-position:left}
.mat-web-preview>strong{font-size:24px;line-height:1;letter-spacing:-.04em;margin-top:8px}
.mat-web-preview>em{font-family:Apophis,serif;font-size:29px;line-height:1;color:var(--mat-link)}
.mat-web-lines{display:grid;gap:5px;margin-top:4px}.mat-web-lines i{height:3px;background:var(--mat-border);width:90%}.mat-web-lines i:nth-child(2){width:76%}.mat-web-lines i:nth-child(3){width:60%}
.mat-web-cta{font-size:10px;background:var(--mat-highlight);color:var(--mat-highlight-ink);align-self:flex-start;padding:7px 10px;border-radius:20px;margin-top:auto}
html[data-mat-theme=light] .mat-web-preview>img{filter:brightness(0) saturate(100%) invert(16%) sepia(28%) saturate(1327%) hue-rotate(180deg) brightness(94%) contrast(91%)}
@media(max-width:700px){
 .mat-memory{width:22%;padding:4px 4px 6px;bottom:5%}.mat-memory:nth-child(1){left:1%}.mat-memory:nth-child(2){left:25%}.mat-memory:nth-child(3){left:50%}.mat-memory:nth-child(4){left:76%}
 .mat-memory img{height:15svh}.mat-memory figcaption{font-size:8px;padding-top:4px}
 .contact-ending-art .contact-poster{top:12%;max-height:49svh}
}
@media(prefers-reduced-motion:reduce){.mat-memory{will-change:auto}}

/* Mobile content must flow around the console, not underneath it. The original
   device composition used an absolutely positioned console beside a tiny bio. */
@media(max-width:700px){
 .intro-services .services-heading{display:flex;flex-direction:column;gap:24px}
 .intro-services .client-console{position:relative;inset:auto;align-self:center;width:180px;flex:0 0 auto;margin:0;transform:none!important}
 .intro-services .services-heading .author{width:100%;min-width:0;align-items:center}
 .intro-services .services-heading .author>div{min-width:0;flex:1}
 .intro-services .services-heading .author>img{width:112px;height:84px;flex:0 0 112px}
 /* Match the source selector's specificity so its late transparent-header rule
    cannot expose scrolling titles behind the signature and controls. */
 .mobile-fixed-header:not([hidden]),
 html[data-mat-theme="light"] .mobile-fixed-header:not([hidden]){
  background:var(--mat-bg);border-bottom:1px solid var(--mat-border);
  min-height:84px;padding:15px 20px;backdrop-filter:none;-webkit-backdrop-filter:none;
 }
 .mobile-fixed-header:not([hidden])>a{width:160px;height:54px;display:flex;align-items:center}
 .mobile-fixed-header:not([hidden])>a img{width:160px;height:54px;transform:none;object-fit:contain}
 .intro-services,.projects-section,.subscription-section{scroll-margin-top:100px}
 .projects-section .project-title{font-size:clamp(30px,8.8vw,44px);max-width:100%}
}
/* Service artwork is graded in the delivered media, including its poster.
   WebKit video compositing does not reliably support SVG URL filters. */
.feature-video{filter:none!important}