/* /industries hub spectacle (INDUSTRIES-HUB-SPECTACLE-SPEC.md, 6 Oct 2026).
   Linked ONLY on /industries, after site.css. Everything is scoped under
   .hub so nothing here can leak to other pages. Start-hidden states exist only under
   .hubg--arm, a class assets/js/hub.js adds when motion is allowed, so with no
   JS or reduced motion every row is simply readable. Motion is transform +
   opacity only. */

.hub{background:var(--navy)}

/* ---------- 1. Opening (100svh): the homepage video, rotating trade word ---------- */
.hub .hero--hubx{height:100svh;min-height:620px;max-height:none;align-items:center;justify-content:center;padding:clamp(96px,13svh,132px) 0 clamp(96px,13svh,132px)}
.hub .hero--hubx .hero__grid{gap:0}
.hub .hero--hubx .hero__sub{max-width:56ch;margin:clamp(20px,3.2svh,30px) auto 0;font-size:clamp(17px,1.4vw,19px)}
.hub .hero--hubx h1{margin-top:0}
.hub .hero--hubx .hero__cta{justify-content:center}
@media (max-width:899px){
  .hub .hero--hubx{height:auto;min-height:100svh}
}

/* the rotating gold word: stacked in one grid cell, so the box is as wide as
   the widest word and the headline never re-wraps. The first word is the real
   one in the HTML (no JS / reduced motion shows it still). */
.hubrot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.hubrot__w{justify-self:start}
.hubrot__w{grid-area:1/1;white-space:nowrap;text-align:left;color:var(--gold);transform:translateY(105%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.hubrot__w.is-on{transform:none;opacity:1}
.hubrot__w.is-out{transform:translateY(-105%);opacity:0}
@media (prefers-reduced-motion:reduce){.hubrot__w{transition:none}}
/* small phones: "We grow" and the word sit on two centred lines */
@media (max-width:520px){
  .hub .hero--hubx h1 .hubwe{display:block}
  .hubrot{display:grid;justify-content:center}
  .hubrot__w{text-align:center;justify-self:center}
}

/* ---------- 2. The industry grid ---------- */
.hubg-sec{position:relative;padding:clamp(40px,4vw,56px) 0 clamp(44px,4.4vw,64px);background:var(--navy);scroll-margin-top:0}
.hubg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:600px){.hubg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.hubg{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
@media (min-width:1280px){.hubg{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.hubg__li{display:flex}
.hubk{display:flex;flex-direction:column;flex:1;box-sizing:border-box;padding:28px;min-height:44px;background:var(--navy-2);border:1px solid var(--line-navy);border-radius:10px;color:var(--on-navy);text-decoration:none;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.hubk__head{display:flex;align-items:center;gap:14px}
.hubk__icon{width:34px;height:34px;flex:none;color:var(--gold)}
.hubk__name{margin:0;font-size:clamp(22px,1.7vw,24px);font-weight:600;line-height:1.2;letter-spacing:-0.02em;color:var(--on-navy)}
.hubk__line{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--on-navy-2);}
.hubk__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-size:15px;font-weight:600;color:var(--gold)}
.hubk__go svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.hubk:hover,.hubk:focus-visible{border-color:var(--gold);transform:translateY(-4px)}
.hubk:hover .hubk__go svg,.hubk:focus-visible .hubk__go svg{transform:translateX(4px)}
.hubk:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .hubk,.hubk__go svg{transition:none}
  .hubk:hover,.hubk:focus-visible{transform:none}
  .hubk:hover .hubk__go svg,.hubk:focus-visible .hubk__go svg{transform:none}
}
/* calm entrance: fade + rise, 40ms apart (armed by hub.js only) */
.hubg--arm .hubg__li{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.hubg--arm .hubg__li.is-in{opacity:1;transform:none}

/* ---------- 3. Same system, every industry ---------- */
.hubs{background:var(--navy-2);padding:clamp(40px,4.4vw,60px) 0;border-top:1px solid var(--line-navy);border-bottom:1px solid var(--line-navy)}
.hubs__line{margin:0 auto;max-width:34ch;text-align:center;font-size:clamp(22px,2.6vw,36px);line-height:1.25;font-weight:600;letter-spacing:-0.03em;color:var(--on-navy);text-wrap:balance}
.hubs__stages{list-style:none;margin:clamp(28px,3.6vw,44px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px clamp(14px,2vw,28px)}
.hubs__stages li{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.hubs__stages li + li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.hubs__stages a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--on-navy-2);text-decoration:none;transition:color .25s var(--ease)}
.hubs__stages a:hover,.hubs__stages a:focus-visible{color:var(--gold)}
.hubs__stages a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
@media (max-width:639px){
  .hubs__stages{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch;gap:0 16px;max-width:420px;margin-inline:auto}
  .hubs__stages li{gap:12px}
  .hubs__stages li::before,.hubs__stages li + li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
  .hubs__stages a{font-size:14px}
}

/* ---------- 4. Not listed? ---------- */
.hubc{background:var(--navy);padding:clamp(52px,5.4vw,80px) 0;text-align:center}
.hubc__h{margin:0 auto;max-width:22ch;font-size:clamp(34px,4.6vw,68px);line-height:1.06;font-weight:600;letter-spacing:-0.045em;color:var(--on-navy);text-wrap:balance}
.hubc__h em{font-style:normal;color:var(--gold)}
.hubc .btn{margin-top:clamp(28px,4vw,48px);min-height:60px;padding:0 34px;font-size:17px}
@media (max-width:479px){.hubc .btn{white-space:normal;line-height:1.25;padding:14px 24px}}

/* Phones: shorter hero so the first industry card (Construction) peeks in on load,
   telling people to scroll (Ben, 6 Oct 2026). */
@media (max-width:899px){
  .hub .hero--hubx{height:auto;min-height:0;padding:104px 0 36px}
  .hubg-sec{padding-top:8px}
}

/* Laptops: shorter hero so the first row of industry cards (Construction,
   Architects, Trades…) shows on landing and invites the scroll (Ben, 6 Oct 2026). */
@media (min-width:900px){
  .hub .hero--hubx{height:auto;min-height:0;padding:clamp(112px,15svh,140px) 0 clamp(40px,5svh,56px)}
  .hubg-sec{padding-top:0}
}