@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 hero copy stack: bottom-anchored with fixed 25px gaps.
   .hero-copy's bottom and the lines' top are fallback values only, sized for
   a typical 2-line description — JS (main.js) measures the actual rendered
   description/card height on load and overrides them via inline style so
   longer (CMS-editable) description text never collides with the divider or
   title. Left un-!important on purpose so that inline override can win. */
@media (min-width:1001px){
  .hero-copy{
    top:auto !important;
    bottom:212px;
  }
  .hero-description{
    bottom:25px !important;
  }
  .latest-project{
    bottom:25px !important;
  }
  .hero-line--middle,
  .hero-line--vertical{
    top:calc(100% - 187px);
  }
}

/* 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:normal !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}
}

/* =========================================================
   V4 FINAL MOBILE HERO LOWER ROW — 15 AUG 2026
   Single authoritative rule set for .hero-description and
   .latest-project on phones, placed last so it wins over every
   earlier iterative attempt above. Both sides are sized off the
   vertical divider line, which stays pinned at the exact
   horizontal center:
     - description (left of the line): 10px from the screen's
       left edge, stopping 20px short of the center line.
     - card (right of the line): starts 20px past the center
       line, stopping 20px short of the screen's right edge.
   Both widths are therefore tied to the same center point and
   can never collide at any phone width from 320px to 700px.
   Both are bottom-anchored to the same value, so they stay
   vertically (bottom) aligned with each other regardless of
   their differing content heights. The card's text wraps one
   word per line (.mobile-break) so it stays legible at its
   narrower width.
   ========================================================= */
@media (max-width:700px){
  .hero-line--vertical{
    left:50% !important;
  }

  .hero-description{
    left:10px !important;
    right:auto !important;
    top:auto !important;
    bottom:20px !important;
    width:calc(50vw - 30px) !important;
    max-width:none !important;
  }
  .hero-description p{
    max-width:none !important;
    font-size:12.5px !important;
    line-height:1.42 !important;
  }
  .hero-text-link{
    margin-top:14px !important;
    font-size:12.5px !important;
  }

  .latest-project{
    display:grid !important;
    position:absolute !important;
    left:auto !important;
    right:20px !important;
    top:auto !important;
    bottom:20px !important;
    width:calc(50vw - 40px) !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    grid-template-columns:1.15fr 1fr !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px !important;
  }
  .latest-project figure{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    align-self:center !important;
  }
  .latest-project figure img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .latest-project__copy{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    padding:0 !important;
    min-width:0 !important;
  }
  .latest-project__copy>span{
    font-size:10px !important;
    line-height:1.2 !important;
  }
  .latest-project__copy div{
    display:flex !important;
    flex-direction:column !important;
    gap:1px !important;
  }
  .latest-project__copy strong{
    font-size:12.5px !important;
    line-height:1.15 !important;
  }
  .latest-project__copy b{
    font-size:11.5px !important;
    line-height:1.15 !important;
    opacity:.8 !important;
  }
  .latest-project>i{
    display:none !important;
  }
  .mobile-break{
    display:inline !important;
  }

  .hero.hero-lower-aligned .hero-description,
  .hero.hero-lower-aligned .latest-project{
    top:auto !important;
    bottom:20px !important;
  }
}