/* =========================================================
   SuperPixel theme — main stylesheet
   Figma node 22:830, canvas 1280 × ~4687.
   Every section's pixel values are matched 1:1 to Figma.
   ========================================================= */

:root {
    --color-primary: #eb4700;
    --color-accent: #1566e0;
    --color-text: #000000;
    --color-muted: #535353;
    --color-muted-2: #969696;
    --color-border: #1e1e1e;
    --color-bg: #ffffff;
    --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Canvas (v2.4.25) — caps at 1280 design width and lets content
       fill the full viewport width on narrower screens (no symmetric
       gutter reservation). FREE QUOTE floating button is fixed at
       right:0 and is allowed to overlap the rightmost edge by design. */
    --canvas-width: min(1280px, 100%);
    --content-pad: max(40px, calc((100vw - 1280px) / 2));
}

/* * { box-sizing: border-box; } */ /* disabled v2.4.21 per user request */
/* v2.6.96 — disabled native smooth-scroll; Lenis handles it now and
   the two together cause stuttering. */
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
html, body { margin: 0; padding: 0; }

/* v2.6.52 — overflow-x: clip on html only (no body override) so wide
   elements get clipped without creating a second scrollbar context. */
html { overflow-x: clip; }
body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: #ffffff;
    line-height: 1.5;
    font-size: 14px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Force Figtree everywhere — UA stylesheets default form controls and
   headings to system fonts, which would break the Figma typography. */
h1, h2, h3, h4, h5, h6,
button, input, select, textarea, optgroup {
    font-family: var(--font-sans);
}

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; left: -9999px; top: 10px; background:#000; color:#fff; padding: 8px 12px; }
.skip-link:focus { left: 10px; z-index: 1000; }

/* Pin the design to the 1280 canvas and centre on larger viewports.
   v2.6.105 — footer opted OUT of the 1280 cap so it spans the full
   viewport width on wide / zoomed-out monitors with no right-side
   gutter. Footer children below are re-anchored accordingly. */
.site-main, .site-footer { max-width: var(--canvas-width); margin-left: auto; margin-right: auto; width: 100%; }
.site-footer { max-width: none; }

/* Body offsets the fixed header so the hero starts below the navbar. */
body { padding-top: 76px; }

/* =======================================================
   GLOBAL TRANSITIONS
   ======================================================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"].is-visible { transition-delay: .08s; }
[data-reveal-delay="2"].is-visible { transition-delay: .16s; }
[data-reveal-delay="3"].is-visible { transition-delay: .24s; }
[data-reveal-delay="4"].is-visible { transition-delay: .32s; }
[data-reveal-delay="5"].is-visible { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .testimonials__track { animation: none !important; }
    * { transition-duration: 0s !important; animation-duration: 0s !important; }
}

a, button, .testimonial, .portfolio__card, .cta__portrait, .site-footer__social-icon {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease, color .25s ease, background .25s ease, filter .35s ease;
}

/* =======================================================
   BUTTONS
   ======================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    border: 0;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    /* v2.7.0 — explicit so <button class="btn"> matches <a class="btn">. */
    font-family: inherit;
    background: transparent;
}
.btn--primary {
    background: var(--color-primary);
    color: #fff;
    width: 148px;
    height: 36px;
    font-size: 12px;
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* Figma 62:1153 / 62:1139 — orange button lifts up + soft orange glow on hover. */
.btn--primary:hover {
    background: #c83b00;
    box-shadow: 0 12px 24px rgba(235, 71, 0, 0.45);
    transform: translateY(-4px);
}

.btn--lg { width: 153.333px; height: 41.333px; font-size: 13.78px; }

.btn--quote {
    background: transparent;
    /* v2.7.0 — pill bumped so the GET A QUOTE label sits on par with the
       16px nav links next to it. Previous 8.99px / 100x30.667 read tiny. */
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0 22px;
    height: 38px;
    font-size: 14px;
    letter-spacing: 0.04em;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* Figma 62:1146 — outline → filled orange + lift + glow on hover. */
.btn--quote:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 20px rgba(235, 71, 0, 0.35);
    transform: translateY(-4px);
}

/* Navbar CTA cluster — Get a Quote + tagline */
.navbar__cta {
    display: inline-flex;
    align-items: center;
    gap: 35px;
}
.navbar__cta-tag {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-muted);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.btn--outline-dark {
    background: transparent;
    border: 1.6px solid var(--color-border);
    color: var(--color-border);
    height: 36px;
    padding: 0 24px;
    font-size: 12.8px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Figma 62:1169 VIEW ALL WORK — fills with black on hover. */
.btn--outline-dark:hover {
    background: var(--color-border);
    border-color: var(--color-border);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.btn--start {
    width: 173.898px;
    height: 37.492px;
    border-width: 1.595px;
    font-size: 12.76px;
    color: #000;
    border-color: #000;
}
/* v2.7.76 — About section CTA row: START A PROJECT + LEARN MORE link
   side by side. Mirrors hero__actions layout. */
.about__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
/* Figma 62:1238 START A PROJECT — outline becomes orange filled + glow on hover. */
.btn--start:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 8px 24px rgba(235, 71, 0, 0.40);
}

/* =======================================================
   HEADER — sticky/frozen, Figma node 22:1133
   76px tall, white-translucent w/ blur, full-width
   ======================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 76px;
    background: rgba(255, 255, 255, 0.37);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color .35s ease, backdrop-filter .35s ease;
}
/* v2.6.89 — while the hero carousel is in full-bleed showreel mode,
   the nav becomes a darker glassmorph bar with WHITE text/icons so
   it reads cleanly against the video underneath. */
.site-header.is-over-showreel {
    /* v2.6.95 — dropped backdrop-filter: blur over the playing video.
       Re-rasterising the blur every frame of video playback caused
       severe scroll jank. Solid translucent gradient reads similarly
       and costs almost nothing on the compositor. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* v2.6.89 — make every label inside the nav read white over the video. */
.site-header.is-over-showreel .navbar__links a,
.site-header.is-over-showreel .navbar__links a:hover,
.site-header.is-over-showreel .navbar__link,
.site-header.is-over-showreel .navbar__link-label,
.site-header.is-over-showreel .navbar__caret {
    color: #fff;
}
/* Outlined "Get a Quote" pill keeps a thin white outline + white text. */
.site-header.is-over-showreel .btn--quote {
    color: #fff;
    border-color: #fff;
}
.site-header.is-over-showreel .btn--quote:hover {
    color: var(--color-primary);
    background: #fff;
    border-color: #fff;
}
/* Logo PNG is colored; invert to a pure white silhouette over the video. */
.site-header.is-over-showreel .navbar__logo img {
    filter: brightness(0) invert(1);
}
/* v2.6.89 — floating FREE QUOTE button hides during full-page showreel
   so it doesn't compete with the cinematic reel. Re-enters as the user
   scrolls past the hero runway. */
body.is-showreel .floating-quote {
    opacity: 0 !important;
    transform: translateX(20px) !important;
    pointer-events: none;
}
.navbar {
    position: relative;
    /* v2.5.7 — navbar spans the full viewport so the logo/CTA cluster sit
       at the actual edges; with the 1280 cap the bar looked squished
       against the full-bleed hero video below it. */
    max-width: none;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 3.3vw, 63px);
}
.navbar__logo img { height: 19px; width: auto; }
.navbar__menu { display: flex; align-items: center; gap: 34.413px; }
.navbar__links { list-style: none; display: flex; gap: 34.413px; margin: 0; padding: 0; }
.navbar__links a {
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1;
    transition: color .2s ease;
}
.navbar__links a:hover { color: var(--color-text); }

/* =======================================================
   HERO — Figma node 22:1124
   ======================================================= */
/* v2.6.98 — runway lengthened to 250vh.
   v2.6.101 — break the wrap out of .site-main's 1280px cap so the
   hero/carousel are full viewport width on wide / zoomed-out monitors.
   Without this, .hero's overflow:hidden was clipping the carousel's
   own 100vw trick at the 1280 boundary, leaving white gutters. */
.hero-wrap {
    position: relative;
    height: 250vh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.hero {
    position: sticky;
    top: 76px;
    /* v2.6.67 — Atlure-style fit-to-viewport. Hero fills viewport
       below the 76px nav; carousel uses flex:1 to take the remaining
       space after the copy block. */
    height: calc(100vh - 76px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* v2.6.97 — REMOVED .is-showreel-full position:fixed. JS now drives
   the hero's `top` and `height` directly as inline styles, lerped to
   the scroll position so the expand from (top:76, height:100vh-76)
   to (top:0, height:100vh) plays back smoothly across the runway.
   Past the runway the sticky element unsticks naturally and portfolio
   reveals from below — no snap, no fixed jump. */
.hero { will-change: top, height; }
.hero__copy {
    /* v2.5.7 — Figma 166:2067: 820px wide block, centered, text-center.
       v2.6.64 — gap retuned 30px → 24px to match updated Figma spec. */
    width: 820px;
    max-width: calc(100% - 80px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    flex-shrink: 0;
}
.hero__eyebrow {
    font-size: 13.333px;
    font-weight: 500;
    text-transform: capitalize;
    color: #000;
    margin: 0;
    line-height: 1;
}
.hero__country {
    color: inherit;
    text-transform: uppercase;
    display: inline-block;
}

.hero__title {
    font-size: 52px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
    width: 100%;
    max-width: 100%;
    text-align: center;
}
.hero__title-light { font-weight: 500; }
.hero__title-italic { display: block; font-style: italic; font-weight: 600; }

.hero__actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 41.333px;
}
.hero__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
    height: 28px;
    padding: 0 14px;
    position: relative;
}
/* Figma 62:1245 OUR WORKS — bottom underline reveals on hover. */
.hero__link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.hero__link:hover::after { transform: scaleX(1); }
/* Use a Unicode "→" instead of the buggy Figma SVG so the chevron
   always renders cleanly across browsers. Slides right on hover with
   an elastic ease for a tactile "go forward" feel. */
.hero__link-arrow {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 17px;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.hero__link:hover .hero__link-arrow { transform: translateX(4px); }

.hero__banner {
    /* Full-bleed: span the full viewport width on wide PC monitors so the
       hero video isn't cropped at the 1280px canvas edge. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 30px;
    aspect-ratio: 1920 / 1080;
    overflow: hidden;
}
.hero__banner img,
.hero__banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Free Quote tab — fixed to viewport right (Figma 218:1361).
   v2.6.68 — clean orange rectangle: no border, no dark drop-shadow.
   Live effect at top-left corner: a white dot wrapped in a pulsing
   blurry orange glow (Figma Ellipse 19/20). */
.floating-quote {
    position: fixed;
    bottom: clamp(72px, 11vh, 180px);
    /* v2.9.38 — small gap so the button floats BESIDE the scrollbar and is never
       clipped at the right edge (was right:0 = flush → cropped by the scrollbar /
       overflow-x:clip). */
    right: clamp(12px, 1.2vw, 24px);
    /* v2.6.101 — clamp max bumped from 96/72 → 140/115 so the button
       stays substantial on zoomed-out / ultra-wide monitors. Previously
       it pegged at 96×72 CSS px and read as a tiny rectangle next to
       the full-vw video. Figma 218:1361 baseline still 73×60. */
    /* v2.7.0 — shrunk ~15% per user request. */
    width: clamp(62px, 6vw, 119px);
    height: clamp(51px, 4.9vw, 98px);
    background: var(--color-primary);
    color: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    /* Hidden at top-of-page; JS toggles .is-visible after scroll. */
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity .4s ease,
                transform .4s cubic-bezier(.2, .7, .2, 1),
                background-color .25s ease;
}
.floating-quote.is-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.floating-quote:hover {
    background: #d63f00;
}
/* Live effect — white dot at the top-left corner with an expanding
   orange "signal" ring that loops with a pause between pings.
   v2.6.72 — replaced blurry box-shadow with a real DOM circle. The
   ring is a regular element (no blur), low alpha, expanding via scale.
   Animation timeline: 0-50% expand + fade, 50-100% held invisible
   (the "jeda" / pause). White dot stays static; only the ring animates. */
.floating-quote::before {
    /* Static white dot — centered on the corner point. */
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}
.floating-quote.is-visible::before { opacity: 1; }

.floating-quote::after {
    /* Expanding orange signal ring — sits behind the dot, centered on
       the same corner point. Base 16×16 → scales up to ~3.5x. */
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}
.floating-quote.is-visible::after {
    animation: floating-quote-signal 2.6s ease-out infinite;
}
@keyframes floating-quote-signal {
    /* Active: 0 → 50% = expand + fade. Pause: 50 → 100% held off. */
    0%   { transform: scale(0.4); opacity: 0.5; }
    50%  { transform: scale(3.5); opacity: 0;   }
    100% { transform: scale(3.5); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
    .floating-quote.is-visible::after { animation: none; }
}
.floating-quote__text {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(13px, 1vw, 19px);
    letter-spacing: 0;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}

/* =======================================================
   PORTFOLIO — Figma node 22:1004
   ======================================================= */
.portfolio {
    width: 1200px;
    max-width: 100%;
    margin: 80px auto 0;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 38px;
}
.portfolio__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    min-height: 20.8px;
    position: relative;
    /* Lift the entire filter row above the portfolio grid below it so the
       Others dropdown panel (a descendant) paints on top of the cards
       — without this the grid (later in DOM) wins the paint order. */
    z-index: 10;
}
.portfolio__filter,
.portfolio__filter-other {
    background: none;
    border: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-border);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: color .2s ease;
}
.portfolio__filter:hover,
.portfolio__filter-other:hover { color: var(--color-accent); }
.portfolio__filter.is-active { color: var(--color-accent); font-weight: 600; }

/* "Others" filter — plain text + small caret (matches Figma).
   Caret is CSS-drawn (right + bottom border square rotated 45°) so it
   inherits the current text colour and never hits the SVG aspect-ratio
   stretching bug. */
.portfolio__filter-others-wrap {
    position: relative;
    display: inline-block;
}
.portfolio__filter-other {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.portfolio__filter-caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.portfolio__filter-other:hover .portfolio__filter-caret {
    transform: rotate(45deg) translateY(1px);
}
/* Active state (panel open): flip caret to point up + tint blue. */
.portfolio__filter-other.is-active { color: var(--color-accent); font-weight: 600; }
.portfolio__filter-other.is-active .portfolio__filter-caret,
.portfolio__filter-other.is-active:hover .portfolio__filter-caret {
    transform: rotate(-135deg) translateY(-1px);
}

/* Others dropdown panel (Figma node 62:1270). Sits below the trigger.
   The parent .portfolio__filters carries z-index:10 so this whole
   subtree paints above the grid; nothing extra is needed here. */
.portfolio__filter-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    min-width: 280px;
    background: #f3f3f3;
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.22),
                0 6px 14px -4px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}
.portfolio__filter-panel[hidden] { display: none; }
.portfolio__filter-panel-item {
    background: none;
    border: 0;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-border);
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.portfolio__filter-panel-item:hover {
    background-color: rgba(21, 102, 224, 0.06);
    color: var(--color-accent);
}
.portfolio__filter-panel-item.is-active {
    color: var(--color-accent);
    font-weight: 600;
}

.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(3, 376.667px);
    column-gap: 35px;
    row-gap: 60px;
    justify-content: space-between;
    align-items: start;
}

.portfolio__card { display: flex; flex-direction: column; transition: opacity .35s ease, transform .35s ease; }
/* Filter: drop the card from the grid entirely so visible cards reflow
   into the staggered position-based heights below. */
.portfolio__card.is-hidden { display: none; }

.portfolio__thumb {
    display: block;
    overflow: hidden;
    width: 376.667px;
    background: #eee;
    position: relative;
}

/* Staggered Figma heights bound to GRID POSITION (not to a specific item),
   counting only visible cards. Result: whatever the filter shows, col 1
   is medium, col 2 is tall, col 3 is short — same rhythm every time. */
.portfolio__card:nth-child(3n+1 of .portfolio__card:not(.is-hidden)) .portfolio__thumb { height: 340px; }
.portfolio__card:nth-child(3n+2 of .portfolio__card:not(.is-hidden)) .portfolio__thumb { height: 396.667px; }
.portfolio__card:nth-child(3n+3 of .portfolio__card:not(.is-hidden)) .portfolio__thumb { height: 280px; }
.portfolio__thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity .35s ease, transform .5s ease;
}
.portfolio__thumb-img--rest  { opacity: 1; }
.portfolio__thumb-img--hover { opacity: 0; }
.portfolio__thumb:hover .portfolio__thumb-img--hover { opacity: 1; }
.portfolio__thumb:hover .portfolio__thumb-img--rest  { opacity: 0; }
.portfolio__thumb:hover .portfolio__thumb-img        { transform: scale(1.04); }

.portfolio__info { padding-top: 18px; }
.portfolio__title {
    font-weight: 500;
    font-size: 18.667px;
    color: #000;
    display: block;
    margin-bottom: 8px;
    line-height: 1.3;
}
.portfolio__title:hover { color: var(--color-accent); }

.portfolio__sub {
    font-size: 12px;
    color: rgba(35, 31, 32, 0.65);
    margin: 0 0 16px;
    font-weight: 500;
    line-height: 1.4;
}

.portfolio__tags {
    list-style: none;
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 500;
    flex-wrap: wrap;
}
.portfolio__tag-sep {
    width: 2.63px;
    height: 2.63px;
    background: var(--color-accent);
    border-radius: 50%;
    display: inline-block;
}

.portfolio__view-all {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* =======================================================
   ABOUT — Figma node 22:982
   ======================================================= */
.about {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    /* No overflow:hidden — ::before extends past .site-main's 1280px to reach
       viewport edges, and overflow:hidden would clip it back inside. */
}
/* Pastel multi-blob wash — Figma node 39:270. Extends past the 1280px
   .site-main container via negative left/right (50% - 50vw) so the
   gradient reaches the viewport edges on wide PC monitors instead of
   getting clipped at the canvas boundary. Inside the .about section
   itself the radials still use `closest-side` sizing so blobs never
   touch the section's top/bottom edges. */
.about::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background:
        radial-gradient(circle closest-side at 80% 32%, rgba(74, 222, 128, 0.55), transparent 100%),
        radial-gradient(circle closest-side at 82% 70%, rgba(96, 165, 250, 0.60), transparent 100%),
        radial-gradient(circle closest-side at 55% 50%, rgba(167, 139, 250, 0.28), transparent 100%),
        radial-gradient(circle closest-side at 18% 75%, rgba(236, 72, 153, 0.30), transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.about > * { position: relative; z-index: 1; }
.about__inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* Text column flexes to fill remaining space so the gallery hugs the
       right edge — was `546.423px 545.625px` which left ~86px of dead
       space inside the content area to the right of the gallery. */
    grid-template-columns: 1fr 545.625px;
    gap: 50px;
    /* Match canvas-width of sections above/below (portfolio is full 1280)
       so .about doesn't read as a narrower island. box-sizing:border-box
       so padding is INCLUDED in width — without it, 1228 + 80 padding =
       1308 outer, which overflowed the 1280 viewport. */
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    align-items: start;
}
.about__title {
    font-size: 52px;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 30px;
    letter-spacing: -0.01em;
    width: 546.423px;
    max-width: 100%;
}
.about__title em {
    color: var(--color-accent);
    font-weight: 600;
    font-style: italic;
}

/* Headline reveal — three phrases stagger up word-block by word-block,
   matching the testimonials / FAQ reveal language. */
.about__title-line {
    display: inline-block;
    line-height: inherit;
}
.about__title-line + .about__title-line { margin-left: 0.28em; }
.about__body {
    width: 474.667px;
    max-width: 100%;
    margin-bottom: 24px;
}
.about__body p {
    font-size: 14.667px;
    line-height: 1.5;
    margin: 0 0 14px;
}
.about__body strong { font-weight: 600; }

/* Photo grid — 2x2 of 262x262 squares; images cover (matches Figma masks) */
.about__gallery {
    position: relative;
    display: grid;
    grid-template-columns: 262px 262px;
    grid-template-rows: 262px 262px;
    column-gap: 20.13px;
    row-gap: 20px;
    width: 545.625px;
    max-width: 100%;
}
.about__photo {
    position: relative;
    width: 262px;
    height: 262px;
    overflow: hidden;
    background: #eee;
}
.about__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.about__slider {
    grid-column: 2;
    margin-top: 12px;
    width: 64.579px;
    height: 4.225px;
    justify-self: end;
}
.about__slider img { width: 100%; height: 100%; }

/* =======================================================
   CLIENTS LOGO MARQUEE — Figma node 74:216
   Seamless infinite scroll: track holds 2× logos,
   translates by -50% over one cycle.
   ======================================================= */
.clients {
    position: relative;
    z-index: 2;
    padding: 48px 0;
    background: transparent;
    overflow: hidden;
    /* Break out of .site-main's 1280px max-width so the marquee spans
       the full viewport on wide PC monitors. Inner track auto-flows. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.clients__marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.clients__track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: clients-scroll 60s linear infinite;
    will-change: transform;
}
.clients__track:hover { animation-play-state: paused; }
.clients__logo {
    height: 40px;
    width: auto;
    flex: 0 0 auto;
    filter: brightness(0);
    opacity: 0.55;
    transition: opacity .3s ease;
}
.clients__logo:hover { opacity: 1; }
@keyframes clients-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .clients__track { animation: none; }
}

/* =======================================================
   FAQ — Figma node 22:930
   ======================================================= */
.faq {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 30px 58.67px;
    background: #ffffff;
}
.faq__eyebrow {
    font-size: 14.659px;
    font-weight: 500;
    margin: 0;
    line-height: 1;
}
.faq__title {
    font-size: 44px;
    font-weight: 500;
    margin: 5.32px 0 76px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.faq__grid {
    display: grid;
    grid-template-columns: 508px 508px;
    column-gap: 66.66px;
}
.faq__col {
    display: flex;
    flex-direction: column;
    gap: 13.942px;
    align-items: start;
}
.faq__item { width: 508px; max-width: 100%; }
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    color: #000;
    font-family: inherit;
    line-height: 1;
    min-height: 16.377px;
    transition: color .25s ease;
}
.faq__item:hover .faq__q,
.faq__item.is-open .faq__q { color: #1566e0; }
.faq__q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.faq__q-text { flex: 1; }

.faq__icon {
    position: relative;
    width: 12.57px;
    height: 12.57px;
    flex-shrink: 0;
    display: inline-block;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.faq__icon::before, .faq__icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 1px;
}
.faq__icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq__item:hover .faq__icon,
.faq__item.is-open .faq__icon { transform: rotate(45deg); }

.faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
}
.faq__panel > .faq__a {
    min-height: 0;
    margin: 0;
    padding-top: 0;
    opacity: 0;
    transition: opacity .25s ease, padding-top .4s cubic-bezier(.2,.7,.2,1);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.72);
    width: 460px;
    max-width: 100%;
}
.faq__a p { margin: 0 0 0.8em; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ol { margin: 0.4em 0 0.8em; padding-left: 20px; }
.faq__a ol li { margin-bottom: 0.35em; }
.faq__item:hover .faq__panel,
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__item:hover .faq__panel > .faq__a,
.faq__item.is-open .faq__panel > .faq__a {
    opacity: 1;
    padding-top: 14px;
    transition-delay: .1s;
}
.faq__divider {
    display: block;
    width: 100%;
    height: 1px;
    margin: 13.4px 0 0;
    border: 0;
    background: #d9d9d9;
    pointer-events: none;
}

/* =======================================================
   TESTIMONIALS — Figma node 22:834
   ======================================================= */
.testimonials {
    position: relative;
    height: 670.667px;
    margin-top: 80px;
    /* v2.7.0 — gradient now also fades grey → white at the BOTTOM so the
       transition into the next section (about-why on /about/, CTA on /)
       reads as a soft wash instead of a hard #eee → #fff line. */
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #eeeeee 90px,
        #eeeeee calc(100% - 120px),
        #ffffff 100%
    );
    overflow: hidden;
    padding: 20.67px 0 0;
    /* Break out of .site-main's 1280px max-width so the grey wash + blue
       glow span the full viewport on wide PC monitors. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Soft blue glow — Figma node 39:411. Centered ellipse sized to exactly
   match the section dims (50% radius from a 50% center = touches edges
   at 100% transparent). Spreads wide but fades to nothing at every
   border, so there's no hard cut into FAQ above or CTA below. */
.testimonials::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99, 154, 255, 0.55), transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.testimonials > * { position: relative; z-index: 1; }
.testimonials__head { position: relative; z-index: 2; }
.testimonials__eyebrow {
    text-align: center;
    font-size: 14.659px;
    font-weight: 500;
    margin: 0 0 12px;
    line-height: 1;
}
.testimonials__title {
    text-align: center;
    font-size: 44px;
    font-weight: 400;
    margin: 0 0 50px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.testimonials__title em { color: var(--color-accent); font-style: italic; font-weight: 600; }

.testimonials__viewport {
    position: relative;
    width: 100%;
    /* clip horizontally so the marquee doesn't bleed past the section,
       but let the vertical axis stay visible so a hover-lifted card's
       shadow isn't cut off at the bottom edge. */
    overflow-x: clip;
    overflow-y: visible;
    padding: 0 0 50px;
    z-index: 1;
}
.testimonials__track {
    display: flex;
    gap: 26.667px;
    padding: 0 0 0 40px;
    width: max-content;
    animation: testimonials-loop 70s linear infinite;
    will-change: transform;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.testimonials__track:active { cursor: grabbing; }
.testimonials__track:hover { animation-play-state: paused; }
.testimonials.is-paused .testimonials__track { animation-play-state: paused; }

/* v2.4.38 — rest zone removed per user request; all cards now share the
   same uniform 26.667px gap so the marquee scrolls as one continuous
   stream with no break. */

@keyframes testimonials-loop {
    /* Cycle = one full set + one inter-set gap so the 7th card lands
       exactly where the 1st was = seamless loop.
       6 cards (1912.002) + 5 within-gaps (133.335) + 1 flex gap (26.667)
       = 2072.004px. */
    from { transform: translateX(0); }
    to   { transform: translateX(-2072.004px); }
}

/* Card frame fixed at exact Figma size — Swiper-style lift on hover */
.testimonial {
    position: relative;
    flex: 0 0 318.667px;
    width: 318.667px;
    height: 350.667px;
    background: #fff;
    scroll-snap-align: start;
    box-shadow: 0 4px 14px rgba(20, 30, 60, 0.06);
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                box-shadow .35s cubic-bezier(.2,.7,.2,1);
    z-index: 1;
}
.testimonial:hover {
    transform: translateY(-8px) scale(1.035);
    box-shadow: 0 22px 44px -12px rgba(21, 102, 224, 0.28),
                0 10px 22px -6px rgba(0, 0, 0, 0.18);
    z-index: 3;
}
/* Suppress lift while the user is mid-drag — reads cleaner when scrubbing. */
.testimonials.is-paused .testimonial:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(20, 30, 60, 0.06);
}
.testimonial__mark {
    position: absolute;
    top: 31.33px;
    left: 36px;
    width: 24.667px;
    height: 55.333px;
    color: var(--color-accent);
    font-size: 73.333px;
    line-height: 1;
    margin: 0;
    font-weight: 400;
}
.testimonial__quote {
    position: absolute;
    top: 62px;
    left: 38.67px;
    width: 223.333px;
    height: 145.333px;
    font-size: 12px;
    line-height: 1.8;
    color: #000;
    margin: 0;
    font-weight: 400;
}
.testimonial__rate {
    position: absolute;
    top: 303.32px;
    left: 220px;
    display: flex;
    align-items: center;
    gap: 4.42px;
}
.testimonial__rate img {
    width: 8.538px;
    height: 8.538px;
    object-fit: contain;
    display: block;
}
.testimonial__logo {
    position: absolute;
    left: 36px;
    overflow: hidden;
    display: block;
}
.testimonial__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* =======================================================
   CTA — Figma node 22:1076
   Shares the soft grey wash with testimonials so they read as
   one continuous backdrop (Figma BG node 22:831, 1312.667px tall).
   ======================================================= */
.cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(384px, 1fr) 1fr;
    gap: 60px;
    align-items: center;
    padding: 80px 12.5% 100px;
    background: transparent;
    z-index: 0;
}
/* Grey #eeeeee wash extends past the 1280px container to viewport edges
   without affecting CTA's grid/padding (content stays in 1280 design). */
.cta::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: #eeeeee;
    z-index: -1;
    pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }

.cta__portraits {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    grid-template-rows: repeat(2, 219.333px);
    gap: 16px;
    justify-content: start;
    align-content: center;
}
.cta__portrait {
    position: relative;
    overflow: hidden;
    background: #000;
    width: 180px;
    height: 219.333px;
}
/* v2.6.75 — idle/hover served as pre-graded image pair (270x329 source
   pre-framed to the 180x219.333 frame ratio). Idle image is the desat
   grayscale grade; hover image is the full-color grade. Cross-fade
   between them on hover.
   v2.7.73 — slow zoom-OUT on hover (base 1.08 → 1.0) per Session 12
   framing rule (scale ≥ 1.0 always). Opacity + transform durations
   synced so the two layers move as one — no more "glitch" feel. */
.cta__portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transform: scale(1.08);
    transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.cta__portrait-img--hover { opacity: 0; }
.cta__portrait:hover .cta__portrait-img--idle { opacity: 0; }
.cta__portrait:hover .cta__portrait-img--hover { opacity: 1; }
.cta__portrait:hover .cta__portrait-img { transform: scale(1); }

/* Soft black scrim under every portrait — guarantees the white name +
   country labels stay readable regardless of what's behind them. */
.cta__portrait::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 1;
}

.cta__portrait-name {
    position: absolute;
    left: 16px;
    bottom: 14px;
    color: #fff;
    line-height: 1.3;
    z-index: 2;
}
.cta__portrait-name strong {
    display: block;
    font-size: 9.333px;
    font-weight: 500;
    text-transform: capitalize;
}
.cta__portrait-name span {
    display: block;
    font-size: 6.667px;
    color: var(--color-muted-2);
    text-transform: capitalize;
    margin-top: 2px;
}

.cta__content { max-width: 471.333px; }
.cta__title {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}
.cta__title em {
    color: var(--color-accent);
    font-weight: 600;
    font-style: italic;
    display: block;
}
.cta__body {
    font-size: 16.667px;
    line-height: 1.5;
    margin: 0 0 24px;
    width: 372.667px;
    max-width: 100%;
}
/* Get a Quote + tagline sit on one row, 35px apart — same pattern as
   the navbar CTA cluster. */
.cta__cta-row {
    display: inline-flex;
    align-items: center;
    gap: 35px;
}
.cta__note {
    font-size: 12px;
    color: var(--color-muted-2);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* =======================================================
   FOOTER — Figma node 22:1098 (1280 × 460.667)
   Absolute Figma layout 1:1; own white base + subtle vector
   + top-right rainbow blur so it doesn't merge with grey CTA.
   ======================================================= */
.site-footer {
    position: relative;
    z-index: 5;
    background: #ffffff;
    /* v2.7.5 — taller so logo + copyright sit further below the
       addresses block per user request. */
    height: 560px;

    /* =====================================================
       v2.7.25 — BOTTOM-ROW GAP CONTROLS (5 components)
       Edit these to tune spacing of the bottom row:
         [Logo]  …  [©2026…]  …  [Privacy | ToS | Proposal]
       1. Logo is anchored from viewport LEFT (left value)
       2. ©2026 right edge from viewport RIGHT (right value)
       3. Privacy/ToS/Proposal right edge from viewport RIGHT
       4. Gap BETWEEN the 3 legal items (via flex gap)

       Visual gap math (right-anchored items):
         gap(©2026 → Privacy) = copy-right − legal-right − legal-text-width
         gap(Logo → ©2026) = viewport_width − logo-left − logo-width
                              − (copy-right + copy-text-width)
       So Logo↔©2026 grows with viewport width (variable).
       The other 3 gaps are fixed regardless of viewport.
       ===================================================== */
    --spx-footer-logo-left:   140px; /* Logo distance from viewport LEFT  */
    --spx-footer-copy-right:  380px; /* ©2026 right edge from viewport RIGHT */
    --spx-footer-legal-right:  80px; /* Privacy/ToS/Proposal right edge   */
    --spx-footer-bottom:       64px; /* Distance from footer's BOTTOM edge */
    --spx-legal-gap:           10px; /* Space between Privacy | ToS | Proposal */
    /* No overflow:hidden — __bg layer needs to escape the 1280px container
       so the rainbow + vector reach viewport edges on wide PC monitors.
       __bg has its own overflow:hidden that clips its children. */
    isolation: isolate;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.site-footer__bg {
    position: absolute;
    /* Extend bg layer past the footer's 1280px max-width to viewport edges. */
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    height: 557.333px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
/* v2.7.75 — vector + rainbow gradient layers replaced by a single
   pre-graded WebP background (BG-FOOTER_compressed.webp). One image
   covers the full footer at viewport-edge width. */
.site-footer__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.site-footer__nav,
.site-footer__social,
.site-footer__addresses,
.site-footer__brand,
.site-footer__copy,
.site-footer__legal { position: absolute; z-index: 1; }

.site-footer__nav { left: 140px; top: 55.33px; }
.site-footer__nav ul {
    list-style: none;
    padding: 0; margin: 0;
    font-size: 16px;
    line-height: 2.5;
    color: #000;
}
.site-footer__nav a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
    display: inline-block;
}
.site-footer__nav a:hover { color: var(--color-primary); transform: translateX(3px); }

.site-footer__social { left: 140px; top: 320px; width: 200px; height: 32px; }

/* Default state: dimmed at 70% opacity for a refined, understated look.
   Hover: soft circular backdrop expands behind the icon, the icon
   itself scales up with an elastic ease, and a brand-coloured drop
   shadow blooms underneath. Each platform gets its own brand colour. */
.site-footer__social-icon {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transform-origin: center;
    transition:
        transform .45s cubic-bezier(.34, 1.56, .64, 1),
        opacity .25s ease,
        filter .35s ease;
}
.site-footer__social-icon::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    transform: scale(.5);
    opacity: 0;
    transition:
        transform .45s cubic-bezier(.34, 1.56, .64, 1),
        opacity .25s ease;
    z-index: -1;
}
.site-footer__social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}
.site-footer__social-icon:hover {
    opacity: 1;
    transform: scale(1.18) translateY(-2px);
}
.site-footer__social-icon:hover::before {
    transform: scale(1);
    opacity: 1;
}
.site-footer__social-icon:focus-visible {
    outline: none;
    opacity: 1;
}
.site-footer__social-icon:focus-visible::before {
    transform: scale(1);
    opacity: 1;
    background: rgba(21, 102, 224, 0.15);
}

/* Per-platform brand-colour glow on hover */
.site-footer__social-icon--instagram:hover { filter: drop-shadow(0 6px 14px rgba(225, 48, 108, 0.45)); }
.site-footer__social-icon--linkedin:hover  { filter: drop-shadow(0 6px 14px rgba(0, 119, 181, 0.45)); }
.site-footer__social-icon--youtube:hover   { filter: drop-shadow(0 6px 14px rgba(255, 0, 0, 0.40));  }
.site-footer__social-icon--tiktok:hover    { filter: drop-shadow(0 6px 14px rgba(37, 244, 238, 0.45)); }

.site-footer__social-icon--instagram { left: 0;     top: 4.67px;  width: 22px;     height: 21.333px; }
.site-footer__social-icon--linkedin  { left: 52px;  top: 5.34px;  width: 20.667px; height: 19.333px; }
.site-footer__social-icon--youtube   { left: 96px;  top: 8px;     width: 26px;     height: 16.667px; }
.site-footer__social-icon--tiktok    { left: 132px; top: 0;       width: 31.333px; height: 30.667px; }

/* v2.6.108 — addresses shifted RIGHT (right:80 from viewport edge)
   so the block hugs the right side of the footer. 14px font + 3-line
   JK (Indonesia on its own line) kept from v2.6.107. Cols 280px each
   are wide enough for the longest line at 14px Figtree. */
/* v2.7.10 — back toward the right edge so SINGAPORE label lines up
   with the @2026 left edge under it.
   v2.7.19 — nudged further right (80 → 50) per user blue-line guide;
   was still ~25-30px to the LEFT of the © symbol. */
.site-footer__addresses { right: 50px; top: 64px; width: 600px; height: 320px; }
.site-footer__office { position: absolute; color: #000; }
.site-footer__office h3 {
    margin: 0 0 16px;
    /* v2.7.0 — address bumped above copy/legal per user request. */
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
}
.site-footer__office p {
    margin: 0;
    /* v2.7.0 — address body bumped above copy/legal. */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
.site-footer__office--sg { left: 0;   top: 0;   width: 280px; }
.site-footer__office--mb { left: 320px; top: 0;   width: 280px; }
.site-footer__office--vc { left: 0;   top: 165px; width: 280px; }
.site-footer__office--jk { left: 320px; top: 165px; width: 280px; }

/* Country-title hotspot */
.site-footer__office-link {
    color: inherit;
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: color .25s ease;
}
.site-footer__office-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.site-footer__office-link:hover { color: var(--color-primary); }
.site-footer__office-link:hover::after { transform: scaleX(1); }

.site-footer__office p a { color: inherit; transition: color .25s ease; }
.site-footer__office p a:hover { color: var(--color-primary); }

/* v2.6.105 — anchored to LEFT not RIGHT now that the footer is
   full-vw. With `right:921` the logo drifted toward the centre on
   wider viewports — fixed left position keeps it where Figma
   intended (near the nav column). */
.site-footer__brand {
    bottom: 54px;
    left: 135px;
    right: auto;
    width: 218.667px;
    height: 42px;
}
.site-footer__brand img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* v2.6.106 — copy/legal anchored to the RIGHT edge of the full-vw
   footer so they don't drift away from the rightmost addresses on
   wider monitors. Legal lines up with the addresses' right gutter
   (124px), copy sits ~350px left of that. */
.site-footer__copy, .site-footer__legal {
    bottom: var(--spx-footer-bottom);
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #000;
    white-space: nowrap;
}
.site-footer__legal {
    display: inline-flex;
    align-items: center;
    gap: var(--spx-legal-gap);
}
.site-footer__legal-sep {
    color: rgba(0, 0, 0, 0.45);
    user-select: none;
}
.site-footer__copy {
    right: 400px;
    left: auto;
}
.site-footer__legal { right: var(--spx-footer-legal-right); left: auto; }

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width: 1280px) {
    .site-main, .site-footer { max-width: 100%; }
}

@media (max-width: 600px) {
    .floating-quote { width: 62px; height: 51px; bottom: 72px; }
    .floating-quote__text { font-size: 10px; }
}

@media (max-width: 1240px) {
    .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio__card .portfolio__thumb {
        width: 100%;
        height: auto !important;
        aspect-ratio: 565/420;
    }
    .portfolio__filters { gap: 24px; }
    /* Tablet: keep the dropdown anchored to the trigger but cap width so
       it doesn't overflow when sitting near the right edge. */
    .portfolio__filter-panel { max-width: calc(100vw - 80px); }
    .about__inner { grid-template-columns: 1fr; gap: 40px; }
    .about__title { font-size: 42px; }
    .about__gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        width: 100%;
    }
    .about__photo { width: 100%; height: auto; aspect-ratio: 1; }
    .faq__grid { grid-template-columns: 1fr; gap: 24px; }
    .cta { grid-template-columns: 1fr; padding: 60px 40px; }
    .cta__portraits { justify-content: center; }

    /* Footer collapses out of the absolute Figma layout into a stack */
    .site-footer {
        height: auto;
        padding: 50px 40px 30px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .site-footer__nav,
    .site-footer__social,
    .site-footer__addresses,
    .site-footer__brand,
    .site-footer__copy,
    .site-footer__legal { position: static; }
    .site-footer__nav    { order: 1; }
    .site-footer__social { order: 2; width: auto; height: auto; display: flex; gap: 22px; }
    .site-footer__social-icon { position: static; transform: none !important; }
    /* v2.6.103 — at tablet/narrow viewports stack offices in 1 col
       (was 2 col grid which crammed JK's long address into 3 lines).
       Each office gets full container width so address fits in 1 line
       → consistent 4-line read across all viewports. */
    .site-footer__addresses {
        order: 3;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .site-footer__office { position: static; width: 100%; }
    .site-footer__brand  { order: 4; margin: 0 auto; }
    .site-footer__copy,
    .site-footer__legal  { order: 5; text-align: center; }
}

@media (max-width: 720px) {
    body { padding-top: 64px; }
    .site-header { height: 64px; }
    .navbar { padding: 0 20px; }
    .navbar__links { display: none; }
    /* Tagline gets cramped beside the button on phone widths — hide it. */
    .navbar__cta { gap: 0; }
    .navbar__cta-tag { display: none; }
    .hero__title { font-size: 32px; width: 100%; }
    .hero__copy { width: 100%; padding: 0 24px; margin: 0 auto; }
    .hero__banner { width: calc(100% - 48px); margin: 30px auto 0; }
    .portfolio { padding: 0 24px; }
    .portfolio__filters { gap: 16px; }
    .portfolio__filter,
    .portfolio__filter-other { font-size: 14px; }
    .portfolio__filter-panel-item { font-size: 14px; padding: 10px 18px; }
    /* On narrow screens the trigger sits far right; align the panel to its
       right edge so it can't push past the viewport. */
    .portfolio__filter-panel {
        right: 0;
        left: auto;
        min-width: 240px;
        max-width: calc(100vw - 48px);
    }
    .portfolio__grid { grid-template-columns: 1fr; }
    .portfolio__thumb { width: 100%; }
    .about { padding: 60px 0; }
    .about__title { font-size: 32px; }
    .about__body p { font-size: 16px; }
    .faq { padding: 30px 24px; }
    .faq__title { font-size: 32px; }
    .testimonials { height: auto; padding-bottom: 30px; }
    .testimonial { flex: 0 0 85vw; }
    .cta__title { font-size: 32px; }
    .cta__body { font-size: 14px; }
    .cta__portraits {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px;
        gap: 12px;
    }
    .cta__portrait { width: 100%; height: 100%; }
    .site-footer__addresses { grid-template-columns: 1fr; }
}

/* =========================================================
   ABOUT PAGE — v2.6.111
   Sections: about-hero / about-work / about-made / about-why
   Reuses .testimonials and .cta from the front page.
   v2.6.111: all accent colour switched from orange (--color-primary)
   to blue (--color-accent #1566e0). The orange brand colour stays for
   buttons + global UI; about page uses blue for hierarchy.
   ========================================================= */
.site-main--about { padding-top: 0; }

/* ----- 1. HERO ----------------------------------------- */
.about-hero {
    padding: clamp(80px, 12vh, 160px) 0 clamp(60px, 10vh, 120px);
    text-align: left;
}
.about-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}
.about-hero__eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 24px;
}
.about-hero__title {
    font-size: clamp(48px, 7vw, 108px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    color: #000;
}
.about-hero__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-accent);
}
.about-hero__lede {
    font-size: clamp(17px, 1.3vw, 22px);
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0;
    max-width: 760px;
}

/* ----- 1.5 PEOPLE & CULTURE MARQUEE -------------------- */
/* Horizontal infinite scroll of studio photos. Track holds 2 sets of
   13 photos; CSS animation translates -50% to seamlessly loop. Photos
   are rendered at 16:9 with object-fit: cover (center-cropped from
   their native size). Section breaks out of the 1280px canvas to span
   the viewport edges. */
.about-marquee {
    /* break out of .site-main cap so the strip spans full viewport */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(20px, 3vh, 50px) 0 clamp(40px, 6vh, 80px);
    overflow: hidden;
    background: #fff;
}
.about-marquee__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.about-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.6vw, 28px);
    width: max-content;
    animation: about-marquee-scroll 80s linear infinite;
    will-change: transform;
}
.about-marquee__track:hover { animation-play-state: paused; }
.about-marquee__item {
    flex: 0 0 auto;
    width: clamp(340px, 32vw, 560px);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #eee;
}
.about-marquee__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
@keyframes about-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .about-marquee__track { animation: none; }
}

/* ----- 2. HOW WE WORK ---------------------------------- */
.about-work { padding: clamp(80px, 12vh, 150px) 0; }
.about-work__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.about-work__head { position: sticky; top: 120px; }
.about-work__eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 18px;
}
.about-work__title {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
    color: #000;
}
.about-work__title em { font-style: italic; color: var(--color-accent); font-weight: 500; }
.about-work__intro { font-size: 17px; line-height: 1.55; color: var(--color-muted); margin: 0; }
.about-work__steps { list-style: none; margin: 0; padding: 0; counter-reset: work; }
.about-work__step {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 24px;
    padding: 32px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    align-items: start;
}
.about-work__step:first-child { border-top: 0; padding-top: 0; }
.about-work__num {
    font-family: var(--font-sans);
    font-size: 40px;
    font-weight: 600;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}
.about-work__step-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 10px;
    color: #000;
}
.about-work__step-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0;
}
/* v2.7.1 — image lives INSIDE step-body so the original sticky-head
   stop-scroll layout is preserved. Sits above the h3 in the body col. */
.about-work__step-image {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f1f1f1;
    margin-bottom: 22px;
}
.about-work__step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.about-work__step:hover .about-work__step-image img { transform: scale(1.04); }

/* ----- 3. WHAT WE'VE MADE ------------------------------ */
.about-made { padding: clamp(80px, 12vh, 150px) 0; background: #fafafa; }
.about-made__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}
/* v2.7.4 — wider gap below the section header so "What We've Made"
   stays comfortably readable above the slider card. */
.about-made__head { margin-bottom: clamp(64px, 8vw, 110px); max-width: 720px; }
.about-made__eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 18px;
}
.about-made__title {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    color: #000;
}
.about-made__title em { font-style: italic; color: var(--color-accent); font-weight: 500; }
/* v2.7.0 — slider format. The list is a horizontal scroll-snap track,
   each project is a full-width slide with an image + text block. */
.about-made__slider { position: relative; }
.about-made__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.about-made__list::-webkit-scrollbar { display: none; }
.about-made__project {
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(28px, 3.4vw, 48px);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
    align-items: center;
}
.about-made__project-media {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #eee;
}
.about-made__project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-made__project-text { min-width: 0; }
.about-made__project-head {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 20px;
}
.about-made__project-num {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.1em;
}
.about-made__project-name {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: #000;
}
.about-made__project-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0 0 28px;
}
.about-made__project-body em { color: #000; font-style: italic; font-weight: 500; }
.about-made__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.about-made__stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.about-made__stat-num {
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 600;
    line-height: 1;
    color: var(--color-accent);
    letter-spacing: -0.02em;
}
.about-made__stat-label {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-muted);
}

.about-made__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 9px 18px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.about-made__cta:hover {
    background: #c93b00;
    box-shadow: 0 10px 22px rgba(235, 71, 0, 0.26);
}
.about-made__cta:hover .about-made__cta-arrow { transform: translateX(4px); }
.about-made__cta-arrow {
    width: 14px;
    height: auto;
    transition: transform .25s ease;
    flex-shrink: 0;
}

/* Slider controls — sit centered below the track.
   v2.7.4 — pushed further down + smaller arrows per user request. */
.about-made__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 64px;
}
.about-made__arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: #fff;
    color: #000;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.about-made__arrow:hover { background: #000; color: #fff; border-color: #000; }
.about-made__arrow:disabled { opacity: 0.35; cursor: default; }
.about-made__arrow:disabled:hover { background: #fff; color: #000; border-color: rgba(0, 0, 0, 0.18); }
.about-made__dots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}
.about-made__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    padding: 0;
    transition: background-color .2s ease, transform .2s ease;
}
.about-made__dot.is-active {
    background: var(--color-accent);
    transform: scale(1.2);
}

@media (max-width: 880px) {
    .about-made__project {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .about-made__project-media { aspect-ratio: 16 / 9; }
    .about-made__stats { grid-template-columns: 1fr; gap: 14px; }
}

/* ----- 5. WHY SUPERPIXEL ------------------------------- */
.about-why {
    padding: clamp(95px, 8vh, 100px) 0;
    background: #fff;
    position: relative;
    z-index: 1;
}
.about-why__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}
.about-why__head { text-align: center; margin-bottom: clamp(24px, 3vw, 40px); max-width: 760px; margin-left: auto; margin-right: auto; }
.about-why__eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 18px;
}
.about-why__title {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
    color: #000;
}
.about-why__title em { font-style: italic; color: var(--color-accent); font-weight: 500; }
.about-why__intro { font-size: 17px; line-height: 1.55; color: var(--color-muted); margin: 0; }
/* v2.7.33 — capability grid: pills stay anchored on a fixed 4-col grid
   so the click target never moves under the cursor (UX rule: don't
   chase the user). The thumbnail floats absolutely ABOVE the pill, so
   it can grow large without reflowing the row or pushing the pill
   itself down. Reserved top padding on the grid is the room the thumb
   lives in. */
.about-why__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-top: clamp(40px, 5vw, 70px);
}
.about-why__item {
    position: relative;
    overflow: visible;
}
.about-why__link {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}
.about-why__thumb {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    width: clamp(280px, 30vw, 440px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: #111;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateX(-50%) scale(0.55);
    transform-origin: center bottom;
    pointer-events: none;
    transition: opacity .35s ease,
                transform .55s cubic-bezier(.22,.61,.36,1);
    z-index: 5;
}
.about-why__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-why__item:hover .about-why__thumb,
.about-why__item:focus-within .about-why__thumb {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
.about-why__label {
    display: block;
    padding: 22px 28px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
    text-align: center;
    transform-origin: center center;
    transition: color .25s ease,
                border-color .25s ease,
                background .25s ease,
                transform .35s cubic-bezier(.22,.61,.36,1),
                opacity .35s ease;
}
.about-why__item:hover .about-why__label,
.about-why__item:focus-within .about-why__label {
    border-color: var(--color-accent);
}
/* When ANY pill is hovered, all OTHER pills shrink + fade so the
   hovered one feels dominant. Hovered pill itself stays exactly in
   place (no transform) — click target must not move. */
.about-why__grid:hover .about-why__item:not(:hover) .about-why__label,
.about-why__grid:focus-within .about-why__item:not(:focus-within) .about-why__label {
    transform: scale(0.86);
    opacity: 0.45;
}
@media (hover: none) {
    .about-why__thumb { display: none; }
    .about-why__grid { padding-top: 0; }
}

/* ----- 6. CTA modifier --------------------------------- */
.cta--about .cta__content { margin: 0 auto; }

/* ----- Responsive -------------------------------------- */
@media (max-width: 900px) {
    .about-work__inner { grid-template-columns: 1fr; gap: 40px; }
    .about-work__head { position: static; }
    .about-work__step { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; }
    .about-work__num { font-size: 28px; }
    .about-work__step-title { font-size: 20px; }
    .about-made__stats { grid-template-columns: 1fr; gap: 16px; }
    .about-why__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .about-why__grid { grid-template-columns: repeat(2, 1fr); padding-top: clamp(160px, 45vw, 280px); }
    .about-why__thumb { width: clamp(220px, 52vw, 340px); }
}
@media (max-width: 600px) {
    .about-hero { padding: 60px 0 50px; }
    .about-why__grid { grid-template-columns: 1fr; }
    .about-made__project { padding: 28px 20px; border-radius: 16px; }
}

/* =========================================================
   SINGLE PORTFOLIO — /work/<slug>/  (Figma 96:956)
   ========================================================= */
.work-single {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 40px) clamp(60px, 8vw, 100px);
}
.work-single__accent {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, 95vw);
    height: 560px;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99, 154, 255, 0.18), transparent 70%);
    filter: blur(40px);
    opacity: 0.65;
    pointer-events: none;
    z-index: -1;
}
.work-single__head { margin: clamp(20px, 4vw, 48px) 0 clamp(24px, 3vw, 40px); }
.work-single__year {
    font-size: 15px;
    color: var(--color-text);
    margin: 0 0 14px;
}
.work-single__title {
    font-size: clamp(40px, 6vw, 67px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0;
    color: #000;
    max-width: 920px;
}
.work-single__sub {
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 500;
    color: rgba(35, 31, 32, 0.65);
    margin: 16px 0 0;
}

/* ---- Hero with play button → YouTube/Vimeo iframe swap ---- */
.work-single__hero {
    position: relative;
    aspect-ratio: 1200 / 614;
    border-radius: 6px;
    overflow: hidden;
    background: #e9e9e9;
}
.work-single__hero-img,
.work-single__hero-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}
.work-single__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(64px, 7vw, 100px);
    height: clamp(64px, 7vw, 100px);
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .25s ease, background .25s ease;
    z-index: 2;
}
.work-single__play:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.work-single__play-icon {
    width: 0; height: 0;
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent var(--color-primary);
    margin-left: 5px;
}

/* ---- Section blocks (Overview, Gallery) ---- */
.work-single__section { margin-top: clamp(48px, 6vw, 90px); }
.work-single__h {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 clamp(16px, 2vw, 28px);
    color: #000;
}
.work-single__overview {
    max-width: 720px;
    margin-left: auto;
    font-size: 14.667px;
    line-height: 1.5;
    color: #000;
}
.work-single__overview p { margin: 0 0 1em; }
.work-single__overview a { color: var(--color-accent); }

.work-single__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
}
.work-single__grid-item {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: #d9d9d9;
}
.work-single__grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.work-single__grid-item:hover img { transform: scale(1.05); }

.work-single__back { margin-top: clamp(48px, 6vw, 80px); }

@media (max-width: 700px) {
    .work-single__overview { margin-left: 0; }
    .work-single__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}