/* Shared components */
.site-header {
  position:absolute;
  top:0;
  inset-inline:0;
  z-index:20;
  height:100px;
  color:var(--black)
}
.nav-wrap {
  height:100%;
  display:flex;
  align-items:center;
  gap:24px
}
.brand {
  width:62px;
  flex:none
}
.brand img {
  width:100%
}
.nav-identity {
  font-size:11px;
  line-height:1.6
}
.nav-identity span {
  display:block;
  color:#51544a
}
.site-header nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:34px;
  font:12px var(--font-detail)
}
.site-header nav>a {
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px
}
.nav-dot {
  height:5px;
  width:5px;
  border-radius:50%;
  background:currentColor;
  opacity:0
}
.site-header a[aria-current="page"] .nav-dot {
  opacity:1
}
.site-header nav>a:hover {
  text-decoration:underline;
  text-underline-offset:6px
}
.site-footer {
  background:var(--yellow);
  color:var(--black);
  padding-top:48px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  font-size:11px
}
.contact-title {
  display:block;
  position:relative;
  font:400 clamp(3.8rem,9.4vw,8.4rem)/1.04 var(--font-display);
  letter-spacing:-.025em;
  margin:60px 0 48px
}
.contact-title>span:not(.arrow) {
  color:transparent;
  -webkit-text-stroke:1.5px var(--black)
}
.contact-title>.arrow {
  position:absolute;
  right:0;
  top:0;
  font-family:var(--font-reading);
  font-size:.85em
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #acb83c;
  padding:28px 0 48px
}
.email-row {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px
}
.email-copy {
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  min-height:44px;
  font:inherit;
  font-size:clamp(1rem,2vw,1.5rem);
  letter-spacing:-.025em;
  cursor:pointer
}
.email-copy:hover .email-address {
  text-decoration:underline;
  text-underline-offset:5px
}
.email-copy svg { flex-shrink:0; }
.copy-status { font-size:11px; }

.footer-colophon {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #acb83c;
  padding:20px 0;
  font-size:10px
}
/* Home / editorial opening */
.hero {
  background:var(--yellow);
  color:var(--black);
  padding-top:130px;
  overflow:hidden
}
.hero-topline {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #acb83c;
  padding-top:16px;
  font-size:10px
}
.hero-composition {
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  grid-template-rows:auto auto;
  margin-top:40px;
  padding-bottom:42px
}
.hero-copy {
  z-index:2;
  pointer-events:none
}
.hero h1 {
  font-size:var(--display-xl);
  line-height:.99;
  letter-spacing:-.035em
}
.outline-word {
  color:transparent;
  -webkit-text-stroke:2px var(--black)
}
.portrait-stage {
  position:relative;
  grid-column:2;
  grid-row:1/3;
  margin:8px 0 0 0;
  align-self:start;
  aspect-ratio:.93;
  background:#c8cead;
  overflow:hidden;
  transform:rotate(2deg)
}
.portrait-stage>img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  transition:filter 650ms ease
}
.portrait-caption {
  position:absolute;
  bottom:20px;
  left:20px;
  background:var(--yellow);
  padding:8px 11px;
  font-size:9px
}
.hero-intro {
  max-width:390px;
  padding-top:32px
}
.hero-intro p {
  font-size:18px;
  line-height:1.5;
  max-width:32ch;
  margin-bottom:24px
}
.hero-baseline {
  display:flex;
  justify-content:space-between;
  padding:23px 0;
  border-top:1px solid #acb83c;
  font-size:11px
}
.pixel-field {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(6,1fr);
  pointer-events:none
}
.pixel-field i {
  background:var(--yellow);
  opacity:0
}
.hero.is-playing .pixel-field i {
  animation:pixel-resolve 1200ms var(--ease-out) both;
  animation-delay:calc(var(--i)*18ms)
}
@keyframes pixel-resolve {
  0% {
    opacity:1;
    transform:translate(var(--x),var(--y)) scale(.2)
  }
  35% {
    opacity:1;
    transform:translate(0,0) scale(1.01)
  }
  100% {
    opacity:0;
    transform:scale(1.01)
  }
}

/* Project collection */
.selected-work {
  background:var(--surface);
  color:var(--text);
  padding:100px 0
}
.section-heading {
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  margin-bottom:60px
}
.section-heading>.eyebrow {
  grid-column:1/-1
}
.section-heading h2 {
  font-size:var(--display-lg)
}
.section-heading>span {
  align-self:end;
  color:var(--text-secondary);
  font-size:11px
}
.work-feature {
  margin-bottom:110px
}
.work-image {
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--stage);
  aspect-ratio:1.85;
  border-radius:var(--radius-sm)
}
.work-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 900ms var(--ease-out)
}
.work-image:hover img {
  transform:scale(1.035)
}
.work-image--spechub {
  background: radial-gradient(ellipse at 85% 15%, #8580c9, transparent 65%), linear-gradient(135deg, #111e45, #454379);
}
.spechub-cover {
  position: absolute;
  inset: 0;
  transition: transform 900ms var(--ease-out);
}
.spechub-cover-screen {
  position: absolute;
  overflow: hidden;
  border: 1px solid #ffffff70;
  border-radius: clamp(4px, 1vw, 12px);
  background: #eff0f7;
  box-shadow: 0 25px 50px #050b284d;
}
.spechub-cover-screen--primary {
  width: 78%;
  left: 4%;
  top: 12%;
  transform: rotate(-6deg);
}
.spechub-cover-screen--secondary {
  width: 49%;
  right: -6%;
  bottom: -9%;
  transform: rotate(7deg);
}
.work-image--spechub .spechub-cover img {
  display: block;
  width: 100%;
  height: auto;
  transform: none;
}
.work-image--spechub:hover .spechub-cover {
  transform: scale(1.025);
}
@media (max-width: 700px) {
  .spechub-cover-screen--primary { width: 85%; top: 13%; }
  .spechub-cover-screen--secondary { width: 65%; right: -8%; bottom: -2%; }
}
.image-action {
  position:absolute;
  right:22px;
  bottom:22px;
  background:var(--cream);
  color:var(--black);
  padding:14px 20px;
  border-radius:var(--radius-pill);
  font:11px var(--font-detail);
  display:flex;
  gap:24px
}
.work-caption {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  margin-top:30px
}
.work-caption .eyebrow {
  color:var(--text-secondary);
  font-size:10px;
  margin-bottom:16px
}
.work-caption h3 {
  font:400 clamp(2rem,4.2vw,3.8rem)/1.06 var(--font-display);
  letter-spacing:-.015em
}
.work-caption>div:last-child {
  padding-top:4px;
  max-width:390px;
  margin-left:auto
}
.project-name {
  display:block;
  color:var(--yellow);
  font-size:11px;
  margin-bottom:10px
}
.work-caption p {
  font-size:17px;
  color:var(--text-secondary);
  line-height:1.55
}
.work-caption .text-link {
  margin-top:17px;
  font-size:11px
}
.work-feature--1 {
  width:83%;
  margin-right:auto
}
.work-feature--2 {
  width:83%;
  margin-left:auto
}
.work-feature--1 .work-image,.work-feature--2 .work-image {
  aspect-ratio:1.55
}
.archive {
  margin-top:130px
}
.archive-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:30px
}
.archive-heading h2 {
  font-size:2.5rem
}
.archive-heading p {
  font-size:11px
}
.archive-row {
  display:grid;
  grid-template-columns:70px 1fr 230px 30px;
  align-items:center;
  gap:20px;
  padding:30px 0;
  border-top:1px solid var(--line);
  transition:color var(--duration-ui),padding var(--duration-ui)
}
.archive-row:last-child {
  border-bottom:1px solid var(--line)
}
.archive-row h3 {
  font-size:clamp(1.5rem,3vw,2.4rem);
  letter-spacing:-.035em
}
.archive-row:hover {
  color:var(--yellow);
  padding-inline:12px
}
.archive-row>.arrow {
  font-size:28px
}
.perspective h2 {
  font-size:var(--display-md);
  margin-top:28px
}
.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:70px
}
.principles article {
  border-top:1px solid var(--line);
  padding-top:20px
}
.principles .detail {
  font-size:10px;
  color:var(--text-secondary)
}
.principles h3 {
  font-size:1.5rem;
  letter-spacing:-.025em;
  margin:35px 0 14px
}
.principles p {
  font-size:16px;
  color:var(--text-secondary)
}
.about-teaser {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-top:80px;
  padding-top:40px;
  border-top:1px solid var(--line)
}
.about-teaser p {
  font-size:clamp(1.2rem,2.5vw,1.9rem);
  line-height:1.4;
  letter-spacing:-.025em
}
/* About */
.about-page {
  padding-top:160px;
  padding-bottom:110px
}
.about-intro {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:70px;
  margin-top:35px
}
.about-intro h1 {
  font-size:clamp(3.6rem,7.8vw,7.2rem)
}
.about-intro figure {
  align-self:start;
  transform:rotate(2deg);
  margin-top:20px
}
.about-intro img {
  aspect-ratio:.85;
  width:100%;
  object-fit:cover;
  filter:grayscale(1)
}
.about-intro figcaption {
  margin-top:15px
}
.about-lead {
  font-size:var(--text-lead);
  line-height:1.4;
  margin-top:35px
}
.about-story {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  padding:100px 0;
  margin-top:80px;
  border-top:1px solid var(--line)
}
.about-story h2,.clients h2 {
  font-size:var(--display-md)
}
.about-story .text-link {
  margin-top:25px
}
.clients {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  border-top:1px solid var(--line);
  padding-top:60px
}
.clients h2 {
  margin-top:24px
}
.clients dl {
  margin:0
}
.clients dl>div {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:20px 0
}
.clients dt {
  font-size:1.7rem
}
.clients dd {
  margin:0;
  color:var(--text-secondary)
}
/* Case-study layouts */
.case-hero {
  padding-top:140px
}
.case-back {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  font-size:11px
}
.case-headline {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:80px;
  align-items:end;
  margin:32px 0 48px
}
.case-headline h1 {
  font-size:var(--display-lg);
  margin-top:16px
}
.case-headline h1>span {
  display:block;
  font:400 clamp(1.6rem,3vw,2.7rem)/1.15 var(--font-reading);
  letter-spacing:-.045em;
  margin-top:20px;
  max-width:22ch
}
.case-headline>p {
  font-size:18px;
  color:var(--text-secondary);
  max-width:35ch;
  justify-self:end
}
.case-hero-stage {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4%;
  height:570px;
  background:var(--stage);
  padding:45px 8% 60px;
  overflow:hidden;
  border-radius:var(--radius-sm)
}
.case-hero-stage img {
  object-fit:contain;
  max-height:100%;
  min-width:0;
  max-width:85%;
  filter:drop-shadow(0 25px 25px #00000015)
}
.case-hero-stage img:not(:only-of-type) {
  max-width:40%
}
.case-hero-stage>.eyebrow {
  position:absolute;
  left:24px;
  bottom:20px;
  font-size:9px
}
.case-summary {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:100px;
  padding:55px 0 35px
}
.summary-lead {
  font-size:var(--text-lead);
  line-height:1.4;
  letter-spacing:-.025em;
  margin-top:18px
}
.case-summary dl {
  margin:0;
  display:grid;
  gap:24px;
  align-content:start
}
.case-summary dt {
  font:10px var(--font-detail);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-secondary);
  margin-bottom:10px
}
.case-summary dd {
  margin:0;
  font-size:16px
}
.evidence-strip {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:32px;
  padding:32px 0;
  border-block:1px solid var(--line)
}
.evidence-strip .eyebrow {
  font-size:9px
}
.evidence-strip strong {
  display:block;
  font:400 3.5rem var(--font-display);
  margin-top:10px
}
.evidence-strip strong span {
  display:block;
  font:16px var(--font-reading)
}
.evidence-strip>p {
  font-size:11px;
  color:var(--text-secondary);
  align-self:center
}
.case-actions {
  display:flex;
  gap:14px;
  padding:32px 0 75px
}
.case-layout {
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:70px;
  padding-bottom:100px
}
.chapter-nav {
  position:sticky;
  top:40px;
  align-self:start;
  padding-top:8px
}
.chapter-nav>.eyebrow {
  font-size:10px;
  color:var(--text-secondary)
}
.chapter-nav nav {
  display:grid;
  margin-top:22px
}
.chapter-nav nav a {
  font:12px var(--font-detail);
  padding:14px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:16px
}
.chapter-nav nav a>span {
  font-size:10px;
  color:var(--text-secondary)
}
.chapter-nav nav a[aria-current="location"] {
  font-weight:bold;
  background:var(--yellow);
  padding-inline:8px
}
.chapter-contact {
  display:inline-flex;
  margin-top:32px;
  font-size:11px;
  min-height:44px;
  align-items:center;
  gap:20px
}
.case-context {
  font-size:20px;
  padding-bottom:65px
}
.chapter-heading {
  background:var(--black);
  color:var(--cream);
  padding:36px 40px;
  margin-bottom:30px
}
.chapter-heading>.eyebrow {
  color:var(--yellow);
  font-size:10px
}
.chapter-heading h2 {
  font:400 clamp(2rem,4vw,3.4rem)/1.08 var(--font-display);
  margin-top:22px
}
.chapter {
  scroll-margin-top:30px;
  margin-bottom:80px
}
.case-section {
  padding:36px 0 48px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:32px
}
.section-label .eyebrow {
  font-size:9px;
  color:var(--text-secondary);
  margin-bottom:18px
}
.section-label h2 {
  font:400 1.8rem/1.15 var(--font-reading);
  letter-spacing:-.04em;
  overflow-wrap:anywhere
}
.section-body {
  font-size:17px
}
.case-media {
  grid-column:1/-1;
  overflow:hidden;
  margin-top:12px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-sm)
}
.case-media img {
  width:100%;
  height:auto
}
.case-media>a {
  display:block;
}
.case-media figcaption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 18px;
  background:var(--cream);
  color:var(--text-secondary);
  font:10px/1.5 var(--font-detail)
}
.video-media {
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#e8e9df
}
.video-media video {
  display:block;
  max-width:100%;
  max-height:660px;
  min-height:250px
}
.video-media figcaption {
  align-self:stretch
}
.demo-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding-top:20px
}
.demo-tabs button {
  border:1px solid var(--line);
  border-radius:100px;
  background:transparent;
  padding:13px 20px;
  font:12px var(--font-detail);
  min-height:44px
}
.demo-tabs button[aria-selected="true"] {
  background:var(--black);
  color:var(--cream);
  border-color:var(--black)
}
.demo-panel {
  animation:panel-in 240ms var(--ease-out)
}
@keyframes panel-in {
  from {
    opacity:.4;
    transform:translateY(5px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.next-project {
  display:grid;
  grid-template-columns:1fr auto;
  border-top:1px solid var(--line);
  padding-top:35px;
  gap:22px
}
.next-project>.eyebrow {
  grid-column:1/-1;
  color:var(--text-secondary)
}
.next-project strong {
  font:400 var(--display-md)/1.1 var(--font-display)
}
.next-project>.arrow {
  font-size:60px;
  line-height:1
}
.not-found {
  padding-block:18vh;
  min-height:100vh
}
.not-found h1 {
  font-size:var(--display-lg);
  margin:30px 0
}
.not-found .button {
  margin-top:30px
}
@media(min-width:1500px) {
  .hero-composition {
    grid-template-columns:1.2fr 1fr
  }
  .portrait-stage {
    max-height:650px
  }
}
@media(max-width:1000px) {
  .hero h1 {
    font-size:12.5vw
  }
  .hero-intro {
    max-width:90%
  }
  .work-caption {
    grid-template-columns:1.1fr 1fr;
    gap:25px
  }
  .work-feature--1,.work-feature--2 {
    width:92%
  }
  .case-layout {
    gap:32px;
    grid-template-columns:145px minmax(0,1fr)
  }
  .case-summary {
    gap:40px
  }
  .case-headline {
    gap:40px
  }
  .case-section {
    grid-template-columns:1fr
  }
  .case-hero-stage {
    height:470px
  }
  .about-intro {
    gap:35px
  }
  .about-story,.clients {
    gap:40px
  }
  .archive-row {
    grid-template-columns:40px 1fr 180px 30px
  }
}
@media(max-width:700px) {
  .site-header {
    height:85px
  }
  .nav-wrap {
    gap:12px
  }
  .brand {
    width:48px
  }
  .nav-identity {
    display:none
  }
  .site-header nav {
    gap:20px;
    font-size:10px
  }
  .hero {
    padding-top:106px
  }
  .hero-topline {
    font-size:8px
  }
  .hero-topline>span:last-child {
    display:none
  }
  .hero-composition {
    display:flex;
    flex-direction:column;
    margin-top:27px;
    padding-bottom:25px
  }
  .hero h1 {
    font-size:clamp(4.7rem,19.8vw,8.7rem);
    line-height:1
  }
  .hero-copy {
    order:0
  }
  .hero-intro {
    order:1;
    max-width:100%;
    padding-top:25px
  }
  .hero-intro p {
    font-size:16px;
    max-width:33ch;
    margin-bottom:20px
  }
  .hero-intro .button {
    font-size:11px;
    min-height:47px
  }
  .portrait-stage {
    order:2;
    align-self:stretch;
    width:78%;
    margin:35px 0 14px auto;
    aspect-ratio:1.08;
    transform:rotate(2deg)
  }
  .hero-baseline {
    font-size:9px;
    gap:20px
  }
  .hero-baseline>span {
    max-width:22ch
  }
  .hero-baseline>a {
    align-self:center;
    white-space:nowrap
  }
  .selected-work {
    padding:65px 0
  }
  .section-heading {
    margin-bottom:35px
  }
  .section-heading h2 {
    font-size:clamp(2.8rem,10vw,4.6rem)
  }
  .section-heading>span {
    font-size:9px
  }
  .work-feature,.work-feature--1,.work-feature--2 {
    width:100%;
    margin-bottom:65px
  }
  .work-image,.work-feature--1 .work-image,.work-feature--2 .work-image {
    aspect-ratio:1.15
  }
  .image-action {
    right:12px;
    bottom:12px;
    padding:12px 14px;
    gap:16px;
    font-size:9px
  }
  .work-caption {
    grid-template-columns:1fr;
    gap:22px;
    margin-top:24px
  }
  .work-caption h3 {
    font-size:2.6rem
  }
  .work-caption>div:last-child {
    margin:0;
    max-width:100%
  }
  .work-caption p {
    font-size:16px
  }
  .archive {
    margin-top:70px
  }
  .archive-heading {
    display:block
  }
  .archive-heading h2 {
    font-size:2.1rem;
    margin-bottom:12px
  }
  .archive-row {
    grid-template-columns:25px 1fr 25px;
    gap:15px;
    padding-block:23px
  }
  .archive-row>.muted:nth-last-child(2) {
    display:none
  }
  .archive-row h3 {
    font-size:1.4rem
  }
  .section-space {
    padding-block:65px
  }
  .perspective h2 {
    font-size:clamp(2rem,8.8vw,3.8rem)
  }
  .principles {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:40px
  }
  .principles h3 {
    margin-top:20px
  }
  .principles p {
    max-width:38ch
  }
  .about-teaser {
    display:block;
    margin-top:45px;
    padding-top:30px
  }
  .about-teaser .text-link {
    margin-top:25px
  }
  .footer-top {
    font-size:8px;
    gap:20px
  }
  .footer-top>span:first-child {
    max-width:25ch
  }
  .contact-title {
    font-size:clamp(2.65rem,10.5vw,4.6rem);
    margin-block:40px
  }
  .contact-title>.arrow {
    font-size:.7em
  }
  .footer-bottom {
    align-items:start;
    gap:20px;
    padding-block:24px;
    flex-direction:column
  }
  .email-row {
    gap:12px
  }
  .footer-colophon {
    font-size:8px;
    gap:15px;
    flex-wrap:wrap
  }
  .footer-colophon>span:nth-child(2) {
    display:none
  }
  .about-page {
    padding-top:120px;
    padding-bottom:60px
  }
  .about-intro {
    display:flex;
    flex-direction:column;
    margin-top:25px
  }
  .about-intro h1 {
    font-size:14.5vw
  }
  .about-intro figure {
    width:85%;
    margin-left:auto
  }
  .about-intro img {
    aspect-ratio:1
  }
  .about-lead {
    font-size:1.4rem;
    margin-top:25px
  }
  .about-story,.clients {
    grid-template-columns:1fr;
    gap:30px;
    padding-block:45px;
    margin-top:40px
  }
  .about-story h2,.clients h2 {
    font-size:2.8rem
  }
  .clients {
    margin-top:0;
    padding-bottom:0
  }
  .clients dt {
    font-size:1.4rem
  }
  .case-hero {
    padding-top:105px
  }
  .case-headline {
    grid-template-columns:1fr;
    gap:25px;
    margin:20px 0 30px
  }
  .case-headline h1 {
    font-size:clamp(2.8rem,12vw,5rem);
    overflow-wrap:anywhere
  }
  .case-headline .eyebrow {
    font-size:9px
  }
  .case-headline h1>span {
    font-size:1.8rem
  }
  .case-headline>p {
    font-size:16px;
    justify-self:start;
    max-width:40ch
  }
  .case-hero-stage {
    height:320px;
    padding:25px 5% 45px
  }
  .case-hero-stage img {
    max-width:100%
  }
  .case-hero-stage>.eyebrow {
    font-size:7px;
    left:12px;
    bottom:12px;
    max-width:90%
  }
  .case-summary {
    grid-template-columns:1fr;
    gap:30px;
    padding:35px 0
  }
  .summary-lead {
    font-size:1.4rem
  }
  .case-summary dl {
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .case-summary dd {
    font-size:14px
  }
  .evidence-strip {
    grid-template-columns:1fr 1fr;
    gap:22px
  }
  .evidence-strip strong {
    font-size:2.9rem
  }
  .evidence-strip strong span {
    font-size:14px
  }
  .evidence-strip>p {
    grid-column:1/-1
  }
  .case-actions {
    flex-wrap:wrap;
    padding-bottom:35px
  }
  .case-actions .button {
    font-size:10px;
    gap:12px;
    padding-inline:15px
  }
  .case-layout {
    display:block;
    padding-bottom:60px
  }
  .chapter-nav {
    position:static;
    padding:20px 0;
    border-top:1px solid var(--line);
    margin-bottom:30px
  }
  .chapter-nav nav {
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin-top:14px;
    padding:5px 3px 10px
  }
  .chapter-nav nav a {
    white-space:nowrap;
    border:1px solid var(--line);
    border-radius:100px;
    padding:12px;
    font-size:10px;
    gap:7px
  }
  .chapter-nav nav a[aria-current="location"] {
    padding-inline:12px
  }
  .chapter-contact {
    display:none
  }
  .case-context {
    font-size:18px;
    padding-bottom:40px
  }
  .chapter-heading {
    padding:26px
  }
  .chapter-heading h2 {
    font-size:2.15rem
  }
  .chapter {
    margin-bottom:45px
  }
  .case-section {
    padding:25px 0 35px;
    gap:24px
  }
  .section-label h2 {
    font-size:1.65rem
  }
  .section-body {
    font-size:16px
  }
  .case-media figcaption {
    padding:12px;
    font-size:9px
  }
  .next-project strong {
    font-size:2.6rem;
    overflow-wrap:anywhere
  }
  .next-project>.arrow {
    font-size:40px
  }
  .demo-tabs button {
    font-size:10px;
    padding:12px 15px
  }
}
/* A small, shared motion vocabulary connects the opening to the work. */
@media(min-width:701px) {
  .hero h1 {
    font-size:clamp(5rem,min(12.9vw,17vh),11.8rem)
  }
  .portrait-stage {
    max-height:68vh
  }
  .hero-copy {
    transform:translateY(var(--hero-type-y,0px))
  }
  .portrait-stage {
    transform:translateY(var(--hero-image-y,0px)) rotate(var(--hero-rotate,2deg))
  }
  .hero-baseline {
    position:relative
  }
  .hero-baseline::before {
    content:"";
    position:absolute;
    top:-2px;
    left:0;
    height:3px;
    width:calc(var(--hero-progress,0)*100%);
    background:var(--black)
  }
}
.decision-story {
  padding-block:35px 100px;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:80px
}
.decision-stage {
  position:sticky;
  top:100px;
  align-self:start;
  background:#dce1ea;
  aspect-ratio:1.22;
  overflow:hidden
}
.decision-stage img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  inset:0;
  opacity:0;
  transform:translateY(20px) scale(.98);
  transition:opacity 500ms var(--ease-out),transform 700ms var(--ease-out)
}
.decision-stage img.is-active {
  opacity:1;
  transform:none
}
.decision-counter {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:15px 20px;
  background:var(--black);
  color:var(--yellow);
  font-size:10px
}
.decision-steps {
  grid-column:1/-1
}
.decision-step {
  padding:35px 0;
  border-top:1px solid var(--line)
}
.decision-step>.eyebrow {
  font-size:10px;
  color:var(--text-secondary)
}
.decision-step h2 {
  font:400 clamp(2.4rem,4vw,3.7rem)/1.06 var(--font-display);
  margin:25px 0
}
.decision-step>p:not(.eyebrow) {
  max-width:35ch;
  color:var(--text-secondary);
  font-size:18px
}
.decision-step .text-link {
  margin-top:20px
}
.decision-fallback {
  margin-top:30px;
  width:100%
}
.decision-story.is-enhanced .decision-steps {
  grid-column:2
}
.decision-story.is-enhanced .decision-step {
  min-height:65vh;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.decision-story.is-enhanced .decision-step .text-link {
  align-self:start
}
.decision-story.is-enhanced .decision-fallback {
  display:none
}
@media(max-width:700px) {
  .decision-story {
    display:block;
    padding-block:10px 50px
  }
  .decision-step h2 {
    font-size:2.4rem
  }
  .decision-step>p:not(.eyebrow) {
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-copy,.portrait-stage {
    transform:none!important
  }
}
.site-header.is-scrolled {
  position:fixed;
  height:76px;
  background:rgba(245,244,238,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  animation:header-in 240ms var(--ease-out)
}
@keyframes header-in {
  from {
    transform:translateY(-100%)
  }
  to {
    transform:none
  }
}
/* Internal, shareable system specimen; not part of the portfolio navigation. */
.specimen { padding-block: 150px 100px; }
.specimen h1 { font-size: var(--display-lg); margin-block: 30px; }
.specimen-intro { max-width: 50ch; font-size: var(--text-lead); }
.specimen>section { margin-top: 70px; padding-top: 30px; border-top: 1px solid var(--line); }
.swatches { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 30px; }
.swatches>div>div { height: 130px; border: 1px solid #d3d4c9; margin-bottom: 14px; }
.swatches strong,.swatches span { display: block; }
.type-specimen { margin-top: 40px; }
.type-specimen>span { display: block; margin-bottom: 20px; }
.type-specimen h2 { font-size: var(--display-md); }
.type-specimen .prose { margin-top: 20px; }
.specimen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 25px; }
.spacing-specimen { display: grid; gap: 15px; margin-top: 30px; }
.spacing-specimen>div { display: flex; gap: 20px; align-items: center; }
.spacing-specimen span { width: 60px; }
.spacing-specimen i { display: block; height: 20px; background: var(--black); }
.specimen .specimen-dark { background: var(--surface); color: var(--text); padding: 35px; }
.specimen-dark h2 { font-size: var(--display-md); margin: 30px 0; }
.specimen-dark .button { margin-top: 25px; }
@media(max-width:700px) { .swatches { grid-template-columns: repeat(2,1fr); } }
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 350ms; animation-timing-function: var(--ease-out); }
@media(prefers-reduced-motion:reduce) { @view-transition { navigation: none; } }

.motion-toggle { font: inherit; color: inherit; border: 0; border-bottom: 1px solid currentColor; background: transparent; min-height: 44px; padding: 8px 0; }
.footer-colophon { align-items: center; }
[data-motion="reduce"] *,[data-motion="reduce"] *::before,[data-motion="reduce"] *::after { animation: none!important; transition: none!important; }
[data-motion="reduce"] .hero-copy,[data-motion="reduce"] .portrait-stage { transform: none!important; }
[data-motion="reduce"] .portrait-stage:hover>img { transform:none; }
html:has([data-motion="reduce"]) { scroll-behavior: auto; }
html:has([data-motion="reduce"])::view-transition-group(*),html:has([data-motion="reduce"])::view-transition-old(*),html:has([data-motion="reduce"])::view-transition-new(*) { animation-duration: 0s!important; }
/* Rich case-study blocks preserve the Spechub narrative and evidence. */
.case-hero-stage--wide { height: auto; padding: 0 0 40px; }
.case-hero-stage--wide img { max-width: 100%; width: 100%; filter: none; }
.case-hero-stage--desktop {
  padding: clamp(24px, 5vw, 60px) 6% 64px;
}
.desktop-mockup {
  width: 100%;
  max-width: 880px;
  filter: drop-shadow(0 18px 15px #25233b20);
}
.desktop-mockup-display {
  position: relative;
  padding: 2.4% 2.4% 0;
  border: 1px solid #c9c9cf;
  border-radius: clamp(10px, 2vw, 24px);
  background: linear-gradient(120deg, #fff, #eeedf0);
  overflow: hidden;
}
.desktop-mockup-display::before {
  content: '';
  position: absolute;
  top: 1.1%;
  left: 50%;
  width: .65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #26302c;
}
.desktop-mockup-display>img {
  display: block;
  max-width: 100%;
  border: 1px solid #252638;
  border-radius: 1px;
}
.desktop-mockup-chin {
  height: auto;
  aspect-ratio: 10;
  margin: 2.4% -2.55% 0;
  background: linear-gradient(115deg, #aca8d4, #9390bb);
  border-top: 1px solid #a9a6c8;
}
.desktop-mockup-stand {
  width: 24%;
  aspect-ratio: 1.7;
  margin-inline: auto;
  background: linear-gradient(#666583, #9996bd 85%, #c9c6e2);
}
.desktop-mockup-foot {
  width: 27%;
  height: clamp(4px, .7vw, 8px);
  margin: -1px auto 0;
  border-radius: 40% 40% 3px 3px;
  background: linear-gradient(#dedced, #9b98b8);
}
.case-section--rich { grid-template-columns: 1fr; }
.case-section--rich .section-body { max-width: none; }
.case-section--rich .section-body>p { max-width: var(--reading); }
.case-section--rich .case-media { margin-block: 32px; }
.case-section--rich figcaption { line-height: 1.7; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block: 35px; }
.comparison .case-media { margin-top: 12px; }
.journey { border-block: 1px solid var(--line); padding: 28px 0; margin-block: 35px; }
.journey ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.journey li+li { margin: 0; }
.journey strong { display: block; margin-block: 12px; color: var(--text); }
.journey li p { font-size: 14px; }
.related-work { display: block; border: 1px solid var(--line); padding: 28px; margin-top: 35px; }
.related-work strong { display: block; font-size: 24px; margin: 15px 0; }
@media(max-width:1000px) { .journey ol { grid-template-columns: 1fr 1fr; } }
@media(max-width:700px) { .comparison { grid-template-columns: 1fr; } }

.case-section--chapter { grid-template-columns: minmax(0, 1fr); }
.case-section--chapter>.section-label { display: none; }
.archive-summary {
  display: block;
  margin-top: 8px;
  font: 400 13px/1.5 var(--font-reading);
  letter-spacing: 0;
  color: var(--text-secondary);
}
.case-summary .fact-wide {
  grid-column: 1 / -1;
}
.fact-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
}
.fact-list li + li {
  margin-top: 5px;
}
.phone-animation>a {
  background: var(--white);
  display: flex;
  justify-content: center;
  padding: 24px;
}
.phone-animation img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(620px, 72svh);
  object-fit: contain;
}
.video-media--dark {
  --media-inset: clamp(var(--space-4), 3vw, var(--space-8));
  background: #000;
}
.video-media--dark video {
  margin-block: var(--media-inset);
  max-width: calc(100% - 2 * var(--media-inset));
  max-height: min(620px, calc(76svh - 2 * var(--media-inset)));
  min-height: 0;
  object-fit: contain;
  background: #000;
}
.video-media--dark figcaption {
  background: #10110f;
  color: #b6b8ae;
}

/* The whole photo follows the pointer; image content stays undistorted. */
.portrait-stage {
  transform:perspective(1100px) translateY(calc(var(--hero-image-y,0px) + var(--portrait-lift,0px))) rotate(var(--hero-rotate,2deg)) rotateX(var(--portrait-tilt-x,0deg)) rotateY(var(--portrait-tilt-y,0deg));
  box-shadow:0 0 0 rgba(20,25,10,0);
  transition:transform 650ms var(--ease-out),box-shadow 650ms var(--ease-out);
}
.portrait-stage.is-following {
  box-shadow:var(--portrait-shadow-x,0px) var(--portrait-shadow-y,18px) 38px -12px rgba(20,25,10,.28);
  transition-duration:180ms;
}
.portrait-stage.is-following>img { filter:grayscale(.15); }
[data-motion="reduce"] .portrait-stage { box-shadow:none; transition:none; }