/*
 * Service page v4 — "Direction C" clothes on the v2 content.
 *
 * The design mockup computed every column count in JavaScript from
 * window.innerWidth (wide >= 1100, mid >= 760, plus 900 / 980 / 1000). Those
 * are media queries here: a layout that needs a script to choose its columns
 * paints the wrong one first and has no layout at all if the script fails.
 * The mockup's own build note says to prefer CSS for these switches outright.
 *
 * Muted ink: #5F7386 (4.9:1) and #5A6B7B (5.5:1) only. #7E93A6 / #8A97A8
 * fail AA and are reserved for strokes.
 */

/* Layout primitives: see .v4-wrap / .v4-head in components-v2.css — the
   industry pages render v4 parts and need them too. */

/* Hero */
.v4-hero { display: grid; grid-template-columns: 1fr; gap: clamp(30px,4vw,64px); align-items: center;
  padding: clamp(40px,5.5vw,84px) var(--pad) clamp(96px,10vw,140px); max-width: 1300px; margin: 0 auto; position: relative; }
@media (min-width: 980px) { .v4-hero { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }

/* Proof card: see .v4-proof in components-v2.css -- the homepage shares it. */

/* Client marquee. Doubled list slid by half its width, so the loop is seamless. */

/* Services — vertical tab rail above 1100px, horizontal scroller below */
/* minmax(0,1fr), not 1fr: a 1fr track carries an implicit auto minimum, so
   it sized itself to the widest tab (423px) inside a 343px container and
   scrolled the whole page sideways on a phone. Capping the track is what
   lets the tab row scroll inside itself instead. */
.v4-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1100px) { .v4-tabs { grid-template-columns: 320px minmax(0,1fr); } }
.v4-tablist { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
  /* A grid item defaults to min-width:auto, so the row of tabs sized to
     its content and pushed past the track instead of scrolling inside
     it -- the whole page scrolled sideways on a phone. min-width:0 lets
     the track cap it, which is what makes overflow-x:auto take effect. */
  min-width: 0; }
.v4-tablist::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .v4-tablist { flex-direction: column; overflow: visible; padding-bottom: 0; } }
.v4-tab { flex: none; display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 14px; font-family: inherit;
  transition: background 160ms ease, border-color 160ms ease; }
.v4-panelcols { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 26px; position: relative; }
@media (min-width: 760px) { .v4-panelcols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@keyframes v4panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v4-panel { animation: v4panelIn 260ms ease; }

/* Campaign types — hairline grid, any number of rows */
.v4-camps { display: grid; grid-template-columns: 1fr; gap: 1px; background: #E2E9F0;
  border: 1px solid #E2E9F0; border-radius: 20px; overflow: hidden; }
@media (min-width: 760px)  { .v4-camps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1100px) { .v4-camps { grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* Customer journey stepper */
.v4-jr { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px 10px; margin-bottom: 22px; }
@media (min-width: 760px) { .v4-jr { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.v4-jr-line { display: none; }
@media (min-width: 760px) { .v4-jr-line { display: block; } }
.v4-split { display: grid; grid-template-columns: 1fr; gap: 18px 36px; align-items: center; }
@media (min-width: 980px) { .v4-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* Goals and problems — auto-fill so any count fits without truncating.
   (Industries use the shared rail component, not a grid here.) */
.v4-goals { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr)); gap: 16px; }
.v4-problems { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,270px),1fr)); gap: 16px; }

/* Scope — phase columns */
.v4-scope { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px)  { .v4-scope { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1100px) { .v4-scope { grid-template-columns: repeat(4,minmax(0,1fr)); } }

/* Why HND bento. The named areas only apply where all four columns exist;
   below that the tiles flow, so a 5th or 7th reason cannot fall out. */
.v4-bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px)  { .v4-bento { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1100px) {
  .v4-bento { grid-template-columns: repeat(4,minmax(0,1fr)); }
  /* The lead tile is the section's signature, so it spans two by two at any
     count. Six tiles additionally get the exact named layout below; other
     counts flow around the same lead tile, so the design reads the same
     whether a page has six reasons or eight. */
  .v4-bento > :first-child { grid-column: span 2; grid-row: span 2; }
  .v4-bento--6 { grid-template-areas: "a a b c" "a a d d" "e e f f"; }
  .v4-bento--6 > :nth-child(1) { grid-area: a; }
  .v4-bento--6 > :nth-child(2) { grid-area: b; }
  .v4-bento--6 > :nth-child(3) { grid-area: c; }
  .v4-bento--6 > :nth-child(4) { grid-area: d; }
  .v4-bento--6 > :nth-child(5) { grid-area: e; }
  .v4-bento--6 > :nth-child(6) { grid-area: f; }
  /* Seven and eight tiles get their own maps for the same reason six does:
     without one the last row holds two cards in a four column track and
     leaves half the row empty. The lead tile keeps its two by two block. */
  .v4-bento--7 { grid-template-areas: "a a b c" "a a d e" "f f g g"; }
  .v4-bento--7 > :nth-child(1) { grid-area: a; }
  .v4-bento--7 > :nth-child(2) { grid-area: b; }
  .v4-bento--7 > :nth-child(3) { grid-area: c; }
  .v4-bento--7 > :nth-child(4) { grid-area: d; }
  .v4-bento--7 > :nth-child(5) { grid-area: e; }
  .v4-bento--7 > :nth-child(6) { grid-area: f; }
  .v4-bento--7 > :nth-child(7) { grid-area: g; }
  .v4-bento--8 { grid-template-areas: "a a b c" "a a d e" "f f g h"; }
  .v4-bento--8 > :nth-child(1) { grid-area: a; }
  .v4-bento--8 > :nth-child(2) { grid-area: b; }
  .v4-bento--8 > :nth-child(3) { grid-area: c; }
  .v4-bento--8 > :nth-child(4) { grid-area: d; }
  .v4-bento--8 > :nth-child(5) { grid-area: e; }
  .v4-bento--8 > :nth-child(6) { grid-area: f; }
  .v4-bento--8 > :nth-child(7) { grid-area: g; }
  .v4-bento--8 > :nth-child(8) { grid-area: h; }
}

/* Process — zig-zag. One column with a left rail below 760px. */
.v4-zz { position: relative; }
.v4-zz-line { position: absolute; top: 0; bottom: 0; left: 22px; width: 2px; margin-left: -1px;
  background: linear-gradient(#0464ad,#F0A500); }
.v4-zz-row { position: relative; display: grid; grid-template-columns: 1fr; gap: 0 60px; padding-bottom: 22px; }
.v4-zz-disc { position: absolute; left: 22px; top: 6px; width: 44px; height: 44px; margin-left: -22px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; box-shadow: 0 0 0 6px #03244a; }
.v4-zz-cell { grid-column: 1; padding-left: 64px; text-align: left; }
@media (min-width: 760px) {
  .v4-zz-line { left: 50%; }
  .v4-zz-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-bottom: 26px; }
  .v4-zz-disc { left: 50%; }
  .v4-zz-cell { padding-left: 0; }
  .v4-zz-row:nth-child(odd)  .v4-zz-cell { grid-column: 1; text-align: right; }
  .v4-zz-row:nth-child(even) .v4-zz-cell { grid-column: 2; text-align: left; }
}

/* Reporting */
.v4-rep { display: grid; grid-template-columns: 1fr; gap: clamp(20px,3vw,36px); align-items: start; }
@media (min-width: 1000px) { .v4-rep { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); } }
.v4-rep-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap: 8px; }
.v4-rep-row { display: grid; grid-template-columns: minmax(90px,1.5fr) repeat(2,minmax(60px,1fr)) 64px;
  gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF3F8; font-size: 12.5px; }

/* Results grid: see .v4-res in components-v2.css — the industry pages share it. */

/* Testimonials */
.v4-ts { display: grid; grid-template-columns: 1fr; gap: clamp(24px,4vw,60px); align-items: center; }
@media (min-width: 980px) { .v4-ts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* FAQ — the contact card sticks beside the accordion on desktop */
.v4-faq { display: grid; grid-template-columns: 1fr; gap: clamp(24px,4vw,56px); align-items: start; }
.v4-faq__aside { position: static; top: 100px; }
@media (min-width: 900px) {
  .v4-faq { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); }
  .v4-faq__aside { position: sticky; }
}

/* Closing band + form */
.v4-cta { display: grid; grid-template-columns: 1fr; gap: clamp(26px,4vw,60px); align-items: center; }
@media (min-width: 900px) { .v4-cta { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); } }
.v4-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .v4-form { grid-template-columns: 1fr 1fr; } }

/* Lit as you scroll.
   Both the journey and the process show every item; scrolling decides which
   one is lit. The unlit state is DIMMED, never hidden -- the words stay
   readable and selectable, and a browser that never runs the script shows
   the whole section at full strength (.is-on is on the first item, and
   svc-v4.js adds it to the rest as they come into view). */
/* Short on purpose. At 320ms the highlight was still fading into one stage
   while a fast scroll had already reached the next, which reads as the
   section lagging behind the page. */
.v4-jr-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  transition: background 140ms ease-out, border-color 140ms ease-out, opacity 140ms ease-out; opacity: .55; }
.v4-jr-card.is-on { background: rgba(255,255,255,.08); border-color: rgba(240,165,0,.45); opacity: 1; }
.v4-step { transition: opacity 140ms ease-out; opacity: .5; }
.v4-step.is-on { opacity: 1; }
.v4-step .v4-zz-disc { transition: background 140ms ease-out, color 140ms ease-out, box-shadow 140ms ease-out; }
.v4-step.is-on .v4-zz-disc { box-shadow: 0 0 0 6px #03244a, 0 0 0 10px rgba(240,165,0,.28); }

/* No script, or reduced motion: everything is lit and nothing fades. */
.no-js .v4-jr-card, .no-js .v4-step { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .v4-jr-card, .v4-step, .v4-step .v4-zz-disc { transition: none; }
}

/* `hidden` must actually hide.
   [hidden] is only a UA rule (display:none), so ANY class that sets display
   beats it -- .v4-ts and .v4-split are both display:grid, so the journey and
   the testimonials rendered every panel at once while the DOM property said
   hidden. The attribute selector outranks the bare class, so this needs no
   !important. Anything in this namespace that gains a display later is
   covered too. */
.v4 [hidden],
.v4-panel[hidden],
.v4-split[hidden],
.v4-ts[hidden] { display: none; }

/* Floating hero chips */
@keyframes v4float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.v4-float { animation: v4float 5s ease-in-out infinite; }
.v4-float--b { animation-delay: 1.2s; }

/* Still versions. Everything that moves has a motionless equivalent. */
@media (prefers-reduced-motion: reduce) {
  .v4-float { animation: none; }
  .v4-panel { animation: none; }
  .v4-tab, .v4-jr-dot { transition: none; }
}
.still .v4-marq, .still .v4-float, .still .v4-panel { animation: none !important; }


/* ============================================================
 * v4 components A-J -- ported from the design kit.
 *
 * Classes are the kit's, with two renames forced by collisions in this
 * theme: the kit's `.stat` is `.hstat` here (components.css already has a
 * different `.stat`), and its `.tl` is `.tgl` (casestudy.css uses `.tl` for
 * the timeline). The kit's demo chrome -- its hero mock, specimen wrappers
 * and heading helpers -- is not ported; v4 has its own.
 *
 * Every responsive change below is a media query or `:has()`. Nothing reads
 * a width in JavaScript: a layout that needs a script to pick its columns
 * shows the wrong one first and collapses when the script fails.
 * ============================================================ */

  /* The brief requires every responsive change as a CSS media query (rule 1),
     so these components carry a class layer. No width is computed in JS. */
  .gone{display:none!important;}

  /* ===== A · Hero statistic ===== */
  /* The container, so the value sizes to the card, not the viewport. */
  .hstat-c{container-type:inline-size;}
  .hstat{display:grid;grid-template-columns:4px minmax(0,1fr);gap:0 18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:20px 22px;}
  .hstat__bar{grid-row:1 / span 3;background:#F0A500;border-radius:2px;}
  .hstat__v{font-weight:800;color:#fff;line-height:.98;letter-spacing:-.035em;font-size:clamp(34px,12.5cqi,80px);text-wrap:balance;overflow-wrap:break-word;}
  .hstat[data-len="s"] .hstat__v{font-size:clamp(46px,21cqi,104px);}
  .hstat[data-len="l"] .hstat__v{font-size:clamp(30px,10.5cqi,66px);}
  .hstat__l{font-size:clamp(15px,4.4cqi,18px);line-height:1.45;color:#D3E3F1;margin-top:12px;max-width:36ch;text-wrap:pretty;}
  .hstat__s{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.4;color:#A9C2DA;}
  .hstat__s b{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#F0A500;}

  /* ===== B · Category grid =====
     3 → 2 → 1 columns. Exactly 4 rows switch to 2 columns. The closing
     tile uses grid-column-end:-1, so it always fills the rest of the last
     row — 11 rows leave no hole, 12 rows get a full-width strip. */
  .cg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .cg:has(> .cg__c:nth-child(4):nth-last-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));}
  @media (max-width:1000px){.cg{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (max-width:620px){.cg,.cg:has(> .cg__c:nth-child(4):nth-last-child(2)){grid-template-columns:1fr;}}
  .cg__c{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #E2E9F0;border-radius:16px;padding:18px 20px;color:inherit;min-width:0;}
  a.cg__c{transition:border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease;}
  a.cg__c:hover{border-color:#0464ad;box-shadow:0 14px 30px rgba(4,100,173,.12);transform:translateY(-2px);color:inherit;}
  a.cg__c:focus-visible{outline:2px solid #0464ad;outline-offset:3px;}
  .cg__ic{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
  .cg__t{font-size:16.5px;font-weight:800;color:#14232F;margin-bottom:4px;}
  .cg__d{font-size:14.5px;line-height:1.55;color:#5A6B7B;}
  .cg__go{flex:none;margin-left:auto;width:30px;height:30px;border-radius:50%;background:#EAF4FD;color:#0464ad;display:flex;align-items:center;justify-content:center;}
  .cg__more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;background:#03244a;border-radius:16px;padding:18px 22px;color:#fff;}
  .cg__more:hover{color:#fff;}
  .cg__more-t{font-size:16.5px;font-weight:800;}
  .cg__more-d{font-size:14px;line-height:1.5;color:#A9C2DA;margin-top:3px;}
  .cg__more-b{flex:none;white-space:nowrap;background:#F0A500;color:#2E2000;font-size:14.5px;font-weight:800;padding:11px 16px;border-radius:10px;}
  /* Closing tile fills the rest of the last row. The last card is always
     .cg__c:nth-last-child(2) (the tile is the last child), so its position
     gives the remainder with no JS:
       3 cols: count 3n → full row · 3n+1 → span 2 · 3n+2 → span 1
       2 cols: even → full row · odd → span 1   ·   1 col: always full */
  .cg__more{grid-column:1 / -1;}
  .cg:has(> .cg__c:nth-last-child(2):nth-child(3n+1)) > .cg__more{grid-column:span 2;}
  .cg:has(> .cg__c:nth-last-child(2):nth-child(3n+2)) > .cg__more{grid-column:span 1;}
  .cg:has(> .cg__c:nth-child(4):nth-last-child(2)) > .cg__more{grid-column:1 / -1;}
  @media (max-width:1000px){
    .cg:has(> .cg__c:nth-last-child(2):nth-child(3n+1)) > .cg__more,
    .cg:has(> .cg__c:nth-last-child(2):nth-child(3n+2)) > .cg__more{grid-column:1 / -1;}
    .cg:has(> .cg__c:nth-last-child(2):nth-child(odd)) > .cg__more{grid-column:span 1;}
  }
  @media (max-width:620px){
    .cg:has(> .cg__c:nth-last-child(2):nth-child(odd)) > .cg__more{grid-column:1 / -1;}
  }

  /* ===== C · Metrics — a definition list, not a dashboard ===== */
  .mx{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 56px;align-items:start;}
  @media (max-width:980px){.mx{grid-template-columns:1fr;}}
  .mx__not{margin-top:22px;background:#fff;border:1px dashed #CBDCEB;border-radius:14px;padding:14px 16px;}
  .mx__not-k{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5F7386;margin-bottom:8px;}
  .mx__not-c{display:flex;flex-wrap:wrap;gap:6px;}
  .mx__not-c span{font-size:13px;font-weight:700;color:#5A6B7B;background:#F4F8FC;border-radius:99px;padding:5px 11px;}
  .mx__list{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;}
  @media (max-width:640px){.mx__list{grid-template-columns:1fr;}}
  .mx__row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 12px;padding:15px 0;border-top:1px solid #E2E9F0;}
  .mx__n{grid-row:1 / span 2;font-size:13px;font-weight:800;color:#0464ad;padding-top:3px;}
  .mx__row dt{font-size:17px;font-weight:800;color:#14232F;}
  .mx__row dd{margin:0;font-size:14.5px;line-height:1.55;color:#5A6B7B;}

  /* ===== D · Grouped platform tiles ===== */
  .pg__row{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px 28px;padding:20px 0;border-top:1px solid #E2E9F0;}
  .pg__row:first-child{border-top:none;padding-top:0;}
  @media (max-width:820px){.pg__row{grid-template-columns:1fr;}}
  .pg__k{font-size:17px;font-weight:800;color:#14232F;}
  .pg__n{font-size:13px;font-weight:700;color:#5F7386;margin-top:3px;}
  .pg__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;}
  .pt{position:relative;min-height:70px;border:1px solid #E2E9F0;border-radius:14px;background:#fff;display:flex;align-items:center;gap:11px;padding:12px 14px;overflow:hidden;}
  .pt__logo{flex:none;width:34px;height:34px;border-radius:8px;background:#fff center / contain no-repeat;}
  .pt__mono{flex:none;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
  /* Text state is the default and ships first: the name set as a wordmark
     with a coloured cap, so it reads as designed rather than missing. */
  .pt::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--cap,#0464ad);}
  .pt__name{font-size:14.5px;line-height:1.25;font-weight:800;letter-spacing:-.2px;color:#14232F;min-width:0;}
  /* Logo state: the image is a background, the name stays for screen readers. */
  .pg__foot{margin-top:18px;font-size:15px;font-weight:700;color:#14232F;display:flex;align-items:center;gap:10px;}

  /* ===== E · Tools & integrations — navy, logo + name ===== */
  .tg{columns:300px 3;column-gap:16px;}
  .tg__card{break-inside:avoid;margin:0 0 16px;background:#fff;border-radius:20px;padding:18px 18px 8px;box-shadow:0 18px 40px rgba(0,0,0,.18);}
  .tg__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;}
  .tg__k{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0464ad;}
  .tg__n{font-size:12px;font-weight:800;color:#8A6206;background:#FDF4E0;border-radius:99px;padding:3px 9px;}
  .tgl{display:flex;align-items:center;gap:13px;padding:10px 0;border-top:1px solid #EEF3F8;}
  .tgl__logo{flex:none;width:48px;height:48px;border-radius:12px;border:1px solid #E2E9F0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;letter-spacing:-.3px;}
  .tgl__logo--img{background:#fff center / 66% auto no-repeat;}
  /* Wordmark-only brands: take the width, since 66% leaves them a sliver. */
  .tgl__logo--wide{background-size:88% auto;}
  .tgl__name{font-size:16px;font-weight:700;color:#14232F;}

  /* ===== F · Review → outcome ===== */
  .ro{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:stretch;}
  @media (max-width:860px){.ro{grid-template-columns:1fr;}}
  .ro__col{border-radius:22px;padding:clamp(20px,2.4vw,30px);}
  .ro__col--in{background:#fff;border:1px solid #E2E9F0;}
  .ro__col--out{background:#03244a;}
  .ro__k{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;}
  .ro__h{font-size:clamp(20px,2vw,25px);font-weight:800;letter-spacing:-.5px;margin:0 0 14px;}
  .ro__r{display:flex;gap:12px;align-items:flex-start;padding:12px 0;}
  .ro__col--in .ro__r{border-top:1px solid #EEF3F8;}
  .ro__col--out .ro__r{border-top:1px solid rgba(255,255,255,.12);}
  .ro__i{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
  .ro__t{font-size:15.5px;line-height:1.5;}
  .ro__mid{position:relative;display:flex;align-items:center;justify-content:center;}
  .ro__mid::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:repeating-linear-gradient(90deg,#F0A500 0 8px,transparent 8px 14px);}
  .ro__disc{position:relative;width:60px;height:60px;border-radius:50%;background:#F0A500;color:#2E2000;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px #F4F8FC;}
  @media (max-width:860px){.ro__mid{height:76px;}.ro__mid::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,#F0A500 0 8px,transparent 8px 14px);}.ro__disc svg{transform:rotate(90deg);}}

  /* ===== G · Ad format chips — width follows the label ===== */
  .chips{display:flex;flex-wrap:wrap;gap:10px;}
  .chip{display:inline-flex;align-items:flex-start;gap:10px;max-width:100%;background:#fff;border:1.5px solid #CBDCEB;border-radius:14px;padding:11px 16px;font-size:15px;line-height:1.4;color:#14232F;}
  .chip i{flex:none;width:8px;height:8px;border-radius:50%;background:#F0A500;margin-top:7px;}
  .chip b{font-weight:800;}

  /* ===== H · Fit comparison — same treatment both sides ===== */
  .fit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;}
  @media (max-width:820px){.fit{grid-template-columns:1fr;}}
  .fit__c{background:#fff;border:1px solid #E2E9F0;border-radius:22px;overflow:hidden;}
  .fit__h{background:#F4F8FC;border-bottom:1px solid #E2E9F0;padding:18px 22px;}
  .fit__k{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5F7386;}
  .fit__t{font-size:clamp(20px,2vw,25px);font-weight:800;letter-spacing:-.5px;margin-top:3px;}
  .fit__r{display:flex;gap:12px;align-items:flex-start;padding:14px 22px;border-top:1px solid #EEF3F8;}
  .fit__r:first-child{border-top:none;}
  .fit__i{flex:none;width:24px;height:24px;border-radius:50%;background:#EAF4FD;color:#0464ad;display:flex;align-items:center;justify-content:center;}
  .fit__or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;border:1.5px solid #CBDCEB;color:#5A6B7B;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  @media (max-width:820px){.fit__or{position:static;transform:none;margin:-4px auto;}}

  /* ===== I · Coverage checklist — quiet ===== */
  .cov{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px 56px;align-items:start;}
  @media (max-width:900px){.cov{grid-template-columns:1fr;}}
  .cov__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;}
  @media (max-width:620px){.cov__list{grid-template-columns:1fr;}}
  .cov__r{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-top:1px solid #E2E9F0;font-size:15.5px;line-height:1.45;color:#14232F;}
  .cov__r span:first-child{flex:none;color:#1E7D3C;margin-top:2px;}



/* The statistic when it stands in for the hero visual.
 * It is the only thing on that side of the fold, so it carries more weight
 * than the same card would lower down the page: a larger value, more room
 * around it, and a stronger edge against the navy. */
.hstat--hero{padding:clamp(26px,3vw,38px) clamp(26px,3vw,40px);border-radius:22px;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);box-shadow:0 30px 70px rgba(0,0,0,.28);}
.hstat--hero .hstat__v{font-size:clamp(44px,16cqi,92px);}
.hstat--hero[data-len="s"] .hstat__v{font-size:clamp(60px,26cqi,120px);}
.hstat--hero[data-len="l"] .hstat__v{font-size:clamp(38px,13cqi,78px);}
.hstat--hero .hstat__l{font-size:clamp(16px,5cqi,20px);margin-top:16px;}
/* The hero statistic's own column. Inset beside the copy on desktop; flush
 * with it once the hero stacks, where a 22px indent just reads as a mistake. */
.v4-hero-stat{padding:clamp(10px,2vw,30px) 10px 22px 22px;}
@media (max-width:979px){.v4-hero-stat{padding:4px 0 8px;}}

/* Hero enquiry form — the right column on build-something service pages.
   White card on the navy hero, same weight as the statistic it replaces. */
.v4-hero-form { background: #fff; border-radius: 20px; padding: clamp(18px,2vw,24px);
  box-shadow: 0 30px 70px rgba(3,36,74,.38); }
.v4-hero-form__done { text-align: center; padding: 14px 0; }
.v4-hero-form__done-t { font-size: 20px; font-weight: 800; color: #14232F; margin-bottom: 8px; }
.v4-hero-form__done p { font-size: 15.5px; line-height: 1.65; color: #5A6B7B; margin: 0; }