@charset "UTF-8";
:root {
  --lh-content-max: 1200px;
  --lh-gutter: 20px;
}

@media (min-width: 768px) {
  :root {
    --lh-gutter: 32px;
  }
}
@media (min-width: 1440px) {
  :root {
    --lh-gutter: 48px;
  }
}
.lh-container {
  width: min(100% - var(--lh-gutter) * 2, var(--lh-content-max));
  margin-inline: auto;
}

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
}

.entry-content > * {
  margin-block-start: 0 !important;
}

.editor-styles-wrapper .is-root-container > * {
  margin-block-start: 0 !important;
}

.site-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
}

/* ==========================================================================
   Long Hound — Gutenberg Buttons
   ========================================================================== */
.wp-block-buttons {
  gap: 1.5rem;
}

/* Base
   ========================================================================== */
.wp-block-button {
  flex: 0 0 auto !important;
  width: auto !important;
}
.wp-block-button .wp-block-button__link {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  width: max-content !important;
  max-width: none !important;
  min-height: 52px;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap !important;
  text-decoration: none;
  /*
   * Gutenberg editor can introduce inner wrappers.
   * Don't let those wrap either.
   */
}
.wp-block-button .wp-block-button__link > * {
  white-space: nowrap !important;
}
.wp-block-button .wp-block-button__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Solid pill
   ========================================================================== */
.wp-block-button.is-style-longhound-pill .wp-block-button__link {
  background: var(--wp--preset--color--paper, #f2efe5);
  border-color: var(--wp--preset--color--paper, #f2efe5);
  color: var(--wp--preset--color--ink, #202328);
}
.wp-block-button.is-style-longhound-pill .wp-block-button__link::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 10px;
  margin-left: 2rem;
  background: currentColor;
  /*
   * Draw our own arrow:
   *
   * ────────────>
   */
  clip-path: polygon(0 40%, 75% 40%, 75% 0, 100% 50%, 75% 100%, 75% 60%, 0 60%);
  transition: transform 180ms ease;
}
.wp-block-button.is-style-longhound-pill .wp-block-button__link:hover {
  background: var(--wp--preset--color--hound, #50546e);
  border-color: var(--wp--preset--color--hound, #50546e);
  color: var(--wp--preset--color--paper, #f2efe5);
}
.wp-block-button.is-style-longhound-pill .wp-block-button__link:hover::after {
  transform: translateX(5px);
}

/* Outline pill
   ========================================================================== */
.wp-block-button.is-style-longhound-outline .wp-block-button__link {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.wp-block-button.is-style-longhound-outline .wp-block-button__link::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 10px;
  margin-left: 2rem;
  background: currentColor;
  clip-path: polygon(0 40%, 75% 40%, 75% 0, 100% 50%, 75% 100%, 75% 60%, 0 60%);
  transition: transform 180ms ease;
}
.wp-block-button.is-style-longhound-outline .wp-block-button__link:hover::after {
  transform: translateX(5px);
}

/* Text link
   ========================================================================== */
.wp-block-button.is-style-longhound-link .wp-block-button__link {
  position: relative;
  width: max-content !important;
  min-height: auto;
  padding: 0.4rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
}
.wp-block-button.is-style-longhound-link .wp-block-button__link::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transition: transform 180ms ease;
  transform-origin: left;
}
.wp-block-button.is-style-longhound-link .wp-block-button__link::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 9px;
  margin-left: 0.8rem;
  background: currentColor;
  clip-path: polygon(0 40%, 75% 40%, 75% 0, 100% 50%, 75% 100%, 75% 60%, 0 60%);
  transition: transform 180ms ease;
}
.wp-block-button.is-style-longhound-link .wp-block-button__link:hover::before {
  transform: scaleX(0);
  transform-origin: right;
}
.wp-block-button.is-style-longhound-link .wp-block-button__link:hover::after {
  transform: translateX(5px);
}

/* Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button .wp-block-button__link,
  .wp-block-button .wp-block-button__link::before,
  .wp-block-button .wp-block-button__link::after {
    transition: none;
  }
}
/* ==========================================================================
   Long Hound Timeline
   ========================================================================== */
.lh-timeline {
  /* --------------------------------------------------------------------------
     Defaults / fallbacks
     Values set by the Gutenberg block override these.
     -------------------------------------------------------------------------- */
  --lh-marker-size: 20px;
  --lh-highlight-size: 48px;
  --lh-highlight-dot-size: 8px;
  --lh-line-width: 1px;
  --lh-item-spacing: 36px;
  --lh-column-gap: 24px;
  --lh-rail-width: 64px;
  --lh-number-width: 60px;
  --lh-content-width: 440px;
  --lh-content-gap: 8px;
  --lh-line: #7c8287;
  --lh-marker: #f2efe5;
  --lh-highlight-bg: #f2efe5;
  --lh-highlight-dot: #202328;
  --lh-number-size: 18px;
  --lh-number-weight: 400;
  --lh-number-color: #a9b4bc;
  --lh-title-size: 20px;
  --lh-title-weight: 600;
  --lh-title-line-height: 1.2;
  --lh-title-color: #f2efe5;
  --lh-description-size: 14px;
  --lh-description-weight: 400;
  --lh-description-line-height: 1.5;
  --lh-description-color: #a9b4bc;
  position: relative;
  width: 100%;
  /* ==========================================================================
     Timeline item
     ========================================================================== */
}
.lh-timeline .lh-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--lh-rail-width) var(--lh-number-width) minmax(0, 1fr);
  column-gap: var(--lh-column-gap);
  width: 100%;
  cursor: default;
  /* Text transitions */
}
.lh-timeline .lh-timeline__item .lh-timeline__number,
.lh-timeline .lh-timeline__item .lh-timeline__title,
.lh-timeline .lh-timeline__item .lh-timeline__description {
  transition: color 250ms ease, opacity 250ms ease, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lh-timeline {
  /* ==========================================================================
     Rail
     ========================================================================== */
}
.lh-timeline .lh-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.lh-timeline .lh-timeline__rail::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--lh-line-width);
  background: var(--lh-line);
  transform: translateX(-50%);
  transition: background-color 250ms ease, opacity 250ms ease;
}
.lh-timeline {
  /* ==========================================================================
     Marker
     ========================================================================== */
}
.lh-timeline .lh-timeline__marker {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--lh-marker-size);
  height: var(--lh-marker-size);
  margin-top: 0;
  border: var(--lh-line-width) solid var(--lh-marker);
  border-radius: 50%;
  /*
   * This hides the timeline behind the marker.
   * If your timeline section has a specific background colour,
   * you can replace inherit with that colour if required.
   */
  background: inherit;
  transition: width 300ms cubic-bezier(0.2, 0.8, 0.2, 1), height 300ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 300ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 250ms ease, border-color 250ms ease, box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lh-timeline {
  /*
   * Inner dot.
   *
   * It always exists, but is hidden on normal markers.
   * This allows it to animate into view.
   */
}
.lh-timeline .lh-timeline__marker::before {
  content: "";
  display: block;
  width: var(--lh-highlight-dot-size);
  height: var(--lh-highlight-dot-size);
  border-radius: 50%;
  background: var(--lh-highlight-dot);
  opacity: 0;
  transform: scale(0);
  transition: opacity 180ms ease, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lh-timeline {
  /* ==========================================================================
     Step number
     ========================================================================== */
}
.lh-timeline .lh-timeline__number {
  min-width: 0;
  font-size: var(--lh-number-size);
  font-weight: var(--lh-number-weight);
  line-height: 1;
  color: var(--lh-number-color);
}
.lh-timeline .lh-timeline__number::after {
  content: "";
  display: block;
  width: min(24px, 100%);
  height: var(--lh-line-width);
  margin-top: 12px;
  background: var(--lh-line);
  transition: width 300ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 250ms ease;
}
.lh-timeline {
  /* ==========================================================================
     Content
     ========================================================================== */
}
.lh-timeline .lh-timeline__content {
  min-width: 0;
  max-width: var(--lh-content-width);
  padding-bottom: var(--lh-item-spacing);
}
.lh-timeline .lh-timeline__title {
  margin: 0 0 var(--lh-content-gap);
  padding: 0;
  font-size: var(--lh-title-size);
  font-weight: var(--lh-title-weight);
  line-height: var(--lh-title-line-height);
  color: var(--lh-title-color);
  font-variant-ligatures: none;
}
.lh-timeline .lh-timeline__description {
  max-width: var(--lh-content-width);
  margin: 0;
  padding: 0;
  font-size: var(--lh-description-size);
  font-weight: var(--lh-description-weight);
  line-height: var(--lh-description-line-height);
  color: var(--lh-description-color);
}
.lh-timeline {
  /* ==========================================================================
     Permanent highlighted / selected step
     ========================================================================== */
}
.lh-timeline .lh-timeline__item.is-highlighted .lh-timeline__marker {
  width: var(--lh-highlight-size);
  height: var(--lh-highlight-size);
  margin-top: calc((var(--lh-marker-size) - var(--lh-highlight-size)) / 2);
  border-color: transparent;
  background: var(--lh-highlight-bg);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--lh-highlight-bg) 7%, transparent), 0 0 0 20px color-mix(in srgb, var(--lh-highlight-bg) 3%, transparent);
}
.lh-timeline .lh-timeline__item.is-highlighted .lh-timeline__marker::before {
  opacity: 1;
  transform: scale(1);
}
.lh-timeline {
  /* ==========================================================================
     Hover state
     ========================================================================== */
}
.lh-timeline .lh-timeline__item:hover {
  /* Grow marker into selected state */
}
.lh-timeline .lh-timeline__item:hover .lh-timeline__marker {
  width: var(--lh-highlight-size);
  height: var(--lh-highlight-size);
  margin-top: calc((var(--lh-marker-size) - var(--lh-highlight-size)) / 2);
  border-color: transparent;
  background: var(--lh-highlight-bg);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--lh-highlight-bg) 7%, transparent), 0 0 0 20px color-mix(in srgb, var(--lh-highlight-bg) 3%, transparent);
}
.lh-timeline .lh-timeline__item:hover {
  /* Reveal centre dot */
}
.lh-timeline .lh-timeline__item:hover .lh-timeline__marker::before {
  opacity: 1;
  transform: scale(1);
}
.lh-timeline .lh-timeline__item:hover {
  /* Brighten number */
}
.lh-timeline .lh-timeline__item:hover .lh-timeline__number {
  color: var(--lh-title-color);
}
.lh-timeline .lh-timeline__item:hover {
  /* Extend number detail */
}
.lh-timeline .lh-timeline__item:hover .lh-timeline__number::after {
  width: 32px;
  background: var(--lh-marker);
}
.lh-timeline .lh-timeline__item:hover {
  /* Give text a tiny bit of movement */
}
.lh-timeline .lh-timeline__item:hover .lh-timeline__title,
.lh-timeline .lh-timeline__item:hover .lh-timeline__description {
  transform: translateX(4px);
}
.lh-timeline .lh-timeline__item:hover {
  /* Bring description forward */
}
.lh-timeline .lh-timeline__item:hover .lh-timeline__description {
  color: var(--lh-title-color);
}
.lh-timeline .lh-timeline__item:hover {
  /* Brighten this section of rail */
}
.lh-timeline .lh-timeline__item:hover .lh-timeline__rail::after {
  background: var(--lh-marker);
}
.lh-timeline {
  /* ==========================================================================
     Move selected state to hovered item
     ========================================================================== */
  /*
   * If any item is being hovered, temporarily return the permanently
   * highlighted item to its normal appearance.
   *
   * If the highlighted item itself is hovered, it stays highlighted.
   */
}
.lh-timeline:has(.lh-timeline__item:hover) .lh-timeline__item.is-highlighted:not(:hover) .lh-timeline__marker {
  width: var(--lh-marker-size);
  height: var(--lh-marker-size);
  margin-top: 0;
  border: var(--lh-line-width) solid var(--lh-marker);
  background: inherit;
  box-shadow: none;
}
.lh-timeline:has(.lh-timeline__item:hover) .lh-timeline__item.is-highlighted:not(:hover) .lh-timeline__marker::before {
  opacity: 0;
  transform: scale(0);
}
.lh-timeline {
  /* ==========================================================================
     Timeline start
     ========================================================================== */
}
.lh-timeline .lh-timeline__item:first-child .lh-timeline__rail::after {
  top: calc(var(--lh-marker-size) / 2);
}
.lh-timeline {
  /* ==========================================================================
     Timeline end
     ========================================================================== */
}
.lh-timeline .lh-timeline__item:last-child .lh-timeline__rail::after {
  bottom: auto;
  height: calc(var(--lh-marker-size) / 2);
}
.lh-timeline .lh-timeline__item:last-child .lh-timeline__content {
  padding-bottom: 0;
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 900px) {
  .lh-timeline {
    /*
     * Same vertical layout as desktop.
     * Just tighten the columns.
     */
    --lh-column-gap: 18px;
    --lh-rail-width: 48px;
    --lh-number-width: 48px;
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 600px) {
  .lh-timeline {
    --lh-column-gap: 10px;
    --lh-rail-width: 30px;
    --lh-number-width: 36px;
  }
  .lh-timeline .lh-timeline__number::after {
    width: 16px;
    margin-top: 8px;
  }
  .lh-timeline .lh-timeline__item:hover .lh-timeline__number::after {
    width: 20px;
  }
}
/* ==========================================================================
   Touch devices
   ========================================================================== */
/*
 * Phones/tablets don't really have hover.
 *
 * Prevent sticky pseudo-hover behaviour from making a random step
 * remain highlighted after tapping it.
 */
@media (hover: none) {
  .lh-timeline .lh-timeline__item:hover .lh-timeline__title,
  .lh-timeline .lh-timeline__item:hover .lh-timeline__description {
    transform: none;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lh-timeline *,
  .lh-timeline *::before,
  .lh-timeline *::after {
    transition-duration: 0.01ms !important;
  }
}
/* ==========================================================================
   Gutenberg editor
   ========================================================================== */
.editor-styles-wrapper .lh-timeline {
  /*
   * Gutenberg can inject its own flow margins around nested blocks.
   * Don't allow those to throw out our timeline geometry.
   */
}
.editor-styles-wrapper .lh-timeline .lh-timeline__item {
  margin-block-start: 0;
  margin-block-end: 0;
}
.editor-styles-wrapper .lh-timeline {
  /*
   * RichText fields remain visually clean while editing.
   */
}
.editor-styles-wrapper .lh-timeline .lh-timeline__title:focus,
.editor-styles-wrapper .lh-timeline .lh-timeline__description:focus,
.editor-styles-wrapper .lh-timeline .lh-timeline__number:focus {
  outline: none;
}

/* ==========================================================================
   Timeline Gutenberg controls
   ========================================================================== */
.lh-control-heading {
  margin: 4px 0 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lh-control-divider {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid #ddd;
}

/* Long Hound site styles start here. */

/*# sourceMappingURL=main.css.map */