@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root {
    --black:#111111;
    --dark:#181818;
    --charcoal:#242424;
    --cream:#F5F2EC;
    --orange:#F47B20;
    --white:#fff;
    --gray:#777;
    --line:rgba(17,17,17,.16);
    --display:'Space Grotesk',sans-serif;
    --body:'DM Sans',sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--cream);
    color:var(--black);
    font-family:var(--body);
    font-size:16px;
    line-height:1.5
}

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

img {
    display:block;
    width:100%;
    object-fit:cover
}

.container {
    width:min(1240px,calc(100% - 80px));
    margin:auto
}

.skip-link {
    position:absolute;
    left:-9999px
}

.skip-link:focus {
    left:20px;
    top:20px;
    background:var(--orange);
    padding:12px;
    z-index:20
}

.site-header {
    position:fixed;
    z-index:10;
    inset:0 0 auto;
    color:#fff;
    transition:.35s ease
}

.site-header.scrolled {
    background:rgba(17,17,17,.88);
    backdrop-filter:blur(16px);
    box-shadow:0 8px 30px #0002
}

.nav-wrap {
    height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}

.brand {
    display:flex;
    align-items:center;
    gap:9px;
    font-family:var(--display);
    font-weight:700;
    letter-spacing:.08em;
    font-size:18px
}

.brand b {
    font-size:25px;
    letter-spacing:-.08em
}

.brand span {
    font-size:12px
}

.desktop-nav {
    display:flex;
    gap:25px;
    margin-left:auto
}

.desktop-nav a,.phone-link {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.13em;
    font-weight:700
}

.desktop-nav a {
    opacity:.72;
    transition:.2s
}

.desktop-nav a:hover {
    opacity:1;
    color:var(--orange)
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:22px
}

.button {
    display:inline-flex;
    align-items:center;
    gap:30px;
    border:0;
    background:var(--orange);
    color:var(--black);
    padding:17px 20px;
    font:700 11px var(--body);
    letter-spacing:.11em;
    text-transform:uppercase;
    transition:transform .25s,background .25s
}

.button:hover {
    transform:translateY(-3px);
    background:#ff9847
}

.button span {
    font-size:20px;
    line-height:10px
}

.button-small {
    padding:13px 16px;
    gap:17px
}

.menu-toggle {
    display:none;
    border:0;
    background:none;
    color:#fff;
    width:35px
}

.menu-toggle i {
    height:2px;
    background:currentColor;
    display:block;
    margin:6px 0
}

.mobile-nav {
    display:none
}

.hero {
    min-height:94vh;
    color:#fff;
    position:relative;
    display:flex;
    align-items:flex-end;
    padding:150px 0 76px;
    background:linear-gradient(90deg,#111d 0%,#1119 47%,#1112),url('https://images.unsplash.com/photo-1603796846097-4a6c8c0d0f85?auto=format&fit=crop&w=2200&q=90') center/cover;
    overflow:hidden
}

.hero:after {
    content:'01';
    position:absolute;
    right:5%;
    bottom:-45px;
    font:700 clamp(170px,25vw,390px)/.8 var(--display);
    color:#fff0a;
    letter-spacing:-.12em;
    animation:rise 1.2s ease both
}

.hero-content {
    position:relative;
    z-index:1;
    max-width:850px
}

.eyebrow,.section-label {
    color:var(--orange);
    font:700 11px var(--body);
    letter-spacing:.18em;
    text-transform:uppercase
}

.eyebrow:before {
    content:'';
    display:inline-block;
    width:44px;
    height:1px;
    background:var(--orange);
    vertical-align:middle;
    margin-right:14px
}

.hero h1 {
    font:700 clamp(58px,7vw,110px)/.88 var(--display);
    letter-spacing:-.07em;
    text-transform:uppercase;
    margin:24px 0 28px;
    max-width:900px
}

.hero-copy {
    font-size:19px;
    max-width:420px;
    color:#fffb;
    margin-bottom:36px
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:28px
}

.text-link {
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    border-bottom:1px solid #fff;
    padding-bottom:6px
}

.hero-meta {
    display:flex;
    gap:42px;
    position:absolute;
    bottom:76px;
    right:6%;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase
}

.hero-meta span:before {
    content:'—';
    color:var(--orange);
    margin-right:8px
}

.scroll-note {
    position:absolute;
    left:25px;
    bottom:120px;
    writing-mode:vertical-rl;
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#fff8
}

.quote-bar {
    background:var(--dark);
    color:#fff;
    padding:63px 0
}

.quote-grid {
    display:grid;
    grid-template-columns:1fr 2.4fr;
    align-items:center;
    gap:40px
}

.quote-bar h2 {
    font:600 clamp(32px,4vw,57px)/.95 var(--display);
    letter-spacing:-.06em;
    text-transform:uppercase;
    margin:0
}

.quick-form {
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr auto;
    border-bottom:1px solid #fff6;
    gap:12px
}

.quick-form input,.quick-form select {
    background:transparent;
    border:0;
    border-bottom:1px solid #fff5;
    padding:18px 4px;
    color:#fff;
    font:500 14px var(--body);
    min-width:0
}

.quick-form select option {
    color:#111
}

.quick-form .button {
    margin-bottom:10px
}

.section {
    padding:130px 0
}

.intro-grid {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:12%;
    align-items:end
}

.section h2 {
    font:700 clamp(44px,5vw,78px)/.9 var(--display);
    letter-spacing:-.075em;
    text-transform:uppercase;
    margin:18px 0
}

.intro-copy {
    font-size:19px;
    max-width:450px;
    color:#444
}

.orange-rule {
    height:5px;
    background:var(--orange);
    margin:80px 0 36px
}

.manifesto {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px;
    font:700 clamp(33px,5vw,74px)/1 var(--display);
    letter-spacing:-.07em;
    text-transform:uppercase
}

.manifesto span:nth-child(2) {
    color:var(--orange)
}

.services-section {
    background:#fff
}

.service-list {
    margin-top:65px
}

.service-row {
    min-height:125px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:90px 1.1fr 1fr 100px;
    align-items:center;
    gap:25px;
    transition:.35s;
    padding:0 12px
}

.service-row:last-child {
    border-bottom:1px solid var(--line)
}

.service-row:hover {
    background:var(--cream);
    padding-left:28px
}

.service-num {
    font:700 20px var(--display);
    color:var(--orange)
}

.service-row h3 {
    font:700 clamp(25px,3vw,42px)/1 var(--display);
    letter-spacing:-.06em;
    text-transform:uppercase;
    margin:0
}

.service-row p {
    color:var(--gray);
    margin:0
}

.row-image {
    height:78px;
    opacity:0;
    transform:translateX(15px);
    transition:.35s
}

.service-row:hover .row-image {
    opacity:1;
    transform:none
}

.row-arrow {
    font-size:30px;
    text-align:right;
    transition:.3s
}

.service-row:hover .row-arrow {
    color:var(--orange);
    transform:translateX(8px)
}

.featured {
    min-height:720px;
    color:#fff;
    display:flex;
    align-items:flex-end;
    padding:100px 0 75px;
    background:linear-gradient(0deg,#111e,#1111),url('https://images.unsplash.com/photo-1621905252507-b35492cc74b4?auto=format&fit=crop&w=2200&q=88') center/cover
}

.featured h2 {
    font-size:clamp(58px,8vw,120px);
    max-width:800px;
    margin:15px 0 35px
}

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

.feature-list {
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    max-width:500px;
    color:#fffc;
    font-size:13px
}

.feature-list span:before {
    content:'+';
    color:var(--orange);
    margin-right:7px
}

.dark-section {
    background:var(--charcoal);
    color:#fff
}

.timeline {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:80px;
    position:relative
}

.timeline:before {
    content:'';
    position:absolute;
    top:35px;
    left:0;
    right:0;
    height:2px;
    background:var(--orange)
}

.step {
    padding:0 40px 0 0;
    position:relative
}

.step:not(:first-child) {
    padding-left:38px
}

.step-number {
    display:block;
    font:700 clamp(70px,9vw,140px)/.8 var(--display);
    letter-spacing:-.1em;
    color:var(--orange);
    margin-bottom:50px
}

.step h3 {
    font:700 25px var(--display);
    text-transform:uppercase;
    margin:0 0 10px
}

.step p {
    color:#aaa;
    max-width:250px
}

.compare-wrap {
    position:relative;
    margin-top:58px
}

.before-after {
    height:min(60vw,650px);
    position:relative;
    overflow:hidden
}

.before-after img {
    height:100%
}

.before-image,.after-image {
    position:absolute;
    inset:0
}

.after-image {
    width:50%;
    overflow:hidden;
    border-right:2px solid var(--orange)
}

.after-image img {
    width:min(100vw,1240px);
    max-width:none
}

.compare-label {
    position:absolute;
    top:20px;
    background:#111d;
    color:#fff;
    padding:7px 11px;
    font-size:10px;
    letter-spacing:.15em
}

.label-before {
    left:20px
}

.label-after {
    right:20px
}

.before-after input {
    position:absolute;
    inset:0;
    width:100%;
    opacity:0;
    cursor:ew-resize
}

.stats {
    background:var(--black);
    color:#fff;
    padding:90px 0
}

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

.stat {
    border-left:1px solid #fff3;
    padding:0 25px
}

.stat strong {
    display:block;
    color:var(--orange);
    font:700 clamp(48px,6vw,90px)/1 var(--display);
    letter-spacing:-.08em
}

.stat span {
    font-size:11px;
    letter-spacing:.15em
}

.about-band {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:600px;
    background:var(--white)
}

.about-image {
    background:url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1400&q=85') center/cover
}

.about-copy {
    padding:90px max(40px,8vw) 80px
}

.principles {
    margin-top:55px
}

.principles div {
    display:flex;
    gap:30px;
    border-top:1px solid var(--line);
    padding:16px 0;
    font:700 16px var(--display);
    text-transform:uppercase
}

.principles b {
    color:var(--orange)
}

.faq {
    margin-top:55px
}

.faq-item {
    border-top:1px solid var(--line)
}

.faq-item:last-child {
    border-bottom:1px solid var(--line)
}

.faq-question {
    width:100%;
    padding:25px 0;
    background:none;
    border:0;
    display:flex;
    justify-content:space-between;
    text-align:left;
    font:700 20px var(--display);
    text-transform:uppercase;
    cursor:pointer
}

.faq-question span {
    font-size:28px;
    color:var(--orange);
    font-weight:400;
    transition:.3s
}

.faq-question[aria-expanded=true] span {
    transform:rotate(45deg)
}

.faq-answer {
    display:grid;
    grid-template-rows:0fr;
    transition:.35s
}

.faq-answer p {
    overflow:hidden;
    margin:0;
    color:var(--gray);
    max-width:650px
}

.faq-item.open .faq-answer {
    grid-template-rows:1fr
}

.faq-item.open .faq-answer p {
    padding:0 0 25px
}

.final-cta {
    color:#fff;
    padding:140px 0;
    background:linear-gradient(90deg,#111e,#1114),url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2200&q=88') center/cover
}

.final-cta h2 {
    font-size:clamp(58px,8vw,115px);
    max-width:900px;
    margin-bottom:35px
}

.final-cta p:not(.section-label) {
    color:#fffc;
    font-size:18px;
    margin-bottom:35px
}

.page-hero {
    background:var(--black);
    color:#fff;
    padding:190px 0 100px
}

.page-hero h1 {
    font:700 clamp(58px,7vw,100px)/.9 var(--display);
    letter-spacing:-.08em;
    text-transform:uppercase;
    margin:22px 0;
    max-width:900px
}

.page-hero p:not(.section-label) {
    max-width:510px;
    font-size:19px;
    color:#ccc
}

.contact-grid {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:12%;
    align-items:start
}

.contact-grid h2 {
    font-size:clamp(52px,6vw,90px)
}

.contact-details {
    border-top:1px solid var(--line);
    margin-top:50px
}

.contact-details div {
    padding:17px 0;
    border-bottom:1px solid var(--line)
}

.contact-details small {
    display:block;
    color:var(--orange);
    font-size:10px;
    letter-spacing:.13em;
    margin-bottom:4px
}

.form-panel {
    background:#fff;
    padding:45px
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-bottom:32px
}

.form-field.full {
    grid-column:1/-1
}

.form-field label {
    display:block;
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:.14em;
    font-weight:700;
    margin-bottom:8px
}

.form-field input,.form-field select,.form-field textarea {
    width:100%;
    border:0;
    border-bottom:1px solid var(--line);
    background:transparent;
    padding:13px 0;
    font:16px var(--body);
    outline:0
}

.form-field textarea {
    min-height:100px;
    resize:vertical
}

.form-message {
    padding:15px;
    background:#fff0e6;
    border-left:3px solid var(--orange);
    margin-bottom:25px
}

.hp {
    position:absolute;
    left:-9999px
}

.site-footer {
    background:var(--black);
    color:#fff;
    padding:85px 0 25px
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr;
    gap:35px;
    padding-bottom:70px
}

.footer-grid a,.footer-grid span {
    display:block;
    color:#aaa;
    font-size:13px;
    margin:9px 0
}

.footer-intro p {
    color:#aaa;
    max-width:230px
}

.footer-label {
    color:var(--orange)!important;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:10px!important
}

.footer-bottom {
    border-top:1px solid #fff2;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    color:#777;
    font-size:11px
}

.footer-bottom a {
    display:inline;
    margin-left:22px
}

.mobile-cta {
    display:none
}

@keyframes rise {
    from {
        transform:translateY(40px);
        opacity:0
    }

    to {
        transform:none;
        opacity:1
    }

}

@media(max-width:900px) {
    .container {
        width:min(100% - 40px,620px)
    }

    .desktop-nav,.phone-link,.nav-actions .button-small {
        display:none
    }

    .menu-toggle {
        display:block
    }

    .mobile-nav {
        position:fixed;
        inset:0;
        background:var(--black);
        padding:125px 30px 40px;
        display:flex;
        flex-direction:column;
        gap:23px;
        transform:translateX(100%);
        transition:.4s
    }

    .mobile-nav.open {
        transform:none
    }

    .mobile-nav a:not(.button) {
        font:700 35px var(--display);
        text-transform:uppercase;
        letter-spacing:-.05em
    }

    .nav-wrap {
        height:75px
    }

    .hero {
        min-height:100svh;
        padding:130px 0 95px
    }

    .hero h1 {
        font-size:clamp(56px,15vw,90px)
    }

    .hero-meta {
        left:20px;
        right:auto;
        bottom:30px;
        gap:15px
    }

    .scroll-note {
        display:none
    }

    .quote-grid,.intro-grid,.contact-grid {
        grid-template-columns:1fr;
        gap:35px
    }

    .quick-form {
        grid-template-columns:1fr 1fr
    }

    .quick-form .button {
        grid-column:1/-1
    }

    .section {
        padding:85px 0
    }

    .manifesto {
        flex-direction:column;
        gap:7px
    }

    .service-row {
        grid-template-columns:42px 1fr 35px;
        min-height:110px;
        gap:12px
    }

    .service-row p {
        display:none
    }

    .row-image {
        display:none
    }

    .timeline,.stats-grid {
        grid-template-columns:1fr 1fr;
        gap:45px 25px
    }

    .timeline:before {
        display:none
    }

    .step,.step:not(:first-child) {
        padding:0
    }

    .step-number {
        margin-bottom:25px
    }

    .about-band {
        grid-template-columns:1fr
    }

    .about-image {
        min-height:390px
    }

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

    .footer-intro {
        grid-column:1/-1
    }

    .mobile-cta {
        display:grid;
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        z-index:8;
        grid-template-columns:1fr 1fr;
        background:#fff;
        box-shadow:0 -3px 15px #0002
    }

    .mobile-cta a {
        padding:17px;
        text-align:center;
        font-size:11px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.1em
    }

    .mobile-cta a+ a {
        background:var(--orange)
    }

    .final-cta {
        padding:95px 0
    }

    .form-panel {
        padding:25px
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .form-field.full {
        grid-column:auto
    }

    .page-hero {
        padding:145px 0 75px
    }

    .page-hero h1 {
        font-size:clamp(55px,14vw,90px)
    }

}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important
    }

}

@media(min-width:901px) {
    body {
        font-size:18px;
        line-height:1.6
    }

    .hero h1 {
        font-size:clamp(72px,7vw,96px);
        line-height:1
    }

    .section h2 {
        font-size:clamp(48px,5vw,72px);
        line-height:1.05
    }

    .page-hero h1 {
        font-size:clamp(56px,7vw,80px);
        line-height:1.02
    }

    .quote-bar h2 {
        font-size:clamp(36px,4vw,52px);
        line-height:1.05
    }

    .featured h2,.final-cta h2 {
        font-size:clamp(64px,8vw,110px);
        line-height:1
    }

    .service-row h3 {
        font-size:clamp(22px,2.2vw,30px);
        line-height:1.08
    }

    .service-row p,.intro-copy,.page-hero p:not(.section-label) {
        font-size:clamp(17px,1.4vw,19px);
        line-height:1.6
    }

    .step h3 {
        font-size:clamp(22px,2vw,28px)
    }

    .step p {
        font-size:16px;
        line-height:1.6
    }

    .faq-question {
        font-size:clamp(18px,1.6vw,22px)
    }

    .button {
        font-size:clamp(15px,1.2vw,17px)
    }

    .desktop-nav a,.phone-link {
        font-size:14px
    }

    .text-link {
        font-size:14px
    }

    .eyebrow,.section-label {
        font-size:13px
    }

    .hero-meta,.scroll-note {
        font-size:12px
    }

    .feature-list {
        font-size:16px
    }

    .principles div {
        font-size:18px
    }

    .footer-grid a,.footer-grid span {
        font-size:15px
    }

    .footer-bottom {
        font-size:14px
    }

    .footer-label,.contact-details small {
        font-size:12px
    }

}

@media(max-width:900px) {
    body {
        font-size:16px;
        line-height:1.6
    }

    .hero h1 {
        font-size:clamp(44px,14vw,56px);
        line-height:1.02
    }

    .section h2,.featured h2,.final-cta h2 {
        font-size:clamp(36px,10vw,46px);
        line-height:1.06
    }

    .page-hero h1 {
        font-size:clamp(44px,13vw,56px);
        line-height:1.04
    }

    .quote-bar h2 {
        font-size:clamp(30px,8vw,40px);
        line-height:1.08
    }

    .service-row h3 {
        font-size:clamp(22px,6vw,28px);
        line-height:1.1
    }

    .service-row p,.intro-copy,.page-hero p:not(.section-label),.step p {
        font-size:16px;
        line-height:1.6
    }

    .step h3 {
        font-size:clamp(20px,5vw,26px)
    }

    .faq-question {
        font-size:clamp(18px,5vw,22px);
        line-height:1.3
    }

    .button {
        font-size:16px
    }

    .mobile-nav a:not(.button) {
        font-size:clamp(20px,7vw,35px)
    }

    .eyebrow,.section-label {
        font-size:14px
    }

    .hero-meta,.scroll-note {
        font-size:14px
    }

    .feature-list {
        font-size:15px
    }

    .principles div {
        font-size:16px
    }

    .footer-grid a,.footer-grid span {
        font-size:14px
    }

    .footer-bottom {
        font-size:14px
    }

    .footer-label,.contact-details small {
        font-size:14px
    }

    .form-field label {
        font-size:14px
    }

    .quick-form input,.quick-form select,.form-field input,.form-field select,.form-field textarea {
        font-size:16px
    }

}

@media(min-width:901px) {
    .desktop-nav a,.phone-link {
        font-size:15px
    }

    .button {
        font-size:16px;
        line-height:1.1
    }

    .eyebrow,.section-label {
        font-size:14px;
        line-height:1.3
    }

    .hero-meta,.scroll-note {
        font-size:14px
    }

    .stat span {
        font-size:14px
    }

    .form-field label {
        font-size:15px;
        line-height:1.3
    }

    .form-field input,.form-field select,.form-field textarea {
        font-size:18px;
        line-height:1.6
    }

    .form-field input::placeholder,.form-field textarea::placeholder {
        font-size:18px
    }
}

@media(max-width:900px) {
    body {
        font-size:17px;
        line-height:1.6
    }

    .button {
        font-size:17px;
        line-height:1.1
    }

    .eyebrow,.section-label {
        font-size:14px;
        line-height:1.3
    }

    .stat span {
        font-size:14px
    }

    .mobile-cta a {
        font-size:15px;
        line-height:1.2
    }

    .form-field label {
        font-size:15px;
        line-height:1.3
    }

    .form-field input,.form-field select,.form-field textarea {
        font-size:18px;
        line-height:1.6
    }

    .form-field input::placeholder,.form-field textarea::placeholder {
        font-size:18px
    }
}