/* ---------- Section 9 - Sandwell stories grid with .styles8 widget ---------- */
.index-modular .page-content > .container:has(div.styles8) {
    background-color: var(--smbc-warmWhite);
}
.index-modular .page-content > .container:has(div.styles8) > .widget-row {
    display: flex;
    padding: 1rem 0 4rem;
    gap: 2rem;
}
.widget-row:has(div.styles8) .editor {
    padding: 1rem 1.5rem 2rem;
    border: 1px solid var(--smbc-lightGrey);
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* ensures image respects rounded corners */
    background: #fff;
}
.widget-row:has(div.styles8) .editor > div:first-child {
    height: 200px;
    overflow: clip;
    margin: -1rem -1.5rem 1rem;
}
.widget-row:has(div.styles8) .editor > div:first-child img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}
.widget-row:has(div.styles8) .editor > h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}
.widget-row:has(div.styles8) .editor > p {
    font-size: 0.875rem;
    margin: 0 0 1rem;
}
.widget-row:has(div.styles8) .editor .button {
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--transparent);
    border-color: var(--transparent);
    border-radius: 0.5rem;
    color: var(--smbc-green);
    text-align: left;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}
.widget-row:has(div.styles8) .editor .button::before {
    background-color: var(--transparent);
    border-color: var(--transparent);
}
.widget-row:has(div.styles8) .editor .button::after {
    content: ">";
    font-size: 1.25rem;
    margin-left: 1rem;
    color: var(--smbc-green);
    transition: transform .2s ease;
}
.widget-row:has(div.styles8) .editor .button:hover::after {
    transform: translateX(6px);
}
/* ---------- Section 6 - Current roles with .styles6 widget ---------- */
/* Layout */
.widget-width:has(div.styles6) .editor {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
}
/* Heading row */
.widget-width:has(div.styles6) .editor > h2,
.widget-width:has(div.styles6) .editor > p:first-of-type {
    margin: 0;
}
.widget-width:has(div.styles6) .editor > h2 {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.5rem;
}
.widget-width:has(div.styles6) .editor > p:first-of-type {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 0.875rem;
}
/* Cards */
.widget-width:has(div.styles6) .editor > div {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title"
        "salary";
    gap: 0rem 1rem;
    width: 100%;
    background: #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}
.widget-width:has(div.styles6) .editor > div:hover {
    transform: translateY(-2px);
    background: #f7f8fa;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.widget-width:has(div.styles6) .editor > div::after {
    content: ">";
    font-size: 2rem;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--Green);
    color: var(--smbc-darkGreen);
    transition: transform .2s ease;
}
.widget-width:has(div.styles6) .editor > div:hover::after {
    transform: translateX(4px);
}
.widget-width:has(div.styles6) .editor > div h4 {
    grid-area: title;
    margin: 0;
    font-size: 1rem;
}
.widget-width:has(div.styles6) .editor > div p {
    grid-area: salary;
    margin: 0;
    font-size: 1rem;
}
div.styles15 {

}
/* ---------- Primary and secondary CTA buttons ---------- */
.page-content > .container:has(div.styles16) > .widget-row {
    display: flex;
    padding: 0;
    gap: 1rem;
    justify-content: stretch;
}
.widget-row:has(div.styles16) .widget-content {
    padding: 3rem 0 5rem;
}
.widget-row:has(div.styles16) .widget__heading {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}
.widget-row:has(div.styles16) .editor > p:has(> a + a) {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.widget-row:has(div.styles16) a.button, 
.widget-row:has(div.styles16) a.button:visited {
    padding: .375rem 1.125rem;
    margin: 0;
}
.widget-row:has(div.styles16) a {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--white);
    display: inline-flex;
    align-items: center;
}
.widget-row:has(div.styles16) a:hover {
    color: var(--smbc-darkGreen);
}
.widget-row:has(div.styles16) a::after {
    content: ">";
    font-size: 1.25rem;
    margin-left: 1rem;
    color: var(--white);
    transition: transform .2s ease;
}
.widget-row:has(div.styles16) a:hover::after {
    transform: translateX(6px);
    color: var(--smbc-darkGreen);
}
/* ---------- Section 11 - Contact CTA section with .styles10 widget ---------- */
.page-content > .container:has(div.styles11) {
    background-color: var(--smbc-green);
}
.page-content > .container:has(div.styles11) > .widget-row {
    display: flex;
    padding: 2rem 0;
    gap: 1rem;
    align-items: stretch
}
.page-content > .container .widget-width:has(div.styles11) .editor {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon heading"
        "icon body";
    gap: 0.5rem 1rem;
    align-items: center;
}

/* Icon */
.widget-width:has(div.styles11) .editor > div:first-child {
    grid-area: icon;
}
.widget-width:has(div.styles11) .editor > div:first-child img {
    width: 100px;
    height: 100px;
    margin-right: 2rem;
    display: block;
}
/* Heading */
.widget-width:has(div.styles11) .editor > h2 {
    grid-area: heading;
    margin: 0;
    color: var(--white);
    font-size: 1.5rem;
}
/* Body text */
.widget-width:has(div.styles11) .editor > p {
    grid-area: body;
    margin: 0;
    color: var(--white);
}
.widget-width:has(div.styles11) .editor > p a {
    color: var(--white);
}
.widget-row:has(div.styles11) .widget-width:last-child .editor {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}
.widget-row:has(div.styles11) .widget-width:last-child .editor .button {
    color: var(--smbc-darkGreen);
}
.widget-row:has(div.styles11) .widget-width:last-child .editor .button:hover {
    color: var(--white);
}
.widget-row:has(div.styles11) .widget-width:last-child .editor a::after {
    content: ">";
    font-size: 1.25rem;
    margin-left: 1rem;
    color: var(--smbc-darkGreen);
    transition: transform .2s ease;
}
.widget-row:has(div.styles11) .widget-width:last-child .editor a:hover::after {
    transform: translateX(6px);
    color: var(--white);
}
div.styles14 {
}
/* ---------- CTA on simple section ---------- */
.page-content:has(.styles29) > .container > .widget-row:has(div.styles30) {
    display: flex;
    padding: 4rem 0;
}
.page-content:has(.styles29) .widget-row:has(div.styles30) > .widget-width {
    display: flex;
}
.page-content:has(.styles29) .widget-row:has(div.styles30) > .widget-width .widget, 
.page-content:has(.styles29) .widget-row:has(div.styles30) > .widget-width .widget-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.page-content:has(.styles29) .widget-width:has(div.styles30) .widget__heading {
    text-align: center;
}
.page-content:has(.styles29) .widget-width:has(div.styles30) .editor {
    text-align: center;
}
.page-content:has(.styles29) .widget-width:has(div.styles30) .editor a {
    margin: 0;
}
.page-content:has(.styles29) .widget-width:has(div.styles30) .editor a::after {
    content: ">";
    font-size: 1.25rem;
    margin-left: 1rem;
    color: var(--white);
    transition: transform .2s ease;
}
.page-content:has(.styles29) .widget-width:has(div.styles30) .editor a:hover::after {
    transform: translateX(6px);
    color: var(--smbc-darkGreen);
}
/* ---------- Section 10 - Discover Sandwell section with .styles10 widget ---------- */
.page-content > .container:has(div.styles3) > .widget-row {
    display: flex;
    padding: 0;
    gap: 3rem;
    justify-content: stretch;
}
.widget-row:has(div.styles3) .widget-content {
    padding: 3rem 0;
}
.widget-row:has(div.styles3) .widget__heading {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}
.widget-row:has(div.styles3) .editor > p {
    margin: 0 0 1rem;
}
.widget-row:has(div.styles3) a.button, 
.widget-row:has(div.styles3) a.button:visited {
    padding: .375rem 1.125rem;
}
.widget-row:has(div.styles3) a {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--white);
    display: inline-flex;
    align-items: center;
}
.widget-row:has(div.styles3) a:hover {
    color: var(--smbc-darkGreen);
}
.widget-row:has(div.styles3) a::after {
    content: ">";
    font-size: 1.25rem;
    margin-left: 1rem;
    color: var(--white);
    transition: transform .2s ease;
}
.widget-row:has(div.styles3) a:hover::after {
    transform: translateX(6px);
    color: var(--smbc-darkGreen);
}
.widget-row:has(div.styles3) .widget-image {
    height: 300px;
    overflow: clip;
}
.widget-row:has(div.styles3) .widget-image .image {
    border-radius: 0rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}
.widget-row:has(div.styles10) a.button, 
.widget-row:has(div.styles10) a.button:visited {
    padding: .375rem 1.125rem;
}
.widget-row:has(div.styles10) a {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--white);
    display: inline-flex;
    align-items: center;
}
.widget-row:has(div.styles10) a:hover {
    color: var(--smbc-darkGreen);
}
.widget-row:has(div.styles10) a::after {
    content: ">";
    font-size: 1.25rem;
    margin-left: 1rem;
    color: var(--white);
    transition: transform .2s ease;
}
.widget-row:has(div.styles10) a:hover::after {
    transform: translateX(6px);
    color: var(--smbc-darkGreen);
}
.page-content:has(div.styles29) {
    margin: 0;
}
.page-content > .container:has(div.styles29) {
    padding: 0;
}
.page-content > .container:has(div.styles29) > .widget-row {
    max-width: 100%;
    padding: 0;
}
.page-content > .container:has(div.styles29) .image {
    border-radius: 0;
}
/* ---------- Section 4 - Future header section with .styles4 widget ---------- */
.index-modular .page-content > .container:has(div.styles4) {
    background-color: var(--smbc-lightGreen);
}
.index-modular .page-content > .container:has(div.styles4) > .widget-row {
    display: flex;
    padding-bottom: 0;
}
.widget-width:has(div.styles4) .widget__heading {
    text-align: center;
}
/* ---------- Section 8 - Sandwell stories header section with .styles9 widget ---------- */
.index-modular .page-content > .container:has(div.styles9) {
    background-color: var(--smbc-warmWhite);
}
.index-modular .page-content > .container:has(div.styles9) > .widget-row {
    display: flex;
    padding-bottom: 0;
}
.widget-width:has(div.styles9) .widget__heading {
    text-align: left;
}
/* ---------- Section 1 - Hero with .styles2 widget ---------- */
div.styles2 {

}
.index-modular .page-content > .container:has(div.styles2) {
    background-color: var(--white);
}
.index-modular .page-content > .container:has(div.styles2) .widget-row {
    display: flex;
    padding: 0;
}
.index-modular .page-content > .container:has(div.styles2) .widget--carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
/* position the content relative to a centred 1248px zone */
@media (min-width: 1281px) {
    .container:has(div.styles2) .widget--carousel .carousel__item .carousel__content {
        left: calc(50% - 624px); /* start of the invisible 1248px container */
    }
    .container:has(div.styles2) .carousel .flickity-buttons-wrapper .flickity-prev-next-button.next {
        right: 5rem;
    }
    .container:has(div.styles2) .carousel .flickity-buttons-wrapper .flickity-prev-next-button.previous {
        left: 5rem;
    }
}
.index-modular .container:has(div.styles2) .widget-carousel .carousel__item .slide-background {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 30rem;
}
.container:has(div.styles2) .widget--carousel .carousel__item .carousel__content {
    display: none;
    border-radius: 0rem;
    background-color: var(--transparent);
    max-width: 1280px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
/* ---------- Section 2 - Impact grid with .styles1 widget ---------- */
.index-modular .page-content > .container:has(div.styles1) {
    background-color: var(--smbc-warmWhite);
    border-bottom: 1px solid var(--smbc-lightGrey);
}
.index-modular .page-content > .container:has(div.styles1) > .widget-row {
    display: flex;
    padding: 1.5rem 0;
}
.widget-row:has(div.styles1) .widget-width:not(:last-child) {
    border-right: 1px solid var(--smbc-green);
}
.widget-width:has(div.styles1) .editor {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-areas:
        "icon heading"
        "icon text";
    gap: 0.25rem 1rem;
    background: transparent; /* light green */
    padding: 0 1rem;
    align-items: start;
}
.widget-width:has(div.styles1) .editor > div:first-child {
    grid-area: icon;
    align-self: center;
    justify-self: center;
}
.widget-width:has(div.styles1) .editor > div:first-child img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.widget-width:has(div.styles1) .editor > h4 {
    grid-area: heading;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}
.widget-width:has(div.styles1) .editor > p {
    grid-area: text;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.3;
    
}
/* ---------- Section 5 - Future grid with .styles5 widget ---------- */
.index-modular .page-content > .container:has(div.styles5) {
    background-color: var(--smbc-lightGreen);
}
.index-modular .page-content > .container:has(div.styles5) > .widget-row {
    display: flex;
    padding: 1rem 0 4rem;
    gap: 1rem;
}
.widget-width:has(div.styles5) .editor {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    background: var(--white);
    border-radius: 0.75rem;
    padding: 1.5rem;
    justify-content: center;
    align-items: center;
}
.widget-width:has(div.styles5) .editor > p:first-child {
    margin: 0;
    padding: 0;
}
.widget-width:has(div.styles5) .editor > div {
    /*display: none;*/
}
.widget-width:has(div.styles5) .editor > div img {
    margin: 0;
    display: block;
    width: 40px;
    height: 40px;
}
.widget-width:has(div.styles5) .editor > h4 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
}
.widget-width:has(div.styles5) .editor > p {
    margin: 0;
    text-align: center;
    font-size: var(--text-sm)
}
/* ---------- Section 5 - Future grid with .styles5 widget ---------- */
.index-modular .page-content > .container:has(div.styles12) {
    background-color: var(--smbc-lightGreen);
}
.index-modular .page-content > .container:has(div.styles12) > .widget-row {
    display: flex;
    padding: 1rem 0 4rem;
    gap: 1rem;
    align-items: stretch
}
.widget-row:has(div.styles12) > .widget-width {
    display: flex;
}
.widget-row:has(div.styles12) > .widget-width .widget, 
.widget-row:has(div.styles12) > .widget-width .widget-content {
    display: flex;
    width: 100%;
}
.widget-row:has(div.styles12) > .widget-width .editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    background: var(--white);
    border-radius: 0.75rem;
    padding: 1.5rem 1.5rem 2rem;
    justify-content: center;
    align-items: center;
}
.widget-width:has(div.styles12) .editor > h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 400;
}
.widget-width:has(div.styles12) .editor > p {
    margin: 0;
    text-align: center;
}
.widget-width:has(div.styles12) .editor > p:last-child {
    margin-top: auto;
}
.widget-row:has(div.styles12) a.button, 
.widget-row:has(div.styles12) a.button:visited {
    padding: .375rem 1.125rem;
}
.widget-row:has(div.styles12) a {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--white);
    display: inline-flex;
    align-items: center;
}
.widget-row:has(div.styles12) a:hover {
    color: var(--smbc-darkGreen);
}
.widget-row:has(div.styles12) a::after {
    content: ">";
    font-size: 1.25rem;
    margin-left: 1rem;
    color: var(--white);
    transition: transform .2s ease;
}
.widget-row:has(div.styles12) a:hover::after {
    transform: translateX(6px);
    color: var(--smbc-darkGreen);
}
/* ---------- Section # - stacked cards ---------- */
/* Layout */
.index-modular .page-content > .container:has(div.styles13) {
    background-color: var(--smbc-lightGreen);
}
.widget-row:has(div.styles13) {
    display: flex;
    justify-content: center;
}
.widget-width:has(div.styles13) .editor {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title cta";
    gap: 0rem 1rem;
    width: 100%;
    background: var(--white);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    align-items: center;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}
.widget-width:has(div.styles13) .editor:hover {
    transform: translateY(-2px);
    background: #f7f8fa;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.widget-width:has(div.styles13) .editor h3 {
    grid-area: title;
    margin: 0;
    font-size: var(--text-lg);
}
.widget-width:has(div.styles13) .editor h3 a, .widget-width:has(div.styles13) .editor h3 a:visited {
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--smbc-darkGreen);
    margin: 0;
    text-decoration: none;
}
.widget-width:has(div.styles13) .editor h3 a:hover, 
.widget-width:has(div.styles13) .editor h3 a:hover:visited {
    text-decoration: underline;
}
.widget-width:has(div.styles13) .editor p {
    grid-area: cta;
    margin: 0;
}
.widget-width:has(div.styles13) .editor p a {
    margin: 0;
}
.widget-width:has(div.styles13) .editor a.button, 
.widget-width:has(div.styles13) .editor a.button:visited {
    padding: .375rem 1.125rem;
}
.widget-width:has(div.styles13) .editor a {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--white);
    display: inline-flex;
    align-items: center;
}
.widget-width:has(div.styles13) .editor a:hover {
    color: var(--smbc-darkGreen);
}
.widget-width:has(div.styles13) .editor a::after {
    content: ">";
    font-size: 1.25rem;
    margin-left: 1rem;
    color: var(--white);
    transition: transform .2s ease;
}
.widget-width:has(div.styles13) .editor a:hover::after {
    transform: translateX(6px);
    color: var(--smbc-darkGreen);
}
/* ---------- Section 7 - Process timeline section with .styles7 widget ---------- */
/* Timeline layout */
.widget-width:has(div.styles7) .editor {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
}
/* Header row */
.widget-width:has(div.styles7) .editor > h2 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 1.5rem;
}
.widget-width:has(div.styles7) .editor > p:first-of-type {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
    font-size: 0.875rem;
}
/* Timeline items */
.widget-width:has(div.styles7) .editor > div {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0rem 1rem;
    position: relative;
}
/* Number node */
.widget-width:has(div.styles7) .editor > div > div:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--green, #107c41);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
    z-index: 2;
}
/* Connecting line */
.widget-width:has(div.styles7) .editor > div:not(:last-child) > div:first-child::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: calc(100% + 1rem);
    transform: translateX(-50%);
    background: #cfcfcf;
}
/* Content */
.widget-width:has(div.styles7) .editor > div h4 {
    grid-column: 2;
    margin: 0;
    font-size: 1rem;
}
.widget-width:has(div.styles7) .editor > div p {
    grid-column: 2;
    margin: 0 0 1.125rem;
    font-size: 1rem;
}