/* Shared responsive and accessibility rules. Loaded after the legacy theme. */
:root { --site-header-offset: 100px; }
html { scroll-padding-top: var(--site-header-offset); }
[id] { scroll-margin-top: var(--site-header-offset); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px #fff !important;
}
button, a, input, select, textarea { touch-action: manipulation; }
.skip-link {
    position: fixed; top: 8px; left: 16px; z-index: 20000;
    padding: 12px 20px; border-radius: 8px; background: #fff; color: #0f172a;
    transform: translateY(-160%); font-weight: 600;
}
.skip-link:focus { transform: none; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.container, .page-hero-container { width: 100%; }
.container > *, [style*="display: grid"] > * { min-width: 0; }
.badge-tag, .hero-trust-pill, .ai-citation-badge {
    max-width: 100%; white-space: normal !important; overflow-wrap: anywhere;
}
.badge-tag > i, .hero-trust-pill > i { flex-shrink: 0; }
.hero-editorial-title, .page-hero-title, .section-title { text-wrap: balance; }
.hero-lead-desc, .page-hero-subtitle { text-wrap: pretty; }
.about-grid > *, .contact-grid > *, .form-grid > *, .footer-grid > *,
.services-grid > *, .project-case-grid > *, .hero-two-col-container > *,
.calc-results-grid > *, .calc-param-grid > *, .calc-packages-matrix > * {
    min-width: 0;
}
.portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.portfolio-filters {
    flex-wrap: wrap !important; overflow: visible !important;
    justify-content: center !important; gap: 8px !important;
}
.filter-btn { min-height: 44px; max-width: 100%; white-space: normal !important; }
.btn, .btn-quote-island, .header-island-center .nav-link { min-height: 44px; }
.btn { white-space: normal; text-align: center; }
.nav-dropdown-wrapper.is-open > .dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
}
.table-responsive:focus-visible, .comparison-table-wrapper:focus-visible { outline-offset: -3px !important; }
.table-scroll-hint { color: #475569; font-size: .875rem; margin: 0 0 .6rem; }
.motion-toggle {
    display: block; min-height: 44px; margin: 12px auto; padding: 10px 18px;
    background: #fff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 24px;
    font-size: .875rem; font-weight: 600;
}
.motion-paused *, .circular-gallery-marquee-section:focus-within *,
.materials-marquee-section:focus-within * { animation-play-state: paused !important; }
.calc-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc-breakdown-row span { min-width: 0; overflow-wrap: anywhere; }
div[style*="display: flex"] > div { min-width: 0; }
.calc-quick-estimate {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 0 0 24px; padding: 20px 24px; border: 1px solid #cbd5e1;
    border-radius: 16px; background: #f8fafc;
}
.calc-quick-estimate strong { display: block; font-size: clamp(1.5rem, 3vw, 2rem); color: #0f172a; }
.calc-quick-estimate small { display: block; color: #475569; }
.calc-quick-estimate a { padding: 12px 18px; flex-shrink: 0; }
.calc-bldg-card:focus-visible, .portfolio-item:focus-visible { outline-offset: -4px !important; }
.portfolio-view-trigger { width: 44px !important; height: 44px !important; z-index: 4; cursor: pointer; opacity: 1 !important; }
.portfolio-item:focus-within .portfolio-overlay,
.portfolio-item:focus-within .portfolio-card-case-study-btn { opacity: 1 !important; transform: none !important; }
.calc-city-modal-backdrop, .lightbox-modal {
    overflow-y: auto; overscroll-behavior: contain;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.calc-city-modal-box { max-height: calc(100dvh - 32px); overflow-y: auto; }
.chatbot-window {
    max-height: calc(100dvh - 110px); max-width: calc(100vw - 32px);
    bottom: calc(80px + env(safe-area-inset-bottom));
}
.chatbot-body { min-height: 0; overscroll-behavior: contain; }
.chatbot-close-btn, .mobile-drawer-close, .calc-modal-close { min-width: 44px; min-height: 44px; }
.contact-fab-wrapper { bottom: calc(16px + env(safe-area-inset-bottom)); }
.chatbot-toggle-btn { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
body.menu-open .contact-fab-wrapper, body.menu-open #siluxChatbot { visibility: hidden; }
body.menu-open { touch-action: auto; }
.nav-menu { overscroll-behavior: contain; }
.lightbox-info { min-width: 0; }

@media (min-width: 1201px) {
    .header-island-center .nav-link { padding-inline: clamp(.5rem, .8vw, .85rem); }
    .header-island-center .dropdown-menu { max-height: calc(100dvh - 120px); overflow-y: auto; }
    .header-island-center .nav-dropdown-wrapper.is-open > .dual-city-dropdown {
        opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}
@media (max-width: 1200px) {
    :root { --site-header-offset: 88px; }
    .mobile-drawer-header, .mobile-drawer-footer { display: flex !important; visibility: visible !important; }
    .nav-menu { padding: max(20px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)) !important; }
    .mobile-drawer-header { flex-shrink: 0; }
    .mobile-drawer-footer { flex-direction: column; }
    .mobile-drawer-close { flex-shrink: 0; }
    .nav-menu:not(.active) .mobile-drawer-header,
    .nav-menu:not(.active) .mobile-drawer-footer { visibility: hidden !important; }
    .header-island-container { gap: 10px !important; }
    .nav-links { flex-shrink: 0; }
    .dropdown-item { min-height: 44px !important; display: flex !important; align-items: center; }
}
@media (min-width: 769px) and (max-width: 1279px) {
    .calc-packages-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: none !important; }
    .calc-mobile-pkg-tabs { position: static; }
}
@media (max-width: 1024px) {
    .calc-results-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .container[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
    .container > aside[style*="position: sticky"] { position: static !important; }
}
@media (max-width: 768px) {
    .container { padding-inline: clamp(16px, 4vw, 28px) !important; }
    .section, .section-alt { padding-block: 48px; }
    .page-hero { padding-top: 112px !important; padding-bottom: 32px !important; }
    .page-hero-title { font-size: clamp(1.75rem, 5.5vw, 2.5rem) !important; line-height: 1.2 !important; }
    .page-hero-subtitle, .hero-lead-desc { font-size: 1rem !important; line-height: 1.65 !important; }
    .hero-banner-content { padding: 104px 24px 40px !important; width: 100%; }
    .hero-editorial-title { font-size: clamp(2rem, 8.5vw, 3.5rem) !important; line-height: 1.15 !important; }
    .hero-banner-card { min-height: 0 !important; }
    .hero-eyebrow { font-size: .875rem !important; }
    .hero-trust-item { white-space: normal; font-size: .875rem !important; }
    .hero-cta-row { gap: 12px; }
    .hero-cta-row > a { flex: 0 0 auto; width: 100%; min-height: 52px; height: auto; justify-content: center; padding-inline: 16px; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select, textarea { font-size: 16px !important; min-height: 48px; }
    .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    main [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
    .calc-packages-matrix { grid-template-columns: minmax(0, 1fr) !important; }
    .calc-package-col:not(.active) { display: none !important; }
    .calc-mobile-pkg-tabs { position: static !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .mobile-pkg-tab { min-height: 48px; font-size: .875rem !important; }
    .mobile-pkg-tab.active { color: #fff !important; }
    .mobile-pkg-tab[data-pkg="premium"].active { color: #0f172a !important; }
    .calc-chip-btn, .calc-floor-pill-btn { min-height: 44px; font-size: .875rem !important; padding: 8px 10px !important; }
    .calc-stepper-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; }
    .calc-param-label { font-size: 1rem !important; }
    .calc-bldg-name { font-size: .875rem !important; }
    .calc-quick-estimate { flex-wrap: wrap; padding: 16px; }
    .calc-quick-estimate a { width: 100%; }
    .calc-results-section { padding: 24px 16px !important; }
    .calc-results-grid { width: 100%; }
    .calc-results-grid > div { width: 100%; min-width: 0 !important; }
    .calc-breakdown-row { font-size: .875rem !important; gap: 12px !important; }
    .calc-breakdown-row span:last-child { flex: 1 1 45% !important; }
    .calc-results-grid > div > div:has(> #calcPrintPdfBtn) { flex-wrap: wrap; }
    .calc-results-grid div:has(> #calcPrintPdfBtn) > * { flex: 1 1 160px !important; }
    .calc-grand-price { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
    .calc-grand-rate-tag { font-size: .875rem !important; }
    .ai-citation-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ai-citation-title { font-size: 1.15rem !important; line-height: 1.4; }
    .ai-citation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ai-spec-card { padding: 12px !important; min-width: 0; }
    .ai-spec-value { font-size: 1rem !important; }
    .ai-spec-sub { font-size: .8rem !important; }
    .portfolio-filters { justify-content: flex-start !important; }
    .filter-btn { padding: 10px 12px !important; font-size: .875rem !important; }
    div:has(> .vaastu-zone-btn) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
    .vaastu-zone-btn { min-width: 0; overflow-wrap: anywhere; transform: none !important; }
    .lightbox-modal { justify-content: flex-start; }
    .lightbox-stage { flex: 1 0 180px; }
    .lightbox-img { max-height: 48dvh; }
    .lightbox-nav-btn { min-width: 44px; min-height: 44px; }
    .footer { padding-bottom: 96px !important; }
}
@media (max-width: 380px) {
    .hero-banner-content { padding-inline: 20px !important; }
    .hero-editorial-wrapper { padding-inline: 8px !important; }
    .hero-trust-badges { gap: 12px !important; }
    .ai-citation-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .calc-breakdown-row { flex-direction: column; }
    .calc-breakdown-row span:last-child { text-align: left !important; }
    .mobile-drawer-brand span { font-size: .875rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .calc-city-modal-backdrop { align-items: flex-start; }
    .lightbox-img { max-height: 45dvh; }
    .chatbot-window { bottom: 16px; max-height: calc(100dvh - 32px); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    [data-aos] { opacity: 1 !important; transform: none !important; }
    .circular-marquee-track, .materials-marquee-track { animation: none !important; transform: none !important; }
    .motion-toggle { display: none; }
}

/* Guided service finder: readable choices and stable touch targets. */
#siluxChatbot {
    --finder-bg: #0b1514;
    --finder-panel: #152522;
    --finder-border: #688880;
    --finder-text: #f8fafc;
    --finder-muted: #c6d7d2;
    --finder-accent: #d9ed8a;
}
#siluxChatbot .chatbot-window {
    width: 390px; height: 540px;
    left: max(16px, env(safe-area-inset-left));
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 100px - env(safe-area-inset-bottom));
    bottom: calc(80px + env(safe-area-inset-bottom));
    background: var(--finder-bg); border-color: var(--finder-border);
    z-index: 10000;
}
#siluxChatbot .chatbot-header, #siluxChatbot .chatbot-footer {
    flex-shrink: 0; background: var(--finder-panel); border-color: var(--finder-border);
}
#siluxChatbot .chatbot-title { color: var(--finder-text); font-size: 1rem; }
#siluxChatbot .chatbot-status { color: var(--finder-muted); font-size: .8rem; }
#siluxChatbot .chatbot-body { background: var(--finder-bg); position: relative; scroll-behavior: auto; }
#siluxChatbot .chat-msg { flex-shrink: 0; }
#siluxChatbot .msg-bubble { margin: 0; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
#siluxChatbot .bot-msg .msg-bubble { background: var(--finder-panel); border-color: var(--finder-border); color: var(--finder-text); font-weight: 400; }
#siluxChatbot .user-msg .msg-bubble { background: var(--finder-accent); border-color: var(--finder-accent); color: var(--finder-bg); }
#siluxChatbot .chat-options-container { gap: 8px; flex-shrink: 0; }
#siluxChatbot .chat-opt-btn, #siluxChatbot .chat-service-link {
    min-height: 44px; width: 100%; padding: 11px 13px;
    font: inherit; font-size: .9375rem; line-height: 1.4; font-weight: 500;
    border: 1px solid var(--finder-border); border-radius: 8px;
    background: var(--finder-panel); color: var(--finder-text);
    text-align: left; text-decoration: none; white-space: normal; overflow-wrap: anywhere;
    transform: none; transition: background .15s, border-color .15s;
}
#siluxChatbot .chat-opt-btn:hover, #siluxChatbot .chat-service-link:hover {
    background: #284139; border-color: var(--finder-accent); transform: none; font-weight: 500;
}
#siluxChatbot .chat-service-card { border: 1px solid var(--finder-border); border-radius: 12px; padding: 16px; background: var(--finder-panel); flex-shrink: 0; }
#siluxChatbot .chat-service-city { font-size: .8rem; color: var(--finder-accent); }
#siluxChatbot .chat-service-card h4 { font-size: 1.1rem; line-height: 1.4; margin: 6px 0 10px; color: var(--finder-text); }
#siluxChatbot .chat-service-card p { font-size: .9375rem; line-height: 1.5; margin: 0 0 14px; color: var(--finder-muted); }
#siluxChatbot .chat-service-card .chat-service-note { font-size: .85rem; }
#siluxChatbot .chat-service-link { display: block; margin-top: 8px; }
#siluxChatbot .chat-service-link-primary { background: var(--finder-accent); color: var(--finder-bg); border-color: var(--finder-accent); }
#siluxChatbot .chat-service-link-primary:hover { background: #e7f5b2; color: var(--finder-bg); }
#siluxChatbot .chatbot-footer { justify-content: space-between; gap: 12px; padding: 6px 12px; }
#siluxChatbot .chatbot-restart-btn, #siluxChatbot .chatbot-close-btn {
    min-width: 44px; min-height: 44px; font-size: .9rem; color: var(--finder-text); padding: 8px;
}
#siluxChatbot .chatbot-close-btn { font-size: 1.7rem; }
#siluxChatbot .chatbot-restart-btn:disabled { color: var(--finder-muted); opacity: .6; cursor: default; }
#siluxChatbot :is(button, a):focus-visible { outline: 3px solid var(--finder-accent); outline-offset: 2px; }
#siluxChatbot #chatbotQuestion:focus { outline: none; }
@media (max-width: 480px) {
    #siluxChatbot .chatbot-window { width: calc(100vw - 32px); height: 570px; }
}
@media (max-height: 500px) {
    #siluxChatbot .chatbot-window { bottom: max(12px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px); }
}

/* Give the homepage card clearance below the floating desktop header. */
@media (min-width: 1201px) {
    #heroSection.hero-editorial-wrapper {
        padding-top: calc(var(--site-header-offset) + 24px);
    }
}

/* Compare all four construction packages in one aligned row. */
.construction-package-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important; align-items: stretch; padding: 4px 2px 16px;
}
.construction-package-grid > .service-card { min-width: 0; height: 100%; }
.construction-package-grid > .service-card:hover { transform: none !important; }
.construction-package-grid .service-content {
    flex: 1; display: grid; grid-template-rows: 44px 56px 48px 1fr auto;
    gap: 14px; padding: clamp(18px, 1.65vw, 26px) !important; min-width: 0;
}
.construction-package-grid .service-content > :is(.badge-tag, .card-featured-badge) {
    position: static; display: flex; align-items: center; justify-content: flex-start;
    width: 100%; min-height: 44px; margin: 0 !important; padding: 8px 12px;
    font-size: .7rem; line-height: 1.3; letter-spacing: .025em; border-radius: 24px;
}
.construction-package-grid .service-title {
    margin: 0 !important; font-size: 1.2rem !important; line-height: 1.4;
    align-self: center; overflow-wrap: normal;
}
.construction-package-grid .package-price { margin: 0 !important; font-size: 1.75rem !important; align-self: center; }
.construction-package-grid .service-content > ul { margin: 0 !important; padding-left: 1.1rem !important; font-size: .9rem !important; line-height: 1.7 !important; }
.construction-package-grid .service-content > .btn {
    margin: 8px 0 0; min-height: 54px; font-size: .85rem; padding: 10px 14px;
    gap: 10px; white-space: normal;
}
.construction-package-grid .service-content > .btn > span:first-child { min-width: 0; }
.construction-package-grid .btn-arrow-circle { flex-shrink: 0; width: 28px; height: 28px; }
.package-row-hint { display: none; }
@media (max-width: 1200px) {
    .construction-package-grid {
        grid-template-columns: none !important; grid-auto-flow: column;
        grid-auto-columns: calc((100% - 20px) / 2); overflow-x: auto;
        overscroll-behavior-x: contain; scroll-snap-type: x proximity;
        scrollbar-width: auto;
    }
    .construction-package-grid > .service-card { scroll-snap-align: start; }
    .package-row-hint { display: block; margin: 24px 0 -16px; color: #475569; font-size: .875rem; }
}
@media (max-width: 600px) {
    .construction-package-grid { grid-auto-columns: minmax(280px, 90%); }
}
