/* 1. Design tokens — approved prototype palette */
:root {
  --bg: #080A09;
  --b2: #0D100F;
  --b3: #111412;
  --gr: #202521;
  --moss: #405448;
  --fo: #516458;
  --sg: #708273;
  --t: #F0F1ED;
  --t2: #D7DAD4;
  --dm: #8D958D;
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --duration-fast: .5s;
  --duration-medium: .9s;
  --duration-slow: 1.4s;
  --p: clamp(20px,5vw,64px)
}

/* 2. Reset / base */
* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  background: var(--bg)
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--t);
  font: 300 17px/1.6 'Inter Tight','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
}

body: :after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

h1,h2,h3,h4,p,ul {
  margin: 0;
  padding: 0;
  list-style: none
}

a {
  color: inherit;
  text-decoration: none
}

:focus-visible {
  outline: 2px solid var(--sg);
  outline-offset: 6px;
}

.w {
  padding: 0 var(--p);
  max-width: 1500px;
  margin: 0 auto
}

section {
  scroll-margin-top: 100px;
  position: relative;
  padding: clamp(90px,14vw,190px) 0
}

/* 3. Typography and 4. Shared layout */
.h2 {
  font-size: clamp(38px,7vw,104px);
  line-height: .96;
  letter-spacing: -.05em;
  font-weight: 400
}

.lab {
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: clamp(36px,6vw,80px)
}

.lab .ln {
  flex: 0 1 240px
}

.ln {
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,var(--sg),#ffffff24);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s var(--ease-premium)
}

.in .ln {
  transform: none
}

/* 5. Motion utilities */
.js [data-r] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease-premium),transform 1.1s var(--ease-premium);
  transition-delay: var(--d,0s)
}

.js [data-r].in {
  opacity: 1;
  transform: none
}

.mk {
  display: block;
  overflow: hidden;
  padding-bottom: .08em
}

.mk>span {
  display: block
}

.js .mk>span {
  transform: translateY(108%);
  transition: transform 1.2s var(--ease-premium);
  transition-delay: var(--d,0s)
}

.js .mk.in>span {
  transform: none
}

.js .mk[data-r] {
  opacity: 1;
  transform: none
}

/* 6. Navigation */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--p);
  transition: padding .6s var(--ease-premium),background .6s,backdrop-filter .6s;
  padding-top: calc(26px + env(safe-area-inset-top,0px))
}

.js .nav {
  opacity: 0;
  animation: fade 1.2s .2s var(--ease-premium) forwards
}

@keyframes fade {
  to {
    opacity: 1
  }

}

.nav.s {
  padding-top: calc(14px + env(safe-area-inset-top,0px));
  padding-bottom: 14px;
  background: #080a09a8;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px)
}

.wm {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}

.wm img {
  display: block;
  width: 160px;
  height: auto;
  aspect-ratio: 597 / 137;
}

.ft .wm img {
  width: 180px;
  max-width: 100%;
}

.links {
  display: flex;
  gap: clamp(20px,3.5vw,48px);
  font-size: 15px
}

.ul {
  position: relative
}

.ul::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--sg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-premium)
}

.ul:hover::after {
  transform: none
}

.pill {
  border: 1px solid #ffffff38;
  border-radius: 99px;
  padding: 9px 20px;
  font-size: 14px;
  transition: background .5s,border-color .5s
}

.pill:hover {
  background: var(--moss);
  border-color: var(--moss)
}

.bg {
  display: none;
  background: none;
  border: 0;
  color: var(--t);
  font: inherit;
  font-size: 14px;
  padding: 12px 0;
  cursor: pointer
}

#menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--gr);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 var(--p);
  font-size: clamp(44px,13vw,80px);
  letter-spacing: -.05em;
  line-height: 1.05;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease-premium),visibility 0s .9s
}

.open #menu {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path .9s var(--ease-premium)
}

#menu a:last-child {
  color: var(--sg)
}

/* 7. Hero */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 140px 0 40px;
  overflow: hidden;
  background: var(--bg)
}

.hero::before,.cta::before,.bey::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(45% 40% at 72% 35%,#405448aa,transparent 70%),radial-gradient(40% 35% at 15% 85%,#2a382f99,transparent 70%);
  animation: drift 22s ease-in-out infinite alternate
}

@keyframes drift {
  to {
    transform: translate3d(-9%,7%,0) scale(1.18)
  }

}

.hero .w {
  position: relative;
  z-index: 2;
  width: 100%
}

h1 {
  font-size: clamp(50px,11.4vw,188px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 400
}

.hb {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-top: clamp(32px,5vw,64px);
  flex-wrap: wrap
}

.hb p {
  max-width: 38ch;
  color: var(--t2);
  font-size: clamp(16px,1.5vw,20px)
}

.ct {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-top: 28px
}

.ct .pill {
  background: var(--t);
  color: var(--bg);
  border-color: var(--t);
  padding: 14px 26px;
  font-size: 15px
}

.ct .pill:hover {
  background: var(--sg);
  border-color: var(--sg)
}

.sc {
  font-size: 11px;
  letter-spacing: .22em;
  line-height: 1.7;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px
}

.sc i {
  display: block;
  width: 1px;
  height: 64px;
  background: linear-gradient(var(--t),transparent);
  transform-origin: top;
  animation: grow 3.2s var(--ease-premium) infinite
}

@keyframes grow {
  0% {
    transform: scaleY(0);
    opacity: 1
  }

  65% {
    transform: scaleY(1);
    opacity: 1
  }

  100% {
    transform: scaleY(1);
    opacity: 0
  }

}

/* 8. Intro */
.intro {
  background: linear-gradient(var(--bg),var(--b2))
}

.intro .h2 {
  max-width: 17ch
}

.intro p {
  max-width: 54ch;
  color: var(--t2);
  margin: clamp(36px,6vw,80px) 0 0 auto;
  font-size: clamp(17px,1.6vw,21px)
}

/* 9. Selected work */
.work {
  background: var(--b2)
}

.proj {
  --title-outset: min(5vw,calc(var(--p) - 16px));
  position: relative;
  margin-bottom: clamp(90px,14vw,200px);
  width: min(72%,1000px)
}

.proj:nth-child(even) {
  margin-left: auto
}

.proj.a {
  width: min(86%,1200px)
}

.iw {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  cursor: auto
}

.img {
  position: absolute;
  inset: 0;
  overflow: hidden
}

.js .img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--duration-slow) var(--ease-premium)
}

.js .in .img,.js .img.in {
  clip-path: inset(0)
}

.ph {
  position: absolute;
  inset: 0;
  transform: scale(1.05);
  transition: transform 1.6s var(--ease-premium);
  background: var(--project-gradient)
}

.in .ph {
  transform: none
}

.iw:hover .ph {
  transform: scale(1.02);
  transition-duration: 1.2s
}

.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--b2);
  opacity: .18;
  transition: opacity .8s
}

.iw:hover .ph::after {
  opacity: 0
}

.ph small {
  position: absolute;
  right: 18px;
  top: 16px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t2);
  background: #080a0999;
  padding: 4px 8px;
  z-index: 2
}

.ttl {
  position: absolute;
  bottom: -.28em;
  left: calc(-1 * var(--title-outset));
  z-index: 3;
  pointer-events: none;
  font-size: clamp(46px,8.7vw,150px);
  width: max-content;
  max-width: calc(100% + var(--title-outset));
  overflow-wrap: normal;
  line-height: .88;
  letter-spacing: -.06em;
  font-weight: 400;
  text-shadow: 0 0 40px #080a0999
}

.proj:nth-child(even) .ttl {
  left: auto;
  right: calc(-1 * var(--title-outset));
  text-align: right
}

.meta {
  display: grid;
  grid-template-columns: repeat(3,auto);
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(44px,6vw,80px);
  font-size: 14px;
  color: var(--dm)
}

.meta b {
  display: block;
  color: var(--t2);
  font-weight: 400
}

.cur {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  padding: 12px 18px;
  border-radius: 99px;
  background: var(--t);
  color: var(--bg);
  font-size: 11px;
  letter-spacing: .18em;
  white-space: nowrap;
  transition: opacity var(--duration-fast);
}

.cur.on {
  opacity: 1
}

/* 10. Service panels and secondary IT capability */
.svc {
  background: linear-gradient(var(--b2),var(--b3))
}

.panels {
  display: flex;
  gap: clamp(12px,1.6vw,24px);
  margin-top: clamp(40px,6vw,80px)
}

.pn {
  flex: 1;
  min-height: 560px;
  border: 1px solid #ffffff24;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  transition: border-color var(--duration-fast),background var(--duration-medium);
  background: transparent
}

.pn.m {
  flex: 1.3
}

.pn:hover,.pn:focus-within {
  border-color: #708273;
  background: linear-gradient(170deg,#40544833,#202521aa)
}

.pt {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dm)
}

/* Rotation stays on the wrapper; hover expansion and mobile scale stay inside. */
.geo-rotation-wrapper {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 6px 8px 0 0;
  transform-origin: center;
  animation: service-geometry-rotate 14s linear infinite;
}

@keyframes service-geometry-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.geo {
  position: relative;
  width: 34px;
  height: 34px;
}

.geo::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--sg);
  transition: transform .6s var(--ease-premium)
}

.geo i {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--sg);
  transition: transform .6s var(--ease-premium)
}

.geo i:nth-child(1) {
  left: -3px;
  top: -3px
}

.geo i:nth-child(2) {
  right: -3px;
  top: -3px
}

.geo i:nth-child(3) {
  left: -3px;
  bottom: -3px
}

.geo i:nth-child(4) {
  right: -3px;
  bottom: -3px
}

.pn:hover .geo::before,.pn:focus-within .geo::before {
  transform: scale(1.47)
}

.pn:hover .geo i:nth-child(1),.pn:focus-within .geo i:nth-child(1) {
  transform: translate(-8px,-8px)
}

.pn:hover .geo i:nth-child(2),.pn:focus-within .geo i:nth-child(2) {
  transform: translate(8px,-8px)
}

.pn:hover .geo i:nth-child(3),.pn:focus-within .geo i:nth-child(3) {
  transform: translate(-8px,8px)
}

.pn:hover .geo i:nth-child(4),.pn:focus-within .geo i:nth-child(4) {
  transform: translate(8px,8px)
}

.pb {
  transform: translateY(170px);
  transition: transform .9s var(--ease-premium)
}

.pn:hover .pb,.pn:focus-within .pb {
  transform: none
}

.pb h3 {
  font-size: clamp(30px,3.2vw,46px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 400;
  margin-bottom: 26px;
  max-width: 11ch
}

.pd {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-premium),transform .9s var(--ease-premium)
}

.pn:hover .pd,.pn:focus-within .pd {
  opacity: 1;
  transform: none;
  transition-delay: .12s
}

.pd li {
  color: var(--t2);
  font-size: 15px;
  line-height: 2
}

.pd a {
  display: inline-flex;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase
}

.pd a span {
  transition: transform .5s var(--ease-premium)
}

.pn:hover .pd a span {
  transform: translateX(6px)
}

.it {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  margin-top: clamp(60px,9vw,120px);
  align-items: start
}

.it h3 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.03em
}

.it p {
  color: var(--dm);
  font-size: 14px;
  margin-top: 8px
}

.it ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  color: var(--dm);
  font-size: 18px
}

/* 11. Process */
.proc {
  background: var(--b3)
}

.pg {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--p)
}

.st {
  position: sticky;
  top: 22vh;
  align-self: start
}

.step {
  min-height: 46vh;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--dm);
  transition: color .8s var(--ease-premium)
}

.step .ln {
  background: var(--sg);
  width: 100%
}

.step.on .ln,.step .ln {
  transition: transform var(--duration-slow) var(--ease-premium)
}

.step.on .ln {
  transform: none
}

.step h3 {
  font-size: clamp(34px,5vw,72px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1;
  transition: color .8s
}

.step span {
  font-size: 14px;
  color: var(--dm);
  margin-right: 16px
}

.step.on {
  color: var(--t2)
}

.step.on b,.step.on span {
  color: var(--t)
}

.step p {
  max-width: 40ch
}

/* 12. Editorial pricing */
.pr {
  background: linear-gradient(var(--b3),var(--bg))
}

.row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: clamp(28px,4vw,52px) 0;
  font-size: clamp(22px,3.4vw,52px);
  letter-spacing: -.04em;
  line-height: 1.1
}

.row .ln {
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff24
}

.row:hover .ln {
  background: var(--sg)
}

.row>span {
  transition: transform .7s var(--ease-premium)
}

.row:hover>span:first-child {
  transform: translateX(8px)
}

.row em {
  font-style: normal;
  color: var(--dm);
  font-size: .55em;
  letter-spacing: -.02em;
  display: flex;
  gap: 16px;
  align-items: center;
  text-align: right
}

.row em b {
  font-weight: 300;
  transition: transform .5s var(--ease-premium)
}

.row:hover em b {
  transform: translateX(6px)
}

.note {
  font-size: 14px;
  color: var(--dm);
  margin-top: 28px;
  max-width: 52ch
}

/* 13–14. Beyond websites and final CTA */
.bey,.cta {
  overflow: hidden;
  background: var(--bg)
}

.bey::before {
  background: radial-gradient(50% 45% at 30% 60%,#40544899,transparent 70%),radial-gradient(40% 40% at 85% 20%,#51645833,transparent 70%)
}

.bey .w,.cta .w {
  position: relative;
  z-index: 2
}

.bey p {
  max-width: 50ch;
  color: var(--t2);
  margin-top: 40px;
  font-size: clamp(17px,1.6vw,21px)
}

.cta {
  padding: clamp(130px,20vw,280px) 0
}

.cta::before {
  display: none
}

.glow {
  position: absolute;
  left: 60%;
  top: 50%;
  width: 90vmin;
  height: 90vmin;
  margin: -45vmin;
  background: radial-gradient(closest-side,#516458a0,#40544855 50%,transparent);
  pointer-events: none;
}

.cta .h2 {
  font-size: clamp(40px,8.6vw,150px);
  max-width: 13ch;
  line-height: .94
}

.cl {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  margin-top: clamp(40px,6vw,80px);
  font-size: clamp(22px,3vw,40px);
  letter-spacing: -.04em
}

.cl span {
  transition: transform .6s var(--ease-premium)
}

.cl:hover span {
  transform: translateX(10px)
}

.cl .ln {
  position: absolute;
  bottom: -8px
}

.cl {
  position: relative
}

.cl .ln {
  height: 1px;
  background: var(--t)
}

.cl:hover .ln {
  background: var(--sg)
}

/* 15. Footer */
footer {
  padding: 70px 0 40px;
  background: var(--bg);
  border-top: 1px solid #ffffff14;
  font-size: 15px;
  color: var(--dm)
}

.ft {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px
}

.ft ul {
  display: grid;
  gap: 8px
}

.ft a:hover {
  color: var(--t)
}

.cp {
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
  font-size: 13px;
  gap: 12px;
  flex-wrap: wrap
}

/* Shared accessibility and static fallbacks */
[hidden] {
  display: none!important
}

button,input,textarea {
  font: inherit
}

a,button {
  -webkit-tap-highlight-color: transparent
}


.skip-link {
  position: fixed;
  top: 12px;
  left: 20px;
  z-index: 100;
  background: var(--t);
  color: var(--bg);
  padding: 12px 20px;
  transform: translateY(-200%)
}

.skip-link:focus {
  transform: none
}

.nojs .ln {
  transform: none
}

.nojs .pb {
  transform: none
}

.nojs .pd {
  opacity: 1;
  transform: none
}

body.open {
  overflow: hidden
}

#menu {
  height: 100dvh;
  overflow-y: auto;
  padding: 100px var(--p) max(32px,env(safe-area-inset-bottom));
  overscroll-behavior: contain
}

#menu a {
  width: fit-content;
  min-height: 44px
}

#menu a:last-child {
  color: var(--t2)
}

.project-visual {
  position: relative
}

.project-visual picture,.project-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.meta>* {
  min-width: 0
}

.pn {
  min-width: 0
}

.pt {
  gap: 14px
}

.geo {
  flex-shrink: 0
}

.it .ln {
  margin-bottom: 26px
}

.st .h2 {
  max-width: 9ch
}

.bey .h2 {
  font-size: clamp(50px,11vw,170px)
}

.ft .wm {
  color: var(--t)
}

.ft .wm+p {
  margin-top: 14px
}

.ct {
  flex-wrap: wrap;
  row-gap: 18px
}

.ct>a {
  min-height: 44px;
  display: inline-flex;
  align-items: center
}

.pointer-effects [data-cur] {
  cursor: none
}

.cur.on {
  will-change: transform
}

.cur {
  max-width: calc(100% - 24px)
}

.glow.tracking {
  left: 0;
  top: 0;
  will-change: transform
}

[data-delay="short"] {
  --d: .1s
}

[data-delay="medium"] {
  --d: .12s
}

[data-delay="long"] {
  --d: .2s
}

[data-delay="longer"] {
  --d: .24s
}

[data-delay="cta"] {
  --d: .4s
}

[data-delay="copy"] {
  --d: .5s
}

[data-delay="actions"] {
  --d: .75s
}

[data-delay="scroll"] {
  --d: 1s
}

.project-placeholder-1 {
  --project-gradient: radial-gradient(60% 70% at 70% 30%,#708273 0,transparent 60%),linear-gradient(135deg,#202521,#405448 70%,#111412)
}

.project-placeholder-2 {
  --project-gradient: linear-gradient(160deg,#111412,#516458 60%,#202521)
}

.project-placeholder-3 {
  --project-gradient: radial-gradient(50% 60% at 25% 70%,#516458 0,transparent 65%),linear-gradient(20deg,#080a09,#202521)
}

.project-placeholder-4 {
  --project-gradient: linear-gradient(200deg,#708273 -20%,#405448 35%,#0d100f 100%)
}

/* 16. Responsive: preserve editorial overlap without leaving the viewport */
@media (min-width:1601px) {
  .proj {
    --title-outset: min(7vw,calc(var(--p) - 16px))
  }

}

@media (min-width:861px) and (max-width:1280px) {
  .ttl {
    font-size: clamp(64px,8vw,104px)
  }

  .pn {
    padding: 24px;
    min-height: 540px
  }

  .pb h3 {
    font-size: clamp(30px,3.2vw,40px)
  }

}

@media (max-width:1024px) {
  .nav .wm img { width: 150px; }
  .proj {
    --title-outset: 16px
  }

  .ttl {
    font-size: clamp(50px,8vw,82px)
  }

}

@media (max-width:860px) {
  .nav .wm img { width: 145px; }
  .js .links,.nav .pill {
    display: none
  }

  .js .bg {
    display: block;
    min-width: 44px;
    min-height: 44px
  }

  .nojs .nav {
    flex-wrap: wrap;
    gap: 18px
  }

  .nojs .links {
    font-size: 14px;
    gap: 18px
  }

  .pg,.it,.ft {
    grid-template-columns: 1fr
  }

  .ft {
    gap: 36px
  }

  .st {
    position: static
  }

  .step {
    min-height: 0;
    padding: 26px 0
  }

  .panels {
    flex-direction: column
  }

  .pn,.pn.m {
    min-height: 380px;
    flex: none
  }

  .pb {
    transform: none
  }

  .pd {
    opacity: 1;
    transform: none
  }

  .geo {
    transform: scale(.85)
  }

  .proj,.proj.a {
    width: 100%;
    --title-outset: 0px
  }

  .ttl,.proj:nth-child(even) .ttl {
    left: 0;
    right: auto;
    text-align: left;
    bottom: -.3em;
    font-size: clamp(40px,12.5vw,80px);
    max-width: 100%
  }

  .iw {
    aspect-ratio: 4/5
  }

  .meta {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr)
  }

  .meta div:last-child {
    grid-column: 1/-1
  }

  .hb {
    flex-direction: column;
    align-items: flex-start
  }

  .sc {
    display: none
  }

  .row {
    flex-direction: column;
    gap: 8px
  }

  .row em {
    text-align: left
  }

  .ph {
    transform: none
  }

  .ft a {
    display: inline-flex;
    align-items: center;
    min-height: 44px
  }

}

@media (max-width:480px) {
  .nav .wm img { width: 135px; }
  .ct {
    gap: 14px 22px
  }

  .pn {
    padding: 26px
  }

  .bey .h2 {
    font-size: clamp(40px,11vw,53px)
  }

  .meta {
    font-size: 13px;
    gap: 14px
  }

}

@media (max-height:500px) and (max-width:860px) {
  #menu {
    justify-content: flex-start;
    font-size: clamp(32px,7vh,48px);
    padding-top: 90px;
    gap: 8px
  }

}

@media (hover:none),(pointer:coarse) {
  .iw {
    cursor: auto
  }

  .pb {
    transform: none
  }

  .pd {
    opacity: 1;
    transform: none
  }

  .cur {
    display: none
  }

}

/* 17. Reduced motion: immediate content, no looping or pointer effects */
@media (prefers-reduced-motion:reduce) {
  .geo-rotation-wrapper { animation: none; transform: none; }
  html {
    scroll-behavior: auto
  }

  *,*::before,*::after {
    animation: none!important;
    transition: none!important
  }

  .js [data-r],.js .mk>span {
    opacity: 1!important;
    transform: none!important
  }

  .js .img {
    clip-path: none
  }

  .ln,.ph {
    transform: none
  }

  .js .nav {
    opacity: 1
  }

  .cur {
    display: none
  }

  .pointer-effects [data-cur] {
    cursor: auto
  }

}

/* RKW-only Selected Work refinement; other homepage sections stay unchanged. */
.work--rkw {
  padding-top: clamp(64px, 7vw, 100px);
  padding-bottom: clamp(64px, 7vw, 100px);
}

.work--rkw > .w > .lab {
  margin-bottom: clamp(24px, 2.5vw, 36px);
}

.work--rkw .proj {
  margin-bottom: 0;
}

.work--rkw .meta {
  margin-top: clamp(32px, 4vw, 60px);
}

@media (min-width: 861px) and (max-width: 1600px) {
  .work--rkw .iw {
    aspect-ratio: 2.2 / 1;
  }

  .work--rkw .proj .ttl {
    left: auto;
    right: 6%;
    max-width: 94%;
  }
}

/* Case-study foundation only; no effect on the homepage. */
.case-page .case-intro {
  padding-top: clamp(150px, 14vw, 200px);
  padding-bottom: clamp(48px, 6vw, 80px);
  background: var(--b2);
}

.case-page h1 {
  max-width: 14ch;
  font-size: clamp(48px, 7.4vw, 110px);
  line-height: .96;
}

.case-page .case-intro .meta {
  margin-top: 40px;
}

.case-page .case-media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: clamp(40px, 5vw, 70px) 0 0;
}

.case-page .case-description {
  padding: clamp(64px, 8vw, 110px) 0;
}

.case-page .case-description p {
  max-width: 52ch;
  margin-top: 28px;
  color: var(--t2);
}

.case-page .case-link-note {
  font-size: 14px;
  color: var(--dm);
}

@media (max-width: 480px) {
  .case-page .case-media { aspect-ratio: 4 / 3; }
}