/* SCW build 2.39.0 — if this line is not in the CSS your browser has, an old copy is cached */
/* ==========================================================
   SCW — SHARED DESIGN TOKENS
   Every widget's own variables now fall back to these, so one
   accent, one radius scale and one easing curve run through
   the whole set. Change a value here and it moves everywhere;
   any widget's own control still overrides it locally.
   ========================================================== */

:root {
    /* Palette */
    --scw-accent:  #FF3874;
    --scw-ink:     #08090C;
    --scw-panel:   #0E1017;
    --scw-panel-2: #14161F;
    --scw-line:    rgba(255, 255, 255, 0.09);
    --scw-line-2:  rgba(255, 255, 255, 0.16);
    --scw-text:    #F4F6F8;
    --scw-muted:   #99A1AE;

    /* Radii — three steps, used consistently by size of surface */
    --scw-r-sm: 8px;
    --scw-r-md: 16px;
    --scw-r-lg: 26px;

    /* Motion — one curve, three speeds */
    --scw-ease: cubic-bezier(.22, .61, .36, 1);
    --scw-t-fast: .25s;
    --scw-t-mid:  .45s;
    --scw-t-slow: .7s;

    /* Type */
    --scw-display: 'Bai Jamjuree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --scw-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

    /* Elevation */
    --scw-shadow:    0 18px 50px rgba(0, 0, 0, 0.45);
    --scw-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.6);
}

/* Light sections need the same tokens inverted rather than each widget
   inventing its own light palette. */
.scw-light,
.scw-light :is(.scw-plist, .scw-rev, .scw-bento, .scw-rail) {
    --scw-ink:     #FFFFFF;
    --scw-panel:   #F6F7F9;
    --scw-panel-2: #EFF1F4;
    --scw-line:    rgba(8, 9, 12, 0.10);
    --scw-line-2:  rgba(8, 9, 12, 0.18);
    --scw-text:    #08090C;
    --scw-muted:   #5A6472;
    --scw-shadow:    0 14px 40px rgba(8, 9, 12, 0.10);
    --scw-shadow-lg: 0 24px 60px rgba(8, 9, 12, 0.14);
}

/* One display face and one mono face across every widget */
.scw-deck__statement, .scw-deck__name,
.scw-worlds__h2, .scw-worlds__ptitle,
.scw-orbit__name, .scw-orbit__mark, .scw-orbit__bar b,
.scw-rail__title, .scw-plist__name, .scw-plist__price,
.scw-cine__h, .scw-cine__cardrow b,
.scw-bento__title, .scw-rev__name, .scw-fan__title { font-family: var(--scw-display); }

.scw-deck__cap, .scw-deck__num,
.scw-worlds__eyebrow, .scw-worlds__peyebrow, .scw-worlds__n,
.scw-orbit__hint, .scw-orbit__hold, .scw-orbit__sub,
.scw-rail__count, .scw-plist__eyebrow,
.scw-cine__cardfoot em, .scw-rev__role { font-family: var(--scw-mono); }

/* One focus ring, so keyboard users get a consistent signal */
.scw-rail__card:focus-visible,
.scw-plist__row:focus-visible,
.scw-orbit__card:focus-visible,
.scw-deck__card:focus-visible,
.scw-cine__card:focus-visible,
.scw-worlds__tab:focus-visible {
    outline: 2px solid var(--scw-accent);
    outline-offset: 3px;
}

/* One hairline rule and one glass chip recipe */
.scw-chip,
.scw-rail__ico, .scw-rail__count, .scw-rail__arrow, .scw-rail__nib {
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
}

/* ============================================================
   SCW Widgets for Elementor — Combined Stylesheet v1.1
   1. Service Card
   2. Logo Carousel (Marquee — dual row support)
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. SERVICE CARD
────────────────────────────────────────────────────────── */

.elementor-widget-scw_service_card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.elementor-widget-scw_service_card .elementor-widget-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.scw-card {
    position: relative;
    background-color: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 36px 32px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    transition:
        background-color 0.4s ease,
        border-color     0.4s ease,
        transform        0.3s ease;
}

/* Lift is its own control and applies in every hover mode */
.scw-card:hover { transform: translateY(-4px); }

/* ── Legacy "Classic Fill" hover — only when that mode is selected ── */
.scw-card.scw-hover--classic:hover {
    background-color: #ec4899;
    border-color: #ec4899;
}

.scw-card.scw-hover--classic::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ec4899 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}
.scw-card.scw-hover--classic:hover::before { opacity: 1; }

.scw-card__title {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #ec4899;
    margin: 0 0 16px 0;
    line-height: 1.3;
    flex-shrink: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    transition: color 0.4s ease;
}

.scw-card.scw-hover--classic:hover .scw-card__title { color: #ffffff; }

.scw-card__desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #aaaaaa;
    margin: 0 0 32px 0;
    flex: 1;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    transition: color 0.4s ease;
}

.scw-card.scw-hover--classic:hover .scw-card__desc { color: rgba(255,255,255,0.88); }

.scw-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    margin-top: auto;
}

.scw-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1.5px solid #3a3a3a;
    background: transparent;
    color: #cccccc;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
}

.scw-card.scw-hover--classic:hover .scw-card__btn {
    border-color: rgba(255,255,255,0.6);
    color: #ffffff;
    background: rgba(255,255,255,0.12);
}

.scw-card__btn:hover { background: rgba(255,255,255,0.2) !important; }

.scw-card__arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #3a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
}

.scw-card__arrow svg {
    width: 18px;
    height: 18px;
    stroke: #888888;
    transition: stroke 0.4s ease;
}

.scw-card:hover .scw-card__arrow { transform: rotate(45deg); }

.scw-card.scw-hover--classic:hover .scw-card__arrow {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.1);
}

.scw-card.scw-hover--classic:hover .scw-card__arrow svg { stroke: #ffffff; }

/* Cursor-glow mode: the card no longer floods pink, so the arrow and button
   pick up the accent colour instead of going dead on hover. */
.scw-card.scw-cg:hover .scw-card__arrow {
    border-color: var(--scw-cg-ring, rgba(255,56,116,0.9));
    background: rgba(255,255,255,0.06);
}
.scw-card.scw-cg:hover .scw-card__arrow svg { stroke: var(--scw-cg-ring, #FF3874); }
.scw-card.scw-cg:hover .scw-card__btn {
    border-color: var(--scw-cg-ring, rgba(255,56,116,0.9));
    color: #ffffff;
    background: rgba(255,255,255,0.06);
}
.scw-card.scw-cg .scw-card__arrow,
.scw-card.scw-cg .scw-card__btn { position: relative; z-index: 1; }

/* Equal-height behavior is handled by the .elementor-widget-scw_* wrappers above,
   which set height:100% on the widget itself.
   To get visually equal-height cards across a row in Elementor:
   - Use Section → Edit → Advanced → "Stretch Section" (Elementor built-in), OR
   - Set the column's Content Position to "Stretch"
   We intentionally do NOT override .elementor-column / .e-con styles globally,
   because doing so breaks forms, multi-column rows, and other widgets site-wide. */


/* ──────────────────────────────────────────────────────────
   2. LOGO CAROUSEL (MARQUEE — NEXA style, dual-row capable)
   The approach: two identical "__group" blocks sit side-by-side
   inside ".scw-lc__marquee" (which uses display:flex + gap).
   Both groups animate by translating one full group width
   (100% + gap), producing a perfectly seamless infinite loop.
────────────────────────────────────────────────────────── */

.scw-lc-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* padding is set inline via Elementor responsive control */
}

/* Fade edge overlays */
.scw-lc__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 3;
    pointer-events: none;
}
.scw-lc__fade--left  { left: 0;  background: linear-gradient(to right, var(--scw-lc-fade, #0a0a0a), transparent); }
.scw-lc__fade--right { right: 0; background: linear-gradient(to left,  var(--scw-lc-fade, #0a0a0a), transparent); }

/* Frosted blur edges — blur whatever scrolls behind, strongest at the very edge,
   fading to clear inward via a mask. Sits below the colour fade. */
.scw-lc__blur {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.scw-lc__blur--left {
    left: 0;
    -webkit-mask: linear-gradient(to right, #000 0%, #000 30%, transparent 100%);
            mask: linear-gradient(to right, #000 0%, #000 30%, transparent 100%);
}
.scw-lc__blur--right {
    right: 0;
    -webkit-mask: linear-gradient(to left, #000 0%, #000 30%, transparent 100%);
            mask: linear-gradient(to left, #000 0%, #000 30%, transparent 100%);
}

/* The marquee container — holds 2 groups side by side */
.scw-lc__marquee {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
    /* gap between the two groups must equal the gap between items
       so the loop is seamless across the join */
    gap: var(--scw-gap, 60px);
}

/* Each duplicated group is exactly as wide as its own content.
   min-width:100% used to stretch a short row up to the container, and
   space-around then redistributed the slack between its items — while the gap
   across the join stayed fixed. The spacing therefore changed every time the
   join passed, which read as a stutter. Natural width keeps every gap in the
   row identical, including the one between groups. */
.scw-lc__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--scw-gap, 60px);
    width: max-content;
    animation: scw-marquee-scroll var(--scw-duration, 40s) linear infinite;
}

/* Move by exactly one group's width + one gap.
   Because group width = its content + (n-1)*gap, and we add one more gap
   to slide past the join, group B arrives exactly where group A started. */
/* translate3d rather than translateX: iOS Safari composites a 3D transform on
   its own layer, and a 2D one is repainted alongside everything else in the
   scroller, which is where the jitter came from. */
@keyframes scw-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-100% - var(--scw-gap, 60px)), 0, 0); }
}

/* Promoted once, rather than through will-change on every group — too many
   permanently promoted layers is itself a cause of stutter on a phone. */
.scw-lc__marquee { transform: translateZ(0); }

/* Pause on hover (whole widget) */
/* Pause only the hovered row's groups (not all rows) */
.scw-lc--pause-hover .scw-lc__marquee:hover .scw-lc__group {
    animation-play-state: paused;
}

/* Individual logo item */
.scw-lc__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 10px;
    background: transparent;
    transition: background 0.3s ease, transform 0.35s cubic-bezier(.2,.7,.3,1);
}

.scw-lc__item:hover {
    /* hover effects are applied per-widget via inline styles based on hover_effect setting */
}

.scw-lc__item-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.scw-lc__item img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.scw-lc__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Placeholder text when no image uploaded */
.scw-lc__placeholder {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.scw-lc__item:hover .scw-lc__placeholder {
    opacity: 1;
    color: #000000;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scw-lc__group { animation: none; }
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .scw-lc__fade { width: 60px; }
}


/* ──────────────────────────────────────────────────────────
   3. ICON BOX
────────────────────────────────────────────────────────── */

.elementor-widget-scw_icon_box {
    height: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.elementor-widget-scw_icon_box .elementor-widget-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.scw-ib {
    position: relative;
    background-color: #1a1230;
    border: 1px solid #2a1f4a;
    border-radius: 20px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow: hidden;
    isolation: isolate;            /* keeps blurred glow contained */
    transition:
        transform 0.35s cubic-bezier(.2,.7,.3,1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* Soft blurred color blob — the glow effect */
.scw-ib__glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Content sits above the glow */
.scw-ib__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.scw-ib--lift:hover { transform: translateY(-6px); }

/* Legacy border + shadow flash — skipped when the cursor glow is running,
   the halo and its border highlight do that job instead. */
.scw-ib--lift:not(.scw-cg):hover {
    border-color: rgba(255, 56, 116, 0.35);
    box-shadow: 0 18px 40px -20px rgba(255, 56, 116, 0.45);
}

.scw-ib__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 28px;
    background: linear-gradient(135deg, #FF3874 0%, #7c3aed 100%);
    box-shadow: 0 8px 20px -8px rgba(255, 56, 116, 0.55);
    transition: transform 0.35s cubic-bezier(.2,.7,.3,1);
    flex-shrink: 0;
}

.scw-ib--lift:hover .scw-ib__icon {
    transform: scale(1.08) rotate(-4deg);
}

.scw-ib__icon i {
    font-size: 26px;
    color: #ffffff;
    line-height: 1;
}

.scw-ib__icon svg {
    width: 26px;
    height: 26px;
    fill: #ffffff;
}

.scw-ib__title {
    font-family: 'Syne', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 18px 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.scw-ib__desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #a8a3b8;
    margin: 0;
    flex: 1;
    word-break: break-word;
    overflow-wrap: break-word;
}


/* ──────────────────────────────────────────────────────────
   4. CASE STUDY FLIP CARD
────────────────────────────────────────────────────────── */

.elementor-widget-scw_case_study_card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.elementor-widget-scw_case_study_card .elementor-widget-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.scw-cs {
    position: relative;
    width: 100%;
    height: 440px;
    border-radius: 18px;
    perspective: 1400px;            /* 3D depth for flip variants */
    cursor: pointer;
    outline: none;
}

/* Inner wrapper — this is what rotates for the 3D flip */
.scw-cs__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
    transform-style: preserve-3d;
}

/* The two faces */
.scw-cs__face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* FRONT — image side */
.scw-cs__face--front { background: #1a1230; }

.scw-cs__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
}

.scw-cs__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 55%);
    pointer-events: none;
}

.scw-cs__brand-wrap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 24px 26px;
    z-index: 2;
}

.scw-cs__brand {
    font-family: 'Syne', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* BACK — gradient + description */
.scw-cs__face--back {
    background: linear-gradient(135deg, #FF3874 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 28px;
}

.scw-cs__face--back .scw-cs__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.scw-cs__back-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.scw-cs__back-title {
    font-family: 'Syne', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

.scw-cs__back-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.92);
    margin: 0;
    /* Clamp to keep tidy on smaller cards */
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scw-cs__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #ffffff;
    color: #FF3874;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin-top: 4px;
}

.scw-cs__btn svg {
    transition: transform 0.25s ease;
}

.scw-cs:hover .scw-cs__btn,
.scw-cs:focus-visible .scw-cs__btn {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(0,0,0,0.45);
}

.scw-cs:hover .scw-cs__btn svg,
.scw-cs:focus-visible .scw-cs__btn svg {
    transform: translateX(3px);
}

/* ─── ANIMATION VARIANTS ─── */

/* 1) Horizontal flip (Y axis) — default */
.scw-cs--flip-y .scw-cs__face--back { transform: rotateY(180deg); }
.scw-cs--flip-y:hover .scw-cs__inner,
.scw-cs--flip-y:focus-visible .scw-cs__inner { transform: rotateY(180deg); }

/* 2) Vertical flip (X axis) */
.scw-cs--flip-x .scw-cs__face--back { transform: rotateX(180deg); }
.scw-cs--flip-x:hover .scw-cs__inner,
.scw-cs--flip-x:focus-visible .scw-cs__inner { transform: rotateX(180deg); }

/* 3) Slide up — back slides up from bottom over front */
.scw-cs--slide-up .scw-cs__inner { transform: none; transform-style: flat; }
.scw-cs--slide-up .scw-cs__face { backface-visibility: visible; }
.scw-cs--slide-up .scw-cs__face--back {
    transform: translateY(100%);
    transition: transform 0.55s cubic-bezier(.2,.7,.3,1);
}
.scw-cs--slide-up:hover .scw-cs__face--back,
.scw-cs--slide-up:focus-visible .scw-cs__face--back {
    transform: translateY(0);
}

/* 4) Fade overlay */
.scw-cs--fade .scw-cs__inner { transform: none; transform-style: flat; }
.scw-cs--fade .scw-cs__face { backface-visibility: visible; }
.scw-cs--fade .scw-cs__face--back {
    opacity: 0;
    transition: opacity 0.45s ease;
}
.scw-cs--fade:hover .scw-cs__face--back,
.scw-cs--fade:focus-visible .scw-cs__face--back {
    opacity: 1;
}
.scw-cs--fade:hover .scw-cs__img,
.scw-cs--fade:focus-visible .scw-cs__img {
    transform: scale(1.06);
}

/* Touch / no-hover support — tap to flip */
@media (hover: none) {
    .scw-cs:active .scw-cs__inner,
    .scw-cs.is-flipped .scw-cs__inner { transform: rotateY(180deg); }
    .scw-cs--slide-up:active .scw-cs__face--back,
    .scw-cs--slide-up.is-flipped .scw-cs__face--back { transform: translateY(0); }
    .scw-cs--fade:active .scw-cs__face--back,
    .scw-cs--fade.is-flipped .scw-cs__face--back { opacity: 1; }
}

/* Subtle zoom on the image when card is hovered (flip variants only) */
.scw-cs--flip-y:hover .scw-cs__img,
.scw-cs--flip-x:hover .scw-cs__img,
.scw-cs--slide-up:hover .scw-cs__img {
    transform: scale(1.04);
}


/* ──────────────────────────────────────────────────────────
   4. FLIP BOX / CASE STUDY
────────────────────────────────────────────────────────── */

.elementor-widget-scw_flip_box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.elementor-widget-scw_flip_box .elementor-widget-container {
    height: 100%;
    display: flex;
    flex: 1;
}

/* Card wrapper — sets the 3D viewport */
.scw-fb {
    position: relative;
    width: 100%;
    perspective: 1500px;
    cursor: pointer;
    border-radius: 20px;
    /* height comes from inline / responsive control */
}

.scw-fb--trigger-click { outline: none; }

/* Inner = the element that actually rotates */
.scw-fb__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Both faces */
.scw-fb__face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* FRONT */
.scw-fb__front {
    background-size: cover;
    background-position: center;
    background-color: #1a1230;
    padding: 30px;
    color: #fff;
}

.scw-fb__front--top    { justify-content: flex-start; align-items: flex-start; }
.scw-fb__front--center { justify-content: center;     align-items: center;     text-align: center; }
.scw-fb__front--bottom { justify-content: flex-end;   align-items: flex-start; }

.scw-fb__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.scw-fb__front-title {
    position: relative;
    z-index: 2;
    font-family: 'Syne', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    color: #fff;
}

/* BACK */
.scw-fb__back {
    background: linear-gradient(135deg, #FF3874 0%, #7c3aed 100%);
    color: #fff;
}

.scw-fb__back-inner {
    position: relative;
    z-index: 1;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.scw-fb__back-title {
    font-family: 'Syne', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 16px 0;
}

.scw-fb__back-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.92);
    margin: 0 0 24px 0;
    /* Limit lines on smaller cards to avoid overflow */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scw-fb__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #ffffff;
    color: #1a1230;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: auto;
}

.scw-fb__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
}

.scw-fb__btn svg {
    transition: transform 0.3s ease;
}

.scw-fb__btn:hover svg {
    transform: translateX(4px);
}

/* Whole-card link overlay */
.scw-fb__overlay-link {
    position: absolute;
    inset: 0;
    z-index: 10;
    /* sits above everything except the inner button */
    text-indent: -9999px;
}

/* Make the actual back-side button still clickable above the overlay */
.scw-fb__btn { position: relative; z-index: 20; }

/* Reduced motion: avoid disorienting flips */
@media (prefers-reduced-motion: reduce) {
    .scw-fb__inner { transition: none !important; }
}


/* ──────────────────────────────────────────────────────────
   5. SHARED HOVER GRADIENT + BLUR (used by all widgets)
   The gradient sits invisible (opacity:0) until the parent
   widget is hovered, then fades in. The layer is oversized
   beyond the card edges (via inline negative offsets) so the
   blurred edge can bleed past the border without a harsh cutoff.
   Widget root must be position:relative + overflow:hidden.
   Content inside the widget needs z-index >= 1 to sit above it.
────────────────────────────────────────────────────────── */

.scw-bg-glow {
    position: absolute;
    /* top/left/right/bottom come from inline style (oversize) */
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    /* background + filter + transition come from inline style */
}

/* Gradient border ring — uses mask compositing to make a hollow
   rectangle that respects the parent's border-radius.
   The mask trick: render two solid masks, one inside content-box
   and one full-size, then composite-exclude to leave only the border ring. */
.scw-bg-border {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    /* padding (= border thickness) + background gradient come from inline style */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask-composite: exclude;
}

/* Fade in on hover — per-widget so we hit the right ancestor */

/* Service Card */
.scw-card:hover > .scw-bg-glow,
.scw-card:hover > .scw-bg-border { opacity: 1; }

/* Icon Box */
.scw-ib:hover > .scw-bg-glow,
.scw-ib:hover > .scw-bg-border { opacity: 1; }

/* Flip Box — gradient lives inside .scw-fb__back. Trigger when the whole
   card is hovered so it's already in place when the back appears. */
.scw-fb:hover .scw-fb__back > .scw-bg-glow,
.scw-fb:hover .scw-fb__back > .scw-bg-border { opacity: 1; }

/* Logo Carousel */
.scw-lc-wrap:hover > .scw-bg-glow,
.scw-lc-wrap:hover > .scw-bg-border { opacity: 1; }

/* Touch devices have no hover — reveal on tap/active too */
.scw-card:active > .scw-bg-glow,
.scw-card:active > .scw-bg-border,
.scw-ib:active > .scw-bg-glow,
.scw-ib:active > .scw-bg-border,
.scw-fb:active .scw-fb__back > .scw-bg-glow,
.scw-fb:active .scw-fb__back > .scw-bg-border,
.scw-lc-wrap:active > .scw-bg-glow,
.scw-lc-wrap:active > .scw-bg-border { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .scw-bg-glow,
    .scw-bg-border { transition: none !important; }
}

/* ── Per-widget content layering: ensure content sits above the gradient ── */

/* Service Card */
.scw-card > *:not(.scw-bg-glow):not(.scw-bg-border) { position: relative; z-index: 1; }

/* Icon Box */
.scw-ib > .scw-bg-glow ~ *:not(.scw-bg-border) { position: relative; z-index: 1; }

/* Flip Box back face */
.scw-fb__back > *:not(.scw-bg-glow):not(.scw-bg-border) { position: relative; z-index: 1; }

/* Logo Carousel */
.scw-lc-wrap > .scw-lc__marquee,
.scw-lc-wrap > .scw-lc__fade { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────
   5. COUNTER / MILESTONES
────────────────────────────────────────────────────────── */

.scw-count-wrap {
    position: relative;
    overflow: hidden;
}

.scw-count {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.scw-count__item {
    --scw-hover-lift: -6px;
    --scw-hover-scale: 1.08;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    transition: transform 0.35s ease;
    will-change: transform;
}

.scw-count__number {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    line-height: 1.05;
    font-size: 56px;
    color: #9354FF;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 8px;
    white-space: nowrap;
    transition: border-color 0.35s ease, transform 0.35s ease, color 0.35s ease;
}

.scw-count__prefix,
.scw-count__suffix {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: inherit;
}

.scw-count__num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    display: inline-block;
    text-align: center;
}

.scw-count__label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    margin: 0;
    transition: color 0.35s ease;
}

/* Bordered box around the number (NEXA-style count-number box) */
.scw-count--box .scw-count__number {
    border-style: solid;
    border-width: 2px;
    border-color: #ffffff;
    border-radius: 12px;
    padding: 18px 28px;
    align-items: center;
}

/* Circle / ring around the number */
.scw-count--ring .scw-count__number {
    border-style: solid;
    border-width: 2px;
    border-color: #ffffff;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    align-items: center;
    aspect-ratio: 1 / 1;
}

/* Hover animations on the number */
.scw-count--hover-lift  .scw-count__item:hover { transform: translateY(var(--scw-hover-lift)); }
.scw-count--hover-scale .scw-count__item:hover .scw-count__number { transform: scale(var(--scw-hover-scale)); }
.scw-count--hover-both  .scw-count__item:hover { transform: translateY(var(--scw-hover-lift)); }
.scw-count--hover-both  .scw-count__item:hover .scw-count__number { transform: scale(var(--scw-hover-scale)); }

/* Vertical dividers between items — centered line, height adjustable */
.scw-count--divided .scw-count__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    background-color: rgba(255,255,255,0.18);
}

/* Responsive */
@media (max-width: 1024px) {
    .scw-count__number { font-size: 44px; }
    .scw-count--ring .scw-count__number { width: 120px; height: 120px; }
    .scw-count--box  .scw-count__number { padding: 14px 22px; }
}

@media (max-width: 767px) {
    .scw-count {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .scw-count__number { font-size: 34px; }
    .scw-count__label { font-size: 14px; }
    .scw-count--ring .scw-count__number { width: 104px; height: 104px; }
    .scw-count--box  .scw-count__number { padding: 12px 18px; }
    .scw-count--divided .scw-count__item:nth-child(2n)::after { display: none; }
}

@media (max-width: 420px) {
    .scw-count { grid-template-columns: 1fr; }
    .scw-count--divided .scw-count__item::after { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-count__item,
    .scw-count__number { transition: none !important; }
    .scw-count--hover-lift .scw-count__item:hover,
    .scw-count--hover-both .scw-count__item:hover { transform: none; }
    .scw-count--hover-scale .scw-count__item:hover .scw-count__number,
    .scw-count--hover-both  .scw-count__item:hover .scw-count__number { transform: none; }
}

/* ──────────────────────────────────────────────────────────
   6. PROJECTS GRID / CASE STUDIES (CPT-driven, flip on hover)
────────────────────────────────────────────────────────── */

.scw-pg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.scw-pg__card {
    display: block;
    height: 440px;
    perspective: 1600px;
    text-decoration: none;
    color: inherit;
}

.scw-pg__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

/* Flip triggers */
.scw-pg__card:hover .scw-pg__inner,
.scw-pg__card:focus-visible .scw-pg__inner {
    transform: rotateY(180deg);
}
.scw-pg--vertical:hover .scw-pg__inner,
.scw-pg--vertical:focus-visible .scw-pg__inner {
    transform: rotateX(180deg);
}

.scw-pg__face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
}

/* FRONT */
.scw-pg__front {
    background-color: #0d0d0d;
    align-items: flex-end;
    overflow: hidden;
    box-sizing: border-box;
}
.scw-pg__img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    /* honor the front padding so a framed/letterboxed look is possible */
    padding: inherit;
    box-sizing: border-box;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.scw-pg__front-content {
    position: relative;
    z-index: 2;
    padding: 22px;
    width: 100%;
    background: linear-gradient(to top, rgba(10,10,10,0.45) 0%, transparent 60%);
}
.scw-pg__sub {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9354FF;
    margin-bottom: 6px;
}
.scw-pg__front .scw-pg__title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

/* BACK */
.scw-pg__back {
    background: #141414;
    transform: rotateY(180deg);
    align-items: center;
    justify-content: center;
    text-align: center;
}
.scw-pg--vertical .scw-pg__back {
    transform: rotateX(180deg);
}
.scw-pg__back-content {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.scw-pg__back .scw-pg__title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    margin: 0;
}
.scw-pg__desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
    margin: 0;
}
.scw-pg__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #9354FF;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.scw-pg__card:hover .scw-pg__btn {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* Responsive: 4 → 3 (tablet) → 1 (mobile) */
@media (max-width: 1024px) {
    .scw-pg { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .scw-pg { grid-template-columns: 1fr; }
}

/* Staggered layout — PC only. Every 2nd card nudged up. */
@media (min-width: 1025px) {
    .scw-pg--stagger {
        --scw-pg-offset: 40px;
        align-items: start;
        padding-top: var(--scw-pg-offset);
    }
    .scw-pg--stagger .scw-pg__card:nth-child(even) {
        transform: translateY(calc(-1 * var(--scw-pg-offset)));
    }
}

/* Touch devices: JS toggles .is-flipped on first tap, link follows on second */
@media (hover: none) {
    .scw-pg__card.is-flipped .scw-pg__inner { transform: rotateY(180deg); }
    .scw-pg--vertical.is-flipped .scw-pg__inner { transform: rotateX(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    .scw-pg__inner { transition: none; }
}

/* ──────────────────────────────────────────────────────────
   7. INDUSTRIES (icon + label cards)
────────────────────────────────────────────────────────── */

.scw-ind-wrap { width: 100%; }

.scw-ind__heading {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0 0 40px;
    line-height: 1.25;
}

.scw-ind {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
    justify-items: start;
}

/* Item: icon chip on the left, label to the right (horizontal) */
.scw-ind__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    text-decoration: none;
    text-align: left;
    transition: transform 0.3s ease;
}

/* The small rounded icon chip */
.scw-ind__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s ease, border-color 0.3s ease;
}
.scw-ind__item:hover .scw-ind__icon {
    background: rgba(147,84,255,0.12);
    border-color: #9354FF;
}
.scw-ind__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.scw-ind__label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    line-height: 1.3;
    transition: color 0.3s ease;
}

/* Icon hover effects */
.scw-ind--icon-lift .scw-ind__item:hover .scw-ind__icon img {
    transform: translateY(-4px);
}
.scw-ind--icon-bounce .scw-ind__item:hover .scw-ind__icon img {
    animation: scw-ind-bounce 0.6s ease;
}
@keyframes scw-ind-bounce {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-8px); }
    60%      { transform: translateY(-3px); }
}

/* Responsive */
@media (max-width: 1024px) {
    .scw-ind { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .scw-ind { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .scw-ind__icon { width: 56px; height: 56px; border-radius: 14px; }
    .scw-ind__icon img { width: 28px; height: 28px; }
    .scw-ind__label { font-size: 15px; }
}
@media (max-width: 460px) {
    .scw-ind { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-ind__item, .scw-ind__icon, .scw-ind__icon img { transition: none; }
    .scw-ind--icon-bounce .scw-ind__item:hover .scw-ind__icon img { animation: none; }
}


/* ──────────────────────────────────────────────────────────
   CURSOR GLOW  (shared — Service Card, Icon Box)
   A soft radial halo that tracks the mouse pointer across the
   card. assets/cursor-glow.js writes --scw-cg-x / --scw-cg-y
   (in px, relative to the card) on pointermove; everything
   else is pure CSS so it degrades to a centred glow if JS is
   blocked. Host element must be position:relative.
────────────────────────────────────────────────────────── */

/* The halo is absolutely positioned inside its host, so the host needs a
   positioning context — but only if it does not already have one. Declaring
   position:relative unconditionally clobbers hosts that are absolutely
   positioned themselves, which is what flattened the flip box faces. */
.scw-cg:not([class*="__face"]):not([class*="__panel"]) {
    position: relative;
}

.scw-cg {
    /* Defaults — overridden per widget by inline custom properties */
    --scw-cg-x: 50%;
    --scw-cg-y: 50%;
    --scw-cg-color:  rgba(255, 56, 116, 0.45);
    --scw-cg-color0: rgba(255, 56, 116, 0);
    --scw-cg-size: 320px;
    --scw-cg-softness: 70%;
    --scw-cg-fade: 0.35s;
    --scw-cg-ring:  rgba(255, 56, 116, 0.95);
    --scw-cg-ring0: rgba(255, 56, 116, 0);
    --scw-cg-ring-w: 1px;
}

/* The halo itself — sits above the card background, below the content */
.scw-cg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--scw-cg-fade) ease;
    background: radial-gradient(
        circle var(--scw-cg-size) at var(--scw-cg-x) var(--scw-cg-y),
        var(--scw-cg-color) 0%,
        var(--scw-cg-color0) var(--scw-cg-softness)
    );
}

.scw-cg.scw-cg--active::after,
.scw-cg:hover::after { opacity: 1; }

/* Optional: the border lights up where the cursor is nearest.
   Hollow ring made with mask compositing so it follows border-radius. */
.scw-cg.scw-cg--ring::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    padding: var(--scw-cg-ring-w);
    opacity: 0;
    transition: opacity var(--scw-cg-fade) ease;
    background: radial-gradient(
        circle var(--scw-cg-size) at var(--scw-cg-x) var(--scw-cg-y),
        var(--scw-cg-ring) 0%,
        var(--scw-cg-ring0) var(--scw-cg-softness)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask-composite: exclude;
}

.scw-cg.scw-cg--ring.scw-cg--active::before,
.scw-cg.scw-cg--ring:hover::before { opacity: 1; }

/* Keep card content above the halo */
.scw-cg > *:not(.scw-bg-glow):not(.scw-bg-border):not(.scw-ib__glow):not(.scw-rev__badge):not(.scw-fb__overlay) { position: relative; z-index: 1; }
/* Already absolutely positioned — only needs lifting above the halo. */
.scw-cg > .scw-fb__overlay { z-index: 1; }
/* Already absolutely positioned — only needs lifting above the halo. */
.scw-cg > .scw-rev__badge { z-index: 2; }

/* Touch devices: no pointer to follow — show a centred glow on tap */
@media (hover: none) {
    .scw-cg:active::after { opacity: 1; }
    .scw-cg.scw-cg--ring:active::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-cg::after,
    .scw-cg.scw-cg--ring::before { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   EQUAL-HEIGHT CARDS
   Elementor flexbox containers don't always stretch their
   children, which leaves cards with different text lengths at
   different heights. These rules force the whole chain —
   widget → widget-container → card — to fill the row.
────────────────────────────────────────────────────────── */

.elementor-widget-scw_icon_box,
.elementor-widget-scw_service_card {
    align-self: stretch;
    height: 100%;
}

.elementor-widget-scw_icon_box > .elementor-widget-container,
.elementor-widget-scw_service_card > .elementor-widget-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.scw-ib,
.scw-card { height: 100%; }

/* When cards sit directly inside a flex container, stretch the row */
.e-con-inner > .elementor-widget-scw_icon_box,
.e-con > .elementor-widget-scw_icon_box,
.e-con-inner > .elementor-widget-scw_service_card,
.e-con > .elementor-widget-scw_service_card { align-self: stretch; }

/* Nested container per card (the common Elementor pattern) */
.e-con:has(> .elementor-widget-scw_icon_box),
.e-con:has(> .elementor-widget-scw_service_card) { align-self: stretch; }

/* Description takes the slack so footers/CTAs line up across the row */
.scw-ib__desc { flex: 1 1 auto; }


/* ──────────────────────────────────────────────────────────
   SCROLLING MARQUEE
   The track holds two identical groups and translates exactly
   -50%, which lands the second group precisely where the first
   started — so the loop is seamless with no JavaScript.
   Each group carries its own trailing gap as padding-right, so
   the spacing across the seam matches the spacing inside.
────────────────────────────────────────────────────────── */

.scw-mq {
    --scw-mq-dur: 26s;
    --scw-mq-gap: 60px;
    --scw-mq-stroke: rgba(255, 255, 255, 0.28);
    --scw-mq-stroke-w: 1px;
    --scw-mq-accent: var(--scw-accent);
    --scw-mq-rule: rgba(255, 255, 255, 0.08);

    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 54px 0;
}

.scw-mq--rule-t { border-top: 1px solid var(--scw-mq-rule); }
.scw-mq--rule-b { border-bottom: 1px solid var(--scw-mq-rule); }

.scw-mq__track {
    display: flex;
    width: max-content;
    animation: scw-mq-scroll var(--scw-mq-dur) linear infinite;
    will-change: transform;
}

.scw-mq--reverse .scw-mq__track { animation-direction: reverse; }

.scw-mq--pause:hover .scw-mq__track { animation-play-state: paused; }

.scw-mq__group {
    display: flex;
    align-items: center;
    gap: var(--scw-mq-gap);
    padding-right: var(--scw-mq-gap);
    flex: none;
}

@keyframes scw-mq-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.scw-mq__item {
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 700;
    font-size: 96px;
    line-height: 1.12;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    display: block;
    transition: color .4s ease, -webkit-text-stroke-color .4s ease;
}

/* Outlined text: transparent fill, stroked edge */
.scw-mq__item--outline {
    color: transparent;
    -webkit-text-stroke: var(--scw-mq-stroke-w) var(--scw-mq-stroke);
}

.scw-mq__item--solid,
.scw-mq__sep {
    color: var(--scw-mq-accent);
    -webkit-text-stroke: 0;
}

/* Fill an outlined word when the pointer is over it */
.scw-mq--fill .scw-mq__item--outline:hover {
    color: var(--scw-mq-accent);
    -webkit-text-stroke-color: transparent;
}

/* Soften both ends instead of cutting the text off */
.scw-mq--fade {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Browsers without -webkit-text-stroke get a readable fallback */
@supports not (-webkit-text-stroke: 1px red) {
    .scw-mq__item--outline { color: var(--scw-mq-stroke); }
}

@media (prefers-reduced-motion: reduce) {
    .scw-mq__track { animation: none; }
    .scw-mq { overflow-x: auto; }
    .scw-mq__item { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   SHOWCASE FAN
   Each card gets --x/--y/--s/--r written inline by PHP, so the
   arc maths happens once on the server and the browser only
   composites transforms. Hover promotes the card to the front.
────────────────────────────────────────────────────────── */

.scw-fan {
    --scw-fan-w: 20vw;
    --scw-fan-min: 200px;
    --scw-fan-max: 340px;
    --scw-fan-ar: 1.3333;      /* width / height of the image, matches the ratio control */
    --scw-fan-depth: 30px;
    --scw-fan-radius: 16px;
    --scw-fan-bg: #ffffff;
    --scw-fan-border: rgba(0, 0, 0, 0.06);
    --scw-fan-shadow: 0.16;
    --scw-fan-accent: var(--scw-accent);

    /* The resolved card width, reused for the stage height below */
    --scw-fan-cw: clamp(var(--scw-fan-min), var(--scw-fan-w), var(--scw-fan-max));

    position: relative;
    width: 100%;
}

/* Cards are absolutely positioned, so they contribute no height. The stage has
   to reserve it: card height + how far the outer cards drop + room to lift. */
.scw-fan__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc( (var(--scw-fan-cw) / var(--scw-fan-ar)) + var(--scw-fan-depth) + 48px );
}

.scw-fan__card {
    position: absolute;
    width: var(--scw-fan-cw);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--scw-fan-radius);
    background: var(--scw-fan-bg);
    border: 1px solid var(--scw-fan-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, var(--scw-fan-shadow));
    overflow: hidden;
    transform:
        translateX(var(--x, 0))
        translateY(var(--y, 0))
        scale(var(--s, 1))
        rotate(var(--r, 0deg));
    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s ease,
        filter .35s ease,
        opacity .35s ease;
    will-change: transform;
}

/* Hovered card straightens, lifts and comes to the front */
.scw-fan--lift .scw-fan__card:hover,
.scw-fan--lift .scw-fan__card:focus-visible {
    transform:
        translateX(var(--x, 0))
        translateY(calc(var(--y, 0px) - 16px))
        scale(calc(var(--s, 1) + 0.06))
        rotate(0deg);
    box-shadow: 0 26px 54px rgba(0, 0, 0, calc(var(--scw-fan-shadow) + 0.16));
    z-index: 40 !important;
}

/* Everything else steps back while one card is hovered */
.scw-fan--dim .scw-fan__stage:hover .scw-fan__card {
    filter: brightness(0.72) saturate(0.85);
    opacity: 0.82;
}
.scw-fan--dim .scw-fan__stage .scw-fan__card:hover {
    filter: none;
    opacity: 1;
}

.scw-fan__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.scw-fan__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.scw-fan__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.68), rgba(0,0,0,0.18) 45%, transparent);
    opacity: 0;
    transition: opacity .3s ease;
}

.scw-fan__meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: clamp(10px, calc(var(--scw-fan-cw) * 0.055), 18px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
}

.scw-fan--lbl-always .scw-fan__veil,
.scw-fan--lbl-always .scw-fan__meta,
.scw-fan__card:hover .scw-fan__veil,
.scw-fan__card:hover .scw-fan__meta,
.scw-fan__card:focus-visible .scw-fan__veil,
.scw-fan__card:focus-visible .scw-fan__meta { opacity: 1; transform: none; }

.scw-fan--lbl-never .scw-fan__veil,
.scw-fan--lbl-never .scw-fan__meta { display: none; }

.scw-fan__tag {
    display: inline-block;
    font-size: clamp(9px, calc(var(--scw-fan-cw) * 0.045), 12px);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    background: color-mix(in srgb, var(--scw-fan-accent) 82%, transparent);
    padding: 3px 8px;
    border-radius: 100px;
    line-height: 1.3;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .scw-fan__tag { background: var(--scw-fan-accent); }
}

.scw-fan__title {
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: clamp(12px, calc(var(--scw-fan-cw) * 0.062), 17px);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

/* Mobile — the fan is kept by default, driven by --scw-fan-mob-*, which the
   widget writes from the mobile-specific spread and rotation controls. */
@media (max-width: 767px) {

    .scw-fan--m-fan {
        --scw-fan-w: var(--scw-fan-mob-w, 34vw);
        --scw-fan-min: 96px;
        --scw-fan-max: 190px;
    }
    .scw-fan--m-fan .scw-fan__card {
        transform:
            translateX(var(--mx, 0))
            translateY(var(--my, 0))
            scale(var(--ms, 1))
            rotate(var(--mr, 0deg));
    }
    /* Touch has no hover, so the tapped card is the one that pops */
    .scw-fan--m-fan .scw-fan__card:active,
    .scw-fan--m-fan .scw-fan__card:focus-visible {
        transform:
            translateX(var(--mx, 0))
            translateY(calc(var(--my, 0px) - 10px))
            scale(calc(var(--ms, 1) + 0.06))
            rotate(0deg);
        z-index: 40 !important;
    }
    .scw-fan--m-fan .scw-fan__stage {
        height: calc( (var(--scw-fan-cw) / var(--scw-fan-ar)) + var(--scw-fan-mob-depth, 22px) + 28px );
    }
    /* Cards outside the mobile window are dropped entirely */
    .scw-fan--m-fan .scw-fan__card { display: none; }
    .scw-fan--m-fan .scw-fan__card--mob { display: block; }

    /* Labels only on the front card — nine tiny captions is noise */
    .scw-fan--m-fan .scw-fan__veil,
    .scw-fan--m-fan .scw-fan__meta { opacity: 0; }
    .scw-fan--m-fan .scw-fan__card--front .scw-fan__veil,
    .scw-fan--m-fan .scw-fan__card--front .scw-fan__meta { opacity: 1; transform: none; }


    .scw-fan--m-scroll .scw-fan__stage,
    .scw-fan--m-grid .scw-fan__stage {
        height: auto;
        display: grid;
        justify-content: initial;
    }

    .scw-fan--m-scroll .scw-fan__card,
    .scw-fan--m-grid .scw-fan__card {
        position: relative;
        transform: none !important;
        width: auto;
        z-index: auto !important;
    }

    .scw-fan--m-scroll .scw-fan__stage {
        grid-auto-flow: column;
        grid-auto-columns: 62%;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .scw-fan--m-scroll .scw-fan__card { scroll-snap-align: start; }

    .scw-fan--m-grid .scw-fan__stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Labels always show on touch — there is no hover to reveal them */
    .scw-fan--m-scroll .scw-fan__veil,
    .scw-fan--m-scroll .scw-fan__meta,
    .scw-fan--m-grid .scw-fan__veil,
    .scw-fan--m-grid .scw-fan__meta { opacity: 1; transform: none; }


}

@media (prefers-reduced-motion: reduce) {
    .scw-fan__card,
    .scw-fan__veil,
    .scw-fan__meta { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   VIDEO SHOWREEL
────────────────────────────────────────────────────────── */

.scw-reel {
    --scw-reel-accent: var(--scw-accent);
    --scw-reel-icon: #ffffff;
    --scw-reel-btn: 96px;
    --scw-reel-ico: 31.25%;
    width: 100%;
}

.scw-reel__frame {
    position: relative;
    aspect-ratio: 16 / 8;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    overflow: hidden;
    background: #0b0b0e;
    cursor: pointer;
}

.scw-reel__video,
.scw-reel__poster img,
.scw-reel__embed iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.scw-reel__poster {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.scw-reel__embed {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.scw-reel--vignette .scw-reel__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(60% 60% at 50% 50%, transparent, rgba(8, 8, 10, 0.45));
    transition: opacity .4s ease;
}
.scw-reel.is-playing .scw-reel__frame::after { opacity: 0; }

.scw-reel__btn {
    position: absolute;
    z-index: 5;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: var(--scw-reel-btn);
    height: var(--scw-reel-btn);
    aspect-ratio: 1;
    flex: none;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    background: var(--scw-reel-accent);
    color: var(--scw-reel-icon);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.scw-reel__frame:hover .scw-reel__btn { transform: translate(-50%, -50%) scale(1.1); }

/* Reference proportions: a 30px glyph in a 96px button, nudged 4px right so
   the triangle looks optically centred. Both kept as ratios of --scw-reel-btn
   so they hold at any button size. */
/* Both glyphs occupy the same grid cell, so only one is ever visible and the
   button never grows a second row. Every rule below is scoped to .scw-reel__btn
   so they share specificity with the sizing rule and order alone decides. */
.scw-reel__btn svg {
    grid-area: 1 / 1;
    width: var(--scw-reel-ico, 31.25%);
    height: var(--scw-reel-ico, 31.25%);
    fill: currentColor;
    display: block;
}
.scw-reel__btn .scw-reel__ico-play { margin-left: 4.17%; }
.scw-reel__btn .scw-reel__ico-stop { display: none; margin-left: 0; }

/* Playing: swap the glyph and let the button fade back until hovered */
.scw-reel.is-playing .scw-reel__btn .scw-reel__ico-play { display: none; }
.scw-reel.is-playing .scw-reel__btn .scw-reel__ico-stop { display: block; }
/* What the play button does once playback starts. Hidden completely still
   leaves the frame itself clickable to stop, so nothing becomes unreachable —
   the control just stops being drawn. */
.scw-reel--btn-fade.is-playing .scw-reel__btn { opacity: 0; }
.scw-reel--btn-fade.is-playing .scw-reel__frame:hover .scw-reel__btn { opacity: 1; }

.scw-reel--btn-hide.is-playing .scw-reel__btn {
    opacity: 0;
    pointer-events: none;
}
.scw-reel--btn-hide.is-playing .scw-reel__btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Sound toggle ───────────────────────────────────────
   Sits in the corner so it never covers the play button,
   and stays put while the play button fades.
──────────────────────────────────────────────────────── */

.scw-reel__sound {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 6;
    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);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--scw-t-fast, .25s) ease,
                transform var(--scw-t-fast, .25s) var(--scw-ease, ease),
                background var(--scw-t-fast, .25s) ease;
}

/* Only meaningful once something is playing */
.scw-reel.is-playing .scw-reel__sound,
.scw-reel__sound:focus-visible { opacity: 1; transform: none; }
.scw-reel__sound:hover { background: rgba(0, 0, 0, 0.7); }

.scw-reel__sound svg {
    grid-area: 1 / 1;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .2s ease;
}
.scw-reel__sound svg path:first-child { fill: currentColor; stroke: none; }

/* Both glyphs share one cell and cross-fade, so the button never reflows */
.scw-reel__sound[aria-pressed="true"]  .scw-reel__sound-on  { opacity: 0; }
.scw-reel__sound[aria-pressed="true"]  .scw-reel__sound-off { opacity: 1; }
.scw-reel__sound[aria-pressed="false"] .scw-reel__sound-on  { opacity: 1; }
.scw-reel__sound[aria-pressed="false"] .scw-reel__sound-off { opacity: 0; }

.scw-reel__sound[aria-pressed="true"]  .scw-reel__sound-lbl-on,
.scw-reel__sound[aria-pressed="false"] .scw-reel__sound-lbl-off { display: none; }

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

@media (max-width: 600px) {
    .scw-reel__sound { right: 10px; bottom: 10px; width: 36px; height: 36px; }
    .scw-reel__sound svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-reel__sound { transition: none; }
}

/* Pulsing ring, paused while playing so it isn't a distraction */
.scw-reel--pulse .scw-reel__btn::before {
    content: '';
    position: absolute;
    inset: calc(var(--scw-reel-btn) * -0.146);
    border-radius: 50%;
    border: 1.5px solid var(--scw-reel-accent);
    animation: scw-reel-pulse 2s ease-out infinite;
    pointer-events: none;
}
.scw-reel.is-playing .scw-reel__btn::before { animation-play-state: paused; opacity: 0; }

@keyframes scw-reel-pulse {
    from { transform: scale(.8); opacity: 1; }
    to   { transform: scale(1.35); opacity: 0; }
}

.scw-reel__cap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9AA0AA;
}

@media (prefers-reduced-motion: reduce) {
    .scw-reel--pulse .scw-reel__btn::before { animation: none; }
    .scw-reel__btn { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   REVIEWS
────────────────────────────────────────────────────────── */

.scw-rev {
    --scw-rev-gap: 22px;
    --scw-rev-accent: var(--scw-accent);
    --scw-rev-bg: var(--scw-panel);
    --scw-rev-border: var(--scw-line);
    --scw-rev-text: rgba(255, 255, 255, 0.82);
    --scw-rev-muted: #9AA0AA;
    --scw-rev-name: var(--scw-text);
    --scw-rev-radius: var(--scw-r-md);
    display: grid;
    gap: var(--scw-rev-gap);
}

.scw-rev--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Slider ─────────────────────────────────────────────
   A native scroll-snap track, so drag and momentum are the
   browser's. Arrows, dots and autoplay drive scrollTo().
   Cards are sized off --scw-rev-pv so the gap maths stays
   exact at any per-view count.
──────────────────────────────────────────────────────── */

.scw-rev-wrap { position: relative; }

.scw-rev--slider {
    --scw-rev-pv: 3;
    grid-auto-flow: column;
    grid-auto-columns: calc( (100% - (var(--scw-rev-gap, 22px) * (var(--scw-rev-pv) - 1))) / var(--scw-rev-pv) );
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.scw-rev--slider::-webkit-scrollbar { display: none; }
.scw-rev--slider:focus-visible { outline: 2px solid var(--scw-rev-accent); outline-offset: 6px; }
.scw-rev--slider .scw-rev__card { scroll-snap-align: start; }

/* Cards lift on hover, so the track needs headroom or the shadow clips */
.scw-rev-wrap .scw-rev--slider { padding-top: 8px; margin-top: -8px; }

.scw-rev__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--scw-rev-border);
    background: var(--scw-rev-bg);
    color: var(--scw-rev-name);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.scw-rev__arrow svg { width: 19px; height: 19px; display: block; }
.scw-rev__arrow--prev { left: -22px; }
.scw-rev__arrow--prev svg { transform: rotate(180deg); }
.scw-rev__arrow--next { right: -22px; }

.scw-rev__arrow:hover:not(:disabled) {
    background: var(--scw-rev-accent);
    border-color: var(--scw-rev-accent);
    color: #fff;
}
.scw-rev__arrow:disabled { opacity: .3; cursor: default; }

/* Arrows sit outside the track, so keep them off the edge of narrow screens */
@media (max-width: 1280px) {
    .scw-rev__arrow--prev { left: 4px; }
    .scw-rev__arrow--next { right: 4px; }
}

.scw-rev__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}
.scw-rev__dots[hidden] { display: none; }

.scw-rev__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: var(--scw-rev-border);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.scw-rev__dot.is-on {
    width: 26px;
    background: var(--scw-rev-accent);
}

.scw-rev__card {
    position: relative;
    overflow: hidden;
    background: var(--scw-rev-bg);
    border: 1px solid var(--scw-rev-border);
    border-radius: var(--scw-rev-radius);
    padding: 34px;
    display: flex;
    flex-direction: column;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .35s ease;
}
.scw-rev--lift .scw-rev__card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--scw-rev-accent) 40%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .scw-rev--lift .scw-rev__card:hover { border-color: var(--scw-rev-accent); }
}

.scw-rev__badge {
    position: absolute;
    top: 22px; right: 22px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--scw-rev-muted);
}

.scw-rev__stars { display: inline-flex; gap: 1px; letter-spacing: 0; }
.scw-rev__star { color: rgba(255, 255, 255, 0.18); font-size: 12px; line-height: 1; }
.scw-rev__star.is-full { color: var(--scw-rev-accent); }
/* Half star: accent fill clipped to the left half over a dim base */
.scw-rev__star.is-half {
    position: relative;
    color: rgba(255, 255, 255, 0.18);
}
.scw-rev__star.is-half::before {
    content: '★';
    position: absolute;
    left: 0; top: 0;
    width: 50%;
    overflow: hidden;
    color: var(--scw-rev-accent);
}

.scw-rev__mark {
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: 56px;
    line-height: .6;
    color: var(--scw-rev-accent);
    margin-bottom: 18px;
    display: block;
}

.scw-rev__quote {
    font-size: 16px;
    line-height: 1.7;
    color: var(--scw-rev-text);
    margin: 0;
    flex: 1 1 auto;
}

.scw-rev__who {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.scw-rev__av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.scw-rev__av--txt,
.scw-rev__av--icon {
    background: color-mix(in srgb, var(--scw-rev-accent) 16%, transparent);
    color: var(--scw-rev-accent);
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 700;
    font-size: 15px;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .scw-rev__av--txt,
    .scw-rev__av--icon { background: rgba(255, 56, 116, 0.14); }
}
.scw-rev__av--icon svg { width: 18px; height: 18px; fill: currentColor; }
.scw-rev__av--icon i { font-size: 17px; }
.scw-rev__av--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.scw-rev__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scw-rev__name {
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--scw-rev-name);
}
.scw-rev__name a { color: inherit; text-decoration: none; }
.scw-rev__name a:hover { color: var(--scw-rev-accent); }
.scw-rev__role {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--scw-rev-muted);
}

.scw-rev__note {
    margin-top: 22px;
    font-size: 11.5px;
    color: var(--scw-rev-muted);
}

@media (max-width: 767px) {
    .scw-rev--grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-rev--slider { scroll-behavior: auto; }
    .scw-rev__dot, .scw-rev__arrow { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-rev__card { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   BENTO GRID
   Spans come from per-card --cs / --rs, so one repeater builds
   an asymmetric layout without hardcoded grid areas.
────────────────────────────────────────────────────────── */

.scw-bento {
    --scw-bento-cols: 4;
    --scw-bento-tcols: 2;
    --scw-bento-row: 150px;
    --scw-bento-bg: var(--scw-panel);
    --scw-bento-border: var(--scw-line);
    --scw-bento-radius: var(--scw-r-md);
    --scw-bento-pad: 26px;
    --scw-bento-title: var(--scw-text);
    --scw-bento-text: rgba(255, 255, 255, 0.65);
    --scw-bento-accent: var(--scw-accent);

    display: grid;
    grid-template-columns: repeat(var(--scw-bento-cols), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--scw-bento-row), auto);
    gap: 20px;
}

.scw-bento__card {
    grid-column: span min(var(--cs, 2), var(--scw-bento-cols));
    grid-row: span var(--rs, 1);

    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--scw-bento-bg);
    border: 1px solid var(--scw-bento-border);
    border-radius: var(--scw-bento-radius);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.scw-bento__card:hover {
    border-color: color-mix(in srgb, var(--scw-bento-accent) 45%, transparent);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .scw-bento__card:hover { border-color: var(--scw-bento-accent); }
}

/* Media above / below simply reorders the flex column */
.scw-bento__card--top    { flex-direction: column; }
.scw-bento__card--top    .scw-bento__media { order: 0; flex: 1 1 auto; }
.scw-bento__card--top    .scw-bento__body  { order: 1; flex: 0 0 auto; }
.scw-bento__card--bottom .scw-bento__media { order: 1; flex: 1 1 auto; }
.scw-bento__card--bottom .scw-bento__body  { order: 0; flex: 0 0 auto; }

/* No media: centre the copy instead of stranding it at one end */
.scw-bento__card:not(.has-media) .scw-bento__body {
    flex: 1 1 auto;
    justify-content: center;
}

/* Side-by-side only makes sense where there's width for it */
@media (min-width: 1025px) {
    .scw-bento__card--left,
    .scw-bento__card--right { flex-direction: row; align-items: stretch; }
    .scw-bento__card--left  .scw-bento__media,
    .scw-bento__card--right .scw-bento__media {
        width: 38%;
        max-width: 20rem;
        flex: none;
    }
    .scw-bento__card--right { flex-direction: row-reverse; }
    .scw-bento__card--left  .scw-bento__body,
    .scw-bento__card--right .scw-bento__body { flex: 1; justify-content: center; }
}

.scw-bento__media {
    position: relative;
    overflow: hidden;
    background: #000;
    min-height: var(--scw-b-h, var(--scw-bento-media, 10rem));
}
/* A panel given its own height stops stretching with the card */
.scw-bento__media[style*="--scw-b-h"] { flex: 0 0 auto; height: var(--scw-b-h); }
.scw-bento__card--bottom .scw-bento__media,
.scw-bento__card--top .scw-bento__media { min-height: var(--scw-bento-media, 10rem); }

.scw-bento__zoom {
    position: absolute;
    inset: 0;
    transform-origin: center;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.scw-bento--zoom .scw-bento__card:hover .scw-bento__zoom { transform: scale(1.08); }

/* Fit and focal point are per card. A render that carries its own black
   margins needs contain, or filling the panel crops into the subject; and a
   subject sitting off-centre in its own frame needs the focal point moved,
   since the middle of the file is not the middle of the picture. */
.scw-bento__canvas,
.scw-bento__video,
.scw-bento__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--scw-b-pad, 0);
    object-fit: var(--scw-b-fit, cover);
    object-position: var(--scw-b-pos, 50% 50%);
    display: block;
    transition: opacity .5s ease;
}

/* Contain leaves space around the media, which should read as the panel
   rather than as a hole in the card. */
.scw-bento__media { background: var(--scw-b-bg, #000); }

/* Poster sits over the video until playback actually starts */
.scw-bento__canvas { opacity: 1; z-index: 0; background: #050506; }
.scw-bento__img   { opacity: 1;  z-index: 1; pointer-events: none; }
.scw-bento__video { opacity: 0;  z-index: 0; }
.scw-bento__card.is-playing .scw-bento__img   { opacity: 0; }
.scw-bento__card.is-playing .scw-bento__video { opacity: 1; }

/* Blends the media into the card rather than ending on a hard edge */
.scw-bento__veil { display: none; }
.scw-bento--fade .scw-bento__veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        linear-gradient(to bottom, var(--scw-bento-bg) 0%, transparent 12%),
        linear-gradient(to top,    var(--scw-bento-bg) 0%, transparent 12%),
        linear-gradient(to right,  var(--scw-bento-bg) 0%, transparent 10%),
        linear-gradient(to left,   var(--scw-bento-bg) 0%, transparent 10%);
}

.scw-bento__body {
    position: relative;
    z-index: 3;
    padding: var(--scw-bento-pad);
    display: flex;
    flex-direction: column;
}

.scw-bento__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}

.scw-bento__icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    color: rgba(255, 255, 255, 0.7);
    transition: color .3s ease;
}
.scw-bento--tint .scw-bento__icon { color: var(--scw-bento-accent); }
.scw-bento__card:hover .scw-bento__icon { color: var(--scw-bento-accent); }
.scw-bento__icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.scw-bento__icon i   { font-size: 15px; line-height: 1; }

.scw-bento__title {
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--scw-bento-title) 72%, transparent);
    margin: 0;
    transition: color .3s ease;
}
.scw-bento__card:hover .scw-bento__title { color: var(--scw-bento-title); }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-bento__title { color: var(--scw-bento-title); }
}

.scw-bento__text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--scw-bento-text);
    margin: 0;
    padding-left: 27px;   /* aligns under the title, past the icon */
}

@media (max-width: 1024px) {
    .scw-bento { grid-template-columns: repeat(var(--scw-bento-tcols), minmax(0, 1fr)); }
    .scw-bento__card { grid-column: span min(var(--cs, 2), var(--scw-bento-tcols)); }
}

@media (max-width: 640px) {
    .scw-bento { grid-template-columns: 1fr; }
    .scw-bento__card { grid-column: span 1; grid-row: span 1; }
    .scw-bento__text { padding-left: 0; }
    .scw-bento__media { min-height: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-bento__zoom,
    .scw-bento__card,
    .scw-bento__video,
    .scw-bento__img { transition: none; }
    .scw-bento--zoom .scw-bento__card:hover .scw-bento__zoom { transform: none; }
}


/* ──────────────────────────────────────────────────────────
   SCROLL DECK
   --p is the section's 0–1 scroll progress, written by JS.
   Each card maps it through its own rise / turn windows, so
   the deck flips as a wave. All maths is CSS; JS only writes
   one number per frame.
────────────────────────────────────────────────────────── */

/* ── Pinned deck ────────────────────────────────────────
   A tall outer wrapper gives the section something to scroll
   through; the inner sticks to the viewport and centres the
   deck. Progress across the wrapper drives the flips, so the
   cards turn in place instead of on the way past.
──────────────────────────────────────────────────────── */

.scw-deck-pin {
    --scw-deck-scroll: 260vh;
    position: relative;
    height: var(--scw-deck-scroll);
}

.scw-deck-pin__inner {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;          /* avoids the mobile URL-bar jump */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The theme container caps the deck long before the height budget does, which
   leaves the pinned screen mostly empty. Breaking out of the container lets the
   cards grow into the space they were always allowed. */
.scw-deck-pin--wide .scw-deck-pin__inner {
    /* max-width:100% resolved against the container, clamping the breakout
       away entirely; and calc(50% - half) mixed container-relative % with
       viewport vw, over-constraining the box so it shifted left. Deriving the
       margin from the same 100% keeps the equation consistent and centred. */
    /* The resolved width is used twice, so it is computed once — the margin
       must be derived from the same value or the box is over-constrained and
       CSS discards the right margin, shifting the deck off centre. */
    --scw-deck-w: min(var(--scw-deck-wide, 76vw), var(--scw-deck-wide-max, 1500px));

    width: var(--scw-deck-w);
    max-width: none;
    margin-inline: calc((100% - var(--scw-deck-w)) / 2);
}

.scw-deck-pin__inner > .scw-deck {
    width: 100%;
    /* Computed from the card ratio, column count and gap, so the deck can
       never grow taller than the screen it is pinned to. */
    max-width: var(--scw-deck-fit, none);
    margin-inline: auto;
}

/* position:sticky is cancelled by any ancestor that clips, and Elementor
   containers set overflow:hidden routinely. JS clears it too, but this
   catches the common wrappers before the first paint. */
.elementor-widget-scw_scroll_deck,
.elementor-widget-scw_scroll_deck > .elementor-widget-container { overflow: visible !important; }

.e-con:has(.scw-deck-pin),
.e-con-inner:has(.scw-deck-pin),
.elementor-section:has(.scw-deck-pin),
.elementor-container:has(.scw-deck-pin),
.elementor-widget-wrap:has(.scw-deck-pin),
.elementor-column-wrap:has(.scw-deck-pin) { overflow: visible !important; }

/* Below 767px a long pinned section reads as a frozen page, so
   unless it is explicitly enabled the deck flows normally. */
@media (max-width: 767px) {

    /* Applies whether or not there is a pin wrapper — a deck with pinning
       switched off has no wrapper for the rules below to match. */
    .scw-deck:not(.scw-deck--mobile-anim) .scw-deck__card {
        opacity: 1;
        transform: none;
    }
    .scw-deck:not(.scw-deck--mobile-anim) .scw-deck__turn { transform: none; }

    .scw-deck-pin:not(.scw-deck-pin--mobile) { height: auto; }
    .scw-deck-pin:not(.scw-deck-pin--mobile) .scw-deck-pin__inner {
        position: static;
        height: auto;
        display: block;
        /* The breakout is a desktop device. Left on, it keeps the deck at a
           fixed vw while the cards inside still divide by the column count,
           which is what pushed the last card off the screen. */
        width: 100%;
        margin-inline: 0;
    }
    /* Without the pin there is no scroll window, so show the fronts */
    .scw-deck-pin:not(.scw-deck-pin--mobile) .scw-deck__card { opacity: 1; transform: none; }
    .scw-deck-pin:not(.scw-deck-pin--mobile) .scw-deck__turn { transform: none; }
}

.scw-deck {
    --p: 0;
    --scw-deck-rise: 60px;
    --scw-deck-accent: var(--scw-accent);
    --scw-deck-front: var(--scw-panel);
    --scw-deck-back: var(--scw-panel-2);
    --scw-deck-border: var(--scw-line);
    --scw-deck-radius: var(--scw-r-md);

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.scw-deck__card {
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 1400px;
    outline: none;

    /* Progress remapped into this card's own 0–1 windows */
    --rp: clamp(0, calc((var(--p) * 100 - var(--ra)) / (var(--rb) - var(--ra))), 1);
    --tp: clamp(0, calc((var(--p) * 100 - var(--ta)) / (var(--tb) - var(--ta))), 1);

    opacity: var(--rp);
    transform: translateY(calc((1 - var(--rp)) * var(--scw-deck-rise)));
    will-change: transform, opacity;
}

/* Older browsers without clamp() in custom properties still see the cards */
@supports not (width: clamp(0px, 1px, 2px)) {
    .scw-deck__card { opacity: 1; transform: none; }
}

.scw-deck.is-static .scw-deck__card {
    opacity: 1 !important;
    transform: none !important;
}

.scw-deck__turn {
    position: relative;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform .25s linear;
}

.scw-deck--flip .scw-deck__turn { transform: rotateY(calc(var(--tp) * 180deg)); }
.scw-deck.is-static .scw-deck__turn { transform: none !important; }

/* Hover reads a card without scrolling back to it */
.scw-deck--hover .scw-deck__card:hover .scw-deck__turn,
.scw-deck--hover .scw-deck__card:focus-visible .scw-deck__turn {
    transform: rotateY(180deg);
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

.scw-deck__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--scw-deck-radius);
    border: 1px solid var(--scw-deck-border);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.scw-deck__face--front {
    background: var(--scw-deck-front);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.scw-deck__face--back {
    background: var(--scw-deck-back);
    transform: rotateY(180deg);
    justify-content: space-between;
    padding: clamp(14px, 1.6vw, 24px);
}

.scw-deck__art {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) 0;
    min-height: 0;
}
.scw-deck__art svg,
.scw-deck__art img {
    width: 100%;
    max-width: clamp(96px, 52%, 180px);
    height: auto;
    display: block;
}
.scw-deck__icon {
    display: grid;
    place-items: center;
    color: var(--scw-deck-accent);
    font-size: clamp(34px, 5vw, 56px);
}
.scw-deck__icon svg { width: 1em; height: 1em; fill: currentColor; max-width: none; }

.scw-deck__cap,
.scw-deck__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(8px, 0.75vw, 10px);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}
.scw-deck__cap {
    text-align: center;
    padding-bottom: clamp(12px, 1.4vw, 20px);
    margin: 0;
}

.scw-deck__statement {
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(14px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    text-wrap: balance;
}

/* Radar sweep and network pulse */
.scw-deck__sweep { transform-origin: 100px 100px; animation: scw-deck-sweep 4s linear infinite; }
@keyframes scw-deck-sweep { to { transform: rotate(360deg); } }

.scw-deck__pulse { transform-origin: 100px 100px; animation: scw-deck-pulse 2.6s ease-out infinite; }
@keyframes scw-deck-pulse {
    from { transform: scale(.6); opacity: .7; }
    to   { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-deck__sweep, .scw-deck__pulse { animation: none; }
    .scw-deck__turn { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   WAVE LINE
────────────────────────────────────────────────────────── */

.scw-wave {
    --p: 0;
    --scw-wave-h: 220px;
    --scw-wave-w: 60px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.scw-wave__svg {
    width: var(--scw-wave-w);
    height: var(--scw-wave-h);
    overflow: visible;
}

/* pathLength="1" normalises the curve, so the dash maths is just progress */
.scw-wave__path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: calc(1 - var(--p));
}

.scw-wave--track .scw-wave__path { stroke-dashoffset: calc(1 - var(--p)); }

/* One-shot mode: no scroll tracking, just draw once on entry */
.scw-wave:not(.scw-wave--track) .scw-wave__path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1);
}
.scw-wave:not(.scw-wave--track).is-drawn .scw-wave__path { stroke-dashoffset: 0; }

.scw-wave__dot { opacity: 0; transition: opacity .4s ease; }
.scw-wave--dot.scw-wave--track .scw-wave__dot { opacity: calc(var(--p) * 3); }
.scw-wave--dot:not(.scw-wave--track).is-drawn .scw-wave__dot { opacity: 1; }

.scw-wave.is-static .scw-wave__path { stroke-dasharray: none; stroke-dashoffset: 0; }
.scw-wave.is-static .scw-wave__dot { opacity: 1; }


/* ──────────────────────────────────────────────────────────
   WORLD TABS
────────────────────────────────────────────────────────── */

.scw-worlds {
    --scw-w-accent: var(--scw-accent);
    --scw-w-on: #FFFFFF;
    --scw-w-text: var(--scw-text);
    --scw-w-muted: var(--scw-muted);
    --scw-w-border: var(--scw-line);
    width: 100%;
}

.scw-worlds__eyebrow,
.scw-worlds__peyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    color: var(--scw-w-muted);
    margin: 0 0 12px;
}
.scw-worlds__peyebrow { color: var(--scw-w-accent); margin-bottom: 16px; }

.scw-worlds__h2 {
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(28px, 4.4vw, 52px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--scw-w-text);
    margin: 0;
}
.scw-worlds--lower .scw-worlds__h2 { text-transform: lowercase; }

.scw-worlds__rule {
    height: 1px;
    width: min(320px, 60%);
    margin-top: 24px;
    background: linear-gradient(to right, var(--scw-w-accent), transparent);
}

/* ── Pills ──────────────────────────────────────────────── */

.scw-worlds__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: clamp(26px, 3.4vw, 40px) 0 clamp(36px, 5vw, 56px);
}

.scw-worlds__tab {
    position: relative;
    border: 0;
    background: none;
    border-radius: 100px;
    padding: 10px 20px;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.scw-worlds__tab:focus-visible { outline: 2px solid var(--scw-w-accent); outline-offset: 3px; }

.scw-worlds__pill {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background: var(--scw-w-accent);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.scw-worlds__tab.is-on .scw-worlds__pill { opacity: 1; transform: none; }

.scw-worlds__tabin {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--scw-w-muted);
    transition: color .3s ease;
}
.scw-worlds__tab:hover .scw-worlds__tabin { color: var(--scw-w-text); }
.scw-worlds__tab.is-on .scw-worlds__tabin { color: var(--scw-w-on); font-weight: 700; }

.scw-worlds__n {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
    font-variant-numeric: tabular-nums;
    opacity: .55;
}

/* ── Panels ─────────────────────────────────────────────── */

.scw-worlds__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3.4vw, 56px);
    align-items: center;
}
.scw-worlds__panel[hidden] { display: none; }

.scw-worlds__panel.is-on .scw-worlds__copy,
.scw-worlds__panel.is-on .scw-worlds__media { animation: scw-w-in .55s cubic-bezier(.22,.61,.36,1) both; }
.scw-worlds__panel.is-on .scw-worlds__media { animation-delay: .06s; }

@keyframes scw-w-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.scw-worlds__ptitle {
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(21px, 2.6vw, 32px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--scw-w-text);
    margin: 0 0 16px;
    text-wrap: balance;
}

.scw-worlds__ptext {
    color: var(--scw-w-muted);
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0;
}

.scw-worlds__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--scw-w-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
}
.scw-worlds__link span { transition: transform .25s ease; }
.scw-worlds__link:hover span { transform: translateX(4px); }

.scw-worlds__media {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 260px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--scw-w-border);
    background: #070707;
}
/* ── Screenshot stack ───────────────────────────────────
   All shots stack in the same box; only the active one is
   visible. Scale plus fade avoids the hard cut a plain
   opacity swap gives.
──────────────────────────────────────────────────────── */

.scw-worlds__shots { position: absolute; inset: 0; }

.scw-worlds__shot {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1), visibility .6s;
    text-decoration: none;
}
.scw-worlds__shot.is-on { opacity: 1; visibility: visible; transform: none; }

.scw-worlds__shot img {
    width: 100%;
    height: 100%;
    object-fit: var(--scw-w-fit, cover);
    object-position: var(--scw-w-pos, top center);
    display: block;
}

/* Contain shows the whole capture; the panel background fills the rest. */
.scw-worlds--contain .scw-worlds__shot img,
.scw-worlds--contain .scw-worlds__media > img,
.scw-worlds--contain .scw-worlds__media > video {
    object-fit: contain;
    object-position: center;
}
.scw-worlds--contain .scw-worlds__media { background: var(--scw-w-shot-bg, #0B0C10); }

/* Cropping a wide capture into a small panel is the worst of both, so on a
   phone the whole thing is shown by default. */
@media (max-width: 600px) {
    .scw-worlds__shot img,
    .scw-worlds__media > img {
        object-fit: contain;
        object-position: center;
    }
    .scw-worlds__media { background: var(--scw-w-shot-bg, #0B0C10); }
}

/* Darken the lower edge so the caption stays legible on any screenshot */
.scw-worlds__shots::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(6,6,8,0.88) 0%, rgba(6,6,8,0.45) 18%, transparent 42%),
                linear-gradient(to bottom, rgba(6,6,8,0.7) 0%, transparent 22%);
}

.scw-worlds__shotgo {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--scw-w-accent);
    color: var(--scw-w-on);
    display: grid;
    place-items: center;
    font-size: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}
a.scw-worlds__shot.is-on:hover .scw-worlds__shotgo,
a.scw-worlds__shot.is-on:focus-visible .scw-worlds__shotgo { opacity: 1; transform: none; }

a.scw-worlds__shot:focus-visible { outline: 2px solid var(--scw-w-accent); outline-offset: -3px; }

/* Dots become real buttons once they drive the screenshots */
.scw-worlds__dots button {
    border: 0;
    padding: 0;
    height: 4px;
    width: 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: width .5s ease, background .5s ease;
}
.scw-worlds__dots button.is-on { width: 20px; background: var(--scw-w-accent); }

.scw-worlds__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #070707;
    /* Matches the reference: the hue eases rather than snapping between tabs */
    transition: filter 3.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.scw-worlds__media img,
.scw-worlds__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scw-worlds__corner {
    position: absolute;
    top: 16px;
    left: 20px;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    z-index: 2;
}

.scw-worlds__dots {
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.scw-worlds__dots i {
    height: 4px;
    width: 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.2);
    transition: width .5s ease, background .5s ease;
}
.scw-worlds__dots i.is-on { width: 20px; background: var(--scw-w-accent); }

.scw-worlds__cap {
    transition: opacity .26s ease, transform .26s ease;
    position: absolute;
    z-index: 3;
    left: 20px;
    right: 20px;
    bottom: 16px;
    z-index: 2;
    display: block;
    pointer-events: none;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.scw-worlds__cap.is-out { opacity: 0; transform: translateY(6px); }

.scw-worlds__cap em {
    display: block;
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--scw-w-accent);
    margin-bottom: 6px;
}
.scw-worlds__cap b {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
    display: block;
}

@media (min-width: 860px) {
    .scw-worlds__panel { grid-template-columns: 1fr 1.25fr; }
}

@media (max-width: 600px) {
    .scw-worlds__tab { padding: 9px 15px; }
    .scw-worlds__tabin { font-size: 10px; letter-spacing: 0.15em; }
    /* Was 4/5. A wide screenshot cropped to portrait keeps a narrow vertical
       slice of the middle, which is unreadable — hold the landscape shape and
       let it be shorter instead. */
    .scw-worlds__media { min-height: 0; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-worlds__panel.is-on .scw-worlds__copy,
    .scw-worlds__panel.is-on .scw-worlds__media { animation: none; }
    .scw-worlds__pill, .scw-worlds__dots i { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   WORK ORBIT
   Cards sit centred and are moved by JS-written transforms.
   Everything below is presentation only — no layout depends
   on the animation, so a JS failure leaves a readable stack
   rather than a pile in the middle.
────────────────────────────────────────────────────────── */

.scw-orbit {
    --scw-orbit-h: 78vh;
    --scw-orbit-w: 24vw;
    --scw-orbit-bg: var(--scw-ink);
    --scw-orbit-accent: var(--scw-accent);
    --scw-orbit-radius: var(--scw-r-md);

    position: relative;
    width: 100%;
    min-height: var(--scw-orbit-h);
    background: var(--scw-orbit-bg);
    overflow: hidden;
    isolation: isolate;
}

.scw-orbit__stage {
    position: relative;
    height: var(--scw-orbit-h);
    width: 100%;
}

.scw-orbit__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(180px, var(--scw-orbit-w), 440px);
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
    /* JS overwrites transform every frame; this is the pre-paint position */
    transform: translate3d(-50%, -50%, 0);
    margin-left: calc(clamp(180px, var(--scw-orbit-w), 440px) / -2);
    margin-top: calc(clamp(180px, var(--scw-orbit-w), 440px) * 0.28125 / -1);
    transition: opacity .4s ease;
    will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
}

/* Widen the pointer target a little without moving the card */
.scw-orbit__card::after {
    content: '';
    position: absolute;
    inset: -14px;
}

/* A flat 1px border draws a hard grey rectangle that reads as cheap against
   black. Real glass catches light along the top edge and loses it toward the
   bottom, so the edge is a masked gradient ring instead — with the card's own
   tint bleeding into the lower corners. */
.scw-orbit__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--scw-orbit-radius);
    overflow: hidden;
    border: 0;
    background: rgba(255, 255, 255, 0.03);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 4px 14px rgba(0, 0, 0, 0.4);
    transition:
        transform .5s cubic-bezier(.22,.61,.36,1),
        box-shadow .5s ease;
}

.scw-orbit__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    border-radius: inherit;
    padding: var(--scw-orbit-edge-w, 1px);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, var(--scw-orbit-edge, 0.22)) 0%,
            rgba(255, 255, 255, calc(var(--scw-orbit-edge, 0.22) * 0.34)) 26%,
            rgba(255, 255, 255, 0.02) 52%,
            transparent 74%
        ),
        linear-gradient(
            15deg,
            color-mix(in srgb, var(--tint, #FF3874) 42%, transparent) 0%,
            transparent 46%
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask-composite: exclude;
    transition: opacity .5s ease;
}

/* Without mask-composite the ring would fill the card, so fall back to a
   plain hairline rather than a solid block. */
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .scw-orbit__inner::after { display: none; }
    .scw-orbit__inner { border: 1px solid rgba(255, 255, 255, 0.12); }
}

/* Warm halo under the card, tinted to match it */
.scw-orbit__card::before {
    content: '';
    position: absolute;
    inset: 6%;
    z-index: -1;
    border-radius: var(--scw-orbit-radius);
    background: var(--tint, #FF3874);
    opacity: 0;
    filter: blur(26px);
    transition: opacity .55s ease;
}

.scw-orbit__card.is-open .scw-orbit__inner {
    transform: scale(1.06);
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.7),
        0 6px 20px rgba(0, 0, 0, 0.5);
}
.scw-orbit__card.is-open::before { opacity: var(--scw-orbit-halo, 0.22); }
.scw-orbit__card.is-open .scw-orbit__inner::after { opacity: 0.55; }
.scw-orbit__card:focus-visible .scw-orbit__inner {
    outline: 2px solid var(--scw-orbit-accent);
    outline-offset: 2px;
}

.scw-orbit__media { position: absolute; inset: 0; display: block; }
.scw-orbit__media img,
.scw-orbit__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Resting face ──────────────────────────────────────── */

.scw-orbit__face {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    overflow: hidden;
    background: linear-gradient(160deg, #17181A 0%, #0E0F10 55%, #08090A 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: opacity .7s ease;
}
.scw-orbit__card.is-open .scw-orbit__face { opacity: 0; }

.scw-orbit__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(85% 70% at 18% 108%, var(--tint, #FF3874), transparent 62%);
    opacity: 0.14;
}

.scw-orbit__br {
    position: absolute;
    width: 11px;
    height: 11px;
    opacity: var(--scw-orbit-brackets, 1);
    border-color: color-mix(in srgb, var(--tint, #FF3874) 38%, transparent);
    border-style: solid;
    border-width: 0;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-orbit__br { border-color: rgba(255,255,255,0.3); }
}
.scw-orbit__br--tl { top: 8px;    left: 8px;  border-top-width: 1px; border-left-width: 1px;  border-top-left-radius: 3px; }
.scw-orbit__br--tr { top: 8px;    right: 8px; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 3px; }
.scw-orbit__br--bl { bottom: 8px; left: 8px;  border-bottom-width: 1px; border-left-width: 1px;  border-bottom-left-radius: 3px; }
.scw-orbit__br--br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 3px; }

.scw-orbit__plate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    text-align: center;
}

.scw-orbit__mark {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(11px, 1.1vw, 15px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.85);
}
.scw-orbit__mark i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--tint, #FF3874);
    display: inline-block;
}

.scw-orbit__rule { width: 24px; height: 1px; background: rgba(255, 255, 255, 0.14); }

.scw-orbit__name {
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(10px, 0.95vw, 13px);
    line-height: 1.25;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.58);
}

.scw-orbit__sub {
    font-size: clamp(6.5px, 0.6vw, 8px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tint, #FF3874) 70%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-orbit__sub { color: rgba(255,255,255,0.5); }
}

/* Sheen sweep, offset per card so they don't flash in unison */
.scw-orbit__sheen { display: none; }
.scw-orbit--sheen .scw-orbit__sheen {
    display: block;
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 38%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0.13) 55%, transparent 100%);
    animation: scw-orbit-sheen 11s cubic-bezier(.4,0,.2,1) infinite;
    animation-delay: calc(var(--i, 0) * 1.4s);
}

@keyframes scw-orbit-sheen {
    0%   { transform: translateX(-160%) skewX(-14deg); opacity: 0; }
    12%  { opacity: 1; }
    58%  { opacity: 1; }
    100% { transform: translateX(420%) skewX(-14deg); opacity: 0; }
}

/* ── Revealed caption bar ──────────────────────────────── */

.scw-orbit__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 10px 12px;
    text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    opacity: 0;
    transition: opacity .5s ease;
}
.scw-orbit__card.is-open .scw-orbit__bar { opacity: 1; }

.scw-orbit__bar b {
    display: block;
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 600;
    line-height: 1.2;
    text-transform: lowercase;
    color: #fff;
}
.scw-orbit__bar em {
    display: block;
    font-style: normal;
    font-size: clamp(7px, 0.65vw, 9px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tint, #FF3874) 80%, transparent);
    margin-top: 3px;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-orbit__bar em { color: rgba(255,255,255,0.6); }
}

/* ── Stage furniture ───────────────────────────────────── */

.scw-orbit--fade::before,
.scw-orbit--fade::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 30;
    pointer-events: none;
}
.scw-orbit--fade::before {
    top: 0;
    height: 22%;
    background: linear-gradient(to bottom, var(--scw-orbit-bg), transparent);
}
.scw-orbit--fade::after {
    bottom: 0;
    height: 26%;
    background: linear-gradient(to top, var(--scw-orbit-bg), transparent);
}

.scw-orbit__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    z-index: 31;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
    font-size: 9px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}
.scw-orbit__dash { width: 24px; height: 1px; background: rgba(255, 255, 255, 0.15); }

.scw-orbit__hint-touch { display: none; }
@media (hover: none) {
    .scw-orbit__hint-hover { display: none; }
    .scw-orbit__hint-touch { display: inline; }
}

.scw-orbit__hold {
    position: absolute;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 32;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    border-radius: 100px;
    padding: 6px 16px;
    font: inherit;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.scw-orbit__hold:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.scw-orbit__hold.is-on {
    color: var(--scw-orbit-accent);
    border-color: var(--scw-orbit-accent);
}

/* ── Small screens ─────────────────────────────────────── */

@media (max-width: 900px) {
    .scw-orbit { --scw-orbit-w: 46vw; --scw-orbit-h: 62vh; }
    .scw-orbit__card { width: clamp(150px, var(--scw-orbit-w), 300px); }
    .scw-orbit__hint { bottom: 24px; font-size: 8.5px; letter-spacing: 0.26em; }
    .scw-orbit__hold { bottom: 52px; }
}

@media (max-width: 560px) {
    .scw-orbit { --scw-orbit-w: 58vw; --scw-orbit-h: 56vh; }
    .scw-orbit__dash { width: 14px; }
}

/* No JS, or reduced motion: a plain readable grid */
@media (prefers-reduced-motion: reduce) {
    .scw-orbit__sheen { animation: none; opacity: 0; }
    .scw-orbit__inner { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   SERVICE RAIL
────────────────────────────────────────────────────────── */

.scw-rail-wrap { position: relative; }

.scw-rail {
    --scw-rail-w: 46vw;
    --scw-rail-max: 620px;
    --scw-rail-radius: var(--scw-r-lg);
    --scw-rail-gap: 20px;
    --scw-rail-veil: 8px;
    --scw-rail-accent: var(--scw-accent);

    display: flex;
    gap: var(--scw-rail-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Negative margin plus padding lets card shadows breathe without clipping */
    margin: -16px -15px;
    padding: 16px 15px;
}
.scw-rail::-webkit-scrollbar { display: none; }
.scw-rail:focus-visible { outline: 2px solid var(--scw-rail-accent); outline-offset: 4px; }

.scw-rail__card {
    flex: 0 0 auto;
    width: calc(100vw - 40px);
    max-width: 360px;
    scroll-snap-align: start;
    border-radius: var(--scw-rail-radius);
    text-decoration: none;
    cursor: pointer;
    outline: none;
}
.scw-rail__card:focus-visible { box-shadow: 0 0 0 2px var(--scw-rail-accent); }

.scw-rail__frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--scw-rail-radius);
    background: #0A0A0C;
    text-align: left;
}

.scw-rail__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease-out, filter .7s ease-out;
    will-change: transform, filter;
}
.scw-rail__card:hover .scw-rail__img,
.scw-rail__card:focus-visible .scw-rail__img { transform: scale(1.045); filter: blur(2px); }

/* Frosted band masked to fade at both ends, so the title has something to
   sit on without laying a flat grey sheet over the photograph. */
.scw-rail__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.10);
    opacity: 0.85;
    -webkit-backdrop-filter: blur(var(--scw-rail-veil));
            backdrop-filter: blur(var(--scw-rail-veil));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.12) 24%, #000 64%, rgba(0,0,0,0.35) 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.12) 24%, #000 64%, rgba(0,0,0,0.35) 88%, transparent 100%);
    transition: opacity .5s ease, backdrop-filter .5s ease;
}
.scw-rail__card:hover .scw-rail__veil { opacity: 1; }

.scw-rail__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.64) 30%, rgba(0,0,0,0.18) 64%, transparent 84%);
}

.scw-rail__top {
    position: absolute;
    inset: 0 0 auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: clamp(16px, 2vw, 28px);
    color: #fff;
}

/* Shared glass chip treatment */
.scw-rail__ico,
.scw-rail__count,
.scw-rail__arrow,
.scw-rail__nib {
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 24px rgba(0,0,0,0.22);
    color: #fff;
}

.scw-rail__ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.scw-rail__ico svg { width: 19px; height: 19px; fill: currentColor; }
.scw-rail__ico i { font-size: 17px; }
.scw-rail__card:hover .scw-rail__ico {
    transform: translateY(-4px) rotate(-4deg);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.7);
}

.scw-rail__count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 100px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.85);
}
.scw-rail__count i { font-style: normal; opacity: .55; }

.scw-rail__foot {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(16px, 2vw, 32px);
    color: #fff;
}

.scw-rail__price {
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.scw-rail__title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(21px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #fff;
}

.scw-rail__nib {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    transition: transform .3s ease;
}
.scw-rail__nib svg { width: 15px; height: 15px; transform: rotate(-45deg); }

/* The expanding description is desktop only — on a phone the card would be
   entirely text over a photograph. */
.scw-rail__more { display: none; }

.scw-rail__arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.scw-rail__arrow svg,
.scw-rail__nib svg,
.scw-rail__btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.scw-rail__arrow svg { width: 19px; height: 19px; }

@media (min-width: 640px) {
    .scw-rail__card { width: 380px; max-width: none; }
}

@media (min-width: 1024px) {
    .scw-rail__card { width: min(var(--scw-rail-w), var(--scw-rail-max)); }
    .scw-rail__nib { display: none; }

    /* 0fr → 1fr animates height without measuring anything */
    .scw-rail__more {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows .5s ease-out, opacity .5s ease-out, margin-top .5s ease-out;
    }
    .scw-rail__card:hover .scw-rail__more,
    .scw-rail__card:focus-visible .scw-rail__more {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 18px;
    }
    .scw-rail__more > div { overflow: hidden; }
    .scw-rail__more-in {
        display: flex;
        align-items: flex-end;
        gap: 16px;
        padding: 10px 0 2px;
        min-height: 76px;
    }
    .scw-rail__more-in p {
        flex: 1;
        margin: 0;
        max-width: 32rem;
        font-size: 14.5px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
    }
    .scw-rail__card:hover .scw-rail__arrow { transform: rotate(-35deg); }
}

.scw-rail__nav {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}
.scw-rail-wrap.is-static .scw-rail__nav { display: none; }

.scw-rail__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: currentColor;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.scw-rail__btn svg { width: 17px; height: 17px; }
.scw-rail__btn:hover:not(:disabled) {
    background: var(--scw-rail-accent);
    border-color: var(--scw-rail-accent);
    color: #fff;
}
.scw-rail__btn:disabled { opacity: .3; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .scw-rail { scroll-behavior: auto; }
    .scw-rail__img, .scw-rail__ico, .scw-rail__arrow, .scw-rail__more { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   PRICE LIST
────────────────────────────────────────────────────────── */

.scw-plist {
    --scw-pl-text: var(--scw-text);
    --scw-pl-line: var(--scw-line);
    --scw-pl-muted: var(--scw-muted);
    --scw-pl-accent: var(--scw-accent);
    width: 100%;
}

.scw-plist__eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--scw-pl-muted);
}

.scw-plist__rows { border-top: 1px solid var(--scw-pl-line); }

.scw-plist__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 0;
    border-bottom: 1px solid var(--scw-pl-line);
    text-decoration: none;
    color: inherit;
    transition:
        background var(--scw-t-fast) var(--scw-ease),
        padding var(--scw-t-mid) var(--scw-ease);
}
.scw-plist__rows > *:last-child { border-bottom: 0; }
.scw-plist--hl .scw-plist__row:hover {
    background: color-mix(in srgb, var(--scw-pl-accent) 6%, transparent);
    padding-left: 16px;
    padding-right: 16px;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-plist--hl .scw-plist__row:hover { background: rgba(255, 255, 255, 0.04); }
}

.scw-plist__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.scw-plist__ico {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--scw-pl-muted);
    transition: color .25s ease;
}
.scw-plist__ico svg { width: 100%; height: 100%; fill: currentColor; }
.scw-plist__ico i { font-size: 17px; }
.scw-plist__row:hover .scw-plist__ico { color: var(--scw-pl-accent); }

.scw-plist__name {
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 600;
    color: var(--scw-pl-text);
    /* Long names truncate rather than pushing the price off the row */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scw-plist__badge {
    flex: none;
    display: none;
    border-radius: 100px;
    padding: 4px 11px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    /* Darkened so it reads as a label rather than a second accent competing
       with the row's own hover tint. */
    background: color-mix(in srgb, var(--scw-pl-accent) 68%, #000);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-plist__badge { background: var(--scw-pl-accent); }
}
@media (min-width: 640px) { .scw-plist__badge { display: inline-block; } }

.scw-plist__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.scw-plist__price {
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 600;
    color: var(--scw-pl-text);
    white-space: nowrap;
}

.scw-plist__nib {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--scw-pl-muted);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), color .25s ease;
}
.scw-plist__nib svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scw-plist__row:hover .scw-plist__nib { transform: translate(3px, -3px); color: var(--scw-pl-accent); }
.scw-plist__row:hover .scw-plist__name { color: var(--scw-pl-accent); }
.scw-plist__name { transition: color var(--scw-t-fast) var(--scw-ease); }

.scw-plist__note {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--scw-pl-muted);
}
.scw-plist__note a {
    color: var(--scw-pl-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.scw-plist__note a:hover { color: var(--scw-pl-accent); }

@media (prefers-reduced-motion: reduce) {
    .scw-plist__row, .scw-plist__nib { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   CINEMATIC REVEAL
────────────────────────────────────────────────────────── */

.scw-cine {
    --scw-cine-scroll: 220vh;
    --scw-cine-accent: var(--scw-accent);
    --scw-cine-bg: var(--scw-ink);
    --scw-cine-radius: var(--scw-r-lg);

    position: relative;
    height: var(--scw-cine-scroll);
    background: var(--scw-cine-bg);
}

.scw-cine__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--scw-cine-bg);
}

.scw-cine__wash {
    position: absolute;
    inset: 0;
    background: var(--scw-cine-accent);
    opacity: 0.5;
}

.scw-cine__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center;
    will-change: clip-path, transform;
    /* JS overwrites this each frame; the starting slot is here so the first
       paint is already correct rather than flashing full-bleed. */
    clip-path: inset(24% 20% 24% 20% round var(--scw-cine-radius));
}

.scw-cine__vig {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.45), transparent 35%, transparent 65%, rgba(0,0,0,0.45));
}

.scw-cine__copy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    pointer-events: none;
}

.scw-cine__h {
    margin: 0;
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(38px, 8vw, 104px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.scw-cine--lower .scw-cine__h { text-transform: lowercase; }

.scw-cine__sub {
    margin: 20px 0 0;
    max-width: 30rem;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
}

.scw-cine__feat {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.12) rotate(-2.5deg);
}

.scw-cine__card {
    position: relative;
    display: block;
    width: min(92vw, 1100px);
    max-height: 78vh;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.scw-cine__card { will-change: clip-path; }
.scw-cine__card video,
.scw-cine__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scw-cine__cardfoot {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: block;
    padding: clamp(18px, 2.4vw, 30px);
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.25) 55%, transparent);
}
.scw-cine__cardfoot em {
    display: block;
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--scw-cine-accent);
    margin-bottom: 8px;
}
.scw-cine__cardrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.scw-cine__cardrow b {
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    font-size: clamp(20px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: #fff;
}
.scw-cine__cardrow i {
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    transition: color .25s ease;
}
.scw-cine__card:hover .scw-cine__cardrow i { color: #fff; }

/* Phones get a plain stacked version: a 220vh pinned section on a small
   screen is a long scroll for one effect, and it reads as a stuck page. */
@media (max-width: 767px) {
    .scw-cine:not(.scw-cine--pinmob) { height: auto; }
    .scw-cine:not(.scw-cine--pinmob) .scw-cine__pin {
        position: static;
        height: auto;
        min-height: 78vh;
        padding: 64px 0;
    }
    .scw-cine:not(.scw-cine--pinmob) .scw-cine__bg { clip-path: none; }
    .scw-cine:not(.scw-cine--pinmob) .scw-cine__copy { position: relative; inset: auto; padding: 0 20px 40px; }
    .scw-cine:not(.scw-cine--pinmob) .scw-cine__feat {
        position: relative;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .scw-cine:not(.scw-cine--pinmob) .scw-cine__vig { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-cine__bg { clip-path: none; }
    .scw-cine__feat { opacity: 1; transform: none; pointer-events: auto; }
}


/* ── Flip Box cursor glow ───────────────────────────────
   The halo goes on each face rather than the wrapper: the
   wrapper never moves, and the glow has to clip to the
   face's own rounded corner. Both faces sit in the inner's
   preserve-3d context, so they need their own stacking to
   keep the pseudo-elements behind the content.
──────────────────────────────────────────────────────── */

.scw-fb__face.scw-cg {
    position: absolute;      /* re-stated: the generic .scw-cg rule must not win */
    isolation: isolate;
}

/* The front face paints its image as a background, so the halo must sit
   above that but below the title. */
.scw-fb__front.scw-cg::after { z-index: 1; }
.scw-fb__front.scw-cg .scw-fb__front-title { position: relative; z-index: 2; }
.scw-fb__front.scw-cg.scw-cg--ring::before { z-index: 3; }

.scw-fb__back.scw-cg .scw-fb__back-inner { position: relative; z-index: 1; }

/* Rounded corners come from the face, so the halo follows them */
.scw-fb__face.scw-cg::after,
.scw-fb__face.scw-cg.scw-cg--ring::before { border-radius: inherit; }


/* ──────────────────────────────────────────────────────────
   LIVE SITES
   Browser-framed cards on a scroll-snap track, filtered by
   category tabs. Uses the shared tokens throughout.
────────────────────────────────────────────────────────── */

.scw-ls {
    --scw-ls-accent: var(--scw-accent, #FF3874);
    --scw-ls-card:   var(--scw-panel, #0E1017);
    --scw-ls-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-ls-text:   var(--scw-text, #F4F6F8);
    --scw-ls-muted:  var(--scw-muted, #99A1AE);
    --scw-ls-radius: var(--scw-r-md, 14px);
    --scw-ls-gap:    22px;
    --scw-ls-pan:    4s;
    --scw-ls-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));

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

/* ── Tabs ───────────────────────────────────────────────── */

.scw-ls__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(22px, 3vw, 34px);
}

.scw-ls__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--scw-ls-line);
    background: transparent;
    border-radius: 100px;
    padding: 9px 16px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--scw-ls-muted);
    cursor: pointer;
    transition:
        background var(--scw-t-fast, .25s) var(--scw-ls-ease),
        border-color var(--scw-t-fast, .25s) var(--scw-ls-ease),
        color var(--scw-t-fast, .25s) var(--scw-ls-ease);
}
.scw-ls__tab:hover { color: var(--scw-ls-text); border-color: var(--scw-line-2, rgba(255,255,255,.16)); }
.scw-ls__tab.is-on {
    background: var(--scw-ls-accent);
    border-color: var(--scw-ls-accent);
    color: #fff;
    font-weight: 600;
}
.scw-ls__tab:focus-visible { outline: 2px solid var(--scw-ls-accent); outline-offset: 3px; }

.scw-ls__tab i {
    font-style: normal;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px;
    opacity: .6;
}

/* ── Track ──────────────────────────────────────────────── */

.scw-ls__viewport { position: relative; }

.scw-ls__track {
    --scw-ls-pv: 4;
    display: grid;
    grid-auto-flow: column;
    /* Cards plus gaps land exactly on the track edge at any per-view count */
    grid-auto-columns: calc((100% - (var(--scw-ls-gap) * (var(--scw-ls-pv) - 1))) / var(--scw-ls-pv));
    gap: var(--scw-ls-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* An overflow scroller clips in both directions, so the track carries
       enough padding for the shadows and the hover lift. The negative margin
       pulls the edges back so the cards still line up with the section, and
       scroll-padding keeps snapping aligned to the card rather than the pad. */
    padding: 20px 22px 24px;
    margin: -20px -22px -24px;
    scroll-padding-inline: 22px;
}
.scw-ls__track::-webkit-scrollbar { display: none; }
.scw-ls__track:focus-visible { outline: 2px solid var(--scw-ls-accent); outline-offset: 6px; }

/* ── Card ───────────────────────────────────────────────── */

.scw-ls__card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    transition: transform var(--scw-t-mid, .45s) var(--scw-ls-ease);
}
.scw-ls__card[hidden] { display: none; }
.scw-ls__card:hover { transform: translateY(-4px); }
.scw-ls__card:focus-visible { outline: 2px solid var(--scw-ls-accent); outline-offset: 4px; border-radius: var(--scw-ls-radius); }

.scw-ls__screen {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--scw-ls-radius);
    border: 0;
    background: var(--scw-ls-card);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 18px 44px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(0, 0, 0, 0.4);
    transition: box-shadow var(--scw-t-mid, .45s) var(--scw-ls-ease);
}

/* A gradient edge rather than a flat outline — bright along the top, gone by
   the bottom, the way a screen catches light. */
.scw-ls__screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0.20) 0%,
        rgba(255, 255, 255, 0.06) 28%,
        rgba(255, 255, 255, 0.02) 60%,
        transparent 85%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    transition: background var(--scw-t-mid, .45s) ease;
}
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .scw-ls__screen::after { display: none; }
    .scw-ls__screen { border: 1px solid var(--scw-ls-line); }
}

.scw-ls__card:hover .scw-ls__screen {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 26px 60px rgba(0, 0, 0, 0.62),
        0 0 0 1px color-mix(in srgb, var(--scw-ls-accent) 38%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-ls__card:hover .scw-ls__screen { box-shadow: 0 26px 60px rgba(0,0,0,.62); }
}

/* Browser chrome, so the card reads as a website rather than a picture */
.scw-ls__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);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-ls__chrome { background: var(--scw-panel-2, #14161F); }
}

.scw-ls__dots { display: flex; gap: 5px; flex: none; }
.scw-ls__dots i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}
.scw-ls__dots i:first-child { background: color-mix(in srgb, var(--scw-ls-accent) 78%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-ls__dots i:first-child { background: var(--scw-ls-accent); }
}

/* A small lock, so the bar reads as an address bar at a glance */
.scw-ls__bar::before {
    content: '';
    width: 7px;
    height: 8px;
    flex: none;
    border-radius: 1.5px;
    background: currentColor;
    opacity: .45;
    box-shadow: 0 -2.5px 0 -1px transparent, inset 0 0 0 1px transparent;
    -webkit-mask: radial-gradient(circle 2px at 50% 1.5px, transparent 96%, #000 100%);
            mask: radial-gradient(circle 2px at 50% 1.5px, transparent 96%, #000 100%);
}

.scw-ls__bar {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    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;
    letter-spacing: 0.02em;
    color: var(--scw-ls-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* Without a capture the card would be a dead grey box, so it becomes a
   deliberate placeholder: a faint grid with the domain set across it. */
.scw-ls__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 16px;
    text-align: center;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--scw-ls-muted) 70%, transparent);
    background:
        radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--scw-ls-accent) 10%, transparent), transparent 62%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 34px),
        var(--scw-ls-card);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-ls__empty { color: var(--scw-ls-muted); background: var(--scw-ls-card); }
}

/* The iframe is rendered at a desktop width and scaled down. Sized to the
   card instead, the site sees a ~280px viewport and serves its mobile layout —
   hamburger, stacked content, its own scrollbars — which is not the design
   anyone wants to show off. */
.scw-ls__frame iframe {
    width: var(--scw-ls-vw, 1440px);
    height: var(--scw-ls-vh, 1000px);
    border: 0;
    display: block;
    background: var(--scw-ls-card);
    transform: scale(var(--scw-ls-scale, .195));
    transform-origin: top left;
    /* Belt and braces — some engines still paint a scrollbar gutter */
    scrollbar-width: none;
}
.scw-ls__frame iframe::-webkit-scrollbar { display: none; }
/* The capture stays underneath as the fallback when framing is refused */
.scw-ls__frame + .scw-ls__img { position: relative; z-index: 0; }

.scw-ls__go {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--scw-ls-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(--scw-ls-ease);
}
.scw-ls__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scw-ls__card:hover .scw-ls__go,
.scw-ls__card:focus-visible .scw-ls__go { opacity: 1; transform: none; }

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

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

.scw-ls__name {
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--scw-ls-text);
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-ls__card:hover .scw-ls__name { color: var(--scw-ls-accent); }

.scw-ls__note {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--scw-ls-muted);
}

/* ── Arrows & pager ─────────────────────────────────────── */

.scw-ls__arrow {
    position: absolute;
    top: calc(50% - 28px);
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--scw-ls-line);
    background: var(--scw-ls-card);
    color: var(--scw-ls-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background var(--scw-t-fast, .25s) ease, border-color var(--scw-t-fast, .25s) ease, opacity var(--scw-t-fast, .25s) ease;
}
.scw-ls__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scw-ls__arrow--prev { left: -21px; }
.scw-ls__arrow--next { right: -21px; }
.scw-ls__arrow {
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.scw-ls__arrow:hover:not(:disabled) { background: var(--scw-ls-accent); border-color: var(--scw-ls-accent); color: #fff; }
.scw-ls__arrow:disabled { opacity: .28; cursor: default; }

/* Below this there is no room beside the track, and floating the arrows over
   the cards covers the work they are meant to show. Swipe and the dots do the
   job on a touch screen. */
@media (max-width: 1280px) {
    .scw-ls__arrow { display: none; }
}

.scw-ls__pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}
.scw-ls__pager[hidden] { display: none; }

.scw-ls__pager button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: var(--scw-ls-line);
    cursor: pointer;
    transition: width var(--scw-t-mid, .45s) ease, background var(--scw-t-mid, .45s) ease;
}
.scw-ls__pager button.is-on { width: 26px; background: var(--scw-ls-accent); }

.scw-ls__none {
    margin: 24px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--scw-ls-muted);
}

@media (prefers-reduced-motion: reduce) {
    .scw-ls__track { scroll-behavior: auto; }
    .scw-ls__img, .scw-ls__card, .scw-ls__go, .scw-ls__tab { transition: none; }
    .scw-ls--pan .scw-ls__card:hover .scw-ls__img { transform: none; }
}


/* ──────────────────────────────────────────────────────────
   LIVE SITES — DEVICE FRAMES
   A laptop with a phone leaning on it. Drawn in CSS rather
   than shipped as a PNG mockup, so it stays sharp at any
   size and recolours with the tokens.
────────────────────────────────────────────────────────── */

.scw-ls__stage {
    position: relative;
    width: 100%;
    /* Not clipped. The geometry keeps the devices inside the box, and the
       shadows are meant to fall outside it — clipping them cut a hard line
       down the side of every card. */
    overflow: visible;
    --scw-ls-phone: 84%;      /* phone height, as a share of the stage */
    --scw-ls-lap: 72%;        /* laptop width, leaving room for the overhang */
}

/* The stage carries a real height. Without one the phone — absolutely
   positioned and taller than the lid — had nothing to sit inside and spilled
   over the card below and the card beside it. */
.scw-ls__stage--duo    { aspect-ratio: 16 / 11; }
.scw-ls__stage--laptop { aspect-ratio: 16 / 11; }
.scw-ls__stage--phone  { aspect-ratio: 16 / 13; }

/* ── Laptop ─────────────────────────────────────────────── */

/* Narrower than the stage, so the phone has somewhere to stand rather than
   covering the screen it is meant to sit beside. */
/* The base is wider than the lid and hangs past it on both sides, so the
   laptop is inset by at least that overhang — flush at zero it spilled out of
   the card and over its neighbour. */
.scw-ls__laptop {
    position: absolute;
    left: 6%;
    top: 3%;
    width: var(--scw-ls-lap);
}
.scw-ls__stage--laptop .scw-ls__laptop {
    width: 86%;
    left: 7%;
    top: 8%;
}

.scw-ls__lid {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: clamp(5px, 1.1cqw, 11px);
    padding: 2.4%;
    background: linear-gradient(160deg, #3a3d44 0%, #191b1f 42%, #0d0e11 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 18px 38px rgba(0, 0, 0, 0.55);
}
.scw-ls__lid::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.scw-ls__cam {
    position: absolute;
    top: 0.9%;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #05060a;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.scw-ls__base {
    position: relative;
    width: 114%;
    margin-left: -7%;
    height: 8px;
    border-radius: 0 0 40% 40% / 0 0 100% 100%;
    background: linear-gradient(to bottom, #43464d 0%, #24262b 38%, #131417 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 12px 20px rgba(0, 0, 0, 0.5);
}

.scw-ls__notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 13%;
    height: 40%;
    border-radius: 0 0 5px 5px;
    background: rgba(0, 0, 0, 0.34);
}

/* ── Phone ──────────────────────────────────────────────── */

/* Sized from the stage height, not its width — that is what keeps it in
   proportion to the laptop instead of towering over it. */
.scw-ls__phone {
    position: absolute;
    right: 1.5%;              /* room for the side buttons */
    bottom: 1%;
    z-index: 4;
    height: var(--scw-ls-phone);
    width: auto;
    aspect-ratio: 9 / 19.5;
}
.scw-ls__stage--phone .scw-ls__phone {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: 94%;
    bottom: 3%;
}

.scw-ls__pbody {
    position: relative;
    height: 100%;
    border-radius: clamp(8px, 2.2cqw, 20px);
    background: linear-gradient(150deg, #4a4d55 0%, #1d1f24 40%, #0c0d10 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 16px 30px rgba(0, 0, 0, 0.6);
}
.scw-ls__pbody::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.scw-ls__island {
    position: absolute;
    top: 2.2%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 34%;
    height: 2.4%;
    min-height: 3px;
    border-radius: 100px;
    background: #05060a;
}

.scw-ls__pbtn {
    position: absolute;
    right: -2px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(to right, #2a2c31, #4a4d55);
}
.scw-ls__pbtn--a { top: 26%; height: 9%; }
.scw-ls__pbtn--b { top: 38%; height: 6%; }

/* ── Screens ────────────────────────────────────────────── */

/* The screen. Every box property is stated here rather than inherited, so a
   leftover rule cannot leave it sized to its frame instead of to the inset
   area — which is what let the site spill past the device edges. */
.scw-ls__shot {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    overflow: hidden;
    border-radius: clamp(2px, 0.6cqw, 5px);
    background: var(--scw-ls-card);
    container-type: size;
}

/* Browser frame: below the chrome bar */
.scw-ls__screen .scw-ls__shot {
    inset: 30px 0 0 0;
    border-radius: 0;
}

/* Laptop: inside the bezel */
.scw-ls__lid .scw-ls__shot { inset: 2.4%; }

/* Phone: inside the body */
.scw-ls__pbody .scw-ls__shot {
    inset: 3px;
    border-radius: clamp(6px, 1.9cqw, 17px);
}

/* JS measures the overflow and writes --scw-ls-shift, so the pan lands
   exactly at the bottom of the page rather than an estimated distance. */
.scw-ls__img {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transform: translateY(0);
    transition: transform .6s var(--scw-ls-ease);
    will-change: transform;
}
.scw-ls--pan .scw-ls__card:hover .scw-ls__img,
.scw-ls--pan .scw-ls__card:focus-visible .scw-ls__img,
.scw-ls--pan .scw-ls__card.is-live .scw-ls__img {
    transform: translateY(var(--scw-ls-shift, 0px));
    transition-duration: var(--scw-ls-pan);
    transition-timing-function: linear;
}

.scw-ls__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
/* WordPress core and most themes ship `iframe { max-width: 100% }`. That
   clamps this frame from its render width down to the card width, so the site
   sees a phone-sized viewport and serves its mobile layout — on the laptop as
   well as the phone — and the scale then shrinks that clamped width again,
   leaving the screen mostly background. Overriding it is what makes the
   desktop preview a desktop preview. */
.scw-ls__frame iframe {
    width: var(--scw-ls-vw, 1440px) !important;
    height: var(--scw-ls-vh, 1000px) !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    border: 0;
    display: block;
    background: var(--scw-ls-card);
    transform: scale(var(--scw-ls-scale, .195)) translateY(0);
    transform-origin: top left;
    transition: transform .6s var(--scw-ls-ease);
}
.scw-ls--pan .scw-ls__card:hover .scw-ls__frame iframe,
.scw-ls--pan .scw-ls__card.is-live .scw-ls__frame iframe {
    transform: scale(var(--scw-ls-scale, .195)) translateY(var(--scw-ls-fshift, 0px));
    transition-duration: var(--scw-ls-pan);
    transition-timing-function: linear;
}

.scw-ls__go { right: auto; left: 4%; bottom: 4%; }

@media (prefers-reduced-motion: reduce) {
    .scw-ls__img, .scw-ls__frame iframe { transition: none; }
    .scw-ls--pan .scw-ls__card:hover .scw-ls__img,
    .scw-ls--pan .scw-ls__card:hover .scw-ls__frame iframe { transform: none; }
    .scw-ls--pan .scw-ls__card:hover .scw-ls__frame iframe { transform: scale(var(--scw-ls-scale, .195)); }
}


/* A card with nothing to show gets one quiet panel rather than empty device
   frames repeating "coming soon" in both of them. */
.scw-ls__stage--blank {
    aspect-ratio: 16 / 11;
    border-radius: var(--scw-ls-radius);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.scw-ls__stage--blank .scw-ls__empty { border-radius: inherit; }


/* ── Live Sites on small screens ─────────────────────────
   One card fills the track, so the devices have real width
   to work with — but a laptop and a phone side by side on a
   360px screen leaves each too small to read. Below 600px
   the laptop takes the card on its own; the visitor is
   already holding the mobile version.
──────────────────────────────────────────────────────── */

@media (max-width: 600px) {

    .scw-ls__stage--duo .scw-ls__phone { display: none; }
    .scw-ls__stage--duo .scw-ls__laptop {
        width: 86%;
        left: 7%;
        top: 8%;
    }

    .scw-ls__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -4px;
        padding-inline: 4px;
        padding-bottom: 2px;
    }
    .scw-ls__tabs::-webkit-scrollbar { display: none; }
    .scw-ls__tab { flex: none; padding: 8px 14px; font-size: 12px; }

    /* No negative pull here — beyond the viewport it would give the page a
       horizontal scrollbar. */
    .scw-ls__track {
        padding: 16px 14px 20px;
        margin: -16px 0 -20px;
        scroll-padding-inline: 14px;
    }

    .scw-ls__name { font-size: 14.5px; }
    .scw-ls__note { font-size: 12.5px; }
    .scw-ls__pager { margin-top: 18px; }

    /* Nothing to hover on a touch screen, so the badge is always shown */
    .scw-ls__go { opacity: 1; transform: none; width: 30px; height: 30px; }
}

/* Phone-only frames stay centred and legible rather than shrinking */
@media (max-width: 600px) {
    .scw-ls__stage--phone .scw-ls__phone { height: 96%; bottom: 2%; }
}

@media (hover: none) {
    .scw-ls__go { opacity: 1; transform: none; }
}


/* ──────────────────────────────────────────────────────────
   SERVICE INDEX
   A numbered list that expands in place. Each service has a
   paragraph and six or seven inclusions, which a hover card
   would have to hide on a phone — this shows the same
   content on every device.
────────────────────────────────────────────────────────── */

.scw-si {
    --scw-si-accent: var(--scw-accent, #FF3874);
    --scw-si-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-si-text:   var(--scw-text, #F4F6F8);
    --scw-si-muted:  var(--scw-muted, #99A1AE);
    --scw-si-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));

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

/* ── Header ─────────────────────────────────────────────── */

.scw-si__head {
    max-width: 720px;
    margin-bottom: clamp(30px, 4vw, 52px);
}

.scw-si__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--scw-si-accent);
    margin-bottom: 14px;
}
.scw-si__eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.scw-si__h2 {
    margin: 0 0 14px;
    font-size: clamp(27px, 3.6vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--scw-si-text);
    text-wrap: balance;
}

.scw-si__sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--scw-si-muted);
    text-wrap: pretty;
}

/* ── List & rail ────────────────────────────────────────── */

.scw-si__list { position: relative; }

/* The rail marker slides to whichever row is open, which gives the list a
   sense of place — the position is written by script as two custom
   properties so nothing has to be re-laid-out to move it. */
.scw-si__rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--scw-si-line);
    border-radius: 2px;
    display: none;
}
.scw-si--rail .scw-si__rail { display: block; }

.scw-si__mark {
    position: absolute;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: var(--scw-si-accent);
    top: var(--scw-si-mark-top, 0px);
    height: var(--scw-si-mark-h, 0px);
    transition: top .5s var(--scw-si-ease), height .5s var(--scw-si-ease);
}
.scw-si__mark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 22px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--scw-si-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scw-si-accent) 18%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-si__mark::after { box-shadow: none; }
}

.scw-si--rail .scw-si__row { padding-left: clamp(18px, 2.4vw, 34px); }

/* ── Row ────────────────────────────────────────────────── */

.scw-si__row { border-top: 1px solid var(--scw-si-line); }
.scw-si__row:last-child { border-bottom: 1px solid var(--scw-si-line); }

.scw-si__hd { margin: 0; }

.scw-si__btn {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: clamp(12px, 1.6vw, 22px);
    padding: clamp(18px, 2.2vw, 26px) 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.scw-si__btn:focus-visible { outline: 2px solid var(--scw-si-accent); outline-offset: 4px; }

.scw-si__n {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--scw-si-muted);
    opacity: .65;
    transition: color var(--scw-t-fast, .25s) ease, opacity var(--scw-t-fast, .25s) ease;
}
.scw-si__row.is-open .scw-si__n { color: var(--scw-si-accent); opacity: 1; }

.scw-si__icon {
    width: clamp(34px, 3.2vw, 42px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--scw-si-line);
    color: var(--scw-si-text);
    flex: none;
    transition:
        border-color var(--scw-t-fast, .25s) ease,
        background var(--scw-t-fast, .25s) ease,
        color var(--scw-t-fast, .25s) ease;
}
.scw-si__icon svg { width: 17px; height: 17px; }
.scw-si__icon i { font-size: 15px; }

.scw-si__row.is-open .scw-si__icon,
.scw-si__btn:hover .scw-si__icon {
    border-color: var(--scw-si-accent);
    color: var(--scw-si-accent);
}

.scw-si__name {
    font-size: clamp(16px, 1.55vw, 21px);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: var(--scw-si-text);
    text-wrap: pretty;
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-si__btn:hover .scw-si__name { color: var(--scw-si-accent); }

/* Plus that becomes a minus */
.scw-si__plus {
    position: relative;
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--scw-si-muted);
}
.scw-si__plus i {
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .45s var(--scw-si-ease), opacity .3s ease;
}
.scw-si__plus i:last-child { transform: rotate(90deg); }
.scw-si__row.is-open .scw-si__plus { color: var(--scw-si-accent); }
.scw-si__row.is-open .scw-si__plus i:last-child { transform: rotate(0deg); }

/* ── Panel ──────────────────────────────────────────────── */

/* 0fr to 1fr animates height without measuring anything, and the content
   stays in the document for search and for find-on-page. */
.scw-si__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--scw-si-ease);
}
.scw-si__row.is-open .scw-si__panel { grid-template-rows: 1fr; }

.scw-si__panelin {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity .35s ease;
}
.scw-si__row.is-open .scw-si__panelin { opacity: 1; transition-delay: .1s; }

.scw-si__body {
    margin: 0 0 clamp(18px, 2vw, 24px);
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.65;
    color: var(--scw-si-muted);
    text-wrap: pretty;
}

.scw-si__inc {
    --scw-si-cols: 2;
    list-style: none;
    margin: 0 0 clamp(6px, 1vw, 10px);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--scw-si-cols), minmax(0, 1fr));
    gap: 10px clamp(20px, 2.6vw, 40px);
}

.scw-si__inc li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--scw-si-text);
    opacity: .88;
}

/* A small arrow rather than a bullet — these are deliverables, not notes */
.scw-si__inc li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--scw-si-accent);
    border-top: 1.5px solid var(--scw-si-accent);
    transform: translateY(-50%) rotate(45deg);
}

.scw-si__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(16px, 2vw, 22px);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--scw-si-accent);
    text-decoration: none;
}
.scw-si__more svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--scw-t-fast, .25s) var(--scw-si-ease);
}
.scw-si__more:hover svg { transform: translateX(4px); }

.scw-si__panelin > :last-child { margin-bottom: clamp(22px, 2.6vw, 30px); }

/* ── Small screens ──────────────────────────────────────── */

@media (max-width: 640px) {

    /* The number and icon side by side eat the width the service name needs,
       so the icon steps out and the name takes the row. */
    .scw-si__btn {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 17px 0;
    }
    .scw-si__icon { display: none; }

    .scw-si__name { font-size: 15.5px; }
    .scw-si__inc { gap: 9px 0; }
    .scw-si--rail .scw-si__row { padding-left: 16px; }
    .scw-si__mark::after { top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-si__panel,
    .scw-si__panelin,
    .scw-si__mark,
    .scw-si__plus i { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   FLOATING LOGOS
   One image with small logo chips drifting around it. The
   drift is keyframes, not script — each chip runs on its own
   clock so they never move in step.
────────────────────────────────────────────────────────── */

.scw-fl {
    --scw-fl-accent:  var(--scw-accent, #FF3874);
    --scw-fl-chip-bg: var(--scw-panel, #0E1017);
    --scw-fl-line:    var(--scw-line, rgba(255,255,255,0.09));
    --scw-fl-text:    var(--scw-text, #F4F6F8);
    --scw-fl-muted:   var(--scw-muted, #99A1AE);
    --scw-fl-ease:    var(--scw-ease, cubic-bezier(.22,.61,.36,1));
    --scw-fl-chip:    30%;
    --scw-fl-drift:   10px;
    --scw-fl-speed:   6s;

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

/* Inset so a chip sitting past the image edge still has room — without this
   the outer chips are clipped by the column they sit in. */
.scw-fl__stage {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    padding: 6% 12%;
}

.scw-fl__img {
    position: relative;
    z-index: 1;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 22px;
    background: var(--scw-fl-chip-bg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 26px 60px rgba(0, 0, 0, 0.5);
}
.scw-fl__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s var(--scw-fl-ease);
}
.scw-fl--zoom .scw-fl__stage:hover .scw-fl__img img { transform: scale(1.04); }

/* A wash behind the image, so the chips read as being in front of something */
.scw-fl--glow .scw-fl__stage::before {
    content: '';
    position: absolute;
    inset: 12% 6%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--scw-fl-accent) 34%, transparent),
        transparent 72%
    );
    filter: blur(46px);
    pointer-events: none;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-fl--glow .scw-fl__stage::before { background: none; }
}

.scw-fl__chip {
    position: absolute;
    z-index: 2;
    left: var(--x, 0%);
    top: var(--y, 0%);
    width: var(--scw-fl-chip);
    min-width: 76px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--scw-fl-chip-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 0 0 1px var(--scw-fl-line),
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 14px 30px rgba(0, 0, 0, 0.45);

    /* Own duration and delay per chip, derived from its index */
    animation: scw-fl-drift calc(var(--scw-fl-speed) + (var(--i, 0) * 0.9s))
               ease-in-out calc(var(--i, 0) * -1.35s) infinite;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-fl__chip { background: var(--scw-fl-chip-bg); }
}

.scw-fl--bare .scw-fl__chip {
    width: auto;
    min-width: 0;
    padding: 10px;
}

@keyframes scw-fl-drift {
    0%,
    100% { transform: translateY(0); }
    50%  { transform: translateY(calc(var(--scw-fl-drift) * -1)); }
}

.scw-fl__mark {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}
.scw-fl__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 3px;
}

.scw-fl__mark--letter {
    font-size: 14px;
    font-weight: 700;
    color: var(--scw-fl-accent);
    background: color-mix(in srgb, var(--scw-fl-accent) 14%, transparent);
}

.scw-fl__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.scw-fl__name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--scw-fl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scw-fl__note {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--scw-fl-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 560px) {
    .scw-fl__stage { padding: 5% 8%; }
    .scw-fl__chip {
        gap: 7px;
        padding: 7px 9px;
        min-width: 0;
        border-radius: 11px;
    }
    .scw-fl__mark { width: 24px; height: 24px; border-radius: 6px; }
    .scw-fl__name { font-size: 11px; }
    .scw-fl__note { font-size: 8.5px; }
}

/* Narrower still and a chip with a name cannot fit beside the image at all,
   so the names step out and the logos stand on their own. */
@media (max-width: 400px) {
    .scw-fl__text { display: none; }
    .scw-fl__chip { width: auto; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-fl__chip { animation: none; }
    .scw-fl__img img { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   FAQ
────────────────────────────────────────────────────────── */

.scw-faq {
    --scw-faq-accent: var(--scw-accent, #FF3874);
    --scw-faq-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-faq-text:   var(--scw-text, #F4F6F8);
    --scw-faq-muted:  var(--scw-muted, #99A1AE);
    --scw-faq-panel:  var(--scw-panel, #0E1017);
    --scw-faq-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));

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

.scw-faq__head {
    max-width: 700px;
    margin-bottom: clamp(26px, 3.4vw, 44px);
}

.scw-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--scw-faq-accent);
    margin-bottom: 13px;
}
.scw-faq__eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.scw-faq__h2 {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--scw-faq-text);
    text-wrap: balance;
}

.scw-faq__sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--scw-faq-muted);
    text-wrap: pretty;
}

/* ── List ───────────────────────────────────────────────── */

.scw-faq__list {
    --scw-faq-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--scw-faq-cols), minmax(0, 1fr));
    gap: 0 clamp(24px, 3vw, 48px);
    align-items: start;
}

.scw-faq__item { border-top: 1px solid var(--scw-faq-line); }
.scw-faq__list > .scw-faq__item:last-child { border-bottom: 1px solid var(--scw-faq-line); }

/* Boxed drops the shared hairlines for separate panels */
.scw-faq--boxed .scw-faq__list { gap: 12px clamp(24px, 3vw, 48px); }
.scw-faq--boxed .scw-faq__item {
    border: 1px solid var(--scw-faq-line);
    border-radius: 14px;
    background: var(--scw-faq-panel);
    padding: 0 clamp(14px, 1.6vw, 20px);
    transition: border-color var(--scw-t-fast, .25s) ease;
}
.scw-faq--boxed .scw-faq__list > .scw-faq__item:last-child { border-bottom: 1px solid var(--scw-faq-line); }
.scw-faq--boxed .scw-faq__item.is-open { border-color: var(--scw-faq-accent); }

.scw-faq__hd { margin: 0; }

.scw-faq__btn {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: clamp(11px, 1.4vw, 18px);
    padding: clamp(17px, 2vw, 23px) 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.scw-faq__btn:focus-visible { outline: 2px solid var(--scw-faq-accent); outline-offset: 3px; }

.scw-faq__n {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11.5px;
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: var(--scw-faq-muted);
    opacity: .6;
    transition: color var(--scw-t-fast, .25s) ease, opacity var(--scw-t-fast, .25s) ease;
}
.scw-faq__item.is-open .scw-faq__n { color: var(--scw-faq-accent); opacity: 1; }

.scw-faq__q {
    font-size: clamp(15.5px, 1.35vw, 19px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.012em;
    color: var(--scw-faq-text);
    text-wrap: pretty;
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-faq__btn:hover .scw-faq__q { color: var(--scw-faq-accent); }

.scw-faq__chev {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--scw-faq-line);
    color: var(--scw-faq-muted);
    transition: transform .45s var(--scw-faq-ease), color .25s ease, border-color .25s ease;
}
.scw-faq__chev svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.scw-faq__item.is-open .scw-faq__chev {
    transform: rotate(180deg);
    color: var(--scw-faq-accent);
    border-color: var(--scw-faq-accent);
}

/* ── Panel ──────────────────────────────────────────────── */

.scw-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s var(--scw-faq-ease);
}
.scw-faq__item.is-open .scw-faq__panel { grid-template-rows: 1fr; }

.scw-faq__panelin {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity .3s ease;
}
.scw-faq__item.is-open .scw-faq__panelin { opacity: 1; transition-delay: .08s; }

/* Indented to sit under the question rather than under its number */
.scw-faq__a {
    padding-bottom: clamp(18px, 2.2vw, 26px);
    max-width: 74ch;
    font-size: 16px;
    line-height: 1.65;
    color: var(--scw-faq-muted);
    text-wrap: pretty;
}
.scw-faq__a p { margin: 0 0 1em; font-size: inherit; line-height: inherit; }
.scw-faq__a p:last-child { margin-bottom: 0; }
.scw-faq__a a { color: var(--scw-faq-accent); }
.scw-faq__a ul,
.scw-faq__a ol { margin: 0 0 1em; padding-left: 1.2em; }
.scw-faq__a li { margin-bottom: .4em; }

@media (max-width: 600px) {
    .scw-faq__btn { gap: 10px; padding: 16px 0; }
    .scw-faq__q { font-size: 15.5px; }
    .scw-faq__chev { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-faq__panel,
    .scw-faq__panelin,
    .scw-faq__chev { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   AWARDS & PARTNERS
────────────────────────────────────────────────────────── */

.scw-cr {
    --scw-cr-accent: var(--scw-accent, #FF3874);
    --scw-cr-card:   var(--scw-panel, #0E1017);
    --scw-cr-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-cr-text:   var(--scw-text, #F4F6F8);
    --scw-cr-muted:  var(--scw-muted, #99A1AE);
    --scw-cr-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));
    --scw-cr-gap:    18px;
    --scw-cr-stagger: 16%;

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

.scw-cr__head { max-width: 700px; margin-bottom: clamp(24px, 3vw, 40px); }

.scw-cr__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--scw-cr-accent);
    margin-bottom: 13px;
}
.scw-cr__eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6; }

.scw-cr__h2 {
    margin: 0;
    font-size: clamp(25px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--scw-cr-text);
    text-wrap: balance;
}

/* ── Track ──────────────────────────────────────────────── */

.scw-cr__viewport { position: relative; }

.scw-cr__track {
    --scw-cr-pv: 4;
    gap: var(--scw-cr-gap);
}

.scw-cr--slider .scw-cr__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--scw-cr-gap) * (var(--scw-cr-pv) - 1))) / var(--scw-cr-pv));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* An overflow scroller clips in both directions, so the lift and shadow
       need room or they are shaved off at the track edge. */
    padding: 14px 16px calc(18px + var(--scw-cr-stagger, 0%));
    margin: -14px -16px -18px;
    scroll-padding-inline: 16px;
}
.scw-cr--slider .scw-cr__track::-webkit-scrollbar { display: none; }
.scw-cr--slider .scw-cr__track:focus-visible { outline: 2px solid var(--scw-cr-accent); outline-offset: 5px; }

.scw-cr--grid .scw-cr__track {
    display: grid;
    grid-template-columns: repeat(var(--scw-cr-pv), minmax(0, 1fr));
}

/* ── Item ───────────────────────────────────────────────── */

.scw-cr__item {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    text-decoration: none;
    transition: transform var(--scw-t-mid, .45s) var(--scw-cr-ease);
}

/* Every second card drops, so the row reads as a composition rather than a
   line of boxes. Applied as margin rather than transform, since transform is
   already carrying the hover lift. */
.scw-cr__track { align-items: start; }
.scw-cr__item:nth-child(even) { margin-top: var(--scw-cr-stagger, 0%); }

/* The dropped cards need somewhere to go, or the last row is clipped by the
   scroller and the section below is crowded. */
.scw-cr__track { padding-bottom: var(--scw-cr-stagger, 0%); }
.scw-cr__item:hover { transform: translateY(-4px); }
.scw-cr__item:focus-visible { outline: 2px solid var(--scw-cr-accent); outline-offset: 4px; border-radius: 14px; }

.scw-cr__card {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    background: var(--scw-cr-card);
    overflow: hidden;
    transition: box-shadow var(--scw-t-mid, .45s) var(--scw-cr-ease);
}

/* Hairline outline — the badge does the work, the frame just holds it */
.scw-cr--f-outline .scw-cr__card {
    box-shadow: 0 0 0 1px var(--scw-cr-edge, var(--scw-cr-accent));
}
.scw-cr--f-outline .scw-cr__item:hover .scw-cr__card {
    box-shadow:
        0 0 0 1px var(--scw-cr-edge, var(--scw-cr-accent)),
        0 0 0 4px color-mix(in srgb, var(--scw-cr-edge, var(--scw-cr-accent)) 16%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-cr--f-outline .scw-cr__item:hover .scw-cr__card {
        box-shadow: 0 0 0 2px var(--scw-cr-edge, var(--scw-cr-accent));
    }
}

/* Raised panel — the original treatment */
.scw-cr--f-panel .scw-cr__card {
    box-shadow:
        0 0 0 1px var(--scw-cr-line),
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 14px 34px rgba(0, 0, 0, 0.4);
}
.scw-cr--f-panel .scw-cr__item:hover .scw-cr__card {
    box-shadow:
        0 0 0 1px var(--scw-cr-accent),
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 20px 44px rgba(0, 0, 0, 0.55);
}

.scw-cr--f-bare .scw-cr__card { background: none; }

.scw-cr__chip {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    border-radius: 100px;
    padding: 4px 9px;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--scw-cr-muted);
}

/* Badges are contained, never cropped — each has its own shape and margins,
   and cover would cut the edges off whichever way the card is sized. */
.scw-cr__shot {
    position: absolute;
    inset: 0;
    padding: 22%;
    display: grid;
    place-items: center;
}
.scw-cr__shot img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: filter var(--scw-t-mid, .45s) ease, opacity var(--scw-t-mid, .45s) ease;
}

/* Mixed partner marks at full colour fight each other, so the row rests
   desaturated and only the hovered card comes forward. */
.scw-cr--mono .scw-cr__shot img { filter: grayscale(1); opacity: .72; }
.scw-cr--mono .scw-cr__item:hover .scw-cr__shot img { filter: none; opacity: 1; }

.scw-cr--dim .scw-cr__shot img { opacity: .6; }
.scw-cr--dim .scw-cr__item:hover .scw-cr__shot img { opacity: 1; }

.scw-cr__meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.scw-cr__name {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--scw-cr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-cr__item:hover .scw-cr__name { color: var(--scw-cr-accent); }

.scw-cr__year {
    flex: none;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--scw-cr-muted);
}

/* ── Arrows & pager ─────────────────────────────────────── */

.scw-cr__arrow {
    position: absolute;
    top: calc(50% - 20px);
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--scw-cr-line);
    background: var(--scw-cr-card);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: var(--scw-cr-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    transition: background var(--scw-t-fast, .25s) ease, border-color var(--scw-t-fast, .25s) ease, opacity var(--scw-t-fast, .25s) ease;
}
.scw-cr__arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scw-cr__arrow--prev { left: -20px; }
.scw-cr__arrow--next { right: -20px; }
.scw-cr__arrow:hover:not(:disabled) { background: var(--scw-cr-accent); border-color: var(--scw-cr-accent); color: #fff; }
.scw-cr__arrow:disabled { opacity: .28; cursor: default; }

/* No room beside the track at this width, and floating them over the cards
   covers the badges they exist to reveal. */
@media (max-width: 1200px) {
    .scw-cr__arrow { display: none; }
}

.scw-cr__pager {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
}
.scw-cr__pager[hidden] { display: none; }
.scw-cr__pager button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: var(--scw-cr-line);
    cursor: pointer;
    transition: width var(--scw-t-mid, .45s) ease, background var(--scw-t-mid, .45s) ease;
}
.scw-cr__pager button.is-on { width: 24px; background: var(--scw-cr-accent); }

@media (max-width: 600px) {
    .scw-cr--slider .scw-cr__track {
        padding: 12px 10px 16px;
        margin: -12px 0 -16px;
        scroll-padding-inline: 10px;
    }
    .scw-cr__chip { font-size: 9px; padding: 3px 7px; }
    .scw-cr__name { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-cr--slider .scw-cr__track { scroll-behavior: auto; }
    .scw-cr__item, .scw-cr__card, .scw-cr__shot img { transition: none; }
}


/* A card whose height is fixed rather than per-device keeps the same crop on
   every screen — the image fills the card, so the only thing that changes is
   the column width. */
.scw-pg__card { aspect-ratio: auto; }
.scw-pg__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--scw-pg-pos, center);
    display: block;
}


/* ──────────────────────────────────────────────────────────
   SITE SHOWCASE
────────────────────────────────────────────────────────── */

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

    display: grid;
    grid-template-columns: repeat(var(--scw-ss-cols), minmax(0, 1fr));
    gap: var(--scw-ss-gap);
    width: 100%;
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

.scw-ss__item { min-width: 0; }

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

/* ── Screenshot ─────────────────────────────────────────── */

.scw-ss__shot {
    position: relative;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    border-radius: 14px;
    background: var(--scw-ss-card);
    box-shadow:
        0 0 0 1px var(--scw-ss-line),
        0 14px 34px rgba(0, 0, 0, 0.4);
    transition: box-shadow var(--scw-t-mid, .45s) var(--scw-ss-ease);
}
.scw-ss__card:hover .scw-ss__shot {
    box-shadow:
        0 0 0 1px var(--scw-ss-accent),
        0 20px 44px rgba(0, 0, 0, 0.55);
}

.scw-ss__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    opacity: 0;
    transition: opacity .4s ease, transform 4s linear;
}
/* Held back until the real capture has arrived, so a placeholder never shows */
.scw-ss__img.is-ready { opacity: 1; }
.scw-ss__img:not(.scw-ss__img--auto) { opacity: 1; }

/* A full-page capture is taller than the frame; hover walks down it */
.scw-ss--pan .scw-ss__card:hover .scw-ss__img {
    object-position: bottom center;
    transition: object-position 3.5s linear, opacity .4s ease;
}

.scw-ss__wait {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--scw-ss-muted) 70%, transparent);
    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(--scw-ss-card);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-ss__wait { color: var(--scw-ss-muted); }
}

.scw-ss__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    border-radius: 100px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--scw-ss-text);
}

/* ── Live, on request ───────────────────────────────────── */

.scw-ss__live {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 100px;
    padding: 6px 12px 6px 9px;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    color: var(--scw-ss-text);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--scw-t-fast, .25s) ease,
                transform var(--scw-t-fast, .25s) var(--scw-ss-ease),
                background var(--scw-t-fast, .25s) ease;
}
.scw-ss__card:hover .scw-ss__live,
.scw-ss__live:focus-visible { opacity: 1; transform: none; }
.scw-ss__live:hover { background: var(--scw-ss-accent); }
.scw-ss__live svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* No hover on a touch screen, so it is always offered there */
@media (hover: none) {
    .scw-ss__live { opacity: 1; transform: none; }
}

.scw-ss__frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--scw-ss-card);
}
.scw-ss__shot.is-live .scw-ss__img { opacity: 0; }

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

.scw-ss__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.scw-ss__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--scw-ss-text);
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-ss__card:hover .scw-ss__name { color: var(--scw-ss-accent); }

.scw-ss__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--scw-ss-muted);
    text-wrap: pretty;
}

.scw-ss__url {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--scw-ss-muted);
}
.scw-ss__url svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.scw-ss__card:hover .scw-ss__url { color: var(--scw-ss-accent); }

@media (prefers-reduced-motion: reduce) {
    .scw-ss__card, .scw-ss__img, .scw-ss__live { transition: none; }
    .scw-ss--pan .scw-ss__card:hover .scw-ss__img { object-position: top center; }
}


/* ──────────────────────────────────────────────────────────
   MODULE TABS
────────────────────────────────────────────────────────── */

.scw-mt {
    --scw-mt-accent: var(--scw-accent, #FF3874);
    --scw-mt-panel:  var(--scw-panel, #0E1017);
    --scw-mt-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-mt-text:   var(--scw-text, #F4F6F8);
    --scw-mt-muted:  var(--scw-muted, #99A1AE);
    --scw-mt-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));
    --scw-mt-split:  55;

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

/* ── Tabs ───────────────────────────────────────────────── */

.scw-mt__tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.scw-mt__tab {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    text-align: left;
    padding: 15px 17px;
    border: 1px solid var(--scw-mt-line);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    color: var(--scw-mt-muted);
    cursor: pointer;
    transition:
        border-color var(--scw-t-fast, .25s) ease,
        background var(--scw-t-fast, .25s) ease,
        color var(--scw-t-fast, .25s) ease;
}
.scw-mt__tab:hover { border-color: var(--scw-line-2, rgba(255,255,255,.16)); color: var(--scw-mt-text); }
.scw-mt__tab:focus-visible { outline: 2px solid var(--scw-mt-accent); outline-offset: 3px; }

.scw-mt__tab.is-on {
    border-color: var(--scw-mt-accent);
    background: color-mix(in srgb, var(--scw-mt-accent) 10%, transparent);
    color: var(--scw-mt-text);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-mt__tab.is-on { background: rgba(255, 255, 255, 0.04); }
}

.scw-mt__n {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--scw-mt-muted);
    opacity: .75;
}
.scw-mt__tab.is-on .scw-mt__n { color: var(--scw-mt-accent); opacity: 1; }

.scw-mt__ttl {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

/* ── Panel ──────────────────────────────────────────────── */

.scw-mt__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 40px);
    padding: clamp(22px, 2.8vw, 36px);
    border: 1px solid var(--scw-mt-line);
    border-radius: 16px;
    background: var(--scw-mt-panel);
}
.scw-mt__panel[hidden] { display: none; }

@media (min-width: 900px) {
    .scw-mt__panel {
        grid-template-columns:
            calc(var(--scw-mt-split) * 1%)
            minmax(0, 1fr);
    }
    .scw-mt__panel--solo { grid-template-columns: minmax(0, 1fr); }
}

/* Entrance is on the panel's children, so the box itself does not move and
   the layout never shifts as a tab is pressed. */
.scw-mt__panel.is-in .scw-mt__copy,
.scw-mt__panel.is-in .scw-mt__vis {
    animation: scw-mt-in .45s var(--scw-mt-ease) both;
}
.scw-mt__panel.is-in .scw-mt__vis { animation-delay: .08s; }

@keyframes scw-mt-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.scw-mt__h3 {
    margin: 0 0 12px;
    font-size: clamp(19px, 1.9vw, 25px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--scw-mt-text);
    text-wrap: pretty;
}

.scw-mt__body {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--scw-mt-muted);
    text-wrap: pretty;
}

.scw-mt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.scw-mt__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    font-size: 16px;
    line-height: 1.5;
    color: var(--scw-mt-text);
}
.scw-mt__list svg {
    width: 15px;
    height: 15px;
    margin-top: 0.28em;
    fill: none;
    stroke: var(--scw-mt-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    flex: none;
}

/* ── Visual ─────────────────────────────────────────────── */

.scw-mt__vis {
    align-self: start;
    padding: clamp(16px, 1.8vw, 22px);
    border: 1px solid var(--scw-mt-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
}

.scw-mt__vis-label {
    margin: 0 0 14px;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--scw-mt-muted);
}

.scw-mt__vis-img { width: 100%; height: auto; display: block; border-radius: 10px; }

.scw-mt__rows { display: grid; gap: 8px; }

.scw-mt__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--scw-mt-panel);
    box-shadow: inset 0 0 0 1px var(--scw-mt-line);
    font-size: 13.5px;
    color: var(--scw-mt-text);
    animation: scw-mt-in .4s var(--scw-mt-ease) both;
    animation-delay: calc(0.12s + (var(--d, 0) * 0.06s));
}

.scw-mt__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--scw-mt-muted);
    flex: none;
}

.scw-mt__row-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scw-mt__state {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
    color: var(--scw-mt-muted);
    background: rgba(255, 255, 255, 0.05);
}

/* A state that says something is done, waiting or newly in reads faster with
   a colour than with the word alone — the word stays for anyone who cannot
   distinguish them. */
.scw-mt__row.is-good .scw-mt__dot   { background: #3FBF7F; }
.scw-mt__row.is-good .scw-mt__state { color: #3FBF7F; background: rgba(63, 191, 127, 0.12); }

.scw-mt__row.is-warn .scw-mt__dot   { background: #E0A93B; }
.scw-mt__row.is-warn .scw-mt__state { color: #E0A93B; background: rgba(224, 169, 59, 0.12); }

.scw-mt__row.is-new .scw-mt__dot    { background: var(--scw-mt-accent); }
.scw-mt__row.is-new .scw-mt__state  { color: var(--scw-mt-accent); background: color-mix(in srgb, var(--scw-mt-accent) 14%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-mt__row.is-new .scw-mt__state { background: rgba(255, 255, 255, 0.06); }
}

/* ── Tabs down the left ─────────────────────────────────── */

@media (min-width: 1000px) {
    .scw-mt--side {
        display: grid;
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }
    .scw-mt--side .scw-mt__tabs {
        grid-template-columns: 1fr;
        margin-bottom: 0;
    }
}

@media (max-width: 640px) {
    .scw-mt__tabs { grid-template-columns: 1fr; gap: 8px; }
    .scw-mt__tab { padding: 13px 15px; }
    .scw-mt__ttl { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-mt__panel.is-in .scw-mt__copy,
    .scw-mt__panel.is-in .scw-mt__vis,
    .scw-mt__row { animation: none; }
}


/* ──────────────────────────────────────────────────────────
   MODULE TABS
────────────────────────────────────────────────────────── */

.scw-mt {
    --scw-mt-accent: var(--scw-accent, #FF3874);
    --scw-mt-card:   var(--scw-panel, #0E1017);
    --scw-mt-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-mt-text:   var(--scw-text, #F4F6F8);
    --scw-mt-muted:  var(--scw-muted, #99A1AE);
    --scw-mt-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));
    --scw-mt-split:  54;
    --scw-mt-body:   16px;

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

/* ── Tabs ───────────────────────────────────────────────── */

/* Every tab stays visible at the top on every screen. Stacking them into a
   column put 300px of buttons above the content on a phone; a scrolling row
   keeps them all reachable in the height of one. */
.scw-mt__tabs {
    display: flex;
    gap: 10px;
    margin-bottom: clamp(22px, 3vw, 38px);

    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    /* Room for the focus ring, pulled back so the row still lines up */
    padding: 4px 4px 6px;
    margin-inline: -4px;
    scroll-padding-inline: 4px;
}
.scw-mt__tabs::-webkit-scrollbar { display: none; }

.scw-mt__tab {
    flex: 0 0 auto;
    max-width: 78vw;
    scroll-snap-align: start;
}

/* With room for them all, they share the width evenly and stop scrolling. */
@media (min-width: 760px) {
    .scw-mt--top .scw-mt__tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        overflow: visible;
    }
    .scw-mt--top .scw-mt__tab { max-width: none; }
}

.scw-mt__tab {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    text-align: left;
    padding: 15px 17px;
    border: 0;
    border-radius: 12px;
    background: var(--scw-mt-card);
    box-shadow: inset 0 0 0 1px var(--scw-mt-line);
    color: var(--scw-mt-muted);
    font: inherit;
    cursor: pointer;
    transition:
        box-shadow var(--scw-t-fast, .25s) ease,
        background var(--scw-t-fast, .25s) ease,
        color var(--scw-t-fast, .25s) ease;
}
.scw-mt__tab:hover { color: var(--scw-mt-text); box-shadow: inset 0 0 0 1px var(--scw-line-2, rgba(255,255,255,.16)); }
.scw-mt__tab:focus-visible { outline: 2px solid var(--scw-mt-accent); outline-offset: 3px; }

.scw-mt__tab.is-on {
    color: var(--scw-mt-text);
    box-shadow: inset 0 0 0 1px var(--scw-mt-accent);
    background: color-mix(in srgb, var(--scw-mt-accent) 9%, var(--scw-mt-card));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-mt__tab.is-on { background: var(--scw-mt-card); }
}

.scw-mt__n {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--scw-mt-muted);
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-mt__tab.is-on .scw-mt__n { color: var(--scw-mt-accent); }

.scw-mt__ttl {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: inherit;
    text-wrap: pretty;
}

/* In a scrolling row a wrapping title would make the tabs different heights */
@media (max-width: 759px) {
    .scw-mt__ttl {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .scw-mt__tab { padding: 12px 15px; }
    .scw-mt__ttl { font-size: 14px; }
}

/* ── Panels ─────────────────────────────────────────────── */

.scw-mt__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(26px, 3.4vw, 46px);
    align-items: start;
}
@media (min-width: 900px) {
    .scw-mt__panel {
        grid-template-columns:
            calc(var(--scw-mt-split) * 1%)
            minmax(0, 1fr);
    }
    .scw-mt__panel--full { grid-template-columns: 1fr; }
}

/* The entrance replays on every switch, so a tab change reads as a change */
.scw-mt__panel.is-in .scw-mt__text,
.scw-mt__panel.is-in .scw-mt__vis {
    animation: scw-mt-in .45s var(--scw-mt-ease) both;
}
.scw-mt__panel.is-in .scw-mt__vis { animation-delay: .07s; }

@keyframes scw-mt-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.scw-mt__h3 {
    margin: 0 0 14px;
    font-size: clamp(20px, 2.2vw, 27px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--scw-mt-text);
    text-wrap: balance;
}

.scw-mt__body {
    margin: 0 0 20px;
    font-size: var(--scw-mt-body, 16px);
    line-height: 1.65;
    color: var(--scw-mt-muted);
    text-wrap: pretty;
}

.scw-mt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.scw-mt__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    font-size: var(--scw-mt-body, 16px);
    line-height: 1.5;
    color: var(--scw-mt-text);
}
.scw-mt__list svg {
    width: 15px; height: 15px;
    margin-top: 0.25em;
    fill: none;
    stroke: var(--scw-mt-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Panel beside it ────────────────────────────────────── */

.scw-mt__vis {
    border-radius: 16px;
    background: var(--scw-mt-card);
    box-shadow: inset 0 0 0 1px var(--scw-mt-line);
    padding: clamp(16px, 2vw, 22px);
}

.scw-mt__vis-label {
    margin: 0 0 14px;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--scw-mt-muted);
}

.scw-mt__rows { display: grid; gap: 9px; }

.scw-mt__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--scw-mt-line);
    font-size: 13.5px;
    color: var(--scw-mt-text);
    animation: scw-mt-row .4s var(--scw-mt-ease) both;
    animation-delay: calc(var(--d, 0) * 70ms + 120ms);
}

@keyframes scw-mt-row {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

.scw-mt__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--scw-mt-muted);
}
.scw-mt__row--ok   .scw-mt__dot { background: #35C77E; box-shadow: 0 0 0 3px rgba(53, 199, 126, .16); }
.scw-mt__row--warn .scw-mt__dot { background: #E0A030; box-shadow: 0 0 0 3px rgba(224, 160, 48, .16); }
.scw-mt__row--new  .scw-mt__dot { background: var(--scw-mt-accent); box-shadow: 0 0 0 3px rgba(255, 56, 116, .16); }

.scw-mt__row-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scw-mt__state {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--scw-mt-muted);
}
.scw-mt__row--ok   .scw-mt__state { color: #35C77E; }
.scw-mt__row--warn .scw-mt__state { color: #E0A030; }
.scw-mt__row--new  .scw-mt__state { color: var(--scw-mt-accent); }

.scw-mt__img { width: 100%; height: auto; display: block; border-radius: 10px; }

/* ── Phone outline ──────────────────────────────────────── */

.scw-mt__phone {
    width: min(210px, 70%);
    margin-inline: auto;
    aspect-ratio: 9 / 17;
    border-radius: 22px;
    padding: 16px 13px;
    background: linear-gradient(160deg, #22252b, #0d0e11);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.scw-mt__phone-bar {
    width: 34%;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.14);
}
.scw-mt__phone-row { display: flex; align-items: center; gap: 9px; }
.scw-mt__phone-row i {
    width: 30px;
    height: 22px;
    flex: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
}
.scw-mt__phone-row b { height: 7px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); }
.scw-mt__phone-cta {
    margin-top: auto;
    height: 26px;
    border-radius: 8px;
    background: var(--scw-mt-accent);
    opacity: .9;
}

/* ── Tabs down the side ─────────────────────────────────── */

@media (min-width: 980px) {
    .scw-mt--side .scw-mt__tabs {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .scw-mt--side .scw-mt__tab { max-width: none; }

    .scw-mt--side {
        display: grid;
        grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
        gap: clamp(26px, 3vw, 44px);
        align-items: start;
    }
    .scw-mt--side .scw-mt__tabs { margin-bottom: 0; }
}

@media (max-width: 620px) {
    .scw-mt__tab { padding: 13px 14px; }
    .scw-mt__ttl { font-size: 14.5px; }
    .scw-mt__row { font-size: 13px; padding: 10px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-mt__panel.is-in .scw-mt__text,
    .scw-mt__panel.is-in .scw-mt__vis,
    .scw-mt__row { animation: none; }
    .scw-mt__tab { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   CONTENT TABS
   Shares the Module Tabs look; only the panel contents differ.
────────────────────────────────────────────────────────── */

.scw-ct__inner { width: 100%; min-width: 0; }

/* A template brings its own layout, so the panel must not constrain it */
.scw-ct__panel { display: block; }

.scw-ct__none {
    margin: 0;
    padding: 22px;
    border-radius: 12px;
    border: 1px dashed var(--scw-mt-line, rgba(255,255,255,0.09));
    text-align: center;
    font-size: 14px;
    color: var(--scw-mt-muted, #99A1AE);
}

/* ── Posts ──────────────────────────────────────────────── */

.scw-ct__posts {
    --scw-ct-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--scw-ct-cols), minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

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

.scw-ct__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 12px;
    background: var(--scw-mt-card, #0E1017);
    box-shadow: inset 0 0 0 1px var(--scw-mt-line, rgba(255,255,255,0.09));
}
.scw-ct__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--scw-mt-ease, ease);
}
.scw-ct__post:hover .scw-ct__thumb img { transform: scale(1.04); }

.scw-ct__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.scw-ct__date {
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--scw-mt-muted, #99A1AE);
}

.scw-ct__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--scw-mt-text, #F4F6F8);
    text-wrap: pretty;
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-ct__post:hover .scw-ct__title { color: var(--scw-mt-accent, #FF3874); }

.scw-ct__excerpt {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--scw-mt-muted, #99A1AE);
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .scw-ct__post, .scw-ct__thumb img { transition: none; }
}


/* ──────────────────────────────────────────────────────────
   LOGO GRID
────────────────────────────────────────────────────────── */

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

    display: grid;
    grid-template-columns: repeat(var(--scw-lg-cols), minmax(0, 1fr));
    width: 100%;
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

.scw-lg__cell {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    padding: 22%;
    min-width: 0;
    text-decoration: none;
    background: transparent;
    transition:
        transform var(--scw-t-mid, .45s) var(--scw-lg-ease),
        background var(--scw-t-fast, .25s) ease,
        box-shadow var(--scw-t-mid, .45s) var(--scw-lg-ease);
}
.scw-lg__cell:focus-visible { outline: 2px solid var(--scw-lg-accent); outline-offset: -2px; z-index: 2; }

/* ── Grid style ─────────────────────────────────────────── */

/* Hairlines drawn with a shared inset shadow, so neighbouring cells never
   double up into a two-pixel line the way borders do. */
.scw-lg--ruled { gap: 0; }
.scw-lg--ruled .scw-lg__cell {
    box-shadow:
        inset -1px 0 0 var(--scw-lg-line),
        inset 0 -1px 0 var(--scw-lg-line);
}

.scw-lg--tiles { gap: var(--scw-lg-gap); }
.scw-lg--tiles .scw-lg__cell {
    border-radius: 12px;
    background: var(--scw-lg-card);
    box-shadow: inset 0 0 0 1px var(--scw-lg-line);
}

.scw-lg--bare { gap: var(--scw-lg-gap); }

/* ── The mark ───────────────────────────────────────────── */

.scw-lg__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: filter var(--scw-t-mid, .45s) ease,
                opacity var(--scw-t-mid, .45s) ease,
                transform var(--scw-t-mid, .45s) var(--scw-lg-ease);
}

/* Until the artwork exists, the name stands in — the wall stays whole */
.scw-lg__txt {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-align: center;
    color: var(--scw-lg-muted);
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-lg__cell:hover .scw-lg__txt { color: var(--scw-lg-text); }

/* ── At rest ────────────────────────────────────────────── */

.scw-lg--mono .scw-lg__img { filter: grayscale(1); opacity: .62; }
.scw-lg--mono .scw-lg__cell:hover .scw-lg__img { filter: none; opacity: 1; }

.scw-lg--dim .scw-lg__img { opacity: .55; }
.scw-lg--dim .scw-lg__cell:hover .scw-lg__img { opacity: 1; }

/* ── On hover ───────────────────────────────────────────── */

.scw-lg--fx-lift .scw-lg__cell:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--scw-lg-accent) 6%, transparent);
    box-shadow: inset 0 0 0 1px var(--scw-lg-accent);
    z-index: 1;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-lg--fx-lift .scw-lg__cell:hover { background: rgba(255, 255, 255, 0.04); }
}

.scw-lg--fx-fill .scw-lg__cell:hover {
    background: var(--scw-lg-accent);
    box-shadow: inset 0 0 0 1px var(--scw-lg-accent);
    z-index: 1;
}
/* On a solid accent the mark reads better knocked out than in its own colours */
.scw-lg--fx-fill .scw-lg__cell:hover .scw-lg__img { filter: brightness(0) invert(1); opacity: 1; }
.scw-lg--fx-fill .scw-lg__cell:hover .scw-lg__txt { color: #fff; }

.scw-lg--fx-zoom .scw-lg__cell:hover .scw-lg__img { transform: scale(1.09); }

/* ── Name on hover ──────────────────────────────────────── */

.scw-lg__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7%;
    text-align: center;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--scw-lg-muted);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity var(--scw-t-fast, .25s) ease,
                transform var(--scw-t-fast, .25s) var(--scw-lg-ease);
    pointer-events: none;
}
.scw-lg__cell:hover .scw-lg__name { opacity: 1; transform: none; }
.scw-lg--fx-fill .scw-lg__cell:hover .scw-lg__name { color: #fff; }

/* Nothing to hover on a touch screen, so the marks are shown as they are */
@media (hover: none) {
    .scw-lg--mono .scw-lg__img { filter: none; opacity: 1; }
    .scw-lg--dim  .scw-lg__img { opacity: 1; }
    .scw-lg__name { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .scw-lg__cell { padding: 18%; }
    .scw-lg__txt { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-lg__cell, .scw-lg__img, .scw-lg__name { transition: none; }
    .scw-lg--fx-lift .scw-lg__cell:hover { transform: none; }
    .scw-lg--fx-zoom .scw-lg__cell:hover .scw-lg__img { transform: none; }
}


/* ──────────────────────────────────────────────────────────
   PROCESS STEPS
────────────────────────────────────────────────────────── */

.scw-sp {
    --scw-sp-accent: var(--scw-accent, #FF3874);
    --scw-sp-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-sp-text:   var(--scw-text, #F4F6F8);
    --scw-sp-muted:  var(--scw-muted, #99A1AE);
    --scw-sp-card:   var(--scw-panel, #0E1017);
    --scw-sp-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));
    --scw-sp-cols:   5;
    --scw-sp-gap:    26px;
    --scw-sp-card-bg: transparent;
    --scw-sp-card-line: transparent;
    --scw-sp-body:   16px;
    --scw-sp-size:   42px;

    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

/* Themes routinely style list items — a card background, a border, padding, a
   marker. All of it lands on these steps and buries the layout, so the item is
   reset rather than fought property by property. */
.scw-sp__step {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    list-style: none;
}
.scw-sp__step::marker { content: none; }

/* Text colour is stated on the elements themselves, so a theme's own list or
   link colour cannot leak into it. */
.scw-sp__title { color: var(--scw-sp-text); }
.scw-sp__body  { color: var(--scw-sp-muted); }

/* ── Marker ─────────────────────────────────────────────── */

.scw-sp__marker {
    position: relative;
    z-index: 1;
    width: var(--scw-sp-size);
    height: var(--scw-sp-size);
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    /* Opaque, so the connecting line passes behind rather than through it */
    background: var(--scw-sp-card);
    color: var(--scw-sp-accent);
    box-shadow: inset 0 0 0 1px var(--scw-sp-accent);
}
.scw-sp__marker svg,
.scw-sp__marker i { width: 17px; height: 17px; font-size: 15px; }

.scw-sp--m-solid .scw-sp__marker {
    background: var(--scw-sp-accent);
    color: #fff;
    box-shadow: none;
}

.scw-sp--m-plain .scw-sp__marker {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 12px;
    letter-spacing: 0.14em;
    /* A gap either side, so the line still breaks cleanly around it */
    padding: 0 10px;
    margin-left: -10px;
}

.scw-sp--m-dot .scw-sp__marker {
    width: 11px;
    height: 11px;
    background: var(--scw-sp-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scw-sp-accent) 16%, transparent);
}
.scw-sp--m-dot .scw-sp__n { display: none; }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-sp--m-dot .scw-sp__marker { box-shadow: none; }
}

/* ── Text ───────────────────────────────────────────────── */

.scw-sp__title {
    margin: 0 0 7px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: var(--scw-sp-text);
    text-wrap: pretty;
}

.scw-sp__body {
    margin: 0;
    font-size: var(--scw-sp-body, 16px);
    line-height: 1.6;
    color: var(--scw-sp-muted);
    text-wrap: pretty;
}

/* ── Across ─────────────────────────────────────────────── */

.scw-sp--row,
.scw-sp--grid {
    display: grid;
    grid-template-columns: repeat(var(--scw-sp-cols), minmax(0, 1fr));
    gap: var(--scw-sp-gap);
}

.scw-sp--row .scw-sp__step,
.scw-sp--grid .scw-sp__step {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* The line runs from the middle of this marker to the middle of the next, so
   it stops at the last step rather than trailing off the end. */
.scw-sp--row.scw-sp--line .scw-sp__step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: calc(var(--scw-sp-size) / 2);
    left: calc(var(--scw-sp-size) / 2);
    width: calc(100% + var(--scw-sp-gap) - var(--scw-sp-size));
    margin-left: calc(var(--scw-sp-size) / 2);
    height: 1px;
    background: var(--scw-sp-line);
}
.scw-sp--row.scw-sp--m-dot.scw-sp--line .scw-sp__step:not(:last-child)::before { top: 5px; }
.scw-sp--row.scw-sp--m-plain.scw-sp--line .scw-sp__step:not(:last-child)::before { top: 9px; }

/* ── Down ───────────────────────────────────────────────── */

.scw-sp--stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--scw-sp-gap);
}

.scw-sp--stack .scw-sp__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.scw-sp--stack.scw-sp--line .scw-sp__step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(var(--scw-sp-size) / 2);
    top: var(--scw-sp-size);
    height: calc(100% + var(--scw-sp-gap) - var(--scw-sp-size));
    width: 1px;
    background: var(--scw-sp-line);
}
.scw-sp--stack.scw-sp--m-dot.scw-sp--line .scw-sp__step:not(:last-child)::before { left: 5px; top: 11px; }

/* ── Small screens ──────────────────────────────────────── */

/* Five steps across a phone leaves each about 60px wide, so the row becomes a
   stack — and the connector switches direction with it. */
@media (max-width: 700px) {
    .scw-sp--row {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .scw-sp--row .scw-sp__step {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }
    .scw-sp--row.scw-sp--line .scw-sp__step:not(:last-child)::before {
        top: var(--scw-sp-size);
        left: calc(var(--scw-sp-size) / 2);
        margin-left: 0;
        width: 1px;
        height: calc(100% + 22px - var(--scw-sp-size));
    }
    .scw-sp--row.scw-sp--m-dot.scw-sp--line .scw-sp__step:not(:last-child)::before { top: 11px; left: 5px; }
    .scw-sp--row.scw-sp--m-plain.scw-sp--line .scw-sp__step:not(:last-child)::before { display: none; }

    .scw-sp__title { font-size: 16.5px; }
    .scw-sp { --scw-sp-size: 36px; }
}


/* ── Steps on a light background ────────────────────────
   The defaults assume a dark page. On a white one the text
   would be white on white, so the scheme is switchable.
──────────────────────────────────────────────────────── */

.scw-sp--light {
    --scw-sp-line:  rgba(0, 0, 0, 0.12);
    --scw-sp-text:  #14161B;
    --scw-sp-muted: #5A6472;
    --scw-sp-card:  #FFFFFF;
}

/* ── Optional card around each step ─────────────────────── */

.scw-sp--carded .scw-sp__step {
    background: var(--scw-sp-card-bg);
    box-shadow: inset 0 0 0 1px var(--scw-sp-card-line);
    border-radius: 14px;
    padding: clamp(18px, 2vw, 24px);
}
.scw-sp--carded { --scw-sp-card-bg: var(--scw-sp-card); --scw-sp-card-line: var(--scw-sp-line); }

/* A card already separates the steps, so the connector would run underneath it */
.scw-sp--carded.scw-sp--line .scw-sp__step::before { display: none; }


/* ──────────────────────────────────────────────────────────
   OUR WORK SLIDER
   Sits on the Awards & Partners track; only the card differs.
────────────────────────────────────────────────────────── */

.scw-ows__item { text-decoration: none; }

.scw-ows .scw-cr__card { overflow: hidden; }

.scw-ows__shot {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--scw-cr-card, #0E1017);
}

/* Filled, not contained — these are photographs and screenshots, unlike the
   badges the track was first built for. */
.scw-ows__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .8s var(--scw-cr-ease, ease), filter .45s ease;
}
.scw-ows__item:hover .scw-ows__img { transform: scale(1.05); }

.scw-ows__empty {
    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: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--scw-cr-muted, #99A1AE);
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--scw-cr-accent) 12%, transparent), transparent 65%),
        var(--scw-cr-card, #0E1017);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-ows__empty { background: var(--scw-cr-card, #0E1017); }
}

/* A wash at the base, so the chip and the arrow stay legible over a photo */
.scw-ows .scw-cr__card::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
    opacity: 0;
    transition: opacity var(--scw-t-mid, .45s) ease;
    pointer-events: none;
}
.scw-ows__item:hover .scw-cr__card::before { opacity: 1; }

.scw-ows__go {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--scw-cr-accent, #FF3874);
    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(--scw-cr-ease, ease);
}
.scw-ows__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scw-ows__item:hover .scw-ows__go,
.scw-ows__item:focus-visible .scw-ows__go { opacity: 1; transform: none; }

/* No hover on a touch screen, so it is always shown there */
@media (hover: none) {
    .scw-ows__go { opacity: 1; transform: none; }
    .scw-ows .scw-cr__card::before { opacity: 1; }
}

.scw-ows__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.scw-ows__name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--scw-cr-text, #F4F6F8);
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-ows__item:hover .scw-ows__name { color: var(--scw-cr-accent, #FF3874); }

.scw-ows__line {
    font-size: 16px;
    line-height: 1.5;
    color: var(--scw-cr-muted, #99A1AE);
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .scw-ows__img, .scw-ows__go, .scw-ows .scw-cr__card::before { transition: none; }
    .scw-ows__item:hover .scw-ows__img { transform: none; }
}


/* ── Our Work Slider: live site capture ─────────────────── */

.scw-ows__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);
}
.scw-ows__dots { display: flex; gap: 5px; flex: none; }
.scw-ows__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.scw-ows__dots i:first-child { background: var(--scw-cr-accent, #FF3874); opacity: .8; }

.scw-ows__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(--scw-cr-muted, #99A1AE);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The screen sits below the title bar when there is one */
.scw-ows__shot--framed { inset: 30px 0 0 0; }

/* A full-page capture is taller than the card, so hover walks down it */
.scw-ows--pan .scw-ows__shot--framed .scw-ows__img,
.scw-ows--pan .scw-ows__shot .scw-ows__img {
    height: auto;
    min-height: 100%;
    object-position: top center;
    transition: object-position 3.5s linear, opacity .4s ease, transform .8s var(--scw-cr-ease, ease);
}
.scw-ows--pan .scw-ows__item:hover .scw-ows__img {
    object-position: bottom center;
    transform: none;
}

/* Held back until the real capture arrives, so a placeholder never shows */
.scw-ows__img.scw-ss__img--auto { opacity: 0; }
.scw-ows__img.scw-ss__img--auto.is-ready { opacity: 1; }

.scw-ows__wait {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--scw-mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--scw-cr-muted, #99A1AE);
    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(--scw-cr-card, #0E1017);
}





/* A frame fades in over its capture once it has genuinely loaded, so the
   swap is a settling rather than a flash of empty white. */
.scw-ls__frame {
    opacity: 0;
    transition: opacity .5s ease;
}
.scw-ls__frame.is-live { opacity: 1; }


/* Projects Grid: a wash behind the front text, so it reads over any photo */
.scw-pg__front::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    height: 55%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
    opacity: 0;
    pointer-events: none;
}
.scw-pg__front .scw-pg__front-content { position: relative; z-index: 2; }


/* The phone frame shows a desktop capture scaled to fit its width, anchored at
   the top. Filling the frame instead cropped hard into the middle of a wide
   page, which is why it read as a zoom rather than a screenshot. */
.scw-ls__img--p {
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: top center;
    align-self: stretch;
}
.scw-ls__pbody .scw-ls__shot {
    display: block;
    background: #0B0B0F;
}


/* A live frame inside the phone body renders at 390px, so what it shows is a
   genuine mobile layout rather than a scaled desktop one. It sits over the
   capture and only becomes visible once it has loaded. */
.scw-ls__pbody .scw-ls__frame {
    inset: 3px;
    border-radius: clamp(6px, 1.9cqw, 17px);
    overflow: hidden;
    z-index: 2;
}
.scw-ls__pbody .scw-ls__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* ──────────────────────────────────────────────────────────
   INDUSTRY GRID
   A long list of sectors, each an icon and a linked label.
────────────────────────────────────────────────────────── */

.scw-ig {
    --scw-ig-accent: var(--scw-accent, #FF3874);
    --scw-ig-text:   var(--scw-text, #F4F6F8);
    --scw-ig-hover:  var(--scw-ig-accent);
    --scw-ig-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-ig-ease:   var(--scw-ease, cubic-bezier(.22,.61,.36,1));
    --scw-ig-cols:   5;
    --scw-ig-gap-x:  28px;
    --scw-ig-gap-y:  26px;
    --scw-ig-icon:   30px;

    display: grid;
    grid-template-columns: repeat(var(--scw-ig-cols), minmax(0, 1fr));
    gap: var(--scw-ig-gap-y) var(--scw-ig-gap-x);
    width: 100%;
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

.scw-ig__item {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 16px);
    min-width: 0;
    padding-bottom: calc(var(--scw-ig-gap-y) / 2);
    text-decoration: none;
    color: var(--scw-ig-text);
}
.scw-ig__item:focus-visible { outline: 2px solid var(--scw-ig-accent); outline-offset: 4px; border-radius: 6px; }

/* A hairline under every cell reads as one rule across the row, and needs no
   knowledge of where the row actually breaks — which changes with the column
   count at every breakpoint. */
.scw-ig--ruled .scw-ig__item { border-bottom: 1px solid var(--scw-ig-line); }

.scw-ig__icon {
    flex: none;
    width: var(--scw-ig-icon);
    height: var(--scw-ig-icon);
    display: grid;
    place-items: center;
    color: var(--scw-ig-accent);
    transition: transform var(--scw-t-mid, .45s) var(--scw-ig-ease);
}
.scw-ig__icon svg {
    width: 100%;
    height: 100%;
    /* These are outline marks, so the fill has to be cleared or a solid icon
       set arrives as a filled block. */
    fill: currentColor;
}
.scw-ig__icon i { font-size: calc(var(--scw-ig-icon) * 0.8); line-height: 1; }

.scw-ig__item:hover .scw-ig__icon { transform: translateY(-2px) scale(1.06); }

.scw-ig__label {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.008em;
    color: inherit;
    text-wrap: pretty;
    transition: color var(--scw-t-fast, .25s) ease;
}
.scw-ig__item:hover .scw-ig__label { color: var(--scw-ig-hover); }

@media (max-width: 600px) {
    .scw-ig { --scw-ig-icon: 26px; }
    .scw-ig__label { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .scw-ig__icon, .scw-ig__label { transition: none; }
    .scw-ig__item:hover .scw-ig__icon { transform: none; }
}


/* ── Live Sites: plain card ─────────────────────────────
   One capture with a title bar. No device geometry to hold
   in proportion, and nothing framed live.
──────────────────────────────────────────────────────── */

.scw-ls__stage--card {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 14px;
    background: var(--scw-ls-card, #0E1017);
    box-shadow:
        0 0 0 1px var(--scw-ls-line, rgba(255,255,255,0.09)),
        0 16px 38px rgba(0, 0, 0, 0.42);
    transition: box-shadow var(--scw-t-mid, .45s) var(--scw-ls-ease, ease);
}
.scw-ls__card:hover .scw-ls__stage--card {
    box-shadow:
        0 0 0 1px var(--scw-ls-accent, #FF3874),
        0 22px 48px rgba(0, 0, 0, 0.55);
}

.scw-ls__cbar {
    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);
}
.scw-ls__cdots { display: flex; gap: 5px; flex: none; }
.scw-ls__cdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.scw-ls__cdots i:first-child { background: var(--scw-ls-accent, #FF3874); opacity: .85; }

.scw-ls__curl {
    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(--scw-ls-muted, #99A1AE);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scw-ls__cscreen {
    position: absolute;
    inset: 30px 0 0 0;
    overflow: hidden;
    background: var(--scw-ls-card, #0E1017);
    display: grid;
    place-items: center;
}

/* A full-page capture is taller than the card, so hover walks down it */
.scw-ls__cimg {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: object-position 3.5s linear;
}
.scw-ls__card:hover .scw-ls__cimg { object-position: bottom center; }

@media (prefers-reduced-motion: reduce) {
    .scw-ls__cimg, .scw-ls__stage--card { transition: none; }
    .scw-ls__card:hover .scw-ls__cimg { object-position: top center; }
}


/* Bento: a contained render needs its panel to be the frame, not the image.
   Without a definite box the image sets the height and the letterboxing
   lands outside the panel instead of inside it. */
.scw-bento__media { display: grid; place-items: center; }
.scw-bento__zoom  { position: absolute; inset: 0; }
.scw-bento__img[style*="contain"],
.scw-bento[style*="contain"] .scw-bento__img { object-position: center; }


/* ── Bento: panel follows the media ─────────────────────
   The media stops being absolutely positioned, so it sets
   the panel's height rather than being fitted into one.
   No crop and no dead space — which is what a render with
   its own margins usually needs.
──────────────────────────────────────────────────────── */

.scw-bento--hug .scw-bento__media {
    min-height: 0;
    height: auto;
}
.scw-bento--hug .scw-bento__zoom { position: static; }

.scw-bento--hug .scw-bento__img,
.scw-bento--hug .scw-bento__video {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* The video sits over its own poster, so it still needs taking out of flow —
   the poster is what gives the panel its height. */
.scw-bento--hug .scw-bento__video {
    position: absolute;
    inset: 0;
    height: 100%;
}
.scw-bento--hug .scw-bento__media { position: relative; }


/* A media panel given a shape holds it: the media fits the panel rather than
   the panel growing to the media, which is what made a single tall render
   dwarf the rest of the grid. */
.scw-bento__media { overflow: hidden; }
.scw-bento--hug .scw-bento__media[style*="aspect-ratio"] { height: auto; }
.scw-bento--hug .scw-bento__media[style*="aspect-ratio"] .scw-bento__img,
.scw-bento--hug .scw-bento__media[style*="aspect-ratio"] .scw-bento__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ── Bento: uniform arrangement ─────────────────────────
   Every card the same footprint, and every media panel the
   same box. Cards spanning different sizes is what makes
   one render read as oversized beside the rest.
──────────────────────────────────────────────────────── */

.scw-bento--uniform {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: stretch;
}

/* The per-card spans are ignored here — that is the point of the mode. */
.scw-bento--uniform .scw-bento__card {
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex;
    flex-direction: column;
}

.scw-bento--uniform .scw-bento__media {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
}

/* Text takes whatever is left, so cards end level however long the copy is. */
.scw-bento--uniform .scw-bento__body { flex: 1 1 auto; }

@media (max-width: 700px) {
    .scw-bento--uniform { grid-template-columns: 1fr; }
}


/* ──────────────────────────────────────────────────────────
   PRICE CARDS
────────────────────────────────────────────────────────── */

.scw-pc {
    --scw-pc-accent: var(--scw-accent, #FF3874);
    --scw-pc-card:   var(--scw-panel, #14161B);
    --scw-pc-line:   var(--scw-line, rgba(255,255,255,0.09));
    --scw-pc-text:   var(--scw-text, #F4F6F8);
    --scw-pc-muted:  var(--scw-muted, #99A1AE);
    --scw-pc-cols:   2;
    --scw-pc-gap:    22px;

    display: grid;
    grid-template-columns: repeat(var(--scw-pc-cols), minmax(0, 1fr));
    gap: var(--scw-pc-gap);
    align-items: stretch;
    width: 100%;
    font-family: var(--scw-display, 'Bai Jamjuree', system-ui, sans-serif);
}

/* A column, so a short card fills the height of the tallest in its row
   rather than stopping where its content happens to end. */
.scw-pc__card {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 32px);
    border-radius: 16px;
    background: var(--scw-pc-fill, var(--scw-pc-card));
    box-shadow: inset 0 0 0 1px var(--scw-pc-line);
}
.scw-pc__card--wide { grid-column: 1 / -1; }

.scw-pc__title {
    margin: 0 0 clamp(16px, 2vw, 26px);
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--scw-pc-text);
}

.scw-pc__body {
    margin: 0 0 18px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--scw-pc-text);
    opacity: .92;
    text-wrap: pretty;
}

/* ── Rates ──────────────────────────────────────────────── */

.scw-pc__rows { margin: 0; }

/* A hairline under each row rather than between them, so the last row is
   closed off too and the card does not end on a loose line. */
.scw-pc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--scw-pc-line);
}
.scw-pc__row:last-child { border-bottom: 0; }

.scw-pc__label {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--scw-pc-text);
    opacity: .9;
}

.scw-pc__price {
    margin: 0;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--scw-pc-accent);
    text-align: right;
    white-space: nowrap;
}

.scw-pc__note {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--scw-pc-muted);
    text-wrap: pretty;
}

/* ── Highlight panel ────────────────────────────────────── */

.scw-pc__card--hi[style*="--scw-pc-fill"] { background: var(--scw-pc-fill); }

.scw-pc__card--hi {
    background:
        linear-gradient(135deg,
            var(--scw-pc-accent),
            color-mix(in srgb, var(--scw-pc-accent) 62%, #000) 100%);
    box-shadow: none;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .scw-pc__card--hi { background: var(--scw-pc-accent); }
}

.scw-pc__card--hi .scw-pc__title,
.scw-pc__card--hi .scw-pc__body { color: #fff; }
.scw-pc__card--hi .scw-pc__note { color: rgba(255, 255, 255, 0.78); }

.scw-pc__chips {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.scw-pc__chips li {
    border-radius: 100px;
    padding: 7px 15px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}

@media (max-width: 700px) {
    .scw-pc { grid-template-columns: 1fr; }
    .scw-pc__row { gap: 12px; }
    .scw-pc__label, .scw-pc__price { font-size: 15px; }
}


/* Price Cards: cards rise in one after another. The delay comes from the
   card's own index, so it stays correct however many there are.

   The cards are visible by default and only start hidden once the reveal
   script has added `.ow--armed` to this root — so a script that is blocked,
   deferred by an optimiser, served stale from a cache or never enqueued at
   all costs the animation and leaves the pricing on the page. */
.scw-pc.ow--armed .scw-r--up {
    opacity: 0;
    transform: translateY(16px);
    transition: none;
}
.scw-pc.ow--armed .scw-r--up.is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--scw-pc-speed, .4s) var(--scw-ease, ease),
        transform var(--scw-pc-speed, .4s) var(--scw-ease, ease);
    transition-delay: calc(var(--d, 0) * var(--scw-pc-step, 60ms));
}

.scw-pc.is-revealed .scw-r--up,
.scw-pc.ow--noanim .scw-r--up { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .scw-pc .scw-r--up,
    .scw-pc.ow--armed .scw-r--up { opacity: 1; transform: none; transition: none; }
}


/* The rates take the spare height, so a footnote sits at the foot of the card
   instead of floating directly under a single row. */
.scw-pc__rows { flex: 1 1 auto; }
.scw-pc__card--hi .scw-pc__body { flex: 1 1 auto; }
.scw-pc__note { margin-top: auto; padding-top: 18px; }

/* One row of rates in a tall card would otherwise stretch to fill it. */
.scw-pc__row { flex: 0 0 auto; }

.scw-pc--ragged { align-items: start; }
.scw-pc--ragged .scw-pc__rows,
.scw-pc--ragged .scw-pc__card--hi .scw-pc__body { flex: 0 0 auto; }
.scw-pc--ragged .scw-pc__note { margin-top: 18px; padding-top: 0; }