/* ==========================================================================
   Elegant Deco Construction – brand theme on top of Bootstrap 5.3
   Load order: assets/vendor/bootstrap/bootstrap.min.css, then this file.

   Spec source: Guide.pdf
     headings  El Messiri  #04C720      body  Acumin Variable Concept  #4D4D4D
     buttons   #04C720     page bg #FFFFFF
     header    #333333 @ 50%

   Layout, spacing, navbar, accordion, carousel, modal, forms and breadcrumbs come
   from Bootstrap; only brand styling and the few things Bootstrap lacks live here.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Acumin Variable Concept";
    src: url("../fonts/Acumin-Variable-Concept.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 50% 115%;
    font-display: swap;
}
@font-face {
    font-family: "El Messiri";
    src: url("../fonts/ElMessiri-VariableFont_wght.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

/* ---------- Tokens + Bootstrap variable overrides ---------- */
:root {
    --green: #04c720;
    --green-dark: #039a19;
    --text: #4d4d4d;
    --text-soft: #7a7a7a;

    --header-bg: rgba(51, 51, 51, 0.5);
    --card-bg: rgba(221, 221, 221, 0.5);   /* services cards  (#DDDDDD @ 50%) */
    --mission-bg: rgba(221, 221, 221, 0.8); /* our mission     (#DDDDDD @ 80%) */
    --faq-bg: rgba(195, 195, 195, 0.4);     /* FAQ rows        (#C3C3C3 @ 40%) */

    --font-body: "Acumin Variable Concept", "Helvetica Neue", Arial, sans-serif;
    --font-head: "El Messiri", Georgia, serif;

    --gutter: clamp(20px, 5vw, 96px);
    --header-h: clamp(64px, 6.4vw, 96px);
    --section-gap: clamp(56px, 7vw, 112px);

    /* Bootstrap */
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --bs-body-font-weight: 320;
    --bs-body-line-height: 1.65;
    --bs-body-color: #4d4d4d;
    --bs-body-color-rgb: 77, 77, 77;
    --bs-heading-color: var(--green);
    --bs-primary: #04c720;
    --bs-primary-rgb: 4, 199, 32;
    --bs-link-color-rgb: 77, 77, 77;
    --bs-link-hover-color-rgb: 3, 154, 25;
    --bs-border-color: rgba(0, 0, 0, 0.12);
    --bs-focus-ring-color: rgba(4, 199, 32, 0.3);
}

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

body {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background: #fff;
}

/* Contour-line artwork from the design, one per page, sits behind everything. */
body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--contour, none) top center / 100% auto no-repeat;
    opacity: 0.32;
}
.page-home      { --contour: url("../img/contour-home.webp"); }
.page-about     { --contour: url("../img/contour-about.webp"); }
.page-services  { --contour: url("../img/contour-services.webp"); }
.page-portfolio { --contour: url("../img/contour-portfolio.webp"); }
.page-contact   { --contour: url("../img/contour-contact.webp"); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--green-dark); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 400; line-height: 1.15; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* Wider side gutters than Bootstrap's default 12px */
.container, .container-xxl { --bs-gutter-x: clamp(2.5rem, 8vw, 6rem); }

.skip-link {
    position: fixed; left: 12px; top: -60px; z-index: 2000;
    background: #fff; color: #000; padding: 10px 16px; border-radius: 6px;
    transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

.section-y   { padding-block: var(--section-gap); }
.pb-section  { padding-bottom: var(--section-gap); }
.section-title { text-align: center; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.section-lead  { text-align: center; max-width: 60rem; margin: 1rem auto 0; }
.page-title    { text-align: center; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); padding-top: clamp(24px, 3vw, 44px); margin-bottom: 0; }

.ratio-16x8  { --bs-aspect-ratio: 50%; }
.ratio-16x10 { --bs-aspect-ratio: 62.5%; }

/* ---------- Buttons (Bootstrap .btn with brand variables) ---------- */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--green-dark);
    --bs-btn-hover-border-color: var(--green-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--green-dark);
    --bs-btn-active-border-color: var(--green-dark);
    --bs-btn-focus-shadow-rgb: 4, 199, 32;
    --bs-btn-border-radius: 0;
    --bs-btn-padding-x: 1.5em;
    --bs-btn-padding-y: 0.5em;
    --bs-btn-font-size: 0.95rem;
    --bs-btn-font-weight: 400;
    letter-spacing: 0.02em;
}
.btn-ghost {
    --bs-btn-color: #555;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #777;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #333;
    --bs-btn-hover-border-color: #333;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #333;
    --bs-btn-active-border-color: #333;
    --bs-btn-focus-shadow-rgb: 51, 51, 51;
    --bs-btn-border-radius: 0;
    --bs-btn-padding-x: 2.2em;
    --bs-btn-padding-y: 0.35em;
    --bs-btn-font-size: 1.2rem;
    --bs-btn-font-weight: 300;
}

/* ---------- Header / navbar ---------- */
.site-header {
    height: var(--header-h);
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.site-header .navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-nav-link-padding-x: 0;
}
.navbar-brand { padding: 0; margin: 0; }
.navbar-brand img { height: calc(var(--header-h) * 0.72); width: auto; }
.site-header .nav-link {
    font-weight: 400;
    font-size: clamp(0.85rem, 0.75rem + 0.3vw, 1.05rem);
    letter-spacing: 0.02em;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}
.site-header .nav-link:hover,
.site-header .nav-link.active { border-bottom-color: var(--green); }

@media (max-width: 767.98px) {
    .site-header .navbar-collapse {
        position: absolute; top: 100%; left: 0; right: 0;
        background: rgba(51, 51, 51, 0.94);
        padding: 0.5rem var(--gutter) 1.25rem;
    }
    .site-header .nav-link { padding: 0.9em 0; font-size: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
    .site-header .nav-link.active { color: var(--green); }
}

/* Sub pages have no hero, so push content below the fixed header. */
main { padding-top: var(--header-h); }
.has-hero main { padding-top: 0; }

/* ---------- Home: hero ---------- */
.hero { position: relative; height: min(100svh, 64vw); min-height: 520px; color: #fff; overflow: hidden; background: #555; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 48%); }
.hero__copy { position: absolute; z-index: 1; inset-inline: 0; bottom: clamp(48px, 9vw, 130px); }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 1rem + 4.4vw, 4.4rem); line-height: 1.08; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3); }
.hero__sub { margin-top: 0.5em; font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.7rem); font-weight: 350; }

/* ---------- Home: intro + stats ---------- */
.intro { padding-top: var(--section-gap); }
.intro__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }

.stats { position: relative; max-width: 1000px; margin-top: clamp(48px, 6vw, 88px); }
.stats::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(4, 199, 32, 0.28); }
.stat { position: relative; padding-top: clamp(22px, 3vw, 36px); }
.stat::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); }
.stat__value { margin: 0; font-family: var(--font-head); color: var(--green); font-size: clamp(2.6rem, 1.2rem + 5.2vw, 5.5rem); line-height: 1; }
.stat__label { margin: 0.5rem 0 0; color: var(--green); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(0.6rem, 0.5rem + 0.5vw, 0.85rem); font-weight: 400; }

/* ---------- Home: latest projects ---------- */
.latest__head { padding-top: var(--section-gap); padding-bottom: clamp(20px, 3vw, 40px); }
.latest__head h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }

.band {
    background: linear-gradient(180deg, #e4e4e4 0%, #dddddd 40%, #e1e1e1 88%, #fff 100%);
    padding-top: clamp(16px, 2vw, 32px);
    padding-bottom: clamp(56px, 7vw, 110px);
}
.projects__track { scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.projects__track::-webkit-scrollbar { display: none; }
.project { scroll-snap-align: start; }
.project img { aspect-ratio: 1915 / 1657; object-fit: contain; }
.project__name { color: var(--text); font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); margin: 0.4em 0 0.2em; }
.project__text { font-size: 0.9rem; color: var(--text-soft); }
.projects__next {
    position: absolute; top: 6%; right: 0; z-index: 2;
    width: clamp(40px, 4.4vw, 64px); aspect-ratio: 1;
    padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(0, 0, 0, 0.3) url("../img/arrow.webp") center / 62% no-repeat;
    transition: background-color 0.2s;
}
.projects__next:hover { background-color: rgba(0, 0, 0, 0.5); }
.projects__next[hidden] { display: none; }

/* ---------- Home: what we do (Bootstrap cards) ---------- */
.what { margin-top: var(--section-gap); }
.svc-card {
    --bs-card-bg: rgba(242, 242, 242, 0.9);
    --bs-card-border-width: 0;
    --bs-card-border-radius: 22px;
    --bs-card-color: var(--text);
    padding: 10px;
    transition: transform 0.25s, box-shadow 0.25s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); color: var(--text); }
.svc-card .card-img-top { aspect-ratio: 1025 / 1180; object-fit: cover; border-radius: 16px; }
.svc-card .card-title { font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.4rem); }
.svc-card .card-text { font-size: 0.9rem; line-height: 1.5; color: var(--text-soft); }

/* ---------- Home: how we work (1920 x 685 banner) ---------- */
.how { position: relative; isolation: isolate; min-height: clamp(520px, 35.7vw, 685px); display: grid; align-items: center; padding-block: clamp(48px, 6vw, 90px); }
.how__bg { position: absolute; inset: 0; z-index: -1; }
.how__bg img { width: 100%; height: 100%; object-fit: cover; }
.how__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.72); }
.how__step img { width: clamp(64px, 7vw, 100px); margin: 0 auto 0.6rem; }
.how__step h3 { color: var(--text); font-family: var(--font-body); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem); }
.how__step p { font-size: 0.9rem; line-height: 1.5; }

/* ---------- Forms (Bootstrap .form-control, underline style) ---------- */
.contact-form { width: 100%; max-width: 30rem; }
.contact-form .col-form-label { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); font-weight: 300; color: #666; }
.contact-form .form-control {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #8a8a8a;
    border-radius: 0;
    padding: 0.3em 0.2em;
    font-size: 1.1rem;
    font-weight: 350;
    box-shadow: none;
}
.contact-form textarea.form-control { min-height: 3.2em; }
.contact-form .form-control:focus { border-bottom-color: var(--green); box-shadow: 0 1px 0 var(--green); }
.contact-form.was-validated .form-control:invalid { border-bottom-color: var(--bs-form-invalid-border-color); background-image: none; padding-right: 0.2em; }
.contact-form.was-validated .form-control:valid   { border-bottom-color: var(--green); background-image: none; padding-right: 0.2em; }
.form-status:empty { display: none; }
.form-wrap { max-width: 30rem; }

/* ---------- Home: talk to our team ---------- */
.talk__kicker { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 300; }
.talk__title { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5rem); line-height: 1.05; }
.talk__copy { max-width: 22rem; font-size: 0.95rem; }

/* ---------- Home: our clientele (Bootstrap carousel) ---------- */
.clientele .carousel-control-prev,
.clientele .carousel-control-next {
    top: 50%; bottom: auto; width: 44px; height: 44px; margin-top: -22px;
    border-radius: 50%; background: rgba(51, 51, 51, 0.55); opacity: 1;
    transition: background-color 0.2s;
}
.clientele .carousel-control-prev:hover,
.clientele .carousel-control-next:hover { background: rgba(51, 51, 51, 0.8); }
.clientele .carousel-control-prev { left: 4px; }
.clientele .carousel-control-next { right: 4px; }
.clientele .carousel-control-prev-icon,
.clientele .carousel-control-next-icon { width: 1.1rem; height: 1.1rem; }
.clientele .carousel-indicators { position: static; margin: 0.75rem 0 0; justify-content: center; }
.clientele .carousel-indicators [data-bs-target] {
    width: 10px; height: 10px; margin: 0 2px; border: 7px solid transparent; border-radius: 50%;
    background-color: #6f6f6f; opacity: 0.3;
}
.clientele .carousel-indicators .active { opacity: 1; }
@media (min-width: 1200px) {
    .clientele .carousel-control-prev { left: -64px; }
    .clientele .carousel-control-next { right: -64px; }
}

/* ---------- Footer / get in touch ---------- */
.site-footer { background: linear-gradient(180deg, #fff 0%, #c3c3c3 100%); padding-top: var(--section-gap); }
.site-footer--minimal { background: none; padding-top: 0; }

.contact-details__icon { flex: none; width: 24px; margin-top: 0.3em; margin-inline: 4px; }
.contact-details__company { font-family: var(--font-head); color: var(--green); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.25; }
.contact-details__address { font-size: 0.95rem; line-height: 1.5; }
.contact-details a:hover { text-decoration: underline; }

.map { background: #ddd; }
.map iframe { border: 0; }
.map--wide { min-height: 260px; }

.footer-bar { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid rgba(51, 51, 51, 0.45); padding-top: clamp(24px, 3vw, 40px); }
.footer-label { margin-bottom: 0.6rem; font-size: 0.95rem; }
.footer-links a { font-size: 0.95rem; line-height: 1.9; }
.social img { width: 46px; height: 46px; transition: transform 0.2s; }
.social a:hover img { transform: translateY(-3px); }
.cidb { width: 150px; }
.copyright { margin: clamp(28px, 4vw, 56px) 0 0; padding-bottom: 28px; font-size: 0.85rem; }
.site-footer--minimal .copyright { margin-top: 24px; }

/* ---------- WhatsApp ---------- */
.whatsapp {
    position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 1030;
    width: clamp(52px, 4.4vw, 64px); aspect-ratio: 1; border-radius: 50%;
    background: #25d366; display: grid; place-items: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}
.whatsapp:hover { transform: scale(1.08); }
.whatsapp img { width: 56%; height: auto; }

/* ---------- About ---------- */
.about-hero { margin-top: clamp(24px, 3vw, 44px); }
.about-copy { margin-top: clamp(24px, 3vw, 48px); padding-bottom: var(--section-gap); }
.about-copy p { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem); }

.mission { background: var(--mission-bg); padding-block: clamp(36px, 5vw, 72px); }
.mission h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }

.why__item img { width: min(100%, 200px); margin-bottom: 0.6rem; mix-blend-mode: multiply; }
.why__item p { max-width: 16rem; font-size: 0.95rem; line-height: 1.45; }

/* FAQ – Bootstrap accordion with brand skin and +/– icons */
.faq-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-color: var(--text);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-active-color: var(--green-dark);
    --bs-accordion-btn-padding-y: 0.7rem;
    --bs-accordion-btn-padding-x: 1.1rem;
    --bs-accordion-body-padding-x: 1.1rem;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(4, 199, 32, 0.25);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234d4d4d' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M8 2v12M2 8h12'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23039a19' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 8h12'/%3E%3C/svg%3E");
}
.faq-accordion .accordion-item { margin-bottom: 10px; background: var(--faq-bg); border-radius: 8px; overflow: hidden; }
.faq-accordion .accordion-header { margin: 0; font-size: inherit; color: inherit; }
.faq-accordion .accordion-button { font-family: var(--font-head); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed) { box-shadow: none; }
.faq-accordion .accordion-button::after { transform: none !important; }
.faq-accordion .accordion-body { font-size: 0.98rem; padding-top: 0; }
.faq-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* ---------- Services ---------- */
.service + .service { margin-top: clamp(20px, 3vw, 36px); }
.service__img { border-radius: 22px; min-height: 220px; }
.service__card { --bs-card-bg: var(--card-bg); --bs-card-border-width: 0; --bs-card-border-radius: 22px; }
.service__card .card-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.service__tag { margin: 0.3em 0 0.9em; font-size: 0.85rem; font-style: italic; font-weight: 500; color: #222; }
.service__card .card-text { font-size: 0.95rem; line-height: 1.6; }

/* ---------- Portfolio listing ---------- */
.showcase { padding-block: clamp(24px, 3vw, 44px) clamp(36px, 5vw, 72px); }
.showcase__gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 2.68 / 1; }
.showcase__gallery a { display: block; background: #ddd; overflow: hidden; }
.showcase__gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.showcase__gallery a:hover img { transform: scale(1.04); }
.showcase__main { grid-row: 1 / span 2; }
.showcase__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); text-transform: uppercase; }
.showcase__title a { color: inherit; }
.showcase__title a:hover { color: var(--green-dark); }
@media (max-width: 575.98px) {
    .showcase__gallery { aspect-ratio: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
    .showcase__main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
    .showcase__gallery a:not(.showcase__main) { aspect-ratio: 4 / 3; }
}

/* ---------- Single project ---------- */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--text-soft);
    --bs-breadcrumb-item-active-color: var(--text-soft);
    --bs-breadcrumb-font-size: 0.95rem;
    flex-wrap: nowrap;
    color: var(--text-soft);
}
.breadcrumb-item { flex: none; }
.breadcrumb-item.active { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb-item a:hover { text-decoration: underline; }

.project-single__title { margin: 0; text-align: center; text-transform: uppercase; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); }
.project-single__heading { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); margin-bottom: 0.6em; }
.project-intro { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }
.project-facts { padding-left: clamp(16px, 2vw, 28px); border-left: 2px solid rgba(4, 199, 32, 0.4); }
.project-facts dt { font-size: 0.8rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-dark); }
.project-facts dd { margin: 0.1em 0 14px; }

.gallery-thumb { display: block; width: 100%; padding: 0; border: 0; background: #ddd; cursor: zoom-in; overflow: hidden; }
.gallery-thumb img { object-fit: cover; transition: transform 0.5s; }
.gallery-thumb:hover img { transform: scale(1.04); }

.project-quote blockquote { font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); line-height: 1.5; }
.project-quote blockquote p::before { content: "\201C"; }
.project-quote blockquote p::after  { content: "\201D"; }
.project-quote figcaption { color: var(--green-dark); }
.project-quote figcaption::before { content: "— "; }

.project-nav__link { font-family: var(--font-head); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem); }

/* Gallery modal (Bootstrap modal + carousel) */
.gallery-modal { --bs-modal-bg: transparent; --bs-modal-border-width: 0; --bs-modal-padding: 0; }
.modal-backdrop { --bs-backdrop-opacity: 0.92; }
.gallery-modal .carousel-item img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.gallery-modal .carousel-control-prev,
.gallery-modal .carousel-control-next { width: 12%; }

/* ---------- Scroll reveal (only when JS is on) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; }
}