/* Digitality horizontal storytelling layer — desktop only. */
@media (min-width:1101px){
  html,body.horizontal-home{width:100%;height:100%;overflow:hidden}
  body.horizontal-home{background:var(--ink)}
  body.horizontal-home main{
    width:100vw;
    height:100vh;
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  body.horizontal-home main::-webkit-scrollbar{display:none}
  body.horizontal-home main>section,
  body.horizontal-home main>footer{
    flex:0 0 auto;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
  }
  body.horizontal-home .site-header{background:linear-gradient(180deg,rgba(7,26,53,.68),rgba(7,26,53,0));border-bottom-color:rgba(255,255,255,.08)}
  body.horizontal-home .site-header.scrolled{background:rgba(7,26,53,.86)}
  body.horizontal-home .page-progress{top:auto;bottom:0;height:4px;background:rgba(255,255,255,.08)}
  body.horizontal-home .page-progress span{box-shadow:0 0 20px rgba(255,196,0,.35)}

  body.horizontal-home .hero{width:100vw;min-width:100vw}
  body.horizontal-home .hero-layout{width:calc(100% - 96px);max-width:none;margin-inline:48px}
  body.horizontal-home .hero-scroll{left:auto;right:48px;bottom:32px}
  body.horizontal-home .hero-scroll i{width:72px}
  body.horizontal-home .hero-scroll i:after{animation-name:scrollLineHorizontal}
  @keyframes scrollLineHorizontal{45%,55%{transform:none}100%{transform:translateX(100%)}}

  body.horizontal-home .marquee-section{
    width:48vw;
    min-width:620px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  body.horizontal-home .marquee-section:before{
    content:"THE SYSTEM";
    position:absolute;
    left:54px;
    top:116px;
    font:700 10px/1 "DM Sans",sans-serif;
    letter-spacing:.18em;
  }
  body.horizontal-home .marquee-section:after{
    content:"STRATEGY → CREATIVE → DISTRIBUTION → CONVERSION";
    position:absolute;
    left:54px;
    right:54px;
    bottom:48px;
    padding-top:20px;
    border-top:1px solid rgba(7,26,53,.25);
    font:600 10px/1.3 "DM Sans",sans-serif;
    letter-spacing:.1em;
  }
  body.horizontal-home .marquee__track{gap:34px;animation-duration:26s}
  body.horizontal-home .marquee__track span{font-size:clamp(30px,3.5vw,64px);letter-spacing:-.035em}
  body.horizontal-home .marquee__track i{font-size:20px}

  body.horizontal-home .section{padding:112px 0 48px}
  body.horizontal-home .section>.container{width:calc(100% - 136px);max-width:none;margin-inline:68px}
  body.horizontal-home .section-head{padding-bottom:20px;margin-bottom:44px}
  body.horizontal-home .display-title{font-size:clamp(58px,5.4vw,104px)}

  body.horizontal-home .approach{width:118vw;min-width:1500px}
  body.horizontal-home .approach-grid{grid-template-columns:1.08fr .7fr;gap:9vw}
  body.horizontal-home .approach-copy{max-width:650px}
  body.horizontal-home .approach-copy .lead{font-size:20px}
  body.horizontal-home .approach-copy p{font-size:15px}
  body.horizontal-home .stats-grid{margin-top:54px}
  body.horizontal-home .stat{min-height:138px;padding-top:24px}
  body.horizontal-home .stat strong{font-size:44px}

  body.horizontal-home .capabilities{width:138vw;min-width:1780px}
  body.horizontal-home .capabilities>.container{display:grid;grid-template-columns:320px 1fr;column-gap:72px;align-items:start}
  body.horizontal-home .capabilities .section-head{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:calc(100vh - 178px);margin:0;padding:10px 40px 10px 0;border-bottom:0;border-right:1px solid var(--line)}
  body.horizontal-home .capabilities .section-kicker{justify-self:auto;max-width:220px;line-height:1.6}
  body.horizontal-home .capability-list{border-top:1px solid var(--line)}
  body.horizontal-home .capability-row{min-height:calc((100vh - 160px)/6);grid-template-columns:54px minmax(290px,.72fr) minmax(360px,1fr) 50px}
  body.horizontal-home .capability-row h3{font-size:clamp(29px,2.7vw,48px)}
  body.horizontal-home .capability-row p{font-size:13px;line-height:1.5}

  body.horizontal-home .work{width:158vw;min-width:2050px}
  body.horizontal-home .work-grid{display:grid;grid-template-columns:1.28fr 1fr 1fr;gap:28px}
  body.horizontal-home .project--large{grid-column:auto}
  body.horizontal-home .project-media,
  body.horizontal-home .project--large .project-media,
  body.horizontal-home .project:not(.project--large) .project-media{height:48vh;aspect-ratio:auto}
  body.horizontal-home .project-media img{width:110%;height:100%;transform:translateX(-5%);object-fit:cover}
  body.horizontal-home .project:hover .project-media img{transform:translateX(-5%) scale(1.035)}
  body.horizontal-home .project-meta{grid-template-columns:1fr;padding-top:18px;gap:10px}
  body.horizontal-home .project-meta h3{font-size:clamp(28px,2.35vw,45px)}
  body.horizontal-home .project-meta p{margin:0}

  body.horizontal-home .process{width:120vw;min-width:1560px}
  body.horizontal-home .process-grid{grid-template-columns:.83fr 1.17fr;gap:8vw;align-items:center}
  body.horizontal-home .process-intro>p{font-size:14px}
  body.horizontal-home .step{padding:20px 0;grid-template-columns:56px 1fr}
  body.horizontal-home .step h3{font-size:25px}
  body.horizontal-home .step p{font-size:13px}

  body.horizontal-home .insights{width:122vw;min-width:1580px}
  body.horizontal-home .insight-grid{height:57vh}
  body.horizontal-home .insight{min-height:0;height:100%;padding:32px}
  body.horizontal-home .insight h3{font-size:clamp(29px,2.45vw,43px);margin-top:8vh}

  body.horizontal-home .contact-section{width:100vw;min-width:100vw;padding:0}
  body.horizontal-home .contact-layout{width:calc(100% - 136px);max-width:none;height:100%;margin-inline:68px;align-items:center;padding-top:70px}
  body.horizontal-home .contact-title{font-size:clamp(70px,7vw,126px);margin:32px 0 58px}

  body.horizontal-home footer{
    width:52vw;
    min-width:720px;
    padding:0;
    display:flex;
    align-items:center;
    background:var(--ink);
  }
  body.horizontal-home footer>.container{width:calc(100% - 110px);margin-inline:55px}
  body.horizontal-home .footer-grid{grid-template-columns:1fr 1fr;align-items:start}
  body.horizontal-home .footer-brand{grid-column:1/-1;margin-bottom:50px}
  body.horizontal-home .footer-copy{margin-top:70px}

  body.horizontal-home .reveal{transform:translateX(34px)}
  body.horizontal-home .reveal.is-visible{transform:none}
}

@media (min-width:1101px) and (max-height:820px){
  body.horizontal-home .section{padding-top:96px;padding-bottom:30px}
  body.horizontal-home .section-head{margin-bottom:28px;padding-bottom:16px}
  body.horizontal-home .display-title{font-size:clamp(54px,4.7vw,88px)}
  body.horizontal-home .approach .stats-grid{margin-top:30px}
  body.horizontal-home .stat{min-height:112px;padding-top:18px}
  body.horizontal-home .stat p{display:none}
  body.horizontal-home .capabilities>.container{grid-template-columns:260px 1fr;column-gap:50px}
  body.horizontal-home .capabilities .section-head{height:calc(100vh - 138px)}
  body.horizontal-home .capability-row{min-height:calc((100vh - 128px)/6)}
  body.horizontal-home .project-media,
  body.horizontal-home .project--large .project-media,
  body.horizontal-home .project:not(.project--large) .project-media{height:43vh}
  body.horizontal-home .project-meta h3{font-size:clamp(26px,2.1vw,38px)}
  body.horizontal-home .insight-grid{height:53vh}
  body.horizontal-home .contact-title{font-size:clamp(66px,6.5vw,108px)}
}

/* On tablet and mobile the experience intentionally becomes vertical. */
@media (max-width:1100px){
  body.horizontal-home{overflow-x:hidden;overflow-y:auto}
  body.horizontal-home main{display:block;overflow:visible;height:auto}
}