. Our
CSS targets the user class (.hero, .wrap, .content, .grid,
.section-head, .content-inner, etc.) so the wp-block-group
class is harmless — BUT we must neutralize Gutenberg's default
layout/margin rules that would otherwise interfere.
============================================================ */
/* wp:group emits an extra wp-block-group class on the element AND wraps
its children in
. That
inner container breaks our CSS hierarchies (e.g. `.hero .content`
no longer matches `.content` as a direct child of `.hero`).
`display: contents` makes the wrapper layout-transparent — its
children behave as if they were direct children of the wp:group.
This is the cleanest way to use wp:group without rewriting our CSS. */
.wp-block-group__inner-container { display: contents; }
/* Don't reset margin/padding on .wp-block-group globally — that would
kill the `margin: 0 auto` centering on .hero .content / .section-head /
.content-inner / etc. */
/* wp:columns base — neutralize core flex so our grid layouts win */
.wp-block-columns.split > .wp-block-column,
.wp-block-columns.grid > .wp-block-column,
.wp-block-columns.stats > .wp-block-column { flex: none; max-width: none; width: auto; margin: 0; padding: 0; }
/* Inside .feature-dark / .downtime / .heritage, .grid is 2-col 1fr 1fr.
When rendered as wp:columns, that .grid div has an extra wp-block-columns class
so the rules above + our existing .feature-dark .grid rule still match. */
.feature-dark .wp-block-columns.grid,
.downtime .wp-block-columns.grid,
.heritage .wp-block-columns.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 900px) {
.feature-dark .wp-block-columns.grid,
.downtime .wp-block-columns.grid,
.heritage .wp-block-columns.grid { grid-template-columns: 1fr; gap: 40px; }
}
/* Native wp:list inside our themed sections should not display the default disc bullet —
our .chk spans handle the bullet styling. */
.feature-dark .wp-block-list,
.downtime .wp-block-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.feature-dark .wp-block-list li,
.downtime .wp-block-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; }
/* wp:buttons "hero-ctas" inside .hero — match the same flex layout the design uses */
.hero .wp-block-buttons.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* CTA band buttons should be centered */
.cta-band .wp-block-buttons.ctas { justify-content: center; }
/* ========== Native-block adjustments for non-home pages ========== */
/* Page-header eyebrow is now a wp:paragraph; scope body-copy rule to non-eyebrow paragraphs only */
.page-header p:not(.eyebrow) { font-size: 1.05rem; color: rgba(255,255,255,.78); max-width: 720px; margin: 12px auto 0; }
.page-header .eyebrow { margin: 0 0 12px; }
.page-header h1 { margin: 0 0 12px; }
/* Service-grid column-count variants (replaces inline grid-template-columns) */
.service-grid.service-grid-1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
/* Coverage section without the map column — center the text + stats */
.coverage .coverage-content { max-width: 760px; margin: 0 auto; text-align: center; }
.coverage .coverage-content .copy { max-width: 60ch; margin-left: auto; margin-right: auto; }
.coverage .coverage-content .coverage-stats { justify-content: center; }
/* ========== Our Team ========== */
section.team { padding: 96px 0; background: #fff; }
.team .section-head { text-align: center; margin-bottom: 48px; }
.team .section-head h2 { margin: 8px 0 0; font-size: clamp(28px, 3vw, 38px); }
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px;
max-width: 1120px;
margin: 0 auto;
}
.team-card { text-align: center; }
.team-photo {
margin: 0 auto 16px;
width: 200px;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--rule);
background: var(--mist);
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-card h3 { font-size: 18px; margin: 0 0 4px; }
.team-card .team-role {
margin: 0;
color: var(--muted);
font-size: 14px;
font-family: var(--font-head);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.service-grid.service-grid-2 { grid-template-columns: repeat(2, 1fr); }
.service-grid.service-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
.service-grid.service-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.service-grid.service-grid-2,
.service-grid.service-grid-3 { grid-template-columns: 1fr; }
}
/* Custom Solutions section background (replaces inline style="background: var(--mist)") */
.custom-solutions-section { background: var(--mist); }
/* Contact section (replaces inline section style + dl/dt/dd markup) */
.contact-section { padding: 80px 0; background: #fff; }
.contact-section .wp-block-columns.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 800px) { .contact-section .wp-block-columns.contact-grid { grid-template-columns: 1fr; } }
.contact-info { background: var(--mist); padding: 32px; border-radius: 8px; }
.contact-info h3 { margin: 8px 0 20px; }
.contact-item { margin-top: 16px; }
.contact-item:first-of-type { margin-top: 0; }
.contact-label { font-weight: 700; color: var(--ink); margin: 0; }
.contact-value { margin: 4px 0 0; }
.contact-value a { color: var(--red); font-weight: 600; }