/* Shared appearance tokens for the animated home, supporting pages and dialogs.
   Photo pixels remain untouched. Surface texture never sits above media or text. */
:root,
:root[data-mat-theme="dark"] {
  --mat-bg: #1f1928;
  --mat-panel: #2b2437;
  --mat-panel-raised: #372f43;
  --mat-text: #f4f1e9;
  --mat-text-muted: #c4bfcc;
  --mat-border: #62576f;
  --mat-highlight: #f0dda1;
  --mat-highlight-ink: #23334d;
  --mat-link: #f0dda1;
  --mat-texture-wash: rgba(43,36,55,.96);
  --mat-focus: #f0dda1;
  color-scheme: only dark;
}
:root[data-mat-theme="light"] {
  --mat-bg: #f4f1e9;
  --mat-panel: #fbfaf5;
  --mat-panel-raised: #e7e9e9;
  --mat-text: #21324e;
  --mat-text-muted: #506075;
  --mat-border: #9ca7b3;
  --mat-highlight: #ead394;
  --mat-highlight-ink: #23334d;
  --mat-link: #255e83;
  --mat-texture-wash: rgba(251,250,245,.87);
  --mat-focus: #255e83;
  color-scheme: only light;
}
html, body { background:var(--mat-bg); color:var(--mat-text); }
html { scrollbar-color:var(--mat-border) var(--mat-bg); }
::selection {background:var(--mat-highlight);color:var(--mat-highlight-ink)}
:is(a,button,input,textarea):focus-visible {outline:2px solid var(--mat-focus);outline-offset:4px}

/* A persistent, named control: available without opening the mobile menu. */
.mat-appearance-toggle {
  position:fixed; z-index:1001; top:20px; right:24px;
  width:44px;height:44px;min-height:44px;padding:10px;display:grid;place-items:center;border:1px solid var(--mat-border);
  border-radius:14px; background:var(--mat-panel); color:var(--mat-text);
  font:600 14px/1.2 "Inter Tight",Arial,sans-serif; cursor:pointer;
  box-shadow:0 3px 16px #00000012;
}
.mat-appearance-toggle:hover {background:var(--mat-panel-raised)}
.mat-appearance-toggle .mat-theme-symbol {display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mat-theme-symbol :is(.mat-theme-sun,.mat-theme-moon) {transform-origin:12px 12px;transition:transform .45s ease,opacity .3s ease}
.mat-theme-symbol .mat-theme-sun {opacity:0;transform:rotate(-60deg) scale(.5)}
.mat-theme-symbol .mat-theme-moon {opacity:1;transform:rotate(0) scale(1)}
html[data-mat-theme="dark"] .mat-theme-symbol .mat-theme-sun {opacity:1;transform:rotate(0) scale(1)}
html[data-mat-theme="dark"] .mat-theme-symbol .mat-theme-moon {opacity:0;transform:rotate(60deg) scale(.5)}
.site-header {padding-right:84px}
.mobile-fixed-header {padding-right:20px}
.legal-header-shell .site-header {padding-right:84px}
/* The shipped scroll animation writes a plum background and viewport-edge
   translation inline. Reserve a separate right-hand slot for appearance. */
@media(min-width:701px) {
  .scroll-header .scroll-menu {
    left:auto;right:84px;top:20px;transform:none!important;
    background:var(--mat-panel)!important;color:var(--mat-text);
    border:1px solid var(--mat-border);font-size:14px!important;
    gap:24px!important;padding:13px 20px!important;backdrop-filter:none!important;
  }
}

/* Four times the old 35px avatar, with the whole original image in view. */
.intro-experience {display:flex;flex-direction:row;align-items:center;gap:22px;width:440px;max-width:100%}
.intro-experience img {width:160px;height:120px;flex:0 0 160px;border-radius:18px;object-fit:contain;object-position:center;filter:none}
.intro-experience p {margin:0;line-height:1.3}
.services-heading .author {align-items:center;gap:24px}
.services-heading .author>img {width:160px;height:120px;flex:0 0 160px;object-fit:contain;object-position:center;filter:none;border-radius:18px}
.author-role {color:var(--mat-text-muted);opacity:1}

/* Gold is a paper surface, so it always carries dark ink. */
.workflow-card-tilt,.contact-poster {
  background-color:var(--mat-highlight);color:var(--mat-highlight-ink);
  background-image:url('/mat-site/20261014-mobile/mat/paper-texture.webp');
  background-size:620px;
  background-position:center;
  background-blend-mode:multiply;
}
.workflow-card-title,.workflow-card-details,.contact-poster em {color:var(--mat-highlight-ink)}
.workflow-call>span,.subscription-call:not(.subscription-call-outline)>span,.portfolio-request-submit>span,.request-success-icon,.intro-hint-arrow,.cycle-badge {
  background:var(--mat-highlight);color:var(--mat-highlight-ink);
}
.workflow-call>span,.subscription-call:not(.subscription-call-outline)>span,.portfolio-request-submit>span,.cycle-badge {
  background-image:url('/mat-site/20261014-mobile/mat/paper-texture.webp');background-size:620px;background-blend-mode:multiply;
}
.intro-hero,.intro-hero-frame,.community-frame,.projects-section,.process-transition,.process-viewport {
  background-color:var(--mat-panel);color:var(--mat-text);
}
.intro-hero {
  background-image:linear-gradient(var(--mat-texture-wash),var(--mat-texture-wash)),url('/mat-site/20261014-mobile/mat/paper-texture.webp');
  background-size:auto,900px;
}
.intro-services,.skillset,.skill-card,.subscription-section,.contact-section,.contact-legal,.sticky,.process-next,.workflow-ascii-layer {
  background-color:var(--mat-bg);color:var(--mat-text);
}
.intro-title,.preview-link,.case-tags,.contact-legal,.browser-url {color:var(--mat-text-muted)}
.intro-title strong,.design-title-letter,.project-row,.project-title-letter,.project-meta-letter,.workflow-heading-word,.workflow-heading-letter,.skill-title-letter,.community-header h2 {color:var(--mat-text)}
.intro-title em,h1 em,.workflow-heading em,.design-title-letter.is-cbi,.project-title-letter.is-cbi,.project-meta-letter.is-active,.workflow-heading-letter.is-cbi,.skill-title-letter.is-cbi,.community-header h2 em,.contact-hero h2 em,.subscription-header h2 em,.process-next em,.wordmark em,.mat-pricing-link {color:var(--mat-link)}
/* The original letter timeline writes inline colors while scrubbing. Keep the
   complete process headline readable, including those animated letters. */
.design-title .design-title-letter {color:var(--mat-highlight)!important}
html[data-mat-theme="light"] .design-title .design-title-letter {color:var(--mat-text)!important}
.link-roll-stack>span:last-child {color:var(--mat-link)}
.contact-socials a {background:var(--mat-panel);color:var(--mat-text)}
.contact-socials a:is(:hover,:focus-visible) {background:var(--mat-highlight);color:var(--mat-highlight-ink)}
.contact-socials a:is(:hover,:focus-visible) .link-roll-stack>span:last-child {color:var(--mat-highlight-ink)}
.contact-buttons button,.contact-telegram,a.contact-telegram {color:var(--mat-text)}
.contact-telegram {border-color:var(--mat-border)}
.contact-call {color:var(--mat-highlight-ink)!important}
.contact-call .link-roll-stack>span:last-child {color:var(--mat-highlight-ink)}
.mat-community-link:hover .card-caption {color:var(--mat-link)}

/* Dialogs, navigation and forms must follow the same appearance as the page. */
.case-dialog,.portfolio-request-form,.subscription-terms-content,.mobile-nav-dialog,.mobile-nav-panel,.legal-page,.legal-skip {background:var(--mat-panel);color:var(--mat-text)}
.portfolio-request,.subscription-terms-dialog,.scroll-menu,.mobile-nav-panel .mobile-nav-language a[aria-current],.language a.is-current {color:var(--mat-text)}
.subscription-terms-content p,.copyright-dialog .subscription-terms-content h3,.portfolio-request-input input,.portfolio-request-consents label:has(input:checked)>span {color:var(--mat-text)}
.portfolio-request-input input::placeholder,.portfolio-request-consents label>span,.legal-eyebrow,.legal-date,.legal-language span,.legal-language a:not([aria-current]),.legal-toc,.legal-layout h2 span,.legal-footer,.legal-layout p,.legal-layout ul,.legal-intro,.legal-draft {color:var(--mat-text-muted)}
.portfolio-request-consents input {border-color:var(--mat-border)}
.portfolio-request-consents input:checked {background:var(--mat-highlight);border-color:var(--mat-highlight)}
.portfolio-request-input input:focus {border-bottom-color:var(--mat-focus)}
.legal-email a,.legal-content [role=alert] button,.legal-menu-toggle {color:var(--mat-text)}
.legal-header,.legal-footer,.legal-menu-toggle {border-color:var(--mat-border)}
.legal-draft {border-left-color:var(--mat-link)}
.legal-page a:hover {color:var(--mat-link)}
.header-profiles a,.contact-legal a:hover,.contact-legal button:hover {color:var(--mat-text)}
.site-header nav a:hover,.projects-all:is(:hover,:focus-visible) {color:var(--mat-link)}
.mobile-menu-toggle {color:var(--mat-text);background:var(--mat-panel-raised)}
.mobile-menu-toggle.is-open {background:var(--mat-highlight);color:var(--mat-highlight-ink)}
.site-preloader {background:var(--mat-panel);color:var(--mat-text)}

/* Recolor only monochrome UI assets; never photos, videos or gallery canvases. */
html[data-mat-theme="light"] :is(.brand-svg img,.scroll-brand img,.legal-header img,.mobile-fixed-header>a>img) {filter:brightness(0) saturate(100%) invert(16%) sepia(28%) saturate(1327%) hue-rotate(180deg) brightness(94%) contrast(91%)}
.mobile-fixed-header>a>img {width:160px;height:54px;object-fit:contain}
.site-header .header-controls>nav {gap:clamp(14px,1.6vw,26px);font-size:clamp(14px,1.2vw,18px)}
.site-header .header-controls {gap:0}
html[data-mat-theme="light"] .mobile-menu-toggle:not(.is-open) img,
html[data-mat-theme="light"] .projects-all>.button-arrow {filter:brightness(0) saturate(100%) invert(16%) sepia(28%) saturate(1327%) hue-rotate(180deg) brightness(94%) contrast(91%)}
html[data-mat-theme="light"] .mobile-fixed-header:not([hidden]) {background:#f4f1e9f5}
html[data-mat-theme="light"] .intro-hint-card {background:var(--mat-panel);color:var(--mat-text);border:1px solid var(--mat-border)}
html[data-mat-theme="light"] .intro-hint-close {background:var(--mat-panel);color:var(--mat-text);border-color:var(--mat-border)}
html[data-mat-theme="light"] .feature-grid-static .card-visual {background:var(--mat-panel-raised)}
html[data-mat-theme="light"] .project-open-icon {background:var(--mat-highlight)}
html[data-mat-theme="light"] .project-open-icon img {filter:brightness(0)}
html[data-mat-theme="light"] .case-close {background:var(--mat-highlight);color:var(--mat-highlight-ink)}
html[data-mat-theme="light"] .strategy-tag {background:var(--mat-panel);color:var(--mat-text);border-color:var(--mat-border)}
html[data-mat-theme="light"] .skill-card[data-active=true] .strategy-tag {color:var(--mat-surface)}
html[data-mat-theme="light"] .skill-card[data-active=true] .browser-art {background:var(--mat-panel-raised)}
html[data-mat-theme="light"] :is(.skill-guides,.brand-guides,.skill-wire) {filter:brightness(.3)}
/* These are monochrome decorative pattern canvases, not photographic media.
   Their original opaque plum buffers must not wash cream surfaces purple. */
html[data-mat-theme="light"] :is(.workflow-ascii,.workflow-ascii-texture,.process-grid,.contact-ascii,.contact-squares) {opacity:.065!important;filter:grayscale(1)!important;mix-blend-mode:multiply}
html[data-mat-theme="light"] #design-loop .sticky>canvas {opacity:.065!important;filter:grayscale(1)!important;mix-blend-mode:multiply}
html[data-mat-theme="light"] .subscription-plan {border:1px solid #c6c6bb}
.subscription-section .subscription-plans {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.subscription-plan,.subscription-plan:nth-child(2) {
  background-image:url('/mat-site/20261014-mobile/mat/paper-texture.webp');background-size:760px;background-position:center;background-blend-mode:multiply;
  padding:26px;gap:22px;min-height:0;border-radius:22px;justify-content:flex-start;
}
.subscription-plan:nth-child(3n+2) {background-color:var(--mat-blue)}
.subscription-plan:nth-child(3n) {background-color:var(--mat-sage)}
.subscription-plan .subscription-plan-info {gap:12px}
.subscription-plan .subscription-plan-info h3 {font-size:27px;line-height:1.08;letter-spacing:-.025em;margin:0;min-height:2.16em;color:var(--mat-ink)}
.subscription-plan .mat-plan-description {font-size:16px;line-height:1.4;margin:0;color:var(--mat-body);min-height:2.8em}
.subscription-plan .subscription-plan-bottom {gap:10px;margin-top:auto;width:100%;align-items:stretch}
.subscription-plan .subscription-price {font-size:clamp(32px,3vw,44px);line-height:1.05;margin:0;letter-spacing:-.035em;color:var(--mat-ink)}
.subscription-plan .subscription-price small {font-size:12px;margin:0 0 5px;letter-spacing:.06em}
.subscription-plan .subscription-price.is-quote {font-size:28px;white-space:normal;min-height:65px;display:flex;align-items:flex-end;max-width:12ch}
.subscription-plan .mat-price-note {font-size:13px;line-height:1.35;margin:0;color:var(--mat-muted)}
.subscription-plan .mat-plan-care {font-size:14px;line-height:1.4;margin:0;color:var(--mat-body);min-height:2.8em}
.subscription-plan .subscription-terms {font-size:14px;line-height:1.4;color:var(--mat-body);width:fit-content;margin:0 0 5px}
.subscription-plan .subscription-call {width:100%;font-size:15px}
.subscription-plan .subscription-call>span {height:46px;min-height:46px;border-radius:14px;padding:12px 18px;font-size:15px;line-height:1.2;white-space:nowrap;flex:1}
.subscription-plan .subscription-call>span:last-child {width:46px;flex:0 0 46px;padding:12px}
.subscription-plan .subscription-call .button-arrow {width:20px;height:20px}
.mat-pricing-footnote {max-width:75ch;font-size:14px;line-height:1.5;margin:25px 0 0;color:var(--mat-text-muted)}
.mat-pricing-links {display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:18px}
.mat-pricing-links .mat-pricing-link {margin:0;font:inherit;font-size:16px;color:var(--mat-link);background:none;border:0;padding:0;text-align:left;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

@media(min-width:1024px) {
  .intro-hero {height:auto;min-height:100svh}
  .intro-experience {min-height:120px}
  .site-header .header-controls {width:auto;gap:30px}
}
@media(min-width:701px) and (max-width:1023px) {
  .subscription-section .subscription-plans {grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro-experience {position:static;margin:36px 28px 0 auto;width:410px}
  .intro-experience img {width:144px;height:108px;flex-basis:144px}
}
@media(max-width:700px) {
  .mat-appearance-toggle {top:25px;right:80px;min-height:44px;padding:10px;border-radius:14px}
  .site-header,.legal-header-shell .site-header {padding-inline:20px}
  .site-header .brand-svg,.site-header .brand-svg img,.mobile-fixed-header .brand-svg,.mobile-fixed-header .brand-svg img {width:clamp(120px,39vw,160px);height:56px;transform:none}
  .intro-experience {position:static;flex-direction:row;align-items:center;margin:30px 20px 0;width:calc(100% - 40px);font-size:16px;gap:18px}
  .intro-experience img {width:136px;height:102px;flex-basis:136px;border-radius:14px}
  .intro-experience p {margin:0}
  .services-heading .author {width:100%;max-width:100%;flex-direction:row;align-items:center;gap:18px;font-size:18px}
  .services-heading .author>img {width:128px;height:96px;flex-basis:128px;border-radius:14px}
  .subscription-header h2,.subscription-header>p {width:100%}
  .subscription-section .subscription-plans {grid-template-columns:minmax(0,1fr);gap:16px}
  .subscription-plan,.subscription-plan:nth-child(2) {padding:24px;gap:20px;min-height:0}
  .subscription-plan .subscription-plan-info h3 {font-size:26px;min-height:0}
  .subscription-plan .mat-plan-description {min-height:0}
  .subscription-plan .subscription-price {font-size:40px}
  .subscription-plan .subscription-price.is-quote {font-size:28px;min-height:0;max-width:none}
  .subscription-plan .mat-plan-care {min-height:0}
}
@media(max-width:360px) {
  .mat-appearance-toggle {right:76px;padding:10px}
  .intro-experience {gap:14px;font-size:15px}
  .intro-experience img {width:120px;height:90px;flex-basis:120px}
  .services-heading .author {font-size:16px;gap:14px}
  .services-heading .author>img {width:112px;height:84px;flex-basis:112px}
}
/* Keep snapshot pixels still while the new appearance opens from its control.
   Browsers without View Transitions fade the same semantic surface colors. */
html[data-mat-theme-transition="reveal"]::view-transition-old(root),
html[data-mat-theme-transition="reveal"]::view-transition-new(root) {
  animation:none;mix-blend-mode:normal;
}
html[data-mat-theme-transition="reveal"]::view-transition-old(root) {z-index:1}
html[data-mat-theme-transition="reveal"]::view-transition-new(root) {z-index:2}
html[data-mat-theme-transition="reveal"]::view-transition-image-pair(root) {isolation:isolate}
html[data-mat-theme-transition="fade"],
html[data-mat-theme-transition="fade"] body,
html[data-mat-theme-transition="fade"] body * {
  transition-property:color,background-color,border-color,outline-color,box-shadow,fill,stroke!important;
  transition-duration:420ms!important;transition-timing-function:ease!important;
}
@media(prefers-reduced-motion:reduce) {
  .mat-appearance-toggle,.mat-theme-symbol :is(.mat-theme-sun,.mat-theme-moon) {transition:none}
  html[data-mat-theme-transition] *,html[data-mat-theme-transition] {transition:none!important}
}