/* Shared motion extends the original --ease token. No content is hidden by CSS. */
:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
}

.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted);margin-bottom:35px}
.breadcrumbs a{padding:5px 0;transition:color 200ms var(--ease),transform 200ms var(--ease);display:inline-block}
.breadcrumbs [aria-current]{color:var(--ink)}

.product-page{padding-top:40px;padding-bottom:65px}
.product-intro{padding:30px 0 60px;border-bottom:1px solid var(--border)}
.product-intro h1{font-size:clamp(42px,5.7vw,78px);letter-spacing:-3px;line-height:1.15;margin-top:30px}
.product-intro h1 em{letter-spacing:-3px}
.product-intro-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:32px}
.product-intro-bottom>p{max-width:470px;font-size:14px;line-height:1.9;color:var(--muted)}
.product-projects{padding-top:55px;scroll-margin-top:30px}
.product-projects .section-top{align-items:center;margin-bottom:30px}
.product-projects h2{font-size:30px}
.product-footnote{font-size:12px;line-height:1.8;color:var(--muted)}

/* Interactive elements and base transitions */
.wordmark{display:inline-block;transition:transform 260ms var(--ease-out-expo)}
.brand-dot{display:inline-block;transition:transform 350ms var(--ease-spring)}
.hello-star{display:inline-block;transition:transform 500ms var(--ease-spring)}

nav a{position:relative;display:inline-flex;align-items:center;transition:color 240ms var(--ease),transform 240ms var(--ease)}
nav a::after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:right center;transition:transform 280ms var(--ease-out-expo)}
nav span{display:inline-block;transition:color 240ms var(--ease),transform 240ms var(--ease-spring)}

.discipline-links a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border:1px solid transparent;transition:transform 260ms var(--ease-spring),background 240ms ease,border-color 240ms ease,color 240ms ease,box-shadow 260ms ease}
.discipline-links a>span{display:inline-block;transition:transform 260ms var(--ease-spring)}

.explore-link{transition:color 240ms var(--ease)}
.circle-arrow{transition:transform 320ms var(--ease-spring),background 240ms ease,color 240ms ease,box-shadow 320ms ease}

.tile-title>span,.work-status a span{display:inline-block;transition:transform 260ms var(--ease-spring),color 240ms ease}

.practice summary{transition:color 240ms ease}
.practice summary span:nth-child(2){display:inline-block;transition:transform 260ms var(--ease-out-expo)}
.details-icon{display:inline-block;transition:transform 350ms var(--ease-spring)}
.practice-tags span{display:inline-block;padding:2px 7px;border-radius:4px;transition:transform 220ms var(--ease-spring),background 200ms ease,color 200ms ease}
.practice-project-link{display:inline-block;color:var(--blue);font-size:12px;margin-top:15px;padding:8px 0;border-bottom:1px solid var(--border);transition:transform 260ms var(--ease-spring),color 200ms ease,border-color 200ms ease}

.prototype-link{display:inline-block;transition:transform 260ms var(--ease-spring),box-shadow 260ms ease,background 200ms ease}
.featured-cta{display:inline-block;transition:transform 260ms var(--ease-spring),border-color 200ms ease,color 200ms ease}
.back-link{display:inline-block;transition:transform 260ms var(--ease-spring),color 240ms ease}

.case-nav nav a{position:relative;display:inline-block;transition:color 240ms ease,transform 240ms var(--ease-out-expo)}

.portrait-block{transition:transform 360ms var(--ease-out-expo)}
.portrait-frame{transition:box-shadow 350ms var(--ease),transform 350ms var(--ease)}
.portrait-frame img{transition:transform 320ms var(--ease-out-expo),filter 280ms ease}
.graphic-type,.motion-rings,.about-symbol{transition:transform 350ms var(--ease-spring)}
.featured-loop-visual img{transition:transform 350ms var(--ease-out-expo)}

.footer-top a{display:inline-flex;align-items:center;transition:color 240ms ease}
.footer-top a span{display:inline-block;transition:transform 260ms var(--ease-spring)}
.footer-name{display:inline-block;transition:transform 400ms var(--ease-out-expo)}
.footer-name>span{display:inline-block;transition:transform 400ms var(--ease-spring)}

/* Desktop hover interactions */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html:not(.keyboard-navigation) .wordmark:hover{transform:translateX(2px)}
  html:not(.keyboard-navigation) .wordmark:hover .brand-dot{transform:scale(1.4) translateY(-1px)}

  html:not(.keyboard-navigation) nav a:hover{color:var(--blue);transform:translateY(-1px)}
  html:not(.keyboard-navigation) nav a:hover::after{transform:scaleX(1);transform-origin:left center}
  html:not(.keyboard-navigation) nav a:hover span{color:var(--blue);transform:translateY(-2px)}

  html:not(.keyboard-navigation) .intro:hover .hello-star,
  html:not(.keyboard-navigation) .hello-star:hover{transform:rotate(180deg) scale(1.3)}

  html:not(.keyboard-navigation) .discipline-links a:hover{background:rgba(0,0,0,0.04);border-color:var(--border);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.04);color:var(--accent)}
  html:not(.keyboard-navigation) .discipline-links a:hover>span{transform:scale(1.5)}

  html:not(.keyboard-navigation) .portrait-block:hover{transform:rotate(0deg) scale(1.015)}
  html:not(.keyboard-navigation) .portrait-frame:hover{box-shadow:0 22px 42px -12px rgba(23,23,23,0.18)}
  html:not(.keyboard-navigation) .portrait-frame:hover img{transform:scale(1.05);filter:saturate(1.1)}

  html:not(.keyboard-navigation) .explore-link:hover .circle-arrow{background:var(--ink);color:var(--paper);transform:translateY(5px) scale(1.06);box-shadow:0 8px 18px rgba(23,23,23,0.16)}

  html:not(.keyboard-navigation) .graphic-tile:hover .graphic-type{transform:translate(-50%,-50%) rotate(-6deg) scale(1.03)}
  html:not(.keyboard-navigation) .motion-tile:hover .motion-rings{transform:rotate(-15deg) scale(1.04)}
  html:not(.keyboard-navigation) .about-symbol:hover{transform:rotate(90deg) scale(1.15);color:#2446be}

  html:not(.keyboard-navigation) .tile-title>span,.work-status a:hover span{transform:translate(4px,-4px)}

  html:not(.keyboard-navigation) .practice summary:hover span:nth-child(2){transform:translateX(8px)}
  html:not(.keyboard-navigation) .practice summary:hover .details-icon{transform:rotate(90deg) scale(1.2)}
  html:not(.keyboard-navigation) .practice[open] summary:hover .details-icon{transform:rotate(135deg) scale(1.2)}
  html:not(.keyboard-navigation) .practice-tags span:hover{transform:translateY(-2px);background:#e2e1db;color:var(--ink)}
  html:not(.keyboard-navigation) .practice-project-link:hover{transform:translateX(5px);color:#1e3fa8;border-color:#1e3fa8}

  html:not(.keyboard-navigation) .featured-loop:hover .featured-loop-visual img:first-child{transform:translateY(22px) rotate(-4deg) scale(1.03)}
  html:not(.keyboard-navigation) .featured-loop:hover .featured-loop-visual img:last-child{transform:translateY(-20px) rotate(3deg) scale(1.03)}
  html:not(.keyboard-navigation) .featured-loop:hover .featured-cta{transform:translateX(6px);color:var(--blue);border-color:var(--blue)}

  html:not(.keyboard-navigation) .prototype-link:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 24px -4px rgba(53,92,222,0.45);background:#294db5}
  html:not(.keyboard-navigation) .back-link:hover{transform:translateX(-6px);color:var(--blue)}
  html:not(.keyboard-navigation) .case-nav nav a:hover{color:var(--blue);transform:translateX(6px)}
  html:not(.keyboard-navigation) .breadcrumbs a:hover{color:var(--blue);transform:translateX(2px)}

  html:not(.keyboard-navigation) .footer-top a:hover span{transform:translateY(-4px)}
  html:not(.keyboard-navigation) .footer-name:hover{transform:translateX(4px)}
  html:not(.keyboard-navigation) .footer-name:hover>span{transform:scale(1.35) translateY(-3px)}
}

@media(prefers-reduced-motion:no-preference){
  html:not(.keyboard-navigation) .prototype-link:active,
  html:not(.keyboard-navigation) .explore-link:active .circle-arrow,
  html:not(.keyboard-navigation) .discipline-links a:active{transform:scale(.97)}
}

.keyboard-navigation{scroll-behavior:auto}
.keyboard-navigation *{transition:none!important;animation:none!important}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .portrait-frame:hover img,.about-symbol:hover{transform:none!important}
  .product-tile:hover .product-object{transform:translate(-50%,-50%) rotate(-12deg)}
  .discipline-tile:hover .tile-title>span,.explore-link:hover .circle-arrow{transform:none}
}

@media(max-width:760px){
  .product-page{padding-top:25px}
  .product-intro{padding-top:15px;padding-bottom:35px}
  .product-intro h1,.product-intro h1 em{font-size:clamp(34px,7.8vw,56px);letter-spacing:-1.6px}
  .product-intro-bottom{display:block;margin-top:25px}
  .product-intro-bottom>p{font-size:13px}
  .product-intro-bottom .explore-link{margin-top:24px;justify-content:space-between}
  .product-projects{padding-top:35px}
  .product-projects h2{font-size:25px}
  .product-projects .eyebrow{font-size:8px}
  .breadcrumbs{font-size:10px;gap:9px;margin-bottom:25px}
  .case-title h1{font-size:clamp(78px,25vw,100px)}
}