/*
Theme Name: Pixalane
Theme URI: https://pixalane.com/
Description: Pixalane Creative Agency Theme
Author: Pixalane
Author URI: https://pixalane.com/
Version: 1.0.0
*/

/* ==========================================================================
   Pixalane Anti-Slop Editorial Design System (design-taste-frontend compliant)
   Rules: No gradients, no shadows at rest, no glass, no hairlines, no pill badges
   ========================================================================== */

/* Brand palette (brand guideline page 14): primary #4FACFE and #00F2FE, secondary black and white.
   Ground #0E1218 is the brand's dark tone; surfaces are one and two steps lighter. */
:root {
    --pixa-ground: #0E1218;
    --pixa-deep: #0A0D12;
    --pixa-surface: #161B23;
    --pixa-surface-hover: #1C222C;
    --pixa-ink: #ffffff;
    --pixa-ink-secondary: rgba(255, 255, 255, 0.72);
    --pixa-ink-muted: rgba(255, 255, 255, 0.5);
    --pixa-accent: #4FACFE;
    --pixa-accent-2: #00F2FE;
    --pixa-grad: linear-gradient(135deg, var(--pixa-accent-2) 0%, var(--pixa-accent) 100%); /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    --pixa-accent-hover: #00F2FE;
}

/* The template's own components (nav, sliders, quote marks, circle buttons) read these variables */
:root,
.theme-dark:root {
    --clr-theme-2: #4FACFE;
    --clr-bg-2: #4FACFE;
    --clr-theme-1: #0E1218;
    --clr-common-black: #0E1218;
    --clr-background-primary: #0E1218;
    --clr-bg-1: #0E1218;
}

/* Logo lockup: official mark plus the light wordmark, in the header, the off-canvas menu and the footer */
.pixa-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.pixa-logo-mark {
    width: 40px;
    height: 40px;
    display: block;
}

.pixa-logo-word {
    height: 18px;
    width: auto;
    display: block;
}

.header__logo,
.header__logo img {
    width: auto;
}

.pixa-footer-logo .pixa-logo-mark {
    width: 44px;
    height: 44px;
}

.pixa-footer-logo .pixa-logo-word {
    height: 20px;
}

@media (max-width: 575px) {
    .pixa-logo-mark {
        width: 34px;
        height: 34px;
    }
    .pixa-logo-word {
        height: 15px;
    }
}

/* Hero background: the studio reel at full strength under a flat, light dim (the template's black-to-left gradient is
   replaced), framed to the right where the phones are, with a gentle depth drift as the page scrolls off it (pixa-home.js) */
.hero-area__bg {
    overflow: hidden;
}

.hero-area__bg video {
    width: 110%;
    height: 100%;
    margin-left: -10%;   /* the reel sits further left, so the right-hand phone clears the edge of the screen with room to spare */
    display: block;
    object-fit: cover;
    object-position: 62% 50%;
    filter: contrast(1.04) saturate(1.08);
    will-change: transform;
    transition: none;
}

.hero-area__bg:after,
.theme-dark .hero-area__bg::after {
    background: rgba(10, 13, 18, 0.32);
}

/* Hero Typography & Single Action */
.hero__title {
    font-size: clamp(34px, 5.5vw, 84px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}

/* TechText (hero title): the words stay in the heading for readers and search; the canvas draws them.
   The canvas is padded on every side so dragged letters and the selection frame are never clipped. */
.pixa-tech-text {
    position: relative;
    display: block;
    touch-action: pan-y;
}

.pixa-tech-text-source {
    position: absolute;
    width: 1px;
    height: 1px; /* taste-skill-ignore: screen-reader-only text box, not a divider */
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pixa-tech-text-canvas {
    position: absolute;
    display: block;
    pointer-events: none;
}

.hero__title span,
.hero__title .tpl__theme-color {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

.hero__desc {
    color: var(--pixa-ink-secondary) !important;
    font-size: clamp(16px, 1.35vw, 20px) !important;
    line-height: 1.6 !important;
    max-width: 620px !important;
    margin-bottom: 34px !important;
    font-weight: 400 !important;
}

/* Flat, Solid Primary Button (No gradient, no glow shadow, no pill) */
.btn-theme-solid,
.btn-theme-gradient {
    background: var(--pixa-accent) !important;
    color: var(--pixa-ground) !important;
    padding: 16px 36px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    border: none !important;
}

.btn-theme-solid:hover,
.btn-theme-gradient:hover {
    background: var(--pixa-accent-hover) !important;
    color: var(--pixa-ground) !important;
}

.btn-theme-outline {
    background: var(--pixa-surface) !important;
    color: var(--pixa-ink) !important;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
}

.btn-theme-outline:hover {
    background: var(--pixa-surface-hover) !important;
    color: var(--pixa-ink) !important;
}

/* ==========================================================================
   Buttons: two blocks side by side, the label's and the arrow's, a 3px gap between them. On hover the label rolls up and
   its copy rises in from below (pixa-bits.js writes the copy), the arrow leaves to the right and comes back in from the
   left, and the two blocks swap tones. Primary: white label block, brand-blue arrow block. Quiet: both on the surface
   tone, the arrow in brand blue. The whole button drifts toward a fine pointer (pixa-bits.js magnet). No gradient, no shadow.
   ========================================================================== */
.pixa-btn {
    --btn-h: 52px;
    --btn-pad: 22px;
    --btn-r: 8px;
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    color: var(--pixa-deep);
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: none;   /* GSAP owns the drift; the blocks carry their own transitions */
    -webkit-tap-highlight-color: transparent;
}

.pixa-btn:focus-visible {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 4px;
    border-radius: 10px;
}

.pixa-btn__label {
    display: flex;
    align-items: center;
    height: var(--btn-h);
    padding: 0 var(--btn-pad);
    border-radius: var(--btn-r);
    background: #ffffff;
    color: var(--pixa-deep);
    overflow: hidden;
    transition: background-color 0.45s ease, color 0.45s ease;
}

.pixa-btn__window {
    display: block;
    height: 1.3em;
    overflow: hidden;   /* one line tall: the second copy waits below it */
}

.pixa-btn__roll {
    display: flex;
    flex-direction: column;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-btn__text {
    display: block;
    height: 1.3em;
    line-height: 1.3;
}

.pixa-btn:hover .pixa-btn__roll,
.pixa-btn:focus-visible .pixa-btn__roll {
    transform: translateY(-50%);
}

.pixa-btn__arrow {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: var(--btn-h);
    height: var(--btn-h);
    border-radius: var(--btn-r);
    background: #ffffff;
    color: var(--pixa-deep);
    overflow: hidden;
    transition: background-color 0.45s ease, color 0.45s ease;
}

.pixa-btn__arrow::before {   /* the gradient, on its own layer so a hover can fade it */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pixa-grad);
    transition: opacity 0.45s ease;
}

.pixa-btn__arrow svg {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    overflow: visible;
}

.pixa-arrow path {   /* the arrow is two strokes: a shaft and a head, erased and redrawn by the script on hover */
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: none;
}

.pixa-btn__frame {   /* the accent line the script traces around the button, 5px outside it */
    position: absolute;
    inset: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    overflow: visible;
    pointer-events: none;
}

.pixa-btn__frame path {   /* the viewBox is the box's own pixel size, so the stroke needs no scaling rule */
    fill: none;
    stroke: url(#pixa-grad);   /* the gradient defined once in footer.php */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: none;
}

.pixa-btn.has-frame:focus-visible {
    outline-color: transparent;   /* the drawn frame is the focus ring */
}

.pixa-btn:hover .pixa-btn__arrow::before,
.pixa-btn:focus-visible .pixa-btn__arrow::before {
    opacity: 0;
}

.pixa-btn--quiet .pixa-btn__label {
    background: var(--pixa-surface-hover);
    color: #ffffff;
}

.pixa-btn--quiet .pixa-btn__arrow {
    background: var(--pixa-surface-hover);
    color: var(--pixa-accent);
}

.pixa-btn--quiet .pixa-btn__arrow::before {
    opacity: 0;
}

.pixa-btn--quiet .pixa-arrow path {
    stroke: url(#pixa-grad-arrow);
}

.pixa-btn--quiet:hover .pixa-btn__label,
.pixa-btn--quiet:focus-visible .pixa-btn__label {
    background: var(--pixa-surface-hover);
    color: var(--pixa-accent);
}

.pixa-btn--quiet:hover .pixa-btn__arrow,
.pixa-btn--quiet:focus-visible .pixa-btn__arrow {
    color: var(--pixa-deep);
}

.pixa-btn--quiet:hover .pixa-btn__arrow::before,
.pixa-btn--quiet:focus-visible .pixa-btn__arrow::before {
    opacity: 1;
}

.pixa-btn--quiet:hover .pixa-arrow path,
.pixa-btn--quiet:focus-visible .pixa-arrow path {
    stroke: currentColor;
}

.pixa-btn--quiet:hover .pixa-btn__text,
.pixa-btn--quiet:focus-visible .pixa-btn__text {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-btn--lg {
    --btn-h: 60px;
    --btn-pad: 28px;
    font-size: 17px;
}

.pixa-btn--lg .pixa-btn__arrow svg {
    width: 18px;
    height: 18px;
}

/* Commercial Projects Grid (Surfaces defined by tone steps, not outlines or shadows) */
.pixalane-work-card {
    background: var(--pixa-surface);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: none;
    transition: background-color 0.45s ease;
}

.pixalane-work-card:hover {
    background: var(--pixa-surface-hover);
    z-index: 2;   /* a tilted card sits above its neighbours */
}

.pixalane-work-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;   /* the parallax img and the hover zoom never leave this frame */
    background: var(--pixa-deep);
    isolation: isolate;
}

/* The link around the picture is the zoom layer; the scrubbed parallax moves the img inside it; the thumb clips both */
.pixalane-work-thumb a {
    display: block;
    height: 100%;
}

.pixalane-work-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .pixalane-work-thumb a {
        transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .pixalane-work-card:hover .pixalane-work-thumb a {
        transform: scale(1.05);
    }
}

.pixalane-work-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pixalane-work-sector {
    font-size: 13px;
    color: var(--pixa-ink-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.pixalane-work-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--pixa-ink);
    line-height: 1.3;
}

.pixalane-work-desc {
    color: var(--pixa-ink-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

.pixalane-work-footer {
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pixalane-work-lanes {
    font-size: 13px;
    color: var(--pixa-ink-muted);
}

.pixalane-work-link {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pixalane-work-link:hover,
.pixalane-work-card:hover .pixalane-work-link {
    color: var(--pixa-ink);
}

.pixa-works-intro {
    color: var(--pixa-ink-secondary);
    font-size: 16px;
    line-height: 1.6;
    max-width: 650px;
    margin-top: 16px;
}

/* ==========================================================================
   Selected client work: all six projects at once, a 3 x 2 grid of covers with the sector and name under each
   (2 columns on tablets and phones). The cover zooms a little and the arrow nudges under the pointer.
   ========================================================================== */
.featured-works-area.section-spacing {
    padding-top: clamp(64px, 9vh, 110px);
    padding-bottom: clamp(64px, 9vh, 110px);
}

.featured-works-area .pixa-section-head {
    margin-bottom: clamp(28px, 4vh, 48px);
}

.pixa-works-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
}

/* Chroma (after React Bits' Chroma Grid, pixa-home.js): on a fine pointer each cover carries a grey copy of itself with a
   hole cut round the cursor, so the project under the pointer is in colour and the rest wait in grey. The grey copy is a
   static image (rasterised once); only its mask moves, which is cheap. Off on touch screens and under reduced motion. */
.pixa-works-grid {
    --hole: 0px;
}

.pixa-work-grey {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    filter: grayscale(1) brightness(0.72);
    opacity: 0;
    pointer-events: none;
    --lx: 50%;
    --ly: 50%;
    -webkit-mask-image: radial-gradient(circle var(--hole) at var(--lx) var(--ly), transparent 0%, transparent 55%, rgba(0, 0, 0, 0.6) 80%, #000 100%); /* taste-skill-ignore: the mask that cuts the colour hole */
    mask-image: radial-gradient(circle var(--hole) at var(--lx) var(--ly), transparent 0%, transparent 55%, rgba(0, 0, 0, 0.6) 80%, #000 100%); /* taste-skill-ignore: same mask, standard property */
    transition: opacity 0.45s ease;
}

.pixa-works-grid.is-veiled .pixa-work-grey {
    opacity: 1;
}

.pixa-work {
    display: block;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.pixa-work:hover,
.pixa-work:focus {
    color: #ffffff;
}

.pixa-work:focus-visible .pixa-work-thumb {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 3px;
}

.pixa-work-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pixa-surface);
    isolation: isolate;
}

.pixa-work-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 40%;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.pixa-work-thumb .pixa-work-grey {
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;   /* zooms with the colour copy on hover */
}

.pixa-work:hover .pixa-work-thumb img {
    transform: scale(1.05);
}

.pixa-work-caption {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 2px 0;
}

.pixa-work-sector {
    font-size: 13px;
    color: var(--pixa-ink-muted);
}

.pixa-work-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.pixa-work-title .pixa-link-arrow {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-work:hover .pixa-link-arrow {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .pixa-works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
}

@media (max-width: 575px) {
    .pixa-works-grid {
        gap: 20px 12px;
    }
    .pixa-work-caption {
        padding-top: 10px;
        gap: 3px;
    }
    .pixa-work-sector {
        font-size: 12px;
    }
    .pixa-work-title {
        font-size: 15px;
    }
}

/* Case Study Hero & Gallery Details */
.pixalane-case-hero {
    position: relative;
    background: var(--pixa-surface);
    border-radius: 8px;
    padding: 40px;
    border: none;
}

.pixalane-gallery-item {
    border-radius: 6px;
    overflow: hidden;
    background: var(--pixa-deep);
    border: none;
}

.pixalane-gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

/* Ensure headings in dark areas are solid white */
.featured-works-area .section__title-main,
.commercial-portfolio-grid .section__title-main,
.section__title-wrapper.is-white .section__title-main {
    color: #ffffff !important;
}

@media (max-width: 576px) {
    .hero__title {
        font-size: 34px !important;
        line-height: 1.1 !important;
    }
}

/* ==========================================================================
   Shared section furniture (label, title, intro, text link)
   ========================================================================== */
.pixa-label {
    font-size: 13px;
    font-weight: 600;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.pixa-section-head {
    margin-bottom: 48px;
}

.pixa-accent-word {   /* one word of a title in the brand blue; the script bubbles it and turns it to the gradient */
    position: relative;
    margin: 0 0.2em;   /* room for the bubble on either side */
    white-space: nowrap;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-accent-word.is-grad {
    background-image: linear-gradient(90deg, var(--pixa-accent-2), var(--pixa-accent)); /* taste-skill-ignore: the two-tone word of the user's title artwork */
    background-repeat: no-repeat;   /* one tile: the script scales it from the blue end to the full two-tone as the word lands */
    -webkit-background-clip: text; /* taste-skill-ignore: the two-tone word of the user's title artwork */
    background-clip: text; /* taste-skill-ignore: same, standard property */
    color: transparent;
}

.pixa-title-bubble {   /* the sketched bubble around a title's accent word, drawn by the script */
    position: absolute;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.pixa-title-bubble path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: none;
}

.pixa-section-title {
    font-size: clamp(30px, 3.6vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

.pixa-section-intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
    margin: 0 0 16px;
}

/* text links: the underline draws in from the left on hover and the arrow nudges */
.pixa-text-link {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;   /* a 40px tap target; the underline sits just under the text */
    transition: color 0.45s ease;
}

.pixa-text-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px; /* taste-skill-ignore: the link underline */
    background: var(--pixa-grad);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-text-link:hover::after,
.pixa-text-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.pixa-text-link .pixa-link-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-text-link .pixa-link-arrow svg {
    width: 15px;
    height: 15px;
    overflow: visible;
}

.pixa-text-link:hover .pixa-link-arrow {
    transform: translateX(4px);
}

.pixa-text-link .pixa-arrow path {
    stroke: url(#pixa-grad-arrow);
}

/* ==========================================================================
   Facts row and the character strip (scrubbed sideways on scroll)
   ========================================================================== */
.pixa-facts {
    background: var(--pixa-ground);
    padding: clamp(64px, 8vw, 110px) 0 0;
}

.pixa-facts-label {
    display: block;
    margin-bottom: 14px;   /* the digit mask carries its own ~0.1em of air above the numerals */
    line-height: 1.2;
}

/* three figures set like a ledger: no boxes, the numerals carry the row and sit left, centre and right; each one rolls
   in as an odometer (pixa-home.js) */
.pixa-facts-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(32px, 5vw, 80px);
}

.pixa-fact {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
}

.pixa-fact-num {
    display: flex;
    align-items: flex-start;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(64px, 8.4vw, 136px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.92;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.pixa-num {
    display: inline-flex;
    align-items: flex-start;   /* the column keeps its own height, so yPercent counts whole digits */
    height: 0.92em;
    overflow: hidden;
}

.pixa-odo-col {
    display: flex;
    flex-direction: column;
}

.pixa-odo-d {
    display: block;
    height: 0.92em;
}

.pixa-fact-plus {
    margin: 0.06em 0 0 0.04em;
    font-size: 0.4em;
    font-weight: 700;
    line-height: 1;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-fact-label {
    display: block;
    margin-top: 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.pixa-fact-detail {
    display: block;
    margin-top: 6px;
    max-width: 26ch;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pixa-ink-secondary);
}

/* ==========================================================================
   Character showcase: an accordion of eight portraits; the open one shows in colour at 4:5, the rest fold back as
   grey slices (pixa-home.js, after React Bits' AccordionGallery)
   ========================================================================== */
.pixa-characters {
    background: var(--pixa-ground);
    padding: clamp(72px, 9vw, 120px) 0 0;
}

.pixa-characters .pixa-section-head {
    margin-bottom: 40px;
}

.pixa-characters .pixa-section-intro {   /* the line sits under the title here, not beside it */
    max-width: 56ch;
    margin: 18px 0 0;
}

.pixa-char-gallery {
    --cg-gap: 10px;
    --cg-media: 420px;
    display: flex;
    gap: var(--cg-gap);
    height: clamp(340px, 31vw, 490px);
    perspective: 1400px;
    perspective-origin: 50% 50%;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* Each panel is a button. The media layer is as wide as the open panel and centred, so the open panel shows the whole
   picture while a closed one shows a slice of the middle of its own. */
.pixa-char-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pixa-surface);
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transition: none;
    -webkit-tap-highlight-color: transparent;
}

.pixa-char-panel:focus-visible {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 3px;
}

.pixa-char-media {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--cg-media);
    height: 100%;
    margin-left: calc(var(--cg-media) / -2);
    filter: grayscale(1);
    transition: filter 0.6s ease;
}

/* Layers for what moves under a pointer: the hover gallery's pictures, the tilting work cards and their grey copies (the
   hole follows the pointer). Phones have no hover, and every extra layer there costs the compositor on each frame. */
@media (hover: hover) and (pointer: fine) {
    .pixa-char-media,
    .pixa-work,
    .pixa-work-grey {
        will-change: transform;
    }
}

.pixa-char-panel.is-active .pixa-char-media {
    filter: none;
}

.pixa-char-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
}

.pixa-char-dim {
    position: absolute;
    inset: 0;
    background: var(--pixa-deep);
    opacity: 0.4;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.pixa-char-panel.is-active .pixa-char-dim {
    opacity: 0;
}

/* ==========================================================================
   About: team photo, one lead statement, two short columns
   ========================================================================== */
.pixa-about {
    position: relative;
    overflow: hidden;   /* the gallery's frames stop at the section's edge */
    background: var(--pixa-ground);
    padding: clamp(80px, 10vh, 120px) 0 clamp(40px, 6vh, 64px);
}

.pixa-about .pixa-label {
    margin-bottom: 16px;
}

/* title and button on the left, the statement and body on the right */
.pixa-about-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px clamp(40px, 6vw, 110px);
    align-items: start;
}

.pixa-about-title {
    max-width: 14ch;
    margin: 0;
    font-size: clamp(32px, 3.9vw, 60px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.pixa-about-cta {
    margin-top: 28px;
}

.pixa-about-copy {
    max-width: 560px;   /* px, not rem: the template sets the root font to 10px */
}

.pixa-about-statement {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(18px, 1.5vw, 23px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin: 0 0 16px;
}

.pixa-about-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--pixa-ink-secondary);
    margin: 0;
}

/* The studio in pictures. By default a flat strip that scrolls sideways (phones, tablets, reduced motion, no script).
   On wide screens pixa-home.js pins the section and lays the frames on a shallow arc that the page scroll carries along
   (after React Bits' Circular Gallery): lower and tilted toward the edges, fading at the sides. */
.pixa-ring {
    display: flex;
    gap: 16px;
    margin-top: clamp(32px, 5vh, 56px);
    padding: 0 max(15px, calc((100% - 1410px) / 2)) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(15px, calc((100% - 1410px) / 2));
    scrollbar-width: none;
}

.pixa-ring::-webkit-scrollbar {
    display: none;
}

.pixa-ring-card {
    flex: 0 0 auto;
    width: min(68vw, 300px);
    margin: 0;
    scroll-snap-align: start;
    transition: none;
}

.pixa-ring-media {
    display: block;
    aspect-ratio: 0.78;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pixa-surface);
}

.pixa-ring-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-ring-card:hover .pixa-ring-media img {
    transform: scale(1.05);
}

.pixa-ring-cap {
    margin-top: 12px;
}

.pixa-ring-cap strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.pixa-ring-cap span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pixa-ink-muted);
}

/* the arc: one screen tall, the copy on top and the gallery filling the rest */
.pixa-about.is-ring {
    display: flex;
    flex-direction: column;
    height: 100vh;   /* taste-skill-ignore: fallback for browsers without svh; desktop only (the script adds this class above 992px) */
    height: 100svh;
}

.pixa-about.is-ring > .container {
    flex: none;
}

.pixa-about.is-ring .pixa-ring {
    position: relative;
    display: block;
    flex: 1;
    min-height: 0;
    margin-top: clamp(16px, 3vh, 32px);
    padding: 0;
    overflow: visible;
}

.pixa-about.is-ring .pixa-ring-card {
    position: absolute;
    left: 50%;
    top: 47%;   /* a touch above centre: the captions hang below the frames and the arc lowers the outer ones */
    width: var(--card-w, 260px);
    margin: calc(var(--card-h, 333px) / -2) 0 0 calc(var(--card-w, 260px) / -2);
    opacity: 0;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    scroll-snap-align: none;
}

.pixa-about.is-ring .pixa-ring-media {
    height: var(--card-h, 333px);
    aspect-ratio: auto;
}

.pixa-about.is-ring .pixa-ring-cap {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
}

@media (max-width: 991px) {
    .pixa-about-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .pixa-about-copy {
        max-width: none;
    }
}

/* ==========================================================================
   Disciplines marquee (one line of large type, moved by pixa-home.js)
   ========================================================================== */
.pixa-marquee {
    overflow: hidden;
    padding: clamp(20px, 3vw, 40px) 0;
    background: var(--pixa-ground);
}

.pixa-marquee-track {
    display: flex;
    width: max-content;
}

.pixa-marquee span {
    display: inline-flex;
    align-items: center;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(40px, 7vw, 112px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    padding-right: 0.5em;
}

.pixa-marquee span::after {
    content: "";
    width: 0.16em;
    height: 0.16em;
    border-radius: 50%;
    background: var(--pixa-grad);
    margin-left: 0.5em;
}

.pixa-link-arrow {
    display: inline-block;
}

/* inline SVG icons (paths taken from the theme's Font Awesome Pro files) sized like the font glyphs they replace */
.pixa-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

/* back to top: the chevron is inline SVG, so the template's icon-font pseudo-element goes */
.progress-wrap::after {
    content: none;
}

.progress-wrap .pixa-totop-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    color: var(--pixa-ground);
    pointer-events: none;
}

.progress-wrap .pixa-totop-icon path {
    fill: currentColor;   /* backToTop.css blanks every path in the button for the progress ring */
}

.pixa-nowrap {
    white-space: nowrap;
}

/* ==========================================================================
   Services: a scroll stack (after React Bits' ScrollStack, pixa-home.js). Each card parks below the bar while the next
   arrives over it; covered cards shrink a step and darken, and the finished stack scrolls away as one.
   ========================================================================== */
.pixa-services {
    background: var(--pixa-ground);
    padding: clamp(72px, 9vh, 110px) 0 clamp(56px, 8vh, 96px);   /* room below the finished stack before the works */
}

.pixa-services .pixa-section-head {
    margin-bottom: clamp(32px, 5vh, 56px);
}

/* Below 992px the five cards sit in a plain column (pixa-home.js lets each rise in once as it arrives); above it the
   accordion in pixa-home.js takes over and this list is kept for assistive tech only. */
.pixa-stack {
    --stack-card: clamp(420px, 66vh, 620px);
    --stack-pad: 14px;       /* the mount around the artwork */
    --stack-art-w: calc((var(--stack-card) - 2 * var(--stack-pad)) * 0.736);   /* every lane picture is 0.736 wide to 1 tall */
    --stack-space: 20px;     /* between cards */
    position: relative;
}

.pixa-stack-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--stack-art-w);
    height: var(--stack-card);
    padding: var(--stack-pad);
    margin-bottom: var(--stack-space);
    border-radius: 14px;
    overflow: hidden;
    background: var(--pixa-surface);
    color: #ffffff;
    text-decoration: none;
    isolation: isolate;
}

.pixa-stack-card:last-child {
    margin-bottom: 0;
}

.pixa-stack-card:hover,
.pixa-stack-card:focus {
    color: #ffffff;
}

.pixa-stack-card:focus-visible {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 3px;
}

/* the brand gradient ring the user asked for: a 1.5px border running from the blue to the cyan and fading out */
.pixa-stack-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1.5px; /* taste-skill-ignore: the gradient border the user asked for */
    background: linear-gradient(135deg, var(--pixa-accent) 0%, var(--pixa-accent-2) 45%, rgba(79, 172, 254, 0.22) 100%); /* taste-skill-ignore: the brand gradient border the user asked for */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* taste-skill-ignore: a mask that keeps the border area only */
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* taste-skill-ignore: same mask, standard property */
    mask-composite: exclude;
    opacity: 0.85;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.pixa-stack-card:hover::before {
    opacity: 1;
}

/* the copy panel: the lane's name, what it is, what you get, and the link; the lane's tag stands on its side along the
   seam between the copy and the picture */
.pixa-stack-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-width: 0;
    max-width: 680px;
    padding: clamp(24px, 3vw, 48px) 88px clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px);
}

.pixa-stack-tag {
    position: absolute;
    top: 50%;
    right: calc(var(--stack-art-w) + var(--stack-pad) + 22px);
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
}

.pixa-stack-title {
    margin: 0;
    font-size: clamp(34px, 4vw, 64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-transform: none;
}

.pixa-stack-text {
    margin: 0;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    max-width: 42ch;
}

.pixa-stack-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pixa-stack-list li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.74);
}

.pixa-stack-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--pixa-grad);
}

.pixa-stack-more {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    transition: color 0.45s ease;
}

.pixa-stack-card:hover .pixa-stack-more {
    color: #ffffff;
}

/* the artwork panel: a mounted print, the whole picture at full strength, settling in from the right as the card arrives
   (pixa-home.js); the column is sized to the picture's own proportions so none of it is cut off */
.pixa-stack-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: var(--pixa-deep);
}

.pixa-stack-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 50%;
}

/* the shade belonged to the scroll stack; the cards no longer pile up */
.pixa-stack-shade {
    display: none;
}

@media (min-width: 768px) and (max-width: 991px) {   /* tablets: still side by side, the copy narrower, the list away */
    .pixa-stack {
        --stack-card: clamp(480px, 62vh, 560px);
        --stack-pad: 10px;
    }
    .pixa-stack-copy {
        max-width: none;
        gap: 12px;
        padding: 24px 56px 24px 24px;
    }
    .pixa-stack-tag {
        right: calc(var(--stack-art-w) + var(--stack-pad) + 14px);
        font-size: 11px;
    }
    .pixa-stack-title {
        font-size: clamp(26px, 4.2vw, 36px);
    }
    .pixa-stack-text {
        font-size: 15px;
    }
    .pixa-stack-list {
        display: none;
    }
}

@media (max-width: 767px) {   /* phones: the picture on top, the copy under it */
    .pixa-stack {
        --stack-card: clamp(560px, 78vh, 680px);   /* tall enough for the picture to show almost whole above the copy */
        --stack-pad: 10px;
        --stack-space: 16px;
    }
    .pixa-stack-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 60%) minmax(0, 1fr);
        border-radius: 10px;
    }
    .pixa-stack-media {
        order: -1;
    }
    .pixa-stack-copy {
        max-width: none;
        justify-content: flex-start;
        gap: 10px;
        padding: 20px;
    }
    .pixa-stack-tag {
        position: static;
        writing-mode: horizontal-tb;
        transform: none;
    }
    .pixa-stack-art {
        object-position: 50% 12%;
    }
    .pixa-stack-title {
        font-size: clamp(26px, 7vw, 34px);
    }
    .pixa-stack-text {
        font-size: 14px;
    }
    .pixa-stack-list {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 767px) {   /* large phones and small tablets: the whole picture, letterboxed on the deep tone */
    .pixa-stack-card {
        grid-template-rows: minmax(0, 58%) minmax(0, 1fr);
    }
    .pixa-stack-art {
        object-fit: contain;
        object-position: 50% 50%;
    }
    .pixa-stack-copy {
        padding: 24px 28px;
    }
    .pixa-stack-title {
        font-size: 34px;
    }
}

/* ==========================================================================
   How we work: the six steps. On wide screens pixa-home.js lays them out as a route: stations down the page, left and
   right in turn, a winding path through their discs that the scroll draws, with a traveller running along it and each
   station lighting as it is reached. Below 992px the steps go down the page as a journey: a line on the left fills with
   the scroll and lights a node as each step arrives.
   ========================================================================== */
.pixa-process-section {
    position: relative;
    overflow: hidden;
    background: var(--pixa-ground);   /* the same dark as every other section (it was the deeper tone, a visibly different band) */
    padding: clamp(72px, 9vh, 110px) 0 clamp(48px, 6vh, 72px);
}

.pixa-journey-readout {
    display: none;
    margin: 16px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
    font-variant-numeric: tabular-nums;
}

.pixa-journey-current {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-process-section.is-route .pixa-journey-readout {
    display: block;
}

/* down the page: a line on the left, a node per step */
.pixa-journey {
    margin-top: clamp(32px, 5vh, 56px);
}

.pixa-journey-track {
    padding: 0 15px;   /* the script lines this up with the container's content edge */
}

.pixa-journey-steps {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.pixa-journey-line {
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--pixa-surface-hover);
}

.pixa-journey-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: var(--pixa-grad);
}

.pixa-journey-step {
    position: relative;
}

.pixa-journey-node {
    position: absolute;
    left: -32px;
    top: 22px;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--pixa-surface-hover);
    transition: background-color 0.45s ease;
}

.pixa-journey-node.is-on {
    background: var(--pixa-grad);
}

.pixa-journey-disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--pixa-surface);
    transition: background-color 0.45s ease;
}

.pixa-journey-disc img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: filter 0.5s ease;
}

.pixa-journey-step.is-active .pixa-journey-disc {
    background: var(--pixa-grad);
}

.pixa-journey-step.is-active .pixa-journey-disc img {
    filter: brightness(0);
}

.pixa-journey-index {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
    font-variant-numeric: tabular-nums;
}

.pixa-journey-step h3 {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.pixa-journey-step p {
    margin: 0 0 16px;
    max-width: 44ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-steps-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pixa-steps-points li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.pixa-steps-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--pixa-grad);
}

/* the route (wide screens, with the script): the six steps as stations down the page, left and right in turn, with a
   winding path through their discs. The scroll draws the path's accent trail station by station, runs a traveller along
   it and lights each station as the traveller arrives; the station the traveller has reached last wears the ring
   (pixa-home.js). Natural scroll, no pin. The list stays in the document for assistive tech, visually tucked away. */
.pixa-process-section.is-route .pixa-journey-track {
    position: absolute;
    width: 1px;
    height: 1px;   /* taste-skill-ignore: the list is kept for assistive tech, visually hidden */
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pixa-route {
    position: relative;
    margin-top: clamp(24px, 4vh, 48px);
    padding: 120px 0 70px;   /* room for the Brief mark above the first station and the Delivery mark under the last */
}

.pixa-route-svg {   /* its own layer, so the trail's redraws never touch the page's big content layer (withdrawn away from the viewport, see the layers block) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    will-change: transform;
}

.pixa-route-base {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 2;
}

.pixa-route-seg {
    transition: none;   /* drawn by the script */
    fill: none;
    stroke: var(--pixa-accent);
    stroke-width: 2;
    stroke-linecap: round;
}

.pixa-route-steps {
    position: relative;
    display: grid;
    row-gap: clamp(56px, 12vh, 140px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pixa-route-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
    column-gap: 40px;   /* the copy keeps clear of the disc on either side */
    align-items: center;
}

.pixa-route-step .pixa-route-disc {
    grid-column: 2;
    grid-row: 1;
}

.pixa-route-step.is-left .pixa-route-copy {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}

.pixa-route-step.is-left .pixa-route-disc {
    justify-self: start;
}

.pixa-route-step.is-right .pixa-route-copy {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
}

.pixa-route-step.is-right .pixa-route-disc {
    justify-self: end;
}

.pixa-route-copy {
    max-width: 440px;
}

.pixa-route-disc {   /* a station: the step's icon on a disc; lit by the traveller, ringed while it is the latest */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--pixa-surface);
    transition: background-color 0.45s ease;
}

.pixa-route-disc::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    padding: 2px; /* taste-skill-ignore: the gradient ring the user asked for */
    background: linear-gradient(135deg, var(--pixa-accent) 0%, var(--pixa-accent-2) 45%, rgba(79, 172, 254, 0.22) 100%); /* taste-skill-ignore: the brand gradient ring the user asked for */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* taste-skill-ignore: a mask that keeps the ring only */
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* taste-skill-ignore: same mask, standard property */
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.pixa-route-disc img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: filter 0.45s ease;
}

.pixa-route-step.is-lit .pixa-route-disc {
    background: var(--pixa-grad);
}

.pixa-route-step.is-lit .pixa-route-disc img {
    filter: brightness(0);
}

.pixa-step-icon {   /* a step's line icon: drawn stroke by stroke by the script, complete without it */
    display: block;
    width: 30px;
    height: 30px;
    overflow: visible;
}

.pixa-journey-disc .pixa-step-icon {
    width: 24px;
    height: 24px;
}

.pixa-step-icon path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.45s ease;   /* the dash the script animates must not transition */
}

.pixa-step-icon .is-accent {
    stroke: var(--pixa-accent);
}

.pixa-step-icon .is-accent2 {
    stroke: var(--pixa-accent-2);
}

.pixa-route-step.is-lit .pixa-step-icon path,
.pixa-journey-step.is-active .pixa-step-icon path {
    stroke: var(--pixa-deep, #0A0D12);
}

.pixa-route-step.is-current .pixa-route-disc::before {
    opacity: 1;
}

.pixa-route-copy h3 {
    margin: 0 0 12px;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-transform: none;
}

.pixa-route-copy p {
    margin: 0 0 16px;
    max-width: 44ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-route-dot {   /* the traveller */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--pixa-grad);
    will-change: transform;
}

.pixa-route-end {   /* the two marks just off the ends of the path */
    position: absolute;
    z-index: 1;
    padding: 2px 6px;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: var(--pixa-ink-secondary);
    background: var(--pixa-ground);
}

.pixa-route,
.pixa-route-dot,
.pixa-route-copy > * {
    transition: none;   /* moved by the script; the template's blanket transition would trail it */
}

@media (max-width: 767px) {
    .pixa-journey-steps {
        gap: 36px;
    }
    .pixa-journey-disc {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
    }
    .pixa-journey-node {
        top: 18px;
    }
    .pixa-steps-points li {
        font-size: 14px;
    }
}

/* ==========================================================================
   Client feedback: six reviews as compact cards. By default a two-column grid; pixa-home.js turns the columns into loops
   that drift in opposite directions (after React Bits' Infinite Scroll), pause under the pointer and can be dragged.
   ========================================================================== */
.pixa-testimonials {
    padding: clamp(72px, 9vh, 110px) 0;
}

.pixa-quotes-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px clamp(40px, 6vw, 96px);
    align-items: center;
}

.pixa-quotes-lead {
    margin-bottom: 0;
}

.pixa-quotes-lead .pixa-section-title {
    margin-bottom: 16px;
}

.pixa-quotes-sub {
    max-width: 34ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-quotes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.pixa-quotes-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pixa-testimonial {
    padding: 24px;
    border-radius: 12px;
    background: var(--pixa-surface);
}

.pixa-testimonial:hover {
    background: var(--pixa-surface-hover);
}

.pixa-testimonial-quote {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
}

.pixa-testimonial-who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pixa-testimonial-who img {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
}

.pixa-testimonial-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.pixa-testimonial-role {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pixa-ink-muted);
}

/* the loops: a fixed-height window, the cards fade where they enter and leave */
.pixa-quotes.is-loop {
    position: relative;
    height: clamp(440px, 64vh, 620px);
    align-items: stretch;
}

.pixa-quotes.is-loop::before,
.pixa-quotes.is-loop::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 14%;
    pointer-events: none;
}

.pixa-quotes.is-loop::before {
    top: 0;
    background: linear-gradient(to bottom, var(--pixa-ground), rgba(14, 18, 24, 0));   /* taste-skill-ignore: the fade at the top of the loop, a static layer instead of a mask */
}

.pixa-quotes.is-loop::after {
    bottom: 0;
    background: linear-gradient(to top, var(--pixa-ground), rgba(14, 18, 24, 0));   /* taste-skill-ignore: the fade at the bottom of the loop */
}

.pixa-quotes.is-loop .pixa-quotes-col {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: grab;
}

.pixa-quotes.is-loop .pixa-quotes-col.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.pixa-quotes-track {
    display: flex;
    flex-direction: column;
    gap: 16px;
    will-change: transform;
}

@media (max-width: 991px) {
    .pixa-quotes-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-quotes {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-quotes.is-loop {
        height: clamp(380px, 56vh, 480px);
    }
}

/* ==========================================================================
   Closing call to action
   ========================================================================== */
.pixa-cta {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 92vh, 820px);
    padding: clamp(80px, 10vh, 120px) 0;
    text-align: center;
    background: var(--pixa-ground);
    overflow: hidden;
}

.pixa-cta > .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* the studio photo behind the words; pixa-reveal.js opens it through a circle from the centre as the section arrives */
.pixa-cta-art {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pixa-cta-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 40%;
    filter: brightness(0.6);
}

/* the copy sits on a glass panel over the photograph: a translucent deep tone with the photo blurred behind it */
.pixa-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(40px, 6vh, 72px) clamp(24px, 4.5vw, 72px);
    border-radius: 16px;
    background: rgba(14, 18, 24, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore: the glass edge the user asked for */
    -webkit-backdrop-filter: blur(8px); /* taste-skill-ignore: the one glass panel on the page, asked for by the user */
    backdrop-filter: blur(8px); /* taste-skill-ignore: same, standard property */
}

@media (max-width: 991px), (pointer: coarse) {
    .pixa-cta-inner {
        background: rgba(14, 18, 24, 0.84);   /* no live blur on phones and tablets: it costs frames there */
        -webkit-backdrop-filter: none; /* taste-skill-ignore: switching the blur off */
        backdrop-filter: none; /* taste-skill-ignore: switching the blur off */
    }
}

@media (max-width: 575px) {
    .pixa-cta-inner {
        padding: 32px 20px;
        border-radius: 12px;
    }
}

.pixa-cta-title {
    font-size: clamp(32px, 5vw, 76px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.pixa-cta-text {
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 52ch;
}

.pixa-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 36px;
    margin-top: 12px;
}

.pixa-magnetic {
    transition: background-color 0.45s ease, color 0.45s ease;   /* GSAP owns its transform (magnetic hover) */
}

.pixa-cta-mail {
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 700;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: transparent;
    text-underline-offset: 8px;
    transition: text-decoration-color 0.45s ease, color 0.45s ease;
    padding: 6px 0;
}

.pixa-cta-mail:hover {
    color: var(--pixa-accent);
    text-decoration-color: var(--pixa-accent);
}


/* ==========================================================================
   Footer: brand, two link columns and a hello block on a tone step, then the wordmark across the whole row. The wordmark's
   letters gain weight, a tint and a lift near the pointer (pixa-home.js, after React Bits' Text Pressure); with no pointer
   over the footer a slow sweep runs along the word instead.
   ========================================================================== */
.pixa-footer {
    background: var(--pixa-ground);   /* the same dark as every section above it (it was the deeper tone) */
    padding: 0;
    overflow: hidden;   /* the inner layer slides in from behind the page (curtain reveal, pixa-home.js) */
}

.pixa-footer-inner {
    padding: clamp(64px, 8vh, 96px) 0 0;
    will-change: transform;
}

.pixa-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 4fr);
    gap: 40px clamp(24px, 4vw, 64px);
}

.pixa-footer-logo {
    display: inline-flex;
    margin-bottom: 4px;
}

.pixa-footer-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
    margin: 20px 0 24px;
    max-width: 36ch;
}

/* socials: the mark and the name side by side, two to a row */
.pixa-footer ul.pixa-footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 12px 28px;
}

.pixa-footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--pixa-ink-secondary);
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-footer-social .pixa-icon {
    width: 16px;
    height: 16px;
    flex: none;
    color: #ffffff;
    transition: color 0.45s ease;
}

.pixa-footer-social a:hover,
.pixa-footer-social a:hover .pixa-icon {
    color: var(--pixa-accent);
}

/* the column labels recede, the links carry the weight */
.pixa-footer h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--pixa-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 20px;
}

.pixa-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* a link steps right and an accent square appears before it (the same mark the process points use) */
.pixa-footer-col a {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s ease;
}

.pixa-footer-col a::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: var(--pixa-grad);
    opacity: 0;
    transform: scale(0.6);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.pixa-footer-col a:hover,
.pixa-footer-col a:focus-visible {
    color: var(--pixa-accent);
    transform: translateX(14px);
}

.pixa-footer-col a:hover::before,
.pixa-footer-col a:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

/* the mail is the biggest thing in the row; its underline draws in from the left */
.pixa-footer-mail {
    position: relative;
    display: inline-block;
    padding-top: 8px;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: #ffffff;
    text-decoration: none;
    margin: 0 0 12px;
    padding-bottom: 8px;
    transition: color 0.45s ease;
}

.pixa-footer-mail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px; /* taste-skill-ignore: the link underline, as on .pixa-text-link */
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-footer-mail:hover,
.pixa-footer-mail:focus-visible {
    color: var(--pixa-accent);
}

.pixa-footer-mail:hover::after,
.pixa-footer-mail:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.pixa-footer-clock {
    font-size: 14px;
    line-height: 1.5;
    color: var(--pixa-ink-secondary);
    font-variant-numeric: tabular-nums;
    margin: 0 0 24px;
}

.pixa-footer-time {
    color: #ffffff;
    font-weight: 600;
}

/* the wordmark: eight letters spread across the row; the script sizes them so that, all bold, they just fill it */
.pixa-footer-word {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: clamp(72px, 10vh, 120px) 0 0;   /* room above for the extrusion, which rises 0.27em behind the letters */
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(44px, 15.5vw, 290px);
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: 0;
    color: #ffffff;
    white-space: nowrap;
    user-select: none;
}

.pixa-footer-letter {
    --bx: 0px;   /* the letter's left in the word (pixa-home.js): the one shine across the word shows its slice here */
    --vx: 0em;   /* the horizontal step of the letter's depth, toward the point above the middle of the word (pixa-home.js) */
    --zi: -1;   /* the depth's paint order: nearer the middle, nearer the top (pixa-home.js) */
    position: relative;
    display: inline-block;
    text-align: center;
}

.pixa-footer-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 0 24px;
    font-size: 13px;
    color: var(--pixa-ink-muted);
}

.pixa-footer-base p {
    margin: 0;
}

/* ==========================================================================
   Skip link (header.php): the first stop for a keyboard, out of sight until it has focus; it lands on the content
   wrapper, past the header and its menu.
   ========================================================================== */
.pixa-skip {
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 100001;
    padding: 12px 18px;
    background: #ffffff;
    color: #030406;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-300%);
    transition: transform 0.45s ease;
}

.pixa-skip:focus {
    color: #030406;
    transform: translateY(0);
}

#smooth-content:focus {
    outline: none;
}

/* ==========================================================================
   Loader (header.php + assets/js/pixa-loader.js): the six service words fly in from the sides in pairs, out of depth
   on one 3D stage, meet at the centre, bounce apart and break into pixels that build the logomark cell by cell; the
   real mark comes up through them, the wordmark rises under it, the ground breaks into pieces and both fly to their
   places in the header. A big counter sits top left, the tagline top right. Everything that moves is a transform or
   an opacity run as a Web Animation, and the pixels are one canvas painted by a worker, so none of it waits on the
   page's main thread. html.pixa-no-loader hides it.
   ========================================================================== */
.pixa-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: hidden;
    color: #ffffff;
    --pixa-loader-mark: clamp(132px, 36vw, 190px);   /* the mark: a good third of a phone's width, 190px on a desktop */
    --pixa-loader-word: clamp(164px, 44vw, 240px);
    --pixa-loader-pad: clamp(20px, 4vw, 48px);
}

.pixa-no-loader .pixa-loader {
    display: none;
}

.pixa-loader.is-leaving {   /* the plain lift, used only if the choreography script never attached */
    transform: translateY(-100%);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.pixa-loader__panel {
    position: absolute;
    inset: 0;
    display: flex;
}

.pixa-loader__panel i {   /* a curtain column: the page's own black, with its grain, so the loader and the page are one surface */
    position: relative;
    flex: none;
    width: calc(12.5% + 1px);   /* a pixel of overlap, so no seam shows between the columns */
    margin-right: -1px;
    height: 100%;
    background: var(--pixa-ground);
    will-change: transform;
}

.pixa-loader__panel i::after {   /* the grain rides each column, so it lifts away with the curtain */
    content: "";
    position: absolute;
    inset: 0;
    background: url('assets/img/noise.png') repeat 0 0 / 256px 256px;
    opacity: 0.05;
    pointer-events: none;
}

.pixa-loader__shards {   /* the ground in pieces, cut along the lanes and the horizon at the exit (pixa-loader.js) */
    position: absolute;
    inset: 0;
}

.pixa-loader__shard {
    position: absolute;
    inset: 0;
    background: var(--pixa-ground);
    will-change: transform, opacity;
}

.pixa-loader__shard::after {   /* the same grain, riding each piece */
    content: "";
    position: absolute;
    inset: 0;
    background: url('assets/img/noise.png') repeat 0 0 / 256px 256px;
    opacity: 0.05;
    pointer-events: none;
}

.pixa-loader__geo,
.pixa-loader__ui {
    position: absolute;
    inset: 0;
}

.pixa-loader__mark {   /* the real mark, in the centre: the pixel grid is laid on its box */
    position: absolute;
    left: calc(50% - var(--pixa-loader-mark) / 2);
    top: calc(50% - var(--pixa-loader-mark) / 2);
    width: var(--pixa-loader-mark);
    height: var(--pixa-loader-mark);
    will-change: transform;
}

.pixa-loader__px {   /* the pixels: one 2D canvas over the whole loader, painted by a worker (pixa-loader.js sizes its buffer to the screen) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.pixa-loader__words {   /* the stage the service words fly on: one perspective, so they all come out of the same depth */
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.pixa-loader__fly {   /* a service word: it flies in from the side, meets its pair at the centre, bounces, and breaks into pixels (pixa-loader.js centres it by margins) */
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(26px, 8.5vw, 72px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffffff;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.pixa-loader__logo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    will-change: opacity;
    transition: none;
}

.pixa-loader__word {   /* the wordmark rises beneath the mark, then flies to its place in the header */
    position: absolute;
    left: calc(50% - var(--pixa-loader-word) / 2);
    top: calc(50% + var(--pixa-loader-mark) / 2 + 20px);
    display: block;
    width: var(--pixa-loader-word);
    height: auto;
    opacity: 0;
    will-change: transform, opacity;
    transition: none;
}

.pixa-loader__count {
    position: absolute;
    left: var(--pixa-loader-pad);
    top: calc(var(--pixa-loader-pad) - 0.06em);
    display: flex;
    align-items: baseline;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(56px, 9vw, 128px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.pixa-loader__col {   /* a rolling digit: a strip of the ten figures, one row showing, moved by a transform */
    display: inline-block;
    height: 0.9em;
    overflow: hidden;
    vertical-align: top;
}

.pixa-loader__col b {
    display: block;
    font-weight: inherit;
    will-change: transform;
}

.pixa-loader__col i {
    display: block;
    height: 0.9em;
    font-style: normal;
}

.pixa-loader__pct {
    position: relative;
    top: -0.1em;   /* the clipped columns sit on their bottom edge, the sign stays on the figures' baseline */
    margin-left: 0.08em;
    font-size: 0.3em;
    letter-spacing: 0;
    color: var(--pixa-ink-secondary);
}

.pixa-loader__tag {
    position: absolute;
    right: var(--pixa-loader-pad);
    top: calc(var(--pixa-loader-pad) + 4px);
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pixa-ink-secondary);
}

.pixa-loader__lanes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(18px, 3vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pixa-loader__lanes li {   /* each label stands under the foot of its lane; JS sets left and keeps the lane's foot 16px above it */
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;   /* the item only measures: the label is drawn as letter outlines in the SVG above it */
    opacity: 0;
}

@media (max-width: 719px) {
    .pixa-loader__lanes {
        display: none;
    }
}

/* ==========================================================================
   Studio philosophy (the old theme's team area, template-parts/section-deck.php). The template's own sheets style it;
   two asks sit on top: the statements smaller than the template's 100px, and the icon above them instead of between
   the two halves. The hover zoom is eased back, since the template's 2x would run over the statement from up there.
   ========================================================================== */
.team-area .team__member .member-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px 0;
}

.team-area .team__member .member-name .member-image {
    order: -1;
    margin: 0 0 6px;
}

.team-area .team__member .member-name .first-name,
.team-area .team__member .member-name .last-name {
    font-size: clamp(26px, 2.6vw, 48px);
}

.team-area .team__member:hover .member-image {
    transform: scale(1.15);
}

.team-area .member-details-link {   /* the home page's arrow link in place of the template's round button */
    flex: none;
    white-space: nowrap;
}

/* The rules between the rows are real elements here, so each can draw across as its row arrives (pixa-home.js). */
.team-area .team__wrapper {
    position: relative;
    border-top: 0;
}

.team-area .team__member {
    border-bottom: 0;
}

.team-area .team-line,
.team-area .member-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;   /* taste-skill-ignore: the old section's own row rule, now drawn in on arrival */
    background: #575757;
    transform-origin: 0 50%;
}

.team-area .team-line {
    top: 0;
}

.team-area .member-line {
    bottom: 0;
}

/* GSAP moves these on arrival; the template's blanket 0.3s transition would make a refresh re-read them half-faded */
.team-area .team-line,
.team-area .member-line,
.team-area .member-image img {
    transition: none;
}

.team-area .team__member .member-name .first-name,
.team-area .team__member .member-name .last-name {
    transition: color 0.45s ease;   /* the hover colour still eases; opacity and transform are GSAP's */
}

/* ==========================================================================
   Work: the illustrations sheet (illustrations_template.php). A grid of 4:3 frames on the surface tone, each piece
   contained with air around it (icons and drawings of any shape sit the same way); a hover eases the piece up a little;
   a click opens it full size in the lightbox (main.js, .popup-image).
   ========================================================================== */
.pixa-sheet {
    background: var(--pixa-ground);
    padding: 0 0 clamp(72px, 10vh, 110px);
}

.pixa-sheet-count {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--pixa-ink-secondary);
}

.pixa-sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pixa-sheet-link {
    display: block;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.pixa-sheet-frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--pixa-surface);
}

.pixa-sheet-frame img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 9%;
    box-sizing: border-box;
    object-fit: contain;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.pixa-sheet-link:hover .pixa-sheet-frame img,
.pixa-sheet-link:focus-visible .pixa-sheet-frame img {
    transform: scale(1.05);
}

.pixa-sheet-link:focus-visible .pixa-sheet-frame {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 3px;
}

.pixa-sheet-label {
    display: block;
    padding: 12px 2px 0;
    font-size: 14px;
    color: var(--pixa-ink-secondary);
}

.pixa-sheet-empty {
    color: var(--pixa-ink-secondary);
}

@media (max-width: 575px) {
    .pixa-sheet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .pixa-sheet-label {
        font-size: 13px;
    }
}

/* Poppins ExtraBold, Devanagari glyphs only (Open Font License), for a title word set in that script */
@font-face {
    font-family: 'Pixa Devanagari';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/poppins-devanagari-800.woff2') format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

/* ==========================================================================
   Black, with a texture behind the content, on every page. The ground token is near-black site-wide; the body is a
   stacking context whose ::before is one fixed tile layer at the bottom of the order: the same film grain on every page. The sections that painted the ground or the deep tone go see-through so the texture shows
   between the content and never over it; the menu, the loader, the cards and the small masks keep their fills. The list of
   see-through sections is the last rule in this file, so it wins over each section's own fill.
   ========================================================================== */
body {
    --pixa-ground: #030406;   /* the user's swatch */
    position: relative;
    isolation: isolate;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url('assets/img/noise.png') repeat 0 0 / 256px 256px;
    opacity: 0.05;   /* a little grain, just enough that the black is not flat */
    pointer-events: none;
}

.pixa-smenu__bar.is-scrolled {   /* the scrolled bar matches the black page */
    background: rgba(3, 4, 6, 0.9);
}

/* ==========================================================================
   Page heroes in the services hero's family (template-parts/hero-art.php, inc/hero-art.php): a big two-word title whose
   letters rise, with line-art hooks on its letters and a drawing behind it, every stroke drawn by the script; then the
   label, the intro, a button and any extra. Centred by default; the contact page uses the left-aligned title block
   inside its own two-column section.
   ========================================================================== */
.pixa-ha-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: start;
    min-height: clamp(560px, 86vh, 860px);
    padding: clamp(176px, 24vh, 250px) 0 clamp(88px, 12vh, 140px);
    overflow: hidden;
    background: var(--pixa-deep, #0A0D12);
}

.pixa-ha-photo {   /* a picture behind the hero, darkened and drained a little so the type stays first */
    position: absolute;
    top: -8%;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: 50% 35%;
    filter: grayscale(1) brightness(0.3) contrast(1.04);
    pointer-events: none;
}

.pixa-ha-shade {   /* a plain dark veil over the picture */
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(10, 13, 18, 0.55);
    pointer-events: none;
}

.pixa-ha-bg {   /* the drawing behind, covering the hero */
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pixa-ha-bg path,
.pixa-ha-hook path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.pixa-ha-bg path {
    stroke-width: 2;
}

.pixa-ha-bg .is-faint {
    stroke: rgba(255, 255, 255, 0.1);
}

.pixa-ha-bg .is-fainter {
    stroke: rgba(255, 255, 255, 0.05);
}

.pixa-ha-bg .is-accent,
.pixa-ha-hook .is-accent {
    stroke: var(--pixa-accent);
}

.pixa-ha-bg .is-accent2,
.pixa-ha-hook .is-accent2 {
    stroke: var(--pixa-accent-2);
}

.pixa-ha-bg .is-soft,
.pixa-ha-hook .is-soft {
    opacity: 0.45;
}

.pixa-ha-bg .is-dot {
    stroke-width: 6;
}

.pixa-ha-bg .is-tick {
    stroke-width: 1.5;
}

.pixa-ha-bg .is-comet {
    stroke-width: 2.5;
}

.pixa-ha-bg .is-grad {
    stroke: url(#pixa-ha-grad);
    stroke-width: 4;
}

.pixa-ha-bg .is-echo {
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1.5;
}

.pixa-ha-bg .is-quote {
    stroke-width: 3;
}

.pixa-ha-bg .is-reply {
    stroke-width: 2;
}

.pixa-ha-hook .is-dash {   /* scales with its box, unlike the other hook strokes, so the two lines never merge on phones */
    stroke: url(#pixa-ha-dash);
    stroke-width: 22;
    vector-effect: none;
}

.pixa-ha-hero--we .pixa-ha-word + .pixa-ha-word {   /* room for the dash between the two words */
    margin-left: 0.5em;
}

.pixa-ha-hero--folio .pixa-ha-title {   /* PORT and FOLIO read as one word in two tones */
    word-spacing: -0.28em;
}

.pixa-ha-in--hello .pixa-ha-word + .pixa-ha-word {   /* room for the bubble's left edge between Say and HELLO */
    margin-left: 0.3em;
}

.pixa-ha-bg .is-sweep {
    stroke-width: 2.5;
}

.pixa-ha-hook .is-faint {
    stroke: rgba(255, 255, 255, 0.3);
}

.pixa-ha-hook .is-thick {
    stroke-width: 5;
}

.pixa-ha-in {
    position: relative;
    z-index: 2;
    text-align: center;
}

.pixa-ha--left .pixa-ha-in {
    text-align: left;
}

.pixa-ha-label {
    margin-bottom: 18px;
}

.pixa-ha-title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: clamp(48px, 9.4vw, 136px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #ffffff;
}

.pixa-ha--left .pixa-ha-title {
    font-size: clamp(44px, 6.6vw, 96px);
}

.pixa-ha-word {   /* clips the rising letters; the padding keeps ascenders and descenders inside the clip */
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0.08em 0.06em 0.14em;
    margin: -0.08em -0.06em -0.14em;
}

.pixa-ha-t,
.pixa-ha-ch {
    display: inline-block;
}

.pixa-ha-accent .pixa-ha-ch,
.pixa-ha-accent[data-nosplit] {   /* an unsplit word carries the gradient whole */
    background-image: linear-gradient(90deg, var(--pixa-accent-2), var(--pixa-accent)); /* taste-skill-ignore: the two-tone word of the user's hero artwork */
    -webkit-background-clip: text; /* taste-skill-ignore: the two-tone word of the user's hero artwork */
    background-clip: text; /* taste-skill-ignore: same, standard property */
    color: transparent;
}

.pixa-ha-word.is-joined {   /* the second half of a word set in two parts: the gap a space would leave, without the space */
    margin-left: 0.25em;
}

.pixa-ha-word.is-script {   /* a word in another script: room above for its head marks */
    padding-top: 0.26em;
    margin-top: -0.26em;
}

.pixa-ha-t[lang="hi"] {
    font-family: 'Pixa Devanagari', var(--tpl-ff-heading, inherit), sans-serif;
    font-weight: 800;
}

.pixa-ha-mark {
    display: block;
    width: clamp(120px, 14vw, 200px);
    height: auto;
    margin: 20px auto 0;
}

.pixa-ha--left .pixa-ha-mark {
    margin-left: 0;
}

.pixa-ha-hook {   /* placed on its letter or word by the script; hidden until then */
    position: absolute;
    z-index: 1;
    display: none;
    pointer-events: none;
}

.pixa-ha-hook.is-placed {
    display: block;
}

.pixa-ha-hook svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    will-change: transform;
}

.pixa-ha-intro {
    max-width: 58ch;
    margin: 28px auto 0;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-ha--left .pixa-ha-intro {
    margin-left: 0;
    max-width: 44ch;
}

.pixa-ha-cta {
    margin-top: 26px;
}

.pixa-ha-hero--route .pixa-ha-intro {   /* the stations line sits under WORK: the intro clears it */
    margin-top: 52px;
}

.pixa-ha-hero--route .pixa-ha-cta {
    margin-top: 32px;
}

.pixa-ha-extra {
    margin-top: 32px;
}

.pixa-about-open--cover {   /* the About cover photo keeps its section, without the text that moved into the hero */
    padding-top: 0;
}

.pixa-contact-hero.pixa-ha-host {   /* the contact section carries the drawing behind its two columns */
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.pixa-contact-hero.pixa-ha-host > .container {
    position: relative;
    z-index: 2;
}

.pixa-ha-photo,
.pixa-ha-bg,
.pixa-ha-bg path,
.pixa-ha-hook,
.pixa-ha-hook svg,
.pixa-ha-hook path,
.pixa-ha-ch,
.pixa-ha-in,
.pixa-ha-label,
.pixa-ha-mark,
.pixa-ha-intro,
.pixa-ha-extra {
    transition: none;   /* moved by the script; the template's blanket transition would trail it */
}

@media (max-width: 767px) {
    .pixa-ha-hero {
        min-height: 0;
        padding: 150px 0 72px;
    }
    .pixa-ha-title {
        font-size: clamp(44px, 14vw, 64px);
    }
    .pixa-ha--left .pixa-ha-title {
        font-size: clamp(40px, 12vw, 56px);
    }
    .pixa-ha-hero--folio .pixa-ha-title {   /* one long word: smaller, so the pen and the sketchbook have room beside it */
        font-size: clamp(34px, 11.2vw, 52px);
    }
}

/* ==========================================================================
   Services hero (template-parts/hero-services.php), after the studio's own artwork: "Our SERVICES" with gears on the O,
   the V, the wordmark under it, a gradient ribbon drawn across the top (its own box under the header), two big faded
   gears in the corners. The script splits the letters, draws every
   stroke, places the gears and spins them slowly. The title starts below the ribbon's box on every width.
   ========================================================================== */
.pixa-sv-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: start;
    min-height: clamp(640px, 94vh, 940px);
    padding: clamp(300px, 40vh, 390px) 0 clamp(140px, 18vh, 200px);
    overflow: hidden;
    background: var(--pixa-deep, #0A0D12);
}

.pixa-sv-ribbon {   /* the gradient ribbon: a box from under the header down to a third of the hero */
    position: absolute;
    top: clamp(72px, 9vh, 96px);
    left: 0;
    width: 100%;
    height: 32%;
    z-index: 0;
    pointer-events: none;
}

.pixa-sv-ribbon path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pixa-sv-band {
    stroke: url(#pixa-sv-grad);
    stroke-width: 96;
}

.pixa-sv-band-line {   /* the dark hairline that runs inside the ribbon */
    stroke: var(--pixa-deep, #0A0D12);
    stroke-width: 3;
}

.pixa-sv-corner {   /* the big faded gears, half off the canvas */
    position: absolute;
    z-index: 0;
    bottom: -14%;
    width: clamp(240px, 30vw, 480px);
    aspect-ratio: 1;
    pointer-events: none;
}

.pixa-sv-corner.is-left {
    left: -9%;
}

.pixa-sv-corner.is-right {
    right: -9%;
}

.pixa-sv-g {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    will-change: transform;
}

.pixa-sv-g path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.pixa-sv-g.is-corner path {
    stroke: rgba(255, 255, 255, 0.14);
}

.pixa-sv-g.is-v .pixa-sv-g-ring {
    stroke: var(--pixa-accent-2);
}

.pixa-sv-g .pixa-sv-g-arc {
    stroke: var(--pixa-accent);
}

.pixa-sv-in {
    position: relative;
    z-index: 2;
    text-align: center;
}

.pixa-sv-title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: clamp(48px, 9.4vw, 136px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #ffffff;
}

.pixa-sv-word {   /* clips the rising letters; the padding keeps ascenders and descenders inside the clip */
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0.08em 0.06em 0.14em;
    margin: -0.08em -0.06em -0.14em;
}

.pixa-sv-t {
    display: inline-block;
}

.pixa-sv-ch {
    display: inline-block;
}

.pixa-sv-ices .pixa-sv-ch {
    background-image: linear-gradient(90deg, var(--pixa-accent-2), var(--pixa-accent)); /* taste-skill-ignore: the two-tone word in the user's own artwork */
    -webkit-background-clip: text; /* taste-skill-ignore: the two-tone word in the user's own artwork */
    background-clip: text; /* taste-skill-ignore: same, standard property */
    color: transparent;
}

.pixa-sv-gear {   /* placed on its letter by the script; hidden until then */
    position: absolute;
    z-index: 1;
    display: none;
    pointer-events: none;
}

.pixa-sv-gear.is-placed {
    display: block;
}

.pixa-sv-mark {
    display: block;
    width: clamp(120px, 14vw, 200px);
    height: auto;
    margin: 22px auto 0;
}

.pixa-sv-intro {
    max-width: 58ch;
    margin: 28px auto 0;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-sv-cta {
    margin-top: 26px;
}

.pixa-sv-ribbon,
.pixa-sv-ribbon path,
.pixa-sv-corner,
.pixa-sv-g,
.pixa-sv-g path,
.pixa-sv-gear,
.pixa-sv-ch,
.pixa-sv-in,
.pixa-sv-mark,
.pixa-sv-intro {
    transition: none;   /* moved by the script; the template's blanket transition would trail it */
}

@media (max-width: 767px) {
    .pixa-sv-hero {
        min-height: 0;
        padding: 268px 0 150px;
    }
    .pixa-sv-ribbon {
        top: 56px;
        height: 210px;
    }
    .pixa-sv-title {
        font-size: clamp(44px, 14vw, 64px);
    }
    .pixa-sv-corner {
        width: 220px;
        bottom: -10%;
    }
    .pixa-sv-corner.is-left {
        left: -22%;
    }
    .pixa-sv-corner.is-right {
        right: -22%;
    }
    .pixa-sv-band {
        stroke-width: 72;
    }
}

/* ==========================================================================
   How we work, the page (process_template.php). One continuous line: the hero, then six chapters, the copy on one side and a drawing board on the other, the sides alternating. Each board is a
   line illustration drawn stroke by stroke under a travelling pen as the page scrolls; on wide screens a thread runs
   from the strip into the first board and on from board to board. The open chapter's outlined numeral fills brand blue.
   ========================================================================== */
.pixa-way {
    position: relative;
}

.pixa-way-wire {   /* the thread between the boards, drawn by the script; it lies over the page backgrounds */
    position: absolute;
    inset: 0;
    z-index: 3;   /* above the template's sections (z-index 2) */
    display: none;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.pixa-way-wire-seg {
    fill: none;
    stroke: var(--pixa-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.8;
}

.pixa-way-chapters {
    background: var(--pixa-ground);
}

.pixa-way-chapter {
    padding: clamp(80px, 12vh, 140px) 0;
}

.pixa-way-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.pixa-way-chapter.is-flip .pixa-way-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.pixa-way-chapter.is-flip .pixa-way-copy {
    order: 2;
}

.pixa-way-copy.pixa-section-head {
    margin-bottom: 0;
}

.pixa-way-num {   /* outlined until its chapter is the open one, then filled */
    display: block;
    margin-bottom: 6px;
    font-size: clamp(72px, 7.5vw, 120px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
    transition: color 0.6s ease, -webkit-text-stroke-color 0.6s ease;
}

.pixa-way-chapter.is-active .pixa-way-num {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    width: fit-content;
    -webkit-text-stroke-color: var(--pixa-accent);
}

.pixa-way-title {
    margin-bottom: 18px;
    font-size: clamp(32px, 3.6vw, 56px);
}

.pixa-way-lead {
    max-width: 44ch;
    margin: 0 0 22px;
    font-size: clamp(17px, 1.3vw, 20px);
}

.pixa-way-points {
    margin: 0 0 26px;
}

.pixa-way-points li {
    font-size: 16px;
}

.pixa-way-board {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 1;
}

.pixa-way-draw {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pixa-way-draw path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pixa-way-draw .is-c {   /* construction lines */
    stroke: rgba(255, 255, 255, 0.26);
    stroke-width: 1;
}

.pixa-way-draw .is-m {   /* the object */
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 2;
}

.pixa-way-draw .is-m.is-thick {
    stroke-width: 3.5;
}

.pixa-way-draw .is-a {   /* the accent */
    stroke: var(--pixa-accent);
    stroke-width: 2.2;
}

.pixa-way-pen {
    opacity: 0;
}

.pixa-way-pen-dot {
    fill: var(--pixa-accent);
}

.pixa-way-pen-halo {
    fill: none;
    stroke: var(--pixa-accent);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: pixa-way-halo 1.4s ease-out infinite;
}

@keyframes pixa-way-halo {
    from {
        transform: scale(0.5);
        opacity: 0.8;
    }
    to {
        transform: scale(1.7);
        opacity: 0;
    }
}

.pixa-way-points li,
.pixa-way-draw,
.pixa-way-draw path,
.pixa-way-pen,
.pixa-way-wire-seg {
    transition: none;   /* moved by the script; the template's blanket transition would trail it */
}

@media (min-width: 992px) {
    .pixa-way-wire {
        display: block;
    }
}

@media (max-width: 991px) {
    .pixa-way-grid,
    .pixa-way-chapter.is-flip .pixa-way-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .pixa-way-chapter.is-flip .pixa-way-copy {
        order: 0;
    }
    .pixa-way-board {
        order: -1;
        max-width: 340px;
    }
    .pixa-way-num {
        font-size: 64px;
    }
}

@media (max-width: 575px) {
    .pixa-way-chapter {
        padding: 56px 0;
    }
    .pixa-way-board {
        max-width: 300px;
    }
}

/* ==========================================================================
   Services page: what we make (template-parts/section-lanes.php). An index of five hover cards, edge to edge under the
   head: the lane under the pointer (or in focus) opens to twice the width, its artwork comes up to full strength and its
   first three scope lines fold open. Below, one editorial panel per lane: the artwork in a frame that drifts a little
   slower than the page (pixa-pages.js), the lead, the account and the full scope in two columns.
   ========================================================================== */
.pixa-lanes {
    padding: clamp(24px, 4vh, 48px) 0 clamp(48px, 7vh, 96px);
    background: var(--pixa-ground);
}

.pixa-lanes-head,
.pixa-tenets-head,
.pixa-milestones-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px clamp(40px, 6vw, 110px);
    align-items: end;
    margin-bottom: clamp(28px, 4vh, 48px);
}

.pixa-lanes-head .pixa-section-intro,
.pixa-tenets-head .pixa-section-intro,
.pixa-milestones-head .pixa-section-intro {
    max-width: 44ch;
    margin: 0 0 8px;
}

.pixa-lane-index {
    display: flex;
    gap: 12px;
    height: clamp(380px, 50vh, 540px);
}

.pixa-lane-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pixa-surface);
    color: #ffffff;
    text-decoration: none;
    transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-lane-index:hover .pixa-lane-card,
.pixa-lane-index:focus-within .pixa-lane-card {
    flex-grow: 0.8;   /* the others step back a little */
}

.pixa-lane-index .pixa-lane-card:hover,
.pixa-lane-index .pixa-lane-card:focus-visible {
    flex-grow: 2.6;
    outline: none;
}

.pixa-lane-card-art {
    position: absolute;
    inset: 0;
    display: block;
}

.pixa-lane-card-art img {   /* one fixed size whatever the card's width: a card opening is a clip change, never a repaint of a big picture */
    position: absolute;
    left: 50%;
    top: 0;
    display: block;
    width: 640px;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    opacity: 0.5;
    transform: translateX(-50%) scale(1.02);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.pixa-lane-card:hover .pixa-lane-card-art img,
.pixa-lane-card:focus-visible .pixa-lane-card-art img {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.06);
}

.pixa-lane-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 24px;
    background: rgba(10, 13, 18, 0.8);
}

.pixa-lane-card-top {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 14px;
    font-weight: 600;
    color: var(--pixa-ink-muted);
}

.pixa-lane-num {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.pixa-lane-card-name {
    display: block;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.pixa-lane-card-more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.pixa-lane-card:hover .pixa-lane-card-more,
.pixa-lane-card:focus-visible .pixa-lane-card-more {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: 0.08s;
}

.pixa-lane-card-more-in {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    width: min(100%, 360px);
}

.pixa-lane-card-text {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pixa-ink-secondary);
}

.pixa-lane-card-scope {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pixa-lane-card-scope span {
    position: relative;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

.pixa-lane-card-scope span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--pixa-grad);
}

.pixa-lane-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

/* the panels */
.pixa-lane-panels {
    display: flex;
    flex-direction: column;
    gap: clamp(72px, 10vh, 128px);
    margin-top: clamp(72px, 10vh, 120px);
}

.pixa-lane-panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px clamp(40px, 6vw, 110px);
    align-items: center;
    scroll-margin-top: 96px;
}

.pixa-lane-panel.is-flip .pixa-lane-art {
    order: 2;
}

.pixa-lane-art {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pixa-ground);
}

.pixa-lane-art-in,
.pixa-culture-frame-in {   /* the hover scale lives here; GSAP owns the picture itself (reveal, drift) */
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-lane-panel:hover .pixa-lane-art-in {
    transform: scale(1.03);
}

.pixa-lane-art img,
.pixa-culture-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixa-lane-art[data-parallax] img,
.pixa-culture-frame[data-parallax] img {   /* room above and below for the drift */
    height: 120%;
    margin-top: -10%;
}

.pixa-lane-copy {
    max-width: 620px;
    margin-bottom: 0;
}

.pixa-lane-title {
    margin: 0 0 16px;
    font-size: clamp(32px, 3.6vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: none;
}

.pixa-lane-lead {
    margin: 0 0 14px;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

.pixa-lane-body {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--pixa-ink-secondary);
}

.pixa-lane-scope {
    margin: 0 0 22px;
}

.pixa-lane-scope-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}

.pixa-lane-scope-list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.pixa-lane-scope-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--pixa-grad);
}

@media (max-width: 991px) {
    .pixa-lanes-head,
    .pixa-tenets-head,
    .pixa-milestones-head {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    .pixa-lane-index {   /* a column of cards, each open: the picture, the name and the link */
        height: auto;
        flex-direction: column;
        gap: 12px;
    }
    .pixa-lane-card,
    .pixa-lane-index:hover .pixa-lane-card,
    .pixa-lane-index .pixa-lane-card:hover {
        flex: none;
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    .pixa-lane-card-art img {
        opacity: 0.7;
    }
    .pixa-lane-card-more {
        grid-template-rows: 1fr;
        opacity: 1;
    }
    .pixa-lane-card-text,
    .pixa-lane-card-scope {   /* the full scope sits in the lane's own section below */
        display: none;
    }
    .pixa-lane-panel {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-lane-panel.is-flip .pixa-lane-art {
        order: 0;
    }
    .pixa-lane-art {
        aspect-ratio: 4 / 3;
    }
    .pixa-lane-scope-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   About page: one long read (about_template.php). An opening statement across the full width with the studio in brief
   under it, a full-width photograph, then an article: a chapter rail on the left that pins while the article scrolls
   (pixa-pages.js) and lights the chapter in view, and on the right the story, a pull statement, offset frames, the four
   working principles as cards, the four beliefs with big numerals, a vertical timeline that fills as it arrives, and a
   mosaic of pictures. The numbers and the call to action are the shared sections.
   ========================================================================== */
.pixa-about-open {
    padding: clamp(136px, 20vh, 196px) 0 0;
    background: var(--pixa-ground);
}

.pixa-about-open-title {
    max-width: 17ch;   /* two lines: 'We draw, animate / and build brands.' */
    margin: 0 0 clamp(32px, 5vh, 56px);
    font-size: clamp(44px, 7.2vw, 112px);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: #ffffff;
    text-transform: none;
}

.pixa-about-open-row {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 32px clamp(40px, 6vw, 110px);
    align-items: end;
    padding-bottom: clamp(40px, 6vh, 72px);
}

.pixa-about-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px clamp(28px, 4vw, 64px);
}

.pixa-about-meta li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pixa-ink-muted);
}

.pixa-about-meta-num {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(30px, 2.8vw, 44px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.pixa-about-open-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: 48ch;
}

.pixa-about-open-side .pixa-section-intro {
    margin: 0;
    font-size: clamp(16px, 1.25vw, 19px);
}

.pixa-about-cover {
    position: relative;
    margin: 0;
    height: clamp(360px, 62vh, 680px);
    overflow: hidden;
    background: var(--pixa-surface);
}

.pixa-about-cover-in {
    display: block;
    width: 100%;
    height: 100%;
}

.pixa-about-cover img {
    display: block;
    width: 100%;
    height: 120%;
    margin-top: -10%;
    object-fit: cover;
    object-position: 50% 35%;
}

.pixa-article {
    padding: clamp(72px, 9vh, 120px) 0 clamp(40px, 5vh, 64px);
    background: var(--pixa-deep);
}

.pixa-article-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px clamp(48px, 7vw, 120px);
    align-items: start;
}

.pixa-chapters ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pixa-chapters a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 15px;
    font-weight: 600;
    color: var(--pixa-ink-muted);
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-chapters a .pixa-lane-num {
    color: var(--pixa-ink-muted);
    transition: color 0.45s ease;
}

.pixa-chapters a:hover,
.pixa-chapters a:focus-visible,
.pixa-chapters a.is-active {
    color: #ffffff;
}

.pixa-chapters a:hover .pixa-lane-num,
.pixa-chapters a.is-active .pixa-lane-num {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-article-body {
    max-width: 1040px;
}

.pixa-chapter {
    padding: 0 0 clamp(64px, 9vh, 112px);
    scroll-margin-top: 110px;
}

.pixa-chapter-head {
    margin-bottom: clamp(24px, 3.5vh, 40px);
}

.pixa-chapter-head .pixa-label {
    margin-bottom: 14px;
}

.pixa-chapter-title {
    max-width: 22ch;
    font-size: clamp(28px, 3vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-transform: none;
}

.pixa-chapter-copy {
    max-width: 62ch;
}

.pixa-chapter-copy p {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--pixa-ink-secondary);
}

.pixa-story-first {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(18px, 1.45vw, 22px) !important;
    font-weight: 600;
    line-height: 1.4 !important;
    color: #ffffff !important;
}

.pixa-chapter-intro {
    max-width: 58ch;
    margin: -8px 0 28px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--pixa-ink-secondary);
}

.pixa-pull {   /* a line of the story set large, the way a magazine lifts one */
    max-width: 22ch;
    margin: clamp(28px, 4vh, 48px) 0;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(26px, 2.9vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #ffffff;
}

.pixa-pull span {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-pull-mark {   /* the accent words carry a hand-drawn underline, drawn by the script as the line comes into view */
    position: relative;
    display: inline-block;
}

.pixa-pull-line {
    position: absolute;
    left: -1%;
    bottom: -0.1em;
    width: 102%;
    height: 0.26em;
    overflow: visible;
    pointer-events: none;
}

.pixa-pull-line path {
    fill: none;
    stroke: url(#pixa-grad-ico);
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* the story: the copy beside a sticky studio card (a photograph and the facts) */
.pixa-chapter-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px clamp(32px, 4vw, 64px);
    align-items: start;
}

.pixa-chapter-aside {
    position: sticky;
    top: 120px;
}

.pixa-aside-frame {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pixa-surface);
}

.pixa-aside-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixa-aside-facts {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.pixa-aside-fact {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
}

.pixa-aside-fact::before {   /* the rule between the facts */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;   /* taste-skill-ignore: the rule between facts, the site's own rule weight */
    background: rgba(255, 255, 255, 0.12);
}

.pixa-aside-fact:first-child::before {
    display: none;
}

.pixa-aside-fact b {
    flex: none;
    min-width: 3.2em;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.pixa-aside-fact span {
    font-size: 14px;
    line-height: 1.4;
    color: var(--pixa-ink-secondary);
}

.pixa-chapter-frames,
.pixa-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pixa-frame {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pixa-surface);
}

.pixa-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixa-chapter-frames .pixa-frame:nth-child(2) {
    margin-top: 48px;   /* the second frame sits a step lower, as on a contact sheet */
}

.pixa-mosaic .pixa-frame {
    aspect-ratio: 4 / 3;
}

.pixa-mosaic .pixa-frame:first-child {
    grid-row: 1 / 3;
    aspect-ratio: auto;
}

.pixa-principles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.pixa-principle {   /* a card: a faint number in the corner, a gradient bar that grows along the top under the pointer */
    position: relative;
    padding: 30px 28px 28px;
    background: var(--pixa-surface);
    overflow: hidden;
    transition: background-color 0.45s ease;
}

.pixa-principle:hover {
    background: var(--pixa-surface-hover);
}

.pixa-principle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;   /* taste-skill-ignore: the bar that grows along the card's top edge */
    background: var(--pixa-grad);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.pixa-principle:hover::before {
    transform: scaleX(1);
}

.pixa-principle-num {
    position: absolute;
    right: 22px;
    top: 14px;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.08);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.pixa-principle h3 {
    max-width: 20ch;
    padding-right: 64px;   /* clear of the faint number in the corner */
}

.pixa-principle h3,
.pixa-belief h3,
.pixa-milestone h3 {
    margin: 0 0 8px;
    font-size: clamp(19px, 1.5vw, 23px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-transform: none;   /* sentence case, not the template's capitalised h3 */
    color: #ffffff;
}

.pixa-principle p,
.pixa-belief p,
.pixa-milestone p {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--pixa-ink-secondary);
}

.pixa-beliefs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.pixa-belief {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: clamp(18px, 2.2vw, 28px) 0;
}

.pixa-belief-num {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(40px, 3.8vw, 64px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.16);
    font-variant-numeric: tabular-nums;
}

.pixa-belief p {
    max-width: 54ch;
    margin-bottom: 12px;
}

.pixa-timeline {
    --p: 0;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 32px;
    display: grid;
    gap: 28px;
}

.pixa-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 2px;   /* taste-skill-ignore: the timeline's own track, which the accent line fills along */
    background: var(--pixa-surface-hover);
}

.pixa-timeline-fill {
    position: absolute;
    left: 5px;
    top: 4px;
    width: 2px;   /* taste-skill-ignore: the filled part of the track */
    height: calc(100% - 8px);
    background: var(--pixa-grad);
    transform: scaleY(var(--p));
    transform-origin: 50% 0;
}

.pixa-milestone {
    position: relative;
}

.pixa-milestone::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pixa-deep);
    outline: 2px solid var(--pixa-accent);
    outline-offset: 0;
}

.pixa-milestone.is-in::before {   /* a station lights as it arrives */
    background: var(--pixa-accent-2);
}

.pixa-milestone-when {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

@media (min-width: 992px) {   /* the milestones as a line across, its fill running with the scroll, a station under each year */
    .pixa-timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 28px;
        padding: 40px 0 0;
    }
    .pixa-timeline::before {
        left: 6px;
        right: 6px;
        top: 5px;
        bottom: auto;
        width: auto;
        height: 2px;   /* taste-skill-ignore: the timeline's own track, which the accent line fills along */
    }
    .pixa-timeline-fill {
        left: 6px;
        top: 5px;
        width: calc(100% - 12px);
        height: 2px;   /* taste-skill-ignore: the filled part of the track */
        transform: scaleX(var(--p));
        transform-origin: 0 50%;
    }
    .pixa-milestone::before {
        left: 0;
        top: -40px;
    }
    .pixa-milestone-when {
        font-family: var(--tpl-ff-heading, inherit);
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        margin-bottom: 12px;
    }
}

@media (max-width: 991px) {
    .pixa-chapter-split {
        grid-template-columns: 1fr;
    }
    .pixa-chapter-aside {
        position: static;
        max-width: 420px;
    }
}

@media (max-width: 991px) {
    .pixa-about-open-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    .pixa-about-cover {
        height: clamp(240px, 46vh, 420px);
    }
    .pixa-article-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .pixa-chapters ol {   /* the chapters as a row that wraps */
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 20px;
    }
    .pixa-chapters a {
        white-space: nowrap;
    }
    .pixa-principles {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-belief {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
    }
    .pixa-chapter-frames .pixa-frame:nth-child(2) {
        margin-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pixa-timeline {
        --p: 1;
    }
}

/* ==========================================================================
   Layers only where they are about to move. will-change promotes an element to its own compositor layer for as long as
   it applies,
and a page-long set of them (footer letters,
character panels,
work cards,
ring cards,
wheel nodes,
the menu)
   makes every commit pay for all of them,
wherever you are. pixa-bits.js marks the sections within about half a screen
   of the viewport with is-near; anywhere else the promotion is withdrawn. The menu's items are promoted only while open.
   ========================================================================== */
section:not(.is-near) .pixa-char-media,
section:not(.is-near) .pixa-work,
section:not(.is-near) .pixa-work-grey,
section:not(.is-near) .pixa-ring-card,
section:not(.is-near) .pixa-route-dot,
section:not(.is-near) .pixa-route-svg,
section:not(.is-near) .pixa-quotes-track,
section:not(.is-near) .pixa-reveal,
section:not(.is-near) .pixa-reveal img,
section:not(.is-near) .pixa-reveal video,
section:not(.is-near) .pixa-acc-media img,
footer:not(.is-near) .pixa-footer-inner,
footer:not(.is-near) .pixa-footer-letter,
.pixa-smenu:not([data-open]) .pixa-smenu__item,
.pixa-smenu:not([data-open]) .pixa-smenu__label {
    will-change: auto;
}

/* ==========================================================================
   Touch feel: no grey flash on tap, no wait on controls, no font inflation in landscape; a press is felt on the finger
   ========================================================================== */
html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

a,
button,
[role="button"],
summary {
    touch-action: manipulation;
}

@media (hover: none) {
    .pixa-btn:active,
    .pixa-text-link:active {
        transform: scale(0.97);
        transition: transform 0.12s ease-out;
    }
}

/* ==========================================================================
   Phones and tablets
   ========================================================================== */
@media (max-width: 767px) {
    .pixa-facts,
    .pixa-about,
    .pixa-services,
    .pixa-process-section {
        padding: 60px 0;
    }
    .pixa-facts {
        padding-bottom: 0;
    }
    .pixa-characters {
        padding-top: 56px;
    }
    .pixa-char-gallery {
        --cg-gap: 6px;
        height: 360px;
        perspective: none;
    }
    .pixa-cta {
        padding-bottom: 60px;
    }
    .pixa-section-head {
        margin-bottom: 32px;
    }
    .pixa-facts-row {
        flex-direction: column;
        gap: 32px;
    }
    .pixa-fact-num {
        font-size: 64px;
    }
    .pixa-footer-inner {
        padding-top: 56px;
    }
    .pixa-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }
    .pixa-footer-brand,
    .pixa-footer-say {
        grid-column: 1 / -1;
    }
    .pixa-footer-col a:hover,
    .pixa-footer-col a:focus-visible {
        transform: none;   /* no room to step right on small screens */
    }
    .pixa-footer-col a:hover::before,
    .pixa-footer-col a:focus-visible::before {
        opacity: 0;
    }
}

/* ==========================================================================
   Corrections to template defaults
   ========================================================================== */
/* One ground colour for the whole page: the template's body grey showed through between sections */
html.theme-dark body,
body,
.pixa-testimonials {
    background: var(--pixa-ground);
}

/* The template title-cases every heading; sentence-case headings stay as written */
.pixa-about-title,
.pixa-journey-step h3,
.pixa-page-title,
.pixa-story-title,
.pixa-service-title {
    text-transform: none;
}

/* Press feedback on every button; hover colour changes stay in their own rules */
.btn-theme-solid,
.btn-theme-outline,
.pixalane-work-link,
.pixa-text-link {
    transition: background-color 0.45s ease, color 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-theme-solid:active,
.btn-theme-outline:active {
    transform: scale(0.97);
}

/* The template's catch-all transition animated every property on these elements, layout ones included (width, padding,
   font-size), so any style change paid for a 300ms transition and a layout each frame. The same hover fades remain; only
   the properties that composite or paint cheaply stay on the list. */
span, p, input, select, textarea, li, img, svg path, *::after, *::before, .transition-3, h1, h2, h3, h4, h5, h6 {
    transition-property: color, background-color, border-color, opacity, transform;
}

/* The template gives every heading and paragraph a catch-all 0.3s CSS transition,
which stops GSAP
   from moving them (the tween runs but the browser never settles the value). Elements that
   pixa-home.js animates carry no CSS transition. */
.hero__eyebrow,
.hero__desc,
.hero__trust,
.pixa-fact,
.pixa-fact *,
.pixa-about h2,
.pixa-about p,
.pixa-section-head h2,
.pixa-section-head p,
.pixa-section-head .pixa-label,
.pixa-journey-track,
.pixa-journey-fill,
.pixa-journey-step,
.featured-works-area .section__title-wrapper > *,
.team-area .section__title-wrapper > *,
.team__wrapper,
.pixa-testimonial,
.pixa-quotes-track,
.pixa-cta h2,
.pixa-cta p,
.pixa-cta .pixa-label,
.pixa-footer p,
/* written every frame by the scroll effects: a transition here would trail the scroll by 300ms */
.hero__title,
.pixa-char-media img,
.pixa-stack-card,
.pixa-stack-shade,
.pixa-stack-art,
.pixa-work,
.pixalane-work-thumb img,
.pixalane-work-title,
.pixalane-work-link .pixa-icon {
    transition: none;
}

/* Framed pictures move a little on scroll (pixa-home.js), so their frames must crop */
.pixalane-work-thumb,
.pixa-char-media {
    overflow: hidden;
}

/* The template and Bootstrap turn on CSS smooth scrolling; it double-smooths every programmatic scroll
   (ScrollSmoother, the services snap, back to top), so it is off and GSAP handles the easing. */
:root { scroll-behavior: auto; }

/* ==========================================================================
   Header: Staggered Menu (after React Bits, pixa-nav.js). A transparent bar (logo | CTA + Menu) and, on Menu, two brand
   layers that slide in from the right a beat apart ahead of a white panel with the five destinations in large type, the
   email and the socials. The bar turns solid after 50px and hides on the way down (main.js, #header-sticky).
   ========================================================================== */
.pixa-smenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 800;
    pointer-events: none;
}

.pixa-smenu__overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(10, 13, 18, 0.4);
    opacity: 0;
    visibility: hidden;   /* closed, it draws nothing (a full-screen layer otherwise sits in every frame) */
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.pixa-smenu[data-open] .pixa-smenu__overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s;
    pointer-events: auto;
}

.pixa-smenu__bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 76px;
    padding: 0 clamp(16px, 3vw, 48px);
    pointer-events: auto;
    transition: background-color 0.45s ease;
}

.pixa-smenu__logo {
    transition: none;   /* the template's catch-all transition on links would swallow the GSAP work */
}

.pixa-smenu__logo .pixa-logo-mark {
    width: 36px;
    height: 36px;
}

.pixa-smenu__right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pixa-smenu__cta {
    --btn-h: 44px;
    --btn-pad: 16px;
    font-size: 14px;
}

/* the toggle: three bars that fold into a cross while the menu is open; it reads dark once the white panel is under it */
.pixa-smenu__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.45s ease 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.pixa-smenu[data-open] .pixa-smenu__toggle {
    color: var(--pixa-deep);
}

.pixa-smenu__toggle:focus-visible {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.pixa-smenu__burger {
    position: relative;
    display: block;
    width: 26px;
    height: 18px;
}

.pixa-smenu__stroke {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px; /* taste-skill-ignore: the strokes of the menu icon */
    border-radius: 2px;
    background: currentColor;
    transform-origin: 50% 50%;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-smenu__stroke:nth-child(1) {
    top: 0;
}

.pixa-smenu__stroke:nth-child(2) {
    top: 8px;
    width: 68%;
}

.pixa-smenu__stroke:nth-child(3) {
    top: 16px;
}

.pixa-smenu__toggle:hover .pixa-smenu__stroke:nth-child(2) {
    width: 100%;
}

.pixa-smenu[data-open] .pixa-smenu__stroke:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.pixa-smenu[data-open] .pixa-smenu__stroke:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
}

.pixa-smenu[data-open] .pixa-smenu__stroke:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* the layers run ahead of the panel: blue, then cyan, then the white panel */
.pixa-smenu__prelayers {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: clamp(340px, 40vw, 540px);
    pointer-events: none;
}

.pixa-smenu__prelayer {
    position: absolute;
    inset: 0;
    display: block;
    transition: none;
}

.pixa-smenu__prelayer--1 {
    background: var(--pixa-grad);
}

.pixa-smenu__prelayer--2 {
    background: var(--pixa-accent-2);
}

.pixa-smenu__panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: clamp(340px, 40vw, 540px);
    height: 100%;
    padding: 120px clamp(28px, 3vw, 48px) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    color: var(--pixa-deep);
    pointer-events: auto;
    transition: none;
}

.pixa-smenu:not(.is-live) .pixa-smenu__panel,
.pixa-smenu:not(.is-live) .pixa-smenu__prelayers {
    visibility: hidden;   /* nothing shows until the script has parked them off to the right */
}

.pixa-smenu__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pixa-smenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pixa-smenu__list li {
    overflow: hidden;
    line-height: 1;
}

.pixa-smenu__item {
    display: inline-block;
    padding: 4px 0;
    will-change: transform;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(36px, 3.4vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--pixa-deep);
    text-decoration: none;
    transition: color 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-smenu__item:hover {
    transform: translateX(8px);
}

.pixa-smenu__item:hover,
.pixa-smenu__item:focus-visible {
    color: var(--pixa-deep);
}

.pixa-smenu__item[aria-current="page"] .pixa-smenu__label {   /* the open page: the brand gradient with a bar under it */
    position: relative;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-smenu__item[aria-current="page"] .pixa-smenu__label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    background: var(--pixa-grad);
}

.pixa-smenu__item:focus-visible {
    outline: none;
}

.pixa-smenu__item:focus-visible .pixa-smenu__label {   /* the label is an inline-block, so the underline has to sit on it */
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 0.06em;
}

.pixa-smenu__label {
    display: inline-block;
    transform-origin: 50% 100%;
    will-change: transform;
    transition: none;
}

.pixa-smenu__foot {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pixa-smenu__mail {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 20px;
    font-weight: 700;
    color: var(--pixa-deep);
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-smenu__mail:hover,
.pixa-smenu__mail:focus-visible {
    color: var(--pixa-accent);
}

.pixa-smenu__socials-title {
    display: block;
    transition: none;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10, 13, 18, 0.6);   /* ink on the white panel; the brand blue reads at 2.4:1 there */
}

.pixa-smenu__socials ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pixa-smenu__social {
    font-size: 16px;
    font-weight: 600;
    color: var(--pixa-deep);
    text-decoration: none;
    transition: opacity 0.5s ease, color 0.45s ease;
}

.pixa-smenu__socials ul:hover .pixa-smenu__social:not(:hover) {
    opacity: 0.35;
}

.pixa-smenu__social:hover,
.pixa-smenu__social:focus-visible {
    color: var(--pixa-accent);
}

@media (max-width: 1024px) {
    .pixa-smenu__prelayers,
    .pixa-smenu__panel {
        width: 100%;
    }
    .pixa-smenu[data-open] .pixa-smenu__bar {
        background: var(--pixa-deep);   /* the bar sits over the white panel here */
    }
    .pixa-smenu[data-open] .pixa-smenu__toggle {
        color: #ffffff;
    }
}

@media (max-width: 575px) {
    .pixa-smenu__bar {
        height: 64px;
    }
    .pixa-smenu__cta {
        display: none;
    }
    .pixa-smenu__panel {
        padding: 96px 20px 32px;
    }
    .pixa-smenu__item {
        font-size: clamp(34px, 11vw, 48px);
    }
}

@media (pointer: coarse) {
    html.pixa-smenu-open,
    html.pixa-smenu-open body {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pixa-smenu__overlay,
    .pixa-smenu__toggle,
    .pixa-smenu__stroke,
    .pixa-smenu__item,
    .pixa-smenu__social {
        transition: none;
    }
    .pixa-smenu__item:hover {
        transform: none;
    }
    .pixa-btn__roll {
        transition: none;
    }
    .pixa-btn:hover .pixa-btn__arrow svg,
    .pixa-btn:focus-visible .pixa-btn__arrow svg {
        animation: none;
    }
}

/* Nothing sits under the fixed bar: anchor jumps leave room for it and the pinned services section starts below it */
[id] {
    scroll-margin-top: 90px;
}

/* ==========================================================================
   Scroll mask reveal (assets/js/pixa-reveal.js): opt in with data-pixa-reveal on a frame that clips its media
   ========================================================================== */
.pixa-reveal {
    overflow: hidden;
    will-change: clip-path;
}

.pixa-reveal img,
.pixa-reveal video {
    display: block;
    transition: none;   /* GSAP scales the media with the scroll; the template's catch-all transition would trail it */
    will-change: transform;
    transform-origin: 50% 50%;
}

/* ==========================================================================
   Bits (assets/js/pixa-bits.js): spotlight borders, hero particles, ambient light. User request 2026-10-22.
   ========================================================================== */
.pixa-spot {
    position: relative;
}

/* a 1px ring lit only around the pointer: the gradient is masked to the border area */
.pixa-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px; /* taste-skill-ignore: the ring's thickness, lit only around the pointer */
    background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(79, 172, 254, 0.7), rgba(79, 172, 254, 0.1) 45%, transparent 70%); /* taste-skill-ignore: pointer-following light */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* taste-skill-ignore: a mask that keeps only the border area, not a visible gradient */
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* taste-skill-ignore: same mask, standard property */
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 3;
}

.pixa-spot:hover::after {
    opacity: 1;
}

.hero-area .container {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .pixa-spot::after {
        display: none;
    }
}

/* ==========================================================================
   Hero layout (moved here from the home template's inline styles)
   The copy sits on the header's own gutter, so the headline lines up with the logo and the right half of the screen
   is left to the reel. On phones the reel stops being a backdrop and follows the copy as a frame of its own.
   ========================================================================== */
.hero-area {
    min-height: 100vh !important;   /* taste-skill-ignore: fallback for browsers without svh */
    min-height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.hero-area .container {
    max-width: none !important;
    padding-left: clamp(16px, 3vw, 48px) !important;   /* the header bar's gutter (.pixa-smenu__bar) */
    padding-right: clamp(16px, 3vw, 48px) !important;
}

.hero-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Tablets: the same side-by-side picture; the description stops short of the phones. */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-inner {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .hero__desc {
        max-width: 62vw !important;
    }
}

/* Phones: the reel is a frame of its own under the copy and the button, full width, cropped to its right-hand side
   where the phones are, so they fill the frame instead of hiding behind the words. */
@media (max-width: 767px) {
    .hero-area {
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 0 !important;
        padding-top: 0 !important;
    }
    .hero-inner {
        padding-top: 56px !important;
        padding-bottom: 28px !important;
    }
    .hero-area__bg {   /* the phones sit near the reel's right edge, so a square box with the video scaled about that edge centres them */
        order: 3;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 86%, transparent); /* taste-skill-ignore: an alpha fade so the reel's black meets the page's dark without a hard edge, not a visible gradient */
        mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 86%, transparent); /* taste-skill-ignore: same, standard property */
    }
    .hero-area__bg video {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-left: 0;
        object-position: 100% 50%;
        transform: scale(1.42);
        transform-origin: 100% 50%;
        transition: none;
    }
    .hero-area__bg:after,
    .theme-dark .hero-area__bg::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero__title {
        font-size: 34px !important;
        line-height: 1.1 !important;
    }
}

/* ==========================================================================
   Inner pages. One language throughout: the page hero, then the shared sections, then the page's own blocks.
   ========================================================================== */

/* page hero: eyebrow and a big sentence-case headline on the left, the intro and a button on the right */
.pixa-page-hero {
    padding: clamp(136px, 20vh, 196px) 0 clamp(40px, 6vh, 72px);
    background: var(--pixa-ground);
}

.pixa-page-hero--tall {
    padding-bottom: clamp(72px, 10vh, 120px);
}

.pixa-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px clamp(40px, 6vw, 96px);
    align-items: end;
    margin-bottom: 0;
}

.pixa-page-title {
    max-width: 15ch;
    margin: 0;
    font-size: clamp(34px, 6.2vw, 92px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: #ffffff;
    text-transform: none;
}

.pixa-page-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding-bottom: 8px;
}

.pixa-page-hero-side .pixa-section-intro {
    max-width: 44ch;
    margin: 0;
    font-size: clamp(16px, 1.25vw, 19px);
}

.pixa-hero-mail,
.pixa-contact-mail {
    display: inline-block;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.45s ease;
}

.pixa-hero-mail:hover,
.pixa-hero-mail:focus-visible,
.pixa-contact-mail:hover,
.pixa-contact-mail:focus-visible {
    color: var(--pixa-accent);
}

/* small labels inside page blocks (the "What's included", "The brief" kind) */
.pixa-service-sub {
    display: block;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pixa-ink-muted);
}

/* the about page's story: a statement on the left, the account on the right, three frames below */
.pixa-story {
    padding: clamp(72px, 9vh, 110px) 0;
    background: var(--pixa-ground);
}

.pixa-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 32px clamp(40px, 6vw, 110px);
    align-items: start;
}

.pixa-story-lead {
    margin-bottom: 0;
}

.pixa-story-title {
    max-width: 22ch;
    font-size: clamp(26px, 2.6vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
}

.pixa-story-copy {
    max-width: 58ch;
    padding-top: 8px;
}

.pixa-story-copy p {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--pixa-ink-secondary);
}

.pixa-story-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 16px;
    margin-top: clamp(48px, 7vh, 88px);
}

.pixa-story-frame {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pixa-surface);
    aspect-ratio: 4 / 5;
}

.pixa-story-frame--tall {
    grid-row: 1 / 3;
    aspect-ratio: auto;
}

.pixa-story-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the services page: each lane explained, media and copy side by side, alternating */
.pixa-service-rows {
    padding: clamp(24px, 4vh, 48px) 0 clamp(48px, 7vh, 96px);
    background: var(--pixa-ground);
}

.pixa-service-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px clamp(40px, 6vw, 110px);
    align-items: center;
    padding: clamp(48px, 7vh, 96px) 0;
    scroll-margin-top: 96px;
}

.pixa-service-row.is-flip .pixa-service-media {
    order: 2;
}

.pixa-service-media {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pixa-surface);
}

.pixa-service-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixa-service-copy {
    max-width: 560px;
    margin-bottom: 0;
}

.pixa-service-title {
    margin: 0 0 16px;
    font-size: clamp(32px, 3.6vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: none;
}

.pixa-service-lead {
    margin: 0 0 14px;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

.pixa-service-body {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--pixa-ink-secondary);
}

.pixa-service-copy .pixa-steps-points {
    margin-bottom: 24px;
}

/* the portfolio filter: text tabs with the accent underline, the count after each */
.pixa-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin: -8px 0 32px;
}

.pixa-filter-btn {
    position: relative;
    min-height: 44px;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--pixa-ink-secondary);
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.45s ease;
    -webkit-tap-highlight-color: transparent;
}

.pixa-filter-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px; /* taste-skill-ignore: the tab underline, as on .pixa-text-link */
    background: var(--pixa-grad);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pixa-filter-btn:hover,
.pixa-filter-btn:focus-visible,
.pixa-filter-btn.is-active {
    color: #ffffff;
}

.pixa-filter-btn.is-active::after,
.pixa-filter-btn:hover::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.pixa-filter-btn:focus-visible {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.pixa-filter-count {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pixa-ink-muted);
    font-variant-numeric: tabular-nums;
}

/* a case study: the headline and the facts, the cover, the brief beside what we did, the gallery, the next project */
.pixa-case {
    padding: clamp(136px, 20vh, 196px) 0 clamp(24px, 4vh, 48px);
    background: var(--pixa-ground);
}

.pixa-case-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px clamp(40px, 6vw, 96px);
    align-items: end;
    margin-bottom: 0;
}

.pixa-case-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin: 0;
    padding-bottom: 8px;
}

.pixa-case-meta dt {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
}

.pixa-case-meta dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
}

.pixa-case-meta a {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
    color: var(--pixa-accent);
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-case-meta a:hover,
.pixa-case-meta a:focus-visible {
    color: #ffffff;
}

.pixa-case-cover {
    margin: clamp(40px, 6vh, 64px) 0 0;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pixa-surface);
}

.pixa-case-cover img,
.pixa-case-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixa-case-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px clamp(40px, 6vw, 110px);
    padding: clamp(56px, 8vh, 96px) 0;
}

.pixa-case-brief p {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-case-brief .pixa-case-summary {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

.pixa-case-did ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pixa-case-did li {
    padding: 24px;
    border-radius: 12px;
    background: var(--pixa-surface);
}

.pixa-case-did h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    text-transform: none;
}

.pixa-case-did p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--pixa-ink-secondary);
}

.pixa-case-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pixa-case-shot {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pixa-surface);
}

.pixa-case-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: clamp(56px, 8vh, 96px);
    padding: clamp(28px, 4vh, 40px) clamp(24px, 3vw, 40px);
    border-radius: 14px;
    background: var(--pixa-surface);
}

.pixa-case-next-title {
    margin: 0 0 6px;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-transform: none;
}

.pixa-case-next p {
    margin: 0;
    font-size: 15px;
    color: var(--pixa-ink-secondary);
}

/* the contact page: the form and, beside it, the ways to reach us */
.pixa-contact {
    padding: clamp(16px, 3vh, 40px) 0 clamp(72px, 9vh, 110px);
    background: var(--pixa-ground);
    scroll-margin-top: 96px;
}

/* the contact screen: landscape. The title, the intro and the ways to reach us take the width their text needs on the
   left; the form takes everything else, running on past the container to just short of the right edge of the screen. */
.pixa-contact-hero {
    padding: clamp(120px, 16vh, 168px) 0 clamp(56px, 8vh, 96px);
}

.pixa-contact-lead {
    padding-right: clamp(56px, 5vw, 100px);   /* the plane past the end of HELLO stays clear of the form */
}

.pixa-contact-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 40px clamp(40px, 3vw, 56px);
    align-items: start;   /* the lead's label sits level with the form's, instead of floating mid-height */
    margin-right: calc(50% - 50vw + clamp(24px, 3vw, 56px));
}

.pixa-contact-lead .pixa-page-title {
    max-width: 13ch;   /* two lines: "Tell us what / you're building." */
    margin-bottom: 22px;
    font-size: clamp(40px, 4.6vw, 72px);
}

.pixa-contact-lead .pixa-section-intro {
    max-width: 40ch;
    margin: 0 0 22px;
    font-size: clamp(16px, 1.25vw, 19px);
}

.pixa-contact-form > .pixa-service-sub {
    margin-bottom: 16px;
}

/* the booking form: a white sheet that ConnecTribe's inline embed fills. The embed writes inline styles, so the site's type,
   tone steps instead of hairlines, a two-column field grid and the house button are set here with !important. */
.pixa-embed {   /* the box keeps the loaded form's height from the start (696px wide, 850px on phones, measured), so the page does not jump while the form loads */
    position: relative;
    min-height: 696px;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    color: var(--pixa-deep);
}

.pixa-embed > div:first-child:empty,
.pixa-embed > div:first-child:not(:has(form)) {   /* while the embed is still a placeholder, its loading line sits in the middle of the box */
    display: grid;
    place-items: center;
    min-height: 696px;
}

@media (max-width: 575px) {
    .pixa-embed,
    .pixa-embed > div:first-child:not(:has(form)) {
        min-height: 850px;
    }
}

.pixa-embed [id^="sp-form-"] {
    min-height: 320px;
}

.pixa-embed.is-framed {
    background: #F9FAFB;
}

.pixa-embed-frame {
    display: block;
    width: 100%;
    height: clamp(760px, 92vh, 880px);
    border: 0;
    background: #F9FAFB;
}

.pixa-embed .sp-form-wrap {
    max-width: none !important;
    padding: clamp(24px, 3vw, 40px) !important;
    border-radius: 16px !important;
    font-family: var(--tpl-ff-heading, inherit) !important;
}

.pixa-embed .sp-form-wrap > h2,
.pixa-embed .sp-form-wrap > h2 + p {
    display: none !important;   /* the page carries its own heading */
}

.pixa-embed form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px !important;
}

.pixa-embed form > div:nth-child(5),
.pixa-embed form > div:has(textarea),
.pixa-embed form > button,
.pixa-embed form > [id^="sp-error-"],
.pixa-embed form > [id^="sp-captcha-"],
.pixa-embed form > p {
    grid-column: 1 / -1;
}

.pixa-embed form > div > label:first-child {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #475467 !important;
}

.pixa-embed input:not([type="checkbox"]),
.pixa-embed select,
.pixa-embed textarea {
    padding: 14px 16px !important;
    border-color: transparent !important;
    border-radius: 8px !important;
    background: #F1F4F8 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--pixa-deep) !important;
    transition: background-color 0.45s ease !important;
}

.pixa-embed input:not([type="checkbox"]):hover,
.pixa-embed select:hover,
.pixa-embed textarea:hover {
    background: #E9EEF4 !important;
}

.pixa-embed input:not([type="checkbox"]):focus-visible,
.pixa-embed select:focus-visible,
.pixa-embed textarea:focus-visible {
    background: #E9EEF4 !important;
    outline: 2px solid var(--pixa-accent) !important;
    outline-offset: 2px;
}

.pixa-embed textarea {
    min-height: 140px !important;
}

.pixa-embed input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
}

.pixa-embed button[id^="sp-submit-"] {
    width: auto !important;
    justify-self: start;
    margin-top: 6px !important;
    padding: 16px 28px !important;
    border-radius: 8px !important;
    background: var(--pixa-deep) !important;
    color: #ffffff !important;
    font-family: var(--tpl-ff-heading, inherit) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: background-color 0.45s ease, color 0.45s ease !important;
}

.pixa-embed button[id^="sp-submit-"]:hover,
.pixa-embed button[id^="sp-submit-"]:focus-visible {
    background: var(--pixa-accent) !important;
    color: var(--pixa-deep) !important;
    opacity: 1 !important;
}

.pixa-embed button[id^="sp-submit-"]:focus-visible {
    outline: 2px solid var(--pixa-accent) !important;
    outline-offset: 3px;
}

.pixa-embed [id^="sp-error-"] {
    border-color: transparent !important;
    text-align: left !important;
    font-size: 14px !important;
}

.pixa-embed .sp-form-wrap > p:last-child {
    margin-top: 18px !important;
    font-size: 11px !important;
    color: #98A2B3 !important;
}

.pixa-embed .sp-form-wrap > p:last-child a {
    color: #475467 !important;
}

.pixa-contact-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 28px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pixa-ink-secondary);
}

.pixa-contact-row .pixa-footer-time {
    color: #ffffff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pixa-contact-row-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.pixa-contact-row-links a {
    display: inline-block;
    padding: 8px 0;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-contact-row-links a:hover,
.pixa-contact-row-links a:focus-visible {
    color: var(--pixa-accent);
}

@media (max-width: 991px) {
    .pixa-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        margin-right: 0;
    }
    .pixa-contact-form {
        max-width: 560px;
    }
    .pixa-embed form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pixa-embed-note {
    margin: 0;
    padding: 24px clamp(24px, 3vw, 40px) 32px;
    font-size: 15px;
    line-height: 1.6;
    color: #475467;
}

.pixa-embed-note a {
    color: var(--pixa-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* plain pages and posts */
.pixa-prose-section {
    padding: clamp(16px, 3vh, 40px) 0 clamp(72px, 9vh, 110px);
    background: var(--pixa-ground);
}

.pixa-prose {
    max-width: 72ch;
}

.pixa-prose h2,
.pixa-prose h3 {
    margin: 40px 0 14px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-transform: none;
}

.pixa-prose h2 {
    font-size: clamp(26px, 2.6vw, 38px);
}

.pixa-prose h3 {
    font-size: clamp(20px, 1.8vw, 26px);
}

.pixa-prose p,
.pixa-prose li {
    font-size: 17px;
    line-height: 1.75;
    color: var(--pixa-ink-secondary);
}

.pixa-prose p {
    margin: 0 0 20px;
}

.pixa-prose ul,
.pixa-prose ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.pixa-prose a {
    color: var(--pixa-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.45s ease;
}

.pixa-prose a:hover {
    color: #ffffff;
}

.pixa-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ==========================================================================
   The journal (home.php, archive.php, search.php, blog_template.php, single.php). Cards without boxes: the cover on a
   16:10 frame, the kicker and date, the title, the excerpt, the reading time; the newest post leads the first page at
   double width. The post page: the hero, the cover with the scroll reveal, prose at reading width, the tags, the
   neighbours and three more from the journal.
   ========================================================================== */
.pixa-journal {
    padding: clamp(8px, 2vh, 24px) 0 clamp(72px, 9vh, 110px);
    background: var(--pixa-ground);
}

.pixa-journal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 24px;
}

.pixa-journal-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pixa-journal-card.is-lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px clamp(24px, 4vw, 56px);
    align-items: end;
}

.pixa-journal-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--pixa-surface);
}

.pixa-journal-card.is-lead .pixa-journal-cover {
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
}

.pixa-journal-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.pixa-journal-card:hover .pixa-journal-cover img {
    transform: scale(1.05);
}

.pixa-journal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.pixa-journal-card.is-lead .pixa-journal-body {
    gap: 14px;
    padding-bottom: 6px;
}

.pixa-journal-kicker {
    font-size: 13px;
    font-weight: 600;
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-journal-kicker time {
    font-weight: 500;
    color: var(--pixa-ink-muted);
}

.pixa-journal-title {
    margin: 0;
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-transform: none;
}

.pixa-journal-card.is-lead .pixa-journal-title {
    font-size: clamp(28px, 2.8vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.pixa-journal-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-journal-title a:hover {
    color: var(--pixa-accent);
}

.pixa-journal-excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-journal-card.is-lead .pixa-journal-excerpt {
    max-width: 48ch;
    font-size: 17px;
}

.pixa-journal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--pixa-ink-muted);
}

.pixa-journal-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: clamp(40px, 6vh, 64px);
    font-size: 15px;
}

.pixa-journal-page {
    color: var(--pixa-ink-secondary);
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-journal-page:hover {
    color: #ffffff;
}

.pixa-journal-page.current {
    color: #ffffff;
    font-weight: 600;
}

.pixa-journal-page.prev,
.pixa-journal-page.next {
    color: var(--pixa-accent);
}

/* the post page */
.pixa-journal-byline {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--pixa-ink-muted);
}

.pixa-journal-post {
    padding-bottom: clamp(56px, 8vh, 96px);
    background: var(--pixa-ground);
}

.pixa-journal-cover-full {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 0 clamp(40px, 6vh, 72px);
    overflow: hidden;
    border-radius: 12px;
    background: var(--pixa-surface);
}

.pixa-journal-cover-full img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixa-journal-prose {
    margin: 0 auto;
}

.pixa-journal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    max-width: 72ch;
    margin: 36px auto 0;
    padding: 0;
    list-style: none;
}

.pixa-journal-tags a {
    font-size: 14px;
    color: var(--pixa-ink-secondary);
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-journal-tags a:hover {
    color: var(--pixa-accent);
}

.pixa-journal-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    max-width: 72ch;
    margin: clamp(48px, 7vh, 80px) auto 0;
}

.pixa-journal-nav-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
}

.pixa-journal-nav-link.is-next {
    align-items: flex-end;
    text-align: right;
}

.pixa-journal-nav-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    transition: color 0.45s ease;
}

.pixa-journal-nav-link:hover .pixa-journal-nav-title {
    color: var(--pixa-accent);
}

.pixa-journal-more {
    padding-top: clamp(40px, 6vh, 72px);
}

/* the prose, for what a post may hold beyond headings and paragraphs */
.pixa-prose h4 {
    margin: 28px 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-transform: none;
}

.pixa-prose strong {
    color: #ffffff;
}

.pixa-prose figure {
    margin: 32px 0;
}

.pixa-prose figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: var(--pixa-ink-muted);
}

.pixa-prose blockquote {
    margin: 36px 0;
    padding: 0;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.pixa-prose blockquote p {
    margin: 0 0 12px;
    font: inherit;
    color: inherit;
}

.pixa-prose blockquote cite {
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    color: var(--pixa-ink-muted);
}

.pixa-prose pre {
    margin: 0 0 24px;
    padding: 20px 24px;
    overflow: auto;
    border-radius: 10px;
    background: var(--pixa-surface);
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff;
}

.pixa-prose code {
    font-size: 0.92em;
    color: #ffffff;
}

.pixa-prose p code,
.pixa-prose li code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--pixa-surface);
}

.pixa-prose hr {
    height: 1px;   /* taste-skill-ignore: a rule the author placed in the copy */
    margin: 40px 0;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
}

.pixa-prose table {
    width: 100%;
    margin: 0 0 24px;
    border-collapse: collapse;
    font-size: 15px;
    color: var(--pixa-ink-secondary);
}

.pixa-prose th,
.pixa-prose td {
    padding: 10px 12px 10px 0;
    text-align: left;
    vertical-align: top;
}

.pixa-prose th {
    color: #ffffff;
}

.pixa-prose .wp-block-embed iframe,
.pixa-prose iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 10px;
}

.pixa-journal-cover-full,
.pixa-journal-cover-full img {
    transition: none;   /* the scroll reveal moves these */
}

@media (max-width: 991px) {
    .pixa-journal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pixa-journal-card.is-lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .pixa-journal-nav {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-journal-nav-link.is-next {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 575px) {
    .pixa-journal-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

/* no CSS transition fights the scroll reveals on the page frames */
.pixa-story-frame,
.pixa-story-frame img,
.pixa-service-media,
.pixa-service-media img,
.pixa-case-cover,
.pixa-case-cover img,
.pixa-case-shot,
.pixa-case-shot img {
    transition: none;
}

.pixa-footer-col a {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .pixa-page-hero {
        padding-top: clamp(120px, 18vh, 160px);
    }
    .pixa-page-hero-grid,
    .pixa-story-grid,
    .pixa-case-head,
    .pixa-case-body {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    .pixa-page-hero-side {
        padding-bottom: 0;
    }
    .pixa-service-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: clamp(40px, 6vh, 64px) 0;
    }
    .pixa-service-row.is-flip .pixa-service-media {
        order: 0;
    }
    .pixa-service-media {
        max-width: 520px;
        aspect-ratio: 4 / 3;
    }
    .pixa-case-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pixa-case-shot:first-child {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 10;
    }
    .pixa-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pixa-page-title {
        font-size: clamp(36px, 11vw, 48px);
    }
    .pixa-story-media {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-story-frame--tall {
        grid-row: auto;
        aspect-ratio: 4 / 5;
    }
    .pixa-case-meta {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-case-did ul,
    .pixa-case-gallery,
    .pixa-posts {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-case-shot:first-child {
        aspect-ratio: 4 / 5;
    }
    .pixa-case-next {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   Services on wide screens (pixa-home.js adds .is-acc above 992px): a full-width accordion of five lanes under the head.
   Each lane is a rail (the name on its side, the number at the foot) and, open, the artwork filling the rest of the row at
   full height. Nothing sits over the picture; the open lane's line and link show in the head. The stack stays, hidden.
   ========================================================================== */
.pixa-services.is-acc .pixa-stack {
    position: absolute;
    width: 1px;
    height: 1px;   /* taste-skill-ignore: the stack is kept for assistive tech, visually hidden */
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.pixa-services.is-acc {
    --acc-rail: 150px;
    padding-bottom: 0;
}

.pixa-services.is-acc .pixa-section-head {
    margin-bottom: clamp(20px, 3vh, 36px);
}

/* the head's right column: the open lane's line and link take the intro's place */
.pixa-services.is-acc .pixa-section-intro.is-swapped {
    display: none;
}

.pixa-acc-live {
    margin-bottom: 6px;
}

.pixa-acc-live-text {
    margin: 0 0 4px;
    max-width: 44ch;
    min-height: 3.2em;   /* always two lines tall: the head keeps its height as the open lane's line changes, so the row below never jumps */
    font-size: 16px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-acc-live-link {
    margin-right: 22px;
}

/* the row: five lanes edge to edge, tall enough to show a whole picture; the ground shows between them as a 2px seam.
   The open lane is as wide as its rail plus the picture at its own proportions (pixa-home.js); whatever is left over is
   shared, so the closed rails breathe a little on wide screens. */
.pixa-acc {
    display: flex;
    gap: 2px;
    height: clamp(520px, calc(100vh - 190px), 900px);   /* the row runs down to the next section; with the head it is about one screen */
    width: 100%;
    background: var(--pixa-ground);
    user-select: none;
    -webkit-user-select: none;
}

.pixa-acc-panel {
    position: relative;
    display: flex;
    flex: 1 1 var(--acc-rail);
    min-width: var(--acc-rail);
    overflow: hidden;
    background: var(--pixa-surface);
    will-change: flex-basis;
}

/* the rail: a button the full height of the row; it fills a closed lane and holds its width in an open one */
.pixa-acc-rail {
    position: relative;
    flex: 1 0 var(--acc-rail);
    padding: 0;
    border: 0;
    background: var(--pixa-surface);
    cursor: pointer;
    transition: background-color 0.45s ease;
    -webkit-tap-highlight-color: transparent;
}

.pixa-acc-panel:not(.is-open) .pixa-acc-rail:hover {
    background: var(--pixa-surface-hover);
}

.pixa-acc-panel.is-open .pixa-acc-rail {
    flex: 0 0 var(--acc-rail);
    cursor: default;
}

.pixa-acc-rail:focus-visible {
    outline: 2px solid var(--pixa-accent);
    outline-offset: -4px;
}

.pixa-acc-name {
    position: absolute;
    left: 50%;
    top: calc(50% - 24px);   /* a little above centre: the number stands at the foot */
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(54px, min(4.5vw, 7.2vh), 76px);   /* the stylesheet's size; pixa-home.js scales every name down together when the longest would not clear the row (the lane's name fills its rail; by the row's height too, so the longest name still clears the number at the foot */
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.34);
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(180deg);
    transition: color 0.45s ease;
}

.pixa-acc-panel:hover .pixa-acc-name,
.pixa-acc-panel.is-open .pixa-acc-name {
    color: #ffffff;
}

.pixa-acc-num {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--pixa-ink-muted);
    font-variant-numeric: tabular-nums;
    transition: color 0.45s ease;
}

.pixa-acc-panel.is-open .pixa-acc-num {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

/* the picture: the whole artwork at full height on the deep ground */
.pixa-acc-media {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    background: var(--pixa-deep);
    outline: none;
    transition: none;
}

.pixa-acc-media img {
    position: absolute;
    inset: 0;
    margin: 0 auto;
    display: block;
    width: 100%;   /* pixa-home.js sets the open lane's picture width, so a lane opening only uncovers a picture already drawn */
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    will-change: transform;
    transition: none;
}

.pixa-acc-panel.is-open .pixa-acc-media:focus-visible::after {
    content: "";
    position: absolute;
    inset: 4px;
    outline: 2px solid var(--pixa-accent);
    pointer-events: none;
}

@media (max-width: 1400px) {
    .pixa-services.is-acc {
        --acc-rail: 124px;
    }
    .pixa-acc-name {
        font-size: clamp(44px, min(3.8vw, 6.4vh), 62px);
    }
}

@media (max-height: 800px) {
    .pixa-services.is-acc {
        min-height: 600px;
    }
    .pixa-acc-num {
        bottom: 26px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pixa-acc-rail,
    .pixa-acc-name,
    .pixa-acc-num {
        transition: none;
    }
}

/* ==========================================================================
   The cursor (assets/js/pixa-cursor.js, after React Bits' TargetCursor): a dot on the pointer and four corner brackets that
   turn slowly, then lock on to whatever can be clicked. White on the dark ground, the brand blue once locked, deep ink over
   the open menu's white panel; no blend mode, so the compositor never has to re-blend the page under it. The native arrow
   is hidden for fine pointers; text fields, selects and framed pages keep their own.
   ========================================================================== */
.pixa-cursor {
    --tc-color: #ffffff;
    display: contents;   /* the parts are fixed on their own, so each blends with the page by itself */
}

.pixa-cursor.is-locked,
html.pixa-smenu-open .pixa-cursor.is-locked {
    --tc-color: var(--pixa-accent);
}

html.pixa-smenu-open .pixa-cursor {   /* over the white menu panel */
    --tc-color: var(--pixa-deep);
}

.pixa-cursor__corner,
.pixa-cursor__dot,
.pixa-cursor__label,
.pixa-cursor__mark {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0;
}

.pixa-cursor__corner {
    box-sizing: border-box;
    border-style: solid;
    border-color: var(--tc-color);
    transform-origin: 0 0;
    will-change: transform;
    transition: border-color 0.45s ease;
}

.pixa-cursor__dot {
    border-radius: 50%;
    background: var(--tc-color);
    outline: 1px solid rgba(10, 13, 18, 0.35);   /* a hairline of ink, so the dot still reads over a light picture; invisible on the dark ground */
    will-change: transform;
    transition: background-color 0.45s ease;
}

.pixa-cursor__mark {   /* over the logo: the logomark drawn under the pointer, by pixa-cursor.js */
    width: 44px;
    height: 44px;
    will-change: transform;
}

.pixa-cursor__mark svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pixa-cursor__mark path {
    fill: none;
    stroke: url(#pixa-cursor-grad);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: none;
}

.pixa-cursor__mark .is-frame {
    stroke-width: 7.5;
}

.pixa-cursor__label {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tc-color);
    opacity: 0;
    will-change: transform, opacity;
    transition: none;
}

html.pixa-cursor-on,
html.pixa-cursor-on * {
    cursor: none !important;
}

html.pixa-cursor-on :is(input, textarea, select, [contenteditable="true"], iframe, embed, object, [data-embed], [data-embed] *) {   /* their own pointer, with no class to toggle */
    cursor: auto !important;
}

/* ==========================================================================
   One Studio sections (template-parts/section-compare|search|industries|engagements|faq.php): the comparison table, the
   search block, the industries index, the engagements and the questions. The same head pattern as every section; rows and
   cards rise in as they arrive (pixa-home.js). Surfaces are one step up from the ground; lines are the site's rules.
   ========================================================================== */
.pixa-compare,
.pixa-search,
.pixa-industries,
.pixa-engagements,
.pixa-faq {
    padding: clamp(72px, 9vh, 110px) 0;
}

.pixa-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.pixa-compare-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}

.pixa-compare-table th,
.pixa-compare-table td {
    padding: 18px 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pixa-compare-table thead th {
    padding-top: 0;
    border-top: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
}

.pixa-compare-table thead th.is-us {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-compare-table tbody th {
    position: sticky;
    left: 0;
    min-width: 200px;
    font-weight: 600;
    color: #ffffff;
    background: var(--pixa-ground);
}

.pixa-compare-table td {
    color: var(--pixa-ink-secondary);
}

.pixa-compare-table td.is-dim {
    color: var(--pixa-ink-muted);
}

.pixa-compare-table td.is-us {
    font-weight: 600;
    color: #ffffff;
    background: var(--pixa-surface);
    transition: background-color 0.45s ease;
}

.pixa-compare-table tbody tr th,
.pixa-compare-table tbody tr td {
    transition: background-color 0.45s ease;
}

.pixa-compare-table tbody tr:hover th,
.pixa-compare-table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03);
}

.pixa-compare-table tbody tr:hover td.is-us {
    background-color: var(--pixa-surface-hover);
}

.pixa-compare-cell {   /* a partner cell: pixa-home.js resolves it out of scrambled characters as the row arrives */
    display: inline-block;
}

.pixa-compare-us {   /* the Pixalane cell: lands last, a gradient line sweeping under it */
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.pixa-compare-us::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;   /* taste-skill-ignore: the line that sweeps under the cell */
    background: var(--pixa-grad);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.15s;
}

.pixa-compare-row.is-in .pixa-compare-us {
    opacity: 1;
    transform: translateX(0);
}

.pixa-compare-row.is-in .pixa-compare-us::after {
    transform: scaleX(1);
}

/* the ask bar: a drawn outline (DrawSVG), a sparkle, a question that types itself and the answer that follows (pixa-home.js) */
.pixa-ask {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    margin: 0 0 32px;
    padding: 14px 26px 14px 22px;
}

.pixa-ask-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.pixa-ask-frame-line {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    fill: none;
    stroke: rgba(255, 255, 255, 0.32);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.pixa-ask-icon {
    flex: none;
    width: 22px;
    height: 22px;
}

.pixa-ask-icon path {
    fill: url(#pixa-grad);
}

.pixa-ask-line {
    display: flex;
    align-items: baseline;
    min-width: 0;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #ffffff;
}

.pixa-ask-q {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.pixa-ask-caret {
    flex: none;
    width: 2px;   /* taste-skill-ignore: the text caret */
    height: 1.05em;
    margin-left: 3px;
    align-self: center;
    background: var(--pixa-accent-2);
    animation: pixa-caret 1s steps(2, start) infinite;
}

@keyframes pixa-caret {
    to { opacity: 0; }
}

.pixa-ask-a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-left: auto;
    padding-left: 24px;
    white-space: nowrap;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 700;
    opacity: 0;   /* pixa-home.js brings it in once the question is typed */
}

.pixa-ask-a-arrow {
    color: var(--pixa-ink-muted);
}

.pixa-ask-a-text {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-search-grid,
.pixa-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.pixa-search-card,
.pixa-plan {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--pixa-surface);
    transition: background-color 0.45s ease;
}

.pixa-search-card:hover,
.pixa-plan:hover {
    background: var(--pixa-surface-hover);
}

.pixa-search-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 22px;
}

.pixa-search-defs {
    position: absolute;
    width: 0;
    height: 0;
}

.pixa-search-icon path {
    fill: none;
    stroke: url(#pixa-grad-ico);   /* the brand gradient in the icon's own units, so a straight stroke shows it too */
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pixa-search-icon path.is-live {   /* the stroke that keeps moving (pixa-home.js): the sparkle turns about its own centre */
    transform-box: fill-box;
    transform-origin: center;
}

.pixa-search-card h3,
.pixa-plan h3 {
    margin: 0 0 10px;
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-transform: none;
    color: #ffffff;
}

.pixa-search-card p,
.pixa-plan p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--pixa-ink-secondary);
}

.pixa-plan .pixa-plan-lead {
    margin-bottom: 10px;
    color: #ffffff;
}

.pixa-plan .pixa-text-link {
    margin-top: auto;
    padding-top: 28px;
}

.pixa-plans-note {
    margin: 24px 0 0;
    font-size: 14px;
    color: var(--pixa-ink-muted);
}

/* the industries (after React Bits' Flowing Menu): six rows the width of the container; a band slides into a row under the
   pointer carrying a marquee of the industry's line and the covers of its work (pixa-home.js) */
.pixa-industry-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pixa-industry {
    position: relative;
    overflow: hidden;
    transition: none;   /* the template gives every li a 0.3s transition on everything; it would fight the script's rise and the band */
}

.pixa-industry::before {   /* the rule above each row */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;   /* taste-skill-ignore: the rule between rows, the site's own rule weight */
    background: rgba(255, 255, 255, 0.14);
}

.pixa-industry:last-child::after {   /* and under the last */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;   /* taste-skill-ignore: the rule under the last row, the site's own rule weight */
    background: rgba(255, 255, 255, 0.14);
}

.pixa-industry-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    min-height: clamp(76px, 8.5vw, 120px);
    padding: 18px 0;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(24px, 3vw, 48px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-industry-num {
    flex: none;
    width: 1.4em;
    font-size: 0.42em;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--pixa-ink-muted);
    font-variant-numeric: tabular-nums;
}

.pixa-industry-name {
    flex: 1 1 auto;
    min-width: 0;
}

.pixa-industry-arrow {
    flex: none;
    font-size: 0.7em;
    color: var(--pixa-ink-muted);
    transition: transform 0.6s ease, color 0.45s ease;
}

.pixa-flap {   /* one cell of the departure board (pixa-home.js): a letter that folds edge-on and unfolds as the next */
    position: relative;
    display: inline-block;
    backface-visibility: hidden;
    transition: none;
}

.is-board .pixa-flap {   /* while the board runs each cell keeps its final width and clips a wider glyph, like a real cell window */
    text-align: center;
    overflow: hidden;
}

.is-board .pixa-flap::after,
.pixa-industry-num.pixa-flap::after {   /* the seam through the cell, only while the board runs */
    content: "";
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    top: 50%;
    height: 1px; /* taste-skill-ignore: the split-flap seam, the cut through every cell of a departure board, shown only while it flips */
    margin-top: -0.5px;
    background: var(--pixa-ground);
}

.pixa-industry-link:hover .pixa-industry-arrow,
.pixa-industry-link:focus-visible .pixa-industry-arrow {
    transform: translateX(8px);
    color: var(--pixa-accent);
}

.pixa-industry-link:focus-visible {
    outline: 2px solid var(--pixa-accent);
    outline-offset: -2px;
}

.pixa-industry-band {   /* the band: the row inverted, parked below it until the pointer comes in (the script moves it) */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #ffffff;
    color: var(--pixa-ground);
    transform: translateY(101%);
    pointer-events: none;
}

.pixa-industry-track {   /* two identical halves; the script slides the track by half its width on a loop */
    display: flex;
    flex: none;   /* never shrunk to the band: the halves keep their full width */
    align-items: center;
    width: max-content;
    will-change: transform;
}

.pixa-industry-cell {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(20px, 2.4vw, 40px);
    padding-right: clamp(20px, 2.4vw, 40px);
    white-space: nowrap;
}

.pixa-industry-word {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(22px, 2.6vw, 42px);
    font-weight: 800;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.pixa-industry-line,
.pixa-industry-work {
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(14, 18, 24, 0.6);
}

.pixa-industry-cell img {
    display: block;
    flex: none;
    height: clamp(44px, 5vw, 72px);
    width: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (hover: none), (pointer: coarse) {   /* no pointer to come in by: the rows are plain links */
    .pixa-industry-band {
        display: none;
    }
}


/* the FAQ: the head across the top; below it the questions down the left, a gradient indicator sliding to the open one,
   and the answer in a sticky panel on the right (pixa-home.js builds the panel mode on wide screens; below 992px the
   questions open in place) */
.pixa-faq-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px clamp(40px, 6vw, 96px);
    align-items: start;
}

.pixa-faq-note {
    margin-bottom: 10px;
}

.pixa-faq-list {
    position: relative;
}

.pixa-faq-indicator {   /* the open question's mark: a gradient bar on the list's edge, slid there by the script */
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;   /* taste-skill-ignore: the indicator bar */
    height: 48px;
    background: var(--pixa-grad);
    opacity: 0;
    pointer-events: none;
}

.pixa-faq.is-panel .pixa-faq-indicator {
    opacity: 1;
}

.pixa-faq-item {
    position: relative;
}

.pixa-faq-item::before {   /* the rule above each question */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;   /* taste-skill-ignore: the rule between questions, the site's own rule weight */
    background: rgba(255, 255, 255, 0.12);
}

.pixa-faq-item:first-child::before {
    display: none;
}

.pixa-faq-q {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    padding: 20px 0 20px 22px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--pixa-ink-secondary);
    transition: color 0.45s ease;
    -webkit-tap-highlight-color: transparent;
}

.pixa-faq-q:focus-visible {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 4px;
}

.pixa-faq-num {
    flex: none;
    width: 1.6em;
    padding-top: 0.3em;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--pixa-ink-muted);
    font-variant-numeric: tabular-nums;
    transition: color 0.45s ease;
}

.pixa-faq-text {
    flex: 1 1 auto;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.45s ease;
}

.pixa-faq-q:hover .pixa-faq-text,
.pixa-faq-item.is-open .pixa-faq-text {
    color: #ffffff;
}

.pixa-faq-q:hover .pixa-faq-text {
    transform: translateX(8px);
}

.pixa-faq-item.is-open .pixa-faq-num {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

.pixa-faq-mark {   /* a plus that becomes a minus (the accordion); in panel mode an arrow that points to the panel */
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    margin-top: 0.05em;
}

.pixa-faq-mark::before,
.pixa-faq-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;   /* taste-skill-ignore: the bars of the plus */
    margin: -1px 0 0 -8px;
    background: var(--pixa-grad);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.45s ease;
}

.pixa-faq-mark::after {
    transform: rotate(90deg);
}

.pixa-faq-item.is-open .pixa-faq-mark::after {
    transform: rotate(0deg);
}

.pixa-faq.is-panel .pixa-faq-mark::after {
    opacity: 0;
}

.pixa-faq.is-panel .pixa-faq-mark::before {   /* the arrow's shaft; the head is drawn by the open row only */
    opacity: 0;
    transform: translateX(-6px);
}

.pixa-faq.is-panel .pixa-faq-item.is-open .pixa-faq-mark::before,
.pixa-faq.is-panel .pixa-faq-q:hover .pixa-faq-mark::before {
    opacity: 1;
    transform: translateX(0);
}

.pixa-faq-a {
    overflow: hidden;
}

.pixa-faq-list.is-ready .pixa-faq-item:not(.is-open) .pixa-faq-a {   /* the script owns the heights once it runs; without it every answer stands open */
    height: 0;
}

.pixa-faq.is-panel .pixa-faq-a {   /* panel mode: the answers live in the panel */
    display: none;
}

.pixa-faq-a-in {
    padding: 0 46px 24px calc(2.2em + 40px);
}

.pixa-faq-a-in p {
    margin: 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--pixa-ink-secondary);
}

.pixa-faq-panel {   /* the answer, on a surface; sticky beside the list */
    position: sticky;
    top: 110px;
    display: none;
    flex-direction: column;
    min-height: 360px;
    padding: 40px 44px 36px;
    background: var(--pixa-surface);
    overflow: hidden;
}

.pixa-faq.is-panel .pixa-faq-panel {
    display: flex;
}

.pixa-faq-panel-num {   /* the number, large and faint, above the question */
    display: block;
    margin: -6px 0 6px -2px;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(64px, 6vw, 96px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.1);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.pixa-faq-panel-q {
    position: relative;
    margin: 0 0 18px;
    max-width: 18em;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-transform: none;
    color: #ffffff;
}

.pixa-faq-panel-a {
    position: relative;
    margin: 0;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--pixa-ink-secondary);
}

.pixa-faq-panel-nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: auto;
    padding-top: 36px;
}

.pixa-faq-panel-nav .pixa-text-link {   /* buttons in the text-link's clothes (its gradient text needs its background kept) */
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    font: inherit;
}

.pixa-faq-prev .pixa-link-arrow {   /* the arrow the button script draws points right; Previous turns it round */
    transform: scaleX(-1);
}

.pixa-faq-prev:hover .pixa-link-arrow {
    transform: scaleX(-1) translateX(4px);
}

@media (max-width: 991px) {
    .pixa-faq-body {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .pixa-faq-panel {
        display: none !important;
    }
    .pixa-faq-q {
        padding-left: 0;
    }
    .pixa-faq-a-in {
        padding: 0 28px 24px 2.2em;
    }
}

}

@media (max-width: 991px) {
    .pixa-search-grid,
    .pixa-plans {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .pixa-industry-link {
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .pixa-ask {
        padding: 14px 20px;
    }
    .pixa-ask-line {
        flex: 1 1 0;
        min-width: 0;
        min-height: 2.6em;   /* two lines, so the bar keeps its height while the question types and wraps */
        font-size: 16px;
    }
    .pixa-ask-q {
        white-space: normal;
    }
    .pixa-ask-q.is-answer {   /* on phones the answer types in the question's place (pixa-home.js) */
        background-image: var(--pixa-grad);
        -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
        background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
        color: transparent;
    }
    .pixa-ask-a {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pixa-faq-q:hover .pixa-faq-text {
        transform: none;
    }
    .pixa-ask-caret {
        animation: none;
    }
    .pixa-ask-a {
        opacity: 1;
    }
    .pixa-compare-us {
        opacity: 1;
        transform: none;
    }
    .pixa-compare-us::after {
        transform: scaleX(1);
    }
}

/* ==========================================================================
   The craft wall (template-parts/section-craft.php, after React Bits' Masonry): three columns of drawn pieces, each
   whole at its own proportions on a surface; under the pointer the piece lifts, four corners draw around it
   (pixa-pages.js) and its name comes up. A click opens the piece full size in the lightbox.
   ========================================================================== */
.pixa-craft {
    padding: clamp(72px, 9vh, 110px) 0;
}

.pixa-craft-wall {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 24px;
}

.pixa-craft-piece {
    break-inside: avoid;
    margin: 0 0 24px;
}

.pixa-craft-link {
    display: block;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.pixa-craft-frame {
    position: relative;
    display: block;
    padding: 14px;
    background: var(--pixa-surface);
    transition: background-color 0.45s ease;
}

.pixa-craft-link:hover .pixa-craft-frame,
.pixa-craft-link:focus-visible .pixa-craft-frame {
    background: var(--pixa-surface-hover);
}

.pixa-craft-link:focus-visible .pixa-craft-frame {
    outline: 2px solid var(--pixa-accent);
    outline-offset: 3px;
}

.pixa-craft-frame img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateZ(0);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.pixa-craft-link:hover .pixa-craft-frame img {
    transform: scale(1.025);
}

.pixa-craft-corners {   /* the drawn frame: four corners inside the padding, drawn by the script under the pointer */
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    overflow: visible;
    pointer-events: none;
}

.pixa-craft-corners path {
    fill: none;
    stroke: url(#pixa-grad-ico);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.pixa-craft-link:hover .pixa-craft-corners path,
.pixa-craft-link:focus-visible .pixa-craft-corners path {
    opacity: 1;
}

.pixa-craft-cap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 2px 0;
}

.pixa-craft-title {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pixa-ink-secondary);
    transition: color 0.45s ease;
}

.pixa-craft-link:hover .pixa-craft-title {
    color: #ffffff;
}

.pixa-craft-kind {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
}

@media (max-width: 991px) {
    .pixa-craft-wall {
        columns: 2;
        column-gap: 16px;
    }
    .pixa-craft-piece {
        margin-bottom: 16px;
    }
}

@media (max-width: 575px) {
    .pixa-craft-wall {
        columns: 1;
    }
    .pixa-craft-frame {
        padding: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pixa-craft-frame img,
    .pixa-craft-corners path {
        transition: none;
    }
    .pixa-craft-link:hover .pixa-craft-frame img {
        transform: none;
    }
}

/* ==========================================================================
   The lightbox (Magnific Popup, main.js .popup-image: the craft wall, the illustrations sheet). Its own stylesheet is
   linked in header.php; these set it in the site's clothes: the page black behind, the piece whole on a surface, the
   caption and the count in the site's type, the arrows and the close as plain marks.
   ========================================================================== */
.mfp-bg {
    background: var(--pixa-ground, #030406) !important;   /* the template sheet paints it grey with its own !important */
    opacity: 0.94;
}

.mfp-figure::after {   /* the plugin's own frame halo and fill: off */
    box-shadow: none; /* taste-skill-ignore: this turns the plugin's halo off */
    background: transparent;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-container {
    padding: 0 48px;
}

.mfp-image-holder .mfp-content {
    max-width: min(1200px, 92vw);
}

img.mfp-img {   /* the plugin's own rule is img.mfp-img, so the same weight is needed; it sizes the picture box to the window with the paddings inside it (border-box) */
    padding: 56px 0 72px;
    background: transparent;
}

.mfp-bottom-bar {
    margin-top: -64px;
    padding: 0 2px;
}

.mfp-title {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.mfp-counter {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
}

.mfp-arrow,
.mfp-close {
    opacity: 0.8;
    transition: opacity 0.45s ease;
}

.mfp-arrow:hover,
.mfp-close:hover,
.mfp-arrow:focus-visible,
.mfp-close:focus-visible {
    opacity: 1;
}

.mfp-close {   /* the plugin's own font stack stays: the heading font's subset has no multiplication sign for the cross */
    top: 10px;
    right: 6px;
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 44px;
    color: #ffffff;
}

.mfp-image-holder .mfp-close {
    right: 0;
    text-align: right;
    padding-right: 4px;
}

.mfp-close::after {   /* the template draws the cross with a Font Awesome glyph the site does not load (a box): a plain multiplication sign instead */
    content: "×";
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 44px;
    text-align: center;
    color: #ffffff;
}

@media (max-width: 767px) {
    .mfp-close::after {
        right: 0;
        margin-top: 0;
    }
}

.mfp-arrow::before,
.mfp-arrow::after {
    border-color: transparent;
}

.mfp-arrow-left::after {
    border-right-color: #ffffff;
}

.mfp-arrow-right::after {
    border-left-color: #ffffff;
}

.mfp-preloader {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
}

.mfp-zoom-out-cur {
    cursor: zoom-out;
}

@media (max-width: 767px) {
    .mfp-container {
        padding: 0 16px;
    }
    .mfp-img {
        padding: 48px 0 64px;
    }
}

/* ==========================================================================
   The One Studio document, the additions: the hero's eyebrow and trust line; the loader's rotating tagline; the
   services hero's jump links; a lane's related work; "what working with us feels like"; the case study's second call;
   the contact page's markets line.
   ========================================================================== */
.hero__eyebrow {
    margin-bottom: 18px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.hero__trust {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--pixa-ink-muted);
}

.pixa-loader__tag {   /* the tagline is a stack: the six service words take their turn, the brand line settles last (pixa-loader.js) */
    height: 1.4em;
    width: 16em;
}

.pixa-loader__tag span {
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
}

.pixa-loader__tag .is-final {
    opacity: 0;
}

.pixa-no-loader .pixa-loader__tag .is-final {
    opacity: 1;
}

.pixa-sv-jump {   /* the six lanes, one row of small links under the services hero's intro */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 24px auto 0;
    transition: none;   /* moved by the script */
}

.pixa-sv-jump a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pixa-ink-secondary);
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-sv-jump a:hover,
.pixa-sv-jump a:focus-visible {
    color: #ffffff;
}

.pixa-lane-related {   /* the case studies a lane points to */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin: 22px 0 0;
}

.pixa-lane-related a {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.32);
    text-underline-offset: 0.22em;
    transition: color 0.45s ease, text-decoration-color 0.45s ease;
}

.pixa-lane-related a:hover,
.pixa-lane-related a:focus-visible {
    color: var(--pixa-accent);
    text-decoration-color: var(--pixa-accent);
}

.pixa-way-feels {
    padding: clamp(72px, 10vh, 120px) 0;
    background: var(--pixa-ground);
}

.pixa-way-feels-list {
    list-style: none;
    margin: clamp(32px, 4vh, 48px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px clamp(20px, 2.5vw, 40px);
}

.pixa-way-feels-list li {
    position: relative;
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    transition: none;   /* risen by the script */
}

.pixa-way-feels-num {   /* the count sets the items apart: the brand gradient on the numeral, air under it */
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    background-image: var(--pixa-grad); /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
    width: max-content;
}

.pixa-case-next-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.pixa-contact-markets {
    margin: 10px 0 0;
    max-width: 40ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pixa-ink-muted);
}

@media (max-width: 991px) {
    .pixa-way-feels-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .hero__actions .pixa-btn {
        flex: 1 1 auto;
    }
    .pixa-way-feels-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Industries page: the reel (a pinned stage on wide screens, a column otherwise) and the sector chapters
   ========================================================================== */
.pixa-reel {
    position: relative;
}

.pixa-reel-stage {
    position: relative;
}

.pixa-reel-stage.is-stage {   /* wide screens with the script: the panels share one stage the scroll turns through */
    height: 100vh; /* taste-skill-ignore: wide screens only, where the viewport height does not jump */
}

.is-stage .pixa-reel-panels {
    display: grid;
    align-items: center;
    height: 100%;
}

.pixa-reel-panel {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 32px clamp(32px, 5vw, 96px);
    align-items: center;
    padding: clamp(40px, 6vh, 72px) 0;
}

.is-stage .pixa-reel-panel {   /* every panel in the same cell; the script shows one */
    grid-area: 1 / 1;
    padding: 0 56px 0 0;
}

.pixa-reel-index {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--tpl-ff-heading, inherit);
    font-variant-numeric: tabular-nums;
}

.pixa-reel-n {
    display: inline-block;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.pixa-reel-of {
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--pixa-ink-muted);
}

.pixa-reel-name {
    margin: 0 0 18px;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(34px, 4.6vw, 76px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-transform: none;
}

.is-stage .pixa-reel-name {   /* the letters rise out of the baseline and fall below it */
    overflow: hidden;
    padding-bottom: 0.1em;
    margin-bottom: 10px;
}

.pixa-reel-line {
    margin: 0 0 20px;
    max-width: 46ch;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    color: var(--pixa-ink-secondary);
    transition: none;
}

.pixa-reel-lanes {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    transition: none;
}

.pixa-reel-lanes li {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
    transition: none;
}

.pixa-reel-more {
    transition: none;
}

.pixa-reel-fan {   /* three covers fanned like cards on a table */
    position: relative;
    height: clamp(220px, 24vw, 340px);
}

.pixa-reel-card {
    position: absolute;
    top: 50%;
    width: 62%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    transform-origin: 50% 100%;
}

.pixa-reel-card:nth-child(1) { left: 0; transform: translateY(-50%) rotate(-6deg); z-index: 1; }
.pixa-reel-card:nth-child(2) { left: 19%; transform: translateY(-56%); z-index: 2; }
.pixa-reel-card:nth-child(3) { left: 38%; transform: translateY(-50%) rotate(6deg); z-index: 3; }

.pixa-reel-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixa-reel-rail {   /* the place in the reel: six ticks, the active one long and lit */
    position: absolute;
    right: 0;
    top: 50%;
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateY(-50%);
}

.is-stage .pixa-reel-rail {
    display: flex;
}

.pixa-reel-tick {
    display: block;
    width: 32px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pixa-reel-tick span {
    display: block;
    width: 14px;
    height: 3px;
    margin-left: auto;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.24);
    transition: width 0.6s ease, background-color 0.45s ease;
}

.pixa-reel-tick:hover span,
.pixa-reel-tick:focus-visible span {
    background: rgba(255, 255, 255, 0.6);
}

.pixa-reel-tick.is-active span {
    width: 32px;
    background: var(--pixa-grad); /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
}

.pixa-sector {
    padding: clamp(80px, 11vh, 140px) 0;
}

.pixa-sector-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px clamp(32px, 5vw, 96px);
    align-items: start;
}

.pixa-sector.is-flip .pixa-sector-copy {
    order: 2;
}

.pixa-sector-copy.pixa-section-head {   /* the chapter's copy stacks: label, title, line, lanes, link */
    display: block;
}

.pixa-sector-copy .pixa-section-intro {
    margin-top: 22px;
    max-width: 44ch;
}

.pixa-sector-lanes {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.pixa-sector-lanes li {
    transition: none;
}

.pixa-sector-lanes a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.45s ease;
}

.pixa-sector-lanes a:hover,
.pixa-sector-lanes a:focus-visible {
    color: var(--pixa-accent);
}

.pixa-sector-lane-tag {
    flex: none;
    width: 84px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pixa-ink-muted);
}

.pixa-sector-lane-name {
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pixa-sector-talk {
    margin-top: 30px;
}

.pixa-sector-work {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
}

.pixa-sector-work .pixa-sector-case:first-child:nth-last-child(odd) {   /* an odd count: the first case takes the row */
    grid-column: 1 / -1;
}

.pixa-sector-case {
    display: block;
    color: #ffffff;
    text-decoration: none;
}

.pixa-sector-cover {
    margin: 0 0 12px;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.pixa-sector-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pixa-sector-case-name {
    display: block;
    font-family: var(--tpl-ff-heading, inherit);
    font-size: clamp(18px, 1.4vw, 21px);
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: color 0.45s ease;
}

.pixa-sector-case:hover .pixa-sector-case-name,
.pixa-sector-case:focus-visible .pixa-sector-case-name {
    color: var(--pixa-accent);
}

.pixa-sector-case-sector {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--pixa-ink-muted);
}

@media (max-width: 991px) {
    .pixa-reel-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .pixa-reel-fan {
        height: clamp(180px, 44vw, 260px);
    }
    .pixa-sector-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-sector.is-flip .pixa-sector-copy {
        order: 0;
    }
}

@media (max-width: 575px) {
    .pixa-sector-work {
        grid-template-columns: minmax(0, 1fr);
    }
    .pixa-sector-lane-tag {
        width: 80px;
    }
}

/* The sections that paint the ground or the deep tone go see-through, so the page texture shows between the content
   (kept last: it must win over each section's own fill above). */
.pixa-facts,
.pixa-characters,
.pixa-about,
.pixa-marquee,
.pixa-services,
.pixa-acc,
.pixa-process-section,
.pixa-testimonials,
.pixa-cta,
.pixa-footer,
.pixa-sheet,
.pixa-way-chapters,
.pixa-lanes,
.pixa-about-open,
.pixa-page-hero,
.pixa-story,
.pixa-service-rows,
.pixa-case,
.pixa-contact,
.pixa-prose-section,
.pixa-journal,
.pixa-journal-post,
.pixa-ha-hero,
.pixa-sv-hero,
.pixa-article,
.pixa-compare,
.pixa-search,
.pixa-industries,
.pixa-engagements,
.pixa-faq,
.pixa-craft {
    background-color: transparent;
}

/* The cursor, locked on to something clickable: the dot, the corners and the label in the brand gradient */
.pixa-cursor.is-locked .pixa-cursor__dot {
    background: var(--pixa-grad);
}

.pixa-cursor.is-locked .pixa-cursor__corner {
    border-image: var(--pixa-grad) 1;
}

.pixa-cursor.is-locked .pixa-cursor__label {
    background-image: var(--pixa-grad);
    -webkit-background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    background-clip: text; /* taste-skill-ignore: the brand gradient, used wherever the flat blue was */
    color: transparent;
}

/* The footer wordmark: polished chrome, seen from the front and a little above. Three layers clipped to the letters: a
   shine that keeps sweeping the word left to right while the footer is in view (one streak across the word: --shx on
   the word, --shw its width, --bx the letter's left), a fine horizontal brush grain, and the chrome itself (light at the
   top, a soft dip at the middle, bright again below, dim at the foot). Behind the face the letter's depth (::before):
   the letter stepped back and up toward a point above the middle of the word, in blue slate that darkens with the
   distance. No outline, no transform. */
.pixa-footer-letter {
    background-image:
        linear-gradient(120deg, rgba(0, 0, 0, 0) 36%, rgba(10, 13, 18, 0.28) 44%, rgba(255, 255, 255, 1) 50%, rgba(10, 13, 18, 0.28) 56%, rgba(0, 0, 0, 0) 64%), /* taste-skill-ignore: the sweeping shine (after React Bits' Shiny Text): a white line with a shaded edge either side, the way a reflection crosses chrome; clipped to the letters */
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(0, 0, 0, 0) 1px 3px), /* taste-skill-ignore: the brush grain, clipped to the letters */
        linear-gradient(180deg, #ffffff 0%, #f0f2f4 14%, #cfd5db 36%, #a9b1bb 50%, #d9dee3 62%, #f1f3f5 74%, #b9c0c8 90%, #8e97a2 100%); /* taste-skill-ignore: the chrome, clipped to the letters */
    background-repeat: no-repeat, repeat, no-repeat;
    background-position: calc(var(--shx, -9999px) - var(--bx)) 0, 0 0, 0 0;   /* the shine: one streak across the word */
    -webkit-background-clip: text; /* taste-skill-ignore: the chrome is a gradient clipped to the letters */
    background-clip: text; /* taste-skill-ignore: the chrome is a gradient clipped to the letters */
    color: transparent;
}

.pixa-footer-letter::before {   /* the depth: the letter stepped back and up, 0.27em, toward the point above the middle of the word (--vx is its horizontal step), in blue slate that darkens into the distance; under the faces (the word is the stacking context) */
    content: attr(data-ch);
    position: absolute;
    inset: 0;
    z-index: var(--zi);
    color: #66728a;
    pointer-events: none;
    text-shadow: /* taste-skill-ignore: the depth that makes the chrome letters solid blocks */
        calc(var(--vx) * 1) -0.0045em 0 #66728a,
        calc(var(--vx) * 2) -0.0090em 0 #606b82,
        calc(var(--vx) * 3) -0.0135em 0 #5c687e,
        calc(var(--vx) * 4) -0.0180em 0 #59647a,
        calc(var(--vx) * 5) -0.0225em 0 #576277,
        calc(var(--vx) * 6) -0.0270em 0 #545f74,
        calc(var(--vx) * 7) -0.0315em 0 #525d71,
        calc(var(--vx) * 8) -0.0360em 0 #505a6e,
        calc(var(--vx) * 9) -0.0405em 0 #4e586c,
        calc(var(--vx) * 10) -0.0450em 0 #4c566a,
        calc(var(--vx) * 11) -0.0495em 0 #4a5467,
        calc(var(--vx) * 12) -0.0540em 0 #485265,
        calc(var(--vx) * 13) -0.0585em 0 #475163,
        calc(var(--vx) * 14) -0.0630em 0 #454f61,
        calc(var(--vx) * 15) -0.0675em 0 #434d5f,
        calc(var(--vx) * 16) -0.0720em 0 #424b5d,
        calc(var(--vx) * 17) -0.0765em 0 #404a5b,
        calc(var(--vx) * 18) -0.0810em 0 #3f4859,
        calc(var(--vx) * 19) -0.0855em 0 #3d4757,
        calc(var(--vx) * 20) -0.0900em 0 #3c4555,
        calc(var(--vx) * 21) -0.0945em 0 #3a4354,
        calc(var(--vx) * 22) -0.0990em 0 #394252,
        calc(var(--vx) * 23) -0.1035em 0 #384050,
        calc(var(--vx) * 24) -0.1080em 0 #363f4e,
        calc(var(--vx) * 25) -0.1125em 0 #353e4d,
        calc(var(--vx) * 26) -0.1170em 0 #343c4b,
        calc(var(--vx) * 27) -0.1215em 0 #323b49,
        calc(var(--vx) * 28) -0.1260em 0 #313948,
        calc(var(--vx) * 29) -0.1305em 0 #303846,
        calc(var(--vx) * 30) -0.1350em 0 #2f3745,
        calc(var(--vx) * 31) -0.1395em 0 #2d3543,
        calc(var(--vx) * 32) -0.1440em 0 #2c3442,
        calc(var(--vx) * 33) -0.1485em 0 #2b3340,
        calc(var(--vx) * 34) -0.1530em 0 #2a323f,
        calc(var(--vx) * 35) -0.1575em 0 #28303d,
        calc(var(--vx) * 36) -0.1620em 0 #272f3c,
        calc(var(--vx) * 37) -0.1665em 0 #262e3a,
        calc(var(--vx) * 38) -0.1710em 0 #252d39,
        calc(var(--vx) * 39) -0.1755em 0 #242b37,
        calc(var(--vx) * 40) -0.1800em 0 #232a36,
        calc(var(--vx) * 41) -0.1845em 0 #222935,
        calc(var(--vx) * 42) -0.1890em 0 #212833,
        calc(var(--vx) * 43) -0.1935em 0 #1f2732,
        calc(var(--vx) * 44) -0.1980em 0 #1e2530,
        calc(var(--vx) * 45) -0.2025em 0 #1d242f,
        calc(var(--vx) * 46) -0.2070em 0 #1c232e,
        calc(var(--vx) * 47) -0.2115em 0 #1b222c,
        calc(var(--vx) * 48) -0.2160em 0 #1a212b,
        calc(var(--vx) * 49) -0.2205em 0 #19202a,
        calc(var(--vx) * 50) -0.2250em 0 #181f29,
        calc(var(--vx) * 51) -0.2295em 0 #171e27,
        calc(var(--vx) * 52) -0.2340em 0 #161c26,
        calc(var(--vx) * 53) -0.2385em 0 #151b25,
        calc(var(--vx) * 54) -0.2430em 0 #141a23,
        calc(var(--vx) * 55) -0.2475em 0 #131922,
        calc(var(--vx) * 56) -0.2520em 0 #121821,
        calc(var(--vx) * 57) -0.2565em 0 #111720,
        calc(var(--vx) * 58) -0.2610em 0 #10161e,
        calc(var(--vx) * 59) -0.2655em 0 #0f151d,
        calc(var(--vx) * 60) -0.2700em 0 #0e141c;
}