/* OnTrack Web Solutions - Batch 1K
   Click-to-assemble lifecycle, slower Our Process reveals, twelve flip cards.
   Supersedes Batch 1J. Loaded only on pages 14, 15, 16, 17.
   No third-party libraries. */

/* ============ 1. Scroll reveal - Our Process only (Batch 1K timing) ============ */
/* Batch 1J used 880ms / 150ms / 25%. Batch 1K slows and deepens the dissolve. */
.otw-js .otw-rv{
  opacity:.14;
  filter:blur(15px);
  transform:translateY(20px) scale(.982);
  transition:opacity 1200ms cubic-bezier(.22,.7,.28,1),
             filter 1200ms cubic-bezier(.22,.7,.28,1),
             transform 1200ms cubic-bezier(.22,.7,.28,1);
  transition-delay:var(--otw-d,0ms);
  will-change:opacity,transform,filter;
}
.otw-js .otw-rv.is-in{opacity:1;filter:blur(0);transform:none}
.otw-js .otw-rv.is-done{will-change:auto;transition-delay:0ms}

/* ============ 2. Home hero - balanced upper label row ============ */
.otw-hero-lblrow{display:flex;flex-direction:row;align-items:center;gap:20px;width:100%}
.otw-hero-lblrow>.elementor-widget{width:auto}
.otw-hero-lblrow .otw-hero-fill{flex:1 1 auto;min-width:0}
.otw-hero-lbl{display:flex;align-items:center;gap:16px;width:100%;justify-content:flex-end}
.otw-hero-lbl__rule{flex:1 1 auto;min-width:20px;height:1px;
  background:linear-gradient(90deg,rgba(220,164,51,0) 0%,rgba(220,164,51,.30) 45%,rgba(220,164,51,.70) 100%)}
.otw-hero-lbl__text{flex:0 0 auto;white-space:nowrap;
  font-family:Poppins,sans-serif;font-weight:600;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:#B98220}
.otw-hero-lbl__text .ot-hv-cross{color:#DCA433;margin-right:6px;font-size:14px}
.otw-lc-slot{flex:0 0 auto;display:inline-flex}
/* The in-card label is the no-JS tablet/mobile presentation only. With JS the
   lifecycle button is the single label for the panel. */
.otw-js .ot-hero-viz .ot-hv-head{display:none}
@media(min-width:1025px){.ot-hero-viz .ot-hv-head{display:none}}
/* Without JS the static row label stays exactly as Batch 1J shipped it. */
@media(max-width:1024px){.otw-lc-fallback{display:none}}

@media(max-width:1024px){
  .otw-hero-lblrow{flex-wrap:wrap;gap:14px}
  .otw-hero-lblrow .otw-hero-fill{flex:0 0 auto;width:auto;min-width:0}
  .otw-hero-lbl{width:auto;justify-content:flex-start;gap:0}
  .otw-hero-lbl__rule{display:none}
}

/* Desktop hero columns: 54% + 46% + a 48px gap exceeds the row, so the two
   columns wrapped and the lifecycle card dropped below the copy. Allow them to
   shrink to fit. Tablet and mobile stacking is untouched. */
@media(min-width:1025px){
  .otw-hero-row{flex-wrap:nowrap!important}
  .otw-hero-row>.elementor-element{flex-shrink:1!important;min-width:0}
}

/* ============ 3. Lifecycle button ============ */
.otw-lcbtn{display:inline-flex!important;align-items:center;gap:9px;
  width:auto!important;margin:0!important;padding:12px 18px!important;min-height:44px;
  font-family:Poppins,sans-serif!important;font-weight:600!important;
  font-size:12px!important;letter-spacing:2px!important;line-height:1!important;
  text-transform:uppercase!important;text-decoration:none!important;
  color:#916312!important;background:#fff!important;background-color:#fff!important;
  border:1px solid #E8CE93!important;border-radius:10px!important;
  box-shadow:0 4px 14px rgba(184,130,32,.10)!important;
  cursor:pointer;white-space:nowrap;
  transition:transform .26s cubic-bezier(.22,.7,.28,1),box-shadow .26s ease,
             border-color .26s ease,background-color .26s ease}
.otw-lcbtn:hover{transform:translateY(-2px);border-color:#DCA433!important;
  background-color:#FFFDF8!important;box-shadow:0 10px 24px rgba(184,130,32,.18)!important}
.otw-lcbtn:active{transform:translateY(0)}
.otw-lcbtn:focus-visible{outline:3px solid #DCA433;outline-offset:3px}
.otw-lcbtn .ot-hv-cross{color:#DCA433;font-size:14px;line-height:1}
.otw-lcbtn__label{display:inline-block}
@media(max-width:479px){
  .otw-lcbtn{font-size:11px!important;letter-spacing:1.4px!important;padding:12px 14px!important;
    white-space:normal;text-align:left}
}

/* ============ 4. Lifecycle panel and click-to-assemble ============ */
/* Collapsed only once the script has taken control. Without JS the panel and
   all six stages render normally and no button exists. */
.otw-js .ot-hero-viz.otw-lcpanel{display:none}
.otw-js .ot-hero-viz.otw-lcpanel.otw-lc-ready{display:block}
.otw-js .ot-hero-viz.otw-lcpanel.otw-lc-ready[hidden]{display:none!important}
.otw-lcpanel{position:relative}

.otw-lcframe{position:absolute;inset:-1px;border-radius:16px;pointer-events:none;
  opacity:0;transition:opacity .45s ease}
.otw-lcframe i{position:absolute;display:block;background:rgba(220,164,51,.85)}
.otw-lcframe .f-t{top:0;left:0;right:0;height:1.5px;transform:scaleX(0);transform-origin:left center}
.otw-lcframe .f-r{top:0;right:0;bottom:0;width:1.5px;transform:scaleY(0);transform-origin:center top}
.otw-lcframe .f-b{bottom:0;left:0;right:0;height:1.5px;transform:scaleX(0);transform-origin:right center}
.otw-lcframe .f-l{top:0;left:0;bottom:0;width:1.5px;transform:scaleY(0);transform-origin:center bottom}

.otw-js .otw-lcpanel.is-assembling{overflow:hidden;will-change:transform,opacity;
  animation:otwLcPanel 620ms cubic-bezier(.22,.7,.28,1) both}
.otw-js .otw-lcpanel.is-assembling .otw-lcframe{opacity:1}
.otw-js .otw-lcpanel.is-assembling .otw-lcframe .f-t{animation:otwLcX 170ms ease-out 120ms both}
.otw-js .otw-lcpanel.is-assembling .otw-lcframe .f-r{animation:otwLcY 170ms ease-out 290ms both}
.otw-js .otw-lcpanel.is-assembling .otw-lcframe .f-b{animation:otwLcX 170ms ease-out 460ms both}
.otw-js .otw-lcpanel.is-assembling .otw-lcframe .f-l{animation:otwLcY 170ms ease-out 630ms both}
.otw-js .otw-lcpanel.is-assembled .otw-lcframe{opacity:0}
.otw-js .otw-lcpanel.is-assembled{will-change:auto}

@keyframes otwLcPanel{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes otwLcX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes otwLcY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes otwLcStep{from{opacity:0;transform:translate3d(var(--otw-tx,0px),var(--otw-ty,0px),0)}
  to{opacity:1;transform:none}}
@keyframes otwLcFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.otw-js .otw-lcpanel.is-assembling .ot-hv-step{
  animation:otwLcStep 720ms cubic-bezier(.22,.7,.28,1) var(--otw-sd,0ms) both;
  will-change:transform,opacity}
.otw-js .otw-lcpanel.is-assembled .ot-hv-step{will-change:auto}
.otw-lcpanel .ot-hv-step[data-otw-i="1"]{--otw-tx:-60px;--otw-ty:0px;--otw-sd:320ms}
.otw-lcpanel .ot-hv-step[data-otw-i="2"]{--otw-tx:-46px;--otw-ty:-40px;--otw-sd:435ms}
.otw-lcpanel .ot-hv-step[data-otw-i="3"]{--otw-tx:52px;--otw-ty:-34px;--otw-sd:550ms}
.otw-lcpanel .ot-hv-step[data-otw-i="4"]{--otw-tx:-52px;--otw-ty:38px;--otw-sd:665ms}
.otw-lcpanel .ot-hv-step[data-otw-i="5"]{--otw-tx:62px;--otw-ty:0px;--otw-sd:780ms}
.otw-lcpanel .ot-hv-step[data-otw-i="6"]{--otw-tx:48px;--otw-ty:44px;--otw-sd:895ms}

.otw-js .otw-lcpanel .ot-hv-fill{animation:none!important;
  transform:scaleY(0);transform-origin:top}
.otw-js .otw-lcpanel.is-assembling .ot-hv-fill{
  animation:otwLcFill 500ms cubic-bezier(.22,.7,.28,1) 1470ms both!important}
.otw-js .otw-lcpanel.is-assembled .ot-hv-fill{transform:scaleY(1)}

/* ============ 5. Interactive cards (home + services) ============ */
.otw-card{position:relative;
  transition:transform .28s cubic-bezier(.22,.7,.28,1),
             box-shadow .28s cubic-bezier(.22,.7,.28,1),
             border-color .28s cubic-bezier(.22,.7,.28,1)}
.otw-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:14px 14px 0 0;pointer-events:none;
  background:linear-gradient(90deg,#DCA433,#B98220);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.22,.7,.28,1)}
.otw-card:hover,.otw-card:focus-within{
  transform:translateY(-6px) scale(1.015)!important;
  box-shadow:0 16px 40px rgba(184,130,32,.16)!important;
  border-color:#E8CE93!important}
.otw-card:hover::after,.otw-card:focus-within::after{transform:scaleX(1)}
.otw-card>*{position:relative;z-index:1}

/* Detail control shared by home cards and service cards. */
.otw-more{display:inline-flex!important;align-items:center;gap:8px;align-self:flex-start;
  width:auto!important;margin:4px 0 0!important;padding:9px 15px!important;min-height:40px;
  font-family:Poppins,sans-serif!important;font-weight:600!important;
  font-size:13.5px!important;line-height:1!important;letter-spacing:0!important;
  text-transform:none!important;text-decoration:none!important;
  color:#916312!important;background:#fff!important;background-color:#fff!important;
  border:1px solid #E2E5EA!important;border-radius:8px!important;box-shadow:none!important;
  cursor:pointer;
  transition:background-color .24s ease,border-color .24s ease,color .24s ease}
.otw-more:hover{background-color:#FCF8F0!important;border-color:#E8CE93!important;color:#916312!important}
.otw-more:focus-visible{outline:3px solid #DCA433;outline-offset:2px}
.otw-more__chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .26s ease}
.otw-more[aria-expanded="true"] .otw-more__chev{transform:rotate(-135deg) translate(-1px,-1px)}

/* Expandable detail panel (home cards) */
.otw-panel{font-family:Inter,sans-serif;font-size:14px;line-height:1.5;color:#3A3F45;margin-top:10px}
.otw-panel__lead{margin:0 0 6px;font-family:Poppins,sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.6px;text-transform:uppercase;color:#916312}
.otw-panel ul{list-style:none;margin:0 0 8px;padding:0}
.otw-panel li{position:relative;padding-left:16px;margin:0 0 4px}
.otw-panel li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:#DCA433}
.otw-panel__more{display:inline-block;font-family:Poppins,sans-serif;font-weight:600;
  font-size:13px;color:#916312}
.otw-js .otw-panel[hidden]{display:none}
.otw-js .otw-panel.otw-panel--anim{animation:otwFadeIn .3s cubic-bezier(.22,.7,.28,1) both}
@keyframes otwFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============ 6. Home "What We Do" swipe deck (tablet + mobile) ============ */
.otw-deckwrap{position:relative}
@media(max-width:1024px){
  .otw-js .otw-deck{display:flex!important;flex-wrap:nowrap!important;
    justify-content:flex-start!important;align-items:stretch!important;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:16px!important;padding-bottom:2px}
  .otw-js .otw-deck::-webkit-scrollbar{display:none}
  .otw-js .otw-deck>.elementor-element{
    flex:0 0 auto!important;width:min(86%,420px)!important;max-width:none!important;
    scroll-snap-align:start;scroll-snap-stop:always}
  .otw-js .otw-deckbar{display:flex;align-items:center;justify-content:center;
    gap:14px;margin-top:18px;flex-wrap:wrap}
  .otw-js .otw-deckhint{width:100%;text-align:center;margin:14px 0 0;
    font-family:Inter,sans-serif;font-size:13px;color:#6B7280}
}
@media(min-width:1025px){.otw-js .otw-deckbar,.otw-js .otw-deckhint{display:none}}

/* Shared round control buttons */
.otw-nav{display:inline-flex!important;align-items:center;justify-content:center;
  width:44px!important;height:44px!important;flex:0 0 44px;padding:0!important;margin:0!important;
  background:#fff!important;background-color:#fff!important;
  border:1px solid #D4D8DE!important;border-radius:50%!important;cursor:pointer;
  color:#1A1A1A!important;box-shadow:none;
  transition:border-color .24s ease,box-shadow .24s ease,background-color .24s ease}
.otw-nav:hover{border-color:#DCA433!important;background-color:#FCF8F0!important;
  box-shadow:0 6px 16px rgba(20,22,28,.08)}
.otw-nav[disabled]{opacity:.4;cursor:default;box-shadow:none}
.otw-nav svg{width:15px;height:15px;pointer-events:none}

/* Position indicators */
.otw-dots{display:inline-flex;align-items:center;gap:6px}
.otw-dot{width:32px!important;height:32px!important;padding:0!important;margin:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  background:none!important;background-color:transparent!important;
  border:0!important;border-radius:50%!important;box-shadow:none!important;cursor:pointer;
  min-height:0!important}
.otw-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#D4D8DE;
  transition:background .24s ease,transform .24s ease}
.otw-dot[aria-current="true"]::before{background:#B98220;transform:scale(1.35)}
.otw-dot:hover::before{background:#DCA433}

.otw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ 7. Services card flip - all twelve ============ */
.otw-flip{transform-style:preserve-3d}
.otw-js .otw-flip{transition:transform .56s cubic-bezier(.22,.7,.28,1),
                             box-shadow .28s cubic-bezier(.22,.7,.28,1),
                             border-color .28s cubic-bezier(.22,.7,.28,1)}
.otw-js .otw-flip>*{backface-visibility:hidden}
.otw-js .otw-flip.is-flipped{transform:rotateY(180deg)!important}
.otw-js .otw-flip.is-flipped:hover,.otw-js .otw-flip.is-flipped:focus-within{
  transform:rotateY(180deg)!important}
.otw-js .otw-flip.is-flipped::after{transform:scaleX(0)}
.otw-back{display:flex;flex-direction:column;gap:10px;
  font-family:Inter,sans-serif;font-size:14.5px;line-height:1.6;color:#3A3F45}
.otw-back__q{margin:0;font-family:Poppins,sans-serif;font-weight:600;font-size:15px;
  line-height:1.35;color:#1A1A1A}
.otw-back p{margin:0}
.otw-back__lead{margin:2px 0 0!important;font-family:Poppins,sans-serif;font-weight:600;
  font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:#916312}
.otw-back ul{list-style:none;margin:0;padding:0}
.otw-back li{position:relative;padding-left:15px;margin:0 0 5px}
.otw-back li:last-child{margin-bottom:0}
.otw-back li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:#DCA433}
.otw-back__note{font-size:12px!important;line-height:1.45;color:#6B7280}
/* The rotated face must be the Elementor widget wrapper, so it is a direct
   child of the card's 3D context. */
.otw-js .otw-flip>.otw-backwrap{position:absolute;inset:0;z-index:2;
  transform:rotateY(180deg);backface-visibility:hidden;margin:0;width:auto}
.otw-js .otw-flip:not(.is-flipped)>.otw-backwrap{visibility:hidden}
.otw-js .otw-backwrap>.elementor-widget-container{height:100%}
.otw-js .otw-backwrap .otw-back{height:100%;padding:22px 24px;overflow:auto;gap:8px;
  background:#fff;border-radius:14px;font-size:14px;line-height:1.55}
.otw-js .otw-backwrap .otw-back__q{font-size:15px}
.otw-back__return{margin-top:auto;align-self:flex-start}
/* Because every card is sized to its taller face, the front control is pulled
   to the card foot so the twelve Learn More buttons align on a single baseline
   instead of leaving a ragged gap under each description. */
.otw-js .otw-flip>.otw-more.otw-flip__open{margin-top:auto!important}
/* Off-flow natural-height measurement for the card-height strategy. */
.otw-js .otw-flip>.otw-backwrap.otw-measuring{position:absolute;top:0;left:0;right:0;
  bottom:auto;height:auto!important;visibility:hidden!important;transform:none!important;
  pointer-events:none}
.otw-js .otw-backwrap.otw-measuring .otw-back{height:auto!important;overflow:visible!important}

/* ============ 8. Our Process - progress rail ============ */
.otw-js .otw-stage{position:relative}
.otw-js .otw-stage>*{position:relative;z-index:1}
.otw-js .otw-stage::before,
.otw-js .otw-stage::after{content:"";position:absolute;left:27px;width:2px;
  top:0;bottom:0;pointer-events:none;z-index:0}
.otw-js .otw-stage::before{background:#E2E5EA}
.otw-js .otw-stage::after{background:linear-gradient(#DCA433,#B98220);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1000ms cubic-bezier(.22,.7,.28,1);transition-delay:var(--otw-d,0ms)}
.otw-js .otw-stage.is-in::after{transform:scaleY(1)}
.otw-js .otw-stage:first-child::before,
.otw-js .otw-stage:first-child::after{top:46px}
.otw-js .otw-stage:last-child::before,
.otw-js .otw-stage:last-child::after{bottom:calc(100% - 46px)}

/* ============ 9. Our Work - screenshot galleries ============ */
.otw-gal{position:relative}
.otw-gal__track{position:absolute;inset:0;display:flex;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;background:#fff}
.otw-gal__track::-webkit-scrollbar{display:none}
.otw-gal__track:focus-visible{outline:3px solid #DCA433;outline-offset:-3px}
.otw-gal__slide{flex:0 0 100%;width:100%;height:100%;margin:0;padding:0;
  scroll-snap-align:start;scroll-snap-stop:always}
.otw-gal__slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.otw-gal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:36px!important;height:36px!important;flex-basis:36px;
  background-color:rgba(255,255,255,.94)!important;
  box-shadow:0 2px 10px rgba(20,22,28,.20)}
.otw-gal__nav--prev{left:8px}
.otw-gal__nav--next{right:8px}
.otw-gal__nav svg{width:13px;height:13px}
.otw-gal__bar{position:absolute;left:0;right:0;bottom:7px;z-index:3;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.otw-gal__bar>*{pointer-events:auto}
.otw-gal__dots{display:inline-flex;align-items:center;gap:0;
  background-color:rgba(255,255,255,.94);border-radius:20px;padding:0 4px;
  box-shadow:0 2px 10px rgba(20,22,28,.20)}
.otw-gal__dots .otw-dot{width:26px!important;height:26px!important}
.otw-gal__count{position:absolute;top:8px;right:8px;z-index:3;
  font-family:Inter,sans-serif;font-size:11px;font-weight:600;color:#3A3F45;
  background-color:rgba(255,255,255,.94);border-radius:20px;padding:3px 9px;
  box-shadow:0 2px 10px rgba(20,22,28,.20)}
@media(max-width:767px){
  .otw-gal__nav{width:32px!important;height:32px!important}
  .otw-gal__nav--prev{left:6px}
  .otw-gal__nav--next{right:6px}
  .otw-gal__nav svg{width:12px;height:12px}
  .otw-gal__dots .otw-dot{width:24px!important;height:24px!important}
}

/* ============ 10. Reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  .otw-js .otw-rv,
  .otw-js .otw-rv.is-in{opacity:1!important;filter:none!important;transform:none!important;
    transition:none!important;will-change:auto}
  .otw-js .otw-stage::after{transform:scaleY(1)!important;transition:none!important}
  /* Lifecycle: the panel opens at once. No flight, no blur, no scale, no draw. */
  .otw-js .otw-lcpanel.is-assembling,
  .otw-js .otw-lcpanel.is-assembling .ot-hv-step,
  .otw-js .otw-lcpanel.is-assembling .ot-hv-fill,
  .otw-js .otw-lcpanel.is-assembling .otw-lcframe i{animation:none!important}
  .otw-js .otw-lcpanel.is-assembling{overflow:visible;will-change:auto}
  .otw-js .otw-lcpanel .ot-hv-step{opacity:1!important;transform:none!important;will-change:auto}
  .otw-js .otw-lcpanel .ot-hv-fill{transform:scaleY(1)!important}
  .otw-js .otw-lcpanel .otw-lcframe{display:none}
  .otw-lcbtn{transition:none!important}
  .otw-lcbtn:hover,.otw-lcbtn:active{transform:none}
  .otw-card,.otw-card::after,.otw-more,.otw-nav,.otw-dot::before{transition:none!important}
  .otw-card:hover,.otw-card:focus-within{transform:none!important}
  /* No 3D rotation: the back becomes an immediate content swap that covers
     the front. Every control and all information is preserved. */
  .otw-js .otw-flip{transition:none!important;transform-style:flat}
  .otw-js .otw-flip.is-flipped,
  .otw-js .otw-flip.is-flipped:hover,
  .otw-js .otw-flip.is-flipped:focus-within{transform:none!important}
  .otw-js .otw-flip>.otw-backwrap{transform:none!important;backface-visibility:visible;
    transition:opacity .15s linear}
  .otw-js .otw-flip:not(.is-flipped)>.otw-backwrap{visibility:hidden}
  .otw-js .otw-panel.otw-panel--anim{animation:none}
  .otw-gal__track{scroll-behavior:auto!important}
  .otw-js .otw-deck{scroll-behavior:auto!important}
}