/*! site-styles: base.css */
/* Pack 496 - base. Corrections to Divi 4.27.7's own defaults and the site's global
   elements: contact form, keyboard focus, body links, buttons, card grids, headings,
   lists, tables, toggles, utility surfaces, images, mobile menu, motion and print.
   The numbered rules are referred to by number from the other files and from the guide. */

/* 1. Divi ships .et_pb_contact_form_label{display:none}. Restore real labels.
      Fill in a Field Label on every field or this reveals nothing. */
.et_pb_contact_form_label {
  display: block !important;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #333333;
}

/* Radio and checkbox groups are the exception: Divi renders BOTH a hidden
   <label> and a visible .et_pb_contact_field_options_title with the same text,
   so the rule above shows the question twice. Hide the label visually but keep
   it in the accessibility tree, and style the group title to match the labels
   above so every field reads the same. */
.et_pb_contact_field[data-type="radio"] > .et_pb_contact_form_label,
.et_pb_contact_field[data-type="checkbox"] > .et_pb_contact_form_label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.et_pb_contact_field_options_title {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #333333;
}

/* 2. Form fields. Divi's defaults are #999 on #eee = 2.46:1.
      Inputs always render type="text" whatever field type you pick. That is a Divi
      limitation that must STAY: retyping an input drops it from the field list Divi
      posts for its integrity check, and every submission is then rejected. The
      Integration script sets inputmode instead. */
.et_pb_contact p input,
.et_pb_contact p textarea,
.et_pb_contact p select {
  background-color: #FFFFFF !important;
  color: #333333 !important;
  border: 1px solid #767676 !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  font-size: 17px !important;
  line-height: 1.4;
  box-shadow: none !important;
}
/* Divi reuses the field title as the placeholder, so with labels restored above
   every field the placeholder is a duplicate. Hide it visually but keep the
   attribute, which is still a fallback accessible name in some browser/AT pairs.
   Specificity must match the field rule above or the two fight and this loses. */
.et_pb_contact p input::placeholder,
.et_pb_contact p textarea::placeholder { color: transparent; opacity: 1; }
.et_pb_contact p textarea { min-height: 170px; }
.et_pb_contact p input:focus,
.et_pb_contact p textarea:focus,
.et_pb_contact p select:focus { border-color: #0F2D4A !important; }
.et_pb_contact_form_container .et_pb_contact_field { box-shadow: none !important; }

/* 3. Captcha question legibility, for as long as the maths captcha stays on. */
.et_pb_contact_captcha_question {
  font-size: 17px;
  font-weight: 600;
  color: #333333;
}

/* 4. Keyboard focus. Divi ships none. Never add outline:none anywhere. */
a:focus, button:focus, input:focus, textarea:focus, select:focus,
.et_pb_button:focus, [tabindex]:focus,
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .et_pb_button:focus-visible {
  outline: 3px solid #0F2D4A !important;
  outline-offset: 2px !important;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.et_pb_button:focus:not(:focus-visible) { outline: none !important; }

/* 5. Body links - underlined, so colour is never the only signal.
      SWAP POINT A: Pack Navy. Also set Theme Customizer > Typography > Link Color. */
.et_pb_text a,
.et_pb_blurb_description a,
.et_pb_toggle_content a,
.et_pb_tab_content a,
.et_pb_promo_description a,
#main-footer .et_pb_text a {
  color: #0F2D4A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.et_pb_text a:hover,
.et_pb_blurb_description a:hover,
.et_pb_toggle_content a:hover,
.et_pb_tab_content a:hover,
.et_pb_promo_description a:hover,
#main-footer .et_pb_text a:hover {
  color: #0A1B2D;
  text-decoration-thickness: 2px;
}

/* 6. Buttons. The slide-in arrow reflows the label on hover, so kill it.
      .pk-btn-block and .pk-btn-text are carried by the button presets.

      The `html body #page-container` prefix is load-bearing - do not shorten it.
      Divi emits PER-MODULE rules like

        body #page-container .et_pb_section .et_pb_button_4 { padding:.3em 1em !important }

      which is (0,1,2,1) specificity with !important. `body #page-container
      .et_pb_button.pk-btn-text` is ALSO (0,1,2,1), so it only ties - and Divi's
      module CSS is emitted after Theme Options CSS, so source order hands Divi
      the win. Adding `html` makes ours (0,1,2,2) and it lands. Anything matching
      .et_pb_button_N is generated per module and will re-appear on new buttons.

      RULE: hover DARKENS. Divi's default lightens with rgba(255,255,255,.2),
      which dies on white and grey grounds. */
.et_pb_button:after,
.et_pb_button:before { display: none !important; }

html body #page-container .et_pb_button.pk-btn-text,
html body #page-container .et_pb_button.pk-btn-text:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 8px 0 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body #page-container .et_pb_button.pk-btn-text { color: #0F2D4A !important; }
html body #page-container .et_pb_button.pk-btn-text:hover {
  color: #0A1B2D !important;
  text-decoration-thickness: 2px;
}

html body #page-container .et_pb_button.pk-btn-block:hover {
  background-color: #0A1B2D !important;
  border-color: #0A1B2D !important;
  color: #FFFFFF !important;
}

@media (max-width: 767px) {
  .pk-btn-block.et_pb_button,
  .pk-btn-block .et_pb_button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* Two buttons side by side inside ONE column. Divi wraps every Button module in a
   block-level div.et_pb_button_module_wrapper, so two buttons in a column always
   stack - and Divi 4 cannot nest a row inside a column to split them. Add the
   class pk-btn-pair to the COLUMN holding them. Phone is untouched: pk-btn-block
   keeps them stacked and full width below 768px, which is what you want there. */
@media (min-width: 768px) {
  .pk-btn-pair .et_pb_button_module_wrapper {
    display: inline-block;
    vertical-align: top;
    margin-right: 12px;
  }
  .pk-btn-pair .et_pb_button_module_wrapper:last-of-type { margin-right: 0; }
}

/* 7. Readable measure, ~70-75 characters. Carried by Row / Narrow. */
.pk-measure .et_pb_text,
.pk-measure .et_pb_blurb_description { max-width: 720px; }

/* 8. No dead space at the bottom of a column or card. */
.et_pb_column > .et_pb_module:last-child { margin-bottom: 0 !important; }

/* 9. Card grids. .pk-cards also needs Row > Sizing > Equalize Column Heights.
      .pk-grid-2up keeps two across on tablet - Divi otherwise collapses every
      row to a single column at 980px, turning a 4-up grid into a long scroll. */
.pk-cards .et_pb_column { display: flex; flex-direction: column; }
.pk-cards .et_pb_column > .et_pb_module { flex: 0 0 auto; }

/* Pattern A - one self-contained Blurb card: stretch it to fill the column. */
.pk-cards .et_pb_column > .et_pb_module:only-child { flex: 1 1 auto; }

/* Pattern B - opt IN with .pk-card-action on the COLUMN. A card that ends with a
   button or a text link pins that last module to the bottom, so the actions line up
   across cards of uneven length.

   Opt-in rather than automatic because most cards do not end with an action, and on
   those the rule pins body prose to the bottom of an equal-height column instead. The
   gap only appears once one card in the row happens to be taller than its neighbours,
   so it reads as a bug rather than as a setting someone chose. */
.pk-cards .et_pb_column.pk-card-action > .et_pb_module:last-child:not(:only-child) {
  margin-top: auto;
}

/* Opt IN with .pk-card-image on the ROW when the cards lead with a Blurb IMAGE. A Blurb's
   picture box is only as tall as the artwork, so a badge of a different aspect ratio starts
   that card's copy higher than its neighbours' and equal-height columns cannot absorb it -
   the shortfall just moves to dead space under the last paragraph. On Cub Scout Levels the
   Arrow of Light insignia is 125x53 against 125 tall for every other rank, which put its
   title 72px above the rest of the row (measured 2026-09).

   Image Blurbs only, and only they need it: in icon mode Divi routes Image/Icon Width to
   font-size on .et-pb-icon (Blurb.php:566), so icons in a row already share one height and
   this rule is inert on them. In image mode that same field sizes .et_pb_image_wrap, so
   aspect-ratio reserves the box at whatever it holds rather than repeating the number here. */
.pk-card-image .et_pb_main_blurb_image .et_pb_image_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/* Artwork taller than it is wide would otherwise overflow the box it now sits in. */
.pk-card-image .et_pb_main_blurb_image img { width: auto; max-height: 100%; }

@media (min-width: 768px) and (max-width: 980px) {
  .pk-grid-2up .et_pb_column {
    width: 47.25% !important;
    margin-right: 5.5% !important;
    float: left;
  }
  .pk-grid-2up .et_pb_column:nth-child(2n)   { margin-right: 0 !important; }
  .pk-grid-2up .et_pb_column:nth-child(2n+1) { clear: both; }
}

/* .pk-grid-3up - six Column / Card in ONE row shown three across, so a 3+3 grid has
   a real gutter between its lines instead of a seam between two rows. Divi shows a
   six-column row six across on desktop and three across at 980px; this is the card
   ladder instead, 3 / 2 / 1. Equalize Column Heights makes the row flex at the
   initial nowrap, so the wrap has to be turned on here. */
@media (min-width: 981px) {
  .pk-grid-3up { flex-wrap: wrap; }
  .pk-grid-3up .et_pb_column {
    width: 31.3333% !important;
    margin-right: 3% !important;
  }
  .pk-grid-3up .et_pb_column:nth-child(3n)  { margin-right: 0 !important; }
  .pk-grid-3up .et_pb_column:nth-child(n+4) { margin-top: 3%; }
}

@media (min-width: 768px) and (max-width: 980px) {
  .pk-grid-3up .et_pb_column {
    width: 47.25% !important;
    margin-right: 5.5% !important;
    margin-bottom: 30px !important;
  }
  .pk-grid-3up .et_pb_column:nth-child(2n)        { margin-right: 0 !important; }
  .pk-grid-3up .et_pb_column:nth-last-child(-n+2) { margin-bottom: 0 !important; }
}

@media (max-width: 767px) {
  .pk-grid-3up .et_pb_column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important;
  }
  .pk-grid-3up .et_pb_column:last-child { margin-bottom: 0 !important; }
}

/* Two Row / Cards stacked in one section. Divi allows one preset per module and
   Row / Cards has taken the slot, so such a row can never also be Row / Stacked -
   the preset that supplies the gap between rows - and the two rows meet at 0. On
   desktop the card borders touch and read as one doubled rule; below 980px Divi's
   .et_pb_row .et_pb_column:last-child { margin-bottom: 0 } zeroes the seam while the
   cards inside each row keep 30px, so a 3+3 grid stacks 30, 30, 0, 30, 30. Do not
   patch this with padding typed onto one row in the builder - a number set by hand
   on one row and not on the next is exactly what drifts. */

/* 3% is the gutter .et_pb_gutters2 puts between the columns, and a percentage
   margin on a COLUMN resolves against the row's width just as margin-right does, so
   the vertical gap tracks the horizontal one at every width instead of matching only
   at the 1080px cap. Re-check the figure if the row gutter ever leaves width 2. */
@media (min-width: 981px) {
  .pk-cards + .pk-cards > .et_pb_column { margin-top: 3%; }
}

/* Below 980px the cards are one per row, so the seam matches the 30px Divi puts
   between stacked columns rather than the gutter. */
@media (max-width: 980px) {
  .pk-cards + .pk-cards { margin-top: 30px; }
}

/* 10. Headings. Blurb and Toggle titles are set to H3 in their presets so they
       don't skip a level; this only normalises the size that comes with it. */
h1, h2, h3, h4, h5, h6 { color: #1A1A1A; }

.et_pb_blurb h3.et_pb_module_header {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: 8px;
}
.et_pb_blurb h3.et_pb_module_header a { color: inherit; }

/* 11. Lists in Text modules. */
.et_pb_text ul,
.et_pb_text ol { padding-left: 1.3em; margin: 0 0 1.5em; }
.et_pb_text li { margin-bottom: .5em; line-height: 1.7; }

/* 12. Tables. Add .pk-scroll-x to the Text module for a wide table, so it
       scrolls inside its own box rather than the page scrolling sideways. */
.et_pb_text table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.et_pb_text th,
.et_pb_text td {
  border: 1px solid #E6E6E6;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.et_pb_text th { background: #F2F2F2; font-weight: 600; color: #1A1A1A; }
.et_pb_text caption {
  caption-side: bottom;
  padding-top: 8px;
  font-size: 15px;
  color: #595959;
  text-align: left;
}
.pk-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pk-scroll-x table { min-width: 560px; }

/* 13. Toggles (the FAQ). Use Toggle modules, not Accordion. */
.et_pb_toggle { padding: 20px 24px !important; }
.et_pb_toggle_title {
  font-size: 20px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  padding-right: 44px;
  color: #1A1A1A;
}
.et_pb_toggle_content { font-size: 17px; line-height: 1.7; color: #333333; }
.et_pb_toggle_content > *:last-child { margin-bottom: 0; }

/* 14. Utility surfaces.
       SWAP POINT B: Pack Navy. Gold is the tempting choice and fails - #D97706 on
       the #F2F2F2 fill is 2.85:1, under the 3:1 gate for a non-text edge. Navy on
       that fill is 12.55:1. */
/* The prefix is load-bearing, not decoration. A module preset that sets padding or a
   border colour - including setting them to NONE, as Blurb / Card Body does - is emitted
   by Divi as `.et_pb_blurb_5.et_pb_blurb{padding:0!important}` at (0,2,0), which beats a
   bare `.pk-card-tint` at (0,1,0) even though both carry !important. The panel then renders
   with no padding and the module's own border colour instead of the navy rule. On a Row
   it worked anyway, because a Row preset sets no padding for Divi to emit - which is what
   made this look like a Blurb-only fault rather than a specificity one. */
html body #page-container .pk-card-tint {
  background: #F2F2F2;
  border-left: 4px solid #0F2D4A;
  border-radius: 0 6px 6px 0;
  padding: 24px !important;
}
@media (max-width: 767px) {
  html body #page-container .pk-card-tint { padding: 16px !important; }
}

.pk-eyebrow,
.pk-eyebrow p {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #595959;
  margin-bottom: 12px;
}
/* Natural/title-case eyebrow.
   Keeps the Eyebrow component's size, weight and contextual colour behavior,
   but removes the all-caps treatment for warmer campaign/recruitment copy. */
html body #page-container .pk-eyebrow.pk-eyebrow-titlecase,
html body #page-container .pk-eyebrow.pk-eyebrow-titlecase p {
  text-transform: none;
  letter-spacing: .03em;
}

/* .pk-jump - inline jump links under a long page's hero. Margin keeps 8px
   between adjacent tap targets. */
.pk-jump a {
  display: inline-block;
  padding: 8px 0;
  margin: 0 24px 4px 0;
  color: #0F2D4A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pk-jump a:hover { color: #0A1B2D; }

/* 14b. Anchor targets clear the sticky header. Without this the browser scrolls the
        heading to y=0, where the fixed nav covers it - so /our-leaders/#safety appears
        to jump into the middle of a paragraph. #safety has three inbound links: the
        footer trust strip, the footer spec, and Contact Us. */
#safety,
[id^="join-"],
#wte-schedule,
#ranks { scroll-margin-top: 120px; }

/* 15. Images. */
img { max-width: 100%; height: auto; }
.et_pb_image img { border-radius: 6px; }

/* 16. Mobile menu. Divi's 40px rows are under the 44px tap-target minimum. */
@media (max-width: 980px) {
  .et_mobile_menu li a {
    padding: 14px 5%;
    font-size: 17px;
    line-height: 1.4;
    color: #333333;
  }
  .et_mobile_menu { border-top-color: #E6E6E6; }
}

/* 17. Fallback only - the Theme Builder footer replaces the stock one. Keeps
       dead social icons from reappearing if that template is unassigned.
       Real fix: Theme Options > Layout > Show Social Icons = OFF. */
#main-footer .et-social-icons,
#footer-bottom .et-social-icons { display: none !important; }

/* 18. Motion safety net. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 19. Print - parents print the meeting details and date lists. */
@media print {
  #main-header, #top-header, #main-footer, #et_mobile_nav_menu,
  .et_pb_button, .et_pb_contact_form_container { display: none !important; }

  .et_pb_section { padding: 12px 0 !important; background: #FFFFFF !important; }
  body { font-size: 12pt; color: #000000; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 10pt; }
  .et_pb_toggle_content { display: block !important; }
}


/*! site-styles: carousel.css */
/* Pack 496 - pk-carousel. One composition at a time, scrolled horizontally with CSS scroll-snap.
   No carousel library and no autoplay.

   A DIVI ROW IS ONE SLIDE, which is the whole point of the component: a slide is a Row, so it can
   hold whatever Divi can build - a photograph beside a paragraph, a photograph above one, two
   columns that stack on a phone - and the photograph is an ordinary Image module rather than a
   background, so it keeps its alt text, its srcset and its place in image search, none of which a
   CSS background has.

   Where a name is Bootstrap 5's it is spelled exactly as Bootstrap spells it - carousel, item,
   inner - because a reader who knows Bootstrap should not have to learn ours. The header,
   pagination and navigation rows are ours, not Bootstrap's, which calls the dots
   carousel-indicators and the arrows carousel-control-prev and -next. The MECHANISM is not
   Bootstrap's either: this is scroll-snap, it never autoplays, and it ships none of Bootstrap's
   fade or interval behaviour. Only the vocabulary is borrowed, and `carousel-item` means one
   slide in both.

     Section   pk-carousel
       Row     pk-carousel-header             0 or 1, static, above the slides
       Row     pk-carousel-item               1 or more, EACH ROW IS ONE SLIDE
       Row     pk-carousel-pagination-dots    0 or 1, where the dots go
       Row     pk-carousel-navigation         0 or 1, where the arrows go; without it they overlay
       Row     pk-carousel-pagination-tiles   0 or more, pagination built from columns

   Both pagination rows carry pk-carousel-pagination as well, the hook their shared styling is
   written against.

   Adding a slide is adding a Row. Reordering is dragging. Nothing counts slides.

   THE ONE THING THIS COMPONENT NEEDS JAVASCRIPT FOR. A horizontal scroller needs one element
   whose children are the slides; a carousel's slides are Rows, siblings of the header and
   indicator rows, and no CSS can make a subset of siblings scroll horizontally while the rest stay
   block. So scripts/snap-nav.js wraps the slide rows in .pk-carousel-inner. With that file absent
   the slides stack vertically - every slide readable, nothing hidden, just not a rail. Every rule
   that lays out the track and its slides is scoped INSIDE .pk-carousel-inner so that fallback is
   the natural resting state rather than something this file has to undo. The --immersive modifier
   is the exception: it keys off the section and the slide row, so with no track it still holds the
   section to one viewport height - which is why the builder block at the end hands that back.

   Sizing is two custom properties:

     --pk-carousel-item   the flex basis of one slide
     --pk-carousel-gap    the space between slides */

.pk-carousel {
  --pk-carousel-gap: 24px;
  --pk-carousel-item: 100%;

  /* The edge lines. #E6E6E6 is the hairline the style guide gives a rule on a white section, the
     same value a Divider draws. Set --pk-carousel-edge-line to transparent for a carousel that
     wants none. */
  --pk-carousel-edge-line: #E6E6E6;
  --pk-carousel-edge-fade: 15%;

  /* A shadow, not a wash of the ground. The style guide's rule for exactly this job - "the shadow
     does the separating, the border holds the edge" - and its shadow language is neutral black,
     which is why no palette colour appears here.

     Lighter and far narrower than the guide's card ladder because it is not doing a card's job: a
     card shadow lifts a surface off the page, this only has to soften the line beside it so the
     slide reads as continuing under it. At 10px it is an edge rather than a band, and the eye
     takes it as depth without ever resolving it into an object. Set on the instance, arrived at
     by looking. */
  --pk-carousel-edge-shadow: rgba(0, 0, 0, .03);
  --pk-carousel-edge-shadow-width: 10px;

  position: relative;
}

/* -- The track, built by snap-nav.js --------------------------- */

/* It takes the geometry a Divi Row would have had, because it now stands where the slide rows
   used to: they are inside it, and each one gives up its own width below. Row / Standard's 90% and
   1080px are repeated here rather than inherited because this element is a plain div that no Divi
   preset reaches.

   overscroll-behavior-x stops a swipe that reaches the last slide from being handed to the browser
   as a back-navigation gesture, which on a phone loses the page. */
html body #page-container .pk-carousel-inner {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--pk-carousel-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* A rule down each edge of the track, marking where the slide ends and the arrows begin. It fades
   out top and bottom so it reads as an open viewport rather than a box drawn round the content -
   a full-height rule closes the composition, which is the opposite of what a scroller should say.

   Drawn as a background rather than a border or a pseudo-element for one reason: the track is a
   scroll container. A border cannot fade, an absolutely positioned child scrolls away with the
   slides, and a background on a scroll container is painted against the element's own box and
   stays put - so the lines hold their place at the visible edges however far the track scrolls. */
html body #page-container .pk-carousel-inner {
  background-image:
    linear-gradient(
      to bottom,
      transparent 0,
      var(--pk-carousel-edge-line) var(--pk-carousel-edge-fade),
      var(--pk-carousel-edge-line) calc(100% - var(--pk-carousel-edge-fade)),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0,
      var(--pk-carousel-edge-line) var(--pk-carousel-edge-fade),
      var(--pk-carousel-edge-line) calc(100% - var(--pk-carousel-edge-fade)),
      transparent 100%
    );
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: left center, right center;
}

/* A shadow just inside each edge, so the slide reads as passing UNDER the viewport rather than
   stopping at it - and so a reader who never touches an arrow can still see the section has
   depth and therefore somewhere to go. Two STICKY FLEX ITEMS: the track is the scroll container,
   so a background paints behind the slides - and a slide's photograph is opaque - while an
   absolutely positioned child scrolls away with them. A sticky child is offset against the
   scrollport, so it holds the visible edge at every scroll position and still paints over the
   flex line. The track's own ::before/::after already ARE flex items, so this needs no element,
   and childrenWithClass() reads parent.children, which never includes a pseudo-element.

   flex-shrink 0 is load-bearing. A slide is flex:0 0 100% and cannot shrink, so a shrinkable item
   here is the only place the browser can take the line's overflow from - the veil would be
   squeezed to zero width and the feature would simply be absent.

   The negative margins give back exactly what the two items take, so the track's scrollWidth, the
   slide offsets and both end-of-track tests in sync() see the geometry they see today. Without
   them the last snap position falls short of maxScroll and the next arrow never disables. */
html body #page-container .pk-carousel-inner::before,
html body #page-container .pk-carousel-inner::after {
  content: "";
  position: sticky;
  z-index: 4;
  flex: 0 0 var(--pk-carousel-edge-shadow-width);
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Inset by the 1px the edge line occupies, so the two abut rather than overlap. */
html body #page-container .pk-carousel-inner::before {
  left: 1px;
  margin-right: calc((var(--pk-carousel-edge-shadow-width) + var(--pk-carousel-gap)) * -1);
  background: linear-gradient(to right, var(--pk-carousel-edge-shadow), transparent);
}

html body #page-container .pk-carousel-inner::after {
  right: 1px;
  margin-left: calc((var(--pk-carousel-edge-shadow-width) + var(--pk-carousel-gap)) * -1);
  background: linear-gradient(to left, var(--pk-carousel-edge-shadow), transparent);
}

/* A shadow on the side with nothing beyond it would promise content that is not there, so each
   one goes when its own arrow does. sync() already decides that for the arrows; these classes are
   the same answer, spelled where CSS can read it. */
html body #page-container .pk-carousel--at-start .pk-carousel-inner::before,
html body #page-container .pk-carousel--at-end .pk-carousel-inner::after {
  opacity: 0;
}

/* The shadow itself is not motion and stays; only its fade in and out goes. */
@media (prefers-reduced-motion: reduce) {
  html body #page-container .pk-carousel-inner::before,
  html body #page-container .pk-carousel-inner::after {
    transition: none;
  }
}

/* Divi lifts a row to z-index 5 inside a section carrying a Divider shape, which would put the
   slide over the veil. 2 keeps the slide above the divider it was lifted to clear. */
html body #page-container .section_has_divider .pk-carousel-inner > .pk-carousel-item {
  z-index: 2;
}

/* -- A slide: a Divi Row --------------------------------------- */

/* The !important flags are what make this work at all. Divi emits a row's width from a selector
   this file cannot out-specify - but that rule is NOT marked important, and an important
   declaration beats a non-important one at any specificity. Without these the slide would keep
   its own 90%/1080px and sit centred inside its flex basis.

   Scoped to descendants of .pk-carousel-inner so an unwrapped row - no JavaScript - is left
   completely alone and simply stacks. */
html body #page-container .pk-carousel-inner > .pk-carousel-item {
  flex: 0 0 var(--pk-carousel-item) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  /* Without min-width:0 a flex item refuses to shrink below its content's intrinsic width, so one
     wide photograph widens its slide and breaks the snap rhythm for the whole carousel. */
  min-width: 0;
  scroll-snap-align: start;
}

/* A slide's INTERNAL layout is deliberately untouched. Its columns are ordinary Divi columns, so
   an editor gets the normal stack-on-phone behaviour and the normal column controls - which is how
   a slide becomes photo-beside-text on a desktop and photo-above-text on a phone without this
   file having an opinion about it. */

/* -- Controls -------------------------------------------------- */

/* A control row is where an editor chooses to put one kind of control -
   .pk-carousel-pagination-dots for the dots, .pk-carousel-navigation for the arrows. Put both
   classes on one row and the two share a container, which is what puts the arrows either side of
   the dots. snap-nav.js appends to the row's first column, so controls sit in normal flow rather
   than beside Divi's floated columns. Neither row is required: without one, that control lands at
   the end of the section, and the arrows go over the slide instead. */
html body #page-container .pk-carousel-pagination-dots .pk-snap-nav,
html body #page-container .pk-carousel-navigation .pk-snap-nav {
  margin-top: 0;
}

/* Both pagination rows carry .pk-carousel-pagination, so it holds what is true of BOTH kinds of
   pagination and nothing else - a dots-only declaration written here lands on a strip of insignia
   too. Divi gives a row a bottom margin that, on a control row, would read as a gap between the
   controls and whatever follows rather than as part of the carousel. */
html body #page-container .pk-carousel-pagination,
html body #page-container .pk-carousel-navigation {
  margin-bottom: 0 !important;
}

/* -- Pagination built from Divi columns ------------------------ */

/* TILE PAGINATION: a Row whose columns ARE the pagination, so one control can be a den insignia
   rather than a dot. Where .pk-carousel-pagination-dots is a HOST scripts/snap-nav.js fills, this
   is a SOURCE it reads - it lays a button over each column and pairs the columns with the slides
   by document order.

     Row     pk-carousel-pagination-tiles   [pk-carousel-pagination-tiles--3up]
       Col   pk-carousel-pagination-tile   one per slide, in slide order
         Image module                            the insignia
         Text module                             optional caption, above OR below the insignia

   Divi caps a Row at six columns, so a strip of more than six is a second tile-pagination row and
   the script reads the rows as one strip.

   TWO TIERS, SPLIT STRUCTURALLY RATHER THAN BY SPECIFICITY. What the strip needs to OPERATE takes
   the `html body #page-container` prefix and the !important flags rail.css's header explains.
   What it merely LOOKS like is a custom property declared on the row, or a :where() rule at zero
   specificity, so a colour, border, radius, background or padding set on the column in Divi wins
   outright - a rule here that an editor cannot override from the builder is a defect. */

.pk-carousel-pagination-tiles {
  --pk-carousel-pagination-tiles-gap: 12px;
  --pk-carousel-pagination-tile: calc((100% - (5 * var(--pk-carousel-pagination-tiles-gap))) / 6);
  --pk-carousel-pagination-tile-inner-gap: 8px;
  --pk-carousel-pagination-tiles-mark-size: 4px;

  /* A cap, not a size. The box below is a percentage of its tile, so with nothing to stop it a
     350px tile would scale a 125px insignia to 350px square. Re-point it to whatever the artwork
     is actually drawn at. */
  --pk-carousel-pagination-tiles-art: 125px;

  /* The value snap-nav.css already marks the current slide with on .pk-snap-dot - one state, one
     value, whichever skin draws it. 14.05:1 on white and 12.55:1 on the grey band, against the
     3:1 a mark that carries meaning has to clear. */
  --pk-carousel-pagination-tiles-mark: #0F2D4A;

  /* Alert Red, the danger role, for the build errors the Visual Builder block at the end of this
     file draws. 9.11:1 on white; on navy it is 1.54:1, which is why it is a property. */
  --pk-carousel-pagination-tiles-alert: #8C1D18;
}

/* Six across a 375px phone leaves each control 40-46px wide - at or under the 44px touch target -
   so the strip falls to the 3+3 the modifier holds it at everywhere. Only the basis moves, the
   same re-point rail.css makes at this width, and it is the ONLY difference between the modes. */
@media (max-width: 980px) {
  .pk-carousel-pagination-tiles {
    --pk-carousel-pagination-tile: calc((100% - (2 * var(--pk-carousel-pagination-tiles-gap))) / 3);
  }
}

.pk-carousel-pagination-tiles--3up {
  --pk-carousel-pagination-tile: calc((100% - (2 * var(--pk-carousel-pagination-tiles-gap))) / 3);
}

/* On navy the mark and the build-error signal invert, the same move the arrows and dots make in
   snap-nav.css. White is 14.05:1 on navy; Alert Red Bright is 5.08:1 where Alert Red is 1.54:1.

   A TILE CARRYING ITS OWN LIGHT FILL IS NOT ON THIS GROUND and takes the mark back - the opt-out
   a pk-on-navy panel makes. A fill from a preset cannot be seen from here, so a tile preset with a
   light background on a navy section re-points --pk-carousel-pagination-tiles-mark itself. */
.pk-on-navy .pk-carousel-pagination-tiles {
  --pk-carousel-pagination-tiles-mark: #FFFFFF;
  --pk-carousel-pagination-tiles-alert: #F87171;
}

.pk-on-navy .pk-carousel-pagination-tiles .pk-bg-white,
.pk-on-navy .pk-carousel-pagination-tiles .pk-bg-grey,
.pk-on-navy .pk-carousel-pagination-tiles .pk-bg-light,
.pk-on-navy .pk-carousel-pagination-tiles .pk-bg-gold-wash {
  --pk-carousel-pagination-tiles-mark: #0F2D4A;
}

html body #page-container .pk-carousel-pagination-tiles {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--pk-carousel-pagination-tiles-gap);
}

/* Centred because .pk-snap-nav centres the dots it replaces: a no-op while six tiles fill the line
   exactly, and what keeps a shorter strip from hanging off the left edge of the row. At zero
   specificity, because which edge a short strip sits against is the editor's call, not ours. */
:where(.pk-carousel-pagination-tiles) {
  justify-content: center;
}

/* Divi's row clearfix (.et_pb_row:after) is a flex item here, and a zero-width flex item still
   takes a gap slot - one gap of phantom width past the last tile, and a whole phantom line once
   the strip wraps. Floats are ignored inside a flex container, so it has nothing left to clear. */
html body #page-container .pk-carousel-pagination-tiles::after {
  display: none;
}

/* Two tile-pagination rows read as one strip, so the line between them is the gap between
   tiles. */
html body #page-container .pk-carousel-pagination-tiles + .pk-carousel-pagination-tiles {
  margin-top: var(--pk-carousel-pagination-tiles-gap);
}

/* -- A tile: a Divi Column ------------------------------------- */

html body #page-container .pk-carousel-pagination-tiles > .pk-carousel-pagination-tile {
  flex: 0 0 var(--pk-carousel-pagination-tile) !important;

  /* Divi's float and percentage gutter margins, for the reason .pk-rail-track gives in rail.css -
     here the space between tiles is the row's own flex gap. */
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;

  /* min-width:0, for the reason .pk-carousel-inner > .pk-carousel-item gives above - here it is
     one long den name widening its tile out of step with the rest of the strip. */
  min-width: 0;

  /* The tap target snap-nav.css cites base.css rule 16 for, on a tile whose artwork the editor has
     sized small. Never a height - see accessibility item 10. A property rather than a literal
     because Divi's own Min Height field cannot reach it: Divi blankets every column with
     min-height:1px from a stylesheet that loads after this one, at the same specificity as the
     field's own emission, so anything of ours that survives that blanket out-specifies the field
     too. --pk-carousel-pagination-tiles-min-height is what an editor raises instead. */
  min-height: var(--pk-carousel-pagination-tiles-min-height, 44px);

  /* The button's containing block: its inset:0 resolves against this box and nothing inside the
     tile can claim it, because the modules are the button's SIBLINGS. Divi gives every column
     position:relative already; restated so the overlay does not rest on that staying true. */
  position: relative;
}

/* The clearance the mark below needs, which is absolutely positioned and reserves no flow space of
   its own. At ordinary class specificity, and it has to be: Divi's element reset zeroes padding on
   every div, so a :where() reservation never lands, while a column's own Padding field emits
   .et_pb_column_N at this same specificity from a stylesheet that loads after this one and still
   wins. Prefixed, it would kill that field outright. */
.pk-carousel-pagination-tile {
  padding-bottom: calc(var(--pk-carousel-pagination-tiles-mark-size) + var(--pk-carousel-pagination-tile-inner-gap));
}

/* A control the script has stood down, and a tile it found no slide for. Author rules beat the UA
   origin at any specificity, so the tile's own display below would otherwise defeat `hidden`. No
   !important: the Visual Builder block at the end of this file has to be able to win. */
html body #page-container .pk-carousel-pagination-tiles [hidden] {
  display: none;
}

/* A slide with no tile of its own gets a plain dot here beside the tiles, so the control set is
   complete however many tiles were built and the shortfall shows where it happened. It keeps
   snap-nav.css's skin; only the sizing that stops it stretching to a tile's width belongs here. */
html body #page-container .pk-carousel-pagination-tiles > .pk-snap-dot {
  flex: 0 0 auto;
}

/* One reserved square, so artwork of different aspect ratio occupies one box and every caption
   starts at the same height. The same reservation base.css .pk-card-image makes for a Blurb's
   picture box; this is an Image module's wrap, which that rule does not reach.

   The cap sits on the WRAP and not the module because the Image module's own Design > Sizing >
   Max Width lands on the module, so an editor asking for smaller artwork wins outright. */
html body #page-container .pk-carousel-pagination-tile .et_pb_image .et_pb_image_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--pk-carousel-pagination-tiles-art);
  margin: 0 auto;
  aspect-ratio: 1;
}

/* Both axes, because artwork breaks a one-axis cap in both directions: a rank taller than it is
   wide overflows a width-fitted box, and a wide one overflows a height-fitted box.

   The radius is the one base.css rule 15 gives every Image module on the site. An insignia is a
   Scouting America mark and a clipped corner alters it as surely as a tint would - the Arrow of
   Light artwork is opaque to all four of its own corners, so it is the one that visibly loses. */
html body #page-container .pk-carousel-pagination-tile .et_pb_image img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}

/* Divi puts 30px under a module in a column below 981px and 22.759% of a 1/6 column's width
   under one at gutter 3. Spacing inside a tile is --pk-carousel-pagination-tile-inner-gap and
   nothing else, which is what makes caption-above and caption-below one layout with the modules
   reordered.

   The VERTICAL margins are what go; the auto side margins stay, and the width beside them is what
   makes them harmless. .et_pb_image carries margin-left/right:auto to centre itself, an auto
   cross-axis margin stops a flex item stretching, and a module that shrank to its own artwork
   reserved a narrower box - the one thing the box above exists to prevent. An explicit width
   stretches it instead, and the auto margins then centre whatever the editor's own Max Width
   leaves; zero them and a narrowed insignia hangs against the tile's left edge. */
html body #page-container .pk-carousel-pagination-tile > .et_pb_module {
  margin: 0 auto !important;
}

/* One class of specificity, all of it spent on the module, so the Image module's own Width field -
   .et_pb_image_N, emitted from a stylesheet that loads after this one - still wins. */
:where(.pk-carousel-pagination-tile) > .et_pb_module {
  width: 100%;
}

/* -- The button, built by snap-nav.js -------------------------- */

/* No `display` here, deliberately: position:absolute already blockifies it, and a display would
   beat the UA rule that `hidden` stands the control down with. */
html body #page-container .pk-carousel-pagination-tile-button {
  position: absolute;

  /* 5px, not 0: base.css rule 4 draws focus 5px OUTSIDE the button's box - 3px wide at 2px offset -
     and Divi pairs overflow:hidden with any border radius an editor sets, so on a rounded tile a
     ring drawn at inset:0 is clipped away entirely, measured 2026-09 as 2076 navy pixels around a
     square tile against 0 around the same tile rounded. Inset by the ring's own reach and it lands
     inside the clip; the target stays far over 44px, at 67px on the narrowest tile measured. */
  inset: 5px;

  /* Divi positions every module and leaves it at z-index auto, and an image overlay rises to 3 on
     hover, so the button has to clear both for its focus ring and its mark to stay visible. The
     column is already a stacking context - Divi gives it z-index:2 - so 4 is local to the tile. */
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;

  /* Whatever radius the editor gave the tile, so base.css rule 4's ring traces the tile's own
     corners rather than a rectangle around them. Never !important - inheriting IS the override. */
  border-radius: inherit;
  cursor: pointer;
}

/* The tile's own layout, at zero specificity so anything set on the column in Divi wins outright -
   the same move :where(.pk-carousel--immersive .pk-carousel-item) makes above.

   space-between is what makes a caption optional AND placeable either side: image then text pins
   the artwork to the top of an equal-height tile, text then image pins it to the bottom, and
   either way every tile on the line agrees on one edge.

   A caption's own alignment is NOT inherited from here. Divi stamps an alignment class on every
   Text module, and that declaration sits on a descendant of this box, which beats an inherited
   value with no specificity contest - so a caption module is set to centre in the builder. */
:where(.pk-carousel-pagination-tile) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pk-carousel-pagination-tile-inner-gap);
  text-align: center;
}

/* The current tile is marked BESIDE the artwork and never on it: the insignia are Scouting
   America's own marks, so no rule here may tint, fade, filter or blend them.

   Presence rather than hue carries the state, so it survives a monochrome display - accessibility
   item 9 - and aria-current carries it to a screen reader. Drawn on the button, which is the one
   surface in a tile no editor styles, and reserved in both states so nothing reflows. */
.pk-carousel-pagination-tile-button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--pk-carousel-pagination-tiles-mark-size);
  border-radius: 999px;
  background: var(--pk-carousel-pagination-tiles-mark);
  opacity: 0;
  transition: opacity .25s ease;
}


.pk-carousel-pagination-tile-button[aria-current="true"]::after {
  opacity: 1;
}

/* The mark itself is not motion and stays; only its fade in and out goes. */
@media (prefers-reduced-motion: reduce) {
  .pk-carousel-pagination-tile-button::after {
    transition: none;
  }
}

/* -- Modifier: hide the native scrollbar ----------------------- */

/* Only ever safe alongside the arrows and dots, which is why this is opt-in: the scrollbar is a
   visible affordance AND a drag target, and taking it away with no replacement leaves a rail that
   a mouse user cannot tell scrolls. Scrolling itself is untouched - the bar is hidden, not the
   overflow - so wheel, trackpad, swipe and keyboard all still work. */
html body #page-container .pk-carousel--no-scrollbar .pk-carousel-inner {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html body #page-container .pk-carousel--no-scrollbar .pk-carousel-inner::-webkit-scrollbar {
  display: none;
}

/* -- Modifier: arrows over the slide --------------------------- */

/* The arrows leave the flow and sit on the slide's left and right edges; the dots stay where they
   were. snap-nav.js sets this class on any carousel that has arrows and no .pk-carousel-navigation
   row to put them in, so it is the default rather than something an editor opts into.

   They anchor to the SECTION - the track would be the truer anchor but is a scroll container,
   where an absolute child scrolls away with the content. The section is wider than the track
   whenever the track is capped, so --pk-carousel-edge carries that difference and the arrows land
   beside the slides instead of out at the viewport edge. --pk-carousel-arrow-top exists for the
   layouts where a tall header row pulls the two centres apart. */
.pk-carousel--arrows-overlay {
  --pk-carousel-arrow-top: 50%;
  --pk-carousel-arrow-inset: 16px;
}

/* The track's own left edge, restated: it is width:90% capped at 1080px and centred, so this is
   the same number its auto margins resolve to.

   --pk-carousel-arrow-gutter is how much room one arrow needs beside the track: the button's own
   44px (.pk-snap-arrow in snap-nav.css) plus the same gap it keeps from the edge. It is 0 unless
   the arrows are overlaid, so a carousel with a navigation row reserves nothing. */
.pk-carousel {
  --pk-carousel-edge: max(5%, calc((100% - 1080px) / 2));
  --pk-carousel-arrow-gutter: 0px;
}

.pk-carousel--arrows-overlay {
  --pk-carousel-arrow-gutter: calc(44px + var(--pk-carousel-arrow-inset));
}

.pk-carousel--immersive {
  --pk-carousel-edge: 0px;

  /* No veil where the photograph IS the ground: washing it would fog the bleed. */
  --pk-carousel-edge-shadow: transparent;
}

/* An arrows-only container in overlay mode holds nothing that takes space, so its own gap above
   would be a band of nothing at the end of the section. */
html body #page-container .pk-carousel--arrows-overlay .pk-snap-nav--arrows {
  margin-top: 0;
}

html body #page-container .pk-carousel--arrows-overlay .pk-snap-arrow {
  position: absolute;
  top: var(--pk-carousel-arrow-top);

  /* Above the edge veil, which is 4 to clear Divi's own .et_pb_column--with-menu at 3. */
  z-index: 5;

  /* The part, not the whole transform - snap-nav.css composes this with the hover and the hint. */
  --pk-snap-arrow-y: -50%;

  /* The button is white on an unknown photograph, so it needs its own separation from whatever it
     lands on - the border alone disappears against a pale crop. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

/* Outside the track where the section's own margin is wide enough to hold the button, and pinned
   to the viewport inset where it is not - a track at 90% leaves only 5% either side, which is
   narrower than a 44px button until roughly 1200px. The slide reserves whatever the clamp could
   not push out; see the clearance rule below. */
html body #page-container .pk-carousel--arrows-overlay .pk-snap-arrow--prev {
  left: max(
    var(--pk-carousel-arrow-inset),
    calc(var(--pk-carousel-edge) - var(--pk-carousel-arrow-gutter))
  );
}

html body #page-container .pk-carousel--arrows-overlay .pk-snap-arrow--next {
  right: max(
    var(--pk-carousel-arrow-inset),
    calc(var(--pk-carousel-edge) - var(--pk-carousel-arrow-gutter))
  );
}

/* An absolutely positioned arrow takes no space, so a slide's own copy runs underneath it. Where
   the clamp above could not push the button clear of the track, the slide gives back exactly the
   overlap - nothing at a width that had room, so a wide carousel keeps the editor's own padding.

   The component overrides a slide row's horizontal padding here only while the arrows are
   overlaid: the component put them there, so the component owes the room. Build a
   pk-carousel-navigation row instead and the gutter is 0 and this padding is yours again -
   .pk-carousel--immersive overrides it again for its own measure. */
html body #page-container .pk-carousel--arrows-overlay .pk-carousel-inner > .pk-carousel-item {
  padding-left: max(
    0px,
    calc(var(--pk-carousel-arrow-gutter) - var(--pk-carousel-edge))
  ) !important;
  padding-right: max(
    0px,
    calc(var(--pk-carousel-arrow-gutter) - var(--pk-carousel-edge))
  ) !important;
}

/* -- Modifier: dots only --------------------------------------- */

/* Leaves the dots, which are still a complete control: each one names its slide, so nothing is
   reachable only by the arrows. */
html body #page-container .pk-carousel--no-arrows .pk-snap-arrow {
  display: none;
}

/* -- Modifier: immersive --------------------------------------- */

/* IMMERSIVE MEANS THE SUBJECT FILLS THE VIEWPORT and is the focus: one slide takes the whole
   screen, its photograph bleeds to every edge, and the copy sits ON the photograph rather than
   under it. Nothing here is specific to any one page - it is the general
   full-bleed-photo-with-copy arrangement, and a flat .pk-immersive section is the same design
   without the scroller.

   IT ADDS ALMOST NO STYLING, because the design system already draws this. The scrim, the
   white-on-photo text tiers and the separation shadow come from .pk-immersive / .pk-on-navy /
   .pk-on-photo on the SLIDE ROW - immersive.css states that .pk-immersive works on any element
   carrying the photograph as its own background, a Row included. All this modifier does is make
   the slide big enough and wide enough for them to work on:

     Section  pk-carousel pk-carousel--immersive
       Row    pk-carousel-item pk-immersive pk-on-navy pk-on-photo   <- Background > Image = photo
         Col  heading, copy
       Row    pk-carousel-pagination-dots

   TWO WAYS TO GIVE A SLIDE ITS PHOTOGRAPH, and the modifier supports both. Either set it as the
   slide row's own Background > Image, which hands Divi's Background panel control of size and
   position; or put .pk-carousel-immersive-media on the column holding an Image module, which keeps
   the photograph a real <img> and its alt text with it. Both bleed to the viewport edges, and both
   leave the copy an overlay rather than a block below that eats the photo's height.

   WHY THE COPY DOES NOT COVER THE SUBJECT. .pk-immersive's scrim is a 90deg gradient, Pack Navy at
   .94 on the LEFT clearing to .10 on the right, so the left is where copy is legible and the right
   is where a photograph survives. Which side that is belongs to the slide, not to this file:
   .pk-immersive-reverse mirrors the gradient, .pk-immersive-even flattens it to a wash for a
   photograph with no safe side, and .pk-immersive-copy-right moves the copy column to match - all
   three already in immersive.css, and the inset rule at the end of this block stands aside for the
   last of them. The arrangement is an authoring choice per slide.

   DESKTOP AND TABLET ONLY. Below 768px immersive.css already flattens its scrim to an even wash
   because a narrow crop has no photo-safe side, and a viewport-height slide leaves a subject too
   small to read; so a phone keeps the slide's natural height and scrolls. A phone-specific
   treatment, if it is wanted, is its own approach rather than a squeezed version of this one. */

/* Every knob this modifier exposes, in one place - the same shape .pk-carousel--arrows-overlay
   uses above. Set any of them on the Section for the whole carousel, or on a slide row for one
   slide: a custom property inherits, so the nearer declaration wins with no selector to write. */
.pk-carousel--immersive {
  --pk-carousel-immersive-copy: 620px;
  --pk-carousel-immersive-inset: 5%;
  --pk-carousel-immersive-measure: 1080px;
  --pk-carousel-immersive-media-fit: cover;
  --pk-carousel-immersive-media-position: center center;
}

/* Cover, because immersive means the photograph FILLS the slide - a backdrop that letterboxes is
   a picture with bars. A photograph that must be seen whole, a studio cutout for instance, says so
   in Divi's Background panel: these are :where() defaults at zero specificity, so anything set on
   the instance wins outright. */
:where(.pk-carousel--immersive .pk-carousel-item) {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* A measure for the copy, so a line does not run the width of a viewport-wide slide. 620px is what
   .pk-immersive-copy-right holds the mirrored case to, and the property is here so a slide can
   differ without a selector: set --pk-carousel-immersive-copy on the Section or the row. */
:where(.pk-carousel--immersive .pk-carousel-item) .et_pb_heading,
:where(.pk-carousel--immersive .pk-carousel-item) .et_pb_text {
  max-width: var(--pk-carousel-immersive-copy);
}

@media (min-width: 768px) {
  /* height, not min-height. A floor is what let one oversized slide inflate the whole carousel:
     nothing capped the section, so a full-width image at its natural aspect made the track taller
     than the viewport and every other slide stretched to match. A definite height also gives the
     chain below something to resolve percentages against, which is what lets an image shrink.

     Vertical padding goes because "fills the viewport" and a 64px band cannot both be true - the
     one place this modifier overrides a preset's own skin, and its whole identity. */
  .et_pb_section.pk-carousel--immersive {
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* The track absorbs whatever the header and indicator rows leave, which is what keeps the dots
     on screen while the photograph takes the rest. */
  html body #page-container .pk-carousel--immersive .pk-carousel-inner {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
  }

  /* The slide drops the row's width so the photograph can reach both viewport edges - the same
     declarations .pk-full-bleed makes for a row that is not inside a scroll container.

     align-items:stretch, not center, because the columns have to inherit the slide's height for
     anything inside them to size against it.

     THE PADDING IS WHAT PUTS A MEASURE BACK. Dropping the row's width drops it for the copy too,
     so flowed content sizes against the viewport while type stays in px - and zooming the browser
     out, which enlarges the CSS-pixel viewport, then shrinks the type on screen while the
     photograph holds its size. Padding rather than a width because an absolutely positioned box
     takes its containing block from the ancestor's PADDING EDGE: inset:0 still spans the padding,
     so the media column and .pk-immersive's scrim both keep bleeding while the columns between
     them are measured. A width or a margin would move that containing block and take the bleed
     with it. Set --pk-carousel-immersive-measure to 100% for a slide that wants the full width. */
  html body #page-container .pk-carousel--immersive .pk-carousel-inner > .pk-carousel-item {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 0;
    padding-left: max(
      var(--pk-carousel-immersive-inset),
      var(--pk-carousel-arrow-gutter),
      calc((100% - var(--pk-carousel-immersive-measure)) / 2)
    ) !important;
    padding-right: max(
      var(--pk-carousel-immersive-inset),
      var(--pk-carousel-arrow-gutter),
      calc((100% - var(--pk-carousel-immersive-measure)) / 2)
    ) !important;
  }

  /* Columns keep whatever width Divi gives them - one column or two is the editor's layout
     decision, not this file's. They only become flex columns so the image can flex inside them. */
  html body #page-container .pk-carousel--immersive .pk-carousel-item > .et_pb_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
  }

  /* THE IMAGE IS THE ONLY MODULE THAT GIVES UP HEIGHT. Headings and copy keep theirs, so the photo
     takes what is left over and the slide can never be taller than the viewport - whether the image
     shares a column with the copy or sits in one of its own.

     min-height:0 at every level is load-bearing: a flex item will not shrink below its content's
     intrinsic size without it, and one missing link puts the image back at its natural height,
     which is exactly the fault this replaces. */
  html body #page-container .pk-carousel--immersive .pk-carousel-item .et_pb_image {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  html body #page-container .pk-carousel--immersive .pk-carousel-item .et_pb_image .et_pb_image_wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 0;
  }

  /* contain, because this image is IN THE FLOW rather than behind it: the box it gets is whatever
     height the copy leaves, an accident of the slide rather than a crop anyone chose, and cropping
     a photograph to an accidental aspect ratio loses whatever happens to be at its edges. The
     backdrop below is the opposite case and covers. */
  html body #page-container .pk-carousel--immersive .pk-carousel-item .et_pb_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* -- Media layer: a photograph that bleeds, still an <img> ---- */

  /* Put pk-carousel-immersive-media on the COLUMN holding the Image module and that column leaves
     the flow to become the slide's backdrop, filling it edge to edge with the copy overlaid on
     top. The same job a row background would do, except the photograph stays a real <img> - so it
     keeps its alt text, its srcset, and its place in Google Images, none of which a CSS background
     has.

     It mirrors immersive.css's own pk-immersive-media-row, which solves this for a Section. A
     slide is a Row and a Row cannot hold another Row, so the column is the only rung left.

     z-index:0 !important is load-bearing. pk-immersive lifts every direct child to z-index 2 to
     raise it above the scrim, from a selector carrying ten :not()s that nothing here could
     out-specify - but that rule is not marked important, and an important declaration beats a
     non-important one at any specificity. Without it the photograph paints OVER its own scrim and
     the copy loses its ground. */
  html body #page-container .pk-carousel--immersive .pk-carousel-item > .et_pb_column.pk-carousel-immersive-media {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #page-container .pk-carousel--immersive .pk-carousel-immersive-media .et_pb_image,
  html body #page-container .pk-carousel--immersive .pk-carousel-immersive-media .et_pb_image .et_pb_image_wrap {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
  }

  /* cover, because a backdrop that letterboxes is not a backdrop - it is a picture with bars, and
     the navy behind it never shows. Divi has no object-fit field, so the two custom properties
     declared above are how a slide says otherwise: --pk-carousel-immersive-media-fit: contain to
     see the whole frame, --pk-carousel-immersive-media-position to choose what a crop keeps. */
  html body #page-container .pk-carousel--immersive .pk-carousel-immersive-media .et_pb_image img {
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
    object-fit: var(--pk-carousel-immersive-media-fit);
    object-position: var(--pk-carousel-immersive-media-position);
  }

}

/* -- Visual Builder -------------------------------------------- */

/* A carousel stands down inside the builder: the slides stack, nothing scrolls, nothing clips and
   nothing is held to a viewport height. Two faults live here. The first is the row toolbar, which
   Divi renders ABOVE that row's top edge, and which three things that are right on the front end
   each take away:

     the track's overflow-y:hidden       CLIPS a toolbar sitting above it
     .pk-immersive's overflow:hidden     clips it again, at the slide
     .pk-immersive's isolation:isolate   traps it in a stacking context it cannot paint out of

   which together made the first slide's row settings unreachable. It also fixes the plainer
   problem that a horizontal rail only ever shows slide one, leaving the rest awkward to reach.

   Nothing here adds clearance above a slide. A toolbar overlapping the row above IS Divi's
   behaviour, and a margin invented to avoid it would be worse than the overlap: every row and
   module would then be spaced against a layout the front end does not have.

   body.et-fb is Divi's own Visual Builder hook - it ships CSS keyed to that class - and none of
   this reaches the front end. Deliberately scoped to the carousel: immersive.css's own overflow
   and isolation are load-bearing for every OTHER .pk-immersive on the site, so only slides are
   relaxed here, never .pk-immersive generally.

   PR #64 excluded builder chrome from the immersive CONTENT LIFT for the same underlying reason;
   this is the clipping and stacking half of it, which that change did not reach.

   The second fault is the immersive modifier's HEIGHT CHAIN; the section rule below and the block
   after it are where that is dealt with. */
body.et-fb .pk-carousel-inner {
  display: block !important;
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
}

/* position:sticky does not blockify, so under the rule above the veils compute to display:inline
   and two empty inline boxes with a negative margin generate line boxes the builder does not
   want. */
body.et-fb .pk-carousel-inner::before,
body.et-fb .pk-carousel-inner::after {
  display: none !important;
}

body.et-fb .pk-carousel-item {
  overflow: visible !important;
  isolation: auto !important;
}

body.et-fb .et_pb_section.pk-carousel--immersive {
  min-height: 0 !important;
  display: block !important;

  /* The modifier's whole height chain hangs off ONE definite value - this section's 100svh -
     handed down through the track to the slide, the column and finally the photograph. The
     builder lays out no track, so the chain has nothing to resolve against while the section is
     still exactly one viewport tall: the slides stack past its bottom edge and spill over
     whatever follows. Auto height is what a stack of rows needs, and it is what Divi would have
     given the section on its own. */
  height: auto !important;
}

/* The other half of that chain, at the far end. A FLOWED Image module - one not in a media column
   - is told to flex into whatever height the copy leaves and fill it (`flex:1 1 auto` on the
   module, `height:100%` on the img). With no definite height anywhere above it, `height:100%`
   computes to auto and the photograph falls back to its intrinsic size at the column's full width,
   which for a studio portrait is a few thousand pixels of overflow. So the module stops flexing,
   the img takes its natural height, and the column - a flex container for the sole purpose of
   letting that module flex, with a justify-content that now centres against no spare height -
   goes back to being the block Divi would have given it.

   The media column is deliberately left alone. It is absolutely positioned against its slide row,
   so its height is definite whatever the section does - which is why a slide built that way
   already renders correctly in the builder, scrim and copy included, and why nothing here should
   touch it. */
body.et-fb .pk-carousel--immersive .pk-carousel-item > .et_pb_column:not(.pk-carousel-immersive-media) {
  display: block !important;
}

body.et-fb .pk-carousel--immersive .et_pb_column:not(.pk-carousel-immersive-media) .et_pb_image {
  display: block !important;
  flex: 0 1 auto !important;
}

body.et-fb .pk-carousel--immersive .et_pb_column:not(.pk-carousel-immersive-media) .et_pb_image img {
  height: auto !important;
}

/* A tile button stands down with the track, and the builder never scrolls one - sync() in
   scripts/snap-nav.js hides every control in the strip wherever isScrollable() is false. Repeated
   here because the builder re-renders a module at any moment and a rule cannot be caught between
   passes, where a script pass can: without it an invisible full-tile button swallows the editor's
   own clicks on the Image module underneath it. */
body.et-fb .pk-carousel-pagination-tile-button {
  display: none !important;
}

/* A tile with no slide is hidden on the front end, where a control that does nothing is worse than
   a missing one. Here it is the editor's own mistake to look at, so it comes back carrying the
   count that explains it. The full prefix is load-bearing: the front-end [hidden] rule is (1,2,2)
   and a bare body.et-fb selector would lose to it. */
html body.et-fb #page-container .pk-carousel-pagination-tile[hidden] {
  display: flex !important;
}

body.et-fb .pk-carousel-pagination-tile[data-pk-pagination-tiles-unpaired],
body.et-fb .pk-carousel-pagination-tiles > .et_pb_column:not(.pk-carousel-pagination-tile) {
  outline: 2px dashed var(--pk-carousel-pagination-tiles-alert);
  outline-offset: 4px;
}

body.et-fb .pk-carousel-pagination-tile[data-pk-pagination-tiles-unpaired]::after {
  content: "No slide for this tile - " attr(data-pk-pagination-tiles-unpaired);
}

body.et-fb .pk-carousel-pagination-tiles > .et_pb_column:not(.pk-carousel-pagination-tile)::after {
  content: "Not a pagination tile";
}

/* The words are what carry the message, so the ring is never the only signal. */
body.et-fb .pk-carousel-pagination-tile[data-pk-pagination-tiles-unpaired]::after,
body.et-fb .pk-carousel-pagination-tiles > .et_pb_column:not(.pk-carousel-pagination-tile)::after {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pk-carousel-pagination-tiles-alert);
}

/*! site-styles: components.css */
/* Pack 496 - components. The pk- pattern classes: a whole treatment each, carried by a
   Divi preset or typed into one module's CSS Class field. */

/* -- Nav pill buttons ---------------------------------------- */

/* .nav-btn-pill turns a top-level nav item into a pill button. It goes in the menu
   item's CSS Classes field with ONE colour class beside it, e.g.
   `nav-btn-pill nav-scoutbook-plus-link`. All structure lives on .nav-btn-pill and a
   colour class only re-points the custom properties below, so a second pill is one
   small block rather than a second copy of the component. The grey defaults are real
   values, not placeholders - a pill with no colour class renders and passes contrast.
   Divi builds the mobile menu by cloning the menu in JS, so these classes reach
   .et_mobile_menu on their own; there is nothing extra to set for mobile.

   A Theme Builder header renders the menu as a Divi Menu module, where #main-header and
   #top-menu do not exist on the page at all - so every selector below carries that scope
   AND `.et_pb_menu .et-menu`, or the pill silently renders as an ordinary text link. */
#main-header li.nav-btn-pill,
.et_pb_menu li.nav-btn-pill {
  --nav-pill-bg: #0F2D4A;
  --nav-pill-bg-hover: #0A1B2D;
  --nav-pill-border: #0F2D4A;
  --nav-pill-border-hover: #0A1B2D;
  --nav-pill-text: #FFFFFF;
  --nav-pill-text-hover: #FFFFFF;        /* gold rests on dark text and flips to white */
  --nav-pill-accent: #0F2D4A;            /* mobile: the left rule and the label */
  --nav-pill-accent-hover: #0A1B2D;
  --nav-pill-tint: rgba(15, 45, 74, .06);
}

#main-header #top-menu li.nav-btn-pill > a,
html body #page-container .et_pb_menu .et-menu li.nav-btn-pill > a {
  display: inline-block;
  padding: 9px 20px;            /* replaces Divi's padding-bottom: 33px */
  border: 2px solid var(--nav-pill-border);
  border-radius: 999px;
  background-color: var(--nav-pill-bg);
  color: var(--nav-pill-text);
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  opacity: 1;                   /* Divi fades nav links to .7 on hover */
  transition: background-color .25s ease-in-out,
              border-color .25s ease-in-out,
              color .25s ease-in-out;
}

#main-header #top-menu li.nav-btn-pill > a:hover,
#main-header #top-menu li.nav-btn-pill > a:focus,
html body #page-container .et_pb_menu .et-menu li.nav-btn-pill > a:hover,
html body #page-container .et_pb_menu .et-menu li.nav-btn-pill > a:focus {
  background-color: var(--nav-pill-bg-hover);
  border-color: var(--nav-pill-border-hover);
  color: var(--nav-pill-text-hover);
  opacity: 1;
}

#main-header #top-menu li.nav-btn-pill > a:focus-visible,
html body #page-container .et_pb_menu .et-menu li.nav-btn-pill > a:focus-visible {
  outline: 2px solid var(--nav-pill-bg);
  outline-offset: 3px;
}

/* The Menu module lays the bar out with flex - `.et_pb_menu__menu`, its `nav`, its `ul`
   AND each `li` are all `display:flex; align-items:stretch` - so the anchor is stretched
   to the height of the tallest item, which Divi pads to `31px 0` on a with-logo header.
   The pill's own padding still wins, so it comes out ~77px wide by ~81px tall, and
   `border-radius:999px` clamps to half the SHORTER side: a circle, not a pill. Opting the
   anchor out of the stretch is what restores the shape. Inert on the stock header, whose
   menu is inline-block rather than flex. */
html body #page-container .et_pb_menu .et-menu li.nav-btn-pill > a {
  align-self: center;
}

/* A pill nested in a dropdown. Divi gives submenu links a FIXED width -
   `#top-menu li li a { padding:6px 20px; width:200px }` - so a pill placed under a
   parent item stretches the full width of the dropdown with its label stranded on the
   left, which reads as a broken button rather than a pill. The component sets no width
   of its own, so Divi's wins by default; shrink it to its content instead. The extra
   `li` in the selector is what confines this to submenus and leaves the top-level pill,
   which is sized by its own padding, untouched. */
#main-header #top-menu li li.nav-btn-pill > a,
html body #page-container .et_pb_menu .et-menu li li.nav-btn-pill > a {
  width: auto;
  margin: 4px 0;
}

/* Sticky header: Divi prints `.et-fixed-header #top-menu a { color: ... !important }`
   whenever Theme Options sets a fixed menu link colour, so this one must match it. */
.et-fixed-header #top-menu li.nav-btn-pill > a,
.et-fixed-header #top-menu li.nav-btn-pill > a:hover {
  color: var(--nav-pill-text) !important;
}

/* Mobile / hamburger menu - coloured label with a left accent rule, not a pill. */
#main-header .et_mobile_menu li.nav-btn-pill > a,
html body #page-container .et_pb_menu .et_mobile_menu li.nav-btn-pill > a {
  margin-top: 10px;
  padding: 14px calc(5% - 3px);         /* absorbs both borders so the label lines up with its siblings */
  border-bottom: 0;                     /* drops Divi's hairline separator */
  border-left: 3px solid var(--nav-pill-accent);
  border-right: 3px solid transparent;  /* reserved: hover changes colour, not layout */
  border-radius: 10px;
  color: var(--nav-pill-accent);
  font-weight: 700;
  transition: background-color .2s ease-in-out,
              border-color .2s ease-in-out,
              color .2s ease-in-out;
}

#main-header .et_mobile_menu li.nav-btn-pill > a:hover,
#main-header .et_mobile_menu li.nav-btn-pill > a:focus,
html body #page-container .et_pb_menu .et_mobile_menu li.nav-btn-pill > a:hover,
html body #page-container .et_pb_menu .et_mobile_menu li.nav-btn-pill > a:focus {
  background-color: var(--nav-pill-tint);
  border-left-color: var(--nav-pill-accent-hover);
  border-right-color: var(--nav-pill-accent-hover);
  color: var(--nav-pill-accent-hover);
  opacity: 1;                           /* Divi fades mobile links to .7 on hover */
}

/* Outline variant. Add nav-btn-pill-outline beside nav-btn-pill in the menu item's
   CSS Classes field. The pill's own colour becomes its text and border and the fill
   arrives on hover, so that colour has to clear 4.5:1 as TEXT on the header - which
   Gold, at 3.19:1, does not. An outline gold pill sets --nav-pill-bg to Gold Deep. */
#main-header #top-menu li.nav-btn-pill.nav-btn-pill-outline > a,
html body #page-container .et_pb_menu .et-menu li.nav-btn-pill.nav-btn-pill-outline > a {
  background-color: transparent;
  border-color: var(--nav-pill-bg);
  color: var(--nav-pill-bg);
}

#main-header #top-menu li.nav-btn-pill.nav-btn-pill-outline > a:hover,
#main-header #top-menu li.nav-btn-pill.nav-btn-pill-outline > a:focus,
html body #page-container .et_pb_menu .et-menu li.nav-btn-pill.nav-btn-pill-outline > a:hover,
html body #page-container .et_pb_menu .et-menu li.nav-btn-pill.nav-btn-pill-outline > a:focus {
  background-color: var(--nav-pill-bg);
  border-color: var(--nav-pill-bg);
  color: var(--nav-pill-text);
}

.et-fixed-header #top-menu li.nav-btn-pill.nav-btn-pill-outline > a {
  color: var(--nav-pill-bg) !important;
}
.et-fixed-header #top-menu li.nav-btn-pill.nav-btn-pill-outline > a:hover {
  color: var(--nav-pill-text) !important;
}

/* Scoutbook Plus - Cub Scout red, outline. Red is reserved for destinations owned by
   Scouting America rather than by the pack. Outline so the pack's own Join pill reads
   as the primary action; this one is a login for families already in. Never put it on
   a navy ground - red on Pack Navy is 2.50:1. */
#main-header li.nav-btn-pill.nav-scoutbook-plus-link,
.et_pb_menu li.nav-btn-pill.nav-scoutbook-plus-link {
  --nav-pill-bg: #ce1126;
  --nav-pill-bg-hover: #a30d1e;
  --nav-pill-border: #ce1126;
  --nav-pill-border-hover: #a30d1e;
  --nav-pill-accent: #ce1126;
  --nav-pill-accent-hover: #a30d1e;
  --nav-pill-tint: rgba(206, 17, 38, .06);
}

/* Join - Gold, the loudest thing in the nav and the other half of blue-and-gold.
   Dark text at rest because gold cannot carry white (3.19:1); on hover the fill goes
   to Gold Deep and the text flips to white, because #1A1A1A on Gold Deep is only
   3.11:1. The mobile accent is Gold Deep, since mobile draws the colour as text on
   white, where plain Gold fails. */
#main-header li.nav-btn-pill.nav-join-link,
.et_pb_menu li.nav-btn-pill.nav-join-link {
  --nav-pill-bg: #D97706;
  --nav-pill-bg-hover: #A94D08;
  --nav-pill-border: #D97706;
  --nav-pill-border-hover: #A94D08;
  --nav-pill-text: #1A1A1A;
  --nav-pill-text-hover: #FFFFFF;
  --nav-pill-accent: #A94D08;
  --nav-pill-accent-hover: #92400E;
  --nav-pill-tint: rgba(217, 119, 6, .08);
}

/* Row / Timeline Row styles */
/* SWAP POINT C: Gold. The dot is a filled surface rather than an edge, so plain Gold
   is right here. Replaces var(--wp-admin-theme-color), a WordPress editor variable
   that resolves to #007cba on the front end and rendered this dot WordPress blue. */
.pk-timeline-row::before {
content: "";
  position: absolute;
  top: 0;
  left: -31px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #D97706;
  border: 3px solid #FFF;
  box-shadow: 0 0 0 2px #D97706;
}

/* -- Sections on navy ------------------------------------------- */

/* .pk-on-navy inverts a section for a navy ground. It is carried by BOTH
   Section / Hero Navy and Section / Global Footer: the inversion is the shared part,
   while padding and role belong to each preset. Divi sets text colour per MODULE, so
   a navy section otherwise needs every heading and paragraph flipped to light by
   hand, and one missed module renders near-black on navy.

   TWO tiers, not one. White carries headings and anything emphasised; a muted slate
   carries body copy and links. Flattening everything to white destroys the hierarchy
   exactly where a dark section needs it most - a footer of a dozen equally white
   links reads as a wall rather than a list.

   #94A3B8 is a NAVY-ONLY value: 5.48:1 on the ground below, but 2.56:1 on white,
   where it must never appear. Same restriction as Gold Bright, opposite direction.

   Every rule below needs the `html body #page-container` prefix and !important,
   because a module preset's own colour is emitted per module at (0,2,1) with
   !important and beats a plainly written selector. */
.pk-on-navy {
  --on-navy-bg: #0F2D4A;
  --on-navy-heading: #FFFFFF;
  --on-navy-body: #94A3B8;
  --on-navy-link: #94A3B8;
  --on-navy-link-hover: #FFFFFF;
  --on-navy-eyebrow: #F59E0B;
  --on-navy-rule: #1E4976;      /* hairline dividers - decorative, so no contrast gate */

  /* The semantic roles on this ground; every ratio is against #0F2D4A. Only the foreground
     channel moves - the fills keep reading --pk-*, which is what keeps pk-bg-danger a red
     panel here. Literal hexes rather than var(--on-navy-heading): a tier is typographic
     hierarchy and a role is meaning, and fusing them would make re-pointing what danger means
     drag the body copy with it.

     danger and success take Alert Red Bright and Trail Green Bright - navy-only values in the
     same sense Slate Muted and Gold Bright are navy-only: 2.77:1 and 1.80:1 on white, where they
     must never appear. Lifting a signal off a dark ground needs a LIGHTER value, the direction
     Gold travels to Gold Bright. The darker Alert Red that carries the light ground is 1.54:1
     here - worse than the Scouting Red it replaced - which is why this ground needs its own pair
     rather than the light-ground one.

     .pk-on-navy.pk-trustbar needs nothing of its own: on #0A1B2D white is 17.39:1, Slate Muted
     6.78:1 and Gold Bright 8.10:1. */
  --pk-foreground-primary: #FFFFFF;        /* 14.05:1 - Pack Navy on Pack Navy is 1:1 */
  --pk-foreground-secondary: #94A3B8;      /*  5.48:1 - Slate Muted, the body tier's own value */
  --pk-foreground-success: #7DD3A0;        /*  7.83:1 - Trail Green Bright, navy-only */
  --pk-foreground-danger: #F87171;         /*  5.08:1 - Alert Red Bright, navy-only */
  --pk-foreground-warning-text: #F59E0B;   /*  6.54:1 - Gold Bright, the eyebrow tier's value */
}

.pk-on-navy { background-color: var(--on-navy-bg); }

html body #page-container .pk-on-navy h1,
html body #page-container .pk-on-navy h2,
html body #page-container .pk-on-navy h3,
html body #page-container .pk-on-navy h4,
html body #page-container .pk-on-navy h5,
html body #page-container .pk-on-navy h6,
html body #page-container .pk-on-navy .et_pb_heading_container h1,
html body #page-container .pk-on-navy .et_pb_heading_container h2,
html body #page-container .pk-on-navy .et_pb_heading_container h3,
html body #page-container .pk-on-navy .et_pb_heading_container h4,
html body #page-container .pk-on-navy .et_pb_heading_container h5,
html body #page-container .pk-on-navy .et_pb_heading_container h6,
html body #page-container .pk-on-navy .et_pb_module_heading,
html body #page-container .pk-on-navy .et_pb_module_header {
  color: var(--on-navy-heading) !important;
}

/* `.et_pb_promo_description div` is here because the CTA is the one module whose own Body
   colour lands DEEPER than this rule: Divi's Body font group for it is
   `%%order_class%% .et_pb_promo_description div` (Cta.php `$this->main_css_element`), and
   Cta.php `render()` always wraps the body in that bare div. Naming only the parent left
   `CTA / Standard`'s #333333 painting a child, which no specificity here can reach - 1.28:1
   on flat navy, and the reason a CTA card looked inverted except for its one paragraph.
   Text and Blurb are the other way round, which is why they need no such line. */
html body #page-container .pk-on-navy .et_pb_text_inner,
html body #page-container .pk-on-navy .et_pb_blurb_description,
html body #page-container .pk-on-navy .et_pb_promo_description,
html body #page-container .pk-on-navy .et_pb_promo_description div {
  color: var(--on-navy-body) !important;
}

/* A bold run inside body copy lifts back to the heading tier - the venue name above
   an address, a label before a time. Without this the emphasis is invisible, since
   bold alone barely registers at the muted tier. */
html body #page-container .pk-on-navy .et_pb_text_inner strong,
html body #page-container .pk-on-navy .et_pb_text_inner b,
html body #page-container .pk-on-navy .et_pb_promo_description strong,
html body #page-container .pk-on-navy .et_pb_promo_description b {
  color: var(--on-navy-heading) !important;
}

html body #page-container .pk-on-navy .pk-eyebrow,
html body #page-container .pk-on-navy .pk-eyebrow .et_pb_text_inner,
html body #page-container .pk-on-navy .pk-eyebrow p { color: var(--on-navy-eyebrow) !important; }

/* Rule 5 paints a CTA body link #0F2D4A, which on this ground is Pack Navy on Pack Navy
   - a 1:1 link nobody can see. The promo selector has to be here as well as there. */
html body #page-container .pk-on-navy .et_pb_text_inner a,
html body #page-container .pk-on-navy .et_pb_blurb_description a,
html body #page-container .pk-on-navy .et_pb_toggle_content a,
html body #page-container .pk-on-navy .et_pb_tab_content a,
html body #page-container .pk-on-navy .et_pb_promo_description a { color: var(--on-navy-link) !important; }
html body #page-container .pk-on-navy .et_pb_text_inner a:hover,
html body #page-container .pk-on-navy .et_pb_blurb_description a:hover,
html body #page-container .pk-on-navy .et_pb_toggle_content a:hover,
html body #page-container .pk-on-navy .et_pb_tab_content a:hover,
html body #page-container .pk-on-navy .et_pb_promo_description a:hover { color: var(--on-navy-link-hover) !important; }

/* Divi draws a divider's line on the pseudo-element, not the module. */
html body #page-container .pk-on-navy .et_pb_divider:before {
  border-top-color: var(--on-navy-rule) !important;
}

/* The primary button inverts to gold - Pack Navy on Pack Navy would vanish. Gold is
   the one loud thing allowed on this ground, so exactly one button per section should
   carry it. */
html body #page-container .pk-on-navy .et_pb_button.pk-btn-block {
  background-color: #D97706 !important;
  border-color: #D97706 !important;
  color: #1A1A1A !important;
}
html body #page-container .pk-on-navy .et_pb_button.pk-btn-block:hover {
  background-color: #A94D08 !important;
  border-color: #A94D08 !important;
  color: #FFFFFF !important;
}

/* Button / Text Link is a LINK, not a call to action - the footer navigation is built
   from these, and a column of gold ones reads as a column of CTAs. It takes the link
   tier, like any other link on this ground. */
html body #page-container .pk-on-navy .et_pb_button.pk-btn-text {
  color: var(--on-navy-link) !important;
}
html body #page-container .pk-on-navy .et_pb_button.pk-btn-text:hover {
  color: var(--on-navy-link-hover) !important;
}

/* Rule 4's focus ring is Pack Navy, which is invisible on this ground. */
.pk-on-navy a:focus, .pk-on-navy button:focus, .pk-on-navy .et_pb_button:focus,
.pk-on-navy a:focus-visible, .pk-on-navy button:focus-visible,
.pk-on-navy .et_pb_button:focus-visible { outline-color: #FFFFFF !important; }

/* .pk-on-photo goes on the SAME element as .pk-on-navy, for a section whose navy is a
   scrim over a photograph rather than a flat fill. Slate Muted is measured at 5.48:1
   against flat #0F2D4A and that number does not survive a variable ground: over the
   bright part of a photo under a 0.6 scrim it falls to about 2.8:1, where white holds
   about 7.3:1. So the body and link tiers collapse onto the heading tier, and the
   hierarchy comes from size and weight instead of colour.

   Link hover takes Gold Wash rather than white, which would be no feedback at all.

   It re-points the properties rather than restating any rule, so every .pk-on-navy
   selector keeps working untouched. Setting the colour on the Row, Column or Text module
   cannot work instead: Divi writes that colour onto the module wrapper while .pk-on-navy
   paints .et_pb_text_inner, a CHILD, and a child's own declaration beats an inherited
   value outright.

   Compound with .pk-on-navy so it wins on SPECIFICITY rather than source order. */
.pk-on-navy.pk-on-photo {
  --on-navy-body: #FFFFFF;
  --on-navy-link: #FFFFFF;
  --on-navy-link-hover: #FEF3C7;

  /* Every navy-only value is measured against a FLAT fill and none of those figures survives a
     photograph, so all four roles that carry a colour here collapse with the tiers. Alert Red
     Bright is the tightest of them at 5.08:1 on flat navy, so it is the first to go. */
  --pk-foreground-secondary: #FFFFFF;
  --pk-foreground-warning-text: #FFFFFF;
  --pk-foreground-danger: #FFFFFF;
  --pk-foreground-success: #FFFFFF;
}

/* Text over a photograph needs edge separation the ground on its own cannot give: a scrim is
   uniform and a photograph is not, so a bright detail landing under a letterform still erases
   it, at a place no single opacity can predict. Keyed to pk-on-photo because that class IS the
   declaration "this ground is a photograph" - a Hero Navy carrying a background photo earns the
   shadow on the same terms as an immersive section, and needs no class of its own.

   The shadow belongs to the GROUND, not to each module. Set per module in Divi it has to be
   remembered on every Heading and every Text module in every photographic section, which is the
   work the section preset exists to remove - and one missed module is the only one that looks
   wrong.

   Diffuse rather than the offset drop Divi's preset2 draws: the job here is separation, and a
   shadow that reads AS a shadow is a different, louder decision. Black at low alpha, which is
   what every other shadow on this site already uses; no palette colour is introduced.

   pk-on-photo-shadow-strong for an unusually busy photograph, pk-on-photo-shadow-light for dark
   type over a bright crop, pk-on-photo-shadow-none to opt out. All three go on the SECTION
   beside pk-on-photo and only re-point the property below. */
.pk-on-photo {
  --pk-on-photo-text-shadow:
    0 2px 4px rgba(0, 0, 0, .55),
    0 1px 12px rgba(0, 0, 0, .28);
}

.pk-on-photo.pk-on-photo-shadow-strong {
  --pk-on-photo-text-shadow:
    0 2px 3px rgba(0, 0, 0, .75),
    0 3px 14px rgba(0, 0, 0, .55);
}

/* Dark type over a bright crop, so the section must NOT also carry pk-on-navy, whose tiers
   force the type white - a white shadow behind white type is nothing. */
.pk-on-photo.pk-on-photo-shadow-light {
  --pk-on-photo-text-shadow:
    0 1px 3px rgba(255, 255, 255, .85),
    0 1px 10px rgba(255, 255, 255, .45);
}

/* The other half of that variant, immersive-only because .pk-immersive is the one thing here
   that draws a scrim. It paints unconditionally, and under it dark body copy reaches 4.5:1
   nowhere a line of text actually starts - 3.34:1 against a white photograph at the alpha where
   a pk-immersive-copy-right block begins. At (0,3,0) it outranks the base rule, both phone
   rules, -even and -reverse, so none of them competes. A photographic section built on Divi's
   own gradient overlay turns that overlay off in Divi instead. */
.pk-immersive.pk-on-photo.pk-on-photo-shadow-light {
  --pk-immersive-scrim: none;
}

.pk-on-photo.pk-on-photo-shadow-none {
  --pk-on-photo-text-shadow: none;
}

/* The element set .pk-on-navy already recolours on this ground, minus the heading aliases it
   needs and this does not: text-shadow INHERITS, so naming h1-h6 and the three text containers
   carries every link, bold run and list item inside them without listing any.

   The prefix and !important are load-bearing for the reason rule 14 gives - Divi emits a
   module's own Design > Text > Text Shadow field per module and can mark it !important
   (TextShadow.php calls get_important() on the declaration). */
html body #page-container .pk-on-photo h1,
html body #page-container .pk-on-photo h2,
html body #page-container .pk-on-photo h3,
html body #page-container .pk-on-photo h4,
html body #page-container .pk-on-photo h5,
html body #page-container .pk-on-photo h6,
html body #page-container .pk-on-photo .et_pb_text_inner,
html body #page-container .pk-on-photo .et_pb_blurb_description,
html body #page-container .pk-on-photo .et_pb_promo_description {
  text-shadow: var(--pk-on-photo-text-shadow) !important;
}

/* Anything drawing its own fill is no longer over the photograph, so it takes none of this -
   the same list, and the same reason, as the fill register further down that re-points the navy
   tiers for a panel. Re-pointing the property rather than resetting text-shadow keeps one
   mechanism: the rule above resolves var() at whichever descendant it matched. Both lists have
   to gain a line together when a future pattern class carries a fill.

   Buttons need no line: Divi renders a Button module, and the CTA's own .et_pb_promo_button, as
   a SIBLING of the text containers above rather than inside one, so neither ever inherits. */
.pk-on-photo .pk-bg-white,
.pk-on-photo .pk-bg-grey,
.pk-on-photo .pk-bg-light,
.pk-on-photo .pk-bg-gold-wash,
.pk-on-photo .pk-card-tint,
.pk-on-photo .pk-pill,
.pk-on-photo.pk-bg-white,
.pk-on-photo.pk-bg-grey,
.pk-on-photo.pk-bg-light,
.pk-on-photo.pk-bg-gold-wash,
.pk-on-photo.pk-card-tint,
.pk-on-photo.pk-pill {
  --pk-on-photo-text-shadow: none;
}

/* -- Button / Ghost --------------------------------------------- */

/* .pk-btn-ghost is an outlined button: the quiet counterpart to a filled one, for a
   secondary action sitting beside a primary - a login, a "learn more". Add the class
   in the button's Advanced tab beside whatever preset it already carries. It adapts
   to its ground, so the same class works in a white section and a navy one, which is
   the whole reason it is not two classes.

   On navy it is deliberately white rather than Scouting Red: red is reserved for
   Scouting America destinations, but red on Pack Navy is 2.50:1 and unusable, so a
   Scouting link on this ground takes the neutral treatment instead. */
html body #page-container .et_pb_button.pk-btn-ghost {
  background-color: transparent !important;
  border: 2px solid #0F2D4A !important;
  color: #0F2D4A !important;
}
html body #page-container .et_pb_button.pk-btn-ghost:hover {
  background-color: #0F2D4A !important;
  border-color: #0F2D4A !important;
  color: #FFFFFF !important;
}

html body #page-container .pk-on-navy .et_pb_button.pk-btn-ghost {
  border-color: var(--on-navy-heading) !important;
  color: var(--on-navy-heading) !important;
}
html body #page-container .pk-on-navy .et_pb_button.pk-btn-ghost:hover {
  background-color: var(--on-navy-heading) !important;
  border-color: var(--on-navy-heading) !important;
  color: var(--on-navy-bg) !important;
}

/* -- Inline module rows ----------------------- */

/* Divi stacks a column's modules and gives each a bottom margin, so two modules that
   belong on ONE line - a pill beside its label, a button beside a text link - cannot be
   built from module settings at all. .pk-inline goes on the COLUMN (Column Settings >
   Advanced > CSS Class) and lays its modules out in a row instead.

   Only for genuinely SEPARATE modules. Two runs of one line of text are a span inside a
   single Text module, the way .pk-price does it - flex cannot give two modules a shared
   baseline, which is the one thing a unit set against a figure needs.

   No .pk- class for the row half of this. A row whose columns should be equal height is
   Divi's own Row > Sizing > Equalize Column Heights, which emits
   .et_pb_row.et_pb_equal_columns{display:flex}.

   .pk-inline-end stays end-aligned at every width; a layout that should recentre on a
   phone says so with its own media query, as the trust bar below does. */
html body #page-container .pk-inline,
html body #page-container .pk-trustbar .et_pb_column {
  --pk-inline-gap: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pk-inline-gap);
}

html body #page-container .pk-inline > .et_pb_module,
html body #page-container .pk-trustbar .et_pb_module {
  margin-bottom: 0 !important;
}

html body #page-container .pk-inline.pk-inline-end,
html body #page-container .pk-trustbar .et_pb_column.et-last-child {
  justify-content: flex-end;
}

/* .pk-vcenter is the other axis: it centres a column's modules VERTICALLY, for a short
   module beside a taller neighbour - a lone button next to a paragraph.

   It needs Row > Design > Sizing > EQUALIZE COLUMN HEIGHTS turned ON.
   Without that the column is only as tall as its own contents, so there is no surplus height
   to centre within and the class appears to do nothing. Divi has no setting for this at all:
   Equalize Column Heights only sets display:flex on the ROW, which stretches the columns and
   leaves their contents pinned to the top, and Divi ships no align-items or justify-content
   rule for a column anywhere.

   Do not reach for a top margin instead. That number is tuned to the neighbouring column's
   current line count, so it breaks when the copy changes and again at every breakpoint where
   that copy rewraps. */
html body #page-container .pk-vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* -- Trust bar ----------------------------------- */

/* .pk-trustbar is the slim bar above the header - a .pk-pill badge and its sentence
   on one side, a meeting fact on the other. It takes a deeper ground than a normal
   navy section, #0A1B2D, the value navy hovers already use, which lifts every tier:
   body #94A3B8 goes 5.48:1 to 6.78:1, white to 17.39:1, and the #A94D08 pill edge
   sits at 3.11:1 against the 3:1 gate for a non-text boundary.

   A pill is the first thing on this ground carrying its OWN background, which makes
   it the exception to the block above. That block paints .et_pb_text_inner - a CHILD
   of the module Divi writes a module colour onto - and a declaration on a child beats
   an inherited value outright, with no specificity contest between them, so the
   pill's own colour never reaches its text. Setting that colour in the Divi UI cannot
   fix it: Divi re-emits it onto the module, where it loses exactly the same way.

   White is the only value that passes on #A94D08: 5.60:1, against 2.34:1 for the amber
   this first carried and 1.96:1 for the body tier landing on it uninvited. The brighter
   #D97706 is 3.19:1 with white and must not be substituted here.

   Divi adds overflow:hidden alongside any border-radius, and per CSS 2.1 section 10.8.1 that
   moves an inline-block's baseline to its bottom margin edge - so a rounded pill rides
   high beside plain text and no vertical-align value settles it. Flex sidesteps baseline
   alignment entirely: the ROW so the two columns centre on each other, since the side
   holding the pill is taller, and each COLUMN so its own children centre - that column
   half is .pk-inline above. */
.pk-on-navy.pk-trustbar { --on-navy-bg: #0A1B2D; }

.pk-pill {
  --pk-pill-bg: #A94D08;
  --pk-pill-text: #FFFFFF;
}

html body #page-container .pk-pill,
html body #page-container .pk-pill .et_pb_text_inner,
html body #page-container .pk-pill .et_pb_text_inner p {
  color: var(--pk-pill-text) !important;
}

html body #page-container .pk-pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--pk-pill-bg);
  border-radius: 999px;
  padding: 3px 10px !important;
  margin-bottom: 0 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* The CSS form of Row > Sizing > Equalize Column Heights, kept here because this row
   lives in a Theme Builder header. The column half is .pk-inline above. */
html body #page-container .pk-trustbar .et_pb_row { display: flex; flex-wrap: wrap; }

/* Stacked on a phone, where a right-aligned half reads as a stray. */
@media (max-width: 980px) {
  html body #page-container .pk-trustbar .et_pb_column,
  html body #page-container .pk-trustbar .et_pb_column.et-last-child { justify-content: center; }
}

/* -- Price line --------------------------------- */

/* .pk-price is the figure line on a cost card - a number and its unit on ONE line, in ONE
   Text module. Two Divi modules cannot do this: each is block-level, so they land in
   separate rows, and even forced inline they cannot share a baseline, which is the one
   thing a small unit set against a large figure needs.

   Write it in the Text module's Text tab:
     <p class="pk-price">$130 <span class="pk-price-unit">/ year</span></p>

   Structure lives on .pk-price and a colour class only re-points the properties, so a
   second colour is one line rather than a second copy of the component. */
.pk-price {
  --pk-price-ink: #0F2D4A;
  --pk-price-unit-ink: #595959;
  margin: 0 0 4px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--pk-price-ink);
}

.pk-price-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--pk-price-unit-ink);
}

/* Gold Deep, never Gold. #D97706 is a surface: on white it is 3.19:1, which clears the 3:1
   LARGE-text gate at this size and nothing else, so the same class on a smaller figure
   would fail silently. Gold Deep is 5.60:1 and passes as ordinary text too. */
.pk-price.pk-price-gold { --pk-price-ink: #A94D08; }

/* -- Card accent line ------------------------ */

/* .pk-card-topline is CARD-FLAT with a colour edge on top - a modifier, not a fifth
   surface: fill, hairline, radius, shadow and padding are all unchanged. Goes on whatever
   element DRAWS the card, so one class covers a Column, a Row acting as a panel, and a
   Blurb that is a card in its own right. Never on a Blurb inside a card column: the line
   belongs to the box that has the border, and two of them read as a mistake.

   Navy is the default because it is the only accent safe on both grounds - 12.6:1 on white
   and 12.55:1 on the #F2F2F2 band. Gold clears the 3:1 non-text gate on white at 3.19:1 but
   is 2.85:1 on #F2F2F2, so the gold variant is WHITE SECTIONS ONLY; that is the measurement
   behind palette rule 3. */
html body #page-container .pk-card-topline {
  --pk-topline-ink: #0F2D4A;
  border-top: 4px solid var(--pk-topline-ink) !important;
}

html body #page-container .pk-card-topline.pk-card-topline-gold {
  --pk-topline-ink: #D97706;
}

/* -- Whole-card click target ----------------------------------- */

/* .pk-stretch-link makes an entire card clickable through the ONE link already inside it, rather
   than adding a second link that would give the card two tab stops and two accessible names for
   one destination. Put it on the column; the link keeps its own text, which stays the accessible
   name.

   Generic rather than rail-only: any card ending in a single link can use it. */
html body #page-container .pk-stretch-link {
  position: relative;
}

html body #page-container .pk-stretch-link a::after {
  content: "";
  position: absolute;
  inset: 0;

  /* Above the column's own background, below anything a future card puts on top. */
  z-index: 1;
}

/* Both halves of Divi's .et_pb_module{z-index:9;position:relative} defeat the overlay, and
   neutralising one leaves a card clickable everywhere except over a module that paints later.
   The positioning makes the link's own module the overlay's containing block, so inset:0 sizes
   to that module rather than to the card; the z-index applies to a static flex item too, so in a
   flex card column - .pk-cards .et_pb_column and .pk-rail-item are both display:flex - it traps
   the overlay in a stacking context it cannot cover its siblings from.

   Card text is consequently not selectable, which is Bootstrap 5's own behaviour for
   .stretched-link and the trade this class accepts. Restoring a position or a z-index here to win
   selection back is what makes the class do nothing at all. */
html body #page-container .pk-stretch-link .et_pb_module {
  position: static;
  z-index: auto;
}

/* -- Call to action ------------------------- */

/* The Call To Action module draws its own button, and that button cannot take the
   Button / Primary preset: the preset carries .pk-btn-block, Divi puts a module's CSS
   class on the MODULE, and .et_pb_button.pk-btn-block never matches .et_pb_promo_button.
   Left alone the button falls back to the Theme Customizer default of #333333 - so the
   same button renders in two different colours depending on which module drew it.

   Values are the ones rule 6 uses; change a button colour and change both.

   Set the module's Text Color to Dark. "Light" stamps et_pb_bg_layout_dark on the
   module, and Divi pairs that with `.et_pb_bg_layout_dark{color:#fff!important}` plus
   `.et_pb_promo_button{color:inherit}` - so the button label follows the module rather than
   this rule, and any run without an explicit colour goes white on a light panel. */
html body #page-container .pk-cta .et_pb_promo_button.et_pb_button {
  background-color: #0F2D4A;
  border-color: #0F2D4A;
  color: #FFFFFF;
}
html body #page-container .pk-cta .et_pb_promo_button.et_pb_button:hover {
  background-color: #0A1B2D !important;
  border-color: #0A1B2D !important;
  color: #FFFFFF !important;
}

/* On navy it inverts to gold, exactly as .pk-btn-block does - Pack Navy on Pack Navy
   would vanish. No second preset: one CTA preset works on either ground. */
html body #page-container .pk-on-navy .et_pb_promo_button.et_pb_button {
  background-color: #D97706 !important;
  border-color: #D97706 !important;
  color: #1A1A1A !important;
}
html body #page-container .pk-on-navy .et_pb_promo_button.et_pb_button:hover {
  background-color: #A94D08 !important;
  border-color: #A94D08 !important;
  color: #FFFFFF !important;
}

@media (max-width: 767px) {
  .pk-cta .et_pb_promo_button.et_pb_button { display: block; width: 100%; text-align: center; }
}

/*! site-styles: immersive.css */
/* Pack 496 - immersive photographic surfaces. A section whose ground is a photograph
   under a Pack Navy scrim, plus the full-bleed row and image it is built from. */

/* -- Immersive recruitment surfaces ----------------------------- */

/* .pk-immersive puts a Pack Navy scrim between a background photograph and whatever sits on
   top of it, and lifts that content clear of the veil. It goes on any element carrying the
   photograph as its own background - a regular Divi Section, a Row, a Column, or a single
   module such as a Blurb or a CTA. Two things vary by host and are marked where they are
   set below: the tall vertically-centred STAGE is section-only, and a narrow host takes an
   even scrim rather than the directional one.

   On a Section it creates the photo/scrim/content relationship:

       Section: pk-immersive pk-on-navy pk-on-photo
         |- optional Row: pk-immersive-media-row  (only when an Image module is the photo)
         \- normal content Row(s)                 (automatically lifted above the photo)

   PREFERRED BUILD: put the photograph in Section > Background > Image. A section background
   already sits behind every Row, so no negative margin, absolute Row positioning or Fullwidth
   module is needed. The ::before layer below is the Pack Navy scrim and every normal Row is
   raised above it.

   ALTERNATE BUILD: when the photograph must be an Image module, make the FIRST Row
   pk-immersive-media-row and its Image module pk-immersive-media. That row becomes the
   background layer while every later Row floats above it.

   The scrim uses Pack Navy only. No new brand colour is introduced. Its dark end is deliberately
   strong because .pk-on-photo collapses body copy to white; over the brightest possible image
   #FFFFFF still clears normal-text contrast through the part of the scrim where copy belongs.
   Do NOT also add Divi's own colour-gradient overlay to the same section unless art direction
   calls for a deliberately stronger double scrim. */
.pk-immersive {
  --pk-immersive-scrim:
    linear-gradient(
      90deg,
      rgba(15, 45, 74, .94) 0%,
      rgba(15, 45, 74, .68) 42%,
      rgba(15, 45, 74, .36) 72%,
      rgba(15, 45, 74, .10) 100%
    );

  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
}

/* A narrow host cannot keep its copy in the directional scrim's dark half, and the gradient
   guarantees nothing outside it. Measured 2026-09 on the 413px Camp Signup CTA card, over
   its real photo and its paragraph's own band: white body copy is 2.14:1 at worst with
   22.8% of the band under 4.5:1, where the even scrim is 5.12:1 at worst with none under.
   A full-bleed host earns the gradient by keeping copy left, or right with
   .pk-immersive-copy-right; a column or a module can promise neither.

   Divi puts .et_pb_module on modules only, never on a section, row or column, so these two
   selectors are the whole set of narrow hosts. .pk-immersive-reverse and .pk-immersive-even
   below are equally specific and come later, so either stays an explicit opt-in here. */
.et_pb_module.pk-immersive,
.et_pb_column.pk-immersive {
  --pk-immersive-scrim: rgba(15, 45, 74, .68);
}

/* The STAGE is section-only. A tall, vertically-centred band is what a full-bleed
   recruitment section is; on a Blurb or a CTA it is nonsense - an 85vh card is not a card.
   Scoping it to .et_pb_section is what lets the scrim above travel to a module. Verified
   2026-09: all 153 uses of pk-immersive are on sections, so nothing that exists today
   renders differently. */
.et_pb_section.pk-immersive {
  min-height: 85vh;
  min-height: 85svh;

  /* Center the Row(s) inside the available stage */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Divi tablet breakpoint */
@media (max-width: 980px) {
  .et_pb_section.pk-immersive {
    min-height: 75vh;
    min-height: 75svh;
  }
}

/* Phone */
@media (max-width: 767px) {
  .et_pb_section.pk-immersive {
    min-height: 650px;
  }

  /* Photo composition is less predictable on narrow crops,
     so use an even Pack Navy scrim. */
  .pk-immersive {
    --pk-immersive-scrim: rgba(15, 45, 74, .68);
  }
}

/* Scrim: above the Section background / media row, below all content Rows. */
.pk-immersive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--pk-immersive-scrim);
}

/* This is the answer to "how does the content float above the immersed photo?"
   A positioned element participates in z-index; Divi's own children otherwise remain at auto,
   so the scrim paints over them. No class is required on the content itself.

   EVERY direct child, not only .et_pb_row: on a Section the children are rows, but on a
   Column they are modules, on a CTA they are .et_pb_promo_description and the button, and on
   a Blurb .et_pb_blurb_content. Naming rows alone is what confined the scrim to sections and
   left a photo-backed module veiling its own text.

   The :not() list is everything Divi injects as an absolutely-positioned direct child: the
   background and decoration layers its section template composes beside the rows (pattern, mask,
   parallax, video, both inside dividers, box shadow), and the Visual Builder's own chrome
   (et-fb-*, et-pb-draggable-spacing*). Lifting either forces position:relative - a layer collapses
   to zero height, the builder's overlays stack at the top and bury its toolbar. Measured 2026-09. */
html body #page-container .pk-immersive > *:not(.pk-immersive-media-row):not(.box-shadow-overlay):not(.et_pb_background_pattern):not(.et_pb_background_mask):not(.et_parallax_bg_wrap):not(.et_pb_section_video_bg):not(.et_pb_top_inside_divider):not(.et_pb_bottom_inside_divider):not([class*="et-fb-"]):not([class*="et-pb-draggable-spacing"]) {
  position: relative;
  z-index: 2;
}

/* A row or module being dragged gains et-fb-dragged, which the et-fb- exclusion above then
   catches too, so re-lift it - otherwise it sits under the scrim for the length of the drag. */
html body #page-container .pk-immersive > .et-fb-dragged {
  position: relative;
  z-index: 2;
}

/* On phones the copy and subject move unpredictably as the image crops. Use an even Navy
   scrim instead of assuming the safe text area stays on the left. */
@media (max-width: 767px) {
  .pk-immersive {
    --pk-immersive-scrim: rgba(15, 45, 74, .68);
  }
}

/* Mirrors the immersive scrim when the photographic subject occupies the left
   side and the copy belongs on the right. Uses the SAME Pack Navy values as the
   base immersive scrim; only the direction changes. */
.pk-immersive.pk-immersive-reverse {
  --pk-immersive-scrim:
    linear-gradient(
      270deg,
      rgba(15, 45, 74, .94) 0%,
      rgba(15, 45, 74, .68) 42%,
      rgba(15, 45, 74, .36) 72%,
      rgba(15, 45, 74, .10) 100%
    );
}

/* Narrow crops cannot guarantee that either side stays photo-safe. The compound
   selector is required here because .pk-immersive.pk-immersive-reverse is more
   specific than the base phone rule above. */
@media (max-width: 767px) {
  .pk-immersive.pk-immersive-reverse {
    --pk-immersive-scrim: rgba(15, 45, 74, .68);
  }
}

/* Even immersive scrim.
   Use when copy is centered or the photograph does not have a clear left/right
   text-safe zone. Uses Pack Navy only; no new palette colour is introduced. */
.pk-immersive.pk-immersive-even {
  --pk-immersive-scrim: rgba(15, 45, 74, .68);
}

/* Narrow mobile crops need stronger contrast because copy can land over any
   part of the photograph. Compound selector matches the modifier specificity. */
@media (max-width: 767px) {
  .pk-immersive.pk-immersive-even {
    --pk-immersive-scrim: rgba(15, 45, 74, .68);
  }
}


/* Right-side copy block for alternating immersive photographic sections. */
html body #page-container .pk-immersive-copy-right {
  float: none !important;
  width: 100%;
  max-width: 620px;
  margin-left: auto !important;
  margin-right: 0 !important;
}

@media (max-width: 767px) {
  html body #page-container .pk-immersive-copy-right {
    max-width: none;
    margin-left: 0 !important;
  }
}

/* Alternate Image-module background.
   Put pk-immersive-media-row on the FIRST row and pk-immersive-media on its Image module.
   The row contributes no document height, so the Section's preset/min-height and its content
   Rows determine the stage height. */
html body #page-container .pk-immersive > .et_pb_row.pk-immersive-media-row {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

html body #page-container .pk-immersive > .et_pb_row.pk-immersive-media-row > .et_pb_column {
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
}

html body #page-container .pk-immersive .et_pb_image.pk-immersive-media {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0 !important;
}

html body #page-container .pk-immersive .et_pb_image.pk-immersive-media .et_pb_image_wrap,
html body #page-container .pk-immersive .et_pb_image.pk-immersive-media img {
  display: block;
  width: 100%;
  height: 100%;
}

html body #page-container .pk-immersive .et_pb_image.pk-immersive-media img {
  object-fit: cover;
  object-position: center center;
  border-radius: 0 !important;
}

/* Row / Full Bleed.
   Use on a REGULAR Row when its media/layout should reach both viewport edges instead of the
   site's normal 90% / 1080px measure. This only removes horizontal containment; vertical
   spacing remains the Row preset's job (or use a pk-p*-0 utility for a one-off correction). */
html body #page-container .et_pb_row.pk-full-bleed {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Image / Full Bleed.
   The site-wide Image rule rounds normal content photography to 6px. Immersive edge-to-edge
   photography is intentionally the exception. */
html body #page-container .et_pb_image.pk-image-full-bleed {
  width: 100%;
  max-width: none;
  margin-bottom: 0 !important;
}

html body #page-container .et_pb_image.pk-image-full-bleed .et_pb_image_wrap,
html body #page-container .et_pb_image.pk-image-full-bleed img {
  display: block;
  width: 100%;
}

html body #page-container .et_pb_image.pk-image-full-bleed img {
  border-radius: 0 !important;
}

/* Optional modifier for Text / Eyebrow On Image.
   The normal .pk-on-navy eyebrow is Gold Bright by design. Use this modifier ONLY when a
   particular photograph makes gold unreliable and the eyebrow must join the white photo tier.
   It does not change the normal navy-section eyebrow anywhere else on the site. */
html body #page-container .pk-eyebrow.pk-eyebrow-inverse,
html body #page-container .pk-eyebrow.pk-eyebrow-inverse .et_pb_text_inner,
html body #page-container .pk-eyebrow.pk-eyebrow-inverse p {
  color: var(--pk-white, #FFFFFF) !important;
}

/* Constrains large campaign/display headings by readable character measure rather
   than a fixed pixel width. The actual rendered width therefore scales naturally
   with the heading's responsive font size. */
html body #page-container .pk-display-measure {
  width: 100%;
  max-width: 50ch;
}


/*! site-styles: media-placeholder.css */
/* Pack 496 - pk-media-placeholder. Marks a surface whose final photograph does not exist yet,
   so an unfinished page is obviously unfinished rather than quietly shipping a flat navy panel
   that looks deliberate.

   Generic on purpose: it goes on any element that will later carry a background image - a
   slide, a Section, a Column, a media panel beside copy - and it changes nothing but that
   element's ground plus a badge naming the asset still owed.

   Usage. The badge text is real markup, not CSS content, so it is readable, translatable and
   selectable, and so a screen reader announces it:

     <div class="pk-carousel-item pk-media-placeholder">
       <p class="pk-media-placeholder__badge">Image needed - Lion uniform, 2500x1400</p>
       ...the slide's real copy...
     </div>

   REMOVING IT is the whole point: delete the class and the badge paragraph, set the real
   background image, and nothing else about the element changes. Anything that would have to be
   undone as well belongs in the component, not here. */

.pk-media-placeholder {
  /* Deliberately the Pack Navy pair rather than a neutral grey hatch: these surfaces sit under
     .pk-on-photo, whose text tiers are all white, so a light placeholder ground would render
     the slide's real copy invisible and misreport the layout it exists to preview. */
  background-color: #0F2D4A;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .05) 0,
    rgba(255, 255, 255, .05) 12px,
    rgba(255, 255, 255, .12) 12px,
    rgba(255, 255, 255, .12) 24px
  );
}

/* Gold Deep at 5.60:1 against white, the same pair .pk-pill already uses, so the badge needs no
   value of its own.

   Held at the top by `margin-bottom:auto` rather than absolute positioning, so that it assumes no
   positioning context of its own: it reaches the top through whatever flex column it is dropped
   into and degrades to a plain block at the top anywhere else. An absolute badge would instead
   depend on an ancestor being positioned, which is a promise no host component here makes. */
.pk-media-placeholder__badge {
  align-self: center;
  max-width: 100%;
  margin: 0 0 auto;
  padding: 6px 10px;
  border-radius: 4px;
  background: #A94D08;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  text-align: center;

  /* The badge draws its own fill, so it is no longer over a photograph and takes none of the
     separation shadow - the same reason, and the same mechanism, as the fill register in
     components.css that re-points this property for .pk-pill and .pk-card-tint. */
  --pk-on-photo-text-shadow: none;
}

/* A placeholder standing in for a CONTENT image rather than a background: it needs its own box,
   because there is no photograph to give it one. 16:9 matches the crop the finished asset will
   be exported at, so the surrounding layout does not move when the image lands. */
.pk-media-placeholder--box {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 16px;
  border-radius: 6px;
  overflow: hidden;
}

/* Nothing else in the box competes for the space, so the badge sits centred rather than pinned. */
.pk-media-placeholder--box .pk-media-placeholder__badge {
  margin: 0;
}

/*! site-styles: rail.css */
/* Pack 496 - pk-rail. A horizontal row of tiles that scrolls when it runs out of width, built on
   native scrolling and CSS scroll-snap. No carousel library and no autoplay.

   RAIL OR CAROUSEL? They are different jobs, which is why they are different components - see
   "Rail or carousel?" in docs/components/rail.md.

   BUILT FROM ORDINARY DIVI MODULES: an editor makes one in the visual builder with no HTML and no
   Code module. A Section becomes the rail, its Row becomes the track, each Column becomes a tile.

     Section   pk-rail
       Row     pk-rail-track
         Col   pk-rail-item
           ... any modules ...

   Adding a tile is adding a column. Reordering is dragging. Nothing here counts tiles or hard-codes
   a width per tile count - the three widths below are the whole responsive story, and they are why
   six tiles sit across a desktop row with nothing to scroll and become a rail as the viewport
   narrows.

   It works with scripts/snap-nav.js absent: the track is a real scroll container, so touch swipe,
   trackpad, shift+wheel and the keyboard all work. That file only adds the arrows and dots.

   Sizing is three custom properties, so a different rail is a width, a gap and a radius rather
   than new selectors:

     --pk-rail-item     the flex basis of one tile
     --pk-rail-gap      the space between tiles
     --pk-rail-radius   the tile's corner radius

   The `html body #page-container` prefix and the !important flags are load-bearing for the reason
   base.css rule 6 gives: Divi emits its own column width, float and gutter-margin rules, and below
   480px it collapses every column with `.et_pb_column { width:100% !important }`. A
   plainly written selector loses to those and the rail silently renders as a stack. */

.pk-rail {
  --pk-rail-gap: 12px;
  --pk-rail-item: calc((100% - (5 * var(--pk-rail-gap))) / 6);
  --pk-rail-radius: 6px;

  position: relative;
}

@media (max-width: 980px) {
  .pk-rail {
    --pk-rail-item: calc((100% - (2 * var(--pk-rail-gap))) / 3);
  }
}

@media (max-width: 767px) {
  /* Under a half the next tile stays partly visible, which is the only cue on a phone that the
     rail scrolls at all - there is no cursor to reveal it and no scrollbar worth seeing. */
  .pk-rail {
    --pk-rail-item: 42%;
  }
}

/* -- The track: a Divi Row ------------------------------------- */

/* overscroll-behavior-x stops a swipe that reaches the end of the rail from being handed to the
   browser as a back-navigation gesture, which on a phone loses the page. */
html body #page-container .pk-rail-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: var(--pk-rail-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* -- A tile: a Divi Column ------------------------------------- */

html body #page-container .pk-rail-track > .pk-rail-item {
  flex: 0 0 var(--pk-rail-item) !important;

  /* Divi floats columns and spaces them with percentage margins. Both have to go: a float inside
     a flex container is ignored anyway, but the margin would double the gap. */
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;

  /* Without min-width:0 a flex item refuses to shrink below its content's intrinsic width, so one
     long unbroken label widens its tile and breaks the snap rhythm for the whole rail. */
  min-width: 0;
  scroll-snap-align: start;
  border-radius: var(--pk-rail-radius);

  /* The tile's fill, border and shadow come from the Column / Card preset it is built on; only
     the centring the rail needs is added here. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

/* A fixed box for artwork of unequal aspect ratio. The Arrow of Light insignia is 125x53 against
   125 square for every other rank, and without a reserved box that one tile starts its label some
   30px above its neighbours' - the same fault, and the same fix, that base.css .pk-card-image
   applies to an image Blurb. */
html body #page-container .pk-rail-track .et_pb_image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  margin-bottom: 10px !important;
}

html body #page-container .pk-rail-track .et_pb_image img {
  width: auto;
  max-width: 100%;
  max-height: 64px;
}

/*! site-styles: snap-nav.css */
/* Pack 496 - controls for the scroll-snap components.
   The arrows and dots that scripts/snap-nav.js builds, styled once and shared by pk-rail and
   pk-carousel, because a visitor should not meet two different arrow buttons on one site.

   Everything here is created by JavaScript. Nothing in this file styles markup an editor writes,
   which is why none of it appears in either component's build instructions.

   Keyboard focus is deliberately absent: base.css rule 4 already rings every button, and a second
   ring drawn by a component is how two rings end up disagreeing. */

/* The controls are hidden outright when nothing overflows - a dead arrow pair beside a rail
   that cannot scroll is furniture, not a control. */
.pk-snap-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.pk-snap-nav[hidden] {
  display: none;
}

.pk-snap-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* One transform, assembled from parts, because more than one rule has a claim on it: the
     overlay modifier centres the button vertically, the hover lifts it, and the discovery hint
     nudges it sideways. Written as three separate `transform` declarations the most specific one
     would simply win and silently discard the others - an overlaid arrow would stop being centred
     the moment it was hovered. Each claim sets its own property instead, and this line composes
     them. Transform and shadow only: both are composited, so no state here can reflow the row. */
  --pk-snap-arrow-y: 0;
  --pk-snap-arrow-scale: 1;

  transform: translateY(var(--pk-snap-arrow-y)) scale(var(--pk-snap-arrow-scale));
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;

  /* 44px is the tap target base.css rule 16 already holds the mobile menu to. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #0F2D4A;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0F2D4A;
  cursor: pointer;
}

/* display:block removes the inline baseline gap under the icon, which would otherwise push the
   chevron up by the descender space of a line box it does not need. With that gone the button's
   flex centring lands the icon exactly, because the chevron is symmetric within its own viewBox
   (see arrowButton() in scripts/snap-nav.js). */
.pk-snap-arrow svg {
  display: block;
  width: 18px;
  height: 18px;
}

.pk-snap-arrow:hover {
  background: #0F2D4A;
  color: #FFFFFF;
  --pk-snap-arrow-scale: 1.06;

  box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
}

/* The chevron leans the way the button travels. Two pixels is the whole gesture - it reads as
   intent rather than as animation, and it is the one part of the hover that says WHICH direction
   this button goes rather than merely that it is a button. */
.pk-snap-arrow svg {
  transition: transform .18s ease;
}

.pk-snap-arrow--prev:hover svg {
  transform: translateX(-2px);
}

.pk-snap-arrow--next:hover svg {
  transform: translateX(2px);
}

/* A disabled arrow is at the end of the track and goes nowhere, so it says nothing on hover. */
.pk-snap-arrow[disabled]:hover {
  --pk-snap-arrow-scale: 1;

  box-shadow: none;
}

/* ONE nudge, the first time a visitor sees the carousel, saying there is more to the right.
   scripts/snap-nav.js adds this class once and removes it when the animation ends, and never adds
   it again - a control that moves on its own after the visitor has understood it is noise, and a
   looping one is a WCAG 2.2.2 failure. It resolves --pk-snap-arrow-y so an overlaid arrow keeps
   its vertical centring for the length of the nudge. */
@keyframes pk-snap-arrow-hint {
  0%,
  100% {
    transform: translateY(var(--pk-snap-arrow-y)) translateX(0);
  }

  45% {
    transform: translateY(var(--pk-snap-arrow-y)) translateX(6px);
  }
}

.pk-snap-arrow--hint {
  animation: pk-snap-arrow-hint 700ms ease-in-out 1;
}

.pk-snap-arrow[disabled]:hover svg {
  transform: none;
}

/* At an end the arrow is disabled rather than removed, so the control set does not change width
   as the track is scrolled. */
.pk-snap-arrow[disabled] {
  opacity: .35;
  cursor: default;
}

.pk-snap-arrow[disabled]:hover {
  background: #FFFFFF;
  color: #0F2D4A;
}

/* The gap separates the 44px TARGETS, not the 10px of ink inside them: at 8px the dots read as
   42px apart while the targets sit exactly on their floor, which is why a tighter-looking value
   is not available here. See accessibility item 4 in docs/style-guide/index.html - "Never put two
   tappable things closer than 8px apart". */
.pk-snap-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 10px of ink inside a 44px target: the indicator stays small without the hit area going with it. */
.pk-snap-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pk-snap-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;

  /* #767676 is 4.54:1 on white, clearing the 3:1 gate a control's boundary has to meet. */
  background: #767676;
}

/* Position is never signalled by colour alone - the current indicator is also a different SHAPE,
   an elongated pill against its neighbours' circles, which survives a monochrome display and a
   colour-blind reader. Width alone changes, so the row's height and the 44px targets are fixed and
   nothing reflows as the carousel moves. */
.pk-snap-dot::before {
  transition: width .25s ease, background-color .25s ease;
}

.pk-snap-dot[aria-current="true"]::before {
  width: 26px;
  background: #0F2D4A;
}

/* Every transition above is decoration on a control that works identically without it, so a
   reduced-motion preference removes all of it and leaves the states themselves - the fill, the
   colour, the pill's width - to change instantly. base.css rule 18 already flattens durations
   site-wide; this states the intent at the component so a later edit here cannot reintroduce
   motion the preference is meant to stop. */
@media (prefers-reduced-motion: reduce) {
  .pk-snap-arrow,
  .pk-snap-arrow svg,
  .pk-snap-dot::before {
    transition: none;
  }

  .pk-snap-arrow:hover {
    --pk-snap-arrow-scale: 1;
  }

  .pk-snap-arrow--hint {
    animation: none;
  }

  .pk-snap-arrow--prev:hover svg,
  .pk-snap-arrow--next:hover svg {
    transform: none;
  }
}

/* On navy the controls invert, the same move .pk-btn-block makes in components.css. */
.pk-on-navy .pk-snap-arrow {
  border-color: #FFFFFF;
  background: transparent;
  color: #FFFFFF;
}

.pk-on-navy .pk-snap-arrow:hover {
  background: #FFFFFF;
  color: #0F2D4A;
}

.pk-on-navy .pk-snap-dot::before {
  background: #94A3B8;
}

.pk-on-navy .pk-snap-dot[aria-current="true"]::before {
  background: #FFFFFF;
}

/*! site-styles: utilities.css */
/* -- Utility classes -------------------------- */

/* Bootstrap 5 utility classes under our own pk- namespace. The names, the steps and the
   breakpoints are Bootstrap's exactly, so pk-mt-3 is the 16px Bootstrap says it is and what
   you already know transfers. Type them into Advanced > CSS Class on any section, row,
   column or module, or write them onto your own markup inside a Text or Code module - the
   one place Divi gives you no fields at all.

   Preset first. A preset carries a whole pattern and keeps every instance of it identical;
   a utility corrects ONE property of ONE instance. A page whose modules each carry six
   utilities has stopped using the preset system, which is the thing keeping this site
   consistent. The same three utilities on every card is a preset waiting to be made.

   THIS FILE MUST LOAD LAST. Every utility carries the same prefix as the pattern classes
   in the files beside it, so it has the same specificity and only source order separates
   them. Last wins, which is what lets pk-p-0 correct pk-card-tint. Load it earlier and the
   utilities silently stop overriding every pattern class, with no error anywhere.
   The prefix and !important are on every rule for the reason rule 14 gives.

   A utility also beats the module's own Design tab, which Divi emits at (0,2,0). That is
   the point, and it is also the trap: a module carrying pk-mb-0 will not respond to its
   Margin field, and nothing in the builder says why. Take the class off, do not fight it. */

/* Palette tokens, then Bootstrap's semantic roles pointing AT those tokens. Two names for
   one value, and deliberately NOT synonyms: pk-text-scouting-red says which colour and why
   (a destination Scouting America owns), pk-text-danger says what it means (this input is
   invalid). They resolve to DIFFERENT hexes, which is the split this layer was built for.

   Defining each role as var(--pk-token) keeps a single source of truth for the value while
   leaving the two free to part: re-point what danger means and no token moves, change
   Scouting Red and both follow. Reach for the role when the colour is carrying meaning, and
   for the token when you want that specific colour.

   The palette's reserved-red rule governs the TOKEN, not the role. pk-text-scouting-red is
   reserved for Scouting-owned destinations; a red validation message is pk-text-danger and
   is not a branding statement at all.

   There is no info role. The palette has no cyan and no fourth blue to spare, and minting
   one here would put a colour on the site the branding guide never approved. An
   informational note is pk-text-primary; an info panel is pk-bg-gold-wash with pk-border.
   If one is ever wanted it is a single line here.
   Only the tokens a utility actually uses are here. Slate Muted and Gold Bright are
   absent because nothing below may use them - both are navy-only text values that
   pk-on-navy applies on your behalf. The whole palette lives in the branding guide. */
:root {
  --pk-navy: #0F2D4A;
  --pk-navy-deep: #0A1B2D;
  --pk-navy-slate: #1E4976;
  --pk-gold: #D97706;
  --pk-gold-deep: #A94D08;
  --pk-gold-wash: #FEF3C7;
  --pk-scouting-red: #CE1126;
  --pk-alert-red: #8C1D18;
  --pk-trail-green: #147838;
  --pk-ink: #1A1A1A;
  --pk-body: #333333;
  --pk-muted: #595959;
  --pk-field: #767676;
  --pk-edge: #DDDDDD;
  --pk-line: #E6E6E6;
  --pk-grey: #F2F2F2;
  --pk-white: #FFFFFF;

  /* warning splits in two because one gold cannot do both jobs. #D97706 is 3.19:1 on white
     - sound as a surface, illegible as text - so the text role takes Gold Deep at 5.60:1.
     Bootstrap's own .text-warning has exactly this defect; we are not copying it. */
  --pk-primary: var(--pk-navy);
  --pk-secondary: var(--pk-muted);
  --pk-success: var(--pk-trail-green);
  --pk-danger: var(--pk-alert-red);
  --pk-warning: var(--pk-gold);
  --pk-warning-text: var(--pk-gold-deep);
  --pk-light: var(--pk-grey);
  --pk-dark: var(--pk-ink);

  /* The value a role takes as a FOREGROUND - as text, as a meaningful glyph, as a meaningful
     edge. On a light ground it IS the role, so nothing here changes anything on white or grey.

     It exists so a ground can move a role's foreground without moving its fill. pk-bg-danger
     reads --pk-danger, and .pk-on-navy .pk-bg-danger is an Alert Red panel carrying white at
     9.11:1 - re-pointing the role itself would repaint that panel white on white. Same split as
     --pk-warning / --pk-warning-text above, one axis over: fill versus foreground rather than
     surface versus text.

     Only the five roles that name a MEANING are here. There is deliberately no
     --pk-foreground-warning: pk-icon-warning and pk-border-warning read --pk-warning, Gold is
     4.41:1 on navy, and a meaningful glyph or edge answers to 3:1 - that half already survives
     the ground. light and dark name a LIGHTNESS rather than a meaning and do not adapt either.
     Tokens never adapt at all: pk-text-scouting-red asks for that hex and gets it, everywhere.

     A foreground utility reads --pk-foreground-*; only pk-bg-* reads --pk-*. */
  --pk-foreground-primary: var(--pk-primary);
  --pk-foreground-secondary: var(--pk-secondary);
  --pk-foreground-success: var(--pk-success);
  --pk-foreground-danger: var(--pk-danger);
  --pk-foreground-warning-text: var(--pk-warning-text);
}

/* Spacing. Bootstrap's six steps at Bootstrap's values:
     0 = 0     1 = 4px     2 = 8px     3 = 16px     4 = 24px     5 = 48px
   Sides are Bootstrap 5's: t top, b bottom, s start (left), e end (right), x both sides,
   y top and bottom, and nothing at all for all four. Bootstrap 4's ml- and mr- became ms-
   and me- in Bootstrap 5; this follows 5. auto is margin-only, as it is there.

   Step 1 is 4px, the one value here NOT on the site's 8px scale. It is Bootstrap's, kept so
   the steps mean what they mean everywhere else, and it is for an inline nudge between two
   things on one line. Never build vertical rhythm from it: the spacing scale owns that, and
   steps 0, 2, 3, 4 and 5 all land on it exactly.

   Nothing above 48px has a step, deliberately. Sections own all vertical space on this site
   and own it through their presets - SEC-STANDARD, SEC-HERO, ROW-STACKED - so a 64px or 96px
   gap is a section-rhythm decision rather than a nudge, and it belongs in the preset. */
html body #page-container .pk-m-0 { margin:0 !important; }
html body #page-container .pk-m-1 { margin:4px !important; }
html body #page-container .pk-m-2 { margin:8px !important; }
html body #page-container .pk-m-3 { margin:16px !important; }
html body #page-container .pk-m-4 { margin:24px !important; }
html body #page-container .pk-m-5 { margin:48px !important; }
html body #page-container .pk-m-auto { margin:auto !important; }
html body #page-container .pk-mt-0 { margin-top:0 !important; }
html body #page-container .pk-mt-1 { margin-top:4px !important; }
html body #page-container .pk-mt-2 { margin-top:8px !important; }
html body #page-container .pk-mt-3 { margin-top:16px !important; }
html body #page-container .pk-mt-4 { margin-top:24px !important; }
html body #page-container .pk-mt-5 { margin-top:48px !important; }
html body #page-container .pk-mt-auto { margin-top:auto !important; }
html body #page-container .pk-mb-0 { margin-bottom:0 !important; }
html body #page-container .pk-mb-1 { margin-bottom:4px !important; }
html body #page-container .pk-mb-2 { margin-bottom:8px !important; }
html body #page-container .pk-mb-3 { margin-bottom:16px !important; }
html body #page-container .pk-mb-4 { margin-bottom:24px !important; }
html body #page-container .pk-mb-5 { margin-bottom:48px !important; }
html body #page-container .pk-mb-auto { margin-bottom:auto !important; }
html body #page-container .pk-ms-0 { margin-left:0 !important; }
html body #page-container .pk-ms-1 { margin-left:4px !important; }
html body #page-container .pk-ms-2 { margin-left:8px !important; }
html body #page-container .pk-ms-3 { margin-left:16px !important; }
html body #page-container .pk-ms-4 { margin-left:24px !important; }
html body #page-container .pk-ms-5 { margin-left:48px !important; }
html body #page-container .pk-ms-auto { margin-left:auto !important; }
html body #page-container .pk-me-0 { margin-right:0 !important; }
html body #page-container .pk-me-1 { margin-right:4px !important; }
html body #page-container .pk-me-2 { margin-right:8px !important; }
html body #page-container .pk-me-3 { margin-right:16px !important; }
html body #page-container .pk-me-4 { margin-right:24px !important; }
html body #page-container .pk-me-5 { margin-right:48px !important; }
html body #page-container .pk-me-auto { margin-right:auto !important; }
html body #page-container .pk-mx-0 { margin-left:0 !important; margin-right:0 !important; }
html body #page-container .pk-mx-1 { margin-left:4px !important; margin-right:4px !important; }
html body #page-container .pk-mx-2 { margin-left:8px !important; margin-right:8px !important; }
html body #page-container .pk-mx-3 { margin-left:16px !important; margin-right:16px !important; }
html body #page-container .pk-mx-4 { margin-left:24px !important; margin-right:24px !important; }
html body #page-container .pk-mx-5 { margin-left:48px !important; margin-right:48px !important; }
html body #page-container .pk-mx-auto { margin-left:auto !important; margin-right:auto !important; }
html body #page-container .pk-my-0 { margin-top:0 !important; margin-bottom:0 !important; }
html body #page-container .pk-my-1 { margin-top:4px !important; margin-bottom:4px !important; }
html body #page-container .pk-my-2 { margin-top:8px !important; margin-bottom:8px !important; }
html body #page-container .pk-my-3 { margin-top:16px !important; margin-bottom:16px !important; }
html body #page-container .pk-my-4 { margin-top:24px !important; margin-bottom:24px !important; }
html body #page-container .pk-my-5 { margin-top:48px !important; margin-bottom:48px !important; }
html body #page-container .pk-my-auto { margin-top:auto !important; margin-bottom:auto !important; }

html body #page-container .pk-p-0 { padding:0 !important; }
html body #page-container .pk-p-1 { padding:4px !important; }
html body #page-container .pk-p-2 { padding:8px !important; }
html body #page-container .pk-p-3 { padding:16px !important; }
html body #page-container .pk-p-4 { padding:24px !important; }
html body #page-container .pk-p-5 { padding:48px !important; }
html body #page-container .pk-pt-0 { padding-top:0 !important; }
html body #page-container .pk-pt-1 { padding-top:4px !important; }
html body #page-container .pk-pt-2 { padding-top:8px !important; }
html body #page-container .pk-pt-3 { padding-top:16px !important; }
html body #page-container .pk-pt-4 { padding-top:24px !important; }
html body #page-container .pk-pt-5 { padding-top:48px !important; }
html body #page-container .pk-pb-0 { padding-bottom:0 !important; }
html body #page-container .pk-pb-1 { padding-bottom:4px !important; }
html body #page-container .pk-pb-2 { padding-bottom:8px !important; }
html body #page-container .pk-pb-3 { padding-bottom:16px !important; }
html body #page-container .pk-pb-4 { padding-bottom:24px !important; }
html body #page-container .pk-pb-5 { padding-bottom:48px !important; }
html body #page-container .pk-ps-0 { padding-left:0 !important; }
html body #page-container .pk-ps-1 { padding-left:4px !important; }
html body #page-container .pk-ps-2 { padding-left:8px !important; }
html body #page-container .pk-ps-3 { padding-left:16px !important; }
html body #page-container .pk-ps-4 { padding-left:24px !important; }
html body #page-container .pk-ps-5 { padding-left:48px !important; }
html body #page-container .pk-pe-0 { padding-right:0 !important; }
html body #page-container .pk-pe-1 { padding-right:4px !important; }
html body #page-container .pk-pe-2 { padding-right:8px !important; }
html body #page-container .pk-pe-3 { padding-right:16px !important; }
html body #page-container .pk-pe-4 { padding-right:24px !important; }
html body #page-container .pk-pe-5 { padding-right:48px !important; }
html body #page-container .pk-px-0 { padding-left:0 !important; padding-right:0 !important; }
html body #page-container .pk-px-1 { padding-left:4px !important; padding-right:4px !important; }
html body #page-container .pk-px-2 { padding-left:8px !important; padding-right:8px !important; }
html body #page-container .pk-px-3 { padding-left:16px !important; padding-right:16px !important; }
html body #page-container .pk-px-4 { padding-left:24px !important; padding-right:24px !important; }
html body #page-container .pk-px-5 { padding-left:48px !important; padding-right:48px !important; }
html body #page-container .pk-py-0 { padding-top:0 !important; padding-bottom:0 !important; }
html body #page-container .pk-py-1 { padding-top:4px !important; padding-bottom:4px !important; }
html body #page-container .pk-py-2 { padding-top:8px !important; padding-bottom:8px !important; }
html body #page-container .pk-py-3 { padding-top:16px !important; padding-bottom:16px !important; }
html body #page-container .pk-py-4 { padding-top:24px !important; padding-bottom:24px !important; }
html body #page-container .pk-py-5 { padding-top:48px !important; padding-bottom:48px !important; }

@media (min-width: 576px) {
  html body #page-container .pk-m-sm-0 { margin:0 !important; }
  html body #page-container .pk-m-sm-1 { margin:4px !important; }
  html body #page-container .pk-m-sm-2 { margin:8px !important; }
  html body #page-container .pk-m-sm-3 { margin:16px !important; }
  html body #page-container .pk-m-sm-4 { margin:24px !important; }
  html body #page-container .pk-m-sm-5 { margin:48px !important; }
  html body #page-container .pk-m-sm-auto { margin:auto !important; }
  html body #page-container .pk-mt-sm-0 { margin-top:0 !important; }
  html body #page-container .pk-mt-sm-1 { margin-top:4px !important; }
  html body #page-container .pk-mt-sm-2 { margin-top:8px !important; }
  html body #page-container .pk-mt-sm-3 { margin-top:16px !important; }
  html body #page-container .pk-mt-sm-4 { margin-top:24px !important; }
  html body #page-container .pk-mt-sm-5 { margin-top:48px !important; }
  html body #page-container .pk-mt-sm-auto { margin-top:auto !important; }
  html body #page-container .pk-mb-sm-0 { margin-bottom:0 !important; }
  html body #page-container .pk-mb-sm-1 { margin-bottom:4px !important; }
  html body #page-container .pk-mb-sm-2 { margin-bottom:8px !important; }
  html body #page-container .pk-mb-sm-3 { margin-bottom:16px !important; }
  html body #page-container .pk-mb-sm-4 { margin-bottom:24px !important; }
  html body #page-container .pk-mb-sm-5 { margin-bottom:48px !important; }
  html body #page-container .pk-mb-sm-auto { margin-bottom:auto !important; }
  html body #page-container .pk-ms-sm-0 { margin-left:0 !important; }
  html body #page-container .pk-ms-sm-1 { margin-left:4px !important; }
  html body #page-container .pk-ms-sm-2 { margin-left:8px !important; }
  html body #page-container .pk-ms-sm-3 { margin-left:16px !important; }
  html body #page-container .pk-ms-sm-4 { margin-left:24px !important; }
  html body #page-container .pk-ms-sm-5 { margin-left:48px !important; }
  html body #page-container .pk-ms-sm-auto { margin-left:auto !important; }
  html body #page-container .pk-me-sm-0 { margin-right:0 !important; }
  html body #page-container .pk-me-sm-1 { margin-right:4px !important; }
  html body #page-container .pk-me-sm-2 { margin-right:8px !important; }
  html body #page-container .pk-me-sm-3 { margin-right:16px !important; }
  html body #page-container .pk-me-sm-4 { margin-right:24px !important; }
  html body #page-container .pk-me-sm-5 { margin-right:48px !important; }
  html body #page-container .pk-me-sm-auto { margin-right:auto !important; }
  html body #page-container .pk-mx-sm-0 { margin-left:0 !important; margin-right:0 !important; }
  html body #page-container .pk-mx-sm-1 { margin-left:4px !important; margin-right:4px !important; }
  html body #page-container .pk-mx-sm-2 { margin-left:8px !important; margin-right:8px !important; }
  html body #page-container .pk-mx-sm-3 { margin-left:16px !important; margin-right:16px !important; }
  html body #page-container .pk-mx-sm-4 { margin-left:24px !important; margin-right:24px !important; }
  html body #page-container .pk-mx-sm-5 { margin-left:48px !important; margin-right:48px !important; }
  html body #page-container .pk-mx-sm-auto { margin-left:auto !important; margin-right:auto !important; }
  html body #page-container .pk-my-sm-0 { margin-top:0 !important; margin-bottom:0 !important; }
  html body #page-container .pk-my-sm-1 { margin-top:4px !important; margin-bottom:4px !important; }
  html body #page-container .pk-my-sm-2 { margin-top:8px !important; margin-bottom:8px !important; }
  html body #page-container .pk-my-sm-3 { margin-top:16px !important; margin-bottom:16px !important; }
  html body #page-container .pk-my-sm-4 { margin-top:24px !important; margin-bottom:24px !important; }
  html body #page-container .pk-my-sm-5 { margin-top:48px !important; margin-bottom:48px !important; }
  html body #page-container .pk-my-sm-auto { margin-top:auto !important; margin-bottom:auto !important; }

  html body #page-container .pk-p-sm-0 { padding:0 !important; }
  html body #page-container .pk-p-sm-1 { padding:4px !important; }
  html body #page-container .pk-p-sm-2 { padding:8px !important; }
  html body #page-container .pk-p-sm-3 { padding:16px !important; }
  html body #page-container .pk-p-sm-4 { padding:24px !important; }
  html body #page-container .pk-p-sm-5 { padding:48px !important; }
  html body #page-container .pk-pt-sm-0 { padding-top:0 !important; }
  html body #page-container .pk-pt-sm-1 { padding-top:4px !important; }
  html body #page-container .pk-pt-sm-2 { padding-top:8px !important; }
  html body #page-container .pk-pt-sm-3 { padding-top:16px !important; }
  html body #page-container .pk-pt-sm-4 { padding-top:24px !important; }
  html body #page-container .pk-pt-sm-5 { padding-top:48px !important; }
  html body #page-container .pk-pb-sm-0 { padding-bottom:0 !important; }
  html body #page-container .pk-pb-sm-1 { padding-bottom:4px !important; }
  html body #page-container .pk-pb-sm-2 { padding-bottom:8px !important; }
  html body #page-container .pk-pb-sm-3 { padding-bottom:16px !important; }
  html body #page-container .pk-pb-sm-4 { padding-bottom:24px !important; }
  html body #page-container .pk-pb-sm-5 { padding-bottom:48px !important; }
  html body #page-container .pk-ps-sm-0 { padding-left:0 !important; }
  html body #page-container .pk-ps-sm-1 { padding-left:4px !important; }
  html body #page-container .pk-ps-sm-2 { padding-left:8px !important; }
  html body #page-container .pk-ps-sm-3 { padding-left:16px !important; }
  html body #page-container .pk-ps-sm-4 { padding-left:24px !important; }
  html body #page-container .pk-ps-sm-5 { padding-left:48px !important; }
  html body #page-container .pk-pe-sm-0 { padding-right:0 !important; }
  html body #page-container .pk-pe-sm-1 { padding-right:4px !important; }
  html body #page-container .pk-pe-sm-2 { padding-right:8px !important; }
  html body #page-container .pk-pe-sm-3 { padding-right:16px !important; }
  html body #page-container .pk-pe-sm-4 { padding-right:24px !important; }
  html body #page-container .pk-pe-sm-5 { padding-right:48px !important; }
  html body #page-container .pk-px-sm-0 { padding-left:0 !important; padding-right:0 !important; }
  html body #page-container .pk-px-sm-1 { padding-left:4px !important; padding-right:4px !important; }
  html body #page-container .pk-px-sm-2 { padding-left:8px !important; padding-right:8px !important; }
  html body #page-container .pk-px-sm-3 { padding-left:16px !important; padding-right:16px !important; }
  html body #page-container .pk-px-sm-4 { padding-left:24px !important; padding-right:24px !important; }
  html body #page-container .pk-px-sm-5 { padding-left:48px !important; padding-right:48px !important; }
  html body #page-container .pk-py-sm-0 { padding-top:0 !important; padding-bottom:0 !important; }
  html body #page-container .pk-py-sm-1 { padding-top:4px !important; padding-bottom:4px !important; }
  html body #page-container .pk-py-sm-2 { padding-top:8px !important; padding-bottom:8px !important; }
  html body #page-container .pk-py-sm-3 { padding-top:16px !important; padding-bottom:16px !important; }
  html body #page-container .pk-py-sm-4 { padding-top:24px !important; padding-bottom:24px !important; }
  html body #page-container .pk-py-sm-5 { padding-top:48px !important; padding-bottom:48px !important; }
}
@media (min-width: 768px) {
  html body #page-container .pk-m-md-0 { margin:0 !important; }
  html body #page-container .pk-m-md-1 { margin:4px !important; }
  html body #page-container .pk-m-md-2 { margin:8px !important; }
  html body #page-container .pk-m-md-3 { margin:16px !important; }
  html body #page-container .pk-m-md-4 { margin:24px !important; }
  html body #page-container .pk-m-md-5 { margin:48px !important; }
  html body #page-container .pk-m-md-auto { margin:auto !important; }
  html body #page-container .pk-mt-md-0 { margin-top:0 !important; }
  html body #page-container .pk-mt-md-1 { margin-top:4px !important; }
  html body #page-container .pk-mt-md-2 { margin-top:8px !important; }
  html body #page-container .pk-mt-md-3 { margin-top:16px !important; }
  html body #page-container .pk-mt-md-4 { margin-top:24px !important; }
  html body #page-container .pk-mt-md-5 { margin-top:48px !important; }
  html body #page-container .pk-mt-md-auto { margin-top:auto !important; }
  html body #page-container .pk-mb-md-0 { margin-bottom:0 !important; }
  html body #page-container .pk-mb-md-1 { margin-bottom:4px !important; }
  html body #page-container .pk-mb-md-2 { margin-bottom:8px !important; }
  html body #page-container .pk-mb-md-3 { margin-bottom:16px !important; }
  html body #page-container .pk-mb-md-4 { margin-bottom:24px !important; }
  html body #page-container .pk-mb-md-5 { margin-bottom:48px !important; }
  html body #page-container .pk-mb-md-auto { margin-bottom:auto !important; }
  html body #page-container .pk-ms-md-0 { margin-left:0 !important; }
  html body #page-container .pk-ms-md-1 { margin-left:4px !important; }
  html body #page-container .pk-ms-md-2 { margin-left:8px !important; }
  html body #page-container .pk-ms-md-3 { margin-left:16px !important; }
  html body #page-container .pk-ms-md-4 { margin-left:24px !important; }
  html body #page-container .pk-ms-md-5 { margin-left:48px !important; }
  html body #page-container .pk-ms-md-auto { margin-left:auto !important; }
  html body #page-container .pk-me-md-0 { margin-right:0 !important; }
  html body #page-container .pk-me-md-1 { margin-right:4px !important; }
  html body #page-container .pk-me-md-2 { margin-right:8px !important; }
  html body #page-container .pk-me-md-3 { margin-right:16px !important; }
  html body #page-container .pk-me-md-4 { margin-right:24px !important; }
  html body #page-container .pk-me-md-5 { margin-right:48px !important; }
  html body #page-container .pk-me-md-auto { margin-right:auto !important; }
  html body #page-container .pk-mx-md-0 { margin-left:0 !important; margin-right:0 !important; }
  html body #page-container .pk-mx-md-1 { margin-left:4px !important; margin-right:4px !important; }
  html body #page-container .pk-mx-md-2 { margin-left:8px !important; margin-right:8px !important; }
  html body #page-container .pk-mx-md-3 { margin-left:16px !important; margin-right:16px !important; }
  html body #page-container .pk-mx-md-4 { margin-left:24px !important; margin-right:24px !important; }
  html body #page-container .pk-mx-md-5 { margin-left:48px !important; margin-right:48px !important; }
  html body #page-container .pk-mx-md-auto { margin-left:auto !important; margin-right:auto !important; }
  html body #page-container .pk-my-md-0 { margin-top:0 !important; margin-bottom:0 !important; }
  html body #page-container .pk-my-md-1 { margin-top:4px !important; margin-bottom:4px !important; }
  html body #page-container .pk-my-md-2 { margin-top:8px !important; margin-bottom:8px !important; }
  html body #page-container .pk-my-md-3 { margin-top:16px !important; margin-bottom:16px !important; }
  html body #page-container .pk-my-md-4 { margin-top:24px !important; margin-bottom:24px !important; }
  html body #page-container .pk-my-md-5 { margin-top:48px !important; margin-bottom:48px !important; }
  html body #page-container .pk-my-md-auto { margin-top:auto !important; margin-bottom:auto !important; }

  html body #page-container .pk-p-md-0 { padding:0 !important; }
  html body #page-container .pk-p-md-1 { padding:4px !important; }
  html body #page-container .pk-p-md-2 { padding:8px !important; }
  html body #page-container .pk-p-md-3 { padding:16px !important; }
  html body #page-container .pk-p-md-4 { padding:24px !important; }
  html body #page-container .pk-p-md-5 { padding:48px !important; }
  html body #page-container .pk-pt-md-0 { padding-top:0 !important; }
  html body #page-container .pk-pt-md-1 { padding-top:4px !important; }
  html body #page-container .pk-pt-md-2 { padding-top:8px !important; }
  html body #page-container .pk-pt-md-3 { padding-top:16px !important; }
  html body #page-container .pk-pt-md-4 { padding-top:24px !important; }
  html body #page-container .pk-pt-md-5 { padding-top:48px !important; }
  html body #page-container .pk-pb-md-0 { padding-bottom:0 !important; }
  html body #page-container .pk-pb-md-1 { padding-bottom:4px !important; }
  html body #page-container .pk-pb-md-2 { padding-bottom:8px !important; }
  html body #page-container .pk-pb-md-3 { padding-bottom:16px !important; }
  html body #page-container .pk-pb-md-4 { padding-bottom:24px !important; }
  html body #page-container .pk-pb-md-5 { padding-bottom:48px !important; }
  html body #page-container .pk-ps-md-0 { padding-left:0 !important; }
  html body #page-container .pk-ps-md-1 { padding-left:4px !important; }
  html body #page-container .pk-ps-md-2 { padding-left:8px !important; }
  html body #page-container .pk-ps-md-3 { padding-left:16px !important; }
  html body #page-container .pk-ps-md-4 { padding-left:24px !important; }
  html body #page-container .pk-ps-md-5 { padding-left:48px !important; }
  html body #page-container .pk-pe-md-0 { padding-right:0 !important; }
  html body #page-container .pk-pe-md-1 { padding-right:4px !important; }
  html body #page-container .pk-pe-md-2 { padding-right:8px !important; }
  html body #page-container .pk-pe-md-3 { padding-right:16px !important; }
  html body #page-container .pk-pe-md-4 { padding-right:24px !important; }
  html body #page-container .pk-pe-md-5 { padding-right:48px !important; }
  html body #page-container .pk-px-md-0 { padding-left:0 !important; padding-right:0 !important; }
  html body #page-container .pk-px-md-1 { padding-left:4px !important; padding-right:4px !important; }
  html body #page-container .pk-px-md-2 { padding-left:8px !important; padding-right:8px !important; }
  html body #page-container .pk-px-md-3 { padding-left:16px !important; padding-right:16px !important; }
  html body #page-container .pk-px-md-4 { padding-left:24px !important; padding-right:24px !important; }
  html body #page-container .pk-px-md-5 { padding-left:48px !important; padding-right:48px !important; }
  html body #page-container .pk-py-md-0 { padding-top:0 !important; padding-bottom:0 !important; }
  html body #page-container .pk-py-md-1 { padding-top:4px !important; padding-bottom:4px !important; }
  html body #page-container .pk-py-md-2 { padding-top:8px !important; padding-bottom:8px !important; }
  html body #page-container .pk-py-md-3 { padding-top:16px !important; padding-bottom:16px !important; }
  html body #page-container .pk-py-md-4 { padding-top:24px !important; padding-bottom:24px !important; }
  html body #page-container .pk-py-md-5 { padding-top:48px !important; padding-bottom:48px !important; }
}
@media (min-width: 992px) {
  html body #page-container .pk-m-lg-0 { margin:0 !important; }
  html body #page-container .pk-m-lg-1 { margin:4px !important; }
  html body #page-container .pk-m-lg-2 { margin:8px !important; }
  html body #page-container .pk-m-lg-3 { margin:16px !important; }
  html body #page-container .pk-m-lg-4 { margin:24px !important; }
  html body #page-container .pk-m-lg-5 { margin:48px !important; }
  html body #page-container .pk-m-lg-auto { margin:auto !important; }
  html body #page-container .pk-mt-lg-0 { margin-top:0 !important; }
  html body #page-container .pk-mt-lg-1 { margin-top:4px !important; }
  html body #page-container .pk-mt-lg-2 { margin-top:8px !important; }
  html body #page-container .pk-mt-lg-3 { margin-top:16px !important; }
  html body #page-container .pk-mt-lg-4 { margin-top:24px !important; }
  html body #page-container .pk-mt-lg-5 { margin-top:48px !important; }
  html body #page-container .pk-mt-lg-auto { margin-top:auto !important; }
  html body #page-container .pk-mb-lg-0 { margin-bottom:0 !important; }
  html body #page-container .pk-mb-lg-1 { margin-bottom:4px !important; }
  html body #page-container .pk-mb-lg-2 { margin-bottom:8px !important; }
  html body #page-container .pk-mb-lg-3 { margin-bottom:16px !important; }
  html body #page-container .pk-mb-lg-4 { margin-bottom:24px !important; }
  html body #page-container .pk-mb-lg-5 { margin-bottom:48px !important; }
  html body #page-container .pk-mb-lg-auto { margin-bottom:auto !important; }
  html body #page-container .pk-ms-lg-0 { margin-left:0 !important; }
  html body #page-container .pk-ms-lg-1 { margin-left:4px !important; }
  html body #page-container .pk-ms-lg-2 { margin-left:8px !important; }
  html body #page-container .pk-ms-lg-3 { margin-left:16px !important; }
  html body #page-container .pk-ms-lg-4 { margin-left:24px !important; }
  html body #page-container .pk-ms-lg-5 { margin-left:48px !important; }
  html body #page-container .pk-ms-lg-auto { margin-left:auto !important; }
  html body #page-container .pk-me-lg-0 { margin-right:0 !important; }
  html body #page-container .pk-me-lg-1 { margin-right:4px !important; }
  html body #page-container .pk-me-lg-2 { margin-right:8px !important; }
  html body #page-container .pk-me-lg-3 { margin-right:16px !important; }
  html body #page-container .pk-me-lg-4 { margin-right:24px !important; }
  html body #page-container .pk-me-lg-5 { margin-right:48px !important; }
  html body #page-container .pk-me-lg-auto { margin-right:auto !important; }
  html body #page-container .pk-mx-lg-0 { margin-left:0 !important; margin-right:0 !important; }
  html body #page-container .pk-mx-lg-1 { margin-left:4px !important; margin-right:4px !important; }
  html body #page-container .pk-mx-lg-2 { margin-left:8px !important; margin-right:8px !important; }
  html body #page-container .pk-mx-lg-3 { margin-left:16px !important; margin-right:16px !important; }
  html body #page-container .pk-mx-lg-4 { margin-left:24px !important; margin-right:24px !important; }
  html body #page-container .pk-mx-lg-5 { margin-left:48px !important; margin-right:48px !important; }
  html body #page-container .pk-mx-lg-auto { margin-left:auto !important; margin-right:auto !important; }
  html body #page-container .pk-my-lg-0 { margin-top:0 !important; margin-bottom:0 !important; }
  html body #page-container .pk-my-lg-1 { margin-top:4px !important; margin-bottom:4px !important; }
  html body #page-container .pk-my-lg-2 { margin-top:8px !important; margin-bottom:8px !important; }
  html body #page-container .pk-my-lg-3 { margin-top:16px !important; margin-bottom:16px !important; }
  html body #page-container .pk-my-lg-4 { margin-top:24px !important; margin-bottom:24px !important; }
  html body #page-container .pk-my-lg-5 { margin-top:48px !important; margin-bottom:48px !important; }
  html body #page-container .pk-my-lg-auto { margin-top:auto !important; margin-bottom:auto !important; }

  html body #page-container .pk-p-lg-0 { padding:0 !important; }
  html body #page-container .pk-p-lg-1 { padding:4px !important; }
  html body #page-container .pk-p-lg-2 { padding:8px !important; }
  html body #page-container .pk-p-lg-3 { padding:16px !important; }
  html body #page-container .pk-p-lg-4 { padding:24px !important; }
  html body #page-container .pk-p-lg-5 { padding:48px !important; }
  html body #page-container .pk-pt-lg-0 { padding-top:0 !important; }
  html body #page-container .pk-pt-lg-1 { padding-top:4px !important; }
  html body #page-container .pk-pt-lg-2 { padding-top:8px !important; }
  html body #page-container .pk-pt-lg-3 { padding-top:16px !important; }
  html body #page-container .pk-pt-lg-4 { padding-top:24px !important; }
  html body #page-container .pk-pt-lg-5 { padding-top:48px !important; }
  html body #page-container .pk-pb-lg-0 { padding-bottom:0 !important; }
  html body #page-container .pk-pb-lg-1 { padding-bottom:4px !important; }
  html body #page-container .pk-pb-lg-2 { padding-bottom:8px !important; }
  html body #page-container .pk-pb-lg-3 { padding-bottom:16px !important; }
  html body #page-container .pk-pb-lg-4 { padding-bottom:24px !important; }
  html body #page-container .pk-pb-lg-5 { padding-bottom:48px !important; }
  html body #page-container .pk-ps-lg-0 { padding-left:0 !important; }
  html body #page-container .pk-ps-lg-1 { padding-left:4px !important; }
  html body #page-container .pk-ps-lg-2 { padding-left:8px !important; }
  html body #page-container .pk-ps-lg-3 { padding-left:16px !important; }
  html body #page-container .pk-ps-lg-4 { padding-left:24px !important; }
  html body #page-container .pk-ps-lg-5 { padding-left:48px !important; }
  html body #page-container .pk-pe-lg-0 { padding-right:0 !important; }
  html body #page-container .pk-pe-lg-1 { padding-right:4px !important; }
  html body #page-container .pk-pe-lg-2 { padding-right:8px !important; }
  html body #page-container .pk-pe-lg-3 { padding-right:16px !important; }
  html body #page-container .pk-pe-lg-4 { padding-right:24px !important; }
  html body #page-container .pk-pe-lg-5 { padding-right:48px !important; }
  html body #page-container .pk-px-lg-0 { padding-left:0 !important; padding-right:0 !important; }
  html body #page-container .pk-px-lg-1 { padding-left:4px !important; padding-right:4px !important; }
  html body #page-container .pk-px-lg-2 { padding-left:8px !important; padding-right:8px !important; }
  html body #page-container .pk-px-lg-3 { padding-left:16px !important; padding-right:16px !important; }
  html body #page-container .pk-px-lg-4 { padding-left:24px !important; padding-right:24px !important; }
  html body #page-container .pk-px-lg-5 { padding-left:48px !important; padding-right:48px !important; }
  html body #page-container .pk-py-lg-0 { padding-top:0 !important; padding-bottom:0 !important; }
  html body #page-container .pk-py-lg-1 { padding-top:4px !important; padding-bottom:4px !important; }
  html body #page-container .pk-py-lg-2 { padding-top:8px !important; padding-bottom:8px !important; }
  html body #page-container .pk-py-lg-3 { padding-top:16px !important; padding-bottom:16px !important; }
  html body #page-container .pk-py-lg-4 { padding-top:24px !important; padding-bottom:24px !important; }
  html body #page-container .pk-py-lg-5 { padding-top:48px !important; padding-bottom:48px !important; }
}
@media (min-width: 1200px) {
  html body #page-container .pk-m-xl-0 { margin:0 !important; }
  html body #page-container .pk-m-xl-1 { margin:4px !important; }
  html body #page-container .pk-m-xl-2 { margin:8px !important; }
  html body #page-container .pk-m-xl-3 { margin:16px !important; }
  html body #page-container .pk-m-xl-4 { margin:24px !important; }
  html body #page-container .pk-m-xl-5 { margin:48px !important; }
  html body #page-container .pk-m-xl-auto { margin:auto !important; }
  html body #page-container .pk-mt-xl-0 { margin-top:0 !important; }
  html body #page-container .pk-mt-xl-1 { margin-top:4px !important; }
  html body #page-container .pk-mt-xl-2 { margin-top:8px !important; }
  html body #page-container .pk-mt-xl-3 { margin-top:16px !important; }
  html body #page-container .pk-mt-xl-4 { margin-top:24px !important; }
  html body #page-container .pk-mt-xl-5 { margin-top:48px !important; }
  html body #page-container .pk-mt-xl-auto { margin-top:auto !important; }
  html body #page-container .pk-mb-xl-0 { margin-bottom:0 !important; }
  html body #page-container .pk-mb-xl-1 { margin-bottom:4px !important; }
  html body #page-container .pk-mb-xl-2 { margin-bottom:8px !important; }
  html body #page-container .pk-mb-xl-3 { margin-bottom:16px !important; }
  html body #page-container .pk-mb-xl-4 { margin-bottom:24px !important; }
  html body #page-container .pk-mb-xl-5 { margin-bottom:48px !important; }
  html body #page-container .pk-mb-xl-auto { margin-bottom:auto !important; }
  html body #page-container .pk-ms-xl-0 { margin-left:0 !important; }
  html body #page-container .pk-ms-xl-1 { margin-left:4px !important; }
  html body #page-container .pk-ms-xl-2 { margin-left:8px !important; }
  html body #page-container .pk-ms-xl-3 { margin-left:16px !important; }
  html body #page-container .pk-ms-xl-4 { margin-left:24px !important; }
  html body #page-container .pk-ms-xl-5 { margin-left:48px !important; }
  html body #page-container .pk-ms-xl-auto { margin-left:auto !important; }
  html body #page-container .pk-me-xl-0 { margin-right:0 !important; }
  html body #page-container .pk-me-xl-1 { margin-right:4px !important; }
  html body #page-container .pk-me-xl-2 { margin-right:8px !important; }
  html body #page-container .pk-me-xl-3 { margin-right:16px !important; }
  html body #page-container .pk-me-xl-4 { margin-right:24px !important; }
  html body #page-container .pk-me-xl-5 { margin-right:48px !important; }
  html body #page-container .pk-me-xl-auto { margin-right:auto !important; }
  html body #page-container .pk-mx-xl-0 { margin-left:0 !important; margin-right:0 !important; }
  html body #page-container .pk-mx-xl-1 { margin-left:4px !important; margin-right:4px !important; }
  html body #page-container .pk-mx-xl-2 { margin-left:8px !important; margin-right:8px !important; }
  html body #page-container .pk-mx-xl-3 { margin-left:16px !important; margin-right:16px !important; }
  html body #page-container .pk-mx-xl-4 { margin-left:24px !important; margin-right:24px !important; }
  html body #page-container .pk-mx-xl-5 { margin-left:48px !important; margin-right:48px !important; }
  html body #page-container .pk-mx-xl-auto { margin-left:auto !important; margin-right:auto !important; }
  html body #page-container .pk-my-xl-0 { margin-top:0 !important; margin-bottom:0 !important; }
  html body #page-container .pk-my-xl-1 { margin-top:4px !important; margin-bottom:4px !important; }
  html body #page-container .pk-my-xl-2 { margin-top:8px !important; margin-bottom:8px !important; }
  html body #page-container .pk-my-xl-3 { margin-top:16px !important; margin-bottom:16px !important; }
  html body #page-container .pk-my-xl-4 { margin-top:24px !important; margin-bottom:24px !important; }
  html body #page-container .pk-my-xl-5 { margin-top:48px !important; margin-bottom:48px !important; }
  html body #page-container .pk-my-xl-auto { margin-top:auto !important; margin-bottom:auto !important; }

  html body #page-container .pk-p-xl-0 { padding:0 !important; }
  html body #page-container .pk-p-xl-1 { padding:4px !important; }
  html body #page-container .pk-p-xl-2 { padding:8px !important; }
  html body #page-container .pk-p-xl-3 { padding:16px !important; }
  html body #page-container .pk-p-xl-4 { padding:24px !important; }
  html body #page-container .pk-p-xl-5 { padding:48px !important; }
  html body #page-container .pk-pt-xl-0 { padding-top:0 !important; }
  html body #page-container .pk-pt-xl-1 { padding-top:4px !important; }
  html body #page-container .pk-pt-xl-2 { padding-top:8px !important; }
  html body #page-container .pk-pt-xl-3 { padding-top:16px !important; }
  html body #page-container .pk-pt-xl-4 { padding-top:24px !important; }
  html body #page-container .pk-pt-xl-5 { padding-top:48px !important; }
  html body #page-container .pk-pb-xl-0 { padding-bottom:0 !important; }
  html body #page-container .pk-pb-xl-1 { padding-bottom:4px !important; }
  html body #page-container .pk-pb-xl-2 { padding-bottom:8px !important; }
  html body #page-container .pk-pb-xl-3 { padding-bottom:16px !important; }
  html body #page-container .pk-pb-xl-4 { padding-bottom:24px !important; }
  html body #page-container .pk-pb-xl-5 { padding-bottom:48px !important; }
  html body #page-container .pk-ps-xl-0 { padding-left:0 !important; }
  html body #page-container .pk-ps-xl-1 { padding-left:4px !important; }
  html body #page-container .pk-ps-xl-2 { padding-left:8px !important; }
  html body #page-container .pk-ps-xl-3 { padding-left:16px !important; }
  html body #page-container .pk-ps-xl-4 { padding-left:24px !important; }
  html body #page-container .pk-ps-xl-5 { padding-left:48px !important; }
  html body #page-container .pk-pe-xl-0 { padding-right:0 !important; }
  html body #page-container .pk-pe-xl-1 { padding-right:4px !important; }
  html body #page-container .pk-pe-xl-2 { padding-right:8px !important; }
  html body #page-container .pk-pe-xl-3 { padding-right:16px !important; }
  html body #page-container .pk-pe-xl-4 { padding-right:24px !important; }
  html body #page-container .pk-pe-xl-5 { padding-right:48px !important; }
  html body #page-container .pk-px-xl-0 { padding-left:0 !important; padding-right:0 !important; }
  html body #page-container .pk-px-xl-1 { padding-left:4px !important; padding-right:4px !important; }
  html body #page-container .pk-px-xl-2 { padding-left:8px !important; padding-right:8px !important; }
  html body #page-container .pk-px-xl-3 { padding-left:16px !important; padding-right:16px !important; }
  html body #page-container .pk-px-xl-4 { padding-left:24px !important; padding-right:24px !important; }
  html body #page-container .pk-px-xl-5 { padding-left:48px !important; padding-right:48px !important; }
  html body #page-container .pk-py-xl-0 { padding-top:0 !important; padding-bottom:0 !important; }
  html body #page-container .pk-py-xl-1 { padding-top:4px !important; padding-bottom:4px !important; }
  html body #page-container .pk-py-xl-2 { padding-top:8px !important; padding-bottom:8px !important; }
  html body #page-container .pk-py-xl-3 { padding-top:16px !important; padding-bottom:16px !important; }
  html body #page-container .pk-py-xl-4 { padding-top:24px !important; padding-bottom:24px !important; }
  html body #page-container .pk-py-xl-5 { padding-top:48px !important; padding-bottom:48px !important; }
}
@media (min-width: 1400px) {
  html body #page-container .pk-m-xxl-0 { margin:0 !important; }
  html body #page-container .pk-m-xxl-1 { margin:4px !important; }
  html body #page-container .pk-m-xxl-2 { margin:8px !important; }
  html body #page-container .pk-m-xxl-3 { margin:16px !important; }
  html body #page-container .pk-m-xxl-4 { margin:24px !important; }
  html body #page-container .pk-m-xxl-5 { margin:48px !important; }
  html body #page-container .pk-m-xxl-auto { margin:auto !important; }
  html body #page-container .pk-mt-xxl-0 { margin-top:0 !important; }
  html body #page-container .pk-mt-xxl-1 { margin-top:4px !important; }
  html body #page-container .pk-mt-xxl-2 { margin-top:8px !important; }
  html body #page-container .pk-mt-xxl-3 { margin-top:16px !important; }
  html body #page-container .pk-mt-xxl-4 { margin-top:24px !important; }
  html body #page-container .pk-mt-xxl-5 { margin-top:48px !important; }
  html body #page-container .pk-mt-xxl-auto { margin-top:auto !important; }
  html body #page-container .pk-mb-xxl-0 { margin-bottom:0 !important; }
  html body #page-container .pk-mb-xxl-1 { margin-bottom:4px !important; }
  html body #page-container .pk-mb-xxl-2 { margin-bottom:8px !important; }
  html body #page-container .pk-mb-xxl-3 { margin-bottom:16px !important; }
  html body #page-container .pk-mb-xxl-4 { margin-bottom:24px !important; }
  html body #page-container .pk-mb-xxl-5 { margin-bottom:48px !important; }
  html body #page-container .pk-mb-xxl-auto { margin-bottom:auto !important; }
  html body #page-container .pk-ms-xxl-0 { margin-left:0 !important; }
  html body #page-container .pk-ms-xxl-1 { margin-left:4px !important; }
  html body #page-container .pk-ms-xxl-2 { margin-left:8px !important; }
  html body #page-container .pk-ms-xxl-3 { margin-left:16px !important; }
  html body #page-container .pk-ms-xxl-4 { margin-left:24px !important; }
  html body #page-container .pk-ms-xxl-5 { margin-left:48px !important; }
  html body #page-container .pk-ms-xxl-auto { margin-left:auto !important; }
  html body #page-container .pk-me-xxl-0 { margin-right:0 !important; }
  html body #page-container .pk-me-xxl-1 { margin-right:4px !important; }
  html body #page-container .pk-me-xxl-2 { margin-right:8px !important; }
  html body #page-container .pk-me-xxl-3 { margin-right:16px !important; }
  html body #page-container .pk-me-xxl-4 { margin-right:24px !important; }
  html body #page-container .pk-me-xxl-5 { margin-right:48px !important; }
  html body #page-container .pk-me-xxl-auto { margin-right:auto !important; }
  html body #page-container .pk-mx-xxl-0 { margin-left:0 !important; margin-right:0 !important; }
  html body #page-container .pk-mx-xxl-1 { margin-left:4px !important; margin-right:4px !important; }
  html body #page-container .pk-mx-xxl-2 { margin-left:8px !important; margin-right:8px !important; }
  html body #page-container .pk-mx-xxl-3 { margin-left:16px !important; margin-right:16px !important; }
  html body #page-container .pk-mx-xxl-4 { margin-left:24px !important; margin-right:24px !important; }
  html body #page-container .pk-mx-xxl-5 { margin-left:48px !important; margin-right:48px !important; }
  html body #page-container .pk-mx-xxl-auto { margin-left:auto !important; margin-right:auto !important; }
  html body #page-container .pk-my-xxl-0 { margin-top:0 !important; margin-bottom:0 !important; }
  html body #page-container .pk-my-xxl-1 { margin-top:4px !important; margin-bottom:4px !important; }
  html body #page-container .pk-my-xxl-2 { margin-top:8px !important; margin-bottom:8px !important; }
  html body #page-container .pk-my-xxl-3 { margin-top:16px !important; margin-bottom:16px !important; }
  html body #page-container .pk-my-xxl-4 { margin-top:24px !important; margin-bottom:24px !important; }
  html body #page-container .pk-my-xxl-5 { margin-top:48px !important; margin-bottom:48px !important; }
  html body #page-container .pk-my-xxl-auto { margin-top:auto !important; margin-bottom:auto !important; }

  html body #page-container .pk-p-xxl-0 { padding:0 !important; }
  html body #page-container .pk-p-xxl-1 { padding:4px !important; }
  html body #page-container .pk-p-xxl-2 { padding:8px !important; }
  html body #page-container .pk-p-xxl-3 { padding:16px !important; }
  html body #page-container .pk-p-xxl-4 { padding:24px !important; }
  html body #page-container .pk-p-xxl-5 { padding:48px !important; }
  html body #page-container .pk-pt-xxl-0 { padding-top:0 !important; }
  html body #page-container .pk-pt-xxl-1 { padding-top:4px !important; }
  html body #page-container .pk-pt-xxl-2 { padding-top:8px !important; }
  html body #page-container .pk-pt-xxl-3 { padding-top:16px !important; }
  html body #page-container .pk-pt-xxl-4 { padding-top:24px !important; }
  html body #page-container .pk-pt-xxl-5 { padding-top:48px !important; }
  html body #page-container .pk-pb-xxl-0 { padding-bottom:0 !important; }
  html body #page-container .pk-pb-xxl-1 { padding-bottom:4px !important; }
  html body #page-container .pk-pb-xxl-2 { padding-bottom:8px !important; }
  html body #page-container .pk-pb-xxl-3 { padding-bottom:16px !important; }
  html body #page-container .pk-pb-xxl-4 { padding-bottom:24px !important; }
  html body #page-container .pk-pb-xxl-5 { padding-bottom:48px !important; }
  html body #page-container .pk-ps-xxl-0 { padding-left:0 !important; }
  html body #page-container .pk-ps-xxl-1 { padding-left:4px !important; }
  html body #page-container .pk-ps-xxl-2 { padding-left:8px !important; }
  html body #page-container .pk-ps-xxl-3 { padding-left:16px !important; }
  html body #page-container .pk-ps-xxl-4 { padding-left:24px !important; }
  html body #page-container .pk-ps-xxl-5 { padding-left:48px !important; }
  html body #page-container .pk-pe-xxl-0 { padding-right:0 !important; }
  html body #page-container .pk-pe-xxl-1 { padding-right:4px !important; }
  html body #page-container .pk-pe-xxl-2 { padding-right:8px !important; }
  html body #page-container .pk-pe-xxl-3 { padding-right:16px !important; }
  html body #page-container .pk-pe-xxl-4 { padding-right:24px !important; }
  html body #page-container .pk-pe-xxl-5 { padding-right:48px !important; }
  html body #page-container .pk-px-xxl-0 { padding-left:0 !important; padding-right:0 !important; }
  html body #page-container .pk-px-xxl-1 { padding-left:4px !important; padding-right:4px !important; }
  html body #page-container .pk-px-xxl-2 { padding-left:8px !important; padding-right:8px !important; }
  html body #page-container .pk-px-xxl-3 { padding-left:16px !important; padding-right:16px !important; }
  html body #page-container .pk-px-xxl-4 { padding-left:24px !important; padding-right:24px !important; }
  html body #page-container .pk-px-xxl-5 { padding-left:48px !important; padding-right:48px !important; }
  html body #page-container .pk-py-xxl-0 { padding-top:0 !important; padding-bottom:0 !important; }
  html body #page-container .pk-py-xxl-1 { padding-top:4px !important; padding-bottom:4px !important; }
  html body #page-container .pk-py-xxl-2 { padding-top:8px !important; padding-bottom:8px !important; }
  html body #page-container .pk-py-xxl-3 { padding-top:16px !important; padding-bottom:16px !important; }
  html body #page-container .pk-py-xxl-4 { padding-top:24px !important; padding-bottom:24px !important; }
  html body #page-container .pk-py-xxl-5 { padding-top:48px !important; padding-bottom:48px !important; }
}

/* Display. Bootstrap's values, and Bootstrap's mobile-first min-width breakpoints:
     sm 576px     md 768px     lg 992px     xl 1200px     xxl 1400px
   Hiding on a phone is pk-d-none pk-d-md-block, and that case lines up with this site
   exactly: Bootstrap's sm/md edge at 768px IS Divi's phone/tablet edge. The one that does
   not line up is lg - Bootstrap turns over at 992px where Divi's Desktop tab starts at 981px,
   so a viewport between 981 and 991px follows Bootstrap here and Divi in the builder.

   To hide a whole MODULE on one device use Advanced > Disable On instead. It is a checkbox,
   and it is what a volunteer will look for. These are for the markup you wrote yourself
   inside a Text or Code module, which Disable On cannot reach.

   Never put both on one module. Disable On emits %%order_class%%{display:none!important}
   inside its media query - one class, so (0,1,0) - while a utility here is (1,1,2) and wins
   outright. A module ticked Disable On for phone and carrying pk-d-md-block stays visible,
   and the checkbox that is supposed to be hiding it looks broken. Verified in Divi 4.27.7,
   includes/builder/class-et-builder-element.php around line 3396. */
html body #page-container .pk-d-none { display:none !important; }
html body #page-container .pk-d-inline { display:inline !important; }
html body #page-container .pk-d-inline-block { display:inline-block !important; }
html body #page-container .pk-d-block { display:block !important; }
html body #page-container .pk-d-grid { display:grid !important; }
html body #page-container .pk-d-inline-grid { display:inline-grid !important; }
html body #page-container .pk-d-table { display:table !important; }
html body #page-container .pk-d-table-row { display:table-row !important; }
html body #page-container .pk-d-table-cell { display:table-cell !important; }
html body #page-container .pk-d-flex { display:flex !important; }
html body #page-container .pk-d-inline-flex { display:inline-flex !important; }

@media (min-width: 576px) {
  html body #page-container .pk-d-sm-none { display:none !important; }
  html body #page-container .pk-d-sm-inline { display:inline !important; }
  html body #page-container .pk-d-sm-inline-block { display:inline-block !important; }
  html body #page-container .pk-d-sm-block { display:block !important; }
  html body #page-container .pk-d-sm-grid { display:grid !important; }
  html body #page-container .pk-d-sm-inline-grid { display:inline-grid !important; }
  html body #page-container .pk-d-sm-table { display:table !important; }
  html body #page-container .pk-d-sm-table-row { display:table-row !important; }
  html body #page-container .pk-d-sm-table-cell { display:table-cell !important; }
  html body #page-container .pk-d-sm-flex { display:flex !important; }
  html body #page-container .pk-d-sm-inline-flex { display:inline-flex !important; }
}
@media (min-width: 768px) {
  html body #page-container .pk-d-md-none { display:none !important; }
  html body #page-container .pk-d-md-inline { display:inline !important; }
  html body #page-container .pk-d-md-inline-block { display:inline-block !important; }
  html body #page-container .pk-d-md-block { display:block !important; }
  html body #page-container .pk-d-md-grid { display:grid !important; }
  html body #page-container .pk-d-md-inline-grid { display:inline-grid !important; }
  html body #page-container .pk-d-md-table { display:table !important; }
  html body #page-container .pk-d-md-table-row { display:table-row !important; }
  html body #page-container .pk-d-md-table-cell { display:table-cell !important; }
  html body #page-container .pk-d-md-flex { display:flex !important; }
  html body #page-container .pk-d-md-inline-flex { display:inline-flex !important; }
}
@media (min-width: 992px) {
  html body #page-container .pk-d-lg-none { display:none !important; }
  html body #page-container .pk-d-lg-inline { display:inline !important; }
  html body #page-container .pk-d-lg-inline-block { display:inline-block !important; }
  html body #page-container .pk-d-lg-block { display:block !important; }
  html body #page-container .pk-d-lg-grid { display:grid !important; }
  html body #page-container .pk-d-lg-inline-grid { display:inline-grid !important; }
  html body #page-container .pk-d-lg-table { display:table !important; }
  html body #page-container .pk-d-lg-table-row { display:table-row !important; }
  html body #page-container .pk-d-lg-table-cell { display:table-cell !important; }
  html body #page-container .pk-d-lg-flex { display:flex !important; }
  html body #page-container .pk-d-lg-inline-flex { display:inline-flex !important; }
}
@media (min-width: 1200px) {
  html body #page-container .pk-d-xl-none { display:none !important; }
  html body #page-container .pk-d-xl-inline { display:inline !important; }
  html body #page-container .pk-d-xl-inline-block { display:inline-block !important; }
  html body #page-container .pk-d-xl-block { display:block !important; }
  html body #page-container .pk-d-xl-grid { display:grid !important; }
  html body #page-container .pk-d-xl-inline-grid { display:inline-grid !important; }
  html body #page-container .pk-d-xl-table { display:table !important; }
  html body #page-container .pk-d-xl-table-row { display:table-row !important; }
  html body #page-container .pk-d-xl-table-cell { display:table-cell !important; }
  html body #page-container .pk-d-xl-flex { display:flex !important; }
  html body #page-container .pk-d-xl-inline-flex { display:inline-flex !important; }
}
@media (min-width: 1400px) {
  html body #page-container .pk-d-xxl-none { display:none !important; }
  html body #page-container .pk-d-xxl-inline { display:inline !important; }
  html body #page-container .pk-d-xxl-inline-block { display:inline-block !important; }
  html body #page-container .pk-d-xxl-block { display:block !important; }
  html body #page-container .pk-d-xxl-grid { display:grid !important; }
  html body #page-container .pk-d-xxl-inline-grid { display:inline-grid !important; }
  html body #page-container .pk-d-xxl-table { display:table !important; }
  html body #page-container .pk-d-xxl-table-row { display:table-row !important; }
  html body #page-container .pk-d-xxl-table-cell { display:table-cell !important; }
  html body #page-container .pk-d-xxl-flex { display:flex !important; }
  html body #page-container .pk-d-xxl-inline-flex { display:inline-flex !important; }
}

/* Rule 19 already trims the page for printing. These are per-element, for the one map or
   button that should not appear on a printed meeting sheet. */
@media print {
  html body #page-container .pk-d-print-none { display:none !important; }
  html body #page-container .pk-d-print-inline { display:inline !important; }
  html body #page-container .pk-d-print-inline-block { display:inline-block !important; }
  html body #page-container .pk-d-print-block { display:block !important; }
  html body #page-container .pk-d-print-grid { display:grid !important; }
  html body #page-container .pk-d-print-inline-grid { display:inline-grid !important; }
  html body #page-container .pk-d-print-table { display:table !important; }
  html body #page-container .pk-d-print-table-row { display:table-row !important; }
  html body #page-container .pk-d-print-table-cell { display:table-cell !important; }
  html body #page-container .pk-d-print-flex { display:flex !important; }
  html body #page-container .pk-d-print-inline-flex { display:inline-flex !important; }
}

/* pk-d-flex only makes the box a flex container. The three flex patterns this site actually
   uses - pk-inline, pk-vcenter and pk-trustbar - carry their own axis, alignment and gap,
   and stay the right classes for those jobs. */

/* Visibility. pk-invisible keeps the box and its space, unlike pk-d-none which removes both
   - use it only to hold a layout open. pk-visually-hidden is the opposite: gone from the
   page, still read aloud, for a heading a screen reader needs and sighted readers do not.
   Never use it to hide something a sighted reader also needs. The -focusable variant stays
   hidden until it takes keyboard focus, which is how a skip link works.

   Bootstrap 4 called this sr-only; Bootstrap 5 renamed it visually-hidden. This follows 5. */
html body #page-container .pk-visible { visibility:visible !important; }
html body #page-container .pk-invisible { visibility:hidden !important; }
html body #page-container .pk-visually-hidden,
html body #page-container .pk-visually-hidden-focusable:not(:focus):not(:focus-within) {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important; border:0 !important;
}
/* Colour. Every value is a palette token or a role pointing at one, so nothing here can put
   an unapproved colour on the site. Not every token gets every utility: the palette gives
   each colour one job and a utility exists only where that job says it can do it.

   So there is no pk-text-gold (#D97706 is 3.19:1 on white - a surface, never text; the gold
   that reads is pk-text-gold-deep at 5.60:1), no pk-text-slate-muted or pk-text-gold-bright
   (2.56:1 and 2.15:1 on white - navy-only values, and pk-on-navy already applies both for
   you), and no pk-bg-slate-muted or pk-bg-gold-bright (both are text colours on navy, not
   surfaces). A colour missing here is missing on purpose.

   Every text colour here now clears the 4.5:1 body gate on BOTH light grounds. Two of them
   used to miss on the grey band by a hair and were documented as heading-size-only:
   pk-text-gold-deep at 4.49:1 and pk-text-trail-green at 4.48:1. Both values were darkened
   just far enough - Gold Deep to #A94D08 (5.60:1 and 5.00:1), Trail Green to #147838 (5.57:1
   and 4.97:1) - so pk-text-warning and pk-text-success are body copy anywhere. */
html body #page-container .pk-text-navy { color:var(--pk-navy) !important; }
html body #page-container .pk-text-navy-deep { color:var(--pk-navy-deep) !important; }
html body #page-container .pk-text-gold-deep { color:var(--pk-gold-deep) !important; }
html body #page-container .pk-text-scouting-red { color:var(--pk-scouting-red) !important; }
html body #page-container .pk-text-trail-green { color:var(--pk-trail-green) !important; }
html body #page-container .pk-text-ink { color:var(--pk-ink) !important; }
html body #page-container .pk-text-body { color:var(--pk-body) !important; }
html body #page-container .pk-text-muted { color:var(--pk-muted) !important; }
html body #page-container .pk-text-white { color:var(--pk-white) !important; }

/* Roles. light is a surface value at 1.12:1 on white, so pk-text-light is for a dark ground
   only, exactly like pk-text-white beside it. */
html body #page-container .pk-text-primary { color:var(--pk-foreground-primary) !important; }
html body #page-container .pk-text-secondary { color:var(--pk-foreground-secondary) !important; }
html body #page-container .pk-text-success { color:var(--pk-foreground-success) !important; }
html body #page-container .pk-text-danger { color:var(--pk-foreground-danger) !important; }
html body #page-container .pk-text-warning { color:var(--pk-foreground-warning-text) !important; }
html body #page-container .pk-text-light { color:var(--pk-light) !important; }
html body #page-container .pk-text-dark { color:var(--pk-dark) !important; }

/* Background. Fill only - these never touch text colour, because on a dark fill the class
   that inverts text already exists and does it properly. Put pk-on-navy on the same element
   for the full two-tier inversion (headings, body, links, buttons, dividers, focus ring), or
   pk-text-white on a single element you control.

   Setting the colour in the module instead cannot work, and it fails in a way that reads as
   a broken field rather than a lost fight: Divi writes that colour onto the module WRAPPER,
   while a heading's own preset colour lands on a DESCENDANT of it, and a descendant's
   declaration beats an inherited value outright - no specificity contest at all. The heading
   stays near-black on your navy card however many times you change Text Color. */
html body #page-container .pk-bg-navy { background-color:var(--pk-navy) !important; }
html body #page-container .pk-bg-navy-deep { background-color:var(--pk-navy-deep) !important; }
html body #page-container .pk-bg-navy-slate { background-color:var(--pk-navy-slate) !important; }
html body #page-container .pk-bg-gold { background-color:var(--pk-gold) !important; }
html body #page-container .pk-bg-gold-deep { background-color:var(--pk-gold-deep) !important; }
html body #page-container .pk-bg-gold-wash { background-color:var(--pk-gold-wash) !important; }
html body #page-container .pk-bg-scouting-red { background-color:var(--pk-scouting-red) !important; }
html body #page-container .pk-bg-trail-green { background-color:var(--pk-trail-green) !important; }
html body #page-container .pk-bg-ink { background-color:var(--pk-ink) !important; }
html body #page-container .pk-bg-grey { background-color:var(--pk-grey) !important; }
html body #page-container .pk-bg-white { background-color:var(--pk-white) !important; }
html body #page-container .pk-bg-primary { background-color:var(--pk-primary) !important; }
html body #page-container .pk-bg-secondary { background-color:var(--pk-secondary) !important; }
html body #page-container .pk-bg-success { background-color:var(--pk-success) !important; }
html body #page-container .pk-bg-danger { background-color:var(--pk-danger) !important; }
html body #page-container .pk-bg-warning { background-color:var(--pk-warning) !important; }
html body #page-container .pk-bg-light { background-color:var(--pk-light) !important; }
html body #page-container .pk-bg-dark { background-color:var(--pk-dark) !important; }
html body #page-container .pk-bg-transparent { background-color:transparent !important; }

/* pk-bg-gold-wash has almost no edge of its own - 1.11:1 against white - so a gold-wash
   panel on a white section needs pk-border with it, or it reads as a printing error. */

/* A panel on a navy ground carries its own fill, so it is no longer ON that ground and the
   inherited tiers are wrong for it: body copy would stay Slate Muted, which is 2.30:1 on
   Gold Wash and 1.96:1 on Gold Deep. Re-point the properties rather than restating any rule,
   exactly as pk-on-photo does - they inherit, so every pk-on-navy colour rule above keeps
   working untouched and the panel needs no extra class.

   .pk-card-tint is here because it paints its own #F2F2F2 and never touches pk-bg-grey, so
   without this line a tint panel on navy inherits the navy tiers onto grey - white heading at
   1.12:1, body at 2.29:1, eyebrow at 1.92:1 - and the CTA / Standard preset tells you to build
   exactly that combination. Any future pattern class carrying its own fill needs its line here
   too, and a line in the pk-on-photo shadow reset above; .pk-pill is the one that does not need
   a colour line, because it paints its own text as well.

   The DARK list also carries the same-element compound, matching the gold block and the
   dark-panel recipe ("put pk-on-navy on the same element"). The light list does not: a section
   that is both the navy ground and a white panel is a combination this guide never sanctions.

   Both names for a fill appear in each list because a role and its token are the same ground
   however you spelled it. pk-bg-navy, pk-bg-primary, pk-bg-navy-deep, pk-bg-ink and
   pk-bg-dark are absent on purpose: Slate Muted still measures 5.48:1, 6.78:1 and 6.79:1 on
   those, so the normal two tiers are correct and nothing needs re-pointing. */
.pk-on-navy .pk-bg-white,
.pk-on-navy .pk-bg-grey,
.pk-on-navy .pk-bg-light,
.pk-on-navy .pk-bg-gold-wash,
.pk-on-navy .pk-card-tint {
  --on-navy-heading: var(--pk-ink);
  --on-navy-body: var(--pk-body);
  --on-navy-link: var(--pk-navy);
  --on-navy-link-hover: var(--pk-navy-deep);
  --on-navy-eyebrow: var(--pk-muted);
  --on-navy-rule: var(--pk-line);
  --pk-foreground-primary: var(--pk-primary);
  --pk-foreground-secondary: var(--pk-secondary);
  --pk-foreground-success: var(--pk-success);
  --pk-foreground-danger: var(--pk-danger);
  --pk-foreground-warning-text: var(--pk-warning-text);
}

/* A gold panel, on either ground. Gold never carries white text, so every tier is Ink at
   5.46:1. Links take Ink too: Pack Navy on gold is 4.41:1, under the gate, and rule 5
   underlines body links anyway, so colour is not the only thing marking them. */
.pk-on-navy .pk-bg-gold,
.pk-on-navy .pk-bg-warning,
.pk-on-navy.pk-bg-gold,
.pk-on-navy.pk-bg-warning {
  --on-navy-heading: var(--pk-ink);
  --on-navy-body: var(--pk-ink);
  --on-navy-link: var(--pk-ink);
  --on-navy-link-hover: var(--pk-navy-deep);
  --on-navy-eyebrow: var(--pk-ink);
  --on-navy-rule: var(--pk-gold-deep);
  --pk-foreground-primary: var(--pk-ink);
  --pk-foreground-secondary: var(--pk-ink);
  --pk-foreground-success: var(--pk-ink);
  --pk-foreground-danger: var(--pk-ink);
  --pk-foreground-warning-text: var(--pk-ink);
}

/* A dark panel that is not navy. Gold Bright drops to 2.34:1 on Gold Deep and Trail Green so
   the eyebrow tier collapses to white with the rest, and Slate Muted is 1.96:1 to 3.61:1
   across all five fills. Gold Wash carries hover at 4.50:1 or better on every one. */
.pk-on-navy .pk-bg-navy-slate,
.pk-on-navy .pk-bg-gold-deep,
.pk-on-navy .pk-bg-scouting-red,
.pk-on-navy .pk-bg-danger,
.pk-on-navy .pk-bg-trail-green,
.pk-on-navy .pk-bg-success,
.pk-on-navy .pk-bg-secondary,
.pk-on-navy.pk-bg-navy-slate,
.pk-on-navy.pk-bg-gold-deep,
.pk-on-navy.pk-bg-scouting-red,
.pk-on-navy.pk-bg-danger,
.pk-on-navy.pk-bg-trail-green,
.pk-on-navy.pk-bg-success,
.pk-on-navy.pk-bg-secondary {
  --on-navy-heading: var(--pk-white);
  --on-navy-body: var(--pk-white);
  --on-navy-link: var(--pk-white);
  --on-navy-link-hover: var(--pk-gold-wash);
  --on-navy-eyebrow: var(--pk-white);
  --on-navy-rule: var(--pk-white);
  --pk-foreground-primary: var(--pk-white);
  --pk-foreground-secondary: var(--pk-white);
  --pk-foreground-success: var(--pk-white);
  --pk-foreground-danger: var(--pk-white);
  --pk-foreground-warning-text: var(--pk-white);
}

/* Icon colour. A Divi icon is a font glyph in a .et-pb-icon span INSIDE the module, and it
   carries its own colour: a per-module rule at (0,2,0) whose icon_color field defaults to the
   Divi accent, over a base .et-pb-icon{color:#fff} in the theme stylesheet. A colour put on the
   module WRAPPER only ever reaches the glyph by inheritance, and a descendant's own declaration
   beats an inherited value outright - no specificity contest - so pk-text-* on a Blurb paints
   the label and can never reach the glyph however specific it gets. This family targets the
   glyph itself, which is the only thing that works.

   It is WIDER than pk-text-* on purpose. A meaningful icon is held to 3:1 by WCAG 1.4.11, not
   the 4.5:1 body text needs, so pk-icon-warning is Gold #D97706 at 3.19:1 - legible as a glyph,
   not as a label, which is why pk-text-warning takes Gold Deep instead.

   Reaches any module whose icon is a real .et-pb-icon element: Blurb and Icon. A Toggle,
   Accordion or Button icon is drawn on a :before/:after pseudo-element and is NOT reached - set
   those in the module's own field. pk-icon-light and pk-icon-white are for a dark ground only,
   exactly as their pk-text- counterparts are. */
html body #page-container .pk-icon-navy .et-pb-icon { color:var(--pk-navy) !important; }
html body #page-container .pk-icon-navy-deep .et-pb-icon { color:var(--pk-navy-deep) !important; }
html body #page-container .pk-icon-navy-slate .et-pb-icon { color:var(--pk-navy-slate) !important; }
html body #page-container .pk-icon-gold .et-pb-icon { color:var(--pk-gold) !important; }
html body #page-container .pk-icon-gold-deep .et-pb-icon { color:var(--pk-gold-deep) !important; }
html body #page-container .pk-icon-scouting-red .et-pb-icon { color:var(--pk-scouting-red) !important; }
html body #page-container .pk-icon-trail-green .et-pb-icon { color:var(--pk-trail-green) !important; }
html body #page-container .pk-icon-ink .et-pb-icon { color:var(--pk-ink) !important; }
html body #page-container .pk-icon-body .et-pb-icon { color:var(--pk-body) !important; }
html body #page-container .pk-icon-muted .et-pb-icon { color:var(--pk-muted) !important; }
html body #page-container .pk-icon-white .et-pb-icon { color:var(--pk-white) !important; }
html body #page-container .pk-icon-primary .et-pb-icon { color:var(--pk-foreground-primary) !important; }
html body #page-container .pk-icon-secondary .et-pb-icon { color:var(--pk-foreground-secondary) !important; }
html body #page-container .pk-icon-success .et-pb-icon { color:var(--pk-foreground-success) !important; }
html body #page-container .pk-icon-danger .et-pb-icon { color:var(--pk-foreground-danger) !important; }
html body #page-container .pk-icon-warning .et-pb-icon { color:var(--pk-warning) !important; }
html body #page-container .pk-icon-light .et-pb-icon { color:var(--pk-light) !important; }
html body #page-container .pk-icon-dark .et-pb-icon { color:var(--pk-dark) !important; }

/* Border. Bootstrap's sides and widths: a side class draws the hairline, a width class
   changes its weight, a colour class only repaints it. A colour on its own therefore draws
   NOTHING - it is pk-border-start pk-border-navy, never pk-border-navy alone. The colours
   sit last in this block so they win at equal specificity; the order you type the classes in
   the CSS Class field has no effect either way.

   Sides are Bootstrap 5's start and end, matching ms- and me- in spacing above. Widths are
   Bootstrap's 1 to 5, in pixels; 4 is the weight the tint panel's left rule uses.

   For a whole module Divi's own Design > Border is the better tool - it has responsive tabs
   and a corner control. These are for one edge on one instance, and for the markup inside a
   Text module Divi cannot reach. */
html body #page-container .pk-border { border:1px solid var(--pk-line) !important; }
html body #page-container .pk-border-0 { border:0 !important; }
html body #page-container .pk-border-top { border-top:1px solid var(--pk-line) !important; }
html body #page-container .pk-border-end { border-right:1px solid var(--pk-line) !important; }
html body #page-container .pk-border-bottom { border-bottom:1px solid var(--pk-line) !important; }
html body #page-container .pk-border-start { border-left:1px solid var(--pk-line) !important; }
html body #page-container .pk-border-top-0 { border-top:0 !important; }
html body #page-container .pk-border-end-0 { border-right:0 !important; }
html body #page-container .pk-border-bottom-0 { border-bottom:0 !important; }
html body #page-container .pk-border-start-0 { border-left:0 !important; }

html body #page-container .pk-border-1 { border-width:1px !important; }
html body #page-container .pk-border-2 { border-width:2px !important; }
html body #page-container .pk-border-3 { border-width:3px !important; }
html body #page-container .pk-border-4 { border-width:4px !important; }
html body #page-container .pk-border-5 { border-width:5px !important; }

/* Colours. --pk-line is the default drawn above; --pk-edge is the slightly heavier edge a
   card needs on the grey band, and --pk-field is the form-field border that meets WCAG
   1.4.11 at 4.54:1. There is no pk-border-gold-wash: at 1.11:1 on white it has no edge to
   draw. */
html body #page-container .pk-border-navy { border-color:var(--pk-navy) !important; }
html body #page-container .pk-border-navy-deep { border-color:var(--pk-navy-deep) !important; }
html body #page-container .pk-border-navy-slate { border-color:var(--pk-navy-slate) !important; }
html body #page-container .pk-border-gold { border-color:var(--pk-gold) !important; }
html body #page-container .pk-border-gold-deep { border-color:var(--pk-gold-deep) !important; }
html body #page-container .pk-border-scouting-red { border-color:var(--pk-scouting-red) !important; }
html body #page-container .pk-border-trail-green { border-color:var(--pk-trail-green) !important; }
html body #page-container .pk-border-ink { border-color:var(--pk-ink) !important; }
html body #page-container .pk-border-field { border-color:var(--pk-field) !important; }
html body #page-container .pk-border-edge { border-color:var(--pk-edge) !important; }
html body #page-container .pk-border-line { border-color:var(--pk-line) !important; }
html body #page-container .pk-border-white { border-color:var(--pk-white) !important; }
html body #page-container .pk-border-primary { border-color:var(--pk-foreground-primary) !important; }
html body #page-container .pk-border-secondary { border-color:var(--pk-foreground-secondary) !important; }
html body #page-container .pk-border-success { border-color:var(--pk-foreground-success) !important; }
html body #page-container .pk-border-danger { border-color:var(--pk-foreground-danger) !important; }
html body #page-container .pk-border-warning { border-color:var(--pk-warning) !important; }
html body #page-container .pk-border-light { border-color:var(--pk-light) !important; }
html body #page-container .pk-border-dark { border-color:var(--pk-dark) !important; }