/* OW build 2.14.1 — 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.
──────────────────────────────────────────────────────── */

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

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

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

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

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

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

.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 {
        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; }
}