/* ============================================================
   CONCRETE: the header Services dropdown (added by the CMS build once there
   are city pages). Services on the left; the cities of the one you point at
   on the right. Phones get a plain "Locations" link in the menu instead, and
   /services gets a "near you" row on the player.
   ============================================================ */
.nav-dd{ position:relative; display:inline-flex; align-items:center; }
.nav-loc-m{ display:none !important; }
.dd-panel{ position:absolute; top:calc(100% + 16px); left:50%; z-index:70; width:min(600px, 86vw);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0;
  background:rgba(12,12,14,.74); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  /* closing waits a beat (.18s), so a pointer that drifts off the path on its way down doesn't drop the panel */
  opacity:0; visibility:hidden; transform:translate(-50%,-6px); transition:opacity .2s var(--ease) .18s, transform .26s var(--ease) .18s, visibility 0s .44s;
  text-transform:none; letter-spacing:var(--ls-text); text-shadow:none; }
/* a bridge over the 16px gap, so the pointer can travel from the link down to the panel. It hangs off the
   link (not the panel, whose corners would clip it) and is wider than the link for a diagonal move. */
.nav-dd::after{ content:""; position:absolute; left:-40px; right:-40px; top:100%; height:20px; }
.nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel, .nav-dd.is-open .dd-panel{
  opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .22s var(--ease), transform .28s var(--ease), visibility 0s; }
.hud .channels .dd-panel a{ opacity:1; padding:0; }
.hud .channels .dd-panel a::after{ display:none; }
.dd-svcs{ display:grid; align-content:start; padding:14px; border-right:1px solid rgba(255,255,255,.08); }
.hud .channels .dd-panel .dd-s{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--r-md); color:var(--ink-2);
  font-family:var(--disp); font-size:var(--fs-d6); letter-spacing:var(--ls-display); text-transform:uppercase; line-height:var(--lh-tight); transition:background .2s, color .2s; }
.dd-s::before{ content:""; width:8px; height:8px; border-radius:var(--r-xs); background:var(--c); flex:none; }
.hud .channels .dd-panel .dd-s.is-on, .hud .channels .dd-panel .dd-s:hover, .hud .channels .dd-panel .dd-s:focus-visible{ background:rgba(255,255,255,.06); color:#fff; outline:none; }
.dd-locs{ position:relative; display:grid; align-content:start; padding:22px 22px 18px; min-height:100%; }
.dd-l{ display:none; align-content:start; gap:4px; }
.dd-l.is-on{ display:grid; }
.dd-k{ margin:0 0 10px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--dim); }
.hud .channels .dd-l a{ font-family:var(--sans); font-size:var(--fs-body); font-weight:var(--fw-semi); color:var(--ink); padding:7px 0; transition:color .2s; }
.hud .channels .dd-l a:hover, .hud .channels .dd-l a:focus-visible{ color:#fff; outline:none; text-decoration:underline; text-underline-offset:4px; }
.hud .channels .dd-panel .dd-all{ margin-top:18px; padding-top:14px !important; border-top:1px solid rgba(255,255,255,.08); font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-2); }
.hud .channels .dd-panel .dd-all:hover{ color:#fff; }

/* /services and /locations: the chips of the cover in front, just above the player (in the HTML, so always there on phones) */
.svc-near{ position:absolute; left:50%; bottom:calc(100% + 14px); transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px;
  width:max-content; max-width:min(92vw,640px); pointer-events:auto; }
.svc-near[hidden], .svc-near-set[hidden]{ display:none; }
.svc-near-set{ display:contents; }
.svc-near-k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-2); margin-right:2px; }
.svc-near a{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:#fff; text-decoration:none;
  padding:8px 12px; border-radius:var(--r-pill); background:rgba(12,12,14,.72); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .2s, background-color .2s; }
.svc-near a:hover{ border-color:#fff; }
.svc-near a:focus-visible{ border-color:#fff; outline:2px solid #fff; outline-offset:2px; }

/* "Operating across New Zealand: Auckland / Wellington / Christchurch", above the footer on Home and the
   service pages. Runs on the home page's marquee (.pp-track, styles.css); calm hairline band, city hubs only. */
.nz-ticker{ position:relative; z-index:2; overflow:hidden; padding:clamp(18px,2.6vh,28px) 0; margin-top:clamp(36px,6vh,80px);
  border-block:1px solid rgba(255,255,255,.12); background:rgba(10,10,11,.55); }
.nz-track{ animation-duration:48s; }
.nz-ticker:hover .nz-track, .nz-ticker:focus-within .nz-track{ animation-play-state:paused; }
.nz-half, .nz-set{ display:flex; flex:none; align-items:center; }
.nz-set{ gap:clamp(12px,1.4vw,20px); padding-right:clamp(12px,1.4vw,20px);
  font-family:var(--disp); text-transform:uppercase; font-size:clamp(24px,3vw,44px); line-height:var(--lh-tight); letter-spacing:var(--ls-display); color:#fff; }
.nz-k{ color:var(--ink-2); }
.nz-sep{ font-style:normal; color:rgba(255,255,255,.34); }
.nz-star{ font-style:normal; color:var(--ig, #E5342B); font-size:.6em; }
.nz-set a{ color:#fff; text-decoration:none; background-image:linear-gradient(var(--ig, #E5342B),var(--ig, #E5342B)); background-size:0 3px;
  background-repeat:no-repeat; background-position:0 100%; padding-bottom:4px; transition:background-size .3s var(--ease); }
.nz-set a:hover, .nz-set a:focus-visible{ background-size:100% 3px; }
.nz-set a:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:var(--r-xs); }
@media (prefers-reduced-motion:reduce){
  .nz-track{ animation:none; justify-content:center; }
  .nz-half + .nz-half, .nz-set[aria-hidden]{ display:none; }
  .nz-ticker .nz-track{ width:100%; }
  .nz-half{ flex:1 1 auto; min-width:0; justify-content:center; }
  .nz-set{ flex:1 1 auto; min-width:0; flex-wrap:wrap; justify-content:center; row-gap:8px; padding:0 16px; }
  .nz-k{ flex-basis:100%; text-align:center; }
}

@media (max-width:720px){
  .nav-dd{ display:contents; }
  /* phones: one row right above the player (the legal bar now sits under the player). Tighter chips
     so a three-city set fits 320px; a longer set scrolls sideways, never wraps onto the deck. */
  .svc-near{ bottom:calc(100% + 10px); flex-wrap:nowrap; justify-content:safe center; gap:6px; max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none; }
  /* a set wider than the screen (Auckland's six) runs edge to edge and fades out on the right, so the
     chip it cuts reads as "scroll for more"; JS adds .is-scroll when the set overflows */
  .svc-near.is-scroll{ width:100vw; max-width:100vw; justify-content:flex-start; padding:0 16px; scroll-padding-inline:16px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 56px), transparent);
            mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 56px), transparent); }
  .svc-near.is-scroll::after{ content:""; flex:none; width:24px; }
  .svc-near::-webkit-scrollbar{ display:none; }
  .svc-near a{ flex:none; padding:8px 9px; letter-spacing:var(--ls-ui); white-space:nowrap; }
  .svc-near-k{ display:none; }   /* the row's aria-label still names it */
  .dd-panel{ display:none; }
  .nav-loc-m{ display:block !important; }
}
/* 320x568-class phones: the deck needs the whole stage, so the chip row steps aside (the city links stay in
   the footer Locations column and the phone menu) */
@media (max-width:720px) and (max-height:600px){
  .svc-near{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .dd-panel{ transition:none !important; } }