/* =====================================================================
   HUB — four service films fill the first screen, edge to edge
   ===================================================================== */
.hub-hero{position:relative;height:100svh;min-height:600px;padding-top:var(--nav-h);background:var(--ink)}
.hub-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the grid itself: two by two, hairline seams, no margins */
.films.is-full{position:relative;height:100%;gap:2px;grid-template-rows:repeat(2,minmax(0,1fr));background:var(--ink)}
.films.is-full .film{aspect-ratio:auto;height:100%;border-radius:0;box-shadow:none}
.films.is-full .film-media video{object-position:50% 38%}

/* right-hand films read from their outer edge, so the centre stays clear for the dial */
.films.is-full .film:nth-child(even) .film-info{justify-items:end;text-align:end}
.films.is-full .film:nth-child(even) .film-top,
.films.is-full .film:nth-child(even) .film-caps,
.films.is-full .film:nth-child(even) .film-actions{justify-content:flex-end}
.films.is-full .film:nth-child(even) .film-desc{margin-inline-start:auto}
.films.is-full .film:nth-child(odd) .film-soon{right:auto;left:clamp(16px,1.8vw,24px)}
.films.is-full .film-info{padding:clamp(20px,2.4vw,36px)}
.films.is-full .film-title{font-size:clamp(26px,2.6vw,40px)}

/* ---------- the dial at the crossing: pauses or plays all four films ---------- */
.hub-dial{position:absolute;left:50%;top:50%;z-index:5;width:clamp(128px,11vw,172px);aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;
  box-shadow:0 0 0 2px var(--ink),0 0 0 3px rgba(255,255,255,.12),0 24px 60px -20px rgba(0,0,0,.7);
  transition:scale 300ms var(--ease-out),box-shadow 300ms var(--ease)}
.dial-ring{position:absolute;inset:6%;width:88%;height:88%;overflow:visible;animation:dialSpin 26s linear infinite}
.dial-ring text{font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:.06em;fill:rgba(242,250,250,.86)}
@keyframes dialSpin{to{transform:rotate(360deg)}}
.hub-dial[aria-pressed="true"] .dial-ring{animation-play-state:paused}
.dial-core{position:relative;width:44%;aspect-ratio:1;display:grid;place-items:center}
.dial-mark{width:100%;height:auto;transition:opacity 220ms var(--ease),transform 300ms var(--ease-out)}
.dial-icon{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--rust);color:#fff;opacity:0;scale:.7;
  transition:opacity 220ms var(--ease),scale 300ms var(--ease-out)}
.dial-icon svg{width:42%;height:42%}
.dial-icon.is-play{display:none}
.hub-dial[aria-pressed="true"] .dial-icon.is-pause{display:none}
.hub-dial[aria-pressed="true"] .dial-icon.is-play{display:grid;opacity:1;scale:1}
.hub-dial[aria-pressed="true"] .dial-mark{opacity:0}
.hub-dial:active{scale:.96}
@media (hover:hover) and (pointer:fine){
  .hub-dial:hover{scale:1.05;box-shadow:0 0 0 2px var(--ink),0 0 0 3px rgba(241,88,34,.6),0 24px 60px -20px rgba(0,0,0,.7)}
  .hub-dial:hover .dial-mark{opacity:0;transform:scale(.8)}
  .hub-dial:hover .dial-icon{opacity:1;scale:1}
}
.hub-dial:focus-visible{outline:2.5px solid var(--gold);outline-offset:4px;border-radius:50%}

/* phones and narrow tablets: the films stack, full width, still edge to edge */
@media (max-width:760px){
  .hub-hero{height:auto;min-height:0}
  .hub-title{position:static!important;width:auto;height:auto;clip:auto;white-space:normal;display:grid;gap:14px;
    padding:28px var(--gut) 24px;font-size:clamp(34px,10vw,48px);line-height:1;letter-spacing:-.03em;color:#fff}
  .films.is-full{height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .films.is-full .film{height:auto}
  .films.is-full .film:nth-child(even) .film-info{justify-items:start;text-align:start}
  .films.is-full .film:nth-child(even) .film-top,
  .films.is-full .film:nth-child(even) .film-caps,
  .films.is-full .film:nth-child(even) .film-actions{justify-content:flex-start}
  .films.is-full .film:nth-child(even) .film-desc{margin-inline-start:0}
  .films.is-full .film-soon{left:auto!important;right:12px}
  .hub-dial{display:none}
}
@media (prefers-reduced-motion:reduce){.dial-ring{animation:none}}

/* =====================================================================
   OUR WORK — the Illustrator design's case carousel: one large card in
   the centre, its neighbours peeking in from both sides
   ===================================================================== */
.ds-work{position:relative;padding-block:clamp(88px,9vw,140px) clamp(72px,7vw,110px);overflow:hidden;
  background:linear-gradient(180deg,#e3f3f4 0%,#fff5f0 36%,#ffffff 72%)}
.ds-work::before{content:"";position:absolute;left:50%;top:58%;width:min(1400px,120vw);height:640px;translate:-50% -50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,231,214,.75),rgba(255,245,240,0) 72%)}
.ds-work>*{position:relative;z-index:1}
.wk-rail{--cw:min(940px,76vw);position:relative}
.wk-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  padding-inline:calc((100% - var(--cw)) / 2);padding-block:24px 48px;overscroll-behavior-x:contain}
.wk-track::-webkit-scrollbar{display:none}
.wk{flex:0 0 var(--cw);scroll-snap-align:center;transition:opacity 500ms var(--ease)}
.wk:not(.is-active){opacity:.6}
.wk-in{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:stretch;aspect-ratio:940/515;border-radius:22px;overflow:hidden;isolation:isolate;
  color:#fff;background:var(--wk-bg);box-shadow:0 34px 70px -40px rgba(0,48,56,.55)}
.wk-in::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* the highlight colours live in site.css (--hl-*), shared with the Human Experience bento */
.wk[data-tone="orange"]{--wk-bg:var(--hl-orange)}
.wk[data-tone="blue"]  {--wk-bg:var(--hl-blue)}
.wk[data-tone="yellow"]{--wk-bg:var(--hl-yellow)}
.wk[data-tone="plum"]  {--wk-bg:var(--hl-plum)}
.wk[data-tone="teal"]  {--wk-bg:var(--hl-teal)}
.wk-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3.4vw,50px)}
.wk-svc{padding-inline-start:12px;border-inline-start:2px solid currentColor;font-size:clamp(14px,1.1vw,17px);line-height:1.15;max-width:9ch}
.wk-title{margin-top:auto;font-size:clamp(26px,2.5vw,36px);font-weight:700;line-height:1.05;letter-spacing:-.02em;max-width:12ch}
.wk-sub{margin-top:10px;font-size:clamp(14px,1.15vw,17px);line-height:1.35;opacity:.92;max-width:28ch}
.wk-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;height:40px;padding:0 16px;border-radius:8px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;
  opacity:0;transform:translateY(8px);transition:opacity 300ms var(--ease-out),transform 420ms var(--ease-out)}
.wk-cta svg{width:16px;height:16px;color:var(--rust)}
.wk-logo{margin-top:auto;height:clamp(28px,2.6vw,38px);width:auto;max-width:150px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.wk[data-tone="yellow"] .wk-in{color:var(--ink)}
.wk[data-tone="yellow"] .wk-logo{filter:brightness(0);opacity:.78}
.wk[data-tone="yellow"] .wk-cta{background:var(--ink);color:#fff}
.wk[data-tone="yellow"] .wk-cta svg{color:var(--sand)}
.wk-art{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(10px,1.4vw,20px)}
.wk-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 34px rgba(0,0,0,.22));transition:transform 900ms var(--ease-out)}
.wk.is-active .wk-cta{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.wk.is-active .wk-in:hover .wk-art img{transform:scale(1.04) translateY(-6px)}}
.wk-in:focus-visible{outline:3px solid var(--rust);outline-offset:4px}

/* carousel controls: just the two arrows */
.wk-btns{display:flex;gap:12px}
.wk-arw{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;background:var(--ink);color:#fff;
  box-shadow:0 14px 28px -16px rgba(0,48,56,.6);
  transition:background-color 220ms var(--ease),opacity 220ms var(--ease),scale 160ms var(--ease-out)}
.wk-arw svg{width:20px;height:20px;transition:translate 260ms var(--ease-out)}
.wk-arw:disabled{opacity:.22;cursor:default}
.wk-arw:not(:disabled):active{scale:.94}
@media (hover:hover) and (pointer:fine){
  .wk-arw:not(:disabled):hover{background:var(--rust)}
  .wk-arw.is-prev:not(:disabled):hover svg{translate:-3px 0}
  .wk-arw.is-next:not(:disabled):hover svg{translate:3px 0}
}
.wk-arw:disabled{box-shadow:none}
.wk-foot{display:grid;justify-items:center;margin-top:4px}
.dot-btn,.lg-dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rust);background:transparent;transition:background-color 200ms var(--ease),scale 200ms var(--ease-out)}
.lg-dot[aria-pressed="true"]{background:var(--rust)}
.lg-dot:hover{scale:1.2}

@media (max-width:820px){
  .wk-rail{--cw:86vw}
  .wk-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);aspect-ratio:4/5}
  .wk-title{margin-top:18px}
  .wk-logo{display:none}
  .wk-cta{opacity:1;transform:none}
}

/* =====================================================================
   TRUSTED BY INDUSTRIES — white logo cards on an ice band, paged
   ===================================================================== */
.ds-logos{padding-block:clamp(72px,8vw,120px) clamp(56px,6vw,96px);overflow:hidden;background:linear-gradient(180deg,#ffffff 0%,#f0f9fa 22%,#eff8fa 78%,#ffffff 100%)}
/* full-bleed rows of logo cards, travelling in opposite directions */
.lg-marquee{width:100%}
.lg-marquee .mq-track{gap:16px}
.lg-cell{flex:0 0 auto;width:clamp(150px,13vw,200px);height:clamp(84px,7vw,100px);display:grid;place-items:center;padding:14px 22px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #cde6e8;
  transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease)}
.lg-cell img{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.82;transition:opacity 300ms var(--ease)}
.lg-cell img[src*="metro-trains"]{filter:grayscale(1) brightness(.45);opacity:.9}
.lg-cell img[src*="lxrp"],.lg-cell img[src*="glen-eira"],.lg-cell img[src*="energy-qld"],.lg-cell img[src*="metro-trains"],.lg-cell img[src*="ampol"]{max-height:58px}
@media (hover:hover) and (pointer:fine){.lg-cell:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--mint),0 16px 30px -20px rgba(0,48,56,.35)}.lg-cell:hover img{opacity:1}}
@media (prefers-reduced-motion:reduce){.lg-marquee .mq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding-inline:var(--gut)}.lg-marquee .lg-cell[aria-hidden="true"]{display:none}}
@media (prefers-reduced-motion:reduce){.wk,.wk-art img,.lg-cell{transition:none}}