/* Justice Luncheon (.jl). Base, hero, wrap, eyebrows, sections, cards, chips and contact strip come from core.css. jl keeps its own buttons (real <button>s). */

/* Eyebrow. Gold on navy, navy on light — the two are never swapped. */
.jl__eyebrow { color: var(--navy); }
.jl__eyebrow--on-navy { color: var(--gold); }

.jl__h2 {
  font-weight: 800; font-size: clamp(1.9rem, 3.3vw, 2.7rem);
  color: var(--navy); margin: 14px 0 0; line-height: 1.15; letter-spacing: -.02em;
  text-wrap: balance;
}
.jl__head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.jl__head p { color: var(--muted); font-size: 1.12rem; margin: 16px 0 0; }

/* ⚠ WHY THESE SELECTORS CARRY A `.jl ` PREFIX — do not "simplify" them.
   The live theme styles bare <button> at specificity 0,1,1 (a class on <body> plus
   the element, i.e. `body.elementor-page button`). Verified on the live page: it
   paints buttons #455D8F blue, forces border-radius 10px and padding 15px 40px, and
   leaves appearance:button. A plain `.jl__btn` rule is 0,1,0 and LOSES to it, which
   is what made the hero ticket button square and put a blue frame around every
   gallery photo. Prefixing with `.jl` (or `.jl-bar` / `.jl-lightbox` for the two
   blocks that live on <body>) takes these to 0,2,0 and wins cleanly, with no
   !important anywhere. Every rule below that sets background, border, border-radius
   or padding on something that is a <button> needs this prefix. */

/* One button, one geometry — .sw-btn's, which DESIGN.md §10 names as canonical. */
.jl .jl__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 34px; border-radius: 50px; border: 0;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-weight: 800; font-size: 1rem;
  letter-spacing: .4px; text-transform: uppercase; cursor: pointer;
  /* .jl's 1.6 body line-height makes a button that does wrap look like a mistake.
     At 1.25 a two-line label reads as a deliberate two-line button. */
  line-height: 1.25; text-align: center; text-wrap: balance;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.jl .jl__btn--gold {
  background: var(--gold); color: var(--navy) !important;
  box-shadow: 0 10px 28px -8px rgba(244,180,0,.6);
}
.jl .jl__btn--gold:hover {
  background: var(--gold-dark); transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px rgba(244,180,0,.75);
}
.jl .jl__btn--navy {
  background: var(--navy); color: #fff !important;
  box-shadow: 0 10px 28px -8px rgba(13,71,161,.5);
}
.jl .jl__btn--navy:hover {
  background: var(--navy-deep); transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px rgba(13,71,161,.65);
}
/* Ghost exists only on navy surfaces. On light, a secondary action is --navy solid.
   1px, not the 2px the other pages' ghosts use: this hero sits it directly beside the
   1px dashed ticket button, and at 2px the two borders visibly disagreed. Deliberate
   local deviation, logged in DESIGN.md §10. */
.jl .jl__btn--ghost {
  background: transparent; color: #fff !important;
  border: 1px solid rgba(255,255,255,.55);
}
.jl .jl__btn--ghost:hover {
  background: rgba(255,255,255,.1); border-color: #fff; transform: translateY(-2px);
}
.jl a:focus-visible, .jl button:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px;
}
.jl-hero a:focus-visible, .jl-impact a:focus-visible, .jl-cta a:focus-visible {
  outline-color: #fff;
}

/* ============================================================================
   HERO — the room, washed navy. The photo is decorative (the gallery below is
   where the photography is actually presented), so it is a background layer,
   not an <img>. jl-hero__bg carries it on its own element so it can drift.
   ============================================================================ */
.jl-hero { padding: 96px 0 104px; }
.jl-hero__bg {
  position: absolute; inset: -3%; z-index: 0;
  background-image: url('https://safecitymississauga.on.ca/wp-content/uploads/2026/08/FT1A5022.jpg');
  background-size: cover; background-position: 50% 40%;
  /* The brand wash below is deliberately heavy (see DESIGN.md §3.3), so the photo
     is lifted first. Without this the room reads as blue texture rather than as a
     room, and the whole point of the image is that this event visibly happened. */
  filter: brightness(1.28) contrast(1.04);
  animation: jl-drift 28s ease-in-out infinite alternate;
}
@keyframes jl-drift {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(0, -1%, 0); }
}
/* The house photo wash (DESIGN.md §3.3), which is what makes a photograph read as
   part of the brand instead of a picture the brand is sitting on top of. */
.jl-hero__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(13,71,161,.93) 0%, rgba(9,54,128,.88) 45%, rgba(8,45,107,.95) 100%);
}
/* Gold bloom + dot grid, both hero-strength. */
.jl-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(244,180,0,.18), transparent 38%),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,.07), transparent 40%);
}
.jl-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .25;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
}
.jl-hero__inner { z-index: 3; max-width: 940px; }
.jl-hero__pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); background: rgba(244,180,0,.1);
  border: 1px solid rgba(244,180,0,.35);
  padding: 8px 18px; border-radius: 999px;
}
.jl-hero__pill i { font-size: 11px; }
.jl-hero h1 {
  font-size: clamp(2.1rem, 4.1vw, 3.6rem); line-height: 1.05;
  margin: 22px 0 0; text-wrap: balance;
}
.jl-hero__tag {
  font-size: 1.12rem; color: rgba(255,255,255,.88);
  max-width: 620px; margin: 20px auto 0; text-wrap: balance;
}

/* The fact rail. Three columns divided by hairlines, which on mobile become a
   stack divided the same way. The gold key line is the only gold text here. */
.jl-hero__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 800px; margin: 40px auto 0;
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.jl-hero__fact { padding: 20px 18px; border-right: 1px solid rgba(255,255,255,.16); }
.jl-hero__fact:last-child { border-right: 0; }
.jl-hero__fact-k {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 7px;
}
.jl-hero__fact-v { display: block; font-size: 1.02rem; font-weight: 700; color: #fff; line-height: 1.35; }
.jl-hero__fact-s { display: block; font-size: .85rem; color: rgba(255,255,255,.7); margin-top: 3px; line-height: 1.4; }

/* Days-away line. display:none by default means it also takes up no space when the
   script does not run, rather than leaving an empty gap under the buttons. */
.jl-hero__away { display: none; }
.jl-hero__away.is-live {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 22px 0 0; font-size: .88rem; color: rgba(255,255,255,.7);
}
.jl-hero__away i { color: var(--gold); }

/* ============================================================================
   PLAN YOUR VISIT — a white card that straddles the hero's bottom edge.
   ============================================================================ */
.jl-visit { background: #fff; padding: 0 0 88px; }
.jl-visit__card {
  position: relative; z-index: 4;
  max-width: 1080px; margin: -64px auto 0;
  /* No gold cap here. The overlap onto the navy hero plus the shadow already make
     this card the strongest object on the page; a gold rule on top of that was the
     page's fourth one and turned the accent into wallpaper. Gold now caps exactly
     one thing on this page: the lead sponsorship tier. */
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(13,71,161,.45);
  display: grid; grid-template-columns: 1.15fr .85fr;
  overflow: hidden;
}
.jl-visit__agenda { padding: 40px 42px 44px; }
.jl-visit__venue {
  padding: 40px 38px 44px; background: var(--cream);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
/* h2, not h3: this card is the first thing under the h1, so an h3 here would skip
   a level and leave the document outline broken for screen readers. It is styled
   down to card scale rather than section scale. */
.jl-visit h2 {
  font-size: 1.22rem; font-weight: 800; color: var(--navy);
  margin: 14px 0 26px; line-height: 1.25; letter-spacing: -.01em;
}
/* Timeline. The gold rule is the spine; each dot sits on it. */
.jl-time { list-style: none; margin: 0; padding: 0; position: relative; }
.jl-time::before {
  content: ''; position: absolute; left: 7px; top: 10px; bottom: 22px;
  width: 2px; background: linear-gradient(180deg, var(--gold) 0%, rgba(244,180,0,.25) 100%);
}
.jl-time li { position: relative; padding: 0 0 26px 34px; }
.jl-time li:last-child { padding-bottom: 0; }
.jl-time li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(244,180,0,.35);
}
.jl-time__t {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.jl-time__d { display: block; font-size: 1.02rem; font-weight: 700; color: var(--navy); line-height: 1.4; }
.jl-time__n { display: block; font-size: .92rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }

.jl-venue__name { font-size: 1.1rem; font-weight: 800; color: var(--navy); margin: 0; line-height: 1.35; }
.jl-venue__addr { font-size: .98rem; color: var(--muted); margin: 6px 0 0; line-height: 1.6; }
/* margin-top:auto pins the two links to the bottom of the card, so the venue
   column ends level with the taller agenda column instead of trailing off. */
.jl-venue__links { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 28px; }
.jl-venue__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .93rem; font-weight: 700; color: var(--navy) !important;
  padding: 11px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jl-venue__link i { color: var(--gold-dark); }
.jl-venue__link:hover {
  transform: translateY(-2px); border-color: var(--gold);
  box-shadow: 0 10px 28px -14px rgba(13,71,161,.45);
}

/* ============================================================================
   KEYNOTE — the page's one interior navy band, and its emotional centre now that
   the speaker is announced. A full-bleed band rather than a card on purpose: Plan
   Your Visit directly above is a rounded 2-column card of this exact width, and a
   second one here read as the same object twice.
   ============================================================================ */
.jl-keynote {
  position: relative; overflow: hidden; color: #fff; padding: 88px 0;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-darker) 100%);
}
.jl-keynote::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(244,180,0,.18), transparent 38%),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,.07), transparent 40%);
}
.jl-keynote::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 100%);
}
/* A grid, not a card. Plan Your Visit directly above is a rounded 2-column card of
   this exact width, so a second one here read as the same object twice. This is a
   full-bleed band instead: different silhouette, and the keynote gets to be an
   event on the page rather than a footnote to the agenda. */
.jl-keynote__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center;
  max-width: 1080px; margin: 0 auto;
}
/* 4/5, matched to the source. CER-head-shot.jpeg is 1220x1464, a ratio of 0.833,
   which is within a whisker of 4/5 (0.8): this frame crops about 4% off the sides
   and nothing off her head. A square frame would have taken ~17% off the top and
   bottom of a portrait-orientation photo instead. */
.jl-keynote__portrait {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
.jl-keynote__portrait img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
/* Name plate. The gradient behind it is what keeps the gold pill legible wherever
   the photo happens to be light at the bottom of the frame. */
.jl-keynote__portrait::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(8,45,107,.75) 100%);
}
.jl-keynote__tag {
  position: absolute; z-index: 1; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px;
  background: var(--gold); color: var(--navy);
  font-size: .74rem; font-weight: 800; letter-spacing: .6px;
  box-shadow: 0 10px 26px -10px rgba(244,180,0,.7);
}
/* Full section scale now, matching every other h2 on the page. */
.jl-keynote h2 {
  font-weight: 800; font-size: clamp(1.9rem, 3.3vw, 2.7rem); color: #fff;
  margin: 14px 0 16px; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance;
}
.jl-keynote h2 .accent { color: var(--gold); }
.jl-keynote p { color: rgba(255,255,255,.88); margin: 0; }
.jl-keynote__lede { font-size: 1.06rem; }
/* The biography is supporting detail, so it steps down a size and a shade rather
   than competing with the talk title and the hook above it. */
.jl-keynote__bio {
  font-size: .95rem; line-height: 1.65;
  color: rgba(255,255,255,.72) !important; margin-top: 16px !important;
}
.jl-keynote__meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .88rem; color: rgba(255,255,255,.7);
}
.jl-keynote__meta span { display: inline-flex; align-items: center; gap: 8px; }
.jl-keynote__meta i { color: var(--gold); }

/* ============================================================================
   HERO AWARDS
   ============================================================================ */
.jl-awards__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1080px; margin: 0 auto;
}
.jl-award { --card-lift: 0 24px 60px -20px rgba(13,71,161,.45); padding: 30px 28px; }
.jl-award__icon { margin-bottom: 18px; }
.jl-award h3 { font-size: 1.15rem; font-weight: 800; color: var(--navy); margin: 0 0 8px; line-height: 1.25; }
.jl-award p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.jl-awards__sponsor {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 24px 0 0; padding: 10px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none;
  transition: border-color .2s ease;
}
.jl-awards__sponsor:hover { border-color: var(--gold); }
.jl-awards__sponsor span {
  color: var(--muted); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.jl-awards__sponsor img { height: 30px; width: auto; display: block; }
.jl-awards__foot { text-align: center; margin: 48px 0 0; }
.jl-awards__foot p {
  max-width: 620px; margin: 0 auto 24px; color: var(--navy);
  font-weight: 600; font-size: 1.1rem; line-height: 1.5; text-wrap: balance;
}

/* ============================================================================
   GALLERY — last year's luncheon. Eight photographs.

   Six columns, which is what makes eight photos fill every row exactly: the two
   lead shots span 3 columns each (a row of two), the remaining six span 2 each
   (two rows of three). 6 + 6 + 6, no orphan cell and nothing to hand-tune. The
   4-column mosaic this replaces only tiled cleanly at nine photos, so dropping
   one left the bottom row short and the tiles stopped lining up.

   Every tile is 3/2, which is these photographs' true ratio, so the lead pair is
   simply larger than the six beneath it rather than a different shape. Row heights
   therefore come from the photos themselves and every edge in a row agrees.
   ============================================================================ */
.jl-gallery__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  max-width: 1180px; margin: 0 auto;
}
.jl .jl-shot {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: var(--cream); font-family: inherit;
  box-shadow: 0 14px 40px -22px rgba(13,71,161,.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Both rules are 0,1,0 so source order decides: lead wins because it comes second.
   Do not prefix either with `.jl` on its own — that would take one to 0,2,0 and the
   lead tiles would silently drop back to 2 columns. */
.jl-shot { grid-column: span 2; }
.jl-shot--lead { grid-column: span 3; }
.jl-shot img {
  width: 100%; height: 100%; object-fit: cover; max-width: none;
  transition: transform .4s ease;
}
.jl-shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(8,45,107,.55) 100%);
  opacity: 0; transition: opacity .2s ease;
}
.jl-shot__zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.jl-shot:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -20px rgba(13,71,161,.45); }
.jl-shot:hover img { transform: scale(1.05); }
.jl-shot:hover::after,
.jl-shot:focus-visible::after { opacity: 1; }
.jl-shot:hover .jl-shot__zoom,
.jl-shot:focus-visible .jl-shot__zoom { opacity: 1; transform: translateY(0); }
.jl-gallery__hint {
  display: none; align-items: center; justify-content: center; gap: 9px;
  margin: 18px 0 0; font-size: .82rem; color: var(--muted);
}
.jl-gallery__hint i { color: var(--gold-dark); }

/* ============================================================================
   IMPACT — the one interior navy band. Gold numbers, real figures in the markup.
   ============================================================================ */
/* Cream, not navy. The keynote band above is now the page's one interior navy
   punctuation, and two navy bands would mean neither is the ask (DESIGN.md §6.2).
   The figures go navy, which §3.2 calls for anyway: navy numbers are achievements. */
/* Asymmetric split with a left-aligned heading. Every other section on this page is
   a centred heading over a grid of cards, and seven numbers in that same shape made
   this the fourth repeat of it. This is the one section that reads left-to-right. */
.jl-impact__split {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 64px;
  max-width: 1080px; margin: 0 auto; align-items: start;
}
.jl-impact__intro p {
  color: var(--muted); font-size: 1.06rem; margin: 18px 0 0;
}
.jl-impact__source { margin: 28px 0 0; font-size: .82rem; color: var(--muted); }

/* A ledger, the way a charity's annual report sets its numbers: one per line, right
   aligned in a fixed column so every digit stacks, hairline between rows. Seven
   figures as seven equal cards gave nothing to read first; as rows they scan. */
.jl-ledger { list-style: none; margin: 0; padding: 0; }
.jl-ledger li {
  display: grid; grid-template-columns: 136px 1fr; gap: 28px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.jl-ledger li:first-child { padding-top: 0; }
.jl-ledger li:last-child { border-bottom: 0; padding-bottom: 0; }
.jl-ledger b {
  text-align: right; font-weight: 800; color: var(--navy);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1; letter-spacing: -.02em;
  /* Tabular figures are what let the digits line up as the counters run. */
  font-variant-numeric: tabular-nums;
}
.jl-ledger span { color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* ============================================================================
   SPONSORSHIP
   ============================================================================ */
/* White, because the impact band above is now cream and two cream bands in a row
   would erase the only thing separating the sections. */
.jl-spon__why {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1080px; margin: 0 auto 64px;
}
/* Same card as .jl-award and .jl-tier: white, one hairline, 16px, same lift. These
   three used to carry gold left rules, which was three more gold accents in a
   section that already has a gold-capped tier card below it. */
.jl-why { --card-lift: 0 24px 60px -20px rgba(13,71,161,.45); padding: 30px 28px; }
/* The icon in a navy tile, matching .jl-award__icon, so the two card grids on this
   page read as the same component rather than two near-misses. */
.jl-why i { display: flex; margin-bottom: 18px; }
.jl-why h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.3; }
.jl-why p { color: var(--muted); margin: 0; font-size: .94rem; line-height: 1.6; }

/* Tier ladder. Five cards, each one a column of ticks, so the ladder reads
   left to right without a table that has to scroll on a phone. */
/* Four columns, not the deck's five. See the note above the Gold card. */
.jl-tiers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 1180px; margin: 0 auto; align-items: stretch;
}
.jl-tier {
  --card-lift: 0 24px 60px -20px rgba(13,71,161,.45);
  position: relative; display: flex; flex-direction: column;
  padding: 30px 26px 28px;
}
/* The only gold cap left on the page, so it reads as "start here" rather than as
   decoration repeated on every card. */
/* 27px, not 30: the 4px gold cap replaces a 1px border, so without giving the 3px
   back this card's whole stack (price, pill, CTA) sits 3px lower than the other
   three and the row of buttons stops lining up. */
.jl-tier--top { padding-top: 27px; }
.jl-tier__name {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted);
}
.jl-tier__price {
  font-size: 1.85rem; font-weight: 800; color: var(--navy);
  line-height: 1; margin: 10px 0 0; letter-spacing: -.02em;
}
/* align-self keeps these pill-shaped. The card is a flex column, so without it they
   stretch to the card's full width and stop reading as pills. */
.jl-tier__tix {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  margin: 14px 0 18px; padding: 7px 13px; border-radius: 999px;
  background: rgba(13,71,161,.06); color: var(--navy);
  font-size: .82rem; font-weight: 700;
}
.jl-tier__tix i { color: var(--gold-dark); font-size: .8rem; }
/* One CTA per tier, directly under the price rather than at the foot of the card.
   The four benefit lists are different lengths, so bottom-anchored buttons would sit
   at four different heights; up here they line up across the row. */
.jl .jl-tier__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border-radius: 50px;
  background: #fff; color: var(--navy) !important;
  border: 1px solid rgba(13,71,161,.35);
  font-family: inherit; font-weight: 700; font-size: .85rem;
  line-height: 1.2; text-align: center;
  -webkit-appearance: none; appearance: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.jl .jl-tier__cta:hover {
  background: var(--navy); color: #fff !important; border-color: var(--navy);
  transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(13,71,161,.55);
}
/* The lead tier's button is solid, on the same card that already wears the gold cap,
   so gold still marks exactly one tier rather than spreading across all four. */
.jl .jl-tier--top .jl-tier__cta {
  background: var(--gold); border-color: var(--gold); color: var(--navy) !important;
  box-shadow: 0 8px 22px -10px rgba(244,180,0,.7);
}
.jl .jl-tier--top .jl-tier__cta:hover {
  background: var(--gold-dark); border-color: var(--gold-dark); color: var(--navy) !important;
}
.jl-tier__list { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.jl-tier__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; color: #2c3650; line-height: 1.5; padding: 7px 0;
}
.jl-tier__list i { color: var(--gold-dark); font-size: .82rem; margin-top: .35em; flex-shrink: 0; }
.jl-tier__list li b { font-weight: 700; color: var(--navy); }
/* Package + enquiry, side by side under the ladder. */
.jl-spon__foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 1080px; margin: 56px auto 0;
}
.jl-pack {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff; border-radius: 18px; padding: 40px 36px; text-align: center;
  box-shadow: 0 24px 60px -20px rgba(13,71,161,.45);
}
.jl-pack__icon {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 18px;
  background: rgba(244,180,0,.16); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.jl-pack h3 { font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.25; }
.jl-pack p { color: rgba(255,255,255,.88); font-size: .98rem; margin: 0 0 26px; }
.jl-ask {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 40px 36px; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.jl-ask__icon {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 18px;
  background: rgba(13,71,161,.07); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.jl-ask h3 { font-size: 1.35rem; font-weight: 800; color: var(--navy); margin: 0 0 10px; line-height: 1.25; }
.jl-ask p { color: var(--muted); font-size: .98rem; margin: 0 0 22px; }
.jl-ask__who { font-size: .9rem; color: var(--muted); margin: 20px 0 0; line-height: 1.6; }
.jl-ask__who b { display: block; color: var(--navy); font-weight: 700; font-size: .98rem; }
.jl-ask__who a { color: var(--navy) !important; font-weight: 700; }
.jl-ask__who a:hover { color: var(--gold-dark) !important; }
/* The card is a flex column, which would otherwise stretch the button edge to edge
   and make it read heavier than the gold button in the card beside it. */
.jl-ask .jl__btn { align-self: center; }

/* ============================================================================
   SUPPORTED BY
   ============================================================================ */
.jl-logos { background: var(--cream); padding: 72px 0; }
.jl-logos__label {
  text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted); margin: 0 0 34px;
}
/* Equal-width chips, not content-width ones. These eight marks are wildly different
   shapes (a 2.67:1 wordmark, a 1:1 disc, a 0.87:1 crest), and letting each chip size
   itself makes a tidy row look accidental.

   A fixed 4-column grid rather than wrapping flex. At five sponsors, flex was the
   better tool: it centred the short row when five chips wrapped to 3+2. At eight it
   is the wrong one, because how many chips fit per row then depends on the container
   width, and anywhere between roughly 660px and 880px it lands on three per row and
   leaves two stranded underneath. Eight divides evenly by four and by two, so naming
   the column count outright gives two rows of four here and four rows of two below,
   with no arrangement in between. Adding a ninth sponsor means picking a new count. */
.jl-logos__row {
  display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center;
  gap: 18px; max-width: 1180px; margin: 0 auto; padding: 0 24px;
}
/* A chip is a <span> when unlinked and an <a> when linked. Same rules style both. */
.jl-chip {
  width: 100%; max-width: 280px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; min-height: 116px;
  box-shadow: 0 10px 30px -16px rgba(13,71,161,.3);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jl-chip:hover {
  transform: translateY(-3px); border-color: var(--gold);
  box-shadow: 0 24px 60px -20px rgba(13,71,161,.45);
}
.jl-chip img { max-height: 62px; width: auto; object-fit: contain; }
/* SVG logos ship a viewBox but no width/height, so they need a definite height
   or the browser cannot derive a width and they collapse to zero. */
.jl-chip img[src$=".svg"] { height: 62px; }
/* A circular mark at 62px reads far smaller than a 62px-tall horizontal wordmark.
   Round marks get more height, and the padding gives back the same amount so the
   row keeps one chip height. Near-square marks have the same problem and take the
   same class: TD's shield is 800x715, close enough to 1:1 to read as one. */
.jl-chip--round { padding-top: 14px; padding-bottom: 14px; }
.jl-chip--round img { max-height: 76px; }
/* Tall marks (Peel PSB is 500x573) would otherwise tower over the wordmarks. */
.jl-chip--tall img { max-height: 72px; }

/* ============================================================================
   FINAL CTA + CONTACT
   ============================================================================ */
.jl-cta {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-darker) 100%);
  padding: 88px 24px;
}
.jl-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(244,180,0,.18), transparent 38%),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,.07), transparent 40%);
}
.jl-cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
}
.jl-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.jl-cta h2 {
  font-weight: 800; font-size: clamp(1.9rem, 3.3vw, 2.7rem); color: #fff;
  margin: 14px 0 14px; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance;
}
.jl-cta p { color: rgba(255,255,255,.88); font-size: 1.06rem; margin: 0 auto 30px; max-width: 560px; }
.jl-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.jl-contact { background: var(--navy-night); }
.jl-contact a:hover { color: var(--gold); }

/* ============================================================================
   RESPONSIVE — designed at 960 and 620, the system's two real breakpoints.
   ============================================================================ */
@media (max-width: 960px) {
  .jl-hero { padding: 72px 0 84px; }
  .jl-hero__facts { grid-template-columns: 1fr; max-width: 460px; }
  .jl-hero__fact { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .jl-hero__fact:last-child { border-bottom: 0; }
  .jl-visit__card { grid-template-columns: 1fr; margin-top: -48px; }
  .jl-visit__venue { border-left: 0; border-top: 1px solid var(--line); }
  .jl-visit { padding-bottom: 64px; }
  /* Portrait over copy. */
  .jl-keynote__grid { grid-template-columns: 1fr; gap: 32px; }
  /* 4/5 is kept at every width: a 16/9 or 3/2 crop of a portrait headshot cuts the
     top of the head off. Capped so it does not fill a tablet screen. */
  .jl-keynote__portrait { max-width: 340px; }
  .jl-cta, .jl-keynote { padding: 64px 0; }
  .jl-cta { padding-left: 24px; padding-right: 24px; }
  .jl-awards__grid { grid-template-columns: repeat(2, 1fr); }
  /* Two even columns, four rows. The lead pair stops leading here: at tablet width
     a 3-of-6 span and a 2-of-6 span land at almost the same size anyway. */
  .jl-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .jl-shot, .jl-shot--lead { grid-column: span 1; }
  .jl-impact__split { grid-template-columns: 1fr; gap: 40px; }
  /* 3 chips per row here, so the remaining 2 centre under them. */
  /* Two columns, four rows. Four columns would still divide evenly but at the
     narrow end of this range each chip drops under 130px, which is not enough room
     for a 2.67:1 wordmark. The max-width keeps a chip from stretching to half a
     tablet; justify-items on the row centres what is left over. */
  .jl-logos__row { grid-template-columns: repeat(2, 1fr); }
  .jl-chip { max-width: 300px; }
  .jl-spon__why { grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; }
  /* Four tiers divide evenly into two columns, so there is no odd card to centre. */
  .jl-tiers { grid-template-columns: repeat(2, 1fr); }
  .jl-spon__foot { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .jl-logos__row { padding-left: 18px; padding-right: 18px; }
  .jl-hero { padding: 56px 0 72px; }
  .jl-hero__tag { font-size: 1.04rem; }
  .jl-hero__actions { align-items: stretch; }
  .jl-hero__actions .jl__btn { width: 100%; }
  .jl-visit__card { margin: -40px 18px 0; border-radius: 16px; }
  .jl-visit__agenda, .jl-visit__venue { padding: 32px 24px 34px; }
  .jl-keynote__grid { gap: 26px; }
  .jl-keynote__portrait { max-width: 260px; }
  .jl-keynote__meta { gap: 8px 0; flex-direction: column; }
  .jl-awards__grid { grid-template-columns: 1fr; }
  .jl-awards__foot .jl__btn { width: 100%; }

  /* Gallery becomes a snap carousel with a peek at the next photo. The negative
     margin lets it bleed to the screen edges while scroll-padding keeps the
     first and last photo from snapping flush against them. */
  .jl-gallery__grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 18px;
    gap: 12px; padding: 4px 18px 20px; margin: 0 -18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .jl-gallery__grid::-webkit-scrollbar { display: none; }
  .jl-shot { flex: 0 0 84%; scroll-snap-align: center; }
  .jl-shot__zoom { opacity: 1; transform: none; }
  .jl-gallery__hint { display: flex; }

  .jl-ledger li { grid-template-columns: 96px 1fr; gap: 18px; padding: 16px 0; }
  .jl-tiers { grid-template-columns: 1fr; gap: 14px; }
  .jl-tier { padding: 26px 22px 24px; }
  .jl-pack, .jl-ask { padding: 32px 24px 34px; }
  /* 34px of side padding is a third of a phone's usable width. Trimming it here is
     what keeps these labels on one line inside a card that is already inset twice. */
  .jl .jl__btn { padding: 16px 24px; }
  .jl-pack .jl__btn, .jl-ask .jl__btn { width: 100%; align-self: stretch; }
  .jl-cta__actions { flex-direction: column; }
  .jl-cta__actions .jl__btn { width: 100%; }
  .jl-logos__row { gap: 12px; }
  /* 2 chips per row, so the fifth centres beneath them. */
  .jl-chip { max-width: none; padding: 16px 14px; min-height: 96px; }
  .jl-chip img { max-height: 50px; }
  .jl-chip--round img, .jl-chip--tall img { max-height: 60px; }
}

/* ============================================================================
   FLOATING CTA BAR — phones only. The page is roughly 10,000px on a phone and
   after the hero scrolls away there is no ask until the sponsorship section, so
   this carries one. It is moved to <body> on init (see the script) because a
   position:fixed element trapped inside an Elementor ancestor that has a
   transform would anchor to that ancestor instead of the viewport, which is the
   classic way these bars break on a live WordPress page. Living outside `.jl`
   means it declares its own tokens and font.
   ============================================================================ */
.jl-bar {
  --navy: #0D47A1; --navy-darker: #082D6B; --gold: #F4B400;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: none;
  background: rgba(8,45,107,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.14);
  /* env() keeps the buttons clear of the iPhone home indicator. */
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  /* visibility, not just transform: it takes the hidden bar out of the tab order
     so a keyboard user cannot land on a button that is off-screen. Listing it in
     the transition holds it visible for the length of the slide-out. */
  transform: translateY(115%); visibility: hidden;
  transition: transform .2s ease, visibility .2s ease;
}
.jl-bar.is-visible { transform: translateY(0); visibility: visible; }
@media (max-width: 620px) { .jl-bar { display: block; } }
/* flex-basis 0 so the split is driven by the ratios below rather than by label
   length, which is what keeps both buttons inside a 320px screen. Tickets take the
   larger share: it is the paid action and carries the longer label. */
.jl-bar__inner { display: flex; align-items: center; gap: 10px; }
.jl-bar__cta   { flex: 1.2 1 0; }
.jl-bar__ghost { flex: 0.8 1 0; }
.jl-bar .jl-bar__ghost,
.jl-bar .jl-bar__cta {
  min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 12px; border-radius: 50px; border: 0;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-weight: 800; font-size: .8rem;
  letter-spacing: .4px; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap; text-decoration: none;
}
/* Transparent 1px border so the gold and ghost buttons sit at the same height
   instead of differing by the ghost's border width. */
.jl-bar .jl-bar__cta {
  background: var(--gold); color: var(--navy) !important;
  border: 1px solid transparent;
  box-shadow: 0 10px 28px -8px rgba(244,180,0,.6);
}
/* Same ghost language as the hero's secondary buttons, on the same navy surface. */
.jl-bar .jl-bar__ghost {
  background: rgba(255,255,255,.08); color: #fff !important;
  border: 1px solid rgba(255,255,255,.4);
}
.jl-bar a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .jl-bar { transition-duration: .01ms; }
}

/* ============================================================================
   LIGHTBOX — built and appended to <body> by the script below, so it is never
   clipped by an Elementor ancestor's overflow or transform. That puts it outside
   `.jl`, so it carries its own tokens and keeps the jl- namespace on every rule.
   ============================================================================ */
.jl-lightbox {
  --navy: #0D47A1; --gold: #F4B400; --gold-dark: #D9A000;
  position: fixed; inset: 0; z-index: 999999;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6,29,73,.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.jl-lightbox.is-open { display: flex; }
.jl-lightbox__fig { margin: 0; max-width: 1100px; width: 100%; text-align: center; }
.jl-lightbox__img {
  display: block; margin: 0 auto; border-radius: 12px;
  max-width: 100%; max-height: calc(100vh - 168px); width: auto; height: auto;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.jl-lightbox__cap {
  margin: 18px auto 0; max-width: 640px;
  font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.88);
}
.jl-lightbox__count {
  display: block; margin-top: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.jl-lightbox button {
  position: absolute; border: 0; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.jl-lightbox button:hover { background: var(--gold); color: var(--navy); }
.jl-lightbox button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.jl-lightbox .jl-lightbox__close {
  top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; font-size: 19px;
  padding: 0; -webkit-appearance: none; appearance: none;
}
.jl-lightbox .jl-lightbox__nav {
  top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 50%; font-size: 18px;
  padding: 0; -webkit-appearance: none; appearance: none;
}
.jl-lightbox__nav--prev { left: 18px; }
.jl-lightbox__nav--next { right: 18px; }
.jl-lightbox__nav:hover { transform: scale(1.06); }
@media (max-width: 620px) {
  .jl-lightbox { padding: 16px; }
  .jl-lightbox__img { max-height: calc(100vh - 210px); }
  .jl-lightbox .jl-lightbox__close { top: 12px; right: 12px; width: 44px; height: 44px; }
  /* Thumb-reachable: on a phone the arrows sit at the bottom, not the sides. */
  .jl-lightbox .jl-lightbox__nav { top: auto; bottom: 20px; margin-top: 0; width: 52px; height: 52px; }
  .jl-lightbox__nav--prev { left: 22%; }
  .jl-lightbox__nav--next { right: 22%; }
  .jl-lightbox__cap { margin-bottom: 76px; font-size: .88rem; }
}
/* Stops the page behind the lightbox from scrolling under it. */
body.jl-noscroll { overflow: hidden; }

/* ============================================================================
   Motion off means content still readable, never content frozen mid-transition.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .jl-hero__bg { animation: none; transform: scale(1.03); }
  .jl *, .jl *::before, .jl *::after,
  .jl-lightbox, .jl-lightbox * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .jl-shot:hover { transform: none; }
  .jl-shot:hover img { transform: none; }
  .jl-gallery__grid { scroll-behavior: auto; }
}