/* =============================================================================
   The UAE sub-service template — every /en-ae/services/<service>/<sub>/

   The stylesheet behind SubServiceTemplateBody.tsx. It was written for one
   page, /accounting-tax-services/accounting-bookkeeping/, and every sub-service
   took that page's UI on client instruction (20260910), so the thirty-three
   pages share it; the `abk-` prefix is that history. It is a real file rather
   than a <style> block in the component (which is how the service template
   carries its CSS) because the page was asked for with its stylesheet kept
   separate — so it is linked from <head> like valunxt-brand.css and
   valunxt-landing.css are, and the browser can cache it independently of the
   HTML.

   ---------------------------------------------------------------------------
   WHY EVERY SELECTOR STARTS WITH `.abk-root`

   Not for tidiness — for the cascade. The theme styles bare tags through the
   Elementor kit, e.g. `.elementor-kit-5 h1 { font-size: … }`, which is
   specificity (0,1,1). A flat `.abk-hero__title` is (0,1,0) and LOSES to it,
   however late this sheet loads. Measured, not assumed: the first pass of this
   file set the hero title to clamp(42px,6.2vw,90px) and the browser computed
   46px, the kit's h1 size, all the way down the page.

   Prefixing makes every rule (0,2,x), which clears the kit and keeps the
   namespace honest at the same time — nothing here can reach an element outside
   this one page, including the header and footer wrapped around it.

   `!important` appears in three places only: the heading font sizes and line
   heights, because valunxt-brand.css sets those with `!important` of its own
   under 767px, and the hero's padding, which has to beat this file's own
   `section` rule. Nowhere is it used as a shortcut around specificity.

   ---------------------------------------------------------------------------
   SECTION ORDER (matches SubServiceTemplateBody.tsx)

     1  .abk-hero    full-bleed plate, copy at the foot, progressive blur rising
                     out of the bottom edge
     2  .abk-brief   the editorial column and the blue panel beside it
     3  .abk-why     wide picture band with a frosted card floated on it
     4  .abk-appr    rule, eyebrow, three columns
     5  .abk-ins     the insights rail          6  .abk-case    the success story
     7  .abk-band    the band                   8  .abk-vision  focus and vision
     9  the strip (HomeIndustriesRow, styled in valunxt-brand.css)
    10  .abk-talk    the parent service's close, restated

   ---------------------------------------------------------------------------
   MOTION. Hover states change colour and light, never position. The reveal
   animation's default is VISIBLE: the hidden state exists only under
   [data-anim='pending'], an attribute Motion.tsx sets at runtime, so a blocked
   or failed bundle leaves a fully readable page rather than an empty one.
   ============================================================================= */

.abk-root {
  /* ---- Palette. The two colours the brief supplied, plus the neutrals the
     rest of the UAE section already uses so this page sits with its siblings
     rather than beside them. ------------------------------------------------ */
  --blue: #0b2dbe;
  --brand: linear-gradient(150deg, #0e3fa8 0%, #1436d8 48%, #0b2dbe 100%);
  --navy: #0e355f;
  --ink: #111a2b;
  --body: #4d5863;
  --muted: #6a7590;
  --line: rgba(14, 53, 95, 0.13);
  --tint: #f4f8fd;

  /* ---- One spacing scale for the whole page. Every section reads these, so
     no two bands can drift out of step.

     --pad is 40px because that is the UAE services house rule the parent page
     and ServicePageBody both follow; the extra air the design wants is bought
     inside the sections (see --headgap) rather than by making this page's
     bands taller than its neighbours'. ------------------------------------- */
  --pad: 40px;
  /* Matched to the UAE home page by request. That page runs a 1520px measure
     with `--vxn-gutter: clamp(16px, 4vw, 48px)` (see the .vxn-ae-home block in
     valunxt-landing.css); this page was 1280/24, so the two sections did not
     line up down their left edges when a visitor moved between them. */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1520px;
  --gap: 24px;
  --headgap: 52px;
  --radius: 16px;

  background: #fff;
  color: var(--body);
}

/* border-box across the page. Without it --maxw sets the CONTENT box and the
   gutter is added outside it, so two things that declare the same width do not
   actually share an edge. */
.abk-root,
.abk-root *,
.abk-root *::before,
.abk-root *::after {
  box-sizing: border-box;
}

.abk-root section {
  padding: var(--pad) 0;
}

/* The one container. Every band on the page uses it or copies it exactly.

   THE GUTTER IS SUBTRACTED FROM THE MEASURE, not padded inside it — this is
   the UAE home page's own formula (`.vxn-ae-home .vxn-impact__card` et al in
   valunxt-landing.css) and copying the number without copying the formula is
   what left the two pages misaligned.

   Padding inside a 1520 box centres the BOX and then insets the content, so at
   a 1600 viewport the copy began at 81px. Subtracting the gutter from the
   max-width centres the CONTENT, which begins at 48px — where the home page's
   does. Measured both ways at 1600 before settling on this. */
.abk-root .abk-in {
  width: 100%;
  max-width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: 0;
}

/* =============================================================================
   1. HERO
   ============================================================================= */

/* A banner, not a band: its height comes from min-height and the copy hangs off
   the bottom, so `section`'s 40px is overridden here — the space under the last
   line is the blur band's business instead. */
.abk-root .abk-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(500px, 72vh, 680px);
  padding: clamp(96px, 14vh, 150px) 0 clamp(104px, 15vh, 158px) !important;
  overflow: hidden;
  background: #07142f;
}

.abk-root .abk-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* --abk-z and --abk-p are written by Motion.tsx while the plate is on screen:
   the scale drifts out and back as the banner crosses the viewport, so the
   artwork moves against the scroll while the copy over it stays put. Both
   default to a no-op here, which is what a JS-less reader gets. */
.abk-root .abk-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  transform: scale(var(--abk-z, 1)) translate3d(0, calc(var(--abk-p, 0) * 16px), 0);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Two scrims in one paint: a wash from the left so the copy has a dark ground
   whatever the photograph is doing under it, and a light lift from the foot so
   the blur band below has something to dissolve into. */
.abk-root .abk-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(4, 14, 36, 0.82) 0%,
      rgba(4, 14, 36, 0.58) 36%,
      rgba(4, 14, 36, 0.2) 66%,
      rgba(4, 14, 36, 0) 92%
    ),
    linear-gradient(to top, rgba(4, 14, 36, 0.42) 0%, rgba(4, 14, 36, 0) 42%);
}

/* ---- THE BLUR FROM THE BOTTOM -------------------------------------------
   Four stacked backdrop-filters, each masked to start lower than the one
   before it. Because they stack, the blur the reader sees ramps smoothly from
   nothing at the top of the band to 22px at the bottom edge — a single
   backdrop-filter with a mask cannot do that, it can only fade one strength
   in and out.

   The band sits UNDER the copy in the z-order but the hero's bottom padding
   keeps the copy clear of it, so the text is never the thing being blurred. */
.abk-root .abk-hero__blur {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: clamp(150px, 24%, 230px);
  pointer-events: none;
}

.abk-root .abk-hero__blur i {
  position: absolute;
  inset: 0;
  display: block;
}

.abk-root .abk-hero__blur i:nth-child(1) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 24%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 24%);
}

.abk-root .abk-hero__blur i:nth-child(2) {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 22%, #000 47%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 22%, #000 47%);
}

.abk-root .abk-hero__blur i:nth-child(3) {
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, #000 70%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, #000 70%);
}

.abk-root .abk-hero__blur i:nth-child(4) {
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 68%, #000 92%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 68%, #000 92%);
}

/* The light the blur dissolves into, so the banner hands over to the white
   section under it instead of stopping at a hard horizontal edge. A gradient,
   not a solid: on a browser with no backdrop-filter this alone still reads as
   a soft foot rather than as nothing at all. */
.abk-root .abk-hero__wash {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: clamp(150px, 24%, 230px);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 42%,
    rgba(255, 255, 255, 0.22) 74%,
    rgba(255, 255, 255, 0.6) 100%
  );
}

/* Same measure as .abk-in, so the hero's copy starts on the same vertical line
   as every section under it. */
.abk-root .abk-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: 0;
}

/* One column since the call to action was removed. */
.abk-root .abk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.abk-root .abk-hero__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.abk-root .abk-hero__crumb a {
  color: rgba(255, 255, 255, 0.62) !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.abk-root .abk-hero__crumb a:hover {
  color: #fff !important;
}

.abk-root .abk-hero__crumb span[aria-hidden] {
  opacity: 0.5;
}

/* Light — 300 — where the rest of the section's headings run heavier. The
   reference sets the page title thin at display size and the difference is
   the whole character of the banner. (It was a change of family as well once,
   a sans against the section's serif; the market runs one face now.)

   font-size and line-height carry `!important` because valunxt-brand.css sets
   `h1 { font-size: 30px !important }` under 767px; without it the title would
   collapse to the site default on every phone. */
.abk-root .abk-hero__title {
  margin: 0 0 24px;
  font-size: clamp(42px, 6.2vw, 62px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.022em;
  color: #fff !important;
}

.abk-root .abk-hero__lede {
  max-width: 50%;
  margin: 0;
  font-size: clamp(13.5px, 1.02vw, 15.5px);
  font-weight: 400;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.86) !important;
}

/* =============================================================================
   2. THE BRIEF — editorial column, blue panel
   ============================================================================= */

.abk-root .abk-brief {
  padding-top: clamp(48px, 6vw, 76px) !important;
}

.abk-root .abk-brief__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 76px);
}

.abk-root .abk-brief__copy p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--body) !important;
}

.abk-root .abk-brief__copy p:last-child {
  margin-bottom: 0;
}

.abk-root .abk-brief__copy em {
  font-style: italic;
}

/* Two columns of points, as the reference sets them. `gap` carries the whole
   rhythm — no margins on the items, so the two lists cannot drift apart. */
.abk-root .abk-brief__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 44px;
  margin: 6px 0 28px;
  padding: 0;
  list-style: none;
}

.abk-root .abk-brief__list li {
  position: relative;
  padding-left: 18px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--body);
}

/* A drawn dot rather than list-style, so it lines up with the first line's
   x-height at every font size instead of wherever the browser puts a marker. */
.abk-root .abk-brief__list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* The one blue dot the service pages use (20260911); was the navy. */
  background: #0B2DBE;
}

.abk-root .abk-brief__list b {
  font-weight: 600;
  color: var(--ink);
}

.abk-root .abk-brief__list u {
  text-decoration: underline;
  text-decoration-color: rgba(14, 53, 95, 0.38);
  text-underline-offset: 2px;
}

/* ---- The panel ----------------------------------------------------------- */

.abk-root .abk-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1.02;
  min-height: 380px;
  margin: 0;
  padding: clamp(20px, 2.2vw, 30px);
  overflow: hidden;
  border-radius: 6px;
  background: var(--blue);
}

.abk-root .abk-panel__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.abk-root .abk-panel__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--abk-z, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The supplied ramp laid over the plate, so the panel is the brand blue rather
   than whatever blue the artwork happens to be.

   THE RAMP IS DELIBERATELY THIN. The first pass ran it at .5–.8 alpha over the
   whole plate and the result was a flat rectangle of paint: the artwork's folds
   were still there but every one of them had been averaged into the same
   colour. At .28–.42 the ramp tints without covering, so the plate keeps the
   light that makes it read as a surface. What does the work instead is the
   third layer — a settle at the foot, dark enough for the title and its line of
   copy to sit on the picture rather than fight it. */
.abk-root .abk-panel__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(118% 82% at 72% 24%, rgba(120, 175, 255, 0.34), rgba(6, 20, 90, 0) 64%),
    linear-gradient(150deg, rgba(14, 63, 168, 0.42) 0%, rgba(20, 54, 216, 0.28) 48%, rgba(11, 45, 190, 0.5) 100%),
    linear-gradient(to top, rgba(4, 14, 60, 0.82) 0%, rgba(4, 14, 60, 0.12) 46%, rgba(4, 14, 60, 0) 66%);
}

.abk-root .abk-panel__top,
.abk-root .abk-panel__foot {
  position: relative;
  z-index: 2;
}

.abk-root .abk-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.abk-root .abk-panel__mark {
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

.abk-root .abk-panel__title {
  margin: 0 0 10px;
  font-weight: 400 !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em;
  color: #fff !important;
}

.abk-root .abk-panel__sub {
  max-width: 36ch;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.76) !important;
}

/* =============================================================================
   3. WHY US — picture band, frosted card
   ============================================================================= */

.abk-root .abk-why__band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 42vw, 520px);
  padding: clamp(18px, 2vw, 28px);
  overflow: hidden;
  border-radius: clamp(12px, 1.4vw, 18px);
  background: #0d1b33;
}

.abk-root .abk-why__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.abk-root .abk-why__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  transform: scale(var(--abk-z, 1)) translate3d(0, calc(var(--abk-p, 0) * 10px), 0);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* A cool wash over the photograph. The card is frosted white and the picture
   under it is warm-neutral; without this the two read as belonging to
   different pages. */
.abk-root .abk-why__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(8, 24, 66, 0.34) 0%,
    rgba(8, 24, 66, 0.14) 45%,
    rgba(8, 24, 66, 0) 78%
  );
}

.abk-root .abk-why__card {
  position: relative;
  isolation: isolate;
  z-index: 2;
  width: min(430px, 44%);
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 14px;
}

/* THE FROST IS A LAYER, NOT THE CARD. Putting backdrop-filter on .abk-why__card
   itself blurs the whole rectangle evenly and there is no way to fade it out —
   a mask on the element would take the text with it. As its own layer the mask
   applies to the frost alone, so the card dissolves into the photograph at its
   right edge while every word on top of it stays sharp. */
/* THE SAME GLASS AS THE INSIGHTS CARD, by request — the values below are
   `.abk-card__glass`'s, not a second recipe that resembles it:

     background   linear-gradient(150deg, #fff .68 -> #fff .46)
     filter       blur(18px) saturate(125%)
     border       1px solid rgba(255,255,255,.5)
     shadow       0 10px 30px rgba(8,20,48,.16)

   THE MASK IS GONE. It used to dissolve the card's right edge into the
   photograph, which is why this pane read as a different material from the
   article cards: theirs is an even frosted sheet, this one was a gradient
   wiping out to nothing. Removing it also retires the reason
   `.abk-why__note` carried a max-width — that was there to keep the last line
   of copy off the transparent part, and there is no transparent part now. */
.abk-root .abk-why__card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.46) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 10px 30px rgba(8, 20, 48, 0.16);
}

.abk-root .abk-why__card > * {
  position: relative;
  z-index: 1;
}

.abk-root .abk-why__pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue) !important;
  box-shadow: 0 2px 10px rgba(6, 20, 60, 0.1);
}

.abk-root .abk-why__plus {
  position: absolute;
  top: clamp(22px, 2.2vw, 30px);
  right: clamp(22px, 2.2vw, 30px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 45, 190, 0.34);
  transition: filter 0.35s ease;
}

.abk-root .abk-why__plus:hover {
  filter: brightness(1.15);
}

.abk-root .abk-why__plus svg {
  width: 14px;
  height: 14px;
}

.abk-root .abk-why__title {
  margin: 20px 0 0;
  font-size: clamp(26px, 2.9vw, 38px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em;
  color: var(--blue) !important;
}

/* box-decoration-break keeps the highlight one continuous block if the line
   ever wraps, rather than two boxes with a seam down the middle. */
.abk-root .abk-why__mark {
  display: inline-block;
  padding: 1px 10px 3px;
  border-radius: 4px;
  background: var(--brand);
  color: #fff !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Darkened with the glass change. The article cards' sheet is more transparent
   than the one this pane used to carry (.68/.46 against .92/.84), and this
   note is 13px grey over a bright photograph — the heading above it is blue and
   large enough to survive the swap, this was not. The max-width stays: it no
   longer has a transparent edge to avoid, but it still keeps the line length
   readable. */
.abk-root .abk-why__note {
  max-width: 32ch;
  margin: 16px 0 22px;
  font-size: 13px;
  line-height: 1.7;
  color: #2f3a4d !important;
}

/* The one CTA (20260911): the site's pill geometry and gradient, from the
   tokens in valunxt-brand.css; was an 8px-radius 13.5px button. */
.abk-root .abk-why__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--vxn-cta-h, 46px);
  padding: 0 var(--vxn-cta-px, 28px);
  border-radius: var(--vxn-cta-r, 999px);
  background-image: var(--vxn-cta-grad, var(--brand));
  background-color: var(--vxn-cta-ink, #0b2dbe);
  font-size: var(--vxn-cta-fs, 14px);
  font-weight: var(--vxn-cta-fw, 400);
  letter-spacing: var(--vxn-cta-ls, .01em);
  line-height: 1;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(11, 45, 190, 0.3);
  --vxn-cta-sweep: var(--vxn-cta-sweep-dark, #08248F);
  transition: box-shadow 0.4s ease;
}

/* The site's wedge does the fill and the one arrow does the nudge. */
.abk-root .abk-why__btn:hover {
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(11, 45, 190, 0.4);
}

/* =============================================================================
   4. OUR APPROACH
   ============================================================================= */

.abk-root .abk-appr {
  padding-bottom: clamp(56px, 7vw, 92px) !important;
}

.abk-root .abk-appr__rule {
  height: 1px;
  margin: 0 0 16px;
  background: var(--line);
}

.abk-root .abk-appr__eyebrow {
  margin: 0 0 var(--headgap);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink) !important;
}

.abk-root .abk-appr__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 58px);
}

/* Four steps where a document gives four (20260914: the Residential and
   Commercial mortgage journeys). The tablet rule below already makes it 2 x 2. */
.abk-root .abk-appr__grid[data-cols='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.abk-root .abk-appr__h {
  margin: 0 0 14px;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
}

.abk-root .abk-appr__p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.82;
  color: var(--body) !important;
}

/* =============================================================================
   5. INSIGHTS RAIL

   Built to the supplied screen recording. Every number below was measured off
   that capture rather than estimated — the frames were decoded to raw pixels
   and the panel's top edge tracked per frame, so the geometry and the timing
   are the reference's own, not an impression of them.

   ---------------------------------------------------------------------------
   WHAT WAS MEASURED (capture is 958px wide, 30fps; card is 263 x 351)

     card                 263 x 351  ->  aspect-ratio 3/4, SQUARE corners
                          (checked: the corner pixel is image, not background)
     gap between cards    12px       ->  4.6% of card width
     panel at rest        x 42..274, y 353..483
                          ->  left/right 5.7%, bottom 4.6%, top 58.1%
     panel radius         14px at rest, 0 when open
     panel when open      the whole card, edge to edge, no radius
     category pill        inset 14px / 13px, 23px tall, fully rounded
     button when open     right-aligned, 16px from the bottom

   ---------------------------------------------------------------------------
   THE TIMING, and why it is two durations

   The panel's height was tracked across three separate hovers in the capture:

     opening   200ms, 233ms, 200ms of visible travel   ->  ~240ms total
     closing   300ms, 266ms, 300ms                     ->  ~300ms total

   Closing is consistently about a third slower than opening, in all three
   pairs, so it is the reference's behaviour rather than capture jitter. Both
   directions ride the same curve.

   THE CURVE. Normalised progress at each frame of an opening was

     0.09 -> 0.120   0.24 -> 0.288   0.39 -> 0.461   0.55 -> 0.613
     0.69 -> 0.791   0.85 -> 0.911   1.00 -> 1.000

   A grid search over cubic-beziers fits that to an RMS of 0.008 at
   (0.15, 0.2, 0.85, 1) — near enough exact. For reference, `linear` scores
   0.060 and `ease-out` 0.075, so the reference is a hair to the ease-out side
   of linear, not either of them.

   ---------------------------------------------------------------------------
   NOTHING HERE IS SCRIPTED

   The whole interaction is :hover and :focus-within on the <li>. It therefore
   works before hydration, survives a failed bundle, and opens on keyboard
   focus as well as pointer — which the reference, being pointer-only, does not.
   ============================================================================= */

.abk-root .abk-ins {
  --cgap: 14px;
  --cpad: 16px;
  /* One radius for the card, its artwork and the glass in both states, so the
     panel's corners land exactly on the card's when it opens. */
  --cradius: 14px;

  /* The two durations and the one curve, from the measurements above. */
  --open: 240ms;
  --close: 300ms;
  --curve: cubic-bezier(0.15, 0.2, 0.85, 1);

  /* The reference's button is a lime `#95f775`. This page is the Valunxt blue,
     and a lime pill in the middle of it would be the only thing on the screen
     not from the palette — so the ramp is used instead. Swap this one line
     back to `#95f775` (with `color:#0d1b2a`) to match the capture exactly. */
  --cta: var(--brand);

  padding-bottom: clamp(48px, 6vw, 76px) !important;
  overflow: hidden;
}

/* ---- Header ------------------------------------------------------------- */

.abk-root .abk-ins__head {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}

.abk-root .abk-ins__h {
  max-width: 22ch;
  margin: 0 0 14px;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
}

.abk-root .abk-ins__lede {
  max-width: 78ch;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--body) !important;
}

/* Right-aligned and on its own line, sitting just above the rail — where the
   reference puts it. */
.abk-root .abk-ins__all {
  justify-self: end;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.3s ease;
}

.abk-root .abk-ins__all:hover {
  color: var(--blue) !important;
}

/* ---- The row -------------------------------------------------------------
   A four-column grid, not a scroller. The reference clips its fourth card at
   the window edge to say "this scrolls"; that was dropped by request, so the
   row is a fixed four and the card count in content.ts has to match — a fifth
   entry would start a second row of one.

   Grid rather than flex because the four have to be exactly equal: the cards
   carry titles of different lengths, and `1fr` columns size from the track, not
   from the content, so nothing can pull a neighbour wider. */
.abk-root .abk-ins__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cgap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- The card ------------------------------------------------------------ */

/* The grid sets the width; aspect-ratio sets the height from it.

   ROUNDED, not square. The reference's cards have hard corners — checked
   against the pixels — but rounding them was asked for, so the card carries
   --cradius and `overflow:hidden` clips the artwork to it. That is also what
   rounds the image: it needs no radius of its own. */
.abk-root .abk-card {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: var(--cradius);
  background: #0d1b33;
}

.abk-root .abk-card__link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none !important;
}

.abk-root .abk-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}

.abk-root .abk-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The pill sits ABOVE the panel in the z-order, because in the reference it
   stays visible over the panel while it grows and only then fades out. Below
   the panel it would be wiped instantly instead. */
.abk-root .abk-card__pill {
  position: absolute;
  top: 3.7%;
  left: 5.3%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(18, 22, 30, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff !important;
  transition: opacity var(--close) var(--curve);
}

/* ---- The glass panel -----------------------------------------------------
   THE PANEL IS INSET, NOT SIZED. Animating `height` would be the obvious way
   to grow it, but height animates against the content box while the card's
   corners have to travel too — and a bottom-anchored height leaves nothing to
   move the left, right and bottom edges out to the card's own. Animating the
   four inset values plus the radius moves all five at once, on one curve, and
   `overflow:hidden` does the clipping that makes the copy appear to be revealed
   rather than to slide.

   The rest values are the measured ones: 58.1% / 5.7% / 4.6% / 5.7%. */
.abk-root .abk-card__glass {
  position: absolute;
  top: 58.1%;
  right: 5.7%;
  bottom: 4.6%;
  left: 5.7%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--cpad);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--cradius);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.46) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 10px 30px rgba(8, 20, 48, 0.16);
  transition:
    top var(--close) var(--curve),
    right var(--close) var(--curve),
    bottom var(--close) var(--curve),
    left var(--close) var(--curve),
    border-radius var(--close) var(--curve),
    border-color var(--close) var(--curve);
}

.abk-root .abk-card:hover .abk-card__glass,
.abk-root .abk-card:focus-within .abk-card__glass {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-color: rgba(255, 255, 255, 0);
  /* Stays rounded. The reference squares the panel off against a square card;
     the card is rounded here, so the panel keeps the same radius and its
     corners come to rest exactly on the card's own. */
  border-radius: var(--cradius);
  /* Opening is the faster of the two — see the timings above. */
  transition-duration: var(--open);
}

.abk-root .abk-card:hover .abk-card__pill,
.abk-root .abk-card:focus-within .abk-card__pill {
  opacity: 0;
  transition-duration: var(--open);
}

/* ---- Panel contents ------------------------------------------------------ */

/* ---- Panel contents: NOTHING IN HERE MAY SHRINK ---------------------------
   The panel is a column flexbox whose content is taller than the box at rest —
   that is the whole design. A flex item's default `flex-shrink:1` means the
   browser resolves that overflow by CRUSHING the items instead, and it does it
   silently: the title's box was measured at 11px tall against a scrollHeight of
   73, so two of its three lines were being squashed out of existence rather
   than clipped by `overflow:hidden` as intended.

   flex-shrink:0 on all three text blocks is what makes the clip do the work.
   The button keeps the default, because when the panel IS open everything fits
   and its `margin-top:auto` is what pins it to the foot. */
.abk-root .abk-card__meta {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 9.5px;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #33415c !important;
}

.abk-root .abk-card__meta b {
  font-weight: 700;
}

.abk-root .abk-card__meta i {
  font-style: normal;
  opacity: 0.78;
}

/* Three lines with an ellipsis at rest, whole when the panel is open. The box
   stays a -webkit-box in both states and only the clamp count changes —
   switching `display` instead would relayout the panel mid-transition. */
.abk-root .abk-card__title {
  display: -webkit-box;
  flex: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 1.28 !important;
  letter-spacing: -0.008em;
  color: #16233b !important;
}

.abk-root .abk-card:hover .abk-card__title,
.abk-root .abk-card:focus-within .abk-card__title {
  -webkit-line-clamp: 10;
  line-clamp: 10;
}

/* Both of these are inside the panel at rest, below its foot and clipped — but
   clipped is not hidden: a screen reader would read them and a find-in-page
   would scroll to them. opacity is what actually withholds them, and it is why
   they fade in rather than slide up with the panel.

   The delays are the reference's: the excerpt is legible about 90ms into the
   open, the button about 150ms. */
.abk-root .abk-card__excerpt {
  display: -webkit-box;
  flex: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #3d4a63 !important;
  opacity: 0;
  transition: opacity 160ms ease;
}

.abk-root .abk-card:hover .abk-card__excerpt,
.abk-root .abk-card:focus-within .abk-card__excerpt {
  opacity: 1;
  transition-delay: 60ms;
}

/* margin-top:auto pins it to the panel's foot, which is where it stays for the
   whole transition — in the reference the button does not travel, it fades in
   where it already is. */
.abk-root .abk-card__btn {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  /* The one CTA (20260911); was a small 11px uppercase pill. */
  min-height: var(--vxn-cta-h, 46px);
  padding: 0 var(--vxn-cta-px, 28px);
  border-radius: var(--vxn-cta-r, 999px);
  background-image: var(--vxn-cta-grad, var(--cta));
  background-color: var(--vxn-cta-ink, #0b2dbe);
  font-size: var(--vxn-cta-fs, 14px);
  font-weight: var(--vxn-cta-fw, 400);
  letter-spacing: var(--vxn-cta-ls, .01em);
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
  color: #fff !important;
  opacity: 0;
  transition: opacity 160ms ease;
}

.abk-root .abk-card__btn svg {
  width: 12px;
  height: 12px;
}

.abk-root .abk-card:hover .abk-card__btn,
.abk-root .abk-card:focus-within .abk-card__btn {
  opacity: 1;
  transition-delay: 110ms;
}

/* The keyboard equivalent of the pointer's hover. Without this the focus ring
   would land on a card whose copy is still clipped. */
.abk-root .abk-card__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

/* =============================================================================
   6. SUCCESS STORY — photograph + result panel
   ============================================================================= */

.abk-root .abk-case__grid {
  display: grid;
  /* Equal halves. The reference splits 512/525 across 1063 — near enough even
     that unequal columns would read as a mistake rather than as a choice. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Narrow on purpose: at 24px the two panels stop being one band. */
  gap: 14px;
  align-items: stretch;
}

.abk-root .abk-case__photo,
.abk-root .abk-case__panel {
  position: relative;
  min-height: clamp(300px, 27vw, 372px);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.abk-root .abk-case__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  /* MIRRORED, and it has to be. The quote card covers the lower left of this
     panel; in the source the subject sits at 30% of the frame, and the crop is
     76% of the plate's width, so she lands at 39% of the box — squarely behind
     the card, at every object-position. There is no value that moves her out
     from under it. Flipping puts her at 61% instead, which is where the
     reference has its subject. Nothing in the photograph is handed or reads as
     text, so the mirror costs nothing. */
  transform: scaleX(-1);
}

/* ---- The testimonial ----------------------------------------------------- */

.abk-root .abk-case__quote {
  position: absolute;
  right: 27%;
  bottom: 6%;
  left: 4.5%;
  z-index: 2;
  isolation: isolate;
  margin: 0;
  padding: clamp(18px, 1.8vw, 24px);
  border-radius: 14px;
}

/* The frost is a layer, not the box — the same reason as .abk-why__card. A
   filter on the element itself cannot be faded out without taking the words
   with it. */
/* THE INSIGHTS CARD'S GLASS, third and last place it is used — the values are
   `.abk-card__glass`'s verbatim, the same set now on `.abk-why__card::before`:

     background   linear-gradient(150deg, #fff .68 -> #fff .46)
     filter       blur(18px) saturate(125%)
     border       1px solid rgba(255,255,255,.5)
     shadow       0 10px 30px rgba(8,20,48,.16)

   Mask removed, as on the Why Us card. The right-edge dissolve is what made
   these panes read as a different material from the article cards, and it is
   the only thing the three had not shared.

   If this recipe changes again it should become a custom-property set on
   .abk-root rather than a fourth copy of the same six declarations. */
.abk-root .abk-case__quote::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.46) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 10px 30px rgba(8, 20, 48, 0.16);
}

.abk-root .abk-case__quote > * {
  position: relative;
  z-index: 1;
}

.abk-root .abk-case__mark {
  display: block;
  margin: 0 0 2px;
  font-size: 30px;
  font-weight: 700;
  line-height: 0.6;
  color: var(--blue);
}

/* Darkened with the glass, for the same reason as .abk-why__note: the article
   cards' sheet is more transparent than the one this card used to carry, and
   this is 12.5px set over a photograph. */
.abk-root .abk-case__said {
  max-width: 34ch;
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #2f3a4d !important;
}

.abk-root .abk-case__by {
  display: flex;
  align-items: center;
  gap: 11px;
}

.abk-root .abk-case__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.abk-root .abk-case__who {
  display: grid;
  gap: 2px;
}

.abk-root .abk-case__who b {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}

.abk-root .abk-case__who i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- The result panel ---------------------------------------------------- */

.abk-root .abk-case__panel {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  /* The supplied ramp, run across rather than down so the panel darkens toward
     the photograph beside it and lifts at its outer edge. */
  background: linear-gradient(105deg, #0b2dbe 0%, #0e3fa8 42%, #1436d8 100%);
}

.abk-root .abk-case__arrow {
  position: absolute;
  top: clamp(20px, 2.2vw, 30px);
  right: clamp(20px, 2.2vw, 30px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff !important;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}

.abk-root .abk-case__arrow:hover {
  background: #fff;
  color: var(--blue) !important;
}

.abk-root .abk-case__arrow svg {
  width: 14px;
  height: 14px;
}

.abk-root .abk-case__pill {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92) !important;
}

.abk-root .abk-case__h {
  max-width: 15ch;
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(22px, 2.3vw, 30px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.012em;
  color: #fff !important;
}

/* margin-top:auto puts the whole foot on the panel's floor, so the result and
   the button sit on one line however tall the heading runs. */
.abk-root .abk-case__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: clamp(20px, 2.4vw, 30px);
}

.abk-root .abk-case__result {
  max-width: 30ch;
}

.abk-root .abk-case__stat {
  margin: 0 0 6px;
  font-weight: 700 !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  color: #fff !important;
}

.abk-root .abk-case__note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* The one CTA (20260911) in its inverse finish, white on the dark panel. */
.abk-root .abk-case__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--vxn-cta-h, 46px);
  padding: 0 var(--vxn-cta-px, 28px);
  border-radius: var(--vxn-cta-r, 999px);
  background: #fff;
  font-size: var(--vxn-cta-fs, 14px);
  font-weight: var(--vxn-cta-fw, 400);
  letter-spacing: var(--vxn-cta-ls, .01em);
  line-height: 1;
  white-space: nowrap;
  color: var(--vxn-cta-ink, #0b2dbe) !important;
  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(4, 14, 60, 0.24);
  --vxn-cta-sweep: var(--vxn-cta-sweep-light, #EAF0FF);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.abk-root .abk-case__cta:hover {
  color: var(--vxn-cta-ink, #0b2dbe) !important;
  box-shadow: 0 14px 32px rgba(4, 14, 60, 0.34);
}

/* =============================================================================
   7. THE BAND

   A rest between two dense sections. Short by design — if it grows past about
   240px it stops being a divider and starts competing with them.
   ============================================================================= */

.abk-root .abk-band__box {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(200px, 19vw, 250px);
  padding: clamp(24px, 2.8vw, 38px);
  overflow: hidden;
  border-radius: var(--radius);
  background: #061436;
}

.abk-root .abk-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.abk-root .abk-band__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(var(--abk-z, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The plate is a photograph of a data hall; without this it is merely dark. The
   ramp is what makes it the page's blue. */
.abk-root .abk-band__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Heavier on the right than the first pass. The plate is a data hall shot
     full of small bright highlights, and at .5 alpha the paragraph over it was
     competing with every one of them. The heading survives a thinner tint
     because it is 40px and bold; body copy does not. */
  background:
    linear-gradient(100deg, rgba(6, 20, 54, 0.93) 0%, rgba(8, 28, 96, 0.84) 52%, rgba(11, 45, 190, 0.72) 100%),
    linear-gradient(to right, rgba(4, 12, 34, 0.55) 0%, rgba(4, 12, 34, 0.15) 70%, rgba(4, 12, 34, 0.3) 100%);
}

.abk-root .abk-band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  width: 100%;
}

.abk-root .abk-band__h {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(26px, 3vw, 40px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  color: #fff !important;
}

.abk-root .abk-band__side {
  display: grid;
  justify-items: end;
  gap: clamp(16px, 2vw, 24px);
}

.abk-root .abk-band__p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* The one CTA (20260911) in its inverse finish, white on the dark photograph;
   was an 11px uppercase pill. */
.abk-root .abk-band__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--vxn-cta-h, 46px);
  padding: 0 var(--vxn-cta-px, 28px);
  border-radius: var(--vxn-cta-r, 999px);
  background: #fff;
  font-size: var(--vxn-cta-fs, 14px);
  font-weight: var(--vxn-cta-fw, 400);
  letter-spacing: var(--vxn-cta-ls, .01em);
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
  color: var(--vxn-cta-ink, #0b2dbe) !important;
  text-decoration: none !important;
  /* The reference rings its button in its own accent so it reads as lit from
     within. Same idea, in the palette. */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16);
  --vxn-cta-sweep: var(--vxn-cta-sweep-light, #EAF0FF);
  transition: box-shadow 0.4s ease;
}

.abk-root .abk-band__cta:hover {
  color: var(--vxn-cta-ink, #0b2dbe) !important;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.24);
}

/* =============================================================================
   8. FOCUS AND VISION
   ============================================================================= */

.abk-root .abk-vision {
  padding-bottom: clamp(56px, 7vw, 92px) !important;
}

.abk-root .abk-vision__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: start;
}

.abk-root .abk-vision__steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rail. It runs between the FIRST and LAST icon centres rather than the
   full height of the list, so it starts and stops on a mark instead of in
   mid-air — which is why the insets are in px matched to the icon, not in %. */
.abk-root .abk-vision__steps::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 10px;
  width: 1px;
  background: rgba(14, 53, 95, 0.16);
}

.abk-root .abk-vision__step {
  position: relative;
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding-bottom: clamp(28px, 3.4vw, 44px);
}

.abk-root .abk-vision__step:last-child {
  padding-bottom: 0;
}

/* The bead between two items, centred on the rail. */
.abk-root .abk-vision__step:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: calc(clamp(28px, 3.4vw, 44px) / 2 - 2.5px);
  left: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.abk-root .abk-vision__ico {
  position: relative;
  z-index: 1;
  display: block;
  width: 21px;
  height: 21px;
  /* The rail passes behind the icon; this is what makes it stop at the glyph
     rather than run through it. */
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
}

.abk-root .abk-vision__ico svg {
  display: block;
  width: 21px;
  height: 21px;
}

.abk-root .abk-vision__h {
  margin: 0 0 8px;
  font-weight: 500 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
}

.abk-root .abk-vision__p {
  max-width: 46ch;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--body) !important;
}

/* The hairline the reference draws between the two columns. On the column, not
   between the tracks, so it cannot survive into the stacked layout. */
.abk-root .abk-vision__side {
  padding-left: clamp(24px, 4vw, 56px);
  border-left: 1px solid var(--line);
}

.abk-root .abk-vision__pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 6px;
  background: var(--tint2, #edf3fb);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #33415c !important;
}

/* Large. This is the one sentence on the page that is meant to be read
   slowly, and the size — 26px in a column of 15px copy — is what says so. */
.abk-root .abk-vision__quote {
  max-width: 26ch;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  font-weight: 400 !important;
  font-size: clamp(20px, 2vw, 27px) !important;
  line-height: 1.58 !important;
  color: var(--ny) !important;
}

/* =============================================================================
   9. THE EXPANDING STRIP

   NOTHING. Its markup is HomeIndustriesRow and every rule that draws it lives
   in valunxt-brand.css (.vxn-svc-card and friends) — the flex-grow 1 -> 2.2 on
   hover over .65s cubic-bezier(.4,0,.2,1), the grayscale(1) -> grayscale(0) on
   the same curve, the full-bleed .vxn-home-svc-section variant, and the two
   breakpoints that turn the row into a 2-up and then a 1-up grid.

   Restating any of that here would be a second copy free to drift from the one
   the home pages use, so this file deliberately says nothing about it. The one
   thing it must NOT do is reveal those cards on scroll: [data-anim] sets the
   whole `transition` shorthand, which would replace `flex-grow .65s` and the
   panel would snap open with no animation at all. See the note in Motion.tsx.

   =============================================================================
   10. TALK TO AN EXPERT

   Duplicated from the parent Accounting & Tax page, which carries its CSS
   inline under `.at-root` — a scope that cannot reach this page. So the rules
   are restated, with the parent's TOKENS RESOLVED rather than referenced:

     var(--tint)  -> #f4f8fd   (this page has the same token, but see below)
     var(--ny2)   -> #0B2DBE   button — this page has NO equivalent
     var(--ny)    -> #0e355f   button hover
     var(--gap)   -> 20px      at the stacked width, so the gap is 30px

   THE BUTTON IS NOT THIS PAGE'S BLUE, deliberately. #0B2DBE is the parent's
   --ny2; this page's --blue is #0b2dbe. The brief was to duplicate the band
   without changing its UI, so the parent's colour is used verbatim. Swap the
   two declarations below to var(--brand) if it should join the rest of the
   page instead.

   The breakpoints are the parent's (900 / 640), not this file's (1080 / 820 /
   620) — same reason: matching this page's scale would move where the band
   reflows, which is a change to its UI.
   ============================================================================= */

.abk-root .abk-talk {
  padding: clamp(44px, 5vw, 72px) 0 !important;
  background: var(--tint);
}

.abk-root .abk-talk__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}

.abk-root .abk-talk__fig {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
}

.abk-root .abk-talk__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abk-root .abk-talk__head {
  max-width: 100%;
  margin: 0 0 16px !important;
  font-weight: 300 !important;
  font-size: clamp(25px, 3.1vw, 40px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.012em !important;
  color: #16233c !important;
}

.abk-root .abk-talk__lede {
  max-width: 52ch;
  margin: 0 0 26px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--body) !important;
}

/* The one CTA (20260911). It was the page's deliberately squared button, 3px;
   every CTA on the site is the same pill now, with the gradient. */
.abk-root .abk-talk__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--vxn-cta-h, 46px);
  padding: 0 var(--vxn-cta-px, 28px);
  border-radius: var(--vxn-cta-r, 999px);
  background-image: var(--vxn-cta-grad, var(--brand));
  background-color: var(--vxn-cta-ink, #0b2dbe);
  font-size: var(--vxn-cta-fs, 14px);
  font-weight: var(--vxn-cta-fw, 400);
  letter-spacing: var(--vxn-cta-ls, .01em);
  line-height: 1;
  color: #fff !important;
  text-decoration: none !important;
  --vxn-cta-sweep: var(--vxn-cta-sweep-dark, #08248F);
}

.abk-root .abk-talk__cta:hover {
  color: #fff !important;
}

@media (max-width: 900px) {
  .abk-root .abk-talk__grid {
    grid-template-columns: minmax(0, 1fr);
    /* The parent's calc(var(--gap) * 1.5) with its --gap at this width. */
    gap: 30px;
  }

  .abk-root .abk-talk__fig {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .abk-root .abk-talk__cta {
    justify-content: center;
    width: 100%;
  }
}

/* =============================================================================
   REVEAL

   The default is visible. `pending` is set by Motion.tsx and by nothing else,
   so if that bundle never runs the page is simply already there.
   ============================================================================= */

.abk-root [data-anim] {
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--abk-delay, 0ms);
}

.abk-root [data-anim="pending"] {
  opacity: 0;
}

.abk-root [data-anim="pending"][data-anim-variant="up"] {
  transform: translate3d(0, 22px, 0);
}

.abk-root [data-anim="pending"][data-anim-variant="right"] {
  transform: translate3d(30px, 0, 0);
}

.abk-root [data-anim="pending"][data-anim-variant="left"] {
  transform: translate3d(-30px, 0, 0);
}

.abk-root [data-anim="in"] {
  opacity: 1;
  transform: none;
}

/* =============================================================================
   BREAKPOINTS
   ============================================================================= */

@media (max-width: 1080px) {
  .abk-root {
    --headgap: 40px;
  }

  .abk-root .abk-brief__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 44px);
  }

  /* Freed from the text column, the panel would run the full width of the page
     and stand two screens tall. Capped and centred instead. */
  .abk-root .abk-panel {
    aspect-ratio: 16 / 10;
    max-width: 640px;
    min-height: 320px;
    margin: 0 auto;
  }

  .abk-root .abk-why__card {
    width: min(430px, 56%);
  }

  .abk-root .abk-appr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 40px;
  }

  /* Two by two. Four columns below this leaves each card too narrow for its
     own three-line title. */
  .abk-root .abk-ins__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  /* The band's heading and copy stop being a pair and become a stack; the
     button stays on the copy's right. */
  .abk-root .abk-band__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .abk-root .abk-vision__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* Stacked, the divider would be a line down the left of a full-width column
     pointing at nothing. It becomes the rule above instead. */
  .abk-root .abk-vision__side {
    padding-top: 32px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .abk-root .abk-vision__quote {
    max-width: 34ch;
  }
}

@media (max-width: 820px) {
  .abk-root .abk-hero {
    min-height: clamp(440px, 76vh, 560px);
  }

  .abk-root .abk-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

    /* The desktop scrim is a wash from the LEFT, because that is the only side
     the copy occupies there. In one column the copy runs the full width, so the
     last words of every line were landing on the brightest part of the plate.
     An even scrim instead — it costs the photograph some depth and buys the
     paragraph a contrast ratio it can be read at. */
  .abk-root .abk-hero__scrim {
    background: linear-gradient(
      170deg,
      rgba(4, 14, 36, 0.64) 0%,
      rgba(4, 14, 36, 0.52) 45%,
      rgba(4, 14, 36, 0.64) 100%
    );
  }

  /* The band stops being a picture with a card on it and becomes a card with a
     picture behind it: the photograph is too crowded at this width to carry
     legible copy over a third of itself. */
  .abk-root .abk-why__band {
    align-items: flex-end;
    min-height: 460px;
    padding: 0;
  }

  .abk-root .abk-why__card {
    width: 100%;
    border-radius: 0;
  }

  /* Stacked, the card runs the full width and needs a touch more opacity to
     hold its copy over the photograph. It keeps the even sheet, though — the
     upward fade that used to live here went with the desktop mask, for the same
     reason: it made this pane a different material from the article cards. */
  .abk-root .abk-why__card::before {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.66) 100%);
  }

  /* The two halves of the band stack. The photograph keeps its own height
     rather than inheriting the panel's, which grows once its heading wraps. */
  .abk-root .abk-case__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* Taller than the desktop panel, not shorter. Stacked, the quote card runs
     nearly the full width of the photograph and stands ~230px; at the 280px
     this was, the artwork was a 50px strip above it. */
  .abk-root .abk-case__photo {
    min-height: clamp(330px, 68vw, 400px);
  }

  .abk-root .abk-case__quote {
    right: 8%;
  }

  .abk-root .abk-band__side {
    justify-items: start;
  }
}

@media (max-width: 620px) {
  .abk-root {
    /* The clamp above already floors at 16px; this holds the phone gutter at
       the 20px the sections below were laid out against. */
    --gutter: 20px;
    --headgap: 32px;
  }

  .abk-root .abk-hero {
    padding: clamp(80px, 12vh, 110px) 0 clamp(92px, 13vh, 124px) !important;
  }

  .abk-root .abk-brief__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .abk-root .abk-panel {
    aspect-ratio: auto;
    min-height: 300px;
  }

  .abk-root .abk-appr__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .abk-root .abk-ins {
    --cpad: 16px;
  }

  /* One up. The card keeps its 3/4 ratio, so at a phone's width it is tall —
     which is the right trade: the artwork is most of what the card is for. */
  .abk-root .abk-ins__rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* At this width the quote card would cover the photograph entirely if it
     kept its inset, so it comes off the artwork and sits under it instead. */
  .abk-root .abk-case__quote {
    right: 4.5%;
    bottom: 4.5%;
  }

  /* The result and the button cannot share a line at 320px of usable width. */
  .abk-root .abk-case__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
}

/* No pointer to hover with: the card stays as it rests — artwork, category and
   title — and the tap goes straight to the article. The panel is deliberately
   NOT forced open here; a card that is 80% frosted glass on a phone hides the
   photograph that makes the rail worth scrolling. `:focus-within` still opens
   it for anyone arriving by keyboard on a hybrid device. */
@media (hover: none) {
  .abk-root .abk-card__pill {
    transition: none;
  }
}

/* Asked for less motion: no reveal, no drift, no zoom. Motion.tsx already
   declines to mark anything pending — this is the belt to that pair of braces,
   and it also stops the plates' transform from being animated by anything. */
@media (prefers-reduced-motion: reduce) {
  .abk-root [data-anim] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .abk-root .abk-hero__media img,
  .abk-root .abk-panel__media img,
  .abk-root .abk-why__media img {
    transform: none !important;
  }

  /* The card still opens — that is how its copy is reached, not decoration —
     but it arrives rather than travels. */
  .abk-root .abk-card__glass,
  .abk-root .abk-card__pill,
  .abk-root .abk-card__excerpt,
  .abk-root .abk-card__btn {
    transition: none !important;
    transition-delay: 0ms !important;
  }
}
