@font-face{font-family:'Museo Sans';src:local('Museo Sans 100'),local('MuseoSans-100');font-weight:100;font-display:swap}
@font-face{font-family:'Museo Sans';src:local('Museo Sans 300'),local('MuseoSans-300');font-weight:300;font-display:swap}
@font-face{font-family:'Museo Sans';src:local('Museo Sans 500'),local('MuseoSans-500');font-weight:500;font-display:swap}
@font-face{font-family:'Museo Sans';src:local('Museo Sans 700'),local('MuseoSans-700');font-weight:700;font-display:swap}
@font-face{font-family:'Museo Sans';src:local('Museo Sans 900'),local('MuseoSans-900');font-weight:900;font-display:swap}
:root{--ivory:#F7F4EE;--blue:#004684;--cyan:#008dc7;--font:'museo-sans','Museo Sans','Avenir Next',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:0}body{margin:0;background:var(--ivory);color:var(--blue);font-family:var(--font);font-weight:300;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}.skip{position:fixed;z-index:100;left:20px;top:-80px;background:var(--ivory);padding:15px}.skip:focus{top:20px}header{position:fixed;top:0;left:0;right:0;z-index:30;padding:28px 4.5vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(var(--ivory),#f7f4eef2 65%,#f7f4ee00)}.brand{display:flex;align-items:center;gap:16px;text-decoration:none}.brand b{font-size:32px;letter-spacing:-.06em;font-weight:900}.brand span{font-size:8px;line-height:1.6;letter-spacing:.1em;font-weight:700}.explore{font-size:12px;text-decoration:none;border-bottom:1px solid #00468444;padding-bottom:6px}.explore span{margin-left:25px;font-size:18px}
#journey{position:relative}.presentation{position:sticky;top:0;height:100svh;overflow:hidden;margin-bottom:-100svh;background:var(--ivory)}.track>div{height:135svh}.track>#health,.track>#education,.track>#training{height:165svh}.track>#together{height:195svh}.track>#partners{height:140svh}.visual{position:absolute;top:13%;right:2%;width:55%;height:74%}#model-canvas{width:100%;height:100%;position:absolute;inset:0;opacity:0}.photo{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:center;clip-path:url(#architecture-mask);opacity:0;will-change:opacity,transform}.image-stage{position:absolute;width:0;height:0}.contour{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#008dc733;stroke-width:1;pointer-events:none;opacity:.5}.panels{position:absolute;inset:0;pointer-events:none}.panel{position:absolute;top:50%;left:5vw;width:39vw;max-width:600px;transform:translateY(-50%);opacity:0;pointer-events:none}.panel.active{pointer-events:auto}.panel:first-child{width:37vw}.eyebrow{font-size:11px!important;letter-spacing:.16em;line-height:1.6!important;font-weight:700!important;margin:0 0 26px!important;color:var(--blue)}.eyebrow:before{content:'';display:block;height:2px;width:38px;background:var(--cyan);margin-bottom:22px}h1,h2{font-weight:300;letter-spacing:-.052em;line-height:1.04;margin:0 0 30px;text-wrap:balance}h1{font-size:clamp(42px,4.4vw,78px);max-width:750px}h1 strong{font-weight:700}h2{font-size:clamp(50px,5.1vw,90px)}.panel p{font-size:clamp(16px,1.3vw,21px);line-height:1.6;max-width:440px;margin:0 0 18px}.panel p.small{font-size:14px;line-height:1.55;margin-top:28px}.panel p strong{font-weight:700;display:block}.scroll-link{display:inline-flex;align-items:center;gap:35px;font-weight:500;text-decoration:none;font-size:12px;margin-top:35px;padding-bottom:10px;border-bottom:1px solid #00468444}.scroll-link span{font-size:20px}.fact{margin-top:35px;display:flex;align-items:center;gap:20px}.fact b{font-weight:100;font-size:55px;letter-spacing:-.05em}.fact span{font-size:11px;line-height:1.5;max-width:110px}.visual-caption{position:absolute;bottom:10%;left:53%;font-size:9px;letter-spacing:.11em;font-weight:500;max-width:40%;line-height:1.5}.chapters{position:absolute;right:2.6%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:13px}.chapters a{width:7px;height:7px;border:1px solid var(--blue);border-radius:50%;opacity:.35}.chapters a[aria-current]{opacity:1;background:var(--blue);transform:scale(1.35)}.bottom{position:absolute;bottom:27px;left:5vw;right:5vw;display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:500;letter-spacing:.12em}.bottom button{font-size:10px;letter-spacing:.03em;background:transparent;border:0;padding:10px}.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#0046840d}.progress i{display:block;height:100%;width:0;background:var(--cyan)}.information{position:relative;background:var(--ivory);padding:110px 6vw;display:grid;grid-template-columns:1fr 1fr;gap:12vw;border-top:1px solid #00468422;scroll-margin-top:90px}.information h2{font-size:40px;max-width:510px;line-height:1.12}.information a{font-size:13px;text-decoration:none;border-bottom:1px solid;padding-bottom:7px;display:inline-block;margin-top:20px}.info-copy p,.info-copy li{font-size:16px;line-height:1.7}.info-copy h3{font-size:16px;font-weight:700;margin:32px 0 14px}.info-copy h3:first-child{margin-top:0}.info-copy ul{padding-left:18px}.info-copy li{padding-bottom:12px}footer{padding:35px 6vw 45px;display:flex;justify-content:space-between;align-items:start;gap:50px;border-top:1px solid #00468422;font-size:10px;line-height:1.7}footer b{font-weight:900;white-space:nowrap}footer p{max-width:490px;margin:0;color:#355c79}footer span{font-size:9px;letter-spacing:.1em;white-space:nowrap}
@media(min-width:1600px){.visual{right:3%;width:57%}.panel{left:6vw}.panel:first-child{width:36vw}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.photo{will-change:auto}}

/* Chapter dots retain their quiet appearance with usable click targets. */
.chapters{gap:0}.chapters a{width:26px;height:26px;border:0;border-radius:0;display:grid;place-items:center;opacity:1}.chapters a:before{content:'';display:block;width:6px;height:6px;border:1px solid var(--blue);border-radius:50%;opacity:.35}.chapters a[aria-current]{background:none;transform:none}.chapters a[aria-current]:before{opacity:1;background:var(--blue);transform:scale(1.35)}

.track>.exit{height:100svh}

/* Supplied RFDS SA & NT artwork, rendered from the client PDF. */
.brand img{display:block;width:230px;height:auto;max-width:100%;object-fit:contain}.brand{flex-shrink:0}

/* Cut-out photographs (transparent backgrounds). model.js positions each one
   so it sits exactly on the 3D model; until then they simply fit the box. */
#model-canvas{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%)}   /* floors that run past the box fade out instead of being cut */
.match{position:absolute;inset:0;opacity:0;pointer-events:none;transform-origin:50% 50%;will-change:opacity,transform}
.match img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none}
.match img.registered{width:1000px;height:auto;object-fit:fill;transform-origin:0 0}

/* Satellite map (map.js) for the last two chapters, in the same shaped frame as the photographs. */
.map{position:absolute;inset:0;opacity:0;clip-path:url(#architecture-mask);pointer-events:none;background:#d9cbb4}
.map .cesium-widget,.map .cesium-widget canvas{width:100%;height:100%;display:block}
.map-credits{position:absolute;top:calc(13% - 16px);right:2%;max-width:50%;text-align:right;opacity:0;font-size:8px;line-height:1.3;color:#355c79;pointer-events:auto}
.map-credits .cesium-credit-logoContainer{display:none!important}
.map-credits a{color:inherit}
.panel h2 .together-2{display:inline;transition:none}

/* ==========================================================================
   MOBILE  (phones and small tablets, up to 800px wide)

   The 3D model is the point of the phone experience, so on a phone it gets the
   full width of the screen and everything else is sized around it:

     header
     ┌──────────────────────────┐
     │   the visual (model or   │  fills whatever height is left
     │   photograph), edge to   │
     │   edge                   │
     ├──────────────────────────┤
     │   caption                │
     │   the active text panel  │  measured by story.js (--text-h), so it
     │                          │  can never collide with anything
     ├──────────────────────────┤
     │   chapter bar (8 ticks)  │  one tap target per chapter, in thumb reach
     │   03 / 08      Pause     │
     └──────────────────────────┘

   Variables (set by story.js):  --head-h  height of the fixed header
                                 --text-h  height of the active text panel
   ========================================================================== */
@media (max-width:800px){
  html{-webkit-text-size-adjust:100%}
  a,button{-webkit-tap-highlight-color:transparent}

  .presentation{--dock:calc(88px + env(safe-area-inset-bottom,0px))}

  /* Header: a smaller lockup and a real tap target. */
  header{padding:10px 20px 12px}
  .brand img{width:144px}
  .explore{position:relative;font-size:13px;padding-bottom:7px}
  .explore:after{content:'';position:absolute;inset:-18px -10px -12px}   /* invisible, makes the tap area 44px+ tall */
  .explore span{margin-left:14px;font-size:18px}

  /* The visual: edge to edge, between the header and the text. The shapes that
     mask the photographs are drawn inside a slightly wider box so the right
     edge runs off the screen and the rounded corners sit at the left. */
  .visual{left:-2%;right:auto;width:104%;top:var(--head-h,86px);bottom:calc(var(--dock) + var(--text-h,240px) + 34px);height:auto;min-height:0}
  #model-canvas{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .presentation.ready .visual,.presentation.ready .visual-caption{transition:bottom .45s cubic-bezier(.22,.8,.24,1)}

  .map-credits{top:calc(var(--head-h,86px) - 6px);right:12px;max-width:70%}
  .visual-caption{left:20px;right:20px;top:auto;bottom:calc(var(--dock) + var(--text-h,240px) + 12px);max-width:none;font-size:10px;letter-spacing:.1em}

  /* Text: anchored to the bottom, sized to be read at arm's length. */
  .panel,.panel:first-child{left:20px;right:20px;width:auto;max-width:none;top:auto;bottom:calc(var(--dock) + 8px);transform:none}
  .panel .eyebrow{font-size:12px!important;letter-spacing:.13em;margin-bottom:12px!important}
  .eyebrow:before{width:26px;margin-bottom:10px}
  .panel h1{font-size:34px;line-height:1.06;max-width:none;margin-bottom:14px}
  .panel h2{font-size:40px;line-height:1.04;margin-bottom:14px}
  .panel p{font-size:15px;line-height:1.5;max-width:560px;margin-bottom:10px}
  .panel p.small{font-size:13px;line-height:1.5;margin-top:10px}
  .scroll-link{font-size:14px;gap:20px;margin-top:4px;padding:14px 0 12px}
  .fact{margin-top:8px}
  .fact b{font-size:40px}
  .fact span{font-size:12px}

  /* Chapters: eight ticks along the bottom. Each is a full-height tap target;
     the visible tick is thin. */
  .chapters{left:12px;right:12px;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 44px);height:44px;transform:none;flex-direction:row;gap:0}
  .chapters a{flex:1 1 0;width:auto;height:44px}
  .chapters a:before{width:calc(100% - 6px);height:3px;border:0;border-radius:3px;background:var(--blue);opacity:.18;transform:none}
  .chapters a[aria-current]:before{opacity:1;transform:none}

  /* Position counter and pause, one row, both easy to hit. */
  .bottom{left:20px;right:20px;bottom:env(safe-area-inset-bottom,0px);height:44px;font-size:12px;letter-spacing:.12em}
  #chapter-label{display:none}
  #position{order:1}
  .bottom button{order:2;height:44px;padding:0 0 0 18px;font-size:13px;letter-spacing:.02em}

  /* After the story. */
  .information{grid-template-columns:1fr;gap:32px;padding:calc(var(--head-h,86px) + 28px) 20px 64px}   /* lands clear of the fixed header */
  .information h2{font-size:34px}
  .information a{font-size:15px;padding:14px 0 8px;min-height:44px}
  .info-copy p,.info-copy li{font-size:16px}
  footer{flex-wrap:wrap;padding:32px 20px calc(36px + env(safe-area-inset-bottom,0px));gap:18px;font-size:12px}
  footer p{width:100%;order:3}
  footer span{font-size:11px}

  .track>div{height:120svh}
}

/* Shorter phones (iPhone SE, small Androids): tighten the stack, keep the copy. */
@media (max-width:800px) and (max-height:700px){
  .presentation{--dock:calc(76px + env(safe-area-inset-bottom,0px))}
  header{padding:8px 20px 8px}
  .brand img{width:124px}
  .chapters{bottom:calc(env(safe-area-inset-bottom,0px) + 38px);height:38px}
  .chapters a{height:38px}
  .bottom,.bottom button{height:38px}
  .visual{bottom:calc(var(--dock) + var(--text-h,220px) + 30px)}
  .visual-caption{bottom:calc(var(--dock) + var(--text-h,220px) + 10px)}
  .panel,.panel:first-child{bottom:calc(var(--dock) + 6px)}
  .panel .eyebrow{font-size:11px!important;margin-bottom:8px!important}
  .eyebrow:before{margin-bottom:8px}
  .panel h1{font-size:30px;margin-bottom:10px}
  .panel h2{font-size:34px;margin-bottom:10px}
  .panel p{font-size:14px;margin-bottom:8px}
  .panel p.small{font-size:12.5px;margin-top:6px}
  .scroll-link{padding:10px 0 8px}
  .fact b{font-size:34px}
}

/* Very short screens (iPhone 5/SE 1st gen, 320x568): one more notch down. */
@media (max-width:800px) and (max-height:600px){
  .presentation{--dock:calc(70px + env(safe-area-inset-bottom,0px))}
  header{padding:6px 20px 6px}
  .brand img{width:108px}
  .chapters{bottom:calc(env(safe-area-inset-bottom,0px) + 36px);height:34px}
  .chapters a{height:34px}
  .bottom,.bottom button{height:36px}
  .panel .eyebrow{font-size:10.5px!important;margin-bottom:6px!important}
  .eyebrow:before{display:none}
  .panel h1{font-size:27px;margin-bottom:8px}
  .panel h2{font-size:30px;margin-bottom:8px}
  .panel p{font-size:13px;line-height:1.45;margin-bottom:6px}
  .panel p.small{font-size:12px}
  .fact{margin-top:4px}.fact b{font-size:30px}
}

/* Large phones and small tablets in portrait. */
@media (min-width:600px) and (max-width:800px){
  .brand img{width:170px}
  .panel,.panel:first-child{left:6vw;right:6vw}
  .visual-caption{left:6vw;right:6vw}
  .panel h1{font-size:46px}
  .panel h2{font-size:54px}
  .panel p{font-size:18px}
  .panel p.small{font-size:15px}
  .bottom{left:6vw;right:6vw}
}

/* Phones turned sideways: text on the left, the visual on the right, so the
   model still gets room. Wide enough to miss the 800px breakpoint above on
   the larger phones, so this is keyed to height instead. */
@media (max-height:520px) and (orientation:landscape){
  .presentation{--dock:calc(44px + env(safe-area-inset-bottom,0px))}
  header{padding:8px 24px 6px}
  .brand img{width:104px}
  .explore{display:inline-flex;align-items:center;min-height:44px;font-size:12px;padding:0;border-bottom:0;text-decoration:underline;text-decoration-color:#00468466;text-underline-offset:6px}
  .explore span{margin-left:10px;font-size:16px}
  .visual{left:auto;right:0;width:56%;top:var(--head-h,56px);bottom:calc(var(--dock) + 20px);height:auto;min-height:0}
  .presentation.ready .visual,.presentation.ready .visual-caption{transition:none}
  .visual-caption{left:auto;right:24px;width:52%;top:auto;bottom:calc(var(--dock) + 3px);font-size:9px;text-align:right}
  /* centred between the header and the chapter bar */
  .panel,.panel:first-child{left:24px;right:auto;width:40%;top:calc((var(--head-h,56px) + 100% - var(--dock)) / 2);bottom:auto;transform:translateY(-50%)}
  .panel .eyebrow{font-size:10px!important;margin-bottom:8px!important}
  .eyebrow:before{margin-bottom:8px;width:22px}
  .panel h1{font-size:26px;margin-bottom:8px}
  .panel h2{font-size:30px;margin-bottom:8px}
  .panel p{font-size:13px;line-height:1.42;margin-bottom:6px;max-width:none}
  .panel p.small{font-size:12px;margin-top:6px}
  .scroll-link{font-size:13px;margin-top:0;padding:12px 0 10px}
  .fact{margin-top:6px}.fact b{font-size:30px}.fact span{font-size:11px}
  /* chapter ticks on the right of the bottom row, counter and pause on the left */
  .chapters{left:auto;right:24px;width:50%;top:auto;bottom:env(safe-area-inset-bottom,0px);height:44px;transform:none;flex-direction:row;gap:0}
  .chapters a{flex:1 1 0;width:auto;height:44px}
  .chapters a:before{width:calc(100% - 6px);height:3px;border:0;border-radius:3px;background:var(--blue);opacity:.18;transform:none}
  .chapters a[aria-current]:before{opacity:1;transform:none}
  .bottom{left:24px;right:auto;width:40%;bottom:env(safe-area-inset-bottom,0px);height:44px;font-size:12px;letter-spacing:.12em}
  #chapter-label{display:none}
  #position{order:1}
  .bottom button{order:2;height:44px;padding:0 0 0 18px;font-size:13px;letter-spacing:.02em}
  .information{grid-template-columns:1fr 1fr;padding:56px 24px}
}

@media (prefers-reduced-motion:reduce){.presentation.ready .visual,.presentation.ready .visual-caption{transition:none}}

/* ==========================================================================
   Simplified type and chrome
   No captions, chapter ticks, counters or eyebrows (except the opening's).
   Headlines in Museo Sans 700, the hero in 900, body copy in dark grey.
   ========================================================================== */
.panel h1{font-weight:900;letter-spacing:-.04em;line-height:1.02}
.panel h1 strong{font-weight:900}
.panel h2{font-weight:700;letter-spacing:-.04em}
.panel .eyebrow{font-weight:500!important;letter-spacing:.14em}
.panel p{color:#3a3f44}
.panel p strong{color:#2b3034}
.fact span{color:#3a3f44}
.info-copy p,.info-copy li{color:#3a3f44}

@media (max-width:800px),(max-height:520px) and (orientation:landscape){
  .presentation{--dock:calc(22px + env(safe-area-inset-bottom,0px))!important}
}
@media (max-width:800px) and (orientation:portrait){
  .visual{bottom:calc(var(--dock) + var(--text-h,240px) + 18px)}
  .panel,.panel:first-child{bottom:calc(var(--dock) + 4px)}
}
@media (max-height:520px) and (orientation:landscape){
  .visual{bottom:calc(var(--dock) + 6px)}
}

/* ==========================================================================
   Snapping, shorter phone chapters, partner logos and the call to action
   ========================================================================== */

/* Invisible snap points at each chapter's composed moments (finished camera
   move, photo fully in). Touch screens only, and only "proximity": a flick
   that ends near one settles on it; a flick past it is never pulled back. */
.track>div{position:relative}
.snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
@media (hover:none) and (pointer:coarse){
  html{scroll-snap-type:y proximity}
  .snap,.information{scroll-snap-align:start}
}

/* About a fifth less scrolling on phones. */
@media (max-width:800px){
  .track>#opening,.track>#construction{height:100svh}
  .track>#health,.track>#education,.track>#training{height:120svh}
  .track>#together{height:140svh}
  .track>#community,.track>#partners{height:110svh}
  .track>.exit{height:80svh}
}

.partner-logos{display:flex;align-items:center;gap:28px;margin:22px 0 4px}
.partner-logos img{height:34px;width:auto;display:block}
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.cta-row .scroll-link{margin-top:0}
.donate{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--blue);color:#fff!important;font-weight:700;font-size:15px;letter-spacing:.01em;text-decoration:none;border:0!important;transition:background .2s}
.donate:hover{background:#00346a}
.information .donate{margin-top:20px;margin-right:18px;padding:0 24px}
@media (max-width:800px){
  .partner-logos{margin:14px 0 0}
  .partner-logos img{height:28px}
  .cta-row{margin-top:14px;gap:6px 20px}
  .donate{min-height:46px;font-size:15px}
}
@media (max-width:800px) and (max-height:700px){.partner-logos img{height:24px}.cta-row{margin-top:10px}}
@media (max-height:520px) and (orientation:landscape){.partner-logos{margin:8px 0 0}.partner-logos img{height:22px}.cta-row{margin-top:8px}.donate{min-height:42px;font-size:13px;padding:0 18px}}

/* Floor photos: grow out of the blue floor, hold, fly into the building. */
.floor-photos{position:absolute;inset:0;pointer-events:none;overflow:visible}
.floor-photo{position:absolute;left:0;top:0;opacity:0;border-radius:16px;background-size:cover;background-repeat:no-repeat;transform-origin:50% 50%;will-change:transform,opacity;box-shadow:0 22px 44px -26px rgba(0,40,77,.45)}
@media (max-width:800px){.floor-photo{border-radius:12px}}
@media (max-width:800px){
  .track>#health{height:150svh}
  .track>#education,.track>#training{height:125svh}
}
.track>#health{height:210svh}
@media (max-width:800px){.track>#health{height:150svh}}

/* Tablets (about 801 to 1180px wide, not landscape phones): Museo Sans is wider than the fallback it
   replaced, so the text column is narrowed a touch to keep clear of the visual. */
@media (min-width:801px) and (max-width:1180px) and (min-height:560px){
  .panel,.panel:first-child{width:37vw}
  h2{font-size:4.6vw;margin-bottom:22px}
  .panel p{margin-bottom:14px}
  .partner-logos{margin:16px 0 0}
  .cta-row{margin-top:16px}
}

/* Body copy in Museo Sans 500: the 300 Light is too thin to read comfortably on
   phones in dark grey. Bold lead-ins stay at 700. */
.panel p,.fact span,.info-copy p,.info-copy li,footer p{font-weight:500}
.panel p strong{font-weight:700}

/* Landscape phones: the heavier body weight runs a little taller, so the type
   and spacing are tightened to keep the text clear of the header. */
@media (max-height:520px) and (orientation:landscape){
  .panel p{font-size:12.5px;line-height:1.34;margin-bottom:4px}
  .panel h2{font-size:28px;margin-bottom:6px}
  .partner-logos{margin:5px 0 0}
  .cta-row{margin-top:5px}
}

/* ==========================================================================
   Header lockup ("Powered by our donors" + RFDS SA & NT). The RFDS mark is
   about half the lockup's width, so the lockup runs a little larger than the
   old logo to keep it legible.
   ========================================================================== */
.brand img{width:250px}
@media (min-width:801px) and (min-height:521px) and (max-height:820px){header{padding-top:20px;padding-bottom:20px}.brand img{width:220px}}
@media (min-width:801px) and (max-width:1180px) and (min-height:560px){.brand img{width:220px}}
@media (max-width:800px){.brand img{width:160px}}
@media (max-width:800px) and (max-height:700px){.brand img{width:140px}}
@media (max-width:800px) and (max-height:600px){.brand img{width:124px}}
@media (min-width:600px) and (max-width:800px){.brand img{width:184px}}
@media (max-height:520px) and (orientation:landscape){.brand img{width:108px}}

/* ==========================================================================
   Partner logos: BHP and the Government of South Australia carry equal
   visual weight. BHP is solid lettering; the SA roundel is mostly open
   space, so it sits about 2.5 times as tall, which makes the two about the
   same width.
   ========================================================================== */
.partner-logos{gap:30px}
.partner-logos img.logo-bhp{height:28px}
.partner-logos img.logo-sagov{height:72px}
@media (max-width:800px){.partner-logos{gap:24px}.partner-logos img.logo-bhp{height:22px}.partner-logos img.logo-sagov{height:56px}}
@media (max-width:800px) and (max-height:700px){.partner-logos img.logo-bhp{height:20px}.partner-logos img.logo-sagov{height:50px}}
@media (max-height:520px) and (orientation:landscape){.partner-logos{gap:18px}.partner-logos img.logo-bhp{height:15px}.partner-logos img.logo-sagov{height:38px}}

/* ==========================================================================
   Frequently asked questions: a plain accordion (native details/summary, so
   it works with a keyboard and screen readers, and without JavaScript).
   ========================================================================== */
.faq{position:relative;background:var(--ivory);padding:110px 6vw 120px;display:grid;grid-template-columns:1fr 1fr;gap:12vw;border-top:1px solid #00468422;scroll-margin-top:90px;interpolate-size:allow-keywords}
.faq h2{font-size:40px;line-height:1.12;max-width:510px;margin:0;font-weight:700;letter-spacing:-.04em}
.faq-list{border-top:1px solid #00468433;align-self:start}
.faq details{border-bottom:1px solid #00468433;scroll-margin-top:150px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:28px;padding:22px 0;font-size:18px;line-height:1.4;font-weight:700;color:var(--blue)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:0 0 14px;height:14px;margin-top:5px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:background-size .25s ease}
.faq details[open] summary::after{background-size:14px 2px,2px 0}
.faq summary:hover{color:#00346a}
.faq summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:2px}
.faq-answer{padding:0 42px 26px 0}
.faq-answer p{font-size:16px;line-height:1.7;color:#3a3f44;font-weight:500;margin:0 0 14px;max-width:62ch}
.faq-answer p:last-child{margin-bottom:0}
/* Smooth open and close where the browser supports animating to auto height. */
@supports (interpolate-size:allow-keywords){
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){.faq details::details-content,.faq summary::after{transition:none}}
@media (min-width:801px) and (max-width:1180px){.faq{gap:6vw;grid-template-columns:2fr 3fr}.faq h2{font-size:34px}}
@media (max-width:800px){
  .faq{grid-template-columns:1fr;gap:24px;padding:64px 20px 72px}
  .faq h2{font-size:34px}
  .faq details{scroll-margin-top:100px}
  .faq summary{font-size:17px;padding:18px 0;gap:20px}
  .faq-answer{padding:0 0 22px}
}
@media (max-height:520px) and (orientation:landscape){.faq{padding:48px 24px 56px;gap:6vw;grid-template-columns:2fr 3fr}.faq h2{font-size:28px}.faq details{scroll-margin-top:80px}.faq summary{font-size:16px;padding:16px 0}}

/* Short laptop screens (wider than tablets, 820px tall or less, e.g. 1366x768
   and 1280x720): headlines scale with the screen height as well as its width,
   so the longest chapter still clears the header. */
@media (min-width:1181px) and (min-height:521px) and (max-height:820px){
  .panel h2{font-size:min(5.1vw,7.2vh);margin-bottom:22px}
  .partner-logos{margin-top:16px}
  .cta-row{margin-top:16px}
}
.nowrap{white-space:nowrap}
/* Desktop: the FAQ heading stays in view beside a long list. */
@media (min-width:801px) and (min-height:521px){.faq-title{position:sticky;top:170px;align-self:start}}

/* Education has no photos, so its chapter is shorter: the model holds on
   Level 02 without a long stretch where nothing changes. */
.track>#education{height:120svh}
@media (max-width:800px){.track>#education{height:100svh}}

/* If the satellite map finishes loading after the reader reaches it, it fades in. */
.map-arriving .photo,.map-arriving .map,.map-arriving .map-credits{transition:opacity .8s ease}