:root {
  --paper:#f1eee7;
  --ink:#121210;
  --muted:#6f6c65;
  --line:rgba(18,18,16,.18);
  --accent:#ff593d;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --arabic:"IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
.skip-link {
  position:fixed;
  left:1rem;
  top:-5rem;
  z-index:100;
  background:#fff;
  padding:.8rem 1rem;
  border:1px solid #000
}
.skip-link:focus {
  top:1rem
}
.noise {
  position:fixed;
  inset:0;
  z-index:99;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}
.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 2.2vw;
  border-bottom:1px solid transparent;
  transition:.35s ease
}
.site-header.scrolled {
  background:rgba(241,238,231,.88);
  backdrop-filter:blur(18px);
  border-color:var(--line)
}
.wordmark {
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:-.06em;
  width:max-content
}
.site-header nav {
  display:flex;
  gap:2rem;
  font-size:.8rem
}
.site-header nav a,.availability {
  position:relative
}
.site-header nav a:after,.availability:after {
  content:"";
  position:absolute;
  height:1px;
  background:currentColor;
  left:0;
  right:100%;
  bottom:-5px;
  transition:.3s
}
.site-header nav a:hover:after,.availability:hover:after {
  right:0
}
.availability {
  justify-self:end;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  display:flex;
  align-items:center;
  gap:.55rem
}
.availability span {
  width:7px;
  height:7px;
  background:#15b96c;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(21,185,108,.12)
}
.nav-toggle {
  display:none;
  background:transparent;
  border:0;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer
}
.nav-toggle span {
  display:block;
  width:20px;
  height:1px;
  background:var(--ink);
  transition:transform .25s ease
}
.site-header.nav-open .nav-toggle span:first-child {
  transform:translateY(3px) rotate(45deg)
}
.site-header.nav-open .nav-toggle span:last-child {
  transform:translateY(-3px) rotate(-45deg)
}
.nav-contact {
  display:inline-block
}
.hero {
  min-height:100svh;
  padding:130px 2.2vw 36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.hero-kicker {
  display:flex;
  justify-content:flex-start;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.07em
}
.hero-kicker p {
  margin:0
}
.hero-title {
  margin:6vh 0 0;
  font-size:clamp(5.4rem,14.2vw,15rem);
  line-height:.77;
  letter-spacing:-.095em;
  font-weight:600
}
.hero-row {
  display:flex;
  align-items:flex-end;
  justify-content:flex-start
}
.hero-row--last {
  align-items:center
}
.arabic {
  font-family:var(--arabic)
}
.hero-title .arabic {
  font-size:clamp(.72rem,1.25vw,1.15rem);
  letter-spacing:0;
  font-weight:500;
  line-height:1.65;
  max-width:190px;
  margin-right:1.8vw
}
.hero-bottom {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:2rem
}
.hero-statement {
  font-size:clamp(1rem,1.7vw,1.65rem);
  line-height:1.32;
  letter-spacing:-.025em;
  max-width:680px;
  margin:0
}
.circle-link {
  width:54px;
  height:54px;
  border:1px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:.3s
}
.circle-link:hover {
  background:var(--ink);
  color:var(--paper);
  transform:translateY(4px)
}
.circle-link svg {
  width:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
.ticker {
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:14px 0;
  background:var(--ink);
  color:var(--paper)
}
.ticker-track {
  display:flex;
  gap:1.6rem;
  width:max-content;
  align-items:center;
  animation:ticker 26s linear infinite;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.ticker-track span {
  white-space:nowrap
}
.ticker-track i {
  font-style:normal;
  color:var(--accent)
}
@keyframes ticker {
  to {
    transform:translateX(-50%)
  }
}
.section-pad {
  padding:11rem 2.2vw
}
.section-head {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:3rem;
  margin-bottom:6rem
}
.eyebrow {
  display:block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:1.6rem;
  color:var(--muted)
}
.section-head h2 {
  font-size:clamp(2.6rem,5.6vw,6.2rem);
  line-height:.91;
  letter-spacing:-.065em;
  font-weight:500;
  margin:0
}
.filters {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end
}
.filter {
  border:1px solid var(--line);
  background:transparent;
  padding:.65rem .9rem;
  border-radius:999px;
  cursor:pointer;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:.25s
}
.filter:hover,.filter.is-active {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}
.project-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8rem 2.2vw
}
.project:nth-child(3n+1) {
  grid-column:1/-1
}
.project.is-hidden {
  display:none
}
.project a {
  display:block
}
.project-meta {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--ink);
  padding:.7rem 0 1.2rem;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.07em
}
.project-stage {
  height:min(62vw,720px);
  position:relative;
  overflow:hidden;
  --mx:0px;
  --my:0px;
  --stage-scale:1;
  transform:translate3d(var(--mx),var(--my),0) scale(var(--stage-scale));
  transition:transform .6s cubic-bezier(.2,.8,.2,1)
}
.project:not(:nth-child(3n+1)) .project-stage {
  height:min(46vw,600px)
}
.project a:hover .project-stage {
  --stage-scale:.992
}
.project-title {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:2rem;
  align-items:start;
  padding-top:1.1rem
}
.project-title h3 {
  margin:0;
  font-size:clamp(1.8rem,3vw,3.5rem);
  letter-spacing:-.055em;
  font-weight:500
}
.project-title p {
  margin:.45rem 0 0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
  max-width:320px
}
.arrow {
  font-size:1.5rem;
  transition:.25s
}
.project a:hover .arrow {
  transform:translate(5px,-5px)
}
.section-head--practice {
  align-items:start
}
.section-head--practice>p {
  max-width:520px;
  font-size:1rem;
  line-height:1.65;
  margin:3.1rem 0 0;
  color:var(--muted)
}
.practice {
  border-top:1px solid var(--line)
}
.practice-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  border-top:1px solid var(--ink)
}
.practice-number {
  padding:4rem 3rem 4rem 0;
  border-right:1px solid var(--ink)
}
.practice-number strong {
  display:block;
  font-size:clamp(6rem,13vw,13rem);
  line-height:.8;
  letter-spacing:-.1em;
  font-weight:500
}
.practice-number span {
  display:block;
  margin-top:3rem;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.practice-services {
  padding-left:3rem
}
.practice-services>div {
  display:grid;
  grid-template-columns:55px 1fr 1.2fr;
  gap:1rem;
  padding:2rem 0;
  border-bottom:1px solid var(--line);
  align-items:start
}
.practice-services span {
  font-size:.65rem;
  color:var(--muted)
}
.practice-services h3 {
  margin:0;
  font-size:1.25rem;
  font-weight:500;
  letter-spacing:-.03em
}
.practice-services p {
  margin:0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.55
}
.about {
  background:#191916;
  color:#f1eee7
}
.about .eyebrow {
  color:#9e9b92
}
.about-copy {
  font-size:clamp(2.4rem,5vw,5.5rem);
  line-height:.98;
  letter-spacing:-.06em;
  max-width:1400px
}
.about-copy p {
  margin:0 0 2.5rem
}
.about-arabic {
  font-size:clamp(1.7rem,3.3vw,3.8rem);
  line-height:1.35;
  letter-spacing:0;
  max-width:900px;
  margin-left:auto;
  color:#c9c6bc
}
.about-foot {
  margin-top:8rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.24);
  display:flex;
  justify-content:space-between;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#aaa69c
}
.consulting-panel {
  display:grid;
  grid-template-columns:.65fr 1.45fr auto;
  gap:2rem;
  align-items:start;
  margin-top:4rem;
  padding:2.2rem 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink)
}
.consulting-label {
  display:flex;
  gap:1rem;
  text-transform:uppercase;
  font-size:.68rem;
  letter-spacing:.08em
}
.consulting-label span:first-child {
  color:var(--muted)
}
.consulting-copy h3 {
  margin:0 0 .7rem;
  font-size:clamp(1.5rem,2.5vw,2.6rem);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:500;
  max-width:680px
}
.consulting-copy p {
  margin:0;
  max-width:720px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.65
}
.consulting-link {
  align-self:end;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid currentColor;
  padding-bottom:.2rem;
  white-space:nowrap
}
.contact-actions {
  border-top:1px solid var(--ink)
}
.contact-actions .contact-line {
  border-top:0
}
.contact-line--consulting strong {
  font-size:clamp(2rem,5vw,6rem)
}
.contact {
  padding-bottom:2.5rem
}
.contact-line {
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:2rem;
  padding:2.6rem 0;
  transition:.35s
}
.contact-line:hover {
  padding-left:1rem;
  padding-right:1rem;
  background:var(--ink);
  color:var(--paper)
}
.contact-line span {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.contact-line strong {
  font-size:clamp(2.5rem,7vw,8rem);
  letter-spacing:-.07em;
  font-weight:500
}
.contact-line i {
  font-style:normal;
  font-size:2rem
}
.footer-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:4rem;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.07em
}
.footer-row div {
  display:flex;
  gap:2rem
}
[data-reveal] {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)
}
[data-reveal].visible {
  opacity:1;
  transform:none
}
@media (max-width:900px) {
  .consulting-panel {
    grid-template-columns:1fr;
    gap:1.4rem
  }
  .consulting-link {
    justify-self:start;
    align-self:start
  }
  .contact-line--consulting strong {
    font-size:clamp(2.2rem,10vw,5rem)
  }
  .site-header {
    padding:0 18px
  }
  .site-header {
    display:flex;
    justify-content:space-between
  }
  .site-header nav {
    position:fixed;
    left:18px;
    right:18px;
    top:76px;
    display:flex;
    flex-direction:column;
    gap:0;
    background:rgba(241,238,231,.98);
    border:1px solid var(--line);
    padding:.5rem;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s
  }
  .site-header nav a {
    padding:1rem .8rem;
    border-bottom:1px solid var(--line);
    font-size:.9rem
  }
  .site-header nav a:last-child {
    border-bottom:0
  }
  .site-header nav .nav-contact {
    display:block
  }
  .site-header.nav-open nav {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none
  }
  .nav-toggle {
    display:inline-flex
  }
  .availability {
    font-size:0
  }
  .availability span {
    margin-right:0
  }
  .hero {
    padding:110px 18px 30px;
    min-height:92svh
  }
  .hero-kicker {
    font-size:.62rem
  }
  .hero-title {
    font-size:clamp(4.6rem,20vw,9rem);
    margin-top:auto;
    margin-bottom:auto
  }
  .hero-row {
    align-items:center
  }
  .hero-title .arabic {
    display:none
  }
  .section-pad {
    padding:7rem 18px
  }
  .section-head {
    grid-template-columns:1fr;
    gap:2rem;
    margin-bottom:4rem
  }
  .filters {
    justify-content:flex-start
  }
  .project-list {
    grid-template-columns:1fr;
    gap:5rem
  }
  .project:nth-child(3n+1) {
    grid-column:auto
  }
  .project .project-stage,.project:not(:nth-child(3n+1)) .project-stage {
    height:76vw;
    min-height:340px
  }
  .project-title {
    grid-template-columns:1fr auto
  }
  .project-title p {
    grid-column:1/-1
  }
  .project-title .arrow {
    grid-column:2;
    grid-row:1
  }
  .practice-grid {
    grid-template-columns:1fr
  }
  .practice-number {
    border-right:0;
    border-bottom:1px solid var(--ink);
    padding-right:0
  }
  .practice-services {
    padding-left:0
  }
  .practice-services>div {
    grid-template-columns:40px 1fr
  }
  .practice-services p {
    grid-column:2
  }
  .about-foot {
    gap:1rem;
    flex-direction:column
  }
  .contact-line {
    grid-template-columns:1fr auto
  }
  .contact-line span {
    grid-column:1/-1
  }
  .footer-row {
    align-items:flex-start;
    gap:2rem
  }
  .footer-row div {
    flex-direction:column;
    gap:.6rem;
    align-items:flex-end
  }
  .cover-view {
    opacity:1;
    transform:none
  }
  .hero-kicker {
    display:block
  }
}
@media (max-width:560px) {
  .hero-title {
    font-size:21vw
  }
  .hero-statement {
    font-size:1rem
  }
  .circle-link {
    width:46px;
    height:46px
  }
  .project-stage {
    min-height:300px
  }
  .project-meta span:last-child {
    max-width:65%;
    text-align:right
  }
  .practice-services>div {
    grid-template-columns:30px 1fr
  }
  .contact-line strong {
    font-size:13vw
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .ticker-track {
    animation:none
  }
  .project-stage,.arrow,.circle-link,[data-reveal] {
    transition:none
  }
  [data-reveal] {
    opacity:1;
    transform:none
  }
}
.project-stage--cover {
  background:#ddd;
  display:block;
  padding:0
}
.project-stage--cover img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .35s ease
}
.project a:hover .project-stage--cover img {
  transform:scale(1.025)
}
.cover-view {
  position:absolute;
  right:1.2rem;
  bottom:1.2rem;
  background:rgba(245,242,234,.94);
  color:#171714;
  border:1px solid rgba(23,23,20,.18);
  border-radius:999px;
  padding:.62rem .85rem;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:0;
  transform:translateY(8px);
  transition:.3s ease
}
.project a:hover .cover-view {
  opacity:1;
  transform:none
}
.case-page {
  background:var(--paper);
  color:var(--ink)
}
.case-header .case-back {
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.case-hero {
  padding-top:10rem
}
.case-eyebrow,.case-label {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted)
}
.case-hero h1 {
  font-size:clamp(4rem,9vw,10rem);
  line-height:.86;
  letter-spacing:-.075em;
  font-weight:500;
  margin:5rem 0 4rem;
  max-width:1500px
}
.case-intro {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:8vw;
  align-items:start;
  border-top:1px solid var(--ink);
  padding-top:2rem;
  margin-bottom:5rem
}
.case-intro>p {
  font-size:clamp(1.25rem,2vw,2.15rem);
  line-height:1.35;
  letter-spacing:-.03em;
  max-width:850px;
  margin:0
}
.case-intro dl {
  margin:0
}
.case-intro dl div {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--line)
}
.case-intro dt {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted)
}
.case-intro dd {
  margin:0;
  font-size:.85rem
}
.case-cover {
  display:block;
  position:relative;
  overflow:hidden;
  background:#ddd
}
.case-cover img {
  width:100%;
  display:block;
  aspect-ratio:16/8.3;
  object-fit:cover;
  transition:transform .6s ease
}
.case-cover:hover img {
  transform:scale(1.015)
}
.case-section {
  display:grid;
  grid-template-columns:.32fr 1.68fr;
  gap:5vw;
  border-top:1px solid var(--line)
}
.case-copy h2 {
  font-size:clamp(3rem,6.3vw,7rem);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:500;
  margin:0 0 2rem
}
.case-copy>p {
  font-size:clamp(1rem,1.5vw,1.35rem);
  line-height:1.65;
  max-width:760px;
  color:var(--muted);
  margin:0 0 5rem
}
.case-dark {
  background:#191916;
  color:#f1eee7
}
.case-dark .case-label,.case-dark .case-copy>p {
  color:#aaa69c
}
.case-dark {
  border-top:0
}
.problem-grid {
  grid-column:2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(255,255,255,.25)
}
.problem-grid article {
  padding:2rem 2rem 3rem 0;
  border-bottom:1px solid rgba(255,255,255,.18)
}
.problem-grid article:nth-child(odd) {
  border-right:1px solid rgba(255,255,255,.18);
  padding-right:2rem
}
.problem-grid article:nth-child(even) {
  padding-left:2rem
}
.problem-grid span {
  font-size:.65rem;
  color:#aaa69c
}
.problem-grid h3 {
  font-size:1.7rem;
  font-weight:500;
  margin:1.5rem 0 .7rem
}
.problem-grid p {
  color:#aaa69c;
  line-height:1.6;
  max-width:420px
}
.research-strip {
  grid-column:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink)
}
.research-strip div {
  padding:2.5rem 1.2rem;
  border-right:1px solid var(--ink)
}
.research-strip div:last-child {
  border-right:0
}
.research-strip strong {
  display:block;
  font-size:clamp(2.7rem,5vw,6rem);
  letter-spacing:-.07em;
  font-weight:500
}
.research-strip span {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted)
}
.system-demo {
  grid-column:2;
  background:#f8f7f2;
  padding:clamp(2rem,5vw,5rem)
}
.swatches {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1rem;
  margin-bottom:5rem
}
.swatches i {
  aspect-ratio:1;
  border-radius:50%;
  display:block
}
.swatches i:nth-child(1) {
  background:#096ab1
}
.swatches i:nth-child(2) {
  background:#f5f6f4;
  border:1px solid #ddd
}
.swatches i:nth-child(3) {
  background:#ffb53d
}
.swatches i:nth-child(4) {
  background:#38b6a8
}
.swatches i:nth-child(5) {
  background:#d6702f
}
.swatches i:nth-child(6) {
  background:#c63c35
}
.type-demo {
  display:grid;
  grid-template-columns:1fr auto;
  border-top:1px solid #bbb
}
.type-demo span,.type-demo strong {
  padding:1rem 0;
  border-bottom:1px solid #ccc
}
.type-demo span {
  font-size:clamp(1.2rem,2vw,2rem)
}
.type-demo strong {
  font-size:.75rem;
  font-weight:400;
  color:var(--muted)
}
.feature-grid {
  grid-column:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
.feature-card {
  background:#f3f2ec;
  padding:clamp(1.5rem,4vw,4rem);
  min-height:650px;
  display:flex;
  flex-direction:column
}
.feature-tag {
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.feature-card h3 {
  font-size:clamp(1.7rem,2.6vw,3rem);
  font-weight:500;
  letter-spacing:-.04em;
  margin:auto 0 .7rem
}
.feature-card p {
  color:var(--muted);
  line-height:1.55;
  max-width:500px
}
.mini-phone {
  width:45%;
  aspect-ratio:9/18;
  margin:3rem auto;
  border:1px solid #b8c3cf;
  border-radius:28px;
  background:white;
  padding:12% 8%;
  box-shadow:0 25px 70px rgba(0,0,0,.08)
}
.mini-top {
  height:5%;
  width:30%;
  background:#14335c;
  border-radius:99px;
  margin:0 auto 20%
}
.bubble {
  height:8%;
  border-radius:10px;
  background:#eef1f6;
  margin:10% 0;
  width:72%
}
.bubble.right {
  margin-left:auto;
  background:#d9efff
}
.bubble.short {
  width:45%
}
.bubble.mid {
  width:58%
}
.feed-card {
  background:white;
  border-radius:12px;
  width:70%;
  margin:5rem auto;
  padding:2rem;
  box-shadow:0 25px 70px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  gap:1rem
}
.feed-card small {
  font-size:.6rem;
  letter-spacing:.1em;
  color:var(--muted)
}
.feed-card strong {
  font-size:1.5rem
}
.feed-card span {
  font-size:.8rem;
  line-height:1.5;
  color:var(--muted)
}
.feed-card button {
  width:max-content;
  border:0;
  background:#0b67af;
  color:#fff;
  padding:.7rem 1.2rem;
  border-radius:99px
}
.case-next {
  border-top:1px solid var(--ink)
}
.case-next-row {
  display:flex;
  justify-content:space-between;
  gap:2rem;
  align-items:flex-end;
  margin:7rem 0
}
.case-next-row span {
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted)
}
.case-next-row h2 {
  font-size:clamp(3rem,7vw,8rem);
  letter-spacing:-.07em;
  font-weight:500;
  margin:.5rem 0 0
}
.case-next-row>a {
  border:1px solid var(--ink);
  border-radius:99px;
  padding:1rem 1.3rem;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.case-footer {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
@media(max-width:900px) {
  .case-hero {
    padding-top:8rem
  }
  .case-intro {
    grid-template-columns:1fr
  }
  .case-section {
    grid-template-columns:1fr
  }
  .problem-grid,.research-strip,.system-demo,.feature-grid {
    grid-column:1
  }
  .problem-grid {
    grid-template-columns:1fr
  }
  .problem-grid article:nth-child(odd) {
    border-right:0
  }
  .problem-grid article:nth-child(even) {
    padding-left:0
  }
  .research-strip {
    grid-template-columns:1fr 1fr
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .case-next-row {
    align-items:flex-start;
    flex-direction:column
  }
  .case-header .case-back {
    display:inline-block;
    font-size:.6rem
  }
}
@media(max-width:560px) {
  .case-hero h1 {
    font-size:15vw
  }
  .case-cover img {
    aspect-ratio:1/1
  }
  .research-strip {
    grid-template-columns:1fr
  }
  .research-strip div {
    border-right:0;
    border-bottom:1px solid var(--ink)
  }
  .research-strip div:last-child {
    border-bottom:0
  }
  .swatches {
    grid-template-columns:repeat(3,1fr)
  }
  .feature-card {
    min-height:540px
  }
  .mini-phone {
    width:58%
  }
  .feed-card {
    width:90%
  }
  .case-footer {
    gap:1.5rem;
    flex-direction:column
  }
}
.case-ui {
  background:#e7e4dc
}
.ui-shot-grid {
  grid-column:2;
  display:grid;
  grid-template-columns:1fr;
  gap:1rem
}
.ui-shot {
  margin:0;
  position:relative;
  overflow:hidden;
  background:#d7d4cc;
  min-height:420px
}
.ui-shot img {
  position:absolute;
  width:175%;
  height:175%;
  max-width:none;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)
}
.ui-shot:hover img {
  transform:scale(1.025)
}
.ui-shot figcaption {
  position:absolute;
  left:1rem;
  bottom:1rem;
  background:rgba(241,238,231,.94);
  border:1px solid rgba(18,18,16,.14);
  border-radius:99px;
  padding:.58rem .78rem;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.ui-shot--overview {
  min-height:0;
  aspect-ratio:16/9
}
.ui-shot--overview img {
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-position:center
}
.case-outcome {
  background:#f7f5ef
}
.outcome-grid {
  grid-column:2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--ink)
}
.outcome-grid>div {
  padding:2rem 2rem 2.5rem 0;
  border-bottom:1px solid var(--line)
}
.outcome-grid>div:nth-child(odd) {
  border-right:1px solid var(--line);
  padding-right:2rem
}
.outcome-grid>div:nth-child(even) {
  padding-left:2rem
}
.outcome-grid span {
  display:block;
  font-size:.64rem;
  color:var(--muted);
  margin-bottom:2rem
}
.outcome-grid strong {
  display:block;
  font-size:clamp(1.3rem,2vw,2rem);
  font-weight:500;
  letter-spacing:-.03em;
  margin-bottom:.7rem
}
.outcome-grid p {
  margin:0;
  color:var(--muted);
  line-height:1.6;
  max-width:430px
}
@media(max-width:900px) {
  .ui-shot-grid,.outcome-grid {
    grid-column:1
  }
  .ui-shot-grid {
    grid-template-columns:1fr
  }
  .ui-shot {
    min-height:70vw;
    grid-row:auto
  }
  .ui-shot--overview {
    min-height:0
  }
  .outcome-grid {
    grid-template-columns:1fr
  }
  .outcome-grid>div:nth-child(odd) {
    border-right:0;
    padding-right:0
  }
  .outcome-grid>div:nth-child(even) {
    padding-left:0
  }
}
@media(max-width:560px) {
  .ui-shot {
    min-height:95vw
  }
  .ui-shot--overview {
    min-height:0
  }
  .ui-shot img {
    width:190%;
    height:190%
  }
}

/* Keyboard focus styles — mirror hover affordances so keyboard users get the same visual feedback */
:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px;
  border-radius:2px
}
.case-page :focus-visible {
  outline-color:currentColor
}
.skip-link:focus-visible {
  outline:2px solid #000;
  outline-offset:2px
}
.wordmark:focus-visible,
.site-header nav a:focus-visible,
.case-back:focus-visible,
.availability:focus-visible,
.consulting-link:focus-visible,
.footer-row a:focus-visible,
.circle-link:focus-visible,
.case-next-row>a:focus-visible {
  outline:2px solid currentColor;
  outline-offset:4px
}
.filter:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:3px;
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}
.contact-line:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:-4px;
  padding-left:1rem;
  padding-right:1rem;
  background:var(--ink);
  color:var(--paper)
}
.case-page .contact-line:focus-visible {
  outline-color:currentColor
}
.project a:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px
}
.project a:focus-visible .project-stage {
  --stage-scale:.992
}
.project a:focus-visible .project-stage--cover img {
  transform:scale(1.025)
}
.project a:focus-visible .cover-view {
  opacity:1;
  transform:none
}
.project a:focus-visible .arrow {
  transform:translate(5px,-5px)
}