/* ==========================================================================
   Ucanly — Global IT Services
   Enterprise minimal: square corners, no shadows, structure from 1px rules.
   Nothing on this site floats. Depth is expressed with borders and whitespace,
   never with a drop shadow — that is what separates the large-firm register
   from a consumer product page.
   Mobile-first. Breakpoints: 640 / 900 / 1024 / 1200.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ink:     #0b1020;
  --ink-2:   #141a2e;
  --ink-3:   #1e2740;

  /* Two blues, deliberately kept apart — do not merge them.
     --brand is the Ucanly logo's own colour and is used ONLY by the mark.
     --blue is IBM Blue, used by every button, link and icon as the visual
     tie-in to the IBM Silver Business Partner status.
     There is deliberately NO third accent colour. The palette is monochrome
     plus one blue; that restraint is the point. */
  --brand:   #0a4dff;
  --blue:    #0f62fe;
  --blue-d:  #0043ce;
  --cyan:    #4589ff;

  --paper:   #ffffff;
  --paper-2: #f4f4f4;
  --paper-3: #e8e8e8;
  --line:    #dcdee3;
  --line-2:  #c6c9d0;                     /* hover border, replaces the lift */
  --line-d:  rgba(255, 255, 255, .16);
  --line-d2: rgba(255, 255, 255, .34);

  --text:    #15192b;
  --muted:   #545a6d;
  --muted-d: #a7aec4;

  /* Square by default. 2px survives only on form inputs, so a field still
     reads as a field rather than as a bare rectangle. */
  --r-card: 0;
  --r-btn:  0;
  --r-sm:   2px;

  --wrap:   1280px;
  --gutter: 32px;

  /* Kept as tokens so any stray reference resolves to nothing rather than
     reintroducing a shadow. */
  --sh-1: none;
  --sh-2: none;
  --sh-3: none;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Offset in-page anchors so the sticky header doesn't cover the heading */
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); font-weight: 600; letter-spacing: -.035em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1rem; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); }

img, svg { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

address { font-style: normal; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Every icon inherits currentColor and uses stroke-based line art */
.ic {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 0;
}
.skip:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Grid and flex children default to min-width:auto, so intrinsically wide
   content (the inline SVG artwork, long unbreakable headings) can push a
   track wider than the viewport. Reset it wherever we lay out tracks. */
.hero__in > *, .split > *, .ibm-band__in > *, .contact-grid > *,
.mega__in > *, .stats__grid > *, .grid > *, .steps > *,
.hdr__in > *, .utility__in > *, .chip-grid > * { min-width: 0; }

/* Generous section rhythm. Whitespace is doing more work here than any single
   component: it is the main reason the page reads as an established firm. */
.sec { padding: 84px 0; }
.sec--tight { padding: 56px 0; }
.sec--alt  { background: var(--paper-2); }
.sec--dark { background: var(--ink); color: #fff; }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark p { color: var(--muted-d); }

@media (min-width: 900px) {
  .sec { padding: 136px 0; }
  .sec--tight { padding: 72px 0; }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--blue);
  flex: none;
}
.eyebrow--c { justify-content: center; }
.sec--dark .eyebrow, .hero .eyebrow, .phead .eyebrow, .cta .eyebrow, .ibm-band .eyebrow {
  color: var(--muted-d);
}
.sec--dark .eyebrow::before, .hero .eyebrow::before, .phead .eyebrow::before,
.cta .eyebrow::before, .ibm-band .eyebrow::before { background: var(--cyan); }

.sec__head { max-width: 760px; margin-bottom: 60px; }
.sec__head--c { margin-inline: auto; text-align: center; }
.sec__head--c .eyebrow { justify-content: center; }
.sec__head p { color: var(--muted); font-size: 1.06rem; }
.sec--dark .sec__head p { color: var(--muted-d); }

.lead { font-size: 1.12rem; color: var(--muted); }

/* --------------------------------------------------------------- buttons */
/* Square, generously padded, no lift on hover. The arrow nudge carries the
   interaction instead — a Carbon idiom and the only motion these need. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn .ic { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.btn:hover .ic { transform: translateX(5px); }

.btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--primary:hover { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--text); color: var(--text); background: var(--paper-2); }

.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--paper-2); border-color: var(--paper-2); color: var(--ink); }

.btn--outline-light { background: transparent; color: #fff; border-color: var(--line-d2); }
.btn--outline-light:hover { background: rgba(255,255,255,.09); border-color: #fff; color: #fff; }

.btn--sm { padding: 11px 20px; font-size: .88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--c { justify-content: center; }

.lnk {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: .92rem; color: var(--blue);
}
.lnk .ic { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.lnk:hover .ic { transform: translateX(4px); }
.sec--dark .lnk { color: var(--cyan); }

/* ---------------------------------------------------------- utility bar */
.utility {
  background: var(--ink);
  color: var(--muted-d);
  font-size: .8rem;
  border-bottom: 1px solid var(--line-d);
}
.utility__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.utility__badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  white-space: nowrap;
}
.utility__badge .dot {
  width: 6px; height: 6px; border-radius: 0;
  background: var(--cyan);
  flex: none;
}
.utility__right { display: none; align-items: center; gap: 22px; }
.utility__right a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-d); }
.utility__right a:hover { color: #fff; }
.utility__right .ic { width: 1em; height: 1em; }

@media (min-width: 900px) { .utility__right { display: flex; } }

/* -------------------------------------------------------------- header */
/* NOTE: no backdrop-filter here at mobile widths. backdrop-filter makes an
   element the containing block for its fixed-position descendants, which
   would trap the full-screen mobile nav panel inside the header box. The
   frosted effect is re-applied at >=1024px, where .nav is no longer fixed. */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
/* Scrolled state darkens the rule instead of casting a shadow. */
.hdr.is-stuck { border-bottom-color: var(--line-2); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 13px; color: var(--text); }
.brand:hover { color: var(--text); }

/* The mark is 4:5 portrait (256x320), NOT square. Drive it from height and let
   width follow, or it renders squashed. A bare glyph also carries more optical
   weight than the boxed icon this replaced, so it sits a little shorter. */
.brand__mark { height: 30px; width: auto; flex: none; display: block; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__txt strong { font-size: 1.2rem; font-weight: 600; letter-spacing: -.03em; }
.brand__txt em {
  font-family: var(--font-mono); font-style: normal;
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.brand--light { color: #fff; }
.brand--light:hover { color: #fff; }
.brand--light em { color: var(--muted-d); }

/* nav — mobile: slide-down panel; desktop: inline row */
.nav {
  position: fixed; inset: 110px 0 0;
  background: var(--paper);
  padding: 8px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__list { display: flex; flex-direction: column; }
.nav__item { border-bottom: 1px solid var(--line); }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 16px 2px;
  background: none; border: 0;
  font-size: 1.05rem; font-weight: 500; color: var(--text);
  text-align: left;
}
.nav__link.is-active { color: var(--blue); }
.caret { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.nav__toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav__item--cta { border: 0; padding-top: 22px; }
.nav__item--cta .btn { width: 100%; justify-content: center; padding: 14px 24px; font-size: .95rem; }

.mega { padding-bottom: 14px; }
.mega__lead { display: none; }
.mega__grid { display: grid; gap: 2px; }
.mega__grid a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 2px;
  color: var(--muted); font-size: .93rem;
}
.mega__grid a:hover { color: var(--blue); }
.mega__grid .ic { color: var(--blue); }

.burger {
  display: grid; gap: 5px; place-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.burger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 0; transition: transform .22s var(--ease), opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  /* Safe here — the nav is static at this width, so nothing fixed is trapped. */
  .hdr {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
  }
  .burger { display: none; }
  .nav {
    position: static; inset: auto;
    padding: 0; overflow: visible;
    opacity: 1; visibility: visible; transform: none;
    background: none;
  }
  .nav__list { flex-direction: row; align-items: center; gap: 4px; }
  .nav__item { border: 0; }
  /* The underline anchors to the link itself. .nav__item is deliberately left
     static so .mega resolves against .hdr (sticky, therefore positioned) and
     can span the full viewport width rather than the width of one nav item. */
  .nav__link { padding: 24px 14px; font-size: .93rem; font-weight: 400; width: auto; position: relative; }
  .nav__link::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 18px;
    height: 2px; background: var(--blue);
    transform: scaleX(0); transform-origin: left;
    transition: transform .22s var(--ease);
  }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
  .nav__item--cta { padding: 0 0 0 12px; }
  .nav__item--cta .btn { width: auto; }

  /* full-width mega panel anchored under the header */
  .mega {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .mega__in { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; padding-block: 44px; }
  .mega__lead { display: block; }
  .mega__lead h3 { margin-bottom: .5rem; }
  .mega__copy { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
  .mega__grid { grid-template-columns: repeat(2, 1fr); gap: 6px 28px; }
  .mega__grid a { padding: 12px; border-radius: 0; }
  .mega__grid a:hover { background: var(--paper-2); }
}

/* ----------------------------------------------------------------- hero
   Deep ink with a lit planet behind the type. The content column is an
   explicit BLOCK, never a grid: a stale cached stylesheet with a grid rule
   would otherwise scatter these children across columns. Stating display
   here makes the layout immune to that. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding: 88px 0 96px;
}

/* ---- decorative sky ---------------------------------------------------
   The planet is artwork, not UI, so it is allowed to be round. Everything
   here is drawn with gradients rather than shadows, which keeps the
   "nothing floats" rule intact. */
.hero__sky {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.hero__glow, .hero__planet, .hero__ring {
  position: absolute;
  display: block;
}
/* Only the CSS-drawn layers need rounding; the planet is an SVG whose own
   geometry is already circular, and a border-radius there would clip the
   rim glow that deliberately sits outside the disc. */
.hero__glow, .hero__ring { border-radius: 50%; }
/* Wide atmospheric halo. Every layer fades to fully transparent rather than
   to a colour, so the sphere dissolves into the background instead of
   showing a hard circular edge. */
.hero__glow {
  width: 1150px; aspect-ratio: 1;
  right: -330px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle,
    rgba(51, 106, 232, .17) 0%,
    rgba(41, 88, 205, .09) 32%,
    rgba(24, 56, 150, .035) 52%,
    transparent 70%);
}
/* The body. Generated SVG (includes/hero-planet.php): cratered surface with a
   faint node network. The viewBox is 900 wide but the disc is only 600 of
   that, so the box is sized 1.5x the intended planet diameter and the extra
   is transparent margin for the rim glow. Opacity, not colour, controls how
   present it feels — the artwork itself stays fully saturated. */
.hero__planet {
  width: 900px; aspect-ratio: 1;
  right: -270px; top: 50%;
  transform: translateY(-50%);
  opacity: .82;
}
/* A faint orbit line, well outside the body. Reads as depth, not decoration. */
.hero__ring {
  width: 880px; aspect-ratio: 1;
  right: -260px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid rgba(120, 160, 245, .09);
}

.hero__in { display: block; position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: 1.4rem; max-width: 15ch; }
.hero__copy { font-size: 1.16rem; color: #cbd2e6; max-width: 48ch; margin-bottom: 2.6rem; line-height: 1.7; }

/* The IBM partner mark sits below a hairline, deliberately understated. */
.hero__note {
  margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid var(--line-d);
  max-width: 420px;
}
.hero__note p {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-d);
}

/* Below 900px the planet would sit under the text and hurt contrast, so it
   moves up and back until there is room for it. */
@media (max-width: 899px) {
  /* Box is 1.5x the disc, so the offsets account for the transparent margin. */
  .hero__planet { width: 570px; right: -235px; top: 14%; opacity: .5; }
  .hero__ring   { width: 520px; right: -210px; top: 15%; opacity: .5; }
  .hero__glow   { width: 640px; right: -240px; top: 15%; }

  /* The turbulence filter is by far the most expensive thing to rasterise
     and its grain is invisible at this size. Drop it on small screens. */
  .hero__planet-noise { display: none; }
}

@media (min-width: 900px) {
  .hero { padding: 136px 0; }
  .hero__in { max-width: 54%; }
  .hero__copy { font-size: 1.22rem; }
}
@media (min-width: 1400px) {
  .hero__planet { width: 1050px; right: -265px; }
  .hero__ring   { width: 1000px; right: -240px; }
  .hero__glow   { width: 1300px; right: -300px; }
}

/* ----------------------------------------------------- stats / counters */
.stats { border-bottom: 1px solid var(--line); background: var(--paper); }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat { padding: 30px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-child(n+3) { border-bottom: 0; }
.stat__n {
  font-family: var(--font-mono); font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1;
}
.stat__l { margin: .6rem 0 0; font-size: .86rem; color: var(--muted); }

@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 40px 26px; border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
}

/* --------------------------------------------------------- IBM mark/band
   Official IBM Partner Plus artwork, converted from the PartnerWorld .ai to
   true vector SVG. The artwork is unaltered; only the empty transparent
   canvas it shipped with has been trimmed, so the mark sits FLUSH with the
   text column beside it (aspect ratio 1.78:1).

   IBM's guidelines v1.4 require clear space equal to the height of the "I"
   in the 8-bar logo. That rule governs separation from other VISUAL
   ELEMENTS, not from a column edge, so it is enforced here as vertical
   margin against the text above and below rather than as baked-in padding.
   The ratio below is ~0.6x the mark height, which clears the requirement.

   These heights are now the VISIBLE mark height. IBM's web minimum is 32px:
   never set any of them lower. */
.ibm-mark { display: block; margin: 26px 0 0; }
.ibm-mark__img {
  display: block;
  height: 44px;          /* visible mark height */
  width: auto; max-width: 100%;
}
.ibm-mark__fallback {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.4;
  padding: 12px 18px;
  border: 1px solid var(--line);
  color: var(--text);
}
.ibm-mark--light .ibm-mark__fallback { border-color: var(--line-d); color: #fff; }

.ibm-mark--sm { margin-top: 24px; }
.ibm-mark--sm .ibm-mark__img { height: 38px; }   /* above IBM's 32px floor */
.ibm-mark--lg { margin-top: 32px; }
.ibm-mark--lg .ibm-mark__img { height: 52px; }

.ibm-band { background: var(--ink-2); color: #fff; }
.ibm-band__in { display: grid; gap: 48px; align-items: start; }
.ibm-band h2 { color: #fff; }
.ibm-band__copy { color: #cbd2e6; }
.ibm-band__pts { display: grid; gap: 16px; margin: 32px 0; }
.ibm-band__pts li { display: flex; gap: 14px; align-items: flex-start; font-size: .96rem; color: #cbd2e6; }
.ibm-band__pts .ic { color: var(--cyan); margin-top: 3px; }

@media (min-width: 900px) { .ibm-band__in { grid-template-columns: 1.15fr .85fr; gap: 80px; } }

/* ---------------------------------------------------------------- cards */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Cards are rules, not objects. Hover darkens the border and moves the link
   arrow; nothing lifts off the page. */
.card {
  display: flex; flex-direction: column;
  padding: 34px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.card:hover { border-color: var(--line-2); background: var(--paper-2); }
.card h3 { margin-bottom: .6rem; color: var(--text); font-size: 1.12rem; }
.card p { color: var(--muted); font-size: .94rem; }
.card__ic {
  display: grid; place-content: center;
  width: 40px; height: 40px; margin-bottom: 24px;
  border-radius: 0;
  background: none;
  color: var(--blue);
  margin-left: -2px;
}
.card__ic .ic { width: 30px; height: 30px; stroke-width: 1.4; }
.card .lnk { margin-top: auto; padding-top: 22px; }

/* link-card: whole tile is one anchor */
a.card { color: inherit; }
a.card:hover { color: inherit; }

/* card variant for use inside .sec--dark */
.card--onDark { background: transparent; border-color: var(--line-d); }
.card--onDark h3 { color: #fff; }
.card--onDark p { color: var(--muted-d); }
.card--onDark .card__ic { background: none; color: var(--cyan); }
.card--onDark:hover { background: rgba(255, 255, 255, .03); border-color: var(--line-d2); }

/* --------------------------------------------------------- split layout */
.split { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 70px; }
  .split--wide { grid-template-columns: 1.1fr .9fr; }
  .split--flip .split__art { order: -1; }
}
.split__art svg { display: block; width: 100%; height: auto; border-radius: 0; }

.checks { display: grid; gap: 16px; margin-top: 26px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks .ic { color: var(--blue); margin-top: 3px; }
.checks strong { display: block; font-weight: 600; margin-bottom: 2px; }
.checks span { color: var(--muted); font-size: .93rem; }
.sec--dark .checks span { color: var(--muted-d); }
.sec--dark .checks .ic { color: var(--cyan); }

/* -------------------------------------------------------------- process */
.steps { display: grid; gap: 26px; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

.step { position: relative; padding-top: 26px; border-top: 1px solid var(--line); }
.step__n {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  color: var(--blue); letter-spacing: .14em; margin-bottom: 16px;
}
.step h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: .93rem; }
.sec--dark .step { border-top-color: var(--line-d); }
.sec--dark .step__n { color: var(--cyan); }
/* --muted is tuned for light backgrounds and only reaches 2.76:1 on --ink.
   .step p is more specific than the generic `.sec--dark p` rule, so it needs
   its own dark-section override or the step copy is unreadable. */
.sec--dark .step p { color: var(--muted-d); }

/* ------------------------------------------------------------- outcomes */
.outcome { display: flex; flex-direction: column; padding: 34px 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); }
.outcome__n {
  font-family: var(--font-mono); font-size: 2.5rem; font-weight: 500;
  letter-spacing: -.04em; color: var(--blue); line-height: 1; margin-bottom: 8px;
}
.outcome__k { font-size: .85rem; color: var(--muted); margin-bottom: 22px; }
.outcome p { font-size: .95rem; color: var(--text); margin-bottom: 22px; }
.outcome__src {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--muted);
}

/* ------------------------------------------------------------- industry */
.ind-tile {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 28px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper); color: var(--text);
  font-weight: 500;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.ind-tile:hover { border-color: var(--line-2); background: var(--paper-2); color: var(--blue); }
.ind-tile > .ic { width: 26px; height: 26px; color: var(--blue); stroke-width: 1.4; }
.ind-tile__go { margin-left: auto; width: 1.1em; height: 1.1em; color: var(--muted); transition: transform .24s var(--ease); }
.ind-tile:hover .ind-tile__go { transform: translateX(5px); color: var(--blue); }

/* ------------------------------------------------------------- insights */
.post { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--paper); transition: border-color .2s var(--ease); }
.post:hover { border-color: var(--line-2); }
.post__art { aspect-ratio: 16 / 9; background: var(--paper-3); }
.post__art svg { display: block; width: 100%; height: 100%; }
.post__body { padding: 28px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.post__tag { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.post h3 { font-size: 1.08rem; color: var(--text); margin-bottom: .5rem; }
.post p { color: var(--muted); font-size: .92rem; }
.post .lnk { margin-top: auto; padding-top: 18px; }

/* ------------------------------------------------------------ accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 20px 2px;
  background: none; border: 0; text-align: left;
  font-size: 1rem; font-weight: 500; color: var(--text);
}
.acc__btn:hover { color: var(--blue); }
.acc__sign { position: relative; width: 16px; height: 16px; flex: none; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: currentColor; border-radius: 0;
  transition: transform .24s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: rotate(0deg); }
.acc__panel { padding: 0 2px 22px; color: var(--muted); font-size: .95rem; max-width: 68ch; }
.acc__panel[hidden] { display: none; }

/* ---------------------------------------------------------- page header */
.phead {
  background:
    radial-gradient(760px 420px at 84% -10%, rgba(15, 98, 254, .14), transparent 66%),
    var(--ink);
  color: #fff;
  padding: 72px 0 78px;
}
.phead h1 { color: #fff; max-width: 18ch; }
.phead p { color: #cbd2e6; max-width: 62ch; font-size: 1.08rem; }
.crumbs { font-size: .82rem; color: var(--muted-d); margin-bottom: 26px; }
.crumbs a { color: var(--muted-d); }
.crumbs a:hover { color: #fff; }
.crumbs span { padding: 0 8px; opacity: .5; }

@media (min-width: 900px) { .phead { padding: 108px 0 116px; } }

/* -------------------------------------------------------- service block */
.svc { padding: 72px 0; border-bottom: 1px solid var(--line); }
.svc:last-of-type { border-bottom: 0; }
.svc__head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.svc__head .card__ic { margin: 0; }
.svc__head h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.svc__caps { display: grid; gap: 13px; margin-top: 26px; }
@media (min-width: 640px) { .svc__caps { grid-template-columns: repeat(2, 1fr); } }
.svc__caps li { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--muted); }
.svc__caps .ic { color: var(--blue); margin-top: 3px; width: 1.05em; height: 1.05em; }

.ibm-tie {
  margin-top: 30px; padding: 20px 24px;
  border-left: 2px solid var(--blue);
  background: var(--paper-2);
  border-radius: 0;
  font-size: .92rem; color: var(--muted);
}
.ibm-tie strong { color: var(--text); }

/* --------------------------------------------------------------- tables */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .92rem; }
.tbl th, .tbl td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-weight: 600; background: var(--paper-2); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tbl td strong { color: var(--text); }

/* -------------------------------------------------------------- offering */
.chip-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }

/* Fixed-column variant. auto-fill picks the column count from the available
   width, which leaves a ragged part-filled last row whenever the item count
   is not a multiple of it (8 services became 5 + 3). Pinning the columns to a
   factor of the item count keeps the block a clean rectangle.
   --4 is for the 8 service chips: 4 x 2 on desktop, 2 x 4 on tablet. */
.chip-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .chip-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .chip-grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* The chip always has a white background, but it is used inside dark sections
   (.ibm-band) as well as light ones. It must therefore state its own text
   colour: inheriting `color` from a dark parent renders the titles white on
   white and makes them vanish entirely. */
.chip {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 22px 24px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--text);
  transition: background .2s var(--ease);
}
a.chip { color: var(--text); }
a.chip:hover { background: var(--paper-2); color: var(--blue); }
.chip .ic { color: var(--blue); margin-top: 1px; width: 1.15em; height: 1.15em; flex: none; stroke-width: 1.4; }
.chip > div { min-width: 0; }
.chip strong { display: block; font-size: .93rem; font-weight: 600; line-height: 1.35; color: inherit; }
.chip span { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------------- timeline */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl__item { position: relative; padding-bottom: 40px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before {
  content: ""; position: absolute; left: -30px; top: 5px;
  width: 9px; height: 9px; border-radius: 0;
  background: var(--blue);
}
.tl__y { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); letter-spacing: .16em; margin-bottom: 8px; }
.tl__item h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.tl__item p { color: var(--muted); font-size: .93rem; }

/* --------------------------------------------------------------- people */
.person { padding: 32px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.person__av {
  width: 52px; height: 52px; margin: 0 0 20px;
  border-radius: 0;
  background: var(--blue);
  display: grid; place-content: center;
  color: #fff; font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: .04em;
}
.person h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.person__role { font-size: .8rem; color: var(--muted); margin-bottom: .9rem; font-family: var(--font-mono); letter-spacing: .06em; }
.person p { font-size: .88rem; color: var(--muted); }

/* ----------------------------------------------------------------- CTA */
.cta { background: var(--ink); color: #fff; text-align: center; }
.cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta p { color: #cbd2e6; max-width: 56ch; margin: 0 auto 34px; font-size: 1.06rem; }

/* ---------------------------------------------------------------- forms */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.35fr .65fr; gap: 60px; align-items: start; } }

.form-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
@media (min-width: 640px) { .form-card { padding: 42px; } }

.fgrid { display: grid; gap: 18px; }
@media (min-width: 640px) { .fgrid--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .87rem; font-weight: 500; }
.field .req { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--paper);
  /* 2px is the one radius that survives, so a field still reads as a field */
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23545a6d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 11px;
  padding-right: 40px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, .15);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #da1e28;
}
.field__err { font-size: .8rem; color: #da1e28; min-height: 0; }
.field__err:empty { display: none; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .86rem; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--blue); }

/* honeypot — off-screen, never shown to real users */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 20px; margin-bottom: 26px;
  border-radius: 0; font-size: .93rem;
  border: 1px solid transparent; border-left-width: 3px;
}
.alert .ic { margin-top: 2px; }
.alert--ok  { background: #defbe6; border-color: #a7f0ba; border-left-color: #24a148; color: #0e6027; }
.alert--err { background: #fff1f1; border-color: #ffd7d9; border-left-color: #da1e28; color: #a2191f; }

.info-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper-2); }
.info-card + .info-card { margin-top: 20px; }
.info-card h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.info-list { display: grid; gap: 18px; }
.info-list li { display: flex; gap: 13px; align-items: flex-start; font-size: .93rem; }
.info-list .ic { color: var(--blue); margin-top: 3px; }
.info-list strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 3px; font-weight: 500; }
.info-list a { color: var(--text); }
.info-list a:hover { color: var(--blue); }

/* --------------------------------------------------------------- footer */
.ftr { background: var(--ink); color: var(--muted-d); padding: 80px 0 0; font-size: .92rem; }
.ftr__top { display: grid; gap: 48px; padding-bottom: 64px; }
@media (min-width: 640px) { .ftr__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ftr__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 56px; } }

.ftr__blurb { margin-top: 22px; max-width: 42ch; color: var(--muted-d); font-size: .9rem; }
.ftr__ibm { margin-top: 30px; }

/* AmbitionBox employee-ratings badge. Remote image, so width/height are set
   on the element to reserve space and stop the footer jumping when it loads. */
.ab-badge { display: block; margin-top: 26px; }
.ab-badge img { display: block; width: 100%; max-width: 292px; height: auto; }
/* A class-level `display` beats the UA stylesheet's [hidden] rule, so without
   this the JS fallback would mark the link hidden and still leave its space. */
.ab-badge[hidden] { display: none; }
.ftr__social { display: flex; gap: 10px; margin-top: 26px; }
.ftr__social a {
  display: grid; place-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-d); border-radius: 0;
  color: var(--muted-d);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ftr__social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.ftr__social .ic { width: 18px; height: 18px; }

.ftr__col h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--font-mono); font-weight: 500; }
.ftr__col ul { display: grid; gap: 11px; }
.ftr__col a { color: var(--muted-d); font-size: .9rem; }
.ftr__col a:hover { color: #fff; }

.ftr__contact li { display: flex; gap: 12px; align-items: flex-start; }
.ftr__contact .ic { color: var(--cyan); margin-top: 3px; }
.ftr__contact address { color: var(--muted-d); font-size: .88rem; line-height: 1.6; }
.ftr__hours { margin-top: 16px; font-size: .82rem; color: var(--muted-d); opacity: .8; }

.ftr__bar { border-top: 1px solid var(--line-d); padding: 24px 0 34px; }
.ftr__bar p { margin: 0; font-size: .84rem; }
/* Lightened from #6f7794, which measured 4.28:1 on --ink and missed AA. This
   is legally required attribution, so it has to be genuinely readable even
   though it is meant to sit quietly. */
.ftr__tm { margin-top: 12px !important; font-size: .74rem; line-height: 1.6; color: #7c85a3; max-width: 96ch; }

/* ------------------------------------------------------------ animation */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- utilities */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: 26px; }
.mt-4 { margin-top: 38px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.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;
}