/* =========================================================
   MADEIRA HELPER — CLEAN STYLESHEET
   Consolidated homepage styles
========================================================= */

:root {
    --green: #167d5a;
    --green-dark: #0d5b42;
    --green-light: #d3eadb;
    --blue: #27a8e0;
    --blue-light: #cfeefa;
    --yellow: #ffd45c;
    --yellow-light: #ffe59a;
    --coral: #ff6b57;
    --coral-dark: #e94e3b;
    --coral-light: #ffd2ca;
    --cream: #f8f3e9;
    --cream-light: #fffdf8;
    --dark: #12211b;
    --dark-soft: #34483f;
    --grey: #6b7a73;
    --white: #ffffff;
    --border: rgba(18, 33, 27, 0.12);
    --shadow: 0 18px 50px rgba(18, 33, 27, 0.10);
    --shadow-big: 0 25px 60px rgba(18, 33, 27, 0.16);
    --radius: 28px;
    --radius-lg: 42px;
}

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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--cream);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
}

.container {
    width: min(1240px, 92%);
    margin-inline: auto;
}

.section-label {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--coral);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.8px;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cream);
    border-bottom: 1px solid rgba(18, 33, 27, 0.08);
}

.header-inner {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: 165px;
    height: auto;
    object-fit: contain;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.main-nav a {
    position: relative;
    padding: 10px 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-soft);
    transition: color 0.2s ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 3px;
    height: 2px;
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--dark);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--dark);
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 800;
    transition: transform 0.25s ease, background 0.25s ease;
}

.nav-button:hover {
    background: var(--coral);
    transform: translateY(-2px);
}

.nav-button span {
    transition: transform 0.25s ease;
}

.nav-button:hover span {
    transform: translateX(4px);
}

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

.menu-toggle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--dark);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--white);
    border-radius: 100px;
    transition: 0.3s ease;
}

.mobile-menu {
    max-height: 0;
    overflow: hidden;
    background: var(--cream);
    transition: max-height 0.35s ease;
}

.mobile-menu.open {
    max-height: 500px;
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    padding: 15px 0 30px;
}

.mobile-menu a {
    padding: 15px 0;
    font-size: 1.1rem;
    font-weight: 800;
    border-bottom: 1px solid rgba(18, 33, 27, 0.08);
}

.mobile-help-button {
    margin-top: 15px;
    text-align: center;
    background: var(--coral);
    color: var(--white);
    padding: 14px !important;
    border-radius: 999px;
    border-bottom: 0 !important;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 850;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-primary {
    background: var(--coral);
    color: var(--white);
    box-shadow: 0 16px 30px rgba(255, 107, 87, 0.24);
}

.btn-primary:hover {
    background: var(--coral-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--dark);
    border: 1.5px solid rgba(18, 33, 27, 0.18);
}

.btn-secondary:hover {
    background: var(--white);
}

.btn-dark {
    background: var(--dark);
    color: var(--white);
}

.btn-dark:hover {
    background: var(--green);
}

.btn-white {
    background: var(--white);
    color: var(--dark);
}

.btn-white:hover {
    background: var(--yellow);
}

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

.hero {
    position: relative;
    padding: 70px 0 90px;
    background: var(--cream);
    overflow: hidden;
}

.hero-decoration,
.hero-decoration-one,
.hero-decoration-two {
    display: none;
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.82fr);
    gap: 60px;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 10;
    display: block;
    max-width: 720px;
}

.hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 32px;
    border: 1px solid rgba(18, 33, 27, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(18, 33, 27, 0.07);
}

.badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(22, 125, 90, 0.13);
}

.hero h1 {
    max-width: 720px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(4rem, 6vw, 6.5rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -5px;
    color: var(--dark);
}

.hero h1 span {
    display: block;
    color: var(--coral);
}

.hero-subtitle {
    max-width: 620px;
    margin-top: 34px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
    font-weight: 700;
    line-height: 1.3;
}

.hero-text {
    max-width: 600px;
    margin-top: 18px;
    color: var(--dark-soft);
    font-size: 1rem;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 32px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dark-soft);
    font-size: 0.82rem;
    font-weight: 750;
}

.trust-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    color: var(--green);
    font-size: 0.75rem;
    box-shadow: 0 6px 15px rgba(18, 33, 27, 0.08);
}

.hero-visual {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
}

.hero-image {
    width: 100%;
    height: 570px;
    object-fit: cover;
    object-position: center;
    border-radius: 80px 24px 80px 24px;
    box-shadow: var(--shadow-big);
}

.floating-card {
    position: absolute;
    z-index: 3;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(18, 33, 27, 0.18);
}

.floating-card-help {
    left: -28px;
    bottom: 35px;
    max-width: 270px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    transform: rotate(-3deg);
}

.floating-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--yellow);
    font-size: 1.4rem;
}

.floating-card-help div {
    display: flex;
    flex-direction: column;
}

.floating-card-help strong {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
}

.floating-card-help span:last-child {
    color: var(--grey);
    font-size: 0.74rem;
}

.floating-card-location {
    right: -10px;
    top: 30px;
    max-width: 210px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
    transform: rotate(3deg);
}

/* =========================================================
   TICKER
========================================================= */

.ticker {
    overflow: hidden;
    background: var(--dark);
    color: var(--white);
    padding: 17px 0;
    white-space: nowrap;
}

.ticker-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 28px;
    animation: tickerScroll 24s linear infinite;
}

.ticker-track span {
    font-family: "Poppins", sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ticker-dot {
    color: var(--yellow);
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

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

.services-section {
    padding: 110px 0 120px;
    background: #fff9ef;
}

.services-header {
    display: grid;
    grid-template-columns: 1.25fr 0.65fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 45px;
}

.services-header h2 {
    max-width: 760px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3.4rem, 5.3vw, 5.8rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -5px;
    color: var(--dark);
}

.services-header > p {
    max-width: 420px;
    margin-bottom: 8px;
    color: #526159;
    font-size: 1rem;
    line-height: 1.7;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 350px;
    padding: 30px;
    border: 1px solid rgba(18, 33, 27, 0.06);
    border-radius: 32px;
    overflow: hidden;
    color: var(--dark);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(18, 33, 27, 0.13);
}

.service-card.service-blue { background: #cfeefa; }
.service-card.service-green { background: #d3eadb; }
.service-card.service-yellow { background: #ffe59a; }
.service-card.service-coral { background: #ffd2ca; }

.service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.service-number {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.service-arrow {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(18, 33, 27, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    font-size: 1.25rem;
    font-weight: 800;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.service-card:hover .service-arrow {
    background: var(--dark);
    color: var(--white);
    transform: rotate(45deg);
}

.service-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-top: auto;
    margin-bottom: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 2rem;
    box-shadow: 0 12px 30px rgba(18, 33, 27, 0.07);
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: rotate(-5deg) scale(1.07);
}

.service-card h3 {
    margin-bottom: 12px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
}

.service-card p {
    max-width: 480px;
    color: #33483f;
    font-size: 0.92rem;
    line-height: 1.65;
}

.service-card::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -80px;
    bottom: -100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.23);
    pointer-events: none;
    transition: transform 0.4s ease;
}

.service-card:hover::after {
    transform: scale(1.25);
}

.services-bottom {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

.services-bottom .text-link,
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border: 1px solid rgba(18, 33, 27, 0.16);
    border-radius: 999px;
    font-weight: 800;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.services-bottom .text-link:hover,
.text-link:hover {
    background: var(--dark);
    color: var(--white);
    transform: translateY(-3px);
}

.services-bottom .text-link span,
.text-link span {
    transition: transform 0.25s ease;
}

.services-bottom .text-link:hover span,
.text-link:hover span {
    transform: translateX(5px);
}

/* =========================================================
   LANGUAGE SECTION
========================================================= */

.language-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: #126a4d;
    color: var(--white);
}

.language-section::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -140px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.language-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    align-items: start;
}

.language-section .section-label,
.light-label {
    color: var(--yellow);
}

.language-intro h2 {
    max-width: 620px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3.8rem, 6vw, 6.6rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -5px;
    color: var(--white);
}

.language-content {
    max-width: 620px;
    padding-top: 26px;
}

.language-content h3 {
    margin-bottom: 26px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 4vw, 4.3rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -3px;
    color: var(--yellow);
}

.language-content p {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.75;
}

.language-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-bottom: 4px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    font-weight: 800;
    color: var(--white);
    transition: gap 0.25s ease, border-color 0.25s ease;
}

.language-link:hover {
    gap: 18px;
    border-color: var(--yellow);
}

.language-link span {
    color: var(--yellow);
}

/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {
    padding: 110px 0 120px;
    background: var(--cream-light);
}

.how-header {
    max-width: 900px;
    margin-bottom: 65px;
}

.how-header .section-label {
    color: var(--green);
}

.how-header h2 {
    max-width: 900px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3.8rem, 6vw, 6.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -5px;
    color: var(--dark);
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
    align-items: center;
    min-height: 160px;
    padding: 28px 38px;
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:nth-child(1) { background: #d9f1fb; }
.step:nth-child(2) { background: #dcefe4; }
.step:nth-child(3) { background: #ffe9a6; }

.step:hover {
    transform: translateX(8px);
    box-shadow: 0 18px 45px rgba(18, 33, 27, 0.10);
}

.step-number {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--dark);
    box-shadow: 0 8px 25px rgba(18, 33, 27, 0.06);
}

.step-content {
    display: grid;
    grid-template-columns: minmax(240px, 0.75fr) minmax(300px, 1fr);
    gap: 50px;
    align-items: center;
}

.step-content h3,
.step h3 {
    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--dark);
}

.step-content p,
.step p {
    max-width: 520px;
    padding-right: 55px;
    color: #405148;
    font-size: 0.98rem;
    line-height: 1.65;
}

.step::after {
    content: "→";
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.step:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* =========================================================
   NEW TO MADEIRA
========================================================= */

.new-madeira-section {
    padding: 120px 0;
    background: var(--yellow);
}

.new-madeira-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.new-madeira-image {
    overflow: hidden;
    border-radius: 40px 120px 40px 40px;
    box-shadow: var(--shadow-big);
}

.new-madeira-image img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.new-madeira-image:hover img {
    transform: scale(1.04);
}

.new-madeira-content h2 {
    margin-bottom: 25px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 5vw, 5.3rem);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -4px;
}

.new-madeira-content p {
    max-width: 560px;
    margin-bottom: 30px;
    color: var(--dark-soft);
}

/* =========================================================
   BIG CTA
========================================================= */

.big-cta {
    position: relative;
    padding: 100px 0;
    background: var(--cream-light);
    overflow: hidden;
}

.big-cta-inner {
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    min-height: 520px;
    margin: 0 auto;
    padding: 80px 60px;
    border-radius: 45px;
    background: var(--coral);
    color: var(--white);
    text-align: center;
    box-shadow: var(--shadow-big);
    isolation: isolate;
}

.cta-eyebrow,
.big-cta .section-label {
    margin-bottom: 22px;
    color: var(--dark);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.big-cta h2 {
    max-width: 900px;
    margin: 0 auto 25px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3.5rem, 6vw, 6.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -5px;
    color: var(--white);
}

.big-cta p {
    max-width: 620px;
    margin: 0 auto 35px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 1.05rem;
    line-height: 1.7;
}

.big-cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.big-cta .button,
.big-cta .btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 28px;
    border-radius: 999px;
    background: var(--white);
    color: var(--dark);
    font-weight: 900;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.big-cta .button:hover,
.big-cta .btn-white:hover {
    background: var(--yellow);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(18, 33, 27, 0.22);
}

.cta-secondary-link {
    font-weight: 800;
    border-bottom: 2px solid rgba(255, 255, 255, 0.70);
}

.big-cta-inner::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -120px;
    top: -120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: -1;
}

.big-cta-inner::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(255, 212, 92, 0.45);
    pointer-events: none;
    z-index: -1;
}

.cta-decoration {
    display: none;
}

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

.site-footer {
    background: var(--dark);
    color: var(--white);
    padding: 75px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
}

.footer-logo,
.site-footer .logo {
    display: inline-flex;
    margin-bottom: 20px;
}

.footer-logo img,
.site-footer .logo img {
    width: 155px;
}

.footer-brand p,
.footer-about {
    max-width: 390px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.88rem;
}

.footer-column h4 {
    margin-bottom: 16px;
    color: var(--yellow);
    font-family: "Poppins", sans-serif;
    font-size: 0.92rem;
}

.footer-column a {
    display: block;
    width: fit-content;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.86rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-column a:hover {
    color: var(--white);
    transform: translateX(4px);
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.76rem;
}

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

.floating-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 999px;
    background: #25d366;
    color: var(--white);
    font-size: 0.8rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.20);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.floating-whatsapp:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero-visual {
        max-width: 760px;
        margin-inline: auto;
    }

    .hero-image {
        height: 520px;
    }

    .services-header {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .services-header > p {
        max-width: 600px;
    }

    .language-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .language-content {
        padding-top: 0;
    }

    .new-madeira-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .new-madeira-image {
        order: 2;
    }

    .new-madeira-content {
        order: 1;
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
}

@media (max-width: 850px) {
    .main-nav {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .step-content {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .step {
        grid-template-columns: 80px 1fr;
    }

    .new-madeira-image img {
        height: 500px;
    }

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

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .container {
        width: 90%;
    }

    .header-inner {
        min-height: 80px;
    }

    .logo img {
        width: 125px;
    }

    .header-actions .nav-button,
    .nav-button {
        display: none;
    }

    .hero {
        padding: 50px 0 70px;
    }

    .hero h1 {
        font-size: clamp(3.2rem, 16vw, 4.7rem);
        letter-spacing: -3px;
    }

    .hero-subtitle {
        font-size: 1.15rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-trust {
        flex-direction: column;
        gap: 10px;
    }

    .hero-image {
        height: 420px;
        border-radius: 55px 18px 55px 18px;
    }

    .floating-card-location {
        right: 8px;
        top: 18px;
    }

    .floating-card-help {
        left: 8px;
        bottom: 18px;
        padding: 13px 14px;
    }

    .services-section {
        padding: 80px 0;
    }

    .services-header h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
        letter-spacing: -3px;
    }

    .service-card {
        min-height: 330px;
        padding: 25px;
        border-radius: 25px;
    }

    .service-card h3 {
        font-size: 2rem;
    }

    .language-section {
        padding: 85px 0;
    }

    .language-intro h2 {
        font-size: clamp(3.2rem, 15vw, 4.8rem);
        letter-spacing: -3px;
    }

    .language-content h3 {
        font-size: 2.5rem;
        letter-spacing: -2px;
    }

    .how-section {
        padding: 80px 0;
    }

    .how-header {
        margin-bottom: 40px;
    }

    .how-header h2 {
        font-size: clamp(3rem, 14vw, 4.6rem);
        letter-spacing: -3px;
    }

    .step {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 0;
        padding: 25px;
        border-radius: 24px;
    }

    .step:hover {
        transform: translateY(-4px);
    }

    .step-content {
        grid-template-columns: 1fr;
    }

    .step-content p,
    .step p {
        padding-right: 0;
    }

    .step::after {
        display: none;
    }

    .step-number {
        width: 55px;
        height: 55px;
    }

    .new-madeira-section {
        padding: 85px 0;
    }

    .new-madeira-content h2 {
        letter-spacing: -2.5px;
    }

    .new-madeira-image img {
        height: 420px;
    }

    .big-cta {
        padding: 70px 18px;
    }

    .big-cta-inner {
        min-height: 450px;
        padding: 60px 25px;
        border-radius: 30px;
    }

    .big-cta h2 {
        font-size: clamp(3rem, 14vw, 4.5rem);
        letter-spacing: -3px;
    }

    .big-cta p {
        font-size: 0.95rem;
    }

    .big-cta-buttons {
        flex-direction: column;
    }

    .big-cta-buttons .btn,
    .big-cta-buttons .button {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 5px;
    }

    .floating-whatsapp {
        right: 15px;
        bottom: 15px;
        padding: 12px 14px;
    }

    .floating-whatsapp strong {
        display: none;
    }
}

@media (max-width: 400px) {
    .hero h1 {
        font-size: 3.25rem;
    }

    .hero-image {
        height: 390px;
    }

    .floating-card-help {
        transform: none;
    }

    .floating-card-location {
        display: none;
    }
}

/* =========================================================
   FOOTER — FINAL POLISH
========================================================= */

.site-footer {
    background: #12211b;
    color: #ffffff;

    padding: 85px 0 30px;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        0.8fr
        0.9fr
        0.9fr;

    gap: 70px;

    align-items: start;
}


/* BRAND */

.footer-brand {
    max-width: 390px;
}

.footer-logo {
    display: inline-flex;

    margin-bottom: 24px;
}

.footer-logo img {
    width: 175px;

    height: auto;
}

.footer-brand p {
    max-width: 360px;

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

    font-size: 0.9rem;

    line-height: 1.7;
}


/* COLUMNS */

.footer-column h4 {
    margin-bottom: 20px;

    font-family: "Poppins", sans-serif;

    font-size: 0.95rem;

    font-weight: 800;

    color: #ffd45c;
}

.footer-column a {
    display: block;

    width: fit-content;

    margin-bottom: 12px;

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

    font-size: 0.88rem;

    line-height: 1.5;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column a:hover {
    color: #ffffff;

    transform: translateX(4px);
}


/* FOOTER BOTTOM */

.footer-bottom {
    margin-top: 65px;

    padding-top: 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

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

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

    font-size: 0.76rem;
}


/* MOBILE */

@media (max-width: 900px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

}


@media (max-width: 650px) {

    .site-footer {
        padding: 65px 0 25px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .footer-logo img {
        width: 155px;
    }

    .footer-bottom {
        margin-top: 45px;

        flex-direction: column;

        align-items: flex-start;

        gap: 6px;
    }

}

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

.services-hero {
    padding: 110px 0 90px;
    background: var(--cream);
    border-bottom: 1px solid rgba(18, 33, 27, 0.08);
}

.services-hero-inner {
    max-width: 900px;
}

.services-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--coral);
}

.services-hero h1 {
    margin: 0;
    max-width: 900px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 7vw, 6.6rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    color: var(--dark);
}

.services-hero h1 span {
    display: block;
    color: var(--green);
}

.services-hero p {
    max-width: 760px;
    margin-top: 28px;
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(18, 33, 27, 0.68);
}

.services-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}


/* =========================================================
   DIRECTORY INTRO
========================================================= */

.services-directory {
    padding: 100px 0 110px;
    background: var(--cream-light);
}

.services-directory-heading {
    max-width: 760px;
    margin-bottom: 50px;
}

.services-directory-heading h2 {
    margin-top: 12px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.3rem);
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--dark);
}

.services-directory-heading p {
    margin-top: 20px;
    max-width: 660px;
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(18, 33, 27, 0.64);
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.services-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.directory-card {
    min-height: 330px;
    padding: 30px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(18, 33, 27, 0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.directory-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 45px rgba(18, 33, 27, 0.12);
}

.directory-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.directory-number {
    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0.65;
}

.directory-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.72);
    font-size: 1.7rem;
    box-shadow: 0 8px 18px rgba(18, 33, 27, 0.08);
}

.directory-card h3 {
    margin: auto 0 12px;
    max-width: 90%;
    font-family: "Poppins", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.directory-card p {
    margin-bottom: 24px;
    max-width: 92%;
    font-size: 0.94rem;
    line-height: 1.65;
}

.directory-card a {
    width: fit-content;
    font-weight: 800;
    font-size: 0.9rem;
    color: inherit;
}

.directory-card a:hover {
    text-decoration: underline;
}


/* CARD COLOURS */

.directory-card-green {
    background: var(--green-light);
    color: var(--dark);
}

.directory-card-yellow {
    background: var(--yellow);
    color: var(--dark);
}

.directory-card-blue {
    background: #cfe7f2;
    color: var(--dark);
}

.directory-card-coral {
    background: var(--coral);
    color: #ffffff;
}

.directory-card-cream {
    background: #efe6d6;
    color: var(--dark);
}

.directory-card-green-dark {
    background: var(--green-dark);
    color: #ffffff;
}


/* =========================================================
   LANGUAGE BANNER
========================================================= */

.services-language {
    padding: 0 0 100px;
    background: var(--cream-light);
}

.services-language-inner {
    min-height: 320px;
    padding: 54px 60px;
    border-radius: 34px;
    background: var(--green-dark);
    color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.services-language .section-label {
    color: var(--yellow);
}

.services-language h2 {
    margin-top: 12px;
    max-width: 500px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.services-language p {
    max-width: 500px;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.76);
}


/* =========================================================
   ACTIVE NAV LINK
========================================================= */

.desktop-nav a.active {
    color: var(--green);
    font-weight: 800;
}


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

@media (max-width: 900px) {

    .services-hero {
        padding: 85px 0 70px;
    }

    .services-directory {
        padding: 80px 0 90px;
    }

    .services-directory-grid {
        grid-template-columns: 1fr;
    }

    .directory-card {
        min-height: 300px;
    }

    .services-language-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 44px 34px;
    }

}


@media (max-width: 650px) {

    .services-hero {
        padding: 68px 0 56px;
    }

    .services-hero h1 {
        font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .services-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-hero-actions .btn {
        width: 100%;
        text-align: center;
    }

    .services-directory {
        padding: 65px 0 75px;
    }

    .services-directory-heading {
        margin-bottom: 34px;
    }

    .services-directory-grid {
        gap: 16px;
    }

    .directory-card {
        min-height: 270px;
        padding: 24px;
        border-radius: 22px;
    }

    .directory-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .services-language {
        padding-bottom: 75px;
    }

    .services-language-inner {
        min-height: auto;
        padding: 38px 26px;
        border-radius: 26px;
    }

}

/* =========================================================
   SERVICES PAGE — HEADER + HERO FIX
========================================================= */

/* HEADER */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--cream);
    border-bottom: 1px solid rgba(18, 33, 27, 0.08);
}

.header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo img {
    display: block;
    width: 165px !important;
    max-width: 165px !important;
    height: auto !important;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
}

.desktop-nav a {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dark);
    transition: color 0.2s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--green);
}

.header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--dark);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
}

.header-button:hover {
    background: var(--green);
}


/* HERO — FORCE CORRECT DISPLAY */

.services-hero {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    padding: 105px 0 95px;
    background: var(--cream);
}

.services-hero-inner {
    display: block !important;
    max-width: 950px;
}

.services-eyebrow {
    display: inline-block !important;
    margin-bottom: 20px;
    color: var(--coral);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.services-hero h1 {
    display: block !important;
    margin: 0;
    max-width: 950px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3.7rem, 7vw, 6.8rem);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.06em;
    color: var(--dark);
}

.services-hero h1 span {
    display: block;
    color: var(--green);
}

.services-hero p {
    display: block !important;
    max-width: 720px;
    margin: 28px 0 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(18, 33, 27, 0.68);
}

.services-hero-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}


/* MOBILE MENU HIDDEN ON DESKTOP */

.mobile-menu-toggle,
.mobile-menu {
    display: none;
}


/* MOBILE */

@media (max-width: 850px) {

    .desktop-nav,
    .header-button {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        width: 42px;
        height: 42px;
        padding: 10px;
        border: 0;
        background: transparent;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--dark);
        border-radius: 10px;
    }

    .mobile-menu.open {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background: var(--cream);
        border-top: 1px solid rgba(18, 33, 27, 0.08);
    }

    .mobile-menu a {
        padding: 12px 0;
        font-weight: 700;
        color: var(--dark);
    }

    .services-hero {
        padding: 75px 0 65px;
    }

}


@media (max-width: 600px) {

    .site-logo img {
        width: 145px !important;
        max-width: 145px !important;
    }

    .services-hero h1 {
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

    .services-hero-actions {
        flex-direction: column;
    }

}

/* =========================================================
   BUSINESSES PAGE
========================================================= */

.businesses-hero{
    padding:110px 0 90px;
    background:#F7F2E8;
}

.businesses-hero-inner{
    max-width:900px;
}

.businesses-eyebrow{
    display:inline-block;
    margin-bottom:18px;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.14em;
    color:#FF6B57;
}

.businesses-hero h1{
    margin:0;
    font-family:"Poppins",sans-serif;
    font-size:clamp(3.4rem,7vw,6.5rem);
    line-height:.95;
    letter-spacing:-.06em;
    color:#12211B;
}

.businesses-hero h1 span{
    display:block;
    color:#167D5A;
}

.businesses-hero p{
    max-width:700px;
    margin-top:26px;
    font-size:1.05rem;
    line-height:1.75;
    color:rgba(18,33,27,.68);
}


/* SEARCH PANEL */

.business-search-section{
    padding:0 0 90px;
    background:#FCFAF6;
}

.business-search-panel{
    margin-top:-40px;
    background:#fff;
    border-radius:30px;
    padding:40px;
    box-shadow:0 25px 60px rgba(18,33,27,.08);
}

.business-search-copy h2{
    margin:10px 0;
    font-family:"Poppins",sans-serif;
    font-size:2.4rem;
    line-height:1;
}

.business-search-form{
    display:grid;
    grid-template-columns:2fr 1fr auto;
    gap:18px;
    margin-top:30px;
}

.search-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.search-field label{
    font-size:.82rem;
    font-weight:700;
    color:#526159;
}

.search-field input,
.search-field select{
    height:56px;
    padding:0 18px;
    border:1px solid #E5E1D8;
    border-radius:16px;
    background:#fff;
    font-size:.95rem;
}

.business-search-button{
    align-self:end;
    height:56px;
    padding:0 24px;
    border-radius:999px;
    background:#12211B;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}


/* CATEGORY CARDS */

.business-categories{
    padding:90px 0;
    background:#FCFAF6;
}

.business-section-heading{
    max-width:700px;
    margin-bottom:45px;
}

.business-section-heading h2{
    margin:12px 0;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2.3rem,5vw,4rem);
    line-height:1;
}

.business-category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.business-category-card{
    min-height:170px;
    padding:24px;
    border-radius:24px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:#12211B;
    transition:.25s;
}

.business-category-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(18,33,27,.12);
}

.business-category-icon{
    font-size:2rem;
}

.business-category-card h3{
    margin:18px 0 auto;
    font-family:"Poppins",sans-serif;
    font-size:1.25rem;
}

.business-category-arrow{
    font-weight:800;
    font-size:1.2rem;
}

.category-green{background:#DCEFE4;}
.category-yellow{background:#FFE59A;}
.category-blue{background:#CFEAFA;}
.category-coral{background:#FFD2CA;}
.category-cream{background:#EFE6D6;}
.category-green-dark{background:#167D5A;color:#fff;}


/* LOCAL NETWORK */

.business-network{
    padding:90px 0;
    background:#F7F2E8;
}

.business-network-inner{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:40px;
    align-items:center;
}

.business-network-copy h2{
    margin:12px 0 20px;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2.3rem,5vw,4rem);
    line-height:1;
}

.business-network-copy p{
    margin-bottom:18px;
    line-height:1.8;
}

.business-network-card{
    background:#12211B;
    color:#fff;
    border-radius:28px;
    padding:36px;
}

.network-card-label{
    color:#FFD45C;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.12em;
}

.network-card-icon{
    font-size:3rem;
    margin:22px 0;
}

.business-network-card h3{
    font-family:"Poppins",sans-serif;
    font-size:2rem;
    line-height:1;
    margin-bottom:18px;
}

.business-network-card p{
    color:rgba(255,255,255,.75);
    line-height:1.7;
}


/* BUSINESS OWNER */

.business-owner-section{
    padding:90px 0;
    background:#fff;
}

.business-owner-inner{
    background:#DCEFE4;
    border-radius:32px;
    padding:50px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

.business-owner-inner h2{
    margin:12px 0 16px;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2.2rem,4vw,3.5rem);
    line-height:1;
}

.business-owner-action p{
    margin-bottom:22px;
    line-height:1.8;
}


/* RESPONSIVE */

@media(max-width:900px){

.business-search-form,
.business-network-inner,
.business-owner-inner{
grid-template-columns:1fr;
}

.business-category-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.businesses-hero{
padding:70px 0 60px;
}

.business-category-grid{
grid-template-columns:1fr;
}

.business-search-panel{
padding:24px;
border-radius:24px;
}

.business-category-card{
min-height:140px;
}

.business-owner-inner{
padding:30px;
border-radius:24px;
}

}

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

.about-hero {
    padding: 110px 0 90px;
    background: var(--cream);
}

.about-hero-inner {
    max-width: 900px;
}

.about-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--coral);
}

.about-hero h1 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    color: var(--dark);
}

.about-hero h1 span {
    display: block;
    color: var(--green);
}

.about-hero p {
    max-width: 720px;
    margin-top: 26px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(18, 33, 27, 0.68);
}


/* =========================================================
   STORY
========================================================= */

.about-story {
    padding: 100px 0;
    background: var(--cream-light);
}

.about-story-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: center;
}

.about-story-card {
    padding: 42px;
    border-radius: 32px;
    background: var(--green-dark);
    color: #ffffff;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-card-label {
    color: var(--yellow);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.about-card-icon {
    font-size: 3.3rem;
    margin: 26px 0;
}

.about-story-card h2 {
    margin: 0 0 18px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.about-story-card p {
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.75;
}

.about-story-content h2 {
    margin: 12px 0 24px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.about-story-content p {
    margin-bottom: 18px;
    line-height: 1.8;
    color: rgba(18, 33, 27, 0.72);
}


/* =========================================================
   VALUES
========================================================= */

.about-values {
    padding: 100px 0;
    background: #ffffff;
}

.about-values-heading {
    max-width: 720px;
    margin-bottom: 50px;
}

.about-values-heading h2 {
    margin: 12px 0 18px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.about-values-heading p {
    line-height: 1.75;
    color: rgba(18, 33, 27, 0.65);
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.about-value-card {
    min-height: 340px;
    padding: 30px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
}

.about-value-number {
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0.6;
}

.about-value-icon {
    font-size: 2.5rem;
    margin: 28px 0 22px;
}

.about-value-card h3 {
    margin-bottom: 14px;
    font-family: "Poppins", sans-serif;
    font-size: 1.7rem;
    line-height: 1.05;
}

.about-value-card p {
    margin-top: auto;
    line-height: 1.7;
}

.about-value-green {
    background: var(--green-light);
}

.about-value-yellow {
    background: var(--yellow);
}

.about-value-blue {
    background: #cfe7f2;
}


/* =========================================================
   WHO WE HELP
========================================================= */

.about-who {
    padding: 100px 0;
    background: var(--cream);
}

.about-who-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}

.about-who h2 {
    margin-top: 12px;
    max-width: 560px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.about-who-list {
    border-top: 1px solid rgba(18, 33, 27, 0.12);
}

.about-who-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(18, 33, 27, 0.12);
}

.about-who-item span {
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--coral);
}

.about-who-item p {
    font-size: 1rem;
    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .about-story-grid,
    .about-who-inner {
        grid-template-columns: 1fr;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-story-card {
        min-height: auto;
    }

}

@media (max-width: 650px) {

    .about-hero {
        padding: 70px 0 60px;
    }

    .about-hero h1 {
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

    .about-story,
    .about-values,
    .about-who {
        padding: 70px 0;
    }

    .about-story-grid,
    .about-who-inner {
        gap: 40px;
    }

    .about-story-card,
    .about-value-card {
        padding: 26px;
        border-radius: 24px;
    }

}

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

.contact-hero {
    padding: 110px 0 90px;
    background: var(--cream);
}

.contact-hero-inner {
    max-width: 920px;
}

.contact-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--coral);
}

.contact-hero h1 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3.4rem, 7vw, 6.3rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    color: var(--dark);
}

.contact-hero h1 span {
    display: block;
    color: var(--green);
}

.contact-hero p {
    max-width: 720px;
    margin-top: 26px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(18, 33, 27, 0.68);
}


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

.contact-main {
    padding: 100px 0;
    background: var(--cream-light);
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: start;
}

.contact-intro h2 {
    margin: 12px 0 20px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--dark);
}

.contact-intro > p {
    max-width: 520px;
    margin-bottom: 34px;
    line-height: 1.8;
    color: rgba(18, 33, 27, 0.68);
}


/* CONTACT BENEFITS */

.contact-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-benefit {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(18, 33, 27, 0.1);
}

.contact-benefit-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: var(--green-light);
    font-size: 1.6rem;
}

.contact-benefit h3 {
    margin: 0 0 4px;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    color: var(--dark);
}

.contact-benefit p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(18, 33, 27, 0.62);
}


/* WHATSAPP CARD */

.contact-whatsapp-card {
    margin-top: 34px;
    padding: 28px;
    border-radius: 26px;
    background: var(--green-dark);
    color: #ffffff;
}

.contact-whatsapp-card > span {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--yellow);
}

.contact-whatsapp-card h3 {
    margin-bottom: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 1.9rem;
    line-height: 1.05;
}

.contact-whatsapp-card p {
    margin-bottom: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.74);
}

.contact-whatsapp-card a {
    font-weight: 800;
    color: #ffffff;
}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
    padding: 38px;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(18, 33, 27, 0.09);
}

.contact-form-heading {
    margin-bottom: 28px;
}

.contact-form-heading h2 {
    margin: 10px 0 12px;
    font-family: "Poppins", sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--dark);
}

.contact-form-heading p {
    line-height: 1.7;
    color: rgba(18, 33, 27, 0.62);
}

.help-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid rgba(18, 33, 27, 0.14);
    border-radius: 16px;
    background: #fbfaf7;
    color: var(--dark);
    font: inherit;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.form-group input,
.form-group select {
    min-height: 56px;
    padding: 0 16px;
}

.form-group textarea {
    padding: 16px;
    resize: vertical;
    min-height: 150px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--green);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(22, 125, 90, 0.1);
}

.contact-submit {
    min-height: 58px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--dark);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.contact-submit:hover {
    background: var(--green);
    transform: translateY(-2px);
}

.form-note {
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(18, 33, 27, 0.48);
}


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

.contact-process {
    padding: 100px 0;
    background: #ffffff;
}

.contact-process-heading {
    max-width: 680px;
    margin-bottom: 45px;
}

.contact-process-heading h2 {
    margin-top: 12px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.contact-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.contact-process-step {
    min-height: 290px;
    padding: 30px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
}

.contact-process-step > span {
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0.62;
}

.contact-process-step h3 {
    margin: auto 0 14px;
    font-family: "Poppins", sans-serif;
    font-size: 1.75rem;
    line-height: 1.05;
}

.contact-process-step p {
    margin: 0;
    line-height: 1.7;
}

.contact-process-green {
    background: var(--green-light);
}

.contact-process-yellow {
    background: var(--yellow);
}

.contact-process-blue {
    background: #cfe7f2;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-process-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 650px) {

    .contact-hero {
        padding: 70px 0 60px;
    }

    .contact-hero h1 {
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

    .contact-main,
    .contact-process {
        padding: 70px 0;
    }

    .contact-form-card {
        padding: 26px;
        border-radius: 24px;
    }

    .contact-form-heading h2 {
        font-size: 2rem;
    }

    .contact-whatsapp-card {
        padding: 24px;
        border-radius: 22px;
    }

    .contact-process-step {
        min-height: 240px;
        padding: 26px;
        border-radius: 24px;
    }

}

/* =========================================================
   FOR BUSINESSES PAGE
========================================================= */

/* HERO */

.business-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 90px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 212, 92, 0.28),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f8f3e9 0%,
            #eef7f2 55%,
            #dcefe6 100%
        );
}

.business-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(22, 125, 90, 0.07);
    top: -180px;
    right: -100px;
}

.business-hero-grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 16px;

    color: var(--green);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.business-hero h1 {
    max-width: 700px;
    margin: 0 0 24px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6vw, 5.7rem);
    line-height: 0.98;
    letter-spacing: -4px;

    color: var(--dark);
}

.business-hero h1 span {
    color: var(--green);
}

.business-hero-text {
    max-width: 620px;
    margin-bottom: 14px;

    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 600;

    color: var(--dark);
}

.business-hero-subtext {
    max-width: 600px;
    margin-bottom: 34px;

    font-size: 1rem;
    line-height: 1.8;
    color: #59645f;
}

.business-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* HERO CARD */

.business-hero-card {
    position: relative;

    padding: 42px;

    background: var(--green);
    color: white;

    border-radius: 32px;

    box-shadow:
        0 30px 70px rgba(13, 91, 66, 0.22);

    transform: rotate(1.5deg);
}

.business-hero-card::after {
    content: "";
    position: absolute;

    width: 85px;
    height: 85px;

    right: -20px;
    top: -20px;

    background: var(--yellow);
    border-radius: 50%;

    z-index: -1;
}

.business-card-label {
    display: inline-block;

    margin-bottom: 20px;
    padding: 8px 13px;

    background: var(--yellow);
    color: var(--dark);

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.business-hero-card h2 {
    margin-bottom: 34px;

    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    line-height: 1.2;
}

.business-benefit {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: center;

    padding: 18px 0;

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

.business-benefit span {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(255,255,255,0.12);
    color: var(--yellow);

    font-weight: 800;
}

.business-benefit p {
    margin: 0;
    line-height: 1.5;
}


/* GENERAL BUSINESS SECTIONS */

.business-section,
.business-how-section,
.business-join-section {
    padding: 100px 0;
}

.section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.section-heading h2,
.business-join-content h2 {
    margin: 0 0 16px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -2px;

    color: var(--dark);
}

.section-heading p,
.business-join-content > p {
    color: #64706a;
    font-size: 1.05rem;
    line-height: 1.8;
}


/* WHY JOIN CARDS */

.business-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.business-feature-card {
    padding: 30px 26px;

    background: #ffffff;

    border: 1px solid rgba(18, 33, 27, 0.08);
    border-radius: 24px;

    box-shadow:
        0 15px 45px rgba(18, 33, 27, 0.06);

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

.business-feature-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 22px 55px rgba(18, 33, 27, 0.11);
}

.feature-icon {
    display: grid;
    place-items: center;

    width: 55px;
    height: 55px;

    margin-bottom: 24px;

    border-radius: 17px;

    background: var(--yellow);

    font-size: 1.55rem;
}

.business-feature-card h3 {
    margin-bottom: 12px;

    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;

    color: var(--dark);
}

.business-feature-card p {
    margin: 0;

    color: #66736d;
    line-height: 1.7;
}


/* HOW IT WORKS */

.business-how-section {
    background: var(--dark);
    color: white;
}

.business-how-section .section-eyebrow {
    color: var(--yellow);
}

.business-how-section .section-heading h2 {
    color: white;
}

.business-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.business-step {
    padding: 30px;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 24px;
}

.business-step > span {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: var(--yellow);
    color: var(--dark);

    font-weight: 900;
    font-size: 1.1rem;
}

.business-step h3 {
    margin-bottom: 12px;

    font-family: "Poppins", sans-serif;
    color: white;
}

.business-step p {
    margin: 0;

    color: rgba(255,255,255,0.72);
    line-height: 1.7;
}


/* JOIN FORM */

.business-join-section {
    background: #f8f3e9;
}

.business-join-grid {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 75px;
    align-items: start;
}

.business-join-content {
    position: sticky;
    top: 120px;
}

.business-note {
    margin-top: 35px;
    padding: 24px;

    background: var(--yellow);
    color: var(--dark);

    border-radius: 20px;

    transform: rotate(-1deg);
}

.business-note strong {
    display: block;
    margin-bottom: 7px;

    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;
}

.business-note p {
    margin: 0;
    line-height: 1.6;
}


/* FORM CARD */

.business-join-form {
    padding: 40px;

    background: white;

    border-radius: 30px;

    box-shadow:
        0 25px 70px rgba(18, 33, 27, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.business-join-form .form-group {
    margin-bottom: 20px;
}

.business-join-form label {
    display: block;

    margin-bottom: 8px;

    color: var(--dark);
    font-weight: 700;
    font-size: 0.9rem;
}

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

    padding: 15px 16px;

    border: 1px solid #d8dfdb;
    border-radius: 12px;

    background: #fbfcfb;

    color: var(--dark);

    font-family: "Inter", sans-serif;
    font-size: 0.95rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.business-join-form textarea {
    resize: vertical;
    min-height: 130px;
}

.business-join-form input:focus,
.business-join-form select:focus,
.business-join-form textarea:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 4px rgba(22, 125, 90, 0.1);
}


/* CONSENT */

.business-consent label {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    cursor: pointer;

    font-weight: 500;
    line-height: 1.6;

    color: #59645f;
}

.business-consent input {
    width: 18px;
    height: 18px;

    margin-top: 3px;

    flex: 0 0 auto;
}

.business-submit-button {
    width: 100%;

    border: none;
    cursor: pointer;

    font-size: 1rem;
}

.business-form-message {
    margin-top: 15px;
    text-align: center;
    font-weight: 600;
}


/* FINAL CTA */

.business-final-cta {
    position: relative;
    overflow: hidden;

    padding: 100px 20px;

    background: var(--green);

    color: white;
    text-align: center;
}

.business-final-cta::before,
.business-final-cta::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: rgba(255, 212, 92, 0.12);
}

.business-final-cta::before {
    top: -120px;
    left: -80px;
}

.business-final-cta::after {
    bottom: -150px;
    right: -70px;
}

.business-final-cta .container {
    position: relative;
    z-index: 1;
}

.business-final-cta > .container > span {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--yellow);

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.business-final-cta h2 {
    margin: 0 0 18px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;

    letter-spacing: -3px;
}

.business-final-cta p {
    margin-bottom: 30px;

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

    font-weight: 600;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .business-hero-grid,
    .business-join-grid {
        grid-template-columns: 1fr;
    }

    .business-feature-grid,
    .business-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .business-join-content {
        position: static;
    }

    .business-hero-card {
        transform: none;
    }
}


@media (max-width: 650px) {

    .business-hero {
        padding: 75px 0 65px;
    }

    .business-hero h1 {
        font-size: 3rem;
        letter-spacing: -2px;
    }

    .business-section,
    .business-how-section,
    .business-join-section {
        padding: 70px 0;
    }

    .business-feature-grid,
    .business-steps,
    .form-row {
        grid-template-columns: 1fr;
    }

    .business-join-form {
        padding: 25px 20px;
        border-radius: 22px;
    }

    .business-hero-card {
        padding: 30px 25px;
        border-radius: 24px;
    }

    .business-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .business-hero-actions a {
        text-align: center;
    }
}

/* Hide mobile navigation on desktop */
.mobile-nav {
    display: none;
}

/* Show mobile navigation when hamburger is opened */
.mobile-nav.active {
    display: flex;
    flex-direction: column;
}

/* =========================================================
   MADEIRA HELPER — ADMIN DASHBOARD
========================================================= */

.admin-page {
    margin: 0;
    min-height: 100vh;
    background: #f4f7f5;
    color: var(--dark);
    font-family: "Inter", sans-serif;
}

.admin-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}


/* SIDEBAR */

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    padding: 30px 22px;
    background: var(--dark);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.admin-logo {
    display: inline-block;
    margin-bottom: 42px;
}

.admin-logo img {
    width: 170px;
    max-width: 100%;
    height: auto;
}

.admin-sidebar-label {
    margin: 0 12px 14px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.admin-navigation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-nav-item {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 13px 14px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    gap: 12px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: 0.2s ease;
}

.admin-nav-item span {
    width: 22px;
    font-size: 1rem;
    text-align: center;
}

.admin-nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.admin-nav-item.active {
    background: var(--green);
    color: #fff;
}

.admin-sidebar-bottom {
    margin-top: auto;
    padding: 20px 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar-bottom a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-sidebar-bottom a:hover {
    color: #fff;
}


/* MAIN AREA */

.admin-main {
    grid-column: 2;
    min-width: 0;
}

.admin-topbar {
    min-height: 105px;
    padding: 24px 42px;
    background: #fff;
    border-bottom: 1px solid #e5ebe7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.admin-eyebrow,
.admin-section-label {
    display: block;
    margin-bottom: 6px;
    color: var(--green);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.admin-topbar h1 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 1.7rem;
    letter-spacing: -0.7px;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--yellow);
    display: grid;
    place-items: center;
    color: var(--dark);
    font-weight: 800;
    font-size: 0.8rem;
}

.admin-user strong,
.admin-user span {
    display: block;
}

.admin-user strong {
    margin-bottom: 2px;
    font-size: 0.85rem;
}

.admin-user span {
    color: #7a8981;
    font-size: 0.72rem;
}


/* CONTENT */

.admin-content {
    padding: 42px;
}

.admin-welcome {
    margin-bottom: 30px;
}

.admin-welcome h2 {
    margin: 0 0 7px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    letter-spacing: -1px;
}

.admin-welcome p {
    margin: 0;
    color: #6d7b74;
}


/* STAT CARDS */

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.admin-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 165px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e3eae6;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(18, 33, 27, 0.04);
}

.admin-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--green);
}

.admin-stat-title {
    display: block;
    margin-bottom: 17px;
    color: #65736c;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-stat-card strong {
    display: block;
    margin-bottom: 5px;
    font-family: "Poppins", sans-serif;
    font-size: 2.25rem;
    line-height: 1;
}

.admin-stat-card small {
    color: #89958f;
    font-size: 0.72rem;
}


/* DASHBOARD PANEL */

.admin-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3eae6;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(18, 33, 27, 0.04);
}

.admin-panel-header {
    padding: 25px 28px;
    border-bottom: 1px solid #edf1ef;
}

.admin-panel-header h2 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 1.2rem;
}

.admin-empty-state {
    min-height: 280px;
    padding: 50px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.admin-empty-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--green-light);
    display: grid;
    place-items: center;
    color: var(--green);
    font-weight: 800;
}

.admin-empty-state h3 {
    margin: 0 0 8px;
    font-family: "Poppins", sans-serif;
}

.admin-empty-state p {
    max-width: 440px;
    margin: 0;
    color: #78867f;
    font-size: 0.9rem;
    line-height: 1.7;
}


/* TABLET */

@media (max-width: 1050px) {

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* MOBILE */

@media (max-width: 760px) {

    .admin-layout {
        display: block;
    }

    .admin-sidebar {
        position: static;
        width: 100%;
        height: auto;
        padding: 18px;
    }

    .admin-logo {
        margin-bottom: 18px;
    }

    .admin-logo img {
        width: 145px;
    }

    .admin-sidebar-label {
        display: none;
    }

    .admin-navigation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-sidebar-bottom {
        margin-top: 18px;
    }

    .admin-main {
        width: 100%;
    }

    .admin-topbar {
        min-height: auto;
        padding: 22px;
    }

    .admin-user div:last-child {
        display: none;
    }

    .admin-content {
        padding: 25px 18px;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .admin-stat-card {
        min-height: 140px;
    }
}

/* =========================================================
   MADEIRA HELPER — ADMIN LOGIN
========================================================= */

.admin-login-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top left,
            rgba(22, 125, 90, 0.14),
            transparent 35%
        ),
        #f4f7f5;
    font-family: "Inter", sans-serif;
    color: var(--dark);
}

.admin-login-wrapper {
    min-height: 100vh;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-login-card {
    width: 100%;
    max-width: 460px;
    padding: 46px;
    background: #ffffff;
    border: 1px solid #e3eae6;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(18, 33, 27, 0.10);
}

.admin-login-brand {
    margin-bottom: 32px;
    text-align: center;
}

.admin-login-brand img {
    width: 190px;
    max-width: 100%;
    height: auto;
    margin-bottom: 28px;
}

.admin-login-label {
    display: block;
    margin-bottom: 10px;
    color: var(--green);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.admin-login-brand h1 {
    margin: 0 0 8px;
    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    letter-spacing: -1px;
}

.admin-login-brand p {
    margin: 0;
    color: #718078;
    font-size: 0.9rem;
}

.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-login-form .form-group {
    margin: 0;
}

.admin-login-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--dark);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-login-form input {
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid #dce5e0;
    border-radius: 12px;
    background: #fbfcfb;
    color: var(--dark);
    font: inherit;
    outline: none;
    transition: 0.2s ease;
}

.admin-login-form input:focus {
    border-color: var(--green);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(22, 125, 90, 0.10);
}

.admin-login-button {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    border: 0;
    cursor: pointer;
}

.admin-login-message {
    min-height: 20px;
    margin: 0;
    text-align: center;
    font-size: 0.82rem;
}

.admin-login-footer {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #edf1ef;
    text-align: center;
}

.admin-login-footer a {
    color: #718078;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-login-footer a:hover {
    color: var(--green);
}


/* MOBILE */

@media (max-width: 520px) {

    .admin-login-wrapper {
        padding: 18px;
    }

    .admin-login-card {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .admin-login-brand img {
        width: 165px;
    }

    .admin-login-brand h1 {
        font-size: 1.7rem;
    }
}
/* =========================================================
   MADEIRA HELPER — ADMIN REQUESTS TABLE
========================================================= */

.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* =========================================================
   MADEIRA HELPER — ADMIN CUSTOMER REQUESTS PAGE
========================================================= */


/* REQUEST COUNT */

.admin-request-count {
    display: flex;
    align-items: baseline;
    gap: 7px;

    padding: 10px 16px;

    border: 1px solid rgba(18, 33, 27, 0.08);
    border-radius: 999px;

    background: #f7f9f8;
}

.admin-request-count strong {
    color: var(--green);

    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
}

.admin-request-count span {
    color: #78867f;

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

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* CUSTOMER INFORMATION */

.admin-customer-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 140px;
}

.admin-customer-cell strong {
    color: var(--dark);

    font-size: 0.82rem;
    font-weight: 800;
}

.admin-customer-cell span {
    color: #78867f;

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


/* CUSTOMER CONTACT */

.admin-contact-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 180px;
}

.admin-contact-cell a {
    width: fit-content;

    color: #526159;

    font-size: 0.76rem;
    font-weight: 600;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.admin-contact-cell a:hover {
    color: var(--green);
    transform: translateX(2px);
}


/* REQUEST DESCRIPTION */

.admin-description-cell {
    max-width: 230px;

    overflow: hidden;

    color: #526159;

    font-size: 0.78rem;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* LARGER REQUESTS TABLE */

.admin-requests-table {
    min-width: 1150px;
}

.admin-requests-table th {
    vertical-align: middle;
}

.admin-requests-table td {
    vertical-align: middle;
}


/* KEEP IMPORTANT COLUMNS EASY TO READ */

.admin-requests-table td:nth-child(1) {
    white-space: nowrap;
}

.admin-requests-table td:nth-child(4) {
    min-width: 130px;
}

.admin-requests-table td:nth-child(5) {
    min-width: 120px;
}

.admin-requests-table td:nth-child(8) {
    white-space: nowrap;
}


/* MOBILE / SMALL SCREEN */

@media (max-width: 760px) {

    .admin-panel-header {
        gap: 20px;
        align-items: flex-start;
    }

    .admin-request-count {
        flex-shrink: 0;
    }

    .admin-requests-table {
        min-width: 1100px;
    }

}

/* =========================================================
   MADEIRA HELPER — ADMIN REQUEST STATUS CONTROLS
========================================================= */


/* STATUS CONTROL WRAPPER */

.admin-status-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    min-width: 135px;
}


/* STATUS DROPDOWN */

.admin-status-select {
    width: 100%;
    min-width: 130px;

    padding: 9px 34px 9px 12px;

    border: 1px solid #dfe7e3;
    border-radius: 10px;

    background-color: #ffffff;

    color: var(--dark);

    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;

    cursor: pointer;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* HOVER */

.admin-status-select:hover {
    border-color: var(--green);
}


/* FOCUS */

.admin-status-select:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(22, 125, 90, 0.12);
}


/* DISABLED WHILE SAVING */

.admin-status-select:disabled {
    cursor: wait;
    opacity: 0.65;

    background-color: #f7f9f8;
}


/* =========================================================
   STATUS MESSAGES
========================================================= */

.admin-status-message {
    min-height: 14px;

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

    line-height: 1;
}


/* SAVING */

.admin-status-message.saving {
    color: #78867f;
}


/* SUCCESS */

.admin-status-message.success {
    color: var(--green);
}


/* ERROR */

.admin-status-message.error {
    color: var(--coral);
}


/* =========================================================
   REQUEST TABLE STATUS COLUMN
========================================================= */

.admin-requests-table td:nth-child(7) {
    min-width: 150px;
}


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

@media (max-width: 760px) {

    .admin-status-select {
        min-width: 125px;
    }

}

/* =========================================================
   MADEIRA HELPER — ADMIN BUSINESS APPLICATIONS
========================================================= */


/* APPLICATION LIST */

.admin-business-applications-list {
    display: grid;
    gap: 22px;
}


/* APPLICATION CARD */

.admin-business-application {
    padding: 26px;

    border: 1px solid rgba(18, 33, 27, 0.08);
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 30px rgba(18, 33, 27, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.admin-business-application:hover {
    transform: translateY(-2px);

    border-color: rgba(22, 125, 90, 0.18);

    box-shadow:
        0 12px 34px rgba(18, 33, 27, 0.08);
}


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

.admin-business-application-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid #edf1ef;
}


.admin-business-reference {
    display: inline-block;

    margin-bottom: 6px;

    color: var(--green);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.8px;
}


.admin-business-application-header h3 {
    margin: 0 0 7px;

    color: var(--dark);

    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;

    line-height: 1.25;
}


.admin-business-category {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    background: var(--green-light);

    color: var(--green);

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


/* =========================================================
   BUSINESS DETAILS
========================================================= */

.admin-business-details {
    display: grid;

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

    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid #edf1ef;
}


.admin-business-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.admin-business-detail span {
    color: #84918b;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.6px;
    text-transform: uppercase;
}


.admin-business-detail strong {
    color: #34433c;

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

    line-height: 1.4;

    overflow-wrap: anywhere;
}


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

.admin-business-contact {
    display: grid;

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

    gap: 20px;

    padding: 22px 0;

    border-bottom: 1px solid #edf1ef;
}


.admin-business-contact > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.admin-business-contact span {
    color: #84918b;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.6px;
    text-transform: uppercase;
}


.admin-business-contact a {
    width: fit-content;

    color: #34433c;

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

    overflow-wrap: anywhere;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.admin-business-contact a:hover {
    color: var(--green);

    transform: translateX(2px);
}


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

.admin-business-description {
    padding: 22px 0;

    border-bottom: 1px solid #edf1ef;
}


.admin-business-description > span {
    display: block;

    margin-bottom: 8px;

    color: #84918b;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.6px;
    text-transform: uppercase;
}


.admin-business-description p {
    max-width: 850px;

    margin: 0;

    color: #526159;

    font-size: 0.84rem;
    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* =========================================================
   WEBSITE + SOCIAL LINKS
========================================================= */

.admin-business-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    padding: 18px 0;

    border-bottom: 1px solid #edf1ef;
}


.admin-business-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 13px;

    border: 1px solid #dfe7e3;
    border-radius: 9px;

    background: #ffffff;

    color: var(--green);

    font-size: 0.74rem;
    font-weight: 800;

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


.admin-business-links a:hover {
    background: #f5faf7;

    border-color: var(--green);

    transform: translateY(-1px);
}


/* =========================================================
   APPLICATION ACTION AREA
========================================================= */

.admin-business-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-top: 18px;
}


.admin-business-actions > span {
    color: #8b9791;

    font-size: 0.72rem;
    font-weight: 600;
}


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

@media (max-width: 1000px) {

    .admin-business-details {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 760px) {

    .admin-business-application {
        padding: 20px;
        border-radius: 15px;
    }


    .admin-business-application-header {
        flex-direction: column;
    }


    .admin-business-details {
        grid-template-columns: 1fr;
    }


    .admin-business-contact {
        grid-template-columns: 1fr;
    }


    .admin-business-actions {
        justify-content: flex-start;
    }

}

/* =========================================================
   MADEIRA HELPER — BUSINESS APPROVAL CONTROLS
========================================================= */


/* ACTION AREA */

.admin-business-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-top: 20px;
}


/* BUTTON CONTAINER */

.admin-business-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* SHARED BUTTON STYLE */

.admin-business-approve-button,
.admin-business-reject-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 10px 18px;

    border-radius: 10px;

    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}


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

.admin-business-approve-button {
    border: 1px solid var(--green);

    background: var(--green);

    color: #ffffff;

    box-shadow:
        0 6px 16px rgba(22, 125, 90, 0.16);
}


.admin-business-approve-button:hover {
    background: var(--green-dark);

    border-color: var(--green-dark);

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(22, 125, 90, 0.22);
}


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

.admin-business-reject-button {
    border: 1px solid #e3e9e6;

    background: #ffffff;

    color: #68766f;
}


.admin-business-reject-button:hover {
    border-color: var(--coral);

    background: rgba(255, 107, 87, 0.06);

    color: var(--coral);

    transform: translateY(-1px);
}


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

.admin-business-approve-button:disabled,
.admin-business-reject-button:disabled {
    cursor: wait;

    opacity: 0.55;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   ACTION MESSAGE
========================================================= */

.admin-business-action-message {
    min-height: 18px;

    color: #78867f;

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

    line-height: 1.4;
}


/* SAVING */

.admin-business-action-message.saving {
    color: #78867f;
}


/* SUCCESS */

.admin-business-action-message.success {
    color: var(--green);
}


/* ERROR */

.admin-business-action-message.error {
    color: var(--coral);
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
========================================================= */

.admin-business-approve-button:focus-visible,
.admin-business-reject-button:focus-visible {
    outline: 3px solid rgba(22, 125, 90, 0.18);

    outline-offset: 2px;
}


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

@media (max-width: 760px) {

    .admin-business-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .admin-business-action-buttons {
        width: 100%;
        flex-direction: column-reverse;
    }


    .admin-business-approve-button,
    .admin-business-reject-button {
        width: 100%;
    }


    .admin-business-action-message {
        width: 100%;
    }

}

/* =========================================================
   MADEIRA HELPER — DEACTIVATE BUSINESS BUTTON
========================================================= */

.admin-business-deactivate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 10px 18px;

    border: 1px solid #e5c7c2;
    border-radius: 10px;

    background: #ffffff;

    color: var(--coral);

    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


/* HOVER */

.admin-business-deactivate-button:hover:not(:disabled) {
    background: rgba(255, 107, 87, 0.07);

    border-color: var(--coral);

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(255, 107, 87, 0.12);
}


/* KEYBOARD FOCUS */

.admin-business-deactivate-button:focus-visible {
    outline: 3px solid rgba(255, 107, 87, 0.16);

    outline-offset: 2px;
}


/* DISABLED / SAVING */

.admin-business-deactivate-button:disabled {
    cursor: wait;

    opacity: 0.55;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   ACTIVE BUSINESS BADGE
========================================================= */

.admin-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border-radius: 999px;

    background: var(--green-light);

    color: var(--green);

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

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   ACTIVE BUSINESS ACTION AREA
========================================================= */

.admin-active-business .admin-business-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding-top: 20px;
}


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

@media (max-width: 760px) {

    .admin-active-business .admin-business-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .admin-active-business
    .admin-business-action-buttons {
        width: 100%;
    }


    .admin-business-deactivate-button {
        width: 100%;
    }

}

/* ========================================
   ADMIN LOGOUT BUTTON
======================================== */

.admin-sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-logout-button {
    width: 100%;
    padding: 11px 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;

    background: transparent;
    color: #ffffff;

    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;

    text-align: left;

    cursor: pointer;

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

.admin-logout-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);

    transform: translateX(2px);
}

.admin-logout-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.16);
    outline-offset: 2px;
}

.admin-logout-button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

/* =========================================================
   ADMIN INACTIVE BUSINESSES
========================================================= */

.admin-inactive-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border-radius: 999px;

    background: #f1f3f2;
    color: #68766f;

    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* =========================================================
   REACTIVATE BUSINESS BUTTON
========================================================= */

.admin-business-reactivate-button {
    padding: 10px 16px;

    border: 1px solid var(--green);
    border-radius: 8px;

    background: var(--green);
    color: #ffffff;

    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;

    cursor: pointer;

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

.admin-business-reactivate-button:hover {
    background: var(--dark-green);
    border-color: var(--dark-green);

    transform: translateY(-1px);
}

.admin-business-reactivate-button:focus-visible {
    outline: 3px solid var(--green-light);
    outline-offset: 2px;
}

.admin-business-reactivate-button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}


/* =========================================================
   INACTIVE BUSINESS CARD
========================================================= */

.admin-inactive-business {
    opacity: 0.96;
}


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

@media (max-width: 760px) {

    .admin-business-reactivate-button {
        width: 100%;
    }
}

/* =========================================================
   ADMIN CLICKABLE DASHBOARD CARDS
========================================================= */

.admin-stat-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}

.admin-stat-link .admin-stat-card {
    height: 100%;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.admin-stat-link:hover .admin-stat-card {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(18, 33, 27, 0.10);
    border-color: var(--green);
}

.admin-stat-link:focus-visible {
    outline: 3px solid var(--green-light);
    outline-offset: 4px;
}

/* =========================================================
   ADMIN CLICKABLE DASHBOARD CARDS - CORRECTION
========================================================= */

a.admin-stat-card.admin-stat-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    height: 100%;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

a.admin-stat-card.admin-stat-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(18, 33, 27, 0.10);
    border-color: var(--green);
}

a.admin-stat-card.admin-stat-link:focus-visible {
    outline: 3px solid var(--green-light);
    outline-offset: 4px;
}

/* =========================================================
   ADMIN EDIT BUSINESS
========================================================= */

.admin-edit-business-panel {
    max-width: 900px;
}

.admin-edit-status {
    padding: 18px 20px;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid rgba(18, 33, 27, 0.10);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
}


/* =========================================================
   EDIT BUSINESS FORM
========================================================= */

#adminEditBusinessForm {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.admin-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.admin-edit-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-edit-field label {
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--dark);
}

.admin-edit-field input,
.admin-edit-field select,
.admin-edit-field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(18, 33, 27, 0.16);
    border-radius: 9px;
    background: #ffffff;
    color: var(--dark);
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-edit-field textarea {
    resize: vertical;
    min-height: 120px;
}

.admin-edit-field input:focus,
.admin-edit-field select:focus,
.admin-edit-field textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-light);
}

.admin-edit-field small {
    font-size: 0.72rem;
    color: #68766f;
}


/* =========================================================
   EDIT BUSINESS MESSAGE
========================================================= */

.admin-edit-message {
    min-height: 20px;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-edit-message.success {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--green-light);
    color: var(--dark-green);
}

.admin-edit-message.error {
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff0ed;
    color: #a43b2b;
}


/* =========================================================
   EDIT BUSINESS ACTIONS
========================================================= */

.admin-edit-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
}

.admin-edit-save-button {
    padding: 12px 20px;
    border: 1px solid var(--green);
    border-radius: 8px;
    background: var(--green);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.admin-edit-save-button:hover {
    background: var(--dark-green);
    border-color: var(--dark-green);
    transform: translateY(-1px);
}

.admin-edit-save-button:focus-visible {
    outline: 3px solid var(--green-light);
    outline-offset: 3px;
}

.admin-edit-save-button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.admin-edit-cancel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid rgba(18, 33, 27, 0.16);
    border-radius: 8px;
    background: #ffffff;
    color: var(--dark);
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.admin-edit-cancel-button:hover {
    border-color: var(--green);
    background: var(--cream);
}


/* =========================================================
   EDIT BUSINESS MOBILE
========================================================= */

@media (max-width: 760px) {

    .admin-edit-grid {
        grid-template-columns: 1fr;
    }

    .admin-edit-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-edit-save-button,
    .admin-edit-cancel-button {
        width: 100%;
    }
}

/* =========================================================
   ADMIN EDIT BUSINESS BUTTON
========================================================= */

.admin-business-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--green);
    border-radius: 8px;
    background: #ffffff;
    color: var(--green);
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-business-edit-button:hover {
    background: var(--green);
    color: #ffffff;
    border-color: var(--green);
    transform: translateY(-1px);
}

.admin-business-edit-button:focus-visible {
    outline: 3px solid var(--green-light);
    outline-offset: 2px;
}


/* Keep Edit + Deactivate neatly together */

.admin-business-action-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


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

@media (max-width: 760px) {

    .admin-business-action-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-business-edit-button,
    .admin-business-deactivate-button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* =========================================================
   MADEIRA HELPER
   NEW HOMEPAGE — MADEIRA & PORTO SANTO
   ========================================================= */


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

.mh-platform-hero .hero-subtitle {
    max-width: 650px;
}

.mh-platform-hero .hero-text {
    max-width: 620px;
    font-weight: 700;
    color: var(--dark);
}

.mh-platform-hero .hero-buttons {
    flex-wrap: wrap;
}


/* =========================================================
   EXPLORE SECTION
   ========================================================= */

.mh-explore-section {
    position: relative;
    overflow: hidden;
}

.mh-explore-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 212, 92, 0.11);
    top: -180px;
    right: -180px;
    pointer-events: none;
}


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

.mh-category-grid {
    position: relative;
    z-index: 2;

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

    gap: 22px;

    margin-top: 50px;
}


/* =========================================================
   CATEGORY CARD
   ========================================================= */

.mh-category-card {
    position: relative;

    min-height: 290px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    border-radius: 28px;

    background: #ffffff;

    border: 1px solid rgba(17, 64, 50, 0.1);

    box-shadow:
        0 18px 45px
        rgba(17, 64, 50, 0.07);

    color: var(--dark);

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.mh-category-card::after {
    content: "↗";

    position: absolute;

    top: 28px;
    right: 28px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(17, 64, 50, 0.06);

    font-size: 18px;
    font-weight: 800;

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

.mh-category-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(17, 64, 50, 0.18);

    box-shadow:
        0 26px 60px
        rgba(17, 64, 50, 0.13);
}

.mh-category-card:hover::after {
    transform: rotate(10deg);

    background:
        rgba(17, 64, 50, 0.12);
}


/* CATEGORY ICON */

.mh-category-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    border-radius: 20px;

    margin-bottom: 38px;

    background: #f4f7f4;

    font-size: 30px;
}


/* CATEGORY TITLE */

.mh-category-card h3 {
    margin: 0 0 12px;

    max-width: 230px;

    font-family: "Poppins", sans-serif;

    font-size: 1.25rem;
    line-height: 1.25;

    letter-spacing: -0.4px;
}


/* CATEGORY TEXT */

.mh-category-card p {
    margin: 0 0 24px;

    color: #66736d;

    font-size: 0.95rem;
    line-height: 1.65;
}


/* CATEGORY LINK */

.mh-card-link {
    margin-top: auto;

    color: var(--green);

    font-size: 0.9rem;

    font-weight: 800;
}


/* =========================================================
   FEATURED SAVINGS CARD
   ========================================================= */

.mh-category-featured {
    background:
        linear-gradient(
            145deg,
            #143e32 0%,
            #0b6b53 100%
        );

    border-color: transparent;

    color: #ffffff;
}

.mh-category-featured::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    right: -60px;
    bottom: -70px;

    background:
        rgba(255, 212, 92, 0.15);
}

.mh-category-featured::after {
    background:
        rgba(255, 255, 255, 0.12);

    color: #ffffff;
}

.mh-category-featured:hover::after {
    background:
        rgba(255, 255, 255, 0.2);
}

.mh-category-featured .mh-category-icon {
    background:
        rgba(255, 255, 255, 0.12);
}

.mh-category-featured h3 {
    color: #ffffff;
}

.mh-category-featured p {
    color:
        rgba(255, 255, 255, 0.76);
}

.mh-category-featured .mh-card-link {
    color: #ffd45c;
}


/* FEATURED LABEL */

.mh-category-tag {
    position: absolute;

    top: 30px;
    right: 78px;

    padding: 7px 11px;

    border-radius: 100px;

    background: #ffd45c;

    color: #173c31;

    font-size: 0.68rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* =========================================================
   DISCOVER SECTION
   ========================================================= */

.mh-discover-section {
    position: relative;
}

.mh-discover-section .new-madeira-image {
    overflow: hidden;

    border-radius: 34px;
}

.mh-discover-section .new-madeira-image img {
    transition:
        transform 0.6s ease;
}

.mh-discover-section:hover
.new-madeira-image img {
    transform: scale(1.025);
}


/* =========================================================
   PERSONAL HELP
   ========================================================= */

.mh-help-section {
    position: relative;
    overflow: hidden;
}

.mh-help-section::after {
    content: "✦";

    position: absolute;

    right: 7%;
    bottom: -55px;

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

    font-size: 220px;

    line-height: 1;

    transform: rotate(15deg);

    pointer-events: none;
}


/* =========================================================
   FOXGLOVE FEATURED PARTNER
   ========================================================= */

.mh-foxglove-section {
    position: relative;

    padding: 110px 0;

    background: #f7f4ec;

    overflow: hidden;
}

.mh-foxglove-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    left: -250px;
    top: 40px;

    background:
        rgba(255, 212, 92, 0.12);

    pointer-events: none;
}


/* MAIN PARTNER PANEL */

.mh-foxglove-shell {
    position: relative;

    display: grid;

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

    min-height: 610px;

    border-radius: 42px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #143e32 0%,
            #0d5846 55%,
            #08765a 100%
        );

    box-shadow:
        0 35px 80px
        rgba(17, 64, 50, 0.18);
}


/* =========================================================
   FOXGLOVE COPY
   ========================================================= */

.mh-foxglove-copy {
    position: relative;
    z-index: 3;

    padding:
        70px
        40px
        70px
        70px;

    color: #ffffff;
}

.mh-partner-eyebrow {
    display: inline-flex;

    align-items: center;

    padding: 8px 13px;

    margin-bottom: 25px;

    border-radius: 100px;

    background: #ffd45c;

    color: #173c31;

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.mh-foxglove-copy .section-label {
    display: block;

    margin-bottom: 18px;

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

.mh-foxglove-copy h2 {
    margin:
        0
        0
        25px;

    max-width: 620px;

    color: #ffffff;

    font-family:
        "Poppins",
        sans-serif;

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

    line-height: 0.98;

    letter-spacing: -2.5px;
}

.mh-foxglove-copy p {
    max-width: 590px;

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

    font-size: 1rem;

    line-height: 1.75;
}

.mh-foxglove-intro {
    margin-bottom: 30px;
}


/* =========================================================
   FOXGLOVE PARTNER NAME
   ========================================================= */

.mh-partner-name {
    display: flex;

    align-items: center;

    gap: 16px;

    max-width: 500px;

    margin:
        30px
        0;

    padding:
        18px
        20px;

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

    border-radius: 20px;

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

    backdrop-filter:
        blur(8px);
}

.mh-partner-mark {
    flex: 0 0 auto;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: #ffd45c;

    color: #173c31;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 22px;

    font-weight: 900;
}

.mh-partner-name div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.mh-partner-name small {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.7rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.9px;
}

.mh-partner-name strong {
    color: #ffffff;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 1.05rem;
}


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

.mh-foxglove-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 34px;
}

.mh-foxglove-link {
    color: #ffffff;

    font-weight: 800;

    text-decoration: none;

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

    padding-bottom: 4px;

    transition:
        border-color 0.2s ease,
        opacity 0.2s ease;
}

.mh-foxglove-link:hover {
    border-color: #ffd45c;

    opacity: 0.8;
}


/* =========================================================
   FOXGLOVE VISUAL
   ========================================================= */

.mh-foxglove-visual {
    position: relative;

    min-height: 610px;

    overflow: hidden;
}

.mh-foxglove-visual::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    top: 45px;
    right: -130px;

    background:
        rgba(255, 255, 255, 0.06);
}


/* ORBITS */

.mh-finance-orbit {
    position: absolute;

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

    border-radius: 50%;
}

.mh-finance-orbit-one {
    width: 410px;
    height: 410px;

    top: 100px;
    right: -35px;
}

.mh-finance-orbit-two {
    width: 280px;
    height: 280px;

    top: 165px;
    right: 30px;
}


/* FINANCIAL CARD */

.mh-finance-card {
    position: absolute;

    z-index: 3;

    width:
        min(
            330px,
            calc(100% - 60px)
        );

    right: 60px;

    top: 180px;

    padding: 30px;

    border-radius: 28px;

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

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

    transform: rotate(3deg);
}

.mh-finance-card span {
    display: block;

    margin-bottom: 14px;

    color: #0b6b53;

    font-size: 0.7rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.mh-finance-card strong {
    display: block;

    margin-bottom: 12px;

    color: #173c31;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 1.7rem;

    line-height: 1.1;
}

.mh-finance-card p {
    margin: 0;

    color: #68736f;

    font-size: 0.9rem;

    line-height: 1.6;
}


/* CURRENCY BADGE */

.mh-finance-badge {
    position: absolute;

    z-index: 4;

    width: 100px;
    height: 100px;

    display: grid;
    place-items: center;

    right: 25px;
    top: 115px;

    border-radius: 50%;

    background: #ffd45c;

    color: #173c31;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 24px;

    font-weight: 900;

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.18);

    transform: rotate(8deg);
}


/* =========================================================
   FINANCIAL DISCLAIMER
   ========================================================= */

.mh-financial-disclaimer {
    max-width: 900px;

    margin:
        22px
        auto
        0;

    color: #737b77;

    text-align: center;

    font-size: 0.78rem;

    line-height: 1.6;
}


/* =========================================================
   BUSINESS CTA
   ========================================================= */

.mh-business-section {
    padding:
        90px
        0;

    background: #ffffff;
}

.mh-business-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding:
        55px
        60px;

    border-radius: 32px;

    background: #f3f7f4;

    border:
        1px solid
        rgba(17, 64, 50, 0.08);
}

.mh-business-inner > div {
    max-width: 720px;
}

.mh-business-inner h2 {
    margin:
        12px
        0
        14px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.3rem
        );

    line-height: 1.05;

    letter-spacing: -1.5px;

    color: var(--dark);
}

.mh-business-inner p {
    margin: 0;

    max-width: 650px;

    color: #68736f;

    line-height: 1.7;
}

.mh-business-inner .btn {
    flex: 0 0 auto;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

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


    .mh-foxglove-shell {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.8fr);
    }


    .mh-foxglove-copy {
        padding:
            60px
            25px
            60px
            50px;
    }


    .mh-finance-card {
        right: 35px;
    }


    .mh-business-inner {
        padding:
            45px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .mh-category-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 35px;
    }


    .mh-category-card {
        min-height: 250px;

        padding: 25px;

        border-radius: 23px;
    }


    .mh-category-icon {
        margin-bottom: 30px;
    }


    .mh-category-tag {
        top: 25px;
        right: 70px;
    }


    .mh-foxglove-section {
        padding:
            70px
            0;
    }


    .mh-foxglove-shell {
        display: block;

        min-height: 0;

        border-radius: 30px;
    }


    .mh-foxglove-copy {
        padding:
            45px
            25px
            35px;
    }


    .mh-foxglove-copy h2 {
        font-size:
            clamp(
                2.4rem,
                12vw,
                3.5rem
            );

        letter-spacing: -1.8px;
    }


    .mh-foxglove-visual {
        min-height: 390px;
    }


    .mh-finance-card {
        top: 90px;

        left: 25px;
        right: auto;

        width:
            calc(100% - 50px);

        transform: rotate(2deg);
    }


    .mh-finance-badge {
        width: 80px;
        height: 80px;

        top: 35px;
        right: 20px;

        font-size: 19px;
    }


    .mh-finance-orbit-one {
        width: 330px;
        height: 330px;

        top: 30px;
        right: -130px;
    }


    .mh-finance-orbit-two {
        width: 220px;
        height: 220px;

        top: 85px;
        right: -75px;
    }


    .mh-foxglove-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    .mh-business-section {
        padding:
            65px
            0;
    }


    .mh-business-inner {
        align-items: flex-start;

        flex-direction: column;

        gap: 30px;

        padding:
            35px
            25px;

        border-radius: 25px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .mh-category-card {
        min-height: 235px;
    }


    .mh-category-tag {
        position: static;

        align-self: flex-start;

        margin:
            -15px
            0
            20px;
    }


    .mh-category-featured
    .mh-category-icon {
        margin-bottom: 18px;
    }


    .mh-partner-name {
        align-items: flex-start;
    }


    .mh-partner-name strong {
        font-size: 0.95rem;
    }


    .mh-finance-card strong {
        font-size: 1.45rem;
    }

}

/* =========================================================
   HOMEPAGE HERO — FINAL SIZE ADJUSTMENT
========================================================= */

.mh-platform-hero .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
    gap: 70px;
}

.mh-platform-hero .hero-content {
    max-width: 760px;
}

.mh-platform-hero h1 {
    max-width: 760px;

    font-size: clamp(3.8rem, 5.25vw, 5.8rem);

    line-height: 0.91;

    letter-spacing: -4.5px;
}

.mh-platform-hero .hero-subtitle {
    max-width: 650px;

    font-size: clamp(1.15rem, 1.45vw, 1.4rem);

    line-height: 1.35;
}


/* TABLET */

@media (max-width: 1000px) {

    .mh-platform-hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .mh-platform-hero h1 {
        font-size: clamp(3rem, 14vw, 4.3rem);
        letter-spacing: -3px;
    }

}

/* =========================================================
   FOXGLOVE — BRAND COLOUR POLISH
   Keeps Madeira Helper layout, uses Foxglove-style colours
========================================================= */


/* MAIN FOXGLOVE PANEL */

.mh-foxglove-shell {
    background:
        linear-gradient(
            135deg,
            #183426 0%,
            #203f2c 52%,
            #294c35 100%
        );
}


/* REMOVE THE TEAL FEEL FROM THE RIGHT SIDE */

.mh-foxglove-visual::before {
    background: rgba(214, 184, 113, 0.045);
}


/* CIRCULAR DECORATION */

.mh-finance-orbit {
    border-color: rgba(214, 184, 113, 0.16);
}


/* FEATURED PARTNER BADGE */

.mh-partner-eyebrow {
    background: #d8bb78;
    color: #183426;
}


/* SAVINGS & FINANCIAL PLANNING LABEL */

.mh-foxglove-copy .section-label {
    color: rgba(232, 211, 160, 0.72);
}


/* MAIN HEADING */

.mh-foxglove-copy h2 {
    color: #ffffff;
}


/* BODY COPY */

.mh-foxglove-copy p {
    color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   FOXGLOVE OFFICIAL LOGO
========================================================= */

.mh-partner-name.mh-partner-logo-card {
    max-width: 500px;

    background: #183426;

    border:
        1px solid
        rgba(216, 187, 120, 0.25);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.15);
}


/* =========================================================
   RIGHT-HAND FINANCIAL CARD
========================================================= */

.mh-finance-card {
    background: #f7f3e9;

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


.mh-finance-card span {
    color: #294c35;
}


.mh-finance-card strong {
    color: #183426;
}


.mh-finance-card p {
    color: #657069;
}


/* =========================================================
   GOLD CURRENCY BADGE
========================================================= */

.mh-finance-badge {
    background: #d8bb78;

    color: #183426;

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.2);
}


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

.mh-foxglove-actions .btn-white {
    background: #f8f5ed;

    color: #183426;

    border-color: #f8f5ed;
}


.mh-foxglove-actions .btn-white:hover {
    background: #d8bb78;

    color: #183426;

    border-color: #d8bb78;

    transform: translateY(-2px);
}


/* SECONDARY LINK */

.mh-foxglove-link {
    color: #e4ca8d;

    border-bottom-color:
        rgba(228, 202, 141, 0.45);
}


.mh-foxglove-link:hover {
    color: #ffffff;

    border-bottom-color: #d8bb78;
}


/* =========================================================
   SUBTLE GOLD GLOW
========================================================= */

.mh-foxglove-shell::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216, 187, 120, 0.12) 0%,
            rgba(216, 187, 120, 0) 70%
        );

    pointer-events: none;
}


/* KEEP CONTENT ABOVE DECORATION */

.mh-foxglove-copy,
.mh-foxglove-visual {
    position: relative;
    z-index: 2;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.mh-financial-disclaimer {
    color: #68716c;
}

/* =========================================================
   MADEIRA HELPER
   HOMEPAGE — FINAL POLISH
   ========================================================= */


/* =========================================================
   1. REMOVE OLD / STRAY HOMEPAGE DECORATIONS
========================================================= */

/*
   Some of the original decorative shapes are showing
   through the redesigned homepage as large translucent
   pink / green / yellow rectangles.

   Keep decoration inside the hero and designed sections,
   but stop stray overflow across the page.
*/

body {
    overflow-x: hidden;
}

main {
    overflow: hidden;
}


/* Keep each redesigned homepage section isolated */

.mh-platform-hero,
.mh-explore-section,
.mh-discover-section,
.mh-help-section,
.mh-foxglove-section,
.how-section,
.mh-business-section,
.big-cta {
    position: relative;
    isolation: isolate;
}


/* Prevent decorative elements escaping their sections */

.mh-explore-section,
.mh-foxglove-section,
.how-section,
.mh-business-section,
.big-cta {
    overflow: hidden;
}


/* Remove old service-card decorative blocks */

.mh-explore-section .service-card::before,
.mh-explore-section .service-card::after {
    display: none !important;
}


/* Category cards should stay clean */

.mh-category-card::before {
    opacity: 0 !important;
}

.mh-category-card::after {
    opacity: 1;
}


/* =========================================================
   2. CATEGORY SECTION CLEANUP
========================================================= */

.mh-explore-section {
    background: #fbfaf5;
}

.mh-category-grid {
    position: relative;
    z-index: 2;
}

.mh-category-card {
    overflow: hidden;
    isolation: isolate;
}

.mh-category-card > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   3. FOXGLOVE SECTION — FINAL BALANCE
========================================================= */

.mh-foxglove-section {
    background: #fbfaf5;
}

.mh-foxglove-section .container {
    max-width: 1360px;
}

.mh-foxglove-shell {
    width: 100%;

    background:
        linear-gradient(
            135deg,
            #183426 0%,
            #203f2c 55%,
            #294c35 100%
        );

    border-radius: 42px;

    overflow: hidden;
}


/* Make the two sides feel more balanced */

.mh-foxglove-copy {
    max-width: 650px;
}


/* Transparent Foxglove logo */

.mh-foxglove-brand {
    width: 100%;
    max-width: 470px;

    margin: 32px 0 34px;

    padding: 0;

    background: transparent;

    border: none;

    box-shadow: none;
}

.mh-foxglove-brand-logo {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    background: transparent;
}


/* Keep right visual contained */

.mh-foxglove-visual {
    overflow: hidden;
}


/* Softer Foxglove decorative circle */

.mh-foxglove-visual::before {
    background: rgba(216, 187, 120, 0.035);
}


/* Foxglove orbit */

.mh-finance-orbit {
    border-color: rgba(216, 187, 120, 0.13);
}


/* Foxglove gold */

.mh-partner-eyebrow,
.mh-finance-badge {
    background: #d8bb78;
    color: #183426;
}


/* =========================================================
   4. HOW IT WORKS — BETTER HEADING BALANCE
========================================================= */

.how-header {
    max-width: 980px;
}

.how-header h2 {
    max-width: 900px;

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

    line-height: 0.91;

    letter-spacing: -4px;
}


/* Steps stay above any background decoration */

.steps {
    position: relative;
    z-index: 2;
}


/* =========================================================
   5. BUSINESS CTA — SLIGHTLY TIGHTER
========================================================= */

.mh-business-section {
    background: #ffffff;
}

.mh-business-inner {
    padding-top: 60px;
    padding-bottom: 60px;

    background: #f5f7f4;

    border: 1px solid rgba(16, 39, 31, 0.08);

    box-shadow:
        0 20px 55px
        rgba(16, 39, 31, 0.045);
}


/* =========================================================
   6. FINAL CORAL CTA
========================================================= */

.big-cta {
    background: #ffffff;
}

.big-cta .container {
    position: relative;
    z-index: 2;
}

.big-cta-inner {
    overflow: hidden;

    box-shadow:
        0 28px 65px
        rgba(16, 39, 31, 0.12);
}


/*
   Make sure decorations remain INSIDE
   the coral CTA card.
*/

.big-cta-inner::before,
.big-cta-inner::after,
.big-cta .cta-decoration {
    pointer-events: none;
}


/* =========================================================
   7. FOOTER CLEANUP
========================================================= */

.site-footer {
    position: relative;
    z-index: 5;

    background: #10271f;
}

.footer-grid {
    position: relative;
    z-index: 2;
}


/* =========================================================
   8. RESPONSIVE POLISH
========================================================= */

@media (max-width: 1000px) {

    .mh-foxglove-section .container {
        max-width: 100%;
    }

    .mh-foxglove-copy {
        max-width: 100%;
    }

    .how-header {
        max-width: 760px;
    }

    .how-header h2 {
        max-width: 760px;

        font-size: clamp(3.6rem, 9vw, 6rem);
    }

}


@media (max-width: 700px) {

    .mh-foxglove-shell {
        border-radius: 28px;
    }

    .mh-foxglove-brand {
        max-width: 100%;

        margin: 28px 0;
    }

    .how-header h2 {
        font-size: clamp(3rem, 13vw, 4.7rem);

        line-height: 0.94;

        letter-spacing: -2.5px;
    }

    .mh-business-inner {
        padding-top: 42px;
        padding-bottom: 42px;
    }

}


/* =========================================================
   9. FINAL HOMEPAGE BACKGROUND SAFETY
========================================================= */

/*
   Stops legacy absolute decorative elements from
   appearing between redesigned homepage sections.
*/

.mh-explore-section > .hero-decoration,
.mh-foxglove-section > .hero-decoration,
.how-section > .hero-decoration,
.mh-business-section > .hero-decoration,
.big-cta > .hero-decoration {
    display: none !important;
}

/* =========================================================
   FIX — SAVINGS FEATURED CARD
========================================================= */

.mh-category-featured {
    position: relative;
    overflow: hidden;
}


/* FEATURED BADGE */

.mh-category-featured .mh-category-tag {
    position: absolute;

    top: 30px;
    right: 72px;

    width: auto;
    height: auto;

    margin: 0;
    padding: 9px 14px;

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

    background: #ffd45c;

    color: #10271f;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    white-space: nowrap;

    z-index: 10;
}


/* KEEP THE TITLE CLEAR OF THE BADGE */

.mh-category-featured h3 {
    position: relative;

    margin-top: 36px;

    color: #ffffff;

    z-index: 3;
}


/* ICON */

.mh-category-featured .mh-category-icon {
    position: relative;

    z-index: 3;
}


/* TEXT */

.mh-category-featured p {
    position: relative;

    z-index: 3;
}


/* BOTTOM LINK */

.mh-category-featured .mh-card-link {
    position: relative;

    z-index: 3;
}


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

@media (max-width: 650px) {

    .mh-category-featured .mh-category-tag {
        top: 26px;
        right: 68px;

        padding: 8px 12px;

        font-size: 0.66rem;
    }

    .mh-category-featured h3 {
        margin-top: 34px;
    }

}

/* =========================================================
   MADEIRA HELPER — MOBILE TYPOGRAPHY POLISH
   ========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .mh-platform-hero h1 {
        font-size: clamp(3rem, 11vw, 4.2rem);
        line-height: 0.98;
        letter-spacing: -2.5px;

        max-width: 100%;
    }

    .mh-platform-hero h1 span {
        line-height: 0.98;
    }


    /* -----------------------------------------
       WHAT ARE YOU LOOKING FOR?
    ----------------------------------------- */

    .mh-explore-section .services-header h2 {
        font-size: clamp(2.9rem, 10vw, 4rem);
        line-height: 1;
        letter-spacing: -2px;

        max-width: 100%;
    }


    /* -----------------------------------------
       DISCOVER MADEIRA & PORTO SANTO
    ----------------------------------------- */

    .mh-discover-section .new-madeira-content h2 {
        font-size: clamp(2.8rem, 9.5vw, 3.9rem);
        line-height: 1.02;
        letter-spacing: -2px;

        max-width: 100%;
    }


    /* -----------------------------------------
       JUST ASK MADEIRA HELPER
    ----------------------------------------- */

    .mh-help-section .language-intro h2 {
        font-size: clamp(3rem, 10vw, 4.2rem);
        line-height: 1;
        letter-spacing: -2px;

        max-width: 100%;
    }


    /* -----------------------------------------
       REAL HELP WHEN YOU NEED IT
    ----------------------------------------- */

    .mh-help-section .language-content h3 {
        font-size: clamp(2.3rem, 8vw, 3.2rem);
        line-height: 1.04;
        letter-spacing: -1.5px;

        max-width: 100%;
    }


    /* -----------------------------------------
       FOXGLOVE
       Only a small adjustment — already good
    ----------------------------------------- */

    .mh-foxglove-copy h2 {
        font-size: clamp(3rem, 9vw, 4rem);
        line-height: 1;
        letter-spacing: -2px;
    }


    /* -----------------------------------------
       HOW IT WORKS
    ----------------------------------------- */

    .how-header h2 {
        font-size: clamp(3rem, 10vw, 4.3rem);
        line-height: 1;
        letter-spacing: -2px;

        max-width: 100%;
    }


    /* -----------------------------------------
       FINAL CTA
    ----------------------------------------- */

    .big-cta-inner h2 {
        font-size: clamp(3rem, 10vw, 4.3rem);
        line-height: 1;
        letter-spacing: -2px;

        max-width: 100%;
    }

}

/* =========================================================
   MOBILE FIX — CATEGORY SECTION HEADING
========================================================= */

@media (max-width: 700px) {

    .mh-explore-section .services-header h2 {
        font-size: clamp(2.7rem, 8.5vw, 3.5rem);
        line-height: 1.05;
        letter-spacing: -1.5px;

        max-width: 520px;
    }

}

/* =====================================================
   EXPLORE HEADING - MOBILE FIX
===================================================== */

.mobile-heading-break {
    display: inline;
}

@media (max-width: 700px) {

    .mh-explore-section .services-header h2 {
        font-size: 3rem;
        line-height: 0.98;
        letter-spacing: -1.5px;
        max-width: 100%;
    }

    .mobile-heading-break {
        display: block;
    }

}

/* =====================================================
   MOBILE EXPLORE HEADING - FINAL FIX
===================================================== */

@media (max-width: 700px) {

    .mh-explore-section .services-header h2 {
        font-size: 3rem !important;
        line-height: 0.95 !important;
        letter-spacing: -1.5px !important;
    }

    .mh-explore-section .services-header h2 .mobile-heading-break {
        display: block !important;
    }

}

/* =====================================================
   EXPLORE HEADING - MOBILE ONLY LINE BREAK
===================================================== */

.mobile-heading-break {
    display: inline;
}

@media (max-width: 768px) {

    .services-header h2 .mobile-heading-break {
        display: block;
    }

}

/* =====================================================
   MOBILE WHATSAPP BUTTON
===================================================== */

@media (max-width: 768px) {

    .whatsapp-float {
        right: 14px;
        bottom: 14px;

        padding: 10px 14px;

        font-size: 0.78rem;

        border-radius: 999px;

        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);

        z-index: 1000;
    }

}

/* =====================================================
   PERSONAL HELP SECTION - MOBILE POLISH
===================================================== */

@media (max-width: 768px) {

    .mh-help-section {
        padding-top: 75px;
        padding-bottom: 80px;
    }

    .mh-help-section .language-grid {
        gap: 30px;
    }

    .mh-help-section .language-intro h2 {
        font-size: clamp(2.7rem, 11vw, 4rem);
        line-height: 0.95;
        letter-spacing: -2px;
        margin-bottom: 0;
    }

    .mh-help-section .language-content h3 {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
        line-height: 1.05;
        letter-spacing: -1.5px;
        margin-bottom: 24px;
    }

    .mh-help-section .language-content p {
        font-size: 1rem;
        line-height: 1.75;
        margin-bottom: 20px;
    }

    .mh-help-section .language-link {
        margin-top: 10px;
    }
}

/* =========================================================
   FOXGLOVE — FINAL MOBILE POLISH
   ========================================================= */

@media (max-width: 700px) {

    /* Reduce the large outside spacing */
    .mh-foxglove-section {
        padding: 65px 0;
    }

    /* Main green Foxglove panel */
    .mh-foxglove-shell {
        display: block;
        min-height: 0;
        border-radius: 28px;
    }

    /* Left/text area */
    .mh-foxglove-copy {
        padding: 38px 24px 32px;
    }

    /* Featured Partner badge */
    .mh-partner-eyebrow {
        margin-bottom: 20px;
    }

    /* Main heading */
    .mh-foxglove-copy h2 {
        max-width: 100%;
        margin-bottom: 20px;

        font-size: clamp(2.35rem, 11vw, 3.25rem);
        line-height: 0.98;
        letter-spacing: -1.8px;
    }

    /* Description */
    .mh-foxglove-copy p {
        max-width: 100%;
        font-size: 0.96rem;
        line-height: 1.65;
    }

    /* Foxglove logo */
    .mh-foxglove-brand {
        width: 100%;
        max-width: 330px;

        margin: 26px 0 28px;
    }

    .mh-foxglove-brand-logo {
        width: 100%;
        height: auto;
    }

    /* Buttons / links */
    .mh-foxglove-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .mh-foxglove-actions .btn-white {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .mh-foxglove-link {
        align-self: flex-start;
    }

    /* Right financial visual */
    .mh-foxglove-visual {
        position: relative;
        min-height: 330px;
        overflow: hidden;
    }

    /* Financial card */
    .mh-finance-card {
        top: 65px;
        left: 22px;
        right: auto;

        width: calc(100% - 44px);
        max-width: none;

        transform: rotate(1.5deg);
    }

    /* Gold € badge */
    .mh-finance-badge {
        width: 70px;
        height: 70px;

        top: 24px;
        right: 18px;

        font-size: 17px;
    }

    /* Decorative circles */
    .mh-finance-orbit-one {
        width: 290px;
        height: 290px;

        top: 20px;
        right: -125px;
    }

    .mh-finance-orbit-two {
        width: 195px;
        height: 195px;

        top: 72px;
        right: -70px;
    }
}


/* Extra adjustment for small phones */
@media (max-width: 430px) {

    .mh-foxglove-section {
        padding: 52px 0;
    }

    .mh-foxglove-copy {
        padding: 34px 20px 28px;
    }

    .mh-foxglove-copy h2 {
        font-size: clamp(2.15rem, 11vw, 2.8rem);
    }

    .mh-foxglove-brand {
        max-width: 285px;
    }

    .mh-foxglove-visual {
        min-height: 300px;
    }

    .mh-finance-card {
        top: 58px;
        left: 18px;
        width: calc(100% - 36px);
    }
}

/* =========================================================
   HOW IT WORKS — MOBILE HEADING POLISH
   ========================================================= */

@media (max-width: 700px) {

    .how-header h2 {
        max-width: 100%;

        font-size: clamp(2.8rem, 11vw, 4rem);
        line-height: 0.95;
        letter-spacing: -2px;
    }
}

@media (max-width: 430px) {

    .how-header h2 {
        font-size: clamp(2.5rem, 10.5vw, 3.2rem);
        letter-spacing: -1.5px;
    }
}

/* ========================================
   MOBILE FOOTER FINAL FIX
======================================== */

@media (max-width: 768px) {

    footer {
        padding-bottom: 100px;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-right: 140px;
    }

    .whatsapp-float {
        position: fixed;
        right: 18px;
        bottom: 22px;
        z-index: 9999;
    }

}

/* ========================================
   MOBILE FOOTER LOGO
======================================== */

@media (max-width: 768px) {

    .footer-logo img {
        width: 190px;
        max-width: 190px;
        height: auto;
    }

}

/* =========================================================
   MADEIRA HELPER - MODERN MOBILE MENU
   ========================================================= */

@media (max-width: 900px) {

    /* Mobile menu container */
    .mobile-menu {
        display: block;
        max-height: 0;
        overflow: hidden;

        background: #f8f4ea;

        border-top: 1px solid rgba(15, 45, 35, 0.08);

        opacity: 0;

        transition:
            max-height 0.45s ease,
            opacity 0.3s ease;
    }


    /* When menu is open */
    .mobile-menu.open {
        max-height: 650px;
        opacity: 1;
    }


    /* Menu inside */
    .mobile-menu-inner {
        display: flex;
        flex-direction: column;

        padding-top: 18px;
        padding-bottom: 28px;
    }


    /* Normal menu links */
    .mobile-menu-inner > a:not(.mobile-help-button) {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding: 17px 4px;

        color: #102c23;

        font-family: "Inter", sans-serif;
        font-size: 17px;
        font-weight: 700;

        text-decoration: none;

        border-bottom: 1px solid rgba(15, 45, 35, 0.10);

        transition:
            color 0.2s ease,
            padding-left 0.2s ease;
    }


    /* Add arrow */
    .mobile-menu-inner > a:not(.mobile-help-button)::after {
        content: "→";

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

        color: #f06f5d;

        opacity: 0;

        transform: translateX(-8px);

        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }


    /* Hover effect */
    .mobile-menu-inner > a:not(.mobile-help-button):hover {
        color: #ef705e;
        padding-left: 8px;
    }


    .mobile-menu-inner > a:not(.mobile-help-button):hover::after {
        opacity: 1;
        transform: translateX(0);
    }


    /* WhatsApp button */
    .mobile-help-button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;

        margin-top: 22px;
        padding: 17px 24px;

        background: #ef705e;

        color: #102c23;

        border-radius: 999px;

        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 800;

        text-decoration: none;

        box-shadow: 0 10px 25px rgba(239, 112, 94, 0.20);

        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;
    }


    .mobile-help-button:hover {
        transform: translateY(-2px);

        background: #ffd45c;

        box-shadow: 0 14px 30px rgba(15, 45, 35, 0.15);
    }


    /* Hamburger animation */
    .menu-toggle span {
        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }


    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }


    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

}

/* =========================================================
   FEATURED LOCAL BUSINESSES
========================================================= */

.featured-businesses {
    padding: 110px 0;
    background: #ffffff;
}

.featured-businesses-heading {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 48px;
}

.featured-businesses-heading h2 {
    margin: 10px 0 0;
    max-width: 650px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.4rem, 4vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: var(--dark);
}

.featured-businesses-heading > p {
    max-width: 480px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-soft);
}


/* BUSINESS GRID */

.featured-business-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* BUSINESS CARD */

.featured-business-card {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(16, 48, 38, 0.12);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(16, 48, 38, 0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.featured-business-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 55px rgba(16, 48, 38, 0.13);
}


/* COLOURED IMAGE / PLACEHOLDER AREA */

.featured-business-image {
    position: relative;
    min-height: 230px;
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.featured-business-placeholder {
    background: #dcefe5;
}

.business-placeholder-yellow {
    background: #f8df82;
}

.business-placeholder-coral {
    background: #f4b5a9;
}

.featured-business-placeholder > span {
    font-size: 4.3rem;
    line-height: 1;
    transition: transform 0.25s ease;
}

.featured-business-card:hover .featured-business-placeholder > span {
    transform: scale(1.08) rotate(-4deg);
}


/* CATEGORY BADGE */

.featured-business-category {
    position: absolute;
    top: 22px;
    left: 22px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--dark);
    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* CARD CONTENT */

.featured-business-content {
    padding: 28px 28px 30px;
}

.featured-business-location {
    margin-bottom: 12px;
    color: var(--green);
    font-size: 0.82rem;
    font-weight: 700;
}

.featured-business-content h3 {
    margin: 0 0 12px;
    font-family: "Poppins", sans-serif;
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--dark);
}

.featured-business-content p {
    margin: 0 0 25px;
    color: var(--text-soft);
    line-height: 1.65;
}

.featured-business-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-weight: 800;
    text-decoration: none;
}

.featured-business-link:hover {
    text-decoration: underline;
}


/* BOTTOM HELP STRIP */

.featured-businesses-bottom {
    margin-top: 38px;
    padding: 25px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: var(--cream);
    border: 1px solid rgba(16, 48, 38, 0.1);
    border-radius: 24px;
}

.featured-businesses-bottom p {
    margin: 0;
    max-width: 650px;
    color: var(--dark);
    font-weight: 600;
}


/* =========================================================
   FEATURED BUSINESSES — TABLET
========================================================= */

@media (max-width: 900px) {

    .featured-businesses {
        padding: 85px 0;
    }

    .featured-businesses-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .featured-businesses-heading > p {
        max-width: 620px;
    }

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

    .featured-business-card:last-child {
        grid-column: 1 / -1;
    }
}


/* =========================================================
 FEATURED

 /* =========================================================
   REAL BUSINESS CARDS
========================================================= */

.business-photo {
    position: relative;
    padding: 0;
    min-height: 230px;
    background: #e8eee8;
}

.business-photo img {
    width: 100%;
    height: 230px;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.real-business-card:hover .business-photo img {
    transform: scale(1.04);
}


/* CATEGORY LABEL OVER PHOTO */

.business-photo .featured-business-category {
    z-index: 2;
    top: 22px;
    left: 22px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
}


/* CALL + FACEBOOK BUTTONS */

.business-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0;
}

.business-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;

    border: 1px solid rgba(16, 48, 38, 0.15);
    border-radius: 999px;

    background: #f7f6f0;
    color: var(--dark);

    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;

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

.business-contact-button:hover {
    background: var(--dark);
    color: #ffffff;
    transform: translateY(-2px);
}


/* MOBILE */

@media (max-width: 600px) {

    .business-photo,
    .business-photo img {
        min-height: 200px;
        height: 200px;
    }

    .business-card-actions {
        margin: 18px 0;
    }
}

/* =========================================
   FOXGLOVE BUSINESS CARD LOGO
========================================= */

.featured-business-image:has(.foxglove-logo) {
    background: #12382d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px;
}

.featured-business-image .foxglove-logo {
    width: 90%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    display: block;
}

/* =========================================================
   FEATURED PARTNER - FOXGLOVE INTERNATIONAL
========================================================= */

.featured-partner {
    background: #0d2f26;
    padding: 90px 24px;
}

.featured-partner-inner {
    width: min(1180px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;
}


/* LEFT SIDE
----------------------------------------- */

.featured-partner-logo {
    min-height: 280px;
    padding: 45px;

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

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

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

.featured-partner-label {
    display: inline-flex;

    margin-bottom: 35px;
    padding: 9px 14px;

    border-radius: 999px;

    background: #f4d77b;
    color: #0d2f26;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.featured-partner-logo img {
    width: 100%;
    max-width: 480px;
    height: auto;

    object-fit: contain;
    display: block;
}


/* RIGHT SIDE
----------------------------------------- */

.featured-partner-content {
    color: #ffffff;
}

.featured-partner-eyebrow {
    margin: 0 0 18px;

    color: #f4d77b;

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.featured-partner-content h2 {
    max-width: 650px;
    margin: 0 0 22px;

    color: #ffffff;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.featured-partner-content > p:not(.featured-partner-eyebrow) {
    max-width: 620px;
    margin: 0 0 30px;

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

    font-size: 1rem;
    line-height: 1.75;
}


/* LINK
----------------------------------------- */

.featured-partner-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 15px 22px;

    border-radius: 999px;

    background: #f4d77b;
    color: #0d2f26;

    text-decoration: none;

    font-weight: 800;

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

.featured-partner-link:hover {
    transform: translateY(-2px);
    background: #ffffff;
}

.featured-partner-link span {
    transition: transform 0.25s ease;
}

.featured-partner-link:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 900px) {

    .featured-partner {
        padding: 70px 24px;
    }

    .featured-partner-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .featured-partner-logo {
        min-height: 220px;
    }

}


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

@media (max-width: 600px) {

    .featured-partner {
        padding: 55px 20px;
    }

    .featured-partner-inner {
        gap: 35px;
    }

    .featured-partner-logo {
        min-height: 190px;
        padding: 28px;
        border-radius: 22px;
    }

    .featured-partner-label {
        margin-bottom: 25px;
        font-size: 0.64rem;
    }

    .featured-partner-content h2 {
        font-size: 2rem;
    }

    .featured-partner-content > p:not(.featured-partner-eyebrow) {
        font-size: 0.95rem;
    }

}

/* =========================================================
   FOXGLOVE - FEATURED PARTNER BUSINESS CARD
========================================================= */

.foxglove-featured-card {
    position: relative;

    border: 2px solid #c9a84c;

    background: #ffffff;

    box-shadow:
        0 22px 55px rgba(13, 47, 38, 0.16),
        0 0 0 5px rgba(201, 168, 76, 0.07);
}


/* GOLD TOP ACCENT */

.foxglove-featured-card::before {
    content: "";

    position: absolute;
    z-index: 5;

    top: 0;
    left: 28px;
    right: 28px;

    height: 4px;

    border-radius: 0 0 10px 10px;

    background: #c9a84c;
}


/* LOGO AREA */

.foxglove-featured-card .business-photo {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(201, 168, 76, 0.14),
            transparent 35%
        ),
        #0d2f26;

    padding: 42px;
}


.foxglove-featured-card .foxglove-logo {
    width: 90%;
    max-width: 360px;

    height: 150px;

    object-fit: contain;

    margin: auto;
}


/* FEATURED PARTNER BADGE */

.foxglove-featured-card
.featured-business-category {
    background: #c9a84c;

    color: #0d2f26;

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

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

    font-weight: 900;

    letter-spacing: 0.1em;
}


/* PARTNER LINE */

.foxglove-featured-card
.featured-business-location {
    color: #a1812f;

    font-weight: 800;
}


/* BUSINESS NAME */

.foxglove-featured-card h3 {
    color: #0d2f26;
}


/* MAIN LINK */

.foxglove-featured-card
.featured-business-link {
    color: #9a7826;
}


/* HOVER */

.foxglove-featured-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 30px 65px rgba(13, 47, 38, 0.20),
        0 0 0 5px rgba(201, 168, 76, 0.10);
}


/* MOBILE */

@media (max-width: 600px) {

    .foxglove-featured-card .business-photo {
        padding: 30px;
    }

    .foxglove-featured-card .foxglove-logo {
        height: 125px;
    }

}

/* =========================================================
   MADEIRA HELPER
   MODERN BUSINESS DIRECTORY
========================================================= */


/* =========================================================
   CATEGORY FILTER BUTTONS
========================================================= */

.directory-category-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 35px;
}

.directory-filter {
    border: 1px solid rgba(16, 48, 38, 0.14);
    background: #ffffff;
    color: var(--dark);
    padding: 12px 18px;
    border-radius: 999px;
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.directory-filter:hover {
    transform: translateY(-2px);
    border-color: var(--green);
    box-shadow: 0 8px 20px rgba(16, 48, 38, 0.08);
}

.directory-filter.active {
    background: var(--green);
    color: #ffffff;
    border-color: var(--green);
}


/* =========================================================
   FEATURED PARTNER SECTION
========================================================= */

.directory-featured-partner {
    padding: 90px 0;
    background: #ffffff;
}

.directory-featured-heading {
    max-width: 700px;
    margin-bottom: 32px;
}

.directory-featured-heading h2 {
    margin-top: 10px;
    margin-bottom: 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.08;
    color: var(--dark);
}


/* FOXGLOVE FEATURED CARD */

.directory-partner-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) 1.2fr;
    align-items: center;
    overflow: hidden;
    border-radius: 30px;
    background: var(--green);
    box-shadow: 0 24px 60px rgba(16, 48, 38, 0.14);
}

.directory-partner-card::after {
    content: "✦";
    position: absolute;
    right: -25px;
    bottom: -90px;
    color: rgba(255, 255, 255, 0.05);
    font-size: 300px;
    line-height: 1;
    pointer-events: none;
}


/* FOXGLOVE LOGO SIDE */

.directory-partner-logo {
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px;
    background: #ffffff;
}

.directory-partner-logo img {
    width: 100%;
    max-width: 330px;
    height: auto;
    object-fit: contain;
}


/* FOXGLOVE TEXT SIDE */

.directory-partner-content {
    position: relative;
    z-index: 1;
    padding: 55px 60px;
    color: #ffffff;
}

.partner-badge {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--dark);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.directory-partner-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

.directory-partner-content p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.8;
}

.directory-partner-message {
    display: inline-block;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--yellow);
    font-weight: 700;
}


/* =========================================================
   BUSINESS DIRECTORY SECTION
========================================================= */

.business-directory-section {
    padding: 95px 0;
    background: #f7f5ef;
}


/* DIRECTORY HEADING */

.business-directory-heading {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: end;
    gap: 50px;
    margin-bottom: 38px;
}

.business-directory-heading h2 {
    margin: 10px 0 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.08;
    color: var(--dark);
}

.business-directory-heading > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}


/* =========================================================
   DIRECTORY SEARCH TOOLBAR
========================================================= */

.directory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 32px;
}

.directory-search-box {
    position: relative;
    width: min(100%, 620px);
}

.directory-search-icon {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
}

.directory-search-box input {
    width: 100%;
    min-height: 56px;
    padding: 0 20px 0 50px;
    border: 1px solid rgba(16, 48, 38, 0.12);
    border-radius: 16px;
    outline: none;
    background: #ffffff;
    color: var(--dark);
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    box-shadow: 0 8px 25px rgba(16, 48, 38, 0.04);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.directory-search-box input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(16, 48, 38, 0.07);
}

.directory-search-box input::placeholder {
    color: #8b948f;
}

.directory-count {
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(16, 48, 38, 0.07);
    color: var(--green);
    font-size: 0.85rem;
    font-weight: 800;
}


/* =========================================================
   COMPACT DIRECTORY GRID
========================================================= */

.directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* =========================================================
   COMPACT BUSINESS CARD
========================================================= */

.directory-business-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 48, 38, 0.08);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 32px rgba(16, 48, 38, 0.06);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.directory-business-card:hover {
    transform: translateY(-5px);
    border-color: rgba(16, 48, 38, 0.14);
    box-shadow: 0 20px 42px rgba(16, 48, 38, 0.11);
}


/* CARD IMAGE */

.directory-card-image {
    position: relative;
    height: 185px;
    overflow: hidden;
    background: #ecece7;
}

.directory-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.directory-business-card:hover .directory-card-image img {
    transform: scale(1.04);
}


/* CATEGORY LABEL */

.directory-card-category {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(16, 48, 38, 0.92);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    backdrop-filter: blur(6px);
}


/* CARD CONTENT */

.directory-card-content {
    padding: 20px;
}

.directory-card-location {
    display: block;
    margin-bottom: 9px;
    color: var(--green);
    font-size: 0.78rem;
    font-weight: 700;
}

.directory-card-content h3 {
    margin: 0 0 6px;
    color: var(--dark);
    font-family: "Poppins", sans-serif;
    font-size: 1.08rem;
    line-height: 1.3;
}

.directory-card-content > p {
    min-height: 22px;
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}


/* CARD BUTTONS */

.directory-card-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
}

.directory-card-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(16, 48, 38, 0.12);
    border-radius: 10px;
    color: var(--green);
    background: #ffffff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.directory-card-actions a:last-child {
    background: var(--green);
    color: #ffffff;
    border-color: var(--green);
}

.directory-card-actions a:hover {
    background: var(--yellow);
    color: var(--dark);
    border-color: var(--yellow);
}


/* =========================================================
   NO SEARCH RESULTS
========================================================= */

.directory-no-results {
    margin-top: 30px;
    padding: 55px 25px;
    border-radius: 24px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 10px 30px rgba(16, 48, 38, 0.05);
}

.directory-no-results[hidden] {
    display: none;
}

.directory-no-results-icon {
    margin-bottom: 15px;
    font-size: 2rem;
}

.directory-no-results h3 {
    margin: 0 0 10px;
    color: var(--dark);
    font-family: "Poppins", sans-serif;
    font-size: 1.4rem;
}

.directory-no-results p {
    max-width: 520px;
    margin: 0 auto 24px;
    color: var(--muted);
    line-height: 1.7;
}


/* =========================================================
   DIRECTORY BOTTOM
========================================================= */

.business-directory-section .featured-businesses-bottom {
    margin-top: 45px;
}


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

@media (max-width: 900px) {

    .directory-partner-card {
        grid-template-columns: 1fr;
    }

    .directory-partner-logo {
        min-height: 250px;
        padding: 40px;
    }

    .directory-partner-logo img {
        max-width: 280px;
    }

    .directory-partner-content {
        padding: 40px;
    }

    .business-directory-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

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

}


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

@media (max-width: 620px) {

    .directory-featured-partner,
    .business-directory-section {
        padding: 65px 0;
    }

    .directory-category-buttons {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .directory-category-buttons::-webkit-scrollbar {
        display: none;
    }

    .directory-filter {
        flex: 0 0 auto;
    }

    .directory-partner-card {
        border-radius: 22px;
    }

    .directory-partner-logo {
        min-height: 210px;
        padding: 32px;
    }

    .directory-partner-content {
        padding: 32px 25px;
    }

    .directory-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .directory-search-box {
        width: 100%;
    }

    .directory-count {
        align-self: flex-start;
    }

    .directory-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .directory-card-image {
        height: 190px;
    }

}

/* =========================================================
   FOXGLOVE FEATURED PARTNER - REFINED VERSION
========================================================= */

.directory-featured-partner {
    padding: 80px 0;
    background: #ffffff;
}

.directory-featured-heading {
    max-width: 760px;
    margin-bottom: 35px;
}


/* MAIN FOXGLOVE CARD */

.directory-partner-card {
    position: relative;

    display: grid;
    grid-template-columns: 42% 58%;

    min-height: 360px;

    overflow: hidden;

    border-radius: 28px;

    background: #12372f;

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

    box-shadow:
        0 25px 60px rgba(16, 48, 38, 0.14);
}


/* DECORATIVE STAR */

.directory-partner-card::after {
    content: "✦";

    position: absolute;

    right: -20px;
    bottom: -105px;

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

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

    pointer-events: none;
}


/* =========================================================
   FOXGLOVE LOGO AREA
========================================================= */

.directory-partner-logo {
    position: relative;

    min-height: 360px;

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

    padding: 55px;

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

    border-right:
        1px solid rgba(255, 255, 255, 0.08);
}


/* REMOVE THE HUGE WHITE IMAGE AREA */

.directory-partner-logo img {
    display: block;

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

    height: auto;

    object-fit: contain;

    mix-blend-mode: screen;
}


/* =========================================================
   FOXGLOVE INFORMATION
========================================================= */

.directory-partner-content {
    position: relative;

    z-index: 2;

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

    padding: 55px 65px;

    color: #ffffff;
}


/* FEATURED BADGE */

.partner-badge {
    align-self: flex-start;

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

    margin-bottom: 22px;

    padding: 10px 16px;

    border-radius: 999px;

    background: #f4d875;

    color: #102e27;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;
}


/* FOXGLOVE NAME */

.directory-partner-content h2 {
    margin: 0 0 18px;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    line-height: 1.05;

    letter-spacing: -0.04em;
}


/* DESCRIPTION */

.directory-partner-content p {
    max-width: 620px;

    margin: 0;

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

    font-size: 1rem;

    line-height: 1.75;
}


/* BOTTOM MESSAGE */

.directory-partner-message {
    width: fit-content;

    margin-top: 28px;

    padding-top: 20px;

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

    color: #f4d875;

    font-size: 0.9rem;

    font-weight: 700;
}


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

@media (max-width: 900px) {

    .directory-partner-card {
        grid-template-columns: 1fr;
    }

    .directory-partner-logo {
        min-height: 240px;

        padding: 40px;

        border-right: none;

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

    .directory-partner-logo img {
        max-width: 380px;
    }

    .directory-partner-content {
        padding: 45px;
    }

}


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

@media (max-width: 620px) {

    .directory-featured-partner {
        padding: 60px 0;
    }

    .directory-partner-card {
        min-height: auto;

        border-radius: 22px;
    }

    .directory-partner-logo {
        min-height: 190px;

        padding: 30px;
    }

    .directory-partner-logo img {
        max-width: 290px;
    }

    .directory-partner-content {
        padding: 32px 25px;
    }

    .directory-partner-content h2 {
        font-size: 2rem;
    }

}

/* =========================================================
   FOR BUSINESSES — HOW IT WORKS FIX
   ========================================================= */

.business-how-section {
    background: #f8f3e9 !important;
    color: var(--dark) !important;
}

.business-how-section .section-eyebrow {
    color: var(--green) !important;
}

.business-how-section .section-heading h2 {
    color: var(--dark) !important;
}

.business-how-section .section-heading p {
    color: #64706a !important;
}


/* HOW IT WORKS STEPS */

.business-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.business-step {
    position: relative;

    padding: 32px 28px;

    background: #ffffff !important;

    border: 1px solid rgba(18, 33, 27, 0.10);

    border-radius: 24px;

    box-shadow:
        0 14px 40px rgba(18, 33, 27, 0.06);

    color: var(--dark) !important;

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

.business-step:hover {
    transform: translateY(-6px);

    box-shadow:
        0 22px 50px rgba(18, 33, 27, 0.11);
}


/* NUMBER CIRCLE */

.business-step > span {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: var(--yellow) !important;
    color: var(--dark) !important;

    font-weight: 900;
    font-size: 1rem;
}


/* STEP TITLE */

.business-step h3 {
    margin-bottom: 12px;

    font-family: "Poppins", sans-serif;

    font-size: 1.15rem;
    font-weight: 800;

    line-height: 1.3;

    color: var(--dark) !important;
}


/* STEP DESCRIPTION */

.business-step p {
    margin: 0;

    color: #66736d !important;

    font-size: 0.95rem;

    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

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

}


@media (max-width: 650px) {

    .business-how-section {
        padding: 75px 0;
    }

    .business-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .business-step {
        padding: 26px 24px;
    }

}

/* =========================================================
   PORTUGUESE FOXGLOVE SECTION - TEXT COLOUR FIX
========================================================= */

.mh-foxglove-section {
    background: transparent;
}

.mh-foxglove-shell {
    background: #173d30;
    color: #ffffff;
}

/* Main Foxglove content */

.mh-foxglove-main,
.mh-foxglove-main h2,
.mh-foxglove-main h3,
.mh-foxglove-main p,
.mh-foxglove-main strong {
    color: #ffffff;
}

.mh-foxglove-main h2 span {
    color: #ffd45c;
}

.mh-foxglove-lead {
    color: rgba(255, 255, 255, 0.88) !important;
}

.mh-foxglove-main > p {
    color: rgba(255, 255, 255, 0.78);
}

/* Top labels */

.mh-foxglove-topline {
    color: #ffffff;
}

.mh-foxglove-badge {
    color: #173d30;
    background: #ffd45c;
}

.mh-foxglove-category {
    color: rgba(255, 255, 255, 0.72);
}


/* Right financial card */

.mh-foxglove-card {
    color: #ffffff;
}

.mh-foxglove-card h3 {
    color: #ffffff;
}

.mh-foxglove-card p {
    color: rgba(255, 255, 255, 0.78);
}

.mh-foxglove-card-label {
    color: #ffd45c;
}

.mh-foxglove-card-points,
.mh-foxglove-card-points div {
    color: #ffffff;
}

.mh-foxglove-card-points span {
    color: #ffd45c;
}


/* Important information */

.mh-foxglove-disclaimer {
    color: rgba(255, 255, 255, 0.78);
}

.mh-foxglove-disclaimer strong {
    color: #ffffff;
}

.mh-foxglove-disclaimer p {
    color: rgba(255, 255, 255, 0.72);
}


/* Secondary button on dark background */

.mh-foxglove-section .btn-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
    background: transparent;
}

.mh-foxglove-section .btn-secondary:hover {
    background: #ffffff;
    color: #173d30;
    border-color: #ffffff;
}

/* =========================================================
   FOXGLOVE SHOWCASE
   SAME DESIGN FOR ENGLISH + PORTUGUESE
========================================================= */

.foxglove-showcase {
    padding: 90px 0 40px;
    background: #f7f4ec;
}


.foxglove-showcase-card {
    position: relative;

    min-height: 760px;

    padding: 70px 70px 65px;

    background: #173f31;

    border-radius: 38px;

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(18, 33, 27, 0.12);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.foxglove-showcase-content {
    position: relative;
    z-index: 3;

    width: 56%;
    max-width: 650px;
}


.foxglove-featured-badge {
    display: inline-flex;
    align-items: center;

    padding: 10px 18px;

    margin-bottom: 28px;

    background: #dfc176;

    color: #173f31;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.foxglove-showcase-label {
    display: block;

    margin-bottom: 22px;

    color: #dfc176;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.14em;
}


.foxglove-showcase-content h2 {
    margin: 0 0 32px;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

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

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 800;
}


.foxglove-showcase-intro {
    max-width: 620px;

    margin: 0 0 42px;

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

    font-size: 1.05rem;

    line-height: 1.7;
}


/* =========================================================
   FOXGLOVE LOGO
========================================================= */

.foxglove-showcase-logo {
    display: flex;
    align-items: center;

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

    margin: 0 0 38px;
}


.foxglove-showcase-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


.foxglove-showcase-description {
    max-width: 610px;

    margin: 0 0 32px;

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

    font-size: 1rem;

    line-height: 1.65;
}


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

.foxglove-showcase-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 28px;
}


.foxglove-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    min-height: 58px;

    padding: 0 26px;

    background: #ffffff;

    color: #173f31;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 800;

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


.foxglove-primary-button:hover {
    transform: translateY(-2px);

    background: #f5e5ad;
}


.foxglove-text-link {
    display: inline-block;

    padding-bottom: 5px;

    color: #dfc176;

    border-bottom:
        1px solid rgba(223, 193, 118, 0.45);

    text-decoration: none;

    font-weight: 800;
}


.foxglove-text-link:hover {
    border-color: #dfc176;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.foxglove-showcase-visual {
    position: absolute;

    z-index: 3;

    top: 145px;
    right: 65px;

    width: 350px;
}


/* WHITE TILTED CARD */

.foxglove-financial-card {
    position: relative;

    width: 100%;

    padding: 38px 36px;

    background: #f8f5ec;

    border-radius: 24px;

    transform: rotate(4deg);

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.16);
}


.foxglove-financial-card span {
    display: block;

    margin-bottom: 18px;

    color: #173f31;

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.12em;
}


.foxglove-financial-card h3 {
    margin: 0 0 14px;

    color: #173f31;

    font-family: "Poppins", sans-serif;

    font-size: 1.65rem;

    line-height: 1.1;

    font-weight: 800;
}


.foxglove-financial-card p {
    margin: 0;

    color: #5e625e;

    font-size: 0.95rem;

    line-height: 1.55;
}


/* MONEY BADGE */

.foxglove-money-badge {
    position: absolute;

    z-index: 5;

    top: -55px;
    right: -25px;

    width: 105px;
    height: 105px;

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

    background: #dfc176;

    color: #173f31;

    border-radius: 50%;

    font-family: "Poppins", sans-serif;

    font-size: 1.75rem;
    font-weight: 900;

    transform: rotate(5deg);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.foxglove-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.foxglove-circle-one {
    width: 520px;
    height: 520px;

    top: 35px;
    right: -80px;

    border:
        1px solid
        rgba(255, 255, 255, 0.045);
}


.foxglove-circle-two {
    width: 390px;
    height: 390px;

    top: 100px;
    right: -15px;

    border:
        1px solid
        rgba(255, 255, 255, 0.045);
}


/* =========================================================
   DISCLAIMER
========================================================= */

.foxglove-showcase-disclaimer {
    max-width: 1000px;

    margin: 18px auto 0;

    padding: 0 20px;

    color: #6b706c;

    text-align: center;

    font-size: 0.76rem;

    line-height: 1.6;
}


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

@media (max-width: 1050px) {

    .foxglove-showcase-card {
        min-height: auto;

        padding:
            60px 50px;
    }


    .foxglove-showcase-content {
        width: 58%;
    }


    .foxglove-showcase-visual {
        right: 40px;

        width: 300px;
    }


    .foxglove-showcase-content h2 {
        font-size: 3.7rem;
    }

}


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

@media (max-width: 850px) {

    .foxglove-showcase {
        padding:
            60px 0 30px;
    }


    .foxglove-showcase-card {
        padding:
            45px 28px;

        border-radius: 28px;
    }


    .foxglove-showcase-content {
        width: 100%;
        max-width: none;
    }


    .foxglove-showcase-content h2 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );
    }


    .foxglove-showcase-visual {
        position: relative;

        top: auto;
        right: auto;

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

        margin:
            70px auto 20px;
    }


    .foxglove-money-badge {
        width: 82px;
        height: 82px;

        top: -42px;
        right: -5px;

        font-size: 1.35rem;
    }


    .foxglove-financial-card {
        padding:
            32px 28px;
    }


    .foxglove-showcase-logo {
        width: 360px;
    }


    .foxglove-showcase-actions {
        gap: 20px;
    }

}


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

@media (max-width: 520px) {

    .foxglove-showcase-card {
        padding:
            40px 22px;
    }


    .foxglove-featured-badge {
        font-size: 0.65rem;
    }


    .foxglove-showcase-label {
        font-size: 0.68rem;
    }


    .foxglove-showcase-content h2 {
        font-size: 2.75rem;
    }


    .foxglove-showcase-actions {
        flex-direction: column;
        align-items: flex-start;
    }


    .foxglove-primary-button {
        width: 100%;
    }

}

/* =========================================================
   FOR BUSINESSES CTA
   ENGLISH + PORTUGUESE MATCH
========================================================= */

.business-cta-section {
    padding: 80px 0 95px;
    background: #ffffff;
}


.business-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;

    padding: 58px 65px;

    background: #f4f6f4;

    border:
        1px solid
        rgba(18, 33, 27, 0.08);

    border-radius: 30px;

    box-shadow:
        0 18px 45px
        rgba(18, 33, 27, 0.04);
}


/* LEFT */

.business-cta-content {
    max-width: 720px;
}


.business-cta-content .section-label {
    display: block;

    margin-bottom: 22px;

    color: #ef6b5b;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.business-cta-content h2 {
    margin: 0 0 15px;

    color: #12211b;

    font-family: "Poppins", sans-serif;

    font-size: clamp(
        2rem,
        3.4vw,
        3.1rem
    );

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.business-cta-content p {
    max-width: 680px;

    margin: 0;

    color: #58625d;

    font-size: 1rem;

    line-height: 1.7;
}


/* RIGHT */

.business-cta-action {
    flex-shrink: 0;
}


.business-join-button {
    display: inline-flex;

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

    gap: 14px;

    min-height: 56px;

    padding: 0 28px;

    background: #122b22;

    color: #ffffff;

    border-radius: 999px;

    text-decoration: none;

    font-family: "Inter", sans-serif;

    font-size: 0.92rem;

    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        0 10px 25px
        rgba(18, 43, 34, 0.12);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.business-join-button:hover {
    transform: translateY(-2px);

    background: #2f7659;

    box-shadow:
        0 14px 30px
        rgba(18, 43, 34, 0.18);
}


.business-join-button span {
    font-size: 1.1rem;
}


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

@media (max-width: 900px) {

    .business-cta-card {
        padding: 48px 40px;

        gap: 40px;
    }

}


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

@media (max-width: 760px) {

    .business-cta-section {
        padding: 55px 0 70px;
    }


    .business-cta-card {
        flex-direction: column;

        align-items: flex-start;

        padding: 38px 28px;

        gap: 30px;

        border-radius: 24px;
    }


    .business-cta-content h2 {
        font-size: 2.15rem;
    }


    .business-cta-action {
        width: 100%;
    }


    .business-join-button {
        width: 100%;
    }

}

/* =========================================================
   FOXGLOVE FEATURED PARTNER — DETAILS MODAL
========================================================= */


/* ---------------------------------------------------------
   CLICKABLE FEATURED CARD
--------------------------------------------------------- */

.foxglove-open {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.foxglove-open:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(19, 57, 45, 0.14);
}

.foxglove-open:focus-visible {
    outline: 3px solid var(--yellow, #f4d35e);
    outline-offset: 5px;
}


/* DISCOVER LINK */

.foxglove-view-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid rgba(19, 57, 45, 0.14);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;

    color: var(--green, #195c49);
}

.foxglove-view-arrow {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: var(--green, #195c49);
    color: #ffffff;

    font-size: 1.1rem;

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

.foxglove-open:hover .foxglove-view-arrow {
    transform: translateX(4px);
}


/* =========================================================
   MODAL
========================================================= */

.foxglove-modal {
    position: fixed;
    inset: 0;

    z-index: 9999;

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

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* OPEN STATE */

.foxglove-modal.is-open {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* BACKDROP */

.foxglove-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(8, 20, 17, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* =========================================================
   MODAL PANEL
========================================================= */

.foxglove-modal-panel {
    position: relative;
    z-index: 2;

    width: min(1040px, 92vw);
    height: 100%;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding:
        clamp(70px, 8vw, 110px)
        clamp(28px, 6vw, 80px)
        50px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(244, 211, 94, 0.16),
            transparent 30%
        ),
        #f8f6ef;

    transform: translateX(100%);

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

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

.foxglove-modal.is-open .foxglove-modal-panel {
    transform: translateX(0);
}


/* SCROLLBAR */

.foxglove-modal-panel::-webkit-scrollbar {
    width: 8px;
}

.foxglove-modal-panel::-webkit-scrollbar-thumb {
    background: rgba(25, 92, 73, 0.28);
    border-radius: 20px;
}


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

.foxglove-modal-close {
    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 5;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 1px solid rgba(19, 57, 45, 0.18);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.72);
    color: #153d32;

    font: inherit;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

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

.foxglove-modal-close:hover {
    background: #153d32;
    color: #ffffff;

    transform: rotate(6deg);
}


/* =========================================================
   TOP / INTRODUCTION
========================================================= */

.foxglove-modal-top {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: clamp(35px, 6vw, 80px);

    align-items: center;

    padding-bottom: clamp(50px, 7vw, 80px);

    border-bottom: 1px solid rgba(19, 57, 45, 0.13);
}


/* LOGO */

.foxglove-modal-logo {
    display: grid;
    place-items: center;

    min-height: 190px;

    padding: 28px;

    border-radius: 28px;

    background: #ffffff;

    box-shadow: 0 18px 50px rgba(19, 57, 45, 0.08);
}

.foxglove-modal-logo img {
    display: block;

    width: 100%;
    max-width: 180px;
    height: auto;

    object-fit: contain;
}


/* HEADING */

.foxglove-modal-eyebrow {
    display: block;

    margin-bottom: 20px;

    color: #27735e;

    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.foxglove-modal-heading h2 {
    margin: 0;

    color: #102f27;

    font-family: "Poppins", sans-serif;

    font-size: clamp(2.8rem, 6vw, 5.6rem);
    font-weight: 700;

    letter-spacing: -0.065em;
    line-height: 0.92;
}

.foxglove-modal-heading h2 span {
    display: block;

    color: #2a7b63;
}

.foxglove-modal-heading > p {
    max-width: 620px;

    margin:
        clamp(25px, 4vw, 38px)
        0
        0;

    color: #53645f;

    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.75;
}


/* =========================================================
   VIDEO SECTION
========================================================= */

.foxglove-video-section {
    padding:
        clamp(55px, 8vw, 90px)
        0;
}


/* VIDEO HEADING */

.foxglove-video-heading {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 360px);
    gap: 50px;

    align-items: end;

    margin-bottom: 35px;
}

.foxglove-video-heading span {
    display: block;

    margin-bottom: 10px;

    color: #2a7b63;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.foxglove-video-heading h3 {
    margin: 0;

    color: #102f27;

    font-family: "Poppins", sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.05;
}

.foxglove-video-heading > p {
    margin: 0;

    color: #64716d;

    font-size: 0.95rem;
    line-height: 1.7;
}


/* VIDEO */

.foxglove-video-wrapper {
    position: relative;

    overflow: hidden;

    border-radius: 28px;

    background: #0c211b;

    box-shadow: 0 30px 70px rgba(11, 42, 33, 0.18);
}

.foxglove-video {
    display: block;

    width: 100%;
    max-height: 70vh;

    background: #0c211b;

    object-fit: contain;
}


/* VIDEO BADGE */

.foxglove-video-badge {
    position: absolute;

    top: 18px;
    left: 18px;

    padding: 10px 14px;

    border-radius: 999px;

    background: rgba(12, 33, 27, 0.78);
    color: #ffffff;

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

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;

    pointer-events: none;
}


/* =========================================================
   INFORMATION
========================================================= */

.foxglove-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
    gap: clamp(30px, 5vw, 70px);

    align-items: stretch;

    padding:
        clamp(50px, 7vw, 80px)
        0;

    border-top: 1px solid rgba(19, 57, 45, 0.13);
}


/* MAIN COPY */

.foxglove-info-label {
    display: block;

    margin-bottom: 18px;

    color: #2a7b63;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.foxglove-info-main h3 {
    max-width: 620px;

    margin: 0;

    color: #102f27;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.05;
}

.foxglove-info-main p {
    max-width: 660px;

    margin: 26px 0 0;

    color: #5d6d68;

    font-size: 1rem;
    line-height: 1.8;
}


/* PARTNERSHIP CARD */

.foxglove-partnership-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 320px;

    padding: 34px;

    overflow: hidden;

    border-radius: 26px;

    background: #153d32;
    color: #ffffff;
}

.foxglove-partnership-card > span {
    margin-bottom: 35px;

    color: #f4d35e;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.foxglove-partnership-card strong {
    position: relative;
    z-index: 2;

    display: block;

    max-width: 220px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.3rem);

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.foxglove-partnership-card p {
    position: relative;
    z-index: 2;

    max-width: 220px;

    margin:
        auto
        0
        0;

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

    font-size: 0.9rem;
    line-height: 1.6;
}

.foxglove-partnership-mark {
    position: absolute;

    right: -15px;
    bottom: -50px;

    color: rgba(244, 211, 94, 0.11);

    font-size: 12rem;
    line-height: 1;

    transform: rotate(-12deg);
}


/* =========================================================
   BOTTOM
========================================================= */

.foxglove-modal-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding-top: 30px;

    border-top: 1px solid rgba(19, 57, 45, 0.13);
}

.foxglove-modal-bottom > div > span {
    display: block;

    margin-bottom: 5px;

    color: #2a7b63;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.foxglove-modal-bottom p {
    margin: 0;

    color: #65746f;

    font-size: 0.9rem;
}


/* BACK BUTTON */

.foxglove-close-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    padding: 15px 20px;

    border: 0;
    border-radius: 999px;

    background: #153d32;
    color: #ffffff;

    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;

    cursor: pointer;

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

.foxglove-close-link:hover {
    background: #205846;
    transform: translateY(-2px);
}


/* =========================================================
   PREVENT PAGE SCROLL WHEN OPEN
========================================================= */

body.foxglove-modal-open {
    overflow: hidden;
}


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

@media (max-width: 850px) {

    .foxglove-modal-panel {
        width: 96vw;
    }

    .foxglove-modal-top {
        grid-template-columns: 150px 1fr;
        gap: 30px;
    }

    .foxglove-video-heading {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .foxglove-info-grid {
        grid-template-columns: 1fr;
    }

    .foxglove-partnership-card {
        min-height: 270px;
    }

}


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

@media (max-width: 600px) {

    .foxglove-modal {
        align-items: flex-end;
    }

    .foxglove-modal-panel {
        width: 100%;
        height: 94%;

        padding:
            75px
            20px
            35px;

        border-radius: 26px 26px 0 0;

        transform: translateY(100%);
    }

    .foxglove-modal.is-open .foxglove-modal-panel {
        transform: translateY(0);
    }


    /* CLOSE */

    .foxglove-modal-close {
        top: 16px;
        right: 18px;

        width: 44px;
        height: 44px;
    }


    /* INTRO */

    .foxglove-modal-top {
        grid-template-columns: 1fr;
        gap: 28px;

        padding-bottom: 45px;
    }

    .foxglove-modal-logo {
        width: 130px;
        min-height: 110px;

        padding: 18px;

        border-radius: 20px;
    }

    .foxglove-modal-heading h2 {
        font-size: clamp(2.7rem, 14vw, 4.4rem);
    }


    /* VIDEO */

    .foxglove-video-section {
        padding: 45px 0;
    }

    .foxglove-video-wrapper {
        border-radius: 18px;
    }

    .foxglove-video {
        max-height: 68vh;
    }

    .foxglove-video-badge {
        top: 10px;
        left: 10px;

        padding: 8px 10px;

        font-size: 0.55rem;
    }


    /* INFO */

    .foxglove-info-grid {
        padding: 45px 0;
    }

    .foxglove-partnership-card {
        min-height: 250px;
        padding: 26px;
    }


    /* BOTTOM */

    .foxglove-modal-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .foxglove-close-link {
        width: 100%;
        justify-content: space-between;
    }

}

/* =========================================================
   FOXGLOVE MODAL — WEBSITE ACTIONS
========================================================= */

.foxglove-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}


/* FOXGLOVE WEBSITE BUTTON */

.foxglove-website-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 15px 21px;

    border: 1px solid rgba(21, 61, 50, 0.18);
    border-radius: 999px;

    background: transparent;
    color: #153d32;

    text-decoration: none;

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

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


.foxglove-website-link span {
    font-size: 1rem;

    transition: transform 0.25s ease;
}


.foxglove-website-link:hover {
    background: #f4d35e;
    color: #153d32;
    border-color: #f4d35e;

    transform: translateY(-2px);
}


.foxglove-website-link:hover span {
    transform: translate(2px, -2px);
}

/* =====================================================
   LANGUAGE SWITCHER
===================================================== */

.language-switcher {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;

    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.language-switcher .language-link {
    color: var(--dark);
    text-decoration: none;
    opacity: 0.5;

    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}

.language-switcher .language-link:hover {
    opacity: 1;
    color: var(--green);
}

.language-switcher .language-link.active {
    color: var(--green);
    opacity: 1;
}

.language-divider {
    color: #c7cec9;
    font-weight: 400;
}


/* MOBILE */

@media (max-width: 768px) {

    .language-switcher {
        font-size: 0.75rem;
        gap: 5px;
        margin-left: auto;
        margin-right: 8px;
    }

}

/* =========================================================
   MOBILE LANGUAGE SWITCHER
========================================================= */

@media (max-width: 900px) {

    /* Keep header actions together */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    /* Show EN | PT on mobile */
    .header-actions .language-switcher {
        display: flex !important;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .header-actions .language-link {
        display: inline-block;
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        color: var(--dark);
    }

    .header-actions .language-link.active {
        color: var(--green);
    }

    .header-actions .language-divider {
        display: inline-block;
        opacity: 0.35;
    }

}


/* =========================================================
   SMALL MOBILE HEADER
========================================================= */

@media (max-width: 600px) {

    .header-inner {
        gap: 10px;
    }

    .header-actions {
        gap: 10px;
        margin-left: auto;
    }

    .header-actions .language-switcher {
        gap: 5px;
    }

    .header-actions .language-link {
        font-size: 0.78rem;
    }

    .header-actions .language-divider {
        font-size: 0.75rem;
    }

    /* Hide large help button on small phones.
       Help is still available inside the hamburger menu. */
    .header-actions .nav-button {
        display: none;
    }

}