/* Circus Daniel Site Kit 1.0.0 — recovered site component styles. */

/* ==========================================================
  VIDEO VIEWER
  ========================================================== */

.video-viewer {
   width: 100%;
   margin: 0;
   box-sizing: border-box;
}


/* ==========================================================
  OUTER GUTENBERG CONTAINER
  ========================================================== */

.video-viewer-container {
   box-sizing: border-box;
}


/* ==========================================================
  AUTHORING SOURCE
  ========================================================== */

.video-viewer-source {
   display: none !important;
}


/* ==========================================================
  PLAYER
  ========================================================== */

.video-viewer-player {
   --video-panel-width: 420px;
   --video-panel-top: 18px;
   --video-handle-size: 44px;
   --video-panel-border: 3px;
    --video-panel-speed: 0.34s;
    --video-annotation-list-height: 215px;
    --video-player-max-height: 760px;

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;
    max-height: var(--video-player-max-height);

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

    margin: 0 auto;

    overflow: visible;

    box-sizing: border-box;

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

    border:
      var(--cd-frame)
      solid
      var(--cd-white);

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

    isolation: isolate;
}


/* ==========================================================
  MAIN
  ========================================================== */

.video-viewer-main {
   display: flex;
   flex-direction: column;
    flex: 1 1 auto;

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

    overflow: hidden;

    background: var(--cd-black);

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


/* ==========================================================
  VIDEO STAGE
  ========================================================== */

.video-viewer-stage {
   position: relative;
   z-index: 1;

    display: flex;

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

    flex: 1 1 auto;

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

    margin: 0;
    padding: 0;

    overflow: hidden;

    line-height: 0;
    background: var(--cd-black);
}


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

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

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

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

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

    line-height: 0;

    background: transparent;
}


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

    width: auto !important;
    height: auto !important;

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

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

    object-fit: contain !important;

    background: transparent;

    cursor: pointer;
}
/* ==========================================================
  GLOBAL CONTROLS
  ========================================================== */

.video-viewer-controls {
   position: relative;
   z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    padding: 10px 12px;

    box-sizing: border-box;

    color: var(--cd-white);

    background:
      linear-gradient(
         to bottom,
         #0b0b0b,
         #000
      );

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

    box-shadow:
      inset 0 1px 0
      rgba(255, 255, 255, 0.05);
}
/* ==========================================================
  TRANSPORT
  ========================================================== */

.video-viewer-transport {
   display: flex;

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

    gap: 6px;

    flex: 0 0 auto;

    width: auto;
    min-width: 0;
}


/* ==========================================================
  CONTROL BUTTONS
  ========================================================== */

.video-viewer-control-button {
   display: inline-flex;

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

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border:
      1px solid
      rgba(255, 255, 255, 0.42);
    border-radius: var(--cd-control-radius);

    color: var(--cd-white);

    background:
      linear-gradient(
         to bottom,
         rgba(255, 255, 255, 0.055),
         rgba(255, 255, 255, 0.015)
      );

    box-shadow:
      inset 0 1px 0
      rgba(255, 255, 255, 0.07);

    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition:
       color var(--cd-transition),
       background var(--cd-transition),
       border-color var(--cd-transition),
       transform var(--cd-transition),
       box-shadow var(--cd-transition);
}



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

    box-shadow:
      0 2px 8px
      rgba(0, 0, 0, 0.35);

    transform: translateY(-1px);
}
.video-viewer-control-button:active {
   transform: translateY(0);
}


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

    min-width: 40px;
    max-width: 40px;

    flex: 0 0 40px;

    font-size: 17px;
}


.video-viewer-transport
.video-viewer-play {
   width: 42px;
   height: 40px;

    min-width: 42px;
    max-width: 42px;

    flex: 0 0 42px;

    font-size: 18px;
}


/* ==========================================================
  TIME
  ========================================================== */

.video-viewer-time {
   display: flex;

    align-items: center;
    gap: 5px;

    flex: 0 0 auto;

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

    font-size: 11px;

    font-variant-numeric: tabular-nums;

    white-space: nowrap;
}


.video-viewer-current-time {
   color: var(--cd-white);
   font-weight: 800;
}



.video-viewer-time-separator {
   opacity: 0.42;
}


/* ==========================================================
  TIMELINE
  ========================================================== */

.video-viewer-timeline {
   position: relative;

    display: flex;

    align-items: center;

    flex: 1 1 auto;

    min-width: 90px;

    height: 34px;
}
.video-viewer-seek {
   --video-progress: 0%;

    position: relative;
    z-index: 1;

    width: 100%;
    height: 4px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 999px;

    outline: none;

    background:
      linear-gradient(
         to right,
         var(--cd-accent) 0%,
         var(--cd-accent) var(--video-progress),
         rgba(255, 255, 255, 0.27) var(--video-progress),
         rgba(255, 255, 255, 0.27) 100%
      );

    box-shadow:
      inset 0 1px 2px
      rgba(0, 0, 0, 0.65);

    cursor: pointer;
}



.video-viewer-seek::-webkit-slider-thumb {
   width: 12px;
   height: 12px;

    appearance: none;
    -webkit-appearance: none;

    border:
      2px solid
      var(--cd-white);

    border-radius: 50%;

    background: var(--cd-accent);

    box-shadow:
      0 1px 5px
      rgba(0, 0, 0, 0.6);

    cursor: pointer;
}


.video-viewer-seek::-moz-range-thumb {
   width: 10px;
   height: 10px;

    border:
      2px solid
      var(--cd-white);

    border-radius: 50%;

    background: var(--cd-accent);

    cursor: pointer;
}


/* ==========================================================
  MARKERS
  ========================================================== */

.video-viewer-markers {
   position: absolute;
   z-index: 2;

    inset: 0 6px;
    pointer-events: none;
}


.video-viewer-marker {
   position: absolute;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
    pointer-events: auto;

    transition:
       height var(--cd-transition),
       background var(--cd-transition),
       transform var(--cd-transition);
}


.video-viewer-marker-point {
   top: 50%;

    width: 8px;
    height: 18px;

    border:
      2px solid
      var(--cd-black);

    border-radius: 3px;

    background: var(--cd-white);

    transform:
       translate(-50%, -50%);
}


.video-viewer-marker-point:hover,
.video-viewer-marker-point:focus-visible,
.video-viewer-marker-point.is-active {
   height: 24px;
   background: var(--cd-accent);
}


.video-viewer-marker-range {
   top: 50%;

    height: 12px;

    border:
      2px solid
      var(--cd-black);

    border-radius: 4px;

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

    transform:
       translateY(-50%);
}


.video-viewer-marker-range:hover,
.video-viewer-marker-range:focus-visible,
.video-viewer-marker-range.is-active {
   height: 18px;
   background: var(--cd-accent);
}


/* ==========================================================
  VOLUME
  ========================================================== */

.video-viewer-volume {
   width: 60px;
   height: 4px;

    flex: 0 0 60px;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border-radius: 999px;

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

    cursor: pointer;
}


.video-viewer-volume::-webkit-slider-thumb,
.video-viewer-speed-slider::-webkit-slider-thumb {
   width: 11px;
   height: 11px;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 50%;

    background: var(--cd-white);

    box-shadow:
      0 1px 4px
      rgba(0, 0, 0, 0.5);
}



.video-viewer-volume::-moz-range-thumb,
.video-viewer-speed-slider::-moz-range-thumb {
   width: 11px;
   height: 11px;

    border: 0;
    border-radius: 50%;

    background: var(--cd-white);
}
/* ==========================================================
  BREAK IT DOWN DISCOVERY
  ========================================================== */

.video-viewer-breakdown-discovery {
   position: absolute;
   z-index: 28;

  top: var(--video-panel-top);

  bottom:
    calc(
       62px +
       var(--video-panel-top)
    );

  display: flex;

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

  width: clamp(64px, 7vw, 100px);

  overflow: hidden;

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

  font-size:
    clamp(28px, 4.5vw, 72px);

  font-weight: 900;
  line-height: 0.82;

  letter-spacing: -0.045em;

  text-transform: uppercase;

  writing-mode: vertical-rl;

  white-space: nowrap;
    opacity: 0;

    pointer-events: none;

    text-shadow:
      0 3px 12px
      rgba(0, 0, 0, 0.85);

    transform: scale(0.94);

    transition:
       opacity 0.18s ease,
       transform 0.24s ease;
}


.video-viewer-player[data-panel-side="right"]
.video-viewer-breakdown-discovery {
   right:
      calc(
         18px +
         var(--video-handle-size) +
         14px
      );
}


.video-viewer-player[data-panel-side="left"]
.video-viewer-breakdown-discovery {
   left:
      calc(
         18px +
         var(--video-handle-size) +
         14px
      );

    transform:
       scale(0.94)
       rotate(180deg);
}


.video-viewer-player:not(.is-breakdown-open):has(
    .video-viewer-breakdown-handle:hover
)
.video-viewer-breakdown-discovery,

.video-viewer-player:not(.is-breakdown-open):has(
   .video-viewer-breakdown-handle:focus-visible
)
.video-viewer-breakdown-discovery {
   opacity: 1;
   transform: scale(1);
}



/* ==========================================================
  BREAKDOWN HANDLE
  ========================================================== */

.video-viewer-breakdown-handle {
   position: absolute;
   z-index: 40;

    top: 50%;

    width: var(--video-handle-size);
    height: var(--video-handle-size);

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    transform: translateY(-50%);
}


.video-viewer-player[data-panel-side="right"]
.video-viewer-breakdown-handle {
   right: 18px;
}
.video-viewer-player[data-panel-side="left"]
.video-viewer-breakdown-handle {
   left: 18px;
}


.video-viewer-player.is-breakdown-open
.video-viewer-breakdown-handle {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}



/* ==========================================================
  ACTUAL DESKTOP HANDLE BUTTON
  ========================================================== */

.video-viewer-breakdown-handle-toggle {
   display: flex;

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

  width: var(--video-handle-size);
  height: var(--video-handle-size);

  margin: 0;
  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  border:
    2px solid
    var(--cd-white);

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

  color:
    var(--cd-white);
    background:
      rgba(0, 0, 0, 0.88);

    box-shadow:
      0 5px 18px
      rgba(0, 0, 0, 0.38),

      inset 0 1px 0
      rgba(255, 255, 255, 0.12);

    font: inherit;

    cursor: pointer;

    box-sizing: border-box;
}



/* Desktop never shows text in this button. */

.video-viewer-breakdown-handle-text {
   display: none;
}


/* Desktop never shows annotation navigation here. */

.video-viewer-mobile-nav {
   display: none;
}



/* ==========================================================
  DESKTOP HANDLE ARROW
  ========================================================== */

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

    width: 12px;
    height: 12px;

    border-top:
      4px solid
      currentColor;

    border-right:
      4px solid
      currentColor;

    border-bottom: 0;

    box-sizing: border-box;
}


.video-viewer-player[data-panel-side="right"]
.video-viewer-breakdown-handle-arrow {
   transform:
      rotate(45deg);
}



.video-viewer-player[data-panel-side="left"]
.video-viewer-breakdown-handle-arrow {
   transform:
      rotate(-135deg);
}

/* ==========================================================
  BREAKDOWN PANEL — DESKTOP
  ========================================================== */

.video-viewer-breakdown {
   position: absolute;
   z-index: 30;

    top: var(--video-panel-top);

    bottom:
      calc(
         62px +
         var(--video-panel-top)
      );

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

width: var(--video-panel-width);

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

overflow: hidden;

box-sizing: border-box;

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

border:
  var(--video-panel-border)
  solid
  var(--cd-black);

border-radius: 8px;

box-shadow:
  0 20px 55px
  rgba(0, 0, 0, 0.46),

  0 7px 18px
  rgba(0, 0, 0, 0.30);

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

transition:
   transform
   var(--video-panel-speed)
   cubic-bezier(.18, .82, .24, 1),

  opacity 0.15s ease,

  left 0.28s
      cubic-bezier(.2, .8, .2, 1),

      right 0.28s
      cubic-bezier(.2, .8, .2, 1);
}


.video-viewer-player[data-panel-side="right"]
.video-viewer-breakdown {
   right:
      calc(
         0px -
         var(--video-panel-width) / 2
      );

    transform: scale(0.08);
}


.video-viewer-player[data-panel-side="left"]
.video-viewer-breakdown {
   left:
      calc(
         0px -
         var(--video-panel-width) / 2
      );

    transform: scale(0.08);
}


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

    border-radius: 5px;

    transform: scale(1);
}


/* ==========================================================
    PANEL HEADER
    ========================================================== */

.video-viewer-breakdown-header {
   display: flex;

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

    gap: 12px;

    min-height: 42px;

    padding:
      7px 8px
      7px 13px;

    box-sizing: border-box;

    color: var(--cd-white);

    background:
      linear-gradient(
         to bottom,
         #242424,
         #171717
      );

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


.video-viewer-breakdown-title {
   min-width: 0;

    overflow: hidden;

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

    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    text-transform: uppercase;

    white-space: nowrap;
}


.video-viewer-breakdown-tools {
   display: flex;
   align-items: center;
   gap: 5px;
}



.video-viewer-breakdown-tool {
   display: inline-flex;

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

    width: 28px;
    height: 28px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

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

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

    color: var(--cd-white);

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

    font: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}


.video-viewer-breakdown-move-icon {
   position: relative;

    display: block;

    width: 15px;
    height: 10px;
}


.video-viewer-breakdown-move-icon::before,
.video-viewer-breakdown-move-icon::after {
   position: absolute;

    top: 50%;

    width: 7px;
    height: 7px;

    content: '';

    border-top:
      2px solid
      currentColor;

    border-right:
      2px solid
      currentColor;
}


.video-viewer-breakdown-move-icon::before {
   left: 0;

    transform:
       translateY(-50%)
       rotate(-135deg);
}
.video-viewer-breakdown-move-icon::after {
   right: 0;

    transform:
       translateY(-50%)
       rotate(45deg);
}


/* ==========================================================
  DESKTOP CONTENT
  ========================================================== */

/* ==========================================================

    PANEL CONTENT WRAPPER — DESKTOP

    ========================================================== */

@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;

  }

}
/* ==========================================================
  ANNOTATION DETAIL — DESKTOP
  ========================================================== */

.video-viewer-annotation-detail {
   min-width: 0;
   min-height: 0;

  padding: 20px 24px;
    box-sizing: border-box;

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

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


.video-viewer-annotation-detail-title {
   margin:
     0 0 14px 0;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}



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

    box-sizing: border-box;
}


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


.video-viewer-annotation-content > :last-child {
   margin-bottom: 0;
}
/* ==========================================================
  ANNOTATION MODULE
  ========================================================== */

.video-viewer-annotation-module {
   display: grid;
    grid-template-rows:
       auto
       var(--video-annotation-list-height);

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

    overflow: hidden;

    color: var(--cd-white);
    background: #111;

    border-top:
      2px solid
      var(--cd-black);
}


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



.video-viewer-annotation-module.is-collapsed
.video-viewer-annotation-list {
   height: 0;

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


.video-viewer-annotation-module-header {
   display: flex;

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

    gap: 12px;
    min-height: 38px;

    padding:
      7px 10px
      7px 12px;

    box-sizing: border-box;

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

    background: #1a1a1a;

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


.video-viewer-annotation-module-title {
   font-size: 9px;
   font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}



.video-viewer-annotation-header-tools {
   display: flex;
   align-items: center;
   gap: 10px;
}


.video-viewer-annotation-position {
   font-size: 9px;
   font-weight: 800;

    font-variant-numeric: tabular-nums;
}
.video-viewer-annotation-module-toggle {
   position: relative;

    display: inline-flex;

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

    width: 30px;
    height: 26px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

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

    border-radius: 5px;

    color: var(--cd-white);

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

    cursor: pointer;
}


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

    width: 8px;
    height: 8px;

    border-right:
      2px solid
      currentColor;
    border-bottom:
      2px solid
      currentColor;

    transform:
       translateY(-2px)
       rotate(45deg);
}


.video-viewer-annotation-module.is-collapsed
.video-viewer-annotation-module-toggle-icon {
   transform:
      translateY(2px)
      rotate(225deg);
}



/* ==========================================================
  ANNOTATION LIST
  ========================================================== */

.video-viewer-annotation-list {
   height: var(--video-annotation-list-height);

    min-height: 0;

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

    scrollbar-width: thin;

    scrollbar-color:
      rgba(255, 255, 255, 0.30)
      transparent;
}


.video-viewer-annotation {
   display: grid;

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

    align-items: center;

    gap: 8px;

    width: 100%;

    margin: 0;

    padding: 9px 12px;

    appearance: none;
    -webkit-appearance: none;

    border: 0;

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

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

    background: transparent;

    font: inherit;

    text-align: left;

    cursor: pointer;
}


.video-viewer-annotation.is-active {
   color: var(--cd-white);

    background:
      linear-gradient(
         to right,
         rgba(236, 28, 36, 0.19),
         rgba(255, 255, 255, 0.06)
      );
    box-shadow:
      inset 4px 0 0
      var(--cd-accent);

    padding-left: 15px;
}



.video-viewer-annotation-time {
   color:
     rgba(255, 255, 255, 0.56);

    font-size: 10px;
    font-weight: 700;

    font-variant-numeric: tabular-nums;
}


.video-viewer-annotation-title {
   min-width: 0;

    font-size: 12px;
    font-weight: 750;
}


/* ==========================================================
  SPECIAL CONTROLS
  ========================================================== */

.video-viewer-special-controls {
   position: relative;

    display: grid;

    grid-template-rows:
       0
       auto;

    width: 100%;

    min-width: 0;
    overflow: visible;

    color: var(--cd-white);

    background: #111;

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

    transition:
       grid-template-rows
       0.18s ease;
}


.video-viewer-special-controls.is-speed-open {
   grid-template-rows:
      42px
      auto;
}


/* ==========================================================
  SPEED POPOVER
  ========================================================== */

.video-viewer-speed-control {
   display: grid;

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

    align-items: center;

    gap: 12px;

    min-height: 0;

    padding:
      0 14px;
    overflow: hidden;

    box-sizing: border-box;

    background: #090909;

    opacity: 0;

    pointer-events: none;

    transition:
       opacity 0.14s ease;
}



.video-viewer-special-controls.is-speed-open
.video-viewer-speed-control {
   opacity: 1;
   pointer-events: auto;
}


.video-viewer-speed-slider {
   width: 100%;
   height: 4px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 999px;

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

    cursor: pointer;
}


.video-viewer-speed-readout {
   min-width: 44px;
    color:
      rgba(255, 255, 255, 0.78);

    font-size: 10px;
    font-weight: 800;

    text-align: right;

    font-variant-numeric: tabular-nums;
}


/* ==========================================================
  SPECIAL ACTION ROW
  ========================================================== */

.video-viewer-special-actions {
   display: grid;

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

    gap: 6px;

    padding: 9px;

    background: #151515;
}


.video-viewer-special-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);

    font: inherit;
    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}



.video-viewer-special-action:disabled {
   opacity: 0.22;
   cursor: default;
}


.video-viewer-play-section {
   color: var(--cd-black);

    background: var(--cd-white);

    border-color: var(--cd-white);
}



.video-viewer-speed-button {
   font-size: 11px;

    font-variant-numeric: tabular-nums;
}


/* ==========================================================
    DESKTOP FULLSCREEN
    ========================================================== */

.video-viewer-player:fullscreen,
.video-viewer-player.is-simulated-fullscreen {
   width: 100%;
   height: 100%;
   max-width: none;
   max-height: none;

    overflow: hidden;

    border: 0;
    border-radius: 0;

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


.video-viewer-player:fullscreen
.video-viewer-main,
.video-viewer-player.is-simulated-fullscreen
.video-viewer-main {
   width: 100%;
   height: 100%;

    border-radius: 0;
}


.video-viewer-player:fullscreen[data-panel-side="right"]
.video-viewer-breakdown {
   right: 24px;
   left: auto;
}



.video-viewer-player:fullscreen[data-panel-side="left"]
.video-viewer-breakdown {
   left: 24px;
   right: auto;
}
html.video-viewer-fullscreen-lock,
body.video-viewer-fullscreen-lock {
  overflow: hidden !important;
}


.video-viewer-player.is-simulated-fullscreen {
   position: fixed !important;

    z-index: 999999 !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
}


/* ==========================================================
  MEDIUM DESKTOP
  ========================================================== */

@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;
    }

}


/* ==========================================================
  MOBILE
  ========================================================== */

@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;
  }

}
/* ==========================================================
  MOBILE FULLSCREEN — VIDEO HEIGHT
  ========================================================== */

@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;
  }
}
/* ==========================================================
  MOBILE FULLSCREEN — REMOVE FLEXIBLE EMPTY SPACE
  ========================================================== */

@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;
  }
}
/* ==========================================================
  VERY SMALL SCREENS
  ========================================================== */

@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;
    }

}


/* ==========================================================
  REDUCED MOTION
  ========================================================== */

@media (
     prefers-reduced-motion:
     reduce
){

     .video-viewer-player *,
     .video-viewer-player *::before,
     .video-viewer-player *::after {
        scroll-behavior: auto !important;

         transition-duration:
            0.001ms !important;

         animation-duration:
           0.001ms !important;
     }

}

/* ==========================================================
  01. PROCESS TIMELINE
  ========================================================== */

.process-timeline {
   --timeline-accent: var(--cd-accent);
   --timeline-line: rgba(0, 0, 0, 0.28);
   --timeline-line-width: 3px;

    --timeline-card-border: rgba(0, 0, 0, 0.22);
    --timeline-card-radius: var(--cd-radius);

    --timeline-node-size: 38px;
    --timeline-node-active-size: 48px;

    --timeline-content-gap: 16px;
    --timeline-card-padding: 12px;

    position: relative;
    width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
}



/* ==========================================================
  SHARED STEP
  ========================================================== */

.process-timeline
> .process-timeline-step {
   position: relative;
   box-sizing: border-box;
}

.process-timeline
> .process-timeline-step:focus {
   outline: none;
}

.process-timeline
> .process-timeline-step:focus-visible
> .process-timeline-card {
   outline: 2px solid var(--timeline-accent);
   outline-offset: 4px;
}


/* ==========================================================
  SHARED CARD
  ========================================================== */

.process-timeline-card {
   display: flex !important;
   flex-direction: column;

    gap: var(--timeline-content-gap);

    width: fit-content;
    max-width: 100%;

    margin: 0;

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

    box-sizing: border-box;

    border: 1px solid var(--timeline-card-border);
    border-radius: var(--timeline-card-radius);

    background: inherit;

    transition:
       border-color var(--cd-transition),
       box-shadow var(--cd-transition);
}

.process-timeline
> .process-timeline-step.is-active
> .process-timeline-card {
   border-color: var(--timeline-accent);
   box-shadow: 0 0 0 1px var(--timeline-accent);
}


/* ==========================================================
  SHARED NODE
  ========================================================== */

.process-timeline
.process-timeline-node {
   position: absolute;

    z-index: 5;

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

    width: var(--timeline-node-size);
    height: var(--timeline-node-size);
    min-width: var(--timeline-node-size);

    box-sizing: border-box;

    padding: 0 8px;

    border: 3px solid var(--timeline-accent);
    border-radius: 999px;

    background: var(--cd-white);

    color: var(--timeline-accent);

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    box-shadow: 0 0 0 5px var(--cd-white);

    transition:
       width var(--cd-transition),
       height var(--cd-transition),
       min-width var(--cd-transition),
      font-size var(--cd-transition),
      border-width var(--cd-transition);
}

.process-timeline
.process-timeline-node-label {
   width: auto;
   min-width: var(--timeline-node-size);
}

.process-timeline
> .process-timeline-step.is-active
.process-timeline-node {
   width: var(--timeline-node-active-size);
   height: var(--timeline-node-active-size);

    min-width: var(--timeline-node-active-size);

    border-width: 4px;

    font-size: 15px;
}

.process-timeline
> .process-timeline-step.is-active
.process-timeline-node-label {
   width: auto;

    min-width: var(--timeline-node-active-size);

    padding-left: 10px;
    padding-right: 10px;
}


/* ==========================================================
  SHARED CARD TYPOGRAPHY
  ========================================================== */

.process-timeline-card
> .wp-block-heading {
   width: auto;
   max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    color: inherit;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

.process-timeline-card
>p{
   width: auto;
   max-width: 100%;

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

    color: inherit;

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



/* ==========================================================
  SHARED ORDINARY IMAGE TREATMENT
  ========================================================== */

.process-timeline-card
> .wp-block-image {
   box-sizing: border-box;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    overflow: hidden;

    border: 8px solid var(--cd-black);
    border-radius: var(--cd-radius);

    background: var(--cd-black);
}
.process-timeline-card
> .wp-block-image img {
   display: block;

    width: auto;
    height: auto;

    max-width: 100%;

    margin: 0;

    border: 0;
    border-radius: 0;

    object-fit: contain;

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


/* ==========================================================
  SHARED NESTED COMPONENTS
  ========================================================== */

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

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

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

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

.process-timeline-card
> .image-navigator,

.process-timeline-card
> .filter-gallery {
   max-width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    box-sizing: border-box;
}


/* ==========================================================
  VERTICAL TIMELINE
  ========================================================== */

.process-timeline:not(.horizontal) {
   --timeline-gap: 136px;
   --timeline-side-padding: 28px;
   --timeline-card-line-gap: 20px;

    display: grid !important;

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

    column-gap: var(--timeline-gap);
    row-gap: 68px;

    padding:
      30px
      var(--timeline-side-padding)
      !important;
}



/* ==========================================================
  VERTICAL MAIN LINE
  ========================================================== */

.process-timeline:not(.horizontal)::before {
   content: "";

    position: absolute;

    z-index: 0;
    top:
      calc(
         30px
         + var(--timeline-node-size) / 2
      );

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

    left: 50%;

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

    transform: translateX(-50%);

    background: var(--timeline-line);
}


/* ==========================================================
  VERTICAL STEP SLOTS
  ========================================================== */

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

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

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(odd) {
   grid-column: 1;
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(even) {
   grid-column: 2;
}
/* ==========================================================
  VERTICAL CARDS
  ========================================================== */

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

    max-width:
     calc(
        100%
        - var(--timeline-card-line-gap)
     );
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(odd)
> .process-timeline-card {
   margin-right:
     var(--timeline-card-line-gap);

    margin-left: auto;

    align-items: flex-end;

    text-align: right;
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(even)
> .process-timeline-card {
   margin-right: auto;

    margin-left:
     var(--timeline-card-line-gap);

    align-items: flex-start;

    text-align: left;
}
/* ==========================================================
  VERTICAL MEDIA
  ========================================================== */

.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%;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    box-sizing: border-box;
}

.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 {
   width: 100%;
}

.process-timeline:not(.horizontal)
.process-timeline-card
> .wp-block-image {
   display: flex;

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

    width: fit-content;
    max-width: 100%;

    align-self: inherit;
}

.process-timeline:not(.horizontal)
.process-timeline-card
> .wp-block-image img {
   width: auto;
   height: auto;

    max-width: 100%;
    max-height: 620px;

    object-fit: contain;
}


/* ==========================================================
  VERTICAL NODE
  ========================================================== */

.process-timeline:not(.horizontal)
.process-timeline-node {
   top: 50%;

    transform:
       translateY(-50%);
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(odd)
.process-timeline-node {
   right:
      calc(
         (var(--timeline-gap) / -2)
         - (var(--timeline-node-size) / 2)
      );
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(even)
.process-timeline-node {
   left:
      calc(
         (var(--timeline-gap) / -2)
         - (var(--timeline-node-size) / 2)
      );
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(odd).is-active
.process-timeline-node {
   right:
      calc(
        (var(--timeline-gap) / -2)
           - (var(--timeline-node-active-size) / 2)
      );
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(even).is-active
.process-timeline-node {
   left:
      calc(
         (var(--timeline-gap) / -2)
         - (var(--timeline-node-active-size) / 2)
      );
}


/* ==========================================================
  VERTICAL CONNECTORS
  ========================================================== */

.process-timeline:not(.horizontal)
> .process-timeline-step::before {
   content: "";

    position: absolute;

    z-index: 0;

    top: 50%;

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

    transform: translateY(-50%);

    background: var(--timeline-line);
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(odd)::before {
   right:
      calc(
         6px
         - (var(--timeline-gap) / 2)
      );
    width:
      calc(
         (var(--timeline-gap) / 2)
         - (var(--timeline-node-size) / 2)
         - 13px
      );
}

.process-timeline:not(.horizontal)
> .process-timeline-step:nth-child(even)::before {
   left:
      calc(
         6px
         - (var(--timeline-gap) / 2)
      );

    width:
      calc(
         (var(--timeline-gap) / 2)
         - (var(--timeline-node-size) / 2)
         - 13px
      );
}


/* ==========================================================
  VERTICAL MOBILE
  ========================================================== */

@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;
    }

}


/* ==========================================================
  HORIZONTAL TIMELINE
  ========================================================== */

.process-timeline.horizontal {
   --horizontal-slot-width: 460px;
--horizontal-gap: 92px;

--horizontal-node-size:
  var(--timeline-node-size);

--horizontal-track-y: 48px;

--horizontal-branch-gap: 14px;
--horizontal-card-top: 128px;

position: relative;

display: flex !important;

flex-direction: row;
align-items: flex-start;

gap: var(--horizontal-gap);

width: 100%;

margin: 0 !important;

padding:
  20px
  max(
     32px,
     calc(
       50%
       - (var(--horizontal-slot-width) / 2)
     )
  )
  32px
  !important;

box-sizing: border-box;

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

scroll-snap-type: x proximity;
scroll-behavior: smooth;

scrollbar-width: thin;
    cursor: grab;

    touch-action: pan-x pan-y;
}

.process-timeline.horizontal.is-dragging {
   cursor: grabbing;
   user-select: none;
}

.process-timeline.horizontal.is-drag-moving {
   scroll-snap-type: none;
   scroll-behavior: auto;
}

.process-timeline.horizontal::before {
   content: none !important;
}



/* ==========================================================
  HORIZONTAL STEP SLOTS
  ========================================================== */

.process-timeline.horizontal
> .process-timeline-step {
   position: relative;

    flex:
       00
       var(--horizontal-slot-width);

    width:
      var(--horizontal-slot-width);

    min-width: 0;

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

    box-sizing: border-box;

    scroll-snap-align: center;
}


/* ==========================================================
  HORIZONTAL CARDS
  ========================================================== */

.process-timeline.horizontal
> .process-timeline-step
> .process-timeline-card {
   width: fit-content;

    max-width: 100%;

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

    align-items: stretch;

    text-align: left;
}


/* ==========================================================
  HORIZONTAL TRACK
  ========================================================== */

.process-timeline.horizontal
> .process-timeline-step::after {
   content: "";

    position: absolute;

    z-index: 1;

    top: var(--horizontal-track-y);

    left: 50%;

    width:
      calc(
        100%
           + var(--horizontal-gap)
      );

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

    background:
      var(--timeline-line);
}

.process-timeline.horizontal
> .process-timeline-step:last-child::after {
   content: none;
}


/* ==========================================================
  HORIZONTAL CONNECTOR
  ========================================================== */

.process-timeline.horizontal
> .process-timeline-step::before {
   content: "";

    position: absolute;

    z-index: 2;

    top:
      calc(
         var(--horizontal-track-y)
         + (var(--horizontal-node-size) / 2)
      );

    left: 50%;

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

    height:
      calc(
        var(--horizontal-card-top)
        - var(--horizontal-track-y)
        - (var(--horizontal-node-size) / 2)
           - var(--horizontal-branch-gap)
      );

    transform:
       translateX(-50%);

    background:
      var(--timeline-line);
}



/* ==========================================================
  HORIZONTAL NODE
  ========================================================== */

.process-timeline.horizontal
.process-timeline-node {
   top:
     calc(
        var(--horizontal-track-y)
        - (var(--horizontal-node-size) / 2)
     );

    left: 50%;

    right: auto;
    bottom: auto;

    transform:
       translateX(-50%);
}


/* ==========================================================
  HORIZONTAL TYPOGRAPHY
  ========================================================== */

.process-timeline.horizontal
.process-timeline-card
> .wp-block-heading {
   text-align: center;
}
/* ==========================================================
  HORIZONTAL MEDIA
  ========================================================== */

.process-timeline.horizontal
.process-timeline-card
> .wp-block-image,

.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,

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

.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)
     );
}

.process-timeline.horizontal
.process-timeline-card
> .wp-block-image {
   display: flex;

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

    width: fit-content;

    align-self: center;
}

.process-timeline.horizontal
.process-timeline-card
> .wp-block-image img {
   width: auto;
   height: auto;

    max-width: 100%;
    max-height: 420px;

    object-fit: contain;
}


/* ==========================================================
 HORIZONTAL MOBILE
 ========================================================== */

@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)
         );
    }

}



/* ==========================================================
  TIMELINE REDUCED MOTION
  ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .process-timeline.horizontal {
       scroll-behavior: auto;
    }

    .process-timeline
    .process-timeline-node,

    .process-timeline
    .process-timeline-card {
       transition: none;
    }

}

/* ==========================================================
  02. PROJECT DETAILS
  ========================================================== */

.project-details {
   --project-line: rgba(0, 0, 0, 0.35);

    position: relative;

    display: grid !important;

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

    grid-template-rows:
       auto auto auto;

    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;

    width: 100%;

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

    box-sizing: border-box;

    border: 1px solid var(--project-line);
    border-radius: 8px;

    overflow: hidden;
}


.project-details::before,
.project-details::after {
   content: none !important;

    display: none !important;
}
.project-details > .wp-block-group {
   position: relative;

    display: flex !important;

    flex-direction: column;

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

    gap: 10px !important;

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

    margin: 0 !important;

    box-sizing: border-box;
}


/* ==========================================================
  MATERIALS
  ========================================================== */

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

    padding: 24px 28px !important;

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


/* ==========================================================
  TOOLS / SKILLS
  ========================================================== */

.project-details
> .wp-block-group:nth-child(2),
.project-details
> .wp-block-group:nth-child(3) {
   grid-row: 2;

    padding: 22px 28px !important;

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


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

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


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


/* ==========================================================
  SPECS
  ========================================================== */

.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) {
   grid-row: 3;

    gap: 6px !important;
    padding: 16px 10px !important;
}



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

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


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

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



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

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


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



/* ==========================================================
  HEADINGS
  ========================================================== */

.project-details
> .wp-block-group
> .wp-block-heading {
   width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    color: inherit;

    text-align: center;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


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

    letter-spacing: 0.07em;

    opacity: 0.72;
}


/* ==========================================================
  VALUES
  ========================================================== */

.project-details
> .wp-block-group:nth-child(n+4)
>p{
   width: 100%;

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

    color: inherit;
    text-align: center;

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


/* ==========================================================
  GENERATED LISTS
  ========================================================== */

.project-details-source {
   display: none !important;
}


.project-detail-items {
   display: flex;

    flex-wrap: wrap;

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

    row-gap: 7px;

    width: 100%;

    margin: 0;
    padding: 0;
}


.project-detail-chip {
   display: inline-flex;

    align-items: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: none;

    color: inherit;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;

    white-space: nowrap;
}



.project-detail-chip
+ .project-detail-chip::before {
   content: "";

    display: block;

    flex: 0 0 auto;

    width: 1px;
    height: 12px;

    margin: 0 10px;

    background: currentColor;

    opacity: 0.65;
}


.project-detail-chip.row-start::before {
   content: none !important;

    display: none !important;

    margin: 0 !important;
}


/* ==========================================================
  BREAKDOWN SOURCE
 ========================================================== */

.project-details-breakdown-source {
   display: none !important;
}


/* ==========================================================
  INTERACTIVE DETAIL CELLS
  ========================================================== */

.project-details
> .wp-block-group.has-breakdown {
   cursor: pointer;
}



.project-details-breakdown-prompt {
   position: absolute;

  z-index: 5;

  inset: 0;

  display: flex;

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

  box-sizing: border-box;

  padding: 12px;

  background: var(--cd-black);

  color: var(--cd-white);

  text-align: center;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.06em;
    text-transform: uppercase;

    opacity: 0;

    pointer-events: none;

    transition:
       opacity var(--cd-transition);
}


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

    .project-details
    > .wp-block-group.has-breakdown:hover
    > .project-details-breakdown-prompt {
       opacity: 1;
    }

}


.project-details
> .wp-block-group.has-breakdown:focus-visible {
   outline: none;
}


.project-details
> .wp-block-group.has-breakdown:focus-visible
> .project-details-breakdown-prompt {
   opacity: 1;
}


/* ==========================================================
  TOUCH / NON-HOVER BREAKDOWN INDICATOR
  ========================================================== */

.project-details-breakdown-touch-label {
   display: none;
}
@media (hover: none) {

    .project-details
    > .wp-block-group.has-breakdown
    .project-details-breakdown-touch-label {
       display: block;

        width: 100%;

        margin: 2px 0 0;

        color: inherit;

        text-align: center;

        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;

        letter-spacing: 0.05em;

        text-transform: uppercase;

        opacity: 0.65;
    }

}


/* ==========================================================
  BREAKDOWN VIEW
  ========================================================== */

.project-details.is-showing-breakdown {
   display: block !important;

    min-height: 0;
}


.project-details.is-showing-breakdown
> .wp-block-group {
    display: none !important;
}


.project-details
> .project-details-breakdown {
   display: none;
}



.project-details.is-showing-breakdown
> .project-details-breakdown {
   display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background: inherit;

    color: inherit;
}


/* ==========================================================
  BREAKDOWN HEADER
  ========================================================== */

.project-details-breakdown-header {
   display: flex;

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

    gap: 20px;

    width: 100%;

    box-sizing: border-box;

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


.project-details-breakdown-title {
   min-width: 0;

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

    color: inherit;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.project-details-breakdown-back {
   flex: 0 0 auto;

    margin: 0;
    padding: 7px 10px;

    border: 1px solid currentColor;
    border-radius: var(--cd-control-radius);

    background: transparent;

    color: inherit;

    font: inherit;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    cursor: pointer;
}


.project-details-breakdown-back:hover {
   background: var(--cd-black);

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



.project-details-breakdown-back:focus-visible {
   outline: 2px solid var(--cd-accent);
   outline-offset: 2px;
}


/* ==========================================================
  BREAKDOWN CONTENT
  ========================================================== */

.project-details-breakdown-content {
   display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 24px 28px;
}


.project-details-breakdown-content
> :first-child {
   margin-top: 0 !important;
}


.project-details-breakdown-content
> :last-child {
   margin-bottom: 0 !important;
}



/* Tables */

.project-details-breakdown-content
.wp-block-table {
   width: 100%;

    margin-top: 0;
    margin-bottom: 0;
}


.project-details-breakdown-content
.wp-block-table table {
   width: 100%;

    border-collapse: collapse;
}


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

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

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

    text-align: left;
    vertical-align: top;
}


/* ==========================================================
  STRUCTURED BREAKDOWN LIST
  ========================================================== */

.project-breakdown-list {
   display: flex !important;

    flex-direction: column;
    width: 100%;

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

    gap: 0 !important;
}


/* ==========================================================
  TOP-LEVEL BREAKDOWN ROWS
  ========================================================== */

.project-breakdown-list
> .wp-block-group {
   display: grid !important;

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

    align-items: baseline;

    column-gap: 24px;
    row-gap: 0;

    width: 100%;

    margin: 0 !important;

    padding:
      16px
      0
      !important;

    box-sizing: border-box;

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


.project-breakdown-list
> .wp-block-group:last-child {
   border-bottom: 0;
}



/* ==========================================================
  TOP-LEVEL LABEL + VALUE
  ========================================================== */

.project-breakdown-list
> .wp-block-group
>p{
   margin: 0 !important;
   padding: 0 !important;

    color: inherit;

    line-height: 1.35;
}



.project-breakdown-list
> .wp-block-group
> p:first-of-type {
   grid-column: 1;

    font-size: 15px;
    font-weight: 700;
}


.project-breakdown-list
> .wp-block-group
> p:nth-of-type(2) {
   grid-column: 2;

    text-align: right;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}
/* ==========================================================
  ROWS WITH CHILD BREAKDOWNS
  ========================================================== */

.project-breakdown-list
> .wp-block-group:has(> .wp-block-group) {
   padding-bottom: 12px !important;
}


.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: 10px !important;
}


/* ==========================================================
  CHILD LINE ITEMS
  ========================================================== */

/*
 * Child rows are inset on BOTH sides.
 *
 * Left inset establishes hierarchy.
 * Right inset moves their values slightly left of
 * the section-total column.
 */

.project-breakdown-list
> .wp-block-group
> .wp-block-group {
   grid-column: 1 / -1;

  display: grid !important;

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

    column-gap: 24px;

    width:
      calc(100% - 56px);

    margin:
     0
     28px
     0
     28px
     !important;

    padding:
      8px
      0
      !important;

    box-sizing: border-box;

    border-top:
      1px solid
      rgba(0, 0, 0, 0.10);
}



.project-breakdown-list
> .wp-block-group
> .wp-block-group:first-of-type {
   border-top-color:
     rgba(0, 0, 0, 0.18);
}


/* ==========================================================
  CHILD LABEL + VALUE
  ========================================================== */

.project-breakdown-list
> .wp-block-group
> .wp-block-group
>p{
    margin: 0 !important;
    padding: 0 !important;

    color: inherit;

    font-size: 13px;
    line-height: 1.35;
}


.project-breakdown-list
> .wp-block-group
> .wp-block-group
> p:first-of-type {
   grid-column: 1;

    font-weight: 400;
}


.project-breakdown-list
> .wp-block-group
> .wp-block-group
> p:nth-of-type(2) {
   grid-column: 2;

    padding-left: 20px !important;

    text-align: right;

    font-weight: 500;

    white-space: nowrap;
}


/* ==========================================================
  GENERATED TOTAL
  ========================================================== */

.project-details-breakdown-total {
   display: grid;

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

    align-items: baseline;

    column-gap: 24px;

    width: 100%;

    margin:
     14px
     0
     0;

    padding:
      16px
      0
      0;

    box-sizing: border-box;

    border-top:
      2px solid
      var(--cd-black);
}


.project-details-breakdown-total-label,

.project-details-breakdown-total-value {
   margin: 0;
   padding: 0;

    color: inherit;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}
.project-details-breakdown-total-value {
   text-align: right;

    white-space: nowrap;
}


/* ==========================================================
  PROJECT DETAILS MOBILE
  ========================================================== */

@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;
    }

}


/* ==========================================================
  PROJECT DETAILS REDUCED MOTION
  ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .project-details-breakdown-prompt {
       transition: none;
    }

}

/* ==========================================================
  03. RESOURCE CARD
  ========================================================== */

.resource-card {
   width: 100%;

    box-sizing: border-box;

    margin: 24px 0;
    padding: 0;
}


.resource-card-ui {
   display: grid;

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

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

    align-items: center;

    gap: 20px;

    box-sizing: border-box;

    padding: 18px;

    background: var(--cd-black);

    color: var(--cd-white);

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



/* Type */

.resource-card-type {
   grid-area: type;

    display: flex;

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

    width: 64px;
    height: 64px;

    box-sizing: border-box;

    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 6px;

    color: var(--cd-white);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* Content */

.resource-card-content {
   grid-area: content;

    min-width: 0;
}


.resource-card-title {
   margin: 0 0 5px;
    color: var(--cd-white);

    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}



.resource-card-description {
   margin: 0;

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

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


/* Actions */

.resource-card-actions {
   grid-area: actions;

    display: flex;

    align-items: center;

    gap: 8px;
}


.resource-card-button {
   display: inline-flex;

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

    min-height: var(--cd-control-height);

    box-sizing: border-box;

    padding: 0 14px;
    border: 1px solid var(--cd-border-light);
    border-radius: var(--cd-control-radius);

    background: transparent;

    color: var(--cd-white) !important;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;
}


.resource-card-button:hover,
.resource-card-button:focus-visible {
   border-color: var(--cd-accent);

    color: var(--cd-accent) !important;
}


.resource-card-button:focus-visible {
   outline: 2px solid var(--cd-white);

    outline-offset: 2px;
}



.resource-card-button.is-download {
   border-color: var(--cd-accent);

    background: var(--cd-accent);

    color: var(--cd-white) !important;
}


.resource-card-button.is-download:hover,
.resource-card-button.is-download:focus-visible {
    background: transparent;

    color: var(--cd-accent) !important;
}


.resource-card-source {
   display: none !important;
}


/* ==========================================================
  RESOURCE CARD — LIGHT
  ========================================================== */

.resource-card.resource-card-light
.resource-card-ui {
   background: var(--cd-white);

    color: var(--cd-black);

    border: 2px solid var(--cd-black);
}


.resource-card.resource-card-light
.resource-card-type {
   border-color: var(--cd-black);

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


.resource-card.resource-card-light
.resource-card-title {
   color: var(--cd-black);
}


.resource-card.resource-card-light
.resource-card-description {
   color: var(--cd-text-dark-secondary);
}
.resource-card.resource-card-light
.resource-card-meta {
   color: var(--cd-text-dark-muted);
}



.resource-card.resource-card-light
.resource-card-button {
   border-color: var(--cd-black);

    background: transparent;

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


.resource-card.resource-card-light
.resource-card-button:hover,

.resource-card.resource-card-light
.resource-card-button:focus-visible {
   border-color: var(--cd-accent);

    color: var(--cd-accent) !important;
}


.resource-card.resource-card-light
.resource-card-button.is-download {
   border-color: var(--cd-black);

    background: var(--cd-black);

    color: var(--cd-white) !important;
}



.resource-card.resource-card-light
.resource-card-button.is-download:hover,

.resource-card.resource-card-light
.resource-card-button.is-download:focus-visible {
    border-color: var(--cd-accent);

    background: var(--cd-accent);

    color: var(--cd-white) !important;
}


.resource-card.resource-card-light
.resource-card-button:focus-visible {
   outline-color: var(--cd-black);
}


/* Resource Card mobile */

@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;
    }

}

/* ==========================================================
  GEAR CLOSET
  ========================================================== */

.gear-closet {
  --gear-border: var(--cd-black);
  --gear-line: rgba(0, 0, 0, 0.22);

    width: 100%;
    box-sizing: border-box;
}


/* ----------------------------------------------------------
  AUTHORING SOURCE
  ---------------------------------------------------------- */

.gear-closet-source {
  display: none !important;
}


/* ----------------------------------------------------------
  INTERFACE
  ---------------------------------------------------------- */

.gear-closet-interface {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;

    color: var(--cd-text-dark);
    background: var(--cd-surface-light);
    border: var(--cd-frame) solid var(--gear-border);
    border-radius: var(--cd-radius);
}


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

.gear-closet-header {
  padding: 18px 20px 16px;

    text-align: center;

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


.gear-closet-title {
  margin: 0 !important;
  padding: 0 !important;

    color: inherit;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
  PRIMARY CATEGORY NAV
  ---------------------------------------------------------- */

.gear-closet-nav {
  display: flex;

    width: 100%;

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


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

    min-width: 0;

    margin: 0;
    padding: 13px 14px;

    appearance: none;

    border: 0;
    border-right: 1px solid var(--gear-border);

    color: var(--cd-text-dark);
    background: var(--cd-surface-light);

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.045em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
       color var(--cd-transition),
       background var(--cd-transition);
}


.gear-closet-nav-button:last-child {
  border-right: 0;
}


.gear-closet-nav-button:hover,
.gear-closet-nav-button:focus-visible,
.gear-closet-nav-button.is-active {
  color: var(--cd-text-light);
    background: var(--cd-black);
}



.gear-closet-nav-button.is-active {
  box-shadow:
     inset 0 -4px 0 var(--cd-accent);
}


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

.gear-closet-view {
  width: 100%;

    box-sizing: border-box;
}


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

.gear-closet-group-grid {
  display: flex;
  flex-wrap: wrap;

    width: 100%;
}


.gear-closet-group {
  position: relative;

    display: flex;

    flex:
       10
       calc(33.333% - 1px);

    flex-direction: column;
    align-items: center;
    justify-content: center;

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

    min-height: 120px;

    margin: 0;
    padding: 20px 16px;

    appearance: none;

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

    color: var(--cd-text-dark);
    background: var(--cd-surface-light);

    font: inherit;
    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    transition:
       color var(--cd-transition),
       background var(--cd-transition);
}


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


/*
 * Remove bottom borders from cells occupying
 * the final visual row.
 */

.gear-closet-group:nth-child(3n + 1):nth-last-child(1),
.gear-closet-group:nth-child(3n + 1):nth-last-child(2),
.gear-closet-group:nth-child(3n + 1):nth-last-child(3),

.gear-closet-group:nth-child(3n + 2):nth-last-child(1),
.gear-closet-group:nth-child(3n + 2):nth-last-child(2),

.gear-closet-group:nth-child(3n):last-child {
  border-bottom: 0;
}



.gear-closet-group-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.gear-closet-group-count {
  margin-top: 7px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;

    opacity: 0.65;
}


.gear-closet-group-prompt {
  position: absolute;
  inset: 0;

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

    padding: 16px;

    color: var(--cd-text-light);
    background: var(--cd-black);
    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.035em;
    text-transform: uppercase;

    opacity: 0;

    pointer-events: none;

    transition:
       opacity var(--cd-transition);
}


.gear-closet-group:hover
.gear-closet-group-prompt,

.gear-closet-group:focus-visible
.gear-closet-group-prompt {
  opacity: 1;
}


/* ----------------------------------------------------------
  DRILL-DOWN HEADER
  ---------------------------------------------------------- */

.gear-closet-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

    gap: 20px;

    padding: 15px 18px;

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


.gear-closet-view-title {
  margin: 0 !important;
    padding: 0 !important;

    color: inherit;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}


.gear-closet-back {
  flex: 0 0 auto;

    margin: 0;
    padding: 0;

    appearance: none;

    border: 0;

    color: var(--cd-text-dark);
    background: transparent;

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;
}


.gear-closet-back:hover,
.gear-closet-back:focus-visible {
  text-decoration: underline;
}


/* ----------------------------------------------------------
  ITEM LIST
  ---------------------------------------------------------- */
.gear-closet-item-list {
  width: 100%;
}


.gear-closet-item-row {
  display: grid;

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

    align-items: center;

    column-gap: 24px;

    width: 100%;

    margin: 0;
    padding: 15px 18px;

    appearance: none;

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

    color: var(--cd-text-dark);
    background: var(--cd-surface-light);

    font: inherit;
    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition:
       color var(--cd-transition),
       background var(--cd-transition);
}


.gear-closet-item-row:last-child {
    border-bottom: 0;
}


.gear-closet-item-row:hover,
.gear-closet-item-row:focus-visible {
  color: var(--cd-text-light);
  background: var(--cd-black);
}


.gear-closet-item-name {
  min-width: 0;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}



.gear-closet-item-prompt {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;

    white-space: nowrap;

    letter-spacing: 0.025em;
    text-transform: uppercase;
}


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

    Desktop:
    Primary image on left.
    All other content in one real column on right.

    The height is determined naturally by whichever column
    is taller. No implicit grid rows are created.
    ---------------------------------------------------------- */

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

    grid-template-columns:
       minmax(280px, 0.9fr)
       minmax(0, 1.1fr);

    align-items: start;

    gap: 32px;

    width: 100%;

    padding: 24px;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
  PRIMARY ITEM IMAGE
  ---------------------------------------------------------- */

.gear-closet-primary-image {
  grid-column: 1;

    width: 100%;
    max-width: 100%;

    margin: 0 !important;

    box-sizing: border-box;
}


.gear-closet-primary-image img {
  display: block;

    width: auto;
    max-width: 100%;
    max-height: 500px;

    height: auto;

    margin: 0 auto;
    object-fit: contain;

    border:
      var(--cd-frame)
      solid
      var(--cd-black);

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

    box-sizing: border-box;
}


/* ----------------------------------------------------------
  ITEM DETAILS COLUMN
  ---------------------------------------------------------- */

.gear-closet-item-details {
  grid-column: 2;

    display: flex;
    flex-direction: column;

    gap: 16px;

    min-width: 0;

    box-sizing: border-box;
}


.gear-closet-item-details
>*{
  width: 100%;
  max-width: none;

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

    box-sizing: border-box;
}
.gear-closet-item-details
> :first-child {
   margin-top: 0 !important;
}


.gear-closet-item-details
> :last-child {
   margin-bottom: 0 !important;
}



/*
 * Gutenberg paragraphs/headings often bring their own
 * vertical margins. The flex gap handles spacing here.
 */

.gear-closet-item-details
> p,

.gear-closet-item-details
> .wp-block-heading {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
  PURCHASE / AFFILIATE BOX
  ---------------------------------------------------------- */

.gear-closet-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  width: 100%;

  margin-top: 8px;
  padding: 16px 18px;
    box-sizing: border-box;

    border: 2px solid var(--cd-black);
    border-radius: var(--cd-control-radius);

    color: var(--cd-text-dark);
    background: var(--cd-surface-light);
}


.gear-closet-purchase-text {
  display: flex;
  flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.gear-closet-purchase-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}


.gear-closet-purchase-disclosure {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;

    opacity: 0.58;
}


.gear-closet-purchase
.gear-buy-link {
  flex: 0 0 auto;

    margin: 0 !important;
}
.gear-closet-purchase
.gear-buy-link
.wp-block-button__link,

.gear-closet-purchase
a.gear-buy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

    min-height:
      var(--cd-control-height);

    padding: 9px 16px;

    border: 2px solid var(--cd-black);

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

    color: var(--cd-text-light) !important;
    background: var(--cd-black) !important;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.035em;

    text-decoration: none !important;
    text-transform: uppercase;

    transition:
       color var(--cd-transition),
       background var(--cd-transition);
}


.gear-closet-purchase
.gear-buy-link
.wp-block-button__link:hover,
.gear-closet-purchase
.gear-buy-link
.wp-block-button__link:focus-visible,

.gear-closet-purchase
a.gear-buy-link:hover,

.gear-closet-purchase
a.gear-buy-link:focus-visible {
  color: var(--cd-text-dark) !important;
  background: var(--cd-surface-light) !important;
}


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

@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;
    }

}



/* ----------------------------------------------------------
  REDUCED MOTION
  ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .gear-closet-nav-button,
    .gear-closet-group,
    .gear-closet-group-prompt,
    .gear-closet-item-row,

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

    .gear-closet-purchase
    a.gear-buy-link {
      transition: none;
    }

}

/* ==========================================================
  CONTACT FORM
  ========================================================== */

.contact-form {
  width: 100%;

    box-sizing: border-box;
}


.cd-contact-form {
  width: 100%;

    margin: 0;
    padding: 18px 20px;

    box-sizing: border-box;

    color: var(--cd-text-light);
    background: var(--cd-black);

    border:
      var(--cd-frame)
      solid
      var(--cd-white);

    border-radius:
      var(--cd-radius);
}
/* ----------------------------------------------------------
  TITLE
  ---------------------------------------------------------- */

.cd-contact-title {
  margin:
     0 0 14px
     !important;

    padding: 0 !important;

    color: var(--cd-text-light);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
  LAYOUT

    Desktop:
    Name | Email | Subject
    Message ........ | Send
    ---------------------------------------------------------- */

.cd-contact-fields {
  display: grid;

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

    gap: 10px;
}
.cd-contact-field {
  min-width: 0;
}


.cd-contact-field-name {
  grid-column: 1;
}


.cd-contact-field-email {
  grid-column: 2;
}


.cd-contact-field-subject {
  grid-column:
     3 / 5;
}


.cd-contact-field-message {
  grid-column:
     1 / 4;
}



/* ----------------------------------------------------------
  ACCESSIBLE LABELS
  ---------------------------------------------------------- */

.cd-contact-label {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


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

.cd-contact-control {
  display: block;

    width: 100%;
    min-height:
      var(--cd-control-height);

    margin: 0;
    padding: 9px 11px;

    box-sizing: border-box;

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

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

    outline: none;

    color: var(--cd-text-light);
    background:
      rgba(255, 255, 255, 0.08);

    font: inherit;
    font-size: 13px;
    line-height: 1.3;

    transition:
       border-color var(--cd-transition),
       background var(--cd-transition);
}



.cd-contact-control::placeholder {
  color:
     var(--cd-text-light-muted);

    opacity: 1;
}


.cd-contact-control:hover {
  border-color:
     var(--cd-white);
}


.cd-contact-control:focus {
  border-color:
     var(--cd-white);

    background:
      rgba(255, 255, 255, 0.13);
}


.cd-contact-control.has-error {
  border-color:
     var(--cd-accent);
}



/* ----------------------------------------------------------
  SELECT

    Explicitly remove browser/theme select styling.
    ---------------------------------------------------------- */

select.cd-contact-control {
  appearance: none;
  -webkit-appearance: none;

    min-height:
  var(--cd-control-height);

padding:
  9px 38px
  9px 11px;

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

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

color:
  var(--cd-text-light);

background-color:
  rgba(255, 255, 255, 0.08);

background-image:
  linear-gradient(
     45deg,
     transparent 50%,
     currentColor 50%
  ),
  linear-gradient(
     135deg,
     currentColor 50%,
     transparent 50%
  );

background-position:
  calc(100% - 16px)
  50%,

  calc(100% - 11px)
  50%;

background-size:
  5px 5px,
  5px 5px;

background-repeat:
  no-repeat;
    box-shadow: none;

    font: inherit;
    font-size: 13px;
    line-height: 1.3;

    cursor: pointer;
}


select.cd-contact-control:hover {
  border-color:
     var(--cd-white);
}


select.cd-contact-control:focus {
  border-color:
     var(--cd-white);

    background-color:
      rgba(255, 255, 255, 0.13);
}


select.cd-contact-control option {
  color:
     var(--cd-text-dark);

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


/* ----------------------------------------------------------
  MESSAGE
  ---------------------------------------------------------- */

textarea.cd-contact-control {
  min-height: 76px;

    resize: vertical;
}
/* ----------------------------------------------------------
  SUBMIT
  ---------------------------------------------------------- */

.cd-contact-submit {
  grid-column: 4;

  align-self: center;

  min-width: 125px;
  min-height:
    var(--cd-control-height);

  margin: 0;
  padding: 10px 16px;

  appearance: none;
  -webkit-appearance: none;

  border:
    2px solid
    var(--cd-white);

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

  color:
    var(--cd-text-dark);

  background:
    var(--cd-white);

  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: 0.045em;
  text-transform: uppercase;

  cursor: pointer;
    transition:
       color var(--cd-transition),
       background var(--cd-transition);
}


.cd-contact-submit:hover,
.cd-contact-submit:focus-visible {
  color:
     var(--cd-text-light);

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


/* ----------------------------------------------------------
  STATUS
  ---------------------------------------------------------- */

.cd-contact-status {
  min-height: 0;

    margin-top: 0;

    font-size: 12px;
    line-height: 1.3;
}


.cd-contact-status:not(:empty) {
  margin-top: 10px;
}


.cd-contact-status.is-success {
  color:
     var(--cd-text-light-secondary);
}


.cd-contact-status.is-error {
  color:
        var(--cd-accent);
}


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

@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;
    }

}



/* ----------------------------------------------------------
  REDUCED MOTION
  ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .cd-contact-control,
    .cd-contact-submit {
      transition: none;
    }

}

/* ==========================================================
  PAGE ROUTER
  ========================================================== */

.cd-page-router {
  width: 100%;
  min-width: 0;

    box-sizing: border-box;
}
/* ==========================================================
    PAGE ROUTER — TRUE FULL BLEED
    ========================================================== */

.cd-page-router,
.cd-page-router-content {
  position: relative;

    width: 100vw !important;
    max-width: none !important;

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

    box-sizing: border-box;
}


/* ==========================================================
  PANELS
  ========================================================== */

.cd-page-router-content > .cd-page-router-panel {
  width: 100% !important;
  max-width: none !important;

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

    box-sizing: border-box;
}


/* ==========================================================
  KILL GUTENBERG CONSTRAINED-LAYOUT WIDTHS INSIDE PANELS

    Gutenberg's .is-layout-constrained rules normally apply
    content-size / wide-size max-widths to child blocks.

    Inside a router panel, the nested component gets to decide
    its own width instead.
    ========================================================== */

.cd-page-router-panel.is-layout-constrained
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}


.cd-page-router-panel
  > .wp-block-group,
.cd-page-router-panel
  > .wp-block-columns,
.cd-page-router-panel
  > .wp-block-gallery,
.cd-page-router-panel
  > .filter-gallery,
.cd-page-router-panel
  > .image-slider,
.cd-page-router-panel
  > .process-gallery,
.cd-page-router-panel
  > .annotated-image,
.cd-page-router-panel
  > .image-navigator,
.cd-page-router-panel
  > .before-after,
.cd-page-router-panel
  > .process-timeline,
.cd-page-router-panel
  > .gear-closet,
.cd-page-router-panel
  > .video-viewer {

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

    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* ==========================================================
  AUTHORING SOURCE
  ========================================================== */

.cd-page-router-source {
  display: none !important;
}
/* ==========================================================
  HEADER
  ========================================================== */

.cd-page-router-header {
  display: grid;

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

    align-items: end;

    gap: 56px;

    width: 100%;

    padding:
      18px
      26px
      8px;

    margin-bottom: 26px;

    box-sizing: border-box;
}


/* ==========================================================
  MAIN TITLE AREA
  ========================================================== */

.cd-page-router-main {
  min-width: 0;
}



.cd-page-router-number {
  display: flex;

    align-items: center;
    gap: 14px;

    margin-bottom: 14px;

    color: var(--cd-accent);

    font-size: 24px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: .02em;
}


.cd-page-router-number::after {
  content: "";

    display: block;

    width: 64px;
    height: 2px;

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



.cd-page-router-title {
  margin: 0 !important;

    color:
      var(--cd-silver) !important;

    font-size:
      clamp(
         72px,
         10vw,
         180px
      );

    font-weight: 700;
    line-height: .9;

    letter-spacing: -.06em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================
  NAVIGATION
  ========================================================== */

.cd-page-router-navigation {
  display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin:
     0
     26px
     6px
     0;
}


.cd-page-router-button {
  position: relative;

    appearance: none;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color:
      var(--cd-silver);

    font: inherit;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.55;

    letter-spacing: .22em;

    text-align: left;

    text-transform: uppercase;

    cursor: pointer;

    transition:
       color var(--cd-transition),
       opacity var(--cd-transition);
}


.cd-page-router-button:hover {
  color:
     var(--cd-white);
}


.cd-page-router-button.is-active {
  color:
     var(--cd-accent);
}


.cd-page-router-button:focus-visible {
  outline:
     2px solid
     var(--cd-accent);

    outline-offset: 5px;
}
/* ==========================================================
  CONTENT
  ========================================================== */

.cd-page-router-content {
  position: relative;

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


.cd-page-router-panel {
  width: 100%;
  min-width: 0;

    box-sizing: border-box;
}



.cd-page-router-panel[hidden] {
  display: none !important;
}


/*
 * The panel itself deliberately imposes almost
 * no visual layout.
 *
 * Whatever is nested inside remains responsible
 * for its own width, spacing and presentation.
 */

.cd-page-router-panel.is-active {
  animation:
     cd-page-router-reveal
     220ms
     ease-out
     both;
}
@keyframes cd-page-router-reveal {

    from {
       opacity: 0;
    }

    to {
       opacity: 1;
    }

}


/* ==========================================================
  INTERMEDIATE
  ========================================================== */

@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);
    }

}


/* ==========================================================
  MOBILE
  ========================================================== */

@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;
    }

}


/* ==========================================================
  REDUCED MOTION
  ========================================================== */

@media (
   prefers-reduced-motion: reduce
){

    .cd-page-router-panel.is-active {
      animation: none;
    }


    .cd-page-router-button {
      transition: none;
    }

}
/* ==========================================================
  PAGE ROUTER — MATCH HOMEPAGE FULL-BLEED GEOMETRY
  ========================================================== */


/* ----------------------------------------------------------
  ROUTER SHELL
  ---------------------------------------------------------- */

.cd-page-router,
.cd-page-router-content {
  width: 100vw !important;
  max-width: none !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;
}


/* ----------------------------------------------------------
  GENERATED FEATURE HEADER
  ---------------------------------------------------------- */

.cd-page-router-header {
  width: 100% !important;
  max-width: none !important;

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

    /*
     * Homepage geometry:
     * almost full bleed, with only a small visual gutter.
     */
    padding-left: 18px !important;
    padding-right: 18px !important;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
  CONTENT SHELL
  ---------------------------------------------------------- */

.cd-page-router-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ----------------------------------------------------------
  ROUTE PANELS
  ---------------------------------------------------------- */

.cd-page-router-content > .cd-page-router-panel,
.cd-page-router-panel {
  width: 100% !important;
  max-width: none !important;

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

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

    box-sizing: border-box;
}


/* ----------------------------------------------------------
  BREAK GUTENBERG'S CONSTRAINED CHILD WIDTH

    This is the important bastard.
    ---------------------------------------------------------- */

.cd-page-router-panel.is-layout-constrained
  > :where(:not(.alignleft):not(.alignright)) {

    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
 * Also cover Groups Gutenberg has inserted inside the panel.
 */

.cd-page-router-panel
  > .wp-block-group {

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

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

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



/* ----------------------------------------------------------
  FILTER GALLERY INSIDE ROUTER
  ---------------------------------------------------------- */

.cd-page-router-panel .filter-gallery,
.cd-page-router-panel .filter-grid {

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

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


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

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

}

.cd-page-router{background:var(--cdpr-bg,#000);color:var(--cdpr-text,#fff)}
.cd-page-router .cd-page-router-title{font-size:clamp(32px,var(--cdpr-title-size,96px),180px);color:var(--cdpr-text,#fff)}
.cd-page-router .cd-page-router-number{font-size:var(--cdpr-number-size,18px);color:var(--cdpr-muted,#9aa0a6)}
.cd-page-router .cd-page-router-button{font-size:var(--cdpr-nav-size,14px);color:var(--cdpr-muted,#9aa0a6)}
.cd-page-router .cd-page-router-button.is-active{color:var(--cdpr-active,#fff)}
.cd-page-router.is-uppercase .cd-page-router-button{text-transform:uppercase}

/* v1.0.7 — Page Router's recovered site appearance expressed as editable variables. */
.cd-page-router .cd-page-router-number{
 color:var(--cdpr-active,var(--cd-accent))!important;
 font-size:var(--cdpr-number-size,24px)!important;
 font-weight:var(--cdpr-number-weight,800)!important;
}
.cd-page-router .cd-page-router-title{
 color:var(--cdpr-text,var(--cd-silver))!important;
 font-size:clamp(72px,10vw,var(--cdpr-title-size,180px))!important;
 font-weight:var(--cdpr-title-weight,700)!important;
 line-height:var(--cdpr-title-line,.9)!important;
 letter-spacing:var(--cdpr-title-track,-.06em)!important;
 text-transform:uppercase;
 white-space:nowrap;
}
.cd-page-router .cd-page-router-button{
 color:var(--cdpr-muted,var(--cd-silver))!important;
 font-size:var(--cdpr-nav-size,22px)!important;
 font-weight:var(--cdpr-nav-weight,700)!important;
 line-height:var(--cdpr-nav-line,1.55)!important;
 letter-spacing:var(--cdpr-nav-track,.22em)!important;
}
.cd-page-router .cd-page-router-button.is-active{color:var(--cdpr-active,var(--cd-accent))!important}

/* v1.0.10 — RESTORED PAGE ROUTER RESPONSIVE CONTRACT
   These are the recovered Circus Daniel breakpoints, placed after the editable
   base-variable layer so the responsive presentation wins at its intended viewport. */
@media (max-width:1500px){
 .cd-page-router .cd-page-router-header{
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:22px;
 }
 .cd-page-router .cd-page-router-navigation{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  margin:0 0 6px;
 }
 .cd-page-router .cd-page-router-button{
  font-size:16px!important;
 }
 .cd-page-router .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 .cd-page-router-header{
  gap:14px;
  padding:0 18px;
  margin-bottom:20px;
 }
 .cd-page-router .cd-page-router-number{
  gap:10px;
  margin-bottom:10px;
  font-size:14px!important;
 }
 .cd-page-router .cd-page-router-number::after{
  width:40px;
  height:1px;
 }
 .cd-page-router .cd-page-router-title{
  font-size:clamp(48px,13.5vw,82px)!important;
  line-height:.82!important;
  white-space:nowrap;
 }
 .cd-page-router .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 .cd-page-router-navigation::-webkit-scrollbar{display:none}
 .cd-page-router .cd-page-router-button{
  flex:0 0 auto;
  font-size:10px!important;
  line-height:1.4!important;
  letter-spacing:.13em!important;
  white-space:nowrap;
 }
 .cd-page-router .cd-page-router-button:not(:last-child)::after{margin:0 8px}
}