/* =========================================================
   BRAND IDENTITY PAGE
   Admith Legacy Ltd
========================================================= */


/* =========================================================
   PAGE FOUNDATION
========================================================= */

.brand-page {
    position: relative;
    overflow: hidden;

    background: #ffffff;
    color: #000000;
}



/* =========================================================
   SHARED BRAND PAGE LABELS
========================================================= */

.brand-page .section-label {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 8px 14px;

    border: 1px solid rgba(91, 183, 128, 0.28);
    border-radius: 999px;

    background: rgba(91, 183, 128, 0.07);

    color: #4b9c6c;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================================
   01. HERO
========================================================= */

.brand-hero {
    position: relative;

    min-height: 92vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(91, 183, 128, 0.13),
            transparent 30%
        ),
        #f7faf8;
}


.brand-hero-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    pointer-events: none;
}


.brand-hero .container {
    position: relative;

    z-index: 2;

    min-height: 92vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    align-items: center;

    gap: 60px;
}


.brand-hero-content {
    max-width: 780px;

    padding: 100px 0;
}


.brand-hero-content .section-label {
    display: inline-flex;

    margin-bottom: 28px;
}


.brand-hero-content h1 {
    max-width: 800px;

    margin: 0 0 30px;

    color: #000000;

    font-size: clamp(3.5rem, 7vw, 7.8rem);
    font-weight: 700;

    line-height: 0.94;

    letter-spacing: -0.065em;
}


.brand-hero-content h1 span {
    color: #5bb780;
}


.brand-hero-content p {
    max-width: 610px;

    margin: 0 0 40px;

    color: #5f665f;

    font-size: 1.05rem;
    line-height: 1.85;
}


.brand-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


.brand-hero-actions .btn {
    min-width: 170px;
}


/* =========================================================
   HERO BRAND MARK
========================================================= */

.brand-hero-mark {
    position: relative;

    width: min(460px, 100%);
    aspect-ratio: 1;

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

    justify-self: center;
}


/* =========================================================
   HERO ORBIT RINGS
========================================================= */

.brand-mark-ring {
    position: absolute;

    border: 1px solid rgba(91, 183, 128, 0.38);

    border-radius: 50%;

    pointer-events: none;
}


.ring-one {
    width: 82%;
    height: 82%;

    animation:
        brandRotate 22s linear infinite;
}


.ring-two {
    width: 58%;
    height: 58%;

    border-style: dashed;

    animation:
        brandRotateReverse 16s linear infinite;
}


/* =========================================================
   HERO AL CORE
========================================================= */

.brand-mark-core {
    position: relative;

    width: 180px;
    height: 180px;

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

    border-radius: 50%;

    background: #000000;

    color: #ffffff;

    font-size: 3.5rem;
    font-weight: 700;

    letter-spacing: -0.08em;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.2);

    animation:
        brandCorePulse 5s ease-in-out infinite;
}


/* =========================================================
   AL CORE TEXT
========================================================= */

.brand-mark-core::before {
    content: "AL";

    display: block;

    color: #ffffff;

    transform-origin: center;

    animation:
        brandCoreText 5s ease-in-out infinite;
}


/*
   If "AL" is already written directly inside
   .brand-mark-core, hide the original text visually
   while preserving the element's structure.
*/

.brand-mark-core {
    font-size: 0;
}


.brand-mark-core::before {
    font-size: 3.5rem;
}


/* =========================================================
   IDENTITY ORBIT
========================================================= */

.brand-hero-mark::after {
    content: "IDENTITY";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 82%;
    height: 82%;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 3%;

    transform:
        translate(-50%, -50%)
        rotate(0deg);

    border: 1px solid transparent;

    border-radius: 50%;

    color: #4b9c6c;

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.28em;

    white-space: nowrap;

    pointer-events: none;

    animation:
        identityOrbit 18s linear infinite;
}


/* =========================================================
   HERO BRAND LABEL
========================================================= */

.brand-mark-label {
    position: absolute;

    bottom: 8%;

    padding: 10px 18px;

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 100px;

    background: rgba(255, 255, 255, 0.72);

    color: #4d554e;

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.2em;

    backdrop-filter: blur(12px);
}


/* =========================================================
   HERO FLOATING ORBITS
========================================================= */

.brand-hero-orbit {
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #5bb780;

    box-shadow:
        0 0 0 8px rgba(91, 183, 128, 0.1),
        0 0 30px rgba(174, 183, 91, 0.5);

    animation:
        brandFloat 5s ease-in-out infinite;
}


.brand-orbit-one {
    top: 25%;
    right: 12%;
}


.brand-orbit-two {
    right: 38%;
    bottom: 20%;

    width: 8px;
    height: 8px;

    animation-delay: -2s;
}


/* =========================================================
   02. INTRODUCTION
========================================================= */

.brand-introduction {
    padding: clamp(75px, 8vw, 120px) 0;

    background: #ffffff;
}


.brand-intro-grid {
    display: grid;

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

    gap: clamp(40px, 7vw, 100px);
}


.brand-intro-heading h2 {
    max-width: 600px;

    margin: 20px 0 0;

    font-size: clamp(2.5rem, 5vw, 5rem);

    line-height: 1;

    letter-spacing: -0.055em;
}


.brand-intro-content {
    padding-top: 35px;
}


.brand-intro-content p {
    max-width: 620px;

    margin: 0 0 24px;

    color: #656565;

    font-size: 1rem;

    line-height: 1.9;
}


/* =========================================================
   SHARED SECTION INTRO
========================================================= */

.brand-section-intro {
    max-width: 760px;

    margin-bottom: 50px;
}


.brand-section-intro h2 {
    max-width: 720px;

    margin: 20px 0;

    color: #000000;

    font-size: clamp(2.5rem, 5vw, 5.2rem);

    line-height: 1;

    letter-spacing: -0.055em;
}


.brand-section-intro p {
    max-width: 620px;

    margin: 0;

    color: #666666;

    line-height: 1.85;
}


/* =========================================================
   03. CAPABILITIES
========================================================= */

.brand-capabilities {
    padding: clamp(75px, 8vw, 125px) 0;

    background: #f7faf8;
}


.brand-capabilities-grid {
    display: grid;

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

    gap: 1px;

    background: rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(0, 0, 0, 0.1);
}


.brand-capability-card {
    position: relative;

    min-height: 350px;

    padding: 42px 36px;

    background: #f7faf8;

    transition:
        transform 0.45s ease,
        background 0.45s ease;
}


.brand-capability-card:hover {
    z-index: 2;

    transform: translateY(-8px);

    background: #ffffff;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.08);
}


.brand-card-number {
    display: block;

    color: #5bb780;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}


.brand-card-icon {
    margin: 45px 0 25px;

    color: #5bb780;

    font-size: 2.5rem;

    line-height: 1;
}


.brand-capability-card h3 {
    margin: 0 0 16px;

    font-size: 1.3rem;

    letter-spacing: -0.025em;
}


.brand-capability-card p {
    max-width: 340px;

    margin: 0;

    color: #666666;

    font-size: 0.9rem;

    line-height: 1.8;
}


/* =========================================================
   04. BRAND SYSTEM
========================================================= */

.brand-system {
    padding: clamp(80px, 9vw, 135px) 0;

    background: #000000;

    color: #ffffff;
}


.brand-system-grid {
    display: grid;

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

    gap: clamp(50px, 8vw, 120px);

    align-items: center;
}


.brand-system-visual {
    position: relative;

    min-height: 600px;

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

    border: 1px solid rgba(255, 255, 255, 0.12);

    background:
        radial-gradient(
            circle at center,
            rgba(91, 183, 128, 0.12),
            transparent 55%
        );
}


.system-panel {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.16);

    background: rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(10px);
}


.panel-main {
    width: 65%;
    height: 65%;

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

    padding: 40px;

    transform: rotate(-6deg);
}


.panel-main span {
    color: #72c993;

    font-size: 0.7rem;

    letter-spacing: 0.2em;
}


.panel-main strong {
    margin-top: 12px;

    color: #ffffff;

    font-size: clamp(2.5rem, 5vw, 5rem);

    line-height: 0.9;

    letter-spacing: -0.07em;
}


.panel-small {
    width: 90px;
    height: 90px;

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

    color: #ffffff;

    font-size: 2rem;
}


.panel-type {
    top: 12%;
    right: 12%;
}


.panel-shape {
    bottom: 15%;
    left: 12%;

    color: #72c993;
}


.panel-line {
    right: 18%;
    bottom: 12%;

    width: 100px;
    height: 30px;

    border-left: 0;
    border-right: 0;
}


.system-tag {
    position: absolute;

    right: 8%;
    bottom: 7%;

    color: rgba(255, 255, 255, 0.45);

    font-size: 0.6rem;

    letter-spacing: 0.2em;
}


.brand-system-content .section-label {
    color: #72c993;

    border-color: rgba(114, 201, 147, 0.35);

    background: rgba(114, 201, 147, 0.08);
}


.brand-system-content h2 {
    max-width: 650px;

    margin: 20px 0 30px;

    color: #ffffff;

    font-size: clamp(2.5rem, 5vw, 5rem);

    line-height: 1;

    letter-spacing: -0.055em;
}


.brand-system-content p {
    max-width: 600px;

    margin: 0 0 22px;

    color: rgba(255, 255, 255, 0.62);

    line-height: 1.85;
}


.brand-system-list {
    margin: 35px 0 0;

    padding: 0;

    list-style: none;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}


.brand-system-list li {
    display: flex;
    align-items: center;

    gap: 25px;

    padding: 20px 0;

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

    color: #ffffff;

    font-size: 0.9rem;
}


.brand-system-list li span {
    color: #72c993;

    font-size: 0.7rem;
}

/* =========================================================
   05. APPLICATIONS
   BUILT FOR REAL-WORLD USE
========================================================= */

.brand-applications {
    position: relative;

    padding: clamp(90px, 10vw, 150px) 0;

    background: #ffffff;
}


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

.brand-applications-grid {
    display: grid;

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

    gap: 24px;
}


/* =========================================================
   APPLICATION CARD
========================================================= */

.brand-application-card {
    position: relative;

    min-height: 560px;

    overflow: hidden;

    padding: 42px;

    border: 1px solid rgba(0, 0, 0, 0.1);

    background: #f7faf8;

    isolation: isolate;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


.brand-application-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.09);
}


/* =========================================================
   LARGE FEATURE CARD
========================================================= */

.application-large {
    grid-column: span 2;

    min-height: 600px;
}


/* =========================================================
   CARD NUMBER
========================================================= */

.application-number {
    position: relative;

    z-index: 10;

    display: block;

    color: #5bb780;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.15em;
}


/* =========================================================
   APPLICATION CONTENT
========================================================= */

.application-content {
    position: relative;

    z-index: 10;

    width: 48%;

    max-width: 470px;

    margin-top: 75px;
}


.application-content span {
    display: block;

    margin-bottom: 14px;

    color: #5bb780;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.application-content h3 {
    margin: 0 0 18px;

    color: #000000;

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

    line-height: 1.03;

    letter-spacing: -0.045em;
}


.application-content p {
    max-width: 420px;

    margin: 0;

    color: #666666;

    font-size: 0.95rem;

    line-height: 1.8;
}


/* =========================================================
   APPLICATION VISUALS
========================================================= */

.application-visual {
    position: absolute;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   LARGE FEATURE CARD VISUAL
========================================================= */

.application-large .application-content {
    width: 42%;

    max-width: 500px;
}


/* =========================================================
   WEB / APP SCREEN
========================================================= */

.visual-screen {
    right: 5%;

    bottom: -10%;

    width: 48%;

    height: 72%;

    padding: 22px;

    border-radius:
        16px
        16px
        0
        0;

    background: #000000;

    transform: rotate(5deg);

    box-shadow:
        -30px 30px 80px
        rgba(0, 0, 0, 0.18);
}


.screen-bar {
    width: 35%;

    height: 6px;

    margin-bottom: 30px;

    background: #5bb780;
}


.screen-content {
    width: 100%;

    height: 72%;

    background:
        linear-gradient(
            135deg,
            rgba(91, 183, 128, 0.35),
            rgba(255, 255, 255, 0.05)
        );
}


/* =========================================================
   DATA / ANALYTICS VISUAL
========================================================= */

.visual-cards {
    right: 35px;

    bottom: 35px;

    width: 40%;

    height: 45%;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding: 20px;

    background: #000000;
}


.visual-cards div {
    flex: 1;

    min-width: 0;

    height: 60%;

    background: #5bb780;
}


.visual-cards div:nth-child(2) {
    height: 80%;
}


.visual-cards div:nth-child(3) {
    height: 100%;
}


/* =========================================================
   DOCUMENT VISUAL
========================================================= */

.visual-document {
    right: 60px;

    bottom: 45px;

    width: 35%;

    height: 58%;

    padding: 30px;

    background: #000000;

    transform: rotate(7deg);

    box-shadow:
        -20px 25px 60px
        rgba(0, 0, 0, 0.15);
}


.visual-document div {
    width: 100%;

    height: 100%;

    border-top:
        8px solid
        #5bb780;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.12)
            0,
            rgba(255, 255, 255, 0.12)
            2px,
            transparent 2px,
            transparent 18px
        );
}

/* =========================================================
   06. PROCESS
========================================================= */

.brand-process {
    padding: clamp(75px, 8vw, 130px) 0;

    background: #f7faf8;
}


.brand-process-intro {
    max-width: 700px;

    margin-bottom: 55px;
}


.brand-process-intro h2 {
    margin: 20px 0;

    font-size: clamp(2.5rem, 5vw, 5rem);

    line-height: 1;

    letter-spacing: -0.055em;
}


.brand-process-intro p {
    max-width: 600px;

    margin: 0;

    color: #666666;

    line-height: 1.85;
}


.brand-process-grid {
    display: grid;

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

    border-top:
        1px solid rgba(0, 0, 0, 0.15);
}


.brand-process-card {
    min-height: 330px;

    padding: 38px 30px;

    border-right:
        1px solid rgba(0, 0, 0, 0.12);
}


.brand-process-card:last-child {
    border-right: 0;
}


.brand-process-card .process-number {
    display: block;

    width: fit-content;

    margin: 0 0 45px;

    color: #5bb780;

    font-size: 0.7rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.14em;
}


.brand-process-card h3 {
    display: block;

    margin: 0 0 18px;

    color: #000000;

    font-size: 1.5rem;

    line-height: 1.2;

    letter-spacing: -0.03em;
}


.brand-process-card p {
    max-width: 250px;

    margin: 0;

    color: #666666;

    font-size: 0.9rem;

    line-height: 1.8;
}


/* =========================================================
   07. AUDIENCE
========================================================= */

.brand-audience {
    padding: clamp(75px, 8vw, 130px) 0;

    background: #ffffff;
}


.brand-audience-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 80px;
}


.brand-audience-heading h2 {
    max-width: 600px;

    margin: 20px 0;

    font-size: clamp(2.5rem, 5vw, 5rem);

    line-height: 1;

    letter-spacing: -0.055em;
}


.brand-audience-list {
    border-top:
        1px solid rgba(0, 0, 0, 0.15);
}


.audience-item {
    display: grid;

    grid-template-columns:
        50px 1fr;

    column-gap: 20px;

    padding: 28px 0;

    border-bottom:
        1px solid rgba(0, 0, 0, 0.12);
}


.audience-item > span {
    color: #5bb780;

    font-size: 0.7rem;
    font-weight: 700;
}


.audience-item h3 {
    margin: 0 0 8px;

    font-size: 1.15rem;
}


.audience-item p {
    grid-column: 2;

    margin: 0;

    color: #666666;

    font-size: 0.88rem;
}


/* =========================================================
   08. FINAL CTA
========================================================= */

.brand-cta {
    position: relative;

    overflow: hidden;

    padding: clamp(90px, 11vw, 160px) 0;

    background: #000000;

    color: #ffffff;
}


.brand-cta-glow {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 600px;
    height: 600px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(91, 183, 128, 0.2),
            transparent 68%
        );

    pointer-events: none;
}


.brand-cta-inner {
    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


.brand-cta-inner .section-label {
    color: #72c993;

    border-color:
        rgba(114, 201, 147, 0.35);

    background:
        rgba(114, 201, 147, 0.08);
}


.brand-cta-inner h2 {
    margin: 25px 0;

    color: #ffffff;

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

    line-height: 0.95;

    letter-spacing: -0.065em;
}


.brand-cta-inner p {
    max-width: 600px;

    margin: 0 auto 40px;

    color:
        rgba(255, 255, 255, 0.65);

    line-height: 1.8;
}


/* =========================================================
   CTA BUTTON VISIBILITY FIX
========================================================= */

.brand-cta-inner .btn-primary {
    position: relative;

    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    min-height: 54px;

    border:
        1px solid #5bb780;

    background: #5bb780;

    color: #000000;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.brand-cta-inner .btn-primary:hover {
    transform: translateY(-3px);

    background: #ffffff;

    border-color: #ffffff;

    color: #000000;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes brandRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes brandRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes brandFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}


/* =========================================================
   AL CORE ANIMATION
========================================================= */

@keyframes brandCorePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }

}


@keyframes brandCoreText {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.85;
    }

}


/* =========================================================
   IDENTITY ORBIT ANIMATION
========================================================= */

@keyframes identityOrbit {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


/* =========================================================
   APPLICATIONS — TABLET
========================================================= */

@media (max-width: 1024px) {

    .brand-application-card {
        min-height: 560px;
    }


    .application-large {
        min-height: 600px;
    }


    .application-content,
    .application-large .application-content {
        width: 48%;

        max-width: 430px;
    }


    .visual-screen {
        right: 2%;

        width: 52%;

        height: 68%;
    }


    .visual-cards {
        right: 25px;

        width: 43%;

        height: 42%;
    }


    .visual-document {
        right: 40px;

        width: 40%;

        height: 55%;
    }

}


/* =========================================================
   APPLICATIONS — MOBILE
========================================================= */

@media (max-width: 768px) {

    .brand-applications-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .brand-application-card,
    .application-large {
        grid-column: auto;

        min-height: 620px;

        padding: 32px 28px;
    }


    /*
       On mobile, content takes
       the full width.
    */

    .application-content,
    .application-large .application-content {
        width: 100%;

        max-width: 100%;

        margin-top: 55px;
    }


    .application-content h3 {
        font-size:
            clamp(
                1.9rem,
                8vw,
                2.8rem
            );
    }


    .application-content p {
        max-width: 100%;
    }


    /*
       Move visuals to the bottom
       of the card so they don't
       interfere with the text.
    */

    .visual-screen {
        right: -5%;

        bottom: -8%;

        width: 68%;

        height: 40%;
    }


    .visual-cards {
        right: 20px;

        bottom: 25px;

        width: 50%;

        height: 28%;
    }


    .visual-document {
        right: 25px;

        bottom: 25px;

        width: 50%;

        height: 35%;
    }

}


/* =========================================================
   APPLICATIONS — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .brand-application-card,
    .application-large {
        min-height: 640px;

        padding: 28px 22px;
    }


    .application-content,
    .application-large .application-content {
        margin-top: 45px;
    }


    .application-content h3 {
        font-size: 2rem;
    }


    .visual-screen {
        right: -12%;

        width: 75%;

        height: 36%;
    }


    .visual-cards {
        right: 15px;

        width: 58%;

        height: 25%;
    }


    .visual-document {
        right: 20px;

        width: 55%;

        height: 32%;
    }

}


/* =========================================================
   BRAND IDENTITY — REMOVE UNWANTED SECTION NUMBER
========================================================= */

/*
   Prevent automatic numbering from appearing
   above the Brand Identity section heading.
*/

.brand-page .brand-section-intro::before,
.brand-page .brand-section-intro::after,
.brand-page .brand-section-intro .section-label::before,
.brand-page .brand-section-intro .section-label::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   BRAND IDENTITY — REMOVE UNWANTED HERO SECTION NUMBER
========================================================= */

/* Prevent global section-number pseudo-elements
   from appearing inside the Brand Identity hero */

.brand-hero::before,
.brand-hero::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   BRAND IDENTITY — FINAL HERO BUTTON FIX
========================================================= */

.brand-hero-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    min-height: 54px;

    padding: 14px 24px;

    border: 1px solid #000000;
    border-radius: 999px;

    background: #ffffff;
    color: #000000;

    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    opacity: 1;
    visibility: visible;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.brand-hero-actions .btn-secondary:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;

    transform: translateY(-3px);
}

.brand-hero-actions .btn-secondary:focus-visible {
    outline: 3px solid rgba(91, 183, 128, 0.45);
    outline-offset: 4px;
}