/* Wantirna Primary — "Under the canopy" static home.
   Everything scoped under `.sh-template_02`. */

/* Horizontal overflow clip at the body level for this template. `clip`
   keeps the behaviour of `hidden` (no horizontal scrollbar, no bleed)
   but — unlike `hidden` — doesn't make the element a scroll container,
   so the document scrolls normally without a wheel-event detour. */
body.static-home-template_02 {
  overflow-x: clip;
}

.sh-template_02 {
  /* Palette — anchored to the Wantirna uniform: deep navy, powder-blue,
     and white. Navy carries the 30% brand role (CTAs, accents, rules),
     mist + white share the 60% base, and sun gold is the 10% feature
     accent reserved for the tour highlight + current-parent stripe.
     --wa-ink-rgb mirrors --wa-ink as raw channels so rgba() alphas
     for borders, shadows, and scrims can cite the same ink token. */
  --wa-ink: #1B2252;
  --wa-ink-rgb: 27, 34, 82;
  --wa-ink-soft: #3E446E;
  --wa-navy: #1E3F8A;
  --wa-navy-deep: #152A5E;
  --wa-sun: #F4B74A;
  --wa-sun-soft: #FBD98A;
  --wa-sky-top: #D9E7F3;
  --wa-sky-mid: #A9C4E0;
  --wa-sky-bottom: #516892;
  --wa-mist: #EEF3F8;
  --wa-surface: #FFFFFF;
  --wa-surface-deep: #E3EAF2;

  /* Geometry */
  --wa-gutter: clamp(16px, 4vw, 48px);
  --wa-page-max: 1240px;
  --wa-column: min(1200px, 100% - (var(--wa-gutter) * 2));
  --wa-radius: 20px;
  --wa-radius-sm: 12px;

  /* Type */
  --wa-sans: "Noto Sans Display", "Inter", system-ui, -apple-system, sans-serif;

  font-family: var(--wa-sans);
  color: var(--wa-ink);
  min-height: 100vh;
  /* overflow-x: hidden would implicitly promote overflow-y to auto,
     turning this element into a scroll container. That caused a
     cold-scroll hitch: the first trackpad swipe hit this inner
     container, browser checked if it could scroll, found it couldn't,
     then chained to the document — swallowing the first wheel event.
     Body-level clip keeps horizontal overflow out without creating a
     scroll container on this element. */
  position: relative;

  /* Scroll-driven sky stops. JS interpolates dawn → noon → dusk
     palettes into these three variables on every scroll frame; the
     gradient lives on .sh-canvas below so only the fixed viewport
     layer repaints, not the whole document. */
  --sky-top: var(--wa-sky-top);
  --sky-mid: var(--wa-sky-mid);
  --sky-bottom: var(--wa-sky-bottom);

  /* Table section — navy header, mist borders/stripe (SHI-200) */
  --sh-section-table-header-bg: var(--wa-navy);
  --sh-section-table-header-color: #ffffff;
  --sh-section-table-border: var(--wa-mist);
  --sh-section-table-stripe-bg: var(--wa-mist);
  --sh-section-table-radius: var(--wa-radius-sm);
}

/* Top-of-page brandmark — logo + school name centered on the sky
   canvas above the mist page card. */
.sh-template_02 .sh-brandmark {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(28px, 5vw, 56px) var(--wa-gutter) clamp(20px, 3vw, 32px);
  text-align: center;
}
.sh-template_02 .sh-brandmark-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--wa-ink);
}
.sh-template_02 .sh-brandmark-logo {
  height: clamp(56px, 7vw, 80px);
  width: auto;
  display: block;
}
.sh-template_02 .sh-brandmark-name {
  font-size: clamp(14px, 1.3vw, 16px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy-deep);
}

/* Shell — shares width + centering with the mist page card, but its
   overflow stays visible so the nav's absolute dropdown panels can
   escape the page card's own overflow:hidden clip. Also carries the
   stacking-context z-index so nav (z:20) composites above the page. */
.sh-template_02 .sh-template_02-shell {
  position: relative;
  z-index: 2;
  max-width: var(--wa-page-max);
  margin: 0 auto;
}

/* Mist "page" card — the rounded, clipped content surface. Lives
   inside the shell and fills its width. The tree base + footer sit
   below it in the document (not nested inside). */
.sh-template_02 .sh-template_02-page {
  position: relative;
  background: var(--wa-mist);
  box-shadow: 0 40px 120px -30px rgba(var(--wa-ink-rgb), 0.35);
  border-radius: var(--wa-radius);
  overflow: hidden;
}

.sh-template_02 a { color: inherit; }

.sh-template_02 .sh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wa-ink);
  color: #fff;
  padding: 8px 12px;
}
.sh-template_02 .sh-skip-link:focus { left: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.sh-template_02 .sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 9999px;
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
}
.sh-template_02 .sh-btn-primary {
  background: var(--wa-navy);
  color: #fff;
}
.sh-template_02 .sh-btn-primary:hover { background: var(--wa-navy-deep); }
.sh-template_02 .sh-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.sh-template_02 .sh-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }

/* ---------- Nav ---------- */
.sh-template_02 .sh-nav {
  /* Overlay at the top of the hero card — scrolls away with the hero
     (no sticky). Transparent background so the hero photo reads through;
     nav links use white text, with the hero scrim doing the readability
     work. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
}
.sh-template_02 .sh-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.sh-template_02 .sh-nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sh-template_02 .sh-nav-logo {
  height: 56px;
  width: 56px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Mobile hamburger + drawer. On desktop the drawer is `display: contents`,
   so nav-links and nav-actions flow inside .sh-nav-inner as if unwrapped. */
.sh-template_02 .sh-nav-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(var(--wa-ink-rgb), 0.18);
  border-radius: 10px;
  padding: 8px;
  color: var(--wa-ink);
  cursor: pointer;
  margin-left: auto;
}
.sh-template_02 .sh-nav-menu-btn:hover { background: var(--wa-surface-deep); }
.sh-template_02 .sh-nav-menu-icon { width: 24px; height: 24px; display: block; }
.sh-template_02 .sh-nav-menu-line { transition: transform 220ms ease, opacity 160ms ease; transform-origin: 12px 12px; }
.sh-template_02 .sh-nav-open .sh-nav-menu-line-1 { transform: translate(0, 5px) rotate(45deg); }
.sh-template_02 .sh-nav-open .sh-nav-menu-line-2 { opacity: 0; }
.sh-template_02 .sh-nav-open .sh-nav-menu-line-3 { transform: translate(0, -5px) rotate(-45deg); }

.sh-template_02 .sh-nav-drawer { display: contents; }

.sh-template_02 .sh-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  /* Smoke-glass pill around the link group (see gardyn reference).
     Stronger fill + backdrop blur so what's behind reads as frosted
     glass. backdrop-filter isn't free, but we only apply it to the
     nav pill (not the hero scrim), so the GPU only has to blur a
     ~600×48px region per frame. Auto margins centre the pill; the
     action pills stay pinned to the right edge of nav-inner. */
  margin: 0 auto;
  padding: 6px 10px;
  background: rgba(var(--wa-ink-rgb), 0.38);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px -12px rgba(var(--wa-ink-rgb), 0.45);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.sh-template_02 .sh-nav-links > li { position: relative; }

.sh-template_02 .sh-nav-link,
.sh-template_02 .sh-nav-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(var(--wa-ink-rgb), 0.5);
  transition: background-color 150ms ease, color 150ms ease;
}
.sh-template_02 .sh-nav-link:hover,
.sh-template_02 .sh-nav-dropdown-btn:hover,
.sh-template_02 .sh-nav-dropdown[aria-expanded="true"] > .sh-nav-dropdown-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.sh-template_02 .sh-nav-chevron {
  width: 10px;
  height: 6px;
  transition: transform 150ms ease;
}
.sh-template_02 .sh-nav-dropdown-btn[aria-expanded="true"] .sh-nav-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel (top-level → white card under the nav) */
.sh-template_02 .sh-nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(var(--wa-ink-rgb), 0.08);
  border-radius: var(--wa-radius);
  box-shadow: 0 20px 60px -30px rgba(var(--wa-ink-rgb), 0.35);
  padding: 8px;
  list-style: none;
  z-index: 30;
}
.sh-template_02 .sh-nav-submenu.hidden { display: none; }
.sh-template_02 .sh-nav-submenu li { position: relative; }
.sh-template_02 .sh-nav-submenu .sh-nav-link,
.sh-template_02 .sh-nav-submenu .sh-nav-dropdown-btn {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  /* Override the on-photo white text used by top-level nav links:
     inside the white dropdown panel we need ink text with no photo
     shadow so the items are readable. */
  color: var(--wa-ink);
  text-shadow: none;
}
.sh-template_02 .sh-nav-submenu .sh-nav-link:hover,
.sh-template_02 .sh-nav-submenu .sh-nav-dropdown-btn:hover,
.sh-template_02 .sh-nav-submenu .sh-nav-dropdown[aria-expanded="true"] > .sh-nav-dropdown-btn {
  background: var(--wa-surface-deep);
  color: var(--wa-navy-deep);
}

/* Nested submenus flyout to the side */
.sh-template_02 .sh-nav-dropdown-nested > .sh-nav-submenu {
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 4px;
}
.sh-template_02 .sh-nav-dropdown-nested .sh-nav-chevron {
  transform: rotate(-90deg);
}
.sh-template_02 .sh-nav-dropdown-nested .sh-nav-dropdown-btn[aria-expanded="true"] .sh-nav-chevron {
  transform: rotate(-90deg);
}

.sh-template_02 .sh-nav-actions { display: flex; align-items: center; gap: 10px; }
.sh-template_02 .sh-nav-compass,
.sh-template_02 .sh-nav-auth {
  font-size: 14px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(var(--wa-ink-rgb), 0.38);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(var(--wa-ink-rgb), 0.5);
  box-shadow: 0 8px 24px -12px rgba(var(--wa-ink-rgb), 0.45);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.sh-template_02 .sh-nav-compass:hover,
.sh-template_02 .sh-nav-auth:hover {
  background: #fff;
  color: var(--wa-ink);
  border-color: #fff;
  text-shadow: none;
}

/* Signed-in user pill + dropdown. On the hero photo, the pill is
   ghost-styled (transparent with a white border + white text) so it
   sits on the image instead of punching a solid rectangle through it.
   Hover flips to a solid white pill with ink text, matching the other
   nav action pills. */
.sh-template_02 .sh-nav-user { position: relative; }
.sh-template_02 .sh-nav-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(var(--wa-ink-rgb), 0.38);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(var(--wa-ink-rgb), 0.5);
  box-shadow: 0 8px 24px -12px rgba(var(--wa-ink-rgb), 0.45);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
}
.sh-template_02 .sh-nav-user-btn:hover {
  background: #fff;
  color: var(--wa-ink);
  border-color: #fff;
  text-shadow: none;
  box-shadow: 0 2px 10px rgba(var(--wa-ink-rgb), 0.12);
}
.sh-template_02 .sh-nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  transition: background-color 150ms ease, color 150ms ease;
}
.sh-template_02 .sh-nav-user-btn:hover .sh-nav-user-avatar {
  background: var(--wa-surface-deep);
  color: var(--wa-ink);
}
.sh-template_02 .sh-nav-user-avatar svg { width: 18px; height: 18px; }
.sh-template_02 .sh-nav-user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.sh-template_02 .sh-nav-user-greeting { font-size: 14px; letter-spacing: -0.005em; }
.sh-template_02 .sh-nav-user-btn .sh-nav-chevron {
  width: 10px; height: 6px;
  color: currentColor;
  transition: transform 150ms ease;
}
.sh-template_02 .sh-nav-user-btn[aria-expanded="true"] .sh-nav-chevron { transform: rotate(180deg); }

.sh-template_02 .sh-nav-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(var(--wa-ink-rgb), 0.08);
  border-radius: var(--wa-radius);
  box-shadow: 0 20px 60px -30px rgba(var(--wa-ink-rgb), 0.35);
  padding: 8px;
  z-index: 30;
}
.sh-template_02 .sh-nav-user-menu.hidden { display: none; }
.sh-template_02 .sh-nav-user-identity {
  padding: 12px 12px 14px;
  margin: 0 0 6px;
  border-bottom: 1px solid rgba(var(--wa-ink-rgb), 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sh-template_02 .sh-nav-user-identity-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--wa-surface-deep);
  color: var(--wa-ink);
  flex-shrink: 0;
  overflow: hidden;
}
.sh-template_02 .sh-nav-user-identity-avatar svg { width: 22px; height: 22px; }
.sh-template_02 .sh-nav-user-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sh-template_02 .sh-nav-user-identity-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--wa-ink);
  letter-spacing: -0.005em;
}
.sh-template_02 .sh-nav-user-identity-email {
  font-size: 12.5px;
  color: var(--wa-ink-soft);
  word-break: break-all;
}
.sh-template_02 .sh-nav-user-link,
.sh-template_02 .sh-nav-user-signout {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--wa-ink);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.sh-template_02 .sh-nav-user-link:hover,
.sh-template_02 .sh-nav-user-signout:hover {
  background: var(--wa-surface-deep);
  color: var(--wa-navy-deep);
}
.sh-template_02 .sh-nav-user-signout-form { margin: 0; }

/* Mobile nav — drawer unpins the contents, stacks them vertically below */
@media (max-width: 900px) {
  .sh-template_02 .sh-nav-inner { gap: 12px; flex-wrap: nowrap; position: relative; }
  .sh-template_02 .sh-nav-menu-btn { display: inline-flex; }
  .sh-template_02 .sh-nav-drawer {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(var(--wa-ink-rgb), 0.08);
    border-radius: var(--wa-radius-sm);
    box-shadow: 0 20px 60px -30px rgba(var(--wa-ink-rgb), 0.35);
    z-index: 40;
  }
  .sh-template_02 .sh-nav-open .sh-nav-drawer { display: flex; }
  .sh-template_02 .sh-nav-drawer .sh-nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    flex: none;
    width: 100%;
  }
  .sh-template_02 .sh-nav-drawer .sh-nav-link,
  .sh-template_02 .sh-nav-drawer .sh-nav-dropdown-btn { width: 100%; padding: 10px 12px; }
  .sh-template_02 .sh-nav-drawer .sh-nav-submenu {
    position: static;
    margin: 4px 0 4px 16px;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--wa-surface-deep);
    border-radius: 0;
    padding: 4px 0 4px 8px;
    background: transparent;
  }
  .sh-template_02 .sh-nav-drawer .sh-nav-dropdown-nested > .sh-nav-submenu {
    top: auto;
    left: auto;
    margin: 4px 0 4px 16px;
  }
  .sh-template_02 .sh-nav-drawer .sh-nav-actions {
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--wa-surface-deep);
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .sh-template_02 .sh-nav-drawer .sh-nav-user { width: 100%; }
  .sh-template_02 .sh-nav-drawer .sh-nav-user-btn { width: 100%; justify-content: flex-start; }
  .sh-template_02 .sh-nav-drawer .sh-nav-user-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: 0;
    padding: 6px 0 0;
  }
}

/* ---------- Hero ---------- */
.sh-template_02 .sh-hero {
  position: relative;
  min-height: min(72vh, 720px);
  overflow: hidden;
  display: grid;
  align-items: end;
  /* Fills the mist page wrapper edge-to-edge (the wrapper already
     provides the rounded corners + shadow). Nav overlays the top. */
  width: 100%;
}
.sh-template_02 .sh-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sh-template_02 .sh-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sh-template_02 .sh-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--wa-ink-rgb), 0.08) 0%, rgba(var(--wa-ink-rgb), 0.55) 60%, rgba(var(--wa-ink-rgb), 0.85) 100%);
}
.sh-template_02 .sh-hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 8vw, 96px) var(--wa-gutter);
  max-width: 860px;
  color: #fff;
}
.sh-template_02 .sh-hero-eyebrow {
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.sh-template_02 .sh-hero-title {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 20px;
}
.sh-template_02 .sh-hero-lede {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.5;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 32px;
}
.sh-template_02 .sh-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Motion latch — hides .sh-reveal / .sh-hero-enter until GSAP
   has armed them. Script drops .sh-motion if GSAP fails or reduce-motion. */
.sh-template_02.sh-motion .sh-hero-enter,
.sh-template_02.sh-motion .sh-reveal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sh-template_02 .sh-hero-enter,
  .sh-template_02 .sh-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Quicklinks ---------- */
.sh-template_02 .sh-quicklinks {
  padding: clamp(56px, 8vw, 96px) var(--wa-gutter);
}
.sh-template_02 .sh-quicklinks-inner {
  max-width: var(--wa-column);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Tab strip — two pills centred above the panel. aria-selected drives
   the filled state; the inactive tab is an outline pill so the active
   one reads clearly without extra effort from the user. */
.sh-template_02 .sh-quicklinks-tabs {
  display: inline-flex;
  align-self: center;
  gap: 6px;
  padding: 6px;
  border-radius: 9999px;
  background: var(--wa-surface-deep);
  border: 1px solid rgba(var(--wa-ink-rgb), 0.06);
}
.sh-template_02 .sh-quicklinks-tab {
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: var(--wa-ink-soft);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.sh-template_02 .sh-quicklinks-tab:hover { color: var(--wa-ink); }
.sh-template_02 .sh-quicklinks-tab[aria-selected="true"] {
  background: var(--wa-surface);
  color: var(--wa-ink);
  box-shadow: 0 6px 18px -10px rgba(var(--wa-ink-rgb), 0.35);
}

/* Panels — the active panel sits in flow so the container hugs its
   height; the inactive panel is absolute-positioned on top of the
   same box so it doesn't add any extra vertical space. Opacity
   fades via a CSS custom property so GSAP's inline opacity on
   descendants (.sh-reveal) doesn't collide with the tab fade. */
.sh-template_02 .sh-quicklinks-panels {
  position: relative;
}
.sh-template_02 .sh-quicklinks-panel {
  opacity: var(--tab-opacity, 1);
  visibility: visible;
  transition: opacity 260ms ease, visibility 0s 0s;
  pointer-events: auto;
}
.sh-template_02 .sh-quicklinks-panel[data-active="false"] {
  position: absolute;
  inset: 0;
  --tab-opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s 220ms;
  pointer-events: none;
}

.sh-template_02 .sh-card {
  background: var(--wa-surface);
  border-radius: var(--wa-radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 20px 60px -30px rgba(var(--wa-ink-rgb), 0.35);
}
/* Per-card accent stripe — leaf for prospective, sun for current. */
.sh-template_02 .sh-quicklink {
  position: relative;
  overflow: hidden;
}
.sh-template_02 .sh-quicklink::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--wa-navy);
}
.sh-template_02 .sh-quicklink-current::before { background: var(--wa-sun); }
.sh-template_02 .sh-quicklink-cta { margin-top: 8px; }
.sh-template_02 .sh-quicklink-title {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.sh-template_02 .sh-quicklink-intro {
  color: var(--wa-ink-soft);
  margin: 0 0 24px;
  line-height: 1.55;
}

/* Prospective headline strip — three punch-facts above the path
   ladder. Bold heading + one-line lede per cell. */
.sh-template_02 .sh-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--wa-surface-deep);
  border: 1px solid var(--wa-surface-deep);
  border-radius: var(--wa-radius-sm);
  overflow: hidden;
}
.sh-template_02 .sh-highlight {
  background: var(--wa-surface);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sh-template_02 .sh-highlight-heading {
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--wa-navy-deep);
}
.sh-template_02 .sh-highlight-lede {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--wa-ink-soft);
}
@media (max-width: 620px) {
  .sh-template_02 .sh-highlights { grid-template-columns: 1fr; }
}

/* Small section kicker above each sub-block (path ladder + curriculum
   tiles) inside the prospective card. Keeps the card legible as it
   grows vertically. */
.sh-template_02 .sh-path-heading {
  margin: 8px 0 12px;
}
.sh-template_02 .sh-path-kicker {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy-deep);
}

/* Curriculum + enrichment tile grid — 3 across on wide, 2 on mid, 1
   on narrow. Each tile is a compact labelled link into a CMS subject
   page. Surface-deep background so the tiles sit distinct from the
   mist card behind them. */
.sh-template_02 .sh-curriculum-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) { .sh-template_02 .sh-curriculum-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .sh-template_02 .sh-curriculum-grid { grid-template-columns: 1fr; } }

.sh-template_02 .sh-curriculum-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--wa-radius-sm);
  background: var(--wa-surface-deep);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
  height: 100%;
}
.sh-template_02 .sh-curriculum-link:hover {
  background: var(--wa-surface);
  border-color: var(--wa-navy);
  transform: translateY(-1px);
}
/* Static variant — non-linked tile when the CMS page isn't published.
   Same shape, no hover affordance, slight opacity so the eye doesn't
   read it as interactive. */
.sh-template_02 .sh-curriculum-link-static {
  cursor: default;
  opacity: 0.85;
}
.sh-template_02 .sh-curriculum-link-static:hover {
  background: var(--wa-surface-deep);
  border-color: transparent;
  transform: none;
}
.sh-template_02 .sh-curriculum-label {
  font-weight: 700;
  color: var(--wa-ink);
  font-size: 15px;
}
.sh-template_02 .sh-curriculum-line {
  color: var(--wa-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* Prospective-parent path ladder — each row is a link out to a real
   CMS page (vision-and-values, how-we-teach-and-support, etc). Label
   + blurb stack on narrow screens; on wide they form a 2-col grid. */
.sh-template_02 .sh-path-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 2px; }
.sh-template_02 .sh-path-link {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wa-surface-deep);
  text-decoration: none;
  transition: color 120ms ease;
}
.sh-template_02 .sh-path-link:hover .sh-path-label,
.sh-template_02 .sh-path-link:hover .sh-path-arrow { color: var(--wa-navy-deep); }
.sh-template_02 .sh-path-label { font-weight: 700; color: var(--wa-ink); }
.sh-template_02 .sh-path-line  { color: var(--wa-ink-soft); font-size: 14.5px; line-height: 1.45; }
.sh-template_02 .sh-path-arrow { color: var(--wa-navy-deep); font-size: 18px; transition: transform 120ms ease; }
.sh-template_02 .sh-path-link:hover .sh-path-arrow { transform: translateX(3px); }

/* Current-parent school-hours strip — a compact 4-up cell grid with
   each cell stacking label + time. Reads as a schedule at a glance. */
.sh-template_02 .sh-day-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-bottom: 20px;
  background: var(--wa-surface-deep);
  border-radius: var(--wa-radius-sm);
  overflow: hidden;
  border: 1px solid var(--wa-surface-deep);
}
.sh-template_02 .sh-day-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--wa-surface);
}
.sh-template_02 .sh-day-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy-deep);
}
.sh-template_02 .sh-day-time {
  font-size: 14.5px;
  color: var(--wa-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (max-width: 520px) {
  .sh-template_02 .sh-day-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Current-parent quick-access grid — Lunch orders / Brain food /
   Uniforms. Plain surface-deep tiles with a trailing chevron on
   hover to telegraph the external or page link. */
.sh-template_02 .sh-quick-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 520px) {
  .sh-template_02 .sh-quick-grid { grid-template-columns: 1fr; }
}
.sh-template_02 .sh-quick-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--wa-radius-sm);
  background: var(--wa-surface-deep);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 120ms ease, background-color 120ms ease;
  height: 100%;
}
.sh-template_02 .sh-quick-link:hover {
  background: var(--wa-surface);
  border-color: var(--wa-navy);
}
.sh-template_02 .sh-quick-label {
  font-weight: 700;
  color: var(--wa-ink);
  font-size: 14.5px;
}
.sh-template_02 .sh-quick-blurb {
  color: var(--wa-ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

/* Portal buttons — each button wraps its vendor's own logo, so the
   button is essentially a branded pill sized around the mark. The
   Compass button uses Compass's blue; the Kidsoft button uses its
   navy. Both lift on hover for tactile feedback. */
.sh-template_02 .sh-portal-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 520px) { .sh-template_02 .sh-portal-buttons { grid-template-columns: 1fr; } }

.sh-template_02 .sh-portal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  min-height: 68px;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.sh-template_02 .sh-portal-btn:hover { transform: translateY(-1px); }

/* Portal buttons — third-party tools (Compass, Kidsoft). Both use
   the school navy as the fill so they read as part of the same palette
   as the rest of the page; the embedded vendor logo carries the
   third-party identity. */
.sh-template_02 .sh-portal-btn-compass {
  background: var(--wa-navy);
  border-color: var(--wa-navy);
}
.sh-template_02 .sh-portal-btn-compass:hover {
  background: var(--wa-navy-deep);
  border-color: var(--wa-navy-deep);
  box-shadow: 0 8px 20px rgba(30, 63, 138, 0.28);
}
.sh-template_02 .sh-portal-logo-compass { height: 28px; width: auto; max-width: 100%; display: block; }

.sh-template_02 .sh-portal-btn-kidsoft {
  background: var(--wa-navy);
  border-color: var(--wa-navy);
}
.sh-template_02 .sh-portal-btn-kidsoft:hover {
  background: var(--wa-navy-deep);
  border-color: var(--wa-navy-deep);
  box-shadow: 0 8px 20px rgba(30, 63, 138, 0.28);
}
.sh-template_02 .sh-portal-logo-kidsoft { height: 34px; width: auto; max-width: 100%; display: block; }

/* Current-parent content widgets — Announcements / Newsletters /
   Events (each gated by its CMS toggle). Stacks on narrow viewports.
   The inner widget body is a turbo frame that lazy-loads from its
   index route; the .pub-list + .pub-card styles come from the shared
   publication-card CSS. */
.sh-template_02 .sh-current-widgets {
  display: grid;
  gap: 20px;
  margin: 4px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--wa-surface-deep);
}
.sh-template_02 .sh-current-widget { display: flex; flex-direction: column; gap: 10px; }
.sh-template_02 .sh-current-widget-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sh-template_02 .sh-current-widget-title {
  font-size: 16px;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--wa-ink);
  margin: 0;
}
.sh-template_02 .sh-current-widget-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--wa-navy-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sh-template_02 .sh-current-widget-body { min-width: 0; }

/* Term dates — a hero spotlight for the active (or next) term and
   a row of three compact chips for the rest. The spotlight fills its
   own row via grid-column: 1 / -1; chips flow as 1fr each in a
   3-column track below, stacking on narrow viewports. Countdown
   copy ("Ends in N days") is the only sun-gold moment inside this
   card — kept rare so the 10% accent still earns its weight. */
.sh-template_02 .sh-terms-block { border-top: 1px solid var(--wa-surface-deep); padding-top: 20px; margin-top: 4px; }
.sh-template_02 .sh-terms-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.sh-template_02 .sh-terms-heading { font-weight: 700; letter-spacing: 0.02em; }
.sh-template_02 .sh-terms-year    { color: var(--wa-ink-soft); font-weight: 600; }

.sh-template_02 .sh-terms {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Spotlight — filled navy card, white type, sun-gold countdown. */
.sh-template_02 .sh-term-spotlight {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  background: var(--wa-navy);
  color: #fff;
  border-radius: var(--wa-radius-sm);
  box-shadow: 0 10px 28px -16px rgba(var(--wa-ink-rgb), 0.45);
}
.sh-template_02 .sh-term-spotlight .sh-term-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.78;
}
.sh-template_02 .sh-term-spotlight .sh-term-label {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.sh-template_02 .sh-term-spotlight .sh-term-range {
  font-size: 14.5px;
  opacity: 0.95;
  line-height: 1.35;
}
.sh-template_02 .sh-term-spotlight .sh-term-sep {
  padding: 0 6px;
  opacity: 0.7;
}
.sh-template_02 .sh-term-spotlight .sh-term-countdown {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--wa-sun-soft);
}

/* Chips — lightweight cards for the non-spotlight terms. Past terms
   fade out, upcoming ones sit on a mist tint, the (unusual) case of
   a second current term keeps the default white surface. */
.sh-template_02 .sh-term-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--wa-surface);
  border: 1px solid var(--wa-surface-deep);
  border-radius: var(--wa-radius-sm);
  min-width: 0;
}
.sh-template_02 .sh-term-chip .sh-term-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--wa-navy-deep);
}
.sh-template_02 .sh-term-chip .sh-term-range {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--wa-ink-soft);
}
.sh-template_02 .sh-term-chip .sh-term-sep {
  padding: 0 4px;
  color: var(--wa-navy);
  opacity: 0.6;
}
.sh-template_02 .sh-term-chip.sh-term-state-past {
  background: transparent;
  border-color: transparent;
  opacity: 0.55;
}
.sh-template_02 .sh-term-chip.sh-term-state-past .sh-term-label {
  color: var(--wa-ink-soft);
}
.sh-template_02 .sh-term-chip.sh-term-state-upcoming {
  background: var(--wa-mist);
  border-color: rgba(var(--wa-ink-rgb), 0.08);
}

@media (max-width: 520px) {
  .sh-template_02 .sh-terms { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sh-template_02 .sh-path-link        { grid-template-columns: 1fr auto; }
  .sh-template_02 .sh-path-link .sh-path-line { grid-column: 1 / -1; }
}

/* ---------- Section heads (shared) ---------- */
.sh-template_02 .sh-section-kicker {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy-deep);
  margin: 0 0 12px;
}
.sh-template_02 .sh-section-title {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
}

/* ---------- Values (CARE) — four cards on a soft surface band. Each
   value carries its own accent color on the badge ring + underline
   rule + title, lifted from the existing Wantirna site. ---------- */
.sh-template_02 .sh-values {
  padding: clamp(48px, 8vw, 96px) var(--wa-gutter);
  background: var(--wa-surface-deep);
}
.sh-template_02 .sh-values-inner {
  max-width: var(--wa-column);
  margin: 0 auto;
}
.sh-template_02 .sh-values-header {
  margin-bottom: clamp(24px, 4vw, 40px);
  max-width: 60ch;
}
.sh-template_02 .sh-values-lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--wa-ink-soft);
}
.sh-template_02 .sh-values-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
@media (max-width: 900px) { .sh-template_02 .sh-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sh-template_02 .sh-values-grid { grid-template-columns: 1fr; } }

.sh-template_02 .sh-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  background: var(--wa-surface);
  border-radius: var(--wa-radius-sm);
  border: 1px solid rgba(var(--wa-ink-rgb), 0.06);
}
.sh-template_02 .sh-value-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 9999px;
  border: 4px solid var(--sh-value-accent, var(--wa-navy));
  color: var(--sh-value-accent, var(--wa-navy));
  background: #fff;
}
.sh-template_02 .sh-value-badge svg { width: 38px; height: 38px; display: block; }
.sh-template_02 .sh-value-title {
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--sh-value-accent, var(--wa-navy));
  margin: 0;
}
.sh-template_02 .sh-value-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--sh-value-accent, var(--wa-navy));
  border-radius: 2px;
}
.sh-template_02 .sh-value-copy {
  font-size: 15px;
  line-height: 1.55;
  color: var(--wa-ink-soft);
  margin: 0;
}

/* Per-value accent token — all four CARE values share the school
   navy so the group reads as one brand voice. The legacy slug names
   (blue/sun/coral/leaf) are preserved so the helper + test contract
   stays stable; visually they now resolve to the same navy. */
.sh-template_02 .sh-value-blue,
.sh-template_02 .sh-value-sun,
.sh-template_02 .sh-value-coral,
.sh-template_02 .sh-value-leaf { --sh-value-accent: var(--wa-navy); }

/* Prose content styling for slide-based values — maps markdown h2 + p
   to the legacy .sh-value-title + .sh-value-copy typography. */
.sh-template_02 .sh-value-prose h2 {
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--sh-value-accent, var(--wa-navy));
  margin: 0;
  order: 1; /* position after badge, before rule */
}
.sh-template_02 .sh-value-prose p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--wa-ink-soft);
  margin: 0;
  order: 3; /* position after rule */
}

/* ---------- School Tours — two-column band, copy left + date list right ---------- */
.sh-template_02 .sh-tours {
  padding: clamp(48px, 8vw, 96px) var(--wa-gutter);
}
.sh-template_02 .sh-tours-inner {
  max-width: var(--wa-column);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 760px) {
  .sh-template_02 .sh-tours-inner { grid-template-columns: 1fr; }
}
.sh-template_02 .sh-tours-copy { max-width: 50ch; }
.sh-template_02 .sh-tours-lede {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--wa-ink-soft);
  margin: 12px 0 24px;
}
/* Dates panel — surface-deep card holding the header strip + the
   list of tour dates. Each tour is a flat card with a calendar-page
   chip on the left (month abbreviation over big day number) and the
   day name + time stacked on the right. Featured Open Night sits at
   the top with a soft sun-washed background and the sun symbol mark
   instead of a chip, so it reads as the anchor moment of the list. */
.sh-template_02 .sh-tours-dates {
  background: var(--wa-surface-deep);
  border-radius: var(--wa-radius);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(var(--wa-ink-rgb), 0.06);
}
.sh-template_02 .sh-tours-dates-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--wa-ink-rgb), 0.08);
}
.sh-template_02 .sh-tours-dates-kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--wa-navy-deep);
}
.sh-template_02 .sh-tours-dates-year {
  font-weight: 700;
  color: var(--wa-ink-soft);
  font-size: 14px;
}

.sh-template_02 .sh-tour-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* Regular tour row — chip on the left, details on the right. */
.sh-template_02 .sh-tour {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--wa-surface);
  border-radius: var(--wa-radius-sm);
  border: 1px solid rgba(var(--wa-ink-rgb), 0.06);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.sh-template_02 .sh-tour:hover {
  transform: translateY(-1px);
  border-color: var(--wa-navy);
  box-shadow: 0 8px 22px -14px rgba(var(--wa-ink-rgb), 0.28);
}

/* Calendar-page chip — small two-tier tile with a leaf-coloured band
   above the day number, reading like a tear-off calendar page. */
.sh-template_02 .sh-tour-chip {
  flex-shrink: 0;
  width: 54px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--wa-ink-rgb), 0.08);
  text-align: center;
  background: #fff;
  line-height: 1;
}
.sh-template_02 .sh-tour-chip-month {
  display: block;
  padding: 4px 0 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--wa-navy-deep);
  color: #fff;
}
.sh-template_02 .sh-tour-chip-day {
  display: block;
  padding: 8px 0 9px;
  font-size: 22px;
  font-weight: 700;
  color: var(--wa-ink);
  letter-spacing: -0.02em;
}

/* Right-hand body — day name on top, full date + time beneath. */
.sh-template_02 .sh-tour-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sh-template_02 .sh-tour .sh-tour-day {
  font-weight: 700;
  color: var(--wa-ink);
  font-size: 15px;
  letter-spacing: -0.005em;
}
.sh-template_02 .sh-tour-date-full {
  font-size: 13.5px;
  color: var(--wa-ink-soft);
  line-height: 1.35;
}
.sh-template_02 .sh-tour-sep { margin: 0 4px; color: var(--wa-ink-soft); }

/* Featured "Open Night" row — warm sun-washed wrap with the sun
   symbol standing in for the chip. Uses the same outer shape as
   regular rows but with stronger colour + a richer type treatment
   so it anchors the list. */
.sh-template_02 .sh-tour-feature {
  padding: 14px 16px;
  background: linear-gradient(135deg,
    rgba(251, 217, 138, 0.35) 0%,
    rgba(244, 183, 74, 0.18) 100%);
  border-color: rgba(244, 183, 74, 0.45);
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 2px;
}
.sh-template_02 .sh-tour-feature-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--wa-sun);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sh-template_02 .sh-tour-feature-mark svg { width: 100%; height: 100%; display: block; }
.sh-template_02 .sh-tour-feature-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sh-template_02 .sh-tour-feature .sh-tour-label {
  font-weight: 700;
  font-size: 16px;
  color: var(--wa-ink);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.sh-template_02 .sh-tour-feature .sh-tour-when {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
  color: var(--wa-ink);
}
.sh-template_02 .sh-tour-feature .sh-tour-when .sh-tour-day {
  font-weight: 600;
  color: var(--wa-ink);
}

/* ---------- Testimonials — horizontal marquee of quote cards. The
   track is duplicated in markup (second pass is aria-hidden) and
   animated with a single GPU transform from 0 → -50%. That makes the
   transition from the end of the list back to the start seamless:
   when the clone reaches position 0, the animation loops and we're
   visually back where we started. Edge fades (mask-image) let cards
   slide in/out of view softly. Hover + off-screen pause the animation
   so we don't burn compositor cycles when nobody is reading. ---------- */
.sh-template_02 .sh-testimonials {
  padding: clamp(48px, 8vw, 96px) 0;
  overflow: hidden;
}
.sh-template_02 .sh-testimonials-inner {
  max-width: var(--wa-column);
  margin: 0 auto clamp(24px, 4vw, 40px);
  padding: 0 var(--wa-gutter);
  text-align: center;
}
.sh-template_02 .sh-testimonials-header { max-width: 60ch; margin: 0 auto; }

.sh-template_02 .sh-testimonials-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Soft edge fade so cards enter/exit off-screen instead of hard
     clipping. Fully opaque in the middle, transparent at ±5% of the
     width. -webkit- prefix for older Safari. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.sh-template_02 .sh-testimonials-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 24px;
  width: max-content;
  /* 70s for the full 2× cycle keeps us around 4s per card passing
     the viewport centre — long enough to read, short enough to feel
     alive. `will-change` promotes the track to its own GPU layer so
     the animation is composite-only. */
  animation: sh-testimonials-marquee 70s linear infinite;
  will-change: transform;
}
@keyframes sh-testimonials-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.sh-template_02 .sh-testimonials-marquee:hover .sh-testimonials-track,
.sh-template_02 .sh-testimonials-marquee[data-paused="true"] .sh-testimonials-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .sh-template_02 .sh-testimonials-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: var(--wa-column);
    margin: 0 auto;
    padding: 0 var(--wa-gutter);
  }
  .sh-template_02 .sh-testimonial-card[aria-hidden="true"] { display: none; }
}

.sh-template_02 .sh-testimonial-card {
  flex: 0 0 clamp(280px, 32vw, 420px);
  background: var(--wa-surface);
  border-radius: var(--wa-radius);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: 0 20px 60px -40px rgba(var(--wa-ink-rgb), 0.25);
  border: 1px solid rgba(var(--wa-ink-rgb), 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sh-template_02 .sh-testimonial-mark {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--wa-navy);
  opacity: 0.5;
  flex-shrink: 0;
}
.sh-template_02 .sh-testimonial-mark svg { width: 100%; height: 100%; }
.sh-template_02 .sh-testimonial-quote {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--wa-ink);
  margin: 0;
  font-weight: 500;
  /* Six-line clamp keeps cards visually consistent — the longest
     quote would otherwise push a card ~1.6× the height of the
     shortest, making the track look lumpy as it scrolls. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
          line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-template_02 .sh-testimonial-meta {
  margin: auto 0 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--wa-ink-soft);
  padding-top: 12px;
  border-top: 1px solid rgba(var(--wa-ink-rgb), 0.06);
}
.sh-template_02 .sh-testimonial-name { font-weight: 700; color: var(--wa-ink); }
.sh-template_02 .sh-testimonial-dash { color: var(--wa-navy-deep); }

/* ---------- Enquire ---------- */
.sh-template_02 .sh-enquire {
  padding: clamp(48px, 8vw, 96px) var(--wa-gutter);
}
.sh-template_02 .sh-enquire-inner {
  max-width: var(--wa-column);
  margin: 0 auto;
  background: var(--wa-surface);
  border-radius: var(--wa-radius);
  padding: clamp(32px, 5vw, 64px);
  box-shadow: 0 30px 80px -40px rgba(var(--wa-ink-rgb), 0.45);
}
.sh-template_02 .sh-enquire-lede {
  color: var(--wa-ink-soft);
  font-size: 17px;
  max-width: 56ch;
  margin: 16px 0 32px;
}
.sh-template_02 .sh-enquire-form { min-width: 0; }

/* ---------- Find us ---------- */
.sh-template_02 .sh-findus { padding: clamp(48px, 8vw, 96px) var(--wa-gutter); }
.sh-template_02 .sh-findus-inner {
  max-width: var(--wa-column);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  background: var(--wa-surface);
  border-radius: var(--wa-radius);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 30px 80px -40px rgba(var(--wa-ink-rgb), 0.45);
}
.sh-template_02 .sh-findus-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}
.sh-template_02 .sh-findus-intro { color: var(--wa-ink-soft); font-size: 17px; margin: 0; }
.sh-template_02 .sh-findus-details {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
.sh-template_02 .sh-findus-detail dt {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wa-navy-deep);
  font-weight: 700;
  margin: 0 0 4px;
}
.sh-template_02 .sh-findus-detail dd { margin: 0; font-size: 16px; }
.sh-template_02 .sh-findus-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.sh-template_02 .sh-findus-map {
  position: relative;
  border-radius: var(--wa-radius-sm);
  overflow: hidden;
  min-height: 360px;
  border: 1px solid var(--wa-surface-deep);
}
.sh-template_02 .sh-findus-iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0;
}
@media (max-width: 900px) {
  .sh-template_02 .sh-findus-inner { grid-template-columns: 1fr; }
  .sh-template_02 .sh-findus-map   { min-height: 280px; }
}

/* ---------- Footer ---------- */
.sh-template_02 .sh-footer {
  background: var(--wa-sky-bottom);
  color: rgba(255, 255, 255, 0.92);
  padding: clamp(56px, 8vw, 88px) var(--wa-gutter) 32px;
}
.sh-template_02 .sh-footer-inner {
  max-width: var(--wa-column);
  margin: 0 auto;
}
.sh-template_02 .sh-footer-ack {
  margin-bottom: clamp(32px, 6vw, 56px);
  padding-bottom: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sh-template_02 .sh-footer-ack .acknowledgement-of-country {
  color: rgba(255, 255, 255, 0.92);
  max-width: 72ch;
}
.sh-template_02 .sh-footer-ack .ack-heading {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--wa-sun-soft);
}
.sh-template_02 .sh-footer-ack .ack-body {
  margin: 0;
  line-height: 1.55;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
}
.sh-template_02 .sh-footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr;
  gap: 48px;
}
.sh-template_02 .sh-footer-logo { max-height: 56px; width: auto; }
.sh-template_02 .sh-footer-legal { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.sh-template_02 .sh-footer-heading {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 12px; color: var(--wa-sun-soft);
}
.sh-template_02 .sh-footer-sitemap ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sh-template_02 .sh-footer-sitemap a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.sh-template_02 .sh-footer-sitemap a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 760px) {
  .sh-template_02 .sh-footer-top { grid-template-columns: 1fr; }
}

/* ---------- Canvas — fixed decor behind everything (z:0), including the
   mist page (z:1). Sun + static ink-blobs + gold flecks, all visible
   only in the gutters beside the centered page column. */
.sh-template_02 .sh-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* The sky gradient lives here (not on .sh-template_02) so scroll-driven
     CSS-var updates only repaint the viewport-sized canvas layer
     rather than the whole document-tall template_02 wrapper. */
  background: linear-gradient(to bottom,
    var(--sky-top) 0%,
    var(--sky-mid) 55%,
    var(--sky-bottom) 100%);
  /* Canvas itself is non-interactive, but the background still paints. */
}
/* Only the sun inside .sh-canvas needs pointer-events: none (the canvas
   now carries the sky background, and pointer-events on the parent
   would also affect any descendant scroll behavior). */
.sh-template_02 .sh-canvas > * { pointer-events: none; }
/* Lift main + footer above the fixed sky canvas (z:0) and canopy
   (z:1) via a higher z-index on a positioned ancestor. Nav is
   intentionally excluded here — it stays position:absolute from its
   own rule so it overlays the hero instead of taking flow space. */
.sh-template_02 .sh-main,
.sh-template_02 .sh-footer { position: relative; z-index: 2; }

/* Main has zero padding/margin so the hero fills the mist page edge-to-edge.
   Each section below the hero carries its own padding. */
.sh-template_02 .sh-main { margin: 0; padding: 0; }

/* Sun — a single glowing orb. The inline script updates --sun-x, --sun-y,
   and --sun-strength each frame from document scroll progress. Strength
   controls opacity, scale, and glow intensity so the sun visibly rises
   (faint), crests (bright), and sets (faint) as you read down the page. */
.sh-template_02 .sh-canvas-sun {
  position: absolute;
  width: clamp(220px, 30vw, 360px);
  aspect-ratio: 1 / 1;
  left: 0;
  top: 0;
  /* Move the sun via transform only — GPU-composited, no per-frame
     layout/paint. Scale + opacity are also cheap on the compositor. */
  transform: translate(var(--sun-x, 4vw), var(--sun-y, 60vh))
             translate(-50%, -50%)
             scale(calc(0.8 + var(--sun-strength, 0.2) * 0.35));
  opacity: calc(0.35 + var(--sun-strength, 0.2) * 0.65);
  will-change: transform, opacity;
  /* Fixed drop-shadow (doesn't animate) — cheap repaint, one layer. */
  filter: drop-shadow(0 0 36px rgba(244, 183, 74, 0.55));
}
.sh-template_02 .sh-canvas-sun svg { width: 100%; height: 100%; }

/* Top canopy — watercolor tree PNG anchored to the top of the page.
   Uses object-fit: cover with object-position: top center so the
   canopy portion of the image fills the container. position: absolute
   (not fixed) so the canopy scrolls up out of view with the hero as
   the user reads down the page. */
.sh-template_02 .sh-canvas-tree {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0.92;
  /* Above .sh-canvas (which now carries the sky gradient at z:0) but
     below the mist page (z:2). The canopy needs to paint over the sky. */
  z-index: 1;
}
.sh-template_02 .sh-canvas-tree-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tree base — the trunk + roots portion of the same PNG, rendered as
   a band between the mist page bottom and the footer. Sits on the
   sky canvas (visible in gutters around the trunk). Slightly shorter
   than before to trim a little off the top of the stump, with a small
   negative margin-bottom that pulls the band down to sit closer to
   the footer. */
.sh-template_02 .sh-tree-base {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wa-page-max);
  margin: 0 auto -16px;
  height: clamp(180px, 22vw, 280px);
  pointer-events: none;
}
.sh-template_02 .sh-tree-base-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

@media (max-width: 900px) {
  /* Canvas decor hides when the mist page fills the viewport — there's
     no gutter to put the tree in below the 1240px page max-width. */
  .sh-template_02 .sh-canvas-sun,
  .sh-template_02 .sh-canvas-tree { display: none; }
  .sh-template_02 .sh-tree-base   { height: clamp(140px, 22vw, 220px); }
}

/* ---------- App store badges (Bluedesk parent app) ---------- */
.sh-template_02 .sh-footer-apps {
  margin-top: 24px;
}
.sh-template_02 .sh-footer-apps-blurb {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.85;
  max-width: 320px;
}
.sh-template_02 .sh-footer-apps-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sh-template_02 .sh-app-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
  transition: transform 120ms ease;
}
.sh-template_02 .sh-app-badge svg {
  display: block;
  height: 40px;
  width: auto;
}
.sh-template_02 .sh-app-badge:hover { transform: translateY(-1px); }

/* ==========================================================================
   Inner-page (secondary page) layout — `/p/<slug>` rendering
   --------------------------------------------------------------------------
   Renders bespoke "journal" components that match the Wantirna voice:
   navy + sky + sun-gold + mist palette, Noto Sans Display sans, the same
   gradient-scrim hero feel the homepage uses, and tracked uppercase
   eyebrows. No rotation, no script font, no marker squiggles — the
   homepage stays calm and editorial, so inner pages do too.
   ========================================================================== */

/* Inner pages render through the same .sh-template_02-shell + .sh-template_02-page
   structure as the homepage (provided by _inner_chrome.slim), so the nav
   keeps its homepage shape — absolute glass-pill overlay on top of the
   navy hero band — without per-page overrides. */

/* "More" overflow dropdown panel — uses the existing nav-submenu chrome
   so it inherits the white card + ink-toned link styles already defined
   above. The selector below just nails the explicit class added by the
   inner-page _nav.slim partial. */
.sh-template_02 .sh-nav-overflow > .sh-nav-submenu {
  left: 0;
  min-width: 220px;
}

/* ---------- Hero band ---------- */
/* Mirrors the homepage hero's voice: deep navy band the colour of the
   bottom of the homepage scrim, white type, tracked uppercase eyebrow,
   and a thin sun-gold rule for the single 10% accent moment. The
   subtle radial glow at the top echoes the homepage's sun arc without
   actually staging the sun. */
.sh-template_02 .sh-journal-hero {
  padding: 0;
  background: var(--wa-mist);
}
.sh-template_02 .sh-journal-hero-band {
  position: relative;
  background: var(--wa-navy-deep);
  background-image:
    radial-gradient(120% 80% at 70% 0%, rgba(244, 183, 74, 0.18) 0%, rgba(244, 183, 74, 0) 55%),
    linear-gradient(180deg, var(--wa-navy) 0%, var(--wa-navy-deep) 100%);
  color: #fff;
  padding: clamp(48px, 8vw, 96px) var(--wa-gutter) clamp(56px, 8vw, 88px);
  overflow: hidden;
}
.sh-template_02 .sh-journal-hero-inner {
  max-width: var(--wa-column);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sh-template_02 .sh-journal-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.sh-template_02 .sh-journal-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
  padding-bottom: 1px;
}
.sh-template_02 .sh-journal-breadcrumb a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.45);
}
.sh-template_02 .sh-journal-breadcrumb-sep { opacity: 0.5; }
.sh-template_02 .sh-journal-breadcrumb [aria-current="page"] { color: #fff; }

.sh-template_02 .sh-journal-hero-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--wa-sun);
  border-radius: 2px;
  margin: 8px 0 4px;
}
.sh-template_02 .sh-journal-eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.sh-template_02 .sh-journal-title {
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 4px 0 0;
  color: #fff;
}
.sh-template_02 .sh-journal-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 8px 0 0;
}

@media (max-width: 720px) {
  .sh-template_02 .sh-journal-hero-band { padding: 36px 18px 44px; }
}

/* ---------- Sticky TOC chip strip ---------- */
.sh-template_02 .sh-journal-toc {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(238, 243, 248);
  border-bottom: 1px solid rgba(var(--wa-ink-rgb), 0.08);
  padding: 12px 0;
}
body.static-home-inner.static-home-template_02 .sh-journal-toc { top: 60px; }
@media (max-width: 920px) {
  .sh-template_02 .sh-journal-toc,
  body.static-home-inner.static-home-template_02 .sh-journal-toc { position: static; top: auto; }
}
.sh-template_02 .sh-journal-toc-inner {
  max-width: var(--wa-column);
  margin: 0 auto;
  padding: 0 var(--wa-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sh-template_02 .sh-journal-toc-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy-deep);
  white-space: nowrap;
}
.sh-template_02 .sh-journal-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sh-template_02 .sh-journal-toc-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--wa-surface);
  color: var(--wa-navy-deep);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(var(--wa-ink-rgb), 0.08);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.sh-template_02 .sh-journal-toc-chip:hover {
  background: var(--wa-navy);
  color: #fff;
  border-color: var(--wa-navy);
}

/* ---------- Body shell ---------- */
.sh-template_02 .sh-journal-shell {
  max-width: var(--wa-page-max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--wa-gutter);
}
.sh-template_02 .sh-journal-shell-with-aside {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 920px) {
  .sh-template_02 .sh-journal-shell-with-aside {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sh-template_02 .sh-journal-shell { padding: 40px var(--wa-gutter) 56px; }
}

/* ---------- Sibling sidebar ---------- */
.sh-template_02 .sh-journal-aside { position: sticky; top: 96px; }
@media (max-width: 920px) { .sh-template_02 .sh-journal-aside { position: static; } }
.sh-template_02 .sh-journal-aside-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy-deep);
  margin-bottom: 6px;
}
.sh-template_02 .sh-journal-aside-parent {
  display: inline-block;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--wa-ink);
  text-decoration: none;
  margin-bottom: 22px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.sh-template_02 .sh-journal-aside-parent:hover { border-bottom-color: var(--wa-sun); }
.sh-template_02 .sh-journal-aside-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--wa-surface-deep);
  display: flex;
  flex-direction: column;
}
.sh-template_02 .sh-journal-aside-list li {
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid var(--wa-surface-deep);
  font-size: 14.5px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sh-template_02 .sh-journal-aside-num {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--wa-navy);
  flex-shrink: 0;
  min-width: 18px;
}
.sh-template_02 .sh-journal-aside-link {
  color: var(--wa-ink-soft);
  text-decoration: none;
  transition: color 0.12s ease;
}
.sh-template_02 .sh-journal-aside-link:hover { color: var(--wa-navy-deep); }
.sh-template_02 .sh-journal-aside-current .sh-journal-aside-link-current {
  color: var(--wa-navy-deep);
  font-weight: 700;
}
.sh-template_02 .sh-journal-aside-current .sh-journal-aside-num { color: var(--wa-sun); }

/* ---------- Body prose ---------- */
.sh-template_02 .sh-journal-body { position: relative; }
.sh-template_02 .sh-journal-body-inner { max-width: 720px; }
.sh-template_02 .sh-journal-shell:not(.sh-journal-shell-with-aside) .sh-journal-body-inner {
  margin: 0 auto;
}

.sh-template_02 .sh-journal-intro { margin-bottom: 1.6em; }
.sh-template_02 .sh-journal-intro-prose {
  font-size: 19px;
  line-height: 1.7;
  color: var(--wa-ink);
}
.sh-template_02 .sh-journal-intro-prose > *:first-child::first-letter {
  font-weight: 700;
  font-size: 4.2em;
  line-height: 0.9;
  float: left;
  padding: 0.04em 0.12em 0 0;
  color: var(--wa-navy-deep);
  letter-spacing: -0.02em;
}

.sh-template_02 .sh-journal-block {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--wa-ink);
  margin: 0 0 1.2em;
}
.sh-template_02 .sh-journal-block p { margin: 0 0 1.1em; }
.sh-template_02 .sh-journal-block p:last-child { margin-bottom: 0; }

.sh-template_02 .sh-journal-body a,
.sh-template_02 .sh-journal-intro-prose a {
  color: var(--wa-navy-deep);
  text-decoration: underline;
  text-decoration-color: rgba(var(--wa-ink-rgb), 0.18);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.14s ease, color 0.14s ease;
}
.sh-template_02 .sh-journal-body a:hover,
.sh-template_02 .sh-journal-intro-prose a:hover {
  color: var(--wa-navy);
  text-decoration-color: var(--wa-sun);
}

/* Lists — discrete navy disc bullet, no decorative rainbow */
.sh-template_02 .sh-journal-block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2em;
}
.sh-template_02 .sh-journal-block ul > li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
}
.sh-template_02 .sh-journal-block ul > li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wa-navy);
  opacity: 0.7;
}
.sh-template_02 .sh-journal-block ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.sh-template_02 .sh-journal-block ol > li { margin-bottom: 0.45em; }
.sh-template_02 .sh-journal-block ol > li::marker {
  color: var(--wa-navy-deep);
  font-weight: 700;
}

.sh-template_02 .sh-journal-block table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.6em 0;
  font-size: 15px;
  background: var(--wa-surface);
  border-radius: var(--wa-radius-sm);
  overflow: hidden;
  box-shadow: 0 14px 30px -22px rgba(var(--wa-ink-rgb), 0.35);
}
.sh-template_02 .sh-journal-block table th {
  background: var(--wa-navy-deep);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
  padding: 14px 18px;
}
.sh-template_02 .sh-journal-block table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--wa-surface-deep);
}
.sh-template_02 .sh-journal-block table tr:nth-child(even) td { background: var(--wa-mist); }
.sh-template_02 .sh-journal-block table tr:last-child td { border-bottom: 0; }

.sh-template_02 .sh-journal-hr {
  border: 0;
  height: 1px;
  background: var(--wa-surface-deep);
  margin: 3em 0;
}

/* ---------- Section break ---------- */
.sh-template_02 .sh-journal-section {
  margin: 72px 0 24px;
  scroll-margin-top: 110px;
}
.sh-template_02 .sh-journal-section-numeral {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy);
  margin-bottom: 10px;
}
.sh-template_02 .sh-journal-section-heading {
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--wa-ink);
  margin: 0 0 0.4em;
}
.sh-template_02 .sh-journal-section-h2 .sh-journal-section-heading { font-size: clamp(26px, 3.4vw, 36px); }
.sh-template_02 .sh-journal-section-h3 .sh-journal-section-heading { font-size: 22px; }
.sh-template_02 .sh-journal-section-h4 .sh-journal-section-heading { font-size: 18px; }

/* ---------- Pull-quote ---------- */
.sh-template_02 .sh-journal-pull {
  margin: 56px 0;
}
.sh-template_02 .sh-journal-pull-body {
  margin: 0;
  padding: 12px 0 12px 28px;
  border-left: 3px solid var(--wa-sun);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--wa-navy-deep);
  letter-spacing: -0.005em;
}

/* ---------- Single body figures ---------- */
.sh-template_02 .sh-journal-figure {
  margin: 48px 0;
  padding: 0;
  background: transparent;
}
.sh-template_02 .sh-journal-figure-right { float: right; max-width: 320px; margin: 8px 0 24px 32px; }
.sh-template_02 .sh-journal-figure-left  { float: left;  max-width: 320px; margin: 8px 32px 24px 0;  }
.sh-template_02 .sh-journal-figure-block { margin: 56px auto; max-width: 600px; }
@media (max-width: 920px) {
  .sh-template_02 .sh-journal-figure-right,
  .sh-template_02 .sh-journal-figure-left {
    float: none; margin: 36px auto; max-width: 100%;
  }
}
.sh-template_02 .sh-journal-figure-frame {
  background: var(--wa-surface);
  padding: 8px;
  border-radius: var(--wa-radius-sm);
  border: 1px solid rgba(var(--wa-ink-rgb), 0.06);
  box-shadow: 0 18px 40px -24px rgba(var(--wa-ink-rgb), 0.32);
}
.sh-template_02 .sh-journal-figure-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--wa-mist);
}
.sh-template_02 .sh-journal-figure-caption {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--wa-ink-soft);
  text-align: center;
  line-height: 1.45;
}
.sh-template_02 .sh-journal-figure-caption span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0;
}

/* ---------- Staff card grid ---------- */
.sh-template_02 .sh-journal-staff {
  list-style: none;
  margin: 56px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 56px 28px;
  align-items: start;
}
.sh-template_02 .sh-journal-staff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.22s ease;
}
.sh-template_02 .sh-journal-staff-card:hover { transform: translateY(-4px); }

.sh-template_02 .sh-journal-staff-portrait {
  width: clamp(140px, 60%, 168px);
  margin-bottom: 16px;
}
.sh-template_02 .sh-journal-staff-portrait .sh-journal-figure-grid {
  margin: 0;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sh-template_02 .sh-journal-staff-portrait .sh-journal-figure-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--wa-surface);
  padding: 4px;
  border: 2px solid var(--wa-sun);
  box-shadow: 0 14px 32px -20px rgba(var(--wa-ink-rgb), 0.4);
}
.sh-template_02 .sh-journal-staff-portrait .sh-journal-figure-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  background: var(--wa-mist);
}
.sh-template_02 .sh-journal-staff-portrait .sh-journal-figure-caption {
  font-weight: 700;
  font-size: 16px;
  color: var(--wa-ink);
  margin-top: 12px;
}

.sh-template_02 .sh-journal-staff-bio {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--wa-ink-soft);
  text-align: left;
  width: 100%;
}
.sh-template_02 .sh-journal-staff-bio p { margin: 0 0 0.5em; }
.sh-template_02 .sh-journal-staff-bio p:last-child { margin-bottom: 0; }

/* ---------- Bare-figure portrait grid ---------- */
.sh-template_02 .sh-journal-portraits {
  list-style: none;
  margin: 56px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 32px 20px;
  justify-items: center;
}
.sh-template_02 .sh-journal-portraits-item { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sh-template_02 .sh-journal-figure-grid {
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sh-template_02 .sh-journal-figure-grid .sh-journal-figure-frame {
  width: clamp(120px, 100%, 140px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--wa-surface);
  padding: 3px;
  border: 2px solid var(--wa-sun);
  box-shadow: 0 12px 28px -18px rgba(var(--wa-ink-rgb), 0.36);
}
.sh-template_02 .sh-journal-figure-grid .sh-journal-figure-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* ---------- Empty fallback ---------- */
.sh-template_02 .sh-journal-empty { padding: 96px 0; text-align: center; }
.sh-template_02 .sh-journal-empty-note {
  font-size: 18px;
  color: var(--wa-ink-soft);
  font-style: italic;
}

/* ---------- "Keep exploring" sub-page wall ---------- */
.sh-template_02 .sh-journal-wall {
  background: var(--wa-surface-deep);
  border-top: 1px solid rgba(var(--wa-ink-rgb), 0.06);
  padding: clamp(64px, 9vw, 96px) var(--wa-gutter);
}
.sh-template_02 .sh-journal-wall-inner {
  max-width: var(--wa-page-max);
  margin: 0 auto;
}
.sh-template_02 .sh-journal-wall-header {
  margin-bottom: clamp(32px, 5vw, 56px);
  text-align: center;
}
.sh-template_02 .sh-journal-wall-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy);
  margin-bottom: 12px;
}
.sh-template_02 .sh-journal-wall-heading {
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--wa-ink);
  margin: 0;
}
.sh-template_02 .sh-journal-wall-sub {
  font-size: 16px;
  color: var(--wa-ink-soft);
  margin: 12px auto 0;
  max-width: 56ch;
}
.sh-template_02 .sh-journal-wall-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.sh-template_02 .sh-journal-wall-card {
  background: var(--wa-surface);
  border: 1px solid rgba(var(--wa-ink-rgb), 0.06);
  border-radius: var(--wa-radius);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.sh-template_02 .sh-journal-wall-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -28px rgba(var(--wa-ink-rgb), 0.4);
  border-color: var(--wa-navy);
}
.sh-template_02 .sh-journal-wall-card-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 24px;
  color: inherit;
  text-decoration: none;
}
.sh-template_02 .sh-journal-wall-card-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wa-navy);
}
.sh-template_02 .sh-journal-wall-card-title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--wa-ink);
}
.sh-template_02 .sh-journal-wall-card-summary {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--wa-ink-soft);
}
.sh-template_02 .sh-journal-wall-card-cta {
  margin-top: 8px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--wa-navy-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.16s ease, color 0.14s ease;
}
.sh-template_02 .sh-journal-wall-card:hover .sh-journal-wall-card-cta {
  gap: 10px;
  color: var(--wa-navy);
}

/* ---------- Sign-off rule ---------- */
.sh-template_02 .sh-journal-signoff {
  text-align: center;
  padding: 40px 0 56px;
}
.sh-template_02 .sh-journal-signoff-rule {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: var(--wa-surface-deep);
}

/* ---------- Widgets ---------- */
.sh-template_02 .sh-journal-widgets {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 32px;
}
.sh-template_02 .sh-journal-widget {
  background: var(--wa-surface);
  border: 1px solid rgba(var(--wa-ink-rgb), 0.06);
  border-radius: var(--wa-radius);
  padding: 26px;
  box-shadow: 0 16px 40px -28px rgba(var(--wa-ink-rgb), 0.32);
}

/* ---------- Mobile drawer (right-side slide-in) ---------- */
.sh-template_02 .sh-nav-mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 84vw);
  background: var(--wa-surface);
  box-shadow: -20px 0 60px -30px rgba(var(--wa-ink-rgb), 0.4);
  border-left: 1px solid rgba(var(--wa-ink-rgb), 0.08);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 220ms ease;
  overflow-y: auto;
}
.sh-template_02 .sh-nav-mobile-inner {
  display: flex;
  flex-direction: column;
  padding: 88px 22px 28px;
  gap: 4px;
}
.sh-template_02 .sh-nav-open .sh-nav-mobile { transform: translateX(0); }
.sh-template_02 .sh-nav-mobile-link {
  display: block;
  padding: 12px 14px;
  border-radius: var(--wa-radius-sm);
  text-decoration: none;
  color: var(--wa-ink);
  font-weight: 600;
  font-size: 15px;
  transition: background-color 120ms ease;
}
.sh-template_02 .sh-nav-mobile-link:hover { background: var(--wa-surface-deep); }
.sh-template_02 .sh-nav-mobile-divider {
  height: 1px;
  background: var(--wa-surface-deep);
  margin: 12px 0;
}
.sh-template_02 .sh-nav-mobile-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 14px;
}
.sh-template_02 .sh-nav-mobile-identity-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--wa-surface-deep);
  color: var(--wa-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sh-template_02 .sh-nav-mobile-identity-avatar svg { width: 20px; height: 20px; }
.sh-template_02 .sh-nav-mobile-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sh-template_02 .sh-nav-mobile-identity-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--wa-ink);
}
.sh-template_02 .sh-nav-mobile-identity-email {
  font-size: 12.5px;
  color: var(--wa-ink-soft);
  word-break: break-all;
}
.sh-template_02 .sh-nav-mobile-signout-form { margin: 0; }
.sh-template_02 .sh-nav-mobile-signout {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--wa-ink);
  border-radius: var(--wa-radius-sm);
}
.sh-template_02 .sh-nav-mobile-signout:hover { background: var(--wa-surface-deep); }

/* Lock body scroll while the drawer is open. */
body.sh-nav-locked { overflow: hidden; }

@media (min-width: 901px) {
  .sh-template_02 .sh-nav-mobile { display: none; }
}

/* ---------- Mobile breakpoint adjustments for inner pages ---------- */
@media (max-width: 720px) {
  .sh-template_02 .sh-journal-shell { padding: 32px var(--wa-gutter) 56px; }
  .sh-template_02 .sh-journal-section { margin: 56px 0 18px; }
  .sh-template_02 .sh-journal-pull { margin: 40px 0; }
}

/* === Downloads section in inner_body — see _inner_body.slim === */
.sh-template_02 .sh-journal-downloads {
  margin: 48px auto 0;
  max-width: var(--wa-page-max);
  padding: 0 var(--wa-gutter);
}

.sh-template_02 .sh-journal-downloads-heading {
  font-family: var(--wa-sans);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wa-ink);
  margin: 0 0 20px;
}

.sh-template_02 .sh-journal-downloads-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sh-template_02 .sh-journal-downloads-item {
  background: var(--wa-surface);
  border: 1px solid var(--wa-surface-deep);
  border-radius: var(--wa-radius-sm);
  padding: 8px 4px;
  box-shadow: 0 8px 30px -18px rgba(var(--wa-ink-rgb), 0.25);
}

/* === Page-layout theme tokens (consumed by static_homes/layouts.css)
   Stats: navy/8% tile, sun-gold for the first-tile number, Noto Sans
   Display for the number. Testimonials: same tile chrome, navy text. */
.sh-template_02 {
  --sh-section-stat-gap: 16px;
  --sh-section-stat-tile-bg: rgba(var(--wa-ink-rgb), 0.08);
  --sh-section-stat-tile-radius: var(--wa-radius-sm);
  --sh-section-stat-tile-padding: 24px;
  --sh-section-stat-number-color: var(--wa-ink);
  --sh-section-stat-number-font: var(--wa-sans);
  --sh-section-stat-number-size: clamp(32px, 5vw, 48px);
  --sh-section-stat-label-color: var(--wa-ink);

  --sh-section-testimonial-gap: 16px;
  --sh-section-testimonial-card-bg: rgba(var(--wa-ink-rgb), 0.08);
  --sh-section-testimonial-card-radius: var(--wa-radius-sm);
  --sh-section-testimonial-card-padding: 24px;
  --sh-section-testimonial-mark-color: var(--wa-ink);
  --sh-section-testimonial-quote-color: var(--wa-ink);
  --sh-section-testimonial-meta-color: var(--wa-ink);

  --sh-section-figure-gap: 16px;
  --sh-section-figure-card-bg: rgba(var(--wa-ink-rgb), 0.08);
  --sh-section-figure-card-radius: var(--wa-radius-sm);
  --sh-section-figure-card-padding: 12px;
  --sh-section-figure-img-aspect: 4 / 3;
  --sh-section-figure-caption-color: var(--wa-ink);

  --sh-section-accordion-summary-bg: var(--wa-mist);
  --sh-section-accordion-summary-color: var(--wa-ink);
  --sh-section-accordion-body-bg: #ffffff;
  --sh-section-accordion-border: rgba(var(--wa-ink-rgb), 0.12);
  --sh-section-accordion-radius: var(--wa-radius-sm);
}

/* Sun-gold accent on the FIRST stat tile only — mirrors the SVG
   preview's "template_02 accent moment". Scoped to the grid so other
   templates with their own first-tile rule aren't affected. */
.sh-template_02 .sh-section-stat-grid > li.sh-section-stat:first-child .sh-section-stat-number {
  color: var(--wa-sun);
}