/* Sub-service pages (services/<service>/<sub-service>). The sections are the designs themselves,
   with their inline styles; this file adds what the inline styles cannot carry: the animations
   they name, the static 3D icons, tab switching, and the phone layouts the designs do not have.
   Phone rules use !important because they override inline desktop styles. */

@keyframes ulxDriftA { 0% { transform: translate(-8%, -5%) scale(1); } 50% { transform: translate(12%, 8%) scale(1.28); } 100% { transform: translate(-8%, -5%) scale(1); } }
@keyframes ulxDriftB { 0% { transform: translate(8%, 10%) scale(1.12); } 50% { transform: translate(-12%, -8%) scale(1); } 100% { transform: translate(8%, 10%) scale(1.12); } }
@keyframes tmBgDrift { from { transform: translate(0, 0); } to { transform: translate(3%, -2%); } }
@keyframes tmBgPulse { from { opacity: .75; } to { opacity: 1; } }
@keyframes tkDash { to { stroke-dashoffset: -48; } }
@keyframes tkFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tkFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes enabNode { 0% { box-shadow: 0 0 0 0 rgb(59 116 232 / 45%); } 70%, 100% { box-shadow: 0 0 0 10px rgb(59 116 232 / 0%); } }
@keyframes offerDash { to { stroke-dashoffset: -24; } }
@keyframes offerDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -12px); } }
@keyframes offerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes offerTwinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.7) rotate(45deg); opacity: .7; } }

.ss-page a { text-decoration: none; }
.ss-page [data-ss-tab], .ss-page [data-ss-q] { cursor: pointer; }
.ss-tabset > [hidden] { display: none !important; }

/* The homepage's CSS-3D service objects, drawn at 132px and scaled to the design's size. */
.ss-icon { position: relative; display: block; flex: none; }
.ss-icon__in, .ss-icon .s3d, .ss-icon .s3d__scene { display: block; }
.ss-icon__in { position: absolute; top: 0; left: 0; width: 132px; height: 132px; transform-origin: 0 0; }
/* The object fills its 132px box exactly, so it stays centred in its tile. The homepage shrinks it
   to 72% towards the top-right corner on phones (home-svc3d.css); that must not apply here. */
.ss-icon .s3d { top: 0; right: auto; left: 0; transform: none !important; }

/* Card rows sized by how many cards there are, so none is left alone on a row. */
.ss-grid:where([style*="auto-fit"]:has(> :nth-child(4):last-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ss-grid:where([style*="auto-fit"]:has(> :nth-child(3):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* The hero video is drawn on white and multiplied into the page. Its wrapper must not be a layer of
   its own (z-index makes one), or the white shows as a box over the hero's gradient and lines. */
/* On desktop the wrapper's transform makes it a layer anyway, so the blend goes on the wrapper itself:
   it multiplies, as a whole, into the hero. (Videos that were transparent WebMs in the design are
   flattened onto white for Safari, so they need this too.) */
.ss-hero .ss-hero-media { z-index: auto !important; mix-blend-mode: multiply; }
/* A copy column holding the media must not be a layer either (CRM & Pipeline Design). */
.ss-hero > :has(> .ss-hero-media):not(.ss-hero-media) { z-index: auto !important; }

/* "What we build" cards: the designs draw the 3D icon five different ways (bare at 76 or 96px, in a
   tile, beside the title). Every page gets the same 68px blue tile holding a 52px icon. */
.ss-s3 :has(> .ss-icon) {
  flex: none !important; width: 68px !important; height: 68px !important; margin: 0 !important; transform: none !important;
  border-radius: 16px !important; background: rgb(59 116 232 / 18%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.ss-s3 .ss-icon { width: 52px !important; height: 52px !important; }
.ss-s3 .ss-icon__in { transform: scale(.394) !important; }
.ss-s3 .ss-grid > div > div:first-child:has(.ss-icon) { margin: 0 0 22px !important; }
.ss-s3 .ss-grid > div > div:first-child:has(.ss-icon):not(:has(> .ss-icon)) { width: auto !important; height: auto !important; }

/* Process steps drawn as on the parent pages (service.css, process-steps.css): bold week label, gold
   "Output" label, and dot rings alternating blue and gold. */
.ss-process [style*="letter-spacing: 1.4px; text-transform: uppercase"] { font-weight: 600; letter-spacing: 1.6px !important; }
.ss-process [style*="border-radius: 999px; padding: 9px 16px"] > span:first-child { color: #b8860b !important; font-weight: 600; text-transform: uppercase; }
.ss-process [style*="repeating-linear-gradient"] { background: linear-gradient(rgb(59 116 232), rgb(245 200 66)) !important; }
.ss-process [style*="left: -96px"] { box-shadow: 0 0 0 7px rgb(57 120 230 / 22%), 0 16px 30px -18px rgb(20 20 22 / 50%) !important; }
.ss-process div:nth-child(even) > [style*="left: -96px"] { box-shadow: 0 0 0 7px rgb(245 200 66 / 28%), 0 16px 30px -18px rgb(20 20 22 / 50%) !important; }

/* Toolkit: the designs draw the tab band and panel differently page to page (flat blue, gradients,
   bubbles, tinted panels). Every page gets the parent pages' look instead (toolkit-tabs.css). */
.ss-toolkit .ss-grid[style*="0.82fr"] { box-shadow: 0 30px 60px -36px rgb(28 60 140 / 28%), 0 0 0 1px rgb(28 60 140 / 6%) !important; }
.ss-toolkit .ss-grid[style*="0.82fr"] > :first-child { background: #0646c8 url("../../../uploads/toolkit/tabs-bg.webp") center bottom / cover no-repeat !important; }
.ss-toolkit .ss-grid[style*="0.82fr"] > :last-child { background: #fff !important; min-height: 0 !important; }

/* ---------- Small laptops: the hero art sits beside the copy, so keep the copy clear of it ---------- */
@media (min-width: 1101px) and (max-width: 1440px) {
  /* Only where the design left the copy box uncapped; others already hold it to "min(1000px, 48%)". */
  .ss-hero [style*="max-width: 1000px"] > h1, .ss-hero [style*="max-width: 1000px"] > h1 + p { max-width: 58% !important; }
}

/* ---------- Tablets ---------- */
@media (max-width: 1100px) {
  /* As on the live service pages, the hero visual moves under the copy instead of beside it. */
  .ss-hero { display: flex; flex-direction: column; }
  .ss-hero > [style*="max-width: 1712px"] { order: 1; }
  /* Where a design put the media inside the copy column, that column stacks it last instead. */
  .ss-hero > :has(> .ss-hero-media):not(.ss-hero-media) { display: flex; flex-direction: column; }
  .ss-hero > * > .ss-hero-media { order: 99; }
  /* The video frame is 3:2 with the artwork in its right two-thirds (made to sit beside the copy), so
     here the frame is cropped to the artwork and shown full width, like the live pages' hero stage.
     The build (_build/sub-services/hero-crop.js) measures each video and sets --hv-fw (frame width)
     and --hv-x/y/w/h (the artwork's box in the frame) on the box it marks .ss-hero-media. */
  .ss-hero .ss-hero-media {
    order: 2; position: relative !important; inset: auto !important; transform: none !important; overflow: hidden; mask-image: none !important;
    width: min(100%, 760px) !important; aspect-ratio: calc(var(--hv-w) / var(--hv-h)) !important; margin: -8px auto 32px !important;
  }
  .ss-hero .ss-hero-media > video {
    position: absolute; inset: auto !important; left: calc(var(--hv-x) / var(--hv-w) * -100%) !important; top: calc(var(--hv-y) / var(--hv-h) * -100%) !important;
    width: calc(var(--hv-fw) / var(--hv-w) * 100%) !important; max-width: none; height: auto !important; object-fit: contain !important;
  }
  .ss-hero .ss-hero-media:not(.ss-hero-dark) > video { mask-image: none !important; }
  /* As on the parent service pages, the toolkit illustration is dropped below desktop. */
  .ss-toolkit [aria-hidden="true"][style*="position: absolute"] { display: none !important; }
  /* Text kept beside that art ("max-width: min(1000px, 48%)") gets the full width back. */
  .ss-page [style*="max-width: min("] { max-width: none !important; }
  .ss-grid[style*="repeat(3,"], .ss-grid[style*="repeat(4,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* A comparison table whose first column is only row numbers keeps that column narrow. */
  div:has(> .ss-grid[style*="rgb(20, 26, 38)"] > div:first-child:empty) > .ss-grid { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) !important; gap: 24px !important; }
  /* Heading-and-lead rows stack. */
  .ss-grid[style*="1fr 1.05fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; align-items: start !important; }
  /* Toolkit and FAQ: tabs become one row above the content, scrolling sideways. */
  .ss-toolkit .ss-grid[style*="0.82fr"], .ss-faq .ss-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ss-toolkit [style*="flex-direction: column"][style*="gap: 8px"],
  .ss-faq [style*="flex-direction: column"]:has(> [data-ss-tab]) {
    flex-direction: row !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; position: static !important;
  }
  .ss-toolkit [data-ss-tab], .ss-faq [data-ss-tab] { flex: none !important; white-space: nowrap; }
  /* Toolkit tabs as the parent pages draw them (toolkit-tabs.css): outlined pills on the blue band,
     the chosen one white. The design marks the chosen tab with a translucent white fill (16% or 18%). */
  .ss-toolkit [style*="flex-direction: column"][style*="gap: 8px"] { gap: 8px !important; padding: 14px !important; }
  .ss-toolkit .ss-grid[style*="0.82fr"] > :last-child { padding: 24px !important; }
  .ss-toolkit [data-ss-tab] {
    min-height: 44px; padding: 0 18px !important; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px !important;
    background: rgb(255 255 255 / 6%) !important; color: #fff !important; font-size: 14px !important;
  }
  .ss-toolkit [data-ss-tab][style*="background: rgba(255, 255, 255,"] { background: #fff !important; color: #0646c8 !important; border-color: #fff; }
  .ss-toolkit [data-ss-tab] > span:last-child { display: none; }
  /* Section spacing follows the rest of the site (base.css sets these per breakpoint). */
  .ss-block { padding-right: var(--gutter) !important; padding-left: var(--gutter) !important; }
  .ss-block:not(.ss-hero, .ss-cta) { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; }
  .ss-cta { padding-bottom: var(--section-y) !important; }
  .ss-hero > [style*="padding: 72px 56px"] { padding: 48px var(--gutter) 56px !important; }
  .ss-hero > [style*="inset: 0px 56px"] { inset: 0 var(--gutter) !important; }
  /* Auto-fit grids (stats, "talk you out of it", tools) would leave one card alone on a row. */
  .ss-grid[style*="auto-fit"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ss-grid[style*="auto-fit"]:where(:has(> :nth-child(3):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* Three cards stay three across until there is no room for them. */
  .ss-grid[style*="repeat(3,"]:where(:has(> :nth-child(3):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* Process steps: two columns, without the side art. */
  .ss-process .ss-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important; }
  .ss-process [style*="background-image"], .ss-process [style*="background: url("], .ss-process img { display: none !important; }
  /* Stat band: centred, as on the live service pages. */
  .ss-block[style*="padding: 64px 56px"] .ss-grid { text-align: center; }
  /* Startup offer: the floating rocket and "Limited time" chip collide with the heading. */
  .ss-offer > [aria-hidden="true"], .ss-offer > svg { display: none !important; }
}

/* Engagement models (the site's own section): three across, then one column, never two plus one. */
@media (min-width: 901px) and (max-width: 1100px) {
  .ss-page .engage .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The CTA copy always sits above the art and any shade (the build marks it .ss-cta-copy). */
.ss-cta .ss-cta-copy { position: relative; z-index: 2 !important; }
@media (max-width: 1100px) {
  /* Art drawn as an absolutely placed <img> (.ss-cta-art) moves under the copy, centred. */
  .ss-cta > :has(> .ss-cta-art) { display: flex !important; flex-direction: column; align-items: stretch !important; min-height: 0 !important; }
  .ss-cta > * > .ss-cta-copy { max-width: none !important; }
  /* Art as a flex item beside the copy (AI Chatbots): it drops under the copy at the picture's 2:1 shape. */
  .ss-cta > [style*="flex-wrap: wrap"] > .ss-cta-copy { flex: none !important; }
  .ss-cta > [style*="flex-wrap: wrap"] > div[style*="url("][style*="flex: 1 1"] { flex: none !important; width: 100%; height: 0; min-height: 0 !important; padding-top: 50%; margin: -40px 0 0 !important; background-position: center !important; background-size: cover !important; mask-image: linear-gradient(180deg, transparent 0%, #000 45%) !important; }
  .ss-cta > [style*="flex-wrap: wrap"]:has(> div[style*="url("][style*="flex: 1 1"])::after { display: none; }
  .ss-cta > :has(> .ss-cta-art) > .ss-cta-copy { order: 1; }
  .ss-cta > :has(> .ss-cta-art) > div:empty:not([style*="inset"]) { display: none !important; }
  /* Art inside a background layer (Product & AI Discovery): the layer becomes the picture row. */
  .ss-cta > * > [aria-hidden="true"]:has(> .ss-cta-art) {
    position: relative !important; inset: auto !important; order: 2; height: min(300px, 60vw);
    background: none !important;
  }
  .ss-cta > * > [aria-hidden="true"] > .ss-cta-art {
    left: 50% !important; right: auto !important; translate: -50% 0; height: 100% !important; width: auto !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%) !important;
  }
  .ss-cta > * > [aria-hidden="true"]:has(> .ss-cta-art) > div { display: none; }
  .ss-cta > * > [aria-hidden="true"]:has(> .ss-cta-art) ~ .ss-cta-copy { order: 1; }
  .ss-cta > * > .ss-cta-art {
    order: 2; position: relative !important; inset: auto !important; transform: none !important; margin: 0 auto !important;
    width: min(100%, 640px) !important; height: auto !important; max-width: 100% !important; object-fit: contain !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%) !important;
  }
}

/* Desktop: where the CTA art runs under the copy, a blue shade on the left keeps the copy readable,
   as the designs' other full-bleed CTAs already do. */
@media (min-width: 1101px) {
  .ss-cta > :is([style*="cover"], :has(> [aria-hidden="true"][style*="cover"]), :has(> [aria-hidden="true"][style*="right center / auto 100%"])) {
    > div:has(> a[href="#contact"]) { z-index: 2; }
    &::after {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(90deg, rgb(8 56 180 / 92%) 0%, rgb(8 56 180 / 70%) 32%, rgb(8 56 180 / 0%) 55%);
    }
  }
  /* Art the designs crop with "cover": shown whole, against the right edge, its left edge faded into the card. */
  .ss-cta [style*="/pd-cta.webp"], .ss-cta [style*="/uxa-cta.webp"], .ss-cta [style*="/rdi-cta.webp"] {
    background-size: auto 100% !important; background-position: right center !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%) !important;
  }
  /* CTA cards keep the design's two columns: the card-count rule above would read an art layer as a third card. */
  .ss-cta > .ss-grid[style*="auto-fit"] { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important; }
  /* CTA headings break where they balance, so a long second line never leaves one word alone. */
  .ss-cta h2 { text-wrap: balance; }
  .ss-cta h2 br { display: none; }
  /* Platform Modernisation: the card's full-width art moves to a layer on the right, clear of the copy. */
  .ss-cta > [style*="/pm-cta.webp"] { background-image: none !important; }
  .ss-cta > [style*="/pm-cta.webp"]::before {
    content: ""; position: absolute; top: 50%; right: 16px; width: 66%; aspect-ratio: 1400 / 510; transform: translateY(-50%); pointer-events: none;
    background: url("../../../uploads/sub-services/platform-modernisation/pm-cta.webp") 0 0 / 100% 100% no-repeat; mask-composite: intersect;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .ss-cta > * > [style*="/api-cta.webp"] { aspect-ratio: 1400 / 456; }
  /* Data Engineering and API Development: the art stays in the right-hand side instead of running behind the copy. */
  .ss-cta [style*="/de-cta-v2.webp"], .ss-cta [style*="/api-cta.webp"] {
    inset: 50% 16px auto auto !important; width: 66%; aspect-ratio: 1400 / 510; transform: translateY(-50%);
    background-size: 100% 100% !important; mask-composite: intersect;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%) !important;
  }
  .ss-cta img[src*="/call-analysis.webp"] {
    inset: 50% 0 auto !important; height: auto !important; transform: translateY(-50%); mask-composite: intersect;
    mask-image: linear-gradient(90deg, transparent 0%, #000 25%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%) !important;
  }
}

/* CTAs whose art is a background (on an overlay layer, or on the card itself): the copy takes the
   full width and the art sits centred under it, as the other CTAs’ picture column does. */
@media (max-width: 1100px) {
  .ss-cta > :is(:has(> [aria-hidden="true"][style*="url("]), [style*="url("]) { grid-template-columns: minmax(0, 1fr) !important; flex-direction: column; }
  .ss-cta > * > [aria-hidden="true"][style*="url("] { inset: 0 !important; width: auto !important; aspect-ratio: auto !important; transform: none !important; mask-image: none !important; }
  .ss-cta > * > [aria-hidden="true"][style*="url("], .ss-cta > [style*="url("] { background-position: center bottom !important; background-size: min(100%, 640px) auto !important; }
  /* Mobile App Design’s art has empty space on its left; the design folder’s cropped copy fits here. */
  .ss-cta .ss-grid > [aria-hidden="true"][style*="mad-cta.webp"] { background-image: url("../../../uploads/sub-services/mobile-app-design/mad-cta-crop.webp") !important; background-size: min(92%, 520px) auto !important; }
  .ss-cta > :is(:has(> [aria-hidden="true"][style*="url("]), [style*="url("]) > [style*="min-height"] { min-height: min(300px, 60vw) !important; }
  /* A card with no picture column of its own (Quality Engineering) gets the same space for the art. */
  .ss-cta > [style*="display: flex"]:is([style*="url("], :has(> [aria-hidden="true"][style*="url("])) { flex-direction: column; align-items: stretch !important; }
  .ss-cta > [style*="display: flex"]:is([style*="url("], :has(> [aria-hidden="true"][style*="url("]))::after { content: ""; min-height: min(300px, 60vw); }
}

@media (max-width: 900px) {
  .ss-page .engage .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .ss-process .ss-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  /* Rail and dots as on the parent pages below 900px (service.css .timeline). */
  .ss-process [style*="padding-left: 96px"] { padding-left: 64px !important; }
  .ss-process [style*="left: 26px"] { left: 18px !important; }
  .ss-process [style*="left: -96px"] { left: -64px !important; width: 40px !important; height: 40px !important; font-size: 13px !important; }
  .ss-grid[style*="repeat(3,"]:where(:has(> :nth-child(3):last-child)),
  .ss-grid[style*="auto-fit"]:where(:has(> :nth-child(3):last-child)) { grid-template-columns: minmax(0, 1fr) !important; }
  /* Closing CTA: copy above the picture. */
  .ss-cta .ss-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ss-cta .ss-grid > [style*="min-height"] { min-height: 260px !important; mask-image: linear-gradient(180deg, transparent 0%, #000 40%) !important; background-position: center bottom !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .ss-hero > [style*="padding: 72px 56px"] { padding: 32px var(--gutter) 48px !important; }
  .ss-page h2 { line-height: 1.15 !important; }
  /* Specific enough to beat the tablet rules above, which also match on phones. */
  .ss-page .ss-grid[style] { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  /* Cards drawn as one panel with 1px dividers keep their dividers, not sand-coloured bands. */
  .ss-page .ss-grid[style*="gap: 1px"] { gap: 1px !important; }
  /* Stat values sized like the live pages' stat band. */
  .ss-block[style*="padding: 64px 56px"] .ss-grid > div > div:first-child { font-size: 28px !important; letter-spacing: -1px !important; }
  .ss-grid > [style*="padding: 34px 32px"], .ss-grid > [style*="padding: 32px 30px"] { padding: 24px 22px !important; }
  /* The stat band stays two by two. */
  .ss-page .ss-block[style*="padding: 64px 56px"] .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 16px !important; }
  .ss-page .ss-block[style*="padding: 64px 56px"] .ss-grid > div { padding-top: 0 !important; }
  .ss-hero h1 { font-size: 34px !important; letter-spacing: -1.4px !important; }

  /* Hero: ticks one per line, buttons equal and full width. */
  .ss-hero [style*="gap: 34px"] { flex-direction: column; gap: 14px !important; }
  /* Each tick is text plus a bold phrase; as flex items they split into columns, so set it as text. */
  .ss-hero [style*="gap: 34px"] > span { position: relative; display: block !important; padding-left: 36px; font-size: 16px !important; }
  .ss-hero [style*="gap: 34px"] > span > span:first-child { position: absolute; top: 1px; left: 0; }
  /* Buttons as on the live pages (hero-scene.css): stacked, equal, label centred, arrow pinned right. */
  .ss-hero [style*="gap: 14px"] { display: grid !important; gap: 10px !important; }
  .ss-hero [style*="gap: 14px"] > a { position: relative; width: 100%; height: 50px !important; justify-content: center; padding: 0 16px !important; font-size: 14.5px !important; white-space: nowrap; }
  .ss-hero [style*="gap: 14px"] > a:has(> span) { padding: 0 54px !important; }
  .ss-hero [style*="gap: 14px"] > a > span { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }
  .ss-hero .ss-hero-media { width: 100% !important; margin: -8px 0 20px !important; }

  /* Comparison tables: the column-heading row goes, each row stacks. */
  .ss-grid[style*="background: rgb(20, 26, 38)"] { display: none !important; }
  .ss-grid[style*="padding: 26px 34px"] { padding: 22px !important; gap: 10px !important; }
  .ss-grid [data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #9a8f6a; }


  /* Process "Output": the label above its text in a small rounded box, as on the parent pages. */
  .ss-process [style*="border-radius: 999px; padding: 9px 16px"] { flex-direction: column; align-items: flex-start !important; gap: 3px !important; padding: 10px 14px !important; border-radius: 12px !important; }

  /* Closing CTA: tighter padding, full-width button. */
  /* Every CTA variant (grid or flex card): the copy column gets phone padding and its full width. */
  .ss-cta > * > div:has(> a[href="#contact"]) { padding: 36px 24px 8px !important; max-width: none !important; }
  .ss-cta > * > div > a[href="#contact"] { align-self: stretch !important; justify-content: center; margin-top: 32px !important; white-space: nowrap; }
  .ss-cta .ss-grid > [style*="min-height"] { min-height: 200px !important; }

  /* Startup offer, as on the live pages (home-offer.css): the form loses its card, the email field
     becomes the pill with the mail icon inside it, and the button sits full width underneath. */
  .ss-offer form { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .ss-offer form > span[aria-hidden="true"] { position: absolute; top: 8px; left: 8px; z-index: 1; width: 38px !important; height: 38px !important; }
  .ss-offer form input[type="email"] { flex: none !important; padding: 0 18px 0 58px !important; border: 1px solid rgb(255 255 255 / 12%) !important; border-radius: 999px !important; background: rgb(30 38 56 / 80%) !important; }
  .ss-offer form button { height: 56px !important; padding: 0 7px 0 24px !important; font-size: 15px !important; }
}