/* =========================================================
   ARC+WERK — VIEWPORT MASTER CSS v2.1
   Reference canvas: 1920px wide (HD)
   Desktop/UHD scale proportionally with viewport width.
   At 3840px, desktop dimensions are exactly 2× HD.
   Below 1200px, the layout switches to normal responsive rules.
   ========================================================= */

:root {
    --aw-font: "League Spartan", Arial, sans-serif;

    --aw-dark: #272011;
    --aw-dark-2: #241703;
    --aw-light: #f7f5f0;
    --aw-brown: #776c62;
    --aw-gold: #be9e55;
    --aw-white: #ffffff;
    --aw-text: #161616;
    --aw-taupe: #b5aca3; /*old b8aea4*/
    --aw-beige: #d4cec8;
    --aw-line: #be9e55;


    /* 1920px reference conversions */
    /*--aw-h1: 2.708333vw;      !* 52px @ 1920 *!*/
    /*--aw-h2: 2.03125vw;       !* 39px @ 1920 *!*/
    /*--aw-h3: 1.5625vw;        !* 30px @ 1920 *!*/
    /*--aw-teaser: 1.25vw;      !* 24px @ 1920 *!*/
    /*--aw-body: 1.09375vw;      !* 21px @ 1920 *!*/

    /*--aw-small: 0.833333vw;    !* 16px @ 1920 *!*/
    /*--aw-xs: 0.729167vw;       !* 14px @ 1920 *!*/

    /*--aw-section-y: 5.416667vw; !* 104px @ 1920 *!*/
    /*--aw-radius: 0.208333vw;    !* 4px @ 1920 *!*/


    --aw-h1: clamp(36px, 2.708333vw, 52px);
    --aw-h2: clamp(30px, 2.03125vw, 39px);
    --aw-h3: clamp(24px, 1.5625vw, 30px);
    --aw-h4: clamp(21px, 1.35vw, 26px);
    --aw-teaser: clamp(20px, 1.25vw, 24px);
    /*--aw-body: clamp(18px, 1.09375vw, 21px);*/
    --aw-body: 1.3125rem; /* 21px */

    --aw-small: 1.3125rem; /* 21px: normal/small copy normalized */
    --aw-xs: clamp(13px, 0.729167vw, 14px);

    --aw-section-y: clamp(64px, 5.416667vw, 104px);
    --aw-radius: 4px;

}

/* =========================================================
   GLOBAL
   ========================================================= */

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;

    font-family: var(--aw-font);
    font-size: var(--aw-body);
    font-weight: 300;
    line-height: 1.5;

    color: var(--aw-text);
    background: var(--aw-white);

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

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

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

a {
    color: inherit;
    font-family: inherit;
}

.aw-container {
    width: 75vw !important; /* 1440px @ 1920 */
    max-width: none !important;
    margin-inline: auto !important;
}

/* =========================================================
   TYPOGRAPHY — exact proportional scaling
   ========================================================= */

h1,
.aw-h1 {
    margin: 0 0 1.25vw;

    font-family: var(--aw-font);
    font-size: var(--aw-h1) !important;
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.025em;

    text-transform: uppercase;
}

h2,
.aw-h2,
.aw-section-title {
    margin: 0 0 1.25vw;

    font-family: var(--aw-font);
    font-size: var(--aw-h2) !important;
    font-weight: 700 ;
    line-height: 1.06;
    letter-spacing: -0.02em;

    text-transform: uppercase;
}

h3,
.aw-h3,
.aw-step-title,
.aw-service-title {
    margin: 0 0 0.833333vw;

    font-family: var(--aw-font);
    font-size: var(--aw-h3) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;

    text-transform: uppercase;
}

h4,
.aw-h4 {
    margin: 0 0 0.833333vw;

    font-family: var(--aw-font);
    font-size: var(--aw-h4) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;

    text-transform: uppercase;
}

p,
.aw-body {
    margin: 0 0 1.083333vw;

    font-family: var(--aw-font);
    font-size: var(--aw-body) !important;
    font-weight: 300;
    line-height: 1.5;
}

.aw-lead,
.aw-teaser {
    margin: 0 0 1.666667vw;

    font-family: var(--aw-font);
    font-size: var(--aw-teaser) !important;
    font-weight: 700 ;
    line-height: 1.28;
}

.aw-small {
    font-size: var(--aw-small) !important;
}

.aw-overline {
    font-size: var(--aw-xs) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

.aw-btn,
.aw-link-btn,
.aw-nav-link,
button,
input[type="submit"] {
    font-family: var(--aw-font);
}

.aw-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 0 !important;

    /* Move League Spartan text visually 2px down
       while keeping total button height unchanged */
    padding:
            calc(0.708333vw + 2px)
            1.125vw
            calc(0.708333vw - 2px)
            1.125vw !important;

    border-radius: var(--aw-radius) !important;

    font-size: var(--aw-small) !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    text-decoration: none !important;

    transition: 0.2s ease;
}

.aw-btn-solid {
    border: 0.052083vw solid var(--aw-brown) !important;
    background: var(--aw-brown) !important;
    color: var(--aw-white) !important;
}

.aw-btn-outline {
    border: 1px solid var(--aw-brown) !important;
    background: transparent !important;
    color: var(--aw-brown) !important;
}

.aw-btn-light {
    border: 0.052083vw solid var(--aw-white) !important;
    background: transparent !important;
    color: var(--aw-white) !important;
}

.aw-btn:hover {
    transform: translateY(-0.052083vw);
}

.aw-btn-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;

    gap: 0.833333vw;

    margin-top: 1.666667vw;
}

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

.aw-header {
    position: relative;
    z-index: 50;

    width: 100% !important;
    padding: 0 !important;

    background: var(--aw-dark) !important;
}

.aw-header .aw-header-inner {
    width: 84vw !important;
    max-width: none !important;
    min-height: 7.8125vw; /* 150px @ 1920 */

    margin-inline: auto !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 2.5vw !important;
}

.aw-header .aw-logo,
.aw-footer .aw-logo {
    display: block !important;

    flex: 0 0 auto;

    width: 6.875vw !important;  /* 132px */
    height: 4.375vw !important;
    max-width: none !important;

    overflow: hidden;

    text-indent: -9999px;
    white-space: nowrap;

    background-image: url("../images/arcpluswerk-logo-white.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.aw-header .aw-nav {
    flex: 1 1 auto !important;
    width: auto !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 1.65vw !important;
}

.aw-header .aw-nav-link {
    display: inline-flex !important;

    width: auto !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;
    color: var(--aw-white) !important;

    font-size: 0.833333vw !important; /* 16px */
    font-weight: 400 !important;
    line-height: 1 !important;

    text-transform: uppercase !important;
    text-decoration: none !important;

    white-space: nowrap;
}

.aw-header .aw-nav-link:hover {
    color: var(--aw-gold) !important;
}

/* =========================================================
   HERO — CUSTOM ARC+WERK HERO SLIDER
   =========================================================
   Desktop reference:
   - full Hero width = 100%
   - slider/image = 92%
   - social/background rail = 8%
   - original Hero image ratio = 2048 / 930
   - image + text + button change together per Hero Slide
   ========================================================= */

.aw-hero {
    position: relative !important;

    /* Force the Hero to span the full viewport */
    width: 100vw !important;
    max-width: 100vw !important;

    /* Break out of any centered Bricks/container width */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    background: var(--aw-dark) !important;

    overflow: hidden !important;
}


/*
 * The custom slider must be a DIRECT child of .aw-hero.
 *
 * Bricks structure:
 *
 * Hero (.aw-hero / .aw-hero-social-parent)
 * ├── arc+werk Hero Slider
 * └── Vertical Social Menu
 */
.aw-hero > .awh-root {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    left: 0 !important;
    right: auto !important;

    overflow: hidden !important;
}


/* =========================================================
   HERO SLIDER VIEWPORT
   92% image + 8% right background/social area
   ========================================================= */

.aw-hero > .awh-root .awh-viewport {
    position: relative !important;

    /* Image/slider occupies the left 92% of the Hero */
    width: 92% !important;
    max-width: 92% !important;

    /*
     * Stable desktop Hero height:
     * HD stays close to the approved layout,
     * 2560/UHD grow only slightly.
     */
    height: clamp(660px, 36.5vw, 720px) !important;
    aspect-ratio: auto !important;

    /* Critical: image starts exactly at the left edge */
    margin-left: 0 !important;
    margin-right: auto !important;

    padding: 0 !important;

    left: 0 !important;
    right: auto !important;

    overflow: hidden !important;
}


/* =========================================================
   HERO SLIDE / IMAGE
   ========================================================= */

.awh-root .awh-stage {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
}


.awh-root .awh-panel {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    pointer-events: none;
}


.awh-root .awh-panel.is-active,
.awh-root .awh-panel.is-entering,
.awh-root .awh-panel.is-leaving {
    visibility: visible !important;
}


.awh-root .awh-panel.is-active {
    pointer-events: auto !important;
}


.awh-root .awh-image {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


.awh-root .awh-image img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: var(--awh-image-fit, cover) !important;
    object-position: var(--awh-image-position, center center) !important;
}


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

.awh-root .awh-content {
    left: 8vw !important;
    right: auto !important;
    bottom: 10% !important;

    width: 42vw !important;
    max-width: none !important;
}

/* Title */
.awh-root .awh-title {
    color: var(--awh-title-color, #ffffff) !important;

    opacity: 1 !important;

    filter: none !important;
    -webkit-filter: none !important;

    mix-blend-mode: normal !important;
    text-shadow: none !important;

    -webkit-text-fill-color: currentColor !important;
}


/* Text */
.awh-root .awh-text,
.awh-root .awh-text p {
    color: var(--awh-text-color, #ffffff) !important;

    opacity: 1 !important;

    filter: none !important;
    -webkit-filter: none !important;

    mix-blend-mode: normal !important;
    text-shadow: none !important;

    -webkit-text-fill-color: currentColor !important;
}


/* Button */
.awh-root .awh-button,
.awh-root a.awh-button,
.awh-root span.awh-button {
    color: var(--awh-button-color, #ffffff) !important;

    opacity: 1 !important;

    filter: none !important;
    -webkit-filter: none !important;

    mix-blend-mode: normal !important;
    text-shadow: none !important;

    -webkit-text-fill-color: currentColor !important;
}


/* Dots */
.awh-root .awh-dots {
    z-index: 30 !important;

    left: 8% !important;
    right: auto !important;

    bottom: 4.5% !important;

    pointer-events: auto !important;
}


.awh-root .awh-dot {
    z-index: 31 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}


/* =========================================================
   HERO — DESKTOP PROPORTIONAL TYPOGRAPHY
   >= 1200px
   =========================================================
   These values preserve the original 1920px design:
   H1      52px @ 1920
   Text    21px @ 1920
   Button  16px @ 1920

   They also scale proportionally at 2560/UHD.
   ========================================================= */

@media (min-width: 75rem) {

    /*
     * Desktop typography grows gently instead of scaling indefinitely
     * with the viewport. This keeps 2560/UHD close to the HD design.
     */
    .awh-root .awh-title {
        font-size: clamp(52px, 2.708333vw, 64px) !important;
        line-height: 1.03 !important;
    }

    .awh-root .awh-text,
    .awh-root .awh-text p {
        font-size: clamp(21px, 1.09375vw, 25px) !important;
        line-height: 1.45 !important;
    }

    .awh-root .awh-button {
        font-size: clamp(16px, 0.833333vw, 19px) !important;
    }
}


/* =========================================================
   HERO — TABLET / SMALL DESKTOP
   < 1200px
   ========================================================= */

@media (max-width: 74.999rem) {

    .aw-hero > .awh-root .awh-viewport {
        width: 92% !important;
        max-width: 92% !important;

        margin-left: 0 !important;
        margin-right: auto !important;

        left: 0 !important;
        right: auto !important;

        aspect-ratio: auto !important;
        height: 38rem !important;
    }

    .awh-root .awh-content {
        left: 2rem !important;
        bottom: 5rem !important;
        width: min(40rem, 68%) !important;
    }

    .awh-root .awh-title {
        font-size: clamp(2.25rem, 5vw, 3.25rem) !important;
    }

    .awh-root .awh-text,
    .awh-root .awh-text p {
        font-size: 1.125rem !important;
    }

    .awh-root .awh-button {
        font-size: 1rem !important;
    }
}


/* =========================================================
   HERO — MOBILE
   < 768px
   ========================================================= */

@media (max-width: 47.999rem) {

    /*
     * Keep the right 8% strip on mobile as well.
     * The social/background rail therefore remains visible.
     */
    .aw-hero > .awh-root .awh-viewport {
        width: 92% !important;
        max-width: 92% !important;

        margin-left: 0 !important;
        margin-right: auto !important;

        left: 0 !important;
        right: auto !important;

        aspect-ratio: auto !important;
        height: 43rem !important;
    }

    .awh-root {
        --awh-left: 1.5rem !important;
    }

    .awh-root .awh-content {
        left: 1.5rem !important;
        bottom: 5rem !important;

        width: calc(100% - 3rem) !important;
        max-width: none !important;
    }

    .awh-root .awh-title {
        width: 100% !important;

        font-size: clamp(2rem, 8vw, 2.6rem) !important;
        line-height: 1.02 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .awh-root .awh-text,
    .awh-root .awh-text p {
        width: 100% !important;

        font-size: 1.05rem !important;
        line-height: 1.45 !important;
    }

    .awh-root .awh-button {
        font-size: 1rem !important;
    }

    .awh-root .awh-dots {
        left: 1.5rem !important;
    }
}


/* =========================================================
   STANDARD SECTION SPACING
   ========================================================= */

.aw-section {
    padding-block: var(--aw-section-y) !important;
}

/* =========================================================
   ARC+WERK — HERO VERTICAL SOCIAL MENU
   Right 8% of Hero
   ========================================================= */

.aw-hero-social-parent {
    position: relative !important;
}


/*
 * The social menu must be a DIRECT child of Hero,
 * alongside the custom Hero Slider.
 */
.aw-hero-social-parent > .aw-social-rail {
    position: absolute !important;

    top: 50% !important;
    right: 0 !important;
    left: auto !important;

    width: 8% !important;
    max-width: 8% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 1.4vw !important;

    /*
     * Rotate the complete menu group as requested.
     */
    transform: translateY(-50%) rotate(180deg) !important;
    transform-origin: center center !important;

    z-index: 1000 !important;

    background: transparent !important;

    overflow: visible !important;
    pointer-events: auto !important;
}


/* Bricks can otherwise force children to full width */
.aw-social-rail > * {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Instagram / Facebook / LinkedIn */
.aw-social-rail .aw-social-link {
    display: inline-block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #ffffff !important;

    font-family: var(--aw-font) !important;

    /* Same size as desktop header navigation */
    font-size: 0.833333vw !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;

    /*
     * The complete rail is already rotated 180deg,
     * so do not rotate every link a second time.
     */
    transform: none !important;

    cursor: pointer !important;

    transition: color 0.25s ease !important;
}


.aw-social-rail .aw-social-link span,
.aw-social-rail .aw-social-link .bricks-button-text {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;

    writing-mode: inherit !important;
    text-orientation: inherit !important;
}


.aw-social-rail .aw-social-link:hover {
    color: var(--aw-gold) !important;
}


/* Tablet */
@media (max-width: 74.999rem) {

    .aw-hero-social-parent > .aw-social-rail {
        gap: 30px !important;
    }

    .aw-social-rail .aw-social-link {
        font-size: 0.85rem !important;
    }
}


/* Mobile */
@media (max-width: 47.999rem) {

    .aw-hero-social-parent > .aw-social-rail {
        gap: 20px !important;
    }

    .aw-social-rail .aw-social-link {
        font-size: 0.7rem !important;
    }
}


/* =========================================================
   INTRO / MODEL
   EXACT viewport-based 3-area proportional layout

   HD 1920:
   8%  = ~154px empty left
   36% = ~691px text
   56% = ~1075px image

   UHD 3840:
   8%  = ~307px empty left
   36% = ~1382px text
   56% = ~2150px image
   ========================================================= */

.aw-intro {
    width: 100%;
    padding-block: 5.416667vw !important;
    overflow: hidden;
}

.aw-intro .aw-two-col {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    display: grid !important;

    grid-template-columns:
        8%
        36%
        56% !important;

    gap: 0 !important;
    align-items: center !important;
}

.aw-intro .aw-copy-col {
    grid-column: 2;

    width: 100%;
    max-width: none !important;

    padding:
            1.666667vw
            3.5vw
            1.666667vw
            0 !important;
}

.aw-intro .aw-copy-col .aw-h2,
.aw-intro .aw-lead,
.aw-intro .aw-teaser,
.aw-intro .aw-body {
    width: 100%;
    max-width: none !important;
}

.aw-intro .aw-image-col {
    grid-column: 3;

    width: 100%;
    min-width: 0;
    height: 100%;

    overflow: hidden;
}

.aw-intro .aw-square-image {
    width: 100% !important;
    height: auto !important;
}

.aw-intro .aw-square-image img {
    display: block;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 1.55 / 1;

    object-fit: cover !important;
    object-position: center center;
}

/* =========================================================
   KPI / STATS
   4 equal columns
   Content centered in each column
   ========================================================= */

.aw-stats {
    padding: 3.2vw 0 3.5vw !important;
}


/* =========================================================
   GRID
   ========================================================= */

.aw-stats-grid {
    position: relative !important;

    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;

    width: 70vw !important;
    max-width: 1400px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    align-items: stretch !important;
}


/* =========================================================
   SINGLE STAT
   ========================================================= */

.aw-stat {
    position: relative;

    min-width: 0 !important;
    min-height: 8.5vw;

    padding: 0.9vw 2vw !important;

    border: 0 !important;
    border-right: 1px solid var(--aw-text) !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;
    align-items: center !important;

    text-align: center !important;
}


/* Remove separator from last column */

.aw-stat:last-child {
    border-right: 0 !important;
}


/* =========================================================
   REMOVE OLD PSEUDO SEPARATORS
   ========================================================= */

.aw-stats-grid::before,
.aw-stats-grid::after,
.aw-stat::before,
.aw-stat::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   BIG NUMBER
   ========================================================= */

.aw-stat-big {
    margin: 0 0 1.2vw !important;

    color: var(--aw-gold);

    font-family: var(--aw-font);
    font-size: var(--aw-h1) !important;
    font-weight: 600;

    line-height: 1;
    letter-spacing: -0.02em;

    text-align: center !important;
}

.aw-stat-big small {
    font-size: 0.9375vw !important;
    font-weight: 600;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.aw-stat-small {
    margin: 0 !important;

    font-family: var(--aw-font);
    font-size: var(--aw-body) !important;
    font-weight: 400;

    line-height: 1.3;

    text-align: center !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .aw-stats {
        padding: 5vw 0 !important;
    }

    .aw-stats-grid {
        width: 86vw !important;

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

    .aw-stat {
        min-height: 12vw;
        padding: 1.5vw 2vw !important;
    }

    /* Remove right separator on column 2 + 4 */
    .aw-stat:nth-child(2n) {
        border-right: 0 !important;
    }

    /* Horizontal separator between the two rows */
    .aw-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--aw-text) !important;
    }
}


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

@media (max-width: 767px) {

    .aw-stats {
        padding: 40px 0 !important;
    }

    .aw-stats-grid {
        grid-template-columns: 1fr !important;

        width: 88vw !important;
        max-width: none !important;
    }

    .aw-stat {
        min-height: auto;

        padding: 25px 0 !important;

        align-items: center !important;
        text-align: center !important;

        border-right: 0 !important;
        border-bottom: 1px solid var(--aw-text) !important;
    }

    .aw-stat:last-child {
        border-bottom: 0 !important;
    }

    .aw-stat-big {
        margin-bottom: 12px !important;
    }

    .aw-stat-big small {
        font-size: 14px !important;
    }

    .aw-stat-small {
        text-align: center !important;
    }
}

/* =========================================================
   PROBLEM / GETRENNT VERGEBEN
   Stable Bricks-compatible structure

   Desktop:
   8%  empty left
   18% heading
   66% content+button
   8%  empty right

   Inside content:
   48 parts text
   18 parts button
   ========================================================= */

.aw-problem {
    width: 100%;
    padding-block: 4.166667vw !important;

    background: var(--aw-beige) !important;
}


/* =========================================================
   OUTER GRID
   ========================================================= */

.aw-problem .aw-problem-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        8%
        20%
        64%
        8% !important;

    gap: 0 !important;
    align-items: start !important;
}

/* =========================================================
   HEADING
   ========================================================= */

.aw-problem .aw-problem-title {
    grid-column: 2;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
            0
            3vw
            0
            0 !important;
}


/* =========================================================
   CONTENT AREA
   Text + button
   ========================================================= */

.aw-problem .aw-problem-copy {
    grid-column: 3;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    /* 48% text + 16% button */
    grid-template-columns:
        minmax(0, 48fr)
        minmax(0, 16fr) !important;

    grid-template-rows:
        auto
        auto !important;

    column-gap: 3vw !important;
    row-gap: 1.5vw !important;

    align-items: start !important;
}



/* =========================================================
   PROBLEM — BELOW 1200px
   Single-column layout
   ========================================================= */

@media (max-width: 74.999rem) {

    .aw-problem {
        padding-block: 4.5rem !important;
    }

    .aw-problem .aw-problem-grid {
        width: calc(100% - 4rem) !important;
        max-width: none !important;

        margin-inline: auto !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 2.5rem !important;
    }

    /* Heading */

    .aw-problem .aw-problem-title {
        grid-column: 1 !important;
        grid-row: auto !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Content wrapper */

    .aw-problem .aw-problem-copy {
        grid-column: 1 !important;
        grid-row: auto !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;

        gap: 1.5rem !important;
    }

    /* Both text blocks */

    .aw-problem .aw-problem-copy > .aw-body:nth-child(1),
    .aw-problem .aw-problem-copy > .aw-body:nth-child(2) {
        grid-column: 1 !important;
        grid-row: auto !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Button */

    .aw-problem .aw-problem-copy > .aw-btn {
        grid-column: 1 !important;
        grid-row: auto !important;

        justify-self: start !important;
        align-self: start !important;

        width: auto !important;

        margin-top: 0.5rem !important;
    }
}


/* =========================================================
   FIRST PARAGRAPH
   ========================================================= */

.aw-problem .aw-problem-copy > .aw-body:nth-child(1) {
    grid-column: 1;
    grid-row: 1;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   SECOND PARAGRAPH
   Directly below first paragraph
   ========================================================= */

.aw-problem .aw-problem-copy > .aw-body:nth-child(2) {
    grid-column: 1;
    grid-row: 2;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


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

.aw-problem .aw-problem-copy > .aw-btn {
    grid-column: 2;
    grid-row: 1 / 3;

    align-self: end;
    justify-self: start;

    width: auto !important;

    margin: 0 !important;

    white-space: nowrap;
}

@media (max-width: 47.999rem) {

    .aw-btn {
        padding-top: calc(0.708333vw + 8px) !important;
        padding-bottom: calc(0.708333vw + 4px) !important;
    }

}

/* =========================================================
   LARGE IMAGE / BATHROOM

   Desktop >= 1200px:
   - 8% left offset
   - image runs completely to right edge
   - original image proportions preserved

   Tablet < 1200px:
   - 2rem left offset
   - no right margin
   - original proportions preserved

   Mobile < 768px:
   - 1rem left offset
   ========================================================= */


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

.aw-full-image-section {
    position: relative;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 0 5vw !important;

    background: var(--aw-brown) !important;

    overflow: hidden !important;
}


/*
 * 8% left space
 * 92% image
 *
 * 8% + 92% = 100%
 */

.aw-full-image-section .aw-wide-image-wrap {
    display: block !important;

    width: 92% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin:
            0
            0
            0
            8% !important;

    padding: 0 !important;

    aspect-ratio: auto !important;
}


/* Bricks image element */

.aw-full-image-section .aw-wide-image {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    aspect-ratio: auto !important;
}


/* Actual <img> */

.aw-full-image-section .aw-wide-image img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center center !important;
}


/* =========================================================
   TABLET / SMALL DESKTOP
   BELOW 1200px
   ========================================================= */

@media (max-width: 74.999rem) {

    .aw-full-image-section {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
                0
                0
                3rem
                0 !important;

        overflow: hidden !important;
    }


    /*
     * 2rem space only on LEFT.
     *
     * Width is calculated from the parent's actual width,
     * NOT 100vw. This prevents the small right-side strip
     * caused by scrollbar/viewport calculations.
     */

    .aw-full-image-section .aw-wide-image-wrap {
        display: block !important;

        width: calc(100% - 2rem) !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
                0
                0
                0
                2rem !important;

        padding: 0 !important;

        aspect-ratio: auto !important;
    }


    .aw-full-image-section .aw-wide-image {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        aspect-ratio: auto !important;
    }


    .aw-full-image-section .aw-wide-image img {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        aspect-ratio: auto !important;

        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* =========================================================
   MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 47.999rem) {

    .aw-full-image-section {
        padding-bottom: 2rem !important;
    }


    /*
     * 1rem left space on mobile
     * and still flush against right edge.
     */

    .aw-full-image-section .aw-wide-image-wrap {
        width: calc(100% - 1rem) !important;

        margin:
                0
                0
                0
                1rem !important;
    }
}

/* =========================================================
   JOURNEY
   ========================================================= */

.aw-journey {
    padding-block: 4.583333vw !important;
}

.aw-journey-wrap {
    width: 58.333333vw !important; /* 1120px */
    max-width: none !important;
    margin-inline: auto !important;
}

.aw-section-title {
    margin-bottom: 2.5vw !important;
    text-align: center;
}

.aw-steps-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;

    gap: 1.25vw !important;
    align-items: stretch !important;
}

.aw-step-card {
    position: relative;

    height: 100% !important;
    min-height: 9.166667vw;

    display: flex !important;
    flex-direction: column !important;

    padding:
            1.666667vw
            1.666667vw
            1.5vw
            4.583333vw !important;

    border: 0.052083vw solid #a39990;
}


.aw-step-num {
    position: absolute;
    left: 1.25vw;
    top: 1.166667vw;

    color: var(--aw-gold);

    font-size: 2.75vw !important;
    font-weight: 400;
    line-height: 1;
}

.aw-step-title {
    /*font-size: 1.125vw !important;*/
    font-size: var(--aw-body) !important;
    text-transform: none;



}

.aw-step-title::after {
    content: "";

    display: block;

    width: 50px; /*2.083333vw;*/
    height: 4px; /* 0.104167vw;*/

    margin-top: 0.5vw;

    background: var(--aw-gold);
}

.aw-step-copy {
    font-size: var(--aw-body) !important;
    line-height: 1.45;
}

.aw-center-btn {
    display: table !important;
    margin: 2.291667vw auto 0 !important;
}

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

.aw-services {
    background: var(--aw-light) !important;
}

.aw-services > .aw-container {
    width: 75vw !important;
}

.aw-section-intro {
    margin-bottom: 2.5vw !important;
    font-size: var(--aw-body) !important; /* regular text: 21px */
}

.aw-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;

    gap: 3.541667vw 1.666667vw !important;
    align-items: start;
}

.aw-service-card:nth-child(4) {
    grid-column: 1;
}

.aw-service-card:nth-child(5) {
    grid-column: 2;
}

.aw-service-image {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

.aw-service-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center center !important;
}

.aw-service-title {
    margin-top: 1.041667vw !important;

    /*font-size: 1.041667vw !important; !* 20px *!*/
    font-size: var(--aw-body) !important;
    text-transform: none;
}

.aw-service-title::after {
    content: "";

    display: block;

    width: 50px; /*1.666667vw;*/
    height: 4px; /*0.104167vw; */

    margin-top: 0.583333vw;

    background: var(--aw-gold);
}

.aw-service-copy {
    font-size: var(--aw-body) !important;
    line-height: 1.5;
}

.aw-services-btn {
    float: right;
    margin-top: -2.333333vw !important;
}

/* =========================================================
   NETWORK
   ========================================================= */

.aw-network-strip {
    padding-block: 3.75vw !important;

    background: var(--aw-brown) !important;
    color: var(--aw-white);
}

.aw-network-grid {
    display: grid !important;

    width: 75vw !important;
    max-width: none !important;
    margin-inline: auto !important;

    grid-template-columns: 18.333333vw 1fr auto !important;

    gap: 3.333333vw !important;
    align-items: center !important;
}

.aw-light {
    color: var(--aw-white) !important;
}

/* =========================================================
   PROJECTS
   ========================================================= */

.aw-projects {
    background: #d5d0cb !important;
}

.aw-projects > .aw-container {
    width: 75vw !important;
}

.aw-project-head {
    display: grid !important;

    grid-template-columns: 26.666667vw 1fr !important;

    gap: 3.333333vw !important;

    margin-bottom: 2.916667vw !important;
}

.aw-project-head .aw-body {
    max-width: none;
}

.aw-project-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;

    gap: 2.5vw !important;
}

.aw-project-card {
    background: var(--aw-white) !important;
}

/* Project images — preserve original aspect ratio */

.aw-project-image {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

.aw-project-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    aspect-ratio: auto !important;

    object-fit: contain !important;
}

.aw-project-body {
    padding: 1.125vw 1.25vw 1.5vw !important;

    /* Regular project-card copy is always 21px */
    font-family: var(--aw-font) !important;
    font-size: var(--aw-body) !important;
    line-height: 1.5;
}

/*
 * Project slider/card body copy.
 * Bricks/rich-text elements can carry their own smaller font size,
 * therefore target the actual text elements instead of only the wrapper.
 * Headings are deliberately excluded so project titles keep their size.
 */
.aw-project-body p,
.aw-project-body li,
.aw-project-body span,
.aw-project-body strong,
.aw-project-body b,
.aw-project-body em,
.aw-project-body a,
.aw-project-meta,
.aw-project-meta p,
.aw-project-meta li,
.aw-project-meta span,
.aw-project-meta strong,
.aw-project-meta b,
.aw-project-meta em,
.aw-project-meta a {
    font-family: var(--aw-font) !important;
    font-size: var(--aw-body) !important;
}

.aw-project-meta {
    margin-bottom: 0.833333vw;
    line-height: 1.5;
}

.aw-project-dots {
    display: flex !important;

    justify-content: center;

    gap: 0.333333vw;

    margin-top: 1.25vw;
}

.aw-project-dot {
    color: var(--aw-white);
    font-size: 0.5vw !important;
}

/* =========================================================
   OWNERS / BAUHERREN
   ========================================================= */

.aw-owners {
    width: 100% !important;

    padding: 0 0 4.166667vw !important;

    background: var(--aw-brown) !important;
}

.aw-owners .aw-owners-frame {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    background: #e3e0dd !important;

    display: grid !important;

    grid-template-columns:
        50%
        35%
        15% !important;

    align-items: stretch !important;
}

.aw-owners-image {
    grid-column: 1;
}

.aw-owners-image,
.aw-owners-image img {
    width: 100% !important;
    height: 32.5vw !important;

    object-fit: cover !important;
}

.aw-owners-copy {
    grid-column: 2;

    align-self: center;

    padding: 3.333333vw 0 3.333333vw 4.166667vw !important;
}

/* =========================================================
   FAQ
   ========================================================= */

.aw-faq {
    padding-block: 4.583333vw !important;
}

.aw-faq-grid {
    display: grid !important;

    width: 75vw !important;
    max-width: none !important;
    margin-inline: auto !important;

    grid-template-columns: 19.166667vw 1fr !important;

    gap: 3.333333vw !important;
}

.aw-faq-list {
    border-top: 0.052083vw solid var(--aw-text);
}

.aw-faq-item {
    margin: 0;
    border-bottom: 0.052083vw solid var(--aw-text);
}

.aw-faq-item summary {
    position: relative;

    padding: 0.833333vw 0;

    list-style: none;
    cursor: pointer;

    font-size: var(--aw-body) !important;
}

.aw-faq-item summary::-webkit-details-marker {
    display: none;
}

.aw-faq-item summary::before {
    content: "+";

    display: inline-block;

    width: 1.416667vw;
}

.aw-faq-item[open] summary::before {
    content: "–";
}

.aw-faq-answer {
    padding: 0 1.416667vw 0.833333vw;

    font-size: var(--aw-body) !important;
    line-height: 1.5;
}

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

.aw-contact {
    padding-block: 4.583333vw !important;
    background: var(--aw-taupe) !important;
}

.aw-contact-grid {
    display: grid !important;

    width: 75vw !important;
    max-width: none !important;
    margin-inline: auto !important;

    grid-template-columns: 40% 60% !important;

    gap: 3.75vw !important;
    align-items: center !important;
}

.aw-person {
    text-align: center;
}

.aw-person-circle {
    width: 12.916667vw !important;
    height: 12.916667vw !important;

    margin: 0 auto 2.083333vw !important;

    border-radius: 50%;

    background: var(--aw-dark);
}

.aw-person-quote {
    margin-bottom: 0.291667vw;
    font-size: var(--aw-body) !important;
}

.aw-person-meta {
    font-size: var(--aw-body) !important;
}

.aw-contact-buttons {
    display: flex !important;

    justify-content: center;

    gap: 1.041667vw;

    margin-top: 2.083333vw;
}

.aw-form-wrap {
    max-width: none;
}

.aw-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 0.833333vw 1.25vw !important;

    margin-top: 1.25vw;
}

.aw-form label {
    display: block;
    font-size: var(--aw-body) !important;
}

.aw-form input,
.aw-form select,
.aw-form textarea {
    width: 100%;

    margin-top: 0.291667vw;

    padding: 0.625vw;

    border: 0;
    border-radius: 0;

    background: var(--aw-white);

    font: inherit;
    font-size: var(--aw-body) !important;
}

.aw-form textarea {
    min-height: 5.833333vw;
    resize: vertical;
}

.aw-form .aw-full {
    grid-column: 1 / -1;
}

.aw-form button {
    justify-self: end;

    padding: 0.666667vw 1.041667vw;

    border: 0;

    background: var(--aw-brown);
    color: var(--aw-white);

    cursor: pointer;

    font-size: var(--aw-small);
}

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

.aw-footer {
    padding: 3.125vw 0 1.458333vw !important;

    background: var(--aw-dark) !important;
    color: var(--aw-white);
}

.aw-footer-grid {
    display: grid !important;

    width: 75vw !important;
    max-width: none !important;
    margin-inline: auto !important;

    grid-template-columns: 1.2fr 1fr 1fr 1fr !important;

    gap: 2.5vw !important;
    align-items: start !important;
}

.aw-footer .aw-logo {
    width: 7.5vw !important;
    height: 5vw !important;
    max-width: none !important;
}

.aw-footer-text {
    color: var(--aw-white);

    font-size: var(--aw-body) !important;
    line-height: 1.5;
}

.aw-footer-bottom {
    grid-column: 1 / -1;

    display: flex !important;

    justify-content: space-between;

    gap: 1.666667vw;

    margin-top: 1.25vw;
    padding-top: 0.833333vw;

    border-top: 0.052083vw solid rgba(255,255,255,0.4);
}

.aw-footer-small {
    color: #d8d1c9;
    font-size: var(--aw-body) !important;
}

/* =========================================================
   REGULAR TEXT NORMALIZATION — 21px / 1.3125rem
   Keeps normal content consistent even when Bricks nests
   paragraphs, spans, links, or rich-text elements.
   ========================================================= */

.aw-step-copy,
.aw-step-copy p,
.aw-section-intro,
.aw-section-intro p,
.aw-service-copy,
.aw-service-copy p,
.aw-project-meta,
.aw-project-meta p,
.aw-faq-item summary,
.aw-faq-answer,
.aw-faq-answer p,
.aw-person-quote,
.aw-person-quote p,
.aw-person-meta,
.aw-footer-text,
.aw-footer-text p,
.aw-footer-text a,
.aw-footer-small,
.aw-footer-small p,
.aw-footer-small a,
.aw-form label,
.aw-form input,
.aw-form select,
.aw-form textarea {
    font-size: var(--aw-body) !important;
}

/* =========================================================
   RESPONSIVE SWITCH
   Below 1200px, stop proportional UHD-style scaling.
   ========================================================= */

@media (max-width: 74.999rem) {

    :root {
        --aw-h1: 2.75rem;
        --aw-h2: 2.125rem;
        --aw-h3: 1.65rem;
        --aw-teaser: 1.25rem;
        --aw-body: 1.3125rem; /* 21px */
        --aw-small: 1.3125rem; /* 21px */
        --aw-xs: 0.8rem;
        --aw-section-y: 4.5rem;
        --aw-radius: 0.25rem;
    }

    body {
        font-size: var(--aw-body);
    }

    .aw-container,
    .aw-stats-grid,
    .aw-problem-grid,
    .aw-network-grid,
    .aw-projects > .aw-container,
    .aw-services > .aw-container,
    .aw-faq-grid,
    .aw-contact-grid,
    .aw-footer-grid {
        width: calc(100% - 4rem) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    .aw-header .aw-header-inner {
        width: calc(100% - 4rem) !important;
        min-height: 6.5rem;

        gap: 2rem !important;
    }

    .aw-header .aw-logo {
        width: 7rem !important;
        height: 4.5rem !important;
    }

    .aw-header .aw-nav {
        gap: 1rem !important;
    }

    .aw-header .aw-nav-link {
        font-size: 0.85rem !important;
    }


    .aw-hero-overlay {
        width: 65% !important;
        padding-bottom: 3rem !important;
    }

    .aw-social-rail {
        display: none !important;
    }

    .aw-intro {
        padding-block: var(--aw-section-y) !important;
    }

    .aw-intro .aw-two-col {
        width: calc(100% - 4rem) !important;
        margin-inline: auto !important;

        grid-template-columns: 42% 58% !important;
    }

    .aw-intro .aw-copy-col {
        grid-column: 1;

        padding: 2rem 2.5rem 2rem 0 !important;
    }

    .aw-intro .aw-image-col {
        grid-column: 2;
    }

    .aw-stats {
        padding: 3rem 0 !important;
    }

    .aw-stats-grid {
        width: calc(100% - 4rem) !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .aw-stat {
        min-height: 9rem;
        padding: 1.5rem 2rem !important;
        border-bottom: 1px solid var(--aw-text) !important;
    }

    .aw-stat:nth-child(2n)::after {
        display: none;
    }

    .aw-stat-big {
        margin-bottom: 1rem;
        font-size: 2.5rem !important;
    }

    .aw-stat-big small {
        font-size: 1rem !important;
    }

    .aw-stat-small {
        font-size: var(--aw-body) !important;
    }

    .aw-problem-grid,
    .aw-network-grid,
    .aw-project-head,
    .aw-faq-grid,
    .aw-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    .aw-problem-copy {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .aw-journey-wrap {
        width: calc(100% - 4rem) !important;
        max-width: 70rem !important;
    }

    .aw-steps-grid {
        gap: 1rem !important;
    }

    .aw-step-card {
        min-height: 11rem;
        padding: 2rem 2rem 1.5rem 5rem !important;
    }

    .aw-step-num {
        left: 1.5rem;
        top: 1.5rem;
        font-size: 3rem !important;
    }

    .aw-step-title {
        font-size: 1.25rem !important;
    }

    .aw-step-copy,
    .aw-section-intro,
    .aw-service-copy,
    .aw-project-meta,
    .aw-faq-item summary,
    .aw-faq-answer,
    .aw-footer-text,
    .aw-footer-small,
    .aw-person-meta,
    .aw-person-quote,
    .aw-form label,
    .aw-form input,
    .aw-form textarea,
    .aw-form select {
        font-size: var(--aw-body) !important;
    }

    .aw-services-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem 1.5rem !important;
    }

    .aw-service-card:nth-child(4),
    .aw-service-card:nth-child(5) {
        grid-column: auto;
    }

    .aw-service-image,
    .aw-service-image img,
    .aw-project-image,
    .aw-project-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }

    .aw-project-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }

    .aw-owners .aw-owners-frame {
        grid-template-columns: 1fr 1fr !important;
    }

    .aw-owners-image,
    .aw-owners-copy {
        grid-column: auto;
    }

    .aw-owners-image,
    .aw-owners-image img {
        height: auto !important;
        aspect-ratio: 1.15 / 1;
    }

    .aw-owners-copy {
        padding: 3rem !important;
    }

    .aw-person-circle {
        width: 12rem !important;
        height: 12rem !important;
    }

    .aw-form {
        gap: 1rem 1.5rem !important;
        margin-top: 1.5rem;
    }

    .aw-form input,
    .aw-form textarea,
    .aw-form select {
        padding: 0.75rem;
        margin-top: 0.35rem;
    }

    .aw-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }

    .aw-footer .aw-logo {
        width: 8rem !important;
        height: 5rem !important;
    }
}

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

@media (max-width: 47.999rem) {

    :root {
        --aw-h1: 2.125rem;
        --aw-h2: 1.75rem;
        --aw-h3: 1.5rem;
        --aw-teaser: 1.1875rem;
        --aw-body: 1.3125rem; /* 21px */
        --aw-section-y: 4rem;
    }

    .aw-container,
    .aw-stats-grid,
    .aw-problem-grid,
    .aw-network-grid,
    .aw-projects > .aw-container,
    .aw-services > .aw-container,
    .aw-faq-grid,
    .aw-contact-grid,
    .aw-footer-grid {
        width: calc(100% - 2rem) !important;
    }

    .aw-header .aw-header-inner {
        width: calc(100% - 2rem) !important;
    }

    .aw-header .aw-nav {
        display: none !important;
    }

    .aw-hero .aw-hero-frame {
        width: calc(100% - 2rem) !important;
        aspect-ratio: auto;
        height: 35rem !important;
    }

    .aw-hero-overlay {
        width: 90% !important;
        padding-bottom: 2.5rem !important;
    }

    .aw-intro .aw-two-col {
        width: calc(100% - 2rem) !important;

        grid-template-columns: 1fr !important;

        gap: 2rem !important;
    }

    .aw-intro .aw-copy-col,
    .aw-intro .aw-image-col {
        grid-column: 1;

        padding: 0 !important;
    }

    .aw-intro .aw-square-image img {
        aspect-ratio: 1.35 / 1;
    }

    .aw-stats-grid,
    .aw-steps-grid,
    .aw-services-grid,
    .aw-project-grid,
    .aw-footer-grid,
    .aw-form {
        grid-template-columns: 1fr !important;
    }

    .aw-stat {
        min-height: auto;
        padding: 1.75rem 0 !important;
        border-bottom: 1px solid var(--aw-text) !important;
    }

    .aw-stat:last-child {
        border-bottom: 0 !important;
    }

    .aw-stat::after {
        display: none !important;
    }

    .aw-stat-big {
        font-size: 2.25rem !important;
    }

    .aw-stat-small {
        font-size: var(--aw-body) !important;
    }

    .aw-project-image,
    .aw-project-image img,
    .aw-service-image,
    .aw-service-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }

    .aw-owners .aw-owners-frame {
        grid-template-columns: 1fr !important;
    }

    .aw-owners-copy {
        padding: 2rem !important;
    }

    .aw-contact-buttons,
    .aw-btn-row {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .aw-contact-buttons .aw-btn,
    .aw-btn-row .aw-btn {
        width: 100% !important;
    }

    .aw-form .aw-full {
        grid-column: auto;
    }

    .aw-footer-bottom {
        display: block !important;
    }
}


/* =========================================================
   PROJECT SLIDER — FINAL 21PX COPY SAFEGUARD
   Keep this at the end so Bricks element styles cannot shrink
   AUSGANGSLAGE / GEWERKE / descriptive text to 15–16px.
   ========================================================= */
.aw-projects .aw-project-body,
.aw-projects .aw-project-body p,
.aw-projects .aw-project-body li,
.aw-projects .aw-project-body span,
.aw-projects .aw-project-body strong,
.aw-projects .aw-project-body b,
.aw-projects .aw-project-body em,
.aw-projects .aw-project-body a,
.aw-projects .aw-project-meta,
.aw-projects .aw-project-meta p,
.aw-projects .aw-project-meta li,
.aw-projects .aw-project-meta span,
.aw-projects .aw-project-meta strong,
.aw-projects .aw-project-meta b,
.aw-projects .aw-project-meta em,
.aw-projects .aw-project-meta a {
    font-size: 1.3125rem !important; /* 21px */
}


/* =========================================================
   v1.8 — FINAL TYPOGRAPHY ENFORCEMENT
   Regular content + project slider + buttons = 21px / 1.3125rem
   Headings remain controlled by --aw-h1/--aw-h2/--aw-h3.
   ========================================================= */

:root {
    --aw-body: 1.3125rem;  /* 21px */
    --aw-small: 1.3125rem; /* 21px */
}

/* Regular text everywhere */
body,
p,
li,
dd,
dt,
blockquote,
figcaption,
label,
input,
select,
textarea,
.aw-body,
.aw-small,
.aw-step-copy,
.aw-section-intro,
.aw-service-copy,
.aw-project-meta,
.aw-faq-item summary,
.aw-faq-answer,
.aw-person-quote,
.aw-person-meta,
.aw-footer-text,
.aw-footer-small {
    font-size: 1.3125rem !important;
}

.aw-footer-small {
    color: #d8d1c9;
    font-size: var(--aw-body) !important;
}

/* Project slider/card copy — also catch native Bricks text wrappers */
.aw-projects p,
.aw-projects li,
.aw-projects .brxe-text,
.aw-projects .brxe-text-basic,
.aw-projects .brxe-post-content,
.aw-projects .brxe-text p,
.aw-projects .brxe-text li,
.aw-projects .brxe-text span,
.aw-projects .brxe-text strong,
.aw-projects .brxe-text b,
.aw-projects .brxe-text-basic span,
.aw-projects .brxe-text-basic strong,
.aw-projects .aw-project-body,
.aw-projects .aw-project-body p,
.aw-projects .aw-project-body li,
.aw-projects .aw-project-body span,
.aw-projects .aw-project-body strong,
.aw-projects .aw-project-body b,
.aw-projects .aw-project-meta,
.aw-projects .aw-project-meta p,
.aw-projects .aw-project-meta li,
.aw-projects .aw-project-meta span,
.aw-projects .aw-project-meta strong,
.aw-projects .aw-project-meta b {
    font-size: 1.3125rem !important;
}

/* Buttons: visible label and nested Bricks spans */
.aw-btn,
.aw-link-btn,
.bricks-button,
a.bricks-button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.aw-btn span,
.aw-link-btn span,
.bricks-button span,
.bricks-button .bricks-button-text,
button span {
    font-size: 1.3125rem !important;
}

/* Responsive: never shrink normal copy or buttons */
@media (max-width: 74.999rem) {
    :root {
        --aw-body: 1.3125rem;
        --aw-small: 1.3125rem;
    }
}

@media (max-width: 47.999rem) {
    :root {
        --aw-body: 1.3125rem;
        --aw-small: 1.3125rem;
        --aw-xs: 1rem; /* minimum 16px on mobile */
    }
}

/* =========================================================
   HERO — FINAL POSITION OVERRIDE
   Must stay at END of stylesheet
   ========================================================= */

.aw-hero > .awh-root .awh-viewport .awh-stage .awh-panel .awh-content {
    position: absolute !important;

    left: 8vw !important;
    right: auto !important;

    bottom: 20% !important;

    width: 42vw !important;
    max-width: 42vw !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
}

.aw-hero > .awh-root .awh-viewport > .awh-dots {
    left: 8vw !important;
    right: auto !important;
}

/* =========================================================
   HERO SLIDER — SMOOTHER TRANSITION
   ========================================================= */

.awh-root .awh-panel {
    transition:
            transform 1.4s cubic-bezier(.22,.61,.36,1),
            opacity 1.1s ease !important;
}


/* Incoming slide */
.awh-root .awh-panel.is-entering {
    opacity: 0 !important;
}


/* Active / fully visible */
.awh-root .awh-panel.is-active {
    opacity: 1 !important;
}


/* Leaving slide */
.awh-root .awh-panel.is-leaving {
    opacity: 0 !important;
}

/* =========================================================
   HEADER — FIXED PIXEL HEIGHT
   ========================================================= */

/* Header */
#brx-header,
#brxe-wamthk {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
}

/* Inner container */
#brxe-uprdes {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#brx-header {
    position: fixed;
    top: 0;
    z-index: 9999;
	min-height:150px!important
}

.aw-step-title::after,
.aw-step-title:after,
.aw-service-title::after,
.aw-service-title:after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
}