/*
 * CIRCUS DANIEL — ORIGINAL RESPONSIVE CONTRACT
 * Canonical source: Full CSS export captured 2026-09-23.
 *
 * Width-responsive rules below are reproduced from the original CSS and load
 * after Site Kit component styles. This is deliberately a compatibility layer:
 * migrated components may gain editable base styles, but their original
 * large/intermediate/mobile behavior remains authoritative unless a future
 * component explicitly replaces that contract.
 */
@media (min-width: 701px) {

    /*
     * Initial state.
     */

    .cd-header-logo img {
      opacity: 0;

        transform-origin: center;
    }


    .cd-header-title,
    nav.cd-header-sections {
      opacity: 0;
    }


    /*
     * Keep travelling elements inside the header.
     */

    .cd-site-header.cd-header-animate {
      overflow: hidden;
    }


    /* ------------------------------------------------------
 LOGO

 Rolls from the left toward its final position
 on the right side of the header.
 ------------------------------------------------------ */

.cd-site-header.cd-header-animate
.cd-header-logo img {
  animation:
     cd-header-logo-roll-right
     3.2s
     cubic-bezier(
        0.08,
        0.72,
        0.16,
        1
     )
     both;
}



@keyframes cd-header-logo-roll-right {

  from {
     opacity: 1;

      transform:
         translateX(
            calc(
              -1 *
              var(
                 --cd-logo-travel,
                 100vw
              )
            )
         )
         rotate(-1440deg);
  }

  to {
     opacity: 1;

      transform:
         translateX(0)
          rotate(0deg);
    }

}


/* ------------------------------------------------------
  TITLE REVEAL
  ------------------------------------------------------ */

.cd-site-header.cd-header-animate
.cd-header-title {
  animation:
     cd-header-title-reveal
     650ms
     ease-out
     2.15s
     both;
}


@keyframes cd-header-title-reveal {

    from {
       opacity: 0;

        transform:
           translateX(18px);
    }

    to {
       opacity: 1;

        transform:
           translateX(0);
    }

}


/* ------------------------------------------------------
  TAGLINE / NAV REVEAL
  ------------------------------------------------------ */
.cd-site-header.cd-header-animate
nav.cd-header-sections {
  animation:
     cd-header-sections-reveal
     550ms
     ease-out
     2.55s
     both;
}


@keyframes cd-header-sections-reveal {

    from {
       opacity: 0;
    }

    to {
       opacity: 1;
    }

}


/* ------------------------------------------------------
  HOME UNDERLINE DRAW
  ------------------------------------------------------ */

.cd-site-header.cd-header-home.cd-header-animate
nav.cd-header-sections::after {
  animation:
     cd-header-home-line
     700ms
     ease-out
     2.9s
     both;
}


@keyframes cd-header-home-line {

    from {
       transform: scaleX(0);
    }

    to {
       transform: scaleX(1);
    }

}


/* ------------------------------------------------------
  INTERNAL ACTIVE UNDERLINE DRAW
  ------------------------------------------------------ */

.cd-site-header.cd-header-internal.cd-header-animate
nav.cd-header-sections
.current-menu-item
> .wp-block-navigation-item__content::after,

.cd-site-header.cd-header-internal.cd-header-animate
nav.cd-header-sections
.current_page_item
> .wp-block-navigation-item__content::after,

.cd-site-header.cd-header-internal.cd-header-animate
nav.cd-header-sections
.wp-block-navigation-item__content[aria-current="page"]::after {
  animation:
     cd-header-active-line
     500ms
     ease-out
     2.9s
     both;
}



@keyframes cd-header-active-line {

    from {
       transform: scaleX(0);
    }

    to {
       transform: scaleX(1);
    }
  }

}

@media (max-width: 900px) {

  .cd-header-inner {
    min-height: 90px;

      padding:
        12px
          20px;
    }


    .cd-header-brand {
      gap: 18px;
    }


    .cd-header-logo img {
      width: 60px;
      height: 60px;
    }


    .cd-header-title {
      font-size: 36px;
    }


    nav.cd-header-sections
    .wp-block-navigation-item__content {
      font-size: 15px;

        letter-spacing: 0.16em;
    }


    nav.cd-header-sections
    .wp-block-navigation-item:not(:last-child)::after {
      margin:
         0
         8px;

        font-size: 15px;
    }

}

@media (max-width: 700px) {

  /*
   * On mobile the lower silver rule gets a little longer.
   * The asymmetric idea remains without wasting too much
   * horizontal space.
   */

  .cd-site-header::after {
    width: 85%;
  }



  .cd-header-inner {
    min-height: 64px;

      padding:
        8px
        14px;
  }


  .cd-header-brand {
    width: 100%;

      gap: 10px;
  }


  .cd-header-identity {
    flex: 1 1 auto;

      gap: 5px;
  }


  .cd-header-logo img {
    width: 42px !important;
    height: 42px !important;

      max-width: 42px !important;

      transform-origin: center;
    animation:
      cd-header-logo-mobile
      1.8s
      cubic-bezier(
         0.08,
         0.72,
         0.16,
         1
      )
      both;
}


@keyframes cd-header-logo-mobile {

    from {
       transform:
          rotate(-720deg);
    }

    to {
       transform:
          rotate(0deg);
    }

}


.cd-header-title {
  font-size:
     clamp(
        18px,
        5.8vw,
        26px
     );

    letter-spacing: 0.08em;
}


/*
 * Navigation stays visible on mobile because
 * the tagline IS the primary navigation.
*/

nav.cd-header-sections {
  padding-bottom:
     6px !important;
}



nav.cd-header-sections
.wp-block-navigation__container {
  justify-content:
     flex-end !important;
}


nav.cd-header-sections
.wp-block-navigation-item__content {
  font-size:
     clamp(
        8px,
        2.65vw,
        11px
     );

     letter-spacing:
        0.08em;
}


nav.cd-header-sections
.wp-block-navigation-item:not(:last-child)::after {
  margin:
     0
     5px;

     font-size: 10px;
}


nav.cd-header-sections
.wp-block-navigation-item__content::after {
  bottom: -6px;
}
}

@media (max-width: 700px) {

    .cd-display-heading {
      font-size: clamp(54px, 17vw, 90px);
      line-height: 0.86;

        white-space: normal;
    }


    .cd-display-heading-number {
      margin-bottom: 8px;

        font-size: 14px;
    }

}

@media (max-width: 1500px) {

  .cd-feature-heading {
    margin-left: 0 !important;
    margin-right: 0 !important;

      grid-template-columns: minmax(0, 1fr);

      align-items: start !important;

      gap: 0;
  }



  .cd-feature-keywords {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

      margin: 18px 0 0 !important;
  }


  .cd-feature-keywords span {
    display: inline-flex;
    align-items: center;
  }


  .cd-feature-keywords span:not(:last-child)::after {
    content: "";

      display: inline-block;

      flex: 0 0 auto;

      width: 1px;
      height: 0.9em;

      margin: 0 14px;

      background: var(--cd-silver-dark);
  }
}

@media (max-width: 700px) {

    .cd-feature-section {
    padding: 44px 0 52px;
}


    .cd-feature-heading {
      display: block !important;

        margin-bottom: 18px;
        padding: 0 18px;
    }



    .cd-feature-heading .cd-feature-number {
      margin-bottom: 8px !important;

        font-size: 14px !important;
    }


    .cd-feature-heading .cd-feature-number::after {
      width: 42px;
    }



    .cd-feature-heading .cd-feature-title,
    .cd-feature-heading h1.cd-feature-title,
    .cd-feature-heading h2.cd-feature-title,
    .cd-feature-heading h3.cd-feature-title,
    .cd-feature-heading h4.cd-feature-title {
      font-size: clamp(48px, 13.5vw, 82px) !important;
       line-height: 0.82 !important;

        white-space: normal;
    }
    .cd-feature-heading .cd-feature-keywords {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    width: 100%;

    margin-top: 16px !important;

    font-size: 10px !important;
    line-height: 1.4 !important;

    letter-spacing: 0.13em !important;

    white-space: nowrap;
}
     .cd-feature-heading
.cd-feature-keywords
span:not(:last-child)::after {
  margin: 0 8px;
}



    .cd-feature-section .photo-scroll .wp-block-image img {
      height: 300px;
    }


    .cd-feature-link {
      margin: 16px 18px 0 !important;

        font-size: 13px;

        letter-spacing: 0.14em;
    }

}

@media (max-width: 600px) {

  .filter-carousel-controls {
      flex-direction: column;

      align-items: center;
      justify-content: center;

      gap: 14px;

      width: 100%;

      padding:
        14px
        18px;

      box-sizing: border-box;
  }



  .filter-carousel-category-control {
      display: flex;

      justify-content: center;
      align-items: center;
      flex-wrap: wrap;

      row-gap: 12px;

      width: 100%;
  }



  .filter-carousel-button {
      font-size: 12px;
  }


  .filter-carousel-divider {
      margin:
         0
          8px;

        font-size: 12px;
    }

}

@media (max-width: 600px) {

  .filter-carousel .filter-carousel-controls {
      padding:
         14px
         18px !important;

      justify-content:
         center !important;
  }



  .filter-carousel
  .filter-carousel-category-control {
      width: 100% !important;

      margin-left: 0 !important;
      margin-right: 0 !important;

      justify-content:
         center !important;

      text-align:
        center !important;
  }

}

@media (max-width: 1100px) {

    .cd-footer-inner {
      grid-template-columns:
         minmax(0, 1fr)
         auto;

      grid-template-rows:
         auto
         auto
         1px;

      row-gap:
        42px;
    padding:
      44px
      36px
      20px;
}



/* ------------------------------------------------------
  CTA
  ------------------------------------------------------ */

.cd-footer-cta-title {
  grid-column:
     1 !important;

    grid-row:
       1 !important;

    max-width:
     none !important;

    font-size:
      clamp(
         50px,
         8.4vw,
         86px
      );
}



/* ------------------------------------------------------
  CONTACT / ABOUT
  ------------------------------------------------------ */

.cd-footer-contact,
.cd-footer-about {
  grid-column:
     2 !important;

    grid-row:
       1 !important;

    align-self:
      end !important;

    margin-left:
     24px !important;

    font-size:
      clamp(
          24px,
          3vw,
          30px
      ) !important;
}



.cd-footer-about {
  transform:
     translateY(-3px);
}



.cd-footer-contact {
  transform:
     translateY(
        calc(-100% - 12px)
     );
}



/* ------------------------------------------------------
  LOWER
  ------------------------------------------------------ */

.cd-footer-lower {
  grid-column:
     1 / -1 !important;

    grid-row:
       2 !important;

    justify-self:
       end !important;
}
    .cd-footer-bottom {
      grid-column:
         1 / -1 !important;

        grid-row:
           3 !important;
    }

}

@media (max-width: 600px) {

    .cd-footer-inner {
      display:
         flex !important;

        flex-direction:
           column;

        align-items:
           stretch;

        padding:
          42px
          24px
          18px;
    }



    /* ------------------------------------------------------
      CTA
      ------------------------------------------------------ */

    .cd-footer-cta {
      display:
         contents !important;
    }
.cd-footer-cta-title {
  width:
     100% !important;

    max-width:
     none !important;

    margin:
     0 0 24px !important;

    font-size:
      clamp(
         42px,
         13vw,
         68px
      );

    line-height:
       .84;
}



/* ------------------------------------------------------
  CONTACT / ABOUT
  ------------------------------------------------------ */

.cd-footer-contact,
.cd-footer-about {
  align-self:
     flex-end !important;

    margin:
     0 !important;

    transform:
       none !important;

    font-size:
      21px !important;

    text-align:
      right;
}



.cd-footer-contact {
  margin-bottom:
     9px !important;
}


.cd-footer-about {
  margin-bottom:
     42px !important;
}



/* ------------------------------------------------------
  LOWER
  ------------------------------------------------------ */

.cd-footer-lower {
  display:
     flex !important;

    flex-direction:
       column;

    align-items:
       flex-end;

    gap:
      26px;

    width:
      100% !important;

    min-height:
      0;

    margin:
     0 0 32px !important;
}



/* ------------------------------------------------------
    IDENTITY — NORMAL ORIENTATION ON MOBILE
    ------------------------------------------------------ */

.cd-footer-identity {
  display:
     grid !important;

    grid-template-columns:
       52px
       128px;

    grid-template-rows:
       54px
       auto;

    align-items:
       end;

    column-gap:
      12px;

    row-gap:
      4px;

    width:
      max-content !important;

    max-width:
     100% !important;

    margin:
     0 !important;

    padding:
      0 !important;

    transform:
       none;
}



.cd-footer-logo {
  width:
     52px !important;
    height:
      52px !important;
}


.cd-footer-brand-title {
  width:
     128px;

    font-size:
      27px;
}



.cd-footer-disciplines {
  width:
     100% !important;

    padding-bottom:
      7px;

    font-size:
      9px;
}



/* ------------------------------------------------------
  LINKS
  ------------------------------------------------------ */

.cd-site-footer .cd-footer-links {
  align-items:
     flex-end !important;

    justify-content:
       flex-start !important;

    gap:
      11px !important;

    width:
      auto !important;
        min-width:
          0;

        height:
          auto;

        padding:
          0 !important;
    }



    .cd-site-footer .cd-footer-links p {
      text-align:
         right;
    }



    .cd-site-footer .cd-footer-links a {
      font-size:
         13px;
    }



    /* ------------------------------------------------------
      BOTTOM RULE
      ------------------------------------------------------ */

    .cd-footer-bottom {
      width:
         100% !important;

        margin:
         0 !important;
    }

}

@media (max-width: 700px) {

    .cd-lightbox {
      padding: 58px 12px 20px;
    }

    .cd-lightbox-image {
      max-height: calc(100% - 48px);
    }

    .cd-lightbox-close {
      top: 10px;
      right: 10px;

        width: 40px;
        height: 40px;
    }

    .cd-lightbox-caption {
      margin-top: 10px;
      padding: 0 8px;
      font-size: 12px;
    }

}

@media (max-width: 700px) {

    .cd-fullscreen-button {
      width: 28px;
      height: 28px;
    }

    .cd-fullscreen-button svg {
      width: 13px;
      height: 13px;
    }
}

@media (max-width: 1000px) {

 .cd-contact-modal {
   width:
     calc(100vw - 36px);

     max-height:
      calc(100vh - 36px);
 }


 .cd-contact-modal-inner {
   grid-template-columns:
     minmax(0, 1fr)
     minmax(320px, 380px);

     column-gap:
       48px;

     min-height:
      auto;
        padding:
          64px 40px 42px;
    }


    .cd-contact-modal-heading {
      font-size:
        clamp(
           42px,
           6.5vw,
           66px
        );
    }

}

@media (max-width: 700px) {

    .cd-contact-modal {
      width:
        calc(100vw - 20px);

        max-height:
         calc(100dvh - 20px);

        overflow-y:
          auto;
    }



    .cd-contact-modal-inner {
      display:
        flex;

        flex-direction:
      column;

    align-items:
       stretch;

    gap:
      34px;

    min-height:
     auto;

    padding:
      70px 18px 20px;
}


.cd-contact-modal-close {
  top:
    14px;

    right:
      14px;

    width:
      38px;

    height:
      38px;
}


.cd-contact-modal-intro {
  width:
    100%;
}


.cd-contact-modal-number {
  margin-bottom:
    16px;
}


.cd-contact-modal-heading {
        max-width:
         440px;

        font-size:
          clamp(
             42px,
             13vw,
             66px
          );
    }



    .cd-contact-modal-panel {
      width:
        100%;

        padding:
          24px 20px 20px;

        border-radius:
          8px;
    }


    .cd-contact-modal .cd-contact-message-field {
      min-height:
        120px;
    }


    .cd-contact-modal .cd-contact-form-actions {
      justify-content:
        stretch;
    }



    .cd-contact-modal .cd-contact-submit,
    .cd-contact-modal button[type="submit"],
    .cd-contact-modal input[type="submit"] {
      width:
        100%;
    }

}

@media (max-width: 700px) {

    .cd-content-modal-close {
      width: 28px;
      height: 28px;
    }

}

@media (max-width: 700px) {

 .cd-content-modal {
   width: calc(100vw - 20px);

     max-height: calc(100dvh - 20px);

     border-radius: var(--cd-radius-mobile);
 }



 .cd-content-modal-shell {
   padding: var(--cd-frame-mobile);
 }



 .cd-content-modal-panel {
   max-height: calc(
      100dvh -
      20px -
      (var(--cd-frame-mobile) * 2)
   );

     border-radius: calc(
        var(--cd-radius-mobile) -
        var(--cd-frame-mobile)
     );
 }


 .cd-content-modal-close {
   top: 14px;
   right: 14px;

     width: 28px;
     height: 28px;

     font-size: 20px;
 }
}

@media (max-width: 600px) {

    .filter-controls {
        flex-direction:
           column !important;

        align-items: center;
        justify-content: center;

        gap: 14px;

        width: 100%;

        margin-bottom: 16px;

        padding:
          14px
          18px;

        box-sizing: border-box;
    }


    .filter-category-control {
    display: flex;

    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    row-gap: 12px;

    width: 100%;
}


.filter-button {
    font-size: 12px;
}



.filter-divider {
    margin:
       0
       8px;

    font-size: 12px;
}



/* Size control */

.filter-size-control {
    align-self: center;

    width:
      min(
         75vw,
         320px
      );

    margin-left: 0;

    gap: 9px;

    color:
      var(--cd-silver-dark);
    font-size: 9px;

    opacity: 0.55;

    transition:
       opacity 150ms ease;
}


.filter-size-control:hover,
.filter-size-control:focus-within {
    opacity: 0.9;
}


.filter-size-control
input[type="range"] {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    height: 12px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    background:
      transparent;

    cursor: pointer;
}



/* Chrome / Safari / Edge */

.filter-size-control
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    border: 0;

    background:
      var(--cd-silver-dark);
}



.filter-size-control
input[type="range"]::-webkit-slider-thumb {
    width: 7px;
    height: 7px;

    margin-top: -3px;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 50%;

    background:
      var(--cd-silver-light);
}


/* Firefox */

.filter-size-control
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 1px;

    border: 0;

    background:
      var(--cd-silver-dark);
}



.filter-size-control
input[type="range"]::-moz-range-progress {
    height: 1px;
    background:
      var(--cd-silver-dark);
}


.filter-size-control
input[type="range"]::-moz-range-thumb {
    width: 7px;
    height: 7px;

    border: 0;
    border-radius: 50%;

    background:
      var(--cd-silver-light);
}



/* ======================================================
  MOBILE THUMBNAIL VIEWER
  ====================================================== */

.filter-gallery-viewer {
    padding:
       46px
       10px
       10px;
}


.filter-gallery-viewer-gallery {
    width: 100%;

    height:
      calc(
         100dvh -
         56px
      );

    max-height:
     calc(
        100dvh -
        56px
      );
}


.filter-gallery-viewer-gallery
> .process-gallery-stage {
    border-width:
       var(--cd-frame-mobile);

    border-radius:
      var(--cd-radius-mobile);
}



.filter-gallery-viewer-close {
    top:
       10px !important;

    right:
       10px !important;

    width: 28px;
    height: 28px;
}


.filter-gallery-viewer-caption-title {
    font-size: 15px;
}



.filter-gallery-viewer-caption-description {
    font-size: 12px;
}



/* ======================================================
  MOBILE SINGLE IMAGE FULLSCREEN
  ====================================================== */

.process-gallery.filter-gallery-viewer-gallery.cd-fullscreen-active
> .process-gallery-stage
> .process-gallery-arrow {
   width: 20%;
     opacity: 1;
 }


 .process-gallery.filter-gallery-viewer-gallery.cd-fullscreen-active
 > .process-gallery-thumbnails {
    display: none !important;
    visibility: hidden !important;
 }


 .process-gallery.filter-gallery-viewer-gallery.cd-fullscreen-active
 > .process-gallery-caption {
    display: none !important;
    visibility: hidden !important;
 }

}

@media (max-width: 600px) {

    .image-slider {
       padding:
         var(--cd-frame-mobile)
         var(--cd-frame-mobile)
         36px
         var(--cd-frame-mobile) !important;

        border-radius: var(--cd-radius-mobile);
    }

    .image-slider-arrow {
       top: var(--cd-frame-mobile);
       bottom: 36px;

        width: 25%;

        padding: 0 12px;

        font-size: 48px;

        opacity: 0.75;
    }

    .image-slider-prev {
       left: var(--cd-frame-mobile);
    }
    .image-slider-next {
       right: var(--cd-frame-mobile);
    }

    .image-slider-dots {
       height: 36px;

        gap: 7px;
    }

    .image-slider-dot {
       width: 8px;
       height: 8px;
    }

}

@media (max-width: 700px) {

    .image-slider.cd-fullscreen-active {
       padding: 0 0 36px 0 !important;
    }

    .image-slider.cd-fullscreen-active .image-slider-arrow {
       top: 0 !important;
       bottom: 36px !important;
    }

}

@media (max-width: 600px) {

    .before-after {
      padding: var(--cd-frame-mobile) !important;

        border-radius: var(--cd-radius-mobile);
    }

    .before-after-handle {
      width: 46px;
      height: 46px;

        font-size: 20px;
    }

    .before-after-label {
      font-size: 20px;
    }

    .before-after-label-before {
      top: 16px;
      left: 16px;
    }

    .before-after-label-after {
      right: 10px;
      bottom: 10px;
    }

}

@media (max-width: 600px) {

    .before-after {
      padding:
         var(--cd-frame-mobile)
         !important;

        border-radius:
          var(--cd-radius-mobile);
    }



    .before-after-handle {
      width: 46px;
      height: 46px;
        font-size: 20px;
    }



    .before-after-label {
      font-size: 25px;
    }


    /*
     * Still clears the 28px mobile
     * fullscreen control at top: 10px.
     */

    .before-after-label-before {
      top: 52px;
      left: 16px;
    }



    .before-after-label-after {
      right: 16px;
      bottom: 16px;
    }

}

@media (max-width: 700px) {

    .before-after.cd-fullscreen-active
    .before-after-label {
      font-size: 32px;
    }



    .before-after.cd-fullscreen-active
    .before-after-label-before {
      top:
         max(
            58px,
            calc(
              env(safe-area-inset-top) +
              50px
            )
         );

      left:
         max(
            16px,
               env(safe-area-inset-left)
          );
    }


    .before-after.cd-fullscreen-active
    .before-after-label-after {
      right:
         max(
            16px,
            env(safe-area-inset-right)
         );

        bottom:
          max(
             16px,
             env(safe-area-inset-bottom)
          );
    }

}

@media (max-width: 700px) {

    .process-gallery-stage {
       aspect-ratio: 3 / 2;

        border-width: var(--cd-frame-mobile);
        border-radius: var(--cd-radius-mobile);
    }

    .process-gallery-arrow {
       width: 22%;

        opacity: 1;
    }

    .process-gallery-arrow.prev {
       padding-left: 10px;
    }

    .process-gallery-arrow.next {
       padding-right: 10px;
    }

    .process-gallery-arrow::before {
       font-size: 38px;
    }
    .process-gallery-thumbnail {
       flex: 0 0 68px;

        width: 68px;
        height: 48px;
    }

    .process-gallery-caption {
       margin-top: 8px;

        font-size: 12px;
    }

}

@media (max-width: 700px) {

    .process-gallery.cd-fullscreen-active
    > .process-gallery-caption,

    .image-navigator-media-content
    .process-gallery.cd-fullscreen-active
    > .process-gallery-caption {
       padding: 8px 48px !important;
    }


    .process-gallery.cd-fullscreen-active
    > .process-gallery-thumbnails,

    .image-navigator-media-content
    .process-gallery.cd-fullscreen-active
    > .process-gallery-thumbnails {
       justify-content: flex-start !important;

        padding:
          6px
          max(8px, env(safe-area-inset-right))
          max(6px, env(safe-area-inset-bottom))
          max(8px, env(safe-area-inset-left))
          !important;
    }

}

@media (max-width: 700px) {

    .annotated-image-stage {
      padding: var(--cd-frame-mobile);

        border-radius: var(--cd-radius-mobile);
    }
.annotated-image-detail-view {
  padding: 12px;
}

.annotated-image-detail-close {
  top: 8px;
  right: 8px;

    width: 36px;
    height: 36px;
}

.annotated-image-marker {
  width: 20px;
  height: 20px;
}

.annotated-image-marker.is-active {
  width: 32px;
  height: 32px;

    font-size: 12px;
}

.annotated-image-reader {
  grid-template-columns: 1fr auto;

    gap: 10px 14px;

    min-height: 0;

    padding: 12px 10px;
}

.annotated-image-counter {
  grid-column: 1;
  grid-row: 1;

    padding: 0;
}

.annotated-image-navigation {
  grid-column: 2;
        grid-row: 1;
    }

    .annotated-image-reader-content {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .annotated-image-reader-title {
      font-size: 16px;
    }

    .annotated-image-reader-description {
      font-size: 12px;
    }

    .annotated-image-detail-toggle {
      min-height: 36px;
    }

    .annotated-image-nav-button {
      min-width: 38px;
      height: 34px;

        padding: 0 8px;
    }

}

@media (max-width: 700px) {

    .annotated-image.cd-fullscreen-active
    .annotated-image-detail-view {
      padding: 12px !important;
    }


    .annotated-image.cd-fullscreen-active
    .annotated-image-reader {
      padding:
        12px
        max(10px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left))
        !important;
    }

}

@media (max-width: 700px) {

    .image-navigator-stage {
       padding: var(--cd-frame-mobile);

        border-radius:
          var(--cd-radius-mobile)
          var(--cd-radius-mobile)
          0
          0;
    }

    .image-navigator-media {
       padding: 12px;
    }

    .image-navigator-media-close {
       top: 22px;
       right: 22px;

        width: 36px;
        height: 36px;
}

.image-navigator-marker {
   width: 20px;
   height: 20px;
}

.image-navigator-marker.is-active {
   width: 32px;
   height: 32px;

    font-size: 12px;
}

.image-navigator-reader {
   grid-template-columns: 1fr auto;

    gap: 10px 14px;

    min-height: 0;

    padding: 12px 10px;

    border-radius:
      0
      0
      var(--cd-radius-mobile)
      var(--cd-radius-mobile);
}

.image-navigator-counter {
   grid-column: 1;
   grid-row: 1;

    padding: 0;
}

.image-navigator-navigation {
   grid-column: 2;
   grid-row: 1;
}

.image-navigator-reader-content {
   grid-column: 1 / -1;
        grid-row: 2;
    }

    .image-navigator-reader-title {
       font-size: 16px;
    }

    .image-navigator-reader-description {
       font-size: 12px;
    }

}

@media (max-width: 700px) {

    .image-navigator.cd-fullscreen-active
    .image-navigator-media {
       padding: 12px !important;
    }


    .image-navigator.cd-fullscreen-active
    .image-navigator-reader {
       padding:
         12px
         max(
           10px,
           env(safe-area-inset-right)
         )
         max(
           12px,
           env(safe-area-inset-bottom)
         )
         max(
           10px,
         env(safe-area-inset-left)
       )
       !important;
  }

}

@media (min-width: 701px) {

    /*

    * The JS uses this wrapper so Detail and Breakdown can

    * share a viewport on mobile.

    *

    * On desktop the wrapper must NOT become another layout

    * box. Its children need to participate directly in the

    * breakdown panel's grid, just as they did before the

    * mobile architecture was added.

    */

    .video-viewer-panel-content {

         display: contents;
}

/*

* Mobile-only structural elements must not occupy

* desktop grid rows.

*/

.video-viewer-mobile-tabs,

.video-viewer-mobile-special-controls {

     display: none !important;

}

/*

* Restore the original desktop panel structure:

*

* header

* detail

* breakdown module

*/

.video-viewer-breakdown {

     grid-template-rows:

       auto

       minmax(0, 1fr)

       auto;

}
     /*

     * When the annotation list is collapsed, the panel

     * should shrink with its actual content rather than

     * retaining a forced 430px body.

     */

    .video-viewer-breakdown.is-annotations-collapsed {
      bottom: auto;

     height: auto;
     min-height: 0;

     grid-template-rows:
        auto
        auto
        auto;
}



.video-viewer-breakdown.is-annotations-collapsed
.video-viewer-annotation-detail {
   min-height: 0;
}


.video-viewer-breakdown.is-annotations-collapsed
.video-viewer-annotation-module {
   grid-template-rows:
      auto
      0
      auto
      auto;
}

     /*

     * Restore the module's dark control area.

     */
.video-viewer-annotation-module {

     display: grid;

     grid-template-rows:

       auto

       var(--video-annotation-list-height)

       auto

       auto;

     background: #111;

}

.video-viewer-annotation-module.is-collapsed {

     grid-template-rows:

       auto

       0

       auto

       auto;

}

/*

* The action row belongs inside the dark module on

* desktop.

*/

.video-viewer-annotation-module

> .video-viewer-annotation-actions {
     display: grid;

     grid-template-columns:

       repeat(4, minmax(0, 1fr));

     gap: 6px;

     padding: 9px;

     background: #151515;

     border-top:

       1px solid

       rgba(255, 255, 255, 0.15);

}

.video-viewer-annotation-module

> .video-viewer-replay-speed {

     display: grid;

     background: #090909;

}

/*

* Protect these buttons from WordPress/theme button

* styling.

*/

.video-viewer-annotation-module

.video-viewer-annotation-action {

     display: flex;
align-items: center;

justify-content: center;

width: 100%;

height: 34px;

margin: 0;

padding: 0;

appearance: none;

-webkit-appearance: none;

border:

  1px solid

  rgba(255, 255, 255, 0.30);

border-radius:

  var(--cd-control-radius);

color:

  var(--cd-white);

background:

  rgba(255, 255, 255, 0.035);

box-shadow: none;

font: inherit;

font-size: 17px;

font-weight: 800;

line-height: 1;
      cursor: pointer;

  }

  .video-viewer-annotation-module

  .video-viewer-play-section {

      color:

        var(--cd-black);

      background:

        var(--cd-white);

      border-color:

        var(--cd-white);

  }

  .video-viewer-annotation-module

  .video-viewer-annotation-action:disabled {

      opacity: 0.22;

      cursor: default;

  }

}

@media (
   min-width: 701px
)
and (
   max-width: 1050px
){

    .video-viewer-player {
       --video-panel-width: 360px;
       --video-panel-top: 14px;
       --video-annotation-list-height: 190px;
       --video-player-max-height: 680px;
    }


    .video-viewer-controls {
       gap: 8px;
    }
    .video-viewer-volume {
       width: 45px;
       flex-basis: 45px;
    }

}

@media (max-width: 700px) {

    /* ----------------------------------------------------------
      FULL BLEED
      ---------------------------------------------------------- */

    .video-viewer-container {
       width: 100vw !important;
       max-width: 100vw !important;

        margin-left:
         calc(50% - 50vw) !important;

        margin-right:
         calc(50% - 50vw) !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    .video-viewer-container .video-viewer {
       width: 100% !important;
       max-width: none !important;

        margin: 0 !important;
    }
/* ----------------------------------------------------------
  PLAYER
  ---------------------------------------------------------- */

.video-viewer-player {
   --video-mobile-content-height: 150px;

    display: flex;

    flex-direction: column;

    width: 100% !important;

    max-width: none !important;
    max-height: none;

    margin: 0 !important;

    overflow: hidden;

    border: 0 !important;
    border-radius: 0 !important;
}


.video-viewer-main {
   flex: 0 0 auto;

    width: 100%;
    min-height: 0;
}


/* ----------------------------------------------------------
  VIDEO
  ---------------------------------------------------------- */

.video-viewer-stage {
   display: block;

    flex: none;
    width: 100%;

    min-height: 0;

    overflow: hidden;
}


.video-viewer-stage
.wp-block-video {
   display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
}



.video-viewer-stage
video {
   display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    object-fit: initial !important;
}


/* ----------------------------------------------------------
  BASIC CONTROLS
  ---------------------------------------------------------- */

.video-viewer-controls {
   display: grid;

    grid-template-columns:
       auto
       minmax(0, 1fr)
      auto
      auto;

    grid-template-rows:
       auto
       34px;

    align-items: center;

    gap:
      7px 8px;

    padding:
      8px 10px;
}


.video-viewer-transport {
   grid-column: 1;
   grid-row: 1;
}



.video-viewer-time {
   grid-column: 2;
   grid-row: 1;

    justify-content: center;
}


.video-viewer-mute {
   grid-column: 3;
   grid-row: 1;
}


.video-viewer-fullscreen {
   grid-column: 4;
   grid-row: 1;
}


.video-viewer-timeline {
    grid-column: 1 / -1;
    grid-row: 2;

    width: 100%;
    min-width: 0;
}


.video-viewer-volume {
   display: none;
}


.video-viewer-breakdown-discovery {
   display: none;
}


    /* ----------------------------------------------------------
    MOBILE TOP BAR
    ---------------------------------------------------------- */

.video-viewer-breakdown-handle,
.video-viewer-player[data-panel-side="right"]
.video-viewer-breakdown-handle,
.video-viewer-player[data-panel-side="left"]
.video-viewer-breakdown-handle {

    position: relative;

    z-index: 40;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    order: 2;

    display: grid;

    grid-template-columns:
       42px
       minmax(0, 1fr)
      42px;

    align-items: center;

    width: 100%;
    height: 52px;

    flex: 0 0 52px;

    margin: 0;

    padding:
      0 12px;

    border: 0;

    border-top:
      1px solid
      rgba(255, 255, 255, 0.18);

    border-radius: 0;

    color: var(--cd-white);

    background:
      linear-gradient(
         to bottom,
         #1b1b1b,
         #111
      );

    box-shadow: none;

    transform: none;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    box-sizing: border-box;
}



.video-viewer-player.is-breakdown-open
.video-viewer-breakdown-handle {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;

    transform: none;
}


/* ----------------------------------------------------------
  COLLAPSED STATE
  ---------------------------------------------------------- */

.video-viewer-breakdown-handle-toggle {
   grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
       minmax(0, 1fr)
       auto;

    align-items: center;

    width: 100%;
    height: 100%;

    margin: 0;
    padding:
      0 6px;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 0;

    color: inherit;
    background: transparent;

    font: inherit;

    text-align: left;
    cursor: pointer;

    box-sizing: border-box;
}


.video-viewer-breakdown-handle-text {
   display: block;

    min-width: 0;

    overflow: hidden;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-overflow: ellipsis;
    text-transform: uppercase;

    white-space: nowrap;
}


.video-viewer-breakdown-handle-arrow {
   display: block;

    width: 11px;
    height: 11px;

    margin-right: 3px;

    border-top: 0;

    border-right:
      3px solid
      currentColor;

    border-bottom:
      3px solid
      currentColor;
    box-sizing: border-box;

    transform: rotate(45deg) !important;
}



/* ----------------------------------------------------------
  EXPANDED STATE
  ---------------------------------------------------------- */

.video-viewer-mobile-nav {
   grid-column: 1 / -1;

    display: none;

    grid-template-columns:
       42px
       minmax(0, 1fr)
       42px;

    align-items: center;

    gap: 8px;

    width: 100%;
    height: 100%;
}


.video-viewer-player.is-breakdown-open
.video-viewer-breakdown-handle-toggle {
   display: none;
}



.video-viewer-player.is-breakdown-open
.video-viewer-mobile-nav {
   display: grid;
}


.video-viewer-mobile-nav-title {
   min-width: 0;
    overflow: hidden;

    color: var(--cd-white);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.06em;

    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;

    white-space: nowrap;
}


.video-viewer-mobile-nav-button {
   display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 34px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border:
      1px solid
      rgba(255, 255, 255, 0.30);

    border-radius:
      var(--cd-control-radius);

    color: var(--cd-white);

    background:
      rgba(255, 255, 255, 0.035);
    box-shadow: none;

    font: inherit;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    box-sizing: border-box;
}


.video-viewer-mobile-nav-button:last-child {
   justify-self: end;
}


.video-viewer-mobile-nav-button:hover,
.video-viewer-mobile-nav-button:focus-visible {
   color: var(--cd-black);
   background: var(--cd-white);
   border-color: var(--cd-white);
}



.video-viewer-mobile-nav-button:disabled {
   opacity: 0.22;
   cursor: default;
}


.video-viewer-mobile-nav-button:disabled:hover {
   color: var(--cd-white);

    background:
      rgba(255, 255, 255, 0.035);

    border-color:
      rgba(255, 255, 255, 0.30);
}
/* ----------------------------------------------------------
  PANEL
 ---------------------------------------------------------- */

.video-viewer-breakdown,
.video-viewer-player[data-panel-side="right"]
.video-viewer-breakdown,
.video-viewer-player[data-panel-side="left"]
.video-viewer-breakdown {

  position: relative;

  z-index: 30;

  top: auto;
  right: auto;
  bottom: auto;
  left: auto;

  order: 3;

  display: none;

  grid-template-columns:
     minmax(0, 1fr);

  grid-template-rows:
     44px
     var(--video-mobile-content-height)
     auto;

  width: 100%;
  height: auto;

  min-width: 0;
  min-height: 0;

  margin: 0;

  overflow: hidden;

  color: var(--cd-black);
  background: var(--cd-white);

  border: 0;
  border-radius: 0;
    box-shadow: none;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: none !important;

    transition: none;
}


.video-viewer-player.is-breakdown-open
.video-viewer-breakdown {
   display: grid;
}


.video-viewer-breakdown-header {
   display: none;
}


/* ----------------------------------------------------------
  TABS — BREAKDOWN LEFT / DETAIL RIGHT
  ---------------------------------------------------------- */

.video-viewer-mobile-tabs {
   grid-row: 1;

    display: grid;

    grid-template-columns:
       1fr
       1fr;

    width: 100%;
    height: 44px;

    background: #111;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.15);
}


.video-viewer-mobile-tab {
   position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 0;

    color:
      rgba(255, 255, 255, 0.55);

    background: #151515;

    font: inherit;
    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    cursor: pointer;
}


.video-viewer-mobile-tab
+ .video-viewer-mobile-tab {
   border-left:
      1px solid
      rgba(255, 255, 255, 0.12);
}
.video-viewer-mobile-tab.is-active {
   color: var(--cd-white);
   background: #202020;
}


.video-viewer-mobile-tab.is-active::after {
   position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    content: '';

    background: var(--cd-accent);
}


/* ----------------------------------------------------------
  PANEL CONTENT
  ---------------------------------------------------------- */

.video-viewer-panel-content {
   position: relative;

    grid-row: 2;

    display: block;

    width: 100%;
    height:
      var(--video-mobile-content-height);

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}
.video-viewer-annotation-detail,
.video-viewer-annotation-module {
   position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;
}


     /* ----------------------------------------------------------
    DETAIL
    ---------------------------------------------------------- */

.video-viewer-annotation-detail {
   display: block;

    width: 100%;
    height: 100%;

    padding:
      20px 26px;

    overflow-x: hidden;
    overflow-y: auto;

    color: var(--cd-black);
    background: var(--cd-white);

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);

    box-sizing: border-box;
}


.video-viewer-annotation-detail-title {
   display: none;
}


.video-viewer-annotation-content {
   width: 100%;
   max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;

    color: var(--cd-black);
}


.video-viewer-annotation-content > * {
   max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box;
}


.video-viewer-annotation-content p {
   margin-top: 0 !important;
   margin-bottom: 0.8em !important;

    color: var(--cd-black);

    font-size: 15px;
    line-height: 1.45;
}



.video-viewer-annotation-content > :first-child {
   margin-top: 0 !important;
}


.video-viewer-annotation-content > :last-child {
   margin-bottom: 0 !important;
}


.video-viewer-annotation-empty {
   margin: 0;
   padding: 0;
}


.video-viewer-annotation-empty strong {
   display: block;

    margin: 0 0 8px;

    font-size: 16px;
    line-height: 1.25;
}


.video-viewer-annotation-empty p {
   margin: 0;

    font-size: 15px;
    line-height: 1.45;
}

/* ----------------------------------------------------------
  BREAKDOWN
  ---------------------------------------------------------- */

.video-viewer-annotation-module {
   display: block;

    overflow: hidden;

    color: var(--cd-white);

    background: #111;
    border: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-20px);
}


.video-viewer-annotation-module-header {
   display: none;
}



.video-viewer-annotation-list,
.video-viewer-annotation-module.is-collapsed
.video-viewer-annotation-list {
   width: 100%;
   height: 100%;

    min-height: 0;

    overflow-y: auto;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}



/* ----------------------------------------------------------
  VIEW SWITCH
  ---------------------------------------------------------- */

.video-viewer-breakdown[data-mobile-view="detail"]
.video-viewer-annotation-detail {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;

    transform: translateX(0);
}
.video-viewer-breakdown[data-mobile-view="detail"]
.video-viewer-annotation-module {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;

    transform: translateX(-20px);
}


.video-viewer-breakdown[data-mobile-view="breakdown"]
.video-viewer-annotation-detail {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;

    transform: translateX(20px);
}


.video-viewer-breakdown[data-mobile-view="breakdown"]
.video-viewer-annotation-module {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;

    transform: translateX(0);
}


/* ----------------------------------------------------------
  MOBILE SPECIAL CONTROLS

    Only:
    PLAY | SPEED | REPLAY
    ---------------------------------------------------------- */

.video-viewer-special-controls {
   grid-row: 3;

    width: 100%;
    min-width: 0;
}



.video-viewer-special-actions {
   grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 8px;

    padding:
      9px 16px;
}


.video-viewer-special-action {
   height: 38px;
}



.video-viewer-desktop-previous,
.video-viewer-desktop-next {
   display: none;
}


/* ----------------------------------------------------------
  MOBILE FULLSCREEN
  ---------------------------------------------------------- */

.video-viewer-player:fullscreen,
.video-viewer-player.is-simulated-fullscreen {
   width: 100vw !important;
   height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    border: 0 !important;
    border-radius: 0 !important;
}
.video-viewer-player:fullscreen
.video-viewer-main,
.video-viewer-player.is-simulated-fullscreen
.video-viewer-main {
   flex: 1 1 auto;

    min-height: 0;
}


.video-viewer-player:fullscreen
.video-viewer-stage,
.video-viewer-player.is-simulated-fullscreen
.video-viewer-stage {
   flex: 1 1 auto;

    display: flex;

    min-height: 0;
}


.video-viewer-player:fullscreen
.video-viewer-stage
.wp-block-video,

.video-viewer-player.is-simulated-fullscreen
.video-viewer-stage
.wp-block-video {
   display: flex !important;

    width: 100% !important;
    height: 100% !important;
}


.video-viewer-player:fullscreen
.video-viewer-stage
video,

.video-viewer-player.is-simulated-fullscreen
.video-viewer-stage
video {
      width: auto !important;
      height: auto !important;

      max-width: 100% !important;
      max-height: 100% !important;

      object-fit: contain !important;
  }

}

@media (max-width: 700px) {

  .video-viewer-player.is-simulated-fullscreen
  .video-viewer-stage {
     flex: 0 0 auto;
     min-height: 0;
     height: auto;
  }


  .video-viewer-player.is-simulated-fullscreen
  .video-viewer-stage .wp-block-video {
     width: 100%;
     height: auto;
     margin: 0;
  }


  .video-viewer-player.is-simulated-fullscreen
  .video-viewer-stage video {
     display: block;

      width: 100%;
      height: auto;

      max-width: 100%;
      max-height: none;

      object-fit: contain;
  }
}

@media (max-width: 700px) {

  .video-viewer-player.is-simulated-fullscreen
  .video-viewer-main {
     flex: 0 0 auto;

      width: 100%;
      height: auto;
      min-height: 0;
  }


  .video-viewer-player.is-simulated-fullscreen
  .video-viewer-controls {
     flex: 0 0 auto;
  }
}

@media (max-width: 420px) {

  .video-viewer-transport
  .video-viewer-control-button {
     width: 36px;
     height: 36px;

      min-width: 36px;
      max-width: 36px;

      flex-basis: 36px;
  }


  .video-viewer-transport
  .video-viewer-play {
     width: 38px;
        min-width: 38px;
        max-width: 38px;

        flex-basis: 38px;
    }


    .video-viewer-time {
       font-size: 10px;
    }


    .video-viewer-controls {
       padding:
         7px 8px;
    }


    .video-viewer-breakdown-handle {
       padding:
         0 14px;
    }


    .video-viewer-annotation-detail {
       padding:
         18px 20px;
    }


    .video-viewer-special-actions {
       padding:
         8px 12px;
    }

}

@media (max-width: 700px) {

    .annotated-3d-stage {
      min-height: 360px;

        aspect-ratio: 4 / 5;

        border-width:
          var(--cd-frame-mobile);

        border-radius:
          var(--cd-radius-mobile);
    }


    .annotated-3d-toolbar {
    top: 8px;
    right: 8px;
}


.annotated-3d-tool {
  height: 28px;

    padding:
      0
      8px;

    font-size: 8px;
}


.annotated-3d-marker {
  width: 28px;
  height: 28px;
}


.annotated-3d-reader {
  top: auto;

    right: 8px;
    bottom: 8px;
    left: 8px;

    width: auto;

    max-height: 48%;

    transform:
       translateY(12px);
}


.annotated-3d-reader.is-open {
  transform:
     translateY(0);
}
    .annotated-3d-reader-title {
      font-size: 20px;
    }


    .annotated-3d-author {
      grid-template-columns:
         1fr;
    }



    .annotated-3d-author-header {
      align-items: flex-start;

        flex-direction: column;
    }


    .annotated-3d-author-list {
      grid-column: 1;

        min-height: 0;

        border-right: 0;

        border-bottom:
          1px solid
          var(--cd-border-light-subtle);
    }


    .annotated-3d-editor {
      grid-column: 1;
    }


    .annotated-3d-viewer.cd-fullscreen-active
    .annotated-3d-reader {
      max-height: 42%;
    }

}

@media (max-width: 700px) {

    .process-timeline:not(.horizontal) {
       --timeline-mobile-line-x: 28px;
       --timeline-mobile-card-left: 84px;
       --timeline-mobile-right: 16px;

      display: block !important;

      width: 100%;

      padding:
        24px
        var(--timeline-mobile-right)
      24px
      var(--timeline-mobile-card-left)
      !important;

    box-sizing: border-box;
}

.process-timeline:not(.horizontal)::before {
   top:
     calc(
        24px
        + var(--timeline-node-size) / 2
     );

    bottom:
      calc(
         24px
         + var(--timeline-node-size) / 2
      );

    left:
       var(--timeline-mobile-line-x);

    transform: none;
}

.process-timeline:not(.horizontal)
> .process-timeline-step {
   display: block !important;

    width: 100%;

    margin:
     0
     0
     54px
     !important;

    padding: 0 !important;
}

.process-timeline:not(.horizontal)
> .process-timeline-step:last-child {
   margin-bottom: 0 !important;
}

.process-timeline:not(.horizontal)
> .process-timeline-step
> .process-timeline-card {
   width: fit-content;
   max-width: 100%;

    margin: 0 !important;

    align-items: flex-start;

    text-align: left;
}

.process-timeline:not(.horizontal)
.process-timeline-card
> .wp-block-heading {
   font-size: 20px;
}

.process-timeline:not(.horizontal)
.process-timeline-card
>p{
   font-size: 14px;
}

.process-timeline:not(.horizontal)
.process-timeline-card
> .wp-block-image,

.process-timeline:not(.horizontal)
.process-timeline-card
> .image-slider,

.process-timeline:not(.horizontal)
.process-timeline-card
> .before-after,

.process-timeline:not(.horizontal)
.process-timeline-card
> .process-gallery,

.process-timeline:not(.horizontal)
.process-timeline-card
> .annotated-image,

.process-timeline:not(.horizontal)
.process-timeline-card
> .image-navigator,

.process-timeline:not(.horizontal)
.process-timeline-card
> .filter-gallery {
   max-width: 100%;
}

.process-timeline:not(.horizontal)
.process-timeline-card
> .wp-block-image img {
   max-height: 540px;
}

.process-timeline:not(.horizontal)
> .process-timeline-step
.process-timeline-node {
   top: 18px;

    left:
       calc(
          var(--timeline-mobile-line-x)
          - var(--timeline-mobile-card-left)
          - (var(--timeline-node-size) / 2)
       );

    right: auto;

    transform: none;
}

.process-timeline:not(.horizontal)
> .process-timeline-step.is-active
.process-timeline-node {
   left:
      calc(
         var(--timeline-mobile-line-x)
         - var(--timeline-mobile-card-left)
         - (var(--timeline-node-active-size) / 2)
          );
    }

    .process-timeline:not(.horizontal)
    > .process-timeline-step::before {
       top:
         calc(
            18px
            + (var(--timeline-node-size) / 2)
         );

        left:
           calc(
              var(--timeline-mobile-line-x)
              - var(--timeline-mobile-card-left)
              + (var(--timeline-node-size) / 2)
              + 6px
           );

        right: auto;

        width:
          calc(
             var(--timeline-mobile-card-left)
             - var(--timeline-mobile-line-x)
             - (var(--timeline-node-size) / 2)
             - 16px
          );

        height:
          var(--timeline-line-width);

        transform: none;
    }

}

@media (max-width: 700px) {

  .process-timeline.horizontal {
     --horizontal-slot-width: 84vw;
     --horizontal-gap: 52px;

      --horizontal-node-size: 34px;

      --horizontal-track-y: 42px;

      --horizontal-card-top: 116px;
      --horizontal-branch-gap: 12px;

      display: flex !important;

      flex-direction: row;

      gap:
        var(--horizontal-gap);

      width: 100%;

      padding:
        16px
        8vw
        26px
        !important;

      overflow-x: auto;
      overflow-y: hidden;

      scroll-snap-type: x mandatory;

      cursor: auto;
  }

  .process-timeline.horizontal
  > .process-timeline-step {
     flex:
        00
        var(--horizontal-slot-width);
    width:
      var(--horizontal-slot-width);

    scroll-snap-align: center;
}

.process-timeline.horizontal
> .process-timeline-step
> .process-timeline-card {
   max-width: 100%;

    margin:
     var(--horizontal-card-top)
     auto
     0;

    padding:
      var(--timeline-card-padding);
}

.process-timeline.horizontal
.process-timeline-card
> .wp-block-heading {
   font-size: 20px;
}

.process-timeline.horizontal
.process-timeline-card
>p{
   font-size: 14px;
}

.process-timeline.horizontal
.process-timeline-card
> .wp-block-image img {
   max-height: 360px;
}

.process-timeline.horizontal
.process-timeline-card
> .image-slider,

.process-timeline.horizontal
    .process-timeline-card
    > .before-after,

    .process-timeline.horizontal
    .process-timeline-card
    > .process-gallery,

    .process-timeline.horizontal
    .process-timeline-card
    > .annotated-image,

    .process-timeline.horizontal
    .process-timeline-card
    > .image-navigator {
       width:
         calc(
            var(--horizontal-slot-width)
            - (var(--timeline-card-padding) * 2)
         );
    }

}

@media (max-width: 700px) {

    .project-details {
       grid-template-columns:
          repeat(2, minmax(0, 1fr));

        grid-template-rows:
           auto auto auto auto auto;
    }

    .project-details
    > .wp-block-group:nth-child(1) {
       grid-column: 1 / -1;
       grid-row: 1;

        padding: 20px 16px !important;

        border-bottom: 1px solid var(--project-line);
    }

    .project-details
    > .wp-block-group:nth-child(2) {
       grid-column: 1 / -1;
       grid-row: 2;

        padding: 18px 16px !important;

        border-right: 0;
        border-bottom: 1px solid var(--project-line);
    }

    .project-details
> .wp-block-group:nth-child(3) {
   grid-column: 1 / -1;
   grid-row: 3;

    padding: 18px 16px !important;

    border-bottom: 1px solid var(--project-line);
}

.project-details
> .wp-block-group:nth-child(4),

.project-details
> .wp-block-group:nth-child(5),

.project-details
> .wp-block-group:nth-child(6),

.project-details
> .wp-block-group:nth-child(7) {
   gap: 5px !important;

    padding: 14px 8px !important;
}

.project-details
> .wp-block-group:nth-child(4) {
   grid-column: 1;
   grid-row: 4;

    border-right: 1px solid var(--project-line);
    border-bottom: 1px solid var(--project-line);
}

.project-details
> .wp-block-group:nth-child(5) {
   grid-column: 2;
   grid-row: 4;

    border-right: 0;
    border-bottom: 1px solid var(--project-line);
}

.project-details
> .wp-block-group:nth-child(6) {
   grid-column: 1;
   grid-row: 5;

    border-right: 1px solid var(--project-line);
}

.project-details
> .wp-block-group:nth-child(7) {
   grid-column: 2;
   grid-row: 5;
}

.project-details
> .wp-block-group
> .wp-block-heading {
   font-size: 16px;

    letter-spacing: 0.03em;
}

.project-details
> .wp-block-group:nth-child(n+4)
> .wp-block-heading {
   font-size: 11px;

    letter-spacing: 0.065em;
}

.project-details
> .wp-block-group:nth-child(n+4)
>p{
   font-size: 14px;
}

.project-detail-chip {
   font-size: 12px;
}

.project-detail-chip
+ .project-detail-chip::before {
   height: 11px;

    margin: 0 8px;
}


/* Breakdown */

.project-details-breakdown-header {
   align-items: flex-start;

    gap: 12px;

    padding: 14px 16px;
}

.project-details-breakdown-title {
   font-size: 16px;
}

.project-details-breakdown-back {
   padding: 7px 8px;

    font-size: 10px;
}

.project-details-breakdown-content {
   padding: 20px 16px;

    overflow-x: auto;
}

.project-details-breakdown-content
.wp-block-table th,

.project-details-breakdown-content
.wp-block-table td {
   padding: 8px;

    font-size: 13px;
}


/* Structured breakdown */

.project-breakdown-list
> .wp-block-group {
    column-gap: 14px;

    padding:
      14px
      0
      !important;
}

.project-breakdown-list
> .wp-block-group
> p:first-of-type,

.project-breakdown-list
> .wp-block-group
> p:nth-of-type(2) {
   font-size: 14px;
}

.project-breakdown-list
> .wp-block-group:has(> .wp-block-group)
> p:first-of-type,

.project-breakdown-list
> .wp-block-group:has(> .wp-block-group)
> p:nth-of-type(2) {
   padding-bottom: 8px !important;
}

.project-breakdown-list
> .wp-block-group
> .wp-block-group {
   column-gap: 12px;

    width:
      calc(100% - 32px);

    margin:
     0
     16px
     0
     16px
     !important;

    padding:
          7px
          0
          !important;
    }

    .project-breakdown-list
    > .wp-block-group
    > .wp-block-group
    >p{
       font-size: 12px;
    }

    .project-breakdown-list
    > .wp-block-group
    > .wp-block-group
    > p:nth-of-type(2) {
       padding-left: 12px !important;
    }


    /* Generated total */

    .project-details-breakdown-total {
       column-gap: 14px;

        margin-top: 12px;

        padding-top: 14px;
    }

    .project-details-breakdown-total-label,

    .project-details-breakdown-total-value {
       font-size: 14px;
    }

}

@media (max-width: 700px) {

    .resource-card-ui {
       grid-template-columns:
          52px minmax(0, 1fr);

        grid-template-areas:
           "type content"
           "actions actions";

        gap: 14px 16px;

        padding: 14px;
    }

    .resource-card-type {
       width: 52px;
       height: 52px;

        font-size: 11px;
    }

    .resource-card-title {
       font-size: 16px;
    }

    .resource-card-description {
       font-size: 12px;
    }

    .resource-card-actions {
       width: 100%;
    }

    .resource-card-button {
       flex: 1 1 0;
    }

}

@media (max-width: 700px) {

  .gear-closet-interface {
    border-width:
       var(--cd-frame-mobile);

      border-radius:
        var(--cd-radius-mobile);
  }


  .gear-closet-header {
    padding:
       15px 14px
       13px;
  }



  .gear-closet-title {
    font-size: 18px;
  }


  /* ------------------------------------------------------
    MOBILE CATEGORY NAV
    ------------------------------------------------------ */

.gear-closet-nav {
  overflow-x: auto;

    scrollbar-width: none;
}


.gear-closet-nav::-webkit-scrollbar {
  display: none;
}


.gear-closet-nav-button {
  flex:
     1 0 auto;

    min-width: 95px;

    padding:
      12px 13px;

    font-size: 12px;
}


/* ------------------------------------------------------
  MOBILE GROUP GRID
  ------------------------------------------------------ */

.gear-closet-group {
  flex:
     10
     calc(50% - 1px);

    min-width:
      calc(50% - 1px);

    min-height: 105px;

    padding:
      17px 12px;
    border-right:
      1px solid
      var(--gear-border);

    border-bottom:
      1px solid
      var(--gear-border);
}



.gear-closet-group:nth-child(3n) {
  border-right:
     1px solid
     var(--gear-border);
}


.gear-closet-group:nth-child(2n) {
  border-right: 0;
}


.gear-closet-group:nth-child(2n + 1):last-child,
.gear-closet-group:nth-child(2n + 1):nth-last-child(2),
.gear-closet-group:nth-child(2n):last-child {
  border-bottom: 0;
}


.gear-closet-group-name {
  font-size: 13px;
}


.gear-closet-group-count {
  font-size: 12px;
}


/* ------------------------------------------------------
  MOBILE DRILL-DOWN HEADER
  ------------------------------------------------------ */
.gear-closet-view-header {
  gap: 12px;

    padding:
      13px 14px;
}


.gear-closet-view-title {
  font-size: 13px;
}


.gear-closet-back {
  font-size: 12px;
}


/* ------------------------------------------------------
  MOBILE ITEM LIST
  ------------------------------------------------------ */

.gear-closet-item-row {
  column-gap: 14px;

    padding: 14px;
}



.gear-closet-item-name {
  font-size: 13px;
}


.gear-closet-item-prompt {
  font-size: 11px;
}


/* ------------------------------------------------------
  MOBILE ITEM DETAIL

    Image and content return to a stacked layout.
    ------------------------------------------------------ */

.gear-closet-item-content {
  display: block;

    padding:
      16px 14px;
}


.gear-closet-primary-image {
  width: 100%;

    margin:
     0 0 18px
     !important;
}


.gear-closet-primary-image img {
  width: auto;
  max-width: 100%;
  max-height: 360px;

    margin:
     0 auto;

    border-width:
      var(--cd-frame-mobile);

    border-radius:
      var(--cd-radius-mobile);
}


.gear-closet-item-details {
  display: flex;
  flex-direction: column;

    gap: 14px;

    width: 100%;
}
    /* ------------------------------------------------------
      MOBILE PURCHASE BOX
      ------------------------------------------------------ */

    .gear-closet-purchase {
      align-items: stretch;
      flex-direction: column;

        gap: 12px;

        margin-top: 4px;
        padding: 14px;
    }


    .gear-closet-purchase
    .gear-buy-link {
      width: 100%;
    }


    .gear-closet-purchase
    .gear-buy-link
    .wp-block-button__link,

    .gear-closet-purchase
    a.gear-buy-link {
      width: 100%;

        box-sizing: border-box;
    }

}

@media (max-width: 700px) {

    .cd-contact-form {
      padding:
         16px 14px;

        border-width:
          var(--cd-frame-mobile);

        border-radius:
          var(--cd-radius-mobile);
    }


    .cd-contact-title {
      margin-bottom:
         12px !important;

        font-size: 17px;
    }


    .cd-contact-fields {
      display: flex;
      flex-direction: column;

        gap: 9px;
    }


    .cd-contact-field-name,
    .cd-contact-field-email,
    .cd-contact-field-subject,
    .cd-contact-field-message {
      width: 100%;
    }
    textarea.cd-contact-control {
      min-height: 100px;
    }


    .cd-contact-submit {
      width: 100%;
      min-height:
         var(--cd-control-height);

        align-self: auto;
    }

}

@media (max-width: 700px) {

  .find-elsewhere {
     padding:
       16px 14px;

      border-width:
        var(--cd-frame-mobile);

      border-radius:
        var(--cd-radius-mobile);
  }


  .find-elsewhere
  > .wp-block-heading {
     margin-bottom:
       12px !important;

      font-size: 17px;
  }


  .find-elsewhere-links {
     gap: 8px;
  }



  .find-elsewhere-links
  .wp-block-button {
     flex:
        11
        calc(50% - 4px);
  }


  .find-elsewhere-links
  .wp-block-button__link {
     min-height: 42px;

      padding:
        9px 10px;
        font-size: 11px;
    }

}

@media (max-width: 420px) {

    .find-elsewhere-links
    .wp-block-button {
       flex-basis: 100%;
    }

}

@media (max-width: 1500px) {

    .cd-page-router-header {
      grid-template-columns:
         minmax(0, 1fr);

        align-items: start;

        gap: 22px;
    }


    .cd-page-router-navigation {
      flex-direction: row;

        flex-wrap: wrap;

        align-items: center;

        gap: 0;

        margin:
         0
         0
         6px;
    }
    .cd-page-router-button {
      font-size: 16px;
    }


    .cd-page-router-button:not(:last-child)::after {
      content: "/";

        display: inline-block;

        margin:
         0
         14px;

        color:
          var(--cd-silver-dark);
    }

}

@media (max-width: 700px) {

    .cd-page-router-header {
      gap: 14px;

        padding:
          0
          18px;

        margin-bottom: 20px;
    }


    .cd-page-router-number {
      gap: 10px;

        margin-bottom: 10px;
    font-size: 14px;
}


.cd-page-router-number::after {
  width: 40px;
  height: 1px;
}


.cd-page-router-title {
  font-size:
     clamp(
        48px,
        13.5vw,
        82px
     );

    line-height: .82;
}


.cd-page-router-navigation {
  flex-wrap: nowrap;

    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
      5px
      2px
      7px;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
      touch;
}


.cd-page-router-navigation::-webkit-scrollbar {
        display: none;
    }


    .cd-page-router-button {
      flex: 0 0 auto;

        font-size: 10px;

        line-height: 1.4;

        letter-spacing: .13em;

        white-space: nowrap;
    }


    .cd-page-router-button:not(:last-child)::after {
      margin:
         0
         8px;
    }

}

@media (max-width: 700px) {
    .cd-page-router-header {
      padding-left: 18px !important;
      padding-right: 18px !important;
    }

}