* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #151515;
    background: #fff;
}

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

.area-detail-header {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;

    height: 110px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 6vw;

    color: #fff;
}

.area-detail-logo img {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.area-detail-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.area-detail-nav a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.area-detail-nav a:hover {
    opacity: .65;
}


/* HERO */

.area-detail-hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    color: #fff;
}

.area-detail-bg {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;
}

.area-detail-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.85) 0%,
            rgba(5,5,5,.60) 42%,
            rgba(5,5,5,.18) 78%,
            rgba(5,5,5,.08) 100%
        );
}

.area-detail-hero-content {
    position: relative;
    z-index: 2;

    width: min(820px, 85%);

    margin-left: 7vw;

    padding-bottom: 10vh;
}

.area-detail-index {
    margin-bottom: 24px;

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

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .20em;
}

.area-detail-icon {
    display: block;

    margin-bottom: 28px;

    font-size: 55px;
    line-height: 1;

    font-style: normal;

    color: #fff;
}

.area-detail-hero h1 {
    margin: 0;

    font-size: clamp(68px, 9vw, 145px);
    line-height: .82;

    letter-spacing: -.06em;

    text-transform: uppercase;
}

.area-detail-lead {
    max-width: 650px;

    margin-top: 32px;

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

    font-size: 18px;
    line-height: 1.7;
}

.area-detail-scroll {
    position: absolute;

    right: 6vw;
    bottom: 8vh;

    z-index: 3;

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

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .14em;
}


/* CONTEÚDO */

.area-detail-main {
    max-width: 1400px;

    margin: auto;

    padding: 130px 7vw;
}

.area-detail-intro {
    display: grid;

    grid-template-columns:
        minmax(300px, .8fr)
        minmax(400px, 1.2fr);

    gap: 100px;
}

.area-detail-intro .eyebrow {
    margin: 0 0 20px;

    color: #888;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .20em;
}

.area-detail-intro h2 {
    margin: 0;

    font-size: clamp(43px, 5vw, 72px);
    line-height: .98;

    letter-spacing: -.05em;
}

.area-detail-copy {
    color: #555;

    font-size: 17px;
    line-height: 1.85;
}

.area-detail-copy p:first-child {
    margin-top: 0;
}


/* EMPRESAS */

.area-companies {
    padding: 125px 6vw;

    background: #111;

    color: #fff;
}

.area-companies-inner {
    max-width: 1400px;

    margin: auto;
}

.area-companies-heading {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;

    margin-bottom: 60px;
}

.area-companies-heading p {
    margin: 0 0 15px;

    color: #777;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .2em;
}

.area-companies-heading h2 {
    margin: 0;

    font-size: clamp(42px, 5vw, 72px);
    line-height: .95;

    letter-spacing: -.05em;
}

.company-grid {
    display: grid;

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

    gap: 12px;
}

.company-card {
    position: relative;

    min-height: 300px;

    padding: 32px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    border: 1px solid #292929;

    overflow: hidden;

    background: #171717;

    transition:
        background .3s ease,
        transform .3s ease;
}

.company-card:hover {
    background: #1f1f1f;

    transform: translateY(-4px);
}

.company-card-country {
    margin-bottom: auto;

    color: #777;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;
}

.company-card h3 {
    margin: 0 0 15px;

    font-size: 29px;
    line-height: 1.05;
}

.company-card p {
    max-width: 400px;

    margin: 0;

    color: #999;

    font-size: 14px;
    line-height: 1.65;
}

.company-card-link {
    margin-top: 25px;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* OUTRAS ÁREAS */

.other-areas {
    padding: 120px 6vw;
}

.other-areas-inner {
    max-width: 1400px;

    margin: auto;
}

.other-areas h2 {
    margin: 0 0 45px;

    font-size: clamp(38px, 4vw, 60px);

    letter-spacing: -.04em;
}

.other-areas-grid {
    display: grid;

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

    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.other-areas-grid a {
    padding: 28px 18px;

    border-right: 1px solid #ddd;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;

    transition:
        background .2s ease,
        color .2s ease;
}

.other-areas-grid a:last-child {
    border-right: 0;
}

.other-areas-grid a:hover {
    background: #111;
    color: #fff;
}


/* FOOTER */

.area-footer {
    background: #111;

    color: #fff;
}

.area-footer-inner {
    max-width: 1400px;

    margin: auto;

    padding: 70px 6vw 40px;

    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;
}

.area-footer img {
    width: 100px;
}

.area-footer p {
    color: #777;

    font-size: 12px;
}

.area-footer a {
    color: #aaa;
}

.area-footer a:hover {
    color: #fff;
}


/* MOBILE */

@media (max-width: 900px) {

    .area-detail-header {
        height: 90px;
    }

    .area-detail-nav {
        gap: 15px;
    }

    .area-detail-nav a:not(.area-home-link) {
        display: none;
    }

    .area-detail-intro {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .company-grid {
        grid-template-columns: 1fr;
    }

    .other-areas-grid {
        grid-template-columns: 1fr 1fr;
    }

    .other-areas-grid a {
        border-bottom: 1px solid #ddd;
    }

    .area-footer-inner {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 550px) {

    .area-detail-logo img {
        width: 75px;
        height: 75px;
    }

    .area-detail-hero-content {
        width: auto;

        margin-left: 25px;
        margin-right: 25px;
    }

    .area-detail-hero h1 {
        font-size: 54px;
    }

    .area-detail-lead {
        font-size: 16px;
    }

    .area-detail-scroll {
        display: none;
    }

    .area-detail-main {
        padding: 85px 25px;
    }

    .area-companies {
        padding: 85px 25px;
    }

    .area-companies-heading {
        display: block;
    }

    .other-areas {
        padding: 85px 25px;
    }

}


/* ==========================================================
   HEADER + FOOTER
   Iguais à homepage Grupo JAMO
   ========================================================== */


/*
   O header vem diretamente da homepage.
   Mantemos sobre a fotografia do hero.
*/

body > .header {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 100 !important;
}


/*
   Garantir contraste do menu sobre a fotografia.
*/

body > .header,
body > .header a {
    color: #fff;
}


/*
   O hero começa diretamente no topo,
   por baixo do header.
*/

.area-detail-hero {
    margin-top: 0 !important;
}


/*
   O footer passa a usar integralmente
   o estilo da homepage.
*/

body > footer {
    margin-top: 0;
}


/* ==========================================================
   PÁGINA INDIVIDUAL — preservar o visual aprovado
   ========================================================== */

.area-detail-hero-content {
    z-index: 4 !important;

    width: min(1050px, 88%) !important;

    margin-left: 5.3vw !important;

    padding-bottom: 8vh !important;
}


.area-detail-icon {
    margin-bottom: 24px !important;

    font-size: 56px !important;
}


.area-detail-index {
    margin-bottom: 21px !important;

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

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: .20em !important;
}


.area-detail-hero h1 {
    margin: 0 !important;

    color: #fff !important;

    font-size: clamp(
        72px,
        9.6vw,
        155px
    ) !important;

    line-height: .80 !important;

    letter-spacing: -.065em !important;

    text-transform: uppercase !important;
}


.area-detail-lead {
    max-width: 850px !important;

    margin-top: 34px !important;

    color: rgba(255,255,255,.76) !important;

    font-size: 19px !important;

    line-height: 1.7 !important;
}


/*
   Escurecimento semelhante ao bloco
   das áreas da homepage.
*/

.area-detail-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.88) 0%,
            rgba(5,5,5,.68) 38%,
            rgba(5,5,5,.24) 72%,
            rgba(5,5,5,.12) 100%
        ) !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    body > .header {
        height: 90px !important;
    }

}


@media (max-width: 600px) {

    .area-detail-hero-content {
        width: auto !important;

        margin-left: 25px !important;
        margin-right: 25px !important;

        padding-bottom: 9vh !important;
    }

    .area-detail-hero h1 {
        font-size: clamp(
            50px,
            16vw,
            74px
        ) !important;
    }

    .area-detail-lead {
        font-size: 16px !important;
    }

}


/* ==========================================================
   FIX DEFINITIVO — HEADER IGUAL À HOMEPAGE
   ========================================================== */

body > header.header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

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

    padding: 0 7vw !important;

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

    z-index: 1000 !important;

    background: transparent !important;

    overflow: visible !important;
}


/* LOGÓTIPO — impedir qualquer ampliação */

body > header.header > a.logo {
    position: relative !important;

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

    width: 92px !important;
    height: 92px !important;

    min-width: 92px !important;
    max-width: 92px !important;

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

    overflow: hidden !important;

    flex: 0 0 92px !important;
}


body > header.header > a.logo img {
    position: static !important;

    display: block !important;

    width: 92px !important;
    height: 92px !important;

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

    max-width: 92px !important;
    max-height: 92px !important;

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

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

    transform: none !important;

    inset: auto !important;
}


/* MENU */

body > header.header .nav {
    position: static !important;

    display: flex !important;
    align-items: center !important;

    gap: 34px !important;

    width: auto !important;
    height: auto !important;

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

    background: transparent !important;
}


body > header.header .nav a {
    position: relative !important;

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

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

    color: #fff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    letter-spacing: .07em !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;
}


/* ==========================================================
   HERO — garantir que nada do header interfere
   ========================================================== */

.area-detail-hero {
    position: relative !important;

    z-index: 1 !important;

    margin: 0 !important;

    width: 100% !important;

    min-height: 100vh !important;
    min-height: 100svh !important;

    overflow: hidden !important;
}


.area-detail-bg {
    position: absolute !important;

    inset: 0 !important;

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

    z-index: 0 !important;

    background-size: cover !important;
    background-position: center !important;
}


.area-detail-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;
}


.area-detail-hero-content {
    position: relative !important;

    z-index: 3 !important;
}


/* ==========================================================
   FOOTER — LOGÓTIPO COM TAMANHO CONTROLADO
   ========================================================== */

body > footer .footer-brand img {
    position: static !important;

    width: 110px !important;
    height: auto !important;

    max-width: 110px !important;
    max-height: 130px !important;

    object-fit: contain !important;

    transform: none !important;
}


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

@media (max-width: 900px) {

    body > header.header {
        height: 90px !important;

        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    body > header.header > a.logo {
        width: 76px !important;
        height: 76px !important;

        min-width: 76px !important;
        max-width: 76px !important;

        flex-basis: 76px !important;
    }

    body > header.header > a.logo img {
        width: 76px !important;
        height: 76px !important;

        max-width: 76px !important;
        max-height: 76px !important;
    }

}


@media (max-width: 650px) {

    body > header.header .nav {
        display: none !important;
    }

    body > header.header .menu-toggle {
        display: block !important;
    }

}



/* ==========================================================
   HERO PÁGINA INDIVIDUAL
   IGUAL ÀS ÁREAS DE ATIVIDADE DA HOMEPAGE
   ========================================================== */


.area-home-hero {
    position: relative !important;

    width: 100% !important;

    height: 100vh !important;
    min-height: 100svh !important;

    display: flex !important;
    align-items: flex-end !important;

    overflow: hidden !important;

    color: #fff !important;

    background: #111 !important;
}


/* ----------------------------------------------------------
   IMAGEM
   ---------------------------------------------------------- */

.area-home-hero-bg {
    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

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

    background-size: cover !important;
    background-position: center !important;

    transform: scale(1.01);
}


/* ----------------------------------------------------------
   OVERLAY
   ---------------------------------------------------------- */

.area-home-hero-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.88) 0%,
            rgba(5,5,5,.67) 38%,
            rgba(5,5,5,.22) 72%,
            rgba(5,5,5,.10) 100%
        ) !important;
}


.area-home-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.48),
            transparent 48%
        );
}


/* ----------------------------------------------------------
   TOPO
   ---------------------------------------------------------- */

.area-home-hero-top {
    position: absolute !important;

    z-index: 5 !important;

    top: 55px !important;

    left: 5.8vw !important;
    right: 5.8vw !important;

    display: flex !important;

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

    color: rgba(255,255,255,.63) !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: .18em !important;
}


.area-home-hero-top strong {
    color: rgba(255,255,255,.78) !important;

    font-size: 11px !important;

    font-weight: 600 !important;
}


/*
   Como o header da homepage está também no topo,
   afastamos esta indicação apenas nas páginas individuais.
*/

body > header.header + .area-home-hero
.area-home-hero-top {
    top: 145px !important;
}


/* ----------------------------------------------------------
   CONTEÚDO
   ---------------------------------------------------------- */

.area-home-hero-content {
    position: relative !important;

    z-index: 5 !important;

    width: min(880px, 84%) !important;

    margin-left: 5.8vw !important;

    padding-bottom: 7vh !important;
}


/* ----------------------------------------------------------
   ÍCONE
   ---------------------------------------------------------- */

.area-home-hero-icon {
    display: block !important;

    margin: 0 0 24px !important;

    color: #fff !important;

    font-size: 52px !important;

    line-height: 1 !important;

    font-style: normal !important;

    font-weight: normal !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ----------------------------------------------------------
   ÁREA DE ATIVIDADE
   ---------------------------------------------------------- */

.area-home-hero-kicker {
    margin: 0 0 15px !important;

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

    font-size: 10px !important;

    font-weight: 700 !important;

    letter-spacing: .20em !important;
}


/* ----------------------------------------------------------
   TÍTULO
   ---------------------------------------------------------- */

.area-home-hero h1 {
    margin: 0 !important;

    color: #fff !important;

    font-size:
        clamp(
            62px,
            8.3vw,
            132px
        ) !important;

    line-height: .84 !important;

    letter-spacing: -.06em !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;
}


/* ----------------------------------------------------------
   DESCRIÇÃO
   ---------------------------------------------------------- */

.area-home-hero-description {
    max-width: 700px !important;

    margin: 27px 0 0 !important;

    color: rgba(255,255,255,.74) !important;

    font-size: 17px !important;

    line-height: 1.65 !important;
}


/* ----------------------------------------------------------
   EMPRESAS
   ---------------------------------------------------------- */

.area-home-hero-companies {
    display: flex !important;

    flex-wrap: wrap !important;

    gap: 9px !important;

    max-width: 780px !important;

    margin-top: 23px !important;
}


.area-hero-company {
    display: flex !important;

    flex-direction: column !important;

    min-width: 185px !important;

    padding: 12px 17px !important;

    border:
        1px solid rgba(255,255,255,.31) !important;

    background:
        rgba(0,0,0,.17) !important;

    color: #fff !important;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease !important;
}


.area-hero-company:hover {
    background:
        rgba(255,255,255,.12) !important;

    border-color:
        rgba(255,255,255,.7) !important;

    transform: translateY(-2px);
}


.area-hero-company strong {
    color: #fff !important;

    font-size: 12px !important;

    line-height: 1.25 !important;
}


.area-hero-company span {
    margin-top: 4px !important;

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

    font-size: 9px !important;

    font-weight: 600 !important;

    letter-spacing: .10em !important;

    text-transform: uppercase !important;
}


/* Logótipo de empresa no hero (ex.: CPB na área Automóvel) */

.area-hero-company-logo {
    min-width: 220px !important;
    min-height: 70px !important;

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

    padding: 14px 20px !important;
}


.area-hero-company-logo img {
    display: block !important;

    width: 180px !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 52px !important;

    object-fit: contain !important;
}


.area-hero-company-logo-light {
    background: rgba(255,255,255,.92) !important;
}


.area-hero-company-logo-light:hover {
    background: #fff !important;
}


.area-hero-company-logo-dark {
    background: rgba(20,20,20,.9) !important;
}


.area-hero-company-logo-dark:hover {
    background: #111 !important;
}


/* ----------------------------------------------------------
   CONHECER A ÁREA
   ---------------------------------------------------------- */

.area-home-hero-link {
    display: inline-flex !important;

    align-items: center !important;

    gap: 17px !important;

    margin-top: 25px !important;

    padding: 0 0 7px !important;

    border-bottom:
        1px solid rgba(255,255,255,.43) !important;

    color: #fff !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: .12em !important;

    text-transform: uppercase !important;
}


.area-home-hero-link span {
    font-size: 20px !important;

    transition: transform .25s ease;
}


.area-home-hero-link:hover span {
    transform: translateX(6px);
}


/* ----------------------------------------------------------
   SEGUINTE
   ---------------------------------------------------------- */

.area-home-hero-next {
    position: absolute !important;

    z-index: 6 !important;

    right: 5.8vw !important;

    bottom: 7vh !important;

    display: block !important;

    text-align: right !important;

    color: #fff !important;
}


.area-home-hero-next > span {
    display: block !important;

    margin-bottom: 7px !important;

    color:
        rgba(255,255,255,.42) !important;

    font-size: 9px !important;

    font-weight: 700 !important;

    letter-spacing: .18em !important;
}


.area-home-hero-next strong {
    color:
        rgba(255,255,255,.90) !important;

    font-size: 14px !important;

    font-weight: 600 !important;
}


/* ----------------------------------------------------------
   ECRÃ MAIS BAIXO
   ---------------------------------------------------------- */

@media
(max-height: 820px)
and
(min-width: 901px) {

    .area-home-hero-content {
        padding-bottom: 5vh !important;
    }

    .area-home-hero-icon {
        margin-bottom: 15px !important;

        font-size: 42px !important;
    }

    .area-home-hero h1 {
        font-size:
            clamp(
                52px,
                7vw,
                105px
            ) !important;
    }

    .area-home-hero-description {
        margin-top: 18px !important;

        font-size: 15px !important;
    }

    .area-home-hero-companies {
        margin-top: 16px !important;
    }

    .area-home-hero-link {
        margin-top: 17px !important;
    }

}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .area-home-hero-top {
        top: 120px !important;

        left: 25px !important;
        right: 25px !important;
    }

    .area-home-hero-content {
        width: auto !important;

        margin-left: 25px !important;
        margin-right: 25px !important;

        padding-bottom: 9vh !important;
    }

    .area-home-hero h1 {
        font-size:
            clamp(
                52px,
                13vw,
                90px
            ) !important;
    }

    .area-home-hero-next {
        display: none !important;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .area-home-hero-overlay {
        background:
            linear-gradient(
                to top,
                rgba(5,5,5,.94) 0%,
                rgba(5,5,5,.70) 56%,
                rgba(5,5,5,.15) 100%
            ) !important;
    }


    .area-home-hero-content {
        padding-bottom: 7vh !important;
    }


    .area-home-hero-icon {
        font-size: 42px !important;

        margin-bottom: 18px !important;
    }


    .area-home-hero-kicker {
        font-size: 9px !important;
    }


    .area-home-hero h1 {
        font-size:
            clamp(
                47px,
                15vw,
                70px
            ) !important;
    }


    .area-home-hero-description {
        font-size: 15px !important;

        margin-top: 18px !important;
    }


    .area-home-hero-companies {
        margin-top: 17px !important;

        gap: 6px !important;
    }


    .area-hero-company {
        min-width: 0 !important;

        flex:
            1 1
            calc(50% - 6px) !important;

        padding:
            10px 11px !important;
    }


    .area-hero-company strong {
        font-size: 10px !important;
    }


    .area-hero-company-logo {
        flex: 0 1 220px !important;
        min-height: 62px !important;
    }


    .area-hero-company-logo img {
        width: 165px !important;
        max-height: 44px !important;
    }


    .area-home-hero-link {
        margin-top: 18px !important;
    }

}


/* ==========================================================
   PÁGINAS DE ÁREA — VERSÃO EDITORIAL COMPACTA
   ========================================================== */

/* As empresas já estão identificadas e ligadas no hero. */
main > .area-companies {
    display: none !important;
}

main > .area-detail-main {
    padding: clamp(64px, 7vw, 100px) 6vw !important;
}

main > .area-detail-main .area-detail-intro {
    max-width: 1240px !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr) !important;
    gap: clamp(44px, 7vw, 110px) !important;
    align-items: start !important;
}

main > .area-detail-main .area-detail-intro h2 {
    font-size: clamp(42px, 5vw, 70px) !important;
}

main > .area-detail-main .area-detail-copy {
    max-width: 700px !important;
}

main > .area-detail-main .area-detail-copy p {
    font-size: 16px !important;
    line-height: 1.75 !important;
}

main > .other-areas {
    padding: clamp(52px, 6vw, 82px) 6vw !important;
    border-top: 1px solid #e5e5e5 !important;
}

main > .other-areas .other-areas-inner {
    max-width: 1240px !important;
}

main > .other-areas h2 {
    margin-bottom: 34px !important;
    font-size: clamp(30px, 3.6vw, 52px) !important;
}

main > .other-areas .other-areas-grid a {
    min-height: 62px !important;
    padding: 20px 16px !important;
}

body > footer {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    background: #111 !important;
    color: #fff !important;
}

body > footer .footer-main {
    width: min(1240px, 88%) !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 64px 0 54px !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) !important;
    gap: clamp(42px, 7vw, 100px) !important;
    align-items: start !important;
}

body > footer .footer-brand img {
    display: block !important;
    width: 90px !important;
    height: auto !important;
    margin: 0 0 20px !important;
}

body > footer .footer-brand p {
    max-width: 290px !important;
    margin: 0 !important;
    color: #888 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

body > footer .footer-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

body > footer .footer-links strong {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

body > footer .footer-links a {
    color: #999 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body > footer .footer-links a:hover {
    color: #fff !important;
}

body > footer .footer-bottom {
    padding: 22px 6vw !important;
    border-top: 1px solid #292929 !important;
    color: #777 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

body > footer .footer-bottom a {
    color: #999 !important;
}

@media (max-width: 900px) {
    main > .area-detail-main .area-detail-intro {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    body > footer .footer-main {
        grid-template-columns: 1fr 1fr !important;
    }

    body > footer .footer-brand {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 600px) {
    main > .area-detail-main,
    main > .other-areas {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    main > .other-areas .other-areas-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    body > footer .footer-main {
        width: auto !important;
        margin: 0 25px !important;
        padding: 52px 0 42px !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    body > footer .footer-brand {
        grid-column: auto !important;
    }

    body > footer .footer-bottom {
        padding: 20px 25px !important;
    }
}