/**
 * layout.css — Section Wrappers & Page Layout
 * ─────────────────────────────────────────────
 * Controls the structural "shell" of each page section:
 * background colours, padding, inner max-width containers,
 * and multi-column grid wrappers.
 *
 * NOTE: Individual component styles within these sections
 * are in components.css. Keep layout concerns here only.
 *
 * Depends on: variables.css
 */


/* ══════════════════════════════════════
   CINEMATIC STICKY SECTION STACKING
   (Portfolio uses normal relative flow to allow full gallery scrolling)
   ══════════════════════════════════════ */

/* Selective Cinematic Stacking
   (Hero & Our Story use sticky top:0 for cinematic background reveal;
    Portfolio and Contact Form use normal document flow to allow full vertical scrolling) */
.hero-section {
    position: sticky;
    top: 0;
    min-height: 100vh;
    z-index: 1;
}

.portfolio         { position: relative; z-index: 2; }
.about             { position: relative; z-index: 3; height: auto; min-height: auto; }
.contact-section   { position: relative; z-index: 4; }
.hero,
.portfolio,
.about,
.contact-section,
.testimonials {
    scroll-margin-top: 80px;
}


/* ══════════════════════════════════════
   ABOUT
   ══════════════════════════════════════ */

.about {
    background: transparent;
    padding: var(--sec-pad) var(--pad);
}

.about-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(60px, 8vw, 120px);
    align-items: center;
}


/* ══════════════════════════════════════
   SERVICES
   ══════════════════════════════════════ */

.services {
    background: transparent;
    padding: var(--sec-pad) var(--pad);
}

.services-inner {
    max-width: var(--max);
    margin: 0 auto;
}


/* ══════════════════════════════════════
   PORTFOLIO
   ══════════════════════════════════════ */

.portfolio {
    background: transparent;
    padding: var(--sec-pad) var(--pad);
}

.portfolio-inner {
    max-width: var(--max);
    margin: 0 auto;
}


/* ══════════════════════════════════════
   PROCESS
   ══════════════════════════════════════ */

.process {
    background: transparent;
    padding: var(--sec-pad) var(--pad);
}

.process-inner {
    max-width: var(--max);
    margin: 0 auto;
}


/* ══════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════ */

.testimonials {
    background: transparent;
    padding: var(--sec-pad) 0; /* No horizontal padding — full-bleed carousel */
    overflow: hidden;
}

.testimonials-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad); /* Re-apply padding only to the header */
}


/* ══════════════════════════════════════
   THE PIXO STANDARDS
   ══════════════════════════════════════ */

.standards-section {
    background: transparent;
    padding: var(--sec-pad) var(--pad);
}

.standards-inner {
    max-width: var(--max);
    margin: 0 auto;
}


/* ══════════════════════════════════════
   FAQ
   ══════════════════════════════════════ */

.faq {
    background: transparent;
    padding: var(--sec-pad) var(--pad);
}

.faq-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr; /* Sidebar label + accordion list */
    gap: clamp(60px, 8vw, 120px);
    align-items: start;
}


/* ══════════════════════════════════════
   CONTACT
   ══════════════════════════════════════ */

.contact-section {
    position: relative;
    z-index: 4;
    height: auto;
    min-height: auto;
    background: transparent;
    padding: clamp(100px, 11vw, 150px) var(--pad);
}

.contact-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.45fr; /* Contact info + form */
    gap: clamp(60px, 8vw, 120px);
    align-items: start;
}


/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */

footer {
    background: transparent;
    padding: clamp(60px, 8vw, 100px) var(--pad) 40px;
}

.footer-inner {
    max-width: var(--max);
    margin: 0 auto;
}

/* 4-column grid: brand / quick links / services / locations */
.footer-top {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: clamp(40px, 5vw, 70px);
    margin-bottom: 56px;
}