/*
Theme Name: MICE Theme
Theme URI: http://example.com
Author: AI Assistant
Author URI: http://example.com
Description: Custom editable WordPress theme for MICE website.
Version: 1.0.0
Text Domain: mice-theme
*/

:root {
    --primary: #0394d9;
    --primary-dark: #013879;
    --accent: #ffa800;
    --accent-soft: #ffe2a6;
    --bg: #f6f8fa;
    --surface: #ffffff;
    --text: #222222 ;
    --muted: #5d6f82;
    --line: rgba(12, 43, 69, 0.08);
    --shadow: 0 18px 40px rgba(17, 46, 74, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
 
body {    
    margin: 0;
    font-family: 'Bai Jamjuree', Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
}

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

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

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

.site-shell {
    min-height: 100vh;
}

.container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.site-main {
    overflow: hidden;
}

/* Site header: a separate, solid bar above the hero — not overlaid on it. */
.site-header {
    background: var(--surface);
    box-shadow: 0 4px 20px rgba(17, 46, 74, 0.08);
    position: relative;
    z-index: 10;
}

.hero-section {
    background-color: transparent;
    background-size: cover;
    background-position: center;
    min-height: 560px;
    display: flex;
    align-items: center;
}

.hero-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-dark);
    font-weight: 700;
}

.brand-logo,
.brand-logo-image {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
    object-fit: contain;
}

.brand-logo-image {
    padding: 4px;
    background: var(--surface);
}

.brand-name {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.primary-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.primary-menu,
.fallback-menu {
    list-style: none;
    display: flex;
    gap: 28px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.primary-menu a,
.fallback-menu a {
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.primary-menu a:hover,
.fallback-menu a:hover {
    color: var(--primary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border: none;
    transition: 0.2s ease;
}

.btn:hover {
    opacity: 0.9;
}

.hero-content {
    max-width: 980px;
    text-align: center;
}

.hero-content h1 {
    margin: 0 auto;
    color: #fff;
    font-size: clamp(28px, 64px, 80px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-weight: 800;
    max-width: 920px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.about-section,
.services-section,
.clients-section,
.projects-section,
.feature-banner,
.cta-section {
    padding: 80px 0;
}

.projects-section {
    padding-bottom: 0px;
}

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

.section-tag {
    display: inline-block;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.section-tag.light {
    color: rgba(255, 255, 255, 0.92);
}

.about-copy h2,
.section-heading h2,
.feature-banner-copy h2,
.cta-strip h2 {
    margin: 0 0 18px;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.2;
    color: var(--primary-dark);
}

.about-copy p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 1rem;
}

.about-card {
    margin-top: 28px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 30px 32px;
}

.about-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-dark);
}

.kicker-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--accent);
}

.about-quote {
    margin: 0 0 14px;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 800;
    line-height: 1.4;
    color: var(--primary-dark);
}

.about-quote-desc {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.7;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 18px;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: none;
}

.stat-text {
    display: flex;
    flex-direction: column;
}

.stat-box strong {
    color: var(--primary-dark);
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    line-height: 1.1;
}

.stat-box span {
    color: var(--muted);
    font-size: 0.8rem;
}

.about-visual {
    display: flex;
    justify-content: center;
}

.vn-map-image {
    width: 100%;
    max-width: 420px;
    height: auto;
}

.section-heading {
    margin-bottom: 28px;
}

.section-heading.center {
    text-align: center;
}

.services-grid,
.projects-grid,
.partner-grid {
    display: grid;
    gap: 24px;
}

.services-grid {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.service-card,
.project-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 25px rgba(20, 44, 68, 0.06);
}

.service-card {
    padding-bottom: 18px;
}

.service-thumb img,
.project-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.service-card h3,
.project-body h3 {
    color: var(--primary-dark);
    margin: 18px 18px 10px;
    font-size: 20px;
}

.service-card p,
.project-body p {
    margin: 0 18px;
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px;
}

.clients-marquee {
    display: grid;
    gap: 22px;
}

.client-row {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    scroll-behavior: auto;
}

.client-row::-webkit-scrollbar {
    display: none;           
}

.client-row.dragging {
    cursor: grabbing;
}

.client-track {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    padding: 6px 0;
}

.client-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 222px;
    height: 148px;
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: filter 0.2s ease;
    pointer-events: none;
}

.client-row:hover .client-logo img {
    filter: grayscale(0) opacity(1);
}

.project-scroll-layout {
    display: grid;
    gap: 24px;
}

.project-scroll-item {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.project-scroll-item:nth-child(even) {
    grid-template-columns: 0.9fr 1.1fr;
}

.project-scroll-item:nth-child(even) .project-scroll-image {
    order: 2;
}

.project-scroll-item:nth-child(even) .project-scroll-copy {
    order: 1;
}

.project-scroll-image {
    min-height: 290px;
}

.project-scroll-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-scroll-copy {
    padding: 24px 28px;
}

.project-scroll-copy h3 {
    font-size: clamp(1.7rem, 2.3vw, 2.5rem);
    margin: 0 0 12px;
    color: var(--primary-dark);
}

.project-scroll-copy p {
    color: var(--muted);
    line-height: 1.8;
    margin: 0;
}

.feature-banner-wrap {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.feature-banner-visual {
    min-height: 330px;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
        url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
}

.cta-section {
    padding-top: 0;
}

.cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 26px;
    background: linear-gradient(135deg, #0a4e7e, #11b8c4);
    padding: 34px 40px;
    color: #fff;
}

.cta-strip h2 {
    color: #fff;
    margin-bottom: 0;
}

@media (max-width: 980px) {
    .about-layout {
        grid-template-columns: 1fr;
    }

    .services-grid,
    .projects-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .project-scroll-item,
    .project-scroll-item:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .project-scroll-item:nth-child(even) .project-scroll-image,
    .project-scroll-item:nth-child(even) .project-scroll-copy {
        order: initial;
    }
}

@media (max-width: 640px) {
    .services-grid,
    .projects-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .primary-menu,
    .fallback-menu {
        justify-content: center;
        gap: 14px;
    }

    .main-header {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cta-strip {
        flex-direction: column;
        text-align: center;
    }

    .footer-shell {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand .brand-mark,
    .footer-contact {
        justify-content: center;
        align-items: center;
    }
}

.site-footer {
    background: var(--primary-dark);
    color: rgba(255, 255, 255, 0.85);
    padding-top: 56px;
}

.footer-shell {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 36px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand .brand-mark {
    color: #fff;
    margin-bottom: 14px;
}

.footer-text {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    max-width: 420px;
}

.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.footer-contact-list a {
    color: rgba(255, 255, 255, 0.85);
}

.footer-contact-list a:hover {
    color: var(--accent);
}

.footer-bottom {
    padding: 20px 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Service cards with icon + link */
.service-card {
    padding: 26px 18px 22px;
    text-align: center;
}

.service-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto 14px;
}

.service-link {
    display: inline-block;
    margin: 14px 18px 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
}

.service-link:hover {
    color: var(--accent);
}

/* Projects: single continuous filmstrip, full width, fixed-height row so
   nothing shifts vertically when a slide grows/shrinks. Image order never
   changes — the reel scrolls so whichever slide is active lands in the same
   fixed screen position near the left, rather than positions swapping. Text
   floats over the headroom above the shorter (non-active) thumbnails, which
   sit bottom-aligned and shorter than the row — it never overlaps the full
   -height active image itself. */
.project-carousel {
    position: relative;
}

/* Breaks the STRIP ITSELF out of the normal .container gutters so it spans
   the full browser width, showing more of the surrounding images on wide
   screens — while .project-carousel (and the text overlay positioned
   relative to it) stays at the normal container width/position, same as
   every other section. .site-main has overflow:hidden, which absorbs the
   100vw-vs-scrollbar rounding this technique can otherwise cause. The JS
   scroll-target math compensates for the strip's own left edge no longer
   lining up with the container's, so the active slide still rests at the
   same on-screen spot the container used to put it at. */
.project-filmstrip-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.project-filmstrip {
    height: 645px;
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.project-filmstrip::-webkit-scrollbar {
    display: none;
}

.project-slide {
    flex: none;
    width: 215px;
    height: 261px;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    cursor: pointer;
    position: relative;
    transition: width 0.45s ease, height 0.45s ease;
}

/* Suspended for one frame during the silent loop-boundary recenter so the
   same photo swapping DOM copies doesn't visibly shrink and regrow, or
   flash through the inactive (opacity: 0.6) state — the <img> has its own
   separate opacity transition, so it needs suspending here too. */
.project-filmstrip.is-recentering .project-slide,
.project-filmstrip.is-recentering .project-slide img {
    transition: none !important;
}

.project-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.project-slide:hover img {
    opacity: 0.85;
}

.project-slide.is-active {
    width: 535px;
    height: 645px;
}

.project-slide.is-active img {
    opacity: 1;
}

/* Sits only in the headroom above the bottom-aligned, shorter thumbnails
   (row height 645px − thumbnail height 261px = 384px) — never over the
   full-height active image itself. */
.project-text-overlay {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: min(380px, 36%);
    height: 384px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0 4px 28px;
}

.project-text-overlay h3 {
    margin: 0 0 14px;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    color: var(--primary-dark);
}

.project-text-overlay p {
    color: var(--muted);
    line-height: 1.8;
    margin: 0;
}

.thumb-nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.thumb-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--primary-dark);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s ease;
}

.thumb-nav-btn:hover {
    background: var(--primary-dark);
    color: #fff;
    border-color: var(--primary-dark);
}

/* Promo banner: a single full-width promotional image, no overlay text */
.promo-banner {
}

.promo-visual {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.promo-visual img {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* Tour request form */
.tour-form-section {
    padding: 80px 0;
}

.tour-form-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 44px;
}

.tour-form-title {
    margin: 0 0 28px;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--primary-dark);
}

.required {
    color: #e6394a;
}

.form-notice {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
}

.form-notice-success {
    background: rgba(30, 175, 100, 0.12);
    color: #1a8a52;
}

.form-notice-error {
    background: rgba(230, 60, 60, 0.12);
    color: #c62828;
}

.tour-request-form {
    display: grid;
    gap: 26px;
}

.tour-request-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.tour-request-form legend {
    padding: 0;
    margin-bottom: 14px;
    font-weight: 800;
    color: var(--primary-dark);
    font-size: 1.05rem;
}

.form-hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 0;
}

/* Collapsible sections (native <details>/<summary> — collapsed by default,
   no JS needed). The flex layout lives on an inner wrapper span rather than
   on <summary> itself — <summary>'s own box behaves inconsistently across
   browsers when its display is overridden directly, which was pulling the
   text+chevron toward the center instead of spreading them edge-to-edge. */
.form-collapsible summary {
    cursor: pointer;
    list-style: none;
}

.form-collapsible summary::-webkit-details-marker {
    display: none;
}

.collapsible-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    color: var(--primary-dark);
    font-size: 1.05rem;
}

.collapsible-chevron {
    flex: none;
    width: 10px;
    height: 10px;
    margin-left: 12px;
    border-right: 2px solid var(--primary-dark);
    border-bottom: 2px solid var(--primary-dark);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.form-collapsible[open] .collapsible-chevron {
    transform: rotate(-135deg);
}

.form-collapsible-body {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

.field-group {
    display: grid;
    gap: 8px;
}

.field-label {
    margin: 0;
    font-weight: 700;
    color: var(--text);
    font-size: 0.9rem;
}

.field-note {
    margin: -4px 0 2px;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--muted);
}

.form-grid {
    display: grid;
    gap: 18px;
}

.form-grid.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid label,
.captcha-row label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

.form-grid label.full-width {
    grid-column: 1 / -1;
}

/* The label text and its required asterisk must be ONE flex item (this
   inline wrapper), not two separate children — otherwise flex-direction:
   column above stacks the label text and the "*" onto their own lines. */
.field-label-text {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.form-grid input,
.form-grid select,
.field-group input[type="text"],
.captcha-input-row input {
    border: none;
    background: var(--bg);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
}

.form-grid input::placeholder,
.field-group input::placeholder,
.captcha-input-row input::placeholder {
    color: var(--muted);
}

.form-grid select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.checkbox-row,
.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
}

.checkbox-row-stacked {
    flex-direction: column;
    gap: 12px;
}

.radio-row-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, max-content));
    gap: 12px 28px;
}

.radio-row-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 28px;
}

.checkbox-option,
.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 600;
    flex-direction: row !important;
}

.checkbox-option input,
.radio-option input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    flex: none;
}

.captcha-row {
    display: grid;
    gap: 6px;
}

.captcha-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.captcha-input-row input {
    flex: 1;
    min-width: 0;
}

.captcha-code {
    flex: none;
    min-width: 90px;
    text-align: center;
    padding: 10px 16px;
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    color: var(--primary-dark);
    user-select: none;
}

.captcha-refresh {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s ease;
}

.captcha-refresh:hover {
    background: var(--primary-dark);
}

.btn-submit-red {
    justify-self: center;
    padding: 14px 56px;
    border-radius: 999px;
    border: none;
    background: #e6394a;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-submit-red:hover {
    background: #c62838;
}

/* Footer: 3-column layout */
.footer-shell-3col {
    grid-template-columns: 1.2fr 0.8fr 1fr;
}

.footer-office-list {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.footer-office-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-office-list strong {
    color: #fff;
    font-size: 0.85rem;
}

.footer-office-list span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    line-height: 1.5;
}

.footer-policy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.footer-policy-list a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
}

.footer-policy-list a:hover {
    color: var(--accent);
}

.cert-badge {
    max-width: 120px;
    margin-bottom: 18px;
}

.newsletter-input-row {
    display: flex;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.newsletter-input-row input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 16px;
    color: #fff;
    font-family: inherit;
}

.newsletter-input-row input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-input-row button {
    border: none;
    background: var(--accent);
    color: #fff;
    width: 46px;
    cursor: pointer;
    font-size: 1rem;
}

.newsletter-success {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--accent-soft);
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
}

.social-link:hover {
    background: var(--accent);
}

.footer-bottom-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-hotline {
    color: #fff;
    font-weight: 700;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

@media (max-width: 980px) {
    .project-carousel {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .project-filmstrip {
        height: 220px;
    }

    .project-slide {
        width: 130px;
        height: 110px;
    }

    .project-slide.is-active {
        width: 260px;
        height: 220px;
    }

    .project-text-overlay {
        position: static;
        width: auto;
        height: auto;
        background: none;
        padding: 0;
    }

    .form-grid.two-col,
    .radio-row-2col {
        grid-template-columns: 1fr;
    }

    .tour-form-card {
        padding: 28px 20px;
    }

    .footer-shell-3col {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .client-logo {
        width: 120px;
        height: 64px;
    }

    .form-grid.two-col,
    .tour-request-form > .form-grid.two-col,
    .radio-row-grid {
        grid-template-columns: 1fr;
    }
}