@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');
    .amatic {
      font-family: 'Amatic SC', cursive !important;
      font-weight: 400 !important;
    }
    .studios-content-main h1,
    .studios-content-main h2,
    .studios-content-main h3,
    .studios-content-main h4,
    .studios-content-main h5,
    .studios-content-main h6,
    .studios-content-main label,
    .studios-content-main p,
    .studios-content-main ul,
    .studios-content-main li,
    .studios-content-main a,
    .studios-content-main .button,
    .comparisonGrid {
      font-family: 'filson-pro', sans-serif;
    }

    .studios-content-main h1,
    .studios-content-main h2,
    .studios-content-main h3,
    .studios-content-main h4 {
      letter-spacing: 1px;
    }

    .studios-content-main h5,
    .studios-content-main h6,
    .studios-content-main label {
      font-weight: 500 ;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .studios-content-main h1 {
      font-weight: 900;
      font-size: 3.25rem;
      text-transform: uppercase;
    }

    .studios-content-main h6 {
      font-size: 90% ;
      margin-bottom: 10px ;
    }

    .studios-content-main p,
    .studios-content-main ul,
    .studios-content-main li,
    .studios-content-main a {
      font-weight: 300 ;
    }

    .studios-content-main strong {
      font-weight: 600 ;
    }
    .studios-content-main blockquote, .studios-content-main .lead {
      font-size: 90%;
    }

    .BG_image{
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin-left: auto;
      margin-right: auto;
      background-position: 50% 50%;
    }

    .margin-center{
      margin:auto;
    }
    /* -----------------------------------
     BG VIDEO BOOTSTRAP
  ----------------------------------- */

  .mod_BG-video{
    position: relative ;
    overflow: hidden ;
    min-height: 95vh;
  }

  .mod_BG-video > .container,
  .mod_BG-video > .container-fluid {
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 0 ;
    padding-bottom: 0 ;
  }

  /* pin the copy row to the very bottom of the section */
  .mod_BG-video > .container > .row:last-child,
  .mod_BG-video > .container-fluid > .row:last-child {
    margin-top: auto ;
    margin-bottom: 0 ;
  }

  /* remove the extra space below the logo so the logo hugs the top */
  .mod_BG-video .padding-bottom-100 {
    padding-bottom: 0 ;
  }

  .mod_BG-video .videoBG{
    position: absolute ;
    inset: 0 ;
    width: 100% ;
    height: 100% ;
    overflow: hidden ;
    z-index: 1 ;
    background-size: cover ;
    background-position: center center ;
    background-repeat: no-repeat ;
  }

  .mod_BG-video .video-frame{
    position: absolute ;
    inset: 0 ;
    width: 100% ;
    height: 100% ;
    min-width: 100% ;
    min-height: 100% ;
    padding: 0 ;
    margin: 0 ;
    overflow: hidden ;
    pointer-events: none ;
    z-index: 2 ;
  }

  .mod_BG-video .video-js,
  .mod_BG-video .video-js video,
  .mod_BG-video .video-js .vjs-tech,
  .mod_BG-video video{
    position: absolute ;
    inset: 0 ;
    width: 100% ;
    height: 100% ;
    min-width: 100% ;
    min-height: 100% ;
    max-width: none ;
    max-height: none ;
    object-fit: cover ;
    object-position: center center ;
    transform: translateZ(0);
    backface-visibility: hidden;
    padding: 0 ;
    margin: 0 ;
  }

  .mod_BG-video .video-js.vjs-fluid,
  .mod_BG-video .video-js.vjs-16-9,
  .mod_BG-video .video-js.vjs-4-3{
    padding-top: 0 ;
    height: 100% ;
  }

  .mod_BG-video .vjs-control-bar,
  .mod_BG-video .vjs-big-play-button,
  .mod_BG-video .vjs-loading-spinner,
  .mod_BG-video .vjs-overlay{
    display: none ;
    opacity: 0 ;
    visibility: hidden ;
  }
  .mod_BG-video .container,
  .mod_BG-video .container-fluid{
    position: relative ;
    z-index: 10 ;
  }
  .mod_BG-video .video-frame *,
  .mod_BG-video .video-js *,
  .mod_BG-video video{
    animation: none ;
  }
  /* -----------------------------------
     BG VIDEO BOOTSTRAP
  ----------------------------------- */
    /* -----------------------------------
     S01 — GHOST WHISP COPY
  ----------------------------------- */
  .section .whispycopy{
    /* --whisp is driven by the scroll handler: 0 = present, 1 = vanished */
    --whisp: 0;
    opacity: calc(1 - var(--whisp));
    /* scaleX gives the "spread apart" feel without animating letter-spacing (which reflows and jitters) */
    transform: translateY(calc(var(--whisp) * -80px)) scale(calc(1 + var(--whisp) * 0.06)) scaleX(calc(1 + var(--whisp) * 0.12));
    filter: blur(calc(var(--whisp) * 14px));
    transform-origin: center;
    will-change: opacity, transform, filter;
    /* No CSS transition: the scroll handler already updates --whisp every frame
       via requestAnimationFrame, so a transition just lags and fights it. */
  }

  /* -----------------------------------
     S01 — GHOST WHISP COPY
  ----------------------------------- */

  /* -----------------------------------
     CARD IMAGE HOVER SWAP
  ----------------------------------- */
  .colcard-img{
    position: relative;
    overflow: hidden;
    transition: opacity 0.6s ease;
  }
  .colcard-img .card-img{
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.6s ease;
  }
  .colcard-img:hover .card-img{
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .colcard-img .card-img-hover{
    opacity: 0;
    transition: opacity 0.6s ease;
    rotate: 5deg;
    scale: 90%;
  }
  /* fade the hover image in when the card is hovered/focused */
  .colcard-inner:hover .card-img-hover,
  .colcard-inner:focus-within .card-img-hover{
    opacity: 1;
    cursor: pointer;
  }
  /* -----------------------------------
     CARD IMAGE HOVER SWAP
  ----------------------------------- */
  /* -----------------------------------
     LEADERLINE
  ----------------------------------- */
  .leader-line {
    z-index: 1;
  }

  /* LeaderLine appends absolutely-positioned SVGs to <body>; their bounding
     boxes can spill past the viewport edge and add a second (horizontal)
     scrollbar. Clip that overflow at the document level. #viewport stays the
     real scroll container, so sticky behavior is unaffected. */
  html,
  body {
    overflow-y: hidden;
    max-width: 100%;
  }

  .custom-marker {
    position: absolute;
  }
  .custom-marker-1 {
    top: 55%;
    left: 12%;
  }
  .custom-marker-2 {
    top: 78%;
    left: 55%;
  }
  .custom-marker-3 {
    top: 33%;
    left: 52%;
  }
  .custom-marker-4 {
    top: 66%;
    left: 80%;
  }
  .techIcons {
      max-width: 100%;
      width: 105px;
      margin-bottom: 10px;
      border-radius: 50%;
      box-shadow: 0 0 10px rgb(255 255 255 / 20%);
      background-color: #eeeeee;
  }
  .S05box .techIcons {
    width: 60px;
  }
  @media screen and (max-width: 767px) {
    #start-point-1 {
      display: none;
    }
    #start-point-2 {
      display: none;
    }
    #start-point-3 {
      display: none;
    }
    #start-point-4 {
      display: none;
    }
  }
  @media screen and (min-width: 768px) {
    .hide-desktop {
      display: none;
    }
    .hide-mobile  {
      display: block;
    }
  }
  @media screen and (max-width: 767px){
    .hide-desktop {
      display: block;
    }
    .leader-line {
      display: none;
  }
    .custom-marker {
      display: none;
    }

    .hide-mobile  {
      display: none;
    }

  }
  /* -----------------------------------
    X LEADERLINE
  ----------------------------------- */
  /* -----------------------------------
    COMPARSION TABLE
  ----------------------------------- */
  .mod_layout-comparison {
      padding: 40px 20px;
  }
  .mod_layout-comparison h5{
      margin: 0;
  }
  .comparisonTable {
      width: 100%;
      background-color: #fff;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 10px;
      padding: 1rem 2rem;
      font-size: 90%;
  }

  /* Scroll hint + frozen header row on mobile */
  @media (max-width: 768px) {
      .shoeHead__img {
      max-height: 80px;
      }
      .comparisonTable {
          position: relative;
          /* becomes its own scroll box so the header row can pin to the top */
          max-height: 95vh;
          overflow: auto;
      }
      /* Header row (shoe names) freezes at the top while scrolling down */
      .comparisonGrid thead th {
          position: sticky;
          top: 0;
          z-index: 3;
          background: #fff;
          /* keep the divider visible while the row is pinned */
          box-shadow: inset 0 -2px 0 #252525;
      }
      /* Top-left corner must sit above both the frozen row and column */
      .comparisonGrid thead th.comparisonGrid__labelCol {
          z-index: 4;
      }
      .comparisonTable::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 32px;
          height: 100%;
          pointer-events: none;
          border-radius: 0 8px 8px 0;
      }
  }

  .comparisonGrid {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px; /* forces scroll before collapsing too tight */
      color: #252525;
  }

  /* ─── Column sizing ─── */

  .comparisonGrid__labelCol {
      width: 110px;
      min-width: 90px;
  }

  .comparisonGrid__shoeCol {
      width: calc((100% - 110px) / 4);
      min-width: 130px;
  }

  /* ─── Header row ─── */

  thead tr {
      border-bottom: 2px solid #252525;
  }

  thead th.comparisonGrid__shoeCol {
      padding: 16px 12px 14px;
      text-align: center;
      vertical-align: top;
  }

  /* ─── Frozen label column ─── */

  /* The attribute column (Best For, Cushion…) stays put while scrolling sideways */
  .comparisonGrid th.comparisonGrid__label,
  .comparisonGrid th.comparisonGrid__labelCol {
      position: sticky;
      left: 0;
      z-index: 1;
      background: #fff;
  }

  /* Top-left corner cell sits above the shoe headers as they scroll under it */
  .comparisonGrid thead th.comparisonGrid__labelCol {
      z-index: 2;
  }

  .shoeHead__img {
      display: block;
      width: 100%;
      max-width: 120px;
      height: auto;
      margin: 0 auto 10px;
      object-fit: contain;
  }

  .shoeHead__tag {
      display: block;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #666;
      margin-bottom: 4px;
  }

  .shoeHead__name {
      display: block;
      font-weight: 700;
      line-height: 1.2;
      color: #252525;
  }

  .shoeHead__sub {
      display: block;
      color: #888;
      margin-top: 3px;
  }

  /* ─── Body rows ─── */

  .comparisonGrid__row {
      border-bottom: 1px solid #e5e5e5;
  }

  .comparisonGrid__row:last-child {
      border-bottom: none;
  }

  .comparisonGrid__label {
      padding: 14px 12px 14px 0;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #666;
      vertical-align: top;
  }

  .comparisonGrid__cell {
      padding: 14px 12px;
      text-align: center;
      vertical-align: top;
      line-height: 1.45;
      color: #252525;
  }

  /* ─── Pills ─── */

  .comparisonGrid__pill {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-weight: 600;
      letter-spacing: 0.02em;
  }

  .mod_color-balanced {
      background-color: #eef2ff;
      color: #3a4db7;
  }

  .mod_color-responsive {
      background-color: #fff4e5;
      color: #b85c00;
  }

  .mod_color-max {
      background-color: #e8f5e9;
      color: #276b2f;
  }

  /* ─── Pill hover / focus tooltip ─── */

  .pillWrap {
      position: relative;
      display: inline-block;
      outline: none;
  }

  .pillWrap .comparisonGrid__pill {
      cursor: help;
  }
  .pillWrap p{
      margin-bottom: 0rem;
  }
  .pillTip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      width: max-content;
      max-width: 200px;
      padding: 8px 10px;
      background: #252525;
      color: #fff;
      border-radius: 6px;
      font-size: 90%;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0;
      text-transform: none;
      text-align: left;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.15s ease;
      pointer-events: none;
      z-index: 10;
  }

  /* little arrow pointing down at the pill */
  .pillTip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #252525;
  }

  .pillWrap:hover .pillTip,
  .pillWrap:focus .pillTip,
  .pillWrap:focus-within .pillTip {
      opacity: 1;
      visibility: visible;
  }

  /* ─── Feature list ─── */

  .comparisonGrid__list {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: left;
      display: inline-block;
  }

  .comparisonGrid__list li {
      padding: 2px 0 2px 14px;
      position: relative;
      line-height: 1.5;
  }

  .comparisonGrid__list li::before {
      content: '–';
      position: absolute;
      left: 0;
      color: #999;
  }

  /* ─── Weight ─── */

  .comparisonGrid__weight {
      display: block;
      line-height: 1.6;
  }

  /* ─── Reduced motion ─── */

  @media (prefers-reduced-motion: reduce) {
      * {
          transition: none !important;
          animation: none !important;
      }
  }

  /* ─── Mobile ────────────────────── */

  @media (max-width: 768px) {
      .comparisonTable {
      padding: 0rem;
      }

      .mod_layout-comparison {
          padding: 24px 0;
      }

      .comparisonGrid__labelCol {
          width: 80px;
          min-width: 80px;
      }

      .comparisonGrid__shoeCol {
          min-width: 110px;
      }

      .comparisonGrid__label {
          font-size: 11px;
          padding: 10px;
          background-color: #f5f5f8 !important;
      }

      .comparisonGrid__cell {
          padding: 12px 8px;
      }

  }
  /* -----------------------------------
    X COMPARSION TABLE
  ----------------------------------- */
  /* -----------------------------------
    DRAG N DROP
  ----------------------------------- */

   .product {
       position: relative;
      background-color: rgb(255 255 255 / 70%);
      z-index: 1;
      min-width: 150px;
      margin-bottom: 1em;
      border: 3px dashed #14295f;
      padding: 1rem;
      font-size: 90%;
      }
      .product .u-background-size-contain {
        width: 100%;
        height: 0;
        position: relative;
        left: 0;
        top: 0;
        padding-bottom: 95%;
        background-color: transparent;
      }

      .product .productcopy1,
      .product .productcopy2 {
        position: relative;
        left: 0;
        width: 100%;
        text-align: center;
        bottom: 0;
        background: transparent;
        margin: 0;
        padding: 0.5em 0;
        color: #14295f; /* was .fontNavy */
      }
      .productcopy1 p, h5, cite{
          margin-bottom:0.15rem;
      }
      /* before drop: show copy1, hide copy2 */
      .product .productcopy2 {
        display: none;
      }
      /* after drop: hide copy1, show copy2 */
      .product.dropped .productcopy1 {
        display: none;
      }
      .product.dropped .productcopy2 {
        display: block;
      }
      .product:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        box-shadow: none;
      }
      .product.dropped {
        border: 3px solid #8fc448;
      }
      .product.dropped:after {
        box-shadow: 0 0 10px rgba(98,146,39,0.25);
      }
    .dropitem {
        width: 100%;
        position: relative;
      }
      .cbd-drop {
        width: 250px;
        max-width: 100%;
        height: auto;
        z-index: 1000;
        text-align: center;
        margin: 2em auto;
        transition: transform ease-in-out 0.2s;
        cursor: move;
      }
      @media (max-width:500px) {
        .cbd-drop {
          margin: 0;
          width: 100%;
          font-size: 85%;
        }
      }
      .cbd-drop:hover {
        cursor: move;
        transform: scale(1.1);
      }
      .cbd-drop .fas {
        text-shadow: 0px 1px 3px rgba(0,0,0,0.25);
      }

      .cbd-drop.ui-draggable-dragging{
        transform: scale(1.4);
      }
      .pulse{
          animation: pulse 3s infinite;
      }
      @keyframes pulse {

      0% {
          transform: scale(1);
          box-shadow: none;
      }
      33% {
          transform: scale(1.05);
          box-shadow: none;
      }
      100% {
          transform: scale(1.0);
          box-shadow: none;
      }

      }
  /* -----------------------------------
    X DRAG N DROP
  ----------------------------------- */

  .logoImg{
    width: 100%;
    height:100px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }

  .mod_color-alt-2 {
      background-color: #dcdcdc;
  }
  .copyBG{
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      padding: 40px;
    }
  .sectionCopy-inner{
    padding: 4rem 5rem 3.5rem;
    color: #fff;
  }
  .colcard-outer{
    padding:1rem;
    text-align: center;
  }
  .colcard-inner{
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
  }

  .mod_color-alt-2{
    background-color: black;
  }
  .mod_interaction-sticky{
      background-image: linear-gradient(white 50%, transparent );
      background-color: transparent;
  }
  .mod_background-fade{
      background-image: linear-gradient(transparent, white 50%);
      background-color: transparent;
  }
  .mod_background-fade-black .container-fluid {
      background-image: linear-gradient(transparent, rgb(0 0 0 / 83%) 90%);
  }
  .text-shadow{
          text-shadow: 0 0 20px black;
  }
  .mod_background-transparent > .mainBG {
      opacity: 0.95;
  }
  cite {
      font-size: 80%;
  }
  .smallerfont{
      font-size: 90%;
  }
  .studios-content-main .button {
      background-color: #003789;
      color: #ffffff;
      border-radius: 2rem;
      padding-left: 1.5rem ;
      padding-right:1.5rem;
  }
  .studios-content-main .button:hover {
      background-color: #14295f;
  }
  .smaller{
      font-size: 95%;
  }
  .scrolly-content{
    padding: 1rem;
    border: #14295f solid 3px;
    background-color:white;
    width: 90%;
    max-width: 1000px;
    margin: auto auto 2rem;
    text-align: center;
  }
  .sticky {
    top: 5vh;
  }
  .bio {
    justify-content: center;
  }
  .bio .bio-image .brand-avatar {
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: 100% 0%;
  }
  @media screen and (max-width: 768px){
      .sectionCopy-inner {
          padding: 4rem 2rem 3.5rem;
      }
      .logoImg {
          width: 100%;
          height: 70px;
      }
  .studios-content-main h1 {
      font-size: 2.25rem;
  }
  .container-fluid{
      padding:0rem;
  }
  .mobile-taller .padding-bottom-50 {
      padding-bottom:70% !important;
  }
  .col-11{
      margin:auto;
  }
  .S05box{
      text-align: center;
      padding-bottom: 1rem;
  }
  .S05box .techIcons {
    width: 80px;
  }
  .scrolly-bg-mobile{
       background-color:rgba(255, 255, 255, 0.95);
      text-align: center;
  }
  .bio .bio-image {
    max-width: 150px;
  }
  .bio .bio-image .bio-avatar {
    width: 45px;
    height: 45px;
  }
  .studios-content-main blockquote, .studios-content-main .lead {
    font-size: 98%;
  }
  .product {
    padding:0rem 0.25rem;
  }
  }