/* ========================================================================== */
/* css\page-transitions.css */
/* ========================================================================== */
html.pw-page-entering{background:#0a0a0a}
html.pw-page-entering body{visibility:hidden}
.pw-page-blinds{position:fixed;inset:0;z-index:2147483645;pointer-events:none;overflow:hidden;visibility:hidden}
.pw-page-blinds.is-active{visibility:visible;pointer-events:auto}
.pw-page-blinds span{position:absolute;left:0;width:100%;height:calc(12.5% + 2px);top:calc(var(--i)*12.5% - 1px);background:#0a0a0a;transform:scaleY(0);transform-origin:center bottom;will-change:transform}
.pw-page-blinds.is-covered span{transform:scaleY(1)}
.pw-loader__light-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pw-loader__scene.has-light-canvas .pw-loader__line--moving{display:none}
.pw-loader__scene.has-light-canvas .pw-loader__lines{visibility:hidden}


/* ========================================================================== */
/* css\styles.css */
/* ========================================================================== */
/* ==========================================================================
   Performante Wraps — global styles, ordered by first appearance in index.html
   ========================================================================== */




.wrap-light-section--intro{
  position: relative;
  z-index: 61;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  background: var(--off-white);
  isolation: isolate;
}

@media(max-width:760px){

    .wrap-light-section--intro{
      min-height:76dvh;
    }



    .wrap-light-section--intro .wrap-light-section__inner{
      width:min(100% - 36px,1500px);
      padding:72px 0 !important;
    }
}


  


/* ==========================================================================\n   Performante Gallery Flow — 5-panel horizontal project showcase\n   ========================================================================== */
.selected-works-stage{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:400vh;
  background:var(--off-white);
  border-top:1px solid rgba(255,255,255,.20);
  border-bottom:1px solid rgba(255,255,255,.20);
  touch-action:pan-y;
}

.selected-works-stage.is-dragging .selected-works-track{
  pointer-events:none;
}

.selected-works-sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.selected-works-track{
  display:flex;
  width:max-content;
  height:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.selected-works-panel{
  flex:0 0 50vw;
  width:50vw;
  height:100vh;
  padding:clamp(26px,2.8vw,54px);
  display:flex;
  align-items:stretch;
  background:var(--off-white);
  border-left: 1px solid #6968684c;
}

/* Text-only panels: content is truly centered in the 50vw box. */
.selected-works-text-card{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  padding:clamp(34px,4vw,72px);
}

.selected-works-text-card__center{
  width:min(600px,92%);
  margin:0 auto;           /* center the block itself */
  display:flex;
  flex-direction:column;
  align-items:center;      /* ← center child content, including the button */
  text-align:center;       /* ← was left */
}

.selected-works-text-card__center h2{
  margin:0;
  color:#f2f2f2;
  font-size:clamp(4rem,7vw,8.2rem);
  line-height:.8;
  letter-spacing:-.07em;
  font-weight:500;
}

.selected-works-text-card__center h3{
  margin:0;
  color:#f2f2f2;
  font-size:clamp(1rem,2vw,4.2rem);
  line-height:.8;
  letter-spacing:-.07em;
  font-weight:500;
}

.selected-works-text-card__center p{
  margin:clamp(24px,2.6vw,38px) auto 0;
  color:#b0b0b0;
  font-size:clamp(13px,1vw,16px);
  line-height:1.55;
  
}

.selected-works-button{
  min-height:50px;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;       /* extra safety if align-items ever changes */
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:44px;
  padding:0 18px;
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-top: 2rem;
}

/* Project panels have no nested border — the stage carries the only border. */
.selected-project-card{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  /* centers image + text together vertically */
  justify-content:center;

  gap:clamp(18px,1.7vw,30px);
  
  padding:0;
  overflow:hidden;
}

.selected-project-card__media{
  width:100%;
  height:60vh;
  max-height:60vh;
  
  flex:none;

  overflow:hidden;
  background:#1a1a1a;
}

.selected-project-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.selected-project-card__meta{
  width:100%;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;

  gap:clamp(24px,3vw,52px);

  padding:0 0 2px;
}

.selected-project-card__copy{
  min-width:0;
  text-align:left;
}

.selected-project-card__copy h3{
  margin:0;
  color:#f2f2f2;
  font-size:clamp(1.35rem,1.9vw,2.15rem);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:500;
}

.selected-project-card__copy p{
  max-width:42ch;
  margin:15px 0 0;
  color:#e2e2e2;
  font-size:clamp(11px,1vw,15px);
  line-height:1.5;
}

.selected-project-card__link{
  align-self:end;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:40px;
  padding:0 16px;
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media(max-width:760px){
  .selected-works-stage{
    height:390vh;
  }

  .selected-works-panel{
    flex-basis:88vw;
    width:88vw;
    padding:18px;
  }

  .selected-works-text-card{
    padding:28px 18px;
  }

  .selected-works-text-card__center h2{
    font-size:clamp(3.8rem,18vw,6rem);
  }

  .selected-project-card__meta{
    grid-template-columns:1fr auto;
    gap:16px;
  }

  .selected-project-card__copy p{
    max-width:28ch;
  }
}

.wrap-branding-intro{
  width:min(760px, calc(100% - 40px));
  margin:clamp(10px,0.8vw,10px) auto 0;
  text-align:center;
}



.wrap-branding-intro h2{
  margin:0;
  color:#f2f2f2;
  font-size:clamp(2.25rem,3.5vw,4.4rem);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:500;
}



.wrap-branding-intro__subtitle{
  margin:16px 0 0;
  color:#ff5a5a;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}



.wrap-branding-intro__desc{
  margin:30px auto 0;
  color:#c9c9c9;
  font-size:clamp(15px,1.15vw,20px);
  line-height:1.15;
  max-width:24ch;
  text-align:center;
  letter-spacing:-.05em;
}


.wrap-branding-grid{
  width:100%;
  max-width:100%;
  margin:clamp(44px,5vw,72px) auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,26px);
  padding:0 clamp(20px,3vw,40px);
  text-align:left;
}


.wrap-branding-card{
  position:relative;
  display:block;
  min-width:0;
  aspect-ratio:3.3 / 4;
  border-radius:8px;
  overflow:hidden;
  text-decoration:none;
  background:#161616;
}



.wrap-branding-card__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}



.wrap-branding-card__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}



.wrap-branding-card:hover .wrap-branding-card__media img{
  transform:scale(1.06);
}



.wrap-branding-card__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(18px,2vw,26px);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%),
    linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 42%);
}



.wrap-branding-card__title-row{
  display:flex;
  width:100%;
}

.wrap-branding-card:nth-child(1) .wrap-branding-card__title-row{ justify-content:flex-start; }
.wrap-branding-card:nth-child(2) .wrap-branding-card__title-row{ justify-content:center; }
.wrap-branding-card:nth-child(3) .wrap-branding-card__title-row{ justify-content:flex-end; }

.wrap-branding-card:nth-child(1) .wrap-branding-card__title{ text-align:left; }
.wrap-branding-card:nth-child(2) .wrap-branding-card__title{ text-align:center; }
.wrap-branding-card:nth-child(3) .wrap-branding-card__title{ text-align:right; }



.wrap-branding-card__title{
  margin:0;
  max-width:22ch;
  color:#fff;
  font-size:clamp(0.45rem,0.92vw,1.2rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.15;
}



.wrap-branding-card__bottom-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding-bottom: 1rem;
}



.wrap-branding-card__desc{
  margin:0;
  max-width:28ch;
  color:rgba(255,255,255,.85);
  font-size:clamp(0.5rem,0.7vw,1.2rem);
  line-height:1.15;
  text-align:left;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}



.wrap-branding-card__arrow{
  flex:0 0 auto;
  width:clamp(34px,3vw,42px);
  height:clamp(34px,3vw,42px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}

.wrap-branding-card__arrow svg{
  width:16px;
  height:16px;
}

.wrap-branding-card:hover .wrap-branding-card__arrow{
  background:#fff;
  color:#0c0c0c;
  transform:translate(2px,-2px);
}

@media(max-width:760px){

  .wrap-branding-grid{
    grid-template-columns:1fr;
    max-width:520px;
  }

  .wrap-branding-card{
    aspect-ratio:4 / 3.4;
  }

  .wrap-branding-card:nth-child(1) .wrap-branding-card__title-row,
  .wrap-branding-card:nth-child(2) .wrap-branding-card__title-row,
  .wrap-branding-card:nth-child(3) .wrap-branding-card__title-row{
    justify-content:flex-start;
  }

  .wrap-branding-card:nth-child(1) .wrap-branding-card__title,
  .wrap-branding-card:nth-child(2) .wrap-branding-card__title,
  .wrap-branding-card:nth-child(3) .wrap-branding-card__title{
    text-align:left;
  }
}



.wrap-branding-intro h2,
.wrap-branding-intro__subtitle,
.wrap-branding-intro__desc{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}



.wrap-branding-intro h2.is-inview,
.wrap-branding-intro__subtitle.is-inview,
.wrap-branding-intro__desc.is-inview{
  opacity:1;
  transform:translateY(0);
}




  :root{
    --off-white: #0a0a0a;
    --bg: var(--off-white);
    --ink: #f2f2f2;

    --square: 96;
    --gap: 8;
    --rectW: 254;
    --rectH: 96;
    --ovalW: 800;

    --beamY: 0px; /* driven by JS */
    --col-3: 2.15fr;
    --stackflow-gap: clamp(20px, 1vw, 22px);
    --stackflow-card-h: clamp(280px, 28vw, 450px);
    --stackflow-stack-gap: 1rem;
  }



  *{ box-sizing:border-box; }



  html,
  body{
    height: 100%;
  }



  html{
    scroll-behavior: auto;
    scroll-padding-top: var(--nav-offset);
  }



  html.lenis,
  html.lenis body{
    height: auto;
  }



  .lenis.lenis-smooth{
    scroll-behavior: auto !important;
  }



  body{
    margin: 0;
    font-family: 'Zalando Sans', sans-serif;
    /*background: #052330;*/
    background: var(--off-white);
    color: var(--ink);
    overflow-x: clip;
  }



  #site{
    min-height: 100vh;
    padding: 0;
  }


  .intro-wrap{
    position: relative;
    background: #000;
    padding-bottom: 0;
  }



  .intro-wrap::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 520vmax;
    height: 520vmax;
    z-index: 0;
    pointer-events: none;
    transform: translate(-45%, calc(-55% + var(--beamY))) rotate(-115deg);
    transform-origin: center;
    background: linear-gradient(
      90deg,
      transparent 0%,
      transparent 44%,
      rgb(25, 25, 25) 48%,
      rgba(30, 30, 30, 0.911) 50%,
      rgba(9, 9, 9, 0.91) 52%,
      transparent 56%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 18%,
      black 22%,
      black 70%,
      transparent 74%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 18%,
      black 22%,
      black 70%,
      transparent 74%,
      transparent 100%
    );
  }



  .intro-wrap::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.302);
    z-index: 0;
    pointer-events: none;
  }



  .hero > *{
    position: relative;
    z-index: 3;
    color: #fff;
  }



  .hero::before{
    z-index: 2;
  }



  #heroGrid{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }



  #heroDropIcon{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -140%);
    width: clamp(120px, 50vh, 480px);
    height: auto;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
  }



  #heroBottomIcon{
    position: absolute;
    left: 50%;
    bottom: -2rem;
    transform: translateX(-50%);
    width: 80vw;
    max-width: 1600px;
    height: auto;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
  }



  #heroTitle,
  #criticalTitle{
    display: none;
  }


  .side-img{
    position: absolute;
    top: 0;
    height: clamp(70vh, 55vw, 90vh);
    width: clamp(500px, 42vw, 650px);
    object-fit: contain;
    object-position: center;
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
    --edgeInset: clamp(0px, (900px - 100vw) * 0.18, 160px);
  }



  .side-img--left{
    left: 0;
    transform: translateX(-10%);
  }



  .side-img--right{
    right: 0;
    left: auto;
    transform: translateX(10%);
  }


  .wave-divider{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 110px;
    min-height: 0;
    z-index: 3;
    pointer-events: none;
    display: block;
    line-height: 0;
  }



  .wave-divider path{
    fill: #fff;
  }



  .caps-intro-section{
    position: relative;
    background: var(--off-white);
    margin-top: -2px;
    padding: clamp(32px, 0vw, 0px) 0 40px;
    z-index: 54;
  }


  .text-highlight{
    background: linear-gradient(90deg, #313131 0%, rgb(19, 75, 99) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #ff5a5a;
    font-weight: 900;
  }



  .display-heading{
    font-size: clamp(34px, 7vw, 56px);
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.02em;
    font-weight: 200;
  }



  .stackflow-sr{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }



  .hero-scroll-indicator{
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(60px, 8vw, 120px);
  }



  .hero-chevron{
    width: 116px;
    height: 116px;
  }



  .hero-chevron path{
    stroke: #ffffff;
  }


  .stackflow-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }



  .stackflow-grid{
    display: grid;
    grid-template-columns: var(--col-3) 1fr 1fr;
    grid-template-areas: "col3 col1 col2";
    gap: var(--stackflow-gap);
    align-items: start;
    width: 100%;
    margin: 0 auto;
    margin-bottom: clamp(6vh, 12vw, 30vh);
  }



  .stackflow-col{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    position: relative;
    top: auto;
    right: auto;
    width: auto;
  }



  .stackflow-col--1{ grid-area: col1; }


  .stackflow-col--2{ grid-area: col2; }


  .stackflow-col--3{ grid-area: col3; }



  .stackflow-copy{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers everything horizontally */
  text-align: center;    /* centers text */
}



.stackflow-copy p{
  font-size: clamp(0.8rem, 1.4vw, 1.4rem);
  max-width: 60ch;
  margin: 0 auto;        /* 🔥 this is key */
  text-align: center;
  margin-bottom: 1rem;
}



  .stackflow-meta,
  .stackflow-title,
  .stackflow-title2,
  .stackflow-copy p,
  .stackflow-heading{
    min-width: 0;
    overflow-wrap: anywhere;
  }



  .stackflow-kicker{
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }



  .stackflow-heading{
    margin: 0;
    color: #fff;
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 0.97;
    letter-spacing: -0.035em;
    margin-bottom: 2rem;
    font-weight: 300;
  }



  .stackflow-link{
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    position: relative;
    color: #F00303;
    text-decoration: none;
    font-size: clamp(1rem, 1.3vw, 1.3rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    transition:
      color .25s cubic-bezier(.22,1,.36,1),
      transform .25s cubic-bezier(.22,1,.36,1);
  }



  .stackflow-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
  }



  .stackflow-link svg{
    width: 22px;
    height: 22px;
    color: #ffffff;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
  }



  .stackflow-link:hover{
    color: #ffffff;
    transform: translateX(4px);
  }



  .stackflow-link:hover::after{
    transform: scaleX(1);
  }



  .stackflow-link:hover svg{
    transform: translateX(6px);
    color: #F00303;
  }


  .card-row{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
    margin-top: 28px;
    width: min(1000px, 100%);
  }



  .card{
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    padding: 16px;
    min-height: 120px;
    color: rgba(255,255,255,0.92);
  }



  .spacer--dark{
    min-height: 55vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 180px 20px 0;
  }



  .spacer--white{
    height: 120vh;
    max-width: 1000px;
    margin: 24px auto;
    border-radius: 18px;
    background: var(--off-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.65);
    font-weight: 600;
    letter-spacing: .02em;
  }



  #loaderSvg{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: block;
    pointer-events: none;
  }


.hero-rise-img{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 104vh;
  object-fit: cover;

  z-index: 2;
  pointer-events: none;

  filter: grayscale(100%) contrast(1.15) brightness(0.8);

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
}


@media (max-width: 1599px){

    .side-img{
      height: clamp(70vh, 65vw, 100vh);
      width: clamp(500px, 82vw, 750px);
      object-fit: cover;
      --edgeInset: clamp(0px, (1200px - 200vw) * 1.18, 160px);
    }



    .side-img--left{
      left: 50%;
      right: auto;
      transform: translateX(-120%);
    }



    .side-img--right{
      left: 50%;
      right: auto;
      transform: translateX(20%);
    }



    .hero-topbar{
      top: 10%;
    }



   
    .stackflow-heading{
      margin-top: 4rem;
      margin-bottom: 1rem;
      font-size: clamp(3rem, 4vw, 4rem);
    }


      .stackflow-copy p{
      font-size: clamp(0.8rem, 1.2vw, 1.2rem);
     
      margin-bottom: 0rem;
    }
}

@media (max-width: 1180px){

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



    .stackflow-copy{
      grid-column: 1 / 3;
      min-height: 420px;
    }



    .stackflow-col--1{
      grid-column: 1 / 2;
    }



    .stackflow-col--2{
      grid-column: 2 / 3;
    }



    .stackflow-col--3{
      grid-column: 1 / 3;
      grid-row: auto;
    }



    .stackflow-h-xl{
      min-height: 520px;
    }
}

@media (max-width: 900px){

    .card-row{
      grid-template-columns: 1fr;
    }



    .stackflow-subscribe{
      grid-template-columns: 1fr;
    }



    .stackflow-subscribe button{
      width: 100%;
      min-width: 0;
    }
}

@media (max-width: 760px){

    :root{
      --beamY: -620px;
    }



    .hero{
      min-height: 140vh;
      padding-top: 100px;
      margin-bottom: -20px;
      overflow: visible;
    }



    .hero-rise-img{
      inset: auto;
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      height: 84vh;
    }




    .stackflow-shell{
      width: min(1600px, calc(100% - 24px));
      grid-template-columns: 1fr;
    }



    .stackflow-copy{
      justify-content: flex-start;
      padding-top: 3vh;
      min-height: 100vh;
    }



    .stackflow-copy,
    .stackflow-col--1,
    .stackflow-col--2,
    .stackflow-col--3{
      grid-column: auto;
      grid-row: auto;
    }




    #heroBottomIcon{
      bottom: 1.5rem;
      transform: translateX(-50%);
      width: 90vw;
    }



    .wave-divider{
      bottom: -10px;
      min-height: 20px;
      height: auto;
    }


    .stackflow-heading{
      margin-top: -3rem;
      margin-bottom: 1rem;
    }
}




.hero-topbar{
  position: absolute;
  top: 6%;
  left: 0;
  width: 100%;
  z-index: 10;
}


.hero-topbar__center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
}



.hero-topbar__center img{
  height: clamp(120px, 9vw, 222px);
  width: auto;
}


.hero-topbar__cta{
  position: absolute;
  right: 28px;
  top: 0;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #fafafa;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;

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



.hero-topbar__cta svg{
  width: 16px;
  height: 16px;
}



.hero-topbar__cta svg path{
  stroke: currentColor;
}


.hero-topbar__cta:hover{
  transform: translateY(-2px);
  color: #f00303;
}



.stackflow-meta--featured{
  top: 18px;
  bottom: 18px;
  left: 18px;
  right: 18px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



.stackflow-featured-top{
  display: flex;
  flex-direction: column;
  gap: 10px;
}



.stackflow-meta--featured .featured-btn{
  margin-top: 0;
  align-self: flex-start;
}


.featured-btn{
  margin-top: 18px;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--off-white);
  color: #f2f2f2;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;

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


.featured-btn svg{
  width: 16px;
  height: 16px;
  transition: transform .2s ease;
}


.featured-btn:hover{
  color: #9c9c9c;
  transform: translateX(2px);
}



.featured-btn:hover svg{
  transform: translateX(3px);
}



.stackflow-card--split{
  position: relative;
  overflow: hidden;
}



.stackflow-meta--split{
  position: absolute;
  inset: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}



.stackflow-card-top{
  display: flex;
  flex-direction: column;
  gap: 10px;
}



.stackflow-meta--split .featured-btn{
  margin-top: 0;
  align-self: flex-start;
}



.stackflow-card--split .stackflow-eyebrow,
.stackflow-card--split .stackflow-title2{
  position: relative;
  z-index: 2;
  color: #fff;
}



.stackflow-card--split .featured-btn{
  position: relative;
  z-index: 2;
}

@media (max-width: 760px){

   

    .hero-topbar{
      top: 3%;
    }



    .hero-topbar__center img{
      height: clamp(70px, 20vw, 120px);
      width: auto;
    }
}


  .simple-nav__menu {
    font-family: 'Inter', sans-serif;
  }


.terrain-section{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #050505;
}


.terrain-background{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}


#terrain3d{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  pointer-events: none;
}


#terrain3d canvas{
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;

  /*
    Optional final CSS opacity.
    Keep this at 1 unless you need the entire
    terrain canvas to become more transparent.
  */
  opacity: 1;
}




#energyField{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:auto;
  opacity:0;
  mix-blend-mode:screen;
}

@media(max-width:760px){

  #energyField{
    width:100%;
    height:100%;
  }
}




  .stackflow-shell{
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 0 20px;
  z-index: 4;
  pointer-events: none;
  
}



.stackflow-main{
  width: 100%;
  height: 100%;
}



.hero-3d-center{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}



#cube3d{
  width: 70vw;
  height: 70vh;
}



.hero-bottom-title{
  display:none;
  position: absolute;
  left: clamp(24px, 5vw, 80px);
  bottom: clamp(32px, 7vh, 90px);
  z-index: 5;
  pointer-events: auto;
  text-align: left;
}



.hero-bottom-title h1{
  margin: 0;
  color: #fff;
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  line-height: .95;
  letter-spacing: -0.05em;
  font-weight: 300;
  max-width: 15ch;
}

@media(max-width: 760px){

  #cube3d{
    width: 360px;
    height: 360px;
  }



  .hero-bottom-title{
    left: 22px;
    bottom: 42px;
  }



  .hero-bottom-title h1{
    font-size: clamp(2rem, 12vw, 3.6rem);
  }
}


.hero-truck-titles{
  position:absolute;
  inset:0;
  z-index:45;
  pointer-events:none;
}



.hero-truck-titles h2{
  position:absolute;
  left:50%;
  top:clamp(120px,15vh,320px);

  transform:translateX(-50%);

  margin:0;
  opacity:0;

  color:#fff;
  font-size:clamp(2rem,4vw,2.5rem);
  font-weight:300;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;

  white-space:nowrap;
}


.hero-truck-sequence{
  position:absolute;
  inset:0;
  z-index:40;
  pointer-events:none;
  overflow:visible;
}



.hero-truck-sequence img{
  position:absolute;
  left:50%;
  bottom:clamp(32px, 8vh, 90px);

  width:clamp(360px, 72vw, 1250px);
  height:auto;
  max-height:82vh;

  object-fit:contain;
  opacity:0;
}


.hero-white-panel{
  position:absolute;
  left:0;
  bottom:-40vh;
  width:100vw;
  height:40vh;
  background:#ffffff00;
  z-index:39;
  pointer-events:none;
  opacity:1;
  
}




:root{
  --section-max: 1280px;
  --section-pad: 24px;
}



.image-scroller-section{
  background:var(--off-white);
  color:#ffffff;
  padding:6rem 0 7rem;
  overflow:hidden;
  
}



.image-scroller-inner{
  width:min(var(--section-max), calc(100% - (var(--section-pad) * 2)));
  margin:0 auto;
}



.image-scroller-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:2rem;
  
}



.image-scroller-eyebrow{
  font-size: clamp(2.4rem, 2.2vw, 2.3rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
  font-weight: 300;
  color:#eaf3f7;
  margin-left: 0.5rem;
}



.image-scroller-controls{
  position:absolute;
  right:0;
  display:flex;
  gap:.75rem;
}



.scroller-arrow{
  width:64px;
  height:64px;
  border-radius:14px;
  border:1px solid #d6d6d6;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:var(--off-white);
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .15s ease;
}



.scroller-arrow svg{
  width:26px;
  height:26px;
  display:block;
}



.scroller-arrow.is-disabled{
  background:#242424;
  color:#6b6b6b;
  border-color:#242424;
  cursor:default;
}



.scroller-arrow.is-active{
  background:#ffffff;
  color:#0a0a0a;
  border-color:#ffffff;
}



.image-scroller-viewport{
  overflow:hidden;
  cursor:grab;
  width:100%;
}



.image-scroller-track{
  display:flex;
  gap:2.4rem;

  /* aligns first card with the left edge of the 1200px inner container */
  padding-left:max(var(--section-pad), calc((100vw - var(--section-max)) / 2));
  padding-right:max(var(--section-pad), calc((100vw - var(--section-max)) / 2));
}



.image-scroller-track::after{
  content:"";
  flex:0 0 1px;
}



.scroller-card{
  position:relative;
  flex:0 0 clamp(340px, 28vw, 450px);
  aspect-ratio:360 / 420;
  border-radius:22px;
  overflow:hidden;
}



.scroller-card--red{
  background:#000000;
  color:#fff;
}



.scroller-card--image{
  background:#000;
}



.scroller-image-wrap{
  position:absolute;
  inset:0;
}



.scroller-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}



.scroller-image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}



.scroller-copy{
  position:absolute;
  inset:0;
  padding:1.4rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  z-index:2;
}



.card-eyebrow{
  display:flex;
  justify-content:space-between;
  margin-top:.3rem;
  margin-bottom:clamp(.8rem,1.2vw,1.4rem);
  font-size:clamp(11px,0.9vw,15px);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.9;
}



.card-eyebrow span:last-child{
  opacity:.6;
}



.scroller-copy p{
  margin:0;
  font-size:clamp(18px,1.6vw,24px);
  line-height:1.45;
  max-width:28ch;
}



.scroller-progress{
  width:100%;
  height:2px;
  background:#262626;
  margin:3rem auto 0;
}



.scroller-progress-bar{
  width:8%;
  height:100%;
  background:#fff;
}



.navbar{
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    opacity .25s ease,
    background .2s ease;
}



.navbar.navbar--hidden{
  transform:translateX(-50%) translateY(calc(-100% - 18px));
  opacity:.98;
}

@media (max-width: 900px){

  .image-scroller-head{
    gap:1.25rem;
    flex-direction:column;
    align-items:flex-start;
  }



  .image-scroller-controls{
    position:static;
    right:auto;
  }



  .image-scroller-track{
    padding-left:var(--section-pad);
    padding-right:var(--section-pad);
  }
}




.contact-section{
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;

  /* keep it flush, no accidental overflow from browser rounding */
  overflow-x: clip;

  background: var(--off-white);
  padding: clamp(90px, 10vw, 160px) clamp(24px, 4vw, 60px);
}


.contact-section{
  max-width: none !important;
}


html{
  overflow-x: clip;
}


.contact-header{
  text-align:center;
  margin-bottom: clamp(44px, 5vw, 80px);
  
}



.contact-header h2{
  font-size: clamp(44px, 10vw, 142px);   /* ✅ bigger */
  margin:0;
  font-weight:750;
  letter-spacing:-0.03em;
  color:#f2f2f2;
}



.contact-divider{
  width: 100%;
  height:1px;
  background:#a9a9a9;
  margin:22px auto 0;
  border-radius:999px;
}


.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(44px, 6vw, 120px);
  
  margin:0 auto;
  align-items:start;
}


.contact-left {
  border-left: 10px solid rgb(94, 94, 94);
  padding-left: 2rem;
}


.contact-left h3{
  font-size: clamp(24px, 3.4vw, 54px);  /* ✅ bigger */
  margin:0 0 18px;
  color:#f2f2f2;
  letter-spacing:-0.01em;
  font-weight: 200;
}



.contact-left p{
  font-size: clamp(17px, 1.2vw, 20px);  /* ✅ bigger */
  line-height:1.75;
  color:#c9c9c9;
  max-width:60ch;
}


.contact-right h3{
  font-size: clamp(24px, 3.4vw, 54px);  /* ✅ bigger */
  margin:0 0 22px;
  color:#f2f2f2;
  letter-spacing:-0.01em;
  font-weight: 200;
}


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


.contact-form label{
  display:flex;
  flex-direction:column;
  gap:10px;
  
  letter-spacing:.06em;
  font-size: 18px;          /* ✅ bigger */
  font-weight:400;
  color:#d0d0d0;
}


.contact-form input,
.contact-form textarea{
  background: transparent;     /* no box bg */
  border: none;                /* remove all borders */
  border-bottom: 1px solid #d5d9de;  /* ✅ underline */
  border-radius: 0;
  padding: 8px 0px 12px;      /* top/right/bottom feel good */
  font-size: 18px;             /* ✅ bigger input text */
  color:#f2f2f2;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}


.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form button {
  font-family: 'Zalando Sans', sans-serif;
}


.contact-form textarea{
  resize: vertical;
  min-height: 140px;
  padding-top: 10px;
}


.contact-form input:focus,
.contact-form textarea:focus{
  border-bottom-color: #ff0505;
  
}


.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#9aa3ad;
}


.contact-btn{
  margin-top:14px;
  background:var(--off-white);
  color:#ffffff;
  border: 1px solid;
  padding:16px 22px;
  border-radius:0px;
  font-size:22px;
  font-weight:200;
  letter-spacing:.05em;
  cursor:pointer;
  transition: transform .2s ease, opacity .2s ease;
  width: fit-content;      /* nice “CTA” feel */
}



.contact-btn:hover{
  transform: translateY(-2px);
  opacity:.92;
}

@media (max-width: 900px){

  .contact-grid{
    grid-template-columns: 1fr;
  }


  .contact-left p{
    max-width:100%;
  }


  .contact-btn{
    width:100%;
    text-align:center;
  }
}


.site-footer{
  position: relative;

  /* ✅ full-bleed breakout */
  width: 100vw;
  left: 50%;
  margin-left: -50vw;

  background-image: url("/images/bluebg3.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color:#ffffff;
  padding: clamp(60px, 8vw, 100px) clamp(18px, 4vw, 70px) 30px;


  

  overflow-x: clip; /* prevents rounding overflow */
}


.footer-inner{
  display:grid;
  grid-template-columns: 4fr 2fr 1fr 1fr;
  gap: clamp(24px, 4vw, 80px);
}


.footer-inner,
.footer-bottom{
  width: 100%;
  max-width: none;         /* ✅ remove 1200px cap */
  margin: 0 auto;
}


.footer-col--logo{
  display:flex;
  align-items:flex-start;
}



.footer-logo{
  width:200px;
  height:auto;
  object-fit:contain;

  filter: brightness(0) saturate(100%);
}


.footer-title{
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:18px;
  font-weight:400;
  opacity:.5;
  color:rgb(255, 255, 255);
}


.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}



.footer-links li{
  margin-bottom:12px;
}



.footer-links a{
  text-decoration:none;
  color:#ffffff;
  font-size:16px;
  transition: color .2s ease;
}



.footer-links a:hover{
  color:#F00303;
}


.footer-socials{
  display:flex;
  flex-direction: column;  /* ✅ stack vertically */
  gap:16px;
  align-items: flex-start; /* keeps them left aligned */
}


.footer-socials a{
  width:24px;
  height:24px;
  color:#ffffffcc;
  transition: color .2s ease, transform .2s ease;
}



.footer-socials a:hover{
  color:#F00303;
  transform: translateY(-2px);
}



.footer-socials svg{
  width:100%;
  height:100%;
}


.footer-bottom{
  margin-top: clamp(36px, 5vw, 70px);
  display:flex;
  justify-content: space-between;
  align-items:center;

  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0);

  font-size:16px;
  color:#ffffff99;
}


.footer-credit a{
  color:#ffffffcc;
  text-decoration:none;
  font-weight:600;
  transition: color .2s ease;
}



.footer-credit a:hover{
  color:#F00303;
}

@media (max-width: 900px){

  .footer-inner{
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }



  .footer-col--logo{
    grid-column: span 2;
  }



  .footer-bottom{
    flex-direction: column;
    gap: 12px;
    text-align:center;
  }
}

@media (max-width: 760px){

  .intro-wrap{
    overflow: hidden;
  }



  .hero{
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: 0;
    margin-bottom: 0;
  }



  .hero-rise-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
  }



  .hero-truck-sequence{
    overflow: hidden;
  }



  .hero-truck-sequence img{
    left: 50%;
    bottom: 7vh;
    width: min(135vw, 720px);
    max-width: none;
    max-height: 68vh;
    object-fit: contain;
  }



  .hero-truck-titles h2{
    top: 14vh;
    width: calc(100% - 40px);
    white-space: normal;
    font-size: clamp(1.35rem, 7vw, 2rem);
    line-height: 1.1;
  }
}

@media (max-width:760px){


  html,
  body{
    margin:0;
    background:#000;
    overflow-x:hidden;
  }



  .truck-hero{
    position:relative;
    width:100%;
    height:100svh;
    min-height:100svh;
    overflow:hidden;
    background:#000;
  }



  .truck-hero__video{
    position:absolute;
    inset:-2px;
    width:calc(100% + 4px);
    height:calc(100% + 4px);
    object-fit:cover;
    display:block;
  }
}


:root{ --pw-red:#f00303; --pw-drawer:clamp(250px,22vw,310px); }



.simple-nav-wrap,
.full-menu{ display:none !important; }



.intro-wrap{
  min-height:100dvh;
  overflow:clip;
}



.hero{
  position:sticky;
  top:0;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  background:#050505;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:0;
  padding-bottom:0;
}


#cube3d{
  opacity:1;
  filter:none !important;
}


.wrap-scroll-copy{
  position:relative;
  z-index:20;
  margin-top:-100dvh;
  pointer-events:none;
}



.wrap-scroll-copy__panel{
  position:relative;
  min-height:115dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:0 clamp(22px,2vw,50px) clamp(90px,12vh,150px);
  text-align:left;
  opacity:1;
  transform:none;
  filter:none;
}



.wrap-scroll-copy__panel--hero{
  min-height:100dvh;
  justify-content:space-between;
  flex-direction:row;
  align-items:stretch;
  padding:
    clamp(120px,14vh,170px)
    clamp(22px,2vw,50px)
    clamp(34px,5vh,64px);
}



.wrap-hero-copy{
  align-self:flex-start;
  max-width:620px;
}



.wrap-hero-note{
  align-self:flex-end;
  width:min(370px,32vw);
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}



.wrap-hero-note p{
  margin:0 0 18px;
  color:rgba(255, 255, 255, 0.849);
  font-size:clamp(.9rem,1.2vw,1.2rem);
  line-height:1.25;
  max-width: 30ch;
}




.wrap-project-button{
  margin-top:30px;
  min-height:52px;
  width:fit-content;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  padding:0 20px;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  pointer-events:auto;
}



.wrap-about-panel{
  min-height:120dvh;
  display:grid;
  grid-template-columns:minmax(0px,.2fr) minmax(0,1.9fr);
  gap:clamp(10px,2vw,40px);
  align-content:center;
  align-items:start;
  padding-top:18vh;
  padding-bottom:18vh;
}



.wrap-about-panel__label{
  display:flex;
  flex-direction:column;
  gap:24px;
}



.wrap-about-panel__label span{
  color:rgba(255,255,255,.4);
  font-size:14px;
  letter-spacing:.15em;
  text-transform:uppercase;
}



.wrap-about-panel__content{
  width: 100%;
}



.wrap-scroll-copy__panel--two{
  align-items:flex-end;
  text-align:right;
}



.wrap-scroll-copy__eyebrow{
  margin:0 0 20px;
  color:rgba(255,255,255,.58);
  font-size:14px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
}



.wrap-scroll-copy__panel h1,
.wrap-scroll-copy__panel h2{
  width:100%;
  max-width:none;
  margin:0;
  color:#fff;
  font-size:clamp(2.25rem,3.5vw,4.4rem);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:300;
}



.wrap-scroll-copy__panel--hero h1{
  max-width:14ch;

  line-height:.94;
  letter-spacing:-.05em;
  font-weight:500;
}



.wrap-scroll-copy__panel--one h2{
  max-width:44ch;

  font-weight:500;
  text-indent: 8rem;
  line-height:1.04;
}



.wrap-scroll-copy__panel--two h2{
  max-width:14ch;
  margin-left:auto;
}



.wrap-scroll-copy__body,
.copy-about{
  width:min(420px,80vw);
  margin:94px 0 0;
  color:rgba(255,255,255,.72);
  font-size:clamp(.98rem,1.15vw,1.2rem);
  line-height:1.7;
  letter-spacing:-.01em;
 
}



.wrap-scroll-copy__panel--two .wrap-scroll-copy__body{
  margin-left:auto;
}


.wrap-about-panel__main{
  width:100%;
  min-width:0;
}


.wrap-about-panel__lower{
  width:100%;
  margin-top:clamp(70px,4vw,150px);
}



.wrap-about-panel__rule{
  width:100%;
  height:1px;
  margin-bottom:clamp(34px,4vw,64px);
  background:rgba(255,255,255,.22);
}



.wrap-about-panel__columns{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);
  gap:clamp(50px,8vw,150px);
  align-items:start;
}



.wrap-about-panel__motto,
.wrap-about-panel__snippet{
  min-width:0;
}



.wrap-about-panel__motto-media{
  width: min(400px, 100%);
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  overflow: hidden;
  background: #1a1a1a; /* placeholder tone while image loads */
}

.wrap-about-panel__motto-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.wrap-about-panel__snippet{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}



.wrap-about-panel__snippet p{
  width:100%;
  max-width:500px;
  margin:0;
  color:rgb(255, 255, 255);
  font-size:clamp(.98rem,0.95vw,1.2rem);
  line-height:1.2;
  letter-spacing:-.01em;
  max-width: 35ch;
}



.wrap-about-panel__button{
  margin-top:52px;
  min-height:52px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

@media(max-width:900px){

  .wrap-about-panel__columns{
    grid-template-columns:1fr;
    gap:36px;
  }



  .wrap-about-panel__motto p{
    max-width:100%;
  }



  .wrap-about-panel__snippet p{
    max-width:620px;
  }
}


.wrap-marquee-pin-group{
  position:relative;
  z-index:24;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:transparent;
  pointer-events:none;
}



.wrap-marquee-pin-group .wrap-scroll-copy__panel--two{
  min-height:58dvh;
  flex:1 1 auto;
  justify-content:center;
  padding-top:clamp(70px,10vh,120px);
  padding-bottom:clamp(48px,7vh,90px);
}



.wrap-marquee-pin-group .wrap-marquee{
  flex:0 0 42dvh;
}

@media(max-width:760px){

  .wrap-marquee-pin-group{
    min-height:100svh;
  }



  .wrap-marquee-pin-group .wrap-scroll-copy__panel--two{
    min-height:64svh;
    padding-top:80px;
    padding-bottom:42px;
  }



  .wrap-marquee-pin-group .wrap-marquee{
    flex-basis:36svh;
    min-height:36svh;
  }

  .wrap-transition{height:100svh}
}


.wrap-marquee__row{
  width:100%;
  overflow:hidden;
}



@keyframes wrapProductTicker{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}


.wrap-transition{
  position:fixed;
  inset:0;
  z-index:62;
  width:100%;
  height:100dvh;
  margin:0;
  background:transparent;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
}



.wrap-blinds{
  position:absolute;
  inset:-2px 0;
  overflow:hidden;
  background:transparent;
}


.wrap-blinds span{
  position:absolute;
  left:0;
  width:100%;
  height:calc(12.5% + 4px);
  background:var(--off-white);
  transform:scaleY(0);
  transform-origin:center bottom;
  backface-visibility:hidden;
  will-change:transform;
}



.wrap-blinds span:nth-child(1){ top:calc(0% - 2px); }


.wrap-blinds span:nth-child(2){ top:calc(12.5% - 2px); }


.wrap-blinds span:nth-child(3){ top:calc(25% - 2px); }


.wrap-blinds span:nth-child(4){ top:calc(37.5% - 2px); }


.wrap-blinds span:nth-child(5){ top:calc(50% - 2px); }


.wrap-blinds span:nth-child(6){ top:calc(62.5% - 2px); }


.wrap-blinds span:nth-child(7){ top:calc(75% - 2px); }


.wrap-blinds span:nth-child(8){ top:calc(87.5% - 2px); }


#site > section:not(.intro-wrap):not(.wrap-light-section):not(.wrap-media-gallery):not(.pw-infinite-gallery):not(.pw5-why):not(.pw5-process):not(.pw5-proof):not(.pw5-closing-cta):not(.pw6-final-cta),
#site > .contact-section,
#site > footer{ display:none !important; }



.wrap-light-section{
  position:relative;
  z-index:70;
  min-height:100dvh;
  display:flex;
  align-items:center;
  background:var(--off-white);
  color:#f5f5f5;

}



.wrap-light-section__inner{
  width:min(1500px,calc(100% - 48px));
  margin:0 auto;
  padding:clamp(80px,10vw,150px) 0;
  will-change:transform,opacity,filter;
}


.wrap-light-section__kicker{ margin:0 0 22px; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }


.wrap-light-section h2{ margin:0; max-width:18ch; font-size:clamp(3rem,7vw,8rem); line-height:.88; letter-spacing:-.065em; font-weight:420; }


.wrap-light-section__lead{ max-width:52ch; margin:42px 0 0 auto; font-size:clamp(1.15rem,2vw,1.8rem); line-height:1.45; color:#c9c9c9; }


.wrap-light-section--details{ border-top:1px solid #d8d8d8; }


.wrap-light-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(50px,9vw,150px); align-items:start; }


.wrap-light-grid > div:first-child{ position:sticky; top:130px; }


.wrap-light-grid h2{ font-size:clamp(3rem,5.5vw,6.4rem); }


.wrap-light-grid__items article{ display:grid; grid-template-columns:42px 1fr; gap:0 18px; padding:30px 0; border-top:1px solid #bdbdbd; }


.wrap-light-grid__items article:last-child{ border-bottom:1px solid #bdbdbd; }


.wrap-light-grid__items span{ grid-row:1/3; padding-top:5px; font-size:10px; letter-spacing:.08em; }


.wrap-light-grid__items h3{ margin:0 0 12px; font-size:clamp(1.5rem,2.4vw,2.7rem); font-weight:500; letter-spacing:-.04em; }


.wrap-light-grid__items p{ margin:0; max-width:48ch; color:#c9c9c9; font-size:15px; line-height:1.65; }

@media(max-width:760px){

  .wrap-scroll-copy__panel{
    min-height:105dvh;
    justify-content:flex-end;
    padding:90px 20px 70px;
  }



  .wrap-scroll-copy__panel--hero{
    min-height:100dvh;
    flex-direction:column;
    justify-content:space-between;
    padding:100px 20px 34px;
  }



  .wrap-hero-note{
    width:100%;
    text-align:left;
  }



  .wrap-about-panel{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:44px;
    padding-top:120px;
    padding-bottom:100px;
  }



  .wrap-scroll-copy__panel--two{
    align-items:flex-start;
    text-align:left;
  }



  .wrap-scroll-copy__panel h1,
  .wrap-scroll-copy__panel h2{
    max-width:12ch;
    font-size:clamp(2.3rem,10.5vw,4rem);
  }



  .wrap-scroll-copy__panel--two h2,
  .wrap-scroll-copy__panel--two .wrap-scroll-copy__body{
    margin-left:0;
  }



  .wrap-scroll-copy__body{
    width:100%;
    margin-top:24px;
    font-size:1rem;
  }



  .wrap-marquee{
    min-height:34dvh;
  }



  .wrap-marquee__track{
    animation-duration:24s;
  }



  .wrap-marquee__track span{
    font-size:clamp(2rem,10vw,3.6rem);
  }


  .wrap-light-section__inner{ width:min(100% - 36px,1500px); padding:110px 0; }


  .wrap-light-section h2{ font-size:clamp(3.4rem,15vw,5.2rem); }


  .wrap-light-section__lead{ margin-top:32px; }


  .wrap-light-grid{ grid-template-columns:1fr; }


  .wrap-light-grid > div:first-child{ position:static; }
}


  .pw-pill-fill{
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--off-white);
    pointer-events:none;
    z-index:0;
    transform:translate(-50%,-50%) scale(0);
    transform-origin:center;
    will-change:transform;
  }


.wrap-marquee-pin-group .wrap-performance-panel{
  width:100%;
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:minmax(150px,.24fr) minmax(0,1.76fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
  align-content:center;
  text-align:left;
  pointer-events:auto;
}



.wrap-performance-panel__label{
  padding-top:4px;
}



.wrap-performance-panel__label .wrap-scroll-copy__eyebrow{
  margin:0;
  color:rgba(255,255,255,.58);
}



.wrap-performance-panel__main{
  width:100%;
  max-width:none;
  min-width:0;
}



.wrap-performance-panel__rule{
  width:100%;
  height:1px;
  margin-bottom:clamp(36px,4vw,64px);
  background:rgba(255,255,255,.2);
}



.wrap-performance-panel__content{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:clamp(50px,7vw,130px);
  align-items:start;
}



.wrap-performance-panel__headline,
.wrap-performance-panel__details{
  min-width:0;
}



.wrap-performance-panel .wrap-performance-panel__headline h2{
  width:100%;
  max-width:18ch;
  margin:0;
  color:#fff;
  font-size:clamp(2.6rem,4.2vw,5.25rem);
  line-height:.98;
  letter-spacing:-.05em;
  font-weight:420;
  text-align:left;
}



.wrap-performance-panel__details{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-top:clamp(4px,.6vw,10px);
}



.wrap-performance-panel .wrap-scroll-copy__body{
  width:100%;
  max-width:500px;
  margin:0;
  color:rgba(255,255,255,.72);
  text-align:left;
}



.wrap-performance-panel__link{
  margin-top:clamp(28px,3vw,44px);
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  min-height:50px;
  padding:0 0 8px;
  border-bottom:1px solid rgba(255,255,255,.4);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .3s ease,color .3s ease,gap .3s ease;
}



.wrap-performance-panel__link:hover{
  color:#f00303;
  border-color:#f00303;
  gap:42px;
}


.wrap-marquee{
  position:relative;
  z-index:25;
  min-height:42dvh;
  display:flex;
  align-items:center;
  overflow:hidden;
  pointer-events:none;
  border-top:0 !important;
  border-bottom:0 !important;
}



.wrap-marquee__track{
  width:max-content;
  display:flex;
  align-items:center;
  color:#fff;
  white-space:nowrap;
  will-change:transform;
  animation:wrapProductTicker 34s linear infinite;
  gap:clamp(26px,3vw,58px);
}



.wrap-marquee__track span{
  font-size:clamp(3rem,8vw,9.5rem);
  line-height:.82;
  letter-spacing:-.055em;
  font-weight:500;
  text-transform:uppercase;
}



.wrap-marquee__track i{
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:clamp(14px,1.5vw,24px);
  height:clamp(14px,1.5vw,24px);
  color:transparent;
  font-size:0;
  font-style:normal;
}



.wrap-marquee__track i::before,
.wrap-marquee__track i::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:56%;
  border:2px solid #f00303;
  border-radius:50%;
  background:transparent;
}

.wrap-marquee__track i::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.wrap-marquee__track i::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

@media(max-width:900px){

  .wrap-marquee-pin-group .wrap-performance-panel{
    grid-template-columns:1fr;
    gap:24px;
  }



  .wrap-performance-panel__content{
    grid-template-columns:1fr;
    gap:32px;
  }



  .wrap-performance-panel .wrap-performance-panel__headline h2{
    max-width:100%;
  }
}

@media(max-width:760px){

  .wrap-marquee-pin-group .wrap-performance-panel{
    width:min(100% - 36px,1500px);
  }



  .wrap-marquee__track span{
    font-size:clamp(2.5rem,11vw,4.6rem);
  }
}


.wrap-hero-side{
  align-self:flex-end;
  width:min(360px,38vw);
  margin-left:auto;
}



.wrap-hero-stats{
  
  display:grid;
  grid-template-columns:minmax(130px,.72fr) minmax(0,1.28fr);
  border:1px solid rgba(255,255,255,.28);
  margin-bottom:clamp(22px,2.5vw,34px);
  background:rgba(8,8,8,.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  width:min(300px,38vw);
  margin-left:auto;
}



.wrap-hero-stats__est,
.wrap-hero-stats__years{

  padding:clamp(10px,0.5vw,20px);
  display:flex;
  flex-direction:column;
  justify-content:center;      /* Center vertically */
  align-items:center;          /* Center horizontally */
  text-align:center;
  gap:2px;                    /* Even spacing between icon/text */
}



.wrap-hero-stats__est{
  border-right:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.7);
  font-size:11px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
}



.wrap-hero-stats__icon{
  width:34px;
  height:34px;
  display:block;
  color:#fff;
}



.wrap-hero-stats__icon svg{
  width:100%;
  height:100%;
  display:block;
}



.wrap-hero-stats__years{
  text-align: left;
}



.wrap-hero-stats__years strong{
  color:#fff;
  font-size:clamp(0.95rem,0.8vw,1.15rem);
  line-height:1;
  letter-spacing:-.025em;
  font-weight:400;
}



.wrap-hero-stats__years span{
  margin-top:0;
  color:rgba(255,255,255,.83);
  font-size:10px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding: 0rem 0.5rem;
}



.wrap-hero-side .wrap-hero-note{
  width:100%;
  margin:0;
  text-align:right;
}


.wrap-marquee-pin-group .wrap-quote-panel{
  width:100%;
  max-width:none;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:auto;
}



.wrap-quote-panel__inner{
  width:min(1200px,calc(100% - 80px));
  margin:0 auto;
}



.wrap-quote-panel__inner .wrap-scroll-copy__eyebrow{
  margin:0 0 clamp(24px,3vw,40px);
  color:rgba(255,255,255,.48);
}



.wrap-quote-panel blockquote{
  max-width:18ch;
  margin:0 auto;
  color:#fff;
  font-size:clamp(2.8rem,5.5vw,6.6rem);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:330;
  text-wrap:balance;
}

@media(max-width:900px){

  .wrap-hero-side{
    width:min(100%,520px);
  }



  .wrap-scroll-copy__panel--hero{
    flex-direction:column;
    gap:60px;
  }
}

@media(max-width:760px){

  .wrap-hero-stats{
    grid-template-columns:120px 1fr;
  }



  .wrap-hero-stats__est,
  .wrap-hero-stats__years{
    min-height:120px;
    padding:18px;
  }



  .wrap-quote-panel__inner{
    width:min(100% - 36px,1200px);
  }
}


.wrap-about-panel__philosophy{
  max-width:25ch;
  margin:0;
  color:#fff;
  font-size:clamp(0.6rem,1vw,1rem);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:300;
  text-transform:uppercase;
  padding-top: 20rem;
}


.wrap-light-section--intro .wrap-light-section__inner{
  position:relative;
  width:100%;
  max-width:65vw;
  margin:0 auto;
  padding:0 0 clamp(80px,9vw,150px) !important;
  text-align:center;
}


.wrap-light-section--intro .wrap-light-section__kicker,
.wrap-light-section--intro h2,
.wrap-light-section--intro .wrap-light-section__lead{
  margin-left:auto;
  margin-right:auto;
}



.wrap-light-section--intro h2{
    max-width:none;
  margin:0;
  color:#f2f2f2;
  font-size:clamp(2.25rem,3.5vw,4.4rem);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:500;
}



.wrap-light-section--intro .wrap-light-section__lead{
  max-width:62ch;
  margin-top:clamp(24px,3vw,42px);
}



.wrap-white-showcase__grid{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:clamp(64px,8vw,130px);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,1.4vw,20px);
  padding:0 clamp(10px,1.4vw,20px);
  text-align:left;
}



.wrap-white-showcase__card{
  min-width:0;
}



.wrap-white-showcase__media{
  position:relative;
  height:clamp(320px,68vh,760px);
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  background:#161616;
  border-radius:14px;
}



.wrap-white-showcase__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}



.wrap-white-showcase__card:hover .wrap-white-showcase__media img{
  transform:scale(1.05);
}



.wrap-white-showcase__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,0) 65%);
  pointer-events:none;
}



.wrap-white-showcase__caption{
  position:relative;
  z-index:1;
  width:100%;
  padding:clamp(18px,2.4vw,32px);
  color:#fff;
}



.wrap-white-showcase__caption h3{
  margin:0;
  font-size:clamp(1.15rem,1.8vw,1.6rem);
  font-weight:500;
  letter-spacing:-.01em;
}



.wrap-white-showcase__caption p{
  margin:6px 0 0;
  font-size:clamp(12px,1vw,14px);
  line-height:1.4;
  color:rgba(255,255,255,.78);
}


.wrap-light-section--gallery{
  background:#0a0a0a;
  color:#f2f2f2;
}



.wrap-light-section--gallery .wrap-light-section__inner{
  width:min(1560px,calc(100% - 64px));
  padding:clamp(100px,10vw,180px) 0;
}



.wrap-gallery__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:clamp(44px,6vw,90px);
}



.wrap-gallery__head h2{
  max-width:none;
  margin:10px 0 0;
  font-size:clamp(2.8rem,5vw,6rem);
  line-height:.95;
  letter-spacing:-.05em;
}



.wrap-gallery__link{
  display:inline-flex;
  align-items:center;
  gap:24px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.28);
  color:#f2f2f2;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}



.wrap-gallery__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr;
  grid-auto-rows:clamp(240px,25vw,440px);
  gap:clamp(12px,1.5vw,24px);
}



.wrap-gallery__item{
  margin:0;
  min-width:0;
}



.wrap-gallery__item div{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#1a1a1a;
  color:rgba(255,255,255,.38);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}



.wrap-gallery__item--tall{grid-row:span 2;}


.wrap-gallery__item--wide{grid-column:span 2;}

@media(max-width:900px){

  .wrap-gallery__grid{grid-template-columns:1fr 1fr;}


  .wrap-gallery__item--tall{grid-row:span 1;}


  .wrap-gallery__item--wide{grid-column:1 / -1;}
}

@media(max-width:620px){

 
  .wrap-light-section--intro .wrap-light-section__inner,
  .wrap-light-section--gallery .wrap-light-section__inner{
    width:min(100% - 36px,1560px);
  }


  .wrap-white-showcase__grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:0 8px;
  }


  .wrap-white-showcase__media{
    height:clamp(260px,50vh,420px);
  }


  .wrap-gallery__grid{
    grid-template-columns:1fr;
  }


  .wrap-gallery__item--wide{
    grid-column:auto;
  }


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



.wrap-light-section--services{
  background:var(--off-white);
}



.wrap-light-section--services .wrap-light-section__inner{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:clamp(60px,7vw,110px) clamp(20px,4vw,64px) clamp(100px,10vw,180px);
}



.wrap-services h2{
  margin:0 0 clamp(32px,4vw,54px);
  max-width:none;
  color:#f2f2f2;
  font-size:clamp(2rem,3.2vw,3.6rem);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:500;
}



.wrap-services__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.6vw,22px);
}



.wrap-services__card{
  padding:clamp(26px,2.4vw,36px) clamp(22px,2vw,30px);
  border-radius:14px;
  background:#161616;
  border:1px solid rgba(255,255,255,.06);
}



.wrap-services__card h3{
  margin:0 0 clamp(16px,1.8vw,22px);
  font-size:clamp(1.15rem,1.4vw,1.4rem);
  font-weight:600;
  letter-spacing:-.02em;
  color:#f2f2f2;
}



.wrap-services__card ul{
  margin:0;
  padding:0;
  list-style:none;
}



.wrap-services__card li{
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:14px;
  color:rgba(255,255,255,.68);
}



.wrap-services__card li:first-child{
  border-top:none;
}

@media(max-width:1100px){

  .wrap-services__grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:900px){

  .wrap-services__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:620px){

  .wrap-light-section--services .wrap-light-section__inner{
    padding-left:20px;
    padding-right:20px;
  }


  .wrap-services__grid{
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   Physical Branding → Selected Works spacing refinement
   ========================================================================== */

/* Give the Physical Branding section more breathing room before the
   horizontal Selected Works stage begins. */

/* Keep the full-width Selected Works stage visually separated from the
   Physical Branding content above it. */
.wrap-white-showcase > .selected-works-stage{
  margin-top:clamp(70px,8vw,140px);
}

/* ==========================================================================
   SHARED PILL BUTTONS
   (Start a Project, More About Us, View All Projects, View Project)
   Same pill shape + circle-fill rollover as the nav (pw-nav__chat/toggle).
   Default = white pill for dark backgrounds; inside .wrap-light-section the
   context flips to a black pill for off-white backgrounds. Fill circle
   geometry/scale is driven by JS (see gsap.js); color is pure CSS.
   ========================================================================== */
.pw-btn{
  --pw-btn-fg:#fff;
  --pw-btn-fg-hover:#111;
  --pw-btn-border:rgba(255,255,255,.5);
  --pw-btn-fill:#fff;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:6px;
  cursor:pointer;
  color:var(--pw-btn-fg);
  border:1px solid var(--pw-btn-border);
  background:transparent;
  transition:color .22s ease,border-color .3s ease;
}

.pw-btn:hover{
  color:var(--pw-btn-fg-hover);
  border-color:var(--pw-btn-fill);
}

.pw-btn__label,
.pw-btn__arrow{
  position:relative;
  z-index:1;
}

.pw-btn__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.pw-btn__arrow svg{
  display:block;
  width:13px;
  height:13px;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

.pw-btn:hover .pw-btn__arrow svg{
  transform:translate(1px,-1px);
}

.pw-btn-fill{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--pw-btn-fill);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%) scale(0);
  transform-origin:center;
  will-change:transform;
}

/* Section is black everywhere now, so buttons stay on the default
   white pill (--pw-btn defaults above) instead of inverting to black. */

/* ==========================================================
   Brand logos — full-width grid, fades out toward last row
   ========================================================== */

.wrap-brand-logos{
  display:block;
  min-height:auto;
  padding-top:clamp(28px,3.2vw,48px);
}

.wrap-brand-logos__intro{
  width:min(1260px, calc(100% - 40px));
  margin:0 auto 0;
  text-align:center;
}

.wrap-brand-logos__intro h2{
  margin:0 auto;
  max-width:none;
  color:#f2f2f2;
  font-size:clamp(2.25rem,3.5vw,4.4rem);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:500;
}

.wrap-brand-logos__note{
  margin:16px 0 0;
  color:rgba(255,255,255,.45);
  font-size:12px;
  letter-spacing:.02em;
}

.wrap-brand-logos__grid{
  width:100vw;
  margin:clamp(44px,5vw,72px) calc(50% - 50vw) 0;

  display:grid;
  grid-template-columns:repeat(6,1fr);

  background:transparent;
  border-top:1px solid rgba(255,255,255,.14);
}

.wrap-brand-logos__item{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1 / 1;
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:#f2f2f2;
}

.wrap-brand-logos__item:nth-child(6n){
  border-right:none;
}

.wrap-brand-logos__item svg{
  width:clamp(30px,3vw,42px);
  height:clamp(30px,3vw,42px);
}
.wrap-brand-logos__item img{
  width:min(78%,190px);
  height:min(78%,190px);
  object-fit:contain;
}
/* Row 1 — full strength */
.wrap-brand-logos__item:nth-child(-n+6){
  opacity:1;
}

/* Row 2 — starts to fade */
.wrap-brand-logos__item:nth-child(n+7):nth-child(-n+12){
  opacity:.55;
}

/* Row 3 — fades out further */
.wrap-brand-logos__item:nth-child(n+13):nth-child(-n+18){
  opacity:.22;
}

@media(max-width:760px){

  .wrap-brand-logos__grid{
    grid-template-columns:repeat(3,1fr);
  }

  .wrap-brand-logos__item:nth-child(6n){
    border-right:1px solid rgba(255,255,255,.14);
  }

  .wrap-brand-logos__item:nth-child(3n){
    border-right:none;
  }
}

/* ==========================================================
   Testimonials — full-width looping marquee
   ========================================================== */

.wrap-light-section--testimonials{
  background:var(--off-white);
  display:block;
  min-height:auto;
  padding:clamp(64px,7vw,110px) 0 clamp(70px,7.5vw,120px);
}

.wrap-light-section--testimonials .wrap-light-section__inner{
  width:min(1500px, calc(100% - 48px));
  margin:0 auto;
  padding:0 clamp(20px,4vw,64px);
}

.wrap-testimonials__head{
  max-width:720px;
  margin:0 auto clamp(44px,5vw,64px);
  text-align:center;
}

.wrap-testimonials__head .wrap-light-section__kicker{
  text-align:center;
  color:rgba(255,255,255,.5);
}

.wrap-testimonials__head h2{
  margin:0 auto;
  max-width:none;
  color:#f2f2f2;
  font-size:clamp(2.1rem,3.4vw,3.8rem);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:500;
}

.wrap-testimonials__rating{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 0;
}

.wrap-testimonials__rating-score{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#f2f2f2;
}

.wrap-testimonials__rating-stars{
  display:flex;
  gap:2px;
}

.wrap-testimonials__rating-stars svg{
  width:13px;
  height:13px;
  color:var(--pw-red,#f00303);
}

.wrap-testimonials__rating-count{
  font-size:12px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}

/* Marquee shell — full viewport bleed, fades at the edges */

.wrap-testimonials__marquee{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:clamp(36px,4vw,52px) 0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.wrap-testimonials__track{
  display:flex;
  width:max-content;
  gap:clamp(16px,1.6vw,24px);
  padding:0 clamp(16px,1.6vw,24px);
  animation:pw-testimonials-scroll 90s linear infinite;
}

.wrap-testimonials__marquee:hover .wrap-testimonials__track{
  animation-play-state:paused;
}

@keyframes pw-testimonials-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px){

  .wrap-testimonials__track{
    animation:none;
  }
}

/* Cards */

.wrap-testimonials__card{
  flex:0 0 clamp(280px,26vw,360px);
  width:clamp(280px,26vw,360px);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:clamp(26px,2.2vw,32px) clamp(22px,2vw,28px);
  border-radius:16px;
  background:#161616;
  border:1px solid rgba(255,255,255,.07);
}

.wrap-testimonials__date{
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.wrap-testimonials__stars{
  display:flex;
  gap:3px;
  margin-top:-6px;
}

.wrap-testimonials__stars svg{
  width:12px;
  height:12px;
  color:var(--pw-red,#f00303);
}

.wrap-testimonials__text{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.68);
}

.wrap-testimonials__meta{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:2px;
}

.wrap-testimonials__name{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#f2f2f2;
}

.wrap-testimonials__role{
  font-size:11px;
  letter-spacing:normal;
  text-transform:none;
  color:rgba(255,255,255,.45);
}

a.wrap-testimonials__role{
  align-self:flex-start;
  text-decoration:none;
  text-underline-offset:3px;
  transition:color .2s ease;
}

a.wrap-testimonials__role:hover,
a.wrap-testimonials__role:focus-visible{
  color:#fff;
  text-decoration:underline;
}

@media(max-width:620px){

  .wrap-testimonials__card{
    flex-basis:78vw;
    width:78vw;
  }
}

/* ==========================================================
   By The Numbers — dark stats band
   ========================================================== */


.wrap-light-section--stats{
  background:#0b0b0b;
  color:#fff;
}

.wrap-light-section--stats .wrap-light-section__inner{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:clamp(56px,6vw,90px) clamp(20px,4vw,64px);
}

.wrap-stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.wrap-stats__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:clamp(18px,2vw,28px) clamp(12px,1.6vw,24px);
  text-align:center;
  border-left:1px solid rgba(255,255,255,.12);
}

.wrap-stats__item:first-child{
  border-left:none;
}

.wrap-stats__number{
  font-family:'Orbitron', sans-serif;
  font-size:clamp(2rem,4vw,3.4rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--pw-red,#f00303);
  line-height:1;
}

.wrap-stats__label{
  max-width:16ch;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

@media(max-width:900px){

  .wrap-stats__grid{
    grid-template-columns:repeat(2,1fr);
    row-gap:clamp(24px,4vw,36px);
  }

  .wrap-stats__item:nth-child(3){
    border-left:none;
  }

  .wrap-stats__item:nth-child(odd){
    border-left:none;
  }

  .wrap-stats__item:nth-child(even){
    border-left:1px solid rgba(255,255,255,.12);
  }
}

@media(max-width:480px){

  .wrap-stats__grid{
    grid-template-columns:1fr;
  }

  .wrap-stats__item{
    border-left:none !important;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .wrap-stats__item:first-child{
    border-top:none;
  }
}

/* ==========================================================
   Why Performante — differentiators
   ========================================================== */

.wrap-light-section--why{
  background:var(--off-white);
}

.wrap-light-section--why .wrap-light-section__inner{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:clamp(60px,7vw,110px) clamp(20px,4vw,64px) clamp(100px,10vw,180px);
}

.wrap-why__head{
  margin:0 0 clamp(36px,4.5vw,56px);
}

.wrap-why__head .wrap-light-section__kicker{
  color:var(--pw-red,#f00303);
}

.wrap-why__head h2{
  margin:0;
  max-width:none;
  color:#f2f2f2;
  font-size:clamp(2rem,3.2vw,3.6rem);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:500;
}

.wrap-why__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,.14);
}

.wrap-why__item{
  padding:clamp(26px,2.4vw,34px) clamp(20px,1.8vw,26px) 0;
  border-right:1px solid rgba(255,255,255,.14);
}

.wrap-why__item:last-child{
  border-right:none;
}

.wrap-why__index{
  display:block;
  font-family:'Orbitron', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--pw-red,#f00303);
  margin-bottom:22px;
}

.wrap-why__item h3{
  margin:0 0 12px;
  font-size:19px;
  font-weight:600;
  letter-spacing:-.02em;
  color:#f2f2f2;
}

.wrap-why__item p{
  margin:0 0 clamp(26px,2.4vw,34px);
  font-size:13.5px;
  line-height:1.65;
  color:rgba(255,255,255,.62);
}

@media(max-width:900px){

  .wrap-why__grid{
    grid-template-columns:repeat(2,1fr);
  }

  .wrap-why__item:nth-child(2n){
    border-right:none;
  }

  .wrap-why__item:nth-child(n+3){
    border-top:1px solid rgba(255,255,255,.14);
  }
}

@media(max-width:620px){

  .wrap-light-section--why .wrap-light-section__inner{
    padding-left:20px;
    padding-right:20px;
  }

  .wrap-why__grid{
    grid-template-columns:1fr;
  }

  .wrap-why__item{
    border-right:none !important;
  }

  .wrap-why__item:nth-child(n+2){
    border-top:1px solid rgba(255,255,255,.14);
  }
}

/* ==========================================================
   Gallery lightbox
   ========================================================== */

.pw-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,5vw,64px);
  background:rgba(10,10,10,.92);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease;
}

.pw-lightbox.is-open{
  opacity:1;
  visibility:visible;
}

.pw-lightbox__frame{
  position:relative;
  width:min(900px,70vw);
  height:min(620px,90vh);
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
  cursor:grab;
  transition:transform .3s ease;
}

.pw-lightbox__frame.is-dragging{
  cursor:grabbing;
  transition:none;
}

.pw-lightbox__img{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  border-radius:6px;
  transform:scale(.96);
  transition:transform .3s ease;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}

.pw-lightbox.is-open .pw-lightbox__img{
  transform:scale(1);
}

.pw-lightbox__close{
  position:absolute;
  top:clamp(16px,3vw,32px);
  right:clamp(16px,3vw,32px);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}

.pw-lightbox__close:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.6);
}

.pw-lightbox__close svg{
  width:18px;
  height:18px;
}

.pw-lightbox__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(10,10,10,.35);
  color:#fff;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, opacity .25s ease;
}

.pw-lightbox__arrow:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.6);
}

.pw-lightbox__arrow:disabled{
  opacity:0;
  pointer-events:none;
}

.pw-lightbox__arrow svg{
  width:22px;
  height:22px;
}

.pw-lightbox__arrow--prev{
  left:clamp(12px,2.5vw,28px);
}

.pw-lightbox__arrow--next{
  right:clamp(12px,2.5vw,28px);
}

@media(max-width:620px){

  .pw-lightbox__arrow{
    width:40px;
    height:40px;
  }

  .pw-lightbox__arrow svg{
    width:18px;
    height:18px;
  }
}


@media (min-width:761px) and (max-width:1400px){

  .wrap-about-panel{
    grid-template-columns:minmax(0px,.14fr) minmax(0,1.3fr);
    gap:clamp(8px,1.6vw,24px);
    padding-top:12vh;
    padding-bottom:12vh;
  }

  .wrap-about-panel__label span{
    font-size:12px;
  }

  .wrap-about-panel__lower{
    margin-top:clamp(48px,3vw,90px);
  }

  .wrap-about-panel__columns{
    grid-template-columns:minmax(0,1.5fr) minmax(220px,.9fr);
    gap:clamp(32px,5vw,80px);
  }

  .wrap-about-panel__motto-media{
    width:min(300px,100%);
  }

  .wrap-about-panel__snippet p{
    font-size:clamp(.85rem,1.4vw,1rem);
    max-width:36ch;
  }

  .wrap-about-panel__button{
    margin-top:36px;
    min-height:44px;
    padding:0 16px;
    gap:24px;
    font-size:10px;
  }

  .wrap-about-panel__philosophy{
    font-size:clamp(0.5rem,1.4vw,0.8rem);
    max-width:22ch;
    padding-top:10rem;
  }

.wrap-branding-card{
  aspect-ratio:3 / 3.6;
}

.wrap-branding-card__title{
  font-size:clamp(0.95rem,1.6vw,1.2rem);
}

.selected-project-card{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  /* centers image + text together vertically */
  justify-content:center;

  gap:clamp(18px,1.7vw,30px);
  
  padding:0;
  overflow:hidden;
}

.selected-project-card__media{
  width:100%;
  height:40vh;
  max-height:60vh;
  
  flex:none;

  overflow:hidden;
  background:#1a1a1a;
}
.selected-works-panel{
  flex:0 0 50vw;
  width:50vw;
  height:100vh;
  padding:clamp(26px,2.8vw,54px);
  display:flex;
  align-items:stretch;
  background:var(--off-white);
  border-left: 1px solid #6968684c;
}

}





/* ==========================================================================
   ============================================================================
   NEW — PW INFINITE GALLERY (added by Claude)
   Full-width, infinite-loop (both directions), arrow-controlled image
   gallery with a title + description header.
   Markup: index.html, section#pwInfiniteGallery
   JS:     js/gsap.js, bottom of file, same "PW INFINITE GALLERY" banner
   ============================================================================
   ========================================================================== */

.pw-infinite-gallery{
  position:relative;
  z-index:70;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:var(--off-white);
  color:#f2f2f2;
  padding:clamp(64px,7vw,110px) 0 clamp(70px,7.5vw,120px);
  overflow:hidden;
}

.pw-infinite-gallery__head{
  width:min(1500px, calc(100% - 48px));
  margin:0 auto clamp(44px,5vw,64px);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}

.pw-infinite-gallery__heading{
  max-width:640px;
}

.pw-infinite-gallery__kicker{
  margin:0 0 22px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.pw-infinite-gallery__title{
  margin:0 0 16px;
  max-width:none;
  color:#f2f2f2;
  font-size:clamp(2.1rem,3.4vw,3.8rem);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:500;
}

.pw-infinite-gallery__desc{
  max-width:52ch;
  margin:0;
  font-size:clamp(1rem,1.3vw,1.2rem);
  line-height:1.5;
  color:#c9c9c9;
}

.pw-infinite-gallery__arrows{
  display:flex;
  gap:.75rem;
  flex-shrink:0;
}

.pw-infinite-gallery__arrow{
  width:64px;
  height:64px;
  border-radius:14px;
  border:1px solid #d6d6d6;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:var(--off-white);
  color:#f2f2f2;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .15s ease;
}

.pw-infinite-gallery__arrow svg{
  width:22px;
  height:22px;
  display:block;
}

.pw-infinite-gallery__arrow:hover{
  background:#ffffff;
  border-color:#ffffff;
  color:#0a0a0a;
}

.pw-infinite-gallery__arrow:active{
  transform:scale(.92);
}

.pw-infinite-gallery__viewport{
  width:100%;
  overflow:hidden;
  cursor:grab;
}

.pw-infinite-gallery__viewport:active{
  cursor:grabbing;
}

.pw-infinite-gallery__track{
  display:flex;
  align-items:stretch;
  will-change:transform;
}

.pw-infinite-gallery__slide{
  flex:0 0 auto;
  width:clamp(340px, 38vw, 620px);
  height:clamp(230px, 24vw, 380px);
  margin:0 8px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  background:#1a1a1a;
  box-shadow:0 12px 30px rgba(0,0,0,.1);
  cursor:pointer;
}

.pw-infinite-gallery__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* Shown automatically (via JS) if a slide's image fails to load, so the
   gallery never renders as blank/invisible boxes when an image path
   is missing or not yet uploaded. */
.pw-infinite-gallery__slide-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:20px;
  font-size:.85rem;
  line-height:1.35;
  letter-spacing:.02em;
  color:rgba(255,255,255,.55);
  background:
    linear-gradient(0deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 45%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 2px, transparent 2px, transparent 14px);

}

@media(max-width:760px){
  .pw-infinite-gallery__head{
    align-items:flex-start;
  }

  .pw-infinite-gallery__arrows{
    order:2;
  }

  .pw-infinite-gallery__slide{
    width:clamp(240px, 84vw, 380px);
    height:clamp(170px, 58vw, 260px);
  }
}

/* ==========================================================================
   END — PW INFINITE GALLERY
   ========================================================================== */

/* ==========================================================================
   Performante motion system — title / card / selected work enhancements
   ========================================================================== */
.pw-title-reveal{
  overflow:visible !important;
}

.pw-title-word{
  display:inline-block;
  white-space:nowrap;
  overflow:visible;
}

.pw-title-char{
  display:inline-block;
  overflow:visible;
  will-change:transform, opacity, filter;
}

/* Typography-safe scroll fill: the heading itself is never split into spans. */
.pw-scroll-fill-text{
  --pw-fill:0%;
  color:transparent !important;
  background-image:linear-gradient(
    90deg,
    #fff 0%,
    #fff var(--pw-fill),
    rgba(255,255,255,.18) var(--pw-fill),
    rgba(255,255,255,.18) 100%
  );
  background-size:100% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.wrap-branding-grid{
  perspective:1400px;
  perspective-origin:50% 20%;
}

.wrap-branding-card{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform, opacity;
}

.selected-project-card__media img{
  will-change:transform;
}

/* The heading now uses the GSAP per-letter reveal instead of the old parent fade. */
.wrap-branding-intro h2{
  opacity:1;
  transform:none;
  transition:none;
  overflow:visible;
}


/* Line-by-line scroll fill: preserve original heading metrics exactly. */
.pw-line-fill-source{
  position:relative;
  color:rgba(255,255,255,.18) !important;
  overflow:visible;
}

.pw-line-fill-overlay{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  color:#fff;
  font:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-align:inherit;
  white-space:normal;
  pointer-events:none;
  overflow:visible;
  -webkit-text-fill-color:currentColor;
}

/* Disable the legacy observer reveal for this block; GSAP owns it now. */
.wrap-branding-intro h2,
.wrap-branding-intro__desc{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  visibility:visible !important;
}

.wrap-branding-grid,
.wrap-branding-card{
  visibility:visible;
}


/* ============================================================================
   BLACK5 — HOMEPAGE STRUCTURE ADDITIONS
   Why Performante / Process / Proof / Closing CTA
   ============================================================================ */
.pw5-shell{
  width:min(100% - clamp(40px,6vw,110px),1600px);
  margin:0 auto;
}

.pw5-kicker{
  margin:0 0 18px;
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(242,242,242,.55);
}

.pw5-section-head{
  display:grid;
  grid-template-columns:minmax(140px,.42fr) minmax(0,1.58fr);
  gap:clamp(28px,5vw,100px);
  align-items:start;
}

.pw5-section-head h2,
.pw5-process-head h2,
.pw5-closing-cta h2{
  margin:0;
  font-weight:500;
  letter-spacing:-.06em;
}

.pw5-why{
  position:relative;
  background:#0a0a0a;
  color:#f2f2f2;
  padding:clamp(110px,12vw,210px) 0 clamp(100px,11vw,190px);
  border-top:1px solid rgba(255,255,255,.09);
}

.pw5-why .pw5-section-head h2{
  max-width:13ch;
  font-size:clamp(3rem,6.7vw,8.5rem);
  line-height:.88;
}

.pw5-why-grid{
  margin-top:clamp(80px,10vw,170px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.16);
}

.pw5-why-item{
  min-height:clamp(330px,31vw,500px);
  padding:clamp(28px,3vw,50px);
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(255,255,255,.16);
}
.pw5-why-item:last-child{border-right:0}
.pw5-index{
  display:block;
  color:rgba(255,255,255,.36);
  font-size:11px;
  letter-spacing:.12em;
}
.pw5-why-item h3{
  margin:auto 0 22px;
  font-size:clamp(2rem,3.8vw,5rem);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:500;
}
.pw5-why-item p{
  margin:0;
  max-width:35ch;
  color:rgba(242,242,242,.64);
  font-size:clamp(13px,1vw,16px);
  line-height:1.55;
}

.pw5-process{
  position:relative;
  background:#f0f0ed;
  color:#0a0a0a;

}
.pw5-process .pw5-kicker{color:rgba(10,10,10,.48)}
.pw5-process-head{
  display:grid;
  grid-template-columns:.42fr 1.12fr .65fr;
  gap:clamp(26px,4vw,80px);
  align-items:start;
}
.pw5-process-head h2{
  max-width:10ch;
  font-size:clamp(3rem,6vw,7.5rem);
  line-height:.88;
}
.pw5-process-intro{
  margin:4px 0 0;
  max-width:34ch;
  color:rgba(10,10,10,.6);
  font-size:clamp(14px,1.05vw,18px);
  line-height:1.5;
}
.pw5-process-grid{
  margin-top:clamp(80px,9vw,150px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(10,10,10,.2);
  border-bottom:1px solid rgba(10,10,10,.2);
}
.pw5-process-step{
  min-height:300px;
  padding:clamp(24px,2.5vw,42px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid rgba(10,10,10,.2);
}
.pw5-process-step:last-child{border-right:0}
.pw5-process-step__top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.pw5-process-step__top span:first-child{color:rgba(10,10,10,.4)}
.pw5-process-step p{
  margin:0;
  max-width:29ch;
  color:rgba(10,10,10,.66);
  font-size:clamp(13px,.95vw,16px);
  line-height:1.5;
}

.pw5-proof{
  background:#0a0a0a;
  color:#f2f2f2;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pw5-proof-grid{
  width:min(100% - clamp(40px,6vw,110px),1600px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.pw5-proof-item{
  min-height:190px;
  padding:clamp(28px,3vw,48px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid rgba(255,255,255,.12);
}
.pw5-proof-item:last-child{border-right:0}
.pw5-proof-item strong{
  font-size:clamp(1.65rem,2.7vw,3.8rem);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:500;
}
.pw5-proof-item span{
  margin-top:32px;
  color:rgba(242,242,242,.5);
  font-size:10px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.pw5-closing-cta{
  position:relative;
 
  min-height:0;

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

  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:#0a0a0a;
  padding:0;
}
.pw5-closing-cta__wordmark{
  position:relative;
  display:block;
  width:calc(100% + 30px);
  margin:0 0 0 -4px;
  padding:0;

  overflow:hidden;
  text-align:left;
  line-height:.76;
  font-size:0;
  text-decoration:none;
  flex:none;
}

.pw5-closing-cta__wordmark span{
  display:inline-block;
  font-family:'Zalando Sans', sans-serif;
  font-weight:800;
  font-size:clamp(3.5rem,17.5vw,300px);
  line-height:.76;

  white-space:nowrap;

  transform:translateY(8px);
  transform-origin:left bottom;
  will-change:transform;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pw5-closing-cta__wordmark span{
    color:transparent;
    background-image:
      linear-gradient(200deg, rgba(240,3,3,.55) 0%, rgba(8,8,8,.35) 50%, rgba(240,3,3,.45) 100%),
      var(--pw5-wordmark-img);
    background-size:cover, cover;
    background-position:center, center 42%;
    background-repeat:no-repeat, no-repeat;
    background-blend-mode:multiply, normal;
    -webkit-background-clip:text;
    background-clip:text;
    filter:brightness(1.3) contrast(1.15) saturate(1.05);
  }
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
  .pw5-closing-cta__wordmark span{color:#fff!important;-webkit-background-clip:initial!important;background-clip:initial!important;background-image:none!important;filter:none!important;}
}
.pw5-closing-cta__media,
.pw5-closing-cta__veil{
  position:absolute;
  inset:0;
}
.pw5-closing-cta__media{z-index:-3}
.pw5-closing-cta__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.04);
}
.pw5-closing-cta__veil{
  z-index:-2;
  background:linear-gradient(180deg,rgba(10,10,10,1) 0%,rgba(10,10,10,0) 65%);
}

/* Initial states are JS-enhanced only. No content is hidden without GSAP. */
.pw5-js-ready .pw5-why-item,
.pw5-js-ready .pw5-process-step,
.pw5-js-ready .pw5-proof-item{
  will-change:transform,opacity,filter;
}

@media(max-width:900px){
  .pw5-section-head,
  .pw5-process-head{grid-template-columns:1fr}
  .pw5-why-grid{grid-template-columns:1fr}
  .pw5-why-item{min-height:280px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .pw5-why-item:last-child{border-bottom:0}
  .pw5-process-grid{grid-template-columns:repeat(2,1fr)}
  .pw5-process-step:nth-child(2){border-right:0}
  .pw5-process-step:nth-child(-n+2){border-bottom:1px solid rgba(10,10,10,.2)}
  .pw5-proof-grid{grid-template-columns:repeat(2,1fr)}
  .pw5-proof-item:nth-child(2){border-right:0}
  .pw5-proof-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
}

@media(max-width:600px){
  .pw5-shell,
  .pw5-proof-grid{width:calc(100% - 36px)}
  .pw5-process-grid{grid-template-columns:1fr}
  .pw5-process-step{min-height:230px;border-right:0;border-bottom:1px solid rgba(10,10,10,.2)!important}
  .pw5-process-step:last-child{border-bottom:0!important}
  .pw5-proof-grid{grid-template-columns:1fr}
  .pw5-proof-item{min-height:150px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)!important}
  .pw5-proof-item:last-child{border-bottom:0!important}
  .pw5-closing-cta{min-height:420px}
  .pw5-closing-cta__wordmark span{font-size:clamp(3rem,20vw,180px)}
}
/* ============================================================================
   END BLACK5 — HOMEPAGE STRUCTURE ADDITIONS
   ============================================================================ */

/* BLACK5 visibility fix: legacy #site section whitelist was hiding these. */
#site > .pw5-why,
#site > .pw5-process,
#site > .pw5-proof {
  display:block !important;
}

#site > .pw5-closing-cta {
  display:flex !important;
}

/* ============================================================================
   BLACK7 — CLOSING CTA + FOOTER (combined)
   Top row: eyebrow/heading left, CTA link right.
   Bottom row: copyright left, Business Inquiry + Social columns right.
   Sits on the same near-black the PERFORMANTE section below fades into.
   ============================================================================ */
.pw6-final-cta{
  position:relative;
  background:#0a0a0a;
  color:#fff;

  padding:
    clamp(50px,5vw,75px)
    clamp(24px,5vw,80px)
    35px;
}
.pw6-final-cta__inner{
  width:min(100% - 48px,1600px);
  margin:0 auto;
}

.pw6-final-cta__top{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(32px,4vw,48px);
}
.pw6-final-cta__heading{
  max-width:920px;
}
.pw6-final-cta__eyebrow{
  margin:0 0 22px;
  font-family:'Zalando Sans', sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.pw6-final-cta__top h2{
  margin:0;
  font-family:'Zalando Sans', sans-serif;
  font-weight:500;
  letter-spacing:-.04em;
  line-height:0.96;
  color:#f9f9fa;
  font-size:clamp(2.8rem,4vw,4.6rem);
}
.pw6-final-cta__button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:56px;
  min-height:66px;
  padding:0 28px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}

.pw6-final-cta__divider{
  margin:clamp(56px,6.4vw,88px) 0 clamp(38px,4.4vw,54px);
  border-top:1px solid rgba(255,255,255,.14);
}

.pw6-final-cta__bottom{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(36px,5vw,70px);
  flex-wrap:wrap;
  margin-top:4rem;
}


/* LEFT SIDE
   Logo → Bio → Copyright
*/
.pw6-final-cta__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:400px;
}

.pw6-final-cta__logo{
  width:50px;
  height:auto;
  margin-bottom:3rem;
}


/* BIO */

.pw6-final-cta__bio{
  margin-bottom:3.5rem;
}

.pw6-final-cta__bio-name{
  margin:0 0 5px;
  font-family:'Zalando Sans', sans-serif;
  font-size:18px;
  line-height:1.2;
  font-weight:500;
  color:#fff;
}

.pw6-final-cta__bio-title{
  margin:0 0 14px;
  font-family:'Zalando Sans', sans-serif;
  font-size:12px;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,.45);
}

.pw6-final-cta__bio-desc{
  max-width:340px;
  margin:0;
  font-family:'Zalando Sans', sans-serif;
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.6);
}


/* COPYRIGHT */

.pw6-final-cta__copyright{
  margin:0;
  font-family:'Zalando Sans', sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.4);
}
.pw6-final-cta__info{
  display:flex;
  gap:clamp(60px,7vw,130px);
}
.pw6-final-cta__info-col{
  min-width:170px;
}
.pw6-final-cta__info-label{
  margin:0 0 16px;
  font-family:'Zalando Sans', sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:rgba(255, 255, 255, 0.783);
}
.pw6-final-cta__info-col a{
  display:block;
  color:#fff;
  text-decoration:none;
  font-size:16px;
  line-height:1.6;
  opacity:.92;
  margin-bottom:6px;
  transition:color .2s ease, opacity .2s ease;
}
.pw6-final-cta__info-col a:hover{
  color:var(--pw-red,#f00303);
  opacity:1;
}
.pw6-final-cta__prefix{
  color:rgba(255,255,255,.4);
  margin-right:2px;
}
.pw6-final-cta__social-grid{
  display:grid;
  grid-template-columns:repeat(2,auto);
  column-gap:32px;
}
.pw6-final-cta__social-grid a{
  margin-bottom:6px;
}

@media(max-width:700px){
  .pw6-final-cta__button{width:100%; justify-content:space-between}
  .pw6-final-cta__bottom{
    flex-direction:column;
    gap:32px;
  }
  .pw6-final-cta__copyright{order:2}
  .pw6-final-cta__info{order:1; width:100%; justify-content:space-between}
}


/* ============================================================================
   BLACK5 — PROCESS TIMELINE V2
   ============================================================================ */
.pw5-process{
  background:#0a0a0a !important;
  color:#f2f2f2 !important;

  overflow:visible;
}

.pw5-process .pw5-kicker{
  color:rgba(255,255,255,.42) !important;
  margin-bottom:22px;
}

.pw5-process-head{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0 !important;
  width:min(100%,1100px);
  margin:0 auto;
}

.pw5-process-head h2{
  max-width:11ch !important;
  margin:0 auto !important;
  color:#f2f2f2;
  font-size:clamp(3.5rem,7.6vw,9rem) !important;
  line-height:.86 !important;
  letter-spacing:-.065em !important;
  font-weight:500;
}

.pw5-process-intro{
  max-width:42ch !important;
  margin:32px auto 0 !important;
  color:rgba(255,255,255,.56) !important;
  font-size:clamp(14px,1.05vw,18px) !important;
  line-height:1.55 !important;
  text-align:center;
}

.pw5-process-timeline{
  --process-side-gap:clamp(70px,8vw,150px);
  position:relative;
  width:min(100%,1280px);
  margin:clamp(120px,14vw,220px) auto 0;
  padding:clamp(20px,2vw,36px) 0;
}

.pw5-process-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.16);
  overflow:visible;
}

.pw5-process-line__fill{
  position:absolute;
  inset:0;
  transform:scaleY(0);
  transform-origin:top center;
  background:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.16);
  will-change:transform;
}

.pw5-process-milestone{
  position:relative;
  min-height:clamp(280px,32vw,470px);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
}

.pw5-process-milestone + .pw5-process-milestone{
  margin-top:clamp(45px,6vw,100px);
}

.pw5-process-point{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(54px,4.6vw,72px);
  height:clamp(54px,4.6vw,72px);
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.34);
  z-index:3;
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease;
}

.pw5-process-point i{
  font-style:normal;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.pw5-process-milestone.is-active .pw5-process-point{
  background:#fff;
  border-color:#fff;
  color:#0a0a0a;
  box-shadow:0 0 28px rgba(255,255,255,.18);
  transform:translate(-50%,-50%) scale(1.04);
}

.pw5-process-copy{
  grid-row:1;
  align-self:center;
  width:min(100%,440px);
  opacity:.42;
  filter:blur(1.5px);
  transform:translateY(24px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
}

.pw5-process-milestone.is-active .pw5-process-copy{
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}

.pw5-process-milestone--right .pw5-process-copy{
  grid-column:2;
  justify-self:start;
  margin-left:var(--process-side-gap);
  text-align:left;
}

.pw5-process-milestone--left .pw5-process-copy{
  grid-column:1;
  justify-self:end;
  margin-right:var(--process-side-gap);
  text-align:right;
}

.pw5-process-copy h3{
  margin:0;
  color:#fff;
  font-size:clamp(2.5rem,5vw,6.5rem);
  line-height:.88;
  letter-spacing:-.06em;
  font-weight:500;
}

.pw5-process-copy p{
  margin:20px 0 0;
  max-width:34ch;
  color:rgba(255,255,255,.58);
  font-size:clamp(13px,1vw,16px);
  line-height:1.55;
}

.pw5-process-milestone--left .pw5-process-copy p{margin-left:auto}

/* Opposite-side 4:3 image for each process step */
.pw5-process-media{
  grid-row:1;
  align-self:center;
  width:min(100%,260px);
  aspect-ratio:3/4;
  border-radius:2px;
  overflow:hidden;
  background:#141414;
  opacity:.42;
  filter:blur(1.5px);
  transform:translateY(24px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
}

.pw5-process-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pw5-process-milestone.is-active .pw5-process-media{
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}

.pw5-process-milestone--right .pw5-process-media{
  grid-column:1;
  justify-self:end;
  margin-right:clamp(58px,7vw,110px);
}

.pw5-process-milestone--left .pw5-process-media{
  grid-column:2;
  justify-self:start;
  margin-left:clamp(58px,7vw,110px);
}

@media(max-width:760px){
  .pw5-process{
    padding:100px 0 150px !important;
  }
  .pw5-process-timeline{
    width:100%;
    margin-top:100px;
  }
  .pw5-process-line{
    left:27px;
  }
  .pw5-process-milestone{
    min-height:270px;
    display:block;
    padding-left:82px;
  }
  .pw5-process-milestone + .pw5-process-milestone{
    margin-top:30px;
  }
  .pw5-process-point{
    left:27px;
  }
  .pw5-process-milestone--right .pw5-process-copy,
  .pw5-process-milestone--left .pw5-process-copy{
    width:100%;
    margin:0;
    text-align:left;
    transform:translateY(20px);
  }
  .pw5-process-milestone--left .pw5-process-copy p{margin-left:0}

  .pw5-process-media{
    width:100%;
    max-width:220px;
    margin:18px 0 0 !important;
    transform:translateY(20px);
  }
}
/* ============================================================================
   END BLACK5 — PROCESS TIMELINE V2
   ============================================================================ */


/* ============================================================================
   BLACK5 — PROCESS TIMELINE V3 / SURGICAL REFINEMENT
   ============================================================================ */
.pw5-process{
  padding:clamp(100px,10vw,165px) 0 clamp(150px,15vw,240px) !important;
}

.pw5-process-head{
  display:block !important;
  width:min(100%,780px);
  margin:0 auto;
  text-align:center;
}

.pw5-process-head .pw5-kicker{
  margin:0 0 18px;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.44) !important;
}

.pw5-process-head h2{
  margin:0 auto;
  max-width:14ch !important;
  font-size:clamp(2.25rem,4vw,4.8rem) !important;
  line-height:.94 !important;
  letter-spacing:-.045em !important;
  font-weight:450 !important;
}

.pw5-process-intro{
  margin:24px auto 0 !important;
  max-width:42ch !important;
  font-size:clamp(12px,.82vw,14px) !important;
  line-height:1.65 !important;
  color:rgba(255,255,255,.48) !important;
}

.pw5-process-timeline{
  width:min(100%,1120px) !important;
  margin:clamp(100px,11vw,175px) auto 0 !important;
}

.pw5-process-milestone{
  min-height:clamp(260px,27vw,390px) !important;
}

.pw5-process-milestone + .pw5-process-milestone{
  margin-top:clamp(40px,5vw,78px) !important;
}

.pw5-process-point{
  width:clamp(22px,3.5vw,34px) !important;
  height:clamp(22px,3.5vw,34px) !important;
}

.pw5-process-point i{
  font-size:12px !important;
  letter-spacing:.14em !important;
}

.pw5-process-copy{
  width:min(100%,350px) !important;
  opacity:.34;
  filter:blur(1px);
  transform:translateY(14px);
}

.pw5-process-copy h3{
  font-size:clamp(1.35rem,2.2vw,2.6rem) !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
  font-weight:450 !important;
}

.pw5-process-copy p{
  margin-top:14px !important;
  max-width:30ch !important;
  font-size:clamp(11px,.82vw,13px) !important;
  line-height:1.65 !important;
  color:rgb(255, 255, 255) !important;
}

.pw5-process-milestone.is-active .pw5-process-copy p{
  color:rgba(255,255,255,.68) !important;
}

.pw5-process-milestone--right .pw5-process-copy{
  margin-left:clamp(58px,7vw,110px) !important;
}

.pw5-process-milestone--left .pw5-process-copy{
  margin-right:clamp(58px,7vw,110px) !important;
}

@media(max-width:760px){
  .pw5-process-head{width:min(100%,520px)}
  .pw5-process-timeline{margin-top:82px !important}
  .pw5-process-copy{width:100% !important}
  .pw5-process-milestone--right .pw5-process-copy,
  .pw5-process-milestone--left .pw5-process-copy{margin:0 !important}
}
/* ============================================================================
   END BLACK5 — PROCESS TIMELINE V3
   ============================================================================ */

/* ============================================================================
   BLACK5 — PROCESS TIMELINE V4 / LINE PROGRESS + SOFT END FADE
   ============================================================================ */
.pw5-process-line{
  /* permanent gray track */
  background:rgba(255,255,255,.16) !important;
  overflow:hidden !important;

  /* let the complete timeline disappear naturally at the bottom */
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 90%,
    rgba(0,0,0,.72) 95%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 90%,
    rgba(0,0,0,.72) 95%,
    transparent 100%
  );
}

.pw5-process-line__fill{
  /* white progress layer; GSAP only changes scaleY */
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  background:#fff !important;
  transform:scaleY(0);
  transform-origin:top center !important;
  will-change:transform;
  box-shadow:none !important;
}
/* ============================================================================
   END BLACK5 — PROCESS TIMELINE V4
   ============================================================================ */
/* FORCE DESKTOP CLOSING SECTION HEIGHT */
@media (min-width: 901px){

  #site > section.pw5-closing-cta{
    height:480px !important;
    min-height:480px !important;
    max-height:480px !important;
    padding:0 !important;
    margin:0 !important;

    display:flex !important;
    align-items:flex-end !important;
    flex:none !important;
  }

  #site > section.pw5-closing-cta .pw5-closing-cta__wordmark{
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
  }
}



/* FULL-SCREEN HERO CANVAS — camera FOV preserves the original icon size. */
.hero .stackflow-shell{padding:0;}
.hero-3d-center{width:100%;height:100%;overflow:visible;}
#cube3d{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
}
#cube3d canvas{display:block;width:100% !important;height:100% !important;}

/* Scroll-linked project depth: keep full photographs framed while the media tilts. */
.selected-works-panel--project .selected-project-card{overflow:visible;perspective:1400px}
.selected-project-card__media{will-change:transform;backface-visibility:hidden;box-shadow:0 24px 48px -20px rgba(0,0,0,.28)}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.selected-project-card__media{box-shadow:none}}


/* ========================================================================== */
/* css\index-copy-trucks.css */
/* ========================================================================== */
.pw-truck-roll{position:relative;z-index:23;height:320vh;background:transparent;color:#fff;pointer-events:auto}
.pw-truck-roll__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:transparent;perspective:1200px}
.pw-truck-roll__truck{position:absolute;left:0;bottom:15%;width:min(72vw,1000px);height:auto;object-fit:contain;object-position:bottom;opacity:0;transform:translate3d(-120vw,0,0);transform-origin:center bottom;will-change:transform,opacity}
.pw-truck-roll__details{position:absolute;z-index:2;left:clamp(24px,5vw,90px);bottom:clamp(24px,5vh,70px);max-width:min(310px,42vw);color:#fff;text-shadow:0 2px 15px rgba(0,0,0,.7)}
.pw-truck-roll__description{margin:0 0 16px;font-size:clamp(13px,1.2vw,16px);line-height:1.45}
.pw-truck-roll__project{display:inline-flex;align-items:center;gap:14px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.8);color:#fff;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.13em;transition:opacity .2s ease}
.pw-truck-roll__project svg{width:17px;height:17px;transition:transform .2s ease}
.pw-truck-roll__project:hover{opacity:.75}.pw-truck-roll__project:hover svg{transform:translateX(4px)}
.pw-truck-roll__project:focus-visible{outline:2px solid #fff;outline-offset:5px}
.pw-truck-roll__caption{position:absolute;z-index:2;right:clamp(24px,5vw,90px);bottom:clamp(24px,5vh,70px);margin:0;color:#fff;font-size:clamp(16px,2vw,26px);font-weight:500;letter-spacing:-.025em;text-align:right;text-shadow:0 2px 15px rgba(0,0,0,.65)}
@media(max-width:760px){.pw-truck-roll{height:280vh}.pw-truck-roll__truck{width:98vw;max-width:none;bottom:28%}.pw-truck-roll__caption{top:13%;bottom:auto;font-size:18px}.pw-truck-roll__details{left:24px;bottom:5%;max-width:min(300px,80vw)}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.pw-truck-roll{height:auto;min-height:100vh}.pw-truck-roll__stage{position:relative;min-height:100vh}.pw-truck-roll__truck{display:none}.pw-truck-roll__truck:nth-of-type(1){display:block;opacity:1;transform:translateX(-10%);bottom:24%}}


/* ========================================================================== */
/* css\index2-hero.css */
/* ========================================================================== */
.index2-menu .wrap-scroll-copy__panel--hero{align-items:flex-end}
.index2-menu .wrap-hero-copy{align-self:flex-end}
.index2-menu .wrap-hero-stats__3m{display:block;width:72px;height:auto;object-fit:contain}
.index2-menu .wrap-hero-side{display:flex;flex-direction:column;align-items:flex-end}
.index2-menu .index2-text-link{
  display:inline-flex;align-items:center;gap:22px;padding:0 0 9px;
  color:#fff;text-decoration:none;text-transform:uppercase;font-size:11px;font-weight:700;
  letter-spacing:.14em;border-bottom:1px solid rgba(255,255,255,.8);pointer-events:auto;
}
.index2-menu .index2-motion-link{position:relative;min-height:0;border-bottom:0;box-sizing:border-box;overflow:visible;background:transparent;opacity:1}
.index2-menu .hero-project-link{
  position:absolute;left:clamp(22px,2vw,50px);top:50%;transform:translateY(-50%);
  border-bottom:0;
}
.index2-menu .index2-text-link__label{display:inline-flex;flex:0 0 auto;white-space:pre}
.index2-menu .index2-text-link__letter{display:inline-block;white-space:pre}
.index2-menu .index2-text-link svg{width:21px;height:21px;transform:translateX(-5px);opacity:.65}
.index2-menu .index2-motion-link .hero-project-link__arrow-window{display:block;width:21px;height:21px;overflow:hidden;flex:0 0 21px}
.index2-menu .index2-motion-link .hero-project-link__arrow-window svg{display:block;width:21px;height:21px;transform:none;opacity:1}
.index2-menu .index2-motion-link .hero-project-link__arrow-window--left{position:absolute;left:0;top:0;opacity:0}
.index2-menu .index2-motion-link .hero-project-link__underline{position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform-origin:right center;pointer-events:none}
.index2-menu .selected-works-button.index2-motion-link,.index2-menu .selected-project-card__link.index2-motion-link{padding:0 0 9px;gap:22px}
.index2-menu .pw-truck-roll__project.index2-motion-link{padding:0 0 9px;border-bottom:0;opacity:1}
.index2-menu .pw-truck-roll__project.index2-motion-link:hover svg{transform:none}
.index2-menu .index2-text-link:focus-visible{outline:2px solid #fff;outline-offset:5px}
.index2-menu .about-project-link{margin-top:26px}
.index2-menu .wrap-about-panel__columns{grid-template-columns:minmax(0,1.45fr) minmax(280px,.9fr);gap:clamp(38px,6vw,110px)}
.index2-menu .wrap-about-panel__motto-media{width:min(620px,100%);aspect-ratio:6/5}
@media(max-width:900px){
  .index2-menu .wrap-scroll-copy__panel--hero{justify-content:flex-end;gap:28px}
  .index2-menu .wrap-hero-copy{align-self:flex-start}
  .index2-menu .wrap-hero-side{align-self:flex-end}
  .index2-menu .wrap-about-panel__motto-media{width:min(560px,100%)}
}
@media(max-width:760px){
  .index2-menu .wrap-scroll-copy__panel--hero{padding-bottom:34px;gap:24px}
  .index2-menu .wrap-hero-copy{position:absolute;top:94px;left:20px;right:20px;width:auto;max-width:none}
  .index2-menu .hero-project-link{position:relative;left:auto;top:auto;transform:none;margin-top:22px}
  .index2-menu .wrap-hero-stats__3m{width:58px}
  .index2-menu .wrap-hero-side{width:100%}
  .index2-menu .wrap-about-panel__columns{grid-template-columns:1fr}
  .index2-menu .wrap-about-panel__motto-media{width:100%;aspect-ratio:6/5}
}


/* ========================================================================== */
/* css\index2-brand-marquee.css */
/* ========================================================================== */
.index2-menu .wrap-marquee--brands .wrap-marquee__row{width:100%;overflow:hidden}
.index2-menu .wrap-marquee--brands .wrap-marquee__track{gap:0;animation-duration:42s}
.index2-menu .wrap-marquee--brands .wrap-marquee__brands{display:flex;align-items:center;gap:clamp(28px,4vw,72px);padding-right:clamp(28px,4vw,72px);flex:0 0 auto}
.index2-menu .wrap-marquee--brands img{display:block;width:clamp(130px,13vw,210px);height:clamp(130px,13vw,210px);object-fit:contain;flex:0 0 auto}
@media(max-width:760px){.index2-menu .wrap-marquee--brands .wrap-marquee__track{animation-duration:32s}.index2-menu .wrap-marquee--brands img{width:150px;height:150px}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.index2-menu .wrap-marquee--brands .wrap-marquee__track{animation:none}}


/* ========================================================================== */
/* Homepage section visibility safeguard (previously inline in index.html). */
.pw5-why,.pw5-process,.pw5-proof,.pw6-final-cta{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:80!important;transform:none!important;}
.pw5-closing-cta{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:80!important;transform:none!important;}
.pw5-why{background:#0a0a0a!important;color:#f2f2f2!important;min-height:720px!important;padding:120px 0!important;}
.pw5-process{background:#0a0a0a!important;color:#f2f2f2!important;min-height:900px!important;padding:140px 0!important;}
.pw5-proof{background:#0a0a0a!important;color:#f2f2f2!important;min-height:190px!important;}
.pw5-closing-cta{min-height:760px!important;}
.pw6-final-cta{background:#0a0a0a!important;}
.pw5-shell{width:min(calc(100% - 80px),1600px)!important;margin:0 auto!important;}
.pw5-section-head,.pw5-process-head,.pw5-why-grid,.pw5-process-grid,.pw5-proof-grid,.pw5-closing-cta__inner{visibility:visible!important;opacity:1!important;}
.pw5-why-item,.pw5-process-step,.pw5-proof-item,.pw5-closing-cta__bottom{visibility:visible!important;opacity:1!important;}

/* ========================================================================== */
/* css\mobile-home.css */
/* ========================================================================== */
/* Homepage phone layout: natural vertical reading and touch scrolling. */
@media (max-width:760px){
  /* hidden on either axis makes an ancestor a scroll container and traps
     sticky positioning. Clip horizontal overflow without creating one. */
  html,body{overflow-x:clip;overflow-y:visible}
  #pwPage,#scroll-container,#site{overflow:visible}
  .intro-wrap{overflow:clip;position:relative}

  /* Large viewport stays stable while mobile browser controls collapse. */
  .hero{position:sticky;top:0;height:100lvh;min-height:100lvh}
  .wrap-scroll-copy{margin-top:-100lvh}
  .wrap-scroll-copy__panel--hero{min-height:100svh;padding:96px 20px 28px;gap:24px}
  .wrap-scroll-copy__panel--hero h1{font-size:clamp(30px,8.4vw,46px);max-width:14ch;line-height:1.02}
  .wrap-hero-side{display:flex;flex-direction:column;align-self:flex-end;align-items:flex-end;width:100%;max-width:420px;margin-left:auto;gap:18px}
  .wrap-hero-stats{width:min(250px,100%);margin:0 0 0 auto;grid-template-columns:90px minmax(0,1fr)}
  .wrap-hero-stats__est,.wrap-hero-stats__years{min-height:64px;padding:8px 10px;gap:4px}
  .wrap-hero-stats__icon{width:24px;height:24px}
  .wrap-hero-stats__est{font-size:10px}
  .wrap-hero-stats__years span{font-size:10px;line-height:1.5;letter-spacing:.1em;padding:0;max-width:20ch}
  .wrap-hero-side .wrap-hero-note{width:100%;max-width:360px;margin:0;align-items:flex-end;text-align:right}
  .wrap-hero-note p{font-size:14px;line-height:1.45}
  .hero #energyField{inset:0;width:100%;height:100%;pointer-events:none}
  .hero #cube3d{inset:0;width:100%;height:100%;pointer-events:none}
  .wrap-about-panel{min-height:0;padding:64px 20px 72px;gap:20px}
  .wrap-about-panel .wrap-about-panel__content h2{font-size:clamp(24px,6.3vw,32px);max-width:none;line-height:1.18;letter-spacing:-.035em;text-indent:0}
  .wrap-about-panel__lower{margin-top:32px}
  .wrap-about-panel__rule{margin-bottom:24px}
  .wrap-about-panel__columns{grid-template-columns:1fr;gap:24px}
  .wrap-about-panel__motto-media{width:min(72vw,280px);aspect-ratio:4/3}
  .wrap-about-panel__snippet p{font-size:15px;line-height:1.55;max-width:38ch}
  .wrap-about-panel__philosophy{padding-top:24px;font-size:14px;max-width:32ch}
  .wrap-light-section--intro{min-height:0}
  .wrap-light-section--intro .wrap-light-section__inner{width:calc(100% - 24px);padding:48px 0!important}
  .wrap-branding-grid{grid-template-columns:1fr;width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:0;gap:18px;padding:0}
  .wrap-branding-card{aspect-ratio:1/1;min-height:0;border-radius:0;transform-style:flat;will-change:auto}
  .wrap-branding-grid{perspective:none}
  .wrap-branding-card__title{font-size:clamp(20px,5.5vw,28px);line-height:1.15;max-width:24ch}
  .wrap-branding-card__desc{font-size:15px;line-height:1.4;max-width:30ch;-webkit-line-clamp:unset;line-clamp:unset}
  .wrap-branding-card__overlay{padding:22px 20px}
  .wrap-branding-card__bottom-row{padding-bottom:0}
  .wrap-branding-card__media img{object-fit:cover}
  .wrap-white-showcase > .selected-works-stage{margin-top:48px}
  .selected-works-stage{width:100vw;height:auto;min-height:0;margin-left:calc(50% - 50vw);touch-action:pan-y;border-top:1px solid #6968684c}
  .selected-works-sticky{position:static;height:auto;overflow:visible}
  .selected-works-track{display:flex;flex-direction:column;width:100%;height:auto;transform:none!important;will-change:auto}
  .selected-works-panel{flex:none;width:100%;height:auto;min-height:0;padding:28px 20px;border:1px solid #6968684c;border-top:0}
  .selected-works-text-card{height:auto;min-height:40svh;padding:20px 0;text-align:left;gap:28px;justify-content:center}
  .selected-works-text-card__center{width:100%;margin:0;align-items:flex-start;text-align:left}
  .wrap-branding-intro h2,
  .selected-works-text-card__center h2{font-size:clamp(32px,9vw,48px);line-height:1.04;letter-spacing:-.045em}
  .selected-works-text-card .selected-works-button{margin:0;min-height:44px}
  .selected-project-card{height:auto;gap:20px;transform:none!important;perspective:none!important}
  .selected-project-card__media{height:auto;max-height:none;aspect-ratio:4/3;transform:none!important;will-change:auto}
  .pw-title-char{will-change:auto}
  .selected-project-card__meta{grid-template-columns:1fr;gap:18px}
  .selected-project-card__copy h3{font-size:24px;line-height:1.1}
  .selected-project-card__copy p{font-size:14px;line-height:1.5}
  .selected-project-card__link{justify-self:start;min-height:44px}
}

/* Keep the three-card row on tablets, with a wider section than desktop. */
@media (min-width:761px) and (max-width:1400px){
  .wrap-light-section--intro .wrap-light-section__inner.wrap-white-showcase{width:85vw;max-width:85vw}
  .wrap-white-showcase .wrap-branding-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);padding:0}
  .wrap-white-showcase .wrap-branding-card,
  .wrap-white-showcase .wrap-branding-card:last-child{grid-column:auto;aspect-ratio:3 / 3.6}
  .wrap-white-showcase .wrap-branding-card__title{font-size:clamp(14px,1.5vw,21px)}
  .wrap-white-showcase .wrap-branding-card__desc{font-size:clamp(11px,1.1vw,15px);line-height:1.3}
}

/* Homepage hero: keep the supporting copy level with the heading on desktop. */
@media (min-width:901px){
  .index2-menu .wrap-hero-copy{max-width:none;min-width:0;flex:1 1 auto}
  .index2-menu .wrap-scroll-copy__panel--hero h1{max-width:none}
  .index2-menu .wrap-hero-note p{margin-bottom:0}
}

/* Give the supporting copy a lower resting position on phones. */
@media (max-width:760px){
  .index2-menu .wrap-scroll-copy__panel--hero{padding-bottom:14px}
  .index2-menu .wrap-hero-note p{margin-bottom:0}
}