:root {
        --yellow: #ffc400;
        --yellow-2: #ffd329;
        --navy: #0a1b26;
        --navy-2: #102936;
        --ink: #172630;
        --paper: #f5f4ef;
        --white: #fff;
        --muted: #71808a;
        --line: rgba(10, 27, 38, .13);
        --radius: 18px;
        --shadow: 0 18px 45px rgba(4, 18, 27, .15);
        --display: "Barlow Condensed", sans-serif;
        --body: "Manrope", sans-serif;
    }

    html {
        scroll-behavior: smooth
    }

    body {
        margin: 0;
        color: var(--ink);
        background: var(--paper);
        font-family: var(--body);
        line-height: 1.65;
        overflow-x: hidden;
    }

    a {
        text-decoration: none
    }

    .container-xl {
        max-width: 1240px
    }

    .display-font {
        font-family: var(--display);
        letter-spacing: .02em
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--yellow);
    }

    .eyebrow:before {
        content: "";
        width: 28px;
        height: 3px;
        background: var(--yellow);
        display: block
    }

    .section-title {
        font-family: var(--display);
        font-weight: 700;
        font-size: clamp(2.6rem, 5vw, 5rem);
        line-height: .95;
        letter-spacing: .015em;
        text-transform: uppercase;
        margin: 0;
    }

    .section-title span {
        color: var(--yellow)
    }

    .lead-copy {
        max-width: 680px;
        color: #586873
    }

    .btn-brand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 52px;
        padding: 0 27px;
        border: 0;
        border-radius: 2px;
        background: var(--yellow);
        color: var(--navy);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: .78rem;
        box-shadow: 8px 8px 0 rgba(10, 27, 38, .12);
        transition: .2s ease;
    }

    .btn-brand:hover {
        background: #ffd633;
        color: var(--navy);
        transform: translate(-2px, -2px);
        box-shadow: 11px 11px 0 rgba(10, 27, 38, .13)
    }

    .btn-outline-brand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        padding: 0 25px;
        border: 1px solid rgba(10, 27, 38, .28);
        color: var(--navy);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: .78rem;
        background: transparent;
        transition: .2s ease;
    }

    .btn-outline-brand:hover {
        background: var(--navy);
        color: #fff
    }

    /* Blueprint texture inspired by the supplied reference */
    .blueprint {
        background-color: var(--navy);
        background-size: 56px 56px, 56px 56px, 14px 14px, 14px 14px;
    }

    /* Header */
    .site-header {
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(10, 27, 38, .96);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        backdrop-filter: blur(12px);
    }

    .navbar {
        min-height: 82px
    }

    .brand {
        color: #fff;
        font-family: var(--display);
        font-weight: 700;
        font-size: 1.45rem;
        letter-spacing: .045em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        position: relative;
        display: grid;
        place-items: center;
        border: 2px solid var(--yellow);
        color: var(--yellow);
        transform: rotate(45deg);
    }

    .brand-mark i {
        transform: rotate(-45deg);
        font-size: .95rem
    }

    .brand small {
        display: block;
        font-family: var(--body);
        font-size: .46em;
        letter-spacing: .2em;
        color: var(--yellow);
        font-weight: 700
    }

    .nav-link {
        color: rgba(255, 255, 255, .72) !important;
        font-size: .74rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em;
        padding: 10px 15px !important;
        transition: .2s;
    }

    .nav-link:hover,
    .nav-link.active {
        color: var(--yellow) !important
    }

    .header-cta {
        min-height: 42px;
        padding: 0 19px;
        box-shadow: none
    }

    .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, .3);
        padding: 8px 10px
    }

    .navbar-toggler:focus {
        box-shadow: none
    }

    .navbar-toggler-icon {
        filter: invert(1)
    }

    /* Hero */
    .hero {
        padding: 138px 0 72px;
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .hero:after {
        content: "";
        position: absolute;
        right: -8vw;
        top: 12%;
        width: 42vw;
        height: 42vw;
        border: 1px solid rgba(255, 196, 0, .18);
        border-radius: 50%;
        z-index: -1;
    }

    .hero-grid {
        position: relative
    }

    .hero-copy {
        padding: 42px 15px 35px 0;
        color: #fff
    }

    .hero h1 {
        font-family: var(--display);
        font-weight: 700;
        text-transform: uppercase;
        font-size: clamp(3.5rem, 7vw, 7.2rem);
        line-height: .83;
        letter-spacing: .01em;
        margin: 20px 0 24px;
    }

    .hero h1 strong {
        display: block;
        color: var(--yellow);
        font-weight: 700
    }

    .hero-text {
        max-width: 610px;
        color: rgba(255, 255, 255, .73);
        font-size: 1rem
    }

    .hero-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        margin-top: 30px
    }

    .hero-trust span {
        font-size: .78rem;
        color: #fff;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px
    }

    .hero-trust i {
        color: var(--yellow)
    }

    .hero-visual {
        min-height: 660px;
        position: relative;
        display: flex;
        align-items: end;
        justify-content: center;
    }

    .worker-photo {
        position: absolute;
        inset: 55px 7% 0 8%;
        background:
            linear-gradient(180deg, rgba(10, 27, 38, .02), rgba(10, 27, 38, .55)),
            url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1100&q=85") center/cover;
        clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
        filter: saturate(.72) contrast(1.05);
    }

    .visual-frame {
        position: absolute;
        inset: 35px 2% 12px 4%;
        border: 7px solid var(--yellow);
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
        pointer-events: none;
    }

    .visual-frame:before,
    .visual-frame:after {
        content: "";
        position: absolute;
        background: var(--navy);
    }

    .visual-frame:before {
        width: 18px;
        height: 18px;
        left: -12px;
        top: 44%;
        box-shadow: 0 88px 0 var(--navy), 0 -88px 0 var(--navy)
    }

    .visual-frame:after {
        width: 95px;
        height: 7px;
        right: 24px;
        bottom: -7px
    }

    .blueprint-note {
        position: absolute;
        left: 0;
        bottom: 25px;
        background: #fff;
        color: var(--navy);
        padding: 18px 20px 16px;
        width: 205px;
        border-left: 8px solid var(--yellow);
        box-shadow: var(--shadow);
    }

    .blueprint-note b {
        font-family: var(--display);
        font-size: 1.65rem;
        line-height: .9;
        text-transform: uppercase;
        display: block
    }

    .blueprint-note span {
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #71808a;
        font-weight: 800
    }

    .hero-form-wrap {
        position: relative;
        z-index: 4;
        margin-top: 30px;
    }

    .form-card {
        background: #fff;
        color: var(--ink);
        padding: 34px;
        border-top: 9px solid var(--yellow);
        box-shadow: 0 25px 65px rgba(0, 0, 0, .28);
    }

    .form-card h2 {
        font-family: var(--display);
        font-size: 2.6rem;
        line-height: .9;
        text-transform: uppercase;
        margin: 0 0 8px;
    }

    .form-card .form-intro {
        font-size: .82rem;
        color: #687983;
        margin-bottom: 22px
    }

    .form-label {
        font-size: .69rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 7px;
        color: #46555e
    }

    .form-control,
    .form-select {
        min-height: 48px;
        border: 1px solid #d5dadd;
        border-radius: 0;
        background: #fbfbfa;
        font-size: .85rem;
        padding: 11px 13px;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--yellow);
        box-shadow: 0 0 0 3px rgba(255, 196, 0, .16);
        background: #fff
    }

    textarea.form-control {
        min-height: 145px;
        resize: vertical
    }

    .consent {
        font-size: .67rem;
        line-height: 1.5;
        color: #71808a
    }

    .consent input {
        accent-color: var(--yellow);
        margin-right: 7px
    }

    .form-submit {
        width: 100%;
        min-height: 56px;
        font-size: .8rem
    }

    .char-count {
        font-size: .65rem;
        color: #9aa5aa;
        text-align: right;
        margin-top: 5px
    }

    /* Reassurance */
    .reassurance {
        background: var(--yellow);
        position: relative
    }

    .reassurance:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 14%;
        background: linear-gradient(135deg, transparent 48%, rgba(10, 27, 38, .08) 49%, rgba(10, 27, 38, .08) 51%, transparent 52%);
        background-size: 18px 18px;
    }

    .trust-item {
        padding: 28px 22px;
        border-right: 1px solid rgba(10, 27, 38, .14);
        height: 100%
    }

    .trust-item:last-child {
        border-right: 0
    }

    .trust-icon {
        font-size: 1.35rem;
        margin-bottom: 9px;
        color: var(--navy)
    }

    .trust-item h3 {
        font-family: var(--display);
        font-size: 1.4rem;
        text-transform: uppercase;
        margin: 0;
        line-height: 1
    }

    .trust-item p {
        font-size: .72rem;
        margin: 7px 0 0;
        line-height: 1.5;
        color: rgba(10, 27, 38, .72)
    }

    /* Standard sections */
    .section {
        padding: 105px 0
    }

    .section-header {
        margin-bottom: 55px
    }

    .section-header .eyebrow {
        color: var(--navy)
    }

    .section-header .eyebrow:before {
        background: var(--yellow)
    }

    .section-header p {
        margin: 22px 0 0;
        max-width: 680px;
        color: #687983
    }

    /* Project categories */
    .projects-section {
        background: #fff
    }

    .project-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 16px
    }

    .project-tile {
        position: relative;
        min-height: 235px;
        padding: 27px;
        color: #fff;
        overflow: hidden;

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        transition: .25s ease;
    }

    .project-tile:nth-child(1) {
        grid-column: span 4;
        min-height: 310px;
        background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTBL3A_ClTkTIkk5uVqs3HMWFLL64GH2dQALfA-tzRnw&s=10');
        background-size: cover;
        background-position: center;
    }

    .project-tile:nth-child(2) {
        grid-column: span 4;
        min-height: 310px;
        background: url('https://edito.seloger.com/sites/default/files/styles/735x412/public/images/web/2023-06/renover-maison-travaux-seloger.jpg?itok=M9WJWXZR');
        background-size: cover;
        background-position: center;
    }

    .project-tile:nth-child(3) {
        grid-column: span 4;
        min-height: 310px;
        background: url('https://www.etude-et-bilan-thermique.fr/media/blog/legacy/6d4d86c0cd008cdf.jpg');
        background-size: cover;
        background-position: center;
    }

    .project-tile:nth-child(4) {
        grid-column: span 4;
        min-height: 310px;
        background: url('https://www.pilotravo.com/public/img/medium/e8e7cc121aeb44209edafa9c3d483dcapng_694e491e7028e1.47546900.png');
        background-size: cover;
        background-position: center;
    }

    .project-tile:nth-child(5) {
        grid-column: span 4;
        min-height: 310px;
        background: url('https://www.deco.fr/sites/default/files/styles/1920px/public/2020-04/shutterstock_220534573.jpg');
        background-size: cover;
        background-position: center;
    }

    .project-tile:nth-child(6) {
        grid-column: span 4;
        min-height: 310px;
        background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyJP4s0jvtcFinOhEKY2Gqq8C7it8vg3R1Ks28EwoQIQ&s=10');
        background-size: cover;
        background-position: center;
    }

    .project-tile::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg,
                rgba(10, 27, 38, .15) 0%,
                rgba(10, 27, 38, .35) 45%,
                rgba(10, 27, 38, .92) 100%);
        z-index: 0;
    }

    .project-tile:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow)
    }

    .project-tile>* {
        position: relative;
        z-index: 2;
    }

    .project-icon {
        position: absolute;
        top: 24px;
        left: 26px;
        color: var(--yellow);
        font-size: 1.8rem;
        z-index: 1
    }

    .project-tile h3 {
        font-family: var(--display);
        font-size: 2.15rem;
        text-transform: uppercase;
        line-height: .9;
        margin: 0 0 9px;
        position: relative;
        z-index: 1
    }

    .project-tile p {
        font-size: .76rem;
        color: rgba(255, 255, 255, .66);
        margin: 0;
        position: relative;
        z-index: 1;
        max-width: 330px
    }

    .project-note {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 30px;
        padding: 20px 23px;
        border-left: 5px solid var(--yellow);
        background: var(--paper);
        font-size: .83rem;
    }

    .project-note i {
        font-size: 1.25rem;
        color: var(--yellow);
        background: var(--navy);
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 50%
    }

    /* Scale section */
    .scale-section {
        background: var(--navy);
        color: #fff;
        overflow: hidden;
        position: relative
    }

    .scale-section:before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .6;
        background-size: 60px 60px;
    }

    .scale-content {
        position: relative;
        z-index: 1
    }

    .scale-section .section-title {
        color: #fff
    }

    .scale-section .lead-copy {
        color: rgba(255, 255, 255, .65)
    }

    .scale-list {
        margin-top: 45px
    }

    .scale-item {
        border-top: 1px solid rgba(255, 255, 255, .15);
        padding: 27px 0;
        display: grid;
        grid-template-columns: 90px 1fr 1.1fr;
        gap: 30px;
        align-items: center;
    }

    .scale-item:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, .15)
    }

    .scale-no {
        font-family: var(--display);
        font-size: 2rem;
        color: var(--yellow)
    }

    .scale-item h3 {
        font-family: var(--display);
        font-size: 2rem;
        text-transform: uppercase;
        margin: 0;
        line-height: .9
    }

    .scale-item p {
        font-size: .78rem;
        color: rgba(255, 255, 255, .58);
        margin: 0
    }

    .scale-tag {
        display: inline-block;
        margin-top: 8px;
        font-size: .61rem;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--yellow);
        font-weight: 800;
    }

    /* How it works */
    .steps-section {
        background: #fff
    }

    .steps {
        position: relative
    }

    .steps:before {
        content: "";
        position: absolute;
        left: 8.5%;
        right: 8.5%;
        top: 47px;
        height: 1px;
        background: linear-gradient(90deg, var(--yellow), rgba(10, 27, 38, .18), var(--yellow));
    }

    .step {
        text-align: center;
        position: relative;
        padding: 0 22px
    }

    .step-circle {
        width: 94px;
        height: 94px;
        margin: 0 auto 28px;
        border: 8px solid var(--paper);
        background: var(--navy);
        color: var(--yellow);
        display: grid;
        place-items: center;
        font-family: var(--display);
        font-size: 2rem;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        box-shadow: 0 0 0 1px rgba(10, 27, 38, .15);
    }

    .step h3 {
        font-family: var(--display);
        font-size: 1.95rem;
        text-transform: uppercase;
        line-height: .9;
        margin-bottom: 10px
    }

    .step p {
        font-size: .76rem;
        color: #71808a;
        max-width: 280px;
        margin: auto
    }

    /* Transparency */
    .transparency {
        background: var(--paper)
    }

    .statement-box {
        background: var(--yellow);
        padding: 55px;
        position: relative;
        overflow: hidden
    }

    .statement-box:after {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -90px;
        width: 280px;
        height: 280px;
        border: 1px solid rgba(10, 27, 38, .2);
        border-radius: 50%;
    }

    .statement-box h2 {
        font-family: var(--display);
        font-size: clamp(2.7rem, 5vw, 5rem);
        text-transform: uppercase;
        line-height: .88;
        max-width: 780px;
        margin: 0 0 20px
    }

    .statement-box p {
        max-width: 720px;
        color: rgba(10, 27, 38, .7)
    }

    .roles {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        margin-top: 30px;
        border-top: 1px solid rgba(10, 27, 38, .2)
    }

    .role {
        padding: 16px 20px 0 0;
        margin-right: 20px;
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em
    }

    /* CTA */
    .mid-cta {
        padding: 80px 0;
        background: #fff
    }

    .cta-panel {
        background: var(--navy);
        color: #fff;
        padding: 65px 70px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }

    .cta-panel:before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        border: 1px solid rgba(255, 196, 0, .24);
        border-radius: 50%;
        right: -80px;
        top: -130px;
    }

    .cta-panel h2 {
        font-family: var(--display);
        font-size: clamp(2.7rem, 5vw, 4.8rem);
        line-height: .88;
        text-transform: uppercase;
        margin: 0 0 16px
    }

    .cta-panel p {
        color: rgba(255, 255, 255, .62);
        max-width: 670px;
        margin: 0
    }

    .cta-panel .btn-brand {
        flex: 0 0 auto;
        position: relative;
        z-index: 1
    }

    /* FAQ */
    .faq-section {
        background: var(--paper)
    }

    .accordion-item {
        border: 0;
        border-bottom: 1px solid var(--line);
        background: transparent;
        border-radius: 0 !important
    }

    .accordion-button {
        background: transparent !important;
        box-shadow: none !important;
        color: var(--navy) !important;
        font-family: var(--display);
        font-size: 1.65rem;
        text-transform: uppercase;
        padding: 25px 5px;
    }

    .accordion-button:not(.collapsed) {
        color: var(--navy) !important
    }

    .accordion-button:after {
        background-size: 14px
    }

    .accordion-body {
        padding: 0 55px 25px 5px;
        color: #6e7d85;
        font-size: .82rem;
        max-width: 820px
    }

    /* Bottom CTA */
    .bottom-cta {
        padding: 105px 0;
        background: var(--yellow);
        position: relative;
        overflow: hidden
    }

    .bottom-cta:before,
    .bottom-cta:after {
        content: "";
        position: absolute;
        border: 1px solid rgba(10, 27, 38, .18);
        border-radius: 50%;
    }

    .bottom-cta:before {
        width: 330px;
        height: 330px;
        left: -130px;
        top: -130px
    }

    .bottom-cta:after {
        width: 230px;
        height: 230px;
        right: -90px;
        bottom: -100px
    }

    .bottom-cta-inner {
        text-align: center;
        position: relative;
        z-index: 1
    }

    .bottom-cta h2 {
        font-family: var(--display);
        font-size: clamp(3.4rem, 7vw, 7rem);
        line-height: .82;
        text-transform: uppercase;
        margin: 0 0 22px
    }

    .bottom-cta p {
        max-width: 650px;
        margin: 0 auto 30px;
        color: rgba(10, 27, 38, .7)
    }

    .bottom-cta .btn-brand {
        background: var(--navy);
        color: #fff;
        box-shadow: 8px 8px 0 rgba(10, 27, 38, .14)
    }

    .bottom-cta .btn-brand:hover {
        background: #173342;
        color: #fff
    }

    /* Footer */
    footer {
        background: var(--navy);
        color: #fff;
        padding: 70px 0 25px
    }

    .footer-brand {
        font-family: var(--display);
        font-size: 2.3rem;
        text-transform: uppercase;
        line-height: .85;
        margin-bottom: 18px
    }

    .footer-brand span {
        color: var(--yellow)
    }

    .footer-copy {
        font-size: .72rem;
        color: rgba(255, 255, 255, .48);
        max-width: 370px
    }

    .footer-title {
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--yellow);
        margin-bottom: 17px
    }

    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0
    }

    .footer-links li {
        margin-bottom: 8px
    }

    .footer-links a {
        color: rgba(255, 255, 255, .62);
        font-size: .72rem;
        transition: .2s
    }

    .footer-links a:hover {
        color: var(--yellow)
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, .1);
        margin-top: 50px;
        padding-top: 20px;
        color: rgba(255, 255, 255, .35);
        font-size: .63rem;
        display: flex;
        justify-content: space-between;
        gap: 20px
    }

    /* Back to top / toast */
    .back-top {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 45px;
        height: 45px;
        z-index: 900;
        background: var(--yellow);
        color: var(--navy);
        border: 0;
        display: grid;
        place-items: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: .2s;
    }

    .back-top.show {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .toast-wrap {
        position: fixed;
        right: 20px;
        bottom: 78px;
        z-index: 2000
    }

    .custom-toast {
        border-radius: 0;
        border-top: 4px solid var(--yellow);
        box-shadow: var(--shadow)
    }

    /* Responsive */
    @media (max-width:1199px) {
        .hero h1 {
            font-size: 5.7rem
        }

        .hero-visual {
            min-height: 590px
        }

        .worker-photo {
            inset: 55px 0 0 5%
        }

        .visual-frame {
            inset: 35px -4% 12px 0
        }
    }

    @media (max-width:991px) {
        .navbar {
            min-height: 70px
        }

        .navbar-collapse {
            background: var(--navy);
            padding: 15px 0 22px
        }

        .header-cta {
            margin: 10px 15px
        }

        .hero {
            padding-top: 108px
        }

        .hero-copy {
            padding-right: 0
        }

        .hero h1 {
            font-size: clamp(4.3rem, 11vw, 6.5rem)
        }

        .hero-visual {
            min-height: 500px;
            margin-top: 10px
        }

        .hero-form-wrap {
            margin-top: 0
        }

        .project-tile:nth-child(n) {
            grid-column: span 6;
            min-height: 240px
        }

        .project-tile:nth-child(1) {
            min-height: 270px
        }

        .scale-item {
            grid-template-columns: 70px 1fr
        }

        .scale-item p {
            grid-column: 2
        }

        .cta-panel {
            padding: 50px
        }

        .trust-item {
            border-right: 0;
            border-bottom: 1px solid rgba(10, 27, 38, .14)
        }

        .trust-item:nth-child(odd) {
            border-right: 1px solid rgba(10, 27, 38, .14)
        }
    }

    @media (max-width:767px) {
        .section {
            padding: 72px 0
        }

        .hero {
            padding-bottom: 45px
        }

        .hero-copy {
            padding-top: 25px
        }

        .hero h1 {
            font-size: clamp(3.5rem, 16vw, 5.4rem)
        }

        .hero-text {
            font-size: .88rem
        }

        .hero-visual {
            min-height: 400px
        }

        .worker-photo {
            inset: 30px 3% 0 9%
        }

        .visual-frame {
            inset: 15px -2% 5px 3%;
            border-width: 5px
        }

        .blueprint-note {
            width: 165px;
            padding: 13px 14px;
            bottom: 10px
        }

        .blueprint-note b {
            font-size: 1.3rem
        }

        .form-card {
            padding: 24px 19px
        }

        .form-card h2 {
            font-size: 2.2rem
        }

        .trust-item {
            padding: 22px 15px
        }

        .trust-item:nth-child(odd) {
            border-right: 0
        }

        .project-grid {
            display: block
        }

        .project-tile,
        .project-tile:nth-child(1) {
            min-height: 225px;
            margin-bottom: 12px
        }

        .scale-item {
            grid-template-columns: 55px 1fr;
            gap: 15px
        }

        .scale-item h3 {
            font-size: 1.65rem
        }

        .steps:before {
            display: none
        }

        .step {
            margin-bottom: 42px
        }

        .step:last-child {
            margin-bottom: 0
        }

        .statement-box {
            padding: 34px 25px
        }

        .cta-panel {
            padding: 40px 27px;
            display: block
        }

        .cta-panel .btn-brand {
            margin-top: 28px;
            width: 100%
        }

        .accordion-button {
            font-size: 1.35rem;
            padding: 21px 0
        }

        .accordion-body {
            padding-left: 0
        }

        .bottom-cta {
            padding: 75px 0
        }

        .footer-bottom {
            display: block
        }

        .footer-bottom span {
            display: block;
            margin-bottom: 8px
        }
    }

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

        *,
        *:before,
        *:after {
            transition: none !important;
            animation: none !important
        }
    }

        {
        --yellow: #ffc400;
        --navy: #0a1b26;
        --paper: #f5f4ef;
        --ink: #172630;
        --muted: #71808a;
        --line: rgba(10, 27, 38, .13);
        --display: "Barlow Condensed", sans-serif;
        --body: "Manrope", sans-serif
    }

    .container-xl {
        max-width: 1240px
    }

    .btn-brand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 48px;
        padding: 0 23px;
        border: 0;
        border-radius: 2px;
        background: var(--yellow);
        color: var(--navy);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 0.75rem;
        box-shadow: 7px 7px 0 rgba(10, 27, 38, .13);
        transition: 0.2s
    }

    .btn-brand:hover {
        background: #ffd633;
        color: var(--navy);
        transform: translate(-2px, -2px)
    }

    .blueprint {
        background-color: var(--navy);
        background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(rgba(255, 196, 0, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 196, 0, 0.025) 1px, transparent 1px);
        background-size: 56px 56px, 56px 56px, 14px 14px, 14px 14px
    }

    .page-hero {
        padding: 95px 0 75px;
        color: #fff;
        position: relative;
        overflow: hidden
    }

    .page-hero:after {
        content: "";
        position: absolute;
        right: -9vw;
        top: -22vw;
        width: 48vw;
        height: 48vw;
        border: 1px solid rgba(255, 196, 0, .2);
        border-radius: 50%
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--yellow)
    }

    .eyebrow:before {
        content: "";
        width: 28px;
        height: 3px;
        background: var(--yellow)
    }

    .page-hero h1 {
        font-family: var(--display);
        font-weight: 700;
        text-transform: uppercase;
        font-size: clamp(3.6rem, 7vw, 7rem);
        line-height: .84;
        margin: 18px 0 0;
        position: relative;
        z-index: 1
    }

    .page-hero h1 span {
        color: var(--yellow)
    }

    .page-hero p {
        max-width: 720px;
        color: rgba(255, 255, 255, .65);
        font-size: 0.9rem;
        margin: 25px 0 0;
        position: relative;
        z-index: 1
    }

    .legal-section {
        padding: 75px 0 100px
    }

    .legal-layout {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 65px;
        align-items: start
    }

    .legal-nav {
        position: sticky;
        top: 110px;
        border-left: 4px solid var(--yellow);
        padding-left: 20px
    }

    .legal-nav small {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 800;
        color: #7b898f;
        font-size: 0.62rem;
        margin-bottom: 12px
    }

    .legal-nav a {
        display: block;
        color: #4e5d65;
        font-size: 0.75rem;
        font-weight: 700;
        margin: 8px 0
    }

    .legal-nav a:hover {
        color: var(--navy)
    }

    .legal-content {
        background: #fff;
        border: 1px solid var(--line);
        padding: 50px 55px
    }

    .legal-content h2 {
        font-family: var(--display);
        font-size: 2.25rem;
        line-height: .95;
        text-transform: uppercase;
        margin: 42px 0 14px;
        color: var(--navy)
    }

    .legal-content h2:first-child {
        margin-top: 0
    }

    .legal-content h3 {
        font-size: 1rem;
        font-weight: 800;
        margin: 25px 0 8px;
        color: var(--navy)
    }

    .legal-content p,
    .legal-content li {
        font-size: 0.82rem;
        color: #65757d
    }

    .legal-content ul {
        padding-left: 20px
    }

    @media(max-width:767px) {
        .page-hero {
            padding: 65px 0 55px
        }

        .page-hero h1 {
            font-size: clamp(3.4rem, 16vw, 5.3rem)
        }

        .legal-section {
            padding: 45px 0 70px
        }

        .legal-content {
            padding: 30px 22px
        }
    }


    meta-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--line);
        border: 1px solid var(--line);
        margin: 20px 0 35px
    }

    .meta-box div {
        background: var(--paper);
        padding: 17px 18px
    }

    .meta-box strong {
        display: block;
        font-size: .63rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #78868d;
        margin-bottom: 3px
    }

    .meta-box span {
        font-size: .77rem;
        color: var(--navy);
        font-weight: 700
    }