:root {
  color-scheme:dark;
  --bg:#101112;
  --paper:#f3f3ef;
  --ink:#17191c;
  --white:#f5f5f1;
  --muted:#a4a5a6;
  --blue:#788fff;
  --line:#343638;
  --font:'Manrope',Arial,sans-serif;
  --gutter:clamp(24px,5vw,88px);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit;
  text-decoration:none;
}
button,input,textarea {
  font:inherit;
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.6;
}
button[hidden],[hidden] {
  display:none!important;
}
img {
  display:block;
  max-width:100%;
}
button {
  color:inherit;
}
::selection {
  background:#4769fa;
  color:white;
}
:focus-visible {
  outline:3px solid #788fff;
  outline-offset:6px;
}
.wrap {
  max-width:1600px;
  padding-inline:var(--gutter);
  margin-inline:auto;
}
.skip-link {
  position:absolute;
  left:24px;
  top:-100px;
  z-index:10;
  padding:12px 20px;
  background:var(--white);
  color:var(--ink);
}
.skip-link:focus {
  top:12px;
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:104px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:23px;
  letter-spacing:-1.1px;
  line-height:1;
}
.brand img {
  border-radius:9px;
}
.brand-dot {
  color:var(--blue);
}
.topbar nav {
  display:flex;
  align-items:center;
  gap:44px;
  font-size:14px;
  font-weight:600;
}
.nav-count {
  vertical-align:super;
  font-size:12px;
  color:var(--muted);
  margin-left:5px;
}
.nav-contact {
  display:flex;
  gap:28px;
  align-items:center;
}
.nav-contact span {
  font-size:24px;
}
.topbar nav a {
  transition:color .2s;
}
.topbar nav a:hover {
  color:var(--blue);
}
.hero {
  position:relative;
  display:grid;
  grid-template-columns:1.08fr 1fr;
  min-height:calc(100svh - 104px);
  align-items:center;
}
.hero-copy {
  padding-top:45px;
  padding-bottom:116px;
  position:relative;
  z-index:1;
  pointer-events:none;
}
.hero-copy>* {
  pointer-events:auto;
}
.eyebrow {
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.5;
  margin:0;
}
.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:32px;
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#a6cbb0;
  display:inline-block;
  flex-shrink:0;
}
.hero h1 {
  font-size:clamp(66px,7.5vw,120px);
  line-height:.99;
  letter-spacing:-.075em;
  font-weight:500;
  margin:0 0 28px;
}
.muted {
  color:#8b8e94;
}
.hero-lede {
  font-size:clamp(16px,1.18vw,18px);
  line-height:1.8;
  color:#b6b8bd;
  margin:0 0 30px;
  letter-spacing:-.02em;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  min-height:54px;
  padding:14px 22px;
  border-radius:4px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:700;
  transition:background .2s,transform .2s;
}
.button-light {
  background:var(--white);
  color:var(--ink);
}
.button-light:hover {
  background:#c7d0ff;
  transform:translateY(-2px);
}
.button span {
  font-size:22px;
  line-height:1;
}
.hero-art {
  position:relative;
  width:116%;
  margin-left:-12%;
  align-self:stretch;
  min-width:0;
  display:flex;
  align-items:center;
  margin-bottom:78px;
}
.hero-art>img,.hero-art>canvas {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  inset:0;
}
.hero-art canvas {
  opacity:0;
  transition:opacity .7s;
  pointer-events:none;
}
.hero-art.is-live canvas {
  opacity:1;
}
.hero-art.is-live .particle-fallback {
  opacity:0;
}
.particle-fallback {
  transition:opacity .7s;
}
.art-caption {
  position:absolute;
  bottom:26px;
  left:18%;
  right:5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  color:#96999f;
  font-size:12px;
}
.art-caption>span:before {
  content:'✳';
  display:inline-block;
  font-size:18px;
  margin-right:10px;
  color:#9aaaff;
  vertical-align:-1px;
}
.art-caption button {
  border:0;
  background:transparent;
  font-size:12px;
  padding:10px;
  color:#b9bdc5;
}
.art-caption button:hover {
  color:white;
}
.art-caption button span {
  margin-left:10px;
}
.hero-foot {
  position:absolute;
  bottom:0;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  border-top:1px solid var(--line);
  height:78px;
  color:#a7a9ad;
  font-size:12px;
}
.hero-foot a {
  display:flex;
  gap:26px;
  align-items:center;
  color:#d9dadc;
}
.hero-foot a span {
  font-size:19px;
}
.hero-coordinate {
  font-variant-numeric:tabular-nums;
}
.work {
  background:var(--paper);
  color:var(--ink);
  padding:76px 0 104px;
  color-scheme:light;
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:36px;
  border-bottom:1px solid #d1d2d0;
}
.section-head .eyebrow {
  font-weight:700;
}
.section-note {
  color:#63656a;
  font-size:14px;
}
.project {
  padding-top:37px;
}
.project+.project {
  margin-top:74px;
  border-top:1px solid #d1d2d0;
}
.project-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:27px;
}
.project-heading>div {
  display:flex;
  align-items:baseline;
  gap:22px;
}
.project-number {
  font-size:13px;
  color:#696b70;
  font-variant-numeric:tabular-nums;
}
.project h3 {
  font-size:clamp(30px,3.5vw,50px);
  letter-spacing:-.06em;
  line-height:1.2;
  font-weight:500;
  margin:0;
}
.project-status {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  white-space:nowrap;
}
.project-status .status-dot {
  background:#3f7860;
}
.project-status .testing {
  background:#9a6820;
}
.project-grid {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(36px,6vw,94px);
  align-items:center;
}
.project-visual {
  min-width:0;
  height:560px;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.ink-visual {
  background:#e6e1d9;
}
.visual-overline {
  position:relative;
  z-index:1;
  display:block;
  padding:28px 30px 0;
  font-size:13px;
  color:#65605b;
}
.ink-image {
  width:85%;
  height:390px;
  object-fit:contain;
  align-self:center;
  mix-blend-mode:multiply;
}
.gallery-bottom {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 26px 22px;
  gap:12px;
  font-size:12px;
  min-height:70px;
}
.gallery-bottom>span {
  color:#625e59;
}
.gallery-controls {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.gallery-controls>span {
  font-size:12px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  min-width:42px;
  text-align:center;
}
.gallery-controls button {
  width:38px;
  height:38px;
  border:1px solid #b9b4ad;
  border-radius:50%;
  background:transparent;
  display:grid;
  place-items:center;
  font-size:19px;
  line-height:1;
  transition:background .2s,color .2s;
}
.gallery-controls button:hover {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}
.project-category {
  font-size:12px!important;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#6d6e73;
  margin:0 0 28px!important;
}
.project-description h4 {
  font-size:clamp(32px,3.1vw,47px);
  line-height:1.13;
  letter-spacing:-.05em;
  font-weight:500;
  margin:0 0 25px;
}
.project-description>p {
  font-size:17px;
  line-height:1.7;
  max-width:38ch;
  margin:0 0 18px;
}
.project-description .secondary-copy {
  font-size:16px;
  color:#63666b;
  line-height:1.85;
}
.text-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:15px;
  font-weight:700;
  padding:15px 0 12px;
  border-bottom:1px solid #91949a;
  max-width:290px;
  margin-top:23px;
}
.text-link span {
  font-size:23px;
  transition:transform .2s;
}
.text-link:hover span {
  transform:translate(3px,-3px);
}
.project-facts {
  display:flex;
  gap:8px 18px;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:20px 0 0;
  font-size:12px;
  color:#62656a;
}
.project-facts li+li:before {
  content:'·';
  margin-right:18px;
}
.budjet-visual {
  background:#182329;
  color:#f5f5f1;
}
.budjet-visual .visual-overline {
  color:#b3c1c8;
}
.phones {
  position:relative;
  flex:1;
  min-height:0;
  max-width:490px;
  width:100%;
  align-self:center;
}
.phone {
  position:absolute;
  height:358px;
  width:auto;
  max-width:46%;
  object-fit:contain;
  border:5px solid #39434b;
  border-radius:27px;
  box-shadow:0 22px 40px #0005;
  background:#142024;
}
.phone-back {
  left:12%;
  top:36px;
  transform:rotate(-9deg);
}
.phone-front {
  right:13%;
  top:6px;
  transform:rotate(9deg);
  border-color:#4b555e;
}
.budjet-visual .gallery-bottom>span {
  color:#b1bfc5;
}
.budjet-visual .gallery-controls button {
  border-color:#637078;
}
.budjet-visual .gallery-controls button:hover {
  background:#f5f5f1;
  color:#182329;
}
.project-budjet .project-grid {
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
}
.project-budjet .project-visual {
  grid-column:2;
  grid-row:1;
}
.project-budjet .project-description {
  grid-column:1;
  grid-row:1;
}
.hero-lede {
  max-width: 39ch;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
}
.hero-service-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  font-size: 14px;
  border-bottom: 1px solid #656970;
}
.hero-service-link:hover {
  color: var(--blue);
}
.services {
  padding-top: 90px;
  padding-bottom: 80px;
}
.services-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px 8%;
  margin-bottom: 48px;
}
.services-intro .eyebrow {
  grid-column: 1 / -1;
  color: #a9acb3;
}
.services-intro h2 {
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.05em;
  margin: 0;
}
.services-intro>p:last-child {
  color: #b6b8bd;
  margin: 0;
  max-width: 48ch;
}
.service-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  padding-block: 28px;
  border-top: 1px solid var(--line);
  gap: 20px;
}
.service-number {
  color: var(--blue);
  font-size: 13px;
  padding-top: 9px;
}
.service-row>div {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px 6%;
}
.service-row h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.3;
  margin: 0;
}
.service-row p {
  margin: 0;
  color: #b6b8bd;
}
.service-row .service-detail {
  grid-column: 2;
  color: #969da9;
  font-size: 12px;
}
.service-cta {
  margin-left: 84px;
  max-width: 330px;
}
.contact {
  padding-top:110px;
  padding-bottom:110px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:8%;
}
.contact .eyebrow {
  color:#a9acb3;
  font-size:12px;
  letter-spacing:.09em;
  margin-bottom:30px;
}
.contact h2 {
  font-size:clamp(42px,4.6vw,70px);
  line-height:1.05;
  letter-spacing:-.065em;
  font-weight:500;
  margin:0 0 25px;
}
.blue {
  color:#889bff;
}
.contact-copy>p:not(.eyebrow) {
  color:#a9adb6;
  font-size:16px;
  line-height:1.8;
}
.email-link {
  display:inline-flex;
  gap:28px;
  align-items:center;
  margin-top:20px;
  border-bottom:1px solid #656970;
  padding-bottom:5px;
  font-size:16px;
}
.email-link span {
  font-size:23px;
}
.contact-form {
  padding-top:30px;
  min-width:0;
}
.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.field {
  display:flex;
  flex-direction:column;
  margin-bottom:25px;
  min-width:0;
}
.field label {
  font-size:14px;
  margin-bottom:9px;
  color:#d5d7dc;
}
.field label span {
  font-size:12px;
  color:#979ba3;
}
.field input,.field textarea {
  color:#f1f2f5;
  background:transparent;
  border:0;
  border-bottom:1px solid #4a4e55;
  border-radius:0;
  padding:12px 0;
  width:100%;
  min-width:0;
  font-size:16px;
  transition:border-color .2s;
}
.field input:focus,.field textarea:focus {
  outline:none;
  border-bottom-color:#b0baff;
  box-shadow:0 1px #b0baff;
}
.field input::placeholder,.field textarea::placeholder {
  color:#878c95;
}
.field textarea {
  resize:vertical;
  min-height:125px;
}
.form-actions {
  display:flex;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
.form-actions .button {
  flex-shrink:0;
}
.form-actions p {
  color:#b7bdc8;
  font-size:14px;
  margin:0;
  max-width:32ch;
}
.form-actions p:not(:empty) {
  padding-top:10px;
}
.form-actions p.error {
  color:#ffb9b0;
}
.form-actions p.success {
  color:#adcbb6;
}
input[name=_honey] {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  padding-top:32px;
  padding-bottom:36px;
  color:#acafb6;
  font-size:12px;
}
.footer:before {
  content:'';
  position:absolute;
  top:0;
  left:var(--gutter);
  right:var(--gutter);
  border-top:1px solid var(--line);
}
.footer .brand {
  font-size:20px;
  color:#e6e8ed;
}
.footer>div {
  display:flex;
  gap:18px;
}
.abn {
  color:#9397a0;
}
.back-top {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid #4a4e55;
  border-radius:50%;
  font-size:20px;
}
@media(min-width:1600px) {
  .hero {
    min-height:820px;
  }
}
@media(max-width:1100px) {
  .hero h1 {
    font-size:clamp(66px,8vw,88px);
  }
  .hero-copy {
    padding-bottom:120px;
  }
  .hero-coordinate {
    display:none;
  }
  .project-visual {
    height:510px;
  }
  .ink-image {
    height:335px;
  }
  .project-grid,.project-budjet .project-grid {
    gap:40px;
  }
  .gallery-bottom {
    flex-wrap:wrap;
    padding-inline:22px;
    row-gap:8px;
  }
  .gallery-controls {
    gap:7px;
  }
  .phone {
    height:320px;
  }
  .phone-back {
    left:9%;
  }
  .phone-front {
    right:9%;
  }
  .footer>p {
    display:none;
  }
  .footer>div {
    flex-direction:column;
    gap:2px;
  }
}
@media(max-width:760px) {
  .topbar {
    height:82px;
  }
  .brand {
    font-size:21px;
  }
  .topbar nav {
    gap:24px;
    font-size:14px;
  }
  .nav-contact {
    gap:8px;
  }
  .hero {
    grid-template-columns:1fr;
    min-height:0;
    padding-top:30px;
  }
  .hero-copy {
    padding:0;
    z-index:1;
  }
  .hero .eyebrow {
    font-size:12px;
    margin-bottom:26px;
  }
  .hero h1 {
    font-size:clamp(64px,12vw,92px);
    letter-spacing:-.07em;
  }
  .hero-lede {
    font-size:16px;
    max-width:34ch;
  }
  .hero-lede br {
    display:none;
  }
  .hero-art {
    width:100%;
    height:400px;
    margin:0;
    align-self:auto;
  }
  .art-caption {
    left:0;
    right:0;
    bottom:16px;
  }
  .hero-foot {
    position:static;
    grid-column:1;
    height:75px;
    margin-top:0;
    font-size:12px;
  }
  .hero-foot a {
    gap:14px;
  }
  .hero-foot>span {
    max-width:15ch;
  }
  .hero-foot a {
    max-width:22ch;
  }
  .work {
    padding:45px 0 64px;
  }
  .section-head {
    padding-bottom:25px;
  }
  .section-note {
    font-size:12px;
  }
  .project {
    padding-top:26px;
  }
  .project+.project {
    margin-top:48px;
  }
  .project-heading {
    margin-bottom:22px;
  }
  .project-heading>div {
    gap:14px;
  }
  .project-status {
    font-size:12px;
    gap:6px;
  }
  .project-number {
    font-size:12px;
  }
  .project-grid,.project-budjet .project-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .project-budjet .project-visual,.project-budjet .project-description {
    grid-column:auto;
    grid-row:auto;
  }
  .project-description>p {
    max-width:52ch;
  }
  .project-description h4 {
    font-size:38px;
  }
  .project-category {
    margin-bottom:18px!important;
  }
  .project-visual {
    height:480px;
  }
  .ink-image {
    height:325px;
  }
  .gallery-bottom {
    flex-wrap:nowrap;
  }
  .contact {
    padding-top:66px;
    padding-bottom:58px;
    grid-template-columns:1fr;
    gap:32px;
  }
  .services {
    padding-top: 58px;
    padding-bottom: 32px;
  }
  .services-intro, .service-row>div {
    grid-template-columns: 1fr;
  }
  .service-row {
    grid-template-columns: 24px 1fr;
    gap: 12px;
  }
  .service-row .service-detail {
    grid-column: 1;
  }
  .service-cta {
    margin-left: 36px;
  }
  .contact h2 {
    font-size:54px;
  }
  .contact-form {
    padding-top:0;
  }
  .footer {
    flex-wrap:wrap;
    gap:24px;
    padding-top:26px;
    padding-bottom:28px;
  }
  .footer>div {
    font-size:12px;
    margin-left:auto;
  }
  .back-top {
    display:none;
  }
  .phone {
    height:325px;
  }
  .phone-back {
    left:18%;
  }
  .phone-front {
    right:18%;
  }
}
@media(max-width:430px) {
  .nav-count {
    display:none;
  }
  .topbar nav {
    gap:14px;
    font-size:12px;
  }
  .hero-art {
    height:350px;
  }
  .hero h1 {
    font-size:clamp(54px,15vw,64px);
  }
  .project-visual {
    height:410px;
  }
  .ink-image {
    height:255px;
  }
  .visual-overline {
    padding:22px 22px 0;
    font-size:12px;
  }
  .gallery-bottom {
    padding:8px 18px 18px;
    flex-wrap:wrap;
  }
  .gallery-controls {
    margin-left:auto;
  }
  .phone {
    height:270px;
    border-width:4px;
    border-radius:22px;
  }
  .phone-back {
    left:13%;
    top:23px;
  }
  .phone-front {
    right:13%;
    top:5px;
  }
  .field-row {
    grid-template-columns:1fr;
    gap:0;
  }
  .section-note {
    max-width:15ch;
    text-align:right;
  }
  .contact h2 {
    font-size:48px;
  }
  .footer .brand {
    font-size:18px;
  }
  .project-facts {
    gap:8px 12px;
  }
  .project-facts li+li:before {
    margin-right:12px;
  }
  .project-heading {
    flex-wrap:wrap;
  }
  .topbar .brand {
    font-size:19px;
  }
  .topbar .brand img {
    width:28px;
    height:28px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
  .button-light:hover {
    transform:none;
  }
}

.capability { background: #faf8f3; color: var(--ink); color-scheme: light; padding-block: clamp(56px, 7vw, 110px); }
.capability-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.capability-visuals { min-width: 0; }
.capability figure { margin: 0; }
.prototype-figure { width: 94%; }
.prototype-sketch { position: relative; aspect-ratio: 720 / 370; overflow: hidden; border-radius: 3px; }
.prototype-sketch img { position: absolute; width: 213.333334%; max-width: none; height: auto; left: -7.5%; top: -8.648649%; }
.capability figcaption { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; }
.capability-number { color: #1769e8; font-weight: 800; }
.capability-connector { width: 20%; height: 36px; margin: 0 0 14px 27%; border-left: 2px solid #297cff; border-bottom: 2px solid #297cff; border-radius: 0 0 0 10px; position: relative; }
.capability-connector::after { content: ''; position: absolute; right: -4px; bottom: -5px; width: 8px; height: 8px; background: #297cff; border-radius: 50%; }
.katabox-scene { width: 100%; height: auto; border-radius: 3px; }
.katabox-caption { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.katabox-caption:hover { text-decoration: underline; }
.katabox-caption img { width: 30px; height: 30px; }
.capability-copy h2 { font-size: clamp(38px, 4.2vw, 64px); line-height: 1.05; letter-spacing: -.055em; font-weight: 800; margin: 0 0 32px; }
.capability-copy p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; margin: 0 0 20px; }
.capability-copy p:last-child { margin-bottom: 0; }
@media(max-width: 900px) {
  .capability-grid { grid-template-columns: 1fr; gap: 40px; }
  .capability-copy { grid-row: 1; }
  .capability-visuals { width: 100%; max-width: 680px; margin-inline: auto; }
}

.approach {
  padding-top: clamp(56px, 7vw, 108px);
  padding-bottom: clamp(64px, 8vw, 120px);
}
.approach>.eyebrow { color: #a5b3ff; margin-bottom: 24px; }
.approach h2 {
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -.055em;
  font-weight: 500;
  margin: 0 0 44px;
}
.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.approach-copy p { color: #b6b8bd; margin: 0 0 20px; max-width: 49ch; }
.approach-copy .approach-lede { color: var(--white); font-size: 23px; letter-spacing: -.03em; }
.approach-visual { margin: 0; min-width: 0; }
.approach-visual img { width: 100%; height: auto; border-radius: 5px; }
.approach-visual figcaption { margin-top: 16px; color: #a4a5a6; font-size: 13px; text-align: right; }
@media(max-width: 900px) {
  .approach-grid { grid-template-columns: 1fr; }
  .approach-visual { grid-row: 1; }
  .approach-copy p { max-width: 65ch; }
  .approach h2 { margin-bottom: 30px; }
}

/* Compact product stories with a single interactive image each. */
.work { padding-block: 56px 64px; }
.work .section-head { padding-bottom: 24px; }
.work .project { padding-top: 24px; }
.work .project + .project { margin-top: 36px; }
.work .project-heading { margin-bottom: 18px; }
.work .project h3 { font-size: clamp(26px, 2.8vw, 38px); }
.work .project-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.work .project-description h4 { font-size: clamp(27px, 2.6vw, 38px); margin-bottom: 16px; }
.work .project-description > p { max-width: 48ch; font-size: 16px; margin-bottom: 12px; }
.work .text-link { margin-top: 12px; }
.product-image { position: relative; height: 320px; overflow: hidden; border-radius: 5px; }
.ink-product { background: #e6e1d6; }
.budjet-product { background: #182329; }
.product-image > img { width: 100%; height: 100%; object-fit: contain; }
.product-image > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.product-image.is-live > canvas { opacity: 1; }
.product-image.is-live > img { opacity: 0; }
.project-budjet .product-image { grid-column: 2; grid-row: 1; }
@media(max-width: 900px) {
  .work .project-grid { grid-template-columns: 1fr; gap: 24px; }
  .project-budjet .product-image, .project-budjet .project-description { grid-column: auto; grid-row: auto; }
  .product-image { height: 280px; }
  .work .project-description > p { max-width: 60ch; }
}

.work .project-heading > div { align-items: center; gap: 16px; }
.work .project h3 { display: flex; align-items: center; gap: 12px; }
.work .product-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 9px; flex-shrink: 0; }
@media(max-width: 520px) {
  .work .project-heading > div { gap: 10px; }
  .work .project h3 { gap: 9px; }
  .work .product-logo { width: 32px; height: 32px; border-radius: 7px; }
}

/* Keep the family photograph intact within the compact product row. */
.work .budjet-product { width: min(100%, 480px); height: auto; aspect-ratio: 3 / 2; justify-self: center; }

.sketch-reveal { position: relative; overflow: hidden; border-radius: 3px; }
.sketch-reveal > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sketch-reveal.is-live > canvas { opacity: 1; }
.sketch-reveal.is-live > img { opacity: 0; }
@media(prefers-reduced-motion: reduce) {
  .product-image.is-live > img, .sketch-reveal.is-live > img { opacity: 1; }
  .product-image.is-live > canvas, .sketch-reveal.is-live > canvas { opacity: 0; }
}

/* Persistent navigation and a content-sized desktop opening. */
html { scroll-padding-top: 108px; }
.topbar.wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 88px;
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 1600px) / 2 + var(--gutter)));
  background: rgba(16, 17, 18, .96);
  border-bottom: 1px solid #ffffff12;
  backdrop-filter: blur(16px);
}
.topbar nav { gap: clamp(20px, 3vw, 44px); }
.skip-link { z-index: 30; }
.hero { min-height: 0; }
.hero-copy { padding-top: 32px; padding-bottom: 48px; }
.hero-art { margin-bottom: 0; }
.hero-foot { position: static; grid-column: 1 / -1; height: 64px; }
@media(max-width: 760px) {
  html { scroll-padding-top: 132px; }
  .hero { display: none; }
  .topbar.wrap { height: auto; min-height: 112px; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 14px; padding-bottom: 10px; }
  .topbar nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 12px; }
  .topbar nav a { display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
  .nav-contact { gap: 6px; }
  .nav-contact span { font-size: 18px; }
  .approach { padding-top: 32px; }
}