/* OW build 2.39.0 — if this line is not in the CSS your browser has, an old copy is cached */
/* ==========================================================
   OW — Our Work case study widgets
   Own namespace, own reveal vocabulary. Colours fall back to
   the shared SCW tokens so these sit inside the same system
   as the other widgets.
   ========================================================== */

.ow-hd {
    --ow-brand: var(--scw-accent, #FF3874);
    --ow-rule: rgba(255, 255, 255, 0.12);
    --ow-text: var(--scw-text, #F4F6F8);
    --ow-muted: var(--ow-body, #FFFFFF);
    --ow-name: 66;
    --ow-intro: 34;
    --ow-ease: cubic-bezier(.22, .61, .36, 1);

    width: 100%;
    color: var(--ow-text);
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

/* ── Title row ──────────────────────────────────────────── */

.ow-hd__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 3vw, 40px);
    /* Aligned from the top. Sitting the intro on the name's baseline dropped
       it most of the way down the row, since the name is several times taller
       than the paragraph beside it. */
    align-items: var(--ow-hd-align, start);
    padding-bottom: clamp(20px, 3vw, 34px);
}

.ow-hd--rules .ow-hd__head { border-bottom: 1px solid var(--ow-rule); }

.ow-hd__name {
    margin: 0;
    font-size: clamp(46px, 10vw, 132px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ow-brand);
    overflow-wrap: break-word;
}

.ow-hd__intro {
    margin: 0;
    padding-top: var(--ow-hd-intro-top, 0.55em);
    max-width: 45ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ow-muted);
    text-wrap: pretty;
}

@media (min-width: 860px) {
    .ow-hd__head { grid-template-columns: var(--ow-name, 66)fr var(--ow-intro, 34)fr; }
    .ow-hd__intro { justify-self: end; }
}

/* ── Banner ─────────────────────────────────────────────── */

.ow-hd__media {
    margin-top: clamp(16px, 2.5vw, 28px);
    overflow: hidden;
    border-radius: 6px;
    line-height: 0;
}
.ow-hd__media img,
.ow-hd__media video {
    width: 100%;
    height: clamp(240px, 62vh, 720px);
    object-fit: cover;
    display: block;
}

/* ── Credits strip ──────────────────────────────────────── */

.ow-hd__credits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px clamp(20px, 3vw, 44px);
    padding: clamp(16px, 2.4vw, 26px) 0;
    font-size: clamp(13px, 1.1vw, 15px);
    color: var(--ow-muted);
}
.ow-hd--rules .ow-hd__credits { border-bottom: 1px solid var(--ow-rule); }

.ow-hd__credit {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}
.ow-hd__credit b {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    color: var(--ow-text);
    white-space: nowrap;
}
.ow-hd__credit span { text-wrap: pretty; }

.ow-dot {
    color: var(--ow-brand);
    flex: none;
    position: relative;
    top: -0.15em;
}

/* ── Reveals ────────────────────────────────────────────
   Four entrances, matching the reference: the name slides up
   from behind a mask, the intro rises, the banner irises open
   from the centre, and the credits wipe in from the left.

   The hidden starting state lives behind `.ow--armed`, which the
   reveal script adds to a widget root the moment it has actually
   taken charge of that root's children. Nothing is hidden until
   something is in place to un-hide it, so a script that is blocked,
   deferred, cached stale or never enqueued costs the animation and
   nothing else. Content held at zero opacity waiting on a script
   that never arrives is a blank section — a far worse failure than
   a missed entrance, and not one a visitor can work around.
──────────────────────────────────────────────────────── */

.ow-mask { overflow: hidden; display: block; }

/* The hidden state is reached instantly (transition: none) and the animation
   lives on the `.is-in` rule, so arming never plays the entrance in reverse —
   without this the element would fade from visible down to hidden in front of
   the visitor before rising back in. */

.ow-r--rise { display: inline-block; }
.ow--armed .ow-r--rise { transform: translateY(105%); transition: none; }
.ow--armed .ow-r--rise.is-in {
    transform: none;
    transition: transform .8s var(--ow-ease);
    transition-delay: calc(var(--base, 400ms) + (var(--d, 0) * var(--step, 100ms)));
}

.ow--armed .ow-r--up { opacity: 0; transform: translateY(20px); transition: none; }
.ow--armed .ow-r--up.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease, transform .8s var(--ow-ease);
    transition-delay: calc(var(--base, 400ms) + (var(--d, 0) * var(--step, 100ms)));
}

.ow--armed .ow-r--iris { clip-path: inset(0 50% 0 50% round 6px); transition: none; }
.ow--armed .ow-r--iris.is-in {
    clip-path: inset(0 0 0 0 round 6px);
    transition: clip-path 1.1s var(--ow-ease);
    transition-delay: calc(var(--base, 400ms) + (var(--d, 0) * var(--step, 200ms)));
}

.ow--armed .ow-r--wipe { clip-path: inset(0 100% 0 0); transition: none; }
.ow--armed .ow-r--wipe.is-in {
    clip-path: inset(0 0 0 0);
    transition: clip-path .9s var(--ow-ease);
    transition-delay: calc(var(--base, 500ms) + (var(--d, 0) * var(--step, 150ms)));
}

.ow-r--pop { transform-origin: center; }
.ow--armed .ow-r--pop { transform: scale(0); transition: none; }
.ow--armed .ow-r--pop.is-in {
    transform: none;
    transition: transform .5s var(--ow-ease);
    transition-delay: calc(var(--base, 400ms) + (var(--d, 0) * var(--step, 100ms)));
}

.ow--noanim .ow-r,
.ow--noanim .ow-r--rise,
.ow--noanim .ow-r--up,
.ow--noanim .ow-r--iris,
.ow--noanim .ow-r--wipe,
.ow--noanim .ow-r--pop {
    opacity: 1;
    transform: none;
    clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
    .ow-r--rise, .ow-r--up, .ow-r--iris, .ow-r--wipe, .ow-r--pop,
    .ow--armed .ow-r--rise, .ow--armed .ow-r--up, .ow--armed .ow-r--iris,
    .ow--armed .ow-r--wipe, .ow--armed .ow-r--pop {
        transition: none;
        opacity: 1;
        transform: none;
        clip-path: none;
    }
}


/* ══════════════════════════════════════════════════════════
   OW · INTRO — headline left, points right, grid beneath
   ══════════════════════════════════════════════════════════ */

.ow-in {
    --ow-brand: var(--scw-accent, #FF3874);
    --ow-text: var(--scw-text, #F4F6F8);
    --ow-muted: var(--ow-body, #FFFFFF);
    --ow-ease: cubic-bezier(.22, .61, .36, 1);
    --ow-gap: 16px;
    --ow-cols: 4;

    width: 100%;
    color: var(--ow-muted);
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

.ow-in__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(22px, 3.4vw, 44px);
}

/* Headline takes a third, the points sit in the right half — the reference
   leaves a deliberate empty column between them. */
@media (min-width: 860px) {
    .ow-in__top { grid-template-columns: 4fr 1fr 6fr; }
    .ow-in__head { grid-column: 1; }
    .ow-in__body { grid-column: 3; }
}

.ow-in__title {
    margin: 0;
    font-size: var(--ow-h2, 40px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ow-text);
    text-wrap: balance;
}

.ow-in__body {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 2.6vw, 34px);
}

/* Each point is masked so its copy slides up from behind the edge */
.ow-in__point { overflow: hidden; }
.ow-in__point-in { display: flex; flex-direction: column; gap: 8px; }

.ow-in__pt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ow-text);
}

.ow-in__point p {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ow-muted);
    text-wrap: pretty;
}

.ow-in .ow-dot { color: var(--ow-brand); flex: none; }

/* ── Image grid ─────────────────────────────────────────── */

.ow-in__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ow-gap);
    margin-top: clamp(34px, 5vw, 72px);
}

@media (min-width: 700px) {
    .ow-in__grid { grid-template-columns: repeat(var(--ow-cols), minmax(0, 1fr)); }
}

.ow-in__cell {
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    line-height: 0;
    background: rgba(255, 255, 255, 0.04);
}
.ow-in__cell img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--ow-ease);
}
.ow-in--zoom .ow-in__cell:hover img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
    .ow-in__cell img { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   OW · STATEMENT — centred text, wide media beneath
   ══════════════════════════════════════════════════════════ */

.ow-st {
    --ow-brand: var(--scw-accent, #FF3874);
    --ow-text: var(--scw-text, #F4F6F8);
    --ow-muted: var(--ow-body, #FFFFFF);
    --ow-ease: cubic-bezier(.22, .61, .36, 1);
    --ow-body-delay: .3s;

    width: 100%;
    color: var(--ow-muted);
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

.ow-st__text {
    max-width: 664px;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.4vw, 18px);
}
.ow-st--centre .ow-st__text { margin-inline: auto; width: 100%; }

/* The reference is left-aligned on a phone and centred from tablet up —
   a centred paragraph at narrow widths is hard to read. */
@media (min-width: 768px) {
    .ow-st--centre .ow-st__text { text-align: center; }
}

.ow-st__title {
    margin: 0;
    font-size: var(--ow-h2, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ow-text);
    text-wrap: balance;
}

.ow-st__body { overflow: hidden; }
.ow-st__body p {
    margin: 0 0 1em;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ow-muted);
    text-wrap: pretty;
}
.ow-st__body p:last-child { margin-bottom: 0; }

/* ── Media ──────────────────────────────────────────────── */

/* The separation between copy and picture is a gap on the container, not a
   margin on the figure. A margin can be reset by any later rule, by the
   theme's own figure styling, or by the shorthand in this file — a flex gap
   cannot, and it collapses correctly when either half is absent. */
.ow-st {
    display: flex;
    flex-direction: column;
    gap: var(--ow-st-gap, 72px);
}
.ow-st__media { margin: 0; }

.ow-st__frame {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    line-height: 0;
    background: rgba(255, 255, 255, 0.03);
}

.ow-st__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.ow-st__back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;                 /* an inset only reads once there is width */
    border-radius: inherit;
}
@media (min-width: 640px) {
    .ow-st__back { display: block; }
    .ow-st__pad { position: relative; padding: clamp(2rem, 7vw, 7rem); }
}
.ow-st__pad { position: relative; }
.ow-st__pad .ow-st__img,
.ow-st__pad .ow-st__embed { border-radius: 6px; }

.ow-st__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}
.ow-st__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Contained matches the text measure; full bleeds past the container. */
.ow-st--m-contained .ow-st__media { max-width: 664px; margin-inline: auto; width: 100%; }
.ow-st--m-full .ow-st__media {
    width: 100vw;
    max-width: none;
    /* align-self, since the parent is now a flex column */
    align-self: stretch;
    margin-inline: calc((100% - 100vw) / 2);
}
.ow-st--m-full .ow-st__frame { border-radius: 0; }

.ow-st__cap {
    margin: 14px 0 0;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--ow-muted);
}
.ow-st--centre .ow-st__cap { text-align: center; }

/* ── Video toggle ───────────────────────────────────────── */

.ow-vid { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 14px; }

.ow-vid__btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease, background .25s ease;
}
.ow-st__frame:hover .ow-vid__btn,
.ow-vid__btn:focus-visible { opacity: 1; transform: none; }
.ow-vid__btn:hover { background: rgba(0, 0, 0, 0.7); }
.ow-vid__btn svg { width: 30px; height: 30px; display: block; }
.ow-vid__btn svg { display: grid; }

/* Both glyphs share one grid cell and cross-fade */
.ow-vid__play, .ow-vid__pause { grid-area: 1 / 1; transition: opacity .2s ease; }
.ow-vid__btn[aria-pressed="true"]  .ow-vid__play  { opacity: 0; }
.ow-vid__btn[aria-pressed="true"]  .ow-vid__pause { opacity: 1; }
.ow-vid__btn[aria-pressed="false"] .ow-vid__play  { opacity: 1; }
.ow-vid__btn[aria-pressed="false"] .ow-vid__pause { opacity: 0; }
.ow-vid__btn[aria-pressed="true"]  .ow-vid__off,
.ow-vid__btn[aria-pressed="false"] .ow-vid__on { display: none; }

.ow-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ow-vid__btn { opacity: 1; transform: none; transition: none; }
}


/* ══════════════════════════════════════════════════════════
   OW · TESTIMONIAL
   ══════════════════════════════════════════════════════════ */

.ow-q {
    --ow-brand: var(--scw-accent, #FF3874);
    --ow-rule: rgba(255, 255, 255, 0.12);
    --ow-text: var(--scw-text, #F4F6F8);
    --ow-muted: var(--ow-body, #FFFFFF);

    width: 100%;
    padding-block: 60px;
    color: var(--ow-text);
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

.ow-q--rules-both   { border-top: 1px solid var(--ow-rule); border-bottom: 1px solid var(--ow-rule); }
.ow-q--rules-top    { border-top: 1px solid var(--ow-rule); }
.ow-q--rules-bottom { border-bottom: 1px solid var(--ow-rule); }

.ow-q__in { padding-inline: 0; }
@media (min-width: 768px)  { .ow-q__in { padding-inline: 20px; } }
@media (min-width: 1024px) { .ow-q__in { padding-inline: 48px; } }
@media (min-width: 1536px) { .ow-q__in { padding-inline: 116px; } }

/* Themes routinely style bare blockquote with a pale background, padding, a
   left border and big decorative quote glyphs. All of that lands behind text
   that is deliberately near-white, so the quote disappears into a white slab.
   Reset the element rather than fighting it property by property. */
.ow-q__quote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-style: normal;
    quotes: none;
}
.ow-q__quote::before,
.ow-q__quote::after {
    content: none;
    display: none;
}

/* A max-width small enough to break words apart is never intentional, so the
   floor keeps a bad value from collapsing the quote into a single column. */
.ow-q__text {
    min-width: min(100%, 18ch);
    margin: 0;
    font-size: clamp(23px, 3.4vw, 44px);
    font-weight: 600;
    line-height: 1.3333;
    letter-spacing: -0.02em;
    color: var(--ow-text);
    text-wrap: pretty;
}

.ow-q__cite {
    display: block;
    margin-top: clamp(16px, 1.8vw, 22px);
    font-style: normal;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.5;
}

.ow-q__name { font-weight: 600; color: var(--ow-text); }
.ow-q__role { color: var(--ow-muted); margin-left: 0.35em; }


/* ══════════════════════════════════════════════════════════
   OW · STICKY SCROLL
   ══════════════════════════════════════════════════════════ */

.ow-sk {
    --ow-brand: var(--scw-accent, #FF3874);
    --ow-text: var(--scw-text, #F4F6F8);
    --ow-muted: var(--ow-body, #FFFFFF);
    --ow-ease: cubic-bezier(.22, .61, .36, 1);
    --ow-top: 48px;
    --ow-split: 42;
    --ow-gutter: 64px;

    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    width: 100%;
    color: var(--ow-muted);
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);

    /* position:sticky is cancelled by any clipping ancestor, and this is the
       one element in the widget that could introduce one. */
    overflow: visible;
}

.ow-sk__title {
    margin: 0 0 clamp(12px, 1.4vw, 18px);
    font-size: var(--ow-h2, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ow-text);
    text-wrap: balance;
}

.ow-sk__body { overflow: hidden; }
.ow-sk__body p {
    margin: 0 0 1em;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ow-muted);
    text-wrap: pretty;
}
.ow-sk__body p:last-child { margin-bottom: 0; }

.ow-sk__media {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.ow-sk__cell {
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    line-height: 0;
    background: rgba(255, 255, 255, 0.03);
}
.ow-sk__cell img {
    width: 100%;
    height: auto;
    display: block;
}

/* Two columns and the pin only from tablet up. On a phone the text would pin
   over its own images, which reads as a stuck page rather than an effect. */
@media (min-width: 860px) {

    .ow-sk {
        grid-template-columns:
            calc(var(--ow-split) * 1%)
            minmax(0, 1fr);
        column-gap: var(--ow-gutter);
    }

    .ow-sk__text {
        position: sticky;
        top: var(--ow-top);
        /* Without this the grid item stretches to the full row height and
           sticky has no room to travel. */
        align-self: start;
    }

    .ow-sk--right .ow-sk__text  { grid-column: 2; grid-row: 1; }
    .ow-sk--right .ow-sk__media { grid-column: 1; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ow-sk__text { position: static; }
}


/* ══════════════════════════════════════════════════════════
   THEME SHIELD
   OW widgets sit inside whatever theme the site runs, and
   bare-element styles (blockquote, figure, cite, ul) are the
   ones that collide. Neutralise only what is safe to reset.
   ══════════════════════════════════════════════════════════ */

.ow-hd, .ow-in, .ow-st, .ow-q, .ow-sk {
    box-sizing: border-box;
}
.ow-hd *, .ow-in *, .ow-st *, .ow-q *, .ow-sk *,
.ow-hd *::before, .ow-in *::before, .ow-st *::before, .ow-q *::before, .ow-sk *::before,
.ow-hd *::after, .ow-in *::after, .ow-st *::after, .ow-q *::after, .ow-sk *::after {
    box-sizing: border-box;
}

/* Figures carry theme margins and borders in a lot of themes */
.ow-st__media,
.ow-in__cell,
.ow-sk__cell {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}

.ow-q__cite,
.ow-st__cap {
    font-style: normal;
    quotes: none;
}
.ow-q__cite::before,
.ow-q__cite::after { content: none; }

/* Some themes give lists bullets and indents inside widget areas */
.ow-hd__credits ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Headings already have their margins set explicitly above, so the shield
   only needs to stop a theme adding a top margin — the bottom margins here
   are deliberate and must survive. */
.ow-hd__name,
.ow-in__title,
.ow-st__title,
.ow-sk__title,
.ow-in__pt { margin-top: 0; }


/* ══════════════════════════════════════════════════════════
   OW TYPE SCALE
   One size for body copy and one for section headings, rather
   than each block scaling on its own. Set here so a change
   lands everywhere at once.
   ══════════════════════════════════════════════════════════ */

.ow-hd, .ow-in, .ow-st, .ow-q, .ow-sk {
    --ow-h2: 40px;
    --ow-body-size: 16px;
    --ow-body: #FFFFFF;
}

.ow-hd__intro,
.ow-in__point p,
.ow-in__pt,
.ow-st__body,
.ow-st__body p,
.ow-sk__body,
.ow-sk__body p,
.ow-hd__credit,
.ow-hd__credit span {
    font-size: var(--ow-body-size, 16px);
    line-height: 1.65;
}

.ow-in__title,
.ow-st__title,
.ow-sk__title { font-size: var(--ow-h2, 40px); line-height: 1.15; }

/* Body copy in full white. The muted grey was fine against large type but
   thin against 16px paragraphs on a dark background. */
.ow-hd__intro,
.ow-in__point p,
.ow-st__body,
.ow-st__body p,
.ow-sk__body,
.ow-sk__body p { color: var(--ow-body, #FFFFFF); }

@media (max-width: 767px) {
    .ow-hd, .ow-in, .ow-st, .ow-q, .ow-sk { --ow-h2: 25px; }
}


/* ══════════════════════════════════════════════════════════
   OW · SITES
   The live sites built for the project being viewed.
   ══════════════════════════════════════════════════════════ */

.ow-sl {
    --ow-sl-accent: var(--ow-sl-brand, var(--scw-accent, #FF3874));
    --ow-sl-card:   var(--scw-panel, #0E1017);
    --ow-sl-line:   var(--scw-line, rgba(255,255,255,0.09));
    --ow-sl-text:   var(--scw-text, #F4F6F8);
    --ow-sl-muted:  var(--scw-muted, #99A1AE);
    --ow-sl-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));
    --ow-sl-cols:   2;
    --ow-sl-gap:    22px;

    width: 100%;
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

.ow-sl__h2 {
    margin: 0 0 clamp(22px, 3vw, 34px);
    font-size: var(--ow-h2, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--ow-sl-text);
    text-wrap: balance;
}

.ow-sl__item {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
    text-decoration: none;
    transition: transform var(--scw-t-mid, .45s) var(--ow-sl-ease);
}
.ow-sl__item:hover { transform: translateY(-4px); }
.ow-sl__item:focus-visible { outline: 2px solid var(--ow-sl-accent); outline-offset: 5px; border-radius: 16px; }

.ow-sl__card {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 180px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--ow-sl-card);
    box-shadow:
        0 0 0 1px var(--ow-sl-line),
        0 16px 38px rgba(0, 0, 0, 0.42);
    transition: box-shadow var(--scw-t-mid, .45s) var(--ow-sl-ease);
}
.ow-sl__item:hover .ow-sl__card {
    box-shadow:
        0 0 0 1px var(--ow-sl-accent),
        0 22px 48px rgba(0, 0, 0, 0.55);
}

/* ── Browser frame ──────────────────────────────────────── */

.ow-sl__chrome {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 3;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ow-sl__dots { display: flex; gap: 5px; flex: none; }
.ow-sl__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.ow-sl__dots i:first-child { background: var(--ow-sl-accent); opacity: .85; }

.ow-sl__bar {
    flex: 1;
    min-width: 0;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 3px 10px;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    color: var(--ow-sl-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Capture ────────────────────────────────────────────── */

.ow-sl__shot { position: absolute; inset: 0; overflow: hidden; background: var(--ow-sl-card); }
.ow-sl__shot--framed { inset: 30px 0 0 0; }

.ow-sl__img {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    opacity: 1;
    transition: opacity .4s ease, object-position 3.5s linear;
}

/* Only an automatic capture fades in, and only until it has loaded once —
   holding every image at zero until a script lifts it meant that a script
   which never ran left a card with nothing in it at all. */
.ow-sl__img.scw-ss__img--auto { opacity: 0; }
.ow-sl__img.scw-ss__img--auto.is-ready,
.ow-sl__img.scw-ss__img--auto[src] { opacity: 1; }

.ow-sl--pan .ow-sl__item:hover .ow-sl__img { object-position: bottom center; }

.ow-sl__wait {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 14px;
    text-align: center;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--ow-sl-muted);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 28px),
        var(--ow-sl-card);
}

.ow-sl__go {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ow-sl-accent);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--scw-t-fast, .25s) ease, transform var(--scw-t-fast, .25s) var(--ow-sl-ease);
}
.ow-sl__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ow-sl__item:hover .ow-sl__go, .ow-sl__item:focus-visible .ow-sl__go { opacity: 1; transform: none; }

@media (hover: none) { .ow-sl__go { opacity: 1; transform: none; } }

/* ── Meta ───────────────────────────────────────────────── */

.ow-sl__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ow-sl__name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ow-sl-text);
    transition: color var(--scw-t-fast, .25s) ease;
}
.ow-sl__item:hover .ow-sl__name { color: var(--ow-sl-accent); }

.ow-sl__note { font-size: 16px; line-height: 1.5; color: var(--ow-sl-muted); text-wrap: pretty; }

.ow-sl__url {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--ow-sl-muted);
}

@media (prefers-reduced-motion: reduce) {
    .ow-sl__item, .ow-sl__img, .ow-sl__go { transition: none; }
    .ow-sl--pan .ow-sl__item:hover .ow-sl__img { object-position: top center; }
}


/* ── OW · Sites on the shared slider track ──────────────
   The card is this widget's; the track, arrows and dots
   come from Awards & Partners, so there is one slider to
   maintain rather than two that drift apart.
──────────────────────────────────────────────────────── */

.ow-sl.scw-cr {
    --scw-cr-accent: var(--ow-sl-accent);
    --scw-cr-card:   var(--ow-sl-card);
    --scw-cr-line:   var(--ow-sl-line);
    --scw-cr-text:   var(--ow-sl-text);
    --scw-cr-muted:  var(--ow-sl-muted);
    --scw-cr-stagger: 0%;
}

/* The track's own card element is not used here — the widget draws its own —
   but it is only hidden when it is genuinely empty, so a class collision can
   never blank the visible one. */
.ow-sl .scw-cr__card:empty { display: none; }
.ow-sl .scw-cr__item { scroll-snap-align: start; }

/* Arrows sit clear of the cards on a wide screen and step out below that */
.ow-sl .scw-cr__arrow--prev { left: -20px; }
.ow-sl .scw-cr__arrow--next { right: -20px; }
@media (max-width: 1200px) {
    .ow-sl .scw-cr__arrow { display: none; }
}