:root {

    --red: #bb271b;
    --red-dark: #8d1d15;

    --graphite: #131513;
    --graphite-soft: #1d201d;

    --paper: #eeece6;
    --paper-light: #f4f2ed;
    --paper-dark: #dfdbd2;

    --concrete: #ccc7bd;

    --text: #151615;
    --muted: #74716b;

    --line: rgba(18,20,18,.14);

}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--paper);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x: hidden;

}


body.menu-open {
    overflow: hidden;
}


body::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 9999;

    pointer-events: none;

    opacity: .025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");

}


img {
    width: 100%;
    display: block;
}


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


button {
    font: inherit;
}


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


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

.header {

    position: fixed;

    z-index: 2000;

    top: 0;
    left: 0;

    width: 100%;

    padding-top: 14px;

}


.header-shell {

    min-height: 76px;

    padding: 9px 18px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 42px;

    background:
        rgba(244,241,234,.72);

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

    border-radius: 18px;

    box-shadow:
        0 14px 45px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.85);

    backdrop-filter:
        blur(30px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(135%);

}


.header.scrolled .header-shell {

    background:
        rgba(244,241,234,.90);

    box-shadow:
        0 18px 50px rgba(0,0,0,.10);

}


.brand {

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


.brand-logo {

    width: 68px;
    height: 58px;

    object-fit: contain;

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {

    display: flex;

    justify-content: center;

    gap: 28px;

}


.desktop-nav a {

    position: relative;

    color:
        rgba(20,22,20,.64);

    font-size: 9px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}


.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--red);

    transition: width .25s;

}


.desktop-nav a:hover {
    color: var(--text);
}


.desktop-nav a:hover::after {
    width: 100%;
}


.desktop-contact {

    padding: 13px 16px;

    display: flex;

    align-items: center;

    gap: 22px;

    border:
        1px solid rgba(20,20,18,.13);

    color: var(--text);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: .25s;

}


.desktop-contact:hover {

    background: var(--red);

    border-color: var(--red);

    color: white;

}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-toggle {

    display: none;

    position: relative;

    width: 45px;
    height: 45px;

    border: 0;

    border-radius: 50%;

    background: var(--graphite);

    cursor: pointer;

}


.menu-toggle span {

    position: absolute;

    left: 12px;

    width: 21px;
    height: 1px;

    background: white;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        top .45s cubic-bezier(.2,.8,.2,1);

}


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


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


.menu-toggle.active span:first-child {

    top: 22px;

    transform:
        rotate(45deg);

}


.menu-toggle.active span:last-child {

    top: 22px;

    transform:
        rotate(-45deg);

}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {

    position: fixed;

    z-index: 1900;

    inset: 0;

    background:
        var(--paper-light);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-30px);

    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.2,.8,.2,1),
        visibility .4s;

}


.mobile-menu.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


.mobile-menu-inner {

    min-height: 100vh;

    padding:
        135px 24px 30px;

    display: flex;

    flex-direction: column;

}


.mobile-menu-label {

    color: var(--red);

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.mobile-menu nav {

    margin-top: 35px;

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

}


.mobile-menu nav a {

    padding:
        18px 0;

    display: grid;

    grid-template-columns:
        42px 1fr;

    align-items: center;

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

    font-family: Georgia, serif;

    font-size: 38px;

    letter-spacing: -2px;

}


.mobile-menu nav a span {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--red);

    font-size: 9px;

    letter-spacing: 1px;

}


.mobile-menu-footer {

    margin-top: auto;

    padding-top: 25px;

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

    display: flex;

    justify-content: space-between;

    color: var(--muted);

    font-size: 10px;

}


.mobile-menu-footer a {
    color: var(--red);
}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    background: var(--graphite);

    color: white;

    overflow: hidden;

}


.hero-texture {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 18% 35%,
            rgba(255,255,255,.09),
            transparent 25%
        ),

        radial-gradient(
            circle at 78% 70%,
            rgba(187,39,27,.13),
            transparent 28%
        );

}


.hero-year {

    position: absolute;

    bottom: -70px;
    left: -45px;

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

    font-family: Georgia, serif;

    font-size: 360px;

    line-height: 1;

    letter-spacing: -28px;

}


.hero-grid {

    position: relative;

    z-index: 2;

    min-height: 100vh;

    padding:
        145px 0 55px;

    display: grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap: 65px;

    align-items: end;

}


.hero-content {

    padding-bottom: 45px;

}


.eyebrow {

    color:
        rgba(255,255,255,.46);

    font-size: 8px;

    letter-spacing: 3px;

}


.eyebrow::before {

    content: "";

    display: inline-block;

    width: 35px;
    height: 2px;

    margin-right: 12px;

    vertical-align: middle;

    background: var(--red);

}


.hero h1 {

    margin-top: 34px;

    max-width: 780px;

    font-family: Georgia, serif;

    font-size:
        clamp(62px,7.2vw,116px);

    line-height: .86;

    letter-spacing: -6px;

    font-weight: 400;

}


.hero h1 span {

    display: block;

    margin-left: 6%;

}


.hero h1 em {

    display: block;

    margin-left: 11%;

    color: var(--red);

    font-weight: 400;

}


.hero-content > p {

    max-width: 470px;

    margin-top: 38px;

    color:
        rgba(255,255,255,.58);

    font-family: Georgia, serif;

    font-size: 18px;

    line-height: 1.6;

}


.hero-actions {

    margin-top: 36px;

    display: flex;

    align-items: center;

    gap: 26px;

    flex-wrap: wrap;

}


.button-primary {

    padding: 17px 20px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    background: var(--red);

    color: white;

    font-size: 9px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}


.button-secondary {

    display: inline-flex;

    gap: 16px;

    color:
        rgba(255,255,255,.55);

    font-size: 9px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}


.hero-image {

    position: relative;

    height: 72vh;

    min-height: 590px;

    overflow: hidden;

    border-left:
        6px solid var(--red);

}


.hero-image img {

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(.16)
        contrast(.97);

}


.hero-data {

    position: absolute;

    right: 0;
    bottom: 0;

    width: min(370px,75%);

    padding: 23px 27px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

    background: var(--paper);

    color: var(--text);

    border-top:
        4px solid var(--red);

}


.hero-data div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.hero-data span {

    color: var(--muted);

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}


.hero-data strong {

    font-family: Georgia, serif;

    font-size: 18px;

    font-weight: 400;

}


/* =========================================================
   MARQUEE
========================================================= */

.marquee {

    padding: 15px 0;

    overflow: hidden;

    white-space: nowrap;

    background: var(--red);

    color: white;

    font-size: 9px;

    letter-spacing: 3px;

}


.marquee div {

    width: max-content;

    animation:
        marquee 27s linear infinite;

}


@keyframes marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   COMMON
========================================================= */

.section {
    padding: 140px 0;
}


.section-index {

    color: #88847d;

    font-size: 8px;

    letter-spacing: 2.4px;

}


.section-index.light {

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

}


.about h2,
.services h2,
.portfolio h2,
.process h2,
.reviews h2,
.location h2,
.contact h2 {

    font-family: Georgia, serif;

    font-size:
        clamp(52px,6vw,90px);

    line-height: .94;

    letter-spacing: -4px;

    font-weight: 400;

}


.about h2 em,
.services h2 em,
.portfolio h2 em,
.process h2 em,
.reviews h2 em,
.location h2 em,
.contact h2 em {

    display: block;

    color: var(--red);

    font-weight: 400;

}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {

    margin-top: 70px;

    display: grid;

    grid-template-columns:
        1.1fr .6fr;

    gap: 120px;

}


.about-text p {

    margin-bottom: 20px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.85;

}


.about-text .lead {

    color: var(--text);

    font-family: Georgia, serif;

    font-size: 23px;

    line-height: 1.5;

}


.about-highlight {

    margin-top: 45px;

    padding-top: 25px;

    border-top:
        3px solid var(--red);

}


.about-highlight span {

    color: var(--red);

    font-size: 8px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.about-highlight strong {

    display: block;

    margin-top: 13px;

    font-family: Georgia, serif;

    font-size: 19px;

    line-height: 1.5;

    font-weight: 400;

}


/* =========================================================
   FEATURE
========================================================= */

.feature {
    padding: 0 32px;
}


.feature-media {

    position: relative;

    height: 82vh;

    min-height: 640px;

    border-left:
        7px solid var(--red);

    overflow: hidden;

}


.feature-media img {

    height: 100%;

    object-fit: cover;

}


.feature-info {

    position: absolute;

    left: 0;
    bottom: 0;

    min-width: 320px;

    padding: 24px 30px;

    background: var(--paper);

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.feature-info span {

    color: var(--red);

    font-size: 8px;

    letter-spacing: 2px;

}


.feature-info strong {

    font-family: Georgia, serif;

    font-size: 23px;

    font-weight: 400;

}


/* =========================================================
   SERVICES
========================================================= */

.services {
    background: var(--paper-dark);
}


.services-heading {

    margin-top: 68px;

    display: grid;

    grid-template-columns:
        1fr .4fr;

    gap: 80px;

    align-items: end;

}


.services-heading p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;

}


.services-list {

    margin-top: 75px;

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

}


.services-list article {

    min-height: 140px;

    display: grid;

    grid-template-columns:
        70px 1fr 1fr 45px;

    gap: 20px;

    align-items: center;

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

}


.services-list article > span {

    color: var(--red);

    font-size: 9px;

}


.services-list h3 {

    font-family: Georgia, serif;

    font-size: 30px;

    font-weight: 400;

}


.services-list p {

    max-width: 360px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;

}


.services-list i {

    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    color: var(--red);

    font-style: normal;

}


.mobile-services-carousel {
    display: none;
}


/* =========================================================
   STATEMENT
========================================================= */

.statement {

    padding: 120px 0;

    background: var(--red);

    color: white;

}


.statement-grid {

    display: grid;

    grid-template-columns:
        .3fr 1fr;

    gap: 90px;

}


.statement-grid > span {

    padding-top: 10px;

    color:
        rgba(255,255,255,.55);

    font-size: 8px;

    letter-spacing: 2px;

}


.statement blockquote {

    font-family: Georgia, serif;

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

    line-height: 1;

    letter-spacing: -3px;

}


.statement blockquote em {

    display: block;

    color:
        rgba(255,255,255,.67);

    font-weight: 400;

}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio {

    padding: 140px 0;

    background: var(--graphite);

    color: white;

    overflow: hidden;

}


.portfolio-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

}


.portfolio h2 {
    margin-top: 58px;
}


.project-count {

    color:
        rgba(255,255,255,.1);

    font-family: Georgia, serif;

    font-size: 95px;

}


.portfolio-grid {

    margin-top: 70px;

    display: grid;

    grid-template-columns:
        1.18fr .82fr;

    gap: 20px;

}


.project {

    position: relative;

    height: 420px;

    overflow: hidden;

}


.project-large {

    height: 860px;

    grid-row:
        span 2;

}


.project img {

    height: 100%;

    object-fit: cover;

}


.project::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.72),
            transparent 45%
        );

}


.project > div {

    position: absolute;

    z-index: 2;

    left: 25px;
    bottom: 25px;

}


.project > div span {

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

    font-size: 8px;

    letter-spacing: 2px;

}


.project h3 {

    margin-top: 7px;

    font-family: Georgia, serif;

    font-size: 28px;

    font-weight: 400;

}


.mobile-project-carousel,
.mobile-carousel-progress {
    display: none;
}


/* =========================================================
   PROCESS
========================================================= */

.process-grid {

    margin-top: 70px;

    display: grid;

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

    gap: 100px;

}


.process-cards {

    display: grid;

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

    gap: 15px;

}


.process-cards article {

    min-height: 230px;

    padding: 24px;

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

}


.process-cards article > span {

    color: var(--red);

    font-size: 9px;

}


.process-cards h3 {

    margin-top: 60px;

    font-family: Georgia, serif;

    font-size: 24px;

    font-weight: 400;

}


.process-cards p {

    margin-top: 10px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================================
   REVIEWS
========================================================= */

.reviews-heading {

    display: grid;

    grid-template-columns:
        1fr .3fr;

    gap: 70px;

    align-items: end;

}


.reviews h2 {
    margin-top: 58px;
}


.google-score {

    padding-top: 22px;

    border-top:
        3px solid var(--red);

    display: flex;

    flex-direction: column;

}


.google-score strong {

    font-family: Georgia, serif;

    font-size: 50px;

    font-weight: 400;

}


.google-score span,
.reviews-carousel article > span {

    color: var(--red);

    letter-spacing: 2px;

}


.google-score small {

    margin-top: 5px;

    color: var(--muted);

    font-size: 8px;

}


.reviews-carousel {

    margin-top: 65px;

    display: grid;

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

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

}


.reviews-carousel article {

    min-height: 330px;

    padding: 30px;

    display: flex;

    flex-direction: column;

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

}


.reviews-carousel article:first-child {

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

}


.reviews-carousel p {

    margin-top: 30px;

    font-family: Georgia, serif;

    font-size: 20px;

    line-height: 1.55;

}


.reviews-carousel footer {

    margin-top: auto;

    padding-top: 30px;

    display: flex;

    flex-direction: column;

}


.reviews-carousel footer strong {

    font-size: 11px;

}


.reviews-carousel footer small {

    margin-top: 4px;

    color: var(--muted);

    font-size: 8px;

}


/* =========================================================
   LOCATION
========================================================= */

.location {

    padding: 140px 0;

    background: var(--concrete);

}


.location-grid {

    display: grid;

    grid-template-columns:
        .55fr 1fr;

    gap: 80px;

}


.location h2 {
    margin-top: 53px;
}


.location-content > p {

    max-width: 390px;

    margin-top: 26px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;

}


.location-data {

    margin-top: 48px;

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

}


.location-data div {

    padding: 19px 0;

    display: flex;

    flex-direction: column;

    gap: 5px;

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

}


.location-data span {

    color: var(--red);

    font-size: 8px;

    letter-spacing: 1.7px;

}


.location-data strong {

    font-family: Georgia, serif;

    font-size: 17px;

    font-weight: 400;

}


.map-link {

    margin-top: 28px;

    padding: 17px 0;

    display: flex;

    justify-content: space-between;

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

    font-size: 9px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}


.map-link span {
    color: var(--red);
}


.map {

    min-height: 600px;

    border-left:
        7px solid var(--red);

}


.map iframe {

    width: 100%;
    height: 100%;

    min-height: 600px;

    border: 0;

    filter:
        grayscale(1)
        contrast(.93);

}


/* =========================================================
   CONTACT
========================================================= */

.contact {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background: var(--red);

    color: white;

}


.contact-texture {

    position: absolute;
    inset: 0;

    opacity: .15;

    background:
        radial-gradient(
            circle at 20% 30%,
            white,
            transparent 25%
        ),

        radial-gradient(
            circle at 80% 70%,
            black,
            transparent 30%
        );

}


.contact-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr .4fr;

    gap: 90px;

    align-items: end;

}


.contact-grid > div:first-child > span {

    color:
        rgba(255,255,255,.55);

    font-size: 8px;

    letter-spacing: 2px;

}


.contact h2 {
    margin-top: 25px;
}


.contact h2 em {
    color: white;
}


.contact-grid p {

    color:
        rgba(255,255,255,.78);

    font-family: Georgia, serif;

    font-size: 20px;

    line-height: 1.5;

}


.contact-grid a {

    margin-top: 30px;

    padding: 18px 0;

    display: flex;

    justify-content: space-between;

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

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

    font-size: 9px;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


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

.footer {

    padding:
        65px 0 25px;

    background: var(--paper);

    color: var(--text);

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

}


.footer::before {

    content: "";

    display: block;

    width: 42px;
    height: 4px;

    margin:
        0 auto 50px;

    background: var(--red);

}


.footer-main {

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap: 70px;

    align-items: start;

}


.footer-logo-link {

    display: flex;

    align-items: center;

    width: fit-content;

}


.footer-logo {

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

    height: 95px;

    object-fit: contain;

    object-position: left center;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.footer-column > span {

    margin-bottom: 12px;

    color: var(--red);

    font-size: 8px;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}


.footer-column a {

    color:
        rgba(20,21,20,.6);

    font-size: 10px;

}


.footer-column strong {

    font-family: Georgia, serif;

    font-size: 16px;

    font-weight: 400;

}


.footer-bottom {

    margin-top: 60px;

    padding-top: 20px;

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

    display: flex;

    justify-content: space-between;

    color:
        rgba(20,21,20,.4);

    font-size: 8px;

}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {

    position: fixed;

    z-index: 1800;

    right: 22px;
    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 10px;

}


.whatsapp-label {

    padding: 12px 15px;

    border-radius: 100px;

    background:
        rgba(244,242,237,.94);

    color: var(--text);

    box-shadow:
        0 10px 30px rgba(0,0,0,.14);

    font-size: 10px;

    transform:
        translateX(12px);

    opacity: 0;

    transition:
        opacity .25s,
        transform .25s;

}


.whatsapp-icon {

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #1f9d55;

    color: white;

    box-shadow:
        0 12px 35px rgba(0,0,0,.22);

}


.whatsapp-icon svg {

    width: 28px;
    height: 28px;

}


.floating-whatsapp:hover
.whatsapp-label {

    opacity: 1;

    transform:
        translateX(0);

}


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

@media(max-width:900px) {

    .container {
        width:
            calc(100% - 30px);
    }


    .desktop-nav,
    .desktop-contact {
        display: none;
    }


    .header-shell {

        grid-template-columns:
            1fr auto;

        gap: 15px;

        min-height: 66px;

        padding:
            6px 8px 6px 13px;

        border-radius: 17px;

    }


    .menu-toggle {
        display: block;
    }


    .brand-logo {

        width: 54px;
        height: 48px;

    }


    /* HERO */

    .hero {

        min-height: auto;

    }


    .hero-grid {

        min-height: auto;

        padding:
            115px 0 25px;

        grid-template-columns:
            1fr;

        gap: 32px;

    }


    .hero-content {

        padding-bottom: 0;

    }


    .hero-year {
        display: none;
    }


    .hero h1 {

        margin-top: 28px;

        max-width: 100%;

        font-size:
            clamp(50px,14vw,72px);

        line-height: .9;

        letter-spacing: -4px;

    }


    .hero h1 span,
    .hero h1 em {

        margin-left: 0;

    }


    .hero-content > p {

        max-width: 100%;

        margin-top: 26px;

        font-size: 16px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }


    .button-primary,
    .button-secondary {

        min-height: 54px;

        justify-content: space-between;

    }


    .button-secondary {

        padding:
            0 18px;

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

    }


    .hero-image {

        height: 62vh;

        min-height: 460px;

        border-left:
            4px solid var(--red);

    }


    .hero-data {

        width: 100%;

        padding: 18px;

    }


    .section,
    .location {

        padding:
            90px 0;

    }


    .about h2,
    .services h2,
    .portfolio h2,
    .process h2,
    .reviews h2,
    .location h2,
    .contact h2 {

        font-size: 48px;

        letter-spacing: -3px;

    }


    .about-grid {

        margin-top: 45px;

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .feature {

        padding:
            0 15px;

    }


    .feature-media {

        height: 580px;

        min-height: 0;

    }


    .feature-info {

        min-width: 0;

        right: 0;

        padding: 20px;

    }


    .services-heading {

        margin-top: 45px;

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .desktop-services {
        display: none;
    }


    .mobile-services-carousel {

        display: flex;

        gap: 12px;

        overflow-x: auto;

        margin-top: 40px;

        padding-bottom: 10px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;

    }


    .mobile-services-carousel::-webkit-scrollbar {
        display: none;
    }


    .service-card {

        flex:
            0 0 82%;

        min-height: 270px;

        padding: 24px;

        scroll-snap-align:
            start;

        background:
            var(--paper-light);

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

        box-shadow:
            0 15px 45px rgba(0,0,0,.06);

    }


    .service-card span {

        color: var(--red);

        font-size: 9px;

    }


    .service-card h3 {

        margin-top: 75px;

        font-family: Georgia, serif;

        font-size: 30px;

        font-weight: 400;

    }


    .service-card p {

        margin-top: 14px;

        color: var(--muted);

        font-size: 13px;

        line-height: 1.7;

    }


    .statement {

        padding:
            85px 0;

    }


    .statement-grid {

        grid-template-columns:
            1fr;

        gap: 30px;

    }


    .statement blockquote {

        font-size: 42px;

        letter-spacing: -2px;

    }


    .portfolio {

        padding:
            90px 0;

    }


    .project-count,
    .desktop-portfolio {
        display: none;
    }


    .mobile-project-carousel {

        display: flex;

        gap: 12px;

        overflow-x: auto;

        margin-top: 45px;

        padding-right: 15px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;

    }


    .mobile-project-carousel::-webkit-scrollbar {
        display: none;
    }


    .mobile-project {

        position: relative;

        flex:
            0 0 88%;

        height: 550px;

        scroll-snap-align:
            center;

        overflow: hidden;

    }


    .mobile-project img {

        height: 100%;

        object-fit: cover;

    }


    .mobile-project::after {

        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                0deg,
                rgba(0,0,0,.72),
                transparent 45%
            );

    }


    .mobile-project > div {

        position: absolute;

        z-index: 2;

        left: 22px;
        bottom: 22px;

    }


    .mobile-project span {

        color:
            rgba(255,255,255,.5);

        font-size: 8px;

        letter-spacing: 1.5px;

    }


    .mobile-project h3 {

        margin-top: 7px;

        font-family: Georgia, serif;

        font-size: 28px;

        font-weight: 400;

    }


    .mobile-carousel-progress {

        margin-top: 25px;

        display: grid;

        grid-template-columns:
            25px 1fr 25px;

        gap: 10px;

        align-items: center;

        color:
            rgba(255,255,255,.45);

        font-size: 8px;

    }


    .mobile-carousel-progress > div {

        height: 2px;

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

        overflow: hidden;

    }


    .mobile-carousel-progress i {

        display: block;

        width: 33%;
        height: 100%;

        background: var(--red);

        transition: width .35s;

    }


    .process-grid {

        margin-top: 45px;

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .process-cards {

        display: flex;

        overflow-x: auto;

        gap: 12px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;

    }


    .process-cards::-webkit-scrollbar {
        display: none;
    }


    .process-cards article {

        flex:
            0 0 78%;

        scroll-snap-align:
            start;

    }


    .reviews-heading {

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .reviews-carousel {

        display: flex;

        overflow-x: auto;

        gap: 12px;

        border: 0;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;

    }


    .reviews-carousel::-webkit-scrollbar {
        display: none;
    }


    .reviews-carousel article {

        flex:
            0 0 86%;

        min-height: 300px;

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

        scroll-snap-align:
            start;

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

    }


    .location-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .map,
    .map iframe {

        min-height: 430px;

    }


    .contact {

        padding:
            90px 0;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .footer {

        padding:
            55px 0 22px;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .footer-logo {

        width: 180px;
        height: 78px;

    }


    .footer-bottom {

        flex-direction: column;

        gap: 8px;

    }


    .floating-whatsapp {

        right: 15px;
        bottom: 15px;

    }


    .whatsapp-label {
        display: none;
    }


    .whatsapp-icon {

        width: 58px;
        height: 58px;

    }

}


@media(max-width:520px) {

    .brand-logo {

        width: 48px;
        height: 44px;

    }


    .hero h1 {

        font-size:
            clamp(45px,13vw,60px);

    }


    .footer-logo {

        width: 155px;
        height: 68px;

    }

}


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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}