@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

/* =========================================
   AJ PERSONAL WEBSITE
   GLOBAL DESIGN SYSTEM
========================================= */

:root {
    --bg-primary: #080d0b;
    --bg-secondary: #101b16;
    --bg-elevated: #18271f;

    --forest-green: #183d2e;
    --accent: #a6d9b7;
    --accent-soft: rgba(166, 217, 183, 0.12);

    --text-primary: #f4f5ef;
    --text-secondary: #a5afa8;
    --text-muted: #748078;

    --border: rgba(244, 245, 239, 0.1);
    --border-hover: rgba(166, 217, 183, 0.35);

    --font-heading: 'Sora', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-editorial: 'Instrument Serif', Georgia, serif;

    --page-width: 1440px;
    --page-padding: clamp(24px, 5vw, 80px);

    --transition: 250ms ease;
    --shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

/* =========================================
   LIGHT THEME
========================================= */

html[data-theme="light"] {
    --bg-primary: #f5f6f0;
    --bg-secondary: #edf1e9;
    --bg-elevated: #ffffff;

    --forest-green: #1d4936;
    --accent: #255e44;
    --accent-soft: rgba(37, 94, 68, 0.08);

    --text-primary: #15251c;
    --text-secondary: #58675d;
    --text-muted: #77857a;

    --border: rgba(21, 37, 28, 0.12);
    --border-hover: rgba(37, 94, 68, 0.3);

    --shadow: 0 16px 48px rgba(26, 49, 34, 0.06);
}

/* =========================================
   GLOBAL RESET
========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background: var(--bg-primary);
    color: var(--text-primary);

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    transition:
        background-color var(--transition),
        color var(--transition);
}

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

button {
    font: inherit;
    cursor: pointer;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--accent);
    color: var(--bg-primary);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
}

/* =========================================
   WEBSITE HEADER
========================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: rgba(8, 13, 11, 0.88);
    border-bottom: 1px solid var(--border);

    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

html[data-theme="light"] .site-header {
    background: rgba(245, 246, 240, 0.88);
}

/* =========================================
   NAVIGATION
========================================= */

.navbar {
    position: relative;

    width: 100%;
    max-width: var(--page-width);
    min-height: 94px;

    margin: 0 auto;
    padding: 0 var(--page-padding);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;
}

/* =========================================
   NAVIGATION BRAND
========================================= */

.navbar-brand {
    position: relative;

    display: inline-flex;
    align-items: center;
    flex-shrink: 0;

    font-family: var(--font-heading);
    font-size: 31px;
    font-weight: 800;

    letter-spacing: -2.5px;
    line-height: 1;

    color: var(--text-primary);

    transition: color var(--transition);
}

.navbar-brand::after {
    content: '';

    width: 6px;
    height: 6px;

    margin-left: 5px;
    margin-top: 18px;

    background: var(--accent);
    border-radius: 50%;
}

.navbar-brand:hover {
    color: var(--accent);
}

/* =========================================
   DESKTOP NAVIGATION LINKS
========================================= */

.nav-links {
    display: flex;
    align-items: center;

    gap: 5px;
    padding: 6px;

    border: 1px solid var(--border);
    border-radius: 100px;

    background: var(--bg-secondary);
}

.nav-links a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 15px;

    border-radius: 100px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;

    color: var(--text-secondary);
    white-space: nowrap;

    transition:
        color var(--transition),
        background-color var(--transition);
}

.nav-links a:hover {
    color: var(--text-primary);
    background: var(--accent-soft);
}

.nav-links a.active {
    color: var(--bg-primary);
    background: var(--accent);
}

html[data-theme="light"] .nav-links a.active {
    color: #ffffff;
}

/* =========================================
   THEME TOGGLE
========================================= */

.theme-toggle {
    position: relative;

    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--bg-secondary);
    color: var(--text-primary);

    transition:
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition);
}

.theme-toggle:hover {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
    transform: rotate(15deg);
}

.theme-icon {
    position: relative;
    display: block;

    width: 18px;
    height: 18px;

    border: 2px solid var(--accent);
    border-radius: 50%;

    box-shadow:
        0 -10px 0 -7px var(--accent),
        0 10px 0 -7px var(--accent),
        10px 0 0 -7px var(--accent),
        -10px 0 0 -7px var(--accent);
}

html[data-theme="light"] .theme-icon {
    border: none;

    background: var(--accent);
    border-radius: 50%;

    box-shadow: none;
}

html[data-theme="light"] .theme-icon::after {
    content: '';

    position: absolute;

    width: 16px;
    height: 16px;

    top: -5px;
    right: -5px;

    border-radius: 50%;

    background: var(--bg-secondary);
}

/* =========================================
   MOBILE MENU BUTTON
   Hidden on Desktop
========================================= */

.mobile-menu-toggle {
    display: none;

    position: relative;

    width: 46px;
    height: 46px;

    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--bg-secondary);
    color: var(--text-primary);

    transition:
        border-color 300ms ease,
        background-color 300ms ease,
        transform 300ms ease;
}

.mobile-menu-toggle:hover {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}

/* Two-line menu icon */

.menu-toggle-icon {
    position: relative;

    display: block;

    width: 19px;
    height: 16px;
}

.menu-toggle-line {
    position: absolute;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--accent);
    border-radius: 100px;

    transition:
        top 350ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-toggle-line-top {
    top: 5px;
}

.menu-toggle-line-bottom {
    top: 11px;
}

/* Menu icon transforms into an X when opened */

.site-header.menu-open .menu-toggle-line-top {
    top: 8px;
    transform: rotate(45deg);
}

.site-header.menu-open .menu-toggle-line-bottom {
    top: 8px;
    transform: rotate(-45deg);
}

.site-header.menu-open .mobile-menu-toggle {
    border-color: var(--border-hover);
    background: var(--accent-soft);
}

/* =========================================
   MAIN CONTENT
========================================= */

#main-content {
    width: 100%;
    min-height: calc(100vh - 94px);
}

/* =========================================
   HOMEPAGE HERO
========================================= */

.hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: max(680px, calc(100svh - 94px));

    overflow: hidden;

    background: var(--bg-primary);
}

/* =========================================
   HERO ATMOSPHERE
========================================= */

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 30% 45%,
            rgba(34, 83, 57, 0.19) 0%,
            transparent 53%
        ),
        radial-gradient(
            ellipse at 78% 12%,
            rgba(73, 116, 82, 0.1) 0%,
            transparent 50%
        );
}

html[data-theme="light"] .hero-atmosphere {
    background:
        radial-gradient(
            ellipse at 30% 45%,
            rgba(95, 148, 108, 0.12) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 80% 15%,
            rgba(144, 177, 125, 0.1) 0%,
            transparent 50%
        );
}

/* =========================================
   HERO PHOTOGRAPH
========================================= */

.hero-visual {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 0;

    width: 58%;

    pointer-events: none;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 32%;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 20%,
        black 52%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 20%,
        black 52%
    );

    animation: hero-image-enter 1.7s ease-out both;
}

.hero-visual::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            var(--bg-primary) 0%,
            transparent 39%
        ),
        linear-gradient(
            to right,
            var(--bg-primary) 0%,
            transparent 65%
        );
}

html[data-theme="light"] .hero-image {
    opacity: 0.82;
}

/* =========================================
   HERO LAYOUT
========================================= */

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

    width: 100%;
    max-width: var(--page-width);
    min-height: inherit;

    margin: 0 auto;

    padding:
        clamp(70px, 9vh, 120px)
        var(--page-padding)
        34px;

    display: flex;
    flex-direction: column;
}

.hero-content {
    position: relative;

    width: 100%;

    margin: auto 0;
    padding-bottom: 48px;

    animation: hero-content-enter 850ms ease-out both;
}

/* =========================================
   HERO EYEBROW
========================================= */

.hero-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 28px;

    color: var(--accent);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;
    line-height: 1.7;
}

.hero-status-dot {
    position: relative;

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;
    background: var(--accent);

    box-shadow: 0 0 14px rgba(166, 217, 183, 0.45);
}

.hero-status-dot::after {
    content: '';

    position: absolute;
    inset: -5px;

    border: 1px solid var(--accent);
    border-radius: 50%;

    opacity: 0.3;
}

/* =========================================
   ANIMATED PERSONAL IDENTITY
========================================= */

.hero-title {
    display: flex;
    align-items: baseline;

    gap: clamp(15px, 1.8vw, 26px);

    width: fit-content;
    max-width: 100%;

    margin: 0 0 31px;

    font-family: var(--font-heading);
    font-size: clamp(45px, 4.55vw, 68px);
    font-weight: 800;

    letter-spacing: -0.065em;
    line-height: 1.22;

    color: var(--text-primary);
}

/* Primary identity */

.hero-initials {
    display: inline-block;
    flex-shrink: 0;

    color: var(--text-primary);

    animation:
        hero-initials-enter
        850ms
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

/* Full-name container */

.hero-name-lockup {
    position: relative;

    display: inline-block;
    flex-shrink: 1;

    min-width: 0;

    vertical-align: baseline;
}

/* Full-name reveal */

.hero-name-reveal {
    display: block;

    overflow: hidden;

    clip-path: inset(0 100% 0 0);

    animation:
        hero-name-discover
        1.55s
        cubic-bezier(0.22, 1, 0.36, 1)
        700ms
        forwards;
}

/* Editorial typography */

.hero-full-name {
    display: inline-block;

    font-family: var(--font-editorial);
    font-size: 0.78em;
    font-weight: 400;

    letter-spacing: -0.025em;
    line-height: 1.05;

    white-space: nowrap;

    color: var(--text-primary);
}

.hero-full-name em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* Animated green sweep */

.hero-name-sweep {
    position: absolute;

    top: 18%;
    left: 0;

    width: 3px;
    height: 65%;

    border-radius: 100px;

    background: var(--accent);

    box-shadow:
        0 0 12px rgba(166, 217, 183, 0.65),
        0 0 28px rgba(166, 217, 183, 0.25);

    pointer-events: none;

    opacity: 0;

    animation:
        hero-name-light-sweep
        1.55s
        cubic-bezier(0.22, 1, 0.36, 1)
        700ms
        forwards;
}

/* =========================================
   HERO INTRODUCTION
========================================= */

.hero-description {
    max-width: 515px;

    margin: 0 0 37px;

    color: var(--text-secondary);

    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 400;

    line-height: 1.85;
    letter-spacing: -0.015em;
}

/* =========================================
   HERO ACTIONS
========================================= */

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;
}

.hero-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 23px;

    min-height: 57px;

    padding: 7px 8px 7px 23px;

    border: 1px solid transparent;
    border-radius: 100px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.005em;
    white-space: nowrap;

    overflow: hidden;

    transition:
        transform 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease,
        color 300ms ease,
        box-shadow 300ms ease;
}

.hero-button:hover {
    transform: translateY(-3px);
}

.button-label {
    position: relative;
    z-index: 1;
}

.button-arrow {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 39px;
    height: 39px;

    border-radius: 50%;

    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 400;

    transition:
        transform 300ms ease,
        background-color 300ms ease,
        color 300ms ease;
}

.hero-button:hover .button-arrow {
    transform: rotate(45deg);
}

/* =========================================
   PRIMARY BUTTON
========================================= */

.hero-button-primary {
    background: var(--accent);
    color: #102019;

    box-shadow: 0 8px 30px rgba(83, 145, 100, 0.13);
}

.hero-button-primary .button-arrow {
    background: #163e2c;
    color: #e6f5e7;
}

.hero-button-primary:hover {
    box-shadow: 0 12px 38px rgba(83, 145, 100, 0.25);
}

html[data-theme="light"] .hero-button-primary {
    color: #ffffff;
}

html[data-theme="light"] .hero-button-primary .button-arrow {
    background: #ffffff;
    color: #255e44;
}

/* =========================================
   SECONDARY BUTTON
========================================= */

.hero-button-secondary {
    border-color: var(--border-hover);

    background: var(--accent-soft);
    color: var(--text-primary);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.hero-button-secondary .button-arrow {
    background: var(--bg-elevated);
    color: var(--accent);
}

.hero-button-secondary:hover {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

/* =========================================
   TEXT BUTTON
========================================= */

.hero-button-text {
    min-height: 57px;

    padding-left: 12px;
    padding-right: 6px;

    background: transparent;
    color: var(--text-primary);
}

.hero-button-text .button-arrow {
    background: transparent;

    color: var(--accent);

    border: 1px solid var(--border-hover);
}

.hero-button-text:hover {
    color: var(--accent);
}

.hero-button-text:hover .button-arrow {
    background: var(--accent-soft);
}

/* =========================================
   HERO BOTTOM DETAILS
========================================= */

.hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: auto;
    padding-top: 25px;

    border-top: 1px solid var(--border);
}

.hero-location {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.025em;
}

.location-indicator {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border: 1px solid var(--accent);
    border-radius: 50%;

    box-shadow: 0 0 0 4px var(--accent-soft);
}

.hero-scroll {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.025em;

    transition: color var(--transition);
}

.hero-scroll:hover {
    color: var(--accent);
}

.scroll-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: 1px solid var(--border);
    border-radius: 50%;

    color: var(--accent);
    font-size: 17px;

    transition:
        transform var(--transition),
        border-color var(--transition);
}

.hero-scroll:hover .scroll-arrow {
    transform: translateY(4px);
    border-color: var(--accent);
}

/* =========================================
   ABOUT PREVIEW FOUNDATION
========================================= */

.about-preview {
    position: relative;
    background: var(--bg-primary);
}

/* =========================================
   ENTRANCE ANIMATIONS
========================================= */

@keyframes hero-content-enter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-image-enter {
    from {
        opacity: 0;
        transform: scale(1.055);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hero-initials-enter {
    from {
        opacity: 0;
        transform: translateY(15px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes hero-name-discover {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes hero-name-light-sweep {
    0% {
        left: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* =========================================
   TABLET ADJUSTMENTS
========================================= */

@media (max-width: 1100px) {

    .navbar {
        gap: 16px;
    }

    .nav-links a {
        padding: 10px 11px;
        font-size: 12px;
    }

    .hero-visual {
        width: 62%;
    }

    .hero-title {
        font-size: clamp(42px, 4.4vw, 54px);
    }

}

/* =========================================
   MOBILE NAVIGATION
========================================= */

@media (max-width: 850px) {

    /* Single-row mobile header */

    .navbar {
        min-height: 80px;

        display: grid;
        grid-template-columns: 1fr auto auto;

        align-items: center;

        gap: 12px;

        padding-top: 14px;
        padding-bottom: 14px;
    }

    .navbar-brand {
        grid-column: 1;
        grid-row: 1;

        font-size: 29px;
    }

    .theme-toggle {
        grid-column: 2;
        grid-row: 1;

        width: 44px;
        height: 44px;
    }

    /* Display mobile menu button */

    .mobile-menu-toggle {
        grid-column: 3;
        grid-row: 1;

        display: inline-flex;

        width: 44px;
        height: 44px;
    }

    /* Floating navigation panel */

    .nav-links {
        position: absolute;

        top: calc(100% + 8px);
        left: var(--page-padding);
        right: var(--page-padding);

        z-index: 100;

        width: auto;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 5px;
        padding: 10px;

        border: 1px solid var(--border);
        border-radius: 22px;

        background: var(--bg-secondary);

        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.28);

        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);

        /* Closed state */

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-12px) scale(0.98);
        transform-origin: top center;

        transition:
            opacity 300ms ease,
            transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 300ms ease;
    }

    /* Open state */

    .site-header.menu-open .nav-links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0) scale(1);
    }

    /* Individual navigation links */

    .nav-links a {
        width: 100%;
        min-height: 48px;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        padding: 12px 17px;

        border-radius: 12px;

        font-size: 14px;
        font-weight: 600;

        white-space: normal;
    }

    .nav-links a:hover {
        background: var(--accent-soft);
    }

    .nav-links a.active {
        background: var(--accent);
        color: var(--bg-primary);
    }

    /* Preserve existing hero layout */

    .hero {
        min-height: 750px;
    }

    .hero-container {
        padding-top: 100px;
        padding-bottom: 35px;
    }

    .hero-visual {
        width: 78%;
        opacity: 0.58;
    }

    .hero-title {
        font-size: clamp(42px, 5vw, 52px);
    }

    .hero-description {
        max-width: 490px;
        font-size: 17px;
    }

}

/* =========================================
   MOBILE HERO LAYOUT
========================================= */

@media (max-width: 600px) {

    .hero {
        min-height: max(750px, calc(100svh - 130px));
    }

    .hero-container {
        padding-top: 75px;
        padding-bottom: 25px;
    }

    .hero-visual {
        width: 100%;
        opacity: 0.32;
    }

    .hero-image {
        object-position: 55% center;

        -webkit-mask-image: linear-gradient(
            to bottom,
            black 0%,
            black 46%,
            transparent 100%
        );

        mask-image: linear-gradient(
            to bottom,
            black 0%,
            black 46%,
            transparent 100%
        );
    }

    .hero-visual::after {
        background: linear-gradient(
            to top,
            var(--bg-primary) 4%,
            transparent 100%
        );
    }

    .hero-content {
        padding-bottom: 45px;
    }

    .hero-eyebrow {
        gap: 9px;
        margin-bottom: 23px;

        font-size: 9px;
        letter-spacing: 0.12em;
    }

    /* Name remains stacked on mobile */

    .hero-title {
        display: flex;
        align-items: flex-start;
        flex-direction: column;

        gap: 3px;

        width: 100%;
        margin-bottom: 25px;

        font-size: clamp(48px, 13vw, 64px);
    }

    .hero-name-lockup {
        max-width: 100%;
    }

    .hero-full-name {
        font-size: clamp(28px, 7.9vw, 43px);
        letter-spacing: -0.025em;
    }

    .hero-description {
        max-width: 440px;

        margin-bottom: 33px;

        font-size: 16px;
        line-height: 1.85;
    }

    .hero-actions {
        gap: 11px;
    }

    .hero-button {
        min-height: 52px;

        padding: 6px 6px 6px 17px;

        gap: 13px;

        font-size: 12px;
    }

    .button-arrow {
        width: 35px;
        height: 35px;

        font-size: 17px;
    }

    .hero-button-text {
        padding-left: 9px;
    }

    .hero-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }

    .hero-location,
    .hero-scroll {
        font-size: 11px;
    }

}

/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 370px) {

    .navbar {
        gap: 9px;
    }

    .theme-toggle,
    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .hero-eyebrow {
        font-size: 8px;
    }

    .hero-full-name {
        font-size: 27px;
    }

    .hero-actions {
        gap: 8px;
    }

}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-name-reveal {
        clip-path: none;
    }

    .hero-name-sweep {
        display: none;
    }

}

/* =========================================
   MOBILE HERO BUTTON REFINEMENT
========================================= */

@media (max-width: 600px) {

    .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: center;
    }

    .hero-actions .hero-button-primary,
    .hero-actions .hero-button-secondary {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 6px 6px 14px;
    }

    .hero-actions .hero-button-text {
        grid-column: 1 / -1;
        justify-self: center;

        width: auto;
        min-height: 46px;

        margin-top: 3px;
        padding: 5px 8px 5px 18px;

        gap: 18px;

        border: 1px solid var(--border);
        border-radius: 100px;

        background: var(--accent-soft);
    }

    .hero-actions .hero-button-text:hover {
        border-color: var(--border-hover);
    }

}

@media (max-width: 370px) {

    .hero-actions {
        gap: 9px;
    }

    .hero-actions .hero-button-primary,
    .hero-actions .hero-button-secondary {
        padding-left: 10px;
        font-size: 11px;
    }

    .hero-actions .button-arrow {
        width: 31px;
        height: 31px;
    }

}

/* =========================================
   HOMEPAGE ABOUT PREVIEW
========================================= */

.about-preview {
    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(90px, 10vw, 160px)
        var(--page-padding)
        clamp(100px, 11vw, 170px);

    background:
        radial-gradient(
            ellipse at 5% 65%,
            rgba(40, 91, 59, 0.11),
            transparent 52%
        ),
        var(--bg-primary);

    border-top: 1px solid var(--border);
}

html[data-theme="light"] .about-preview {
    background:
        radial-gradient(
            ellipse at 5% 65%,
            rgba(72, 133, 91, 0.08),
            transparent 52%
        ),
        var(--bg-primary);
}

/* =========================================
   SECTION CONTAINER
========================================= */

.about-preview-container {
    position: relative;

    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}

/* =========================================
   SECTION HEADING
========================================= */

.about-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(65px, 7vw, 110px);
}

.about-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

/* Section Number */

.about-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--accent);
}

/* Decorative Line */

.about-section-line {
    display: block;

    width: 52px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

/* Section Name */

.about-section-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

/* Right Side Label */

.about-preview-side-note {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.17em;

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

/* =========================================
   ABOUT CONTENT GRID
========================================= */

.about-preview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: start;

    gap: clamp(50px, 8vw, 125px);
}

/* =========================================
   EDITORIAL HEADING
========================================= */

.about-preview-title-area {
    position: relative;
    min-width: 0;
}

.about-preview-title {
    margin: 0;

    font-family: var(--font-editorial);

    font-size: clamp(64px, 6.5vw, 104px);
    font-weight: 400;

    line-height: 1.02;
    letter-spacing: -0.04em;

    color: var(--text-primary);
}

/* Highlighted Word */

.about-preview-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* Subtle decorative accent */

.about-preview-title-area::after {
    content: '';

    display: block;

    width: 78px;
    height: 2px;

    margin-top: 38px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

/* =========================================
   ABOUT TEXT CONTENT
========================================= */

.about-preview-content {
    max-width: 545px;

    padding-top: 8px;
}

/* Introduction */

.about-preview-lead {
    margin: 0 0 28px;

    font-family: var(--font-heading);

    font-size: clamp(20px, 2vw, 27px);
    font-weight: 500;

    letter-spacing: -0.045em;
    line-height: 1.55;

    color: var(--text-primary);
}

/* Supporting Paragraphs */

.about-preview-description {
    margin: 0 0 22px;

    font-size: clamp(15px, 1.2vw, 17px);
    font-weight: 400;

    line-height: 1.95;
    letter-spacing: -0.01em;

    color: var(--text-secondary);
}

.about-preview-description:last-of-type {
    margin-bottom: 37px;
}

/* =========================================
   CUSTOM ABOUT BUTTON
========================================= */

.about-preview-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 28px;

    padding: 6px 6px 6px 22px;

    min-height: 57px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--accent-soft);

    color: var(--text-primary);

    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        transform 300ms ease,
        box-shadow 300ms ease;
}

.about-preview-link:hover {
    transform: translateY(-3px);

    border-color: var(--accent);

    background: var(--bg-elevated);

    box-shadow: var(--shadow);
}

/* Button Label */

.about-preview-link-text {
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.01em;
}

/* Circular Arrow */

.about-preview-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);
    color: var(--bg-primary);

    font-size: 19px;

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

.about-preview-link:hover .about-preview-link-arrow {
    transform: rotate(45deg);
}

html[data-theme="light"] .about-preview-link-arrow {
    color: #ffffff;
}

/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 900px) {

    .about-preview {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .about-preview-heading {
        margin-bottom: 65px;
    }

    .about-preview-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-preview-title {
        font-size: clamp(65px, 9vw, 95px);
    }

    .about-preview-content {
        max-width: 640px;
        padding-top: 0;
    }

    .about-preview-lead {
        font-size: 24px;
    }

}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 600px) {

    .about-preview {
        padding-top: 85px;
        padding-bottom: 100px;
    }

    .about-preview-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;

        margin-bottom: 55px;
    }

    .about-section-label {
        gap: 12px;
    }

    .about-section-number {
        font-size: 23px;
    }

    .about-section-line {
        width: 37px;
    }

    .about-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .about-preview-side-note {
        padding-left: 0;

        font-size: 9px;
        letter-spacing: 0.15em;
    }

    .about-preview-grid {
        gap: 40px;
    }

    .about-preview-title {
        font-size: clamp(53px, 13vw, 76px);

        line-height: 1.04;
        letter-spacing: -0.045em;
    }

    .about-preview-title-area::after {
        width: 60px;
        margin-top: 27px;
    }

    .about-preview-lead {
        margin-bottom: 23px;

        font-size: 21px;
        line-height: 1.5;
    }

    .about-preview-description {
        margin-bottom: 20px;

        font-size: 15px;
        line-height: 1.9;
    }

    .about-preview-description:last-of-type {
        margin-bottom: 30px;
    }

    .about-preview-link {
        min-height: 53px;

        gap: 22px;
        padding-left: 18px;
    }

    .about-preview-link-arrow {
        width: 38px;
        height: 38px;
    }

}

/* =========================================
   HOMEPAGE VENTURES SHOWCASE
========================================= */

.ventures-preview {
    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(90px, 10vw, 150px)
        var(--page-padding)
        clamp(100px, 11vw, 170px);

    background:
        radial-gradient(
            ellipse at 85% 15%,
            rgba(47, 91, 65, 0.12),
            transparent 48%
        ),
        var(--bg-secondary);

    border-top: 1px solid var(--border);
}

html[data-theme="light"] .ventures-preview {
    background:
        radial-gradient(
            ellipse at 85% 15%,
            rgba(80, 136, 97, 0.09),
            transparent 48%
        ),
        var(--bg-secondary);
}

/* =========================================
   SECTION CONTAINER
========================================= */

.ventures-preview-container {
    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}

/* =========================================
   SECTION LABEL
========================================= */

.ventures-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(60px, 7vw, 105px);
}

.ventures-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.ventures-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--accent);
}

.ventures-section-line {
    display: block;

    width: 52px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.ventures-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.ventures-preview-side-note {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.17em;

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

/* =========================================
   SECTION INTRODUCTION
========================================= */

.ventures-preview-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: end;

    gap: clamp(40px, 7vw, 110px);

    margin-bottom: clamp(50px, 6vw, 85px);
}

.ventures-preview-title {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(70px, 7vw, 112px);
    font-weight: 400;

    line-height: 0.98;
    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.ventures-preview-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.ventures-preview-description {
    max-width: 440px;

    margin: 0 0 10px;

    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.9;

    color: var(--text-secondary);
}

/* =========================================
   VENTURES GRID
========================================= */

.ventures-showcase {
    display: grid;

    grid-template-columns: repeat(12, minmax(0, 1fr));

    gap: 22px;
}

/* =========================================
   SHARED CARD FOUNDATIONS
========================================= */

.venture-card {
    position: relative;
    isolation: isolate;

    min-width: 0;
    min-height: 540px;

    overflow: hidden;

    border: 1px solid var(--card-border);
    border-radius: 28px;

    background:
        radial-gradient(
            ellipse at 90% 5%,
            var(--card-glow),
            transparent 55%
        ),
        var(--card-background);

    color: #f4f5ef;

    transition:
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 300ms ease,
        box-shadow 400ms ease;
}

.venture-card:hover {
    transform: translateY(-7px);

    border-color: var(--card-accent);

    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.17);
}

.venture-card:focus-within {
    border-color: var(--card-accent);
}

/* Individual card widths */

.venture-card-capstone {
    grid-column: span 7;
}

.venture-card-cardan {
    grid-column: span 5;
}

.venture-card-dbp {
    grid-column: 1 / -1;
    min-height: 410px;
}

/* =========================================
   CARD COLOUR IDENTITIES
========================================= */

.venture-card-capstone {
    --card-background: #10271e;
    --card-border: rgba(166, 217, 183, 0.16);
    --card-accent: #b5e2c1;
    --card-glow: rgba(90, 163, 111, 0.15);
    --card-muted: #b1c5b7;
}

.venture-card-cardan {
    --card-background: #111e2d;
    --card-border: rgba(157, 202, 239, 0.16);
    --card-accent: #aad4f3;
    --card-glow: rgba(91, 148, 202, 0.16);
    --card-muted: #b4c5d4;
}

.venture-card-dbp {
    --card-background: #1b1c1b;
    --card-border: rgba(227, 207, 155, 0.16);
    --card-accent: #e3cf9b;
    --card-glow: rgba(190, 146, 63, 0.1);
    --card-muted: #c6c3b8;
}

/* =========================================
   CARD INTERNAL LAYOUT
========================================= */

.venture-card-inner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    min-height: inherit;

    padding: clamp(27px, 3vw, 45px);
}

.venture-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 65px;
}

.venture-card-index {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.13em;

    color: var(--card-muted);
}

.venture-card-status {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 7px 12px;

    border: 1px solid var(--card-border);
    border-radius: 100px;

    background: rgba(255, 255, 255, 0.035);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.11em;
    line-height: 1.3;

    color: var(--card-accent);
}

/* =========================================
   CARD IDENTITY
========================================= */

.venture-card-identity {
    position: relative;
    z-index: 2;

    margin-top: auto;
}

.venture-card-kicker {
    display: block;

    margin-bottom: 17px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;
    line-height: 1.6;

    color: var(--card-accent);
}

.venture-card-title {
    margin: 0 0 17px;

    font-family: var(--font-heading);
    font-size: clamp(40px, 4vw, 66px);
    font-weight: 700;

    letter-spacing: -0.075em;
    line-height: 1.08;

    color: #f4f5ef;
}

.venture-card-role {
    margin: 0;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.65;

    color: var(--card-muted);
}

/* =========================================
   CARD DESCRIPTION & ACTIONS
========================================= */

.venture-card-bottom {
    position: relative;
    z-index: 2;

    margin-top: 39px;
}

.venture-card-description {
    max-width: 520px;

    margin: 0 0 28px;

    font-size: 14px;
    line-height: 1.85;

    color: var(--card-muted);
}

.venture-card-link {
    display: inline-flex;
    align-items: center;

    gap: 19px;

    min-height: 47px;

    padding: 5px 5px 5px 18px;

    border: 1px solid var(--card-border);
    border-radius: 100px;

    background: rgba(255, 255, 255, 0.055);

    font-size: 12px;
    font-weight: 700;

    color: #f4f5ef;

    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        transform 300ms ease;
}

.venture-card-link:hover {
    transform: translateY(-2px);

    border-color: var(--card-accent);

    background: rgba(255, 255, 255, 0.09);
}

.venture-card-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--card-accent);
    color: #101918;

    font-size: 18px;

    transition: transform 300ms ease;
}

.venture-card-link:hover .venture-card-link-icon {
    transform: rotate(45deg);
}

/* =========================================
   CAPSTONE CARD
========================================= */

.venture-card-capstone .venture-card-title span {
    display: block;

    font-family: var(--font-editorial);
    font-size: 1.22em;
    font-weight: 400;
    font-style: italic;

    letter-spacing: -0.035em;

    color: var(--card-accent);
}

/* Decorative circular structure */

.venture-card-decoration {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.capstone-decoration-ring {
    position: absolute;

    top: -180px;
    right: -160px;

    width: 460px;
    height: 460px;

    border: 1px solid rgba(181, 226, 193, 0.16);
    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(181, 226, 193, 0.025),
        0 0 0 100px rgba(181, 226, 193, 0.018),
        inset 0 0 80px rgba(181, 226, 193, 0.035);

    transition: transform 700ms ease;
}

.venture-card-capstone:hover .capstone-decoration-ring {
    transform: scale(1.07) rotate(12deg);
}

.capstone-decoration-core {
    position: absolute;

    top: 65px;
    right: 78px;

    width: 13px;
    height: 13px;

    border: 1px solid rgba(181, 226, 193, 0.55);
    border-radius: 50%;

    box-shadow: 0 0 28px rgba(181, 226, 193, 0.35);
}

/* =========================================
   CARDAN CARD
========================================= */

.venture-card-cardan .venture-card-title {
    font-size: clamp(58px, 5vw, 88px);
    font-weight: 800;

    letter-spacing: -0.09em;
}

.cardan-title-dot {
    color: var(--card-accent);
}

/* Automotive-tech inspired orbit */

.cardan-decoration-orbit {
    position: absolute;

    top: -65px;
    right: -115px;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(170, 212, 243, 0.2);
    border-radius: 50%;

    transform: rotate(-25deg) scaleX(1.3);

    box-shadow:
        0 0 0 28px rgba(170, 212, 243, 0.025),
        0 0 0 68px rgba(170, 212, 243, 0.018);

    transition: transform 700ms ease;
}

.venture-card-cardan:hover .cardan-decoration-orbit {
    transform: rotate(5deg) scaleX(1.3);
}

.cardan-decoration-point {
    position: absolute;

    top: 70px;
    right: 80px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: var(--card-accent);

    box-shadow:
        0 0 15px rgba(170, 212, 243, 0.65),
        0 0 45px rgba(170, 212, 243, 0.2);
}

/* =========================================
   DON'T BREAK PROD CARD
========================================= */

/* Wider editorial layout */

.venture-card-dbp .venture-card-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);

    grid-template-rows: auto 1fr;

    column-gap: clamp(45px, 7vw, 115px);
}

.venture-card-dbp .venture-card-top {
    grid-column: 1 / -1;

    margin-bottom: 35px;
}

.venture-card-dbp .venture-card-identity {
    align-self: center;

    margin-top: 0;
}

.venture-card-dbp .venture-card-bottom {
    align-self: center;

    margin-top: 0;
}

.venture-card-dbp .venture-card-title {
    font-size: clamp(53px, 5.5vw, 85px);
    font-weight: 800;

    letter-spacing: -0.085em;
}

.venture-card-dbp .venture-card-title span {
    color: var(--card-accent);
}

/* Engineering-inspired background */

.dbp-decoration-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(227, 207, 155, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(227, 207, 155, 0.045) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    -webkit-mask-image: linear-gradient(
        to left,
        black,
        transparent 75%
    );

    mask-image: linear-gradient(
        to left,
        black,
        transparent 75%
    );
}

.dbp-decoration-pulse {
    position: absolute;

    top: -180px;
    right: -120px;

    width: 550px;
    height: 550px;

    border: 1px solid rgba(227, 207, 155, 0.14);
    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(227, 207, 155, 0.018),
        0 0 0 120px rgba(227, 207, 155, 0.012);

    transition: transform 700ms ease;
}

.venture-card-dbp:hover .dbp-decoration-pulse {
    transform: scale(1.08);
}

/* Live demo action */

.venture-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;
}

.venture-card-demo-link {
    display: inline-flex;
    align-items: center;

    min-height: 47px;

    padding: 10px 17px;

    border: 1px solid var(--card-accent);
    border-radius: 100px;

    background: var(--card-accent);
    color: #171915;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

.venture-card-demo-link:hover {
    transform: translateY(-3px);

    background: #f0dfb6;
}

/* =========================================
   SHOWCASE FOOTER
========================================= */

.ventures-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 43px;
    padding-top: 30px;

    border-top: 1px solid var(--border);
}

.ventures-preview-footer-note {
    max-width: 350px;

    margin: 0;

    font-family: var(--font-editorial);
    font-size: 23px;
    font-style: italic;

    line-height: 1.4;

    color: var(--text-secondary);
}

.ventures-preview-all-link {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    min-height: 54px;

    padding: 6px 6px 6px 21px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--accent-soft);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    color: var(--text-primary);

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease;
}

.ventures-preview-all-link:hover {
    transform: translateY(-3px);

    border-color: var(--accent);
    background: var(--bg-elevated);
}

.ventures-preview-all-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);
    color: var(--bg-primary);

    font-size: 19px;

    transition: transform 300ms ease;
}

.ventures-preview-all-link:hover .ventures-preview-all-arrow {
    transform: rotate(45deg);
}

html[data-theme="light"] .ventures-preview-all-arrow {
    color: #ffffff;
}

/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 1100px) {

    .venture-card-capstone,
    .venture-card-cardan {
        grid-column: span 6;
    }

    .venture-card-title {
        font-size: clamp(37px, 4vw, 54px);
    }

    .venture-card-cardan .venture-card-title {
        font-size: clamp(55px, 6vw, 75px);
    }

}

@media (max-width: 900px) {

    .ventures-preview {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .ventures-preview-intro {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .ventures-preview-title {
        font-size: clamp(70px, 9vw, 95px);
    }

    .ventures-preview-description {
        max-width: 600px;
    }

    .ventures-showcase {
        grid-template-columns: 1fr;
    }

    .venture-card-capstone,
    .venture-card-cardan,
    .venture-card-dbp {
        grid-column: 1;
    }

    .venture-card {
        min-height: 470px;
    }

    .venture-card-dbp .venture-card-inner {
        display: flex;
        flex-direction: column;
    }

    .venture-card-dbp .venture-card-top {
        margin-bottom: 65px;
    }

    .venture-card-dbp .venture-card-identity {
        align-self: stretch;

        margin-top: auto;
    }

    .venture-card-dbp .venture-card-bottom {
        align-self: stretch;

        margin-top: 39px;
    }

}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 600px) {

    .ventures-preview {
        padding-top: 85px;
        padding-bottom: 100px;
    }

    .ventures-preview-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;

        margin-bottom: 55px;
    }

    .ventures-section-label {
        gap: 12px;
    }

    .ventures-section-number {
        font-size: 23px;
    }

    .ventures-section-line {
        width: 37px;
    }

    .ventures-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .ventures-preview-side-note {
        font-size: 9px;
        letter-spacing: 0.15em;
    }

    .ventures-preview-intro {
        gap: 27px;

        margin-bottom: 43px;
    }

    .ventures-preview-title {
        font-size: clamp(60px, 14vw, 78px);
    }

    .ventures-preview-description {
        font-size: 15px;
        line-height: 1.9;
    }

    .ventures-showcase {
        gap: 16px;
    }

    .venture-card {
        min-height: 475px;

        border-radius: 23px;
    }

    .venture-card-inner {
        padding: 26px 23px;
    }

    .venture-card-top {
        gap: 10px;

        margin-bottom: 58px;
    }

    .venture-card-status {
        font-size: 8px;
        letter-spacing: 0.07em;
    }

    .venture-card-kicker {
        margin-bottom: 13px;

        font-size: 9px;
    }

    .venture-card-title {
        font-size: clamp(38px, 10vw, 53px);
    }

    .venture-card-cardan .venture-card-title {
        font-size: clamp(58px, 15vw, 75px);
    }

    .venture-card-dbp .venture-card-title {
        font-size: clamp(51px, 13vw, 70px);
    }

    .venture-card-role {
        font-size: 11px;
    }

    .venture-card-bottom {
        margin-top: 28px;
    }

    .venture-card-description {
        margin-bottom: 23px;

        font-size: 13px;
        line-height: 1.8;
    }

    .venture-card-link {
        font-size: 11px;
    }

    .venture-card-dbp .venture-card-top {
        margin-bottom: 58px;
    }

    .venture-card-dbp .venture-card-bottom {
        margin-top: 28px;
    }

    .venture-card-actions {
        gap: 10px;
    }

    .venture-card-demo-link {
        font-size: 11px;
    }

    .capstone-decoration-ring {
        top: -175px;
        right: -200px;
    }

    .cardan-decoration-orbit {
        right: -170px;
    }

    .ventures-preview-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 24px;

        margin-top: 34px;
    }

    .ventures-preview-footer-note {
        font-size: 21px;
    }

    .ventures-preview-all-link {
        font-size: 12px;
    }

}

/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 370px) {

    .venture-card-inner {
        padding: 23px 19px;
    }

    .venture-card-title {
        font-size: 36px;
    }

    .venture-card-cardan .venture-card-title {
        font-size: 54px;
    }

    .venture-card-dbp .venture-card-title {
        font-size: 48px;
    }

    .venture-card-actions {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .venture-card,
    .venture-card *,
    .ventures-preview-all-link,
    .ventures-preview-all-arrow {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   DON'T BREAK PROD TYPOGRAPHY REFINEMENT
========================================= */

.venture-card-dbp .venture-card-title span {
    display: inline-block;
    margin-left: 0.12em;
}

/* =========================================
   HOMEPAGE CAREER HIGHLIGHTS
========================================= */

.career-preview {
    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(90px, 10vw, 150px)
        var(--page-padding)
        clamp(100px, 11vw, 170px);

    background:
        radial-gradient(
            ellipse at 8% 45%,
            rgba(38, 91, 63, 0.09),
            transparent 55%
        ),
        var(--bg-primary);

    border-top: 1px solid var(--border);
}

html[data-theme="light"] .career-preview {
    background:
        radial-gradient(
            ellipse at 8% 45%,
            rgba(76, 139, 98, 0.07),
            transparent 55%
        ),
        var(--bg-primary);
}

/* =========================================
   SECTION CONTAINER
========================================= */

.career-preview-container {
    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}

/* =========================================
   SECTION HEADING
========================================= */

.career-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(65px, 7vw, 105px);
}

.career-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.career-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--accent);
}

.career-section-line {
    display: block;

    width: 52px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.career-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.career-preview-side-note {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.17em;

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

/* =========================================
   EDITORIAL INTRODUCTION
========================================= */

.career-preview-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: end;

    gap: clamp(50px, 8vw, 125px);

    margin-bottom: clamp(75px, 8vw, 120px);
}

.career-preview-title {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(70px, 7vw, 112px);
    font-weight: 400;

    line-height: 0.98;
    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.career-preview-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.career-preview-intro-content {
    max-width: 510px;
}

.career-preview-lead {
    margin: 0 0 25px;

    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 500;

    line-height: 1.5;
    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.career-preview-description {
    margin: 0;

    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}

/* =========================================
   CAREER TIMELINE FOUNDATION
========================================= */

.career-preview-timeline {
    position: relative;

    margin-left: 9px;

    border-left: 1px solid var(--border);
}

.career-timeline-item {
    position: relative;

    margin-left: 35px;

    border-bottom: 1px solid var(--border);
}

.career-timeline-item:first-child {
    border-top: 1px solid var(--border);
}

/* =========================================
   TIMELINE SUMMARY
========================================= */

.career-timeline-summary {
    position: relative;

    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr)
        46px;

    align-items: center;

    gap: 25px;

    min-height: 130px;

    padding: 25px 0;

    list-style: none;
    cursor: pointer;
}

.career-timeline-summary::-webkit-details-marker {
    display: none;
}

.career-timeline-summary::marker {
    content: '';
}

/* =========================================
   TIMELINE CONNECTING MARKERS
========================================= */

.career-timeline-marker {
    position: absolute;

    top: 50%;
    left: -43px;

    width: 15px;
    height: 15px;

    border: 2px solid var(--text-muted);
    border-radius: 50%;

    background: var(--bg-primary);

    transform: translateY(-50%);

    transition:
        border-color 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}

.career-timeline-item:hover .career-timeline-marker,
.career-timeline-item[open] .career-timeline-marker {
    border-color: var(--accent);
    background: var(--accent);

    box-shadow: 0 0 0 6px var(--accent-soft);
}

/* =========================================
   EMPLOYMENT PERIOD
========================================= */

.career-timeline-period {
    display: block;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;
    line-height: 1.7;

    color: var(--text-muted);

    transition: color 300ms ease;
}

.career-timeline-item[open] .career-timeline-period {
    color: var(--accent);
}

/* =========================================
   COMPANY AND ROLE
========================================= */

.career-timeline-main {
    display: flex;
    flex-direction: column;

    gap: 10px;

    min-width: 0;
}

.career-timeline-company {
    display: block;

    font-family: var(--font-heading);
    font-size: clamp(27px, 3vw, 43px);
    font-weight: 700;

    letter-spacing: -0.065em;
    line-height: 1.2;

    color: var(--text-primary);

    transition: color 300ms ease;
}

.career-timeline-item:hover .career-timeline-company,
.career-timeline-item[open] .career-timeline-company {
    color: var(--accent);
}

.career-timeline-role {
    display: block;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.6;

    color: var(--text-secondary);
}

/* =========================================
   EXPAND AND COLLAPSE BUTTON
========================================= */

.career-timeline-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--bg-secondary);

    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        transform 300ms ease;
}

.career-timeline-item:hover .career-timeline-expand {
    border-color: var(--border-hover);
    background: var(--accent-soft);
}

.career-timeline-expand-icon {
    position: relative;

    display: block;

    width: 16px;
    height: 16px;
}

.career-timeline-expand-icon::before,
.career-timeline-expand-icon::after {
    content: '';

    position: absolute;

    top: 50%;
    left: 50%;

    background: var(--accent);
    border-radius: 2px;

    transform: translate(-50%, -50%);

    transition: transform 300ms ease;
}

/* Horizontal line */

.career-timeline-expand-icon::before {
    width: 14px;
    height: 2px;
}

/* Vertical line */

.career-timeline-expand-icon::after {
    width: 2px;
    height: 14px;
}

/* Plus becomes minus when expanded */

.career-timeline-item[open]
.career-timeline-expand-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.career-timeline-item[open] .career-timeline-expand {
    border-color: var(--border-hover);
    background: var(--accent-soft);
}

/* =========================================
   EXPANDED CAREER DETAILS
========================================= */

.career-timeline-details {
    padding:
        0
        70px
        38px
        215px;
}

.career-timeline-details-content {
    max-width: 660px;

    animation: career-details-enter 350ms ease both;
}

.career-timeline-tag {
    display: inline-flex;
    align-items: center;

    margin-bottom: 15px;
    padding: 7px 12px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--accent-soft);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--accent);
}

.career-timeline-details-content p {
    margin: 0 0 21px;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   COMPANY WEBSITE LINK
========================================= */

.career-company-link {
    display: inline-flex;
    align-items: center;

    padding-bottom: 6px;

    border-bottom: 1px solid var(--border-hover);

    font-size: 12px;
    font-weight: 700;

    color: var(--text-primary);

    transition:
        color 300ms ease,
        border-color 300ms ease;
}

.career-company-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* =========================================
   TIMELINE ENTRANCE ANIMATION
========================================= */

@keyframes career-details-enter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   CAREER SECTION FOOTER
========================================= */

.career-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 65px;
    padding-top: 35px;

    border-top: 1px solid var(--border);
}

.career-preview-footer-note {
    max-width: 400px;

    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(21px, 2vw, 27px);
    font-style: italic;

    line-height: 1.45;

    color: var(--text-secondary);
}

.career-preview-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

/* =========================================
   CAREER ACTION BUTTONS
========================================= */

.career-preview-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 54px;

    padding: 6px 6px 6px 19px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        transform 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease;
}

.career-preview-link:hover {
    transform: translateY(-3px);
}

.career-preview-link-primary {
    background: var(--accent);
    color: var(--bg-primary);
}

.career-preview-link-secondary {
    background: var(--accent-soft);
    color: var(--text-primary);
}

.career-preview-link-secondary:hover {
    background: var(--bg-elevated);
}

.career-preview-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--bg-elevated);
    color: var(--accent);

    font-size: 18px;

    transition: transform 300ms ease;
}

.career-preview-link-primary .career-preview-link-arrow {
    background: #163e2c;
    color: #e6f5e7;
}

.career-preview-link:hover .career-preview-link-arrow {
    transform: rotate(45deg);
}

html[data-theme="light"] .career-preview-link-primary {
    color: #ffffff;
}

html[data-theme="light"]
.career-preview-link-primary .career-preview-link-arrow {
    background: #ffffff;
    color: #255e44;
}

/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 1000px) {

    .career-timeline-summary {
        grid-template-columns:
            150px
            minmax(0, 1fr)
            46px;

        gap: 18px;
    }

    .career-timeline-details {
        padding-left: 168px;
    }

    .career-preview-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 900px) {

    .career-preview {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .career-preview-intro {
        grid-template-columns: 1fr;

        gap: 35px;
        margin-bottom: 75px;
    }

    .career-preview-title {
        font-size: clamp(70px, 9vw, 95px);
    }

    .career-preview-intro-content {
        max-width: 650px;
    }

}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 600px) {

    .career-preview {
        padding-top: 85px;
        padding-bottom: 100px;
    }

    .career-preview-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
        margin-bottom: 55px;
    }

    .career-section-label {
        gap: 12px;
    }

    .career-section-number {
        font-size: 23px;
    }

    .career-section-line {
        width: 37px;
    }

    .career-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .career-preview-side-note {
        font-size: 9px;
        letter-spacing: 0.15em;
    }

    .career-preview-intro {
        gap: 27px;
        margin-bottom: 60px;
    }

    .career-preview-title {
        font-size: clamp(60px, 14vw, 78px);
    }

    .career-preview-lead {
        font-size: 21px;
    }

    .career-preview-description {
        font-size: 15px;
    }

    /* Timeline */

    .career-preview-timeline {
        margin-left: 7px;
    }

    .career-timeline-item {
        margin-left: 25px;
    }

    .career-timeline-summary {
        grid-template-columns:
            minmax(0, 1fr)
            40px;

        gap: 12px;

        min-height: 140px;
        padding: 25px 0;
    }

    .career-timeline-marker {
        left: -34px;
        width: 13px;
        height: 13px;
    }

    .career-timeline-period {
        grid-column: 1;
        grid-row: 1;

        font-size: 10px;
    }

    .career-timeline-main {
        grid-column: 1;
        grid-row: 2;

        gap: 7px;
    }

    .career-timeline-company {
        font-size: clamp(24px, 7vw, 32px);
    }

    .career-timeline-role {
        font-size: 12px;
    }

    .career-timeline-expand {
        grid-column: 2;
        grid-row: 1 / 3;

        width: 40px;
        height: 40px;
    }

    .career-timeline-details {
        padding:
            0
            0
            30px
            0;
    }

    .career-timeline-details-content p {
        font-size: 14px;
    }

    /* Footer */

    .career-preview-footer {
        gap: 25px;

        margin-top: 50px;
        padding-top: 30px;
    }

    .career-preview-footer-note {
        font-size: 22px;
    }

    .career-preview-actions {
        width: 100%;
        gap: 12px;
    }

    .career-preview-link {
        font-size: 12px;
    }

}

/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 370px) {

    .career-timeline-company {
        font-size: 23px;
    }

    .career-timeline-role {
        font-size: 11px;
    }

    .career-preview-actions {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .career-timeline-details-content {
        animation: none;
    }

    .career-timeline-item *,
    .career-preview-link,
    .career-preview-link-arrow {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   HOMEPAGE BEYOND WORK
========================================= */

.beyond-preview {
    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(90px, 10vw, 150px)
        var(--page-padding)
        clamp(100px, 11vw, 170px);

    background:
        radial-gradient(
            ellipse at 90% 20%,
            rgba(91, 58, 92, 0.09),
            transparent 55%
        ),
        var(--bg-secondary);

    border-top: 1px solid var(--border);
}

.beyond-preview-container {
    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}

/* =========================================
   SECTION LABEL
========================================= */

.beyond-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(65px, 7vw, 105px);
}

.beyond-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.beyond-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;
    color: var(--accent);
}

.beyond-section-line {
    width: 52px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.beyond-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.beyond-preview-side-note {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.17em;

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

/* =========================================
   EDITORIAL INTRODUCTION
========================================= */

.beyond-preview-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);

    align-items: end;

    gap: clamp(40px, 7vw, 110px);

    margin-bottom: clamp(55px, 7vw, 95px);
}

.beyond-preview-title {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 108px);
    font-weight: 400;

    line-height: 1.02;
    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.beyond-preview-title em {
    font-style: italic;
    font-weight: 400;

    color: var(--accent);
}

.beyond-preview-intro-content {
    max-width: 460px;
}

.beyond-preview-lead {
    margin: 0 0 22px;

    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 500;

    line-height: 1.5;
    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.beyond-preview-description {
    margin: 0;

    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}

/* =========================================
   PERSONAL INTEREST GRID
========================================= */

.beyond-showcase {
    display: grid;

    grid-template-columns: repeat(12, minmax(0, 1fr));

    gap: 20px;
}

.beyond-card {
    position: relative;
    isolation: isolate;

    min-width: 0;
    min-height: 440px;

    overflow: hidden;

    border: 1px solid var(--interest-border);
    border-radius: 26px;

    background:
        radial-gradient(
            ellipse at 90% 10%,
            var(--interest-glow),
            transparent 65%
        ),
        var(--interest-bg);

    color: var(--interest-text);

    transition:
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 300ms ease,
        box-shadow 400ms ease;
}

.beyond-card:hover {
    transform: translateY(-6px);

    border-color: var(--interest-accent);

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}

.beyond-card:focus-within {
    border-color: var(--interest-accent);
}

/* =========================================
   INDIVIDUAL INTEREST COLOURS
========================================= */

/* Arsenal */

.beyond-card-arsenal {
    grid-column: span 6;

    --interest-bg: #241619;
    --interest-accent: #f28c91;
    --interest-text: #fff5f3;
    --interest-muted: #d2b7b9;
    --interest-border: rgba(242, 140, 145, 0.17);
    --interest-glow: rgba(181, 45, 61, 0.16);
}

/* Dallas Mavericks */

.beyond-card-mavericks {
    grid-column: span 6;

    --interest-bg: #121e2b;
    --interest-accent: #98cff4;
    --interest-text: #f3f8fc;
    --interest-muted: #adbfce;
    --interest-border: rgba(152, 207, 244, 0.17);
    --interest-glow: rgba(54, 124, 190, 0.17);
}

/* Music */

.beyond-card-music {
    grid-column: 1 / -1;

    min-height: 370px;

    --interest-bg: #231c2b;
    --interest-accent: #e6b4e6;
    --interest-text: #fcf5ff;
    --interest-muted: #d1bfd7;
    --interest-border: rgba(230, 180, 230, 0.18);
    --interest-glow: rgba(155, 83, 168, 0.19);
}

/* =========================================
   LIGHT THEME CARD COLOURS
========================================= */

html[data-theme="light"] .beyond-card-arsenal {
    --interest-bg: #fff1f0;
    --interest-accent: #a72d42;
    --interest-text: #421c22;
    --interest-muted: #80535a;
    --interest-border: rgba(167, 45, 66, 0.17);
    --interest-glow: rgba(167, 45, 66, 0.08);
}

html[data-theme="light"] .beyond-card-mavericks {
    --interest-bg: #edf5fc;
    --interest-accent: #235d94;
    --interest-text: #18334c;
    --interest-muted: #557085;
    --interest-border: rgba(35, 93, 148, 0.16);
    --interest-glow: rgba(35, 93, 148, 0.08);
}

html[data-theme="light"] .beyond-card-music {
    --interest-bg: #f8effb;
    --interest-accent: #87429b;
    --interest-text: #37233c;
    --interest-muted: #785f7d;
    --interest-border: rgba(135, 66, 155, 0.16);
    --interest-glow: rgba(135, 66, 155, 0.09);
}

/* =========================================
   CARD LAYOUT
========================================= */

.beyond-card-inner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    min-height: inherit;

    padding: clamp(28px, 3.3vw, 47px);
}

.beyond-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 75px;
}

.beyond-card-category,
.beyond-card-number {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;
}

.beyond-card-category {
    color: var(--interest-accent);
}

.beyond-card-number {
    color: var(--interest-muted);
}

/* =========================================
   CARD TYPOGRAPHY
========================================= */

.beyond-card-content {
    position: relative;
    z-index: 2;

    max-width: 410px;

    margin-top: auto;
}

.beyond-card-eyebrow {
    display: block;

    margin-bottom: 13px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--interest-accent);
}

.beyond-card-title {
    margin: 0 0 20px;

    font-family: var(--font-heading);
    font-size: clamp(42px, 4.6vw, 68px);
    font-weight: 800;

    letter-spacing: -0.075em;
    line-height: 1.12;

    color: var(--interest-text);
}

.beyond-card-title span,
.beyond-card-title em {
    color: var(--interest-accent);
}

.beyond-card-title em {
    font-family: var(--font-editorial);
    font-weight: 400;
    font-style: italic;

    letter-spacing: -0.035em;
}

.beyond-card-description {
    max-width: 370px;

    margin: 0;

    font-size: 14px;
    line-height: 1.85;

    color: var(--interest-muted);
}

/* =========================================
   CARD LINKS
========================================= */

.beyond-card-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: 16px;

    align-self: flex-start;

    margin-top: 31px;

    font-size: 12px;
    font-weight: 700;

    color: var(--interest-text);

    transition: color 300ms ease;
}

.beyond-card-link:hover {
    color: var(--interest-accent);
}

.beyond-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    flex-shrink: 0;

    border: 1px solid var(--interest-border);
    border-radius: 50%;

    background: var(--interest-glow);

    color: var(--interest-accent);

    font-size: 18px;

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

.beyond-card-link:hover .beyond-card-arrow {
    transform: rotate(45deg);
}

/* =========================================
   DECORATIVE GRAPHICS
========================================= */

.beyond-card-art {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

/* =========================================
   ARSENAL GRAPHICS
========================================= */

.arsenal-art-circle {
    position: absolute;

    top: -155px;
    right: -130px;

    width: 390px;
    height: 390px;

    border: 1px solid rgba(242, 140, 145, 0.2);
    border-radius: 50%;

    box-shadow:
        0 0 0 34px rgba(242, 140, 145, 0.035),
        0 0 0 80px rgba(242, 140, 145, 0.02);

    transition: transform 650ms ease;
}

.arsenal-art-line {
    position: absolute;

    top: -50px;
    right: 95px;

    width: 1px;
    height: 300px;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(242, 140, 145, 0.3),
        transparent
    );

    transform: rotate(35deg);
}

.beyond-card-arsenal:hover .arsenal-art-circle {
    transform: scale(1.07);
}

/* =========================================
   MAVERICKS GRAPHICS
========================================= */

.mavericks-art-ring {
    position: absolute;

    top: -145px;
    right: -115px;

    width: 370px;
    height: 370px;

    border: 2px solid rgba(152, 207, 244, 0.19);
    border-radius: 50%;

    box-shadow:
        0 0 0 37px rgba(152, 207, 244, 0.025),
        0 0 0 90px rgba(152, 207, 244, 0.016);

    transition: transform 650ms ease;
}

.mavericks-art-court {
    position: absolute;

    top: 0;
    right: 65px;

    width: 1px;
    height: 240px;

    background: rgba(152, 207, 244, 0.15);

    transform: rotate(-35deg);
}

.beyond-card-mavericks:hover .mavericks-art-ring {
    transform: scale(1.07) rotate(8deg);
}

/* =========================================
   MUSIC CARD
========================================= */

.beyond-card-music .beyond-card-top {
    margin-bottom: 35px;
}

.beyond-card-music .beyond-card-content {
    max-width: 570px;
}

.beyond-card-music .beyond-card-title {
    font-size: clamp(53px, 5.5vw, 82px);
}

.beyond-card-music .beyond-card-description {
    max-width: 470px;
}

.beyond-music-note {
    display: inline-flex;
    align-items: center;

    margin-top: 22px;

    padding: 7px 12px;

    border: 1px solid var(--interest-border);
    border-radius: 100px;

    background: var(--interest-glow);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;

    color: var(--interest-accent);
}

/* =========================================
   VINYL RECORD GRAPHIC
========================================= */

.music-art-record {
    position: absolute;

    top: 50%;
    right: 8%;

    width: clamp(220px, 26vw, 360px);
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        repeating-radial-gradient(
            circle,
            transparent 0,
            transparent 9px,
            rgba(230, 180, 230, 0.075) 10px,
            transparent 11px
        ),
        radial-gradient(
            circle,
            #493450 0%,
            #2f2337 22%,
            #17121e 75%
        );

    border: 1px solid rgba(230, 180, 230, 0.2);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25),
        0 0 0 16px rgba(230, 180, 230, 0.025);

    transform: translateY(-50%) rotate(-18deg);

    transition: transform 700ms ease;
}

.music-art-centre {
    position: absolute;

    top: 50%;
    right: calc(8% + clamp(110px, 13vw, 180px));

    width: 56px;
    height: 56px;

    border: 12px solid rgba(230, 180, 230, 0.24);
    border-radius: 50%;

    background: #1b1520;

    transform: translate(50%, -50%);

    pointer-events: none;
}

.beyond-card-music:hover .music-art-record {
    transform: translateY(-50%) rotate(12deg);
}

html[data-theme="light"] .music-art-record {
    opacity: 0.7;
}

/* =========================================
   MUSIC ACTIONS
========================================= */

.beyond-music-actions {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px 30px;

    margin-top: 26px;
}

.beyond-music-actions .beyond-card-link {
    margin-top: 0;
}

.beyond-music-profile-link {
    padding-bottom: 5px;

    border-bottom: 1px solid var(--interest-border);

    font-size: 12px;
    font-weight: 600;

    color: var(--interest-muted);

    transition:
        color 300ms ease,
        border-color 300ms ease;
}

.beyond-music-profile-link:hover {
    color: var(--interest-accent);
    border-color: var(--interest-accent);
}

/* =========================================
   BEYOND WORK FOOTER
========================================= */

.beyond-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 48px;
    padding-top: 35px;

    border-top: 1px solid var(--border);
}

.beyond-preview-footer-content {
    max-width: 600px;
}

.beyond-preview-footer-label {
    display: block;

    margin-bottom: 14px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--accent);
}

.beyond-preview-footer-note {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(22px, 2.4vw, 32px);
    font-style: italic;

    line-height: 1.4;

    color: var(--text-secondary);
}

/* =========================================
   EXPLORE BUTTON
========================================= */

.beyond-preview-all-link {
    display: inline-flex;
    align-items: center;

    gap: 21px;

    min-height: 54px;

    padding: 6px 6px 6px 21px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--accent-soft);

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    color: var(--text-primary);

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease;
}

.beyond-preview-all-link:hover {
    transform: translateY(-3px);

    border-color: var(--accent);
    background: var(--bg-elevated);
}

.beyond-preview-all-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);
    color: var(--bg-primary);

    font-size: 19px;

    transition: transform 300ms ease;
}

.beyond-preview-all-link:hover .beyond-preview-all-arrow {
    transform: rotate(45deg);
}

html[data-theme="light"] .beyond-preview-all-arrow {
    color: #ffffff;
}

/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 1000px) {

    .beyond-preview-intro {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .beyond-preview-title {
        font-size: clamp(65px, 9vw, 95px);
    }

    .beyond-preview-intro-content {
        max-width: 650px;
    }

    .beyond-card-arsenal,
    .beyond-card-mavericks {
        grid-column: span 6;
    }

    .beyond-card-title {
        font-size: clamp(36px, 4.5vw, 54px);
    }

    .beyond-preview-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 700px) {

    .beyond-showcase {
        grid-template-columns: 1fr;
    }

    .beyond-card-arsenal,
    .beyond-card-mavericks,
    .beyond-card-music {
        grid-column: 1;
    }

    .beyond-card {
        min-height: 395px;
    }

    .beyond-card-music {
        min-height: 420px;
    }

    .beyond-card-music .beyond-card-content {
        max-width: 100%;
    }

    .music-art-record {
        top: 25%;
        right: -85px;

        width: 260px;

        opacity: 0.25;
    }

    .music-art-centre {
        display: none;
    }

}

@media (max-width: 600px) {

    .beyond-preview {
        padding-top: 85px;
        padding-bottom: 100px;
    }

    .beyond-preview-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;

        margin-bottom: 55px;
    }

    .beyond-section-label {
        gap: 12px;
    }

    .beyond-section-number {
        font-size: 23px;
    }

    .beyond-section-line {
        width: 37px;
    }

    .beyond-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .beyond-preview-side-note {
        font-size: 9px;
        letter-spacing: 0.15em;
    }

    .beyond-preview-intro {
        gap: 28px;
        margin-bottom: 45px;
    }

    .beyond-preview-title {
        font-size: clamp(50px, 12vw, 75px);
    }

    .beyond-preview-lead {
        font-size: 21px;
    }

    .beyond-preview-description {
        font-size: 15px;
    }

    .beyond-showcase {
        gap: 16px;
    }

    .beyond-card {
        border-radius: 23px;
    }

    .beyond-card-inner {
        padding: 27px 23px;
    }

    .beyond-card-top {
        margin-bottom: 60px;
    }

    .beyond-card-category,
    .beyond-card-number {
        font-size: 9px;
    }

    .beyond-card-title {
        font-size: clamp(36px, 9.2vw, 48px);
    }

    .beyond-card-music .beyond-card-title {
        font-size: clamp(48px, 12vw, 66px);
    }

    .beyond-card-description {
        font-size: 13px;
        line-height: 1.8;
    }

    .beyond-card-link {
        font-size: 11px;
    }

    .beyond-music-actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;
    }

    .beyond-preview-footer {
        gap: 27px;

        margin-top: 35px;
        padding-top: 30px;
    }

    .beyond-preview-footer-note {
        font-size: 23px;
    }

    .beyond-preview-all-link {
        font-size: 12px;
    }

}

/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 370px) {

    .beyond-card-inner {
        padding: 24px 19px;
    }

    .beyond-card-title {
        font-size: 34px;
    }

    .beyond-card-music .beyond-card-title {
        font-size: 45px;
    }

}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .beyond-card,
    .beyond-card *,
    .beyond-preview-all-link,
    .beyond-preview-all-arrow {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   HOMEPAGE CONTACT SECTION
========================================= */

.contact-preview {
    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(100px, 11vw, 170px)
        var(--page-padding)
        clamp(110px, 12vw, 190px);

    background:
        radial-gradient(
            ellipse at 10% 80%,
            rgba(47, 112, 73, 0.13),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 90% 10%,
            rgba(52, 104, 76, 0.08),
            transparent 45%
        ),
        var(--bg-primary);

    border-top: 1px solid var(--border);
}

html[data-theme="light"] .contact-preview {
    background:
        radial-gradient(
            ellipse at 10% 80%,
            rgba(75, 144, 91, 0.09),
            transparent 55%
        ),
        var(--bg-primary);
}

/* =========================================
   SECTION CONTAINER
========================================= */

.contact-preview-container {
    position: relative;

    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}

/* =========================================
   SECTION LABEL
========================================= */

.contact-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(75px, 8vw, 125px);
}

.contact-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.contact-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--accent);
}

.contact-section-line {
    width: 52px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.contact-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.contact-preview-side-note {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.17em;

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

/* =========================================
   CONTACT CONTENT GRID
========================================= */

.contact-preview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: center;

    gap: clamp(55px, 8vw, 130px);
}

/* =========================================
   LEFT SIDE: INTRODUCTION
========================================= */

.contact-preview-intro {
    position: relative;
    min-width: 0;
}

.contact-preview-kicker {
    display: block;

    margin-bottom: 30px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;
    line-height: 1.8;

    color: var(--accent);
}

/* =========================================
   EDITORIAL HEADING
========================================= */

.contact-preview-title {
    margin: 0 0 34px;

    font-family: var(--font-editorial);
    font-size: clamp(69px, 7.5vw, 118px);
    font-weight: 400;

    line-height: 0.98;
    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.contact-preview-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* =========================================
   CONTACT DESCRIPTION
========================================= */

.contact-preview-description {
    max-width: 460px;

    margin: 0 0 37px;

    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.9;

    color: var(--text-secondary);
}

/* =========================================
   START A CONVERSATION BUTTON
========================================= */

.contact-preview-cta {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    min-height: 62px;

    padding: 7px 8px 7px 24px;

    border: 1px solid var(--accent);
    border-radius: 100px;

    background: var(--accent);
    color: #102019;

    box-shadow:
        0 12px 35px rgba(77, 145, 97, 0.13);

    transition:
        transform 350ms ease,
        box-shadow 350ms ease,
        background-color 350ms ease;
}

.contact-preview-cta:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(77, 145, 97, 0.24);
}

.contact-preview-cta-label {
    position: relative;
    z-index: 1;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.005em;
}

.contact-preview-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #173e2b;
    color: #e8f6e9;

    font-size: 21px;

    transition: transform 350ms ease;
}

.contact-preview-cta:hover .contact-preview-cta-arrow {
    transform: rotate(45deg);
}

html[data-theme="light"] .contact-preview-cta {
    color: #ffffff;
}

html[data-theme="light"] .contact-preview-cta-arrow {
    background: #ffffff;
    color: #255e44;
}

/* =========================================
   RIGHT SIDE: CONTACT PANEL
========================================= */

.contact-preview-connect {
    position: relative;
    isolation: isolate;

    min-width: 0;

    padding: clamp(28px, 3.5vw, 48px);

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 28px;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            var(--accent-soft),
            transparent 65%
        ),
        var(--bg-secondary);

    box-shadow: var(--shadow);
}

/* Subtle decorative glow */

.contact-preview-connect::before {
    content: '';

    position: absolute;

    top: -110px;
    right: -110px;

    width: 270px;
    height: 270px;

    border: 1px solid var(--border-hover);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px var(--accent-soft),
        0 0 0 85px rgba(100, 160, 115, 0.025);

    pointer-events: none;

    z-index: -1;
}

/* =========================================
   CONTACT PANEL HEADING
========================================= */

.contact-preview-connect-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 35px;
}

.contact-preview-connect-label {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: var(--text-secondary);
}

.contact-preview-connect-indicator {
    position: relative;

    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 0 5px var(--accent-soft),
        0 0 15px var(--accent-soft);
}

/* =========================================
   EMAIL ADDRESS
========================================= */

.contact-preview-email {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 10px;

    max-width: 100%;

    padding-bottom: 13px;

    border-bottom: 1px solid var(--border-hover);

    font-family: var(--font-heading);
    font-size: clamp(17px, 1.7vw, 25px);
    font-weight: 600;

    letter-spacing: -0.055em;
    line-height: 1.6;

    overflow-wrap: anywhere;

    color: var(--text-primary);

    transition:
        color 300ms ease,
        border-color 300ms ease;
}

.contact-preview-email:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.contact-preview-email span {
    flex-shrink: 0;

    font-family: var(--font-body);
    font-size: 20px;

    color: var(--accent);

    transition: transform 300ms ease;
}

.contact-preview-email:hover span {
    transform: translate(3px, -3px);
}

/* =========================================
   SOCIAL INTRODUCTION
========================================= */

.contact-preview-social-intro {
    margin: 30px 0 23px;

    font-size: 13px;
    line-height: 1.8;

    color: var(--text-secondary);
}

/* =========================================
   SOCIAL LINKS GRID
========================================= */

.contact-preview-socials {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.contact-social-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 57px;

    padding: 14px 17px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--bg-primary);

    font-size: 13px;
    font-weight: 700;

    color: var(--text-primary);

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease;
}

.contact-social-link:hover {
    transform: translateY(-3px);

    border-color: var(--border-hover);
    background: var(--accent-soft);
}

.contact-social-link span:last-child {
    flex-shrink: 0;

    font-size: 17px;
    font-weight: 400;

    color: var(--accent);

    transition: transform 300ms ease;
}

.contact-social-link:hover span:last-child {
    transform: translate(2px, -2px);
}

/* =========================================
   LOCATION
========================================= */

.contact-preview-location {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 32px;
    padding-top: 25px;

    border-top: 1px solid var(--border);

    font-size: 12px;
    font-weight: 500;

    line-height: 1.6;

    color: var(--text-secondary);
}

.contact-preview-location-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border: 1px solid var(--accent);
    border-radius: 50%;

    box-shadow:
        0 0 0 4px var(--accent-soft);
}

/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 1050px) {

    .contact-preview-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 45px;
    }

    .contact-preview-title {
        font-size: clamp(65px, 7vw, 90px);
    }

}

@media (max-width: 850px) {

    .contact-preview {
        padding-top: 105px;
        padding-bottom: 120px;
    }

    .contact-preview-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .contact-preview-title {
        font-size: clamp(75px, 10vw, 105px);
    }

    .contact-preview-description {
        max-width: 590px;
    }

    .contact-preview-connect {
        max-width: 650px;
    }

}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 600px) {

    .contact-preview {
        padding-top: 85px;
        padding-bottom: 105px;
    }

    .contact-preview-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;

        margin-bottom: 55px;
    }

    .contact-section-label {
        gap: 12px;
    }

    .contact-section-number {
        font-size: 23px;
    }

    .contact-section-line {
        width: 37px;
    }

    .contact-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .contact-preview-side-note {
        font-size: 9px;
        letter-spacing: 0.15em;
    }

    .contact-preview-grid {
        gap: 50px;
    }

    .contact-preview-kicker {
        margin-bottom: 24px;

        font-size: 9px;
        letter-spacing: 0.12em;
    }

    .contact-preview-title {
        margin-bottom: 27px;

        font-size: clamp(61px, 14vw, 82px);

        line-height: 1.02;
    }

    .contact-preview-description {
        margin-bottom: 31px;

        font-size: 15px;
        line-height: 1.9;
    }

    .contact-preview-cta {
        min-height: 56px;

        gap: 20px;

        padding: 6px 7px 6px 20px;
    }

    .contact-preview-cta-label {
        font-size: 12px;
    }

    .contact-preview-cta-arrow {
        width: 40px;
        height: 40px;

        font-size: 19px;
    }

    .contact-preview-connect {
        padding: 28px 22px;

        border-radius: 23px;
    }

    .contact-preview-connect-heading {
        margin-bottom: 29px;
    }

    .contact-preview-connect-label {
        font-size: 9px;
    }

    .contact-preview-email {
        font-size: clamp(17px, 4.6vw, 22px);
    }

    .contact-preview-social-intro {
        margin-top: 26px;

        font-size: 12px;
    }

    .contact-preview-socials {
        gap: 10px;
    }

    .contact-social-link {
        min-height: 53px;

        padding: 12px 13px;

        font-size: 12px;
    }

    .contact-preview-location {
        margin-top: 27px;
        padding-top: 23px;

        font-size: 11px;
    }

}

/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 370px) {

    .contact-preview-title {
        font-size: 55px;
    }

    .contact-preview-connect {
        padding: 24px 18px;
    }

    .contact-preview-socials {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-preview-cta,
    .contact-preview-cta-arrow,
    .contact-preview-email,
    .contact-social-link,
    .contact-social-link span {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   AJ PERSONAL WEBSITE
   DEDICATED ABOUT PAGE
========================================= */

/* =========================================
   SHARED ABOUT PAGE CONTAINER
========================================= */

.about-page-container {
    position: relative;

    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}

/* =========================================
   ABOUT PAGE HERO
========================================= */

.about-page-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: max(620px, calc(85svh - 94px));

    padding:
        clamp(100px, 12vw, 175px)
        var(--page-padding)
        clamp(90px, 10vw, 140px);

    overflow: hidden;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border);
}

.about-page-hero-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 80% 35%,
            rgba(49, 113, 75, 0.16),
            transparent 52%
        ),
        radial-gradient(
            ellipse at 15% 85%,
            rgba(39, 85, 58, 0.09),
            transparent 50%
        );
}

html[data-theme="light"] .about-page-hero-atmosphere {
    background:
        radial-gradient(
            ellipse at 80% 35%,
            rgba(76, 137, 93, 0.11),
            transparent 55%
        );
}

/* =========================================
   HERO INTRODUCTION LABEL
========================================= */

.about-page-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    margin-bottom: clamp(35px, 5vw, 65px);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;
    line-height: 1.7;

    color: var(--accent);
}

.about-page-eyebrow-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 0 5px var(--accent-soft);
}

/* =========================================
   ABOUT HERO TITLE
========================================= */

.about-page-title {
    margin: 0 0 clamp(65px, 8vw, 110px);

    font-family: var(--font-editorial);
    font-size: clamp(90px, 10vw, 155px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.94;

    color: var(--text-primary);

    animation: about-title-enter 900ms ease-out both;
}

.about-page-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* =========================================
   HERO BOTTOM CONTENT
========================================= */

.about-page-hero-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    padding-top: 35px;

    border-top: 1px solid var(--border);
}

.about-page-hero-description {
    max-width: 600px;

    margin: 0;

    font-size: clamp(17px, 1.55vw, 21px);
    font-weight: 400;

    line-height: 1.85;

    color: var(--text-secondary);
}

.about-page-hero-location {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    flex-shrink: 0;

    gap: 13px;
}

.about-page-location-label {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

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

.about-page-location-route {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;

    color: var(--text-primary);
}

.about-page-location-route span {
    display: inline-block;

    margin: 0 10px;

    color: var(--accent);
}

/* =========================================
   SHARED ABOUT SECTION LABELS
========================================= */

.about-page-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(70px, 8vw, 115px);
}

.about-page-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.about-page-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--accent);
}

.about-page-section-line {
    display: block;

    width: 52px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.about-page-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.about-page-section-note {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.17em;

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

/* =========================================
   MY STORY SECTION
========================================= */

.about-story {
    position: relative;

    padding:
        clamp(100px, 11vw, 175px)
        var(--page-padding);

    background:
        radial-gradient(
            ellipse at 0% 70%,
            rgba(41, 95, 61, 0.08),
            transparent 55%
        ),
        var(--bg-primary);
}

.about-story-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: start;

    gap: clamp(55px, 8vw, 130px);
}

/* =========================================
   STORY EDITORIAL HEADING
========================================= */

.about-story-heading h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.045em;
    line-height: 1.02;

    color: var(--text-primary);
}

.about-story-heading h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* =========================================
   STORY CONTENT
========================================= */

.about-story-content {
    max-width: 570px;
}

.about-story-lead {
    margin: 0 0 32px;

    font-family: var(--font-heading);
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.55;

    color: var(--text-primary);
}

.about-story-content p:not(.about-story-lead) {
    margin: 0 0 25px;

    font-size: clamp(15px, 1.25vw, 17px);

    line-height: 1.95;

    color: var(--text-secondary);
}

.about-story-content p:last-child {
    margin-bottom: 0;
}

/* =========================================
   EDUCATION & LIFE JOURNEY
========================================= */

.about-journey {
    position: relative;

    padding:
        clamp(100px, 11vw, 170px)
        var(--page-padding);

    background: var(--bg-secondary);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* =========================================
   JOURNEY INTRODUCTION
========================================= */

.about-journey-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: clamp(75px, 8vw, 120px);
}

.about-journey-intro h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(70px, 7.5vw, 115px);
    font-weight: 400;

    letter-spacing: -0.045em;
    line-height: 0.98;

    color: var(--text-primary);
}

.about-journey-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.about-journey-intro > p {
    max-width: 330px;

    margin: 0 0 8px;

    font-size: 17px;
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   JOURNEY TIMELINE
========================================= */

.about-journey-timeline {
    position: relative;

    padding-left: 0;
}

/* Continuous vertical line */

.about-journey-timeline::before {
    content: '';

    position: absolute;

    top: 40px;
    bottom: 40px;
    left: 7px;

    width: 1px;

    background: linear-gradient(
        to bottom,
        var(--border),
        var(--accent),
        var(--border)
    );
}

/* Individual milestone */

.about-journey-item {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(170px, 0.65fr)
        minmax(0, 1.35fr);

    gap: clamp(35px, 6vw, 95px);

    padding:
        clamp(40px, 5vw, 65px)
        0
        clamp(40px, 5vw, 65px)
        50px;

    border-bottom: 1px solid var(--border);
}

.about-journey-item:first-child {
    border-top: 1px solid var(--border);
}

/* =========================================
   TIMELINE MARKERS
========================================= */

.about-journey-marker {
    position: absolute;

    top: 55px;
    left: 0;

    width: 15px;
    height: 15px;

    border: 2px solid var(--text-muted);
    border-radius: 50%;

    background: var(--bg-secondary);

    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.about-journey-item:hover .about-journey-marker,
.about-journey-item-current .about-journey-marker {
    border-color: var(--accent);
    background: var(--accent);

    box-shadow:
        0 0 0 6px var(--accent-soft);
}

/* =========================================
   TIMELINE METADATA
========================================= */

.about-journey-meta {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.about-journey-stage {
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.12em;
    line-height: 1.6;

    color: var(--accent);
}

.about-journey-place {
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.13em;

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

/* =========================================
   TIMELINE CONTENT
========================================= */

.about-journey-content {
    max-width: 660px;
}

.about-journey-content h3 {
    margin: 0 0 16px;

    font-family: var(--font-heading);
    font-size: clamp(25px, 2.8vw, 39px);
    font-weight: 600;

    letter-spacing: -0.055em;
    line-height: 1.3;

    color: var(--text-primary);

    transition: color 300ms ease;
}

.about-journey-item:hover .about-journey-content h3 {
    color: var(--accent);
}

.about-journey-content p {
    margin: 0;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-secondary);
}

.about-journey-content .about-journey-qualification {
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;

    color: var(--accent);
}

/* =========================================
   CURRENT CHAPTER
========================================= */

.about-journey-current-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 22px;
    padding: 8px 14px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--accent-soft);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--accent);
}

.about-journey-item-current
.about-journey-content h3 {
    color: var(--accent);
}

/* =========================================
   PERSONAL SIDE SECTION
========================================= */

.about-personal {
    position: relative;

    padding:
        clamp(100px, 11vw, 170px)
        var(--page-padding);

    background: var(--bg-primary);
}

/* =========================================
   PERSONAL INTRODUCTION
========================================= */

.about-personal-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 65px;

    margin-bottom: clamp(70px, 8vw, 120px);
}

.about-personal-intro h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(68px, 7.2vw, 112px);
    font-weight: 400;

    letter-spacing: -0.045em;
    line-height: 1;

    color: var(--text-primary);
}

.about-personal-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.about-personal-intro > p {
    max-width: 350px;

    margin: 0 0 8px;

    font-size: 17px;
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   PERSONAL INTERESTS
========================================= */

.about-personal-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.about-personal-item {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 305px;

    padding: clamp(27px, 3vw, 43px);

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 24px;

    background:
        radial-gradient(
            ellipse at 90% 10%,
            var(--accent-soft),
            transparent 65%
        ),
        var(--bg-secondary);

    transition:
        transform 350ms ease,
        border-color 350ms ease;
}

.about-personal-item:hover {
    transform: translateY(-5px);
    border-color: var(--border-hover);
}

/* Decorative numbering */

.about-personal-index {
    display: inline-block;

    margin-bottom: auto;

    font-family: var(--font-editorial);
    font-size: 30px;
    font-style: italic;

    color: var(--accent);
}

/* Card titles */

.about-personal-item h3 {
    margin: 50px 0 15px;

    font-family: var(--font-editorial);
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 400;

    letter-spacing: -0.025em;
    line-height: 1.1;

    color: var(--text-primary);
}

.about-personal-item p {
    max-width: 340px;

    margin: 0;

    font-size: 14px;
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   PERSONAL SECTION FOOTER
========================================= */

.about-personal-footer {
    display: flex;
    justify-content: flex-end;

    margin-top: 45px;
    padding-top: 30px;

    border-top: 1px solid var(--border);
}

.about-page-action-link {
    display: inline-flex;
    align-items: center;

    gap: 23px;

    min-height: 55px;

    padding: 6px 6px 6px 22px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--accent-soft);

    font-size: 13px;
    font-weight: 700;

    color: var(--text-primary);

    transition:
        transform 300ms ease,
        border-color 300ms ease;
}

.about-page-action-link:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.about-page-action-link span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: var(--accent);
    color: var(--bg-primary);

    font-size: 19px;

    transition: transform 300ms ease;
}

.about-page-action-link:hover span:last-child {
    transform: rotate(45deg);
}

html[data-theme="light"]
.about-page-action-link span:last-child {
    color: #ffffff;
}

/* =========================================
   ABOUT PAGE CLOSING
========================================= */

.about-page-closing {
    position: relative;

    padding:
        clamp(110px, 13vw, 190px)
        var(--page-padding);

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(47, 112, 73, 0.16),
            transparent 65%
        ),
        var(--bg-secondary);

    border-top: 1px solid var(--border);

    text-align: center;
}

.about-closing-eyebrow {
    display: block;

    margin-bottom: 35px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--accent);
}

.about-page-closing h2 {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(75px, 10vw, 150px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.98;

    color: var(--text-primary);
}

.about-page-closing h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.about-page-closing p {
    max-width: 540px;

    margin: 0 auto 40px;

    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   CLOSING ACTIONS
========================================= */

.about-closing-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;
}

.about-closing-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    min-height: 56px;

    padding: 7px 8px 7px 22px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

.about-closing-link:hover {
    transform: translateY(-3px);
}

.about-closing-link-primary {
    background: var(--accent);
    color: #102019;
}

.about-closing-link-secondary {
    background: var(--accent-soft);
    color: var(--text-primary);
}

.about-closing-link span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    border-radius: 50%;

    background: var(--bg-elevated);
    color: var(--accent);

    font-size: 19px;

    transition: transform 300ms ease;
}

.about-closing-link:hover span:last-child {
    transform: rotate(45deg);
}

.about-closing-link-primary span:last-child {
    background: #173e2b;
    color: #e8f6e9;
}

html[data-theme="light"]
.about-closing-link-primary {
    color: #ffffff;
}

html[data-theme="light"]
.about-closing-link-primary span:last-child {
    background: #ffffff;
    color: #255e44;
}

/* =========================================
   ABOUT PAGE ANIMATIONS
========================================= */

@keyframes about-title-enter {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 950px) {

    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-story-heading h2 {
        font-size: clamp(65px, 9vw, 95px);
    }

    .about-story-content {
        max-width: 680px;
    }

    .about-personal-intro {
        flex-direction: column;
        align-items: flex-start;

        gap: 35px;
    }

    .about-personal-intro > p {
        max-width: 600px;
    }

    .about-personal-grid {
        gap: 15px;
    }

    .about-personal-item {
        padding: 25px;
    }

}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 700px) {

    /* Hero */

    .about-page-hero {
        min-height: 580px;

        padding-top: 100px;
        padding-bottom: 75px;
    }

    .about-page-title {
        font-size: clamp(74px, 14vw, 105px);
    }

    .about-page-hero-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 28px;
    }

    .about-page-hero-location {
        align-items: flex-start;
    }

    /* Section labels */

    .about-page-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
        margin-bottom: 55px;
    }

    /* Journey */

    .about-journey-intro {
        align-items: flex-start;
        flex-direction: column;

        gap: 30px;
    }

    .about-journey-intro > p {
        max-width: 550px;
    }

    .about-journey-item {
        grid-template-columns: 1fr;

        gap: 20px;

        padding-left: 39px;
    }

    .about-journey-meta {
        gap: 8px;
    }

    .about-journey-marker {
        top: 43px;
    }

    .about-journey-content h3 {
        font-size: clamp(25px, 6vw, 34px);
    }

    /* Personal interests */

    .about-personal-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .about-personal-item {
        min-height: 230px;
        padding: 28px;
    }

    .about-personal-item h3 {
        margin-top: 38px;
    }

}

/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 600px) {

    .about-page-eyebrow {
        font-size: 9px;
        letter-spacing: 0.13em;
    }

    .about-page-title {
        margin-bottom: 65px;

        font-size: clamp(70px, 17vw, 94px);
    }

    .about-page-hero-description {
        font-size: 16px;
    }

    .about-page-section-number {
        font-size: 23px;
    }

    .about-page-section-line {
        width: 37px;
    }

    .about-page-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .about-page-section-note {
        font-size: 9px;
    }

    .about-story,
    .about-journey,
    .about-personal {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .about-story-heading h2,
    .about-journey-intro h2,
    .about-personal-intro h2 {
        font-size: clamp(55px, 13vw, 75px);
    }

    .about-story-lead {
        font-size: 21px;
    }

    .about-story-content p:not(.about-story-lead) {
        font-size: 15px;
    }

    .about-journey-intro {
        margin-bottom: 60px;
    }

    .about-journey-intro > p,
    .about-personal-intro > p {
        font-size: 15px;
    }

    .about-journey-stage {
        font-size: 11px;
    }

    .about-journey-place {
        font-size: 9px;
    }

    .about-journey-content p {
        font-size: 14px;
    }

    .about-personal-intro {
        margin-bottom: 60px;
    }

    .about-personal-item h3 {
        font-size: 36px;
    }

    .about-personal-item p {
        font-size: 13px;
    }

    .about-personal-footer {
        justify-content: flex-start;
    }

    .about-page-closing {
        padding-top: 110px;
        padding-bottom: 120px;
    }

    .about-page-closing h2 {
        font-size: clamp(70px, 16vw, 100px);
    }

    .about-page-closing p {
        font-size: 15px;
    }

}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .about-page-title {
        animation: none;
    }

    .about-personal-item,
    .about-page-action-link,
    .about-closing-link,
    .about-journey-marker {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   ABOUT PAGE
   PERSONAL PHOTOGRAPHIC JOURNAL
========================================= */

/* =========================================
   MOMENTS SECTION
========================================= */

.about-moments {
    position: relative;
    isolation: isolate;

    padding:
        clamp(100px, 11vw, 170px)
        var(--page-padding);

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 90% 10%,
            rgba(47, 112, 73, 0.07),
            transparent 55%
        ),
        var(--bg-primary);

    border-bottom: 1px solid var(--border);
}

/* =========================================
   GALLERY INTRODUCTION
========================================= */

.about-moments-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: end;

    gap: clamp(40px, 7vw, 110px);

    margin-bottom: clamp(85px, 10vw, 145px);
}

/* Editorial Title */

.about-moments-title-area h2 {
    margin: 0;

    font-family: var(--font-editorial);

    font-size: clamp(70px, 7.5vw, 118px);
    font-weight: 400;

    line-height: 0.98;
    letter-spacing: -0.05em;

    color: var(--text-primary);
}

.about-moments-title-area h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* Introduction Text */

.about-moments-description-area {
    max-width: 460px;
}

.about-moments-lead {
    margin: 0 0 22px;

    font-family: var(--font-heading);

    font-size: clamp(21px, 2vw, 28px);
    font-weight: 500;

    line-height: 1.5;
    letter-spacing: -0.04em;

    color: var(--text-primary);
}

.about-moments-description {
    margin: 0;

    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}

/* =========================================
   PHOTOGRAPH COLLECTIONS
========================================= */

.about-moments-collection {
    position: relative;

    margin-bottom: clamp(90px, 11vw, 150px);
}

.about-moments-collection:last-of-type {
    margin-bottom: 0;
}

/* =========================================
   COLLECTION HEADINGS
========================================= */

.about-moments-collection-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 38px;
    padding-bottom: 30px;

    border-bottom: 1px solid var(--border);
}

.about-moments-collection-title-area {
    min-width: 0;
}

/* Collection Number */

.about-moments-collection-index {
    display: block;

    margin-bottom: 19px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--accent);
}

/* Collection Title */

.about-moments-collection-heading h3 {
    margin: 0;

    font-family: var(--font-editorial);

    font-size: clamp(40px, 4.4vw, 65px);
    font-weight: 400;

    line-height: 1.1;
    letter-spacing: -0.035em;

    color: var(--text-primary);
}

.about-moments-collection-heading h3 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* Collection Description */

.about-moments-collection-heading > p {
    max-width: 310px;

    margin: 0 0 5px;

    font-size: 14px;
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   ASYMMETRICAL PHOTO GRID
========================================= */

.about-moments-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-auto-rows: clamp(155px, 16vw, 235px);

    grid-auto-flow: dense;

    gap: 14px;
}

/* =========================================
   INDIVIDUAL PHOTO FRAMES
========================================= */

.about-moments-photo {
    position: relative;
    isolation: isolate;

    display: block;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: var(--bg-secondary);

    cursor: zoom-in;

    transition:
        transform 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}

/* =========================================
   FEATURED PHOTOGRAPHS
========================================= */

.about-moments-photo-featured {
    grid-column: span 2;
    grid-row: span 2;

    border-radius: 22px;
}

/* =========================================
   WIDE PHOTOGRAPHS
========================================= */

.about-moments-photo-wide {
    grid-column: span 2;
}

/* =========================================
   PHOTO IMAGE STYLING
========================================= */

.about-moments-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 750ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 500ms ease;
}

/* Subtle Overlay */

.about-moments-photo::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.32),
        transparent 45%
    );

    opacity: 0;

    transition: opacity 350ms ease;

    pointer-events: none;
}

/* =========================================
   FULL-SIZE VIEW INDICATOR
========================================= */

.about-moments-photo::after {
    content: "↗";

    position: absolute;

    right: 17px;
    bottom: 17px;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;

    background: rgba(15, 25, 19, 0.65);

    color: #ffffff;

    font-size: 19px;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 300ms ease,
        transform 300ms ease;

    pointer-events: none;
}

/* =========================================
   PHOTO INTERACTIONS
========================================= */

.about-moments-photo:hover {
    border-color: var(--accent);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.14);
}

.about-moments-photo:hover img {
    transform: scale(1.055);
}

.about-moments-photo:hover::before,
.about-moments-photo:hover::after {
    opacity: 1;
}

.about-moments-photo:hover::after {
    transform: translateY(0);
}

/* Keyboard Accessibility */

.about-moments-photo:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

.about-moments-photo:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   GALLERY FOOTER
========================================= */

.about-moments-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    padding-top: 35px;

    border-top: 1px solid var(--border);
}

/* Personal Signature */

.about-moments-footer-mark {
    font-family: var(--font-editorial);

    font-size: 47px;
    font-style: italic;

    letter-spacing: -0.05em;

    color: var(--accent);
}

/* Footer Statement */

.about-moments-footer p {
    max-width: 350px;

    margin: 0;

    font-family: var(--font-editorial);

    font-size: clamp(19px, 2vw, 27px);
    font-style: italic;

    line-height: 1.4;

    text-align: right;

    color: var(--text-secondary);
}

/* =========================================
   LIGHT THEME ADJUSTMENTS
========================================= */

html[data-theme="light"] .about-moments {
    background:
        radial-gradient(
            ellipse at 90% 10%,
            rgba(76, 137, 93, 0.06),
            transparent 55%
        ),
        var(--bg-primary);
}

html[data-theme="light"] .about-moments-photo {
    border-color: rgba(35, 75, 49, 0.13);
}

html[data-theme="light"] .about-moments-photo:hover {
    border-color: var(--accent);
}

/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 1000px) {

    .about-moments-intro {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-moments-title-area h2 {
        font-size: clamp(70px, 9vw, 105px);
    }

    .about-moments-description-area {
        max-width: 650px;
    }

    .about-moments-grid {
        grid-auto-rows: clamp(145px, 19vw, 210px);

        gap: 11px;
    }

    .about-moments-collection-heading {
        gap: 30px;
    }

}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 700px) {

    .about-moments-intro {
        margin-bottom: 80px;
    }

    .about-moments-collection-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;
    }

    .about-moments-collection-heading > p {
        max-width: 500px;
    }

    /* Two-column photo layout */

    .about-moments-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: clamp(155px, 31vw, 240px);

        gap: 11px;
    }

    /* Featured photographs remain prominent */

    .about-moments-photo-featured {
        grid-column: span 2;
        grid-row: span 2;
    }

    .about-moments-photo-wide {
        grid-column: span 2;
    }

    .about-moments-photo {
        border-radius: 12px;
    }

    .about-moments-photo-featured {
        border-radius: 18px;
    }

    /* Always show full-size indicator on touch screens */

    .about-moments-photo::after {
        right: 12px;
        bottom: 12px;

        width: 32px;
        height: 32px;

        font-size: 16px;

        opacity: 0.85;
        transform: none;
    }

}

/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 600px) {

    .about-moments {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .about-moments-intro {
        gap: 25px;
        margin-bottom: 75px;
    }

    .about-moments-title-area h2 {
        font-size: clamp(57px, 13vw, 80px);
    }

    .about-moments-lead {
        font-size: 21px;
    }

    .about-moments-description {
        font-size: 15px;
    }

    .about-moments-collection {
        margin-bottom: 85px;
    }

    .about-moments-collection-heading {
        margin-bottom: 25px;
        padding-bottom: 25px;
    }

    .about-moments-collection-index {
        font-size: 9px;
    }

    .about-moments-collection-heading h3 {
        font-size: clamp(39px, 9vw, 52px);
    }

    .about-moments-collection-heading > p {
        font-size: 13px;
    }

    .about-moments-grid {
        grid-auto-rows: clamp(135px, 33vw, 190px);

        gap: 9px;
    }

    .about-moments-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }

    .about-moments-footer-mark {
        font-size: 40px;
    }

    .about-moments-footer p {
        font-size: 21px;
        text-align: left;
    }

}

/* =========================================
   EXTRA SMALL SCREENS
========================================= */

@media (max-width: 370px) {

    .about-moments-grid {
        grid-auto-rows: 125px;
        gap: 8px;
    }

    .about-moments-photo-featured {
        border-radius: 14px;
    }

}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .about-moments-photo,
    .about-moments-photo img,
    .about-moments-photo::before,
    .about-moments-photo::after {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   AJ PERSONAL WEBSITE
   DEDICATED CAREER PAGE
========================================= */

/* =========================================
   SHARED CAREER PAGE CONTAINER
========================================= */

.career-page-container {
    position: relative;

    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}

/* =========================================
   CAREER PAGE HERO
========================================= */

.career-page-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: max(650px, calc(88svh - 94px));

    padding:
        clamp(110px, 12vw, 180px)
        var(--page-padding)
        clamp(90px, 10vw, 145px);

    overflow: hidden;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border);
}

.career-page-hero-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 83% 28%,
            rgba(48, 119, 78, 0.17),
            transparent 52%
        ),
        radial-gradient(
            ellipse at 12% 88%,
            rgba(43, 96, 64, 0.08),
            transparent 55%
        );
}

html[data-theme="light"] .career-page-hero-atmosphere {
    background:
        radial-gradient(
            ellipse at 83% 28%,
            rgba(66, 138, 89, 0.11),
            transparent 55%
        );
}

/* =========================================
   HERO EYEBROW
========================================= */

.career-page-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    margin-bottom: clamp(35px, 5vw, 65px);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;
    line-height: 1.7;

    color: var(--accent);
}

.career-page-eyebrow-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);

    box-shadow: 0 0 0 5px var(--accent-soft);
}

/* =========================================
   HERO TITLE
========================================= */

.career-page-title {
    margin: 0 0 clamp(65px, 8vw, 110px);

    font-family: var(--font-editorial);

    font-size: clamp(77px, 9.5vw, 150px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.96;

    color: var(--text-primary);

    animation: career-title-enter 900ms ease-out both;
}

.career-page-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

@keyframes career-title-enter {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   HERO BOTTOM
========================================= */

.career-page-hero-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    padding-top: 35px;

    border-top: 1px solid var(--border);
}

.career-page-hero-description {
    max-width: 665px;
}

.career-page-hero-description p {
    margin: 0;

    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.85;

    color: var(--text-secondary);
}

.career-page-hero-description .career-page-lead {
    margin-bottom: 18px;

    font-family: var(--font-heading);
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.5;

    color: var(--text-primary);
}

.career-page-hero-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 15px;

    flex-shrink: 0;
}

.career-page-meta-label {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;

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

.career-page-meta-value {
    font-family: var(--font-editorial);
    font-size: 27px;
    font-style: italic;

    color: var(--text-primary);
}

.career-page-scroll-link {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-top: 12px;

    font-size: 12px;
    font-weight: 600;

    color: var(--accent);

    transition: gap 300ms ease;
}

.career-page-scroll-link:hover {
    gap: 18px;
}

.career-page-scroll-link span {
    font-size: 18px;
}

/* =========================================
   SHARED SECTION LABELS
========================================= */

.career-page-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(75px, 8vw, 120px);
}

.career-page-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.career-page-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--accent);
}

.career-page-section-line {
    display: block;

    width: 52px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.career-page-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.career-page-section-note {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.17em;

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

/* =========================================
   CAREER OVERVIEW
========================================= */

.career-overview {
    position: relative;

    padding:
        clamp(100px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);
}

.career-overview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: start;

    gap: clamp(55px, 8vw, 125px);
}

/* =========================================
   OVERVIEW TITLE
========================================= */

.career-overview-heading h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7.5vw, 115px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.career-overview-heading h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* =========================================
   OVERVIEW DESCRIPTION
========================================= */

.career-overview-content {
    max-width: 570px;
}

.career-overview-lead {
    margin: 0 0 30px;

    font-family: var(--font-heading);

    font-size: clamp(21px, 2vw, 28px);
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.5;

    color: var(--text-primary);
}

.career-overview-content p:not(.career-overview-lead) {
    margin: 0 0 24px;

    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}

.career-overview-content p:last-child {
    margin-bottom: 0;
}

/* =========================================
   CAREER SNAPSHOT
========================================= */

.career-overview-snapshot {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

    margin-top: clamp(80px, 9vw, 135px);
    padding-top: 35px;

    border-top: 1px solid var(--border);
}

.career-snapshot-item {
    display: flex;
    flex-direction: column;

    gap: 19px;

    min-height: 155px;

    padding: 12px 15px 12px 0;
}

.career-snapshot-number {
    font-family: var(--font-editorial);

    font-size: clamp(60px, 6vw, 92px);
    font-weight: 400;

    letter-spacing: -0.06em;
    line-height: 1;

    color: var(--accent);
}

.career-snapshot-label {
    max-width: 210px;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.7;

    color: var(--text-secondary);
}

/* =========================================
   PROFESSIONAL EXPERIENCE
========================================= */

.career-experience {
    position: relative;

    padding:
        clamp(100px, 11vw, 170px)
        var(--page-padding);

    background: var(--bg-secondary);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    scroll-margin-top: 100px;
}

/* =========================================
   EXPERIENCE INTRODUCTION
========================================= */

.career-experience-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: end;

    gap: clamp(50px, 7vw, 110px);

    margin-bottom: clamp(75px, 9vw, 125px);
}

.career-experience-intro h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(70px, 8vw, 120px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 0.98;

    color: var(--text-primary);
}

.career-experience-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.career-experience-intro-content {
    max-width: 470px;
}

.career-experience-intro-content p {
    margin: 0 0 30px;

    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.85;

    color: var(--text-secondary);
}

.career-experience-hint {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--accent);
}

.career-experience-hint::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);
}

/* =========================================
   INTERACTIVE CAREER TIMELINE
========================================= */

.career-experience-timeline {
    position: relative;

    padding-left: 35px;
}

/* Continuous timeline line */

.career-experience-timeline::before {
    content: "";

    position: absolute;

    top: 35px;
    bottom: 35px;
    left: 7px;

    width: 1px;

    background: linear-gradient(
        to bottom,
        var(--accent),
        var(--border),
        var(--border)
    );
}

/* =========================================
   TIMELINE ITEMS
========================================= */

.career-experience-item {
    position: relative;

    border-bottom: 1px solid var(--border);
}

.career-experience-item:first-child {
    border-top: 1px solid var(--border);
}

.career-experience-summary {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(160px, 0.6fr)
        minmax(0, 1.4fr)
        46px;

    align-items: center;

    gap: clamp(25px, 5vw, 75px);

    padding:
        clamp(35px, 4vw, 55px)
        0;

    cursor: pointer;

    list-style: none;
}

.career-experience-summary::-webkit-details-marker {
    display: none;
}

.career-experience-summary::marker {
    content: "";
}

.career-experience-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 7px;

    border-radius: 5px;
}

/* =========================================
   TIMELINE MARKERS
========================================= */

.career-experience-marker {
    position: absolute;

    top: 50%;
    left: -35px;

    width: 15px;
    height: 15px;

    border: 2px solid var(--text-muted);
    border-radius: 50%;

    background: var(--bg-secondary);

    transform: translateY(-50%);

    transition:
        border-color 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}

.career-experience-item:hover .career-experience-marker,
.career-experience-item[open] .career-experience-marker {
    border-color: var(--accent);
    background: var(--accent);

    box-shadow: 0 0 0 6px var(--accent-soft);
}

/* =========================================
   EXPERIENCE DATES
========================================= */

.career-experience-period {
    align-self: start;

    padding-top: 9px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;
    line-height: 1.7;

    color: var(--accent);
}

/* =========================================
   COMPANY & POSITION
========================================= */

.career-experience-identity {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 9px;
}

.career-experience-company {
    font-family: var(--font-heading);

    font-size: clamp(28px, 3.5vw, 47px);
    font-weight: 650;

    letter-spacing: -0.055em;
    line-height: 1.2;

    color: var(--text-primary);

    transition: color 300ms ease;
}

.career-experience-item:hover .career-experience-company,
.career-experience-item[open] .career-experience-company {
    color: var(--accent);
}

.career-experience-role {
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-secondary);
}

.career-experience-division {
    font-size: 11px;
    font-weight: 500;

    letter-spacing: 0.035em;
    line-height: 1.6;

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

/* =========================================
   EXPAND / COLLAPSE CONTROL
========================================= */

.career-experience-expand {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 1px solid var(--border-hover);
    border-radius: 50%;

    background: var(--accent-soft);

    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        transform 300ms ease;
}

.career-experience-expand-icon {
    position: relative;

    display: block;

    width: 14px;
    height: 14px;
}

.career-experience-expand-icon::before,
.career-experience-expand-icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background: var(--accent);

    transform: translate(-50%, -50%);

    transition:
        opacity 250ms ease,
        transform 250ms ease;
}

.career-experience-expand-icon::before {
    width: 14px;
    height: 2px;
}

.career-experience-expand-icon::after {
    width: 2px;
    height: 14px;
}

.career-experience-item[open]
.career-experience-expand-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.career-experience-item[open]
.career-experience-expand {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.career-experience-summary:hover
.career-experience-expand {
    transform: rotate(90deg);
}

/* =========================================
   EXPANDED EXPERIENCE DETAILS
========================================= */

.career-experience-details {
    padding:
        0
        clamp(45px, 6vw, 90px)
        clamp(45px, 5vw, 75px)
        calc(160px * 0.75);
}

.career-experience-details-inner {
    max-width: 760px;

    padding: clamp(25px, 3vw, 42px);

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        radial-gradient(
            ellipse at 95% 0%,
            var(--accent-soft),
            transparent 55%
        ),
        var(--bg-primary);
}

/* =========================================
   DETAILS METADATA
========================================= */

.career-experience-details-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 29px;
}

.career-experience-tag {
    display: inline-flex;
    align-items: center;

    padding: 8px 13px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--accent-soft);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--accent);
}

.career-experience-location {
    font-size: 12px;
    font-weight: 500;

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

/* =========================================
   DETAILS DESCRIPTION
========================================= */

.career-experience-description {
    margin: 0 0 27px;

    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 500;

    line-height: 1.85;

    color: var(--text-primary);
}

/* =========================================
   RESPONSIBILITY LIST
========================================= */

.career-experience-list {
    display: flex;
    flex-direction: column;

    gap: 16px;

    margin: 0 0 35px;
    padding: 0;

    list-style: none;
}

.career-experience-list li {
    position: relative;

    padding-left: 22px;

    font-size: 14px;
    line-height: 1.85;

    color: var(--text-secondary);
}

.career-experience-list li::before {
    content: "";

    position: absolute;

    top: 11px;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--accent);
}

/* =========================================
   EXPERIENCE TECHNOLOGY TAGS
========================================= */

.career-experience-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 30px;
}

.career-experience-tools span {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding: 6px 11px;

    border: 1px solid var(--border);
    border-radius: 100px;

    background: var(--bg-secondary);

    font-size: 11px;
    font-weight: 600;

    color: var(--text-secondary);
}

/* =========================================
   COMPANY WEBSITE LINK
========================================= */

.career-experience-company-link {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    padding-bottom: 7px;

    border-bottom: 1px solid var(--border-hover);

    font-size: 12px;
    font-weight: 700;

    color: var(--text-primary);

    transition:
        color 300ms ease,
        border-color 300ms ease;
}

.career-experience-company-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.career-experience-company-link span {
    font-size: 18px;

    color: var(--accent);

    transition: transform 300ms ease;
}

.career-experience-company-link:hover span {
    transform: translate(3px, -3px);
}

/* =========================================
   TECHNICAL EXPERTISE
========================================= */

.career-expertise {
    position: relative;

    padding:
        clamp(100px, 11vw, 170px)
        var(--page-padding);

    background: var(--bg-primary);

    scroll-margin-top: 100px;
}

/* =========================================
   EXPERTISE INTRODUCTION
========================================= */

.career-expertise-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: end;

    gap: clamp(40px, 7vw, 110px);

    margin-bottom: clamp(65px, 8vw, 110px);
}

.career-expertise-intro h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(70px, 7.5vw, 115px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 0.98;

    color: var(--text-primary);
}

.career-expertise-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.career-expertise-intro > p {
    max-width: 460px;

    margin: 0 0 8px;

    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   EXPERTISE GRID
========================================= */

.career-expertise-grid {
    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 18px;
}

/* =========================================
   EXPERTISE CARDS
========================================= */

.career-expertise-card {
    position: relative;
    isolation: isolate;

    grid-column: span 3;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 305px;

    padding: clamp(27px, 3vw, 42px);

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 24px;

    background:
        radial-gradient(
            ellipse at 90% 10%,
            var(--accent-soft),
            transparent 65%
        ),
        var(--bg-secondary);

    transition:
        transform 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}

.career-expertise-card:hover {
    transform: translateY(-5px);

    border-color: var(--border-hover);

    box-shadow: var(--shadow);
}

/* Fifth card occupies full width */

.career-expertise-card:last-child {
    grid-column: 1 / -1;

    min-height: 240px;
}

/* =========================================
   EXPERTISE CARD NUMBER
========================================= */

.career-expertise-index {
    display: inline-block;

    margin-bottom: 50px;

    font-family: var(--font-editorial);
    font-size: 29px;
    font-style: italic;

    color: var(--accent);
}

/* =========================================
   EXPERTISE CARD HEADING
========================================= */

.career-expertise-card h3 {
    margin: 0 0 26px;

    font-family: var(--font-editorial);
    font-size: clamp(31px, 3.4vw, 48px);
    font-weight: 400;

    letter-spacing: -0.035em;
    line-height: 1.15;

    color: var(--text-primary);
}

.career-expertise-card h3 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* =========================================
   TECHNOLOGY TAGS
========================================= */

.career-expertise-tags {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: auto;
}

.career-expertise-tags span {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 7px 12px;

    border: 1px solid var(--border);
    border-radius: 100px;

    background: var(--bg-primary);

    font-size: 11px;
    font-weight: 600;

    line-height: 1.5;

    color: var(--text-secondary);

    transition:
        border-color 300ms ease,
        color 300ms ease;
}

.career-expertise-tags span:hover {
    border-color: var(--border-hover);
    color: var(--accent);
}

/* =========================================
   EDUCATION SECTION
========================================= */

.career-education {
    position: relative;

    padding:
        clamp(100px, 11vw, 165px)
        var(--page-padding);

    background: var(--bg-secondary);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* =========================================
   EDUCATION INTRODUCTION
========================================= */

.career-education-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.8fr);

    align-items: end;

    gap: 60px;

    margin-bottom: clamp(65px, 8vw, 110px);
}

.career-education-intro h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(70px, 8vw, 120px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 0.98;

    color: var(--text-primary);
}

.career-education-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.career-education-intro > p {
    max-width: 440px;

    margin: 0 0 8px;

    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   EDUCATION ENTRIES
========================================= */

.career-education-list {
    border-top: 1px solid var(--border);
}

.career-education-item {
    display: grid;

    grid-template-columns:
        minmax(170px, 0.65fr)
        minmax(0, 1.35fr);

    gap: clamp(35px, 6vw, 95px);

    padding: clamp(35px, 5vw, 65px) 0;

    border-bottom: 1px solid var(--border);
}

.career-education-period {
    padding-top: 8px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;
    line-height: 1.7;

    color: var(--accent);
}

.career-education-details {
    max-width: 700px;
}

.career-education-details h3 {
    margin: 0 0 17px;

    font-family: var(--font-heading);
    font-size: clamp(25px, 2.8vw, 39px);
    font-weight: 600;

    letter-spacing: -0.055em;
    line-height: 1.3;

    color: var(--text-primary);
}

.career-education-details p {
    margin: 0 0 12px;

    font-size: 16px;
    font-weight: 600;

    color: var(--accent);
}

.career-education-details > span {
    font-size: 13px;
    font-weight: 500;

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

/* =========================================
   EDUCATION PAGE LINK
========================================= */

.career-education-link {
    display: inline-flex;
    align-items: center;

    gap: 17px;

    margin-top: 38px;
    padding-bottom: 9px;

    border-bottom: 1px solid var(--border-hover);

    font-size: 13px;
    font-weight: 700;

    color: var(--text-primary);

    transition:
        color 300ms ease,
        border-color 300ms ease;
}

.career-education-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.career-education-link span:last-child {
    font-size: 19px;

    color: var(--accent);

    transition: transform 300ms ease;
}

.career-education-link:hover span:last-child {
    transform: translate(3px, -3px);
}

/* =========================================
   RESUME SECTION
========================================= */

.career-resume {
    position: relative;
    isolation: isolate;

    padding:
        clamp(110px, 12vw, 185px)
        var(--page-padding);

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 85% 65%,
            rgba(51, 117, 75, 0.1),
            transparent 55%
        ),
        var(--bg-primary);

    scroll-margin-top: 100px;
}

/* =========================================
   RESUME CONTENT GRID
========================================= */

.career-resume-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(50px, 8vw, 125px);
}

.career-resume-intro {
    min-width: 0;
}

.career-resume-eyebrow {
    display: block;

    margin-bottom: 30px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: var(--accent);
}

/* =========================================
   RESUME EDITORIAL HEADING
========================================= */

.career-resume-intro h2 {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.career-resume-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

/* =========================================
   RESUME INTRODUCTION TEXT
========================================= */

.career-resume-intro > p {
    max-width: 470px;

    margin: 0 0 20px;

    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   RESUME ACTION BUTTONS
========================================= */

.career-resume-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 38px;
}

.career-resume-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    min-height: 56px;

    padding: 7px 8px 7px 21px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.career-resume-button:hover {
    transform: translateY(-3px);
}

.career-resume-button span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 19px;

    transition: transform 300ms ease;
}

.career-resume-button:hover span:last-child {
    transform: translateY(2px);
}

/* Primary Download Button */

.career-resume-button-primary {
    border-color: var(--accent);

    background: var(--accent);

    color: #102019;
}

.career-resume-button-primary span:last-child {
    background: #173e2b;
    color: #e8f6e9;
}

/* Secondary PDF Button */

.career-resume-button-secondary {
    background: var(--accent-soft);

    color: var(--text-primary);
}

.career-resume-button-secondary span:last-child {
    background: var(--bg-elevated);

    color: var(--accent);
}

.career-resume-button-secondary:hover span:last-child {
    transform: translate(2px, -2px);
}

html[data-theme="light"]
.career-resume-button-primary {
    color: #ffffff;
}

html[data-theme="light"]
.career-resume-button-primary span:last-child {
    background: #ffffff;
    color: #255e44;
}

/* =========================================
   RESUME VISUAL CONTAINER
========================================= */

.career-resume-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 560px;

    padding: clamp(20px, 4vw, 55px);

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 30px;

    background:
        radial-gradient(
            ellipse at 50% 50%,
            var(--accent-soft),
            transparent 65%
        ),
        var(--bg-secondary);
}

/* Decorative Rings */

.career-resume-visual::before,
.career-resume-visual::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    border: 1px solid var(--border-hover);
    border-radius: 50%;

    pointer-events: none;
}

.career-resume-visual::before {
    width: 480px;
    height: 480px;

    transform: translate(-50%, -50%);
}

.career-resume-visual::after {
    width: 620px;
    height: 620px;

    transform: translate(-50%, -50%);
}

/* =========================================
   DECORATIVE DOCUMENT
========================================= */

.career-resume-document {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: min(100%, 360px);
    min-height: 465px;

    padding: 29px;

    border: 1px solid var(--border-hover);
    border-radius: 8px;

    background: var(--bg-primary);

    box-shadow:
        0 25px 75px rgba(0, 0, 0, 0.18),
        0 5px 15px rgba(0, 0, 0, 0.08);

    transform: rotate(-4deg);

    transition: transform 500ms ease;
}

.career-resume-visual:hover
.career-resume-document {
    transform: rotate(0deg) translateY(-8px);
}

/* =========================================
   DOCUMENT HEADER
========================================= */

.career-resume-document-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--border);
}

.career-resume-document-top span:first-child {
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 800;

    letter-spacing: -0.07em;

    color: var(--accent);
}

.career-resume-document-top span:last-child {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.13em;

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

/* =========================================
   DOCUMENT MAIN
========================================= */

.career-resume-document-main {
    padding: 35px 0;
}

.career-resume-document-label {
    display: block;

    margin-bottom: 18px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--accent);
}

.career-resume-document-main h3 {
    margin: 0 0 23px;

    font-family: var(--font-editorial);
    font-size: clamp(44px, 4vw, 60px);
    font-weight: 400;

    letter-spacing: -0.045em;
    line-height: 1.05;

    color: var(--text-primary);
}

.career-resume-document-main h3 em {
    display: block;

    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.career-resume-document-main p {
    margin: 0;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.1em;
    line-height: 1.7;

    color: var(--text-secondary);
}

/* =========================================
   DOCUMENT FOOTER
========================================= */

.career-resume-document-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-top: 20px;

    border-top: 1px solid var(--border);
}

.career-resume-document-bottom span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.13em;

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

/* =========================================
   CAREER PAGE CLOSING
========================================= */

.career-page-closing {
    position: relative;
    isolation: isolate;

    padding:
        clamp(110px, 13vw, 190px)
        var(--page-padding);

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(47, 112, 73, 0.16),
            transparent 65%
        ),
        var(--bg-secondary);

    border-top: 1px solid var(--border);

    text-align: center;
}

/* =========================================
   CLOSING CONTENT
========================================= */

.career-closing-eyebrow {
    display: block;

    margin-bottom: 35px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--accent);
}

.career-page-closing h2 {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(75px, 10vw, 150px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.98;

    color: var(--text-primary);
}

.career-page-closing h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.career-page-closing p {
    max-width: 580px;

    margin: 0 auto 40px;

    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.85;

    color: var(--text-secondary);
}

/* =========================================
   CLOSING ACTION BUTTONS
========================================= */

.career-closing-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;
}

.career-closing-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    min-height: 56px;

    padding: 7px 8px 7px 22px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

.career-closing-link:hover {
    transform: translateY(-3px);
}

.career-closing-link span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    border-radius: 50%;

    font-size: 19px;

    transition: transform 300ms ease;
}

.career-closing-link:hover span:last-child {
    transform: rotate(45deg);
}

.career-closing-link-primary {
    background: var(--accent);
    color: #102019;
}

.career-closing-link-primary span:last-child {
    background: #173e2b;
    color: #e8f6e9;
}

.career-closing-link-secondary {
    background: var(--accent-soft);
    color: var(--text-primary);
}

.career-closing-link-secondary span:last-child {
    background: var(--bg-elevated);
    color: var(--accent);
}

html[data-theme="light"]
.career-closing-link-primary {
    color: #ffffff;
}

html[data-theme="light"]
.career-closing-link-primary span:last-child {
    background: #ffffff;
    color: #255e44;
}

/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 1050px) {

    .career-overview-grid {
        gap: 50px;
    }

    .career-overview-heading h2 {
        font-size: clamp(62px, 7vw, 92px);
    }

    .career-experience-summary {
        grid-template-columns:
            minmax(135px, 0.55fr)
            minmax(0, 1.45fr)
            44px;

        gap: 25px;
    }

    .career-experience-details {
        padding-left: 0;
        padding-right: 0;
    }

    .career-resume-grid {
        gap: 45px;
    }

    .career-resume-intro h2 {
        font-size: clamp(65px, 7vw, 90px);
    }

}

/* =========================================
   SMALL TABLET RESPONSIVENESS
========================================= */

@media (max-width: 850px) {

    /* Hero */

    .career-page-hero {
        min-height: 590px;
    }

    .career-page-title {
        font-size: clamp(70px, 10vw, 110px);
    }

    /* Overview */

    .career-overview-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .career-overview-content {
        max-width: 680px;
    }

    /* Experience */

    .career-experience-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .career-experience-intro-content {
        max-width: 650px;
    }

    /* Expertise */

    .career-expertise-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .career-expertise-intro > p {
        max-width: 650px;
    }

    /* Education */

    .career-education-intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Resume */

    .career-resume-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .career-resume-intro {
        max-width: 680px;
    }

    .career-resume-visual {
        max-width: 650px;
    }

}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 700px) {

    /* Hero */

    .career-page-hero {
        min-height: 580px;

        padding-top: 100px;
        padding-bottom: 80px;
    }

    .career-page-title {
        font-size: clamp(59px, 11vw, 85px);
    }

    .career-page-hero-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 35px;
    }

    .career-page-hero-meta {
        align-items: flex-start;
    }

    /* Section labels */

    .career-page-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;

        margin-bottom: 60px;
    }

    /* Overview */

    .career-overview-snapshot {
        grid-template-columns: 1fr 1fr;

        gap: 25px;
    }

    .career-snapshot-item:last-child {
        grid-column: 1 / -1;
    }

    /* Experience timeline */

    .career-experience-timeline {
        padding-left: 28px;
    }

    .career-experience-timeline::before {
        left: 6px;
    }

    .career-experience-summary {
        grid-template-columns:
            minmax(0, 1fr)
            42px;

        gap: 20px;

        padding: 35px 0;
    }

    .career-experience-marker {
        left: -28px;

        width: 13px;
        height: 13px;
    }

    .career-experience-period {
        grid-column: 1 / -1;

        padding-top: 0;
    }

    .career-experience-identity {
        grid-column: 1;
    }

    .career-experience-company {
        font-size: clamp(29px, 6.5vw, 41px);
    }

    .career-experience-expand {
        grid-column: 2;

        width: 42px;
        height: 42px;
    }

    .career-experience-details {
        padding: 0 0 40px;
    }

    .career-experience-details-inner {
        padding: 25px 22px;

        border-radius: 18px;
    }

    /* Expertise */

    .career-expertise-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .career-expertise-card,
    .career-expertise-card:last-child {
        grid-column: 1;
        min-height: 240px;
    }

    .career-expertise-index {
        margin-bottom: 40px;
    }

    /* Education */

    .career-education-item {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    /* Resume */

    .career-resume-visual {
        min-height: 510px;
    }

}

/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 600px) {

    .career-page-eyebrow {
        font-size: 9px;
        letter-spacing: 0.13em;
    }

    .career-page-title {
        margin-bottom: 70px;

        font-size: clamp(48px, 11.5vw, 69px);
    }

    .career-page-hero-description .career-page-lead {
        font-size: 21px;
    }

    .career-page-hero-description p {
        font-size: 15px;
    }

    .career-page-meta-value {
        font-size: 23px;
    }

    /* Section labels */

    .career-page-section-number {
        font-size: 23px;
    }

    .career-page-section-line {
        width: 37px;
    }

    .career-page-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .career-page-section-note {
        font-size: 9px;
    }

    /* Main sections */

    .career-overview,
    .career-experience,
    .career-expertise,
    .career-education {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    /* Overview */

    .career-overview-heading h2 {
        font-size: clamp(58px, 13vw, 78px);
    }

    .career-overview-lead {
        font-size: 21px;
    }

    .career-overview-content p:not(.career-overview-lead) {
        font-size: 15px;
    }

    .career-overview-snapshot {
        margin-top: 75px;
    }

    .career-snapshot-number {
        font-size: 66px;
    }

    .career-snapshot-label {
        font-size: 12px;
    }

    /* Experience */

    .career-experience-intro h2 {
        font-size: clamp(60px, 13vw, 83px);
    }

    .career-experience-intro-content p {
        font-size: 15px;
    }

    .career-experience-period {
        font-size: 10px;
    }

    .career-experience-role {
        font-size: 14px;
    }

    .career-experience-division {
        font-size: 10px;
    }

    .career-experience-description {
        font-size: 15px;
    }

    .career-experience-list li {
        font-size: 13px;
    }

    /* Expertise */

    .career-expertise-intro h2 {
        font-size: clamp(59px, 13vw, 82px);
    }

    .career-expertise-intro > p {
        font-size: 15px;
    }

    .career-expertise-card {
        padding: 28px 24px;
    }

    .career-expertise-card h3 {
        font-size: 36px;
    }

    .career-expertise-tags span {
        font-size: 10px;
    }

    /* Education */

    .career-education-intro h2 {
        font-size: clamp(62px, 13vw, 85px);
    }

    .career-education-intro > p {
        font-size: 15px;
    }

    .career-education-period {
        font-size: 10px;
    }

    .career-education-details h3 {
        font-size: 27px;
    }

    /* Resume */

    .career-resume {
        padding-top: 95px;
        padding-bottom: 110px;
    }

    .career-resume-intro h2 {
        font-size: clamp(58px, 13vw, 80px);
    }

    .career-resume-intro > p {
        font-size: 15px;
    }

    .career-resume-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .career-resume-visual {
        min-height: 465px;

        padding: 25px;

        border-radius: 23px;
    }

    .career-resume-document {
        min-height: 400px;

        padding: 23px;
    }

    /* Closing */

    .career-page-closing {
        padding-top: 110px;
        padding-bottom: 120px;
    }

    .career-page-closing h2 {
        font-size: clamp(65px, 15vw, 100px);
    }

    .career-page-closing p {
        font-size: 15px;
    }

}

/* =========================================
   EXTRA SMALL SCREENS
========================================= */

@media (max-width: 370px) {

    .career-page-title {
        font-size: 42px;
    }

    .career-experience-timeline {
        padding-left: 23px;
    }

    .career-experience-marker {
        left: -23px;
    }

    .career-experience-details-inner {
        padding: 23px 18px;
    }

    .career-experience-company {
        font-size: 27px;
    }

    .career-expertise-card {
        padding: 25px 20px;
    }

    .career-resume-document-main h3 {
        font-size: 43px;
    }

}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .career-page-title {
        animation: none;
    }

    .career-experience-marker,
    .career-experience-company,
    .career-experience-expand,
    .career-experience-expand-icon,
    .career-expertise-card,
    .career-expertise-tags span,
    .career-resume-button,
    .career-resume-document,
    .career-closing-link {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   AJ PERSONAL WEBSITE
   DEDICATED VENTURES PAGE
========================================= */


/* =========================================
   SHARED VENTURES PAGE CONTAINER
========================================= */

.ventures-page-container {
    position: relative;

    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}


/* =========================================
   VENTURES PAGE HERO
========================================= */

.ventures-page-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: max(650px, calc(88svh - 94px));

    padding:
        clamp(110px, 12vw, 180px)
        var(--page-padding)
        clamp(90px, 10vw, 145px);

    overflow: hidden;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border);
}

.ventures-page-hero-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 85% 28%,
            rgba(49, 116, 74, 0.18),
            transparent 53%
        ),
        radial-gradient(
            ellipse at 10% 85%,
            rgba(39, 90, 59, 0.09),
            transparent 55%
        );
}

html[data-theme="light"]
.ventures-page-hero-atmosphere {
    background:
        radial-gradient(
            ellipse at 85% 28%,
            rgba(70, 142, 93, 0.11),
            transparent 55%
        );
}


/* =========================================
   HERO EYEBROW
========================================= */

.ventures-page-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    margin-bottom: clamp(35px, 5vw, 65px);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.18em;
    line-height: 1.7;

    color: var(--accent);
}

.ventures-page-eyebrow-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);

    box-shadow: 0 0 0 5px var(--accent-soft);
}


/* =========================================
   HERO TITLE
========================================= */

.ventures-page-title {
    margin: 0 0 clamp(65px, 8vw, 110px);

    font-family: var(--font-editorial);
    font-size: clamp(85px, 10vw, 155px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.95;

    color: var(--text-primary);

    animation: ventures-title-enter 900ms ease-out both;
}

.ventures-page-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

@keyframes ventures-title-enter {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   HERO BOTTOM
========================================= */

.ventures-page-hero-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 65px;

    padding-top: 35px;

    border-top: 1px solid var(--border);
}

.ventures-page-hero-intro {
    max-width: 630px;
}

.ventures-page-hero-intro p {
    margin: 0 0 18px;

    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.85;

    color: var(--text-secondary);
}

.ventures-page-hero-intro p:last-child {
    margin-bottom: 0;
}

.ventures-page-hero-lead {
    font-family: var(--font-heading);

    font-size: clamp(21px, 2vw, 28px) !important;
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.5 !important;

    color: var(--text-primary) !important;
}


/* =========================================
   HERO VENTURE COUNT
========================================= */

.ventures-page-hero-stat {
    display: flex;
    align-items: flex-end;

    gap: 17px;

    flex-shrink: 0;
}

.ventures-page-stat-number {
    font-family: var(--font-editorial);
    font-size: clamp(95px, 10vw, 145px);
    font-weight: 400;

    letter-spacing: -0.08em;
    line-height: 0.8;

    color: var(--text-primary);
}

.ventures-page-stat-number span {
    color: var(--accent);
}

.ventures-page-stat-label {
    padding-bottom: 5px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.14em;
    line-height: 1.9;

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


/* =========================================
   SHARED SECTION LABELS
========================================= */

.ventures-page-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(75px, 8vw, 120px);
}

.ventures-page-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.ventures-page-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--accent);
}

.ventures-page-section-line {
    display: block;

    width: 52px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.ventures-page-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.ventures-page-section-note {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.17em;

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


/* =========================================
   VENTURES INTRODUCTION
========================================= */

.ventures-page-intro {
    padding:
        clamp(100px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);
}

.ventures-page-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: start;

    gap: clamp(55px, 8vw, 125px);
}

.ventures-page-intro-grid h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7.2vw, 112px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.ventures-page-intro-grid h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.ventures-page-intro-content {
    max-width: 560px;
}

.ventures-page-intro-content p {
    margin: 0 0 24px;

    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}

.ventures-page-intro-content p:last-child {
    margin-bottom: 0;
}

.ventures-page-intro-content
.ventures-page-intro-lead {
    margin-bottom: 30px;

    font-family: var(--font-heading);
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.5;

    color: var(--text-primary);
}


/* =========================================
   VENTURE DIRECTORY
========================================= */

.ventures-page-directory {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 15px;

    margin-top: clamp(75px, 9vw, 130px);
}

.ventures-page-directory a {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 190px;

    padding: 27px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            var(--accent-soft),
            transparent 70%
        ),
        var(--bg-secondary);

    transition:
        transform 350ms ease,
        border-color 350ms ease,
        background-color 350ms ease;
}

.ventures-page-directory a:hover {
    transform: translateY(-5px);

    border-color: var(--accent);
}

.ventures-directory-number {
    display: block;

    margin-bottom: auto;

    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    color: var(--accent);
}

.ventures-directory-name {
    display: block;

    margin-top: 32px;

    font-family: var(--font-heading);
    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: 650;

    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.ventures-directory-arrow {
    align-self: flex-end;

    margin-top: 15px;

    font-size: 24px;

    color: var(--accent);

    transition: transform 300ms ease;
}

.ventures-page-directory a:hover
.ventures-directory-arrow {
    transform: translateY(5px);
}


/* =========================================
   SHARED VENTURE FEATURE SECTIONS
========================================= */

.ventures-feature {
    position: relative;
    isolation: isolate;

    padding:
        clamp(100px, 11vw, 165px)
        var(--page-padding);

    border-top: 1px solid var(--border);

    scroll-margin-top: 90px;
}

.ventures-feature-capstone {
    --venture-accent: var(--accent);
    --venture-highlight-bg: var(--accent-soft);

    background: var(--bg-secondary);
}

.ventures-feature-cardan {
    --venture-accent: #8abfe7;
    --venture-highlight-bg: rgba(73, 139, 190, 0.08);

    background: var(--bg-primary);
}

.ventures-feature-dbp {
    --venture-accent: #e4b978;
    --venture-highlight-bg: rgba(190, 133, 55, 0.09);

    background: var(--bg-secondary);
}

/* Branded accents with sufficient light-mode contrast */

html[data-theme="light"]
.ventures-feature-cardan {
    --venture-accent: #28689a;
}

html[data-theme="light"]
.ventures-feature-dbp {
    --venture-accent: #a46a25;
}


/* =========================================
   FEATURE HEADERS
========================================= */

.ventures-feature-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: clamp(65px, 8vw, 115px);
    padding-bottom: 28px;

    border-bottom: 1px solid var(--border);
}

.ventures-feature-identifier {
    display: inline-flex;
    align-items: center;

    gap: 18px;
}

.ventures-feature-number {
    font-family: var(--font-editorial);
    font-size: 27px;
    font-style: italic;

    line-height: 1;

    color: var(--venture-accent);
}

.ventures-feature-divider {
    width: 45px;
    height: 1px;

    background: var(--border-hover);
}

.ventures-feature-category {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;
    line-height: 1.7;

    color: var(--text-secondary);
}

.ventures-feature-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 10px 14px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--venture-highlight-bg);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--venture-accent);
}


/* =========================================
   FEATURE CONTENT GRID
========================================= */

.ventures-feature-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items: stretch;

    gap: clamp(40px, 7vw, 110px);
}

.ventures-feature-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
}

.ventures-feature-eyebrow {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;
    line-height: 1.7;

    color: var(--venture-accent);
}


/* =========================================
   FEATURE TITLES
========================================= */

.ventures-feature-title {
    max-width: 100%;

    margin: 0 0 25px;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 6.8vw, 108px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 0.99;

    color: var(--text-primary);
}

.ventures-feature-title em {
    display: block;

    font-weight: 400;
    font-style: italic;

    color: var(--venture-accent);
}

.ventures-feature-title-dot {
    color: var(--venture-accent);
}

/* Preserve "Break Prod." on the same line */

.ventures-feature-dbp
.ventures-feature-title em {
    display: inline;
}


/* =========================================
   ROLE & DESCRIPTION
========================================= */

.ventures-feature-role {
    display: inline-flex;
    align-items: center;

    margin: 0 0 38px;
    padding: 9px 15px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--venture-highlight-bg);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.5;

    color: var(--venture-accent);
}

.ventures-feature-lead {
    max-width: 545px;

    margin: 0 0 24px;

    font-family: var(--font-heading);
    font-size: clamp(23px, 2.3vw, 31px);
    font-weight: 500;

    letter-spacing: -0.045em;
    line-height: 1.45;

    color: var(--text-primary);
}

.ventures-feature-description {
    max-width: 560px;

    margin: 0 0 20px;

    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================
   PROJECT HIGHLIGHTS
========================================= */

.ventures-feature-highlight {
    width: 100%;

    margin-top: 25px;
    padding: clamp(24px, 3vw, 35px);

    border: 1px solid var(--border);
    border-left: 3px solid var(--venture-accent);
    border-radius: 17px;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            var(--venture-highlight-bg),
            transparent 70%
        ),
        var(--bg-primary);
}

.ventures-feature-cardan
.ventures-feature-highlight {
    background: var(--bg-secondary);
}

.ventures-highlight-label {
    display: block;

    margin-bottom: 20px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--venture-accent);
}

.ventures-feature-highlight h3 {
    margin: 0 0 16px;

    font-family: var(--font-editorial);
    font-size: clamp(31px, 3vw, 43px);
    font-weight: 400;

    letter-spacing: -0.035em;
    line-height: 1.2;

    color: var(--text-primary);
}

.ventures-feature-highlight > p {
    margin: 0;

    font-size: 14px;
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================
   DON'T BREAK PROD FEATURE TAGS
========================================= */

.ventures-dbp-features {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;
}

.ventures-dbp-features span {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding: 7px 12px;

    border: 1px solid var(--border);
    border-radius: 100px;

    background: var(--bg-secondary);

    font-size: 11px;
    font-weight: 600;

    color: var(--text-secondary);
}


/* =========================================
   FEATURE ACTION BUTTONS
========================================= */

.ventures-feature-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    width: 100%;

    margin-top: 35px;
}

.ventures-feature-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    min-height: 56px;

    padding: 7px 8px 7px 20px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease;
}

.ventures-feature-button:hover {
    transform: translateY(-3px);
}

.ventures-feature-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 19px;

    transition: transform 300ms ease;
}

.ventures-feature-button:hover
.ventures-feature-button-arrow {
    transform: rotate(45deg);
}

/* Primary feature button */

.ventures-feature-button-primary {
    border-color: var(--venture-accent);

    background: var(--venture-accent);

    color: #132019;
}

.ventures-feature-button-primary
.ventures-feature-button-arrow {
    background: rgba(12, 32, 24, 0.85);

    color: #ffffff;
}

/* Secondary feature button */

.ventures-feature-button-secondary {
    background: var(--venture-highlight-bg);

    color: var(--text-primary);
}

.ventures-feature-button-secondary
.ventures-feature-button-arrow {
    background: var(--bg-elevated);

    color: var(--venture-accent);
}

/* Light-mode button adjustments */

html[data-theme="light"]
.ventures-feature-button-primary {
    color: #ffffff;
}

html[data-theme="light"]
.ventures-feature-button-primary
.ventures-feature-button-arrow {
    background: #ffffff;

    color: #214c35;
}

html[data-theme="light"]
.ventures-feature-cardan
.ventures-feature-button-primary
.ventures-feature-button-arrow {
    color: #28689a;
}

html[data-theme="light"]
.ventures-feature-dbp
.ventures-feature-button-primary
.ventures-feature-button-arrow {
    color: #a46a25;
}


/* =========================================
   SHARED VENTURE VISUALS
========================================= */

.ventures-feature-visual {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;
    min-height: 680px;

    padding: clamp(25px, 3vw, 40px);

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;

    color: #f5f8f4;

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.13);
}

.ventures-visual-top,
.ventures-visual-bottom {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.ventures-visual-top span,
.ventures-visual-bottom span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.67);
}

.ventures-visual-bottom {
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);
}


/* =========================================
   CAPSTONE VISUAL
========================================= */

.ventures-capstone-visual {
    background:
        radial-gradient(
            ellipse at 50% 43%,
            rgba(65, 155, 94, 0.22),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #102d1d,
            #102118 65%,
            #172e21
        );
}

.capstone-visual-composition {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.capstone-visual-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 1px solid rgba(145, 221, 162, 0.25);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.capstone-visual-ring-outer {
    width: 410px;
    height: 410px;

    border-style: dashed;

    animation: capstone-ring-rotate 55s linear infinite;
}

.capstone-visual-ring-middle {
    width: 300px;
    height: 300px;

    border-width: 2px;

    box-shadow:
        0 0 0 28px rgba(127, 206, 144, 0.025),
        0 0 75px rgba(81, 164, 98, 0.08);
}

.capstone-visual-ring-inner {
    width: 205px;
    height: 205px;

    border-color: rgba(145, 221, 162, 0.35);

    background:
        radial-gradient(
            circle,
            rgba(98, 174, 115, 0.12),
            transparent 75%
        );
}

.capstone-visual-core {
    position: relative;
    z-index: 2;

    font-family: var(--font-editorial);
    font-size: clamp(105px, 12vw, 170px);
    font-style: italic;

    letter-spacing: -0.06em;

    color: #b5e4bf;

    text-shadow:
        0 0 55px rgba(107, 189, 128, 0.2);
}

.capstone-visual-orbit-dot {
    position: absolute;

    top: calc(50% - 150px);
    left: calc(50% + 5px);

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #b4edbe;

    box-shadow:
        0 0 0 7px rgba(180, 237, 190, 0.1),
        0 0 30px rgba(180, 237, 190, 0.4);
}

@keyframes capstone-ring-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* =========================================
   CARDAN VISUAL
========================================= */

.ventures-cardan-visual {
    background:
        radial-gradient(
            ellipse at 55% 45%,
            rgba(47, 119, 184, 0.23),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #0e253b,
            #0b1c30 70%,
            #172c44
        );
}

.cardan-visual-composition {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.cardan-visual-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 1px solid rgba(143, 202, 245, 0.28);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.cardan-visual-orbit-outer {
    width: 420px;
    height: 420px;

    border-style: dashed;

    animation: cardan-orbit-rotate 65s linear infinite;
}

.cardan-visual-orbit-inner {
    width: 285px;
    height: 285px;

    border-width: 2px;

    box-shadow:
        0 0 0 32px rgba(143, 202, 245, 0.025),
        0 0 80px rgba(81, 148, 209, 0.11);
}

.cardan-visual-symbol {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 210px;
    height: 210px;

    border: 1px solid rgba(143, 202, 245, 0.2);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(68, 149, 215, 0.22),
            rgba(15, 44, 71, 0.38) 70%
        );

    font-family: var(--font-heading);
    font-size: clamp(105px, 12vw, 155px);
    font-weight: 800;

    letter-spacing: -0.09em;

    color: #bedff8;

    text-shadow:
        0 0 45px rgba(119, 191, 241, 0.25);
}

.cardan-visual-point {
    position: absolute;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #abd8f8;

    box-shadow:
        0 0 0 7px rgba(143, 202, 245, 0.08),
        0 0 25px rgba(143, 202, 245, 0.35);
}

.cardan-visual-point-one {
    top: calc(50% - 143px);
    left: calc(50% - 5px);
}

.cardan-visual-point-two {
    top: calc(50% + 130px);
    left: calc(50% + 65px);

    width: 8px;
    height: 8px;
}

@keyframes cardan-orbit-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}


/* =========================================
   DON'T BREAK PROD VISUAL
========================================= */

.ventures-dbp-visual {
    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(188, 127, 48, 0.12),
            transparent 60%
        ),
        linear-gradient(
            145deg,
            #20251f,
            #141a17 70%,
            #25251d
        );
}

.dbp-visual-composition {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px;

    pointer-events: none;
}


/* =========================================
   ENGINEERING GRID
========================================= */

.dbp-visual-grid {
    position: absolute;
    inset: 0;

    z-index: 0;

    opacity: 0.3;

    background-image:
        linear-gradient(
            rgba(225, 171, 95, 0.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(225, 171, 95, 0.09) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image: radial-gradient(
        circle at center,
        black,
        transparent 80%
    );
}


/* =========================================
   DON'T BREAK PROD TERMINAL
========================================= */

.dbp-visual-terminal {
    position: relative;
    z-index: 2;

    width: min(100%, 400px);

    overflow: hidden;

    border: 1px solid rgba(232, 186, 111, 0.28);
    border-radius: 15px;

    background: #121815;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.35),
        0 0 60px rgba(198, 141, 62, 0.06);

    transform: rotate(-3deg);

    transition: transform 500ms ease;
}

.ventures-dbp-visual:hover
.dbp-visual-terminal {
    transform: rotate(0deg) translateY(-5px);
}


/* =========================================
   TERMINAL HEADER
========================================= */

.dbp-terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 53px;

    padding: 14px 16px;

    border-bottom: 1px solid rgba(232, 186, 111, 0.14);

    background: #1c241f;
}

.dbp-terminal-header > span:last-child {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.11em;
    line-height: 1.5;

    text-align: right;

    color: rgba(235, 216, 184, 0.65);
}

.dbp-terminal-dots {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    flex-shrink: 0;
}

.dbp-terminal-dots i {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: rgba(235, 216, 184, 0.35);
}

.dbp-terminal-dots i:first-child {
    background: #d66a62;
}

.dbp-terminal-dots i:nth-child(2) {
    background: #ddae64;
}

.dbp-terminal-dots i:nth-child(3) {
    background: #7ab58a;
}


/* =========================================
   TERMINAL CONTENT
========================================= */

.dbp-terminal-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 24px;

    min-height: 210px;

    padding: clamp(25px, 4vw, 38px);
}

.dbp-terminal-prompt {
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.08em;
    line-height: 1.6;

    color: #e5b878;
}

.dbp-terminal-rule {
    width: 100%;
    height: 1px;

    background: linear-gradient(
        to right,
        rgba(229, 184, 120, 0.45),
        transparent
    );
}

.dbp-terminal-text {
    font-family: monospace;
    font-size: clamp(14px, 1.7vw, 20px);
    font-weight: 700;

    letter-spacing: 0.03em;
    line-height: 1.5;

    color: #e7dfcc;
}

.dbp-terminal-cursor {
    width: 10px;
    height: 19px;

    background: #e5b878;

    animation: dbp-cursor-blink 1.2s steps(1) infinite;
}

@keyframes dbp-cursor-blink {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0.2;
    }
}


/* =========================================
   VENTURES PAGE CLOSING
========================================= */

.ventures-page-closing {
    position: relative;
    isolation: isolate;

    padding:
        clamp(110px, 13vw, 190px)
        var(--page-padding);

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(47, 112, 73, 0.16),
            transparent 65%
        ),
        var(--bg-primary);

    border-top: 1px solid var(--border);

    text-align: center;
}

.ventures-closing-eyebrow {
    display: block;

    margin-bottom: 35px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--accent);
}

.ventures-page-closing h2 {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(80px, 10vw, 150px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.98;

    color: var(--text-primary);
}

.ventures-page-closing h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.ventures-page-closing p {
    max-width: 580px;

    margin: 0 auto 40px;

    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================
   CLOSING ACTION BUTTONS
========================================= */

.ventures-closing-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;
}

.ventures-closing-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    min-height: 56px;

    padding: 7px 8px 7px 22px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

.ventures-closing-link:hover {
    transform: translateY(-3px);
}

.ventures-closing-link span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    border-radius: 50%;

    font-size: 19px;

    transition: transform 300ms ease;
}

.ventures-closing-link:hover span:last-child {
    transform: rotate(45deg);
}

.ventures-closing-link-primary {
    background: var(--accent);
    color: #102019;
}

.ventures-closing-link-primary span:last-child {
    background: #173e2b;
    color: #e8f6e9;
}

.ventures-closing-link-secondary {
    background: var(--accent-soft);
    color: var(--text-primary);
}

.ventures-closing-link-secondary span:last-child {
    background: var(--bg-elevated);
    color: var(--accent);
}

html[data-theme="light"]
.ventures-closing-link-primary {
    color: #ffffff;
}

html[data-theme="light"]
.ventures-closing-link-primary span:last-child {
    background: #ffffff;
    color: #255e44;
}


/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 1100px) {

    .ventures-page-intro-grid {
        gap: 50px;
    }

    .ventures-page-intro-grid h2 {
        font-size: clamp(60px, 7vw, 95px);
    }

    .ventures-feature-grid {
        gap: 40px;
    }

    .ventures-feature-title {
        font-size: clamp(56px, 6vw, 83px);
    }

    .ventures-feature-visual {
        min-height: 620px;
    }

    .capstone-visual-ring-outer,
    .cardan-visual-orbit-outer {
        width: 350px;
        height: 350px;
    }

}


/* =========================================
   SMALL TABLET RESPONSIVENESS
========================================= */

@media (max-width: 850px) {

    /* Hero */

    .ventures-page-hero {
        min-height: 590px;
    }

    .ventures-page-title {
        font-size: clamp(75px, 10vw, 110px);
    }

    /* Introduction */

    .ventures-page-intro-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .ventures-page-intro-content {
        max-width: 680px;
    }

    .ventures-page-directory {
        gap: 12px;
    }

    .ventures-page-directory a {
        padding: 22px;
    }

    /* Feature layouts */

    .ventures-feature-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .ventures-feature-content {
        max-width: 720px;
    }

    .ventures-feature-title {
        font-size: clamp(75px, 10vw, 110px);
    }

    .ventures-feature-visual {
        min-height: 530px;
    }

}


/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 700px) {

    /* Hero */

    .ventures-page-hero {
        min-height: 580px;

        padding-top: 100px;
        padding-bottom: 80px;
    }

    .ventures-page-title {
        font-size: clamp(70px, 12vw, 95px);
    }

    .ventures-page-hero-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 40px;
    }

    .ventures-page-hero-stat {
        align-items: center;
    }

    .ventures-page-stat-number {
        font-size: 95px;
    }

    /* Section labels */

    .ventures-page-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;

        margin-bottom: 60px;
    }

    /* Directory */

    .ventures-page-directory {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .ventures-page-directory a {
        flex-direction: row;
        align-items: center;

        min-height: 90px;

        gap: 20px;

        padding: 22px;
    }

    .ventures-directory-number {
        margin: 0;
    }

    .ventures-directory-name {
        margin: 0;
    }

    .ventures-directory-arrow {
        margin: 0 0 0 auto;
    }

    /* Feature header */

    .ventures-feature-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;

        margin-bottom: 65px;
    }

    .ventures-feature-title {
        font-size: clamp(65px, 11vw, 90px);
    }

    /* Visuals */

    .ventures-feature-visual {
        min-height: 460px;
    }

    .capstone-visual-ring-outer,
    .cardan-visual-orbit-outer {
        width: 330px;
        height: 330px;
    }

    .capstone-visual-ring-middle,
    .cardan-visual-orbit-inner {
        width: 245px;
        height: 245px;
    }

    .capstone-visual-ring-inner,
    .cardan-visual-symbol {
        width: 170px;
        height: 170px;
    }

    .capstone-visual-core,
    .cardan-visual-symbol {
        font-size: 115px;
    }

}


/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 600px) {

    .ventures-page-eyebrow {
        font-size: 9px;
        letter-spacing: 0.13em;
    }

    .ventures-page-title {
        margin-bottom: 65px;

        font-size: clamp(62px, 14vw, 82px);
    }

    .ventures-page-hero-intro p {
        font-size: 15px;
    }

    .ventures-page-hero-lead {
        font-size: 21px !important;
    }

    /* Section labels */

    .ventures-page-section-number {
        font-size: 23px;
    }

    .ventures-page-section-line {
        width: 37px;
    }

    .ventures-page-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .ventures-page-section-note {
        font-size: 9px;
    }

    /* Main sections */

    .ventures-page-intro,
    .ventures-feature {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .ventures-page-intro-grid h2 {
        font-size: clamp(56px, 12vw, 77px);
    }

    .ventures-page-intro-lead {
        font-size: 21px !important;
    }

    .ventures-page-intro-content p {
        font-size: 15px;
    }

    /* Directory */

    .ventures-page-directory {
        margin-top: 70px;
    }

    .ventures-directory-name {
        font-size: 16px;
    }

    /* Feature header */

    .ventures-feature-identifier {
        gap: 11px;
    }

    .ventures-feature-number {
        font-size: 23px;
    }

    .ventures-feature-divider {
        width: 28px;
    }

    .ventures-feature-category {
        font-size: 9px;
        letter-spacing: 0.11em;
    }

    .ventures-feature-status {
        font-size: 9px;
    }

    /* Feature content */

    .ventures-feature-grid {
        gap: 45px;
    }

    .ventures-feature-eyebrow {
        font-size: 9px;
    }

    .ventures-feature-title {
        font-size: clamp(54px, 11vw, 73px);
    }

    .ventures-feature-role {
        font-size: 10px;

        margin-bottom: 30px;
    }

    .ventures-feature-lead {
        font-size: 24px;
    }

    .ventures-feature-description {
        font-size: 15px;
    }

    .ventures-feature-highlight {
        padding: 24px 21px;
    }

    .ventures-feature-highlight h3 {
        font-size: 32px;
    }

    .ventures-feature-highlight > p {
        font-size: 13px;
    }

    /* Feature buttons */

    .ventures-feature-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .ventures-feature-button {
        min-height: 54px;
    }

    /* Venture visuals */

    .ventures-feature-visual {
        min-height: 410px;

        padding: 24px;

        border-radius: 22px;
    }

    .ventures-visual-top span,
    .ventures-visual-bottom span {
        font-size: 8px;
    }

    .capstone-visual-ring-outer,
    .cardan-visual-orbit-outer {
        width: 270px;
        height: 270px;
    }

    .capstone-visual-ring-middle,
    .cardan-visual-orbit-inner {
        width: 210px;
        height: 210px;
    }

    .capstone-visual-ring-inner,
    .cardan-visual-symbol {
        width: 145px;
        height: 145px;
    }

    .capstone-visual-core,
    .cardan-visual-symbol {
        font-size: 100px;
    }

    .capstone-visual-orbit-dot {
        top: calc(50% - 105px);
    }

    .cardan-visual-point-one {
        top: calc(50% - 105px);
    }

    .cardan-visual-point-two {
        top: calc(50% + 95px);
        left: calc(50% + 40px);
    }

    /* Terminal */

    .dbp-visual-composition {
        padding: 18px;
    }

    .dbp-terminal-content {
        min-height: 190px;

        padding: 25px 20px;
    }

    .dbp-terminal-prompt {
        font-size: 10px;
    }

    .dbp-terminal-text {
        font-size: 14px;
    }

    /* Closing */

    .ventures-page-closing {
        padding-top: 110px;
        padding-bottom: 120px;
    }

    .ventures-page-closing h2 {
        font-size: clamp(73px, 16vw, 110px);
    }

    .ventures-page-closing p {
        font-size: 15px;
    }

}


/* =========================================
   EXTRA SMALL SCREENS
========================================= */

@media (max-width: 370px) {

    .ventures-page-title {
        font-size: 55px;
    }

    .ventures-feature-title {
        font-size: 48px;
    }

    .ventures-feature-visual {
        min-height: 370px;
    }

    .ventures-feature-actions {
        width: 100%;
    }

    .ventures-feature-button {
        max-width: 100%;
    }

    .ventures-directory-name {
        font-size: 14px;
    }

}


/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ventures-page-title {
        animation: none;
    }

    .capstone-visual-ring-outer,
    .cardan-visual-orbit-outer,
    .dbp-terminal-cursor {
        animation: none;
    }

    .ventures-page-directory a,
    .ventures-directory-arrow,
    .ventures-feature-button,
    .ventures-feature-button-arrow,
    .dbp-visual-terminal,
    .ventures-closing-link,
    .ventures-closing-link span {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   CAPSTONE INNOVATIONS
   DEDICATED VENTURE PAGE
========================================= */


/* =========================================
   SHARED CONTAINER
========================================= */

.capstone-page-container {
    position: relative;

    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}


/* =========================================
   CAPSTONE HERO
========================================= */

.capstone-page-hero {
    position: relative;
    isolation: isolate;

    min-height: 820px;

    padding:
        clamp(125px, 12vw, 185px)
        var(--page-padding)
        clamp(100px, 10vw, 150px);

    overflow: hidden;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border);
}

.capstone-page-hero-glow {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 85% 35%,
            rgba(48, 125, 76, 0.13),
            transparent 58%
        );
}


/* =========================================
   BREADCRUMB
========================================= */

.capstone-page-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: clamp(70px, 8vw, 115px);

    font-size: 12px;
    font-weight: 600;

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

.capstone-page-breadcrumb a {
    color: var(--text-secondary);

    transition: color 250ms ease;
}

.capstone-page-breadcrumb a:hover {
    color: var(--accent);
}

.capstone-page-breadcrumb
span[aria-current="page"] {
    color: var(--accent);
}


/* =========================================
   HERO GRID
========================================= */

.capstone-page-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items: center;

    gap: clamp(45px, 7vw, 115px);
}

.capstone-page-hero-content {
    min-width: 0;
}


/* =========================================
   HERO EYEBROW
========================================= */

.capstone-page-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 35px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.14em;
    line-height: 1.7;

    color: var(--accent);
}

.capstone-page-eyebrow-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);

    box-shadow: 0 0 0 5px var(--accent-soft);
}

.capstone-page-eyebrow-divider {
    color: var(--text-muted);
}


/* =========================================
   HERO TYPOGRAPHY
========================================= */

.capstone-page-title {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(64px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.98;

    color: var(--text-primary);

    animation: capstone-title-enter 850ms ease-out both;
}

.capstone-page-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

@keyframes capstone-title-enter {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.capstone-page-hero-lead {
    max-width: 550px;

    margin: 0 0 22px;

    font-family: var(--font-heading);
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 500;

    letter-spacing: -0.045em;
    line-height: 1.45;

    color: var(--text-primary);
}

.capstone-page-hero-description {
    max-width: 520px;

    margin: 0;

    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================
   SHARED CAPSTONE BUTTONS
========================================= */

.capstone-page-hero-actions,
.capstone-page-closing-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}

.capstone-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 56px;

    padding: 7px 8px 7px 21px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease;
}

.capstone-page-button:hover {
    transform: translateY(-3px);
}

.capstone-page-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 19px;

    transition: transform 300ms ease;
}

.capstone-page-button:hover
.capstone-page-button-arrow {
    transform: rotate(45deg);
}

.capstone-page-button-primary {
    border-color: var(--accent);

    background: var(--accent);

    color: #102019;
}

.capstone-page-button-primary
.capstone-page-button-arrow {
    background: #173c2a;

    color: #ffffff;
}

.capstone-page-button-secondary {
    background: var(--accent-soft);

    color: var(--text-primary);
}

.capstone-page-button-secondary
.capstone-page-button-arrow {
    background: var(--bg-elevated);

    color: var(--accent);
}

html[data-theme="light"]
.capstone-page-button-primary {
    color: #ffffff;
}

html[data-theme="light"]
.capstone-page-button-primary
.capstone-page-button-arrow {
    background: #ffffff;

    color: #255e44;
}


/* =========================================
   HERO BRAND VISUAL
========================================= */

.capstone-page-hero-visual {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;
    min-height: 590px;

    padding: 32px;

    overflow: hidden;

    border: 1px solid rgba(180, 229, 192, 0.15);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(77, 173, 101, 0.18),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #112d1d,
            #0c2016 65%,
            #1b3b27
        );

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.13);

    color: #ffffff;
}

.capstone-page-visual-header,
.capstone-page-visual-footer {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.capstone-page-visual-header span,
.capstone-page-visual-footer span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;
    line-height: 1.7;

    color: rgba(233, 247, 235, 0.7);
}

.capstone-page-visual-footer {
    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);
}


/* =========================================
   HERO BRAND COMPOSITION
========================================= */

.capstone-page-brand-composition {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.capstone-page-brand-grid {
    position: absolute;
    inset: 0;

    opacity: 0.35;

    background-image:
        linear-gradient(
            rgba(184, 231, 193, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(184, 231, 193, 0.06) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    mask-image: radial-gradient(
        circle at center,
        black,
        transparent 78%
    );
}

.capstone-page-brand-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 1px solid rgba(165, 226, 179, 0.27);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.capstone-page-brand-ring-one {
    width: 390px;
    height: 390px;

    border-style: dashed;

    animation: capstone-page-ring-spin 55s linear infinite;
}

.capstone-page-brand-ring-two {
    width: 290px;
    height: 290px;

    border-width: 2px;

    box-shadow:
        0 0 0 28px rgba(165, 226, 179, 0.025),
        0 0 75px rgba(70, 159, 94, 0.1);
}

.capstone-page-brand-ring-three {
    width: 195px;
    height: 195px;

    border-color: rgba(165, 226, 179, 0.4);

    background: rgba(96, 182, 117, 0.06);
}

.capstone-page-brand-core {
    position: relative;
    z-index: 2;

    font-family: var(--font-editorial);
    font-size: 160px;
    font-style: italic;

    letter-spacing: -0.08em;

    color: #b9eac3;

    text-shadow: 0 0 65px rgba(113, 203, 135, 0.2);
}

.capstone-page-brand-point {
    position: absolute;

    top: calc(50% - 145px);
    left: calc(50% + 1px);

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #c6f5cd;

    box-shadow:
        0 0 0 7px rgba(198, 245, 205, 0.1),
        0 0 30px rgba(198, 245, 205, 0.4);
}

@keyframes capstone-page-ring-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* =========================================
   COMPANY SNAPSHOT
========================================= */

.capstone-page-snapshot {
    padding: 0 var(--page-padding);

    background: var(--bg-secondary);

    border-bottom: 1px solid var(--border);
}

.capstone-page-snapshot-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capstone-page-snapshot-item {
    display: flex;
    flex-direction: column;

    gap: 14px;

    min-width: 0;

    padding: 37px 28px;

    border-right: 1px solid var(--border);
}

.capstone-page-snapshot-item:first-child {
    padding-left: 0;
}

.capstone-page-snapshot-item:last-child {
    padding-right: 0;

    border-right: none;
}

.capstone-page-snapshot-label {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--accent);
}

.capstone-page-snapshot-value {
    font-family: var(--font-heading);
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 600;

    letter-spacing: -0.035em;
    line-height: 1.4;

    color: var(--text-primary);
}


/* =========================================
   SHARED SECTION HEADINGS
========================================= */

.capstone-page-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: clamp(70px, 8vw, 120px);
}

.capstone-page-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.capstone-page-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--accent);
}

.capstone-page-section-line {
    width: 50px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.capstone-page-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.capstone-page-section-note {
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.16em;

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


/* =========================================
   ABOUT CAPSTONE
========================================= */

.capstone-page-about {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);

    scroll-margin-top: 95px;
}

.capstone-page-about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    gap: clamp(50px, 8vw, 125px);
}

.capstone-page-about-heading h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.capstone-page-about-heading h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.capstone-page-about-content {
    max-width: 570px;
}

.capstone-page-about-content p {
    margin: 0 0 24px;

    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}

.capstone-page-about-content p:last-child {
    margin-bottom: 0;
}

.capstone-page-about-content
.capstone-page-about-lead {
    margin-bottom: 31px;

    font-family: var(--font-heading);
    font-size: clamp(22px, 2.1vw, 28px);
    font-weight: 500;

    letter-spacing: -0.045em;
    line-height: 1.5;

    color: var(--text-primary);
}


/* =========================================
   WHAT CAPSTONE DOES
========================================= */

.capstone-page-services {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-secondary);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.capstone-page-services-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;
}

.capstone-page-services-intro h2 {
    max-width: 720px;

    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(60px, 6vw, 95px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.06;

    color: var(--text-primary);
}

.capstone-page-services-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.capstone-page-services-intro > p {
    max-width: 375px;

    margin: 0;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================
   SERVICE CARDS
========================================= */

.capstone-page-services-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 17px;
}

.capstone-page-service-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 420px;

    padding: clamp(25px, 3vw, 37px);

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            var(--accent-soft),
            transparent 75%
        ),
        var(--bg-primary);

    transition:
        transform 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}

.capstone-page-service-card:hover {
    transform: translateY(-7px);

    border-color: var(--accent);

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.capstone-page-service-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 65px;
}

.capstone-page-service-number {
    font-family: var(--font-editorial);
    font-size: 29px;
    font-style: italic;

    color: var(--accent);
}

.capstone-page-service-symbol {
    font-family: monospace;
    font-size: 27px;
    font-weight: 500;

    color: var(--accent);
}

.capstone-page-service-card h3 {
    margin: 0 0 22px;

    font-family: var(--font-editorial);
    font-size: clamp(38px, 3.3vw, 53px);
    font-weight: 400;

    letter-spacing: -0.04em;
    line-height: 1.08;

    color: var(--text-primary);
}

.capstone-page-service-card > p {
    margin: 0 0 35px;

    font-size: 14px;
    line-height: 1.85;

    color: var(--text-secondary);
}

.capstone-page-service-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: auto;
    padding-top: 22px;

    border-top: 1px solid var(--border);
}

.capstone-page-service-bottom span:first-child {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;

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

.capstone-page-service-bottom span:last-child {
    font-size: 22px;

    color: var(--accent);
}


/* =========================================
   MY ROLE AT CAPSTONE
========================================= */

.capstone-page-role {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);
}

.capstone-page-role-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: start;

    gap: clamp(55px, 8vw, 125px);
}

.capstone-page-role-heading {
    max-width: 560px;
}

.capstone-page-role-eyebrow {
    display: block;

    margin-bottom: 28px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--accent);
}

.capstone-page-role-heading h2 {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 108px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.capstone-page-role-heading h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.capstone-page-role-heading > p {
    max-width: 490px;

    margin: 0;

    font-size: 16px;
    line-height: 1.9;

    color: var(--text-secondary);
}


/* =========================================
   ROLE RESPONSIBILITIES
========================================= */

.capstone-page-role-list {
    border-top: 1px solid var(--border);
}

.capstone-page-role-item {
    display: grid;

    grid-template-columns: 35px minmax(0, 1fr);

    gap: 25px;

    padding: 34px 0;

    border-bottom: 1px solid var(--border);
}

.capstone-page-role-index {
    font-family: var(--font-editorial);
    font-size: 24px;
    font-style: italic;

    color: var(--accent);
}

.capstone-page-role-item h3 {
    margin: 0 0 13px;

    font-family: var(--font-heading);
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 600;

    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.capstone-page-role-item p {
    max-width: 480px;

    margin: 0;

    font-size: 14px;
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================
   FEATURED PROJECT SECTION
========================================= */

.capstone-page-project {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-secondary);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.capstone-page-project-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    min-height: 720px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 28px;

    background: var(--bg-primary);
}


/* =========================================
   FEATURED PROJECT CONTENT
========================================= */

.capstone-page-project-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;

    padding: clamp(35px, 5vw, 75px);
}

.capstone-page-project-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 65px;
}

.capstone-page-project-tag {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding: 7px 12px;

    border: 1px solid var(--border-hover);
    border-radius: 100px;

    background: var(--accent-soft);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.1em;

    color: var(--accent);
}

.capstone-page-project-eyebrow {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--accent);
}

.capstone-page-project-content h2 {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(56px, 5.4vw, 88px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.capstone-page-project-content h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.capstone-page-project-lead {
    max-width: 470px;

    margin: 0 0 22px;

    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.5;

    color: var(--text-primary);
}

.capstone-page-project-description {
    max-width: 490px;

    margin: 0 0 20px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--text-secondary);
}

.capstone-page-project-description:last-child {
    margin-bottom: 0;
}


/* =========================================
   RENEWABLE ENERGY PROJECT VISUAL
========================================= */

.capstone-page-project-visual {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;
    min-height: 620px;

    padding: 32px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #0c372c 0%,
            #1b5d4a 48%,
            #68a47e 100%
        );

    color: #ffffff;
}

.capstone-page-project-visual-top,
.capstone-page-project-visual-bottom {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.capstone-page-project-visual-top span,
.capstone-page-project-visual-bottom span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.14em;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.8);
}

.capstone-page-project-visual-bottom {
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.25);
}


/* =========================================
   SUN & HORIZON ARTWORK
========================================= */

.capstone-page-project-art {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.capstone-page-sun {
    position: absolute;

    top: 35%;
    left: 50%;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #f8f4ca 0%,
            #e0e9a8 50%,
            #a8d7a0 100%
        );

    box-shadow:
        0 0 0 35px rgba(228, 247, 185, 0.055),
        0 0 0 85px rgba(228, 247, 185, 0.035),
        0 0 100px rgba(217, 240, 177, 0.2);

    transform: translate(-50%, -50%);
}

.capstone-page-sun-orbit {
    position: absolute;

    top: 35%;
    left: 50%;

    border: 1px solid rgba(236, 255, 219, 0.23);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.capstone-page-sun-orbit-one {
    width: 370px;
    height: 370px;
}

.capstone-page-sun-orbit-two {
    width: 530px;
    height: 530px;

    border-style: dashed;
}

.capstone-page-horizon {
    position: absolute;

    right: -20%;
    bottom: -34%;
    left: -20%;

    height: 65%;

    border-radius: 50% 50% 0 0;

    background:
        linear-gradient(
            180deg,
            #235e46,
            #0c3427 75%
        );

    box-shadow: 0 -20px 60px rgba(11, 51, 35, 0.15);
}

.capstone-page-horizon-line {
    position: absolute;

    right: -10%;
    bottom: 21%;
    left: -10%;

    height: 1px;

    background: rgba(215, 248, 205, 0.35);
}


/* =========================================
   EXPLORE CAPSTONE ONLINE
========================================= */

.capstone-page-connect {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);
}

.capstone-page-connect-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: clamp(55px, 8vw, 125px);
}

.capstone-page-connect-heading h2 {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.capstone-page-connect-heading h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.capstone-page-connect-heading > p {
    max-width: 440px;

    margin: 0;

    font-size: 16px;
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================
   CAPSTONE SOCIAL LINKS
========================================= */

.capstone-page-social-links {
    border-top: 1px solid var(--border);
}

.capstone-page-social-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    min-width: 0;

    padding: 30px 0;

    border-bottom: 1px solid var(--border);

    transition: padding 300ms ease;
}

.capstone-page-social-link:hover {
    padding-left: 10px;
}

.capstone-page-social-link > div {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 10px;
}

.capstone-page-social-label {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;

    color: var(--accent);
}

.capstone-page-social-name {
    overflow-wrap: anywhere;

    font-family: var(--font-heading);
    font-size: clamp(17px, 2vw, 24px);
    font-weight: 600;

    letter-spacing: -0.04em;

    color: var(--text-primary);
}

.capstone-page-social-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--accent-soft);

    font-size: 21px;

    color: var(--accent);

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

.capstone-page-social-link:hover
.capstone-page-social-arrow {
    transform: rotate(45deg);

    background: var(--bg-secondary);
}


/* =========================================
   CLOSING SECTION
========================================= */

.capstone-page-closing {
    position: relative;
    isolation: isolate;

    padding:
        clamp(110px, 12vw, 180px)
        var(--page-padding);

    background:
        radial-gradient(
            ellipse at 25% 85%,
            rgba(56, 136, 77, 0.13),
            transparent 58%
        ),
        var(--bg-secondary);

    border-top: 1px solid var(--border);
}

.capstone-page-closing-content {
    max-width: 850px;
}

.capstone-page-closing-eyebrow {
    display: block;

    margin-bottom: 28px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: var(--accent);
}

.capstone-page-closing h2 {
    margin: 0 0 28px;

    font-family: var(--font-editorial);
    font-size: clamp(85px, 10vw, 150px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.98;

    color: var(--text-primary);
}

.capstone-page-closing h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--accent);
}

.capstone-page-closing-content > p {
    max-width: 540px;

    margin: 0;

    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================
   NEXT VENTURE CARD
========================================= */

.capstone-page-next-venture {
    display: flex;
    flex-direction: column;

    gap: 15px;

    max-width: 540px;

    margin-top: clamp(85px, 10vw, 145px);
    padding: 33px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            rgba(74, 139, 196, 0.1),
            transparent 70%
        ),
        var(--bg-primary);

    transition:
        transform 300ms ease,
        border-color 300ms ease;
}

.capstone-page-next-venture:hover {
    transform: translateY(-5px);

    border-color: #6398c4;
}

.capstone-page-next-label {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;

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

.capstone-page-next-name {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    font-family: var(--font-editorial);
    font-size: clamp(45px, 5vw, 70px);
    font-weight: 400;

    letter-spacing: -0.045em;

    color: var(--text-primary);
}

.capstone-page-next-name span {
    font-family: var(--font-heading);
    font-size: 29px;

    color: #6398c4;
}

.capstone-page-next-description {
    font-size: 13px;

    color: var(--text-secondary);
}


/* =========================================
   TABLET RESPONSIVENESS
========================================= */

@media (max-width: 1100px) {

    .capstone-page-hero-grid {
        gap: 40px;
    }

    .capstone-page-title {
        font-size: clamp(56px, 6.5vw, 85px);
    }

    .capstone-page-hero-visual {
        min-height: 520px;
    }

    .capstone-page-about-grid,
    .capstone-page-role-grid,
    .capstone-page-connect-grid {
        gap: 55px;
    }

    .capstone-page-about-heading h2,
    .capstone-page-role-heading h2,
    .capstone-page-connect-heading h2 {
        font-size: clamp(60px, 7vw, 90px);
    }

    .capstone-page-project-content h2 {
        font-size: clamp(54px, 5.5vw, 75px);
    }

    .capstone-page-project-meta {
        margin-bottom: 45px;
    }

}


/* =========================================
   SMALL TABLET RESPONSIVENESS
========================================= */

@media (max-width: 850px) {

    /* Hero */

    .capstone-page-hero-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .capstone-page-hero-content {
        max-width: 700px;
    }

    .capstone-page-title {
        font-size: clamp(75px, 10vw, 110px);
    }

    .capstone-page-hero-visual {
        min-height: 520px;
    }

    /* Snapshot */

    .capstone-page-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capstone-page-snapshot-item {
        padding: 28px;
    }

    .capstone-page-snapshot-item:first-child {
        padding-left: 28px;
    }

    .capstone-page-snapshot-item:nth-child(2) {
        border-right: none;
    }

    .capstone-page-snapshot-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }

    /* Content grids */

    .capstone-page-about-grid,
    .capstone-page-role-grid,
    .capstone-page-connect-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .capstone-page-services-intro {
        align-items: flex-start;
        flex-direction: column;

        gap: 30px;
    }

    .capstone-page-services-intro > p {
        max-width: 650px;
    }

    /* Services */

    .capstone-page-services-grid {
        grid-template-columns: 1fr;
    }

    .capstone-page-service-card {
        min-height: 300px;
    }

    .capstone-page-service-top {
        margin-bottom: 40px;
    }

    /* Featured project */

    .capstone-page-project-card {
        grid-template-columns: 1fr;
    }

    .capstone-page-project-content {
        padding: 55px;
    }

    .capstone-page-project-content h2 {
        font-size: clamp(65px, 9vw, 90px);
    }

    .capstone-page-project-visual {
        min-height: 520px;
    }

}


/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 700px) {

    /* Hero */

    .capstone-page-hero {
        min-height: auto;

        padding-top: 105px;
        padding-bottom: 90px;
    }

    .capstone-page-breadcrumb {
        margin-bottom: 65px;
    }

    .capstone-page-title {
        font-size: clamp(60px, 11vw, 85px);
    }

    .capstone-page-hero-visual {
        min-height: 455px;
    }

    /* Section headings */

    .capstone-page-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 16px;

        margin-bottom: 65px;
    }

    /* Content sections */

    .capstone-page-about,
    .capstone-page-services,
    .capstone-page-role,
    .capstone-page-project,
    .capstone-page-connect {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .capstone-page-about-heading h2,
    .capstone-page-role-heading h2,
    .capstone-page-connect-heading h2 {
        font-size: clamp(65px, 11vw, 90px);
    }

    .capstone-page-services-intro h2 {
        font-size: clamp(60px, 10vw, 80px);
    }

    /* Project */

    .capstone-page-project-content {
        padding: 45px 35px;
    }

    .capstone-page-project-content h2 {
        font-size: clamp(60px, 10vw, 80px);
    }

    /* Closing */

    .capstone-page-closing h2 {
        font-size: clamp(75px, 13vw, 110px);
    }

}


/* =========================================
   SMALL MOBILE SCREENS
========================================= */

@media (max-width: 600px) {

    /* Hero */

    .capstone-page-breadcrumb {
        font-size: 11px;
    }

    .capstone-page-eyebrow {
        gap: 9px;

        font-size: 9px;
        letter-spacing: 0.1em;
    }

    .capstone-page-title {
        font-size: clamp(51px, 11vw, 72px);
    }

    .capstone-page-hero-lead {
        font-size: 24px;
    }

    .capstone-page-hero-description {
        font-size: 15px;
    }

    .capstone-page-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Hero visual */

    .capstone-page-hero-visual {
        min-height: 390px;

        padding: 23px;

        border-radius: 22px;
    }

    .capstone-page-brand-ring-one {
        width: 275px;
        height: 275px;
    }

    .capstone-page-brand-ring-two {
        width: 215px;
        height: 215px;
    }

    .capstone-page-brand-ring-three {
        width: 150px;
        height: 150px;
    }

    .capstone-page-brand-core {
        font-size: 115px;
    }

    .capstone-page-brand-point {
        top: calc(50% - 107px);
    }

    .capstone-page-visual-header span,
    .capstone-page-visual-footer span {
        font-size: 8px;
    }

    /* Snapshot */

    .capstone-page-snapshot-item {
        gap: 12px;

        padding: 24px 15px;
    }

    .capstone-page-snapshot-item:first-child {
        padding-left: 15px;
    }

    .capstone-page-snapshot-label {
        font-size: 9px;
    }

    .capstone-page-snapshot-value {
        font-size: 14px;
    }

    /* Section labels */

    .capstone-page-section-number {
        font-size: 23px;
    }

    .capstone-page-section-line {
        width: 36px;
    }

    .capstone-page-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .capstone-page-section-note {
        font-size: 9px;
    }

    /* Headings */

    .capstone-page-about-heading h2,
    .capstone-page-role-heading h2,
    .capstone-page-connect-heading h2 {
        font-size: clamp(56px, 12vw, 77px);
    }

    .capstone-page-services-intro h2 {
        font-size: clamp(53px, 11vw, 73px);
    }

    .capstone-page-about-content
    .capstone-page-about-lead {
        font-size: 22px;
    }

    .capstone-page-about-content p,
    .capstone-page-role-heading > p,
    .capstone-page-connect-heading > p {
        font-size: 15px;
    }

    /* Services */

    .capstone-page-service-card {
        min-height: 320px;

        padding: 28px;
    }

    .capstone-page-service-card h3 {
        font-size: 43px;
    }

    /* Role */

    .capstone-page-role-item {
        gap: 15px;

        padding: 28px 0;
    }

    .capstone-page-role-item h3 {
        font-size: 20px;
    }

    /* Featured project */

    .capstone-page-project-card {
        border-radius: 22px;
    }

    .capstone-page-project-content {
        padding: 38px 25px;
    }

    .capstone-page-project-meta {
        margin-bottom: 45px;
    }

    .capstone-page-project-content h2 {
        font-size: clamp(53px, 11vw, 72px);
    }

    .capstone-page-project-lead {
        font-size: 22px;
    }

    .capstone-page-project-visual {
        min-height: 420px;

        padding: 25px;
    }

    .capstone-page-sun {
        width: 170px;
        height: 170px;
    }

    .capstone-page-sun-orbit-one {
        width: 290px;
        height: 290px;
    }

    .capstone-page-sun-orbit-two {
        width: 410px;
        height: 410px;
    }

    .capstone-page-project-visual-top span,
    .capstone-page-project-visual-bottom span {
        font-size: 8px;
    }

    /* Social links */

    .capstone-page-social-link {
        gap: 15px;

        padding: 25px 0;
    }

    .capstone-page-social-name {
        font-size: 18px;
    }

    /* Closing */

    .capstone-page-closing {
        padding-top: 105px;
        padding-bottom: 115px;
    }

    .capstone-page-closing h2 {
        font-size: clamp(68px, 14vw, 90px);
    }

    .capstone-page-closing-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .capstone-page-next-venture {
        padding: 27px;
    }

}


/* =========================================
   EXTRA SMALL SCREENS
========================================= */

@media (max-width: 370px) {

    .capstone-page-title {
        font-size: 47px;
    }

    .capstone-page-hero-visual {
        min-height: 355px;
    }

    .capstone-page-service-card h3 {
        font-size: 37px;
    }

    .capstone-page-project-content h2 {
        font-size: 47px;
    }

    .capstone-page-connect-heading h2 {
        font-size: 54px;
    }

    .capstone-page-next-name {
        font-size: 42px;
    }

}


/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .capstone-page-title,
    .capstone-page-brand-ring-one {
        animation: none;
    }

    .capstone-page-button,
    .capstone-page-button-arrow,
    .capstone-page-service-card,
    .capstone-page-social-link,
    .capstone-page-social-arrow,
    .capstone-page-next-venture {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   CAPSTONE OFFICIAL LOGO - TRANSPARENT
========================================= */

.capstone-page-brand-logo {
    position: relative;
    z-index: 2;

    display: block;

    width: min(86%, 470px);
    height: auto;

    object-fit: contain;

    border: none;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    filter: drop-shadow(
        0 12px 22px rgba(0, 0, 0, 0.18)
    );
}

/* =========================================================
   CARDAN
   DEDICATED VENTURE PAGE
========================================================= */

/* =========================================================
   CARDAN DESIGN VARIABLES
========================================================= */

:root {
    --cardan-accent: #8fc8f2;
    --cardan-accent-strong: #b6e0ff;
    --cardan-accent-soft: rgba(93, 166, 222, 0.10);
    --cardan-border: rgba(119, 177, 222, 0.19);
}

html[data-theme="light"] {
    --cardan-accent: #286a9d;
    --cardan-accent-strong: #185780;
    --cardan-accent-soft: rgba(55, 128, 185, 0.08);
    --cardan-border: rgba(41, 107, 157, 0.18);
}


/* =========================================================
   SHARED CARDAN CONTAINER
========================================================= */

.cardan-page-container {
    position: relative;

    width: 100%;
    max-width: var(--page-width);

    margin: 0 auto;
}


/* =========================================================
   CARDAN HERO
========================================================= */

.cardan-page-hero {
    position: relative;
    isolation: isolate;

    min-height: 800px;

    padding:
        clamp(125px, 12vw, 185px)
        var(--page-padding)
        clamp(100px, 10vw, 150px);

    overflow: hidden;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border);
}

.cardan-page-hero-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 80% 30%,
            rgba(52, 116, 170, 0.16),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 10% 90%,
            rgba(45, 105, 158, 0.06),
            transparent 60%
        );
}

html[data-theme="light"] .cardan-page-hero-atmosphere {
    background:
        radial-gradient(
            ellipse at 80% 30%,
            rgba(72, 140, 196, 0.10),
            transparent 60%
        );
}


/* =========================================================
   BREADCRUMB
========================================================= */

.cardan-page-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: clamp(70px, 8vw, 115px);

    font-size: 12px;
    font-weight: 600;

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

.cardan-page-breadcrumb a {
    color: var(--text-secondary);

    transition: color 250ms ease;
}

.cardan-page-breadcrumb a:hover {
    color: var(--cardan-accent);
}

.cardan-page-breadcrumb span[aria-current="page"] {
    color: var(--cardan-accent);
}


/* =========================================================
   HERO GRID
========================================================= */

.cardan-page-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, 0.94fr);

    align-items: center;

    gap: clamp(45px, 7vw, 110px);
}

.cardan-page-hero-content {
    min-width: 0;
}


/* =========================================================
   HERO EYEBROW
========================================================= */

.cardan-page-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 35px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.14em;
    line-height: 1.7;

    color: var(--cardan-accent);
}

.cardan-page-eyebrow-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--cardan-accent);

    box-shadow: 0 0 0 5px var(--cardan-accent-soft);
}

.cardan-page-eyebrow-divider {
    color: var(--text-muted);
}


/* =========================================================
   HERO TYPOGRAPHY
========================================================= */

.cardan-page-title {
    margin: 0 0 38px;

    font-family: var(--font-editorial);
    font-size: clamp(85px, 9vw, 140px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.95;

    color: var(--text-primary);

    animation: cardan-title-enter 850ms ease-out both;
}

.cardan-page-title em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

@keyframes cardan-title-enter {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cardan-page-hero-lead {
    margin: 0 0 25px;

    font-family: var(--font-heading);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 500;

    letter-spacing: -0.045em;
    line-height: 1.45;

    color: var(--text-primary);
}

.cardan-page-hero-description {
    max-width: 530px;

    margin: 0;

    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}


/* =========================================================
   CURRENT STATUS
========================================================= */

.cardan-page-hero-status {
    display: inline-flex;
    align-items: center;

    gap: 15px;

    margin-top: 35px;
    padding: 15px 20px;

    border: 1px solid var(--cardan-border);
    border-radius: 14px;

    background: var(--cardan-accent-soft);
}

.cardan-page-status-indicator {
    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--cardan-accent);

    box-shadow: 0 0 0 6px var(--cardan-accent-soft);
}

.cardan-page-hero-status > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.cardan-page-status-label {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.14em;

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

.cardan-page-status-value {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 650;

    color: var(--cardan-accent);
}


/* =========================================================
   SHARED CARDAN BUTTONS
========================================================= */

.cardan-page-hero-actions,
.cardan-page-closing-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}

.cardan-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    min-height: 56px;

    padding: 7px 8px 7px 21px;

    border: 1px solid var(--cardan-border);
    border-radius: 100px;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease;
}

.cardan-page-button:hover {
    transform: translateY(-3px);
}

.cardan-page-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 19px;

    transition: transform 300ms ease;
}

.cardan-page-button:hover .cardan-page-button-arrow {
    transform: rotate(45deg);
}

.cardan-page-button-primary {
    border-color: var(--cardan-accent);

    background: var(--cardan-accent);

    color: #102739;
}

.cardan-page-button-primary .cardan-page-button-arrow {
    background: #173e59;

    color: #ffffff;
}

.cardan-page-button-secondary {
    background: var(--cardan-accent-soft);

    color: var(--text-primary);
}

.cardan-page-button-secondary .cardan-page-button-arrow {
    background: var(--bg-elevated);

    color: var(--cardan-accent);
}

html[data-theme="light"] .cardan-page-button-primary {
    color: #ffffff;
}

html[data-theme="light"]
.cardan-page-button-primary .cardan-page-button-arrow {
    background: #ffffff;

    color: #286a9d;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.cardan-page-hero-visual {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;
    min-height: 610px;

    padding: 33px;

    overflow: hidden;

    border: 1px solid rgba(150, 205, 244, 0.16);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(65, 145, 204, 0.22),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #142d45,
            #0b1b2b 65%,
            #1c3651
        );

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.13);

    color: #ffffff;
}

.cardan-page-visual-header,
.cardan-page-visual-footer {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.cardan-page-visual-header span,
.cardan-page-visual-footer span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;
    line-height: 1.7;

    color: rgba(229, 241, 251, 0.72);
}

.cardan-page-visual-footer {
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.16);
}


/* =========================================================
   HERO VISUAL COMPOSITION
========================================================= */

.cardan-page-visual-composition {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.cardan-page-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 1px solid rgba(162, 211, 246, 0.22);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.cardan-page-orbit-one {
    width: 430px;
    height: 430px;

    border-style: dashed;

    animation: cardan-page-orbit-spin 65s linear infinite;
}

.cardan-page-orbit-two {
    width: 310px;
    height: 310px;

    border-width: 2px;

    box-shadow:
        0 0 0 30px rgba(162, 211, 246, 0.025),
        0 0 80px rgba(64, 153, 222, 0.10);
}

@keyframes cardan-page-orbit-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* =========================================================
   STYLISED VEHICLE DOCUMENT
========================================================= */

.cardan-page-document-card {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: min(78%, 340px);
    min-height: 300px;

    padding: 29px;

    border: 1px solid rgba(188, 222, 248, 0.35);
    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(45, 93, 130, 0.95),
            rgba(17, 45, 69, 0.98)
        );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.30),
        0 0 45px rgba(120, 190, 240, 0.08);

    transform: rotate(-8deg);

    transition: transform 500ms ease;
}

.cardan-page-hero-visual:hover .cardan-page-document-card {
    transform: rotate(-3deg) translateY(-7px);
}

.cardan-page-document-top,
.cardan-page-document-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.cardan-page-document-mark {
    font-family: var(--font-heading);
    font-size: 33px;
    font-weight: 800;

    letter-spacing: -0.08em;

    color: #d8efff;
}

.cardan-page-document-type {
    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.12em;
    line-height: 1.6;

    text-align: right;

    color: rgba(224, 242, 255, 0.75);
}

.cardan-page-document-body {
    display: flex;
    flex-direction: column;

    gap: 15px;

    padding: 45px 0;
}

.cardan-page-document-line {
    display: block;

    height: 8px;

    border-radius: 100px;

    background: rgba(188, 226, 251, 0.20);
}

.cardan-page-document-line-long {
    width: 88%;
}

.cardan-page-document-line-medium {
    width: 65%;
}

.cardan-page-document-line-short {
    width: 43%;
}

.cardan-page-document-chip {
    padding: 8px 11px;

    border: 1px solid rgba(183, 226, 255, 0.29);
    border-radius: 100px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.11em;

    color: #d1ebff;
}

.cardan-page-document-reference {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.11em;

    color: rgba(224, 242, 255, 0.65);
}

.cardan-page-floating-symbol {
    position: absolute;
    z-index: 2;

    right: 11%;
    bottom: 24%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 90px;
    height: 90px;

    border: 1px solid rgba(180, 220, 251, 0.24);
    border-radius: 24px;

    background: rgba(27, 70, 107, 0.94);

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.20);

    font-family: var(--font-heading);
    font-size: 55px;
    font-weight: 800;

    color: #d4edff;

    transform: rotate(9deg);
}


/* =========================================================
   PRODUCT SNAPSHOT
========================================================= */

.cardan-page-snapshot {
    padding: 0 var(--page-padding);

    background: var(--bg-secondary);

    border-bottom: 1px solid var(--border);
}

.cardan-page-snapshot-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cardan-page-snapshot-item {
    display: flex;
    flex-direction: column;

    gap: 14px;

    min-width: 0;

    padding: 37px 25px;

    border-right: 1px solid var(--border);
}

.cardan-page-snapshot-item:first-child {
    padding-left: 0;
}

.cardan-page-snapshot-item:last-child {
    padding-right: 0;

    border-right: none;
}

.cardan-page-snapshot-label {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.14em;

    color: var(--cardan-accent);
}

.cardan-page-snapshot-value {
    font-family: var(--font-heading);
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 600;

    letter-spacing: -0.03em;
    line-height: 1.45;

    color: var(--text-primary);
}


/* =========================================================
   SHARED SECTION HEADINGS
========================================================= */

.cardan-page-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: clamp(70px, 8vw, 115px);
}

.cardan-page-section-label {
    display: inline-flex;
    align-items: center;

    gap: 16px;
}

.cardan-page-section-number {
    font-family: var(--font-editorial);
    font-size: 26px;
    font-style: italic;

    line-height: 1;

    color: var(--cardan-accent);
}

.cardan-page-section-line {
    width: 50px;
    height: 1px;

    background: linear-gradient(
        to right,
        var(--cardan-accent),
        transparent
    );
}

.cardan-page-section-name {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.19em;

    color: var(--text-secondary);
}

.cardan-page-section-note {
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.16em;

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


/* =========================================================
   ABOUT CARDAN
========================================================= */

.cardan-page-about {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);

    scroll-margin-top: 95px;
}

.cardan-page-about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    gap: clamp(55px, 8vw, 125px);
}

.cardan-page-about-heading h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.cardan-page-about-heading h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-about-content {
    max-width: 565px;
}

.cardan-page-about-content p {
    margin: 0 0 25px;

    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}

.cardan-page-about-content p:last-child {
    margin-bottom: 0;
}

.cardan-page-about-content .cardan-page-about-lead {
    margin-bottom: 32px;

    font-family: var(--font-heading);
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.5;

    color: var(--text-primary);
}


/* =========================================================
   PRODUCT FEATURES
========================================================= */

.cardan-page-features {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-secondary);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.cardan-page-features-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;
}

.cardan-page-features-intro h2 {
    max-width: 730px;

    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(60px, 6vw, 95px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.06;

    color: var(--text-primary);
}

.cardan-page-features-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-features-intro > p {
    max-width: 370px;

    margin: 0;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.cardan-page-features-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 17px;
}

.cardan-page-feature-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 420px;

    padding: clamp(25px, 3vw, 37px);

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            var(--cardan-accent-soft),
            transparent 72%
        ),
        var(--bg-primary);

    transition:
        transform 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}

.cardan-page-feature-card:hover {
    transform: translateY(-7px);

    border-color: var(--cardan-accent);

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.cardan-page-feature-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 65px;
}

.cardan-page-feature-number {
    font-family: var(--font-editorial);
    font-size: 29px;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-feature-symbol {
    font-size: 30px;

    color: var(--cardan-accent);
}

.cardan-page-feature-card h3 {
    margin: 0 0 22px;

    font-family: var(--font-editorial);
    font-size: clamp(38px, 3.2vw, 53px);
    font-weight: 400;

    letter-spacing: -0.04em;
    line-height: 1.08;

    color: var(--text-primary);
}

.cardan-page-feature-card p {
    margin: 0 0 35px;

    font-size: 14px;
    line-height: 1.85;

    color: var(--text-secondary);
}

.cardan-page-feature-footnote {
    display: block;

    margin-top: auto;
    padding-top: 22px;

    border-top: 1px solid var(--border);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--cardan-accent);
}


/* =========================================================
   PROMOTIONAL IMAGE GALLERY
========================================================= */

.cardan-page-gallery {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);
}

.cardan-page-gallery-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;
}

.cardan-page-gallery-eyebrow {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--cardan-accent);
}

.cardan-page-gallery-intro h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.cardan-page-gallery-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-gallery-intro > p {
    max-width: 410px;

    margin: 0;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-secondary);
}

.cardan-page-gallery-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;
}

.cardan-page-gallery-item {
    display: flex;
    flex-direction: column;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border: 1px solid var(--cardan-border);
    border-radius: 23px;

    background: var(--bg-secondary);

    transition:
        transform 350ms ease,
        border-color 350ms ease;
}

.cardan-page-gallery-item:hover {
    transform: translateY(-5px);

    border-color: var(--cardan-accent);
}

.cardan-page-gallery-item img {
    display: block;

    width: 100%;
    height: clamp(320px, 40vw, 530px);

    object-fit: contain;

    padding: 15px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(51, 112, 163, 0.12),
            transparent 75%
        ),
        #101f30;
}

.cardan-page-gallery-item figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    padding: 22px 25px;

    border-top: 1px solid var(--cardan-border);
}

.cardan-page-gallery-item figcaption span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.14em;

    color: var(--text-secondary);
}

.cardan-page-gallery-item figcaption span:first-child {
    color: var(--cardan-accent);
}

.cardan-page-gallery-disclaimer {
    max-width: 690px;

    margin: 32px 0 0;
    padding-left: 18px;

    border-left: 2px solid var(--cardan-accent);

    font-size: 13px;
    line-height: 1.85;

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


/* =========================================================
   MY ROLE AT CARDAN
========================================================= */

.cardan-page-role {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-secondary);

    border-top: 1px solid var(--border);
}

.cardan-page-role-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: clamp(55px, 8vw, 125px);
}

.cardan-page-role-eyebrow {
    display: block;

    margin-bottom: 30px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--cardan-accent);
}

.cardan-page-role-heading h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.cardan-page-role-heading h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-role-content {
    max-width: 570px;
}

.cardan-page-role-content p {
    margin: 0 0 25px;

    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.9;

    color: var(--text-secondary);
}

.cardan-page-role-content .cardan-page-role-lead {
    margin-bottom: 30px;

    font-family: var(--font-heading);
    font-size: clamp(22px, 2.1vw, 29px);
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.5;

    color: var(--text-primary);
}

.cardan-page-role-callout {
    display: flex;
    flex-direction: column;

    gap: 19px;

    margin-top: 40px;
    padding: 32px;

    border: 1px solid var(--cardan-border);
    border-left: 3px solid var(--cardan-accent);
    border-radius: 18px;

    background: var(--bg-primary);
}

.cardan-page-role-callout > span {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--cardan-accent);
}

.cardan-page-role-callout strong {
    font-family: var(--font-editorial);
    font-size: clamp(29px, 3vw, 43px);
    font-weight: 400;

    letter-spacing: -0.035em;
    line-height: 1.2;

    color: var(--text-primary);
}


/* =========================================================
   DEVELOPMENT STATUS
========================================================= */

.cardan-page-development {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);

    border-top: 1px solid var(--border);
}

.cardan-page-development-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    overflow: hidden;

    border: 1px solid var(--cardan-border);
    border-radius: 28px;

    background: var(--bg-secondary);
}

.cardan-page-development-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: clamp(35px, 5vw, 75px);
}

.cardan-page-development-status {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 45px;
    padding: 11px 15px;

    border: 1px solid var(--cardan-border);
    border-radius: 100px;

    background: var(--cardan-accent-soft);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.13em;

    color: var(--cardan-accent);
}

.cardan-page-development-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--cardan-accent);
}

.cardan-page-development-content h2 {
    margin: 0 0 30px;

    font-family: var(--font-editorial);
    font-size: clamp(55px, 6vw, 95px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.cardan-page-development-content h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-development-lead {
    max-width: 500px;

    margin: 0 0 25px;

    font-family: var(--font-heading);
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 500;

    letter-spacing: -0.04em;
    line-height: 1.5;

    color: var(--text-primary);
}

.cardan-page-development-description {
    max-width: 500px;

    margin: 0 0 22px;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-secondary);
}

.cardan-page-development-content .cardan-page-button {
    margin-top: 20px;
}


/* =========================================================
   DEVELOPMENT VISUAL
========================================================= */

.cardan-page-development-visual {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 620px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center,
            rgba(62, 142, 199, 0.24),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #112b42,
            #0b1d2f 70%,
            #1b3852
        );
}

.cardan-page-development-visual-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 390px;
    height: 390px;

    border: 1px dashed rgba(161, 213, 252, 0.30);
    border-radius: 50%;

    transform: translate(-50%, -50%);

    animation: cardan-page-orbit-spin 60s linear infinite;
}

.cardan-page-development-visual-ring-inner {
    width: 260px;
    height: 260px;

    border: 2px solid rgba(161, 213, 252, 0.35);

    animation: none;
}

.cardan-page-development-visual-symbol {
    position: relative;
    z-index: 2;

    font-family: var(--font-heading);
    font-size: 145px;
    font-weight: 800;

    letter-spacing: -0.1em;

    color: #c2e4fb;
}

.cardan-page-development-visual-label {
    position: absolute;
    right: 30px;
    bottom: 35px;
    left: 30px;

    z-index: 2;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.17);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-align: center;

    color: rgba(229, 241, 251, 0.76);
}


/* =========================================================
   EARLY ACCESS SECTION
========================================================= */

.cardan-page-early-access {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-secondary);

    border-top: 1px solid var(--border);

    scroll-margin-top: 95px;
}

.cardan-page-access-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 75px;
}

.cardan-page-access-eyebrow {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--cardan-accent);
}

.cardan-page-access-intro h2 {
    margin: 0;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.cardan-page-access-intro h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-access-intro > p {
    max-width: 400px;

    margin: 0;

    font-size: 15px;
    line-height: 1.9;

    color: var(--text-secondary);
}


/* =========================================================
   EARLY ACCESS PROCESS
========================================================= */

.cardan-page-access-steps {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 85px;
}

.cardan-page-access-step {
    min-width: 0;

    padding: 32px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--bg-primary);
}

.cardan-page-access-step-number {
    display: block;

    margin-bottom: 45px;

    font-family: var(--font-editorial);
    font-size: 35px;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-access-step h3 {
    margin: 0 0 18px;

    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 600;

    letter-spacing: -0.04em;
    line-height: 1.3;

    color: var(--text-primary);
}

.cardan-page-access-step p {
    margin: 0;

    font-size: 14px;
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================================
   TESTER REGISTRATION PANEL
========================================================= */

.cardan-page-access-panel {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: clamp(45px, 7vw, 100px);

    padding: clamp(35px, 5vw, 70px);

    border: 1px solid var(--cardan-border);
    border-radius: 27px;

    background:
        radial-gradient(
            ellipse at 0% 0%,
            var(--cardan-accent-soft),
            transparent 65%
        ),
        var(--bg-primary);
}

.cardan-page-access-panel-label {
    display: block;

    margin-bottom: 28px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--cardan-accent);
}

.cardan-page-access-panel-heading h3 {
    margin: 0 0 28px;

    font-family: var(--font-editorial);
    font-size: clamp(49px, 5vw, 77px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.05;

    color: var(--text-primary);
}

.cardan-page-access-panel-heading h3 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-access-panel-heading p {
    max-width: 400px;

    margin: 0;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================================
   TESTER FORM
========================================================= */

.cardan-page-tester-form {
    display: flex;
    flex-direction: column;

    gap: 25px;
}

.cardan-page-form-group {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.cardan-page-form-group label {
    font-size: 13px;
    font-weight: 700;

    color: var(--text-primary);
}

.cardan-page-form-group input {
    width: 100%;
    min-height: 56px;

    padding: 15px 18px;

    border: 1px solid var(--border-hover);
    border-radius: 12px;

    outline: none;

    background: var(--bg-secondary);

    font-family: var(--font-body, sans-serif);
    font-size: 14px;

    color: var(--text-primary);

    transition:
        border-color 250ms ease,
        box-shadow 250ms ease;
}

.cardan-page-form-group input::placeholder {
    color: var(--text-muted);
}

.cardan-page-form-group input:focus {
    border-color: var(--cardan-accent);

    box-shadow:
        0 0 0 3px var(--cardan-accent-soft);
}

.cardan-page-form-group small {
    font-size: 12px;
    line-height: 1.6;

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


/* =========================================================
   TESTER CONSENT
========================================================= */

.cardan-page-form-consent {
    display: flex;
    align-items: flex-start;

    gap: 13px;
}

.cardan-page-form-consent input {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    margin-top: 4px;

    accent-color: var(--cardan-accent);
}

.cardan-page-form-consent label {
    font-size: 12px;
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================================
   DISABLED FORM BUTTON
========================================================= */

.cardan-page-form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;
    min-height: 58px;

    padding: 10px 12px 10px 23px;

    border: 1px solid var(--cardan-border);
    border-radius: 100px;

    background: var(--cardan-accent-soft);

    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;

    color: var(--text-secondary);
}

.cardan-page-form-submit:disabled {
    cursor: not-allowed;
}

.cardan-page-form-submit span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--bg-elevated);

    font-size: 19px;

    color: var(--cardan-accent);
}

.cardan-page-form-status {
    margin: -5px 0 0;

    font-size: 12px;
    line-height: 1.75;

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


/* =========================================================
   EARLY ACCESS IMPORTANT NOTE
========================================================= */

.cardan-page-access-note {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    max-width: 850px;

    margin-top: 36px;
    padding: 22px 25px;

    border: 1px solid var(--cardan-border);
    border-radius: 15px;

    background: var(--cardan-accent-soft);
}

.cardan-page-access-note-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex-shrink: 0;

    border: 1px solid var(--cardan-accent);
    border-radius: 50%;

    font-family: var(--font-editorial);
    font-size: 16px;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-access-note p {
    margin: 0;

    font-size: 12px;
    line-height: 1.9;

    color: var(--text-secondary);
}

.cardan-page-access-note strong {
    color: var(--text-primary);
}


/* =========================================================
   CARDAN SOCIAL LINKS
========================================================= */

.cardan-page-connect {
    padding:
        clamp(110px, 11vw, 175px)
        var(--page-padding);

    background: var(--bg-primary);

    border-top: 1px solid var(--border);
}

.cardan-page-connect-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: clamp(55px, 8vw, 125px);
}

.cardan-page-connect-heading h2 {
    margin: 0 0 35px;

    font-family: var(--font-editorial);
    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    letter-spacing: -0.05em;
    line-height: 1.02;

    color: var(--text-primary);
}

.cardan-page-connect-heading h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-connect-heading > p {
    max-width: 440px;

    margin: 0;

    font-size: 16px;
    line-height: 1.85;

    color: var(--text-secondary);
}

.cardan-page-social-links {
    border-top: 1px solid var(--border);
}

.cardan-page-social-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    min-width: 0;

    padding: 30px 0;

    border-bottom: 1px solid var(--border);

    transition: padding 300ms ease;
}

.cardan-page-social-link:hover {
    padding-left: 10px;
}

.cardan-page-social-link > div {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 10px;
}

.cardan-page-social-label {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;

    color: var(--cardan-accent);
}

.cardan-page-social-name {
    overflow-wrap: anywhere;

    font-family: var(--font-heading);
    font-size: clamp(17px, 2vw, 24px);
    font-weight: 600;

    letter-spacing: -0.04em;

    color: var(--text-primary);
}

.cardan-page-social-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border: 1px solid var(--cardan-border);
    border-radius: 50%;

    background: var(--cardan-accent-soft);

    font-size: 21px;

    color: var(--cardan-accent);

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}

.cardan-page-social-link:hover .cardan-page-social-arrow {
    transform: rotate(45deg);

    background: var(--bg-secondary);
}


/* =========================================================
   CARDAN CLOSING SECTION
========================================================= */

.cardan-page-closing {
    position: relative;
    isolation: isolate;

    padding:
        clamp(110px, 12vw, 180px)
        var(--page-padding);

    background:
        radial-gradient(
            ellipse at 25% 85%,
            var(--cardan-accent-soft),
            transparent 60%
        ),
        var(--bg-secondary);

    border-top: 1px solid var(--border);
}

.cardan-page-closing-content {
    max-width: 890px;
}

.cardan-page-closing-eyebrow {
    display: block;

    margin-bottom: 28px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: var(--cardan-accent);
}

.cardan-page-closing h2 {
    margin: 0 0 30px;

    font-family: var(--font-editorial);
    font-size: clamp(78px, 9vw, 140px);
    font-weight: 400;

    letter-spacing: -0.055em;
    line-height: 0.98;

    color: var(--text-primary);
}

.cardan-page-closing h2 em {
    font-weight: 400;
    font-style: italic;

    color: var(--cardan-accent);
}

.cardan-page-closing-content > p {
    max-width: 560px;

    margin: 0;

    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.85;

    color: var(--text-secondary);
}


/* =========================================================
   NEXT VENTURE
========================================================= */

.cardan-page-next-venture {
    display: flex;
    flex-direction: column;

    gap: 15px;

    max-width: 600px;

    margin-top: clamp(85px, 10vw, 145px);
    padding: 33px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            rgba(203, 151, 71, 0.10),
            transparent 70%
        ),
        var(--bg-primary);

    transition:
        transform 300ms ease,
        border-color 300ms ease;
}

.cardan-page-next-venture:hover {
    transform: translateY(-5px);

    border-color: #c69a5c;
}

.cardan-page-next-label {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;

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

.cardan-page-next-name {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    font-family: var(--font-editorial);
    font-size: clamp(40px, 4.4vw, 67px);
    font-weight: 400;

    letter-spacing: -0.045em;
    line-height: 1.1;

    color: var(--text-primary);
}

.cardan-page-next-name span {
    font-family: var(--font-heading);
    font-size: 29px;

    color: #c69a5c;
}

.cardan-page-next-description {
    font-size: 13px;
    line-height: 1.6;

    color: var(--text-secondary);
}


/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media (max-width: 1100px) {

    .cardan-page-hero-grid {
        gap: 40px;
    }

    .cardan-page-title {
        font-size: clamp(75px, 8vw, 115px);
    }

    .cardan-page-hero-visual {
        min-height: 540px;
    }

    .cardan-page-about-grid,
    .cardan-page-role-grid,
    .cardan-page-connect-grid {
        gap: 55px;
    }

    .cardan-page-about-heading h2,
    .cardan-page-role-heading h2,
    .cardan-page-connect-heading h2 {
        font-size: clamp(60px, 7vw, 90px);
    }

    .cardan-page-access-panel {
        gap: 45px;
    }

}


/* =========================================================
   SMALL TABLET RESPONSIVENESS
========================================================= */

@media (max-width: 850px) {

    /* Hero */

    .cardan-page-hero-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .cardan-page-hero-content {
        max-width: 700px;
    }

    .cardan-page-title {
        font-size: clamp(85px, 11vw, 120px);
    }

    .cardan-page-hero-visual {
        min-height: 530px;
    }

    /* Snapshot */

    .cardan-page-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cardan-page-snapshot-item {
        padding: 28px;
    }

    .cardan-page-snapshot-item:first-child {
        padding-left: 28px;
    }

    .cardan-page-snapshot-item:nth-child(2) {
        border-right: none;
    }

    .cardan-page-snapshot-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }

    /* Content grids */

    .cardan-page-about-grid,
    .cardan-page-role-grid,
    .cardan-page-connect-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    /* Features */

    .cardan-page-features-intro,
    .cardan-page-gallery-intro,
    .cardan-page-access-intro {
        align-items: flex-start;
        flex-direction: column;

        gap: 30px;
    }

    .cardan-page-features-intro > p,
    .cardan-page-gallery-intro > p,
    .cardan-page-access-intro > p {
        max-width: 650px;
    }

    .cardan-page-features-grid {
        grid-template-columns: 1fr;
    }

    .cardan-page-feature-card {
        min-height: 300px;
    }

    .cardan-page-feature-top {
        margin-bottom: 40px;
    }

    /* Development */

    .cardan-page-development-card {
        grid-template-columns: 1fr;
    }

    .cardan-page-development-visual {
        min-height: 450px;
    }

    /* Early access */

    .cardan-page-access-steps {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .cardan-page-access-step-number {
        margin-bottom: 25px;
    }

    .cardan-page-access-panel {
        grid-template-columns: 1fr;

        gap: 50px;
    }

}


/* =========================================================
   MOBILE RESPONSIVENESS
========================================================= */

@media (max-width: 700px) {

    /* Hero */

    .cardan-page-hero {
        min-height: auto;

        padding-top: 105px;
        padding-bottom: 90px;
    }

    .cardan-page-breadcrumb {
        margin-bottom: 65px;
    }

    .cardan-page-title {
        font-size: clamp(75px, 12vw, 100px);
    }

    .cardan-page-hero-visual {
        min-height: 470px;
    }

    /* Section labels */

    .cardan-page-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 16px;

        margin-bottom: 65px;
    }

    /* Main sections */

    .cardan-page-about,
    .cardan-page-features,
    .cardan-page-gallery,
    .cardan-page-role,
    .cardan-page-development,
    .cardan-page-early-access,
    .cardan-page-connect {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    /* Gallery */

    .cardan-page-gallery-grid {
        grid-template-columns: 1fr;
    }

    .cardan-page-gallery-item img {
        height: auto;
        max-height: 550px;
        min-height: 250px;

        object-fit: contain;
    }

    /* Text */

    .cardan-page-about-heading h2,
    .cardan-page-role-heading h2,
    .cardan-page-connect-heading h2,
    .cardan-page-gallery-intro h2,
    .cardan-page-access-intro h2 {
        font-size: clamp(65px, 11vw, 90px);
    }

    .cardan-page-features-intro h2 {
        font-size: clamp(60px, 10vw, 80px);
    }

    .cardan-page-development-content h2 {
        font-size: clamp(58px, 10vw, 80px);
    }

    .cardan-page-access-panel-heading h3 {
        font-size: clamp(49px, 9vw, 70px);
    }

}


/* =========================================================
   SMALL MOBILE SCREENS
========================================================= */

@media (max-width: 600px) {

    /* Hero */

    .cardan-page-breadcrumb {
        font-size: 11px;
    }

    .cardan-page-eyebrow {
        gap: 9px;

        font-size: 9px;
        letter-spacing: 0.10em;
    }

    .cardan-page-title {
        font-size: clamp(69px, 14vw, 85px);
    }

    .cardan-page-hero-lead {
        font-size: 24px;
    }

    .cardan-page-hero-description {
        font-size: 15px;
    }

    .cardan-page-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Hero visual */

    .cardan-page-hero-visual {
        min-height: 405px;

        padding: 23px;

        border-radius: 22px;
    }

    .cardan-page-orbit-one {
        width: 285px;
        height: 285px;
    }

    .cardan-page-orbit-two {
        width: 220px;
        height: 220px;
    }

    .cardan-page-document-card {
        min-height: 235px;

        padding: 20px;
    }

    .cardan-page-document-body {
        padding: 30px 0;
    }

    .cardan-page-floating-symbol {
        right: 7%;
        bottom: 23%;

        width: 60px;
        height: 60px;

        border-radius: 16px;

        font-size: 37px;
    }

    .cardan-page-visual-header span,
    .cardan-page-visual-footer span {
        font-size: 8px;
    }

    /* Snapshot */

    .cardan-page-snapshot-item {
        gap: 12px;

        padding: 24px 15px;
    }

    .cardan-page-snapshot-item:first-child {
        padding-left: 15px;
    }

    .cardan-page-snapshot-label {
        font-size: 9px;
    }

    .cardan-page-snapshot-value {
        font-size: 14px;
    }

    /* Section headings */

    .cardan-page-section-number {
        font-size: 23px;
    }

    .cardan-page-section-line {
        width: 36px;
    }

    .cardan-page-section-name {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .cardan-page-section-note {
        font-size: 9px;
    }

    /* Main headings */

    .cardan-page-about-heading h2,
    .cardan-page-role-heading h2,
    .cardan-page-connect-heading h2,
    .cardan-page-gallery-intro h2,
    .cardan-page-access-intro h2 {
        font-size: clamp(56px, 12vw, 77px);
    }

    .cardan-page-features-intro h2 {
        font-size: clamp(53px, 11vw, 73px);
    }

    .cardan-page-about-content .cardan-page-about-lead {
        font-size: 22px;
    }

    .cardan-page-about-content p,
    .cardan-page-role-content p,
    .cardan-page-connect-heading > p {
        font-size: 15px;
    }

    /* Features */

    .cardan-page-feature-card {
        min-height: 320px;

        padding: 28px;
    }

    .cardan-page-feature-card h3 {
        font-size: 43px;
    }

    /* Gallery */

    .cardan-page-gallery-item {
        border-radius: 18px;
    }

    .cardan-page-gallery-item img {
        padding: 10px;
    }

    .cardan-page-gallery-item figcaption {
        padding: 18px;
    }

    .cardan-page-gallery-item figcaption span {
        font-size: 8px;
    }

    /* Development */

    .cardan-page-development-card {
        border-radius: 22px;
    }

    .cardan-page-development-content {
        padding: 38px 25px;
    }

    .cardan-page-development-content h2 {
        font-size: clamp(51px, 11vw, 73px);
    }

    .cardan-page-development-visual {
        min-height: 370px;
    }

    .cardan-page-development-visual-ring {
        width: 275px;
        height: 275px;
    }

    .cardan-page-development-visual-ring-inner {
        width: 200px;
        height: 200px;
    }

    .cardan-page-development-visual-symbol {
        font-size: 105px;
    }

    /* Early access */

    .cardan-page-access-steps {
        margin-bottom: 65px;
    }

    .cardan-page-access-step {
        padding: 27px;
    }

    .cardan-page-access-panel {
        padding: 30px 24px;

        border-radius: 21px;
    }

    .cardan-page-access-panel-heading h3 {
        font-size: clamp(45px, 10vw, 65px);
    }

    .cardan-page-access-note {
        gap: 13px;

        padding: 20px;
    }

    /* Social links */

    .cardan-page-social-link {
        gap: 15px;

        padding: 25px 0;
    }

    .cardan-page-social-name {
        font-size: 18px;
    }

    /* Closing */

    .cardan-page-closing {
        padding-top: 105px;
        padding-bottom: 115px;
    }

    .cardan-page-closing h2 {
        font-size: clamp(67px, 13vw, 90px);
    }

    .cardan-page-closing-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .cardan-page-next-venture {
        padding: 27px;
    }

    .cardan-page-next-name {
        font-size: clamp(37px, 9vw, 50px);
    }

}


/* =========================================================
   EXTRA SMALL MOBILE SCREENS
========================================================= */

@media (max-width: 370px) {

    .cardan-page-title {
        font-size: 65px;
    }

    .cardan-page-hero-visual {
        min-height: 365px;
    }

    .cardan-page-document-card {
        width: 82%;
        min-height: 215px;
    }

    .cardan-page-feature-card h3 {
        font-size: 37px;
    }

    .cardan-page-development-content h2 {
        font-size: 47px;
    }

    .cardan-page-connect-heading h2 {
        font-size: 54px;
    }

    .cardan-page-access-panel-heading h3 {
        font-size: 43px;
    }

    .cardan-page-next-name {
        font-size: 34px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cardan-page-title,
    .cardan-page-orbit-one,
    .cardan-page-development-visual-ring {
        animation: none;
    }

    .cardan-page-button,
    .cardan-page-button-arrow,
    .cardan-page-document-card,
    .cardan-page-feature-card,
    .cardan-page-gallery-item,
    .cardan-page-social-link,
    .cardan-page-social-arrow,
    .cardan-page-next-venture {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   CARDAN TESTER FORM
   INTERACTIVE SUBMIT BUTTON
========================================= */

/* Default appearance */
.cardan-page-tester-form .cardan-page-form-submit {
    background: var(--cardan-accent-soft);
    border-color: var(--cardan-border);

    color: var(--text-secondary);

    cursor: pointer;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease,
        box-shadow 250ms ease,
        transform 250ms ease;
}

/* Consent checked: activate visual highlight */
.cardan-page-tester-form:has(
    #cardan-tester-consent:checked
) .cardan-page-form-submit {

    background: var(--cardan-accent);
    border-color: var(--cardan-accent);

    color: #102739;

    box-shadow: 0 10px 30px rgba(65, 145, 204, 0.20);
}

/* Highlight the arrow */
.cardan-page-tester-form:has(
    #cardan-tester-consent:checked
) .cardan-page-form-submit span:last-child {

    background: #173e59;
    color: #ffffff;
}

/* Button hover */
.cardan-page-tester-form:has(
    #cardan-tester-consent:checked
) .cardan-page-form-submit:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(65, 145, 204, 0.28);
}

/* Light-mode adjustments */
html[data-theme="light"]
.cardan-page-tester-form:has(
    #cardan-tester-consent:checked
) .cardan-page-form-submit {

    color: #ffffff;
}

html[data-theme="light"]
.cardan-page-tester-form:has(
    #cardan-tester-consent:checked
) .cardan-page-form-submit span:last-child {

    background: #ffffff;
    color: #286a9d;
}

/* Keyboard accessibility */
.cardan-page-form-submit:focus-visible {
    outline: 3px solid var(--cardan-accent);
    outline-offset: 4px;
}

/* =========================================================
   DON'T BREAK PROD
   DEDICATED VENTURE PAGE
========================================================= */


/* ---------------------------------------------------------
   01. DESIGN VARIABLES
--------------------------------------------------------- */

.dbp-page {
    --dbp-bg: #0b1310;
    --dbp-bg-secondary: #111d16;
    --dbp-surface: #16241b;
    --dbp-surface-hover: #1c3022;

    --dbp-text: #f3f7f2;
    --dbp-text-muted: #a5b9a9;
    --dbp-text-soft: #788d7d;

    --dbp-accent: #baff72;
    --dbp-accent-dark: #79b83e;
    --dbp-accent-soft: rgba(186, 255, 114, 0.09);

    --dbp-border: rgba(186, 255, 114, 0.13);

    --dbp-danger: #ff7b87;
    --dbp-danger-soft: rgba(255, 123, 135, 0.10);

    background: var(--dbp-bg);
    color: var(--dbp-text);

    overflow: hidden;
}


/* Light Theme */

html[data-theme="light"] .dbp-page {
    --dbp-bg: #f5f8f3;
    --dbp-bg-secondary: #eaf1e7;
    --dbp-surface: #ffffff;
    --dbp-surface-hover: #edf5e8;

    --dbp-text: #152319;
    --dbp-text-muted: #4c6251;
    --dbp-text-soft: #6e8373;

    --dbp-accent: #427d20;
    --dbp-accent-dark: #315e17;
    --dbp-accent-soft: rgba(66, 125, 32, 0.08);

    --dbp-border: rgba(30, 77, 35, 0.13);

    --dbp-danger: #b43d4b;
    --dbp-danger-soft: rgba(180, 61, 75, 0.08);
}


/* ---------------------------------------------------------
   02. SHARED CONTAINER
--------------------------------------------------------- */

.dbp-page-container {
    width: min(1200px, calc(100% - 80px));
    margin-inline: auto;
}

.dbp-page section {
    position: relative;
}

.dbp-page h1,
.dbp-page h2,
.dbp-page h3,
.dbp-page p {
    margin-top: 0;
}

.dbp-page a {
    text-decoration: none;
}


/* ---------------------------------------------------------
   03. SHARED SECTION HEADINGS
--------------------------------------------------------- */

.dbp-page-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;

    margin-bottom: 65px;
}

.dbp-page-section-label {
    display: flex;
    align-items: center;
    gap: 17px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--dbp-text-muted);
}

.dbp-page-section-label > span:first-child {
    color: var(--dbp-accent);
}

.dbp-page-section-line {
    display: block;

    width: 50px;
    height: 1px;

    background: var(--dbp-border);
}

.dbp-page-section-note {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;

    text-align: right;

    color: var(--dbp-text-soft);
}

.dbp-page-eyebrow-text {
    display: inline-block;

    margin-bottom: 22px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--dbp-accent);
}


/* ---------------------------------------------------------
   04. SHARED BUTTONS
--------------------------------------------------------- */

.dbp-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    min-height: 57px;

    padding: 15px 22px;

    border: 1px solid transparent;
    border-radius: 100px;

    font-size: 13px;
    font-weight: 700;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease,
        transform 250ms ease,
        box-shadow 250ms ease;
}

.dbp-page-button > span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 17px;
}

.dbp-page-button-primary {
    background: #baff72;
    color: #101d11;

    border-color: #baff72;
}

.dbp-page-button-primary > span:last-child {
    background: #253d1a;
    color: #baff72;
}

.dbp-page-button-primary:hover {
    background: #d2ffa3;
    border-color: #d2ffa3;

    transform: translateY(-3px);

    box-shadow: 0 14px 35px rgba(186, 255, 114, 0.14);
}

.dbp-page-button-secondary {
    background: transparent;

    color: var(--dbp-text);

    border-color: var(--dbp-border);
}

.dbp-page-button-secondary > span:last-child {
    background: var(--dbp-accent-soft);

    color: var(--dbp-accent);
}

.dbp-page-button-secondary:hover {
    border-color: var(--dbp-accent);

    transform: translateY(-3px);
}


/* ---------------------------------------------------------
   05. HERO SECTION
--------------------------------------------------------- */

.dbp-page-hero {
    /*
       Keep the hero dark in both website themes.
       This gives the page its terminal-inspired identity.
    */

    --dbp-text: #f3f7f2;
    --dbp-text-muted: #a5b9a9;
    --dbp-text-soft: #788d7d;
    --dbp-accent: #baff72;
    --dbp-border: rgba(186, 255, 114, 0.16);

    min-height: 760px;

    padding: 46px 0 105px;

    background:
        radial-gradient(
            ellipse at 75% 35%,
            rgba(70, 132, 65, 0.13),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #09110d 0%,
            #0c1911 55%,
            #09110d 100%
        );

    color: var(--dbp-text);
}

.dbp-page-hero-glow {
    position: absolute;

    top: 0;
    right: -15%;

    width: 75%;
    height: 100%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(155, 232, 87, 0.055),
            transparent 65%
        );
}

.dbp-page-breadcrumb {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 75px;

    font-size: 13px;

    color: #a5b9a9;
}

.dbp-page-breadcrumb a {
    color: #baff72;
}

.dbp-page-breadcrumb a:hover {
    text-decoration: underline;
}

.dbp-page-hero-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, 0.98fr);

    align-items: center;

    gap: 65px;
}

.dbp-page-hero-content {
    min-width: 0;
}

.dbp-page-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 40px;

    color: #b2c4b3;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.dbp-page-status-dot,
.dbp-page-live-indicator {
    display: inline-block;

    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #baff72;

    box-shadow: 0 0 15px rgba(186, 255, 114, 0.75);
}

.dbp-page-brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 24px;

    color: #baff72;
}

.dbp-page-brand-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    border: 1px solid rgba(186, 255, 114, 0.25);
    border-radius: 11px;

    background: rgba(186, 255, 114, 0.07);

    font-family: monospace;
    font-size: 20px;
    font-weight: 700;
}

.dbp-page-brand-name {
    font-family: monospace;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.dbp-page-hero h1 {
    margin-bottom: 28px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(4.5rem, 7vw, 7.3rem);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 0.98;

    color: #f3f7f2;
}

.dbp-page-title-highlight {
    color: #baff72;
}

.dbp-page-hero-lead {
    max-width: 520px;

    margin-bottom: 24px;

    font-size: clamp(20px, 2.2vw, 27px);
    font-weight: 500;
    line-height: 1.4;

    color: #e1ebdf;
}

.dbp-page-hero-description {
    max-width: 510px;

    margin-bottom: 33px;

    font-size: 14px;
    line-height: 1.9;

    color: #a5b9a9;
}

.dbp-page-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 32px;

    padding: 13px 19px;

    background: rgba(186, 255, 114, 0.065);

    border: 1px solid rgba(186, 255, 114, 0.13);
    border-radius: 15px;
}

.dbp-page-hero-status > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dbp-page-status-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #a5b9a9;
}

.dbp-page-hero-status strong {
    font-size: 13px;
    font-weight: 600;

    color: #f3f7f2;
}

.dbp-page-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* ---------------------------------------------------------
   06. HERO CODE REVIEW WINDOW
--------------------------------------------------------- */

.dbp-page-hero-visual {
    min-width: 0;
}

.dbp-page-review-window {
    overflow: hidden;

    border: 1px solid rgba(186, 255, 114, 0.20);
    border-radius: 20px;

    background: #101b15;

    box-shadow:
        0 25px 85px rgba(0, 0, 0, 0.30),
        0 0 70px rgba(186, 255, 114, 0.035);
}

.dbp-page-window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding: 17px 20px;

    background: #17241b;

    border-bottom: 1px solid rgba(186, 255, 114, 0.10);
}

.dbp-page-window-dots {
    display: flex;
    gap: 6px;
}

.dbp-page-window-dots span {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #4c6550;
}

.dbp-page-window-dots span:first-child {
    background: #e16a74;
}

.dbp-page-window-dots span:nth-child(2) {
    background: #e7be67;
}

.dbp-page-window-dots span:last-child {
    background: #94d975;
}

.dbp-page-window-title {
    font-family: monospace;
    font-size: 10px;

    color: #98ad9b;
}

.dbp-page-window-icon {
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;

    color: #baff72;
}

.dbp-page-review-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;

    padding: 25px 24px 20px;
}

.dbp-page-review-label,
.dbp-page-contract-label,
.dbp-page-decision-label {
    display: block;

    margin-bottom: 10px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #a2bd9d;
}

.dbp-page-review-meta h2 {
    margin: 0;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.3;

    color: #f3f7f2;
}

.dbp-page-review-badge {
    padding: 7px 10px;

    border: 1px solid rgba(186, 255, 114, 0.20);
    border-radius: 6px;

    background: rgba(186, 255, 114, 0.07);

    font-family: monospace;
    font-size: 9px;
    font-weight: 700;

    color: #baff72;
}

.dbp-page-contract {
    margin: 0 24px 18px;
    padding: 15px 17px;

    border-left: 3px solid #baff72;
    border-radius: 0 9px 9px 0;

    background: #1a2d1f;
}

.dbp-page-contract p {
    margin: 0;

    font-size: 12px;
    line-height: 1.7;

    color: #dce8dc;
}

.dbp-page-code-panel {
    margin: 0 24px 20px;

    overflow: hidden;

    border: 1px solid rgba(186, 255, 114, 0.11);
    border-radius: 10px;

    background: #08110d;
}

.dbp-page-code-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 12px 15px;

    border-bottom: 1px solid rgba(186, 255, 114, 0.10);

    font-family: monospace;
    font-size: 10px;

    color: #a3b9a5;
}

.dbp-page-code-panel pre {
    margin: 0;
    padding: 19px 15px;

    overflow-x: auto;

    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    line-height: 1.9;

    color: #e0ebe0;

    tab-size: 2;
}

.dbp-code-comment {
    color: #7d9980;
}

.dbp-code-removed {
    display: inline;

    color: #ff8e99;

    background: rgba(255, 123, 135, 0.09);
}

.dbp-code-added {
    display: inline;

    color: #baff72;

    background: rgba(186, 255, 114, 0.08);
}

.dbp-page-decision-panel {
    padding: 0 24px 26px;
}

.dbp-page-decision-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dbp-page-decision-options span {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 45px;

    border: 1px solid;
    border-radius: 8px;

    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
}

.dbp-page-decision-ship {
    color: #baff72;
    border-color: rgba(186, 255, 114, 0.30) !important;
    background: rgba(186, 255, 114, 0.07);
}

.dbp-page-decision-block {
    color: #ff8e99;
    border-color: rgba(255, 123, 135, 0.30) !important;
    background: rgba(255, 123, 135, 0.07);
}

.dbp-page-visual-caption {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    margin-top: 18px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #9bad9e;
}

.dbp-page-visual-disclaimer {
    margin-top: 13px;

    font-size: 11px;
    line-height: 1.6;

    color: #819483;
}


/* ---------------------------------------------------------
   07. PLATFORM SNAPSHOT
--------------------------------------------------------- */

.dbp-page-snapshot {
    padding: 34px 0;

    background: var(--dbp-bg-secondary);

    border-top: 1px solid var(--dbp-border);
    border-bottom: 1px solid var(--dbp-border);
}

.dbp-page-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dbp-page-snapshot-item {
    display: flex;
    flex-direction: column;
    gap: 11px;

    padding: 10px 25px;

    border-left: 1px solid var(--dbp-border);
}

.dbp-page-snapshot-item:first-child {
    padding-left: 0;
    border-left: 0;
}

.dbp-page-snapshot-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;

    color: var(--dbp-text-soft);
}

.dbp-page-snapshot-item strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;

    color: var(--dbp-text);
}


/* ---------------------------------------------------------
   08. ABOUT / THE IDEA
--------------------------------------------------------- */

.dbp-page-about {
    padding: 115px 0;
}

.dbp-page-about-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 100px;
}

.dbp-page-about-heading h2,
.dbp-page-value-heading h2,
.dbp-page-role-heading h2 {
    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(42px, 5.3vw, 74px);
    font-weight: 750;
    letter-spacing: -0.06em;
    line-height: 1.08;

    color: var(--dbp-text);
}

.dbp-page-about-heading h2 em,
.dbp-page-value-heading h2 em,
.dbp-page-role-heading h2 em {
    display: block;

    margin-top: 10px;

    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--dbp-accent);
}

.dbp-page-about-content {
    padding-top: 8px;
}

.dbp-page-about-lead {
    margin-bottom: 29px;

    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;

    color: var(--dbp-text);
}

.dbp-page-about-content > p:not(.dbp-page-about-lead) {
    margin-bottom: 19px;

    font-size: 14px;
    line-height: 1.95;

    color: var(--dbp-text-muted);
}

.dbp-page-about-callout {
    display: flex;
    flex-direction: column;
    gap: 17px;

    margin-top: 34px;
    padding: 26px 29px;

    border: 1px solid var(--dbp-border);
    border-left: 3px solid var(--dbp-accent);
    border-radius: 12px;

    background: var(--dbp-surface);
}

.dbp-page-about-callout span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--dbp-text-soft);
}

.dbp-page-about-callout strong {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;

    color: var(--dbp-text);
}


/* ---------------------------------------------------------
   09. HOW IT WORKS
--------------------------------------------------------- */

.dbp-page-process {
    padding: 110px 0;

    background: var(--dbp-bg-secondary);

    border-top: 1px solid var(--dbp-border);
    border-bottom: 1px solid var(--dbp-border);
}

.dbp-page-process-intro,
.dbp-page-preview-intro,
.dbp-page-modes-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 60px;

    margin-bottom: 50px;
}

.dbp-page-process-intro h2,
.dbp-page-preview-intro h2,
.dbp-page-modes-intro h2,
.dbp-page-resources-heading h2,
.dbp-page-feedback-intro h2 {
    margin-bottom: 0;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(42px, 5vw, 68px);
    font-weight: 750;
    letter-spacing: -0.06em;
    line-height: 1.08;

    color: var(--dbp-text);
}

.dbp-page-process-intro h2 em,
.dbp-page-preview-intro h2 em,
.dbp-page-modes-intro h2 em,
.dbp-page-resources-heading h2 em,
.dbp-page-feedback-intro h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--dbp-accent);
}

.dbp-page-process-intro > p,
.dbp-page-preview-intro > p,
.dbp-page-modes-intro > p {
    max-width: 380px;

    margin-bottom: 0;

    font-size: 14px;
    line-height: 1.9;

    color: var(--dbp-text-muted);
}

.dbp-page-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.dbp-page-process-card {
    display: flex;
    flex-direction: column;

    min-height: 315px;

    padding: 28px 23px;

    border: 1px solid var(--dbp-border);
    border-radius: 14px;

    background: var(--dbp-surface);

    transition:
        transform 250ms ease,
        border-color 250ms ease;
}

.dbp-page-process-card:hover {
    transform: translateY(-5px);
    border-color: var(--dbp-accent);
}

.dbp-page-process-number {
    font-family: monospace;
    font-size: 12px;

    color: var(--dbp-accent);
}

.dbp-page-process-icon {
    display: block;

    margin-top: 29px;
    margin-bottom: 24px;

    font-family: monospace;
    font-size: 26px;

    color: var(--dbp-accent);
}

.dbp-page-process-card h3 {
    margin-bottom: 13px;

    font-size: 19px;
    font-weight: 650;
    line-height: 1.35;

    color: var(--dbp-text);
}

.dbp-page-process-card p {
    margin-bottom: 25px;

    font-size: 12px;
    line-height: 1.85;

    color: var(--dbp-text-muted);
}

.dbp-page-process-footer {
    margin-top: auto;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--dbp-text-soft);
}


/* ---------------------------------------------------------
   10. PRACTICE AND ARCADE MODES
--------------------------------------------------------- */

.dbp-page-modes {
    padding: 115px 0;
}

.dbp-page-modes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.dbp-page-mode-card {
    display: flex;
    flex-direction: column;

    min-height: 530px;

    padding: 40px;

    border: 1px solid var(--dbp-border);
    border-radius: 20px;

    background: var(--dbp-surface);
}

.dbp-page-mode-practice {
    background:
        radial-gradient(
            circle at 100% 0%,
            var(--dbp-accent-soft),
            transparent 45%
        ),
        var(--dbp-surface);
}

.dbp-page-mode-arcade {
    border-color: rgba(235, 178, 93, 0.22);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(235, 178, 93, 0.055),
            transparent 45%
        ),
        var(--dbp-surface);
}

.dbp-page-mode-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 45px;
}

.dbp-page-mode-number,
.dbp-page-mode-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;

    color: var(--dbp-text-soft);
}

.dbp-page-mode-symbol {
    font-family: monospace;
    font-size: 28px;
    font-weight: 700;

    color: var(--dbp-accent);
}

.dbp-page-mode-arcade .dbp-page-mode-symbol {
    color: #e4ae64;
}

.dbp-page-mode-category {
    margin-bottom: 19px;

    color: var(--dbp-accent);
}

.dbp-page-mode-arcade .dbp-page-mode-category {
    color: #e4ae64;
}

.dbp-page-mode-card h3 {
    margin-bottom: 22px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(37px, 4vw, 53px);
    font-weight: 750;
    letter-spacing: -0.05em;
}

.dbp-page-mode-card h3 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--dbp-accent);
}

.dbp-page-mode-arcade h3 em {
    color: #e4ae64;
}

.dbp-page-mode-description {
    max-width: 370px;

    margin-bottom: 28px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--dbp-text-muted);
}

.dbp-page-mode-features {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin: 0 0 35px;
    padding: 0;

    list-style: none;
}

.dbp-page-mode-features li {
    position: relative;

    padding-left: 23px;

    font-size: 12px;
    line-height: 1.7;

    color: var(--dbp-text-muted);
}

.dbp-page-mode-features li::before {
    content: "↗";

    position: absolute;
    left: 0;

    color: var(--dbp-accent);
}

.dbp-page-mode-arcade
.dbp-page-mode-features li::before {
    color: #e4ae64;
}

.dbp-page-mode-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-top: auto;
    padding: 20px 0 0;

    border-top: 1px solid var(--dbp-border);

    font-size: 13px;
    font-weight: 700;

    color: var(--dbp-accent);

    transition: color 250ms ease;
}

.dbp-page-mode-arcade .dbp-page-mode-link {
    color: #e4ae64;
}

.dbp-page-mode-link:hover {
    color: var(--dbp-text);
}

.dbp-page-mode-link > span:last-child {
    font-size: 21px;
}


/* ---------------------------------------------------------
   11. PLATFORM SCREENSHOT
--------------------------------------------------------- */

.dbp-page-preview {
    padding: 115px 0;

    background: var(--dbp-bg-secondary);

    border-top: 1px solid var(--dbp-border);
    border-bottom: 1px solid var(--dbp-border);
}

.dbp-page-preview-figure {
    margin: 0;
}

.dbp-page-preview-image {
    overflow: hidden;

    border: 1px solid var(--dbp-border);
    border-radius: 18px;

    background: var(--dbp-surface);

    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.12);
}

.dbp-page-preview-image img {
    display: block;

    width: 100%;
    height: auto;

    transition: transform 500ms ease;
}

.dbp-page-preview-image:hover img {
    transform: scale(1.015);
}

.dbp-page-preview-figure figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;

    margin-top: 22px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;

    color: var(--dbp-text-soft);
}

.dbp-page-preview-figure figcaption a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--dbp-accent);
}

.dbp-page-preview-figure figcaption a:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   12. ENGINEERING VALUE
--------------------------------------------------------- */

.dbp-page-value {
    padding: 115px 0;
}

.dbp-page-value-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 100px;
}

.dbp-page-value-heading > p {
    max-width: 410px;

    margin-top: 30px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--dbp-text-muted);
}

.dbp-page-value-list {
    border-top: 1px solid var(--dbp-border);
}

.dbp-page-value-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 18px;

    padding: 28px 0;

    border-bottom: 1px solid var(--dbp-border);
}

.dbp-page-value-item > span {
    font-family: monospace;
    font-size: 12px;

    color: var(--dbp-accent);
}

.dbp-page-value-item h3 {
    margin-bottom: 11px;

    font-size: 18px;
    font-weight: 650;

    color: var(--dbp-text);
}

.dbp-page-value-item p {
    max-width: 410px;

    margin-bottom: 0;

    font-size: 13px;
    line-height: 1.85;

    color: var(--dbp-text-muted);
}


/* ---------------------------------------------------------
   13. MY INVOLVEMENT
--------------------------------------------------------- */

.dbp-page-role {
    padding: 115px 0;

    background: var(--dbp-bg-secondary);

    border-top: 1px solid var(--dbp-border);
    border-bottom: 1px solid var(--dbp-border);
}

.dbp-page-role-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 100px;
}

.dbp-page-role-lead {
    margin-bottom: 28px;

    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;

    color: var(--dbp-text);
}

.dbp-page-role-content > p:not(.dbp-page-role-lead) {
    margin-bottom: 20px;

    font-size: 14px;
    line-height: 1.95;

    color: var(--dbp-text-muted);
}

.dbp-page-role-callout {
    display: flex;
    flex-direction: column;
    gap: 15px;

    margin-top: 35px;
    padding: 25px 28px;

    border: 1px solid var(--dbp-border);
    border-radius: 12px;

    background: var(--dbp-surface);
}

.dbp-page-role-callout span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;

    color: var(--dbp-text-soft);
}

.dbp-page-role-callout strong {
    font-size: 21px;
    font-weight: 650;
    line-height: 1.4;

    color: var(--dbp-accent);
}


/* ---------------------------------------------------------
   14. RESOURCES
--------------------------------------------------------- */

.dbp-page-resources {
    padding: 115px 0;
}

.dbp-page-resources-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 100px;
}

.dbp-page-resources-heading > p {
    max-width: 400px;

    margin-top: 25px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--dbp-text-muted);
}

.dbp-page-resource-links {
    border-top: 1px solid var(--dbp-border);
}

.dbp-page-resource-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 26px 0;

    border-bottom: 1px solid var(--dbp-border);

    color: var(--dbp-text);

    transition: padding 250ms ease;
}

.dbp-page-resource-link:hover {
    padding-left: 10px;
}

.dbp-page-resource-link > div {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dbp-page-resource-link > div > span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--dbp-text-soft);
}

.dbp-page-resource-link strong {
    font-size: 19px;
    font-weight: 600;

    color: var(--dbp-text);
}

.dbp-page-resource-link > span:last-child {
    font-size: 23px;

    color: var(--dbp-accent);
}


/* ---------------------------------------------------------
   15. FEEDBACK SECTION
--------------------------------------------------------- */

.dbp-page-feedback {
    padding: 115px 0;

    background: var(--dbp-bg-secondary);

    border-top: 1px solid var(--dbp-border);
    border-bottom: 1px solid var(--dbp-border);
}

.dbp-page-feedback-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    gap: 95px;
}

.dbp-page-feedback-intro > p {
    max-width: 410px;

    margin-top: 28px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--dbp-text-muted);
}

.dbp-page-feedback-types {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;

    margin-top: 35px;
}

.dbp-page-feedback-types span {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-size: 12px;
    font-weight: 600;

    color: var(--dbp-text);
}

.dbp-page-feedback-types span::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--dbp-accent);
}

.dbp-page-feedback-panel {
    padding: 35px;

    border: 1px solid var(--dbp-border);
    border-radius: 20px;

    background: var(--dbp-surface);
}

.dbp-page-feedback-panel-heading {
    margin-bottom: 30px;
}

.dbp-page-feedback-panel-heading > span {
    display: block;

    margin-bottom: 15px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;

    color: var(--dbp-accent);
}

.dbp-page-feedback-panel-heading h3 {
    margin-bottom: 14px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.05em;

    color: var(--dbp-text);
}

.dbp-page-feedback-panel-heading h3 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--dbp-accent);
}

.dbp-page-feedback-panel-heading p {
    margin-bottom: 0;

    font-size: 12px;
    line-height: 1.8;

    color: var(--dbp-text-muted);
}


/* Form Layout */

.dbp-page-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.dbp-page-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dbp-page-form-group label {
    font-size: 12px;
    font-weight: 600;

    color: var(--dbp-text);
}

.dbp-page-form-group input,
.dbp-page-form-group select,
.dbp-page-form-group textarea {
    width: 100%;

    padding: 15px 17px;

    border: 1px solid var(--dbp-border);
    border-radius: 9px;

    outline: none;

    background: var(--dbp-bg);

    color: var(--dbp-text);

    font: inherit;
    font-size: 13px;

    transition:
        border-color 250ms ease,
        box-shadow 250ms ease;
}

.dbp-page-form-group input,
.dbp-page-form-group select {
    min-height: 50px;
}

.dbp-page-form-group textarea {
    min-height: 145px;

    resize: vertical;

    line-height: 1.7;
}

.dbp-page-form-group input::placeholder,
.dbp-page-form-group textarea::placeholder {
    color: var(--dbp-text-soft);
    opacity: 0.85;
}

.dbp-page-form-group input:focus,
.dbp-page-form-group select:focus,
.dbp-page-form-group textarea:focus {
    border-color: var(--dbp-accent);

    box-shadow: 0 0 0 3px var(--dbp-accent-soft);
}

.dbp-page-form-group select {
    cursor: pointer;
}


/* Consent */

.dbp-page-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dbp-page-form-consent input {
    width: 17px;
    height: 17px;

    margin-top: 3px;

    flex-shrink: 0;

    accent-color: var(--dbp-accent);

    cursor: pointer;
}

.dbp-page-form-consent label {
    font-size: 12px;
    line-height: 1.8;

    color: var(--dbp-text-muted);

    cursor: pointer;
}


/* Disabled Submit Button */

.dbp-page-form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 56px;

    padding: 11px 13px 11px 22px;

    border: 1px solid var(--dbp-border);
    border-radius: 100px;

    background: var(--dbp-bg-secondary);

    color: var(--dbp-text-muted);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease;
}

.dbp-page-form-submit:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.dbp-page-form-submit > span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--dbp-accent-soft);
    color: var(--dbp-accent);

    font-size: 19px;
}

.dbp-page-form-status {
    margin: -7px 0 0;

    font-size: 11px;
    line-height: 1.8;

    color: var(--dbp-text-soft);
}


/* ---------------------------------------------------------
   16. CLOSING SECTION
--------------------------------------------------------- */

.dbp-page-closing {
    /*
       Closing section stays dark in both themes,
       matching the opening hero.
    */

    --dbp-text: #f3f7f2;
    --dbp-text-muted: #a5b9a9;
    --dbp-text-soft: #788d7d;
    --dbp-accent: #baff72;
    --dbp-border: rgba(186, 255, 114, 0.16);

    padding: 120px 0 70px;

    background:
        radial-gradient(
            ellipse at 55% 30%,
            rgba(100, 169, 72, 0.12),
            transparent 48%
        ),
        #08110d;

    color: var(--dbp-text);
}

.dbp-page-closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 800px;

    margin: 0 auto 115px;

    text-align: center;
}

.dbp-page-closing-eyebrow {
    margin-bottom: 30px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #baff72;
}

.dbp-page-closing-content h2 {
    margin-bottom: 30px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(65px, 10vw, 130px);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 0.95;

    color: #f3f7f2;
}

.dbp-page-closing-content h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: #baff72;
}

.dbp-page-closing-content > p {
    max-width: 450px;

    margin-bottom: 35px;

    font-size: 15px;
    line-height: 1.9;

    color: #a5b9a9;
}

.dbp-page-closing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}


/* Back to Ventures */

.dbp-page-next-link {
    display: flex;
    flex-direction: column;
    gap: 15px;

    padding: 32px 0;

    border-top: 1px solid var(--dbp-border);

    transition: padding-left 250ms ease;
}

.dbp-page-next-link:hover {
    padding-left: 12px;
}

.dbp-page-next-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;

    color: #9eb39f;
}

.dbp-page-next-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;

    font-family: var(--font-heading, Arial, sans-serif);
    font-size: clamp(30px, 4vw, 53px);
    font-weight: 700;
    letter-spacing: -0.05em;

    color: #f3f7f2;
}

.dbp-page-next-title > span {
    color: #baff72;
}

.dbp-page-next-description {
    font-size: 12px;
    line-height: 1.8;

    color: #a5b9a9;
}


/* ---------------------------------------------------------
   17. KEYBOARD ACCESSIBILITY
--------------------------------------------------------- */

.dbp-page a:focus-visible,
.dbp-page button:focus-visible {
    outline: 3px solid var(--dbp-accent);
    outline-offset: 4px;
}


/* =========================================================
   RESPONSIVE STYLES
========================================================= */


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
--------------------------------------------------------- */

@media (max-width: 1100px) {

    .dbp-page-hero-grid {
        gap: 35px;
    }

    .dbp-page-hero h1 {
        font-size: clamp(4rem, 6vw, 6rem);
    }

    .dbp-page-about-grid,
    .dbp-page-value-grid,
    .dbp-page-role-grid,
    .dbp-page-resources-grid,
    .dbp-page-feedback-grid {
        gap: 55px;
    }

    .dbp-page-process-card {
        padding: 25px 20px;
    }

    .dbp-page-mode-card {
        padding: 32px;
    }

}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

    .dbp-page-container {
        width: min(720px, calc(100% - 48px));
    }

    .dbp-page-hero {
        padding-bottom: 85px;
    }

    .dbp-page-breadcrumb {
        margin-bottom: 55px;
    }

    .dbp-page-hero-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .dbp-page-hero-content {
        max-width: 650px;
    }

    .dbp-page-hero h1 {
        font-size: clamp(5rem, 10vw, 7rem);
    }

    .dbp-page-hero-visual {
        max-width: 650px;
        width: 100%;

        margin-inline: auto;
    }

    .dbp-page-snapshot-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 30px 20px;
    }

    .dbp-page-snapshot-item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .dbp-page-about-grid,
    .dbp-page-value-grid,
    .dbp-page-role-grid,
    .dbp-page-resources-grid,
    .dbp-page-feedback-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dbp-page-about-content,
    .dbp-page-role-content {
        max-width: 620px;
    }

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

    .dbp-page-process-card {
        min-height: 290px;
    }

    .dbp-page-modes-grid {
        gap: 15px;
    }

    .dbp-page-mode-card {
        padding: 27px;
    }

    .dbp-page-feedback-panel {
        max-width: 650px;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    .dbp-page-container {
        width: calc(100% - 36px);
    }

    .dbp-page-section-heading {
        align-items: flex-start;
        gap: 15px;

        margin-bottom: 40px;
    }

    .dbp-page-section-label {
        gap: 10px;

        font-size: 9px;
        letter-spacing: 1.3px;
    }

    .dbp-page-section-line {
        width: 25px;
    }

    .dbp-page-section-note {
        max-width: 115px;

        font-size: 8px;
        letter-spacing: 1px;
        line-height: 1.7;
    }


    /* Hero */

    .dbp-page-hero {
        min-height: auto;

        padding: 26px 0 70px;
    }

    .dbp-page-breadcrumb {
        margin-bottom: 48px;
    }

    .dbp-page-hero-grid {
        gap: 48px;
    }

    .dbp-page-eyebrow {
        gap: 9px;

        margin-bottom: 30px;

        font-size: 9px;
        letter-spacing: 1px;
    }

    .dbp-page-brand {
        margin-bottom: 23px;
    }

    .dbp-page-brand-name {
        font-size: 13px;
    }

    .dbp-page-brand-symbol {
        width: 38px;
        height: 38px;
    }

    .dbp-page-hero h1 {
        font-size: clamp(3.7rem, 14vw, 5.5rem);
    }

    .dbp-page-hero-lead {
        font-size: 20px;
    }

    .dbp-page-hero-description {
        font-size: 13px;
    }

    .dbp-page-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dbp-page-button {
        width: 100%;
    }


    /* Code Review */

    .dbp-page-review-meta {
        padding: 21px 17px 17px;
    }

    .dbp-page-review-meta h2 {
        font-size: 19px;
    }

    .dbp-page-contract {
        margin: 0 17px 16px;
    }

    .dbp-page-code-panel {
        margin: 0 17px 17px;
    }

    .dbp-page-code-panel pre {
        font-size: 10px;
    }

    .dbp-page-decision-panel {
        padding: 0 17px 20px;
    }

    .dbp-page-decision-options span {
        font-size: 10px;
    }

    .dbp-page-visual-caption {
        font-size: 8px;
        line-height: 1.7;
    }


    /* Snapshot */

    .dbp-page-snapshot {
        padding: 30px 0;
    }

    .dbp-page-snapshot-grid {
        gap: 25px 15px;
    }

    .dbp-page-snapshot-item {
        padding: 0 0 0 14px;
    }

    .dbp-page-snapshot-label {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .dbp-page-snapshot-item strong {
        font-size: 12px;
    }


    /* Section Spacing */

    .dbp-page-about,
    .dbp-page-process,
    .dbp-page-modes,
    .dbp-page-preview,
    .dbp-page-value,
    .dbp-page-role,
    .dbp-page-resources,
    .dbp-page-feedback {
        padding: 75px 0;
    }


    /* Typography */

    .dbp-page-about-heading h2,
    .dbp-page-value-heading h2,
    .dbp-page-role-heading h2,
    .dbp-page-process-intro h2,
    .dbp-page-preview-intro h2,
    .dbp-page-modes-intro h2,
    .dbp-page-resources-heading h2,
    .dbp-page-feedback-intro h2 {
        font-size: clamp(37px, 9vw, 52px);
    }

    .dbp-page-about-lead,
    .dbp-page-role-lead {
        font-size: 19px;
    }

    .dbp-page-about-callout strong {
        font-size: 19px;
    }


    /* Process */

    .dbp-page-process-intro,
    .dbp-page-modes-intro,
    .dbp-page-preview-intro {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;
        margin-bottom: 35px;
    }

    .dbp-page-process-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dbp-page-process-card {
        min-height: 260px;
    }


    /* Modes */

    .dbp-page-modes-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .dbp-page-mode-card {
        min-height: auto;

        padding: 30px 25px;
    }

    .dbp-page-mode-top {
        margin-bottom: 35px;
    }

    .dbp-page-mode-card h3 {
        font-size: 42px;
    }


    /* Value List */

    .dbp-page-value-item {
        grid-template-columns: 32px 1fr;
        gap: 12px;
    }


    /* Feedback */

    .dbp-page-feedback-panel {
        padding: 27px 21px;
    }

    .dbp-page-feedback-panel-heading h3 {
        font-size: 29px;
    }


    /* Closing */

    .dbp-page-closing {
        padding: 85px 0 35px;
    }

    .dbp-page-closing-content {
        margin-bottom: 75px;
    }

    .dbp-page-closing-content h2 {
        font-size: clamp(58px, 12vw, 85px);
    }

    .dbp-page-closing-content > p {
        font-size: 13px;
    }

    .dbp-page-closing-actions {
        width: 100%;

        flex-direction: column;
    }

    .dbp-page-next-title {
        font-size: 30px;
    }

    .dbp-page-next-description {
        font-size: 11px;
    }

}


/* ---------------------------------------------------------
   SMALL PHONES
--------------------------------------------------------- */

@media (max-width: 380px) {

    .dbp-page-container {
        width: calc(100% - 28px);
    }

    .dbp-page-hero h1 {
        font-size: 3.5rem;
    }

    .dbp-page-window-title {
        font-size: 8px;
    }

    .dbp-page-review-meta h2 {
        font-size: 17px;
    }

    .dbp-page-decision-options {
        gap: 7px;
    }

    .dbp-page-decision-options span {
        font-size: 9px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .dbp-page *,
    .dbp-page *::before,
    .dbp-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

}

/* =========================================================
   BEYOND WORK
   DEDICATED PERSONAL PAGE
========================================================= */


/* ---------------------------------------------------------
   01. DESIGN VARIABLES
--------------------------------------------------------- */

.bw-page {
    --bw-bg: #101712;
    --bw-bg-secondary: #172019;
    --bw-surface: #1d2920;

    --bw-text: #f5f5ee;
    --bw-text-muted: #b7c2b5;
    --bw-text-soft: #869789;

    --bw-accent: #d5e6ac;
    --bw-accent-soft: rgba(213, 230, 172, 0.10);

    --bw-border: rgba(213, 230, 172, 0.16);

    background: var(--bw-bg);
    color: var(--bw-text);

    overflow: hidden;
}


/* Light Theme */

html[data-theme="light"] .bw-page {
    --bw-bg: #f8f7f1;
    --bw-bg-secondary: #eeeee5;
    --bw-surface: #ffffff;

    --bw-text: #202b22;
    --bw-text-muted: #536357;
    --bw-text-soft: #79877b;

    --bw-accent: #526e39;
    --bw-accent-soft: rgba(82, 110, 57, 0.09);

    --bw-border: rgba(48, 77, 52, 0.15);
}


/* ---------------------------------------------------------
   02. SHARED PAGE ELEMENTS
--------------------------------------------------------- */

.bw-page-container {
    width: min(1200px, calc(100% - 80px));
    margin-inline: auto;
}

.bw-page section {
    position: relative;
    scroll-margin-top: 90px;
}

.bw-page h1,
.bw-page h2,
.bw-page h3,
.bw-page p {
    margin-top: 0;
}

.bw-page a {
    text-decoration: none;
}

.bw-page img {
    display: block;
    max-width: 100%;
}

.bw-page h1,
.bw-page h2,
.bw-page h3 {
    overflow-wrap: break-word;
}


/* ---------------------------------------------------------
   03. SHARED SECTION HEADINGS
--------------------------------------------------------- */

.bw-page-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;

    margin-bottom: 65px;
}

.bw-page-section-label {
    display: flex;
    align-items: center;
    gap: 16px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: var(--bw-text-muted);
}

.bw-page-section-label > span:first-child {
    color: var(--bw-accent);
}

.bw-page-section-line {
    width: 46px;
    height: 1px;

    background: var(--bw-border);
}

.bw-page-section-note {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.7px;

    color: var(--bw-text-soft);
}

.bw-page-small-label {
    display: inline-block;

    margin-bottom: 24px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--bw-accent);
}


/* ---------------------------------------------------------
   04. SHARED BUTTONS
--------------------------------------------------------- */

.bw-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    min-height: 57px;

    padding: 12px 14px 12px 23px;

    border: 1px solid transparent;
    border-radius: 100px;

    font-size: 13px;
    font-weight: 700;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease,
        transform 250ms ease,
        box-shadow 250ms ease;
}

.bw-page-button > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 18px;
}

.bw-page-button-primary {
    background: #d5e6ac;
    color: #19241a;

    border-color: #d5e6ac;
}

.bw-page-button-primary > span {
    background: #273b28;
    color: #d5e6ac;
}

.bw-page-button-primary:hover {
    background: #e4f1c8;
    border-color: #e4f1c8;

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(213, 230, 172, 0.13);
}

.bw-page-button-secondary {
    background: transparent;
    color: var(--bw-text);

    border-color: var(--bw-border);
}

.bw-page-button-secondary > span {
    background: var(--bw-accent-soft);
    color: var(--bw-accent);
}

.bw-page-button-secondary:hover {
    border-color: var(--bw-accent);

    transform: translateY(-3px);
}


/* ---------------------------------------------------------
   05. HERO SECTION
--------------------------------------------------------- */

.bw-page-hero {
    padding: 110px 0 135px;

    background:
        radial-gradient(
            ellipse at 83% 25%,
            var(--bw-accent-soft),
            transparent 50%
        ),
        var(--bw-bg);
}

.bw-page-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 80px;
}

.bw-page-hero-content {
    position: relative;
    z-index: 2;
}

.bw-page-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;

    margin-bottom: 42px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: var(--bw-text-muted);
}

.bw-page-eyebrow-dot {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--bw-accent);

    box-shadow: 0 0 14px var(--bw-accent-soft);
}

.bw-page-hero h1 {
    margin-bottom: 36px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(5rem, 8vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 0.96;

    color: var(--bw-text);
}

.bw-page-hero h1 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--bw-accent);
}

.bw-page-hero-lead {
    max-width: 520px;

    margin-bottom: 24px;

    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 500;
    line-height: 1.5;

    color: var(--bw-text);
}

.bw-page-hero-description {
    max-width: 490px;

    margin-bottom: 17px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--bw-text-muted);
}

.bw-page-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 35px;
}


/* ---------------------------------------------------------
   06. HERO PHOTOGRAPHY
--------------------------------------------------------- */

.bw-page-hero-visual {
    position: relative;

    min-height: 615px;

    padding: 20px 15px 55px 40px;
}

.bw-page-hero-photo-main {
    position: relative;
    z-index: 1;

    width: 83%;
    height: 510px;

    margin-left: auto;

    overflow: hidden;

    border: 1px solid var(--bw-border);
    border-radius: 18px;

    background: var(--bw-surface);

    transform: rotate(3deg);

    box-shadow: 0 25px 75px rgba(0, 0, 0, 0.15);
}

.bw-page-hero-photo-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.bw-page-hero-photo-secondary {
    position: absolute;
    z-index: 2;

    bottom: 5px;
    left: 0;

    width: 49%;
    height: 265px;

    overflow: hidden;

    border: 6px solid var(--bw-bg);
    border-radius: 15px;

    background: var(--bw-surface);

    transform: rotate(-7deg);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.bw-page-hero-photo-secondary img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.bw-page-hero-photo-caption {
    position: absolute;
    z-index: 3;

    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    gap: 9px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;

    color: var(--bw-text-muted);
}

.bw-page-hero-visual-decoration {
    position: absolute;

    top: -50px;
    right: -20px;

    font-family: var(--font-editorial, Georgia, serif);
    font-size: 185px;

    color: var(--bw-accent);

    opacity: 0.18;

    pointer-events: none;
}


/* ---------------------------------------------------------
   07. EXPLORE MY WORLD
--------------------------------------------------------- */

.bw-page-explore {
    padding: 50px 0 65px;

    background: var(--bw-bg-secondary);

    border-top: 1px solid var(--bw-border);
    border-bottom: 1px solid var(--bw-border);
}

.bw-page-explore-heading {
    display: flex;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 35px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: var(--bw-text-soft);
}

.bw-page-explore-links {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.bw-page-explore-links a {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 74px;

    padding: 18px 20px;

    border: 1px solid var(--bw-border);
    border-radius: 12px;

    background: var(--bw-surface);

    color: var(--bw-text);

    font-size: 13px;
    font-weight: 600;

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease;
}

.bw-page-explore-links a:hover {
    transform: translateY(-3px);
    border-color: var(--bw-accent);
}

.bw-page-explore-links a > span:first-child {
    font-size: 10px;
    font-weight: 700;

    color: var(--bw-accent);
}

.bw-page-explore-links a > span:last-child {
    margin-left: auto;

    font-size: 17px;

    color: var(--bw-accent);
}


/* ---------------------------------------------------------
   08. PERSONAL STATEMENT
--------------------------------------------------------- */

.bw-page-statement {
    padding: 135px 0;

    text-align: center;
}

.bw-page-statement-label,
.bw-page-statement-footer {
    display: block;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--bw-text-soft);
}

.bw-page-statement p {
    max-width: 950px;

    margin: 38px auto;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(38px, 5.7vw, 78px);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 1.2;

    color: var(--bw-text);
}

.bw-page-statement p em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--bw-accent);
}


/* ---------------------------------------------------------
   09. SHARED SECTION INTRODUCTIONS
--------------------------------------------------------- */

.bw-page-section-intro,
.bw-page-journal-intro {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    align-items: end;

    gap: 90px;

    margin-bottom: 55px;
}

.bw-page-section-intro h2,
.bw-page-journal-intro h2 {
    margin-bottom: 0;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(42px, 5vw, 71px);
    font-weight: 750;
    letter-spacing: -0.06em;
    line-height: 1.08;

    color: var(--bw-text);
}

.bw-page-section-intro h2 em,
.bw-page-journal-intro h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--bw-accent);
}

.bw-page-section-intro-copy p,
.bw-page-journal-intro-copy p {
    max-width: 420px;

    margin-bottom: 16px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--bw-text-muted);
}


/* ---------------------------------------------------------
   10. SHARED PHOTO GALLERY
--------------------------------------------------------- */

.bw-page-gallery-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.bw-page-photo-card {
    min-width: 0;

    margin: 0;

    overflow: hidden;

    border: 1px solid var(--bw-border);
    border-radius: 13px;

    background: var(--bw-surface);

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.bw-page-photo-card:hover {
    transform: translateY(-5px);

    border-color: var(--bw-accent);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);
}

.bw-page-photo-link {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    background: var(--bw-bg-secondary);
}

.bw-page-photo-link img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 450ms ease;
}

.bw-page-photo-card:hover .bw-page-photo-link img {
    transform: scale(1.05);
}

.bw-page-photo-overlay {
    position: absolute;

    right: 12px;
    bottom: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    background: rgba(15, 23, 17, 0.83);

    color: #ffffff;

    font-size: 20px;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 250ms ease,
        transform 250ms ease;
}

.bw-page-photo-card:hover .bw-page-photo-overlay,
.bw-page-photo-link:focus-visible .bw-page-photo-overlay {
    opacity: 1;
    transform: translateY(0);
}

.bw-page-photo-card figcaption {
    min-height: 55px;

    display: flex;
    align-items: center;

    padding: 14px 16px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;

    color: var(--bw-text-muted);
}


/* ---------------------------------------------------------
   11. PLACES & EXPERIENCES
--------------------------------------------------------- */

.bw-page-travel {
    padding: 120px 0;

    background: var(--bw-bg-secondary);

    border-top: 1px solid var(--bw-border);
}

.bw-page-gallery-grid-travel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bw-page-gallery-grid-travel .bw-page-photo-link {
    aspect-ratio: 5 / 4;
}

.bw-page-gallery-grid-travel .bw-page-photo-card:first-child {
    grid-column: span 2;
}

.bw-page-gallery-grid-travel
.bw-page-photo-card:first-child
.bw-page-photo-link {
    aspect-ratio: auto;
    height: 420px;
}


/* ---------------------------------------------------------
   12. PEOPLE & MOMENTS
--------------------------------------------------------- */

.bw-page-people {
    padding: 120px 0;
}

.bw-page-gallery-grid-people {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bw-page-gallery-grid-people
.bw-page-photo-card:nth-child(5) {
    grid-column: span 2;
}

.bw-page-gallery-grid-people
.bw-page-photo-card:nth-child(5)
.bw-page-photo-link {
    aspect-ratio: 8 / 5;
}


/* ---------------------------------------------------------
   13. ARSENAL FC
--------------------------------------------------------- */

.bw-page-arsenal {
    /*
       Dedicated Arsenal styling.
       This section intentionally remains dark
       in both website themes.
    */

    --bw-text: #ffffff;
    --bw-text-muted: #dfc7c9;
    --bw-text-soft: #c49ea3;

    --bw-accent: #ff9097;
    --bw-border: rgba(255, 255, 255, 0.14);

    padding: 120px 0;

    background:
        radial-gradient(
            ellipse at 80% 15%,
            rgba(239, 37, 62, 0.16),
            transparent 50%
        ),
        linear-gradient(
            140deg,
            #20090e 0%,
            #340c14 48%,
            #1b080c 100%
        );

    color: #ffffff;
}

.bw-page-arsenal .bw-page-section-label > span:first-child {
    color: #ff9097;
}

.bw-page-sports-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.82fr);

    align-items: center;

    gap: 80px;

    margin-bottom: 100px;
}

.bw-page-sports-content {
    max-width: 590px;
}

.bw-page-sports-eyebrow {
    display: inline-block;

    margin-bottom: 28px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.bw-page-arsenal .bw-page-sports-eyebrow {
    color: #ff9ca4;
}

.bw-page-sports-content h2 {
    margin-bottom: 30px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(54px, 6.2vw, 89px);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1.02;
}

.bw-page-sports-content h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;
}

.bw-page-arsenal .bw-page-sports-content h2 em {
    color: #ff9ca4;
}

.bw-page-sports-lead {
    margin-bottom: 25px;

    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;

    color: #ffffff;
}

.bw-page-sports-content > p:not(.bw-page-sports-lead) {
    max-width: 520px;

    margin-bottom: 20px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--bw-text-muted);
}

.bw-page-sports-link {
    display: inline-flex;
    align-items: center;
    gap: 25px;

    margin-top: 18px;
    padding-bottom: 13px;

    border-bottom: 1px solid currentColor;

    font-size: 13px;
    font-weight: 700;

    transition: gap 250ms ease;
}

.bw-page-sports-link:hover {
    gap: 35px;
}

.bw-page-arsenal .bw-page-sports-link {
    color: #ff9ca4;
}


/* Arsenal Hero Image */

.bw-page-sports-visual {
    position: relative;

    overflow: hidden;

    border: 1px solid var(--bw-border);
    border-radius: 20px;

    background: rgba(0, 0, 0, 0.18);
}

.bw-page-sports-visual img {
    display: block;

    width: 100%;
    height: 565px;

    object-fit: cover;
}

.bw-page-sports-visual::after {
    content: "";

    position: absolute;
    inset: 45% 0 0;

    pointer-events: none;

    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.68)
    );
}

.bw-page-sports-visual-caption {
    position: absolute;
    z-index: 1;

    bottom: 25px;
    left: 28px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #ffffff;
}


/* Arsenal Photo Album */

.bw-page-album-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;

    margin-bottom: 35px;
}

.bw-page-album-heading > div > span {
    display: block;

    margin-bottom: 15px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: var(--bw-text-soft);
}

.bw-page-album-heading h3 {
    max-width: 670px;

    margin: 0;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(29px, 3.5vw, 46px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;

    color: var(--bw-text);
}

.bw-page-album-heading h3 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--bw-accent);
}

.bw-page-album-count {
    flex-shrink: 0;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--bw-text-soft);
}

.bw-page-arsenal .bw-page-photo-card {
    background: #3b151c;
    border-color: rgba(255, 255, 255, 0.12);
}

.bw-page-arsenal .bw-page-photo-card figcaption {
    color: #ebd0d3;
}

.bw-page-arsenal .bw-page-photo-card:hover {
    border-color: #ff9ca4;
}


/* ---------------------------------------------------------
   14. DALLAS MAVERICKS
--------------------------------------------------------- */

.bw-page-mavericks {
    /*
       Dedicated Mavericks styling.
       This section remains dark in both themes.
    */

    --bw-text: #ffffff;
    --bw-text-muted: #bfd4ec;
    --bw-text-soft: #91b5d8;

    --bw-accent: #7dc6ff;
    --bw-border: rgba(125, 198, 255, 0.20);

    padding: 120px 0;

    background:
        radial-gradient(
            ellipse at 80% 20%,
            rgba(38, 118, 190, 0.22),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            #07182a 0%,
            #102b45 52%,
            #091727 100%
        );

    color: #ffffff;
}

.bw-page-mavericks .bw-page-sports-eyebrow {
    color: #7dc6ff;
}

.bw-page-mavericks .bw-page-sports-content h2 em {
    color: #7dc6ff;
}

.bw-page-mavericks .bw-page-sports-link {
    color: #7dc6ff;
}

.bw-page-mavericks .bw-page-photo-card {
    background: #16344e;
    border-color: rgba(125, 198, 255, 0.16);
}

.bw-page-mavericks .bw-page-photo-card figcaption {
    color: #c2d9ed;
}

.bw-page-mavericks .bw-page-photo-card:hover {
    border-color: #7dc6ff;
}

.bw-page-gallery-grid-mavericks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bw-page-gallery-grid-mavericks .bw-page-photo-link {
    aspect-ratio: 5 / 4;
}


/* ---------------------------------------------------------
   15. MUSIC
--------------------------------------------------------- */

.bw-page-music {
    /*
       Music gets an atmospheric, violet-inspired
       visual identity.
    */

    --bw-text: #ffffff;
    --bw-text-muted: #c4bdd7;
    --bw-text-soft: #aaa0c5;

    --bw-accent: #c8a8ff;
    --bw-border: rgba(200, 168, 255, 0.18);

    padding: 120px 0;

    background:
        radial-gradient(
            ellipse at 85% 25%,
            rgba(126, 72, 192, 0.20),
            transparent 50%
        ),
        #151020;

    color: #ffffff;
}

.bw-page-music-grid {
    display: grid;

    grid-template-columns: 1fr 0.9fr;

    align-items: center;

    gap: 95px;

    margin-bottom: 100px;
}

.bw-page-music-content h2 {
    margin-bottom: 34px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(54px, 6vw, 88px);
    font-weight: 800;
    letter-spacing: -0.065em;
    line-height: 1.03;
}

.bw-page-music-content h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: #c8a8ff;
}

.bw-page-music-lead {
    margin-bottom: 24px;

    font-size: 23px;
    line-height: 1.5;

    color: #ffffff;
}

.bw-page-music-content > p:not(.bw-page-music-lead) {
    max-width: 470px;

    margin-bottom: 19px;

    font-size: 14px;
    line-height: 1.9;

    color: #c4bdd7;
}


/* Favourite Artists */

.bw-page-music-artists {
    margin-top: 38px;
}

.bw-page-music-artists > span {
    display: block;

    margin-bottom: 15px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;

    color: #aaa0c5;
}

.bw-page-music-artists > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bw-page-music-artists > div > span {
    padding: 11px 17px;

    border: 1px solid rgba(200, 168, 255, 0.25);
    border-radius: 100px;

    background: rgba(200, 168, 255, 0.08);

    font-size: 12px;
    font-weight: 650;

    color: #e4d5ff;
}


/* Apple Music Feature Card */

.bw-page-music-feature {
    overflow: hidden;

    border: 1px solid rgba(200, 168, 255, 0.25);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(174, 121, 236, 0.17),
            transparent 55%
        ),
        #21172f;
}

.bw-page-music-feature-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 25px 30px;

    border-bottom: 1px solid rgba(200, 168, 255, 0.15);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;

    color: #bdb0d6;
}

.bw-page-music-feature-top > span:last-child {
    font-size: 24px;
    color: #c8a8ff;
}

.bw-page-music-feature-body {
    padding: 60px 35px;
}

.bw-page-music-feature-symbol {
    display: block;

    margin-bottom: 28px;

    font-size: 60px;

    color: #c8a8ff;
}

.bw-page-music-feature-body h3 {
    margin-bottom: 20px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(35px, 4vw, 51px);
    font-weight: 750;
    letter-spacing: -0.05em;
    line-height: 1.1;

    color: #ffffff;
}

.bw-page-music-feature-body p {
    max-width: 300px;

    margin-bottom: 0;

    font-size: 13px;
    line-height: 1.8;

    color: #c4bdd7;
}

.bw-page-music-links {
    border-top: 1px solid rgba(200, 168, 255, 0.15);
}

.bw-page-music-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 22px 30px;

    border-bottom: 1px solid rgba(200, 168, 255, 0.12);

    font-size: 13px;
    font-weight: 650;

    color: #eee3ff;

    transition: background-color 250ms ease;
}

.bw-page-music-links a:last-child {
    border-bottom: 0;
}

.bw-page-music-links a:hover {
    background: rgba(200, 168, 255, 0.09);
}

.bw-page-music-links a > span:last-child {
    color: #c8a8ff;
    font-size: 19px;
}

.bw-page-music .bw-page-photo-card {
    background: #261b35;
    border-color: rgba(200, 168, 255, 0.15);
}

.bw-page-music .bw-page-photo-card figcaption {
    color: #d2c6df;
}

.bw-page-music .bw-page-photo-card:hover {
    border-color: #c8a8ff;
}


/* ---------------------------------------------------------
   16. PHOTO JOURNAL
--------------------------------------------------------- */

.bw-page-journal {
    padding: 120px 0;

    background: var(--bw-bg-secondary);
}

.bw-page-gallery-grid-journal {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bw-page-gallery-grid-journal .bw-page-photo-link {
    aspect-ratio: 4 / 5;
}


/* Journal Footer */

.bw-page-journal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;

    margin-top: 55px;
    padding-top: 35px;

    border-top: 1px solid var(--bw-border);
}

.bw-page-journal-footer > div {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bw-page-journal-footer-count {
    font-family: var(--font-heading, Arial, sans-serif);

    font-size: 65px;
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1;

    color: var(--bw-accent);
}

.bw-page-journal-footer-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    line-height: 1.7;

    color: var(--bw-text-muted);
}

.bw-page-journal-footer > p {
    max-width: 380px;

    margin: 0;

    font-size: 13px;
    line-height: 1.9;

    color: var(--bw-text-muted);
}


/* ---------------------------------------------------------
   17. CLOSING SECTION
--------------------------------------------------------- */

.bw-page-closing {
    padding: 140px 0 50px;

    background:
        radial-gradient(
            ellipse at 50% 30%,
            var(--bw-accent-soft),
            transparent 55%
        ),
        var(--bw-bg);
}

.bw-page-closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 850px;

    margin: 0 auto 120px;

    text-align: center;
}

.bw-page-closing-eyebrow {
    margin-bottom: 35px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--bw-accent);
}

.bw-page-closing-content h2 {
    margin-bottom: 35px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(75px, 12vw, 155px);
    font-weight: 800;
    letter-spacing: -0.085em;
    line-height: 0.95;

    color: var(--bw-text);
}

.bw-page-closing-content h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--bw-accent);
}

.bw-page-closing-content > p {
    max-width: 490px;

    margin-bottom: 40px;

    font-size: 15px;
    line-height: 1.9;

    color: var(--bw-text-muted);
}

.bw-page-closing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}


/* ---------------------------------------------------------
   18. BOTTOM NAVIGATION
--------------------------------------------------------- */

.bw-page-bottom-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--bw-border);
}

.bw-page-bottom-navigation a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    padding: 35px 30px;

    color: var(--bw-text);

    transition: background-color 250ms ease;
}

.bw-page-bottom-navigation a:first-child {
    border-right: 1px solid var(--bw-border);
    padding-left: 0;
}

.bw-page-bottom-navigation a:last-child {
    align-items: flex-end;

    text-align: right;

    padding-right: 0;
}

.bw-page-bottom-navigation a:hover {
    background: var(--bw-accent-soft);
}

.bw-page-bottom-navigation a > span:first-child {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;

    color: var(--bw-text-soft);
}

.bw-page-bottom-navigation a strong {
    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -0.04em;

    color: var(--bw-text);
}

.bw-page-bottom-navigation a > span:last-child {
    font-size: 23px;

    color: var(--bw-accent);
}


/* =========================================================
   19. FULL-SIZE PHOTO VIEWER
========================================================= */

/*
   The dialog is outside .bw-page in the HTML,
   so it uses its own dark styling.
*/

.bw-page-lightbox {
    position: fixed;

    inset: 0;

    width: min(1100px, calc(100vw - 40px));
    max-width: none;

    max-height: calc(100dvh - 40px);

    margin: auto;
    padding: 0;

    overflow: auto;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;

    background: #101713;

    color: #ffffff;

    box-shadow: 0 35px 120px rgba(0, 0, 0, 0.45);
}

.bw-page-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.88);

    backdrop-filter: blur(9px);
}

.bw-page-lightbox-inner {
    padding: 25px;
}

.bw-page-lightbox-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-bottom: 20px;
}

.bw-page-lightbox-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: #b5c9b1;
}

.bw-page-lightbox-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;

    background: #263328;

    color: #ffffff;

    font-size: 28px;

    cursor: pointer;
}

.bw-page-lightbox-close:hover {
    background: #374a39;
}

.bw-page-lightbox-image-wrap {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 250px;

    border-radius: 10px;

    background: #080e0a;
}

.bw-page-lightbox-image-wrap img {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: calc(100dvh - 225px);

    margin-inline: auto;

    object-fit: contain;
}

.bw-page-lightbox-nav {
    position: absolute;
    z-index: 2;

    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;

    background: rgba(15, 23, 17, 0.85);

    color: #ffffff;

    font-size: 22px;

    cursor: pointer;

    transform: translateY(-50%);

    transition: background-color 250ms ease;
}

.bw-page-lightbox-nav:hover {
    background: #415b42;
}

.bw-page-lightbox-prev {
    left: 15px;
}

.bw-page-lightbox-next {
    right: 15px;
}

.bw-page-lightbox-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-top: 20px;
}

.bw-page-lightbox-bottom p {
    margin: 0;

    font-size: 13px;
    line-height: 1.7;

    color: #d7e4d3;
}

.bw-page-lightbox-bottom > span {
    flex-shrink: 0;

    font-family: monospace;
    font-size: 12px;

    color: #a0b69f;
}


/* ---------------------------------------------------------
   20. ACCESSIBILITY
--------------------------------------------------------- */

.bw-page a:focus-visible,
.bw-page-lightbox button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}


/* =========================================================
   RESPONSIVE DESIGN
========================================================= */


/* ---------------------------------------------------------
   21. SMALL LAPTOPS
--------------------------------------------------------- */

@media (max-width: 1100px) {

    .bw-page-hero-grid {
        gap: 45px;
    }

    .bw-page-hero h1 {
        font-size: clamp(5rem, 8vw, 7.5rem);
    }

    .bw-page-hero-visual {
        min-height: 550px;
    }

    .bw-page-hero-photo-main {
        height: 460px;
    }

    .bw-page-hero-photo-secondary {
        height: 225px;
    }

    .bw-page-section-intro,
    .bw-page-journal-intro,
    .bw-page-sports-hero,
    .bw-page-music-grid {
        gap: 55px;
    }

    .bw-page-gallery-grid-journal {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}


/* ---------------------------------------------------------
   22. TABLETS
--------------------------------------------------------- */

@media (max-width: 900px) {

    .bw-page-container {
        width: min(720px, calc(100% - 48px));
    }

    .bw-page-hero {
        padding: 85px 0 100px;
    }

    .bw-page-hero-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .bw-page-hero h1 {
        font-size: clamp(6rem, 12vw, 8rem);
    }

    .bw-page-hero-visual {
        width: 100%;
        max-width: 580px;

        margin-inline: auto;
    }

    .bw-page-explore-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bw-page-section-intro,
    .bw-page-journal-intro {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .bw-page-sports-hero,
    .bw-page-music-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .bw-page-sports-visual {
        max-width: 650px;
    }

    .bw-page-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bw-page-gallery-grid-travel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bw-page-gallery-grid-people {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bw-page-gallery-grid-mavericks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bw-page-gallery-grid-journal {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bw-page-music-feature {
        max-width: 650px;
    }

}


/* ---------------------------------------------------------
   23. MOBILE PHONES
--------------------------------------------------------- */

@media (max-width: 640px) {

    .bw-page-container {
        width: calc(100% - 36px);
    }


    /* Shared Headings */

    .bw-page-section-heading {
        align-items: flex-start;
        gap: 15px;

        margin-bottom: 45px;
    }

    .bw-page-section-label {
        gap: 9px;

        font-size: 9px;
        letter-spacing: 1px;
    }

    .bw-page-section-line {
        width: 24px;
    }

    .bw-page-section-note {
        max-width: 110px;

        text-align: right;

        font-size: 8px;
        letter-spacing: 1px;
        line-height: 1.6;
    }

    .bw-page-small-label {
        margin-bottom: 18px;

        font-size: 9px;
    }


    /* Hero */

    .bw-page-hero {
        padding: 60px 0 80px;
    }

    .bw-page-eyebrow {
        gap: 10px;
        margin-bottom: 32px;

        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .bw-page-hero h1 {
        font-size: clamp(4.1rem, 14vw, 6rem);
    }

    .bw-page-hero-lead {
        font-size: 20px;
    }

    .bw-page-hero-description {
        font-size: 13px;
    }

    .bw-page-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bw-page-button {
        width: 100%;
    }


    /* Hero Photography */

    .bw-page-hero-visual {
        min-height: 430px;

        padding: 15px 10px 45px 20px;
    }

    .bw-page-hero-photo-main {
        width: 83%;
        height: 355px;

        border-radius: 13px;
    }

    .bw-page-hero-photo-secondary {
        width: 47%;
        height: 185px;

        border-width: 4px;
        border-radius: 10px;
    }

    .bw-page-hero-photo-caption {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .bw-page-hero-visual-decoration {
        top: -35px;
        right: -5px;

        font-size: 115px;
    }


    /* Explore */

    .bw-page-explore {
        padding: 40px 0 50px;
    }

    .bw-page-explore-heading {
        font-size: 9px;
        line-height: 1.7;
    }

    .bw-page-explore-links {
        grid-template-columns: 1fr;

        gap: 9px;
    }

    .bw-page-explore-links a {
        min-height: 62px;
    }


    /* Personal Statement */

    .bw-page-statement {
        padding: 90px 0;
    }

    .bw-page-statement p {
        margin: 28px auto;

        font-size: clamp(36px, 9vw, 51px);
    }


    /* Section Spacing */

    .bw-page-travel,
    .bw-page-people,
    .bw-page-arsenal,
    .bw-page-mavericks,
    .bw-page-music,
    .bw-page-journal {
        padding: 80px 0;
    }


    /* Section Titles */

    .bw-page-section-intro h2,
    .bw-page-journal-intro h2 {
        font-size: clamp(37px, 9vw, 54px);
    }

    .bw-page-section-intro,
    .bw-page-journal-intro {
        margin-bottom: 35px;
    }

    .bw-page-section-intro-copy p,
    .bw-page-journal-intro-copy p {
        font-size: 13px;
    }


    /* Photo Galleries */

    .bw-page-gallery-grid,
    .bw-page-gallery-grid-travel,
    .bw-page-gallery-grid-people,
    .bw-page-gallery-grid-arsenal,
    .bw-page-gallery-grid-mavericks,
    .bw-page-gallery-grid-music,
    .bw-page-gallery-grid-journal {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 11px;
    }

    .bw-page-photo-card {
        border-radius: 10px;
    }

    .bw-page-photo-card figcaption {
        min-height: 50px;

        padding: 11px;

        font-size: 10px;
    }

    .bw-page-photo-link {
        aspect-ratio: 4 / 5;
    }

    .bw-page-photo-overlay {
        right: 9px;
        bottom: 9px;

        width: 29px;
        height: 29px;

        font-size: 16px;

        opacity: 1;
        transform: none;
    }

    .bw-page-gallery-grid-travel
    .bw-page-photo-card:first-child {
        grid-column: span 2;
    }

    .bw-page-gallery-grid-travel
    .bw-page-photo-card:first-child
    .bw-page-photo-link {
        height: 275px;
    }

    .bw-page-gallery-grid-people
    .bw-page-photo-card:nth-child(5) {
        grid-column: span 2;
    }

    .bw-page-gallery-grid-people
    .bw-page-photo-card:nth-child(5)
    .bw-page-photo-link {
        aspect-ratio: 8 / 5;
    }


    /* Sports Sections */

    .bw-page-sports-hero {
        gap: 40px;
        margin-bottom: 65px;
    }

    .bw-page-sports-content h2 {
        font-size: clamp(48px, 11vw, 68px);
    }

    .bw-page-sports-lead {
        font-size: 19px;
    }

    .bw-page-sports-content > p:not(.bw-page-sports-lead) {
        font-size: 13px;
    }

    .bw-page-sports-visual img {
        height: 420px;
    }

    .bw-page-sports-visual-caption {
        bottom: 20px;
        left: 20px;
    }


    /* Gallery Album Headings */

    .bw-page-album-heading {
        align-items: flex-start;
        gap: 17px;

        margin-bottom: 28px;
    }

    .bw-page-album-heading h3 {
        font-size: clamp(27px, 6vw, 36px);
    }

    .bw-page-album-count {
        font-size: 9px;
        text-align: right;
    }


    /* Music */

    .bw-page-music-grid {
        margin-bottom: 65px;
    }

    .bw-page-music-content h2 {
        font-size: clamp(52px, 11vw, 70px);
    }

    .bw-page-music-lead {
        font-size: 19px;
    }

    .bw-page-music-feature-body {
        padding: 45px 25px;
    }

    .bw-page-music-feature-top,
    .bw-page-music-links a {
        padding-inline: 25px;
    }


    /* Journal Footer */

    .bw-page-journal-footer {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;

        margin-top: 40px;
    }

    .bw-page-journal-footer-count {
        font-size: 55px;
    }

    .bw-page-journal-footer > p {
        font-size: 12px;
    }


    /* Closing */

    .bw-page-closing {
        padding: 90px 0 35px;
    }

    .bw-page-closing-content {
        margin-bottom: 80px;
    }

    .bw-page-closing-content h2 {
        font-size: clamp(65px, 13vw, 95px);
    }

    .bw-page-closing-content > p {
        font-size: 13px;
    }

    .bw-page-closing-actions {
        width: 100%;
        flex-direction: column;
    }

    .bw-page-bottom-navigation a {
        padding: 25px 14px;
    }

    .bw-page-bottom-navigation a strong {
        font-size: 22px;
    }


    /* Full-Size Photo Viewer */

    .bw-page-lightbox {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);

        border-radius: 12px;
    }

    .bw-page-lightbox-inner {
        padding: 13px;
    }

    .bw-page-lightbox-image-wrap img {
        max-height: calc(100dvh - 170px);
    }

    .bw-page-lightbox-nav {
        width: 36px;
        height: 36px;

        font-size: 18px;
    }

    .bw-page-lightbox-prev {
        left: 8px;
    }

    .bw-page-lightbox-next {
        right: 8px;
    }

    .bw-page-lightbox-bottom p {
        font-size: 12px;
    }

}


/* ---------------------------------------------------------
   24. SMALL PHONES
--------------------------------------------------------- */

@media (max-width: 380px) {

    .bw-page-container {
        width: calc(100% - 28px);
    }

    .bw-page-hero h1 {
        font-size: 3.9rem;
    }

    .bw-page-hero-photo-main {
        height: 300px;
    }

    .bw-page-hero-photo-secondary {
        height: 150px;
    }

    .bw-page-hero-visual {
        min-height: 375px;
    }

    .bw-page-photo-card figcaption {
        font-size: 9px;
    }

    .bw-page-album-heading h3 {
        font-size: 25px;
    }

}


/* ---------------------------------------------------------
   25. REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .bw-page *,
    .bw-page *::before,
    .bw-page *::after,
    .bw-page-lightbox * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

}

/* =========================================================
   CONTACT PAGE
   AJ PERSONAL WEBSITE
========================================================= */


/* ---------------------------------------------------------
   01. DESIGN VARIABLES
--------------------------------------------------------- */

.ct-page {
    --ct-bg: #101812;
    --ct-bg-secondary: #172019;
    --ct-surface: #1d2920;
    --ct-surface-hover: #243428;

    --ct-text: #f5f6ef;
    --ct-text-muted: #b8c6b9;
    --ct-text-soft: #879b89;

    --ct-accent: #d5e6ac;
    --ct-accent-soft: rgba(213, 230, 172, 0.09);

    --ct-border: rgba(213, 230, 172, 0.15);

    --ct-input-bg: #111b14;

    background: var(--ct-bg);
    color: var(--ct-text);

    overflow: hidden;
}


/* Light Theme */

html[data-theme="light"] .ct-page {
    --ct-bg: #f8f7f1;
    --ct-bg-secondary: #eeeee6;
    --ct-surface: #ffffff;
    --ct-surface-hover: #f4f6ec;

    --ct-text: #203024;
    --ct-text-muted: #566759;
    --ct-text-soft: #798c7c;

    --ct-accent: #526d39;
    --ct-accent-soft: rgba(82, 109, 57, 0.08);

    --ct-border: rgba(48, 77, 52, 0.16);

    --ct-input-bg: #f8f9f5;
}


/* ---------------------------------------------------------
   02. SHARED PAGE ELEMENTS
--------------------------------------------------------- */

.ct-container {
    width: min(1200px, calc(100% - 80px));
    margin-inline: auto;
}

.ct-page section {
    position: relative;
    scroll-margin-top: 90px;
}

.ct-page h1,
.ct-page h2,
.ct-page h3,
.ct-page p {
    margin-top: 0;
}

.ct-page a {
    text-decoration: none;
}

.ct-page h1,
.ct-page h2,
.ct-page h3 {
    overflow-wrap: break-word;
}


/* ---------------------------------------------------------
   03. SHARED SECTION HEADINGS
--------------------------------------------------------- */

.ct-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 25px;

    margin-bottom: 70px;
}

.ct-section-number {
    display: flex;
    align-items: center;
    gap: 16px;

    color: var(--ct-text-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.ct-section-number > span:first-child {
    color: var(--ct-accent);
}

.ct-section-line {
    width: 45px;
    height: 1px;

    background: var(--ct-border);
}

.ct-section-note {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;

    color: var(--ct-text-soft);
}

.ct-small-label {
    display: inline-block;

    margin-bottom: 23px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--ct-accent);
}

.ct-section-intro {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;

    gap: 85px;

    margin-bottom: 55px;
}

.ct-section-intro h2 {
    margin-bottom: 0;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(43px, 5.2vw, 72px);
    font-weight: 750;
    letter-spacing: -0.065em;
    line-height: 1.07;

    color: var(--ct-text);
}

.ct-section-intro h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--ct-accent);
}

.ct-section-intro > p {
    max-width: 420px;

    margin-bottom: 0;

    font-size: 14px;
    line-height: 1.9;

    color: var(--ct-text-muted);
}


/* ---------------------------------------------------------
   04. SHARED BUTTONS
--------------------------------------------------------- */

.ct-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    min-height: 57px;

    padding: 12px 13px 12px 23px;

    border: 1px solid transparent;
    border-radius: 100px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}

.ct-button > span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 33px;
    height: 33px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 18px;
}

.ct-button-primary {
    background: #d5e6ac;
    border-color: #d5e6ac;

    color: #192519;
}

.ct-button-primary > span:last-child {
    background: #263a28;
    color: #d5e6ac;
}

.ct-button-primary:hover {
    background: #e5f0c9;
    border-color: #e5f0c9;

    transform: translateY(-3px);

    box-shadow: 0 13px 30px rgba(213, 230, 172, 0.12);
}

.ct-button-secondary {
    background: transparent;

    border-color: var(--ct-border);

    color: var(--ct-text);
}

.ct-button-secondary > span:last-child {
    background: var(--ct-accent-soft);
    color: var(--ct-accent);
}

.ct-button-secondary:hover {
    border-color: var(--ct-accent);

    transform: translateY(-3px);
}


/* =========================================================
   05. CONTACT HERO
========================================================= */

.ct-hero {
    padding: 125px 0 135px;

    background:
        radial-gradient(
            ellipse at 80% 20%,
            var(--ct-accent-soft),
            transparent 55%
        ),
        var(--ct-bg);
}

.ct-hero-grid {
    display: grid;

    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;

    gap: 90px;
}

.ct-hero-content {
    position: relative;
    z-index: 2;
}

.ct-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 45px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: var(--ct-text-muted);
}

.ct-eyebrow-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--ct-accent);

    box-shadow: 0 0 17px var(--ct-accent-soft);
}

.ct-hero h1 {
    margin-bottom: 35px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(80px, 10vw, 145px);
    font-weight: 800;
    letter-spacing: -0.085em;
    line-height: 0.95;

    color: var(--ct-text);
}

.ct-hero h1 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--ct-accent);
}

.ct-hero-lead {
    max-width: 530px;

    margin-bottom: 25px;

    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 500;
    line-height: 1.5;

    color: var(--ct-text);
}

.ct-hero-description {
    max-width: 490px;

    margin-bottom: 17px;

    font-size: 14px;
    line-height: 1.9;

    color: var(--ct-text-muted);
}

.ct-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 37px;
}

.ct-hero-location {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 48px;

    font-size: 11px;
    font-weight: 600;

    color: var(--ct-text-soft);
}

.ct-location-indicator {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #8bc99a;

    box-shadow: 0 0 0 5px rgba(139, 201, 154, 0.10);
}


/* =========================================================
   06. HERO EDITORIAL CARD
========================================================= */

.ct-hero-card {
    display: flex;
    flex-direction: column;

    min-height: 610px;

    overflow: hidden;

    border: 1px solid rgba(213, 230, 172, 0.20);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(213, 230, 172, 0.13),
            transparent 45%
        ),
        #1b2a1e;

    color: #f5f6ef;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.13);

    transform: rotate(2deg);

    transition: transform 350ms ease;
}

.ct-hero-card:hover {
    transform: rotate(0deg) translateY(-5px);
}

.ct-hero-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 25px;

    padding: 27px 30px;

    border-bottom: 1px solid rgba(213, 230, 172, 0.14);

    color: #c2d4bb;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.ct-hero-card-top > span:last-child {
    font-size: 28px;

    color: #d5e6ac;
}

.ct-hero-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

    padding: 60px 38px;
}

.ct-hero-card-small {
    display: block;

    margin-bottom: 24px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: #a9c4a5;
}

.ct-hero-card-body p {
    margin-bottom: 0;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(35px, 3.6vw, 53px);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 1.17;

    color: #ffffff;
}

.ct-hero-card-body p em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: #d5e6ac;
}

.ct-hero-card-topics {
    padding: 0 30px;
}

.ct-hero-card-topics > div {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 58px;

    border-top: 1px solid rgba(213, 230, 172, 0.14);

    color: #e6eddf;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.ct-hero-card-topics > div > span:first-child {
    color: #a9c4a5;
}

.ct-hero-card-topics > div > span:last-child {
    margin-left: auto;

    color: #d5e6ac;

    font-size: 18px;
}

.ct-hero-card-footer {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;
    padding: 25px 30px;

    border-top: 1px solid rgba(213, 230, 172, 0.14);

    color: #9fb69c;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


/* =========================================================
   07. DIRECT CONTACT
========================================================= */

.ct-direct {
    padding: 120px 0;

    background: var(--ct-bg-secondary);

    border-top: 1px solid var(--ct-border);
    border-bottom: 1px solid var(--ct-border);
}

.ct-direct-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.ct-direct-card {
    display: flex;
    flex-direction: column;

    min-height: 360px;

    padding: 30px;

    border: 1px solid var(--ct-border);
    border-radius: 15px;

    background: var(--ct-surface);

    color: var(--ct-text);

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}

.ct-direct-card:hover {
    transform: translateY(-6px);

    border-color: var(--ct-accent);

    background: var(--ct-surface-hover);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.ct-direct-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 55px;
}

.ct-direct-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 53px;
    height: 53px;

    border: 1px solid var(--ct-border);
    border-radius: 13px;

    background: var(--ct-accent-soft);

    color: var(--ct-accent);

    font-size: 25px;
    font-weight: 750;
    letter-spacing: -1.5px;
}

.ct-direct-arrow {
    color: var(--ct-accent);

    font-size: 23px;

    transition: transform 250ms ease;
}

.ct-direct-card:hover .ct-direct-arrow {
    transform: translate(4px, -4px);
}

.ct-direct-card-body {
    flex: 1;
}

.ct-direct-card-label {
    display: inline-block;

    margin-bottom: 17px;

    color: var(--ct-accent);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.ct-direct-card h3 {
    margin-bottom: 16px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(25px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;

    color: var(--ct-text);
}

.ct-direct-card p {
    margin-bottom: 25px;

    font-size: 13px;
    line-height: 1.85;

    color: var(--ct-text-muted);
}

.ct-direct-card-address {
    display: block;

    margin-top: auto;
    padding-top: 20px;

    border-top: 1px solid var(--ct-border);

    color: var(--ct-accent);

    font-size: 12px;
    font-weight: 700;

    overflow-wrap: anywhere;
}


/* =========================================================
   08. ENQUIRY CATEGORIES
========================================================= */

.ct-topics {
    padding: 120px 0;
}

.ct-topics-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.ct-topic-card {
    display: grid;

    grid-template-columns: 30px minmax(0, 1fr) 25px;

    align-items: start;

    gap: 20px;

    min-height: 235px;

    padding: 30px;

    border: 1px solid var(--ct-border);
    border-radius: 14px;

    background: var(--ct-surface);

    color: var(--ct-text);

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease;
}

.ct-topic-card:hover {
    transform: translateY(-4px);

    border-color: var(--ct-accent);

    background: var(--ct-surface-hover);
}

.ct-topic-number {
    padding-top: 3px;

    font-size: 11px;
    font-weight: 750;

    color: var(--ct-accent);
}

.ct-topic-content {
    min-width: 0;
}

.ct-topic-tag {
    display: inline-block;

    margin-bottom: 17px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--ct-text-soft);
}

.ct-topic-content h3 {
    margin-bottom: 15px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(24px, 2.7vw, 35px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;

    color: var(--ct-text);
}

.ct-topic-content p {
    max-width: 430px;

    margin-bottom: 0;

    font-size: 13px;
    line-height: 1.85;

    color: var(--ct-text-muted);
}

.ct-topic-arrow {
    color: var(--ct-accent);

    font-size: 22px;

    transition: transform 250ms ease;
}

.ct-topic-card:hover .ct-topic-arrow {
    transform: translate(4px, -4px);
}


/* General Enquiries Featured Card */

.ct-topic-card-general {
    grid-column: 1 / -1;

    min-height: 195px;

    background:
        radial-gradient(
            ellipse at 90% 30%,
            var(--ct-accent-soft),
            transparent 50%
        ),
        var(--ct-surface);
}

.ct-topic-card-general .ct-topic-content p {
    max-width: 650px;
}


/* =========================================================
   09. SOCIAL PLATFORMS
========================================================= */

.ct-social {
    padding: 120px 0;

    background: var(--ct-bg-secondary);

    border-top: 1px solid var(--ct-border);
    border-bottom: 1px solid var(--ct-border);
}

.ct-social-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.ct-social-link {
    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    column-gap: 20px;
    row-gap: 12px;

    min-height: 145px;

    padding: 30px;

    border: 1px solid var(--ct-border);
    border-radius: 13px;

    background: var(--ct-surface);

    color: var(--ct-text);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease;
}

.ct-social-link:hover {
    transform: translateY(-4px);

    border-color: var(--ct-accent);

    background: var(--ct-surface-hover);
}

.ct-social-platform {
    font-family: var(--font-heading, Arial, sans-serif);

    font-size: 31px;
    font-weight: 750;
    letter-spacing: -0.05em;

    color: var(--ct-text);
}

.ct-social-description {
    grid-column: 1;
    grid-row: 2;

    font-size: 12px;

    color: var(--ct-text-muted);
}

.ct-social-arrow {
    grid-column: 2;
    grid-row: 1 / 3;

    font-size: 23px;

    color: var(--ct-accent);

    transition: transform 250ms ease;
}

.ct-social-link:hover .ct-social-arrow {
    transform: translate(4px, -4px);
}


/* =========================================================
   10. CONTACT FORM SECTION
========================================================= */

.ct-form-section {
    padding: 130px 0 150px;

    background:
        radial-gradient(
            ellipse at 15% 35%,
            var(--ct-accent-soft),
            transparent 50%
        ),
        var(--ct-bg);
}

.ct-form-layout {
    display: grid;

    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

    align-items: start;

    gap: 90px;
}


/* ---------------------------------------------------------
   11. FORM INTRODUCTION
--------------------------------------------------------- */

.ct-form-intro {
    position: sticky;
    top: 125px;
}

.ct-form-intro h2 {
    margin-bottom: 32px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(54px, 6vw, 85px);
    font-weight: 750;
    letter-spacing: -0.07em;
    line-height: 1.03;

    color: var(--ct-text);
}

.ct-form-intro h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--ct-accent);
}

.ct-form-lead {
    max-width: 390px;

    margin-bottom: 22px;

    font-size: 21px;
    font-weight: 500;
    line-height: 1.5;

    color: var(--ct-text);
}

.ct-form-description {
    max-width: 400px;

    margin-bottom: 0;

    font-size: 14px;
    line-height: 1.9;

    color: var(--ct-text-muted);
}


/* Direct Email Note */

.ct-form-contact-note {
    display: flex;
    align-items: flex-start;

    gap: 20px;

    margin-top: 50px;
    padding-top: 30px;

    border-top: 1px solid var(--ct-border);
}

.ct-form-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border: 1px solid var(--ct-border);
    border-radius: 50%;

    background: var(--ct-accent-soft);

    color: var(--ct-accent);

    font-size: 20px;
}

.ct-form-contact-note strong {
    display: block;

    margin-bottom: 9px;

    font-size: 14px;

    color: var(--ct-text);
}

.ct-form-contact-note p {
    max-width: 320px;

    margin-bottom: 0;

    font-size: 13px;
    line-height: 1.8;

    color: var(--ct-text-muted);
}

.ct-form-contact-note a {
    color: var(--ct-accent);

    font-weight: 700;

    overflow-wrap: anywhere;
}

.ct-form-contact-note a:hover {
    text-decoration: underline;
}


/* =========================================================
   12. CONTACT FORM CARD
========================================================= */

.ct-form-card {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--ct-border);
    border-radius: 20px;

    background: var(--ct-surface);

    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.07);
}

.ct-form-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 25px;

    padding: 35px 38px;

    border-bottom: 1px solid var(--ct-border);

    background:
        linear-gradient(
            120deg,
            var(--ct-accent-soft),
            transparent 75%
        );
}

.ct-form-card-kicker {
    display: block;

    margin-bottom: 13px;

    color: var(--ct-accent);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.ct-form-card-header h3 {
    margin: 0;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: 33px;
    font-weight: 750;
    letter-spacing: -0.05em;

    color: var(--ct-text);
}

.ct-form-card-symbol {
    color: var(--ct-accent);

    font-size: 48px;
    line-height: 1;
}


/* ---------------------------------------------------------
   13. FORM FIELDS
--------------------------------------------------------- */

.ct-contact-form {
    display: flex;
    flex-direction: column;

    gap: 26px;

    padding: 38px;
}

.ct-field {
    display: flex;
    flex-direction: column;

    gap: 11px;

    min-width: 0;
}

.ct-field label {
    display: inline-block;

    font-size: 12px;
    font-weight: 700;

    color: var(--ct-text);
}

.ct-field label > span {
    color: var(--ct-accent);
}

.ct-field input,
.ct-field select,
.ct-field textarea {
    display: block;

    width: 100%;
    min-width: 0;

    padding: 16px 17px;

    border: 1px solid var(--ct-border);
    border-radius: 9px;

    outline: none;

    background: var(--ct-input-bg);

    color: var(--ct-text);

    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;

    transition:
        border-color 250ms ease,
        box-shadow 250ms ease,
        background-color 250ms ease;
}

.ct-field input,
.ct-field select {
    min-height: 55px;
}

.ct-field textarea {
    min-height: 175px;

    resize: vertical;
}

.ct-field input::placeholder,
.ct-field textarea::placeholder {
    color: var(--ct-text-soft);

    opacity: 0.9;
}

.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
    border-color: var(--ct-accent);

    box-shadow: 0 0 0 3px var(--ct-accent-soft);
}

.ct-field select {
    cursor: pointer;

    padding-right: 40px;
}

.ct-field select option {
    background: var(--ct-surface);

    color: var(--ct-text);
}

.ct-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.ct-character-counter {
    font-size: 11px;
    font-weight: 600;

    color: var(--ct-text-soft);
}


/* ---------------------------------------------------------
   14. ANTI-SPAM FIELD
--------------------------------------------------------- */

.ct-honeypot {
    position: absolute;

    left: -10000px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}


/* ---------------------------------------------------------
   15. CONSENT CHECKBOX
--------------------------------------------------------- */

.ct-consent {
    margin-top: 2px;
}

.ct-consent-label {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 14px;

    cursor: pointer;
}

.ct-consent-label input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.ct-consent-custom {
    position: relative;

    display: block;

    width: 22px;
    height: 22px;

    flex-shrink: 0;

    margin-top: 1px;

    border: 1px solid var(--ct-border);
    border-radius: 6px;

    background: var(--ct-input-bg);

    transition:
        background-color 200ms ease,
        border-color 200ms ease;
}

.ct-consent-label input:checked + .ct-consent-custom {
    background: #d5e6ac;

    border-color: #d5e6ac;
}

.ct-consent-label input:checked + .ct-consent-custom::after {
    content: "";

    position: absolute;

    top: 4px;
    left: 7px;

    width: 5px;
    height: 9px;

    border: solid #192519;
    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}

.ct-consent-label input:focus-visible + .ct-consent-custom {
    outline: 3px solid var(--ct-accent);
    outline-offset: 4px;
}

.ct-consent-text {
    max-width: 460px;

    color: var(--ct-text-muted);

    font-size: 12px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   16. SUBMIT BUTTON
--------------------------------------------------------- */

.ct-submit-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    width: 100%;
    min-height: 61px;

    margin-top: 7px;
    padding: 12px 14px 12px 24px;

    border: 1px solid #d5e6ac;
    border-radius: 10px;

    background: #d5e6ac;

    color: #192519;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}

.ct-submit-button:hover:not(:disabled) {
    background: #e5f0c9;

    transform: translateY(-2px);

    box-shadow: 0 12px 30px rgba(213, 230, 172, 0.12);
}

.ct-submit-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #263a28;

    color: #d5e6ac;

    font-size: 19px;
}

.ct-submit-button:disabled {
    cursor: wait;
}

.ct-submit-processing {
    opacity: 0.8;
}

.ct-form-footer-note {
    margin: -7px 0 0;

    font-size: 11px;
    line-height: 1.8;

    color: var(--ct-text-soft);
}


/* =========================================================
   17. CLOSING SECTION
========================================================= */

.ct-closing {
    padding: 140px 0 45px;

    background:
        radial-gradient(
            ellipse at 50% 25%,
            var(--ct-accent-soft),
            transparent 55%
        ),
        var(--ct-bg-secondary);

    border-top: 1px solid var(--ct-border);
}

.ct-closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 1000px;

    margin: 0 auto 125px;

    text-align: center;
}

.ct-closing-eyebrow {
    margin-bottom: 32px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--ct-accent);
}

.ct-closing-content h2 {
    margin-bottom: 35px;

    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(55px, 8vw, 110px);
    font-weight: 750;
    letter-spacing: -0.075em;
    line-height: 1.02;

    color: var(--ct-text);
}

.ct-closing-content h2 em {
    font-family: var(--font-editorial, Georgia, serif);
    font-weight: 400;

    color: var(--ct-accent);
}

.ct-closing-content > p {
    max-width: 495px;

    margin-bottom: 40px;

    font-size: 15px;
    line-height: 1.9;

    color: var(--ct-text-muted);
}

.ct-closing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 13px;
}


/* ---------------------------------------------------------
   18. BOTTOM NAVIGATION
--------------------------------------------------------- */

.ct-bottom-navigation {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--ct-border);
}

.ct-bottom-navigation a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 14px;

    padding: 36px 30px;

    color: var(--ct-text);

    transition: background-color 250ms ease;
}

.ct-bottom-navigation a:first-child {
    padding-left: 0;

    border-right: 1px solid var(--ct-border);
}

.ct-bottom-navigation a:last-child {
    align-items: flex-end;

    padding-right: 0;

    text-align: right;
}

.ct-bottom-navigation a:hover {
    background: var(--ct-accent-soft);
}

.ct-bottom-navigation a > span:first-child {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;

    color: var(--ct-text-soft);
}

.ct-bottom-navigation a strong {
    font-family: var(--font-heading, Arial, sans-serif);

    font-size: clamp(24px, 3vw, 38px);
    font-weight: 750;
    letter-spacing: -0.045em;

    color: var(--ct-text);
}

.ct-bottom-navigation a > span:last-child {
    font-size: 23px;

    color: var(--ct-accent);
}


/* =========================================================
   19. ACCESSIBILITY
========================================================= */

.ct-page a:focus-visible,
.ct-page button:focus-visible {
    outline: 3px solid var(--ct-accent);
    outline-offset: 4px;
}


/* =========================================================
   RESPONSIVE DESIGN
========================================================= */


/* ---------------------------------------------------------
   20. SMALL LAPTOPS
--------------------------------------------------------- */

@media (max-width: 1100px) {

    .ct-hero-grid {
        gap: 55px;
    }

    .ct-hero h1 {
        font-size: clamp(76px, 9vw, 120px);
    }

    .ct-hero-card {
        min-height: 550px;
    }

    .ct-hero-card-body {
        padding: 45px 30px;
    }

    .ct-form-layout {
        gap: 55px;
    }

    .ct-form-intro h2 {
        font-size: clamp(52px, 5.5vw, 74px);
    }

    .ct-contact-form {
        padding: 30px;
    }

    .ct-direct-card {
        padding: 25px;
    }

}


/* ---------------------------------------------------------
   21. TABLETS
--------------------------------------------------------- */

@media (max-width: 900px) {

    .ct-container {
        width: min(720px, calc(100% - 48px));
    }

    .ct-hero {
        padding: 90px 0 110px;
    }

    .ct-hero-grid {
        grid-template-columns: 1fr;

        gap: 75px;
    }

    .ct-hero h1 {
        font-size: clamp(85px, 12vw, 125px);
    }

    .ct-hero-card {
        width: 100%;
        max-width: 620px;

        min-height: 520px;

        margin-inline: auto;

        transform: rotate(0deg);
    }

    .ct-hero-card:hover {
        transform: translateY(-4px);
    }

    .ct-section-intro {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .ct-direct-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ct-direct-card {
        min-height: 335px;
    }

    .ct-form-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .ct-form-intro {
        position: static;
    }

    .ct-form-intro h2 {
        font-size: clamp(65px, 9vw, 90px);
    }

    .ct-form-card {
        max-width: 720px;
    }

}


/* ---------------------------------------------------------
   22. MOBILE PHONES
--------------------------------------------------------- */

@media (max-width: 640px) {

    .ct-container {
        width: calc(100% - 36px);
    }


    /* Shared Section Headings */

    .ct-section-heading {
        align-items: flex-start;

        gap: 15px;

        margin-bottom: 45px;
    }

    .ct-section-number {
        gap: 9px;

        font-size: 9px;
        letter-spacing: 1px;
    }

    .ct-section-line {
        width: 24px;
    }

    .ct-section-note {
        max-width: 115px;

        text-align: right;

        font-size: 8px;
        letter-spacing: 1px;
        line-height: 1.6;
    }

    .ct-small-label {
        margin-bottom: 18px;

        font-size: 9px;
    }

    .ct-section-intro {
        margin-bottom: 35px;
    }

    .ct-section-intro h2 {
        font-size: clamp(39px, 9vw, 56px);
    }

    .ct-section-intro > p {
        font-size: 13px;
    }


    /* Hero */

    .ct-hero {
        padding: 65px 0 85px;
    }

    .ct-eyebrow {
        margin-bottom: 30px;

        font-size: 9px;
        letter-spacing: 1.1px;
    }

    .ct-hero h1 {
        font-size: clamp(69px, 16vw, 100px);
    }

    .ct-hero-lead {
        font-size: 21px;
    }

    .ct-hero-description {
        font-size: 13px;
    }

    .ct-hero-actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }

    .ct-button {
        width: 100%;
    }

    .ct-hero-location {
        margin-top: 35px;

        font-size: 10px;
    }


    /* Hero Editorial Card */

    .ct-hero-grid {
        gap: 55px;
    }

    .ct-hero-card {
        min-height: 460px;

        border-radius: 15px;
    }

    .ct-hero-card-top {
        padding: 22px;

        font-size: 9px;
    }

    .ct-hero-card-body {
        padding: 45px 25px;
    }

    .ct-hero-card-body p {
        font-size: clamp(35px, 8vw, 48px);
    }

    .ct-hero-card-small {
        font-size: 9px;
    }

    .ct-hero-card-topics {
        padding-inline: 22px;
    }

    .ct-hero-card-topics > div {
        min-height: 50px;

        font-size: 9px;
    }

    .ct-hero-card-footer {
        padding: 20px 22px;

        font-size: 8px;
    }


    /* Section Spacing */

    .ct-direct,
    .ct-topics,
    .ct-social {
        padding: 80px 0;
    }


    /* Direct Contact */

    .ct-direct-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .ct-direct-card {
        min-height: 310px;

        padding: 25px;
    }

    .ct-direct-card-top {
        margin-bottom: 35px;
    }

    .ct-direct-card h3 {
        font-size: 31px;
    }


    /* Enquiry Categories */

    .ct-topics-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .ct-topic-card {
        grid-template-columns: 22px minmax(0, 1fr) 22px;

        gap: 13px;

        min-height: auto;

        padding: 25px 20px;
    }

    .ct-topic-content h3 {
        font-size: 26px;
    }

    .ct-topic-content p {
        font-size: 12px;
    }

    .ct-topic-card-general {
        grid-column: auto;
    }


    /* Social Links */

    .ct-social-grid {
        grid-template-columns: 1fr;

        gap: 11px;
    }

    .ct-social-link {
        min-height: 115px;

        padding: 24px;
    }

    .ct-social-platform {
        font-size: 29px;
    }


    /* Contact Form Section */

    .ct-form-section {
        padding: 85px 0 100px;
    }

    .ct-form-layout {
        gap: 45px;
    }

    .ct-form-intro h2 {
        font-size: clamp(55px, 12vw, 78px);
    }

    .ct-form-lead {
        font-size: 19px;
    }

    .ct-form-description {
        font-size: 13px;
    }

    .ct-form-contact-note {
        margin-top: 35px;
    }


    /* Contact Form Card */

    .ct-form-card {
        border-radius: 14px;
    }

    .ct-form-card-header {
        padding: 25px 22px;
    }

    .ct-form-card-header h3 {
        font-size: 27px;
    }

    .ct-form-card-symbol {
        font-size: 38px;
    }

    .ct-contact-form {
        gap: 23px;

        padding: 25px 20px;
    }

    .ct-field input,
    .ct-field select,
    .ct-field textarea {
        padding: 15px;

        /*
           16px avoids automatic zooming
           when focusing form fields on iOS.
        */

        font-size: 16px;
    }

    .ct-field label {
        font-size: 12px;
    }

    .ct-consent-text {
        font-size: 11px;
    }

    .ct-submit-button {
        min-height: 57px;
    }


    /* Closing */

    .ct-closing {
        padding: 95px 0 35px;
    }

    .ct-closing-content {
        margin-bottom: 80px;
    }

    .ct-closing-content h2 {
        font-size: clamp(49px, 10.5vw, 70px);
    }

    .ct-closing-content > p {
        font-size: 13px;
    }

    .ct-closing-actions {
        width: 100%;

        flex-direction: column;
    }


    /* Bottom Navigation */

    .ct-bottom-navigation a {
        padding: 25px 14px;
    }

    .ct-bottom-navigation a strong {
        font-size: 21px;
    }

    .ct-bottom-navigation a > span:first-child {
        font-size: 8px;
    }

}


/* ---------------------------------------------------------
   23. VERY SMALL PHONES
--------------------------------------------------------- */

@media (max-width: 380px) {

    .ct-container {
        width: calc(100% - 28px);
    }

    .ct-hero h1 {
        font-size: clamp(57px, 15vw, 68px);
    }

    .ct-hero-card-body p {
        font-size: 33px;
    }

    .ct-direct-card-address {
        font-size: 11px;
    }

    .ct-form-intro h2 {
        font-size: 51px;
    }

    .ct-contact-form {
        padding-inline: 15px;
    }

    .ct-form-card-header {
        padding-inline: 17px;
    }

    .ct-closing-content h2 {
        font-size: 45px;
    }

}


/* ---------------------------------------------------------
   24. REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .ct-page *,
    .ct-page *::before,
    .ct-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}