:root {
    --bg: #ffffff;
    --text: #188f39;
    --muted: #3b7f4a;
    --accent: #f9b233;
    --accent-600: #e09f1d;
    /* hover */
    --accent-700: #cb8f18;
    /* active */
    --brand: #188f39;
    --brand-600: #11752f;
    --card: #f7f7f7;
    --ring: rgba(0, 0, 0, .08);
    --radius: 18px;
    --shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

.logo-img {
    display: block;
    height: 110px;
    object-fit: contain;
}

@media (max-width:960px) {
    .logo-img {
        height: 90px;
    }
    .brand small {
        display: none;
    }
}

.nav {
    padding: 8px 0;
}

.brand {
    gap: 14px;
}

.brand small {
    font-size: 12px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}


/* bg: full-bleed photo, text kept readable via overlay */

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Open Sans', sans-serif;
    color: var(--text);
    line-height: 1.55;
    background: rgb(250, 247, 242) url("images/background.jpg") center/cover no-repeat fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    /* tweak the alpha if background is too strong/weak */
    background: rgba(255, 255, 255, 0.62);
}

.card,
.tile {
    background: rgba(255, 255, 255, 0.18);
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color .2s ease
}

a:focus-visible,
.btn:focus-visible {
    outline: 3px solid #94d3a2;
    outline-offset: 2px;
    border-radius: 12px
}

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

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px
}


/* Header */

header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--ring)
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 12px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: .5px
}

.brand .mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 24px
}

.brand .dot {
    font-weight: 900;
    color: #e11d48
}

.brand small {
    display: block;
    color: #000000;
    font-weight: 600;
    font-size: 11px;
    margin-top: -4px
}

nav ul {
    display: flex;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0
}

nav a {
    padding: 8px 10px;
    border-radius: 10px
}

nav a:hover {
    background: var(--card)
}

.menu-btn {
    display: none
}


/* Hero */

.hero {
    background: linear-gradient(180deg, #ffffff, #fafafa);
    border-bottom: 1px solid var(--ring)
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    padding: 36px 0 28px
}

.badge {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px
}

.hero h1 {
    margin: .4em 0 .2em;
    font-size: 40px;
    line-height: 1.15
}

.hero p {
    color: #000000;
    font-size: 18px;
    max-width: 60ch
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    border: 1px solid var(--ring);
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform .06s ease, background-color .15s ease, color .15s ease, border-color .15s ease
}

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

.btn:active {
    transform: translateY(0)
}

.btn.primary {
    background: var(--accent);
    border-color: transparent;
    color: #111
}

.btn.primary:hover {
    background: var(--accent-600)
}

.btn.primary:active {
    background: var(--accent-700)
}

.btn.brand {
    background: var(--brand);
    color: #fff;
    border-color: transparent
}

.btn.brand:hover {
    background: var(--brand-600)
}

.card {
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px
}


/* Sections */

section {
    padding: 40px 0
}

.section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px
}

.section-title h2 {
    margin: 0;
    font-size: 28px
}

.grid {
    display: grid;
    gap: 16px
}

.grid.cols-3 {
    grid-template-columns: repeat(3, 1fr)
}

.grid.cols-4 {
    grid-template-columns: repeat(4, 1fr)
}

.tile {
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.tile-img {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%
}

.tile-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.tile h3 {
    margin: 0
}

.muted {
    color: var(--muted)
}


/* КАТАЛОГ ТОВАРІВ */

.catalog-wrapper {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    padding: 20px 18px 22px;
    box-shadow: var(--shadow);
    border: 1px solid var(--ring);
}

.catalog-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.catalog-title-main {
    font-size: 24px;
    font-weight: 700;
    margin-right: auto;
}

.catalog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.catalog-tab {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--ring);
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #000000;
}

.catalog-tab--active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.catalog-item {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--ring);
    padding: 16px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
}

.catalog-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--accent-600);
}

.catalog-icon {
    font-size: 36px;
    margin-bottom: 4px;
}

.catalog-item-title {
    font-size: 14px;
    font-weight: 600;
}


/* GALLERY SLIDER */


/* Галерея-сітка на окремій сторінці */

.gallery-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.gallery-grid-item {
    list-style: none;
}

.gallery-grid-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gallery-grid-image-wrap {
    position: relative;
    padding-top: 70%;
    /* співвідношення сторін ~3:2 */
    overflow: hidden;
}

.gallery-grid-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-grid-caption {
    padding: 8px 10px 10px;
    font-size: 13px;
    color: #000000;
}

.gallery-slider {
    position: relative;
    margin-top: 6px;
}

.gallery-viewport {
    overflow: hidden;
    /* важливо для коректного свайпу: дозволяємо вертикальний скрол, а горизонтальний обробляємо самі */
    touch-action: pan-y;
}

.gallery-track {
    display: flex;
    transition: opacity .28s ease;
    /* плавна зміна прозорості */
}

.gallery-slide {
    padding: 6px;
    /* ширина задається через JS, щоб мати 1/2/3 фото в ряд */
    flex: 0 0 100%;
    box-sizing: border-box;
}

.gallery-slide-inner {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ring);
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}

.gallery-slide-inner img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.gallery-slide-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.gallery-caption {
    padding: 8px 10px;
    font-size: 13px;
    color: #000000;
}


/* Навігація */

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-prev {
    left: 4px;
}

.gallery-next {
    right: 4px;
}

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--muted);
    background: transparent;
    cursor: pointer;
}

.gallery-dot--active {
    background: var(--brand);
    border-color: var(--brand);
}


/* Трохи змін для мобілок, щоб кнопки не заважали */

@media (max-width:560px) {
    .gallery-nav {
        top: auto;
        bottom: 8px;
        transform: none;
    }
    .gallery-prev {
        left: 8px;
    }
    .gallery-next {
        right: 8px;
    }
}

.ph img {
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--ring)
}


/* Contacts */

.contacts {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px
}

.map {
    min-height: 300px;
    border: 0;
    border-radius: 12px;
    width: 100%
}

footer {
    padding: 26px 0;
    border-top: 1px solid var(--ring);
    color: #000000;
    font-size: 14px
}


/* Responsive */

@media (max-width:960px) {
    .logo-img {
        display: block;
    }
    .brand small {
        display: none;
    }
    .hero-inner,
    .contacts {
        grid-template-columns: 1fr;
    }
    .grid.cols-3,
    .grid.cols-4 {
        grid-template-columns: 1fr 1fr;
    }
    /* Мобільний хедер і меню */
    .nav {
        position: relative;
        /* щоб меню позиціонувалось від шапки */
    }
    nav ul {
        display: none;
    }
    .menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ring);
        padding: 8px 10px;
        border-radius: 999px;
        background: #fff;
        margin-left: auto;
    }
    nav.open ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: rgba(255, 255, 255, 0.96);
        padding: 10px 16px 12px;
        gap: 8px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
        border-radius: 0 0 18px 18px;
        z-index: 40;
    }
    nav.open ul li a {
        display: block;
        padding: 10px 14px;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        font-size: 16px;
    }
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:560px) {
    .grid.cols-3,
    .grid.cols-4 {
        grid-template-columns: 1fr
    }
    .hero h1 {
        font-size: 32px
    }
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.promo-banner {
    padding: 18px 0 10px;
}

.promo-banner-inner {
    border-radius: var(--radius);
    border: 1px solid var(--accent-600);
    background: rgba(251, 182, 59, 62%);
    padding: 14px 18px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.promo-label {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.promo-text {
    font-size: 18px;
    font-weight: 500;
}

@media (max-width:560px) {
    .promo-banner-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* PROMO SLIDER (банер) */

.promo-slider {
    position: relative;
    padding: 26px 0 22px;
    overflow: hidden;
}

.promo-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.45)), url("images/background.jpg") center/cover no-repeat;
    filter: grayscale(0.2);
    z-index: -1;
}

.promo-slider-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
}

.promo-slide-viewport {
    flex: 1;
}

.promo-slide {
    max-width: 780px;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .35s ease, transform .35s ease;
}

.promo-tag {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.promo-title {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
}

.promo-subtitle {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 600;
}

.promo-nav {
    border: none;
    background: rgba(0, 0, 0, 0.5);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    transition: background .15s ease, transform .1s ease;
}

.promo-nav:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: translateY(-1px);
}

.promo-nav:active {
    transform: translateY(0);
}

.promo-prev {
    margin-right: 4px;
}

.promo-next {
    margin-left: 4px;
}

.promo-dots {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.promo-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    cursor: pointer;
}

.promo-dot--active {
    background: var(--accent);
    border-color: var(--accent);
}

@media (max-width:960px) {
    .promo-slider {
        padding: 20px 0 16px;
    }
    .promo-slider-inner {
        gap: 10px;
    }
    .promo-title {
        font-size: 22px;
    }
    .promo-subtitle {
        font-size: 15px;
    }
}

@media (max-width:560px) {
    .promo-slider-inner {
        gap: 8px;
    }
    .promo-nav {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
    .promo-title {
        font-size: 18px;
    }
    .promo-subtitle {
        font-size: 14px;
    }
}


/* Послуги: виділений блок заголовка, щоб текст не зливався з фоном */

.section-header {
    margin: 0 auto 24px auto;
    text-align: center;
}

#services .section-header,
#gallery .section-header,
#contacts .section-header,
#materials-gallery .section-header,
#services-gallery .section-header,
#carpentry-gallery .section-header {
    background: rgba(255, 255, 255, 0.96);
    padding: 20px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

#services .section-header h2,
#gallery .section-header h2,
#contacts .section-header h2 {
    margin: 0 0 6px 0;
    font-size: 30px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#services .section-header p,
#gallery .section-header p,
#contacts .section-header p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
}

@media (max-width: 768px) {
    #services .section-header,
    #gallery .section-header,
    #contacts .section-header {
        padding: 16px 18px;
    }
    #services .section-header h2,
    #gallery .section-header h2,
    #contacts .section-header h2 {
        font-size: 24px;
    }
    #services .section-header p,
    #gallery .section-header p,
    #contacts .section-header p {
        font-size: 14px;
    }
}


/* Галерея та Контакти: такий самий "картковий" заголовок, як у Послуг */

#contacts .section-header p {
    margin: 8px 0 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #000000;
}


/* Верхній текст на окремих сторінках (section--intro) */

.section--intro {
    padding-top: 40px;
    padding-bottom: 12px;
}

.section--intro .section-header {
    background: rgba(255, 255, 255, 0.96);
    padding: 24px 28px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: left;
    max-width: 880px;
}

.section--intro .section-header h1 {
    margin: 0 0 8px 0;
    font-size: 30px;
}

.section--intro .section-header p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
}

@media (max-width: 768px) {
    .section--intro .section-header {
        padding: 18px 18px;
    }
    .section--intro .section-header h1 {
        font-size: 24px;
    }
    .section--intro .section-header p {
        font-size: 14px;
    }
}


/* Оновлений футер з білим фоном та навігацією */

footer {
    background: #fff;
    border-top: 1px solid var(--ring);
    padding: 16px 0;
    margin-top: 40px;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
}

.footer-copy {
    color: #000000;
}

.footer-nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-nav a {
    color: #000000;
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--brand);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Кольоровий напис MAG•BUD у тайтлах сторінок */

.brand-word {
    letter-spacing: 0.08em;
    font-weight: 800;
    text-transform: uppercase;
}

.brand-word span {
    display: inline-block;
}

.brand-word span:nth-child(1) {
    color: #188f39;
}


/* зелений */

.brand-word span:nth-child(2) {
    color: #f9b233;
}


/* жовто-оранжевий */

.brand-word span:nth-child(3) {
    color: #7f3f98;
}


/* фіолетовий */

.brand-word span:nth-child(4) {
    color: #444444;
}


/* крапка */

.brand-word span:nth-child(5) {
    color: #e30613;
}


/* червоний */

.brand-word span:nth-child(6) {
    color: #0071bc;
}


/* синій */

.brand-word span:nth-child(7) {
    color: #188f39;
}


/* знову зелений */


/* Page titles on inner pages */

.section--intro .page-title {
    margin: 0 0 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    font-size: 28px;
}

.page-title-logo {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #188f39, #f9b233, #e30613, #7f3f98, #0071bc);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.page-title-text {
    font-weight: 700;
}

@media (max-width: 768px) {
    .section--intro .page-title {
        font-size: 22px;
        gap: 8px;
    }
    .page-title-logo {
        font-size: 11px;
        padding: 3px 10px;
        letter-spacing: 0.16em;
    }
}


/* Global typography tweaks: green theme */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--brand);
    margin-top: 0;
}

.section-header p,
.hero-subtitle,
.muted,
.text-muted {
    color: #000000;
}


/* Force all paragraph text to be solid black for better readability */

p {
    color: #000000;
}


/* Override muted/section text to be black everywhere */

.section-header p,
p.muted,
p.text-muted,
.muted,
.text-muted {
    color: #000000;
}


/* Force intro section header text to black */

.section--intro .section-header p {
    color: #000000;
}


/* New footer layout with contacts block on white background */

footer {
    background: #ffffff;
    padding: 32px 0 18px 0;
    border-top: 1px solid var(--ring);
    font-size: 14px;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.footer-brand-small {
    font-size: 13px;
    line-height: 1.5;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.footer-nav a {
    color: var(--brand);
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
}

.footer-contacts h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: var(--brand);
}

.footer-contacts p {
    margin: 2px 0;
    color: #000000;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding-top: 10px;
    color: #000000;
}

.footer-copy {
    font-size: 13px;
}

@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Contacts section at the bottom ("footer with maps") */

#contacts {
    padding: 40px 0 60px 0;
}

.contacts {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: stretch;
}

.contacts .card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px 26px 22px 26px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.contacts .card h3 {
    color: var(--brand);
    margin-top: 0;
    margin-bottom: 6px;
}

.contacts .map {
    width: 100%;
    border: none;
    border-radius: 24px;
    box-shadow: var(--shadow);
    min-height: 220px;
}

@media (max-width: 960px) {
    .contacts {
        grid-template-columns: 1fr;
    }
    .contacts .map {
        min-height: 260px;
    }
}


/* Contacts header: simple heading without pill wrapper */


/* Footer with inline contacts (no page links) */

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    font-size: 14px;
}

.footer-copy {
    color: #000000;
}

.footer-contacts-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    font-size: 14px;
}

.footer-contacts-title {
    font-weight: 600;
    color: #000000;
}

.footer-contacts-lines div {
    margin: 0;
    color: #000000;
}

.footer-contacts-inline a {
    color: var(--brand);
    text-decoration: none;
}

.footer-contacts-inline a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Colored MAG•BUD label in contacts card (footer) */

.contacts-brand {
    margin-top: 0;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 18px;
}

.contacts-brand span {
    display: inline-block;
}


/* approximate logo colors */

.contacts-brand .cb-m {
    color: #188f39;
}


/* green */

.contacts-brand .cb-a {
    color: #7f3f98;
}


/* purple */

.contacts-brand .cb-g {
    color: #0071bc;
}


/* blue */

.contacts-brand .cb-b {
    color: #e30613;
}


/* red */

.contacts-brand .cb-u {
    color: #f9b233;
}


/* yellow/orange */

.contacts-brand .cb-d {
    color: #188f39;
}


/* green again */


/* === Mobile spacing tweaks for header & layout === */

@media (max-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .nav {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    header {
        margin-bottom: 20px;
    }
}

/* ===== LIGHTBOX (image popup) ===== */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.lightbox-overlay.is-visible {
    display: flex;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
    position: relative;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.lightbox-caption {
    margin-top: 12px;
    color: #fff;
    font-size: 0.95rem;
}

.lightbox-close {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}