/* ==========================================================================
   Layout
   --------------------------------------------------------------------------
   Shared structural grid/scaffolding classes reused across multiple pages.
   Reusable UI widgets (buttons, cards, badges, header, footer, glass
   surfaces, carousel) live in components.css. Page-specific content
   sections live in pages.css. Responsive overrides for the classes below
   live in responsive.css.
   ========================================================================== */

/* Shared page container */
.container{

    width:100%;

    max-width:1120px;

    margin:0 auto;

    padding:0 1.5rem;
}

section{

    padding:4rem 0;
}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.75rem;}

/* Contact page two-column layout grid.
   Collapses to a single column at tablet widths — see responsive.css. */
.contact-grid{

    display:grid;

    grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);

    gap:3rem;

    align-items:start;
}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem;}

/* Heading block used above a section's main content: eyebrow + title +
   optional intro paragraph. Constrained width keeps the intro readable. */
.section-header{

    max-width:640px;

    margin-bottom:2.5rem;
}

.section-header p{

    font-size:1.05rem;

    line-height:1.7;
}