/* Local grid exploration: centered introduction, then pairs of square projects. */
html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky {
 min-height:var(--viewport-height,100vh); padding:80px 24px; justify-content:center;
}
html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-b {
 width:100%; max-width:none; padding:0 5vw 80px; margin:0 auto;
}
html.work-grid.home-gallery .collection-list-b {
 display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 24px; align-items:start;
}
html.work-grid.home-gallery .cms-project-card { min-width:0; max-width:none; width:100%; }
/* A touch opens the project without the browser painting a gray link rectangle. */
html.work-grid.home-gallery .cms-project-card a { -webkit-tap-highlight-color:transparent; }
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b,
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:hover{
 display:flex; flex-direction:column; gap:12px; padding:0; border:0; border-radius:0; background:transparent; overflow:visible;
}
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:focus-visible {
 display:flex; flex-direction:column; gap:12px; padding:0; border:0; border-radius:0; background:transparent; overflow:visible;
}
html.work-grid.home-gallery .cms-project-card .cms-project-caption {
 order:1; flex:none; padding:0; opacity:1; transform:none;
}
html.work-grid.home-gallery .cms-project-caption .heading-project-b {
 font-family:var(--main-font); font-size:14px; line-height:1.4; font-weight:400; letter-spacing:-.02em; margin:0; color:var(--heading);
}
html.work-grid .cms-project-caption .project-info { display:none; }
html.work-grid.home-gallery .cms-project-card .home-project-visual,
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:hover .home-project-visual{
 width:100%; aspect-ratio:1; padding:0; border-radius:var(--nd-radius-preview-canvas); overflow:hidden; background:transparent;
 clip-path:inset(0 round var(--nd-radius-preview-canvas)); isolation:isolate;
}
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:focus-visible .home-project-visual {
 width:100%; aspect-ratio:1; padding:0; border-radius:var(--nd-radius-preview-canvas); overflow:hidden; background:transparent;
 clip-path:inset(0 round var(--nd-radius-preview-canvas)); isolation:isolate;
}
html.work-grid.home-gallery .cms-project-card .project-hover-plane { width:100%; height:100%; aspect-ratio:1; border-radius:0; }
@media(max-width:767px) {
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky { padding:72px 20px; }
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-b { padding:0 20px 48px; }
 html.work-grid.home-gallery .collection-list-b { grid-template-columns:minmax(0,1fr); gap:32px; }
}

/* The greeting is text; the arrow is the separate home mark. */
.portfolio-masthead { position:absolute; top:28px; left:0; right:0; display:flex; justify-content:center; z-index:2; pointer-events:none; }
.portfolio-masthead a { display:block; width:48px; height:48px; pointer-events:auto; border:0; text-decoration:none; background-image:none; }
.portfolio-masthead a::after { display:none; }
.portfolio-masthead img { display:block; width:100%; height:100%; }
html.work-grid .hero-sticky .portfolio-bio > .introduction-title { margin:0 0 20px; line-height:1.1; text-align:center; }
.portfolio-footer { position:relative; min-height:var(--viewport-height,100vh); padding:24px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
.portfolio-footer-links { display:flex; align-items:center; justify-content:center; gap:24px; }
.footer-app { display:flex; flex:none; align-items:center; justify-content:center; width:56px; height:56px; padding:0; border:0; border-radius:13px; text-decoration:none; color:#111; cursor:pointer; transition:transform .2s ease; }
.footer-app img { display:block; width:56px; height:56px; }
.footer-app:hover { transform:scale(1.08); }
.footer-app:active { transform:scale(.92); }
.footer-app:focus-visible { outline:2px solid #2457e6; outline-offset:5px; }
.footer-app-spotify { background:#1ed760; box-shadow:inset 0 1px 1px #ffffff50,0 2px 4px #00000012; }
.footer-app-spotify svg { width:42px; height:42px; }
.footer-app-like { position:relative; overflow:visible; flex-direction:column; gap:0; background:linear-gradient(#ffb34d,#ff9500 45%,#ed7b00); color:#231300; box-shadow:inset 0 1px 1px #ffffff70,0 2px 4px #00000012; }
.footer-app-like svg { width:32px; height:32px; fill:currentColor; stroke:currentColor; stroke-width:.5; opacity:.65; transition:opacity .2s ease; }
.footer-app-like[aria-pressed="true"] svg { opacity:1; }
.footer-app-like [data-like-count] { font-variant-numeric:tabular-nums; }
@media(max-width:600px) {
 .portfolio-footer-links { gap:16px; }
 .portfolio-footer { padding:24px 20px; }
 .portfolio-masthead { top:24px; }
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky { padding-top:112px; }
}
@media(prefers-reduced-motion:reduce) { .footer-app { transition:none; } }

/* Two equal headline lines, followed by one continuous biography. */
html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky > .portfolio-bio { max-width:900px; }
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .introduction-title,
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .heading-hero {
 font-size:clamp(2rem,5vw,4.5rem); font-weight:500; line-height:1.05; letter-spacing:-.04em;
}
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .introduction-title { margin:0 0 .08em; }
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .heading-hero { margin:0 0 32px; }
html.work-grid .role-typewriter-phrase { max-width:100%; }
html.work-grid .role-typewriter-fixed { flex-shrink:0; }
@media(max-width:600px) {
 html.work-grid .role-typewriter-phrase .role-typewriter { min-width:0; }
 html.work-grid .role-typewriter-phrase .role-typewriter-line { white-space:normal; }
 html.work-grid .role-typewriter-phrase { align-items:baseline; }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .heading-hero { min-height:2.3em; }
}

/* Restore the original card surface response while keeping captions above. */
@media(hover:hover) and (pointer:fine) {
 html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:hover .home-project-visual { background:var(--home-surface-hover); }
}
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:focus-visible:where(html:not([data-focus-input="pointer"]) *) .home-project-visual { background:var(--home-surface-hover); }

.portfolio-masthead a { transition:transform .2s ease; }
.portfolio-masthead a:hover { transform:scale(1.08); }
.portfolio-masthead a:active { transform:scale(.92); }
.portfolio-masthead a:focus-visible { outline:2px solid #2457e6; outline-offset:5px; border-radius:11px; }
@media(prefers-reduced-motion:reduce) { .portfolio-masthead a { transition:none; } }

.footer-app-like > .like-bubbles { position:absolute; inset:0; z-index:20; display:block; pointer-events:none; transform:scale(2); transform-origin:center; }
@media(prefers-reduced-motion:reduce) { .footer-app-like > .like-bubbles { display:none; } }

/* Tooltip motion adapted from Siyu1017 / Uiverse (MIT; see licenses). */
.footer-app { position:relative; z-index:2; }
.footer-tooltip {
 position:absolute; bottom:calc(100% + 18px); left:50%; width:max-content;
 max-width:min(210px,calc(100vw - 32px)); padding:7px 11px;
 font-family:var(--main-font); font-size:13px; font-weight:400; line-height:1.35;
 text-align:center; color:#303030; background:#fff; border-radius:8px;
 box-shadow:0 4px 18px #00000012; z-index:10;
 opacity:0; visibility:hidden; pointer-events:none;
 transform:translateX(-50%) translateY(10px) scale(0);
 transform-origin:50% 100%;
 transition:transform .4s cubic-bezier(.07,1.17,.44,1.41),opacity .2s,visibility .2s;
}
.footer-tooltip::before {
 content:''; position:absolute; width:8px; height:8px; bottom:-3px; left:50%;
 transform:translateX(-50%) rotate(45deg); background:#fff; border-bottom-right-radius:2px;
}
.footer-app:not([data-tooltip-dismissed]):is(:hover,:focus-visible) .footer-tooltip {
 opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);
}
/* Touch visitors only need the live like count; navigation labels stay desktop-only. */
@media(max-width:767px), (hover:none), (pointer:coarse) {
 .footer-app:not(.footer-app-like) .footer-tooltip { display:none; }
 .footer-app-like .footer-tooltip {
  left:50%; right:auto; transform-origin:50% 100%;
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);
 }
 .footer-app-like .footer-tooltip::before {
  left:50%; right:auto; transform:translateX(-50%) rotate(45deg);
 }
}
@media(prefers-reduced-motion:reduce) { .footer-tooltip { transition:none; } }

/* Navigation follows the gallery edges; the role highlight stays neutral. */
.portfolio-masthead { left:5vw; right:5vw; justify-content:space-between; align-items:center; }
.portfolio-masthead a.portfolio-about-nav {
 width:auto; height:auto; padding:12px 0; font-family:var(--main-font);
 font-size:14px; line-height:24px; color:var(--heading); opacity:.7;
 transition:opacity .2s; transform:none;
}
.portfolio-masthead a.portfolio-about-nav:hover { opacity:1; transform:none; }
html.work-grid .role-typewriter-line { background:rgba(0,0,0,.085); }
html.work-grid[data-theme="dark"] .role-typewriter-line { background:rgba(255,255,255,.08); }
/* Scale only interface artwork, leaving square surfaces and photography intact. */
html.work-grid .home-project-visual .interface-cover-screen,
html.work-grid .home-project-visual .widget-cover-board,
html.work-grid .home-project-visual .speedster-product-cover .image-project-b,
html.work-grid .home-project-visual .pilates-video-cover .homepage-preview-media,
html.work-grid .home-project-visual .bb-cover-atmosphere .image-project-b,
html.work-grid .home-project-visual .bb-cover-atmosphere::before {
 scale:.86; transform-origin:center;
}
@media(max-width:767px) { .portfolio-masthead { left:20px; right:20px; } }

/* Keep the optional Matrix effect behind the content. */
html.work-grid .matrix-background-canvas,
html.work-grid[data-theme="dark"] .matrix-background-canvas { --matrix-opacity:.35; }

/* Bright resting copy; each hovered link keeps its own brand accent. */
html.work-grid { --bio-copy:#505057; --bio-link:#111; --bio-muted:rgba(17,17,17,.24); }
html.work-grid[data-theme="dark"] { --bio-copy:#c7c7cc; --bio-link:#fff; --bio-muted:rgba(245,245,247,.24); }
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio .portfolio-bio-copy > p { color:var(--bio-copy); transition:color 200ms ease; }
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy .intro-inline-link { color:var(--bio-link); transition:color 200ms ease; }
html.work-grid .intro-about-link { --bio-accent:var(--nav-about); }
html.work-grid .intro-company-link[href*="citi.com"] { --bio-accent:var(--accent-blue); }
html.work-grid .intro-company-link[href*="paramountplus.com"] { --bio-accent:#0064ff; }
html.work-grid .intro-company-link[href*="swiftly.com"] { --bio-accent:var(--accent-green); }
html.work-grid .intro-company-link[href*="speedsternow.com"] { --bio-accent:var(--accent-yellow); }
@media(hover:hover) and (pointer:fine) {
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy:has(.intro-inline-link:hover) > p { color:var(--bio-copy); }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy:has(.intro-inline-link:hover) .intro-inline-link:not(:hover) { color:var(--bio-link); }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy .intro-inline-link:hover { color:var(--bio-accent,var(--accent-blue)); }
}
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy:has(.intro-inline-link:focus-visible) > p { color:var(--bio-copy); }
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy:has(.intro-inline-link:focus-visible) .intro-inline-link:not(:focus-visible) { color:var(--bio-link); }
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy .intro-inline-link:focus-visible { color:var(--bio-accent,var(--accent-blue)); }
@media(prefers-reduced-motion:reduce) {
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio .portfolio-bio-copy > p,
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy .intro-inline-link { transition:none; }
}

/* Sun/moon icon motion inspired by JkHuger, Uiverse (MIT); no switch track. */
html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky { position:relative; }
.hero-theme-button {
 position:absolute; right:5vw; bottom:28px; width:48px; height:48px;
 display:grid; place-items:center; padding:0; border:1px solid rgba(120,120,128,.18);
 border-radius:50%; background:rgba(120,120,128,.06); color:var(--heading);
 cursor:pointer; -webkit-tap-highlight-color:transparent;
 transition:background .2s, transform .25s;
}
.hero-theme-button:hover { background:rgba(120,120,128,.14); transform:scale(1.07); }
.hero-theme-button:active { transform:scale(.92); }
.hero-theme-button:focus-visible { outline:2px solid var(--heading); outline-offset:5px; }
.hero-theme-button:disabled { opacity:.4; cursor:default; }
.hero-theme-icon { position:relative; width:28px; height:28px; display:block; }
.hero-theme-orb {
 position:absolute; width:20px; height:20px; top:4px; left:4px; border-radius:50%;
 box-shadow:8px -8px 0 10px currentColor inset; transform:scale(.52);
 transition:box-shadow .5s ease, transform .55s cubic-bezier(.22,1.3,.36,1);
}
.hero-theme-ray {
 position:absolute; top:13px; left:13px; width:2px; height:4px; border-radius:2px;
 background:currentColor; transform-origin:1px 1px;
 transform:rotate(calc(var(--ray)*45deg)) translateY(-11px);
 transition:transform .55s cubic-bezier(.22,1.3,.36,1), opacity .3s;
}
html[data-theme="dark"] .hero-theme-orb { box-shadow:5px -5px 0 4px currentColor inset; transform:rotate(-15deg) scale(1); }
html[data-theme="dark"] .hero-theme-ray { opacity:0; transform:rotate(calc(var(--ray)*45deg + 60deg)) translateY(-15px) scale(.3); }
@media(max-width:767px) { .hero-theme-button { right:20px; bottom:20px; } }
@media(prefers-reduced-motion:reduce) { .hero-theme-button, .hero-theme-orb, .hero-theme-ray { transition:none; } }

/* Vertical time reads upward from the lower-left corner of the introduction. */
.hero-clock {
 position:absolute; top:auto; bottom:28px; left:calc(5vw + 24px);
 writing-mode:vertical-rl; text-orientation:mixed; white-space:nowrap;
 transform:translateX(-50%) rotate(180deg); color:var(--heading); opacity:.55;
 font-family:var(--main-font); font-size:12px; line-height:1;
 font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
@media(max-width:767px) {
 .hero-clock { left:14px; top:auto; bottom:20px; font-size:10px; }
 .hero-clock-place { display:inline; }
}

/* One shared outer edge for navigation, gallery and hero controls. */
html.work-grid { --page-edge:24px; }
html.work-grid .portfolio-masthead {
 top:var(--page-edge); left:var(--page-edge); right:var(--page-edge); align-items:flex-start;
}
html.work-grid .portfolio-masthead a.portfolio-about-nav {
 padding:0; min-height:44px; line-height:20px;
}
html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-b { padding-left:var(--page-edge); padding-right:var(--page-edge); }
html.work-grid .hero-theme-button { right:var(--page-edge); bottom:var(--page-edge); }
html.work-grid .hero-clock { left:var(--page-edge); bottom:var(--page-edge); transform:rotate(180deg); }
@media(max-width:767px) { html.work-grid { --page-edge:16px; } }


/* Frosted role label: diffuse the moving symbols while keeping the type sharp. */
html.work-grid .role-typewriter-line {
 background:rgba(0,0,0,.085);
 -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
 border:0; box-shadow:none;
}
html.work-grid[data-theme="dark"] .role-typewriter-line {
 background:rgba(255,255,255,.10);
 box-shadow:none;
}
html.work-grid .hero-sticky > .portfolio-bio::before { content:none; }
@media(prefers-reduced-motion:no-preference) {
 html.work-grid .matrix-background-canvas { display:block; }
}
/* Let the label sample the canvas behind the hero rather than an isolated layer. */
html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky { isolation:auto; }
@keyframes centered-hero-enter {
 from { opacity:0; transform:translateY(16px); clip-path:inset(100% -12px 0); }
 to { opacity:1; transform:translateY(0); clip-path:inset(-12px); }
}
html.work-grid .grid-hero-b .block-hero { animation:none; }
html.work-grid.hero-enter-pending .grid-hero-b .block-hero { opacity:0; }
/* Reveal the three reading levels in order on both touch and pointer devices. */
html.work-grid.hero-enter-ready .grid-hero-b .block-hero > :is(.intro-identity,.heading-hero,.portfolio-bio-copy) {
 animation:centered-hero-enter 850ms cubic-bezier(.22,1,.36,1) backwards;
}
html.work-grid.hero-enter-ready .grid-hero-b .block-hero > .heading-hero { animation-delay:130ms; }
html.work-grid.hero-enter-ready .grid-hero-b .block-hero > .portfolio-bio-copy { animation-delay:280ms; }
@media(prefers-reduced-motion:reduce) {
 html.work-grid.hero-enter-ready .grid-hero-b .block-hero > :is(.intro-identity,.heading-hero,.portfolio-bio-copy) { animation:none; }
 html.work-grid.hero-enter-pending .grid-hero-b .block-hero { opacity:1; }
}

/* Keep mobile browser-toolbar changes out of the matrix and hero geometry. */
@media (max-width:767px) {
 html.work-grid .matrix-background-canvas {
  height:100lvh;
 }
 html.work-grid .hero-clock,
 html.work-grid .hero-theme-button {
  position:absolute;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  z-index:3;
 }
 html.work-grid .hero-clock {
  line-height:1.4;
 }
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-b {
  padding-top:40px;
 }
}

/* Keep the mobile introduction inside the inner edges of the corner controls. */
@media (max-width:767px) {
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky {
  padding-inline:calc(var(--page-edge) + 48px + 8px);
 }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .intro-identity,
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .heading-hero {
  font-size:clamp(20px, calc(6vw + 2px), 30px);
  line-height:1.12;
 }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .heading-hero {
  min-height:1.25em;
  margin-bottom:28px;
 }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio .portfolio-bio-copy {
  max-width:100%; font-size:13px; line-height:1.5;
 }
}

/* Stable card geometry: mobile scrolling never moves or fades the artwork. */
html.work-grid .speedster-flow-cover { display:grid; place-items:center; background:#e0e0e0; }
html.work-grid .speedster-flow-cover video { display:block; width:100%; height:100%; object-fit:contain; }
html.work-grid .grid-hero-b { overflow-anchor:none; }
@media (max-width:767px) {
 html.work-grid .role-typewriter-phrase .role-typewriter-line { white-space:nowrap; }
 html.work-grid .cms-project-card .link-block-image-project-b,
 html.work-grid .cms-project-card .project-hover-plane {
  transform:none; opacity:1; animation:none;
 }
}

/* Balance illustrated previews against the smaller interface artwork. */
html.work-grid .home-project-visual .speedster-brand-cover .image-project-b { scale:.88; }
html.work-grid .home-project-visual .speedster-brand-cover::before { top:78.6%; width:34.3%; height:4.84%; }
html.work-grid .home-project-visual .posivibez-cover-framed .image-project-b { scale:.75; }
.cover-icon-artwork { position:absolute; inset:0; }
html.work-grid .home-project-visual .cover-icon-artwork { scale:.78; transform-origin:center; }

/* Navigation and introduction share one text size on every breakpoint. */
html.work-grid { --intro-body-size:14px; }
html.work-grid .portfolio-masthead a.portfolio-about-nav,
html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio .portfolio-bio-copy {
 font-size:var(--intro-body-size);
}

/* Match the phone in the square recording to the other mobile previews. */
html.work-grid .home-project-visual .speedster-flow-cover .homepage-preview-media {
 scale:.8; transform-origin:center;
 /* Crop the 1080px recording to the phone (x341–739, y122–958).
    Crop the poster and video together; keep every phone pixel opaque. */
 clip-path:inset(11.3% 31.57% 11.3% round 6.4%);
 -webkit-mask-image:none;
 mask-image:none;
}

/* Keep project squares at a comfortable scale on large displays. */
html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-b {
 max-width:1440px; margin-inline:auto; padding-inline:64px;
}
.portfolio-masthead .portfolio-home-mark { display:block; width:48px; height:48px; }
@media(max-width:767px) {
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-b { padding-inline:32px; }
}

/* A centered reading column with a quiet section index. */
html.work-grid .portfolio-viewer-about {
 --type-body:14px; --type-body-leading:1.65; --type-detail:14px;
 --type-heading:16px; --type-title:20px;
 --about-title-body-gap:28px;
 display:grid; grid-template-columns:160px minmax(0,640px) 160px;
 gap:40px; width:100%; max-width:1104px; padding:80px 32px 96px;
 align-items:start;
}
.about-reading-column { grid-column:2; min-width:0; }
.about-section-nav { position:sticky; top:80px; display:flex; flex-direction:column; gap:10px; align-self:start; }
.about-section-nav button {
 appearance:none; border:0; background:none; padding:0; text-align:left;
 font:400 14px/1.5 var(--main-font); color:var(--heading); opacity:.5; cursor:pointer;
 transition:opacity .2s;
}
.about-section-nav button:hover, .about-section-nav button[aria-current] { opacity:1; }
.portfolio-viewer-about [data-about-panel][hidden] { display:none !important; }
html.work-grid .portfolio-viewer-about .portfolio-about-section-artwork {
 display:block; position:relative; width:280px; max-width:100%; aspect-ratio:1;
 overflow:hidden; border-radius:16px; margin:0 auto 32px 0; background:#e7e2d8;
}
.portfolio-about-section-artwork img {
 display:block; width:100%; height:100%; object-fit:cover;
}
/* One smooth crop-and-drift response for all four About images. Pointer motion
   is damped by AboutSections; CSS transitions must not restart on each event. */
@media(min-width:768px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .portfolio-viewer-about :is(.portfolio-about-portrait,.portfolio-about-section-artwork) > :is(img,.portrait-depth-canvas) {
  transform:translate3d(var(--about-artwork-x,0%),var(--about-artwork-y,0%),0) scale(var(--about-artwork-scale,1));
  transform-origin:center; transition:none; will-change:transform;
 }
}
@media(min-width:768px) {
 html.work-grid .portfolio-viewer-about.has-about-tabs .nd-section { margin-top:0; }
 .about-reading-column [role="tabpanel"]:focus-visible { outline:2px solid var(--heading); outline-offset:8px; }
}
.about-section-nav button:focus-visible { outline:2px solid var(--heading); outline-offset:4px; border-radius:2px; }
html.work-grid .portfolio-viewer-about .portfolio-about-profile { display:flex; flex-direction:column; gap:32px; align-items:stretch; }
html.work-grid .portfolio-viewer-about .portfolio-about-visuals { width:100%; max-width:none; }
html.work-grid .portfolio-viewer-about .portfolio-about-portrait { width:280px; max-width:100%; margin:0 auto 0 0; }
html.work-grid .portfolio-viewer-about .portfolio-about-identity { width:100%; }
html.work-grid .portfolio-viewer-about .nd-section { display:block; margin-top:56px; padding-top:0; border:0; }
html.work-grid .portfolio-viewer-about h3 { font-size:16px; line-height:1.5; font-weight:500; margin:0 0 24px; }
/* A tab is a full section: its title shares the introduction's type and gap. */
html.work-grid .portfolio-viewer-about #portfolio-viewer-title,
html.work-grid .portfolio-viewer-about [data-about-panel] > h3 {
 font-size:var(--type-title); line-height:1.4; font-weight:500; letter-spacing:-.025em; margin:0;
}
html.work-grid .portfolio-viewer-about #portfolio-viewer-title + *,
html.work-grid .portfolio-viewer-about [data-about-panel] > h3 + * { margin-top:var(--about-title-body-gap); }
html.work-grid .portfolio-viewer-about h4,
html.work-grid .portfolio-viewer-about h5 { font-size:14px; line-height:1.5; }
html.work-grid .portfolio-viewer-about :is(p,blockquote,figcaption,dt,dd),
html.work-grid .portfolio-viewer-about .nd-prose { font-size:14px; line-height:1.65; }
html.work-grid .portfolio-viewer-about .portfolio-about-quote { margin:24px 0 0; }
html.work-grid .portfolio-viewer-about .portfolio-about-quote blockquote { font-size:14px; }
html.work-grid .portfolio-viewer-about .portfolio-about-places { margin:40px 0 0; }
html.work-grid .portfolio-viewer-about .about-places { height:300px; }
html.work-grid .portfolio-viewer-about :is(h2,h3) { scroll-margin-top:48px; }
html.work-grid .portfolio-viewer-project {
 --type-body:14px; --type-body-leading:1.65; --type-detail:14px;
 --portfolio-copy:var(--bio-copy);
}
html.work-grid .portfolio-viewer-project :is(.portfolio-viewer-summary,.cms-rich-text p,.cms-rich-text li,.portfolio-viewer-meta dd,.case-editorial-role,.case-editorial-scale-context) {
 font-family:var(--main-font); font-size:14px; line-height:1.65;
}
@media(max-width:1000px) {
 html.work-grid .portfolio-viewer-about { grid-template-columns:140px minmax(0,640px); gap:32px; max-width:880px; }
}
@media(max-width:767px) {
 html.work-grid .portfolio-viewer-about { display:block; padding:80px 32px 64px; }
 .about-section-nav { position:static; flex-direction:row; flex-wrap:wrap; gap:10px 20px; margin-bottom:32px; }
 html.work-grid .portfolio-viewer-about :is(.portfolio-about-portrait,.portfolio-about-section-artwork) { width:230px; margin-left:0; margin-right:auto; }
 html.work-grid .portfolio-viewer-about .nd-section { margin-top:80px; }
 html.work-grid .portfolio-viewer-about .about-places { height:260px; }
}

/* The poster remains visible until playback really starts, including Safari autoplay denial. */
.homepage-preview-media { position:relative; width:100%; height:100%; }
.homepage-preview-media > .homepage-preview-poster,
.homepage-preview-media > video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.homepage-preview-media > video { opacity:1; pointer-events:none; }
.homepage-preview-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; opacity:0; pointer-events:none; }
.homepage-preview-media.is-animated-fallback > .homepage-preview-fallback { opacity:1; }
.homepage-preview-media.is-animated-fallback > video { opacity:0; }
.homepage-preview-media.is-playing > video { opacity:1; }
.homepage-preview-media > .homepage-preview-poster { z-index:1; opacity:1; transition:opacity .3s ease; }
.homepage-preview-media.is-playing > .homepage-preview-poster { opacity:0; }
.homepage-preview-media video::-webkit-media-controls,
.homepage-preview-media video::-webkit-media-controls-start-playback-button { display:none !important; -webkit-appearance:none; }
/* Citi's supplied still and film include the same iPhone frame. One geometry
   scales both; the still's exact alpha contour removes the movie's black matte. */
.citi-phone-cover { display:grid; place-items:center; }
.citi-phone-cover .homepage-preview-media { width:76%; height:76%; }
.citi-phone-cover .homepage-preview-media {
 /* Clip the stable DOM surface. Masking WebKit's accelerated video layer
    itself can hide/suspend the movie during mobile scrolling. */
 -webkit-mask-image:url('/videos/citi/citi-home-preview-poster-v2.webp');
 mask-image:url('/videos/citi/citi-home-preview-poster-v2.webp');
 -webkit-mask-size:100% 100%; mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.citi-phone-cover .homepage-preview-media > .homepage-preview-poster { transition:opacity 320ms ease-in-out; }
/* Reveal the first scroll movement promptly; keep the softer fade back to the still. */
.citi-phone-cover .homepage-preview-media.is-playing > .homepage-preview-poster { transition:opacity 120ms ease-out; }
@media(prefers-reduced-motion:reduce) {
 .citi-phone-cover .homepage-preview-media > .homepage-preview-poster,
 .citi-phone-cover .homepage-preview-media.is-playing > .homepage-preview-poster { transition:none; }
}
@supports not ((mask-image:url('')) or (-webkit-mask-image:url(''))) {
 .citi-phone-cover .homepage-preview-media.is-playing > .homepage-preview-poster { opacity:1; }
}
/* Walkie's fine static grain, over the existing portfolio palette. */
html.work-grid body::before {
 content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
 background-image:url('/images/walkie-noise.png'); background-size:96px 96px;
 opacity:.36;
}
html.work-grid[data-theme="dark"] body::before { opacity:.18; }

.pilates-video-cover .homepage-preview-media { height:auto; aspect-ratio:1600 / 1050; border-radius:8px; box-shadow:var(--preview-screen-shadow); }
.pilates-video-cover .homepage-preview-media > :is(video,img) { height:100%; border-radius:8px; box-shadow:none; }

/* One section heading; resource labels remain subordinate to it. */
html.work-grid .portfolio-viewer-about .portfolio-about-tools :is(dt,strong) { font-weight:400; }
html.work-grid .portfolio-viewer-about .about-practice-group { margin-top:32px; }
html.work-grid .portfolio-viewer-about .about-practice-caption { margin:0 0 16px; font-weight:400; }

.portfolio-viewer-close[hidden] { display:none !important; }
.portfolio-viewer-about .about-back-link { display:flex; align-items:center; gap:6px; margin-bottom:36px; color:var(--heading); opacity:.6; font:400 14px/1.5 var(--main-font); text-decoration:none; transition:opacity .2s; }
.portfolio-viewer-about .about-back-link:hover { opacity:1; }
.portfolio-viewer-about .about-back-link:focus-visible { outline:2px solid var(--heading); outline-offset:4px; border-radius:2px; }
@media(max-width:767px) { .portfolio-viewer-about .about-back-link { flex-basis:100%; margin-bottom:16px; } }

/* About keeps only its back link on mobile. */
html.work-grid .portfolio-viewer-about .about-back-link { text-decoration:none; border:0; background-image:none; box-shadow:none; }
html.work-grid .portfolio-viewer-about .about-back-link::after,
html.work-grid .portfolio-viewer-about .about-back-link::before { display:none; }
@media(max-width:767px) {
 .about-section-nav [data-about-section] { display:none; }
 .portfolio-viewer-about .about-back-link { margin-bottom:0; }
}

/* About changes pages quietly; only project viewers use the mobile sheet motion. */
html.work-grid .portfolio-viewer.is-about-view { transform:none; opacity:0; transition:opacity 180ms ease-out; }
html.work-grid .portfolio-viewer.is-about-view.is-open { transform:none; opacity:1; }
html.work-grid .portfolio-viewer.is-about-view.is-closing { transform:none; opacity:0; transition:none; }
/* Mobile About enters as a page, with a short content rise rather than a sheet. */
@media(max-width:767px) and (prefers-reduced-motion:no-preference) {
 html.work-grid .portfolio-viewer.is-about-view { transition:opacity 380ms cubic-bezier(.22,1,.36,1); }
 html.work-grid .portfolio-viewer.is-about-view.is-open:not(.is-closing) .about-reading-column {
  animation:about-mobile-enter 620ms cubic-bezier(.22,1,.36,1) backwards;
 }
 html.work-grid .portfolio-viewer.is-about-view.is-closing { transition:opacity 240ms ease-out; }
}
@keyframes about-mobile-enter {
 from { opacity:0; transform:translate3d(0,12px,0); }
 to { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce) { html.work-grid .portfolio-viewer.is-about-view { transition:none; } }

/* Keep Back on the same header baseline as the homepage About link. */
html.work-grid .portfolio-viewer-about .about-back-link { position:absolute; top:var(--page-edge); left:var(--page-edge); z-index:5; margin:0; min-height:44px; align-items:flex-start; line-height:20px; }
@media(max-width:767px) {
 html.work-grid .portfolio-viewer-about { padding-top:72px; }
 .about-section-nav { display:none; }
}

/* Anchor Back to the scrolling page, not the viewport. */
html.work-grid .portfolio-viewer.is-about-view .portfolio-viewer-content { position:relative; }

@media(max-width:767px) {
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .intro-identity { font-size:clamp(22px, calc(6vw + 4px), 32px); }
}

/* Desktop Back aligns with the section index inside the centered reading layout. */
@media(min-width:768px) {
 html.work-grid .portfolio-viewer-about .about-back-link { position:fixed; left:max(32px, calc((100% - 1104px) / 2 + 32px)); }
}
@media(min-width:768px) and (max-width:1000px) {
 html.work-grid .portfolio-viewer-about .about-back-link { left:max(32px, calc((100% - 880px) / 2 + 32px)); }
}

/* The logo owns its hit area while the artwork animates inside it. */
.portfolio-masthead .portfolio-home-mark { pointer-events:auto; cursor:pointer; transform-origin:top left; scale:1; }
.portfolio-masthead .portfolio-home-mark img { transform-origin:top left; scale:.86; transition:scale .28s cubic-bezier(.2,.8,.3,1); }
.logo-sticker-layer { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.logo-sticker { position:absolute; width:80px; height:80px; pointer-events:auto; cursor:pointer; filter:drop-shadow(0 3px 3px #0002); }
.logo-sticker img { display:block; width:100%; height:100%; object-fit:contain; }
@media(min-width:768px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .portfolio-masthead, html.work-grid .hero-clock, html.work-grid .hero-theme-button { translate:0 var(--corner-drift,0px); }
 .portfolio-masthead .portfolio-home-mark:is(:hover,.is-demonstrating) img { scale:1.65; animation:logo-shake .3s linear infinite both; }
}
@media(prefers-reduced-motion:reduce) {
 .portfolio-masthead .portfolio-home-mark, .portfolio-masthead .portfolio-home-mark img { transition:none; }
}

/* Shake adapted from Botwe-Felix5820 / Uiverse (MIT, see licenses). */
@keyframes logo-shake {
 0%,100% { transform:translate(0); }
 20% { transform:translate(0,2px); }
 40% { transform:translate(0,0); }
 60% { transform:translate(2px,2px); }
 80% { transform:translate(2px,0); }
}
.logo-sticker-burst { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--sticker-color); }
.logo-sticker-burst.is-ring { background:transparent; border:2px solid var(--sticker-color); }

/* Keep all four corner controls attached to the viewport throughout the gallery. */
html.work-grid .portfolio-masthead,
html.work-grid .hero-clock,
html.work-grid .hero-theme-button { position:fixed; translate:none; z-index:20; }

/* Glass belongs to the card surface, never to the opaque project artwork.
   Put the blur on the outer rounded box so inner clipping cannot isolate it. */
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:not([data-project-slug="springbom"]) .home-project-visual {
 background:var(--project-glass, rgb(220 225 232 / .66));
 -webkit-backdrop-filter:blur(6px);
 backdrop-filter:blur(6px);
}
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:not([data-project-slug="springbom"]) .project-hover-plane,
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:not([data-project-slug="springbom"]) .project-hover-plane > .block-image-project-b {
 background:transparent;
}
html.work-grid [data-project-slug="citibank-enhancement"] { --project-glass:rgb(184 218 238 / .66); }
html.work-grid [data-project-slug="mobile-store-locator"] { --project-glass:rgb(177 216 195 / .66); }
html.work-grid [data-project-slug="marketplace-control-panel"] { --project-glass:rgb(190 207 232 / .66); }
html.work-grid [data-project-slug="speedster-product-design"] { --project-glass:rgb(210 210 210 / .66); }
/* Character cards use distinct brand colours while retaining the shared glass surface. */
html.work-grid [data-project-slug="speedster-branding"] { --project-glass:linear-gradient(145deg,rgb(255 232 151 / .90),rgb(255 200 65 / .90)); }
html.work-grid [data-project-slug="posivibez"] { --project-glass:linear-gradient(145deg,rgb(166 116 232 / .90),rgb(118 72 202 / .92)); }
html.work-grid [data-project-slug="dynamic-widget"] { --project-glass:linear-gradient(145deg,rgb(232 226 217 / .90),rgb(189 179 165 / .90)); }
html.work-grid [data-project-slug="big-brother"] { --project-glass:linear-gradient(145deg,rgb(139 186 206 / .66),rgb(109 148 179 / .66) 55%,rgb(191 164 144 / .66)); }
html.work-grid [data-project-slug="icon-set-for-paramount"] { --project-glass:linear-gradient(145deg,rgb(182 213 244 / .66),rgb(138 174 219 / .66)); }
html.work-grid [data-project-slug="category-icons"] { --project-glass:linear-gradient(135deg,rgb(246 220 233 / .66),rgb(206 184 237 / .66)); }
html.work-grid [data-project-slug="springbom-pilates"] { --project-glass:linear-gradient(135deg,rgb(255 161 67 / .66),rgb(249 122 196 / .66)); }

/* Logo recovery: orange tile first, then the bomb symbol. */
.portfolio-masthead .portfolio-home-mark { position:relative; cursor:pointer; }
.portfolio-home-mark:focus-visible { outline:2px solid var(--heading); outline-offset:5px; border-radius:10px; }
.logo-pop-layer { z-index:30; }
.logo-recovery { display:none; position:absolute; inset:0; scale:.86; transform-origin:top left; pointer-events:none; }
.logo-recovery-shell { position:absolute; inset:6.25%; border-radius:17.857%; background:linear-gradient(#ffb34d,#ff9500 45%,#ed7b00); overflow:hidden; }
.logo-recovery-color { display:none; }
.logo-recovery svg { position:absolute; inset:0; width:100%; height:100%; }
.portfolio-masthead .portfolio-home-mark.is-rebuilding img { opacity:0; animation:none; scale:.86; }
.portfolio-home-mark.is-rebuilding .logo-recovery { display:block; animation:logo-return 1.376s both; }
.is-rebuilding .logo-recovery-shell { filter:none; }
.is-rebuilding .logo-recovery svg path { fill:#231300; stroke:#231300; }
.is-rebuilding .logo-recovery svg { animation:logo-arrow-return 1.376s both; }
@keyframes logo-return {
 0%,50% { opacity:0; transform:scale(.65); }
 76.744%,100% { opacity:1; transform:scale(1); }
}
@keyframes logo-arrow-return {
 0%,76.744% { opacity:0; transform:translate(-8px,8px); animation-timing-function:cubic-bezier(.22,1,.36,1); }
 85.756% { opacity:1; transform:translate(2.7px,-2.7px); animation-timing-function:cubic-bezier(.25,0,.2,1); }
 100% { opacity:1; transform:translate(0,0); }
}
@media(prefers-reduced-motion:reduce) {
 .is-rebuilding .logo-recovery svg { transform:none; animation:logo-arrow-fade 1.376s both; }
}
@keyframes logo-arrow-fade { 0%,76.744% { opacity:0; } 100% { opacity:1; } }
@media(prefers-reduced-motion:no-preference) {
 .portfolio-home-mark.is-hinting:not(.is-rebuilding) img { animation:logo-idle-hint .56s ease-in-out; }
}
@keyframes logo-idle-hint {
 0%,100% { transform:rotate(0); }
 20%,60% { transform:translateX(-1.5px) rotate(-8deg); }
 40%,80% { transform:translateX(1.5px) rotate(8deg); }
}

/* Mobile corner controls belong to the introduction, not the viewport. */
@media(max-width:767px) {
 html.work-grid .portfolio-masthead { position:absolute; }
 html.work-grid .hero-sticky .hero-clock,
 html.work-grid .hero-sticky .hero-theme-button {
  position:absolute; top:auto; bottom:var(--page-edge); translate:none;
 }
}

/* Keep articles and short phrases attached on narrow hero lines. */
@media(max-width:767px) {
 .portfolio-bio-copy .intro-keep-mobile,
 .portfolio-bio-copy .intro-about-link { white-space:nowrap; }
}

/* Dark theme restores from white so the silhouette stays visible. */
/* Follow the mobile browser's expanding viewport without a one-frame jump.
   Children stay in the same hero coordinate system, including bottom controls. */
@media(max-width:767px) {
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky {
  min-height:var(--viewport-height,100vh);
  transition:min-height 350ms cubic-bezier(.22,1,.36,1);
 }
}
@media(max-width:767px) and (prefers-reduced-motion:reduce) {
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky { transition:none; }
}

/* Three short fuse flashes, followed by the existing burst and recovery. */
.portfolio-masthead .portfolio-home-mark.is-primed img { scale:1.65; animation:logo-fuse 400ms steps(1,end) 3; }
html[data-theme="dark"] .portfolio-masthead .portfolio-home-mark.is-primed img { animation-name:logo-fuse-dark; }
@keyframes logo-fuse {
 0% { filter:brightness(0) invert(1); }
 50%,100% { filter:none; }
}
@keyframes logo-fuse-dark {
 0% { filter:brightness(0) invert(1); }
 50%,100% { filter:none; }
}

/* The logo tears a small corner in the page, revealing green code underneath. */
html { --rift-surface:#f5f5f7; }
html[data-theme="dark"] { --rift-surface:#121212; }
.logo-rift { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.logo-rift-opening { position:absolute; left:0; top:0; width:min(330px,65vw); height:280px; background:#030805; transform-origin:top left; clip-path:polygon(0 0,85% 0,0 85%); }
.logo-rift-opening canvas { display:block; }
.logo-rift-shard { position:absolute; clip-path:polygon(0 0,100% 24%,64% 100%,15% 76%); pointer-events:none; }

.logo-rift-matrix { display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.logo-rift-cracks { position:absolute; left:0; top:0; overflow:visible; fill:none; stroke:#514d45; stroke-linecap:round; stroke-linejoin:round; }
.logo-rift-cracks .rift-edge { stroke-width:1; opacity:.65; }
.logo-rift-cracks .rift-crack { stroke-width:1.15; stroke-dasharray:1; }
.logo-rift-cracks .rift-branch { stroke-width:.45; opacity:.5; }
html[data-theme="dark"] .logo-rift-cracks { stroke:#f0efe8; filter:drop-shadow(0 0 2px #ffffff35); }
html[data-theme="dark"] .logo-rift-shard { background:#454640 !important; }

.logo-rift-cracks .rift-fissure { fill:#514d45; stroke:none; }
html[data-theme="dark"] .logo-rift-cracks .rift-fissure { fill:#f0efe8; }

/* Both actions use the same symbol layer, transition and opaque orange tile. */
.portfolio-masthead .portfolio-home-mark { isolation:isolate; }
.portfolio-masthead .portfolio-home-mark img { transition:scale .28s cubic-bezier(.2,.8,.3,1); }
.portfolio-masthead .portfolio-home-mark img.logo-action-symbol { position:absolute; inset:0; opacity:0; pointer-events:none; }
.portfolio-masthead .portfolio-home-mark:is(.is-bomb-visible,.is-magnet-visible,.is-primed) > img:first-child { opacity:0; }
.portfolio-masthead .portfolio-home-mark:is(.is-bomb-visible,.is-magnet-visible) img.logo-action-symbol { opacity:1; }
.portfolio-masthead .portfolio-home-mark.is-arming:not(.is-primed) img { scale:1.65; animation:none; transition:scale .28s cubic-bezier(.2,.8,.3,1),opacity .18s ease; }
.portfolio-masthead .portfolio-home-mark.is-arming img.logo-action-symbol { transition:scale .28s cubic-bezier(.2,.8,.3,1),opacity .22s ease; }
.portfolio-masthead .portfolio-home-mark img.logo-tile { position:absolute; inset:0; z-index:-2; opacity:1; pointer-events:none; transition:scale .28s cubic-bezier(.2,.8,.3,1); }
.portfolio-home-mark .logo-tile-red,.portfolio-home-mark .logo-magnet-tile { display:none; }
.portfolio-masthead .portfolio-home-mark.is-rebuilding > img,
.portfolio-masthead .portfolio-home-mark.is-rebuilding img.logo-action-symbol,
.portfolio-masthead .portfolio-home-mark.is-rebuilding img.logo-tile { opacity:0; }
.portfolio-masthead .portfolio-home-mark.is-magnet-return img { animation:none; transition:opacity .3s ease,scale .28s ease; }
.portfolio-masthead .portfolio-home-mark.is-magnet-return img.logo-action-symbol { opacity:0; }
.portfolio-masthead .portfolio-home-mark img.logo-white-flash { position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; }
html[data-theme] .portfolio-masthead .portfolio-home-mark.is-primed img { animation:none; filter:none; }
/* Recolor the original silhouette: stacked antialiased edges leave a dark rim. */
.portfolio-masthead .portfolio-home-mark img.logo-white-flash { display:none; }
html[data-theme] .portfolio-masthead .portfolio-home-mark.is-primed img.logo-tile { animation:logo-fuse 400ms steps(1,end) 3; }
html[data-theme] .portfolio-masthead .portfolio-home-mark.is-primed img.logo-action-symbol { animation:logo-fuse-symbol 400ms steps(1,end) 3; }
@keyframes logo-fuse-symbol { 0% { visibility:hidden; } 50%,100% { visibility:visible; } }
@media(max-width:767px) {
 .portfolio-masthead .portfolio-home-mark img.logo-action-symbol { display:none; }
}
@media(prefers-reduced-motion:reduce) { .portfolio-masthead .portfolio-home-mark img { transition:none !important; } }

/* Press inward with the arrow, swap at the bottom, return with the bomb. */
.portfolio-masthead .portfolio-home-mark.is-arming:not(.is-primed) { animation:logo-press-in .38s both; }
.portfolio-masthead .portfolio-home-mark.is-arming:not(.is-primed) > img:first-child,
.portfolio-masthead .portfolio-home-mark.is-arming img.logo-action-symbol { transition:scale .28s cubic-bezier(.2,.8,.3,1); }
@keyframes logo-press-in {
 0% { transform:translate(0,0) scale(1); animation-timing-function:cubic-bezier(.25,.1,.35,1); }
 36.842% { transform:translate(8px,8px) scale(.80); animation-timing-function:cubic-bezier(.35,0,.25,1); }
 100% { transform:translate(0,0) scale(1); }
}
@media(prefers-reduced-motion:reduce) { .portfolio-masthead .portfolio-home-mark.is-arming { animation:none; } }

/* About uses the outer page as its only mobile scroll surface. Avoid nested
   fixed/flex scrollers and retained transform layers at iOS scroll boundaries. */
@media(max-width:767px) {
 html.work-grid .portfolio-viewer.is-about-view {
  overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:none;
  touch-action:pan-y pinch-zoom;
 }
 html.work-grid .portfolio-viewer.is-about-view .portfolio-viewer-panel {
  display:block; height:auto; min-height:100%; overflow:visible;
 }
 html.work-grid .portfolio-viewer.is-about-view .portfolio-viewer-scroll {
  overflow:visible; overscroll-behavior:auto;
 }
 html.work-grid .portfolio-viewer-about,
 html.work-grid .portfolio-viewer-about a { touch-action:pan-y pinch-zoom; }
}

/* Keep mobile artwork legible while the five-sticker batches drift down. */
@media(max-width:767px) { .logo-sticker { width:64px; height:64px; } }

/* The introduction and contact icons each occupy one visible browser screen. */
@media(max-width:767px) {
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky {
  box-sizing:border-box; min-height:var(--viewport-height,100vh); padding:88px 40px 80px;
 }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy { font-size:14px; line-height:1.5; }
 .portfolio-footer { min-height:var(--viewport-height,100vh); }
}
@media(max-width:767px) and (max-height:520px) {
 html.work-grid.walkie-theme.home-gallery .grid-hero-b .hero-sticky { padding:76px 32px 68px; }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio > .heading-hero { margin-bottom:20px; }
 html.work-grid.walkie-theme.home-gallery .hero-sticky .portfolio-bio-copy { font-size:13px; line-height:1.45; }
}

/* One hit target per homepage action. Moving across animated artwork, video,
   text or icon layers must keep the enclosing link/button in control. */
html.work-grid :is(.cms-project-card .link-block-image-project-b, .portfolio-about-nav, .portfolio-home-mark[role="button"], .hero-theme-button:enabled) {
 cursor:pointer;
}
html.work-grid :is(.cms-project-card .link-block-image-project-b, .portfolio-about-nav, .portfolio-home-mark[role="button"], .hero-theme-button) *,
html.work-grid :is(.cms-project-card .link-block-image-project-b, .portfolio-about-nav, .portfolio-home-mark[role="button"], .hero-theme-button)::before,
html.work-grid :is(.cms-project-card .link-block-image-project-b, .portfolio-about-nav, .portfolio-home-mark[role="button"], .hero-theme-button)::after {
 pointer-events:none; cursor:inherit;
}
/* Match the document's fallback cursor while a control is hovered, including
   during compositor updates of its passive video and animation layers. */
@media(hover:hover) and (pointer:fine) {
 html.work-grid:has(:is(.cms-project-card .link-block-image-project-b, .portfolio-about-nav, .portfolio-home-mark[role="button"], .hero-theme-button:enabled):hover) {
  cursor:pointer;
 }
}

/* Desktop hover always begins with the opening frame; rewind behind its cover. */
.homepage-preview-media.is-at-start > .homepage-preview-poster { opacity:1 !important; transition:none !important; }