/* City and sector pages (body has .place-page). Phone first. Every block reads as plain content without JS;
   places.js adds the motion. The site-wide prefers-reduced-motion rule in site.css switches all animation off. */
.place-page {
  --place-night: #0B2A2E; --place-night-2: #061416; --place-paper: #FAF7F2; --place-ink: #14262A;
  --place-ink-soft: #2E3F42; --place-ink-muted: #3A4B4E; --place-mist: #D6E7E5;
  --place-header: var(--sw-header-h, 68px);
  overflow-x: clip;
}
.place-page li { max-width: none; }
.place-page [hidden] { display: none !important; }
.place-page h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 6vw, 38px); line-height: 1.12; margin: 0 0 8px; }
.place-page h3 { margin: 0 0 8px; }
.place-page [id] { scroll-margin-top: calc(var(--place-header) + 76px); }

/* Hero: full-bleed photo (slow zoom) or, before photos arrive, the branded gradient. */
.place-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px;
  min-height: clamp(560px, 70vw, 720px); padding: 96px 0 18px; background: var(--place-night); color: var(--place-paper); }
/* Stacking: photo (0) < dark gradient overlay (1) < text and facts (2). */
.place-hero { isolation: isolate; }
.place-hero > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  animation: place-kb 20s ease-out infinite alternate; }
.place-hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,20,22,.4) 0%, rgba(6,20,22,.2) 25%, rgba(6,20,22,.68) 48%, rgba(6,20,22,.92) 100%); }
.place-hero h1, .place-hook { text-shadow: 0 2px 16px rgba(6,20,22,.45); }
.place-hero--plain { min-height: clamp(480px, 60vw, 600px);
  background: radial-gradient(circle at 78% 18%, rgba(242,179,61,.28), transparent 42%),
              radial-gradient(circle at 10% 90%, rgba(108,194,185,.22), transparent 50%),
              linear-gradient(160deg, #0F5257 0%, var(--place-night) 55%, var(--place-night-2) 100%); }
.place-hero--plain::before { inset: auto -40px auto auto; top: 40px; width: min(70vw, 420px); aspect-ratio: 1; opacity: .2;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23F2B33D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='86' cy='30' r='12'/%3E%3Cpath d='M6 98 40 52l18 22 14-16 42 40Z'/%3E%3Cpath d='M6 108c14-6 26-6 40 0s26 6 40 0 20-6 28-2' stroke='%236CC2B9'/%3E%3C/svg%3E");
  animation: place-bob 6s ease-in-out infinite; }
.place-hero-inner, .place-facts { position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.place-badge { display: inline-flex; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: var(--sun); color: var(--place-ink);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; animation: place-rise .8s .1s ease-out both; }
.place-hero h1 { margin: 0; color: var(--place-paper); font-family: var(--font-display); font-weight: 600; font-size: clamp(42px, 11vw, 76px);
  line-height: 1.02; letter-spacing: -.01em; animation: place-rise .8s .35s ease-out both; }
.place-hook { margin: 14px 0 0; max-width: 560px; color: #E3EFED; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.5; animation: place-rise .8s .6s ease-out both; }
.place-facts { list-style: none; margin-block: 0; gap: 10px; scroll-padding-inline: 16px; animation: place-rise .8s .85s ease-out both; }
.place-facts li { flex: 0 0 auto; min-width: 140px; padding: 10px 14px; border-radius: 14px; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.place-facts strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 24px; font-variant-numeric: tabular-nums; }
.place-facts span { display: block; color: var(--place-mist); font-size: 13px; }

/* Swipe rows: CSS scroll-snap, with optional ‹ › buttons (shown only with JS). */
.swipe { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; }
.swipe::-webkit-scrollbar { display: none; }
.swipe > * { scroll-snap-align: start; }
.place-body .swipe { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.place-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.place-head p { margin: 0; color: var(--ink-muted); }
.swipe-buttons { display: flex; gap: 8px; flex: none; }
.no-js .swipe-buttons { display: none; }
.swipe-buttons button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-raised);
  color: var(--harbour); font-size: 22px; line-height: 1; cursor: pointer; transition: transform .15s ease; }
.swipe-buttons button:active, .place-btn:active, .known-card:active { transform: scale(.97); }

/* Section menu: sticky, swipeable chips; places.js marks the current section. */
nav.onpage { position: sticky; top: var(--place-header); z-index: 8; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px max(16px, calc((100% - 1088px) / 2)); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
nav.onpage::-webkit-scrollbar { display: none; }
nav.onpage a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; box-sizing: border-box;
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--harbour); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background .2s ease, color .2s ease; }
nav.onpage a[aria-current="true"] { background: var(--harbour); border-color: var(--harbour); color: var(--on-harbour); }

.place-body { max-width: 1120px; margin: 0 auto; padding: 0 16px 24px; box-sizing: border-box; }
.place-body > section { margin-top: 48px; }
@media (min-width: 720px) {
  .place-body { padding-inline: 24px; }
  .place-body .swipe { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
  .place-hero-inner, .place-facts { padding-inline: 24px; scroll-padding-inline: 24px; }
}
.quiz .place-eyebrow { margin: 0 0 6px; color: var(--sun); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.place-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid transparent; background: var(--sun); color: var(--place-ink); font: 600 16px/1.2 var(--font-body);
  text-decoration: none; cursor: pointer; transition: transform .15s ease; }
.place-btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.seasons .place-source { margin: 14px 0 0; font-size: 13px; color: var(--place-ink-muted); }

/* Quiz: dark card. Without JS a plain form; with JS one question at a time, a progress bar and a score. */
.quiz { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(22px, 5vw, 40px); color: var(--place-paper);
  background: linear-gradient(135deg, var(--place-night), #0F5257); }
.quiz::before { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; opacity: .18; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260' fill='none' stroke-width='2'%3E%3Ccircle cx='130' cy='130' r='120' stroke='%23F2B33D'/%3E%3Ccircle cx='130' cy='130' r='80' stroke='%236CC2B9'/%3E%3Ccircle cx='130' cy='130' r='40' stroke='%23F2B33D'/%3E%3C/svg%3E"); }
.quiz h2 { color: var(--place-paper); margin-bottom: 18px; }
.quiz-form { margin: 0; }
.quiz fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.quiz legend { padding: 0; margin-bottom: 14px; font-size: clamp(18px, 3vw, 22px); font-weight: 600; }
.quiz label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 16px; box-sizing: border-box; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; font-size: 16px; transition: background .2s ease, transform .15s ease; }
.quiz label:hover { background: rgba(255,255,255,.16); }
.quiz label:active { transform: scale(.98); }
.quiz label:has(:checked) { background: var(--sun); border-color: var(--sun); color: var(--place-ink); }
.quiz label:has(:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; }
.quiz input[type=radio] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--place-ink); }
.quiz--live fieldset { margin-bottom: 0; animation: place-rise .35s ease-out both; }
.quiz-progress { margin-bottom: 18px; }
.quiz-count { display: block; margin-bottom: 8px; color: #BFD8D5; font-size: 14px; font-variant-numeric: tabular-nums; }
.quiz-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--sun); transition: width .4s ease; }
.quiz-results { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.quiz-results[hidden] { display: none; }
.quiz-score { flex: none; display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; margin: 0; border-radius: 50%;
  color: var(--place-ink); font-family: var(--font-display); font-weight: 600; font-size: 38px; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #F2B33D 0%, #FFE3A3 50%, #F2B33D 100%); background-size: 200% 100%; animation: place-shine 2.5s linear infinite; }
.quiz-verdict { flex: 1 1 240px; }
.quiz-verdict h3 { font-size: 22px; color: var(--place-paper); }
.quiz-verdict p { margin: 0 0 14px; color: var(--place-mist); line-height: 1.5; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Known for: colourful swipe cards with big faded numbers. */
.known-card { flex: 0 0 min(82%, 320px); display: flex; flex-direction: column; gap: 10px; min-height: 250px; padding: 22px; box-sizing: border-box;
  border-radius: 22px; color: var(--place-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.known-card:hover { color: var(--place-ink); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(6,20,22,.14); }
.known-card:focus-visible { outline: 3px solid var(--harbour); outline-offset: 3px; }
.tint-sea { background: #D6E4E2; } .tint-leaf { background: #DCEFD9; } .tint-sun { background: #FCE7BE; } .tint-clay { background: #F6DCC4; }
.known-top { display: flex; justify-content: space-between; align-items: center; }
.known-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; }
.known-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--place-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.known-num { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: rgba(20,38,42,.18); }
.known-title { font-family: var(--font-display); font-size: 23px; font-weight: 600; line-height: 1.2; }
.known-text { flex-grow: 1; color: var(--place-ink-soft); font-size: 15px; line-height: 1.55; }
.known-jobs { color: #0F5257; font-size: 14px; font-weight: 600; }

/* Work: job chips + the NZ map. */
.place-work { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.place-work-text { flex: 999 1 420px; min-width: 0; }
.place-work-text p { color: var(--ink-muted); line-height: 1.6; }
.place-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.place-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--harbour); font-weight: 600; text-decoration: none; }
.place-chips a:hover { border-color: var(--harbour); }
.place-map { flex: 1 1 280px; margin: 0; padding: 16px; border-radius: 22px; background: radial-gradient(circle at 60% 30%, #12393D, var(--place-night-2) 70%); }
.place-map figcaption { margin-top: 8px; color: var(--place-mist); font-size: 13px; text-align: center; }
.nz-map { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; border-radius: 22px;
  background: radial-gradient(circle at 60% 30%, #12393D, var(--place-night-2) 70%); font-family: var(--font-body); }
.place-map .nz-map { background: none; }
.nz-land { fill: #12393D; stroke: #6CC2B9; stroke-opacity: .55; stroke-width: 1; stroke-linejoin: round; }
.nz-towns circle { fill: #CFE9E6; opacity: .6; }
.nz-label { fill: #CFE9E6; font-size: 10px; }
.nz-dot { fill: var(--sun); }
.nz-pulse { fill: none; stroke: var(--sun); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center;
  animation: place-pulse 2s ease-out infinite; }
.nz-name { fill: var(--sun); font-size: 13px; font-weight: 600; }
.nz-map--dots .nz-name { font-size: 11px; fill: #FAF7F2; }
.nz-hit { fill: transparent; }
.nz-link { cursor: pointer; }
.nz-link:hover .nz-dot, .nz-link:focus-visible .nz-dot { fill: #fff; }
.nz-link:focus-visible { outline: none; }
.nz-link:focus-visible .nz-hit { stroke: var(--sun); stroke-width: 2; }

/* Weather: season tabs recolour the section and light up the matching month bars. */
.seasons { --season-bg: #FCE7BE; --season-on: #B57A10; border-radius: 24px; padding: clamp(20px, 5vw, 36px); color: var(--place-ink);
  background: var(--season-bg); transition: background .4s ease; }
.seasons[data-current="summer"] { --season-bg: #FCE7BE; --season-on: #F2B33D; }
.seasons[data-current="autumn"] { --season-bg: #F6DCC4; --season-on: #D9824A; }
.seasons[data-current="winter"] { --season-bg: #D6E4E2; --season-on: #0F5257; }
.seasons[data-current="spring"] { --season-bg: #DCEFD9; --season-on: #3E8E5A; }
.seasons h2 { color: var(--place-ink); margin-bottom: 4px; }
.seasons-hint { margin: 0 0 16px; color: var(--place-ink-soft); }
.no-js .seasons-hint { display: none; }
.season-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.season-tabs button { min-height: 48px; padding: 0 4px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.55);
  color: var(--place-ink); font: 600 15px/1.2 var(--font-body); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.season-tabs button:active { transform: scale(.97); }
.season-tabs button[aria-selected="true"] { background: #fff; border-color: var(--season-on); }
.season-tabs button:focus-visible { outline: 3px solid var(--place-ink); outline-offset: 2px; }
.season-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.season-panels { flex: 1 1 220px; }
.season-panels > div + div { margin-top: 18px; }
.js .season-panels > div + div { margin-top: 0; }
[data-season-panel] p { margin: 0; line-height: 1.5; max-width: 40ch; }
[data-season-panel]:not([hidden]) { animation: place-rise .35s ease-out both; }
.season-temp { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1 !important; }
.season-note { margin: 4px 0 12px !important; color: var(--place-ink-muted); font-size: 14px; }
.months { flex: 999 1 300px; min-width: 0; display: flex; align-items: flex-end; gap: 4px; height: 170px; margin: 0; padding: 0; list-style: none; }
.months li { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.months b { font-size: 11px; font-weight: 600; color: var(--place-ink-muted); }
/* Content pages set each bar's height server-side so it shows without JS: <li data-high="24" data-season="summer" style="--h:.96">,
   where --h = this month's high / the year's highest high. places.js re-grows the bars when they scroll into view. */
.months i { display: block; width: 100%; height: calc(var(--h, .4) * 120px); border-radius: 6px 6px 0 0; background: rgba(20,38,42,.15);
  transition: height .7s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.months span { font-size: 10px; letter-spacing: -.02em; color: var(--place-ink-muted); }
.seasons[data-current="summer"] li[data-season="summer"] i, .seasons[data-current="autumn"] li[data-season="autumn"] i,
.seasons[data-current="winter"] li[data-season="winter"] i, .seasons[data-current="spring"] li[data-season="spring"] i { background: var(--season-on); }

/* A day here: tall story-style photo cards with time badges. */
.day-card { position: relative; flex: 0 0 min(84%, 360px); margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--place-night); }
.day-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.day-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 18px; color: #fff; font-size: 18px; font-weight: 600; line-height: 1.35;
  background: linear-gradient(180deg, rgba(6,20,22,0), rgba(6,20,22,.88) 45%); }
.day-time { display: block; width: max-content; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--sun); color: var(--place-ink); font-size: 13px; }

/* Life: what locals love / good to know. */
#life > p { color: var(--ink-muted); line-height: 1.6; }
.love-know { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin-top: 16px; }
.love, .know { padding: 20px; border-radius: 20px; color: var(--place-ink); }
.love { background: #EAF4F2; } .know { background: #FBF1DE; }
.love h3, .know h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.love h3 { color: #0F5257; } .know h3 { color: #7A5410; }
.love ul, .know ul { margin: 0; padding: 0; list-style: none; }
.love li, .know li { display: flex; gap: 10px; padding: 8px 0; font-size: 15px; border-bottom: 1px solid rgba(15,82,87,.12); }
.love li:last-child, .know li:last-child { border-bottom: 0; }
.love li::before { content: "✓"; color: #0F5257; font-weight: 600; }
.know li::before { content: "!"; width: .6em; text-align: center; color: #7A5410; font-weight: 600; }

/* Fold-outs: native details with + / −. */
.fold details { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); }
.fold summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; padding: 14px 18px; box-sizing: border-box;
  font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; flex: none; color: var(--harbour); font-size: 24px; line-height: 1; }
.fold details[open] > summary::after { content: "−"; }
.fold summary:focus-visible { outline: 3px solid var(--harbour); outline-offset: -3px; border-radius: 16px; }
.fold details > div { padding: 0 18px 18px; color: var(--ink-muted); line-height: 1.6; }
.fold details > div p { margin: 0 0 10px; }
.fold details[open] > div { animation: place-rise .3s ease-out both; }

/* Worker / employer switch: both halves show without JS. */
.audience-switch { position: sticky; top: calc(var(--place-header) + 8px); z-index: 7; display: flex; width: max-content; max-width: 100%;
  margin: 8px 0 20px; padding: 4px; gap: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-raised);
  box-shadow: 0 6px 20px rgba(6,20,22,.08); }
.no-js .audience-switch { display: none; }
.audience-switch button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--harbour);
  font: 600 15px/1.2 var(--font-body); cursor: pointer; transition: background .25s ease, color .25s ease; }
.audience-switch button[aria-pressed="true"] { background: var(--harbour); color: var(--on-harbour); }
.audience [data-audience] + [data-audience] { margin-top: 32px; }
.js .audience [data-audience] + [data-audience] { margin-top: 0; }
.audience [data-audience].is-entering { animation: place-slide .35s ease-out both; }
.audience [data-audience] .nz-map { margin-top: 16px; }

/* Get help card. */
.place-help { border-radius: 24px; padding: clamp(22px, 5vw, 40px); color: var(--place-paper); background: linear-gradient(135deg, var(--place-night), #0F5257); }
.place-help h2 { color: var(--place-paper); }
.place-help p { margin: 0 0 18px; color: var(--place-mist); }

/* Floating "Free 20-min chat" pill: hidden while the Get help card or the footer is on screen. */
.no-js .place-cta, body.drawer-open .place-cta { display: none; }
.place-cta { position: fixed; z-index: 20; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; white-space: nowrap; border-radius: 999px;
  background: #14262A; color: #fff; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(6,20,22,.35); transition: opacity .25s ease, transform .25s ease; }
.place-cta:hover { color: #fff; }
.place-cta span { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); animation: place-blink 2s ease-in-out infinite; }
.place-cta.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 20px); }
.place-cta:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

@keyframes place-kb { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes place-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes place-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes place-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes place-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }
@keyframes place-shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes place-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .place-page *, .place-page *::before, .place-page *::after, .place-cta, .place-cta * { animation: none !important; transition: none !important; }
}

/* Hubs (/cities/, /sectors/): a compact hero and a grid of cards. */
.place-hero--hub { min-height: 0; padding: 88px 0 36px; }
.hub-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.hub-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 220px; height: 100%; padding: 18px; box-sizing: border-box; overflow: hidden;
  border-radius: 22px; color: #fff; text-decoration: none; background: var(--hub-bg, linear-gradient(160deg, #0F5257, #0B2A2E)); transition: transform .2s ease, box-shadow .2s ease; }
.hub-card:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(6,20,22,.18); }
.hub-card:focus-visible { outline: 3px solid var(--harbour); outline-offset: 3px; }
.hub-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hub-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,20,22,0) 20%, rgba(6,20,22,.82) 100%); }
.hub-card > * { position: relative; z-index: 2; }
.hub-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.92); }
.hub-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--place-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hub-name { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.15; }
.hub-line { margin: 0; color: #EAF3F1; font-size: 15px; line-height: 1.45; }
.hub-pill { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--sun); color: var(--place-ink); font-size: 12px; font-weight: 600; }
.hub-card[data-soon] .hub-pill { background: var(--place-ink); color: #fff; }
/* Light cards (sectors): pale gradient, no dark overlay, dark text. */
.hub-card--light, .hub-card--light:hover { color: var(--place-ink); }
.hub-card--light::before { display: none; }
.hub-card--light .hub-line { color: var(--place-ink-soft); }
.hub-card:target { outline: 3px solid var(--sun); outline-offset: 3px; }
.hub-map { max-width: 360px; margin: 18px auto 0; }
.place-sources { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--place-ink-muted); font-size: 14px; line-height: 1.6; }
.place-sources ul { margin: 6px 0 0; padding-left: 20px; }
.place-sources li { margin-bottom: 4px; }

/* Sector hero: a colour theme per sector and a large line icon with a small animation of its own.
   The icon is drawn in its finished state; the keyframes only move or redraw it, so it is complete when motion is off. */
.sector-hero { --sh-a: #5A3A0E; --sh-b: #2A1A06; --sh-accent: #F2B33D; min-height: clamp(520px, 62vw, 640px);
  background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--sh-accent) 14%, transparent), transparent 46%),
              linear-gradient(160deg, var(--sh-a) 0%, var(--sh-b) 100%); }
.sector-hero::before { display: none; }
.sector-hero--construction { --sh-a: #5A3A0E; --sh-b: #2A1A06; --sh-accent: #F2B33D; }
.sector-hero--healthcare { --sh-a: #7B1E3A; --sh-b: #36091B; --sh-accent: #FF9DB0; }
.sector-hero--aged-care { --sh-a: #4A2F7A; --sh-b: #1E1236; --sh-accent: #D9C2FF; }
.sector-hero--hospitality { --sh-a: #6E2D0C; --sh-b: #3A1706; --sh-accent: #FFC98A; }
.sector-hero--horticulture { --sh-a: #14522F; --sh-b: #0B2D1A; --sh-accent: #A8F0A0; }
.sector-hero--dairy-farming { --sh-a: #4B5A14; --sh-b: #232B08; --sh-accent: #F7EDB0; }
.sector-hero--it-tech { --sh-a: #2B2F8F; --sh-b: #0F1140; --sh-accent: #7DF9FF; }
.sector-hero--engineering { --sh-a: #3B3F45; --sh-b: #16191E; --sh-accent: #8EC9FF; }
.sector-hero--transport { --sh-a: #243B63; --sh-b: #0E1830; --sh-accent: #FFB347; }
.sector-hero--teaching { --sh-a: #1F4A44; --sh-b: #0C2421; --sh-accent: #FFE08A; }
.sector-hero-art { position: absolute; z-index: 1; top: 84px; right: max(8px, calc((100% - 1120px) / 2 + 16px)); width: clamp(150px, 40vw, 320px); aspect-ratio: 1; pointer-events: none; }
.sector-hero-art svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--sh-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) { .sector-hero-art { top: 52px; width: 104px; } }
.sector-hero .place-badge { background: var(--sh-accent); }
.sector-hero .place-btn { background: var(--sh-accent); }
.sector-hero .sh-soft { opacity: .55; }
.sector-hero .place-facts span { color: #F4F9F8; }
.sector-hero svg [class^="sh-"], .sector-hero svg [class*=" sh-"] { transform-box: fill-box; }

/* Construction: the cable shortens as the load is lifted, then lengthens as it comes down (the two share one timing). */
.sector-hero--construction .sh-cable { transform-origin: 50% 0; animation: sh-cable 4.5s ease-in-out infinite alternate; }
.sector-hero--construction .sh-load { animation: sh-lift 4.5s ease-in-out infinite alternate; }
@keyframes sh-cable { from { transform: scaleY(1); } to { transform: scaleY(.2273); } }
@keyframes sh-lift { from { transform: translateY(0); } to { transform: translateY(-34px); } }
/* Healthcare: the heartbeat line draws itself, over and over. */
.sector-hero--healthcare .sh-beat { animation: sh-draw 3.2s ease-in-out infinite; }
.sector-hero--healthcare .sh-heart { transform-origin: 50% 50%; animation: sh-pulse 1.6s ease-in-out infinite; }
@keyframes sh-draw { 0% { stroke-dasharray: 100; stroke-dashoffset: 100; } 70%, 100% { stroke-dasharray: 100; stroke-dashoffset: 0; } }
@keyframes sh-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.06); } }
/* Aged care: the heart in the house beats gently. */
.sector-hero--aged-care .sh-care-heart { transform-origin: 50% 50%; animation: sh-pulse 2.4s ease-in-out infinite; }
/* Hospitality: steam rises from under the dome. */
.sector-hero--hospitality .sh-steam { animation: sh-steam 3s ease-in-out infinite; }
.sector-hero--hospitality .sh-steam-2 { animation-delay: .7s; }
.sector-hero--hospitality .sh-steam-3 { animation-delay: 1.4s; }
@keyframes sh-steam { 0% { transform: translateY(8px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }
/* Horticulture: the leaves grow out from the stem. */
.sector-hero--horticulture .sh-leaf-l { transform-origin: 100% 100%; animation: sh-grow 3.4s ease-in-out infinite alternate; }
.sector-hero--horticulture .sh-leaf-r { transform-origin: 0 100%; animation: sh-grow 3.4s .5s ease-in-out infinite alternate; }
@keyframes sh-grow { from { transform: scale(.55); } to { transform: scale(1); } }
/* Dairy: a drop of milk falls from the cow's chin. */
.sector-hero--dairy-farming .sh-drop { animation: sh-drip 2.8s ease-in infinite; }
@keyframes sh-drip { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 85% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
/* IT and tech: the cursor in the code window blinks. */
.sector-hero--it-tech .sh-cursor { animation: sh-blink 1.1s steps(1, end) infinite; }
@keyframes sh-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* Engineering: the two meshed gears turn in opposite directions (10 teeth against 7). */
.sector-hero--engineering .sh-gear-big { transform-origin: 50% 50%; animation: sh-turn 14s linear infinite; }
.sector-hero--engineering .sh-gear-small { transform-origin: 50% 50%; animation: sh-turn 9.8s linear infinite reverse; }
@keyframes sh-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Transport: the road dashes stream past while the truck bobs. */
.sector-hero--transport .sh-road { animation: sh-road 1s linear infinite; }
.sector-hero--transport .sh-truck { animation: sh-bob .6s ease-in-out infinite alternate; }
@keyframes sh-road { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -26; } }
@keyframes sh-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
/* Teaching: the pencil writes, tilting about its tip. */
.sector-hero--teaching .sh-pencil { transform-origin: 0 100%; animation: sh-write 1.2s ease-in-out infinite alternate; }
@keyframes sh-write { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }

/* Pay bar: the figures are text, so the bar is decoration. Its position is set in CSS so it shows without JS;
   places.js resets the fill to 0 and grows it when it scrolls into view. */
.paybar { --pb-left: 0; --pb-width: 0; --pb-mid: 0; margin: 18px 0 0; }
.paybar-track { position: relative; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.paybar-fill { position: absolute; top: 0; bottom: 0; left: calc(var(--pb-left) * 1%); width: calc(var(--pb-width) * 1%); border-radius: 999px;
  background: linear-gradient(90deg, var(--harbour), var(--sun)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.paybar-marker { position: absolute; top: -8px; bottom: -8px; left: calc(var(--pb-mid) * 1%); width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: var(--place-ink); transition: left .9s cubic-bezier(.2,.8,.2,1); }
.paybar-scale { display: flex; justify-content: space-between; margin: 6px 0 0; color: var(--place-ink-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.paybar-figs { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; }
.paybar-figs li { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-raised); }
.paybar-figs strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--place-ink); }
.paybar-figs span { display: block; margin-top: 4px; color: var(--place-ink-muted); font-size: 14px; line-height: 1.45; }
.paybar-figs .paybar-key { display: inline-block; width: 10px; height: 10px; margin: 0 6px 0 0; border-radius: 50%; vertical-align: baseline; }
.paybar-note { margin: 16px 0 0; color: var(--place-ink-muted); font-size: 14px; line-height: 1.55; }
.place-page .audience h3 { font-family: var(--font-display); font-size: 26px; }
.place-page .audience h4 { margin: 20px 0 6px; font-size: 17px; }
.place-page .audience ul { padding-left: 20px; }
.place-page .audience li { margin-bottom: 6px; line-height: 1.55; }
.place-page .audience p { line-height: 1.6; }