/* ==========================================================================
   PARKAR x TUMARA: header, logo chips, platforms row, Your journey.
   Loaded after tumara.css.
   ========================================================================== */
/* ---------- Header, Tumara layout: logo left, centred links, action right ----------
   Links are title case and semibold, with an underline that draws in. Dropdowns are
   grouped panels with a heading, square on top and rounded at the bottom. */
.site-header .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px}
.logo{justify-self:start}
.nav{display:contents}
.nav__list{justify-self:center;gap:4px}
.nav__cta{justify-self:end}
.nav__top, .nav__link a{text-transform:none;letter-spacing:.02em;font-size:15px;font-weight:600;padding:10px 14px}
.nav__top::after, .nav__link a::after{left:14px;right:14px;bottom:0}
.nav__menu{min-width:300px;padding:22px 28px 26px;border-radius:0 0 16px 16px}
.nav__menu a{text-transform:capitalize;letter-spacing:.06em;font-weight:500;font-size:14px;padding:11px 0}
.nav__menu a::after{bottom:7px}
.nav__bars{display:block;position:relative;width:24px;height:16px}
.nav__bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s,opacity .2s,top .3s}
.nav__bars i:nth-child(1){top:0}
.nav__bars i:nth-child(2){top:7px}
.nav__bars i:nth-child(3){top:14px}
.nav__burger[aria-expanded="true"] .nav__bars i:nth-child(1){top:7px;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] .nav__bars i:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] .nav__bars i:nth-child(3){top:7px;transform:rotate(-45deg)}
@media (max-width:1140px){
.nav__top, .nav__link a{padding:10px 9px;font-size:14px}
.nav__top::after, .nav__link a::after{left:9px;right:9px}
}
@media (max-width:1020px){
.site-header .wrap{display:flex;justify-content:space-between}
.nav{display:none;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:20px;padding:8px var(--gutter) 28px;background:var(--light-grey-color);border-bottom:1px solid var(--dark-grey-color);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
.nav.open{display:flex}
.nav__list{justify-self:auto}
.nav__cta{justify-self:auto}
.nav__menu{padding:4px 0 12px 16px;border-radius:0}
.nav__menu a{padding:10px 0}
}
/* ---------- Logo chips: original colour marks on one consistent plate ---------- */
.plogo{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 22px;border:1px solid var(--dark-grey-color);background:var(--light-grey-color);color:var(--main-color);font-size:14px;font-weight:600;letter-spacing:.01em;white-space:nowrap;vertical-align:middle;flex:none}
.plogo img.pl{display:block;height:24px;width:auto;max-width:150px;padding:0;border:0;background:none}
.plogo--icon img.pl{width:24px;height:24px;max-width:none;object-fit:contain}
.banner .plogo{background:var(--light-grey-color);border-color:transparent;color:var(--main-color)}
/* "Platforms we work across": label above, logos in a single line */
.platforms{display:block;margin-top:48px}
.platforms p{margin:0 0 16px;font-size:13px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--grey-color)}
.platforms__row{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.platforms__row .plogo{scroll-snap-align:start;flex:1 0 auto}
@media (max-width:1260px){
.platforms__row .plogo{height:50px;padding:0 16px;font-size:13px}
.platforms__row .plogo img.pl{height:22px}
}
/* ---------- Your journey: photo panels, the active one opens (Tumara home pattern) ---------- */
.journey{list-style:none;margin:56px 0 0;padding:0;display:flex;gap:12px;height:clamp(460px,46vw,600px)}
.journey__panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--secondary-dark-color);color:var(--on-dark);cursor:pointer;transition:flex-grow .7s cubic-bezier(.215,.61,.355,1);outline-offset:3px}
.journey__panel.is-active{flex-grow:3.4;cursor:default}
.journey__panel > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.215,.61,.355,1),filter .5s}
.journey__panel:not(.is-active) > img{filter:saturate(.6) brightness(.8)}
.journey__panel.is-active > img{transform:scale(1.03)}
.journey__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,30,44,.2) 0%,rgba(21,30,44,.1) 40%,rgba(21,30,44,.88) 100%);pointer-events:none}
@media (max-width:860px){
.journey{flex-direction:column;height:auto;gap:14px}
.journey__panel, .journey__panel.is-active{flex:none;min-height:380px;cursor:default;display:flex;align-items:flex-end}
.journey__panel > img, .journey__panel:not(.is-active) > img{filter:none}
}
/* ---------- Responsive hardening: grids that did not collapse on small screens ---------- */
.stats-band .wrap > div{min-width:0}
.stats-band b{white-space:nowrap;font-size:clamp(40px,3.8vw,60px)}
.stats-band .wrap > div{padding-left:24px;padding-right:24px}
@media (max-width:640px){
.stats-band b{font-size:clamp(34px,10vw,48px)}
}
@media (max-width:860px){
.journey__panel::after{background:linear-gradient(180deg,rgba(21,30,44,.12) 0%,rgba(21,30,44,.5) 38%,rgba(21,30,44,.93) 100%)}
}
/* ---------- Marquee: reusable, seamless horizontal logo loop ----------
   Markup: .marquee > .marquee__track > two identical .marquee__group lists.
   Items carry their own right margin (not flex gap), so each group is exactly half
   of the track and translateX(-50%) lands on the starting frame with no jump. */
.marquee{--gap:clamp(44px,6vw,96px);--speed:46s;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.marquee__track{display:flex;width:max-content;animation:marquee-x var(--speed) linear infinite;will-change:transform}
.marquee__group{display:flex;flex:none;align-items:center;list-style:none;margin:0;padding:0}
.marquee__item{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;min-width:150px;margin:0 var(--gap) 0 0}
.marquee__item img{display:block;height:40px;width:auto;max-width:170px;object-fit:contain}
.marquee__item span{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-color);white-space:nowrap}
@keyframes marquee-x{to{transform:translateX(-50%)}}
@media (hover:hover){
.marquee:hover .marquee__track{animation-play-state:paused}
}
.marquee:focus-within .marquee__track{animation-play-state:paused}
@media (max-width:640px){
.marquee{--speed:38s}
.marquee__item{min-width:120px}
.marquee__item img{height:32px;max-width:140px}
}
@media (prefers-reduced-motion:reduce){
.marquee{-webkit-mask-image:none;mask-image:none}
.marquee__track{animation:none;width:auto;display:block}
.marquee__group{flex-wrap:wrap;justify-content:center;gap:28px var(--gap)}
.marquee__group[aria-hidden="true"], .marquee__item[aria-hidden="true"]{display:none}
.marquee__item{margin:0}
}
/* The client-logo strip: same seamless method (margins instead of gap) */
.clients__grid{gap:0}
.clients__grid img{margin-right:clamp(48px,6vw,88px)}