/* Sea Dogs: the sections below the tour, restyled with the house motion system (web-motion reveal recipe, ui-motion
   rules: transform/opacity only, ease-out, nothing starts hidden until JS has run, reduced motion = final state). */
:root { --ease-out: cubic-bezier(.2,.7,.2,1); }

/* reveals: sections.js adds .rv + data-rv to elements below the fold, then .in when they enter the view */
.js .rv { opacity: 0; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rv[data-rv="up"] { transform: translateY(28px); }
.js .rv[data-rv="left"] { transform: translateX(-32px); }
.js .rv[data-rv="right"] { transform: translateX(32px); }
.js .rv[data-rv="scale"] { transform: scale(.94); }
.js .rv.in { opacity: 1; transform: none; }

/* section headings unmask line by line */
.js .mask { display: block; overflow: hidden; padding-bottom: .06em; }
.js .mask > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-out); }
.js .mask.in > span { transform: none; }

/* how it works: a gold line draws through the three steps as the section scrolls by */
.how-steps { position: relative; }
.how-steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: 3.1rem; height: 2px; background: rgba(212,168,67,.18); }
.how-steps::after { content: ""; position: absolute; left: 4%; right: 4%; top: 3.1rem; height: 2px; background: var(--gold);
  transform-origin: left; transform: scaleX(var(--how, 0)); }
.how-steps > div { z-index: 1; }
.how-steps > div > div:first-child { line-height: 1 !important; margin-bottom: .9rem !important; }   /* 01/02/03 no longer touch the h3 */
@media (max-width: 900px) { .how-steps::before, .how-steps::after { display: none; } }

/* why us: stat numbers count up; their labels breathe a bit */
#why [data-count] { font-variant-numeric: tabular-nums; line-height: 1.05 !important; margin-bottom: .2rem; }

/* before & after: drag to compare (real job photos) */
.ba-images.cmp { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; background: #000; touch-action: pan-y; }
.ba-images.cmp .ba-img { position: absolute; inset: 0; aspect-ratio: auto; }
.ba-images.cmp .ba-img.before { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); z-index: 1; }
.ba-images.cmp .ba-img img { transition: none; }
.ba-card:hover .ba-images.cmp .ba-img img { transform: none; }
.ba-images.cmp .ba-divider { left: var(--x, 50%); z-index: 3; width: 2px; margin-left: -1px; }
.ba-images.cmp .ba-divider::after { content: "\2194"; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 1.2rem; display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(8,18,31,.45); }
.ba-images.cmp .ba-label.before { z-index: 2; }
.ba-images.cmp .ba-label.after { left: auto; right: .55rem; z-index: 2; }
.ba-images.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; z-index: 4; }
.ba-images.cmp:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.ba-hint { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: -.4rem 0 1.4rem; }

/* review fixes: readable small text, contrast, tap targets */
.ba-label { font-size: .72rem !important; }
.nav-logo-sub { font-size: .72rem !important; }
.section-label { font-size: .78rem !important; }
footer p { color: rgba(176,196,216,.88) !important; }
footer a, #packages p a[href^="tel"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; }
.ba-info h3, .areas-col h3 { font-family: var(--font-d); }
.ba-info h3 { font-size: 1.05rem; letter-spacing: .06em; color: var(--white); margin-bottom: .3rem; }
.areas-col h3 { font-size: 1rem; letter-spacing: .12em; color: var(--gold); margin-bottom: 1rem; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .mask > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .how-steps::after { transform: scaleX(1); }
}