/* ========================================================= Split Section — the reusable two-column content block (typography comes from base.css / common.css) One section,configured by modifier classes:.split-section-media-right text left,media right (default) .split-section-media-left media left,text right .split-section-tinted pale background .split-section-stacked continues from the split above it Content order in the markup never changes — the heading always comes first,so the reading order and the mobile stack are the same on every instance. Only the visual order flips. THE COLUMNS ARE THE SAME WIDTH ON EVERY SPLIT,EVERYWHERE. There is no per-section width class and no per-section width CSS — change the two tokens below and every split on every page moves together. ========================================================= */
.split-section{/* The one width system. Figma draws the copy column at 540 and the media at 616 inside the 1204 container,with a 48 gap. Stored as a ratio rather than two pixel widths so both columns shrink together when the container narrows,instead of the media column absorbing the whole loss. 540 / (540 + 616) = 0.467. */
 --split-gap:48px;--split-content:0.467;background-color:var(--color-white);}
.split-section .split-section-wrapper{gap:var(--split-gap);padding-block:var(--section-padding);}
/* ---------- Columns ---------- the gap comes out of the row before the split,so the two shares are of the space that is actually left to divide */
.split-section .split-section-wrapper .split-section-content{flex:1 1 calc((100% - var(--split-gap)) * var(--split-content));min-width:0;}
.split-section .split-section-wrapper .split-section-media{flex:1 1 calc((100% - var(--split-gap)) * (1 - var(--split-content)));min-width:0;}
/* ---------- Layout variants ---------- */
/* the default direction,stated explicitly so the class in the markup is not a dead end when someone greps for it */
.split-section-media-right .split-section-wrapper{flex-direction:row;}
/* media first on screen,content still first in the markup */
.split-section-media-left .split-section-wrapper{flex-direction:row-reverse;}
/* the lead line is teal on every split;the wrapper class in the markup decides its size */
.split-section .split-section-wrapper .split-section-content .split-section-lead p{color:var(--color-teal-700);}
/* Figma sets a split check list one step above the component default */
.split-section .split-section-wrapper .split-section-content ul{--check-font-size:var(--font-size-prose-sm);--check-line-height:var(--line-height-prose-sm);}
/* ---------- Surface variants ---------- */
.split-section-tinted{background-color:var(--color-ink-50);}
/* the deep teal band. Compliance runs two of its splits on it,so the colours live with the component rather than with either section. */
.split-section-dark{background-color:var(--color-heading);}
.split-section-dark .split-section-wrapper .split-section-content h2{color:var(--color-white);}
/* a stacked pair reads as one block:the first half closes tight and the second opens tight,so only one run of section padding wraps the two */
.split-section-pair-start .split-section-wrapper{padding-bottom:18px;}
.split-section-stacked .split-section-wrapper{padding-top:0;}
.split-section-stacked .split-section-wrapper .split-section-content{border-top:1px solid var(--color-border);padding-top:var(--space-lg);}
/* ---------- Content slots — every one optional ---------- */
.split-section .split-section-wrapper .split-section-content .split-section-eyebrow{margin-bottom:10px;}
.split-section .split-section-wrapper .split-section-content .accent-bar{margin-top:16px;}
.split-section .split-section-wrapper .split-section-content .split-section-lead{margin-top:8px;}
.split-section .split-section-wrapper .split-section-content .split-section-lead h3,.split-section .split-section-wrapper .split-section-content .split-section-lead .h3{color:var(--color-teal-700);}
/* a column with a gap rather than margins on the paragraphs themselves */
.split-section .split-section-wrapper .split-section-content .split-section-text{display:flex;flex-direction:column;/* the text wrapper class sets the gap to one blank line of its own type */
 gap:var(--stack-gap,14px);margin-top:24px;margin-bottom:24px;}
.split-section .split-section-wrapper .split-section-content .split-section-text p{font-size:var(--font-size-body-md);line-height:var(--line-height-prose);color:var(--color-slate-700);}
.split-section-dark .check-list ul li::before{background-color:rgba(8,198,173,0.2);color:var(--color-signal-400);}
.split-section .split-section-wrapper .split-section-content ul{display:flex;flex-direction:column;gap:11px;margin-top:0px;}
.split-section .split-section-wrapper .split-section-content .split-section-actions{gap:12px;margin-top:26px;}
.split-section .split-section-wrapper .split-section-media .split-section-media-figure{width:100%;}
.split-section .split-section-wrapper .split-section-media .split-section-media-figure figcaption{margin-bottom:6px;font-family:var(--font-mono);font-size:var(--font-size-caption);font-weight:var(--font-weight-medium);line-height:var(--line-height-caption);color:var(--color-slate-500);}
/* a dashed box standing in for artwork that has not landed yet */
.split-section .split-section-wrapper .split-section-media .split-section-media-placeholder{gap:12px;min-height:320px;padding:var(--space-md);background-color:var(--color-ink-50);border:1px dashed var(--color-ink-200);border-radius:var(--radius-lg);text-align:center;}
.split-section .split-section-wrapper .split-section-media .split-section-media-placeholder p{font-family:var(--font-mono);font-size:var(--font-size-micro);line-height:var(--line-height-auto);color:var(--color-slate-500);}
.split-section-dark .split-section-wrapper .split-section-content .split-section-text p,.split-section-dark .split-section-wrapper .split-section-content .split-section-lead p{color:var(--color-teal-100);}
.split-section-dark .split-section-wrapper .split-section-content ul li{color:#E5F2F5;background-color:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);padding:14px 16px 14px 46px;border-radius:var(--radius-sm);align-items:center;}
.split-section-dark .split-section-wrapper .split-section-content ul li::before{left:16px;top:50%;transform:translateY(-50%);}
.split-section-dark .split-section-wrapper .split-section-content .split-section-note p{color:var(--color-signal-400);}
/* ---------- Large Desktop / Laptop ---------- */
@media (max-width:1199px){/* set the token,not the gap:the column widths are calculated from it,so overriding `gap` alone would leave the two out of step */
 .split-section{--split-gap:var(--space-xl);}
}
/* ---------- Tablet ---------- */
@media (max-width:991px){/* stacked:content first,whichever side the media sat on */
 .split-section .split-section-wrapper,.split-section-media-left .split-section-wrapper{flex-direction:column;align-items:stretch;gap:var(--space-lg);}
.split-section .split-section-wrapper .split-section-content,.split-section .split-section-wrapper .split-section-media{flex:0 0 auto;width:100%;}
.split-section-pair-start .split-section-wrapper{padding-bottom:var(--section-padding);}
.split-section-stacked .split-section-wrapper{padding-top:0;}
}
/* ---------- Small Mobile ---------- */
@media (max-width:767px){.split-section .split-section-wrapper .split-section-content .split-section-text{margin-top:20px;margin-bottom:20px;}
.split-section .split-section-wrapper .split-section-content .split-section-actions .button{width:100%;}
/* Move actions below media */
 .split-section .split-section-wrapper{gap:0;}
.split-section .split-section-wrapper .split-section-content{display:contents;}
.split-section .split-section-wrapper .split-section-content>*{order:1;width:100%;}
.split-section .split-section-wrapper .split-section-media{order:2;margin-top:var(--space-lg);}
.split-section .split-section-wrapper .split-section-content .split-section-actions{order:3;}
}
/* ---------- DORA Metrics Grid (injected via ACF) ---------- */
.split-section-dora-metrics{display:flex;flex-direction:column;gap:16px;width:100%;padding:20px 22px;background:#ffffff;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--color-border);}
.split-section-dora-header{display:flex;flex-direction:column;gap:4px;}
.split-section-dora-heading{font-size:19px;color:var(--color-ink-900);line-height:1.2105;}
.split-section-dora-subheading{color:var(--color-slate-500);font-family:var(--font-mono);font-weight:var(--font-weight-medium);font-size:var(--font-size-micro);line-height:1.2727;text-transform:uppercase;}
.split-section-dora-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.split-section-dora-card{display:flex;flex-direction:column;padding:22px;border-radius:var(--radius-lg);color:#ffffff;gap:14px;transition:background-color 0.2s ease;}
.dora-card-teal{background-color:var(--color-teal-700);}
.dora-card-green{background-color:#05A08E;}
.dora-card-green:hover{background-color:#05A08E;}
.dora-card-orange{background-color:var(--color-orange-500);}
.dora-card-title{color:var(--color-white);letter-spacing:0.405px;font-size:var(--font-size-blurb);text-transform:uppercase;line-height:1.25;font-weight:var(--font-weight-bold);}
.dora-card-body{display:flex;align-items:baseline;gap:7px;}
.dora-card-val{font-size:var(--font-size-display-title);color:var(--color-white);font-weight:var(--font-weight-bold);line-height:0.9;letter-spacing:-1.08px;}
.dora-card-unit{font-family:var(--font-primary);color:rgba(255,255,255,0.92);line-height:1.3125;letter-spacing:0;font-size:var(--font-size-body);}
.dora-card-band{color:rgba(255,255,255,0.92);font-size:var(--font-size-body-xs);font-weight:var(--font-weight-bold);letter-spacing:1.25px;text-transform:uppercase;line-height:1.28;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form{margin-top:var(--space-md);}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form{display:flex !important;flex-direction:row !important;gap:var(--space-xxm) !important;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-form-field{max-width:calc(100% - 147px - var(--space-xxm));width:100%;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-form-field>label{display:none !important;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-form-field .input input{height:50px !important;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-submit{min-width:147px !important;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form input[type="submit"]{flex-shrink:0 !important;width:auto !important;min-height:50px !important;margin-top:0 !important;border:0 !important;padding-inline:var(--space-sl) !important;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .inputs-list{list-style:none;}
@media (max-width:767px){.split-section .split-section-wrapper .split-section-content .split-section-inline-form form{flex-direction:column !important;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-form-field{max-width:100%;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form .hs-submit{min-width:100% !important;}
.split-section .split-section-wrapper .split-section-content .split-section-inline-form form input[type="submit"]{width:100% !important;}
}
@media (max-width:575px){.split-section-dora-grid{grid-template-columns:1fr;}
}