/* ===== inline ===== */
/* =============================================================================
   Atlantis Centre - global design system
   -----------------------------------------------------------------------------
   One stylesheet for every page. Colours, type scale, panels, cards, buttons,
   motion, the disclaimer and the footer are defined here once and reused, so no
   page carries its own colours or spacing.

   Token values are taken from the approved Website Development Instructions
   (September 2026) and are repeated identically in the page developer packs.

   Motion note: the instructions remove decorative diamonds, infinity symbols,
   round Atlantean symbols, spirals and ornament rows, and forbid reintroducing
   them. So the atmosphere here is built from light, depth and slow movement -
   drifting hero imagery, gold hairlines that draw themselves in, unhurried
   reveals - never from added ornament. Every effect is disabled under
   prefers-reduced-motion.

   WordPress migration: this file moves across unchanged and is enqueued from
   the theme. Every class is prefixed "atl-" so it cannot collide with theme or
   plugin styles.
   ========================================================================== */

:root {
  --atlantis-navy: #0B3157;

  /* The flood colour. Navy is the brand accent - headings, buttons, hairlines
     and small controls - but a whole section or footer filled with it was the
     thing the client found heavy. Large areas use this warm stone instead, so
     navy reads as authority rather than as weight. */
  --atl-band: #4D4740;
  --atlantis-deep: #0F2E68;
  --atlantis-cream: #FBF8F2;
  --atlantis-paper: #FFFEFA;
  --atlantis-blue-pale: #E8EFF4;

  /* Soft stone, for cards, dividers and quiet information areas. */
  --atl-stone: #EDE7DC;
  --atlantis-gold: #D49408;
  --atlantis-ink: #332E27;

  /* Supporting values derived from the tokens above. Nothing here introduces a
     new hue - these are opacities and tints of the seven approved colours. */
  --atl-gold-soft: #F3D9A0;
  --atl-header-cream: #FAEFD7;
  --atl-rule: rgba(212, 148, 8, 0.45);
  --atl-border: rgba(77, 71, 64, 0.20);
  --atl-focus: #B26F00;
  --atl-muted: #655E53;

  /* Three elevation steps, used consistently. */
  --atl-shadow-1: 0 1px 2px rgba(77, 71, 64, 0.05), 0 4px 14px rgba(77, 71, 64, 0.05);
  --atl-shadow-2: 0 2px 6px rgba(77, 71, 64, 0.07), 0 14px 34px rgba(77, 71, 64, 0.10);
  --atl-shadow-3: 0 10px 24px rgba(77, 71, 64, 0.12), 0 30px 70px rgba(77, 71, 64, 0.14);

  /* One border weight and one corner treatment across every card and panel. */
  --atl-radius: 6px;
  --atl-radius-lg: 10px;
  --atl-border-width: 1px;

  /* 8px spacing rhythm. */
  --atl-s1: 8px;
  --atl-s2: 16px;
  --atl-s3: 24px;
  --atl-s4: 32px;
  --atl-s5: 48px;
  --atl-s6: 64px;
  --atl-s7: 96px;

  --atl-width: 1240px;
  --atl-width-wide: 1440px;
  --atl-read: 68ch;

  /* Motion. Slow and settled, never bouncy - the tone of the Centre. */
  --atl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --atl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --atl-fast: 0.22s;
  --atl-mid: 0.5s;
  --atl-slow: 0.9s;

  /* The approved page family sets both headings and body copy in Arial or a
     metrically compatible clean sans-serif (About Us developer pack, section 4,
     confirmed against every approved continuous-page PDF). Nothing is fetched
     over the network, so the site renders identically offline and in WordPress. */
  --atl-font-display: Arial, Helvetica, "Helvetica Neue", sans-serif;
  --atl-font-body: Arial, Helvetica, "Helvetica Neue", sans-serif;
}

/* ---------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--atlantis-cream);
  color: var(--atlantis-ink);
  font-family: var(--atl-font-body);
  font-size: 19px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--atl-font-display);
  color: var(--atlantis-navy);
  margin: 0 0 var(--atl-s2);
  font-weight: 700;
  line-height: 1.18;
}

h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.015em; }
h2 { font-size: clamp(26px, 3.1vw, 34px); letter-spacing: -0.01em; }
h3 { font-size: clamp(20px, 2vw, 23px); line-height: 1.3; }
h4 { font-size: 19px; line-height: 1.3; }

p { margin: 0 0 var(--atl-s2); }
p:last-child { margin-bottom: 0; }

a { color: var(--atlantis-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--atlantis-navy); }

:focus-visible { outline: 3px solid var(--atl-focus); outline-offset: 2px; border-radius: 2px; }

ul, ol { margin: 0 0 var(--atl-s2); padding-left: 1.35em; }
li { margin-bottom: var(--atl-s1); }
li:last-child { margin-bottom: 0; }

strong { color: var(--atlantis-navy); }

::selection { background: var(--atl-gold-soft); color: var(--atlantis-navy); }

/* Skip link, first thing in the tab order on every page. */
.atl-skip {
  position: absolute;
  left: var(--atl-s2);
  top: -100px;
  z-index: 200;
  background: var(--atlantis-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--atl-radius);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--atl-fast) var(--atl-ease);
}
.atl-skip:focus { top: var(--atl-s2); color: #fff; }

/* Available to screen readers, hidden visually. */
.atl-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.atl-breadcrumb { font-size: 16px; color: var(--atl-muted); }
.atl-breadcrumb a { color: var(--atlantis-deep); }
.atl-hint { font-size: 16px; color: var(--atl-muted); }

/* ------------------------------------------------------------- motion ---- */

/* Scroll reveal. Elements start slightly low and clear, then settle. The
   is-visible class is added by atlantis.js; without JavaScript the fallback
   below keeps everything visible. */
.atl-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--atl-slow) var(--atl-ease-out),
    transform var(--atl-slow) var(--atl-ease-out);
  transition-delay: var(--atl-delay, 0ms);
  will-change: opacity, transform;
}

.atl-reveal.is-visible { opacity: 1; transform: none; }

/* If the script never runs, nothing may stay hidden. */
html:not(.atl-js) .atl-reveal { opacity: 1; transform: none; }

/* A gold hairline that draws itself in beneath a section heading. */
.atl-head::after {
  content: "";
  display: block;
  width: 68px;
  height: 2px;
  margin: var(--atl-s3) auto 0;
  background: linear-gradient(90deg, transparent, var(--atlantis-gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.1s var(--atl-ease-out) 0.15s;
}

.atl-head.is-visible::after,
html:not(.atl-js) .atl-head::after { transform: scaleX(1); }

.atl-split .atl-head::after { margin-inline: 0; transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .atl-reveal { opacity: 1; transform: none; }
  .atl-head::after { transform: scaleX(1); }
}

/* ------------------------------------------------------------ structure ---- */

.atl-wrap {
  width: 100%;
  max-width: var(--atl-width);
  margin-inline: auto;
  padding-inline: var(--atl-s3);
}

.atl-section { padding-block: var(--atl-s7); position: relative; }
.atl-section--tight { padding-block: var(--atl-s6); }
.atl-section--cream { background: var(--atlantis-cream); }
.atl-section--paper { background: var(--atlantis-paper); }

/* The light-blue information band, lifted with a soft vertical wash and edged
   in a fine gold rule top and bottom. */
.atl-section--pale {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 42%),
    var(--atlantis-blue-pale);
  border-block: 1px solid rgba(212, 148, 8, 0.28);
}

.atl-eyebrow {
  font-family: var(--atl-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--atlantis-gold);
  margin: 0 0 var(--atl-s2);
}

.atl-lede { font-size: 20px; line-height: 1.6; max-width: var(--atl-read); margin-inline: auto; }
.atl-prose { max-width: var(--atl-read); margin-inline: auto; }

/* A prose block sitting on its own in a section follows its centred heading. */
.atl-section > .atl-wrap > .atl-prose,
.atl-head .atl-prose { text-align: center; }

/* Long-form legal copy stays left aligned; centring a whole contract is unreadable. */
.atl-prose--doc { text-align: left; max-width: 74ch; }
.atl-prose--doc .atl-detail dt { text-align: left; }
.atl-center { text-align: center; }
.atl-center .atl-lede,
.atl-center .atl-prose { margin-inline: auto; }

.atl-head { margin-bottom: var(--atl-s5); text-align: center; }
.atl-head p:last-child { margin-bottom: 0; }
.atl-head .atl-lede { margin-inline: auto; }

/* Inside a two-column split the heading block stays with its column. */
.atl-split .atl-head { text-align: left; }
.atl-split .atl-head .atl-lede { margin-inline: 0; }

/* A short introduction sitting directly under a section heading is centred with
   it, as the approved pages do. Long-form copy - the legal pages, and anything
   inside a two-column split - is not, so reading stays comfortable. */
.atl-head + .atl-prose { text-align: center; margin-inline: auto; }
.atl-split .atl-head + .atl-prose { text-align: left; margin-inline: 0; }

.atl-rule {
  border: 0;
  border-top: 1px solid var(--atl-rule);
  margin: var(--atl-s5) 0;
}

/* --------------------------------------------------------- utility bar ---- */

/* Contact details reachable from the first moment, on every page. */
.atl-topbar {
  background: var(--atlantis-navy);
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  border-bottom: 1px solid rgba(212, 148, 8, 0.35);
}

.atl-topbar .atl-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--atl-s1) var(--atl-s3);
  padding-block: 9px;
}

.atl-topbar__items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--atl-s1) var(--atl-s3); }

.atl-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

.atl-topbar a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--atl-gold-soft);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--atl-fast) var(--atl-ease);
}

.atl-topbar a:hover { color: #fff; }
.atl-topbar a:hover::after { transform: scaleX(1); transform-origin: left; }

.atl-topbar__hours { color: rgba(255, 255, 255, 0.82); }
.atl-topbar__hours strong { color: var(--atl-gold-soft); font-weight: 700; }

.atl-topbar__icon { width: 15px; height: 15px; flex: none; fill: currentColor; opacity: 0.85; }

/* --------------------------------------------------------------- header ---- */

/* The approved Atlantis logo panel: a warm cream band edged in gold, with the
   logo at the left and the two navigation rows beside it. The hero begins
   immediately beneath it, with no cream gap. */
/* A single band running the full width of the screen, edged in gold. */
.atl-header {
  background: var(--atl-header-cream);
  color: var(--atlantis-navy);
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: var(--atl-border-width) solid var(--atlantis-gold);
  transition: background var(--atl-mid) var(--atl-ease), box-shadow var(--atl-mid) var(--atl-ease);
}

.atl-header .atl-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--atl-s3);
  padding-block: var(--atl-s2);
  transition: padding var(--atl-mid) var(--atl-ease);
}

/* Condensed state once the page has scrolled past the hero's first screen. */
.atl-header.is-stuck {
  background: rgba(250, 239, 215, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--atl-shadow-2);
}
.atl-header.is-stuck .atl-wrap { padding-block: 6px; }
.atl-header.is-stuck .atl-header__brand img { width: min(190px, 46vw); }

.atl-header__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 0;
}

.atl-header__brand img {
  width: min(260px, 60vw);
  transition: width var(--atl-mid) var(--atl-ease), transform var(--atl-mid) var(--atl-ease);
}

.atl-header__brand a:hover img { transform: translateY(-1px) scale(1.02); }

.atl-nav { flex: 1 1 auto; }

.atl-nav__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.atl-nav__row > li { margin: 0; position: relative; }

.atl-nav__link,
.atl-nav__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--atlantis-navy);
  font-family: var(--atl-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: color var(--atl-fast) var(--atl-ease);
}

/* A gold underline that sweeps in from the left on hover. */
.atl-nav__link::after,
.atl-nav__toggle::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--atlantis-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--atl-fast) var(--atl-ease);
}

.atl-nav__link:hover, .atl-nav__toggle:hover { color: var(--atlantis-deep); }
.atl-nav__link:hover::after,
.atl-nav__toggle:hover::after { transform: scaleX(1); transform-origin: left; }

.atl-nav__link[aria-current="page"],
.atl-nav__item--active > .atl-nav__link,
.atl-nav__item--active > .atl-nav__toggle { color: var(--atlantis-deep); }

.atl-nav__link[aria-current="page"]::after,
.atl-nav__item--active > .atl-nav__link::after,
.atl-nav__item--active > .atl-nav__toggle::after { transform: scaleX(1); }

.atl-nav__caret { font-size: 10px; line-height: 1; transition: transform var(--atl-fast) var(--atl-ease); }
.atl-nav__toggle[aria-expanded="true"] .atl-nav__caret { transform: rotate(180deg); }

/* Series dropdowns sit below both header rows. */
.atl-nav__sub {
  position: absolute;
  left: 50%;
  top: 100%;
  min-width: 272px;
  margin: 0;
  padding: var(--atl-s1) 0;
  list-style: none;
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid var(--atlantis-navy);
  border-radius: var(--atl-radius);
  box-shadow: var(--atl-shadow-3);
  z-index: 95;
  transform: translate(-50%, -6px);
  opacity: 0;
  transition: opacity var(--atl-fast) var(--atl-ease), transform var(--atl-fast) var(--atl-ease);
}

.atl-nav__sub[hidden] { display: none; }
.atl-nav__toggle[aria-expanded="true"] + .atl-nav__sub { opacity: 1; transform: translate(-50%, 0); }
.atl-nav__sub > li { margin: 0; }

.atl-nav__sub a {
  display: block;
  min-height: 44px;
  padding: 11px 18px;
  color: var(--atlantis-navy);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--atl-fast) var(--atl-ease), border-color var(--atl-fast) var(--atl-ease), padding-left var(--atl-fast) var(--atl-ease);
}

.atl-nav__sub a:hover {
  background: var(--atlantis-blue-pale);
  color: var(--atlantis-deep);
  border-left-color: var(--atlantis-gold);
  padding-left: 22px;
}

.atl-nav__mobile-toggle { display: none; }

/* ----------------------------------------------------------------- hero ---- */

/* The hero begins immediately beneath the navigation panel: no cream gap. */
/* Full bleed, matching the header band above it, with no cream gap between. */
.atl-hero {
  position: relative;
  width: 100%;
  margin: 0;
  background: var(--atl-band);
  border-bottom: 1px solid rgba(212, 148, 8, 0.5);
  overflow: hidden;
  isolation: isolate;
}

.atl-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* A slow, barely perceptible drift inwards - the photograph breathes rather
     than sits still. */
  animation: atl-drift 34s var(--atl-ease) infinite alternate;
}

@keyframes atl-drift {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-0.8%, -0.9%, 0); }
}

.atl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(77, 71, 64, 0.93) 0%,
    rgba(77, 71, 64, 0.80) 34%,
    rgba(77, 71, 64, 0.38) 66%,
    rgba(77, 71, 64, 0.24) 100%
  );
}

.atl-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 42vw, 520px);
  padding-block: var(--atl-s6);
}

/* Every inner page opens on a deep, luminous band rather than a thin strip: the
   photograph, a gold aurora over it, and the page title at display size. */
.atl-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  background:
    radial-gradient(38% 44% at 20% 26%, rgba(212, 148, 8, 0.3), transparent 64%),
    radial-gradient(34% 40% at 82% 74%, rgba(231, 242, 248, 0.16), transparent 66%);
  animation: atl-aurora 26s var(--atl-ease) infinite alternate;
  pointer-events: none;
}

.atl-hero--full::before { content: none; }

.atl-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.02em;
}

/* A gold hairline that draws itself in beneath the page title. */
.atl-hero__sub::before {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 0 0 var(--atl-s2);
  background: linear-gradient(90deg, var(--atlantis-gold), transparent);
  transform-origin: left;
  animation: atl-draw 1.2s var(--atl-ease-out) 0.5s both;
}

.atl-hero--center .atl-hero__sub::before { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--atlantis-gold), transparent); }

@keyframes atl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.atl-hero__copy { max-width: 42ch; }

.atl-hero h1 { color: #fff; margin-bottom: var(--atl-s2); text-wrap: balance; }

.atl-hero__sub {
  font-family: var(--atl-font-body);
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  color: var(--atl-gold-soft);
  margin: 0;
}

.atl-hero__note {
  margin: var(--atl-s2) 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
}

/* The four program hubs centre their hero copy; the general pages set it at the
   left-middle, as the approved page family does. */
.atl-hero--center .atl-hero__inner { justify-content: center; text-align: center; }
.atl-hero--center .atl-hero__copy { max-width: 46ch; margin-inline: auto; }
.atl-hero--center::after {
  background: linear-gradient(90deg, rgba(11, 30, 48, 0.58) 0%, rgba(11, 30, 48, 0.66) 50%, rgba(11, 30, 48, 0.58) 100%);
}

/* Gold "Recorded Live" seal on the Past Program Recordings heroes. */
.atl-hero__badge {
  position: absolute;
  left: clamp(16px, 4vw, 56px);
  bottom: var(--atl-s3);
  z-index: 3;
  margin: 0;
}

.atl-hero__badge span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px; height: 92px;
  padding: 8px;
  border-radius: 50%;
  background: var(--atlantis-navy);
  border: 3px solid var(--atlantis-gold);
  color: var(--atl-gold-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(212, 148, 8, 0.5);
  animation: atl-seal 4.5s var(--atl-ease) infinite;
}

@keyframes atl-seal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 148, 8, 0.45); }
  50%      { box-shadow: 0 0 0 14px rgba(212, 148, 8, 0); }
}

/* ---- The home page hero: the building, shown large ---------------------- */

/* The storefront photograph is the Centre's front door, so on the home page it
   runs the full width of the viewport at close to full screen height. */
.atl-hero--full {
  max-width: none;
  margin: 0;
  border-radius: 0;
  min-height: 0;
  background: var(--atl-band);
  display: block;
}

/* The photograph is 870 x 520. Holding that exact ratio means object-fit has
   nothing to crop: the entire shopfront is shown, every time. */
/* Edge to edge. No frame and no letterbox bars: the photograph runs the full
   width of the screen and keeps its own proportions, so nothing is cropped and
   nothing is boxed in. */
.atl-hero--full .atl-hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 870 / 520;
}

/* The foot of the photograph dissolves into the navy band beneath, so the two
   read as one composition rather than two stacked blocks. */
.atl-hero--full .atl-hero__frame::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 32%;
  background: linear-gradient(180deg, rgba(11, 30, 48, 0) 0%, rgba(11, 30, 48, 0.5) 60%, var(--atl-band) 100%);
  pointer-events: none;
}

.atl-hero--full .atl-hero__media {
  object-fit: contain;
  object-position: center;
  animation: none;
}

/* Lighter scrim than the inner pages: the building itself must stay legible on
   the right while the copy keeps its contrast on the left. */
/* Deep on the left so the copy always clears AA contrast, opening up on the
   right so the building itself stays clearly visible. */
/* Nothing is laid over the photograph, so no scrim is needed. */
.atl-hero--full::after { content: none; }

/* The welcome band beneath the photograph, on deep navy with the gold aurora. */
.atl-hero__welcome {
  position: relative;
  margin-top: -1px;
  padding-block: var(--atl-s6) var(--atl-s7);
  background: var(--atl-band);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.atl-hero__welcome::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background:
    radial-gradient(40% 46% at 26% 30%, rgba(212, 148, 8, 0.26), transparent 62%),
    radial-gradient(36% 42% at 76% 70%, rgba(231, 242, 248, 0.14), transparent 64%);
  animation: atl-aurora 26s var(--atl-ease) infinite alternate;
}

.atl-hero__welcome .atl-eyebrow { color: var(--atl-gold-soft); }

.atl-hero__welcome h1 {
  color: #fff;
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--atl-s3);
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.atl-hero__welcome .atl-hero__sub {
  font-size: clamp(18px, 2vw, 24px);
  max-width: 30ch;
  margin-inline: auto;
}

.atl-hero__welcome .atl-hero__note {
  max-width: 46ch;
  margin-inline: auto;
  font-size: 18px;
}

.atl-hero__welcome .atl-hero__contact { justify-content: center; }
.atl-hero__actions { justify-content: center; margin-top: var(--atl-s4); }

.atl-hero__welcome .atl-btn {
  background: transparent;
  border-color: var(--atl-gold-soft);
  color: var(--atl-gold-soft);
}

.atl-hero__welcome .atl-btn::before { background: var(--atlantis-gold); }
.atl-hero__welcome .atl-btn:hover { color: #2B1D00; border-color: var(--atlantis-gold); }

/* The welcome copy rises in as the page settles. */
.atl-hero__welcome .atl-wrap > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: atl-rise 1s var(--atl-ease-out) forwards;
}

.atl-hero__welcome .atl-wrap > :nth-child(1) { animation-delay: 0.10s; }
.atl-hero__welcome .atl-wrap > :nth-child(2) { animation-delay: 0.22s; }
.atl-hero__welcome .atl-wrap > :nth-child(3) { animation-delay: 0.34s; }
.atl-hero__welcome .atl-wrap > :nth-child(4) { animation-delay: 0.46s; }
.atl-hero__welcome .atl-wrap > :nth-child(5) { animation-delay: 0.58s; }
.atl-hero__welcome .atl-wrap > :nth-child(6) { animation-delay: 0.70s; }
.atl-hero--full h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.1; }
.atl-hero--full .atl-hero__sub { font-size: clamp(17px, 1.8vw, 22px); }
.atl-hero--full .atl-hero__note { font-size: 17px; }

/* Hero copy rises in on load, one element after another. */
.atl-hero__copy > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: atl-rise 1s var(--atl-ease-out) forwards;
}

.atl-hero__copy > :nth-child(1) { animation-delay: 0.15s; }
.atl-hero__copy > :nth-child(2) { animation-delay: 0.32s; }
.atl-hero__copy > :nth-child(3) { animation-delay: 0.46s; }
.atl-hero__copy > :nth-child(4) { animation-delay: 0.60s; }
.atl-hero__copy > :nth-child(5) { animation-delay: 0.74s; }

@keyframes atl-rise { to { opacity: 1; transform: none; } }

/* Contact details, on the home hero, above the fold. */
.atl-hero__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--atl-s1) var(--atl-s2);
  margin: var(--atl-s3) 0 0;
  padding: 0;
  list-style: none;
}

.atl-hero__contact li { margin: 0; }

.atl-hero__contact a,
.atl-hero__contact span {
  display: inline-flex;
  align-items: center;
  gap: var(--atl-s1);
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(243, 217, 160, 0.5);
  background: rgba(77, 71, 64, 0.42);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--atl-fast) var(--atl-ease), border-color var(--atl-fast) var(--atl-ease), transform var(--atl-fast) var(--atl-ease);
}

.atl-hero__contact a:hover {
  background: var(--atlantis-gold);
  border-color: var(--atlantis-gold);
  color: #2B1D00;
  transform: translateY(-2px);
}

.atl-hero__contact svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* A quiet scroll cue at the foot of the full hero. */
.atl-hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--atl-s3);
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.atl-hero__cue span {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--atl-gold-soft), transparent);
  animation: atl-cue 2.6s var(--atl-ease) infinite;
}

@keyframes atl-cue {
  0%, 100% { transform: scaleY(0.45); opacity: 0.35; transform-origin: top; }
  50%      { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

.atl-hero__cue:hover { color: #fff; }

/* ---------------------------------------------------------------- cards ---- */

.atl-grid { display: grid; gap: var(--atl-s3); }
.atl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.atl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* One panel component. The variant only changes the background fill. */
.atl-panel {
  position: relative;
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid var(--atl-border);
  border-radius: var(--atl-radius);
  padding: var(--atl-s3);
  box-shadow: var(--atl-shadow-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform var(--atl-mid) var(--atl-ease),
    box-shadow var(--atl-mid) var(--atl-ease),
    border-color var(--atl-mid) var(--atl-ease);
}

/* A gold thread that draws across the top edge as the card is hovered. */
.atl-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--atlantis-gold), var(--atl-gold-soft), var(--atlantis-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--atl-mid) var(--atl-ease);
}

.atl-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--atl-shadow-2);
  border-color: rgba(212, 148, 8, 0.55);
}

.atl-panel:hover::before { transform: scaleX(1); }

.atl-panel--pale { background: var(--atlantis-blue-pale); border-color: var(--atlantis-navy); }
.atl-panel--cream { background: var(--atlantis-cream); }
.atl-panel--gold { border-color: var(--atlantis-gold); }
.atl-panel--flat { box-shadow: none; }
.atl-panel--flat:hover { transform: none; box-shadow: none; }
.atl-panel--roomy { padding: var(--atl-s4); }

.atl-panel > :last-child { margin-bottom: 0; }
.atl-panel h3 { margin-bottom: var(--atl-s1); }

.atl-panel__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--atlantis-deep);
  margin: 0 0 var(--atl-s1);
}

/* Pushes a button to the foot of a card so paired cards align. */
.atl-panel__foot { margin-top: auto; padding-top: var(--atl-s3); }

/* -------------------------------------------------------------- buttons ---- */

/* The approved pages render every call to action as a bordered box in light
   blue or paper, with navy bold label text - not as a solid navy fill. */
.atl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--atl-s1);
  min-height: 44px;
  padding: 13px 28px;
  border: var(--atl-border-width) solid var(--atlantis-navy);
  border-radius: var(--atl-radius);
  background: var(--atlantis-blue-pale);
  color: var(--atlantis-navy);
  font-family: var(--atl-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--atl-mid) var(--atl-ease),
    border-color var(--atl-mid) var(--atl-ease),
    transform var(--atl-fast) var(--atl-ease),
    box-shadow var(--atl-mid) var(--atl-ease);
}

/* Navy sweeps up through the button on hover rather than snapping. */
.atl-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--atlantis-navy);
  transform: translateY(101%);
  transition: transform var(--atl-mid) var(--atl-ease);
}

.atl-btn:hover {
  color: #fff;
  border-color: var(--atlantis-navy);
  transform: translateY(-2px);
  box-shadow: var(--atl-shadow-2);
}

.atl-btn:hover::before { transform: translateY(0); }
.atl-btn:active { transform: translateY(0); }

.atl-btn--secondary { background: var(--atlantis-paper); }

.atl-btn--block { width: 100%; }

.atl-btn[aria-disabled="true"],
.atl-btn:disabled {
  background: var(--atlantis-blue-pale);
  border-color: var(--atl-border);
  color: #76705F;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.atl-btns { display: flex; flex-wrap: wrap; gap: var(--atl-s2); }

/* ------------------------------------------------------- program cards ---- */

.atl-programs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--atl-s6) var(--atl-s5);
}

.atl-program {
  display: flex;
  flex-direction: column;
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid var(--atl-border);
  border-radius: var(--atl-radius);
  overflow: hidden;
  box-shadow: var(--atl-shadow-1);
  transition:
    transform var(--atl-mid) var(--atl-ease),
    box-shadow var(--atl-mid) var(--atl-ease),
    border-color var(--atl-mid) var(--atl-ease);
}

.atl-program:hover {
  transform: translateY(-5px);
  box-shadow: var(--atl-shadow-3);
  border-color: rgba(212, 148, 8, 0.55);
}

/* Title and synopsis stay above and outside the cream artwork area. */
.atl-program__head { padding: var(--atl-s5) var(--atl-s5) var(--atl-s4); }

.atl-program__title { font-size: clamp(21px, 1.8vw, 25px); margin: 0 0 var(--atl-s2); }
.atl-program__title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--atlantis-gold), var(--atlantis-gold)); background-size: 0% 2px; background-repeat: no-repeat; background-position: left 100%; transition: background-size var(--atl-mid) var(--atl-ease); }
.atl-program__title a:hover { background-size: 100% 2px; }
.atl-program__synopsis { margin: 0; font-size: 18px; color: var(--atl-muted); }

/* One cream artwork area, identical on every card of a hub page, holding the
   approved advertisement at its own proportions. The artwork is never
   stretched or cropped. */
.atl-program__art {
  position: relative;
  display: block;
  width: 100%;
  margin: auto 0 0;
  padding: var(--atl-s5) var(--atl-s4);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 148, 8, 0.16), transparent 60%),
    var(--atl-band);
  border-block: 1px solid rgba(212, 148, 8, 0.55);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  cursor: zoom-in;
}

.atl-program__art img {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 210 / 297;
  object-fit: contain;
  margin-inline: auto;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 148, 8, 0.35);
  transition: transform var(--atl-slow) var(--atl-ease-out), box-shadow var(--atl-mid) var(--atl-ease);
}

.atl-program:hover .atl-program__art img {
  transform: scale(1.03);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 148, 8, 0.7);
}

/* "View full size" appears over the artwork on hover, and is always present for
   keyboard and touch users. */
.atl-program__zoom {
  position: absolute;
  left: 50%;
  bottom: var(--atl-s3);
  transform: translate(-50%, 8px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--atlantis-gold);
  border-radius: 999px;
  background: rgba(77, 71, 64, 0.86);
  backdrop-filter: blur(6px);
  color: var(--atl-gold-soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity var(--atl-mid) var(--atl-ease), transform var(--atl-mid) var(--atl-ease), background var(--atl-fast) var(--atl-ease);
}

.atl-program__zoom svg { width: 15px; height: 15px; fill: currentColor; }

.atl-program:hover .atl-program__zoom,
.atl-program__zoom:focus-visible { opacity: 1; transform: translate(-50%, 0); }
.atl-program__zoom:hover { background: var(--atlantis-gold); color: #2B1D00; }

@media (hover: none) {
  .atl-program__zoom { opacity: 1; transform: translate(-50%, 0); }
}

/* Changing details live in HTML, never inside the artwork. */
.atl-program__meta { padding: var(--atl-s4) var(--atl-s5) var(--atl-s2); }

.atl-program__date {
  margin: 0;
  padding: 11px var(--atl-s2);
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid var(--atlantis-navy);
  border-radius: var(--atl-radius);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--atlantis-navy);
}

.atl-program__date span { border-bottom: 1px solid var(--atlantis-navy); padding: 0 var(--atl-s3); }
.atl-program__date--soon { background: var(--atlantis-cream); border-color: var(--atl-rule); }
.atl-program__date--recorded { background: var(--atlantis-blue-pale); }

.atl-program__action { padding: 0 var(--atl-s5) var(--atl-s5); }

/* The final row: program 9 or 18 stays on the left, and its companion panel is
   stretched so both bottom borders finish on the same line. */
.atl-programs__final { margin-top: var(--atl-s6); align-items: stretch; }
.atl-programs__final > * { height: 100%; }
.atl-programs__companion { justify-content: flex-start; }

/* Slim two-way link between Series 1 and Series 2. */
.atl-crosslink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--atl-s2);
  padding: var(--atl-s3);
  background: var(--atlantis-blue-pale);
  border: var(--atl-border-width) solid var(--atlantis-navy);
  border-radius: var(--atl-radius);
}

.atl-crosslink p { margin: 0; }

.atl-crosslink--slim {
  display: block;
  margin: var(--atl-s3) 0 0;
  padding: var(--atl-s2);
  text-align: center;
  font-weight: 700;
  transition: background var(--atl-mid) var(--atl-ease), transform var(--atl-mid) var(--atl-ease);
}

.atl-crosslink--slim:hover { background: #EDE7DB; transform: translateY(-2px); }
.atl-crosslink--slim a { color: var(--atlantis-navy); text-decoration: none; }
.atl-crosslink--slim a:hover { text-decoration: underline; }

/* Hub opening hierarchy. */
.atl-hub__count {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--atlantis-gold);
  margin: 0 0 var(--atl-s2);
}

.atl-hub__tail {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--atlantis-gold);
  margin: 0;
  text-align: center;
}

/* ------------------------------------------------------- media + tables ---- */

.atl-figure { margin: 0; }

.atl-figure img {
  border-radius: var(--atl-radius);
  border: var(--atl-border-width) solid var(--atl-border);
  width: 100%;
}

.atl-figure figcaption { margin-top: var(--atl-s1); font-size: 15px; color: var(--atl-muted); }

/* Shop tiles carry their product-family name as page text over the photograph,
   so the label stays selectable copy rather than pixels inside the image. */
.atl-tile {
  position: relative;
  margin: 0;
  border-radius: var(--atl-radius);
  overflow: hidden;
  border: var(--atl-border-width) solid var(--atl-border);
  box-shadow: var(--atl-shadow-1);
  transition: transform var(--atl-mid) var(--atl-ease), box-shadow var(--atl-mid) var(--atl-ease);
}

.atl-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1.1s var(--atl-ease-out);
}

.atl-tile:hover { transform: translateY(-4px); box-shadow: var(--atl-shadow-2); }
.atl-tile:hover img { transform: scale(1.07); }

.atl-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px var(--atl-s2) 12px;
  background: linear-gradient(180deg, rgba(11, 30, 48, 0) 0%, rgba(11, 30, 48, 0.9) 60%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.atl-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--atl-s5); align-items: center; }
.atl-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.atl-portrait {
  background: var(--atlantis-cream);
  border: var(--atl-border-width) solid var(--atl-border);
  border-radius: var(--atl-radius);
  padding: var(--atl-s2);
  transition: border-color var(--atl-mid) var(--atl-ease), box-shadow var(--atl-mid) var(--atl-ease);
}

.atl-portrait:hover { border-color: rgba(212, 148, 8, 0.55); box-shadow: var(--atl-shadow-1); }

/* Portraits are shown whole - never cropped to fill their box. */
.atl-portrait img { width: 100%; height: 320px; object-fit: contain; object-position: center; }

.atl-tags { display: flex; flex-wrap: wrap; gap: var(--atl-s1); margin: 0; padding: 0; list-style: none; }

.atl-tags li {
  margin: 0;
  padding: 8px 16px;
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid var(--atl-border);
  border-radius: 999px;
  font-size: 15px;
  color: var(--atlantis-navy);
  transition: border-color var(--atl-fast) var(--atl-ease), transform var(--atl-fast) var(--atl-ease), background var(--atl-fast) var(--atl-ease);
}

.atl-tags li:hover { border-color: var(--atlantis-gold); background: var(--atl-header-cream); transform: translateY(-2px); }

.atl-scroll { overflow-x: auto; }

/* --------------------------------------------------------------- detail ---- */

.atl-detail { margin: 0; }
.atl-detail > div { display: flex; flex-wrap: wrap; gap: var(--atl-s1); padding: 11px 0; border-bottom: 1px solid var(--atl-border); }
.atl-detail > div:last-child { border-bottom: 0; }
.atl-detail dt { font-weight: 700; color: var(--atlantis-navy); min-width: 168px; }
.atl-detail dd { margin: 0; }

.atl-hours { margin: 0; }
.atl-hours > div { display: flex; justify-content: space-between; gap: var(--atl-s2); padding: 8px 0; border-bottom: 1px solid var(--atl-border); }
.atl-hours > div:last-child { border-bottom: 0; }
.atl-hours dt { font-weight: 700; color: var(--atlantis-navy); }
.atl-hours dd { margin: 0; }

/* ------------------------------------------------------------ accordion ---- */

/* Built on <details> so every answer stays readable with JavaScript disabled. */
.atl-accordion { display: grid; gap: var(--atl-s2); }

.atl-accordion details {
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid var(--atl-border);
  border-radius: var(--atl-radius);
  box-shadow: var(--atl-shadow-1);
  transition: border-color var(--atl-fast) var(--atl-ease), box-shadow var(--atl-fast) var(--atl-ease);
}

.atl-accordion details:hover { border-color: rgba(212, 148, 8, 0.5); }
.atl-accordion details[open] { border-color: rgba(212, 148, 8, 0.6); box-shadow: var(--atl-shadow-2); }

.atl-accordion summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--atl-s2);
  min-height: 44px;
  padding: var(--atl-s3);
  font-family: var(--atl-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--atlantis-navy);
  cursor: pointer;
  list-style: none;
}

.atl-accordion summary::-webkit-details-marker { display: none; }

.atl-accordion summary::after {
  content: "+";
  flex: none;
  font-family: var(--atl-font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--atlantis-gold);
  transition: transform var(--atl-mid) var(--atl-ease);
}

.atl-accordion details[open] summary::after { content: "\2212"; transform: rotate(180deg); }

.atl-accordion .atl-accordion__body { padding: 0 var(--atl-s3) var(--atl-s3); }
.atl-accordion .atl-accordion__body > :last-child { margin-bottom: 0; }

/* The panel unfolds instead of appearing. Driven by atlantis.js, which sets the
   measured height; without JavaScript <details> opens instantly as normal. */
.atl-accordion details[open] .atl-accordion__body { animation: atl-unfold var(--atl-mid) var(--atl-ease-out); }

@keyframes atl-unfold {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- form ---- */

.atl-form { display: grid; gap: var(--atl-s3); }
.atl-field { display: grid; gap: 6px; }

.atl-field label { font-weight: 700; color: var(--atlantis-navy); font-size: 16px; }
.atl-field .atl-hint { font-size: 15px; color: var(--atl-muted); }

.atl-field input,
.atl-field select,
.atl-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 15px;
  font-family: var(--atl-font-body);
  font-size: 17px;
  color: var(--atlantis-ink);
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid rgba(77, 71, 64, 0.32);
  border-radius: var(--atl-radius);
  transition: border-color var(--atl-fast) var(--atl-ease), box-shadow var(--atl-fast) var(--atl-ease);
}

.atl-field textarea { min-height: 156px; resize: vertical; }

.atl-field input:focus-visible,
.atl-field select:focus-visible,
.atl-field textarea:focus-visible {
  border-color: var(--atlantis-deep);
  box-shadow: 0 0 0 4px rgba(212, 148, 8, 0.18);
}

.atl-field--invalid input,
.atl-field--invalid select,
.atl-field--invalid textarea { border-color: #A02020; border-width: 2px; }

/* Errors are announced in words, never by colour alone. */
.atl-error { color: #8E1B1B; font-size: 15px; font-weight: 700; }
.atl-error[hidden] { display: none; }
.atl-required { color: #8E1B1B; }

.atl-formnote {
  margin: 0;
  padding: var(--atl-s2) var(--atl-s3);
  background: var(--atlantis-blue-pale);
  border-radius: var(--atl-radius);
  font-size: 16px;
}

.atl-status {
  padding: var(--atl-s2) var(--atl-s3);
  border-radius: var(--atl-radius);
  border: var(--atl-border-width) solid var(--atl-border);
  font-weight: 700;
}

.atl-status[hidden] { display: none; }
.atl-status--ok { background: var(--atlantis-blue-pale); color: var(--atlantis-navy); }
.atl-status--error { background: #FBEDED; color: #8E1B1B; border-color: #E0BDBD; }

/* ----------------------------------------------------------- disclaimer ---- */

/* Sits outside the principal content boxes, immediately above the footer. */
.atl-disclaimer { background: var(--atlantis-cream); padding-block: var(--atl-s6); }

.atl-disclaimer__inner {
  border-top: 1px solid var(--atl-rule);
  border-bottom: 1px solid var(--atl-rule);
  padding-block: var(--atl-s3);
  max-width: 88ch;
  margin-inline: auto;
  text-align: center;
}

.atl-disclaimer h2 {
  font-family: var(--atl-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--atlantis-gold);
  margin-bottom: var(--atl-s1);
}

.atl-disclaimer p { font-size: 17px; margin: 0; }

/* --------------------------------------------------------------- footer ---- */

.atl-footer-image { display: block; overflow: hidden; }

.atl-footer-image img {
  width: 100%;
  height: clamp(200px, 28vw, 340px);
  object-fit: cover;
  object-position: center;
}

/* One compact navy strip, matching the approved footer. Contact details are
   published in page content rather than repeated here, and the former
   provider credit is removed. */
.atl-footer { background: var(--atl-band); color: rgba(255, 255, 255, 0.92); padding-block: var(--atl-s3); font-size: 15px; }

.atl-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--atl-s2) var(--atl-s4);
}

.atl-footer a { color: #fff; }

.atl-footer ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--atl-s2) var(--atl-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.atl-footer li { margin: 0; }
.atl-footer li a { display: inline-block; min-height: 32px; padding-block: 5px; }
.atl-footer p { margin: 0; }
.atl-footer__name { font-weight: 700; color: var(--atl-gold-soft); }

/* --------------------------------------------------------- back to top ---- */

.atl-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--atlantis-gold);
  border-radius: 50%;
  background: var(--atlantis-navy);
  color: var(--atl-gold-soft);
  box-shadow: var(--atl-shadow-2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--atl-mid) var(--atl-ease), transform var(--atl-mid) var(--atl-ease), background var(--atl-fast) var(--atl-ease);
}

.atl-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.atl-top:hover { background: var(--atlantis-gold); color: #2B1D00; }
.atl-top svg { width: 18px; height: 18px; fill: currentColor; }

/* --------------------------------------------------------------- notice ---- */

/* Staging banner. The build only emits this while the prototype is private. */
.atl-staging {
  background: var(--atlantis-gold);
  color: #2B1D00;
  text-align: center;
  padding: 10px var(--atl-s3);
  font-size: 15px;
  font-weight: 700;
}

.atl-staging a { color: #2B1D00; }

/* An editorial note to Bob about content still awaiting his approval.
   Stripped from the launch build - see the page register. */
.atl-review {
  margin: 0 0 var(--atl-s3);
  padding: var(--atl-s2) var(--atl-s3);
  background: var(--atlantis-blue-pale);
  border-left: 4px solid var(--atlantis-gold);
  border-radius: var(--atl-radius);
  font-size: 16px;
}

/* ----------------------------------------------------------- responsive ---- */

@media (max-width: 1080px) {
  .atl-split { grid-template-columns: 1fr; gap: var(--atl-s4); }
}

@media (max-width: 900px) {
  body { font-size: 18px; }
  .atl-section { padding-block: var(--atl-s6); }
  .atl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below this width two program columns are no longer readable. */
@media (max-width: 820px) {
  .atl-programs,
  .atl-programs__final { grid-template-columns: minmax(0, 1fr); }
  .atl-program__art img { aspect-ratio: auto; }
}

/* Mobile navigation: a clear menu button with nested submenus, not a shrunken
   desktop bar. */
@media (max-width: 1100px) {
  .atl-hero--full .atl-hero__media { object-position: 62% 46%; }
}

@media (max-width: 1180px) {
  .atl-header { position: static; padding-top: 0; }
  .atl-header .atl-wrap { display: block; padding: var(--atl-s2); border-radius: 0; border-inline: 0; border-top: 0; }
  .atl-header__brand { justify-content: space-between; gap: var(--atl-s2); padding: 0; }
  .atl-header__brand img { width: min(190px, 46vw); }

  .atl-nav__mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--atl-s1);
    min-height: 44px;
    padding: 10px 16px;
    background: var(--atlantis-navy);
    color: #fff;
    border: 1px solid var(--atlantis-navy);
    border-radius: var(--atl-radius);
    font-family: var(--atl-font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }

  .atl-nav { margin-top: var(--atl-s2); }
  .atl-nav[hidden] { display: none; }
  .atl-nav__row { flex-direction: column; align-items: stretch; border-top: 1px solid var(--atl-border); }
  .atl-nav__row > li { border-top: 1px solid var(--atl-border); }
  .atl-nav__row > li:first-child { border-top: 0; }

  .atl-nav__link,
  .atl-nav__toggle { width: 100%; padding: 14px var(--atl-s2); border-left: 3px solid transparent; }
  .atl-nav__link::after,
  .atl-nav__toggle::after { display: none; }

  .atl-nav__link[aria-current="page"],
  .atl-nav__item--active > .atl-nav__link,
  .atl-nav__item--active > .atl-nav__toggle { border-left-color: var(--atlantis-gold); }

  .atl-nav__toggle { justify-content: space-between; }

  .atl-nav__sub {
    position: static;
    transform: none;
    opacity: 1;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(77, 71, 64, 0.06);
  }

  .atl-nav__sub a { padding-left: var(--atl-s4); }

  .atl-topbar { font-size: 14px; }
  .atl-topbar .atl-wrap { justify-content: center; }
  .atl-topbar__hours { display: none; }

}

@media (max-width: 940px) {
  .atl-hero--full .atl-hero__inner { padding-block: var(--atl-s6); }
}

@media (max-width: 700px) {
  .atl-wrap { padding-inline: var(--atl-s2); }
  .atl-grid--4,
  .atl-grid--3,
  .atl-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .atl-hero__inner { min-height: 260px; }
  .atl-hero--full { min-height: 640px; }
  .atl-hero--full .atl-hero__inner { min-height: 640px; }
  .atl-hero--full .atl-hero__copy { max-width: none; }
  .atl-btns { flex-direction: column; align-items: stretch; }
  .atl-btns .atl-btn { width: 100%; }
  .atl-detail dt { min-width: 0; width: 100%; }
  .atl-portrait img { height: 260px; }
  .atl-crosslink { flex-direction: column; align-items: flex-start; }
  .atl-crosslink .atl-btn { width: 100%; }
  .atl-hero__contact { gap: var(--atl-s1); }
  .atl-hero__contact a, .atl-hero__contact span { font-size: 15px; padding: 9px 14px; }
  .atl-top { width: 44px; height: 44px; }
}

@media print {
  .atl-header, .atl-topbar, .atl-footer-image, .atl-staging, .atl-skip, .atl-top, .atl-hero__cue { display: none; }
  body { background: #fff; font-size: 12pt; }
  .atl-reveal { opacity: 1 !important; transform: none !important; }
  .atl-accordion details { break-inside: avoid; }
}

/* =============================================================================
   Showcase layer
   -----------------------------------------------------------------------------
   The part of the project the client likes most is the program artwork: deep
   navy, warm gold, luminous depth. That language is carried into the site
   itself here - navy showcase bands, gold hairlines and a full-screen artwork
   viewer - using only the seven approved colours plus opacity. No diamond,
   infinity, spiral, Atlantean roundel or ornament row is introduced anywhere.
   ========================================================================== */

/* ------------------------------------------------------- the cool ground ----

   What used to be a deep navy showcase band, inverted to white type with a gold
   aurora behind it. The client asked for the heavy blocks of colour to go, so
   the band is now the pale blue-grey ground and everything on it reads in the
   ordinary colours. The inversion that used to live here has been deleted
   rather than overridden - see "The two grounds" at the foot of this file. */

/* -------------------------------------------------- wide program layout ---- */

/* The hub pages get a wider canvas so each advertisement can be shown large. */
.atl-wrap--wide { max-width: var(--atl-width-wide); }

.atl-program {
  border-color: rgba(77, 71, 64, 0.22);
  border-radius: var(--atl-radius-lg);
}

.atl-program__head { text-align: left; }

/* The artwork triggers are <button> elements so they work from the keyboard.
   Reset the native button chrome so they lay out exactly like the figures they
   replace. */
.atl-program__art,
.atl-adstage__figure,
.atl-promo {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.atl-adstage__figure,
.atl-promo { background: none; border: 0; padding: 0; }

/* Icons inside a button are label-sized, never image-sized. */
.atl-btn svg { width: 17px; height: 17px; flex: none; fill: currentColor; }

/* ------------------------------------------------------- artwork viewer ---- */

/* Opens the approved advertisement at full screen so every word on the artwork
   is readable. Built on a <dialog>, so Escape, focus handling and the backdrop
   come from the browser rather than from hand-written script. */
.atl-lightbox {
  width: min(96vw, 1100px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 1px solid rgba(212, 148, 8, 0.6);
  border-radius: var(--atl-radius-lg);
  background: var(--atl-band);
  color: #fff;
  overflow: visible;
}

.atl-lightbox::backdrop {
  background: rgba(6, 24, 44, 0.86);
  backdrop-filter: blur(6px);
}

.atl-lightbox[open] { animation: atl-lightbox-in var(--atl-mid) var(--atl-ease-out); }

@keyframes atl-lightbox-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.atl-lightbox__body {
  display: grid;
  gap: var(--atl-s3);
  padding: var(--atl-s3);
  max-height: 94vh;
  overflow: auto;
}

.atl-lightbox__figure { margin: 0; text-align: center; }

.atl-lightbox__figure img {
  width: auto;
  max-width: 100%;
  max-height: 76vh;
  margin-inline: auto;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.atl-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--atl-s2);
  padding-top: var(--atl-s2);
  border-top: 1px solid rgba(212, 148, 8, 0.4);
}

.atl-lightbox__caption p { margin: 0; font-size: 16px; color: rgba(255, 255, 255, 0.86); }
.atl-lightbox__caption strong { color: var(--atl-gold-soft); display: block; font-size: 18px; }

.atl-lightbox__nav { display: flex; gap: var(--atl-s1); }

.atl-lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--atl-gold-soft);
  border-radius: var(--atl-radius);
  background: transparent;
  color: var(--atl-gold-soft);
  font-family: var(--atl-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--atl-fast) var(--atl-ease), color var(--atl-fast) var(--atl-ease);
}

.atl-lightbox__btn:hover { background: var(--atlantis-gold); border-color: var(--atlantis-gold); color: #2B1D00; }
.atl-lightbox__btn[disabled] { opacity: 0.35; cursor: not-allowed; }

.atl-lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--atlantis-gold);
  background: var(--atlantis-navy);
  color: var(--atl-gold-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--atl-shadow-3);
  transition: background var(--atl-fast) var(--atl-ease), color var(--atl-fast) var(--atl-ease), transform var(--atl-fast) var(--atl-ease);
}

.atl-lightbox__close:hover { background: var(--atlantis-gold); color: #2B1D00; transform: rotate(90deg); }

/* ------------------------------------------- the advertisement on a page ---- */

/* On a program page the full-page advertisement is the centrepiece: presented
   on a navy stage, large, and clickable to open full screen. */
.atl-adstage {
  position: relative;
  padding: var(--atl-s5) var(--atl-s3);
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(212, 148, 8, 0.18), transparent 62%),
    var(--atlantis-navy);
  border: 1px solid rgba(212, 148, 8, 0.5);
  border-radius: var(--atl-radius-lg);
  overflow: hidden;
}

.atl-adstage__figure { margin: 0; cursor: zoom-in; }

.atl-adstage__figure img {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 148, 8, 0.4);
  transition: transform var(--atl-slow) var(--atl-ease-out), box-shadow var(--atl-mid) var(--atl-ease);
}

.atl-adstage__figure:hover img {
  transform: translateY(-6px);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 148, 8, 0.75);
}

.atl-adstage__actions { display: flex; justify-content: center; margin-top: var(--atl-s4); }

.atl-adstage .atl-btn {
  background: transparent;
  border-color: var(--atl-gold-soft);
  color: var(--atl-gold-soft);
}

.atl-adstage .atl-btn::before { background: var(--atlantis-gold); }
.atl-adstage .atl-btn:hover { color: #2B1D00; border-color: var(--atlantis-gold); }

/* The promo beside the program details, also openable. */
.atl-promo { margin: 0; cursor: zoom-in; }

.atl-promo img {
  width: 100%;
  border-radius: var(--atl-radius);
  box-shadow: var(--atl-shadow-2), 0 0 0 1px rgba(212, 148, 8, 0.4);
  transition: transform var(--atl-mid) var(--atl-ease), box-shadow var(--atl-mid) var(--atl-ease);
}

.atl-promo:hover img { transform: translateY(-5px); box-shadow: var(--atl-shadow-3), 0 0 0 1px rgba(212, 148, 8, 0.75); }

@media (max-width: 700px) {
  .atl-lightbox { width: 100vw; max-height: 100vh; border-radius: 0; border: 0; }
  .atl-lightbox__body { max-height: 100vh; padding: var(--atl-s2); }
  .atl-lightbox__figure img { max-height: 66vh; }
  .atl-lightbox__close { top: var(--atl-s1); right: var(--atl-s1); }
  .atl-lightbox__caption { flex-direction: column; align-items: stretch; }
  .atl-lightbox__nav { justify-content: space-between; }
  .atl-adstage { padding: var(--atl-s3) var(--atl-s2); }
}

/* ------------------------------------------------------- profile card ---- */

/* Portrait, membership seal and caption as one object. Previously these were
   three separately sized blocks stacked in a column, which read as clutter. */
.atl-profile {
  margin: 0;
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid rgba(212, 148, 8, 0.5);
  border-radius: var(--atl-radius-lg);
  overflow: hidden;
  box-shadow: var(--atl-shadow-2);
  transition: transform var(--atl-mid) var(--atl-ease), box-shadow var(--atl-mid) var(--atl-ease);
}

.atl-profile:hover { transform: translateY(-4px); box-shadow: var(--atl-shadow-3); }

.atl-profile__portrait {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(212, 148, 8, 0.14), transparent 60%),
    var(--atlantis-cream);
  padding: var(--atl-s3);
}

/* The portrait is shown whole, never cropped to fill its box. */
.atl-profile__portrait img {
  width: 100%;
  height: 340px;
  object-fit: contain;
  object-position: center;
}

.atl-profile__caption {
  display: flex;
  align-items: center;
  gap: var(--atl-s3);
  padding: var(--atl-s3);
  background: var(--atl-band);
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.atl-profile__seal { width: 76px; height: 76px; flex: none; }

.atl-profile__caption strong {
  display: block;
  color: var(--atl-gold-soft);
  font-size: 18px;
  margin-bottom: 3px;
}

@media (max-width: 700px) {
  .atl-profile__portrait img { height: 280px; }
  .atl-profile__caption { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------ form fields on the cool ground ----

   The enquiry form used to sit on deep navy and needed light values throughout.
   On the pale ground it needs none of that; the focus ring is the only rule
   worth keeping from the original block. */
.atl-section--cool .atl-field input:focus-visible,
.atl-section--cool .atl-field select:focus-visible,
.atl-section--cool .atl-field textarea:focus-visible {
  border-color: var(--atlantis-gold);
  box-shadow: 0 0 0 4px rgba(212, 148, 8, 0.3);
}

/* The welcome band is centred, so its hairline centres with it. */
.atl-hero__welcome .atl-hero__sub::before {
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--atlantis-gold), transparent);
}

/* =============================================================================
   Home opening: the split stage
   -----------------------------------------------------------------------------
   Headline on one side, the complete shopfront photograph on the other, both on
   a deep navy stage. At roughly half the screen width the photograph renders
   below its own pixel size, so it stays crisp instead of being stretched, and
   because its own proportions are kept nothing is cropped or zoomed.
   ========================================================================== */

.atl-hero--full {
  max-width: none;
  margin: 0;
  border-radius: 0;
  min-height: min(78vh, 760px);
  display: flex;
  align-items: center;
  background: var(--atl-band);
  border-bottom: 1px solid rgba(212, 148, 8, 0.5);
}

.atl-hero--full::after { content: none; }

/* The aurora sits behind everything on the stage. */
.atl-hero--full::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background:
    radial-gradient(38% 46% at 24% 34%, rgba(212, 148, 8, 0.28), transparent 62%),
    radial-gradient(40% 44% at 80% 66%, rgba(231, 242, 248, 0.15), transparent 64%);
  animation: atl-aurora 28s var(--atl-ease) infinite alternate;
  pointer-events: none;
}

/* The photograph takes the larger share and runs off the right edge of the
   screen, so it reads as a full-bleed image rather than a boxed thumbnail. */
.atl-hero__stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(28px, 3.4vw, 56px);
  padding-block: var(--atl-s5);
}

.atl-hero--full .atl-hero__copy { max-width: none; text-align: left; }

.atl-hero--full h1 {
  color: #fff;
  margin-bottom: var(--atl-s3);
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.atl-hero--full .atl-hero__sub { font-size: clamp(17px, 1.35vw, 21px); max-width: 24ch; }
.atl-hero--full .atl-hero__note { font-size: 17px; max-width: 32ch; margin-top: var(--atl-s2); }
.atl-hero--full .atl-hero__contact { justify-content: flex-start; }
.atl-hero--full .atl-hero__actions { justify-content: flex-start; margin-top: var(--atl-s3); gap: var(--atl-s2); }

.atl-hero--full .atl-btn {
  background: transparent;
  border-color: var(--atl-gold-soft);
  color: var(--atl-gold-soft);
}

.atl-hero--full .atl-btn::before { background: var(--atlantis-gold); }
.atl-hero--full .atl-btn:hover { color: #2B1D00; border-color: var(--atlantis-gold); }

/* The photograph: whole, uncropped, edged in gold and lifted off the stage. */
.atl-hero__shot {
  position: relative;
  /* Break out of the content width and run to the right edge of the viewport. */
  margin: 0 calc(-1 * (50vw - 50% - var(--atl-s3))) 0 0;
  border-radius: var(--atl-radius-lg) 0 0 var(--atl-radius-lg);
  overflow: hidden;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(212, 148, 8, 0.55);
}

.atl-hero__shot .atl-hero__media {
  position: static;
  width: 100%;
  height: auto;
  object-fit: fill;
  animation: none;
}

@keyframes atl-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -12px, 0); }
}

/* The copy arrives first, then the photograph. */
.atl-hero--full .atl-hero__copy > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: atl-rise 1s var(--atl-ease-out) forwards;
}

.atl-hero--full .atl-hero__copy > :nth-child(1) { animation-delay: 0.10s; }
.atl-hero--full .atl-hero__copy > :nth-child(2) { animation-delay: 0.20s; }
.atl-hero--full .atl-hero__copy > :nth-child(3) { animation-delay: 0.32s; }
.atl-hero--full .atl-hero__copy > :nth-child(4) { animation-delay: 0.44s; }
.atl-hero--full .atl-hero__copy > :nth-child(5) { animation-delay: 0.56s; }
.atl-hero--full .atl-hero__copy > :nth-child(6) { animation-delay: 0.68s; }

.atl-hero__shot {
  opacity: 0;
  animation:
    atl-shot-in 1.2s var(--atl-ease-out) 0.3s forwards,
    atl-float 9s var(--atl-ease) 1.5s infinite alternate;
}

@keyframes atl-shot-in {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atl-hero__shot { opacity: 1; animation: none; }
  .atl-hero--full .atl-hero__copy > * { opacity: 1; transform: none; animation: none; }
}

/* Stacked on narrow screens: photograph first, then the welcome. */
@media (max-width: 940px) {
  .atl-hero--full { min-height: 0; }
  .atl-hero__stage {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--atl-s5);
    gap: var(--atl-s4);
  }
  .atl-hero__shot {
    order: -1;
    margin-inline: calc(-1 * var(--atl-s2));
    border-radius: 0;
  }
  .atl-hero--full h1 { font-size: clamp(32px, 7vw, 44px); }
  .atl-hero--full .atl-hero__sub,
  .atl-hero--full .atl-hero__note { max-width: none; }
}

/* =============================================================================
   Home opening: the photograph as the background
   -----------------------------------------------------------------------------
   The shopfront fills the whole stage and the welcome sits over it. The delivery
   file is 1740px wide, so at full-screen width it still renders at or below its
   own pixel size and stays sharp rather than being stretched.
   ========================================================================== */

/* The photograph becomes the stage itself. */
.atl-hero__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  opacity: 1;
  animation: none;
}

.atl-hero__shot .atl-hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  /* A very slow drift, so the picture breathes without visibly moving. */
  animation: atl-drift 40s var(--atl-ease) infinite alternate;
}

/* Deep on the left where the words are, clear on the right where the shop is. */
.atl-hero__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      92deg,
      rgba(11, 30, 48, 0.95) 0%,
      rgba(13, 33, 52, 0.9) 26%,
      rgba(16, 38, 58, 0.66) 48%,
      rgba(77, 71, 64, 0.3) 72%,
      rgba(77, 71, 64, 0.12) 100%
    ),
    linear-gradient(180deg, rgba(13, 33, 52, 0.55) 0%, transparent 24%, transparent 66%, rgba(13, 33, 52, 0.6) 100%);
}

/* The stage returns to a single column, with the copy sitting over the picture. */
.atl-hero__stage {
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--atl-s6);
  z-index: 2;
}

.atl-hero--full .atl-hero__copy { max-width: 46ch; }
.atl-hero--full h1 { font-size: clamp(36px, 4vw, 58px); margin-bottom: var(--atl-s2); }
.atl-hero--full .atl-hero__sub { font-size: clamp(18px, 1.6vw, 24px); max-width: 30ch; }
.atl-hero--full .atl-hero__note { max-width: 38ch; }

/* The aurora would only muddy a photographic background. */
.atl-hero--full::before { content: none; }

@media (max-width: 940px) {
  .atl-hero--full { min-height: 620px; }
  .atl-hero__shot { margin: 0; border-radius: 0; }
  .atl-hero__shot .atl-hero__media { object-position: 62% 46%; }
  .atl-hero__stage { padding-block: var(--atl-s6); }
}

/* ------------------------------------------------------- hub opening ---- */

/* The standfirst, series title and introduction are a sequence, not a block.
   Each step gets real space, and the panels sit well clear of the text above. */
.atl-hub__intro { max-width: 46rem; margin-inline: auto; }

.atl-hub__intro .atl-hub__count {
  margin-bottom: var(--atl-s4);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.atl-hub__intro h2 {
  margin-bottom: var(--atl-s4);
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.02em;
}

/* A gold hairline between the title and the introduction. */
.atl-hub__intro h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: var(--atl-s4) auto 0;
  background: linear-gradient(90deg, transparent, var(--atl-gold-soft), transparent);
}

.atl-hub__intro .atl-lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.7;
  margin-inline: auto;
}

.atl-hub__intro .atl-hub__tail { margin-top: var(--atl-s3); }

.atl-hub__panels { margin-top: var(--atl-s7); gap: var(--atl-s4); }

.atl-hub__panels .atl-panel h3 { margin-bottom: var(--atl-s2); font-size: clamp(21px, 1.9vw, 25px); }
.atl-hub__panels .atl-panel p { line-height: 1.7; }

/* The cross-link to the other series sits clear of the panels above it. */
.atl-hub__panels + .atl-crosslink--slim { margin-top: var(--atl-s5); padding: var(--atl-s3); }

@media (max-width: 700px) {
  .atl-hub__panels { margin-top: var(--atl-s5); }
}

/* ---------------------------------------------------------- photo gallery ---- */

/* A row of photographs with a short caption over each. Used where the approved
   copy already names the spaces being shown, so the pictures illustrate the
   words rather than adding any. */
.atl-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--atl-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.atl-gallery li {
  position: relative;
  margin: 0;
  border-radius: var(--atl-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(212, 148, 8, 0.45);
  box-shadow: var(--atl-shadow-1);
  transition: transform var(--atl-mid) var(--atl-ease), box-shadow var(--atl-mid) var(--atl-ease), border-color var(--atl-mid) var(--atl-ease);
}

.atl-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.1s var(--atl-ease-out);
}

.atl-gallery li:hover {
  transform: translateY(-5px);
  box-shadow: var(--atl-shadow-3);
  border-color: var(--atlantis-gold);
}

.atl-gallery li:hover img { transform: scale(1.06); }

.atl-gallery span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px var(--atl-s2) 14px;
  background: linear-gradient(180deg, rgba(11, 30, 48, 0) 0%, rgba(11, 30, 48, 0.92) 62%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

.atl-gallery--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) { .atl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .atl-gallery { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================================
   Home opening: the complete photograph
   -----------------------------------------------------------------------------
   The whole shopfront, nothing cropped and nothing zoomed. The frame holds the
   picture's own 3:2 proportions, so object-fit has nothing to cut, and the
   welcome sits over the darker left side of the image.

   The former-name signage has been retouched out of the source file rather than
   cropped away, which is what makes showing the full frame possible.
   ========================================================================== */

.atl-hero--full {
  min-height: 0;
  display: block;
  background: var(--atl-band);
}

.atl-hero--full .atl-hero__shot {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 2200 / 1467;
}

.atl-hero--full .atl-hero__shot .atl-hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: none;
}

/* Readable over the picture without hiding it: strong at the lower left where
   the copy sits, clearing completely across the shopfront itself. */
.atl-hero--full .atl-hero__shot::after {
  background:
    linear-gradient(90deg,
      rgba(11, 30, 48, 0.92) 0%,
      rgba(13, 33, 52, 0.82) 30%,
      rgba(16, 38, 58, 0.45) 55%,
      rgba(77, 71, 64, 0.12) 78%,
      rgba(77, 71, 64, 0) 100%),
    linear-gradient(180deg,
      rgba(13, 33, 52, 0.42) 0%, transparent 26%,
      transparent 52%, rgba(11, 30, 48, 0.78) 100%);
}

.atl-hero--full .atl-hero__stage {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding-block: var(--atl-s5) var(--atl-s6);
}

.atl-hero--full .atl-hero__copy { max-width: 44ch; }
.atl-hero--full h1 { font-size: clamp(32px, 3.6vw, 54px); margin-bottom: var(--atl-s2); }
.atl-hero--full .atl-hero__sub { font-size: clamp(17px, 1.5vw, 21px); }
.atl-hero--full .atl-hero__note { font-size: 16px; }
.atl-hero--full .atl-hero__contact { margin-top: var(--atl-s2); }
.atl-hero--full .atl-hero__actions { margin-top: var(--atl-s3); }

/* On a narrow screen the picture is too short to hold the copy, so the welcome
   moves beneath it onto navy. */
@media (max-width: 900px) {
  .atl-hero--full .atl-hero__stage {
    position: static;
    padding-block: var(--atl-s5);
    background: var(--atl-band);
  }
  .atl-hero--full .atl-hero__shot::after {
    background: linear-gradient(180deg, rgba(11, 30, 48, 0.3) 0%, transparent 30%, transparent 70%, rgba(11, 30, 48, 0.65) 100%);
  }
  .atl-hero--full .atl-hero__copy { max-width: none; }
}

/* The address in the utility bar. It is the longest item there, so it drops
   away before the phone and email do as the bar narrows. */
.atl-topbar__address { max-width: 100%; text-align: left; }
.atl-topbar__address .atl-topbar__icon { align-self: flex-start; margin-top: 3px; }

@media (max-width: 1180px) {
  .atl-topbar__hours { display: none; }
  .atl-topbar .atl-wrap { justify-content: center; }
}


/* =============================================================================
   Page headers - restored to the treatment used on the existing site
   -----------------------------------------------------------------------------
   Referenced from atlantiscentre.com.au, which Bob prefers:

     - the photograph runs clean, with no navy wash and no aurora over it
     - one large page title, left aligned and sitting low in the frame
     - near-white text carried by a hard offset shadow rather than a scrim
     - the home page header is the photograph alone, with no copy on it at all

   This block comes last so it governs the earlier hero rules.
   ========================================================================== */

.atl-hero {
  background: var(--atl-band);
  border-bottom: 0;
}

/* No aurora, and no full-frame wash: the picture is shown as photographed. */
.atl-hero::before { content: none; }

.atl-hero::after {
  background: linear-gradient(
    180deg,
    rgba(11, 30, 48, 0.18) 0%,
    rgba(11, 30, 48, 0) 34%,
    rgba(11, 30, 48, 0) 52%,
    rgba(11, 30, 48, 0.42) 100%
  );
}

.atl-hero__media { animation: none; }

.atl-hero__inner {
  align-items: flex-end;
  min-height: clamp(380px, 46vw, 630px);
  padding-block: var(--atl-s6) var(--atl-s5);
}

.atl-hero--center .atl-hero__inner { justify-content: flex-start; text-align: left; }
.atl-hero__copy,
.atl-hero--center .atl-hero__copy { max-width: 26ch; margin-inline: 0; }

/* The title: large, light-weight, near-white, with the hard offset shadow that
   gives it contrast without dimming the photograph. */
.atl-hero h1,
.atl-hero--center h1 {
  color: #FCFCFC;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: var(--atl-s2);
  text-shadow: 4px 4px 0 rgba(33, 27, 27, 0.82);
}

/* The approved second line stays, in pale gold, shadowed to match. */
.atl-hero__sub {
  color: var(--atl-gold-soft);
  font-size: clamp(17px, 1.5vw, 21px);
  text-shadow: 3px 3px 0 rgba(33, 27, 27, 0.72);
}

/* The drawn gold rule and the eyebrow belong to the previous treatment. */
.atl-hero__sub::before { content: none; }
.atl-hero .atl-eyebrow { display: none; }

.atl-hero__note {
  color: #fff;
  font-size: 17px;
  text-shadow: 2px 2px 0 rgba(33, 27, 27, 0.6);
}

/* The "Recorded Live" seal keeps its place but stops pulsing. */
.atl-hero__badge span { animation: none; }

/* ---- home: the photograph on its own, exactly as the existing site ---- */

.atl-hero--full { border-bottom: 0; }

/* Nothing is laid over the shopfront - no wash, no copy. */
.atl-hero--full .atl-hero__shot::after { content: none; }

.atl-hero--full .atl-hero__stage {
  position: static;
  inset: auto;
  background: var(--atl-band);
  padding-block: var(--atl-s6);
}

.atl-hero--full .atl-hero__copy { max-width: 52ch; }
.atl-hero--full h1 { text-shadow: none; color: #fff; font-size: clamp(32px, 3.4vw, 48px); }
.atl-hero--full .atl-hero__sub { text-shadow: none; }
.atl-hero--full .atl-hero__note { text-shadow: none; color: rgba(255, 255, 255, 0.9); }
.atl-hero--full .atl-eyebrow { display: block; }

@media (max-width: 700px) {
  .atl-hero__inner { min-height: 300px; padding-block: var(--atl-s5) var(--atl-s4); }
  .atl-hero h1 { text-shadow: 3px 3px 0 rgba(33, 27, 27, 0.82); }
  .atl-hero__copy, .atl-hero--center .atl-hero__copy { max-width: none; }
}

/* =============================================================================
   Shop Items - the product catalogue
   ========================================================================== */

.atl-shopbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--atl-s2) var(--atl-s3);
  margin-bottom: var(--atl-s3);
  padding-bottom: var(--atl-s3);
  border-bottom: 1px solid var(--atl-rule);
}

.atl-filters { display: flex; flex-wrap: wrap; gap: var(--atl-s1); }

.atl-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 18px;
  border: var(--atl-border-width) solid var(--atlantis-navy);
  border-radius: 999px;
  background: var(--atlantis-paper);
  color: var(--atlantis-navy);
  font-family: var(--atl-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--atl-fast) var(--atl-ease), color var(--atl-fast) var(--atl-ease), border-color var(--atl-fast) var(--atl-ease);
}

.atl-filter span {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--atlantis-blue-pale);
  font-size: 13px;
  color: var(--atlantis-deep);
}

.atl-filter:hover { background: var(--atlantis-blue-pale); }

.atl-filter.is-on {
  background: var(--atlantis-navy);
  border-color: var(--atlantis-navy);
  color: #fff;
}

.atl-filter.is-on span { background: rgba(255, 255, 255, 0.18); color: var(--atl-gold-soft); }

.atl-search input {
  min-width: min(300px, 70vw);
  min-height: 44px;
  padding: 11px 16px;
  font-family: var(--atl-font-body);
  font-size: 16px;
  color: var(--atlantis-ink);
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid rgba(77, 71, 64, 0.32);
  border-radius: 999px;
}

.atl-search input:focus-visible {
  border-color: var(--atlantis-deep);
  box-shadow: 0 0 0 4px rgba(212, 148, 8, 0.18);
}

.atl-count { margin: 0 0 var(--atl-s3); font-size: 15px; color: var(--atl-muted); }

.atl-empty {
  margin: var(--atl-s5) 0 0;
  padding: var(--atl-s4);
  background: var(--atlantis-blue-pale);
  border-radius: var(--atl-radius);
  text-align: center;
}

.atl-empty[hidden] { display: none; }

.atl-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--atl-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.atl-product { margin: 0; }
.atl-product[hidden] { display: none; }

/* The card is inert on purpose: nothing is sold or reserved online, so a
   product tile is not a link and carries no hover lift or cursor change that
   would invite a click. */
.atl-product__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--atlantis-paper);
  border: var(--atl-border-width) solid var(--atl-border);
  border-radius: var(--atl-radius);
  overflow: hidden;
  color: inherit;
  box-shadow: var(--atl-shadow-1);
}

.atl-product__media {
  display: block;
  background: var(--atlantis-cream);
  overflow: hidden;
}

.atl-product__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* No hover zoom either - there is nothing to click through to. */

.atl-product__noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--atlantis-blue-pale);
  color: var(--atl-muted);
  font-size: 14px;
}

.atl-product__name {
  display: block;
  padding: var(--atl-s2) var(--atl-s2) 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--atlantis-navy);
}

.atl-product__price {
  display: block;
  margin-top: auto;
  padding: 0 var(--atl-s2) var(--atl-s2);
  font-size: 16px;
  font-weight: 700;
  color: var(--atlantis-deep);
}

.atl-product__stock {
  display: block;
  padding: 0 var(--atl-s2) var(--atl-s2);
  font-size: 13px;
  color: var(--atl-muted);
}

@media (max-width: 600px) {
  .atl-products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--atl-s2); }
  .atl-shopbar { flex-direction: column; align-items: stretch; }
  .atl-search input { width: 100%; }
}

/* The hub titles are set in capitals by the approved continuous pages, so they
   need more room than a title-case heading before they wrap. */
.atl-hero__copy,
.atl-hero--center .atl-hero__copy { max-width: 34ch; }
.atl-hero--center h1 { font-size: clamp(30px, 3.2vw, 46px); }

/* -----------------------------------------------------------------------------
   Hero legibility over a bright photograph
   -----------------------------------------------------------------------------
   The header treatment matches the existing site: the photograph is shown
   untinted, with the title carried by a hard offset shadow. That works over the
   Centre's darker exteriors, but the Crystal Gift Shop interiors are lit pale
   cream and rose, and white-on-cream is a poor read.

   Rather than reinstate the heavy wash Bob asked us to remove, a soft scrim is
   drawn in from the left edge only. It sits behind the copy, fades out well
   before the middle of the frame, and leaves the greater part of the photograph
   exactly as shot.
   -------------------------------------------------------------------------- */
.atl-hero::after {
  background:
    linear-gradient(
      90deg,
      rgba(11, 30, 48, 0.52) 0%,
      rgba(11, 30, 48, 0.34) 22%,
      rgba(11, 30, 48, 0.10) 42%,
      rgba(11, 30, 48, 0) 58%
    ),
    linear-gradient(
      180deg,
      rgba(11, 30, 48, 0.20) 0%,
      rgba(11, 30, 48, 0) 34%,
      rgba(11, 30, 48, 0) 52%,
      rgba(11, 30, 48, 0.44) 100%
    );
}

/* The home page keeps its clean, completely untouched shopfront photograph. */
.atl-hero--full::after { content: none; }

/* The supporting line under the title carries no shadow of its own on a pale
   photograph, so give it the same treatment as the title. */
.atl-hero__note {
  color: #F4F1EA;
  text-shadow: 2px 2px 0 rgba(33, 27, 27, 0.72);
}

/* -----------------------------------------------------------------------------
   Home welcome band centred
   -----------------------------------------------------------------------------
   The navy band under the shopfront photograph carries the welcome, the contact
   details and the two calls to action. It was set left, which left a wide empty
   half on a desktop screen. Centring the whole block on the page balances it,
   and every part of it follows: the eyebrow, the headline, both supporting
   lines, the contact row and the buttons.
   -------------------------------------------------------------------------- */
.atl-hero--full .atl-hero__copy {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.atl-hero--full .atl-hero__sub,
.atl-hero--full .atl-hero__note {
  max-width: none;
  margin-inline: auto;
}

.atl-hero--full .atl-hero__contact,
.atl-hero--full .atl-hero__actions {
  justify-content: center;
}

/* On a narrow screen the earlier rule reinstates the offset shadow for every
   hero title. The home title sits on flat navy rather than a photograph, so it
   needs no shadow there. */
@media (max-width: 700px) {
  .atl-hero--full h1 { text-shadow: none; }
}

/* The browse-only note under the item count. */
.atl-note-browse {
  margin: calc(var(--atl-s2) * -1) 0 var(--atl-s3);
  font-size: 15px;
  color: var(--atl-muted);
}

/* =============================================================================
   September 2026 — client revisions
   ========================================================================== */

/* ---- 1. the shopfront is never cropped, on any device --------------------

   The frame held the picture's proportions with `aspect-ratio`, and the image
   filled it with `object-fit: cover`. Where `aspect-ratio` is not supported —
   older Safari, older Android WebViews, and any in-app browser built on them —
   the frame collapsed to whatever height it could work out, and `cover` then
   did what it is designed to do and enlarged the photograph to fill it. That is
   the reported glitch: magnified for some people, correct for everyone else.

   The image is now an ordinary block picture at its natural height. There is no
   frame to fill and nothing for `object-fit` to act on, so it cannot be cropped
   or enlarged by any browser, however old. */
.atl-hero--full .atl-hero__shot {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
}

.atl-hero--full .atl-hero__shot .atl-hero__media {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: fill;
  object-position: center;
  transform: none;
  animation: none;
}

/* Both earlier rules nudged the crop sideways on small screens. With nothing
   being cropped they have no work to do, and left in place they would reopen
   the bug on the browsers that do support aspect-ratio. */
@media (max-width: 900px) {
  .atl-hero--full .atl-hero__media,
  .atl-hero--full .atl-hero__shot .atl-hero__media { object-position: center; }
  .atl-hero--full .atl-hero__shot { height: auto; aspect-ratio: auto; }
}

/* ---- 2. footer contact row ------------------------------------------------

   Replaces the navy bar that used to sit above the header. Phone, email,
   address and opening hours stay on every page, as the brief requires, but they
   now close the page rather than opening it. */
.atl-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--atl-s2) var(--atl-s4);
  padding-block: var(--atl-s3);
  border-bottom: 1px solid rgba(243, 217, 160, 0.22);
  font-size: 15px;
}

.atl-footer__contact a,
.atl-footer__contact span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.atl-footer__contact a:hover { color: #fff; text-decoration: underline; }
.atl-footer__contact strong { color: var(--atl-gold-soft); font-weight: 700; margin-right: 4px; }
.atl-footer__contact .atl-topbar__icon { width: 15px; height: 15px; flex: none; fill: currentColor; opacity: 0.8; }

@media (max-width: 600px) {
  .atl-footer__contact { flex-direction: column; gap: var(--atl-s1); text-align: center; }
}


/* Long page titles — "Frequently Asked Questions – Atlantis Centre" is the
   longest — were stacking into five short lines in a narrow column. */
.atl-hero__copy,
.atl-hero--center .atl-hero__copy { max-width: 42ch; }

/* =============================================================================
   The band goes light
   -----------------------------------------------------------------------------
   Two dark band colours were tried and both were rejected. The objection was
   never the hue: it was a heavy block of colour running the full width of the
   page, repeated on every page. The colour-role guidance the client was given
   says as much — warm cream and ivory for page backgrounds, soft stone for
   quiet areas, and navy kept for headings, key buttons and small highlights.

   So the band is now soft stone with navy type on it. Everything that was
   inverted to white-on-dark is returned to the ordinary reading colours, the
   gold aurora behind it is removed, and the only dark surfaces left on the site
   are the footer and the scrim that keeps hero titles legible over a
   photograph. Navy still appears everywhere it did — as ink, not as weight.

   This block comes last, so it governs the inversion rules above it.
   ========================================================================== */

:root {
  --atl-band: var(--atlantis-blue-pale);
}

.atl-section--cool {
  background: var(--atlantis-blue-pale);
  color: var(--atlantis-ink);
  border-block: 1px solid var(--atl-rule);
}

/* The aurora existed to give a dark band depth. On stone it only muddies it. */
.atl-section--cool::before { content: none; }

.atl-section--cool h1,
.atl-section--cool h2,
.atl-section--cool h3 { color: var(--atlantis-navy); }

.atl-section--cool .atl-eyebrow { color: var(--atl-focus); }
.atl-section--cool .atl-lede { color: var(--atlantis-ink); }
.atl-section--cool a { color: var(--atlantis-deep); }
.atl-section--cool .atl-head::after {
  background: linear-gradient(90deg, transparent, var(--atlantis-gold), transparent);
}

.atl-section--cool .atl-panel {
  background: var(--atlantis-paper);
  border-color: var(--atl-border);
  color: var(--atlantis-ink);
  box-shadow: var(--atl-shadow-1);
}

.atl-section--cool .atl-panel:hover {
  background: var(--atlantis-paper);
  border-color: rgba(212, 148, 8, 0.6);
  box-shadow: var(--atl-shadow-2);
}

.atl-section--cool .atl-panel__label { color: var(--atl-focus); }
.atl-section--cool .atl-panel strong { color: var(--atlantis-navy); }

.atl-section--cool .atl-btn {
  background: transparent;
  border-color: var(--atlantis-navy);
  color: var(--atlantis-navy);
}
.atl-section--cool .atl-btn::before { background: var(--atlantis-navy); }
.atl-section--cool .atl-btn:hover { color: #fff; border-color: var(--atlantis-navy); }

.atl-section--cool .atl-hub__tail { color: var(--atl-focus); }
.atl-section--cool .atl-tile { border-color: var(--atl-border); }
.atl-section--cool .atl-tile:hover { border-color: var(--atlantis-gold); }
.atl-section--cool .atl-figure img { border-color: var(--atl-border); }
.atl-section--cool .atl-figure figcaption { color: var(--atl-muted); }
.atl-section--cool .atl-hours dt,
.atl-section--cool .atl-detail dt { color: var(--atlantis-navy); }
.atl-section--cool .atl-hours > div,
.atl-section--cool .atl-detail > div { border-color: var(--atl-border); }

/* The enquiry form sits on one of these bands on Home and Contact. */
.atl-section--cool .atl-field label { color: var(--atlantis-navy); }
.atl-section--cool .atl-field .atl-hint { color: var(--atl-muted); }
.atl-section--cool .atl-required { color: #A02020; }
.atl-section--cool .atl-error { color: #A02020; }
.atl-section--cool .atl-formnote { color: var(--atl-muted); }
.atl-section--cool .atl-formnote a { color: var(--atlantis-deep); }
.atl-section--cool .atl-form .atl-btn {
  background: var(--atlantis-gold);
  border-color: var(--atlantis-gold);
  color: #2B1D00;
}
.atl-section--cool .atl-form .atl-btn::before { background: var(--atl-gold-soft); }
.atl-section--cool .atl-form .atl-btn:hover { color: #2B1D00; }

/* The home welcome, under the shopfront photograph, follows the same rule. */
.atl-hero--full .atl-hero__stage,
.atl-hero__welcome { background: var(--atlantis-blue-pale); }

.atl-hero--full .atl-hero__copy h1 { color: var(--atlantis-navy); text-shadow: none; }
.atl-hero--full .atl-hero__sub { color: var(--atl-focus); text-shadow: none; }
.atl-hero--full .atl-hero__note { color: var(--atl-muted); text-shadow: none; }
.atl-hero--full .atl-eyebrow { color: var(--atl-focus); }

.atl-hero--full .atl-hero__contact li a,
.atl-hero--full .atl-hero__contact li span {
  color: var(--atlantis-navy);
  border-color: var(--atl-border);
  background: var(--atlantis-paper);
}

.atl-hero--full .atl-btn {
  border-color: var(--atlantis-navy);
  color: var(--atlantis-navy);
}
.atl-hero--full .atl-btn::before { background: var(--atlantis-navy); }
.atl-hero--full .atl-btn:hover { color: #fff; border-color: var(--atlantis-navy); }

/* Small screens put the uncropped hero title in the band too. */
@media (max-width: 760px) {
}

/* The footer stays dark: one anchor at the foot of the page, in the brand navy
   rather than a neutral, so the mark at the top and the base of the page agree. */
.atl-footer { background: var(--atlantis-navy); }

/* The last of the white-on-dark inversions, returned to reading colours. The
   crosslink and the tag chips take the soft stone, which is what that colour is
   for: quiet information sitting on a coloured band. */
.atl-section--cool .atl-crosslink {
  background: var(--atl-stone);
  border-color: var(--atl-border);
  color: var(--atlantis-ink);
}

.atl-section--cool .atl-crosslink a { color: var(--atlantis-navy); }
.atl-section--cool .atl-crosslink--slim:hover { background: var(--atlantis-paper); }

.atl-section--cool .atl-hub__count,
.atl-section--cool .atl-hub__tail { color: var(--atl-focus); }

.atl-section--cool .atl-tile { border-color: var(--atl-border); }
.atl-section--cool .atl-figure img { border-color: var(--atl-border); }
.atl-section--cool .atl-figure figcaption { color: var(--atl-muted); }

.atl-section--cool .atl-tags li {
  background: var(--atl-stone);
  border-color: var(--atl-border);
  color: var(--atlantis-ink);
}

.atl-section--cool .atl-status--ok {
  background: var(--atlantis-paper);
  border-color: var(--atl-border);
  color: var(--atlantis-navy);
}

.atl-section--cool .atl-field input,
.atl-section--cool .atl-field select,
.atl-section--cool .atl-field textarea {
  background: var(--atlantis-paper);
  border-color: var(--atl-border);
  color: var(--atlantis-ink);
}

.atl-section--cool .atl-field--invalid input,
.atl-section--cool .atl-field--invalid select,
.atl-section--cool .atl-field--invalid textarea { border-color: #A02020; }

/* -----------------------------------------------------------------------------
   Small gold text
   -----------------------------------------------------------------------------
   The brand gold is a fine colour for rules, icons, borders and button fills,
   but as 13px uppercase text on cream it measures about 2.9:1 — below the 4.5:1
   that small text needs to be legible, and noticeably hard to read on a phone
   in daylight. A darker gold is used for that text only. The brand gold is
   untouched everywhere it is used as a shape rather than as words.
   -------------------------------------------------------------------------- */
:root { --atl-gold-text: #8A5600; }

.atl-eyebrow,
.atl-panel__label,
.atl-section--cool .atl-eyebrow,
.atl-section--cool .atl-panel__label,
.atl-section--cool .atl-hub__count,
.atl-section--cool .atl-hub__tail { color: var(--atl-gold-text); }

.atl-hero--full .atl-hero__sub,
.atl-hero--full .atl-eyebrow { color: var(--atl-gold-text); }

/* =============================================================================
   The two grounds
   -----------------------------------------------------------------------------
   Warm cream and pale blue-grey, alternating down every page. build.js assigns
   them; nothing in the page HTML chooses a background any more.

   The earlier ground modifiers - --paper, --pale, --cream - are gone from the
   markup. They are left defined below because a stray one in a future edit
   should still render something sensible rather than nothing.
   ========================================================================== */

.atl-section--warm { background: var(--atlantis-cream); }
.atl-section--cool { background: var(--atlantis-blue-pale); }

/* The two grounds sit close together in tone, which is the point - the change
   should be felt rather than noticed. A gold hairline marks each join so the
   sections still read as separate bands on a bright screen. */
.atl-section--cool { border-block: 1px solid var(--atl-rule); }

/* A panel has to lift off both grounds. On cream it takes paper; on blue-grey
   paper alone is too close, so it keeps paper and gains its border. */
.atl-section--warm .atl-panel { background: var(--atlantis-paper); }
.atl-section--cool .atl-panel { background: var(--atlantis-paper); }

/* The home welcome band opens the page, so the first content section beneath it
   is warm and the alternation runs from there. */
.atl-hero--full + .atl-section--warm { border-top: 1px solid var(--atl-rule); }

/* A tile whose picture already carries its own label needs no scrim: the scrim
   exists only to make overlaid text readable, and there is none here. */
.atl-tile--captioned::after { content: none; }

/* =============================================================================
   One row of menu items
   -----------------------------------------------------------------------------
   The navigation was authored as two rows and rendered as two lines. It is now
   a single list of eleven items, which needs about 1310px at the old spacing
   and had 1192px to sit in — hence the wrap.

   Three changes make it fit: the header takes the wide container rather than
   the narrower page one, each item loses a little horizontal padding, and the
   menu button now appears below 1180px instead of 940px, so the bar is either
   one clean line or the button — never a wrapped stack.
   ========================================================================== */

.atl-header .atl-wrap { max-width: var(--atl-width-wide); }

.atl-nav__row { flex-wrap: nowrap; }

.atl-nav__link,
.atl-nav__toggle { padding: 10px 13px; white-space: nowrap; }

/* The submenu still hangs off its own item, so it must not be squeezed by the
   nowrap on the row above it. */
.atl-nav__sub { white-space: normal; }

/* Between 1180px and the widest screens the row is close to the edges. A little
   less padding again keeps it comfortable rather than crammed. */
@media (max-width: 1330px) {
  .atl-nav__link,
  .atl-nav__toggle { padding: 10px 10px; font-size: 14.5px; }
}

/* Just above the menu-button breakpoint the row is at its tightest. Measured at
   1200px it filled the space exactly, with nothing to spare - and a font that
   renders a shade wider on another machine would have wrapped it. Tightened
   again here so there is real slack rather than a lucky fit. */
@media (max-width: 1260px) {
  .atl-nav__link,
  .atl-nav__toggle { padding: 10px 8px; font-size: 14px; }
}

/* =============================================================================
   The shopfront fits the screen
   -----------------------------------------------------------------------------
   The photograph is shown whole — that was settled earlier — but whole is not
   the same as visible. At 3:2 across a 1440px page it stands 960px tall, so on
   a laptop the bottom of it fell below the fold and you had to scroll to see
   the shop.

   It is now bounded by the height left under the header as well as by the width
   of the page, and it keeps its own proportions within those bounds. Whichever
   runs out first decides the size, so the entire photograph is on screen the
   moment the page opens, at every window shape.

   Where the window is wide and short the picture is narrower than the page and
   the header's own cream shows either side of it. That is the deliberate trade:
   the alternative is cropping, which is the thing we were asked to stop doing.

   --atl-header-h is measured by atlantis.js and kept current on resize. The
   fallback below is the desktop header height, so with JavaScript off the
   picture is at worst a little smaller than it needs to be, never cut off.
   ========================================================================== */

.atl-hero--full .atl-hero__shot {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--atl-header-cream);
}

.atl-hero--full .atl-hero__shot .atl-hero__media {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--atl-header-h, 176px));
  max-height: calc(100svh - var(--atl-header-h, 176px));
}

/* Bounded by height as well as width, the photograph is narrower than the page
   on a short window — 265px of bare ground either side at 1366x720. Left flat
   that reads as a mistake, so the picture is presented as a framed photograph
   instead: centred on the page's own cream, a gold hairline around it and a
   soft shadow beneath. The constraint then looks like a decision. */
.atl-hero--full .atl-hero__shot {
  background: var(--atlantis-cream);
  padding: 0;
}

.atl-hero--full .atl-hero__shot .atl-hero__media {
  border-bottom: 1px solid var(--atl-rule);
  box-shadow: 0 18px 44px rgba(11, 30, 48, 0.14);
}

/* Once the picture fills the width there is no ground beside it and the frame
   has nothing to sit against, so it goes away. */
@media (max-width: 900px) {
  .atl-hero--full .atl-hero__shot .atl-hero__media { box-shadow: none; }
}

/* =============================================================================
   One line of heading, on every page
   -----------------------------------------------------------------------------
   The banner titles were stacking into two, three and on FAQs five short lines,
   because the copy column was 42 characters wide while the longest title —
   "Program 15 — The Twelve Dimensions of Consciousness" — is fifty-one.

   Two changes. Six headings lost a redundant "– Atlantis Centre" that the tab
   title, the breadcrumb and the shared-link preview all still carry. And the
   column now has the full width of the page to work with, with the type scaled
   so even the longest title clears it on one line.

   Below 900px it wraps again: a title set small enough to fit a phone on one
   line would be unreadable, and wrapping is the right answer there.
   ========================================================================== */

@media (min-width: 901px) {
  .atl-hero__copy,
  .atl-hero--center .atl-hero__copy { max-width: none; }

  .atl-hero h1,
  .atl-hero--center h1 {
    white-space: nowrap;
    font-size: min(3.3vw, 46px);
  }

  .atl-hero__sub { max-width: none; white-space: nowrap; }
}

/* Headings follow normal block flow above their content. */

/* The home welcome band keeps a 62-character column so its supporting lines
   hold a readable measure. The title is set on one line and is wider than that,
   so it was spilling out of its own box and running to the edge of the page.
   Above the wrapping breakpoint the title gets the full column to centre in;
   the lines beneath it keep their measure. */
@media (min-width: 901px) {
  .atl-hero--full .atl-hero__copy { max-width: none; }
  .atl-hero--full .atl-hero__sub,
  .atl-hero--full .atl-hero__note { max-width: 62ch; margin-inline: auto; }
}

/* =============================================================================
   A centred masthead
   -----------------------------------------------------------------------------
   The logo sat at the left with the menu ranged beneath it. Both are now centred
   on the page: the mark on top, the eleven items in one line under it, sharing a
   single axis down the middle.

   Desktop only. Below 1180px the header is the logo and the menu button side by
   side, which is the right shape for a phone and is left as it is.
   ========================================================================== */

@media (min-width: 1181px) {
  .atl-header .atl-wrap {
    flex-direction: column;
    align-items: center;
    gap: var(--atl-s2);
  }

  .atl-header__brand {
    justify-content: center;
    width: auto;
  }

  .atl-nav {
    flex: 0 0 auto;
    width: 100%;
  }

  .atl-nav__row { justify-content: center; }

  /* Condensed, the two rows tighten towards each other rather than the logo
     shrinking away from a menu that stays put. */
  .atl-header.is-stuck .atl-wrap { gap: var(--atl-s1); }
}

/* =============================================================================
   The header no longer changes size on scroll
   -----------------------------------------------------------------------------
   Condensing it took 44px out of a bar that sits in the flow of the page, so
   everything below jumped up and the browser pulled the scroll position back
   with it — cross the threshold at 141px and you landed at 108px, moved
   backwards by a third of what you had just scrolled. That reads as the page
   sticking, which is half of what the client reported. The other half, the
   juddering, was a feedback loop and is fixed in atlantis.js.

   The condensed state is now purely a change of surface: the cream goes
   translucent, a blur comes in behind it and a shadow lifts it off the page.
   Nothing moves. The bar is a little tighter at rest to make up for no longer
   shrinking.
   ========================================================================== */

@media (min-width: 1181px) {
  .atl-header .atl-wrap,
  .atl-header.is-stuck .atl-wrap { padding-block: 12px; gap: var(--atl-s1); }
  .atl-header.is-stuck .atl-header__brand img { width: min(260px, 60vw); }
}

/* Below the menu-button breakpoint the header is not sticky at all, so the
   condensed state has nothing to do there. It was still changing the padding
   and the logo size, which moved the page by 8px on a phone. */
@media (max-width: 1180px) {
  .atl-header.is-stuck .atl-wrap { padding: var(--atl-s2); }
  .atl-header.is-stuck .atl-header__brand img { width: min(190px, 46vw); }
}


/* ===== review-navigation-css ===== */
/* Shared masthead from Bob's 8 September approval. Native details remains usable without JavaScript. */
.review-header{position:relative;z-index:1000;background:#faefd7;border-bottom:1px solid #d6bc87;padding:10px 18px 13px;color:#125183;}
.review-brand{display:flex;align-items:center;justify-content:center;gap:.2em;width:fit-content;max-width:100%;margin:0 auto 10px;font-family:Arial,sans-serif;font-size:clamp(20px,4.4vw,42px);font-weight:900;line-height:1;text-decoration:none;}
.review-brand-symbol{position:relative;display:block;flex:0 0 1.4em;width:1.4em;height:1.4em;overflow:hidden;}
.review-brand-symbol img{position:absolute;display:block;left:0;top:0;width:6.0849em;height:1.4em;max-width:none;max-height:none;}
.review-brand-name{display:block;color:#a2d2e0;font:inherit;letter-spacing:.01em;word-spacing:.1em;text-transform:uppercase;-webkit-text-stroke:.025em #37318c;text-shadow:.05em .05em 0 #37318c;white-space:nowrap;}
.review-nav{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:5px;max-width:1440px;margin:auto;}
.review-nav>a,.review-programs>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 10px;border:1px solid #ccd5d9;border-radius:4px;background:#fffaf1;color:#125183;font:600 14px/1.4 Arial,sans-serif;text-decoration:none;text-align:center;cursor:pointer;}
.review-programs{position:relative;margin:0;padding:0;border:0;}
.review-programs>summary{list-style:none;border-color:#ab813c;background:#fff5df;}
.review-programs>summary::-webkit-details-marker{display:none;}
.review-nav>a:hover,.review-programs>summary:hover{background:#fff;}
.review-nav>a[aria-current=page],.review-programs[open]>summary{background:#125183;color:#fff;}
.review-chevron{width:7px;height:7px;flex-shrink:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);}
.review-programs[open] .review-chevron{transform:translateY(2px) rotate(225deg);}
.review-program-links{position:absolute;top:100%;left:0;z-index:1001;display:none;width:310px;max-width:90vw;padding:8px;border:1px solid #ab813c;border-radius:0 0 6px 6px;background:#fffaf1;box-shadow:0 12px 28px #10273726;}
.review-programs[open]>.review-program-links{display:grid;visibility:visible;opacity:1;pointer-events:auto;}
.review-program-links>a{display:block;padding:12px 13px;border-radius:3px;color:#125183;font:600 15px/1.45 Arial,sans-serif;text-decoration:none;}
.review-program-links>a:hover,.review-program-links>a:focus-visible,.review-program-links>a[aria-current=page]{background:#e8eff4;color:#0b3157;}
.review-header :is(a,summary):focus-visible{outline:3px solid #125183;outline-offset:3px;}
@media(max-width:760px){.review-header{padding-inline:12px;}.review-programs{position:static;}.review-program-links{left:0;right:0;width:100%;max-width:100%;}.review-nav>a,.review-programs>summary{padding:7px 8px;}}


/* ===== inline ===== */
/* Review additions; original photographic assets are unchanged. */
:root{--atl-header-h:0px;}
html{scroll-padding-top:24px;}
body{overflow-wrap:break-word;}
.review-home-photo{position:relative;width:100%;margin:0;background:#102737;}
.review-home-photo>img{display:block;width:100%;height:auto;max-width:none;max-height:none;}
.review-home-branding{position:absolute;left:0;right:0;bottom:0;margin:0;padding:18px 24px;background:rgba(16,39,55,.89);color:#f2d49b;font:700 clamp(20px,2.55vw,36px)/1.35 Georgia,'Times New Roman',serif;text-align:center;white-space:nowrap;}
.review-welcome{padding:44px 24px 38px;text-align:center;background:#fbf8f2;border-bottom:1px solid #dcccaf;}
.review-welcome h1{max-width:1120px;margin:0 auto 14px;color:#0b3157;font-size:clamp(30px,3.2vw,46px);line-height:1.2;text-wrap:balance;}
.review-welcome p{margin:0 auto;max-width:65ch;color:#655e53;font-size:clamp(17px,1.5vw,21px);}
.atl-hero:not(.atl-hero--full) h1{white-space:normal;font-size:clamp(30px,3.2vw,46px);color:#fff;}
.atl-hero:not(.atl-hero--full) .atl-hero__sub{white-space:normal;color:#fff;font-weight:600;}
.atl-hero:not(.atl-hero--full) .atl-hero__note{color:#fff;}
.atl-hero__media{animation:none;transform:none;}
.atl-hero__copy>*{animation:none;opacity:1;transform:none;}
.atl-reveal{opacity:1!important;transform:none!important;}
.atl-section>.atl-wrap>.atl-head{position:static!important;}
.atl-panel,.atl-program,.atl-card{min-width:0;}
.atl-grid--4{align-items:stretch;}
.atl-panel{overflow-wrap:break-word;}
.atl-program__synopsis{font-size:17px;line-height:1.65;}
.review-recordings .atl-prose{max-width:75ch;}
.review-recording-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.review-map-section{padding:40px 24px 48px;background:#fbf8f2;}
.review-map-section>.atl-wrap{padding:0;}
.review-map-section h2{font-size:clamp(27px,2.5vw,36px);margin-bottom:16px;}
.review-map-section address{font-style:normal;margin-bottom:18px;}
.review-location-map{display:block;width:100%;height:440px;border:1px solid #dcccaf;border-radius:6px;}
.review-map-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;}
.review-map-links a{text-decoration:underline;text-underline-offset:4px;}
.review-footer-sitemap{padding:36px 24px;border-bottom:1px solid #dcccaf;color:#0b3157;}
.review-footer-sitemap h2{font-size:24px;margin-bottom:18px;}
.review-footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;}
.review-footer-grid h3{font-size:16px;margin:0 0 12px;color:#0b3157;}
.review-footer-grid ul{display:grid;gap:9px;list-style:none;margin:0;padding:0;}
.review-footer-grid a{font-size:15px;color:#0b3157;text-decoration:underline;text-underline-offset:3px;}
.atl-footer__contact>a{overflow-wrap:anywhere;}
.review-stream-steps .atl-panel{padding:26px;}
@media(max-width:900px){.review-home-branding{font-size:clamp(16px,2.65vw,24px);padding:15px 12px;}.review-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.review-welcome{padding-top:30px;padding-bottom:30px;}}
@media(max-width:600px){.review-home-branding{font-size:18px;white-space:normal;padding:12px 16px;line-height:1.45;}.review-home-branding span{white-space:nowrap;}.review-location-map{height:360px;}.review-map-section{padding-inline:16px;}.atl-hero:not(.atl-hero--full) .atl-hero__sub{font-size:18px;}.review-footer-grid{gap:28px 18px;}.review-footer-sitemap{padding:30px 18px;}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;}}


/* ===== inline ===== */
/* Readable headings, balanced content panels and unfiltered photographs. */
.atl-section > .atl-wrap > .atl-head { text-align:left; margin:0 0 26px; }
.atl-section > .atl-wrap > .atl-head::after { margin-left:0; }
.atl-section > .atl-wrap > .atl-head .atl-lede { margin-left:0; }
.atl-section > .atl-wrap > .atl-prose { margin-left:0; text-align:left; max-width:78ch; }
.atl-section > .atl-wrap > .atl-head + .atl-prose { margin-top:0; }
.atl-panel { min-height:0; height:auto; padding:26px; }
.atl-panel--roomy { padding:30px; }
.atl-panel h3 { margin-bottom:14px; line-height:1.3; }
.atl-panel p { line-height:1.65; }
.atl-panel__label { font-size:14px; }
.atl-panel__foot { padding-top:18px; }
.atl-panel:hover,.atl-program:hover,.atl-profile:hover { transform:none; }
.atl-split { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:stretch; }
.atl-split > * { min-width:0; }
.atl-split--even { grid-template-columns:repeat(2,minmax(0,1fr)); }
.review-fit-content { align-items:stretch; }
.review-fit-content > .atl-panel { height:auto; }
.atl-program__head { padding:28px 28px 22px; }
.atl-program__meta { padding:20px 28px 12px; }
.atl-program__action { padding:0 28px 28px; }
.atl-programs__final { align-items:stretch; }
.atl-programs__final > * { height:auto; }
.atl-programs__companion { align-self:stretch; }
.atl-hub__panels { margin-top:36px; }

/* The full photographs retain their original colour and clarity. */
.atl-hero::before,.atl-hero::after,.atl-hero__shot::after { content:none!important; display:none!important; }
.atl-hero,.atl-hero__shot,.atl-hero__media,.review-home-photo,.review-home-photo-image { filter:none!important; backdrop-filter:none!important; mix-blend-mode:normal; }
.atl-hero__media,.review-home-photo-image { opacity:1; }
.atl-hero__copy { background:none; backdrop-filter:none; }
.atl-hero h1,.atl-hero__sub,.atl-hero__note { text-shadow:0 2px 4px #000,1px 0 1px #263441,-1px 0 1px #263441; }
.atl-hero .atl-hero__badge { position:static; inset:auto; display:block; margin:20px 0 0; transform:none; }
.atl-hero__badge span { display:inline-flex; width:auto; height:auto; min-height:36px; padding:7px 15px; border:1px solid #d7b76b; border-radius:4px; background:#0b3157; color:#f3d9a0; font-size:14px; line-height:1.3; text-shadow:none; transform:none; animation:none; }

/* Bob's complete portrait and caption remain visible on a solid surface. */
.review-bio-layout { grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:36px; }
.review-bio-photo { margin:0; padding:0; overflow:hidden; border:1px solid #d4bf98; border-radius:8px; background:#fffaf1; color:#243746; }
.review-bio-photo > img { position:static; display:block; width:100%; height:360px; max-width:100%; opacity:1; visibility:visible; object-fit:contain; }
.review-bio-caption { padding:22px; background:#fffaf1; color:#243746; font-size:17px; line-height:1.6; }
.review-bio-caption strong { display:block; margin-bottom:6px; color:#0b3157; font-size:22px; }
.review-bio-caption p { margin:0; color:#243746; }
.review-bio-membership { display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid #d4bf98; }
.review-bio-membership img { position:static; width:64px; height:64px; object-fit:contain; }
.review-bio-membership p { font-size:15px; }
.review-recycling-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.review-recycling-summary { max-width:none!important; padding:26px 30px; background:#e8eff4; color:#243746; border:1px solid #c9d6de; border-radius:6px; }
.review-recycling-summary p:last-child { margin-bottom:0; }
.atl-section--cool,.atl-section--cool p,.atl-section--cool li { color:#243746; }
.atl-section--cool h2,.atl-section--cool h3 { color:#0b3157; }
.atl-section--cool .atl-panel__label,.atl-section--cool .atl-eyebrow { color:#795821; }

/* Keep the site map readable; the navy footer is a slim contact band. */
.atl-footer { background:#fbf8f2; color:#243746; padding:0; }
.atl-footer .review-footer-sitemap { padding-top:24px; padding-bottom:24px; background:#fbf8f2; }
.atl-footer .review-footer-sitemap h2 { margin-bottom:16px; color:#0b3157; }
.atl-footer .review-footer-grid h3,.atl-footer .review-footer-grid a { color:#0b3157; }
.atl-footer .review-footer-grid ul { display:grid; gap:3px; align-items:start; }
.atl-footer .review-footer-grid a { display:block; padding:3px 0; min-height:0; line-height:1.5; }
.atl-footer__contact,.atl-footer__bar { max-width:none; width:100%; margin:0; padding:12px max(24px,calc((100% - 1192px)/2)); background:#0b3157; color:#fff; }
.atl-footer__contact { gap:8px 22px; }
.atl-footer__bar { gap:8px 20px; }
.atl-footer__bar a,.atl-footer__contact a,.atl-footer__contact span { color:#fff; }

/* A viewport-sized viewer presents the full advert, with zoom for reading. */
.atl-lightbox { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#172633; overflow:hidden; }
.atl-lightbox[open] { display:block; animation:none; }
.atl-lightbox::backdrop { background:#172633; backdrop-filter:none; }
.atl-lightbox__body { display:flex; flex-direction:column; gap:0; width:100%; height:100%; max-height:none; padding:0; overflow:hidden; }
.atl-lightbox__toolbar { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; padding:9px 16px; background:#10212e; color:#fff; }
.atl-lightbox__toolbar p { margin:0; font-size:16px; line-height:1.35; }
.atl-lightbox__toolbar strong { display:block; color:#f3d9a0; }
.atl-lightbox__nav { flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.atl-lightbox__btn { min-height:40px; padding:8px 14px; }
.atl-lightbox__figure { flex:1; min-height:0; width:100%; margin:0; padding:8px; overflow:auto; overscroll-behavior:contain; text-align:center; }
.atl-lightbox__figure img { display:block; width:100%; height:100%; max-width:none; max-height:none; margin:0 auto; object-fit:contain; border-radius:0; box-shadow:none; cursor:zoom-in; }
.atl-lightbox.is-zoomed .atl-lightbox__figure img { width:100%; min-width:900px; height:auto; min-height:0; max-width:none; max-height:none; object-fit:initial; cursor:zoom-out; }
.atl-lightbox__close { position:static; flex:none; width:auto; height:auto; min-width:44px; min-height:40px; padding:8px 14px; border-radius:4px; font-size:16px; box-shadow:none; }
.atl-lightbox__close:hover { transform:none; }
.atl-lightbox :is(button,a):focus-visible { outline:3px solid #fff; outline-offset:2px; }
html.atl-viewer-open { overflow:hidden; }
@media(max-width:900px){.atl-split,.review-bio-layout { grid-template-columns:minmax(0,1fr); }.review-bio-photo { width:100%; max-width:480px; margin-inline:auto; }.atl-panel--roomy { padding:26px; }}
@media(max-width:600px){.review-recycling-grid { grid-template-columns:minmax(0,1fr); }.atl-panel { padding:22px; }.atl-program__head { padding:24px 22px 20px; }.atl-program__meta { padding-inline:22px; }.atl-program__action { padding-inline:22px; }.review-recycling-summary { padding:22px; }.atl-lightbox__toolbar { align-items:stretch; flex-direction:column; gap:8px; padding:8px; }.atl-lightbox__toolbar p { font-size:14px; }.atl-lightbox__nav { justify-content:space-between; gap:5px; }.atl-lightbox__btn,.atl-lightbox__close { padding:7px 10px; font-size:14px; }.atl-footer__contact,.atl-footer__bar { padding-inline:18px; }.atl-footer__bar { justify-content:center; text-align:center; }}

/* Paired panels share top and bottom edges; mobile content flows naturally. */
.atl-grid { align-items:stretch; }
.atl-grid > .atl-panel,.atl-split > .atl-panel { align-self:stretch; }
.atl-panel h4 { margin:10px 0 12px; color:#0b3157; font-size:21px; line-height:1.35; }
.atl-panel > .atl-btns:last-child { margin-top:auto; padding-top:18px; }
.review-visit-note { margin:18px 0 0; font-size:16px; }
.review-enquiry-support { display:grid; grid-template-rows:auto 1fr; gap:24px; }
.review-enquiry-layout .atl-form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.review-form-wide { grid-column:1/-1; }
.review-enquiry-layout .atl-field { min-width:0; }
.review-enquiry-layout .atl-field label { min-height:28px; }
.review-balanced-media > .atl-figure { position:relative; min-width:0; min-height:280px; padding:16px; border:1px solid #d4bf98; border-radius:8px; background:#fffaf1; }
.review-balanced-media > .atl-figure > img { position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); object-fit:contain; border:0; }
.review-bio-photo { display:flex; flex-direction:column; }
.review-bio-caption { flex:1; }
.review-certificate-layout { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); }
.review-certificate-layout > .atl-figure { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; border:1px solid #d4bf98; border-radius:8px; background:#fffaf1; }
.review-certificate-layout > .atl-figure > img { max-height:440px; width:auto; max-width:100%; object-fit:contain; }
.review-certificate-layout figcaption { max-width:34ch; text-align:center; color:#243746; }
.review-certificate-layout .atl-tags { margin-bottom:20px; }
.review-companion-image { margin:22px 0 0; }
.review-companion-image img { display:block; width:100%; height:auto; object-fit:contain; border-radius:5px; }
.review-companion-image--study img { max-height:320px; }
.review-companion-image figcaption { margin-top:10px; font-size:15px; line-height:1.5; color:#243746; }
.review-program-intro .atl-promo { display:flex; align-items:center; justify-content:center; padding:18px; border:1px solid #d4bf98; border-radius:8px; background:#fffaf1; }
.review-program-intro .atl-promo img { max-height:680px; width:100%; height:auto; object-fit:contain; }
.review-program-intro .atl-promo:hover img { transform:none; }
.review-program-booking-note { margin-top:auto!important; padding-top:18px; }
.atl-hero h1,.atl-hero--center h1,.atl-hero__sub { white-space:normal; overflow-wrap:break-word; }
.atl-hero h1,.atl-hero--center h1 { text-wrap:balance; }
.atl-hero__copy { width:100%; min-width:0; }
@media(max-width:900px){
 .review-certificate-layout { grid-template-columns:minmax(0,1fr); }
 .review-balanced-media > .atl-figure { min-height:0; }
 .review-balanced-media > .atl-figure > img { position:static; width:100%; height:auto; max-height:480px; }
 .review-program-intro .atl-promo img { max-height:620px; }
}
@media(max-width:600px){
 .review-enquiry-layout .atl-form { grid-template-columns:minmax(0,1fr); }
 .review-enquiry-support { grid-template-rows:auto; }
 .review-bio-photo > img { height:auto; max-height:420px; }
 .review-program-intro .atl-promo { padding:12px; }
}


/* ===== inline ===== */
/* Small supporting images share the page's existing cream, blue and gold palette. */
.atl-section > .atl-wrap > .atl-head.review-illustrated-heading,
.atl-head.review-illustrated-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  align-items:center;
  gap:20px 32px;
  text-align:left;
}
.atl-head.review-illustrated-heading::after { display:none; }
.review-heading-copy { min-width:0; }
.review-heading-copy > :last-child { margin-bottom:0; }
.review-heading-copy::after { content:""; display:block; width:64px; height:2px; margin-top:20px; background:#bd923e; }
.atl-head.review-illustrated-heading .atl-lede { margin-left:0; max-width:70ch; }
.review-heading-art,.review-panel-art,.review-document-art { padding:0; overflow:hidden; border:1px solid #d5bc83; border-radius:7px; background:#fffaf1; }
.review-heading-art { margin:0; width:220px; height:146px; }
.review-heading-art img,.review-panel-art img,.review-document-art img { display:block; width:100%; height:100%; object-fit:cover; filter:none; opacity:1; }
.review-panel-art { flex-shrink:0; align-self:center; width:100%; max-width:260px; height:132px; margin: auto 0 0; }
.atl-panel > .review-panel-art { margin-top:auto; }
.atl-panel > :has(+ .review-panel-art) { margin-bottom:22px; }
.atl-grid--4 .review-panel-art { height:112px; }
.review-small-art--contain img { object-fit:contain; padding:6px; }
.review-document-art { float:right; width:180px; height:120px; margin:0 0 22px 28px; }
.atl-prose--doc::after { content:""; display:block; clear:both; }
@media(max-width:700px){
 .atl-section > .atl-wrap > .atl-head.review-illustrated-heading,
 .atl-head.review-illustrated-heading { grid-template-columns:minmax(0,1fr) 160px; gap:20px; }
 .review-heading-art { width:160px; height:107px; }
}
@media(max-width:520px){
 .atl-section > .atl-wrap > .atl-head.review-illustrated-heading,
 .atl-head.review-illustrated-heading { grid-template-columns:minmax(0,1fr); gap:18px; }
 .review-heading-art { width:180px; height:120px; }
 .review-document-art { float:none; margin:0 0 24px; }
}
@media print {
 .review-heading-art,.review-panel-art,.review-document-art { break-inside:avoid; }
}

/* Wider pictures support the introductions to both program series. */
.review-program-series-page .atl-hub__panels .review-panel-art { max-width:none; width:100%; height:auto; aspect-ratio:3/2; }
.review-program-series-page .atl-hub__panels .review-panel-art img { width:100%; height:100%; object-fit:cover; }
@media(min-width:901px){
 .atl-section > .atl-wrap > .atl-head.review-program-explore-heading { grid-template-columns:minmax(0,1fr) 340px; }
 .review-program-explore-heading .review-heading-art { width:340px; height:226px; }
}

/* A welcoming venue photograph accompanies the booking-help links. */
.review-booking-help { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:center; gap:32px; }
.review-booking-help-copy { min-width:0; text-align:left; }
.review-booking-help .atl-head { margin:0 0 22px; text-align:left; }
.review-booking-help .atl-head::after { margin-left:0; }
.review-booking-help-picture { width:100%; max-width:320px; aspect-ratio:3/2; margin:0; overflow:hidden; border:1px solid #d5bc83; border-radius:7px; }
.review-booking-help-picture img { display:block; width:100%; height:100%; object-fit:cover; }
@media(max-width:700px){ .review-booking-help { grid-template-columns:minmax(0,1fr); gap:24px; } }

/* Recording information and its links stay together opposite a study image. */
.review-recording-feature,.atl-crosslink.review-recording-feature { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:center; gap:32px; }
.review-recording-feature > .atl-prose,.review-recording-feature-copy { min-width:0; max-width:none; margin:0; text-align:left; }
.review-recording-feature-picture { width:100%; max-width:320px; aspect-ratio:3/2; margin:0; overflow:hidden; border:1px solid #d5bc83; border-radius:7px; }
.review-recording-feature-picture img { display:block; width:100%; height:100%; object-fit:cover; }
@media(max-width:700px){ .review-recording-feature,.atl-crosslink.review-recording-feature { grid-template-columns:minmax(0,1fr); gap:24px; } }


/* ===== inline ===== */
/* A shared scale for supporting pictures, proportional to their content. */
.atl-section > .atl-wrap > .atl-head.review-illustrated-heading,
.atl-head.review-illustrated-heading {
  grid-template-columns:minmax(0,1fr) minmax(280px,34%);
  align-items:center;
  gap:32px;
}
.atl-section > .atl-wrap > .atl-head.review-illustrated-heading--compact,
.atl-head.review-illustrated-heading--compact {
  grid-template-columns:minmax(0,1fr) minmax(260px,28%);
}
.atl-head.review-illustrated-heading .review-heading-art {
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  min-width:0;
}
.atl-head.review-illustrated-heading--compact .review-heading-art { aspect-ratio:16/10; }
.atl-head.review-illustrated-heading .review-heading-art > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Paragraphs and pictures form one balanced row below the section heading. */
.review-paragraph-picture-row,.review-home-copy-and-picture {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
  align-items:center;
  gap:36px;
}
.review-paragraph-picture-row--brief { grid-template-columns:minmax(0,1fr) minmax(280px,33%); }
.review-paragraph-picture-row > .atl-prose,.review-home-copy-and-picture > .atl-prose {
  min-width:0;
  max-width:none;
  margin:0;
  text-align:left;
}
.review-paragraph-picture-row > .atl-prose > :last-child,.review-home-copy-and-picture > .atl-prose > :last-child { margin-bottom:0; }
.review-paragraph-picture-row > .review-paragraph-picture,
.review-home-copy-and-picture > .review-home-paragraph-picture {
  position:relative;
  align-self:stretch;
  width:100%;
  height:auto;
  min-height:240px;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid #d5bc83;
  border-radius:7px;
  background:#fffaf1;
}
.review-paragraph-picture-row--brief > .review-paragraph-picture { min-height:210px; }
.review-paragraph-picture-row > .review-paragraph-picture > img,
.review-home-copy-and-picture > .review-home-paragraph-picture > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Pictures span the inner width of cards, with a consistent shape in each row. */
.atl-panel > .review-panel-art {
  position:relative;
  align-self:stretch;
  width:100%;
  max-width:none;
  height:auto;
  aspect-ratio:3/2;
  flex-shrink:0;
  margin: auto 0 0;
}
.atl-panel > .review-panel-art--broad { aspect-ratio:16/10; }
.atl-grid--4 .atl-panel > .review-panel-art { aspect-ratio:4/3; height:auto; }
.atl-panel > .review-panel-art > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.atl-panel > :has(+ .review-panel-art) { margin-bottom:24px; }
.review-program-series-page .atl-hub__panels .review-panel-art { aspect-ratio:3/2; }
/* Give booking and recording information a substantial, aligned companion image. */
.review-booking-help,.review-recording-feature,.atl-crosslink.review-recording-feature {
  grid-template-columns:minmax(0,1fr) minmax(300px,36%);
  align-items:center;
  gap:36px;
}
.review-booking-help > .review-booking-help-picture,
.review-recording-feature > .review-recording-feature-picture {
  position:relative;
  align-self:stretch;
  width:100%;
  max-width:none;
  height:auto;
  min-height:240px;
  aspect-ratio:auto;
}
.review-booking-help-picture > img,.review-recording-feature-picture > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* The larger final program panels use their available height for the picture. */
.atl-programs__companion .review-companion-image { display:flex; flex-direction:column; flex:1; gap:12px; min-height:0; margin:24px 0 0; }
.atl-programs__companion .review-companion-image > img { display:block; width:100%; height:240px; min-height:220px; max-height:none; flex:1; object-fit:cover; }
.atl-programs__companion .review-companion-image > figcaption { flex:none; margin:0; }
/* Photographs fill their frames; complete diagrams remain readable. */
.review-artwork-complete > img { object-fit:contain!important; }
.review-balanced-media > .review-fill-venue-photo { padding:0; overflow:hidden; }
.review-balanced-media > .review-fill-venue-photo > img { inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.review-home-learning > .atl-figure { min-height:320px; }
.review-home-enquiry-picture--beside-form { position:relative; flex:1 0 240px; min-height:240px; margin-top:0; }
.review-home-enquiry-picture--beside-form > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.review-document-art { width:260px; height:174px; margin:0 0 24px 30px; }
/* Home learning artwork now fills the complete frame requested for this panel. */
.review-home-learning > .review-home-learning-picture { padding:0; overflow:hidden; }
.review-home-learning > .review-home-learning-picture > img {
  position:absolute; inset:0; width:100%; height:100%; max-height:none;
  object-fit:cover; object-position:center;
}
/* The shop's headings, copy and pictures read as connected groups. */
.review-shop-page main > .atl-section { padding-block:40px; }
.review-shop-page .atl-section > .atl-wrap > .atl-head { margin-bottom:22px; }
.review-shop-page .atl-grid { gap:24px; }
.review-shop-page .atl-grid--4 > .atl-panel { padding:20px; }
.review-shop-page .atl-grid--4 > .atl-panel > .atl-figure { margin:0 0 18px!important; }
.review-shop-page .atl-grid--4 > .atl-panel > .atl-figure > img { width:100%; height:auto; object-fit:contain; }
.review-shop-page .atl-grid--4 h3 { font-size:23px; line-height:1.25; }
.review-shop-page .atl-panel > p:last-child { margin-bottom:0; }
.review-shop-feature {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);
  gap:32px; align-items:stretch;
}
.review-shop-feature-copy { min-width:0; align-self:center; }
.review-shop-feature-copy > .atl-head { max-width:none; margin:0 0 18px; text-align:left; }
.review-shop-feature-copy > .atl-head::after { margin-left:0; }
.review-shop-feature-copy > .atl-prose { max-width:none; margin:0; text-align:left; }
.review-shop-feature-copy .atl-prose > p:last-child { margin-bottom:0; }
.review-shop-feature-copy > .atl-btns { margin-top:22px; justify-content:flex-start; }
.review-shop-feature-picture {
  position:relative; min-width:0; min-height:260px; margin:0; padding:0;
  border:1px solid #d5bc83; border-radius:7px; overflow:hidden;
}
.review-shop-feature-picture > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.review-shop-feature--compact { grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); gap:28px; }
.review-shop-feature--compact .review-shop-feature-picture { min-height:200px; }
.review-shop-page .review-shop-gallery { margin:28px 0 0; gap:24px; }
.review-shop-page .review-shop-gallery img { width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; }
.review-shop-page .review-shop-visit { margin-top:28px; }
.review-shop-visit > .atl-panel { padding:26px; }
.review-paragraph-picture-row > .review-careers-nature-picture { min-height:280px; padding:0; }
.review-careers-nature-picture > img { position:absolute; inset:0; padding:0; width:100%; height:100%; object-fit:cover; }
@media(min-width:901px){
 .review-paragraph-picture-row.review-careers-nature-row { grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr); gap:32px; }
}
.atl-section > .atl-wrap > .atl-head.review-centered-foundation { text-align:center; }
.atl-section > .atl-wrap > .atl-head.review-centered-foundation::after { margin-inline:auto; }
.review-centered-foundation > .atl-prose { margin-inline:auto; text-align:center; }
.review-centered-foundation > :is(.atl-eyebrow,h2,h3) { text-align:center; margin-inline:auto; }
/* Shared photo headers: centre all copy and place it at the bottom. */
.atl-hero,.review-home-photo.atl-hero {
  --review-header-height:clamp(460px,45vw,640px);
  height:auto; min-height:var(--review-header-height);
  margin:0; padding:0; overflow:hidden;
}
.atl-hero > .atl-hero__media {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  max-width:none; max-height:none; object-fit:cover; object-position:50% 35%;
}
.atl-hero .atl-hero__inner,.atl-hero--center .atl-hero__inner {
  height:auto; min-height:var(--review-header-height); padding-block:40px 32px;
  display:flex; align-items:flex-end; justify-content:center; text-align:center;
}
.atl-hero .atl-hero__copy,.atl-hero--center .atl-hero__copy {
  width:100%; max-width:960px; margin:0 auto; padding:0; text-align:center;
}
.atl-hero .atl-hero__copy h1 {
  margin:0 auto 18px; max-width:24ch; color:#fff;
  font-size:clamp(30px,3.2vw,46px); font-weight:700; line-height:1.15;
  letter-spacing:0; text-align:center; text-wrap:balance;
  text-shadow:0 2px 5px #152536,1px 0 1px #152536,-1px 0 1px #152536;
}
.atl-hero .atl-hero__sub {
  max-width:62ch; margin:0 auto; color:#fff; font-size:clamp(18px,1.8vw,22px);
  font-weight:600; line-height:1.45; text-align:center;
}
.atl-hero .atl-hero__sub::before { margin:0 auto 16px; background:#e4c58b; transform:none; animation:none; }
.atl-hero .atl-hero__note { max-width:65ch; margin:16px auto 0; color:#fff; font-size:18px; line-height:1.45; text-align:center; }
/* Solid white supporting lines without a shadow halo behind the lettering. */
.atl-hero .atl-hero__copy :is(.atl-hero__sub,.atl-hero__note) {
  color:#fff; opacity:1; font-weight:700;
  text-shadow:none;
}
.atl-hero .atl-hero__badge { margin:20px auto 0; text-align:center; }
.atl-hero.review-home-hero { display:flex; flex-direction:column; }
.atl-hero.review-home-hero > .atl-hero__media { object-position:50% 28%; }
.atl-hero.review-home-hero .atl-hero__inner { flex:1; min-height:0; padding-bottom:24px; }
/* Keep the branding in the photo's flow so wrapped text cannot overlap it. */
.atl-hero.review-home-hero .review-home-branding { position:relative; flex-shrink:0; width:100%; }
@media(max-width:600px){
 .atl-hero,.review-home-photo.atl-hero { --review-header-height:520px; }
 .atl-hero .atl-hero__inner { padding-block:32px 24px; }
 .atl-hero .atl-hero__copy h1 { font-size:30px; line-height:1.18; }
}
/* Five desktop columns complete the 245-item catalogue without a sparse last row. */
@media(min-width:1100px){
 #product-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
.atl-product__sample {
  display:block; padding:6px 16px 12px; color:#705327;
  font-size:12px; line-height:1.4;
}
.atl-product__card:has(.atl-product__sample) .atl-product__price { padding-bottom:0; }
/* Each pair shares header, artwork, details and action tracks, so varying
   title lengths cannot stagger the advertisements. No copy is clipped. */
.atl-programs { gap:32px; }
.atl-program__art { margin:0; padding:24px; }
.atl-program__art > img {
  display:block; width:100%; height:auto; max-width:none;
  aspect-ratio:210/297; object-fit:contain;
}
.atl-program:hover .atl-program__art > img { transform:none; }
.atl-programs__final { margin-top:32px; }
.atl-programs__final > .atl-program > .atl-program__action { margin-top:auto; }
.review-final-program-infill {
  position:relative; flex:1 0 240px; min-height:240px;
  margin:24px 24px 0; padding:0; border:1px solid #d5bc83;
  border-radius:6px; overflow:hidden;
}
.review-final-program-infill > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@supports(grid-template-rows:subgrid){
 @media(min-width:821px){
  .atl-programs:not(.atl-programs__final) > .atl-program {
    display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0;
  }
  .atl-programs:not(.atl-programs__final) .atl-program__art { align-self:start; }
  .atl-programs:not(.atl-programs__final) .atl-program__action { align-self:end; }
 }
}
/* A full-width picture follows its text when the columns stack. */
@media(max-width:900px){
 .atl-section > .atl-wrap > .atl-head.review-illustrated-heading,
 .atl-head.review-illustrated-heading,
 .atl-section > .atl-wrap > .atl-head.review-illustrated-heading--compact,
 .atl-head.review-illustrated-heading--compact { grid-template-columns:minmax(0,1fr) minmax(220px,34%); gap:24px; }
 .review-paragraph-picture-row,.review-paragraph-picture-row--brief,.review-home-copy-and-picture,
 .review-booking-help,.review-recording-feature,.atl-crosslink.review-recording-feature { grid-template-columns:minmax(0,1fr); gap:24px; }
 .review-paragraph-picture-row > .review-paragraph-picture,
 .review-home-copy-and-picture > .review-home-paragraph-picture,
 .review-booking-help > .review-booking-help-picture,
 .review-recording-feature > .review-recording-feature-picture { width:100%; min-height:0; height:auto; aspect-ratio:16/10; max-height:380px; }
 .review-balanced-media > .review-fill-venue-photo > img { position:static; width:100%; height:auto; max-height:520px; object-fit:contain; }
 .review-home-learning > .atl-figure { min-height:0; }
 .review-home-learning > .review-home-learning-picture > img { position:static; width:100%; height:auto; max-height:none; }
 .review-shop-feature,.review-shop-feature--compact { grid-template-columns:minmax(0,1fr); gap:22px; }
 .review-shop-feature-picture,.review-shop-feature--compact .review-shop-feature-picture { min-height:0; aspect-ratio:16/10; max-height:380px; }
 .atl-programs__companion .review-companion-image > img { flex:none; height:auto; min-height:0; }
}
@media(max-width:600px){
 .atl-section > .atl-wrap > .atl-head.review-illustrated-heading,
 .atl-head.review-illustrated-heading,
 .atl-section > .atl-wrap > .atl-head.review-illustrated-heading--compact,
 .atl-head.review-illustrated-heading--compact { grid-template-columns:minmax(0,1fr); gap:20px; }
 .atl-head.review-illustrated-heading .review-heading-art { width:100%; aspect-ratio:16/10; }
 .atl-grid--4 .atl-panel > .review-panel-art { aspect-ratio:16/10; }
 .review-home-enquiry-picture--beside-form { flex-basis:200px; min-height:200px; }
 .review-document-art { float:none; width:100%; max-width:360px; height:auto; aspect-ratio:3/2; margin:0 0 24px; }
 .review-shop-page main > .atl-section { padding-block:30px; }
 .review-shop-page .review-shop-gallery,.review-shop-page .review-shop-visit { margin-top:24px; }
}


/* ===== inline ===== */
/* New Atlantis Centre Lectures Website. Applied only to pages still in review.
   The approved Home page and its existing stylesheet dependencies stay intact. */
.review-remaining-page .atl-section :is(.atl-eyebrow,.atl-panel__label,.atl-hub__count) {
  font-size:clamp(20px,1.85vw,26px); font-weight:700; line-height:1.35;
  letter-spacing:.025em; text-transform:none; color:var(--atl-gold-text);
  margin-bottom:18px;
}
.review-remaining-page .atl-head { min-width:0; }
.review-remaining-page .atl-section :is(h2,h3) { text-wrap:balance; }
.review-remaining-page .atl-grid { gap:28px; align-items:stretch; }
.review-remaining-page .atl-panel { min-width:0; height:auto; }
.review-remaining-page .atl-panel > :last-child { margin-bottom:0; }
.review-remaining-page .atl-panel__foot { margin-top:auto; padding-top:22px; }

/* Keep each heading with its paragraphs, opposite a full-height photograph. */
.review-remaining-page .review-page-feature {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:32px; align-items:stretch;
}
.review-page-feature-copy { min-width:0; }
.review-page-feature-copy > .atl-head { margin:0 0 24px; text-align:left; }
.review-page-feature-copy > .atl-head::after { margin-left:0; }
.review-page-feature-copy :is(.atl-lede,.atl-prose) { max-width:none; margin-inline:0; text-align:left; }
.review-page-feature-copy > .atl-prose > :last-child { margin-bottom:0; }
.review-remaining-page .review-page-feature > figure {
  position:relative; width:100%; height:auto; min-height:280px;
  margin:0; padding:0; align-self:stretch; aspect-ratio:auto;
  border:1px solid #d5bc83; border-radius:7px; overflow:hidden;
  background:#fffaf1;
}
.review-remaining-page .review-page-feature > figure > img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* Match Home's substantial photographs and evenly spaced introduction rows. */
.review-remaining-page .atl-section > .atl-wrap > .atl-head.review-illustrated-heading {
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:32px; align-items:stretch; margin-bottom:28px;
}
.review-remaining-page .review-illustrated-heading > .review-heading-copy { align-self:center; }
.review-remaining-page .atl-head.review-illustrated-heading > .review-heading-art {
  width:100%; height:auto; min-height:280px; aspect-ratio:auto;
  align-self:stretch; margin:0; padding:0;
}
.review-remaining-page .review-page-illustrated-section { padding-top:28px; }
.review-remaining-page .review-illustrated-heading > .review-heading-art > img { object-fit:cover; }
.review-remaining-page :is(.review-booking-help,.review-recording-feature,.review-shop-feature) {
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:stretch;
}
.review-remaining-page :is(.review-booking-help-picture,.review-recording-feature-picture,.review-shop-feature-picture) {
  min-height:280px; max-width:none;
}

/* Shared heading tracks keep the paragraph starts aligned within each row. */
.review-remaining-page .review-aligned-cards > .atl-panel { display:grid; row-gap:0; }
.review-remaining-page .review-card-content { min-width:0; display:flex; flex-direction:column; }
.review-card-content > :last-child { margin-bottom:0; }
.review-card-content > .atl-btns:last-child { margin-top:auto; padding-top:22px; }
.review-card-content > :has(+ .review-panel-art) { margin-bottom:24px; }
.review-remaining-page .review-card-content > .review-panel-art {
  position:relative; width:100%; max-width:none; height:auto; aspect-ratio:3/2;
  margin:auto 0 0; align-self:stretch;
}
.review-card-content > .review-panel-art > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@supports(grid-template-rows:subgrid){
  .review-remaining-page .review-aligned-cards > .atl-panel {
    grid-template-rows:subgrid; grid-row:span 2;
  }
  .review-remaining-page .review-aligned-cards--labelled > .atl-panel { grid-row:span 3; }
  .review-remaining-page .review-aligned-cards--profiles > .atl-panel { grid-row:span 4; }
}

.review-remaining-page .review-saved-atlantis-art { aspect-ratio:3/2!important; }
.review-remaining-page .review-saved-atlantis-art > img { object-position:right center!important; }

/* Complete, consistently framed shop category labels stay on the same line. */
.review-remaining-page .review-shop-category-cards .atl-figure { aspect-ratio:300/346; }
.review-remaining-page .review-shop-category-cards .atl-figure > img {
  display:block; width:100%; height:100%; object-fit:fill;
}
.review-remaining-page .review-team-profiles .atl-portrait { height:340px; }
.review-remaining-page .review-team-profiles .atl-portrait > img { width:100%; height:100%; object-fit:contain; }

@media(max-width:900px){
  .review-remaining-page :is(.review-page-feature,.review-booking-help,.review-recording-feature,.review-shop-feature) {
    grid-template-columns:minmax(0,1fr); gap:24px;
  }
  .review-remaining-page .review-page-feature > figure,
  .review-remaining-page :is(.review-booking-help-picture,.review-recording-feature-picture,.review-shop-feature-picture) {
    min-height:0; aspect-ratio:16/10; max-height:420px;
  }
}
@media(max-width:700px){
  .review-remaining-page .atl-section > .atl-wrap > .atl-head.review-illustrated-heading {
    grid-template-columns:minmax(0,1fr); gap:24px;
  }
  .review-remaining-page .atl-head.review-illustrated-heading > .review-heading-art {
    min-height:0; aspect-ratio:16/10; max-height:420px;
  }
  .review-remaining-page .atl-grid { gap:24px; }
}
@media(max-width:600px){
  .review-remaining-page .review-aligned-cards > .atl-panel {
    display:flex; flex-direction:column; grid-row:auto;
  }
  .review-remaining-page .review-team-profiles .atl-portrait { height:auto; }
  .review-remaining-page .review-team-profiles .atl-portrait > img { height:auto; max-height:420px; }
}


/* ===== inline ===== */
/* Footer-linked page presentation follows approved Home V61 and Shop V63.
   Scoped classes keep the three approved page masters unchanged. */
.review-footer-continuation .atl-hero__inner {
  align-items:center; justify-content:center;
  padding-block:calc(var(--review-header-height) * .32 + 32px) 32px;
}
.review-footer-continuation .atl-hero .atl-hero__copy { max-width:1120px; margin:0 auto; text-align:center; }
.review-footer-continuation .atl-hero .atl-hero__copy h1 {
  margin:0 auto; max-width:30ch; font-size:clamp(30px,3.6vw,50px); line-height:1.18;
  font-weight:750; color:#fff; text-align:center; text-wrap:balance;
  text-shadow:0 1px 1px #102737,1px 0 1px #102737,-1px 0 1px #102737;
}
.review-footer-continuation .review-page-branding {
  margin:12px 0 0; padding:8px 24px; background:#102737; color:#f2d49b;
  font:700 clamp(20px,2.55vw,36px)/1.35 Georgia,"Times New Roman",serif;
  text-align:center; text-wrap:balance;
}
.review-page-branding span { white-space:nowrap; }
.review-footer-continuation .review-page-header-strip {
  margin:0; padding:14px 24px; background:var(--atlantis-blue-pale); color:var(--atlantis-navy);
  text-align:center; font-size:clamp(20px,2vw,24px); font-weight:700; line-height:1.4;
  text-wrap:balance;
}
.review-page-header-strip > span { display:block; }
.review-page-header-strip > span + span { margin-top:7px; font-size:19px; font-weight:600; }
.review-page-header-strip .review-recorded-label {
  display:inline-block; margin-top:10px; padding:5px 13px; border:1px solid #c2a36c;
  border-radius:4px; font-size:16px; background:#102737; color:#f2d49b;
}
.review-footer-continuation main > .atl-section { padding-block:clamp(36px,4.5vw,64px); }
.review-footer-continuation :is(.atl-prose,.atl-panel,li) { overflow-wrap:break-word; }
.review-footer-photo-current .atl-footer-image { margin:0; padding:0; }
.review-footer-photo-current .atl-footer-image img {
  display:block; width:100%; height:auto; min-height:0; max-height:440px;
  aspect-ratio:3/1; object-fit:cover; object-position:center;
}
/* Legal text remains in sequence, with readable panels and occasional imagery. */
.review-footer-continuation .review-policy-document { max-width:1120px; margin-inline:auto; }
.review-policy-document .review-policy-intro { max-width:80ch; margin:0 auto 36px; }
.review-policy-document .review-terms-intro { max-width:none; }
.review-policy-document .review-policy-section {
  margin:0 0 24px; padding:clamp(24px,3vw,38px); background:#fffaf1;
  border:1px solid #d8c9ad; border-radius:7px;
}
.review-policy-document .review-policy-section:nth-of-type(even) { background:#edf4f7; border-color:#c8d8e0; }
.review-policy-document .review-policy-section > :first-child { margin-top:0; }
.review-policy-document .review-policy-section > :last-child { margin-bottom:0; }
.review-policy-document .review-policy-section :is(h2,h3) { margin-top:0; text-align:left; font-size:clamp(23px,2.2vw,30px); line-height:1.3; }
.review-policy-document .review-policy-section p { font-size:19px; line-height:1.7; }
.review-policy-document .review-policy-illustrated {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.85fr); gap:32px; align-items:start;
}
.review-policy-illustrated .review-policy-copy > :last-child { margin-bottom:0; }
.review-policy-picture { margin:0; width:100%; overflow:hidden; border:1px solid #d5bc83; border-radius:6px; background:#e9f1f5; }
.review-policy-picture img { display:block; width:100%; height:100%; object-fit:cover; }
.review-policy-picture--portrait { aspect-ratio:4/5; }
.review-policy-picture--square { aspect-ratio:1; }
.review-policy-picture--landscape { aspect-ratio:3/2; }
.review-policy-panorama { margin:34px 0; aspect-ratio:3/1; }
.review-policy-intro .review-document-art { float:right; width:35%; height:auto; aspect-ratio:4/3; margin:0 0 22px 28px; }
.review-policy-section :is(a,dd) { overflow-wrap:anywhere; }
/* Site-map groups are actual link collections; no added catalogue or controls. */
.review-sitemap-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.65fr); gap:32px; align-items:center; margin-bottom:32px; }
.review-sitemap-intro h2 { margin-top:0; }
.review-sitemap-intro figure { margin:0; aspect-ratio:16/9; }
.review-sitemap-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.review-sitemap-links > li { display:flex; padding:0; margin:0; }
.review-sitemap-links a {
  display:flex; align-items:center; width:100%; padding:19px 22px; border:1px solid #c1d1da;
  border-bottom:3px solid #125183; border-radius:5px; background:#edf4f7; color:#0b3157;
  font-size:19px; line-height:1.4; text-decoration:none; min-height:74px;
}
.review-sitemap-links a:hover { background:#fff8e8; border-color:#ab813c; }
.review-sitemap-links a:focus-visible { outline:3px solid #125183; outline-offset:3px; }
.review-sitemap-programs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.review-sitemap-programs a { background:#fffaf1; }
@media(max-width:900px) {
 .review-policy-document .review-policy-illustrated { grid-template-columns:minmax(0,1fr); gap:24px; }
 .review-policy-picture--portrait,.review-policy-picture--square { aspect-ratio:16/10; max-height:380px; }
 .review-sitemap-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .review-footer-continuation .atl-hero__inner { padding-block:calc(var(--review-header-height) * .16 + 24px) 24px; }
 .review-footer-continuation .review-page-branding { padding:8px 16px; font-size:20px; }
 .review-footer-continuation .review-page-header-strip { padding:12px 16px; }
 .review-policy-intro .review-document-art { float:none; width:100%; margin:0 0 24px; }
 .review-sitemap-intro,.review-sitemap-links { grid-template-columns:minmax(0,1fr); }
 .review-policy-panorama { aspect-ratio:16/9; }
}
@media print {
 .review-page-branding,.review-page-header-strip { color:#102737!important; background:#fff!important; }
 .review-policy-section { break-inside:auto; border:0!important; background:#fff!important; padding:0!important; }
 .review-policy-section :is(h2,h3) { break-after:avoid; }
 .review-policy-picture { break-inside:avoid; }
}
.review-footer-continuation .atl-hero__media { animation:none; transform:none; object-position:50% 50%; }
.review-policy-document .review-policy-intro { display:flow-root; }
.review-footer-continuation .atl-section > .atl-wrap > .review-policy-document { max-width:1120px; }


/* ===== atlantis-shared-tab-interactions-03 ===== */
/* Atlantis Centre shared tab interaction, site-wide implementation, 17 September 2026.
   Exact motion/fill reference: approved Home Revision 09 and Shop R19 .atl-btn.
   Enqueue after page CSS; set data-atl-shared-tabs="home-shop-03" on body.
   Scope is real navigation, action buttons, collection filters and FAQ opening rows.
   Do not turn non-clickable photo captions or ordinary text into buttons.
   Component dimensions and typography remain in their existing page styles. */
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transform: none;
  transition:
    color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #0B3157;
  transform: translateY(101%);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
  color: #FFFFFF;
  border-color: #0B3157;
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(77, 71, 64, 0.07), 0 14px 34px rgba(77, 71, 64, 0.10);
}
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible)::before {
  transform: translateY(0);
}
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):focus-visible {
  outline: 3px solid #B1842F;
  outline-offset: 4px;
}
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(0);
}
/* A selected control stays filled, but returns to the normal baseline on exit.
   Hover never changes collection or route. Native click/keyboard/tap does that. */
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):is(.is-on, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .review-programs[open] > summary, .atl-accordion > details[open] > summary) {
  color: #FFFFFF;
  border-color: #0B3157;
}
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):is(.is-on, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .review-programs[open] > summary, .atl-accordion > details[open] > summary)::before {
  transform: translateY(0);
}
/* Retain each filter's size and shape. Its fill is the same moving layer as
   Home/Shop, not the old pale-blue hover plus 180ms colour switch. */
html body[data-atl-shared-tabs="home-shop-03"] .atl-filters .atl-filter {
  background: var(--atlantis-paper, #FFFEFA);
  box-shadow: none;
}
html body[data-atl-shared-tabs="home-shop-03"] .atl-filters .atl-filter span {
  transition: color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html body[data-atl-shared-tabs="home-shop-03"] .atl-filters .atl-filter:is(:hover, :focus-visible, .is-on, [aria-pressed="true"]) span {
  background: rgba(255,255,255,0.18);
  color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]),
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible, :active),
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"])::before,
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible)::before {
  transition: none !important;
  transform: none !important;
}
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"])::before { opacity: 0; }
html body[data-atl-shared-tabs="home-shop-03"] :is(
  .atl-btn, .atl-filter, .review-nav > a, .review-programs > summary,
  .review-program-links > a, .atl-nav__link, .atl-nav__toggle,
  .atl-nav__sub a, .atl-tab, [role="tab"], .atl-accordion > details > summary
):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible, .is-on, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .review-programs[open] > summary, .atl-accordion > details[open] > summary)::before { opacity: 1; }
}


/* ===== atl-current-master-live-streaming-2026-09-17 ===== */

/* CURRENT ATLANTIS CENTRE MASTER — 17 September 2026 */
body.atl-live-streaming-master-review-01 .review-page-branding{
  margin-top:-1px !important;
  position:relative !important;
  z-index:4 !important;
  box-shadow:0 -1px 0 #102737 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:26px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  color:#F2D49B !important;
  background:#102737 !important;
  letter-spacing:normal !important;
}
body.atl-live-streaming-master-review-01 .review-page-header-strip{
  color:#163F63 !important;
  font-family:Arial,Helvetica,"Helvetica Neue",sans-serif !important;
  font-weight:700 !important;
}
body.atl-live-streaming-master-review-01 main .atl-eyebrow,
body.atl-live-streaming-master-review-01 main .atl-panel__label{
  color:#163F63 !important;
  font-family:Arial,Helvetica,"Helvetica Neue",sans-serif !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1.68 !important;
  letter-spacing:.03em !important;
}
body.atl-live-streaming-master-review-01 main h3,
body.atl-live-streaming-master-review-01 main h4,
body.atl-live-streaming-master-review-01 main :is(.atl-eyebrow,.atl-panel__label) + :is(h3,h4){
  color:#163F63 !important;
  font-family:Arial,Helvetica,"Helvetica Neue",sans-serif !important;
  font-size:20px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}
body.atl-live-streaming-master-review-01 main h2{
  color:#163F63 !important;
  font-family:Arial,Helvetica,"Helvetica Neue",sans-serif !important;
  font-size:clamp(26px,2.6vw,40px) !important;
  font-weight:700 !important;
  line-height:1.18 !important;
  letter-spacing:-.01em !important;
}
body.atl-live-streaming-master-review-01 main :is(p,li,dd,dt){
  font-family:Arial,Helvetica,"Helvetica Neue",sans-serif;
  font-size:18px;
  line-height:1.68;
  color:#344658;
}

/* LOCKED SHARED FOOTER */
body.atl-live-streaming-master-review-01 .atl-footer-image{
  display:block !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}
body.atl-live-streaming-master-review-01 .atl-footer-image img{
  display:block !important;
  width:100% !important;
  height:clamp(200px,28vw,340px) !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* SITE-WIDE BLUE RAISED-TAB STANDARD */
body.atl-live-streaming-master-review-01 .review-nav > a,
body.atl-live-streaming-master-review-01 .review-programs > summary,
body.atl-live-streaming-master-review-01 .review-program-links > a,
body.atl-live-streaming-master-review-01 main .atl-btn,
body.atl-live-streaming-master-review-01 main details > summary{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:#E8EFF4 !important;
  color:#0B3157 !important;
  border:1px solid #0B3157 !important;
  border-bottom:3px solid #0B3157 !important;
  box-shadow:none !important;
  transition:
    color .5s cubic-bezier(.22,.61,.36,1),
    border-color .5s cubic-bezier(.22,.61,.36,1),
    box-shadow .5s cubic-bezier(.22,.61,.36,1),
    transform .22s cubic-bezier(.22,.61,.36,1) !important;
}
body.atl-live-streaming-master-review-01 .review-nav > a::before,
body.atl-live-streaming-master-review-01 .review-programs > summary::before,
body.atl-live-streaming-master-review-01 .review-program-links > a::before,
body.atl-live-streaming-master-review-01 main .atl-btn::before,
body.atl-live-streaming-master-review-01 main details > summary::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:#0B3157 !important;
  transform:translateY(101%) !important;
  transition:transform .5s cubic-bezier(.22,.61,.36,1) !important;
}
body.atl-live-streaming-master-review-01 :is(
  .review-nav > a,
  .review-programs > summary,
  .review-program-links > a,
  main .atl-btn,
  main details > summary
):is(:hover,:focus-visible){
  color:#fff !important;
  border-color:#0B3157 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 2px 6px rgba(77,71,64,.07),0 14px 34px rgba(77,71,64,.10) !important;
}
body.atl-live-streaming-master-review-01 :is(
  .review-nav > a,
  .review-programs > summary,
  .review-program-links > a,
  main .atl-btn,
  main details > summary
):is(:hover,:focus-visible)::before{
  transform:translateY(0) !important;
}
body.atl-live-streaming-master-review-01 .review-nav > a[aria-current=page],
body.atl-live-streaming-master-review-01 .review-programs[open] > summary,
body.atl-live-streaming-master-review-01 main details[open] > summary{
  background:#0B3157 !important;
  color:#fff !important;
}
body.atl-live-streaming-master-review-01 main .atl-btn:active,
body.atl-live-streaming-master-review-01 main details > summary:active{
  transform:translateY(0) !important;
}

/* Keep ordinary inline links as inline links */
body.atl-live-streaming-master-review-01 main p a:not(.atl-btn),
body.atl-live-streaming-master-review-01 main li a:not(.atl-btn){
  position:static !important;
  transform:none !important;
}

@media(max-width:900px){
  body.atl-live-streaming-master-review-01 .review-page-branding{
    font-size:clamp(20px,2.55vw,26px) !important;
  }
}
@media(max-width:600px){
  body.atl-live-streaming-master-review-01 .review-page-branding{font-size:20px !important;}
}
@media(prefers-reduced-motion:reduce){
  body.atl-live-streaming-master-review-01 :is(
    .review-nav > a,
    .review-programs > summary,
    .review-program-links > a,
    main .atl-btn,
    main details > summary
  ),
  body.atl-live-streaming-master-review-01 :is(
    .review-nav > a,
    .review-programs > summary,
    .review-program-links > a,
    main .atl-btn,
    main details > summary
  )::before{
    transition:none !important;
  }
}


/* ===== atl-live-streaming-review-18-header ===== */

/* Review 18: approved new Live Program Streaming hero artwork only.
   All page content below the hero remains unchanged. */
body.atl-live-streaming-master-review-18 .atl-hero {
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#FBF8F2 !important;
}
body.atl-live-streaming-master-review-18 .atl-hero > .atl-hero__media {
  position:static !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  animation:none !important;
  filter:none !important;
  opacity:1 !important;
}
/* The title/subtitle remain in the document for accessibility,
   but are visually hidden because the approved artwork already contains them. */
body.atl-live-streaming-master-review-18 .atl-hero .atl-hero__inner {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-height:0 !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}
/* Keep the Ancient Wisdom banner directly against the new hero image. */
body.atl-live-streaming-master-review-18 .review-page-branding {
  margin-top:-1px !important;
}