/* Partners: two rows of partner logos form the lane lines of a road the van drives along. */
.partners-intro {display:grid; grid-template-columns:1.4fr 1fr; gap:7vw; align-items:end; padding-bottom:40px;}

/* ---------- The road ---------- */
.partners-drive {position:relative; height:260svh; margin-top:60px;}
.drive-sticky {position:sticky; top:0; height:100svh; min-height:520px; display:flex; flex-direction:column; justify-content:center; gap:34px; overflow:hidden;}
.drive-road {--road-h:clamp(300px, 54svh, 540px); position:relative; height:var(--road-h); display:grid; grid-template-rows:1fr auto 1.15fr auto 1fr;
  background:#111; border-block:8px solid #30302f;}
/* Solid edge lines, as on a real carriageway. */
.drive-road::before, .drive-road::after {content:''; position:absolute; left:0; right:0; height:3px; background:#424240;}
.drive-road::before {top:14px;} .drive-road::after {bottom:14px;}
.logo-lane {grid-row:2; position:relative; height:56px; overflow:hidden; display:flex; align-items:center;}
.lane-bottom {grid-row:4;}
.logo-track {display:flex; align-items:center; gap:clamp(70px, 8vw, 120px); padding-left:clamp(70px, 8vw, 120px); will-change:transform; flex:none;}
.logo-track img {height:40px; width:auto; max-width:170px; object-fit:contain; flex:none; filter:brightness(0) invert(1); opacity:.42; transition:opacity .35s;}
.logo-track img.tall {height:52px;}
.logo-track img.near {opacity:1;}
.van-lane {grid-row:3; position:relative;}
.road-van {position:absolute; left:32%; top:50%; width:0; height:0; will-change:transform;}
.road-van .overhead-vehicle {width:calc(var(--road-h) * .95); filter:drop-shadow(0 8px 6px #000c);}

.drive-caption {display:flex; align-items:baseline; gap:26px; padding:0 var(--margin);}
.drive-caption .eyebrow {color:var(--muted);}
.passing-name {font-size:clamp(26px, 3vw, 44px); letter-spacing:-.05em; line-height:1; text-transform:uppercase;}
.drive-hint {margin-left:auto;}

/* ---------- The full list ---------- */
.partners-list {padding:110px var(--margin) 120px;}
.list-head {margin-bottom:60px;}
.list-head h2 {margin-top:26px;}
.partner-grid {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line);}
.partner {position:relative; aspect-ratio:1.45; display:grid; place-items:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px;}
.partner img {max-width:58%; max-height:42%; width:auto; height:auto; object-fit:contain; filter:brightness(0); opacity:.82; transition:filter .4s, opacity .4s, transform .4s;}
.partner span {position:absolute; left:20px; bottom:16px; right:20px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.partner .partner-colour {position:absolute; opacity:0; pointer-events:none;}
@media (hover:hover) {
  .partner:hover img {filter:none; opacity:1; transform:scale(1.04);}
  /* Logos simplified for single-colour use can carry their full-colour original for hover. */
  .partner:has(.partner-colour):hover img:first-child {opacity:0;}
  .partner:hover .partner-colour {opacity:1;}
}
.partners-end {display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:90px; padding-top:40px; border-top:1px solid var(--line);}
.partners-end p {font-size:clamp(22px, 2.4vw, 34px); letter-spacing:-.04em;}

/* Without motion the road is a still picture and the list does the work. */
.motion-off .partners-drive {height:auto;}
.motion-off .drive-sticky {position:relative; height:auto; min-height:0; padding:40px 0;}
.motion-off .drive-hint {display:none;}

@media (max-width:760px) {
  .partners-intro {display:block; padding-bottom:20px;}
  .partners-drive {height:220svh; margin-top:30px;}
  .drive-road {--road-h:clamp(250px, 42svh, 380px);}
  .logo-lane {height:40px;}
  .logo-track img {height:26px; max-width:110px;}
  .logo-track img.tall {height:36px;}
  .road-van {left:38%;}
  .drive-caption {flex-wrap:wrap; gap:10px 16px; padding:0 24px;}
  .drive-hint {margin-left:0; flex-basis:100%;}
  .partners-list {padding:80px 24px 90px;}
  .partner-grid {grid-template-columns:repeat(2, minmax(0, 1fr));}
  .partner {padding:18px;}
  .partner span {left:12px; bottom:10px; font-size:8px;}
  .partners-end {flex-direction:column; align-items:flex-start;}
  /* Phones: the road (van and partner logos) is part of the first screen. The intro is tighter, the road sits straight
     under it, and once pinned it holds near the middle of the screen instead of filling a full-height panel. */
  .partners-intro {padding-top:108px;}
  .partners-drive {margin-top:0;}
  .drive-road {--road-h:clamp(240px, 38svh, 340px);}
  .drive-sticky {height:auto; min-height:0; top:max(0px, calc(50svh - 240px)); justify-content:flex-start;}
}
/* Short phones (iPhone SE and similar): tighten the intro further so the road clears the join bar. */
@media (max-width:760px) and (max-height:740px) {
  .partners-intro {padding-top:88px; padding-bottom:8px;}
  .partners-intro h1 {margin-top:16px;}
  .partners-intro .intro-aside {padding-top:16px; padding-bottom:0;}
  .partners-intro .intro-aside p {margin:10px 0 6px;}
}

.drive-caption .motion-toggle {margin-left:auto; font-size:10px; min-height:44px; padding:10px 18px;}
@media(max-width:600px) {.drive-caption .motion-toggle {margin-left:0;}}

/* Keep the full list and its access links readable in the site's Arial family. */
.partners-list .eyebrow {font-size:12px; font-weight:500; letter-spacing:.18em;}
.partners-list .list-head h2 {font-size:clamp(48px,8.5vw,112px); font-weight:700; line-height:1; letter-spacing:-.045em;}
.partners-list .partner {min-width:0; min-height:200px; aspect-ratio:auto; padding:24px 20px; grid-template-rows:minmax(64px,1fr) auto; gap:16px;}
.partners-list .partner > img {grid-area:1 / 1; max-height:70px; max-width:70%;}
.partners-list .partner .partner-colour {position:static;}
.partners-list .partner > span {position:static; grid-area:2 / 1; justify-self:stretch; font-size:14px; font-weight:400; line-height:1.4; letter-spacing:.035em; text-transform:none; overflow-wrap:anywhere;}
.partners-list .partners-end p {font-weight:400; line-height:1.35; letter-spacing:-.02em;}
.partners-list .partners-end .pill {font-size:12px; line-height:1.5; letter-spacing:.12em;}
.partners-page footer .byjh-brand span {font-size:10px; line-height:1.6; letter-spacing:.16em;}
.partners-page .footer-pages {font-size:14px; line-height:1.5; letter-spacing:0;}
.partners-page .back-top {font-size:12px; line-height:1.5; letter-spacing:.1em;}
.partners-page .footer-bottom, .partners-page .footer-bottom span:last-child {font-size:12px; line-height:1.5; letter-spacing:.08em;}
.partners-page .byjh-footer-access {font-size:12px; line-height:1.5; letter-spacing:.06em;}
.partners-page .byjh-join-dock > a {font-size:12px; line-height:1.45; letter-spacing:0; max-width:150px;}
.partners-page .byjh-join-dock > button {font-size:12px; line-height:1.4; letter-spacing:.08em;}
@media(max-width:600px) {
  .partners-list .partner {padding:20px 12px;}
  .partners-page .byjh-join-dock > a {max-width:140px;}
  .partners-page .byjh-join-dock > button {font-size:11px; padding:15px 16px; gap:10px; flex-shrink:0;}
  .partners-page .byjh-join-dock > button span {font-size:22px;}
}