@font-face{
  font-family:"D-DIN Condensed";
  src:url("https://cdn.jsdelivr.net/gh/amcchord/datto-d-din@main/D-DINCondensed.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

*{
  box-sizing:border-box;
}

:root{
  --page-x: clamp(26px, 4.5vw, 72px);
}

html{
  scroll-behavior:smooth;
}

html,
body{
  margin:0;
  min-height:100%;
  background:#050505;
}

body{
  color:#f3f3ef;
  font-family:"IBM Plex Sans", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

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

img,
video{
  display:block;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:fixed;
  z-index:20;
  top:0;
  left:0;

  width:100%;
  height:80px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 var(--page-x);

  background:rgba(5,5,5,var(--header-alpha, 0));
  border-bottom:1px solid rgba(255,255,255,var(--header-line-alpha, 0));

  transition:
    height .42s cubic-bezier(.22,.61,.36,1),
    background-color .12s linear,
    border-color .12s linear;
}

.brand{
  width:118px;
  height:24px;
  display:flex;
  align-items:center;
  opacity:.88;
}

.brand-reveal{
  display:block;
  width:17px;
  overflow:hidden;

  transition:
    width .62s cubic-bezier(.22,.61,.36,1);
}

.brand-reveal img{
  width:118px;
  height:auto;
  max-width:none;
  display:block;
}

body.brand-expanded .brand-reveal{
  width:118px;
}

body.brand-expanded .site-header{
  height:68px;
}

.header-right{
  display:flex;
  align-items:center;
  gap:26px;
}

.nav{
  display:flex;
  align-items:center;
  gap:26px;
}

.nav a{
  font-size:14px;
  font-weight:400;
  line-height:1;

  color:rgba(243,243,239,.76);

  transition:color .2s ease;
}

.nav a:hover{
  color:#fff;
}

.header-socials{
  display:flex;
  align-items:center;
  gap:15px;

  padding-left:24px;

  border-left:1px solid rgba(255,255,255,.24);
}

.header-socials a{
  width:19px;
  height:19px;

  opacity:.74;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.header-socials a:hover{
  opacity:1;
  transform:translateY(-1px);
}

.header-socials img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:invert(1);
}


/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;

  width:100%;
  min-height:100svh;

  overflow:hidden;

  display:flex;
  align-items:flex-end;

  background:#050505;
}

.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#050505;
}

.hero-layer{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  opacity:0;

  transition:opacity .38s ease;
  background:#050505;
}

.hero-layer.is-visible{
  opacity:1;
}

/* Dedicated crop for the vertical robotic-arm clip.
   Favors the upper portion of the source so the hand/wrist remain visible. */
.hero-layer.hero-robotic-arm{
  object-position:center 28%;
}

.hero-shade{
  display:none;
}

.hero-scroll-fade{
  position:absolute;
  inset:0;
  z-index:1;
  background:#050505;
  opacity:var(--hero-fade, 0);
  pointer-events:none;
}

.hero-copy{
  opacity:var(--hero-copy-opacity, 1);
  transform:translateY(var(--hero-copy-shift, 0px));
  transition:
    opacity .08s linear,
    transform .08s linear;
}

.hero-copy{
  position:relative;
  z-index:2;

  width:min(760px, 89vw);

  margin:
    0
    0
    clamp(42px, 6.5vh, 76px)
    var(--page-x);
}

.hero-logo{
  width:min(540px, 74vw);
  height:auto;

  margin:
    0
    0
    24px
    -7px;
}

.payoff{
  margin:0 0 12px;

  font-size:clamp(24px, 2.15vw, 35px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.018em;
}

.hero-description{
  width:min(650px, 88vw);
  margin:0;

  font-size:clamp(14px, 1.1vw, 17px);
  font-weight:400;
  line-height:1.55;

  color:rgba(243,243,239,.76);
}


/* =========================================================
   WORK SECTIONS
========================================================= */

.work-section{
  min-height:auto;

  padding:
    clamp(90px, 12vh, 150px)
    var(--page-x)
    clamp(110px, 15vh, 180px);

  background:#050505;
}

.work-section + .work-section{
  border-top:1px solid rgba(255,255,255,.055);
}

.section-heading{
  width:100%;
  margin-bottom:clamp(56px, 8vh, 96px);
}

.section-heading-line{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;

  padding-bottom:16px;

  border-bottom:1px solid rgba(255,255,255,.11);
}

.section-heading h2{
  margin:0;

  font-family:"D-DIN Condensed", "Arial Narrow", sans-serif;
  font-size:clamp(36px, 3.45vw, 54px);
  font-weight:400;
  line-height:.88;

  text-transform:uppercase;
  letter-spacing:.055em;
}

.section-index{
  padding-bottom:3px;

  font-size:11px;
  font-weight:500;
  letter-spacing:.10em;

  color:rgba(243,243,239,.34);
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(24px, 2.6vw, 42px);

  width:100%;
  max-width:1500px;
  margin:0 auto;
}

.work-grid--3 .work-card--featured{
  grid-column:1 / span 2;
}

.work-card{
  min-width:0;
}

.work-media{
  position:relative;

  width:100%;
  aspect-ratio:4 / 3;

  overflow:hidden;
  background:#0a0a0a;
}

.work-media::after{
  content:"";

  position:absolute;
  inset:auto 0 0 0;
  z-index:1;

  height:40%;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.22) 52%,
    rgba(0,0,0,0) 100%
  );

  pointer-events:none;
}

.work-media video,
.work-media img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.work-media .media-arm{
  object-position:center 31%;
}

.work-media .media-hand{
  object-position:center 48%;
}

.work-card:hover .work-media video,
.work-card:hover .work-media img{
  transform:scale(1.012);
}

.work-media--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #101010 0%, #090909 100%);
}

.placeholder-copy{
  position:relative;
  z-index:2;

  text-align:center;
}

.placeholder-copy p{
  margin:0 0 8px;

  font-size:clamp(26px, 2vw, 36px);
  line-height:1;
  letter-spacing:-.03em;
}

.placeholder-copy span{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;

  color:rgba(243,243,239,.34);
}

.media-tags{
  position:absolute;
  left:clamp(16px, 1.5vw, 24px);
  right:clamp(16px, 1.5vw, 24px);
  bottom:clamp(15px, 1.5vw, 23px);
  z-index:2;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 14px;

  font-size:clamp(14px, 1.02vw, 17px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:.025em;
  text-transform:uppercase;

  color:rgba(255,255,255,.92);
}

.media-tags span{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.media-tags span:not(:last-child)::after{
  content:"/";
  margin-left:14px;

  font-weight:400;
  color:rgba(255,255,255,.34);
}

.work-meta{
  margin-top:15px;
}

.project-title{
  margin:0;

  font-size:clamp(17px, 1.2vw, 21px);
  font-weight:500;
  line-height:1.15;

  letter-spacing:-.018em;
}



/* =========================================================
   CONCEPT — LARGE EDITORIAL ROW
========================================================= */

.concept-row{
  display:flex;
  align-items:flex-start;
  gap:clamp(18px, 1.5vw, 28px);

  width:100%;
  max-width:none;
  margin:0;

  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;

  padding:14px var(--page-x) 28px 2px;

  scrollbar-width:none;
}

.concept-row::-webkit-scrollbar{
  display:none;
}

.concept-card{
  position:relative;
  flex:0 0 calc((100vw - (2 * var(--page-x)) - clamp(36px, 3vw, 56px)) / 3);
  min-width:0;
}

.concept-media{
  position:relative;
  width:100%;
  height:clamp(760px, 94vh, 1120px);
  overflow:hidden;
  background:#0a0a0a;
}

.concept-media video,
.concept-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.concept-arm{
  object-position:center 31%;
}

.concept-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #101010 0%, #090909 100%);
}


/* =========================================================
   3D VISUALIZATION — LARGE EDITORIAL ROW
========================================================= */

.viz-strip{
  width:100%;
  max-width:100%;

  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;

  padding:14px var(--page-x) 28px 2px;

  scrollbar-width:none;
}

.viz-strip::-webkit-scrollbar{
  display:none;
}

.viz-track{
  display:flex;
  align-items:flex-start;
  gap:clamp(18px, 1.5vw, 28px);

  width:max-content;
  min-width:100%;
}

.viz-card{
  position:relative;
  flex:0 0 calc((100vw - (2 * var(--page-x)) - clamp(36px, 3vw, 56px)) / 3);
  min-width:0;
}

.viz-media{
  position:relative;
  width:100%;
  height:clamp(760px, 94vh, 1120px);
  overflow:hidden;
  background:#0a0a0a;
}

.viz-media img,
.viz-media video{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

.viz-media .media-tags{
  left:18px;
  right:18px;
  bottom:17px;
}


/* =========================================================
   SERVICES
========================================================= */

.services-section{
  padding:
    clamp(95px, 13vh, 160px)
    var(--page-x)
    clamp(105px, 14vh, 170px);

  background:#0a0a0a;
  color:#f3f3ef;

  border-top:1px solid rgba(255,255,255,.08);
}

.services-heading,
.services-grid{
  width:100%;
  max-width:1680px;
  margin-left:auto;
  margin-right:auto;
}

.services-heading{
  margin-bottom:clamp(52px, 7vh, 84px);
  padding-bottom:16px;

  border-bottom:1px solid rgba(255,255,255,.12);
}

.services-kicker{
  margin:0;

  font-family:"D-DIN Condensed", "Arial Narrow", sans-serif;
  font-size:clamp(36px, 3.45vw, 54px);
  font-weight:400;
  line-height:.88;

  text-transform:uppercase;
  letter-spacing:.055em;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(24px, 3vw, 52px);
}

.service-column{
  min-width:0;
}

.service-head{
  min-height:132px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:13px;

  padding-bottom:24px;

  border-bottom:1px solid rgba(255,255,255,.12);
}

.service-index{
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.12em;

  color:rgba(243,243,239,.34);
}

.service-head h2{
  max-width:390px;

  margin:0;

  font-size:clamp(20px, 1.55vw, 27px);
  font-weight:500;
  line-height:1.08;

  letter-spacing:-.025em;
}

.service-column ul{
  list-style:none;
  margin:0;
  padding:22px 0 0;
}

.service-column li{
  padding:9px 0;

  font-size:clamp(14px, 1vw, 17px);
  font-weight:400;
  line-height:1.3;

  color:rgba(243,243,239,.62);
}



@media (max-width:1150px) and (min-width:761px){
  .services-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:clamp(34px, 5vw, 64px);
    row-gap:64px;
  }

  .service-head{
    min-height:112px;
  }
}




/* =========================================================
   WORKS — FIXED HEIGHT / VARIABLE WIDTH GRID
========================================================= */

.works-archive-section{
  padding:
    clamp(88px, 11vh, 138px)
    clamp(18px, 2.1vw, 36px)
    clamp(100px, 13vh, 154px);

  background:#050505;
  color:#f3f3ef;

  border-top:1px solid rgba(255,255,255,.08);
}

.works-archive-heading,
.works-archive-grid{
  width:100%;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

.works-archive-heading{
  margin-bottom:clamp(38px, 5vh, 58px);
}

.works-archive-heading-line{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;

  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.11);
}

.works-archive-heading h2{
  margin:0;

  font-family:"D-DIN Condensed", "Arial Narrow", sans-serif;
  font-size:clamp(36px, 3.45vw, 54px);
  font-weight:400;
  line-height:.88;

  text-transform:uppercase;
  letter-spacing:.055em;
}

.works-archive-intro{
  max-width:780px;
  margin:18px 0 0;

  font-size:clamp(15px, 1.05vw, 18px);
  line-height:1.55;
  color:rgba(243,243,239,.62);
}

.works-archive-grid{
  display:grid;
  grid-template-columns:repeat(24, minmax(0, 1fr));
  gap:
    clamp(28px, 3.2vh, 46px)
    clamp(12px, 1vw, 20px);

  align-items:start;
}

/* Row 1: Alpha / Mecanum / Capsule */
.archive-card--alpha{ grid-column:span 10; }
.archive-card--mecanum-image{ grid-column:span 8; }
.archive-card--capsule{ grid-column:span 6; }

/* Row 2: slightly narrower Mecanum / wider Resolza */
.archive-card--mecanum-video{ grid-column:span 9; }
.archive-card--resolza{ grid-column:span 15; }

.archive-card{
  min-width:0;
}

.archive-media{
  position:relative;
  width:100%;
  height:clamp(280px, 25vw, 430px);
  overflow:hidden;
  background:#0a0a0a;
}

.archive-media::after{
  content:"";

  position:absolute;
  inset:auto 0 0 0;
  z-index:1;

  height:40%;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.20) 52%,
    rgba(0,0,0,0) 100%
  );

  pointer-events:none;
}

.archive-media img,
.archive-media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

@media (max-width:1180px){
  .works-archive-section{
    padding-left:var(--page-x);
    padding-right:var(--page-x);
  }

  .works-archive-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .archive-card--alpha,
  .archive-card--mecanum-image,
  .archive-card--capsule,
  .archive-card--mecanum-video,
  .archive-card--resolza{
    grid-column:auto;
  }

  .archive-card--resolza{
    grid-column:1 / -1;
  }

  .archive-media{
    height:clamp(280px, 38vw, 420px);
  }
}

@media (max-width:760px){
  .works-archive-section{
    padding:
      82px
      20px
      110px;
  }

  .works-archive-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  .archive-card--alpha,
  .archive-card--mecanum-image,
  .archive-card--capsule,
  .archive-card--mecanum-video,
  .archive-card--resolza{
    grid-column:auto;
  }

  .archive-media{
    height:min(68vw, 360px);
  }
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section{
  padding:
    clamp(90px, 12vh, 150px)
    var(--page-x);

  background:#171717;
  color:#f3f3ef;

  border-top:1px solid rgba(255,255,255,.12);
}

.contact-stage{
  width:100%;
  max-width:1680px;
  margin:0 auto;
}

.contact-stage--simple{
  display:grid;
  grid-template-columns:minmax(300px, .9fr) minmax(440px, 1.1fr);
  gap:clamp(70px, 9vw, 150px);
  align-items:start;
}

.contact-kicker{
  margin:0 0 28px;

  font-family:"D-DIN Condensed", "Arial Narrow", sans-serif;
  font-size:15px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.10em;

  color:rgba(243,243,239,.48);
}

.contact-intro h2{
  margin:0;

  font-size:clamp(42px, 5.4vw, 82px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.045em;
}

.contact-copy{
  max-width:520px;
  margin:28px 0 0;

  font-size:clamp(16px, 1.3vw, 21px);
  line-height:1.5;

  color:rgba(243,243,239,.62);
}

.contact-links{
  border-top:1px solid rgba(255,255,255,.22);
}

.contact-link{
  min-height:62px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:17px 0;

  border-bottom:1px solid rgba(255,255,255,.14);

  font-size:clamp(15px, 1.05vw, 18px);
  color:rgba(243,243,239,.72);

  transition:color .2s ease, border-color .2s ease;
}

.contact-link:hover{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.38);
}

.contact-link--email strong{
  margin-left:auto;

  font:inherit;
  font-weight:500;
  color:rgba(243,243,239,.96);
}

@media (max-width:760px){
  .contact-stage--simple{
    grid-template-columns:1fr;
    gap:52px;
  }

  .contact-link--email{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .contact-link--email strong{
    width:100%;
    margin-left:0;
    order:3;
  }
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  padding:
    26px
    var(--page-x)
    30px;

  background:#171717;
  color:#f3f3ef;
}

.footer-bottom{
  max-width:1680px;
  margin:0 auto;

  padding-top:24px;

  border-top:1px solid rgba(255,255,255,.11);

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:34px;

  font-size:clamp(13px, .85vw, 15px);
  line-height:1.45;

  color:rgba(243,243,239,.58);
}

.footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}

.footer-socials{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 20px;
}

.footer-legal{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px 22px;
}

.footer-meta a,
.footer-socials a,
.footer-legal a{
  transition:color .2s ease;
}

.footer-meta a:hover,
.footer-socials a:hover,
.footer-legal a:hover{
  color:#fff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:760px){

  :root{
    --page-x:22px;
  }

  .site-header{
    height:68px;
  }

  .brand{
    width:96px;
    height:20px;
  }

  .brand-reveal{
    width:14px;
  }

  .brand-reveal img{
    width:96px;
  }

  body.brand-expanded .brand-reveal{
    width:96px;
  }

  body.brand-expanded .site-header{
    height:62px;
  }

  .header-right{
    gap:13px;
  }

  .nav{
    gap:15px;
  }

  .nav a{
    font-size:12px;
  }

  .header-socials{
    gap:10px;
    padding-left:13px;
  }

  .header-socials a{
    width:17px;
    height:17px;
  }

  .hero-copy{
    width:calc(100% - (var(--page-x) * 2));
    margin:0 var(--page-x) 40px;
  }

  .hero-logo{
    width:min(390px, 82vw);
    margin-left:-5px;
    margin-bottom:18px;
  }

  .payoff{
    font-size:clamp(23px, 7.2vw, 31px);
  }

  .hero-description{
    width:min(500px, 94%);
    font-size:13px;
  }

  .work-section{
    min-height:auto;
    padding-top:84px;
    padding-bottom:96px;
  }

  .section-heading{
    margin-bottom:36px;
  }

  .section-heading-line{
    padding-bottom:13px;
  }

  .section-heading h2{
    font-size:clamp(38px, 11.5vw, 52px);
    letter-spacing:.045em;
  }

  .work-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .work-grid--3 .work-card--featured{
    grid-column:auto;
  }

  .work-media{
    aspect-ratio:4 / 3;
  }

  .placeholder-copy p{
    font-size:28px;
  }

  .media-tags{
    left:15px;
    right:15px;
    bottom:14px;
    gap:6px 11px;
    font-size:13px;
    letter-spacing:.02em;
  }

  .media-tags span:not(:last-child)::after{
    margin-left:11px;
  }

  .work-meta{
    margin-top:12px;
  }

  .project-title{
    font-size:20px;
  }

  .services-section{
    padding-top:84px;
    padding-bottom:96px;
  }

  .services-heading{
    margin-bottom:38px;
    padding-bottom:13px;
  }

  .services-kicker{
    font-size:clamp(38px, 11.5vw, 52px);
    letter-spacing:.045em;
  }

  .services-grid{
    grid-template-columns:1fr;
    gap:54px;
  }

  .service-head{
    min-height:0;
    gap:10px;
    padding-bottom:18px;
  }

  .service-head h2{
    max-width:none;
    font-size:22px;
  }

  .service-column ul{
    padding-top:16px;
  }

  .service-column li{
    padding:7px 0;
    font-size:15px;
  }

  .expertise-section{
    padding-top:50px;
    padding-bottom:58px;
  }

  .expertise-inner{
    grid-template-columns:1fr;
    gap:25px;
  }

  .expertise-title{
    font-size:30px;
  }

  .expertise-list{
    font-size:14px;
    gap:10px 0;
  }

  .expertise-list span:not(:last-child)::after{
    margin:0 11px;
  }

  .contact-section{
    padding-top:78px;
    padding-bottom:82px;
  }

  .contact-stage{
    grid-template-columns:1fr;
    gap:56px;
  }

  .contact-intro h2{
    font-size:clamp(40px, 12vw, 58px);
  }

  .contact-email{
    margin-top:26px;
    font-size:17px;
  }

  .contact-form{
    grid-template-columns:1fr;
    gap:28px;
  }

  .message-field,
  .contact-submit{
    grid-column:1;
  }

  .site-footer{
    padding-top:22px;
    padding-bottom:28px;
  }

  .footer-bottom{
    grid-template-columns:1fr;
    gap:22px;

    font-size:13px;
  }

  .footer-meta,
  .footer-socials,
  .footer-legal{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .footer-socials{
    gap:8px 18px;
  }

  .footer-legal{
    gap:8px 18px;
  }

}


/* Preserve native framing in the editorial rows. */
.concept-media::after,
.viz-media::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  z-index:1;
  height:38%;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.16) 55%,
    rgba(0,0,0,0) 100%
  );
  pointer-events:none;
}

.concept-placeholder::after{
  display:none;
}

/* Responsive editorial rows: two cards on tablet, one on mobile. */
@media (max-width:1100px){
  .concept-card,
  .viz-card{
    flex-basis:calc((100vw - (2 * var(--page-x)) - 18px) / 2);
  }

  .concept-media,
  .viz-media{
    height:clamp(660px, 84vh, 960px);
  }
}

@media (max-width:760px){
  .concept-row,
  .viz-strip{
    padding:6px 20px 14px 0;
  }

  .concept-row,
  .viz-track{
    gap:14px;
  }

  .concept-card,
  .viz-card{
    flex-basis:min(84vw, 430px);
  }

  .concept-media,
  .viz-media{
    height:min(118vw, 660px);
  }

  .viz-media .media-tags{
    left:14px;
    right:14px;
    bottom:13px;
  }
}

/* =========================================================
   DFM — MATCH LARGE EDITORIAL ROWS
========================================================= */
#dfm .work-grid--3{
  display:flex;
  align-items:flex-start;
  gap:clamp(18px, 1.5vw, 28px);

  width:100%;
  max-width:none;
  margin:0;

  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;

  padding:14px var(--page-x) 28px 2px;
  scrollbar-width:none;
}

#dfm .work-grid--3::-webkit-scrollbar{
  display:none;
}

#dfm .work-grid--3 .work-card,
#dfm .work-grid--3 .work-card--featured{
  flex:0 0 calc((100vw - (2 * var(--page-x)) - clamp(36px, 3vw, 56px)) / 3);
  min-width:0;
}

#dfm .work-grid--3 .work-card--featured{
  grid-column:auto;
}

#dfm .work-media{
  width:100%;
  height:clamp(760px, 94vh, 1120px);
  aspect-ratio:auto;
}

#dfm .work-media video,
#dfm .work-media img{
  transition:none;
  transform:none;
}

#dfm .work-card:hover .work-media video,
#dfm .work-card:hover .work-media img{
  transform:none;
}

@media (max-width:1100px){
  #dfm .work-grid--3 .work-card,
  #dfm .work-grid--3 .work-card--featured{
    flex-basis:calc((100vw - (2 * var(--page-x)) - 18px) / 2);
  }

  #dfm .work-media{
    height:clamp(660px, 84vh, 960px);
  }
}

@media (max-width:760px){
  #dfm .work-grid--3{
    gap:14px;
    padding:6px 20px 14px 0;
  }

  #dfm .work-grid--3 .work-card,
  #dfm .work-grid--3 .work-card--featured{
    flex-basis:min(84vw, 430px);
  }

  #dfm .work-media{
    height:min(118vw, 660px);
  }
}


/* =========================================================
   V25 — FIXED COLUMN MASKS + INTERNAL HORIZONTAL TRACKS
   The three columns stay fixed. Each media row is clipped to
   its own column while the project cards move behind the mask.
========================================================= */

.work-columns{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start;
  gap:clamp(24px, 2.2vw, 42px);
  width:100%;
  padding:
    clamp(90px, 12vh, 150px)
    var(--page-x)
    clamp(110px, 15vh, 180px);
  background:#050505;
}

.work-columns .work-section{
  min-width:0;
  padding:0;
  background:transparent;
  overflow:hidden;
}

.work-columns .work-section + .work-section{
  border-top:0;
}

.work-columns .section-heading{
  margin-bottom:clamp(34px, 4.5vh, 54px);
}

.work-columns .section-heading-line{
  align-items:flex-end;
  min-height:62px;
  padding-bottom:14px;
}

.work-columns .section-heading h2{
  font-size:clamp(28px, 2.25vw, 42px);
  line-height:.92;
}

.work-columns .section-index{
  flex:0 0 auto;
}

/* The column itself is the crop/mask. */
.work-columns .concept-row,
.work-columns .viz-strip,
.work-columns #dfm .work-grid--3{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
}

.work-columns .concept-row::-webkit-scrollbar,
.work-columns .viz-strip::-webkit-scrollbar,
.work-columns #dfm .work-grid--3::-webkit-scrollbar{
  display:none;
}

/* Tracks move inside the fixed crop. */
.work-columns .concept-track,
.work-columns .viz-track,
.work-columns .dfm-track{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:0;
  width:max-content;
  min-width:100%;
  will-change:transform;
}

/* One project always occupies exactly one column-width viewport. */
.work-columns .concept-card,
.work-columns .viz-card,
.work-columns #dfm .work-card,
.work-columns #dfm .work-card--featured{
  flex:0 0 var(--strip-slide-width, 100%);
  width:var(--strip-slide-width, 100%);
  min-width:0;
  padding-right:0;
}

.work-columns #dfm .work-card--featured{
  grid-column:auto;
}

/* Stable portrait crop for every slide. */
.work-columns .concept-media,
.work-columns .viz-media,
.work-columns #dfm .work-media{
  width:100%;
  height:auto;
  aspect-ratio:3 / 4;
  overflow:hidden;
}

.work-columns .concept-media img,
.work-columns .concept-media video,
.work-columns .viz-media img,
.work-columns .viz-media video,
.work-columns #dfm .work-media img,
.work-columns #dfm .work-media video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Keep metadata inside the same slide width. */
.work-columns .work-meta{
  padding-right:0;
}

@media (max-width:980px){
  .work-columns{
    grid-template-columns:1fr;
    gap:clamp(90px, 12vh, 130px);
  }

  .work-columns .section-heading h2{
    font-size:clamp(34px, 6vw, 52px);
  }

  .work-columns .concept-media,
  .work-columns .viz-media,
  .work-columns #dfm .work-media{
    aspect-ratio:4 / 5;
  }
}

@media (max-width:760px){
  .work-columns{
    padding:76px 20px 110px;
    gap:92px;
  }

  .work-columns .section-heading{
    margin-bottom:34px;
  }

  .work-columns .section-heading-line{
    min-height:0;
  }

  .work-columns .section-heading h2{
    font-size:clamp(31px, 9vw, 42px);
  }

  .work-columns .concept-media,
  .work-columns .viz-media,
  .work-columns #dfm .work-media{
    aspect-ratio:4 / 5;
  }
}


/* =========================================================
   V27 — STATIC WORK SECTIONS
   No automatic motion, hover motion, or image zoom.
   Horizontal strips remain available for manual navigation.
========================================================= */
.work-columns .concept-media img,
.work-columns .concept-media video,
.work-columns .viz-media img,
.work-columns .viz-media video,
.work-columns #dfm .work-media img,
.work-columns #dfm .work-media video{
  transition:none !important;
  transform:none !important;
}

.work-columns .work-card:hover .work-media img,
.work-columns .work-card:hover .work-media video,
.work-columns .concept-card:hover .concept-media img,
.work-columns .concept-card:hover .concept-media video,
.work-columns .viz-card:hover .viz-media img,
.work-columns .viz-card:hover .viz-media video{
  transform:none !important;
}

.work-columns .concept-track,
.work-columns .viz-track,
.work-columns .dfm-track{
  transform:none !important;
  transition:none !important;
  will-change:auto !important;
}


/* =========================================================
   V27.1 — STATIC STRIP WIDTH FIX
   Each slide is exactly the width of its own column.
   No JavaScript sizing is required.
========================================================= */
.work-columns .concept-track,
.work-columns .viz-track,
.work-columns .dfm-track{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:0;

  width:100% !important;
  min-width:100% !important;

  transform:none !important;
  transition:none !important;
}

.work-columns .concept-card,
.work-columns .viz-card,
.work-columns #dfm .work-card,
.work-columns #dfm .work-card--featured{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  flex:none !important;
}

.work-columns .concept-media,
.work-columns .viz-media,
.work-columns #dfm .work-media{
  width:100% !important;
  height:auto !important;
  aspect-ratio:3 / 4 !important;
}

@media (max-width:980px){
  .work-columns .concept-media,
  .work-columns .viz-media,
  .work-columns #dfm .work-media{
    aspect-ratio:4 / 5 !important;
  }
}


/* =========================================================
   V31 — ABOUT + MINIMAL FOOTER
========================================================= */

.contact-copy--secondary{
  margin-top:18px;
  color:rgba(243,243,239,.48);
}

.contact-links-wrap{
  min-width:0;
}

.contact-kicker--links{
  margin-bottom:22px;
}

.footer-bottom--minimal{
  grid-template-columns:1fr auto;
  align-items:center;
}

.footer-bottom--minimal .footer-meta{
  gap:8px 18px;
}

.footer-bottom--minimal .footer-legal{
  justify-self:end;
}

@media (max-width:760px){
  .footer-bottom--minimal{
    grid-template-columns:1fr;
    gap:18px;
  }

  .footer-bottom--minimal .footer-legal{
    justify-self:start;
  }
}


/* =========================================================
   V36 — CONTENT TAG CLEANUP
========================================================= */

/* Project names are intentionally hidden:
   cards are identified only through in-image metadata. */
.work-meta{
  display:none;
}

.media-tags{
  gap:5px 10px;

  font-size:clamp(11px, .78vw, 13px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:.045em;
}

.media-tags span:not(:last-child)::after{
  margin-left:10px;
}





/* =========================================================
   V39 — STRONGER MACRO CROP FIXES
========================================================= */

/* Main editorial windows below the landing:
   make them visibly taller across breakpoints. */
@media (min-width:1181px){
  .concept-media,
  .viz-media,
  #dfm .work-media{
    height:clamp(860px, 98vh, 1240px) !important;
  }
}

@media (min-width:761px) and (max-width:1180px){
  .concept-media,
  .viz-media,
  #dfm .work-media{
    height:clamp(720px, 90vh, 1040px) !important;
  }
}

@media (max-width:760px){
  .concept-media,
  .viz-media,
  #dfm .work-media{
    height:min(132vw, 760px) !important;
  }
}

/* Reframe the robotic arm so the upper portion isn't clipped. */
.concept-arm{
  object-position:center 18% !important;
}

/* Slightly gentler framing for the two still images in the first rows. */
.concept-media img,
.viz-media img{
  object-position:center 42%;
}

/* DFM hero stays a little less aggressively cropped. */
#dfm .work-media video,
#dfm .work-media img{
  object-position:center 46%;
}

/* Works Mecanum is portrait inside a landscape cell:
   reduce it more decisively so more of the source remains visible. */
.archive-card--mecanum-video .archive-media{
  display:flex;
  align-items:center;
  justify-content:center;
}

.archive-card--mecanum-video .archive-media video{
  width:76% !important;
  height:100%;
  object-fit:cover;
  object-position:center;
  flex:0 0 auto;
}

@media (max-width:980px){
  .archive-card--mecanum-video .archive-media video{
    width:84% !important;
  }
}

@media (max-width:760px){
  .archive-card--mecanum-video .archive-media video{
    width:100% !important;
  }
}



/* =========================================================
   V40 — MOBILE WORKS ORDER + MEDIA LIGHTBOX
========================================================= */

/* Make media cards clearly interactive. */
.concept-card,
.viz-card,
.work-card,
.archive-card{
  cursor:pointer;
}

/* Works ordering on small screens:
   place Resolza directly under the Mecanum still. */
@media (max-width:760px){
  .archive-card--alpha{ order:1; }
  .archive-card--mecanum-image{ order:2; }
  .archive-card--resolza{ order:3; }
  .archive-card--capsule{ order:4; }
  .archive-card--mecanum-video{ order:5; }
}

/* Fullscreen media preview */
body.lightbox-open{
  overflow:hidden;
}

.media-lightbox{
  position:fixed;
  inset:0;
  z-index:1200;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:opacity .18s ease, visibility .18s ease;
}

.media-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.media-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.88);
}

.media-lightbox__dialog{
  position:relative;
  z-index:1;

  width:min(94vw, 1600px);
  max-height:92vh;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;

  padding:18px;
}

.media-lightbox__close{
  position:absolute;
  top:8px;
  right:8px;
  z-index:3;

  width:42px;
  height:42px;
  border:0;
  border-radius:999px;

  display:grid;
  place-items:center;

  background:rgba(18,18,18,.82);
  color:#f3f3ef;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.media-lightbox__stage{
  width:100%;
  max-height:calc(92vh - 74px);

  display:flex;
  align-items:center;
  justify-content:center;
}

.media-lightbox__stage img,
.media-lightbox__stage video{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:calc(92vh - 110px);

  object-fit:contain;
  background:#0a0a0a;
}

.media-lightbox__stage video{
  width:100%;
}

.media-lightbox__caption{
  min-height:18px;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 10px;

  font-size:clamp(11px, .78vw, 13px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:.045em;
  text-transform:uppercase;

  color:rgba(243,243,239,.78);
}

.media-lightbox__caption span{
  display:inline-flex;
  align-items:center;
}

.media-lightbox__caption span:not(:last-child)::after{
  content:"/";
  margin-left:10px;
  color:rgba(243,243,239,.44);
}

@media (max-width:760px){
  .media-lightbox__dialog{
    width:100vw;
    max-height:100vh;
    padding:14px 14px 20px;
  }

  .media-lightbox__stage{
    max-height:calc(100vh - 86px);
  }

  .media-lightbox__stage img,
  .media-lightbox__stage video{
    max-height:calc(100vh - 126px);
  }

  .media-lightbox__close{
    top:6px;
    right:6px;
  }
}



/* =========================================================
   V41 — ABOUT COPY + CONTACT ICONS
========================================================= */

.contact-copy--lead{
  margin-top:0;
  color:rgba(243,243,239,.86);
  font-size:clamp(18px, 1.45vw, 23px);
}

.about-intro .contact-copy + .contact-copy{
  margin-top:22px;
}

.contact-link--social{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
}

.contact-link__platform{
  width:24px;
  height:24px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-link__platform img{
  width:20px;
  height:20px;
  display:block;
  object-fit:contain;
  opacity:.86;
}

.contact-link__url{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:rgba(243,243,239,.76);
}

.contact-link--social:hover .contact-link__platform img{
  opacity:1;
}

@media (max-width:760px){
  .contact-link--social{
    grid-template-columns:28px minmax(0, 1fr) auto;
    gap:12px;
  }

  .contact-link__platform img{
    width:18px;
    height:18px;
  }

  .contact-link__url{
    font-size:14px;
  }
}



/* =========================================================
   V42 — MINIMAL ABOUT + CENTERED SOCIAL FOOTER
========================================================= */

/* About now stands on its own. */
.contact-stage--simple{
  display:block;
}

.about-intro{
  max-width:980px;
}

/* Minimal three-part footer. */
.footer-bottom--social-center{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.footer-brandline{
  justify-self:start;
}

.footer-social-icons{
  justify-self:center;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}

.footer-social-icons a{
  width:24px;
  height:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:.78;
  transition:opacity .18s ease;
}

.footer-social-icons a:hover{
  opacity:1;
}

.footer-social-icons img{
  display:block;
  width:19px;
  height:19px;

  object-fit:contain;

  /* Make dark SVG assets read as light icons on the dark footer. */
  filter:brightness(0) invert(1);
}

.footer-back{
  justify-self:end;
}

@media (max-width:760px){
  .footer-bottom--social-center{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand back"
      "social social";
    row-gap:22px;
  }

  .footer-brandline{
    grid-area:brand;
  }

  .footer-back{
    grid-area:back;
  }

  .footer-social-icons{
    grid-area:social;
    justify-self:center;
  }
}



/* =========================================================
   V44 — WORKS INTRO REMOVED
========================================================= */

.works-archive-intro{
  display:none;
}

.works-archive-heading{
  margin-bottom:clamp(28px, 4vh, 44px);
}