/* "Our Work" — Device stack showcase (v1.7.4). Markup: template-parts/our-work.php */
.wbd-ow {
    --ow-cta: rgb(var(--wbd-cta-rgb, 29 78 216));
    --ow-cta-12: rgb(var(--wbd-cta-rgb, 29 78 216) / .12);
    --ow-cta-25: rgb(var(--wbd-cta-rgb, 29 78 216) / .25);
    --ow-text: rgb(var(--wbd-text-rgb, 15 23 42));
    --ow-muted: rgb(var(--wbd-muted-rgb, 100 116 139));
    --ow-card: rgb(var(--wbd-card-rgb, 255 255 255));
    --ow-canvas: rgb(var(--wbd-canvas-rgb, 247 249 252));
    --ow-line: rgb(var(--wbd-border-rgb, 226 232 240));
    --ow-frame: #1b1d24;
    --ow-screen-h: 360px;
    --ow-phone-h: 320px;
    position: relative;
    padding: 88px 0;
    overflow: hidden;
    color: var(--ow-text);
}
.dark .wbd-ow {
    --ow-text: rgb(var(--wbd-text-dark-rgb, 248 250 252));
    --ow-card: rgb(var(--wbd-card-dark-rgb, 16 27 45));
    --ow-canvas: rgb(var(--wbd-canvas-dark-rgb, 8 17 31));
    --ow-line: rgba(255, 255, 255, .1);
    --ow-cta-12: rgb(var(--wbd-cta-rgb, 29 78 216) / .24);
    --ow-frame: #0b0d12;
}
/* soft glow behind the devices */
.wbd-ow::before {
    content: ""; position: absolute; left: -10%; top: 20%; width: 60%; height: 70%;
    background: radial-gradient(closest-side, var(--ow-cta-12), transparent);
    pointer-events: none;
}
.wbd-ow-wrap { position: relative; max-width: 80rem; margin: 0 auto; padding: 0 24px; }
.wbd-ow-head { max-width: 640px; }
.wbd-ow-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ow-muted); }
.wbd-ow-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 10px; color: var(--ow-text); }
.wbd-ow-intro { color: var(--ow-muted); font-size: 15px; margin: 0; }

.wbd-ow-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 40px; }

/* ---- devices ---- */
.wbd-ow-devices { position: relative; height: calc(var(--ow-screen-h) + 70px); touch-action: pan-y; }
.wbd-ow-slide { position: absolute; inset: 0; transition: opacity .6s ease, transform .75s cubic-bezier(.2, .8, .2, 1); }
.wbd-ow-slide.is-prev { opacity: 0; transform: translateX(-48px) scale(.97); pointer-events: none; }
.wbd-ow-slide.is-next { opacity: 0; transform: translateX(48px) scale(.97); pointer-events: none; }

.wbd-ow-laptop { position: absolute; left: 4%; top: 0; width: 82%; }
.wbd-ow-laptop.is-solo { width: 90%; }
.wbd-ow-screen { border: 10px solid var(--ow-frame); border-bottom-width: 14px; border-radius: 16px 16px 0 0; background: #fff; overflow: hidden; box-shadow: 0 40px 70px -35px rgba(15, 23, 42, .45); }
.wbd-ow-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #f1f2f5; border-bottom: 1px solid #e3e5ea; }
.wbd-ow-bar span { width: 8px; height: 8px; border-radius: 50%; background: #cfd2d9; }
.wbd-ow-bar em { flex: 1; margin-left: 8px; font-style: normal; font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #6b7280; background: #fff; border-radius: 999px; padding: 1px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbd-ow-laptop .wbd-ow-view { height: var(--ow-screen-h); }
.wbd-ow-base { height: 14px; margin: 0 -6%; background: linear-gradient(#d4d6dc, #a8abb4); border-radius: 0 0 14px 14px; position: relative; }
.wbd-ow-base::after { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 5px; background: #989ba4; border-radius: 0 0 6px 6px; }

.wbd-ow-phone { position: absolute; right: 0; bottom: 0; width: 160px; border: 8px solid var(--ow-frame); border-radius: 28px; background: #fff; overflow: hidden; box-shadow: 0 30px 50px -18px rgba(15, 23, 42, .5); }
.wbd-ow-phone::before { content: ""; position: absolute; z-index: 2; top: 6px; left: 50%; width: 46px; height: 12px; margin-left: -23px; border-radius: 8px; background: var(--ow-frame); }
.wbd-ow-phone .wbd-ow-view { height: var(--ow-phone-h); }

.wbd-ow-view { position: relative; overflow: hidden; background: #fff; }
.wbd-ow-shot { display: block; width: 100%; height: auto; max-width: none; will-change: transform; }
/* the screenshot glides top → bottom and back (distance set by our-work.js as --ow-pan) */
.wbd-ow-slide.is-on.is-playing .wbd-ow-shot { animation: wbd-ow-pan var(--ow-dur, 9s) ease-in-out infinite alternate; }
.wbd-ow.is-paused .wbd-ow-shot { animation-play-state: paused !important; }
@keyframes wbd-ow-pan {
    0%, 12% { transform: translateY(0); }
    88%, 100% { transform: translateY(calc(var(--ow-pan, 0px) * -1)); }
}
.wbd-ow-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--ow-cta), rgb(var(--wbd-cta-rgb, 29 78 216) / .6)); }

/* ---- text panel ---- */
.wbd-ow-texts { display: grid; } /* all projects share one cell: the panel keeps the height of the longest, so the arrows never jump */
.wbd-ow-text { grid-area: 1 / 1; animation: wbd-ow-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.wbd-ow-text[hidden] { display: block; visibility: hidden; animation: none; }
@keyframes wbd-ow-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wbd-ow-num { font-size: 68px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ow-cta); }
@supports not (-webkit-text-stroke: 1px black) { .wbd-ow-num { color: var(--ow-cta-25); } }
.wbd-ow-name { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 12px 0 2px; color: var(--ow-text); }
.wbd-ow-meta { font-size: 13px; color: var(--ow-muted); margin: 0; }
.wbd-ow-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 14px 0; }
.wbd-ow-chips li { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: var(--ow-cta); background: var(--ow-cta-12); border: 1px solid var(--ow-cta-25); }
.dark .wbd-ow-chips li { color: var(--wbd-highlight, #60A5FA); }
.wbd-ow-result { font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; color: var(--ow-text); }
.wbd-ow-quote { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--ow-cta); background: var(--ow-canvas); border-radius: 0 10px 10px 0; }
.wbd-ow-quote p { margin: 0; font-size: 13.5px; font-style: italic; color: var(--ow-text); }
.wbd-ow-quote cite { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--ow-muted); }
.wbd-ow-visit { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--ow-cta); color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.wbd-ow-visit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgb(var(--wbd-cta-rgb, 29 78 216) / .55); }
.wbd-ow-visit:focus-visible, .wbd-ow-btn:focus-visible, .wbd-ow-tab:focus-visible { outline: 2px solid var(--ow-cta); outline-offset: 3px; }
.wbd-ow .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.wbd-ow-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.wbd-ow-btn { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ow-line); background: var(--ow-card); color: var(--ow-text); cursor: pointer; transition: border-color .2s, color .2s, transform .2s; }
.wbd-ow-btn:hover { border-color: var(--ow-cta); color: var(--ow-cta); transform: translateY(-1px); }
.wbd-ow-prog { flex: 1; height: 3px; border-radius: 3px; background: var(--ow-line); overflow: hidden; }
.wbd-ow-prog i { display: block; height: 100%; width: 0; background: var(--ow-cta); }
.wbd-ow-prog i.is-run { animation: wbd-ow-prog var(--ow-step, 7s) linear forwards; }
.wbd-ow.is-paused .wbd-ow-prog i { animation-play-state: paused; }
@keyframes wbd-ow-prog { to { width: 100%; } }
.wbd-ow-count { font-size: 12px; color: var(--ow-muted); font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }

/* ---- project tabs ---- */
.wbd-ow-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ow-line); }
.wbd-ow-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ow-line); background: transparent; color: var(--ow-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; }
.wbd-ow-tab b { font-weight: 700; color: var(--ow-cta); }
.wbd-ow-tab:hover { color: var(--ow-text); border-color: var(--ow-cta-25); }
.wbd-ow-tab.is-on { color: var(--ow-text); background: var(--ow-cta-12); border-color: var(--ow-cta-25); }


/* ---- entrance (added by JS once the section is on screen) ---- */
.wbd-ow.js .wbd-ow-head, .wbd-ow.js .wbd-ow-devices, .wbd-ow.js .wbd-ow-panel { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.wbd-ow.js .wbd-ow-devices { transition-delay: .12s; }
.wbd-ow.js .wbd-ow-panel { transition-delay: .24s; }
.wbd-ow.js.is-in .wbd-ow-head, .wbd-ow.js.is-in .wbd-ow-devices, .wbd-ow.js.is-in .wbd-ow-panel { opacity: 1; transform: none; }

/* ---- tablet ---- */
@media (max-width: 1023px) {
    .wbd-ow { padding: 64px 0; --ow-screen-h: 320px; --ow-phone-h: 280px; }
    .wbd-ow-stage { grid-template-columns: 1fr; gap: 28px; }
    .wbd-ow-devices { max-width: 640px; width: 100%; margin: 0 auto; }
}
/* ---- phones ---- */
@media (max-width: 639px) {
    .wbd-ow { padding: 56px 0; --ow-screen-h: 190px; --ow-phone-h: 200px; }
    .wbd-ow-wrap { padding: 0 16px; }
    .wbd-ow-devices { height: calc(var(--ow-screen-h) + 64px); }
    .wbd-ow-screen { border-width: 6px; border-bottom-width: 9px; border-radius: 10px 10px 0 0; }
    .wbd-ow-bar { padding: 5px 7px; }
    .wbd-ow-bar em { font-size: 9.5px; }
    .wbd-ow-laptop { left: 4%; width: 76%; }
    .wbd-ow-base { height: 9px; }
    .wbd-ow-phone { width: 100px; border-width: 5px; border-radius: 18px; }
    .wbd-ow-phone::before { width: 30px; height: 8px; margin-left: -15px; top: 4px; }
    .wbd-ow-num { font-size: 48px; }
    .wbd-ow-name { font-size: 20px; }
    .wbd-ow-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
    .wbd-ow-tabs::-webkit-scrollbar { display: none; }
    .wbd-ow-tab { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .wbd-ow *, .wbd-ow *::before { animation: none !important; transition: none !important; }
    .wbd-ow.js .wbd-ow-head, .wbd-ow.js .wbd-ow-devices, .wbd-ow.js .wbd-ow-panel { opacity: 1; transform: none; }
}