/* ===========================================================================
   AUSMart Shopping Centre

   The photograph is the interface. Everything drawn on top is HTML positioned
   in percentages over it, so the signage stays registered to the architecture
   at any width and can be translated, counted and clicked.

   Materials, taken from the reference render:
     board      near-black charcoal, matte
     frame      warm timber
     type       white, wide-tracked, uppercase
     accent     warm gold, reserved for Australian Made and active states
   =========================================================================== */

:root{
  --char:      #1A1A1A;   /* board face                                    */
  --char-2:    #232323;   /* board face, lit end                           */
  --timber:    #8A5A32;   /* frame                                         */
  --timber-2:  #5E3D22;   /* frame, shadowed edge                          */
  --board-line:rgba(255,255,255,.14);
}

/* ---------------------------------------------------------------------------
   THE SCENE
--------------------------------------------------------------------------- */
.centre{
  position:relative;
  min-height:min(100svh, 940px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:#0F1216;
  isolation:isolate;
}

.centre-bg{ position:absolute; inset:0; z-index:0; }
.centre-bg picture,
.centre-bg img{ width:100%; height:100%; display:block; object-fit:cover; object-position:30% 50%; }
/* Biased left, not centred. The render paints its own directory board at
   6–22% across, and the live board has to land on top of it — a centred crop
   pushes the painted one off the left edge on any viewport taller than 2:1.
   30% keeps the painted board fully in frame and still holds most of the
   right-hand shopfronts. */

/* A grade rather than a flat scrim: the corridor keeps its daylight, the
   corners darken just enough for white type to hold. */
/* The board and the quick row bring their own surfaces, so the scene itself
   needs almost no grading — only enough at the very bottom to seat the
   shortcut row. Anything heavier and the shopfront signs go muddy. */
.centre-grade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(12,15,19,.5) 0%, rgba(12,15,19,.08) 22%, rgba(12,15,19,0) 40%);
}

/* The drift used to scale the image 1.02→1.06, which resamples it on every
   frame and visibly softens the shop signs. The photograph is the whole
   point of the page, so it now sits still and stays pin-sharp. */

/* ---------------------------------------------------------------------------
   SHOPFRONT SIGNS
   The fascias in the photo were painted blank; these put the real store names
   back on them. Rotation matches each panel's perspective.
--------------------------------------------------------------------------- */
.centre-fronts{ position:absolute; inset:0; z-index:2; }
.cfront{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  transform:translate(-50%,-50%) rotate(var(--r));
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:.5% 0;
  color:#fff; text-align:center;
  transition:filter 260ms var(--ease), transform 320ms var(--ease-out);
}
.cfront-sign{
  font-size:clamp(.52rem, .84vw, .95rem);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.cfront-cue{
  display:flex; align-items:center; justify-content:center;
  width:1.4em; height:1.4em; border-radius:50%; flex:none;
  background:var(--gold); color:#1A1A1A;
  opacity:0; transform:scale(.6);
  transition:opacity 220ms var(--ease), transform 220ms var(--ease-out);
}
/* Illuminate the sign, not the whole shop — the light should feel like the
   fascia switching on. */
.cfront::before{
  content:""; position:absolute; inset:-40% -8%;
  background:radial-gradient(ellipse at center, rgba(245,185,66,.34), transparent 68%);
  opacity:0; transition:opacity 300ms var(--ease); pointer-events:none;
}
.cfront:hover::before, .cfront:focus-visible::before{ opacity:1; }
.cfront:hover .cfront-cue, .cfront:focus-visible .cfront-cue{ opacity:1; transform:scale(1); }
.cfront:hover, .cfront:focus-visible{ transform:translate(-50%,-50%) rotate(var(--r)) scale(1.04); }

@media (max-width:900px){ .centre-fronts{ display:none; } }

/* ---------------------------------------------------------------------------
   THE DIRECTORY BOARD
--------------------------------------------------------------------------- */
/* The live board is registered to the painted one rather than to the page
   grid: same left inset, same bottom line. It is a little wider than the
   painted board, which is deliberate — it covers it completely instead of
   leaving two boards visible, and the extra width is what makes room for
   Mongolian labels and live store counts.

   Exact pixel registration is not possible against a cover-cropped photo at
   every viewport, so this aims for the common case and degrades to "the
   board is where a board should be" at the extremes. */
.board-wrap{
  position:relative; z-index:3;
  width:100%; max-width:none;
  margin:0; padding:0 clamp(10px, 2.2vw, 44px) clamp(70px, 9vh, 112px);
  display:flex; align-items:flex-end;
}
@media (max-width:900px){
  /* No room to register anything on a phone — the painted board is cropped
     out entirely, so the live one just goes back on the page grid. */
  .board-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px clamp(60px,8vh,90px); }
}

.board{ position:relative; display:flex; align-items:stretch; }

/* Timber frame around a charcoal face — the two materials from the render. */
.board-frame{
  position:relative; z-index:2; flex:none;
  width:min(390px, 78vw);
  padding:9px;
  border-radius:6px;
  background:linear-gradient(150deg, var(--timber) 0%, var(--timber-2) 52%, var(--timber) 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35);
}
.board-face{
  background:linear-gradient(165deg, var(--char-2) 0%, var(--char) 46%, #141414 100%);
  border-radius:3px;
  padding:20px 0 8px;
  color:#fff;
}

.board-head{ padding:0 22px 16px; border-bottom:1px solid var(--board-line); }
.board-brand{
  display:block; font-size:1.05rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
}
.board-brand::first-letter{ color:var(--gold); }
.board-sub{
  display:block; margin-top:3px;
  font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.board-rows{ display:flex; flex-direction:column; }
.brow{
  display:flex; align-items:center; gap:14px;
  padding:13px 22px;
  color:#fff; position:relative;
  border-bottom:1px solid var(--board-line);
  transition:background 240ms var(--ease), padding-left 240ms var(--ease);
}
.brow:last-child{ border-bottom:0; }
.brow-arrow{ flex:none; width:22px; display:flex; color:rgba(255,255,255,.9); }
.brow-name{
  font-size:.92rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.15;
}
.brow-count{
  margin-left:auto; flex:none;
  font-size:.66rem; font-weight:700; color:rgba(255,255,255,.42);
}
.brow::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gold); transform:scaleY(0);
  transition:transform 260ms var(--ease);
}
.brow:hover, .brow.on{ background:rgba(255,255,255,.06); }
.brow:hover::after, .brow.on::after{ transform:scaleY(1); }
.brow:hover .brow-count, .brow.on .brow-count{ color:var(--gold); }

.brow-au{ border-top:1px solid var(--board-line); }
.brow-au .brow-name{ color:var(--gold); }
.brow-au .brow-arrow{ align-items:center; }
.brow-au .flag{ border-radius:2px; }

/* --- the panel that extends out of the board ----------------------------- */
.board-wing{
  position:relative; z-index:1;
  margin-left:-9px;
  width:0; overflow:hidden;
  border-radius:0 6px 6px 0;
  background:linear-gradient(150deg, var(--timber) 0%, var(--timber-2) 60%);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  transition:width 420ms var(--ease-out);
}
.board.open .board-wing{ width:min(560px, 46vw); }
@media (max-width:1080px){ .board.open .board-wing{ width:min(420px, 40vw); } }
@media (max-width:900px){ .board-wing{ display:none; } }

.wingpanel{
  position:absolute; inset:9px 9px 9px 0;
  background:linear-gradient(170deg, var(--char-2), var(--char));
  border-radius:0 3px 3px 0;
  padding:18px 20px;
  opacity:0; visibility:hidden;
  transform:translate3d(-8px,0,0);
  transition:opacity 260ms var(--ease), transform 320ms var(--ease-out), visibility 260ms;
  overflow-y:auto;
}
.wingpanel.on{ opacity:1; visibility:visible; transform:none; }

.wingpanel-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px solid var(--board-line);
}
.wingpanel-title{
  font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
}
.wingpanel-all{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold);
}
.wingpanel-all:hover{ color:#fff; }

/* Subcategory row above the shops. Plain text links, deliberately quieter
   than the shop tiles: the shops are the primary way through this panel, and
   this is the shortcut for someone who already knows what they want. */
.wingpanel-subs{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  padding:0 0 12px; margin-bottom:12px;
  border-bottom:1px solid var(--board-line);
}
.wingpanel-subs a{
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.62); white-space:nowrap;
}
.wingpanel-subs a:hover{ color:var(--gold); }

.wingpanel-brands{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
@media (min-width:1240px){ .wingpanel-brands{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.wbrand{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:5px;
  border:1px solid rgba(255,255,255,.09);
  color:#fff; min-width:0;
  opacity:0; transform:translate3d(0,6px,0);
  transition:background 200ms var(--ease), border-color 200ms var(--ease),
             opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.wingpanel.on .wbrand{ opacity:1; transform:none; }
/* Brands arrive in sequence, quickly — reading order, not choreography. */
.wingpanel.on .wbrand:nth-child(1){ transition-delay:20ms; }
.wingpanel.on .wbrand:nth-child(2){ transition-delay:45ms; }
.wingpanel.on .wbrand:nth-child(3){ transition-delay:70ms; }
.wingpanel.on .wbrand:nth-child(4){ transition-delay:95ms; }
.wingpanel.on .wbrand:nth-child(5){ transition-delay:120ms; }
.wingpanel.on .wbrand:nth-child(6){ transition-delay:145ms; }
.wingpanel.on .wbrand:nth-child(n+7){ transition-delay:170ms; }

.wbrand:hover{ background:rgba(255,255,255,.08); border-color:var(--gold); }
.wbrand-logo{
  flex:none; width:28px; height:28px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#1A1A1A;
  font-size:.62rem; font-weight:800; overflow:hidden;
}
.wbrand-logo img{ width:100%; height:100%; object-fit:contain; padding:3px; }
.wbrand-name{
  font-size:.78rem; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wbrand-au{ width:5px; height:5px; border-radius:50%; background:var(--gold); margin-left:auto; flex:none; }

/* ---------------------------------------------------------------------------
   QUICK ROW + SCROLL CUE
   The escape hatch. Immersion is never the only way to reach the shop.
--------------------------------------------------------------------------- */
.centre-quick{
  position:absolute; left:0; right:0; bottom:26px; z-index:4;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  max-width:var(--maxw); margin:0 auto; padding:0 20px;
}
.centre-tag{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-right:6px;
}
.cq{
  padding:7px 15px; border-radius:999px;
  background:rgba(20,22,26,.6);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:.78rem; font-weight:600;
  backdrop-filter:blur(8px);
  transition:background 200ms var(--ease), border-color 200ms var(--ease);
}
.cq:hover{ background:rgba(20,22,26,.85); border-color:var(--gold); color:#fff; }

.centre-scroll{
  position:absolute; right:24px; bottom:26px; z-index:4;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,22,26,.55); border:1px solid rgba(255,255,255,.22);
  color:#fff; backdrop-filter:blur(8px);
  animation:centreNudge 2.6s ease-in-out infinite;
}
@keyframes centreNudge{
  0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); }
}
@media (max-width:900px){ .centre-scroll{ display:none; } }

/* ---------------------------------------------------------------------------
   THE HEADER — one appearance, everywhere

   Because the hall is fixed, the strip of image behind the header is the same
   on every page and at every scroll position. So the header has a single
   look: dark glass over the ceiling, gold "Mart", white everything else. It
   never swaps to a solid white bar, because there is nothing to swap for.

   The scrim underneath is what makes that safe — it guarantees the contrast
   rather than relying on whatever happens to be in the photograph.
--------------------------------------------------------------------------- */
.headwrap{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:transparent;
}
/* Top-down shade so white type always clears the ceiling behind it. */
.headwrap::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height:190%;
  background:linear-gradient(to bottom, rgba(12,15,19,.82) 0%,
                                        rgba(12,15,19,.55) 46%,
                                        rgba(12,15,19,0) 100%);
  pointer-events:none;
}
.headwrap > *{ position:relative; }

/* The topbar strip is gone — it was the thing that reappeared on scroll. */
.headwrap .topbar{ display:none; }

.headwrap .header{ background:transparent; box-shadow:none; }
.headwrap .logo-mark,
.headwrap .logo-mark .aus,
.headwrap .nav a,
.headwrap .icon-btn{ color:#fff; }
.headwrap .logo-mark .mart{ color:var(--gold); }
.headwrap .logo img{ filter:brightness(0) invert(1); }
.headwrap .nav a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.headwrap .icon-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.headwrap .pill{
  background:rgba(20,22,26,.5);
  border-color:rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter:blur(8px);
}
.headwrap .pill:hover{ background:rgba(20,22,26,.75); border-color:var(--gold); }
.headwrap .cart-count{ border:2px solid rgba(12,15,19,.6); }

/* The category bar lives in the same glass, so the two read as one unit. */
.catbar{
  background:rgba(16,19,23,.62);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
  position:sticky; top:0;
}
.catbar .catnav-link{ color:#fff; }
.catbar .catnav-item:hover .catnav-link,
.catbar .catnav-item:focus-within .catnav-link{
  background:rgba(245,185,66,.16); color:var(--gold);
}
.catbar .catbar-link{ color:#D9DEE4; }
.catbar .catbar-link:hover{ background:rgba(255,255,255,.12); color:#fff; }
.catbar .catbar-right{ border-left-color:rgba(255,255,255,.14); }

/* --- stacking -----------------------------------------------------------
   The header is fixed, so it no longer occupies space. On the homepage the
   scene runs underneath it by design. On every other page the content has to
   be pushed clear of it, and the category bar has to be pinned directly
   below rather than sticking to 0 and landing on top of it.
------------------------------------------------------------------------ */
:root{ --head-h:68px; --catbar-h:52px; }
@media (max-width:719px){ :root{ --head-h:60px; } }

body.has-centre .catbar{ display:none; }

body:not(.has-centre) .catbar{
  position:fixed; top:var(--head-h); left:0; right:0; z-index:79;
}
body:not(.has-centre) main{ padding-top:var(--head-h); }
@media (min-width:1200px){
  body:not(.has-centre) main{ padding-top:calc(var(--head-h) + var(--catbar-h)); }
}

/* The mega panels hang off a fixed bar, so they need to clear it too. */
body:not(.has-centre) .catbar .mega{ max-height:calc(100svh - var(--head-h) - var(--catbar-h) - 24px); overflow-y:auto; }

/* ---------------------------------------------------------------------------
   STORE ENTRY — the camera pushes through the doorway
--------------------------------------------------------------------------- */
.enterfx{
  position:fixed; inset:0; z-index:500; pointer-events:none;
  opacity:0; background:#0F1216;
}
.enterfx.go{ animation:enterFade 900ms var(--ease-out) forwards; }
@keyframes enterFade{
  0%   { opacity:0; }
  55%  { opacity:1; }
  100% { opacity:1; }
}
/* The scene rushes toward the chosen shopfront while the veil closes. */
body.entering .centre-bg img{
  animation:enterPush 900ms cubic-bezier(.5,0,.75,0) forwards;
  transform-origin:var(--ex, 70%) var(--ey, 45%);
}
@keyframes enterPush{ to{ transform:scale(2.6); } }
body.entering .board-wrap,
body.entering .centre-quick,
body.entering .centre-scroll{
  animation:enterFall 520ms var(--ease) forwards;
}
@keyframes enterFall{ to{ opacity:0; transform:translate3d(0,18px,0); } }

@media (prefers-reduced-motion:reduce){
  .centre-bg img{ animation:none !important; }
  .centre-scroll{ animation:none; }
  .board-wing{ transition-duration:1ms; }
  .wbrand{ transition-delay:0ms !important; }
  .enterfx.go{ animation:none; opacity:1; }
  body.entering .centre-bg img,
  body.entering .board-wrap{ animation:none !important; }
}

/* ---------------------------------------------------------------------------
   MOBILE — the concept, simplified
   The scene becomes a banner and the board stacks beneath it. No hotspots,
   no sliding wing: tapping a category expands it downward instead.
--------------------------------------------------------------------------- */
@media (max-width:900px){
  .centre{ min-height:auto; display:block; }
  .centre-bg{ position:relative; height:44svh; }
  .centre-grade{
    background:linear-gradient(to top, rgba(12,15,19,.86) 0%, rgba(12,15,19,.1) 60%);
  }
  .board-wrap{ padding:0 16px 20px; margin-top:-64px; }
  .board-frame{ width:100%; }
  .centre-quick{ position:static; padding:14px 16px 0; }
  .board-rows .brow{ padding:14px 18px; }

  /* Tapping a row opens its brands inline, underneath. */
  .brow-sub{
    display:none; padding:0 18px 14px;
    border-bottom:1px solid var(--board-line);
    background:rgba(0,0,0,.24);
  }
  .brow-sub.on{ display:block; }
  .brow-sub .wingpanel-brands{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brow-sub .wbrand{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------------
   AUSTRALIAN MADE — the one place gold covers a whole surface
--------------------------------------------------------------------------- */
.au-hero{
  background:linear-gradient(160deg, #1A1A1A 0%, #241D0E 48%, #1A1A1A 100%);
  color:#fff; position:relative; overflow:hidden;
  padding:clamp(44px,7vw,88px) 0 clamp(38px,6vw,72px);
  text-align:center;
}
.au-hero::before{
  content:""; position:absolute; left:50%; top:-40%;
  width:min(760px, 90vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(245,185,66,.2), transparent 66%);
  pointer-events:none;
}
.au-hero-inner{ position:relative; }
.au-hero h1{
  color:var(--gold); font-size:clamp(1.9rem,5vw,3.2rem); margin:14px 0 10px;
  letter-spacing:-.02em;
}
.au-hero p{ color:#D8DDE3; max-width:60ch; margin:0 auto; }
.au-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px;
  background:rgba(245,185,66,.14); border:1px solid rgba(245,185,66,.4);
}
.au-hero .quickbar .q{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:#fff;
}
.au-hero .quickbar .q:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------------------------------------------------------------------------
   FLOATING SEARCH
   A panel, not a form on the page, so the same control works over the
   shopping centre, a wing, a store and a product page.
--------------------------------------------------------------------------- */
.srch{ position:fixed; inset:0; z-index:300; }
.srch[hidden]{ display:none; }
.srch-scrim{
  position:absolute; inset:0;
  background:rgba(15,18,22,.55);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity 220ms var(--ease);
}
.srch.open .srch-scrim{ opacity:1; }

.srch-panel{
  position:relative; z-index:1;
  max-width:760px; margin:min(16vh, 140px) auto 0; padding:0 20px;
  opacity:0; transform:translate3d(0,-12px,0);
  transition:opacity 240ms var(--ease-out), transform 260ms var(--ease-out);
}
.srch.open .srch-panel{ opacity:1; transform:none; }

.srch-form{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 10px 18px;
  background:var(--surface);
  border-radius:999px;
  box-shadow:0 24px 60px rgba(15,18,22,.34), 0 4px 12px rgba(15,18,22,.18);
  position:relative;
}
.srch-ico{ color:var(--ink-soft); flex:none; }
.srch-form input{
  flex:1 1 auto; min-width:0;
  border:0; background:none; outline:none;
  font:inherit; font-size:1.02rem; color:var(--text);
  padding:10px 0;
}
.srch-form input::placeholder{ color:var(--muted); }
.srch-go{ flex:none; border-radius:999px; }
.srch-x{ flex:none; }
@media (max-width:559px){
  .srch-panel{ margin-top:0; padding:0; }
  .srch-form{ border-radius:0; padding:12px 12px 12px 16px; }
  .srch-go{ display:none; }
}
/* The suggestion panel is shared with the header field; here it hangs off the
   floating form instead. */
.srch-form .sg-panel{ top:calc(100% + 10px); border-radius:var(--r-lg); }

@media (prefers-reduced-motion:reduce){
  .srch-scrim, .srch-panel{ transition-duration:1ms; }
}

/* ===========================================================================
   THE CENTRE, EVERYWHERE — sharp

   The hall is fixed behind every page at full sharpness: no blur, no
   desaturation, no heavy veil. That means no text can sit directly on it, so
   every block of content gets its own solid white sheet and the hall shows
   through the gaps between them. The room is the wallpaper of the whole shop.

   A fixed <div> rather than background-attachment:fixed, which repaints on
   every scroll frame on iOS and is the classic cause of a juddering page.
--------------------------------------------------------------------------- */
.sitebg{
  position:fixed; inset:0; z-index:-2;
  pointer-events:none;
  background-image:var(--sitebg-img);
  background-size:cover;
  background-position:center 45%;
  background-repeat:no-repeat;
  image-rendering:auto;
}
/* Almost nothing. The glass sheets already carry their own darkness, so a
   second veil here was only making the photograph muddy. What remains is a
   trace at the very bottom, where the footer meets it. */
.sitebg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(15,18,22,0) 62%, rgba(15,18,22,.14) 100%);
}

body.on-centre{ background:transparent; }
body.on-centre main{ position:relative; z-index:1; }

/* Sections themselves are just spacing; the sheet is what carries content. */
body.on-centre main .section{ background:transparent; padding-block:clamp(14px,2vw,22px); }

/* Every block of content becomes a sheet floating in the hall. */
body.on-centre main :is(.section > .wrap, .section.wrap){
  background:rgba(255,255,255,.97);
  border-radius:var(--r-xl);
  padding:clamp(22px,3.2vw,40px);
  box-shadow:0 18px 50px rgba(15,18,22,.22), 0 2px 6px rgba(15,18,22,.12);
}
/* The story sections run tall and sticky — a sheet would fight them. */
body.on-centre main .section.story > .wrap{
  background:rgba(255,255,255,.94);
}
/* The hall is meant to be seen: keep the gaps generous on wide screens. */
@media (min-width:1024px){
  body.on-centre main .section{ padding-block:22px; }
}

/* Baseline type colour for anything floating in the hall.

   These used to say --ink and --ink-soft, from the earlier design where every
   sheet was white. The sheets are dark glass now, so navy headings and grey
   body copy were being drawn dark-on-dark. Anything that lands back on a
   genuinely light surface — product cards, the pricebox, tables — sets its
   own colour further down, and those rules come later, so they win. */
body.on-centre main h1,
body.on-centre main h2,
body.on-centre main h3,
body.on-centre main h4{ color:var(--on-glass); }
body.on-centre main .muted, body.on-centre main .lede{ color:var(--on-glass-2); }
body.on-centre main .eyebrow{ color:var(--gold-glass); }

/* Blocks that carry their own dark surface keep it and skip the sheet. */
body.on-centre main :is(.section > .wrap, .section.wrap) > .directory,
body.on-centre main :is(.section > .wrap, .section.wrap) > .ship{ box-shadow:none; }
body.on-centre .au-hero,
body.on-centre .wing,
body.on-centre .entrance,
body.on-centre .hero{ position:relative; z-index:1; }

/* Full-bleed scenes are their own thing and must not be sheeted. */
body.on-centre .centre{ background:transparent; }
body.on-centre .centre .centre-bg{ z-index:0; }

body.on-centre .footer{ position:relative; z-index:1; }

/* Mobile: the hall is a fixed cover image, which is cheap, but keep the
   sheets edge-to-edge so nothing is wasted on a small screen. */
@media (max-width:719px){
  body.on-centre main :is(.section > .wrap, .section.wrap){
    border-radius:var(--r-lg);
    padding:18px 16px;
  }
  .sitebg{ background-position:62% 45%; }
}


/* ---------------------------------------------------------------------------
   THE FOOTER — the same glass as the header

   It was a solid navy slab, which made the page end with a colour that
   appears nowhere else once the hall went behind everything. Now it closes
   the page in the same dark glass the header opens it with.
--------------------------------------------------------------------------- */
body.on-centre .footer{
  background:rgba(16,19,23,.72);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12);
  color:#D9DEE4;
}
body.on-centre .footer a{ color:#C3CAD2; }
body.on-centre .footer a:hover{ color:var(--gold-glass); }
body.on-centre .footer h4{ color:#fff; }
body.on-centre .footer .logo-mark,
body.on-centre .footer .logo-mark .aus{ color:#fff; }
body.on-centre .footer .logo-mark .mart{ color:var(--gold); }
body.on-centre .footer p{ color:#AEB6BF; }
body.on-centre .footer hr,
body.on-centre .footer .footer-bottom{ border-color:rgba(255,255,255,.14); }
body.on-centre .footer .pill{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); color:#fff;
}

/* ---------------------------------------------------------------------------
   KEEPING THE HALL IN VIEW WHILE SCROLLING

   The sheets were full-bleed and the storytelling sections are several
   viewports tall, so scrolling through one filled the screen with white and
   the hall vanished. Two changes: sheets are narrower than the page so the
   hall always shows down both sides, and the tall story sections drop their
   sheet entirely — each step carries its own small surface instead.
--------------------------------------------------------------------------- */
body.on-centre main :is(.section > .wrap, .section.wrap){
  max-width:1120px;
}
@media (min-width:1400px){
  body.on-centre main :is(.section > .wrap, .section.wrap){ max-width:1180px; }
}

/* Tall scroll-driven sections: no sheet. */
body.on-centre main .section.story > .wrap{
  background:transparent;
  box-shadow:none;
  padding-inline:0;
}
/* Each step gets its own card, so the hall runs behind and between them. */
body.on-centre .story-step-inner{
  background:rgba(255,255,255,.96);
  border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,28px);
  box-shadow:0 14px 40px rgba(15,18,22,.2);
}
body.on-centre .story-stage{
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 50px rgba(15,18,22,.24);
}
body.on-centre .story-lead{
  box-shadow:0 14px 40px rgba(15,18,22,.2);
}
/* The section heading sits on the hall, so it has to be light. */
body.on-centre main .section.story > .wrap > .section-head h2{
  color:#fff; text-shadow:0 2px 14px rgba(12,15,19,.55);
}
body.on-centre main .section.story > .wrap > .section-head .eyebrow{ color:var(--gold-glass); }
/* Progress rail is on the hall too. */
body.on-centre .story-dot{ color:#D9DEE4; }
body.on-centre .story-dot i{ background:rgba(255,255,255,.4); }
body.on-centre .story-dot.on{ color:#fff; }

/* Same treatment for the centre-of-page CTA under How It Works. */
body.on-centre main .section.story > .wrap > .center .btn-outline{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34); color:#fff;
}

/* ===========================================================================
   GLASS SHEETS — the same material as the header, everywhere

   Content no longer sits on white panels. Every section is a tall pane of the
   same dark glass the header and footer are made of, so the whole site reads
   as one continuous surface laid over the hall.

   37% of the hall shows through, as asked. That number is also the limit:
   measured against the brightest part of the image — the glass ceiling —
   white text lands at 5.7:1 and near-white at 4.9:1, both clearing WCAG AA.
   Any mid grey fails outright at this opacity, which is why there are no
   muted greys on the glass below; secondary text is near-white instead.

   Product cards inside the glass stay light and near-solid. Prices and
   photographs need a stable, opaque surface — those must never be judged
   against whatever happens to be behind them.
   =========================================================================== */

/* Every figure below is measured, not guessed: the brightest 40px patch of the
   hall is RGB 228,231,236, and each colour was composited over it through the
   glass before being accepted. Worst-case ratios are noted per line. */
:root{
  --glass:      rgba(14,17,21,.63);   /* 37% of the hall visible          */
  /* Nested blocks used to be .55 — LIGHTER than the sheet they sat on, which
     is backwards, and it left body copy inside a .panel at 3.96:1. At .68 the
     panel is a shade darker than the sheet, which is also what a recessed
     surface should look like, and body copy clears AA at 5.93:1. */
  --glass-2:    rgba(20,24,29,.68);
  --glass-line: rgba(255,255,255,.12);
  --on-glass:   #FFFFFF;              /* 6.31:1 worst case                */
  --on-glass-2: #E9EEF2;              /* 5.40:1 worst case                */
  /* Brand gold is 3.58:1 on the glass — fine as a border or a chip fill, not
     as a word. Text-weight gold is lifted just enough to clear AA (4.54:1)
     while still reading as the same colour. */
  --gold-glass: #FBD68F;
}

body.on-centre main :is(.section > .wrap, .section.wrap){
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
  border:1px solid var(--glass-line);
  border-radius:var(--r-xl);
  box-shadow:0 22px 60px rgba(8,10,13,.34);
  color:var(--on-glass-2);
}

/* Type on the glass. No greys — see the note above. */
body.on-centre main :is(.section > .wrap, .section.wrap) h1,
body.on-centre main :is(.section > .wrap, .section.wrap) h2,
body.on-centre main :is(.section > .wrap, .section.wrap) h3,
body.on-centre main :is(.section > .wrap, .section.wrap) h4{ color:var(--on-glass); }
body.on-centre main :is(.section > .wrap, .section.wrap) p,
body.on-centre main :is(.section > .wrap, .section.wrap) .muted,
body.on-centre main :is(.section > .wrap, .section.wrap) .lede,
body.on-centre main :is(.section > .wrap, .section.wrap) .small,
body.on-centre main :is(.section > .wrap, .section.wrap) .tiny{ color:var(--on-glass-2); }
body.on-centre main :is(.section > .wrap, .section.wrap) .eyebrow{ color:var(--gold-glass); }
body.on-centre main :is(.section > .wrap, .section.wrap) > a,
body.on-centre main :is(.section > .wrap, .section.wrap) .section-head a{ color:var(--gold-glass); }

/* Controls sitting directly on the glass. */
body.on-centre main :is(.section > .wrap, .section.wrap) > .btn-outline,
body.on-centre main :is(.section > .wrap, .section.wrap) .section-head .btn-outline,
body.on-centre main :is(.section > .wrap, .section.wrap) .quickbar .q,
body.on-centre main :is(.section > .wrap, .section.wrap) .letterbar a,
body.on-centre main :is(.section > .wrap, .section.wrap) .rail-btn{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.3);
  color:var(--on-glass);
}
body.on-centre main :is(.section > .wrap, .section.wrap) .btn-outline:hover,
body.on-centre main :is(.section > .wrap, .section.wrap) .quickbar .q:hover,
body.on-centre main :is(.section > .wrap, .section.wrap) .letterbar a:hover,
body.on-centre main :is(.section > .wrap, .section.wrap) .rail-btn:hover{
  background:rgba(255,255,255,.2); border-color:var(--gold); color:#fff;
}
body.on-centre main :is(.section > .wrap, .section.wrap) .btn-ghost{ color:var(--on-glass-2); }
body.on-centre main :is(.section > .wrap, .section.wrap) .btn-ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }
body.on-centre main :is(.section > .wrap, .section.wrap) .chip{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:var(--on-glass);
}
body.on-centre main :is(.section > .wrap, .section.wrap) .chip.on{
  background:var(--gold); border-color:var(--gold); color:#1A1A1A;
}
body.on-centre main :is(.section > .wrap, .section.wrap) .storebar{ border-color:var(--glass-line); }

/* --- content that must stay on solid ground ---------------------------- */
/* Photographs and prices go back onto a light, opaque card. Judging a price
   against a moving photograph is not a trade worth making. */
body.on-centre .pcard,
body.on-centre .bcard,
body.on-centre .storecard,
body.on-centre .front,
body.on-centre .btile{
  background:rgba(255,255,255,.96);
  border-color:rgba(255,255,255,.6);
  color:var(--text);
}
body.on-centre .pcard *,
body.on-centre .bcard *,
body.on-centre .storecard *,
body.on-centre .front *{ color:inherit; }
body.on-centre .pcard .name,
body.on-centre .bcard .name,
body.on-centre .storecard .name,
body.on-centre .front-name{ color:var(--ink-deep); }
body.on-centre .pcard .brand,
body.on-centre .pcard .aud,
body.on-centre .bcard .meta,
body.on-centre .storecard .cat,
body.on-centre .front-meta{ color:var(--muted); }
body.on-centre .pcard .mnt{ color:var(--ink); }

/* Panels are a lighter pane of the same glass, not a white box. */
body.on-centre .panel{
  background:var(--glass-2);
  backdrop-filter:blur(10px);
  border-color:var(--glass-line);
  color:var(--on-glass-2);
}
body.on-centre .panel h3, body.on-centre .panel h2{ color:var(--on-glass); }
body.on-centre .panel.panel-mist{ background:rgba(20,24,29,.45); }

/* Anything to do with money keeps a solid light surface. */
body.on-centre .pricebox,
body.on-centre .table-wrap,
body.on-centre .drw-body,
body.on-centre .drw-foot-panel{
  background:rgba(255,255,255,.97); color:var(--text);
}
body.on-centre .pricebox *, body.on-centre .table-wrap *{ color:inherit; }

/* Inputs on the glass. */
body.on-centre main :is(.section > .wrap, .section.wrap) input[type=search],
body.on-centre main :is(.section > .wrap, .section.wrap) input[type=text],
body.on-centre main :is(.section > .wrap, .section.wrap) input[type=url],
body.on-centre main :is(.section > .wrap, .section.wrap) input[type=email],
body.on-centre main :is(.section > .wrap, .section.wrap) textarea{
  background:rgba(255,255,255,.94); color:var(--text); border-color:rgba(255,255,255,.5);
}

/* --- the same glass on the page headers -------------------------------- */
body.on-centre .wing,
body.on-centre .entrance{
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.05);
  border-bottom:1px solid var(--glass-line);
}
body.on-centre .wing-title, body.on-centre .entrance h1{ color:var(--on-glass); }
body.on-centre .wing-sub{ color:var(--on-glass-2); }
body.on-centre .wing .quickbar .q{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff;
}
body.on-centre .au-hero{
  background:linear-gradient(160deg, rgba(14,17,21,.72), rgba(36,29,14,.66));
  backdrop-filter:blur(16px);
}

/* Story steps are glass too, so the section stays one material. */
body.on-centre .story-step-inner{
  background:var(--glass-2);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-line);
  color:var(--on-glass-2);
}
body.on-centre .story-step-inner h3{ color:var(--on-glass); }
body.on-centre .story-step-inner p{ color:var(--on-glass-2); }
body.on-centre .story-stage{ background:var(--glass-2); border:1px solid var(--glass-line); }

/* Mobile: a full-viewport backdrop-filter on every section is the most
   expensive thing a phone GPU can be asked to do. Same colour, no blur. */
@media (max-width:900px){
  body.on-centre main :is(.section > .wrap, .section.wrap),
  body.on-centre .panel,
  body.on-centre .wing,
  body.on-centre .entrance,
  body.on-centre .story-step-inner,
  body.on-centre .au-hero{
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  body.on-centre main :is(.section > .wrap, .section.wrap){ background:rgba(14,17,21,.78); }
}

/* ---------------------------------------------------------------------------
   READABILITY ON THE GLASS — the last mile

   Everything above styles the blocks. This styles the words inside them, on
   the pages where a customer is actually reading rather than browsing: the
   product name, the description, form labels.

   The rule for the whole file: on glass, nothing darker than #D3DAE1. Every
   colour below was measured against the brightest patch of the hall showing
   through the darkest glass, which is the worst case a customer can hit.
--------------------------------------------------------------------------- */

/* Secondary copy — descriptions, sub-headings, helper lines. */
body.on-centre main .softtext{ color:var(--on-glass-2); }

/* But not when it has landed on a light card again. */
body.on-centre .pcard .softtext,
body.on-centre .pricebox .softtext,
body.on-centre .table-wrap .softtext,
body.on-centre .drw-body .softtext{ color:var(--ink-soft); }

/* The product name is the single most important string on the site. It gets
   white, full stop — and a little weight, because at 1.9rem over a moving
   photograph, thin type reads as blurred even when it isn't. */
body.on-centre main .section h1,
body.on-centre main .section h2{
  color:var(--on-glass);
  text-shadow:0 1px 2px rgba(8,10,13,.45);
}

/* Form furniture on the glass. */
body.on-centre main :is(.section > .wrap, .section.wrap) .field label,
body.on-centre main :is(.section > .wrap, .section.wrap) label{ color:var(--on-glass-2); }
body.on-centre main :is(.section > .wrap, .section.wrap) select,
body.on-centre main :is(.section > .wrap, .section.wrap) input[type=number],
body.on-centre main :is(.section > .wrap, .section.wrap) input[type=tel],
body.on-centre main :is(.section > .wrap, .section.wrap) input[type=password]{
  background:rgba(255,255,255,.94); color:var(--text); border-color:rgba(255,255,255,.5);
}

/* Breadcrumbs and the small print under the buy box. */
body.on-centre main :is(.section > .wrap, .section.wrap) a.muted,
body.on-centre main :is(.section > .wrap, .section.wrap) .tiny a,
body.on-centre main :is(.section > .wrap, .section.wrap) .small a{ color:var(--gold-glass); }

/* Inside the description panel the glass is lighter, so the same colours
   hold — but headings there were inheriting the panel's body colour. */
body.on-centre .panel h2,
body.on-centre .panel h3,
body.on-centre .panel h4{ color:var(--on-glass); }
body.on-centre .panel p,
body.on-centre .panel li,
body.on-centre .panel .softtext{ color:var(--on-glass-2); }

/* The spec table keeps its light surface, so it keeps its dark type. */
body.on-centre .panel .table-wrap,
body.on-centre .panel .table-wrap *{ color:var(--text); }
body.on-centre .panel .table-wrap th{ color:var(--ink); }

/* --- long-form policy pages -------------------------------------------- */
/* These are read, not browsed. Everything else on the site can afford to sit
   on glass; thirteen thousand characters of legal Mongolian cannot. The page
   keeps an opaque sheet and its normal ink, and the hall stays behind it. */
body.on-centre .panel.doc{
  background:rgba(255,255,255,.97);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-color:rgba(255,255,255,.6);
  color:var(--text);
}
body.on-centre .panel.doc .doc-h2,
body.on-centre .panel.doc .doc-h3{ color:var(--ink); }
body.on-centre .panel.doc p,
body.on-centre .panel.doc li,
body.on-centre .panel.doc .softtext{ color:var(--ink-soft); }
body.on-centre .panel.doc .doc-h2{ border-top-color:var(--line); }
body.on-centre .panel.doc .doc-note{ background:var(--mist-2); color:var(--ink-soft); }


/* ===========================================================================
   FOCUS — the hall recedes as the customer commits

   Browsing and buying want opposite things from a background. While someone
   is exploring, the hall is the point. The moment they open a product, it is
   competing with a price, a weight and a shipping estimate — and it should
   lose that fight.

   So the room steps back in stages. Nothing is blurred: it's dimmed, which
   keeps the picture sharp and simply turns the lights down.

     centre / wing   37% — as chosen, full browsing
     store           28% — you've walked into a shop
     product         14% — a decision is being made
     deep            10% — cart, checkout, account, tracking
   =========================================================================== */
.sitebg::after{ transition:background 500ms var(--ease); }

body.depth-store .sitebg::after{
  background:linear-gradient(to bottom, rgba(11,14,18,.26) 0%, rgba(11,14,18,.34) 100%);
}
body.depth-product .sitebg::after{
  background:linear-gradient(to bottom, rgba(11,14,18,.62) 0%, rgba(11,14,18,.70) 100%);
}
body.depth-deep .sitebg::after{
  background:linear-gradient(to bottom, rgba(11,14,18,.70) 0%, rgba(11,14,18,.78) 100%);
}

/* The glass firms up to match, so the product sheet reads as solid rather
   than as a window onto a shopping centre. */
body.depth-product{ --glass:rgba(14,17,21,.80); --glass-2:rgba(20,24,29,.72); }
body.depth-deep{    --glass:rgba(14,17,21,.84); --glass-2:rgba(20,24,29,.76); }

/* With the room dimmed this far, mid greys become legible again — so the
   secondary text can go back to being genuinely secondary instead of
   near-white. Small hierarchy, but it's what makes a spec sheet readable. */
body.depth-product{ --on-glass-2:#D3DAE1; }
body.depth-deep{    --on-glass-2:#D3DAE1; }

/* A gentle pool of light behind the product itself. The eye goes where the
   room is brightest, and on this page that should be the thing being sold. */
body.depth-product .sitebg::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 42%,
                             rgba(255,255,255,.10), transparent 70%);
}

@media (max-width:900px){
  /* Phones are already more opaque; don't stack two dims on top of it. */
  body.depth-product .sitebg::after,
  body.depth-deep .sitebg::after{
    background:linear-gradient(to bottom, rgba(11,14,18,.5), rgba(11,14,18,.58));
  }
}