... */
#placement .split{
display: flex; /* safe even if already flex */
align-items: center;
gap: 48px;
}
/* Swap columns: media_box goes to the right, text stays on the left */
#placement .split > .media_box{
order: 2;
}
#placement .split > div:not(.media_box){
order: 1;
}
/* Optional sizing balance */
#placement .split > .media_box{
flex: 0 0 44%;
}
#placement .split > div:not(.media_box){
flex: 1;
}
}
/* =========================
Services page width and alignment normalization
========================= */
:root{
--content: 1100px; /* readable editorial width */
}
/* 1) Services header should behave like other page intros */
.page_header .container{
max-width: var(--content);
}
/* Center the header stack and its actions */
.page_header{
text-align: center;
}
.page_header .page_subtitle{
margin-left: auto;
margin-right: auto;
}
.page_header .hero_actions{
justify-content: center;
}
/* 2) Placement section grid, consistent max width */
#placement .container{
max-width: var(--container);
}
#placement .placement_intro{
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(18px, 4vw, 52px);
align-items: center;
}
/* Keep the placement text column at readable width */
#placement .placement_intro > div:last-child{
max-width: var(--content);
}
/* Center only the action row, do not change body copy alignment */
#placement .mini_actions{
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 18px;
margin-bottom: 10px;
}
/* 3) Match and Process section title blocks should be centered and width limited */
.section_title_center{
text-align: center;
max-width: var(--content);
margin-left: auto;
margin-right: auto;
}
.section_title_center p{
margin-left: auto;
margin-right: auto;
}
/* 4) Feature list should not float narrow */
.feature_list{
max-width: var(--content);
margin-left: auto;
margin-right: auto;
margin-top: 24px;
display: grid;
gap: 18px;
}
/* 5) Consulting banner panel should match the rest of your card language */
.banner_panel{
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: clamp(22px, 4vw, 40px);
max-width: var(--content);
margin-left: auto;
margin-right: auto;
}
.banner_panel .hero_actions{
justify-content: center;
}
/* 6) Bottom CTA band container, so it aligns with the site grid */
.services_cta{
max-width: var(--container);
}
/* Responsive: stack placement on smaller screens */
@media (max-width: 900px){
#placement .placement_intro{
grid-template-columns: 1fr;
}
}
:root {
--editorial: 1100px;
}
/* Shared editorial container */
.editorial {
max-width: var(--editorial);
margin-left: auto;
margin-right: auto;
}
#placement {
text-align: left;
}
#placement .hero_actions,
#placement .mini_actions {
justify-content: flex-start;
}
.contact_calendly_inner {
padding-left: var(--mobile-gutter);
padding-right: var(--mobile-gutter);
}
@media (max-width: 900px){
/* 1. Stack contact info ABOVE the form */
.contact_grid{
display: flex;
flex-direction: column;
gap: 24px;
}
.contact_info{
order: 1;
margin-top: 0;
text-align: center;
}
.contact_form_wrap{
order: 2;
}
/* 2. Center the “Send us a message” text block */
.contact_info h2,
.contact_info p{
margin-left: auto;
margin-right: auto;
max-width: 52ch;
}
.contact_info .kicker{
justify-content: center;
display: inline-block;
}
/* 3. Make the form FULL width on mobile */
.form_card{
width: 100%;
max-width: none;
border-radius: 0;
}
/* Optional but recommended: remove card-in-card feel */
@media (max-width: 900px){
.contact_form_wrap{
padding-left: var(--mobile-gutter);
padding-right: var(--mobile-gutter);
}
}
}
@media (max-width: 900px){
/* Make the form area truly full width */
.contact_grid,
.contact_form_wrap,
.form_card{
width: 100%;
max-width: none;
border-radius: var(--radius-lg);
}
/* One column form fields on mobile */
.form_grid{
grid-template-columns: 1fr;
}
/* If any fields still force columns, hard reset */
.field{
grid-column: 1 / -1;
}
/* Prevent select and inputs from visually clipping */
.field input,
.field select,
.field textarea{
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 900px){
/* Center the full-width form visually */
.contact_form_wrap{
display: flex;
justify-content: center;
}
.form_card{
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 900px){
/* Let the form use more horizontal space */
.form_card{
max-width: 100%;
padding-left: clamp(16px, 4vw, 28px);
padding-right: clamp(16px, 4vw, 28px);
}
/* Radios: stack instead of squeezing */
.radio_grid{
grid-template-columns: 1fr;
gap: 12px;
}
/* Make labels wrap nicely */
.radio_item span{
display: block;
line-height: 1.3;
}
}
/* Contact form radios: force dot + text on one row */
#contact-form fieldset.field .radio_grid{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
#contact-form fieldset.field .radio_item{
display: flex !important; /* beats .field label { display:block } */
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
}
/* Undo text input styling for radios */
#contact-form fieldset.field .radio_item input[type="radio"]{
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
box-shadow: none;
flex: 0 0 auto;
margin: 4px 0 0 0;
accent-color: var(--sage);
}
/* Let the label text fill the row and wrap */
#contact-form fieldset.field .radio_item span{
display: block;
min-width: 0;
line-height: 1.3;
}