.brand-strip { padding: 45px 0; overflow: hidden; }
.brand-strip > p { margin-bottom: 30px; }
.marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; width: max-content; animation: brand-roll 32s linear infinite; }
.marquee .logos { display: flex; flex-wrap: nowrap; gap: 24px; padding-right: 24px; }
.marquee .logos span { width: 180px; height: 105px; flex: 0 0 180px; display: grid; place-items: center; padding: 16px 24px; border: 1px solid rgba(38,56,47,.08); border-radius: 18px; background: #fff; overflow: hidden; }
.marquee .logos img { width: 155px; height: 82px; object-fit: contain; filter: saturate(1.08) contrast(1.06); mix-blend-mode: normal; }
.marquee .logos span:nth-child(2), .marquee .logos span:nth-child(5) { background: #dcecf2; }
.marquee .logos span:nth-child(4), .marquee .logos span:nth-child(8) { background: #eee3fa; }
.marquee .logos span:nth-child(6) { background: #fae8e5; }
@keyframes brand-roll { to { transform: translateX(-50%); } }

.warehouse { overflow: hidden; }
.warehouse > img { width: 200%; max-width: none; min-width: 0; transform: translateX(-50%); object-fit: cover; object-position: right center; }

@media (prefers-reduced-motion: reduce) { .marquee-track { animation-play-state: paused; } }
@media (max-width: 900px) { .warehouse > img { width: 200%; height: 430px; transform: translateX(-50%); } }
@media (max-width: 580px) { .marquee .logos span { width: 150px; height: 90px; flex-basis: 150px; } .marquee .logos img { width: 115px; height: 62px; } }

/* Visual storytelling for the four capability cards */
.cards article { overflow: hidden; min-height: 410px; transition: transform .25s ease, box-shadow .25s ease; }
.cards article:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(38, 56, 47, .12); }
.cards article::before { content: ""; display: block; height: 155px; margin: -31px -25px 24px; background-color: #ddd; background-position: center; background-size: cover; }
.cards article:nth-child(1)::before { background-image: linear-gradient(rgba(28,43,35,.05),rgba(28,43,35,.05)), url('assets/steve-truck.jpg'); background-position: center 38%; }
.cards article:nth-child(2)::before { background-image: url('assets/steve-container.jpg'); background-position: center 35%; }
.cards article:nth-child(3)::before { background-color: #f2d95c; background-image: url('assets/brand-nerds.png'); background-size: 135px auto; background-repeat: no-repeat; }
.cards article:nth-child(4)::before { background-image: url('assets/steve-leigh.jpg'); background-position: center 40%; }
.cards h3 { margin-top: 24px; }

/* Consumer feedback loop and route to market */
.insight { padding: 110px 0; background: #fffdf8; }
.insight-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: center; }
.insight h2, .channels h2 { font-family: Fraunces, serif; font-size: clamp(39px,4.1vw,57px); line-height: 1.03; letter-spacing: -2.4px; margin: 0; }
.insight h2 em, .channels h2 em { color: #7146d7; font-style: italic; }
.insight-grid > div:first-child > p:last-child { color: #647268; max-width: 440px; }
.loop { display: flex; align-items: center; gap: 13px; }
.loop article { width: 185px; min-height: 220px; padding: 25px 21px; border-radius: 92px 92px 18px 18px; background: #dfe8d5; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.loop article:nth-of-type(2) { background: #f6e4ca; }
.loop article:nth-of-type(3) { background: #e8ddfa; }
.loop b { color: #7146d7; font-size: 10px; margin-bottom: 15px; }
.loop strong { font-family: Fraunces, serif; font-size: 20px; line-height: 1.15; }
.loop span { font-size: 11px; color: #647268; margin-top: 10px; }
.loop > i { color: #7146d7; font-style: normal; font-size: 19px; }
.channels { padding: 110px 0; background: #f6f0e4; }
.channel-heading { max-width: 750px; margin: 0 auto 55px; text-align: center; }
.channel-heading > p:last-child { max-width: 600px; margin: 22px auto 0; color: #647268; }
.channel-grid { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #d8d5ca; border-bottom: 1px solid #d8d5ca; }
.channel-grid article { min-height: 200px; padding: 30px 22px; border-right: 1px solid #d8d5ca; }
.channel-grid article:first-child { border-left: 1px solid #d8d5ca; }
.channel-grid span { font-size: 10px; color: #7146d7; font-weight: 700; }
.channel-grid h3 { font-family: Fraunces, serif; font-size: 22px; margin: 47px 0 9px; }
.channel-grid p { color: #647268; font-size: 12px; line-height: 1.55; }
.channel-note { text-align: center; color: #899087; font-size: 9px; margin: 22px 0 0; }
@media (max-width: 960px) { .insight-grid { grid-template-columns: 1fr; } .loop { justify-content: center; } .channel-grid { grid-template-columns: repeat(3,1fr); } .channel-grid article { border-left: 1px solid #d8d5ca; border-bottom: 1px solid #d8d5ca; } }
@media (max-width: 650px) { .insight, .channels { padding: 75px 0; } .loop { flex-direction: column; } .loop > i { transform: rotate(90deg); } .loop article { width: min(100%,290px); min-height: 180px; border-radius: 90px 90px 18px 18px; } .channel-grid { grid-template-columns: 1fr; } .channel-grid article { min-height: 150px; } .channel-grid h3 { margin-top: 25px; } }

/* Consistent professional treatment for mixed brand artwork */
.marquee .logos span,
.marquee .logos span:nth-child(n) { background: #fff; border-color: #e7e7e2; padding: 17px 20px; }
.marquee .logos img { width: 145px; height: 70px; max-width: 100%; object-fit: contain; object-position: center; filter: none; }
.marquee .logos span:nth-child(1) img { width: 150px; }
.marquee .logos span:nth-child(2) img { width: 145px; }
.marquee .logos span:nth-child(3) img { width: 128px; }
.marquee .logos span:nth-child(4) img { width: 135px; }
.marquee .logos span:nth-child(5) img { width: 150px; }
.marquee .logos span:nth-child(6) img { width: 132px; }
.marquee .logos span:nth-child(7) img { width: 130px; }
.marquee .logos span:nth-child(8) img { width: 120px; }

/* Maximise visible logo artwork inside the consistent tiles. The first three
   source files have unusually generous transparent canvas around their marks. */
.marquee .logos span:nth-child(1) img { transform: scale(2.15); }
.marquee .logos span:nth-child(2) img { transform: scale(2); }
.marquee .logos span:nth-child(3) img { transform: scale(1.85); }
.marquee .logos span:nth-child(4) img { transform: scale(1.45); }
.marquee .logos span:nth-child(5) img { transform: scale(1.18); }
.marquee .logos span:nth-child(6) img { transform: scale(1.65); }
.marquee .logos span:nth-child(7) img { transform: scale(1.3); }
.marquee .logos span:nth-child(8) img { transform: scale(1.25); }

.channel-grid article { position: relative; }
.channel-icon { width: 58px; height: 58px; margin-top: 24px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: #7146d7; box-shadow: 0 8px 20px rgba(38,56,47,.07); }
.channel-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.channel-grid article:nth-child(2) .channel-icon { background: #dfe8d5; color: #446b51; }
.channel-grid article:nth-child(3) .channel-icon { background: #f4dfc0; color: #a16234; }
.channel-grid article:nth-child(4) .channel-icon { background: #e8ddfa; color: #7146d7; }
.channel-grid article:nth-child(5) .channel-icon { background: #dcecf2; color: #39768b; }
.channel-grid h3 { margin-top: 25px; }