/* Customer-approved homepage and shared shell additions.
   Brand values are inherited from site.css; this file introduces no palette. */

/* ---------------------------------------------------------------------------
   Homepage design system — premium pass.

   Before this pass there was no scale. Six section `h2` rules declared six
   different sizes, and `.customer-participation-card h3` was clamp(…, 2.3rem)
   — larger than every section heading on the page (max 2rem). The hierarchy
   was literally inverted, which is why the page read as shapeless regardless
   of spacing. Section padding was equally ad hoc: 36 / 64 / 64.8 / 72 / 76px
   from five independent clamps.

   One type scale and one rhythm scale now govern the homepage. Card headings
   are always strictly below section headings.
   --------------------------------------------------------------------------- */
:root {
  /* Type roles */
  --fs-display: clamp(2.25rem, 4.4vw, 4rem);
  --fs-h2: clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-lead: clamp(1rem, 1.15vw, 1.125rem);
  --fs-body: 1rem;
  --fs-kicker: .75rem;
  --fs-meta: .8125rem;

  /* Vertical rhythm — three steps, not five accidents */
  --section-pad-major: clamp(3.5rem, 6vw, 6rem);
  --section-pad-medium: clamp(2.5rem, 4vw, 4rem);
  --section-pad-minor: clamp(1.75rem, 2.8vw, 2.5rem);

  /* Internal flow */
  --flow-heading: clamp(2rem, 3.2vw, 3rem);
  --flow-block: 1.5rem;
  --flow-label: .5rem;

  /* The one divider used wherever two bands must meet */
  --rule-hairline: 1px solid rgba(59, 0, 6, .12);
}

/* Cairo sets optically larger than Poppins and has no case. Negative tracking
   severs Arabic ligature joins, so it is zeroed for every heading role — not
   only the kicker, which was the sole protected role before. */
[dir="rtl"] {
  --fs-display: clamp(2.1rem, 4.1vw, 3.75rem);
  --fs-h2: clamp(1.65rem, 2.45vw, 2.35rem);
  --fs-h3: clamp(1.05rem, 1.3vw, 1.3rem);
}

[dir="rtl"] .customer-homepage h1,
[dir="rtl"] .customer-homepage h2,
[dir="rtl"] .customer-homepage h3 {
  letter-spacing: 0;
}

.customer-skip-link {
  position: fixed;
  z-index: 2000;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  max-width: calc(100vw - 1.5rem);
  padding: .72rem 1rem;
  color: #fff;
  background: var(--brand-wine);
  border: 2px solid var(--brand-gold-soft);
  border-radius: var(--radius-xs);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: transform var(--motion-fast) var(--ease-standard);
}

.customer-skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

.customer-mobile-actions {
  display: none;
}

.customer-save-date-modal {
  --bs-modal-width: 640px;
  --bs-modal-margin: 1rem;
}

.customer-save-date-modal .modal-dialog {
  width: auto;
  max-width: min(92vw, var(--bs-modal-width));
  margin-inline: auto;
}

.customer-save-date-modal .modal-content {
  position: relative;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 90px rgba(28, 0, 4, .32);
}

.customer-save-date-header {
  position: absolute;
  z-index: 3;
  inset-block-start: .65rem;
  inset-inline-end: .65rem;
  padding: 0;
  border: 0;
}

.customer-save-date-close,
.customer-save-date-close:hover,
.customer-save-date-close:focus-visible {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: .78rem;
  background-color: rgba(255, 255, 255, .96);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(28, 0, 4, .24);
  opacity: 1;
}

.customer-save-date-close:focus-visible {
  outline: 3px solid var(--brand-gold-soft);
  outline-offset: 3px;
}

.customer-save-date-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.customer-save-date-body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 2rem);
  object-fit: contain;
  border-radius: var(--radius-md);
}

body.save-date-modal-open .modal-backdrop.show {
  background: rgba(255, 255, 255, .9);
  opacity: 1;
}

@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
  body.save-date-modal-open .modal-backdrop.show {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(16px) saturate(.88);
    backdrop-filter: blur(16px) saturate(.88);
  }
}

@media (max-width: 767.98px) {
  body.has-customer-mobile-actions {
    padding-block-end: calc(70px + env(safe-area-inset-bottom));
  }

  .customer-mobile-actions {
    position: fixed;
    z-index: 1028;
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: .58rem max(.7rem, env(safe-area-inset-right)) calc(.58rem + env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .96);
    border-block-start: 1px solid rgba(59, 0, 6, .17);
    box-shadow: 0 -12px 32px rgba(59, 0, 6, .12);
  }

  .customer-mobile-actions .btn,
  .customer-mobile-actions .btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: .62rem .5rem;
    font-size: .92rem;
    line-height: 1.15;
  }

  .customer-mobile-actions .customer-mobile-register,
  .customer-mobile-actions .customer-mobile-register:visited {
    color: #fff;
    background: var(--brand-wine-2);
    border-color: var(--brand-wine-2);
  }

  .customer-mobile-actions .customer-mobile-sponsor,
  .customer-mobile-actions .customer-mobile-sponsor:visited {
    color: var(--brand-wine-3);
    background: #fff;
    border-color: rgba(59, 0, 6, .45);
  }

  .customer-mobile-actions .btn:focus-visible {
    outline: 3px solid var(--brand-gold-readable);
    outline-offset: 2px;
  }

  .customer-save-date-modal {
    --bs-modal-margin: .55rem;
  }

  .customer-save-date-modal .modal-dialog {
    max-width: calc(100vw - 1rem);
  }

  .customer-save-date-body img {
    max-height: calc(100dvh - 1rem);
  }
}

/* Short landscape phones: the home hero already carries Register/Sponsor.
   Keeping the fixed dock duplicates CTAs and collides with the hero action row. */
/* Scoped to the homepage originally, so on every internal page the dock stayed
   `display: grid` in short landscape and laid out *below* the fold (top 389px
   in a 375px viewport) — invisible, while `padding-block-end` still reserved
   70px, leaving a dead strip under the footer. The reasoning above applies to
   any page: at this height the fixed dock costs more than it returns. */
@media (max-width: 767.98px) and (max-height: 560px) and (orientation: landscape) {
  body.has-customer-mobile-actions {
    padding-block-end: 0;
  }

  body .customer-mobile-actions {
    display: none;
  }
}

/* Portrait phones: sticky dock carries Register/Sponsor; keep only language in the header strip. */
@media (max-width: 767.98px) {
  .header-actions-persistent .register-cta,
  .header-actions-persistent .sponsor-cta {
    display: none;
  }

  .navbar-brand.navbar-brand-dual {
    max-width: calc(100% - 7.5rem);
  }
}

@media (max-height: 560px) {
  .customer-save-date-modal .modal-dialog {
    margin-block: .35rem;
  }

  .customer-save-date-body img {
    max-height: calc(100dvh - .7rem);
  }
}

/* Homepage: hero and countdown */
.customer-homepage .customer-hero {
  position: relative;
  display: block;
  min-height: clamp(620px, 78svh, 820px);
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: var(--brand-wine);
  border: 0;
}

.customer-hero-carousel,
.customer-hero-carousel .carousel-inner,
.customer-hero-carousel .carousel-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.customer-hero-carousel .carousel-item {
  background: var(--brand-wine);
}

.customer-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.03);
}

/* Focal bias per photo subject.
   NOTE (measured 320-1920px, 2026-08-03): every hero photo is wider in
   aspect (2.35:1 / 2.43:1) than the hero box at every breakpoint, so
   object-fit:cover always overflows HORIZONTALLY and the vertical
   percentage below is currently inert - the horizontal keyword is what
   actually selects the crop. The vertical values are kept because they
   take effect if the hero box ever becomes wider than the photo aspect.
   If a hero crop needs correcting, change the HORIZONTAL component or
   re-crop the source asset; changing the percentage alone will do
   nothing. */
.customer-hero-photo[data-photo-role="audience"],
.customer-hero-photo[data-photo-role="audience_2025"],
.customer-hero-photo[data-photo-role="audience_2024"] {
  object-position: center 18%;
}

.customer-hero-photo[data-photo-role="agm_2023"] {
  object-position: center 35%;
}

/* Panel photographs: the speakers' faces sit slightly below the mid-line,
   under the stage backdrop, so hold the crop on them rather than the banner. */
.customer-hero-photo[data-photo-role="panel"],
.customer-hero-photo[data-photo-role="panel_2024"],
.customer-hero-photo[data-photo-role="panel_2023"] {
  object-position: center 45%;
}

.customer-hero-photo[data-photo-role="stage"],
.customer-hero-photo[data-photo-role="stage_2025"] {
  object-position: center 25%;
}

/* The copy band spans roughly 0-40% of the hero width. The brightest carousel
   slide put body-size text at 4.07:1 there, under the 4.5:1 AA floor, so the
   first two stops carry enough density to clear it on every slide. */
.customer-hero-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(35, 0, 4, .9) 0%, rgba(59, 0, 6, .76) 42%, rgba(35, 0, 4, .2) 72%, rgba(35, 0, 4, .34) 100%),
    linear-gradient(0deg, rgba(35, 0, 4, .48), transparent 38%);
  pointer-events: none;
}

[dir="rtl"] .customer-hero-overlay {
  background:
    linear-gradient(270deg, rgba(35, 0, 4, .9) 0%, rgba(59, 0, 6, .76) 42%, rgba(35, 0, 4, .2) 72%, rgba(35, 0, 4, .34) 100%),
    linear-gradient(0deg, rgba(35, 0, 4, .48), transparent 38%);
}

.customer-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 56svh, 600px);
  padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(3rem, 4vw, 4rem);
}

.customer-hero-copy {
  width: min(560px, 60vw);
  /* No inline padding: the hero now sits on the page container (see the hero
     alignment block below), which already supplies the gutter. Keeping it put
     the headline 21px inside the spine every other section starts on. */
}

.customer-hero-mark {
  display: block;
  width: clamp(56px, 6.5vw, 90px);
  height: auto;
  margin-block: .4rem .6rem;
  object-fit: contain;
}

.customer-hero h1 {
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.01em;
  text-wrap: balance;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

[dir="rtl"] .customer-hero h1 {
  line-height: 1.2;
  letter-spacing: 0;
}

.customer-hero-context {
  display: inline-flex;
  margin-block: .6rem 0;
  padding: .2rem .5rem;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
}

.customer-hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .65rem 1rem;
  margin-block-start: .75rem;
  padding-block-start: .65rem;
  border-block-start: 1px solid rgba(226, 189, 114, .5);
}

.customer-hero-facts > span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(.82rem, 1vw, .95rem);
  font-weight: 500;
}

.customer-hero-facts i {
  color: var(--brand-gold-soft);
}

.customer-hero-venue-fact {
  align-items: flex-start !important;
  max-width: min(100%, 28rem);
}

.customer-hero-venue-copy {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}

.customer-hero-venue-name {
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.customer-hero-venue-address {
  color: rgba(255, 255, 255, .78);
  font-size: .9em;
  font-weight: 400;
  line-height: 1.35;
}

/* Venue action group — View Location | Hotel Reservation | Rate Flyer.
   The three CTAs are peers, so they share one wrapping flex row instead of
   sitting as independent items in `.customer-hero-facts`: the group then wraps
   as a unit under the venue address rather than splitting a button away from
   its siblings, and stays a single left-aligned row in RTL. */
.customer-hero-venue-actions {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  min-width: 0;
}

.customer-hero-venue-actions .customer-hero-venue-cta {
  margin-inline-start: 0;
}

.customer-hero-venue-cta,
.customer-hero-venue-cta:visited {
  align-self: center;
  margin-inline-start: .15rem;
  padding: .35rem .85rem;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .72) !important;
  background: transparent !important;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.customer-hero-venue-cta:hover,
.customer-hero-venue-cta:focus-visible {
  color: var(--brand-wine) !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* Confirmed venue — presented as an Event Details ledger inside the
   Participation block, immediately above the Attend / Sponsor cards.

   Supersedes the standalone `.customer-venue-section` band that sat between
   Ministry patronage and About. That band restated the hero, interrupted the
   institutional opening with a utility map, and was inset ~132px from the
   `.container` grid every neighbouring section uses. Here the ledger is a
   direct child of the Participation container, so it aligns with the section
   heading and the cards below it, and the page loses one cream stripe rather
   than gaining one.

   Hierarchy is deliberate: the facts are typographic and the map is a small
   letterbox that supports them. */
.event-details {
  display: grid;
  /* Map column width is tuned, not arbitrary: measured across widths, ~380px at
     a 2.35 letterbox is the point where Google collapses its overlay to the
     small "Maps" chip and the magenta/orange POI pins fall outside the crop.
     Wider re-admits them and crowds the Google wordmark. */
  grid-template-columns: minmax(0, 1fr) minmax(22.5rem, .42fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  /* Top-aligned, not centred: the gold rule and the top edge of the map form a
     single horizontal datum across the row. Centring left the map floating in
     an otherwise empty column. */
  align-items: start;
  margin-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 3.6vw, 3rem);
  /* The map is shorter than the ledger, so a top-aligned grid leaves space
     under it. Closing the whole block with a hairline — answering the gold rule
     above — bounds that space so it reads as measured negative space inside a
     ledger rather than an open gap at the page edge. */
  padding-block-end: clamp(1.25rem, 2.4vw, 1.9rem);
  border-block-end: 1px solid rgba(59, 0, 6, .13);
}

.event-details-ledger {
  margin: 0;
  border-block-start: 2px solid var(--brand-gold-readable, #8b5a10);
}

/* The map's frame sits on the same datum as the gold rule; the 2px rule is
   optically matched by nudging the map down by its own border weight. */
.event-details-map {
  margin-block-start: 2px;
}

/* Same hairline language as the About copy rules, so the ledger reads as part
   of the same document rather than as an imported card idiom. */
.event-details-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .35rem 1.25rem;
  padding-block: clamp(.9rem, 1.7vw, 1.2rem);
}

.event-details-row + .event-details-row {
  border-block-start: 1px solid rgba(59, 0, 6, .13);
}

.event-details-row dt {
  color: var(--brand-gold-readable, #8b5a10);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.event-details-row dd {
  margin: 0;
  min-width: 0;
}

.event-details-value {
  margin: 0;
  color: var(--brand-wine-2, #5a0009);
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.32;
  text-wrap: balance;
}

.event-details-note {
  margin: .3rem 0 0;
  max-width: 34rem;
  color: var(--brand-muted, #5b514d);
  font-size: .88rem;
  line-height: 1.55;
}

/* The CTA sits in the map column, beneath the map, for two reasons. It closes
   the space left under the shorter map column with real content instead of
   decorating it — two reviewers read that space as an unresolved void — and it
   pairs the action with the thing it acts on: you see where it is, then you go
   and look. It also shortens the ledger, so the two columns end near together. */
.event-details-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  min-width: 0;
}

/* The two venue actions - View Location and Hotel Reservation - are peers, so
   they share one wrapping row rather than stacking as a menu. `flex-wrap`
   plus `flex: 0 1 auto` lets the pair sit side by side wherever the aside
   column can hold them and drop to two lines when it cannot, which on a 360px
   phone is what keeps either label from being clipped. */
.event-details-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  max-width: 100%;
}

.event-details-cta {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

/* The site-wide focus ring is --brand-gold-soft at 74% alpha, which composites
   to #e7ca90 on this cream band — 1.38:1, below the 3:1 that WCAG 2.1 SC 1.4.11
   requires of a focus indicator. Corrected to --brand-gold-readable (5.13:1)
   across the whole Participation band, so the ledger CTA and the Attend /
   Sponsor buttons beneath it behave alike. The global ring still fails on other
   light sections and needs its own site-wide pass — flagged, not fixed here. */
.customer-participation a:focus-visible,
.customer-participation .btn:focus-visible {
  outline: 3px solid var(--brand-gold-readable, #8b5a10);
  outline-offset: 3px;
}

/* On the burgundy Sponsor card the dark gold would disappear; white clears 3:1
   against that card's gradient. */
.customer-participation-sponsor a:focus-visible,
.customer-participation-sponsor .btn:focus-visible {
  outline-color: #fff;
}

/* Letterbox framing, not a filter. Measured: at a wide/short aspect Google
   collapses its overlay to the smallest "Maps" chip and the magenta/orange POI
   pins fall outside the crop, so the embed sits quietly in the palette.
   Recolouring or obscuring Google's tiles, controls or attribution is not
   permitted, so chroma is tamed by area and framing only. */
.event-details-map {
  position: relative;
  width: 100%;
  aspect-ratio: 2.35 / 1;
  /* Hard floor, and the reason it exists: a pure ratio starves the height in
     the 992–1399px laptop band (a 304px column gave 129px), and below roughly
     320x145 Google re-frames the embed — the hotel marker leaves the crop and
     the attribution row disappears entirely. The floor overrides the ratio
     wherever the column is too narrow to satisfy it, at every breakpoint. */
  min-height: 150px;
  overflow: hidden;
  border: 1px solid rgba(59, 0, 6, .16);
  border-radius: var(--radius-institutional, .72rem);
  background: rgba(255, 255, 255, .55);
}

.event-details-map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The embed is keyboard-focusable (tabIndex 0) but paints no focus ring of its
   own, so a keyboard user lands on it blind — WCAG 2.1 SC 2.4.7. The ring is
   drawn on the wrapper because the iframe's own outline is not ours to style.
   `:focus-within` is deliberately NOT used: a real Tab moves focus into a
   cross-origin browsing context and the parent document stops matching it, so
   the class is set from JS instead (see initMapFocusRing). `:focus-within` is
   kept only as a progressive-enhancement fallback for same-origin/programmatic
   focus — it is not the mechanism. */
.event-details-map.is-keyboard-focused,
.event-details-map:focus-within {
  outline: 3px solid var(--brand-gold-readable, #8b5a10);
  outline-offset: 3px;
}

/* Arabic: the label column must carry "مكان انعقاد الفعالية" without wrapping,
   and Cairo needs its leading back. Uppercase and tight tracking are Latin
   typographic cues and are dropped rather than mirrored. */
[dir="rtl"] .event-details-row {
  grid-template-columns: 10.5rem minmax(0, 1fr);
}

[dir="rtl"] .event-details-row dt {
  font-size: .78rem;
  letter-spacing: 0;
  line-height: 1.7;
  text-transform: none;
}

[dir="rtl"] .event-details-value {
  line-height: 1.5;
}

[dir="rtl"] .event-details-note {
  line-height: 1.7;
}

/* The Arabic CTA label is short; without a floor it becomes a stub next to the
   English button. */
[dir="rtl"] .event-details-cta {
  min-width: 9rem;
  justify-content: center;
}

/* Tablet: once the map stacks it inherits the full container width, and a
   proportional aspect ratio would make it the tallest, most saturated object in
   the section — the exact failure being designed out. Height is therefore
   pinned rather than proportional, which keeps it a strip and (measured) also
   keeps Google's overlay collapsed to the small "Maps" chip. */
/* Hold a single column to 1199, not 991. The two-column switch used to fire at
   lg while the container only grew 720 -> 960, so every content column LOST
   width exactly as the screen got bigger: the map went 697x161 at 768 down to
   304x150 at 992 (-56%) and stayed there to 1399. The map track is now fluid
   rather than a constant, so it scales with the container instead of starving. */
@media (max-width: 1199.98px) {
  .event-details {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 1.75rem);
  }

  .event-details-map {
    aspect-ratio: auto;
    height: clamp(150px, 21vw, 180px);
    margin-block-start: 0;
  }
}

@media (max-width: 575.98px) {
  /* `[dir="rtl"] .event-details-row` outscores a bare `.event-details-row`, so
     the RTL selector has to be repeated here or Arabic keeps its two-column
     label track on phones and the values are crushed into a narrow column. */
  .event-details-row,
  [dir="rtl"] .event-details-row {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  .event-details-note {
    font-size: .85rem;
  }

  /* Phone: the container is narrow enough that a proportional letterbox is
     already restrained, and a fixed height would crop the marker. */
  .event-details-map {
    aspect-ratio: 2.15 / 1;
    height: auto;
  }
}

/* Short landscape: two columns so the block never fills the viewport. The map
   is held at a measured floor rather than simply scaled down — below roughly
   320x145 Google re-frames the embed, pushing the hotel marker outside the crop
   and truncating the attribution row, which is both useless and not permitted.
   The label column narrows instead, to buy the map that width. */
@media (max-height: 430px) and (orientation: landscape) {
  .event-details {
    grid-template-columns: minmax(0, 1fr) clamp(20rem, 46%, 22rem);
    gap: 1.25rem;
    margin-block: 1.1rem 1.5rem;
  }

  .event-details-row {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    padding-block: .6rem;
  }

  [dir="rtl"] .event-details-row {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .event-details-note {
    margin-block-start: .2rem;
  }

  .event-details-cta {
    margin-block-start: .6rem;
  }

  .event-details-map {
    aspect-ratio: auto;
    height: clamp(145px, 38vh, 165px);
  }
}

.customer-venue {
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid rgba(119, 0, 12, .14);
}

.customer-venue-label {
  margin: 0 0 .35rem;
  color: var(--brand-gold-readable, #9a6b1a);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.customer-venue-name {
  margin: 0;
  color: var(--brand-wine-2, #3b0006);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.customer-venue-address {
  margin: .25rem 0 .75rem;
  color: var(--brand-muted, #5c534f);
  font-size: .94rem;
  line-height: 1.45;
}

.registration-venue-cta {
  margin: .85rem 0 0;
}

/* View Location CTA — icon and label are one centred group on both axes, so the
   label cannot drift off-centre or clip at any width or in either language. */
.venue-location-link,
.customer-hero-venue-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  text-align: center;
}

/* The visually-hidden "(external link)" note is removed from flow so it cannot
   pull the visible label off centre. */
.venue-location-link > .visually-hidden,
.customer-hero-venue-cta > .visually-hidden {
  position: absolute;
}

.customer-hero-actions .btn-primary,
.customer-hero-actions .btn-primary:visited {
  color: #fff;
  background: var(--brand-gold-readable);
  border-color: var(--brand-gold-soft);
}

.customer-hero-actions .btn-primary:hover,
.customer-hero-actions .btn-primary:focus-visible {
  color: #fff;
  background: var(--brand-wine-2);
  border-color: #fff;
}

.customer-hero-actions .btn-outline-primary,
.customer-hero-actions .btn-outline-primary:visited {
  color: var(--brand-wine);
  background: rgba(255, 255, 255, .96);
  border-color: #fff;
}

.customer-hero-actions .btn-outline-primary:hover,
.customer-hero-actions .btn-outline-primary:focus-visible {
  color: #fff;
  background: var(--brand-wine-2);
  border-color: #fff;
}

.customer-hero-archive-label {
  position: absolute;
  z-index: 2;
  inset-inline-end: clamp(1rem, 3vw, 3rem);
  inset-block-end: 9rem;
  margin: 0;
  padding: .38rem .72rem;
  color: rgba(255, 255, 255, .96);
  background: rgba(35, 0, 4, .86);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 650;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.customer-hero-control {
  z-index: 4;
  inset-block-start: auto;
  inset-block-end: 5rem;
  width: 48px;
  height: 48px;
  color: #fff;
  background: rgba(35, 0, 4, .62);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  opacity: .84;
}

/* Both controls sit together at the trailing edge rather than straddling the
   hero. Split left/right, the previous-slide chevron landed on top of the hero
   copy column — it overlapped the registration line at desktop widths. Pairing
   them at the inline-end keeps them clear of the text in both directions,
   since the copy is inline-start in LTR and mirrors in RTL. */
.customer-hero-carousel .carousel-control-prev {
  right: auto;
  left: auto;
  inset-inline-end: calc(clamp(1rem, 3vw, 3rem) + 56px);
}

.customer-hero-carousel .carousel-control-next {
  right: auto;
  left: auto;
  inset-inline-end: clamp(1rem, 3vw, 3rem);
}

.customer-hero-control:focus-visible {
  outline: 3px solid var(--brand-gold-soft);
  outline-offset: -5px;
}

.customer-hero-indicators {
  z-index: 4;
  inset-block-end: 5.45rem;
  margin-block-end: 0;
}

/* The visible bar stays 4px; transparent block borders carry the touch target
   to 44px. `background-clip: content-box` keeps the paint off the borders, so
   enlarging the hit area does not thicken the dash. */
.customer-hero-indicators [data-bs-target] {
  width: 44px;
  height: 4px;
  border-block: 20px solid transparent;
  background-clip: content-box;
}

.customer-countdown-strip {
  position: relative;
  z-index: 5;
  margin-block-start: -1.5rem;
}

.customer-countdown-shell {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(390px, 1.2fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(59, 0, 6, .15);
  border-block-start: 4px solid var(--brand-gold);
  border-radius: var(--radius-institutional-lg);
  box-shadow: 0 24px 60px rgba(59, 0, 6, .17);
}

.customer-countdown-context h2 {
  margin-block-end: .2rem;
  color: var(--brand-wine-2);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 500;
}

.customer-countdown-context p {
  margin: 0;
  color: var(--brand-muted);
  font-size: .93rem;
}

.customer-countdown-context small {
  display: block;
  margin-block-start: .35rem;
  color: var(--brand-gold-readable);
  font-weight: 650;
}

.customer-countdown {
  width: 100%;
  max-width: none;
  margin: 0;
  gap: clamp(.45rem, 1.2vw, .8rem);
}

.customer-countdown .countdown-unit {
  min-height: 86px;
  padding: .85rem .45rem;
  background: var(--brand-ivory);
  border-color: rgba(59, 0, 6, .14);
  border-radius: var(--radius-xs);
  box-shadow: none;
}

.customer-countdown .countdown-unit strong {
  color: var(--brand-wine-2);
  font-size: clamp(1.65rem, 3.3vw, 2.45rem);
}

.customer-countdown .countdown-unit small {
  color: var(--brand-muted);
}

/* Patronage — HOME-DESIGN-002 framed editorial panel
   HOME-VISUAL-001: margin stays 0 (no body cream strip). Rhythm lives in the panel. */
.customer-ministry {
  margin-block-start: 0;
  padding-block: var(--section-pad-minor);
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(200, 137, 30, .1), transparent 16rem),
    linear-gradient(165deg, #1f0003 0%, #320006 48%, #160002 100%);
  border-block-start: 1px solid rgba(226, 189, 114, .38);
  border-block-end: 1px solid rgba(226, 189, 114, .18);
}

.customer-ministry-panel {
  display: grid;
  grid-template-columns: minmax(9rem, 11.5rem) 1px minmax(0, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  align-items: center;
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(1.15rem, 2.4vw, 1.75rem) clamp(1.15rem, 2.6vw, 2rem);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(226, 189, 114, .28);
  border-radius: var(--radius-institutional-lg, 1rem);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.customer-ministry-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.customer-ministry-lockup {
  display: block;
  width: min(100%, 11rem);
  height: auto;
  object-fit: contain;
}

.customer-ministry-divider {
  align-self: stretch;
  width: 1px;
  min-height: 4.5rem;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(226, 189, 114, .55) 18%,
    rgba(226, 189, 114, .55) 82%,
    transparent 100%
  );
}

.customer-ministry-divider-after-president {
  align-self: stretch;
  width: auto;
  min-height: 0;
  height: 1px;
  margin-block-start: 1rem;
  margin-block-end: .75rem;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(226, 189, 114, .5) 12%,
    rgba(226, 189, 114, .5) 88%,
    transparent 100%
  );
}

.customer-ministry-copy {
  min-width: 0;
}

.customer-ministry .kicker {
  color: var(--brand-gold-soft);
  margin-block-end: .45rem;
}

.customer-ministry h2 {
  /* Was a frozen 38rem while the container grows to 1320px, so the ministerial
     line wrapped to three lines inside a narrow well on wide screens. */
  max-inline-size: min(68ch, 100%);
  margin: 0;
  color: #fff;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.28;
  text-wrap: balance;
}

[dir="rtl"] .customer-ministry h2 {
  line-height: 1.4;
}

.customer-ministry p:not(.kicker) {
  max-width: 36rem;
  margin-block-start: .65rem;
  margin-block-end: 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(.84rem, .95vw, .94rem);
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .customer-ministry-panel {
    grid-template-columns: 1fr;
    gap: .85rem;
    text-align: start;
  }

  .customer-ministry-mark {
    justify-content: flex-start;
  }

  .customer-ministry-lockup {
    width: min(100%, 9.5rem);
  }

  .customer-ministry-divider {
    width: 100%;
    min-height: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(226, 189, 114, .5) 12%,
      rgba(226, 189, 114, .5) 88%,
      transparent 100%
    );
  }
}

[dir="rtl"] .customer-ministry-lockup,
[dir="rtl"] .customer-hero-mark,
[dir="rtl"] .customer-about-mark,
[dir="rtl"] .customer-president img,
[dir="rtl"] .customer-gallery-item img,
[dir="rtl"] .customer-gallery-thumb img,
[dir="rtl"] .customer-gallery-lightbox img {
  transform: none;
}

.customer-about {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-pad-major);
  background: var(--brand-ivory, #faf5ef);
}

.customer-about::before {
  position: absolute;
  inset-block: 5% auto;
  inset-inline-end: -8rem;
  width: min(44rem, 65vw);
  aspect-ratio: 1;
  content: "";
  background: url("../img/brand/darbd-geometric-background.png") center / contain no-repeat;
  opacity: .055;
  pointer-events: none;
}

.customer-about .container {
  position: relative;
}

.customer-about-aside {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 2rem);
}

.customer-about-aside h2 {
  color: var(--brand-wine-2);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.customer-about-mark {
  display: block;
  width: min(100%, 160px);
  height: auto;
  margin-block: 1rem;
  object-fit: contain;
}

.customer-about-copy p {
  padding-block: clamp(.75rem, 1.6vw, 1.2rem);
  margin: 0;
  border-block-start: 1px solid rgba(59, 0, 6, .13);
  font-size: clamp(.88rem, 1.05vw, .98rem);
  line-height: 1.65;
}

.customer-about-copy p:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

/* Confirmed 2026 participants.

   Replaces the standalone `.customer-president` band and the four-column
   `.customer-speaker-grid`. With one confirmed keynote speaker and one
   distinguished attendee, a multi-column grid rendered ~75% void — a grid of
   one reads as a missing dataset. Two equal editorial figures read as
   deliberate emphasis instead, and neither person is subordinated to the
   other. The row centres itself so it stays composed if a third figure is
   added later, and falls back to a single column on narrow screens. */
.customer-participants {
  padding-block: var(--section-pad-major);
  background: var(--brand-ivory, #faf5ef);
}

.customer-participant-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.5rem, 3.2vw, 3rem);
  align-items: start;
  max-width: 62rem;
}

.customer-participant {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
  min-width: 0;
}

.customer-participant-portrait {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--brand-cream);
}

.customer-participant-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.customer-participant-copy {
  min-width: 0;
}

.customer-participant-copy .kicker {
  margin: 0 0 var(--flow-label);
  color: var(--brand-gold-readable);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

[dir="rtl"] .customer-participant-copy .kicker {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.customer-participant-copy h3 {
  margin: 0;
  color: var(--brand-wine-2);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.customer-participants-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
  margin-block-start: clamp(1.75rem, 3.4vw, 2.75rem);
  padding-block-start: clamp(1.25rem, 2.4vw, 1.75rem);
  border-block-start: var(--rule-hairline);
  color: var(--brand-muted);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.customer-participants-link {
  color: var(--brand-wine-2);
  font-weight: 600;
  text-underline-offset: .22em;
}

@media (max-width: 575.98px) {
  .customer-participant {
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
    gap: 1rem;
  }
}

.customer-programme {
  padding-block: var(--section-pad-major);
  background: var(--brand-cream);
}

.customer-section-heading {
  max-width: 820px;
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.customer-section-heading h2 {
  color: var(--brand-wine-2);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.customer-section-heading > p:last-child {
  max-width: 600px;
  color: var(--brand-muted);
  font-size: clamp(.88rem, 1vw, .96rem);
  line-height: 1.6;
}

.customer-programme-grid > div {
  display: flex;
}

.customer-programme-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: clamp(1.25rem, 2.7vw, 2rem);
  background: var(--brand-ivory);
  border: 1px solid rgba(59, 0, 6, .13);
  border-block-start: 5px solid var(--brand-gold);
  border-radius: var(--radius-institutional-lg);
}

.customer-programme-day-two {
  color: #fff;
  background: linear-gradient(145deg, var(--brand-wine), var(--brand-wine-2));
  border-color: rgba(226, 189, 114, .3);
}

.customer-programme-card h3 {
  color: var(--brand-wine-2);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
}

.customer-programme-day-two h3,
.customer-programme-day-two .kicker {
  color: #fff;
}

.customer-day-one-line,
.customer-workshop-windows {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 1rem 0 1.5rem;
  list-style: none;
}

.customer-day-one-line li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 58px;
  padding-block: .55rem;
  border-block-start: 1px solid rgba(59, 0, 6, .12);
}

.customer-day-one-line li > span {
  color: var(--brand-gold-readable);
  font-weight: 750;
}

.customer-day-one-line p,
.customer-day-one-line small,
.customer-workshop-windows p,
.customer-workshop-windows small {
  margin: 0;
}

.customer-day-one-line p {
  color: var(--brand-ink);
  font-weight: 650;
}

.customer-day-one-line small {
  color: var(--brand-muted);
  font-size: .72rem;
}

.customer-workshop-windows li {
  display: grid;
  grid-template-columns: minmax(7.3rem, .38fr) minmax(0, 1fr);
  gap: 1rem;
  padding-block: .85rem;
  border-block-start: 1px solid rgba(255, 255, 255, .18);
}

.customer-workshop-windows bdi {
  color: var(--brand-gold-soft);
  font-weight: 750;
}

.customer-workshop-windows p {
  color: #fff;
  font-weight: 650;
}

.customer-workshop-windows small {
  color: rgba(255, 255, 255, .7);
}

.customer-workshop-notice {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .8rem;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .19);
  border-radius: var(--radius-xs);
  font-weight: 650;
}

.customer-programme-card > .btn {
  align-self: flex-start;
  margin-block-start: auto;
}

.customer-programme-day-two > .btn,
.customer-programme-day-two > .btn:visited {
  color: var(--brand-wine);
  background: #fff;
  border-color: #fff;
}

/* Speakers */
.customer-speakers {
  padding-block: var(--section-pad-major);
  background: var(--brand-ivory, #faf5ef);
}

.customer-section-heading-inline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
}

.customer-section-heading-inline .btn {
  flex: 0 0 auto;
}





@media (hover: hover) and (pointer: fine) {

}




/* Speakers placeholder. Supporting copy stays subordinate to the section
   heading; it previously outweighed it in size, weight and colour. */
.customer-speaker-announcement {
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid rgba(59, 0, 6, .13);
  border-inline-start: 3px solid var(--brand-gold);
  border-radius: var(--radius-institutional);
}

.customer-speaker-announcement p {
  max-width: 58ch;
  margin: 0;
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}

/* Previous Editions interactive gallery */
.customer-previous-editions {
  padding-block: var(--section-pad-major);
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(200, 137, 30, .16), transparent 24rem),
    linear-gradient(145deg, #210003, var(--brand-wine-2) 58%, #170002);
}

.customer-section-heading-dark h2 {
  color: #fff;
}

.customer-section-heading-dark .kicker {
  color: var(--brand-gold-soft);
}

.customer-section-heading-dark > p:last-child {
  color: rgba(255, 255, 255, .76);
}

.customer-gallery-year-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-block-end: 1rem;
}

.customer-gallery-year {
  min-width: 92px;
  min-height: 46px;
  padding: .55rem 1rem;
  color: rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  font-weight: 750;
}

.customer-gallery-year:hover,
.customer-gallery-year:focus-visible,
.customer-gallery-year.active,
.customer-gallery-year[aria-selected="true"] {
  color: var(--brand-wine);
  background: var(--brand-gold-soft);
  border-color: var(--brand-gold-soft);
}

.customer-gallery-year:focus-visible,
.customer-gallery-open:focus-visible,
.customer-gallery-thumb:focus-visible,
.customer-gallery-nav:focus-visible,
.customer-lightbox-nav:focus-visible {
  outline: 3px solid var(--brand-gold-soft);
  outline-offset: 3px;
}

.customer-gallery-stage {
  position: relative;
  min-height: clamp(300px, 32vw, 460px);
  overflow: hidden;
  background: rgba(12, 0, 2, .74);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-institutional-lg);
}

.customer-gallery-stage:focus-visible {
  outline: 3px solid var(--brand-gold-soft);
  outline-offset: 4px;
}

.customer-gallery-item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
}

.customer-gallery-item:not([hidden]) {
  animation: customer-gallery-reveal var(--motion-base) var(--ease-standard) both;
}

@keyframes customer-gallery-reveal {
  from { opacity: .62; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.customer-gallery-open {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(.8rem, 2vw, 1.5rem);
  overflow: hidden;
  background: transparent;
  border: 0;
}

.customer-gallery-open img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  transition: transform var(--motion-base) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .customer-gallery-open:hover img {
    transform: scale(1.008);
  }
}

.customer-gallery-item figcaption {
  padding: .8rem clamp(4.2rem, 8vw, 6rem);
  color: rgba(255, 255, 255, .88);
  background: rgba(35, 0, 4, .9);
  border-block-start: 1px solid rgba(255, 255, 255, .15);
  text-align: center;
  font-size: .9rem;
}

.customer-gallery-nav {
  position: absolute;
  z-index: 3;
  inset-block-start: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--brand-wine);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
  transform: translateY(-50%);
}

.customer-gallery-prev {
  inset-inline-start: 1rem;
}

.customer-gallery-next {
  inset-inline-end: 1rem;
}

[dir="rtl"] .customer-gallery-nav i,
[dir="rtl"] .customer-lightbox-nav i {
  transform: scaleX(-1);
}

.customer-gallery-thumbs {
  display: flex;
  gap: .7rem;
  margin-block-start: .85rem;
  /* Each edition now carries its full supplied set (11 / 8 / 5) rather than
     two photographs, so the strip has to scroll. Without this the thumbs kept
     their flex-shrink default and collapsed to ~22px wide on a phone — below a
     usable tap target — instead of overflowing. */
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: inline proximity;
}

.customer-gallery-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hold the declared size; the strip scrolls instead of the thumbs shrinking. */
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(86px, 12vw, 148px);
  height: clamp(58px, 7vw, 86px);
  padding: .25rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-xs);
}

.customer-gallery-thumb[aria-current="true"] {
  border-color: var(--brand-gold-soft);
}

.customer-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.customer-gallery-pending {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: clamp(360px, 48vw, 580px);
  padding: clamp(2rem, 7vw, 6rem);
  text-align: center;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    rgba(255, 255, 255, .04);
  background-size: 42px 42px;
  border: 1px dashed rgba(226, 189, 114, .5);
  border-radius: var(--radius-institutional-lg);
}

.customer-gallery-pending > bdi {
  color: rgba(226, 189, 114, .28);
  font-size: clamp(4.5rem, 14vw, 10rem);
  font-weight: 800;
  line-height: .9;
}

.customer-gallery-pending h3 {
  margin-block-start: 1rem;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.customer-gallery-pending p {
  max-width: 650px;
  color: rgba(255, 255, 255, .72);
}

.customer-gallery-lightbox .modal-content {
  color: #fff;
  background: rgba(22, 0, 3, .98);
  border: 1px solid rgba(255, 255, 255, .18);
}

.customer-gallery-lightbox .modal-header {
  border-block-end-color: rgba(255, 255, 255, .16);
}

.customer-gallery-lightbox .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .9;
}

.customer-gallery-lightbox .modal-body {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: .8rem;
  min-height: min(76vh, 760px);
  padding: 1rem;
}

.customer-gallery-lightbox figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
}

.customer-gallery-lightbox figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.customer-gallery-lightbox figcaption {
  padding-block-start: .8rem;
  color: rgba(255, 255, 255, .82);
  text-align: center;
}

.customer-lightbox-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--brand-wine);
  background: #fff;
  border: 0;
  border-radius: 50%;
}

/* Sponsors */
.customer-sponsors {
  padding-block: var(--section-pad-major);
  background: var(--brand-ivory, #faf5ef);
}

.customer-sponsor-tiers {
  display: grid;
  gap: .7rem;
}

.customer-sponsor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 84px;
  padding: 1rem clamp(1rem, 2.5vw, 2rem);
  background: var(--brand-ivory);
  border: 1px solid rgba(59, 0, 6, .12);
  border-inline-start: 5px solid rgba(59, 0, 6, .34);
  border-radius: var(--radius-institutional);
}

.customer-sponsor-row h3,
.customer-sponsor-row p {
  margin: 0;
}

.customer-sponsor-row h3 {
  color: var(--brand-wine-2);
  font-size: clamp(1.12rem, 2vw, 1.6rem);
}

.customer-sponsor-row p {
  color: var(--brand-muted);
  font-size: .88rem;
}

.customer-sponsor-platinum {
  min-height: 142px;
  border-inline-start-width: 9px;
  border-inline-start-color: var(--brand-gold);
  box-shadow: 0 18px 42px rgba(59, 0, 6, .08);
}

.customer-sponsor-platinum h3 {
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.customer-sponsor-gold {
  min-height: 120px;
  border-inline-start-width: 7px;
  border-inline-start-color: var(--brand-gold-readable);
}

.customer-sponsor-silver,
.customer-sponsor-bronze {
  min-height: 100px;
}

.customer-sponsor-hospitality {
  margin-block-start: .7rem;
  background: var(--brand-cream);
  border: 2px solid rgba(200, 137, 30, .42);
  border-inline-start-width: 5px;
}

.customer-sponsor-supporting,
.customer-sponsor-other {
  min-height: 72px;
  background: #fff;
}

.customer-sponsor-cta {
  display: flex;
  justify-content: center;
  margin-block-start: 2rem;
}

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
  .customer-hero-copy {
    width: min(480px, 86vw);
  }

  .customer-hero-overlay,
  [dir="rtl"] .customer-hero-overlay {
    background: linear-gradient(90deg, rgba(35, 0, 4, .82), rgba(59, 0, 6, .55) 68%, rgba(35, 0, 4, .3));
  }

  .customer-countdown-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-ministry-lockup {
    width: min(100%, 9.5rem);
    margin-inline: 0;
  }

  .customer-about-aside {
    position: static;
  }

  .customer-about-mark {
    width: min(140px, 52vw);
  }

}

@media (max-width: 767.98px) {
  .customer-homepage .customer-hero,
  .customer-hero-content {
    min-height: clamp(400px, 72svh, 560px);
  }

  .customer-hero-content {
    padding-block: 2.5rem 5rem;
  }

  .customer-hero-copy {
    width: 100%;
    padding-inline: 1.25rem;
  }

  .customer-hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  .customer-hero-facts {
    display: grid;
    gap: .55rem;
  }

  .customer-hero-venue-fact {
    max-width: none;
  }

  .customer-hero-venue-actions {
    justify-self: start;
    max-width: 100%;
  }

  .customer-hero-venue-cta {
    justify-self: start;
    min-height: 44px;
  }

  .customer-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-hero-actions .btn {
    width: auto;
    min-width: 0;
    padding-inline: .55rem;
    font-size: .82rem;
  }

  .customer-hero-control {
    width: 42px;
  }

  .customer-hero-control .carousel-control-prev-icon,
  .customer-hero-control .carousel-control-next-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  /* On a phone the copy stack fills the lower hero, so an absolutely
     positioned caption anchored to the bottom lands on the button row. It is
     pinned to the top of the image frame instead, where nothing else sits. */
  .customer-hero-archive-label {
    inset-block-start: 1rem;
    inset-block-end: auto;
    max-width: calc(100% - 2rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .customer-countdown-strip {
    margin-block-start: -2rem;
  }

  .customer-countdown-shell {
    padding: 1rem;
  }

  .customer-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-countdown .countdown-unit {
    min-height: 76px;
  }

  .customer-ministry h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }

  .customer-president-image-wrap {
    min-height: 220px;
  }

  .customer-section-heading-inline {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-gallery-stage {
    min-height: clamp(260px, 62vw, 360px);
  }

  .customer-gallery-nav {
    inset-block-start: auto;
    inset-block-end: 4.2rem;
    width: 44px;
    height: 44px;
    transform: none;
  }

  .customer-gallery-prev {
    inset-inline-start: .65rem;
  }

  .customer-gallery-next {
    inset-inline-end: .65rem;
  }

  .customer-gallery-item figcaption {
    min-height: 74px;
    padding-inline: 3.6rem;
    font-size: .78rem;
  }

  .customer-gallery-lightbox .modal-body {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: calc(100dvh - 72px);
    gap: .35rem;
    padding: .55rem;
  }

  .customer-lightbox-nav {
    width: 42px;
    height: 42px;
  }

  .customer-sponsor-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }
}

@media (max-width: 575.98px) {
  .customer-hero-copy {
    padding-inline: 2.5rem;
  }


  .customer-programme-card {
    padding: 1rem;
  }

  .customer-day-one-line li {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }

  .customer-day-one-line small {
    grid-column: 2;
  }

  .customer-workshop-windows li {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }

  .customer-gallery-year {
    flex: 1 1 0;
    min-width: 0;
  }

  .customer-gallery-thumbs {
    overflow-x: auto;
    padding-block: .2rem;
  }

  .customer-gallery-lightbox .modal-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .customer-gallery-lightbox figure {
    grid-column: 1;
    grid-row: 1;
  }

  .customer-lightbox-nav {
    position: absolute;
    z-index: 2;
    inset-block-end: 1rem;
  }

  .customer-lightbox-prev {
    inset-inline-start: 1rem;
  }

  .customer-lightbox-next {
    inset-inline-end: 1rem;
  }

  .customer-gallery-lightbox figcaption {
    min-height: 58px;
    padding-inline: 3.5rem;
  }
}

@media (max-width: 390px) {
  .customer-hero-copy {
    padding-inline: 2.25rem;
  }

  .customer-hero-mark {
    width: clamp(56px, 16vw, 90px);
  }

  .customer-hero-actions .btn {
    font-size: .84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-hero-carousel .carousel-item,
  .customer-hero-carousel.carousel-fade .carousel-item,
  .customer-hero-carousel.carousel-fade .active.carousel-item-start,
  .customer-hero-carousel.carousel-fade .active.carousel-item-end {
    transition: none !important;
  }

  .customer-hero-photo,
  .customer-gallery-item,
  .customer-gallery-open img,
  .customer-gallery-lightbox img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

body.is-reduced-motion .customer-hero-carousel .carousel-item,
body.is-reduced-motion .customer-hero-photo,
body.is-reduced-motion .customer-gallery-item,
body.is-reduced-motion .customer-gallery-open img,
body.is-reduced-motion .customer-gallery-lightbox img {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Shared shell correction: the late desktop footer rule in site.css must not
   override the established stacked tablet/mobile footer. */
@media (max-width: 1199.98px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* New 2 homepage content and the existing shared gallery lightbox hardening. */
.customer-hero-patronage {
  max-width: 48rem;
  margin-block: .55rem .15rem;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.74rem, .9vw, .84rem);
  line-height: 1.5;
}

.customer-hero-registration {
  max-width: 36rem;
  margin-block: .45rem 0;
  color: var(--brand-gold-soft);
  font-size: .82rem;
  font-weight: 600;
}

/* Homepage sponsors: the confirmed partner carries the section, then a single
   route through to the sponsorship detail. Fees and slot counts live on the
   sponsors route; repeating them here read as a pricing page. */
/* Homepage sponsor categories — client Website Comments-3 items 1 and 2.
   One heading per category, that category's logos beneath it, categories
   stacked in contractual tier order. The previous build repeated a
   "2026 <tier> Sponsor" caption above every logo, so the two Bronze sponsors
   read as two separate categories.

   Honour plate, not a card: a hairline above each category heading reads as a
   deliberate acknowledgement rather than a grid of tiles that never filled.
   Scoped to the homepage; the Sponsors page keeps the shared tier card. */
.confirmed-sponsor-section {
  display: flex;
  flex-direction: column;
  gap: clamp(1.15rem, 2.2vw, 1.75rem);
  margin-block: 2rem 0;
}

.customer-sponsors .sponsor-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.8rem, 1.6vw, 1.1rem);
  max-width: min(100%, 32rem);
  padding-block: clamp(1.05rem, 2.2vw, 1.5rem);
  border-block-start: var(--rule-hairline);
}

/* The last category closes the plate, so the stack is bounded top and bottom
   the way the single-partner plate was. */
.customer-sponsors .sponsor-category:last-child {
  border-block-end: var(--rule-hairline);
}

.customer-sponsors .sponsor-category-title {
  margin: 0;
  color: var(--brand-gold-readable);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

[dir="rtl"] .customer-sponsors .sponsor-category-title {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Logos sit side by side while the row can hold them and wrap only when it
   cannot — client Website Comments-3 item 2. */
.customer-sponsors .sponsor-category-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.6vw, 2rem);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-sponsors .sponsor-category-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Shrink together rather than overflow; min-width:0 is what actually lets a
     flex item go below its own content width. */
  flex: 0 1 auto;
  min-width: 0;
}

.customer-sponsors .sponsor-category-logo img {
  display: block;
  /* Height cap first, so a wide wordmark never reads as a larger sponsor than
     a compact mark. Native aspect ratio is preserved throughout. 2.75rem, not
     3.25rem: the Ghada wordmark is 7.3:1, so at 3.25rem it alone measured
     378px and pushed Taqneen onto a second row inside the plate. */
  max-height: 2.75rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* From small-tablet up the category's logos share one row and shrink together
   rather than wrapping - client Website Comments-3 item 2, "next to each other
   where responsive width permits". `min-width: 0` on the item is what lets a
   flex child go below its content width; `max-width: 100%` plus `height: auto`
   on the image then scales it down at its own aspect ratio. Below 576px the
   row wraps instead, because shrinking two marks into a 328px container makes
   both illegible. */
@media (min-width: 576px) {
  .customer-sponsors .sponsor-category-logos {
    flex-wrap: nowrap;
  }
}

/* A category the client asked for that has no approved 2026 entrant carries
   its heading and nothing else — no logo, no placeholder copy, no CTA. The
   reduced block height keeps it reading as a category rule rather than as a
   row whose logos failed to load. */
.customer-sponsors .sponsor-category-structural {
  padding-block: clamp(.85rem, 1.8vw, 1.15rem);
}

/* Sponsor wall: the supplied supporter marks are presented together in a
   balanced, responsive grid while remaining isolated from other page grids. */
.customer-sponsors .sponsor-category[aria-label="Supporting Organisations"],
.customer-sponsors .sponsor-category[aria-label="المنظمات الداعمة"] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  max-width: min(100%, 48rem);
}

.customer-sponsors .sponsor-category[aria-label="Supporting Organisations"] .sponsor-category-title,
.customer-sponsors .sponsor-category[aria-label="المنظمات الداعمة"] .sponsor-category-title {
  grid-column: 1 / -1;
  width: 100%;
}

.customer-sponsors .sponsor-category-logos-supporting {
  display: contents;
}

.customer-sponsors .sponsor-category-logos-supporting .sponsor-category-logo {
  min-height: 4rem;
  width: 100%;
}

.customer-sponsors .sponsor-category-logos-supporting .sponsor-category-logo img {
  max-width: min(100%, 9rem);
  max-height: 3rem;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .customer-sponsors .sponsor-category[aria-label="Supporting Organisations"],
  .customer-sponsors .sponsor-category[aria-label="المنظمات الداعمة"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .customer-sponsors .sponsor-category[aria-label="Supporting Organisations"],
  .customer-sponsors .sponsor-category[aria-label="المنظمات الداعمة"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sponsor-enquiry-cta {
  margin-block: 2rem 0;
}

/* Desktop sets the statement against the confirmed partner so neither sits in
   dead space; below lg it stacks statement, partner, action. */
@media (min-width: 992px) {
  .sponsors-editorial {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }

  .sponsors-editorial .customer-section-heading {
    grid-column: 1;
    grid-row: 1;
    margin-block-end: 0;
  }

  .sponsors-editorial .sponsor-enquiry-cta {
    grid-column: 1;
    grid-row: 2;
    margin-block: 1.75rem 0;
  }

  .sponsors-editorial .confirmed-sponsor-section {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: start;
    justify-content: center;
    margin-block: 0;
  }
}

.customer-participation {
  padding-block: var(--section-pad-major);
  background: var(--brand-cream);
}

.customer-participation-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.35rem, 3vw, 2.2rem);
  background: #fff;
  border: 1px solid rgba(59, 0, 6, .12);
  border-radius: var(--radius-institutional-lg);
}

.customer-participation-card h3 {
  color: var(--brand-wine-2);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
}

.customer-participation-card .btn {
  margin-block-start: auto;
}

.customer-participation-sponsor {
  color: #fff;
  background: linear-gradient(145deg, var(--brand-wine), var(--brand-wine-3));
}

.customer-participation-sponsor h3,
.customer-participation-sponsor p {
  color: #fff;
}

.customer-participation-sponsor .btn-outline-primary,
.customer-participation-sponsor .btn-outline-primary:visited {
  color: var(--brand-wine-2);
  background: #fff;
  border-color: #fff;
}

.customer-gallery-lightbox .modal-dialog,
.customer-gallery-lightbox .modal-content {
  height: 100dvh;
  max-height: 100dvh;
}

.customer-gallery-lightbox .modal-content {
  overflow: hidden;
}

.customer-gallery-lightbox .modal-header {
  flex: 0 0 auto;
}

.customer-gallery-lightbox .modal-body {
  min-height: 0;
  overflow: hidden;
}

.customer-gallery-lightbox figure img {
  max-height: calc(100dvh - 8rem);
}

body.gallery-lightbox-open {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .customer-hero-patronage {
    max-width: 38rem;
    font-size: .87rem;
    line-height: 1.5;
  }
}

@media (max-width: 575.98px) {
  .customer-sponsors .sponsor-category {
    padding-block: 1rem;
  }

  .customer-sponsors .sponsor-category-logo img {
    max-height: 2.4rem;
  }

  .customer-participation-card {
    min-height: 15rem;
  }
}

@media (max-height: 520px) {
  .customer-gallery-lightbox .modal-header {
    min-height: 44px;
    padding: .3rem .65rem;
  }

  .customer-gallery-lightbox .modal-title {
    font-size: .88rem;
  }

  .customer-gallery-lightbox .modal-body {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-rows: minmax(0, 1fr);
    gap: .35rem;
    min-height: 0;
    padding: .35rem;
  }

  .customer-gallery-lightbox figure {
    grid-column: 2;
    grid-row: 1;
    height: calc(100dvh - 51px);
  }

  .customer-gallery-lightbox figure img {
    max-height: calc(100dvh - 84px);
  }

  .customer-gallery-lightbox figcaption {
    max-height: 2.4rem;
    overflow-y: auto;
    padding-block-start: .2rem;
    padding-inline: .35rem;
    font-size: .72rem;
    line-height: 1.25;
  }

  .customer-gallery-lightbox .customer-lightbox-nav {
    position: static;
    width: 38px;
    height: 38px;
    align-self: center;
  }

  .customer-gallery-lightbox .customer-lightbox-prev {
    grid-column: 1;
    grid-row: 1;
  }

  .customer-gallery-lightbox .customer-lightbox-next {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Phone landscape / short viewports — must come after width-based mobile
   rules so a 620px or 400px hero floor cannot outrank it.
   Header often stacks countdown on a second row, so offset must clear that
   chrome. Protocol patronage must remain fully readable (no clamp). */
@media (max-height: 560px) {
  .customer-homepage .customer-hero {
    height: calc(100svh - 7.25rem);
    height: calc(100dvh - 7.25rem);
    min-height: 0;
    max-height: calc(100svh - 7.25rem);
    max-height: calc(100dvh - 7.25rem);
  }

  .customer-hero-content {
    min-height: 0;
    height: 100%;
    align-items: flex-end;
    padding-block: .55rem 3.25rem;
    overflow: visible;
  }

  .customer-hero-copy {
    width: min(640px, 92vw);
    max-height: none;
    overflow: visible;
  }

  /* Demote secondary chrome before crushing the title (HOME-DESIGN-002). */
  .customer-hero-mark,
  .customer-hero-context {
    display: none;
  }

  .customer-hero-facts {
    display: none;
  }

  .customer-hero h1 {
    font-size: 1.5rem;
    line-height: 1.15;
  }

  /* Full ministerial line — never ellipsis/clamp protocol copy. */
  .customer-hero-patronage {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    max-width: 52rem;
    margin-block: .25rem .35rem;
    font-size: clamp(.68rem, 1.7vh, .78rem);
    line-height: 1.35;
    white-space: normal;
  }

  .customer-hero-registration {
    display: none;
  }

  .customer-hero-actions {
    margin-block: .15rem 0;
  }

  .customer-hero-actions .btn {
    min-height: 44px;
    padding-block: .4rem;
  }

  /* Keep chevrons clear of patronage / CTAs: pin to the top of the image. */
  .customer-hero-control {
    inset-block-start: .85rem;
    inset-block-end: auto;
    width: 40px;
    height: 40px;
  }

  .customer-hero-indicators {
    inset-block-start: auto;
    inset-block-end: .55rem;
  }

  .customer-hero-archive-label {
    inset-block-start: .65rem;
    inset-block-end: auto;
  }
}



/* Short-viewport venue actions (23 August 2026).

   HOME-DESIGN-002 hides `.customer-hero-facts` below 560px of viewport height
   so the demoted chrome cannot crush the H1. The date and venue address both
   repeat in the Event Details ledger, so losing them costs nothing — but
   View Location / Hotel Reservation / Rate Flyer now live only in the hero,
   and hiding all three leaves a landscape phone with no route to the hotel
   booking or the rate sheet.

   Measured: the compact action row costs ~56px, and the hero is
   `100dvh - 7.25rem`. A landscape phone (>=560px wide, >=380px tall) still
   clears the hero with the row restored; a shorter or narrower window does not,
   and there the original blanket hide stands unchanged — so no viewport is
   worse off than before this row was reinstated. */
@media (max-height: 560px) and (min-height: 380px) and (min-width: 560px) {
  .customer-hero-facts {
    display: flex;
    gap: .3rem .4rem;
    margin-block-start: .35rem;
    padding-block-start: .3rem;
  }

  .customer-hero-facts > span:not(.customer-hero-venue-actions) {
    display: none;
  }

  .customer-hero-venue-actions .customer-hero-venue-cta {
    min-height: 36px;
    padding-block: .2rem;
    font-size: .74rem;
  }
}


/* Compact one-line countdown (customer revision 2026-08-13) */
.customer-countdown-compact {
  padding-block: .85rem;
  border-block: 1px solid rgba(119, 0, 12, .1);
  background: linear-gradient(180deg, rgba(247, 243, 240, .95), #fff);
}
.customer-countdown-shell-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem 1.25rem;
}
.customer-countdown-inline-label {
  margin: 0;
  color: var(--ciarb-deep-red);
  font-size: .92rem;
  font-weight: 650;
}
.customer-countdown-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .35rem;
}
.customer-countdown-inline .countdown-unit {
  min-width: 3.4rem;
  padding: .45rem .55rem;
  border: 1px solid rgba(119, 0, 12, .12);
  border-radius: .3rem;
  background: #fff;
  box-shadow: none;
}
.customer-countdown-inline .countdown-unit strong {
  font-size: 1.15rem;
}
@media (max-width: 575.98px) {
  .customer-countdown-shell-inline { justify-content: center; text-align: center; }
  .customer-countdown-inline { justify-content: center; width: 100%; }
  .customer-countdown-inline .countdown-unit { flex: 1 1 calc(25% - .35rem); min-width: 0; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .customer-countdown-compact { display: none; }
}


/* ---------------------------------------------------------------------------
   Navigation containment.

   Bootstrap disables Popper for dropdowns inside a .navbar, so navbar menus are
   statically positioned and have NO collision avoidance. `.dropdown-menu` also
   had `min-width: 14rem` and no max-width, while `.dropdown-item` is
   `white-space: nowrap` — so each menu sized to the max-content of its longest
   label ("Ciarb Qatar Branch AGM & Conference 2023", 347px; 424px in Arabic)
   and ran off the viewport: measured -82px in Arabic at every width >=1400,
   and +4px in English at 1440. `overflow-x: clip` on the page then HID that
   overflow, so the clipped area was unreachable by scroll, keyboard or touch.

   The fix is to bound the menu and let long labels wrap, so the failure mode
   becomes one extra line instead of off-canvas content. `.dropdown-menu-end`
   (applied in the generator) anchors menus to their inline-end and is logical,
   so it resolves correctly in both LTR and RTL without a language branch.
   --------------------------------------------------------------------------- */
.primary-nav .dropdown-menu {
  max-width: min(20rem, calc(100vw - 2rem));
}

.primary-nav .dropdown-item {
  align-items: flex-start;
  line-height: 1.35;
  white-space: normal;
}


/* ---------------------------------------------------------------------------
   Hero countdown — relocated from the site header (see countdown_html()).
   Sits on the dark hero, immediately above the Register / Sponsor actions, so
   the urgency signal is adjacent to the action it is meant to drive.
   --------------------------------------------------------------------------- */
.customer-hero-countdown {
  display: inline-flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1rem);
  margin-block: 1.1rem 0;
  padding: .6rem clamp(.85rem, 2vw, 1.25rem);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(226, 189, 114, .34);
  border-radius: var(--radius-institutional, .72rem);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.customer-hero-countdown .header-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 2.75rem;
}

.customer-hero-countdown .header-countdown-unit strong {
  color: #fff;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.customer-hero-countdown .header-countdown-unit small {
  color: rgba(255, 255, 255, .74);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

[dir="rtl"] .customer-hero-countdown .header-countdown-unit small {
  letter-spacing: 0;
  text-transform: none;
}

.customer-hero-countdown .header-countdown-sep {
  color: rgba(226, 189, 114, .6);
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-.3em);
}

@media (max-width: 575.98px) {
  .customer-hero-countdown {
    gap: .45rem;
    padding: .5rem .7rem;
  }

  .customer-hero-countdown .header-countdown-unit {
    min-width: 2.35rem;
  }
}

/* Landscape phones: the hero is already tight, so the counter compresses
   rather than pushing the actions below the fold. */
@media (max-height: 430px) and (orientation: landscape) {
  .customer-hero-countdown {
    margin-block-start: .7rem;
    padding: .35rem .6rem;
  }

  .customer-hero-countdown .header-countdown-unit strong {
    font-size: .95rem;
  }
}

/* Header action buttons were forced to 34px below the expand breakpoint,
   under the 44px AA target-size floor on every laptop and phone. */
.header-actions-persistent .btn,
.header-actions-persistent .nav-cta {
  min-height: 44px;
}

/* Arabic: `text-transform: uppercase` is a no-op on Arabic glyphs but NOT on
   Latin runs embedded in Arabic strings — it rendered the brands as "CIARB"
   and "DARBD" inside Arabic copy, against the approved lockups. Positive
   tracking also stretches cursive joins. Both are suppressed site-wide in RTL. */
[dir="rtl"] .kicker,
[dir="rtl"] .eyebrow,
[dir="rtl"] .sponsor-tier-label,
[dir="rtl"] .sponsor-category-title,
[dir="rtl"] .customer-hero-countdown small {
  letter-spacing: 0;
  text-transform: none;
}

/* Arabic CTAs are shorter than their English counterparts ("الرعاية" 79px vs
   "Sponsor" 98px); an unequal pair reads as a mistake rather than as language. */
[dir="rtl"] .nav-cta {
  min-inline-size: 7.5rem;
}


/* ---------------------------------------------------------------------------
   Hero legibility.

   The overlay was a flat wash, so text contrast changed with whichever
   carousel photo was showing — the 2024 panel slide is a red-dominant stage
   shot and the copy sat straight on it. A directional scrim anchors the dark
   mass to the text side and lets the photograph stay bright on the other, so
   legibility is constant across all three slides instead of per-photo. The
   duplicate DArbD watermark is gone (the header already carries the lockup
   40px above), which also removes the element that sat worst over the imagery.
   --------------------------------------------------------------------------- */
.customer-hero .customer-hero-overlay {
  background:
    linear-gradient(100deg, rgba(20, 0, 3, .90) 0%, rgba(20, 0, 3, .62) 46%, rgba(20, 0, 3, .16) 100%),
    linear-gradient(to top, rgba(20, 0, 3, .55) 0%, transparent 42%);
}

[dir="rtl"] .customer-hero .customer-hero-overlay {
  background:
    linear-gradient(260deg, rgba(20, 0, 3, .90) 0%, rgba(20, 0, 3, .62) 46%, rgba(20, 0, 3, .16) 100%),
    linear-gradient(to top, rgba(20, 0, 3, .55) 0%, transparent 42%);
}

/* The archive credit floated over the photograph as a bordered badge. It must
   stay visible — it is the attribution that keeps previous-edition photography
   from reading as 2026 material — but it belongs with the carousel's chrome,
   so it sits quietly on the indicator line as a caption rather than a chip. */
.customer-hero-archive-label {
  position: absolute;
  z-index: 2;
  inset-block-end: 1.6rem;
  inset-inline-end: clamp(3.5rem, 6vw, 5.5rem);
  margin: 0;
  padding: 0;
  /* Was rgba(255,255,255,.78) with a single soft shadow, which disappeared
     into the brighter areas of the hero photography. Full-strength glyphs plus
     a tight shadow for edge definition over the existing soft one for
     separation. Still transparent-backed and still secondary — no box. */
  color: #fff;
  background: transparent;
  border: 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: .04em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .9),
    0 2px 10px rgba(0, 0, 0, .65);
}

@media (max-width: 767.98px) {
  .customer-hero-archive-label {
    inset-block-end: 1.15rem;
    inset-inline-end: clamp(2.75rem, 9vw, 3.5rem);
    font-size: .72rem;
  }
}


/* ---------------------------------------------------------------------------
   Target sizes. Measured below the 44px AA floor before this pass: nav links
   34px, hero venue CTA 40px, carousel controls 40px, the participants link
   20px, and the carousel indicators 24px. Padding is used rather than raw
   height so the visual weight of each control is unchanged.
   --------------------------------------------------------------------------- */
.customer-homepage .primary-nav .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.customer-hero-venue-cta {
  min-height: 44px;
}

.customer-participants-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.customer-hero-control {
  width: 44px;
  height: 44px;
}



/* Short landscape: a 100+px sticky bar on a 375px-tall screen is a third of the
   viewport. The header still scrolls with the page there, it simply stops
   occupying the screen permanently. */
@media (max-height: 480px) and (orientation: landscape) {
  .site-header.sticky-top {
    position: static;
  }
}


/* Footer navigation links measured 17px tall (EN) / 24px (AR) and the menu
   trigger 40px — all under the 44px AA target floor. Padding, not height, so
   the footer's visual density is unchanged. */
.site-footer .footer-inline a,
.site-footer .footer-compact-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.menu-trigger {
  width: 44px;
  height: 44px;
}

.navbar-brand-dual {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* On phones the hero copy fills the width, so bottom-anchored carousel chevrons
   land on the CTA and registration lines. The existing top-pin lived only in a
   `max-height: 560px` query, which does not match a 390x844 phone held
   upright — the common case. Pin by width as well. */
@media (max-width: 767.98px) {
  .customer-hero-control {
    inset-block-start: .85rem;
    inset-block-end: auto;
    width: 44px;
    height: 44px;
  }

  .customer-hero-carousel .carousel-control-prev {
    inset-inline-end: calc(clamp(.75rem, 3vw, 1.25rem) + 52px);
  }

  .customer-hero-carousel .carousel-control-next {
    inset-inline-end: clamp(.75rem, 3vw, 1.25rem);
  }

  .customer-hero-archive-label {
    inset-block-start: auto;
    inset-block-end: 1.15rem;
  }
}


/* Phone hero collisions, all measured at 390x844:
   - the organiser eyebrow ran underneath the carousel chevrons;
   - the centred slide indicators sat on top of the registration line;
   - the countdown's "SECONDS" label was clipped by the strip edge. */
@media (max-width: 767.98px) {
  .customer-hero-copy .eyebrow {
    padding-inline-end: 6.5rem;
  }

  /* Indicators move to the leading edge and the archive credit holds the
     trailing edge, so the two share the bottom line instead of colliding with
     the copy above it. */
  .customer-hero-indicators {
    justify-content: flex-start;
    inset-block-end: 1.1rem;
    inset-inline-start: 1rem;
    inset-inline-end: auto;
    margin-inline: 0;
  }

  .customer-hero-archive-label {
    inset-block-end: 1.15rem;
    inset-inline-end: 1rem;
    max-width: 52%;
    text-align: end;
  }

  .customer-hero-countdown {
    width: 100%;
    justify-content: space-between;
  }

  .customer-hero-countdown .header-countdown-unit small {
    font-size: .56rem;
    letter-spacing: .06em;
  }
}


/* ---------------------------------------------------------------------------
   Hero alignment with the page spine.

   `.home-hero .container { max-width: 100% }` in site.css exists for the
   header, which legitimately spans the full width — but it also stripped the
   hero of the content column, so the hero copy started at the viewport edge
   while every section below started at the container. Measured offset: 70px at
   1280, 60px at 1440 and 300px at 1920. The headline therefore never sat on
   the same vertical line as the page, which is the single most visible
   alignment fault on a wide screen. Scoped to the homepage hero so internal
   page heroes are untouched.
   --------------------------------------------------------------------------- */
.customer-hero .container.customer-hero-content {
  max-width: var(--bs-container-max-width, 1320px);
  margin-inline: auto;
}

@media (min-width: 576px)  { .customer-hero .container.customer-hero-content { --bs-container-max-width: 540px; } }
@media (min-width: 768px)  { .customer-hero .container.customer-hero-content { --bs-container-max-width: 720px; } }
@media (min-width: 992px)  { .customer-hero .container.customer-hero-content { --bs-container-max-width: 960px; } }
@media (min-width: 1200px) { .customer-hero .container.customer-hero-content { --bs-container-max-width: 1140px; } }
@media (min-width: 1400px) { .customer-hero .container.customer-hero-content { --bs-container-max-width: 1320px; } }

/* The Day 2 card carries four workshop windows against Day 1's eight sessions
   and the grid stretches both to equal height, leaving Day 2 with a 186px void.
   Anchoring the notice to the foot only moved the void higher up the card, so
   instead the window list absorbs the free height and its four rows breathe
   into it — the space is used rather than relocated. */
.customer-workshop-windows {
  flex: 1 1 auto;
  align-content: space-between;
}

/* With the notice already claiming the free space, a second `auto` on the
   button split the gap in two and left 101px hanging between them. The button
   follows the notice on normal flow inside this card. */
.customer-programme-day-two > .btn {
  margin-block-start: 1.25rem;
}


/* The sticky mobile CTA bar stays out of the way while the hero — which already
   carries Register / Sponsor — is on screen. `is-revealed` is set from JS once
   the hero scrolls away; with JS unavailable the bar simply behaves as before,
   so the call to action is never lost. */
body.js-motion-ready .customer-mobile-actions {
  transform: translateY(120%);
  transition: transform var(--motion-standard) var(--ease-standard);
}

body.js-motion-ready .customer-mobile-actions.is-revealed {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.js-motion-ready .customer-mobile-actions {
    transition: none;
  }
}


/* ---------------------------------------------------------------------------
   Programme Day 1 / Day 2 — one sequence vocabulary.

   Day 1 previously used `.programme-card`, a two-column `time | detail` grid,
   against source data of ("TBC", title, "") — no usable time, no description.
   The title was pushed into the 118-160px time column and the 1fr detail
   column rendered empty, so every card was ~75% white space with a divider
   rule drawn for absent content. The section heading sat alone in a 260px+
   aside beside ~1,000px of empty column, at up to 3.45rem — larger than the
   page title it sat under. Day 2 meanwhile used an entirely different, flatter
   treatment, so the two halves of one programme did not look related.

   Both days now use the same numbered/timed sequence: hairline-separated rows,
   an index or time in the leading column and the session title beside it. It
   matches the homepage programme preview, states only what is known, and has
   no empty column to fill.
   --------------------------------------------------------------------------- */
.programme-sequence-title-heading {
  margin-block: clamp(1.75rem, 3.2vw, 2.5rem) 0;
  color: var(--brand-wine-2, #5a0009);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
}

[dir="rtl"] .programme-sequence-title-heading {
  letter-spacing: 0;
  line-height: 1.4;
}

.programme-sequence {
  /* Held to a reading measure rather than the full container: a 1,280px rule
     under a three-word session title reads as an unfinished table. */
  max-width: 46rem;
  margin-block: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  padding: 0;
  border-block-start: 2px solid var(--brand-gold-readable, #8b5a10);
  list-style: none;
}

.programme-sequence-timed {
  max-width: 40rem;
}

.programme-sequence > li {
  display: grid;
  grid-template-columns: minmax(3rem, 4.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: baseline;
  padding-block: clamp(.9rem, 1.8vw, 1.25rem);
  border-block-end: var(--rule-hairline);
}

/* Day 2 carries real clock times, so its leading column is wider than Day 1's
   two-digit index. */
.programme-sequence-timed > li {
  grid-template-columns: minmax(8.5rem, 10rem) minmax(0, 1fr);
}

.programme-sequence-index {
  color: var(--brand-gold-readable, #8b5a10);
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  line-height: 1.5;
}

.programme-sequence-time {
  font-size: .95rem;
  letter-spacing: .02em;
}

.programme-sequence-title {
  color: var(--brand-wine-2, #5a0009);
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

.programme-actions {
  margin-block: clamp(1.75rem, 3.2vw, 2.5rem) 0;
}

.programme-confirm-note {
  margin-block: clamp(1rem, 2vw, 1.4rem) 0;
  color: var(--brand-muted, #5b514d);
  font-size: var(--fs-meta);
  font-style: normal;
}

.day1-lead,
.day2-lead {
  max-width: 60ch;
  color: var(--brand-muted, #5b514d);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.day2-capacity {
  margin-block: clamp(1rem, 2vw, 1.4rem) 0;
  color: var(--brand-muted, #5b514d);
  font-size: var(--fs-meta);
}

@media (max-width: 575.98px) {
  .programme-sequence > li,
  .programme-sequence-timed > li {
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem;
  }
}


.programme-sequence-body {
  display: block;
  min-width: 0;
}

.programme-sequence-note {
  display: block;
  margin-block-start: .3rem;
  max-width: 52ch;
  color: var(--brand-muted, #5b514d);
  font-size: .88rem;
  line-height: 1.55;
}

[dir="rtl"] .programme-sequence-note {
  line-height: 1.75;
}


/* ---------------------------------------------------------------------------
   Programme panel — the site's glass language, applied to Day 1 and Day 2.

   Both days now sit inside one translucent panel rather than as bare lists on
   a flat band. The treatment reuses the existing tokens (--glass-light,
   --glass-border-light, --shadow-soft) and the same blur radius already used by
   the site's dropdowns, so it reads as native rather than imported. Restraint
   is deliberate: one elevated surface, one inner highlight, one gold datum —
   no stacked panels, no tinted glass, no decorative blur.
   --------------------------------------------------------------------------- */
.programme-panel {
  position: relative;
  overflow: hidden;
  /* Wide enough to hold the container without leaving a void beside it, but
     still a reading measure rather than a full-bleed slab. */
  max-width: 64rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .58) 100%);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-institutional-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

/* A single gold datum across the top edge — the same accent the homepage
   ledger uses, so the two systems are visibly related. */
.programme-panel::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--brand-gold-readable, #8b5a10) 0%,
    var(--brand-gold-soft, #e2bd72) 42%,
    rgba(226, 189, 114, 0) 100%);
}

[dir="rtl"] .programme-panel::before {
  background: linear-gradient(270deg,
    var(--brand-gold-readable, #8b5a10) 0%,
    var(--brand-gold-soft, #e2bd72) 42%,
    rgba(226, 189, 114, 0) 100%);
}

.programme-panel-head .kicker {
  margin: 0 0 var(--flow-label);
  color: var(--brand-gold-readable, #8b5a10);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

[dir="rtl"] .programme-panel-head .kicker {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.programme-panel .programme-sequence-title-heading {
  margin-block: 0;
}

.programme-panel .programme-sequence {
  max-width: none;
  margin-block: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  border-block-start: 0;
}

.programme-panel .programme-sequence > li {
  border-block-end: 1px solid rgba(59, 0, 6, .10);
}

.programme-panel .programme-sequence > li:last-child {
  border-block-end: 0;
}

/* Index and time become glass chips — the element that makes the list read as
   a designed sequence rather than a numbered paragraph. */
.programme-panel .programme-sequence-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding-inline: .75rem;
  background: rgba(255, 255, 255, .62);
  /* Decorative framing only — the number/time inside carries the
     information at 5.7:1, so this outline is not a 1.4.11 target. */
  border: 1px solid rgba(139, 90, 16, .34);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}

.programme-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: clamp(1.5rem, 2.8vw, 2rem);
  padding-block-start: clamp(1.1rem, 2.2vw, 1.5rem);
  border-block-start: 1px solid rgba(59, 0, 6, .12);
}

.programme-panel-foot .programme-confirm-note {
  margin: 0;
  max-width: 34rem;
}

/* Reduced transparency: users who ask for it get a solid surface, since the
   blur is decoration rather than information. */
@media (prefers-reduced-transparency: reduce) {
  .programme-panel {
    background: var(--brand-ivory, #faf5ef);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 767.98px) {
  .programme-panel {
    padding: clamp(1.15rem, 4.5vw, 1.5rem);
  }

  .programme-panel-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .programme-panel .programme-sequence-index {
    min-height: 2rem;
    padding-inline: .7rem;
  }
}

/* Once the row collapses to one column the chip is a grid item and stretches to
   the full panel width by default, turning a compact marker into a full-width
   bar. Pin it to the inline start and let it size to its own content. */
@media (max-width: 575.98px) {
  .programme-sequence > li > .programme-sequence-index,
  .programme-sequence-timed > li > .programme-sequence-index {
    justify-self: start;
    width: auto;
    margin-block-end: .45rem;
  }
}


/* === 48-hour rectification 2026-08-20 === */

/* Ciarb Global President inside the patronage panel.
   The 4 August content spec (PATRONAGE, H-4) asks for the Patron's name plus
   the President's name and photograph in this block; he had been absorbed into
   a Speakers treatment, which states the wrong thing — he attends, he does not
   speak. Sits on the same dark panel, subordinate to the ministerial line. */
.customer-president {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  margin-block-start: clamp(.9rem, 1.8vw, 1.25rem);
  padding-block-start: clamp(.85rem, 1.7vw, 1.15rem);
  border-block-start: 1px solid rgba(226, 189, 114, .28);
}

.customer-president-portrait {
  flex: 0 0 auto;
  inline-size: clamp(52px, 6vw, 66px);
  block-size: clamp(52px, 6vw, 66px);
  border-radius: 50%;
  object-fit: cover;
  /* The supplied portrait is a wide crop; bias to the upper area so the face
     is not cut when it is squared off into the circle. */
  object-position: 50% 22%;
  border: 1px solid rgba(226, 189, 114, .45);
}

.customer-president-copy {
  min-width: 0;
}

/* Override the generic paragraph rule so the three lines sit tightly. */
.customer-ministry .customer-president-copy p:not(.kicker) {
  max-width: 36rem;
  margin-block: 0;
}

.customer-ministry .customer-president-copy .customer-president-name {
  margin-block-start: .2rem;
  color: #fff;
  font-weight: 700;
}

.customer-ministry .customer-president-copy .customer-president-role {
  color: var(--brand-gold-soft);
  font-size: clamp(.76rem, .9vw, .84rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 575.98px) {
  .customer-president {
    align-items: flex-start;
  }
}

/* Final customer update: the existing patronage card now carries the three
   collaborating institutions as a balanced vertical lock-up. */
.customer-ministry-marks {
  align-self: stretch;
  flex-direction: column;
  justify-content: space-evenly;
  min-block-size: 12rem;
  padding-block: .3rem;
}

.customer-ministry-marks .customer-ministry-lockup {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.customer-ministry-marks .customer-ministry-logo-moj {
  width: min(100%, 9rem);
}

.customer-ministry-marks .customer-ministry-logo-ciarb {
  width: min(100%, 6rem);
}

.customer-ministry-marks .customer-ministry-logo-qicdrc {
  width: min(100%, 11rem);
}

.customer-collaboration-note {
  margin-block-start: .55rem !important;
  color: rgba(255, 255, 255, .9) !important;
}

@media (max-width: 575.98px) {
  .customer-ministry-marks {
    align-self: auto;
    gap: 1rem;
    justify-content: center;
    min-block-size: 0;
    padding-block: .5rem;
  }
}

/* One intentional programme table replaces the former day-switching cards. */
.customer-agenda {
  max-width: 66rem;
  margin-inline: auto;
  overflow-x: auto;
}

.customer-agenda-table {
  width: 100%;
  margin: 0;
  color: var(--brand-ink);
  border: 1px solid rgba(59, 0, 6, .13);
  background: var(--brand-ivory);
}

.customer-agenda-table th,
.customer-agenda-table td {
  padding: clamp(.7rem, 1.3vw, 1rem);
  vertical-align: top;
  border-color: rgba(59, 0, 6, .12);
}

.customer-agenda-table thead th {
  color: #fff;
  background: var(--brand-wine-2);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.customer-agenda-table tbody th {
  width: 11.75rem;
  color: var(--brand-wine-2);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The single-agenda page no longer shares space with a second programme
   column, so its established panel may use the available container width. */
.customer-internal-page .agenda-section .programme-panel {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

.customer-internal-page .agenda-section .customer-agenda {
  max-width: none;
}

.customer-internal-page .agenda-section .customer-agenda-table tbody th {
  width: 10.5rem;
}

.customer-agenda-table td {
  line-height: 1.45;
}

.customer-agenda-table td span {
  display: block;
  margin-block-start: .2rem;
  color: var(--brand-muted);
}

.customer-agenda-link {
  margin: clamp(1.2rem, 2vw, 1.75rem) 0 0;
  text-align: center;
}

@media (max-width: 575.98px) {
  .customer-agenda-table th,
  .customer-agenda-table td {
    padding: .65rem .6rem;
    font-size: .84rem;
  }
  .customer-agenda-table thead th {
    font-size: .7rem;
    letter-spacing: .06em;
  }
  .customer-agenda-table tbody th {
    width: 8.85rem;
    font-size: .76rem;
  }
}