/* =========================================================
   LAYOUT SYSTEM
========================================================= */

/* ---------- Main Containers ---------- */

.container{

    width:min(1240px,calc(100% - 48px));

    margin:auto;

}

.container-sm{

    width:min(900px,calc(100% - 48px));

    margin:auto;

}

.container-lg{

    width:min(1400px,calc(100% - 48px));

    margin:auto;

}


/* =========================================================
   SECTIONS
========================================================= */

.section{

    position:relative;

    padding:120px 0;

}

.section-sm{

    padding:80px 0;

}

.section-lg{

    padding:150px 0;

}

.section-dark{

    background:#0b1526;

}


/* =========================================================
   HERO
========================================================= */

.page-hero,

.service-hero,

.subpage-hero{

    position:relative;

    overflow:hidden;

    padding-top:165px;

    padding-bottom:110px;

    min-height:650px;

    display:flex;

    align-items:center;

}

.hero-grid,

.service-hero-grid,

.subpage-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:80px;

    align-items:center;

}


/* =========================================================
   SPLIT LAYOUTS
========================================================= */

.split-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.values-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}


/* =========================================================
   FEATURE GRID
========================================================= */

.feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

    margin-top:70px;

}


/* =========================================================
   PROCESS GRID
========================================================= */

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:26px;

    margin-top:70px;

}


/* =========================================================
   PILLARS
========================================================= */

.pillar-row{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}


/* =========================================================
   CTA
========================================================= */

.cta-section{

    padding:120px 0;

}

.cta-section.compact{

    padding:90px 0;

}


/* =========================================================
   CENTER
========================================================= */

.centered{

    text-align:center;

}

.centered>*{

    margin-left:auto;

    margin-right:auto;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

.hero-grid,

.service-hero-grid,

.subpage-grid,

.split-grid,

.story-grid{

grid-template-columns:1fr;

gap:55px;

}

.values-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:repeat(2,1fr);

}

.feature-grid{

grid-template-columns:repeat(2,1fr);

}

.pillar-row{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:768px){

.page-hero,

.service-hero,

.subpage-hero{

padding-top:135px;

padding-bottom:80px;

min-height:auto;

}

.section{

padding:80px 0;

}

.process-grid,

.feature-grid,

.pillar-row{

grid-template-columns:1fr;

}

.container,

.container-sm,

.container-lg{

width:calc(100% - 30px);

}

}