@media (max-width:1000px){.cursor-dot{display:none}.display{font-size:clamp(70px,12vw,120px)}.hero-copy{width:86vw}.hero-bottom{grid-template-columns:1fr auto}.services-head,.feedback-head,.awards-grid,.contact-grid{grid-template-columns:1fr}.about-layout{grid-template-columns:1fr;gap:60px}.about-copy{max-width:760px;padding-top:0}.stats-panel{grid-template-columns:repeat(4,1fr);gap:20px}.stat strong{font-size:58px}.about-image{height:60vh;min-height:500px}.services-note{margin-top:50px}.project-card{grid-template-columns:1fr;min-height:auto;position:relative!important}.project-image{grid-column:auto;grid-row:auto;height:70vh}.values-grid{grid-template-columns:42% 58%}.feedback-slider{grid-template-columns:120px 1fr}.feedback-controls{grid-column:2;margin-top:30px}.awards-grid{gap:80px}.featured-by{margin-top:40px}.contact-grid{gap:80px}.footer{grid-template-columns:150px 1fr}.footer a{grid-column:2}.team-track article{width:38vw}}
@media (max-width:700px){:root{--pad:20px}.site-header{padding-top:18px}.brand{width:110px}.hero{min-height:680px}.hero-copy{top:19vh;width:calc(100% - 40px)}.hero .eyebrow{margin-bottom:35px}.display{font-size:clamp(58px,17vw,92px);line-height:.83}.hero-bottom{grid-template-columns:1fr;margin-top:45px}.hero-bottom p{font-size:15px;max-width:260px}.round-link{width:100px;height:100px;padding:19px}.hero-bottom .round-link{display:none}.latest-project{left:20px;right:auto;bottom:30px}.scroll-cue{display:none}.about{padding:80px 0}.about-intro .eyebrow{margin-bottom:25px}.statement{font-size:40px}.about-layout{margin-top:45px;gap:42px}.about-copy .body-large{font-size:16px}.stats-panel{grid-template-columns:repeat(2,1fr);gap:28px 20px;margin-top:40px;padding-top:30px}.stat strong{font-size:48px}.stat p{font-size:12px;margin-top:12px}.about-image{height:55vh;min-height:420px}.services{padding:90px 0}.service-row{grid-template-columns:45px 1fr 35px}.service-row h3{font-size:34px}.projects{padding-top:90px}.projects-head{padding-bottom:45px}.project-card{padding:55px 20px 35px;gap:28px}.project-meta{grid-template-columns:45px 1fr}.project-meta h3{font-size:45px}.project-image{height:60vh;min-height:450px}.values{height:360vh}.values-sticky{height:100svh}.values-grid{grid-template-columns:1fr;grid-template-rows:40% 60%;height:92vh}.values-copy h2{font-size:31px;margin:25px 0}.values-copy li{padding:9px 0}.values-copy small{display:none}.feedback{padding:90px 0}.feedback-head{gap:35px;padding-bottom:60px}.feedback-slider{grid-template-columns:1fr;gap:30px}.feedback-copy blockquote{font-size:34px}.feedback-controls{grid-column:auto}.team{padding:90px 0}.team-track article{width:72vw}.team-track figure{height:52vh;min-height:420px}.awards,.insights{padding:95px 0}.awards-intro h2{font-size:42px;margin:40px 0 60px}.award-list article{grid-template-columns:60px 1fr}.award-list h4{font-size:24px}.insight-grid{grid-template-columns:1fr}.insight-card figure{height:52vh;min-height:390px}.contact{padding-top:90px}.contact-top{display:block}.contact-title{font-size:20vw}.round-link--large{margin-top:50px;width:120px;height:120px}.contact-grid{margin:90px auto}.footer{grid-template-columns:1fr;gap:25px}.footer a{grid-column:auto}.menu-panel a{grid-template-columns:45px 1fr}.menu-panel a span{font-size:16vw}}

/* Version 2.1 hero responsive refinements */
@media (max-width:1000px){
  .hero-scroll-shell{height:132svh}.hero-scroll-shell .hero{min-height:680px}
  .site-header{padding:25px var(--pad)}.menu-btn{font-size:16px}
  .hero-copy{left:var(--pad);top:34%;width:86vw}.hero-title{font-size:clamp(65px,10vw,102px)}
  .hero-description{left:var(--pad);width:42vw;bottom:6vh}.latest-project{right:var(--pad);width:330px;min-width:0}
  .hero-line--top{top:88px}
}
@media (max-width:700px){
  .hero-scroll-shell{height:118svh}.hero-scroll-shell .hero{min-height:650px}
  .site-header{padding:20px}.brand{width:108px}.menu-btn{font-size:15px;padding-right:36px}.menu-btn i{width:23px}
  .hero-line--top{top:72px}.hero-line--middle{top:58%}
  .hero-copy{left:20px;top:30%;width:calc(100% - 40px)}.hero-kicker{font-size:11px;margin-bottom:16px}.hero-title{font-size:clamp(52px,15.3vw,80px);line-height:.92;letter-spacing:-.055em}
  .hero-description{left:20px;right:20px;bottom:25px;width:auto}.hero-description p{font-size:14px;max-width:280px}.hero-text-link{margin-top:26px;font-size:14px}
  .latest-project{display:none}
}

/* Version 2 mobile hero correction — Aug 10 */
@media (max-width:700px){
  .hero-copy{top:calc(30% + 100px) !important;}
  .hero-line--middle{top:calc(30% + 485px) !important;}
  .hero-line--vertical{top:calc(30% + 485px) !important;bottom:0 !important;height:auto !important;}
  .hero-description{bottom:178px !important;width:min(280px,48vw) !important;}
  .latest-project{display:grid !important;left:auto !important;right:20px !important;bottom:24px !important;width:min(340px,calc(100vw - 40px)) !important;min-width:0 !important;height:122px !important;grid-template-columns:100px 1fr 20px !important;gap:12px !important;padding:9px !important;}
  .latest-project__copy>span{font-size:14px !important}
  .latest-project__copy strong{font-size:15px !important}
  .latest-project__copy b{font-size:14px !important}
}
@media (max-width:430px){
  .hero-copy{top:calc(27% + 100px) !important}
  .hero-description{bottom:166px !important;width:52vw !important}
  .latest-project{right:14px !important;bottom:18px !important;width:min(320px,calc(100vw - 28px)) !important;height:116px !important;grid-template-columns:92px 1fr 18px !important;}
}

/* =========================================================
   VERSION 2 — RESPONSIVE HERO REBALANCE (10 AUG 2026)
   Dedicated desktop/mobile compositions. This block is last
   intentionally so it overrides earlier iterative hero rules.
   ========================================================= */

/* Desktop: move headline + its framing divider 100px lower. */
@media (min-width:1001px){
  .hero-copy{
    top:calc(36.5% + 100px) !important;
  }
  .hero-line--middle,
  .hero-line--vertical{
    top:calc(36.5% + 302px) !important;
  }
}

/* Tablet: preserve the visual hierarchy without collisions. */
@media (min-width:701px) and (max-width:1000px){
  .hero-copy{
    top:calc(34% + 100px) !important;
  }
  .hero-title{
    font-size:68px !important;
    line-height:.94 !important;
  }
  .hero-line--middle,
  .hero-line--vertical{
    top:calc(34% + 296px) !important;
  }
  .hero-description{
    bottom:5.5vh !important;
    width:min(390px,40vw) !important;
  }
}

/* Mobile is a separate composition, not a scaled desktop layout. */
@media (max-width:700px){
  .hero-scroll-shell{
    height:128svh !important;
  }
  .hero-scroll-shell .hero{
    min-height:760px !important;
  }

  /* Headline sits 100px lower than the previous mobile position. */
  .hero-copy{
    left:20px !important;
    right:20px !important;
    top:calc(30% + 100px) !important;
    width:auto !important;
  }
  .hero-kicker{
    font-size:12px !important;
    line-height:1.2 !important;
    margin-bottom:18px !important;
  }
  .hero-title{
    font-size:clamp(46px,12.7vw,58px) !important;
    line-height:.94 !important;
    letter-spacing:-.045em !important;
  }
  .hero-title-line{
    padding-bottom:.07em !important;
  }

  /* The divider is deliberately BELOW the full headline block. */
  .hero-line--middle,
  .hero-line--vertical{
    top:calc(30% + 100px + 278px) !important;
  }
  .hero-line--vertical{
    left:50% !important;
    bottom:0 !important;
    height:auto !important;
  }

  /* Supporting copy gets its own lane below the heading. */
  .hero-description{
    left:20px !important;
    right:auto !important;
    top:calc(30% + 100px + 318px) !important;
    bottom:auto !important;
    width:43vw !important;
    max-width:225px !important;
  }
  .hero-description p{
    max-width:225px !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }
  .hero-text-link{
    margin-top:24px !important;
    font-size:15px !important;
  }

  /* Compact card stays visible at the lower-right on every phone. */
  .latest-project{
    display:grid !important;
    left:auto !important;
    right:18px !important;
    bottom:20px !important;
    width:min(330px,calc(100vw - 36px)) !important;
    min-width:0 !important;
    height:116px !important;
    grid-template-columns:94px minmax(0,1fr) 18px !important;
    gap:11px !important;
    padding:8px !important;
  }
  .latest-project__copy{
    min-width:0 !important;
  }
  .latest-project__copy>span{
    font-size:13px !important;
  }
  .latest-project__copy strong{
    font-size:14px !important;
    line-height:1.2 !important;
  }
  .latest-project__copy b{
    font-size:13px !important;
  }
  .latest-project>i{
    font-size:16px !important;
  }
}

/* Narrow phones: reduce type/card only, never let copy collide. */
@media (max-width:430px){
  .hero-copy{
    top:calc(28% + 100px) !important;
  }
  .hero-title{
    font-size:44px !important;
  }
  .hero-line--middle,
  .hero-line--vertical{
    top:calc(28% + 100px + 250px) !important;
  }
  .hero-description{
    top:calc(28% + 100px + 286px) !important;
    width:44vw !important;
    max-width:175px !important;
  }
  .hero-description p{
    font-size:12.5px !important;
    max-width:175px !important;
  }
  .hero-text-link{
    margin-top:18px !important;
    font-size:13px !important;
  }
  .latest-project{
    right:14px !important;
    bottom:16px !important;
    width:min(305px,calc(100vw - 28px)) !important;
    height:106px !important;
    grid-template-columns:84px minmax(0,1fr) 17px !important;
  }
}

/* =========================================================
   HERO LATEST PROJECT — FINAL RESPONSIVE COMPOSITION
   Separate portrait/tablet and phone treatments so the card
   does not inherit desktop proportions.
   ========================================================= */
@media (max-width: 900px){
  .latest-project{
    display:grid !important;
    left:auto !important;
    right:24px !important;
    bottom:24px !important;
    width:min(360px,calc(100vw - 48px)) !important;
    max-width:360px !important;
    min-width:0 !important;
    height:auto !important;
    min-height:112px !important;
    grid-template-columns:96px minmax(0,1fr) 18px !important;
    gap:12px !important;
    padding:10px !important;
    align-items:stretch !important;
  }
  .latest-project figure{
    width:96px !important;
    height:92px !important;
    align-self:center !important;
  }
  .latest-project__copy{
    min-width:0 !important;
    padding:2px 0 !important;
  }
  .latest-project__copy>span{
    font-size:13px !important;
    line-height:1.2 !important;
  }
  .latest-project__copy strong{
    font-size:14px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  .latest-project__copy b{
    font-size:13px !important;
    line-height:1.1 !important;
  }
  .latest-project>i{
    font-size:16px !important;
    line-height:1 !important;
  }
}

@media (max-width: 600px){
  .latest-project{
    right:16px !important;
    bottom:18px !important;
    width:min(340px,calc(100vw - 32px)) !important;
    max-width:340px !important;
    min-height:104px !important;
    grid-template-columns:86px minmax(0,1fr) 17px !important;
    gap:10px !important;
    padding:9px !important;
  }
  .latest-project figure{
    width:86px !important;
    height:86px !important;
  }
  .latest-project__copy>span{font-size:12px !important}
  .latest-project__copy strong{font-size:13px !important}
  .latest-project__copy b{font-size:12px !important}
  .latest-project>i{font-size:15px !important}
}

@media (max-width: 430px){
  .latest-project{
    right:14px !important;
    bottom:14px !important;
    width:min(320px,calc(100vw - 28px)) !important;
    max-width:320px !important;
    min-height:98px !important;
    grid-template-columns:80px minmax(0,1fr) 16px !important;
    gap:9px !important;
    padding:8px !important;
  }
  .latest-project figure{
    width:80px !important;
    height:80px !important;
  }
}

/* =========================================================
   V2 FINAL HERO CORRECTION — 10 AUG 2026
   Keep the approved desktop composition unchanged.
   Move the headline down only on portrait/mobile widths and
   make the Latest Project card ~50px narrower horizontally.
   ========================================================= */

/* Portrait tablet / large mobile */
@media (min-width:701px) and (max-width:1000px){
  /* Earlier approved tablet/mobile headline position + 90px. */
  .hero-copy{
    top:calc(34% + 190px) !important;
  }

  /* Keep the guide geometry where it was so it does not chase the title. */
  .hero-line--middle,
  .hero-line--vertical{
    top:calc(34% + 296px) !important;
  }

  /* Compact the card horizontally and proportionally. */
  .latest-project{
    right:24px !important;
    bottom:24px !important;
    width:min(310px,calc(100vw - 48px)) !important;
    max-width:310px !important;
    min-width:0 !important;
    min-height:102px !important;
    height:auto !important;
    grid-template-columns:84px minmax(0,1fr) 17px !important;
    gap:10px !important;
    padding:9px !important;
  }
  .latest-project figure{
    width:84px !important;
    height:84px !important;
  }
  .latest-project__copy>span{font-size:12px !important}
  .latest-project__copy strong{font-size:13px !important;line-height:1.18 !important}
  .latest-project__copy b{font-size:12px !important}
  .latest-project>i{font-size:15px !important}
}

/* Phones */
@media (max-width:700px){
  /* Move ONLY the headline block another 90px down. */
  .hero-copy{
    top:calc(30% + 190px) !important;
  }

  .latest-project{
    right:16px !important;
    bottom:18px !important;
    width:min(290px,calc(100vw - 32px)) !important;
    max-width:290px !important;
    min-width:0 !important;
    min-height:98px !important;
    height:auto !important;
    grid-template-columns:76px minmax(0,1fr) 16px !important;
    gap:9px !important;
    padding:8px !important;
  }
  .latest-project figure{
    width:76px !important;
    height:76px !important;
  }
  .latest-project__copy>span{font-size:11.5px !important}
  .latest-project__copy strong{font-size:12.5px !important;line-height:1.18 !important}
  .latest-project__copy b{font-size:11.5px !important}
  .latest-project>i{font-size:14px !important}
}

/* Narrow phones */
@media (max-width:430px){
  .hero-copy{
    top:calc(28% + 190px) !important;
  }
  .latest-project{
    right:14px !important;
    bottom:14px !important;
    width:min(270px,calc(100vw - 28px)) !important;
    max-width:270px !important;
    min-height:92px !important;
    grid-template-columns:70px minmax(0,1fr) 15px !important;
    gap:8px !important;
    padding:7px !important;
  }
  .latest-project figure{
    width:70px !important;
    height:70px !important;
  }
}


/* =========================================================
   V2 MOBILE LATEST PROJECT — VERTICAL COMPACT CARD
   Desktop remains unchanged. On <=1000px the card becomes
   narrower and taller, with intentional text wrapping.
   ========================================================= */
.mobile-break{display:none}

@media (min-width:701px) and (max-width:1000px){
  .latest-project{
    right:24px !important;
    bottom:24px !important;
    width:250px !important;
    max-width:calc(100vw - 48px) !important;
    min-width:0 !important;
    height:154px !important;
    min-height:154px !important;
    grid-template-columns:92px minmax(0,1fr) 16px !important;
    grid-template-rows:1fr !important;
    gap:11px !important;
    padding:10px !important;
    align-items:stretch !important;
  }
  .latest-project figure{
    width:92px !important;
    height:134px !important;
    align-self:center !important;
  }
  .latest-project__copy{
    padding:4px 0 3px !important;
    justify-content:space-between !important;
    min-width:0 !important;
  }
  .latest-project__copy>span{
    font-size:14px !important;
    line-height:1.12 !important;
  }
  .latest-project__copy strong{
    font-size:15px !important;
    line-height:1.12 !important;
  }
  .latest-project__copy b{
    font-size:13px !important;
    line-height:1 !important;
  }
  .latest-project>i{
    font-size:16px !important;
    align-self:start !important;
  }
  .latest-project .mobile-break{display:inline}
}

@media (max-width:700px){
  .latest-project{
    right:16px !important;
    bottom:18px !important;
    width:230px !important;
    max-width:calc(100vw - 32px) !important;
    min-width:0 !important;
    height:148px !important;
    min-height:148px !important;
    grid-template-columns:84px minmax(0,1fr) 15px !important;
    grid-template-rows:1fr !important;
    gap:9px !important;
    padding:9px !important;
    align-items:stretch !important;
  }
  .latest-project figure{
    width:84px !important;
    height:130px !important;
    align-self:center !important;
  }
  .latest-project__copy{
    padding:3px 0 !important;
    justify-content:space-between !important;
    min-width:0 !important;
  }
  .latest-project__copy>span{
    font-size:13px !important;
    line-height:1.1 !important;
  }
  .latest-project__copy strong{
    font-size:14px !important;
    line-height:1.1 !important;
  }
  .latest-project__copy b{
    font-size:12px !important;
    line-height:1 !important;
  }
  .latest-project>i{
    font-size:15px !important;
    align-self:start !important;
  }
  .latest-project .mobile-break{display:inline}
}

@media (max-width:430px){
  .latest-project{
    right:14px !important;
    bottom:14px !important;
    width:214px !important;
    max-width:calc(100vw - 28px) !important;
    height:142px !important;
    min-height:142px !important;
    grid-template-columns:78px minmax(0,1fr) 14px !important;
    gap:8px !important;
    padding:8px !important;
  }
  .latest-project figure{
    width:78px !important;
    height:124px !important;
  }
  .latest-project__copy>span{font-size:12.5px !important}
  .latest-project__copy strong{font-size:13px !important}
  .latest-project__copy b{font-size:11.5px !important}
}

/* =========================================================
   V2 HERO LOWER ROW — TRUE VERTICAL CENTER ALIGNMENT
   The lower-left description/CTA block and Latest Project card
   share the same vertical centre on every breakpoint.
   JS calculates the exact top after fonts/layout settle.
   ========================================================= */
.hero.hero-lower-aligned .latest-project{
  bottom:auto !important;
}

/* Header/logo responsive refinement */
@media (max-width:1000px){
  .brand{width:190px;height:53px}
}
@media (max-width:700px){
  .brand{width:175px;height:49px}
}
@media (max-width:430px){
  .brand{width:155px;height:43px}
}

/* Featured Projects: keep the Archevo-style sticky transition on tablet and mobile too. */
@media (max-width:1000px){
  .project-stack{position:relative;isolation:isolate;}
  .project-card.sticky-project{
    position:sticky!important;
    top:0;
    min-height:100svh!important;
    height:100svh;
    transform-origin:50% 0%;
    will-change:transform,filter,opacity;
  }
  .project-card .project-meta,
  .project-card .project-image{
    clip-path:inset(0% 0% 0% 0%);
    will-change:clip-path,transform;
  }
  .project-card .project-image img{
    transform:scale(1.08);
    will-change:transform;
  }
}

/* Section 4: same full-image / text-on-image language across devices. */
@media (max-width:1000px){
  .projects{padding-top:105px}
  .projects-head{padding-bottom:42px}
  .project-card{
    min-height:100svh;
    height:100svh;
    margin:0;
  }
  .project-image{position:absolute!important;inset:0!important;height:100%!important;min-height:0!important}
  .project-meta{
    left:var(--pad);
    right:var(--pad);
    bottom:68px;
    grid-template-columns:64px minmax(0,1fr);
    gap:16px;
  }
  .project-meta h3{font-size:clamp(48px,8vw,78px)!important;line-height:.9!important}
  .project-meta p{max-width:460px;margin:20px 0 16px;font-size:15px}
}
@media (max-width:700px){
  .projects{padding-top:84px}
  .projects-head{padding-bottom:32px}
  .project-card{min-height:100svh;height:100svh}
  .project-card::before{
    background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18) 38%,rgba(0,0,0,.78) 100%);
  }
  .project-meta{
    left:20px;
    right:20px;
    bottom:78px;
    display:block;
  }
  .project-meta>span{display:block;padding:0 0 12px;font-size:11px}
  .project-meta h3{font-size:clamp(42px,12vw,62px)!important;max-width:92%;line-height:.9!important}
  .project-meta p{font-size:13px;line-height:1.45;margin:15px 0 14px;max-width:88%}
  .tags{gap:6px}.tags i{font-size:9px;padding:6px 9px}
}


/* Section 4 intro/year responsive treatment */
@media (max-width:1000px){
  .projects-intro{padding-bottom:64px;}
  .projects-intro-title{font-size:clamp(40px,7vw,66px);line-height:1.08;}
  .projects-head{padding-bottom:22px;margin-bottom:22px;}
  .project-year-badge{left:24px;top:24px;min-width:72px;padding:11px 14px;font-size:14px;}
}
@media (max-width:700px){
  .projects-intro{padding-bottom:42px;}
  .projects-intro-title{font-size:clamp(34px,9.5vw,48px);line-height:1.08;letter-spacing:-.04em;}
  .projects-head{padding-bottom:18px;margin-bottom:18px;gap:18px;}
  .projects-head .text-link{font-size:12px;white-space:nowrap;}
  .project-year-badge{left:18px;top:18px;min-width:64px;padding:10px 12px;font-size:13px;}
}

/* Section 4: keep the project content block 100px higher on responsive layouts too. */
@media (max-width:1000px){
  .project-meta{bottom:168px;}
  .project-meta h3{
    font-family:var(--serif) !important;
    font-style:italic !important;
    font-weight:400 !important;
  }
}
@media (max-width:700px){
  .project-meta{bottom:178px;}
}

/* Our Team carousel */
@media (max-width:1000px){
  .team{padding:24px 0 82px}
  .team-head{padding-bottom:24px;margin-bottom:22px}
  .team-card{width:calc((100vw - (var(--pad) * 2) - 22px)/2)}
  .team-card figure{height:60vw;min-height:470px}
}
@media (max-width:700px){
  .team{padding:22px 0 68px}
  .team-head{padding-bottom:20px;margin-bottom:18px}
  .team .eyebrow{font-size:13px}
  .team-controls{gap:12px}
  .team-arrow{font-size:29px}
  .team-viewport{overflow:visible}
  .team-track{gap:14px}
  .team-card{width:82vw}
  .team-card figure{height:108vw;min-height:430px;max-height:560px}
  .team-card__meta{left:12px;right:12px;bottom:12px;min-height:94px;padding:16px 16px 14px}
  .team-card__meta h4{font-size:24px}
  .team-card__meta p{font-size:14px;margin-top:8px}
}