:root {
    --navy-950: #07101f;
    --navy-900: #0b1220;
    --navy-850: #101a2c;
    --navy-800: #142039;
    --navy-700: #1f2d4a;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    --white: #ffffff;
    --orange-700: #9a3412;
    --orange-650: #b33b0d;
    --orange-600: #c2410c;
    --orange-500: #ea580c;
    --orange-100: #ffedd5;
    --orange-50: #fff7ed;
    --green: #22c55e;
    --container: 1200px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 34px;
    --shadow-soft: 0 24px 70px rgba(7, 16, 31, 0.12);
    --shadow-dark: 0 36px 90px rgba(0, 0, 0, 0.28);
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--slate-600);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
}

body::selection {
    background: var(--orange-100);
    color: var(--navy-950);
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

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

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    color: var(--navy-900);
    line-height: 1.08;
}

h1 {
    font-size: clamp(3rem, 7vw, 6.5rem);
    letter-spacing: -0.065em;
}

h2 {
    font-size: clamp(2.25rem, 4.3vw, 4.35rem);
    letter-spacing: -0.052em;
}

h3 {
    font-size: 1.3rem;
    letter-spacing: -0.025em;
}

p {
    margin-bottom: 1rem;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin-inline: auto;
}

.section {
    padding: 7.5rem 0;
}

.section-muted {
    background: var(--slate-50);
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 1rem;
    left: 1rem;
    transform: translateY(-160%);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--navy-900);
    padding: 0.8rem 1rem;
    font-weight: 800;
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.reveal-delay {
    transition-delay: 120ms;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header */

.site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
}

.header-inner {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background:
        linear-gradient(145deg, var(--navy-900), var(--navy-700));
    color: var(--white);
    font-size: 0.87rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 30px rgba(7, 16, 31, 0.16);
}

.brand-text {
    display: grid;
    line-height: 1.15;
}

.brand-text strong {
    color: var(--navy-900);
    font-size: 0.98rem;
}

.brand-text small {
    margin-top: 0.25rem;
    color: var(--slate-500);
    font-size: 0.7rem;
}

.site-navigation {
    display: flex;
    align-items: center;
    gap: 1.9rem;
}

.site-navigation a {
    position: relative;
    color: var(--navy-700);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.site-navigation > a:not(.nav-cta)::after {
    position: absolute;
    right: 0;
    bottom: -0.45rem;
    left: 0;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--orange-600);
    content: "";
    transition: transform 160ms ease;
}

.site-navigation > a:not(.nav-cta):hover::after,
.site-navigation > a:not(.nav-cta):focus-visible::after,
.site-navigation > a:not(.nav-cta).is-active::after {
    transform: scaleX(1);
}

.nav-cta {
    border-radius: 12px;
    background: var(--navy-900);
    color: var(--white) !important;
    padding: 0.75rem 1.05rem;
    box-shadow: 0 12px 26px rgba(7, 16, 31, 0.14);
    transition: transform 160ms ease, background 160ms ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
    transform: translateY(-1px);
    background: var(--orange-600);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: var(--white);
    padding: 9px;
}

.nav-toggle span:not(.sr-only) {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: var(--navy-900);
}

/* Shared */

.eyebrow {
    margin-bottom: 1rem;
    color: var(--orange-600);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.eyebrow-light {
    color: #fdba74;
}

.button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 0.8rem 1.25rem;
    font-size: 0.92rem;
    font-weight: 850;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
}

.button-accent {
    border-color: var(--orange-600);
    background: var(--orange-600);
    color: var(--white);
    box-shadow: 0 16px 34px rgba(194, 65, 12, 0.24);
}

.button-accent:hover,
.button-accent:focus-visible {
    border-color: var(--orange-700);
    background: var(--orange-700);
}

.button-secondary {
    border-color: var(--slate-200);
    background: var(--white);
    color: var(--navy-900);
}

.button-ghost-light {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
}

.button-ghost-light:hover,
.button-ghost-light:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.11);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.section-lead,
.hero-lead {
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    line-height: 1.7;
}

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--navy-900);
    font-weight: 850;
    text-decoration: none;
}

.arrow-link span {
    color: var(--orange-600);
    transition: transform 160ms ease;
}

.arrow-link:hover span,
.arrow-link:focus-visible span {
    transform: translate(3px, -3px);
}

.arrow-link-light {
    color: var(--white);
}

.split-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 5rem;
    align-items: end;
    margin-bottom: 3.7rem;
}

.split-heading > div:last-child {
    max-width: 620px;
}

.split-heading-dark h2,
.split-heading-dark .section-lead {
    color: var(--white);
}

/* Hero */

.hero-home {
    position: relative;
    overflow: hidden;
    min-height: 820px;
    background:
        radial-gradient(circle at 18% 18%, rgba(234, 88, 12, 0.1), transparent 34%),
        linear-gradient(135deg, var(--navy-950), var(--navy-850) 58%, #111b30);
    color: var(--slate-300);
}

.hero-home::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}

.hero-glow-one {
    top: 8%;
    right: 10%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(194, 65, 12, 0.15), transparent 68%);
}

.hero-glow-two {
    bottom: -8%;
    left: 18%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 70%);
}

.hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 820px;
    grid-template-columns: minmax(0, 1.02fr) minmax(480px, 0.98fr);
    align-items: center;
    gap: 4.5rem;
    padding: 7rem 0;
}

.hero-home h1 {
    max-width: 830px;
    margin-bottom: 1.6rem;
    color: var(--white);
}

.hero-home h1 span {
    color: #fdba74;
}

.hero-copy {
    max-width: 780px;
}

.hero-copy .hero-lead {
    max-width: 740px;
    margin-bottom: 2.1rem;
    color: var(--slate-300);
}

.availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--slate-200);
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 750;
}

.availability-pill span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.1);
}

.hero-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-top: 3.2rem;
    border-top: 1px solid rgba(255,255,255,0.11);
    padding-top: 1.5rem;
}

.hero-proof div {
    display: grid;
    gap: 0.2rem;
}

.hero-proof strong {
    color: var(--white);
    font-size: 0.9rem;
}

.hero-proof span {
    color: var(--slate-400);
    font-size: 0.73rem;
}

.hero-stage {
    position: relative;
    min-height: 610px;
}

.orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
}

.orbit-one {
    inset: 2% -4% 8% 4%;
}

.orbit-two {
    inset: 14% 8% 0 16%;
}

.platform-window {
    position: absolute;
    inset: 7% 0 8% 6%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    background: rgba(255,255,255,0.97);
    box-shadow: var(--shadow-dark);
    transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
}

.window-bar {
    display: grid;
    height: 52px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--slate-200);
    padding: 0 1rem;
}

.window-dots {
    display: flex;
    gap: 6px;
}

.window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--slate-300);
}

.window-dots span:first-child {
    background: var(--orange-600);
}

.window-title {
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 750;
}

.window-status {
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    padding: 0.3rem 0.55rem;
    font-size: 0.62rem;
    font-weight: 850;
}

.platform-shell {
    display: grid;
    min-height: 475px;
    grid-template-columns: 66px 1fr;
}

.platform-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    border-right: 1px solid var(--slate-200);
    background: var(--slate-50);
    padding: 1.2rem 0;
}

.sidebar-logo {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--navy-900);
    color: var(--white);
    font-size: 0.74rem;
    font-weight: 900;
}

.sidebar-item {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--slate-200);
}

.sidebar-item.active {
    background: var(--orange-100);
    box-shadow: inset 0 0 0 1px #fed7aa;
}

.platform-content {
    padding: 2rem;
}

.platform-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.platform-heading > div {
    display: grid;
}

.platform-heading small {
    color: var(--slate-500);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.platform-heading strong {
    color: var(--navy-900);
    font-size: 1.08rem;
}

.status-chip {
    align-self: start;
    border-radius: 999px;
    background: var(--orange-50);
    color: var(--orange-650);
    padding: 0.35rem 0.6rem;
    font-size: 0.63rem;
    font-weight: 850;
}

.platform-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.metric-box {
    display: grid;
    min-height: 114px;
    align-content: center;
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    padding: 0.9rem;
}

.metric-box span {
    margin-bottom: 0.8rem;
    color: var(--orange-600);
    font-size: 0.66rem;
    font-weight: 900;
}

.metric-box strong {
    color: var(--navy-900);
    font-size: 0.82rem;
}

.metric-box small {
    color: var(--slate-500);
    font-size: 0.59rem;
    line-height: 1.35;
}

.platform-lower {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0.8rem;
}

.delivery-chart,
.integration-list {
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    padding: 1rem;
}

.chart-title {
    display: grid;
    margin-bottom: 0.8rem;
}

.chart-title strong {
    color: var(--navy-900);
    font-size: 0.78rem;
}

.chart-title small {
    color: var(--slate-500);
    font-size: 0.58rem;
}

.chart-bars {
    display: flex;
    height: 96px;
    align-items: flex-end;
    gap: 8px;
}

.chart-bars span {
    flex: 1;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(to top, var(--orange-650), #fb923c);
}

.integration-list {
    display: grid;
    align-content: center;
    gap: 0.7rem;
}

.integration-list div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.integration-list span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: var(--navy-900);
    color: var(--white);
    font-size: 0.55rem;
    font-weight: 900;
}

.integration-list strong {
    color: var(--navy-900);
    font-size: 0.67rem;
}

.floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 15px;
    background: rgba(13, 24, 42, 0.84);
    color: var(--white);
    padding: 0.8rem 0.95rem;
    box-shadow: 0 24px 55px rgba(0,0,0,0.24);
    backdrop-filter: blur(14px);
}

.floating-card > div {
    display: grid;
}

.floating-card strong {
    font-size: 0.72rem;
}

.floating-card small {
    color: var(--slate-400);
    font-size: 0.58rem;
}

.float-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--orange-600);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 900;
}

.float-card-one {
    right: -2%;
    bottom: 4%;
}

.float-card-two {
    top: 2%;
    left: 0;
}

.float-card-three {
    right: -5%;
    top: 40%;
}





/* =========================================================
   END-TO-END MOODLE SERVICES OVERVIEW
   ========================================================= */

.section-intro {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(194, 65, 12, 0.06),
            transparent 25%
        ),
        var(--white);
}

.services-overview-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.75fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
    margin-bottom: 4rem;
}

.services-overview-title {
    max-width: 790px;
}

.services-kicker {
    margin-bottom: 1.25rem;
    color: var(--orange-600);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    font-weight: 850;
    letter-spacing: 0.035em;
}

.services-overview-title h2 {
    margin-bottom: 0;
    color: var(--navy-900);
    font-size: clamp(2.8rem, 4.7vw, 4.7rem);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.services-overview-title h2 span {
    display: block;
    color: var(--orange-600);
}

.services-overview-intro {
    max-width: 590px;
    padding-bottom: 0.4rem;
}

.services-overview-intro p {
    margin-bottom: 1.5rem;
    color: var(--slate-600);
    font-size: clamp(1.05rem, 1.45vw, 1.22rem);
    line-height: 1.75;
}

.services-overview-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--navy-900);
    font-size: 1rem;
    font-weight: 850;
    text-decoration: none;
}

.services-overview-link span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--orange-600);
    color: var(--white);
    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.services-overview-link:hover span,
.services-overview-link:focus-visible span {
    transform: translate(3px, -3px);
    background: var(--orange-700);
}

.lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.lifecycle-card {
    position: relative;
    display: flex;
    min-height: 390px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--slate-200);
    border-radius: 22px;
    background: var(--white);
    padding: 1.7rem;
    box-shadow: 0 12px 35px rgba(7, 16, 31, 0.035);
    transition:
        transform 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease;
}

.lifecycle-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    transform: scaleX(0);
    transform-origin: left;
    background:
        linear-gradient(
            90deg,
            var(--orange-600),
            #fb923c
        );
    content: "";
    transition: transform 200ms ease;
}

.lifecycle-card::after {
    position: absolute;
    right: -85px;
    bottom: -85px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--orange-50);
    content: "";
    transition: transform 220ms ease;
}

.lifecycle-card:hover,
.lifecycle-card:focus-within {
    transform: translateY(-8px);
    border-color: #fed7aa;
    box-shadow: 0 28px 65px rgba(7, 16, 31, 0.11);
}

.lifecycle-card:hover::before,
.lifecycle-card:focus-within::before {
    transform: scaleX(1);
}

.lifecycle-card:hover::after,
.lifecycle-card:focus-within::after {
    transform: scale(1.14);
}

.lifecycle-card-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.card-index {
    color: var(--navy-900);
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.card-icon {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            var(--navy-900),
            var(--navy-700)
        );
    color: var(--white);
    box-shadow: 0 16px 32px rgba(7, 16, 31, 0.16);
    transition:
        transform 200ms ease,
        background 200ms ease;
}

.lifecycle-card:hover .card-icon,
.lifecycle-card:focus-within .card-icon {
    transform: rotate(-4deg) scale(1.06);
    background:
        linear-gradient(
            145deg,
            var(--orange-600),
            var(--orange-700)
        );
}

.card-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.card-stage {
    margin-bottom: 0.65rem;
    color: var(--orange-600);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.lifecycle-card h3 {
    margin-bottom: 1rem;
    color: var(--navy-900);
    font-size: clamp(1.35rem, 1.8vw, 1.62rem);
    line-height: 1.22;
    letter-spacing: -0.035em;
}

.lifecycle-card-content > p:last-child {
    margin-bottom: 1.5rem;
    color: var(--slate-600);
    font-size: 0.94rem;
    line-height: 1.7;
}

.lifecycle-card-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    margin-top: auto;
    color: var(--navy-900);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

.lifecycle-card-link span {
    color: var(--orange-600);
    transition: transform 180ms ease;
}

.lifecycle-card-link:hover span,
.lifecycle-card-link:focus-visible span {
    transform: translate(3px, -3px);
}

/* Medium screens */

@media (max-width: 1050px) {
    .services-overview-heading {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .services-overview-intro {
        max-width: 760px;
    }

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

/* Mobile */

@media (max-width: 700px) {
    .services-overview-heading {
        margin-bottom: 2.8rem;
    }

    .services-kicker {
        margin-bottom: 0.9rem;
        font-size: 1rem;
    }

    .services-overview-title h2 {
        font-size: clamp(2.35rem, 10vw, 3.4rem);
    }

    .services-overview-intro p {
        font-size: 1rem;
    }

    .lifecycle-grid {
        grid-template-columns: 1fr;
    }

    .lifecycle-card {
        min-height: 350px;
    }

    .card-index {
        font-size: 1.9rem;
    }

    .card-icon {
        width: 62px;
        height: 62px;
    }

    .card-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* Small mobile */

@media (max-width: 480px) {
    .lifecycle-card {
        min-height: auto;
        padding: 1.4rem;
    }

    .lifecycle-card-header {
        margin-bottom: 2.3rem;
    }

    .card-index {
        font-size: 1.7rem;
    }

    .card-icon {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }

    .lifecycle-card h3 {
        font-size: 1.38rem;
    }

    .lifecycle-card-content > p:last-child {
        font-size: 0.91rem;
    }
}






/* Work showcase */

.section-dark-work {
    background:
        radial-gradient(circle at 92% 10%, rgba(194, 65, 12, 0.14), transparent 28%),
        var(--navy-950);
    color: var(--slate-300);
}

.work-showcase {
    display: grid;
    gap: 1.2rem;
}

.work-feature {
    display: grid;
    min-height: 520px;
    grid-template-columns: 1.15fr 0.85fr;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 28px;
    background: rgba(255,255,255,0.045);
}

.work-visual {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 30%, rgba(234, 88, 12, 0.24), transparent 34%),
        linear-gradient(145deg, #17243a, #0d1628);
    padding: 2.4rem;
}

.work-visual::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
}

.work-label {
    position: absolute;
    z-index: 3;
    top: 1.35rem;
    left: 1.35rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: var(--white);
    padding: 0.4rem 0.65rem;
    font-size: 0.62rem;
    font-weight: 850;
}

.video-console {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 20px;
    background: rgba(7,16,31,0.88);
    padding: 1rem;
    box-shadow: 0 30px 80px rgba(0,0,0,0.32);
}

.video-console.compact {
    width: min(100%, 500px);
}

.video-screen {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 9;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background:
        radial-gradient(circle at 70% 20%, rgba(194,65,12,0.38), transparent 34%),
        linear-gradient(135deg, #1b2a44, #0b1220);
}

.video-screen::after {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
}

.play-button {
    position: relative;
    z-index: 2;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: var(--orange-600);
    color: var(--white);
    font-size: 0.82rem;
    box-shadow: 0 18px 38px rgba(194,65,12,0.3);
}

.screen-title {
    position: absolute;
    z-index: 2;
    bottom: 1rem;
    left: 1rem;
    color: var(--slate-300);
    font-size: 0.68rem;
}

.video-control {
    display: grid;
    gap: 0.65rem;
    padding: 1rem 0.2rem 0.4rem;
}

.timeline {
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
}

.timeline span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: var(--orange-600);
}

.video-meta {
    display: flex;
    justify-content: space-between;
    color: var(--slate-400);
    font-size: 0.65rem;
}

.video-meta strong {
    color: var(--white);
}

.video-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.video-stats div {
    display: grid;
    border-radius: 11px;
    background: rgba(255,255,255,0.05);
    padding: 0.7rem;
}

.video-stats small {
    color: var(--slate-400);
    font-size: 0.55rem;
}

.video-stats strong {
    color: var(--white);
    font-size: 0.68rem;
}

.work-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
}

.work-copy h3 {
    margin-bottom: 1.2rem;
    color: var(--white);
    font-size: clamp(2rem, 3.5vw, 3.3rem);
    letter-spacing: -0.04em;
}

.project-kicker {
    margin-bottom: 0.8rem;
    color: #fdba74;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.2rem 0 1.5rem;
    list-style: none;
}

.project-tags li {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    color: var(--slate-300);
    padding: 0.4rem 0.65rem;
    font-size: 0.66rem;
    font-weight: 750;
}

.project-tags-light li {
    border-color: var(--slate-200);
    color: var(--slate-600);
    background: var(--slate-50);
}

.work-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.work-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 24px;
    background: rgba(255,255,255,0.045);
}

.work-card-visual {
    display: grid;
    min-height: 260px;
    place-items: center;
    background: linear-gradient(145deg, #17243a, #0d1628);
    padding: 2rem;
}

.work-card-copy {
    padding: 1.6rem;
}

.work-card-copy h3 {
    margin-bottom: 1.25rem;
    color: var(--white);
}

.report-ui {
    display: grid;
    width: min(100%, 420px);
    grid-template-columns: 1.5fr 1fr 0.7fr;
    gap: 7px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 15px;
    background: rgba(7,16,31,0.72);
    padding: 1.1rem;
}

.report-ui.large {
    width: min(100%, 540px);
}

.report-ui span {
    height: 20px;
    border-radius: 5px;
    background: rgba(255,255,255,0.11);
}

.report-ui span:nth-child(3n + 1) {
    background: rgba(255,255,255,0.18);
}

.report-ui span:nth-child(3n) {
    background: rgba(234,88,12,0.25);
}

.integration-map {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.integration-map.large {
    gap: 1rem;
}

.integration-map span {
    display: grid;
    min-width: 84px;
    min-height: 56px;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 13px;
    background: rgba(7,16,31,0.72);
    color: var(--white);
    padding: 0.55rem;
    font-size: 0.68rem;
    font-weight: 850;
    text-align: center;
}

.integration-map i {
    color: #fdba74;
    font-style: normal;
    font-weight: 900;
}

/* Process */

.process-section {
    background: var(--white);
}

.process-layout {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 6rem;
}

.process-heading {
    position: sticky;
    top: 130px;
    align-self: start;
}

.process-heading p:last-child {
    max-width: 520px;
}

.process-list {
    list-style: none;
}

.process-list li {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 1.2rem;
    border-top: 1px solid var(--slate-200);
    padding: 1.6rem 0;
}

.process-list li:last-child {
    border-bottom: 1px solid var(--slate-200);
}

.process-list > li > span {
    color: var(--orange-600);
    font-size: 0.74rem;
    font-weight: 900;
}

.process-list h3 {
    margin-bottom: 0.4rem;
    font-size: 1.5rem;
}

.process-list p {
    margin-bottom: 0;
}

/* Capabilities */

.capabilities-section {
    padding-top: 2rem;
}

.capabilities-panel {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    overflow: hidden;
    border-radius: 30px;
    background:
        radial-gradient(circle at 10% 0%, rgba(194,65,12,0.18), transparent 26%),
        var(--navy-900);
    color: var(--slate-300);
    padding: 4rem;
}

.capabilities-copy h2 {
    color: var(--white);
}

.capabilities-copy p {
    max-width: 520px;
}

.capability-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.capability-groups > div {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    padding: 1rem;
}

.capability-groups h3 {
    color: var(--white);
    font-size: 0.9rem;
}

.capability-groups span {
    display: block;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: var(--slate-300);
    padding: 0.55rem 0;
    font-size: 0.72rem;
}

/* Final CTA */

.final-cta {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 5rem;
    align-items: end;
    border-top: 1px solid var(--slate-200);
    border-bottom: 1px solid var(--slate-200);
    padding: 4rem 0;
}

/* Page hero */

.page-hero-dark,
.project-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(194,65,12,0.16), transparent 30%),
        var(--navy-950);
    color: var(--slate-300);
}

.page-hero-dark::before,
.project-hero::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 58px 58px;
    content: "";
}

.page-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 520px;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 5rem;
    align-items: end;
    padding: 7rem 0 5rem;
}

.page-hero h1,
.project-hero h1 {
    max-width: 900px;
    margin-bottom: 0;
    color: var(--white);
    font-size: clamp(3.2rem, 7vw, 6.2rem);
}

.page-hero-copy {
    max-width: 560px;
    padding-bottom: 0.6rem;
}

.page-hero-copy p {
    margin-bottom: 0;
    color: var(--slate-300);
    font-size: 1.15rem;
}

.compact-hero .container {
    position: relative;
    z-index: 2;
    padding: 7rem 0 4rem;
}

/* Services detail */

.services-detail {
    display: grid;
}

.service-detail {
    display: grid;
    grid-template-columns: 90px 1fr 0.9fr;
    gap: 2rem;
    border-top: 1px solid var(--slate-200);
    padding: 3rem 0;
}

.service-detail:last-child {
    border-bottom: 1px solid var(--slate-200);
}

.service-detail-number {
    color: var(--orange-600);
    font-size: 0.76rem;
    font-weight: 900;
}

.service-detail h2 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 3vw, 3.2rem);
}

.service-detail ul {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    list-style: none;
}

.service-detail li {
    position: relative;
    border-bottom: 1px solid var(--slate-200);
    padding: 0 0 0.7rem 1.2rem;
    font-size: 0.9rem;
}

.service-detail li::before {
    position: absolute;
    top: 0.72rem;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange-600);
    content: "";
}

.service-band {
    display: grid;
    grid-template-columns: 1fr 0.9fr auto;
    gap: 3rem;
    align-items: center;
}

.service-band h2 {
    color: var(--white);
}

/* Work page */

.work-list {
    display: grid;
}

.work-list-item {
    display: grid;
    grid-template-columns: 60px minmax(320px, 0.9fr) 1.1fr;
    gap: 2rem;
    align-items: center;
    border-top: 1px solid var(--slate-200);
    padding: 3.5rem 0;
}

.work-list-item:last-child {
    border-bottom: 1px solid var(--slate-200);
}

.work-list-number {
    align-self: start;
    color: var(--orange-600);
    font-size: 0.75rem;
    font-weight: 900;
}

.work-list-visual {
    display: grid;
    min-height: 340px;
    place-items: center;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 30% 20%, rgba(194,65,12,0.22), transparent 30%),
        linear-gradient(145deg, #17243a, #0d1628);
    padding: 2rem;
}

.work-list-copy h2 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 3.2vw, 3.4rem);
}

.confidentiality-note {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 2rem;
    align-items: start;
}

.confidentiality-icon {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 24px;
    background: var(--navy-900);
    color: var(--white);
    font-size: 1.4rem;
}

/* About */

.about-profile {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 5rem;
    align-items: center;
}

.about-monogram {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 44px;
    background:
        radial-gradient(circle at 70% 20%, rgba(234,88,12,0.35), transparent 30%),
        var(--navy-900);
    color: var(--white);
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    box-shadow: var(--shadow-soft);
}

.about-profile-copy {
    max-width: 780px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.value-card {
    min-height: 270px;
    border: 1px solid var(--slate-200);
    border-radius: 18px;
    background: var(--white);
    padding: 1.5rem;
}

.value-card span {
    display: inline-block;
    margin-bottom: 3rem;
    color: var(--orange-600);
    font-size: 0.72rem;
    font-weight: 900;
}

.capability-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.capability-matrix div {
    border-top: 3px solid var(--navy-900);
    background: var(--slate-50);
    padding: 1.4rem;
}

/* Contact */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 5rem;
    align-items: start;
}

.contact-primary {
    position: sticky;
    top: 130px;
}

.contact-email-card {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
    border: 1px solid var(--slate-200);
    border-radius: 18px;
    background: var(--slate-50);
    padding: 1.3rem;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease;
}

.contact-email-card:hover,
.contact-email-card:focus-visible {
    transform: translateY(-3px);
    border-color: #fed7aa;
}

.contact-email-card span {
    color: var(--orange-600);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.contact-email-card strong {
    overflow-wrap: anywhere;
    color: var(--navy-900);
}

.contact-email-card i {
    color: var(--orange-600);
    font-style: normal;
    font-weight: 900;
}

.contact-secondary {
    display: grid;
    gap: 1rem;
}

.contact-box {
    border: 1px solid var(--slate-200);
    border-radius: 20px;
    padding: 1.5rem;
}

.contact-checklist {
    display: grid;
    gap: 0.8rem;
    list-style: none;
}

.contact-checklist li {
    position: relative;
    padding-left: 1.4rem;
}

.contact-checklist li::before {
    position: absolute;
    top: 0.7rem;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange-600);
    content: "";
}

.profile-links {
    display: grid;
}

.profile-links a {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--slate-200);
    padding: 0.85rem 0;
    color: var(--navy-900);
    font-weight: 800;
    text-decoration: none;
}

.profile-links a[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Project pages */

.project-hero .container {
    position: relative;
    z-index: 2;
    padding: 2rem 0 5rem;
}

.back-link {
    display: inline-flex;
    margin-top: 1.2rem;
    color: var(--slate-300);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.project-hero-grid {
    display: grid;
    grid-template-columns: 1fr 0.42fr;
    gap: 4rem;
    align-items: end;
    padding-top: 5rem;
}

.project-meta {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    padding: 1.2rem;
}

.project-meta div {
    display: grid;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0.9rem 0;
}

.project-meta div:last-child {
    border-bottom: 0;
}

.project-meta span {
    color: var(--slate-400);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.project-meta strong {
    color: var(--white);
    font-size: 0.85rem;
}

.project-story {
    display: grid;
}

.project-story-block {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2rem;
    border-top: 1px solid var(--slate-200);
    padding: 3.2rem 0;
}

.project-story-block:last-child {
    border-bottom: 1px solid var(--slate-200);
}

.project-story-block > span {
    color: var(--orange-600);
    font-size: 0.75rem;
    font-weight: 900;
}

.project-story-block > div {
    max-width: 820px;
}

.project-story-block h2 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 3vw, 3.2rem);
}

.project-note {
    max-width: 900px;
}

/* Legal */

.legal-copy {
    max-width: 820px;
}

.legal-copy h2 {
    margin-top: 2.5rem;
    font-size: 1.6rem;
}

/* Footer */

.site-footer {
    border-top: 1px solid var(--slate-200);
    background: var(--slate-50);
    padding: 4rem 0 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 0.65fr);
    gap: 3rem;
}

.brand-footer {
    margin-bottom: 1rem;
}

.footer-brand p {
    max-width: 360px;
    font-size: 0.86rem;
}

.footer-column {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.footer-column h2 {
    margin-bottom: 0.65rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-column a {
    color: var(--slate-600);
    font-size: 0.8rem;
    text-decoration: none;
}

.footer-column a:hover,
.footer-column a:focus-visible {
    color: var(--orange-600);
}

.footer-column p {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
}

.footer-email {
    overflow-wrap: anywhere;
    font-weight: 800;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    border-top: 1px solid var(--slate-200);
    padding-top: 1.2rem;
}

.footer-bottom p,
.footer-bottom a {
    margin: 0;
    color: var(--slate-500);
    font-size: 0.75rem;
    text-decoration: none;
}

/* Responsive */

@media (max-width: 1080px) {
    .hero-layout {
        grid-template-columns: 1fr;
        padding-top: 6rem;
    }

    .hero-copy {
        max-width: 900px;
    }

    .hero-stage {
        width: min(100%, 760px);
        margin-inline: auto;
    }

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

    .work-feature,
    .capabilities-panel,
    .final-cta,
    .service-band {
        grid-template-columns: 1fr;
    }

    .work-visual {
        min-height: 470px;
    }

    .work-copy {
        padding: 2.4rem;
    }

    .service-band {
        align-items: start;
    }
}

@media (max-width: 900px) {
    .section {
        padding: 6rem 0;
    }

    .split-heading,
    .process-layout,
    .page-hero-grid,
    .about-profile,
    .contact-layout,
    .project-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .process-heading,
    .contact-primary {
        position: static;
    }

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

    .signal-grid span:nth-child(3)::after {
        display: none;
    }

    .service-detail {
        grid-template-columns: 60px 1fr;
    }

    .service-detail ul {
        grid-column: 2;
    }

    .work-list-item {
        grid-template-columns: 50px 1fr;
    }

    .work-list-visual,
    .work-list-copy {
        grid-column: 2;
    }

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

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

    .footer-column:last-child {
        grid-column: 2 / -1;
    }
}

@media (max-width: 760px) {
    .nav-toggle {
        display: block;
    }

    .site-navigation {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-bottom: 1px solid var(--slate-200);
        background: var(--white);
        padding: 0.8rem 1rem 1rem;
    }

    .site-navigation.is-open {
        display: flex;
    }

    .site-navigation a {
        border-bottom: 1px solid var(--slate-200);
        padding: 0.85rem 0.2rem;
    }

    .site-navigation .nav-cta {
        margin-top: 0.75rem;
        border-bottom: 0;
        text-align: center;
    }

    .site-navigation > a:not(.nav-cta)::after {
        display: none;
    }

    .brand-text small {
        display: none;
    }

    .hero-layout {
        min-height: auto;
        padding: 5.5rem 0;
    }

    .hero-proof {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .hero-stage {
        min-height: 520px;
    }

    .platform-window {
        inset: 7% 0 8%;
        transform: none;
    }

    .float-card-three {
        right: 0;
    }

    .lifecycle-grid,
    .work-secondary-grid,
    .capability-groups,
    .values-grid,
    .capability-matrix {
        grid-template-columns: 1fr;
    }

    .video-stats {
        grid-template-columns: 1fr;
    }

    .work-feature {
        grid-template-columns: 1fr;
    }

    .work-visual {
        min-height: 400px;
    }

    .capabilities-panel {
        padding: 2rem;
    }

    .page-hero-grid {
        min-height: 460px;
        padding: 6rem 0 4rem;
    }

    .service-detail {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-detail ul {
        grid-column: auto;
    }

    .work-list-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .work-list-number,
    .work-list-visual,
    .work-list-copy {
        grid-column: auto;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-column:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .container {
        width: min(calc(100% - 1.2rem), var(--container));
    }

    h1 {
        font-size: clamp(2.65rem, 15vw, 4.2rem);
    }

    h2 {
        font-size: clamp(2.05rem, 11vw, 3.15rem);
    }

    .section {
        padding: 4.6rem 0;
    }

    .hero-actions {
        display: grid;
    }

    .button {
        width: 100%;
    }

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

    .signal-grid span:nth-child(2n)::after {
        display: none;
    }

    .signal-grid span:nth-child(3)::after {
        display: block;
    }

    .hero-stage {
        min-height: 430px;
    }

    .platform-window {
        inset: 5% 0;
    }

    .platform-shell {
        grid-template-columns: 46px 1fr;
        min-height: 360px;
    }

    .platform-sidebar {
        gap: 0.85rem;
    }

    .sidebar-logo,
    .sidebar-item {
        width: 24px;
        height: 24px;
    }

    .platform-content {
        padding: 1rem;
    }

    .platform-metrics {
        grid-template-columns: 1fr;
    }

    .metric-box {
        min-height: 76px;
    }

    .platform-lower {
        display: none;
    }

    .floating-card {
        padding: 0.6rem 0.7rem;
    }

    .floating-card strong {
        font-size: 0.62rem;
    }

    .floating-card small {
        font-size: 0.52rem;
    }

    .float-card-two {
        top: 0;
    }

    .float-card-one {
        right: 0;
        bottom: 0;
    }

    .float-card-three {
        display: none;
    }

    .lifecycle-card {
        min-height: 270px;
    }

    .work-copy {
        padding: 1.5rem;
    }

    .integration-map {
        gap: 0.35rem;
    }

    .integration-map span {
        min-width: 58px;
        min-height: 46px;
        font-size: 0.56rem;
    }

    .process-list li {
        grid-template-columns: 48px 1fr;
    }

    .about-monogram {
        width: 180px;
    }

    .contact-email-card {
        grid-template-columns: 1fr auto;
    }

    .contact-email-card span {
        grid-column: 1 / -1;
    }

    .project-story-block {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .footer-column:last-child {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Homepage portrait hero — version 3 */

.hero-portrait-stage {
    position: relative;
    min-height: 640px;
    isolation: isolate;
}

.portrait-frame {
    position: absolute;
    inset: 1.5rem 1rem 1.5rem 3rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    background: var(--navy-900);
    box-shadow: var(--shadow-dark);
}

.portrait-frame::before {
    position: absolute;
    z-index: 3;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    filter: saturate(0.88) contrast(1.02);
}

.portrait-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(7, 16, 31, 0.92) 0%, rgba(7, 16, 31, 0.22) 34%, transparent 62%),
        linear-gradient(to right, rgba(7, 16, 31, 0.16), transparent 45%);
}

.portrait-identity {
    position: absolute;
    z-index: 4;
    right: 2rem;
    bottom: 2rem;
    left: 2rem;
    display: grid;
    gap: 0.2rem;
}

.portrait-identity span {
    color: #fdba74;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.portrait-identity strong {
    max-width: 430px;
    color: var(--white);
    font-size: clamp(1.35rem, 2.5vw, 2.05rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.portrait-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.portrait-orbit-one {
    inset: -1rem -3rem 1rem 1rem;
}

.portrait-orbit-two {
    inset: 5rem 4rem -2rem -1rem;
}

.portrait-accent {
    position: absolute;
    z-index: 5;
    width: 78px;
    height: 78px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(234, 88, 12, 0.95), rgba(154, 52, 18, 0.95));
    box-shadow: 0 22px 45px rgba(194, 65, 12, 0.28);
}

.portrait-accent::before,
.portrait-accent::after {
    position: absolute;
    background: rgba(255, 255, 255, 0.52);
    content: "";
}

.portrait-accent::before {
    top: 23px;
    left: 18px;
    width: 42px;
    height: 2px;
}

.portrait-accent::after {
    top: 18px;
    left: 23px;
    width: 2px;
    height: 42px;
}

.portrait-accent-top {
    top: 0;
    right: -0.5rem;
}

.portrait-accent-bottom {
    bottom: 0;
    left: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    opacity: 0.78;
}

.portrait-accent-bottom::before {
    top: 14px;
    left: 11px;
    width: 26px;
}

.portrait-accent-bottom::after {
    top: 11px;
    left: 14px;
    height: 26px;
}

.portrait-card-one {
    z-index: 7;
    top: 4.6rem;
    left: 0;
}

.portrait-card-two {
    z-index: 7;
    right: -1.5rem;
    bottom: 7.8rem;
}

.portrait-signature {
    position: absolute;
    z-index: 7;
    right: 1.7rem;
    bottom: -0.2rem;
    display: grid;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(13, 24, 42, 0.9);
    padding: 0.75rem 0.95rem;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
}

.portrait-signature span {
    color: var(--slate-400);
    font-size: 0.58rem;
    text-transform: uppercase;
}

.portrait-signature strong {
    color: var(--white);
    font-size: 0.72rem;
}

@media (max-width: 1080px) {
    .hero-portrait-stage {
        width: min(100%, 720px);
        min-height: 700px;
        margin-inline: auto;
    }

    .portrait-frame {
        inset: 1.5rem 2rem;
    }
}

@media (max-width: 760px) {
    .hero-portrait-stage {
        min-height: 590px;
    }

    .portrait-frame {
        inset: 1.5rem 0.5rem;
    }

    .portrait-card-one {
        top: 0;
        left: 0;
    }

    .portrait-card-two {
        right: 0;
        bottom: 6rem;
    }

    .portrait-signature {
        right: 0.9rem;
    }
}

@media (max-width: 560px) {
    .hero-portrait-stage {
        min-height: 470px;
    }

    .portrait-frame {
        inset: 1.2rem 0;
        border-radius: 22px;
    }

    .portrait-frame img {
        object-position: 50% 38%;
    }

    .portrait-identity {
        right: 1.2rem;
        bottom: 1.2rem;
        left: 1.2rem;
    }

    .portrait-card-one {
        top: 0;
        left: 0;
    }

    .portrait-card-two {
        display: none;
    }

    .portrait-signature {
        right: 0.4rem;
        bottom: -0.6rem;
    }

    .portrait-accent-top {
        right: -0.2rem;
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }

    .portrait-accent-top::before {
        top: 16px;
        left: 12px;
        width: 30px;
    }

    .portrait-accent-top::after {
        top: 12px;
        left: 16px;
        height: 30px;
    }
}



/* =========================================================
   HOMEPAGE HERO — PORTRAIT-LED VERSION
   ========================================================= */

.hero-home {
    position: relative;
    min-height: auto;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 12% 28%,
            rgba(194, 65, 12, 0.15),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--navy-950),
            var(--navy-850) 58%,
            #10182c
        );
    color: var(--slate-300);
}

.hero-home::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 54px 54px;
    content: "";
    pointer-events: none;
}

.hero-background {
    position: absolute;
    top: -220px;
    right: -180px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(234, 88, 12, 0.13),
            transparent 68%
        );
    pointer-events: none;
}

.hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 680px;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.72fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.hero-copy {
    max-width: 760px;
}

.hero-role {
    display: inline-block;
    margin-bottom: 1.3rem;
    color: #fdba74;
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    font-weight: 800;
    letter-spacing: 0.015em;
}

.hero-home h1 {
    max-width: 780px;
    margin-bottom: 1.35rem;
    color: var(--white);
    font-size: clamp(3rem, 5vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.hero-home h1 span {
    display: block;
    color: #fdba74;
}

.hero-home .hero-lead {
    max-width: 700px;
    margin-bottom: 1.8rem;
    color: var(--slate-300);
    font-size: clamp(1.03rem, 1.4vw, 1.16rem);
    line-height: 1.72;
}

.hero-home .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.hero-capabilities {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.hero-capability {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 0.8rem;
    align-items: start;
    min-height: 112px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.045);
    padding: 1rem;
    color: inherit;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.hero-capability:hover,
.hero-capability:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(253, 186, 116, 0.55);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.hero-capability-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: rgba(194, 65, 12, 0.18);
    color: #fdba74;
    font-size: 0.7rem;
    font-weight: 900;
}

.hero-capability-copy {
    display: grid;
    gap: 0.3rem;
}

.hero-capability-copy strong {
    color: var(--white);
    font-size: 0.88rem;
    line-height: 1.35;
}

.hero-capability-copy small {
    color: var(--slate-400);
    font-size: 0.74rem;
    line-height: 1.5;
}

.hero-portrait {
    position: relative;
    width: min(100%, 455px);
    justify-self: end;
}

.hero-image-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 26px;
    background: var(--navy-900);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.32),
        0 0 0 8px rgba(255, 255, 255, 0.025);
}

.hero-image-frame::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(7, 16, 31, 0.5),
            transparent 38%
        );
    content: "";
    pointer-events: none;
}

.hero-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    filter:
        saturate(0.9)
        contrast(1.02);
}

.hero-image-caption {
    position: absolute;
    z-index: 3;
    right: -1rem;
    bottom: 1.4rem;
    display: grid;
    min-width: 245px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(11, 18, 32, 0.93);
    padding: 0.9rem 1rem;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(14px);
}

.hero-image-caption strong {
    color: var(--white);
    font-size: 0.95rem;
}

.hero-image-caption span {
    margin-top: 0.2rem;
    color: var(--slate-300);
    font-size: 0.73rem;
}

/* Tablet */

@media (max-width: 1080px) {
    .hero-layout {
        min-height: auto;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.7fr);
        gap: 3rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .hero-home h1 {
        font-size: clamp(2.8rem, 5.6vw, 4rem);
    }

    .hero-capabilities {
        grid-template-columns: 1fr;
    }

    .hero-capability {
        min-height: auto;
    }

    .hero-portrait {
        width: min(100%, 400px);
    }

    .hero-image-caption {
        right: -0.5rem;
    }
}

/* Mobile */

@media (max-width: 760px) {
    .hero-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2.5rem;
        padding-top: 3.2rem;
        padding-bottom: 3.5rem;
    }

    .hero-copy {
        max-width: none;
    }

    .hero-role {
        margin-bottom: 1rem;
        font-size: 1rem;
    }

    .hero-home h1 {
        max-width: 620px;
        font-size: clamp(2.6rem, 10vw, 3.7rem);
        line-height: 1.05;
    }

    .hero-home .hero-lead {
        max-width: 640px;
        font-size: 1rem;
    }

    .hero-capabilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-capability {
        grid-template-columns: 1fr;
        min-height: 150px;
    }

    .hero-portrait {
        width: min(100%, 460px);
        align-self: center;
        justify-self: auto;
    }

    .hero-image-caption {
        right: 0.75rem;
        bottom: 0.75rem;
    }
}

/* Small mobile */

@media (max-width: 560px) {
    .hero-layout {
        gap: 2.2rem;
        padding-top: 2.6rem;
        padding-bottom: 2.8rem;
    }

    .hero-home h1 {
        font-size: clamp(2.35rem, 11vw, 3.15rem);
        letter-spacing: -0.045em;
    }

    .hero-home .hero-actions {
        display: grid;
        margin-bottom: 1.6rem;
    }

    .hero-home .hero-actions .button {
        width: 100%;
    }

    .hero-capabilities {
        grid-template-columns: 1fr;
    }

    .hero-capability {
        grid-template-columns: 38px 1fr;
        min-height: auto;
    }

    .hero-capability-copy strong {
        font-size: 0.92rem;
    }

    .hero-capability-copy small {
        font-size: 0.78rem;
    }

    .hero-portrait {
        width: 100%;
    }

    .hero-image-frame {
        aspect-ratio: 1 / 1.12;
        border-radius: 20px;
    }

    .hero-image-frame img {
        object-position: 50% 37%;
    }

    .hero-image-caption {
        right: 0.65rem;
        bottom: 0.65rem;
        left: 0.65rem;
        min-width: 0;
    }
}



/* =========================================================
   FEATURED MOODLE PLATFORM PROJECT
   ========================================================= */

.work-visual-platform {
    position: relative;
    display: grid;
    min-height: 520px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 28% 20%,
            rgba(234, 88, 12, 0.2),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #17243a,
            #0d1628
        );
    padding: 4rem 2.5rem 2.5rem;
}

.work-visual-platform::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
    content: "";
    pointer-events: none;
}

.project-browser {
    position: relative;
    z-index: 2;
    width: min(100%, 680px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    background: var(--navy-950);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.34),
        0 0 0 8px rgba(255, 255, 255, 0.025);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.work-feature:hover .project-browser {
    transform: translateY(-7px);
    box-shadow:
        0 44px 95px rgba(0, 0, 0, 0.42),
        0 0 0 8px rgba(255, 255, 255, 0.035);
}

.project-browser-bar {
    display: grid;
    height: 48px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(7, 16, 31, 0.96);
    padding: 0 1rem;
}

.project-browser-dots {
    display: flex;
    gap: 6px;
}

.project-browser-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.project-browser-dots span:first-child {
    background: var(--orange-600);
}

.project-browser-title {
    overflow: hidden;
    color: var(--slate-400);
    font-size: 0.7rem;
    font-weight: 750;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-browser-screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--navy-900);
}

.project-browser-screen::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(7, 16, 31, 0.2),
            transparent 30%
        );
    content: "";
    pointer-events: none;
}

.project-browser-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 400ms ease;
}

.work-feature:hover .project-browser-screen img {
    transform: scale(1.025);
}

@media (max-width: 1080px) {
    .work-visual-platform {
        min-height: 470px;
    }
}

@media (max-width: 700px) {
    .work-visual-platform {
        min-height: 390px;
        padding:
            4.5rem
            1.25rem
            1.5rem;
    }

    .project-browser-bar {
        height: 42px;
    }
}

@media (max-width: 480px) {
    .work-visual-platform {
        min-height: 330px;
        padding:
            4rem
            0.85rem
            1rem;
    }

    .project-browser {
        border-radius: 15px;
    }

    .project-browser-title {
        font-size: 0.62rem;
    }
}





/* =========================================================
   CERTIFY SAFE — COMPLIANCE AUTOMATION PROJECT
   ========================================================= */

.work-card-compliance {
    overflow: hidden;
}

.compliance-visual {
    position: relative;
    display: block;
    min-height: 500px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(194, 65, 12, 0.2),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #17243a,
            #0d1628
        );
    padding: 4.3rem 1.4rem 1.5rem;
}

.compliance-visual::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 30px 30px;
    content: "";
    pointer-events: none;
}

.compliance-client-label {
    position: absolute;
    z-index: 4;
    top: 1.25rem;
    left: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.3;
    backdrop-filter: blur(12px);
}

.compliance-flow {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        42px
        minmax(0, 1.35fr);
    gap: 0.8rem;
    align-items: center;
    width: 100%;
}

.flow-right-column {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
}

.flow-panel {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 17px;
    background: rgba(7, 16, 31, 0.84);
    padding: 0.9rem;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background-color 200ms ease;
}

.flow-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(253, 186, 116, 0.48);
    background: rgba(13, 24, 42, 0.94);
}

.flow-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.flow-step-number {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            var(--orange-600),
            var(--orange-700)
        );
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(194, 65, 12, 0.24);
}

.flow-panel-heading {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

.flow-panel-heading strong {
    color: var(--white);
    font-size: 0.9rem;
    line-height: 1.25;
}

.flow-panel-heading small {
    color: var(--slate-400);
    font-size: 0.76rem;
    line-height: 1.35;
}

.flow-image {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: var(--white);
}

.flow-image-moodle {
    aspect-ratio: 382 / 388;
}

.flow-image-register {
    aspect-ratio: 759 / 400;
}

.flow-image-evidence {
    aspect-ratio: 665 / 260;
}

.flow-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--white);
    transition: transform 240ms ease;
}

.flow-panel:hover .flow-image img {
    transform: scale(1.018);
}

.flow-result {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
    padding: 0.42rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.flow-result::before {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
    content: "";
}

.flow-connector {
    display: grid;
    place-items: center;
    justify-self: center;
    color: var(--orange-500);
}

.flow-connector span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(253, 186, 116, 0.3);
    border-radius: 50%;
    background: rgba(194, 65, 12, 0.12);
    font-size: 1.15rem;
    font-weight: 900;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

.work-card-compliance:hover .flow-connector span {
    transform: scale(1.1);
    border-color: rgba(253, 186, 116, 0.58);
    background: rgba(194, 65, 12, 0.22);
}

.flow-connector-vertical {
    min-height: 28px;
}

.work-card-compliance .work-card-copy {
    padding: 1.8rem;
}

.work-card-compliance .project-kicker {
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.work-card-compliance .work-card-copy h3 {
    margin-bottom: 1rem;
    color: var(--white);
    font-size: clamp(1.65rem, 2.25vw, 2.3rem);
    line-height: 1.16;
    letter-spacing: -0.04em;
}

.work-card-description {
    margin-bottom: 1.1rem;
    color: var(--slate-300);
    font-size: 1rem;
    line-height: 1.7;
}

.work-card-compliance .project-tags {
    margin-top: 1.2rem;
    margin-bottom: 1.4rem;
}

.work-card-compliance .project-tags li {
    font-size: 0.75rem;
}

.work-card-compliance .arrow-link {
    font-size: 1rem;
}

/* Narrow project cards */

@media (max-width: 1150px) {
    .compliance-flow {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .flow-connector-horizontal {
        transform: rotate(90deg);
    }

    .flow-right-column {
        gap: 0.85rem;
    }

    .compliance-visual {
        min-height: auto;
    }
}

/* Homepage mobile */

@media (max-width: 700px) {
    .compliance-visual {
        padding:
            4.2rem
            1rem
            1.2rem;
    }

    .compliance-client-label {
        top: 1rem;
        left: 1rem;
        font-size: 0.76rem;
    }

    .flow-panel-heading strong {
        font-size: 0.94rem;
    }

    .flow-panel-heading small {
        font-size: 0.78rem;
    }

    .flow-result {
        font-size: 0.8rem;
    }

    .work-card-compliance .work-card-copy {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .compliance-visual {
        padding:
            4rem
            0.75rem
            1rem;
    }

    .flow-panel {
        border-radius: 14px;
        padding: 0.75rem;
    }

    .flow-step-number {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .work-card-compliance .work-card-copy h3 {
        font-size: 1.65rem;
    }
}