/* The site's stylesheet.
   Loaded by every page from /assets/site.css. It used to be inlined in the
   shell, which meant all 212 built pages carried their own copy: 250 KB each,
   53 MB of identical text, and 212 places for the same rule to drift.
   One file means one cascade, cached once and reused on every page. */

/* ============================================================
   TOKENS
   The brand navy is inherited from the live site, softened
   per the spec: mute the navy, pastel tints instead of hard
   contrast, one calm action blue instead of the hot #006afa.
   ============================================================ */
:root {
  --ink:        #2b455f;   /* headings, brand navy */
  --ink-soft:   #4e6479;   /* body copy */
  --ink-faint:  #607488;   /* captions, eyebrows; AA on white and wash */
  --bg:         #ffffff;
  --bg-wash:    #f5f9fa;   /* alternating section band */
  --tile-aqua:  #e4f1f4;   /* pastel tile behind visuals */
  --tile-blue:  #e9f1fb;
  --line:       #e2eaef;   /* hairline borders */
  --action:     #2ea6f5;   /* text links and accents */
  --action-deep:#234fa4;
  --band:       #2b455f;   /* closing CTA + footer, the softened navy */
  --band-text:  #cfdbe7;
  --amber:      #de9b3f;   /* G2 stars only */
  --tertiary:   #1ec3d9;   /* the teal panel behind playbook covers */
  --hero-band:  #f1f5f9;   /* the soft band the article heroes sit on */
  --radius:     12px;
  --radius-sm:  8px;
  --container:  1176px;
  --font-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Mulish", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
/* A section heading is the same size wherever it sits. This was only set on
   `.section-head h2`, so any h2 outside that wrapper fell back to the
   browser's 1.5em and came out at 24px against everything else's 38px.
   Components that genuinely need a different size still set their own. */
h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
a { color: var(--action); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
/* Every image is served with width and height attributes, added by
   optimizeImageMarkup so the browser can reserve space and avoid layout shift.
   Those attributes are also presentational hints for the used height, so where
   CSS sets a width but no height the attribute's height wins and the image is
   squashed to fit: the founders portrait rendered 400x898 from a 1278x898 file,
   a third of its correct width. `height: auto` restores the natural ratio while
   keeping the reserved space, and any rule that sets an explicit height still
   beats it on specificity. */
img { height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 18px; z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px); }
/* Distance from the viewport edge to the container's content edge. Lets
   full-bleed carousels line their first card up with the grid. */
:root {
  --gutter: calc(max(0px, (100vw - 1240px) / 2) + clamp(20px, 5vw, 32px));
  /* horizontal rails pull their shadow gutter back out with negative margins,
     so this must never exceed the page gutter or the page scrolls sideways */
  --rail-inset: 22px;
}
@media (max-width: 639px) { :root { --rail-inset: 18px; } }

/* Eyebrows, sized to match the logos-strip label. */
/* Gradient accent for headline phrases (used on the comparison head
   and the roles hero). */
.accent-word {
  background: linear-gradient(90deg, #1ec3d9, #2fa2f8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #5dc1c7;
  margin-bottom: 14px;
}
.section { padding: 88px 0; }
.section.is-wash { background: var(--bg-wash); }
.section.is-tint { background: #e8eef5; }
.section.is-wash-grey { background: #f4f6f8; }
.section.is-tint .eyebrow, .founders-hero .eyebrow { color: #5dc1c7; }
.section.is-dark-band { background: var(--band); }
/* Textured dark band (photogate-style): soft 45deg fabric folds in
   the navy, a fine diagonal pinstripe, grain, and a cyan cast at the
   top. Layer order: folds in the background stack, stripes+grain as
   overlays, content lifted above. */
.section.is-dark-band.is-textured, .closing-card.is-textured, .rd-overseas.is-textured, .rd-statband.is-textured, .rd-faq-card.is-textured, .rd-sig-card.is-textured, .rg-spec.is-textured, .cse-quote.is-textured, .ab-case.is-textured, .ab-vs-col.is-solution.is-textured, .ab-hybrid.is-textured, .ab-reviews.is-textured {
  position: relative;
  background:
    radial-gradient(at 50% 0%, rgba(30,195,217,0.08) 0%, rgba(0,0,0,0) 50%),
    linear-gradient(45deg,
      #2b455f 0%, #2b455f 10.5%, #2b455f 20.9%,
      rgba(96,124,152,0.4) 28.9%,
      #35516f 36.9%, #35516f 46.7%,
      rgba(96,124,152,0.4) 54.2%,
      #35516f 59.6%, #35516f 63.4%,
      rgba(96,124,152,0.4) 67.3%,
      #2b455f 72.9%, #35516f 76.1%, #2b455f 80.8%,
      #35516f 84.7%, #35516f 89.8%, #35516f 100%),
    var(--band);
}
.is-textured::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.07;
}
.is-textured::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0) 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 11px);
  opacity: 0.07;
}
.is-textured .container, .is-textured > * { position: relative; z-index: 1; }
.section.is-dark-band .eyebrow { color: #5dc1c7; }
.section.is-dark-band h2 { color: #fff; }
.section.is-dark-band .section-head p:not(.eyebrow) { color: #cfdbe7; }
.section.is-dark-band .compare-foot p { color: #a8bacb; }
.section.is-dark-band .vs { border: 0; box-shadow: 0 22px 44px rgba(9,17,26,0.4); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); margin-bottom: 14px; }
/* Centered variant: everything on the axis */
.section-head.is-center { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head.is-center p:not(.eyebrow) { margin-left: auto; margin-right: auto; max-width: 640px; }
.section-head p:not(.eyebrow) { font-size: 1.06rem; }

/* Buttons: pills, one calm blue. Arrow chip borrowed from Near. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border-radius: 999px; padding: 13px 26px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: linear-gradient(90deg, #1ec3d9, #2fa2f8); color: #fff; }
.btn-primary:hover { background: linear-gradient(90deg, #17b3c8, #1f8fe6); }
.btn-primary .btn-arrow {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: #2fa2f8;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; margin-right: -10px;
}
.btn-primary .btn-arrow svg { display: block; }
.btn-outline { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost-light { border: 1.5px solid rgba(22,50,74,0.45); color: #16324a; background: transparent; }
.btn-ghost-light:hover { border-color: #16324a; }

/* ============================================================
   HEADER / NAV  (spec 2.4: no Home, + Services, + Apply for Jobs)
   ============================================================ */
/* At the top of the page the bar floats: container width, rounded,
   lifted off the top edge. Once scrolling starts it expands into the
   full-width sticky bar. (Live-site behavior Philip asked to keep.) */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: 14px clamp(12px, 3vw, 26px) 0;
  transition: padding 0.3s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.header .nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 14px 34px rgba(43,69,95,0.12);
  transition: background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}
.header.is-scrolled {
  padding: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(43,69,95,0.10);
}
.header.is-scrolled .nav {
  background: transparent; border-color: transparent;
  border-radius: 0; box-shadow: none;
}

.nav {
  /* position: relative so the roles mega panel can align to the bar itself
     rather than to its trigger, and match its width. */
  position: relative;
  max-width: 1304px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px);
  display: flex; align-items: center; height: 60px;
}
.logo { flex: none; display: block; }
.logo img { height: 31px; width: auto; display: block; }
/* The list floats centered between the logo and the CTA group, so the
   bar reads as three calm clusters instead of one crowded row. */
.nav-list { display: flex; align-items: center; gap: 10px; list-style: none; flex: 1; justify-content: center; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 500;
  color: var(--ink-soft); padding: 9px 12px; border-radius: 8px; background: none; border: 0;
  transition: color 0.15s ease;
  /* "About Us" is the only two-word item and it broke across two lines once the
     bar got tight, which made the whole nav look 60px tall. */
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--bg-wash); text-decoration: none; }
.nav-link .caret {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.5;
  transition: transform 0.2s ease;
}
.nav-item:hover .nav-link .caret,
.nav-item.is-open .nav-link .caret { transform: rotate(225deg) translateY(-1px); }
.nav-dropdown {
  /* Centred under its trigger rather than hung off its left edge, so each
     panel reads as belonging to the word above it. --dd-x is measured on
     open and nudges a panel that would otherwise run off the screen. */
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateX(var(--dd-x, 0px));
  min-width: 284px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 18px 40px rgba(43,69,95,0.10);
  padding: 10px; display: none; z-index: 110;
}
/* Invisible bridge across the gap between trigger and panel, so
   moving the cursor down does not drop the hover mid-way. */
.nav-dropdown::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-item:hover .nav-dropdown,
.nav-item.is-open .nav-dropdown { display: block; }
.nav-dropdown a { text-decoration: none; }
.dd-link {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 10px;
}
.dd-link:hover { background: var(--bg-wash); }
.dd-link.is-viewall {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--action); gap: 6px; margin-top: 2px;
}

/* An entry after the view-all link is a different way to browse, not another
   item in the list above it. The hairline makes that grouping deliberate
   rather than something that fell off the bottom. */
.dd-link.is-viewall + .dd-link {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.dd-link.is-viewall:hover { background: transparent; color: #1769a8; }
.dd-icon {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--bg-wash); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.dd-icon img { width: 20px; height: 20px; display: block; }
/* Each dropdown item gets its own soft tint behind its icon */
.dd-icon.t1 { background: #e1f3f7; }
.dd-icon.t2 { background: #eaf1fd; }
.dd-icon.t3 { background: #e7f6ec; }
.dd-icon.t4 { background: #faf3e2; }
.dd-icon.t5 { background: #f3effb; }
.dd-icon.t6 { background: #fdeef0; }
.dd-icon.is-fluent { background: transparent; border-radius: 0; }
.dd-icon.is-fluent svg, .dd-icon.is-fluent img { width: 24px; height: 24px; }
.dd-copy { min-width: 0; }
.dd-copy b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.3; }
.dd-copy small { display: block; font-family: var(--font-body); color: var(--ink-faint); font-size: 12px; margin-top: 1px; }
/* Roles: a department mega menu, so every role we place is reachable from the
   nav rather than only from /roles. Four columns over two rows holds all eight
   departments; a department with more roles than fit gets its own "view all".
   Built to match what buyers see on competitor sites, which is the comparison
   the team made. */
/* The panel is as wide as the nav bar and sits directly beneath it, so the two
   read as one card. Hanging it off its own trigger left it jammed against the
   left edge of the screen, because a 1120px panel centred under a word that
   sits 430px in has nowhere to go. Somewhere does the same thing: their panel
   is exactly their nav width and starts 1px below it. */
.nav-item.has-mega { position: static; }
.nav-dropdown.is-roles-mega {
  display: none; left: clamp(16px, 4vw, 32px); right: clamp(16px, 4vw, 32px);
  width: auto; transform: none; top: calc(100% - 8px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 26px; padding: 26px 30px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.nav-item:hover .nav-dropdown.is-roles-mega,
.nav-item.is-open .nav-dropdown.is-roles-mega { display: grid; }
/* Columns are equal-height so each "View all" sits on the same baseline
   instead of trailing whichever list happens to be longest. */
.rm-col { min-width: 0; padding-bottom: 6px; display: flex; flex-direction: column; }
.rm-col .rm-list { flex: 1; }
/* Colour sits on the eight department marks, not on all 42 roles. Somewhere's
   menu carries no icons at all and is cleaner for it; a mark per role would be
   42 competing objects. One per heading gives the panel colour and makes the
   groups scannable without turning the list into a grid of chips. */
.rm-dept {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  padding: 0 8px 9px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.rm-ico {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.rm-ico img { width: 15px; height: 15px; display: block; }
/* Same tint palette as the other dropdown icons, so the nav keeps one
   colour language rather than gaining a second. */
.rm-ico.t1 { background: #e1f3f7; }
.rm-ico.t2 { background: #eaf1fd; }
.rm-ico.t3 { background: #e7f6ec; }
.rm-ico.t4 { background: #faf3e2; }
.rm-ico.t5 { background: #f3effb; }
.rm-ico.t6 { background: #fdeef0; }
.rm-list { display: flex; flex-direction: column; }
.rm-list a, .rm-col .rm-all {
  display: block; padding: 6px 8px; border-radius: 8px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-list a:hover { background: var(--bg-wash); color: var(--ink); text-decoration: none; }
.rm-col .rm-all {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 8px; padding-top: 10px;
  color: var(--action); font-weight: 600; font-size: 12.5px;
}
.rm-col .rm-all:hover { text-decoration: none; }
/* Spans the full width under the columns, so the way to everything is the last
   thing read rather than buried in a column. */
.rm-viewall {
  grid-column: 1 / -1; justify-content: center; margin-top: 6px;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.nav-dropdown.is-services { min-width: 356px; }
.nav-dropdown.is-compact { min-width: 196px; }
.nav-dropdown.is-compact-wide { min-width: 306px; }
.nav-dropdown.is-services .dd-copy small { white-space: nowrap; }
/* Resources mega panel: the live site's proportions, playbooks in
   an inset panel with large covers */
.nav-dropdown.is-two-col.is-mega { grid-template-columns: 268px 372px; width: auto; padding: 14px; gap: 10px; }
.mega-pb { background: #f2f5f8; border-radius: 14px; padding: 20px 22px; }
.mega-pb .dd-label { padding: 0 0 6px; }
.mega-covers { display: flex; gap: 10px; margin: 8px 0 16px; }
.mega-covers a {
  display: block; border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(43,69,95,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mega-covers a:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(43,69,95,0.24); }
.mega-covers img { width: 102px; height: 138px; object-fit: cover; display: block; }
.mega-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--action);
}
.dd-ind { display: flex; align-items: center; justify-content: center; color: var(--action); }
.dd-ind svg { width: 20px; height: 20px; }
.nav-link.is-plain { background: none; border: 0; font: inherit; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav-link.is-plain:hover { color: var(--action-deep); }
.nav-dropdown .dd-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 8px 12px 4px; font-family: var(--font-display); font-weight: 600;
}
.nav-dropdown.is-two-col { display: none; grid-template-columns: 1fr 1fr; min-width: 480px; }
.nav-item:hover .nav-dropdown.is-two-col,
.nav-item.is-open .nav-dropdown.is-two-col { display: grid; }
.nav-cta-group { display: flex; align-items: center; gap: 18px; margin-left: 12px; flex: none; }
/* "Call us" in the header. Sits before Apply for Jobs so the two quiet links
   read as a pair against the one solid CTA. The number is dropped below 1200px
   rather than the whole link: the nav has five dropdowns to fit, and a bare
   "Call us" still dials on a phone. */
.nav-call {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--ink-soft); white-space: nowrap;
}
.nav-call:hover { color: var(--ink); text-decoration: none; }
.nav-call-ico { flex: none; color: var(--ink-faint); }
.nav-call:hover .nav-call-ico { color: var(--action); }
.nav-call-num { font-weight: 600; color: var(--ink); }
.nav .btn { padding: 9px 19px; font-size: 13.5px; }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 10px; margin-left: auto; }
.nav-burger span {
  width: 22px; height: 2px; background: var(--ink); display: block;
  /* Rotating about the bar's own centre, so the two outer bars meet in the
     middle rather than pivoting from an end and swinging wide. */
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
/* Driven off aria-expanded, which nav.js already maintains, so the animation
   needs no second source of truth and cannot fall out of step with the state
   a screen reader is told about.
   7px is the bar height plus the 5px gap: how far each outer bar travels to
   sit on top of the middle one. */
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; }

/* ============================================================
   HERO  (spec 4.1: positioning-led, no "$0 until you hire")
   ============================================================ */
.hero {
  /* The live site hero background: its gradient asset plus the
     same fade-to-white at the bottom edge. */
  background-color: #fff;
  background-image: linear-gradient(180deg, rgba(255,255,255,0) 72%, #fff 97%), url("/assets/hero-gradient-bg.avif");
  background-size: auto, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
  padding: 154px 0 84px;
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.01fr;
  gap: 44px; align-items: center;
}
.g2-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 26px; font-family: var(--font-display);
}
.g2-badge:hover { text-decoration: none; border-color: var(--ink-faint); }
.g2-badge .stars { color: var(--amber); letter-spacing: 1px; font-size: 12px; }
.g2-badge .g2-mark { height: 16px; width: 16px; }
.hero h1 {
  font-size: clamp(2.35rem, 4.3vw, 3.15rem);
  font-weight: 500; letter-spacing: -0.028em; line-height: 1.1;
  margin-bottom: 22px;
}
.hero-sub { font-size: 1.13rem; max-width: 50ch; margin-bottom: 30px; }
.hero-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-micro { font-size: 13.5px; color: var(--ink-faint); }
.hero-trust {
  display: flex; align-items: center; gap: 44px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line);
}
.trust-divider { width: 1px; align-self: stretch; background: var(--line); flex: none; }
.trust-stat { font-family: var(--font-display); }
.trust-stat b { display: block; font-size: 1.45rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.trust-stat span { font-size: 13px; color: var(--ink-faint); }

/* The signature element: the requirements-driven model as UI.
   A brief card cycles three real-world briefs and resolves each
   into a matched candidate card. */
.hero-visual { position: relative; }
.brief-stack { display: grid; gap: 14px; max-width: 430px; margin-left: auto; }
.ui-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 22px 44px rgba(43,69,95,0.08);
  padding: 20px 22px;
}
.ui-card-label {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 12px;
}
.brief-row { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.brief-row:last-of-type { border-bottom: 0; }
.brief-row .k { color: var(--ink-faint); flex: none; }
.brief-row .v { color: var(--ink); font-weight: 700; text-align: right; }
.brief-chips { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; }
.chip {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--tile-aqua); border-radius: 999px; padding: 4px 11px;
  font-family: var(--font-display);
}
.brief-connector { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brief-connector .conn-line { flex: 1; height: 1px; background: var(--line); }
.brief-connector .conn-text { font-size: 12px; color: var(--ink-faint); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.match-card { position: relative; }
.match-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.match-head .match-avatar { overflow: visible; position: relative; }
.match-avatar > img:first-child { border-radius: 50%; }
.match-head .match-avatar .avatar-flag {
  position: absolute; right: -6px; bottom: -4px; z-index: 2;
  width: 23px; height: 17px; border-radius: 4px;
  border: 2px solid #22384e; object-fit: cover;
}
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-aqua); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  overflow: hidden;
}
.avatar.is-blue { background: var(--tile-blue); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.match-name { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.match-role { font-size: 13.5px; color: var(--ink-soft); }
.match-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.match-meta .chip { background: var(--bg-wash); border: 1px solid var(--line); }
.match-prev { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.prev-logos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.match-prev .k { font-size: 12px; color: var(--ink-faint); }
.match-prev .prev-logo { height: 20px; width: auto; max-width: 130px; }
.match-prev .prev-logo.is-badge { height: 30px; }
.match-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.match-label-row .ui-card-label { margin-bottom: 0; }
.verified-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--action);
  background: #eef3fd; border-radius: 999px; padding: 4px 11px;
}

/* ============================================================
   ROLES PAGE  (spec 4.2: grouped, filterable, popular module)
   ============================================================ */
/* Live roles hero, replicated exactly from the production page:
   white inset panel with line art, and the 13-column portrait gallery
   arcing along the bottom (their spacing values verbatim, in rem). */
.section-roles-hero { position: relative; min-height: 48.75rem; padding-top: 74px; overflow: hidden; }
.section-roles-hero .padding-global { width: 100%; padding-left: 5%; padding-right: 5%; }
.section-roles-hero .container-large { width: 100%; max-width: 80rem; margin: 0 auto; }
.section-roles-hero .padding-section-large { position: relative; z-index: 2; padding: 7.5rem 0; }
.roles-hero_wrapper { position: relative; z-index: 10; }
.about-hero-content { display: flex; justify-content: center; align-items: flex-start; margin-top: 3rem; }
.roles_heading-wrapper { display: flex; flex-flow: column; align-items: center; text-align: center; }
.roles_heading-wrapper .headline {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #5dc1c7;
}
.roles_heading-wrapper h1 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.028em;
  font-size: clamp(2.35rem, 4.3vw, 3.15rem); line-height: 1.1;
}
.roles_heading-wrapper .max-width-small { width: 100%; max-width: 30rem; }
.roles_heading-wrapper .text-size-medium { font-size: 1.06rem; color: var(--ink-soft); }
.spacer-xsmall { width: 100%; padding-top: 1rem; }
.spacer-medium { width: 100%; padding-top: 2rem; }
.section-bg_wrapper {
  position: absolute; inset: 1.25rem; overflow: hidden; pointer-events: none;
  background-color: #fff; border-radius: 1.25rem;
}
.section-bg_lines { color: #dfe8f1; width: 100%; height: 100%; }
.section-bg_gallery {
  position: absolute; inset: auto 0.625rem 0%; height: 22.875rem; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start; gap: 0.5rem;
}
.section-bg_column { display: flex; flex-flow: column; flex: none; gap: 0.625rem; }
.section-bg_column.cc-1 { margin-top: 2.625rem; }
.section-bg_column.cc-2 { margin-top: 4.375rem; }
.section-bg_column.cc-4 { margin-top: 6.75rem; }
.section-bg_column.cc-5 { margin-top: 12rem; }
.section-bg_column.cc-6 { margin-top: 15rem; }
.section-bg_column.cc-7 { margin-top: 13rem; }
.section-bg_column.cc-8 { margin-top: 14.875rem; }
.section-bg_column.cc-9 { margin-top: 12rem; }
.section-bg_column.cc-10 { margin-top: 6.625rem; }
.section-bg_column.cc-11 { margin-top: 4.375rem; }
.section-bg_column.cc-12 { margin-top: 2.625rem; }
.section-bg_visual {
  position: relative; overflow: hidden; opacity: 0.7;
  width: 6.1875rem; height: 7.5625rem;
  background-color: #f6f6f6; border-radius: 0.75rem;
}
.section-bg_visual .img-cover { object-fit: cover; object-position: 50% 0%; width: 100%; height: 100%; border-radius: 0; display: block; }
.u-opacity-100 { opacity: 1; }
.u-greyscale { filter: grayscale(1); }
/* Search strip under the hero, wired to the catalog filter */
.allroles-head { align-items: flex-end; }
.allroles-head .roles-search { margin: 0; max-width: 400px; flex: 1 1 320px; box-shadow: none; padding: 12px 20px; }
.roles-search {
  display: flex; align-items: center; gap: 10px;
  max-width: 540px; margin: 0 auto;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 14px 24px; box-shadow: 0 18px 40px rgba(43,69,95,0.12);
  transition: border-color 0.2s ease;
}
.roles-search:focus-within { border-color: var(--action); }
.roles-search svg { flex: none; color: var(--ink-faint); }
.roles-search input {
  border: 0; outline: none; width: 100%; background: transparent;
  font-family: var(--font-display); font-size: 15px; color: var(--ink);
}
.roles-search input::placeholder { color: var(--ink-faint); }
@media (max-width: 991px) {
  .section-roles-hero { min-height: 42rem; }
}
@media (max-width: 639px) {
  .section-roles-hero { min-height: 38rem; }
  .section-roles-hero .padding-section-large { padding: 4rem 0; }
  .section-bg_gallery { height: 15rem; }
  .section-bg_visual { width: 4.2rem; height: 5.2rem; }
}
.pop-roles { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.pop-role {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px 18px; color: inherit; text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pop-role:hover { text-decoration: none; border-color: transparent; transform: translateY(-3px); box-shadow: 0 20px 44px rgba(43,69,95,0.13); }
.pop-role .dd-icon { width: 38px; height: 38px; margin-bottom: 12px; }
.pop-role .dd-icon img { width: 22px; height: 22px; }
.pop-role b { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }
.pop-role .impact-more { margin-top: auto; font-size: 12.5px; }
/* Catalog: sticky filter rail on the left (Growth Assistant pattern),
   compact role cards on the right. */
.roles-layout2 { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; }
.roles-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.rail-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 18px;
}
.rail-card h4 {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 12px;
}
.rail-card .dept-pills, .rail-card .roles-sort { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.dept-pill {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 9px; text-align: left;
  padding: 9px 12px; cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.dept-pill svg { flex: none; opacity: 0.7; }
.dept-pill.is-on svg { opacity: 1; }
.dept-pill:hover { background: var(--bg-wash); color: var(--ink); }
.dept-pill.is-on { background: #e7f4fd; color: #1769a8; }
.rail-note { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.rail-note a { font-weight: 600; font-family: var(--font-display); }
/* Spacing between sections is a flex gap on the container, never a sibling
   margin: a hidden section still satisfies `+`, which left the first visible
   section carrying a top margin and dropping below the filter rail. */
#rolesCatalog { display: flex; flex-direction: column; gap: 36px; }
.dept-section h3 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px;
}
.dept-section h3 small { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
/* Compact role card: small portrait tile, department chip, title,
   one-line pitch, find-out-more. */
.role-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; color: inherit; text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.role-card:hover { text-decoration: none; border-color: transparent; transform: translateY(-3px); box-shadow: 0 20px 44px rgba(43,69,95,0.13); }
/* Listing cards lead with the title, not a portrait (Philip's call).
   The visual stays for the carousels that still use these cards. */
.roles-layout2 .role-visual { display: none; }
.role-visual {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden; flex: none;
  display: flex; align-items: flex-end; justify-content: center; margin-bottom: 14px;
}
.role-visual img { height: 92%; width: auto; max-width: 90%; object-fit: contain; object-position: bottom; display: block; }
.rv-aqua { background: #d9eef4; } .rv-blue { background: #dfeafc; }
.rv-mint { background: #ddf1e5; } .rv-sand { background: #f6ecd3; }
.rv-lilac { background: #ece5f8; } .rv-rose { background: #fbe2e6; }
.role-chip {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; margin-bottom: 9px;
}
.rc-aqua { background: #d9eef4; color: #16657c; } .rc-blue { background: #dfeafc; color: #2456a8; }
.rc-mint { background: #ddf1e5; color: #1d7a48; } .rc-sand { background: #f6ecd3; color: #8a6a1d; }
.rc-lilac { background: #ece5f8; color: #5d43a4; } .rc-rose { background: #fbe2e6; color: #a83a4e; }
.role-card b { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink); margin-bottom: 6px; }
.roles-layout2 .role-card { padding: 24px 26px; }
.roles-layout2 .role-card b { font-size: 20px; letter-spacing: -0.015em; margin-bottom: 8px; }
.roles-layout2 .role-chip { margin-bottom: 12px; }
.role-card p {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.role-card .impact-more { margin-top: auto; font-size: 13px; }
.roles-empty { display: none; text-align: center; color: var(--ink-faint); font-size: 15px; padding: 40px 0 10px; }
@media (max-width: 1023px) {
  .pop-roles { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .roles-layout2 { grid-template-columns: minmax(0,1fr); }
  .roles-rail { position: static; }
  .rail-card .dept-pills { flex-direction: row; flex-wrap: wrap; }
  .rail-card .roles-sort { flex-direction: row; }
}
@media (max-width: 639px) {
  .roles-hero { padding-top: 132px; }
  .pop-roles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .role-grid { grid-template-columns: minmax(0,1fr); }
}

/* ============================================================
   ROLE DETAIL PAGES  (template shared by all 56 roles)
   Narrative: hook -> pain -> the math -> the work -> proof ->
   why overseas -> process -> explore -> FAQ.
   ============================================================ */
.rd-hero {
  padding: 150px 0 72px;
  background-image: linear-gradient(180deg, rgba(255,255,255,0) 62%, #fff 97%), url("/assets/hero-gradient-bg.avif");
  background-size: auto, cover; background-position: center, center 30%; background-repeat: no-repeat;
}
.rd-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(30px, 5vw, 64px); align-items: center; }
.rd-hero h1 { font-size: clamp(2.2rem, 3.9vw, 2.95rem); letter-spacing: -0.028em; line-height: 1.09; margin-bottom: 16px; }
.rd-hero-copy > p { color: var(--ink-soft); font-size: 1.08rem; max-width: 52ch; margin-bottom: 26px; }
.rd-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.rd-micro { font-size: 13px; color: var(--ink-faint); }
/* The signature: the homepage's match card, cast for this role, on
   the hero-tile artwork. */
.rd-tile {
  position: relative; overflow: hidden;
  background: #b5daf5 url("/assets/hero-tile-deep.svg") center / cover no-repeat;
  border-radius: 18px; padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 24px 52px rgba(43,69,95,0.16);
}
.rd-match {
  background: #22384e; border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 16px 34px rgba(43,69,95,0.14);
}
.rd-match-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.rd-match-avatar { position: relative; width: 74px; height: 74px; flex: none; }
.rd-match-avatar .ph { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; display: block; background: var(--bg-wash); }
/* The cut-outs are square, head-to-waist. At 1:1 in a 74px circle the face is a
   speck, so the frame zooms - but the images are NOT consistently framed: the
   head centre ranges 38-58% horizontally and 16-27% vertically across the set.
   One global origin therefore cannot work, and the Executive Assistant photo,
   the furthest right and lowest of all of them, is what exposed it.
   The origin below is only the fallback. generator/measure-role-framing.py
   measures each photo and build-role-details.py emits a per-role origin inline.
   The scale here and SCALE there must stay in step. object-position is
   deliberately absent: the image and the circle are both square, so there is no
   overflow for it to act on and setting it only fought the transform. */
.rd-match-avatar .ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); transform-origin: 49% -15%; display: block; }
.rd-match-flags { position: absolute; right: -10px; bottom: -4px; display: flex; }
.rd-match-flags img { width: 18px; height: 13px; border-radius: 2.5px; border: 1.5px solid #22384e; object-fit: cover; }
.rd-match-flags img + img { margin-left: -6px; }
.rd-match-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; line-height: 1.3; }
.rd-match-sub { font-size: 12.5px; color: #a8bacb; }
.rd-match-rows { display: flex; flex-direction: column; }
.rd-match-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13.5px; color: #cfdbe7;
}
.rd-match-row b { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 14px; }
.rd-match-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; color: #22384e;
  background: #aef1e1; border-radius: 999px; padding: 6px 14px;
}
/* pain cards */
.rd-pains { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.rd-pain-list { display: flex; flex-direction: column; gap: 14px; }
.rd-pain-figure { border-radius: var(--radius); overflow: hidden; box-shadow: 0 26px 54px rgba(43,69,95,0.16); }
.rd-pain-figure img { width: 100%; height: 100%; aspect-ratio: 4 / 3.5; object-fit: cover; display: block; }
.rd-pain {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; display: flex; gap: 16px; align-items: flex-start;
}
.rd-pain .dd-icon { width: 42px; height: 42px; flex: none; }
.rd-pain b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink); margin-bottom: 7px; }
.rd-pain p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
/* the math */
.rd-math {
  /* Even split. The columns were 0.84fr / 1.16fr because the local side carries
     shorter lines, but the two read as a comparison and an uneven pair just
     looks lopsided - which is what the team flagged. Equal widths win over the
     tighter text measure here. */
  display: grid; grid-template-columns: minmax(0,1fr) 96px minmax(0,1fr);
  align-items: stretch;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 52px rgba(43,69,95,0.10);
}
.rd-math-col { padding: 36px 40px; display: flex; flex-direction: column; }
.rd-math-col.is-us { background: #fafbfd; }
.rd-math-col.is-ho { background: #eaf4fd; }
.rd-math-pill {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 13px; margin-bottom: 16px;
}
.rd-math-col.is-us .rd-math-pill { background: #edeff2; color: var(--ink-soft); }
.rd-math-col.is-ho .rd-math-pill { background: #22384e; color: #fff; }
.rd-math-avatars { display: flex; align-items: center; margin-bottom: 18px; }
.rd-math-avatars img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 2.5px solid #fff; display: block;
}
.rd-math-avatars img + img, .rd-math-avatars .more { margin-left: -10px; }
.rd-math-col.is-us .rd-math-avatars img { filter: grayscale(1); opacity: 0.85; }
.rd-math-avatars .more {
  width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #fff;
  background: #22384e; color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
}
.rd-math-col h3 { font-size: 1.02rem; margin-bottom: 2px; }
.rd-math-amount { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 2.7vw, 2.3rem); letter-spacing: -0.02em; color: var(--ink); line-height: 1; margin: 10px 0 6px; }
.rd-math-amount small { font-size: 0.48em; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.rd-math-note { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 20px; }
.rd-math-col ul { list-style: none; display: flex; flex-direction: column; margin-top: auto; }
.rd-math-col li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; padding: 10px 0;
}
.rd-math-col li + li { border-top: 1px solid rgba(43,69,95,0.09); }
.rd-math-col li .vig-check-icon { width: 17px; height: 17px; font-size: 9px; background: #dff0e8; color: #1d9d6f; margin-top: 1px; flex: none; }
.rd-math-col.is-us li .vig-check-icon { background: #f2e8e6; color: #b06a4a; }

/* The local card's lines are shorter than the ones beside it, so with equal
   padding it ended 178px clear of its own right edge against 40px on the left,
   and 34px worse than the card opposite. The columns are deliberately the same
   width - they were 0.84/1.16 once and that read as lopsided - so the fix is to
   move the content inside the box rather than resize the box.

   Shifting it right by 34px lands its right-hand gap on 144px, the same as the
   card opposite, and pulls both blocks toward the save badge so the pair reads
   as facing each other across it. Only above the stacking breakpoint: once the
   columns are on top of each other there is no pair to balance. */
@media (min-width: 1068px) {
  .rd-math-col.is-us { padding-left: 74px; }
}
.rd-math-mid {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #fafbfd 0%, #fafbfd 50%, #eaf4fd 50%, #eaf4fd 100%);
}
.rd-math-mid::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 1px; background: var(--line); }
.rd-math-save {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(135deg, #1ec3d9, #2fa2f8); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.1;
  box-shadow: 0 12px 28px rgba(23,120,180,0.35);
  border: 4px solid #fff; text-align: center;
}
.rd-math-save small { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }
.rd-math-foot { text-align: center; font-size: 12.5px; color: var(--ink-faint); margin-top: 18px; }
/* the work: intro left, duty cards as a carousel (Globaltize pattern) */
.rd-work-layout {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
  padding-left: var(--gutter);
}
/* dark band: the copy inverts, the cards stay light so they pop */
.rd-work-dark .eyebrow { color: #5dc1c7; }
.rd-work-dark .rd-work-intro h2 { color: #fff; }
.rd-work-dark .rd-work-intro > p { color: #cfdbe7; }
.rd-work-dark .cs-arrow { background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.25); color: #fff; }
.rd-work-dark .cs-arrow:hover { background: #fff; color: var(--ink); border-color: transparent; }
.rd-work-dark .rd-duty-card { border-color: transparent; box-shadow: 0 16px 28px -12px rgba(9,17,26,0.5); }
.rd-work-intro h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 12px; }
.rd-work-intro > p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 24px; }
/* arrows sit under the strip they drive; the CTA stays with the copy */
.rd-work-nav { display: flex; gap: 10px; margin-top: 22px; }
.rd-work-nav .cs-arrow { width: 46px; height: 46px; }
.rd-work-intro .btn { margin-top: 22px; }
.rd-duty-card {
  flex: 0 0 300px; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; display: flex; flex-direction: column;
}
/* align-self:center is inherited from .hiw-num, which is written for
   .hiw-card - a grid, where it means vertically. This card is a column
   flex, where the cross axis is horizontal, so the same rule centred the
   circle left-to-right above left-aligned text. */
.rd-duty-card .hiw-num {
  width: 32px; height: 32px; font-size: 13px; margin-bottom: 16px;
  align-self: flex-start;
}
.rd-duty-card b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink); margin-bottom: 8px; line-height: 1.35; }
.rd-duty-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
/* client story */
.rd-story {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
  background: #fff; border-radius: var(--radius); padding: clamp(26px, 3.4vw, 44px);
  box-shadow: 0 24px 52px rgba(43,69,95,0.08);
}
.rd-story-face { position: relative; width: clamp(120px, 14vw, 168px); }
.rd-story-face img.face { width: 100%; aspect-ratio: 1; border-radius: 18px; object-fit: cover; display: block; }
.rd-story-face img.mark {
  position: absolute; right: -12px; bottom: -12px; height: 30px; width: auto; max-width: 90px;
  background: #fff; border-radius: 9px; padding: 6px 9px; object-fit: contain;
  box-shadow: 0 8px 20px rgba(43,69,95,0.16);
}
.rd-story-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink); line-height: 1.45; margin-bottom: 14px; }
.rd-story-who { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 12px; }
.rd-story-who b { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
/* why overseas band: centered, stats row, region flags */
.rd-overseas-center { text-align: center; }
.rd-overseas-center .section-head p:not(.eyebrow) { color: #cfdbe7; max-width: 62ch; }
.rd-overseas-center .section-head { margin-bottom: 40px; }
.rd-overseas-center .rd-statband-grid { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 760px; margin: 0 auto 36px; }
.rd-flags-marquee {
  overflow: hidden; margin-top: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rd-flags-row { display: flex; gap: 12px; width: max-content; animation: flagsScroll 34s linear infinite; }
@keyframes flagsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rd-flags-row { animation: none; } }
.rd-flags-row span { flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: #cfdbe7;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px; padding: 6px 14px 6px 7px;
}
.rd-flags-row img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; display: block; }
/* role stats band (dark, right after hero) */
.rd-statband { padding: 44px 0; }
/* Columns follow the number of stats rather than being fixed at four. Service
   and industry pages carry three, so a hard-coded repeat(4) left the third stat
   ending two thirds across with an empty fourth column: the band read as
   left-aligned with a wide gap down the right. grid-auto-flow: column gives
   each stat an equal share of the row whatever the count. */
.rd-statband-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px;
}
.rd-stat { text-align: center; padding: 10px 8px; }
.rd-stat + .rd-stat { border-left: 1px solid rgba(255,255,255,0.14); }
.rd-stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; color: #fff; margin-bottom: 4px; }
.rd-stat span { font-size: 13px; color: #a8bacb; }
/* when it pays off: a self-scoring checklist. Ticking signs updates a
   live readout, so the section does something instead of listing things. */
.rd-signals { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.rd-sig-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  padding: 30px 30px 0; min-height: 440px;
  box-shadow: 0 26px 54px rgba(9,17,26,0.30);
}
.rd-sig-card .pct {
  position: relative; z-index: 2; display: inline-flex; align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: #fff;
  background: linear-gradient(90deg, #1ec3d9, #2fa2f8); border-radius: 999px; padding: 6px 14px;
}
.rd-sig-head { position: relative; z-index: 2; }
.rd-sig-card b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 2.6vw, 2.4rem); letter-spacing: -0.02em; color: #fff; line-height: 1; margin-top: 16px; }
.rd-sig-card .cap { display: block; font-size: 13px; color: #a8bacb; margin-top: 6px; }
/* the portrait anchors the card's base, so there is no hole in the middle */
.rd-sig-card .person {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 74%; width: auto; max-width: 108%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 -10px 34px rgba(9,17,26,0.4)); z-index: 1;
}
.rd-signals-panel {
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 24px 52px rgba(43,69,95,0.10);
  padding: 26px 30px 22px; display: flex; flex-direction: column;
}
.rd-signals-list { list-style: none; display: flex; flex-direction: column; }
.rd-sig-row {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; gap: 14px; align-items: center; padding: 15px 0;
  font-family: var(--font-display); font-weight: 500; font-size: 15.5px;
  color: var(--ink-soft); line-height: 1.5;
  transition: color 0.2s ease;
}
.rd-signals-list li + li .rd-sig-row { border-top: 1px solid var(--line); }
.rd-sig-box {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  border: 1.8px solid var(--line); background: #fff; color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.rd-sig-row:hover { color: var(--ink); }
.rd-sig-row:hover .rd-sig-box { border-color: var(--action); }
.rd-sig-row.is-on { color: var(--ink); }
.rd-sig-row.is-on .rd-sig-box {
  background: linear-gradient(135deg, #1ec3d9, #2fa2f8); border-color: transparent; color: #fff; transform: scale(1.06);
}
/* live readout: the payoff of ticking boxes */
.rd-score {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.rd-score-meter { display: flex; align-items: center; gap: 13px; }
.rd-score-dial {
  position: relative; width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: conic-gradient(#2fa2f8 calc(var(--pct, 0) * 1%), var(--bg-wash) 0);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.35s ease;
}
.rd-score-dial::after { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 50%; }
.rd-score-dial span { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); }
.rd-score-copy b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.rd-score-copy span { display: block; font-size: 13px; color: var(--ink-faint); }
.rd-score .btn { flex: none; }
@media (max-width: 1023px) {
  .rd-sig-card { min-height: 400px; }
  .rd-score { justify-content: flex-start; }
}
/* tools: heading left, two logo columns scrolling opposite ways */
.rd-tools-layout { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.rd-tools-layout .section-head { margin-bottom: 26px; }
.rd-tools-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
  height: 460px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.rd-tools-col { display: flex; flex-direction: column; gap: 14px; animation: toolsUp 30s linear infinite; }
.rd-tools-col.is-down { animation-name: toolsDown; animation-duration: 34s; }
@keyframes toolsUp { from { transform: translateY(0); } to { transform: translateY(-33.333%); } }
@keyframes toolsDown { from { transform: translateY(-33.333%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rd-tools-col { animation: none; } }
.rd-tool {
  display: flex; align-items: center; gap: 13px; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(43,69,95,0.06);
}
.rd-tool-logo {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  background: var(--bg-wash); display: flex; align-items: center; justify-content: center;
}
.rd-tool-logo img { width: 23px; height: 23px; object-fit: contain; display: block; }
.rd-tool-logo.is-letter { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.rd-tool b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.rd-tool span { font-size: 12px; color: var(--ink-faint); }
.rd-rel-nav { display: flex; gap: 10px; }
.rd-rel-nav .cs-arrow { width: 46px; height: 46px; }
.rd-carousel-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; cursor: grab;
  /* A scroller clips at its padding box, so the padding must exceed the
     shadow's reach or the shadow ends in a straight line. These cards use
     a negative-spread shadow: reach is (blur - |spread|) sideways and
     (offset + blur - |spread|) below. Negative margins undo the padding
     so surrounding spacing is unchanged. */
  padding: 14px var(--rail-inset) 44px; margin: -14px calc(var(--rail-inset) * -1) -36px;
  /* snapping measures from the padding box, so restate the inset or the
     browser scrolls the shadow gutter away on load */
  scroll-padding-left: var(--rail-inset);
}
/* once the strip has scrolled, its leading edge fades instead of
   guillotining the outgoing card */
.rd-carousel-track.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.35) 34px, #000 104px);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.35) 34px, #000 104px);
}
.rd-carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rd-carousel-track.is-dragging a { pointer-events: none; }
.rd-carousel-track::-webkit-scrollbar { display: none; }
.rd-carousel-track .role-card { flex: 0 0 clamp(290px, 31vw, 392px); scroll-snap-align: start; }
/* full-bleed: the strip spans the viewport, first card on the grid */
.rd-track-bleed {
  padding-left: var(--gutter); padding-right: var(--gutter);
  padding-top: 14px; padding-bottom: 44px; margin: -14px 0 -36px;
  /* snapping ignores padding, so restate it for the snapport */
  scroll-padding-left: var(--gutter);
}
.rd-work-layout .rd-carousel-track, .ga-transform .rd-carousel-track {
  margin-right: 0;
  /* End padding, and it used to be a full --gutter so the last card came to
     rest aligned with the page container, mirroring the first card on the left.
     The track is full-bleed though, so what that produced at 1440 was the last
     card, then 132px of nothing, then the screen edge - and since the arrow
     never disabled either, clicking into that void looked like a stuck control
     rather than the end of the list.

     A small gap instead. Enough to say the strip ends here, not enough to read
     as another card failing to arrive. It does mean the last card sits nearer
     the screen edge than the first card does, which breaks the left/right
     symmetry on purpose: that symmetry was invisible and the dead space was
     not. */
  --rail-end: clamp(20px, 3vw, 34px);
  padding-right: var(--rail-end); scroll-padding-right: var(--rail-end);
}
.rd-track-bleed { scroll-padding-right: clamp(20px, 3vw, 34px); }
.rd-rel-foot { display: flex; justify-content: flex-start; margin-top: 24px; }
/* the strip bleeds past the container but its controls do not: the CTA sits on
   the container's right edge, level with the arrows */
.ws-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.ws-foot .rd-rel-nav { margin-top: 0; }
@media (max-width: 639px) { .ws-foot { flex-direction: column; align-items: stretch; gap: 16px; } }
@media (max-width: 1023px) {
  .rd-hero-grid { grid-template-columns: minmax(0,1fr); }
  .rd-tile { max-width: 480px; }
  .rd-pains { grid-template-columns: minmax(0,1fr); }
  .rd-work { grid-template-columns: minmax(0,1fr); }
  .rd-statband-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
  /* An odd number of stats leaves the last one alone on the left of its row
     with the other half of the width empty. Three-stat pages (services,
     industries) hit this at tablet width. Span it so its centred text sits in
     the middle instead of hugging the left. */
  .rd-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rd-stat + .rd-stat { border-left: 0; }
  .rd-signals { grid-template-columns: minmax(0,1fr); }
  .rd-sig-card { max-width: 460px; }
  .rd-math { grid-template-columns: minmax(0,1fr); }
  .rd-math-mid { min-height: 96px; background: linear-gradient(180deg, #fafbfd 0%, #fafbfd 50%, #eaf4fd 50%, #eaf4fd 100%); }
  .rd-math-mid::before { inset: 50% 0 auto; width: auto; height: 1px; }
  .rd-tools-layout { grid-template-columns: minmax(0,1fr); }
  .rd-pains { grid-template-columns: minmax(0,1fr); }
  .rd-work-layout { grid-template-columns: minmax(0,1fr); }
  .rd-overseas-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 639px) {
  .rd-hero { padding-top: 126px; }
  .rd-story { grid-template-columns: minmax(0,1fr); }
  .rd-tools-cols { height: 340px; }
  .rd-statband-grid { grid-auto-flow: row; grid-template-columns: minmax(0,1fr); }
  .rd-overseas-stats { grid-template-columns: minmax(0,1fr); }
}

/* ============================================================
   ROLE: "how it transforms" (copy + profile carousel) and
   "does your team need one" (numbered cards with bullets)
   ============================================================ */
.ga-transform { display: grid; grid-template-columns: minmax(0, 452px) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; padding-left: var(--gutter); }
.ga-copy h2 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); line-height: 1.14; letter-spacing: -0.026em; margin-bottom: 24px; }
.ga-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.ga-tasks { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.ga-tasks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.ga-tasks .vig-check-icon { width: 21px; height: 21px; font-size: 11px; background: #e1f3f7; color: #17a2b8; flex: none; margin-top: 1px; }
.ga-stack {
  display: flex; width: fit-content; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--bg-wash); border-radius: 14px; padding: 14px 20px; margin-bottom: 26px;
}
.ga-stack img { height: 22px; width: auto; max-width: 92px; object-fit: contain; display: block; }
.ga-stack .is-letter { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.ga-copy .rd-micro { margin-top: 12px; }
/* profile cards */
.pf-card {
  flex: 0 0 clamp(260px, 27vw, 320px); scroll-snap-align: start;
  background: #fff; border-radius: 20px; padding: 16px 16px 20px;
  box-shadow: 0 14px 26px -10px rgba(43,69,95,0.30);
}
.pf-photo { border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 0.94; display: flex; align-items: flex-end; justify-content: center; }
.pf-photo img { height: 96%; width: auto; max-width: 92%; object-fit: contain; object-position: bottom; display: block; }
.pf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 4px 12px; }
.pf-head b { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.pf-head span { font-size: 12.5px; color: var(--ink-soft); text-align: right; }
.pf-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.pf-tools span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  box-shadow: 0 3px 10px rgba(43,69,95,0.06);
}
.pf-tools img { width: 15px; height: 15px; object-fit: contain; display: block; }
.ga-profiles-nav { display: flex; gap: 12px; margin-top: 22px; padding-left: 4px; }
/* does your team need one */
.need-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.need-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 30px 32px;
}
.need-icon {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: #eaf4fb; color: #2fa2f8;
}
.need-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; color: var(--ink); margin-bottom: 16px; letter-spacing: -0.01em; }
.need-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.need-card li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.need-card li::before {
  content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}
@media (max-width: 1023px) {
  .ga-transform { grid-template-columns: minmax(0,1fr); padding-right: var(--gutter); }
  .need-cards { grid-template-columns: minmax(0,1fr); }
}

/* ============================================================
   UNIVERSITY: certification proof as a wired capability map
   ============================================================ */
.uni-section { background: linear-gradient(180deg, #ffffff 0%, #f2f7fc 58%, #eaf2f9 100%); }
.uni-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 40px; }
.uni-stat {
  display: flex; align-items: center; gap: 14px;
  background: #e1f3f7; border-radius: 999px; padding: 16px 30px 16px 24px;
}
.uni-stat svg { flex: none; color: #17a2b8; }
.uni-stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: var(--ink); letter-spacing: -0.02em; line-height: 1.05; }
.uni-stat span { display: block; font-size: 13.5px; color: var(--ink-soft); }
/* the wired map: nodes on a 3x2 grid, connectors drawn between them */
.uni-map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px 34px; align-items: start; }
.uni-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.uni-wires path { fill: none; stroke: #b9cad9; stroke-width: 1.25; }
.uni-node { position: relative; z-index: 1; }
.uni-node.is-drop { margin-top: 44px; }
.uni-card {
  background: var(--band); border-radius: 20px; padding: 28px 30px; color: #cfdbe7; height: 100%;
  box-shadow: 0 20px 42px -14px rgba(9,17,26,0.5);
}
.uni-card b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; margin-bottom: 9px; }
.uni-card p { font-size: 14px; line-height: 1.62; }
.uni-chip {
  background: #fff; border-radius: 18px; padding: 18px 20px; text-align: center;
  box-shadow: 0 14px 30px -10px rgba(43,69,95,0.30);
}
.uni-chip-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 12px; }
.uni-chip-row img.face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(43,69,95,0.2); }
.uni-chip-row.is-faces { gap: 0; }
.uni-chip-row.is-faces img.face + img.face { margin-left: -14px; }
/* tools sit in rounded tiles, the way app icons read */
.uni-tile {
  width: 44px; height: 44px; border-radius: 12px; background: var(--bg-wash);
  display: flex; align-items: center; justify-content: center;
}
.uni-tile img { width: 24px; height: 24px; object-fit: contain; display: block; }
.uni-chip span {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
}
.uni-foot { margin-top: 38px; }
@media (max-width: 1023px) {
  .uni-map { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .uni-node.is-drop { margin-top: 0; }
  .uni-wires { display: none; }
}

/* ============================================================
   FAQ PAGE: the search straddles the seam, filters sit in a rail
   ============================================================ */
.rd-hero-copy.is-center { text-align: center; }
.rd-hero-copy.is-center p { margin-left: auto; margin-right: auto; }
/* The shared hero fades its artwork to pure white, which then met the tinted
   section in a hard step. Here it dissolves into the section colour instead, so
   the hero and the FAQ read as one continuous field with no seam. */
/* A hero sitting directly above a tinted section fades into that tint rather
   than to white, so the two read as one surface instead of meeting at a hard
   line. .rd-hero's own gradient ends in #fff, which is what causes the seam. */
.rd-hero.is-onto-tint,
.faq-hero {
  padding-bottom: 0;
  background-image: linear-gradient(180deg, rgba(232,238,245,0) 56%, #e8eef5 100%),
                    url("/assets/hero-gradient-bg.avif");
}
.rd-hero.is-onto-tint { padding-bottom: 46px; }
/* A section directly under a blended hero does not need its own full top
   padding: the hero already ends with 46px and the join between them is
   invisible, so the two stack into a gap with nothing to explain it. On the
   growth tools page that was 160px between the standfirst and the first card.
   Opt-in, because the other two blended heroes have not been reviewed for it. */
.section.is-under-hero { padding-top: clamp(16px, 2vw, 24px); }
/* the field sits on the join between the two sections rather than floating
   above it, so the seam reads as deliberate */
.faq-search-wrap { position: relative; z-index: 2; }
.faq-search {
  max-width: 660px; margin: 0 auto; transform: translateY(50%);
  padding: 17px 26px; box-shadow: 0 22px 44px -20px rgba(43,69,95,0.34);
}
.faq-search input { font-size: 15px; }
.faq-section { padding-top: clamp(74px, 8vw, 104px); }

.faq-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
/* Same white filter card the roles catalogue uses, so a rail looks like a rail
   everywhere on the site. */
.faq-rail {
  position: sticky; top: 96px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 14px 14px;
}
.faq-rail-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.faq-cats { display: flex; flex-direction: column; gap: 4px; }
.faq-cats .dept-pill {
  width: 100%; justify-content: space-between; gap: 10px; text-align: left;
  border-radius: 10px; padding: 11px 14px;
}
.faq-cats .dept-pill span {
  flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-faint);
  background: var(--bg-wash); border-radius: 999px; padding: 2px 9px;
}
.faq-cats .dept-pill:hover { background: var(--bg-wash); }
.faq-cats .dept-pill.is-on { background: var(--band); color: #fff; }
.faq-cats .dept-pill.is-on span { background: rgba(255,255,255,0.16); color: #fff; }

.faq-group[hidden] { display: none; }
/* the spacing between groups is a flex gap, not a sibling margin: a hidden
   group still matches `+`, so filtering used to leave a 40px margin on the
   first surviving group and knock it out of line with the rail */
#faqBoard { display: flex; flex-direction: column; gap: 40px; }
/* Each category is a panel rather than a run of naked rows: it gives the list
   structure, and makes the rail's six filters map onto six visible objects. */
.faq-group {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 2px 26px 10px;
}
.faq-group-head {
  display: flex; align-items: center; gap: 10px; padding: 18px 0 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; color: var(--ink);
  letter-spacing: -0.01em;
}
.faq-group-head span {
  font-size: 12px; font-weight: 700; color: var(--ink-faint);
  background: var(--bg-wash); border-radius: 999px; padding: 3px 10px;
}
/* The separator sits on top of each row, not under it. A bottom border would
   leave a stray hairline under the last row once filtering hides the rest. */
.faq-group .faq-item { border-bottom: 0; border-top: 1px solid var(--line); }
/* the shared .faq-list is capped at 760px because on the homepage it is the
   right column of a two-column grid; here it already has its own column */
.faq-group .faq-list { max-width: none; }
.faq-group .faq-item[hidden] { display: none; }
.faq-main .sw-catchall { margin-top: 40px; }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .faq-rail { position: static; }
  /* the rail becomes a chip row, so an unselected item needs its own edge to
     read as a control rather than as a line of text */
  .faq-cats { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .faq-cats .dept-pill {
    width: auto; border-radius: 999px; padding: 9px 15px;
    background: #fff; border: 1px solid var(--line);
  }
  .faq-cats .dept-pill span { background: var(--bg-wash); }
  /* the chip row carries its own edges, so the card around it is dropped */
  .faq-rail { background: none; border: 0; padding: 0; }
  .faq-group { padding: 2px 18px 8px; }
}

/* ============================================================
   WHERE WE HIRE FROM: the page (spec 3.8)
   ============================================================ */
/* Same seam treatment as the FAQ page: the shared hero fades its artwork to
   white, which met the tinted section below in a hard step. Here it dissolves
   into the section colour so the two read as one field. */
.rg-hero, .rg-hero-tint {
  background-image: linear-gradient(180deg, rgba(232,238,245,0) 56%, #e8eef5 100%),
                    url("/assets/hero-gradient-bg.avif");
}
.rg-flags { display: inline-flex; align-items: center; }
.rg-flags img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(43,69,95,0.14);
}
.rg-flags img + img { margin-left: -8px; }

/* ---- the comparator ---- */
.rg-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(20px, 3vw, 32px); margin-top: 34px;
}
.rg-zones { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rg-zones-label, .rg-zones-hint {
  font-size: 13px; color: var(--ink-soft); font-family: var(--font-display); font-weight: 600;
}
.rg-zones-hint { color: var(--ink-faint); font-weight: 500; }
.rg-zones-set { display: inline-flex; background: var(--bg-wash); border-radius: 999px; padding: 3px; gap: 2px; }
.rg-zone {
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 999px; padding: 7px 15px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rg-zone:hover { color: var(--ink); }
.rg-zone.is-on { background: var(--band); color: #fff; }

.rg-key { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 14px; }
.rg-key span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-faint); }
.rg-key i { width: 14px; height: 8px; border-radius: 3px; }
.k-yours { background: #d7e3ee; }
.k-theirs { background: #b9e3e8; }
.k-overlap { background: #2ea6f5; }

.rg-rows { display: flex; flex-direction: column; gap: 4px; }
.rg-row {
  display: grid; grid-template-columns: 152px minmax(0, 1fr) 208px;
  align-items: center; gap: 18px; padding: 14px 0;
}
.rg-row + .rg-row { border-top: 1px solid var(--line); }
.rg-row-id { display: flex; align-items: center; gap: 9px; }
.rg-row-id b { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
/* the rail is one 24-hour day in the buyer's clock; bands are placed on it */
/* faint quarter-day gridlines so a band's position reads against the axis */
.rg-rail {
  position: relative; height: 30px; border-radius: 8px; overflow: hidden;
  background: var(--bg-wash);
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%);
}
.rg-axis { padding: 0 0 2px; }
.rg-row + .rg-axis { border-top: 0; }
.rg-ticks { display: flex; justify-content: space-between; }
.rg-ticks span { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rg-band { position: absolute; top: 6px; height: 18px; border-radius: 5px; }
.rg-band.is-yours { background: #d7e3ee; }
.rg-band.is-theirs { background: #b9e3e8; }
.rg-band.is-overlap { background: #2ea6f5; }
.rg-row-num { text-align: right; }
.rg-row-num b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.rg-row-num small { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.4; margin-top: 2px; text-wrap: balance; }
.rg-row.is-none .rg-row-num b { color: var(--ink-faint); }
.rg-foot { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-top: 20px; max-width: 76ch; }
.rg-foot a { font-weight: 600; }

/* ---- the three region cards ---- */
.rg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
.rg-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 22px;
}
.rg-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rg-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; color: var(--ink); letter-spacing: -0.01em; }
.rg-card-line { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.rg-card-why { list-style: none; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 9px; }
.rg-card-why li {
  position: relative; padding-left: 24px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45;
}
/* the site's check mark, same as the services and roles lists */
.rg-card-why li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}
.rg-card .impact-more { margin-top: auto; }

/* ---- the comparison table + the roles columns ---- */
.rg-duo { margin-top: 38px; }
.rg-duo .duo-heads, .rg-duo .duo-row { grid-template-columns: 150px repeat(3, minmax(0, 1fr)); }
.rg-duo .duo-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.rg-note { font-size: 13px; color: var(--ink-faint); line-height: 1.6; margin-top: 16px; text-align: center; }
.rg-note a { font-weight: 600; color: var(--action); }

/* Wide role card: the portrait leads on the left at full card height and the
   title, description and link stack to its right. Two per row so the image can
   be large without the row becoming a billboard. */
.role-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 38px; }
.role-wide .role-card {
  display: grid; align-items: start;
  grid-template-columns: clamp(132px, 15vw, 168px) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 22px; padding: 22px 24px 20px;
}
.role-wide .role-visual {
  display: flex; grid-column: 1; grid-row: 1 / span 4;
  width: 100%; height: 100%; min-height: 152px; margin-bottom: 0; border-radius: 16px;
}
.role-wide .role-chip { grid-column: 2; grid-row: 1; justify-self: start; margin-bottom: 10px; }
.role-wide .role-card b { grid-column: 2; grid-row: 2; font-size: 20px; letter-spacing: -0.015em; margin-bottom: 8px; }
.role-wide .role-card p { grid-column: 2; grid-row: 3; -webkit-line-clamp: 3; font-size: 14px; }
.role-wide .role-card .impact-more { grid-column: 2; grid-row: 4; margin-top: 0; align-self: end; }
@media (max-width: 900px) { .role-wide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .role-wide .role-card { grid-template-columns: minmax(0, 1fr); }
  .role-wide .role-visual { grid-column: 1; grid-row: 1; min-height: 132px; margin-bottom: 14px; }
  .role-wide .role-chip, .role-wide .role-card b,
  .role-wide .role-card p, .role-wide .role-card .impact-more { grid-column: 1; }
}

/* facts table and the clock card sit side by side */
.rg-facts-grid {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 22px; align-items: stretch; max-width: 1000px; margin: 34px auto 0;
}
@media (max-width: 900px) { .rg-facts-grid { grid-template-columns: minmax(0, 1fr); } }

.rg-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
.rg-roles-col { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.rg-roles-col h3 {
  display: flex; align-items: center; gap: 9px; margin-bottom: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink);
}
.rg-roles-col ul { list-style: none; }
.rg-roles-col li + li { border-top: 1px solid var(--line); }
.rg-roles-col a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink);
}
.rg-roles-col a svg { flex: none; color: var(--action); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; }
.rg-roles-col a:hover { color: var(--action); }
.rg-roles-col a:hover svg { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .rg-cards, .rg-roles { grid-template-columns: minmax(0, 1fr); }
  .rg-row { grid-template-columns: 130px minmax(0, 1fr); grid-template-areas: "id rail" "num num"; }
  .rg-row-id { grid-area: id; }
  .rg-rail { grid-area: rail; }
  .rg-row-num { grid-area: num; text-align: left; }
}
@media (max-width: 720px) {
  .rg-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "rail" "num"; gap: 10px; }
  .rg-duo .duo-heads, .rg-duo .duo-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- region page: the clock card ---- */
.rg-clock { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px 20px; }
/* the four zones as rails: same component as the index comparator, but the
   region is fixed and the zone is what varies down the card */
.rg-clock .rg-row {
  grid-template-columns: 74px minmax(0, 1fr) 124px; gap: 14px; padding: 12px 0;
}
.rg-clock .rg-row-id b { font-size: 13.5px; }
.rg-clock .rg-rail { height: 24px; }
.rg-clock .rg-band { top: 5px; height: 14px; }
.rg-clock .rg-row-num b { font-size: 13px; }
.rg-clock .rg-row-num small { font-size: 11.5px; }
.rg-clock .rg-key { margin: 10px 0 6px; gap: 14px; }
.rg-clock h3 {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px;
}
.rg-clock-foot { font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; margin-top: 14px; }
/* These must sit AFTER the .rg-clock base rule above: both are (0,2,0)
   specificity, so source order decides. The shared .rg-row breakpoints remap
   the cells to a two- then one-column area grid, and the column count has to
   follow or every cell collapses into the first 74px column. */
@media (max-width: 1000px) {
  .rg-clock .rg-row { grid-template-columns: 74px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .rg-clock .rg-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rg-clock .rg-row-num { display: flex; align-items: baseline; gap: 8px; }
  .rg-clock .rg-row-num small { margin-top: 0; }
}

/* the five facts as a spec list: icon, label, value. The .duo component it
   replaced is built for three columns and read as a stripped table with one. */
.rg-spec {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 20px; padding: 8px 26px 10px;
  box-shadow: 0 24px 48px rgba(16,32,48,0.24);
}
.rg-spec > * { position: relative; z-index: 1; }
.rg-spec .rg-spec-row + .rg-spec-row { border-top: 1px solid rgba(255,255,255,0.12); }
.rg-spec .rg-spec-icon {
  border: 0; background: rgba(255,255,255,0.10); color: #7ecdf5;
}
.rg-spec .rg-spec-row small { color: #5dc1c7; }
.rg-spec .rg-spec-row b { color: #fff; }
/* the rows share the card's height so it ends level with the clock card
   beside it instead of leaving a block of dead space underneath */
.rg-spec-row { display: flex; flex: 1; align-items: center; gap: 14px; padding: 16px 0; }
.rg-spec-row + .rg-spec-row { border-top: 1px solid var(--line); }
.rg-spec-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-soft);
}
.rg-spec-icon svg { width: 18px; height: 18px; display: block; }
.rg-spec-row small {
  display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.rg-spec-row b {
  display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--ink); line-height: 1.45;
}

.rg-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
.rg-why-item { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.rg-why-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 13px; background: var(--bg-wash); color: var(--action);
}
.rg-why-icon svg { width: 21px; height: 21px; display: block; }
.rg-why-item h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink);
  letter-spacing: -0.01em; margin-bottom: 8px;
}
.rg-why-item p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; }
@media (max-width: 1000px) { .rg-why { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   SUCCESS STORIES (spec 4.3) - a port of the live page
   ============================================================ */
.ss-hero { padding-bottom: 0; }

/* ---- the hero proof row: lead card, three quotes, blue CTA ---- */
.ss-proof-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.ss-proof {
  display: flex; flex-direction: column; min-height: 188px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px;
}
.ss-proof blockquote { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45; letter-spacing: -0.01em; }
.ss-proof figcaption { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 18px; }
.ss-proof figcaption b { display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ss-proof figcaption i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-faint); }
.ss-face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.ss-face.is-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-wash); color: var(--ink-soft);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
}
/* the lead card: a faint globe behind the faces of people already placed */
.ss-proof.is-lead { position: relative; overflow: hidden; background: #eef1fb; border-color: #e2e6f6; justify-content: flex-end; }
.ss-lead-map { position: absolute; top: -14%; left: -10%; width: 120%; opacity: 0.5; pointer-events: none; }
.ss-lead-faces { position: relative; display: flex; align-items: center; margin-bottom: 14px; }
.ss-lead-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.ss-lead-faces img + img { margin-left: -10px; }
.ss-lead-faces span {
  margin-left: -10px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
  background: var(--band); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
}
.ss-proof.is-lead b { position: relative; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.ss-proof.is-cta { background: var(--action); border-color: var(--action); justify-content: space-between; }
.ss-proof.is-cta:hover { text-decoration: none; }
.ss-proof.is-cta b { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: #fff; line-height: 1.45; }
.ss-cta-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: #fff;
}
.ss-cta-link .btn-arrow { background: rgba(255,255,255,0.2); }

/* ---- the grid ---- */
.ss-intro {
  max-width: 62ch; margin: 0 auto 40px; text-align: center;
  font-size: 1.02rem; color: var(--ink-soft); line-height: 1.7;
}
/* Three card layouts are live behind #ssLayout so the team can choose one.
   The source thumbnails are all 800x800, so every layout gives the artwork a
   square slot: the earlier near-2:1 box was cropping half of each image away. */
.ss-grid { display: grid; gap: 24px; }
/* a CSS display value beats the hidden attribute, so both containers stayed
   on screen and the grid fell back to one column */
.ss-grid[hidden], .ss-rows[hidden] { display: none; }
.ss-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-card {
  display: grid; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* A: three up, artwork on top */
.ss-grid.is-three .ss-card { grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
/* B: two up, artwork on the left */
.ss-grid.is-two .ss-card { grid-template-columns: 216px minmax(0, 1fr); gap: 22px; align-items: start; }
.ss-card:hover {
  text-decoration: none; border-color: transparent; transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(43,69,95,0.13);
}
.ss-card-art {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: 14px; background: var(--bg-wash);
}
.ss-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Courses are video thumbnails, which are 16:9 at the source. The square crop
   this grid uses for case studies cut a third off each one and made a row of
   them read as portrait. This is the articles index's 16:10, so the two
   listings in the same section of the site match. */
.ss-grid.is-wide-art .ss-card-art { aspect-ratio: 16 / 10; }
/* No chip overlay: the source thumbnails already have the roles hired
   printed on them, so drawing our own duplicated every one. */
.ss-card-body { display: block; }
.ss-card-body b {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -0.014em; line-height: 1.32;
}
.ss-card:hover .ss-card-body b { color: var(--action); }
.ss-card-sum { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.62; margin-top: 10px; }

/* C: the homepage case-study card, one per row */
.ss-rows { display: flex; flex-direction: column; gap: 22px; }
.ss-rows .cs-card.ss-row { border: 1px solid var(--line); box-shadow: none; padding: clamp(18px, 2.2vw, 26px); }
.ss-rows .cs-card.ss-row:hover { box-shadow: 0 20px 44px rgba(43,69,95,0.1); }
.ss-row-art { position: relative; display: block; }
/* the homepage module drops its image to 16:10 once the card stacks, which
   re-crops artwork that is square in the source; this list keeps it square
   at every width */
.ss-rows .cs-card-img { aspect-ratio: 1 / 1; }
.ss-rows .cs-card-body h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.ss-rows .cs-divider { display: block; }
.ss-rows .cs-stats { display: flex; }

/* the switcher: temporary, for the team to choose a layout */
#ssLayout {
  position: fixed; right: 16px; bottom: 16px; z-index: 96;
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 9px 7px 15px; box-shadow: 0 10px 26px -10px rgba(43,69,95,0.4);
  font-size: 11.5px; color: var(--ink-faint);
}
#ssLayout button {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
#ssLayout button.is-on { background: var(--band); border-color: var(--band); color: #fff; }

@media (max-width: 1100px) {
  .ss-proof-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-grid.is-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ss-proof-row, .ss-grid { grid-template-columns: minmax(0, 1fr); }
  .ss-grid.is-three, .ss-grid.is-two { grid-template-columns: minmax(0, 1fr); }
  .ss-grid.is-three .ss-card, .ss-grid.is-two .ss-card {
    grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start;
  }
  .ss-rows .cs-card.ss-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #ssLayout { left: 12px; right: 12px; justify-content: center; }
  .ss-card-body b { font-size: 0.95rem; }
  .ss-card-sum { font-size: 13px; }
  /* one chip only: the artwork is 132px wide here and two will not read */
  .ss-proof { min-height: 0; }
  .ss-proof.is-lead { min-height: 150px; padding-bottom: 22px; }
}
/* 132px of artwork beside the text is a compact list and reads well while the
   text column stays wide enough. Measured: 61 characters a line at 640px, 48
   at 560, 35 at 480, and 24 at 390, where the summary ran to ten lines in a
   172px column. 35 is the floor for body copy, so the thumbnail layout holds
   down to 480 and the card stacks below it. */
@media (max-width: 479px) {
  .ss-grid.is-three .ss-card, .ss-grid.is-two .ss-card {
    grid-template-columns: minmax(0, 1fr); gap: 14px;
  }
  /* Square is right for a 132px thumbnail and far too tall full width. */
  .ss-grid.is-three .ss-card .ss-card-art,
  .ss-grid.is-two .ss-card .ss-card-art { aspect-ratio: 16 / 10; }
}

/* ---- a single success story: a replication of the live case study page ---- */
.cse-art { border-radius: 22px; overflow: hidden; box-shadow: 0 28px 60px -34px rgba(43,69,95,0.45); }
.cse-art img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* The article template puts the class on the <img> itself rather than on a
   wrapper, so it needs its own rule. Height-capped and centred rather than
   stretched to the container: playbook covers are portrait and would
   otherwise fill the screen, while landscape article heroes stay wide. */
img.cse-art {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
  border-radius: 22px;
}

/* facts card, stats bar and quote */
/* The facts band and the article body are two sections on one background, so
   their padding stacks into a gap nothing fills: 88px bottom against 88px top,
   with no colour change to explain it. The band drops its own bottom padding
   and lets the body's top padding be the whole join. */
.cse-band-wrap { padding-top: clamp(44px, 5vw, 68px); padding-bottom: 0; }
.cse-band { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.cse-facts { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; }
.cse-facts h2 { font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 18px; }
.cse-fact { padding: 14px 0; }
.cse-fact + .cse-fact { border-top: 1px solid var(--line); }
.cse-fact small {
  display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px;
}
.cse-fact b { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--ink); word-break: break-word; }
.cse-fact a { color: var(--action); }
/* The stats and quote are usually shorter than the facts card beside them,
   which left a stepped bottom edge and a pocket of white under the quote. The
   column takes the row's full height and the quote absorbs the difference, so
   the two cards finish on the same line. `align-self` rather than the grid's
   `align-items`, so a facts card that is the shorter of the two is not
   stretched in its turn. */
.cse-band-main { display: flex; flex-direction: column; gap: 22px; align-self: stretch; }
.cse-band-main .cse-quote { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cse-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  background: var(--bg-wash); border-radius: 20px; padding: 26px 28px; text-align: center;
}
.cse-stat b {
  display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600; color: var(--ink); letter-spacing: -0.025em; line-height: 1.05;
}
.cse-stat span {
  display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); margin-top: 7px;
}
.cse-quote { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px; }
.cse-quote blockquote { font-size: 1.02rem; color: var(--ink); line-height: 1.62; }
.cse-quote blockquote::before { content: "\201C"; }
.cse-quote blockquote::after { content: "\201D"; }
.cse-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.cse-quote figcaption img, .cse-initials { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.cse-initials {
  display: flex; align-items: center; justify-content: center; background: var(--bg-wash);
  color: var(--ink-soft); font-family: var(--font-display); font-size: 15px; font-weight: 700;
}
.cse-quote figcaption b { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); }
.cse-quote figcaption i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-faint); }

/* table of contents beside the narrative */
.cse-body { display: grid; grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.cse-toc { position: sticky; top: 96px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 18px; }
.cse-toc-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.cse-toc ul { list-style: none; }
.cse-toc li + li { border-top: 1px solid var(--line); }
.cse-toc a {
  display: block; padding: 11px 0; font-family: var(--font-display); font-size: 13.5px;
  font-weight: 600; color: var(--ink-soft); line-height: 1.4;
}
.cse-toc a:hover { color: var(--ink); text-decoration: none; }
.cse-toc a.is-on { color: var(--action); }

.cse-narrative { max-width: 760px; }
/* On a case study the narrative sits in a two-column grid beside the table of
   contents, so it stays left. Everywhere else (articles, playbooks, courses,
   legal) it is the only thing in the container and centres under a centred
   hero, rather than hugging the left edge of a 1240px column. */
.container:not(.cse-body) > .cse-narrative { margin-inline: auto; }
.cse-section + .cse-section { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line); }
.cse-section h2 { font-size: clamp(1.3rem, 2vw, 1.62rem); letter-spacing: -0.02em; margin-bottom: 16px; scroll-margin-top: 110px; }
.cse-section p { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.78; }
.cse-section p + p { margin-top: 16px; }
.cse-ticks { list-style: none; margin: 18px 0; display: flex; flex-direction: column; gap: 12px; }
.cse-ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; color: var(--ink-soft); line-height: 1.65; }
.cse-ticks b { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.cse-tick {
  flex: none; margin-top: 3px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e7f4fd; color: var(--action);
}
.cse-tick svg { width: 12px; height: 12px; display: block; }

/* the strip reuses .ss-card from the listing; it only needs its own top margin
   and a slightly smaller image, since it is a pointer rather than the content */
.cse-more { margin-top: 34px; }
/* the .is-two base rule sets align-items:start at equal-or-higher
   specificity, so this has to match the full container selector or the
   bodies never stretch and the two links land at different heights */
.ss-grid.is-two.cse-more .ss-card { grid-template-columns: 148px minmax(0, 1fr); align-items: stretch; }
/* the body stretches so its link sits on the bottom edge, but the artwork must
   not: stretched to the row height, aspect-ratio:1 widens it past its 148px
   track and it eats the column gap */
.ss-grid.is-two.cse-more .ss-card-art { align-self: start; }
/* the body fills the card height so the link sits on the bottom edge rather
   than leaving the right-hand half half-empty */
.cse-more .ss-card-body { display: flex; flex-direction: column; }
.cse-more .ss-card-sum { margin-top: 8px; }
.cse-more .impact-more { margin-top: auto; padding-top: 14px; }
.ss-pill {
  display: inline-block; align-self: flex-start; margin-bottom: 10px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--bg-wash); border-radius: 999px; padding: 4px 11px;
}

@media (max-width: 1000px) {
  .cse-band, .cse-body { grid-template-columns: minmax(0, 1fr); }
  .cse-toc { position: static; }
}
@media (max-width: 560px) {
  .cse-stats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}



/* the proof band */
.ab-band-line {
  max-width: 60ch; margin: 0 auto; text-align: center; color: #fff;
  font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500;
  line-height: 1.5; letter-spacing: -0.01em;
}
.ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; text-align: center; }
.ab-stat b {
  display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600; color: #fff; letter-spacing: -0.025em; line-height: 1.05;
}
.ab-stat span {
  display: block; font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: #5dc1c7; margin-top: 8px;
}

/* the three-card rows */
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
.ab-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.ab-icon {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 13px; background: var(--bg-wash); color: var(--action); margin-bottom: 16px;
}
.ab-icon svg { width: 24px; height: 24px; display: block; }
.ab-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--ink); letter-spacing: -0.012em; margin-bottom: 8px; }
.ab-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; }

/* how we work, and what we are not */
.ab-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; counter-reset: abstep; }
.ab-step { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.ab-step::before {
  counter-increment: abstep; content: counter(abstep);
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--action); color: #fff;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 16px;
}
.ab-step b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); margin-bottom: 8px; }
.ab-step p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; }
.ab-nots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.ab-not { border: 1px dashed #c6d6e4; border-radius: 18px; padding: 22px 24px; }
.ab-not b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.ab-not p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }@media (max-width: 1000px) {
  .ab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }}@media (max-width: 560px) {
  .ab-stats { grid-template-columns: minmax(0, 1fr); gap: 22px; }}

/* ---- the "our why" video facade ---- */
.ab-video { position: relative; max-width: 900px; margin: 38px auto 0; }
.ab-video, .ab-video iframe, .ab-video-play {
  aspect-ratio: 16 / 9; width: 100%; border-radius: 22px; display: block;
}
.ab-video iframe { border: 0; }
.ab-video-play {
  position: relative; overflow: hidden; padding: 0; border: 0; cursor: pointer;
  background: var(--band); box-shadow: 0 30px 64px -30px rgba(16,32,48,0.55);
}
.ab-video-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ab-video-play:hover img { transform: scale(1.03); }
.ab-video-play::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,32,48,0) 40%, rgba(16,32,48,0.62) 100%);
}
.ab-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 74px; height: 74px; border-radius: 50%; background: #fff; color: var(--action);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -10px rgba(16,32,48,0.5); transition: transform 0.25s ease;
}
.ab-video-play:hover .ab-play { transform: translate(-50%, -50%) scale(1.07); }
.ab-play svg { width: 30px; height: 30px; margin-left: 3px; }
.ab-video-label {
  position: absolute; left: 26px; bottom: 22px; z-index: 2; text-align: left;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #fff;
}@media (max-width: 900px) {
  .ab-play { width: 58px; height: 58px; }
  .ab-play svg { width: 24px; height: 24px; }}

/* ---- hero side cards ---- */
.ab-hero-side { display: flex; flex-direction: column; gap: 14px; }

.ab-case { position: relative; overflow: hidden; display: block; border-radius: 20px; padding: 26px 28px 24px; color: #fff; }
.ab-case > * { position: relative; z-index: 1; }
.ab-case:hover { text-decoration: none; }
.ab-case-logo { height: 26px; width: auto; max-width: 190px; object-fit: contain; object-position: left; display: block; filter: brightness(0) invert(1); opacity: 0.95; }
.ab-corner { position: absolute; top: 22px; right: 24px; z-index: 2; color: #fff; opacity: 0.8; }
.ab-corner svg { width: 17px; height: 17px; display: block; }
.ab-case-label { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 22px 0 4px; }
.ab-case b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: #fff; }
.ab-case-copy { display: block; font-size: 13.5px; color: rgba(255,255,255,0.84); line-height: 1.6; margin-top: 8px; }
.ab-case-pill { display: inline-block; margin-top: 16px; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: #7ee0b8; background: rgba(126,224,184,0.14); border: 1px solid rgba(126,224,184,0.3); border-radius: 999px; padding: 5px 12px; }
.ab-founders-card { position: relative; display: flex; align-items: center; gap: 14px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 22px; transition: box-shadow 0.2s ease; }
.ab-founders-card:hover { text-decoration: none; box-shadow: 0 16px 34px -18px rgba(43,69,95,0.4); }
.ab-faces { display: flex; flex: none; }
.ab-faces img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.ab-faces img + img { margin-left: -14px; }
.ab-founders-text b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.ab-founders-text i { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.ab-founders-card .ab-corner { color: var(--ink-faint); opacity: 1; top: 18px; right: 20px; }

/* ---- our story ---- */
.ab-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; margin-top: 40px; }
.ab-window { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 0 0 22px; box-shadow: 0 30px 60px -34px rgba(43,69,95,0.42); }
.ab-window::before, .ab-window::after { content: ""; position: absolute; left: 12px; right: 12px; height: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); z-index: -1; }
.ab-window::before { top: -8px; }
.ab-window::after { top: -16px; left: 24px; right: 24px; opacity: 0.6; }
.ab-window-bar { display: flex; gap: 6px; padding: 16px 20px 18px; }
.ab-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e2eaef; }
.ab-window-bar i:nth-child(1) { background: #f2a2a2; }
.ab-window-bar i:nth-child(2) { background: #f4cf8e; }
.ab-window-bar i:nth-child(3) { background: #9fd9a8; }
.ab-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 20px; }
.ab-tile { background: var(--bg-wash); border-radius: 14px; padding: 20px 14px; text-align: center; }
.ab-tile:nth-child(1) { grid-column: span 2; }
.ab-tile:nth-child(3) { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ab-tile:nth-child(6) { grid-column: span 2; }
.ab-tile b { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.ab-tile span { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
.ab-tile.is-dark { background: var(--band); }
.ab-tile.is-dark b { color: #fff; }
.ab-tile.is-dark span { color: #9fd6f5; }
.ab-story-copy p { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.75; }
.ab-story-copy p + p { margin-top: 16px; }
.ab-story-copy p.is-lead { color: var(--ink); font-weight: 600; font-family: var(--font-display); }
.ab-pull { position: relative; overflow: hidden; margin-top: 26px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--action); border-radius: 16px; padding: 22px 26px; }
.ab-pull-mark { position: absolute; right: 12px; top: -18px; font-family: var(--font-display); font-size: 96px; line-height: 1; color: #eaf4fd; pointer-events: none; }
.ab-pull blockquote { position: relative; }
.ab-pull span { display: block; font-size: 15px; color: var(--ink-faint); }
.ab-pull b { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--ink); margin-top: 4px; letter-spacing: -0.01em; }

/* ---- founders band: readable copy and a contained portrait ---- */
.ab-founders { overflow: hidden; }
.ab-founders-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ab-founders-copy { min-width: 0; }
.ab-founders-copy h2 { color: #fff; font-size: clamp(1.55rem, 2.7vw, 2.25rem); letter-spacing: -0.022em; line-height: 1.22; margin: 6px 0 18px; text-wrap: balance; }
.ab-founders-copy p { color: rgba(255,255,255,0.82); font-size: 15.5px; line-height: 1.7; }
.ab-founders-copy p + p { margin-top: 14px; }
.ab-founders-copy .btn { margin-top: 26px; }
/* Adapt the 21st.dev aspect-ratio pattern: reserve a bounded media frame,
   independent of copy height. Contain preserves both founders without zooming. */
.ab-founders-profile { justify-self: center; width: 100%; max-width: 440px; margin: 0; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); }
.ab-founders-photo { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.ab-founders-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.ab-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 20px; border-top: 1px solid rgba(255,255,255,0.12); background: rgba(9,28,49,0.22); }
.ab-who-one { min-width: 0; }
.ab-who-one b { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: #fff; }
.ab-who-one i { display: block; font-style: normal; font-size: 12.5px; color: #9fd6f5; margin-top: 2px; max-width: 22ch; line-height: 1.4; }

/* ---- the hybrid model ---- */
.ab-hybrid { position: relative; display: block; overflow: hidden; border-radius: 26px; padding: clamp(28px, 4vw, 48px); }
.ab-hybrid > * { position: relative; z-index: 1; }
.ab-hy-head { text-align: center; margin-bottom: 34px; }
.ab-hy-head h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -0.02em; margin: 4px 0 10px; }
.ab-hy-head p { color: rgba(255,255,255,0.8); font-size: 15px; }
.ab-hy-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: stretch; }
.ab-hy-col { border-radius: 20px; padding: 26px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); }
.ab-hy-col.is-offshore { border-color: rgba(46,166,245,0.5); background: rgba(46,166,245,0.09); }
.ab-hy-col header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.ab-hy-avatar { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; flex: none; }
.ab-hy-col.is-offshore .ab-hy-avatar { background: var(--action); }
.ab-hy-avatar svg { width: 26px; height: 26px; display: block; }
.ab-hy-pill { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.16); border-radius: 999px; padding: 4px 11px; }
.ab-hy-col.is-offshore .ab-hy-pill { background: var(--action); }
.ab-hy-col h3 { flex-basis: 100%; font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.ab-hy-lead { font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.6; }
.ab-hy-list { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ab-hy-list li { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,0.08); border-radius: 13px; padding: 13px 15px; }
.ab-hy-col.is-offshore .ab-hy-list li { background: rgba(46,166,245,0.16); border: 1px solid rgba(46,166,245,0.32); }
.ab-hy-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.13); color: #fff; flex: none; }
.ab-hy-ic svg { width: 17px; height: 17px; display: block; }
.ab-hy-list b { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: #fff; }
.ab-hy-list i { display: block; font-style: normal; font-size: 12.5px; color: rgba(255,255,255,0.72); margin-top: 2px; }
/* the synergy tile: the two halves are an addition, not a choice */
.ab-synergy { position: relative; display: flex; align-items: center; justify-content: center; }
.ab-synergy::before { content: ""; position: absolute; top: 8%; bottom: 8%; width: 1px; background: rgba(255,255,255,0.18); }
.ab-synergy-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 92px; height: 92px; border-radius: 22px; background: var(--action); color: #fff;
  box-shadow: 0 0 0 10px rgba(46,166,245,0.14), 0 18px 34px -12px rgba(46,166,245,0.7);
}
.ab-synergy-tile svg { width: 26px; height: 26px; display: block; }
.ab-synergy-tile i { font-style: normal; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.ab-wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.14); }
.ab-win { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ab-win-ic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,0.12); color: #9fd6f5; flex: none; }
.ab-win-ic svg { width: 19px; height: 19px; display: block; }
.ab-win b { font-family: var(--font-display); font-weight: 600; color: #fff; }
.ab-win span { font-size: 14.5px; color: rgba(255,255,255,0.76); }
.ab-hy-foot { max-width: 74ch; margin: 30px auto 0; text-align: center; font-size: 15px; color: var(--ink-soft); line-height: 1.72; }

/* ---- problem vs solution ---- */
.ab-vs { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); align-items: stretch; }
.ab-vs-col { position: relative; border-radius: 22px; padding: 40px 34px 34px; }
.ab-vs-tag {
  position: absolute; top: -15px; left: 26px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px; padding: 7px 14px;
}
.ab-vs-tag svg { width: 13px; height: 13px; display: block; }
.ab-vs-tag.is-bad { background: #fdecee; color: #c0485c; border: 1px solid #f6d2d8; }
.ab-vs-tag.is-good { background: var(--action); color: #fff; }
.ab-vs-col h2 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); letter-spacing: -0.02em; margin-bottom: 12px; }
.ab-vs-col p { font-size: 15px; line-height: 1.68; }
.ab-vs-col.is-problem { background: #fff; border: 1px solid var(--line); }
.ab-vs-col.is-problem p { color: var(--ink-soft); }
.ab-crosses { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.ab-crosses li {
  position: relative; padding: 13px 16px 13px 42px; border-radius: 12px;
  background: #fdf2f4; border: 1px solid #f6dade;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
}
.ab-crosses li::before {
  content: ""; position: absolute; left: 16px; top: 15px; width: 13px; height: 13px; background: #c0485c;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center / contain no-repeat;
}
.ab-vs-link { position: relative; display: flex; align-items: center; justify-content: center; }
.ab-vs-link::before { content: ""; position: absolute; top: 12%; bottom: 12%; width: 1px; background: var(--line); }
.ab-vs-link span {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--band); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(43,69,95,0.6);
}
.ab-vs-link svg { width: 19px; height: 19px; display: block; }
.ab-vs-col.is-solution { overflow: hidden; }
.ab-vs-col.is-solution > * { position: relative; z-index: 1; }
.ab-vs-col.is-solution h2 { color: #fff; }
.ab-vs-col.is-solution p { color: rgba(255,255,255,0.85); }
.ab-vs-col.is-solution p b { color: #5dc1c7; font-weight: 600; }
.ab-vs-punch {
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: #fff !important;
  letter-spacing: -0.02em; margin: 18px 0; padding: 16px 20px;
  background: rgba(255,255,255,0.08); border-left: 4px solid var(--action); border-radius: 0 12px 12px 0;
}

/* ---- curated global talent ---- */
.ab-mission .section-head h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.ab-network { background: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 32px); }
.ab-network-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.ab-network-ic { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--band); color: #fff; flex: none; }
.ab-network-ic svg { width: 26px; height: 26px; display: block; }
.ab-network-title b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.ab-network-title i { display: block; font-style: normal; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.ab-network-stats { display: flex; gap: clamp(22px, 4vw, 46px); margin-left: auto; }
.ab-network-stats b { display: block; font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; text-align: center; }
.ab-network-stats i { display: block; font-style: normal; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; text-align: center; }
.ab-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.ab-region {
  display: flex; flex-direction: column; color: inherit; background: var(--bg-wash);
  border-radius: 16px; padding: 22px; border-top: 3px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ab-region:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 38px -20px rgba(43,69,95,0.4); }
.ab-region.is-support { border-top-color: var(--action); }
.ab-region.is-overlap { border-top-color: #5dc1c7; }
.ab-region.is-specialist { border-top-color: var(--band); }
.ab-region header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ab-flag { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: #fff; flex: none; }
.ab-flag img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.ab-region b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ab-hub { display: inline-block; margin-top: 5px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; border-radius: 999px; padding: 3px 10px; }
.ab-region.is-support .ab-hub { background: var(--action); }
.ab-region.is-overlap .ab-hub { background: #3aa9b0; }
.ab-region.is-specialist .ab-hub { background: var(--band); }
.ab-region > p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; }
.ab-skills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.ab-skill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 6px 12px; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.ab-skill svg { width: 13px; height: 13px; color: var(--action); flex: none; }


/* ---- the process cards ---- */
.ab-procs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
.ab-proc { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.ab-proc-ic {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 14px; border: 1.5px solid #bfe0f8; background: #eff8fe; color: var(--action); margin-bottom: 20px;
}
.ab-proc-ic svg { width: 24px; height: 24px; display: block; }
.ab-proc b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--ink); margin-bottom: 8px; }
.ab-proc p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.64; }
.ab-vision-head { margin-top: clamp(56px, 7vw, 88px); }
.ab-nots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.ab-not { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.ab-not-x { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #fdecee; color: #c0485c; margin-bottom: 14px; }
.ab-not-x svg { width: 16px; height: 16px; display: block; }
.ab-not b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.ab-not p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* ---- region cards: the homepage's overlapping flag treatment ---- */
.ab-flags { display: flex; margin-bottom: 14px; }
.ab-flags img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(43,69,95,0.16);
}
.ab-flags img + img { margin-left: -11px; }
.ab-region header { display: block; margin-bottom: 10px; }
.ab-region-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ab-region-stat { font-size: 12.5px; color: var(--ink-faint); }
.ab-region-stat b { display: inline; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }

/* ---- reviews carousel ---- */
.ab-reviews { position: relative; overflow: visible; border-radius: 26px; padding: clamp(22px, 3vw, 34px); margin-top: 34px; }
.ab-reviews::before { border-radius: 26px; }
.ab-rv-track { position: relative; z-index: 1; }
.ab-rv-slide { display: none; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.ab-rv-slide.is-on { display: grid; }
.ab-rv-face { width: 100%; height: 100%; max-height: 330px; object-fit: cover; border-radius: 16px; display: block; }
.ab-rv-face.is-initials { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); color: #fff; font-family: var(--font-display); font-size: 44px; font-weight: 700; border-radius: 16px; }
.ab-rv-card { background: #fff; border-radius: 18px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.ab-rv-logo { height: 26px; width: auto; max-width: 170px; object-fit: contain; object-position: left; display: block; margin-bottom: 22px; }
.ab-rv-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 22px; }
.ab-rv-card blockquote { font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 600; color: var(--ink); line-height: 1.55; letter-spacing: -0.01em; }
.ab-rv-card blockquote::before { content: "\201C"; }
.ab-rv-card blockquote::after { content: "\201D"; }
.ab-rv-card figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: auto; padding-top: 26px; }
.ab-rv-card figcaption b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.ab-rv-card figcaption i { display: block; font-style: normal; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.ab-stars { display: inline-flex; gap: 3px; color: #f0a92c; }
.ab-stars svg { width: 19px; height: 19px; display: block; }
.ab-rv-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(16,32,48,0.5);
}
.ab-rv-arrow:hover { color: var(--action); }
.ab-rv-arrow svg { width: 20px; height: 20px; display: block; }
.ab-rv-arrow.is-prev { left: -26px; }
.ab-rv-arrow.is-next { right: -26px; }

@media (max-width: 1000px) {
  .ab-story { grid-template-columns: minmax(0, 1fr); }
  .ab-hy-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* No `order` here. The tile is emitted between the two panels precisely so
     that one column stacks Onshore, Synergy, Offshore, which is the whole
     point of it; `order: -1` lifted it above both and left the two halves of
     the comparison sitting together under the thing that joins them. The rule
     it came from was written for a two-column collapse that no longer exists. */
  .ab-synergy { height: 92px; }
  .ab-synergy::before { display: none; }
  .ab-vs { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ab-vs-link { height: 44px; }
  .ab-vs-link::before { top: -20px; bottom: -20px; }
  /* .ab-cards had no collapse at all, so three cards of body copy stayed in
     three tracks down to 320px: about 100px of column each, holding a heading
     and a four-line paragraph. */
  .ab-cards, .ab-regions, .ab-procs, .ab-nots { grid-template-columns: minmax(0, 1fr); }
  /* 56px above the next heading is right when the cards are a 3-wide row and
     the eye travels sideways. Stacked, the reader has just come down a column
     of cards and 82px to the next heading reads as the page having ended. */
  .ab-vision-head { margin-top: 36px; }
  .ab-founders-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-network-stats { margin-left: 0; width: 100%; justify-content: space-between; }
  .ab-rv-slide.is-on { grid-template-columns: minmax(0, 1fr); }
  .ab-rv-face { max-height: 240px; }
  .ab-rv-arrow.is-prev { left: 6px; }
  .ab-rv-arrow.is-next { right: 6px; }
  .ab-wins { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-tile:nth-child(3) { grid-row: auto; }
  .ab-rv-arrow { width: 42px; height: 42px; }
}

/* ============================================================
   INDUSTRIES: the alphabetised index and the team-shape module
   ============================================================ */
.rd-hero-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.rd-hero-copy.is-wide p { max-width: 62ch; }

.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 18px; }
.ind-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 28px 24px; color: inherit; text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.ind-card:hover {
  text-decoration: none; transform: translateY(-3px); border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action) inset, 0 20px 36px -18px rgba(43,69,95,0.36);
}
.ind-icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--bg-wash); color: var(--action);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.ind-icon svg { width: 24px; height: 24px; }
.ind-card b { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.01em; }
.ind-card > p { font-size: 13.8px; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 14px; }
.ind-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ind-roles span {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  background: var(--bg-wash); border-radius: 999px; padding: 5px 11px;
}
.ind-card .impact-more { margin-top: auto; }

/* the hero tile ranks the roles, because "who do we hire first" is the question */
.ind-tile { width: 100%; background: #fff; border-radius: 20px; padding: 24px 26px 26px; box-shadow: 0 22px 46px -22px rgba(43,69,95,0.45); }
.ind-tile-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 16px; }
.ind-tile-roles { list-style: none; counter-reset: none; display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.ind-tile-roles li { display: flex; align-items: center; gap: 13px; padding: 11px 0; }
.ind-tile-roles li + li { border-top: 1px solid var(--line); }
.ind-rank {
  flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--bg-wash);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--ink-faint);
}
.ind-tile-roles a { font-size: 14px; color: var(--ink); text-decoration: none; }
.ind-tile-roles a:hover { color: var(--action); text-decoration: none; }
.ind-tile-cta { width: 100%; justify-content: center; }
.ind-badge-ico { display: flex; align-items: center; justify-content: center; color: var(--action); }
.ind-badge-ico svg { width: 18px; height: 18px; }

.ind-roles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1023px) { .ind-roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ind-roles-grid { grid-template-columns: minmax(0, 1fr); } }
.ind-stack { background: var(--bg-wash); border-radius: 18px; padding: 24px 0 26px; margin-top: 38px; overflow: hidden; }
.ind-stack-title { padding: 0 26px; }
.ind-stack-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.marquee-track.ind-stack-row { display: flex; flex-wrap: nowrap; gap: 10px; width: max-content; align-items: center; }
.ind-tool {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 9px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none;
}
a.ind-tool:hover { text-decoration: none; border-color: var(--action); color: var(--ink); }
.ind-tool img { width: 20px; height: 20px; object-fit: contain; display: block; }
.ind-track .ind-card { flex: 0 0 clamp(268px, 26vw, 316px); scroll-snap-align: start; }

/* ============================================================
   PRICING: the estimator and the coverage cards
   ============================================================ */
.est { width: 100%; background: #fff; border-radius: 20px; padding: 22px 24px 24px; box-shadow: 0 22px 46px -22px rgba(43,69,95,0.45); }
.est-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 16px; }
.est-q + .est-q { margin-top: 14px; }
.est-q > p { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 7px; }
.est-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.est-q:nth-child(3) .est-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.est-opts .dept-pill {
  width: auto; justify-content: center; text-align: center; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 8px; font-size: 12.5px; color: var(--ink-soft);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.est-opts .dept-pill:hover { border-color: #cfe0ee; }
.est-opts .dept-pill.is-on { border-color: var(--action); background: #f2f9ff; color: var(--ink); }
/* level and hours do not apply to a retained search */
.est.is-retained .est-q:nth-child(3), .est.is-retained .est-q:nth-child(4) { opacity: 0.4; pointer-events: none; }
.est-out {
  margin: 18px 0 14px; padding: 16px 18px; background: var(--bg-wash); border-radius: 14px;
  min-height: 108px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.est-band { display: flex; align-items: baseline; gap: 3px; }
.est-band b {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--ink);
}
.est-band small { font-family: var(--font-display); font-size: 13px; color: var(--ink-faint); }
.est-note { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.est-cta { width: 100%; justify-content: center; }

.need-cards.is-four { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.driver-copy { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

.cover-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 20px; align-items: stretch; }

/* the included list is drawn as the invoice it describes: one figure at the top
   and every line under it already paid for. Two white bullet lists said the
   same thing and said it flatly. */
.invoice {
  position: relative; overflow: hidden;
  background: var(--band); border-radius: 22px; padding: 30px clamp(24px, 3vw, 34px) 26px;
  box-shadow: 0 30px 56px -32px rgba(9,17,26,0.75);
}
.invoice-ribbon {
  position: absolute; top: 30px; right: -42px; transform: rotate(45deg);
  background: #fff; color: var(--band);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; text-align: center;
  padding: 7px 0; width: 172px;
  box-shadow: 0 6px 16px rgba(9,17,26,0.35);
}
.invoice-head { padding-right: 104px; padding-bottom: 20px; border-bottom: 1px dashed rgba(255,255,255,0.22); }
.invoice-label {
  display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #8fa9c0;
}
.invoice-total {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(2.1rem, 3.6vw, 2.8rem); color: #fff; line-height: 1;
}
.invoice-total small { font-family: var(--font-display); font-size: 0.42em; font-weight: 600; color: #8fa9c0; margin-left: 2px; }
.invoice-sub { display: block; margin-top: 8px; font-size: 13px; color: #a8bacb; }
.invoice-lines { list-style: none; display: flex; flex-direction: column; gap: 0; margin: 6px 0 18px; }
.invoice-lines li {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  font-size: 14.5px; color: #dbe6f0; line-height: 1.5;
}
.invoice-lines li > span:first-child { flex: 1 1 auto; }
.invoice-lines li::before {
  content: ""; order: -1; flex: none; width: 18px; height: 18px;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}
.invoice-lines li + li { border-top: 1px solid rgba(255,255,255,0.09); }
.invoice-lines b {
  flex: none; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: #5dc1c7;
}
.invoice-foot { font-size: 13px; color: #8fa9c0; line-height: 1.55; }

.cover-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px clamp(24px, 3vw, 34px);
}
.cover-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.cover-never { list-style: none; display: flex; flex-direction: column; gap: 0; }
.cover-never li {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 0;
}
.never-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--bg-wash); color: var(--action);
  display: flex; align-items: center; justify-content: center;
}
.never-copy { flex: 1 1 auto; min-width: 0; }
.cover-never li + li { border-top: 1px solid var(--line); }
.cover-never b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.never-copy { font-size: 13px; color: var(--ink-faint); line-height: 1.5; }
.cover-foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-faint); line-height: 1.55;
}
.cover-never em {
  flex: none; align-self: center; font-style: normal; font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--action); background: #eaf4fb; border-radius: 999px; padding: 4px 11px; margin-top: 1px;
}

/* two options is a table, not a carousel: no rail, no fades, no scrolling */
.duo { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; }
.duo-heads, .duo-row, .duo-feet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
}
.duo-heads { background: var(--bg-wash); border-bottom: 1px solid var(--line); }
.duo-head { padding: 22px 24px; }
.duo-head img { width: 34px; height: 34px; object-fit: contain; display: block; margin-bottom: 10px; }
.duo-head b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.duo-head small { display: block; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; margin-top: 2px; }
.duo-head + .duo-head, .duo-heads > span + .duo-head { border-left: 1px solid var(--line); }
.duo-row + .duo-row, .duo-heads + .duo-row { border-top: 1px solid var(--line); }
.duo-label {
  display: flex; align-items: center; padding: 16px 24px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink);
  background: var(--bg-wash);
}
.duo-cell {
  display: flex; align-items: center; padding: 16px 24px;
  font-size: 14px; color: var(--ink-soft); line-height: 1.5;
  border-left: 1px solid var(--line);
}
.duo-feet { border-top: 1px solid var(--line); }
.duo-feet > span { background: var(--bg-wash); }
.duo-go {
  display: flex; align-items: center; gap: 8px; padding: 16px 24px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--action);
  border-left: 1px solid var(--line); text-decoration: none;
}
.duo-go:hover { text-decoration: none; background: #f7fbfe; }
@media (max-width: 767px) {
  .duo-heads, .duo-row, .duo-feet { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .duo-heads > span:first-child, .duo-feet > span:first-child { display: none; }
  .duo-label { grid-column: 1 / -1; background: var(--band); color: #fff; font-size: 12.5px; padding: 11px 20px; }
  .duo-cell { border-left: 0; padding: 14px 20px; }
  .duo-cell + .duo-cell { border-left: 1px solid var(--line); }
  .duo-go { padding: 14px 20px; }
  .duo-go:first-of-type { border-left: 0; }
}

@media (max-width: 900px) {
  .cover-grid { grid-template-columns: minmax(0, 1fr); }
  .est-q:nth-child(3) .est-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ============================================================
   SERVICES: the picker, the cards and the comparison matrix
   ============================================================ */
.svc-pick { width: 100%; background: #fff; border-radius: 20px; padding: 22px 24px 24px; box-shadow: 0 22px 46px -22px rgba(43,69,95,0.45); }
.svc-pick-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 16px; }
.svc-pick-q + .svc-pick-q { margin-top: 16px; }
.svc-pick-q > p { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 7px; }
.svc-pick-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.svc-pick-opts .dept-pill {
  width: auto; justify-content: flex-start; gap: 9px; text-align: left; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 12px; font-size: 12.5px; color: var(--ink-soft);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.svc-pick-opts .dept-pill::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid #c6d6e4; background: #fff;
  transition: border-color 0.15s ease, border-width 0.15s ease;
}
.svc-pick-opts .dept-pill:hover { border-color: #cfe0ee; }
.svc-pick-opts .dept-pill.is-on { border-color: var(--action); background: #f2f9ff; color: var(--ink); }
.svc-pick-opts .dept-pill.is-on::before {
  border-color: var(--action); background: var(--action); box-shadow: inset 0 0 0 3px #fff;
}
.svc-pick-out {
  display: flex; align-items: center; gap: 13px; margin: 18px 0 14px;
  padding: 15px 16px; background: var(--bg-wash); border-radius: 14px;
  /* reserves the two-line answer, so switching options cannot resize the hero */
  min-height: 90px; align-items: flex-start;
}
.svc-pick-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--action); }
.svc-pick-out b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.svc-pick-out small { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.45; margin-top: 2px; }
.svc-pick-out > div { display: flex; flex-direction: column; justify-content: center; min-height: 58px; }
.svc-pick-cta { width: 100%; justify-content: center; }

/* Both pickers set `white-space: nowrap` on their pills, which is right on a
   desktop where the longest label still fits its track. On a phone the tracks
   are 125px, and 81px in the estimator's three-up question, so "We do,
   ourselves" needed 138px, "One full-time hire" 142px, and each ran past the
   edge of its own button and was clipped. They wrap instead.
   Placed after both pickers' own rules rather than beside the other mobile
   blocks: same specificity, so this only wins by coming later. */
@media (max-width: 640px) {
  .est-opts .dept-pill,
  .svc-pick-opts .dept-pill { white-space: normal; text-wrap: balance; line-height: 1.3; }
  .est-q:nth-child(3) .est-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.svc-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 28px 24px; color: inherit; text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  /* so the corner ribbon on the popular card is clipped by the rounded corner
     rather than hanging off it */
  position: relative; overflow: hidden;
}
/* One card carries a badge, so it is the one the eye should land on first.
   The accent border does that without a second colour or a bigger card. */
.svc-card.is-popular { border-color: var(--action); }
/* The panels are sized for "No entity needed", sixteen characters, so their
   band sits well into the corner. A card is smaller and its label is only
   twelve, so it keeps the band nearer the corner and sets it smaller. */
.svc-card .svc-ribbon { top: 30px; right: -42px; letter-spacing: 0.06em; }
/* The icon sits under the ribbon's inner end, so the first line gets out of
   its way. Only the popular card needs it. */
.svc-card.is-popular .svc-icon { margin-right: 46px; }
.svc-card:hover {
  text-decoration: none; transform: translateY(-3px); border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action) inset, 0 20px 36px -18px rgba(43,69,95,0.36);
}
.svc-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.svc-icon img { width: 46px; height: 46px; object-fit: contain; display: block; }
.svc-card b { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); letter-spacing: -0.01em; }
.svc-card > p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 14px; }
.svc-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.svc-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--ink-faint); line-height: 1.5;
}
.svc-list li::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 1px;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}
.svc-card .impact-more { margin-top: auto; }

/* ---------- comparison: columns you read, not a spreadsheet ----------
   One grid owns every row, and each card subgrids onto it, so a longer answer
   in one service still lines up with the same row in the others. Independent
   columns with fixed row heights drift the moment any cell wraps. */
.cmx-wrap { position: relative; --cmx-rail: 172px; --cmx-bleed: clamp(20px, 5vw, 32px); }
.cmx-wrap.is-short { --cmx-colmax: 330px; }
.cmx-wrap.is-short .cmx { justify-content: start; }
.cmx {
  display: grid; grid-template-columns: var(--cmx-rail); grid-auto-flow: column;
  grid-auto-columns: minmax(214px, var(--cmx-colmax, 1fr));
  grid-template-rows: auto repeat(6, auto) auto;
  column-gap: 14px; align-items: stretch;
  overflow-x: auto; scrollbar-width: none;
  padding: 12px var(--cmx-bleed) 48px 0; margin: -12px calc(var(--cmx-bleed) * -1) -48px 0;
  scroll-padding-right: var(--cmx-bleed);
}
.cmx::-webkit-scrollbar { display: none; }
.cmx-rail, .cmx-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
/* the labels stay put while the services scroll under them, so a cell on the
   far right still has a row heading you can read */
.cmx-rail {
  position: sticky; left: 0; z-index: 2; padding-right: 16px;
  background: var(--bg);
  /* the two flat shadows are not decoration: they extend the rail's own
     background over the scroller's padding bands, so a hovered column's shadow
     cannot appear above or below the labels it is passing behind */
  border-right: 1px solid var(--line);
  box-shadow: 0 -12px 0 var(--bg), 0 48px 0 var(--bg);
}
.section.is-tint .cmx-rail { background: #e8eef5; box-shadow: 0 -12px 0 #e8eef5, 0 48px 0 #e8eef5; }
/* edge fades, shown only on the side that still has columns to reach. The left
   fade starts after the rail so it never washes out the labels. */
.cmx-wrap::after {
  content: ""; position: absolute; top: 12px; bottom: 48px;
  right: calc(var(--cmx-bleed) * -1); width: 88px;
  pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 3;
  background: linear-gradient(270deg, var(--bg), rgba(255,255,255,0));
}
.section.is-tint .cmx-wrap::after { background: linear-gradient(270deg, #e8eef5, rgba(232,238,245,0)); }
.cmx-wrap.has-next::after { opacity: 1; }
.cmx-rail-top {
  display: flex; align-items: flex-end; padding-bottom: 16px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.cmx-label {
  display: flex; align-items: center; padding: 15px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink);
  border-top: 1px solid var(--line);
}
.cmx-col {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.cmx-col:hover { text-decoration: none; transform: translateY(-4px); border-color: #cfe0ee; box-shadow: 0 22px 38px -20px rgba(43,69,95,0.4); }
.cmx-col.is-on { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; }
.cmx-top {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 20px 18px 18px; background: var(--bg-wash);
}
.cmx-top img { width: 38px; height: 38px; object-fit: contain; display: block; margin-bottom: 10px; }
.cmx-top b { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.25; }
.cmx-top small {
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.42; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmx-cell {
  display: flex; align-items: center; padding: 15px 18px;
  font-size: 13px; color: var(--ink-soft); line-height: 1.42;
  border-top: 1px solid var(--line);
}
/* the rail carries the labels on desktop; each cell repeats them once stacked */
.cmx-cell em { display: none; }
.cmx-go {
  display: flex; align-items: center; gap: 7px; padding: 16px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--action);
}
@media (max-width: 900px) {
  .cmx-wrap { --cmx-rail: 0px; }
  .cmx { grid-template-columns: none; grid-template-rows: none; grid-auto-columns: 268px; }
  .cmx-rail { display: none; }
  .cmx-col { grid-row: auto; grid-template-rows: none; }
  .cmx-cell { align-items: flex-start; flex-direction: column; gap: 2px; padding: 13px 18px; }
  .cmx-cell em {
    display: block; font-style: normal; font-family: var(--font-display);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint);
  }
}

/* ---------- who does what: one card, two owners ----------
   An earlier version drew this as a timeline with a spine and Day one / Ongoing
   caps. That was wrong: these responsibilities are not sequential and the rows
   are not pairs, so the structure implied an order that does not exist and the
   uneven lists read as missing rows. It is two sets of duties, so it is drawn
   as two sets, with the imbalance stated in words rather than left as a hole. */
.br-wide { display: none; }
@media (min-width: 768px) { .br-wide { display: inline; } }
.split-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 26px 52px -34px rgba(43,69,95,0.5);
}
/* The header splits on the same line as the columns below it. As a flex row it
   sized itself to its own content, so the headline ran past the divider and the
   sentence started well after it: the bar and the columns disagreed about where
   the middle was, which is what read as "not centred" even though the two
   columns were exactly equal. */
.split-top {
  background: var(--band); color: #fff; padding: 26px 0;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center;
}
.split-top b {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.35;
  padding: 0 clamp(20px, 2.6vw, 38px) 0 clamp(24px, 4vw, 40px);
}
.split-top span {
  font-size: 13.5px; color: #a8bacb; line-height: 1.55;
  padding: 0 clamp(24px, 4vw, 40px) 0 clamp(20px, 2.6vw, 38px);
}
.split-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.split-col { position: relative; padding: 28px clamp(22px, 3.4vw, 38px) 30px; }
/* the mark runs off the bottom-right of our column and is cut by the divider,
   the same faded logo-icon treatment the founders block uses on the homepage */
.split-col.is-ours { overflow: hidden; }
.split-col.is-ours::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 360px; height: 364px; right: -136px; bottom: -152px;
  background-color: #e3edf6;
  -webkit-mask: url("/assets/logo-icon.svg") center / contain no-repeat;
  mask: url("/assets/logo-icon.svg") center / contain no-repeat;
}
.split-col > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .split-col.is-ours::after { width: 250px; height: 253px; right: -96px; bottom: -104px; }
}
.split-col + .split-col { border-left: 1px solid var(--line); }
.split-head {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.split-head img { height: 24px; width: auto; display: block; }
.split-head .split-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
/* The count pills are gone. A bare "4" and "3" in the corners read as scores
   with no scale, and the sentence in the header already says "4 of the 7
   responsibilities in this engagement sit with us", which is the same fact
   stated in a way that means something. */
.split-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.split-col li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.split-col li::before {
  content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}
.split-note {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-faint);
}
@media (max-width: 767px) {
  .split-cols, .split-top { grid-template-columns: minmax(0,1fr); }
  .split-top { gap: 10px; }
  .split-col + .split-col { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- hero vignette: the handover, running ---------- */
.svc-vig { width: 100%; background: #fff; border-radius: 20px; padding: 22px 24px 20px; box-shadow: 0 22px 46px -22px rgba(43,69,95,0.45); }
.svc-vig-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.svc-vig-art { width: 40px; height: 40px; object-fit: contain; display: block; }
.svc-vig-head b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.svc-vig-head small { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.45; margin-top: 1px; }
.svc-vig-steps { list-style: none; display: flex; flex-direction: column; gap: 0; margin: 4px 0 16px; }
.svc-vig-step {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 0;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-faint);
  opacity: 0.42; transition: opacity 0.4s ease, color 0.4s ease;
}
.svc-vig-step + .svc-vig-step { border-top: 1px solid var(--line); }
.svc-vig-step.is-done { opacity: 1; color: var(--ink-soft); }
.svc-vig-tick {
  flex: none; width: 19px; height: 19px; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid var(--line); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-vig-tick svg { opacity: 0; transition: opacity 0.25s ease; }
.svc-vig-step.is-done .svc-vig-tick { background: var(--action); border-color: var(--action); transform: scale(1.06); }
.svc-vig-step.is-done .svc-vig-tick svg { opacity: 1; }
.svc-vig-foot { display: flex; align-items: center; gap: 12px; }
.svc-vig-bar { flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--bg-wash); overflow: hidden; }
.svc-vig-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg,#1ec3d9,#2fa2f8); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.svc-vig-state { flex: none; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) {
  .svc-vig-step { opacity: 1; color: var(--ink-soft); }
  .svc-vig-step .svc-vig-tick { background: var(--action); border-color: var(--action); }
  .svc-vig-step .svc-vig-tick svg { opacity: 1; }
}

/* Equal columns so the gutter lands on the page axis. At 1.05/0.95 it sat 28px
   right of centre, directly under a stat band that is perfectly symmetric about
   that axis, and the two sections read as though one of them had slipped. */
.svc-what { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.svc-what h2 { margin-bottom: 14px; }
.svc-what .btn { margin-top: 8px; }
.svc-what p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 14px; }
.svc-includes {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 22px 44px -28px rgba(43,69,95,0.4);
}
/* same diagonal treatment as the pricing panel's ribbon */
/* A 45deg band across a corner is only legible over the chord that falls
   inside the box, and that chord is twice the distance from the corner to the
   band's centre. At top:20/right:-54 that came to about 90px, which is exactly
   the width of the words being set in it, so "BEST VALUE" lost its E. Moved far
   enough in to give about 110px, with the centre kept on the corner's bisector
   so the text stays centred in what is visible. */
.svc-ribbon {
  position: absolute; top: 34px; right: -36px; transform: rotate(45deg);
  background: var(--band); color: #fff;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  padding: 7px 0; width: 168px;
  box-shadow: 0 6px 16px rgba(43,69,95,0.28);
}
.svc-includes-title { width: fit-content; padding-right: 12px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; }
.svc-includes ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.svc-includes li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
}
.svc-includes li:first-child { padding-right: 98px; }
.svc-includes li:nth-child(2) { padding-right: 44px; }

/* the two-tone check from the roles pages, not a bare glyph */
.svc-includes li::before {
  content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}
.svc-compare-foot { display: flex; justify-content: center; margin-top: 30px; }

.svc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.svc-split-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px; }
.svc-split-card.is-ours { background: var(--band); border-color: var(--band); }
.svc-split-card b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-bottom: 14px; }
.svc-split-card.is-ours b { color: #fff; }
.svc-split-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.svc-split-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.svc-split-card.is-ours li { color: #cfdbe7; }
.svc-split-card.is-ours .vig-check-icon { color: #5dc1c7; }

.svc-price { background: var(--band); border-radius: 22px; padding: 38px clamp(24px, 4vw, 48px); text-align: center; }
.svc-price p { max-width: 62ch; margin: 0 auto 22px; font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.65; color: #e6eef6; }
.svc-price-ctas { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.impact-more.is-light { color: #9fd6f5; }
.svc-badge-ico, .svc-hero-ico { display: flex; align-items: center; justify-content: center; color: var(--action); }
.svc-hero-ico { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,0.1); color: #5dc1c7; flex: none; }
.svc-badge-art { width: 22px; height: 22px; object-fit: contain; display: block; }

@media (max-width: 1023px) { .svc-what { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 767px) { .svc-split { grid-template-columns: minmax(0,1fr); } }

/* ============================================================
   HIRE BY SOFTWARE: the stack board and its hero
   ============================================================ */
.sw-hero .rd-tile { display: flex; align-items: center; justify-content: center; }
.sw-stage { position: relative; }
.sw-concept { display: none; width: 100%; }
.sw-concept.is-on { display: flex; align-items: center; justify-content: center; }

/* ---------- concept 1: orbit ---------- */
.sw-orbit { position: relative; width: min(392px, 94%); aspect-ratio: 1; }
.sw-orbit-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(43,69,95,0.16); }
.sw-orbit-ring.is-out { inset: 0; }
.sw-orbit-ring.is-in { inset: 24%; border-style: solid; border-color: rgba(43,69,95,0.10); }
/* radius lives here, not inline, so it scales with the tile */
.sw-orbit-track { position: absolute; inset: 0; --r: 196px; animation: swSpin 66s linear infinite; }
.sw-orbit-track.is-in { --r: 118px; animation-duration: 46s; animation-direction: reverse; }
.sw-orbit-chip {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px;
  transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--r) * -1));
}
/* three levels: place on the ring, cancel the placement angle, cancel the spin */
.sw-orbit-chip i { display: block; width: 100%; height: 100%; transform: rotate(calc(var(--a) * -1deg)); }
.sw-orbit-chip b {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -10px rgba(43,69,95,0.4);
  animation: swSpin 66s linear infinite reverse;
}
.sw-orbit-track.is-in .sw-orbit-chip b { animation-duration: 46s; animation-direction: normal; }
.sw-orbit-chip img { width: 24px; height: 24px; object-fit: contain; display: block; }
@keyframes swSpin { to { transform: rotate(360deg); } }
.sw-orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 116px; height: 116px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px -16px rgba(43,69,95,0.42);
}
/* the pulse sits under the marks, never over them */
.sw-orbit-core::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; z-index: -1;
  border: 1px solid rgba(47,162,248,0.35); animation: swPulse 3.6s ease-out infinite;
}
@keyframes swPulse { 0% { transform: scale(1); opacity: 0.85; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.sw-orbit-core b { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: var(--ink); letter-spacing: -0.02em; }
.sw-orbit-core small { font-size: 11.5px; color: var(--ink-faint); }

/* ---------- concept 2: bubble pit ---------- */
.sw-pit {
  position: relative; width: 100%; aspect-ratio: 1 / 0.88;
  border-radius: 20px; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.16));
  border: 1px solid rgba(255,255,255,0.6);
}
.sw-pit canvas { display: block; width: 100%; height: 100%; }
.sw-pit-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  background: rgba(255,255,255,0.9); border-radius: 999px; padding: 6px 14px;
  pointer-events: none; transition: opacity 0.3s ease;
}
.sw-pit.is-touched .sw-pit-hint { opacity: 0; }

/* ---------- concept 3: 3D spin ---------- */
.sw-spin { position: relative; width: min(410px, 96%); aspect-ratio: 1 / 0.86; perspective: 1000px; }
.sw-spin-stage {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(58deg); animation: swSpin3d 30s linear infinite;
}
@keyframes swSpin3d { to { transform: rotateX(58deg) rotateZ(360deg); } }
/* four steps, in order: place on the ring, cancel the placement angle, cancel
   the stage spin, then stand the tile back up to face the viewer */
.sw-spin-chip {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px;
  transform-style: preserve-3d;
  transform: rotateZ(calc(var(--a) * 1deg)) translateY(-172px) rotateZ(calc(var(--a) * -1deg));
}
.sw-spin-chip i {
  display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: swSpin3dCounter 30s linear infinite;
}
@keyframes swSpin3dCounter { to { transform: rotateZ(-360deg); } }
.sw-spin-chip b {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 14px; background: #fff; box-shadow: 0 14px 26px -12px rgba(43,69,95,0.45);
  transform: rotateX(-58deg);
}
.sw-spin-chip img { width: 25px; height: 25px; object-fit: contain; display: block; }
.sw-spin-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 118px; height: 118px; border-radius: 50%; background: #fff; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 20px 44px -18px rgba(43,69,95,0.5);
}
.sw-spin-core b { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: var(--ink); letter-spacing: -0.02em; }
.sw-spin-core small { font-size: 11.5px; color: var(--ink-faint); }

/* ---------- concept 4: alternating marquee rows ---------- */
.sw-rows { width: 100%; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.sw-row { overflow: hidden; }
.sw-row-track { display: flex; gap: 12px; width: max-content; animation: swRow 34s linear infinite; }
.sw-row:nth-child(2) .sw-row-track { animation-duration: 42s; }
.sw-row:nth-child(3) .sw-row-track { animation-duration: 30s; }
.sw-row:nth-child(4) .sw-row-track { animation-duration: 46s; }
.sw-row:nth-child(5) .sw-row-track { animation-duration: 38s; }
.sw-row.is-rev .sw-row-track { animation-direction: reverse; }
@keyframes swRow { to { transform: translateX(-50%); } }
.sw-chip {
  flex: none; width: 54px; height: 54px; border-radius: 15px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -12px rgba(43,69,95,0.36);
}
.sw-chip img { width: 27px; height: 27px; object-fit: contain; display: block; }

/* preview-only hero switcher */
#swHeroSwitch {
  position: fixed; right: 16px; bottom: 16px; z-index: 96;
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 9px 7px 15px; box-shadow: 0 10px 26px -10px rgba(43,69,95,0.4);
  font-size: 11.5px; color: var(--ink-faint);
}
#swHeroSwitch button {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
#swHeroSwitch button.is-on { background: var(--band); border-color: var(--band); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sw-orbit-track, .sw-orbit-chip b, .sw-orbit-core::after,
  .sw-spin-stage, .sw-spin-chip i, .sw-row-track { animation: none; }
}
@media (max-width: 1023px) {
  .sw-orbit { width: min(320px, 94%); }
  .sw-orbit-track { --r: 158px; }
  .sw-orbit-track.is-in { --r: 94px; }
  .sw-orbit-chip { width: 40px; height: 40px; margin: -20px; }
  .sw-orbit-chip img { width: 21px; height: 21px; }
  .sw-orbit-core { width: 96px; height: 96px; }
  .sw-orbit-core b { font-size: 1.45rem; }
  .sw-spin { width: min(320px, 96%); }
  .sw-spin-chip { width: 42px; height: 42px; margin: -21px; transform: rotateZ(calc(var(--a) * 1deg)) translateY(-134px) rotateZ(calc(var(--a) * -1deg)); }
  .sw-spin-chip img { width: 22px; height: 22px; }
  .sw-spin-core { width: 98px; height: 98px; }
  .sw-chip { width: 46px; height: 46px; }
  .sw-chip img { width: 23px; height: 23px; }
}
@media (max-width: 639px) {
  .sw-orbit { width: min(270px, 90%); }
  .sw-orbit-track { --r: 132px; }
  .sw-orbit-track.is-in { --r: 78px; }
  .sw-orbit-chip { width: 34px; height: 34px; margin: -17px; }
  .sw-orbit-chip img { width: 18px; height: 18px; }
  .sw-orbit-core { width: 82px; height: 82px; }
  .sw-orbit-core b { font-size: 1.25rem; }
  .sw-orbit-core small { font-size: 10px; }
  .sw-spin { width: min(280px, 96%); }
  .sw-spin-chip { width: 36px; height: 36px; margin: -18px; transform: rotateZ(calc(var(--a) * 1deg)) translateY(-114px) rotateZ(calc(var(--a) * -1deg)); }
  .sw-spin-chip img { width: 19px; height: 19px; }
  .sw-spin-core { width: 84px; height: 84px; }
  #swHeroSwitch { display: none; }
}

.sw-controls { margin-bottom: 34px; }
.sw-search { display: flex; max-width: none; margin: 0 0 14px; padding: 13px 22px; box-shadow: 0 10px 26px -14px rgba(43,69,95,0.26); }
/* the tab row scrolls sideways once the categories outgrow the width; the fade
   and the arrow only appear on the side that still has tabs to reach */
.sw-cats-wrap { position: relative; }
.sw-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px 0; }
.sw-cats::-webkit-scrollbar { display: none; }
.sw-cats-wrap.has-next .sw-cats {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
}
.sw-cats-wrap.has-prev .sw-cats {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px);
  mask-image: linear-gradient(90deg, transparent 0, #000 96px);
}
.sw-cats-wrap.has-prev.has-next .sw-cats {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
.sw-cats .dept-pill {
  width: auto; flex: none; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
}
.sw-cats .dept-pill:hover { border-color: #cfe0ee; }
.sw-cats .dept-pill.is-on { background: var(--band); border-color: var(--band); color: #fff; }
.sw-cats-arrow {
  position: absolute; top: 50%; margin-top: -18px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(43,69,95,0.4);
}
.sw-cats-arrow.is-prev { left: 0; }
.sw-cats-arrow.is-next { right: 0; }
.sw-cats-wrap.has-prev .sw-cats-arrow.is-prev,
.sw-cats-wrap.has-next .sw-cats-arrow.is-next { display: flex; }
#swBoard { display: flex; flex-direction: column; gap: 40px; }
.sw-group[hidden] { display: none; }
.sw-group-head { margin-bottom: 18px; }
.sw-group-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; color: var(--ink); letter-spacing: -0.01em; }
.sw-group-head p { font-size: 14px; color: var(--ink-faint); margin-top: 2px; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.sw-tile {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sw-tile[hidden] { display: none; }
.sw-tile:hover { transform: translateY(-3px); border-color: #cfe0ee; box-shadow: 0 16px 30px -16px rgba(43,69,95,0.34); }
.sw-tile.is-picked { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; }
.sw-tile-link { display: block; padding: 20px 20px 18px; color: inherit; text-decoration: none; }
.sw-tile-link:hover { text-decoration: none; }
.sw-logo {
  width: 44px; height: 44px; border-radius: 12px; background: var(--bg-wash);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.sw-logo img { width: 26px; height: 26px; object-fit: contain; display: block; }
.sw-tile b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.sw-hint { display: block; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin-top: 3px; }
/* the tick sits above the link so picking a tool never navigates */
.sw-pick {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sw-pick::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0.6);
  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
}
.sw-tile:hover .sw-pick { border-color: #a9c4da; }
.sw-pick[aria-pressed="true"] { background: var(--action); border-color: var(--action); }
.sw-pick[aria-pressed="true"]::after { opacity: 1; transform: rotate(45deg) scale(1); }

.sw-catchall {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 38px; padding: 24px 28px;
  background: #fff; border: 1px dashed #c6d6e4; border-radius: 18px;
}
.sw-catchall b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.sw-catchall p { font-size: 14px; color: var(--ink-soft); margin-top: 4px; max-width: 60ch; }

/* the running stack: docked out of the way until something is picked */
.sw-stackbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: 0 clamp(12px, 4vw, 28px) 18px;
  transform: translateY(140%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.sw-stackbar.is-on { transform: translateY(0); pointer-events: auto; }
.sw-stackbar-inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; padding: 12px 14px 12px 22px;
  background: var(--band); border-radius: 999px;
  box-shadow: 0 22px 44px -18px rgba(9,17,26,0.6);
}
.sw-stackbar-count { font-family: var(--font-display); font-size: 13px; color: #a8bacb; flex: none; }
.sw-stackbar-count b { color: #fff; font-weight: 600; }
.sw-stackbar-chips { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.sw-stackbar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; color: #e6eef6;
  background: rgba(255,255,255,0.10); border-radius: 999px; padding: 5px 11px 5px 6px;
}
.sw-stackbar-chip img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; background: #fff; padding: 1px; }
.sw-stackbar .btn { flex: none; }
@media (max-width: 767px) {
  .sw-stackbar-inner { border-radius: 20px; padding: 12px 14px; }
  .sw-stackbar-chips { display: none; }
  .sw-stackbar .btn { width: 100%; justify-content: center; }
}

/* platform landing pages: the hero badge and the specialist-vs-general table */
.sw-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px 7px 8px;
  box-shadow: 0 8px 20px -12px rgba(43,69,95,0.3);
}
.sw-badge img { width: 22px; height: 22px; object-fit: contain; display: block; }
.sw-badge b { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.sw-vs { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.sw-vs-head, .sw-vs-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; gap: 16px; padding: 16px 26px; }
.sw-vs-head { background: var(--bg-wash); border-bottom: 1px solid var(--line); }
.sw-vs-head img { width: 20px; height: 20px; object-fit: contain; display: block; }
.sw-vs-head b { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.sw-vs-row + .sw-vs-row { border-top: 1px solid var(--line); }
.sw-vs-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.sw-vs-cell { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); }
.sw-vs-cell.is-yes { color: var(--ink); }
.sw-vs-cell .vig-check-icon { flex: none; }
.sw-related .sw-tile { flex: 0 0 clamp(230px, 24vw, 268px); scroll-snap-align: start; text-decoration: none; }
@media (max-width: 767px) {
  .sw-vs-head, .sw-vs-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 20px; }
  .sw-vs-head span:first-child { display: none; }
}

/* ============================================================
   WORK PLACEHOLDERS: stand-ins until real assets land. Deliberately not
   client artwork, which reads as a case-study claim.
   ============================================================ */
.work-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: #eef3f8; border: 1px dashed #c6d6e4; border-radius: 12px;
  color: #8298ac; text-align: center; padding: 16px;
}
.work-ph-icon { display: block; color: #9db2c6; }
.work-ph b { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: #61798e; }
.work-ph small { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #9db2c6; }

/* ============================================================
   PAIRS WITH: the two roles clients add next
   ============================================================ */
.pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.pair-card {
  display: flex; align-items: stretch; gap: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 24px 20px 20px; color: inherit; text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.pair-card:hover {
  text-decoration: none; transform: translateY(-3px);
  border-color: #cfe0ee; box-shadow: 0 18px 34px -16px rgba(43,69,95,0.34);
}
.pair-role {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--ink); letter-spacing: -0.02em;
}
.pair-photo {
  flex: none; width: 108px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.pair-photo img { width: 100%; height: auto; display: block; }
.pair-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pair-card p { margin: 8px 0 14px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 767px) { .pair-grid { grid-template-columns: minmax(0,1fr); gap: 14px; } .pair-photo { width: 86px; } }

/* ============================================================
   WORK WALL: the same client work as a dense grid, volume over detail
   ============================================================ */
.wall-section { background: var(--band); }
.wall-head { text-align: center; max-width: 620px; margin: 0 auto 38px; }
.wall-head .eyebrow { color: #5dc1c7; }
.wall-head h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.026em; margin-bottom: 12px; }
.wall-head p { color: #cfdbe7; font-size: 15px; line-height: 1.7; }
/* columns, not grid: this is what gives a masonry its uneven, dense edge */
.wall-grid { column-count: 4; column-gap: 16px; }
.wall-tile {
  display: block; break-inside: avoid; margin-bottom: 16px;
  border-radius: 14px; overflow: hidden; position: relative;
  transition: transform 0.25s ease;
}
.wall-tile:hover { transform: translateY(-4px); }
.wall-tile .work-ph { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); }
.wall-tile .work-ph b { color: #e6eef6; }
.wall-tile .work-ph small, .wall-tile .work-ph-icon { color: #8fa9c0; }
.wall-foot { text-align: center; margin-top: 30px; }
@media (max-width: 1023px) { .wall-grid { column-count: 3; } }
@media (max-width: 639px) { .wall-grid { column-count: 2; column-gap: 12px; } .wall-tile { margin-bottom: 12px; } }

/* ============================================================
   WORK SHOWCASE  (roles whose output can be seen: real client work)
   ============================================================ */
.ws-section { background: #f4f6f8; }
.ws-head { max-width: 660px; margin-bottom: 34px; }
.ws-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.026em; margin-bottom: 12px; }
.ws-head p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.ws-head .btn { margin-top: 22px; }
/* the wall: client work running off the right edge of the viewport */
.ws-tile {
  flex: 0 0 clamp(240px, 24vw, 296px); scroll-snap-align: start;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  color: inherit; text-decoration: none;
  box-shadow: 0 14px 28px -14px rgba(43,69,95,0.34);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ws-tile:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 20px 34px -14px rgba(43,69,95,0.42); }
.ws-tile .work-ph { border: none; border-radius: 0; border-bottom: 1px dashed #c6d6e4; }
.ws-cap { flex: 1; padding: 13px 16px 15px; border-top: 1px solid var(--line); }
.ws-cap .ws-cap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ws-cap b { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink); }
.ws-cap span { display: block; font-size: 11.5px; color: var(--ink-faint); }
.ws-badge {
  flex: none; display: inline-block; width: auto;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--bg-wash); border-radius: 999px; padding: 5px 10px;
}

/* ============================================================
   CLIENT LOGO MARQUEE
   ============================================================ */
/* The hero contributes 84px of bottom padding, so the top padding here
   is the remainder that makes the air above the heading match the air
   below the logos. */
.logos { padding: 12px 0 96px; border-bottom: 1px solid var(--line); }
.logos-head { text-align: center; margin-bottom: 40px; }
.logos-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; }
.logo-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px 46px; max-width: 1240px; }
/* Live-site behavior Philip and Harlan like: clients with a case
   study carry a visible "Case Study" tag under the logo, and hovering
   pops the story card (logo, summary, the founder who said it). */
.logo-item {
  /* Declared on the item, not the grid, so everything that reads them lives
     inside the element that defines them. */
  --cs-tag-gap: 8px;   /* space between a logo and its tag */
  --cs-tag-h: 21px;    /* the tag's fixed height, reserved on every item */
  --logo-h: 31px;      /* wordmark height */
  --logo-slot: 40px;   /* slot every logo occupies: the tallest, an emblem */
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  gap: var(--cs-tag-gap); text-decoration: none;
}
/* Every item reserves the tag's space, so the logos sit on one line.
 *
 * They did not. The grid centres each item and an item was only as tall as its
 * contents, so a logo carrying a tag stood 29px taller than a bare one and
 * centring pushed its logo 16px higher than its neighbours: Wayflyer sat low in
 * the top row, Sunflower rode high in the bottom one. Philip reported it, and
 * the Webflow original does not do this.
 *
 * The tag itself stays in normal flow. It is wider than several of the logos,
 * so taking it out of flow shrink-wraps it to the logo's width and the pill
 * wraps onto two lines and clips - tried, and visibly worse than the bug.
 * Giving untagged items an empty spacer of the same height instead makes every
 * item exactly `logo + gap + tag` tall. That surplus is identical for a 31px
 * wordmark and a 40px emblem, so centring lines the logos up whatever their
 * own height. */
.logo-item:not(:has(.cs-tag))::after {
  content: ""; display: block; height: var(--cs-tag-h);
}
a.logo-item:hover { text-decoration: none; }
/* Exact live-site tag: #d3eef8 pill, #1f577a text, and the arrow
   chip that slides in beside it on hover. */
/* Fixed height rather than whatever the pill's line box comes to, so the tag
   and the spacer above can never disagree. */
.cs-tag { display: inline-flex; align-items: center; overflow: hidden; height: var(--cs-tag-h); }
.cs-tag-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.02em; color: #1f577a;
  background: #d3eef8; border-radius: 24px; padding: 4px 9px;
}
.cs-tag-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #d3eef8; color: #1f577a; flex: none;
  margin-left: 3px; opacity: 0; transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cs-tag-arrow svg { display: block; }
.logo-item:hover .cs-tag-arrow { opacity: 1; transform: translateX(0); }
.logo-pop { display: none; }
/* Belt and braces for the clamp above. Clipped on the full-bleed section, not
   on the centred row: a popover is meant to spill past the container, just
   never past the viewport. overflow-x: clip (not hidden) leaves vertical
   overflow visible, which is the direction the popovers open in. */
.logos { overflow-x: clip; overflow-y: visible; }
@media (hover: hover) and (min-width: 640px) {
  .logo-pop {
    display: block;
    position: absolute; bottom: calc(100% + 14px); left: 50%;
    /* --pop-x is set from measured geometry so a card near the page edge
       slides back inside instead of pushing the page sideways */
    transform: translateX(calc(-50% + var(--pop-x, 0px))) translateY(10px) scale(0.97);
    transform-origin: bottom center;
    width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    /* The live site's layered shadow: six soft stacked passes */
    box-shadow:
      0 100px 80px rgba(0,0,0,0.07), 0 41.8px 33.4px rgba(0,0,0,0.05),
      0 22.3px 17.9px rgba(0,0,0,0.04), 0 12.5px 10px rgba(0,0,0,0.04),
      0 6.7px 5.3px rgba(0,0,0,0.03), 0 2.8px 2.2px rgba(0,0,0,0.02);
    padding: 18px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
    z-index: 20; text-align: left;
  }
  .logo-item:hover .logo-pop { opacity: 1; transform: translateX(calc(-50% + var(--pop-x, 0px))) translateY(0) scale(1); }
}
.logo-pop .pop-logo { display: block; height: 22px; width: auto; max-width: 130px; object-fit: contain; margin-bottom: 11px; }
.logo-pop .pop-text { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.logo-pop .pop-hr { display: block; height: 1px; background: var(--line); margin: 13px 0 12px; }
.logo-pop .pop-author { display: flex; align-items: center; gap: 10px; }
.logo-pop .pop-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.logo-pop .pop-author b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.3; }
.logo-pop .pop-author i { display: block; font-style: normal; font-size: 12px; color: var(--ink-faint); }
/* Real client logos from the live site's component library. */
/* Every logo takes the same vertical slot, wordmark or emblem, so the tags
   beneath them line up as well as the logos do. Without it the single 40px
   emblem sits its own tag about 5px below the rest of the row.
   box-sizing is stated because the global reset is border-box, where this
   padding would be taken out of the height instead of added around it. */
.logo-mark {
  box-sizing: content-box;
  height: var(--logo-h); width: auto; max-width: 160px; object-fit: contain;
  padding: calc((var(--logo-slot) - var(--logo-h)) / 2) 0;
}
/* emblems carry no width, so they need height to match the wordmarks */
.logo-mark.is-emblem { height: var(--logo-slot); padding: 0; }
.pop-logo.is-emblem { height: 34px; }
/* Marquee (candidate proof row only). Edge fade so entering and
   leaving cards read as designed, not clipped. */
.marquee { overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track { display: flex; gap: 56px; width: max-content; align-items: center; }

/* ============================================================
   CANDIDATE PROOF MARQUEE  (spec 2.2, the number one gap)
   ============================================================ */
.candidate-card {
  width: 300px; flex: none; position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 10px 26px rgba(43,69,95,0.05);
}
.candidate-card .verified-pill { position: absolute; top: 14px; right: 14px; font-size: 11px; padding: 3px 10px; transition: background-color 0.25s ease; }
.candidate-top .cand-avatar { overflow: visible; position: relative; }
.candidate-top .cand-avatar > img:first-child { border-radius: 50%; }
.candidate-top .cand-avatar .avatar-flag {
  position: absolute; right: -5px; bottom: -3px; z-index: 2;
  width: 20px; height: 15px; border-radius: 3px;
  border: 2px solid #fff; object-fit: cover;
  transition: border-color 0.25s ease;
}
.candidate-card:hover .cand-avatar .avatar-flag { border-color: var(--band); }
/* Hover: the card flips to brand navy, echoing the hero match card */
.candidate-card { transition: background-color 0.25s ease, border-color 0.25s ease; }
.candidate-card .candidate-name, .candidate-card .candidate-role,
.candidate-card .candidate-country, .candidate-card .candidate-prev .k { transition: color 0.25s ease; }
.candidate-card .candidate-prev { transition: border-color 0.25s ease; }
.candidate-card .prev-logo { border-radius: 5px; padding: 2px 6px; background: transparent; transition: background-color 0.25s ease; }
.candidate-card:hover { background: var(--band); border-color: var(--band); }
.candidate-card:hover .candidate-name { color: #fff; }
.candidate-card:hover .candidate-role { color: #cfdbe7; }
.candidate-card:hover .candidate-country { color: #a8bacb; }
.candidate-card:hover .candidate-prev { border-top-color: rgba(255,255,255,0.2); }
.candidate-card:hover .candidate-prev .k { color: #a8bacb; }
.candidate-card:hover .verified-pill { background: #fff; }
.candidate-card:hover .prev-logo { background: #fff; }
.candidate-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.candidate-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.candidate-role { font-size: 13.5px; color: var(--ink-soft); }
.candidate-country { margin-top: 4px; display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--font-display); }
.candidate-prev { border-top: 1px solid var(--line); padding-top: 12px; display: flex; align-items: center; gap: 8px; }
.candidate-rate {
  margin-left: auto; font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  color: var(--ink); background: var(--bg-wash); border-radius: 999px; padding: 3px 9px; flex: none;
}
.candidate-prev .k { font-size: 12px; color: var(--ink-faint); flex: none; }
.candidate-prev .prev-logo { height: 17px; width: auto; max-width: 96px; }
.candidate-prev .prev-logo.is-badge { height: 26px; }
.candidates .marquee { padding: 6px 0 10px; }
.candidates .marquee-track { gap: 18px; }

/* ============================================================
   IMPACT GRID  (quantified results, Growth Assistant borrow)
   ============================================================ */
/* Proof of work: a contractor at work on the left, every case-study
   result stacked beside her, on the dark band. */
.impact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.impact-col { display: flex; flex-direction: column; gap: 20px; }
.impact-col .impact-card { flex: 1; }
.impact-card {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border-radius: 14px; padding: 22px 26px;
  text-decoration: none; color: inherit;
  box-shadow: 0 18px 40px rgba(9,17,26,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.impact-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 26px 52px rgba(9,17,26,0.4); }
.impact-logo { height: 20px; width: auto; max-width: 132px; object-fit: contain; margin-bottom: 12px; }
/* An emblem needs height to match a wordmark's optical weight, but this
   file carries ~6px of padding inside its own artwork, so the margins
   pull the visible mark back onto the same baseline as the others. */
.impact-logo.is-emblem { height: 30px; margin-top: -5px; margin-bottom: 7px; }
.impact-big { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 5px; }
.impact-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 12px; }
.impact-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--action); margin-top: auto; }
.impact-more svg { display: block; }
.impact-cta { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 38px; }

/* ============================================================
   WHERE WE HIRE FROM  (spec 3.8)
   ============================================================ */
/* Dotted globe horizon with floating region pins; the three
   region summaries sit in clean columns beneath it. */
.regions-layout {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 560px);
  justify-content: center;
  gap: clamp(24px, 3.5vw, 52px); align-items: center; margin-top: 8px;
}
/* Globe sits on the right; on mobile it returns to the top. */
.regions-layout .globe-wrap { order: 2; }
.regions-layout .regions-list { order: 1; }
.globe-wrap { position: relative; max-width: 560px; justify-self: center; width: 100%; }
.globe-art {
  width: 100%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* Hover tooltips for the markers riding the rotating globe */
.globe-tip {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -135%);
  background: #fff; border-radius: 999px;
  padding: 8px 16px; white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink);
  box-shadow: 0 8px 20px rgba(43,69,95,0.14);
  opacity: 0; transition: opacity 0.15s ease; z-index: 5;
}
.globe-tip.is-on { opacity: 1; }
.globe-canvas { display: block; width: 100%; height: auto; }
.globe-pin {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--action); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(9,17,26,0.25); cursor: pointer; z-index: 4;
}
.globe-pin::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--action); opacity: 0;
  animation: pinPulse 1.6s ease-out infinite;
}
@keyframes pinPulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
.globe-tip .pin-time { color: var(--ink-faint); margin-left: 7px; }
.region-flags { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.region-flags img {
  height: 22px; width: auto; border-radius: 4px;
  border: 1px solid rgba(43,69,95,0.12); background: #fff;
}
.region-flags img + img { margin-left: -7px; }
/* The three regions stacked beside the globe, split by hairlines. */
.regions-list { display: flex; flex-direction: column; }
.region-col { padding: 24px 0; text-align: left; }
.region-col:first-child { padding-top: 0; }
.region-col + .region-col { border-top: 1px solid var(--line); }
.region-col h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 8px; }
.region-col p { font-size: 14.5px; margin-bottom: 10px; }
.region-col a { font-size: 14px; font-weight: 600; font-family: var(--font-display); }
/* "Compare the regions" is an action on the whole section, not on Africa. It
   sat inside the Africa column immediately after "Hire from Africa", with the
   same link styling and nothing between them, so the two ran together and read
   as one broken control. It stands alone here, above the compliance line, so
   the fine print stays last. */
.regions-cta { margin-top: 36px; text-align: center; }
.regions-foot { margin-top: 18px; font-size: 14px; color: var(--ink-faint); text-align: center; max-width: 70ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   HOW IT WORKS  (5 steps kept, custom vignettes replace stock)
   ============================================================ */
/* How it works: five static rows, vignette left, text card right.
   No scroll machinery: nothing to break. */
.hiw-rows { display: flex; flex-direction: column; gap: 22px; max-width: 1000px; margin: 0 auto; }
.hiw-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 22px; align-items: stretch; }
.hiw-row .vignette { display: flex; align-items: center; }
.hiw-row .vig-window { width: 100%; }
/* The step number sits to the left of its heading, on the same line, rather
   than stacked above it: the team read the stacked version as a floating badge
   with no obvious relationship to the words under it. A two-column grid keeps
   the number in its own column and hangs the body copy off the heading, so the
   text block stays a single left edge. */
.hiw-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 40px;
  display: grid; grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px; align-content: center;
}
.hiw-card > * { grid-column: 2; }
.hiw-num {
  grid-column: 1; grid-row: 1; align-self: center;
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(90deg, #1ec3d9, #2fa2f8); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.hiw-card h3 { grid-row: 1; align-self: center; font-size: 1.25rem; margin-bottom: 0; }
.hiw-card p { font-size: 14.5px; max-width: 54ch; margin-top: 10px; }
.hiw-cta { margin-top: 16px; }
/* Step vignettes: each is a small, real product window on its
   pastel tile, sharing one window system. */
.vignette { border-radius: var(--radius); padding: 26px; }
.vignette.is-aqua { background: var(--tile-aqua); }
.vignette.is-blue { background: var(--tile-blue); }
.vignette.is-sand { background: #f6f1e7; }
.vig-window {
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(43,69,95,0.12);
}
a.vig-window { display: block; color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.vig-window:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(43,69,95,0.18); text-decoration: none; }
.vig-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink);
}
.vig-chip {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  color: var(--ink-soft); background: var(--bg-wash); border-radius: 999px; padding: 3px 10px;
}
.vig-body { padding: 14px 16px 16px; }
.vig-row { display: flex; align-items: center; gap: 10px; }
.vig-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; background: var(--tile-aqua);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--ink); }
.vig-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vig-name { display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.vig-sub { display: block; font-size: 11px; color: var(--ink-faint); line-height: 1.3; }
/* 1. scheduler */
.vig-dates { display: flex; gap: 6px; margin-bottom: 10px; }
.vig-date {
  flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 0 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--ink-faint);
}
.vig-date b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.vig-date.is-on { border-color: #2fa2f8; background: #ecf6fe; color: var(--ink-soft); }
.vig-times { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.vig-time {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
}
.vig-time.is-on { background: #2fa2f8; border-color: #2fa2f8; color: #fff; }
.vig-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 11px; }
.vig-faces { display: flex; }
.vig-faces .vig-avatar { border: 2px solid #fff; }
.vig-faces .vig-avatar + .vig-avatar { margin-left: -9px; }
.vig-cta {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, #1ec3d9, #2fa2f8); border-radius: 999px; padding: 6px 14px;
}
/* 2. agreement */
.vig-lines { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.vig-line { height: 7px; border-radius: 4px; background: var(--bg-wash); }
.vig-clauses { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.vig-clause {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 5px;
}
.vig-check-icon {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; line-height: 1; flex: none;
}
.vig-clause .vig-check-icon { width: 15px; height: 15px; font-size: 9px; background: #e1f3f7; color: #17a2b8; }
.vig-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.vig-sign svg { display: block; }
.vig-signed {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--action);
}
/* 3. pipeline */
.vig-cand { padding: 8px 10px; border-radius: 9px; margin: 0 -6px; }
.vig-cand + .vig-cand { margin-top: 2px; }
.vig-cand.is-top { background: var(--bg-wash); }
.vig-cand .vig-row { gap: 9px; }
.vig-cand-meta { flex: 1; min-width: 0; }
.vig-match {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  color: var(--action); background: #eef3fd; border-radius: 999px; padding: 3px 9px; flex: none;
}
.vig-match.is-star { background: #2fa2f8; color: #fff; }
.vig-note { font-size: 12px; color: var(--ink-faint); border-top: 1px solid var(--line); margin-top: 10px; padding-top: 9px; }
/* Uniform vignette height: every step window matches step 4's
   natural height; bodies stretch and distribute, footers pin. */
@media (min-width: 721px) {
  /* Card stacking: rows pin below the header with a small stagger, so
     each next step slides up and over the previous one. The white row
     background occludes the covered card (page bg is white too). */
  .hiw-row { position: sticky; background: #fff; border-radius: var(--radius); }
  .hiw-row:nth-child(1) { top: 92px; }
  .hiw-row:nth-child(2) { top: 104px; }
  .hiw-row:nth-child(3) { top: 116px; }
  .hiw-row:nth-child(4) { top: 128px; }
  .hiw-row:nth-child(5) { top: 140px; }
  .hiw-row .vig-window { height: 264px; display: flex; flex-direction: column; }
  .hiw-row .vig-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; }
  .hiw-row .vig-stage { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .hiw-row .vig-tile { aspect-ratio: auto; height: 100%; min-height: 0; }
}
/* Scheduler animation: guided cursor + booked confirmation */
.vig-sched { position: relative; }
.vig-cursor {
  position: absolute; z-index: 6; top: 46%; left: 58%; opacity: 0;
  pointer-events: none; filter: drop-shadow(0 2px 5px rgba(20,34,48,0.35));
}
.vig-booked {
  position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 10px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 34px rgba(43,69,95,0.20); padding: 10px 13px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
}
.vig-booked-check {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #e1f6ee; color: #1d9d6f;
  display: flex; align-items: center; justify-content: center;
}
.vig-booked b { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vig-booked i { display: block; font-style: normal; font-size: 11px; color: var(--ink-faint); }
/* 4. interview call */
.vig-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vig-tile { position: relative; border-radius: 9px; overflow: hidden; aspect-ratio: 1; }
.vig-tile > img, .vig-tile > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vig-stage-name {
  position: absolute; left: 7px; bottom: 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(20,34,48,0.72); border-radius: 6px; padding: 3px 8px;
}
.vig-controls { display: flex; justify-content: center; gap: 10px; padding-top: 12px; }
.vig-ctrl {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-wash);
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
}
.vig-ctrl.is-end { background: #d64545; color: #fff; }
/* 5. kickoff */
.vig-kick { display: flex; align-items: center; gap: 13px; }
.vig-progress-top {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--ink-faint);
  margin-bottom: 6px;
}
.vig-bar { height: 6px; border-radius: 4px; background: var(--bg-wash); overflow: hidden; }
.vig-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #1ec3d9, #2fa2f8); }
.vig-kick-avatar { position: relative; width: 52px; height: 52px; flex: none; }
.vig-kick-avatar > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.vig-kick-avatar .avatar-flag {
  position: absolute; right: -4px; bottom: -2px; z-index: 2;
  width: 20px; height: 15px; border-radius: 3px;
  border: 2px solid #fff; object-fit: cover;
}
.vig-kick-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vig-kick .vig-name { font-size: 13.5px; }
.vig-status {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  color: var(--action); background: #eef3fd; border-radius: 999px; padding: 3px 10px; flex: none;
}
.vig-protect { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.vig-protect .vig-row { gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--ink); }
.vig-protect svg { color: var(--action); flex: none; }

/* ============================================================
   COMPARISON TABLE  (Growth Assistant borrow, our numbers)
   ============================================================ */
/* Comparison matrix: criteria left, one protruding navy column for
   Hire Overseas, check and dash icons for the verdicts. */
.vs {
  max-width: 1000px; margin: 16px auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(43,69,95,0.08);
  padding: 24px 40px 24px 32px;
}
.vs-row { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1fr) minmax(0,1fr); column-gap: 34px; align-items: stretch; }
.vs-col {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: flex-start; text-align: left;
}
/* The reveal animation leaves transforms on rows, so each is a stacking
   context; the head row must sit above them for the open menu to paint on top. */
.vs-row.is-head { position: relative; z-index: 5; }
.vs-pick { position: relative; display: inline-block; max-width: 100%; }
.vs-pick-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234e6479' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center no-repeat;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 46px 9px 22px; min-height: 38px; min-width: 170px; max-width: 100%;
  cursor: pointer; transition: border-color 0.15s ease;
}
.vs-pick-btn:hover, .vs-pick-btn:focus-visible { border-color: var(--ink-soft); }
.vs-pick-logo { display: block; width: auto; max-width: 118px; }
.vs-pick-text { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.vs-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 100%; width: max-content; margin: 0; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 44px rgba(43,69,95,0.18);
  display: none;
}
.vs-menu-list { margin: 0; padding: 0; list-style: none; }
.vs-search {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--bg-wash); border: 1px solid transparent; border-radius: 9px;
  padding: 8px 12px; margin-bottom: 6px; outline: none;
}
.vs-search:focus { border-color: var(--ink-soft); background: #fff; }
.vs-search::placeholder { color: var(--ink-faint); }
.vs-empty {
  display: none; font-family: var(--font-display); font-size: 12.5px; font-weight: 500;
  color: var(--ink-faint); padding: 9px 12px;
}
.vs-pick.is-open .vs-menu { display: block; }
.vs-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink);
  text-transform: none; letter-spacing: normal;
  border-radius: 9px; padding: 9px 12px; cursor: pointer; white-space: nowrap;
}
.vs-option:hover, .vs-option:focus-visible { background: var(--bg-wash); outline: none; }
.vs-option[aria-selected="true"] { color: var(--action); }
.vs-option[aria-selected="true"]::after { content: "\2713"; font-size: 12px; }
.vs-crit {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; padding: 15px 8px 15px 0;
}
.vs-cell::before { display: none; }
.vs-cell {
  overflow-wrap: break-word; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 15px 8px 15px 0; font-size: 13.5px; color: var(--ink-soft); text-align: left;
}
.vs-row:not(.is-head) + .vs-row .vs-crit,
.vs-row:not(.is-head) + .vs-row .vs-cell:not(.is-ho) { border-top: 1px solid var(--line); }
.vs-cell .cell-note { display: block; font-size: 12px; color: var(--ink-faint); }
/* The featured navy column, protruding past the first and last rows */
.vs-cell.is-ho { background: var(--bg-wash); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 14px; padding-left: 22px; padding-right: 22px; }
.vs-row + .vs-row .vs-cell.is-ho { border-top: 1px solid var(--line); }
.vs-row.is-head .vs-cell.is-ho { border-radius: 14px 14px 0 0; margin-top: -16px; padding: 24px 8px 18px; align-items: center; }
.vs-row.is-last .vs-cell.is-ho { border-radius: 0 0 14px 14px; margin-bottom: -16px; padding-bottom: 28px; }
.vs-cell.is-ho .cell-note { color: var(--ink-faint); }
.vs-logo { height: 26px; width: auto; }
.compare-foot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-top: 34px; }
.compare-foot p { font-size: 13.5px; color: var(--ink-faint); }

/* ============================================================
   PRICING  (spec 2.3 + 3.4: the floor stated plainly, impossible
   to scroll past)
   ============================================================ */
.pricing-panel {
  position: relative; overflow: hidden;
  background: #fff url("/assets/hero-gradient-bg.avif") center 38% / cover no-repeat;
  border-radius: var(--radius);
  padding: 48px 52px;
  display: grid; grid-template-columns: auto 1fr; gap: 24px 64px;
  align-items: center;
}
.pricing-ribbon {
  position: absolute; top: 30px; right: -44px; transform: rotate(45deg);
  background: var(--band); color: #fff;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  padding: 8px 0; width: 190px;
  box-shadow: 0 6px 16px rgba(43,69,95,0.28);
}
/* on the grey ground the gradient muddies, so those pages use a flat white card */
.pricing-panel.is-plain { background: #fff; border: 1px solid var(--line); }
.pricing-figure { display: flex; flex-direction: column; gap: 4px; }
.pricing-label {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
}
.pricing-amount {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(2.6rem, 4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1;
}
.pricing-amount .pricing-per { font-size: 0.4em; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.pricing-note { font-size: 14.5px; color: var(--ink-soft); }
.pricing-terms {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
}
.pricing-terms li {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink);
}
.pricing-terms .vig-check-icon { width: 20px; height: 20px; font-size: 11px; }
.pricing-ctas { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; border-top: 1px solid #d3e0f2; padding-top: 26px; }
.pricing-ctas .hero-micro { margin-left: 4px; }
@media (max-width: 1023px) {
  .pricing-panel { grid-template-columns: 1fr; padding: 36px 32px; }
  /* the corner ribbon would sit on the label at this width */
  .pricing-ribbon { top: 22px; right: -52px; width: 170px; font-size: 10.5px; padding: 6px 0; }
  .pricing-figure { padding-right: 96px; }
}
@media (max-width: 639px) {
  .pricing-terms { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE STUDIES  (the live site's slider component, replicated:
   logo tabs, one large card, prev/next arrows)
   ============================================================ */
.cs-tabs {
  display: flex; gap: 12px; justify-content: flex-start;
  overflow-x: auto; padding: 4px 4px 8px; margin-bottom: 26px;
  scrollbar-width: none;
}
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tab:first-child { margin-left: auto; }
.cs-tab:last-child { margin-right: auto; }
/* Scroll affordance for the tab strip: edge fades plus arrow buttons,
   shown only on the side(s) with more logos to reveal. */
.cs-tabs-shell { position: relative; }
.cs-tabs-shell::before, .cs-tabs-shell::after {
  content: ""; position: absolute; top: 0; bottom: 8px; width: 56px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
}
.cs-tabs-shell::before { left: 0; background: linear-gradient(90deg, #e8eef5, rgba(232,238,245,0)); }
.cs-tabs-shell::after { right: 0; background: linear-gradient(270deg, #e8eef5, rgba(232,238,245,0)); }
.cs-tabs-shell.can-left::before, .cs-tabs-shell.can-right::after { opacity: 1; }
.cs-tab-nav {
  position: absolute; top: 50%; transform: translateY(-58%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(43,69,95,0.18);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.cs-tab-nav svg { display: block; }
.cs-tab-nav.is-left { left: 2px; }
.cs-tab-nav.is-right { right: 2px; }
.cs-tabs-shell.can-left .cs-tab-nav.is-left,
.cs-tabs-shell.can-right .cs-tab-nav.is-right { opacity: 1; pointer-events: auto; }
.cs-tab {
  flex: none; display: flex; align-items: center; justify-content: center;
  min-width: 132px; height: 68px; padding: 12px 22px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: border-color 0.2s ease;
}
/* Each mark is cropped to its artwork and sized individually so the
   row reads optically even: dense square marks get height, wide
   wordmarks get width. */
.cs-tab img { width: auto; height: auto; object-fit: contain; display: block; }
.cs-tab img[data-brand="talofa"] { height: 34px; }
.cs-tab img[data-brand="toyota"] { height: 40px; }
.cs-tab img[data-brand="rupa"] { width: 124px; }
.cs-tab img[data-brand="arist"] { width: 104px; }
.cs-tab img[data-brand="sunflower"] { width: 116px; }
.cs-tab img[data-brand="searchseo"] { width: 120px; }
.cs-tab img[data-brand="verinomics"] { width: 126px; }
.cs-tab:hover { border-color: var(--ink-soft); }
.cs-tab.is-on { border-color: #2fa2f8; }
.cs-card {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 4vw, 52px); align-items: stretch;
  background: #fff; border-radius: 20px; padding: clamp(22px, 3.4vw, 42px);
  color: inherit; text-decoration: none;
  box-shadow: 0 24px 52px rgba(43,69,95,0.08);
  /* Swapping tabs is a crossfade, so it needs an out curve and an in curve
     rather than one symmetric ease. The JS holds the swap for exactly as long
     as the fade out lasts; if the two disagree the content changes mid-fade
     and the whole thing reads as a snap, which is what it used to do. */
  transition: opacity 200ms cubic-bezier(0.33, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.33, 0, 0.2, 1);
}
.cs-card:hover { text-decoration: none; }
.cs-card.is-fading { opacity: 0; transform: translateY(8px); }
/* The card stretches so the body can fill it; the image keeps its own
   proportions and stays centred against the copy. */
.cs-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block; align-self: center; }
.cs-cat {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 500; color: var(--ink);
  border: 1px solid var(--ink-faint); border-radius: 999px; padding: 5px 15px;
  margin-bottom: 18px;
}
.cs-card-body { display: flex; flex-direction: column; align-items: flex-start; }
.cs-card-body h3 {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.25; margin-bottom: 14px;
}
.cs-card-body > p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; }
/* The rule and the stats sit on the card's bottom edge, so they stay put
   while the title and description above them change length from one tab
   to the next. They used to ride up and down with the copy. */
.cs-divider { width: 100%; height: 1px; background: var(--line); margin: 22px 0 18px; margin-top: auto; }
.cs-stats { display: flex; gap: clamp(28px, 5vw, 64px); }
.cs-stat b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 2px;
}
.cs-stat span { font-size: 14px; color: var(--ink-soft); }
.cs-arrows { display: flex; justify-content: center; gap: 16px; margin-top: 28px; }
.cs-arrow {
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(43,69,95,0.13);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Spent: the track cannot move further this way. Dimmed rather than hidden, so
   the control keeps its place and the row does not reflow as you scroll, and
   so it still reads as "this is the end" rather than "the button vanished".
   `disabled` is set on the element too, so it leaves the tab order and is
   announced, not just greyed. */
.cs-arrow.is-spent {
  opacity: 0.35;
  cursor: default;
  box-shadow: 0 4px 12px rgba(43,69,95,0.08);
}
.cs-arrow.is-spent:hover { transform: none; }
.cs-arrow:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(43,69,95,0.18); }
.cs-arrow svg { display: block; }

/* ============================================================
   FOUNDERS  (spec 3.14): copy left, the real founders flush to
   the card's bottom edge, the logo mark ghosted behind them.
   ============================================================ */
.founders-hero {
  display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 32px;
  background: #e8eef5; border-radius: 22px; overflow: hidden;
  position: relative;
}
.founders-copy { padding: 60px 8px 60px 60px; align-self: center; position: relative; z-index: 1; }
.founders-copy h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); margin-bottom: 16px; letter-spacing: -0.02em; }
.founders-copy p { font-size: 16.5px; max-width: 52ch; margin-bottom: 26px; }
.founders-visual { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 340px; }
.founders-visual::before {
  content: ""; position: absolute; width: 620px; height: 628px;
  right: -150px; top: -120px; opacity: 0.75; pointer-events: none;
  background-color: #c3d7ea;
  -webkit-mask: url("/assets/logo-icon.svg") center / contain no-repeat;
  mask: url("/assets/logo-icon.svg") center / contain no-repeat;
}
.founders-visual img {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px; display: block; margin-top: 34px;
}
/* The block never collapsed, so below tablet the copy and the portrait fought
   for a two-column grid inside an overflow:hidden box and the bottom was cut
   off: 354px of it on the homepage. One column below 900px. */
@media (max-width: 900px) {
  .founders-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .founders-copy { padding: 38px 28px 4px; }
  .founders-visual { min-height: 0; }
  .founders-visual img { margin-top: 8px; max-width: 320px; }
  .founders-visual::before { width: 420px; height: 426px; right: -110px; top: -90px; }
}
/* ============================================================
   FAQ  (homepage accordion, Globaltize borrow)
   ============================================================ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 48px; align-items: start; }
/* The heading and its CTA follow the reader down a long list, so "Visit the
   full FAQ" is reachable without scrolling back to the top. The offset clears
   the fixed header. */
.faq-grid .section-head { position: sticky; top: 96px; }
.faq-grid .section-head { margin-bottom: 0; }
.faq-list { max-width: 760px; }
.section-head.is-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; max-width: none;
}
.section-head.is-row > div { max-width: 640px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink);
}
.faq-icon { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); position: relative; flex: none; transition: transform 0.25s ease; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--ink); top: 50%; left: 50%; }
.faq-icon::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1.5px; height: 10px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-a { overflow: hidden; height: 0; }
.faq-a-inner { padding: 0 44px 22px 4px; font-size: 15px; max-width: 64ch; }
.faq-foot { margin-top: 26px; font-size: 14.5px; }

/* ============================================================
   CLOSING CTA: a floating gradient card, ghosted logo patterns,
   overlapping the footer below (reference structure).
   ============================================================ */
.closing { padding: 88px 0 0; }
.closing-card {
  overflow: hidden; z-index: 2;
  border-radius: 24px; text-align: center;
  padding: 78px 48px 70px;
  margin-bottom: -96px;
  box-shadow: 0 30px 60px rgba(16,32,48,0.35);
}
.closing-card > * { position: relative; z-index: 1; }
.closing-card h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.closing-card p { color: rgba(255,255,255,0.94); font-size: 1.05rem; margin-bottom: 30px; max-width: 52ch; margin-left: auto; margin-right: auto; }
.closing-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.btn-ghost-light { border: 1.5px solid rgba(255,255,255,0.55); color: #fff; background: transparent; }
.btn-ghost-light:hover { border-color: #fff; }
/* Scoped to .closing-card, not left as a bare class: `.closing-card p` above is
   more specific, so it was winning both the size and the 52ch measure. The
   terms line rendered at 16.8px inside a 536px box and broke across two lines,
   which read as a wrapping bug rather than a style. */
.closing-card .closing-micro {
  font-size: 13px; font-weight: 600; font-family: var(--font-display);
  color: rgba(255,255,255,0.94); margin-bottom: 0; max-width: none;
}

/* ============================================================
   FOOTER  (spec 4.5): brand + newsletter left, all link columns
   right, fine print and legal in the bottom bar. The closing card
   overlaps the top edge.
   ============================================================ */
/* The top padding is not decoration: .closing-card sits on the footer with
   margin-bottom: -96px, so the first 96px are underneath it. 190px left 94px of
   air beyond that and made the footer 1007px tall on a 1440 screen, taller than
   the viewport. 140px keeps the card clear with 44px of breathing room; the
   rest of the reduction comes from the link columns below. */
.footer { background: #fff; border-top: 1px solid var(--line); padding: 140px 0 32px; color: var(--ink-soft); }
.footer a { color: var(--ink-soft); font-size: 13.5px; }
.footer-grid a {
  display: inline-block;
  transition: color 0.22s ease, transform 0.22s ease;
}
.footer-grid a:hover {
  color: var(--action); font-weight: 600;
  transform: translateX(4px); text-decoration: none;
}
.footer a:hover { color: var(--ink); }
.footer-grid a:hover { color: var(--action); }
/* Brand column beside the link columns. Stacking the brand above the links and
   pushing the contact buttons out to the right was tried and rejected: the band
   it created left a wide gap between the blurb and the buttons. The height came
   out of the top padding and the length of the link lists instead. */
.footer-top { display: grid; grid-template-columns: 320px 1fr; gap: 72px; margin-bottom: 48px; }
.footer-brand-logo { height: 34px; width: auto; display: block; margin-bottom: 18px; }
.footer-blurb { font-size: 13.5px; color: var(--ink-faint); max-width: 34ch; margin-bottom: 24px; }
.footer-contact { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-contact a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 18px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-contact a:hover {
  color: var(--ink); text-decoration: none; border-color: var(--ink-soft);
  transform: translateY(-1px); box-shadow: 0 8px 20px rgba(43,69,95,0.10);
}
.footer-contact a svg { flex: none; color: var(--ink-soft); }
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 0; align-content: start;
  border-left: 1px solid var(--line); padding-left: 40px;
}
.footer-col { border-left: 1px solid var(--line); padding-left: 28px; padding-right: 20px; }
.footer-col:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.footer-col h3 { color: var(--ink); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-fine { font-size: 12px; color: var(--ink-faint); padding-top: 26px; border-top: 1px solid var(--line); }
/* an index link is a different kind of link from the items above it */
.footer a.is-all { color: var(--action); font-weight: 600; }
.footer a.is-all:hover { color: var(--action); }
.footer-bottom { padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-legal { display: flex; gap: 18px; font-size: 12.5px; align-items: center; }
.footer-legal span { color: var(--ink-faint); font-size: 12.5px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  display: inline-flex; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-wash); border: 1px solid var(--line);
  align-items: center; justify-content: center; color: var(--ink-soft);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover { border-color: var(--ink); color: var(--ink); }

/* ============================================================
   HERO BACKGROUND LOGO MARK (2026-08-12)
   The faded Hire Overseas logo icon (assets/logo-icon.svg, the
   properly exported mark) in the two hero corners.
   CSS-only: delete this block to revert.
   ============================================================ */
.hero { position: relative; }
.hero .container { position: relative; z-index: 1; }
/* The icon is used as a mask and painted in a soft brand blue,
   so the tint and fade are controlled here, not in the file. */
/* Corner logo marks retired: the live gradient asset carries its own texture. */

/* ============================================================
   HERO VISUAL TILE EXPERIMENT (2026-08-12)
   The brief-to-match graphic sits on a tile with inner padding,
   using the supplied artwork (assets/hero-tile.svg: light blue
   with soft white swooshes). The teal version was rejected.
   TO REVERT: remove the is-tile class from the .hero-visual div.
   ============================================================ */
.hero-visual.is-tile {
  position: relative; overflow: hidden;
  /* The supplied artwork: light blue with the faded logo swooshes
     baked in. (The gradient version was rejected as too colorful.) */
  background: #b5daf5 url("/assets/hero-tile-deep.svg") center / cover no-repeat;
  border-radius: 18px; padding: 32px;
  box-shadow: 0 24px 52px rgba(43,69,95,0.16);
}
.hero-visual.is-tile .brief-stack { position: relative; z-index: 1; }
.hero-visual.is-tile .brief-stack { max-width: none; }
.hero-visual.is-tile .ui-card { border-color: transparent; box-shadow: 0 16px 34px rgba(43,69,95,0.14); }
.hero-visual.is-tile .brief-connector .conn-line { background: rgba(43,69,95,0.18); }
.hero-visual.is-tile .brief-connector .conn-text {
  background: #fff; color: var(--ink);
  border-radius: 999px; padding: 5px 13px;
}
@media (max-width: 639px) {
  .hero-visual.is-tile { padding: 18px; border-radius: 14px; }
}

/* ============================================================
   MATCH CARD DARK EXPERIMENT (2026-08-12)
   The "Your match" card goes brand navy so the result pops
   against the white brief. TO REVERT: remove the is-dark class
   from the .match-card div.
   ============================================================ */
.match-card.is-dark { background: var(--band); }
.match-card.is-dark .ui-card-label { color: #a8bacb; }
.match-card.is-dark .match-name { color: #fff; }
.match-card.is-dark .match-role { color: #cfdbe7; }
.match-card.is-dark .verified-pill { background: #fff; color: var(--ink); }
.match-card.is-dark .match-meta .chip {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: #fff;
}
.match-card.is-dark .match-prev { border-top-color: rgba(255,255,255,0.18); }
.match-card.is-dark .match-prev .k { color: #a8bacb; }
/* Full-color brand logos sit on a small white plate for legibility */
.match-card.is-dark .prev-logo { background: #fff; border-radius: 6px; padding: 4px 9px; height: 28px; }
.match-card.is-dark .prev-logo.is-badge { height: 36px; padding: 3px; }

/* ============================================================
   REVEAL + MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* The bar runs out of room for the digits below ~1050px, where the CTA starts
   going off the right edge. The cut is at 1099 rather than 1050 because 1050
   leaves only 6px of clearance, and a slower font load or browser zoom eats
   that. At 1100 there is 56px. "Call us" stays either way and still dials. */
@media (max-width: 1099px) {
  .nav-call-num { display: none; }
}
@media (max-width: 1023px) {
  .nav-list { display: none; }
  .nav-dropdown.is-roles-mega { width: auto; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .nav-burger { display: flex; margin-left: 0; }
  /* Keep the bar (logo, CTA, burger) above the full-screen menu */
  .nav { position: relative; z-index: 101; }
  /* CTA rides next to the burger, not next to the logo */
  .nav-cta-group { margin-left: auto; margin-right: 2px; }
  /* Was display:none toggled to block, and display cannot be transitioned, so
     the panel snapped open with nothing to watch. It stays in the layout now
     and is hidden by opacity and visibility instead, which do animate.

     visibility rather than opacity alone: a fully transparent panel would
     still swallow taps and keep its links in the tab order. It is transitioned
     with no duration so it flips at the end of the fade on the way out, and
     immediately on the way in. */
  .mobile-menu {
    display: block; position: fixed; inset: 0; background: #fff;
    z-index: 99; overflow-y: auto; padding: 100px 5% 48px;
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.26s;
  }
  .mobile-menu.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
  }
  .mobile-group { border-bottom: 1px solid var(--line); padding: 14px 0 18px; }
  .mobile-group .mobile-label { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #5dc1c7; margin-bottom: 4px; }
  .mobile-group ul { list-style: none; display: flex; flex-direction: column; }
  .mobile-group a {
    display: flex; align-items: center; gap: 12px;
    color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 15px;
    padding: 7px 0;
  }
  .mobile-menu .btn { margin-top: 22px; width: 100%; justify-content: center; }
  .mobile-group a.mm-viewall { color: var(--action); }
  .mm-apply {
    display: block; margin-top: 14px; text-align: center;
    font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-soft);
  }
  .mm-call {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 16px; font-family: var(--font-display); font-weight: 600;
    font-size: 15px; color: var(--ink);
  }
  .mm-call:hover { text-decoration: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  /* The desktop size is clamp(2.35rem, 4.3vw, 3.15rem), and 4.3vw stays under
     that floor until about 875px, so every screen below it got the same
     2.35rem no matter how much room the headline had. This is the width at
     which the hero drops to one column and the headline gets the full page,
     which is where it can afford to be bigger, and 2.8rem meets 4.3vw within
     a pixel at 1024 so nothing steps at the boundary. Balanced wrapping
     because the breaks matter at this size: greedy wrapping ends the phone
     layout on a two-word line under three full ones. */
  .hero h1 { font-size: 2.8rem; text-wrap: balance; }
  .brief-stack { margin-left: 0; }
  .impact-grid { grid-template-columns: minmax(0,1fr); }
  .impact-card { padding: 20px 20px; }
  .regions-layout { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .regions-layout .globe-wrap { order: 1; }
  .regions-layout .regions-list { order: 2; }
  .region-col { padding: 18px 0; }
  .hiw-row { grid-template-columns: minmax(0,1fr); }
  .hiw-card { padding: 26px 24px; }
  .vs { padding: 6px 18px 18px; }
  /* Mobile: two proper columns, always Hire Overseas vs ONE picked
     competitor. Criterion labels span both columns; the second
     competitor slot disappears entirely. */
  .vs-row { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .vs-crit { grid-column: 1 / -1; padding: 16px 0 4px; font-size: 13.5px; }
  .vs-row:not(.is-head) .vs-crit { border-top: 1px solid var(--line); }
  .vs-cell { border-top: 0 !important; padding: 6px 0; align-items: flex-start; justify-content: flex-start; font-size: 13px; }
  .vs-cell.is-ho { border-radius: 10px; padding: 9px 12px; margin: 0; font-size: 13px; }
  .vs-row.is-head .vs-cell.is-ho { border-radius: 10px; margin-top: 0; padding: 0 0 0 2px; background: transparent; display: flex; align-items: center; }
  .vs-row.is-head { padding: 14px 0 8px; align-items: center; }
  .vs-row.is-head .vs-crit { display: none; }
  .vs-logo { height: 22px; }
  .vs-row.is-head .vs-col { min-width: 0; }
  .vs-row.is-head .vs-pick, .vs-row.is-head .vs-pick-btn { width: 100%; }
  .vs-row.is-head .vs-pick-btn { min-width: 0; padding: 8px 38px 8px 14px; }
  .vs-row.is-head .vs-pick-logo { max-width: 88px; }
  .vs-row.is-head .vs-menu { width: 100%; min-width: 0; }
  .vs-row.is-head .vs-option { white-space: normal; }
  .vs-search { font-size: 16px; }

  /* One column, so a sticky heading would just sit on top of the answers.
     `display: contents` lifts the eyebrow, the heading and the CTA out of
     .section-head and into the grid itself, which is what lets the CTA be
     ordered below the list without duplicating the button in the markup. */
  /* gap:48px is the space between the two desktop columns. Collapsed to one
     column it becomes a row gap, and because .section-head becomes
     display:contents its children are grid items too - so that 48px landed
     between every one of them, on top of margins already tuned for this
     stack. Measured at 62px eyebrow to heading, 74px to the list and 76px to
     the button. The margins below are the intended spacing; the gap was
     leftover geometry from a layout that no longer exists at this width. */
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .faq-grid .section-head { display: contents; position: static; }
  .faq-grid .eyebrow { order: 1; }
  .faq-grid .section-head h2 { order: 2; margin-bottom: 8px; }
  .faq-grid .section-head > p:not(.eyebrow):not(.faq-foot) { order: 3; }
  .faq-grid .faq-list { order: 4; margin-top: 18px; }
  .faq-grid .faq-foot { order: 5; margin-top: 28px; }
  .cs-card { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .cs-card-img { aspect-ratio: 16 / 10; }
  .cs-tab { min-width: 104px; height: 54px; padding: 10px 14px; }
  .cs-tab img { height: 24px; }
  .cs-arrow { width: 48px; height: 48px; }
  .founders-hero { grid-template-columns: 1fr; }
  .founders-copy { padding: 36px 28px 6px; }
  .founders-visual { min-height: 0; justify-content: center; }
  .founders-visual { min-height: 0; }
  .founders-visual img { max-width: 300px; margin-top: 12px; }
  .founders-visual::before { width: 420px; height: 426px; right: -120px; top: -60px; }
  .section-head.is-row { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; gap: 44px; }
  .footer-grid { border-left: 0; padding-left: 0; }
  .footer-col { border-left: 0; padding-left: 0; padding-right: 0; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-col:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 639px) {
  .section { padding: 64px 0; }

  .hero { padding: 126px 0 64px; }
  /* three employer logos will not sit beside the label on a phone, so the
     label takes its own line and the marks run under it */
  .match-prev { flex-direction: column; align-items: flex-start; gap: 9px; }
  .prev-logos { width: 100%; gap: 8px; }
  .match-card.is-dark .prev-logo { height: 21px; padding: 3px 7px; }
  .hero h1 br { display: none; }
  .hero-trust { gap: 14px; }
  /* Logo, Call us, Start Hiring and the burger will not share a phone row. */
  .nav-call { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .closing-card { padding: 52px 24px 48px; margin-bottom: -70px; }
  .footer { padding-top: 120px; }
  .terms-inner { padding: 24px 20px; }
}

/* --- rich text -----------------------------------------------------------
   Article, playbook, course and legal bodies come out of the CMS as raw HTML,
   so every tag they can contain is styled here rather than left to the
   browser's defaults. Without this the long-form pages render as unstyled
   markup: Times headings, disc bullets and full-width tables.
   -------------------------------------------------------------------------*/

.rich {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.72;
}

.rich > *:first-child { margin-top: 0; }
.rich > *:last-child { margin-bottom: 0; }

/* ============================================================
   GROWTH TOOL PAGE
   ============================================================
   The tool on the left, what it does and the caveat on the right. Single
   column on narrow screens, tool first: it is what the visitor came for. */
/* The hero already carries 72px below it. The site's default 88px on top of
   that left 160px of nothing between the headline and the tool - the widest
   gap on any page, measured against a role page's 116px. */
.gt-tool-section { padding-top: 44px; }
.gt-tool-shell {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .gt-tool-shell { grid-template-columns: 1fr; }
}
.gt-tool-aside h2 {
  font-family: var(--font-display);
  font-size: 1.15rem; color: var(--ink); margin: 0 0 14px;
}
.gt-tool-aside .gt-points { margin: 0 0 20px; padding-left: 1.1em; }
.gt-tool-aside .gt-points li { margin-bottom: 8px; color: var(--ink-soft); line-height: 1.55; }
.gt-tool-note {
  margin: 0 0 14px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-faint);
}
.gt-tool-note a { color: var(--action-deep); }

/* ============================================================
   AUTHOR-STYLED EMBEDS
   ============================================================
   An embed that ships its own CSS should look exactly as its author designed
   it. Our .rich table styles would otherwise win: they set colour and padding
   directly on th and td, and a value set on the element always beats one
   inherited from thead, so the author's white-on-gradient header rendered as
   our dark-on-pale one.

   Reverting inside the embed hands the elements back to the browser default,
   leaving the author's scoped rules as the only thing styling them. Scoped to
   .ho-embed so nothing outside is affected. */
.rich .ho-embed table,
.rich .ho-embed thead,
.rich .ho-embed tbody,
.rich .ho-embed tfoot,
.rich .ho-embed tr,
.rich .ho-embed th,
.rich .ho-embed td,
.rich .ho-embed caption {
  all: revert;
}
/* Wide tables must still be reachable on a phone. The author's CSS sets the
   table's own width; this only governs the box around it. */
.rich .ho-embed { max-width: 100%; overflow-x: auto; }

/* ============================================================
   IN-ARTICLE TOOLS
   ============================================================
   Checklists and the ROI calculator. These arrived from Webflow as code pasted
   into the article body, styled with whatever inline CSS the author wrote. The
   markup is now built server-side from the CMS content, so it is styled here
   with the rest of the site instead of carrying its own look. */
.ho-tool {
  margin: 2.2em 0;
  padding: clamp(20px, 3.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
}
.ho-tool-head {
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600; color: var(--ink);
  margin: 0 0 18px;
}

/* Checklist */
.ho-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ho-check-item label {
  display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer; font-size: 1rem; line-height: 1.55; color: var(--ink-soft);
}
.ho-check-item input {
  /* Sized and nudged so the box aligns with the first line of text rather than
     the middle of a wrapped item. */
  width: 18px; height: 18px; margin: 3px 0 0; flex: none; cursor: pointer;
  accent-color: var(--action, #2fa2f8);
}
.ho-check-item input:checked + span { color: var(--ink-faint); text-decoration: line-through; }

/* Compliance checker */
.ho-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ho-mode { display: flex; gap: 8px; margin-bottom: 14px; }
.ho-mode-btn {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: inherit; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer;
}
.ho-mode-btn.is-on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.ho-compliance textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); line-height: 1.6;
  padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; resize: vertical;
}
.ho-compliance textarea:focus-visible { outline: 2px solid var(--action, #2fa2f8); outline-offset: 1px; }
.ho-counter { margin: 6px 0 0; font-size: 0.82rem; color: var(--ink-faint); text-align: right; }
.ho-turnstile { margin: 14px 0 0; min-height: 65px; }
.ho-result { margin-top: 18px; font-size: 0.98rem; color: var(--ink-soft); line-height: 1.6; }
.ho-result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ho-result-list li {
  padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  display: grid; gap: 6px;
}
.ho-risk {
  justify-self: start; padding: 2px 10px; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: #e2e8f0; color: var(--ink);
}
.ho-risk[data-risk="high"] { background: #fee2e2; color: #991b1b; }
.ho-risk[data-risk="medium"] { background: #fef3c7; color: #92400e; }
.ho-risk[data-risk="low"] { background: #dcfce7; color: #166534; }
.ho-rewrite { font-style: normal; color: var(--ink-faint); font-size: 0.92rem; }

/* Charts */
.ho-chart { margin-left: auto; margin-right: auto; }
.ho-chart-desc { margin: 0 0 16px; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
/* A fixed height because Chart.js sizes to its container, and a container that
   sizes to the canvas collapses to nothing on first paint. */
.ho-chart-canvas { position: relative; height: clamp(240px, 42vw, 340px); }
.ho-chart figcaption { margin-top: 14px; font-size: 0.9rem; color: var(--ink-faint); }

/* ROI calculator */
.ho-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ho-field { display: flex; flex-direction: column; gap: 6px; }
.ho-field label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.ho-field input {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.ho-field input:focus-visible { outline: 2px solid var(--action, #2fa2f8); outline-offset: 1px; border-color: transparent; }
.ho-tool-btn {
  margin-top: 18px; padding: 13px 22px; border: 0; border-radius: 10px;
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: #fff;
  background-image: linear-gradient(90deg, #1ec3d9 0%, #2fa2f8 100%);
  cursor: pointer;
}
.ho-tool-btn:hover { filter: brightness(1.06); }
.ho-tool-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ho-roi-out {
  margin: 16px 0 0; min-height: 1.5em;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.ho-roi-out[data-state="warn"] { color: #9a3412; }

/* ============================================================
   IN-ARTICLE CTA
   ============================================================
   Rendered where an author typed a [blog-cta_component] token. The live site
   swaps those tokens client-side for a cloned component; we substitute on the
   server, so the token is never briefly visible and never reaches a crawler.
   Values below are the live component's computed styles, read off the page.
   The heading colour matched --ink exactly, which is why this uses the token
   rather than a literal. */
.article-cta {
  /* Breaks out of the article's measure a little, as the live card does. */
  margin: 2.4em 0;
  padding: clamp(30px, 5vw, 72px) clamp(22px, 4.4vw, 60px);
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  /* The live card carries a faint arc motif as a background image on a
     Webflow CDN URL. Hotlinking someone else's CDN from our pages would be a
     dependency we do not control, so the arcs are drawn here instead: three
     very large, very soft rings, which is what they read as at any real
     viewing size. */
  background-image:
    radial-gradient(120% 120% at 12% 108%, transparent 61.6%, rgba(255,255,255,0.75) 61.8%, transparent 62.2%),
    radial-gradient(120% 120% at 4% 118%, transparent 55.6%, rgba(255,255,255,0.6) 55.8%, transparent 56.2%),
    radial-gradient(90% 130% at 96% -10%, transparent 47.6%, rgba(255,255,255,0.55) 47.8%, transparent 48.2%);
  text-align: center;
}
.article-cta-inner { max-width: 46rem; margin: 0 auto; }
.article-cta-head {
  font-family: var(--font-display);
  /* 32px at desktop and 24px at 390, both matching the live component measured
     at the same widths. */
  font-size: clamp(1.5rem, 3.1vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.article-cta-sub {
  font-size: 1rem;
  line-height: 1.43;
  color: var(--ink);
  margin: 14px 0 0;
}
/* Selector carries `.rich` because the card is rendered inside the article
   body, and `.rich a` sets an underlined navy link colour that would otherwise
   win on specificity and leave the button unreadable against its gradient. */
.rich .article-cta-btn,
.article-cta-btn {
  display: inline-block;
  margin-top: 26px;
  padding: 20px 24px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(90deg, #1ec3d9 0%, #2fa2f8 100%);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.rich .article-cta-btn:hover,
.article-cta-btn:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.rich .article-cta-btn:focus-visible,
.article-cta-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .article-cta-btn { transition: none; }
  .article-cta-btn:hover { transform: none; }
}

.rich h1, .rich h2, .rich h3, .rich h4, .rich h5 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.22;
  /* More space above a heading than below it, so each one groups with the
     text it introduces rather than floating between two blocks. */
  margin: 2em 0 0.6em;
  text-wrap: balance;
}

.rich h1 { font-size: 1.95rem; }
.rich h2 { font-size: 1.55rem; }
.rich h3 { font-size: 1.28rem; }
.rich h4 { font-size: 1.1rem; }
.rich h5 { font-size: 1rem; }

.rich p { margin: 0 0 1.15em; }

.rich a {
  color: var(--action-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.rich a:hover { color: var(--action); }

.rich strong, .rich b { color: var(--ink); font-weight: 600; }

.rich ul, .rich ol { margin: 0 0 1.3em; padding: 0; }
.rich li { margin-bottom: 0.6em; }
.rich li:last-child { margin-bottom: 0; }
.rich li > ul, .rich li > ol { margin-top: 0.6em; }

/* Unordered lists take the brand check mark, never a disc or a square. */
.rich ul { list-style: none; }
.rich ul > li {
  position: relative;
  padding-left: 30px;
}
.rich ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 15px;
  height: 15px;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}

/* Ordered lists keep their numbers: the order is the information. */
.rich ol { list-style: none; counter-reset: rich-ol; }
.rich ol > li {
  position: relative;
  padding-left: 30px;
  counter-increment: rich-ol;
}
.rich ol > li::before {
  content: counter(rich-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95em;
  color: var(--action);
}

.rich blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--action);
  color: var(--ink);
  font-size: 1.1rem;
}
.rich blockquote p:last-child { margin-bottom: 0; }

.rich img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.6em 0;
}

.rich figure { margin: 1.6em 0; }
.rich figure img { margin: 0; }
.rich figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--ink-faint);
  text-align: center;
}

.rich hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

/* A table wider than the column scrolls inside itself rather than pushing the
   whole page sideways. This was a .rich-table-wrap div, but the bodies come
   out of the CMS as stored HTML and nothing ever added the wrapper, so every
   article with a table scrolled horizontally on a phone. Done on the table
   itself it needs no change to the content. */
.rich table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.95rem;
}
.rich th, .rich td {
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}
@media (max-width: 900px) {
  /* min-width would otherwise apply to the scroll box rather than the
     table inside it, and force the page sideways again. */
  .rich table { display: block; width: 100%; min-width: 0; overflow-x: auto; }
}

.rich th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-wash);
  white-space: nowrap;
}
.rich tbody tr:last-child td { border-bottom: 0; }

.rich code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-wash);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
.rich pre {
  overflow-x: auto;
  margin: 1.6em 0;
  padding: 16px 18px;
  background: var(--bg-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.6;
}
.rich pre code { background: none; border: 0; padding: 0; }

/* Webflow shipped inline <style> blocks inside some article bodies. They are
   scoped to markup that no longer exists, so they only add noise. */
.rich style { display: none; }

@media (max-width: 640px) {
  .rich { font-size: 1rem; }
  .rich h1 { font-size: 1.62rem; }
  .rich h2 { font-size: 1.35rem; }
  .rich h3 { font-size: 1.16rem; }
}

/* --- long-form article layout --------------------------------------------
   Blog and playbook detail pages, taken from the templates they replace.

   The hero sits on a soft band, title and byline on a white card to the left,
   the image on a teal panel to the right, so the headline and the artwork are
   both visible without scrolling. A playbook cover is a portrait book: shown
   whole on the panel rather than cropped into a frame.

   The body carries a sticky rail on the left: reading time, an outline built
   from the article's own headings, and share links.
   -------------------------------------------------------------------------*/

.art-hero {
  /* The band the whole hero sits on, from the live template. */
  background: var(--hero-band);
  background-image: none;
  padding: 132px 0 56px;
}

.art-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.88fr);
  gap: clamp(22px, 2.6vw, 36px);
  align-items: stretch;
}
/* Without an image there is no second column to balance against. */
.art-hero-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

.art-hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--bg);
  border-radius: 26px;
  padding: clamp(28px, 3vw, 44px);
}

/* Back to the listing, above everything, as the live template has it. */
.art-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: var(--ink-soft); text-decoration: none;
}
.art-back:hover { color: var(--action); }

.art-hero-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.art-chip {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  color: var(--ink-soft); text-decoration: none;
}
.art-chip:hover { border-color: var(--action); color: var(--action); }
.art-meta-read { font-size: 0.82rem; font-weight: 600; color: var(--ink-faint); }

.art-hero-copy h1 {
  font-size: clamp(1.75rem, 2.9vw, 2.4rem);
  line-height: 1.16; letter-spacing: -0.026em; margin: 0;
}
.art-lead { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; margin: 16px 0 0; max-width: 48ch; }

/* Author and publish date, the way the live template shows them. */
.art-byline {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.art-published { text-align: right; }
.art-author { display: flex; align-items: center; gap: 12px; }
.art-author img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  background: var(--bg-wash); flex: none;
}
.art-author-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.art-author-role { display: block; font-size: 0.82rem; color: var(--ink-faint); }
.art-published span { display: block; font-size: 0.82rem; color: var(--ink-faint); }
.art-published b { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); }

/* The teal panel. A cover is contained on it; a photograph fills it. */
.art-hero-panel {
  display: grid; place-items: center;
  background: var(--tertiary);
  border-radius: 26px;
  padding: 32px 26px;
  overflow: hidden;
}
.art-hero-panel img {
  display: block; width: 100%; height: 100%;
  max-height: 360px; object-fit: contain;
}
.art-hero-panel.is-photo { padding: 0; }
.art-hero-panel.is-photo img { max-height: none; object-fit: cover; aspect-ratio: 16 / 10; }

.art-body {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}

.art-rail { position: sticky; top: 96px; }

.art-rail-card {
  background: var(--bg-wash);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 20px 18px;
}

.art-readtime {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.art-readtime svg { color: var(--action); flex: none; }

.art-toc-title {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.art-toc ul { list-style: none; margin: 0; padding: 0; }
.art-toc li + li { border-top: 1px solid var(--line); }
.art-toc a {
  display: block; padding: 9px 0;
  font-size: 0.9rem; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none;
}
.art-toc a:hover { color: var(--ink); }
.art-toc a.is-on { color: var(--action); font-weight: 600; }
/* Second-level headings sit under their parent rather than beside it. */
.art-toc a.is-h3 { padding-left: 14px; font-size: 0.86rem; }

.art-share {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.art-share span {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: auto;
}
.art-share a {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color 0.16s ease, border-color 0.16s ease;
}
.art-share a:hover { color: var(--action); border-color: var(--action); }

/* Headings are jump targets, so they must clear the fixed header. */
.art-content h2, .art-content h3 { scroll-margin-top: 104px; }

.w-richtext div[data-youtube-video],
.w-richtext div[data-vimeo-video] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.w-richtext div[data-youtube-video] iframe,
.w-richtext div[data-vimeo-video] iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1023px) {
  .art-hero { padding-top: 116px; }
  .art-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .art-hero-panel img { max-height: 300px; }
  .art-body { grid-template-columns: minmax(0, 1fr); }
  /* Above the article on a narrow screen, and no longer pinned: a sticky rail
     with nothing beside it just eats the viewport. */
  .art-rail { position: static; }
  .art-rail-card { max-width: 760px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .art-hero-copy { padding: 24px 20px; border-radius: 20px; }
  .art-byline { gap: 18px; }
}

/* --- listing thumbnails ---------------------------------------------------
   .ss-card is square because a success-story tile is square. The two content
   listings are not: an article thumbnail is a 16:10 landscape graphic, and a
   playbook thumbnail is a portrait book cover. Cropped into a square, the
   first loses its edges and the second loses most of the book, which is the
   whole point of the image.
   -------------------------------------------------------------------------*/

/* Articles: landscape, as they were drawn. */
.ss-card.is-article .ss-card-art { aspect-ratio: 16 / 10; }

/* Playbooks: two up, the cover beside its description rather than above it,
   as the listing this replaces lays them out. A book is portrait, so a wide
   card wastes the space above and below it; side by side, the cover gets the
   height it needs and the text gets the width. */
.ss-grid.is-playbooks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

.ss-card.is-playbook {
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.ss-card.is-playbook .ss-card-art {
  aspect-ratio: 3 / 4;
  background: var(--hero-band);
  display: grid;
  place-items: end center;
  padding: 22px 20px 0;
}
.ss-card.is-playbook .ss-card-art img {
  width: auto;
  max-width: 88%;
  max-height: 100%;
  object-fit: contain;
  /* A book standing on a shelf, rather than floating in a box. */
  filter: drop-shadow(0 14px 22px rgba(43, 69, 95, 0.24));
}

/* The card's right column: category, title, summary, then the link out. The
   three stack from the top and the link sits at the bottom, so a short summary
   leaves the gap between them rather than a block of dead space underneath. */
.ss-card.is-playbook .ss-card-body { display: flex; flex-direction: column; height: 100%; }

.pb-cat {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 3px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint);
}

.pb-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: var(--action);
}
.pb-cta svg { transition: transform 0.18s ease; }
.ss-card.is-playbook:hover .pb-cta svg { transform: translateX(3px); }
.ss-card.is-playbook:hover .pb-cat { border-color: color-mix(in srgb, var(--action) 40%, var(--line)); }

@media (prefers-reduced-motion: reduce) { .pb-cta svg { transition: none; } }

@media (max-width: 900px) {
  .ss-grid.is-playbooks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ss-card.is-playbook { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* Taller than wide on one column, so a portrait cover fits inside the
     padding instead of overflowing the panel it sits on. */
  .ss-card.is-playbook .ss-card-art { aspect-ratio: 1 / 1; place-items: center; padding: 18px; }
  .ss-card.is-playbook .ss-card-art img { max-height: 100%; max-width: 56%; }
}

/* --- article listing cards -----------------------------------------------
   Taken from blogs.html in the Webflow export rather than reused from the
   success-story card, which is what these were before: that card has no author
   and no date, and its summary ran to whatever length the excerpt happened to
   be, so the rows never lined up.

   Every value here is the export's own: .blogs-cl_card, .blogs-cl_img,
   .blogs-cl_content, .heading-20, .text-16.shorten-excerpt and the author
   block under them.
   -------------------------------------------------------------------------*/

.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* .blogs-cl_item: the lift and shadow are the export's. */
.bl-card { position: relative; transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out; }
.bl-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 6px -2px #10182808, 0 4px 16px -4px #10182814;
}

/* .blogs-cl_card */
.bl-card-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 10px;
  border: 1px solid #cbd5e180;
  border-radius: 16px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* .blogs-cl_img with .img-cover inside it */
.bl-card-art { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; flex: none; }
.bl-card-art img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
}

/* .blogs-cl_content: gap 2.5rem, padding 1rem .5rem. margin-top:auto on the
   author row is the one addition, so bylines line up across a row of cards
   whose titles run to different lengths. */
.bl-card-content {
  display: flex; flex-direction: column; gap: 40px;
  padding: 16px 8px;
  flex: 1;
}
.bl-card-top { display: flex; flex-direction: column; gap: 12px; }

/* .heading-20 */
.bl-card-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 1.667vw, 20px); line-height: 1.2; letter-spacing: -0.03em;
  color: var(--ink);
}

/* .text-16.shorten-excerpt: blogs.html sets -webkit-line-clamp: 3 on it. */
.bl-card-sum {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 1rem; line-height: 1.4; color: var(--ink-soft);
}

/* .blogs-cl-author_wrapper / _img / _info */
.bl-card-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.bl-card-avatar {
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 100vw; overflow: hidden; background: var(--bg-wash);
}
.bl-card-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-card-byline { display: flex; flex-direction: column; min-width: 0; }
.bl-card-byline b { font-size: 0.875rem; font-weight: 700; line-height: 1.43; color: var(--ink); }
.bl-card-byline span { font-size: 0.875rem; line-height: 1.43; color: var(--ink); opacity: 0.8; }

/* .cl-card-link: the whole card is the hit area. */
.bl-card-link { position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.bl-card-link:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }

@media (max-width: 1023px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .bl-grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-card:hover { transition: none; transform: none; }
}

/* The listing renders a page of cards at a time rather than all 207. */
.bl-more {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 40px;
}
.bl-more span { font-size: 0.9rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- article detail (blogs) -----------------------------------------------
   Measured off the live template rather than approximated, because the two
   sit side by side in review: a tinted band carrying the arc artwork, the
   category above a 48px headline capped at 720px, the dates and the byline
   below it, and the artwork at 16:10 on the right.

   The article below is one grid: the body in a wide column with the key
   summary as a card at the top of it, and a 352px rail beside it holding the
   contents and the related reading. The summary used to be a full-width
   tinted band of its own, which pushed it away from the article it summarises
   and left a gutter of empty tint beside it.
   -------------------------------------------------------------------------*/

.blog-hero {
  background: #f1f5f9 url("/media/hero-outline-arcs.png") 50% / cover no-repeat;
  /* .padding-section-large 7rem, then .blog-details_hero-component's own 4rem
     margin-top, then 4rem at the foot. Straight off the export. */
  padding: 176px 0 64px;
}

/* grid-template-columns: 56% 1fr; gap 16px; place-items: center start */
.blog-hero-grid {
  display: grid;
  grid-template-columns: 56% 1fr;
  gap: 16px;
  place-items: center start;
}
.blog-hero-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.blog-hero-grid > * { width: 100%; }

/* .headline: Mulish, --tertiary, 16px/130%, 600, .05em, uppercase.
   The body face, not the display face: it is set in Mulish on the export. */
.blog-hero-eyebrow {
  margin: 0 0 16px;                       /* .spacer-xsmall */
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #1ec3d9;
}

/* .heading-style-h1-blog-details inside .max-width-40rem.text-wrap-balance */
.blog-hero h1 {
  max-width: 45rem;
  margin: 0 0 32px;                       /* .spacer-medium */
  /* 600, not the 500 our other h1s carry: the export gives this heading its
     own class and sets the weight on it. */
  font-size: 3rem; font-weight: 600; line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}

/* .flex-horizontal: gap 3.75rem */
.blog-hero-meta { display: flex; flex-wrap: wrap; gap: 24px 60px; margin: 0; }

/* .blog-hero_info: column, row-gap .5rem. Each row is a bold label and the
   date on one line, not a stacked pair. */
.blog-hero-meta dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.blog-hero-meta .row { display: flex; gap: 6px; align-items: baseline; }
.blog-hero-meta dt,
.blog-hero-meta dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.4; letter-spacing: 0.0125em;
  color: var(--ink);
}
.blog-hero-meta dt { font-weight: 700; }     /* .text-weight-bold */
.blog-hero-meta dd { font-weight: 400; }

/* .article-author-wrap: gap 1.5rem. .blog-author: column, gap .5rem.
   .author-linkedin: row, gap .25rem, icon 20px. */
.blog-hero-people { display: flex; gap: 24px; }
.blog-hero-author { display: flex; align-items: center; gap: 4px; }
.blog-hero-author svg { width: 20px; height: 20px; flex: none; }
.blog-hero-author a, .blog-hero-author span.name { color: var(--ink); text-decoration: none; }
.blog-hero-author a:hover { color: var(--action); }

/* .img-responsive: aspect-ratio 16/10, radius 16px, width 100% */
.blog-hero-art {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 16px;
}

/* Where you are, on white under the band. */
.blog-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 26px 0 0; font-size: 0.95rem; color: var(--ink-faint);
}
.blog-crumbs a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.blog-crumbs a:hover { color: var(--action); }
.blog-crumbs svg { color: var(--line); flex: none; }
.blog-crumbs .here { color: var(--ink); font-weight: 600; }

/* --- the article and its rail --------------------------------------------*/

.blog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 352px;
  gap: 48px;
  /* The rail must fill the row, not shrink to its cards: a sticky element can
     only travel inside its own parent, so a start-aligned rail let the pinned
     card scroll away with the top of the article. */
  align-items: stretch;
}

/* The summary reads before the article, in the article's own column. */
.blog-summary {
  background: var(--bg-wash);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 34px;
}
.blog-summary > :first-child { margin-top: 0; }
.blog-summary > :last-child { margin-bottom: 0; }

.blog-rail { display: grid; gap: 16px; align-content: start; }

.blog-rail-card {
  background: var(--bg-wash);
  border-radius: 12px;
  padding: 24px;
}
/* Only the second card pins. The contents card scrolls away with the top of
   the article, which is where it is useful. */
.blog-rail-card.is-sticky { position: sticky; top: 96px; }

.blog-rail-card h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.25; color: var(--ink);
}

/* Contents, collapsible, as the live template has it. */
.blog-toc-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: inherit; font: inherit;
}
.blog-toc-toggle svg { flex: none; color: var(--ink-soft); transition: transform 0.2s ease; }
.blog-toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.blog-toc-list { list-style: none; margin: 14px 0 0; padding: 0; }
.blog-toc-list li + li { border-top: 1px solid var(--line); }
.blog-toc-list a {
  display: block; padding: 10px 0;
  font-size: 1rem; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none;
}
.blog-toc-list a:hover { color: var(--ink); }
.blog-toc-list a.is-on { color: var(--action-deep); font-weight: 600; }

/* Related reading: thumbnail beside the title, as the live rail sets it. */
.blog-related { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.blog-related a {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.16s ease;
}
.blog-related a:hover { opacity: 0.72; }
.blog-related img {
  width: 80px; height: 80px; flex: none;
  border-radius: 5px; object-fit: cover; background: var(--bg);
}
.blog-related b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; line-height: 1.2; color: var(--ink);
}

/* Headings are jump targets, so they must clear the fixed header. */
.blog-content h2, .blog-content h3 { scroll-margin-top: 104px; }

@media (max-width: 1023px) {
  .blog-hero { padding: 140px 0 48px; }
  .blog-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .blog-hero h1 { max-width: none; font-size: 2.5rem; }
  /* The rail goes above the article and stops pinning: pinned with nothing
     beside it, it only eats the viewport. */
  .blog-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .blog-rail-card.is-sticky { position: static; }
}
@media (max-width: 767px) {
  .blog-hero h1 { font-size: 2rem; }
  .blog-hero-meta { gap: 20px 32px; }
}


/* --- article listing controls --------------------------------------------
   207 articles written for two different readers, so the list needs a way in:
   the audience split as tabs, and a search for when you already know what you
   are after. Both filter the list already on the page.
   -------------------------------------------------------------------------*/

.bl-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 18px;
}

.bl-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.bl-tab {
  padding: 9px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.bl-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--action) 40%, var(--line)); }
.bl-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.bl-search {
  display: flex; align-items: center; gap: 9px;
  min-width: 260px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.bl-search:focus-within {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(46, 166, 245, 0.16);
}
.bl-search svg { color: var(--ink-faint); flex: none; }
.bl-search input {
  flex: 1; min-width: 0;
  padding: 11px 0;
  border: 0; outline: none; background: none;
  font: inherit; font-size: 0.94rem; color: var(--ink);
}
.bl-search input::placeholder { color: var(--ink-faint); }
/* The browser's own clear button, which the round field would otherwise clip. */
.bl-search input::-webkit-search-cancel-button { cursor: pointer; }

.bl-count {
  margin: 0 0 22px;
  font-size: 0.88rem; color: var(--ink-faint);
}

.bl-empty {
  display: grid; justify-items: center; gap: 16px;
  padding: 56px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--ink-soft);
}
.bl-empty p { margin: 0; }

@media (max-width: 720px) {
  .bl-controls { flex-direction: column; align-items: stretch; }
  .bl-search { min-width: 0; }
  .bl-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .bl-tab { white-space: nowrap; }
}

/* ============================================================
   MANAGED VS DIRECT HIRE  (/pricing/managed-vs-direct-hire)
   ============================================================
   The page is built almost entirely from components that already exist -
   .duo, .cover-grid, .split-card, .pricing-panel. These are the few rules
   those components do not cover: the hero's picker, and the pricing panel
   at half width, where its figure-beside-terms grid has nowhere to sit. */
.pvd-picker {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.pvd-picker-title {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.pvd-pick {
  display: block; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 14px; color: inherit; transition: border-color .18s, background .18s;
}
.pvd-pick:hover { border-color: var(--accent); background: #f7fbfe; text-decoration: none; }
.pvd-pick-name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 15px; color: var(--ink);
}
.pvd-pick-best { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
.pvd-pick-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent);
}
.pvd-picker-foot { font-size: 13px; color: var(--ink-faint); }

.pvd-terms { grid-template-columns: minmax(0, 1fr); }
.pvd-who { font-size: 15px; color: var(--ink-soft); }
.pvd-go { border-left: 0; padding-left: 0; }

.pvd-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.pvd-splits { display: flex; flex-direction: column; gap: 20px; }

/* Two-up only where there is room for it. Below this the panels stack and use
   the site's own stacked pricing-panel rules unchanged, so this page's money
   section looks like every other pricing panel on the site at that width. */
@media (min-width: 1024px) {
  .pvd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvd-two .pricing-panel {
    grid-template-columns: minmax(0, 1fr); gap: 22px;
    padding: 36px 34px; align-content: start;
  }
  .pvd-two .pricing-ctas { padding-top: 22px; }
}

/* ============================================================
   COURSE VIDEO
   A course's content is the video, so it gets the article's own
   measure rather than the full container width, and a fixed 16:9
   box so the page does not reflow when the player loads.
   ============================================================ */
.art-video-wrap { padding-bottom: 0; }
.art-video {
  max-width: 860px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: var(--ink); box-shadow: 0 24px 52px rgba(43, 69, 95, 0.16);
}
.art-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   COURSE PAGE
   One column, one measure, one background. The video is the
   content and the title labels it, so they sit together with
   nothing between them; the notes continue the same column
   rather than opening a new band.
   ============================================================ */
.course-shell { max-width: 900px; }
.course-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--ink-faint); margin-bottom: 22px;
}
.course-back:hover { color: var(--action); text-decoration: none; }
.course-shell .art-video { max-width: none; }
.course-poster {
  aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--bg-wash);
}
.course-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; color: var(--ink);
  margin: 26px 0 0;
}
/* Duration and audience, the two things worth knowing before pressing play. */
.course-facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.course-facts li {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
}
/* A hairline rather than another card: the notes are a continuation of this
   column, not a separate panel sitting on top of it. */
.course-notes {
  margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line);
}


/* The menu still opens and closes; it just arrives rather than travels. */
@media (prefers-reduced-motion: reduce) {
  .nav-burger span,
  .mobile-menu { transition-duration: 0.01ms; }
  .mobile-menu { transform: none; }
}


/* ------------------------------------------------------------------
   Client logos on a phone.

   The desktop strip is a centred flex wrap, which relies on logos of
   similar width sitting on one line. At 390px they wrap one or two to a
   row depending on each wordmark's intrinsic width, so the block reads
   as scattered rather than as a grid - and the Case Study tags appear
   on six of eleven, adding a second ragged rhythm underneath the first.

   Two even columns, each logo in its own card, matching how the live
   site sets them. The tags come off: they are a hover affordance built
   around a pop-over card, and neither hover nor the pop-over exists on
   a touch screen, so on a phone they were decoration that broke the
   alignment. Eleven is odd, so the last card takes the full width.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .logo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-inline: var(--gutter-mobile, 18px);
  }
  .logo-item {
    /* The reserved tag height and the column gap both go: neither has
       anything to reserve space for once the tags are hidden. */
    --cs-tag-gap: 0px;
    --cs-tag-h: 0px;
    display: flex;
    justify-content: center;
    min-height: 66px;
    /* 10px rather than 14px so the square emblem below can take the full
       44px the card has to give without the row getting taller. The card is
       border-box, so the 1px border eats into the 66px too: 44 + 20 + 2. */
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .logo-item:not(:has(.cs-tag))::after { display: none; }
  /* Odd count, so the last one is alone on its row: let it span rather
     than sit in the left column with a hole beside it. */
  .logo-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .logo-grid .cs-tag,
  .logo-grid .logo-pop { display: none; }
  .logo-mark { max-width: 100%; height: auto; max-height: 26px; }
  /* A square emblem needs height where a wordmark needs width. Capped at the
     wordmark's 26px, Toyota rendered 26x26 inside a card its neighbours
     filled end to end. 44px is the card's own content height, and the height
     is set rather than only capped: max-height is a ceiling, not a floor, so
     on its own it left the emblem at the 40px slot it inherits. */
  .logo-mark.is-emblem { height: 44px; max-height: 44px; }
  /* Optically trimmed, set by eye rather than by ratio. Hone measures the
     same box as Wayflyer, but its letters are all-caps at the full height of
     that box where Wayflyer's are mixed case, so the same box reads about a
     third larger. Holding the width in brings the letter heights level. */
  .logo-mark.is-tight { max-width: 80%; }
}


/* ------------------------------------------------------------------
   "Where we hire from", and the footer's legal line, on a phone.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Desktop puts these three beside a globe, where ragged-left is right
     because the column has an edge to sit against. Stacked under a
     centred globe and a centred heading, left alignment is the only
     thing on the section not lining up with everything above it. The
     flags were also flush to the screen edge, since the column took its
     inset from a layout that no longer exists at this width. */
  .regions-layout .region-col,
  .region-col { text-align: center; padding-inline: 4px; }
  .region-flags { justify-content: center; }
  .region-col a { display: inline-block; }

  /* The copyright, Privacy Policy and Terms sat on one row and each wrapped
     onto two lines, so three items took six. The copyright is the long one,
     so it takes the row; the two policy links are short enough to share the
     next one, separated by a rule rather than by the width of the footer. */
  .footer-legal { flex-wrap: wrap; gap: 6px 14px; }
  .footer-legal span { flex: 0 0 100%; }
  .footer-legal a + a { border-left: 1px solid var(--line); padding-left: 14px; }
  .footer-bottom { gap: 20px; }

  /* The hero stacks to one column here, and everything in it kept the
     ragged-left edge it has beside the brief card on a desktop. With no
     second column to sit against, the badge, the heading, the button and
     the three stats each ended on a different left edge. */
  .hero-copy { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-cta-row { justify-content: center; }
  .hero-trust { justify-content: center; }

  /* The header opens as an inset pill and becomes a full-width bar once you
     scroll. That inset costs about 24px of a row that on a phone already has
     to hold the logo, the CTA and the burger, so it starts expanded and the
     scroll state has nothing left to change. Done in CSS rather than by
     pre-setting the class in nav.js, so there is no pill visible before the
     script runs. */
  /* No backdrop-filter on the phone header, and it has to stay off the
     scrolled state too. The mobile menu is a child of <header> and is
     `position: fixed; inset: 0` to fill the screen, but a backdrop-filter
     makes its element a containing block for fixed descendants, so the menu
     sized itself against the 61px header instead of the viewport and showed
     148px of a 1551px panel. The scrolled state has carried the filter since
     before this rule existed, so the menu was already clipped for anyone who
     scrolled before opening it; this only made it happen at the top of the
     page as well.

     Opaque rather than 0.97, because the open menu scrolls underneath this
     bar and the blur was the only thing keeping that from reading through
     the remaining 3%. Over a hero this pale the difference is invisible. */
  .header,
  .header.is-scrolled { backdrop-filter: none; }
  .header {
    padding: 0;
    background: #fff;
    border-bottom-color: var(--line);
    box-shadow: 0 10px 30px rgba(43, 69, 95, 0.10);
  }
  /* Opaque white and no blur, not transparent. The open menu paints above the
     header's own background but below the nav, so a see-through nav with a
     backdrop-filter smeared a blurred copy of the menu's top rows across the
     bar. Solid, it reads as the same flat bar it is with the menu closed. */
  .header .nav {
    background: #fff; border-color: transparent;
    border-radius: 0; box-shadow: none; backdrop-filter: none;
  }
}


/* ============================================================
   NARROW PHONES (320-360px)
   ============================================================
   Three components pushed the document wider than the viewport, which is the
   one mobile fault a reader always notices: the whole page slides sideways
   and the fixed header detaches from the content under it. Found by sweeping
   every template at 320, 360 and 430 rather than on any one page.

   Kept together because they are one class of bug rather than three
   component tweaks, and because each has to come after the component's own
   rules to win. */

/* A flex container is `min-width: auto` by default, so it refuses to shrink
   below its content and grows past its parent instead of wrapping. 320px
   viewport, 280px of column, 320px of card. */
.gt-card { min-width: 0; flex-wrap: wrap; }

/* A segmented control of five time zones. inline-flex with no wrap made it
   328px inside a 238px column, and "Pacific" ended 46px past the screen. */
@media (max-width: 400px) {
  .rg-zones-set { display: flex; flex-wrap: wrap; justify-content: center; border-radius: 18px; }
}

/* CMS rich text: the legal pages carry long unbroken tokens - URLs, and the
   company's own registered name in brackets - which cannot wrap at any width
   and pushed a paragraph 27px past the edge.

   `anywhere` rather than `break-word`, and this is the whole fix: only
   `anywhere` reduces an element's intrinsic min-content width. The article is
   a grid item, so it is floored at min-content by `min-width: auto`, and
   `break-word` left that floor exactly where it was. min-width: 0 for the
   same reason, belt and braces for anything the token rule cannot break. */
.rich, .cse-narrative, .art-content { overflow-wrap: anywhere; min-width: 0; }

/* CMS role copy stays inside the reviewed V2 work layout. */
.rd-work-description { font-size: 15px; line-height: 1.7; }
.rd-work-dark .rd-work-description,
.rd-work-dark .rd-work-description p { color: #cfdbe7; }
.rd-duty-card ul, .rd-duty-card ol { padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.rd-duty-card li + li { margin-top: 8px; }