/* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */
/* =========================================
   1. FONTS
   ========================================= */
@font-face {
    font-family: 'Satoshi-Variable';
    src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
        url('../fonts/Satoshi-Variable.woff') format('woff');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
    /* Enable professional alternates and tabular numbers by default */
    font-feature-settings: 'ss01', 'ss02', 'cv01', 'tnum';
}

/* =========================================
   2. VARIABLES (:ROOT)
   ========================================= */
:root {
    /* Scaling System (Osmo) - Base unit: 16px at 1440px */
    --size-unit: 16;
    --size-container-ideal: 1440;
    --size-container-min: 320px;
    --size-container-max: 1440px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
    --section-fluid-top: clamp(60px, 8.5vw, 140px);
    --section-first-top: clamp(140px, 18vw, 260px);

    /* ==========================================================================
       TYPOGRAPHY SCALE (Osmo-Optimized Hybrid)
       ========================================================================== */
    /* --- TEXT SIZES (Functional Tier) --- */
    --text-size-xs: 0.8rem;

    /* 12px - Legal / Captions */
    --text-size-sm: 0.8rem;

    /* 14px - UI Elements / Tags */
    --text-size-base: 1rem;

    /* 16px - Standard Body Copy */
    --text-size-md: 1.25rem;

    /* 20px - Intro Paragraphs / Large UI */
    --text-size-lg: 1.6rem;

    /* 24px - Subheaders / Feature Lists */
    /* --- HEADING SIZES (Structural Tier) --- */
    /* --- HEADING SIZES (Structural Tier) --- */
    --heading-size-s: 2rem;

    /* 32px - Card Titles / Widgets */
    --heading-size-m: 3.15rem;

    /* 48px - Section Headers (H3) */
    --heading-size-l: 4rem;

    /* 64px - Page Titles (H2) */
    /* --- DISPLAY SIZES (Awwwards Tier) --- */
    --display-size-xl: 6.3rem;

    /* 96px - Hero Stats / Short Titles */
    --display-size-xxl: 8rem;

    /* 128px - Editorial Display */
    --display-size-max: 12.5rem;

    /* 192px - Kinetic / Masked Typography */
    /* ==========================================================================
       COLOR PALETTE (OKLCH-based)
       ========================================================================== */
    /* --- Primary Colors --- */
    --color-bg-light: oklch(98.0% 0 0);
    --color-bg-dark: oklch(30.9% 0.07 270.8);

    /* --- Text Colors --- */
    --color-text-main: oklch(30.9% 0.07 270.8);
    --color-text-inverted: oklch(98.0% 0 0);
    --color-text-muted: oklch(55% 0.03 270.8);

    /* --- Surface Colors --- */
    --color-surface: oklch(95.0% 0 0);

    /* --- Semantic Colors --- */
    --color-error: #c0392b;
    --color-success: #22c55e;
    --color-neutral: #94a3b8;

    /* --- RGB Components (for rgba() support) --- */
    --color-bg-light-rgb: 250, 250, 250;
    --color-bg-dark-rgb: 60, 58, 74;
    --color-border-light: rgba(var(--color-bg-dark-rgb), 0.1);

    /* Typography */
    --font-primary: 'Satoshi-Variable', system-ui, sans-serif;

    /* Layout */
    --grid-gutter: 2rem;
    --line-thickness: 3px;

    /* Accessibility Preferences */
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --reduced-motion-opacity: 1;
    --reduced-motion-transform: none;
}




/* =========================================
   RESPONSIVE SYSTEM OVERRIDES (Previously responsive.css)
   ========================================= */
/* Tablet & Mobile Variables/Grid */
@media screen and (max-width: 991px) {
    :root {
        --size-container-ideal: 834;
        --size-container-min: 767px;
        --size-container-max: 991px;

        /* Lock base fluid scaling slightly to preventing it getting too small too fast */
        /* Re-adjusting the variables to be slightly more legible on tablets */
        /* Text Sizes - Slightly larger base for readability */
        /* Text Sizes - R10 Scale */
        --text-size-xs: 0.8rem;

        /* 12.8px */
        --text-size-sm: 0.8rem;

        /* 12.8px */
        --text-size-base: 1rem;

        /* 16px */
        --text-size-md: 1.25rem;

        /* 20px - Keep consistent */
        --text-size-lg: 1.25rem;

        /* 20px - Shifted down from 1.6 */
        /* Headings - Shift Down Strategy (Desktop Step - 1) */
        --heading-size-s: 1.6rem;

        /* 25.6px (was 2.0) */
        --heading-size-m: 2.5rem;

        /* 40px (was 3.15) */
        --heading-size-l: 3.15rem;

        /* 50.4px (was 4.0) */
        /* Display - Shift Down Strategy (Desktop Step - 2) */
        --display-size-xl: 4rem;

        /* 64px */
        --display-size-xxl: 5rem;

        /* 80px */
        --display-size-max: 8rem;

        /* 128px */
    }

    .fullwidth-container {
        padding: 0 1.25rem;
    }

    /* Global Stack: Force all 12-col grid items to stack on tablet/mobile */
    .grid-12>div[class*="col-"] {
        grid-column: 1 / -1 !important;
        margin-bottom: 2rem;
    }

    .grid-12>div[class*="col-"]:last-child {
        margin-bottom: 0;
    }

    .mobile-single-col {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile Landscape & General Mobile */
@media screen and (max-width: 767px) {
    :root {
        --size-container-ideal: 550;
        --size-container-min: 479px;
        --size-container-max: 767px;

        /* CRITICAL: Lock base font size to ensuring 1rem = 16px (standard mobile readability) */
        /* The html font-size override is in the element selector below, here we fix variables */
        /* Text Sizes - Standard Mobile scale */
        /* Text Sizes - Mobile R10 Scale */
        --text-size-xs: 0.8rem;

        /* 12.8px */
        --text-size-sm: 0.8rem;

        /* 12.8px */
        --text-size-base: 1rem;

        /* 16px */
        --text-size-md: 1rem;

        /* 16px - Collapse hierarchy on mobile */
        --text-size-lg: 1.25rem;

        /* 20px */
        /* Headings - Mobile R10 Scale (Revised for Density) */
        --heading-size-s: 1.25rem;

        /* 20px */
        --heading-size-m: 1.6rem;

        /* 25.6px */
        --heading-size-l: 2rem;

        /* 32px - Reduced from 40px for better wrapping */
        /* Display - Aggressive Reduction */
        --display-size-xl: 3.15rem;

        /* 50.4px */
        --display-size-xxl: 4rem;

        /* 64px */
        --display-size-max: 5rem;

        /* 80px */
        /* Adjust layout vars */
        --grid-gutter: 1.25rem;
    }

    /* Layout Utilities */
    .force-stack-tablet {
        grid-column: 1 / -1 !important;
        margin-bottom: 2rem;
    }

    .order-first-tablet,
    .order-first-mobile {
        order: -1 !important;
    }

    .order-last-tablet,
    .order-last-mobile {
        order: 999 !important;
    }

    /* Typography Overrides */
    .art-title-large,
    .text-11xl,
    .text-12xl {
        font-size: var(--heading-size-l);
    }

    .pt-24 {
        padding-top: 2rem;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
    :root {
        --size-container-ideal: 390;
        --size-container-min: 320px;
        --size-container-max: 479px;
    }
}

/* =========================================
   3. RESET & BASE STYLES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    background-color: var(--color-bg-dark);
    color: var(--color-bg-light);
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

html {
    font-size: var(--size-font);
    background-color: var(--color-bg-dark);
    max-width: 100vw;

    /* Prevent white flash */
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
    line-height: 1.1;
    -webkit-font-smoothing: antialiased;
    font-size: var(--text-size-base);
    min-height: 100dvh;
    overflow-x: hidden;
    max-width: 100%;

    /* Ensure native scroll behavior on mobile */
    -webkit-overflow-scrolling: touch;
}

/* Helper class toggled by JS */
body.no-scroll {
    overflow: hidden !important;
}

@media screen and (max-width: 1024px) {
    body {
        /* Force native scroll and remove limiting overflow-x which can hide scrollbars on mobile */
        overflow-y: auto !important;
        overflow-x: visible !important;
    }

    /* Force visibility of native scrollbars, fighting any library-injected display:none */
    html,
    body {
        scrollbar-width: auto !important;
        -ms-overflow-style: auto !important;
    }

    /* html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: block !important;
        width: auto !important;
    } */
    body.no-scroll {
        overflow: hidden !important;

        /* Respect no-scroll lock for menu/intro */
    }
}

/* Lenis Smooth Scroll */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* Initial hidden state to prevent FOUC (GSAP reveals them) */
.hero-headline,
.hero-info-block,
.hero-tagline,
.hero-captions-container {
    opacity: 0;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Custom Scrollbar - Restricted and wrapped for desktop, native for mobile */
@media screen and (min-width: 1025px) {
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent !important;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-bg-dark);
    }
}

/* Custom Scrollbar - OverlayScrollbars Theme Override */
.os-scrollbar {
    --os-handle-bg: var(--color-bg-dark);
    --os-handle-bg-hover: var(--color-bg-dark);
    --os-handle-bg-active: var(--color-bg-dark);
    right: 0 !important;

    /* Force flush to edge */
    padding: 0 !important;

    /* Remove any padding */
}

body.sidebar-active .os-scrollbar {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.os-theme-custom.os-scrollbar-vertical {
    --os-size: 8px;
}

.os-theme-dark {
    --os-handle-bg: var(--color-bg-dark);
    --os-handle-bg-hover: var(--color-text-muted);
    --os-handle-bg-active: var(--color-bg-dark);
    --os-track-bg: transparent;
    --os-track-bg-hover: transparent;
    --os-track-bg-active: transparent;
    --os-handle-border-radius: 0px;
    --os-size: 8px;
    --os-padding-perpendicular: 0;
    --os-padding-axis: 0;
}

/* =========================================
   GPU COMPOSITING OPTIMIZATION
   ========================================= */
/* Required for elements using force3D: true in GSAP */
/* Ensures proper GPU layer promotion */
[data-parallax] img,
.slide__media,
.slide__media img,
.slide__media video,
.hero-img,
[data-reveal] {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* =========================================
   4. GRID SYSTEM
   ========================================= */
.container {
    /* max-width: var(--size-container) */
    margin: 0 auto;
    padding: 0 5rem;
}

@media screen and (max-width: 991px) {
    .container {
        padding: 0 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    .container {
        padding: 0 1.25rem;
    }
}

.fullwidth-container {
    margin: 0 auto;
    padding: 0 5rem;
}

@media screen and (max-width: 991px) {
    .fullwidth-container {
        padding: 0 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    .fullwidth-container {
        padding: 0 1.25rem;
    }
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gutter);
    grid-template-rows: auto;
}

@media screen and (max-width: 767px) {
    .grid-12 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* MAGIC GRID FIX: Force columns to full width in single-column mobile grids */
    [class*="col-"] {
        grid-column: 1 / -1 !important;
        grid-column-start: auto !important;
        grid-column-end: span 1 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Exception: Specific small items that should remain inline can be added here if needed */
}

.col-12,
.full-width,
.full-width-in-parent,
.col-span-12 {
    grid-column: 1 / -1;
}

.col-10,
.col-span-10 {
    grid-column-end: span 10;
}

.col-8,
.col-span-8 {
    grid-column-end: span 8;
}

.col-7,
.col-span-7 {
    grid-column-end: span 6;
}

.col-6,
.col-span-6 {
    grid-column-end: span 6;
}

.col-5,
.col-span-5 {
    grid-column-end: span 5;
}

.col-4,
.col-span-4 {
    grid-column-end: span 4;
}

.col-3,
.col-span-3 {
    grid-column-end: span 3;
}

.col-2,
.col-span-2 {
    grid-column-end: span 2;
}

.col-1,
.col-span-1 {
    grid-column-end: span 1;
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-3 {
    grid-column-start: 3;
}

.col-start-4 {
    grid-column-start: 4;
}

.col-start-5 {
    grid-column-start: 5;
}

.col-start-6 {
    grid-column-start: 6;
}

.col-start-7 {
    grid-column-start: 7;
}

.col-start-8 {
    grid-column-start: 8;
}

.col-start-9 {
    grid-column-start: 9;
}

.col-start-10 {
    grid-column-start: 10;
}

.col-start-11 {
    grid-column-start: 11;
}

.col-start-12 {
    grid-column-start: 12;
}

/* =========================================
   5. UTILITY CLASSES
   ========================================= */
/* Layout & Display */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-grow {
    flex-grow: 1;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

/* Alignment */
.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

/* Positioning */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-10 {
    z-index: 10;
}

.z-100 {
    z-index: 100;
}

/* Sizing */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100dvh;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

/* .w-45 {
    width: 45%;
} */
.max-w-md {
    max-width: 28rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-80 {
    max-width: 80%;
}

.h-12 {
    height: 3rem;
}

.h-25rem {
    height: 25rem;
}

.h-30rem {
    /* height: 30rem */
}

/* .h-37-5rem {
    height: 37.5rem;
} */
.h-40vh {
    height: 40vh;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Spacing - Margins */
.m-0 {
    margin: 0;
}

.mb-1 {
    margin-bottom: 0.625rem;
}

.mb-2 {
    margin-bottom: 1.25rem;
}

.mb-4 {
    margin-bottom: 2.5rem;
}

/* Consolidated */
.mb-6 {
    margin-bottom: 3.75rem;
}

.mb-8 {
    margin-bottom: 5rem;
}

.mb-12 {
    margin-bottom: 7.5rem;
}

.mb-16 {
    margin-bottom: 10rem;
}

.mt-4 {
    margin-top: 2.5rem;
}

/* Consolidated (Use mt-sm for smaller if needed) */
.mt-8 {
    margin-top: 5rem;
}

.mt-12 {
    margin-top: 7.5rem;
}

.mt-24 {
    margin-top: 6rem;
}

.mt-60 {
    margin-top: 15rem;
}

.mt-auto {
    margin-top: auto;
}

.mt-sm {
    margin-top: 1.25rem;
}

/* Renamed specific variant */
/* Fluid Section Padding - Top Only to prevent doubling */
.section-padding {
    padding-top: var(--section-fluid-top);
    padding-bottom: 0;
}

/* Specific first section override */
.section-padding.is-first {
    padding-top: var(--section-first-top);
}

/* Spacing - Padding */
.p-0 {
    padding: 0;
}

.pt-2 {
    padding-top: 1.25rem;
}

.pt-4 {
    padding-top: 2.5rem;
}

.pt-8 {
    padding-top: 5rem;
}

.pt-12 {
    padding-top: 7.5rem;
}

.pt-14 {
    padding-top: 9rem;
}

.top-24 {
    top: 6rem;
}

.pt-24 {
    padding-top: 6rem;
}

/* Standardized to 6rem based on common usage */
.pt-60 {
    padding-top: 15rem;
}

/* Explicit large padding */
.pb-2 {
    padding-bottom: 1.25rem;
}

.pb-8 {
    padding-bottom: 5rem;
}

/* Large padding */
.pb-12 {
    padding-bottom: 7.5rem;
}

.pb-sm {
    padding-bottom: 2rem;
}

/* Smaller variant if needed */
.py-4 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.py-24 {
    padding: 6rem 0;
}

/* Standardized */
.px-15 {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
}

/* Spacing - Gaps */
.gap-2 {
    gap: 0.5rem;
}

/* Small gap */
.gap-4 {
    gap: 1rem;
}

/* Medium gap */
.gap-8 {
    gap: 2rem;
}

/* Large gap */
.gap-x-8 {
    column-gap: 2rem;
}

.gap-y-12 {
    row-gap: 3rem;
}

/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES (Osmo-Optimized Scale)
   ========================================================================== */
/* --- Typography Base --- */
h1,
h2,
h3,
h4,
.heading-s,
.heading-m,
.heading-l,
.display-xl,
.display-xxl,
.display-max {
    font-family: var(--font-primary);
}

h1,
h2,
h3,
h4 {
    letter-spacing: -0.02em;
}

/* --- TEXT CLASSES (Functional Tier) --- */
.text-xs {
    font-size: var(--text-size-xs);
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.text-sm {
    font-size: var(--text-size-sm);
    line-height: 1.3;

    /* letter-spacing: 2px */
    font-weight: 700;
}

.text-base {
    font-size: var(--text-size-base);
    line-height: 1.3;
    font-weight: 550;
}

.text-md {
    font-size: var(--text-size-md);
    line-height: 1.3;
    font-weight: 500;
}

.text-lg {
    font-size: var(--text-size-lg);
    line-height: 1.2;
    font-weight: 550;
    letter-spacing: -0.018em;
}

/* --- HEADING CLASSES (Structural Tier) --- */
.heading-s {
    font-size: var(--heading-size-s);
    line-height: 1.25;
    letter-spacing: -0.018em;
    font-weight: 550;
}

.heading-m {
    font-size: var(--heading-size-m);
    line-height: 1.15;
    letter-spacing: -0.018em;
    font-weight: 500;
}

.heading-l {
    font-size: var(--heading-size-l);
    line-height: 1.1;
    letter-spacing: -0.018em;
    font-weight: 500;
    position: relative;
}

/* --- DISPLAY CLASSES (Awwwards Tier) --- */
.display-xl {
    font-size: var(--display-size-xl);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-weight: 500;
}

.display-xxl {
    font-size: var(--display-size-xxl);
    line-height: 0.9;
    letter-spacing: -0.035em;
    font-weight: 450;
    position: relative;
    left: -0.3rem;
}

@media screen and (max-width: 767px) {
    .display-xxl {
        /* left: 0 */
        /* Prevent overflow on mobile */
    }
}

.display-max {
    font-size: var(--display-size-max);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-weight: 550;
}

/* --- FONT WEIGHTS --- */
.font-medium {
    font-weight: 500;
}

.font-bold,
.text-bold,
.bold {
    font-weight: 700;
}

.uppercase {
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}

/* Line Heights */
/* .leading-tight {
    line-height: 0.9;
} */
/* .leading-compact {
    line-height: 0.85;
} */
/* .leading-normal {
    line-height: 1.4;
} */
.leading-relaxed {
    line-height: 1.6;
}

/* Letter Spacing */
.tracking-wide,
.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

/* Colors & Opacity */
.text-white {
    color: var(--color-bg-light);
}

.text-black {
    color: var(--color-bg-dark) !important;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-inverted {
    color: var(--color-text-inverted);
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-80 {
    opacity: 0.8;
}

.bg-placeholder {
    background-color: var(--color-surface);
}

.bg-light-gray {
    background-color: var(--color-surface);
}

.bg-dark {
    background-color: var(--color-bg-dark);
}

.bg-black {
    background-color: var(--color-bg-dark);
}

.bg-transparent {
    background-color: transparent;
}

/* Borders */
.border {
    border: 1px solid currentColor;
}

.border-t {
    border-top: 1px solid var(--color-bg-dark);
}

.border-b {
    border-bottom: 3px solid var(--color-text-main);
}

.border-l {
    border-left: 1px solid var(--color-bg-dark);
}

.border-r {
    border-right: 1px solid var(--color-bg-dark);
}

.border-black {
    border-color: var(--color-bg-dark);
}

.border-black-t {
    border-top-color: var(--color-bg-dark) !important;
}

.border-b-main {
    border-bottom: 3px solid var(--color-text-main);
}

.border-t-0 {
    border-top: 0 !important;
}

/* Effects */
.rounded-lg {
    border-radius: 0.5rem;
}

.overflow-hidden {
    overflow: hidden;
}

.object-cover {
    object-fit: cover;
}

.cursor-pointer {
    cursor: pointer;
}

.pointer-events-none {
    pointer-events: none;
}

.outline-none {
    outline: none;
}

.transition-transform {
    transition: transform 0.3s ease;
}

/* --- Misc Utilities (Merged from utilities.css) --- */
.hover\:bg-black:hover {
    background-color: var(--color-bg-dark) !important;
}

.hover\:no-underline:hover {
    text-decoration: none;
}

.link-underlined {
    text-decoration: underline;
    color: inherit;
}

.section-hide {}

@media (max-width: 991px) {
    .section-hide {
        display: none;
    }
}

.icon-size {
    width: 1.5rem;
}

.two-grid-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 7rem;
    column-gap: var(--grid-gutter);
}

.is-square {
    aspect-ratio: 1 / 1;
}

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

.icon-position {
    position: relative;
    top: 0.3rem;
}

/* =========================================
   6. COMPONENTS
   ========================================= */
/* --- Architectural Lines --- */
.line-5 {
    height: var(--line-thickness);
    background: currentColor;

    /* margin: 0 0 0 2.5rem */
}

.line-5.dark {
    background: var(--color-text-main);
}

.line-5.light {
    background: var(--color-text-inverted);
}