/* ==============================================================
   STELLOVATE
   Design System
   ============================================================== */

:root {

    /* Surfaces */
    --night: #0c221c;
    --night-deep: #071713;
    --forest: #15392e;

    --paper: #edf0e8;
    --paper-alt: #e1e6db;
    --paper-card: #f6f8f3;

    /* Text */
    --text: #12201a;
    --muted: #56665e;

    --light: #e8eee6;
    --light-muted: #9db2a7;

    /* Brand accents */
    --ochre: #e0ae48;
    --ochre-hover: #edc063;

    --leaf: #2e8b57;
    --leaf-soft: #cfe3d3;

    /* Rules */
    --rule:
        rgba(18, 32, 26, 0.14);

    --rule-dark:
        rgba(232, 238, 230, 0.14);

    /* Typography */
    --font-display:
        "Newsreader",
        Georgia,
        serif;

    --font-body:
        "Hanken Grotesk",
        Arial,
        sans-serif;

    --font-mono:
        "IBM Plex Mono",
        monospace;

    /* Layout */
    --container: 1240px;

    --gutter:
        clamp(20px, 4vw, 48px);

    --section-space:
        clamp(88px, 11vw, 152px);


    /* Shared type scale — Contact-page proportions are the baseline */
    --type-page-hero: clamp(62px, 8.4vw, 128px);
    --type-page-hero-mobile: clamp(47px, 14vw, 70px);

    --type-section-title: clamp(42px, 5.2vw, 72px);
    --type-section-title-mobile: clamp(36px, 10.5vw, 54px);

    --type-editorial-statement: clamp(32px, 3.8vw, 52px);
    --type-editorial-statement-mobile: clamp(30px, 8.5vw, 42px);

    --type-card-title: clamp(27px, 2.8vw, 38px);

    --type-body: 17px;
    --type-body-small: 15px;
    --type-meta: 9px;

    --type-cta: clamp(48px, 6vw, 84px);
    --type-cta-mobile: clamp(42px, 12vw, 62px);

    /* Shared vertical rhythm */
    --section-space-compact: clamp(72px, 9vw, 120px);

    /* Motion */
    --ease:
        cubic-bezier(.2, .7, .2, 1);

    --ease-out:
        cubic-bezier(.16, 1, .3, 1);
}


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

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background: var(--paper);
    color: var(--text);

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

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body.menu-open {
    overflow: hidden;
}


img {
    display: block;

    max-width: 100%;
    height: auto;
}


figure {
    margin: 0;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
}


::selection {
    background: var(--ochre);
    color: var(--night);
}


:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 4px;
}


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

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


h1,
h2,
h3 {
    font-family: var(--font-display);

    font-weight: 300;

    letter-spacing: -0.025em;

    text-wrap: balance;
}


.display {
    font-family: var(--font-display);

    font-size:
        clamp(48px, 7vw, 104px);

    font-weight: 300;

    line-height: .95;

    letter-spacing: -.04em;
}


.heading-xl {
    font-family: var(--font-display);

    font-size:
        clamp(42px, 5vw, 72px);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -.03em;
}


.heading-lg {
    font-family: var(--font-display);

    font-size:
        clamp(34px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.05;
}


.heading-md {
    font-family: var(--font-display);

    font-size:
        clamp(27px, 2.8vw, 38px);

    font-weight: 400;

    line-height: 1.1;
}


.lead {
    font-size:
        clamp(18px, 1.5vw, 20px);

    line-height: 1.65;
}


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

    gap: 12px;

    margin-bottom: 24px;

    color: var(--leaf);

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

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

    letter-spacing: .13em;

    text-transform: uppercase;
}


.eyebrow::before {
    width: 28px;
    height: 1px;

    background: currentColor;

    content: "";
}


.eyebrow--light {
    color: var(--ochre);
}


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

.site {
    overflow: clip;
}


.container {
    width: min(
        calc(100% - (var(--gutter) * 2)),
        var(--container)
    );

    margin-inline: auto;
}


.section {
    padding-block: var(--section-space);
}


.section--dark {
    background: var(--night);
    color: var(--light);
}


.section--alt {
    background: var(--paper-alt);
}


/* ==============================================================
   BUTTONS
   ============================================================== */

.button {
    position: relative;

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

    gap: 12px;

    min-height: 52px;

    padding: 0 25px;

    border: 0;
    border-radius: 999px;

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

    line-height: 1;

    text-decoration: none;

    transition:
        background .35s var(--ease),
        color .35s var(--ease),
        transform .35s var(--ease);
}


.button svg {
    width: 15px;
    height: 15px;

    transition:
        transform .35s var(--ease);
}


.button:hover svg {
    transform: translateX(4px);
}


.button--primary {
    background: var(--ochre);
    color: var(--night);
}


.button--primary:hover {
    background: var(--ochre-hover);
}


.button--dark {
    background: var(--night);
    color: var(--light);
}


.button--dark:hover {
    background: var(--forest);
}


.button--ghost {
    border: 1px solid var(--rule-dark);

    background:
        rgba(255, 255, 255, .025);

    color: var(--light);

    backdrop-filter: blur(8px);
}


.button--ghost:hover {
    border-color:
        rgba(255, 255, 255, .45);
}


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

.site-header {
    position: fixed;
    z-index: 1000;

    top: 0;
    right: 0;
    left: 0;

    width: 100%;

    background: transparent;
    color: var(--light);

    border-bottom: 1px solid transparent;

    transition:
        background .4s var(--ease),
        border-color .4s var(--ease),
        box-shadow .4s var(--ease);
}

.site-header.is-scrolled {
    background:
        rgba(7, 23, 19, .86);

    border-bottom-color:
        var(--rule-dark);

    box-shadow:
        0 8px 40px rgba(0, 0, 0, .08);

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

.site-header__inner {
    display: flex;
    align-items: center;

    min-height: 88px;

    gap: 36px;
}


/* Brand */

.site-branding {
    position: relative;
    z-index: 102;

    margin-right: auto;
}


.site-brand {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;
}


.site-brand__mark {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border:
        1px solid rgba(224, 174, 72, .45);

    border-radius: 50%;

    color: var(--ochre);

    transition:
        transform .5s var(--ease-out),
        border-color .3s ease;
}


.site-brand:hover
.site-brand__mark {
    transform: rotate(12deg);

    border-color: var(--ochre);
}


.site-brand__mark svg {
    width: 19px;
    height: 19px;
}


.site-brand__name {
    display: block;

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

    font-size: 25px;

    line-height: .95;
}


.site-brand__descriptor {
    display: block;

    margin-top: 5px;

    color: var(--light-muted);

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

    font-size: 8px;

    letter-spacing: .17em;

    text-transform: uppercase;
}


/* Desktop navigation */

.primary-navigation ul {
    display: flex;
    align-items: center;

    gap: 30px;

    padding: 0;
    margin: 0;

    list-style: none;
}


.primary-navigation a {
    position: relative;

    display: block;

    color: var(--light-muted);

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

    text-decoration: none;

    transition:
        color .25s ease;
}


.primary-navigation a::after {
    position: absolute;

    right: 0;
    bottom: -7px;
    left: 0;

    height: 1px;

    background: var(--ochre);

    content: "";

    transform: scaleX(0);
    transform-origin: right;

    transition:
        transform .35s var(--ease);
}


.primary-navigation a:hover {
    color: var(--light);
}


.primary-navigation a:hover::after,
.primary-navigation .current-menu-item > a::after {
    transform: scaleX(1);
    transform-origin: left;
}


.header-cta {
    position: relative;
    z-index: 102;

    min-height: 44px;

    padding-inline: 20px;

    font-size: 13px;
}


/* Mobile menu trigger */

.menu-toggle {
    position: relative;
    z-index: 102;

    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

    border:
        1px solid var(--rule-dark);

    border-radius: 50%;

    background: transparent;

    color: var(--light);
}


.menu-toggle__line {
    position: absolute;

    left: 13px;

    width: 18px;
    height: 1px;

    background: currentColor;

    transition:
        transform .35s var(--ease),
        top .35s var(--ease);
}


.menu-toggle__line:first-child {
    top: 18px;
}


.menu-toggle__line:last-child {
    top: 26px;
}


.menu-toggle[aria-expanded="true"]
.menu-toggle__line:first-child {
    top: 22px;

    transform: rotate(45deg);
}


.menu-toggle[aria-expanded="true"]
.menu-toggle__line:last-child {
    top: 22px;

    transform: rotate(-45deg);
}


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

.mobile-navigation {
    position: fixed;
    z-index: 101;

    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        120px var(--gutter)
        50px;

    background: var(--night-deep);

    color: var(--light);

    visibility: hidden;
    opacity: 0;

    transform: translateY(-12px);

    transition:
        opacity .4s var(--ease),
        transform .4s var(--ease),
        visibility .4s;
}


.mobile-navigation.is-open {
    visibility: visible;
    opacity: 1;

    transform: none;
}


.mobile-navigation ul {
    padding: 0;
    margin: 0;

    list-style: none;
}


.mobile-navigation li {
    border-bottom:
        1px solid var(--rule-dark);
}


.mobile-navigation a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-block: 16px;

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

    font-size:
        clamp(34px, 8vw, 54px);

    font-weight: 300;

    line-height: 1;

    text-decoration: none;
}


.mobile-navigation a::after {
    content: "↗";

    color: var(--ochre);

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

    font-size: 16px;
}


.mobile-navigation__footer {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-top: 38px;

    color: var(--light-muted);

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

    font-size: 10px;

    letter-spacing: .1em;

    text-transform: uppercase;
}


/* ==============================================================
   TEMPORARY PAGE
   ============================================================== */

.theme-preview {
    min-height: 80vh;

    display: flex;
    align-items: center;

    padding:
        180px 0 100px;

    background: var(--night);

    color: var(--light);
}


.theme-preview h1 {
    max-width: 900px;

    margin-bottom: 28px;

    font-size:
        clamp(50px, 7vw, 100px);

    font-weight: 300;

    line-height: .95;
}


.theme-preview h1 em {
    color: var(--ochre);

    font-weight: 300;
}


.theme-preview p {
    max-width: 600px;

    color: var(--light-muted);

    font-size: 19px;
}

/* ==============================================================
   HOME — HERO
   ============================================================== */

.home-hero {
    position: relative;
    isolation: isolate;

    min-height: 100svh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--night-deep);
    color: var(--light);
}


/* Background image */

.home-hero__media {
    position: absolute;
    z-index: -4;

    inset: 0;
}


.home-hero__media img {
    width: 100%;
    height: 100%;

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

    transform: scale(1.025);
}


/* Cinematic treatment */

.home-hero__gradient {
    position: absolute;
    z-index: -3;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 19, .98) 0%,
            rgba(7, 23, 19, .91) 34%,
            rgba(7, 23, 19, .62) 67%,
            rgba(7, 23, 19, .40) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 23, 19, .90) 0%,
            rgba(7, 23, 19, .05) 45%,
            rgba(7, 23, 19, .22) 100%
        );
}


/*
 * Extremely subtle technical grid.
 * This should almost disappear into the image.
 */
.home-hero__contours {
    position: absolute;
    z-index: -2;

    inset: 0;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            black 60%,
            black 100%
        );
}


/* Main hero grid */

.home-hero__inner {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, .65fr);

    align-items: end;

    gap: clamp(60px, 8vw, 130px);

    /* Keep the global .container width so the hero aligns with the header. */

    padding-top: clamp(170px, 19vh, 230px);
    padding-bottom: clamp(150px, 17vh, 210px);
}


.home-hero__content {
    width: 100%;
    max-width: 820px;
}


.home-hero__title {
    max-width: 820px;

    margin:
        clamp(20px, 3vw, 34px)
        0
        0;

    font-size:
        clamp(58px, 7.3vw, 112px);

    font-weight: 300;

    line-height: .88;

    letter-spacing: -.055em;
}


.home-hero__title em {
    display: inline-block;

    color: var(--ochre);

    font-weight: 300;

    font-style: italic;
}


.home-hero__lead {
    max-width: 590px;

    margin-bottom: 0;

    color:
        rgba(232, 238, 230, .76);

    font-size:
        clamp(17px, 1.5vw, 20px);

    line-height: 1.6;
}


.home-hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}


/* ==============================================================
   HERO — TECHNICAL READOUT
   ============================================================== */

.project-readout {
    align-self: end;
    justify-self: end;

    width: 100%;
    max-width: 340px;

    border:
        1px solid var(--rule-dark);

    background:
        rgba(7, 23, 19, .58);

    backdrop-filter:
        blur(14px);

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


.project-readout__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        14px 17px;

    border-bottom:
        1px solid var(--rule-dark);

    color: var(--light-muted);

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

    font-size: 9px;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.project-readout__status {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--light);
}


.project-readout__dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--ochre);

    box-shadow:
        0 0 0 4px
        rgba(224, 174, 72, .09);
}


.project-readout__data {
    padding:
        10px 17px;

    margin: 0;
}


.project-readout__data > div {
    display: grid;

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

    gap: 20px;

    padding:
        10px 0;

    border-bottom:
        1px solid
        rgba(232, 238, 230, .08);
}


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


.project-readout dt,
.project-readout dd {
    margin: 0;

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

    font-size: 10px;

    line-height: 1.5;
}


.project-readout dt {
    color: var(--light-muted);

    text-transform: uppercase;

    letter-spacing: .07em;
}


.project-readout dd {
    color: var(--light);

    text-align: right;
}


.project-readout__footer {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    padding:
        13px 17px;

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


.project-readout__footer span {
    padding:
        4px 7px;

    border:
        1px solid var(--rule-dark);

    color: var(--light-muted);

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

    font-size: 8px;

    letter-spacing: .07em;

    text-transform: uppercase;
}


/* ==============================================================
   HERO — SECTORS
   ============================================================== */

.home-hero__sectors {
    border-top:
        1px solid var(--rule-dark);

    background:
        rgba(7, 23, 19, .42);

    backdrop-filter:
        blur(7px);
}


.sector-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    min-height: 60px;

    overflow: hidden;
}


.sector-strip span {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    flex: none;

    color: var(--light-muted);

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

    font-size: 9px;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.sector-strip span::before {
    content: "+";

    color: var(--ochre);
}


/* Scroll indicator */

.home-hero__scroll {
    position: absolute;

    right: 24px;
    bottom: 84px;

    display: flex;
    align-items: center;

    gap: 13px;

    color:
        rgba(232, 238, 230, .5);

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

    font-size: 8px;

    letter-spacing: .13em;

    text-transform: uppercase;

    transform:
        rotate(90deg);

    transform-origin:
        right bottom;
}


.home-hero__scroll-line {
    display: block;

    width: 50px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(232, 238, 230, .2);
}


.home-hero__scroll-line::after {
    display: block;

    width: 100%;
    height: 100%;

    background: var(--ochre);

    content: "";

    transform:
        translateX(-100%);

    animation:
        scroll-line 2.5s
        var(--ease)
        infinite;
}


@keyframes scroll-line {

    50% {
        transform:
            translateX(0);
    }

    100% {
        transform:
            translateX(100%);
    }

}


/* ==============================================================
   HOME — INTRO
   ============================================================== */

.home-intro {
    background: var(--paper);
}


.home-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(150px, .65fr)
        minmax(0, 2fr);

    gap:
        clamp(40px, 8vw, 120px);
}


.home-intro__statement {
    max-width: 950px;

    margin-bottom: 46px;

    font-size:
        clamp(38px, 5.1vw, 72px);

    font-weight: 300;

    line-height: 1.04;

    letter-spacing: -.035em;
}


.home-intro__statement em {
    color: var(--muted);

    font-weight: 300;

    font-style: normal;
}


.home-intro__copy {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);
}


.home-intro__copy p {
    grid-column: 2;

    max-width: 570px;

    color: var(--muted);

    font-size:
        clamp(17px, 1.5vw, 19px);
}


/* ==============================================================
   HOME — FACTS
   ============================================================== */

.home-facts {
    display: grid;

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

    margin-top:
        clamp(70px, 9vw, 120px);

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


.home-fact {
    position: relative;

    min-height: 260px;

    padding:
        27px 34px 0 0;
}


.home-fact + .home-fact {
    padding-left: 34px;

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


.home-fact__index {
    display: block;

    margin-bottom: 50px;

    color: var(--leaf);

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

    font-size: 10px;

    letter-spacing: .1em;
}


.home-fact strong {
    display: block;

    margin-bottom: 17px;

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

    font-size:
        clamp(46px, 5vw, 68px);

    font-weight: 300;

    line-height: .9;

    letter-spacing: -.04em;
}


.home-fact p {
    max-width: 280px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.55;
}


/* ==============================================================
   HOME RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {
    .home-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 55px;
        padding-top: 170px;
        padding-bottom: 150px;
    }

    .home-hero__content { max-width: 780px; }

    .project-readout {
        width: min(100%, 520px);
        max-width: none;
        justify-self: start;
        align-self: start;
    }

    .home-hero__scroll { display: none; }

    .sector-strip {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sector-strip::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
    .home-hero { min-height: auto; }

    .home-hero__gradient {
        background: linear-gradient(
            0deg,
            rgba(7,23,19,.97) 0%,
            rgba(7,23,19,.75) 55%,
            rgba(7,23,19,.56) 100%
        );
    }

    .home-hero__contours { opacity: .08; }

    .home-hero__inner {
        gap: 45px;
        padding-top: 140px;
        padding-bottom: 90px;
    }

    .home-hero__content { max-width: 100%; }

    .home-hero__title {
        max-width: 100%;
        margin-bottom: 25px;
        font-size: clamp(55px, 17vw, 82px);
        line-height: .88;
    }

    .home-hero__lead {
        max-width: 520px;
        font-size: 16px;
    }

    .home-hero__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-readout {
        width: 100%;
        max-width: none;
    }

    .home-hero__sectors,
    .home-hero__scroll { display: none; }

    .home-intro__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .home-intro__statement {
        margin-bottom: 35px;
        font-size: clamp(38px, 11vw, 54px);
    }

    .home-intro__copy { display: block; }

    .home-facts { grid-template-columns: minmax(0, 1fr); }

    .home-fact,
    .home-fact + .home-fact {
        min-height: auto;
        padding: 28px 0 34px;
        border-left: 0;
        border-bottom: 1px solid var(--rule);
    }

    .home-fact__index { margin-bottom: 30px; }
}


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

.site-footer {
    position: relative;

    overflow: hidden;

    padding:
        90px 0 28px;

    background: var(--night-deep);

    color: var(--light);
}


.site-footer::before {
    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background: var(--rule-dark);

    content: "";
}


.site-footer__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        repeat(2, minmax(150px, .7fr));

    gap: 70px;
}


.site-footer__statement {
    max-width: 450px;

    margin-top: 26px;

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


.site-footer__heading {
    margin-bottom: 20px;

    color: var(--light-muted);

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

    font-size: 10px;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.site-footer ul {
    display: grid;

    gap: 10px;

    padding: 0;
    margin: 0;

    list-style: none;
}


.site-footer a {
    text-decoration: none;
}


.site-footer nav a {
    color: var(--light-muted);

    transition:
        color .2s ease;
}


.site-footer nav a:hover {
    color: var(--light);
}


.site-footer__base {
    display: flex;
    justify-content: space-between;

    gap: 30px;

    padding-top: 26px;
    margin-top: 80px;

    border-top:
        1px solid var(--rule-dark);

    color: var(--light-muted);

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

    font-size: 10px;

    letter-spacing: .06em;

    text-transform: uppercase;
}


/* ==============================================================
   REVEAL MOTION
   ============================================================== */

[data-reveal] {
    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity .8s var(--ease-out),
        transform .8s var(--ease-out);
}


[data-reveal].is-visible {
    opacity: 1;

    transform: none;
}

[data-reveal-delay="1"] {
    transition-delay: .08s;
}

[data-reveal-delay="2"] {
    transition-delay: .16s;
}

[data-reveal-delay="3"] {
    transition-delay: .24s;
}

/* ==============================================================
   RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {

    .primary-navigation,
    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

}


@media (max-width: 760px) {

    :root {
        --gutter: 20px;
    }


    body {
        font-size: 16px;
    }


    .site-header__inner {
        min-height: 76px;
    }


    .site-brand__name {
        font-size: 23px;
    }


    .site-brand__descriptor {
        font-size: 7px;
    }


    .site-footer__grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .site-footer__base {
        flex-direction: column;

        margin-top: 60px;
    }

}


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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;
    }


    [data-reveal] {
        opacity: 1;

        transform: none;
    }

}


/* ==============================================================
   HOME — EXPERTISE
   ============================================================== */

.expertise {
    background: var(--paper-alt);
}


.expertise__header {
    display: grid;

    grid-template-columns:
        minmax(150px, .65fr)
        minmax(0, 2fr);

    gap:
        clamp(40px, 8vw, 120px);

    margin-bottom:
        clamp(70px, 9vw, 120px);
}


.expertise__title {
    max-width: 780px;

    margin-bottom: 30px;
}


.expertise__intro {
    max-width: 520px;

    margin-left: auto;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 17px;
}


/* Service rows */

.expertise-list {
    border-top:
        1px solid var(--text);
}


.expertise-item {
    position: relative;

    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        90px
        40px;

    align-items: start;

    gap: 30px;

    padding:
        34px 0 38px;

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

    transition:
        padding .45s var(--ease),
        background .45s var(--ease);
}


.expertise-item::before {
    position: absolute;

    inset: 0;

    background:
        rgba(255, 255, 255, .38);

    content: "";

    opacity: 0;

    transition:
        opacity .4s var(--ease);
}


.expertise-item:hover::before {
    opacity: 1;
}


.expertise-item > * {
    position: relative;
    z-index: 1;
}


.expertise-item__number {
    padding-top: 8px;

    color: var(--leaf);

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

    font-size: 10px;

    letter-spacing: .1em;
}


.expertise-item__main {
    display: grid;

    grid-template-columns:
        minmax(240px, .85fr)
        minmax(260px, 1fr);

    gap:
        clamp(35px, 6vw, 90px);
}


.expertise-item__main h3 {
    max-width: 420px;

    margin: 0;

    font-size:
        clamp(29px, 3vw, 43px);

    font-weight: 300;

    line-height: 1.05;

    transition:
        transform .4s var(--ease);
}


.expertise-item:hover
.expertise-item__main h3 {
    transform:
        translateX(7px);
}


.expertise-item__main p {
    max-width: 470px;

    margin: 5px 0 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.65;
}


.expertise-item__meta {
    padding-top: 8px;

    color: var(--muted);

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

    font-size: 9px;

    letter-spacing: .11em;

    text-align: right;
}


.expertise-item__arrow {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border:
        1px solid var(--rule);

    border-radius: 50%;

    font-size: 13px;

    transition:
        background .35s var(--ease),
        color .35s var(--ease),
        transform .35s var(--ease);
}


.expertise-item:hover
.expertise-item__arrow {
    background: var(--night);
    color: var(--light);

    transform:
        rotate(45deg);
}

/* ==============================================================
   HOME — GEOSPATIAL
   ============================================================== */

.geo-section {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        var(--section-space) 0;

    background:
        var(--night-deep);

    color: var(--light);
}


/* Large cartographic grid */

.geo-section__grid {
    position: absolute;
    z-index: -1;

    inset: 0;

    opacity: .055;

    background-image:
        linear-gradient(
            rgba(255,255,255,.8) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.8) 1px,
            transparent 1px
        );

    background-size:
        100px 100px;

    mask-image:
        radial-gradient(
            circle at 35% 55%,
            black,
            transparent 70%
        );
}


.geo-section__header {
    display: grid;

    grid-template-columns:
        minmax(150px, .65fr)
        minmax(0, 2fr);

    gap:
        clamp(40px, 8vw, 120px);

    align-items: end;

    margin-bottom:
        clamp(60px, 8vw, 100px);
}


.geo-section__title {
    max-width: 850px;

    margin: 0;

    font-size:
        clamp(48px, 6.7vw, 94px);

    font-weight: 300;

    line-height: .91;

    letter-spacing: -.045em;
}


.geo-section__title em {
    color: var(--ochre);

    font-weight: 300;
}


/* Showcase */

.geo-showcase {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, .65fr);

    gap:
        clamp(45px, 7vw, 100px);

    align-items: center;
}


/* Image */

.geo-visual {
    position: relative;

    min-height:
        clamp(520px, 55vw, 720px);

    overflow: hidden;

    border:
        1px solid var(--rule-dark);

    background: var(--forest);
}


.geo-visual__image {
    position: absolute;

    inset: 0;
}


.geo-visual__image::after {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,23,19,.12),
            rgba(7,23,19,.42)
        );

    content: "";
}


.geo-visual__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.72)
        contrast(1.04);
}


/* Technical frame */

.geo-visual::before,
.geo-visual::after {
    position: absolute;
    z-index: 2;

    width: 55px;
    height: 55px;

    pointer-events: none;

    content: "";
}


.geo-visual::before {
    top: 20px;
    left: 20px;

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

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


.geo-visual::after {
    right: 20px;
    bottom: 20px;

    border-right:
        1px solid var(--ochre);

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


/* Crosshairs */

.geo-crosshair {
    position: absolute;
    z-index: 3;

    width: 34px;
    height: 34px;

    border:
        1px solid rgba(255,255,255,.48);

    border-radius: 50%;
}


.geo-crosshair::before,
.geo-crosshair::after {
    position: absolute;

    background:
        rgba(255,255,255,.48);

    content: "";
}


.geo-crosshair::before {
    top: 50%;
    left: -9px;

    width: 50px;
    height: 1px;
}


.geo-crosshair::after {
    top: -9px;
    left: 50%;

    width: 1px;
    height: 50px;
}


.geo-crosshair--one {
    top: 27%;
    left: 29%;
}


.geo-crosshair--two {
    right: 21%;
    bottom: 25%;

    transform:
        scale(.72);
}


/* Coordinates */

.geo-coordinate {
    position: absolute;
    z-index: 4;

    right: 20px;
    left: 20px;

    display: flex;
    justify-content: space-between;

    gap: 20px;

    color:
        rgba(232,238,230,.78);

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

    font-size: 8px;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.geo-coordinate--top {
    top: 20px;
}


.geo-coordinate--bottom {
    bottom: 20px;
}


/* Location marker */

.geo-visual__marker {
    position: absolute;
    z-index: 4;

    top: 56%;
    left: 57%;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid rgba(224,174,72,.75);

    border-radius: 50%;

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


.geo-visual__marker::before,
.geo-visual__marker::after {
    position: absolute;

    border:
        1px solid rgba(224,174,72,.35);

    border-radius: 50%;

    content: "";

    animation:
        geo-pulse 3s ease-out infinite;
}


.geo-visual__marker::before {
    width: 70px;
    height: 70px;
}


.geo-visual__marker::after {
    width: 100px;
    height: 100px;

    animation-delay:
        .6s;
}


.geo-visual__marker span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ochre);
}


@keyframes geo-pulse {

    0% {
        opacity: .8;
        transform: scale(.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
    }

}


/* Copy */

.geo-content__lead {
    margin-bottom: 28px;

    color: var(--light);

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

    font-size:
        clamp(28px, 3vw, 40px);

    font-weight: 300;

    line-height: 1.15;
}


.geo-content__body {
    margin-bottom: 50px;

    color: var(--light-muted);

    font-size: 15px;

    line-height: 1.75;
}


.geo-capabilities {
    border-top:
        1px solid var(--rule-dark);
}


.geo-capability {
    display: grid;

    grid-template-columns:
        40px 1fr;

    gap: 20px;

    padding:
        17px 0;

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


.geo-capability span {
    color: var(--ochre);

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

    font-size: 9px;
}


.geo-capability strong {
    font-size: 13px;
    font-weight: 500;
}


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

    gap: 20px;

    margin-top: 42px;

    color: var(--light);

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

    text-decoration: none;
}


.geo-link span {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border:
        1px solid var(--rule-dark);

    border-radius: 50%;

    transition:
        background .3s var(--ease),
        color .3s var(--ease),
        transform .3s var(--ease);
}


.geo-link:hover span {
    background: var(--ochre);
    color: var(--night);

    transform:
        rotate(45deg);
}
/* ==============================================================
   EXPERTISE + GEOSPATIAL RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {
    .expertise-item {
        grid-template-columns: 50px minmax(0, 1fr) 40px;
    }

    .expertise-item__main {
        grid-template-columns: minmax(0, 1fr);
    }

    .expertise-item__meta { display: none; }

    .geo-showcase {
        grid-template-columns: minmax(0, 1fr);
    }

    .geo-content { max-width: 650px; }
}

@media (max-width: 760px) {
    .expertise__header,
    .geo-section__header {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .expertise-item {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 14px;
        padding: 27px 0 30px;
    }

    .expertise-item__main { gap: 18px; }

    .expertise-item__main h3 {
        font-size: clamp(27px, 8vw, 36px);
    }

    .expertise-item__main p { font-size: 14px; }

    .expertise-item__arrow {
        width: 30px;
        height: 30px;
    }

    .geo-section__title {
        font-size: clamp(48px, 14vw, 70px);
    }

    .geo-visual { min-height: 480px; }

    .geo-coordinate { font-size: 7px; }
}


/* ==============================================================
   HOME — PROCESS / HOW WE WORK
   ============================================================== */

.process {
    background: var(--paper);
}

.process__header {
    display: grid;
    grid-template-columns:
        minmax(150px, .65fr)
        minmax(0, 2fr);

    gap: clamp(40px, 8vw, 120px);

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

.process__title {
    max-width: 800px;
    margin-bottom: 30px;
}

.process__intro {
    max-width: 570px;
    margin-left: auto;
    margin-bottom: 0;

    color: var(--muted);
    font-size: 17px;
}

.process__steps {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

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

.process-step {
    position: relative;

    min-height: 390px;

    padding:
        27px 28px 30px 0;
}

.process-step + .process-step {
    padding-left: 28px;

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

.process-step__number {
    display: block;

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

    color: var(--leaf);

    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
}

.process-step__content h3 {
    margin-bottom: 18px;

    font-size:
        clamp(30px, 2.8vw, 42px);

    font-weight: 300;
    line-height: 1;
}

.process-step__content p {
    max-width: 250px;
    margin-bottom: 60px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}

.process-step__code {
    position: absolute;

    right: 28px;
    bottom: 30px;
    left: 0;

    color: var(--muted);

    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .13em;
}

.process-step + .process-step
.process-step__code {
    left: 28px;
}


/* ==============================================================
   HOME — SELECTED PROJECTS
   ============================================================== */

.selected-projects {
    background: var(--paper-alt);
}

.selected-projects__header {
    display: grid;
    grid-template-columns:
        minmax(150px, .65fr)
        minmax(0, 2fr);

    gap: clamp(40px, 8vw, 120px);

    margin-bottom:
        clamp(65px, 8vw, 100px);
}

.selected-projects__title {
    max-width: 880px;
    margin-bottom: 34px;
}

.selected-projects__header-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
}

.selected-projects__header-bottom p {
    max-width: 510px;
    margin: 0;

    color: var(--muted);
    font-size: 16px;
}

.selected-projects__all {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    flex: none;

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

    text-decoration: none;
}

.selected-projects__all span {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

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

    transition:
        background .3s var(--ease),
        color .3s var(--ease),
        transform .3s var(--ease);
}

.selected-projects__all:hover span {
    background: var(--night);
    color: var(--light);

    transform: rotate(45deg);
}

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

    gap:
        clamp(45px, 6vw, 80px)
        clamp(24px, 4vw, 52px);
}

.project-card__link {
    display: block;

    text-decoration: none;
}

.project-card__media {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: var(--forest);
}

.project-card__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s var(--ease-out),
        filter .7s var(--ease-out);
}

.project-card:hover
.project-card__image {
    transform: scale(1.035);

    filter:
        saturate(.9)
        contrast(1.02);
}

.project-card__placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            var(--forest),
            var(--night-deep)
        );

    color: var(--light-muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .12em;
}

.project-card__arrow {
    position: absolute;

    right: 20px;
    bottom: 20px;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    border:
        1px solid rgba(255,255,255,.35);

    border-radius: 50%;

    background:
        rgba(7,23,19,.55);

    color: var(--light);

    backdrop-filter: blur(8px);

    transition:
        background .3s var(--ease),
        color .3s var(--ease),
        transform .3s var(--ease);
}

.project-card:hover
.project-card__arrow {
    background: var(--ochre);
    color: var(--night);

    transform: rotate(45deg);
}

.project-card__body {
    padding-top: 21px;
}

.project-card__meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 20px;

    min-height: 18px;

    margin-bottom: 12px;

    color: var(--muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;

    text-transform: uppercase;
}

.project-card__meta span + span::before {
    margin-right: 20px;

    color: var(--leaf);

    content: "/";
}

.project-card__title {
    max-width: 570px;

    margin: 0;

    font-size:
        clamp(29px, 3vw, 43px);

    font-weight: 300;
    line-height: 1.05;

    transition:
        color .25s ease;
}

.project-card:hover
.project-card__title {
    color: var(--leaf);
}

.selected-projects__empty {
    display: grid;
    grid-template-columns:
        minmax(150px, .65fr)
        minmax(0, 2fr);

    gap: clamp(40px, 8vw, 120px);

    padding: 34px 0;

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

.selected-projects__empty span {
    color: var(--leaf);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
}

.selected-projects__empty p {
    max-width: 600px;
    margin: 0;

    color: var(--muted);

    font-family: var(--font-display);
    font-size:
        clamp(27px, 3vw, 40px);

    font-weight: 300;
    line-height: 1.15;
}


/* ==============================================================
   PROCESS + PROJECTS RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {

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

    .process-step {
        min-height: 330px;

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

    .process-step:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .process-step:nth-child(3)
    .process-step__code {
        left: 0;
    }

}


@media (max-width: 760px) {

    .process__header,
    .selected-projects__header,
    .selected-projects__empty {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 25px;
    }

    .process__intro {
        margin-left: 0;
    }

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

    .process-step,
    .process-step + .process-step,
    .process-step:nth-child(3) {
        min-height: auto;

        padding:
            27px 0 70px;

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

    .process-step__number {
        margin-bottom: 38px;
    }

    .process-step__content p {
        max-width: 520px;
        margin-bottom: 0;
    }

    .process-step__code,
    .process-step + .process-step
    .process-step__code,
    .process-step:nth-child(3)
    .process-step__code {
        right: 0;
        bottom: 24px;
        left: 0;
    }

    .selected-projects__header-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 52px;
    }

    .project-card__media {
        aspect-ratio: 4 / 3;
    }

    .selected-projects__empty {
        padding: 28px 0;
    }

}


/* ==============================================================
   HOME — CREDENTIALS
   ============================================================== */

.credentials {
    background: var(--paper);
}

.credentials__header {
    display: grid;
    grid-template-columns:
        minmax(150px, .65fr)
        minmax(0, 2fr);

    gap: clamp(40px, 8vw, 120px);

    margin-bottom:
        clamp(65px, 8vw, 100px);
}

.credentials__title {
    max-width: 820px;
    margin-bottom: 34px;
}

.credentials__header-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
}

.credentials__header-bottom p {
    max-width: 540px;
    margin: 0;

    color: var(--muted);
    font-size: 16px;
}

.credentials__all {
    display: inline-flex;
    align-items: center;

    gap: 14px;
    flex: none;

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

    text-decoration: none;
}

.credentials__all span {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

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

    transition:
        background .3s var(--ease),
        color .3s var(--ease),
        transform .3s var(--ease);
}

.credentials__all:hover span {
    background: var(--night);
    color: var(--light);

    transform: rotate(45deg);
}

.credentials__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

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

.credential-card {
    min-width: 0;

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

.credential-card__link {
    display: flex;
    flex-direction: column;

    min-height: 430px;
    height: 100%;

    padding: 26px;

    text-decoration: none;

    transition:
        background .35s var(--ease);
}

.credential-card__link:hover {
    background: var(--paper-card);
}

.credential-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    min-height: 115px;
}

.credential-card__index {
    color: var(--leaf);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
}

.credential-card__mark {
    display: grid;
    place-items: center;

    width: 92px;
    height: 72px;
}

.credential-card__mark img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: right top;
}

.credential-card__monogram {
    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    border: 1px solid var(--rule);

    color: var(--forest);

    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
}

.credential-card__body {
    flex: 1;
}

.credential-card__issuer {
    margin-bottom: 13px;

    color: var(--muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    line-height: 1.5;

    text-transform: uppercase;
}

.credential-card__body h3 {
    max-width: 330px;

    margin: 0 0 30px;

    font-size:
        clamp(27px, 2.5vw, 37px);

    font-weight: 300;
    line-height: 1.04;
}

.credential-card__dates {
    display: flex;
    flex-wrap: wrap;

    gap: 16px 30px;

    margin: 0;
}

.credential-card__dates div {
    margin: 0;
}

.credential-card__dates dt {
    margin-bottom: 5px;

    color: var(--muted);

    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.credential-card__dates dd {
    margin: 0;

    font-size: 13px;
}

.credential-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

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

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

    font-size: 13px;
}

.credential-card__arrow {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

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

    transition:
        background .3s var(--ease),
        color .3s var(--ease),
        transform .3s var(--ease);
}

.credential-card__link:hover
.credential-card__arrow {
    background: var(--night);
    color: var(--light);

    transform: rotate(45deg);
}

.credentials__empty {
    display: grid;
    grid-template-columns:
        minmax(150px, .65fr)
        minmax(0, 2fr);

    gap: clamp(40px, 8vw, 120px);

    padding: 34px 0;

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

.credentials__empty span {
    color: var(--leaf);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
}

.credentials__empty p {
    max-width: 650px;
    margin: 0;

    color: var(--muted);

    font-family: var(--font-display);
    font-size:
        clamp(27px, 3vw, 40px);

    font-weight: 300;
    line-height: 1.15;
}


/* ==============================================================
   HOME — FINAL CTA
   ============================================================== */

.home-cta {
    position: relative;

    overflow: hidden;

    background: var(--night-deep);
    color: var(--light);
}

.home-cta__grid {
    position: absolute;
    inset: 0;

    opacity: .11;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    pointer-events: none;
}

.home-cta__inner {
    position: relative;
    z-index: 1;

    padding-top:
        clamp(85px, 10vw, 145px);

    padding-bottom:
        clamp(42px, 5vw, 70px);
}

.home-cta__eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 24px;

    border-bottom:
        1px solid rgba(255,255,255,.18);

    color: var(--light-muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.home-cta__content {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(280px, .65fr);

    align-items: end;

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

    padding:
        clamp(70px, 9vw, 130px) 0;
}

.home-cta__title {
    max-width: 920px;

    margin: 0;

    color: var(--light);

    font-family: var(--font-display);
    font-size:
        clamp(64px, 8.5vw, 132px);

    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .83;
}

.home-cta__title em {
    display: block;

    color: var(--ochre);

    font-weight: 300;
}

.home-cta__action {
    padding-bottom: 8px;
}

.home-cta__action p {
    max-width: 390px;

    margin: 0 0 34px;

    color: var(--light-muted);

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

.home-cta__button {
    width: fit-content;
}

.home-cta__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 22px;

    border-top:
        1px solid rgba(255,255,255,.18);

    color: var(--light-muted);

    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;

    text-transform: uppercase;
}


/* ==============================================================
   CREDENTIALS + FINAL CTA RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {

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

    .home-cta__content {
        grid-template-columns:
            minmax(0, 1fr);

        align-items: start;
    }

    .home-cta__action {
        max-width: 540px;
    }

}


@media (max-width: 760px) {

    .credentials__header,
    .credentials__empty {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 25px;
    }

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

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

    .credential-card__link {
        min-height: 380px;
        padding: 24px 0;
    }

    .credentials__grid {
        border-left: 0;
    }

    .credential-card {
        border-right: 0;
    }

    .home-cta__eyebrow {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    .home-cta__content {
        gap: 48px;

        padding:
            75px 0 80px;
    }

    .home-cta__title {
        font-size:
            clamp(58px, 18vw, 86px);

        line-height: .87;
    }

    .home-cta__footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

}


/* ==============================================================
   PROJECT ARCHIVE
   ============================================================== */

.projects-hero {
    position: relative;
    overflow: hidden;
    background: var(--night-deep);
    color: var(--light);
}

.projects-hero.page-hero--has-image {
    background:
        linear-gradient(90deg, rgba(7,23,19,.96) 0%, rgba(7,23,19,.82) 55%, rgba(7,23,19,.64) 100%),
        var(--page-hero-image) center / cover no-repeat;
}

.projects-hero::after {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    pointer-events: none;
}

.projects-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: clamp(170px, 18vw, 250px);
    padding-bottom: clamp(85px, 10vw, 140px);
}

.projects-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(270px, .55fr);
    align-items: end;
    gap: clamp(55px, 9vw, 135px);
    margin-top: clamp(55px, 7vw, 95px);
}

.projects-hero__title {
    max-width: 950px;
    margin: 0;
    color: var(--light);
    font-family: var(--font-display);
    font-size: clamp(72px, 10vw, 150px);
    font-weight: 300;
    letter-spacing: -.05em;
    line-height: .82;
}

.projects-hero__title em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.projects-hero__aside p {
    margin: 0 0 45px;
    color: var(--light-muted);
    font-size: 15px;
    line-height: 1.7;
}

.projects-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}


/* ==============================================================
   PROJECT ARCHIVE — INDEX / FILTERS
   ============================================================== */

.projects-index {
    background: var(--paper);
}

.projects-filter {
    display: grid;
    grid-template-columns: minmax(140px, .5fr) minmax(0, 2fr);
    gap: 40px;
    margin-bottom: clamp(65px, 8vw, 110px);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}

.projects-filter__label,
.single-project__body-label,
.single-project__report-cover-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.projects-filter__label {
    color: var(--muted);
}

.projects-filter__items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
}

.projects-filter__items a {
    position: relative;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}

.projects-filter__items a:hover,
.projects-filter__items a.is-active {
    color: var(--text);
}

.projects-filter__items a.is-active::after {
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 1px;
    background: var(--leaf);
    content: "";
}


/* ==============================================================
   PROJECT ARCHIVE — REPORT CARDS
   ============================================================== */

.projects-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(70px, 9vw, 115px) clamp(30px, 5vw, 65px);
}

.archive-project-card {
    min-width: 0;
}

.archive-project-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.archive-project-card__media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(500px, 47vw, 680px);
    padding: clamp(32px, 4vw, 52px);
    overflow: hidden;
    background: linear-gradient(145deg, var(--night-deep), var(--forest));
}

.archive-project-card__media::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    pointer-events: none;
}

.archive-project-card__document {
    position: relative;
    z-index: 1;
    width: min(78%, 390px);
    aspect-ratio: 210 / 297;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 28px 70px rgba(0,0,0,.30);
    transition: transform .65s var(--ease-out), box-shadow .65s var(--ease-out);
}

.archive-project-card:hover .archive-project-card__document {
    transform: translateY(-7px) rotate(-.35deg);
    box-shadow: 0 38px 90px rgba(0,0,0,.38);
}

.archive-project-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    transition: transform .65s var(--ease-out);
}

.archive-project-card:hover .archive-project-card__image {
    transform: scale(1.012);
}

.archive-project-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 42px 28px;
    background: var(--paper-card);
    color: var(--text);
}

.archive-project-card__placeholder-mark {
    color: var(--leaf);
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 70px);
    font-weight: 300;
    letter-spacing: -.04em;
}

.archive-project-card__placeholder-label {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.archive-project-card__arrow {
    position: absolute;
    z-index: 2;
    right: clamp(18px, 3vw, 30px);
    bottom: clamp(18px, 3vw, 30px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(7,23,19,.55);
    color: var(--light);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.archive-project-card:hover .archive-project-card__arrow {
    background: var(--ochre);
    color: var(--night);
    transform: rotate(45deg);
}

.archive-project-card__content {
    padding-top: 25px;
}

.archive-project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    min-height: 18px;
    margin-bottom: 13px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.archive-project-card__meta span + span::before {
    margin-right: 20px;
    color: var(--leaf);
    content: "/";
}

.archive-project-card h2 {
    max-width: 600px;
    margin: 0 0 18px;
    font-size: clamp(31px, 3.4vw, 48px);
    font-weight: 300;
    line-height: 1.02;
}

.archive-project-card__summary {
    max-width: 590px;
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.archive-project-card__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 25px;
    padding-top: 17px;
    border-top: 1px solid var(--rule);
}

.archive-project-card__client {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.archive-project-card__client span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.archive-project-card__client strong {
    max-width: 330px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.archive-project-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

.archive-project-card__read-more i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    font-size: 11px;
    font-style: normal;
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.archive-project-card:hover .archive-project-card__read-more i {
    background: var(--night);
    color: var(--light);
    transform: rotate(45deg);
}


/* ==============================================================
   PROJECT ARCHIVE — PAGINATION / EMPTY STATE
   ============================================================== */

.projects-pagination {
    margin-top: clamp(75px, 10vw, 130px);
}

.projects-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 25px;
    border-top: 1px solid var(--text);
}

.projects-pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    text-decoration: none;
}

.projects-pagination .current {
    background: var(--night);
    color: var(--light);
}

.projects-empty {
    padding: 35px 0;
    border-top: 1px solid var(--text);
    border-bottom: 1px solid var(--rule);
}

.projects-empty > span {
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
}

.projects-empty h2 {
    max-width: 750px;
    margin: 35px 0 15px;
    font-size: clamp(40px, 6vw, 75px);
    font-weight: 300;
}

.projects-empty p {
    color: var(--muted);
}


/* ==============================================================
   SINGLE PROJECT — HERO / FACTS
   ============================================================== */

.single-project__hero {
    background: var(--paper);
}

.single-project__hero > .container {
    padding-top: clamp(155px, 17vw, 230px);
    padding-bottom: clamp(65px, 8vw, 105px);
}

.single-project__back {
    display: inline-block;
    margin-bottom: clamp(55px, 7vw, 90px);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.single-project__back:hover {
    color: var(--leaf);
}

.single-project__heading {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
}

.single-project__kicker {
    padding-top: 12px;
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .09em;
    line-height: 1.5;
    text-transform: uppercase;
}

.single-project__heading h1 {
    max-width: 1050px;
    margin: 0;
    font-size: clamp(60px, 8.5vw, 125px);
    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .87;
}

.single-project__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: clamp(65px, 8vw, 105px) 0 0;
    border-top: 1px solid var(--text);
}

.single-project__facts div {
    min-width: 0;
    padding: 20px 24px 0 0;
}

.single-project__facts div + div {
    padding-left: 24px;
    border-left: 1px solid var(--rule);
}

.single-project__facts dt {
    margin-bottom: 9px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.single-project__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.5;
}


/* ==============================================================
   SINGLE PROJECT — REPORT COVER
   ============================================================== */

.single-project__report-cover {
    position: relative;
    overflow: hidden;
    padding: clamp(75px, 9vw, 125px) 0;
    background: var(--night-deep);
    color: var(--light);
}

.single-project__report-cover::before {
    position: absolute;
    inset: 0;
    opacity: .055;
    background-image:
        linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
    background-size: 70px 70px;
    content: "";
    pointer-events: none;
}

.single-project__report-cover-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    align-items: start;
    gap: clamp(40px, 7vw, 100px);
}

.single-project__report-cover-label {
    position: sticky;
    top: 130px;
    display: grid;
    gap: 10px;
    color: var(--light-muted);
}

.single-project__report-cover-label span {
    color: var(--ochre);
}

.single-project__report-cover-label small {
    font: inherit;
    opacity: .65;
}

.single-project__report-document {
    width: min(100%, 720px);
    margin: 0;
    padding: clamp(18px, 2.5vw, 30px);
    border: 1px solid var(--rule-dark);
    background: rgba(255,255,255,.035);
}

.single-project__report-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 297;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 35px 100px rgba(0,0,0,.32);
}


/* ==============================================================
   SINGLE PROJECT — EXECUTIVE SUMMARY / REPORT CTA
   ============================================================== */

.single-project__body {
    background: var(--paper);
}

.single-project__body-grid {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
}

.single-project__body-label {
    display: grid;
    align-content: start;
    gap: 10px;
    color: var(--muted);
}

.single-project__body-label small {
    color: var(--leaf);
    font-size: 8px;
}

.single-project__content {
    max-width: 850px;
}

.single-project__summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: clamp(40px, 5vw, 65px);
    padding-bottom: 17px;
    border-bottom: 1px solid var(--text);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.single-project__summary-heading span:first-child {
    color: var(--leaf);
}

.single-project__executive-summary {
    max-width: 760px;
    color: var(--text);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.9;
}

.single-project__executive-summary p {
    margin: 0 0 1.55em;
}

.single-project__executive-summary p:first-child {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.single-project__executive-summary h2,
.single-project__executive-summary h3,
.single-project__executive-summary h4 {
    margin: 1.7em 0 .65em;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.1;
}

.single-project__executive-summary h2 {
    font-size: clamp(32px, 4vw, 50px);
}

.single-project__executive-summary h3 {
    font-size: clamp(26px, 3vw, 36px);
}

.single-project__executive-summary ul,
.single-project__executive-summary ol {
    padding-left: 1.25em;
    margin: 0 0 1.6em;
}

.single-project__executive-summary li + li {
    margin-top: .55em;
}

.single-project__summary-pending {
    max-width: 650px;
    padding: 30px;
    border: 1px solid var(--rule);
    background: var(--paper-card);
}

.single-project__summary-pending span {
    display: block;
    margin-bottom: 20px;
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
}

.single-project__summary-pending p {
    margin: 0;
    color: var(--muted);
}

.single-project__report-action {
    margin-top: clamp(55px, 7vw, 90px);
    padding-top: 25px;
    border-top: 1px solid var(--rule);
}

.single-project__report-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: min(100%, 620px);
    padding: 24px 0;
    color: var(--text);
    text-decoration: none;
}

.single-project__report-button-label {
    display: grid;
    gap: 6px;
}

.single-project__report-button small {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.single-project__report-button strong {
    font-family: var(--font-display);
    font-size: clamp(29px, 3vw, 40px);
    font-weight: 300;
    line-height: 1;
}

.single-project__report-button i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border: 1px solid var(--text);
    border-radius: 50%;
    font-size: 15px;
    font-style: normal;
    transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}

.single-project__report-button:hover i {
    background: var(--night);
    color: var(--light);
    transform: rotate(45deg);
}


/* ==============================================================
   SINGLE PROJECT — NEXT PROJECT
   ============================================================== */

.project-next {
    background: var(--night-deep);
    color: var(--light);
}

.project-next__inner {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
    padding-top: clamp(65px, 8vw, 105px);
    padding-bottom: clamp(65px, 8vw, 105px);
}

.project-next__inner > span {
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.project-next__inner a {
    position: relative;
    display: block;
    padding-right: 80px;
    color: var(--light);
    text-decoration: none;
}

.project-next__inner small {
    display: block;
    margin-bottom: 15px;
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.project-next__inner strong {
    display: block;
    max-width: 800px;
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 300;
    line-height: 1;
}

.project-next__inner i {
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    font-style: normal;
    transform: translateY(-50%);
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.project-next__inner a:hover i {
    background: var(--ochre);
    color: var(--night);
    transform: translateY(-50%) rotate(45deg);
}


/* ==============================================================
   PROJECT PAGES RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {
    .projects-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .projects-hero__aside {
        max-width: 600px;
    }

    .archive-project-card__media {
        min-height: clamp(450px, 62vw, 620px);
    }

    .archive-project-card__document {
        width: min(80%, 360px);
    }

    .single-project__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 35px;
    }

    .single-project__facts div:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .single-project__report-document {
        width: min(100%, 650px);
    }
}

@media (max-width: 760px) {
    .projects-hero__inner {
        padding-top: 145px;
    }

    .projects-hero__title {
        font-size: clamp(65px, 20vw, 95px);
    }

    .projects-filter,
    .single-project__heading,
    .single-project__body-grid,
    .single-project__report-cover-grid,
    .project-next__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .projects-archive-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 70px;
    }

    .archive-project-card__media {
        min-height: 0;
        padding: 30px 22px 65px;
    }

    .archive-project-card__document {
        width: min(82%, 330px);
    }

    .archive-project-card__footer {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .archive-project-card__read-more {
        margin-top: 4px;
    }

     .single-project__heading h1 {
        max-width: 100%;
        min-width: 0;
        margin: 0;
    
        font-size: clamp(32px, 8.5vw, 42px);
        font-weight: 300;
        line-height: 1.08;
        letter-spacing: -0.025em;
    
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .single-project__facts {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .single-project__facts div,
    .single-project__facts div + div,
    .single-project__facts div:nth-child(odd) {
        padding: 18px 0;
        border-left: 0;
        border-top: 1px solid var(--rule);
    }

    .single-project__facts div:first-child {
        border-top: 0;
    }

    .single-project__report-cover {
        padding: 65px 0;
    }

    .single-project__report-cover-label {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .single-project__report-document {
        width: 100%;
        padding: 13px;
    }

    .single-project__summary-heading {
        margin-bottom: 35px;
    }

    .single-project__executive-summary {
        font-size: 16px;
        line-height: 1.8;
    }

    .single-project__report-button {
        width: 100%;
    }

    .single-project__report-button i {
        width: 44px;
        height: 44px;
    }

    .project-next__inner a {
        padding-right: 0;
        padding-bottom: 80px;
    }

    .project-next__inner i {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        transform: none;
    }

    .project-next__inner a:hover i {
        transform: rotate(45deg);
    }
}


/* ==============================================================
   CERTIFICATIONS ARCHIVE
   ============================================================== */

.certifications-hero {
    position: relative;
    overflow: hidden;
    background: var(--forest);
    color: var(--light);
}

.certifications-hero::after {
    position: absolute;
    inset: 0;
    opacity: .09;
    background-image:
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    pointer-events: none;
}

.certifications-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: clamp(170px, 18vw, 250px);
    padding-bottom: clamp(85px, 10vw, 140px);
}

.certifications-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(270px, .55fr);
    align-items: end;
    gap: clamp(55px, 9vw, 135px);
    margin-top: clamp(55px, 7vw, 95px);
}

.certifications-hero__title {
    max-width: 1000px;
    margin: 0;
    color: var(--light);
    font-family: var(--font-display);
    font-size: clamp(68px, 9vw, 140px);
    font-weight: 300;
    letter-spacing: -.05em;
    line-height: .84;
}

.certifications-hero__title em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.certifications-hero__aside p {
    margin: 0 0 45px;
    color: var(--light-muted);
    font-size: 15px;
    line-height: 1.7;
}

.certifications-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.certifications-index {
    background: var(--paper);
}

.certifications-list {
    border-top: 1px solid var(--text);
}

.certification-row {
    border-bottom: 1px solid var(--rule);
}

.certification-row__link {
    display: grid;
    grid-template-columns: 120px minmax(0, 1.6fr) minmax(150px, .45fr) 155px;
    align-items: center;
    gap: clamp(25px, 4vw, 60px);
    min-height: 230px;
    padding: 32px 0;
    text-decoration: none;
    transition: background .3s var(--ease);
}

.certification-row__link:hover {
    background: var(--paper-card);
}

.certification-row__mark {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    border: 1px solid var(--rule);
}

.certification-row__mark img {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.certification-row__mark span {
    color: var(--forest);
    font-family: var(--font-display);
    font-size: 24px;
    font-style: italic;
}

.certification-row__issuer {
    margin-bottom: 11px;
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    line-height: 1.5;
    text-transform: uppercase;
}

.certification-row__main h2 {
    max-width: 700px;
    margin: 0 0 12px;
    font-size: clamp(31px, 3.6vw, 50px);
    font-weight: 300;
    line-height: 1.02;
}

.certification-row__main p {
    max-width: 600px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.certification-row__dates {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

.certification-row__dates dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.certification-row__dates dd {
    margin: 0;
    font-size: 13px;
}

.certification-row__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    font-size: 12px;
}

.certification-row__action i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    font-style: normal;
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.certification-row__link:hover .certification-row__action i {
    transform: rotate(45deg);
    background: var(--night);
    color: var(--light);
}

.certifications-pagination {
    margin-top: clamp(70px, 9vw, 120px);
}

.certifications-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 25px;
    border-top: 1px solid var(--text);
}

.certifications-pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    text-decoration: none;
}

.certifications-pagination .current {
    background: var(--night);
    color: var(--light);
}

.certifications-empty {
    padding: 35px 0;
    border-top: 1px solid var(--text);
    border-bottom: 1px solid var(--rule);
}

.certifications-empty > span {
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
}

.certifications-empty h2 {
    max-width: 760px;
    margin: 35px 0 15px;
    font-size: clamp(40px, 6vw, 75px);
    font-weight: 300;
}

.certifications-empty p {
    color: var(--muted);
}


/* ==============================================================
   SINGLE CERTIFICATION
   ============================================================== */

.single-certification__hero {
    background: var(--paper);
}

.single-certification__hero > .container {
    padding-top: clamp(155px, 17vw, 230px);
    padding-bottom: clamp(65px, 8vw, 105px);
}

.single-certification__back {
    display: inline-block;
    margin-bottom: clamp(55px, 7vw, 90px);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.single-certification__heading {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
}

.single-certification__mark {
    display: grid;
    place-items: center;
    width: 130px;
    height: 130px;
    border: 1px solid var(--rule);
}

.single-certification__mark img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.single-certification__mark span {
    color: var(--forest);
    font-family: var(--font-display);
    font-size: 30px;
    font-style: italic;
}

.single-certification__issuer {
    margin-bottom: 18px;
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.single-certification__heading h1 {
    max-width: 1000px;
    margin: 0;
    font-size: clamp(56px, 7.5vw, 110px);
    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .9;
}

.single-certification__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: clamp(65px, 8vw, 105px) 0 0;
    border-top: 1px solid var(--text);
}

.single-certification__facts div {
    min-width: 0;
    padding: 20px 24px 0 0;
}

.single-certification__facts div + div {
    padding-left: 24px;
    border-left: 1px solid var(--rule);
}

.single-certification__facts dt {
    margin-bottom: 9px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.single-certification__facts dd {
    margin: 0;
    font-size: 14px;
}

.single-certification__body {
    background: var(--paper-alt);
}

.single-certification__body-grid {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
}

.single-certification__label {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.single-certification__content {
    max-width: 850px;
}

.single-certification__lede {
    margin: 0 0 45px;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 300;
    line-height: 1.08;
}

.single-certification__content .entry-content {
    max-width: 720px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.single-certification__document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: clamp(55px, 7vw, 85px);
    padding-top: 28px;
    border-top: 1px solid var(--text);
}

.single-certification__document > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.single-certification__document span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.single-certification__document strong {
    font-size: 14px;
    font-weight: 500;
}

.certificate-preview {
    background: var(--paper);
}

.certificate-preview__header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--text);
}

.certificate-preview__header > span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.certificate-preview__image {
    display: grid;
    place-items: center;
    padding: clamp(25px, 5vw, 70px);
    background: var(--paper-alt);
}

.certificate-preview__image img {
    display: block;
    width: auto;
    max-width: min(100%, 900px);
    max-height: 1100px;
    object-fit: contain;
    box-shadow: 0 18px 50px rgba(7,23,19,.12);
}

.credential-next {
    background: var(--night-deep);
    color: var(--light);
}

.credential-next__inner {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
    padding-top: clamp(65px, 8vw, 105px);
    padding-bottom: clamp(65px, 8vw, 105px);
}

.credential-next__inner > span {
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.credential-next__inner a {
    position: relative;
    display: block;
    padding-right: 80px;
    color: var(--light);
    text-decoration: none;
}

.credential-next__inner small {
    display: block;
    margin-bottom: 15px;
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.credential-next__inner strong {
    display: block;
    max-width: 800px;
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 300;
    line-height: 1;
}

.credential-next__inner i {
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    font-style: normal;
    transform: translateY(-50%);
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.credential-next__inner a:hover i {
    background: var(--ochre);
    color: var(--night);
    transform: translateY(-50%) rotate(45deg);
}


/* ==============================================================
   CERTIFICATION PAGES RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {
    .certifications-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .certifications-hero__aside {
        max-width: 600px;
    }

    .certification-row__link {
        grid-template-columns: 100px minmax(0, 1fr) 140px;
    }

    .certification-row__action {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }

    .single-certification__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 35px;
    }

    .single-certification__facts div:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .certifications-hero__inner {
        padding-top: 145px;
    }

    .certifications-hero__title {
        font-size: clamp(58px, 18vw, 88px);
    }

    .certification-row__link,
    .single-certification__heading,
    .single-certification__body-grid,
    .credential-next__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .certification-row__link {
        padding: 35px 0;
    }

    .certification-row__mark {
        width: 82px;
        height: 82px;
    }

    .certification-row__mark img {
        width: 62px;
        height: 62px;
    }

    .certification-row__action {
        grid-column: auto;
        justify-content: space-between;
        padding-top: 18px;
        border-top: 1px solid var(--rule);
    }

    .single-certification__mark {
        width: 105px;
        height: 105px;
    }

    .single-certification__mark img {
        width: 80px;
        height: 80px;
    }

    .single-certification__heading h1 {
        font-size: clamp(52px, 16vw, 82px);
    }

    .single-certification__facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-certification__facts div,
    .single-certification__facts div + div,
    .single-certification__facts div:nth-child(3) {
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid var(--rule);
    }

    .single-certification__facts div:first-child {
        border-top: 0;
    }

    .single-certification__document {
        align-items: flex-start;
        flex-direction: column;
    }

    .certificate-preview__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .credential-next__inner a {
        padding-right: 0;
        padding-bottom: 80px;
    }

    .credential-next__inner i {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        transform: none;
    }

    .credential-next__inner a:hover i {
        transform: rotate(45deg);
    }
}


/* ==============================================================
   PROJECT CATEGORY ARCHIVE
   ============================================================== */

.project-category-hero {
    position: relative;
    overflow: hidden;
    background: var(--night-deep);
    color: var(--light);
}

.project-category-hero::after {
    position: absolute;
    inset: 0;

    opacity: .1;

    background-image:
        linear-gradient(
            rgba(255,255,255,.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.1) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    content: "";
    pointer-events: none;
}

.project-category-hero__inner {
    position: relative;
    z-index: 1;

    padding-top:
        clamp(155px, 17vw, 225px);

    padding-bottom:
        clamp(80px, 9vw, 125px);
}

.project-category-hero__back {
    display: inline-block;

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

    color: var(--light-muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;

    text-decoration: none;
    text-transform: uppercase;
}

.project-category-hero__back:hover {
    color: var(--ochre);
}

.project-category-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(270px, .55fr);

    align-items: end;

    gap:
        clamp(55px, 9vw, 135px);
}

.project-category-hero .eyebrow {
    margin-bottom: 35px;
}

.project-category-hero__title {
    max-width: 1000px;

    margin: 0;

    color: var(--light);

    font-family: var(--font-display);
    font-size:
        clamp(62px, 8.5vw, 130px);

    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .86;
}

.project-category-hero__aside p,
.project-category-hero__description {
    margin: 0 0 45px;

    color: var(--light-muted);

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

.project-category-hero__description p {
    margin: 0;
}

.project-category-hero__meta {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding-top: 16px;

    border-top:
        1px solid rgba(255,255,255,.2);

    color: var(--light-muted);

    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;

    text-transform: uppercase;
}


/* ==============================================================
   CATEGORY NAV
   ============================================================== */

.project-category-index {
    background: var(--paper);
}

.project-category-nav {
    display: grid;

    grid-template-columns:
        minmax(140px, .5fr)
        minmax(0, 2fr);

    gap: 40px;

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

    padding-bottom: 24px;

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

.project-category-nav__label {
    color: var(--muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.project-category-nav__items {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 25px;
}

.project-category-nav__items a {
    position: relative;

    color: var(--muted);

    font-size: 14px;
    text-decoration: none;
}

.project-category-nav__items a:hover,
.project-category-nav__items a.is-active {
    color: var(--text);
}

.project-category-nav__items
a.is-active::after {
    position: absolute;

    right: 0;
    bottom: -8px;
    left: 0;

    height: 1px;

    background: var(--leaf);

    content: "";
}


/* ==============================================================
   CATEGORY PROJECT GRID
   ============================================================== */

.project-category-grid {
    display: grid;

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

    gap:
        clamp(60px, 8vw, 105px)
        clamp(28px, 5vw, 65px);
}

.category-project-card__link {
    display: block;

    text-decoration: none;
}

.category-project-card__media {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    background: var(--forest);
}

.category-project-card__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s var(--ease-out);
}

.category-project-card:hover
.category-project-card__image {
    transform: scale(1.035);
}

.category-project-card__placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            var(--forest),
            var(--night-deep)
        );

    color: var(--light-muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .12em;
}

.category-project-card__arrow {
    position: absolute;

    right: 20px;
    bottom: 20px;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    border:
        1px solid rgba(255,255,255,.35);

    border-radius: 50%;

    background:
        rgba(7,23,19,.55);

    color: var(--light);

    backdrop-filter: blur(8px);

    transition:
        transform .3s var(--ease),
        background .3s var(--ease),
        color .3s var(--ease);
}

.category-project-card:hover
.category-project-card__arrow {
    transform: rotate(45deg);

    background: var(--ochre);
    color: var(--night);
}

.category-project-card__content {
    padding-top: 22px;
}

.category-project-card__meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 20px;

    min-height: 18px;

    margin-bottom: 13px;

    color: var(--muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;

    text-transform: uppercase;
}

.category-project-card__meta
span + span::before {
    margin-right: 20px;

    color: var(--leaf);

    content: "/";
}

.category-project-card h2 {
    max-width: 600px;

    margin: 0 0 16px;

    font-size:
        clamp(31px, 3.4vw, 48px);

    font-weight: 300;
    line-height: 1.02;
}

.category-project-card p {
    max-width: 560px;

    margin: 0 0 25px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}

.category-project-card__client {
    display: flex;

    gap: 20px;

    padding-top: 16px;

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

    font-size: 12px;
}

.category-project-card__client span {
    color: var(--muted);

    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.category-project-card__client strong {
    font-weight: 500;
}


/* ==============================================================
   CATEGORY PAGINATION / EMPTY
   ============================================================== */

.project-category-pagination {
    margin-top:
        clamp(75px, 10vw, 130px);
}

.project-category-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    padding-top: 25px;

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

.project-category-pagination .page-numbers {
    display: grid;
    place-items: center;

    min-width: 38px;
    height: 38px;

    padding: 0 10px;

    border:
        1px solid var(--rule);

    font-family: var(--font-mono);
    font-size: 10px;

    text-decoration: none;
}

.project-category-pagination .current {
    background: var(--night);
    color: var(--light);
}

.project-category-empty {
    padding: 35px 0;

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

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

.project-category-empty > span {
    color: var(--leaf);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
}

.project-category-empty h2 {
    max-width: 780px;

    margin: 35px 0 25px;

    font-size:
        clamp(40px, 6vw, 75px);

    font-weight: 300;
    line-height: 1;
}

.project-category-empty a {
    color: var(--leaf);

    font-size: 14px;
    text-decoration: none;
}


/* ==============================================================
   PROJECT CATEGORY RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {

    .project-category-hero__grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .project-category-hero__aside {
        max-width: 600px;
    }

}


@media (max-width: 760px) {

    .project-category-hero__inner {
        padding-top: 145px;
    }

    .project-category-hero__title {
        font-size:
            clamp(55px, 17vw, 84px);
    }

    .project-category-nav {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 22px;
    }

    .project-category-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 60px;
    }

    .category-project-card__media {
        aspect-ratio: 4 / 3;
    }

}


/* ==============================================================
   ABOUT PAGE
   ============================================================== */

.about-hero {
    position: relative;
    overflow: hidden;
    background: var(--night-deep);
    color: var(--light);
}

.about-hero::after {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    pointer-events: none;
}

.about-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: clamp(170px, 18vw, 250px);
    padding-bottom: clamp(85px, 10vw, 140px);
}

.about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(270px, .55fr);
    align-items: end;
    gap: clamp(55px, 9vw, 135px);
    margin-top: clamp(55px, 7vw, 95px);
}

.about-hero__title {
    max-width: 1050px;
    margin: 0;
    color: var(--light);
    font-family: var(--font-display);
    font-size: clamp(65px, 8.8vw, 135px);
    font-weight: 300;
    letter-spacing: -.05em;
    line-height: .84;
}

.about-hero__title em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.about-hero__aside p {
    margin: 0 0 45px;
    color: var(--light-muted);
    font-size: 15px;
    line-height: 1.7;
}

.about-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}


/* shared about index */

.about-section-index {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
}

.about-section-index span {
    color: var(--leaf);
}

.about-section-index strong {
    font-weight: 400;
}

.about-section-index--light {
    color: var(--light-muted);
}

.about-section-index--light span {
    color: var(--ochre);
}


/* ==============================================================
   ABOUT POSITIONING
   ============================================================== */

.about-positioning {
    background: var(--paper);
}

.about-positioning__grid {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
}

.about-positioning__statement {
    max-width: 1000px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 6.7vw, 90px);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: .98;
}

.about-positioning__statement em {
    color: var(--leaf);
    font-weight: 300;
}

.about-positioning__copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 5vw, 75px);
    max-width: 900px;
    margin-top: clamp(55px, 8vw, 100px);
    padding-top: 28px;
    border-top: 1px solid var(--text);
}

.about-positioning__copy p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}


/* ==============================================================
   ENVIRONMENT + GIS INTERSECTION
   ============================================================== */

.about-intersection {
    background: var(--forest);
    color: var(--light);
}

.about-intersection__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 850px;
}

.about-intersection__visual {
    position: relative;
    overflow: hidden;
    min-height: 700px;
    border-right: 1px solid rgba(255,255,255,.12);
    background:
        radial-gradient(circle at 52% 48%, rgba(224,174,72,.14), transparent 22%),
        linear-gradient(135deg, var(--night-deep), var(--forest));
}

.about-intersection__map {
    position: absolute;
    inset: clamp(35px, 6vw, 90px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 44px 44px;
}

.about-map__axis {
    position: absolute;
    background: rgba(224,174,72,.4);
}

.about-map__axis--x {
    top: 52%;
    left: 8%;
    width: 84%;
    height: 1px;
}

.about-map__axis--y {
    top: 8%;
    left: 48%;
    width: 1px;
    height: 84%;
}

.about-map__ring {
    position: absolute;
    top: 52%;
    left: 48%;
    border: 1px solid rgba(224,174,72,.34);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.about-map__ring--one {
    width: 140px;
    height: 140px;
}

.about-map__ring--two {
    width: 280px;
    height: 280px;
}

.about-map__ring--three {
    width: 440px;
    height: 440px;
}

.about-map__point {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ochre);
    box-shadow: 0 0 0 6px rgba(224,174,72,.1);
}

.about-map__point--one {
    top: 31%;
    left: 62%;
}

.about-map__point--two {
    top: 67%;
    left: 33%;
}

.about-map__point--three {
    top: 57%;
    left: 71%;
}

.about-map__readout {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
}

.about-map__readout strong {
    color: var(--light);
    font-weight: 400;
}

.about-map__readout--top {
    top: 20px;
    left: 20px;
}

.about-map__readout--bottom {
    right: 20px;
    bottom: 20px;
    text-align: right;
}

.about-intersection__content {
    padding: clamp(70px, 8vw, 125px) clamp(30px, 7vw, 105px);
}

.about-intersection__content h2 {
    max-width: 700px;
    margin: clamp(70px, 9vw, 120px) 0 35px;
    color: var(--light);
    font-size: clamp(45px, 5.8vw, 78px);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: .98;
}

.about-intersection__content h2 em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.about-intersection__content > p {
    max-width: 630px;
    margin: 0;
    color: var(--light-muted);
    font-size: 15px;
    line-height: 1.8;
}

.about-intersection__lenses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: clamp(65px, 8vw, 100px);
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.18);
}

.about-intersection__lenses span {
    color: var(--ochre);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
}

.about-intersection__lenses h3 {
    margin: 15px 0 12px;
    color: var(--light);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
}

.about-intersection__lenses p {
    margin: 0;
    color: var(--light-muted);
    font-size: 13px;
    line-height: 1.7;
}


/* ==============================================================
   HOW WE THINK
   ============================================================== */

.about-thinking {
    background: var(--paper);
}

.about-thinking__header {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
    margin-bottom: clamp(70px, 9vw, 120px);
}

.about-thinking__header h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(48px, 6.5vw, 88px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .98;
}

.about-thinking__header h2 em {
    color: var(--leaf);
    font-weight: 300;
}

.about-thinking__steps {
    border-top: 1px solid var(--text);
}

.about-thinking__steps article {
    display: grid;
    grid-template-columns: minmax(80px, .3fr) minmax(0, 1fr);
    gap: 30px;
    padding: 35px 0;
    border-bottom: 1px solid var(--rule);
}

.about-thinking__number {
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 10px;
}

.about-thinking__steps article > div {
    display: grid;
    grid-template-columns: 150px minmax(180px, .6fr) minmax(0, 1fr);
    align-items: start;
    gap: 30px;
}

.about-thinking__steps small {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-thinking__steps h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 300;
    line-height: 1;
}

.about-thinking__steps p {
    max-width: 530px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}


/* ==============================================================
   PRINCIPLES
   ============================================================== */

.about-principles {
    background: var(--night-deep);
    color: var(--light);
}

.about-principles__grid {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: clamp(60px, 10vw, 150px);
}

.about-principles h2 {
    max-width: 580px;
    margin: clamp(70px, 9vw, 120px) 0 0;
    color: var(--light);
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .98;
}

.about-principles h2 em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.about-principles__list {
    border-top: 1px solid rgba(255,255,255,.28);
}

.about-principles__list article {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 25px;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.about-principles__list article > span {
    color: var(--ochre);
    font-family: var(--font-mono);
    font-size: 9px;
}

.about-principles__list h3 {
    margin: 0 0 10px;
    color: var(--light);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
}

.about-principles__list p {
    max-width: 550px;
    margin: 0;
    color: var(--light-muted);
    font-size: 13px;
    line-height: 1.7;
}


/* ==============================================================
   ABOUT CTA
   ============================================================== */

.about-cta {
    background: var(--ochre);
    color: var(--night);
}

.about-cta__inner {
    padding-top: clamp(75px, 9vw, 125px);
    padding-bottom: clamp(75px, 9vw, 125px);
}

.about-cta__meta {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(7,23,19,.4);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .6fr);
    align-items: end;
    gap: clamp(50px, 9vw, 130px);
    margin-top: clamp(55px, 7vw, 90px);
}

.about-cta h2 {
    max-width: 800px;
    margin: 0;
    color: var(--night);
    font-size: clamp(55px, 7.5vw, 105px);
    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .9;
}

.about-cta h2 em {
    display: block;
    font-weight: 300;
}

.about-cta__actions p {
    margin: 0 0 30px;
    font-size: 14px;
    line-height: 1.7;
}

.about-cta__actions > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
}

.about-cta .button--primary {
    background: var(--night);
    color: var(--light);
}

.about-cta__text-link {
    color: var(--night);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}


/* ==============================================================
   ABOUT RESPONSIVE
   ============================================================== */

@media (max-width: 1000px) {
    .about-hero__grid,
    .about-cta__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-hero__aside {
        max-width: 600px;
    }

    .about-intersection__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-intersection__visual {
        min-height: 650px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .about-principles__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-principles h2 {
        margin-top: 55px;
    }
}

@media (max-width: 760px) {
    .about-hero__inner {
        padding-top: 145px;
    }

    .about-hero__title {
        font-size: clamp(58px, 18vw, 88px);
    }

    .about-positioning__grid,
    .about-thinking__header {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .about-positioning__copy,
    .about-intersection__lenses {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-intersection__visual {
        min-height: 500px;
    }

    .about-intersection__map {
        inset: 25px;
    }

    .about-map__ring--three {
        width: 330px;
        height: 330px;
    }

    .about-intersection__content {
        padding-right: var(--gutter);
        padding-left: var(--gutter);
    }

    .about-thinking__steps article {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 15px;
    }

    .about-thinking__steps article > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .about-principles__list article {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 15px;
    }

    .about-cta__meta {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==============================================================
   MOBILE TYPOGRAPHY / OVERFLOW SAFETY
   ============================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 760px) {

    .about-hero__title {
        max-width: 100%;
        font-size: clamp(48px, 14.5vw, 72px);
        letter-spacing: -0.035em;
        line-height: 0.92;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .about-hero__title em {
        max-width: 100%;
    }

    .about-positioning__statement,
    .about-intersection__content h2,
    .about-thinking__header h2,
    .about-principles h2,
    .about-cta h2 {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .about-positioning__grid,
    .about-positioning__content,
    .about-intersection__content,
    .about-thinking__header,
    .about-principles__grid,
    .about-cta__grid {
        min-width: 0;
    }
}

/* ==============================================================
   SERVICES PAGE — v1.1.2
   ============================================================== */

.services-hero {
    position: relative;
    overflow: hidden;
    background: var(--night-deep);
    color: var(--light);
}

.services-hero::after {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    pointer-events: none;
}

.services-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: clamp(170px, 18vw, 250px);
    padding-bottom: clamp(75px, 9vw, 125px);
}

.services-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(270px, .55fr);
    align-items: end;
    gap: clamp(55px, 9vw, 135px);
    margin-top: clamp(55px, 7vw, 95px);
}

.services-hero__title {
    max-width: 1080px;
    margin: 0;
    color: var(--light);
    font-family: var(--font-display);
    font-size: clamp(62px, 8.4vw, 128px);
    font-weight: 300;
    letter-spacing: -.05em;
    line-height: .85;
}

.services-hero__title em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.services-hero__aside p {
    margin: 0 0 45px;
    color: var(--light-muted);
    font-size: 15px;
    line-height: 1.7;
}

.services-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.services-hero__index {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255,255,255,.12);
}

.services-hero__index .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.services-hero__index span {
    padding: 18px 0;
    border-right: 1px solid rgba(255,255,255,.12);
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .12em;
}

.services-hero__index span:last-child {
    border-right: 0;
}


/* shared index */

.services-section-index {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
}

.services-section-index span {
    color: var(--leaf);
}

.services-section-index strong {
    font-weight: 400;
}

.services-section-index--light {
    color: var(--light-muted);
}

.services-section-index--light span {
    color: var(--ochre);
}


/* intro */

.services-intro {
    background: var(--paper);
}

.services-intro__grid {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
}

.services-intro__statement {
    max-width: 1000px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 6.6vw, 90px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .98;
}

.services-intro__statement em {
    color: var(--leaf);
    font-weight: 300;
}

.services-intro__copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 5vw, 75px);
    max-width: 900px;
    margin-top: clamp(55px, 8vw, 100px);
    padding-top: 28px;
    border-top: 1px solid var(--text);
}

.services-intro__copy p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}


/* disciplines */

.services-disciplines {
    background: var(--paper-alt);
}

.service-discipline {
    border-top: 1px solid rgba(18,32,26,.18);
}

.service-discipline:last-child {
    border-bottom: 1px solid rgba(18,32,26,.18);
}

.service-discipline__grid {
    display: grid;
    grid-template-columns: minmax(110px, .32fr) minmax(0, 2fr);
    gap: clamp(35px, 6vw, 90px);
    padding-top: clamp(65px, 8vw, 110px);
    padding-bottom: clamp(65px, 8vw, 110px);
}

.service-discipline__rail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
}

.service-discipline__rail strong {
    color: var(--leaf);
    font-size: 13px;
    font-weight: 400;
}

.service-discipline__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 30px;
    padding-bottom: clamp(35px, 5vw, 60px);
    border-bottom: 1px solid var(--text);
}

.service-discipline__heading h2 {
    max-width: 1000px;
    margin: 0;
    font-size: clamp(48px, 6.6vw, 92px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .94;
}

.service-discipline__heading > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--text);
    border-radius: 50%;
    font-size: 18px;
}

.service-discipline__content {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 8vw, 120px);
    padding-top: clamp(35px, 5vw, 60px);
}

.service-discipline__lead {
    max-width: 580px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 300;
    line-height: 1.18;
}

.service-discipline__detail > p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.service-discipline__capabilities {
    margin-top: 40px;
}

.service-discipline__label {
    display: block;
    margin-bottom: 15px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.service-discipline__capabilities ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(18,32,26,.22);
}

.service-discipline__capabilities li {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(18,32,26,.13);
    font-size: 13px;
}

.service-discipline__capabilities li span {
    color: var(--leaf);
    font-family: var(--font-mono);
}

.service-discipline--featured {
    background: var(--forest);
    color: var(--light);
}

.service-discipline--featured .service-discipline__rail,
.service-discipline--featured .service-discipline__detail > p,
.service-discipline--featured .service-discipline__label {
    color: var(--light-muted);
}

.service-discipline--featured .service-discipline__rail strong,
.service-discipline--featured .service-discipline__capabilities li span {
    color: var(--ochre);
}

.service-discipline--featured .service-discipline__heading,
.service-discipline--featured .service-discipline__heading > span {
    border-color: rgba(255,255,255,.45);
}

.service-discipline--featured .service-discipline__capabilities ul,
.service-discipline--featured .service-discipline__capabilities li {
    border-color: rgba(255,255,255,.14);
}

/* ==============================================================
   SERVICES — AREAS OF COMPETENCE
   ============================================================== */

.services-competence {
    background: var(--paper);
}

.services-competence__grid {
    display: grid;
    grid-template-columns:
        minmax(150px, .45fr)
        minmax(0, 2fr);

    gap: clamp(40px, 7vw, 100px);
}


/* Section introduction */

.services-competence__content {
    min-width: 0;
}

.services-competence__intro {
    max-width: 880px;
    margin-bottom: clamp(55px, 7vw, 90px);
}

.services-competence__intro .services-intro__statement {
    max-width: 820px;
    margin: 0;

    font-size: var(--type-editorial-statement);
    line-height: 1.08;
    letter-spacing: -.025em;
}


/* Competence index */

.services-competence__list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

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

.services-competence__list article {
    position: relative;

    min-height: 235px;

    padding:
        clamp(28px, 3.5vw, 42px)
        clamp(30px, 4vw, 52px)
        clamp(32px, 4vw, 48px)
        0;

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

.services-competence__list article:nth-child(even) {
    padding-right: 0;
    padding-left: clamp(30px, 4vw, 52px);

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


/* Item number */

.services-competence__list article > span {
    display: block;

    margin-bottom: clamp(36px, 4vw, 55px);

    color: var(--leaf);

    font-family: var(--font-mono);
    font-size: var(--type-meta);
    font-weight: 500;

    line-height: 1;

    letter-spacing: .1em;
}


/* Item title */

.services-competence__list h3 {
    max-width: 430px;

    margin: 0 0 16px;

    font-family: var(--font-display);
    font-size: var(--type-card-title);
    font-weight: 300;

    line-height: 1.08;
    letter-spacing: -.025em;
}


/* Item description */

.services-competence__list p {
    max-width: 440px;

    margin: 0;

    color: var(--muted);

    font-size: var(--type-body-small);
    line-height: 1.7;
}


/* Subtle interaction */

.services-competence__list article {
    transition:
        background-color .35s var(--ease),
        padding-left .35s var(--ease),
        padding-right .35s var(--ease);
}

@media (hover: hover) {

    .services-competence__list article:hover {
        background:
            rgba(255, 255, 255, .28);
    }

}


/* Tablet */

@media (max-width: 1000px) {

    .services-competence__grid {
        grid-template-columns:
            minmax(120px, .35fr)
            minmax(0, 2fr);

        gap: clamp(35px, 6vw, 70px);
    }

    .services-competence__list article {
        min-height: 220px;
    }

}


/* Mobile */

@media (max-width: 760px) {

    .services-competence__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .services-competence__intro {
        margin-bottom: 48px;
    }

    .services-competence__intro .services-intro__statement {
        font-size: var(--type-editorial-statement-mobile);
        line-height: 1.08;
    }

    .services-competence__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-competence__list article,
    .services-competence__list article:nth-child(even) {
        min-height: 0;

        padding:
            30px
            0
            34px;

        border-left: 0;
    }

    .services-competence__list article > span {
        margin-bottom: 25px;
    }

    .services-competence__list h3 {
        max-width: 100%;

        font-size:
            clamp(27px, 8vw, 34px);
    }

    .services-competence__list p {
        max-width: 540px;

        font-size: 14px;
    }

}


/* connected practice */

.services-connection {
    overflow: hidden;
    background: var(--night-deep);
    color: var(--light);
}

.services-connection__grid {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
    padding-top: clamp(85px, 10vw, 145px);
    padding-bottom: clamp(85px, 10vw, 145px);
}

.services-connection__content h2 {
    max-width: 850px;
    margin: 0;
    color: var(--light);
    font-size: clamp(50px, 6.8vw, 92px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .96;
}

.services-connection__content h2 em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.services-connection__content > p {
    max-width: 680px;
    margin: 45px 0 0;
    color: var(--light-muted);
    font-size: 15px;
    line-height: 1.8;
}

.services-connection__diagram {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    margin-top: clamp(70px, 9vw, 120px);
    padding: 45px 0;
    border-top: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.services-connection__diagram::before {
    position: absolute;
    top: 50%;
    right: 5%;
    left: 5%;
    height: 1px;
    background: rgba(224,174,72,.4);
    content: "";
}

.services-connection__diagram span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: var(--night-deep);
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    line-height: 1.3;
    text-align: center;
}

.services-connection__diagram span:nth-child(3) {
    width: 125px;
    height: 125px;
    border-color: var(--ochre);
    color: var(--ochre);
}


/* selected work */

.services-projects {
    background: var(--paper);
}

.services-projects__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .55fr);
    align-items: end;
    gap: clamp(55px, 9vw, 130px);
    padding-top: clamp(85px, 10vw, 145px);
    padding-bottom: clamp(85px, 10vw, 145px);
}

.services-projects h2 {
    max-width: 800px;
    margin: clamp(65px, 8vw, 100px) 0 0;
    font-size: clamp(52px, 7vw, 95px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .95;
}

.services-projects h2 em {
    display: block;
    color: var(--leaf);
    font-weight: 300;
}

.services-projects__aside {
    padding-top: 20px;
    border-top: 1px solid var(--text);
}

.services-projects__aside p {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.services-projects__aside a {
    color: var(--leaf);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}


/* CTA */

.services-cta {
    background: var(--ochre);
    color: var(--night);
}

.services-cta__inner {
    padding-top: clamp(75px, 9vw, 125px);
    padding-bottom: clamp(75px, 9vw, 125px);
}

.services-cta__meta {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(7,23,19,.4);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.services-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .55fr);
    align-items: end;
    gap: clamp(55px, 9vw, 130px);
    margin-top: clamp(55px, 7vw, 90px);
}

.services-cta h2 {
    max-width: 820px;
    margin: 0;
    color: var(--night);
    font-size: clamp(55px, 7.5vw, 105px);
    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .9;
}

.services-cta h2 em {
    display: block;
    font-weight: 300;
}

.services-cta__aside p {
    margin: 0 0 30px;
    font-size: 14px;
    line-height: 1.7;
}

.services-cta .button--primary {
    background: var(--night);
    color: var(--light);
}


/* mobile overflow protection */

.services-page,
.services-page * {
    min-width: 0;
}

@media (max-width: 1000px) {
    .services-hero__grid,
    .services-projects__grid,
    .services-cta__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-hero__aside,
    .services-projects__aside,
    .services-cta__aside {
        max-width: 620px;
    }

    .service-discipline__content {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 760px) {
    .services-hero__inner {
        padding-top: 145px;
    }

    .services-hero__title {
        max-width: 100%;
        font-size: clamp(47px, 14vw, 70px);
        letter-spacing: -.035em;
        line-height: .92;
        overflow-wrap: break-word;
    }

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

    .services-intro__grid,
    .services-connection__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .services-intro__copy {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-discipline__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .service-discipline__rail {
        flex-direction: row;
        min-height: 0;
        padding-bottom: 18px;
        border-bottom: 1px solid currentColor;
    }

    .service-discipline__heading h2 {
        font-size: clamp(42px, 12vw, 62px);
        overflow-wrap: break-word;
    }

    .service-discipline__heading > span {
        width: 40px;
        height: 40px;
    }

    .services-connection__diagram {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .services-connection__diagram::before {
        display: none;
    }

    .services-connection__diagram span,
    .services-connection__diagram span:nth-child(3) {
        width: 92px;
        height: 92px;
    }

    .services-connection__diagram span:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .services-cta__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .services-connection__content h2,
    .services-projects h2,
    .services-cta h2,
    .services-intro__statement {
        max-width: 100%;
        overflow-wrap: break-word;
    }
}

/* ==============================================================
   CONTACT PAGE — v1.1.3
   ============================================================== */

.contact-page,
.contact-page * {
    min-width: 0;
}

.contact-hero {
    position: relative;
    overflow: hidden;
    background: var(--night-deep);
    color: var(--light);
}

.contact-hero::after {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    pointer-events: none;
}

.contact-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: clamp(170px, 18vw, 250px);
    padding-bottom: clamp(85px, 10vw, 140px);
}

.contact-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(270px, .55fr);
    align-items: end;
    gap: clamp(55px, 9vw, 135px);
    margin-top: clamp(55px, 7vw, 95px);
}

.contact-hero__title {
    max-width: 1050px;
    margin: 0;
    color: var(--light);
    font-family: var(--font-display);
    font-size: clamp(62px, 8.4vw, 128px);
    font-weight: 300;
    letter-spacing: -.05em;
    line-height: .85;
}

.contact-hero__title em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.contact-hero__aside p {
    margin: 0 0 45px;
    color: var(--light-muted);
    font-size: 15px;
    line-height: 1.7;
}

.contact-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-section-index {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
}

.contact-section-index span {
    color: var(--leaf);
}

.contact-section-index strong {
    font-weight: 400;
}

.contact-section-index--light {
    color: var(--light-muted);
}

.contact-section-index--light span {
    color: var(--ochre);
}


/* intake */

.contact-intake {
    background: var(--paper);
}

.contact-intake__grid {
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
    gap: clamp(60px, 10vw, 150px);
    padding-top: clamp(90px, 11vw, 155px);
    padding-bottom: clamp(90px, 11vw, 155px);
}

.contact-intake__aside h2 {
    max-width: 600px;
    margin: clamp(65px, 8vw, 100px) 0 30px;
    font-size: clamp(46px, 5.7vw, 78px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .98;
}

.contact-intake__aside h2 em {
    display: block;
    color: var(--leaf);
    font-weight: 300;
}

.contact-intake__aside > p {
    max-width: 530px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.contact-intake__prompts {
    margin-top: 55px;
    padding-top: 20px;
    border-top: 1px solid var(--text);
}

.contact-intake__prompts > span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-intake__prompts ul {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.contact-intake__prompts li {
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
}

.contact-intake__prompts li::before {
    margin-right: 12px;
    color: var(--leaf);
    content: "+";
    font-family: var(--font-mono);
}


/* form */

.contact-form-wrap {
    align-self: start;
    padding: clamp(28px, 4vw, 55px);
    background: var(--paper-card);
    border-top: 3px solid var(--leaf);
}

.contact-notice {
    display: grid;
    gap: 5px;
    margin-bottom: 35px;
    padding: 18px 20px;
    border: 1px solid var(--rule);
    font-size: 13px;
}

.contact-notice strong {
    font-weight: 600;
}

.contact-notice--success {
    border-color: var(--leaf);
}

.contact-notice--error {
    border-color: #9a4a3d;
}

.contact-form__honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.contact-field {
    margin-bottom: 30px;
}

.contact-field label {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.contact-field label span {
    color: var(--leaf);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(18,32,26,.35);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.contact-field input,
.contact-field select {
    min-height: 48px;
}

.contact-field textarea {
    min-height: 155px;
    padding: 12px 0;
    resize: vertical;
    line-height: 1.6;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--leaf);
}

.contact-field textarea::placeholder,
.contact-field input::placeholder {
    color: #87938d;
}

.contact-form__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-top: 15px;
    padding-top: 25px;
    border-top: 1px solid var(--rule);
}

.contact-form__footer p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.contact-form__submit {
    border: 0;
    cursor: pointer;
}

.contact-form__submit span {
    margin-left: 8px;
}


/* direct contact */

.contact-direct {
    background: var(--forest);
    color: var(--light);
}

.contact-direct__grid {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
    padding-top: clamp(85px, 10vw, 145px);
    padding-bottom: clamp(85px, 10vw, 145px);
}

.contact-direct__content h2 {
    max-width: 800px;
    margin: 0;
    color: var(--light);
    font-size: clamp(50px, 6.7vw, 90px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .96;
}

.contact-direct__content h2 em {
    display: block;
    color: var(--ochre);
    font-weight: 300;
}

.contact-direct__content > p {
    max-width: 650px;
    margin: 40px 0 0;
    color: var(--light-muted);
    font-size: 14px;
    line-height: 1.8;
}

.contact-direct__placeholder {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(65px, 8vw, 100px);
    border-top: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.contact-direct__placeholder > div {
    min-height: 150px;
    padding: 25px;
    border-right: 1px solid rgba(255,255,255,.15);
}

.contact-direct__placeholder > div:last-child {
    border-right: 0;
}

.contact-direct__placeholder span {
    display: block;
    margin-bottom: 45px;
    color: var(--ochre);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
}

.contact-direct__placeholder strong {
    color: var(--light-muted);
    font-size: 14px;
    font-weight: 400;
}


/* process */

.contact-process {
    background: var(--paper);
}

.contact-process > .container {
    padding-top: clamp(85px, 10vw, 145px);
    padding-bottom: clamp(85px, 10vw, 145px);
}

.contact-process__header {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 100px);
    margin-bottom: clamp(70px, 9vw, 115px);
}

.contact-process__header h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(50px, 6.5vw, 88px);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .96;
}

.contact-process__header h2 em {
    color: var(--leaf);
    font-weight: 300;
}

.contact-process__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--text);
}

.contact-process__steps article {
    min-height: 300px;
    padding: 28px;
    border-right: 1px solid var(--rule);
}

.contact-process__steps article:last-child {
    border-right: 0;
}

.contact-process__steps article > span {
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 9px;
}

.contact-process__steps h3 {
    margin: 75px 0 15px;
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 50px);
    font-weight: 300;
}

.contact-process__steps p {
    max-width: 350px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}


/* closing */

.contact-closing {
    background: var(--ochre);
}

.contact-closing__inner {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 35px;
    padding-top: clamp(65px, 8vw, 100px);
    padding-bottom: clamp(65px, 8vw, 100px);
}

.contact-closing span {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
}

.contact-closing p {
    max-width: 650px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(40px, 5.5vw, 70px);
    font-weight: 300;
    line-height: .95;
}


/* responsive */

@media (max-width: 1000px) {
    .contact-hero__grid,
    .contact-intake__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-hero__aside,
    .contact-intake__aside {
        max-width: 650px;
    }
}

@media (max-width: 760px) {
    .contact-hero__inner {
        padding-top: 145px;
    }

    .contact-hero__title {
        max-width: 100%;
        font-size: clamp(47px, 14vw, 70px);
        letter-spacing: -.035em;
        line-height: .92;
        overflow-wrap: break-word;
    }

    .contact-form__row,
    .contact-direct__grid,
    .contact-process__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form-wrap {
        padding: 25px 20px;
    }

    .contact-form__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-form__submit {
        width: 100%;
        justify-content: center;
    }

    .contact-direct__placeholder {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-direct__placeholder > div {
        min-height: 115px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }

    .contact-direct__placeholder > div:last-child {
        border-bottom: 0;
    }

    .contact-direct__placeholder span {
        margin-bottom: 25px;
    }

    .contact-process__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-process__steps article {
        min-height: 0;
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .contact-process__steps h3 {
        margin-top: 35px;
    }

    .contact-closing__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-intake__aside h2,
    .contact-direct__content h2,
    .contact-process__header h2,
    .contact-closing p {
        max-width: 100%;
        overflow-wrap: break-word;
    }
}

/* ==========================================================
   STELLOVATE — DYNAMIC BRAND ASSETS
   ========================================================== */

/* HEADER LOGO */
.site-brand__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    max-width: 240px;
}

.site-brand__logo-image {
    display: block;
    width: auto;
    height: 58px;
    max-width: 240px;
    object-fit: contain;
}

/* FOOTER LOGO */
.site-footer .site-brand__logo {
    max-width: 260px;
}

.site-footer .site-brand__logo-image {
    width: auto;
    height: 64px;
    max-width: 260px;
    object-fit: contain;
}


/* ==========================================================
   FOOTER SOCIAL ICONS
   ========================================================== */

.site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
}

.site-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 38px;
    height: 38px;
    padding: 0;

    border: 1px solid rgba(232, 238, 230, 0.22);
    border-radius: 50%;

    color: var(--light);
    background: transparent;
    text-decoration: none;

    opacity: 1;

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

.site-footer__socials a svg {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    overflow: visible;
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
    color: var(--night-deep);
    border-color: var(--ochre);
    background-color: var(--ochre);
    transform: translateY(-2px);
}

.site-footer__socials a:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 3px;
}


/* ==========================================================
   RESPONSIVE BRAND SIZING
   ========================================================== */

@media (max-width: 760px) {

   .site-brand__logo {
        max-width: 190px;
    }

    .site-brand__logo-image {
        height: 46px;
        max-width: 190px;
    }

    .site-footer .site-brand__logo {
        max-width: 210px;
    }

    .site-footer .site-brand__logo-image {
        height: 52px;
        max-width: 210px;
    }

    .site-footer__socials a {
        width: 40px;
        height: 40px;
    }

    .site-footer__socials a svg {
        width: 17px;
        height: 17px;
    }
}

/* ==========================================================
   STELLOVATE — EDITABLE PAGE IMAGERY
   Append this entire block to assets/css/main.css
   ========================================================== */

.page-hero--has-image {
    position: relative;
    isolation: isolate;
    background-image:
        linear-gradient(
            90deg,
            rgba(7, 23, 19, 0.94) 0%,
            rgba(7, 23, 19, 0.84) 42%,
            rgba(7, 23, 19, 0.62) 100%
        ),
        var(--page-hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-hero--has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(7, 23, 19, 0.12),
            rgba(7, 23, 19, 0.42)
        );
}

.page-hero--has-image > * {
    position: relative;
    z-index: 1;
}

.about-intersection__image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 560px;
    overflow: hidden;
    background: var(--night-deep);
}

.about-intersection__image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(7, 23, 19, 0.04),
            rgba(7, 23, 19, 0.30)
        );
}

.about-intersection__image-file {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 760px) {
    .page-hero--has-image {
        background-position: center;
        background-image:
            linear-gradient(
                180deg,
                rgba(7, 23, 19, 0.90) 0%,
                rgba(7, 23, 19, 0.76) 100%
            ),
            var(--page-hero-image);
    }

    .about-intersection__image,
    .about-intersection__image-file {
        min-height: 420px;
    }
}

/* ==========================================================
   STELLOVATE — ABOUT TEAM
   Append to assets/css/main.css
   ========================================================== */

.about-team {
    background: var(--paper);
}

.about-team__header {
    display: grid;
    grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(40px, 7vw, 110px);
    align-items: start;
    margin-bottom: clamp(44px, 7vw, 84px);
}

.about-team__heading {
    max-width: 760px;
}

.about-team__heading h2 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(2.7rem, 5vw, 5.3rem);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.045em;
}

.about-team__heading h2 em {
    color: var(--leaf);
    font-weight: 400;
}

.about-team__heading > p {
    max-width: 600px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.about-team__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 34px);
}

.team-card {
    min-width: 0;
    background: var(--paper-card);
    border: 1px solid rgba(18, 32, 26, 0.12);
}

.team-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--forest);
}

.team-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 500ms ease;
}

.team-card:hover .team-card__image {
    transform: scale(1.025);
}

.team-card__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(224, 174, 72, 0.08), transparent 55%),
        var(--forest);
}

.team-card__placeholder span {
    color: rgba(232, 238, 230, 0.55);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
}

.team-card__content {
    padding: clamp(22px, 2.5vw, 32px);
}

.team-card__identity {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(18, 32, 26, 0.12);
}

.team-card__identity h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    font-weight: 650;
    line-height: 1.15;
}

.team-card__role {
    margin: 8px 0 0;
    color: var(--leaf);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.team-card__bio {
    margin-top: 20px;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

.team-card__bio p {
    margin: 0;
}

.team-card__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.team-card__socials a {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--text);
    border: 1px solid rgba(18, 32, 26, 0.18);
    border-radius: 50%;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.team-card__socials a:hover,
.team-card__socials a:focus-visible {
    color: var(--night-deep);
    background: var(--ochre);
    border-color: var(--ochre);
    transform: translateY(-2px);
}

.team-card__socials svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (max-width: 1020px) {
    .about-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .about-team__header {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .about-team__grid {
        grid-template-columns: 1fr;
    }

    .team-card__media {
        aspect-ratio: 4 / 4.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-card__image,
    .team-card__socials a {
        transition: none;
    }
}

/* ==============================================================
   STELLOVATE — SHARED TYPOGRAPHY SYSTEM
   Contact-page proportions are the reference scale.
   Maintain cross-page type sizes here instead of inside page sections.
   ============================================================== */

/* Page heroes: About / Services / Projects / Certifications / Gallery / Contact.
   Homepage hero remains intentionally cinematic and independent. */
.about-hero__title,
.services-hero__title,
.projects-hero__title,
.certifications-hero__title,
.certification-hero__title,
.gallery-hero__title,
.contact-hero__title,
.project-category-hero__title {
    font-size: var(--type-page-hero);
    line-height: .85;
    letter-spacing: -.05em;
}

/* Standard section-heading tier */
.about-intersection__content h2,
.about-principles h2,
.services-connection__content h2,
.services-projects h2,
.contact-intake__aside h2,
.contact-direct__content h2,
.contact-process__header h2,
.projects-empty h2,
.certifications-empty h2,
.gallery-empty h2 {
    font-size: var(--type-section-title);
    line-height: .98;
    letter-spacing: -.04em;
}

/* Long editorial statements need a calmer scale than ordinary headings. */
.about-positioning__statement {
    max-width: 980px;
    font-size: var(--type-editorial-statement);
    line-height: 1.08;
    letter-spacing: -.025em;
}

/* Shared CTA scale.
   This fixes the oversized "Environmental solutions from planning through
   operation and beyond." treatment while keeping it visually important. */
.home-cta__title,
.about-cta h2,
.services-cta h2,
.projects-cta h2,
.certifications-cta h2,
.gallery-cta h2,
.contact-closing p {
    font-size: var(--type-cta);
    line-height: .94;
    letter-spacing: -.04em;
}

/* Common long-form/body copy rhythm */
.about-positioning__copy p,
.about-hero__aside p,
.services-hero__aside p,
.projects-hero__aside p,
.certifications-hero__aside p,
.gallery-hero__aside p,
.contact-hero__aside p {
    font-size: var(--type-body-small);
    line-height: 1.7;
}

/* Mobile: one shared scale instead of page-by-page oversized overrides. */
@media (max-width: 760px) {
    .about-hero__title,
    .services-hero__title,
    .projects-hero__title,
    .certifications-hero__title,
    .certification-hero__title,
    .gallery-hero__title,
    .contact-hero__title,
    .project-category-hero__title {
        font-size: var(--type-page-hero-mobile);
        line-height: .92;
        letter-spacing: -.035em;
    }

    .about-intersection__content h2,
    .about-principles h2,
    .services-connection__content h2,
    .services-projects h2,
    .contact-intake__aside h2,
    .contact-direct__content h2,
    .contact-process__header h2,
    .projects-empty h2,
    .certifications-empty h2,
    .gallery-empty h2 {
        font-size: var(--type-section-title-mobile);
    }

    .about-positioning__statement {
        font-size: var(--type-editorial-statement-mobile);
        line-height: 1.12;
    }

    .home-cta__title,
    .about-cta h2,
    .services-cta h2,
    .projects-cta h2,
    .certifications-cta h2,
    .gallery-cta h2,
    .contact-closing p {
        font-size: var(--type-cta-mobile);
        line-height: .96;
    }
}


/* ==============================================================
   CERTIFICATION DOCUMENT SYSTEM
   Certificate Document is the primary visual source.
   Featured Image is no longer required by the frontend.
   ============================================================== */

/* Homepage credential cards */

.credential-card__link {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.credential-card__preview {
    position: relative;
    display: grid;
    min-height: 300px;
    place-items: center;
    overflow: hidden;
    padding: clamp(24px, 3vw, 42px);
    background: var(--paper-alt);
    border-bottom: 1px solid var(--rule);
}

.credential-card__preview-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 310px;
    object-fit: contain;
    box-shadow: 0 14px 36px rgba(7,23,19,.12);
    transition: transform .45s ease, box-shadow .45s ease;
}

.credential-card__link:hover .credential-card__preview-image {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 20px 46px rgba(7,23,19,.16);
}

.credential-card__file-type,
.certification-row__file-type {
    position: absolute;
    right: 14px;
    bottom: 12px;
    padding: 6px 8px;
    background: rgba(7,23,19,.86);
    color: var(--light);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.credential-card__index {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    background: var(--night-deep);
    color: var(--light);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .08em;
}

.credential-card__pdf {
    position: relative;
    display: flex;
    width: min(76%, 245px);
    aspect-ratio: 0.72;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    overflow: hidden;
    background: var(--paper-card);
    color: var(--text);
    border: 1px solid rgba(18,32,26,.16);
    box-shadow: 0 14px 36px rgba(7,23,19,.1);
}

.credential-card__pdf::before,
.certification-row__pdf::before,
.certificate-showcase__pdf-sheet::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background:
        linear-gradient(
            225deg,
            var(--paper-alt) 0 49%,
            transparent 50%
        );
    content: "";
}

.credential-card__pdf span,
.certification-row__pdf span {
    position: absolute;
    top: 22px;
    left: 22px;
    color: var(--ochre);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
}

.credential-card__pdf strong,
.certification-row__pdf strong {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 300;
    line-height: .95;
}

.credential-card__pdf i,
.certification-row__pdf i {
    margin-top: 14px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 7px;
    font-style: normal;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.credential-card__pdf--empty,
.certification-row__pdf--empty {
    background: var(--paper);
}


/* Certification archive */

.certification-row__link {
    grid-template-columns:
        minmax(190px, .52fr)
        minmax(0, 1.45fr)
        minmax(130px, .42fr)
        minmax(120px, .35fr);
    align-items: center;
    gap: clamp(26px, 4vw, 62px);
}

.certification-row__preview {
    position: relative;
    display: grid;
    min-height: 210px;
    place-items: center;
    overflow: hidden;
    padding: 20px;
    background: var(--paper-alt);
}

.certification-row__preview-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: contain;
    box-shadow: 0 10px 26px rgba(7,23,19,.11);
    transition: transform .4s ease;
}

.certification-row__link:hover .certification-row__preview-image {
    transform: scale(1.025);
}

.certification-row__pdf {
    position: relative;
    display: flex;
    width: min(72%, 135px);
    aspect-ratio: .72;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    background: var(--paper-card);
    border: 1px solid rgba(18,32,26,.14);
    box-shadow: 0 9px 24px rgba(7,23,19,.09);
}

.certification-row__pdf::before {
    width: 32px;
    height: 32px;
}

.certification-row__pdf span {
    top: 14px;
    left: 14px;
    font-size: 8px;
}

.certification-row__pdf strong {
    font-size: 21px;
}

.certification-row__pdf i {
    margin-top: 9px;
    font-size: 6px;
}

.certification-row__file-type {
    right: 8px;
    bottom: 8px;
    font-size: 6px;
}


/* Single certification hero */

.single-certification__heading {
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: start;
}

.single-certification__document-mark {
    display: flex;
    width: 118px;
    aspect-ratio: .78;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    background: var(--paper);
    color: var(--text);
    border: 1px solid rgba(232,238,230,.24);
}

.single-certification__document-mark span {
    color: var(--ochre);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
}

.single-certification__document-mark i {
    font-family: var(--font-mono);
    font-size: 7px;
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
}


/* Single certification document showcase */

.certificate-showcase {
    background: var(--paper);
}

.certificate-showcase__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: clamp(38px, 5vw, 62px);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--text);
}

.certificate-showcase__header .eyebrow {
    margin-bottom: 14px;
}

.certificate-showcase__header h2 {
    max-width: 760px;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--type-section-title);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -.04em;
}

.certificate-showcase__header > span {
    flex: 0 0 auto;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.certificate-showcase__image {
    position: relative;
    display: grid;
    min-height: 520px;
    place-items: center;
    padding: clamp(28px, 5vw, 72px);
    overflow: hidden;
    background: var(--paper-alt);
    color: var(--text);
    text-decoration: none;
}

.certificate-showcase__image img {
    display: block;
    width: auto;
    max-width: min(100%, 980px);
    height: auto;
    max-height: 1180px;
    object-fit: contain;
    box-shadow: 0 24px 64px rgba(7,23,19,.15);
    transition: transform .45s ease, box-shadow .45s ease;
}

.certificate-showcase__image > span {
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 9px 12px;
    background: var(--night-deep);
    color: var(--light);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.certificate-showcase__image:hover img {
    transform: translateY(-5px);
    box-shadow: 0 30px 72px rgba(7,23,19,.2);
}

.certificate-showcase__pdf {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    min-height: 580px;
    overflow: hidden;
    background: var(--paper-alt);
    color: var(--text);
    text-decoration: none;
}

.certificate-showcase__pdf-sheet {
    position: relative;
    display: flex;
    width: min(76%, 430px);
    aspect-ratio: .72;
    align-self: center;
    justify-self: center;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 4vw, 48px);
    background: var(--paper-card);
    border: 1px solid rgba(18,32,26,.16);
    box-shadow: 0 24px 64px rgba(7,23,19,.13);
    transition: transform .45s ease, box-shadow .45s ease;
}

.certificate-showcase__pdf-sheet::before {
    width: 72px;
    height: 72px;
}

.certificate-showcase__pdf-sheet > span {
    position: absolute;
    top: 34px;
    left: clamp(28px, 4vw, 48px);
    color: var(--ochre);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
}

.certificate-showcase__pdf-sheet strong {
    max-width: 320px;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 300;
    line-height: .98;
}

.certificate-showcase__pdf-sheet small {
    margin-top: 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.certificate-showcase__pdf-sheet > i {
    margin-top: 30px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 7px;
    font-style: normal;
    letter-spacing: .1em;
}

.certificate-showcase__pdf-action {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    padding: clamp(40px, 6vw, 80px);
    background: var(--night-deep);
    color: var(--light);
}

.certificate-showcase__pdf-action > span {
    max-width: 440px;
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 300;
    line-height: .96;
}

.certificate-showcase__pdf-action > i {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border: 1px solid rgba(232,238,230,.35);
    border-radius: 50%;
    font-size: 22px;
    font-style: normal;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.certificate-showcase__pdf:hover .certificate-showcase__pdf-sheet {
    transform: translateY(-6px);
    box-shadow: 0 32px 76px rgba(7,23,19,.18);
}

.certificate-showcase__pdf:hover .certificate-showcase__pdf-action > i {
    background: var(--ochre);
    color: var(--night);
    transform: rotate(45deg);
}

.certificate-showcase__file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: clamp(38px, 6vw, 72px);
    background: var(--night-deep);
    color: var(--light);
    text-decoration: none;
}

.certificate-showcase__file span {
    color: var(--light-muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.certificate-showcase__file strong {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 300;
}

.certificate-showcase__file > i {
    font-size: 24px;
    font-style: normal;
}


/* Retire the old featured-image-as-mark treatment. */
.credential-card__top,
.credential-card__mark,
.credential-card__monogram,
.certification-row__mark,
.single-certification__mark,
.certificate-preview {
    display: none;
}


/* Responsive certification document system */

@media (max-width: 1000px) {
    .certification-row__link {
        grid-template-columns: 180px minmax(0, 1fr) 135px;
    }

    .certification-row__action {
        grid-column: 2 / -1;
    }

    .certificate-showcase__pdf {
        grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr);
    }
}

@media (max-width: 760px) {
    .credential-card__preview {
        min-height: 260px;
    }

    .credential-card__preview-image {
        max-height: 260px;
    }

    .certification-row__link {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .certification-row__preview {
        min-height: 300px;
    }

    .certification-row__preview-image {
        max-height: 280px;
    }

    .certification-row__action {
        grid-column: auto;
    }

    .single-certification__heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-certification__document-mark {
        width: 92px;
    }

    .certificate-showcase__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .certificate-showcase__header h2 {
        font-size: var(--type-section-title-mobile);
    }

    .certificate-showcase__image {
        min-height: 360px;
        padding: 24px 16px 58px;
    }

    .certificate-showcase__image img {
        max-height: 720px;
    }

    .certificate-showcase__pdf {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .certificate-showcase__pdf-sheet {
        width: min(76%, 310px);
        margin: 52px auto;
    }

    .certificate-showcase__pdf-action {
        min-height: 250px;
        padding: 34px 26px;
    }

    .certificate-showcase__pdf-action > span {
        font-size: clamp(34px, 11vw, 50px);
    }

    .certificate-showcase__file {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   404 PAGE
   ========================================================= */

.error-page {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 72vh;
    padding: clamp(5rem, 10vw, 9rem) 0;
    overflow: hidden;
    background: var(--night, #0c221c);
    color: var(--light, #e8eee6);
}

.error-page::before {
    content: "";
    position: absolute;
    top: 0;
    right: 8%;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.error-page__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.error-page__code {
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(7rem, 18vw, 15rem);
    font-weight: 400;
    line-height: 0.75;
    letter-spacing: -0.08em;
    color: rgba(232, 238, 230, 0.07);
    user-select: none;
}

.error-page__content {
    position: relative;
    max-width: 760px;
}

.error-page .section-kicker {
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
    color: var(--ochre, #e0ae48);
}

.error-page__title {
    max-width: 760px;
    margin: 0;
    color: var(--light, #e8eee6);
    font-family: "Newsreader", serif;
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 300;
    line-height: 0.92;
    letter-spacing: -0.045em;
}

.error-page__title em {
    display: block;
    color: var(--ochre, #e0ae48);
    font-weight: 300;
}

.error-page__text {
    max-width: 610px;
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    color: var(--light-muted, #9db2a7);
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.75;
}

.error-page__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.error-page__secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--light, #e8eee6);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        color 180ms ease,
        gap 180ms ease;
}

.error-page__secondary-link:hover,
.error-page__secondary-link:focus-visible {
    gap: 0.9rem;
    color: var(--ochre, #e0ae48);
}


/* Tablet */

@media (max-width: 900px) {

    .error-page {
        min-height: 68vh;
    }

    .error-page__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .error-page__code {
        font-size: clamp(6rem, 25vw, 11rem);
        line-height: 0.7;
    }

}


/* Mobile */

@media (max-width: 600px) {

    .error-page {
        min-height: 70vh;
        padding: 5rem 0;
    }

    .error-page::before {
        right: 1.5rem;
    }

    .error-page__inner {
        gap: 2.25rem;
    }

    .error-page__code {
        font-size: clamp(5.5rem, 30vw, 8rem);
    }

    .error-page__title {
        font-size: clamp(2.65rem, 13vw, 4rem);
        line-height: 0.96;
    }

    .error-page__text {
        line-height: 1.65;
    }

    .error-page__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.5rem;
    }

}