/*
 * V11 Professional 100% Browser-Zoom Calibration
 * Authoritative responsive scale layer shared by the homepage and all inner pages.
 * This file intentionally changes sizing/spacing only; existing colors, content and
 * component behavior remain owned by site.css and the page-specific styles.
 */
:root {
    --viewport-content-max: 78rem;
    --viewport-reading-max: 48rem;
    --viewport-gutter: clamp(1rem, 3.15vw, 2.5rem);
    --viewport-section-y: clamp(3.75rem, 6.25vw, 6.25rem);
    --viewport-section-y-compact: clamp(2.75rem, 4.5vw, 4.5rem);
    --viewport-grid-gap: clamp(1rem, 1.8vw, 1.5rem);
    --viewport-card-pad: clamp(1rem, 1.6vw, 1.4rem);
    --viewport-copy: clamp(1rem, .35vw + .92rem, 1.0875rem);
    --viewport-lead: clamp(1.0625rem, .75vw + .93rem, 1.25rem);
    --viewport-h1: clamp(2.35rem, 4.45vw, 4.45rem);
    --viewport-h2: clamp(1.9rem, 3.1vw, 3.1rem);
    --viewport-h3: clamp(1.2rem, 1.35vw, 1.45rem);
    --viewport-control-height: 3rem;
    --shell: min(var(--viewport-content-max), calc(100% - (var(--viewport-gutter) * 2)));
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.site-body {
    font-size: 1rem;
    line-height: 1.6;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

input,
textarea,
select,
button {
    font-size: max(1rem, 16px);
}

.site-shell,
.site-shell-premium,
.home-page .max-w-7xl,
.home-page .max-w-6xl {
    width: min(var(--viewport-content-max), calc(100% - (var(--viewport-gutter) * 2))) !important;
    max-width: var(--viewport-content-max) !important;
    margin-inline: auto !important;
}

.site-shell-premium {
    padding-inline: clamp(.85rem, 1.7vw, 1.5rem);
}

.page-main {
    min-width: 0;
}

.page-hero {
    min-height: clamp(31rem, 62svh, 42rem);
}

.page-hero-content {
    width: min(var(--viewport-content-max), calc(100% - (var(--viewport-gutter) * 2)));
    max-width: var(--viewport-content-max);
    padding-block: clamp(5.25rem, 8.5vw, 7.5rem);
}

.page-hero-copy {
    width: min(100%, 48rem);
}

.page-title,
.page-hero-copy > .page-title {
    max-width: 15ch;
    font-size: var(--viewport-h1);
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.page-lead {
    max-width: 42rem;
    font-size: var(--viewport-lead);
    line-height: 1.72;
}

.section {
    padding-block: var(--viewport-section-y);
}

.section-head,
.about-stage-heading,
.faq-library-heading {
    max-width: var(--viewport-reading-max);
    margin-bottom: clamp(1.85rem, 3.4vw, 3rem);
}

.section-title,
.section-head > h2,
.about-stage-heading > h2,
.faq-library-heading > h2 {
    font-size: var(--viewport-h2);
    line-height: 1.12;
    text-wrap: balance;
}

.section-description,
.section-head > p,
.about-stage-heading > p,
.faq-library-heading > p,
.rich-content {
    font-size: var(--viewport-copy);
}

.card-grid,
.features-grid,
.gallery-grid,
.about-values-grid,
.contact-layout,
.project-story-grid {
    gap: var(--viewport-grid-gap);
}

.card-body,
.article-surface,
.contact-card,
.faq-item,
.faq-item-premium {
    font-size: var(--viewport-copy);
}

.card-body {
    padding: var(--viewport-card-pad);
}

.card-title,
.content-card h3,
.content-card h2 {
    font-size: var(--viewport-h3);
}

.button,
.header-call,
.mobile-call,
.floating-action {
    min-height: max(2.75rem, var(--viewport-control-height));
}

/* Homepage: neutralize viewport-dependent overgrowth at normal 100% zoom. */
.home-page {
    font-size: 1rem;
}

.home-page main {
    min-width: 0;
}

.home-page main > section:not(#home) {
    padding-block: var(--viewport-section-y) !important;
}

.home-page main > section:nth-of-type(2) {
    padding-block: var(--viewport-section-y-compact) !important;
}

.home-page #home {
    min-height: max(42rem, 100svh) !important;
    padding-block: clamp(8rem, 13vh, 10.5rem) clamp(4.5rem, 8vh, 6.5rem) !important;
}

.home-page #home > .max-w-7xl,
.home-page main > section > .max-w-7xl,
.home-page main > section > .max-w-6xl,
.home-page main > section > div.max-w-7xl {
    padding-inline: 0 !important;
}

.home-page #home h1 {
    max-width: 13ch;
    font-size: var(--viewport-h1) !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.home-page #home p {
    max-width: 40rem;
    font-size: var(--viewport-lead) !important;
    line-height: 1.68;
}

.home-page :is(#about, #services, #portfolio, #process, #testimonials, #faq, #contact) h3,
.home-page #process h3 {
    font-size: var(--viewport-h2) !important;
    line-height: 1.13 !important;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.home-page :is(#about, #services, #portfolio, #process, #testimonials, #faq, #contact) h4,
.home-page :is(#services, #portfolio, #process) article h3 {
    font-size: var(--viewport-h3) !important;
    line-height: 1.3 !important;
}

.home-page :is(#about, #services, #portfolio, #process, #testimonials, #faq, #contact) p,
.home-page :is(#about, #services, #portfolio, #process, #testimonials, #faq, #contact) li {
    font-size: var(--viewport-copy) !important;
}

.home-page :is(a, button, input, textarea, select) {
    font-size: max(1rem, 16px);
}

.home-page #services .grid,
.home-page #portfolio .grid,
.home-page #contact .grid {
    gap: var(--viewport-grid-gap) !important;
}

.home-page #about .about-slider-container {
    width: min(100%, 34rem);
    min-height: clamp(25rem, 39vw, 34rem);
    margin-inline: auto;
}

.home-page #portfolio img {
    height: clamp(13.5rem, 21vw, 17rem) !important;
}

.home-page #testimonials .testimonial-card,
.home-page #faq details,
.home-page #contact form,
.home-page #contact .contact-info-card {
    font-size: var(--viewport-copy);
}

/* Wide displays are capped rather than enlarged indefinitely. */
@media (min-width: 90rem) {
    :root {
        --viewport-content-max: 80rem;
        --viewport-gutter: 2.75rem;
    }

    .page-hero {
        min-height: 40rem;
    }
}

@media (max-width: 67.5rem) {
    :root {
        --viewport-content-max: 72rem;
        --viewport-gutter: clamp(1rem, 3vw, 1.75rem);
        --viewport-section-y: clamp(3.5rem, 7vw, 5rem);
    }

    .page-hero {
        min-height: clamp(30rem, 66svh, 38rem);
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page #home {
        min-height: max(40rem, 92svh) !important;
    }
}

@media (max-width: 47.5rem) {
    :root {
        --viewport-gutter: clamp(.875rem, 4.25vw, 1.25rem);
        --viewport-section-y: clamp(3rem, 11vw, 4rem);
        --viewport-section-y-compact: clamp(2.25rem, 8vw, 3rem);
        --viewport-grid-gap: clamp(.875rem, 3.5vw, 1.125rem);
        --viewport-card-pad: clamp(1rem, 4vw, 1.2rem);
        --viewport-h1: clamp(2.15rem, 10.6vw, 3.35rem);
        --viewport-h2: clamp(1.75rem, 8vw, 2.55rem);
        --viewport-h3: clamp(1.125rem, 4.8vw, 1.35rem);
        --viewport-copy: 1rem;
        --viewport-lead: clamp(1.025rem, 4.2vw, 1.125rem);
        --viewport-control-height: 2.875rem;
    }

    .site-shell-premium {
        padding-inline: 0;
    }

    .page-hero {
        min-height: max(32rem, 72svh);
    }

    .page-hero-content {
        padding-block: clamp(4.75rem, 17vw, 6rem) clamp(3.5rem, 12vw, 4.75rem);
    }

    .page-title,
    .page-hero-copy > .page-title {
        max-width: 18ch;
    }

    .hero-actions,
    .cta-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .hero-actions .button,
    .cta-actions .button {
        width: 100%;
    }

    .card-grid,
    .features-grid,
    .gallery-grid,
    .about-values-grid,
    .project-story-grid {
        grid-template-columns: 1fr;
    }

    .home-page #home {
        min-height: max(42rem, 100svh) !important;
        padding-block: clamp(7.5rem, 24vw, 9rem) clamp(3.5rem, 12vw, 5rem) !important;
    }

    .home-page #home h1 {
        max-width: 15ch;
    }

    .home-page #home .flex.flex-col.sm\:flex-row {
        width: 100%;
    }

    .home-page #home .flex.flex-col.sm\:flex-row > a {
        width: 100%;
        min-height: 3rem;
    }

    .home-page main > section:not(#home) {
        padding-block: var(--viewport-section-y) !important;
    }

    .home-page #about .about-slider-container {
        min-height: clamp(23rem, 112vw, 31rem);
    }

    .home-page #portfolio img {
        height: clamp(13rem, 62vw, 17rem) !important;
    }
}

@media (max-width: 24.375rem) {
    :root {
        --viewport-gutter: .875rem;
        --viewport-h1: clamp(2rem, 10.8vw, 2.65rem);
        --viewport-h2: clamp(1.6rem, 8.3vw, 2.15rem);
    }

    .page-badge,
    .section-kicker,
    .breadcrumbs {
        font-size: .8125rem;
    }

    .button {
        padding-inline: 1rem;
    }
}

@media (max-height: 44rem) and (min-width: 48rem) {
    .page-hero {
        min-height: 32rem;
    }

    .page-hero-content {
        padding-block: 4.75rem 3.5rem;
    }

    .home-page #home {
        min-height: 40rem !important;
        padding-block: 7.5rem 4rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* V15 final viewport invariant: no page or transformed child may make the
   document wider than the visual viewport at the browser's default 100% zoom. */
html,
body.site-body {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body.site-body {
        overflow-x: hidden;
    }
}

html[dir="rtl"] {
    direction: ltr;
}

html[dir="rtl"] body.site-body {
    direction: rtl;
}

/* ========================================================================== 
   V16 ADAPTIVE INNER-PAGE HERO COMPOSITION
   Homepage is intentionally excluded. JavaScript measures the visible semantic
   blocks and distributes the unused viewport height through these CSS variables.
   The CSS values below are a complete no-JavaScript fallback.
   ========================================================================== */

@media (max-width: 56.25rem), (hover: none) and (pointer: coarse) {
    .page-hero:not(.error-hero) {
        --page-hero-content-min-height: calc(100svh - var(--runtime-header-height, 4.5rem));
        --page-hero-padding-start: clamp(.75rem, 2svh, 1.625rem);
        --page-hero-padding-end: 0px;
        --hero-breadcrumb-copy-gap: clamp(2.5rem, 9svh, 7rem);
        --hero-badge-title-gap: clamp(2rem, 8svh, 6rem);
        --hero-title-lead-gap: clamp(1.25rem, 4svh, 3rem);
        --hero-lead-actions-gap: clamp(2.5rem, 10svh, 8rem);
        --hero-copy-bottom-gap: clamp(2rem, 8svh, 6rem);
        min-block-size: var(--page-hero-content-min-height) !important;
        block-size: auto !important;
        overflow: clip;
        isolation: isolate;
        contain: paint;
    }

    @supports not (overflow: clip) {
        .page-hero:not(.error-hero) {
            overflow: hidden;
        }
    }

    .page-hero:not(.error-hero) .page-hero-content {
        box-sizing: border-box;
        min-block-size: var(--page-hero-content-min-height) !important;
        block-size: auto !important;
        padding-block: var(--page-hero-padding-start) var(--page-hero-padding-end) !important;
        justify-content: flex-start !important;
    }

    .page-hero:not(.error-hero) .page-hero-content > .breadcrumbs {
        flex: 0 0 auto;
        inline-size: fit-content;
        max-inline-size: 100%;
        min-block-size: 2.35rem;
        margin: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        overscroll-behavior-inline: contain;
        color: #e2e8f0;
        background: rgba(2, 6, 23, .5);
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .page-hero:not(.error-hero) .page-hero-copy,
    .page-hero:not(.error-hero).is-content-constrained .page-hero-copy {
        align-self: stretch;
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        min-inline-size: 0;
        margin-block-start: var(--hero-breadcrumb-copy-gap) !important;
        margin-block-end: var(--hero-copy-bottom-gap) !important;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        justify-items: start;
    }

    html[dir="rtl"] .page-hero:not(.error-hero) .page-hero-copy {
        justify-items: end;
    }

    .page-hero:not(.error-hero) .page-hero-copy > .page-badge {
        max-inline-size: 100%;
        margin: 0 0 var(--hero-badge-title-gap) !important;
        white-space: normal;
    }

    .page-hero:not(.error-hero) .page-hero-copy > .page-title {
        inline-size: auto;
        max-inline-size: min(100%, 17ch) !important;
        margin: 0 !important;
        line-height: 1.06;
        text-wrap: balance;
        overflow-wrap: normal;
        word-break: normal;
    }

    html[dir="rtl"] .page-hero:not(.error-hero) .page-hero-copy > .page-title {
        max-inline-size: min(100%, 19ch) !important;
    }

    .page-hero:not(.error-hero) .page-hero-copy > .page-lead {
        inline-size: auto;
        max-inline-size: min(100%, 43ch) !important;
        margin: var(--hero-title-lead-gap) 0 0 !important;
        color: #f1f5f9;
        line-height: 1.72;
        text-wrap: pretty;
        overflow-wrap: break-word;
    }

    .page-hero:not(.error-hero) .page-hero-copy > .hero-actions {
        inline-size: 100%;
        max-inline-size: 100%;
        margin: var(--hero-lead-actions-gap) 0 0 !important;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(.65rem, 2svh, .9rem);
    }

    .page-hero:not(.error-hero) .page-hero-copy > .hero-actions:empty {
        display: none;
        margin: 0 !important;
    }

    .page-hero:not(.error-hero) .page-hero-copy > .hero-actions .button {
        inline-size: 100%;
        min-block-size: 3rem;
        justify-content: center;
    }

    /* Expensive decorative blur/noise does not improve comprehension on a small
       screen. Removing it reduces mobile paint time while preserving the image,
       contrast overlay, brand gradient and all database-driven content. */
    .page-hero:not(.error-hero)::after,
    .page-hero:not(.error-hero) .page-hero-noise,
    .page-hero:not(.error-hero) .page-hero-orb,
    .page-hero:not(.error-hero) .page-hero-content::before {
        display: none !important;
    }

    .page-hero:not(.error-hero) .page-hero-image {
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}

@media (max-width: 24.375rem) {
    .page-hero:not(.error-hero) .page-hero-copy > .page-title {
        max-inline-size: 100% !important;
        font-size: clamp(1.95rem, 10.5vw, 2.65rem);
    }

    .page-hero:not(.error-hero) .page-hero-copy > .page-lead {
        font-size: 1rem;
        line-height: 1.65;
    }
}

@media (max-height: 34rem) and (max-width: 56.25rem) {
    .page-hero:not(.error-hero) {
        --hero-breadcrumb-copy-gap: 1rem;
        --hero-badge-title-gap: .85rem;
        --hero-title-lead-gap: .75rem;
        --hero-lead-actions-gap: 1rem;
        --hero-copy-bottom-gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero:not(.error-hero),
    .page-hero:not(.error-hero) * {
        scroll-behavior: auto;
    }
}