/* Business in focus: continuity and one connected project sequence. */
:root{--duration-feedback:160ms;--duration-panel:180ms;--duration-scene:600ms}
.hero{view-timeline-name:--hero-departure;view-timeline-axis:block}
button:not(.back-to-top){position:relative}
button:not(.link-button),.button{overflow:hidden;isolation:isolate}
button,.button{transition:transform 120ms var(--ease),background-color var(--duration-feedback)}
button.is-pressed,.button.is-pressed{transform:scale(.97)}
.touch-ink{position:absolute;border-radius:50%;background:currentColor;pointer-events:none;opacity:0}
.menu-glyph{display:block;position:relative;width:24px;height:20px;flex:none}
.menu-glyph>span{position:absolute;left:0;width:24px;height:2px;border-radius:1px;background:currentColor;transform-origin:center;transition:transform 180ms var(--ease),opacity 120ms}
.menu-glyph>span:nth-child(1){top:1px}.menu-glyph>span:nth-child(2){top:9px}.menu-glyph>span:nth-child(3){top:17px}
.menu-open[aria-expanded=true] .menu-glyph>span:nth-child(1),.mobile-menu[open] .menu-glyph>span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-open[aria-expanded=true] .menu-glyph>span:nth-child(2),.mobile-menu[open] .menu-glyph>span:nth-child(2){opacity:0}
.menu-open[aria-expanded=true] .menu-glyph>span:nth-child(3),.mobile-menu[open] .menu-glyph>span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.js{scroll-padding-top:calc(var(--header-height) + 20px)}
.js .site-header{position:sticky;top:0}
.site-header[data-scrolled=true]{box-shadow:0 5px 18px #07182c0d}
.reading-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;pointer-events:none}
.desktop-nav a.scroll-current:not(.button),.service-menu>summary.scroll-current{color:var(--blue)}
.desktop-nav>a:not(.button){position:relative}
.desktop-nav>a:not(.button)::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left}
.desktop-nav>a.scroll-current:not(.button)::after{transform:scaleX(1)}
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:19;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 17px;border:0;border-radius:var(--radius-control);background:var(--ink);color:var(--surface);font-size:13px;font-weight:600;box-shadow:0 5px 18px #07182c22}
.back-to-top .icon{width:18px;height:18px;transform:rotate(-90deg);filter:brightness(0) invert(1)}
:root[data-theme=dark] .back-to-top .icon{filter:brightness(0)}
body:has(dialog[open]) .back-to-top{visibility:hidden}
.process-grid{position:relative;padding-top:12px;view-timeline-name:--process-reading;view-timeline-axis:block}
.process-grid article{border-top:0;position:relative}
.process-grid::before,.process-grid::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line);transform-origin:left}
.process-grid::after{background:var(--blue)}
.process-grid article::before{content:"";position:absolute;top:-14px;left:0;width:6px;height:6px;border-radius:50%;background:var(--blue)}

/* Progressive enhancement: unsupported browsers retain the complete static composition. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    html:not([data-motion=reduced]) .hero-photo{
      transform-origin:center top;animation:bg-hero-departure var(--duration-scene) linear both;
      animation-timeline:--hero-departure;animation-range:exit 0% exit 70%;
    }
    html:not([data-motion=reduced]) .founder figure>img{
      animation:bg-portrait-focus var(--duration-scene) linear both;
      animation-timeline:view();animation-range:entry 10% entry 90%;
    }
    html:not([data-motion=reduced]) .work-grid{view-timeline-name:--project-focus;view-timeline-axis:block}
    html:not([data-motion=reduced]) .work-grid>figure{
      animation:bg-project-image var(--duration-scene) linear both;
      animation-timeline:--project-focus;animation-range:entry 5% entry 95%;
    }
    html:not([data-motion=reduced]) .work-copy{
      animation:bg-project-story var(--duration-scene) linear both;
      animation-timeline:--project-focus;animation-range:entry 18% entry 100%;
    }
    html:not([data-motion=reduced]) .process-grid::after{
      animation:bg-process-line 1s linear both;
      animation-timeline:--process-reading;animation-range:entry 15% exit 0%;
    }
  }
}
@keyframes bg-project-image{from{transform:translateX(-24px) scale(.97);opacity:.9}to{transform:none;opacity:1}}
@keyframes bg-hero-departure{from{transform:none}to{transform:translateY(18px) scale(.97)}}
@keyframes bg-portrait-focus{from{filter:blur(2px);transform:scale(.985)}to{filter:blur(0);transform:none}}
@keyframes bg-project-story{from{transform:translateX(24px);opacity:.9}to{transform:none;opacity:1}}
@keyframes bg-process-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(hover:hover) and (pointer:fine){
  .desktop-nav>a:not(.button)::after{transition:transform var(--duration-feedback) var(--ease)}
  .desktop-nav>a:not(.button):hover::after{transform:scaleX(1)}
  .back-to-top:hover{background:var(--body)}
}
@media(hover:none),(pointer:coarse){.text-link:hover .icon{transform:none}}
@media(max-width:767px){
  .back-to-top{right:16px;bottom:16px;padding:12px;min-width:48px;justify-content:center}
  .back-to-top span{display:none}
  .process-grid{padding-top:0;padding-left:24px;gap:27px}
  .process-grid article{padding-top:0}
  .process-grid::before,.process-grid::after{top:4px;bottom:0;left:0;right:auto;width:2px;height:auto;transform-origin:top}
  .process-grid article::before{left:-26px;top:9px}
  @supports(animation-timeline:view()){
    @media(prefers-reduced-motion:no-preference){
      html:not([data-motion=reduced]) .work-grid>figure,html:not([data-motion=reduced]) .work-copy{
        animation-name:bg-project-mobile;animation-timeline:view();animation-range:entry 5% entry 85%;
      }
      html:not([data-motion=reduced]) .process-grid::after{animation-name:bg-process-line-mobile}
    }
  }
}
@keyframes bg-project-mobile{from{transform:translateY(12px);opacity:.9}to{transform:none;opacity:1}}
@keyframes bg-process-line-mobile{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html[data-input=keyboard],html[data-motion=reduced]{scroll-behavior:auto}
html[data-input=keyboard] button,html[data-input=keyboard] .button{transition:none}
html[data-input=keyboard] button:active,html[data-input=keyboard] .button:active,html[data-motion=reduced] button.is-pressed,html[data-motion=reduced] .button.is-pressed{transform:none}
html[data-motion=reduced] button.is-pressed{filter:brightness(.96)}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{animation:none!important;transition:none!important}
html[data-motion=reduced] .text-link:hover .icon,html[data-motion=reduced] .button:active{transform:none}
@media(prefers-reduced-motion:reduce){.work-grid>figure,.work-copy,.process-grid::after,.hero-photo,.founder figure>img{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}button.is-pressed,.button.is-pressed{transform:none}}