/* MAT: the current plum, paper, signature and real work, given more presence.
   Brand exceptions to taste-skill: existing palette and typefaces are retained.
   Photographic scrims and the established device frames remain intentional. */
@media screen {
  :root {
    --mat-space: clamp(24px, 4.5vw, 72px);
    --mat-ease: cubic-bezier(.16, 1, .3, 1);
  }
  html { scroll-padding-top: 100px; }
  a, button, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
  a, button { touch-action: manipulation; }
  :focus-visible { outline: 3px solid var(--mat-focus); outline-offset: 6px; }
  .mat-home-skip { position: fixed; top: 12px; left: 20px; z-index: 10002; transform: translateY(-160%); padding: 14px 22px; background: var(--mat-highlight); color: var(--mat-highlight-ink); border-radius: 24px; }
  .mat-home-skip:focus { transform: none; }

  /* Message first, real screens second. The original curved gallery stays live. */
  .intro-hero.mat-hero-refined {
    display: grid; grid-template-columns: minmax(0, 1fr) 350px;
    grid-template-rows: auto 1fr auto auto; align-items: center;
    column-gap: 48px; row-gap: 22px;
    height: auto; min-height: min(940px, 100svh);
    padding: 22px var(--mat-space) 40px;
  }
  .mat-hero-refined .hero-top-group { display: contents; }
  .mat-hero-refined .site-header { grid-column: 1 / -1; grid-row: 1; width: 100%; margin: 0; padding: 0 36px 0 0; height: 100px; }
  .mat-hero-refined .site-header .brand-svg { width: 270px; height: 90px; }
  .mat-hero-refined .header-controls { margin-left: auto; }
  .mat-hero-refined .site-header nav { gap: clamp(16px, 1.8vw, 28px); font-size: 16px; }
  html[lang=en] .mat-hero-refined .intro-title.mat-intro-title {
    grid-column: 1; grid-row: 2; width: 100%; margin: 26px 0 0;
    padding: 0; font-size: clamp(76px, 9.2vw, 148px); line-height: 1.01;
    letter-spacing: -.04em; align-self: center;
  }
  .mat-hero-refined .intro-reveal-letter { width: auto !important; }
  .mat-hero-refined .intro-experience { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; flex-direction: column; align-items: flex-start; width: 285px; gap: 16px; margin: 0 0 4px; }
  .mat-hero-refined .intro-experience img { width: 285px; height: 170px; flex: 0 0 auto; border-radius: 16px; object-position: 50% 60%; }
  .mat-hero-refined .intro-experience p { font-size: 21px; line-height: 1.4; letter-spacing: -.015em; }
  .mat-hero-actions { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 30px; padding: 10px 0 22px; }
  .mat-hero-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 56px; font-size: 17px; font-weight: 500; text-decoration: none; }
  .mat-hero-actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--mat-ease); }
  .mat-primary-action { background: var(--mat-highlight); color: var(--mat-highlight-ink); padding: 16px 26px; border-radius: 32px; }
  .mat-secondary-action { color: var(--mat-text); }
  .mat-hero-actions a:hover svg { transform: translate(3px, -3px); }
  .mat-hero-refined #hero-carousel { grid-column: 1 / -1; grid-row: 4; width: calc(100% + 2 * var(--mat-space)); margin: 0 calc(-1 * var(--mat-space)); align-self: end; }
  .mat-hero-refined .carousel-pause { right: var(--mat-space); }

  /* Shared navigation: a real disclosure on smaller screens, generous targets. */
  .mat-pages .mat-page-header { max-width: 1600px; min-height: 104px; padding: 20px max(140px, var(--mat-space)) 20px var(--mat-space); gap: 28px; }
  .mat-page-header .brand { width: 190px; flex-shrink: 0; }
  .mat-page-header nav { align-items: center; gap: 26px; }
  .mat-page-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .mat-nav-toggle { display: none; }
  .mat-pages .container, .mat-pages .wrap { width: calc(100% - 2 * var(--mat-space)); max-width: 1296px; }
  .mat-pages h1, .mat-pages h2, .mat-pages h3 { text-wrap: balance; }
  .mat-pages h1 { letter-spacing: -.04em; line-height: 1.02; }
  .mat-pages .page-intro:not(.reader-intro), .mat-pages .phead { padding-block: clamp(56px, 7vw, 104px); }
  .mat-pages .page-intro:not(.reader-intro) h1, .mat-pages .phead h1 { font-size: clamp(52px, 6.8vw, 98px); max-width: 19ch; margin-bottom: 28px; }
  .mat-pages .page-intro>p, .mat-pages .lede { font-size: clamp(20px, 2vw, 26px); line-height: 1.5; }
  .mat-pages .button { min-height: 54px; padding: 15px 24px; font-size: 17px; line-height: 1.3; gap: 16px; text-align: left; }
  .mat-pages .text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; }
  .mat-pages .back-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 22px; font-size: 16px; color: var(--mat-text-muted); }

  /* Service essays: real proof at the same scale as the proposition. */
  .mat-pages .reader-intro {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 76px); align-items: center;
    margin-top: 20px; padding: clamp(32px, 4.2vw, 64px);
    border: 0; border-radius: 22px; background: var(--mat-panel); min-height: 510px;
  }
  .mat-pages .reader-intro h1 { font-size: clamp(44px, 4.9vw, 72px); max-width: 18ch; margin: 0 0 24px; }
  .mat-pages .reader-intro p { font-size: 19px; line-height: 1.65; max-width: 48ch; }
  .mat-pages .reader-intro .reader-enquiry { margin: 26px 0 0; }
  .mat-opening-proof { display: block; overflow: hidden; border-radius: 16px; }
  .mat-opening-proof img { width: 100%; height: auto; aspect-ratio: 1280 / 832; object-fit: cover; object-position: top; transition: transform .6s var(--mat-ease); }
  .mat-opening-proof:hover img { transform: scale(1.025); }
  .mat-proof-opening>.ink-art { display: none; }
  .mat-pages .mat-proof-opening .anno { display: block; margin: 22px 0 0; text-align: center; font-size: 23px; }
  .mat-pages .reader-layout { gap: clamp(40px, 6vw, 88px); padding-block: 76px; }
  .mat-pages .reading { max-width: 820px; }
  .mat-pages .reading h2 { font-size: clamp(30px, 3vw, 44px); max-width: 26ch; line-height: 1.12; }
  .mat-pages .reading p, .mat-pages .reading li { line-height: 1.75; }
  .mat-pages summary { padding-block: 22px; cursor: pointer; min-height: 56px; }
  .mat-pages summary h3 { font-size: 21px; line-height: 1.4; }
  .mat-pages .reading details[open] { padding-bottom: 18px; }
  .mat-pages .reading details[open] summary { color: var(--mat-link); }

  /* Work gets an editorial sequence rather than a wall of equally sized cards. */
  .mat-pages .work-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 36px; padding-bottom: 80px; }
  .mat-pages .work-index .work-piece:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); gap: 48px; align-items: end; }
  .mat-pages .work-index .work-piece:first-child .work-caption { display: flex; align-items: center; padding-bottom: 32px; }
  .mat-pages .work-index .work-piece:first-child h3 { font-size: clamp(34px, 3.8vw, 56px); }
  .mat-pages .work-caption h3 { font-size: clamp(27px, 2.8vw, 38px); line-height: 1.12; }
  .mat-pages .work-caption { padding-top: 24px; }
  .mat-pages .work-visual { border-radius: 20px; overflow: hidden; }
  .mat-pages .work-visual .project-preview { transition: transform .6s var(--mat-ease); }
  .mat-pages .work-visual:hover .project-preview { transform: scale(1.025); }
  .mat-pages .round-link { min-width: 48px; min-height: 48px; }
  .mat-pages .case-cover { padding-block: 54px 84px; gap: 56px; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); }
  .mat-pages .case-opening h1 { font-size: clamp(56px, 5.6vw, 84px); max-width: 15ch; margin-bottom: 28px; }
  .mat-pages .case-opening>p { font-size: 21px; line-height: 1.6; }
  .mat-pages .case-facts { gap: 24px; margin-top: 42px; }
  .mat-pages .case-facts dt { font-size: 14px; color: var(--mat-text-muted); }
  .mat-pages .case-image { align-self: center; }
  .mat-pages .process-board { display: flex; flex-direction: column; gap: 16px; }
  .mat-pages .process-step { display: grid; grid-template-columns: 36px minmax(120px, .65fr) minmax(0, 1.35fr); gap: 24px; padding: 28px 32px; background: var(--mat-panel); border: 0; border-radius: 16px; }
  .mat-pages .process-step .step-count { margin: 5px 0 0; }
  .mat-pages .process-step h3, .mat-pages .process-step p { margin: 0; }
  .mat-pages .process-step .handwritten { grid-column: 2 / -1; }

  .mat-pages .services-opening { gap: 56px; min-height: 560px; }
  .mat-pages .service-opening-art { padding: 30px; }
  .mat-pages .service-opening-art .ink-art { width: 100%; }
  .mat-pages .service-directory>a { transition: background-color .25s ease; }
  .mat-pages .service-directory>a:hover { background-color: var(--mat-panel); }
  .mat-pages .pricing-list>a { background: var(--mat-panel); border: 0; padding: 32px; }
  .mat-pages .contact-opening { padding-block: 64px 100px; gap: clamp(36px, 6vw, 90px); }
  .mat-pages .contact-opening h1 { font-size: clamp(52px, 5.7vw, 84px); }
  .mat-pages #enquiry-form { background: var(--mat-panel); border: 0; border-radius: 22px; padding: clamp(28px, 3.5vw, 48px); align-self: start; margin-top: 16px; }
  .mat-pages #enquiry-form label { font-size: 25px; line-height: 1.25; }
  .mat-pages #enquiry-form textarea { font: inherit; line-height: 1.6; min-height: 210px; padding: 18px; border-radius: 12px; background: var(--mat-bg); color: var(--mat-text); resize: vertical; }
  .mat-pages .contact-address a { min-height: 44px; overflow-wrap: anywhere; }
  .mat-pages .profile-hero { min-height: 650px; }
  .mat-pages .profile-hero h1, .mat-pages .cv-intro.container h1 { letter-spacing: -.04em; }
  .mat-pages .cv-actions { flex-wrap: wrap; }
  .mat-pages .conversation { padding-block: 90px; }
  .mat-pages .conversation h2 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; }
  .mat-pages .mat-page-footer { padding: 64px var(--mat-space) 36px; gap: 36px; }
  .mat-pages .mat-page-footer nav { flex-wrap: wrap; gap: 20px 30px; }
  .mat-pages .mat-page-footer nav a { display: inline-flex; min-height: 44px; align-items: center; }
  .mat-legal h1 { font-size: clamp(48px, 6vw, 80px); }
  .mat-legal .page-intro { max-width: 850px; }

  @media (max-width: 1100px) and (min-width: 701px) {
    .intro-hero.mat-hero-refined { grid-template-columns: minmax(0, 1fr) 230px; gap: 20px 28px; min-height: 820px; }
    .mat-hero-refined .site-header .brand-svg { width: 200px; height: 68px; }
    .mat-hero-refined .site-header nav { gap: 14px; font-size: 14px; }
    .mat-hero-refined .intro-experience { width: 210px; }
    .mat-hero-refined .intro-experience img { width: 210px; height: 126px; }
    html[lang=en] .mat-hero-refined .intro-title.mat-intro-title { font-size: clamp(72px, 9.2vw, 100px); }
  }
  @media (max-width: 1023px) {
    .mat-pages .mat-page-header { display: grid; grid-template-columns: 1fr auto; padding: 16px 88px 16px var(--mat-space); min-height: 90px; gap: 12px 20px; }
    .mat-nav-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 16px; background: var(--mat-panel); color: var(--mat-text); border: 0; border-radius: 24px; cursor: pointer; }
    .mat-nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
    .mat-page-header:has(.mat-nav-toggle) nav { display: none; grid-column: 1 / -1; padding: 12px 0 4px; margin: 0; overflow: visible; flex-wrap: wrap; gap: 8px 26px; }
    .mat-page-header.mat-nav-open nav { display: flex; }
    .mat-page-header>a:last-child:not(.brand) { display: none; }
    .mat-pages .reader-intro { grid-template-columns: 1fr 1fr; padding: 32px; gap: 32px; min-height: 460px; }
    .mat-pages .reader-intro h1 { font-size: 48px; }
    .mat-pages .case-cover { gap: 32px; }
  }
  @media (max-width: 760px) {
    .mat-pages .mat-page-header .brand { width: 150px; }
    .mat-pages .reader-intro { display: flex; flex-direction: column; align-items: stretch; padding: 28px; gap: 36px; min-height: 0; margin-top: 16px; }
    .mat-pages .reader-intro h1 { font-size: clamp(38px, 10vw, 58px); max-width: 19ch; }
    .mat-pages .reader-intro p { font-size: 18px; }
    .mat-pages .reader-intro .button { font-size: 16px; padding: 14px 20px; }
    .mat-pages .reader-layout { display: block; padding-block: 40px; }
    .mat-pages .work-index, .mat-pages .work-index .work-piece:first-child { display: grid; grid-template-columns: 1fr; gap: 44px; }
    .mat-pages .work-index .work-piece:first-child { gap: 0; }
    .mat-pages .work-index .work-piece:first-child .work-caption { padding-bottom: 0; }
    .mat-pages .work-index .work-piece:first-child h3 { font-size: 34px; }
    .mat-pages .case-cover { display: flex; flex-direction: column; padding-block: 30px 60px; gap: 38px; }
    .mat-pages .case-opening h1 { font-size: clamp(46px, 11.5vw, 72px); }
    .mat-pages .case-opening>p { font-size: 19px; }
    .mat-pages .case-image { width: 100%; }
    .mat-pages .process-step { grid-template-columns: 26px 1fr; padding: 24px; gap: 12px 18px; }
    .mat-pages .process-step p { grid-column: 2; }
    .mat-pages .process-step h3 { font-size: 28px; }
    .mat-pages .contact-opening { display: block; padding-block: 40px 64px; }
    .mat-pages #enquiry-form { margin-top: 36px; }
    .mat-pages .services-opening { display: block; min-height: 0; padding-top: 28px; }
    .mat-pages .services-opening .page-intro { padding-bottom: 36px; }
    .mat-pages .service-opening-art { max-width: 390px; padding: 16px 30px 44px; margin: auto; }
    .mat-pages .profile-hero { min-height: 0; }
    .mat-pages .conversation { padding-block: 64px; }
    .mat-pages .mat-page-footer { padding-top: 48px; }
  }
  @media (max-width: 700px) {
    .intro-hero.mat-hero-refined { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; min-height: 0; gap: 20px; padding: 12px 24px 36px; }
    .mat-hero-refined .hero-top-group { display: contents; }
    .mat-hero-refined .site-header { grid-column: 1; grid-row: 1; padding: 0; height: 76px; }
    .mat-hero-refined .site-header .brand-svg { width: 180px; height: 64px; }
    html[lang=en] .mat-hero-refined .intro-title.mat-intro-title { grid-column: 1; grid-row: 2; margin: 32px 0 0; font-size: clamp(58px, 13.6vw, 94px); line-height: 1.04; }
    .mat-hero-refined .intro-experience { grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; justify-self: start; width: 100%; max-width: none; gap: 16px; margin: 0; }
    .mat-hero-refined .intro-experience img { width: 128px; height: 80px; flex: 0 0 128px; border-radius: 12px; object-position: 50% 60%; }
    .mat-hero-refined .intro-experience p { font-size: 17px; }
    .mat-hero-actions { grid-column: 1; grid-row: 4; gap: 20px; flex-wrap: wrap; padding: 0; }
    .mat-hero-actions a { gap: 12px; font-size: 16px; min-height: 50px; }
    .mat-primary-action { padding: 14px 21px; }
    .mat-hero-refined #hero-carousel { grid-column: 1; grid-row: 5; margin: 14px -24px 0; width: calc(100% + 48px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mat-opening-proof img, .mat-hero-actions svg, .mat-pages .work-visual .project-preview { transition: none; transform: none !important; }
  }
}
@media screen {
  /* The incumbent panel :is() contains an ID and therefore carries ID specificity. */
  .mat-pages #main .reader-intro { background:var(--mat-panel); border:0; }
  .mat-pages #main .process-step, .mat-pages #main .pricing-list>a { background:var(--mat-panel); border:0; }
  .mat-pages #main .mat-proof-opening>.ink-art { display:none; }
}
@media screen {
  .mat-pages .mat-proof-opening { width:100%; max-width:none; }
  .mat-pages .mat-page-header .mat-page-brand { width:190px; flex-shrink:0; }
  @media(max-width:760px) { .mat-pages .mat-page-header .mat-page-brand { width:140px; } }
}
@media screen {
  .mat-proof-caption {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0 0;font-size:14px;line-height:1.4;color:var(--mat-text-muted)}
  .mat-proof-caption>span:last-child {display:inline-flex;align-items:center;gap:10px;color:var(--mat-link);flex-shrink:0}
  .mat-proof-caption svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
  @media(max-width:760px){.mat-proof-caption{display:block}.mat-proof-caption>span{display:block;margin-top:8px}}
}
@media screen {
  /* The gallery and scroll scenes deliberately draw beyond their own canvas. */
  html:has(.mat-hero-refined), body:has(.mat-hero-refined) { overflow-x:clip; }
  @media(min-width:761px) and (max-width:1000px) {
    .mat-pages .case-cover {display:flex;flex-direction:column;gap:42px}
    .mat-pages .case-opening {width:100%}
    .mat-pages .case-opening h1 {font-size:clamp(48px,7vw,70px);max-width:20ch}
    .mat-pages .case-image {width:100%}
  }
}
@media screen {
  .services-heading .author p {font-size:18px;line-height:1.45}
  .skill-items, .workflow-card-details {font-size:16px;line-height:1.5}
  .mat-memory figcaption {font-size:13px;line-height:1.3}
}

@media screen {
  /* Reserve real layout space for the console instead of covering the bio. */
  .intro-services .services-heading {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,36%);
    gap:48px; align-items:center; min-height:0;
  }
  .intro-services .services-heading .author {width:100%;max-width:none;min-width:0}
  .intro-services .services-heading .author>div {min-width:0;flex:1}
  .intro-services .services-heading .client-console {
    position:relative;inset:auto;width:100%;max-width:360px;
    justify-self:end;align-self:center;margin:0;transform:none!important;
  }
  .scroll-header .scroll-brand {
    left:var(--mat-space);top:20px;transform:none!important;
    background:transparent!important;box-shadow:none!important;border-radius:0;
  }
  @media(min-width:701px) and (max-width:1100px) {
    .scroll-header .scroll-brand,.scroll-header .scroll-brand img {width:160px;height:54px}
    .scroll-header .scroll-menu {font-size:13px!important;gap:14px!important;padding:13px 16px!important}
  }
  /* 2026-10-17: console stays beside the bio down to tablet, cards sit closer. */
  @media(min-width:701px) and (max-width:1100px) {
    .intro-services .services-heading {grid-template-columns:minmax(0,1fr) minmax(200px,30%);gap:32px}
    .intro-services .services-heading .client-console {max-width:260px}
  }
  @media(min-width:701px) {
    .intro-services .services-heading+.feature-grid {margin-top:24px}
  }
  @media(max-width:700px) {
    .intro-services .services-heading {grid-template-columns:minmax(0,1fr);gap:28px}
    .intro-services .services-heading .author {flex-direction:row;align-items:center}
    .intro-services .services-heading .client-console {width:min(280px,64vw);justify-self:center}
  }
  .mat-pages .cv-download-list a,.mat-pages .cv-jumps a {transition:color .25s ease,transform .3s var(--mat-ease)}
  .mat-pages .cv-download-list a:hover {transform:translateX(4px)}
  .mat-pages .cv-jumps a {display:inline-flex;align-items:center;min-height:44px}
  .cv-reading-progress {display:none}
  @supports(animation-timeline:scroll()) {
    .cv-reading-progress {
      display:block;position:fixed;inset:0 0 auto;height:3px;z-index:1002;
      background:var(--mat-highlight);transform-origin:left;pointer-events:none;
      animation:cv-reading linear both;animation-timeline:scroll(root block);
    }
  }
  @keyframes cv-reading {from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media(prefers-reduced-motion:reduce) {
    .cv-reading-progress {display:none}
    .mat-pages .cv-download-list a,.mat-pages .cv-jumps a {transition:none;transform:none}
  }
}
@media print {.cv-reading-progress {display:none!important}}
@media screen {
  .mat-pages .mat-page-skip,.mat-pages .mat-page-skip:focus {background:var(--mat-highlight);color:var(--mat-highlight-ink)}
}

/* Full-bleed apron photo behind the hero, fading into the carousel (2026-10-17). */
.mat-hero-refined { isolation: isolate; }
.mat-hero-refined::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: var(--mat-photo-h, 72%); pointer-events: none;
  background: linear-gradient(90deg, rgba(20,14,30,.72) 0%, rgba(20,14,30,.38) 55%, rgba(20,14,30,.15) 100%), linear-gradient(180deg, rgba(20,14,30,.45) 0%, rgba(20,14,30,0) 28%), url(/mat-site/20261014-mobile/mat/media/mat-hero-apron-v2.webp) 50% 58% / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 190px), transparent); mask-image: linear-gradient(#000 calc(100% - 190px), transparent); }
.mat-hero-refined .intro-experience img { display: none; }
html[data-mat-theme] .mat-hero-refined .intro-title, html[data-mat-theme] .mat-hero-refined .intro-title strong, html[data-mat-theme] .mat-hero-refined .intro-experience p, html[data-mat-theme] .mat-hero-refined .mat-secondary-action { color: #fbfaf5; text-shadow: 0 2px 24px rgba(20,14,30,.45); }
html[data-mat-theme] .mat-hero-refined .intro-title em { color: #f7e399; }
@media (max-width: 700px) { .mat-hero-refined::before { background-position: 0 0, 0 0, 42% 50%; } }

/* Selected work: no hover cursor, every row shows its site screenshot (2026-10-17). */
.project-cursor { display: none !important; }
@media (min-width: 701px) {
  .projects-interaction-area .project-row { min-height: calc(min(calc(var(--mat-list-offset, 400px) - 48px), 420px) * .66 + 64px); }
  .projects-interaction-area .project-preview, .projects-interaction-area[data-cursor-active=true] .project-preview { display: block; opacity: 1 !important; visibility: visible !important; left: calc(-1 * var(--mat-list-offset, 0px)); right: auto; width: min(calc(var(--mat-list-offset, 400px) - 48px), 420px); max-height: none; top: 50%; transform: translateY(-50%) !important; pointer-events: auto; cursor: pointer; box-shadow: 0 18px 40px -24px rgba(20,14,30,.55); }
}

/* 2026-10-17: calmer middle of the homepage. Same elements, smaller footprint. */
@media (min-width: 1024px) {
  .skillset { padding-top: 88px; }
  .skill-card { aspect-ratio: auto; min-height: 300px; padding: 30px 32px; }
  .skill-card h3, html[lang=en] .skill-card h3 { font-size: clamp(34px, 3.1vw, 48px); }
  .skills-art { --art-size: clamp(150px, 12.5vw, 210px); right: 28px; bottom: 28px; }
  .skill-items { left: 32px; bottom: 30px; }
  .skills-footer { margin-top: 64px; gap: 40px; padding-bottom: 64px; }
  .skills-statement > span { font-size: 44px; }
  .skills-statement p { font-size: 20px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .skill-card { min-height: 320px; }
  .skills-art { --art-size: 170px; bottom: 70px; }
  .skills-footer { margin-top: 56px; }
}
@media (min-width: 701px) {
  .process-tv-anchor { width: min(62vw, 74svh, 820px); margin-left: calc(min(62vw, 74svh, 820px) / -2); margin-top: calc(min(62vw, 74svh, 820px) / -2); }
}

/* 2026-10-17: full-bleed photo hero on inner pages, matching the homepage. */
html:has(.mat-photo-hero) { overflow-x: clip; }
.mat-has-photo-hero .mat-page-header { position: relative; z-index: 20; background: transparent !important; box-shadow: none; }
.mat-photo-hero { position: relative; isolation: isolate; padding-bottom: clamp(56px, 9vh, 120px);
  --mat-text: #f4f1e9; --mat-link: #f0dda1; --mat-highlight: #f0dda1; color: #f4f1e9; }
.mat-photo-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--mat-header-h, 90px)); bottom: -140px; left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(20,14,30,.82) 0%, rgba(20,14,30,.55) 50%, rgba(20,14,30,.35) 100%),
    linear-gradient(180deg, rgba(20,14,30,.5) 0%, rgba(20,14,30,0) 30%), var(--mat-hero-photo) var(--mat-hero-focus, 50% 50%) / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 220px), transparent); mask-image: linear-gradient(#000 calc(100% - 220px), transparent); }
.mat-photo-hero :is(h1, h2, h3, p, li, dt, dd, span, small, figcaption, label, a:not([class*="button"]):not([class*="btn"]):not([class*="primary"])) { color: inherit; }
.mat-photo-hero :is(h1, h2) em, .mat-photo-hero .text-link, .mat-photo-hero a.text-link { color: #f0dda1; }
.mat-photo-hero :is(h1, h2, h3, p) { text-shadow: 0 2px 22px rgba(20,14,30,.5); }
.mat-photo-hero p { color: rgba(244,241,233,.86); }
.mat-has-photo-hero .mat-page-header :is(a, button, nav) { color: #f4f1e9; }
/* Light theme: the header sits on the dark photo, so keep it light-on-dark. */
html[data-mat-theme] .mat-has-photo-hero .mat-page-header .mat-page-brand img { filter: none !important; }
html[data-mat-theme] .mat-has-photo-hero .mat-page-header .mat-nav-toggle { background: rgba(20,14,30,.42); border-color: rgba(244,241,233,.35); color: #f4f1e9; backdrop-filter: blur(8px); }
/* About: the trophy photo is the hero background now, so drop the inline card. */
.profile-hero.mat-photo-hero .profile-hero-image, .profile-hero.mat-photo-hero .profile-hero-wash { display: none; }
@media (max-width: 700px) { .profile-hero.mat-photo-hero::before { background-position: 0 0, 0 0, 74% 30%; } }

/* 2026-10-17 polish pass (from the UI review). */
/* Steps already carry a typed 01/02/03, so drop the browser's second number. */
.mat-pages main ol:has(> li > h3) { list-style: none; padding-left: 0; }
/* FAQ: question and chevron on one row, a real tap target. */
.mat-pages details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer; list-style: none; }
.mat-pages details > summary::-webkit-details-marker { display: none; }
.mat-pages details > summary > h3 { margin: 0; }
.mat-pages details > summary > span[aria-hidden="true"] { display: none; }
.mat-pages details > summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid currentColor; font-size: 18px; line-height: 1; opacity: .7; transition: transform .25s ease; }
.mat-pages details[open] > summary::after { transform: rotate(45deg); }
/* Turned three bare headings into a proper list. */
.mat-pages .mat-includes { margin: 20px 0 0; padding-left: 1.1em; display: grid; gap: 6px; }
/* Long-form reading width. */
.mat-pages.mat-notes main article :is(p, li) { max-width: 68ch; }
/* Tap targets and small text. */
.mat-pages .mat-page-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.mat-pages .mat-page-header .mat-nav-toggle, .mat-pages .mat-appearance-toggle { min-width: 44px; min-height: 44px; }
.mat-pages :is(figcaption, .profile-nav a, .case-meta dt) { font-size: max(14px, 1em); }

/* Business website page, tightened 2026-10-17: price card + two-column fit lists. */
.mat-pages .mat-price-card { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--mat-border, #53485b); border-radius: 22px; margin-bottom: 64px; }
.mat-pages .mat-eyebrow { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.mat-pages .mat-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.mat-pages .mat-price strong { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.03em; }
.mat-pages .mat-price span { opacity: .75; }
.mat-pages .mat-price-care { margin: 8px 0 0; opacity: .85; }
.mat-pages .mat-price-card .mat-includes { margin-top: 22px; }
.mat-pages .mat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 26px 0 0; }
.mat-pages .mat-fit { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
.mat-pages .mat-fit li { padding-top: 18px; border-top: 1px solid var(--mat-border, #53485b); }
.mat-pages .mat-fit h3 { margin: 0 0 6px; }
.mat-pages .mat-fit p { margin: 0; }
.mat-pages .mat-aside { margin-top: 28px; opacity: .85; }
@media (max-width: 700px) { .mat-pages .mat-fit { grid-template-columns: 1fr; gap: 20px; } }

/* 2026-10-17: contact ending recomposed as a gallery wall.
   Poster on the left, the developed print in the middle, four memories hung 2x2 on the right.
   Memories "develop" like instant film as the scroll scene plays (--dev set in the bundle). */
.contact-ending-art .contact-poster { left: 5%; top: 15%; width: 25%; max-height: none; transform: rotate(-4deg); box-shadow: 0 24px 50px -28px rgba(10,6,20,.7); }
.contact-ending-art .contact-crown { left: 22%; top: -2%; width: 15%; }
.contact-ending-art .contact-photo-target { left: 33.5%; top: 27%; width: 26%; transform: rotate(-3deg); }
.mat-memory-collage .mat-memory { pointer-events: auto; bottom: auto; width: 15.5%; max-width: 230px; padding: 8px 8px 0; border-radius: 2px;
  background: #fbfaf5; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 20px 36px -18px rgba(10,6,20,.6);
  transition: translate .45s cubic-bezier(.16,1,.3,1), scale .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; }
.mat-memory-collage .mat-memory::before { content: ""; position: absolute; top: -10px; left: 50%; width: 58px; height: 20px; translate: -50% 0; rotate: -2deg;
  background: rgba(247,227,153,.62); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mat-memory-collage .mat-memory:nth-child(even)::before { rotate: 3deg; }
.mat-memory-collage .mat-memory:nth-child(1) { left: 62%; top: 7%; }
.mat-memory-collage .mat-memory:nth-child(2) { left: 81%; top: 10%; }
.mat-memory-collage .mat-memory:nth-child(3) { left: 63%; top: 56%; }
.mat-memory-collage .mat-memory:nth-child(4) { left: 82%; top: 59%; }
.mat-memory-collage .mat-memory img { height: calc(min(650px, 75svh) * .3); object-fit: cover; background: #e9e4d8;
  filter: saturate(calc(.15 + .85 * var(--dev, 1))) brightness(calc(1.5 - .5 * var(--dev, 1))) contrast(calc(.82 + .18 * var(--dev, 1))); }
.mat-memory-collage .mat-memory figcaption { font-family: Apophis, serif; font-style: italic; font-size: clamp(13px, 1.15vw, 17px); line-height: 1.15; color: #1f3151; padding: 9px 4px 11px; }
.mat-memory-collage .mat-memory:hover { translate: 0 -8px; scale: 1.05; z-index: 3; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 30px 48px -18px rgba(10,6,20,.7); }
@media (max-width: 700px) {
  .contact-ending-art .contact-poster { left: 4%; top: 15%; width: 42%; }
  .contact-ending-art .contact-crown { left: 1%; top: -9%; width: 32%; }
  .contact-ending-art .contact-photo-target { left: 52%; top: 17%; width: 42%; }
  .mat-memory-collage .mat-memory { width: 22.5%; padding: 4px 4px 0; top: auto; bottom: 3%; }
  .mat-memory-collage .mat-memory:nth-child(1) { left: 1.5%; top: auto; }
  .mat-memory-collage .mat-memory:nth-child(2) { left: 26%; top: auto; bottom: 5%; }
  .mat-memory-collage .mat-memory:nth-child(3) { left: 50.5%; top: auto; }
  .mat-memory-collage .mat-memory:nth-child(4) { left: 75%; top: auto; bottom: 5%; }
  .mat-memory-collage .mat-memory img { height: 13svh; }
  .mat-memory-collage .mat-memory::before { width: 34px; height: 12px; top: -6px; }
  .mat-memory-collage .mat-memory figcaption { font-size: 10.5px; padding: 5px 2px 7px; }
}
@media (prefers-reduced-motion: reduce) { .mat-memory-collage .mat-memory { transition: none; } }

/* 2026-10-17 life layer (inner pages). States only apply once JS adds html.mat-life. */
html.mat-life .mat-rise { opacity: 0; translate: 0 26px; transition: opacity .8s ease, translate 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
html.mat-life .mat-rise.is-in { opacity: 1; translate: 0 0; }
html.mat-life .mat-wipe { clip-path: inset(0 0 100% 0 round 18px); scale: 1.06; transition: clip-path 1.2s cubic-bezier(.65,0,.35,1), scale 1.6s cubic-bezier(.16,1,.3,1); }
html.mat-life .mat-wipe.is-in { clip-path: inset(0 0 0 0 round 0); scale: 1; }
/* Gold highlighter that sweeps in under a phrase. */
.mat-pages mark.mat-mark { color: inherit; background: linear-gradient(transparent 56%, rgba(240,221,161,.42) 56%, rgba(240,221,161,.42) 90%, transparent 90%) no-repeat 0 0 / 0% 100%; padding: 0 .06em; border-radius: 2px; transition: background-size 1.1s .35s cubic-bezier(.65,0,.35,1); }
html:not(.mat-life) .mat-pages mark.mat-mark, .mat-pages mark.mat-mark.is-in { background-size: 100% 100%; }
html[data-mat-theme="light"] .mat-pages mark.mat-mark { background-image: linear-gradient(transparent 56%, rgba(247,214,110,.55) 56%, rgba(247,214,110,.55) 90%, transparent 90%); }
/* Scribbles draw themselves. */
html.mat-life .mat-pages svg.scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s .5s cubic-bezier(.65,0,.35,1); }
html.mat-life .mat-pages svg.scribble.is-in path { stroke-dashoffset: 0; }
/* Handwritten margin notes with a drawn arrow. */
.mat-pages .mat-noted { position: relative; }
.mat-pages .mat-note { position: absolute; left: calc(100% + 78px); top: -.2em; width: max-content; max-width: 220px; font-family: Apophis, Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.1; letter-spacing: 0; color: var(--mat-link, #f0dda1); rotate: -4deg; pointer-events: none; text-transform: none; }
.mat-pages .mat-note-arrow { position: absolute; width: 58px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mat-pages .mat-note--left .mat-note-arrow { right: calc(100% + 6px); top: 2px; }
.mat-pages .mat-note--down .mat-note-arrow { left: 12px; top: calc(100% + 2px); }
.mat-pages .mat-noted--left { width: fit-content; max-width: 100%; }
.mat-pages .mat-note--below { position: relative; display: block; left: auto; top: auto; margin: 10px 0 0 auto; width: fit-content; padding-left: 60px; rotate: -2deg; }
.mat-pages .mat-note--below .mat-note-arrow { left: 0; top: -26px; }
.mat-pages .mat-noted--sticker { position: relative; }
.mat-pages .mat-note--sticker { left: auto; right: 14px; top: 14px; padding: 6px 14px 7px; border-radius: 999px; background: #f0dda1; color: #1f152a; font-size: 20px; rotate: 6deg; box-shadow: 0 10px 24px -12px rgba(10,6,20,.7); }
html.mat-life .mat-pages .mat-note { opacity: 0; translate: -10px 0; transition: opacity .7s .6s ease, translate .9s .6s cubic-bezier(.16,1,.3,1); }
html.mat-life .mat-pages .mat-note.is-in { opacity: 1; translate: 0 0; }
html.mat-life .mat-pages .mat-note path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s 1s ease; }
html.mat-life .mat-pages .mat-note.is-in path { stroke-dashoffset: 0; }
/* Preflight checklist ticks. */
.mat-pages .profile-principles article > span { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--mat-link, #f0dda1); }
.mat-pages .mat-tick { width: 30px; height: 30px; flex: 0 0 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mat-pages .mat-tick path:first-child { stroke-width: 1.5; opacity: .55; }
html.mat-life .mat-pages .mat-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease; }
html.mat-life .mat-pages .mat-tick path:last-child { transition-delay: .55s; }
html.mat-life .mat-pages .mat-tick.is-in path { stroke-dashoffset: 0; }
.mat-pages .profile-principles article { transition: background-color .4s ease; padding: 22px 20px 26px; margin: 0 -20px; border-radius: 18px 18px 0 0; }
.mat-pages .profile-principles article:hover { background-color: rgba(240,221,161,.05); }
.mat-pages .profile-principles h3 { font-size: clamp(26px, 2.6vw, 36px); margin: 10px 0 8px; }
/* Photos breathe a little on hover. */
.mat-pages main figure, .mat-pages .profile-apron-pair, .mat-pages .profile-award-panel { overflow: hidden; }
.mat-pages main figure img, .mat-pages .profile-apron-pair img { transition: scale 1.2s cubic-bezier(.16,1,.3,1), clip-path 1.2s cubic-bezier(.65,0,.35,1); }
.mat-pages main figure:hover img, .mat-pages .profile-apron-pair img:hover { scale: 1.035; }
/* Narrow screens: notes sit under their line instead of in the margin. */
@media (max-width: 1180px) {
  .mat-pages .mat-note { position: static; display: block; width: auto; max-width: none; margin: 8px 0 0 64px; font-size: 19px; rotate: -2deg; }
  .mat-pages .mat-note--left .mat-note-arrow { right: auto; left: -62px; top: -16px; rotate: 30deg; }
  .mat-pages .mat-note--sticker { position: absolute; margin: 0; }
  .mat-pages .mat-note--below { margin-left: 0; }
  .mat-pages .mat-note { position: relative; }
  .mat-pages .mat-note--down .mat-note-arrow { display: none; }
}
@media print { html.mat-life .mat-rise, html.mat-life .mat-wipe, html.mat-life .mat-pages .mat-note { opacity: 1 !important; translate: none !important; clip-path: none !important; } }
@media (max-width: 1180px) {
  .mat-pages .mat-note--left, .mat-pages .mat-note--down { display: none; }
  .mat-pages .mat-noted--left { width: auto; }
  .mat-pages .mat-note.mat-note--sticker { position: absolute; display: block; top: 12px; right: 12px; left: auto; width: max-content; max-width: none; margin: 0; padding: 5px 12px 6px; font-size: 17px; rotate: 6deg; }
}
/* Phones: margin notes return as small notes tucked under their heading. */
@media (max-width: 1180px) {
  .mat-pages .profile-chapter-heading { flex-wrap: wrap; }
  .mat-pages .mat-note.mat-note--left, .mat-pages .mat-note.mat-note--down { display: block; position: relative; left: auto; top: auto; width: auto; max-width: 100%; margin: 10px 0 0; padding-left: 46px;
    font-size: 18px; line-height: 1.2; rotate: -2deg; white-space: normal; letter-spacing: 0; font-weight: 500; }
  .mat-pages .mat-note--left .mat-note-arrow, .mat-pages .mat-note--down .mat-note-arrow { display: block; left: 0; right: auto; top: -18px; width: 40px; height: 30px; rotate: 0deg; }
  .mat-pages .mat-noted--down, .mat-pages .mat-noted--left { width: auto; }
}

/* Link roll: the hover copy is drawn by CSS, so each label exists once in the DOM (clean for screen readers and crawlers). */
.link-roll-stack > span[data-c]::after { content: attr(data-c); }

/* Case study proof slot: outcome badge + client note. Ships hidden until filled with approved words. */
.mat-pages .case-proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-block: clamp(56px, 8vw, 110px);
  padding-block: clamp(32px, 4vw, 48px); border-block: 1px solid var(--mat-border, #53485b); }
.mat-pages .case-proof[hidden] { display: none; }
.mat-pages .case-proof-label { display: inline-block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mat-link, #f0dda1); }
.mat-pages .case-proof-figure { display: block; margin-top: 10px; font-size: clamp(52px, 7vw, 96px); line-height: .95; letter-spacing: -.04em; font-weight: 600; }
.mat-pages .case-proof-caption { margin: 12px 0 0; max-width: 32ch; opacity: .85; }
.mat-pages .case-proof-note { margin: 0; position: relative; padding-left: clamp(0px, 3vw, 36px); border-left: 1px solid var(--mat-border, #53485b); }
.mat-pages .case-proof-note blockquote { margin: 0; }
.mat-pages .case-proof-note blockquote p { margin: 0; font-family: Apophis, Georgia, serif; font-style: italic; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; }
.mat-pages .case-proof-note blockquote p::before { content: "\201C"; color: var(--mat-link, #f0dda1); margin-right: .05em; }
.mat-pages .case-proof-note blockquote p::after { content: "\201D"; color: var(--mat-link, #f0dda1); margin-left: .02em; }
.mat-pages .case-proof-note figcaption { margin-top: 18px; font-size: 15px; opacity: .8; }
.mat-pages .case-proof-note figcaption span { font-weight: 600; opacity: 1; margin-right: 8px; }
@media (max-width: 760px) { .mat-pages .case-proof { grid-template-columns: 1fr; } .mat-pages .case-proof-note { padding-left: 18px; } }