@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{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.15) 42%,
      rgba(0,0,0,.05) 100%
    );

  pointer-events: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:100svh;

  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-carousel{
  --carousel-gap:clamp(24px, 2.7vw, 46px);

  position:relative;

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

  overflow:hidden;

  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to right,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

.work-track{
  display:flex;
  width:max-content;
  will-change:transform;
}

.work-group{
  display:flex;
  gap:var(--carousel-gap);
  padding-right:var(--carousel-gap);
}

.work-card{
  flex:0 0 calc(
    (min(1500px, calc(100vw - (var(--page-x) * 2))) - var(--carousel-gap)) / 2
  );

  min-width:0;
}

/* Shared crop system:
   every project occupies the same visual frame, so scale and rhythm
   remain stable even when the original source ratios differ. */
.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);
}

/* Asset-specific framing within the same 4:3 crop. */
.work-media .media-arm{
  object-position:center 31%;
}

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

.work-media .media-silver{
  object-position:center 50%;
}

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

.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;
}


/* =========================================================
   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(3, minmax(0, 1fr));
  gap:clamp(32px, 4.5vw, 74px);
}

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

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

  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);
}


/* =========================================================
   EXPERTISE
========================================================= */

.expertise-section{
  padding:
    clamp(54px, 7vh, 82px)
    var(--page-x)
    clamp(60px, 8vh, 94px);

  background:#0a0a0a;
  color:#f3f3ef;

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

.expertise-inner{
  width:100%;
  max-width:1680px;
  margin:0 auto;

  display:grid;
  grid-template-columns:minmax(170px, .42fr) 2.58fr;
  align-items:start;
  gap:clamp(36px, 5vw, 86px);
}

.expertise-title{
  margin:0;

  font-family:"D-DIN Condensed", "Arial Narrow", sans-serif;
  font-size:clamp(25px, 2.1vw, 34px);
  font-weight:400;
  line-height:.95;

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

.expertise-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px 0;

  font-size:clamp(14px, 1.02vw, 17px);
  line-height:1.35;

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

.expertise-list span{
  white-space:nowrap;
}

.expertise-list span:not(:last-child)::after{
  content:"/";
  margin:0 15px;

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


/* =========================================================
   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{
  max-width:1680px;
  margin:0 auto;

  display:grid;
  grid-template-columns:minmax(320px, .9fr) minmax(520px, 1.35fr);
  gap:clamp(70px, 9vw, 150px);
}

.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-email{
  display:inline-block;

  margin-top:32px;

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

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

  border-bottom:1px solid rgba(255,255,255,.30);
  padding-bottom:5px;

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

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

.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(24px, 3vw, 44px);
  row-gap:34px;

  align-self:start;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact-form label span{
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;

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

.contact-form input,
.contact-form textarea{
  width:100%;

  padding:8px 0 13px;

  border:0;
  border-bottom:1px solid rgba(255,255,255,.28);
  border-radius:0;

  background:transparent;
  color:#f3f3ef;

  font:inherit;
  font-size:16px;

  outline:none;
  resize:none;

  transition:border-color .2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-bottom-color:rgba(255,255,255,.78);
}

.message-field{
  grid-column:1 / -1;
}

.contact-submit{
  grid-column:1 / -1;

  width:100%;

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

  padding:18px 0;

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

  background:transparent;
  color:#f3f3ef;

  font-family:"IBM Plex Sans", Arial, sans-serif;
  font-size:clamp(18px, 1.5vw, 24px);
  font-weight:400;
}


/* =========================================================
   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-carousel{
    --carousel-gap:16px;

    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0,
      #000 6%,
      #000 94%,
      transparent 100%
    );
    mask-image:linear-gradient(
      to right,
      transparent 0,
      #000 6%,
      #000 94%,
      transparent 100%
    );
  }

  .work-card{
    flex-basis:calc(100vw - (var(--page-x) * 2));
  }

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

  .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;
  }

}