/* ==========================================================================
   BNA WORLDWIDE — MELBOURNE CENTRE PAGE
   ========================================================================== */

/* ------------------------------- Page hero -------------------------------- */
.mel-hero{
  background:var(--navy-900); color:#fff;
  padding-top:calc(var(--section-pad-y) + 4rem);
  padding-bottom:var(--section-pad-y);
}
.mel-hero-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-8);
  align-items:end;
}
.mel-hero-copy h1{ font-size:var(--fs-hero); max-width:17ch; margin-top:1.25rem; }
.mel-hero-copy p{ color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); max-width:48ch; margin-top:1.5rem; }
.mel-hero-meta{ display:flex; align-items:center; gap:.6rem; margin-top:1.75rem; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:rgba(255,255,255,.6); }
.mel-hero-meta svg{ flex-shrink:0; }
.mel-hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; }
.mel-hero-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; }
.mel-hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .mel-hero-inner{ grid-template-columns:1fr; } }

/* --------------------------------- Find us --------------------------------- */
.find-head{ margin-bottom:var(--space-8); max-width:56ch; }
.find-head h2{ font-size:var(--fs-display-lg); max-width:22ch; margin-top:1.1rem; }
.find-head p:not(.eyebrow){ color:var(--ink-soft); margin-top:1.1rem; font-size:var(--fs-body-lg); }
.find-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }
.find-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/4; background:var(--charcoal-700); }
.find-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-premium); }
.find-card:hover img{ transform:scale(1.06); }
.find-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,11,26,.86) 0%, rgba(8,11,26,.15) 55%, transparent 75%); }
.find-card span{ position:absolute; left:0; right:0; bottom:0; padding:1rem; z-index:2; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:#fff; line-height:1.4; }
@media (max-width:900px){ .find-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .find-grid{ grid-template-columns:1fr; } }

/* -------------------------------- Overview ---------------------------------- */
.mel-overview{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--space-8); align-items:center; }
.mel-overview-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; }
.mel-overview-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mel-overview-copy h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:19ch; margin:1.25rem 0 1.75rem; }
.mel-overview-copy > p:not(.eyebrow){ color:var(--ink-soft); font-size:var(--fs-body-lg); max-width:50ch; margin-bottom:1.75rem; }
.mel-pills{ display:flex; flex-wrap:wrap; gap:.65rem; }
@media (max-width:900px){ .mel-overview{ grid-template-columns:1fr; } }

/* -------------------------------- Hotspots ----------------------------------- */
.mel-infra{ background:var(--paper); padding-block:var(--section-pad-y-lg); }
.mel-infra-head{ margin-bottom:var(--space-8); display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; }
.mel-infra-head h2{ font-size:var(--fs-display-lg); max-width:16ch; }
.mel-infra-head p:not(.eyebrow){ color:var(--ink-soft); max-width:34ch; }
.infra-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/8.4; box-shadow:var(--shadow-lg); counter-reset:hotspot; }
.infra-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.infra-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,11,26,.18), rgba(8,11,26,.05) 30%, rgba(8,11,26,.4)); }
.hotspot{ position:absolute; z-index:3; transform:translate(-50%,-50%); }
.hotspot-dot{
  counter-increment:hotspot;
  width:28px; height:28px; border-radius:50%; background:var(--sky-500);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; color:var(--navy-900);
  box-shadow:0 0 0 0 rgba(79,184,234,.6);
  animation:hotspotPulse 2.6s ease-out infinite;
  cursor:pointer; border:2px solid #fff;
  transition:transform .35s var(--ease-elastic);
}
.hotspot-dot::before{ content:counter(hotspot); }
.hotspot-dot:hover, .hotspot-dot:focus-visible{ transform:scale(1.18); }
@keyframes hotspotPulse{
  0%{ box-shadow:0 0 0 0 rgba(79,184,234,.55); }
  70%{ box-shadow:0 0 0 18px rgba(79,184,234,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,184,234,0); }
}
.hotspot-tip{
  position:absolute; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px) scale(.92);
  background:var(--navy-900); color:#fff; padding:.85rem 1.1rem; border-radius:var(--radius-md);
  width:max-content; max-width:220px; font-size:.82rem;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out), transform .4s var(--ease-elastic);
  box-shadow:var(--shadow-lg);
}
.hotspot-tip b{ display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--sky-400); text-transform:uppercase; margin-bottom:.3rem; }
.hotspot:hover .hotspot-tip, .hotspot:focus-within .hotspot-tip{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }

/* --------------------------------- Tour grid ---------------------------------- */
.tour-head{ margin-bottom:var(--space-7); max-width:56ch; }
.tour-head h2{ font-size:var(--fs-display-lg); max-width:18ch; margin-top:1rem; }
/* Bento composition — a wide lead tile, a tall accent tile, and four square
   supporting tiles, rather than a repeated uniform 3-up grid. */
.tour-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, minmax(200px, 24vw));
  gap:1.1rem;
}
.tour-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--charcoal-700); }
.tour-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-premium); }
.tour-card:hover img{ transform:scale(1.06); }
.tour-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,11,26,.88) 0%, rgba(8,11,26,.1) 55%, transparent 75%); }
.tour-card-label{ position:absolute; left:0; right:0; bottom:0; padding:1.25rem; z-index:2; }
.tour-card-label b{ display:block; font-family:var(--font-display); font-size:1.05rem; color:#fff; }
.tour-card-label span{ display:block; font-family:var(--font-mono); font-size:.7rem; color:rgba(255,255,255,.6); margin-top:.35rem; }
.tour-grid .tour-card:nth-child(1){ grid-column:1/3; grid-row:1/2; }
.tour-grid .tour-card:nth-child(2){ grid-column:3/4; grid-row:1/3; }
.tour-grid .tour-card:nth-child(2) .tour-card-label b{ font-size:1.2rem; }
.tour-grid .tour-card:nth-child(3){ grid-column:4/5; grid-row:1/2; }
.tour-grid .tour-card:nth-child(4){ grid-column:1/2; grid-row:2/3; }
.tour-grid .tour-card:nth-child(5){ grid-column:2/3; grid-row:2/3; }
.tour-grid .tour-card:nth-child(6){ grid-column:4/5; grid-row:2/3; }
@media (max-width:900px){
  .tour-grid{ grid-template-columns:1fr 1fr; grid-template-rows:none; }
  .tour-grid .tour-card{ grid-column:auto !important; grid-row:auto !important; aspect-ratio:1/1; }
}
@media (max-width:560px){ .tour-grid{ grid-template-columns:1fr; } }

/* ------------------------------- Accessibility -------------------------------- */
.mel-a11y{ background:var(--navy-700); color:#fff; position:relative; overflow:hidden; padding-block:var(--section-pad-y-lg); }
.a11y-head{ max-width:60ch; margin-bottom:var(--space-8); }
.a11y-head h2{ font-size:var(--fs-display-lg); max-width:16ch; margin-top:1rem; }
.a11y-head p{ color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); margin-top:1.25rem; max-width:52ch; }
/* Bento composition — the ramp-access photo leads as a wide banner, the
   remaining three facts sit in a calmer trio beneath it. */
.a11y-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.a11y-card{ border-radius:var(--radius-lg); overflow:hidden; }
.a11y-card-photo{ position:relative; aspect-ratio:4/3; }
.a11y-card-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.a11y-card-label{ padding:1rem 0 0; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:rgba(255,255,255,.72); }
.a11y-grid > .a11y-card:first-child{ grid-column:1/-1; }
.a11y-grid > .a11y-card:first-child .a11y-card-photo{ aspect-ratio:21/8; }
.a11y-grid > .a11y-card:first-child .a11y-card-label{ font-size:.82rem; }
@media (max-width:900px){ .a11y-grid{ grid-template-columns:1fr 1fr; } .a11y-grid > .a11y-card:first-child{ grid-column:1/-1; } }
@media (max-width:520px){ .a11y-grid{ grid-template-columns:1fr; } .a11y-grid > .a11y-card:first-child .a11y-card-photo{ aspect-ratio:4/3; } }

/* ---------------------------------- Video -------------------------------------- */
.mel-video-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--space-8); align-items:center; }
.mel-video-copy h2{ font-family:var(--font-display); font-size:var(--fs-display-md); max-width:16ch; margin:1.1rem 0 1.5rem; }
.mel-video-copy p:not(.eyebrow){ color:var(--ink-soft); font-size:var(--fs-body-lg); max-width:44ch; }
.video-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; background:var(--navy-900); box-shadow:var(--shadow-lg); }
.video-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  z-index:3; transition:opacity .35s var(--ease-out), transform .35s var(--ease-premium), background .3s;
  box-shadow:0 10px 34px rgba(8,11,26,.35);
}
.video-play:hover{ background:#fff; transform:translate(-50%,-50%) scale(1.06); }
.video-play svg{ margin-left:4px; }
.video-badge{
  position:absolute; top:1.25rem; left:1.25rem; z-index:3;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(8,11,26,.55); border:1px solid var(--line-on-dark);
  padding:.5rem .9rem; border-radius:var(--radius-pill); backdrop-filter:blur(6px);
}
.video-frame.is-playing .video-play{ opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.7); }
@media (max-width:900px){ .mel-video-wrap{ grid-template-columns:1fr; } }

/* -------------------------------- Floor plan ------------------------------------ */
.plan-wrap{ display:grid; grid-template-columns:1.3fr .7fr; gap:var(--space-8); align-items:start; }
.plan-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-on-light); }
.plan-photo img{ width:100%; height:auto; display:block; }
.evidence-card{ background:var(--white); border:1px solid var(--line-on-light); border-radius:var(--radius-lg); overflow:hidden; padding:0; }
.evidence-card img{ width:100%; height:auto; display:block; border-bottom:1px solid var(--line-on-light); }
.evidence-card-body{ padding:var(--space-5); }
.evidence-card-body h3{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:.6rem; }
.evidence-card-body p{ color:var(--ink-soft); font-size:.92rem; }
@media (max-width:900px){ .plan-wrap{ grid-template-columns:1fr; } }

/* ----------------------------------- CTA -------------------------------------- */
.mel-cta{ background:var(--navy-900); color:#fff; padding-block:var(--section-pad-y-lg); text-align:center; position:relative; overflow:hidden; }
.mel-cta h2{ font-family:var(--font-display); font-size:var(--fs-display-xl); max-width:22ch; margin-inline:auto; }
.mel-cta p{ color:rgba(255,255,255,.65); max-width:48ch; margin:1.5rem auto 0; font-size:var(--fs-body-lg); }
.mel-cta .cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.75rem; }