:root {

    --black: #0b0b0b;

    --charcoal: #151515;

    --ink: #202020;

    --paper: #f5f2eb;

    --white: #fff;

    --yellow: #f5b800;

    --line: #d8d3c9;

    --muted: #6b6b67;

    --wrap: 1180px;

    --serif: Georgia, 'Times New Roman', serif;

    --sans: Arial, Helvetica, sans-serif
}

* {

    box-sizing: border-box
}

html {

    scroll-behavior: smooth
}

body {

    margin: 0;

    background: var(--paper);

    color: var(--ink);

    font-family: var(--sans);

    font-size: 16px;

    line-height: 1.65
}

body.menu-open {

    overflow: hidden
}

img {

    display: block;

    max-width: 100%;

    height: auto
}

a {

    color: inherit;

    text-decoration: none
}

button,

input,

select,

textarea {

    font: inherit
}

.wrap {

    width: min(var(--wrap), calc(100% - 48px));

    margin-inline: auto
}

.skip-link {

    position: fixed;

    top: -80px;

    left: 16px;

    z-index: 1000;

    background: var(--yellow);

    color: #000;

    padding: 12px 18px;

    font-weight: 700
}

.skip-link:focus {

    top: 16px
}

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0
}

.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

    background: rgba(11, 11, 11, .98);

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.header-inner {

    height: 86px;

    display: flex;

    align-items: center;

    gap: 32px
}

.brand {

    width: 166px;

    margin-right: auto
}

.brand img {

    width: 100%;

    height: 64px;

    object-fit: contain
}

.main-nav {

    display: flex;

    align-items: center;

    gap: 28px
}

.main-nav a {

    font-size: .78rem;

    text-transform: uppercase;

    letter-spacing: .08em;

    padding: 31px 0 25px;

    border-bottom: 2px solid transparent
}

.main-nav a:hover,

.main-nav a.is-active {

    color: var(--yellow);

    border-color: var(--yellow)
}

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-height: 52px;

    padding: 13px 22px;

    background: var(--yellow);

    color: #111;

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

    font-size: .78rem;

    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: .06em;

    cursor: pointer;

    transition: .2s ease
}

.button:hover {

    background: #ffd033;

    border-color: #ffd033;

    transform: translateY(-2px)
}

.button-small {

    min-height: 44px;

    padding: 11px 16px
}

.button-outline {

    background: transparent;

    color: #fff;

    border-color: rgba(255, 255, 255, .65)
}

.button-outline:hover {

    background: #fff;

    color: #111;

    border-color: #fff
}

.button-dark {

    background: var(--black);

    border-color: var(--black);

    color: #fff
}

.button-dark:hover {

    background: var(--yellow);

    border-color: var(--yellow);

    color: #111
}

.menu-toggle {

    display: none;

    background: none;

    border: 0;

    width: 44px;

    height: 44px;

    padding: 10px
}

.menu-toggle span:not(.sr-only) {

    display: block;

    height: 2px;

    background: #fff;

    margin: 5px 0
}

.hero {

    position: relative;

    min-height: calc(100svh - 86px);

    display: flex;

    align-items: center;

    color: #fff;

    overflow: hidden
}

.hero-image,

.hero-shade {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover
}

.hero-shade {

    background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .46) 48%, rgba(0, 0, 0, .05) 78%)
}

.hero-content {

    position: relative;

    z-index: 1;

    padding-block: 90px
}

.hero h1,

.page-hero h1,

.not-found h1 {

    font: 400 clamp(3.2rem, 6vw, 6rem)/.94 var(--serif);

    letter-spacing: -.045em;

    max-width: 760px;

    margin: 22px 0
}

.hero p {

    font-size: 1.15rem;

    max-width: 570px;

    margin: 0 0 34px
}

.hero-actions {

    display: flex;

    gap: 14px;

    flex-wrap: wrap
}

.eyebrow {

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--yellow);

    font-size: .75rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .14em
}

.eyebrow:before {

    content: '';

    width: 34px;

    height: 2px;

    background: currentColor
}

.eyebrow\.dark {

    color: #7a5800
}

.section {

    padding: 110px 0
}

.split {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: start
}

.section h2,

.closing-cta h2 {

    font: 400 clamp(2.5rem, 4vw, 4.3rem)/1 var(--serif);

    letter-spacing: -.035em;

    margin: 22px 0
}

.lead {

    font-size: 1.25rem;

    line-height: 1.5
}

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 20px;

    padding-bottom: 4px;

    border-bottom: 1px solid currentColor;

    font-size: .8rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .06em
}

.text-link:hover {

    color: #8a6200
}

.text-link.light:hover {

    color: var(--yellow)
}

.services-preview {

    background: #fff
}

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 48px
}

.section-heading h2 {

    margin: 0
}

.service-grid {

    display: grid;

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

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

    margin-bottom: 30px
}

.service-grid-four {

    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.service-grid article {

    padding: 42px 34px 45px 0;

    border-right: 1px solid var(--line)
}

.service-grid article+article {

    padding-left: 34px
}

.service-grid article:last-child {

    border-right: 0
}

.service-grid span,

.stack-list>article>span {

    color: #8a6200;

    font-size: .8rem;

    font-weight: 800
}

.service-grid h3 {

    font: 400 2rem/1.1 var(--serif);

    margin: 24px 0 14px
}

.featured-project {

    position: relative;

    min-height: 650px;

    color: #fff;

    display: flex;

    align-items: end
}

.featured-project>img,

.project-shade {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover
}

.project-shade {

    background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .05) 65%)
}

.project-caption {

    position: relative;

    z-index: 1;

    padding-block: 80px
}

.project-caption h2 {

    font: 400 clamp(2.8rem, 5vw, 5rem)/1 var(--serif);

    margin: 18px 0
}

.project-caption p {

    max-width: 500px
}

.process-grid {

    display: grid;

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

    list-style: none;

    margin: 0;

    padding: 0;

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

.process-grid li {

    padding: 34px 34px 0 0
}

.process-grid li+li {

    padding-left: 34px;

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

.process-grid span {

    font: 400 1.7rem var(--serif)
}

.process-grid h3 {

    font: 400 1.75rem var(--serif);

    margin: 18px 0 4px
}

.faq-preview {

    background: #fff
}

.faq-list details,

.faq-page details {

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

.faq-list details:last-child,

.faq-page details:last-child {

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

summary {

    cursor: pointer;

    list-style: none;

    padding: 24px 42px 24px 0;

    font: 400 1.25rem/1.3 var(--serif);

    position: relative
}

summary::-webkit-details-marker {

    display: none
}

summary:after {

    content: '+';

    position: absolute;

    right: 4px;

    font: 400 1.4rem var(--sans)
}

details[open] summary:after {

    content: '−'

}

details p {

    padding: 0 45px 23px 0;

    margin: 0
}

.page-hero {

    background: var(--black);

    color: #fff;

    padding: 72px 0 82px
}

.page-hero.compact {

    padding-bottom: 58px
}

.page-hero h1 {

    font-size: clamp(3rem, 5vw, 5rem)
}

.page-hero p {

    max-width: 650px;

    font-size: 1.15rem
}

.breadcrumbs {

    display: flex;

    gap: 11px;

    align-items: center;

    margin-bottom: 52px;

    font-size: .8rem;

    color: #c6c6c6
}

.breadcrumbs a:hover {

    color: var(--yellow)
}

.tone-dark {

    background: var(--charcoal);

    color: #fff
}

.values-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0;

    border-top: 1px solid #444
}

.values-grid article {

    padding: 38px 50px 35px 0;

    border-bottom: 1px solid #444
}

.values-grid article:nth-child(even) {

    padding-left: 50px;

    border-left: 1px solid #444
}

.values-grid h3 {

    font: 400 1.8rem var(--serif);

    margin: 0 0 10px
}

.stack-list>article {

    display: grid;

    grid-template-columns: 120px 1fr;

    gap: 30px;

    padding: 45px 0;

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

.stack-list>article:last-child {

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

.stack-list h2 {

    font-size: clamp(2rem, 3vw, 3.2rem);

    margin: 0 0 12px
}

.stack-list p {

    max-width: 720px
}

.project-detail {

    display: grid;

    grid-template-columns: 1.45fr .75fr;

    gap: 60px;

    align-items: center
}

.project-detail img {

    width: 100%;

    min-height: 520px;

    object-fit: cover
}

.project-detail h2 {

    font-size: 3.5rem
}

.faq-page {

    max-width: 900px
}

.faq-page summary {

    font-size: 1.55rem;

    padding-block: 29px
}

.contact-grid {

    display: grid;

    grid-template-columns: .65fr 1.35fr;

    gap: 100px
}

.contact-grid aside>a,

.contact-grid aside>p {

    display: block;

    margin: 8px 0
}

.contact-grid aside h2 {

    font-size: 3rem
}

.commitment {

    border-top: 2px solid var(--yellow);

    margin-top: 45px;

    padding-top: 22px
}

.contact-form {

    background: #fff;

    padding: 48px
}

.field-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px
}

.field {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 22px
}

.field label {

    font-size: .82rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .04em
}

.field input,

.field select,

.field textarea {

    width: 100%;

    border: 1px solid #c8c5be;

    background: #fff;

    padding: 13px 14px;

    color: #111;

    border-radius: 0
}

.field input:focus,

.field select:focus,

.field textarea:focus {

    outline: 3px solid rgba(245, 184, 0, .3);

    border-color: #8a6200
}

.check {

    display: flex;

    gap: 12px;

    align-items: start;

    margin: 0 0 25px
}

.check input {

    margin-top: 6px
}

.check a {

    text-decoration: underline
}

.hp {

    position: absolute;

    left: -9999px
}

.form-error {

    background: #fff1ee;

    border-left: 4px solid #a62c1f;

    padding: 17px 20px;

    margin-bottom: 24px
}

.form-error ul {

    margin-bottom: 0
}

.legal {

    max-width: 850px
}

.legal h2 {

    font-size: 1.8rem;

    margin-top: 45px
}

.result-page {

    padding: 140px 0;

    text-align: center;

    min-height: 65vh
}

.result-page .wrap {

    max-width: 760px
}

.result-page h1 {

    font: 400 clamp(3rem, 5vw, 5rem)/1 var(--serif)
}

.result-mark {

    display: grid;

    place-items: center;

    width: 58px;

    height: 58px;

    margin: 0 auto 28px;

    background: var(--yellow);

    border-radius: 50%;

    font-weight: 900
}

.result-page .eyebrow {

    justify-content: center
}

.not-found {

    min-height: 75vh;

    background: var(--black);

    color: #fff;

    display: flex;

    align-items: center;

    padding: 100px 0
}

.error-code {

    display: block;

    color: var(--yellow);

    font: 700 clamp(6rem, 16vw, 13rem)/.75 var(--sans);

    letter-spacing: -.08em;

    opacity: .18
}

.not-found p {

    max-width: 600px;

    margin-bottom: 30px
}

.not-found .button {

    margin-right: 10px
}

.closing-cta {

    background: var(--yellow);

    color: #111;

    padding: 65px 0
}

.closing-grid {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px
}

.closing-cta .eyebrow {

    color: #111
}

.closing-cta h2 {

    margin-bottom: 8px;

    font-size: clamp(2.3rem, 4vw, 4rem)
}

.closing-cta p {

    margin: 0
}

.closing-cta .button {

    background: #111;

    color: #fff;

    border-color: #111
}

.site-footer {

    background: var(--black);

    color: #ccc;

    padding: 70px 0 30px
}

.footer-grid {

    display: grid;

    grid-template-columns: 1.5fr .8fr 1.15fr .65fr;

    gap: 60px
}

.footer-brand img {

    width: 190px;

    height: 78px;

    object-fit: contain;

    object-position: left
}

.footer-brand p {

    max-width: 310px
}

.footer-grid h2 {

    color: #fff;

    font-size: .75rem;

    text-transform: uppercase;

    letter-spacing: .14em;

    margin: 0 0 22px
}

.footer-grid>div>a {

    display: block;

    margin: 9px 0
}

.footer-grid a:hover {

    color: var(--yellow)
}

.response-note {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: .82rem
}

.response-note span {

    width: 8px;

    height: 8px;

    background: var(--yellow);

    border-radius: 50%
}

.footer-bottom {

    margin-top: 60px;

    padding-top: 25px;

    border-top: 1px solid #333;

    display: flex;

    justify-content: space-between;

    font-size: .8rem
}

.footer-bottom div {

    display: flex;

    gap: 22px
}

.mobile-cta {

    display: none !important
}

@media(max-width:980px) {

    .service-grid-four {

        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .header-cta {

        display: none
    }

    .main-nav {

        gap: 18px
    }

    .split,

    .contact-grid {

        gap: 55px
    }

    .footer-grid {

        grid-template-columns: 1fr 1fr
    }

    .project-detail {

        grid-template-columns: 1fr
    }

    .project-detail img {

        min-height: 380px
    }

}

@media(max-width:760px) {

    .wrap {

        width: min(100% - 32px, var(--wrap))
    }

    .header-inner {

        height: 72px
    }

    .brand {

        width: 145px
    }

    .brand img {

        height: 56px
    }

    .menu-toggle {

        display: block
    }

    .main-nav {

        position: fixed;

        inset: 72px 0 0;

        background: #0b0b0b;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 28px 24px;

        transform: translateX(100%);

        transition: .25s ease
    }

    .main-nav.is-open {

        transform: none
    }

    .main-nav a {

        font-size: 1rem;

        padding: 18px 0;

        border-bottom: 1px solid #333
    }

    .hero {

        min-height: calc(100svh - 72px);

        align-items: end
    }

    .hero-image {

        object-position: 65% center
    }

    .hero-shade {

        background: linear-gradient(0deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .15) 85%)
    }

    .hero-content {

        padding-block: 80px 65px
    }

    .hero h1 {

        font-size: clamp(3rem, 14vw, 4.3rem);

        max-width: 600px
    }

    .section {

        padding: 76px 0
    }

    .split,

    .contact-grid,

    .service-grid,

    .values-grid,

    .field-row {

        grid-template-columns: 1fr
    }

    .split {

        gap: 28px
    }

    .section-heading {

        display: block
    }

    .service-grid article,

    .service-grid article+article {

        padding: 30px 0;

        border-right: 0;

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

    .featured-project {

        min-height: 560px
    }

    .featured-project>img {

        object-position: 62% center
    }

    .process-grid {

        grid-template-columns: 1fr
    }

    .process-grid li,

    .process-grid li+li {

        padding: 28px 0;

        border-left: 0;

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

    .values-grid article,

    .values-grid article:nth-child(even) {

        padding: 30px 0;

        border-left: 0
    }

    .stack-list>article {

        grid-template-columns: 45px 1fr
    }

    .contact-form {

        padding: 28px 20px
    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px
    }

    .footer-bottom,

    .closing-grid {

        display: block
    }

    .footer-bottom div {

        display: block
    }

    .footer-bottom a {

        display: block;

        margin: 8px 0
    }

    .closing-grid .button {

        margin-top: 25px
    }

    .mobile-cta {

        display: none !important;

        position: fixed;

        z-index: 95;

        left: 12px;

        right: 12px;

        bottom: 12px;

        background: var(--yellow);

        color: #111;

        padding: 14px;

        text-align: center;

        font-weight: 800;

        text-transform: uppercase;

        font-size: .78rem;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
    }

    .site-footer {

        padding-bottom: 95px
    }

    .page-hero {

        padding-top: 42px
    }

    .breadcrumbs {

        margin-bottom: 38px
    }

    .not-found .button {

        display: flex;

        margin: 10px 0
    }

    .project-detail img {

        min-height: 280px
    }

    .project-detail h2 {

        font-size: 2.7rem
    }

}

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

    html {

        scroll-behavior: auto
    }

    *,

    *:before,

    *:after {

        transition: none !important
    }

}

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

.service-grid-four article {
    border-bottom: 1px solid var(--line);
}

.service-grid-four article:nth-child(even) {
    border-right: 0;
}

.service-grid-four article:nth-child(n + 3) {
    border-top: 0;
}

.service-grid-four article:nth-child(3),
.service-grid-four article:nth-child(4) {
    border-bottom: 0;
}

@media (max-width: 760px) {
    .service-grid-four {
        grid-template-columns: 1fr;
    }

    .service-grid-four article,
    .service-grid-four article:nth-child(even),
    .service-grid-four article:nth-child(3),
    .service-grid-four article:nth-child(4) {
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .service-grid-four article + article {
        padding-left: 0;
    }

    .service-grid-four article:last-child {
        border-bottom: 0;
    }
}

/* Cuadrícula de servicios: mismo inicio para ambas filas */
.service-grid-four article:nth-child(odd) {
    padding-left: 0;
}

.service-grid-four article:nth-child(even) {
    padding-left: 34px;
}

@media (max-width: 760px) {
    .service-grid-four article,
    .service-grid-four article:nth-child(even) {
        padding-left: 0;
    }
}