/* ==========================================================================
   BeyondEdge — shared stylesheet for the static inner pages.

   The homepage (index.html) is a Claude Design canvas document: its styling
   lives inline and is driven by the {{ }} binding layer. These pages are plain
   HTML on purpose — they need no runtime, they are indexable as-is, and they
   port to a static site generator without rewriting a reactive layer.
   The tokens below mirror the homepage so the two read as one site.
   ========================================================================== */

:root{
  --bg:          oklch(96% 0.008 285);
  --surface:     oklch(100% 0 0);
  --ink:         oklch(16% 0.01 285);
  --ink-soft:    oklch(35% 0.01 285 / 0.78);
  --ink-faint:   oklch(35% 0.01 285 / 0.62);
  --accent:      #5145A1;
  --brand:       #2B1F4F;
  --line:        oklch(35% 0.01 285 / 0.13);
  --shadow:      0 24px 60px -34px oklch(0% 0 0 / 0.42);
  --radius:      22px;
  --gutter:      clamp(24px, 4vw, 64px);
  --accent-svc:  var(--accent);       /* overridden per service page */
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Reduced motion stops animations and scroll-in movement (see .reveal), but
   keeps hover transitions: a colour or background easing in is not motion,
   and switching it off made every hover snap (Jack, 7 Oct 2026). */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* form spam trap: off screen and out of the tab order, so only bots fill it in */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h1,h2,h3,h4{font-family:var(--font-display);margin:0}
p{margin:0}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.eyebrow{display:block;font:700 12.5px var(--font-label);letter-spacing:5px;
  text-transform:uppercase;color:var(--accent-svc)}
/* page-head eyebrow with a home link in front of it, in place of a back link */
.eyebrow--home{display:flex;align-items:center;gap:12px}
.home-link{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;
  border-radius:50%;background:oklch(45% 0.13 285 / 0.1);color:var(--accent-svc);letter-spacing:0;
  transition:background var(--hover-dur) var(--ease-soft),color var(--hover-dur) var(--ease-soft)}
.home-link:hover{background:var(--accent-svc);color:#fff}
/* on a grandchild page (a job, a service, a category) the label above the
   title is the way back to its parent page */
.eyebrow__up{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color var(--hover-dur) var(--ease-soft)}
.eyebrow__up:hover,.eyebrow__up:focus-visible{color:inherit;border-bottom-color:currentColor}

/* ---- Buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
  font-size:15px;font-weight:700;white-space:nowrap;border:1px solid transparent;
  transition:background var(--hover-dur) var(--ease-soft),color var(--hover-dur) var(--ease-soft),border-color var(--hover-dur) var(--ease-soft),transform var(--hover-move) var(--ease-soft)}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:oklch(32% 0.06 292);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--surface);color:var(--ink);border-color:oklch(35% 0.01 285 / 0.3)}

/* ---- Top navigation ---------------------------------------------------- */
.site-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:18px var(--gutter);
  background:oklch(96% 0.008 285 / 0.82);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:border-color var(--hover-dur) var(--ease-soft)}
.site-nav.is-stuck{border-bottom-color:var(--line)}
.site-nav__logo{height:44px;width:auto;flex:none;display:block}
.site-nav__links{display:flex;gap:clamp(2px,.5vw,8px);font-size:16px;font-weight:500;
  white-space:nowrap;overflow:hidden}
.site-nav__links a{color:var(--ink);position:relative;padding:8px 16px;border-radius:999px;
  transition:background var(--hover-dur) var(--ease-soft),color var(--hover-dur) var(--ease-soft)}
.site-nav__links a:hover{background:oklch(0% 0 0 / 0.05)}
/* the page you are on sits in a pill */
.site-nav__links a[aria-current]{color:var(--accent-svc);font-weight:700;background:oklch(45% 0.13 285 / 0.12)}
.site-nav .btn{padding:10px 20px;font-size:15px}
@media (max-width:1000px){.site-nav__links{font-size:15px}.site-nav__links a{padding:8px 11px}}

/* ---- Service hero ------------------------------------------------------ */
.svc-hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px)}
.svc-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
  color:var(--ink-faint);margin-bottom:26px}
.back-link:hover{color:var(--accent-svc)}
.svc-hero h1{font-size:clamp(34px,5.2vw,62px);line-height:1.04;
  font-weight:900;margin:18px 0 20px}
.svc-hero__lead{font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--ink-soft);
  max-width:34em;margin-bottom:32px}
/* the customer's own words for the problem a service solves */
.svc-hero__quote{margin:-6px 0 26px;
  font:italic 600 clamp(16px,1.3vw,18px)/1.55 var(--font-display);color:var(--ink)}
.text-link{font-weight:700;color:var(--accent-svc)}
/* when a service applies: a quiet line under the lead */
.svc-hero__note{margin:-14px 0 28px;max-width:34em;font-size:15.5px;line-height:1.6;color:var(--ink-faint)}
/* a service's photograph in place of the abstract figure */
.svc-photo{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow, 0 30px 60px -40px oklch(0% 0 0 / 0.5))}
.svc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.product-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.card .product-list li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:2px solid var(--line, oklch(0% 0 0 / 0.1))}
.card .product-list li::before{content:none}
.product-list b{font:800 16px var(--font-display);color:var(--ink)}
.product-list em{font:700 10.5px var(--font-label);font-style:normal;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-svc)}
.product-list span{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.svc-hero__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.icon-tile{width:78px;height:78px;border-radius:20px;display:grid;place-items:center;
  padding:16px;background:var(--accent-svc);box-shadow:var(--shadow)}
.icon-tile img{width:100%;height:100%;object-fit:contain;display:block;
  filter:brightness(0) invert(1)}

/* Echoes the homepage card stack so the pages feel like the same world. */
.svc-figure{position:relative;aspect-ratio:1/1;max-width:440px;margin-left:auto;width:100%}
.svc-figure__card{position:absolute;inset:0;border-radius:28px;background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden}
.svc-figure__card::before{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,oklch(100% 0 0),oklch(96% 0.008 285))}
.svc-figure__shape{position:absolute;left:50%;top:50%;width:44%;height:44%;
  transform:translate(-50%,-50%);background:var(--accent-svc);opacity:.92}
.svc-figure__ring{position:absolute;left:50%;top:50%;width:72%;height:72%;border-radius:50%;
  transform:translate(-50%,-50%);border:1px solid oklch(35% 0.01 285 / 0.14)}
.svc-figure__grid{position:absolute;inset:0;
  background:linear-gradient(oklch(35% 0.01 285 / 0.055) 1px,transparent 1px),
             linear-gradient(90deg,oklch(35% 0.01 285 / 0.055) 1px,transparent 1px);
  background-size:44px 44px}
.svc-figure__tag{position:absolute;left:24px;bottom:24px;font:700 11px var(--font-label);
  letter-spacing:3px;text-transform:uppercase;color:var(--ink-faint)}

/* ---- Generic section --------------------------------------------------- */
.section{padding:clamp(48px,6vw,86px) 0}
.section--tint{background:var(--surface);border-block:1px solid var(--line)}
.section__head{max-width:760px;margin-bottom:clamp(30px,4vw,52px)}
.section__head h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;
  margin:14px 0 14px}
.section__head p{font-size:17px;color:var(--ink-soft)}

/* ---- Two narrative blocks ---------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.4vw,54px)}
.split__item h3{font-size:clamp(20px,2vw,26px);font-weight:800;
  margin-bottom:14px}
.split__item p{color:var(--ink-soft);font-size:16.5px}
.split__rule{width:52px;height:4px;border-radius:999px;background:var(--accent-svc);
  margin-bottom:20px}

/* ---- Capability cards --------------------------------------------------- */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.cards--four{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,2.6vw,36px);transition:transform var(--hover-move) var(--ease-soft),box-shadow var(--hover-dur) var(--ease-soft),border-color var(--hover-dur) var(--ease-soft)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);
  border-color:oklch(35% 0.01 285 / 0.22)}
.card__num{font:700 12px var(--font-label);letter-spacing:3px;color:var(--accent-svc);
  margin-bottom:14px;display:block}
.card h3{font-size:20px;font-weight:800;margin-bottom:12px}
.card p{color:var(--ink-soft);font-size:16px}
.card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.card li{position:relative;padding-left:24px;font-size:15.5px;color:var(--ink-soft);
  line-height:1.6}
.card li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border-radius:3px;background:var(--accent-svc);opacity:.85}

/* ---- Process steps ------------------------------------------------------ */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  counter-reset:step}
.step{position:relative;padding-top:28px;border-top:2px solid var(--line)}
.step::before{counter-increment:step;content:"0" counter(step);
  position:absolute;top:26px;left:0;font:700 12px var(--font-label);
  letter-spacing:2px;color:var(--accent-svc)}
.step::after{content:"";position:absolute;top:-2px;left:0;width:34px;height:2px;
  background:var(--accent-svc)}
.step h3{font-size:17px;font-weight:800;margin:26px 0 8px}
.step p{font-size:15.5px;color:var(--ink-soft)}

/* ---- Proof strip -------------------------------------------------------- */
.proof{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
/* 2-1-1: the first fact (ISO/IEC 27001, the longest figure) gets a double
   column so it sits on one line with room around it (Jack, 9 Oct 2026). */
@media (min-width:900px){.proof{grid-template-columns:2fr 1fr 1fr;gap:20px clamp(24px,3vw,48px)}}
.proof__item b{display:block;font:900 clamp(30px,3.4vw,44px) var(--font-display);
  color:var(--ink);margin-bottom:8px}
.proof__item span{font-size:15.5px;color:var(--ink-soft)}

/* ---- Callout ------------------------------------------------------------ */
.callout{display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(26px,3vw,40px)}
.callout h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;
  margin-bottom:10px}
.callout p{color:var(--ink-soft);max-width:48em}

/* ---- Service index / related grid --------------------------------------- */
.svc-list{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.svc-tile{position:relative;display:flex;flex-direction:column;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,2.6vw,34px);color:var(--ink);overflow:hidden;
  transition:transform var(--hover-move) var(--ease-soft),box-shadow var(--hover-dur) var(--ease-soft),border-color var(--hover-dur) var(--ease-soft)}
.svc-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow);color:var(--ink);
  border-color:oklch(35% 0.01 285 / 0.22)}
.svc-tile__icon{width:56px;height:56px;border-radius:16px;padding:12px;flex:none;
  display:grid;place-items:center;background:var(--tile,var(--accent))}
.svc-tile__icon img{width:100%;height:100%;object-fit:contain;display:block;
  filter:brightness(0) invert(1)}
.svc-tile h3{font-size:20px;font-weight:800}
.svc-tile p{color:var(--ink-soft);font-size:15.5px;flex:1}
.svc-tile__go{font-size:14.5px;font-weight:700;color:var(--tile,var(--accent));
  display:inline-flex;align-items:center;gap:7px}
.svc-tile:hover .svc-tile__go{gap:12px}
/* Offering tiles: one link colour for all, matching the homepage cards */
.svc-list--offerings .svc-tile__go{color:#5145A1}
.svc-list--offerings .svc-tile:hover .svc-tile__go{color:#2B1F4F}

/* photo tiles: real photography leads each service (art direction, 28 Sep 2026) */
.svc-tile--photo{padding:0;gap:0}
.svc-tile__media{display:block;aspect-ratio:16/10;overflow:hidden;background:oklch(92% 0.01 285)}
.svc-tile__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,.8,.24,1)}
.svc-tile--photo:hover .svc-tile__media img{transform:scale(1.04)}
.svc-tile__body{display:flex;flex-direction:column;gap:14px;flex:1;padding:clamp(22px,2.2vw,28px)}
/* vision and mission: a statement rather than a summary, so it is set larger */
.svc-tile--statement .svc-tile__media{aspect-ratio:21/9}
.svc-tile--statement h3{font:700 12.5px var(--font-label);letter-spacing:5px;text-transform:uppercase;color:var(--accent-svc)}
.svc-tile--statement p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink)}
.svc-tile--statement:hover{transform:none}

/* the portfolio of products: categories share a four-column grid, each as wide
   as its products (--span), so the short ones sit together on one line. No outer
   box: every product already has its own. */
.prod-rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(34px,3.6vw,48px) 20px}
.prod-row{grid-column:span var(--span,4);display:flex;flex-direction:column;gap:18px;min-width:0}
.prod-row h3{font:700 12px var(--font-label);letter-spacing:2.5px;text-transform:uppercase;
  color:var(--ink-faint)}
.prod-row ul{list-style:none;margin:0;padding:0;display:grid;gap:20px;flex:1;
  grid-template-columns:repeat(var(--span,4),minmax(0,1fr))}
.prod-row li{display:flex;flex-direction:column;gap:8px;padding:28px 30px 32px;border-radius:22px;
  background:oklch(97.5% 0.006 285);border:1px solid oklch(0% 0 0 / 0.05)}
.prod-row li::before{content:none}
.prod-row b{font:800 19px/1.25 var(--font-display);color:var(--ink)}
/* a partner's logo stands in for its name: same height slot as the text names */
.prod-row b{display:flex;align-items:center;min-height:30px}
.prod-row b img{display:block;width:auto;height:auto;max-height:28px;max-width:170px}
.prod-row b img.prod-mark{height:26px;max-height:26px;width:auto;max-width:60px;margin-right:10px;border-radius:6px}
.prod-row em{font:700 10.5px var(--font-label);font-style:normal;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent-svc);margin-top:auto;padding-top:16px}
.prod-row span{font-size:15px;line-height:1.65;color:var(--ink-soft)}
/* a one-product category is only one column wide: its name may run on past it
   into the empty space rather than wrap */
@media (min-width:1001px){.prod-row h3{white-space:nowrap}}
@media (max-width:1000px){
  .prod-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-row{grid-column:span min(var(--span,4),2)}
  .prod-row ul{grid-template-columns:repeat(min(var(--span,4),2),minmax(0,1fr))}
}
@media (max-width:560px){
  .prod-rows{grid-template-columns:minmax(0,1fr)}
  .prod-row{grid-column:auto}
  .prod-row ul{grid-template-columns:minmax(0,1fr)}
}

/* a wide photograph between sections of a service page */
.svc-band{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:21/8;box-shadow:var(--shadow)}
.svc-band img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){.svc-band{aspect-ratio:16/10;border-radius:22px}}
@media (max-width:700px){.svc-band-slot{display:none}}

/* ---- Scroll-in reveal (progressive; content is visible without JS) -------
   Content is never invisible (Jack, 8 Oct 2026: nothing hidden behind JS for
   SEO): it only slides up into place, so a crawler that does not scroll, or a
   script that never runs, still sees every word at full opacity. */
.js .reveal{transform:translateY(44px);
  transition:transform .45s cubic-bezier(.16,.8,.24,1)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:980px){
  .svc-hero__grid{grid-template-columns:minmax(0,1fr)}
  .svc-figure{max-width:340px;margin:0}
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  /* Comfortable touch targets: the footer list and the back link are the only
     places where links would otherwise sit at their 20px text height. */
  .back-link{padding:9px 0;margin-bottom:18px}
  .site-nav__links{display:none}
  .site-nav{padding:14px var(--gutter)}
  .site-nav__logo{height:38px}
  .svc-figure{display:none}
}
@media (max-width:480px){
  :root{--gutter:20px}
  .svc-hero__actions .btn{width:100%;justify-content:center}
}


/* ---- Section flow --------------------------------------------------------
   Sections run at their natural height and the page scrolls freely, with the
   global inertial glide from page.js. They used to be full-screen scenes, one
   per viewport like the homepage hero, but a header alone on a whole screen
   read as a forced stop between sections, so that treatment is gone.
   Only the homepage hero still plays as one deliberate move.
   ------------------------------------------------------------------------ */

/* ---- Section navigator -------------------------------------------------
   The same bottom bar the homepage uses, built by assets/page.js from the
   page's own [data-section] elements. Keeping one navigation system across
   the site is most of what makes the child pages feel like the homepage.
   ------------------------------------------------------------------------ */
.page-chrome{
  position:fixed;left:0;right:0;bottom:30px;z-index:15;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--gutter);pointer-events:none;
  transition:opacity .4s ease;
}
.page-chrome__side{font-size:14px;font-weight:500;white-space:nowrap;
  color:var(--ink-faint)}
.page-chrome__award{display:flex;align-items:center;gap:10px}
.page-chrome__award img{height:45px;width:auto;display:block;opacity:.7}
.page-chrome__pill{
  display:flex;align-items:center;gap:14px;padding:11px 20px;border-radius:999px;
  background:oklch(100% 0 0 / 0.6);border:1px solid oklch(100% 0 0 / 0.7);
  backdrop-filter:blur(16px);box-shadow:0 10px 30px -18px oklch(0% 0 0 / 0.35);
  pointer-events:auto;
}
.page-chrome__label{
  font:700 12px var(--font-label);letter-spacing:2px;text-transform:uppercase;
  color:oklch(35% 0.01 285 / 0.75);white-space:nowrap;min-width:142px;
}
.page-chrome__dots{display:flex;align-items:center;gap:9px}
.page-chrome__dot{
  /* 28px of touch target around a 7px mark, the way the homepage dots do it */
  width:16px;height:28px;padding:10.5px 0;border:0;background:none;
  cursor:pointer;flex:none;box-sizing:border-box;
}
.page-chrome__dot::after{
  content:"";display:block;width:100%;height:7px;border-radius:999px;
  background:oklch(35% 0.01 285 / 0.25);
  transition:width .6s cubic-bezier(.16,.8,.24,1), background .6s ease;
}
.page-chrome__dot:hover::after{background:oklch(35% 0.01 285 / 0.45)}
.page-chrome__dot.is-active{width:30px}
.page-chrome__dot.is-active::after{background:var(--accent-svc)}
.page-chrome__dot:focus-visible{outline:2px solid var(--accent-svc);
  outline-offset:3px;border-radius:6px}

@media (max-width:900px){
  .page-chrome__side{display:none}
  .page-chrome{justify-content:center;padding:0 16px;bottom:16px}
  .page-chrome__label{display:none}
  .page-chrome__pill{padding:9px 16px}
}
@media (prefers-reduced-motion:reduce){
  .page-chrome__dot::after{transition:none}
}


/* ---- Insights index ----------------------------------------------------- */
.wrap--narrow{max-width:760px}
/* rows sit further apart than columns so each row of articles reads as its own
   group (Jack, 15 Oct 2026) */
.insight-list{display:grid;gap:clamp(48px,5vw,72px) 26px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.insight-card{display:flex;flex-direction:column;gap:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;padding-bottom:clamp(24px,2.4vw,30px);
  transition:transform var(--hover-move) var(--ease-soft),box-shadow var(--hover-dur) var(--ease-soft),border-color var(--hover-dur) var(--ease-soft)}
.insight-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);color:var(--ink);
  border-color:oklch(35% 0.01 285 / 0.22)}
.insight-card>*:not(.insight-card__media){margin-inline:clamp(24px,2.4vw,30px)}
.insight-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.insight-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.insight-card__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:clamp(22px,2.2vw,28px);font-size:13px;color:var(--ink-faint)}
.insight-card__cat{font:700 11px var(--font-label);letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent-svc)}
.insight-card h3{font-size:21px;font-weight:800;line-height:1.3}
.insight-card p{color:var(--ink-soft);font-size:15.5px;flex:1}
.insight-card:hover .svc-tile__go{gap:12px}

/* ---- Article ------------------------------------------------------------
   Reading layout: one narrow column of prose.
   ------------------------------------------------------------------------ */
.article__head{padding:clamp(40px,6vw,80px) 0 clamp(24px,3vw,36px)}
.article__head h1{font-size:clamp(30px,4.2vw,52px);line-height:1.08;
  font-weight:900;margin:16px 0 20px}
.article__lead{font-size:clamp(17px,1.4vw,19px);line-height:1.7;color:var(--ink-soft)}
.article__byline{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;
  margin-top:22px;font-size:14px;color:var(--ink-faint)}
.article__byline span+span::before{content:"·";margin-right:10px;opacity:.6}
.article__cover{margin:0 0 clamp(32px,4vw,52px);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--surface)}
.article__cover img{width:100%;height:100%;object-fit:cover;display:block}

.prose{padding-bottom:clamp(40px,5vw,72px);font-size:17.5px;line-height:1.75;
  color:oklch(28% 0.01 285 / 0.92)}
/* Markdoc wraps every document in <article>, so the rhythm is set one level in */
.prose>*+*,.prose>article>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(23px,2.4vw,30px);font-weight:900;
  margin-top:1.9em;margin-bottom:.6em}
.prose h3{font-size:clamp(19px,1.8vw,22px);font-weight:800;
  margin-top:1.7em;margin-bottom:.5em}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.5em}
.prose li{padding-left:.2em}
.prose li::marker{color:var(--accent-svc)}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{color:var(--accent-svc);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose blockquote{margin-inline:0;padding-left:22px;border-left:3px solid var(--accent-svc);
  color:var(--ink-soft);font-style:italic}
.prose code{font-size:.9em;padding:2px 6px;border-radius:6px;
  background:oklch(35% 0.01 285 / 0.08)}
.prose img{border-radius:var(--radius);display:block;height:auto}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55}
.prose th,.prose td{padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.prose thead th{font-weight:700;color:var(--ink);border-bottom:2px solid var(--accent-svc)}
.prose tbody tr:nth-child(even){background:oklch(35% 0.01 285 / 0.03)}
@media (max-width:640px){
  /* a three-column comparison cannot shrink to a phone; let it scroll instead */
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}


/* ---- Breadcrumb and category chips -------------------------------------- */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:22px;
  font-size:14px;font-weight:600;color:var(--ink-faint)}
.crumbs a{color:var(--ink-faint)}
.crumbs a:hover{color:var(--accent-svc)}

.cat-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.cat-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px;
  font-size:14.5px;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color var(--hover-dur) var(--ease-soft),transform var(--hover-move) var(--ease-soft)}
.cat-chip:hover{color:var(--ink);border-color:oklch(35% 0.01 285 / 0.3);transform:translateY(-1px)}
.cat-chip span{font:700 12px var(--font-label);color:var(--accent-svc)}
button.cat-chip{font-family:inherit;cursor:pointer}
.cat-chip[aria-pressed="true"]{color:var(--accent-svc);font-weight:700;background:oklch(45% 0.13 285 / 0.12);border-color:transparent}
.cat-chip:focus-visible{outline:2px solid var(--accent-svc);outline-offset:2px}
.cat-chip--jump{border-style:dashed}
.insight-card[hidden]{display:none}


/* ==========================================================================
   Company pages — About Us, People, careers, Collaboration, Contact,
   Media & PR, Portfolio and the ODC page. Built from the same tokens and
   the same card, section and reveal vocabulary as the solution pages.
   ========================================================================== */

/* ---- Wide photograph under a hero -------------------------------------- */
.page-banner{margin:0;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:1320/400;background:var(--surface)}
.page-banner img{width:100%;height:100%;object-fit:cover;display:block}
/* straight under a headline, with no lead between them */
.svc-hero h1+.page-banner{margin-top:clamp(28px,3.4vw,44px)}
@media (max-width:760px){.page-banner{aspect-ratio:4/3;border-radius:20px}}

/* ---- Photo wall, lower half: the classic homepage's Our People wall
   (Sep-Oct 2026) on white, around the How we work copy. One grid bleeding
   off both sides: the heading in a row of its own, the points in columns 3-7
   with photos either side (that row grows with the points, so photos never
   cover text), then two full rows of photos. The photos beside the points
   fade in from the top, so the wall rises around the copy like a bowl. ---- */
.people-wall-sec{overflow:hidden;background:#fff;--pw-row:clamp(110px,10.5vw,160px)}
.pwall{display:grid;gap:14px;margin:0 -3%;
  grid-template-columns:repeat(9,minmax(0,1fr));
  grid-template-rows:auto minmax(var(--pw-row),auto) repeat(2,var(--pw-row))}
.pwall__head{grid-column:1 / -1;grid-row:1;text-align:center;margin:0 auto clamp(20px,3vw,36px);max-width:1180px;padding:0 3%}
.pwall__head .belief__lead{max-width:760px}
.pwall__head .belief__lead{margin-left:auto;margin-right:auto}
/* the same size as every other section heading (--t-h2); weight and tracking: minimal.css, with .section__head h2 */
.people-wall-sec .pwall__head h2{font-size:var(--t-h2);line-height:1.02;margin:22px 0 18px;text-wrap:balance}
/* the side gutter keeps the copy clear of the photos either side */
.pwall .pwall__points{grid-column:3 / 8;grid-row:2;align-self:start;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0 clamp(24px,3vw,48px) 8px}
.pwall__tile{grid-column:var(--c) / span var(--cs);grid-row:var(--r) / span var(--rs);position:relative;min-height:0;overflow:hidden;background:var(--bg-alt,#F2F1F7)}
.pwall__tile--fade{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 65%);mask-image:linear-gradient(to bottom,transparent,#000 65%)}
/* absolute, so a photo's own height never stretches its grid row (only the copy does) */
.pwall__tile img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* narrower desktops: the points stack, and their row (and the photos beside it) grows */
@media (max-width:1180px){.pwall .pwall__points{grid-template-columns:minmax(0,1fr);gap:4px}}
/* phones and tablets: the heading full width, then the points on the left and
   a mosaic of big, wide and tall photos on the right, two narrow columns
   (each tile's phone place is --mc/--mr/--mcs/--mrs). The rows share out the
   points' height, so the mosaic is always as tall as the copy beside it. */
@media (max-width:900px){
  .pwall{margin:0;padding:0 var(--gutter,20px);gap:8px;
    grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,.5fr));
    grid-template-rows:auto;grid-auto-rows:minmax(40px,auto)}
  .pwall__head{grid-column:1 / -1;grid-row:1;text-align:left;max-width:none;margin:0 0 8px;padding:0}
  .pwall .pwall__points{grid-column:1;grid-row:2 / span 7;grid-template-columns:minmax(0,1fr);gap:0;padding:0 10px 0 0}
  .people-wall-sec .pwall .pwall__points li{padding:16px 0 18px}
  .pwall .pwall__points li:first-child{padding-top:0;border-top:0}
  .pwall .pwall__points h3{font-size:16px}
  .pwall .pwall__points p{font-size:14.5px}
  .pwall__tile{grid-column:var(--mc) / span var(--mcs);grid-row:var(--mr) / span var(--mrs);-webkit-mask-image:none;mask-image:none}
  .pwall__tile--wide-only{display:none}
}

/* ---- People: How we work with you (copy beside the portrait cluster) ---- */
.belief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.belief h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;line-height:1.15;margin:14px 0 16px}
.belief__lead{font-size:17px;color:var(--ink-soft);margin:0 0 clamp(24px,3vw,34px);max-width:34em}
.belief__points{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.belief__points li{padding-left:20px;border-left:3px solid var(--accent-svc)}
.belief__points h3{font-size:18px;font-weight:800;margin:0 0 4px}
.belief__points p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
@media (max-width:980px){.belief{grid-template-columns:minmax(0,1fr)}}

/* ---- Icon tile, smaller, for cards -------------------------------------- */
.icon-tile--sm{width:60px;height:60px;border-radius:16px;padding:13px;margin-bottom:22px}

/* ---- Vision and mission ------------------------------------------------- */
.duo{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.duo .card p{font-size:18px;line-height:1.65;color:var(--ink)}

/* ---- CEO message -------------------------------------------------------- */
.ceo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,72px);
  align-items:center}
/* a standing cutout (Jack, 15 Oct 2026): no card, he stands on the bottom edge
   of the band, so the figure runs into the section's bottom padding */
.section:has(.ceo){padding-bottom:0!important}
.ceo{align-items:end}
.ceo__photo{margin:0;justify-self:center;align-self:end;
  width:min(100%,clamp(240px,23vw,330px));aspect-ratio:648/1128;background:none!important}
.ceo__photo img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block}
/* the {be} braces behind the cutout (20 Oct 2026): brand purple, behind him,
   spanning head to waist; on phones they tuck in so nothing runs off screen */
.ceo__photo{position:relative;isolation:isolate}
.ceo__photo img{position:relative;z-index:1}
.ceo__brace{position:absolute;top:8%;height:58%;width:auto;aspect-ratio:90.3/308;z-index:0;
  fill:var(--accent,#5145A1);opacity:.22;pointer-events:none}
.ceo__brace--l{left:-20%}
.ceo__brace--r{right:-20%}
@media (max-width:980px){.ceo__brace--l{left:-17%}.ceo__brace--r{right:-17%}}
.ceo > div{align-self:center;padding-block:clamp(16px,2vw,32px) clamp(48px,6vw,86px)}
.ceo__pull{font:800 clamp(21px,2.3vw,28px)/1.4 var(--font-display);color:var(--ink);
  margin:14px 0 24px}
.ceo__body p{color:var(--ink-soft);font-size:16.5px}
.ceo__body p+p{margin-top:14px}
.ceo__sign{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.ceo__sign b{font:900 19px var(--font-display);color:var(--ink)}
.ceo__sign span{font-size:14.5px;color:var(--ink-faint)}
@media (max-width:980px){.ceo{grid-template-columns:minmax(0,1fr)}.ceo__photo{order:2;width:min(72%,300px)}}

/* ---- Leadership --------------------------------------------------------- */
/* three to a row; each card lays the photo beside the text so the 212px
   headshots show at their own size instead of being stretched */
.leaders{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
.leader{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:grid;grid-template-columns:38% minmax(0,1fr);
  transition:transform var(--hover-move) var(--ease-soft),box-shadow var(--hover-dur) var(--ease-soft)}
.leader:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.leader__photo{position:relative;min-height:150px;background:#F9F8FE;overflow:hidden}
.leader__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.leader__silhouette{display:block;width:100%;height:100%;fill:oklch(35% 0.11 285 / .16)}
@media (max-width:1080px){.leaders{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.leaders{grid-template-columns:minmax(0,1fr)}}
.leader__text{padding:18px 18px 18px 20px;display:flex;flex-direction:column;gap:3px;min-width:0}
.leader__text h3{font-size:18px;font-weight:800}
.leader__role{font-size:14.5px;color:var(--ink-soft)}
.leader__head{display:flex;align-items:center;gap:8px}
.leader__in{flex:none;display:inline-flex;color:var(--accent-svc);border-radius:3px;transition:opacity var(--hover-dur) var(--ease-soft)}
.leader__in:hover{opacity:.75}
.leader__in:focus-visible{outline:2px solid var(--accent-svc);outline-offset:2px}
.leader__focus{margin-top:auto;padding-top:12px;font:700 11px/1.35 var(--font-label);letter-spacing:2px;text-transform:uppercase;color:var(--accent-svc)}

/* ---- Awards ------------------------------------------------------------- */
.awards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.award{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;color:var(--ink);
  transition:transform var(--hover-move) var(--ease-soft),box-shadow var(--hover-dur) var(--ease-soft)}
a.award:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--ink)}
.award__media{aspect-ratio:649/350;background:#fff;display:grid;place-items:center;
  border-bottom:1px solid var(--line)}
.award__media img{width:100%;height:100%;object-fit:cover;display:block}
.award__media--mark img{width:auto;height:62%;object-fit:contain}
.award__text{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;flex:1}
.award__text h3{font-size:19px;font-weight:800}
.award__text p{color:var(--ink-soft);font-size:15.5px;flex:1}

/* ---- Marks strip -------------------------------------------------------- */
.marks{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(24px,5vw,64px);padding:clamp(24px,3vw,34px) 0}
.marks img{height:clamp(52px,6vw,72px);width:auto;display:block}

/* ---- People: roles ------------------------------------------------------ */
.roles{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.role{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.role__photo{aspect-ratio:1/1;overflow:hidden;background:var(--bg)}
.role__photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,.8,.24,1)}
.role:hover .role__photo img{transform:scale(1.04)}
.role__text{padding:clamp(22px,2.4vw,30px)}
.role__text h3{font-size:21px;font-weight:900;margin-bottom:10px}
.role__text p{color:var(--ink-soft);font-size:15.5px}

/* ---- Careers list ------------------------------------------------------- */
.jobs{display:grid;gap:12px}
.job-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:24px;
  align-items:center;padding:22px clamp(20px,2.4vw,30px);border-radius:18px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);
  transition:transform var(--hover-move) var(--ease-soft),box-shadow var(--hover-dur) var(--ease-soft),border-color var(--hover-dur) var(--ease-soft)}
.job-row:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink);
  border-color:oklch(35% 0.01 285 / 0.22)}
.job-row h3{font-size:19px;font-weight:800;margin-bottom:4px}
.job-row p{font-size:15px;color:var(--ink-soft)}
.job-row__where{font-size:14.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:2px}
.job-row__where b{font:700 11px var(--font-label);letter-spacing:2px;text-transform:uppercase;
  color:var(--accent-svc);margin-bottom:4px}
.job-row .svc-tile__go{white-space:nowrap}
.job-row:hover .svc-tile__go{gap:12px}
@media (max-width:760px){.job-row{grid-template-columns:minmax(0,1fr);gap:12px}}

/* ---- Job page ----------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;font-size:14px;
  font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line)}
.job-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(30px,5vw,72px);
  align-items:start}
.job-layout .prose{padding-bottom:0}
.apply-card{position:sticky;top:110px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.apply-card h2{font-size:21px;font-weight:900;margin-bottom:10px}
.apply-card p{font-size:15px;color:var(--ink-soft);margin-bottom:20px}
.apply-card .btn{width:100%;justify-content:center}
/* Apply opens the form inside this box, which widens to take it */
.job-layout{transition:grid-template-columns .55s cubic-bezier(.16,.8,.24,1)}
.job-layout.is-apply{grid-template-columns:minmax(0,1fr) minmax(0,480px)}
.apply-card{scroll-margin-top:96px}
.apply-card__form{display:none}
.apply-card.is-open{position:static}
.apply-card.is-open .apply-card__intro,.apply-card.is-open .apply-card__legal{display:none}
.apply-card.is-open .apply-card__form{display:block;animation:applyIn .5s cubic-bezier(.16,.8,.24,1)}
@keyframes applyIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.apply-card__form .form{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.apply-card__form .form__title{font-size:22px}
.apply-card .apply-card__form .btn{width:auto}
.apply-card__cancel{margin-top:14px;background:none;border:0;padding:6px 0;font:inherit;font-size:15px;font-weight:600;
  color:var(--ink-faint);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.apply-card__cancel:hover{color:var(--ink)}
.fineprint{font-size:13.5px;line-height:1.6;color:var(--ink-faint);margin-top:18px}
.fineprint a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.job-layout,.job-layout.is-apply{grid-template-columns:minmax(0,1fr)}.apply-card{position:static}}

/* ---- Offices ------------------------------------------------------------ */
.offices{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.office{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:10px}
.office h3{font-size:21px;font-weight:900}
.office address{font-style:normal;font-size:15.5px;line-height:1.65;color:var(--ink-soft);flex:1}
.office a{font-size:14.5px;font-weight:700;display:inline-flex;gap:6px;align-items:center}

/* ---- Forms -------------------------------------------------------------- */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(30px,5vw,72px);align-items:start}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;
  padding:clamp(24px,3.4vw,44px);box-shadow:var(--shadow)}
.form{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));
  scroll-margin-top:120px}  /* clear of the sticky bar when arrived at by #enquiry */
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:14.5px;font-weight:700;color:var(--ink)}
.field label span{color:var(--accent-svc)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:13px 16px;
  transition:border-color var(--hover-dur) var(--ease-soft),background var(--hover-dur) var(--ease-soft);width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px;background:var(--surface)}
.form__foot{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form__foot .fineprint{margin:0;flex:1;min-width:220px}
.form__status{grid-column:1/-1;font-size:15px;line-height:1.6;padding:14px 18px;border-radius:14px;
  background:oklch(45% 0.13 285 / 0.08);color:var(--ink);border:1px solid oklch(45% 0.13 285 / 0.2)}
.form__status[hidden]{display:none}
/* the careers application: its own form, apart from the sales enquiry */
.career-card{max-width:640px}
.form__title{margin:0 0 6px;font-size:clamp(22px,2.4vw,28px);font-weight:800}
.field__hint{font-size:14.5px;font-weight:700;color:var(--ink)}
.file-drop{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  font-size:16px;color:var(--ink-soft);transition:border-color var(--hover-dur) var(--ease-soft)}
.file-drop:hover{border-color:var(--accent)}
.file-drop.has-file{color:var(--ink)}
.sr-only:focus-visible + .file-drop{outline:2px solid var(--accent);outline-offset:2px}
.career-form .field{position:relative}
.career-form input[type="file"].sr-only{left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden}
.career-form .form__foot{align-items:flex-start}
.career-form__apply{min-width:200px;justify-content:center}
.form__notice{grid-column:1/-1;margin:0;padding:16px 20px;border-radius:14px;font-size:15.5px;line-height:1.6;
  color:var(--ink);background:oklch(96% 0.03 285);border:1px solid oklch(45% 0.13 285 / 0.25);
  }
.form__notice[hidden]{display:none}
.side-list{display:grid;gap:14px}
.side-list h2{font-size:21px;font-weight:900;margin-bottom:4px}
.side-link{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  transition:transform var(--hover-move) var(--ease-soft),border-color var(--hover-dur) var(--ease-soft)}
.side-link:hover{transform:translateY(-3px);color:var(--ink);border-color:oklch(35% 0.01 285 / 0.26)}
.side-link b{font:800 17px var(--font-display)}
.side-link span{font-size:14.5px;color:var(--ink-soft)}
@media (max-width:980px){.contact-layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.form{grid-template-columns:minmax(0,1fr)}}

/* ---- Client wall and testimonial ---------------------------------------- */
.logo-wall{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(150px,45%),1fr))}
.logo-wall__item{aspect-ratio:3/2;display:grid;place-items:center;padding:18px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line)}
.logo-wall__item img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.75;transition:filter var(--hover-dur) var(--ease-soft),opacity var(--hover-dur) var(--ease-soft)}
.logo-wall__item:hover img{filter:none;opacity:1}
.testimonial{max-width:860px;margin:0 auto;text-align:center}
.testimonial__mark{font:900 64px/1 var(--font-display);color:var(--accent);display:block;height:40px}
.testimonial blockquote{margin:0 0 26px;font:600 clamp(18px,1.9vw,23px)/1.65 var(--font-display);color:var(--ink)}
.testimonial__who{display:inline-flex;align-items:center;gap:12px;font-weight:700}
.testimonial__who img{width:40px;height:40px;object-fit:contain}

/* ---- Brand band: the purple of Our People, for one closing moment ------- */
.section--brand{color:#fff;background:
  radial-gradient(ellipse 62% 95% at 10% -12%, rgb(81 69 161 / 0.5), transparent 62%),
  radial-gradient(ellipse 58% 85% at 102% 112%, rgb(81 69 161 / 0.38), transparent 60%),
  var(--brand)}
.section--brand .eyebrow{color:oklch(85% 0.09 290)}
.section--brand .section__head p{color:oklch(100% 0 0 / 0.78)}

/* ---- ODC ---------------------------------------------------------------- */
.bot-line{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px;padding:0;list-style:none}
.bot-line li{display:inline-flex;align-items:baseline;gap:8px;padding:10px 18px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.bot-line b{font:900 16px var(--font-display);color:var(--accent)}
.stages{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stage__photo{aspect-ratio:419/281;overflow:hidden}
.stage__photo img{width:100%;height:100%;object-fit:cover;display:block}
.stage__text{padding:clamp(22px,2.4vw,30px)}
.stage__text h3{font-size:24px;font-weight:900;margin-bottom:12px;color:var(--accent)}
.stage__text ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.stage__text li{position:relative;padding-left:24px;color:var(--ink-soft);font-size:15.5px}
.stage__text li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border-radius:3px;background:var(--accent)}
.stage-note{margin-top:clamp(26px,3vw,40px);font-size:18px;line-height:1.65;max-width:52em}

.compare{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);
  border-radius:var(--radius);overflow:hidden;border:1px solid oklch(100% 0 0 / 0.16)}
.compare>div{padding:20px clamp(16px,2vw,26px);border-bottom:1px solid oklch(100% 0 0 / 0.12);
  font-size:15.5px;line-height:1.6}
.compare__head{font:700 12px var(--font-label);letter-spacing:2.5px;text-transform:uppercase;
  color:oklch(85% 0.09 290)}
.compare__aspect{font:800 17px var(--font-display);color:#fff}
.compare__old{color:oklch(100% 0 0 / 0.66)}
.compare__new{background:oklch(100% 0 0 / 0.08);color:#fff}
.compare>div:nth-last-child(-n+3){border-bottom:0}
@media (max-width:760px){
  .compare{grid-template-columns:minmax(0,1fr)}
  .compare__head{display:none}
  .compare__old::before{content:"Traditional outsourcing";display:block;font:700 11px var(--font-label);
    letter-spacing:2px;text-transform:uppercase;color:oklch(85% 0.09 290);margin-bottom:6px}
  .compare__new::before{content:"Offshore Development Centre";display:block;font:700 11px var(--font-label);
    letter-spacing:2px;text-transform:uppercase;color:oklch(85% 0.09 290);margin-bottom:6px}
  .compare>div:nth-last-child(-n+3){border-bottom:1px solid oklch(100% 0 0 / 0.12)}
  .compare>div:last-child{border-bottom:0}
}

.stories{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.story{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  background:var(--surface);box-shadow:0 20px 44px -30px oklch(0% 0 0 / 0.5)}
.story img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.story figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 18px;color:#fff;
  background:linear-gradient(transparent,oklch(15% 0.03 292 / 0.85))}
.story figcaption b{display:block;font:900 18px var(--font-display)}
.story figcaption span{font-size:14px;color:oklch(100% 0 0 / 0.8)}

/* ---- Offering journey (Land, Assess, Modernize, Expand) on /offering/ ----- */
.journey{list-style:none;margin:0;padding:0}
.journey .step h3{margin-top:30px}
.journey .step h3 a{color:inherit;text-decoration:none}
.journey .step h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.journey__kind{position:absolute;top:26px;left:34px;font:700 12px var(--font-label);letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ink-faint)}

/* 404 page: a {404} mark in the logo's braces (20 Oct 2026 feedback) */
.nf-mark{display:flex;align-items:center;gap:.12em;margin-bottom:28px;
  font:900 clamp(64px,11vw,128px)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.nf-mark svg{height:1.05em;width:auto;aspect-ratio:90.3/308;fill:var(--accent,#5145A1);flex:none}
.nf-fact{color:var(--ink-faint);font-size:.92em}

/* Turnstile human check: empty (and taking no room) unless Cloudflare asks for a click */
.form__human:empty{display:none}
.form__human > *{margin-top:14px}