/* ==========================================================================
   CICC polish layer (2026-09-22)
   Loaded LAST on every public page (after styles.css and each page's inline
   <style>), so it wins without touching the original stylesheets. Same brand:
   same gold, same fonts, same copy. This file only fixes layout and rhythm.
   Delete the <link> and the site is exactly what it was.
   ========================================================================== */

/* ---------- Global ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html.cicc-menu-open, html.cicc-menu-open body { overflow: hidden; }
:focus-visible { outline: 2px solid var(--primary-color, #f8c537); outline-offset: 3px; }
.news-unavailable { text-align: center; color: rgba(255,255,255,.65); grid-column: 1 / -1; padding: 30px 0; }

/* ---------- Header (desktop) ---------- */
nav ul li a { white-space: nowrap; }
nav ul { align-items: center; }
@media (min-width: 1025px) and (max-width: 1320px) {
    nav ul li { margin-left: 26px; }
    header.scrolled nav ul li { margin-left: 22px; }
    nav ul li a { font-size: .86rem; }
    .logo { width: 240px; }
}
.ebook-nav-link { display: inline-flex !important; align-items: center; gap: 7px; line-height: 1.2; }
.ebook-nav-link::after { display: none !important; }

/* ---------- Mobile menu ---------- */
@media (max-width: 1024px) {
    .mobile-nav-toggle {
        display: flex !important; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-right: -8px; cursor: pointer;
        position: relative; z-index: 1011; -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-toggle i { font-size: 1.5rem; }
    nav {
        width: min(320px, 86vw) !important; right: calc(-1 * min(320px, 86vw) - 10px) !important;
        height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
        padding: 96px 28px 40px !important;
        visibility: hidden; transition: right .35s ease, visibility 0s linear .35s !important;
        background: rgba(8,8,8,.98) !important; border-left: 1px solid var(--primary-color, #f8c537) !important;
        text-align: left !important;
    }
    nav ul { align-items: stretch !important; }
    nav.active {
        right: 0 !important; visibility: visible;
        transition: right .35s ease, visibility 0s !important;
        /* dims the page behind the open panel; tapping it closes the menu (scripts.js) */
        box-shadow: 0 0 0 100vmax rgba(0,0,0,.6), -5px 0 30px rgba(0,0,0,.7) !important;
    }
    nav ul li { margin: 0 !important; border-bottom: 1px solid rgba(248,197,55,.14); }
    nav ul li:last-child { border-bottom: 0; }
    nav ul li a { display: block; padding: 15px 4px !important; font-size: 1.02rem !important; }
    nav ul li a::after { display: none; }
    nav ul li a.ebook-nav-link { display: inline-flex !important; margin: 12px 0; padding: 12px 18px !important; }
}

/* ---------- Section rhythm on phones ---------- */
@media (max-width: 600px) {
    .container { width: 100%; padding-left: 18px !important; padding-right: 18px !important; margin-left: auto !important; margin-right: auto !important; }
    section { scroll-margin-top: 80px; }
    .section-header { margin-bottom: 36px !important; }
    .section-header h2 { font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.2; }
    .hero-buttons { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
    .hero-buttons a { justify-content: center; text-align: center; }
    .premium-button, .secondary-button { min-height: 48px; }
}

/* ---------- Investment opportunities: compact 2-up tiles on phones ----------
   A 580px rule forced one column while each tile kept a 1:1 aspect ratio, so the
   ten sectors became ten ~310px squares stacked end to end. */
@media (max-width: 768px) {
    .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin-bottom: 30px; }
    .opportunity-card { aspect-ratio: auto; }
    .opportunity-card-inner { min-height: 128px; padding: 18px 10px !important; }
    .opportunity-icon { font-size: 1.9rem !important; margin-bottom: 10px !important; }
    .opportunity-card h3 { font-size: .8rem !important; line-height: 1.35; margin: 0; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .opportunity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------- Services: no orphan card ---------- */
@media (min-width: 1100px) {
    .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; }
    .service-card { padding: 36px 22px !important; }
}
@media (min-width: 640px) and (max-width: 1099px) {
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; }
}
@media (max-width: 639px) {
    .services-grid { gap: 16px !important; }
    .service-card { padding: 26px 20px !important; }
}

/* ---------- Galleries ---------- */
.gallery-item { height: auto !important; aspect-ratio: 3 / 4; }
.gallery-container { gap: 16px !important; }
@media (max-width: 1024px) { .gallery-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 768px)  { .gallery-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 !important; }
    .gallery-caption { padding: 26px 10px 10px !important; }
    .gallery-caption h3 { font-size: .85rem !important; }
    .gallery-caption p { display: none; } }
.gallery-container.cicc-collapsed .gallery-item:nth-child(n+9) { display: none; }
.cicc-gallery-more-wrap { text-align: center; margin-top: 26px; }
.cicc-gallery-more {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    background: transparent; color: var(--primary-color, #f8c537);
    border: 1px solid var(--primary-color, #f8c537); border-radius: 4px;
    padding: 13px 26px; min-height: 46px;
    font: 600 .82rem/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}
.cicc-gallery-more:hover { background: var(--primary-color, #f8c537); color: #111; }
.image-gallery { padding-bottom: 50px; }
@media (max-width: 768px) { .image-gallery { padding-top: 50px !important; padding-bottom: 30px; } }

/* ---------- Membership page: forms that fit a phone ---------- */
.form-error { display: none !important; }  /* the validator re-shows a message with an inline !important */
@media (max-width: 600px) {
    .membership-form-container, .contact-form-container { padding: 24px 16px !important; }
    .form-columns, .form-row { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; }
    .tier-radio-item { padding: 16px !important; }
    .tier-price-display { font-size: clamp(1.35rem, 6.2vw, 1.8rem) !important; overflow-wrap: anywhere; }
    .membership-form input:not([type=radio]):not([type=checkbox]), .membership-form select, .membership-form textarea,
    .contact-form input:not([type=radio]):not([type=checkbox]), .contact-form select, .contact-form textarea { width: 100% !important; font-size: 16px !important; }
    select { text-overflow: ellipsis; padding-right: 34px !important; }
}

/* ---------- Success page: booking calendar must be usable ----------
   success.php sets the hero's dark overlay layers to position:fixed, which stretches
   them over the whole viewport, on top of the Calendly booking widget below the hero.
   The widget looked dimmed and swallowed every tap. Keep the overlays inside the hero. */
.success-hero { isolation: isolate; }
.success-hero::before, .success-hero::after { position: absolute !important; pointer-events: none; }
#schedule { position: relative; z-index: 3; }