// =============================================================
// Design-token prelude from site-scape_ventures/src/static/scss/abstracts/_variables.scss
// =============================================================

// =============================================================================
// Variables & Design Tokens
// =============================================================================

@use "sass:math";
@use "sass:map";
@use "sass:color";
// `q()` / `baseline()` units — without this, q(...) is emitted as a literal
// (unknown) CSS function and the browser silently drops those declarations.
@use "../01-core/external" as *;
@use "../01-core/config" as cfg;

// =============================================================================
// Opt-out switch
// =============================================================================
//
// The whole layer — the token prelude as well as the rules — is wrapped in a
// single `@if` so a consumer whose markup never used the legacy scapepress
// classes can drop ~890 KiB of source from its build:
//
//     @use "pkg:stylescape/scss" with ($scapepress-parity: false);
//
// The flag defaults to `true`, so the emitted CSS is unchanged for everyone
// who passes no configuration. The variables below are scoped to the `@if`
// block; nothing outside this file reads them.
// =============================================================================

@if cfg.$scapepress-parity {

// =============================================================================
// hue.gl Color Map (0.1.1)
// =============================================================================

$hue: (
    // Grey
    N0001: #e2e2e2, N0002: #cccccc, N0003: #b6b6b6, N0004: #a0a0a0, N0005: #8b8b8b,
    N0006: #777777, N0007: #636363, N0008: #505050, N0009: #3e3e3e,
    // Salmon
    N0151: #fadbdd, N0152: #eec0c4, N0153: #e2a6ac, N0154: #d48c94, N0155: #c6727d,
    N0156: #a7636b, N0157: #89545a, N0158: #6b4549, N0159: #4f3739,
    // Orange
    N0301: #fadbd7, N0302: #edc1bc, N0303: #e0a8a1, N0304: #d28e87, N0305: #c4756e,
    N0306: #a5655f, N0307: #875650, N0308: #6b4642, N0309: #4f3835,
    // Amber
    N0451: #f8dcd3, N0452: #eac3b5, N0453: #dcaa98, N0454: #cd927c, N0455: #be7960,
    N0456: #a06954, N0457: #845848, N0458: #68483c, N0459: #4d3931,
    // Yellow
    N0601: #f4decf, N0602: #e5c6af, N0603: #d5ad90, N0604: #c59672, N0605: #b57f55,
    N0606: #996d4b, N0607: #7e5b41, N0608: #644a38, N0609: #4a3a2e,
    // Lime
    N0751: #efe0cc, N0752: #dec8ac, N0753: #cdb18c, N0754: #bb9b6c, N0755: #a9854e,
    N0756: #8f7145, N0757: #765f3d, N0758: #5e4d34, N0759: #473c2c,
    // Ecru
    N0901: #eae2cb, N0902: #d6cbaa, N0903: #c2b58a, N0904: #af9f6a, N0905: #9b8a4b,
    N0906: #847643, N0907: #6d623b, N0908: #584f33, N0909: #433d2b,
    // Olive
    N1051: #e3e4cc, N1052: #cdceab, N1053: #b7b98b, N1054: #a1a46b, N1055: #8b8f4c,
    N1056: #777a44, N1057: #63663c, N1058: #505234, N1059: #3e3f2c,
    // Green
    N1201: #dde6ce, N1202: #c4d1ae, N1203: #abbc8f, N1204: #92a870, N1205: #7a9453,
    N1206: #697e49, N1207: #586840, N1208: #485437, N1209: #39402d,
    // Forest
    N1351: #d7e7d2, N1352: #bbd3b3, N1353: #9fbf96, N1354: #83ab79, N1355: #68975d,
    N1356: #5a8151, N1357: #4d6b46, N1358: #40553b, N1359: #344130,
    // Jade
    N1501: #d1e8d6, N1502: #b2d4ba, N1503: #93c19f, N1504: #74ad84, N1505: #559a6a,
    N1506: #4b835c, N1507: #426c4e, N1508: #395741, N1509: #2f4234,
    // Mint
    N1651: #cde9dc, N1652: #abd6c2, N1653: #89c2a9, N1654: #66af91, N1655: #409b7a,
    N1656: #3c8469, N1657: #376d58, N1658: #315848, N1659: #2b4338,
    // Cyan
    N1801: #c9e9e2, N1802: #a6d6cb, N1803: #81c3b5, N1804: #5baf9f, N1805: #2a9c8a,
    N1806: #2d8576, N1807: #2d6e62, N1808: #2b584f, N1809: #28433d,
    // Teal
    N1951: #c8e9e8, N1952: #a3d6d4, N1953: #7dc3c0, N1954: #53afad, N1955: #109c9a,
    N1956: #208583, N1957: #266e6d, N1958: #275857, N1959: #264342,
    // Capri
    N2101: #c8e9ed, N2102: #a3d5dc, N2103: #7dc2cb, N2104: #52aeba, N2105: #019baa,
    N2106: #1c8490, N2107: #246d76, N2108: #27575e, N2109: #264246,
    // Sky
    N2251: #cae8f2, N2252: #a6d4e3, N2253: #81c0d4, N2254: #58acc6, N2255: #1a99b7,
    N2256: #25829a, N2257: #2a6c7e, N2258: #2a5664, N2259: #27424a,
    // Blue
    N2401: #cee6f6, N2402: #acd2e9, N2403: #8abedc, N2404: #65aace, N2405: #3696c1,
    N2406: #3680a3, N2407: #346a85, N2408: #305568, N2409: #2b414d,
    // Azure
    N2551: #d3e5f8, N2552: #b5cfec, N2553: #95bbe0, N2554: #75a6d4, N2555: #5192c8,
    N2556: #497ca8, N2557: #416789, N2558: #39536b, N2559: #303f4f,
    // Indigo
    N2701: #dae3f9, N2702: #becdee, N2703: #a3b7e2, N2704: #87a2d6, N2705: #6a8dca,
    N2706: #5d78aa, N2707: #4f648b, N2708: #42516c, N2709: #353e50,
    // Violet
    N2851: #e0e1f9, N2852: #c8caed, N2853: #b1b3e1, N2854: #999dd5, N2855: #8188c8,
    N2856: #6f74a8, N2857: #5d6189, N2858: #4c4e6c, N2859: #3b3c4f,
    // Magenta
    N3001: #e7dff6, N3002: #d3c7e9, N3003: #beafdc, N3004: #aa98cf, N3005: #9582c2,
    N3006: #7f6fa3, N3007: #6a5d86, N3008: #554c69, N3009: #413b4d,
    // Purple
    N3151: #edddf3, N3152: #dcc4e4, N3153: #caacd6, N3154: #b994c7, N3155: #a77cb9,
    N3156: #8d6b9c, N3157: #755a7f, N3158: #5d4964, N3159: #46394b,
    // Rose
    N3301: #f3dcee, N3302: #e3c2dd, N3303: #d4a9cd, N3304: #c590bc, N3305: #b577ac,
    N3306: #996791, N3307: #7d5777, N3308: #63475f, N3309: #4a3847,
    // Pink
    N3451: #f7dbe9, N3452: #e9c1d5, N3453: #dba7c2, N3454: #cd8daf, N3455: #bf739d,
    N3456: #a16485, N3457: #84546e, N3458: #684658, N3459: #4d3743,
    // Red
    N3601: #f9dbe3, N3602: #edc0cd, N3603: #e0a6b7, N3604: #d38ca2, N3605: #c5728d,
    N3606: #a66278, N3607: #885464, N3608: #6b4551, N3609: #4f373e,
);

// =============================================================================
// Color Palette
// =============================================================================

$color-primary: #1a1a1a;
$color-primary-light: #0a0a0a;
$color-accent: map.get($hue, N2555);         // #5192c8 - Azure
$color-accent-light: map.get($hue, N2553);   // #95bbe0
$color-accent-dark: map.get($hue, N2557);    // #416789

$color-white: #ffffff;
$color-gray-50: map.get($hue, N0001);        // #e2e2e2
$color-gray-100: map.get($hue, N0001);       // #e2e2e2
$color-gray-200: map.get($hue, N0002);       // #cccccc
$color-gray-300: map.get($hue, N0003);       // #b6b6b6
$color-gray-400: map.get($hue, N0004);       // #a0a0a0
$color-gray-500: map.get($hue, N0006);       // #777777
$color-gray-600: map.get($hue, N0007);       // #636363
$color-gray-700: map.get($hue, N0008);       // #505050
$color-gray-800: map.get($hue, N0009);       // #3e3e3e
$color-gray-900: map.get($hue, N0009);       // #3e3e3e (darkest available)

$color-success: map.get($hue, N1505);        // #559a6a - Jade
$color-warning: map.get($hue, N0605);        // #b57f55 - Yellow
$color-error: map.get($hue, N3605);          // #c5728d - Red

// =============================================================================
// Typography
// =============================================================================

$font-sans: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-display: $font-sans;

$font-size-xs: q(12);
$font-size-sm: q(14);
$font-size-base: q(16);
$font-size-lg: q(18);
$font-size-xl: q(20);
$font-size-2xl: q(24);
$font-size-3xl: q(30);
$font-size-4xl: q(36);
$font-size-5xl: q(48);
$font-size-6xl: q(60);
$font-size-7xl: q(72);

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

$line-height-tight: 1.1;
$line-height-snug: 1.25;
$line-height-normal: 1.5;
$line-height-relaxed: 1.625;

// =============================================================================
// Spacing
// =============================================================================

$spacing-1: q(4);
$spacing-2: q(8);
$spacing-3: q(12);
$spacing-4: q(16);
$spacing-5: q(20);
$spacing-6: q(24);
$spacing-8: q(32);
$spacing-10: q(40);
$spacing-12: q(48);
$spacing-16: q(64);
$spacing-20: q(80);
$spacing-24: q(96);
$spacing-32: q(128);

// =============================================================================
// Breakpoints
// =============================================================================

$breakpoint-sm: q(640);
$breakpoint-md: q(768);
$breakpoint-lg: q(1024);
$breakpoint-xl: q(1280);
$breakpoint-2xl: q(1536);

// =============================================================================
// Container
// =============================================================================

$container-max: q(1200);
$container-padding: $spacing-6;

// =============================================================================
// Border Radius (set to 0 for sharp corners)
// =============================================================================

$radius-sm: 0;
$radius-md: 0;
$radius-lg: 0;
$radius-xl: 0;
$radius-2xl: 0;
$radius-full: 0;

// =============================================================================
// Shadows
// =============================================================================

$shadow-sm: 0 q(1) q(2) 0 rgb(0 0 0 / 0.05);
$shadow-md: 0 q(4) q(6) q(-1) rgb(0 0 0 / 0.1), 0 q(2) q(4) q(-2) rgb(0 0 0 / 0.1);
$shadow-lg: 0 q(10) q(15) q(-3) rgb(0 0 0 / 0.1), 0 q(4) q(6) q(-4) rgb(0 0 0 / 0.1);
$shadow-xl: 0 q(20) q(25) q(-5) rgb(0 0 0 / 0.1), 0 q(8) q(10) q(-6) rgb(0 0 0 / 0.1);

// =============================================================================
// Transitions
// =============================================================================

$transition-fast: 150ms ease;
$transition-base: 200ms ease;
$transition-slow: 300ms ease;

// =============================================================
// Design-token prelude from site-scape_press/.staticfiles/scss/abstracts/_variables.scss
// =============================================================

// =============================================================================
// Variables & Design Tokens - Scape Press
// =============================================================================


// =============================================================================
// hue.gl Color Map (0.1.1)
// =============================================================================

$hue: (
    // Grey
    N0001: #e2e2e2, N0002: #cccccc, N0003: #b6b6b6, N0004: #a0a0a0, N0005: #8b8b8b,
    N0006: #777777, N0007: #636363, N0008: #505050, N0009: #3e3e3e,
    // Blue
    N2401: #cee6f6, N2402: #acd2e9, N2403: #8abedc, N2404: #65aace, N2405: #3696c1,
    N2406: #3680a3, N2407: #346a85, N2408: #305568, N2409: #2b414d,
    // Azure
    N2551: #d3e5f8, N2552: #b5cfec, N2553: #95bbe0, N2554: #75a6d4, N2555: #5192c8,
    N2556: #497ca8, N2557: #416789, N2558: #39536b, N2559: #303f4f,
    // Indigo
    N2701: #dae3f9, N2702: #becdee, N2703: #a3b7e2, N2704: #87a2d6, N2705: #6a8dca,
    N2706: #5d78aa, N2707: #4f648b, N2708: #42516c, N2709: #353e50,
    // Violet
    N2851: #e0e1f9, N2852: #c8caed, N2853: #b1b3e1, N2854: #999dd5, N2855: #8188c8,
    N2856: #6f74a8, N2857: #5d6189, N2858: #4c4e6c, N2859: #3b3c4f,
    // Cyan
    N1801: #c9e9e2, N1802: #a6d6cb, N1803: #81c3b5, N1804: #5baf9f, N1805: #2a9c8a,
    N1806: #2d8576, N1807: #2d6e62, N1808: #2b584f, N1809: #28433d,
    // Teal
    N1951: #c8e9e8, N1952: #a3d6d4, N1953: #7dc3c0, N1954: #53afad, N1955: #109c9a,
    N1956: #208583, N1957: #266e6d, N1958: #275857, N1959: #264342,
    // Green
    N1201: #dde6ce, N1202: #c4d1ae, N1203: #abbc8f, N1204: #92a870, N1205: #7a9453,
    N1206: #697e49, N1207: #586840, N1208: #485437, N1209: #39402d,
    // Red
    N3601: #f9dbe3, N3602: #edc0cd, N3603: #e0a6b7, N3604: #d38ca2, N3605: #c5728d,
    N3606: #a66278, N3607: #885464, N3608: #6b4551, N3609: #4f373e,
);

// =============================================================================
// Color Palette - Monochrome (Monks-inspired)
// =============================================================================
//
// Pure black & white identity. No accent colors. Hierarchy is established
// through scale, weight and whitespace, not hue.

$color-black: #000000;
$color-white: #ffffff;

$color-primary: $color-black;
$color-primary-light: #111111;

// "Accent" tokens kept for compatibility but resolved to black so the rest
// of the system reads as monochrome.
$color-accent: $color-black;
$color-accent-light: #222222;
$color-accent-dark: $color-black;

$color-gray-50:  #fafafa;
$color-gray-100: #f2f2f2;
$color-gray-200: #e5e5e5;
$color-gray-300: #d4d4d4;
$color-gray-400: #a3a3a3;
$color-gray-500: #737373;
$color-gray-600: #525252;
$color-gray-700: #2d2d2d;
$color-gray-800: #1a1a1a;
$color-gray-900: #0a0a0a;

$color-success: $color-black;
$color-warning: $color-black;
$color-error:   $color-black;

// =============================================================================
// Typography
// =============================================================================

$font-sans: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-display: $font-sans;

$font-size-xs:  q(12);
$font-size-sm:  q(14);
$font-size-base: q(16);
$font-size-lg:  q(18);
$font-size-xl:  q(22);
$font-size-2xl: q(28);
$font-size-3xl: q(36);
$font-size-4xl: q(48);
$font-size-5xl: q(64);
$font-size-6xl: q(88);
$font-size-7xl: q(112);
$font-size-8xl: q(144);
$font-size-9xl: q(192);

// Fluid display type used for hero / section headlines (Monks-style).
$font-size-display:    clamp(q(48), 9vw, q(128));
$font-size-display-lg: clamp(q(64), 13vw, q(192));

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

$line-height-tight:   0.95;
$line-height-snug:    1.05;
$line-height-normal:  1.5;
$line-height-relaxed: 1.625;

$letter-spacing-tight: -0.04em;
$letter-spacing-snug:  -0.02em;
$letter-spacing-wide:   0.18em;

// =============================================================================
// Spacing
// =============================================================================

$spacing-1: q(4);
$spacing-2: q(8);
$spacing-3: q(12);
$spacing-4: q(16);
$spacing-5: q(20);
$spacing-6: q(24);
$spacing-8: q(32);
$spacing-10: q(40);
$spacing-12: q(48);
$spacing-16: q(64);
$spacing-20: q(80);
$spacing-24: q(96);
$spacing-32: q(128);

// =============================================================================
// Breakpoints
// =============================================================================

$breakpoint-sm: q(640);
$breakpoint-md: q(768);
$breakpoint-lg: q(1024);
$breakpoint-xl: q(1280);
$breakpoint-2xl: q(1536);

// =============================================================================
// Container
// =============================================================================

$container-max: q(1200);
$container-padding: $spacing-6;

// =============================================================================
// Border Radius (set to 0 for sharp corners)
// =============================================================================

$radius-sm: 0;
$radius-md: 0;
$radius-lg: 0;
$radius-xl: 0;
$radius-2xl: 0;
$radius-full: 0;

// =============================================================================
// Shadows
// =============================================================================

$shadow-sm: 0 q(1) q(2) 0 rgb(0 0 0 / 0.05);
$shadow-md: 0 q(4) q(6) q(-1) rgb(0 0 0 / 0.1), 0 q(2) q(4) q(-2) rgb(0 0 0 / 0.1);
$shadow-lg: 0 q(10) q(15) q(-3) rgb(0 0 0 / 0.1), 0 q(4) q(6) q(-4) rgb(0 0 0 / 0.1);
$shadow-xl: 0 q(20) q(25) q(-5) rgb(0 0 0 / 0.1), 0 q(8) q(10) q(-6) rgb(0 0 0 / 0.1);

// =============================================================================
// Transitions
// =============================================================================

$transition-fast: 150ms ease;
$transition-base: 200ms ease;
$transition-slow: 300ms ease;

// ========================================================================
// 32-utilities / scapepress-parity
// ========================================================================
//
// AUTO-GENERATED by bin/gen_scapepress_parity.py — DO NOT EDIT BY HAND.
// Source: every *.scss under /Users/larsvanvianen/Documents/GitHub/scapepress-sites
// Earliest-defining site wins (priority: scape_ventures > scape_group > scape_press > ...).
//
// Every top-level class selector found in the source SCSS is
// re-emitted here under `@layer ss.utilities` with the
// `ss-c-` prefix. Inner class selectors are prefixed too, so
// any `&__child` / `.foo .bar` patterns continue to work after
// the rename.
// ========================================================================

@layer ss.utilities {

    // -- lead  (from site-scape_ventures/src/static/scss/base/_typography.scss) --
    .ss-c-lead {
        font-size: $font-size-xl;
        line-height: $line-height-relaxed;
        color: $color-gray-700;

        @media (min-width: $breakpoint-lg) {
            font-size: $font-size-2xl;
        }
    }

    // -- text-accent  (from site-scape_ventures/src/static/scss/base/_typography.scss) --
    .ss-c-text-accent {
        color: $color-accent;
    }

    // -- btn  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: $spacing-2;
        font-family: $font-sans;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        padding: $spacing-3 $spacing-6;
        border-radius: $radius-md;
        transition: all $transition-base;
        cursor: pointer;
        white-space: nowrap;
    }

    // -- btn-icon  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-icon {
        width: q(16);
        height: q(16);
        transition: transform $transition-base;
    }

    // -- btn-primary  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-primary {
        color: $color-white;
        background: $color-primary;

        &:hover {
            background: $color-accent;
        }
    }

    // -- btn-secondary  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-secondary {
        color: $color-primary;
        background: $color-gray-100;

        &:hover {
            background: $color-gray-200;
        }
    }

    // -- btn-outline  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-outline {
        color: $color-primary;
        background: transparent;
        border: q(1) solid $color-gray-300;

        &:hover {
            border-color: $color-primary;
            background: $color-primary;
            color: $color-white;
        }
    }

    // -- btn-lg  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-lg {
        font-size: $font-size-base;
        padding: $spacing-4 $spacing-8;
        border-radius: $radius-lg;
    }

    // -- portfolio-card  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card {
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
        overflow: hidden;
        transition: all $transition-slow;

        &:hover {
            border-color: $color-primary;
        }
    }

    // -- portfolio-card--featured  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card--featured {
        @media (min-width: $breakpoint-md) {
            grid-column: span 2;
        }
    }

    // -- portfolio-card-inner  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-inner {
        padding: $spacing-6;

        @media (min-width: $breakpoint-sm) {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: $spacing-6;
            align-items: start;
        }
    }

    // -- portfolio-card-logo  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-logo {
        margin-bottom: $spacing-6;

        @media (min-width: $breakpoint-sm) {
            margin-bottom: 0;
        }
    }

    // -- logo-image  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-logo-image {
        display: block;
        width: q(80);
        height: q(80);
        object-fit: contain;
    }

    // -- logo-placeholder  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-logo-placeholder {
        width: q(80);
        height: q(80);
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-primary;
        color: $color-white;
        font-family: $font-display;
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        border-radius: $radius-lg;
    }

    // -- portfolio-card-title  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-title {
        font-size: $font-size-xl;
        margin-bottom: $spacing-3;
    }

    // -- portfolio-card-description  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-description {
        font-size: $font-size-sm;
        margin-bottom: $spacing-4;
    }

    // -- portfolio-card-tags  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-2;
        margin-bottom: $spacing-6;
    }

    // -- portfolio-card-title-link  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-title-link {
        color: inherit;

        &:hover {
            color: $color-accent;
        }
    }

    // -- portfolio-card-links  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: $spacing-4 $spacing-6;
    }

    // -- portfolio-card-link  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-link {
        display: inline-flex;
        align-items: center;
        gap: $spacing-2;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $color-accent;

        svg {
            width: q(16);
            height: q(16);
            transition: transform $transition-base;
        }

        &:hover svg {
            transform: translate(q(4), q(-4));
        }

        &--profile {
            color: $color-primary;

            &:hover svg {
                transform: translateX(q(4));
            }
        }
    }

    // -- service-card  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-service-card {
        padding: $spacing-8;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
        transition: all $transition-slow;

        &:hover {
            border-color: $color-primary;
        }
    }

    // -- service-number  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-service-number {
        font-family: $font-display;
        font-size: $font-size-xs;
        font-weight: $font-weight-bold;
        color: $color-accent;
        margin-bottom: $spacing-4;
    }

    // -- service-title  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-service-title {
        font-size: $font-size-xl;
        margin-bottom: $spacing-3;
    }

    // -- service-description  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-service-description {
        font-size: $font-size-sm;
    }

    // -- value-card  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-value-card {
        padding: $spacing-8;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
        text-align: center;
        transition: all $transition-slow;

        &:hover {
            border-color: $color-primary;
        }
    }

    // -- value-card-icon  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-value-card-icon {
        width: q(64);
        height: q(64);
        margin: 0 auto $spacing-6;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-gray-50;
        border-radius: $radius-lg;
        color: $color-accent;

        svg {
            width: q(32);
            height: q(32);
        }
    }

    // -- value-card-title  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-value-card-title {
        font-size: $font-size-xl;
        margin-bottom: $spacing-3;
    }

    // -- value-card-description  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-value-card-description {
        font-size: $font-size-sm;
    }

    // -- contact-card  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-contact-card {
        padding: $spacing-6;
        background: $color-gray-50;
        border-radius: $radius-xl;
    }

    // -- contact-card-icon  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-contact-card-icon {
        width: q(40);
        height: q(40);
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-white;
        border-radius: $radius-md;
        color: $color-accent;
        margin-bottom: $spacing-4;

        svg {
            width: q(20);
            height: q(20);
        }
    }

    // -- contact-card-title  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-contact-card-title {
        font-size: $font-size-lg;
        margin-bottom: $spacing-3;
    }

    // -- contact-card-content  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-contact-card-content {
        font-size: $font-size-sm;
        color: $color-gray-600;

        p {
            color: inherit;
        }
    }

    // -- contact-link  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-contact-link {
        display: block;
        color: $color-accent;
        font-weight: $font-weight-medium;

        &:hover {
            text-decoration: underline;
        }
    }

    // -- team-card  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card {
        background: $color-white;
        border: q(1) solid $color-gray-200;
        overflow: hidden;
        transition: border-color $transition-base;

        &:hover {
            border-color: $color-primary;
        }
    }

    // -- team-card__image  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__image {
        aspect-ratio: 1;
        background: $color-gray-100;
        overflow: hidden;
    }

    // -- team-card__photo  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    // -- team-card__avatar  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__avatar {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-primary;
    }

    // -- team-card__initials  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__initials {
        font-family: $font-display;
        font-size: q(48);
        font-weight: $font-weight-semibold;
        color: $color-white;
    }

    // -- team-card__content  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__content {
        padding: q(24);
    }

    // -- team-card__name  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__name {
        font-size: q(20);
        font-weight: $font-weight-semibold;
        margin-bottom: q(4);
    }

    // -- team-card__title  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__title {
        font-size: $font-size-sm;
        color: $color-accent;
        font-weight: $font-weight-medium;
        margin-bottom: q(12);
    }

    // -- team-card__bio  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__bio {
        font-size: $font-size-sm;
        color: $color-gray-600;
        margin-bottom: q(16);
    }

    // -- team-card__social  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__social {
        display: flex;
        gap: q(12);
    }

    // -- team-card__social-link  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: q(32);
        height: q(32);
        color: $color-gray-600;
        transition: color $transition-base;

        &:hover {
            color: $color-primary;
        }

        .ss-c-icon {
            width: q(18);
            height: q(18);
            fill: currentColor;
        }
    }

    // -- contact-form  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-contact-form {
        display: flex;
        flex-direction: column;
        gap: $spacing-6;
    }

    // -- form-row  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-6;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // -- form-group  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-group {
        display: flex;
        flex-direction: column;
        gap: $spacing-2;
    }

    // -- form-label  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-label {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $color-gray-700;

        .ss-c-required {
            color: $color-error;
        }
    }

    // -- form-textarea  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-textarea {
        width: 100%;
        padding: $spacing-3 $spacing-4;
        font-size: $font-size-base;
        border: q(1) solid $color-gray-300;
        border-radius: $radius-md;
        background: $color-white;
        transition: all $transition-base;

        &:focus {
            outline: none;
            border-color: $color-accent;
            box-shadow: 0 0 0 q(3) rgba($color-accent, 0.1);
        }
    }

    // -- form-group--checkbox  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-group--checkbox {
        flex-direction: row;
    }

    // -- checkbox-label  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: $spacing-3;
        cursor: pointer;

        input[type="checkbox"] {
            width: q(20);
            height: q(20);
            margin-top: q(2);
            cursor: pointer;
        }
    }

    // -- checkbox-text  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-checkbox-text {
        font-size: $font-size-sm;
        color: $color-gray-600;

        a {
            color: $color-accent;
            text-decoration: underline;
        }
    }

    // -- form-actions  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-actions {
        margin-top: $spacing-4;
    }

    // -- tag  (from site-scape_ventures/src/static/scss/components/_tags.scss) --
    .ss-c-tag {
        display: inline-block;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        padding: $spacing-1 $spacing-3;
        background: $color-gray-100;
        border-radius: $radius-full;
        color: $color-gray-600;
    }

    // -- tag-outline  (from site-scape_ventures/src/static/scss/components/_tags.scss) --
    .ss-c-tag-outline {
        background: transparent;
        border: q(1) solid $color-gray-200;
    }

    // -- container  (from site-scape_ventures/src/static/scss/layout/_container.scss) --
    .ss-c-container {
        width: 100%;
        max-width: $container-max;
        margin: 0 auto;
        padding: 0 $container-padding;
    }

    // -- section  (from site-scape_ventures/src/static/scss/layout/_container.scss) --
    .ss-c-section {
        padding: $spacing-16 0;

        @media (min-width: $breakpoint-lg) {
            padding: $spacing-24 0;
        }
    }

    // -- main-content  (from site-scape_ventures/src/static/scss/layout/_container.scss) --
    .ss-c-main-content {
        // Handled by hero padding-top
    }

    // -- site-footer  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-site-footer {
        background: $color-primary;
        color: $color-white;
        padding: $spacing-16 0 $spacing-8;
    }

    // -- footer-container  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-container {
        max-width: $container-max;
        margin: 0 auto;
        padding: 0 $container-padding;
    }

    // -- footer-grid  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-8;
        margin-bottom: $spacing-12;
        align-items: start;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        }
    }

    // -- footer-brand  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-brand {
        @media (min-width: $breakpoint-lg) {
            padding-right: $spacing-8;
        }
    }

    // -- footer-logo  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-logo {
        display: inline-flex;
        align-items: center;
        gap: $spacing-3;
        font-family: $font-display;
        font-weight: $font-weight-bold;
        font-size: $font-size-sm;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.25;
        color: $color-white;
        margin: 0 0 $spacing-4;

        .ss-c-logo-icon {
            width: q(32);
            height: q(32);
        }

        &:hover {
            color: $color-accent-light;
        }
    }

    // -- footer-tagline  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-tagline {
        font-size: $font-size-lg;
        font-weight: $font-weight-medium;
        color: $color-white;
        margin-bottom: $spacing-4;
    }

    // -- footer-description  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-description {
        font-size: $font-size-sm;
        color: $color-white;
    }

    // -- footer-heading  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-heading {
        font-size: $font-size-sm;
        font-weight: $font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.25;
        color: $color-white;
        margin: 0 0 $spacing-4;
    }

    // -- footer-links  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-links {
        ul {
            display: flex;
            flex-direction: column;
            gap: $spacing-3;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            font-size: $font-size-sm;
            color: $color-white;
            line-height: $line-height-normal;
        }

        a {
            font-size: $font-size-sm;
            color: $color-white;
            transition: color $transition-base;

            &:hover {
                color: $color-accent-light;
            }
        }
    }

    // -- footer-contact  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-contact {
        address {
            margin-bottom: $spacing-4;

            p {
                font-size: $font-size-sm;
                color: $color-white;
                margin-bottom: 0;
            }
        }
    }

    // -- footer-contact-links  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-contact-links {
        display: flex;
        flex-direction: column;
        gap: $spacing-2;

        a {
            font-size: $font-size-sm;
            color: $color-white;

            &:hover {
                color: $color-accent-light;
            }
        }
    }

    // -- footer-social  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-social {
        display: flex;
        justify-content: center;
        gap: $spacing-4;
        padding: $spacing-8 0;
        border-top: q(1) solid $color-gray-800;
        border-bottom: q(1) solid $color-gray-800;
        margin-bottom: $spacing-8;

        a {
            width: q(40);
            height: q(40);
            display: flex;
            align-items: center;
            justify-content: center;
            background: $color-gray-800;
            border-radius: 50%;
            color: $color-white;
            transition: all $transition-base;

            svg {
                width: q(18);
                height: q(18);
            }

            &:hover {
                background: $color-accent;
                color: $color-white;
            }
        }
    }

    // -- footer-bottom  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-4;
        text-align: center;

        @media (min-width: $breakpoint-md) {
            flex-direction: row;
            justify-content: space-between;
        }

        p {
            font-size: $font-size-sm;
            color: $color-white;
        }
    }

    // -- footer-legal  (from site-scape_ventures/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-legal {
        display: flex;
        gap: $spacing-6;

        a {
            font-size: $font-size-sm;
            color: $color-white;

            &:hover {
                color: $color-accent-light;
            }
        }
    }

    // -- site-header  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: $color-white;
        border-bottom: q(1) solid $color-primary;
        transition: all $transition-slow;
    }

    // -- nav-container  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: $container-max;
        margin: 0 auto;
        padding: $spacing-4 $container-padding;
    }

    // -- nav-brand  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-brand {
        z-index: 1001;
    }

    // -- logo  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-logo {
        display: flex;
        align-items: center;
        gap: $spacing-3;
        font-family: $font-display;
        font-weight: $font-weight-semibold;
        font-size: $font-size-lg;
        color: $color-primary;

        &:hover {
            color: $color-accent;
        }
    }

    // -- logo-icon  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-logo-icon {
        width: q(40);
        height: q(40);
        color: $color-primary;
    }

    // -- logo-text  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-logo-text {
        font-weight: 700;

        @media (max-width: $breakpoint-sm) {
            display: none;
        }
    }

    // -- nav-toggle  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: q(44);
        height: q(44);
        gap: q(5);
        z-index: 1001;

        @media (min-width: $breakpoint-lg) {
            display: none;
        }
    }

    // -- nav-toggle-line  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-toggle-line {
        display: block;
        width: q(24);
        height: q(2);
        background: $color-primary;
        transition: all $transition-base;
    }

    // -- nav-menu  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-menu {
        @media (max-width: calc($breakpoint-lg - q(1))) {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: $color-white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all $transition-slow;

            &.is-open {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    // -- nav-links  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-links {
        display: flex;
        align-items: center;
        gap: $spacing-8;

        @media (max-width: calc($breakpoint-lg - q(1))) {
            flex-direction: column;
            gap: $spacing-6;
        }
    }

    // -- nav-link  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-link {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $color-gray-600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: color $transition-base;

        &:hover,
        &.active {
            color: $color-primary;
        }

        @media (max-width: calc($breakpoint-lg - q(1))) {
            font-size: $font-size-2xl;
            text-transform: none;
            letter-spacing: normal;
        }
    }

    // -- nav-link--cta  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-link--cta {
        color: $color-white;
        background: $color-primary;
        padding: $spacing-2 $spacing-4;
        border-radius: $radius-md;

        &:hover {
            background: $color-accent;
            color: $color-white;
        }
    }

    // -- about-content  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-about-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-12;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
            gap: $spacing-16;
            align-items: center;
        }
    }

    // -- about-text  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-about-text {
        .ss-c-lead {
            margin-bottom: $spacing-6;
        }
    }

    // -- about-values  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-about-values {
        display: flex;
        flex-direction: column;
        gap: $spacing-6;
        margin-top: $spacing-8;
    }

    // -- value-item  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-value-item {
        display: flex;
        gap: $spacing-4;
    }

    // -- value-icon  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-value-icon {
        flex-shrink: 0;
        width: q(48);
        height: q(48);
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-gray-100;
        border-radius: $radius-lg;
        color: $color-accent;

        svg {
            width: q(24);
            height: q(24);
        }
    }

    // -- value-content  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-value-content {
        h4 {
            font-size: $font-size-lg;
            margin-bottom: $spacing-1;
        }

        p {
            font-size: $font-size-sm;
        }
    }

    // -- about-image  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-about-image {
        .ss-c-image-frame {
            position: relative;
            border-radius: $radius-xl;
            overflow: hidden;
            background: $color-gray-100;
            aspect-ratio: 4/3;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    // -- values-grid  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-values-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-6;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- mission-grid  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-mission-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-12;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
            gap: $spacing-16;
            align-items: center;
        }
    }

    // -- mission-content  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-mission-content {
        p {
            margin-bottom: $spacing-4;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    // -- mission-image  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-mission-image {
        img {
            width: 100%;
            border-radius: $radius-xl;
            background: $color-gray-100;
            aspect-ratio: 4/3;
            object-fit: cover;
        }
    }

    // -- section--values  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-section--values {
        padding: q(64) 0;
        background: $color-gray-50;
        border-top: q(1) solid $color-gray-200;
    }

    // -- value-card__icon  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-value-card__icon {
        width: q(48);
        height: q(48);
        margin: 0 auto q(16);
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            width: q(32);
            height: q(32);
            fill: $color-accent;
        }
    }

    // -- value-card__title  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-value-card__title {
        font-size: $font-size-lg;
        font-weight: $font-weight-semibold;
        margin-bottom: q(8);
    }

    // -- value-card__description  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-value-card__description {
        font-size: $font-size-sm;
        color: $color-gray-600;
    }

    // -- contact-grid  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-12;
    }

    // -- contact-form-header  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-contact-form-header {
        margin-bottom: $spacing-8;

        h2 {
            font-size: $font-size-2xl;
            margin-bottom: $spacing-2;
        }

        p {
            color: $color-gray-500;
        }
    }

    // -- contact-info  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-contact-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-6;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(4, 1fr);
            align-items: stretch;
        }
    }

    // -- social-links-inline  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-social-links-inline {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-4;
    }

    // -- social-link-inline  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-social-link-inline {
        font-weight: $font-weight-medium;
        color: $color-gray-600;

        &:hover {
            color: $color-accent;
        }
    }

    // -- section-map  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-section-map {
        padding: 0;
    }

    // -- map-placeholder  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-map-placeholder {
        height: q(400);
        background: $color-gray-100;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    // -- map-embed  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-map-embed {
        display: block;
        width: 100%;
        height: q(480);
        border: 0;
    }

    // -- map-placeholder-content  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-map-placeholder-content {
        text-align: center;
        color: $color-gray-400;

        svg {
            width: q(48);
            height: q(48);
            margin: 0 auto $spacing-4;
        }

        p {
            font-size: $font-size-lg;
            color: $color-gray-500;
        }

        span {
            font-size: $font-size-sm;
        }
    }

    // -- section-cta  (from site-scape_ventures/src/static/scss/sections/_cta.scss) --
    .ss-c-section-cta {
        background: $color-gray-50;
        text-align: center;
    }

    // -- cta-content  (from site-scape_ventures/src/static/scss/sections/_cta.scss) --
    .ss-c-cta-content {
        max-width: q(640);
        margin: 0 auto;
    }

    // -- cta-title  (from site-scape_ventures/src/static/scss/sections/_cta.scss) --
    .ss-c-cta-title {
        margin-bottom: $spacing-4;
    }

    // -- cta-description  (from site-scape_ventures/src/static/scss/sections/_cta.scss) --
    .ss-c-cta-description {
        font-size: $font-size-lg;
        margin-bottom: $spacing-8;
    }

    // -- faq-list  (from site-scape_ventures/src/static/scss/sections/_faq.scss) --
    .ss-c-faq-list {
        max-width: q(800);
        margin: 0 auto;
    }

    // -- faq-item  (from site-scape_ventures/src/static/scss/sections/_faq.scss) --
    .ss-c-faq-item {
        border-bottom: q(1) solid $color-gray-200;

        &:last-child {
            border-bottom: none;
        }
    }

    // -- faq-question  (from site-scape_ventures/src/static/scss/sections/_faq.scss) --
    .ss-c-faq-question {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: $spacing-6 0;
        font-size: $font-size-lg;
        font-weight: $font-weight-medium;
        text-align: left;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }

        span {
            flex: 1;
        }
    }

    // -- faq-icon  (from site-scape_ventures/src/static/scss/sections/_faq.scss) --
    .ss-c-faq-icon {
        width: q(24);
        height: q(24);
        flex-shrink: 0;
        transition: transform $transition-base;

        details[open] & {
            transform: rotate(180deg);
        }
    }

    // -- faq-answer  (from site-scape_ventures/src/static/scss/sections/_faq.scss) --
    .ss-c-faq-answer {
        padding-bottom: $spacing-6;

        p {
            font-size: $font-size-base;
        }
    }

    // -- focus-content  (from site-scape_ventures/src/static/scss/sections/_focus.scss) --
    .ss-c-focus-content {
        .ss-c-focus-header {
            margin-bottom: $spacing-12;
        }
    }

    // -- focus-grid  (from site-scape_ventures/src/static/scss/sections/_focus.scss) --
    .ss-c-focus-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-6;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    // -- focus-item  (from site-scape_ventures/src/static/scss/sections/_focus.scss) --
    .ss-c-focus-item {
        padding: $spacing-6;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-xl;
        text-align: center;
    }

    // -- focus-icon  (from site-scape_ventures/src/static/scss/sections/_focus.scss) --
    .ss-c-focus-icon {
        width: q(56);
        height: q(56);
        margin: 0 auto $spacing-4;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-gray-50;
        border-radius: $radius-lg;
        color: $color-accent;

        svg {
            width: q(28);
            height: q(28);
        }
    }

    // -- focus-card  (from site-scape_ventures/src/static/scss/sections/_focus.scss) --
    .ss-c-focus-card {
        padding: $spacing-8 $spacing-6;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-xl;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    // -- focus-title  (from site-scape_ventures/src/static/scss/sections/_focus.scss) --
    .ss-c-focus-title {
        font-size: $font-size-lg;
        margin-bottom: $spacing-2;
    }

    // -- focus-description  (from site-scape_ventures/src/static/scss/sections/_focus.scss) --
    .ss-c-focus-description {
        font-size: $font-size-sm;
        color: $color-gray-600;
        max-width: 28ch;
        margin: 0 auto;
    }

    // -- section-header  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-header {
        margin-bottom: $spacing-12;

        @media (min-width: $breakpoint-lg) {
            margin-bottom: $spacing-16;
        }
    }

    // -- section-header--center  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-header--center {
        text-align: center;

        .ss-c-section-description {
            max-width: q(600);
            margin: 0 auto;
        }
    }

    // -- section-label  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-label {
        display: inline-block;
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: $color-accent;
        margin-bottom: $spacing-3;
    }

    // -- section-title  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-title {
        margin-bottom: $spacing-4;
    }

    // -- section-description  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-description {
        font-size: $font-size-lg;
        color: $color-gray-500;
    }

    // -- section-action  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-action {
        text-align: center;
        margin-top: $spacing-12;
    }

    // -- section__header  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section__header {
        margin-bottom: q(48);
    }

    // -- section__title  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section__title {
        font-size: q(36);
        margin-bottom: q(8);
    }

    // -- section__subtitle  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section__subtitle {
        font-size: $font-size-base;
        color: $color-gray-600;
        max-width: q(640);
    }

    // -- page-header  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-header {
        padding: $spacing-32 0 $spacing-16;

        @media (min-width: $breakpoint-lg) {
            padding: $spacing-32 0 $spacing-20;
        }
    }

    // -- page-header--large  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-header--large {
        padding-bottom: $spacing-20;

        @media (min-width: $breakpoint-lg) {
            padding-bottom: $spacing-24;
        }
    }

    // -- page-label  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-label {
        display: inline-block;
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: $color-accent;
        margin-bottom: $spacing-4;
    }

    // -- page-title  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-title {
        margin-bottom: $spacing-4;
    }

    // -- page-description  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-description {
        font-size: $font-size-xl;
        color: $color-gray-500;
        max-width: q(640);

        @media (min-width: $breakpoint-lg) {
            font-size: $font-size-2xl;
        }
    }

    // -- page-description--large  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-description--large {
        max-width: q(800);
    }

    // -- hero  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding-top: q(80);
        overflow: hidden;
    }

    // -- hero-background  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-background {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    // -- hero-gradient  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-gradient {
        position: absolute;
        inset: 0;
        background: $color-white;
    }

    // -- hero-pattern  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-pattern {
        display: none;
    }

    // -- hero-content  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-12;
        max-width: $container-max;
        margin: 0 auto;
        padding: 0 $container-padding;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }
    }

    // -- hero-label  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-label {
        display: inline-block;
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: $color-accent;
        margin-bottom: $spacing-4;
    }

    // -- hero-title  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-title {
        margin-bottom: $spacing-6;
        font-size: $font-size-5xl;
        font-weight: $font-weight-bold;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1;

        @media (min-width: $breakpoint-md) {
            font-size: $font-size-6xl;
        }

        @media (min-width: $breakpoint-lg) {
            font-size: $font-size-7xl;
        }
    }

    // -- hero-title-line  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-title-line {
        display: block;
    }

    // -- hero-title-accent  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-title-accent {
        color: $color-accent;
    }

    // -- hero-description  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        margin-bottom: $spacing-8;
        max-width: q(540);

        @media (min-width: $breakpoint-lg) {
            font-size: $font-size-xl;
        }
    }

    // -- hero-actions  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-4;
    }

    // -- hero-visual  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-visual {
        display: none;

        @media (min-width: $breakpoint-lg) {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    // -- hero-shape  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-shape {
        width: 100%;
        max-width: q(400);
        color: $color-accent;
        animation: float 6s ease-in-out infinite;
    }

    // -- hero-scroll  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-scroll {
        position: absolute;
        bottom: $spacing-8;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-2;
        font-size: $font-size-xs;
        color: $color-gray-400;
        animation: bounce 2s ease-in-out infinite;

        svg {
            width: q(20);
            height: q(20);
        }
    }

    // -- hero--team  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero--team {
        padding: q(128) 0 q(64);
        border-bottom: q(1) solid $color-primary;

        .ss-c-hero__title {
            font-size: q(48);
            margin-bottom: q(16);

            @media (min-width: $breakpoint-lg) {
                font-size: q(72);
            }
        }

        .ss-c-hero__subtitle {
            font-size: $font-size-lg;
            color: $color-gray-600;
            max-width: q(640);
        }
    }

    // -- section--legal  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-section--legal {
        padding-top: $spacing-32;
        padding-bottom: $spacing-16;

        @media (min-width: $breakpoint-lg) {
            padding-bottom: $spacing-24;
        }
    }

    // -- container--narrow  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-container--narrow {
        max-width: q(800);
    }

    // -- legal-updated  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-updated {
        font-size: $font-size-sm;
        color: $color-gray-500;
        margin-bottom: $spacing-8;
        padding-bottom: $spacing-6;
        border-bottom: q(1) solid $color-gray-200;
    }

    // -- legal-content  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-content {
        line-height: 1.8;

        // Section headings (h2)
        h2 {
            font-size: $font-size-xl;
            font-weight: $font-weight-semibold;
            color: $color-primary;
            margin-top: $spacing-10;
            margin-bottom: $spacing-4;
            padding-top: $spacing-6;
            border-top: q(1) solid $color-gray-100;

            &:first-child {
                margin-top: 0;
                padding-top: 0;
                border-top: none;
            }

            @media (min-width: $breakpoint-lg) {
                font-size: $font-size-2xl;
            }
        }

        // Subsection headings (h3)
        h3 {
            font-size: $font-size-lg;
            font-weight: $font-weight-semibold;
            color: $color-primary;
            margin-top: $spacing-6;
            margin-bottom: $spacing-3;
        }

        // Paragraphs
        p {
            font-size: $font-size-base;
            color: $color-gray-700;
            margin-bottom: $spacing-4;
            line-height: 1.8;
        }

        // Lists
        ul, ol {
            margin-bottom: $spacing-6;
            padding-left: $spacing-6;
        }

        ul {
            list-style-type: disc;
        }

        ol {
            list-style-type: decimal;
        }

        li {
            font-size: $font-size-base;
            color: $color-gray-700;
            margin-bottom: $spacing-2;
            line-height: 1.7;
            padding-left: $spacing-2;

            &::marker {
                color: $color-accent;
            }
        }

        // Links within content
        a {
            color: $color-accent;
            text-decoration: underline;
            text-underline-offset: q(2);
            transition: color $transition-base;

            &:hover {
                color: $color-accent-dark;
            }
        }

        // Address block
        address {
            font-style: normal;
            background: $color-gray-50;
            padding: $spacing-6;
            margin-top: $spacing-4;
            margin-bottom: $spacing-6;
            border-left: q(3) solid $color-accent;
            font-size: $font-size-base;
            color: $color-gray-700;
            line-height: 1.8;
        }
    }

    // -- cookie-table  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-cookie-table {
        width: 100%;
        border-collapse: collapse;
        margin: $spacing-6 0;
        font-size: $font-size-sm;
        background: $color-white;
        border: q(1) solid $color-gray-200;

        thead {
            background: $color-gray-50;

            th {
                text-align: left;
                padding: $spacing-4;
                font-weight: $font-weight-semibold;
                color: $color-primary;
                border-bottom: q(2) solid $color-gray-200;
                font-size: $font-size-xs;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }
        }

        tbody {
            tr {
                border-bottom: q(1) solid $color-gray-100;

                &:last-child {
                    border-bottom: none;
                }

                &:hover {
                    background: $color-gray-50;
                }
            }

            td {
                padding: $spacing-4;
                color: $color-gray-700;
                vertical-align: top;

                &:first-child {
                    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
                    font-size: $font-size-xs;
                    color: $color-accent-dark;
                    font-weight: $font-weight-medium;
                    white-space: nowrap;
                }
            }
        }

        // Responsive table
        @media (max-width: $breakpoint-sm) {
            display: block;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    }

    // -- legal-nav  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-nav {
        position: sticky;
        top: q(100);

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin-bottom: $spacing-2;
        }

        a {
            display: block;
            font-size: $font-size-sm;
            color: $color-gray-500;
            padding: $spacing-2 $spacing-4;
            border-left: q(2) solid transparent;
            transition: all $transition-base;

            &:hover {
                color: $color-primary;
                border-left-color: $color-gray-300;
            }

            &.active {
                color: $color-primary;
                border-left-color: $color-accent;
                font-weight: $font-weight-medium;
            }
        }
    }

    // -- legal-links  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-links {
        margin-top: $spacing-12;
        padding-top: $spacing-8;
        border-top: q(1) solid $color-gray-200;

        h3 {
            font-size: $font-size-base;
            font-weight: $font-weight-semibold;
            color: $color-primary;
            margin-bottom: $spacing-4;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-4;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a {
            display: inline-flex;
            align-items: center;
            gap: $spacing-2;
            font-size: $font-size-sm;
            color: $color-gray-600;
            padding: $spacing-2 $spacing-4;
            background: $color-gray-50;
            border: q(1) solid $color-gray-200;
            transition: all $transition-base;

            &:hover {
                background: $color-white;
                border-color: $color-accent;
                color: $color-accent;
            }
        }
    }

    // -- legal-notice  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-notice {
        background: rgba($color-accent, 0.05);
        border: q(1) solid rgba($color-accent, 0.2);
        border-left: q(3) solid $color-accent;
        padding: $spacing-6;
        margin: $spacing-6 0;

        p {
            margin-bottom: 0;
            font-size: $font-size-sm;
            color: $color-gray-700;
        }
    }

    // -- legal-intro  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-intro {
        font-size: $font-size-lg;
        color: $color-gray-600;
        margin-bottom: $spacing-8;
        padding-bottom: $spacing-6;
        border-bottom: q(1) solid $color-gray-200;
        line-height: 1.7;
    }

    // -- portfolio-grid  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-6;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // -- portfolio-list  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-list {
        display: flex;
        flex-direction: column;
        gap: $spacing-8;
    }

    // -- portfolio-item  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item {
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-xl;
        overflow: hidden;
    }

    // -- portfolio-item-inner  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-inner {
        display: grid;
        grid-template-columns: 1fr;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: q(300) 1fr;
        }
    }

    // -- portfolio-item-media  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-media {
        padding: $spacing-8;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-gray-50;

        @media (min-width: $breakpoint-lg) {
            padding: $spacing-12;
        }
    }

    // -- logo-large  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-logo-large {
        width: q(120);
        height: q(120);
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-primary;
        color: $color-white;
        font-family: $font-display;
        font-size: $font-size-4xl;
        font-weight: $font-weight-bold;
        border-radius: $radius-xl;
    }

    // -- portfolio-item-content  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-content {
        padding: $spacing-8;

        @media (min-width: $breakpoint-lg) {
            padding: $spacing-12;
        }
    }

    // -- portfolio-item-meta  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-meta {
        display: flex;
        align-items: center;
        gap: $spacing-4;
        margin-bottom: $spacing-4;
    }

    // -- portfolio-item-category  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-category {
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: $color-accent;
    }

    // -- portfolio-item-status  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-status {
        font-size: $font-size-xs;
        padding: $spacing-1 $spacing-2;
        background: $color-success;
        color: $color-white;
        border-radius: $radius-sm;
    }

    // -- portfolio-item-title  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-title {
        font-size: $font-size-3xl;
        margin-bottom: $spacing-4;
    }

    // -- portfolio-item-description  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-description {
        margin-bottom: $spacing-6;
    }

    // -- portfolio-item-tags  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-tags {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-2;
        margin-bottom: $spacing-8;
    }

    // -- portfolio-item-actions  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-actions {
        // Button styling
    }

    // -- filter-bar  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-2;
        justify-content: center;
    }

    // -- filter-btn  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-filter-btn {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        padding: $spacing-2 $spacing-4;
        border-radius: $radius-full;
        color: $color-gray-600;
        transition: all $transition-base;

        &:hover {
            color: $color-primary;
            background: $color-gray-100;
        }

        &.active {
            color: $color-white;
            background: $color-primary;
        }
    }

    // -- services-layout  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-services-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-12;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 2fr;
            gap: $spacing-16;
        }
    }

    // -- services-header  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-services-header {
        .ss-c-section-description {
            margin-bottom: $spacing-8;
        }
    }

    // -- services-grid  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-6;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // -- service-detail  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-service-detail {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-8;
        padding: $spacing-16 0;
        border-bottom: q(1) solid $color-gray-200;

        &:last-child {
            border-bottom: none;
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
            gap: $spacing-16;
            align-items: center;
        }
    }

    // -- service-detail--reverse  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-service-detail--reverse {
        @media (min-width: $breakpoint-lg) {
            .ss-c-service-detail-visual {
                order: -1;
            }
        }
    }

    // -- service-detail-number  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-service-detail-number {
        font-family: $font-display;
        font-size: $font-size-5xl;
        font-weight: $font-weight-bold;
        color: $color-gray-200;
        margin-bottom: $spacing-4;
    }

    // -- service-detail-title  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-service-detail-title {
        font-size: $font-size-4xl;
        margin-bottom: $spacing-4;
    }

    // -- service-detail-lead  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-service-detail-lead {
        font-size: $font-size-xl;
        color: $color-gray-700;
        margin-bottom: $spacing-4;
    }

    // -- service-detail-list  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-service-detail-list {
        margin-top: $spacing-6;

        li {
            position: relative;
            padding-left: $spacing-6;
            margin-bottom: $spacing-3;
            color: $color-gray-600;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: q(10);
                width: q(8);
                height: q(8);
                background: $color-accent;
                border-radius: 50%;
            }
        }
    }

    // -- service-visual-box  (from site-scape_ventures/src/static/scss/sections/_services.scss) --
    .ss-c-service-visual-box {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        background: $color-gray-50;
        border-radius: $radius-xl;
        padding: $spacing-12;

        svg {
            width: 100%;
            max-width: q(200);
            color: $color-accent;
        }
    }

    // -- section-stats  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-section-stats {
        background: $color-primary;
        padding: $spacing-16 0;
    }

    // -- stats-grid  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: $spacing-8;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    // -- stat-item  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-stat-item {
        text-align: center;
    }

    // -- stat-number  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-stat-number {
        display: block;
        font-family: $font-display;
        font-size: $font-size-4xl;
        font-weight: $font-weight-bold;
        color: $color-white;
        margin-bottom: $spacing-2;

        @media (min-width: $breakpoint-lg) {
            font-size: $font-size-5xl;
        }
    }

    // -- stat-label  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-stat-label {
        font-size: $font-size-sm;
        color: $color-gray-400;
    }

    // -- section--team-grid  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-section--team-grid {
        padding: q(64) 0;
    }

    // -- team-grid  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: q(32);

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- team-member  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-member {
        text-align: center;
    }

    // -- team-member-image  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-member-image {
        margin-bottom: $spacing-6;

        .ss-c-image-placeholder {
            width: q(200);
            height: q(200);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: $color-gray-100;
            border-radius: 50%;

            svg {
                width: q(80);
                height: q(80);
            }
        }
    }

    // -- team-member-name  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-member-name {
        font-size: $font-size-xl;
        margin-bottom: $spacing-1;
    }

    // -- team-member-role  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-member-role {
        font-size: $font-size-sm;
        color: $color-gray-500;
    }

    // -- section-what-we-look-for  (from site-scape_ventures/src/static/scss/sections/_thesis.scss) --
    .ss-c-section-what-we-look-for {
        padding: $spacing-20 0;
    }

    // -- section-criteria  (from site-scape_ventures/src/static/scss/sections/_thesis.scss) --
    .ss-c-section-criteria {
        background: $color-gray-50;
        border-top: q(1) solid $color-gray-200;
        border-bottom: q(1) solid $color-gray-200;

        .ss-c-section-title {
            font-size: $font-size-3xl;
            margin-bottom: $spacing-12;
            text-align: center;

            @media (min-width: $breakpoint-lg) {
                font-size: $font-size-4xl;
            }
        }
    }

    // -- criteria-grid  (from site-scape_ventures/src/static/scss/sections/_thesis.scss) --
    .ss-c-criteria-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: $spacing-6;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    // -- criteria-item  (from site-scape_ventures/src/static/scss/sections/_thesis.scss) --
    .ss-c-criteria-item {
        padding: $spacing-8 $spacing-6;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        text-align: center;

        h4 {
            font-size: $font-size-xs;
            font-weight: $font-weight-semibold;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: $color-gray-500;
            margin-bottom: $spacing-3;
        }

        p {
            font-size: $font-size-lg;
            font-weight: $font-weight-medium;
            color: $color-primary;
            margin: 0;
        }
    }

    // -- timeline  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-timeline {
        position: relative;
        padding-left: $spacing-8;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: q(2);
            background: $color-gray-200;
        }
    }

    // -- timeline-item  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-timeline-item {
        position: relative;
        padding-bottom: $spacing-8;

        &:last-child {
            padding-bottom: 0;
        }
    }

    // -- timeline-marker  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-timeline-marker {
        position: absolute;
        left: calc(-#{$spacing-8} - q(1));
        transform: translateX(-50%);
        font-family: $font-display;
        font-size: $font-size-sm;
        font-weight: $font-weight-bold;
        color: $color-accent;
        background: $color-white;
        padding: $spacing-2 $spacing-3;
        border-radius: $radius-md;
        border: q(2) solid $color-gray-200;
    }

    // -- timeline-content  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-timeline-content {
        h3 {
            font-size: $font-size-xl;
            margin-bottom: $spacing-2;
        }

        p {
            font-size: $font-size-sm;
        }
    }

    // -- process-steps  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-process-steps {
        display: flex;
        flex-direction: column;
        gap: $spacing-4;

        @media (min-width: $breakpoint-lg) {
            flex-direction: row;
            align-items: flex-start;
        }
    }

    // -- process-step  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-process-step {
        flex: 1;
        text-align: center;
        padding: $spacing-6;
    }

    // -- process-step-number  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-process-step-number {
        width: q(48);
        height: q(48);
        margin: 0 auto $spacing-4;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-accent;
        color: $color-white;
        font-family: $font-display;
        font-size: $font-size-xl;
        font-weight: $font-weight-bold;
        border-radius: 50%;
    }

    // -- process-step-title  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-process-step-title {
        font-size: $font-size-lg;
        margin-bottom: $spacing-2;
    }

    // -- process-step-description  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-process-step-description {
        font-size: $font-size-sm;
    }

    // -- process-connector  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-process-connector {
        display: none;

        @media (min-width: $breakpoint-lg) {
            display: flex;
            align-items: center;
            padding-top: $spacing-6;
            color: $color-gray-300;

            svg {
                width: q(60);
                height: q(20);
            }
        }
    }

    // -- link  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-link {
        color: $color-accent;
        text-decoration: underline;

        &:hover {
            color: $color-accent-dark;
        }
    }

    // -- sr-only  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-sr-only {
        position: absolute;
        width: q(1);
        height: q(1);
        padding: 0;
        margin: q(-1);
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    // -- text-center  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-text-center { text-align: center; }

    // -- text-left  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-text-left { text-align: left; }

    // -- text-right  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-text-right { text-align: right; }

    // -- hidden  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .hidden { display: none; }

    // -- block  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-block { display: block; }

    // -- flex  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-flex { display: flex; }

    // -- inline-flex  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-inline-flex { display: inline-flex; }

    // -- grid  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-grid { display: grid; }

    // -- items-center  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-items-center { align-items: center; }

    // -- justify-center  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-justify-center { justify-content: center; }

    // -- justify-between  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-justify-between { justify-content: space-between; }

    // -- flex-col  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-flex-col { flex-direction: column; }

    // -- flex-wrap  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-flex-wrap { flex-wrap: wrap; }

    // -- gap-2  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-gap-2 { gap: $spacing-2; }

    // -- gap-4  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-gap-4 { gap: $spacing-4; }

    // -- gap-6  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-gap-6 { gap: $spacing-6; }

    // -- gap-8  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-gap-8 { gap: $spacing-8; }

    // -- mt-4  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mt-4 { margin-top: $spacing-4; }

    // -- mt-6  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mt-6 { margin-top: $spacing-6; }

    // -- mt-8  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mt-8 { margin-top: $spacing-8; }

    // -- mb-4  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mb-4 { margin-bottom: $spacing-4; }

    // -- mb-6  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mb-6 { margin-bottom: $spacing-6; }

    // -- mb-8  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mb-8 { margin-bottom: $spacing-8; }

    // -- p-4  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-p-4 { padding: $spacing-4; }

    // -- p-6  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-p-6 { padding: $spacing-6; }

    // -- p-8  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-p-8 { padding: $spacing-8; }

    // -- py-4  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-py-4 { padding-top: $spacing-4; padding-bottom: $spacing-4; }

    // -- py-8  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-py-8 { padding-top: $spacing-8; padding-bottom: $spacing-8; }

    // -- px-4  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-px-4 { padding-left: $spacing-4; padding-right: $spacing-4; }

    // -- px-6  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-px-6 { padding-left: $spacing-6; padding-right: $spacing-6; }

    // -- w-full  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-w-full { width: 100%; }

    // -- max-w-lg  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-max-w-lg { max-width: q(640); }

    // -- max-w-xl  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-max-w-xl { max-width: q(800); }

    // -- breadcrumbs  (from site-scape_ventures/src/staticfiles/scss/components/_breadcrumbs.scss) --
    .ss-c-breadcrumbs {
        padding: $spacing-4 0;
        margin-bottom: $spacing-4;

        &__list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: $spacing-2;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        &__item {
            display: flex;
            align-items: center;
        }

        &__link {
            color: $color-gray-500;
            text-decoration: none;
            font-size: $font-size-sm;
            transition: color 0.2s ease;

            &:hover,
            &:focus {
                color: $color-primary;
            }
        }

        &__current {
            color: $color-primary;
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
        }

        &__separator {
            display: flex;
            align-items: center;
            color: $color-gray-400;

            svg {
                width: q(14);
                height: q(14);
            }
        }
    }

    // -- skip-link  (from site-scape_group/src/static/scss/base/_accessibility.scss) --
    .ss-c-skip-link {
        position: absolute;
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        padding: $spacing-3 $spacing-6;
        background-color: $color-primary;
        color: $color-white;
        font-size: $font-size-sm;
        font-weight: $font-weight-semibold;
        text-decoration: none;
        border-radius: 0 0 $spacing-1 $spacing-1;
        transition: top 0.2s ease;

        &:focus {
            top: 0;
            outline: q(2) solid $color-accent;
            outline-offset: q(2);
        }
    }

    // -- sr-only-focusable  (from site-scape_group/src/static/scss/base/_accessibility.scss) --
    .ss-c-sr-only-focusable {
        &:focus,
        &:active {
            position: static;
            width: auto;
            height: auto;
            margin: 0;
            overflow: visible;
            clip: auto;
            white-space: normal;
        }
    }

    // -- footer  (from site-scape_group/src/static/scss/layout/_footer.scss) --
    .ss-c-footer {
        background: $color-primary;
        color: $color-white;
        padding: $spacing-8 0;
    }

    // -- footer__container  (from site-scape_group/src/static/scss/layout/_footer.scss) --
    .ss-c-footer__container {
        max-width: $container-max;
        margin: 0 auto;
        padding: 0 $container-padding;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-4;
        text-align: center;

        @media (min-width: $breakpoint-md) {
            flex-direction: row;
            justify-content: space-between;
            text-align: left;
        }
    }

    // -- footer__nav  (from site-scape_group/src/static/scss/layout/_footer.scss) --
    .ss-c-footer__nav {
        order: 2;

        @media (min-width: $breakpoint-md) {
            order: 1;
        }
    }

    // -- footer__links  (from site-scape_group/src/static/scss/layout/_footer.scss) --
    .ss-c-footer__links {
        display: flex;
        gap: $spacing-6;
        list-style: none;
        margin: 0;
        padding: 0;

        a {
            font-size: $font-size-sm;
            color: $color-gray-400;
            text-decoration: none;
            transition: color $transition-base;

            &:hover {
                color: $color-white;
            }
        }
    }

    // -- footer__copyright  (from site-scape_group/src/static/scss/layout/_footer.scss) --
    .ss-c-footer__copyright {
        font-size: $font-size-sm;
        color: $color-gray-500;
        margin: 0;
        order: 1;

        @media (min-width: $breakpoint-md) {
            order: 2;
        }

        a {
            color: $color-gray-400;
            text-decoration: none;

            &:hover {
                color: $color-white;
            }
        }
    }

    // -- home  (from site-scape_group/src/static/scss/sections/_home.scss) --
    .ss-c-home {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: $color-white;
    }

    // -- companies  (from site-scape_group/src/static/scss/sections/_home.scss) --
    .ss-c-companies {
        padding: $spacing-16 $spacing-6;
        background-color: #000000;

        @media (min-width: $breakpoint-md) {
            padding: $spacing-24 $spacing-8;
        }

        &__container {
            max-width: $container-max;
            margin: 0 auto;
        }

        &__heading {
            font-family: $font-display;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            color: $color-gray-500;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: $spacing-12;

            @media (min-width: $breakpoint-md) {
                margin-bottom: $spacing-16;
            }
        }

        &__grid {
            display: grid;
            gap: q(1);
            background-color: rgba($color-white, 0.1);

            @media (min-width: $breakpoint-md) {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }

    // -- company-card  (from site-scape_group/src/static/scss/sections/_home.scss) --
    .ss-c-company-card {
        display: flex;
        flex-direction: column;
        padding: $spacing-8;
        background-color: #000000;
        text-decoration: none;
        transition: background-color 0.3s ease;
        position: relative;

        @media (min-width: $breakpoint-md) {
            padding: $spacing-12;
        }

        &:hover {
            background-color: #111111;

            .ss-c-company-card__arrow {
                transform: translate(q(4), q(-4));
            }

            .ss-c-company-card__link {
                color: $color-white;
            }
        }

        &__name {
            font-family: $font-display;
            font-size: $font-size-2xl;
            font-weight: $font-weight-semibold;
            color: $color-white;
            margin-bottom: $spacing-2;
            letter-spacing: -0.02em;

            @media (min-width: $breakpoint-md) {
                font-size: $font-size-3xl;
            }
        }

        &__tagline {
            font-size: $font-size-base;
            color: $color-gray-400;
            margin-bottom: $spacing-4;

            @media (min-width: $breakpoint-md) {
                font-size: $font-size-lg;
            }
        }

        &__description {
            font-size: $font-size-sm;
            color: $color-gray-500;
            line-height: $line-height-relaxed;
            margin-bottom: $spacing-8;

            @media (min-width: $breakpoint-md) {
                font-size: $font-size-base;
                margin-bottom: $spacing-12;
            }
        }

        &__link {
            display: flex;
            align-items: center;
            gap: $spacing-2;
            font-size: $font-size-sm;
            color: $color-gray-500;
            margin-top: auto;
            transition: color 0.3s ease;

            @media (min-width: $breakpoint-md) {
                font-size: $font-size-base;
            }
        }

        &__arrow {
            width: q(20);
            height: q(20);
            transition: transform 0.3s ease;
        }
    }

    // -- faq  (from site-scape_group/src/static/scss/sections/_home.scss) --
    .ss-c-faq {
        padding: $spacing-16 $spacing-6;
        background-color: $color-white;

        @media (min-width: $breakpoint-md) {
            padding: $spacing-24 $spacing-8;
        }

        &__container {
            max-width: $container-max;
            margin: 0 auto;
        }

        &__heading {
            font-family: $font-display;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            color: $color-gray-500;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: $spacing-12;

            @media (min-width: $breakpoint-md) {
                margin-bottom: $spacing-16;
            }
        }

        &__list {
            display: grid;
            gap: $spacing-8;

            @media (min-width: $breakpoint-md) {
                grid-template-columns: repeat(2, 1fr);
                gap: $spacing-12;
            }
        }

        &__item {
            padding: $spacing-6;
            border: q(1) solid $color-gray-200;
            border-radius: q(4);

            @media (min-width: $breakpoint-md) {
                padding: $spacing-8;
            }
        }

        &__question {
            font-family: $font-display;
            font-size: $font-size-lg;
            font-weight: $font-weight-semibold;
            color: $color-primary;
            margin-bottom: $spacing-3;

            @media (min-width: $breakpoint-md) {
                font-size: $font-size-xl;
            }
        }

        &__answer {
            p {
                font-size: $font-size-sm;
                color: $color-gray-600;
                line-height: $line-height-relaxed;

                @media (min-width: $breakpoint-md) {
                    font-size: $font-size-base;
                }
            }
        }
    }

    // -- policy  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: $color-white;
    }

    // -- policy__container  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy__container {
        max-width: q(800);
        margin: 0 auto;
        padding: 0 $spacing-6;

        @media (min-width: $breakpoint-md) {
            padding: 0 $spacing-8;
        }
    }

    // -- policy__header  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy__header {
        padding: $spacing-16 0 $spacing-8;
        border-bottom: q(1) solid $color-gray-200;

        @media (min-width: $breakpoint-md) {
            padding: $spacing-24 0 $spacing-12;
        }
    }

    // -- policy__title  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy__title {
        font-family: $font-display;
        font-size: $font-size-3xl;
        font-weight: $font-weight-bold;
        color: $color-primary;
        margin-bottom: $spacing-4;
        letter-spacing: -0.02em;

        @media (min-width: $breakpoint-md) {
            font-size: $font-size-4xl;
        }
    }

    // -- policy__subtitle  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy__subtitle {
        font-size: $font-size-lg;
        color: $color-gray-600;
        margin-bottom: $spacing-4;

        @media (min-width: $breakpoint-md) {
            font-size: $font-size-xl;
        }
    }

    // -- policy__updated  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy__updated {
        font-size: $font-size-sm;
        color: $color-gray-500;
    }

    // -- policy__content  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy__content {
        flex: 1;
        padding: $spacing-12 0;

        @media (min-width: $breakpoint-md) {
            padding: $spacing-16 0;
        }

        // Typography
        h2 {
            font-family: $font-display;
            font-size: $font-size-xl;
            font-weight: $font-weight-semibold;
            color: $color-primary;
            margin-top: $spacing-10;
            margin-bottom: $spacing-4;
            padding-top: $spacing-6;
            border-top: q(1) solid $color-gray-100;

            &:first-child {
                margin-top: 0;
                padding-top: 0;
                border-top: none;
            }

            @media (min-width: $breakpoint-md) {
                font-size: $font-size-2xl;
            }
        }

        h3 {
            font-family: $font-display;
            font-size: $font-size-lg;
            font-weight: $font-weight-semibold;
            color: $color-primary;
            margin-top: $spacing-6;
            margin-bottom: $spacing-3;
        }

        p {
            font-size: $font-size-base;
            color: $color-gray-700;
            line-height: $line-height-relaxed;
            margin-bottom: $spacing-4;
        }

        ul,
        ol {
            margin-bottom: $spacing-6;
            padding-left: $spacing-6;
        }

        ul {
            list-style-type: disc;
        }

        ol {
            list-style-type: decimal;
        }

        li {
            font-size: $font-size-base;
            color: $color-gray-700;
            line-height: $line-height-relaxed;
            margin-bottom: $spacing-2;
        }

        a {
            color: $color-primary;
            text-decoration: underline;
            transition: color 0.2s ease;

            &:hover {
                color: $color-gray-900;
            }
        }

        strong {
            font-weight: $font-weight-semibold;
            color: $color-gray-900;
        }
    }

    // -- policy__nav  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy__nav {
        padding: $spacing-8 0 $spacing-16;
        border-top: q(1) solid $color-gray-200;

        @media (min-width: $breakpoint-md) {
            padding: $spacing-12 0 $spacing-24;
        }
    }

    // -- policy__back  (from site-scape_group/src/static/scss/sections/_policy.scss) --
    .ss-c-policy__back {
        display: inline-flex;
        align-items: center;
        font-size: $font-size-base;
        color: $color-gray-600;
        text-decoration: none;
        transition: color 0.2s ease;

        &:hover {
            color: $color-primary;
        }
    }

    // -- link-arrow  (from site-scape_press/src/static/scss/components/_buttons.scss) --
    .ss-c-link-arrow {
        display: inline-flex;
        align-items: baseline;
        gap: $spacing-2;
        font-weight: $font-weight-medium;
        text-decoration: none;
        color: inherit;
        border-bottom: q(1) solid currentColor;
        padding-bottom: q(2);
        transition: opacity $transition-base;

        &::after {
            content: '\2197';
            display: inline-block;
            transition: transform $transition-base;
        }

        &:hover {
            opacity: 1;

            &::after {
                transform: translate(q(2), q(-2));
            }
        }
    }

    // -- card  (from site-scape_press/src/static/scss/components/_cards.scss) --
    .ss-c-card {
        padding: $spacing-8;
        background-color: $color-white;
        border: q(1) solid $color-gray-100;
        transition: box-shadow $transition-base;

        &:hover {
            box-shadow: $shadow-lg;
        }

        &__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: q(48);
            height: q(48);
            margin-bottom: $spacing-4;
            color: $color-accent;

            svg {
                width: q(32);
                height: q(32);
            }
        }

        &__title {
            font-size: $font-size-xl;
            font-weight: $font-weight-semibold;
            margin-bottom: $spacing-3;
        }

        &__description {
            font-size: $font-size-base;
            color: $color-gray-600;
            line-height: $line-height-relaxed;
        }
    }

    // -- header  (from site-scape_press/src/static/scss/layout/_header.scss) --
    .ss-c-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: $spacing-5 0;
        background-color: $color-white;
        border-bottom: q(1) solid transparent;
        transition: border-color $transition-base, background-color $transition-base, color $transition-base;

        &.is-scrolled {
            border-bottom-color: $color-black;
        }

        // When the menu is open, the header swaps to the inverted scheme so the
        // logo and toggle remain visible against the black overlay.
        body.is-menu-open & {
            background-color: transparent;
            color: $color-white;
            border-bottom-color: transparent;
        }

        &__container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 100%;
            margin: 0 auto;
            padding: 0 $spacing-6;
            gap: $spacing-6;

            @media (min-width: $breakpoint-lg) {
                padding: 0 $spacing-12;
            }
        }

        &__logo {
            font-family: $font-display;
            font-size: $font-size-base;
            font-weight: $font-weight-bold;
            color: currentColor;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-snug;
            text-decoration: none;
            white-space: nowrap;
        }

        &__actions {
            display: flex;
            align-items: center;
            gap: $spacing-4;

            @media (min-width: $breakpoint-md) {
                gap: $spacing-6;
            }
        }

        &__cta {
            display: none;
            align-items: center;
            gap: $spacing-2;
            padding: $spacing-2 $spacing-4;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            text-decoration: none;
            color: currentColor;
            border: q(1) solid currentColor;
            border-radius: q(999);
            transition: background-color $transition-base, color $transition-base;

            @media (min-width: $breakpoint-sm) {
                display: inline-flex;
            }

            &:hover {
                background-color: currentColor;
                color: $color-white;

                // Invert again inside an open (dark) menu so it stays readable.
                body.is-menu-open & {
                    color: $color-black;
                }
            }
        }

        // Hamburger / Close toggle.
        &__menu-toggle {
            display: inline-flex;
            align-items: center;
            gap: $spacing-3;
            padding: $spacing-2 $spacing-4;
            font-family: $font-sans;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            color: currentColor;
            background-color: transparent;
            border: q(1) solid currentColor;
            border-radius: q(999);
            cursor: pointer;
            transition: background-color $transition-base, color $transition-base;

            &:hover {
                background-color: currentColor;
                color: $color-white;

                body.is-menu-open & {
                    color: $color-black;
                }
            }
        }

        &__menu-toggle-label {
            line-height: 1;

            &[data-label-close] { display: none; }

            .ss-c-header__menu-toggle.is-active & {
                &[data-label-open]  { display: none; }
                &[data-label-close] { display: inline; }
            }
        }

        &__menu-toggle-icon {
            position: relative;
            display: inline-block;
            width: q(18);
            height: q(12);

            span {
                position: absolute;
                left: 0;
                right: 0;
                height: q(1.5);
                background-color: currentColor;
                transition: transform $transition-base, top $transition-base, opacity $transition-base;

                &:nth-child(1) { top: q(2); }
                &:nth-child(2) { top: q(8); }
            }

            .ss-c-header__menu-toggle.is-active & span {
                top: q(5);
                &:nth-child(1) { transform: rotate(45deg); }
                &:nth-child(2) { transform: rotate(-45deg); }
            }
        }
    }


    // -- header__primary  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary {
        display: none;
        flex: 1;
        justify-content: center;

        @media (min-width: $breakpoint-lg) {
            display: flex;
        }
    }

    // -- header__primary-list  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary-list {
        display: flex;
        align-items: center;
        gap: $spacing-6;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    // -- header__primary-item  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary-item {
        position: relative;
    }

    // -- header__primary-link  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary-link {
        display: inline-flex;
        align-items: center;
        gap: $spacing-2;
        padding: $spacing-3 0;
        font-family: $font-sans;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        text-transform: uppercase;
        letter-spacing: $letter-spacing-wide;
        color: currentColor;
        text-decoration: none;
        cursor: pointer;
        border-bottom: q(1) solid transparent;
        transition: border-color $transition-base, opacity $transition-base;

        &:hover,
        &[aria-expanded="true"] {
            border-bottom-color: currentColor;
        }
    }

    // -- header__primary-caret  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary-caret {
        display: inline-block;
        font-size: 0.65em;
        transform: translateY(q(-1));
        transition: transform $transition-base;

        .ss-c-header__primary-link[aria-expanded="true"] & {
            transform: translateY(q(-1)) rotate(180deg);
        }
    }

    // -- dropdown  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 110;
        min-width: q(448);
        max-width: q(704);
        margin-top: $spacing-3;
        background-color: $color-white;
        color: $color-black;
        border: q(1) solid rgba($color-black, 0.12);
        box-shadow: 0 q(24) q(60) q(-20) rgba(0, 0, 0, 0.25);

        // Hidden by default; shown by toggling the `hidden` attribute via JS.
        &[hidden] {
            display: none;
        }

        &__inner {
            padding: $spacing-6;
        }

        &__lede {
            margin: 0 0 $spacing-5;
            font-family: $font-display;
            font-size: $font-size-sm;
            line-height: 1.4;
            color: rgba($color-black, 0.65);
            max-width: q(512);
        }

        &__list {
            display: grid;
            grid-template-columns: 1fr;
            gap: $spacing-1;
            margin: 0 0 $spacing-5;
            padding: 0;
            list-style: none;

            @media (min-width: $breakpoint-md) {
                grid-template-columns: 1fr 1fr;
                gap: $spacing-1 $spacing-6;
            }
        }

        &__link {
            display: block;
            padding: $spacing-3 $spacing-3;
            text-decoration: none;
            color: $color-black;
            border-radius: q(4);
            transition: background-color $transition-base;

            &:hover {
                background-color: $color-gray-100;
            }
        }

        &__label {
            display: block;
            font-family: $font-display;
            font-weight: $font-weight-medium;
            font-size: $font-size-base;
            line-height: 1.2;
        }

        &__sub {
            display: block;
            margin-top: 0.25em;
            font-size: $font-size-xs;
            line-height: 1.45;
            color: rgba($color-black, 0.6);
        }

        &__overview {
            display: inline-flex;
            align-items: center;
            gap: $spacing-2;
            padding-top: $spacing-3;
            border-top: q(1) solid rgba($color-black, 0.12);
            font-family: $font-sans;
            font-size: $font-size-xs;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            color: $color-black;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    // -- menu__sublist  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-menu__sublist {
        list-style: none;
        margin: $spacing-3 0 $spacing-2 q(56);
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-2 $spacing-5;

        li a {
            font-family: $font-sans;
            font-size: $font-size-sm;
            color: rgba($color-white, 0.6);
            text-decoration: none;
            text-transform: none;
            letter-spacing: 0;

            &:hover {
                color: $color-white;
            }
        }
    }

    // -- about  (from site-scape_press/src/static/scss/sections/_about.scss) --
    .ss-c-about {
        padding: $spacing-24 0;
        background-color: $color-white;
        color: $color-black;

        &__container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 $spacing-6;

            @media (min-width: $breakpoint-lg) {
                padding: 0 $spacing-12;
            }
        }

        &__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: $spacing-12;
            align-items: start;

            @media (min-width: $breakpoint-lg) {
                grid-template-columns: 1fr 2fr;
                gap: $spacing-16;
            }
        }

        &__eyebrow {
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            padding-top: $spacing-3;
            border-top: q(1) solid $color-black;
        }

        &__title {
            font-family: $font-display;
            font-size: clamp(q(36), 6vw, q(80));
            font-weight: $font-weight-bold;
            line-height: 0.95;
            letter-spacing: $letter-spacing-tight;
            margin: 0 0 $spacing-8;
            max-width: 22ch;
        }

        &__description {
            font-size: $font-size-lg;
            color: $color-gray-700;
            line-height: 1.5;
            margin-bottom: $spacing-8;
            max-width: 60ch;
        }

        &__list {
            list-style: none;
            margin: 0 0 $spacing-10;
            padding: 0;
        }

        &__list-item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: $spacing-6;
            padding: $spacing-4 0;
            border-bottom: q(1) solid $color-gray-200;
            font-size: $font-size-base;

            &::before {
                content: '\2014'; // —
                color: $color-black;
                font-weight: $font-weight-bold;
            }
        }
    }

    // -- contact  (from site-scape_press/src/static/scss/sections/_contact.scss) --
    .ss-c-contact {
        padding: $spacing-24 0;
        background-color: $color-black;
        color: $color-white;

        &__container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 $spacing-6;

            @media (min-width: $breakpoint-lg) {
                padding: 0 $spacing-12;
            }
        }

        &__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: $spacing-16;
            align-items: start;

            @media (min-width: $breakpoint-lg) {
                grid-template-columns: 1fr 1fr;
            }
        }

        &__eyebrow {
            display: inline-block;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            color: $color-gray-400;
            margin-bottom: $spacing-6;
        }

        &__title {
            font-family: $font-display;
            font-size: clamp(q(36), 7vw, q(96));
            font-weight: $font-weight-bold;
            line-height: 0.95;
            letter-spacing: $letter-spacing-tight;
            margin: 0 0 $spacing-10;
            color: $color-white;
            max-width: 14ch;
        }

        &__description {
            font-size: $font-size-lg;
            color: $color-gray-300;
            line-height: 1.5;
            margin: 0 0 $spacing-10;
            max-width: 50ch;
        }

        &__info {
            display: flex;
            flex-direction: column;
            gap: $spacing-4;
            font-style: normal;
            margin-bottom: $spacing-10;
        }

        &__info-item {
            display: flex;
            align-items: center;
            gap: $spacing-3;
            font-size: $font-size-base;
            color: $color-white;

            svg {
                width: q(18);
                height: q(18);
                color: $color-white;
            }

            a {
                color: inherit;
                text-decoration: none;
                border-bottom: q(1) solid currentColor;
                padding-bottom: q(2);

                &:hover {
                    opacity: 0.6;
                }
            }
        }

        &__social {
            display: flex;
            gap: $spacing-3;
        }

        &__social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: q(44);
            height: q(44);
            border: q(1) solid $color-white;
            border-radius: q(999);
            color: $color-white;
            transition: background-color $transition-fast, color $transition-fast;

            &:hover {
                background-color: $color-white;
                color: $color-black;
            }

            svg {
                width: q(18);
                height: q(18);
            }
        }
    }

    // -- cta  (from site-scape_press/src/static/scss/sections/_cta.scss) --
    .ss-c-cta {
        padding: $spacing-32 0;
        background-color: $color-white;
        color: $color-black;

        &__container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 $spacing-6;

            @media (min-width: $breakpoint-lg) {
                padding: 0 $spacing-12;
            }
        }

        &__title {
            font-family: $font-display;
            font-size: clamp(q(40), 9vw, q(128));
            font-weight: $font-weight-bold;
            line-height: 0.95;
            letter-spacing: $letter-spacing-tight;
            margin: 0 0 $spacing-10;
            color: $color-black;
            max-width: 22ch;
        }

        &__description {
            font-size: $font-size-lg;
            color: $color-gray-700;
            max-width: 60ch;
            margin: 0 0 $spacing-10;
            line-height: 1.5;
        }

        &__actions {
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-4;
        }
    }

    // -- features  (from site-scape_press/src/static/scss/sections/_features.scss) --
    .ss-c-features {
        padding: $spacing-24 0;
        background-color: $color-black;
        color: $color-white;

        &__container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 $spacing-6;

            @media (min-width: $breakpoint-lg) {
                padding: 0 $spacing-12;
            }
        }

        &__header {
            max-width: 60ch;
            margin: 0 0 $spacing-16;
        }

        &__eyebrow {
            display: inline-block;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            color: $color-gray-400;
            margin-bottom: $spacing-6;
        }

        &__title {
            font-family: $font-display;
            font-size: clamp(q(36), 6vw, q(80));
            font-weight: $font-weight-bold;
            line-height: 0.95;
            letter-spacing: $letter-spacing-tight;
            margin: 0 0 $spacing-6;
            color: $color-white;
        }

        &__description {
            font-size: $font-size-lg;
            color: $color-gray-300;
            line-height: 1.5;
        }

        &__grid {
            display: grid;
            grid-template-columns: 1fr;
            border-top: q(1) solid rgba($color-white, 0.18);

            @media (min-width: $breakpoint-md) {
                grid-template-columns: repeat(2, 1fr);
            }

            @media (min-width: $breakpoint-lg) {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        &__item {
            position: relative;
            padding: $spacing-12 $spacing-6;
            border-bottom: q(1) solid rgba($color-white, 0.18);
            background-color: transparent;
            color: $color-white;
            transition: background-color $transition-base;

            @media (min-width: $breakpoint-md) {
                &:nth-child(2n) {
                    border-left: q(1) solid rgba($color-white, 0.18);
                }
            }

            @media (min-width: $breakpoint-lg) {
                &:nth-child(2n) {
                    border-left: none;
                }
                &:not(:nth-child(3n + 1)) {
                    border-left: q(1) solid rgba($color-white, 0.18);
                }
            }

            &:hover {
                background-color: rgba($color-white, 0.04);
            }
        }

        &__index {
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            font-variant-numeric: tabular-nums;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            color: $color-gray-400;
            margin-bottom: $spacing-8;
        }

        &__icon {
            display: none; // Replaced by numbered list pattern.
        }

        &__item-title {
            font-family: $font-display;
            font-size: $font-size-2xl;
            font-weight: $font-weight-bold;
            letter-spacing: $letter-spacing-snug;
            margin: 0 0 $spacing-4;
            color: $color-white;
        }

        &__item-description {
            font-size: $font-size-base;
            color: $color-gray-300;
            line-height: 1.5;
            margin: 0;
        }
    }

    // -- legal  (from site-scape_press/src/static/scss/sections/_legal.scss) --
    .ss-c-legal {
        color: $color-black;
        background: $color-white;

        &__container {
            width: 100%;
            max-width: q(1280);
            margin: 0 auto;
            padding: 0 clamp(q(20), 4vw, q(48));
        }

        // ------------------------------------------------------------------ header
        &__header {
            padding: clamp(q(96), 14vh, q(192)) 0 clamp(q(48), 6vh, q(80));
            border-bottom: q(1) solid rgba($color-black, 0.12);
        }

        &__eyebrow {
            font-family: $font-sans;
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: rgba($color-black, 0.6);
            margin: 0 0 q(20);
        }

        &__title {
            font-family: $font-display;
            font-weight: 500;
            font-size: clamp(q(44), 8vw, q(112));
            line-height: 0.95;
            letter-spacing: -0.02em;
            margin: 0;
        }

        &__meta {
            margin: q(24) 0 0;
            font-size: q(14);
            color: rgba($color-black, 0.55);
        }

        // -------------------------------------------------------------------- body
        &__body {
            padding: clamp(q(48), 6vh, q(96)) 0 clamp(q(80), 10vh, q(144));

            .ss-c-legal__container {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: clamp(q(40), 6vw, q(80));

                @media (min-width: q(960)) {
                    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
                }
            }
        }

        // -------------------------------------------------------------------- prose
        &__prose {
            max-width: q(672);
            font-size: clamp(q(16), 1.05vw + q(13.6), q(18));
            line-height: 1.65;
            color: rgba($color-black, 0.85);

            p {
                margin: 0 0 1.25em;
            }

            h2 {
                font-family: $font-display;
                font-weight: 500;
                font-size: clamp(q(24), 2vw + q(16), q(36));
                line-height: 1.15;
                letter-spacing: -0.01em;
                margin: 2.75em 0 0.75em;
                color: $color-black;
            }

            h3 {
                font-size: q(18);
                text-transform: uppercase;
                letter-spacing: 0.1em;
                margin: 2em 0 0.75em;
            }

            ul,
            ol {
                margin: 0 0 1.5em;
                padding-left: 1.25em;

                li {
                    margin: 0 0 0.5em;
                }
            }

            a {
                color: $color-black;
                text-decoration: underline;
                text-underline-offset: 0.2em;
                text-decoration-thickness: q(1);

                &:hover {
                    text-decoration-thickness: q(2);
                }
            }

            code {
                font-family: $font-sans;
                font-size: 0.9em;
                background: rgba($color-black, 0.06);
                padding: 0.1em 0.4em;
                border-radius: q(2);
            }

            abbr[title] {
                text-decoration: underline dotted;
                cursor: help;
            }
        }

        &__lead {
            font-family: $font-display;
            font-size: clamp(q(20), 1.4vw + q(16), q(28));
            line-height: 1.35;
            color: $color-black;
            margin: 0 0 2.5em;
        }

        // -------------------------------------------------------------------- table
        &__table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5em 0 2.5em;
            font-size: q(15);

            th,
            td {
                text-align: left;
                padding: q(12) q(16);
                border-bottom: q(1) solid rgba($color-black, 0.12);
                vertical-align: top;
            }

            th {
                font-family: $font-sans;
                font-size: q(12);
                text-transform: uppercase;
                letter-spacing: 0.12em;
                color: rgba($color-black, 0.6);
                border-bottom: q(1) solid rgba($color-black, 0.3);
            }
        }

        // -------------------------------------------------------------------- aside
        &__aside {
            position: sticky;
            top: q(96);
            align-self: start;
            padding: q(24);
            border: q(1) solid rgba($color-black, 0.15);
        }

        &__aside-heading {
            font-family: $font-sans;
            font-size: q(11.2);
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: rgba($color-black, 0.55);
            margin: 0 0 q(16);
        }

        &__aside-list {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                margin: 0 0 q(8);
            }

            a {
                color: $color-black;
                text-decoration: none;
                border-bottom: q(1) solid transparent;
                transition: border-color 160ms ease;

                &:hover {
                    border-bottom-color: $color-black;
                }
            }
        }
    }

    // -- marketing  (from site-scape_press/src/static/scss/sections/_marketing.scss) --
    .ss-c-marketing {
        color: $color-black;
        background: $color-white;

        &__container {
            width: 100%;
            max-width: q(1280);
            margin: 0 auto;
            padding: 0 clamp(q(20), 4vw, q(48));
        }

        // ------------------------------------------------------------------ hero
        &__hero {
            padding: clamp(q(112), 18vh, q(224)) 0 clamp(q(48), 6vh, q(80));
            border-bottom: q(1) solid rgba($color-black, 0.12);

            &--detail {
                padding-top: clamp(q(96), 14vh, q(176));
            }
        }

        &__crumbs {
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-2;
            margin: 0 0 $spacing-4;
            font-family: $font-sans;
            font-size: $font-size-xs;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            color: rgba($color-black, 0.55);

            a {
                color: inherit;
                text-decoration: none;

                &:hover {
                    color: $color-black;
                    text-decoration: underline;
                }
            }
        }

        &__eyebrow {
            font-family: $font-sans;
            font-size: $font-size-xs;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            color: rgba($color-black, 0.6);
            margin: 0 0 $spacing-4;
        }

        &__title {
            font-family: $font-display;
            font-weight: $font-weight-medium;
            font-size: clamp(q(44), 8vw, q(112));
            line-height: $line-height-tight;
            letter-spacing: $letter-spacing-snug;
            margin: 0;
            max-width: 22ch;
        }

        &__lede {
            margin: $spacing-6 0 0;
            font-family: $font-display;
            font-size: clamp(q(18), 1.4vw + q(13.6), q(24));
            line-height: 1.4;
            max-width: 56ch;
            color: rgba($color-black, 0.75);
        }

        // ----------------------------------------------------------------- index
        &__grid-section {
            padding: clamp(q(48), 6vh, q(96)) 0 clamp(q(64), 8vh, q(128));
        }

        &__grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: 1fr;
            border-top: q(1) solid rgba($color-black, 0.12);

            @media (min-width: q(720)) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        // ------------------------------------------------------------- card item
        .ss-c-card-item {
            border-bottom: q(1) solid rgba($color-black, 0.12);
            border-right: q(1) solid rgba($color-black, 0.12);

            &:nth-child(2n) {
                @media (min-width: q(720)) {
                    border-right: 0;
                }
            }

            @media (max-width: q(719.98)) {
                border-right: 0;
            }

            &__link {
                display: grid;
                grid-template-columns: auto 1fr auto;
                align-items: start;
                gap: $spacing-4;
                padding: clamp(q(24), 3vw, q(40));
                color: $color-black;
                text-decoration: none;
                min-height: 100%;
                transition: background-color $transition-base;

                &:hover {
                    background-color: $color-gray-50;

                    .ss-c-card-item__arrow {
                        transform: translate(q(4), q(-4));
                    }
                }
            }

            &__index {
                font-family: $font-sans;
                font-size: $font-size-xs;
                font-weight: $font-weight-medium;
                color: rgba($color-black, 0.45);
                letter-spacing: $letter-spacing-wide;
            }

            &__body {
                min-width: 0;
            }

            &__eyebrow {
                margin: 0 0 $spacing-2;
                font-family: $font-sans;
                font-size: $font-size-xs;
                text-transform: uppercase;
                letter-spacing: $letter-spacing-wide;
                color: rgba($color-black, 0.55);
            }

            &__title {
                margin: 0 0 $spacing-3;
                font-family: $font-display;
                font-weight: $font-weight-medium;
                font-size: clamp(q(24), 1.5vw + q(16), q(36));
                line-height: 1.1;
                letter-spacing: $letter-spacing-snug;
            }

            &__lede {
                margin: 0;
                font-size: $font-size-base;
                line-height: 1.5;
                color: rgba($color-black, 0.7);
            }

            &__arrow {
                font-size: q(24);
                line-height: 1;
                color: rgba($color-black, 0.6);
                transition: transform 200ms ease;
            }
        }

        // ------------------------------------------------------------ detail body
        &__detail {
            padding: clamp(q(48), 6vh, q(96)) 0 clamp(q(80), 10vh, q(144));
        }

        &__detail-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: clamp(q(40), 6vw, q(80));

            @media (min-width: q(960)) {
                grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
            }
        }

        &__prose {
            max-width: q(672);
            font-size: clamp(q(16), 1.05vw + q(13.6), q(18));
            line-height: 1.65;
            color: rgba($color-black, 0.85);

            p {
                margin: 0 0 1.25em;
            }

            h2 {
                font-family: $font-display;
                font-weight: $font-weight-medium;
                font-size: clamp(q(24), 2vw + q(16), q(36));
                line-height: 1.15;
                letter-spacing: -0.01em;
                margin: 2.5em 0 0.75em;
                color: $color-black;
            }
        }

        &__bullets {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                position: relative;
                padding: $spacing-3 0 $spacing-3 q(28);
                border-bottom: q(1) solid rgba($color-black, 0.1);

                &::before {
                    content: "→";
                    position: absolute;
                    left: 0;
                    top: $spacing-3;
                    color: rgba($color-black, 0.45);
                }
            }
        }

        &__aside {
            position: sticky;
            top: q(96);
            align-self: start;
            padding: $spacing-6;
            border: q(1) solid rgba($color-black, 0.15);
        }

        &__aside-heading {
            font-family: $font-sans;
            font-size: $font-size-xs;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            color: rgba($color-black, 0.55);
            margin: 0 0 $spacing-4;
        }

        &__aside-list {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                margin: 0 0 $spacing-3;
            }

            a {
                color: $color-black;
                text-decoration: none;
                border-bottom: q(1) solid transparent;
                transition: border-color $transition-base;

                &:hover {
                    border-bottom-color: $color-black;
                }
            }
        }

        // -------------------------------------------------------------------- cta
        &__cta {
            padding: clamp(q(64), 10vh, q(144)) 0;
            background: $color-black;
            color: $color-white;

            .ss-c-marketing__container {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: $spacing-6;

                @media (min-width: q(720)) {
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                }
            }
        }

        &__cta-title {
            font-family: $font-display;
            font-weight: $font-weight-medium;
            font-size: clamp(q(28), 3vw + q(16), q(56));
            line-height: 1.05;
            letter-spacing: $letter-spacing-snug;
            margin: 0;
            max-width: 18ch;
        }

        &__cta .ss-c-btn {
            background: $color-white;
            color: $color-black;
            border-color: $color-white;

            &:hover {
                background: transparent;
                color: $color-white;
            }
        }
    }

    // -- offerings  (from site-scape_press/src/static/scss/sections/_offerings.scss) --
    .ss-c-offerings {
        padding: $spacing-24 0;
        background-color: $color-white;
        color: $color-black;

        &__container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 $spacing-6;

            @media (min-width: $breakpoint-lg) {
                padding: 0 $spacing-12;
            }
        }

        &__eyebrow {
            display: block;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            margin-bottom: $spacing-6;
        }

        &__lead {
            font-family: $font-display;
            font-size: clamp(q(28), 3.5vw, q(52));
            font-weight: $font-weight-bold;
            line-height: $line-height-snug;
            letter-spacing: $letter-spacing-tight;
            max-width: 28ch;
            margin: 0 0 $spacing-16;
        }

        &__list {
            list-style: none;
            margin: 0;
            padding: 0;
            border-top: q(1) solid $color-black;
        }

        &__item {
            border-bottom: q(1) solid $color-black;
        }

        &__link {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: baseline;
            gap: $spacing-6;
            padding: $spacing-8 0;
            text-decoration: none;
            color: $color-black;
            transition: padding $transition-base;

            &:hover {
                padding-left: $spacing-6;
                opacity: 1;

                .ss-c-offerings__arrow {
                    transform: translate(q(4), q(-4));
                }
            }
        }

        &__index {
            font-size: $font-size-base;
            font-weight: $font-weight-medium;
            font-variant-numeric: tabular-nums;
            text-transform: uppercase;
            letter-spacing: $letter-spacing-wide;
            align-self: start;
            padding-top: 0.6em;
        }

        &__title {
            font-family: $font-display;
            font-size: clamp(q(28), 5vw, q(72));
            font-weight: $font-weight-bold;
            line-height: $line-height-snug;
            letter-spacing: $letter-spacing-tight;
            margin: 0;
            color: $color-black;
        }

        &__arrow {
            font-size: clamp(q(24), 3vw, q(40));
            line-height: 1;
            align-self: center;
            transition: transform $transition-base;
        }
    }

    // -- flex-center  (from site-scape_press/src/static/scss/utilities/_helpers.scss) --
    .ss-c-flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    // -- flex-between  (from site-scape_press/src/static/scss/utilities/_helpers.scss) --
    .ss-c-flex-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    // -- mt-auto  (from site-scape_press/src/static/scss/utilities/_helpers.scss) --
    .ss-c-mt-auto {
        margin-top: auto;
    }

    // -- mb-0  (from site-scape_press/src/static/scss/utilities/_helpers.scss) --
    .ss-c-mb-0 {
        margin-bottom: 0;
    }

    // -- text-muted  (from site-scape_press/src/static/scss/utilities/_helpers.scss) --
    .ss-c-text-muted {
        color: $color-gray-600;
    }

    // -- bg-accent  (from site-scape_press/src/static/scss/utilities/_helpers.scss) --
    .ss-c-bg-accent {
        background-color: $color-accent;
    }

    // -- bg-dark  (from site-scape_press/src/static/scss/utilities/_helpers.scss) --
    .ss-c-bg-dark {
        background-color: $color-primary;
    }

    // -- button  (from site-scape_foundation/src/static/scss/app/_button.scss) --
    .ss-c-button {
        // NOTE: removed `border-radius: 0 !important` — it outranked the
        // button module's --rounded/--pill variants (this layer > components).
        &.ss-c-accent {
            background: var(--color_accent_primary);
        }
    }

    // -- article--card  (from site-scape_foundation/src/static/scss/app/_figure.scss) --
    .ss-c-article--card {
        border: q(1) solid var(--color_line_primary);

        .ss-c-tags {
            padding: q(8);

            > * {
        // [parity] (stripped @include)
            }
        }
    }

    // -- frame--center  (from site-scape_foundation/src/static/scss/app/_frame.scss) --
    .ss-c-frame--center {
        // [parity] (stripped @include)
        // Named areas
        .ss-c-frame--center__area--center_left {
        // [parity] (stripped @include)
        }
        .ss-c-frame--center__area--center_center {
        // [parity] (stripped @include)
        }
        .ss-c-frame--center__area--center_right {
        // [parity] (stripped @include)
        }

        // Optional logical groupings
        .ss-c-frame--center__area--left {
        // [parity] (stripped @include)
        }
        .ss-c-frame--center__area--center {
        // [parity] (stripped @include)
        }
        .ss-c-frame--center__area--right {
        // [parity] (stripped @include)
        }
    }

    // -- main_content  (from site-scape_foundation/src/static/scss/app/_frame.scss) --
    .ss-c-main_content {
        padding: 0;
    }

    // -- main_content_section  (from site-scape_foundation/src/static/scss/app/_frame.scss) --
    .ss-c-main_content_section {
        margin: q(40) 0;

        // Sections rendered inside main_content_section must not introduce
        // their own horizontal padding -- the parent column already provides
        // the gutter via the page-level frame.
        .ss-c-section,
        .ss-c-grid__frame--1,
        .ss-c-frame--center__area--center_center {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    // -- fullscreen  (from site-scape_foundation/src/static/scss/app/_fullscreen.scss) --
    .ss-c-fullscreen {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        position: relative;
        height: calc(100vh - q(44));
        width: 100%;
        overflow: hidden;
        // margin: q(8) q(-20);
        text-align: center;
        // padding: q(20);

        div {
            width: 100%;
            height: 100%;
        }
    }

    // -- ribbon--bottom  (from site-scape_foundation/src/static/scss/app/_ribbon.scss) --
    .ss-c-ribbon--bottom {
        padding-left: 0;
        padding-right: 0;
    }

    // -- ribbon--top  (from site-scape_foundation/src/static/scss/app/_ribbon.scss) --
    .ss-c-ribbon--top {
        &.ss-c-title {
            height: q(70);
        }

        &.ss-c-navigation {
            height: q(22);
        }
    }

    // -- rail  (from site-scape_foundation/src/static/scss/app/_scrollbar.scss) --
    .ss-c-rail {
        // @include scrollbar();
        scrollbar-width: none;
    }

    // -- blockquote  (from site-scape_foundation/src/static/scss/components/_blockquote.scss) --
    .ss-c-blockquote {
        margin: q(12) 0;
        padding: q(8) q(10);
        position: relative;
        border-left: q(4) solid var(--color_accent_primary, #2d5a27);
        background: linear-gradient(135deg, rgba(45, 90, 39, 0.03) 0%, rgba(45, 90, 39, 0.01) 100%);
        border-radius: 0 q(2) q(2) 0;

        &__text {
            font-family: Georgia, serif, Georgia, "Times New Roman", serif;
            font-size: q(24);
            font-style: italic;
            font-weight: 400;
            line-height: 1.7;
            margin: 0 0 q(4);
            color: var(--color_text_primary, #1a1a1a);
            letter-spacing: 0.01em;

            &::before {
                content: '"';
                font-family: Georgia, serif, Georgia, serif;
                font-size: q(64);
                font-style: normal;
                line-height: 1;
                color: var(--color_accent_primary, #2d5a27);
                opacity: 0.25;
                position: absolute;
                top: q(2);
                left: q(4);
            }
        }

        &__footer {
            display: flex;
            flex-direction: column;
            gap: q(1);
            margin-top: q(4);
            padding-top: q(3);
            border-top: q(1) solid rgba(0, 0, 0, 0.08);
        }

        &__author {
            font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, -apple-system, sans-serif;
            font-style: normal;
            font-weight: 600;
            font-size: q(16);
            color: var(--color_text_primary, #1a1a1a);
        }

        &__source {
            font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, -apple-system, sans-serif;
            font-size: q(14);
            font-style: italic;
            opacity: 0.65;
        }

        // Alignment variants
        &--left {
            text-align: left;
        }

        &--center {
            text-align: center;
            border-left: none;
            border-top: q(4) solid var(--color_accent_primary, #2d5a27);
            border-radius: q(2) q(2) 0 0;
            padding: q(10) q(8);

            .ss-c-blockquote__text::before {
                left: 50%;
                transform: translateX(-50%);
                top: q(3);
            }

            .ss-c-blockquote__footer {
                align-items: center;
                border-top: none;
                padding-top: 0;
            }
        }

        &--right {
            text-align: right;
            border-left: none;
            border-right: q(4) solid var(--color_accent_primary, #2d5a27);
            border-radius: q(2) 0 0 q(2);

            .ss-c-blockquote__text::before {
                left: auto;
                right: q(4);
            }

            .ss-c-blockquote__footer {
                align-items: flex-end;
            }
        }

        // Large variant for hero sections
        &--large {
            .ss-c-blockquote__text {
                font-size: q(32);
                line-height: 1.6;

                &::before {
                    font-size: q(80);
                }
            }
        }
    }

    // -- blockquote-section  (from site-scape_foundation/src/static/scss/components/_blockquote.scss) --
    .ss-c-blockquote-section {
        padding: q(12) 0;
    }

    // -- project-carousel  (from site-scape_foundation/src/static/scss/components/_carousel.scss) --
    .ss-c-project-carousel {
        position: relative;
        display: flex;
        align-items: center;
        gap: q(4);
        padding: q(4) 0;

        &__track {
            display: flex;
            gap: q(6);
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            padding: q(2) 0;

            // Hide scrollbar
            scrollbar-width: none;
            -ms-overflow-style: none;
            &::-webkit-scrollbar {
                display: none;
            }
        }

        &__item {
            flex: 0 0 q(280);
            scroll-snap-align: start;
            position: relative;
            border-radius: q(2);
            overflow: hidden;
            text-decoration: none;
            color: inherit;
            background: var(--color_background_secondary, #f5f5f5);
            transition: transform 0.3s ease, box-shadow 0.3s ease;

            &:hover {
                transform: translateY(q(-4));
                box-shadow: 0 q(8) q(24) rgba(0, 0, 0, 0.15);
            }
        }

        &__image {
            width: 100%;
            height: q(180);
            object-fit: cover;
            object-position: center;
            display: block;
        }

        &__placeholder {
            width: 100%;
            height: q(180);
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--color_accent_primary, #2d5a27) 0%, #1a3d18 100%);

            span {
                font-family: Georgia, serif, Georgia, serif;
                font-size: q(64);
                font-weight: 700;
                color: rgba(255, 255, 255, 0.3);
            }
        }

        &__info {
            padding: q(4);
        }

        &__title {
            font-family: Georgia, serif, Georgia, serif;
            font-size: q(16);
            font-weight: 600;
            margin: 0 0 q(1);
            line-height: 1.3;
            color: var(--color_text_primary, #1a1a1a);
        }

        &__category {
            font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, -apple-system, sans-serif;
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color_text_secondary, #666);
        }

        &__btn {
            flex-shrink: 0;
            width: q(40);
            height: q(40);
            border-radius: 50%;
            border: q(1) solid var(--color_border, #ddd);
            background: var(--color_background, #fff);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;

            span {
                font-size: q(24);
                line-height: 1;
                color: var(--color_text_primary, #1a1a1a);
            }

            &:hover {
                background: var(--color_accent_primary, #2d5a27);
                border-color: var(--color_accent_primary, #2d5a27);

                span {
                    color: #fff;
                }
            }

            &:disabled {
                opacity: 0.3;
                cursor: not-allowed;
            }
        }
    }

    // -- projects__filter  (from site-scape_foundation/src/static/scss/components/_filter.scss) --
    .ss-c-projects__filter {
        margin: baseline(2) 0;
        font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

        span {
            cursor: pointer;

            &.active {
                text-decoration: underline;
                cursor: default;
                color: var(--color_accent_primary);
        // [parity] (stripped @include)
            }
        }
    }

    // -- divider--accent  (from site-scape_foundation/src/static/scss/components/_filter.scss) --
    .ss-c-divider--accent {
        border: none;
        height: q(1);
        background-color: var(--color_accent_primary);
        margin: 0 0 q(32) 0;
    }

    // -- grid__frame--1  (from site-scape_foundation/src/static/scss/components/_filter.scss) --
    .ss-c-grid__frame--1.reset--sides > .ss-c-grid__frame--6:last-child {
        hr.divider--thin {
            display: none;
        }
    }

    // -- icon-card-section  (from site-scape_foundation/src/static/scss/components/_icon_card.scss) --
    .ss-c-icon-card-section {
        padding: q(8) 0;
    }

    // -- icon-cards  (from site-scape_foundation/src/static/scss/components/_icon_card.scss) --
    .ss-c-icon-cards {
        display: flex;
        flex-wrap: wrap;
        gap: q(14);
        align-items: flex-start;
        justify-content: center;

        // Single row layout
        &--row {
            flex-wrap: nowrap;
            overflow: visible;
            justify-content: center;
            padding: q(6) q(4);

            .ss-c-icon-card {
                flex: 0 0 auto;
                max-width: q(200);
            }
        }

        // Grid layout
        &--grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(q(180), 1fr));
            max-width: q(800);
            margin: 0 auto;

            .ss-c-icon-card__connector {
                display: none;
            }
        }

        // With connectors modifier
        &--with-connectors {
            gap: q(6);
            align-items: flex-start;
        }
    }

    // -- icon-card  (from site-scape_foundation/src/static/scss/components/_icon_card.scss) --
    .ss-c-icon-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: q(220);

        &__image-wrapper {
            width: q(120);
            height: q(120);
            border-radius: 50%;
            border: q(3) dotted #000;
            padding: q(6);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color_background, #fff);
            transition: transform 0.3s ease;
            flex-shrink: 0;

            &:hover {
                transform: scale(1.05);
            }
        }

        &__image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
        }

        &__content {
            margin-top: q(10);
            max-width: 100%;
        }

        &__title {
            font-family: Georgia, serif, Georgia, "Times New Roman", serif;
            font-size: q(12);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            line-height: 1.1;
            margin: 0 0 q(2);
            color: var(--color_text_primary, #1a1a1a);
            // Force each word to a new line
            word-spacing: 100vw;
        }

        &__description {
            font-family: Georgia, serif, Georgia, "Times New Roman", serif;
            font-size: q(14);
            font-style: italic;
            line-height: 1.6;
            margin: 0 0 q(2);
            color: var(--color_text_secondary, #555);
        }

        &__link {
            font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, -apple-system, sans-serif;
            font-size: q(14);
            font-weight: 500;
            color: var(--color_accent_primary, #2d5a27);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: q(1);
            transition: color 0.2s ease;

            &:hover {
                color: var(--color_accent_secondary, #4a8c3f);
                text-decoration: underline;
            }
        }

        &__link-arrow {
            transition: transform 0.2s ease;
        }

        &__link:hover &__link-arrow {
            transform: translateX(q(4));
        }

        // Connector between cards - aligned to circle center
        &__connector {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0 q(1);
            // Center vertically with the 120px circle
            height: q(120);

            // Dotted arrow style
            &--dotted_arrow {
                svg {
                    width: q(50);
                    height: q(24);
                }
            }

            // Vertical dotted bar style
            &--dotted_bar {
                .ss-c-icon-card__bar {
                    width: q(2);
                    height: q(60);
                    border-left: q(2) dotted #000;
                }
            }
        }
    }

    // -- icon-grid-section  (from site-scape_foundation/src/static/scss/components/_icon_list.scss) --
    .ss-c-icon-grid-section {
        padding: q(8) 0;
    }

    // -- icon-grid  (from site-scape_foundation/src/static/scss/components/_icon_list.scss) --
    .ss-c-icon-grid {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        max-width: q(1400);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: q(8);

        @media (max-width: q(1200)) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @media (max-width: q(900)) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (max-width: q(600)) {
            grid-template-columns: 1fr;
        }

        &__item {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: q(3);
        }

        &__icon {
            flex: 0 0 auto;
            width: q(56);
            height: q(56);
            border-radius: q(6);
            border: q(1) solid var(--color_border, #e5e5e5);
            background: var(--color_background, #fff);
            padding: q(1.5);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        &__image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }

        &__content {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: q(0.5);
        }

        &__title {
            margin: 0;
            font-size: q(1.5);
            line-height: 1.2;
            word-break: break-word;
        }

        &__description {
            margin: 0;
            font-size: q(1.25);
            line-height: 1.4;
        }

        &__link {
            align-self: flex-start;
            margin-top: q(0.5);
            font-size: q(1.25);
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: q(1);

            &:hover .ss-c-icon-grid__link-arrow,
            &:focus .ss-c-icon-grid__link-arrow {
                transform: translateX(q(3));
            }
        }

        &__link-arrow {
            display: inline-block;
            transition: transform 0.2s ease;
        }
    }

    // -- storyboard-section  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard-section {
        padding: q(8) 0;
    }

    // -- storyboard  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard {
        display: flex;
        flex-wrap: wrap;
        gap: q(6);
        align-items: flex-start;
        justify-content: center;

        &--row {
            flex-wrap: nowrap;
            overflow: visible;
            justify-content: center;
            padding: q(4) q(2);

            .ss-c-storyboard__panel {
                flex: 0 0 auto;
                max-width: q(240);
            }

            @media (max-width: q(900)) {
                flex-wrap: wrap;

                .ss-c-storyboard__connector {
                    display: none;
                }
            }
        }

        &--grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(q(200), 1fr));
            max-width: q(1000);
            margin: 0 auto;

            .ss-c-storyboard__connector {
                display: none;
            }
        }

        &--with-connectors {
            gap: q(2);
            align-items: flex-start;
        }
    }

    // -- storyboard__panel  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: q(240);
    }

    // -- storyboard__image-wrapper  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__image-wrapper {
        width: 100%;
        max-width: q(200);
        aspect-ratio: 1 / 1;
        background: transparent;
        border: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    // -- storyboard__image  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__image {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        background: transparent;
    }

    // -- storyboard__content  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__content {
        margin-top: q(3);
        display: flex;
        flex-direction: column;
        gap: q(1);
        align-items: center;
    }

    // -- storyboard__title  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__title {
        margin: 0;
        font-size: q(2);
        line-height: 1.2;
    }

    // -- storyboard__description  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__description {
        margin: 0;
        font-size: q(1.5);
        line-height: 1.45;
    }

    // -- storyboard__link  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__link {
        margin-top: q(1);
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: q(1);

        &:hover .ss-c-storyboard__link-arrow,
        &:focus .ss-c-storyboard__link-arrow {
            transform: translateX(q(3));
        }
    }

    // -- storyboard__link-arrow  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__link-arrow {
        display: inline-block;
        transition: transform 0.2s ease;
    }

    // -- storyboard__connector  (from site-scape_foundation/src/static/scss/components/_storyboard.scss) --
    .ss-c-storyboard__connector {
        display: flex;
        align-items: center;
        justify-content: center;
        color: currentColor;
        flex: 0 0 auto;
        align-self: center;
        margin-top: q(10);

        &--dotted_bar .ss-c-storyboard__bar {
            width: q(2);
            height: q(8);
            background-image: linear-gradient(currentColor 50%, transparent 50%);
            background-size: q(2) q(8);
        }
    }

    // -- table--full-width  (from site-scape_foundation/src/static/scss/components/_table.scss) --
    .ss-c-table--full-width {
        width: 100%;

        th {
            width: q(150);
            min-width: q(150);
            text-align: left;
            vertical-align: top;
            padding-right: q(16);
        }

        td {
            width: 100%;
        }

        // Lists inside tables should not have bullets
        ul, ol {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            margin: 0;
            padding: 0;
        }
    }

    // -- two-column-section  (from site-scape_foundation/src/static/scss/components/_two_column.scss) --
    .ss-c-two-column-section {
        padding: q(8) 0;
    }

    // -- two-column-grid  (from site-scape_foundation/src/static/scss/components/_two_column.scss) --
    .ss-c-two-column-grid {
        display: grid;
        gap: q(8);
        align-items: center;

        &.ss-c-layout--equal {
            grid-template-columns: 1fr 1fr;
        }

        &.ss-c-layout--left-wide {
            grid-template-columns: 3fr 2fr;
        }

        &.ss-c-layout--right-wide {
            grid-template-columns: 2fr 3fr;
        }

        @media (max-width: q(900)) {
            grid-template-columns: 1fr !important;
            gap: q(6);

            &.ss-c-reverse-mobile .ss-c-column--right {
                order: -1;
            }
        }

        .ss-c-column {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: q(3);
        }

        .ss-c-column-image {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                display: block;
                max-width: 100%;
                max-height: q(420);
                width: auto;
                height: auto;
                object-fit: contain;
            }
        }

        .ss-c-column-content {
            min-width: 0;
        }
    }

    // -- video-grid  (from site-scape_foundation/src/static/scss/components/_video_grid.scss) --
    .ss-c-video-grid {
        display: grid;
        gap: q(16);
        width: 100%;

        // Default: responsive grid
        grid-template-columns: repeat(auto-fit, minmax(min(100%, q(200)), 1fr));
    }

    // -- video-grid--portrait  (from site-scape_foundation/src/static/scss/components/_video_grid.scss) --
    .ss-c-video-grid--portrait {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: q(16);
        width: 100%;
    }

    // -- video-grid__item  (from site-scape_foundation/src/static/scss/components/_video_grid.scss) --
    .ss-c-video-grid__item {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: q(4);
        background: var(--background-secondary, #f8f8f8);
    }

    // -- video-grid__video  (from site-scape_foundation/src/static/scss/components/_video_grid.scss) --
    .ss-c-video-grid__video {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    // -- video-grid__label  (from site-scape_foundation/src/static/scss/components/_video_grid.scss) --
    .ss-c-video-grid__label {
        display: block;
        padding: q(12) q(16);
        font-family: var(--heading-ff);
        font-size: var(--step--1);
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 0.05em;
        background: var(--background-primary, #fff);
        border-top: q(1) solid var(--border-subtle, #e8e8e8);
    }

    // -- frame--center__area--center_center  (from site-scape_foundation/src/static/scss/layout/_grid.scss) --
    .ss-c-frame--center__area--center_center {
        padding-left: q(12) !important;
        padding-right: q(12) !important;
    }

    // -- grid__frame--6  (from site-scape_foundation/src/static/scss/layout/_grid.scss) --
    .ss-c-grid__frame--6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    // -- reset--sides  (from site-scape_foundation/src/static/scss/layout/_grid.scss) --
    .ss-c-reset--sides {
        .ss-c-grid__frame--6,
        .ss-c-grid__frame--1 {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    // -- download-section  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-download-section {
        margin-top: q(80);
        padding-top: q(40);

        h3 {
            font-family: var(--heading-ff);
            font-weight: 700;
            text-transform: uppercase;
            word-spacing: 100vw;
            margin-bottom: q(16);
        }

        &__intro {
            font-family: var(--heading-ff);
            font-style: italic;
            margin-bottom: q(40);
            max-width: 60ch;
        }
    }

    // -- download-grid  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-download-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, q(280)), 1fr));
        gap: q(32);
        margin-bottom: q(40);
    }

    // -- download-card  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-download-card {
        display: flex;
        gap: q(24);
        padding: q(24);
        background: var(--background-secondary, #f8f8f8);
        border: q(1) solid var(--border-subtle, #e8e8e8);
        border-radius: q(4);
        transition: border-color 0.2s ease;

        &:hover {
            border-color: var(--border-emphasis, #ccc);
        }

        &__icon {
            flex-shrink: 0;
            width: q(40);
            height: q(40);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted, #666);

            svg {
                width: q(32);
                height: q(32);
            }
        }

        &__content {
            flex: 1;
        }

        &__title {
            font-family: var(--heading-ff);
            font-size: var(--step--1);
            font-weight: 700;
            text-transform: uppercase;
            word-spacing: 100vw;
            margin: 0 0 q(8);
        }

        &__description {
            font-size: var(--step--2);
            color: var(--text-muted, #666);
            margin: 0 0 q(16);
            line-height: 1.4;
        }

        &__button {
            display: inline-flex;
            align-items: center;
            gap: q(8);
            font-size: var(--step--2);

            svg {
                width: q(14);
                height: q(14);
            }
        }
    }

    // -- citation-buttons  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-citation-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: q(8);
    }

    // -- citation-btn  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-citation-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: q(4) q(16);
        font-family: var(--body-ff);
        font-size: var(--step--2);
        font-weight: 500;
        text-decoration: none;
        background: var(--background-primary, #fff);
        border: q(1) solid var(--border-default, #ddd);
        border-radius: q(3);
        color: var(--text-primary);
        transition: all 0.15s ease;

        &:hover {
            background: var(--background-emphasis, #333);
            border-color: var(--background-emphasis, #333);
            color: var(--text-inverse, #fff);
        }
    }

    // -- citation-preview  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-citation-preview {
        background: var(--background-secondary, #f8f8f8);
        border: q(1) solid var(--border-subtle, #e8e8e8);
        border-radius: q(4);
        padding: q(24);

        &__title {
            font-family: var(--heading-ff);
            font-size: var(--step--1);
            font-weight: 700;
            text-transform: uppercase;
            margin: 0 0 q(16);
        }

        &__tabs {
            display: flex;
            gap: q(4);
            margin-bottom: q(16);
            border-bottom: q(1) solid var(--border-subtle, #e8e8e8);
            padding-bottom: q(8);
        }

        &__content {
            position: relative;
            display: flex;
            gap: q(16);
            align-items: flex-start;
        }
    }

    // -- citation-tab  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-citation-tab {
        padding: q(4) q(16);
        font-family: var(--body-ff);
        font-size: var(--step--2);
        font-weight: 500;
        background: transparent;
        border: none;
        border-bottom: q(2) solid transparent;
        color: var(--text-muted, #666);
        cursor: pointer;
        transition: all 0.15s ease;

        &:hover {
            color: var(--text-primary);
        }

        &.active {
            color: var(--text-primary);
            border-bottom-color: var(--accent-primary, #2d5a27);
        }
    }

    // -- citation-text  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-citation-text {
        flex: 1;
        font-family: var(--body-ff);
        font-size: var(--step--2);
        line-height: 1.5;
        word-break: break-word;
        white-space: pre-wrap;
        background: var(--background-primary, #fff);
        padding: q(16);
        border: q(1) solid var(--border-subtle, #e8e8e8);
        border-radius: q(3);
    }

    // -- citation-copy  (from site-scape_foundation/src/static/scss/sections/_download_section.scss) --
    .ss-c-citation-copy {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: q(32);
        height: q(32);
        padding: 0;
        background: var(--background-primary, #fff);
        border: q(1) solid var(--border-default, #ddd);
        border-radius: q(3);
        color: var(--text-muted, #666);
        cursor: pointer;
        transition: all 0.15s ease;

        &:hover {
            background: var(--background-emphasis, #333);
            border-color: var(--background-emphasis, #333);
            color: var(--text-inverse, #fff);
        }

        svg {
            width: q(14);
            height: q(14);
        }
    }

    // -- hero--ctas  (from site-scape_foundation/src/static/scss/sections/_home.scss) --
    .ss-c-hero--ctas {
        display: flex;
        flex-wrap: wrap;
        gap: q(16);
        justify-content: center;
        margin-top: q(32);

        .ss-c-button {
            min-width: q(192);
        }

        @media (max-width: q(600)) {
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            max-width: q(320);
            margin-left: auto;
            margin-right: auto;

            .ss-c-button {
                width: 100%;
            }
        }
    }

    // -- stats-strip  (from site-scape_foundation/src/static/scss/sections/_home.scss) --
    .ss-c-stats-strip {
        background: #000;
        color: #fff;
        padding: q(48) q(16);
        margin: 0;

        &__inner {
            max-width: q(1200);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: q(32);
            text-align: center;

            @media (max-width: q(700)) {
                grid-template-columns: repeat(2, 1fr);
                gap: q(40);
            }
        }

        &__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: q(8);
        }

        &__value {
            font-family: var(--heading-ff);
            font-size: clamp(q(40), 6vw, q(64));
            font-weight: 700;
            line-height: 1;
            color: #fff;
        }

        &__label {
            font-family: var(--body-ff);
            font-size: var(--step--1);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255, 255, 255, 0.7);
        }
    }

    // -- research-grid  (from site-scape_foundation/src/static/scss/sections/_home.scss) --
    .ss-c-research-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(240), 1fr));
        gap: q(24);
        margin: 0;

        &__item {
            display: flex;
            flex-direction: column;
            gap: q(12);
            padding: q(32) q(24);
            background: var(--background-secondary, #f8f8f8);
            border: q(1) solid var(--border-subtle, #e8e8e8);
            border-radius: q(4);
            text-decoration: none;
            color: inherit;
            transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;

            &:hover {
                transform: translateY(q(-2));
                border-color: #000;
                background: var(--background-primary, #fff);

                .ss-c-research-grid__cta {
                    transform: translateX(q(4));
                }
            }
        }

        &__icon {
            font-family: var(--heading-ff);
            font-size: q(40);
            line-height: 1;
            color: #000;
            margin-bottom: q(8);
        }

        &__title {
            font-family: var(--heading-ff);
            font-size: var(--step-1);
            font-weight: 700;
            text-transform: uppercase;
            word-spacing: 100vw;
            margin: 0;
            color: #000;
        }

        &__tagline {
            font-family: var(--heading-ff);
            font-style: italic;
            font-size: var(--step--1);
            color: var(--text-muted, #666);
            margin: 0;
            flex: 1;
        }

        &__cta {
            font-family: var(--body-ff);
            font-size: var(--step--1);
            font-weight: 500;
            margin-top: auto;
            transition: transform 0.2s ease;
            display: inline-block;
        }
    }

    // -- partners-band  (from site-scape_foundation/src/static/scss/sections/_home.scss) --
    .ss-c-partners-band {
        padding: q(48) q(24);
        text-align: center;

        &__title {
            font-family: var(--heading-ff);
            font-size: var(--step--1);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--text-muted, #666);
            margin: 0 0 q(32);
        }

        &__logos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: q(32) q(48);
            max-width: q(1200);
            margin: 0 auto;
        }

        &__logo {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: q(48);

            a {
                text-decoration: none;
                color: inherit;
                transition: opacity 0.15s ease;

                &:hover {
                    opacity: 0.6;
                }
            }
        }

        &__name {
            font-family: var(--heading-ff);
            font-size: var(--step--1);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-primary);
            white-space: nowrap;
        }

        &__cta {
            margin-top: q(32);
        }
    }

    // -- project-hero-cover  (from site-scape_foundation/src/static/scss/sections/_project_hero.scss) --
    .ss-c-project-hero-cover {
        position: relative;
        width: 100%;
        height: 60vh;
        min-height: q(400);
        max-height: q(700);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        &__image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        &__overlay {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: q(8);
            max-width: q(900);

            // Subtle text shadow for readability
            text-shadow: 0 q(2) q(20) rgba(0, 0, 0, 0.3);
        }

        &__title {
            font-family: Georgia, serif, Georgia, "Times New Roman", serif;
            font-size: clamp(q(40), 6vw, q(64));
            font-weight: 700;
            color: #fff;
            margin: 0 0 q(4);
            line-height: 1.2;
        }

        &__tagline {
            font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, -apple-system, sans-serif;
            font-size: clamp(q(16), 2vw, q(20));
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            font-weight: 400;
            max-width: q(700);
            margin-left: auto;
            margin-right: auto;
        }

        // Gradient overlay for text readability
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.2) 0%,
                rgba(0, 0, 0, 0.4) 50%,
                rgba(0, 0, 0, 0.3) 100%
            );
            z-index: 1;
        }
    }

    // -- ribbon__title__text  (from site-scape_foundation/src/static/scss/sections/_ribbon.scss) --
    .ss-c-ribbon__title__text {
        display: block !important;
        visibility: visible !important;
    }

    // -- ribbon__slot--horizontal_right  (from site-scape_foundation/src/static/scss/sections/_ribbon.scss) --
    .ss-c-ribbon__slot--horizontal_right {
        display: flex !important;
        visibility: visible !important;
        justify-content: flex-end !important;
        width: 100% !important;
        flex: 1 !important;
    }

    // -- ribbon__nav  (from site-scape_foundation/src/static/scss/sections/_ribbon.scss) --
    .ss-c-ribbon__nav {
        display: flex !important;
        visibility: visible !important;
        justify-content: flex-end !important;
        width: 100% !important;
        position: relative !important;
    }

    // -- ribbon__nav__list  (from site-scape_foundation/src/static/scss/sections/_ribbon.scss) --
    .ss-c-ribbon__nav__list {
        display: flex !important;
        visibility: visible !important;
        flex-wrap: wrap;
        justify-content: flex-end !important;
        gap: q(24) !important;
        list-style: none;
        margin: 0;
        padding: 0;
        position: static !important;
        top: auto !important;
        left: auto !important;
        z-index: auto !important;
    }

    // -- ribbon__nav__list__item  (from site-scape_foundation/src/static/scss/sections/_ribbon.scss) --
    .ss-c-ribbon__nav__list__item {
        display: flex !important;
        visibility: visible !important;
        position: static !important;
    }

    // -- ribbon__nav__list__item__text  (from site-scape_foundation/src/static/scss/sections/_ribbon.scss) --
    .ss-c-ribbon__nav__list__item__text {
        display: inline-block !important;
        visibility: visible !important;
    }

    // -- h1  (from site-scape_foundation/src/static/scss/theme/_typography.scss) --
    .ss-c-h1, .ss-c-h2, .ss-c-h3, .ss-c-h4, .ss-c-h5, .ss-c-h6 {
        font-family: Georgia, serif, Georgia, "Times New Roman", serif;
        font-weight: 700;
    }

    // -- heading--sans  (from site-scape_foundation/src/static/scss/theme/_typography.scss) --
    .ss-c-heading--sans {
        h1, h2, h3, h4, h5, h6,
        .ss-c-h1, .ss-c-h2, .ss-c-h3, .ss-c-h4, .ss-c-h5, .ss-c-h6,
        .ss-c-title,
        .ss-c-page-title,
        .ss-c-section-title,
        [class*="__title"],
        [class*="--title"] {
            font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
    }

    // -- accent  (from site-scape_foundation/src/static/scss/utilities/_color.scss) --
    .ss-c-accent {
        &--text {
            color: var(--color_accent_primary) !important;

            &::before {
                color: var(--color_accent_primary) !important;
            }
        }

        &--bg {
            background: var(--color_accent_primary) !important;
        }
    }

    // -- fill  (from site-scape_foundation/src/static/scss/utilities/_color.scss) --
    .ss-c-fill {
        &--text {
            color: var(--color_fill_primary) !important;
        }

        &--bg {
            background: var(--color_fill_primary) !important;
            background-color: var(--color_fill_primary) !important;
        }
    }

    // -- reset  (from site-scape_foundation/src/static/scss/utilities/_spacing.scss) --
    .ss-c-reset {
        padding: 0 !important;
        margin: 0 !important;

        &--top {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        &--bottom {
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        &--sides {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    // -- margin-top  (from site-scape_foundation/src/static/scss/utilities/_spacing.scss) --
    .ss-c-margin-top {
        &--sm {
            margin-top: q(16) !important;
        }

        &--md {
            margin-top: q(32) !important;
        }

        &--lg {
            margin-top: q(64) !important;
        }

        &--xl {
            margin-top: q(96) !important;
        }
    }

    // -- list_none  (from site-scape_foundation/src/static/scss/utilities/_spacing.scss) --
    .ss-c-list_none {
        padding: 0;
    }

    // -- text  (from site-scape_foundation/src/static/scss/utilities/_text.scss) --
    .ss-c-text {
        &--left {
            text-align: left;
        }

        &--right {
            text-align: right;
        }

        &--justify {
            text-align: justify;
        }

        &--center {
            text-align: center;
        }
    }

    // -- align--left  (from site-scape_foundation/src/static/scss/utilities/_text.scss) --
    .ss-c-align--left {
        align-items: left;
    }

    // -- frame_main  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-frame_main{
        position: relative;
        z-index: 1;
        pointer-events: none;
        grid-template-columns: 1fr 6fr 1fr;
        gap: q(16);
        padding:q(16);
        padding-top:0;
        padding-bottom:0;

        *{
            pointer-events: all;
        }


        .ss-c-frame_main__area--top{
            background-color: rgba(255,255,255,0.8);
            backdrop-filter: blur(q(64));
            grid-template-columns: 1fr 6fr 1fr;
            gap: q(16);
            grid-template-areas: "top_left top_center top_right";
        }


        .ss-c-frame_main__area--top_left,
        .ss-c-frame_main__area--top_center,
        .ss-c-frame_main__area--top_right{
            position: relative;
            border-bottom:q(1) solid black;
            height: calc(5 * q(16));
            padding-top:q(16);
        }

        .ss-c-frame_main__area--middle_center{
            border-left:none;
            border-right:none;
            display: block;
            overflow-y: scroll;
            scrollbar-width: none;
        }

        .ss-c-frame_main__area--bottom{
            background-color: rgba(255,255,255,0.8);
            backdrop-filter: blur(q(64));
            grid-template-columns: 1fr 6fr 1fr;
            gap: q(16);
            grid-template-areas: "bottom_left bottom_center bottom_right";
        }

        .ss-c-frame_main__area--bottom_left,
        .ss-c-frame_main__area--bottom_center,
        .ss-c-frame_main__area--bottom_right{
            position: relative;
            border-top:q(1) solid #000;
            height: calc(4 * q(16));

        }
    }

    // -- frame_underlay  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-frame_underlay{
        display: grid;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: all;
        padding:q(16);
        padding-top:0;
        padding-bottom: 0;
        grid-template-areas:"middle_left middle_center middle_right";
        grid-template-columns: 1fr 6fr 1fr;
        gap: q(16);
        margin: 0;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
        border: 0;

        .ss-c-frame_main__area--middle_center{
            grid-area: middle_center;
            overflow-y: scroll;
            scrollbar-width: none;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;

            .ss-c-works{
                margin-top:calc(6 * q(16));
                margin-bottom:calc(6 * q(16));

                .ss-c-work-item{
                    display: flex;
                    flex-direction: column;
                    width:33.33%;
                    margin:0 auto;
                    margin-bottom: q(16);
                    scroll-margin-top:calc(6 * q(16));
                }
            }
        }
    }

    // -- map  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-map{
        height: 100%;
        position: relative;
        .ss-c-mapboxgl-popup{
            display: none;
        }
        .ss-c-mapboxgl-canvas-container{
            position: absolute;
        }
    }

    // -- folio  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-folio{
        // font-size: q(16);
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap:q(16);
        padding-top:q(16);
        padding-bottom: q(16);
        border-bottom:none;
    }

    // -- metadata  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-metadata {
        align-self: flex-end;
        font-size: q(10);
        line-height: 120%;

        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: q(4);
        row-gap: q(2);

        .ss-c-meta-item{
            display: contents
        }

        .ss-c-meta-label {
            white-space: nowrap;
        }

        .ss-c-meta-value {
            overflow-wrap: break-word;
        }

    }

    // -- metadata--company  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-metadata--company {
        font-size: inherit;
        line-height: inherit;
        row-gap: q(4);
    }

    // -- contact_info  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-contact_info{
        font-size: q(10);
        margin-top:q(16);

        table{
            table-layout: auto;
            line-height: 120%;
        }
        tr td:first-child{
            padding-right: q(2);
        }
    }

    // -- fit_text  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-fit_text {
        margin-top: auto;
        line-height: 120%;
        font-variation-settings: "wght" 900;
        font-size: clamp(q(16), min(12vw, 18vh), q(165));
    }

    // -- spread  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-spread{
        overflow:hidden;
        scrollbar-width: none;
        display: grid;
        margin-bottom: calc(4 * q(16));
        margin-top:0;
        scroll-margin-top:calc(6 * q(16));
        scroll-snap-align: start;
        height: calc(100vh - 11 * q(16));
        width: 100%;
        gap:q(16);

        &:first-of-type{
            margin-top: q(128);
        }
        &:last-child{
            margin-bottom:calc(6 * q(16));
        }

        &.ss-c-single {
            grid-template-columns: 1fr;
        }

        &.ss-c-split {
            grid-template-columns: 1fr 1fr;
        }

        &.ss-c-major {
            grid-template-columns: 2fr 1fr;
        }

        .ss-c-text{
            padding-right:q(16);
            margin-top: auto;
            max-height: 100%;
            overflow-y: auto;
            scrollbar-width: none;
        }
    }

    // -- careers-section__header  (from site-scape_agency/src/static/scss/_theme_modes.scss) --
    .ss-c-careers-section__header {
        border-color: var(--border);
    }

    // -- stories-grid__item  (from site-scape_agency/src/static/scss/_theme_modes.scss) --
    .ss-c-stories-grid__item {
        border-color: var(--border-soft);
    }

    // -- connect-lines  (from site-scape_agency/src/static/scss/_theme_modes.scss) --
    .ss-c-connect-lines li {
        border-color: var(--border-dashed);
    }

    // -- studio-locations__card  (from site-scape_agency/src/static/scss/_theme_modes.scss) --
    .ss-c-studio-locations__card {
        background: var(--surface);
    }

    // -- careers-roles__row--open  (from site-scape_agency/src/static/scss/_theme_modes.scss) --
    .ss-c-careers-roles__row--open {
        background: linear-gradient(to right, var(--surface), transparent 60%);
    }

    // -- careers-roles__tag--open  (from site-scape_agency/src/static/scss/_theme_modes.scss) --
    .ss-c-careers-roles__tag--open {
        background: var(--invert-bg);
        color: var(--invert-fg);
    }

    // -- theme-toggle  (from site-scape_agency/src/static/scss/_theme_modes.scss) --
    .ss-c-theme-toggle {
        appearance: none;
        background: transparent;
        border: q(1) solid var(--border);
        color: var(--fg);
        font: inherit;
        font-size: q(11.52);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        padding: q(4.8) q(8.8);
        margin-inline-start: q(9.6);
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease;

        &:hover {
            background: var(--fg);
            color: var(--bg);
        }

        .ss-c-theme-toggle__icon-light { display: none; }
        .ss-c-theme-toggle__icon-dark  { display: inline; }
    }

    // -- story__card  (from site-scape_agency/src/static/scss/app/_figure.scss) --
    .ss-c-story__card {
        // [parity] (stripped @include)
        img {
        // [parity] (stripped @include)
        }

        figcaption {
        // [parity] (stripped @include)
            grid-column: 3 / 7;
            background-color: var(--color_line_primary);
            opacity: 1;
            padding: q(8) !important;
            position: absolute;
            bottom: q(20);

            * {
                color: var(--color_fill_primary);
                margin: 0;
            }
        }
    }

    // -- magazine  (from site-scape_agency/src/static/scss/app/_magazine.scss) --
    .ss-c-magazine {
        margin-bottom: q(60);

        &.ss-c-full {
            height: calc(100vh - q(44));
            // height: max(calc(100vh - 44px), fit-content);
            // min-height: calc(100vh - 44px);
            // height: auto;
        }
        &.ss-c-half {
            height: calc(50vh - q(44));
            // height: max(calc(50vh - 44px), fit-content);
            // min-height: calc(50vh - 44px);
            // height: auto;
        }
        @media screen and (max-height: q(750)) {
            &.ss-c-full {
                min-height: calc(100vh - #{q(44)});
                height: auto;
            }
            &.ss-c-half {
                min-height: calc(50vh - #{q(44)});
                height: auto;
            }
        }
        &.ss-c-no_margin {
            margin-left: q(-20);
            margin-right: q(-20);

            &--left {
                margin-left: q(-20);
            }

            &--right {
                margin-right: q(-20);
            }
        }

        figure {
            width: 100%;
            height: 100%;
            img {
                object-fit: cover;
                height: 100%;
            }
        }
    }

    // -- works-nav  (from site-scape_agency/src/static/scss/app/_metadata.scss) --
    .ss-c-works-nav {
        display: flex;
        flex-direction: column;
        gap: q(8);
    }

    // -- work-nav-item  (from site-scape_agency/src/static/scss/app/_metadata.scss) --
    .ss-c-work-nav-item {
        padding: q(4) 0;
        font-size: q(14);
        color: inherit;
        text-decoration: none;
        opacity: 0.5;
        transition: opacity 0.3s ease;

        &:hover {
            opacity: 0.8;
        }

        &.is-active {
            opacity: 1;
            font-weight: 600;
        }
    }

    // -- frame_main__area--bottom  (from site-scape_agency/src/static/scss/app/_ribbon.scss) --
    .ss-c-frame_main__area--bottom {
        pointer-events: none;
        transition: display 0.3s ease;
        will-change: display;
    }

    // -- trademark  (from site-scape_agency/src/static/scss/app/_trademark.scss) --
    .ss-c-trademark {
        display: inline-block;
        margin-left: 0.15em;
        font-size: 0.55em;
        line-height: 1;
        vertical-align: super;
        font-weight: inherit;
        opacity: 0.7;
        letter-spacing: 0;
    }

    // -- connect-meta  (from site-scape_agency/src/static/scss/sections/_connect.scss) --
    .ss-c-connect-meta {
        &__note { margin-block-start: q(16); font-size: q(12.48); opacity: 0.65; line-height: 1.5; }
    }

    // -- connect-page  (from site-scape_agency/src/static/scss/sections/_connect.scss) --
    .ss-c-connect-page {
        display: flex; flex-direction: column; gap: q(48);
    }

    // -- connect-hero  (from site-scape_agency/src/static/scss/sections/_connect.scss) --
    .ss-c-connect-hero {
        display: flex; flex-direction: column; gap: q(12);
        padding-block-end: q(32);
        border-bottom: q(1) solid rgba(0,0,0,0.08);

        &__kicker { font-size: q(11.52); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; margin: 0; }
        &__title {
            font-size: clamp(q(28.8), 4.4vw, q(48));
            line-height: 1.05; margin: 0; font-weight: 500;
            max-width: 22ch;
        }
        &__lead { font-size: q(16.8); opacity: 0.85; margin: 0; max-width: 60ch; line-height: 1.55; }
        &__cta { display: flex; flex-wrap: wrap; gap: q(9.6); margin-top: q(9.6); }
    }

    // -- connect-board  (from site-scape_agency/src/static/scss/sections/_connect.scss) --
    .ss-c-connect-board {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(280), 1fr));
        gap: q(24);
    }

    // -- connect-card  (from site-scape_agency/src/static/scss/sections/_connect.scss) --
    .ss-c-connect-card {
        border: q(1) solid rgba(0,0,0,0.12);
        padding: q(24);
        display: flex; flex-direction: column; gap: q(14.4);
        background: rgba(255,255,255,0.4);

        &__heading {
            font-size: q(12.48); text-transform: uppercase; letter-spacing: 0.14em;
            margin: 0 0 q(6.4) 0; font-weight: 500; opacity: 0.85;
        }
        &__address { font-style: normal; line-height: 1.6; font-size: q(15.2); }
        &__list { display: flex; flex-direction: column; gap: q(6.4); margin: 0; padding: 0; }
        &__row {
            display: grid; grid-template-columns: q(144) 1fr; gap: q(9.6);
            font-size: q(13.6);
            dt { opacity: 0.6; }
            dd { margin: 0; }
        }

        &--studio { grid-column: span 1; @media (min-width: q(760)) { grid-column: span 2; } }
    }

    // -- connect-social  (from site-scape_agency/src/static/scss/sections/_connect.scss) --
    .ss-c-connect-social {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: q(8);
        li a {
            display: flex; flex-direction: column; padding: q(8) q(9.6);
            text-decoration: none; border: q(1) solid rgba(0,0,0,0.08);
            transition: border-color 0.2s ease;
            span { font-size: q(11.2); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; }
            em { font-style: normal; font-size: q(14.4); }
            &:hover { border-color: currentColor; }
        }
    }

    // -- connect-foot  (from site-scape_agency/src/static/scss/sections/_connect.scss) --
    .ss-c-connect-foot {
        margin-block-start: q(16); padding-block-start: q(24);
        border-top: q(1) solid rgba(0,0,0,0.08);
        &__terms { font-size: q(12.8); opacity: 0.7; margin: 0; }
    }

    // -- exhibitions-meta  (from site-scape_agency/src/static/scss/sections/_exhibitions.scss) --
    .ss-c-exhibitions-meta {
        &__note { margin-block-start: q(16); font-size: q(12.48); opacity: 0.65; line-height: 1.4; }
    }

    // -- exhibitions-page  (from site-scape_agency/src/static/scss/sections/_exhibitions.scss) --
    .ss-c-exhibitions-page {
        display: flex;
        flex-direction: column;
        gap: q(64);
    }

    // -- exhibitions-hero  (from site-scape_agency/src/static/scss/sections/_exhibitions.scss) --
    .ss-c-exhibitions-hero {
        &__link { display: block; text-decoration: none; }
        &__media {
            margin: 0 0 q(16) 0;
            img { width: 100%; height: auto; aspect-ratio: 21 / 10; object-fit: cover; }
        }
        &__caption { display: flex; flex-direction: column; gap: q(6.4); }
        &__kicker {
            font-size: q(11.2); text-transform: uppercase; letter-spacing: 0.14em;
            margin: 0; opacity: 0.7;
        }
        &__title {
            font-size: clamp(q(25.6), 3.6vw, q(41.6));
            line-height: 1.05; margin: 0; font-weight: 500;
        }
        &__meta { font-size: q(13.6); opacity: 0.7; margin: 0; }
    }

    // -- exhibitions-group  (from site-scape_agency/src/static/scss/sections/_exhibitions.scss) --
    .ss-c-exhibitions-group {
        &__header {
            display: flex; justify-content: space-between; align-items: baseline;
            margin-block-end: q(16); padding-block-end: q(8);
            border-bottom: q(1) solid currentColor;
        }
        &__heading {
            font-size: q(12.48); text-transform: uppercase; letter-spacing: 0.14em;
            margin: 0; font-weight: 500;
        }
        &__count { font-size: q(12.48); opacity: 0.5; }
    }

    // -- exhibitions-schedule  (from site-scape_agency/src/static/scss/sections/_exhibitions.scss) --
    .ss-c-exhibitions-schedule {
        display: flex; flex-direction: column; gap: 0;

        &__row { border-bottom: q(1) solid rgba(0,0,0,0.08); }
        &__link {
            display: grid;
            grid-template-columns: q(80) 1fr;
            gap: q(20);
            padding-block: q(20);
            text-decoration: none;
            transition: opacity 0.2s ease;
            align-items: start;

            @media (min-width: q(880)) {
                grid-template-columns: q(80) 1fr q(220);
            }

            &:hover { opacity: 0.6; }
        }

        &__date {
            time {
                display: flex; flex-direction: column; align-items: flex-start;
                line-height: 1; gap: q(2.4);
                .ss-c-day { font-size: q(25.6); font-weight: 500; }
                .ss-c-month { font-size: q(12); text-transform: uppercase; letter-spacing: 0.1em; }
                .ss-c-year { font-size: q(11.2); opacity: 0.55; }
            }
        }
        &__date-tba { font-size: q(12.48); opacity: 0.55; text-transform: uppercase; letter-spacing: 0.1em; }

        &__body {
            display: flex; flex-direction: column; gap: q(4.8);
        }
        &__title { font-size: q(17.6); margin: 0; font-weight: 500; }
        &__meta { font-size: q(12.48); opacity: 0.65; margin: 0; }
        &__lead { font-size: q(14.08); opacity: 0.85; margin: q(4) 0 0 0; line-height: 1.5; }

        &__media {
            display: none;
            @media (min-width: q(880)) { display: block; }
            img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
        }
    }

    // -- exhibitions-empty  (from site-scape_agency/src/static/scss/sections/_exhibitions.scss) --
    .ss-c-exhibitions-empty { padding-block: q(64); text-align: center; opacity: 0.7; }

    // -- exhibition  (from site-scape_agency/src/static/scss/sections/_exhibitions.scss) --
    .ss-c-exhibition {
        display: flex; flex-direction: column; gap: q(40);

        &__hero {
            margin: 0 0 q(24) 0;
            img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
        }
        &__title-block { display: flex; flex-direction: column; gap: q(8); }
        &__kicker { font-size: q(11.52); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.65; margin: 0; }
        &__title { font-size: clamp(q(28.8), 4vw, q(44.8)); line-height: 1.05; margin: 0; font-weight: 500; }
        &__dateline { font-size: q(15.2); opacity: 0.75; margin: 0; line-height: 1.5; }
        &__lead { font-size: q(17.6); line-height: 1.55; opacity: 0.9; max-width: 50ch; }
    }

    // -- exhibition-meta  (from site-scape_agency/src/static/scss/sections/_exhibitions.scss) --
    .ss-c-exhibition-meta {
        &__back { margin-block-start: q(16); font-size: q(12.8); }
        &__back a { text-decoration: none; opacity: 0.7; &:hover { opacity: 1; } }
    }

    // -- img-reveal  (from site-scape_agency/src/static/scss/sections/_image_reveal.scss) --
    .ss-c-img-reveal {
        @media (prefers-reduced-motion: reduce) {
            opacity: 1 !important;
            transform: none !important;
        }

        opacity: 0;
        transform: translateY(q(16)) scale(1.02);
        will-change: transform, opacity;

        transition:
            opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);

        &.is-revealed {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    // -- work-body  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-work-body {
        display: flex;
        flex-direction: column;
        gap: q(56);
        padding-block: q(16) q(64);
        max-width: 100%;
    }

    // -- lb  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb {
        margin: 0;

        figure { margin: 0; }
        img { display: block; max-width: 100%; height: auto; }

        &__caption,
        figcaption {
            margin-top: q(8);
            font-size: q(12);
            opacity: 0.65;
            line-height: 1.4;
        }

        &__title {
            margin: 0 0 q(8);
            font-weight: 400;
            line-height: 1.1;
        }

        &__eyebrow {
            margin: 0 0 q(8);
            font-size: q(11.2);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.65;
        }

        &__lead { font-size: q(16.8); line-height: 1.5; max-width: 60ch; }
        &__prose { line-height: 1.55; max-width: 60ch; }
        &__prose h3 { margin: q(20) 0 q(8); font-weight: 500; }
        &__prose p { margin: 0 0 q(12); }
        &__prose ul, &__prose ol { padding-inline-start: q(20); }
    }

    // -- lb--cover-hero  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--cover-hero {
        position: relative;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        color: #fff;

        .ss-c-lb__bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .ss-c-lb__overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            padding: clamp(q(16), 4vw, q(48));
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 40%,
                rgba(0, 0, 0, 0.55) 100%
            );
        }

        .ss-c-lb__title { font-size: clamp(q(32), 6vw, q(80)); }
        .ss-c-lb__subtitle { font-size: clamp(q(16), 1.6vw, q(22.4)); max-width: 40ch; }

        &.ss-c-lb--align-bl .ss-c-lb__overlay { justify-content: flex-end; align-items: flex-start; }
        &.ss-c-lb--align-br .ss-c-lb__overlay { justify-content: flex-end; align-items: flex-end; text-align: right; }
        &.ss-c-lb--align-tl .ss-c-lb__overlay { justify-content: flex-start; align-items: flex-start; }
        &.ss-c-lb--align-tr .ss-c-lb__overlay { justify-content: flex-start; align-items: flex-end; text-align: right; }
        &.ss-c-lb--align-c  .ss-c-lb__overlay { justify-content: center;     align-items: center;    text-align: center; }
    }

    // -- lb--full-bleed  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--full-bleed img { width: 100%; height: auto; }

    // -- lb--two-up  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--two-up .ss-c-lb__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: q(16);
    }

    // -- lb--two-up-asym  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--two-up-asym .ss-c-lb__grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: q(16);
        align-items: start;
    }

    // -- lb--three-up  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--three-up .ss-c-lb__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: q(16);
    }

    // -- lb--four-up  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--four-up .ss-c-lb__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: q(16);
    }

    // -- lb--contact-sheet  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--contact-sheet .ss-c-lb__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(140), 1fr));
        gap: q(8);

        figure { aspect-ratio: 1/1; overflow: hidden; }
        img { width: 100%; height: 100%; object-fit: cover; }
    }

    // -- lb--pull-quote  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--pull-quote {
        blockquote {
            margin: 0 auto;
            max-width: 60ch;
            text-align: center;
        }

        .ss-c-lb__quote {
            font-size: clamp(q(22.4), 2.5vw, q(36));
            font-style: italic;
            line-height: 1.3;
            margin: 0 0 q(16);
        }

        .ss-c-lb__cite {
            font-size: q(13.6);
            opacity: 0.7;
            display: flex;
            flex-direction: column;
            gap: q(1.6);
        }
    }

    // -- lb--text-column  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--text-column .ss-c-lb__prose { margin-inline: auto; }

    // -- lb--two-col-text  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--two-col-text .ss-c-lb__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: q(32);
    }

    // -- lb--caption  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--caption p {
        max-width: 60ch;
        margin: 0 auto;
        text-align: center;
        font-size: q(13.6);
        opacity: 0.75;
    }

    // -- lb--section-title  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--section-title {
        text-align: center;
        padding-block: q(16);

        .ss-c-lb__title { font-size: clamp(q(32), 5vw, q(64)); }
        .ss-c-lb__lead  { margin: q(8) auto 0; }
    }

    // -- lb--numbered-list  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--numbered-list .ss-c-lb__list {
        list-style: none;
        counter-reset: lb-num;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: q(16);

        li {
            counter-increment: lb-num;
            display: grid;
            grid-template-columns: q(48) 1fr;
            gap: q(16);

            &::before {
                content: counter(lb-num, decimal-leading-zero);
                font-variant-numeric: tabular-nums;
                opacity: 0.4;
                font-size: q(13.6);
            }
        }

        .ss-c-lb__list-title { display: block; font-weight: 500; }
        .ss-c-lb__list-text  { display: block; opacity: 0.75; }
    }

    // -- lb--definition-list  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--definition-list .ss-c-lb__dl {
        margin: 0;

        .ss-c-lb__dl-row {
            display: grid;
            grid-template-columns: q(192) 1fr;
            gap: q(16);
            padding: q(8) 0;
            border-block-end: q(1) solid rgba(0, 0, 0, 0.08);
        }

        dt { font-weight: 500; }
        dd { margin: 0; opacity: 0.85; }
    }

    // -- lb--img-caption  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--img-caption .ss-c-lb__grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: q(32);
        align-items: start;
    }

    // -- lb--specs-table  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--specs-table .ss-c-lb__table {
        width: 100%;
        border-collapse: collapse;

        th, td {
            padding: q(8) q(11.2);
            text-align: left;
            border-block-end: q(1) solid rgba(0, 0, 0, 0.08);
            font-weight: 400;
            vertical-align: top;
        }

        th { width: q(192); opacity: 0.65; font-size: q(12.8); text-transform: uppercase; letter-spacing: 0.05em; }
    }

    // -- lb--video-embed  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--video-embed .ss-c-lb__embed {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;

        iframe { width: 100% !important; height: 100% !important; border: 0; }
    }

    // -- lb--video-file  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--video-file video {
        width: 100%;
        height: auto;
        background: #000;
        display: block;
    }

    // -- lb--diptych-portrait  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--diptych-portrait .ss-c-lb__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: q(16);

        figure { aspect-ratio: 3/4; overflow: hidden; }
        img { width: 100%; height: 100%; object-fit: cover; }
    }

    // -- lb--panorama  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--panorama img { width: 100%; height: auto; }

    // -- lb--spacer  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--spacer {
        &.ss-c-lb--size-xs { height: q(8); }
        &.ss-c-lb--size-s  { height: q(16);   }
        &.ss-c-lb--size-m  { height: q(32);   }
        &.ss-c-lb--size-l  { height: q(64);   }
        &.ss-c-lb--size-xl { height: q(96);   }
    }

    // -- lb--divider  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--divider {
        text-align: center;

        .ss-c-lb__divider-label {
            display: inline-block;
            padding: 0 q(9.6);
            font-size: q(11.2);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.6;
            background: var(--color-background, #fff);
            position: relative;
            top: q(9.6);
        }

        hr {
            border: 0;
            border-block-start: q(1) solid currentColor;
            opacity: 0.2;
            margin: 0;
        }
    }

    // -- lb--callout  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--callout {
        padding: q(20) q(24);
        border: q(1) solid currentColor;
        max-width: 60ch;
        margin-inline: auto;

        &.ss-c-lb--tone-info { border-color: #5b8def; }
        &.ss-c-lb--tone-warn { border-color: #c0a040; }

        .ss-c-lb__title { font-size: q(16); font-weight: 500; }
    }

    // -- lb--gallery  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-lb--gallery {
        --lb-cols: 3;

        .ss-c-lb__grid {
            display: grid;
            grid-template-columns: repeat(var(--lb-cols), 1fr);
            gap: q(16);
        }

        figcaption {
            font-size: q(11.2);
            opacity: 0.6;
            margin-top: q(4.8);
        }
    }

    // -- work-details  (from site-scape_agency/src/static/scss/sections/_layout_blocks.scss) --
    .ss-c-work-details {
        margin-top: q(96);
        padding-top: q(32);
        border-top: q(1) solid currentColor;
        max-width: 100%;

        &__heading {
            margin: 0 0 q(40);
            font-size: q(16);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        &__list {
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        &__row {
            display: grid;
            grid-template-columns: 1fr;
            gap: q(4);
            padding: q(20) 0;
            border-bottom: q(1) solid rgba(0, 0, 0, 0.12);

            &:last-child { border-bottom: 0; }
        }

        &__label {
            margin: 0;
            font-size: q(15.2);
            font-weight: 400;
            opacity: 0.6;
        }

        &__value {
            margin: 0;
            font-size: q(20);
            line-height: 1.35;
            font-weight: 400;
        }
    }

    // -- services-meta  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-meta { &__lead, &__cta { margin-block: q(9.6); } &__cta { margin-block-start: q(16); } }

    // -- services-page  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-page { display: flex; flex-direction: column; gap: q(56); }

    // -- services-hero  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-hero {
        // [parity] (stripped @extend)
        &__kicker { font-size: q(11.52); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; margin: 0; }
        &__title  { font-size: clamp(q(27.2), 4vw, q(41.6)); line-height: 1.1; margin: 0; font-weight: 500; max-width: 24ch; }
        &__lead   { font-size: q(16.8); opacity: 0.85; margin: 0; max-width: 60ch; line-height: 1.55; }
    }

    // -- services-section  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-section {
        display: flex; flex-direction: column; gap: q(16);

        &__header { /* [parity] (stripped @extend) */ }
        &__index  { font-size: q(12.48); opacity: 0.5; font-variant-numeric: tabular-nums; }
        &__heading { /* [parity] (stripped @extend) */ }
        &__lead { font-size: q(15.2); opacity: 0.85; max-width: 65ch; line-height: 1.55; margin: 0; }

        &--cta { padding-block: q(16); }
    }

    // -- services-engagements  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-engagements {
        display: flex; flex-direction: column; gap: 0;
        margin: 0;
        &__row {
            display: grid;
            grid-template-columns: q(192) 1fr;
            gap: q(24);
            padding-block: q(14.4);
            border-bottom: q(1) solid rgba(0,0,0,0.08);
            font-size: q(14.72); line-height: 1.5;
            dt { font-weight: 500; }
            dd { margin: 0; opacity: 0.85; }
        }
    }

    // -- services-process  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-process {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(200), 1fr));
        gap: q(20); margin: 0; padding: 0;

        &__step { display: flex; flex-direction: column; gap: q(6.4); padding: q(16); border: q(1) solid rgba(0,0,0,0.08); }
        &__num  { font-size: q(11.52); opacity: 0.55; letter-spacing: 0.12em; }
        &__title { font-size: q(15.2); margin: 0; font-weight: 500; }
        p { font-size: q(13.6); line-height: 1.5; opacity: 0.85; margin: 0; }
    }

    // -- services-clients  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-clients {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(160), 1fr));
        gap: q(8) q(20);
        margin: 0; padding: 0;
        li { font-size: q(13.6); padding-block: q(6.4); border-bottom: q(1) solid rgba(0,0,0,0.06); }
    }

    // -- services-cta  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-cta { display: flex; flex-wrap: wrap; gap: q(9.6); }

    // -- services-toc  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-services-toc ul, .ss-c-careers-toc ul, .ss-c-stories-toc ul {
        display: flex; flex-direction: column; gap: q(6.4);
        a { /* [parity] (stripped @extend) */ font-size: q(13.6); }
    }

    // -- careers-meta  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-careers-meta { &__note { /* [parity] (stripped @extend) */ } }

    // -- careers-page  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-careers-page { display: flex; flex-direction: column; gap: q(56); }

    // -- careers-hero  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-careers-hero {
        // [parity] (stripped @extend)
        &__kicker { font-size: q(11.52); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; margin: 0; }
        &__title  { font-size: clamp(q(27.2), 4vw, q(41.6)); line-height: 1.1; margin: 0; font-weight: 500; max-width: 24ch; }
        &__lead   { font-size: q(16.8); opacity: 0.85; margin: 0; max-width: 60ch; line-height: 1.55; }
    }

    // -- careers-section  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-careers-section {
        display: flex; flex-direction: column; gap: q(16);

        &__header {
        // [parity] (stripped @extend)
            justify-content: space-between;
        }
        &__heading { /* [parity] (stripped @extend) */ }
        &__count   { font-size: q(12.48); opacity: 0.5; font-variant-numeric: tabular-nums; }
        &__cta     { display: flex; flex-wrap: wrap; gap: q(9.6); margin-top: q(8); }
    }

    // -- careers-roles  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-careers-roles {
        display: flex; flex-direction: column; gap: 0;

        &__row {
            display: grid;
            grid-template-columns: 1fr;
            gap: q(6.4);
            padding-block: q(17.6);
            border-bottom: q(1) solid rgba(0,0,0,0.08);

            @media (min-width: q(760)) {
                grid-template-columns: 1.3fr 1.4fr auto;
                align-items: center; gap: q(16);
            }

            &--open { background: linear-gradient(to right, rgba(0,0,0,0.03), transparent 60%); }
        }

        &__title-wrap { display: flex; align-items: center; gap: q(9.6); }
        &__title { font-size: q(16.8); margin: 0; font-weight: 500; }
        &__tag {
            font-size: q(10.4); text-transform: uppercase; letter-spacing: 0.12em;
            padding: q(2.4) q(8); border: q(1) solid currentColor; opacity: 0.55;
            &--open { opacity: 1; background: currentColor; color: #fff; }
        }
        &__meta {
            margin: 0; font-size: q(13.12); opacity: 0.75;
            display: flex; flex-wrap: wrap; gap: q(6.4) q(16);
        }
        &__cta {
            font-size: q(13.6); text-decoration: none;
            align-self: start;
            @media (min-width: q(760)) { justify-self: end; }
        }

        &__future {
            margin-top: q(24);
            > summary {
                cursor: pointer;
                font-size: q(12.48); text-transform: uppercase; letter-spacing: 0.12em;
                opacity: 0.7; padding-block: q(8);
            }
        }
    }

    // -- careers-pillars  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-careers-pillars {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(220), 1fr));
        gap: q(24); margin: 0; padding: 0;

        &__item { display: flex; flex-direction: column; gap: q(6.4); padding-block-start: q(8); border-top: q(1) solid rgba(0,0,0,0.15); }
        &__num  { font-size: q(11.2); opacity: 0.5; letter-spacing: 0.14em; }
        &__title { font-size: q(16); margin: 0; font-weight: 500; }
        p { font-size: q(14.08); line-height: 1.5; opacity: 0.85; margin: 0; }
    }

    // -- careers-steps  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-careers-steps {
        display: flex; flex-direction: column; gap: 0;
        li {
            display: grid; grid-template-columns: q(48) 1fr;
            padding-block: q(16);
            border-bottom: q(1) solid rgba(0,0,0,0.08);
            align-items: start; gap: q(8);
            > span { font-size: q(13.6); opacity: 0.55; font-variant-numeric: tabular-nums; }
            h3 { font-size: q(16); margin: 0 0 q(3.2) 0; font-weight: 500; }
            p  { font-size: q(14.08); line-height: 1.5; opacity: 0.85; margin: 0; }
        }
    }

    // -- stories-meta  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-stories-meta { &__lead, &__note { /* [parity] (stripped @extend) */ margin-block-end: q(9.6); } }

    // -- stories-page  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-stories-page { display: flex; flex-direction: column; gap: q(56); }

    // -- stories-hero  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-stories-hero {
        &__link { display: block; text-decoration: none; }
        &__media { margin: 0 0 q(16) 0; img { width: 100%; height: auto; aspect-ratio: 21/10; object-fit: cover; } }
        &__caption { display: flex; flex-direction: column; gap: q(6.4); }
        &__kicker { font-size: q(11.2); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; margin: 0; }
        &__title  { font-size: clamp(q(25.6), 3.6vw, q(41.6)); line-height: 1.05; margin: 0; font-weight: 500; max-width: 24ch; }
        &__lead   { font-size: q(16); opacity: 0.85; margin: 0; max-width: 56ch; line-height: 1.55; }
        &__cta    { font-size: q(12.48); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.85; margin-top: q(6.4); }
    }

    // -- stories-year  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-stories-year {
        &__header { /* [parity] (stripped @extend) */ justify-content: space-between; }
        &__heading { font-size: q(16); margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
        &__count { font-size: q(12.48); opacity: 0.5; }
    }

    // -- stories-grid  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-stories-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(260), 1fr));
        gap: q(28) q(24);
        margin: 0; padding: 0;

        &__link { display: flex; flex-direction: column; gap: q(8); text-decoration: none; transition: opacity 0.2s ease; &:hover { opacity: 0.65; } }
        &__media { margin: 0; img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; } }
        &__body { display: flex; flex-direction: column; gap: q(4.8); }
        &__kicker { display: flex; align-items: center; gap: q(8); margin: 0; font-size: q(11.52); opacity: 0.7; }
        &__kind {
            text-transform: uppercase; letter-spacing: 0.1em;
            border: q(1) solid currentColor; padding: q(1.6) q(6.4);
            font-size: q(10.4);
        }
        &__title { font-size: q(16); margin: 0; font-weight: 500; line-height: 1.25; }
        &__lead  { font-size: q(13.6); opacity: 0.85; margin: 0; line-height: 1.5; }
    }

    // -- stories-empty  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-stories-empty { padding-block: q(64); text-align: center; opacity: 0.7; }

    // -- studio-meta  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-meta { &__cta { margin-block-start: q(16); } }

    // -- studio-toc  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-toc ul {
        display: flex; flex-direction: column; gap: q(6.4);
        a { /* [parity] (stripped @extend) */ font-size: q(13.6); }
    }

    // -- studio-page  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-page { display: flex; flex-direction: column; gap: q(64); }

    // -- studio-section  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-section {
        display: flex; flex-direction: column; gap: q(16);

        &__header { /* [parity] (stripped @extend) */ }
        &__index  { font-size: q(12.48); opacity: 0.5; font-variant-numeric: tabular-nums; }
        &__heading { /* [parity] (stripped @extend) */ }
        &__lead { font-size: q(15.2); opacity: 0.85; max-width: 65ch; line-height: 1.55; margin: 0; }
        &__cta { display: flex; flex-wrap: wrap; gap: q(9.6); margin-top: q(6.4); }
    }

    // -- studio-manifesto  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-manifesto {
        padding-block-end: q(32);
        border-bottom: q(1) solid rgba(0,0,0,0.08);

        &__kicker { font-size: q(11.52); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; margin: 0; }
        &__title  { font-size: clamp(q(27.2), 4.4vw, q(44.8)); line-height: 1.05; margin: 0; font-weight: 500; max-width: 22ch; }
        &__body {
            display: grid;
            grid-template-columns: 1fr;
            gap: q(16);
            font-size: q(16); line-height: 1.6;
            max-width: 65ch;
            @media (min-width: q(880)) { grid-template-columns: 1fr 1fr; gap: q(20) q(32); }
            p { margin: 0; opacity: 0.9; }
        }
    }

    // -- studio-principles  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-principles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(220), 1fr));
        gap: q(24); margin: 0; padding: 0;

        &__item { display: flex; flex-direction: column; gap: q(6.4); padding-block-start: q(8); border-top: q(1) solid rgba(0,0,0,0.15); }
        &__num  { font-size: q(11.2); opacity: 0.5; letter-spacing: 0.14em; }
        &__title { font-size: q(16); margin: 0; font-weight: 500; }
        p { font-size: q(14.08); line-height: 1.5; opacity: 0.85; margin: 0; }
    }

    // -- studio-practice  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-practice {
        display: grid;
        grid-template-columns: 1fr;
        gap: q(32);
        @media (min-width: q(760)) { grid-template-columns: repeat(3, 1fr); }

        &__col {
            h3 {
                font-size: q(12.48); text-transform: uppercase; letter-spacing: 0.12em;
                margin: 0 0 q(12) 0; font-weight: 500; opacity: 0.85;
            }
            ul { display: flex; flex-direction: column; gap: q(5.6); margin: 0; padding: 0; }
            li {
                font-size: q(14.4); line-height: 1.45; padding-block: q(5.6);
                border-bottom: q(1) dashed rgba(0,0,0,0.1);
            }
        }
    }

    // -- studio-people  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-people {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(240), 1fr));
        gap: q(24); margin: 0; padding: 0;

        &__card {
            display: flex; flex-direction: column; gap: q(5.6);
            padding: q(20); border: q(1) solid rgba(0,0,0,0.1);
        }
        &__name { font-size: q(16); margin: 0; font-weight: 500; }
        &__role { font-size: q(11.52); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin: 0; }
        &__bio  { font-size: q(14.08); line-height: 1.5; opacity: 0.85; margin: q(6.4) 0 0 0; }

        &__register-title {
            margin: q(48) 0 q(6.4);
            font-size: q(16.8);
            font-weight: 500;
            display: flex;
            align-items: baseline;
            gap: q(11.2);
            flex-wrap: wrap;
        }
        &__register-eyebrow {
            font-size: q(11.2);
            text-transform: uppercase;
            letter-spacing: 0.18em;
            opacity: 0.55;
        }
        &__register-lead {
            margin: 0 0 q(20);
        }
    }

    // -- studio-register  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-register {
        margin: 0;
        padding: q(6.4) 0 0;
        columns: 2;
        column-gap: q(36);
        border-top: q(1) solid var(--border-soft, rgba(0, 0, 0, 0.12));

        &__row {
            break-inside: avoid;
            display: grid;
            grid-template-columns: 1fr auto;
            column-gap: q(12);
            align-items: baseline;
            padding: q(8.8) 0;
            border-bottom: q(1) dashed var(--border-dashed, rgba(0, 0, 0, 0.1));
        }
        &__name {
            font-size: q(14.08);
            font-weight: 500;
            grid-column: 1;
        }
        &__years {
            font-size: q(11.52);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.04em;
            opacity: 0.7;
            grid-column: 2;
            text-align: right;
            white-space: nowrap;
        }
        &__role {
            font-size: q(11.52);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.6;
            grid-column: 1 / -1;
            margin-top: q(1.6);
        }

        @media (max-width: q(720)) {
            columns: 1;
        }
    }

    // -- studio-numbers  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-numbers {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(140), 1fr));
        gap: q(16); margin: 0; padding: 0;

        li {
            display: flex; flex-direction: column; gap: q(3.2);
            padding: q(16); border: q(1) solid rgba(0,0,0,0.08);
        }
        &__big {
            font-size: clamp(q(32), 4vw, q(44.8));
            line-height: 1; font-weight: 500;
            font-variant-numeric: tabular-nums;
        }
        &__label { font-size: q(12.48); opacity: 0.7; }
    }

    // -- studio-awards  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-awards {
        display: flex; flex-direction: column; gap: 0;
        margin: 0; padding: 0;

        &__row {
            display: grid;
            grid-template-columns: q(64) 1fr;
            gap: q(8) q(16);
            padding-block: q(13.6);
            border-bottom: q(1) solid rgba(0,0,0,0.08);
            font-size: q(14.72);

            @media (min-width: q(760)) {
                grid-template-columns: q(64) 1fr q(288);
            }
        }
        &__year  { font-variant-numeric: tabular-nums; opacity: 0.55; }
        &__title { font-weight: 500; }
        &__place { opacity: 0.7; font-size: q(13.6); }
    }

    // -- studio-locations  (from site-scape_agency/src/static/scss/sections/_pages.scss) --
    .ss-c-studio-locations {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(260), 1fr));
        gap: q(24);

        &__card {
            display: flex; flex-direction: column; gap: q(8);
            padding: q(20); border: q(1) solid rgba(0,0,0,0.1);
            h3 { font-size: q(17.6); margin: 0; font-weight: 500; }
            address { font-style: normal; font-size: q(14.72); line-height: 1.55; }
        }
        &__meta { font-size: q(12.48); opacity: 0.7; margin: 0; }
    }

    // -- press-page  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-page {
        display: flex;
        flex-direction: column;
        gap: q(48);
        padding-block-end: q(64);
    }

    // -- press-howto  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-howto {
        display: flex;
        flex-direction: column;
        gap: q(16);
        max-width: 60ch;
    }

    // -- press-intro__heading  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-intro__heading {
        margin: 0;
        font-size: clamp(q(32), 4vw, q(48));
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.01em;
    }

    // -- press-intro__lead  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-intro__lead {
        font-size: q(16.8);
        line-height: 1.5;
    }

    // -- press-howto__heading  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-howto__heading {
        margin: 0;
        font-size: q(16);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    // -- press-howto__steps  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-howto__steps {
        margin: 0;
        padding-inline-start: q(20);
        display: flex;
        flex-direction: column;
        gap: q(8);
    }

    // -- press-projects  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-projects {
        display: flex;
        flex-direction: column;
        gap: q(24);
    }

    // -- press-projects__header  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-projects__header {
        display: flex;
        align-items: baseline;
        gap: q(12);
        padding-block-end: q(8);
        border-block-end: q(1) solid currentColor;
    }

    // -- press-projects__heading  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-projects__heading {
        margin: 0;
        font-size: q(16);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    // -- press-projects__count  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-projects__count {
        font-size: q(12);
        opacity: 0.5;
        letter-spacing: 0.05em;
    }

    // -- press-projects__grid  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-projects__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(240), 1fr));
        gap: q(32) q(16);
        margin: 0;
        padding: 0;
    }

    // -- press-projects__empty  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-projects__empty {
        opacity: 0.6;
    }

    // -- press-tile  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-tile {
        transition: opacity 0.2s ease-out;

        &__link {
            display: flex;
            flex-direction: column;
            gap: q(9.6);
            color: inherit;
            text-decoration: none;
        }

        &__figure {
            position: relative;
            margin: 0;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.04);
        }

        &__image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease-out;

            &--placeholder {
                background:
                    linear-gradient(
                        135deg,
                        rgba(0, 0, 0, 0.05) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(0, 0, 0, 0.05) 50%,
                        rgba(0, 0, 0, 0.05) 75%,
                        transparent 75%
                    );
                background-size: q(12) q(12);
            }
        }

        &__caption {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: q(8);
        }

        &__title {
            margin: 0;
            font-size: q(13.6);
            font-weight: 500;
            letter-spacing: 0.04em;
            line-height: 1.25;
        }

        &__year {
            font-size: q(12);
            opacity: 0.6;
            letter-spacing: 0.04em;
        }

        &__link:hover &__image,
        &__link:focus-visible &__image {
            transform: scale(1.03);
        }
    }

    // -- press-info  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-info {
        display: flex;
        flex-direction: column;
        gap: q(16);
        padding-block-start: q(32);
        border-block-start: q(1) solid currentColor;
        max-width: 60ch;
    }

    // -- press-sidenav  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-sidenav a {
        color: inherit;
        text-decoration: none;
        opacity: 0.7;

        &:hover,
        &:focus {
            opacity: 1;
            text-decoration: underline;
        }
    }

    // -- press-project  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-project {
        display: flex;
        flex-direction: column;
        gap: q(32);
        padding-block-end: q(64);

        &__crumb {
            margin: 0;
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            opacity: 0.7;

            a {
                color: inherit;
                text-decoration: none;

                &:hover { text-decoration: underline; }
            }

            span[aria-hidden="true"] {
                margin: 0 q(8);
                opacity: 0.4;
            }
        }

        &__title {
            margin: 0;
            font-size: clamp(q(32), 5vw, q(56));
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.02em;
        }

        &__description {
            max-width: 60ch;
            line-height: 1.5;
        }

        &__empty {
            max-width: 60ch;
            opacity: 0.7;
        }
    }

    // -- press-project-aside  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-project-aside {
        display: flex;
        flex-direction: column;
        gap: q(16);
        align-items: flex-end;
        text-align: right;
    }

    // -- press-cart-link  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-cart-link {
        display: inline-flex;
        align-items: center;
        gap: q(8);
        color: inherit;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: q(12);
        padding: q(6.4) q(11.2);
        border: q(1) solid currentColor;

        &:hover,
        &:focus {
            background: currentColor;

            & > * { color: var(--color-background, #fff); }
        }

        &__count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.5em;
            padding: 0 0.4em;
            background: currentColor;
            color: var(--color-background, #fff);
            font-variant-numeric: tabular-nums;
        }
    }

    // -- press-asset-form  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-asset-form {
        display: flex;
        flex-direction: column;
        gap: q(24);

        &__toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: q(12) q(16);
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        &__select-all {
            background: none;
            border: q(1) solid currentColor;
            color: inherit;
            padding: q(5.6) q(11.2);
            font: inherit;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-size: q(11.2);
            cursor: pointer;

            &:hover { background: rgba(0, 0, 0, 0.05); }
        }

        &__hint {
            opacity: 0.6;
            text-transform: none;
            letter-spacing: 0;
            font-size: q(12.8);
        }

        &__actions {
            display: flex;
            flex-wrap: wrap;
            gap: q(12);
            padding-block-start: q(16);
            border-block-start: q(1) solid currentColor;
        }
    }

    // -- press-assets  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-assets {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(220), 1fr));
        gap: q(24) q(16);
        margin: 0;
        padding: 0;
    }

    // -- press-asset  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-asset {
        transition: opacity 0.2s ease-out;

        &__label {
            display: flex;
            flex-direction: column;
            gap: q(9.6);
            cursor: pointer;
        }

        &__checkbox {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        &__figure {
            position: relative;
            margin: 0;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border: q(2) solid transparent;
            background: rgba(0, 0, 0, 0.04);
            transition: border-color 0.15s ease-out;
        }

        &__image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;

            &--placeholder {
                background:
                    linear-gradient(
                        135deg,
                        rgba(0, 0, 0, 0.05) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(0, 0, 0, 0.05) 50%,
                        rgba(0, 0, 0, 0.05) 75%,
                        transparent 75%
                    );
                background-size: q(12) q(12);
            }
        }

        &__kind {
            position: absolute;
            bottom: q(6.4);
            left: q(6.4);
            padding: q(2.4) q(6.4);
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            font-size: q(10.4);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        &__caption {
            display: flex;
            flex-direction: column;
            gap: q(3.2);
        }

        &__title {
            font-size: q(13.6);
            font-weight: 500;
        }

        &__credit {
            font-size: q(12);
            opacity: 0.6;
        }

        &__badge {
            display: inline-block;
            margin-top: q(3.2);
            padding: q(1.6) q(6.4);
            font-size: q(10.4);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            background: currentColor;
            color: var(--color-background, #fff);
            align-self: flex-start;
        }

        &__checkbox:checked + &__figure,
        &__label:has(:checked) &__figure {
            border-color: currentColor;
        }
    }

    // -- press-cart  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-cart {
        display: flex;
        flex-direction: column;
        gap: q(32);
        padding-block-end: q(64);

        &__crumb { /* [parity] (stripped @extend) */ }

        &__title {
            margin: 0;
            font-size: clamp(q(32), 5vw, q(56));
            font-weight: 400;
            line-height: 1;
        }

        &__subtitle {
            margin: 0;
            opacity: 0.7;
            font-size: q(13.6);
        }

        &__empty { opacity: 0.7; }

        &__list {
            display: flex;
            flex-direction: column;
            gap: q(32);
            margin: 0;
            padding: 0;
        }

        &__group-title {
            margin: 0 0 q(12);
            font-size: q(13.6);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding-block-end: q(6.4);
            border-block-end: q(1) solid currentColor;
        }

        &__items {
            display: flex;
            flex-direction: column;
            gap: q(12);
            margin: 0;
            padding: 0;
        }

        &__item {
            display: grid;
            grid-template-columns: q(64) 1fr auto;
            align-items: center;
            gap: q(16);
            padding: q(8) 0;
            border-block-end: q(1) solid rgba(0, 0, 0, 0.08);
        }

        &__thumb {
            margin: 0;
            width: q(64);
            height: q(64);
            overflow: hidden;
            background: rgba(0, 0, 0, 0.04);

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

        &__thumb-placeholder { display: block; width: 100%; height: 100%; }

        &__meta {
            display: flex;
            flex-direction: column;
            gap: q(2.4);
            font-size: q(13.6);
        }

        &__kind {
            font-size: q(11.2);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            opacity: 0.6;
        }

        &__warning {
            font-size: q(11.2);
            color: #b54;
        }

        &__remove-btn {
            background: none;
            border: q(1) solid currentColor;
            color: inherit;
            width: q(28.8);
            height: q(28.8);
            font-size: q(16);
            line-height: 1;
            cursor: pointer;

            &:hover { background: rgba(0, 0, 0, 0.05); }
        }

        &__clear { margin-block-start: q(-8); }

        &__form-section {
            display: flex;
            flex-direction: column;
            gap: q(16);
            padding-block-start: q(32);
            border-block-start: q(1) solid currentColor;
            max-width: 60ch;
        }

        &__form-heading {
            margin: 0;
            font-size: q(24);
            font-weight: 400;
        }
    }

    // -- press-cart-aside  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-cart-aside {
        display: flex;
        flex-direction: column;
        gap: q(16);
        align-items: flex-end;
        text-align: right;
    }

    // -- press-form  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-form {
        display: flex;
        flex-direction: column;
        gap: q(20);

        &__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(q(220), 1fr));
            gap: q(16);
        }

        &__field {
            display: flex;
            flex-direction: column;
            gap: q(4.8);

            label {
                font-size: q(11.2);
                text-transform: uppercase;
                letter-spacing: 0.06em;
                opacity: 0.7;
            }

            input,
            select,
            textarea {
                background: transparent;
                border: q(1) solid currentColor;
                padding: q(8) q(9.6);
                font: inherit;
                color: inherit;
                border-radius: 0;
            }

            textarea { min-height: q(96); resize: vertical; }

            &.has-error input,
            &.has-error select,
            &.has-error textarea { border-color: #c53; }
        }

        &__terms {
            display: flex;
            flex-direction: column;
            gap: q(4.8);
            font-size: q(13.6);

            label {
                display: inline-flex;
                align-items: center;
                gap: q(8);
                cursor: pointer;
            }

            a { color: inherit; }
        }

        &__error {
            font-size: q(12);
            color: #c53;
        }

        &__errors {
            padding: q(8) q(11.2);
            border: q(1) solid #c53;
            color: #c53;
            font-size: q(13.6);
        }
    }

    // -- press-button  (from site-scape_agency/src/static/scss/sections/_press.scss) --
    .ss-c-press-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: q(6.4);
        padding: q(9.6) q(16);
        border: q(1) solid currentColor;
        background: transparent;
        color: inherit;
        font: inherit;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: q(12);
        cursor: pointer;

        &:hover,
        &:focus { background: rgba(0, 0, 0, 0.05); }

        &--primary {
            background: currentColor;

            & { color: var(--color-background, #fff); }

            &:hover, &:focus {
                background: transparent;
                color: inherit;
            }
        }

        &--ghost {
            border-color: rgba(0, 0, 0, 0.3);
        }
    }

    // -- projects-page  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-page {
        display: flex;
        flex-direction: column;
        gap: q(40);
        padding-block-end: q(64);
    }

    // -- projects-filterbar  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-filterbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: q(24) q(32);
        padding-block: q(12);
        border-block: q(1) solid currentColor;
        font-size: q(12);
        text-transform: uppercase;
        letter-spacing: 0.06em;

        &__filters,
        &__view {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: q(12) q(24);
        }

        &__label {
            opacity: 0.5;
        }
    }

    // -- projects-filter  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-filter {
        position: relative;

        &__summary {
            cursor: pointer;
            list-style: none;
            user-select: none;
            display: inline-flex;
            align-items: center;
            gap: q(5.6);

            &::-webkit-details-marker {
                display: none;
            }
        }

        &[open] &__sign {
            transform: rotate(45deg);
        }

        &__sign {
            display: inline-block;
            font-weight: 400;
            transition: transform 0.15s ease-out;
        }

        &__options {
            position: absolute;
            z-index: 10;
            margin-top: q(8);
            padding: q(12) q(16);
            min-width: q(192);
            background: var(--color-background, #fff);
            border: q(1) solid currentColor;
            text-transform: none;
            letter-spacing: 0;
            font-size: q(12.8);

            li + li {
                margin-top: q(5.6);
            }

            label {
                display: inline-flex;
                align-items: center;
                gap: q(8);
                cursor: pointer;
            }
        }
    }

    // -- projects-viewmode  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-viewmode {
        display: inline-flex;
        gap: q(12);

        &__item {
            color: inherit;
            text-decoration: none;
            opacity: 0.5;

            &.is-active,
            &:hover,
            &:focus {
                opacity: 1;
            }

            &.is-active {
                text-decoration: underline;
                text-underline-offset: 0.25em;
            }
        }
    }

    // -- projects-index  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-index {
        display: flex;
        flex-direction: column;
        gap: q(48);

        &__empty {
            opacity: 0.6;
        }
    }

    // -- projects-year  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-year {
        display: flex;
        flex-direction: column;
        gap: q(16);

        &__header {
            display: flex;
            align-items: baseline;
            gap: q(12);
            padding-block-end: q(8);
            border-block-end: q(1) solid currentColor;
        }

        &__heading {
            font-size: clamp(q(32), 4vw, q(56));
            font-weight: 400;
            line-height: 1;
            margin: 0;
            letter-spacing: -0.01em;
        }

        &__count {
            font-size: q(12);
            opacity: 0.5;
            letter-spacing: 0.05em;
        }

        &__grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(q(180), 1fr));
            gap: q(24) q(16);
            margin: 0;
            padding: 0;
        }
    }

    // -- projects-tile  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-tile {
        transition: opacity 0.2s ease-out;

        &__link {
            display: flex;
            flex-direction: column;
            gap: q(8);
            color: inherit;
            text-decoration: none;
        }

        &__figure {
            position: relative;
            margin: 0;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.04);
        }

        &__image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease-out;

            &--placeholder {
                background:
                    linear-gradient(
                        135deg,
                        rgba(0, 0, 0, 0.05) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(0, 0, 0, 0.05) 50%,
                        rgba(0, 0, 0, 0.05) 75%,
                        transparent 75%
                    );
                background-size: q(12) q(12);
            }
        }

        &__title {
            margin: 0;
            font-size: q(13.6);
            font-weight: 400;
            line-height: 1.25;
            letter-spacing: 0;
        }

        &__link:hover &__image,
        &__link:focus-visible &__image {
            transform: scale(1.03);
        }
    }

    // -- projects-year__grid  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-year__grid:hover .ss-c-projects-tile {
        opacity: 0.4;
    }

    // -- projects-yearnav  (from site-scape_agency/src/static/scss/sections/_projects.scss) --
    .ss-c-projects-yearnav a {
        color: inherit;
        text-decoration: none;
        opacity: 0.7;

        &:hover,
        &:focus {
            opacity: 1;
            text-decoration: underline;
        }
    }

    // -- work-related  (from site-scape_agency/src/static/scss/sections/_related.scss) --
    .ss-c-work-related {
        margin-block-start: q(64);
        padding-block-start: q(32);
        border-top: q(1) solid currentColor;

        &__heading {
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-block-end: q(24);
            opacity: 0.6;
            font-weight: 500;
        }

        &__list {
            display: flex;
            flex-direction: column;
            gap: q(12);
            padding: 0;
            margin: 0;
        }

        &__item a {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0 q(20);
            text-decoration: none;
            padding-block: q(9.6);
            border-bottom: q(1) solid rgba(0, 0, 0, 0.1);
            transition: opacity 0.2s ease;

            &:hover { opacity: 0.55; }
        }

        &__title {
            font-size: q(18);
        }

        &__meta {
            font-size: q(12.8);
            opacity: 0.6;
        }

        &__grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(q(220), 1fr));
            gap: q(24);
            padding: 0;
            margin: 0;
        }

        &__card a {
            display: flex;
            flex-direction: column;
            gap: q(6.4);
            text-decoration: none;

            img {
                width: 100%;
                height: auto;
                aspect-ratio: 3 / 2;
                object-fit: cover;
            }

            .ss-c-work-related__title { font-size: q(15.2); margin-block-start: q(6.4); }
            .ss-c-work-related__meta { font-size: q(12); }
        }
    }

    // -- story-list  (from site-scape_agency/src/static/scss/sections/_related.scss) --
    .ss-c-story-list {
        display: flex;
        flex-direction: column;
        gap: q(40);
        padding: 0;
        margin: 0;

        &__item a,
        &__link {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: q(16);
            text-decoration: none;

            @media (min-width: q(720)) {
                grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                gap: q(32);
                align-items: start;
            }
        }

        &__media img {
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 2;
            object-fit: cover;
        }

        &__title {
            font-size: q(24);
            margin: 0 0 q(8) 0;
        }

        &__kicker,
        &__meta {
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.6;
            margin: 0 0 q(6.4) 0;
        }

        &__lead {
            margin: q(6.4) 0 0 0;
            font-size: q(15.2);
            line-height: 1.5;
        }
    }

    // -- main_padding  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-main_padding {
        padding: 0 q(20);
    }

    // -- grid__row--100  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-grid__row--100 {
        grid-template-rows: 100%;
    }

    // -- metadata--contact-info  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-metadata--contact-info {
        display: block;
        position: relative;
        opacity: 1;
        visibility: visible;
        margin-top: q(16);

        .ss-c-meta-item {
            display: grid;
            grid-template-columns: q(192) 1fr;
            gap: q(32);
            margin-bottom: q(12);
            font-size: q(16);
            align-items: baseline;
            font-weight: 300;
        }

        .ss-c-meta-label {
            font-size: q(16);
            text-transform: none;
            letter-spacing: normal;
            opacity: 0.65;
            white-space: nowrap;
            font-weight: 300;
        }

        .ss-c-meta-value {
            font-size: q(16);
            font-weight: 300;
        }
    }

    // -- nav-mobile  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-nav-mobile {
        display: none;
    }

    // -- nav-horizontal  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-nav-horizontal {
        display: flex;
        flex-direction: row;
        gap: q(24);
        margin: 0;
        padding: 0;

        li {
            margin: 0;
        }
    }

    // -- mobile-metadata-container  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-mobile-metadata-container {
        display: none;
    }

    // -- folio-counter-mobile  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-folio-counter-mobile {
        display: none;
    }

    // -- custom-cursor  (from site-scape_agency/src/static/scss/theme/_cursor.scss) --
    .ss-c-custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: q(12);
        height: q(12);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;

        background: white;
        mix-blend-mode: difference;

        transform: translate(-50%, -50%);
        transition:
            width 0.2s ease,
            height 0.2s ease,
            border 0.2s ease,
            background 0.2s ease;
    }

    // -- lang-toggle  (from site-blockfoundation_io/src/static/scss/abstracts/_themes.scss) --
    .ss-c-lang-toggle {
        display: inline-flex;
        align-items: center;
        gap: q(4);
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: q(12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-text-muted);
        transition: color 200ms ease;

        &:hover {
            color: var(--color-text-primary);
        }

        &__option {
            cursor: pointer;

            &--active {
                color: var(--color-text-primary);
                font-weight: 600;
            }
        }

        &__divider {
            color: var(--color-border);
        }
    }

    // -- feature-card  (from site-blockfoundation_io/src/static/scss/components/_cards.scss) --
    .ss-c-feature-card {
        background-color: var(--color-bg-primary);
        padding: $spacing-8;
        text-align: left;
        transition: all $transition-base;
        transform: translateY(0);

        &:hover {
            background-color: var(--color-bg-hover);
            transform: translateY(q(-4));
        }

        &__icon {
            width: q(48);
            height: q(48);
            margin-bottom: $spacing-6;
        // [parity] (stripped @include)
            transition: transform $transition-base;

            svg {
                width: q(32);
                height: q(32);
                color: var(--color-text-primary);
            }
        }

        &:hover &__icon {
            transform: scale(1.1);
        }

        &__title {
            font-size: $font-size-lg;
            font-weight: $font-weight-medium;
            margin-bottom: $spacing-3;
            color: var(--color-text-primary);
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        &__text {
            color: var(--color-text-secondary);
            font-size: $font-size-sm;
            line-height: $line-height-relaxed;
        }
    }

    // -- logo-card  (from site-blockfoundation_io/src/static/scss/components/_cards.scss) --
    .ss-c-logo-card {
        background-color: var(--color-bg-primary);
        padding: $spacing-8;
        text-align: left;
        transition: all $transition-base;
        transform: translateY(0);

        // 4:3 ratio card
        aspect-ratio: 4 / 3;
        display: flex;
        flex-direction: column;

        &:hover {
            background-color: var(--color-bg-hover);
            transform: translateY(q(-4));
        }

        &__logo {
            width: q(48);
            height: q(48);
            margin-bottom: $spacing-4;
        // [parity] (stripped @include)
            transition: transform $transition-base;
            order: 1;

            svg {
                width: q(40);
                height: q(40);
                color: var(--color-text-primary);
            }
        }

        &:hover &__logo {
            transform: scale(1.1);
        }

        &__title {
            font-size: $font-size-lg;
            font-weight: $font-weight-medium;
            margin-bottom: $spacing-3;
            color: var(--color-text-primary);
            text-transform: uppercase;
            letter-spacing: 0.02em;
            min-height: 3.5em;
            order: 2;
        }

        &__text {
            color: var(--color-text-secondary);
            font-size: $font-size-sm;
            line-height: $line-height-relaxed;
            margin-bottom: $spacing-4;
            order: 3;
            flex-grow: 1;
        }

        &__link {
            display: inline-flex;
            align-items: center;
            gap: $spacing-2;
            font-size: $font-size-sm;
            color: var(--color-text-muted);
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: color $transition-base;
            order: 4;
            margin-top: auto;

            &:hover {
                color: var(--color-text-primary);
            }

            svg {
                width: q(14);
                height: q(14);
            }
        }
    }

    // -- form-select  (from site-blockfoundation_io/src/static/scss/components/_forms.scss) --
    .ss-c-form-select {
        // [parity] (stripped @extend)
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right $spacing-3 center;
        background-size: q(20);
        padding-right: $spacing-10;
    }

    // -- form-radio  (from site-blockfoundation_io/src/static/scss/components/_forms.scss) --
    .ss-c-form-radio {
        display: flex;
        align-items: center;
        gap: $spacing-3;
        cursor: pointer;

        input {
            width: q(18);
            height: q(18);
            accent-color: $color-white;
        }

        span {
            font-size: $font-size-sm;
            color: $color-gray-700;
        }
    }

    // -- form-error  (from site-blockfoundation_io/src/static/scss/components/_forms.scss) --
    .ss-c-form-error {
        color: $color-white;
        font-size: $font-size-sm;
        margin-top: $spacing-1;
    }

    // -- form-help  (from site-blockfoundation_io/src/static/scss/components/_forms.scss) --
    .ss-c-form-help {
        color: $color-gray-500;
        font-size: $font-size-sm;
        margin-top: $spacing-1;
    }

    // -- partner-logos  (from site-blockfoundation_io/src/static/scss/components/_partner-logos.scss) --
    .ss-c-partner-logos {
        &__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(q(200), 1fr));
            gap: $spacing-8;
            margin-top: $spacing-8;
        }

        &__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: $spacing-8;
            background: var(--color-bg-secondary);
            border: q(1) solid var(--color-border);
            transition: all 300ms ease;

            &:hover {
                border-color: var(--color-text-muted);
                background: var(--color-bg-hover);
                transform: translateY(q(-4));
            }
        }

        &__logo {
            width: q(160);
            height: q(80);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: $spacing-4;

            img,
            svg {
                max-width: 100%;
                max-height: 100%;
                color: var(--color-text-primary);
            }
        }

        &__name {
            font-size: $font-size-lg;
            font-weight: $font-weight-bold;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: $spacing-2;
            color: var(--color-text-primary);
        }

        &__subtitle {
            font-size: $font-size-xs;
            color: var(--color-text-muted);
            margin-bottom: $spacing-4;
        }

        &__description {
            font-size: $font-size-sm;
            color: var(--color-text-secondary);
            line-height: $line-height-relaxed;
            margin-bottom: $spacing-4;
        }

        &__link {
            font-size: $font-size-xs;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--color-text-muted);
            transition: color 200ms ease;

            &:hover {
                color: var(--color-text-primary);
            }
        }
    }

    // -- partner-logos--compact  (from site-blockfoundation_io/src/static/scss/components/_partner-logos.scss) --
    .ss-c-partner-logos--compact {
        .ss-c-partner-logos__grid {
            grid-template-columns: repeat(auto-fit, minmax(q(140), 1fr));
            gap: $spacing-4;
        }

        .ss-c-partner-logos__item {
            padding: $spacing-6;
        }

        .ss-c-partner-logos__logo {
            width: q(120);
            height: q(60);
            margin-bottom: 0;
        }
    }

    // -- partner-logos--featured  (from site-blockfoundation_io/src/static/scss/components/_partner-logos.scss) --
    .ss-c-partner-logos--featured {
        .ss-c-partner-logos__grid {
            grid-template-columns: repeat(auto-fit, minmax(q(280), 1fr));
            gap: $spacing-10;
        }

        .ss-c-partner-logos__item {
            padding: $spacing-10;
        }

        .ss-c-partner-logos__logo {
            width: q(200);
            height: q(100);
            margin-bottom: $spacing-6;
        }
    }

    // -- container-sm  (from site-blockfoundation_io/src/static/scss/layout/_container.scss) --
    .ss-c-container-sm {
        // [parity] (stripped @include)
        max-width: q(768);
    }

    // -- container-lg  (from site-blockfoundation_io/src/static/scss/layout/_container.scss) --
    .ss-c-container-lg {
        // [parity] (stripped @include)
        max-width: q(1024);
    }

    // -- newsletter-form  (from site-blockfoundation_io/src/static/scss/layout/_footer.scss) --
    .ss-c-newsletter-form {
        &__input-group {
            display: flex;
            gap: $spacing-2;
        }

        &__input {
            flex: 1;
            padding: $spacing-3 $spacing-4;
            font-size: $font-size-sm;
            color: var(--color-text-primary);
            background-color: transparent;
            border: q(1) solid var(--color-border);
            transition: border-color $transition-fast;

            &::placeholder {
                color: var(--color-text-muted);
            }

            &:focus {
                outline: none;
                border-color: var(--color-text-primary);
            }
        }

        &__button {
            padding: $spacing-3 $spacing-6;
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-bg-primary);
            background-color: var(--color-text-primary);
            border: q(1) solid var(--color-text-primary);
            cursor: pointer;
            transition: all $transition-fast;

            &:hover {
                background-color: transparent;
                color: var(--color-text-primary);
            }
        }
    }

    // -- mobile-nav  (from site-blockfoundation_io/src/static/scss/layout/_header.scss) --
    .ss-c-mobile-nav {
        position: fixed;
        top: q(72);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-bg-primary);
        z-index: unset;
        padding: $spacing-6;
        transform: translateX(100%);
        transition: transform $transition-slow;

        &--open {
            transform: translateX(0);
        }

        // [parity] (stripped @include block)


        &__link {
            display: block;
            padding: $spacing-4 0;
            font-size: $font-size-base;
            font-weight: $font-weight-normal;
            color: $color-gray-700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: q(1) solid $color-gray-400;

            &:hover {
                color: $color-white;
            }
        }
    }

    // -- contact-item  (from site-blockfoundation_io/src/static/scss/sections/_contact.scss) --
    .ss-c-contact-item {
        display: flex;
        align-items: flex-start;
        gap: $spacing-4;

        &__icon {
            flex-shrink: 0;
            width: q(48);
            height: q(48);
            border: q(1) solid var(--color-border);
        // [parity] (stripped @include)
            svg {
                width: q(24);
                height: q(24);
                color: var(--color-text-primary);
            }
        }

        &__label {
            font-size: $font-size-sm;
            color: var(--color-text-muted);
            margin-bottom: $spacing-1;
        }

        &__value {
            font-weight: $font-weight-medium;
            color: var(--color-text-primary);
            transition: color $transition-fast;
        }

        a.contact-item__value:hover {
            color: var(--color-link-hover);
        }
    }

    // -- mission  (from site-blockfoundation_io/src/static/scss/sections/_mission.scss) --
    .ss-c-mission {
        padding: $spacing-24 0;
        background-color: $color-black;
        color: $color-white;
        border-top: q(1) solid $color-gray-400;

        &__inner {
        // [parity] (stripped @include)
            text-align: left;
        }

        &__tagline {
            display: inline-block;
            color: $color-gray-600;
            font-size: $font-size-sm;
            font-weight: $font-weight-normal;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: $spacing-6;
        }

        &__title {
            font-size: $font-size-3xl;
            margin-bottom: $spacing-6;
            color: $color-white;
            text-transform: uppercase;

            // [parity] (stripped @include block)

        }

        &__text {
            color: $color-gray-600;
            font-size: $font-size-lg;
            line-height: $line-height-relaxed;
            max-width: q(800);
            margin-bottom: $spacing-10;
        }

        &__stats {
            display: grid;
            gap: q(1);
            background-color: $color-gray-400;

            // [parity] (stripped @include block)

        }

        &__stat {
            text-align: left;
            padding: $spacing-8;
            background-color: $color-black;

            &-value {
                font-size: $font-size-5xl;
                font-weight: $font-weight-bold;
                color: $color-white;
                margin-bottom: $spacing-2;
            }

            &-label {
                color: $color-gray-600;
                font-size: $font-size-xs;
                text-transform: uppercase;
                letter-spacing: 0.1em;
            }
        }
    }

    // -- partners  (from site-blockfoundation_io/src/static/scss/sections/_partners.scss) --
    .ss-c-partners {
        padding: $spacing-24 0;
        background-color: var(--color-bg-primary);
        border-top: q(1) solid var(--color-border);

        &__inner {
        // [parity] (stripped @include)
        }

        &__header {
            text-align: left;
            max-width: q(700);
            margin-bottom: $spacing-16;
        }

        &__tagline {
            display: inline-block;
            color: var(--color-text-muted);
            font-size: $font-size-sm;
            font-weight: $font-weight-normal;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: $spacing-4;
        }

        &__title {
            font-size: $font-size-3xl;
            margin-bottom: $spacing-4;
            color: var(--color-text-primary);
            text-transform: uppercase;

            // [parity] (stripped @include block)

        }

        &__description {
            color: var(--color-text-secondary);
            font-size: $font-size-lg;
        }

        &__grid {
            display: grid;
            gap: q(1);
            background-color: var(--color-border);

            // [parity] (stripped @include block)


            // [parity] (stripped @include block)

        }

        // Reveal cards immediately inside the partners grid (no scroll-in JS hook)
        .ss-c-logo-card {
            opacity: 1;
            transform: none;
        }

        // Placeholder shown when no logo image is set
        .ss-c-logo-card__placeholder {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: q(48);
            height: q(48);
            font-size: $font-size-base;
            font-weight: $font-weight-bold;
            letter-spacing: 0.05em;
            color: var(--color-text-primary);
            background: var(--color-bg-secondary);
            border: q(1) solid var(--color-border);
            text-transform: uppercase;
        }
    }

    // -- rich-text-section  (from site-blockfoundation_io/src/static/scss/sections/_rich-text-section.scss) --
    .ss-c-rich-text-section {
        padding: $spacing-24 0;
        background-color: var(--color-bg-primary);
        border-top: q(1) solid var(--color-border);

        &__inner {
        // [parity] (stripped @include)
        }

        // Two-column layout: text on the left, image / placeholder on the right.
        &__layout {
            display: grid;
            gap: $spacing-12;
            align-items: start;

            // [parity] (stripped @include block)

        }

        &__media {
            order: -1; // image first on small screens

            // [parity] (stripped @include block)

        }

        &__placeholder {
            aspect-ratio: 4 / 3;
            width: 100%;
            background-color: var(--color-bg-secondary);
            border: q(1) solid var(--color-border);
            color: var(--color-border);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;

            svg {
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
                display: block;
            }
        }

        &__content {
            max-width: q(800);
            color: var(--color-text-secondary);
            line-height: $line-height-relaxed;
            font-size: $font-size-base;

            h2 {
                font-size: $font-size-3xl;
                margin: $spacing-12 0 $spacing-4;
                color: var(--color-text-primary);
                text-transform: uppercase;
                letter-spacing: 0.02em;

                &:first-child {
                    margin-top: 0;
                }

                // [parity] (stripped @include block)

            }

            h3 {
                font-size: $font-size-2xl;
                margin: $spacing-8 0 $spacing-3;
                color: var(--color-text-primary);
                text-transform: uppercase;
                letter-spacing: 0.02em;
            }

            h4 {
                font-size: $font-size-xl;
                margin: $spacing-6 0 $spacing-2;
                color: var(--color-text-primary);
            }

            p {
                margin-bottom: $spacing-4;
            }

            ul,
            ol {
                margin: $spacing-4 0 $spacing-6 $spacing-6;

                li {
                    margin-bottom: $spacing-2;
                }
            }

            a {
                color: var(--color-text-primary);
                text-decoration: underline;

                &:hover {
                    text-decoration: none;
                }
            }

            img {
                max-width: 100%;
                height: auto;
                margin: $spacing-6 0;
            }

            blockquote {
                border-left: q(2) solid var(--color-text-primary);
                padding-left: $spacing-6;
                margin: $spacing-6 0;
                font-style: italic;
                color: var(--color-text-primary);
            }
        }
    }

    // -- technology  (from site-blockfoundation_io/src/static/scss/sections/_technology.scss) --
    .ss-c-technology {
        padding: $spacing-24 0;
        background-color: var(--color-bg-primary);
        border-top: q(1) solid var(--color-border);

        &__inner {
        // [parity] (stripped @include)
        }

        &__header {
            text-align: left;
            max-width: q(700);
            margin-bottom: $spacing-16;
        }

        &__tagline {
            display: inline-block;
            color: $color-gray-600;
            font-size: $font-size-sm;
            font-weight: $font-weight-normal;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: $spacing-4;
        }

        &__title {
            font-size: $font-size-3xl;
            margin-bottom: $spacing-4;
            color: $color-white;
            text-transform: uppercase;

            // [parity] (stripped @include block)

        }

        &__description {
            color: $color-gray-600;
            font-size: $font-size-lg;
        }

        &__grid {
            display: grid;
            gap: $spacing-12;
            background-color: transparent;

            // [parity] (stripped @include block)

        }

        &__item {
            display: flex;
            gap: $spacing-6;
            padding: $spacing-6;
            background-color: var(--color-bg-secondary);
            transition: background-color $transition-base;

            &:hover {
                background-color: var(--color-bg-hover);
            }
        }

        &__icon {
            flex-shrink: 0;
            width: q(48);
            height: q(48);
            border: q(1) solid $color-gray-400;
        // [parity] (stripped @include)
            svg {
                width: q(24);
                height: q(24);
                color: $color-white;
            }
        }

        &__content {
            flex: 1;
        }

        &__item-title {
            font-size: $font-size-lg;
            font-weight: $font-weight-semibold;
            margin-bottom: $spacing-2;
        }

        &__item-text {
            color: $color-gray-600;
            font-size: $font-size-sm;
            line-height: $line-height-relaxed;
        }
    }

    // -- animate-on-scroll  (from site-blockfoundation_io/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-on-scroll {
        opacity: 0;

        &.is-visible {
            animation: fadeInUp 0.6s ease-out forwards;
        }
    }

    // -- animate-fade-in  (from site-blockfoundation_io/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-fade-in {
        opacity: 0;

        &.is-visible {
            animation: fadeIn 0.6s ease-out forwards;
        }
    }

    // -- animate-slide-left  (from site-blockfoundation_io/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-slide-left {
        opacity: 0;

        &.is-visible {
            animation: slideInLeft 0.6s ease-out forwards;
        }
    }

    // -- animate-slide-right  (from site-blockfoundation_io/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-slide-right {
        opacity: 0;

        &.is-visible {
            animation: slideInRight 0.6s ease-out forwards;
        }
    }

    // -- stagger-children  (from site-blockfoundation_io/src/static/scss/utilities/_animations.scss) --
    .ss-c-stagger-children {
        > *:nth-child(1) { animation-delay: 0s; }
        > *:nth-child(2) { animation-delay: 0.1s; }
        > *:nth-child(3) { animation-delay: 0.2s; }
        > *:nth-child(4) { animation-delay: 0.3s; }
        > *:nth-child(5) { animation-delay: 0.4s; }
        > *:nth-child(6) { animation-delay: 0.5s; }
    }

    // -- hover-lift  (from site-blockfoundation_io/src/static/scss/utilities/_animations.scss) --
    .ss-c-hover-lift {
        transition: transform $transition-base;

        &:hover {
            transform: translateY(q(-4));
        }
    }

    // -- hover-scale  (from site-blockfoundation_io/src/static/scss/utilities/_animations.scss) --
    .ss-c-hover-scale {
        transition: transform $transition-base;

        &:hover {
            transform: scale(1.02);
        }
    }

    // -- hover-glow  (from site-blockfoundation_io/src/static/scss/utilities/_animations.scss) --
    .ss-c-hover-glow {
        transition: box-shadow $transition-base;

        &:hover {
            box-shadow: 0 0 q(20) rgba($color-white, 0.1);
        }
    }

    // -- d-none  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-d-none { display: none; }

    // -- d-block  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-d-block { display: block; }

    // -- d-inline  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-d-inline { display: inline; }

    // -- d-inline-block  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-d-inline-block { display: inline-block; }

    // -- d-flex  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-d-flex { display: flex; }

    // -- d-inline-flex  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-d-inline-flex { display: inline-flex; }

    // -- d-grid  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-d-grid { display: grid; }

    // -- flex-row  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-flex-row { flex-direction: row; }

    // -- flex-column  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-flex-column { flex-direction: column; }

    // -- flex-nowrap  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-flex-nowrap { flex-wrap: nowrap; }

    // -- justify-start  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-justify-start { justify-content: flex-start; }

    // -- justify-end  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-justify-end { justify-content: flex-end; }

    // -- justify-around  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-justify-around { justify-content: space-around; }

    // -- items-start  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-items-start { align-items: flex-start; }

    // -- items-end  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-items-end { align-items: flex-end; }

    // -- items-stretch  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-items-stretch { align-items: stretch; }

    // -- flex-1  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-flex-1 { flex: 1; }

    // -- flex-auto  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-flex-auto { flex: auto; }

    // -- flex-none  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-flex-none { flex: none; }

    // -- visible  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-visible { visibility: visible; }

    // -- invisible  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-invisible { visibility: hidden; }

    // -- overflow-auto  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-overflow-auto { overflow: auto; }

    // -- overflow-hidden  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-overflow-hidden { overflow: hidden; }

    // -- overflow-scroll  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-overflow-scroll { overflow: scroll; }

    // -- relative  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-relative { position: relative; }

    // -- absolute  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-absolute { position: absolute; }

    // -- fixed  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-fixed { position: fixed; }

    // -- sticky  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-sticky { position: sticky; }

    // -- h-full  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-h-full { height: 100%; }

    // -- min-h-screen  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-min-h-screen { min-height: 100vh; }

    // -- m-0  (from site-blockfoundation_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-m-0 { margin: 0; }

    // -- m-auto  (from site-blockfoundation_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-m-auto { margin: auto; }

    // -- mx-auto  (from site-blockfoundation_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-mx-auto { margin-left: auto; margin-right: auto; }

    // -- my-auto  (from site-blockfoundation_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-my-auto { margin-top: auto; margin-bottom: auto; }

    // -- p-0  (from site-blockfoundation_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-p-0 { padding: 0; }

    // -- text-justify  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-justify { text-align: justify; }

    // -- font-light  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-font-light { font-weight: $font-weight-light; }

    // -- font-normal  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-font-normal { font-weight: $font-weight-normal; }

    // -- font-medium  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-font-medium { font-weight: $font-weight-medium; }

    // -- font-semibold  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-font-semibold { font-weight: $font-weight-semibold; }

    // -- font-bold  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-font-bold { font-weight: $font-weight-bold; }

    // -- text-xs  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-xs { font-size: $font-size-xs; }

    // -- text-sm  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-sm { font-size: $font-size-sm; }

    // -- text-base  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-base { font-size: $font-size-base; }

    // -- text-lg  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-lg { font-size: $font-size-lg; }

    // -- text-xl  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-xl { font-size: $font-size-xl; }

    // -- text-2xl  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-2xl { font-size: $font-size-2xl; }

    // -- text-3xl  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-3xl { font-size: $font-size-3xl; }

    // -- text-primary  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-primary { color: $color-primary; }

    // -- text-secondary  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-secondary { color: #737373; }

    // -- text-dark  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-dark { color: #1a1a1a; }

    // -- text-light  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-light { color: #f2f2f2; }

    // -- text-white  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-white { color: $color-white; }

    // -- uppercase  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-uppercase { text-transform: uppercase; }

    // -- lowercase  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-lowercase { text-transform: lowercase; }

    // -- capitalize  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-capitalize { text-transform: capitalize; }

    // -- no-underline  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-no-underline { text-decoration: none; }

    // -- underline  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-underline { text-decoration: underline; }

    // -- leading-tight  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-leading-tight { line-height: $line-height-tight; }

    // -- leading-normal  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-leading-normal { line-height: unset; }

    // -- leading-relaxed  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-leading-relaxed { line-height: $line-height-relaxed; }

    // -- tracking-tight  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-tracking-tight { letter-spacing: -0.025em; }

    // -- tracking-normal  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-tracking-normal { letter-spacing: 0; }

    // -- tracking-wide  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-tracking-wide { letter-spacing: 0.025em; }

    // -- tracking-wider  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-tracking-wider { letter-spacing: 0.05em; }

    // -- truncate  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    // -- section-subtitle  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-section-subtitle {
        color: #525252;
        font-size: q(18);
    }

    // -- process  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-process {
        padding: unset $container-padding;

        &__inner {
            max-width: $container-max;
            margin: 0 auto;
        }

        &__steps {
            display: grid;
            grid-template-columns: 1fr;
            gap: unset;

            @media (min-width: q(768)) {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }

    // -- demo  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-demo {
        padding: unset $container-padding;
        background: #ffffff;

        &__inner {
            display: grid;
            grid-template-columns: 1fr;
            gap: unset;
            align-items: center;
            max-width: $container-max;
            margin: 0 auto;

            @media (min-width: q(1024)) {
                grid-template-columns: 1fr 1fr;
            }
        }

        &__content {
            text-align: center;

            @media (min-width: q(1024)) {
                text-align: left;
            }
        }

        &__title {
            margin: unset 0 unset;
        }

        &__description {
            color: #525252;
            margin-bottom: unset;
        }

        &__visual {
            display: flex;
            justify-content: center;
        }

        &__window {
            width: 100%;
            max-width: q(500);
            background: #ffffff;
            border: q(1) solid var(--ss-color-border, #e5e5e5);
            border-radius: $radius-xl;
            overflow: hidden;

            &-header {
                display: flex;
                gap: unset;
                padding: unset;
                background: var(--ss-color-fill, #ffffff);
                border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);

                span {
                    width: q(12);
                    height: q(12);
                    border-radius: 50%;
                    background: #737373;

                    &:first-child { background: #EF4444; }
                    &:nth-child(2) { background: #F59E0B; }
                    &:nth-child(3) { background: #10B981; }
                }
            }

            &-content {
                height: q(300);
                padding: unset;
            }
        }

        &__animation {
            position: relative;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba($color-primary, 0.1) q(1), transparent q(1)),
                linear-gradient(90deg, rgba($color-primary, 0.1) q(1), transparent q(1));
            background-size: q(20) q(20);
            border-radius: $radius-md;
        }

        &__grid-animated {
            position: absolute;
            inset: q(20);
            border: q(2) dashed rgba($color-primary, 0.3);
            border-radius: $radius-sm;
            animation: gridPulse 3s infinite;
        }

        &__cursor {
            position: absolute;
            width: q(16);
            height: q(16);
            background: $color-primary;
            border-radius: 50%;
            top: 50%;
            left: 30%;
            animation: cursorMove 4s infinite;
        }
    }

    // -- use-cases  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-use-cases {
        padding: unset $container-padding;

        &__inner {
            max-width: $container-max;
            margin: 0 auto;
        }

        &__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: unset;

            @media (min-width: q(768)) {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }

    // -- use-case-card  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-use-case-card {
        padding: unset;
        background: #ffffff;
        border: q(1) solid var(--ss-color-border, #e5e5e5);
        border-radius: $radius-xl;
        transition: all $transition-base;

        &:hover {
            border-color: rgba($color-primary, 0.3);
            background: rgba($color-primary, 0.05);
        }

        h3 {
            font-size: q(18);
            margin-bottom: unset;
        }

        p {
            color: #525252;
            font-size: q(15);
        }
    }

    // -- page-hero  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-page-hero {
        padding: calc(unset) $container-padding unset;
        text-align: center;
        background: #ffffff;

        &__inner {
            max-width: q(700);
            margin: 0 auto;
        }

        &__title {
            margin: unset 0 unset;
        }

        &__subtitle {
            color: #525252;
            font-size: q(18);
        }
    }

    // -- contact-section  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-contact-section {
        padding: unset $container-padding;

        &__inner {
            max-width: $container-max;
            margin: 0 auto;
        }
    }

    // -- contact-form-wrapper  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-contact-form-wrapper {
        background: #ffffff;
        border: q(1) solid var(--ss-color-border, #e5e5e5);
        border-radius: $radius-xl;
        padding: unset;
    }

    // -- robin_grid_row_posisiton_1  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_grid_row_posisiton_1 {
        grid-row-start: 1;
        // Mobile default (under 576px)
        // [parity] (stripped @include)
        @media (min-width: q(576)) {
        // [parity] (stripped @include)
        }

        @media (min-width: q(768)) {
        // [parity] (stripped @include)
        }

        @media (min-width: q(992)) {
        // [parity] (stripped @include)
        }

        @media (min-width: q(1200)) {
        // [parity] (stripped @include)
        }

        @media (min-width: q(1400)) {
        // [parity] (stripped @include)
        }
    }

    // -- robin-hero--title  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin-hero--title {
        font-size: q(48);
        line-height: q(60);
        font-weight: 278;
        font-variation-settings:
            'wght' 278,
            'wdth' 400;
        position: absolute;
        bottom: q(48);
        left: q(20);
        max-width: calc(60vw - q(30.4));
        padding-left: q(80);
    }

    // -- reset_robin  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-reset_robin {
        margin-top: q(32);
        margin: 0;
        padding: 0;
    }

    // -- robinsreset  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robinsreset {
        max-width: 50%;
        min-width: 30%;
    }

    // -- r-lineight  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-r-lineight {
        line-height: 1.5;
        // max-width: 65ch;
    }

    // -- robin-afbeelding2  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin-afbeelding2 {
        max-width: 80%;
        height: auto;
        width: q(320);
    }

    // -- grid__frame--3_robin_2  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-grid__frame--3_robin_2 {
        display: grid;
        position: relative;
        grid-template-columns: repeat(3, 1fr);
        gap: q(20);
        grid-gap: q(48);
    }

    // -- robin_placements_pics  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_placements_pics {
        grid-row-start: 2;
        grid-column-start: 2;
    }

    // -- robin_grid_one  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_grid_one {
        display: grid;
    }

    // -- spacing_robin_visie  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-spacing_robin_visie {
        // [parity] (stripped @include)
    }

    // -- robin_sec_2  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_sec_2 {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-template-rows: auto auto;
    }

    // -- robin_grid_tex  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_grid_tex {
        grid-row-start: 2;
        grid-column-start: 1;
    }

    // -- robin_grid_top  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_grid_top {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    // -- robin_test  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_test {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    // -- robin_images_1_demo  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_images_1_demo {
        width: 100%;
    }

    // -- hupo_robin  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-hupo_robin {
        justify-self: center;
    }

    // -- robin_small_section_oinly_text  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_small_section_oinly_text {
        margin-bottom: q(32);

        grid-template-columns: 1fr 1fr;
        // [parity] (stripped @include)
    }

    // -- robinsanyons_3placement_with_text  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robinsanyons_3placement_with_text {
        grid-column-start: 3;
    }

    // -- grid_conclusion_robin  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-grid_conclusion_robin {
        grid-column-end: 3;
        // [parity] (stripped @include)
    }

    // -- robin_2024_section_1  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2024_section_1 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto 1fr;
        // [parity] (stripped @include)
    }

    // -- robin_2024_section1_title_2  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2024_section1_title_2 {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    // -- robin_2024_section1_title_1  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2024_section1_title_1 {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-column-end: 6;
    }

    // -- team_robin  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-team_robin {
        grid-row-start: 1;
        // [parity] (stripped @include)
    }

    // -- text_location_ronin  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-text_location_ronin {
        // [parity] (stripped @include)
    }

    // -- section_2_2024_robin  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-section_2_2024_robin {
        grid-column-start: 3;
        grid-row-start: 1;
        // [parity] (stripped @include)
        grid-column-end: 6;
    }

    // -- robin_figure_section_1  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_figure_section_1 {
        grid-column-start: 1;
        grid-row-start: 1;
        // [parity] (stripped @include)
        grid-column-end: 4;
    }

    // -- robin_2024_section_3  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2024_section_3 {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        // [parity] (stripped @include)
    }

    // -- robin_2024_section_3_new  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2024_section_3_new {
        grid-template-rows: 0fr 0fr 0fr 0fr;
        grid-template-columns: 1fr 1fr 1fr;
        // [parity] (stripped @include)
    }

    // -- robins_colum_option4_section_3  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robins_colum_option4_section_3 {
        display: flex;
        justify-content: flex-start;
    }

    // -- robins_padding_left_right  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robins_padding_left_right {
        padding-left: q(288);
        padding-right: q(288);
    }

    // -- section3_2024_robin_images  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-section3_2024_robin_images {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 4;
        grid-template-columns: 1fr 1fr 1fr;
        // [parity] (stripped @include)
    }

    // -- section3_images_location_2024_robin  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-section3_images_location_2024_robin {
        grid-column-start: 1;
    }

    // -- section3_images_location_2024_robin_2  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-section3_images_location_2024_robin_2 {
        grid-column-start: 2;
    }

    // -- section3_images_location_2024_robin_3  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-section3_images_location_2024_robin_3 {
        grid-column-start: 3;
    }

    // -- section3_2024_location_h3_robin  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-section3_2024_location_h3_robin {
        // [parity] (stripped @include)
        grid-row-start: 2;
        grid-column-start: 1;
        grid-column-end: 4;
    }

    // -- robin_make_it_fit  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_make_it_fit {
        width: stretch;
        max-width: q(600);
    }

    // -- robin_make_it_fit_2  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_make_it_fit_2 {
        object-fit: cover;
    }

    // -- robin_grid_table  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_grid_table {
        grid-column-end: 4;
        grid-column-start: 1;
    }

    // -- robin_2025_section_1_grid  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2025_section_1_grid {
        grid-row-start: 1;
        // [parity] (stripped @include)
        grid-column-end: 4;
        grid-column-start: 1;
    }

    // -- robin_2025_section_1_grid_text  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2025_section_1_grid_text {
        grid-row-start: 2;
        grid-column-start: 4;
        grid-column-end: 6;
    }

    // -- robin_2025_section_2_grid_text  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2025_section_2_grid_text {
        grid-row-start: 1;
        // [parity] (stripped @include)
        grid-column-start: 3;
        grid-column-end: 6;
    }

    // -- robin_2025_section_2_grid_text_title  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2025_section_2_grid_text_title {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
    }

    // -- robin_2025_section_2_grid_text_paragraaf  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_2025_section_2_grid_text_paragraaf {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
    }

    // -- robin_platform  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_platform {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    // -- robin_platform_table  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_platform_table {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-column-end: 4;
    }

    // -- robins_footer  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robins_footer {
        grid-column-start: 1;
        grid-column-end: 25;
    }

    // -- robins_container_footer  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robins_container_footer {
        display: grid;
        padding-left: q(288);
        padding-right: q(288);
        grid-template-columns: repeat(24, 1fr);
        grid-template-rows: repeat(24, 1fr);
    }

    // -- robin_footer_h1  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_footer_h1 {
        grid-column-start: 1;
        grid-column-end: 25;
        justify-self: center;
    }

    // -- robin_sec_footer  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_sec_footer {
        grid-column-start: 1;
        grid-column-end: 25;
        justify-items: center;
        grid-row-start: 2;
        grid-row-end: 25;
    }

    // -- robin_ahref_footer  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ahref_footer {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    // -- robin_sec_footerabc  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_sec_footerabc {
        padding-left: q(288);
        padding-right: q(288);
    }

    // -- robin_phone  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_phone {
        grid-column-start: 3;
        grid-column-end: 5;
        justify-self: center;
    }

    // -- robin_about_us  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_about_us {
        grid-column-start: 6;
        justify-self: right;
    }

    // -- top_robin_extra  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-top_robin_extra {
        margin-top: q(160);
    }

    // -- grid__24  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-grid__24 {
        display: grid;
        grid-template-columns: repeat(24, 1fr);
        grid-row-gap: q(320);
    }

    // -- robin_grid_table_adjuster  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_grid_table_adjuster {
        gap: q(48);
    }

    // -- robin_flex_adjuster  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_flex_adjuster {
        gap: q(48);
    }

    // -- robins_object_first  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robins_object_first {
        // [parity] (stripped @include)
    }

    // -- robin_ribbon--top  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon--top {
        display: grid;
        gap: 0;
        box-sizing: border-box;
        padding: q(10);
        pointer-events: all;
        background-color: var(--color_text_primary);
        color: var(--color_fill_primary);
        border-color: var(--color_fill_primary);
        border-style: solid;
        border-bottom-width: q(1);
        font-size: q(12);
        line-height: q(15);
        position: relative;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: q(20);
        grid-template-areas: 'ribbon_area--horizontal_left ribbon_area--horizontal_center ribbon_area--horizontal_right';
        align-items: center;
        align-content: center;
        width: 100%;
        height: q(40);

        a {
            text-decoration: none;
            outline: none;
            background-color: transparent;
            color: inherit;
            cursor: pointer;
        }
    }

    // -- robin_ribbon--bottom  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon--bottom {
        display: grid;
        gap: 0;
        box-sizing: border-box;
        padding: q(10);
        pointer-events: all;
        background-color: var(--color_text_primary);
        color: var(--color_fill_primary);
        border-color: var(--color_fill_primary);
        border-style: solid;
        border-top-width: q(1);
        font-size: q(12);
        line-height: q(15);
        position: relative;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: q(20);
        grid-template-areas: 'ribbon_area--horizontal_left ribbon_area--horizontal_center ribbon_area--horizontal_right';
        align-items: center;
        align-content: center;
        width: 100%;
        height: q(40);

        a {
            text-decoration: none;
            outline: none;
            background-color: transparent;
            color: inherit;
            cursor: pointer;
        }
    }

    // -- robin_ribbon__slot--horizontal_left  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__slot--horizontal_left {
        grid-area: ribbon_area--horizontal_left;
        display: grid;
        justify-content: start;
        gap: q(2);
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
        height: 100%;
        justify-items: start;
        align-items: center;
        align-self: center;
        white-space: nowrap;
        grid-auto-flow: column;
        grid-auto-columns: min-content;
        grid-template-rows: q(20);
        height: q(20);
    }

    // -- robin_ribbon__slot--horizontal_right  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__slot--horizontal_right {
        grid-area: ribbon_area--horizontal_right;
        display: grid;
        justify-content: end;
        gap: q(2);
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
        height: 100%;
        justify-items: end;
        align-items: center;
        align-self: center;
        white-space: nowrap;
        grid-auto-flow: column;
        grid-auto-columns: min-content;
        grid-template-rows: q(20);
        height: q(20);
    }

    // -- robin_ribbon__slot--horizontal_center  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__slot--horizontal_center {
        grid-area: ribbon_area--horizontal_center;
        display: grid;
        justify-content: center;
        gap: q(2);
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
        height: 100%;
        justify-items: center;
        align-items: center;
        align-self: center;
        white-space: nowrap;
        grid-auto-flow: column;
        grid-auto-columns: min-content;
        grid-template-rows: q(20);
        height: q(20);
    }

    // -- robin_ribbon__title  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__title {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        gap: q(8);
        margin: 0;
        font-size: inherit;
        font-weight: normal;
    }

    // -- robin_ribbon__title__image  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__title__image {
        display: flex;
        align-items: center;

        img {
            height: q(20);
            width: auto;
        }
    }

    // -- robin_ribbon__title__text  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__title__text {
        font-size: q(12);
        line-height: 1;
    }

    // -- robin_ribbon__nav  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__nav {
        display: grid;
        align-items: center;
    }

    // -- robin_ribbon__nav__list  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__nav__list {
        display: flex;
        gap: q(16);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    // -- robin_ribbon__nav__list__item  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__nav__list__item {
        white-space: nowrap;
    }

    // -- robin_ribbon__nav__list__item__text  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-robin_ribbon__nav__list__item__text {
        font-size: q(12);
    }

    // -- footer__inner  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__inner {
        max-width: q(1200);
        margin: 0 auto;
    }

    // -- footer__brand  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__brand {
        margin-bottom: q(48);
    }

    // -- footer__logo  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__logo {
        font-size: q(40);
        font-weight: 200;
        text-transform: uppercase;
        margin: 0 0 q(8);
    }

    // -- footer__tagline  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__tagline {
        margin: 0;
        opacity: 0.7;
        font-size: q(18);
    }

    // -- footer__columns  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__columns {
        display: flex;
        flex-wrap: wrap;
        gap: q(32);
    }

    // -- footer__column  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__column {
        flex: 1 1 q(200);
        min-width: q(200);
    }

    // -- footer__column-title  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__column-title {
        font-size: q(14);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0 0 q(16);
        opacity: 0.6;
    }

    // -- footer__nav-list  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__nav-list {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            margin-bottom: q(8);
        }

        a {
            opacity: 0.8;
            transition: opacity 0.2s ease;

            &:hover {
                opacity: 1;
            }
        }
    }

    // -- footer__address  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__address {
        font-style: normal;

        a {
            display: block;
            margin-bottom: q(8);
        }

        p {
            margin: 0;
            opacity: 0.7;
        }
    }

    // -- footer__about-text  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__about-text {
        font-size: q(14);
        line-height: 1.5;
        opacity: 0.7;
        margin: 0 0 q(16);
    }

    // -- footer__social  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__social {
        display: flex;
        gap: q(16);

        a {
            opacity: 0.7;
            transition: opacity 0.2s ease;

            &:hover {
                opacity: 1;
            }
        }
    }

    // -- footer__bottom  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: q(16);
        padding: q(16) q(32);
        font-size: q(12);
        border-top: q(1) solid currentColor;
        opacity: 0.8;

        a {
            text-decoration: none;
            color: inherit;

            &:hover {
                opacity: 1;
            }
        }
    }

    // -- footer__separator  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-footer__separator {
        margin: 0 q(8);
        opacity: 0.5;
    }

    // -- ribbon__title__image  (from site-demosphere_nl/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-ribbon__title__image img {
        height: q(30);
    }

    // -- text-tertiary  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-text-tertiary {
      color: var(--color-text-tertiary);
    }

    // -- text-success  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-text-success {
      color: var(--color-success);
    }

    // -- text-warning  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-text-warning {
      color: var(--color-warning);
    }

    // -- text-error  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-text-error {
      color: var(--color-error);
    }

    // -- leading-snug  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-leading-snug {
      line-height: 1.375;
    }

    // -- leading-loose  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-leading-loose {
      line-height: 2;
    }

    // -- gradient-text  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-gradient-text {
        // [parity] (stripped @include)
    }

    // -- btn--primary  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--primary {
      background: var(--color-accent);
      color: white;
      border-color: var(--color-accent);
      box-shadow: 0 q(4) q(6) q(-1) rgba(59, 130, 246, 0.2);

      &:hover:not(:disabled) {
        background: var(--color-accent-light);
        border-color: var(--color-accent-light);
        box-shadow: 0 q(10) q(15) q(-3) rgba(59, 130, 246, 0.3);
        transform: translateY(q(-2));
      }

      &:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 q(4) q(6) q(-1) rgba(59, 130, 246, 0.2);
      }
    }

    // -- btn--outline  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--outline {
      background: transparent;
      color: var(--color-text-primary);
      border-color: var(--color-border);

      &:hover:not(:disabled) {
        border-color: var(--color-accent);
        color: var(--color-accent);
        background: rgba(59, 130, 246, 0.05);
      }

      &:active:not(:disabled) {
        background: rgba(59, 130, 246, 0.1);
      }
    }

    // -- btn--secondary  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--secondary {
      background: var(--color-bg-secondary);
      color: var(--color-text-primary);
      border-color: var(--color-border);

      &:hover:not(:disabled) {
        background: var(--color-bg-tertiary);
        border-color: var(--color-accent);
      }

      &:active:not(:disabled) {
        background: var(--color-bg-tertiary);
      }
    }

    // -- btn--ghost  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--ghost {
      background: transparent;
      color: var(--color-accent);
      border-color: transparent;

      &:hover:not(:disabled) {
        background: rgba(59, 130, 246, 0.1);
        color: var(--color-accent-light);
      }

      &:active:not(:disabled) {
        background: rgba(59, 130, 246, 0.15);
      }
    }

    // -- btn--success  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--success {
      background: var(--color-success);
      color: white;
      border-color: var(--color-success);

      &:hover:not(:disabled) {
        opacity: 0.9;
        transform: translateY(q(-2));
      }
    }

    // -- btn--warning  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--warning {
      background: var(--color-warning);
      color: white;
      border-color: var(--color-warning);

      &:hover:not(:disabled) {
        opacity: 0.9;
        transform: translateY(q(-2));
      }
    }

    // -- btn--error  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--error {
      background: var(--color-error);
      color: white;
      border-color: var(--color-error);

      &:hover:not(:disabled) {
        opacity: 0.9;
        transform: translateY(q(-2));
      }
    }

    // -- btn--sm  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--sm {
      padding: var(--spacing-xs) var(--spacing-sm);
      font-size: q(14);
      border-radius: var(--radius-sm);
    }

    // -- btn--md  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--md {
      padding: var(--spacing-sm) var(--spacing-md);
      font-size: q(15);
    }

    // -- btn--lg  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--lg {
      padding: var(--spacing-md) var(--spacing-lg);
      font-size: q(16);
      border-radius: var(--radius-lg);
    }

    // -- btn--xl  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--xl {
      padding: var(--spacing-lg) var(--spacing-xl);
      font-size: q(18);
      border-radius: var(--radius-lg);
    }

    // -- btn--block  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--block {
      width: 100%;
      display: flex;
    }

    // -- btn--fullwidth  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--fullwidth {
      width: 100%;
    }

    // -- btn-group  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn-group {
      display: flex;
      gap: 0;

      .ss-c-btn {
        border-radius: 0;
        flex: 1;

        &:first-child {
          border-top-left-radius: var(--radius-md);
          border-bottom-left-radius: var(--radius-md);
        }

        &:last-child {
          border-top-right-radius: var(--radius-md);
          border-bottom-right-radius: var(--radius-md);
        }

        &:not(:last-child) {
          border-right: q(1) solid var(--color-border);
        }
      }

      // [parity] (stripped @include block)

    }

    // -- btn--icon  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--icon {
      padding: var(--spacing-sm);
      border-radius: var(--radius-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;

      &.ss-c-btn--sm {
        padding: q(4);
      }

      &.ss-c-btn--lg {
        padding: var(--spacing-md);
      }
    }

    // -- btn--animated  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--animated {
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        // [parity] (stripped @include block)

      }

      &:active::before {
        width: q(300);
        height: q(300);
      }
    }

    // -- btn-spinner  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn-spinner {
      display: inline-block;
      width: 1em;
      height: 1em;
      border: q(2) solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      // [parity] (stripped @include block)

    }

    // -- btn-loading  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn-loading {
      .ss-c-btn-label {
        visibility: hidden;
        position: absolute;
      }

      .ss-c-btn-spinner {
        display: inline-block;
      }
    }

    // -- card--elevated  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-card--elevated {
        // [parity] (stripped @include)
      background: var(--color-bg-secondary);

      &:hover {
        // [parity] (stripped @include)
      }
    }

    // -- card--interactive  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-card--interactive {
      cursor: pointer;

      &:hover {
        transform: translateY(q(-4));
      }

      &:active {
        transform: translateY(q(-2));
      }
    }

    // -- card--accent  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-card--accent {
      border-color: var(--color-accent);
      background: rgba(59, 130, 246, 0.05);

      &:hover {
        background: rgba(59, 130, 246, 0.1);
      }
    }

    // -- card-header  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-card-header {
      padding: var(--spacing-md) var(--spacing-md) 0;
      margin-bottom: var(--spacing-md);
      border-bottom: q(1) solid var(--color-border);

      h3, h4 {
        margin-bottom: 0;
      }
    }

    // -- card-body  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-card-body {
      padding: var(--spacing-md);
    }

    // -- card-footer  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-card-footer {
      padding: var(--spacing-md) var(--spacing-md) 0;
      margin-top: var(--spacing-md);
      border-top: q(1) solid var(--color-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-md);
    }

    // -- principle-card  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-principle-card {
      padding: var(--spacing-lg);
      background: var(--color-bg-tertiary);
      border: q(1) solid var(--color-border);
      border-radius: var(--radius-lg);
        // [parity] (stripped @include)
      &:hover {
        border-color: var(--color-accent);
        background: rgba(59, 130, 246, 0.03);
      }

      &__title {
        font-size: q(18);
        margin-bottom: var(--spacing-sm);
        color: var(--color-text-primary);
      }

      &__text {
        font-size: q(15);
        color: var(--color-text-secondary);
      }
    }

    // -- feature-block  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-feature-block {
      padding: var(--spacing-lg);
      background: var(--color-bg-primary);
      border: q(1) solid var(--color-border);
      border-radius: var(--radius-lg);
        // [parity] (stripped @include)
      &:hover {
        border-color: var(--color-accent);
        // [parity] (stripped @include)
      }

      &__icon {
        width: q(48);
        height: q(48);
        margin-bottom: var(--spacing-md);
        color: var(--color-accent);
      }

      &__title {
        font-size: q(18);
        margin-bottom: var(--spacing-sm);
        color: var(--color-text-primary);
      }

      &__text {
        font-size: q(15);
        color: var(--color-text-secondary);
      }
    }

    // -- doc-card  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-doc-card {
      display: block;
      padding: var(--spacing-md);
      background: var(--color-bg-primary);
      border: q(1) solid var(--color-border);
      border-radius: var(--radius-md);
      text-decoration: none;
        // [parity] (stripped @include)
        // [parity] (stripped @include)
      &:hover {
        border-color: var(--color-accent);
        background: rgba(59, 130, 246, 0.03);
        // [parity] (stripped @include)
        .ss-c-doc-card__title {
          color: var(--color-accent);
        }
      }

      &__title {
        font-size: q(16);
        font-weight: 600;
        margin-bottom: var(--spacing-xs);
        color: var(--color-text-primary);
        // [parity] (stripped @include)
      }

      &__desc {
        font-size: q(13);
        color: var(--color-text-tertiary);
      }
    }

    // -- team-member-card  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-team-member-card {
      text-align: center;

      &__image {
        width: 100%;
        aspect-ratio: 1;
        border-radius: var(--radius-lg);
        object-fit: cover;
        margin-bottom: var(--spacing-md);
      }

      &__name {
        font-size: q(18);
        font-weight: 600;
        margin-bottom: var(--spacing-xs);
        color: var(--color-text-primary);
      }

      &__role {
        font-size: q(14);
        color: var(--color-accent);
        margin-bottom: var(--spacing-sm);
      }

      &__bio {
        font-size: q(14);
        color: var(--color-text-secondary);
      }
    }

    // -- testimonial-card  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-testimonial-card {
      padding: var(--spacing-lg);
      background: var(--color-bg-tertiary);
      border: q(1) solid var(--color-border);
      border-radius: var(--radius-lg);
      border-left: q(4) solid var(--color-accent);

      &__quote {
        font-size: q(16);
        font-style: italic;
        margin-bottom: var(--spacing-md);
        color: var(--color-text-primary);

        &::before {
          content: '"';
          font-size: 2em;
          color: var(--color-accent);
          opacity: 0.3;
          line-height: 0.5;
          vertical-align: -0.4em;
          margin-right: q(4);
        }
      }

      &__author {
        font-weight: 600;
        color: var(--color-text-primary);
      }

      &__title {
        font-size: q(14);
        color: var(--color-text-secondary);
      }

      &__rating {
        display: flex;
        gap: q(4);
        margin-bottom: var(--spacing-sm);

        .ss-c-star {
          color: var(--color-warning);
        }
      }
    }

    // -- stats-card  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-stats-card {
      text-align: center;
      padding: var(--spacing-lg);

      &__value {
        font-size: clamp(q(24), 5vw, q(40));
        font-weight: 700;
        color: var(--color-accent);
        margin-bottom: var(--spacing-xs);
      }

      &__label {
        font-size: q(14);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    }

    // -- cards-grid  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-cards-grid {
      display: grid;
      gap: var(--spacing-lg);

      &--2 {
        grid-template-columns: repeat(2, 1fr);

        // [parity] (stripped @include block)

      }

      &--3 {
        grid-template-columns: repeat(3, 1fr);

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

      }

      &--4 {
        grid-template-columns: repeat(4, 1fr);

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

      }
    }

    // -- footer__grid  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__grid {
      display: grid;
      grid-template-columns: 2fr repeat(3, 1fr);
      gap: var(--spacing-xl);
      margin-bottom: var(--spacing-xl);

      // [parity] (stripped @include block)


      // [parity] (stripped @include block)

    }

    // -- footer__heading  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__heading {
      font-size: q(12);
      font-weight: 600;
      color: var(--color-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--spacing-md);
    }

    // -- footer__list  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }

    // -- footer__link  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__link {
      display: block;
      padding: q(4) 0;
      font-size: q(14);
      color: var(--color-text-secondary);
      text-decoration: none;
        // [parity] (stripped @include)
        // [parity] (stripped @include)
      &:hover {
        color: var(--color-text-primary);
        text-decoration: underline;
      }
    }

    // -- footer__socials  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__socials {
      display: flex;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-md);
    }

    // -- footer__social-link  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: q(36);
      height: q(36);
      background: var(--color-bg-tertiary);
      border: q(1) solid var(--color-border);
      border-radius: var(--radius-md);
      color: var(--color-text-secondary);
        // [parity] (stripped @include)
        // [parity] (stripped @include)
      &:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: white;
        transform: translateY(q(-2));
      }

      svg {
        width: q(18);
        height: q(18);
      }
    }

    // -- footer__policies  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__policies {
      display: flex;
      gap: var(--spacing-md);
      list-style: none;

      // [parity] (stripped @include block)


      a {
        font-size: q(13);
        color: var(--color-text-secondary);
        text-decoration: none;
        // [parity] (stripped @include)
        &:hover {
          color: var(--color-accent);
          text-decoration: underline;
        }
      }
    }

    // -- footer__newsletter  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__newsletter {
      margin-bottom: var(--spacing-md);
    }

    // -- footer__newsletter-form  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__newsletter-form {
      display: flex;
      gap: var(--spacing-sm);

      // [parity] (stripped @include block)

    }

    // -- footer__newsletter-input  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__newsletter-input {
      flex: 1;
      padding: var(--spacing-sm) var(--spacing-md);
      background: var(--color-bg-tertiary);
      border: q(1) solid var(--color-border);
      color: var(--color-text-primary);
      border-radius: var(--radius-md);
      font-size: q(14);
        // [parity] (stripped @include)
      &:focus {
        outline: none;
        border-color: var(--color-accent);
        background: var(--color-bg-primary);
      }

      &::placeholder {
        color: var(--color-text-tertiary);
      }
    }

    // -- footer__back-to-top  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__back-to-top {
      position: fixed;
      bottom: var(--spacing-lg);
      right: var(--spacing-lg);
      display: none;
      align-items: center;
      justify-content: center;
      width: q(40);
      height: q(40);
      background: var(--color-accent);
      color: white;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      z-index: var(--z-fixed);
        // [parity] (stripped @include)
        // [parity] (stripped @include)
      &.ss-c-visible {
        display: flex;
      }

      &:hover {
        background: var(--color-accent-light);
        transform: translateY(q(-4));
      }

      svg {
        width: q(20);
        height: q(20);
      }
    }

    // -- footer__divider  (from site-geoid_org/src/static/scss/components/_footer.scss) --
    .ss-c-footer__divider {
      height: q(1);
      background: var(--color-border);
      margin: var(--spacing-xl) 0;
    }

    // -- globe-wireframe  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-wireframe {
      width: 100%;
      max-width: q(400);
      aspect-ratio: 1;
    }

    // -- globe-svg  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-svg {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 q(10) q(30) rgba(59, 130, 246, 0.1));
    }

    // -- globe-outline  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-outline {
      fill: none;
      stroke: var(--color-border);
      stroke-width: 1.5;
    }

    // -- globe-line  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-line {
      fill: none;
      stroke: var(--color-border);
      stroke-width: 0.75;
      opacity: 0.6;

      &--vertical {
        transform-origin: center;
      }
    }

    // -- globe-axis  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-axis {
      stroke: var(--color-border-light);
      stroke-width: 0.5;
      stroke-dasharray: 4 4;
      opacity: 0.4;
    }

    // -- globe-cell  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-cell {
      fill: rgba(59, 130, 246, 0.1);
      stroke: var(--color-accent);
      stroke-width: 1;
      opacity: 0.8;
      // [parity] (stripped @include block)


      &--accent {
        fill: rgba(59, 130, 246, 0.25);
        stroke-width: 1.5;
        opacity: 1;
      }

      &:hover {
        opacity: 1;
        fill: rgba(59, 130, 246, 0.35);
      }
    }

    // -- globe-animated  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-animated {
      // [parity] (stripped @include block)


      &--slow {
        // [parity] (stripped @include block)

      }

      &--fast {
        // [parity] (stripped @include block)

      }

      // Pause animation on hover
      &:hover {
        // [parity] (stripped @include block)

      }
    }

    // -- globe-container  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-container {
      perspective: q(1000);

      .ss-c-globe-svg {
        transform-style: preserve-3d;
      }
    }

    // -- globe-point  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-point {
      fill: var(--color-accent-green);

      &--pulse {
        // [parity] (stripped @include block)

      }
    }

    // -- research-visual  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-research-visual {
      width: 100%;
      height: q(300);
      background: var(--color-bg-secondary);
      border: q(1) solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--spacing-md);
      display: flex;
      align-items: center;
      justify-content: center;

      canvas {
        max-width: 100%;
        max-height: 100%;
      }
    }

    // -- svg-icon  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-svg-icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;

      &--sm {
        width: q(16);
        height: q(16);
      }

      &--md {
        width: q(24);
        height: q(24);
      }

      &--lg {
        width: q(32);
        height: q(32);
      }

      &--xl {
        width: q(48);
        height: q(48);
      }

      // Colored variants
      &--primary {
        color: var(--color-accent);
      }

      &--success {
        color: var(--color-success);
      }

      &--warning {
        color: var(--color-warning);
      }

      &--error {
        color: var(--color-error);
      }
    }

    // -- illustration  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-illustration {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(0 q(10) q(20) rgba(0, 0, 0, 0.2));

      &--centered {
        margin: 0 auto;
        display: block;
      }

      &--shadow-md {
        filter: drop-shadow(0 q(4) q(6) rgba(0, 0, 0, 0.1));
      }

      &--shadow-lg {
        filter: drop-shadow(0 q(10) q(15) rgba(0, 0, 0, 0.1));
      }
    }

    // -- globe-pattern  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-globe-pattern {
      background-image:
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
      background-size: 100% 100%;
      background-attachment: fixed;
    }

    // -- header__container  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--spacing-lg);
      height: 100%;
        // [parity] (stripped @include)
    }

    // -- header__logo  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      gap: var(--spacing-sm);
        // [parity] (stripped @include)
      &:hover {
        opacity: 0.8;
      }

      &:focus-visible {
        // [parity] (stripped @include)
      }
    }

    // -- header__logo-icon  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__logo-icon {
      width: q(32);
      height: q(32);
      flex-shrink: 0;
    }

    // -- header__logo-text  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__logo-text {
      font-size: q(20);
      font-weight: 700;
      color: var(--color-text-primary);
      letter-spacing: -0.02em;
    }

    // -- header__nav  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__nav {
      // [parity] (stripped @include block)

    }

    // -- header__nav-list  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__nav-list {
      display: flex;
      gap: var(--spacing-md);
      list-style: none;
    }

    // -- header__nav-link  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__nav-link {
      color: var(--color-text-secondary);
      font-size: q(14);
      font-weight: 500;
      padding: var(--spacing-xs) var(--spacing-sm);
        // [parity] (stripped @include)
        // [parity] (stripped @include)
      position: relative;

      &:hover {
        color: var(--color-text-primary);
      }

      &.active {
        color: var(--color-accent);

        &::after {
          content: '';
          position: absolute;
          bottom: q(-2);
          left: 0;
          right: 0;
          height: q(2);
          background: var(--color-accent);
          border-radius: q(1);
        }
      }
    }

    // -- header__menu-toggle  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__menu-toggle {
      display: none;
      flex-direction: column;
      gap: q(5);
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--spacing-xs);
        // [parity] (stripped @include)
      // [parity] (stripped @include block)


      &[aria-expanded="true"] {
        .ss-c-header__menu-bar {
          &:nth-child(1) {
            transform: rotate(45deg) translateY(q(12));
          }

          &:nth-child(2) {
            opacity: 0;
          }

          &:nth-child(3) {
            transform: rotate(-45deg) translateY(q(-12));
          }
        }
      }
    }

    // -- header__menu-bar  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__menu-bar {
      width: q(24);
      height: q(2);
      background: var(--color-text-primary);
      // [parity] (stripped @include block)

      border-radius: q(1);
    }

    // -- header__mobile-menu  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__mobile-menu {
      display: none;
      position: absolute;
      top: var(--header-height);
      left: 0;
      right: 0;
      background: var(--color-bg-secondary);
      border-bottom: q(1) solid var(--color-border);
      padding: var(--spacing-md);
      z-index: calc(var(--z-fixed) - 1);

      // [parity] (stripped @include block)

    }

    // -- header__mobile-nav-list  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__mobile-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }

    // -- header__mobile-nav-link  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__mobile-nav-link {
      display: block;
      padding: var(--spacing-sm) var(--spacing-md);
      color: var(--color-text-secondary);
      text-decoration: none;
      border-radius: var(--radius-md);
        // [parity] (stripped @include)
        // [parity] (stripped @include)
      &:hover {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
      }

      &.active {
        background: rgba(59, 130, 246, 0.1);
        color: var(--color-accent);
        font-weight: 500;
      }
    }

    // -- header__cta  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__cta {
      display: flex;
      gap: var(--spacing-sm);
      align-items: center;

      // [parity] (stripped @include block)

    }

    // -- header--sticky  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header--sticky {
      position: sticky;
      top: 0;
    }

    // -- header__search  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__search {
      // [parity] (stripped @include block)

    }

    // -- header__search-input  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__search-input {
      background: var(--color-bg-tertiary);
      border: q(1) solid var(--color-border);
      color: var(--color-text-primary);
      padding: var(--spacing-xs) var(--spacing-sm);
      border-radius: var(--radius-md);
      font-size: q(14);
        // [parity] (stripped @include)
      &:focus {
        outline: none;
        border-color: var(--color-accent);
        background: var(--color-bg-primary);
      }

      &::placeholder {
        color: var(--color-text-tertiary);
      }
    }

    // -- header__breadcrumb  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__breadcrumb {
      font-size: q(12);
      color: var(--color-text-tertiary);
      padding: q(4) var(--spacing-md);

      a {
        color: var(--color-accent);

        &:hover {
          text-decoration: underline;
        }
      }
    }

    // -- header__notification  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__notification {
      position: relative;

      .ss-c-badge {
        position: absolute;
        top: q(-4);
        right: q(-4);
        background: var(--color-error);
        color: white;
        font-size: q(10.4);
        font-weight: 700;
        min-width: q(18);
        height: q(18);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    // -- table-wrapper  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-table-wrapper {
      overflow-x: auto;
      margin-bottom: var(--spacing-lg);
      border-radius: var(--radius-md);
      border: q(1) solid var(--color-border);
    }

    // -- data-table  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: q(15);

      th, td {
        padding: var(--spacing-sm) var(--spacing-md);
        text-align: left;
        border-bottom: q(1) solid var(--color-border);
      }

      th {
        font-weight: 600;
        color: var(--color-text-primary);
        background: var(--color-bg-secondary);
        position: sticky;
        top: 0;
        z-index: 10;
      }

      td {
        color: var(--color-text-secondary);
      }

      tbody tr {
        // [parity] (stripped @include block)


        &:hover {
          background: rgba(59, 130, 246, 0.05);
        }

        &:last-child td {
          border-bottom: none;
        }
      }

      // Striped rows
      &--striped tbody tr:nth-child(odd) {
        background: rgba(59, 130, 246, 0.02);
      }

      // Highlighted cells
      .ss-c-table-highlight {
        color: var(--color-accent);
        font-weight: 500;
      }

      // Success/Error states
      .ss-c-table-success {
        color: var(--color-success);
      }

      .ss-c-table-error {
        color: var(--color-error);
      }

      .ss-c-table-warning {
        color: var(--color-warning);
      }
    }

    // -- table-responsive  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-table-responsive {
      // [parity] (stripped @include block)

    }

    // -- code-example  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-code-example {
      margin-bottom: var(--spacing-lg);

      &__title {
        font-size: q(16);
        margin-bottom: var(--spacing-sm);
        font-weight: 600;
      }
    }


    // -- code-copy-btn  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-code-copy-btn {
      position: absolute;
      top: var(--spacing-sm);
      right: var(--spacing-sm);
      padding: q(4) q(8);
      background: var(--color-bg-tertiary);
      border: q(1) solid var(--color-border);
      color: var(--color-text-secondary);
      border-radius: var(--radius-sm);
      font-size: q(12);
      cursor: pointer;
        // [parity] (stripped @include)
        // [parity] (stripped @include)
      &:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: white;
      }
    }

    // -- research-list  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-research-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-lg);
    }

    // -- research-item  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-research-item {
      padding-bottom: var(--spacing-lg);
      border-bottom: q(1) solid var(--color-border);

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      &__title {
        font-size: q(18);
        margin-bottom: var(--spacing-sm);
        color: var(--color-text-primary);
        font-weight: 600;
      }

      &__authors {
        font-size: q(14);
        color: var(--color-text-secondary);
        margin-bottom: var(--spacing-sm);
        font-style: italic;
      }

      &__abstract {
        font-size: q(15);
        margin-bottom: var(--spacing-sm);
        line-height: 1.7;
      }

      &__meta {
        font-size: q(13);
        color: var(--color-text-tertiary);
        margin-bottom: var(--spacing-sm);
      }

      &__link {
        font-size: q(14);
        font-weight: 500;
        // [parity] (stripped @include)
        &:hover {
          text-decoration: underline;
        }
      }
    }

    // -- contact-note  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-contact-note {
      padding: var(--spacing-md);
      background: var(--color-bg-secondary);
      border-radius: var(--radius-md);
      border-left: q(4) solid var(--color-accent);

      p {
        font-size: q(15);
        margin-bottom: 0;
      }
    }

    // -- feature-list  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-feature-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);

      &--grid {
        // [parity] (stripped @include block)

      }
    }

    // -- feature-list-item  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-feature-list-item {
      display: flex;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
      border-radius: var(--radius-md);
        // [parity] (stripped @include)
      &:hover {
        background: var(--color-bg-secondary);
      }

      &__icon {
        flex-shrink: 0;
        width: q(32);
        height: q(32);
        color: var(--color-accent);
      }

      &__content {
        flex: 1;
      }

      &__title {
        font-weight: 600;
        margin-bottom: q(4);
      }

      &__description {
        font-size: q(14);
        color: var(--color-text-secondary);
      }
    }

    // -- about-mission  (from site-geoid_org/src/static/scss/index.scss) --
    .ss-c-about-mission {
      font-size: q(20);
      font-weight: 500;
      color: var(--color-text-primary);
      margin-bottom: var(--spacing-lg);
      font-style: italic;
    }

    // -- badge  (from site-geoid_org/src/static/scss/index.scss) --
    // Scoped under .ss-c-geoid: bare selector used undefined --color-accent
    // (transparent bg) + white text, rendering every badge invisible.
    .ss-c-geoid .ss-c-badge {
      display: inline-block;
      padding: var(--spacing-xs) var(--spacing-sm);
      background: var(--color-accent);
      color: white;
      border-radius: var(--radius-full);
      font-size: q(12);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;

      &--secondary {
        background: var(--color-bg-secondary);
        color: var(--color-text-primary);
        border: q(1) solid var(--color-border);
      }

      &--success {
        background: var(--color-success);
      }

      &--warning {
        background: var(--color-warning);
      }

      &--error {
        background: var(--color-error);
      }
    }

    // -- pill  (from site-geoid_org/src/static/scss/index.scss) --
    .ss-c-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-sm) var(--spacing-md);
      background: var(--color-bg-secondary);
      border: q(1) solid var(--color-border);
      border-radius: var(--radius-full);
      font-size: q(14);
        // [parity] (stripped @include)
      &:hover {
        border-color: var(--color-accent);
        background: rgba(59, 130, 246, 0.05);
      }
    }

    // -- progress  (from site-geoid_org/src/static/scss/index.scss) --
    .ss-c-progress {
      width: 100%;
      height: q(4);
      background: var(--color-bg-secondary);
      border-radius: var(--radius-full);
      overflow: hidden;
      margin-bottom: var(--spacing-md);
    }

    // -- progress__bar  (from site-geoid_org/src/static/scss/index.scss) --
    .ss-c-progress__bar {
      height: 100%;
      background: var(--color-accent);
      border-radius: var(--radius-full);
      // [parity] (stripped @include block)


      &--success {
        background: var(--color-success);
      }

      &--warning {
        background: var(--color-warning);
      }

      &--error {
        background: var(--color-error);
      }
    }

    // -- alert  (from site-geoid_org/src/static/scss/index.scss) --
    .ss-c-alert {
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      border-left: q(4) solid var(--color-info);
      background: rgba(59, 130, 246, 0.1);
      color: var(--color-text-primary);
      margin-bottom: var(--spacing-md);

      &__title {
        font-weight: 600;
        margin-bottom: var(--spacing-xs);
      }

      &--success {
        border-left-color: var(--color-success);
        background: rgba(16, 185, 129, 0.1);
      }

      &--warning {
        border-left-color: var(--color-warning);
        background: rgba(245, 158, 11, 0.1);
      }

      &--error {
        border-left-color: var(--color-error);
        background: rgba(239, 68, 68, 0.1);
      }
    }

    // -- divider  (from site-geoid_org/src/static/scss/index.scss) --
    .ss-c-divider {
      height: q(1);
      background: var(--color-border);
      margin: var(--spacing-lg) 0;

      &--spaced {
        margin: var(--spacing-xl) 0;
      }

      &--text {
        display: flex;
        align-items: center;

        &::before,
        &::after {
          content: '';
          flex: 1;
          height: q(1);
          background: var(--color-border);
        }

        span {
          padding: 0 var(--spacing-md);
          font-size: q(14);
          color: var(--color-text-secondary);
        }
      }
    }

    // -- skeleton  (from site-geoid_org/src/static/scss/index.scss) --
    .ss-c-skeleton {
      background: linear-gradient(
        90deg,
        var(--color-bg-secondary) 0%,
        var(--color-bg-tertiary) 50%,
        var(--color-bg-secondary) 100%
      );
      background-size: 200% 100%;
      // [parity] (stripped @include block)

    }

    // -- columns  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-columns {
      display: grid;
      gap: var(--spacing-lg);

      &--2 {
        grid-template-columns: repeat(2, 1fr);

        // [parity] (stripped @include block)

      }

      &--3 {
        grid-template-columns: repeat(3, 1fr);

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

      }

      &--1-2 {
        grid-template-columns: 1fr 2fr;

        // [parity] (stripped @include block)

      }

      &--2-1 {
        grid-template-columns: 2fr 1fr;

        // [parity] (stripped @include block)

      }
    }

    // -- column-item  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-column-item {
      &__title {
        font-size: q(18);
        margin-bottom: var(--spacing-sm);
        color: var(--color-text-primary);
        font-weight: 600;
      }

      p {
        font-size: q(15);
        line-height: 1.7;
      }
    }

    // -- row  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-row {
      display: flex;
      gap: var(--spacing-lg);

      &--gap-sm {
        gap: var(--spacing-sm);
      }

      &--gap-md {
        gap: var(--spacing-md);
      }

      &--gap-xl {
        gap: var(--spacing-xl);
      }

      &--center {
        align-items: center;
      }

      &--start {
        align-items: flex-start;
      }

      &--end {
        align-items: flex-end;
      }

      &--wrap {
        flex-wrap: wrap;
      }

      // [parity] (stripped @include block)

    }

    // -- stack  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-stack {
      display: flex;
      flex-direction: column;

      &--gap-xs {
        gap: var(--spacing-xs);
      }

      &--gap-sm {
        gap: var(--spacing-sm);
      }

      &--gap-md {
        gap: var(--spacing-md);
      }

      &--gap-lg {
        gap: var(--spacing-lg);
      }

      &--center {
        align-items: center;
      }
    }

    // -- aspect-box  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-aspect-box {
        // [parity] (stripped @include)
      &--video {
        // [parity] (stripped @include)
      }

      &--square {
        // [parity] (stripped @include)
      }

      &--portrait {
        // [parity] (stripped @include)
      }

      &--16-10 {
        // [parity] (stripped @include)
      }

      img, iframe, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    // -- doc-grid  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-doc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-md);

      // [parity] (stripped @include block)


      // [parity] (stripped @include block)

    }

    // -- architecture-diagram  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-architecture-diagram {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-xs);
      max-width: q(500);
      margin: 0 auto;
    }

    // -- architecture-layer  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-architecture-layer {
      width: 100%;
      padding: var(--spacing-md) var(--spacing-lg);
      background: var(--color-bg-tertiary);
      border: q(1) solid var(--color-border);
      border-radius: var(--radius-md);
      text-align: center;
        // [parity] (stripped @include)
      &--highlight {
        border-color: var(--color-accent);
        background: rgba(59, 130, 246, 0.1);
        box-shadow: 0 0 q(20) rgba(59, 130, 246, 0.2);
      }

      &__label {
        display: block;
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: q(4);
      }

      &__desc {
        font-size: q(13);
        color: var(--color-text-tertiary);
      }
    }

    // -- architecture-connector  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-architecture-connector {
      padding: var(--spacing-xs) 0;
      display: flex;
      justify-content: center;
    }

    // -- architecture-arrow  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-architecture-arrow {
      width: q(24);
      height: q(24);
      color: var(--color-border-light);
    }

    // -- hero__container  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__container {
      max-width: var(--max-width);
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-xl);
      align-items: center;

      // [parity] (stripped @include block)

    }

    // -- hero__content  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__content {
      z-index: 10;

      // [parity] (stripped @include block)

    }

    // -- hero__title  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__title {
      font-size: clamp(q(48), 8vw, q(80));
      font-weight: 700;
      letter-spacing: -0.04em;
      margin-bottom: var(--spacing-md);
      line-height: 1.1;
        // [parity] (stripped @include)
    }

    // -- hero__subtitle  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__subtitle {
      font-size: clamp(q(18), 2vw, q(22));
      color: var(--color-accent);
      margin-bottom: var(--spacing-lg);
      font-weight: 500;
    }

    // -- hero__body  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__body {
      margin-bottom: var(--spacing-lg);

      p {
        font-size: q(17);
        line-height: 1.8;

        // [parity] (stripped @include block)

      }
    }

    // -- hero__actions  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__actions {
      display: flex;
      gap: var(--spacing-sm);
      flex-wrap: wrap;

      // [parity] (stripped @include block)


      // [parity] (stripped @include block)

    }

    // -- hero__visual  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__visual {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: q(300);

      // [parity] (stripped @include block)


      // [parity] (stripped @include block)

    }

    // -- hero--bg  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--bg {
      position: relative;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 11, 13, 0.6);
        z-index: 1;
      }

      .ss-c-hero__container {
        position: relative;
        z-index: 2;
      }
    }

    // -- hero--dark  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--dark {
      background: var(--color-bg-primary);
    }

    // -- hero--light  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--light {
      background: var(--color-bg-secondary);
    }

    // -- hero--gradient  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--gradient {
      background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    }

    // -- hero--split  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--split {
      .ss-c-hero__container {
        // [parity] (stripped @include block)

      }
    }

    // -- hero--centered  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--centered {
      text-align: center;

      .ss-c-hero__container {
        grid-template-columns: 1fr;

        .ss-c-hero__title {
          margin: 0 auto;
        }

        .ss-c-hero__subtitle {
          margin: 0 auto;
        }

        .ss-c-hero__actions {
          justify-content: center;
        }
      }
    }

    // -- hero-gradient-bg  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero-gradient-bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(
        ellipse at 50% 0%,
        rgba(59, 130, 246, 0.15) 0%,
        transparent 70%
      );
      pointer-events: none;
      z-index: 0;
    }

    // -- hero--parallax  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--parallax {
      overflow: hidden;

      .ss-c-hero__visual {
        transform: perspective(q(1000));
      }
    }

    // -- section__container  (from site-geoid_org/src/static/scss/layout/_section.scss) --
    .ss-c-section__container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--spacing-lg);

      &--narrow {
        max-width: var(--max-width-narrow);
      }

      &--wide {
        max-width: 100%;
      }
    }

    // -- section__header-tag  (from site-geoid_org/src/static/scss/layout/_section.scss) --
    .ss-c-section__header-tag {
      display: inline-block;
      font-size: q(13);
      font-weight: 600;
      color: var(--color-accent);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: var(--spacing-md);
      padding: var(--spacing-xs) var(--spacing-sm);
      background: rgba(59, 130, 246, 0.1);
      border-radius: var(--radius-md);
    }

    // -- page-subtitle  (from site-geoid_org/src/static/scss/layout/_section.scss) --
    .ss-c-page-subtitle {
      font-size: q(18);
      color: var(--color-text-secondary);
      max-width: q(600);
    }

    // -- section__divider  (from site-geoid_org/src/static/scss/layout/_section.scss) --
    .ss-c-section__divider {
      height: q(1);
      background: var(--color-border);
      margin: var(--spacing-xl) 0;
    }

    // -- animate-fade-in-up  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-fade-in-up {
      // [parity] (stripped @include block)

    }

    // -- animate-fade-in-down  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-fade-in-down {
      // [parity] (stripped @include block)

    }

    // -- animate-fade-in-left  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-fade-in-left {
      // [parity] (stripped @include block)

    }

    // -- animate-fade-in-right  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-fade-in-right {
      // [parity] (stripped @include block)

    }

    // -- animate-scale-in  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-scale-in {
      // [parity] (stripped @include block)

    }

    // -- animate-slide-in  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-slide-in {
      // [parity] (stripped @include block)

    }

    // -- animate-pulse  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-pulse {
      // [parity] (stripped @include block)

    }

    // -- animate-bounce  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-bounce {
      // [parity] (stripped @include block)

    }

    // -- animate-spin  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-spin {
      // [parity] (stripped @include block)

    }

    // -- transition-fast  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-transition-fast {
        // [parity] (stripped @include)
    }

    // -- transition-base  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-transition-base {
        // [parity] (stripped @include)
    }

    // -- transition-slow  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-transition-slow {
        // [parity] (stripped @include)
    }

    // -- hover-grow  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-hover-grow {
      // [parity] (stripped @include block)

    }

    // -- hover-accent  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-hover-accent {
      // [parity] (stripped @include block)

    }

    // -- group-animate  (from site-geoid_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-group-animate {
      [data-animate] {
        // [parity] (stripped @include block)

      }

      // [parity] (stripped @for block)

    }

    // -- display-none  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-display-none {
      display: none !important;
    }

    // -- display-block  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-display-block {
      display: block !important;
    }

    // -- display-inline  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-display-inline {
      display: inline !important;
    }

    // -- display-inline-block  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-display-inline-block {
      display: inline-block !important;
    }

    // -- display-flex  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-display-flex {
      display: flex !important;
    }

    // -- display-grid  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-display-grid {
      display: grid !important;
    }

    // -- visually-hidden  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-visually-hidden {
        // [parity] (stripped @include)
    }

    // -- opacity-0  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-opacity-0 {
      opacity: 0;
    }

    // -- opacity-25  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-opacity-25 {
      opacity: 0.25;
    }

    // -- opacity-50  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-opacity-50 {
      opacity: 0.5;
    }

    // -- opacity-75  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-opacity-75 {
      opacity: 0.75;
    }

    // -- opacity-100  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-opacity-100 {
      opacity: 1;
    }

    // -- overflow-visible  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-overflow-visible {
      overflow: visible;
    }

    // -- overflow-x-auto  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-overflow-x-auto {
      overflow-x: auto;
    }

    // -- overflow-y-auto  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-overflow-y-auto {
      overflow-y: auto;
    }

    // -- static  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-static {
      position: static;
    }

    // -- z-0  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-z-0 {
      z-index: 0;
    }

    // -- z-10  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-z-10 {
      z-index: 10;
    }

    // -- z-20  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-z-20 {
      z-index: 20;
    }

    // -- z-30  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-z-30 {
      z-index: 30;
    }

    // -- z-40  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-z-40 {
      z-index: 40;
    }

    // -- z-50  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-z-50 {
      z-index: 50;
    }

    // -- z-auto  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-z-auto {
      z-index: auto;
    }

    // -- w-auto  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-w-auto {
      width: auto;
    }

    // -- h-auto  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-h-auto {
      height: auto;
    }

    // -- h-screen  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-h-screen {
      height: 100vh;
    }

    // -- px-0  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-px-0 {
      padding-left: 0;
      padding-right: 0;
    }

    // -- py-0  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-py-0 {
      padding-top: 0;
      padding-bottom: 0;
    }

    // -- clearfix  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-clearfix {
        // [parity] (stripped @include)
    }

    // -- pointer-events-none  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-pointer-events-none {
      pointer-events: none;
    }

    // -- pointer-events-auto  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-pointer-events-auto {
      pointer-events: auto;
    }

    // -- cursor-pointer  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-cursor-pointer {
      cursor: pointer;
    }

    // -- cursor-default  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-cursor-default {
      cursor: default;
    }

    // -- cursor-not-allowed  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-cursor-not-allowed {
      cursor: not-allowed;
    }

    // -- touch-auto  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-touch-auto {
      touch-action: auto;
    }

    // -- touch-none  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-touch-none {
      touch-action: none;
    }

    // -- touch-pan-x  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-touch-pan-x {
      touch-action: pan-x;
    }

    // -- touch-pan-y  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-touch-pan-y {
      touch-action: pan-y;
    }

    // -- select-none  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-select-none {
      user-select: none;
    }

    // -- select-all  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-select-all {
      user-select: all;
    }

    // -- select-auto  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-select-auto {
      user-select: auto;
    }

    // -- blur-none  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-blur-none {
      backdrop-filter: none;
    }

    // -- blur-sm  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-blur-sm {
      backdrop-filter: blur(q(4));
    }

    // -- blur-md  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-blur-md {
      backdrop-filter: blur(q(12));
    }

    // -- blur-lg  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-blur-lg {
      backdrop-filter: blur(q(20));
    }

    // -- border-0  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-border-0 {
      border: none;
    }

    // -- border  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-border {
      border: q(1) solid var(--color-border);
    }

    // -- border-t  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-border-t {
      border-top: q(1) solid var(--color-border);
    }

    // -- border-b  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-border-b {
      border-bottom: q(1) solid var(--color-border);
    }

    // -- border-l  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-border-l {
      border-left: q(1) solid var(--color-border);
    }

    // -- border-r  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-border-r {
      border-right: q(1) solid var(--color-border);
    }

    // -- rounded-none  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-rounded-none {
      border-radius: 0;
    }

    // -- rounded-sm  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-rounded-sm {
      border-radius: var(--radius-sm);
    }

    // -- rounded-md  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-rounded-md {
      border-radius: var(--radius-md);
    }

    // -- rounded-lg  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-rounded-lg {
      border-radius: var(--radius-lg);
    }

    // -- rounded-xl  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-rounded-xl {
      border-radius: var(--radius-xl);
    }

    // -- rounded-full  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-rounded-full {
      border-radius: var(--radius-full);
    }

    // -- shadow-none  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-shadow-none {
      box-shadow: none;
    }

    // -- shadow-sm  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-shadow-sm {
        // [parity] (stripped @include)
    }

    // -- shadow-md  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-shadow-md {
        // [parity] (stripped @include)
    }

    // -- shadow-lg  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-shadow-lg {
        // [parity] (stripped @include)
    }

    // -- shadow-xl  (from site-geoid_org/src/static/scss/utilities/_visibility.scss) --
    .ss-c-shadow-xl {
        // [parity] (stripped @include)
    }

    // -- h4  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-h4 {
        font-family: unset;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--color-primary);
    }

    // -- h2  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-h2 {
        font-size: clamp(q(24), calc(q(20) + 1.5vw), q(40));
        line-height: 1.15;
        font-weight: 700;
        margin: 1em 0 0.5em;
    }

    // -- h3  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-h3 {
        font-size: clamp(q(20), calc(q(16) + 0.75vw), q(28));
        line-height: 1.2;
        font-weight: 700;
        margin: 1em 0 0.375em;
    }

    // -- eyebrow  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-eyebrow + h4 {
        margin-top: 0;
    }

    // -- text-balance  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-text-balance {
        text-wrap: balance;
    }

    // -- display  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-display {
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    // -- text-emphasis  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-text-emphasis {
        font-family: unset;
        font-weight: 700;
    }

    // -- about__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_about.scss) --
    .ss-c-about__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- about__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_about.scss) --
    .ss-c-about__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- about__title  (from site-inthecity_ai/src/static/scss/blocks/_about.scss) --
    .ss-c-about__title {
        margin-bottom: 1em;
    }

    // -- about__body  (from site-inthecity_ai/src/static/scss/blocks/_about.scss) --
    .ss-c-about__body {
        color: var(--color-gray-600);
        line-height: 1.7;

        p {
            margin: 0 0 1em;
            max-width: 65ch;

            &:last-child {
                margin-bottom: 0;
            }
        }

        ul,
        ol {
            margin: 1em 0;
            padding-left: 1.5em;
            list-style: disc;
        }

        li {
            margin-bottom: 0.5em;
        }

        strong {
            color: var(--color-primary);
            font-weight: 600;
        }
    }

    // -- about__actions  (from site-inthecity_ai/src/static/scss/blocks/_about.scss) --
    .ss-c-about__actions {
        display: flex;
        flex-wrap: wrap;
        gap: q(8);
        margin-top: q(32);
    }

    // -- aftermovie  (from site-inthecity_ai/src/static/scss/blocks/_aftermovie.scss) --
    .ss-c-aftermovie {
        max-width: q(1024);
    }

    // -- aftermovie__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_aftermovie.scss) --
    .ss-c-aftermovie__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- aftermovie__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_aftermovie.scss) --
    .ss-c-aftermovie__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- aftermovie__title  (from site-inthecity_ai/src/static/scss/blocks/_aftermovie.scss) --
    .ss-c-aftermovie__title {
        margin-bottom: 0.5em;
    }

    // -- aftermovie__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_aftermovie.scss) --
    .ss-c-aftermovie__subtitle {
        color: var(--color-gray-600);
        max-width: 50ch;
        margin-bottom: q(24);
    }

    // -- aftermovie__player  (from site-inthecity_ai/src/static/scss/blocks/_aftermovie.scss) --
    .ss-c-aftermovie__player {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-color: var(--color-primary);
        background-size: cover;
        background-position: center;
        overflow: hidden;
        border: var(--border);
    }

    // -- aftermovie__iframe  (from site-inthecity_ai/src/static/scss/blocks/_aftermovie.scss) --
    .ss-c-aftermovie__iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

    // -- audience  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience {
        max-width: q(1024);
    }

    // -- audience__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- audience__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- audience__title  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__title {
        margin-bottom: 0.5em;
    }

    // -- audience__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__subtitle {
        color: var(--color-gray-600);
        max-width: 50ch;
        margin-bottom: q(32);
    }

    // -- audience__grid  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(224), 1fr));
        gap: q(24);
        margin-bottom: q(32);
    }

    // -- audience__card  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__card {
        padding: q(24);
        background: var(--color-white);
        border: var(--border);
        transition: all var(--duration-fast) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
            transform: translateY(q(-2));
        }
    }

    // -- audience__icon  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__icon {
        width: q(40);
        height: q(40);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(9, 159, 128, 0.1);
        color: var(--color-accent);
        margin-bottom: q(16);

        svg {
            width: q(20);
            height: q(20);
        }
    }

    // -- audience__card-title  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__card-title {
        font-size: q(16);
        font-weight: 600;
        margin-bottom: q(8);
        color: var(--color-primary);
    }

    // -- audience__card-description  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__card-description {
        font-size: q(14);
        color: var(--color-gray-600);
        line-height: 1.5;
    }

    // -- audience__cta  (from site-inthecity_ai/src/static/scss/blocks/_audience.scss) --
    .ss-c-audience__cta {
        display: flex;
        justify-content: center;
    }

    // -- carousel-block  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block {
        text-align: center;
    }

    // -- carousel-block__cta  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__cta {
        padding-left: clamp(q(16), 5vw, q(48));
        padding-right: clamp(q(16), 5vw, q(48));
    }

    // -- carousel-block__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        font-family: unset;
        font-size: q(14);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-gray-500);
        margin-bottom: 1em;
    }

    // -- carousel-block__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__eyebrow-dot {
        width: q(8);
        height: q(8);
        background: var(--color-accent);
        border-radius: 50%;
    }

    // -- carousel-block__title  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__title {
        font-size: clamp(q(28), 4vw, q(40));
        margin-bottom: 0.5em;
    }

    // -- carousel-block__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__subtitle {
        color: var(--color-gray-600);
        max-width: q(600);
        margin: 0 auto 2em;
    }

    // -- carousel-block__carousel  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__carousel {
        width: 100%;
        overflow: hidden;
        mask-image: linear-gradient(
            to right,
            transparent,
            black 10%,
            black 90%,
            transparent
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black 10%,
            black 90%,
            transparent
        );
    }

    // -- carousel-block__track  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__track {
        display: flex;
        width: max-content;
        will-change: transform;
        animation: carousel-scroll 40s linear infinite;

        &:hover {
            animation-play-state: paused;
        }
    }

    // -- carousel-block__item  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__item {
        flex-shrink: 0;
        width: calc((100vw - q(64)) / 5 - q(32)); // 5 visible with gaps
        max-width: q(180);
        min-width: q(120);
        margin-right: q(32);
        aspect-ratio: 3 / 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: q(16);
        border: var(--border);
        border-radius: var(--radius-md);
        background: var(--color-white);
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
            box-shadow: 0 q(4) q(12) rgba(0, 0, 0, 0.1);
        }

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: grayscale(100%);
            opacity: 0.6;
            transition:
                filter var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out);
        }

        &:hover img {
            filter: grayscale(0%);
            opacity: 1;
        }
    }

    // -- carousel-block__item-text  (from site-inthecity_ai/src/static/scss/blocks/_carousel-block.scss) --
    .ss-c-carousel-block__item-text {
        font-family: unset;
        font-size: q(12);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-gray-600);
        text-align: center;
        line-height: 1.3;
    }

    // -- contact-content  (from site-inthecity_ai/src/static/scss/blocks/_contact.scss) --
    .ss-c-contact-content {
        max-width: calc(32 * var(--grid-cell-size));
    }

    // -- contact-intro  (from site-inthecity_ai/src/static/scss/blocks/_contact.scss) --
    .ss-c-contact-intro {
        color: var(--color-gray-600);
        margin-bottom: var(--grid-1);
    }

    // -- cta__title  (from site-inthecity_ai/src/static/scss/blocks/_cta.scss) --
    .ss-c-cta__title {
        font-weight: 700;
    }

    // -- cta__text  (from site-inthecity_ai/src/static/scss/blocks/_cta.scss) --
    .ss-c-cta__text {
        max-width: 50ch;
        margin-left: auto;
        margin-right: auto;
    }

    // -- cta__actions  (from site-inthecity_ai/src/static/scss/blocks/_cta.scss) --
    .ss-c-cta__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: q(8);
        margin-top: q(24);
    }

    // -- event-days__grid  (from site-inthecity_ai/src/static/scss/blocks/_event-days.scss) --
    .ss-c-event-days__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(200), 1fr));
        gap: q(16);
        width: 100%;
    }

    // -- event-card  (from site-inthecity_ai/src/static/scss/blocks/_event-days.scss) --
    .ss-c-event-card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--color-white);
        border: var(--border);
        border-radius: var(--radius-md);
        transition: border-color var(--duration-base) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
        }

        // Image always spans the full width of the card and uses a fixed
        // aspect-ratio so every card in the row shows the same image size,
        // regardless of the original photo dimensions.
        &__image {
            display: block;
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

        &__content {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: q(12);
            gap: q(4);
        }

        &__day {
            font-family: unset;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--color-gray-400);
            font-size: q(12);
        }

        &__label {
            display: block;
            font-family: unset;
            font-weight: 600;
            color: var(--color-accent);
            font-size: q(14);
            margin-top: q(4);
        }

        &__title {
            font-weight: 600;
            color: var(--color-primary);
            // Reserve space for two lines so the description below always
            // starts at the same vertical position across cards, even when
            // some titles wrap and others don't.
            min-height: calc(2 * 1.3em);
            line-height: 1.3;
        }

        &__description {
            color: var(--color-gray-600);
            font-size: q(14);
        }

        &__link {
            display: inline-flex;
            align-items: center;
            gap: 0.25em;
            font-weight: 600;
            color: var(--color-accent);
            transition: gap var(--duration-fast) var(--ease-out);
            // Push the CTA to the bottom of the card so it lines up across
            // siblings even when descriptions have different lengths.
            margin-top: auto;
            padding-top: q(12);
            align-self: flex-start;

            &:hover {
                gap: 0.5em;
            }

            .ss-c-arrow {
                transition: transform var(--duration-fast) var(--ease-out);
            }

            &:hover .ss-c-arrow {
                transform: translateX(q(4));
            }
        }
    }

    // -- features__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_features.scss) --
    .ss-c-features__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- features__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_features.scss) --
    .ss-c-features__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- features__title  (from site-inthecity_ai/src/static/scss/blocks/_features.scss) --
    .ss-c-features__title {
        margin-bottom: 0.5em;
    }

    // -- features__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_features.scss) --
    .ss-c-features__subtitle {
        color: var(--color-gray-600);
        max-width: 50ch;
        margin-bottom: q(32);
    }

    // -- features__grid  (from site-inthecity_ai/src/static/scss/blocks/_features.scss) --
    .ss-c-features__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(256), 1fr));
        gap: q(24);
    }

    // -- feature-card__icon  (from site-inthecity_ai/src/static/scss/blocks/_features.scss) --
    .ss-c-feature-card__icon {
        width: q(40);
        height: q(40);
        margin-bottom: q(16);
        color: var(--color-accent);

        svg {
            width: 100%;
            height: 100%;
        }
    }

    // -- feature-card__title  (from site-inthecity_ai/src/static/scss/blocks/_features.scss) --
    .ss-c-feature-card__title {
        font-size: q(18);
        margin: 0 0 0.5em;
    }

    // -- feature-card__description  (from site-inthecity_ai/src/static/scss/blocks/_features.scss) --
    .ss-c-feature-card__description {
        color: var(--color-gray-600);
        font-size: q(14);
        line-height: 1.6;
        margin: 0;
    }

    // -- gallery  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery {
        max-width: q(1280);
    }

    // -- gallery__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- gallery__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- gallery__title  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery__title {
        margin-bottom: 0.5em;
    }

    // -- gallery__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery__subtitle {
        color: var(--color-gray-600);
        max-width: 50ch;
        margin-bottom: q(32);
    }

    // -- gallery__grid  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery__grid {
        display: grid;
        grid-template-columns: repeat(var(--columns, 3), 1fr);
        gap: q(16);

        @media (max-width: q(1024)) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: q(600)) {
            grid-template-columns: 1fr;
        }
    }

    // -- gallery__item  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery__item {
        margin: 0;
        overflow: hidden;
        background: var(--color-gray-100);
        border: var(--border);
    }

    // -- gallery__image  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 4 / 3;
        display: block;
        transition: transform var(--duration-base) var(--ease-out);

        .ss-c-gallery__item:hover & {
            transform: scale(1.03);
        }
    }

    // -- gallery__caption  (from site-inthecity_ai/src/static/scss/blocks/_gallery.scss) --
    .ss-c-gallery__caption {
        padding: q(8) q(12);
        font-size: q(12);
        color: var(--color-gray-600);
        background: var(--color-white);
    }

    // -- hero__image  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__image {
        flex: 1;
        min-width: 0;

        img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 70vh;
            object-fit: cover;
            border-radius: var(--radius-md);
        }
    }

    // -- hero__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__eyebrow {
        display: inline-flex;
        // Anchor the dot to the first line of text so it stays at the top
        // when the eyebrow wraps onto multiple lines (mobile Android et al.).
        align-items: baseline;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
    }

    // -- hero__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
        // Lift the dot up to optical-centre with the cap-height of the first line.
        align-self: flex-start;
        margin-top: 0.4em;
    }

    // -- hero__date  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__date {
        display: inline-flex;
        gap: 0.5em;
        color: var(--color-gray-700);
        margin-bottom: 0.5em;

        .ss-c-icon,
        svg {
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            color: var(--color-accent);
        }
    }

    // -- hero__meta  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;

        @media (max-width: q(768)) {
            flex-direction: column;
            gap: 0.5em;
        }
    }

    // -- hero__meta-item  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__meta-item {
        display: flex;
        align-items: center;
        gap: 0.5em;
        color: var(--color-gray-700);

        i,
        svg {
            color: var(--color-accent);
        }
    }

    // -- section--icon  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-section--icon {
        display: flex;
        flex-direction: column;
        gap: q(40);
    }

    // -- icon-block__intro  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__intro {
        display: grid;
        grid-template-columns: 1fr;
        gap: q(32);
        align-items: center;

        .ss-c-section--icon[data-image-position] & {
            grid-template-columns: repeat(3, 1fr);

            @media (max-width: q(768)) {
                grid-template-columns: 1fr;
                gap: q(24);
            }
        }
    }

    // -- icon-block__heading  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__heading {
        grid-column: span 2;
        order: 1;
        max-width: q(1024);

        .ss-c-section--icon[data-image-position='left'] & {
            order: 2;
        }

        @media (max-width: q(768)) {
            grid-column: auto;
        }
    }

    // -- icon-block__image  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: var(--radius-md);
        grid-column: span 1;
        order: 2;

        .ss-c-section--icon[data-image-position='left'] & {
            order: 1;
        }

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

    // -- icon-block  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block {
        max-width: none;
    }

    // -- icon-block__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- icon-block__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- icon-block__title  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__title {
        margin-bottom: 0.5em;
    }

    // -- icon-block__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__subtitle {
        color: var(--color-gray-600);
        max-width: 50ch;
        margin-bottom: q(32);
    }

    // -- icon-block__grid  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__grid {
        display: grid;
        grid-template-columns: repeat(var(--columns, 3), 1fr);
        gap: q(16);
        margin-bottom: q(32);

        @media (max-width: q(1024)) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: q(768)) {
            grid-template-columns: 1fr;
        }
    }

    // -- icon-block__card  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__card {
        padding: q(24);
        background: var(--color-white);
        border: var(--border);
        transition: all var(--duration-fast) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
            transform: translateY(q(-2));
        }
    }

    // -- icon-block__icon  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__icon {
        width: q(40);
        height: q(40);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(9, 159, 128, 0.1);
        color: var(--color-accent);
        margin-bottom: q(16);

        svg {
            width: q(20);
            height: q(20);
        }
    }

    // -- icon-block__card-title  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__card-title {
        font-size: q(16);
        font-weight: 600;
        margin-bottom: q(8);
        color: var(--color-primary);
    }

    // -- icon-block__card-title-name  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__card-title-name {
        display: block;
        font-size: q(20);
        font-weight: 700;
        line-height: 1.2;
    }

    // -- icon-block__card-title-meta  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__card-title-meta {
        display: block;
        margin-top: q(4);
        font-size: q(14);
        font-weight: 500;
        color: var(--color-gray-600);
    }

    // -- icon-block__card-description  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__card-description {
        font-size: q(14);
        color: var(--color-gray-600);
        line-height: 1.5;
    }

    // -- icon-block__card-bullets  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__card-bullets {
        margin: q(12) 0 0;
        padding: 0;
        list-style: none;
        font-size: q(14);
        color: var(--color-gray-600);
        line-height: 1.5;

        li {
            position: relative;
            padding-left: q(16);
            margin-bottom: q(5.6);

            &::before {
                content: '›';
                position: absolute;
                left: 0;
                top: 0;
                color: var(--color-accent);
                font-weight: 700;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    // -- icon-block__cta  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-icon-block__cta {
        display: flex;
        justify-content: center;
    }

    // -- section--paragraph  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-section--paragraph {
        display: grid;
        grid-template-columns: 1fr;
        gap: q(32);
        align-items: center;

        // Three-column layout when image is present: text spans 2 columns,
        // image takes the remaining column.
        &[data-image-position] {
            grid-template-columns: repeat(3, 1fr);

            @media (max-width: q(768)) {
                grid-template-columns: 1fr;
                gap: q(24);
            }
        }
    }

    // -- paragraph-block__image  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-paragraph-block__image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: var(--radius-md);
        grid-column: span 1;
        order: 2; // Default: appears on right

        // When positioned left, image appears first
        .ss-c-section--paragraph[data-image-position='left'] & {
            order: 1;
        }

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

    // -- paragraph-block  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-paragraph-block {
        grid-column: span 2;
        order: 1;

        .ss-c-section--paragraph[data-image-position='left'] & {
            order: 2;
        }

        @media (max-width: q(768)) {
            grid-column: auto;
        }
    }

    // -- paragraph-block__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-paragraph-block__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- paragraph-block__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-paragraph-block__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- paragraph-block__title  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-paragraph-block__title {
        margin-bottom: 1em;
    }

    // -- paragraph-block__body  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-paragraph-block__body {
        color: var(--color-gray-600);
        line-height: 1.7;

        p {
            margin: 0 0 1em;
            max-width: 65ch;

            &:last-child {
                margin-bottom: 0;
            }
        }

        ul,
        ol {
            margin: 1em 0;
            padding-left: 1.5em;
            list-style: disc;
        }

        li {
            margin-bottom: 0.5em;
        }

        strong {
            color: var(--color-primary);
            font-weight: 600;
        }
    }

    // -- paragraph-block__actions  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-paragraph-block__actions {
        display: flex;
        flex-wrap: wrap;
        gap: q(8);
        margin-top: q(32);
    }

    // -- partners__cta  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__cta {
        max-width: q(1024);
        margin-inline: auto;
        padding-inline: var(--container-padding);
    }

    // -- partners__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        font-family: unset;
        font-size: q(14);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-gray-500);
        margin-bottom: 1em;
    }

    // -- partners__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__eyebrow-dot {
        width: q(8);
        height: q(8);
        background: var(--color-accent);
        border-radius: 50%;
    }

    // -- partners__title  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__title {
        font-size: clamp(q(28), 4vw, q(40));
        margin-bottom: 0.5em;
    }

    // -- partners__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__subtitle {
        color: var(--color-gray-600);
        max-width: q(600);
        margin: 0 auto 2em;
    }

    // -- partners__carousel  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__carousel {
        width: 100%;
        overflow: hidden;
        mask-image: linear-gradient(
            to right,
            transparent,
            black 10%,
            black 90%,
            transparent
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black 10%,
            black 90%,
            transparent
        );
    }

    // -- partners__track  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__track {
        display: flex;
        width: max-content;
        will-change: transform;
        animation: partners-scroll 40s linear infinite;

        &:hover {
            animation-play-state: paused;
        }
    }

    // -- partners__logo  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__logo {
        flex-shrink: 0;
        width: calc((100vw - q(64)) / 5 - q(32)); // 5 visible with gaps
        max-width: q(180);
        min-width: q(120);
        margin-right: q(32);
        aspect-ratio: 3 / 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: q(16);
        border: var(--border);
        border-radius: var(--radius-md);
        background: var(--color-white);
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
            box-shadow: 0 q(4) q(12) rgba(0, 0, 0, 0.1);
        }

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: grayscale(100%);
            opacity: 0.6;
            transition:
                filter var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out);
        }

        &:hover img {
            filter: grayscale(0%);
            opacity: 1;
        }
    }

    // -- partners__logo-text  (from site-inthecity_ai/src/static/scss/blocks/_partners.scss) --
    .ss-c-partners__logo-text {
        font-family: unset;
        font-size: q(12);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-gray-600);
        text-align: center;
        line-height: 1.3;
    }

    // -- previous-editions  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions {
        max-width: q(1280);
    }

    // -- previous-editions__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- previous-editions__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- previous-editions__title  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__title {
        margin-bottom: 0.5em;
    }

    // -- previous-editions__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__subtitle {
        color: var(--color-gray-600);
        max-width: 50ch;
        margin-bottom: q(32);
    }

    // -- previous-editions__grid  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__grid {
        display: grid;
        grid-template-columns: repeat(var(--columns, 2), 1fr);
        gap: q(16);

        @media (max-width: q(768)) {
            grid-template-columns: 1fr;
        }
    }

    // -- previous-editions__card  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__card {
        display: flex;
        flex-direction: column;
        background: var(--color-white);
        border: var(--border);
        color: inherit;
        text-decoration: none;
        transition: all var(--duration-fast) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
            transform: translateY(q(-2));
        }
    }

    // -- previous-editions__media  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__media {
        overflow: hidden;
        background: var(--color-gray-100);
    }

    // -- previous-editions__image  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 16 / 9;
        display: block;
        transition: transform var(--duration-base) var(--ease-out);

        .ss-c-previous-editions__card:hover & {
            transform: scale(1.03);
        }
    }

    // -- previous-editions__body  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__body {
        padding: q(24);
        display: flex;
        flex-direction: column;
        gap: q(8);
    }

    // -- previous-editions__year  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__year {
        font-family: unset;
        font-size: q(12);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
    }

    // -- previous-editions__card-title  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__card-title {
        font-size: q(20);
        font-weight: 600;
        color: var(--color-primary);
        margin: 0;
    }

    // -- previous-editions__description  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__description {
        color: var(--color-gray-600);
        font-size: q(15);
        margin: 0;
    }

    // -- previous-editions__cta  (from site-inthecity_ai/src/static/scss/blocks/_previous-editions.scss) --
    .ss-c-previous-editions__cta {
        margin-top: q(8);
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-size: q(12);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);

        svg {
            width: 1em;
            height: 1em;
        }
    }

    // -- programme  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme {
        max-width: q(1024);
    }

    // -- programme__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- programme__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- programme__title  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__title {
        margin-bottom: 0.5em;
    }

    // -- programme__subtitle  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__subtitle {
        color: var(--color-gray-600);
        max-width: 50ch;
        margin-bottom: q(32);
    }

    // -- programme__days  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__days {
        display: flex;
        gap: 0;
        margin-bottom: q(24);
        border: var(--border);
        background: var(--color-white);
        width: fit-content;
    }

    // -- programme__day  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__day {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: q(2);
        padding: 0.75em 1.5em;
        font-family: unset;
        background: var(--color-white);
        border: none;
        border-right: var(--border);
        color: var(--color-gray-600);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out);

        &:last-child {
            border-right: none;
        }

        &:hover {
            background: var(--color-gray-50);
            color: var(--color-primary);
        }

        &--active {
            background: var(--color-primary);
            color: var(--color-white);

            &:hover {
                background: var(--color-primary);
                color: var(--color-white);
            }
        }
    }

    // -- programme__day-label  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__day-label {
        font-size: q(14);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    // -- programme__day-date  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__day-date {
        font-size: q(12);
        font-weight: 500;
        opacity: 0.8;
    }

    // -- programme__filters  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__filters {
        display: flex;
        flex-wrap: wrap;
        gap: q(8);
        margin-bottom: q(24);
    }

    // -- programme__filter  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__filter {
        padding: 0.5em 1em;
        font-family: unset;
        font-size: q(12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: var(--color-white);
        border: var(--border);
        color: var(--color-gray-600);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
            color: var(--color-primary);
        }

        &--active {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-white);

            &:hover {
                background: var(--color-primary);
                border-color: var(--color-primary);
                color: var(--color-white);
            }
        }
    }

    // -- programme__table  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__table {
        border: var(--border);
        background: var(--color-white);
    }

    // -- programme__header  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__header {
        display: grid;
        grid-template-columns: q(96) 1fr q(128) q(128);
        gap: q(16);
        padding: q(12) q(16);
        background: var(--color-gray-100);
        border-bottom: var(--border);
        font-family: unset;
        font-size: q(12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-gray-500);

        @media (max-width: q(768)) {
            display: none;
        }
    }

    // -- programme__body  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__body {
        // Container for rows
    }

    // -- programme__row  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__row {
        display: grid;
        grid-template-columns: q(96) 1fr q(128) q(128);
        gap: q(16);
        padding: q(16);
        border-bottom: var(--border);
        transition: background var(--duration-fast) var(--ease-out);

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background: var(--color-gray-100);
        }

        @media (max-width: q(768)) {
            grid-template-columns: 1fr;
            gap: q(8);
        }
    }

    // -- programme__col  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__col {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        &--time {
            @media (max-width: q(768)) {
                order: -1;
            }
        }

        &--title {
            gap: q(4);
        }

        &--track,
        &--location {
            @media (max-width: q(768)) {
                flex-direction: row;
                gap: q(8);
            }
        }
    }

    // -- programme__time  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__time {
        font-family: unset;
        font-size: q(14);
        font-weight: 500;
        color: var(--color-primary);
    }

    // -- programme__item-title  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__item-title {
        font-weight: 600;
        color: var(--color-primary);
    }

    // -- programme__speaker  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__speaker {
        font-size: q(14);
        color: var(--color-accent);
    }

    // -- programme__description  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__description {
        font-size: q(14);
        color: var(--color-gray-600);
        line-height: 1.5;
    }

    // -- programme__track  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__track {
        display: inline-flex;
        padding: 0.25em 0.5em;
        font-family: unset;
        font-size: q(10);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: q(2);
        width: fit-content;

        &--main {
            background: rgba(9, 159, 128, 0.1);
            color: var(--color-accent);
        }

        &--workshop {
            background: rgba(0, 184, 212, 0.1);
            color: var(--color-interaction);
        }

        &--panel {
            background: rgba(6, 6, 68, 0.1);
            color: var(--color-primary);
        }

        &--networking {
            background: rgba(245, 133, 77, 0.1);
            color: var(--color-signal);
        }

        &--break {
            background: var(--color-gray-100);
            color: var(--color-gray-500);
        }

        &--excursion {
            background: rgba(138, 43, 226, 0.1);
            color: #8a2be2;
        }
    }

    // -- programme__col--location  (from site-inthecity_ai/src/static/scss/blocks/_programme.scss) --
    .ss-c-programme__col--location {
        font-size: q(14);
        color: var(--color-gray-500);
    }

    // -- stats  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats {
        max-width: q(1024);
        width: 100%;
        min-width: 0;
    }

    // -- stats__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- stats__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- stats__title  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats__title {
        margin-bottom: q(32);
    }

    // -- stats__grid  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: q(16);
        width: 100%;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    // -- stat-item__number  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stat-item__number {
        font-family: unset;
        font-size: clamp(q(32), calc(q(24) + 2vw), q(64));
        font-weight: 700;
        line-height: 1;
        color: var(--color-accent);
        letter-spacing: -0.02em;
    }

    // -- stat-item__label  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stat-item__label {
        font-family: unset;
        font-size: q(12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-white);
        margin-top: q(8);
    }

    // -- section--dark  (from site-inthecity_ai/src/static/scss/components/_buttons.scss) --
    .ss-c-section--dark {
        .ss-c-btn {
            color: var(--color-white);
            border-color: var(--color-white);

            &:hover {
                background: var(--color-white);
                color: var(--color-primary);
            }
        }

        .ss-c-btn--primary {
            background: var(--color-white);
            color: var(--color-primary);
            border-color: var(--color-white);

            &:hover {
                background: var(--color-accent);
                border-color: var(--color-accent);
                color: var(--color-white);
            }
        }

        .ss-c-btn--secondary {
            background: transparent;
            color: var(--color-white);
            border-color: var(--color-white);

            &:hover {
                background: var(--color-white);
                color: var(--color-primary);
            }
        }
    }

    // -- grid-dots  (from site-inthecity_ai/src/static/scss/grid/_grid_dots.scss) --
    .ss-c-grid-dots {
        position: absolute;
        inset: 0;
        z-index: var(--grid-dots-z-index);
        pointer-events: none;

        // Dot pattern via background gradient + mask (no grid needed)
        background-image: linear-gradient(
            to right,
            var(--grid-dots-color) var(--grid-dots-size),
            transparent var(--grid-dots-size)
        );
        background-size: var(--grid-cell-size) var(--grid-cell-size);
        background-position: var(--grid-dots-offset) var(--grid-dots-offset);

        // Mask creates vertical cuts, leaving only dots at intersections
        mask-image: linear-gradient(
            to bottom,
            black var(--grid-dots-size),
            transparent var(--grid-dots-size)
        );
        mask-size: var(--grid-cell-size) var(--grid-cell-size);
        mask-position: var(--grid-dots-offset) var(--grid-dots-offset);

        // Webkit prefix for Safari support
        -webkit-mask-image: linear-gradient(
            to bottom,
            black var(--grid-dots-size),
            transparent var(--grid-dots-size)
        );
        -webkit-mask-size: var(--grid-cell-size) var(--grid-cell-size);
        -webkit-mask-position: var(--grid-dots-offset) var(--grid-dots-offset);

        opacity: var(--grid-dots-opacity);

        // On mobile, the absolutely-positioned background layer inside
        // .ss-c-frame__content (overflow: hidden) gets composited on its own GPU
        // layer and updates asynchronously from native scroll, producing a
        // visible drift from the foreground content. The pattern is also
        // effectively invisible at mobile cell sizes — hide it.
        @media (max-width: q(768)) {
            display: none;
        }
    }

    // -- grid-squares  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-squares {
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: -1000;
        overflow: hidden;

        // On mobile, this absolutely-positioned background layer drifts away
        // from the foreground during native scroll (iOS Safari composites it
        // onto a separate layer that updates asynchronously). Hide on mobile.
        @media (max-width: q(768)) {
            display: none;
        }
    }

    // -- grid-square  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square {
        position: absolute;
        width: var(--square-size);
        height: var(--square-size);

        // Green tints (accent #099f80 mixed with white)
        &--green-10 {
            background: #e6f5f2; // 10% green, 90% white
        }

        &--green-20 {
            background: #ceece6; // 20% green, 80% white
        }

        &--green-30 {
            background: #b5e2d9; // 30% green, 70% white
        }
    }

    // -- grid-square--tl-1  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tl-1 {
        top: 0;
        left: 0;
    }

    // -- grid-square--tl-2  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tl-2 {
        top: 0;
        left: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--tl-3  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tl-3 {
        top: calc(var(--grid-cell-size) * 4);
        left: 0;
    }

    // -- grid-square--tl-4  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tl-4 {
        top: calc(var(--grid-cell-size) * 4);
        left: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--tl-5  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tl-5 {
        top: 0;
        left: calc(var(--grid-cell-size) * 8);
    }

    // -- grid-square--tl-6  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tl-6 {
        top: calc(var(--grid-cell-size) * 8);
        left: 0;
    }

    // -- grid-square--tr-1  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tr-1 {
        top: 0;
        right: 0;
    }

    // -- grid-square--tr-2  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tr-2 {
        top: 0;
        right: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--tr-3  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tr-3 {
        top: calc(var(--grid-cell-size) * 4);
        right: 0;
    }

    // -- grid-square--tr-4  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tr-4 {
        top: calc(var(--grid-cell-size) * 4);
        right: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--tr-5  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tr-5 {
        top: 0;
        right: calc(var(--grid-cell-size) * 8);
    }

    // -- grid-square--tr-6  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--tr-6 {
        top: calc(var(--grid-cell-size) * 8);
        right: 0;
    }

    // -- grid-square--bl-1  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--bl-1 {
        bottom: 0;
        left: 0;
    }

    // -- grid-square--bl-2  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--bl-2 {
        bottom: 0;
        left: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--bl-3  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--bl-3 {
        bottom: calc(var(--grid-cell-size) * 4);
        left: 0;
    }

    // -- grid-square--bl-4  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--bl-4 {
        bottom: calc(var(--grid-cell-size) * 8);
        left: 0;
    }

    // -- grid-square--br-1  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--br-1 {
        bottom: 0;
        right: 0;
    }

    // -- grid-square--br-2  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--br-2 {
        bottom: 0;
        right: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--br-3  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--br-3 {
        bottom: calc(var(--grid-cell-size) * 4);
        right: 0;
    }

    // -- grid-square--br-4  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--br-4 {
        bottom: calc(var(--grid-cell-size) * 8);
        right: 0;
    }

    // -- grid-square--mid-1  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-1 {
        top: calc(var(--grid-cell-size) * 32);
        right: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--mid-2  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-2 {
        top: calc(var(--grid-cell-size) * 36);
        right: calc(var(--grid-cell-size) * 8);
    }

    // -- grid-square--mid-3  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-3 {
        top: calc(var(--grid-cell-size) * 48);
        left: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--mid-4  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-4 {
        top: calc(var(--grid-cell-size) * 52);
        left: calc(var(--grid-cell-size) * 8);
    }

    // -- grid-square--mid-5  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-5 {
        top: calc(var(--grid-cell-size) * 60);
        right: calc(var(--grid-cell-size) * 8);
    }

    // -- grid-square--mid-6  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-6 {
        top: calc(var(--grid-cell-size) * 68);
        left: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--mid-7  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-7 {
        top: calc(var(--grid-cell-size) * 20);
        left: calc(var(--grid-cell-size) * 8);
    }

    // -- grid-square--mid-8  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-8 {
        top: calc(var(--grid-cell-size) * 24);
        left: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--mid-9  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-9 {
        top: calc(var(--grid-cell-size) * 40);
        right: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--mid-10  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-10 {
        top: calc(var(--grid-cell-size) * 56);
        right: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--mid-11  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-11 {
        top: calc(var(--grid-cell-size) * 72);
        right: calc(var(--grid-cell-size) * 8);
    }

    // -- grid-square--mid-12  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-12 {
        top: calc(var(--grid-cell-size) * 76);
        left: calc(var(--grid-cell-size) * 8);
    }

    // -- grid-square--mid-13  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-13 {
        top: calc(var(--grid-cell-size) * 84);
        right: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--mid-14  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--mid-14 {
        top: calc(var(--grid-cell-size) * 88);
        left: calc(var(--grid-cell-size) * 4);
    }

    // -- grid-square--large  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--large {
        width: calc(var(--square-size) * 2);
        height: calc(var(--square-size) * 2);
    }

    // -- grid-square--lg-1  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--lg-1 {
        top: calc(var(--grid-cell-size) * 16);
        right: 0;
    }

    // -- grid-square--lg-2  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--lg-2 {
        top: calc(var(--grid-cell-size) * 44);
        left: 0;
    }

    // -- grid-square--lg-3  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--lg-3 {
        top: calc(var(--grid-cell-size) * 64);
        right: 0;
    }

    // -- grid-square--lg-4  (from site-inthecity_ai/src/static/scss/grid/_grid_squares.scss) --
    .ss-c-grid-square--lg-4 {
        top: calc(var(--grid-cell-size) * 80);
        left: 0;
    }

    // -- footer__content  (from site-inthecity_ai/src/static/scss/layout/_footer.scss) --
    .ss-c-footer__content {
        display: flex;
        justify-content: space-between;
        gap: q(32);
        max-width: q(1024);
        margin: 0 auto;
        padding-bottom: q(32);
        border-bottom: q(1) solid rgba(255, 255, 255, 0.1);

        @media (max-width: q(640)) {
            flex-direction: column;
        }
    }

    // -- footer__nav-group  (from site-inthecity_ai/src/static/scss/layout/_footer.scss) --
    .ss-c-footer__nav-group {
        min-width: q(96);

        @media (max-width: q(640)) {
            min-width: 0;
        }
    }

    // -- footer__nav-title  (from site-inthecity_ai/src/static/scss/layout/_footer.scss) --
    .ss-c-footer__nav-title {
        font-family: unset;
        font-size: q(12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        margin: 0 0 q(12);
    }

    // -- frame  (from site-inthecity_ai/src/static/scss/layout/_grid.scss) --
    .ss-c-frame {
        position: relative;
    }

    // -- frame__content  (from site-inthecity_ai/src/static/scss/layout/_grid.scss) --
    .ss-c-frame__content {
        position: relative;
        overflow: hidden;
        // Create a stacking context so negative z-indexed background layers
        // (e.g. #life-grid) stay inside this element and are not painted
        // behind body's background.
        isolation: isolate;
        // Push content below the fixed site header.
        padding-top: var(--site-header-height, q(64));
    }

    // -- site-main  (from site-inthecity_ai/src/static/scss/layout/_grid.scss) --
    .ss-c-site-main {
        display: grid;
        grid-template-columns: 1fr minmax(0, q(1024)) 1fr;
        gap: 0;
        margin: 0 auto;
        width: 100%;
        padding: 0 q(16) q(128);

        // First section gets top margin unless it's a hero
        > :first-child:not(.ss-c-hero) {
            margin-top: q(128);
        }
    }

    // -- life-cell  (from site-inthecity_ai/src/static/scss/layout/_grid.scss) --
    .ss-c-life-cell {
        position: relative;
        pointer-events: none;

        &::after {
            content: '';
            position: absolute;
            top: var(--life-cell-padding);
            right: var(--life-cell-padding);
            bottom: var(--life-cell-padding);
            left: var(--life-cell-padding);
            background-color: rgba(9, 159, 128, 0.12);
            opacity: 0;
            transition: opacity 750ms ease-out;
        }

        &.ss-c-alive::after {
            opacity: 1;
        }
    }

    // -- content-quarter  (from site-inthecity_ai/src/static/scss/layout/_grid.scss) --
    .ss-c-content-quarter {
        grid-column: span 16;
    }

    // -- partner-levels  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-levels {
        max-width: q(1024);
    }

    // -- partner-levels__title  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-levels__title {
        text-align: center;
        margin-bottom: q(32);
    }

    // -- partner-levels__grid  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-levels__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(288), 1fr));
        gap: q(24);
        margin-bottom: q(16);
    }

    // -- partner-level  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-level {
        background: var(--color-white);
        border: var(--border);
        padding: q(32);
        display: flex;
        flex-direction: column;

        &--gold {
            border-color: #d4a600;

            .ss-c-partner-level__name {
                color: #d4a600;
            }
        }

        &--silver {
            border-color: #8e8e8e;

            .ss-c-partner-level__name {
                color: #8e8e8e;
            }
        }

        &--bronze {
            border-color: #cd7f32;

            .ss-c-partner-level__name {
                color: #cd7f32;
            }
        }
    }

    // -- partner-level__header  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-level__header {
        text-align: center;
        margin-bottom: q(24);
        padding-bottom: q(24);
        border-bottom: var(--border);
    }

    // -- partner-level__name  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-level__name {
        font-family: unset;
        font-size: q(14);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: q(8);
    }

    // -- partner-level__price  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-level__price {
        font-size: q(32);
        font-weight: 700;
        color: var(--color-primary);
    }

    // -- partner-level__limit  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-level__limit {
        font-size: q(12);
        color: var(--color-gray-500);
        margin-top: q(8);
    }

    // -- partner-level__benefits  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-level__benefits {
        list-style: none;
        padding: 0;
        margin: 0 0 q(24);
        flex-grow: 1;

        li {
            display: flex;
            align-items: flex-start;
            gap: q(8);
            padding: q(8) 0;
            font-size: q(14);
            color: var(--color-gray-700);
            border-bottom: q(1) solid var(--color-gray-100);

            &:last-child {
                border-bottom: none;
            }

            svg {
                width: q(16);
                height: q(16);
                color: var(--color-accent);
                flex-shrink: 0;
                margin-top: q(2);
            }
        }
    }

    // -- partner-levels__note  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-levels__note {
        text-align: center;
        font-size: q(14);
        color: var(--color-gray-500);
    }

    // -- partner-contact  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-contact {
        max-width: q(640);
        margin: 0 auto;
    }

    // -- partner-contact__title  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-contact__title {
        text-align: center;
        margin-bottom: q(16);
    }

    // -- partner-contact__intro  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-contact__intro {
        text-align: center;
        color: var(--color-gray-600);
        margin-bottom: q(32);
    }

    // -- partner-contact__info  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-contact__info {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: q(32);
        margin-bottom: q(32);
        padding: q(24);
        background: var(--color-gray-50);
        border: var(--border);
    }

    // -- partner-contact__item  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-contact__item {
        display: flex;
        align-items: center;
        gap: q(8);
        font-size: q(14);

        svg {
            width: q(16);
            height: q(16);
            color: var(--color-accent);
        }

        a {
            color: var(--color-primary);

            &:hover {
                color: var(--color-accent);
            }
        }
    }

    // -- partner-form  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-form {
        display: flex;
        flex-direction: column;
        gap: q(16);
    }

    // -- partner-form__row  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-form__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: q(16);

        @media (max-width: q(480)) {
            grid-template-columns: 1fr;
        }
    }

    // -- partner-form__field  (from site-inthecity_ai/src/static/scss/layout/_partners-page.scss) --
    .ss-c-partner-form__field {
        display: flex;
        flex-direction: column;
        gap: q(8);

        label {
            font-family: unset;
            font-size: q(12);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-gray-600);
        }

        input,
        select,
        textarea {
            padding: q(12) q(16);
            font-family: inherit;
            font-size: q(16);
            border: var(--border);
            background: var(--color-white);
            color: var(--color-primary);
            transition: border-color var(--duration-fast) var(--ease-out);

            &:focus {
                outline: none;
                border-color: var(--color-accent);
            }
        }

        select {
            cursor: pointer;
        }

        textarea {
            resize: vertical;
            min-height: q(96);
        }
    }

    // -- section--page-header  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-section--page-header .ss-c-page-header {
        max-width: q(1024);
    }

    // -- target-audience  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-target-audience {
        max-width: q(1024);
    }

    // -- target-audience__title  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-target-audience__title {
        text-align: center;
        margin-bottom: q(16);
    }

    // -- target-audience__intro  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-target-audience__intro {
        text-align: center;
        color: var(--color-gray-600);
        max-width: 50ch;
        margin: 0 auto q(32);
    }

    // -- target-audience__grid  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-target-audience__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(224), 1fr));
        gap: q(24);
    }

    // -- target-audience__card  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-target-audience__card {
        padding: q(24);
        background: var(--color-white);
        border: var(--border);
        text-align: center;
    }

    // -- target-audience__icon  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-target-audience__icon {
        width: q(48);
        height: q(48);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(9, 159, 128, 0.1);
        color: var(--color-accent);
        margin: 0 auto q(16);

        svg {
            width: q(24);
            height: q(24);
        }
    }

    // -- target-audience__card-title  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-target-audience__card-title {
        font-size: q(16);
        font-weight: 600;
        margin-bottom: q(8);
        color: var(--color-primary);
    }

    // -- target-audience__card-description  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-target-audience__card-description {
        font-size: q(14);
        color: var(--color-gray-600);
        line-height: 1.5;
    }

    // -- tickets  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-tickets {
        max-width: q(1152);
    }

    // -- tickets__title  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-tickets__title {
        text-align: center;
        margin-bottom: q(32);
    }

    // -- tickets__grid  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-tickets__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: q(24);
        margin-bottom: q(24);

        @media (max-width: q(1024)) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: q(640)) {
            grid-template-columns: 1fr;
        }
    }

    // -- ticket-card  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-ticket-card {
        background: var(--color-white);
        border: var(--border);
        padding: q(32);
        display: flex;
        flex-direction: column;
        position: relative;

        &--highlighted {
            border-color: var(--color-accent);
            border-width: q(2);
        }
    }

    // -- ticket-card__badge  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-ticket-card__badge {
        position: absolute;
        top: q(-12);
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-accent);
        color: var(--color-white);
        font-family: unset;
        font-size: q(10);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: q(4) q(12);
    }

    // -- ticket-card__name  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-ticket-card__name {
        font-size: q(20);
        font-weight: 600;
        margin-bottom: q(8);
        color: var(--color-primary);
    }

    // -- ticket-card__price  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-ticket-card__price {
        font-size: q(32);
        font-weight: 700;
        color: var(--color-accent);
        margin-bottom: q(16);
    }

    // -- ticket-card__description  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-ticket-card__description {
        font-size: q(14);
        color: var(--color-gray-600);
        margin-bottom: q(16);
    }

    // -- ticket-card__includes  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-ticket-card__includes {
        list-style: none;
        padding: 0;
        margin: 0 0 q(24);
        flex-grow: 1;

        li {
            display: flex;
            align-items: flex-start;
            gap: q(8);
            padding: q(8) 0;
            font-size: q(14);
            color: var(--color-gray-700);

            svg {
                width: q(16);
                height: q(16);
                color: var(--color-accent);
                flex-shrink: 0;
                margin-top: q(2);
            }
        }
    }

    // -- tickets__note  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-tickets__note {
        text-align: center;
        font-size: q(14);
        color: var(--color-gray-500);

        p {
            margin: 0;
        }
    }

    // -- ai-typing  (from site-inthecity_ai/src/static/scss/utilities/_reveal.scss) --
    .ss-c-ai-typing {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        border-right: q(2) solid var(--color-accent);
        animation:
            typing 3s steps(30, end),
            blink 0.75s step-end infinite;
    }

    // -- list  (from site-kockums_foundation/src/static/scss/base/_typography.scss) --
    .ss-c-list {
      margin-bottom: $spacing-4;
      padding-left: $spacing-6;

      li {
        margin-bottom: $spacing-2;
        line-height: unset;
      }
    }

    // -- list--bullet  (from site-kockums_foundation/src/static/scss/base/_typography.scss) --
    .ss-c-list--bullet {
      list-style-type: disc;
    }

    // -- list--number  (from site-kockums_foundation/src/static/scss/base/_typography.scss) --
    .ss-c-list--number {
      list-style-type: decimal;
    }

    // -- bibliography-list  (from site-kockums_foundation/src/static/scss/components/_bibliography.scss) --
    .ss-c-bibliography-list {
      display: flex;
      flex-direction: column;
      gap: $spacing-4;
    }

    // -- bibliography-item  (from site-kockums_foundation/src/static/scss/components/_bibliography.scss) --
    .ss-c-bibliography-item {
      padding: $spacing-4 0;
      border-bottom: q(1) solid $color-gray-200;

      &:last-child {
        border-bottom: none;
      }

      &__citation {
        font-size: $font-size-base;
        line-height: $line-height-relaxed;
        color: #737373;
        margin: 0;

        em {
          font-style: italic;
        }
      }
    }

    // -- callout-box  (from site-kockums_foundation/src/static/scss/components/_bibliography.scss) --
    .ss-c-callout-box {
      background-color: $color-white;
      border: q(1) solid $color-gray-200;
      border-radius: 0;
      padding: $spacing-6;

      .ss-c-section--light & {
        background-color: $color-gray-100;
      }

      &__title {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-weight: $font-weight-medium;
        color: $color-primary;
        margin-bottom: $spacing-2;
      }

      &__text {
        font-size: $font-size-base;
        color: #737373;
        line-height: $line-height-relaxed;
        margin-bottom: $spacing-4;
      }

      .ss-c-btn {
        display: inline-flex;
        align-items: center;
      }
    }

    // -- focus-grid--2col  (from site-kockums_foundation/src/static/scss/components/_bibliography.scss) --
    .ss-c-focus-grid--2col {
      // [parity] (stripped @include block)

    }

    // -- stat--inline  (from site-kockums_foundation/src/static/scss/components/_bibliography.scss) --
    .ss-c-stat--inline {
      display: flex;
      align-items: baseline;
      gap: $spacing-2;
      margin-top: $spacing-4;

      .ss-c-stat__value {
        font-size: $font-size-3xl;
        margin-bottom: 0;
      }

      .ss-c-stat__label {
        font-size: $font-size-sm;
      }
    }

    // -- stat-card  (from site-kockums_foundation/src/static/scss/components/_cards.scss) --
    .ss-c-stat-card {
      padding: $spacing-6;
      text-align: center;

      &__value {
        font-size: $font-size-4xl;
        font-weight: $font-weight-bold;
        color: $color-accent;
        line-height: 1;
        margin-bottom: $spacing-2;
      }

      &__label {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $color-gray-500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    }

    // -- form  (from site-kockums_foundation/src/static/scss/components/_forms.scss) --
    .ss-c-form {
      &__group {
        margin-bottom: $spacing-6;
      }

      &__label {
        display: block;
        margin-bottom: $spacing-2;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $color-gray-700;
      }

      &__input,
      &__textarea,
      &__select {
        width: 100%;
        padding: $spacing-3 $spacing-4;
        font-size: $font-size-base;
        color: $color-gray-800;
        background-color: $color-white;
        border: q(1) solid $color-gray-300;
        border-radius: 0;
        transition: all $transition-fast;

        &::placeholder {
          color: $color-gray-400;
        }

        &:focus {
          outline: none;
          border-color: #737373;
          box-shadow: 0 0 0 q(3) rgba(#737373, 0.15);
        }

        &:disabled {
          background-color: $color-gray-100;
          cursor: not-allowed;
        }

        &--error {
          border-color: $color-error;

          &:focus {
            box-shadow: 0 0 0 q(3) rgba($color-error, 0.15);
          }
        }
      }

      &__textarea {
        min-height: q(120);
        resize: vertical;
      }

      &__select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right $spacing-3 center;
        background-size: q(16);
        padding-right: $spacing-10;
      }

      &__hint {
        margin-top: $spacing-2;
        font-size: $font-size-sm;
        color: $color-gray-500;
      }

      &__error {
        margin-top: $spacing-2;
        font-size: $font-size-sm;
        color: $color-error;
      }

      &__row {
        display: grid;
        gap: $spacing-6;

        // [parity] (stripped @include block)

      }
    }

    // -- radio  (from site-kockums_foundation/src/static/scss/components/_forms.scss) --
    .ss-c-radio {
      display: flex;
      align-items: flex-start;
      gap: $spacing-3;
      cursor: pointer;

      input {
        width: q(20);
        height: q(20);
        margin: 0;
        flex-shrink: 0;
        cursor: pointer;
      }

      &__label {
        font-size: $font-size-base;
        color: $color-gray-700;
        line-height: 1.4;
      }
    }

    // -- nav  (from site-kockums_foundation/src/static/scss/layout/_navigation.scss) --
    // Scoped under .ss-c-kockums: the bare `display: none` (a mobile-first
    // site nav) hid the nav module everywhere.
    .ss-c-kockums .ss-c-nav {
      display: none;

      // [parity] (stripped @include block)


      &__list {
        display: flex;
        align-items: center;
        gap: $spacing-8;
      }

      &__item {
        position: relative;
      }

      &__link {
        display: flex;
        align-items: center;
        font-size: $font-size-base;
        font-weight: $font-weight-normal;
        color: $color-primary;
        transition: color $transition-fast;
        text-decoration: none;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: q(-2);
          left: 0;
          width: 0;
          height: q(1);
          background-color: $color-primary;
          transition: width $transition-fast;
        }

        &:hover {
          color: $color-primary;

          &::after {
            width: 100%;
          }
        }

        &--active {
          &::after {
            width: 100%;
          }
        }
      }
    }

    // -- nav-overlay  (from site-kockums_foundation/src/static/scss/layout/_navigation.scss) --
    .ss-c-nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: unset;
      background-color: rgba($color-black, 0.3);
      opacity: 0;
      visibility: hidden;
      transition: all $transition-base;

      &.is-visible {
        opacity: 1;
        visibility: visible;
      }
    }

    // -- newsletter  (from site-kockums_foundation/src/static/scss/sections/_cta.scss) --
    .ss-c-newsletter {
        // [parity] (stripped @include)
      background-color: $color-gray-100;

      &__container {
        // [parity] (stripped @include)
        max-width: q(600);
        text-align: center;
      }

      &__title {
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        margin-bottom: $spacing-4;

        // [parity] (stripped @include block)

      }

      &__text {
        font-size: $font-size-base;
        color: $color-gray-600;
        margin-bottom: $spacing-6;
      }

      &__form {
        display: flex;
        flex-direction: column;
        gap: $spacing-3;

        // [parity] (stripped @include block)

      }

      &__input {
        flex: 1;
        padding: $spacing-4;
        font-size: $font-size-base;
        border: q(1) solid $color-gray-300;
        border-radius: 0;

        &:focus {
          outline: none;
          border-color: #737373;
          box-shadow: 0 0 0 q(3) rgba(#737373, 0.15);
        }
      }

      &__submit {
        // [parity] (stripped @include)
        white-space: nowrap;
      }

      &__privacy {
        margin-top: $spacing-4;
        font-size: $font-size-sm;
        color: $color-gray-500;

        a {
          color: #737373;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    // -- stat  (from site-kockums_foundation/src/static/scss/sections/_features.scss) --
    .ss-c-stat {
      &__value {
        display: block;
        font-family: Georgia, serif;
        font-size: $font-size-4xl;
        font-weight: $font-weight-normal;
        color: $color-primary;
        line-height: 1;
        margin-bottom: $spacing-2;

        // [parity] (stripped @include block)

      }

      &__label {
        font-size: $font-size-sm;
        color: #737373;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    }

    // -- section-hero  (from site-kockums_foundation/src/static/scss/sections/_hero.scss) --
    .ss-c-section-hero {
      padding: $spacing-32 0;
      background-color: $color-white;

      // [parity] (stripped @include block)


      &__container {
        // [parity] (stripped @include)
      }

      &__title {
        font-family: Georgia, serif;
        font-size: $font-size-4xl;
        font-weight: $font-weight-normal;
        line-height: 1.1;
        color: $color-primary;
        margin-bottom: $spacing-6;
        letter-spacing: -0.02em;

        // [parity] (stripped @include block)

      }

      &__subtitle {
        font-family: Georgia, serif;
        font-size: $font-size-lg;
        color: #737373;
        max-width: q(700);
        line-height: $line-height-relaxed;

        // [parity] (stripped @include block)

      }
    }

    // -- transition-none  (from site-kockums_foundation/src/static/scss/utilities/_animations.scss) --
    .ss-c-transition-none {
      transition: none;
    }

    // -- bg-primary  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-bg-primary {
      background-color: $color-primary;
    }

    // -- bg-secondary  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-bg-secondary {
      background-color: #737373;
    }

    // -- bg-light  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-bg-light {
      background-color: $color-gray-100;
    }

    // -- bg-white  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-bg-white {
      background-color: $color-white;
    }

    // -- mb-12  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-mb-12 {
      margin-bottom: $spacing-12;
    }

    // -- py-section  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-py-section {
        // [parity] (stripped @include)
    }

    // -- inline-block  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-inline-block {
      display: inline-block;
    }

    // -- max-w-prose  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-max-w-prose {
      max-width: 65ch;
    }

    // -- max-w-sm  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-max-w-sm {
      max-width: q(400);
    }

    // -- max-w-md  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-max-w-md {
      max-width: q(600);
    }

    // -- rounded  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-rounded {
      border-radius: 0;
    }

    // -- shadow  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-shadow {
      box-shadow: $shadow-md;
    }

    // -- container-fluid  (from site-kockums_io/src/static/scss/layout/_container.scss) --
    .ss-c-container-fluid {
        width: 100%;
        padding-left: $container-padding;
        padding-right: $container-padding;
    }

    // -- grid--2  (from site-kockums_io/src/static/scss/layout/_grid.scss) --
    .ss-c-grid--2 {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)

    }

    // -- grid--3  (from site-kockums_io/src/static/scss/layout/_grid.scss) --
    .ss-c-grid--3 {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- grid--4  (from site-kockums_io/src/static/scss/layout/_grid.scss) --
    .ss-c-grid--4 {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- col  (from site-kockums_io/src/static/scss/layout/_grid.scss) --
    .ss-c-col {
        flex: 1;
        padding-left: $spacing-4;
        padding-right: $spacing-4;
    }

    // -- projects  (from site-kockums_io/src/static/scss/sections/_projects.scss) --
    .ss-c-projects {
        // [parity] (stripped @include)
        background-color: $color-white;

        &__inner {
        // [parity] (stripped @include)
        }

        &__header {
        // [parity] (stripped @include)
            flex-wrap: wrap;
            gap: $spacing-4;
            margin-bottom: $spacing-10;
        }

        &__title {
            color: #1a1a1a;
        }

        &__grid {
            display: grid;
            gap: $spacing-6;

            // [parity] (stripped @include block)


            // [parity] (stripped @include block)

        }
    }

    // -- project-card  (from site-kockums_io/src/static/scss/sections/_projects.scss) --
    .ss-c-project-card {
        position: relative;
        border-radius: 0;
        overflow: hidden;
        background-color: #1a1a1a;

        &::before {
            content: '';
            display: block;
            padding-top: 75%;
        }

        &__image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform $transition-slow;
        }

        &__overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                to top,
                rgba(#1a1a1a, 0.9) 0%,
                rgba(#1a1a1a, 0) 60%
            );
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: $spacing-6;
        }

        &__category {
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            color: $color-accent;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: $spacing-2;
        }

        &__title {
            font-size: $font-size-xl;
            font-weight: $font-weight-bold;
            color: $color-white;
            margin-bottom: $spacing-2;
        }

        &__description {
            font-size: $font-size-sm;
            color: $color-gray-400;
        }

        &:hover {
            .ss-c-project-card__image {
                transform: scale(1.05);
            }
        }
    }

    // -- services  (from site-kockums_io/src/static/scss/sections/_services.scss) --
    .ss-c-services {
        // [parity] (stripped @include)
        background-color: #1a1a1a;

        &__inner {
        // [parity] (stripped @include)
        }

        &__header {
            text-align: center;
            max-width: q(700);
            margin: 0 auto $spacing-12;
        }

        &__tagline {
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            color: $color-accent;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: $spacing-4;
        }

        &__title {
            color: $color-white;
            margin-bottom: $spacing-4;
        }

        &__description {
            font-size: $font-size-lg;
            color: $color-gray-400;
        }

        &__grid {
            display: grid;
            gap: $spacing-6;

            // [parity] (stripped @include block)


            // [parity] (stripped @include block)

        }
    }

    // -- align-start  (from site-kockums_io/src/static/scss/utilities/_display.scss) --
    .ss-c-align-start { align-items: flex-start; }

    // -- align-center  (from site-kockums_io/src/static/scss/utilities/_display.scss) --
    .ss-c-align-center { align-items: center; }

    // -- align-end  (from site-kockums_io/src/static/scss/utilities/_display.scss) --
    .ss-c-align-end { align-items: flex-end; }

    // -- m-1  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-m-1 { margin: $spacing-1; }

    // -- m-2  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-m-2 { margin: $spacing-2; }

    // -- m-4  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-m-4 { margin: $spacing-4; }

    // -- m-6  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-m-6 { margin: $spacing-6; }

    // -- m-8  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-m-8 { margin: $spacing-8; }

    // -- mt-0  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-mt-0 { margin-top: 0; }

    // -- mt-12  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-mt-12 { margin-top: $spacing-12; }

    // -- mt-16  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-mt-16 { margin-top: $spacing-16; }

    // -- mb-16  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-mb-16 { margin-bottom: $spacing-16; }

    // -- ml-auto  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-ml-auto { margin-left: auto; }

    // -- mr-auto  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-mr-auto { margin-right: auto; }

    // -- pt-0  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pt-0 { padding-top: 0; }

    // -- pt-8  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pt-8 { padding-top: $spacing-8; }

    // -- pt-16  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pt-16 { padding-top: $spacing-16; }

    // -- pb-0  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pb-0 { padding-bottom: 0; }

    // -- pb-8  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pb-8 { padding-bottom: $spacing-8; }

    // -- pb-16  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pb-16 { padding-bottom: $spacing-16; }

    // -- py-16  (from site-kockums_io/src/static/scss/utilities/_spacing.scss) --
    .ss-c-py-16 { padding-top: $spacing-16; padding-bottom: $spacing-16; }

    // -- adore-hero  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 70vh;
        text-align: center;
        padding: q(20) q(10);
        background: transparent !important;
    }

    // -- adore-hero__content  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-hero__content {
        max-width: q(900);
    }

    // -- adore-hero__title  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-hero__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        letter-spacing: 0.05em;
        margin-bottom: q(06);
        color: #1a1a1a;
    }

    // -- adore-hero__tagline  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-hero__tagline {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: #525252;
        letter-spacing: 0.02em;
    }

    // -- adore-section  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-section {
        padding: q(20) q(10);
        background: transparent;

        &--alt {
            background: #f9f9f9;
        }

        &--cta {
            text-align: center;
            padding: q(25) q(10);
        }
    }

    // -- adore-section__container  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-section__container {
        max-width: q(900);
        margin: 0 auto;
    }

    // -- adore-section__title  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-section__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        letter-spacing: 0.02em;
        margin-bottom: q(08);
        color: #1a1a1a;
        position: relative;
        padding-bottom: q(04);

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: q(12);
            height: q(1);
            background: var(--ss-color-accent, #3696c1);
            opacity: 0.3;
        }

        .ss-c-adore-section--cta & {
            &::after {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    // -- adore-section__text  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-section__text {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.8;
        color: #525252;
        margin-bottom: q(05);
    }

    // -- adore-section__emphasis  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-section__emphasis {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: #1a1a1a;
        margin-top: q(06);
        margin-bottom: q(05);
    }

    // -- adore-intro__lead  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-intro__lead {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.7;
        color: #525252;
        margin-bottom: q(05);
    }

    // -- adore-intro__examples  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-intro__examples {
        margin: q(08) 0;
        padding: q(06) q(08);
        background: #f9f9f9;
        border-radius: q(8);
        border-left: q(2) solid #e5e5e5;

        p {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
            margin-bottom: q(04);
            color: #1a1a1a;
        }
    }

    // -- adore-intro__statement  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-intro__statement {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.7;
        color: #1a1a1a;
        margin-top: q(08);

        strong {
        // [parity] (stripped @include)
        }
    }

    // -- adore-list  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-list {
        list-style: none;
        padding: 0;
        margin: 0 0 q(06) 0;

        li {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
            line-height: 1.8;
            color: #525252;
            padding: q(02) 0;
            padding-left: q(06);
            position: relative;

            &::before {
                content: "—";
                position: absolute;
                left: 0;
                color: #737373;
            }
        }

        &--styled {
            li {
        // [parity] (stripped @include)
                font-style: italic;
                color: #1a1a1a;
            }
        }

        &--grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: q(02) q(08);

            @media (max-width: q(600)) {
                grid-template-columns: 1fr;
            }
        }

        &--contrast {
            li {
                display: flex;
                align-items: center;
                gap: q(02);
            }
        }

        &--negative {
            li::before {
                content: "×";
                color: rgba(180, 100, 100, 0.7);
            }
        }
    }

    // -- adore-list__vs  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-list__vs {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #737373;
        padding: 0 q(02);
    }

    // -- adore-feature  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-feature {
        margin-bottom: q(15);
        padding-bottom: q(12);
        border-bottom: q(1) solid #e5e5e5;

        &:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }

    // -- adore-feature__title  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-feature__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: #1a1a1a;
        margin-bottom: q(05);
        letter-spacing: 0.01em;
    }

    // -- adore-feature__text  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-feature__text {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.8;
        color: #525252;
        margin-bottom: q(04);

        strong {
        // [parity] (stripped @include)
            color: #1a1a1a;
        }
    }

    // -- adore-feature__emotions  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-feature__emotions {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        font-style: italic;
        line-height: 1.8;
        color: #1a1a1a;
        margin-bottom: q(05);
        padding: q(04) q(06);
        background: #f9f9f9;
        border-radius: q(6);
    }

    // -- adore-capabilities  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-capabilities {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: q(08);

        @media (max-width: q(768)) {
            grid-template-columns: 1fr;
        }
    }

    // -- adore-capability  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-capability {
        padding: q(06);
        background: rgba(255, 255, 255, 0.5);
        border: q(1) solid #e5e5e5;
        border-radius: q(8);
        transition: background 0.2s ease, transform 0.2s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateY(q(-2));
        }
    }

    // -- adore-capability__title  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-capability__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: #1a1a1a;
        margin-bottom: q(03);
    }

    // -- adore-capability__text  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-capability__text {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.7;
        color: #525252;
        margin: 0;
    }

    // -- adore-cta  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-cta {
        margin-top: q(10);
    }

    // -- adore-cta__button  (from site-lovelacelabs_ai/src/static/scss/app/_adore.scss) --
    .ss-c-adore-cta__button {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        display: inline-block;
        padding: q(04) q(10);
        background: var(--ss-color-accent, #3696c1);
        color: #fff;
        text-decoration: none;
        letter-spacing: 0.05em;
        border-radius: q(4);
        transition: background 0.2s ease, transform 0.2s ease;

        &:hover {
            background: rgba(0, 0, 0, 0.75);
            transform: translateY(q(-1));
        }
    }

    // -- background-animation  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;

        // Subtle dark overlay for better content readability
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(
                ellipse at center,
                transparent 0%,
                rgba(0, 0, 0, 0.1) 100%
            );
            pointer-events: none;
        }
    }

    // -- background-animation--relative  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--relative {
        position: absolute;
    }

    // -- background-animation--static  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--static {
        position: relative;
    }

    // -- background-animation__canvas  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation__canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    // -- background-animation__svg  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation__svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    // -- background-animation__blobs  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation__blobs {
        will-change: transform;
    }

    // -- background-animation__blob  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation__blob {
        opacity: 0.8;
        mix-blend-mode: normal;
        will-change: transform, cx, cy;

        // Apply individual blob animations with CSS custom properties
        animation:
            blob-float var(--blob-duration, 20s) ease-in-out infinite,
            blob-scale calc(var(--blob-duration, 20s) * 0.7) ease-in-out infinite;
        animation-delay: var(--blob-delay, 0s);

        // Offset each blob's animation based on index
        // [parity] (stripped @for block)

    }

    // -- background-animation--dark  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--dark {
        background: #ffffff;

        .ss-c-background-animation__blob {
            mix-blend-mode: normal;
            opacity: 0.6;
        }
    }

    // -- background-animation--light  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--light {
        background: #ffffff;

        .ss-c-background-animation__blob {
            mix-blend-mode: normal;
            opacity: 0.5;
        }
    }

    // -- background-animation--gradient  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--gradient {
        background: linear-gradient(
            135deg,
            #0f172a 0%,
            #1e1b4b 25%,
            #312e81 50%,
            #1e1b4b 75%,
            #0f172a 100%
        );
    }

    // -- hero--animated  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-hero--animated {
        position: relative;
        overflow: hidden;

        .ss-c-background-animation {
            position: absolute;
            z-index: 0;
        }

        .ss-c-hero--content {
            position: relative;
            z-index: 1;
        }
    }

    // -- background-animation--interactive  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--interactive {
        pointer-events: auto;

        .ss-c-background-animation__canvas {
            cursor: none;
        }
    }

    // -- background-animation--reduced-motion  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--reduced-motion {
        // [parity] (stripped @include)
    }

    // -- background-animation--loaded  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--loaded {
        .ss-c-background-animation__svg,
        .ss-c-background-animation__canvas {
            animation: fade-in 1s ease-out forwards;
        }
    }

    // -- background-animation--blur-sm  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--blur-sm {
        .ss-c-background-animation__blob {
            filter: blur(q(60));
        }
    }

    // -- background-animation--blur-lg  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--blur-lg {
        .ss-c-background-animation__blob {
            filter: blur(q(150));
        }
    }

    // -- background-animation--opacity-low  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--opacity-low {
        .ss-c-background-animation__svg,
        .ss-c-background-animation__canvas {
            opacity: 0.4;
        }
    }

    // -- background-animation--opacity-high  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-background-animation--opacity-high {
        .ss-c-background-animation__svg,
        .ss-c-background-animation__canvas {
            opacity: 0.9;
        }
    }

    // -- section--light  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-section--light {
        background: unset;
    }

    // -- hero__title--dark  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-hero__title--dark {
        color: unset;
    }

    // -- hero__subtitle--dark  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-hero__subtitle--dark {
        color: unset;
    }

    // -- charts-grid  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(380), 1fr));
        gap: q(32);
        padding: q(32);
        max-width: q(1400);
        margin: 0 auto;
    }

    // -- chart-card  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-chart-card {
        background: #ffffff;
        border-radius: q(12);
        overflow: hidden;
        box-shadow:
            0 q(4) q(6) rgba(0, 0, 0, 0.05),
            0 q(10) q(15) rgba(0, 0, 0, 0.03);
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(q(-4));
            box-shadow:
                0 q(10) q(20) rgba(0, 0, 0, 0.08),
                0 q(20) q(40) rgba(0, 0, 0, 0.05);
        }

        &__canvas {
            width: 100%;
            aspect-ratio: 4 / 3;
            background: #ffffff;

            svg {
                width: 100%;
                height: 100%;
            }
        }

        &__info {
            padding: q(16) q(24);
            border-top: q(1) solid unset;
            background: unset;
        }

        &__title {
            font-size: q(16);
            font-weight: 600;
            color: unset;
            margin-bottom: q(4);
        }

        &__description {
            font-size: q(12.8);
            color: unset;
        }
    }

    // -- cursor-hide  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-cursor-hide {
        .ss-c-cursor-container {
            display: none !important;
        }
    }

    // -- cursor-magnetic-strong  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-cursor-magnetic-strong {
        // Use as: data-magnetic-force="0.5" on element
    }

    // -- cursor-blend-normal  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-cursor-blend-normal {
        .ss-c-cursor-container {
            mix-blend-mode: normal !important;
        }
    }

    // -- cursor-blend-exclusion  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-cursor-blend-exclusion {
        .ss-c-cursor-container {
            mix-blend-mode: exclusion !important;
        }
    }

    // -- cursor-blend-multiply  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-cursor-blend-multiply {
        .ss-c-cursor-container {
            mix-blend-mode: multiply !important;
        }
    }

    // -- neu-btn  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-neu-btn {
        &[data-cursor="pointer"] {
            // Cursor will automatically apply pointer state
        }
    }

    // -- dh-card  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-dh-card {
        &[data-cursor-text] {
            // Text will be shown in cursor dot
        }
    }

    // -- visual-canvas  (from site-lovelacelabs_ai/src/static/scss/app/_cursor.scss) --
    .ss-c-visual-canvas {
        // Already handled in cursor.ts, but can be customized here
    }

    // -- diagrams-filter  (from site-lovelacelabs_ai/src/static/scss/app/_diagrams.scss) --
    .ss-c-diagrams-filter {
        padding: q(32);
        display: flex;
        justify-content: center;

        .ss-c-filter-buttons {
            display: flex;
            gap: q(16);
            flex-wrap: wrap;
            justify-content: center;
        }

        .ss-c-filter-btn {
            padding: q(12) q(24);
            border: none;
            background: #e8ecef;
            border-radius: q(12);
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(14);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #4a5568;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow:
                q(4) q(4) q(8) rgba(163, 177, 198, 0.5),
                q(-4) q(-4) q(8) rgba(255, 255, 255, 0.8);

            &:hover {
                transform: translateY(q(-2));
                box-shadow:
                    q(6) q(6) q(12) rgba(163, 177, 198, 0.5),
                    q(-6) q(-6) q(12) rgba(255, 255, 255, 0.8);
            }

            &:active {
                box-shadow:
                    inset q(2) q(2) q(5) rgba(163, 177, 198, 0.5),
                    inset q(-2) q(-2) q(5) rgba(255, 255, 255, 0.8);
            }

            &--active {
                background: linear-gradient(145deg, #d8dce0, #f0f4f8);
                color: #2d3748;
                box-shadow:
                    inset q(3) q(3) q(6) rgba(163, 177, 198, 0.5),
                    inset q(-3) q(-3) q(6) rgba(255, 255, 255, 0.8);

                &:hover {
                    transform: none;
                }
            }
        }
    }

    // -- diagrams-grid  (from site-lovelacelabs_ai/src/static/scss/app/_diagrams.scss) --
    .ss-c-diagrams-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(380), 1fr));
        gap: q(32);
        padding: q(32);
        max-width: q(1600);
        margin: 0 auto;

        @media (max-width: q(480)) {
            grid-template-columns: 1fr;
            padding: q(16);
        }
    }

    // -- diagram-card  (from site-lovelacelabs_ai/src/static/scss/app/_diagrams.scss) --
    .ss-c-diagram-card {
        background: #e8ecef;
        border-radius: q(20);
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow:
            q(8) q(8) q(16) rgba(163, 177, 198, 0.5),
            q(-8) q(-8) q(16) rgba(255, 255, 255, 0.8);

        &:hover {
            transform: translateY(q(-4));
            box-shadow:
                q(12) q(12) q(24) rgba(163, 177, 198, 0.5),
                q(-12) q(-12) q(24) rgba(255, 255, 255, 0.8);

            .ss-c-diagram-container {
                svg {
                    transform: scale(1.02);
                }
            }
        }

        &__info {
            padding: q(24);
            text-align: center;
        }

        &__category {
            display: inline-block;
            padding: q(4) q(12);
            background: rgba(66, 153, 225, 0.15);
            color: #3182ce;
            border-radius: q(20);
            font-size: q(11.2);
            font-weight: 600;
            letter-spacing: 0.1em;
            margin-bottom: q(12);
        }

        &__title {
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(17.6);
            font-weight: 600;
            color: #2d3748;
            margin: 0 0 q(8);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        &__description {
            font-size: q(13.6);
            color: #718096;
            line-height: 1.5;
            margin: 0;
        }
    }

    // -- diagram-container  (from site-lovelacelabs_ai/src/static/scss/app/_diagrams.scss) --
    .ss-c-diagram-container {
        background: #f8fafc;
        padding: q(16);
        cursor: pointer;
        position: relative;
        min-height: q(200);
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: q(1) solid rgba(0, 0, 0, 0.05);

        &::after {
            content: '🔍';
            position: absolute;
            top: q(12);
            right: q(12);
            font-size: q(16);
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        &:hover::after {
            opacity: 0.5;
        }

        svg {
            width: 100%;
            height: auto;
            max-height: q(280);
            transition: transform 0.3s ease;
        }
    }

    // -- diagram-legend  (from site-lovelacelabs_ai/src/static/scss/app/_diagrams.scss) --
    .ss-c-diagram-legend {
        display: flex;
        justify-content: center;
        gap: q(32);
        flex-wrap: wrap;
        margin-top: q(24);

        .ss-c-legend-item {
            display: flex;
            align-items: center;
            gap: q(8);
        }

        .ss-c-legend-symbol {
            width: q(24);
            height: q(24);
            border-radius: q(4);
            display: flex;
            align-items: center;
            justify-content: center;

            &--node {
                background: #e2e8f0;
                border: q(2) solid #4a5568;
                border-radius: 50%;
            }

            &--connection {
                background: transparent;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: q(2);
                    background: #4a5568;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            &--layer {
                background: #90cdf4;
                border: q(2) solid #4299e1;
            }

            &--input {
                background: #c6f6d5;
                border: q(2) solid #48bb78;
                border-radius: 50%;
            }
        }

        .ss-c-legend-label {
            font-size: q(13.6);
            color: #4a5568;
        }
    }

    // -- diagram-modal  (from site-lovelacelabs_ai/src/static/scss/app/_diagrams.scss) --
    .ss-c-diagram-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;

        &--open {
            opacity: 1;
            visibility: visible;

            .ss-c-diagram-modal__content {
                transform: scale(1);
            }
        }

        &__backdrop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(q(4));
        }

        &__content {
            position: relative;
            background: #ffffff;
            border-radius: q(20);
            padding: q(32);
            max-width: 90vw;
            max-height: 90vh;
            overflow: auto;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            box-shadow: 0 q(25) q(50) rgba(0, 0, 0, 0.3);
        }

        &__close {
            position: absolute;
            top: q(16);
            right: q(16);
            width: q(40);
            height: q(40);
            border: none;
            background: #e8ecef;
            border-radius: 50%;
            font-size: q(24);
            color: #4a5568;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            box-shadow:
                q(3) q(3) q(6) rgba(163, 177, 198, 0.5),
                q(-3) q(-3) q(6) rgba(255, 255, 255, 0.8);

            &:hover {
                background: #d8dce0;
                transform: rotate(90deg);
            }
        }

        &__diagram {
            min-width: q(600);
            min-height: q(400);
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
                width: 100%;
                height: auto;
                max-width: q(800);
            }

            @media (max-width: q(768)) {
                min-width: q(280);
                min-height: q(200);
            }
        }
    }

    // -- dh-hero  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-hero {
        text-align: center;
        padding: q(48) q(32);
        margin-bottom: q(32);

        h1 {
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(40);
            font-weight: 700;
            color: #334155;
            margin-bottom: q(12);
            letter-spacing: -0.02em;
        }

        p {
            font-size: q(17.6);
            color: #64748b;
            max-width: q(600);
            margin: 0 auto;
            line-height: 1.6;
        }
    }

    // -- dh-stats  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-stats {
        display: flex;
        justify-content: center;
        gap: q(32);
        padding: q(24);
        margin: 0 q(32) q(32);
        background: #ffffff;
        border-radius: q(16);
        box-shadow:
            q(8) q(8) q(16) rgba(0,0,0,0.15),
            q(-8) q(-8) q(16) rgba(255,255,255,0.5);

        @media (max-width: q(768)) {
            flex-wrap: wrap;
            gap: q(16);
            margin: 0 q(16) q(24);
        }
    }

    // -- dh-stat  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-stat {
        text-align: center;
        padding: q(12) q(24);
        background: #ffffff;
        border-radius: q(12);
        box-shadow:
            inset q(3) q(3) q(6) rgba(0,0,0,0.15),
            inset q(-3) q(-3) q(6) rgba(255,255,255,0.5);

        &__value {
            display: block;
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(24);
            font-weight: 700;
            color: var(--ss-color-accent, #3696c1);
            margin-bottom: q(4);
        }

        &__label {
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
        }
    }

    // -- dh-grid  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(q(320), 1fr));
        gap: q(32);
        padding: 0 q(32) q(48);

        @media (max-width: q(768)) {
            grid-template-columns: 1fr;
            gap: q(24);
            padding: 0 q(16) q(32);
        }
    }

    // -- dh-tech-section  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-tech-section {
        padding: q(32);
        margin: 0 q(32) q(32);
        background: #ffffff;
        border-radius: q(20);
        box-shadow:
            q(8) q(8) q(16) rgba(0,0,0,0.15),
            q(-8) q(-8) q(16) rgba(255,255,255,0.5);

        h2 {
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(20);
            color: #334155;
            margin: 0 0 q(20);
            text-align: center;
        }

        @media (max-width: q(768)) {
            margin: 0 q(16) q(24);
            padding: q(24);
        }
    }

    // -- dh-tech-list  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-tech-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: q(12);
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            padding: q(8) q(16);
            background: #ffffff;
            border-radius: q(20);
            font-size: q(12.8);
            color: #475569;
            box-shadow:
                inset q(2) q(2) q(4) rgba(0,0,0,0.15),
                inset q(-2) q(-2) q(4) rgba(255,255,255,0.5);
            transition: all 0.2s ease;

            &:hover {
                color: var(--ss-color-accent, #3696c1);
                box-shadow:
                    q(3) q(3) q(6) rgba(0,0,0,0.15),
                    q(-3) q(-3) q(6) rgba(255,255,255,0.5);
            }
        }
    }

    // -- dh-pipeline-section  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-pipeline-section {
        padding: q(32);
        margin: 0 q(32) q(48);
        background: #ffffff;
        border-radius: q(20);
        box-shadow:
            q(8) q(8) q(16) rgba(0,0,0,0.15),
            q(-8) q(-8) q(16) rgba(255,255,255,0.5);

        h2 {
            font-family: 'TTInterphasesPro', sans-serif;
            font-size: q(20);
            color: #334155;
            margin: 0 0 q(24);
            text-align: center;
        }

        @media (max-width: q(768)) {
            margin: 0 q(16) q(32);
            padding: q(24);
        }
    }

    // -- dh-pipeline  (from site-lovelacelabs_ai/src/static/scss/app/_digital_humans.scss) --
    .ss-c-dh-pipeline {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: q(8);

        &__step {
            display: flex;
            align-items: center;
            gap: q(8);
        }

        &__box {
            padding: q(12) q(20);
            background: #ffffff;
            border-radius: q(10);
            font-size: q(13.6);
            font-weight: 500;
            color: #334155;
            box-shadow:
                q(4) q(4) q(8) rgba(0,0,0,0.15),
                q(-4) q(-4) q(8) rgba(255,255,255,0.5);
            transition: all 0.2s ease;
            white-space: nowrap;

            &:hover {
                color: var(--ss-color-accent, #3696c1);
                box-shadow:
                    q(6) q(6) q(12) rgba(0,0,0,0.15),
                    q(-6) q(-6) q(12) rgba(255,255,255,0.5);
            }
        }

        &__arrow {
            color: #94a3b8;
            font-size: q(19.2);
        }

        @media (max-width: q(768)) {
            flex-direction: column;
            gap: q(12);

            &__arrow {
                transform: rotate(90deg);
            }
        }
    }

    // -- footer__title  (from site-lovelacelabs_ai/src/static/scss/app/_footer.scss) --
    .ss-c-footer__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        text-transform: uppercase;
        letter-spacing: 0.12em;
        margin-bottom: q(05);
        color: unset;
        padding-bottom: q(03);
        position: relative;

        // Subtle underline accent
        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: q(08);
            height: q(1);
            background: unset;
            opacity: 0.4;

            @media (max-width: q(600)) {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    // -- footer__list-item  (from site-lovelacelabs_ai/src/static/scss/app/_footer.scss) --
    .ss-c-footer__list-item {
        margin-bottom: q(03);
    }

    // -- footer__bottom-content  (from site-lovelacelabs_ai/src/static/scss/app/_footer.scss) --
    .ss-c-footer__bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: q(1400);
        margin: 0 auto;

        @media (max-width: q(768)) {
            flex-direction: column;
            gap: q(05);
            text-align: center;
        }
    }

    // -- footer__legal-links  (from site-lovelacelabs_ai/src/static/scss/app/_footer.scss) --
    .ss-c-footer__legal-links {
        display: flex;
        gap: q(06);
        flex-wrap: wrap;
        justify-content: center;
    }

    // -- footer__legal-link  (from site-lovelacelabs_ai/src/static/scss/app/_footer.scss) --
    .ss-c-footer__legal-link {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        text-decoration: none;
        color: unset;
        letter-spacing: 0.02em;
        padding: q(01) q(02);
        border-radius: q(4);
        transition: color 0.2s ease, background 0.2s ease;

        &:hover {
            color: unset;
            background: unset;
        }
    }

    // -- lab-experiments  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-lab-experiments {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(320), 1fr));
        gap: q(32);
        padding: q(32);
        max-width: q(1400);
        margin: 0 auto;
    }

    // -- experiment-card  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-experiment-card {
        display: flex;
        flex-direction: column;
        padding: q(32);
        border-radius: q(24);
        transition: transform 0.3s ease, box-shadow 0.3s ease;

        &:hover {
            transform: translateY(q(-4));

            .ss-c-experiment-orb {
                animation-play-state: running;
            }

            .ss-c-experiment-orb__ring {
                animation-play-state: running;
            }
        }

        &__visual {
            display: flex;
            justify-content: center;
            align-items: center;
            height: q(200);
            margin-bottom: q(24);
        }

        &__content {
            text-align: center;
        }

        &__category {
            display: inline-block;
            font-size: q(11.2);
            font-weight: 600;
            letter-spacing: 0.1em;
            color: unset;
            background: unset;
            padding: q(4) q(12);
            border-radius: q(16);
            margin-bottom: q(12);
        }

        &__title {
            font-size: q(20);
            font-weight: 600;
            margin-bottom: q(8);
            color: #2d3748;
        }

        &__description {
            font-size: q(14.4);
            color: #718096;
            margin-bottom: q(24);
            line-height: 1.5;
        }

        &__btn {
            display: inline-flex;
            align-items: center;
            gap: q(8);
            padding: q(12) q(24);
            font-size: q(13.6);
            cursor: pointer;
            transition: all 0.3s ease;

            .ss-c-btn-icon {
                transition: transform 0.3s ease;
            }

            &:hover .ss-c-btn-icon {
                transform: translateX(q(4));
            }
        }
    }

    // -- experiment-orb  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-experiment-orb {
        position: relative;
        width: q(120);
        height: q(120);

        &__core {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: q(40);
            height: q(40);
            background: linear-gradient(135deg, unset, unset);
            border-radius: 50%;
            box-shadow:
                0 0 q(20) unset,
                inset 0 0 q(10) rgba(white, 0.3);
            animation: orb-pulse 2s ease-in-out infinite;
        }

        &__ring {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            border: q(2) solid transparent;
            animation-play-state: paused;

            &--1 {
                width: q(70);
                height: q(70);
                margin: q(-35) 0 0 q(-35);
                border-color: unset;
                animation: ring-rotate 4s linear infinite;
            }

            &--2 {
                width: q(90);
                height: q(90);
                margin: q(-45) 0 0 q(-45);
                border-color: unset;
                animation: ring-rotate 6s linear infinite reverse;
            }

            &--3 {
                width: q(110);
                height: q(110);
                margin: q(-55) 0 0 q(-55);
                border-color: unset;
                animation: ring-rotate 8s linear infinite;
            }
        }

        &__particles {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
        }

        &__particle {
            position: absolute;
            width: q(4);
            height: q(4);
            background: unset;
            border-radius: 50%;
            transform: rotate(var(--particle-angle)) translateX(q(50));
            animation: particle-orbit 3s linear infinite;
            animation-delay: var(--particle-delay);
        }
    }

    // -- lab-console-section  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-lab-console-section {
        .ss-c-section-title {
            text-align: center;
            margin-bottom: q(24);
        }
    }

    // -- lab-console  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-lab-console {
        font-family: 'TTInterphasesPro', sans-serif;
        background: #1a1a2e;
        border-radius: q(16);
        overflow: hidden;

        .ss-c-console-header {
            display: flex;
            align-items: center;
            gap: q(8);
            padding: q(12) q(16);
            background: #16162a;
            border-bottom: q(1) solid #2a2a4a;
        }

        .ss-c-console-dot {
            width: q(12);
            height: q(12);
            border-radius: 50%;

            &--red { background: #ff5f56; }
            &--yellow { background: #ffbd2e; }
            &--green { background: #27ca40; }
        }

        .ss-c-console-title {
            margin-left: q(16);
            font-size: q(12);
            color: #666;
        }

        .ss-c-console-body {
            padding: q(24);
            min-height: q(200);
        }

        .ss-c-console-line {
            display: flex;
            align-items: center;
            gap: q(12);
            margin-bottom: q(12);
            font-size: q(13.6);
            color: #888;

            &--success {
                color: unset;
            }

            &--highlight {
                color: unset;
            }
        }

        .ss-c-console-prompt {
            color: unset;
        }

        .ss-c-console-cursor {
            display: inline-block;
            width: q(8);
            height: q(16);
            background: unset;
            animation: cursor-blink 1s step-end infinite;
        }
    }

    // -- lab-stats  (from site-lovelacelabs_ai/src/static/scss/app/_lab.scss) --
    .ss-c-lab-stats {
        padding: q(32);
    }

    // -- manifesto-vision  (from site-lovelacelabs_ai/src/static/scss/app/_manifesto.scss) --
    .ss-c-manifesto-vision {
        padding: q(48) q(32);

        &__container {
            max-width: q(800);
            margin: 0 auto;
            padding: q(48);
            text-align: center;
        }

        &__title {
            font-size: q(14.4);
            font-weight: 600;
            color: unset;
            letter-spacing: 0.2em;
            margin-bottom: q(24);
        }

        &__statement {
            font-size: q(20);
            color: #e5e5e5;
            line-height: 1.8;
            font-style: italic;
        }
    }

    // -- manifesto-principles  (from site-lovelacelabs_ai/src/static/scss/app/_manifesto.scss) --
    .ss-c-manifesto-principles {
        max-width: q(900);
        margin: 0 auto;
        padding: q(32);
    }

    // -- manifesto-principle  (from site-lovelacelabs_ai/src/static/scss/app/_manifesto.scss) --
    .ss-c-manifesto-principle {
        display: flex;
        gap: q(32);
        padding: q(32) 0;
        border-bottom: q(1) solid #27272a;
        opacity: 0;
        transform: translateY(q(20));
        transition: all 0.6s ease;

        &--visible {
            opacity: 1;
            transform: translateY(0);
        }

        &:last-child {
            border-bottom: none;
        }

        &__number {
            font-size: q(48);
            font-weight: 700;
            color: unset;
            font-family: 'TTInterphasesPro', sans-serif;
            line-height: 1;
            opacity: 0.5;
            transition: all 0.3s ease;
            min-width: q(80);

            &--glow {
                opacity: 1;
                text-shadow: 0 0 q(30) unset;
            }
        }

        &__content {
            flex: 1;
        }

        &__title {
            font-size: q(24);
            font-weight: 700;
            color: #ffffff;
            margin-bottom: q(12);
        }

        &__statement {
            font-size: q(17.6);
            color: unset;
            margin-bottom: q(16);
            line-height: 1.6;
            font-weight: 500;
        }

        &__detail {
            font-size: q(15.2);
            color: #a1a1aa;
            line-height: 1.7;
        }
    }

    // -- manifesto-visualization  (from site-lovelacelabs_ai/src/static/scss/app/_manifesto.scss) --
    .ss-c-manifesto-visualization {
        width: 100%;
        max-width: q(800);
        margin: 0 auto;
        aspect-ratio: 2 / 1;

        svg {
            width: 100%;
            height: 100%;
            border-radius: q(8);
        }
    }

    // -- manifesto-signatories  (from site-lovelacelabs_ai/src/static/scss/app/_manifesto.scss) --
    .ss-c-manifesto-signatories {
        padding: q(48) q(32);
        text-align: center;

        &__container {
            max-width: q(600);
            margin: 0 auto;
        }

        &__title {
            font-size: q(12.8);
            font-weight: 600;
            color: #71717a;
            letter-spacing: 0.2em;
            margin-bottom: q(24);
        }

        &__list {
            display: flex;
            flex-direction: column;
            gap: q(12);
            margin-bottom: q(32);
        }

        &__date {
            font-size: q(12.8);
            color: #52525b;
            font-family: 'TTInterphasesPro', sans-serif;
        }
    }

    // -- manifesto-signatory  (from site-lovelacelabs_ai/src/static/scss/app/_manifesto.scss) --
    .ss-c-manifesto-signatory {
        font-size: q(17.6);
        color: unset;
        font-style: italic;
        opacity: 0;
        animation: fadeInUp 0.6s ease forwards;

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(q(10));
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }

    // -- neu-navbar  (from site-lovelacelabs_ai/src/static/scss/app/_navbar.scss) --
    .ss-c-neu-navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;

        height: unset;
        background: transparent;

        // Subtle bottom border for definition
        border-bottom: q(1) solid rgba(163, 177, 198, 0.2);

        transition: all 0.3s ease;
    }

    // -- navbar__container  (from site-lovelacelabs_ai/src/static/scss/app/_navbar.scss) --
    .ss-c-navbar__container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        max-width: q(1400);
        height: 100%;
        margin: 0 auto;
        padding: 0 q(10);
    }

    // -- navbar__brand  (from site-lovelacelabs_ai/src/static/scss/app/_navbar.scss) --
    .ss-c-navbar__brand {
        display: flex;
        align-items: center;
    }

    // -- navbar__logo  (from site-lovelacelabs_ai/src/static/scss/app/_navbar.scss) --
    .ss-c-navbar__logo {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        text-decoration: none;
        color: inherit;
        letter-spacing: 0.1em;

        padding: q(02) q(05);
        border-radius: q(8);
        background: transparent;

        transition: all 0.2s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.3);
            box-shadow:
                inset 0 0 0 q(1) rgba(255, 255, 255, 0.8),
                0 0 0 q(1) rgba(163, 177, 198, 0.4),
                q(4) q(4) q(8) unset,
                q(-4) q(-4) q(8) unset;
        }
    }

    // -- navbar__menu  (from site-lovelacelabs_ai/src/static/scss/app/_navbar.scss) --
    .ss-c-navbar__menu {
        display: flex;
        align-items: center;
        gap: q(02);
    }

    // -- navbar__link  (from site-lovelacelabs_ai/src/static/scss/app/_navbar.scss) --
    .ss-c-navbar__link {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: inherit;

        padding: q(02) q(05);
        border-radius: q(8);

        // Glass effect background
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(q(12));
        -webkit-backdrop-filter: blur(q(12));

        // Neumorphic border effect
        box-shadow:
            inset 0 0 0 q(1) rgba(255, 255, 255, 0.6),
            0 0 0 q(1) rgba(163, 177, 198, 0.2);

        transition: all 0.2s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.45);
            box-shadow:
                inset 0 0 0 q(1) rgba(255, 255, 255, 0.9),
                0 0 0 q(1) rgba(163, 177, 198, 0.3),
                q(4) q(4) q(12) unset,
                q(-4) q(-4) q(12) unset;
        }

        &--active {
            background: rgba(255, 255, 255, 0.35);
            box-shadow:
                inset q(2) q(2) q(6) rgba(163, 177, 198, 0.4),
                inset q(-2) q(-2) q(6) rgba(255, 255, 255, 0.6);
        }
    }

    // -- navbar__toggle  (from site-lovelacelabs_ai/src/static/scss/app/_navbar.scss) --
    .ss-c-navbar__toggle {
        display: none;

        width: q(40);
        height: q(40);

        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;

        box-shadow:
            inset 0 0 0 q(1) rgba(255, 255, 255, 0.5),
            0 0 0 q(1) rgba(163, 177, 198, 0.3);

        transition: all 0.2s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.3);
            box-shadow:
                inset 0 0 0 q(1) rgba(255, 255, 255, 0.8),
                0 0 0 q(1) rgba(163, 177, 198, 0.4),
                q(4) q(4) q(8) unset,
                q(-4) q(-4) q(8) unset;
        }

        &:active {
            box-shadow:
                inset q(2) q(2) q(4) unset,
                inset q(-2) q(-2) q(4) unset;
        }
    }

    // -- navbar__toggle-icon  (from site-lovelacelabs_ai/src/static/scss/app/_navbar.scss) --
    .ss-c-navbar__toggle-icon {
        display: block;
        width: q(18);
        height: q(2);
        background: currentColor;
        margin: 0 auto;
        position: relative;

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: q(18);
            height: q(2);
            background: currentColor;
            left: 0;
        }

        &::before {
            top: q(-6);
        }

        &::after {
            bottom: q(-6);
        }
    }

    // -- neu-container  (from site-lovelacelabs_ai/src/static/scss/app/_neu.scss) --
    .ss-c-neu-container {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        background: #e0e0e0;
        border-radius: q(24);
        overflow: hidden;

        // Neumorphic container style
        box-shadow:
            q(8) q(8) q(16) rgba(0,0,0,0.15),
            q(-8) q(-8) q(16) rgba(255,255,255,0.7),
            inset q(2) q(2) q(4) rgba(255,255,255,0.7),
            inset q(-2) q(-2) q(4) rgba(163, 177, 198, 0.3);

        transition: all 0.3s ease;

        &:hover {
            box-shadow:
                q(12) q(12) q(24) rgba(0,0,0,0.15),
                q(-12) q(-12) q(24) rgba(255,255,255,0.7);
            transform: translateY(q(-2));

            .ss-c-visual {
                --visual-speed: 0.5;
            }
        }

        &--wide {
            aspect-ratio: 2 / 1;
        }

        &--tall {
            aspect-ratio: 1 / 2;
        }
    }

    // -- neu-card  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-card {
        background: unset;
        border-radius: unset;
        padding: q(10);
        // [parity] (stripped @include)
        transition: all 0.3s ease;

        &:hover {
        // [parity] (stripped @include)
        }

        &--sm {
            border-radius: unset;
            padding: q(05);
        // [parity] (stripped @include)
        }

        &--lg {
            border-radius: unset;
            padding: q(20);
        // [parity] (stripped @include)
        }

        &--pressed {
        // [parity] (stripped @include)
        }
    }

    // -- neu-input  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-input {
        background: unset;
        border: none;
        border-radius: unset;
        padding: q(05) q(10);
        // [parity] (stripped @include)
        transition: all 0.2s ease;
        outline: none;

        &:focus {
        // [parity] (stripped @include)
        }

        &--sm {
            border-radius: unset;
            padding: q(02) q(05);
        }

        &--lg {
            border-radius: unset;
            padding: q(10) q(20);
        }
    }

    // -- neu-section  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-section {
        background: unset;
        border-radius: unset;
        padding: q(20);
        margin-bottom: q(10);
        // [parity] (stripped @include)
    }

    // -- neu-inset  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-inset {
        background: unset;
        border-radius: unset;
        padding: q(10);
        // [parity] (stripped @include)
    }

    // -- neu-avatar  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-avatar {
        background: unset;
        border-radius: unset;
        // [parity] (stripped @include)
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &--sm {
            width: q(40);
            height: q(40);
        }

        &--md {
            width: q(64);
            height: q(64);
        }

        &--lg {
            width: q(96);
            height: q(96);
        }
    }

    // -- neu-progress  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-progress {
        background: unset;
        border-radius: unset;
        height: q(8);
        // [parity] (stripped @include)
        overflow: hidden;

        &__bar {
            background: linear-gradient(145deg, unset, unset);
            height: 100%;
            border-radius: unset;
        // [parity] (stripped @include)
            transition: width 0.3s ease;
        }
    }

    // -- neu-toggle  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-toggle {
        position: relative;
        width: q(56);
        height: q(28);
        background: unset;
        border-radius: unset;
        cursor: pointer;
        // [parity] (stripped @include)
        transition: all 0.3s ease;

        &__knob {
            position: absolute;
            top: q(4);
            left: q(4);
            width: q(20);
            height: q(20);
            background: unset;
            border-radius: unset;
        // [parity] (stripped @include)
            transition: all 0.3s ease;
        }

        &--active {
            .ss-c-neu-toggle__knob {
                left: q(32);
            }
        }
    }

    // -- grid__frame--clean--2  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-grid__frame--clean--2 {
        gap: q(10);
    }

    // -- neu-shadow  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-shadow {
        // [parity] (stripped @include)
    }

    // -- neu-shadow-sm  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-shadow-sm {
        // [parity] (stripped @include)
    }

    // -- neu-shadow-lg  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-shadow-lg {
        // [parity] (stripped @include)
    }

    // -- neu-shadow-xl  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-shadow-xl {
        // [parity] (stripped @include)
    }

    // -- neu-shadow-inset  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-shadow-inset {
        // [parity] (stripped @include)
    }

    // -- neu-shadow-inset-sm  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-shadow-inset-sm {
        // [parity] (stripped @include)
    }

    // -- neu-shadow-inset-lg  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-shadow-inset-lg {
        // [parity] (stripped @include)
    }

    // -- neu-radius  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-radius {
        border-radius: unset;
    }

    // -- neu-radius-sm  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-radius-sm {
        border-radius: unset;
    }

    // -- neu-radius-lg  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-radius-lg {
        border-radius: unset;
    }

    // -- neu-radius-xl  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-radius-xl {
        border-radius: unset;
    }

    // -- neu-radius-round  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-radius-round {
        border-radius: unset;
    }

    // -- neu-bg  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --
    .ss-c-neu-bg {
        background: unset;
    }

    // -- philosophy-intro  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-intro {
        padding: q(64) q(32);
    }

    // -- philosophy-quote  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-quote {
        max-width: q(800);
        margin: 0 auto;
        text-align: center;
        padding: q(32);

        p {
            font-size: q(24);
            font-style: italic;
            line-height: 1.8;
            color: #2d3748;

            em {
                color: unset;
                font-style: italic;
            }
        }

        cite {
            display: block;
            margin-top: q(24);
            font-size: q(14.4);
            color: #718096;
            font-style: normal;
        }
    }

    // -- philosophy-principles  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-principles {
        padding: q(32);
    }

    // -- principles-grid  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-principles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(300), 1fr));
        gap: q(32);
        max-width: q(1200);
        margin: q(32) auto 0;
        padding: 0 q(16);
    }

    // -- philosophy-vision  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-vision {
        padding: q(64) q(32);
    }

    // -- vision-timeline  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-vision-timeline {
        display: flex;
        justify-content: center;
        gap: q(32);
        flex-wrap: wrap;
        max-width: q(1200);
        margin: q(32) auto 0;
    }

    // -- vision-card  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-vision-card {
        flex: 1;
        min-width: q(280);
        max-width: q(350);
        padding: q(32);
        text-align: center;
        border-radius: q(24);

        &__marker {
            margin-bottom: q(24);
        }

        &__year {
            display: inline-block;
            font-size: q(13.6);
            font-weight: 700;
            letter-spacing: 0.1em;
            color: white;
            background: linear-gradient(135deg, unset, unset);
            padding: q(8) q(24);
            border-radius: q(32);
        }

        &__line {
            width: q(2);
            height: q(30);
            margin: q(16) auto 0;
            background: linear-gradient(to bottom, unset, transparent);
        }

        &__title {
            font-size: q(20);
            font-weight: 600;
            color: #2d3748;
            margin-bottom: q(12);
        }

        &__description {
            font-size: q(14.4);
            line-height: 1.6;
            color: #718096;
        }
    }

    // -- philosophy-ethics  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-ethics {
        padding: q(32);
    }

    // -- ethics-grid  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-ethics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(250), 1fr));
        gap: q(24);
        margin-top: q(32);

        .ss-c-ethics-item {
            padding: q(24);
            border-radius: q(16);

            h4 {
                font-size: q(16);
                font-weight: 600;
                color: unset;
                margin-bottom: q(12);
            }

            p {
                font-size: q(13.6);
                line-height: 1.6;
                color: #718096;
            }
        }
    }

    // -- philosophy-closing  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-closing {
        padding: q(64) q(32);
    }

    // -- philosophy-symbol  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-symbol {
        font-size: q(64);
        color: unset;
        margin-bottom: q(32);
        animation: symbol-float 3s ease-in-out infinite;
    }

    // -- philosophy-closing-text  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-closing-text {
        max-width: q(700);
        margin: 0 auto;
        font-size: q(17.6);
        line-height: 1.8;
        color: #4a5568;
    }

    // -- philosophy-signature  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-philosophy-signature {
        margin-top: q(32);
        font-size: q(14.4);
        font-style: italic;
        color: #718096;
    }

    // -- pixi-hero  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 70vh;
        text-align: center;
        padding: q(20) q(10);
        background: transparent !important;
    }

    // -- pixi-hero__content  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-hero__content {
        max-width: q(900);
    }

    // -- pixi-hero__title  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-hero__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        letter-spacing: 0.05em;
        margin-bottom: q(06);
        color: unset;
    }

    // -- pixi-hero__tagline  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-hero__tagline {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: unset;
        letter-spacing: 0.02em;
    }

    // -- pixi-section  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-section {
        padding: q(20) q(10);
        background: transparent;

        &--alt {
            background: unset;
        }

        &--cta {
            text-align: center;
            padding: q(25) q(10);
        }
    }

    // -- pixi-section__container  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-section__container {
        max-width: q(900);
        margin: 0 auto;
    }

    // -- pixi-section__title  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-section__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        letter-spacing: 0.02em;
        margin-bottom: q(08);
        color: unset;
        position: relative;
        padding-bottom: q(04);

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: q(12);
            height: q(1);
            background: unset;
            opacity: 0.3;
        }

        .ss-c-pixi-section--cta & {
            &::after {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    // -- pixi-section__text  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-section__text {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.8;
        color: unset;
        margin-bottom: q(05);
    }

    // -- pixi-section__emphasis  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-section__emphasis {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: unset;
        margin-top: q(06);
        margin-bottom: q(05);
    }

    // -- pixi-intro__lead  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-intro__lead {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.7;
        color: unset;
        margin-bottom: q(05);
    }

    // -- pixi-intro__statement  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-intro__statement {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.7;
        color: unset;
        margin-top: q(08);

        strong {
        // [parity] (stripped @include)
        }
    }

    // -- pixi-comparison  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-comparison {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: q(08);
        margin: q(10) 0;

        @media (max-width: q(600)) {
            grid-template-columns: 1fr;
        }
    }

    // -- pixi-comparison__column  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-comparison__column {
        padding: q(06);
        background: rgba(255, 255, 255, 0.5);
        border: q(1) solid unset;
        border-radius: q(8);
    }

    // -- pixi-comparison__title  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-comparison__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: unset;
        margin-bottom: q(04);
    }

    // -- pixi-list  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-list {
        list-style: none;
        padding: 0;
        margin: 0 0 q(06) 0;

        li {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
            line-height: 1.8;
            color: unset;
            padding: q(02) 0;
            padding-left: q(06);
            position: relative;

            &::before {
                content: "—";
                position: absolute;
                left: 0;
                color: unset;
            }

            strong {
        // [parity] (stripped @include)
                color: unset;
            }
        }

        &--styled {
            li {
        // [parity] (stripped @include)
                font-style: italic;
                color: unset;
            }
        }

        &--negative {
            li::before {
                content: "×";
                color: rgba(180, 100, 100, 0.7);
            }
        }

        &--positive {
            li::before {
                content: "✓";
                color: rgba(100, 150, 100, 0.8);
            }
        }

        &--tech {
            li {
                padding: q(03) 0 q(03) q(06);
                border-bottom: q(1) solid unset;

                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }

    // -- pixi-feature  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-feature {
        margin-bottom: q(15);
        padding-bottom: q(12);
        border-bottom: q(1) solid unset;

        &:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }

    // -- pixi-feature__title  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-feature__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: unset;
        margin-bottom: q(05);
        letter-spacing: 0.01em;
    }

    // -- pixi-feature__text  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-feature__text {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.8;
        color: unset;
        margin-bottom: q(04);

        strong {
        // [parity] (stripped @include)
            color: unset;
        }
    }

    // -- pixi-feature__emotions  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-feature__emotions {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        font-style: italic;
        line-height: 1.8;
        color: unset;
        margin-bottom: q(05);
        padding: q(04) q(06);
        background: unset;
        border-radius: q(6);
    }

    // -- pixi-applications  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-applications {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: q(06);

        @media (max-width: q(900)) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: q(600)) {
            grid-template-columns: 1fr;
        }
    }

    // -- pixi-application  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-application {
        padding: q(06);
        background: rgba(255, 255, 255, 0.5);
        border: q(1) solid unset;
        border-radius: q(8);
        transition: background 0.2s ease, transform 0.2s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateY(q(-2));
        }
    }

    // -- pixi-application__title  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-application__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        color: unset;
        margin-bottom: q(03);
    }

    // -- pixi-application__text  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-application__text {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        line-height: 1.7;
        color: unset;
        margin: 0;
    }

    // -- pixi-cta  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-cta {
        margin-top: q(10);
    }

    // -- pixi-cta__button  (from site-lovelacelabs_ai/src/static/scss/app/_pixi.scss) --
    .ss-c-pixi-cta__button {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        display: inline-block;
        padding: q(04) q(10);
        background: unset;
        color: #fff;
        text-decoration: none;
        letter-spacing: 0.05em;
        border-radius: q(4);
        transition: background 0.2s ease, transform 0.2s ease;

        &:hover {
            background: rgba(0, 0, 0, 0.75);
            transform: translateY(q(-1));
        }
    }

    // -- playground-featured  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-featured {
        padding: q(48) q(32);

        &__container {
            max-width: q(800);
            margin: 0 auto;
            text-align: center;
        }

        &__badge {
            display: inline-block;
            font-size: q(11.2);
            padding: q(5.6) q(16);
            background: linear-gradient(135deg, #8b5cf6, #ec4899);
            color: white;
            border-radius: q(100);
            font-weight: 600;
            letter-spacing: 0.1em;
            margin-bottom: q(16);
        }

        &__title {
            font-size: q(32);
            font-weight: 700;
            color: #ffffff;
            margin-bottom: q(12);
        }

        &__description {
            font-size: q(16);
            color: #a1a1aa;
            max-width: q(500);
            margin: 0 auto q(32);
        }

        &__demo {
            max-width: q(600);
            margin: 0 auto;
        }
    }

    // -- playground-chat  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-chat {
        background: #0f0f0f;
        border: q(1) solid #27272a;
        border-radius: q(12);
        overflow: hidden;

        &__messages {
            height: q(300);
            overflow-y: auto;
            padding: q(16);
            display: flex;
            flex-direction: column;
            gap: q(16);
        }

        &__message {
            display: flex;
            gap: q(12);
            max-width: 80%;

            &--user {
                align-self: flex-end;
                flex-direction: row-reverse;

                .ss-c-playground-chat__bubble {
                    background: #8b5cf6;
                    color: white;
                }
            }

            &--system {
                align-self: flex-start;

                .ss-c-playground-chat__bubble {
                    background: #27272a;
                    color: #e5e5e5;
                }
            }
        }

        &__avatar {
            font-size: q(24);
            flex-shrink: 0;
        }

        &__bubble {
            padding: q(12) q(16);
            border-radius: q(12);
            font-size: q(14.4);
            line-height: 1.5;
        }

        &__input-area {
            display: flex;
            gap: q(8);
            padding: q(16);
            border-top: q(1) solid #27272a;
            background: #18181b;
        }

        &__input {
            flex: 1;
            background: #27272a;
            border: q(1) solid #3f3f46;
            border-radius: q(8);
            padding: q(12) q(16);
            color: #e5e5e5;
            font-size: q(14.4);

            &:focus {
                outline: none;
                border-color: #8b5cf6;
            }

            &::placeholder {
                color: #71717a;
            }
        }

        &__send {
            padding: q(12) q(24);
        }
    }

    // -- playground-filter  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-filter {
        display: flex;
        justify-content: center;
        gap: q(12);
        flex-wrap: wrap;
        padding: q(16) q(32);
    }

    // -- playground-demos  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-demos {
        padding: q(32);

        &__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(q(280), 1fr));
            gap: q(24);
            max-width: q(1200);
            margin: 0 auto;
        }
    }

    // -- playground-demo  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-demo {
        overflow: hidden;
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(q(-4));

            .ss-c-playground-demo__overlay {
                opacity: 1;
            }
        }

        &__preview {
            position: relative;
            background: #1a1a2e;
            border-radius: q(8) q(8) 0 0;
            overflow: hidden;
        }

        &__canvas {
            aspect-ratio: 16 / 9;

            svg {
                width: 100%;
                height: 100%;
            }
        }

        &__overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        &__play {
            width: q(50);
            height: q(50);
            background: unset;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: q(20);
            color: white;
        }

        &__info {
            padding: q(16);
        }

        &__meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: q(8);
        }

        &__type {
            font-size: q(10.4);
            color: unset;
            font-weight: 600;
            letter-spacing: 0.1em;
        }

        &__difficulty {
            font-size: q(10.4);
            padding: q(3.2) q(8);
            border-radius: q(4);
            font-weight: 600;

            &--easy {
                background: rgba(34, 197, 94, 0.2);
                color: #22c55e;
            }

            &--medium {
                background: rgba(234, 179, 8, 0.2);
                color: #eab308;
            }

            &--advanced {
                background: rgba(239, 68, 68, 0.2);
                color: #ef4444;
            }
        }

        &__title {
            font-size: q(16);
            font-weight: 600;
            color: #e5e5e5;
            margin-bottom: q(8);
        }

        &__description {
            font-size: q(12.8);
            color: #71717a;
            line-height: 1.5;
            margin-bottom: q(16);
        }

        &__launch {
            width: 100%;
        }
    }

    // -- playground-explainer  (from site-lovelacelabs_ai/src/static/scss/app/_playground.scss) --
    .ss-c-playground-explainer {
        display: flex;
        flex-direction: column;
        gap: q(24);

        &__step {
            display: flex;
            gap: q(16);
            align-items: flex-start;
        }

        &__num {
            font-size: q(24);
            font-weight: 700;
            color: unset;
            font-family: 'TTInterphasesPro', sans-serif;
            line-height: 1;
        }

        &__content {
            strong {
                display: block;
                font-size: q(14.4);
                color: #e5e5e5;
                margin-bottom: q(4);
            }

            p {
                font-size: q(12.8);
                color: #71717a;
                line-height: 1.5;
            }
        }
    }

    // -- policy-page  (from site-lovelacelabs_ai/src/static/scss/app/_policy.scss) --
    .ss-c-policy-page {
        background: transparent;
        padding: q(20) q(10);
        margin-top: q(15);
    }

    // -- policy-page__container  (from site-lovelacelabs_ai/src/static/scss/app/_policy.scss) --
    .ss-c-policy-page__container {
        max-width: q(800);
        margin: 0 auto;
        padding: 0 q(05);
    }

    // -- policy-page__title  (from site-lovelacelabs_ai/src/static/scss/app/_policy.scss) --
    .ss-c-policy-page__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        margin-bottom: q(03);
        letter-spacing: 0.02em;
    }

    // -- policy-page__updated  (from site-lovelacelabs_ai/src/static/scss/app/_policy.scss) --
    .ss-c-policy-page__updated {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
        opacity: 0.6;
        margin-bottom: q(10);
    }

    // -- policy-page__content  (from site-lovelacelabs_ai/src/static/scss/app/_policy.scss) --
    .ss-c-policy-page__content {
        line-height: 1.8;

        h2 {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
            margin-top: q(10);
            margin-bottom: q(05);
            letter-spacing: 0.01em;
        }

        h3 {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
            margin-top: q(07);
            margin-bottom: q(03);
        }

        p {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
            margin-bottom: q(05);
            color: inherit;
            opacity: 0.9;
        }

        ul {
            margin-bottom: q(05);
            padding-left: q(08);
        }

        li {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
            margin-bottom: q(02);
            opacity: 0.9;
        }

        a {
            text-decoration: underline;
            opacity: 0.8;
            transition: opacity 0.2s ease;

            &:hover {
                opacity: 1;
            }
        }

        strong {
        // [parity] (stripped @include)
        }
    }

    // -- research-stats  (from site-lovelacelabs_ai/src/static/scss/app/_research.scss) --
    .ss-c-research-stats {
        padding: q(32) 0;

        &__container {
            display: flex;
            justify-content: center;
            gap: q(32);
            flex-wrap: wrap;
            max-width: q(800);
            margin: 0 auto;
        }
    }

    // -- research-stat  (from site-lovelacelabs_ai/src/static/scss/app/_research.scss) --
    .ss-c-research-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: q(24) q(32);
        min-width: q(150);

        &__value {
            font-size: q(40);
            font-weight: 700;
            color: unset;
            font-family: 'TTInterphasesPro', sans-serif;
        }

        &__label {
            font-size: q(12);
            color: #71717a;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: q(8);
        }
    }

    // -- research-areas  (from site-lovelacelabs_ai/src/static/scss/app/_research.scss) --
    .ss-c-research-areas {
        padding: q(32);

        &__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(q(200), 1fr));
            gap: q(24);
            max-width: q(1200);
            margin: 0 auto;
        }
    }

    // -- research-area  (from site-lovelacelabs_ai/src/static/scss/app/_research.scss) --
    .ss-c-research-area {
        padding: q(24);
        text-align: center;
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(q(-4));
        }

        &__icon {
            font-size: q(40);
            display: block;
            margin-bottom: q(16);
        }

        &__title {
            font-size: q(14.4);
            font-weight: 600;
            color: unset;
            margin-bottom: q(8);
        }

        &__description {
            font-size: q(12.8);
            color: #71717a;
            line-height: 1.5;
        }
    }

    // -- research-papers  (from site-lovelacelabs_ai/src/static/scss/app/_research.scss) --
    .ss-c-research-papers {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(350), 1fr));
        gap: q(24);
        padding: q(32);
        max-width: q(1200);
        margin: 0 auto;
    }

    // -- research-paper  (from site-lovelacelabs_ai/src/static/scss/app/_research.scss) --
    .ss-c-research-paper {
        padding: q(24);
        transition: all 0.3s ease;

        &--hover {
            transform: translateY(q(-4));
            box-shadow: 0 q(10) q(40) unset;
        }

        &__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: q(16);
        }

        &__status {
            font-size: q(10.4);
            padding: q(4) q(12);
            border-radius: q(100);
            font-weight: 600;
            letter-spacing: 0.05em;

            &--published {
                background: rgba(34, 197, 94, 0.2);
                color: #22c55e;
            }

            &--preprint {
                background: rgba(234, 179, 8, 0.2);
                color: #eab308;
            }

            &--in-progress {
                background: rgba(139, 92, 246, 0.2);
                color: unset;
            }
        }

        &__year {
            font-size: q(12.8);
            color: #52525b;
            font-family: 'TTInterphasesPro', sans-serif;
        }

        &__title {
            font-size: q(17.6);
            font-weight: 600;
            color: #e5e5e5;
            margin-bottom: q(8);
            line-height: 1.4;
        }

        &__authors {
            font-size: q(12.8);
            color: unset;
            margin-bottom: q(16);
        }

        &__abstract {
            font-size: q(13.6);
            color: #a1a1aa;
            line-height: 1.6;
            margin-bottom: q(16);
        }

        &__tags {
            display: flex;
            flex-wrap: wrap;
            gap: q(8);
            margin-bottom: q(16);
        }

        &__tag {
            font-size: q(11.2);
            padding: q(4) q(8);
            background: unset;
            color: unset;
            border-radius: q(4);
            cursor: pointer;
            transition: background 0.2s;

            &:hover {
                background: unset;
            }
        }

        &__actions {
            display: flex;
            gap: q(12);
        }
    }

    // -- research-network  (from site-lovelacelabs_ai/src/static/scss/app/_research.scss) --
    .ss-c-research-network {
        width: 100%;
        max-width: q(800);
        margin: 0 auto;
        aspect-ratio: 2 / 1;

        svg {
            width: 100%;
            height: 100%;
            border-radius: q(8);
        }
    }

    // -- threed-viewer  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-viewer {
        position: relative;
        width: 100%;
        max-width: q(1200);
        margin: 0 auto;

        &__canvas {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #0a0a0f;
            border-radius: q(12);
            overflow: hidden;

            canvas {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        &__loading {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: q(16);
            background: #0a0a0f;
            color: #71717a;
            font-size: q(14.4);
        }

        &__spinner {
            width: q(40);
            height: q(40);
            border: q(3) solid #27272a;
            border-top-color: unset;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        &__controls {
            position: absolute;
            bottom: q(16);
            left: 50%;
            transform: translateX(-50%);
        }
    }

    // -- threed-controls  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-controls {
        display: flex;
        gap: q(8);
        padding: q(8);
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(q(10));
        border-radius: q(8);
    }

    // -- threed-control  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-control {
        width: q(36);
        height: q(36);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: q(17.6);
        background: #1a1a2e;
        border: q(1) solid #27272a;
        color: #e5e5e5;
        border-radius: q(6);
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            background: unset;
            border-color: unset;
        }
    }

    // -- threed-scenes  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-scenes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(300), 1fr));
        gap: q(16);
        padding: q(16) q(32);
        max-width: q(1200);
        margin: 0 auto;
    }

    // -- threed-scene  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-scene {
        display: flex;
        gap: q(16);
        align-items: flex-start;
        padding: q(16);
        text-align: left;
        cursor: pointer;
        border: q(2) solid transparent;
        transition: all 0.3s ease;

        &--active {
            border-color: unset;

            .ss-c-threed-scene__icon {
                transform: scale(1.1);
            }
        }

        &:hover:not(.ss-c-threed-scene--active) {
            border-color: #3f3f46;
        }

        &__icon {
            font-size: q(32);
            transition: transform 0.3s;
        }

        &__info {
            flex: 1;
        }

        &__title {
            font-size: q(16);
            font-weight: 600;
            color: #e5e5e5;
            margin-bottom: q(4);
        }

        &__description {
            font-size: q(12.8);
            color: #71717a;
            line-height: 1.4;
            margin-bottom: q(8);
        }

        &__complexity {
            font-size: q(10.4);
            padding: q(3.2) q(8);
            border-radius: q(4);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;

            &--easy {
                background: rgba(34, 197, 94, 0.2);
                color: #22c55e;
            }

            &--medium {
                background: rgba(234, 179, 8, 0.2);
                color: #eab308;
            }

            &--advanced {
                background: rgba(139, 92, 246, 0.2);
                color: unset;
            }
        }
    }

    // -- threed-params  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-params {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(200), 1fr));
        gap: q(24);
        padding: q(24);
        max-width: q(800);
        margin: 0 auto;
    }

    // -- threed-param  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-param {
        display: flex;
        flex-direction: column;
        gap: q(8);

        &__label {
            font-size: q(12.8);
            color: #a1a1aa;
            font-weight: 500;
        }

        &__slider {
            -webkit-appearance: none;
            width: 100%;
            height: q(6);
            background: #27272a;
            border-radius: q(3);
            outline: none;

            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: q(18);
                height: q(18);
                background: unset;
                border-radius: 50%;
                cursor: pointer;
                transition: transform 0.2s;

                &:hover {
                    transform: scale(1.2);
                }
            }
        }

        &__value {
            font-size: q(12);
            color: unset;
            font-family: 'TTInterphasesPro', sans-serif;
        }

        &__select {
            background: #1a1a2e;
            border: q(1) solid #27272a;
            border-radius: q(6);
            padding: q(8);
            color: #e5e5e5;
            font-size: q(13.6);

            &:focus {
                outline: none;
                border-color: unset;
            }
        }
    }

    // -- threed-toggle  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-toggle {
        position: relative;
        display: inline-block;
        width: q(44);
        height: q(24);

        input {
            opacity: 0;
            width: 0;
            height: 0;

            &:checked + .ss-c-threed-toggle__slider {
                background: unset;

                &::before {
                    transform: translateX(q(20));
                }
            }
        }

        &__slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: #27272a;
            border-radius: q(12);
            transition: 0.3s;

            &::before {
                content: '';
                position: absolute;
                height: q(18);
                width: q(18);
                left: q(3);
                bottom: q(3);
                background: white;
                border-radius: 50%;
                transition: 0.3s;
            }
        }
    }

    // -- threed-help  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-help {
        display: flex;
        justify-content: center;
        gap: q(16);
        flex-wrap: wrap;
        padding: q(16) q(32);

        &__item {
            display: flex;
            align-items: center;
            gap: q(12);
            padding: q(12) q(16);
        }

        &__key {
            display: inline-block;
            padding: q(5.6) q(12);
            background: #1a1a2e;
            border: q(1) solid #3f3f46;
            border-radius: q(6);
            font-size: q(12.8);
            font-family: 'TTInterphasesPro', sans-serif;
            color: unset;
        }

        &__action {
            font-size: q(13.6);
            color: #a1a1aa;
        }
    }

    // -- threed-stats  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-stats {
        position: fixed;
        top: q(80);
        right: q(16);
        display: flex;
        gap: q(16);
        padding: q(12) q(16);
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(q(10));
        border-radius: q(8);
        z-index: 100;
    }

    // -- threed-stat  (from site-lovelacelabs_ai/src/static/scss/app/_threed.scss) --
    .ss-c-threed-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: q(4);

        &__label {
            font-size: q(10.4);
            color: #71717a;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        &__value {
            font-size: q(16);
            font-weight: 600;
            color: unset;
            font-family: 'TTInterphasesPro', sans-serif;
        }
    }

    // -- timeline-section  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-section {
        padding: q(64) q(32);
        position: relative;
    }

    // -- timeline-track  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-track {
        position: relative;
        max-width: q(1000);
        margin: 0 auto;
        padding: q(32) 0;
    }

    // -- timeline-line  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-line {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: q(4);
        background: linear-gradient(
            to bottom,
            unset,
            unset,
            unset,
            unset
        );
        transform: translateX(-50%);
        border-radius: q(2);

        @media (max-width: q(768)) {
            left: q(30);
        }
    }

    // -- timeline-milestone  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-milestone {
        position: relative;
        display: flex;
        align-items: flex-start;
        margin-bottom: q(48);
        width: 50%;
        padding-right: q(48);

        &--left {
            justify-content: flex-end;
            text-align: right;

            .ss-c-timeline-milestone__card {
                margin-right: q(16);
            }
        }

        &--right {
            margin-left: 50%;
            padding-right: 0;
            padding-left: q(48);
            text-align: left;

            .ss-c-timeline-milestone__card {
                margin-left: q(16);
            }
        }

        @media (max-width: q(768)) {
            width: 100%;
            padding-left: q(60);
            padding-right: 0;
            margin-left: 0 !important;
            text-align: left !important;

            &--left .ss-c-timeline-milestone__card,
            &--right .ss-c-timeline-milestone__card {
                margin-left: q(16);
                margin-right: 0;
            }
        }

        &__marker {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;

            @media (max-width: q(768)) {
                left: q(30);
            }
        }

        &__dot {
            width: q(20);
            height: q(20);
            background: white;
            border: q(4) solid unset;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease, border-color 0.3s ease;

            &:hover {
                transform: scale(1.2);
            }
        }

        &__icon {
            width: q(8);
            height: q(8);
            background: unset;
            border-radius: 50%;
        }

        &__card {
            flex: 1;
            max-width: q(400);
            padding: q(24);
            border-radius: q(16);
            transition: transform 0.3s ease;

            &:hover {
                transform: translateY(q(-4));
            }
        }

        &__date {
            display: flex;
            align-items: baseline;
            gap: q(8);
            margin-bottom: q(12);

            .ss-c-timeline-milestone--left & {
                justify-content: flex-end;
            }

            @media (max-width: q(768)) {
                justify-content: flex-start !important;
            }
        }

        &__year {
            font-size: q(20);
            font-weight: 700;
            background: linear-gradient(135deg, unset, unset);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        &__quarter {
            font-size: q(12);
            font-weight: 600;
            color: #718096;
        }

        &__title {
            font-size: q(17.6);
            font-weight: 600;
            color: #2d3748;
            margin-bottom: q(8);
        }

        &__description {
            font-size: q(13.6);
            line-height: 1.6;
            color: #718096;
            margin-bottom: q(12);
        }

        &__category {
            display: inline-block;
            font-size: q(11.2);
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: q(4) q(12);
            border-radius: q(16);
            background: unset;
            color: unset;
        }

        // Category-specific colors
        // [parity] (stripped @each block)

    }

    // -- timeline-end  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-end {
        text-align: center;
        padding-top: q(32);
        position: relative;

        &__symbol {
            font-size: q(48);
            background: linear-gradient(135deg, unset, unset);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: infinity-pulse 2s ease-in-out infinite;
        }

        &__text {
            margin-top: q(16);
            font-size: q(14.4);
            font-style: italic;
            color: #718096;
        }
    }

    // -- timeline-stats  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-stats {
        padding: q(32);
    }

    // -- timeline-stat  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-stat {
        text-align: center;
        padding: q(32) q(16);
        border-radius: q(16);

        &__value {
            display: block;
            font-size: q(40);
            font-weight: 700;
            background: linear-gradient(135deg, unset, unset);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        &__label {
            display: block;
            margin-top: q(8);
            font-size: q(12.8);
            color: #718096;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    }

    // -- timeline-legend  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: q(24);
        margin-top: q(16);
    }

    // -- legend-item  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-legend-item {
        display: flex;
        align-items: center;
        gap: q(8);
        font-size: q(12.8);
        color: #718096;
        cursor: pointer;
        transition: color 0.3s ease;

        &:hover {
            color: #2d3748;
        }

        .ss-c-legend-dot {
            width: q(10);
            height: q(10);
            border-radius: 50%;
            background: #ccc;
        }

        // [parity] (stripped @each block)

    }

    // -- timeline-cta  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-cta {
        padding: q(64) q(32);
        text-align: center;

        .ss-c-section-title {
            margin-bottom: q(16);
        }

        .ss-c-section-subtitle {
            margin-bottom: q(32);
            color: #718096;
        }

        .ss-c-neu-btn {
            display: inline-flex;
            align-items: center;
            gap: q(8);
            padding: q(16) q(32);

            .ss-c-btn-icon {
                transition: transform 0.3s ease;
            }

            &:hover .ss-c-btn-icon {
                transform: translateX(q(4));
            }
        }
    }

    // -- visual-container  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual-container {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        background: unset;
        border-radius: q(24);
        overflow: hidden;

        // Neumorphic container style
        box-shadow:
            q(8) q(8) q(16) unset,
            q(-8) q(-8) q(16) unset,
            inset q(2) q(2) q(4) unset,
            inset q(-2) q(-2) q(4) rgba(163, 177, 198, 0.3);

        transition: all 0.3s ease;

        &:hover {
            box-shadow:
                q(12) q(12) q(24) unset,
                q(-12) q(-12) q(24) unset;
            transform: translateY(q(-2));

            .ss-c-visual {
                --visual-speed: 0.5;
            }
        }

        &--wide {
            aspect-ratio: 2 / 1;
        }

        &--tall {
            aspect-ratio: 1 / 2;
        }

        // Show visual when container is loaded
        &.ss-c-visual--loaded .ss-c-visual,
        .ss-c-visual {
            opacity: 1;
        }
    }

    // -- visual  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual {
        --visual-speed: 1;

        width: 100%;
        height: 100%;
        display: block;
        transition: opacity 0.5s ease;
    }

    // -- visual--neural  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--neural {
        .ss-c-neural__connection {
            opacity: 0.3;
            stroke-dasharray: 5 5;
            animation: neural-pulse 300ms infinite ease-in-out;

            // [parity] (stripped @for block)

        }

        .ss-c-neural__node {
            transform-origin: center;
            animation: node-breathe 200ms infinite ease-in-out;

            &--input {
                animation-delay: 0s;
            }
            &--hidden {
                animation-delay: 0.5s;
            }
            &--output {
                animation-delay: 1s;
            }
        }
    }

    // -- visual--core  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--core {
        .ss-c-core__ring {
            transform-origin: center;
            animation: ring-pulse 300ms infinite ease-in-out;

            &--1 { animation-delay: 0s; }
            &--2 { animation-delay: 0.5s; }
            &--3 { animation-delay: 1s; }
            &--4 { animation-delay: 1.5s; }
        }

        .ss-c-core__center {
            animation: core-glow 200ms infinite ease-in-out;
        }

        .ss-c-core__particle {
            animation: particle-orbit 300ms infinite linear;
            animation-delay: calc(var(--particle-index) * -0.5s);
        }
    }

    // -- visual--flow  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--flow {
        .ss-c-flow__stream {
            stroke-dasharray: 20 10;
            animation: flow-stream 200ms infinite linear;

            &--1 { animation-duration: 3s; }
            &--2 { animation-duration: 4s; animation-direction: reverse; }
            &--3 { animation-duration: 5s; }
            &--4 { animation-duration: 3.5s; animation-direction: reverse; }
            &--5 { animation-duration: 4.5s; }
        }

        .ss-c-flow__dot {
            animation: flow-dot 200ms infinite ease-in-out;

            // [parity] (stripped @for block)

        }
    }

    // -- visual--hex  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--hex {
        .ss-c-hex__cell {
            transform-origin: center;
            animation: hex-pulse 300ms infinite ease-in-out;
            animation-delay: calc(var(--hex-index) * 0.15s);
            cursor: pointer;

            &:hover {
                fill: unset;
                stroke-width: 2;
                animation-play-state: paused;
            }
        }
    }

    // -- visual--orbital  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--orbital {
        .ss-c-orbital__path {
            stroke-dasharray: 5 10;
            animation: orbital-dash 300ms infinite linear;

            &--1 { animation-duration: 12s; }
            &--2 { animation-duration: 10s; animation-direction: reverse; }
            &--3 { animation-duration: 8s; }
        }

        .ss-c-orbital__sun {
            animation: sun-pulse 200ms infinite ease-in-out;
        }

        .ss-c-orbital__planet {
            transform-origin: q(200) q(200);

            &--1 {
                animation: planet-orbit-1 12s infinite linear;
            }
            &--2 {
                animation: planet-orbit-2 10s infinite linear;
            }
            &--3 {
                animation: planet-orbit-3 8s infinite linear;
            }
        }
    }

    // -- visual--wave  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--wave {
        .ss-c-wave__line {
            animation: wave-flow 200ms infinite ease-in-out;

            &--1 {
                animation-duration: 3s;
            }
            &--2 {
                animation-duration: 4s;
                animation-delay: 0.5s;
            }
            &--3 {
                animation-duration: 5s;
                animation-delay: 1s;
            }
        }
    }

    // -- visual--constellation  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--constellation {
        .ss-c-constellation__line {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: constellation-draw 3s forwards ease-out;
            animation-delay: calc(var(--line-index) * 0.2s);
        }

        .ss-c-constellation__star {
            transform-origin: center;
            animation: star-twinkle 150ms infinite ease-in-out;
            animation-delay: calc(var(--star-index) * 0.3s);
        }
    }

    // -- visual--dna  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--dna {
        .ss-c-dna__node {
            animation: dna-wave 200ms infinite ease-in-out;
            animation-delay: calc(var(--dna-index) * 0.1s);

            &--left {
                animation-name: dna-wave-left;
            }
            &--right {
                animation-name: dna-wave-right;
            }
        }

        .ss-c-dna__bridge {
            animation: dna-bridge 200ms infinite ease-in-out;
            animation-delay: calc(var(--dna-index) * 0.1s);
        }
    }

    // -- visual--tree  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--tree {
        .ss-c-tree__branch {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: tree-grow 4s forwards ease-out;
            animation-delay: calc(var(--branch-depth) * 0.5s);

            &:hover {
                stroke: unset;
            }
        }
    }

    // -- visual--blob  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--blob {
        .ss-c-blob__shape {
            transform-origin: center;

            &--1 {
                animation: blob-morph-1 300ms infinite ease-in-out;
            }
            &--2 {
                animation: blob-morph-2 300ms infinite ease-in-out;
                animation-delay: 1s;
            }
        }
    }

    // -- visual--circuit  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--circuit {
        .ss-c-circuit__path {
            stroke-dasharray: 500;
            stroke-dashoffset: 500;
            animation: circuit-trace 3s forwards ease-out;
            animation-delay: calc(var(--circuit-index) * 0.5s);
        }

        .ss-c-circuit__node {
            transform-origin: center;
            animation: circuit-node-pulse 150ms infinite ease-in-out;
            animation-delay: calc(var(--node-index) * 0.1s);

            &:hover {
                animation-play-state: paused;
                transform: scale(2);
            }
        }
    }

    // -- visual--ripple  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--ripple {
        cursor: pointer;

        .ss-c-ripple__circle {
            transform-origin: center;
            animation: ripple-expand 200ms infinite ease-out;

            // [parity] (stripped @for block)

        }

        .ss-c-ripple__center {
            animation: ripple-center 150ms infinite ease-in-out;
        }

        &:hover {
            .ss-c-ripple__circle {
                animation-duration: 1s;
            }
        }
    }

    // -- visual--particles  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--particles {
        .ss-c-particle {
            transform-origin: center;
            animation: particle-float 300ms infinite ease-in-out;
            animation-delay: calc(var(--particle-index) * 0.1s);
        }
    }

    // -- visual--spiral  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--spiral {
        .ss-c-spiral__path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: spiral-draw 6s infinite ease-in-out;

            &--1 { animation-delay: 0s; }
            &--2 { animation-delay: 0.5s; }
            &--3 { animation-delay: 1s; }
        }

        .ss-c-spiral__center {
            animation: spiral-pulse 200ms infinite ease-in-out;
        }
    }

    // -- visual--matrix  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--matrix {
        .ss-c-matrix__cell {
            animation: matrix-flicker 150ms infinite ease-in-out;
            animation-delay: calc(var(--cell-index) * 0.05s);
        }
    }

    // -- visual--infinity  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--infinity {
        .ss-c-infinity__path {
            stroke-dasharray: 800;
            stroke-dashoffset: 800;
            animation: infinity-trace 6s infinite linear;

            &--1 { animation-duration: 4s; }
            &--2 { animation-duration: 5s; animation-delay: 0.5s; }
            &--3 { animation-duration: 6s; animation-delay: 1s; }
        }

        .ss-c-infinity__dot {
            animation: infinity-glow 200ms infinite ease-in-out;
        }
    }

    // -- visual--soundwave  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--soundwave {
        .ss-c-soundwave__bar {
            transform-origin: center bottom;
            animation: soundwave-bounce 150ms infinite ease-in-out;
            animation-delay: calc(var(--bar-index) * 0.05s);
        }
    }

    // -- visual--atomic  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--atomic {
        .ss-c-atomic__orbit {
            stroke-dasharray: 5 5;
            animation: atomic-orbit-dash 3s infinite linear;

            &--1 { animation-direction: normal; }
            &--2 { animation-direction: reverse; animation-duration: 4s; }
            &--3 { animation-duration: 5s; }
        }

        .ss-c-atomic__electron {
            transform-origin: q(200) q(200);

            &--1 { animation: electron-orbit-1 3s infinite linear; }
            &--2 { animation: electron-orbit-2 4s infinite linear; }
            &--3 { animation: electron-orbit-3 5s infinite linear; }
        }

        .ss-c-atomic__nucleus {
            animation: nucleus-pulse 200ms infinite ease-in-out;
        }
    }

    // -- visual--cube  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--cube {
        .ss-c-cube__wireframe {
            transform-origin: center;
            animation: cube-rotate 12s infinite linear;
        }

        .ss-c-cube__edge {
            stroke-dasharray: 200;
            animation: cube-edge-draw 4s infinite ease-in-out;
            animation-delay: calc(var(--edge-index) * 0.1s);
        }

        .ss-c-cube__vertex {
            animation: cube-vertex-pulse 200ms infinite ease-in-out;
            animation-delay: calc(var(--vertex-index) * 0.2s);
        }
    }

    // -- visual--radar  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual--radar {
        .ss-c-radar__ring {
            animation: radar-ring-pulse 4s infinite ease-out;

            &:nth-child(1) { animation-delay: 0s; }
            &:nth-child(2) { animation-delay: 0.5s; }
            &:nth-child(3) { animation-delay: 1s; }
            &:nth-child(4) { animation-delay: 1.5s; }
        }

        .ss-c-radar__beam {
            transform-origin: q(200) q(200);
            animation: radar-sweep 4s infinite linear;
        }

        .ss-c-radar__blip {
            animation: radar-blip-ping 2s infinite ease-out;
            animation-delay: calc(var(--blip-index) * 0.3s);
        }

        .ss-c-radar__center {
            animation: radar-center-pulse 150ms infinite ease-in-out;
        }
    }

    // -- visuals-grid  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visuals-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(280), 1fr));
        gap: q(10);
        padding: q(10);
    }

    // -- visual-card  (from site-lovelacelabs_ai/src/static/scss/app/_visuals.scss) --
    .ss-c-visual-card {
        display: flex;
        flex-direction: column;
        gap: q(05);

        &__title {
        // [parity] (stripped @include)
        // [parity] (stripped @include)
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-align: center;
            color: unset;
        }

        &__description {
        // [parity] (stripped @include)
            text-align: center;
            color: unset;
            opacity: 0.8;
        }
    }

    // -- section_title  (from site-lovelacelabs_ai/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-section_title {
        // [parity] (stripped @include)
        text-transform: uppercase;
    }

    // -- gradient  (from site-lovelacelabs_ai/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-gradient {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;

        .ss-c-overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: q(400);
            width: q(400);
            background: radial-gradient(
                circle,
                #fff078 0%,
                #ffba45 25%,
                #f5735f 50%,
                #e15c7a 70%,
                #c06fa0 85%,
                #b2d2eb 100%
            );
            border-radius: 50%;
            opacity: 30%;
        }
    }

    // -- intro  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-intro {
        font-size: unset;
        font-weight: unset;
        line-height: $line-height-relaxed;
        color: #525252;
        max-width: q(600);
    }

    // -- small  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-small {
        font-size: $font-size-sm;
        color: #737373;
    }

    // -- link--accent  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-link--accent {
        color: $color-accent;

        &:hover {
            color: $color-accent-dark;
        }
    }

    // -- list-numbered  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-list-numbered {
        counter-reset: list-counter;
        padding-left: unset;

        li {
            counter-increment: list-counter;
            margin-bottom: unset;
            position: relative;

            &::before {
                content: counter(list-counter, decimal-leading-zero);
                position: absolute;
                left: -unset;
        // [parity] (stripped @include)
            }
        }
    }

    // -- label  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-label {
        // [parity] (stripped @include)
    }

    // -- number  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-number {
        // [parity] (stripped @include)
    }

    // -- btn--link  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--link {
        background-color: transparent;
        color: var(--ss-color-text, #1a1a1a);
        border-color: transparent;
        padding: 0;
        font-weight: $font-weight-normal;
        letter-spacing: unset;
        text-transform: uppercase;

        &::after {
            content: '→';
            margin-left: unset;
            transition: transform $transition-base;
        }

        &:hover:not(:disabled) {
            color: $color-gray-500;

            &::after {
                transform: translateX(q(4));
            }
        }
    }

    // -- btn--accent  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--accent {
        background-color: $color-accent;
        color: $color-white;
        border-color: $color-accent;

        &:hover:not(:disabled) {
            background-color: $color-accent-dark;
            border-color: $color-accent-dark;
            color: $color-white;
        }
    }

    // -- btn--small  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--small {
        padding: unset unset;
        font-size: $font-size-xs;
    }

    // -- btn--large  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--large {
        padding: unset unset;
        font-size: $font-size-sm;

        // [parity] (stripped @include block)

    }

    // -- btn__icon  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn__icon {
        width: q(14);
        height: q(14);

        svg {
            width: 100%;
            height: 100%;
        }
    }

    // -- btn--icon-only  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--icon-only {
        padding: unset;

        .ss-c-btn__icon {
            width: q(18);
            height: q(18);
        }
    }

    // -- system-card  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-system-card {
        padding: unset;
        background-color: transparent;
        border: q(1) solid #f2f2f2;
        transition: border-color unset, background-color unset;

        // [parity] (stripped @include block)


        &:hover {
            border-color: #a3a3a3;
            background-color: #fdf8f2;
        }
    }

    // -- system-card__number  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-system-card__number {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- system-card__title  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-system-card__title {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-weight: $font-weight-light;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- system-card__description  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-system-card__description {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- system-card__link  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-system-card__link {
        // [parity] (stripped @include)
        color: var(--ss-color-text, #1a1a1a);
        transition: color $transition-base;

        &::after {
            content: ' →';
            transition: transform $transition-base;
            display: inline-block;
        }

        &:hover {
            color: $color-gray-500;

            &::after {
                transform: translateX(q(4));
            }
        }
    }

    // -- project-card--large  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card--large {
        // [parity] (stripped @include block)

    }

    // -- project-card--featured  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card--featured {
        // [parity] (stripped @include block)

    }

    // -- project-card__image  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card__image {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background-color: #fdf8f2;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform unset;
        }
    }

    // -- project-card__content  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card__content {
        padding: unset 0;
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- project-card__number  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card__number {
        // [parity] (stripped @include)
    }

    // -- project-card__category  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card__category {
        // [parity] (stripped @include)
    }

    // -- project-card__title  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card__title {
        font-family: Georgia, serif;
        font-size: $font-size-lg;
        font-weight: $font-weight-light;
        margin: 0;
        transition: color $transition-base;

        // [parity] (stripped @include block)

    }

    // -- project-card__location  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card__location {
        font-size: $font-size-sm;
        color: #737373;
        margin: 0;
    }

    // -- project-card__description  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card__description {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin: unset 0 0;
    }

    // -- project-card__systems  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-project-card__systems {
        display: flex;
        flex-wrap: wrap;
        gap: unset;
        margin-top: unset;
    }

    // -- team-card__role  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__role {
        font-size: $font-size-sm;
        color: #737373;
        margin: 0;
    }

    // -- value-card__number  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-value-card__number {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- story-card  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card {
        display: flex;
        flex-direction: column;
        background-color: transparent;
        overflow: hidden;
    }

    // -- story-card__link  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;

        &:hover {
            .ss-c-story-card__image {
                transform: scale(1.03);
            }

            .ss-c-story-card__title {
                color: $color-gray-500;
            }
        }
    }

    // -- story-card__cover  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__cover {
        position: relative;
        width: 100%;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        background-color: $color-gray-100;
        margin-bottom: unset;
    }

    // -- story-card__image  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform unset;
    }

    // -- story-card__placeholder  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, $color-gray-100 0%, $color-gray-200 100%);
    }

    // -- story-card__content  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__content {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- story-card__meta  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__meta {
        display: flex;
        align-items: center;
        gap: unset;
        font-size: $font-size-xs;
        color: #737373;
        text-transform: uppercase;
        letter-spacing: $letter-spacing-wide;
    }

    // -- story-card__category  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__category {
        color: #525252;
    }

    // -- story-card__date  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__date {
        &::before {
            content: '·';
            margin-right: unset;
        }
    }

    // -- story-card__title  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__title {
        font-family: Georgia, serif;
        font-size: $font-size-lg;
        font-weight: $font-weight-light;
        line-height: $line-height-snug;
        margin: 0;
        transition: color $transition-base;

        // [parity] (stripped @include block)

    }

    // -- story-card__excerpt  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__excerpt {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin: 0;

        // Limit to 3 lines
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    // -- story-card__read-time  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-story-card__read-time {
        font-size: $font-size-xs;
        color: #737373;
    }

    // -- form-label--checkbox  (from site-matter_tech/src/static/scss/components/_forms.scss) --
    .ss-c-form-label--checkbox {
        font-size: $font-size-sm;
        color: #525252;
        text-transform: none;
        letter-spacing: normal;

        a {
            color: var(--ss-color-text, #1a1a1a);
            text-decoration: underline;

            &:hover {
                color: $color-accent;
            }
        }
    }

    // -- form-checkbox  (from site-matter_tech/src/static/scss/components/_forms.scss) --
    .ss-c-form-checkbox {
        width: q(20);
        height: q(20);
        margin-top: q(2);
        accent-color: $color-black;
        cursor: pointer;
    }

    // -- form-textarea--error  (from site-matter_tech/src/static/scss/components/_forms.scss) --
    .ss-c-form-textarea--error {
        border-color: $color-error;

        &:focus {
            border-color: $color-error;
        }
    }

    // -- form-success  (from site-matter_tech/src/static/scss/components/_forms.scss) --
    .ss-c-form-success {
        padding: unset;
        background-color: rgba($color-success, 0.1);
        border: q(1) solid $color-success;
        border-radius: 0;
        color: color.adjust($color-success, $lightness: -15%);
    }

    // -- tag--dark  (from site-matter_tech/src/static/scss/components/_tags.scss) --
    .ss-c-tag--dark {
        background-color: $color-black;
        color: $color-white;
    }

    // -- tag--accent  (from site-matter_tech/src/static/scss/components/_tags.scss) --
    .ss-c-tag--accent {
        background-color: $color-accent;
        color: $color-white;
    }

    // -- tag--outline  (from site-matter_tech/src/static/scss/components/_tags.scss) --
    .ss-c-tag--outline {
        background-color: transparent;
        border: q(1) solid var(--ss-color-border, #e5e5e5);
        color: #525252;
    }

    // -- section-container  (from site-matter_tech/src/static/scss/layout/_container.scss) --
    .ss-c-section-container {
        // [parity] (stripped @include)
    }

    // -- section-container--narrow  (from site-matter_tech/src/static/scss/layout/_container.scss) --
    .ss-c-section-container--narrow {
        // [parity] (stripped @include)
    }

    // -- skip-to-content  (from site-matter_tech/src/static/scss/layout/_container.scss) --
    .ss-c-skip-to-content {
        // [parity] (stripped @include)
    }

    // -- split  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-split {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)

    }

    // -- split--reverse  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-split--reverse {
        // [parity] (stripped @include block)

    }

    // -- split--content-left  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-split--content-left {
        // [parity] (stripped @include block)

    }

    // -- split--content-right  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-split--content-right {
        // [parity] (stripped @include block)

    }

    // -- masonry  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-masonry {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- masonry__item--large  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-masonry__item--large {
        // [parity] (stripped @include block)


        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- flex--center  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-flex--center {
        // [parity] (stripped @include)
    }

    // -- flex--between  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-flex--between {
        // [parity] (stripped @include)
    }

    // -- flex--column  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-flex--column {
        // [parity] (stripped @include)
    }

    // -- flex--gap-sm  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-flex--gap-sm {
        gap: unset;
    }

    // -- flex--gap-md  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-flex--gap-md {
        gap: unset;
    }

    // -- flex--gap-lg  (from site-matter_tech/src/static/scss/layout/_grid.scss) --
    .ss-c-flex--gap-lg {
        gap: unset;
    }

    // -- site-header--scrolled  (from site-matter_tech/src/static/scss/layout/_header.scss) --
    .ss-c-site-header--scrolled {
        &::after {
            background-color: var(--ss-color-border, #e5e5e5);
        }
    }

    // -- nav-number  (from site-matter_tech/src/static/scss/layout/_header.scss) --
    .ss-c-nav-number {
        // [parity] (stripped @include)
        font-size: $font-size-sm;
        color: $color-gray-400;

        // [parity] (stripped @include block)

    }

    // -- contact-form__title  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-contact-form__title {
        font-size: $font-size-xl;
        font-weight: $font-weight-bold;
        margin-bottom: unset;
    }

    // -- contact-info__block  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-contact-info__block {
        h3 {
        // [parity] (stripped @include)
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-sm;
            color: #525252;
            margin-bottom: unset;

            &:last-child {
                margin-bottom: 0;
            }
        }

        a {
            color: var(--ss-color-text, #1a1a1a);
            transition: color $transition-fast;

            &:hover {
                color: $color-accent;
            }
        }
    }

    // -- contact-info__heading  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-contact-info__heading {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- contact-social  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-contact-social {
        display: flex;
        flex-direction: column;
        gap: unset;

        a {
            font-size: $font-size-sm;
            color: var(--ss-color-text, #1a1a1a);

            &:hover {
                color: $color-accent;
            }
        }
    }

    // -- section--inquiries  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-section--inquiries {
        padding-bottom: 0;
    }

    // -- inquiries-grid  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-inquiries-grid {
        display: grid;
        gap: unset;
        grid-template-columns: 1fr;

        // [parity] (stripped @include block)

    }

    // -- inquiry-block  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-inquiry-block {
        padding-bottom: unset;
        border-bottom: q(1) solid #f2f2f2;

        // [parity] (stripped @include block)

    }

    // -- inquiry-heading  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-inquiry-heading {
        font-family: Georgia, serif;
        font-size: $font-size-2xl;
        font-weight: $font-weight-light;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- inquiry-description  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-inquiry-description {
        font-size: $font-size-base;
        color: #525252;
        line-height: $line-height-relaxed;
        margin-bottom: unset;

        &:last-of-type {
            margin-bottom: unset;
        }
    }

    // -- inquiry-contact  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-inquiry-contact {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- inquiry-label  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-inquiry-label {
        // [parity] (stripped @include)
        color: #737373;
    }

    // -- inquiry-email  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-inquiry-email {
        font-size: $font-size-lg;
        color: var(--ss-color-text, #1a1a1a);
        text-decoration: none;
        transition: color $transition-fast;

        &:hover {
            color: $color-accent;
        }
    }

    // -- section--map  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-section--map {
        padding: 0;
    }

    // -- map-container  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-map-container {
        height: q(400);
        background-color: $color-gray-100;
    }

    // -- hero--compact  (from site-matter_tech/src/static/scss/sections/_hero.scss) --
    .ss-c-hero--compact {
        min-height: auto;
        padding-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- hero-container  (from site-matter_tech/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-container {
        // [parity] (stripped @include)
        display: grid;
        gap: unset;
        align-items: center;

        // [parity] (stripped @include block)

    }

    // -- hero-accent  (from site-matter_tech/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-accent {
        font-style: italic;
        color: inherit;
    }

    // -- hero-image  (from site-matter_tech/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-image {
        width: 100%;
        height: auto;
        max-height: q(600);
        object-fit: contain;
    }

    // -- legal-header  (from site-matter_tech/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-header {
        margin-bottom: unset;
    }

    // -- legal-label  (from site-matter_tech/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-label {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- legal-title  (from site-matter_tech/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-title {
        font-size: $font-size-3xl;
        font-weight: $font-weight-bold;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- legal-table  (from site-matter_tech/src/static/scss/sections/_legal.scss) --
    .ss-c-legal-table {
        width: 100%;
        margin: unset 0;
        border-collapse: collapse;

        th,
        td {
            padding: unset unset;
            text-align: left;
            border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);
        }

        th {
        // [parity] (stripped @include)
            background-color: #f2f2f2;
        }

        td {
            font-size: $font-size-sm;
            color: #525252;
        }
    }

    // -- process-flow  (from site-matter_tech/src/static/scss/sections/_process.scss) --
    .ss-c-process-flow {
        display: flex;
        flex-direction: column;
        gap: unset;

        // [parity] (stripped @include block)

    }

    // -- process-step__number  (from site-matter_tech/src/static/scss/sections/_process.scss) --
    .ss-c-process-step__number {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- process-step__title  (from site-matter_tech/src/static/scss/sections/_process.scss) --
    .ss-c-process-step__title {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-weight: $font-weight-light;
        margin-bottom: unset;
    }

    // -- process-step__description  (from site-matter_tech/src/static/scss/sections/_process.scss) --
    .ss-c-process-step__description {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin: 0;
    }

    // -- process-arrow  (from site-matter_tech/src/static/scss/sections/_process.scss) --
    .ss-c-process-arrow {
        display: none;

        // [parity] (stripped @include block)

    }

    // -- section--gray  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-section--gray {
        background-color: #f2f2f2;
    }

    // -- section--cream  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-section--cream {
        background-color: #fdf8f2;
    }

    // -- section-intro  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-section-intro {
        font-size: unset;
        font-weight: unset;
        color: #525252;
        line-height: $line-height-relaxed;
        margin: 0;
        max-width: q(560);

        // [parity] (stripped @include block)

    }

    // -- section--cta  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-section--cta {
        padding: unset 0;
        background-color: $color-black;
        color: $color-white;

        // [parity] (stripped @include block)

    }

    // -- systems-grid  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-systems-grid {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)

    }

    // -- system-detail  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-system-detail {
        display: grid;
        gap: unset;
        padding: unset 0;
        border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);

        // [parity] (stripped @include block)


        &:last-child {
            border-bottom: none;
        }
    }

    // -- system-detail--reversed  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-system-detail--reversed {
        // [parity] (stripped @include block)

    }

    // -- system-detail__number  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-system-detail__number {
        // [parity] (stripped @include)
        font-size: $font-size-xl;
        margin-bottom: unset;
    }

    // -- system-detail__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-system-detail__title {
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- system-detail__description  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-system-detail__description {
        font-size: unset;
        color: #525252;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- system-detail__features  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-system-detail__features {
        margin-bottom: unset;
        padding-left: unset;

        li {
            position: relative;
            font-size: $font-size-sm;
            color: #525252;
            margin-bottom: unset;

            &::before {
                content: '–';
                position: absolute;
                left: -unset;
                color: $color-gray-400;
            }
        }
    }

    // -- system-detail__visual  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-system-detail__visual {
        img {
            width: 100%;
            height: auto;
        }
    }

    // -- projects-grid  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-projects-grid {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- projects-masonry  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-projects-masonry {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)

    }

    // -- services-list  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-services-list {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)

    }

    // -- service-item  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-item {
        padding: unset;
        border-left: q(2) solid $color-black;
    }

    // -- service-item__number  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-item__number {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- service-item__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-item__title {
        font-size: $font-size-xl;
        font-weight: $font-weight-bold;
        margin-bottom: unset;
    }

    // -- service-item__description  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-item__description {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin: 0;
    }

    // -- service-detail__header  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-detail__header {
        display: flex;
        align-items: baseline;
        gap: unset;
        margin-bottom: unset;
    }

    // -- service-detail__number  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-detail__number {
        // [parity] (stripped @include)
        font-size: $font-size-xl;
    }

    // -- service-detail__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-detail__title {
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        margin: 0;
    }

    // -- service-detail__description  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-detail__description {
        font-size: unset;
        color: #525252;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
        max-width: q(700);
    }

    // -- service-detail__offerings  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-service-detail__offerings {
        h4 {
        // [parity] (stripped @include)
            margin-bottom: unset;
        }

        ul {
            padding-left: unset;

            li {
                position: relative;
                font-size: $font-size-sm;
                color: #525252;
                margin-bottom: unset;

                &::before {
                    content: '–';
                    position: absolute;
                    left: -unset;
                    color: $color-gray-400;
                }
            }
        }
    }

    // -- team-cta  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-team-cta {
        margin-top: unset;
        text-align: center;

        p {
            margin-bottom: unset;
            color: #525252;
        }
    }

    // -- recognition-list  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-recognition-list {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- recognition-item  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-recognition-item {
        display: flex;
        align-items: baseline;
        gap: unset;
        padding: unset 0;
        border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);
    }

    // -- recognition-item__year  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-recognition-item__year {
        // [parity] (stripped @include)
        min-width: q(50);
    }

    // -- recognition-item__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-recognition-item__title {
        font-size: unset;
        font-weight: $font-weight-medium;
    }

    // -- philosophy-grid  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-philosophy-grid {
        display: grid;
        gap: unset;
        align-items: center;

        // [parity] (stripped @include block)

    }

    // -- philosophy-content  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-philosophy-content {
        p {
            margin-bottom: unset;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    // -- engagement-steps  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-engagement-steps {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- engagement-step  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-engagement-step {
        padding: unset;
        background-color: #f2f2f2;
        border-left: q(2) solid $color-black;
    }

    // -- engagement-step__number  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-engagement-step__number {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- engagement-step__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-engagement-step__title {
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        margin-bottom: unset;
    }

    // -- engagement-step__description  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-engagement-step__description {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin: 0;
    }

    // -- content-grid  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-content-grid {
        max-width: q(720);

        &--wide {
            max-width: q(900);
        }
    }

    // -- content-block  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-content-block {
        margin-bottom: unset;

        &:last-child {
            margin-bottom: 0;
        }
    }

    // -- content-label  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-content-label {
        // [parity] (stripped @include)
        display: block;
        margin-bottom: unset;
    }

    // -- content-heading  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-content-heading {
        // [parity] (stripped @include)
        font-size: $font-size-2xl;
        margin-bottom: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- content-text  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-content-text {
        font-size: $font-size-base;
        color: #525252;
        line-height: $line-height-relaxed;
        margin-bottom: unset;

        &--large {
            font-size: $font-size-lg;

            // [parity] (stripped @include block)

        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    // -- research-card  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-research-card {
        padding: unset;
        background-color: #f2f2f2;
        border-left: q(2) solid $color-black;
    }

    // -- research-card__number  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-research-card__number {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- research-card__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-research-card__title {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-weight: $font-weight-light;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- research-card__description  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-research-card__description {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- research-card__focus  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-research-card__focus {
        padding-left: unset;

        li {
            font-size: $font-size-sm;
            color: #737373;
            margin-bottom: unset;

            &::marker {
                color: $color-gray-400;
            }
        }
    }

    // -- positions-list  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-positions-list {
        display: flex;
        flex-direction: column;
    }

    // -- position-item  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-item {
        padding: unset 0;
        border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);

        &:first-child {
            border-top: q(1) solid var(--ss-color-border, #e5e5e5);
        }
    }

    // -- position-info  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-info {
        margin-bottom: unset;
    }

    // -- position-title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-title {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-weight: $font-weight-light;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- position-location  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-location {
        // [parity] (stripped @include)
        margin: 0;
    }

    // -- position-description  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-description {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin: 0;
        max-width: q(640);
    }

    // -- partners-grid  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-partners-grid {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- partner-category  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-partner-category {
        padding: unset;
        background-color: #f2f2f2;
    }

    // -- partner-category__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-partner-category__title {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- partner-list  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-partner-list {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            font-size: $font-size-sm;
            color: #525252;
            padding: unset 0;
            border-bottom: q(1) solid #f2f2f2;

            &:last-child {
                border-bottom: none;
            }
        }
    }

    // -- press-list  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-press-list {
        display: flex;
        flex-direction: column;
    }

    // -- press-item  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-press-item {
        padding: unset 0;
        border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);

        &:first-child {
            border-top: q(1) solid var(--ss-color-border, #e5e5e5);
        }
    }

    // -- press-item__date  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-press-item__date {
        // [parity] (stripped @include)
        display: block;
        margin-bottom: unset;
    }

    // -- press-item__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-press-item__title {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-weight: $font-weight-light;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- press-item__excerpt  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-press-item__excerpt {
        font-size: $font-size-sm;
        color: #525252;
        line-height: $line-height-relaxed;
        margin: 0;
        max-width: q(640);
    }

    // -- material-content  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-content {
        max-width: q(960);
    }

    // -- material-overview  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-overview {
        margin-bottom: unset;
    }

    // -- material-description  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-description {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-weight: $font-weight-light;
        line-height: $line-height-relaxed;
        margin: 0;

        // [parity] (stripped @include block)

    }

    // -- material-grid  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-grid {
        display: grid;
        gap: unset;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- material-section  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-section {
        padding: unset;
        background-color: #f2f2f2;
    }

    // -- material-section__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-section__title {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- material-list  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    // -- material-list__item  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-list__item {
        font-size: $font-size-sm;
        color: #525252;
        padding: unset 0;
        border-bottom: q(1) solid #f2f2f2;

        &:last-child {
            border-bottom: none;
        }
    }

    // -- material-related  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-related {
        padding-top: unset;
        border-top: q(1) solid var(--ss-color-border, #e5e5e5);
    }

    // -- material-related__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-related__title {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- material-related__grid  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-related__grid {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- material-card  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-card {
        display: flex;
        flex-direction: column;
        padding: unset;
        background-color: #f2f2f2;
        text-decoration: none;
        color: inherit;
        transition: opacity unset;

        &:hover {
            opacity: 0.7;
        }
    }

    // -- material-card__name  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-card__name {
        font-family: Georgia, serif;
        font-size: $font-size-lg;
        font-weight: $font-weight-light;
        margin-bottom: unset;
    }

    // -- material-card__tagline  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-material-card__tagline {
        font-size: $font-size-xs;
        color: #525252;
        text-transform: uppercase;
        letter-spacing: $letter-spacing-wide;
    }

    // -- article-content  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-content {
        max-width: q(720);
    }

    // -- article-lead  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-lead {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-weight: $font-weight-light;
        line-height: $line-height-relaxed;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- article-body  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-body {
        margin-bottom: unset;

        p {
            font-size: $font-size-base;
            line-height: $line-height-relaxed;
            color: #525252;
            margin-bottom: unset;
        }
    }

    // -- article-heading  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-heading {
        font-family: Georgia, serif;
        font-size: $font-size-lg;
        font-weight: $font-weight-light;
        margin-top: unset;
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- article-footer  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-footer {
        display: flex;
        flex-direction: column;
        gap: unset;
        padding-top: unset;
        border-top: q(1) solid var(--ss-color-border, #e5e5e5);

        // [parity] (stripped @include block)

    }

    // -- article-meta  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-meta {
        display: flex;
        gap: unset;
    }

    // -- article-meta__date  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-meta__date {
        // [parity] (stripped @include)
    }

    // -- article-back  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-back {
        font-size: $font-size-sm;
        color: #525252;
        transition: color $transition-base;

        &:hover {
            color: var(--ss-color-text, #1a1a1a);
        }
    }

    // -- article-related  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-related {
        margin-top: unset;
        padding-top: unset;
        border-top: q(1) solid var(--ss-color-border, #e5e5e5);
    }

    // -- article-related__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-related__title {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- article-related__grid  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-related__grid {
        display: grid;
        gap: unset;

        // [parity] (stripped @include block)

    }

    // -- article-card  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-card {
        display: flex;
        flex-direction: column;
        padding: unset;
        background-color: #f2f2f2;
        text-decoration: none;
        color: inherit;
        transition: opacity unset;

        &:hover {
            opacity: 0.7;
        }
    }

    // -- article-card__category  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-card__category {
        // [parity] (stripped @include)
        margin-bottom: unset;
    }

    // -- article-card__title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-card__title {
        font-family: Georgia, serif;
        font-size: $font-size-lg;
        font-weight: $font-weight-light;
        margin-bottom: unset;
    }

    // -- article-card__meta  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-article-card__meta {
        font-size: $font-size-xs;
        color: #525252;
    }

    // -- systems-intro  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-intro {
        max-width: q(720);
        margin-bottom: unset;

        // [parity] (stripped @include block)

    }

    // -- systems-intro__text  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-intro__text {
        font-size: unset;
        font-weight: unset;
        line-height: $line-height-relaxed;
        color: #525252;

        // [parity] (stripped @include block)

    }

    // -- systems-category  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category {
        margin-bottom: unset;

        // [parity] (stripped @include block)


        &:last-child {
            margin-bottom: 0;
        }
    }

    // -- systems-category__title  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category__title {
        font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        letter-spacing: unset;
        text-transform: uppercase;
        color: #737373;
        margin-bottom: unset;
        padding-bottom: unset;
        border-bottom: q(1) solid #f2f2f2;

        // [parity] (stripped @include block)

    }

    // -- systems-category__grid  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;

        // [parity] (stripped @include block)


        // [parity] (stripped @include block)

    }

    // -- systems-category__item  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category__item {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: opacity unset;

        &:hover {
            .ss-c-systems-category__image img {
                transform: scale(1.03);
            }

            .ss-c-systems-category__name {
                color: #525252;
            }
        }
    }

    // -- systems-category__image  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category__image {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background-color: $color-gray-100;
        margin-bottom: unset;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform unset;
        }
    }

    // -- systems-category__placeholder  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category__placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, $color-gray-100 0%, $color-gray-200 100%);
    }

    // -- systems-category__info  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category__info {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- systems-category__name  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category__name {
        font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: $font-size-base;
        font-weight: $font-weight-light;
        color: var(--ss-color-text, #1a1a1a);
        transition: color $transition-base;

        // [parity] (stripped @include block)

    }

    // -- systems-category__subtitle  (from site-matter_tech/src/static/scss/sections/_systems.scss) --
    .ss-c-systems-category__subtitle {
        font-size: $font-size-sm;
        font-weight: unset;
        color: #737373;
    }

    // -- hidden-mobile  (from site-matter_tech/src/static/scss/utilities/_display.scss) --
    .ss-c-hidden-mobile {
        // [parity] (stripped @include block)

    }

    // -- hidden-desktop  (from site-matter_tech/src/static/scss/utilities/_display.scss) --
    .ss-c-hidden-desktop {
        // [parity] (stripped @include block)

    }

    // -- pt-4  (from site-matter_tech/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pt-4 { padding-top: unset; }

    // -- pt-12  (from site-matter_tech/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pt-12 { padding-top: unset; }

    // -- pb-4  (from site-matter_tech/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pb-4 { padding-bottom: unset; }

    // -- pb-12  (from site-matter_tech/src/static/scss/utilities/_spacing.scss) --
    .ss-c-pb-12 { padding-bottom: unset; }

    // -- normal-case  (from site-matter_tech/src/static/scss/utilities/_text.scss) --
    .ss-c-normal-case { text-transform: none; }

    // -- media  (from site-mesmera_io/src/static/scss/app/_components.scss) --
    .ss-c-media {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: $radius-xl;
        background-color: #f2f2f2;

        &--rounded-lg {
            border-radius: $radius-2xl;
        }

        &--full {
            border-radius: 0;
        }

        img,
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        // Aspect ratios
        &--16x9 { aspect-ratio: 16 / 9; }
        &--4x3 { aspect-ratio: 4 / 3; }
        &--1x1 { aspect-ratio: 1 / 1; }
        &--2x1 { aspect-ratio: 2 / 1; }
    }

    // -- icon  (from site-mesmera_io/src/static/scss/app/_components.scss) --
    .ss-c-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1em;
        height: 1em;

        svg {
            width: 100%;
            height: 100%;
        }

        &--sm { font-size: q(16); }
        &--md { font-size: q(24); }
        &--lg { font-size: q(32); }
        &--xl { font-size: q(48); }
    }

    // -- feature  (from site-mesmera_io/src/static/scss/app/_components.scss) --
    .ss-c-feature {
        display: flex;
        flex-direction: column;
        gap: unset;

        @media (min-width: $breakpoint-md) {
            flex-direction: row;
            gap: unset;
        }

        &__icon {
            flex-shrink: 0;
            width: q(48);
            height: q(48);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f2f2f2;
            border-radius: $radius-lg;
            color: var(--ss-color-text, #1a1a1a);

            @media (min-width: $breakpoint-md) {
                width: q(64);
                height: q(64);
            }
        }

        &__content {
            flex: 1;
        }

        &__title {
            margin-bottom: unset;
        }

        &__description {
            color: #525252;
        }
    }

    // -- max-w-narrow  (from site-mesmera_io/src/static/scss/app/_grid.scss) --
    .ss-c-max-w-narrow {
        max-width: q(600);
    }

    // -- sticky--top  (from site-mesmera_io/src/static/scss/app/_grid.scss) --
    .ss-c-sticky--top {
        position: sticky;
        top: 0;
    }

    // -- site-header__inner  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: unset;
        padding: 0 unset;
        max-width: 100%;

        @media (min-width: $breakpoint-md) {
            height: unset;
            padding: 0 unset;
        }

        @media (min-width: $breakpoint-lg) {
            padding: 0 unset;
        }
    }

    // -- site-header__left  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__left {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- site-header__logo  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #ffffff;
        transition: opacity $transition-fast;

        &:hover {
            opacity: 0.6;
        }
    }

    // -- site-header__logo-icon  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__logo-icon {
        width: q(28);
        height: q(28);

        @media (min-width: $breakpoint-md) {
            width: q(32);
            height: q(32);
        }
    }

    // -- site-header__home-link  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__home-link {
        font-size: unset;
        font-weight: unset;
        color: #ffffff;
        text-decoration: none;
        transition: opacity $transition-fast;

        &:hover {
            opacity: 0.6;
        }
    }

    // -- site-header__right  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__right {
        display: flex;
        align-items: center;
    }

    // -- site-header__menu-toggle  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__menu-toggle {
        appearance: none;
        background: none;
        border: none;
        padding: unset 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- site-header__menu-toggle-text  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__menu-toggle-text {
        font-size: unset;
        font-weight: unset;
        color: #ffffff;
        transition: opacity $transition-fast;

        .ss-c-site-header__menu-toggle:hover & {
            opacity: 0.6;
        }
    }

    // -- site-header__menu-icon  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: q(5);
        width: q(20);
        height: q(16);

        span {
            display: block;
            width: 100%;
            height: q(2);
            background-color: #ffffff;
            transition: opacity $transition-fast;
        }

        .ss-c-site-header__menu-toggle:hover & span {
            opacity: 0.6;
        }
    }

    // -- site-menu  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu {
        position: fixed;
        inset: 0;
        z-index: unset;
        background-color: var(--ss-color-fill, #ffffff);
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity unset,
            visibility unset;

        // Open state
        &.is-open {
            opacity: 1;
            visibility: visible;
        }
    }

    // -- site-menu__inner  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0 unset;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        @media (min-width: $breakpoint-md) {
            padding: 0 unset;
        }

        @media (min-width: $breakpoint-lg) {
            padding: 0 unset;
        }
    }

    // -- site-menu__header  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: unset;
        flex-shrink: 0;

        @media (min-width: $breakpoint-md) {
            height: unset;
        }
    }

    // -- site-menu__header-left  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__header-left {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- site-menu__header-right  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__header-right {
        display: flex;
        align-items: center;
    }

    // -- site-menu__logo  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--ss-color-text, #1a1a1a);
        transition: opacity $transition-fast;

        &:hover {
            opacity: 0.6;
        }
    }

    // -- site-menu__logo-icon  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__logo-icon {
        width: q(28);
        height: q(28);

        @media (min-width: $breakpoint-md) {
            width: q(32);
            height: q(32);
        }
    }

    // -- site-menu__home-link  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__home-link {
        font-size: unset;
        font-weight: unset;
        color: var(--ss-color-text, #1a1a1a);
        text-decoration: none;
        transition: opacity $transition-fast;

        &:hover {
            opacity: 0.6;
        }
    }

    // -- site-menu__close  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__close {
        appearance: none;
        background: none;
        border: none;
        padding: unset 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- site-menu__close-text  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__close-text {
        font-size: unset;
        font-weight: unset;
        color: var(--ss-color-text, #1a1a1a);
        transition: opacity $transition-fast;

        .ss-c-site-menu__close:hover & {
            opacity: 0.6;
        }
    }

    // -- site-menu__close-icon  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__close-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: q(20);
        height: q(16);
        position: relative;

        span {
            position: absolute;
            width: 100%;
            height: q(2);
            background-color: var(--ss-color-text, #1a1a1a);
            transition: opacity $transition-fast;

            &:first-child {
                transform: rotate(45deg);
            }

            &:last-child {
                transform: rotate(-45deg);
            }
        }

        .ss-c-site-menu__close:hover & span {
            opacity: 0.6;
        }
    }

    // -- site-menu__nav  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__nav {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: unset 0;

        @media (min-width: $breakpoint-md) {
            padding: unset 0;
        }
    }

    // -- site-menu__list  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
    }

    // -- site-menu__item  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__item {
        margin: 0;
        padding: 0;
        border-bottom: none;

        &:first-child {
            border-top: none;
        }
    }

    // -- site-menu__link  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__link {
        display: inline-block;
        padding: unset 0;
        font-size: unset;
        font-weight: $font-weight-semibold;
        line-height: $line-height-tight;
        letter-spacing: $letter-spacing-tight;
        color: var(--ss-color-text, #1a1a1a);
        text-decoration: none;
        transition: opacity $transition-fast;

        @media (min-width: $breakpoint-md) {
            font-size: unset;
            padding: unset 0;
        }

        @media (min-width: $breakpoint-lg) {
            font-size: unset;
            padding: unset 0;
        }

        &:hover {
            opacity: 0.4;
        }
    }

    // -- headline  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-headline {
        font-family: unset;
        font-size: unset;
        font-weight: $font-weight-semibold;
        line-height: $line-height-snug;
        letter-spacing: $letter-spacing-tight;

        @media (min-width: $breakpoint-md) {
            font-size: unset;
        }

        @media (min-width: $breakpoint-lg) {
            font-size: unset;
        }
    }

    // -- title  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-title {
        font-family: unset;
        font-size: unset;
        font-weight: $font-weight-semibold;
        line-height: $line-height-snug;
        letter-spacing: $letter-spacing-tight;

        @media (min-width: $breakpoint-md) {
            font-size: unset;
        }

        @media (min-width: $breakpoint-lg) {
            font-size: unset;
        }
    }

    // -- subtitle  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-subtitle {
        font-size: unset;
        font-weight: $font-weight-medium;
        line-height: $line-height-normal;

        @media (min-width: $breakpoint-md) {
            font-size: unset;
        }
    }

    // -- body  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-body {
        font-size: unset;
        font-weight: unset;
        line-height: $line-height-relaxed;

        &--lg {
            font-size: unset;

            @media (min-width: $breakpoint-md) {
                font-size: unset;
            }
        }

        &--sm {
            font-size: unset;
        }
    }

    // -- caption  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-caption {
        font-size: unset;
        font-weight: unset;
        line-height: $line-height-normal;
        color: #525252;
    }

    // -- text-inverted  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-text-inverted { color: #ffffff; }

    // -- text-pretty  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-text-pretty {
        text-wrap: pretty;
    }

    // -- prose  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-prose {
        max-width: q(800);

        > * + * {
            margin-top: unset;
        }

        h2 {
            font-size: unset;
            margin-top: unset;

            @media (min-width: $breakpoint-md) {
                font-size: unset;
            }
        }

        h3 {
            font-size: unset;
            margin-top: unset;

            @media (min-width: $breakpoint-md) {
                font-size: unset;
            }
        }

        p {
            margin-bottom: unset;
        }

        ul, ol {
            padding-left: unset;
            margin-bottom: unset;
        }

        li {
            margin-bottom: unset;
        }

        ul li {
            list-style-type: disc;
        }

        ol li {
            list-style-type: decimal;
        }

        a {
            text-decoration: underline;
            text-underline-offset: q(2);
        }

        blockquote {
            padding-left: unset;
            border-left: q(3) solid var(--ss-color-border, #e5e5e5);
            font-style: italic;
            color: #525252;
        }

        code {
            font-family: unset;
            font-size: 0.9em;
            background-color: #f2f2f2;
            padding: 0.125em 0.375em;
            border-radius: $radius-sm;
        }

        pre {
            background-color: #0a0a0a;
            color: #ffffff;
            padding: unset;
            border-radius: $radius-lg;
            overflow-x: auto;

            code {
                background: none;
                padding: 0;
            }
        }

        img {
            border-radius: $radius-lg;
            margin-top: unset;
            margin-bottom: unset;
        }
    }

    // -- header-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-header-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: q(72);
    }

    // -- header-brand  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-header-brand {
        flex-shrink: 0;
    }

    // -- brand-link  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-link {
        display: flex;
        align-items: center;
        gap: unset;
        color: $color-gray-900;

        &:hover {
            color: $color-gray-900;

            .ss-c-brand-icon {
                color: unset;
            }
        }
    }

    // -- brand-icon  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-icon {
        width: q(32);
        height: q(32);
        color: unset;
        transition: color $transition-fast;
    }

    // -- brand-text  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-text {
        display: flex;
        flex-direction: column;
    }

    // -- brand-name  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-name {
        font-size: $font-size-lg;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.2;
    }

    // -- brand-tagline  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-tagline {
        font-size: $font-size-xs;
        color: $color-gray-500;
        letter-spacing: 0.02em;
    }

    // -- header-nav  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-header-nav {
        display: none;

        @media (min-width: q(1024)) {
            display: block;
        }
    }

    // -- nav-list  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-nav-list {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- header-actions  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-header-actions {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- search-trigger  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-trigger {
        width: q(40);
        height: q(40);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: q(9999);
        color: $color-gray-600;
        transition: all $transition-fast;

        svg {
            width: q(20);
            height: q(20);
        }

        &:hover {
            background: $color-gray-100;
            color: $color-gray-900;
        }
    }

    // -- mobile-nav-toggle  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: q(40);
        height: q(40);
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 0;

        @media (min-width: q(1024)) {
            display: none;
        }

        &:hover {
            background: $color-gray-100;
        }
    }

    // -- hamburger  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-hamburger {
        width: q(20);
        height: q(2);
        background: $color-gray-700;
        position: relative;

        &::before, &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: q(2);
            background: $color-gray-700;
            left: 0;
        }

        &::before { top: q(-6); }
        &::after { bottom: q(-6); }
    }

    // -- hero-eyebrow  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-hero-eyebrow {
        font-size: $font-size-sm;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: unset;
        margin-bottom: unset;
    }

    // -- taxonomy-tree  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-taxonomy-tree {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
        box-shadow: $shadow-lg;
    }

    // -- tree-node  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-tree-node {
        display: flex;
        align-items: center;
        gap: unset;
        padding: unset unset;
        border-radius: 0;
        border: q(1) solid $color-gray-200;
        background: $color-white;
        min-width: q(200);
        transition: all $transition-fast;

        &.active {
            border-color: unset;
            background: unset;

            .ss-c-node-label {
                color: unset;
            }
        }
    }

    // -- node-label  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-node-label {
        font-size: $font-size-sm;
        font-weight: 500;
        color: $color-gray-800;
        font-style: italic;
    }

    // -- node-type  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-node-type {
        font-size: $font-size-xs;
        color: $color-gray-500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-left: auto;
    }

    // -- tree-connector  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-tree-connector {
        width: q(1);
        height: q(16);
        background: $color-gray-300;
        margin-left: q(24);
    }

    // -- btn-sm  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-btn-sm {
        padding: unset unset;
        font-size: $font-size-xs;
    }

    // -- btn-ghost  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-btn-ghost {
        background: transparent;
        color: $color-gray-700;

        &:hover {
            background: $color-gray-100;
        }
    }

    // -- stats-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stats-section {
        padding: unset 0;
        background: $color-gray-900;
    }

    // -- stats-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stats-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    // -- stat-value  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-value {
        display: block;
        font-size: $font-size-3xl;
        font-weight: 600;
        color: $color-white;
        letter-spacing: -0.02em;
        margin-bottom: unset;
    }

    // -- stat-detail  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-detail {
        display: block;
        font-size: $font-size-xs;
        color: $color-gray-500;
    }

    // -- features-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-features-section {
        padding: unset 0;
    }

    // -- features-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-features-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- features-grid  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-features-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: q(1024)) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- feature-icon  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-feature-icon {
        width: q(48);
        height: q(48);
        display: flex;
        align-items: center;
        justify-content: center;
        background: unset;
        border-radius: 0;
        margin-bottom: unset;

        svg {
            width: q(24);
            height: q(24);
            color: unset;
        }
    }

    // -- feature-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-feature-title {
        font-size: $font-size-lg;
        font-weight: 600;
        margin-bottom: unset;
    }

    // -- feature-description  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-feature-description {
        font-size: $font-size-sm;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
    }

    // -- taxonomy-preview-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-taxonomy-preview-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- taxonomy-preview-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-taxonomy-preview-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- taxonomy-levels  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-taxonomy-levels {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: q(480);
        margin: 0 auto unset;
    }

    // -- level-item  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-level-item {
        display: flex;
        align-items: center;
        gap: unset;
        width: 100%;
        padding: unset unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;

        &--optional {
            border-style: dashed;

            .ss-c-level-content h4 {
                color: $color-gray-500;
            }
        }
    }

    // -- level-rank  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-level-rank {
        width: q(28);
        height: q(28);
        display: flex;
        align-items: center;
        justify-content: center;
        background: unset;
        color: unset;
        font-size: $font-size-sm;
        font-weight: 600;
        border-radius: q(9999);
        flex-shrink: 0;
    }

    // -- level-content  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-level-content {
        flex: 1;

        h4 {
            font-size: $font-size-base;
            font-weight: 600;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-xs;
            color: $color-gray-500;
            font-style: italic;
            margin: 0;
        }
    }

    // -- level-connector  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-level-connector {
        width: q(1);
        height: q(20);
        background: $color-gray-300;
    }

    // -- taxonomy-cta  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-taxonomy-cta {
        text-align: center;
    }

    // -- ecological-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-ecological-section {
        padding: unset 0;
    }

    // -- ecological-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-ecological-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- ecological-content  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-ecological-content {
        max-width: unset;
        margin: 0 auto;
    }

    // -- ecological-categories  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-ecological-categories {
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;
        margin-top: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- eco-category  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-eco-category {
        padding: unset;
        background: $color-gray-50;
        border-radius: 0;
    }

    // -- eco-category-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-eco-category-title {
        font-size: $font-size-sm;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: unset;
        margin-bottom: unset;
    }

    // -- eco-list  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-eco-list {
        li {
            font-size: $font-size-sm;
            color: $color-gray-600;
            padding: unset 0;
            padding-left: unset;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: q(6);
                height: q(6);
                background: unset;
                border-radius: q(9999);
            }
        }
    }

    // -- cta-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-cta-section {
        padding: unset 0;
        background: linear-gradient(135deg, unset 0%, unset 100%);
        color: $color-white;
        text-align: center;
    }

    // -- cta-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-cta-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- cta-actions  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-cta-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: unset;

        .ss-c-btn-primary {
            background: $color-white;
            color: unset;

            &:hover {
                background: $color-gray-100;
            }
        }

        .ss-c-btn-ghost {
            color: $color-white;
            border: q(1) solid rgba($color-white, 0.3);

            &:hover {
                background: rgba($color-white, 0.1);
                border-color: rgba($color-white, 0.5);
            }
        }
    }

    // -- page-header-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-page-header-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- page-header--centered  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-page-header--centered {
        text-align: center;

        .ss-c-page-header-container {
            max-width: unset;
        }
    }

    // -- breadcrumb  (from site-phytosync_com/src/static/scss/index.scss) --
    // Scoped under .ss-c-phytosync: its li::after "/" doubled the breadcrumb
    // module's own separator.
    .ss-c-phytosync .ss-c-breadcrumb {
        margin-bottom: unset;

        ol {
            display: flex;
            align-items: center;
            gap: unset;
            font-size: $font-size-sm;
        }

        li {
            display: flex;
            align-items: center;
            gap: unset;
            color: $color-gray-500;

            &::after {
                content: '/';
                color: $color-gray-400;
            }

            &:last-child::after {
                display: none;
            }

            &[aria-current="page"] {
                color: $color-gray-700;
            }
        }

        a {
            color: $color-gray-500;

            &:hover {
                color: unset;
            }
        }
    }

    // -- taxonomy-browser  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-taxonomy-browser {
        padding: unset 0;
    }

    // -- browser-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-browser-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;

        @media (min-width: q(1024)) {
            grid-template-columns: q(280) 1fr;
        }
    }

    // -- browser-sidebar  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-browser-sidebar {
        @media (max-width: q(1024)) {
            order: 2;
        }
    }

    // -- browser-main  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-browser-main {
        @media (max-width: q(1024)) {
            order: 1;
        }
    }

    // -- filter-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-section {
        padding: unset;
        background: $color-gray-50;
        border-radius: 0;
        margin-bottom: unset;
    }

    // -- filter-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-title {
        font-size: $font-size-sm;
        font-weight: 600;
        color: $color-gray-700;
        margin-bottom: unset;
    }

    // -- filter-options  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-options {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- filter-option  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-option {
        display: flex;
        align-items: center;
        gap: unset;
        cursor: pointer;

        input {
            accent-color: unset;
        }
    }

    // -- filter-label  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-label {
        font-size: $font-size-sm;
        color: $color-gray-700;
        flex: 1;
    }

    // -- filter-count  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-count {
        font-size: $font-size-xs;
        color: $color-gray-500;
    }

    // -- stats-mini  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stats-mini {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- stat-mini-item  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-mini-item {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    // -- stat-mini-value  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-mini-value {
        font-size: $font-size-xl;
        font-weight: 600;
        color: $color-gray-900;
    }

    // -- stat-mini-label  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-mini-label {
        font-size: $font-size-xs;
        color: $color-gray-500;
    }

    // -- browser-search  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-browser-search {
        margin-bottom: unset;
    }

    // -- search-form  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-form {
        display: flex;
        gap: unset;
    }

    // -- search-input  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-input {
        flex: 1;
        padding: unset unset;
        font-size: $font-size-sm;
        border: q(1) solid $color-gray-300;
        border-radius: 0;
        transition: border-color $transition-fast;

        &:focus {
            outline: none;
            border-color: unset;
        }
    }

    // -- search-submit  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-submit {
        padding: unset unset;
        background: unset;
        color: $color-white;
        border: none;
        border-radius: 0;
        cursor: pointer;
        transition: background $transition-fast;

        svg {
            width: q(18);
            height: q(18);
        }

        &:hover {
            background: unset;
        }
    }

    // -- taxonomy-tree-browser  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-taxonomy-tree-browser {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- tree-branch  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-tree-branch {
        border: q(1) solid $color-gray-200;
        border-radius: 0;
        overflow: hidden;
    }

    // -- branch-header  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-branch-header {
        display: flex;
        align-items: center;
        gap: unset;
        padding: unset unset;
        background: $color-white;
        cursor: pointer;
        transition: background $transition-fast;

        &:hover {
            background: $color-gray-50;
        }
    }

    // -- branch-toggle  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-branch-toggle {
        width: q(24);
        height: q(24);
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 0;

        &:hover {
            background: $color-gray-100;
        }

        .ss-c-toggle-icon {
            width: q(16);
            height: q(16);
            color: $color-gray-500;
            transition: transform $transition-fast;
        }

        &[aria-expanded="true"] .ss-c-toggle-icon {
            transform: rotate(180deg);
        }
    }

    // -- branch-level  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-branch-level {
        font-size: $font-size-xs;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: unset;
        padding: unset unset;
        background: unset;
        border-radius: 0;
    }

    // -- branch-name  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-branch-name {
        font-size: $font-size-sm;
        font-weight: 500;
        color: $color-gray-800;
        font-style: italic;
    }

    // -- branch-info  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-branch-info {
        margin-left: auto;

        svg {
            width: q(16);
            height: q(16);
            color: $color-gray-400;
        }
    }

    // -- branch-children  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-branch-children {
        padding: unset unset unset unset;
        background: $color-gray-50;
        border-top: q(1) solid $color-gray-200;
    }

    // -- branch-loading  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-branch-loading {
        font-size: $font-size-sm;
        color: $color-gray-500;
        font-style: italic;
    }

    // -- empty-state  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-empty-state {
        text-align: center;
        padding: unset unset;

        &--wide {
            grid-column: 1 / -1;
        }
    }

    // -- empty-icon  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-empty-icon {
        width: q(64);
        height: q(64);
        color: $color-gray-300;
        margin: 0 auto unset;
    }

    // -- empty-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-empty-title {
        font-size: $font-size-xl;
        color: $color-gray-700;
        margin-bottom: unset;
    }

    // -- empty-description  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-empty-description {
        font-size: $font-size-sm;
        color: $color-gray-500;
        max-width: q(320);
        margin: 0 auto;
    }

    // -- database-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-database-section {
        padding: unset 0;
    }

    // -- database-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-database-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;

        @media (min-width: q(1024)) {
            grid-template-columns: q(280) 1fr;
        }
    }

    // -- database-filters  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-database-filters {
        @media (max-width: q(1024)) {
            display: none;
        }
    }

    // -- filter-form  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-form {
        position: sticky;
        top: q(88);
    }

    // -- filter-group  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-group {
        margin-bottom: unset;
    }

    // -- filter-group-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-group-title {
        font-size: $font-size-sm;
        font-weight: 600;
        color: $color-gray-700;
        margin-bottom: unset;
    }

    // -- filter-fieldset  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-fieldset {
        border: none;
        margin-bottom: unset;

        legend {
            font-size: $font-size-xs;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: $color-gray-500;
            margin-bottom: unset;
        }
    }

    // -- filter-checkbox  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-checkbox {
        display: flex;
        align-items: center;
        gap: unset;
        padding: unset 0;
        cursor: pointer;

        input {
            accent-color: unset;
        }

        span {
            font-size: $font-size-sm;
            color: $color-gray-700;
        }
    }

    // -- filter-actions  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-filter-actions {
        display: flex;
        gap: unset;
        padding-top: unset;
        border-top: q(1) solid $color-gray-200;
    }

    // -- database-toolbar  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-database-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: unset;
        margin-bottom: unset;
    }

    // -- toolbar-search  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-toolbar-search {
        flex: 1;
        min-width: q(200);
        display: flex;
        gap: unset;
    }

    // -- search-btn  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-btn {
        padding: unset unset;
        background: unset;
        color: $color-white;
        border: none;
        border-radius: 0;
        cursor: pointer;

        svg {
            width: q(18);
            height: q(18);
        }

        &:hover {
            background: unset;
        }
    }

    // -- toolbar-meta  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-toolbar-meta {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- result-count  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-result-count {
        font-size: $font-size-sm;
        color: $color-gray-500;
    }

    // -- sort-select  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-sort-select {
        padding: unset unset;
        font-size: $font-size-sm;
        border: q(1) solid $color-gray-300;
        border-radius: 0;
        background: $color-white;
        cursor: pointer;
    }

    // -- database-grid  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-database-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: q(1280)) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- plant-card  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-plant-card {
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        transition: all $transition-fast;

        &:hover {
            border-color: unset;
            box-shadow: $shadow-md;
        }
    }

    // -- plant-card-header  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-plant-card-header {
        margin-bottom: unset;
    }

    // -- plant-taxonomy  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-plant-taxonomy {
        font-size: $font-size-xs;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: unset;
    }

    // -- plant-name  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-plant-name {
        font-size: $font-size-lg;
        font-weight: 600;
        margin-top: unset;
        margin-bottom: unset;
    }

    // -- plant-latin  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-plant-latin {
        font-size: $font-size-sm;
        color: $color-gray-500;
        margin: 0;
    }

    // -- plant-description  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-plant-description {
        font-size: $font-size-sm;
        color: $color-gray-600;
        flex: 1;
    }

    // -- plant-tags  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-plant-tags {
        display: flex;
        flex-wrap: wrap;
        gap: unset;
        margin-top: unset;
    }

    // -- plant-link  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-plant-link {
        margin-top: unset;
        padding-top: unset;
        border-top: q(1) solid $color-gray-100;
        font-size: $font-size-sm;
        font-weight: 500;
        color: unset;
    }

    // -- pagination  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-pagination {
        margin-top: unset;
        padding-top: unset;
        border-top: q(1) solid $color-gray-200;
    }

    // -- pagination-list  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-pagination-list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: unset;
    }

    // -- pagination-link  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-pagination-link {
        padding: unset unset;
        font-size: $font-size-sm;
        color: unset;
        border: q(1) solid unset;
        border-radius: 0;

        &:hover {
            background: unset;
        }
    }

    // -- pagination-current  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-pagination-current {
        font-size: $font-size-sm;
        color: $color-gray-500;
    }

    // -- search-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- search-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- search-header  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-header {
        text-align: center;
        margin-bottom: unset;
    }

    // -- search-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-title {
        font-size: $font-size-3xl;
        margin-bottom: unset;
    }

    // -- search-subtitle  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-subtitle {
        font-size: $font-size-lg;
        color: $color-gray-600;
    }

    // -- search-form-main  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-form-main {
        background: $color-white;
        padding: unset;
        border-radius: 0;
        box-shadow: $shadow-lg;
    }

    // -- search-input-wrapper  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-input-wrapper {
        display: flex;
        align-items: center;
        gap: unset;
        margin-bottom: unset;

        .ss-c-search-icon {
            width: q(24);
            height: q(24);
            color: $color-gray-400;
            flex-shrink: 0;
        }
    }

    // -- search-input-main  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-input-main {
        flex: 1;
        padding: unset 0;
        font-size: $font-size-lg;
        border: none;
        border-bottom: q(2) solid $color-gray-200;
        background: transparent;
        transition: border-color $transition-fast;

        &:focus {
            outline: none;
            border-color: unset;
        }
    }

    // -- search-filters  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: unset;
    }

    // -- search-filter-option  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-filter-option {
        display: flex;
        align-items: center;
        gap: unset;
        cursor: pointer;

        input {
            accent-color: unset;
        }

        span {
            font-size: $font-size-sm;
            color: $color-gray-700;
        }
    }

    // -- search-tips  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-search-tips {
        margin-top: unset;
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
    }

    // -- tips-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-tips-title {
        font-size: $font-size-sm;
        font-weight: 600;
        color: $color-gray-700;
        margin-bottom: unset;
    }

    // -- tips-list  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-tips-list {
        li {
            font-size: $font-size-sm;
            color: $color-gray-600;
            padding: unset 0;

            code {
                font-size: 0.85em;
            }
        }
    }

    // -- results-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-results-section {
        padding: unset 0;
    }

    // -- results-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-results-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- results-header  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-results-header {
        margin-bottom: unset;
    }

    // -- results-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-results-title {
        font-size: $font-size-xl;
        margin-bottom: unset;
    }

    // -- results-query  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-results-query {
        color: unset;
    }

    // -- results-count  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-results-count {
        font-size: $font-size-sm;
        color: $color-gray-500;
    }

    // -- results-list  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-results-list {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- result-item  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-result-item {
        display: flex;
        gap: unset;
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
        transition: all $transition-fast;

        &:hover {
            border-color: unset;
            box-shadow: $shadow-sm;
        }
    }

    // -- result-type  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-result-type {
        flex-shrink: 0;
    }

    // -- type-badge  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-type-badge {
        display: inline-block;
        font-size: $font-size-xs;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: unset unset;
        border-radius: 0;

        &--taxonomy {
            background: unset;
            color: unset;
        }

        &--plant {
            background: unset;
            color: unset;
        }

        &--eco {
            background: unset;
            color: unset;
        }
    }

    // -- result-content  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-result-content {
        flex: 1;
    }

    // -- result-name  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-result-name {
        font-size: $font-size-lg;
        font-weight: 600;
        margin-bottom: unset;

        a {
            color: $color-gray-900;

            &:hover {
                color: unset;
            }
        }
    }

    // -- result-latin  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-result-latin {
        font-size: $font-size-sm;
        color: $color-gray-500;
        margin-bottom: unset;
    }

    // -- result-description  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-result-description {
        font-size: $font-size-sm;
        color: $color-gray-600;
        margin-bottom: unset;
    }

    // -- result-hierarchy  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-result-hierarchy {
        font-size: $font-size-xs;
        color: $color-gray-500;
    }

    // -- no-results  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-no-results {
        text-align: center;
        padding: unset unset;
    }

    // -- no-results-icon  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-no-results-icon {
        width: q(64);
        height: q(64);
        color: $color-gray-300;
        margin: 0 auto unset;
    }

    // -- no-results-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-no-results-title {
        font-size: $font-size-xl;
        color: $color-gray-700;
        margin-bottom: unset;
    }

    // -- no-results-text  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-no-results-text {
        font-size: $font-size-sm;
        color: $color-gray-500;
    }

    // -- quick-links-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-quick-links-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- quick-links-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-quick-links-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- quick-links-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-quick-links-title {
        font-size: $font-size-xl;
        text-align: center;
        margin-bottom: unset;
    }

    // -- quick-links-grid  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-quick-links-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    // -- quick-link-card  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-quick-link-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
        text-align: center;
        transition: all $transition-fast;

        &:hover {
            border-color: unset;
            box-shadow: $shadow-md;

            .ss-c-quick-link-icon {
                background: unset;

                svg {
                    color: unset;
                }
            }
        }
    }

    // -- quick-link-icon  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-quick-link-icon {
        width: q(48);
        height: q(48);
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-gray-100;
        border-radius: 0;
        margin-bottom: unset;
        transition: all $transition-fast;

        svg {
            width: q(24);
            height: q(24);
            color: $color-gray-600;
        }
    }

    // -- quick-link-text  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-quick-link-text {
        font-size: $font-size-sm;
        font-weight: 500;
        color: $color-gray-700;
    }

    // -- about-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-about-section {
        padding: unset 0;
    }

    // -- about-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-about-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- about-grid  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-about-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;
        align-items: center;

        &--2col {
            @media (min-width: q(1024)) {
                grid-template-columns: 1fr 1fr;
            }
        }
    }

    // -- about-heading  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-about-heading {
        font-size: $font-size-2xl;
        margin-bottom: unset;
    }

    // -- about-visual  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-about-visual {
        display: flex;
        justify-content: center;
    }

    // -- visual-icon  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-visual-icon {
        width: q(80);
        height: q(80);
        margin: 0 auto unset;
        color: unset;
    }

    // -- visual-text  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-visual-text {
        font-size: $font-size-sm;
        color: $color-gray-600;
        font-style: italic;
    }

    // -- architecture-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-architecture-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- architecture-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-architecture-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- section-header--centered  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-section-header--centered {
        text-align: center;
    }

    // -- architecture-grid  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-architecture-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // -- arch-card  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-arch-card {
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
    }

    // -- arch-icon  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-arch-icon {
        width: q(40);
        height: q(40);
        display: flex;
        align-items: center;
        justify-content: center;
        background: unset;
        border-radius: 0;
        margin-bottom: unset;

        svg {
            width: q(20);
            height: q(20);
            color: unset;
        }
    }

    // -- arch-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-arch-title {
        font-size: $font-size-lg;
        font-weight: 600;
        margin-bottom: unset;
    }

    // -- arch-description  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-arch-description {
        font-size: $font-size-sm;
        color: $color-gray-600;
        margin-bottom: unset;
    }

    // -- arch-code  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-arch-code {
        display: block;
        padding: unset unset;
        background: $color-gray-100;
        border-radius: 0;
        font-size: $font-size-xs;
        color: $color-gray-700;
    }

    // -- eco-data-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-eco-data-section {
        padding: unset 0;
    }

    // -- eco-data-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-eco-data-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- eco-properties  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-eco-properties {
        display: grid;
        grid-template-columns: 1fr;
        gap: unset;
        margin-top: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- eco-property-group  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-eco-property-group {
        padding: unset;
        background: $color-gray-50;
        border-radius: 0;
    }

    // -- property-group-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-property-group-title {
        font-size: $font-size-sm;
        font-weight: 600;
        color: unset;
        margin-bottom: unset;
    }

    // -- property-list  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-property-list {
        li {
            font-size: $font-size-sm;
            color: $color-gray-600;
            padding: unset 0;
            padding-left: unset;
            position: relative;

            &::before {
                content: '✓';
                position: absolute;
                left: 0;
                color: unset;
                font-size: $font-size-xs;
            }
        }
    }

    // -- stack-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stack-section {
        padding: unset 0;
        background: $color-gray-900;
    }

    // -- stack-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stack-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;

        .ss-c-section-title {
            color: $color-white;
        }

        .ss-c-section-description {
            color: $color-gray-400;
        }
    }

    // -- stack-grid  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stack-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (min-width: q(1024)) {
            grid-template-columns: repeat(6, 1fr);
        }
    }

    // -- stack-item  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stack-item {
        text-align: center;
        padding: unset;
    }

    // -- stack-name  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stack-name {
        display: block;
        font-size: $font-size-base;
        font-weight: 600;
        color: $color-white;
        margin-bottom: unset;
    }

    // -- stack-detail  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stack-detail {
        display: block;
        font-size: $font-size-xs;
        color: $color-gray-500;
    }

    // -- contributing-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-contributing-section {
        padding: unset 0;
    }

    // -- contributing-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-contributing-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
        text-align: center;
    }

    // -- contributing-actions  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-contributing-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: unset;
        margin-top: unset;
    }

    // -- footer-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-footer-section {
        // Standard section
    }

    // -- footer-brand-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-footer-brand-section {
        .ss-c-footer-logo {
            display: flex;
            align-items: center;
            gap: unset;
            margin-bottom: unset;
        }

        .ss-c-brand-icon {
            width: q(32);
            height: q(32);
            color: unset;
        }

        .ss-c-footer-brand-name {
            font-size: $font-size-lg;
            font-weight: 600;
            color: $color-white;
        }
    }

    // -- footer-copyright  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-footer-copyright {
        font-size: $font-size-sm;
        color: $color-gray-400;
        margin-bottom: unset;
    }

    // -- footer-meta  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-footer-meta {
        font-size: $font-size-xs;
        color: $color-gray-600;
    }

    // -- info-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-info-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- info-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-info-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 unset;
    }

    // -- info-card  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-info-card {
        max-width: unset;
        margin: 0 auto;
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 0;
    }

    // -- info-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-info-title {
        font-size: $font-size-lg;
        margin-bottom: unset;
    }

    // -- info-text  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-info-text {
        font-size: $font-size-sm;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
    }

    // -- grid-container  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-grid-container {
        max-width: $container-max;
        margin: 0 auto;
        padding: 0 $container-padding;
    }

    // -- reveal  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-reveal {
        opacity: 0;
        transform: translateY(q(60));
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

        &.ss-c-revealed {
            opacity: 1;
            transform: translateY(0);
        }

        &-delay-1 { transition-delay: 0.1s; }
        &-delay-2 { transition-delay: 0.2s; }
        &-delay-3 { transition-delay: 0.3s; }
        &-delay-4 { transition-delay: 0.4s; }
    }

    // -- reveal-scale  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-reveal-scale {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 1s cubic-bezier(0.16, 1, 0.3, 1);

        &.ss-c-revealed {
            opacity: 1;
            transform: scale(1);
        }
    }

    // -- reveal-left  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-reveal-left {
        opacity: 0;
        transform: translateX(q(-60));
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

        &.ss-c-revealed {
            opacity: 1;
            transform: translateX(0);
        }
    }

    // -- reveal-right  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-reveal-right {
        opacity: 0;
        transform: translateX(q(60));
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

        &.ss-c-revealed {
            opacity: 1;
            transform: translateX(0);
        }
    }

    // -- section-full  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-section-full {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    // -- section-title-hero  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-section-title-hero {
        font-size: $font-size-5xl;
        font-weight: $font-weight-bold;
        letter-spacing: -0.03em;
        line-height: 1.05;

        @media (min-width: $breakpoint-md) {
            font-size: $font-size-7xl;
        }

        @media (min-width: $breakpoint-lg) {
            font-size: $font-size-8xl;
        }
    }

    // -- header-logo  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-header-logo {
        display: flex;
        align-items: center;
        gap: unset;

        .ss-c-logo-image {
            height: q(32);
            width: auto;
        }

        .ss-c-logo-text {
            font-size: $font-size-xl;
            font-weight: $font-weight-bold;
            color: $color-gray-900;
        }

        .ss-c-logo-accent {
            font-weight: unset;
            color: $color-gray-500;
        }
    }

    // -- hero-portrait  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-hero-portrait {
        position: relative;
        width: q(300);
        height: q(300);
        margin: 0 auto;

        @media (min-width: $breakpoint-md) {
            width: q(400);
            height: q(400);
        }
    }

    // -- portrait-ring  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-ring {
        position: absolute;
        border-radius: 50%;
        border: q(1) solid rgba($color-gray-900, 0.1);

        &-1 {
            inset: 0;
            animation: rotate 40s linear infinite;
        }

        &-2 {
            inset: 12%;
            border-color: unset;
            animation: rotate 30s linear infinite reverse;
        }

        &-3 {
            inset: 24%;
            border-color: unset;
            animation: rotate 20s linear infinite;
        }
    }

    // -- portrait-face  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-face {
        position: absolute;
        inset: 30%;

        svg {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 0 q(40) unset);
        }
    }

    // -- portrait-pulse  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-pulse {
        position: absolute;
        inset: 35%;
        border-radius: 50%;
        background: unset;
        animation: pulse 4s ease-in-out infinite;
    }

    // -- hero-metrics  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-hero-metrics {
        display: flex;
        justify-content: center;
        gap: unset;
        margin-top: unset;
    }

    // -- metric  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-metric {
        text-align: center;

        &-value {
            display: block;
            font-size: $font-size-3xl;
            font-weight: $font-weight-bold;
            color: $color-gray-900;

            @media (min-width: $breakpoint-md) {
                font-size: $font-size-4xl;
            }
        }

        &-label {
            font-size: $font-size-sm;
            color: $color-gray-500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    }

    // -- trust-bar  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-trust-bar {
        padding: unset 0;
        background: $color-gray-50;
        border-top: q(1) solid $color-gray-200;
        border-bottom: q(1) solid $color-gray-200;
    }

    // -- trust-container  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-trust-container {
        max-width: $container-max;
        margin: 0 auto;
        padding: 0 $container-padding;
        text-align: center;
    }

    // -- trust-label  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-trust-label {
        font-size: $font-size-sm;
        color: $color-gray-500;
        margin-bottom: unset;
    }

    // -- trust-sectors  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-trust-sectors {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: unset;
    }

    // -- sector  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sector {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $color-gray-600;
    }

    // -- sector-divider  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sector-divider {
        width: q(4);
        height: q(4);
        border-radius: 50%;
        background: $color-gray-300;
    }

    // -- values-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-values-section {
        padding: unset 0;
        background: $color-white;
    }

    // -- value-title  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-value-title {
        font-size: $font-size-lg;
        font-weight: $font-weight-semibold;
        color: $color-gray-900;
        margin-bottom: unset;
    }

    // -- value-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-value-description {
        font-size: $font-size-sm;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
    }

    // -- solutions-preview  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solutions-preview {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- solutions-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solutions-grid {
        display: grid;
        gap: unset;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- solution-card  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-card {
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-2xl;
        padding: unset;
        display: flex;
        flex-direction: column;
        gap: unset;
        transition: all $transition-slow;
        position: relative;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: q(2);
            background: linear-gradient(90deg, transparent, unset, transparent);
            opacity: 0;
            transition: opacity $transition-base;
        }

        &:hover {
            border-color: $color-gray-300;
            transform: translateY(q(-8));
            box-shadow: $shadow-lg;

            &::before {
                opacity: 1;
            }
        }
    }

    // -- solution-category  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-category {
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: unset;
    }

    // -- solution-title  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-title {
        font-size: $font-size-2xl;
        color: $color-gray-900;
        margin-bottom: unset;
    }

    // -- solution-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-description {
        font-size: $font-size-base;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
    }

    // -- solution-features  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-features {
        margin-top: auto;

        li {
            display: flex;
            align-items: center;
            gap: unset;
            font-size: $font-size-sm;
            color: $color-gray-600;
            padding: unset 0;

            &::before {
                content: '';
                width: q(6);
                height: q(6);
                border-radius: 50%;
                background: unset;
            }
        }
    }

    // -- solution-visual  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-visual {
        display: flex;
        justify-content: center;
        padding: unset 0;
    }

    // -- solution-icon-lg  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-icon-lg {
        width: q(100);
        height: q(100);
        color: $color-gray-400;

        svg {
            width: 100%;
            height: 100%;
        }
    }

    // -- tech-teaser  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-tech-teaser {
        padding: unset 0;
        background: $color-white;
    }

    // -- tech-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-tech-grid {
        display: grid;
        gap: unset;
        align-items: center;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
        }
    }

    // -- tech-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-tech-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- tech-highlights  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-tech-highlights {
        margin-bottom: unset;

        li {
            padding: unset 0;
            border-bottom: q(1) solid $color-gray-200;

            &:last-child {
                border-bottom: none;
            }

            strong {
                display: block;
                font-size: $font-size-base;
                font-weight: $font-weight-semibold;
                color: $color-gray-900;
                margin-bottom: unset;
            }

            span {
                font-size: $font-size-sm;
                color: $color-gray-500;
            }
        }
    }

    // -- tech-visual  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-tech-visual {
        display: flex;
        justify-content: center;
    }

    // -- tech-diagram  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-tech-diagram {
        position: relative;
        width: q(360);
        height: q(360);
    }

    // -- diagram-layer  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-diagram-layer {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: q(1) solid $color-gray-300;

        span {
            position: absolute;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            color: $color-gray-500;
            white-space: nowrap;
        }

        &-1 {
            inset: 0;
            border-color: unset;
            span { top: -unset; }
        }

        &-2 {
            inset: 15%;
            span { right: -unset; }
        }

        &-3 {
            inset: 30%;
            border-color: unset;
            span { bottom: -unset; }
        }

        &-4 {
            inset: 45%;
            span { left: -unset; }
        }
    }

    // -- diagram-core  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-diagram-core {
        position: absolute;
        inset: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, unset, unset);
        border-radius: 50%;
        box-shadow: 0 0 q(60) unset;

        span {
            font-size: $font-size-xs;
            font-weight: $font-weight-bold;
            color: $color-white;
        }
    }

    // -- ethics-statement  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-ethics-statement {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- ethics-content  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-ethics-content {
        max-width: q(900);
        margin: 0 auto;
        text-align: center;
    }

    // -- ethics-title  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-ethics-title {
        font-size: $font-size-4xl;
        margin-bottom: unset;

        @media (min-width: $breakpoint-md) {
            font-size: $font-size-5xl;
        }
    }

    // -- ethics-quote  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-ethics-quote {
        font-family: Georgia, serif;
        font-size: $font-size-xl;
        font-style: italic;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
        margin-bottom: unset;

        @media (min-width: $breakpoint-md) {
            font-size: $font-size-2xl;
        }
    }

    // -- ethics-principles  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-ethics-principles {
        display: grid;
        gap: unset;
        text-align: left;
        margin-bottom: unset;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- principle  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-principle {
        padding: unset;
        background: $color-white;
        border-radius: $radius-lg;
        border: q(1) solid $color-gray-200;

        .ss-c-principle-number {
            font-size: $font-size-sm;
            font-weight: $font-weight-bold;
            color: unset;
            margin-bottom: unset;
        }

        h4 {
            font-size: $font-size-base;
            font-weight: $font-weight-semibold;
            color: $color-gray-900;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-sm;
            color: $color-gray-600;
        }
    }

    // -- tech-architecture  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-tech-architecture {
        padding: unset 0;
        background: $color-white;
    }

    // -- arch-number  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-arch-number {
        font-size: $font-size-sm;
        font-weight: $font-weight-bold;
        color: unset;
        margin-bottom: unset;
    }

    // -- arch-specs  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-arch-specs {
        li {
            display: flex;
            justify-content: space-between;
            padding: unset 0;
            font-size: $font-size-sm;
            border-bottom: q(1) solid $color-gray-200;
            color: $color-gray-700;

            &:last-child {
                border-bottom: none;
            }

            span {
                color: $color-gray-500;
            }
        }
    }

    // -- sync-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- sync-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-grid {
        display: grid;
        gap: unset;
        align-items: center;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
        }
    }

    // -- sync-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- sync-metrics  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-metrics {
        display: flex;
        gap: unset;
    }

    // -- sync-metric  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-metric {
        text-align: center;

        .ss-c-sync-value {
            display: block;
            font-size: $font-size-4xl;
            font-weight: $font-weight-bold;
            color: unset;
        }

        .ss-c-sync-label {
            font-size: $font-size-sm;
            color: $color-gray-500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    }

    // -- sync-visual  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-visual {
        display: flex;
        justify-content: center;
    }

    // -- sync-diagram  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-diagram {
        position: relative;
        width: q(320);
        height: q(320);
    }

    // -- sync-node  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-node {
        position: absolute;
        width: q(90);
        height: q(90);
        display: flex;
        align-items: center;
        justify-content: center;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: 50%;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        color: $color-gray-600;
        transition: all $transition-base;

        &:hover {
            border-color: unset;
            box-shadow: 0 0 q(30) unset;
        }

        &-audio { top: 0; left: 50%; transform: translateX(-50%); }
        &-visual { right: 0; top: 50%; transform: translateY(-50%); }
        &-emotion { bottom: 0; left: 50%; transform: translateX(-50%); }
        &-language { left: 0; top: 50%; transform: translateY(-50%); }
    }

    // -- sync-center  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sync-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: q(110);
        height: q(110);
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, unset, unset);
        border-radius: 50%;
        font-size: $font-size-xs;
        font-weight: $font-weight-bold;
        color: $color-white;
        box-shadow: 0 0 q(60) unset;
    }

    // -- customization-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-customization-section {
        padding: unset 0;
        background: $color-white;
    }

    // -- custom-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-custom-grid {
        display: grid;
        gap: unset;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- custom-item  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-custom-item {
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-xl;
        transition: all $transition-base;

        &:hover {
            border-color: $color-gray-300;
            box-shadow: $shadow-md;
        }

        h4 {
            font-size: $font-size-lg;
            color: $color-gray-900;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-sm;
            color: $color-gray-600;
        }
    }

    // -- integration-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-integration-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- integration-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-integration-grid {
        display: grid;
        gap: unset;
        align-items: center;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
        }
    }

    // -- integration-content  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-integration-content {
        .ss-c-section-label {
            color: unset;
        }
    }

    // -- integration-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-integration-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- integration-list  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-integration-list {
        li {
            padding: unset 0;
            font-size: $font-size-base;
            color: $color-gray-700;

            &::before {
                content: '→';
                margin-right: unset;
                color: unset;
            }
        }
    }

    // -- integration-code  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-integration-code {
        .ss-c-code-block {
            background: $color-gray-900;
            border: q(1) solid $color-gray-800;
            border-radius: $radius-xl;
            overflow: hidden;
        }

        .ss-c-code-header {
            display: flex;
            align-items: center;
            gap: unset;
            padding: unset unset;
            background: $color-gray-800;
            border-bottom: q(1) solid $color-gray-700;
        }

        .ss-c-code-dot {
            width: q(12);
            height: q(12);
            border-radius: 50%;
            background: $color-gray-600;

            &:nth-child(1) { background: #ff5f56; }
            &:nth-child(2) { background: #ffbd2e; }
            &:nth-child(3) { background: #27c93f; }
        }

        .ss-c-code-title {
            margin-left: auto;
            font-size: $font-size-xs;
            color: $color-gray-500;
        }

        .ss-c-code-content {
            padding: unset;
            overflow-x: auto;

            code {
                font-family: Menlo, Monaco, monospace;
                font-size: $font-size-sm;
                color: $color-gray-300;
                line-height: $line-height-relaxed;
            }
        }
    }

    // -- solution-detail  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-detail {
        padding: unset 0;
        background: $color-white;

        &-alt {
            background: $color-gray-50;
        }
    }

    // -- solution-detail-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-detail-grid {
        display: grid;
        gap: unset;
        align-items: center;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;

            &-reverse {
                direction: rtl;

                > * {
                    direction: ltr;
                }
            }
        }
    }

    // -- solution-badge  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-badge {
        display: inline-block;
        padding: unset unset;
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border-radius: $radius-full;
        margin-bottom: unset;

        &-healthcare {
            background: rgba(#559a6a, 0.15);
            color: #559a6a;
        }

        &-beauty {
            background: rgba(#c5728d, 0.15);
            color: #c5728d;
        }

        &-wellness {
            background: rgba(#a77cb9, 0.15);
            color: #a77cb9;
        }

        &-enterprise {
            background: rgba(#5192c8, 0.15);
            color: #5192c8;
        }
    }

    // -- solution-detail-title  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-detail-title {
        font-size: $font-size-3xl;
        color: $color-gray-900;
        margin-bottom: unset;

        @media (min-width: $breakpoint-md) {
            font-size: $font-size-4xl;
        }
    }

    // -- solution-detail-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-detail-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- use-case  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-use-case {
        padding: unset;
        background: $color-white;
        border-radius: $radius-lg;
        border: q(1) solid $color-gray-200;

        h4 {
            font-size: $font-size-base;
            font-weight: $font-weight-semibold;
            color: $color-gray-900;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-sm;
            color: $color-gray-600;
        }
    }

    // -- compliance-badges  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-compliance-badges {
        display: flex;
        flex-wrap: wrap;
        gap: unset;
    }

    // -- compliance-badge  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-compliance-badge {
        padding: unset unset;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        background: $color-gray-100;
        color: $color-gray-600;
        border-radius: $radius-full;
    }

    // -- solution-detail-visual  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-detail-visual {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: unset;
    }

    // -- solution-illustration  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-illustration {
        width: q(240);
        height: q(240);
        color: $color-gray-600;

        @media (min-width: $breakpoint-md) {
            width: q(320);
            height: q(320);
        }

        svg {
            width: 100%;
            height: 100%;
        }
    }

    // -- solution-stat  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-solution-stat {
        text-align: center;
        max-width: q(220);

        &-value {
            display: block;
            font-size: $font-size-5xl;
            font-weight: $font-weight-bold;
            color: unset;
            margin-bottom: unset;
        }

        &-label {
            font-size: $font-size-sm;
            color: $color-gray-500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    }

    // -- principles-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-principles-section {
        padding: unset 0;
        background: $color-white;
    }

    // -- transparency-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-transparency-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- transparency-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-transparency-grid {
        display: grid;
        gap: unset;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
            align-items: start;
        }
    }

    // -- transparency-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-transparency-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        margin-bottom: unset;
    }

    // -- transparency-list  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-transparency-list {
        li {
            padding: unset 0;
            border-bottom: q(1) solid $color-gray-200;

            &:last-child {
                border-bottom: none;
            }

            h4 {
                font-size: $font-size-base;
                color: $color-gray-900;
                margin-bottom: unset;
            }

            p {
                font-size: $font-size-sm;
                color: $color-gray-600;
            }
        }
    }

    // -- transparency-card  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-transparency-card {
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-2xl;
        padding: unset;

        h4 {
            font-size: $font-size-xl;
            color: $color-gray-900;
            margin-bottom: unset;
        }

        > p {
            font-size: $font-size-base;
            color: $color-gray-600;
            margin-bottom: unset;
        }
    }

    // -- report-highlights  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-report-highlights {
        margin-bottom: unset;

        li {
            padding: unset 0;
            font-size: $font-size-sm;
            color: $color-gray-700;
            border-bottom: q(1) solid $color-gray-200;

            &:last-child {
                border-bottom: none;
            }
        }
    }

    // -- sensitive-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sensitive-section {
        padding: unset 0;
        background: $color-white;
    }

    // -- sensitive-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sensitive-grid {
        display: grid;
        gap: unset;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // -- sensitive-card  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-sensitive-card {
        padding: unset;
        background: $color-white;
        border-radius: $radius-xl;
        border-left: q(3) solid unset;

        h4 {
            font-size: $font-size-lg;
            color: $color-gray-900;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-sm;
            color: $color-gray-600;
        }
    }

    // -- advisory-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-advisory-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- advisory-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-advisory-grid {
        display: grid;
        gap: unset;
        align-items: center;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
        }
    }

    // -- advisory-content  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-advisory-content {
        .ss-c-section-label {
            color: unset;
        }
    }

    // -- advisory-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-advisory-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- advisory-quote  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-advisory-quote {
        blockquote {
            font-family: Georgia, serif;
            font-size: $font-size-xl;
            font-style: italic;
            color: $color-gray-700;
            line-height: $line-height-relaxed;
            margin-bottom: unset;
            padding-left: unset;
            border-left: q(2) solid unset;
        }

        cite {
            font-size: $font-size-sm;
            color: $color-gray-500;
            font-style: normal;
        }
    }

    // -- ethics-contact  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-ethics-contact {
        padding: unset 0;
        background: $color-gray-900;
        text-align: center;
    }

    // -- ethics-contact-content  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-ethics-contact-content {
        max-width: q(650);
        margin: 0 auto;
        padding: 0 $container-padding;

        h2 {
            font-size: $font-size-3xl;
            color: $color-white;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-lg;
            color: $color-gray-300;
            margin-bottom: unset;
        }
    }

    // -- ethics-contact-actions  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-ethics-contact-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: unset;
    }

    // -- mission-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-mission-section {
        padding: unset 0;
        background: $color-white;
    }

    // -- mission-title  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-mission-title {
        font-size: $font-size-4xl;
        color: $color-gray-900;
        margin-bottom: unset;

        @media (min-width: $breakpoint-md) {
            font-size: $font-size-5xl;
        }
    }

    // -- mission-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-mission-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
        margin-bottom: unset;
    }

    // -- mission-values  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-mission-values {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- mission-value  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-mission-value {
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-xl;
        text-align: center;
        transition: all $transition-base;

        &:hover {
            border-color: unset;
        }

        .ss-c-value-word {
            font-size: $font-size-3xl;
            font-weight: $font-weight-bold;
            color: unset;
        }
    }

    // -- story-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-story-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- story-content  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-story-content {
        max-width: q(900);
        margin: 0 auto;
    }

    // -- story-timeline  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-story-timeline {
        margin-top: unset;
    }

    // -- team-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-team-section {
        padding: unset 0;
        background: $color-white;
    }

    // -- team-disciplines  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-team-disciplines {
        display: grid;
        gap: unset;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- discipline-card  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-discipline-card {
        padding: unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-xl;
        transition: all $transition-base;

        &:hover {
            border-color: $color-gray-300;
        }

        h4 {
            font-size: $font-size-lg;
            color: $color-gray-900;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-sm;
            color: $color-gray-600;
        }
    }

    // -- backed-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-backed-section {
        padding: unset 0;
        background: $color-gray-50;
        text-align: center;
    }

    // -- backed-content  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-backed-content {
        max-width: q(800);
        margin: 0 auto;
    }

    // -- backed-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-backed-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        margin-bottom: unset;
    }

    // -- backed-logos  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-backed-logos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: unset;
    }

    // -- backer-placeholder  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-backer-placeholder {
        padding: unset unset;
        background: $color-white;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-lg;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $color-gray-500;
    }

    // -- join-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-join-section {
        padding: unset 0;
        background: $color-white;
    }

    // -- join-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-join-grid {
        display: grid;
        gap: unset;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1fr;
            align-items: start;
        }
    }

    // -- join-title  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-join-title {
        font-size: $font-size-4xl;
        color: $color-gray-900;
        margin-bottom: unset;
    }

    // -- join-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-join-description {
        font-size: $font-size-lg;
        color: $color-gray-600;
        margin-bottom: unset;
    }

    // -- join-values  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-join-values {
        padding: unset;
        background: $color-gray-50;
        border: q(1) solid $color-gray-200;
        border-radius: $radius-2xl;

        h4 {
            font-size: $font-size-xl;
            color: $color-gray-900;
            margin-bottom: unset;
        }

        ul {
            li {
                padding: unset 0;
                font-size: $font-size-base;
                color: $color-gray-700;

                &::before {
                    content: '';
                    display: inline-block;
                    width: q(6);
                    height: q(6);
                    border-radius: 50%;
                    background: unset;
                    margin-right: unset;
                }
            }
        }
    }

    // -- contact-cards-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-contact-cards-grid {
        display: grid;
        gap: unset;
        grid-template-columns: 1fr;

        @media (min-width: $breakpoint-sm) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // -- contact-email  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-contact-email {
        display: inline-block;
        font-size: $font-size-base;
        font-weight: $font-weight-medium;
        color: unset;
        transition: color $transition-fast;

        &:hover {
            color: unset;
        }
    }

    // -- location-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-location-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- location-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-location-grid {
        display: grid;
        gap: unset;
        align-items: center;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: 1fr 1fr;
        }
    }

    // -- location-info  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-location-info {
        address {
            font-style: normal;
            font-size: $font-size-lg;
            color: $color-gray-700;
            line-height: $line-height-relaxed;
            margin-top: unset;

            strong {
                color: $color-gray-900;
            }
        }
    }

    // -- location-map  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-location-map {
        .ss-c-map-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: unset;
            background: $color-white;
            border: q(1) solid $color-gray-200;
            border-radius: $radius-2xl;
            color: $color-gray-400;

            svg {
                width: 100%;
                max-width: q(200);
                height: auto;
                margin-bottom: unset;
            }

            span {
                font-size: $font-size-sm;
                font-weight: $font-weight-medium;
                color: $color-gray-500;
            }
        }
    }

    // -- faq-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-faq-section {
        padding: unset 0;
        background: $color-gray-50;
    }

    // -- faq-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-faq-grid {
        display: grid;
        gap: unset;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // -- footer-nav  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-footer-nav {
        h4 {
            font-size: $font-size-sm;
            font-weight: $font-weight-semibold;
            color: $color-gray-300;
            margin-bottom: unset;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        ul li {
            margin-bottom: unset;
        }

        a {
            font-size: $font-size-sm;
            color: $color-gray-500;
            transition: color $transition-fast;

            &:hover {
                color: $color-white;
            }
        }
    }

    // -- product-showcase  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-product-showcase {
        padding: unset 0;
        background: $color-black;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }

    // -- showcase-container  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-container {
        max-width: q(1400);
        margin: 0 auto;
        padding: 0 $container-padding;
        display: grid;
        gap: unset;
        align-items: center;

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: 1fr 1.2fr;
        }
    }

    // -- showcase-info  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-info {
        .ss-c-showcase-label {
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            color: unset;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: unset;
        }

        .ss-c-showcase-title {
            font-size: $font-size-5xl;
            font-weight: $font-weight-bold;
            color: $color-white;
            margin-bottom: unset;

            @media (min-width: $breakpoint-md) {
                font-size: $font-size-6xl;
            }
        }

        .ss-c-showcase-description {
            font-size: $font-size-lg;
            color: $color-gray-400;
            line-height: $line-height-relaxed;
            max-width: q(500);
        }
    }

    // -- showcase-visual  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-visual {
        position: relative;
        min-height: q(500);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    // -- showcase-image  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-image {
        position: relative;
        width: 100%;
        max-width: q(500);

        img {
            width: 100%;
            height: auto;
            border-radius: $radius-2xl;
        }
    }

    // -- showcase-parts  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-parts {
        display: flex;
        flex-direction: column;
        gap: unset;
        margin-top: unset;
    }

    // -- showcase-part  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-part {
        padding: unset unset;
        background: $color-gray-900;
        border: q(1) solid $color-gray-800;
        border-radius: $radius-lg;
        cursor: pointer;
        transition: all $transition-base;

        &:hover, &.active {
            border-color: unset;
            background: $color-gray-800;
        }

        h4 {
            font-size: $font-size-base;
            font-weight: $font-weight-semibold;
            color: $color-white;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-sm;
            color: $color-gray-500;
        }
    }

    // -- skip-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-skip-section {
        position: fixed;
        bottom: unset;
        right: unset;
        padding: unset unset;
        background: rgba($color-gray-900, 0.9);
        border: q(1) solid $color-gray-700;
        border-radius: $radius-full;
        font-size: $font-size-sm;
        color: $color-gray-400;
        cursor: pointer;
        transition: all $transition-base;
        z-index: 50;
        backdrop-filter: blur(q(10));

        &:hover {
            color: $color-white;
            border-color: $color-gray-600;
        }
    }

    // -- legal-document  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-legal-document {
        max-width: q(800);
        margin: 0 auto;
    }

    // -- legal-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-legal-section {
        margin-bottom: unset;

        h2 {
            font-size: $font-size-2xl;
            font-weight: $font-weight-semibold;
            color: $color-gray-900;
            margin-bottom: unset;
            padding-bottom: unset;
            border-bottom: q(1) solid $color-gray-200;
        }

        h3 {
            font-size: $font-size-lg;
            font-weight: $font-weight-semibold;
            color: $color-gray-800;
            margin-top: unset;
            margin-bottom: unset;
        }

        p {
            font-size: $font-size-base;
            color: $color-gray-600;
            line-height: $line-height-relaxed;
            margin-bottom: unset;
        }

        ul, ol {
            margin-bottom: unset;
            padding-left: unset;

            li {
                font-size: $font-size-base;
                color: $color-gray-600;
                line-height: $line-height-relaxed;
                margin-bottom: unset;
                position: relative;

                &::before {
                    content: '•';
                    position: absolute;
                    left: -unset;
                    color: unset;
                }

                strong {
                    color: $color-gray-800;
                }
            }
        }

        ol {
            counter-reset: item;

            li {
                &::before {
                    content: counter(item) '.';
                    counter-increment: item;
                    color: unset;
                }
            }
        }

        a {
            color: unset;

            &:hover {
                text-decoration: underline;
            }
        }

        address {
            font-style: normal;
            font-size: $font-size-base;
            color: $color-gray-600;
            line-height: $line-height-relaxed;

            a {
                color: unset;
            }
        }
    }

    // -- scroll-fade  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-scroll-fade {
        opacity: 0;
        transform: translateY(q(40));
        transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

        &.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        // Staggered delays
        &.ss-c-scroll-fade-delay-1 { transition-delay: 0.1s; }
        &.ss-c-scroll-fade-delay-2 { transition-delay: 0.2s; }
        &.ss-c-scroll-fade-delay-3 { transition-delay: 0.3s; }
        &.ss-c-scroll-fade-delay-4 { transition-delay: 0.4s; }
    }

    // -- scroll-card  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-scroll-card {
        --parallax-y: 0;
        --parallax-scale: 1;

        opacity: 0;
        transform: translateY(q(60)) scale(0.95);
        transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    box-shadow 0.3s ease;
        will-change: transform, opacity;

        &.is-visible {
            opacity: 1;
            transform: translateY(var(--parallax-y)) scale(var(--parallax-scale));
        }
    }

    // -- showcase-header  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-header {
        background: linear-gradient(180deg, $color-gray-50 0%, $color-white 100%);
    }

    // -- showcase-gallery  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-gallery {
        padding: unset 0 unset;
        background: $color-gray-50;
    }

    // -- portrait-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: unset;

        @media (min-width: $breakpoint-sm) {
            grid-template-columns: repeat(2, 1fr);
            gap: unset;
        }

        @media (min-width: $breakpoint-md) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(4, 1fr);
        }

        @media (min-width: $breakpoint-xl) {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    // -- portrait-card  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-card {
        background: $color-white;
        border-radius: $radius-xl;
        overflow: hidden;
        box-shadow: 0 q(1) q(3) rgba($color-gray-900, 0.08);

        &:hover {
            box-shadow: 0 q(20) q(60) rgba($color-gray-900, 0.15);

            .ss-c-portrait-media {
                .ss-c-portrait-placeholder,
                .ss-c-portrait-video,
                .ss-c-portrait-image-src {
                    transform: scale(1.05);
                }

                .ss-c-portrait-overlay {
                    opacity: 1;
                }
            }
        }
    }

    // -- portrait-media  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-media {
        position: relative;
        aspect-ratio: 3 / 4;
        background: linear-gradient(135deg, $color-gray-100 0%, $color-gray-200 100%);
        overflow: hidden;

        .ss-c-portrait-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

            svg {
                width: 50%;
                height: auto;
                color: $color-gray-400;
            }
        }

        .ss-c-portrait-video,
        .ss-c-portrait-image-src {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .ss-c-portrait-video {
            background: $color-gray-900;
        }

        .ss-c-portrait-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba($color-gray-900, 0.8) 100%);
            display: flex;
            align-items: flex-end;
            padding: unset;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
    }

    // -- portrait-traits  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-traits {
        display: flex;
        flex-wrap: wrap;
        gap: unset;
    }

    // -- trait-tag  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-trait-tag {
        padding: unset unset;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        color: $color-white;
        background: rgba($color-white, 0.2);
        backdrop-filter: blur(q(8));
        border-radius: $radius-full;
        border: q(1) solid rgba($color-white, 0.1);
    }

    // -- portrait-info  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-info {
        padding: unset;
    }

    // -- portrait-name  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-name {
        font-size: $font-size-base;
        font-weight: $font-weight-semibold;
        color: $color-gray-900;
        margin-bottom: unset;
    }

    // -- portrait-role  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-role {
        display: block;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: unset;
        margin-bottom: unset;
    }

    // -- portrait-specialty  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-specialty {
        display: block;
        font-size: $font-size-xs;
        color: $color-gray-500;
        margin-bottom: unset;
    }

    // -- portrait-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-description {
        font-size: $font-size-sm;
        color: $color-gray-600;
        line-height: $line-height-relaxed;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    // -- showcase-stats  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-showcase-stats {
        padding: unset 0;
        background: $color-white;
    }

    // -- noise-overlay  (from site-speckle_org/src/static/scss/base/_effects.scss) --
    .ss-c-noise-overlay {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: var(--z-overlay);
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    }

    // -- scanlines  (from site-speckle_org/src/static/scss/base/_effects.scss) --
    .ss-c-scanlines {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: var(--z-overlay);
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent q(2),
        rgba(0, 0, 0, 0.03) q(2),
        rgba(0, 0, 0, 0.03) q(4)
      );
    }

    // -- data-card  (from site-speckle_org/src/static/scss/components/_cards.scss) --
    .ss-c-data-card {
      background: var(--color-surface-elevated);
      border: q(1) solid var(--color-border);
      padding: var(--space-8);

      &__header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-8);
        padding-bottom: var(--space-4);
        border-bottom: q(1) solid var(--color-border);
      }

      &__icon {
        color: var(--color-accent);
        font-size: var(--text-lg);
      }

      &__label {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color: var(--color-gray-400);
      }

      &__content {
        display: grid;
        gap: var(--space-6);
      }

      &__stat {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
      }

      &__value {
        font-family: var(--font-mono);
        font-size: var(--text-4xl);
        font-weight: var(--weight-bold);
        color: var(--color-accent);
        line-height: var(--leading-none);
      }

      &__description {
        font-size: var(--text-sm);
        color: var(--color-gray-400);
      }
    }

    // -- detail-card  (from site-speckle_org/src/static/scss/components/_cards.scss) --
    .ss-c-detail-card {
      padding: var(--space-6);
      background: var(--color-dark);
      border: q(1) solid var(--color-border);

      &__icon {
        font-size: var(--text-2xl);
        color: var(--color-accent);
        margin-bottom: var(--space-4);
      }

      &__title {
        font-size: var(--text-lg);
        font-weight: var(--weight-bold);
        margin-bottom: var(--space-2);
      }

      &__text {
        font-size: var(--text-sm);
        color: var(--color-gray-400);
        line-height: var(--leading-relaxed);
      }
    }

    // -- mission-card  (from site-speckle_org/src/static/scss/components/_cards.scss) --
    .ss-c-mission-card {
      padding: var(--space-8);
      background: var(--color-dark);
      border: q(1) solid var(--color-border);

      &--accent {
        border-color: var(--color-accent);
        background: linear-gradient(135deg, var(--color-dark) 0%, rgba(0, 255, 136, 0.05) 100%);
      }

      &__icon {
        font-size: var(--text-3xl);
        color: var(--color-accent);
        margin-bottom: var(--space-4);
      }

      &__title {
        font-size: var(--text-xl);
        font-weight: var(--weight-bold);
        margin-bottom: var(--space-4);
      }

      &__content {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        color: var(--color-gray-400);

        p {
          margin-bottom: var(--space-4);

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    // -- approach-card  (from site-speckle_org/src/static/scss/components/_cards.scss) --
    .ss-c-approach-card {
      padding: var(--space-6);
      background: var(--color-surface);
      border: q(1) solid var(--color-border);
      transition: border-color var(--duration-fast);

      &:hover {
        border-color: var(--color-accent);
      }

      &__number {
        display: block;
        font-family: var(--font-mono);
        font-size: var(--text-3xl);
        font-weight: var(--weight-bold);
        color: var(--color-accent);
        margin-bottom: var(--space-4);
      }

      &__title {
        font-size: var(--text-lg);
        font-weight: var(--weight-bold);
        margin-bottom: var(--space-2);
      }

      &__text {
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
        color: var(--color-gray-400);
      }
    }

    // -- theme-tag  (from site-speckle_org/src/static/scss/components/_cards.scss) --
    .ss-c-theme-tag {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      padding: var(--space-2) var(--space-4);
      background: var(--color-dark);
      border: q(1) solid var(--color-border);
      color: var(--color-gray-300);
      transition: all var(--duration-fast);

      &:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
      }
    }

    // -- social-link  (from site-speckle_org/src/static/scss/components/_cards.scss) --
    .ss-c-social-link {
      width: q(44);
      height: q(44);
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-dark);
      border: q(1) solid var(--color-border);
      color: var(--color-gray-400);
      font-size: var(--text-lg);
      transition: all var(--duration-fast);

      &:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
      }
    }

    // -- player-controls  (from site-speckle_org/src/static/scss/components/_player.scss) --
    .ss-c-player-controls {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);

      &__progress {
        display: flex;
        align-items: center;
        gap: var(--space-4);
      }

      &__progress-bar {
        flex: 1;
        height: q(4);
        background: rgba(255, 255, 255, 0.2);
        border-radius: q(2);
        position: relative;
        cursor: pointer;

        &:hover {
          height: q(6);
        }
      }

      &__progress-fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0%;
        background: var(--color-accent);
        border-radius: q(2);
        transition: width 0.1s linear;
      }

      &__progress-handle {
        position: absolute;
        top: 50%;
        left: 0%;
        width: q(12);
        height: q(12);
        background: var(--color-accent);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity var(--duration-fast);

        .ss-c-player-controls__progress-bar:hover & {
          opacity: 1;
        }
      }

      &__time {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-gray-400);
        display: flex;
        gap: var(--space-1);
      }

      &__buttons {
        display: flex;
        align-items: center;
        gap: var(--space-2);
      }

      &__spacer {
        flex: 1;
      }
    }

    // -- player-btn  (from site-speckle_org/src/static/scss/components/_player.scss) --
    .ss-c-player-btn {
      width: q(40);
      height: q(40);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      border-radius: var(--radius-md);
      transition: all var(--duration-fast);

      svg {
        width: q(24);
        height: q(24);
      }

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      &--play {
        width: q(56);
        height: q(56);
        background: var(--color-white);
        color: var(--color-black);
        border-radius: 50%;

        &:hover {
          background: var(--color-gray-200);
          transform: scale(1.05);
        }

        svg {
          width: q(28);
          height: q(28);
        }
      }
    }

    // -- speckle-main  (from site-speckle_org/src/static/scss/layout/_container.scss) --
    .ss-c-speckle-main {
      min-height: 100vh;
    }

    // -- site-nav  (from site-speckle_org/src/static/scss/layout/_header.scss) --
    .ss-c-site-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &__logo {
        font-family: var(--font-mono);
        font-size: var(--text-lg);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-widest);
        color: var(--color-white);
        text-decoration: none;
        transition: color var(--duration-fast);

        &:hover {
          color: var(--color-accent);
        }
      }

      &__menu {
        display: flex;
        list-style: none;
        gap: var(--space-6);

        @media (max-width: q(639)) {
          gap: var(--space-4);
        }
      }

      &__link {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        letter-spacing: var(--tracking-wider);
        color: var(--color-gray-400);
        text-decoration: none;
        text-transform: uppercase;
        transition: color var(--duration-fast);

        &:hover {
          color: var(--color-accent);
        }
      }
    }

    // -- about-intro  (from site-speckle_org/src/static/scss/sections/_about.scss) --
    .ss-c-about-intro {
      padding: var(--space-16) 0;
      background: var(--color-black);

      &__content {
        font-size: var(--text-lg);
        line-height: var(--leading-relaxed);
        color: var(--color-gray-300);

        p {
          margin-bottom: var(--space-6);
        }
      }

      &__lead {
        font-size: var(--text-xl);
        color: var(--color-white);
        margin-bottom: var(--space-8);

        @media (min-width: q(768)) {
          font-size: var(--text-2xl);
        }
      }
    }

    // -- about-approach  (from site-speckle_org/src/static/scss/sections/_about.scss) --
    .ss-c-about-approach {
      padding: var(--space-16) 0;
      background: var(--color-black);

      &__header {
        text-align: center;
        margin-bottom: var(--space-12);
      }

      &__title {
        font-size: var(--text-2xl);
        font-weight: var(--weight-bold);
        margin-bottom: var(--space-2);

        @media (min-width: q(768)) {
          font-size: var(--text-3xl);
        }
      }

      &__subtitle {
        font-size: var(--text-lg);
        color: var(--color-gray-400);
      }
    }

    // -- approach-grid  (from site-speckle_org/src/static/scss/sections/_about.scss) --
    .ss-c-approach-grid {
      display: grid;
      gap: var(--space-6);

      @media (min-width: q(768)) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (min-width: q(1024)) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    // -- about-themes  (from site-speckle_org/src/static/scss/sections/_about.scss) --
    .ss-c-about-themes {
      padding: var(--space-16) 0;
      background: var(--color-surface);

      &__header {
        text-align: center;
        margin-bottom: var(--space-8);
      }

      &__title {
        font-size: var(--text-xl);
        font-weight: var(--weight-bold);
      }
    }

    // -- themes-grid  (from site-speckle_org/src/static/scss/sections/_about.scss) --
    .ss-c-themes-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-3);
    }

    // -- about-cta  (from site-speckle_org/src/static/scss/sections/_about.scss) --
    .ss-c-about-cta {
      padding: var(--space-16) 0;
      background: var(--color-black);

      &__box {
        text-align: center;
        padding: var(--space-12);
        background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-dark) 100%);
        border: q(1) solid var(--color-border);
      }

      &__title {
        font-size: var(--text-2xl);
        font-weight: var(--weight-bold);
        margin-bottom: var(--space-4);

        @media (min-width: q(768)) {
          font-size: var(--text-3xl);
        }
      }

      &__text {
        font-size: var(--text-lg);
        color: var(--color-gray-400);
        margin-bottom: var(--space-8);
        max-width: q(500);
        margin-left: auto;
        margin-right: auto;
      }

      &__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
      }
    }

    // -- newsletter-section  (from site-speckle_org/src/static/scss/sections/_contact.scss) --
    .ss-c-newsletter-section {
      padding: var(--space-16) 0;
      background: var(--color-black);
    }

    // -- newsletter-box  (from site-speckle_org/src/static/scss/sections/_contact.scss) --
    .ss-c-newsletter-box {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      padding: var(--space-8);
      background: linear-gradient(135deg, var(--color-surface) 0%, rgba(0, 255, 136, 0.05) 100%);
      border: q(1) solid var(--color-accent);

      @media (min-width: q(768)) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      &__content {
        flex: 1;
      }

      &__title {
        font-size: var(--text-xl);
        font-weight: var(--weight-bold);
        margin-bottom: var(--space-2);
      }

      &__text {
        color: var(--color-gray-400);
      }

      &__form {
        display: flex;
        gap: var(--space-3);
        flex-shrink: 0;

        @media (max-width: q(767)) {
          flex-direction: column;
        }
      }

      &__input {
        padding: var(--space-3) var(--space-4);
        background: var(--color-dark);
        border: q(1) solid var(--color-border);
        color: var(--color-white);
        min-width: q(250);

        &::placeholder {
          color: var(--color-gray-500);
        }

        &:focus {
          outline: none;
          border-color: var(--color-accent);
        }
      }
    }

    // -- content-page  (from site-speckle_org/src/static/scss/sections/_content.scss) --
    .ss-c-content-page {
      min-height: 100vh;
      padding-top: var(--space-20);
      padding-bottom: 0;
      background: var(--color-black);

      &__header {
        margin-bottom: var(--space-16);
        padding-bottom: var(--space-8);
        border-bottom: q(1) solid var(--color-border);
      }

      &__title {
        font-size: var(--text-4xl);
        font-weight: var(--weight-black);
        letter-spacing: var(--tracking-tight);
        text-transform: uppercase;
        margin-bottom: var(--space-4);

        @media (min-width: q(768)) {
          font-size: var(--text-5xl);
        }
      }

      &__description {
        font-size: var(--text-lg);
        color: var(--color-gray-400);
        max-width: q(600);
      }

      &__body {
        .ss-c-container--narrow {
          max-width: q(800);
        }
      }
    }

    // -- cta-block  (from site-speckle_org/src/static/scss/sections/_cta.scss) --
    .ss-c-cta-block {
      display: grid;
      gap: var(--space-12);
      align-items: center;

      @media (min-width: q(900)) {
        grid-template-columns: 1fr 1fr;
      }

      &__label {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        letter-spacing: var(--tracking-widest);
        text-transform: uppercase;
        color: var(--color-accent);
        margin-bottom: var(--space-4);
      }

      &__title {
        font-size: var(--text-3xl);
        font-weight: var(--weight-bold);
        margin-bottom: var(--space-6);

        @media (min-width: q(768)) {
          font-size: var(--text-4xl);
        }
      }

      &__text {
        font-size: var(--text-lg);
        line-height: var(--leading-relaxed);
        color: var(--color-gray-300);
        margin-bottom: var(--space-8);
      }

      &__visual {
        display: flex;
        justify-content: center;
      }

      &__frame {
        width: 100%;
        max-width: q(400);
        aspect-ratio: 16 / 9;
        background: linear-gradient(135deg, var(--color-surface-elevated), var(--color-dark));
        border: q(1) solid var(--color-border);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::before {
          content: '▶';
          font-size: q(48);
          color: var(--color-accent);
          opacity: 0.5;
        }
      }

      &__frame-label {
        position: absolute;
        top: var(--space-4);
        left: var(--space-4);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-wider);
        color: var(--color-gray-500);
        padding: var(--space-1) var(--space-2);
        border: q(1) solid var(--color-border);
      }
    }

    // -- episodes-section  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episodes-section {
      padding: var(--space-16) 0;
      background: var(--color-black);
    }

    // -- episodes-controls  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episodes-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-8);
      padding-bottom: var(--space-4);
      border-bottom: q(1) solid var(--color-border);

      &__count {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-gray-400);
      }

      &__filters {
        display: flex;
        gap: var(--space-2);
      }
    }

    // -- episodes-grid  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episodes-grid {
      display: grid;
      gap: var(--space-6);
      grid-template-columns: 1fr;

      @media (min-width: q(640)) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (min-width: q(1024)) {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    // -- episode-card  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episode-card {
      position: relative;
      background: var(--color-surface);
      border: q(1) solid var(--color-border);
      transition: all var(--duration-normal);

      &:hover {
        border-color: var(--color-accent);
        transform: translateY(q(-4));

        .ss-c-episode-card__overlay {
          opacity: 1;
        }
      }

      &--featured {
        grid-column: 1 / -1;

        @media (min-width: q(640)) {
          grid-column: span 2;
        }

        .ss-c-episode-card__thumbnail {
          aspect-ratio: 21/9;
        }
      }

      &__link {
        display: block;
        text-decoration: none;
        color: inherit;
      }

      &__visual {
        position: relative;
      }

      &__thumbnail {
        aspect-ratio: 16/9;
        background: linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-dark) 100%);
      }

      &__overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        transition: opacity var(--duration-fast);
      }

      &__play {
        width: q(60);
        height: q(60);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-accent);
        color: var(--color-black);
        font-size: var(--text-xl);
        border-radius: 50%;
      }

      &__badge {
        position: absolute;
        top: var(--space-3);
        left: var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-wider);
        padding: var(--space-1) var(--space-2);
        background: var(--color-black);
        border: q(1) solid var(--color-accent);
        color: var(--color-accent);
      }

      &__featured-badge,
      &__coming-soon {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-wider);
        padding: var(--space-1) var(--space-2);
      }

      &__featured-badge {
        background: var(--color-accent);
        color: var(--color-black);
      }

      &__coming-soon {
        background: var(--color-surface);
        border: q(1) solid var(--color-border);
        color: var(--color-gray-400);
      }

      &__content {
        padding: var(--space-4);
      }

      &__title {
        font-size: var(--text-lg);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-tight);
        margin-bottom: var(--space-2);
      }

      &__meta {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--color-gray-500);
        margin-bottom: var(--space-3);
      }

      &__divider {
        color: var(--color-gray-600);
      }

      &__themes {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
      }

      &__theme {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-2);
        background: var(--color-surface-elevated);
        border: q(1) solid var(--color-border);
        color: var(--color-gray-400);
      }
    }

    // -- episode-hero  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episode-hero {
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: center;
      padding: var(--space-20) 0;

      &__background {
        position: absolute;
        inset: 0;
        z-index: -1;
      }

      &__gradient {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(to right, var(--color-black) 0%, transparent 60%),
          linear-gradient(to top, var(--color-black) 0%, transparent 40%),
          linear-gradient(135deg, var(--color-dark) 0%, var(--color-black) 100%);
      }

      &__layout {
        display: grid;
        gap: var(--space-12);
        align-items: center;

        @media (min-width: q(1024)) {
          grid-template-columns: 1fr 1fr;
        }
      }

      &__player {
        order: 2;

        @media (min-width: q(1024)) {
          order: 1;
        }
      }

      &__info {
        order: 1;

        @media (min-width: q(1024)) {
          order: 2;
        }
      }

      &__badge {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-wider);
        padding: var(--space-2) var(--space-4);
        background: var(--color-accent-glow);
        border: q(1) solid var(--color-accent);
        color: var(--color-accent);
        margin-bottom: var(--space-4);
      }

      &__title {
        font-size: var(--text-4xl);
        font-weight: var(--weight-black);
        letter-spacing: var(--tracking-tight);
        margin-bottom: var(--space-4);

        @media (min-width: q(768)) {
          font-size: var(--text-5xl);
        }
      }

      &__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-gray-400);
      }

      &__meta-divider {
        color: var(--color-gray-600);
      }

      &__themes {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-bottom: var(--space-6);
      }

      &__theme {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-3);
        background: var(--color-surface);
        border: q(1) solid var(--color-border);
        color: var(--color-gray-300);
      }

      &__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
      }
    }

    // -- episode-player  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episode-player {
      aspect-ratio: 16/9;
      background: var(--color-surface);
      border: q(1) solid var(--color-border);
      position: relative;

      &__placeholder {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-4);
        background: linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-dark) 100%);
      }

      &__play-btn {
        width: q(80);
        height: q(80);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-accent);
        color: var(--color-black);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: transform var(--duration-fast);

        svg {
          width: q(32);
          height: q(32);
        }

        &:hover {
          transform: scale(1.1);
        }
      }

      &__label {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-gray-400);
      }
    }

    // -- episode-synopsis  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episode-synopsis {
      padding: var(--space-16) 0;
      background: var(--color-black);

      &__title {
        font-size: var(--text-sm);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-widest);
        text-transform: uppercase;
        color: var(--color-accent);
        margin-bottom: var(--space-6);
      }

      &__content {
        font-size: var(--text-lg);
        line-height: var(--leading-relaxed);
        color: var(--color-gray-300);

        p {
          margin-bottom: var(--space-4);
        }
      }
    }

    // -- episode-credits  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episode-credits {
      margin-top: var(--space-8);
      padding-top: var(--space-6);
      border-top: q(1) solid var(--color-border);
      display: flex;
      gap: var(--space-8);

      &__item {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
      }

      &__label {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-wider);
        color: var(--color-gray-500);
        text-transform: uppercase;
      }

      &__value {
        font-size: var(--text-base);
        color: var(--color-white);
      }
    }

    // -- episode-details  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episode-details {
      padding: var(--space-16) 0;
      background: var(--color-surface);

      &__grid {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: 1fr;

        @media (min-width: q(768)) {
          grid-template-columns: repeat(3, 1fr);
        }
      }
    }

    // -- episode-nav  (from site-speckle_org/src/static/scss/sections/_episodes.scss) --
    .ss-c-episode-nav {
      padding: var(--space-16) 0;
      background: var(--color-black);

      &__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-8);
      }

      &__title {
        font-size: var(--text-xl);
        font-weight: var(--weight-bold);
      }

      &__link {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-accent);
        transition: color var(--duration-fast);

        &:hover {
          color: var(--color-white);
        }
      }

      &__grid {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(2, 1fr);

        @media (min-width: q(768)) {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      &__card {
        padding: var(--space-4);
        background: var(--color-surface);
        border: q(1) solid var(--color-border);
        transition: border-color var(--duration-fast);

        &:hover {
          border-color: var(--color-gray-500);
        }
      }

      &__badge {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--color-accent);
        margin-bottom: var(--space-2);
      }

      &__card-title {
        font-size: var(--text-base);
        font-weight: var(--weight-semibold);
        margin-bottom: var(--space-2);
      }

      &__status {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--color-gray-500);
      }
    }

    // -- hero-player  (from site-speckle_org/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-player {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: q(600);
      display: flex;
      align-items: flex-end;
      padding: var(--space-16) 0;
      overflow: hidden;

      &__background {
        position: absolute;
        inset: 0;
        z-index: -1;
      }

      &__video-container {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-black) 100%);
      }

      &__video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.7;
      }

      &__gradient {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(to top, var(--color-black) 0%, transparent 50%),
          linear-gradient(to right, var(--color-black) 0%, transparent 60%),
          linear-gradient(135deg, rgba(0, 255, 136, 0.05) 0%, transparent 50%);
      }

      &__content {
        position: relative;
        z-index: 1;
        max-width: q(700);
        padding: 0 var(--space-8);

        @media (min-width: q(1200)) {
          padding: 0 var(--space-12);
        }
      }

      &__branding {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        margin-bottom: var(--space-6);
      }

      &__label {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        letter-spacing: var(--tracking-widest);
        color: var(--color-accent);
        padding: var(--space-1) var(--space-3);
        border: q(1) solid var(--color-accent);
        background: var(--color-accent-glow);
      }

      &__episode {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        letter-spacing: var(--tracking-wider);
        color: var(--color-gray-400);
      }

      &__title {
        margin-bottom: var(--space-6);
      }

      &__title-line {
        display: block;
        font-size: var(--text-4xl);
        font-weight: var(--weight-black);
        letter-spacing: var(--tracking-tight);
        line-height: var(--leading-none);
        text-transform: uppercase;

        @media (min-width: q(768)) {
          font-size: var(--text-5xl);
        }

        @media (min-width: q(1200)) {
          font-size: var(--text-6xl);
        }

        &--accent {
          color: var(--color-accent);
          text-shadow: 0 0 q(60) var(--color-accent-glow);
        }
      }

      &__description {
        font-size: var(--text-lg);
        font-weight: var(--weight-light);
        line-height: var(--leading-relaxed);
        color: var(--color-gray-300);
        margin-bottom: var(--space-6);
        max-width: q(550);
      }

      &__meta {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-8);
        flex-wrap: wrap;
      }

      &__meta-item {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        color: var(--color-gray-400);

        &--tag {
          color: var(--color-accent);
          padding: var(--space-1) var(--space-2);
          background: var(--color-accent-glow);
          border-radius: var(--radius-sm);
        }
      }

      &__meta-divider {
        color: var(--color-gray-600);
      }

      &__actions {
        display: flex;
        gap: var(--space-4);
        flex-wrap: wrap;
      }

      &__controls {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--space-6) var(--space-8);
        background: linear-gradient(to top, var(--color-black), transparent);
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-out);

        .ss-c-hero-player:hover & {
          opacity: 1;
        }
      }

      &__scroll-indicator {
        position: absolute;
        bottom: var(--space-8);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-gray-500);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        animation: bounce 2s infinite;

        svg {
          width: q(20);
          height: q(20);
        }
      }
    }

    // -- animate-loading  (from site-speckle_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-animate-loading {
      position: relative;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        animation: loading 1.5s infinite;
      }
    }

    // -- main-grid  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-main-grid {
        display: flex;
        flex-direction: column;
        max-width: $container-max;
        margin: 0 auto;
        border-left: q(1) solid var(--ss-color-border, #e5e5e5);
        border-right: q(1) solid var(--ss-color-border, #e5e5e5);
        min-height: 100vh;
        position: relative;
    }

    // -- hero-mark  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-hero-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: q(56);
        height: q(56);
        font-size: $font-size-2xl;
        color: $color-accent;
        background: var(--ss-color-fill, #ffffff);
        border: q(1) solid var(--ss-color-border, #e5e5e5);
        border-radius: $radius-lg;
        margin-bottom: unset;
    }

    // -- hero-tagline  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-hero-tagline {
        font-size: $font-size-lg;
        color: #525252;
        margin-bottom: unset;

        @media (min-width: q(768)) {
            font-size: $font-size-xl;
        }
    }

    // -- products  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-products {
        border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);
        position: relative;

        &::before {
        // [parity] (stripped @include)
        }

        &::after {
        // [parity] (stripped @include)
        }
    }

    // -- products-container  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-products-container {
        display: flex;
        flex-direction: column;

        @media (min-width: q(768)) {
            flex-direction: row;
        }
    }

    // -- product-card  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-product-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: unset unset;
        transition: background unset;
        border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);

        @media (min-width: q(768)) {
            border-bottom: none;
            border-right: q(1) solid var(--ss-color-border, #e5e5e5);

            &:last-child {
                border-right: none;
            }
        }

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background: #ffffff;

            .ss-c-product-link {
                color: $color-accent;
            }
        }
    }

    // -- product-icon  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-product-icon {
        margin-bottom: unset;
        color: #525252;
    }

    // -- product-title  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-product-title {
        font-size: $font-size-xl;
        font-weight: 600;
        margin-bottom: unset;
    }

    // -- product-description  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-product-description {
        font-size: $font-size-sm;
        color: #525252;
        line-height: 1.7;
        margin-bottom: unset;
    }

    // -- product-features  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-product-features {
        display: flex;
        flex-wrap: wrap;
        gap: unset;
        margin-bottom: unset;

        span {
            padding: unset unset;
            font-size: $font-size-xs;
            color: #525252;
            background: #ffffff;
            border: q(1) solid var(--ss-color-border, #e5e5e5);
            border-radius: $radius-sm;
        }
    }

    // -- product-link  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-product-link {
        margin-top: auto;
        font-size: $font-size-sm;
        font-weight: 500;
        color: #525252;
        transition: color unset;
    }

    // -- features-title  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-features-title {
        font-size: $font-size-2xl;
        font-weight: 600;
        text-align: center;
        margin-bottom: unset;
    }

    // -- footer-col  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-footer-col {
        display: flex;
        flex-direction: column;
        gap: unset;

        h4 {
            font-size: $font-size-xs;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #525252;
            margin-bottom: unset;
        }

        a {
            font-size: $font-size-sm;
            color: #737373;
            transition: color unset;

            &:hover {
                color: var(--ss-color-text, #1a1a1a);
            }
        }
    }

    // -- brand-wrapper  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-brand-wrapper {
        align-self: stretch;
        display: flex;
        align-items: center;
        gap: q(16);
        font-size: q(24);
        text-transform: uppercase;
        justify-content: start;
        margin: auto 0;
        color: #000;
    }

    // -- brand-logo  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-brand-logo {
        width: q(24);
        height: q(24);
    }

    // -- section-a  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-section-a {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        background: #fff;
        overflow: hidden;
        margin-bottom: q(48);
    }

    // -- content  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-content {
        display: grid;
        grid-template-columns: repeat(24, 1fr);
        gap: q(24);
        width: 100%;
        height: 100%;
        padding: 0 q(48);
    }

    // -- content-title  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-content-title {
        grid-column: span 12;
        display: inline-flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-bottom: q(24);
    }

    // -- content-illustration  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-content-illustration {
        grid-column: span 12;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    // -- swiper  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-swiper {
        width: 100%;
        height: 100%;
    }

    // -- card-image  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-card-image {
        grid-column: span 12;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    // -- swiper-pagination  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-swiper-pagination {
        position: absolute;
        top: q(450);
    }

    // -- swiper-pagination-bullet  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-swiper-pagination-bullet {
        height: q(7);
        width: q(26);
        border-radius: q(25);
        background: black;
    }

    // -- swiper-button-prev  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-swiper-button-prev {
        opacity: 0.7;
        color: black;
        transition: all 0.3s ease;
    }

    // -- content-with-image  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-content-with-image {
        grid-column: span 12;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: q(24);
    }

    // -- content-with-image-picture  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-content-with-image-picture {
        width: 100%;
        height: q(384);
        overflow: hidden;
    }

    // -- content-with-image-description  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-content-with-image-description {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        flex-direction: column;
        align-items: flex-start;
        gap: q(16);
        width: 100%;
    }

    // -- content-with-text  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-content-with-text {
        grid-column: span 12;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: q(32);
    }

    // -- description-text  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-description-text {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: q(24);
        align-self: stretch;
    }

    // -- steps-section  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-steps-section {
        display: flex;
        flex-direction: column;
        gap: q(40);
        width: 100%;
    }

    // -- step  (from site-starling_studio/src/static/scss/_old.scss) --
    // Scoped under .ss-c-starling: the bare selector overrode the steps
    // module's layout (this layer outranks ss.components).
    .ss-c-starling .ss-c-step {
        display: grid;
        grid-template-columns: q(16) 1fr;
        gap: q(32);
        align-items: flex-start;
    }

    // -- step-number  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-step-number {
        display: flex;
        justify-content: center;
        align-items: center;
        width: q(32);
        height: q(32);
        font-weight: bold;
        border: q(2) solid #000;
        border-radius: 50%;
        /* Circle shape */
        flex-shrink: 0;
        /* Prevents shrinking */
    }

    // -- step-content  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-step-content {
        display: flex;
        flex-direction: column;
        gap: q(24);
        /* Space between paragraphs */
    }

    // -- double_diamond-image  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-double_diamond-image {
        width: 100%;
        height: auto;
    }

    // -- filter-system  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-filter-system {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: q(24);
    }

    // -- filter-list  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-filter-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: q(24);
    }

    // -- filter-item  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-filter-item {
        cursor: pointer;
        font-weight: 700;
        text-transform: uppercase;
        transition: color 0.3s ease-in-out, border-bottom 0.3s ease-in-out;
        padding-bottom: q(8);
        border-bottom: q(2) solid transparent;
    }

    // -- content-section  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-content-section {
        grid-column: span 6;
        flex-direction: column;
        gap: q(16);
    }

    // -- section-text  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-section-text {
        font-size: q(14);
        font-weight: 400;
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        gap: q(5.6);
    }

    // -- link-column  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-link-column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: q(8) q(24);
        align-self: stretch;
    }

    // -- copyright  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-copyright {
        width: 100%;
        font-size: q(14);
        text-align: center;
        padding: q(48) 0;
    }

    // -- badge--sm  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--sm {
        --badge-padding: #{q(2)} #{q(6)};
        --badge-font-size: #{q(10)};
    }

    // -- badge--lg  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--lg {
        --badge-padding: #{q(6)} #{q(12)};
        --badge-font-size: #{q(14)};
    }

    // -- badge--pill  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--pill {
        --badge-radius: 999px;
    }

    // -- badge--square  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--square {
        --badge-radius: 0;
    }

    // -- badge--circle  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--circle {
        --badge-radius: 50%;
        --badge-padding: #{q(1)};
        aspect-ratio: 1;
    }

    // -- badge--primary  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--primary {
        --badge-bg: var(--color-primary, #008fbf);
        --badge-color: #fff;
    }

    // -- badge--accent  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--accent {
        --badge-bg: var(--color-accent, #0066cc);
        --badge-color: #fff;
    }

    // -- badge--success  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--success {
        --badge-bg: var(--color-success, #28a745);
        --badge-color: #fff;
    }

    // -- badge--warning  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--warning {
        --badge-bg: var(--color-warning, #ffc107);
        --badge-color: #000;
    }

    // -- badge--danger  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--danger {
        --badge-bg: var(--color-danger, #dc3545);
        --badge-color: #fff;
    }

    // -- badge--muted  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--muted {
        --badge-bg: var(--color-surface-alt, #e9ecef);
        --badge-color: var(--color-text-muted, #6c757d);
    }

    // -- badge--outline  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--outline {
        --badge-bg: transparent;
        --badge-border: 1px solid currentColor;
    }

    // -- badge--outline-primary  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--outline-primary {
        --badge-bg: transparent;
        --badge-color: var(--color-primary, #008fbf);
        --badge-border: 1px solid currentColor;
    }

    // -- badge-group  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge-group {
        display: inline-flex;
        flex-wrap: wrap;
        gap: q(1);
    }

    // -- blockquote__text  (from site-starling_studio/src/static/scss/app/_blockquote.scss) --
    .ss-c-blockquote__text {
        margin: 0;
        padding: 0;
        display: block;
        text-align: center;
        overflow: hidden;
        font-style: normal;
        font-weight: 320;
        font-size: q(80);
        white-space: pre-line;
    }

    // -- blockquote__footer  (from site-starling_studio/src/static/scss/app/_blockquote.scss) --
    .ss-c-blockquote__footer {
        margin-top: q(24);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: q(4);
    }

    // -- blockquote__author  (from site-starling_studio/src/static/scss/app/_blockquote.scss) --
    .ss-c-blockquote__author {
        font-style: normal;
        font-weight: 500;
        opacity: 0.8;
    }

    // -- blockquote__source  (from site-starling_studio/src/static/scss/app/_blockquote.scss) --
    .ss-c-blockquote__source {
        font-size: q(14);
        opacity: 0.6;
    }

    // -- blockquote--left  (from site-starling_studio/src/static/scss/app/_blockquote.scss) --
    .ss-c-blockquote--left {
        text-align: left;

        .ss-c-blockquote__text {
            text-align: left;
        }

        .ss-c-blockquote__footer {
            align-items: flex-start;
        }
    }

    // -- blockquote--right  (from site-starling_studio/src/static/scss/app/_blockquote.scss) --
    .ss-c-blockquote--right {
        text-align: right;

        .ss-c-blockquote__text {
            text-align: right;
        }

        .ss-c-blockquote__footer {
            align-items: flex-end;
        }
    }

    // -- blockquote--center  (from site-starling_studio/src/static/scss/app/_blockquote.scss) --
    .ss-c-blockquote--center {
        text-align: center;

        .ss-c-blockquote__text {
            text-align: center;
        }

        .ss-c-blockquote__footer {
            align-items: center;
        }
    }

    // -- boids-canvas  (from site-starling_studio/src/static/scss/app/_boids.scss) --
    .ss-c-boids-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      pointer-events: none;
      // Ensure canvas doesn't interfere with content
      isolation: isolate;
    }

    // -- card--media  (from site-starling_studio/src/static/scss/app/_card.scss) --
    .ss-c-card--media {
        position: relative;
        overflow: hidden;
        min-height: q(320);
        background-image: var(--card-bg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        // Dark overlay for text readability
        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.3) 0%,
                rgba(0, 0, 0, 0.2) 25%,
                rgba(0, 0, 0, 0.1) 35%,
                rgba(0, 0, 0, 0) 100%
            );
            z-index: 1;
            transition: background 0.3s ease;
        }

        // Hover effect - lighter overlay
        &:hover::before {
            background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.5) 0%,
                rgba(0, 0, 0, 0.4) 25%,
                rgba(0, 0, 0, 0.3
                ) 35%,
                rgba(0, 0, 0, 0.1) 100%
            );
        }

        // Hide the image element when using background
        .ss-c-card__image {
            display: none;
        }

        // Position body at bottom
        .ss-c-card__body {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            padding: q(4);
        }

        // Light text on dark background
        .ss-c-card__title,
        .ss-c-card__title a,
        .ss-c-card__subtitle,
        .ss-c-card__text,
        .ss-c-card__text p,
        .ss-c-card__content,
        .ss-c-card__content p {
            color: #fff;
        }

        .ss-c-card__title a {
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        .ss-c-card__footer {
            margin-top: q(2);
        }
    }

    // -- card-horizontal  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-card-horizontal {
        min-height: 50vh;
        background: var(--color-surface, #fff);
        overflow: hidden;
        border: q(1) solid var(--color-border, #000);
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(q(-2));
        }

        // Responsive - stack on mobile
        @media (max-width: q(768)) {
            min-height: auto;
        }

        // Title link styling
        h2 a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;

            &:hover {
                color: var(--color-primary, #0066cc);
            }
        }
    }

    // -- card-horizontal__header  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-card-horizontal__header {
        // font-size_10 = baseline(10) = 2.5rem, line-height ~1.2 = 3rem
        // 4x that = 12rem minimum
        min-height: calc(4 * 1.2 * #{baseline(10)});

        h2 {
            // Modern: trim leading above cap-height and below baseline
            // Safari 17.4+, Chrome 128+
            text-box-trim: both;
            text-box-edge: cap alphabetic;
        }
    }

    // -- card-horizontal__image  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-card-horizontal__image {
        position: relative;
        overflow: hidden;
        min-height: 50vh;

        @media (max-width: q(768)) {
            min-height: q(300);
        }
    }

    // -- card-horizontal__figure  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-card-horizontal__figure {
        position: absolute;
        inset: 0;
        margin: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: var(--color-surface-alt, #f5f5f5);
        transition: transform 0.5s ease;

        // Placeholder icon
        .ss-c-i {
            opacity: 0.2;
        }
    }

    // -- card-horizontal__systems  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-card-horizontal__systems {
        border-top: q(1) solid var(--color-border, #e0e0e0);

        // Remove list styling
        ul {
            list-style: none;
        }

        // System item hover effects
        li a {
            text-decoration: none;
            transition: transform 0.2s ease;

            span {
                transition: text-decoration 0.2s ease;
            }

            &:hover {
                transform: translateY(q(-2));

                span {
                    text-decoration: underline;
                }
            }
        }

        // Badge hover effects (legacy)
        .ss-c-badge {
            pointer-events: auto;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

            &:hover {
                border-bottom:q(1) solid #000;
                transform: translateY(q(-1));
            }
        }
    }

    // -- section--systems  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-section--systems{
        grid-template-rows: minmax(25vh, auto);
    }

    // -- system_card  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-system_card{
        min-height: 25vh;
        height:100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: var(--N2405);
    }

    // -- system_card__content  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-system_card__content{
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(q(8));
        -webkit-backdrop-filter: blur(q(8)); // Safari support
    }

    // -- system_icon  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-system_icon {
        color: #fff;

        .ss-c-i {
            color: inherit;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: q(32);
            height: q(32);
            font-size:q(32);

            &::before{
                font-size:q(32);
            }

            img {
                filter: brightness(0) invert(1); // Makes SVG white
            }
        }
    }

    // -- double_diamond  (from site-starling_studio/src/static/scss/app/_double_diamond.scss) --
    .ss-c-double_diamond {
      &__container {
        width: 100%;
        height: 100%;
        min-height: q(500);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: q(32);
        background: linear-gradient(135deg, var(--color-background-gradient-start) 0%, var(--color-background-gradient-end) 100%);
        border-radius: q(12);
        margin: q(32) 0;
      }

      &__svg {
        width: 100%;
        height: auto;
        max-width: 100%;
        filter: var(--diamond-shadow);
      }

      &__line {
        stroke: var(--color-line-stroke);
        stroke-width: 2;
        stroke-dasharray: 5, 5;
        opacity: 0.5;
        transition: all 0.3s ease;
      }

      &__vertical-line {
        stroke: var(--color-line-stroke);
        stroke-width: 1;
        opacity: 0.8;
        transition: all 0.3s ease;
      }

      &__phase {
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &--active {
          filter: var(--diamond-shadow-active);

          .ss-c-double_diamond__shape {
            filter: brightness(1.15);
          }
        }

        &--dimmed {
          opacity: 0.3;

          .ss-c-double_diamond__shape {
            filter: grayscale(80%) opacity(0.4);
          }

          .ss-c-double_diamond__label {
            opacity: 0.3;
          }
        }
      }

      &__shape {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        fill: var(--diamond-fill);
        stroke: var(--diamond-outline-color);
        stroke-width: var(--diamond-outline-width);
        filter: brightness(1);
        cursor: pointer;

        &:hover {
          stroke-width: q(4);
          filter: brightness(1.05) drop-shadow(0 q(4) q(12) rgba(37, 99, 235, 0.3));
        }
      }

      &__interactive {
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          r: 75;
          fill: var(--color-shadow-light);
        }
      }

      &__label {
        font-size: q(18);
        font-weight: 600;
        fill: var(--color-text-primary);
        transition: all 0.3s ease;
        letter-spacing: q(0.5);
        pointer-events: none;

        @media (max-width: q(768)) {
          font-size: q(14);
        }
      }

      &__tooltip {
        position: fixed;
        background: var(--color-tooltip-bg);
        border-radius: q(8);
        padding: q(16);
        max-width: q(300);
        box-shadow: 0 q(20) q(25) q(-5) rgba(0, 0, 0, 0.1), 0 q(10) q(10) q(-5) rgba(0, 0, 0, 0.04);
        z-index: 1000;
        pointer-events: none;
        animation: tooltip-fade-in 0.2s ease-out;
        border-left: q(4) solid;

        @media (max-width: q(768)) {
          max-width: q(250);
          padding: q(12);
          font-size: q(14);
        }
      }

      &__tooltip-content {
        display: flex;
        flex-direction: column;
        gap: q(12);
      }

      &__tooltip-title {
        font-size: q(16);
        font-weight: 700;
        color: var(--color-text-primary);
        margin: 0;

        @media (max-width: q(768)) {
          font-size: q(14);
        }
      }

      &__tooltip-description {
        font-size: q(14);
        color: var(--color-text-secondary);
        line-height: 1.5;
        margin: 0;

        @media (max-width: q(768)) {
          font-size: q(12);
        }
      }

      &__tooltip-steps {
        font-size: q(13);
        color: var(--color-text-secondary);

        @media (max-width: q(768)) {
          font-size: q(11);
        }

        strong {
          color: var(--color-text-primary);
          font-weight: 600;
          display: block;
          margin-bottom: q(6);
        }

        ul {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            padding: q(4) 0;
            padding-left: q(16);
            position: relative;

            &:before {
              content: '→';
              position: absolute;
              left: 0;
              color: var(--color-text-muted);
              font-weight: bold;
            }
          }
        }
      }
    }

    // -- eyebrow--sm  (from site-starling_studio/src/static/scss/app/_eyebrow.scss) --
    .ss-c-eyebrow--sm {
        --eyebrow-font-size: #{q(10)};
    }

    // -- eyebrow--lg  (from site-starling_studio/src/static/scss/app/_eyebrow.scss) --
    .ss-c-eyebrow--lg {
        --eyebrow-font-size: #{q(14)};
    }

    // -- eyebrow--muted  (from site-starling_studio/src/static/scss/app/_eyebrow.scss) --
    .ss-c-eyebrow--muted {
        --eyebrow-color: var(--color-text-muted, #666);
    }

    // -- eyebrow--light  (from site-starling_studio/src/static/scss/app/_eyebrow.scss) --
    .ss-c-eyebrow--light {
        --eyebrow-color: rgba(255, 255, 255, 0.8);
    }

    // -- eyebrow--accent  (from site-starling_studio/src/static/scss/app/_eyebrow.scss) --
    .ss-c-eyebrow--accent {
        --eyebrow-color: var(--color-accent, #0066cc);
    }

    // -- eyebrow--underline  (from site-starling_studio/src/static/scss/app/_eyebrow.scss) --
    .ss-c-eyebrow--underline {
        padding-bottom: var(--eyebrow-margin-bottom);
        border-bottom: q(2) solid currentColor;
    }

    // -- eyebrow--dot  (from site-starling_studio/src/static/scss/app/_eyebrow.scss) --
    .ss-c-eyebrow--dot::before {
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        background: currentColor;
        border-radius: 50%;
        margin-right: 0.75em;
        vertical-align: middle;
    }

    // -- filter-bar__label  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar__label {
        font-size: var(--filter-btn-font-size);
        font-weight: 600;
        color: var(--color-text-muted, #666);
        margin-right: var(--filter-bar-gap);
    }

    // -- filter-bar--bordered  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar--bordered {
        border-top: var(--filter-bar-border);
        border-bottom: var(--filter-bar-border);
    }

    // -- filter-bar--pills  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar--pills {
        --filter-btn-radius: 999px;
    }

    // -- filter-bar--sm  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar--sm {
        --filter-bar-gap: #{q(4)};
        --filter-btn-padding: #{q(4)} #{q(8)};
        --filter-btn-font-size: #{q(12)};
    }

    // -- filter-bar--lg  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar--lg {
        --filter-bar-gap: #{q(12)};
        --filter-btn-padding: #{q(12)} #{q(24)};
        --filter-btn-font-size: #{q(16)};
    }

    // -- filter-bar--center  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar--center {
        justify-content: center;
    }

    // -- filter-bar--spread  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar--spread {
        justify-content: space-between;
    }

    // -- filter-bar--minimal  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar--minimal {
        --filter-btn-border: none;
        --filter-btn-radius: #{q(4)};
    }

    // -- filter-bar--underline  (from site-starling_studio/src/static/scss/app/_filter_bar.scss) --
    .ss-c-filter-bar--underline {
        --filter-btn-border: none;
        --filter-btn-radius: 0;
        --filter-btn-bg-hover: transparent;

        .ss-c-filter-btn {
            border-bottom: q(2) solid transparent;

            &:hover {
                border-bottom-color: var(--color-border, #e0e0e0);
            }

            &.is-active,
            &[aria-pressed="true"] {
                background: transparent;
                color: var(--filter-btn-bg-active);
                border-bottom-color: currentColor;
            }
        }
    }

    // -- gap--row--00  (from site-starling_studio/src/static/scss/app/_index.scss) --
    .ss-c-gap--row--00 {
        row-gap: 0;
    }

    // -- gap--row--02  (from site-starling_studio/src/static/scss/app/_index.scss) --
    .ss-c-gap--row--02{
        row-gap: q(10);
    }

    // -- gap--col--00  (from site-starling_studio/src/static/scss/app/_index.scss) --
    .ss-c-gap--col--00 {
        column-gap: 0;
    }

    // -- page-header__title  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__title {
        font-size: var(--page-header-title-size);
        font-weight: var(--page-header-title-weight);
        text-transform: var(--page-header-title-transform);
        color: var(--page-header-title-color);
        white-space: nowrap;
        overflow: hidden;
        will-change: font-size, line-height;
    }

    // -- page-header__eyebrow  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__eyebrow {
        display: block;
        font-size: q(12);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-primary, #008fbf);
        margin-bottom: q(8);
    }

    // -- page-header__headline  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__headline {
        font-size: clamp(q(16), 5vw, q(32));
        font-weight: 700;
        line-height: 1.1;
        color: inherit;
        margin: 0;

        // Allow wrapping for long headlines
        white-space: normal;
    }

    // -- page-header__description  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__description {
        font-size: var(--page-header-text-size);
        color: var(--page-header-text-color);
        max-width: var(--page-header-text-max-width);
        margin-top: q(16);

        p {
            margin: 0;
        }
    }

    // -- page-header__text  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__text {
        font-size: var(--page-header-text-size);
        color: var(--page-header-text-color);
        max-width: var(--page-header-text-max-width);
        margin-top: q(32);

        &:first-child {
            margin-top: 0;
        }
    }

    // -- page-header--borderless  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--borderless {
        --page-header-border-top: none;
        --page-header-border-bottom: none;
    }

    // -- page-header--border-bottom  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--border-bottom {
        --page-header-border-bottom: 1px solid #000;
    }

    // -- page-header--sm  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--sm {
        --page-header-title-size: #{q(24)};
        --page-header-min-height: 15vh;
    }

    // -- page-header--lg  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--lg {
        --page-header-title-size: #{q(60)};
        --page-header-min-height: 35vh;
    }

    // -- page-header--center  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--center {
        text-align: center;

        .ss-c-page-header__text {
            margin-left: auto;
            margin-right: auto;
        }
    }

    // -- page-header--light  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--light {
        --page-header-border-top: 1px solid rgba(255, 255, 255, 0.2);
        --page-header-title-color: #fff;
        --page-header-text-color: rgba(255, 255, 255, 0.8);
    }

    // -- page-header--wrap  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--wrap {
        .ss-c-page-header__title {
            white-space: normal;
            overflow: visible;
        }
    }

    // -- page-hero__image  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    // -- page-hero__overlay  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero__overlay {
        position: absolute;
        inset: 0;
        background: var(--page-hero-overlay);
        z-index: 1;
    }

    // -- page-hero__content  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero__content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: q(32);
        color: #fff;
    }

    // -- page-hero__placeholder  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero__placeholder {
        position: absolute;
        inset: 0;
        background: var(--color-primary, #008fbf);

        // Subtle gradient for visual interest
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                135deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 50%,
                transparent 100%
            );
        }
    }

    // -- page-hero--wide  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--wide {
        --page-hero-aspect: 21 / 9;
    }

    // -- page-hero--square  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--square {
        --page-hero-aspect: 1 / 1;
    }

    // -- page-hero--video  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--video {
        --page-hero-aspect: 16 / 9;
    }

    // -- page-hero--full  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--full {
        --page-hero-min-height: 100vh;
        --page-hero-max-height: none;
    }

    // -- page-hero--short  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--short {
        --page-hero-min-height: 30vh;
        --page-hero-max-height: 50vh;
    }

    // -- page-hero--no-overlay  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--no-overlay {
        .ss-c-page-hero__overlay {
            display: none;
        }
    }

    // -- page-hero--light-overlay  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--light-overlay {
        --page-hero-overlay: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            transparent 100%
        );
    }

    // -- page-hero--center  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--center {
        .ss-c-page-hero__content {
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    }

    // -- page-hero--top  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--top {
        .ss-c-page-hero__content {
            justify-content: flex-start;
        }
    }

    // -- page-hero--dark  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--dark {
        --page-hero-bg: var(--color-surface-dark, #1a1a1a);
    }

    // -- page-hero--brand  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--brand {
        --page-hero-bg: var(--color-primary, #008fbf);
    }

    // -- ribbon__menu  (from site-starling_studio/src/static/scss/app/_ribbon.scss) --
    .ss-c-ribbon__menu {
        visibility: hidden;
        display: none;
    }

    // -- series-card  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card {
        background: var(--series-card-bg);
        border: var(--series-card-border);
        border-radius: var(--series-card-radius);
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;

        &:hover {
            transform: translateY(q(-2));
            box-shadow: 0 q(4) q(12) rgba(0, 0, 0, 0.1);
        }
    }

    // -- series-card__inner  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    // -- series-card__image  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__image {
        position: relative;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        margin: 0;
        background: var(--color-surface-alt, #f5f5f5);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    // -- series-card__image--placeholder  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__image--placeholder {
        background: var(--series-card-image-bg);
        color: var(--series-card-image-color);

        .ss-c-i,
        i {
            font-size: q(40);
            opacity: 0.5;
        }
    }

    // -- series-card__content  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__content {
        display: flex;
        flex-direction: column;
        padding: q(16) q(20);
        gap: q(8);
        flex-grow: 1;
    }

    // -- series-card__title  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__title {
        font-size: q(18);
        font-weight: 700;
        line-height: 1.2;
        margin: 0;

        a {
            color: var(--series-card-title-color);
            text-decoration: none;
            transition: color 0.2s ease;

            &:hover {
                color: var(--series-card-link-color);
            }
        }
    }

    // -- series-card__subtitle  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__subtitle {
        font-size: q(14);
        color: var(--series-card-text-color);
        margin: 0;
    }

    // -- series-card__systems  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__systems {
        display: flex;
        flex-wrap: wrap;
        gap: q(8);
        margin-top: q(8);
    }

    // -- series-card__system-icon  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__system-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--series-card-icon-size);
        height: var(--series-card-icon-size);
        color: var(--series-card-icon-color);
        opacity: 0.6;
        transition: opacity 0.2s ease;

        &:hover {
            opacity: 1;
        }

        .ss-c-i,
        i {
            font-size: q(16);
        }
    }

    // -- series-section  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-section {
        padding: q(32) 0;
        border-top: q(1) solid var(--color-border, #e0e0e0);

        h2 {
            font-size: q(28);
            font-weight: 700;
            margin: 0 0 q(24);
        }
    }

    // -- series-card--compact  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card--compact {
        .ss-c-series-card__inner {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
    }

    // -- series-card__header  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__header {
        padding: q(20);
        border-bottom: q(1) solid var(--color-border, #e0e0e0);
    }

    // -- series-card__system-list  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__system-list {
        list-style: none;
        margin: 0;
        padding: 0;
        flex-grow: 1;
    }

    // -- series-card__system-item  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__system-item {
        border-bottom: q(1) solid var(--color-border, #e0e0e0);

        &:last-child {
            border-bottom: none;
        }
    }

    // -- series-card__system-link  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__system-link {
        display: grid;
        grid-template-columns: q(40) 1fr;
        grid-template-rows: auto auto;
        gap: 0 q(12);
        padding: q(12) q(20);
        text-decoration: none;
        color: inherit;
        transition: background 0.2s ease;

        &:hover {
            background: var(--color-surface-alt, #f5f5f5);
        }
    }

    // -- series-card__system-name  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__system-name {
        font-size: q(14);
        font-weight: 600;
        color: var(--color-text, #333);
        line-height: 1.3;
        align-self: end;
    }

    // -- series-card__system-subtitle  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card__system-subtitle {
        font-size: q(12);
        color: var(--color-text-muted, #666);
        line-height: 1.3;
        align-self: start;
    }

    // -- series-card--lg  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card--lg {
        --series-card-image-size: #{q(160)};

        .ss-c-series-card__image--placeholder .ss-c-i,
        .ss-c-series-card__image--placeholder i {
            font-size: q(56);
        }

        .ss-c-series-card__title {
            font-size: q(24);
        }
    }

    // -- series-card--stacked  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card--stacked {
        .ss-c-series-card__image {
            aspect-ratio: 16 / 9;
        }
    }

    // -- series-card--dark  (from site-starling_studio/src/static/scss/app/_series_card.scss) --
    .ss-c-series-card--dark {
        --series-card-bg: var(--color-surface-dark, #1a1a1a);
        --series-card-border: 1px solid rgba(255, 255, 255, 0.1);
        --series-card-title-color: #fff;
        --series-card-text-color: rgba(255, 255, 255, 0.7);
        --series-card-icon-color: var(--color-primary-light, #4a7ab8);
        --series-card-image-bg: var(--color-primary-dark, #0f1f33);
    }

    // -- double_diamond__container  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double_diamond__container {
        width: 100%;
        max-width: q(900);
        margin: q(32) auto;
    }

    // -- double_diamond__svg  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double_diamond__svg {
        width: 100%;
        height: auto;
    }

    // -- double_diamond__line  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double_diamond__line {
        stroke: var(--color-border, #e0e0e0);
        stroke-width: 1;
    }

    // -- double_diamond__vertical-line  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double_diamond__vertical-line {
        stroke: var(--color-border, #e0e0e0);
        stroke-width: 1;
        stroke-dasharray: 4 4;
    }

    // -- double_diamond__shape  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double_diamond__shape {
        fill: none;
        stroke-width: 2;
        opacity: 0.8;
        transition: opacity 0.2s ease, fill 0.2s ease;

        &--discover {
            stroke: var(--phase-discover-color, #008fbf);
        }

        &--define {
            stroke: var(--phase-define-color, #00a896);
        }

        &--develop {
            stroke: var(--phase-develop-color, #f77f00);
        }

        &--deliver {
            stroke: var(--phase-deliver-color, #d62828);
        }
    }

    // -- double_diamond__phase  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double_diamond__phase {
        cursor: pointer;

        &:hover .ss-c-double_diamond__shape {
            opacity: 1;
            fill: currentColor;
            fill-opacity: 0.1;
        }
    }

    // -- double_diamond__label  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double_diamond__label {
        font-family: var(--font-family-primary);
        font-size: q(16);
        font-weight: 600;
        fill: var(--color-text);
    }

    // -- double_diamond__interactive  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double_diamond__interactive {
        transition: r 0.2s ease, filter 0.2s ease;
        cursor: pointer;

        &:hover {
            r: 10;
            filter: drop-shadow(0 0 q(4) currentColor);
        }
    }

    // -- double-diamond-phase  (from site-starling_studio/src/static/scss/app/_studio.scss) --
    .ss-c-double-diamond-phase {
        padding: q(16);

        h4 {
            font-size: q(16);
            font-weight: 600;
            margin-bottom: q(8);
            color: var(--color-text);
        }

        p {
            font-size: q(14);
            line-height: 1.5;
            color: var(--color-text-muted);
            margin: 0;
        }
    }

    // -- mySwiper  (from site-starling_studio/src/static/scss/app/_swiper.scss) --
    .ss-c-mySwiper {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;

        .ss-c-swiper-wrapper {
            display: flex;
            width: 100%;
        }

        .ss-c-swiper-slide {
            width: 100%;
            box-sizing: border-box;
            padding: q(48);

            .ss-c-grid__frame--24 {
                margin: 0 auto;
                width: 100%;
            }

            .ss-c-grid--span--col--12 {
                margin: auto 0;
            }

            @media (max-width: q(768)) {
                .ss-c-grid__frame--24 {
                    grid-template-columns: repeat(12, 1fr);
                }

                .ss-c-grid--span--col--12 {
                    grid-column: span 12;
                }
            }
        }
    }

    // -- swiper-button-next  (from site-starling_studio/src/static/scss/app/_swiper.scss) --
    .ss-c-swiper-button-next {
        padding-right: q(10) !important;
    }

    // -- system-card__inner  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card__inner {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 0;
        height: 100%;

        @media (max-width: q(768)) {
            grid-template-columns: 1fr;
        }
    }

    // -- system-card__image  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card__image {
        position: relative;
        aspect-ratio: var(--system-card-image-ratio);
        overflow: hidden;
        margin: 0;
        background: var(--color-surface-alt, #f5f5f5);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .ss-c-system-card:hover & img {
            transform: scale(1.05);
        }
    }

    // -- system-card__image--placeholder  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card__image--placeholder {
        background: var(--system-card-image-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--system-card-image-color);

        .ss-c-i,
        i {
            font-size: q(16);
            opacity: 0.5;
        }
    }

    // -- system-card__content  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card__content {
        display: flex;
        flex-direction: column;
        padding: q(24);
        gap: q(8);
    }

    // -- system-card__series  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card__series {
        display: inline-block;
        font-size: q(11);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--system-card-series-color);
    }

    // -- system-card__subtitle  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card__subtitle {
        font-size: q(14);
        color: var(--system-card-text-color);
        margin: 0;
    }

    // -- system-card__summary  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card__summary {
        font-size: q(14);
        line-height: 1.5;
        color: var(--system-card-text-color);
        flex-grow: 1;

        p {
            margin: 0;
        }
    }

    // -- system-card--vertical  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card--vertical {
        .ss-c-system-card__inner {
            grid-template-columns: 1fr;
        }

        .ss-c-system-card__image {
            aspect-ratio: 16 / 9;
        }
    }

    // -- system-card--sm  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card--sm {
        .ss-c-system-card__content {
            padding: q(16);
            gap: q(4);
        }

        .ss-c-system-card__title {
            font-size: q(16);
        }

        .ss-c-system-card__summary {
            display: none;
        }
    }

    // -- system-card--lg  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card--lg {
        .ss-c-system-card__content {
            padding: q(32);
        }

        .ss-c-system-card__title {
            font-size: q(28);
        }
    }

    // -- system-card--dark  (from site-starling_studio/src/static/scss/app/_system_card.scss) --
    .ss-c-system-card--dark {
        --system-card-bg: var(--color-surface-dark, #1a1a1a);
        --system-card-border: 1px solid rgba(255, 255, 255, 0.1);
        --system-card-title-color: #fff;
        --system-card-text-color: rgba(255, 255, 255, 0.7);
        --system-card-series-color: var(--color-primary-light, #4a7ab8);
    }

    // -- text--uppercase  (from site-starling_studio/src/static/scss/app/_text_transform.scss) --
    .ss-c-text--uppercase {
        text-transform: uppercase;
    }

    // -- text--lowercase  (from site-starling_studio/src/static/scss/app/_text_transform.scss) --
    .ss-c-text--lowercase {
        text-transform: lowercase;
    }

    // -- text--capitalize  (from site-starling_studio/src/static/scss/app/_text_transform.scss) --
    .ss-c-text--capitalize {
        text-transform: capitalize;
    }

    // -- text--normal-case  (from site-starling_studio/src/static/scss/app/_text_transform.scss) --
    .ss-c-text--normal-case {
        text-transform: none;
    }

    // -- page-stats  (from site-starling_studio/src/static/scss/app/page_stats.scss) --
    .ss-c-page-stats {
      display: flex;
      align-items: center;
      gap: q(24);
      font-size: q(12);
      font-family: 'Courier New', monospace;
      color: inherit;
      opacity: 0.7;

      &__item {
        display: flex;
        align-items: center;
        gap: q(4);
        white-space: nowrap;
      }

      &__label {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      &__value {
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        min-width: 3ch;
        text-align: right;
      }
    }

    // -- ribbon-footer  (from site-starling_studio/src/static/scss/app/sticky_footer.scss) --
    .ss-c-ribbon-footer {
        display:flex;
        flex-wrap: wrap;
        position: fixed;
        top: calc(100vh - q(40));
        left: 0;
        right: 0;
        height: auto;
        z-index: 50;
        will-change: transform;
    }

    // -- footer-divider  (from site-starling_studio/src/static/scss/app/sticky_footer.scss) --
    .ss-c-footer-divider {
        margin: 0;
        border-top:q(1) solid #000;
    }

    // -- lh--ratio  (from site-starling_studio/src/static/scss/theme/_index.scss) --
    .ss-c-lh--ratio {
        line-height: 1.25;
    }

    // -- starling_subtitle  (from site-starling_studio/src/static/scss/theme/_index.scss) --
    .ss-c-starling_subtitle{
        font-style: italic;
        font-weight: 500;
    }

    // -- page-border  (from site-suell_org/src/static/scss/base/_base.scss) --
    .ss-c-page-border {
        position: fixed;
        background: #000000;
        z-index: 9999;
        pointer-events: none;

        &--top,
        &--bottom {
            left: 0;
            right: 0;
            height: q(1);
        }

        &--top { top: 0; }
        &--bottom { bottom: 0; }

        &--left,
        &--right {
            top: 0;
            bottom: 0;
            width: q(1);
        }

        &--left { left: 0; }
        &--right { right: 0; }
    }

    // -- page-content  (from site-suell_org/src/static/scss/base/_base.scss) --
    .ss-c-page-content {
        padding: q(1);
        min-height: 100vh;
    }

    // -- page-loader  (from site-suell_org/src/static/scss/components/_page-loader.scss) --
    .ss-c-page-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        transition: opacity 0.6s ease, visibility 0.6s ease;

        &.ss-c-loaded {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        &__logo {
            max-width: q(120);
            margin-bottom: q(32);
            animation: pulse 2s ease-in-out infinite;
        }

        &__text {
            font-size: q(12);
            text-transform: uppercase;
            letter-spacing: 0.3em;
            color: #737373;
        }
    }

    // -- social-links  (from site-suell_org/src/static/scss/components/_social-links.scss) --
    .ss-c-social-links {
        display: flex;
        gap: q(24);
        list-style: none;
        padding: 0;
        margin: 0;

        &__item a {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #737373;
            text-decoration: none;
            font-size: q(20);
            transition: color 0.3s ease, transform 0.3s ease;

            &:hover {
                color: $color-accent;
                transform: translateY(q(-2));
            }
        }
    }

    // -- footer-row  (from site-suell_org/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: q(24);

        @media (max-width: $breakpoint-md) {
            flex-direction: column;
            text-align: center;
            gap: q(16);
        }
    }

    // -- footer-separator  (from site-suell_org/src/static/scss/layout/_footer.scss) --
    .ss-c-footer-separator {
        color: var(--ss-color-border, #e5e5e5);
        font-size: q(12);

        @media (max-width: $breakpoint-md) {
            display: none;
        }
    }

    // -- site-logo  (from site-suell_org/src/static/scss/layout/_header.scss) --
    .ss-c-site-logo {
        height: q(40);
        width: auto;

        img {
            height: 100%;
            width: auto;
        }
    }

    // -- split-section  (from site-suell_org/src/static/scss/layout/_split-section.scss) --
    .ss-c-split-section {
        display: flex;
        flex-wrap: wrap;
        background: #0a0a0a;

        &__half {
            flex: 1 1 50%;
            min-width: q(300);
            padding: q(96) q(64);
            box-sizing: border-box;

            @media (max-width: $breakpoint-md) {
                flex: 1 1 100%;
                padding: q(64) q(32);
            }
        }

        &__title {
            font-size: q(24);
            font-weight: 600;
            margin-bottom: q(8);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        &__subtitle {
            font-size: q(14);
            font-style: italic;
            color: #737373;
            margin-bottom: q(24);
            text-transform: uppercase;
            letter-spacing: 0.15em;
        }

        &__text {
            font-size: q(16);
            line-height: 1.8;
            color: #737373;
        }
    }

    // -- fade-in  (from site-suell_org/src/static/scss/utilities/_animations.scss) --
    .ss-c-fade-in {
        opacity: 0;
        transform: translateY(q(30));
        transition: opacity 0.8s ease, transform 0.8s ease;

        &.ss-c-visible {
            opacity: 1;
            transform: translateY(0);
        }
    }

    // -- loading-screen  (from site-vianen_com/src/static/scss/components/_loading.scss) --
    .ss-c-loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--ss-color-fill, #ffffff);
        // [parity] (stripped @include)
      z-index: 9999;
      transition: opacity $transition-slow;

      &.hidden {
        opacity: 0;
        pointer-events: none;
      }

      .ss-c-loading-text {
        font-size: q(12);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: #737373;
      }
    }

    // -- biography  (from site-vianen_com/src/static/scss/sections/_biography.scss) --
    .ss-c-biography {
      .ss-c-bio-content {
        max-width: q(800);

        p {
          font-size: q(17.6);
          line-height: 1.9;
          color: #737373;
          margin-bottom: unset;
        }
      }
    }

    // -- experience-list  (from site-vianen_com/src/static/scss/sections/_experience.scss) --
    .ss-c-experience-list {
      display: flex;
      flex-direction: column;
      gap: unset;
    }

    // -- experience-item  (from site-vianen_com/src/static/scss/sections/_experience.scss) --
    .ss-c-experience-item {
      display: grid;
      grid-template-columns: q(200) 1fr;
      gap: unset;
      padding: unset 0;
      border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);

      // [parity] (stripped @include block)


      .ss-c-experience-date {
        color: #737373;
        font-size: q(14);
      }

      .ss-c-experience-content {
        h4 {
          margin-bottom: unset;

          a {
            color: var(--ss-color-text, #1a1a1a);

            &:hover {
              opacity: 0.7;
            }
          }
        }

        .ss-c-experience-role {
          color: #737373;
          font-size: q(14.4);
        }
      }
    }

    // -- work-grid  (from site-vianen_com/src/static/scss/sections/_work.scss) --
    .ss-c-work-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(q(300), 1fr));
      gap: unset;

      // [parity] (stripped @include block)

    }

    // -- work-card  (from site-vianen_com/src/static/scss/sections/_work.scss) --
    .ss-c-work-card {
      background: #f2f2f2;
      border: q(1) solid var(--ss-color-border, #e5e5e5);
      border-radius: $radius-md;
      padding: unset;
      transition: transform $transition-fast, border-color $transition-fast;

      &:hover {
        transform: translateY(q(-4));
        border-color: #737373;
      }

      .ss-c-work-logo {
        width: q(60);
        height: q(60);
        margin-bottom: unset;
        border-radius: $radius-md;
        background: var(--ss-color-fill, #ffffff);
        border: q(1) solid var(--ss-color-border, #e5e5e5);
        // [parity] (stripped @include)
        span {
          font-size: q(20);
          font-weight: 600;
          color: #737373;
        }

        img {
          max-width: 100%;
          max-height: 100%;
        }
      }

      h4 {
        margin-bottom: unset;
      }

      p {
        color: #737373;
        font-size: q(14.4);
        margin-bottom: unset;
      }

      .ss-c-work-link {
        font-size: q(14);
        color: #737373;

        &:hover {
          color: var(--ss-color-text, #1a1a1a);
        }
      }
    }

    // -- mb-1  (from site-vianen_com/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mb-1 {
      margin-bottom: unset;
    }

    // -- mb-2  (from site-vianen_com/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mb-2 {
      margin-bottom: unset;
    }

    // -- mb-3  (from site-vianen_com/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mb-3 {
      margin-bottom: unset;
    }

    // -- mt-1  (from site-vianen_com/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mt-1 {
      margin-top: unset;
    }

    // -- mt-2  (from site-vianen_com/src/static/scss/utilities/_utilities.scss) --
    .ss-c-mt-2 {
      margin-top: unset;
    }

    // -- p-1  (from site-vianen_com/src/static/scss/utilities/_utilities.scss) --
    .ss-c-p-1 {
      padding: unset;
    }

    // -- p-2  (from site-vianen_com/src/static/scss/utilities/_utilities.scss) --
    .ss-c-p-2 {
      padding: unset;
    }

    // -- mono  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-mono {
        font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, Consolas, monospace;
        font-size: q(14);
    }

    // -- frame_main__area--top  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-frame_main__area--top {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: var(--ss-color-fill, #ffffff);
        border-bottom: q(1) solid var(--ss-color-border, #e5e5e5);
    }

    // -- frame_main__area--middle_center  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-frame_main__area--middle_center {
        flex: 1;
    }

    // -- ribbon__title  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-ribbon__title {
        display: flex;
        align-items: center;
        gap: unset;
        margin: 0;
        font-size: q(16);
    }

    // -- hero__headline  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__headline {
        font-size: q(60);
        line-height: 1.05;
        margin: 0;

        @media (max-width: q(900)) {
            font-size: q(42);
        }

        @media (max-width: q(600)) {
            font-size: q(32);
        }
    }

    // -- hero__subtext  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__subtext {
        font-size: q(18);
        color: #525252;
        max-width: 50ch;
    }

    // -- hero__tagline  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__tagline {
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(14);
        color: $color-accent;
    }

    // -- hero__cta  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__cta {
        display: flex;
        gap: unset;
        margin-top: unset;
    }

    // -- hero__ascii  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__ascii {
        display: flex;
        justify-content: flex-end;

        @media (max-width: q(900)) {
            justify-content: flex-start;
        }
    }

    // -- ascii-block  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-ascii-block {
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(14);
        line-height: 1.5;
        white-space: pre;
        color: #525252;
        opacity: 0.8;
        background: #ffffff;
        padding: unset;
        border: q(1) solid var(--ss-color-border, #e5e5e5);
        border-radius: $radius-sm;

        @media (max-width: q(600)) {
            font-size: q(11);
            overflow-x: auto;
        }
    }

    // -- modules-grid  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-modules-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: unset;

        @media (max-width: q(900)) {
            grid-template-columns: 1fr;
        }
    }

    // -- module  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-module {
        background: #ffffff;
        border: q(1) solid var(--ss-color-border, #e5e5e5);
        padding: unset;
        border-radius: $radius-sm;
    }

    // -- module__label  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-module__label {
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(12);
        color: $color-accent;
        margin-bottom: unset;
    }

    // -- module__text  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-module__text {
        font-size: q(15);
        color: #525252;
        line-height: 1.6;
    }

    // -- diagram  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-diagram {
        display: flex;
        justify-content: center;
        padding: unset 0;

        pre {
            font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
            font-size: q(14);
            line-height: 1.5;
            white-space: pre;
            color: #525252;
        }
    }

    // -- button--primary  (from site-zoo_foo/src/static/scss/index.scss) --
    // Scoped under .ss-c-zoo so the site-specific palette (redefined
    // $color-accent = #000 at this point in the file) doesn't override the
    // button module's --primary/--ghost variants globally.
    .ss-c-zoo .ss-c-button--primary {
        background: $color-accent;
        color: var(--ss-color-fill, #ffffff);
    }

    // -- button--ghost  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-zoo .ss-c-button--ghost {
        background: transparent;
        border: q(1) solid $color-accent;
        color: $color-accent;
    }

    // -- philosophy  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-philosophy {
        background: $color-accent;
        border-top: none;
        border-bottom: none;
        color: #FFFFFF;
    }

    // -- philosophy__content  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-philosophy__content {
        max-width: q(900);
        margin: 0 auto;
        text-align: center;

        h2 {
            color: #FFFFFF;
        }
    }

    // -- philosophy__conclusion  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-philosophy__conclusion {
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(14);
        line-height: 1.7;
        color: #FFFFFF;
        opacity: 0.9;
        margin-bottom: unset;
        max-width: q(700);
        margin-left: auto;
        margin-right: auto;
    }

    // -- philosophy__grid  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-philosophy__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: unset;
        margin-top: unset;
        text-align: left;

        @media (max-width: q(700)) {
            grid-template-columns: 1fr;
        }
    }

    // -- philosophy__card  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-philosophy__card {
        background: rgba(255, 255, 255, 0.1);
        padding: unset;
        border-radius: $radius-md;

        h3 {
            font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
            font-size: q(14);
            font-weight: 600;
            color: #FFFFFF;
            margin-bottom: unset;
        }

        p {
            font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
            font-size: q(13);
            line-height: 1.6;
            color: #FFFFFF;
            opacity: 0.85;
            margin: 0;
        }
    }

    // -- agents__footer  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-agents__footer {
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(14);
        line-height: 1.7;
        color: #525252;
    }

    // -- legal-page  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-legal-page {
        padding: unset 0;

        h1 {
            font-family: "Pixelify Sans", cursive;
            font-size: q(32);
            margin-bottom: unset;
            color: var(--ss-color-text, #1a1a1a);
        }

        .ss-c-legal-intro {
            font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
            font-size: q(14);
            line-height: 1.7;
            color: #525252;
            margin-bottom: unset;
            max-width: q(700);
        }

        h2 {
            font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
            font-size: q(16);
            margin-top: unset;
            margin-bottom: unset;
            color: $color-accent;
        }

        p, li {
            font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
            font-size: q(14);
            line-height: 1.7;
            color: #525252;
            margin-bottom: unset;
        }

        ul {
            list-style: disc;
            padding-left: unset;
            margin-bottom: unset;
        }

        a {
            color: $color-accent;
            text-decoration: underline;
        }

        .ss-c-legal-updated {
            font-size: q(12);
            opacity: 0.7;
            margin-bottom: unset;
        }
    }

    // -- error-page  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-error-page {
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: unset 0;
    }

    // -- error-page__title  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-error-page__title {
        font-family: "Pixelify Sans", cursive;
        font-size: q(120);
        font-weight: 700;
        color: $color-accent;
        margin: 0;
        line-height: 1;
        text-shadow: 0 0 q(20) rgba($color-accent, 0.4);

        @media (max-width: q(600)) {
            font-size: q(80);
        }
    }

    // -- error-page__message  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-error-page__message {
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(16);
        color: #525252;
        margin: unset 0 unset;
        max-width: q(400);
    }

    // -- error-page__action  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-error-page__action {
        margin-top: unset;
    }

    // -- cta-block__box  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-cta-block__box {
        display: inline-block;
        padding: unset unset;
        border: q(1) solid var(--ss-color-border, #e5e5e5);
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(16);
        margin-bottom: unset;
    }

    // -- mt-sm  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-mt-sm { margin-top: unset; }

    // -- mt-md  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-mt-md { margin-top: unset; }

    // -- mt-lg  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-mt-lg { margin-top: unset; }

    // -- mb-sm  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-mb-sm { margin-bottom: unset; }

    // -- mb-md  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-mb-md { margin-bottom: unset; }

    // -- mb-lg  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-mb-lg { margin-bottom: unset; }

    // -- main  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-main {
        width: 100%;
    }

    // -- flock-canvas  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-flock-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(14);
        line-height: 1.2;
        color: $color-accent;
        opacity: 0.45;
        white-space: pre;
        overflow: hidden;
        user-select: none;
        text-shadow: 0 0 q(10) rgba($color-accent, 0.6);
    }

}

} // @if cfg.$scapepress-parity