/*
Theme Name: Cloudoxia
Theme URI: https://cloudoxia.com
Author: Cloudoxia
Description: Block theme for Cloudoxia — Salesforce consulting, development and managed services. Cool blue on white with a gradient navy hero stage under an animated dot lattice, a deep-navy footer, a sliding pill CTA, brush-stroke underlines and a dot grid that follows the cursor across every card.
Version: 4.5.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cloudoxia
Tags: block-theme, business, blog, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns
*/

/* ==========================================================================
   CLOUDOXIA
   Page #FFFFFF · ink #0B1436 · accent #204ECF · accent pressed #183694
   Plus Jakarta Sans (display + labels) · Source Sans 3 (body)

   Tokens sit on :root; theme.json mirrors them so the editor colour picker
   shows the right swatches. Change one, change the other.

   Two background colours per page at most: white, plus one navy band — the
   hero or the footer. Text on navy is always one of the four opaque on-dark
   tokens; alpha-muted white is never used there. The rgba values on navy are
   for hairlines, borders and glass edges only.

   The accent is #204ECF. It measures 6.88:1 on white, so unlike the previous
   release's orange it is safe at body scale and needs no darker twin. The
   --cx-sig-text token is the accent *on the accent tint* #EDF2FE, where the
   design calls for #1A3FA6.

   --cx-muted is #636C8D, not the handoff's #6B7599. That value measures
   4.30:1 on the #F7F9FD card fill and fails at the 11-12px uppercase scale
   these labels are set at. #636C8D is a 3% darkening — indistinguishable
   beside it — and clears 4.5:1 on white, both surface tints and the accent
   tint. Labels on navy use --cx-ink-label, which is already 9.37:1.

   Every class is cx- prefixed. Unprefixed names like .btn, .lead, .badge and
   .step collide with plugin CSS often enough to be worth the noise.

   One committed palette, no dark-mode swap: the navy surfaces are dark in
   every context, so a second scheme would be invented rather than designed.
   ========================================================================== */

:root{
  /* --- light surfaces --------------------------------------------------- */
  --cx-ground:#FFFFFF;       /* page */
  --cx-panel:#F4F6FB;        /* surface tint 2 — icon chips, alternate bands */
  --cx-card:#F7F9FD;         /* surface tint — card fill */
  --cx-card-h:#EDF2FE;       /* accent tint — card and ghost-button hover */
  --cx-ink:#0B1436;
  --cx-ink-soft:#2A3557;     /* lead paragraphs */
  --cx-body:#4A5578;         /* secondary body copy */
  --cx-muted:#636C8D;        /* uppercase labels on light surfaces */
  --cx-rule:#E3E8F3;         /* card borders, hairlines, header border */
  --cx-rule-s:#CBD5EE;       /* ghost-button border */
  --cx-chip-bg:#F4F6FB;
  --cx-chip-bd:#E3E8F3;

  /* --- accent ----------------------------------------------------------- */
  --cx-sig:#204ECF;          /* buttons, links on hover, brush, dot grid */
  --cx-sig-deep:#183694;     /* button hover/active fill */
  --cx-sig-tint:#EDF2FE;     /* ghost-button hover fill */
  --cx-sig-text:#1A3FA6;     /* accent text sitting on the accent tint */
  --cx-sig-chip:#CBD5EE;

  /* The logo's own two colours — the mark and the wordmark, nowhere else. */
  --cx-brand-navy:#0B1436;
  --cx-brand-blue:#204ECF;

  /* --- on navy ---------------------------------------------------------- */
  --cx-ink-strong:#EAF0FF;   /* primary text on navy */
  --cx-ink-lead:#C3D0F5;     /* body and links on navy */
  --cx-ink-muted:#A9B3D3;    /* secondary text on navy */
  --cx-ink-label:#9FBAFF;    /* uppercase labels on navy — and the accent's
                                stand-in there: #204ECF measures 2.61:1 on
                                #0B1436, so nothing accent-coloured survives
                                a navy surface. This does, at 9.37:1. */
  --cx-ink-rule:rgba(159,186,255,.16);
  --cx-ink-rule-s:rgba(159,186,255,.24);
  --cx-status:#6FE3B0;       /* the MSP partner pulse, and nothing else */

  /* Every dark surface is two layers — a warm-blue radial dropped into the
     bottom-right corner over a diagonal navy ramp. A flat #0B1436 is the one
     miss the handoff calls out by name, so these are the only two values any
     navy fill is allowed to take.

     The hero's ramp is the wider of the pair: a shallower 112deg through
     #141E5E under a 120% 140% radial, sized to a surface that is most of a
     viewport tall. The card's is tighter — 115deg through #182166 under a
     130% 120% radial — so the corner glow still lands inside a 400px box. */
  --cx-deep-hero:radial-gradient(120% 140% at 100% 100%,rgba(70,86,230,.5),rgba(70,86,230,0) 60%),
            linear-gradient(112deg,#0B1436 0%,#141E5E 52%,#2A35A8 100%);
  --cx-deep:radial-gradient(130% 120% at 100% 100%,rgba(70,86,230,.5),rgba(70,86,230,0) 60%),
            linear-gradient(115deg,#0B1436 0%,#182166 52%,#2A35A8 100%);

  /* --- type ------------------------------------------------------------- */
  --cx-display:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --cx-sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Kept as --cx-mono for the call sites; the labels are Jakarta 600 now,
     tracked and uppercase. Nothing in this theme is set in a monospace. */
  --cx-mono:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* --- geometry --------------------------------------------------------- */
  --cx-col:1400px;
  --cx-gut:clamp(16px,3vw,40px);
  --cx-r-card:14px;
  --cx-r-chip:9px;
  --cx-r-pill:999px;
  --cx-ease:cubic-bezier(.16,.84,.28,1);

  color-scheme:light;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;background:var(--cx-ground);color:var(--cx-ink);
  font-family:var(--cx-sans);font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  text-wrap:pretty;
  /* clip, never hidden: `hidden` silently makes this a scroll container and
     kills every position:sticky inside it. This bug was hit and fixed twice. */
  overflow-x:clip;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .25s var(--cx-ease)}
a:hover{color:var(--cx-sig)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cx-sig);outline-offset:3px}

.skip-link.screen-reader-text{
  position:absolute;left:-9999px;z-index:999;padding:14px 22px;
  background:var(--cx-ink);color:#fff;border-radius:var(--cx-r-chip);
  font-family:var(--cx-mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.skip-link.screen-reader-text:focus{left:12px;top:12px}

/* ==========================================================================
   LAYOUT
   Section padding in one place. The names map to where each is used:
     xs    detail hero, sitting under a breadcrumb
     sm    breadcrumb row
     md    overview hero
     home  homepage hero
     lg    detail page sections
     xl    overview page sections
     xxl   homepage sections
     cta   the closing block on an inner page
     start the closing block on the homepage
   ========================================================================== */

.cx-sec{width:100%;max-width:var(--cx-col);margin-inline:auto;padding-inline:var(--cx-gut)}

.cx-sec--pt-xs{padding-top:clamp(22px,3.2vw,44px)}
.cx-sec--pt-sm{padding-top:clamp(24px,3.5vw,48px)}
.cx-sec--pt-md{padding-top:clamp(34px,5vw,74px)}
.cx-sec--pt-home{padding-top:clamp(36px,6vw,92px)}
.cx-sec--pt-lg{padding-top:clamp(44px,6vw,92px)}
.cx-sec--pt-xl{padding-top:clamp(48px,6.5vw,100px)}
.cx-sec--pt-xxl{padding-top:clamp(52px,7vw,110px)}
.cx-sec--pt-cta{padding-top:clamp(48px,6.5vw,110px)}
.cx-sec--pt-start{padding-top:clamp(56px,8vw,130px)}

.cx-sec--pb-cta{padding-bottom:clamp(48px,6.5vw,100px)}
.cx-sec--pb-start{padding-bottom:clamp(56px,8vw,120px)}

/* An ink band is full-width inside the gutter, so it takes margin not padding. */
.cx-sec--mt-lg{margin-top:clamp(44px,6vw,92px)}
.cx-sec--mt-xl{margin-top:clamp(48px,6.5vw,100px)}
.cx-sec--mt-xxl{margin-top:clamp(52px,7vw,110px)}

/* ==========================================================================
   TYPE
   ========================================================================== */

h1,h2,h3,h4{margin:0;font-family:var(--cx-display);font-weight:700}

.cx-h1{font-size:clamp(40px,6.3vw,92px);line-height:.91;letter-spacing:-.045em;margin:0}
.cx-h1--home{font-size:clamp(48px,7.6vw,112px);line-height:.9}
.cx-h1--detail{font-size:clamp(38px,5.8vw,88px);line-height:.92;margin-bottom:26px}
/* Three lines of keyword-led headline rather than two of copywriting: the
   restored Managed Services H1 needs a step down to hold the same block. */
.cx-h1--long{font-size:clamp(30px,4.3vw,62px);line-height:.98}
.cx-h1--about{font-size:clamp(38px,6vw,88px);line-height:.94;max-width:17ch;color:#fff}

/* Display headings lead at 1 and no tighter. Plus Jakarta Sans Bold carries
   .76em of ascender ink over .22em of descender ink, so a line box under .98em
   drives a 'g' or 'p' into the caps of the line beneath it — which is what
   .9 did to "Bring us the part / that isn't working." Keep 1 as the floor when
   editing these; the tight look lives in the letter-spacing, not the leading. */
.cx-h2{font-size:clamp(30px,4.3vw,62px);line-height:1;letter-spacing:-.041em;margin:0 0 20px;max-width:20ch}
/* A masked line ends on a negative margin, so anything that follows a
   heading needs that much back before it collides with the last line. */
.cx-shead--split .cx-h2,
.cx-h2--faq,
.cx-h2--cta{margin-bottom:0}
.cx-h2--wide{font-size:clamp(32px,5vw,74px);line-height:1;letter-spacing:-.045em;margin-bottom:26px}
.cx-h2--sec{font-size:clamp(28px,3.8vw,54px);line-height:.96;letter-spacing:-.042em;margin-bottom:clamp(24px,3vw,40px);max-width:22ch}
.cx-h2--gap{margin-bottom:clamp(24px,3vw,38px)}
.cx-h2--faq{font-size:clamp(28px,3.6vw,50px);line-height:.96;letter-spacing:-.042em;max-width:15ch}
.cx-h2--team{font-size:clamp(26px,3.4vw,44px);line-height:1.04;letter-spacing:-.04em;max-width:22ch}
.cx-h2--cta{font-size:clamp(36px,6vw,92px);line-height:1;letter-spacing:-.045em;max-width:18ch}
.cx-h2--cta-xl{font-size:clamp(40px,7vw,104px);max-width:20ch}
.cx-h2--cta-narrow{max-width:15ch}

.cx-h2--band{color:#fff;max-width:20ch}
.cx-h2--band-lg{font-size:clamp(28px,4vw,58px);line-height:.95;margin-bottom:clamp(28px,4vw,52px);max-width:19ch}
.cx-h2--band-gap{font-size:clamp(28px,4vw,54px);margin-bottom:20px}
.cx-h2--band-sm{font-size:clamp(26px,3.4vw,48px);margin-bottom:clamp(26px,3.4vw,44px);max-width:24ch}

.cx-lead{font-size:clamp(17px,1.45vw,21px);line-height:1.55;color:var(--cx-ink-soft);max-width:52ch;margin:0}
.cx-lead--detail{font-size:clamp(17px,1.45vw,20px);line-height:1.55;margin-bottom:28px;max-width:48ch}

.cx-mono{font-family:var(--cx-mono);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12px}
.cx-sig{color:var(--cx-sig)}

/* The masked headline line. The parent pads and un-margins by the same amount,
   so the mask hides the line before it rises without clipping what hangs below
   the last one.
   That overhang is two things: half-leading, because every heading here runs a
   line-height under 1, and the accent underline, which is a 7-9px border on the
   inline box. calc(.16em + 10px) clears both at every size in the type scale —
   a flat em value clips the underline on a phone, a flat px value clips it on a
   desktop display headline. */
.cx-mask{
  --cx-mask-pad:calc(.16em + 10px);
  display:block;overflow:hidden;
  padding-bottom:var(--cx-mask-pad);margin-bottom:calc(var(--cx-mask-pad) * -1);
}
.cx-mask > span{display:block}

/* The brush-stroke underline on a headline word. Two tapered passes in the
   accent — a stroke-width 9 main pass and a 3.4 at .45 opacity — carried as a
   data-URI so the mark needs no request and inherits nothing from the page.
   The SVG has no preserved aspect ratio, so one file stretches to any word.
   .3em on display headings, .26em at section scale; --cx-u-h overrides it. */
.cx-u{
  padding:0 .06em .1em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M7%2016%20C%2078%205,%20198%204,%20313%2010'%20fill='none'%20stroke='%23204ECF'%20stroke-width='9'%20stroke-linecap='round'/%3E%3Cpath%20d='M20%2022%20C%2098%2014,%20214%2015,%20299%2019'%20fill='none'%20stroke='%23204ECF'%20stroke-width='3.4'%20stroke-linecap='round'%20opacity='.45'/%3E%3C/svg%3E") no-repeat 0 100%/100% var(--cx-u-h,.3em);
}
.cx-u--7,.cx-u--8{--cx-u-h:.26em}
.cx-u--9{--cx-u-h:.3em}

/* On navy the stroke lifts to the on-dark label blue, which reads against
   #0B1436 where the accent itself would sink into it. */
.cx-band .cx-u,.cx-hero--deep .cx-u,.cx-abhero .cx-u,.cx-stage .cx-u{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M7%2016%20C%2078%205,%20198%204,%20313%2010'%20fill='none'%20stroke='%237C98FF'%20stroke-width='9'%20stroke-linecap='round'/%3E%3Cpath%20d='M20%2022%20C%2098%2014,%20214%2015,%20299%2019'%20fill='none'%20stroke='%237C98FF'%20stroke-width='3.4'%20stroke-linecap='round'%20opacity='.45'/%3E%3C/svg%3E");
}

.cx-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   MOTION STATE
   The hidden state is scoped to html.cx-motion, which an inline script adds
   only when JavaScript runs and reduced motion is not requested. Without that
   scope a failed script leaves the whole page at opacity:0.
   ========================================================================== */

html.cx-motion [data-reveal]{opacity:0;transform:translateY(14px)}
html.cx-motion [data-node]{opacity:0}
html.cx-motion [data-tile],
html.cx-motion [data-step]{opacity:0;transform:translateY(14px)}
html.cx-motion [data-step]{transform:translateX(18px)}
html.cx-motion [data-line]{transform:translateY(110%)}
html.cx-motion [data-rule]{transform:scaleX(0);transform-origin:left}

/* The hero headline and lead are the largest paint on the page. They run the
   same rise from CSS, starting at first paint, instead of waiting for GSAP
   and motion.js to arrive — an animation beats the hidden state above in the
   cascade, so the element is never stuck at opacity:0 behind a script. */
@keyframes cx-lcp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cx-lcp-line{from{transform:translateY(110%)}to{transform:none}}
html.cx-motion [data-reveal][data-lcp]{animation:cx-lcp-rise .6s var(--cx-ease) .12s both}
html.cx-motion [data-lcp] [data-line]{animation:cx-lcp-line .62s var(--cx-ease) both}
html.cx-motion [data-lcp] .cx-mask:nth-child(2) [data-line]{animation-delay:.07s}
html.cx-motion [data-lcp] .cx-mask:nth-child(3) [data-line]{animation-delay:.14s}

/* On a phone the hero headline does not animate at all.
   The mask reveal is what Largest Contentful Paint measures: the text is
   translated out of an overflow:hidden box, so it is genuinely not painted
   until the animation lands, and the delay is added on top of a first paint
   that is already ~2.9s out on throttled mobile. Homepage LCP measured 5.0s
   against 83-89 performance on every other template. On a 390px screen the
   three-line rise is barely legible as motion anyway, so the phone gets the
   text at first paint and the desktop keeps the design. */
@media (max-width:860px){
  html.cx-motion [data-lcp],
  html.cx-motion [data-lcp] [data-line]{animation:none;opacity:1;transform:none}
  html.cx-motion [data-reveal][data-lcp]{animation:none;opacity:1;transform:none}
}

/* The head script adds cx-lcp-done 1.6s in, after the longest of those
   animations has finished. From then on the hero text is pinned in its final
   state by plain declarations, so it cannot be left clipped in the mask if the
   animation never ran — seen once on a host whose optimiser rewrote the CSS. */
html.cx-lcp-done [data-lcp] [data-line]{transform:none;animation:none}
html.cx-lcp-done [data-reveal][data-lcp]{opacity:1;transform:none;animation:none}

/* Flow dots carry no cx/cy — MotionPath positions them. Without this they
   stack in the corner whenever the CDN fails. */
[data-flow]{opacity:0}

/* ==========================================================================
   PAGE AMBIENCE
   A fixed layer behind everything: a dot grid fading down the page, two soft
   accent glows in opposite corners, and one denser patch of dots. All of it
   sits at z-index -1 with no pointer events, so it never enters the tab order
   or eats a click.

   It used to also carry quarter-width hairlines, two outline rings, two hatch
   patches and two outlined tiles. Backgrounds on this site are dots and colour
   now — every line in them is gone.

   The body is the only thing that can hold it — a fixed child of a
   transformed or contained ancestor stops being fixed to the viewport, and
   every section on this site is a candidate for one of those.
   ========================================================================== */

.cx-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cx-amb > span{position:absolute;display:block}

/* The dot field, thinning toward the bottom of the screen. */
.cx-amb__dots{
  inset:0;
  background-image:radial-gradient(#C2CEEA 1.2px,transparent 1.2px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,.55) 65%,rgba(0,0,0,.15));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,.55) 65%,rgba(0,0,0,.15));
}

.cx-amb__glow-a{top:-240px;right:-200px;width:760px;height:760px;background:radial-gradient(circle,rgba(32,78,207,.14),rgba(32,78,207,0) 68%)}
.cx-amb__glow-b{bottom:-280px;left:-220px;width:700px;height:700px;background:radial-gradient(circle,rgba(42,53,168,.11),rgba(42,53,168,0) 70%)}

/* One patch of dots at twice the density, low on the left, so the field is
   not perfectly even — it is the only survivor of the decoration set. */
.cx-amb__patch{bottom:22%;left:6%;width:120px;height:120px;background-image:radial-gradient(rgba(32,78,207,.38) 1.6px,transparent 1.6px);background-size:16px 16px}

/* Below the desktop breakpoint the patch crowds the text column. The field
   and the glows carry the same idea at a fraction of the paint. */
@media (max-width:900px){
  .cx-amb__patch{display:none}
}

/* ==========================================================================
   HERO STAGE
   The navy hero, in three layers. Bottom to top: the two-layer gradient, the
   dot canvas, then the content.

   The canvas holds points on a 30px grid. They wander on a sine/cosine drift
   and, within 190px of the pointer, brighten and are pushed outward. With
   motion off the same canvas paints a static field at the base opacity — the
   hero is never left empty.

   No lines. The outline rings and the hatch patch that used to parallax in
   here are gone, along with every other line in the backgrounds: the dot
   grid and the gradient are the whole surface now.
   ========================================================================== */

.cx-stage{
  position:relative;overflow:hidden;
  background:var(--cx-deep-hero);color:#fff;
}

/* A full hero stage, as opposed to a shorter band using the same surface.
   The min-height is what gives the lattice room to read as a field. */
.cx-stage--hero{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(24px,3.4vw,46px);
  min-height:clamp(500px,76vh,820px);
  padding-block:clamp(40px,5.2vw,90px);
}

/* A short stage, for a hero that is only a title — the generic page template.
   At full height the navy is mostly empty, which reads as a missing section. */
.cx-stage--sm{min-height:clamp(320px,42vh,480px)}

.cx-stage__dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cx-stage > .cx-sec,.cx-stage > .cx-wrap{position:relative;z-index:1}

@media (max-width:900px){
  .cx-stage--hero{min-height:0;padding-block:clamp(36px,7vw,60px)}
}

/* --- the stage's own skin ------------------------------------------------
   Everything inside is on navy, so the light-surface tokens each need their
   on-dark twin. These are scoped to .cx-stage rather than baked into new
   modifiers: the markup inside the hero is the same markup the light pages
   use, and the handoff's rule is that the copy and structure do not move. */

.cx-stage .cx-h1,.cx-stage .cx-h2,.cx-stage .cx-page-head h1{color:#fff}
.cx-stage .cx-lead,.cx-stage .cx-hero__lead{color:var(--cx-ink-lead)}
.cx-stage .cx-eyebrow__l,
.cx-stage .cx-case__client--hero{color:var(--cx-ink-label)}
.cx-stage .cx-eyebrow__r{background:var(--cx-ink-label)}
.cx-stage .cx-eyebrow__rot{color:#fff;border-left-color:var(--cx-ink-rule-s)}
.cx-stage .cx-crumbs{color:var(--cx-ink-label)}
.cx-stage .cx-crumbs a{color:var(--cx-ink-label)}
.cx-stage .cx-crumbs a:hover{color:#fff}
.cx-stage .cx-crumbs [aria-current]{color:#fff}
.cx-stage .cx-page-head{padding-block:0}

/* Deliberately not a blanket `.cx-stage .cx-mono`: a stage can carry a light
   panel (the service diagram, the case study drawing), and a rule that broad
   reaches inside it and washes its labels out. Each on-navy element is named. */

.cx-stage .cx-btn--line{border-color:rgba(255,255,255,.34);color:#fff}
.cx-stage .cx-btn--line:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}

/* The stat row at the foot of the hero. It is the stage's second flex child,
   so the gap above it is the stage's own — the row carries no margin of its
   own and the numbers sit close under the buttons instead of across the
   40-72px the white band needed to clear the fold. Padding is top-only: the
   stage's bottom padding is the space beneath. */
.cx-stage__stats .cx-hr{background:var(--cx-ink-rule)}
.cx-stage .cx-stats{padding-block:clamp(18px,2.2vw,30px) 0}
.cx-stage .cx-stat__v{color:#fff}
.cx-stage .cx-stat__k{color:var(--cx-ink-label)}

/* --cx-sig is the accent for white surfaces and goes muddy on navy; the label
   blue is its on-navy twin, and it is the one number that is not white. */
.cx-stage .cx-stat__v.cx-sig{color:var(--cx-ink-label)}

/* The hero diagram on navy. The node cards go to glass, the connectors and
   rings to the on-dark blue, and the centre card inverts to white — it is the
   one thing in the drawing that has to stay the loudest. */
.cx-stage .cx-diag__n{background:rgba(255,255,255,.07);border-color:rgba(159,186,255,.22);color:#fff}
.cx-stage .cx-diag__v{color:var(--cx-ink-muted)}
.cx-stage .cx-diag__ring--1::before{border-color:rgba(159,186,255,.34)}
.cx-stage .cx-diag__ring--2::before{border-color:rgba(159,186,255,.18)}
.cx-stage .cx-diag__lines g{stroke:rgba(159,186,255,.3)}
.cx-stage .cx-diag__core{background:#fff;color:var(--cx-ink)}
.cx-stage .cx-diag__core .cx-diag__v{color:var(--cx-body)}

/* The glass and light variants of .cx-panel live with the rest of the panel,
   below, where they come after .cx-panel's own surface on source order. */

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */

.cx-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:var(--cx-sig);z-index:98;pointer-events:none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.cx-hd{
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cx-rule);
}
.cx-hd__in{
  max-width:var(--cx-col);margin-inline:auto;padding-inline:var(--cx-gut);
  display:flex;align-items:stretch;gap:clamp(16px,2.4vw,40px);
}

.cx-hd__logo{display:flex;align-items:center;gap:11px;padding-block:18px;flex:none}
/* Set to match the lockup: the wordmark is uppercase and tracked beside the
   mark, in the logo's navy rather than the page's ink. */
.cx-hd__word{font-family:var(--cx-display);font-weight:700;font-size:21px;letter-spacing:-.03em;color:var(--cx-brand-navy)}
.cx-hd__img{display:block;height:34px;width:auto;max-width:260px}

.cx-mark{
  width:var(--cx-mark-size,30px);height:var(--cx-mark-size,30px);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.cx-mark svg{display:block;width:100%;height:100%}

.cx-nav{
  display:flex;align-items:stretch;gap:clamp(10px,1.8vw,28px);flex-wrap:wrap;
  font-family:var(--cx-mono);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
}
.cx-nav__l,.cx-menu__t{
  display:flex;align-items:center;gap:7px;padding-block:4px;
  border-bottom:2px solid transparent;transition:border-color .25s var(--cx-ease);
}
.cx-nav__l:hover,.cx-menu__t:hover{border-bottom-color:var(--cx-sig);color:var(--cx-sig)}
.cx-menu__c{font-size:8px}

.cx-menu{position:relative;display:flex;align-items:center}
.cx-menu > summary{list-style:none;cursor:pointer}
.cx-menu > summary::-webkit-details-marker{display:none}

.cx-menu__p{
  position:absolute;top:calc(100% + 16px);left:-22px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .22s var(--cx-ease),transform .22s var(--cx-ease),visibility .22s;
  background:var(--cx-ground);border:1px solid var(--cx-rule-s);border-radius:16px;padding:18px 20px;
  display:grid;grid-template-columns:repeat(2,minmax(215px,1fr));gap:2px 10px;
  z-index:99;box-shadow:0 24px 54px rgba(11,20,54,.13);
}
/* The pointer has to cross the 16px gap between the summary and the panel;
   this invisible strip keeps it inside the menu while it does. */
.cx-menu__p::before{content:"";position:absolute;left:0;right:0;top:-17px;height:18px}
.cx-menu--wide .cx-menu__p{grid-template-columns:repeat(2,minmax(225px,1fr))}

/* Resources holds two items. On the two-column default they sit side by side
   in a panel sized for the fourteen service lines, which reads as a panel with
   most of itself missing; one column makes the panel the size of its content. */
.cx-menu--narrow .cx-menu__p{grid-template-columns:minmax(190px,1fr)}
/* Without JavaScript the native open state shows the panel outright; with it,
   motion.js adds is-open a frame after open so the transition can run. */
.cx-menu[open]:not(.cx-js) .cx-menu__p,
.cx-menu.is-open .cx-menu__p{opacity:1;visibility:visible;transform:translateY(0)}

.cx-menu__i{
  font-family:var(--cx-sans);font-size:14.5px;letter-spacing:0;text-transform:none;
  display:flex;align-items:center;gap:11px;padding:8px 10px;white-space:nowrap;
  color:var(--cx-ink);border-radius:var(--cx-r-chip);transition:background .2s,color .2s;
}
.cx-menu__i:hover{background:var(--cx-sig-tint);color:var(--cx-sig-text)}
.cx-menu__tile{
  width:30px;height:30px;border:1px solid var(--cx-rule);background:var(--cx-panel);
  border-radius:var(--cx-r-chip);
  display:flex;align-items:center;justify-content:center;flex:none;
}

/* Geometry comes from .cx-slide--sm; this is placement and colour only. */
.cx-hd__cta{
  margin-left:auto;align-self:center;flex:none;
  background:var(--cx-sig);color:#fff;
  font-family:var(--cx-mono);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
}
.cx-hd__cta:hover{background:var(--cx-sig-deep);color:#fff}

/* The narrow-viewport toggle. Not in the design; the dropdown panel alone is
   430px at its minimum, so the row cannot hold nav plus call button. */
.cx-hd__burger{
  display:none;margin-left:auto;align-self:center;flex:none;
  width:48px;height:48px;border:1px solid var(--cx-rule-s);background:transparent;
  border-radius:var(--cx-r-pill);
  cursor:pointer;padding:0;place-content:center;gap:5px;
}
.cx-hd__burger i{display:block;width:18px;height:1.5px;background:var(--cx-ink);margin-inline:auto}
.cx-hd__burger[aria-expanded="true"]{background:var(--cx-ink);border-color:var(--cx-ink)}
.cx-hd__burger[aria-expanded="true"] i{background:#fff}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.cx-btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--cx-mono);font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  padding:20px 34px;border:1px solid transparent;border-radius:var(--cx-r-pill);
  white-space:nowrap;
  transition:background .3s var(--cx-ease),border-color .3s var(--cx-ease),color .3s;
}
.cx-btn--primary{background:var(--cx-sig);color:#fff}
.cx-btn--primary:hover{background:var(--cx-sig-deep);color:#fff}
.cx-btn--line{border-color:var(--cx-rule-s);color:var(--cx-ink)}
.cx-btn--line:hover{border-color:var(--cx-sig);background:var(--cx-sig-tint);color:var(--cx-sig-text)}
.cx-btn--sm{padding:17px 30px;font-size:12.5px}
.cx-btn--lg{padding:20px 34px}
.cx-btn__a{display:inline-block}

.cx-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.4vw,44px)}
.cx-btns--end{justify-content:flex-end;margin-top:0}

/* A navy band inverts them: the white pill leads, the ghost outline follows. */
.cx-band .cx-btn--primary{background:#fff;color:var(--cx-ink)}
.cx-band .cx-btn--primary:hover{background:var(--cx-ink-strong);color:var(--cx-ink)}
.cx-band .cx-btn--line{border-color:var(--cx-ink-rule-s);color:#fff}
.cx-band .cx-btn--line:hover{border-color:var(--cx-ink-label);background:rgba(159,186,255,.1);color:#fff}

/* --------------------------------------------------------------------------
   THE SLIDING CTA
   A pill with a white circular badge inset from the top-right corner. On hover
   the padding swaps end for end and the badge travels to the left inset,
   rotating 45deg — motion.js drives both with GSAP so they share one ease.

   The padding pair lives on the element as custom properties so the CSS-only
   fallback, the GSAP tween and the three sizes all read the same two numbers.
   Without JavaScript the transition below still runs; only the badge stays put.
   -------------------------------------------------------------------------- */

.cx-slide{
  position:relative;display:inline-flex;align-items:center;
  height:var(--cx-slide-h,60px);padding-top:0;padding-bottom:0;
  padding-left:var(--cx-slide-near,32px);padding-right:var(--cx-slide-pad,66px);
  border-radius:var(--cx-r-pill);overflow:hidden;white-space:nowrap;
  transition:padding .5s var(--cx-ease),background .3s var(--cx-ease),color .3s;
}
.cx-slide__b{
  position:absolute;top:var(--cx-slide-in,7px);right:var(--cx-slide-in,7px);
  width:var(--cx-slide-b,46px);height:var(--cx-slide-b,46px);border-radius:50%;
  background:#fff;color:var(--cx-sig);
  display:flex;align-items:center;justify-content:center;flex:none;pointer-events:none;
}
.cx-slide__b svg{display:block;width:15px;height:15px}
.cx-slide__l{position:relative;z-index:1}

/* Hover with no JavaScript: the padding still swaps, so the label moves and
   the button reads as live. GSAP overwrites both once it is running. */
.cx-slide:hover,.cx-slide:focus-visible{
  padding-left:var(--cx-slide-pad,66px);padding-right:var(--cx-slide-near,32px);
}

.cx-slide--sm{--cx-slide-h:44px;--cx-slide-near:22px;--cx-slide-pad:48px;--cx-slide-b:34px;--cx-slide-in:5px;font-size:12.5px}
.cx-slide--md{--cx-slide-h:54px;--cx-slide-near:28px;--cx-slide-pad:62px;--cx-slide-b:42px;--cx-slide-in:6px}

/* On navy the pill is white and its badge takes the accent. */
.cx-slide--invert{background:#fff;color:var(--cx-ink)}
.cx-slide--invert:hover{background:var(--cx-ink-strong);color:var(--cx-ink)}
.cx-slide--invert .cx-slide__b{background:var(--cx-sig);color:#fff}

/* ==========================================================================
   SECTION HEADS
   One column. The rail — the section number and its label — sits above the
   heading as a baseline row.

   It used to be a 150px sidebar column beside every section head, with the
   heading and its body indented past it. That column is gone from every page;
   what was the narrow-viewport treatment is now the only treatment, so the
   heading starts at the same left edge as everything else on the page.
   ========================================================================== */

.cx-shead{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.cx-shead--gap{margin-bottom:clamp(24px,3vw,40px)}
.cx-shead--gap-sm{margin-bottom:clamp(22px,2.6vw,34px)}
.cx-shead--top{align-items:start}

/* The homepage services head and both FAQ heads run side by side instead. */
.cx-shead--split{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,56px);
}
.cx-shead--split.cx-shead--top{align-items:start}

/* The number and the label on one baseline. The rail carries the space under
   itself; inside a .cx-shead the grid's own gap does it instead. */
.cx-rail{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-bottom:24px}
.cx-shead > .cx-rail{margin-bottom:0}
.cx-rail__n{color:var(--cx-muted);margin:0}
.cx-rail__l{margin:0;color:var(--cx-ink)}

.cx-shead__i{font-size:17px;line-height:1.55;color:var(--cx-ink-soft);margin:0;max-width:46ch}
.cx-shead__p{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--cx-ink-soft);margin:0;max-width:58ch}
.cx-shead__p--body{font-size:16.5px;color:var(--cx-body);margin-bottom:clamp(26px,3vw,40px);max-width:58ch}
.cx-shead__p--gap{margin-top:20px}

.cx-other{margin-bottom:24px;color:var(--cx-muted)}

/* ==========================================================================
   EYEBROW
   ========================================================================== */

.cx-eyebrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,34px)}
.cx-eyebrow__r{height:1px;width:56px;background:var(--cx-sig);flex:none}
.cx-eyebrow__r--sm{width:52px}
.cx-eyebrow__l{font-size:12.5px;color:var(--cx-muted)}
.cx-eyebrow__rot{font-size:12.5px;color:var(--cx-ink);border-left:1px solid var(--cx-rule-s);padding-left:18px}

/* The homepage eyebrow sits further from the headline. */
.cx-sec--pt-home .cx-eyebrow{gap:18px;margin-bottom:clamp(26px,4vw,54px)}

/* ==========================================================================
   HERO
   ========================================================================== */

.cx-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(26px,4vw,72px);align-items:center}
.cx-hero--end{align-items:end}
.cx-hero--mid{align-items:center}

/* Contact: copy left, the lead form right. The form column is the wider of
   the two — five fields and a button need the room more than a headline and
   three lines do — and both columns start at the top, because a form and a
   headline have no shared centre worth aligning to. Below 900px the grid is
   one column and the copy leads, which is the order the markup is already in. */
.cx-hero--form{align-items:start;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
/* The headline steps down with the column it is now in. At the full .cx-h1
   size "Thirty minutes / with an architect." broke into four lines in a
   column this wide, which is a stack of words rather than a headline. */
.cx-hero--form .cx-h1{font-size:clamp(38px,4.7vw,70px)}
@media (max-width:900px){
  .cx-hero--form{grid-template-columns:minmax(0,1fr)}
}
.cx-hero__lead{margin-top:clamp(24px,3.4vw,44px)}
.cx-hero__d{position:relative;min-width:280px}

/* The hero drawing is hidden outright below 760px, and the number is measured
   rather than picked: at 730px and under the node cards start overlapping each
   other, and at 660px the hero grid drops to one column and the drawing stacks
   beneath the copy as seven full-width cards — ~600px of scroll that pushes the
   stat row and the certification strip off the first screen. What the drawing
   says is in the spokes around the core, and neither a pile-up nor a single
   column draws spokes. 760 leaves headroom over the 730 the overlap starts at. */
@media (max-width:760px){
  .cx-hero__d{display:none}
}

.cx-hr{height:1px;background:var(--cx-rule);transform-origin:left}

/* Label/value pairs are <dt>/<dd> so they extract as one fact; the value is
   first visually, hence column-reverse.

   align-items:start is what keeps the numbers on one baseline. Stretched, a
   pair whose label wraps to two lines grows upward — column-reverse pins the
   label to the bottom of the cell — and lifts its number clear of the other
   three. The numbers are what the eye lands on, so they align and the labels
   are allowed to run ragged underneath. */
.cx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;padding-block:clamp(24px,3vw,40px);margin:0;align-items:start}
.cx-stat{display:flex;flex-direction:column-reverse}
.cx-stat__v{
  margin:0;font-family:var(--cx-display);font-weight:700;font-size:clamp(32px,3.4vw,44px);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
}
.cx-stat__k{margin:8px 0 0;font-size:11px;letter-spacing:.12em;color:var(--cx-muted)}

/* Two columns, pinned rather than left to auto-fit, at the width where the
   hero drawing goes. Full width and no drawing, auto-fit finds room for three
   150px tracks and leaves the fourth stat alone on a row of its own. A phone
   is already 2x2 by the same maths; this only stops the 3+1 in between. */
@media (max-width:760px){
  .cx-stats{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   HERO DIAGRAM
   Two counter-rotating rings behind a three-by-three grid of nodes, with the
   connectors drawn as an absolutely positioned SVG underneath.
   ========================================================================== */

.cx-diag{position:relative}
.cx-diag__ring{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cx-diag__ring::before{content:"";aspect-ratio:1;border-radius:50%}
.cx-diag__ring--1::before{width:46%;border:1px solid rgba(32,78,207,.32);animation:cx-spin 60s linear infinite}
.cx-diag__ring--2::before{width:64%;border:1px dashed rgba(11,20,54,.14);animation:cx-spin 120s linear infinite reverse}

/* The connectors are measured, not authored: diagConnectors() writes the
   viewBox in pixels and every endpoint from the real card boxes, then sets
   [data-wired]. Before that they stay hidden — a wrong line that points past
   a card is worse than no line, and that is what fixed 0-100 coordinates gave
   over a grid whose middle column is content-sized. */
.cx-diag__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-diag__lines line{opacity:0}
.cx-diag__lines[data-wired] line{opacity:1;stroke-dasharray:var(--cx-diag-len,200);stroke-dashoffset:0}
html.cx-motion .cx-diag__lines[data-wired] line{stroke-dashoffset:var(--cx-diag-len,200)}

.cx-diag__g{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.4vw,20px);aspect-ratio:1.08;
}
.cx-diag__c{display:flex;align-items:center}
.cx-diag__c:nth-child(3n+1){justify-content:flex-start}
.cx-diag__c:nth-child(3n+2){justify-content:center}
.cx-diag__c:nth-child(3n){justify-content:flex-end}

.cx-diag__n{
  border:1px solid var(--cx-rule-s);background:var(--cx-ground);border-radius:var(--cx-r-chip);
  padding:10px 12px;display:grid;gap:3px;align-content:center;min-height:68px;
}
.cx-diag__k{font-size:11px;letter-spacing:.08em}
.cx-diag__v{font-size:10px;letter-spacing:0;text-transform:none;color:var(--cx-muted)}

.cx-diag__core{background:var(--cx-ink);color:#fff;border-radius:var(--cx-r-chip);padding:14px 16px;display:flex;align-items:center;gap:10px}
.cx-diag__core .cx-diag__k,
.cx-diag__core .cx-diag__v{white-space:nowrap;display:block}
.cx-diag__core .cx-diag__k{letter-spacing:.06em}
.cx-diag__core .cx-diag__v{font-size:9.5px;color:var(--cx-ink-muted)}
.cx-diag__logo{width:26px;height:auto;flex:none;display:block}
.cx-eyebrow__r,.cx-hr{border-radius:1px}

@keyframes cx-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ==========================================================================
   MARQUEE
   ========================================================================== */

.cx-marquee{border-block:1px solid var(--cx-rule);background:var(--cx-panel);overflow:hidden;padding-block:18px}
.cx-marquee__t{display:flex;width:max-content;animation:cx-marquee 38s linear infinite}
.cx-marquee__s{
  display:flex;gap:56px;padding-right:56px;align-items:center;
  font-size:12.5px;letter-spacing:.14em;color:var(--cx-body);
}
.cx-marquee__d{color:var(--cx-muted)}

@keyframes cx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Certification strip: the official badges, the set the marketing site runs.
   Each hexagon carries its own credential, so the row is art and nothing else
   — no label beside it, no divider between, and the gap is the only spacing.
   The duration is set against the distance actually travelled, not the badge
   count: -50% of six copies is about 3900px, so 138s holds the ~28px/s the
   client wall ran at. The phone block resets it because the same -50% is a
   shorter trip once the badges shrink. */
.cx-marquee--cert{padding-block:20px}
.cx-marquee--cert .cx-marquee__t{animation-duration:138s}
.cx-certs{display:flex;align-items:center;list-style:none;margin:0;padding:0 38px 0 0;gap:38px}
.cx-cert{display:flex;flex:none}

/* Height drives the row; width follows the 209x203 intrinsics kept on the tag,
   which also stop the strip reflowing as the badges decode. The art is navy on
   transparent and the strip is --cx-panel, so it sits on the tint unboxed. */
.cx-cert__b{flex:none;height:60px;width:auto;display:block}

@media (max-width:640px){
  .cx-marquee--cert{padding-block:16px}
  .cx-cert__b{height:44px}
  .cx-certs{padding-right:30px;gap:30px}
  .cx-marquee--cert .cx-marquee__t{animation-duration:108s}
}

/* The strip is decoration that never stops, which is exactly what a vestibular
   trigger looks like. Holding it still leaves the first copy readable in place. */
@media (prefers-reduced-motion:reduce){
  .cx-marquee--cert .cx-marquee__t{animation:none}
}

/* ==========================================================================
   CARDS
   No top accent bar — the cursor grid replaced it. Every .cx-card carries a
   dot-grid layer that only exists around the pointer; GSAP owns the reveal
   radius, the drift and the lift, and the CSS here is what a failed CDN
   leaves: a plain bordered card that still takes a hover.
   ========================================================================== */

.cx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(12px,1.2vw,18px)}
.cx-cards--tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:clamp(12px,1.2vw,16px)}
.cx-cards--call{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(14px,1.4vw,20px);margin-bottom:clamp(26px,3vw,40px)}
.cx-cards--rel{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(14px,1.4vw,20px)}
.cx-cards--rel-sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.cx-cards--build,
.cx-cards--plan{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.cx-cards--pod{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cx-cards--sector{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}

.cx-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;
  background:var(--cx-card);border:1px solid var(--cx-rule);
  border-radius:var(--cx-r-card);
  padding:clamp(20px,2.2vw,28px);color:var(--cx-ink);
  box-shadow:0 1px 2px rgba(11,20,54,.05);
  transition:background .3s var(--cx-ease),border-color .3s var(--cx-ease);
}
.cx-card--line{gap:13px;padding:clamp(22px,2.3vw,30px)}
.cx-card--sm{gap:10px;padding:clamp(18px,2vw,26px)}
.cx-card:hover{background:var(--cx-card-h);border-color:var(--cx-sig);color:var(--cx-ink)}

/* --------------------------------------------------------------------------
   THE CARD CURSOR GRID
   An 18px dot field crossed by 72px hairlines, masked to a soft disc that
   only exists where the pointer is. --r is the disc radius, tweened from 0 on
   enter; --mx/--my are the pointer in card pixels. All three are written by
   motion.js, so with no JavaScript --r stays 0 and the layer never paints.

   inset:-20px so the grid bleeds past the border rather than stopping short
   of it; the card's own overflow:hidden trims it back to the radius.
   -------------------------------------------------------------------------- */

/* Dots only. The handoff put 72px vertical hairlines under this field; they
   came out with every other line in the backgrounds. */
.cx-card__grid{
  position:absolute;inset:-20px;pointer-events:none;z-index:0;
  --cx-dot:rgba(32,78,207,.6);
  background-image:radial-gradient(var(--cx-dot) 1.35px,transparent 1.35px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(var(--r,0px) var(--r,0px) at var(--mx,50%) var(--my,50%),rgba(0,0,0,1) 0%,rgba(0,0,0,.42) 52%,rgba(0,0,0,0) 76%);
  mask-image:radial-gradient(var(--r,0px) var(--r,0px) at var(--mx,50%) var(--my,50%),rgba(0,0,0,1) 0%,rgba(0,0,0,.42) 52%,rgba(0,0,0,0) 76%);
  will-change:transform,background-position;
}

/* On the navy card the dots lift to the on-dark blue. */
.cx-card--ink .cx-card__grid,.cx-plan--ink .cx-card__grid{
  --cx-dot:rgba(159,186,255,.72);
}

/* The layer sits at z-index 0, so the card's own children are lifted over it.
   motion.js does this per child; this covers the ones that ship positioned. */
.cx-card > *:not(.cx-card__grid){position:relative;z-index:1}

.cx-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cx-card__n{font-size:11.5px;letter-spacing:.12em;text-transform:none;color:var(--cx-muted)}
.cx-card__t{font-size:clamp(19px,1.6vw,24px);letter-spacing:-.035em;line-height:1.05;margin:0}
.cx-card--line .cx-card__t{font-size:clamp(20px,1.7vw,25px);line-height:1.04}
.cx-card__t--sm{font-size:clamp(18px,1.5vw,22px);line-height:1.06}
.cx-card__t--xs{font-size:clamp(17px,1.4vw,21px);line-height:1.08}
.cx-card__t--plan{font-size:clamp(22px,2vw,28px)}
.cx-card__b{font-size:14.5px;line-height:1.55;color:var(--cx-body);margin:0;flex:1 1 auto}

.cx-card__f{
  display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.11em;
  border-top:1px solid var(--cx-rule);padding-top:13px;
}
.cx-card__r{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.11em;color:var(--cx-sig-text)}
.cx-card__arrow{display:inline-block;color:var(--cx-sig);transition:transform .4s var(--cx-ease)}
.cx-card:hover .cx-card__arrow{transform:translateX(6px)}

.cx-badge{
  align-self:flex-start;
  font-size:10px;letter-spacing:.14em;color:var(--cx-sig-text);
  background:var(--cx-sig-tint);border:1px solid var(--cx-sig-chip);
  border-radius:var(--cx-r-pill);padding:4px 10px;
}

/* ==========================================================================
   SERVICE GROUPS — Services overview
   A labelled rule: the group name and count, a hairline that takes up the
   slack, then the blurb pushed to the right.
   ========================================================================== */

.cx-group{margin-bottom:clamp(22px,2.6vw,34px)}
.cx-group__h{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.cx-group__l{font-size:11.5px;letter-spacing:.13em;color:var(--cx-ink);flex:none}
.cx-group__c{font-size:11px;letter-spacing:.1em;color:var(--cx-muted);flex:none}
.cx-group__r{height:1px;flex:1 1 40px;background:var(--cx-rule)}
.cx-group__b{font-size:14.5px;color:var(--cx-body);flex:none;max-width:44%;text-align:right}

/* ==========================================================================
   CHIPS
   ========================================================================== */

.cx-chips{display:flex;flex-wrap:wrap;gap:6px}
.cx-chip{
  border:1px solid var(--cx-chip-bd);background:var(--cx-chip-bg);padding:5px 10px;
  border-radius:var(--cx-r-pill);
  font-size:9.5px;letter-spacing:.09em;color:var(--cx-body);
}
.cx-chip--lg{
  border-color:var(--cx-rule-s);background:var(--cx-card);padding:9px 15px;
  font-size:11px;letter-spacing:.06em;text-transform:none;color:var(--cx-ink-soft);
}
.cx-chip--cert{
  border-color:var(--cx-rule);background:var(--cx-card);padding:9px 14px;
  font-size:10.5px;letter-spacing:.08em;color:var(--cx-ink-soft);
}
.cx-chips--certs{gap:8px;margin-top:clamp(26px,3vw,38px)}

.cx-chipset{margin-top:clamp(30px,4vw,52px)}
.cx-chipset--tight{margin-top:clamp(24px,3vw,40px)}
.cx-chipset__h{font-size:11px;color:var(--cx-muted);margin:0 0 16px}
.cx-chipset .cx-chips{gap:8px}

/* ==========================================================================
   HAIRLINE GRIDS
   Border-top and border-left on the container, border-right and border-bottom
   on each cell. Never border-bottom on the container — it dangles past the
   last cell as soon as the grid wraps.
   ========================================================================== */

.cx-hair{display:grid;margin:0;border-top:1px solid var(--cx-rule);border-left:1px solid var(--cx-rule)}
.cx-hair > *{border-right:1px solid var(--cx-rule);border-bottom:1px solid var(--cx-rule)}

.cx-hair--ink{border-top-color:var(--cx-ink-rule);border-left-color:var(--cx-ink-rule)}
.cx-hair--ink > *{border-right-color:var(--cx-ink-rule);border-bottom-color:var(--cx-ink-rule)}

.cx-hair--plat{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));border-color:var(--cx-rule-s)}
.cx-hair--plat > *{border-right-color:var(--cx-rule-s);border-bottom-color:var(--cx-rule-s)}
.cx-hair--quotes{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.cx-hair--sym{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cx-hair--const{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cx-hair--test{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cx-hair--phase{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.cx-hair--sla{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.cx-hair--metric{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.cx-hair--abstat{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

/* ==========================================================================
   PLATFORM TILES
   ========================================================================== */

.cx-plat{padding:clamp(20px,2.2vw,28px);display:grid;gap:14px;align-content:start;transition:background .3s}
.cx-plat__i{display:block}
.cx-plat:hover{background:var(--cx-card-h)}
.cx-plat__t{font-family:var(--cx-sans);font-size:17.5px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:0 0 5px}
.cx-plat__was{font-size:10px;letter-spacing:.07em;color:var(--cx-muted);margin:0}
.cx-plat__s{font-size:10.5px;letter-spacing:.09em;color:var(--cx-body);margin:0;line-height:1.75}

/* ==========================================================================
   INK BAND
   ========================================================================== */

.cx-band{background:var(--cx-deep);color:#fff;border:1px solid #2A35A8;border-radius:var(--cx-r-card);padding:clamp(32px,4.5vw,72px)}
/* Two explicit columns rather than auto-fit. The band holds three children —
   the copy, the steps, and the Claudeforce note spanning both — and auto-fit
   would open a third 300px track for the note to sit in rather than collapsing
   it, leaving the copy and the steps on a third of the band each. */
.cx-band--split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.cx-band--split > .cx-note{grid-column:1/-1}

/* 760px is where the two columns would each drop under ~300px, the width the
   auto-fit version used to break at, and where the hero drops its drawing. */
@media (max-width:760px){
  .cx-band--split{grid-template-columns:minmax(0,1fr)}
}
.cx-band--sla{padding:clamp(32px,4.5vw,68px)}
.cx-band__n{color:var(--cx-ink-label);margin:0 0 6px}
.cx-band__l{color:var(--cx-ink-label);margin:0 0 26px}
.cx-band--split .cx-band__l{color:var(--cx-panel)}
.cx-band__p{font-size:17px;line-height:1.55;color:var(--cx-ink-lead);margin:0 0 30px;max-width:48ch}
.cx-band__p--wide{font-size:16.5px;line-height:1.6;margin-bottom:clamp(28px,4vw,48px);max-width:62ch}

/* Across the full band, the label takes a column of its own and the copy runs
   beside it. Stacked at this width the heading would be one short line over a
   paragraph pinned to the left edge, with the right half of the box empty;
   side by side, the label anchors the left and the measure stays readable.
   The margin is gone with it — the band's grid gap is the space above now. */
.cx-note{
  border:1px solid var(--cx-ink-rule-s);border-radius:var(--cx-r-chip);padding:22px 24px;
  display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:10px 32px;align-items:start;
}
.cx-note__h{font-size:11px;letter-spacing:.13em;color:var(--cx-ink-label);margin:0;padding-top:3px}
.cx-note__b{font-size:15px;line-height:1.55;color:var(--cx-ink-lead);margin:0;max-width:86ch}

@media (max-width:760px){
  .cx-note{grid-template-columns:minmax(0,1fr)}
  .cx-note__h{padding-top:0}
}
.cx-note__b b{color:#fff;font-weight:inherit}

.cx-steps{display:grid;align-content:start}
.cx-step{border-top:1px solid var(--cx-ink-rule-s);padding-block:18px;display:flex;gap:18px;align-items:baseline}
.cx-step__n{font-size:11px;letter-spacing:.1em;color:var(--cx-ink-label);flex:none;width:26px}
.cx-step > span:last-child{display:grid;gap:5px}
.cx-step__t{font-size:18px;font-weight:700;letter-spacing:-.02em}
.cx-step__s{font-size:11.5px;letter-spacing:.06em;color:var(--cx-ink-muted)}
.cx-step__end{border-top:1px solid var(--cx-ink-rule-s)}

/* --- the six constants, and the four industry-cloud tests ---------------- */

.cx-const{padding:clamp(22px,2.6vw,32px)}
.cx-const__n{font-size:11px;letter-spacing:.12em;color:var(--cx-ink-label);margin:0 0 14px}
.cx-const__t{font-size:20px;letter-spacing:-.035em;line-height:1.08;margin:0 0 11px;color:#fff}
.cx-const__d{font-size:14.5px;line-height:1.55;color:var(--cx-ink-muted);margin:0}

/* --- the five phases on a service page ---------------------------------- */

.cx-pcard{padding:clamp(22px,2.6vw,32px)}
.cx-pcard__m{display:flex;align-items:center;margin-bottom:20px}
.cx-pcard__m span{width:10px;height:10px;border-radius:50%;background:var(--cx-ink-label);flex:none}
.cx-pcard__m i{height:1px;flex:1;background:var(--cx-ink-rule)}
.cx-pcard__n{font-size:11px;letter-spacing:.12em;color:var(--cx-ink-label);margin:0 0 10px}
.cx-pcard__t{font-size:21px;letter-spacing:-.035em;line-height:1.06;margin:0 0 12px;color:#fff}
.cx-pcard__b{font-size:14.5px;line-height:1.55;color:var(--cx-ink-muted);margin:0 0 18px}
.cx-pcard__a{font-size:10.5px;letter-spacing:.09em;color:#fff;margin:0;border-top:1px solid var(--cx-ink-rule);padding-top:14px}

/* --- SLA tiers ---------------------------------------------------------- */

/* The SLA is a real <table>: severity, first response, example. */
.cx-tw{overflow-x:auto}
.cx-sla-table{width:100%;border-collapse:collapse;border-top:1px solid var(--cx-ink-rule)}
.cx-sla-table th,.cx-sla-table td{
  text-align:left;vertical-align:top;border-bottom:1px solid var(--cx-ink-rule);
  padding:clamp(18px,2.2vw,28px) clamp(16px,2vw,28px) clamp(18px,2.2vw,28px) 0;
}
.cx-sla-table th:last-child,.cx-sla-table td:last-child{padding-right:0}
.cx-sla-table thead th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--cx-ink-label);padding-block:12px}
.cx-sla__sev{font-size:11px;letter-spacing:.12em;color:var(--cx-ink-label);margin:0;font-weight:600;white-space:nowrap}
.cx-sla__v{font-family:var(--cx-display);font-weight:700;font-size:clamp(26px,3vw,38px);letter-spacing:-.035em;line-height:1;margin:0;color:#fff;white-space:nowrap}
.cx-sla__eg{font-size:14px;line-height:1.55;color:var(--cx-ink-muted);margin:0;max-width:52ch}

/* --- industry outcome metrics ------------------------------------------- */

.cx-metric{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column-reverse}
.cx-metric__v{font-family:var(--cx-display);font-weight:700;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.035em;line-height:1;margin:0 0 12px;color:var(--cx-ink-label)}
.cx-metric__k{font-size:14.5px;line-height:1.55;color:var(--cx-ink-muted);margin:0}

/* --- the three costs on About ------------------------------------------- */

.cx-costs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(22px,3vw,40px)}
.cx-cost{padding-top:22px;border-top:1px solid var(--cx-ink-rule)}
.cx-cost__t{font-size:20px;font-weight:700;letter-spacing:-.03em;margin:0 0 12px;color:var(--cx-ground)}
.cx-cost__d{font-size:14.5px;line-height:1.6;color:var(--cx-ink-muted);margin:0}

/* ==========================================================================
   PHASE ROW — homepage method, and the four-week rhythm
   The accent on the homepage row advances with the scroll, so the top border
   colour is animated from JavaScript rather than set here.
   ========================================================================== */

.cx-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));border-left:1px solid var(--cx-rule)}
.cx-phase{
  border-right:1px solid var(--cx-rule);border-bottom:1px solid var(--cx-rule);
  border-top:2px solid var(--cx-rule);
  padding:22px clamp(18px,1.8vw,24px) clamp(28px,3vw,38px);
  transition:border-top-color .4s var(--cx-ease);
}
.cx-phases--lit .cx-phase{border-top-color:var(--cx-sig);padding-bottom:clamp(26px,3vw,34px)}
.cx-phase__n{font-size:11.5px;letter-spacing:.1em;text-transform:none;color:var(--cx-muted);margin:0 0 14px;transition:color .4s var(--cx-ease)}
.cx-phase__n--lit{color:var(--cx-sig-text)}
.cx-phase__t{font-family:var(--cx-sans);font-size:19px;font-weight:700;letter-spacing:-.025em;margin:0 0 12px}
.cx-phase__b{font-size:15px;line-height:1.55;color:var(--cx-muted);margin:0}

/* ==========================================================================
   QUOTES AND THE RETAINER PANEL
   ========================================================================== */

.cx-results__h{margin-bottom:clamp(28px,3.5vw,48px)}
.cx-results__h .cx-rail{margin-bottom:18px}

.cx-quote{margin:0;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:20px}
.cx-quote__m{font-family:var(--cx-display);font-weight:700;font-size:40px;line-height:.6;color:var(--cx-sig)}
.cx-quote blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--cx-ink-soft)}
.cx-quote blockquote p{margin:0}
.cx-quote figcaption{margin-top:auto}
.cx-quote__n{display:block;font-style:normal}
.cx-quote__r{display:block}
.cx-quote__n{font-weight:700;font-size:15.5px}
.cx-quote__r{font-size:11px;letter-spacing:.1em;color:var(--cx-muted);margin-top:5px}

.cx-retainer{
  border:1px solid var(--cx-rule-s);border-top:0;background:var(--cx-panel);
  border-radius:0 0 var(--cx-r-card) var(--cx-r-card);padding:clamp(26px,3.4vw,44px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(24px,3vw,48px);align-items:center;
}
.cx-retainer__t{font-size:clamp(24px,2.6vw,36px);letter-spacing:-.035em;line-height:1;margin:0 0 14px}
.cx-retainer__p{font-size:16.5px;line-height:1.55;color:var(--cx-muted);margin:0 0 24px;max-width:48ch}
/* A sliding pill's geometry is .cx-slide--sm's; overriding the shorthand here
   would beat .cx-slide on specificity and drop the right padding that keeps
   the badge clear of the label. Non-sliding buttons still scale down. */
.cx-retainer .cx-btn:not(.cx-slide){padding:17px 28px;font-size:12.5px}

.cx-rows{display:grid;margin:0}
.cx-row{border-top:1px solid var(--cx-rule-s);padding-block:15px;display:flex;justify-content:space-between;gap:16px;font-size:15.5px}
.cx-row__k{color:var(--cx-muted);margin:0}
.cx-row__v{font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;margin:0}
.cx-row__end{border-top:1px solid var(--cx-rule-s)}

/* ==========================================================================
   PANELS — the facts list beside a hero
   ========================================================================== */

.cx-panel{border:1px solid var(--cx-rule-s);background:var(--cx-panel);border-radius:var(--cx-r-card);padding:clamp(20px,2.4vw,34px)}
.cx-panel--diag{padding:clamp(18px,2.2vw,30px);background:var(--cx-panel)}
.cx-panel__h{font-size:11px;color:var(--cx-muted);margin:0 0 4px}
.cx-panel__h--gap{margin-bottom:18px}
.cx-panel__row{
  border-top:1px solid var(--cx-rule-s);padding-block:14px;
  display:flex;justify-content:space-between;gap:16px;font-size:15.5px;align-items:baseline;
}
.cx-panel__facts{margin:0}
.cx-panel__row > dt,.cx-panel__row > dd{margin:0;font-weight:inherit}
.cx-panel__row > :first-child{color:var(--cx-body)}
.cx-panel__row .cx-mono{font-size:12.5px;letter-spacing:.06em;text-align:right;flex:none;max-width:52%}
.cx-panel__end{border-top:1px solid var(--cx-rule-s)}

/* On a hero stage the facts panel becomes glass: the gradient behind it stays
   legible through the fill. The blur is a progressive enhancement — without it
   the panel is a slightly lighter navy, which is still correct. These sit here
   rather than with the stage so they win against .cx-panel above on order
   alone; matched on specificity, whichever comes last takes the surface. */
.cx-panel--glass{
  border:1px solid rgba(255,255,255,.16);border-radius:20px;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.cx-panel--glass .cx-panel__h{color:var(--cx-ink-label)}
.cx-panel--glass .cx-panel__row{border-top-color:rgba(255,255,255,.14)}
.cx-panel--glass .cx-panel__row > :first-child{color:var(--cx-ink-lead)}
.cx-panel--glass .cx-panel__row .cx-mono{color:#fff}
.cx-panel--glass .cx-panel__end{border-top-color:rgba(255,255,255,.14)}
.cx-panel--glass .cx-panel__row a{color:#fff;text-decoration:underline;text-decoration-color:var(--cx-ink-rule-s);text-underline-offset:3px}
.cx-panel--glass .cx-panel__row a:hover{color:var(--cx-ink-label);text-decoration-color:currentColor}
.cx-panel--glass .cx-stack__i{border-top-color:rgba(255,255,255,.14);color:var(--cx-ink-lead)}
.cx-panel--glass .cx-stack__p{background:var(--cx-ink-label)}

/* The other half of that pair. A panel holding a drawing keeps its light
   surface on navy — the service diagrams and the case study graphics are drawn
   in ink on white and do not survive being inverted — so it also has to undo
   the stage's inherited white text for everything inside it. */
.cx-panel--light{background:var(--cx-ground);color:var(--cx-ink)}
.cx-stage .cx-panel--light{
  border-color:rgba(159,186,255,.3);
  box-shadow:0 1px 2px rgba(4,9,30,.2),0 22px 48px rgba(4,9,30,.38);
}

.cx-stack{display:grid}
.cx-stack__i{border-top:1px solid var(--cx-rule-s);padding-block:13px;display:flex;gap:13px;align-items:baseline}
.cx-stack__p{width:6px;height:6px;border-radius:50%;background:var(--cx-sig);flex:none}

/* ==========================================================================
   SERVICE PAGE — symptoms, capabilities, the first call
   ========================================================================== */

.cx-sym{padding:clamp(22px,2.6vw,32px);background:var(--cx-ground);transition:background .3s}
.cx-sym:hover{background:var(--cx-card-h)}
/* The accent clears 6.88:1 on white, so this label can take it outright —
   the previous release's orange could not and needed a darker twin here. */
.cx-sym__n{font-size:11px;letter-spacing:.12em;color:var(--cx-sig);margin:0 0 14px}
.cx-sym__t{font-size:16px;line-height:1.55;color:var(--cx-ink-soft);margin:0}

.cx-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:clamp(10px,1vw,14px)}
.cx-cap{
  background:var(--cx-card);border:1px solid var(--cx-rule);border-radius:var(--cx-r-chip);
  padding:16px 18px;display:flex;gap:11px;align-items:flex-start;
  transition:background .3s,border-color .3s;
}
.cx-cap:hover{background:var(--cx-card-h);border-color:var(--cx-sig)}
.cx-cap__p{width:7px;height:7px;border-radius:50%;background:var(--cx-sig);flex:none;margin-top:7px}
.cx-cap span:last-child{font-size:14.5px;line-height:1.4;font-weight:500}

.cx-book{
  border:1px solid var(--cx-rule-s);background:var(--cx-panel);border-radius:var(--cx-r-card);
  padding:clamp(22px,2.6vw,34px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(20px,3vw,40px);align-items:center;
}
.cx-book__t{font-family:var(--cx-display);font-weight:700;font-size:clamp(20px,2vw,27px);letter-spacing:-.035em;line-height:1.1;margin:0 0 10px}
.cx-book__b{font-size:15px;line-height:1.55;color:var(--cx-body);margin:0;max-width:42ch}
.cx-book .cx-btn--line:hover{background:var(--cx-ground)}

.cx-cred{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:11px;letter-spacing:.11em;color:var(--cx-muted)}

/* --- the Web-to-Lead form on Contact --------------------------------------- */

button.cx-btn{cursor:pointer;font:inherit;font-family:var(--cx-mono);font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.cx-form{display:grid;gap:clamp(18px,2vw,26px);max-width:760px}
.cx-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.cx-form__f{display:grid;gap:8px;min-width:0}
.cx-form__f--wide{grid-column:1/-1}
.cx-form__l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cx-muted)}
.cx-form__i{
  width:100%;border:1px solid var(--cx-rule-s);background:var(--cx-ground);color:var(--cx-ink);
  font-family:var(--cx-sans);font-size:15.5px;padding:14px 16px;border-radius:var(--cx-r-chip);
  transition:border-color .25s var(--cx-ease),background .25s var(--cx-ease);
}
.cx-form__i:hover{border-color:var(--cx-sig)}
.cx-form__i:focus{outline:none;border-color:var(--cx-sig);background:#fff;box-shadow:0 0 0 3px rgba(32,78,207,.16)}
.cx-form__i--area{resize:vertical;min-height:140px;line-height:1.55}
.cx-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.cx-form__note{font-size:10.5px;letter-spacing:.09em;color:var(--cx-muted);margin:0}
.cx-form__done{border:1px solid var(--cx-rule-s);background:var(--cx-panel);border-radius:var(--cx-r-card);padding:clamp(22px,2.6vw,34px);max-width:640px;display:grid;gap:10px}
.cx-form__done-l{font-size:11px;letter-spacing:.13em;color:var(--cx-sig-text);margin:0}
.cx-form__done-t{font-family:var(--cx-display);font-weight:700;font-size:clamp(20px,2vw,27px);letter-spacing:-.035em;line-height:1.1;margin:0}
.cx-form__done-b{font-size:15px;line-height:1.55;color:var(--cx-body);margin:0 0 8px}

/* The submission failed, or was scored as a bot. */
.cx-form__err{
  border:1px solid var(--cx-sig);background:var(--cx-sig-tint);
  border-radius:var(--cx-r-chip);padding:16px 18px;margin-bottom:clamp(18px,2vw,26px);max-width:640px;
  display:grid;gap:6px;
}
.cx-form__err-l{font-size:10.5px;letter-spacing:.13em;color:var(--cx-sig-text);margin:0}
.cx-form__err-b{font-size:15px;line-height:1.55;color:var(--cx-ink-soft);margin:0}

/* The honeypot. Off-screen rather than display:none, which a bot skips. */
.cx-form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

button.cx-btn[disabled]{opacity:.6;cursor:progress}

/* --- the same form, on the navy stage --------------------------------------
   The card is the glass panel's surface with a form in it rather than rows of
   facts, so it is built from the same two values — a 7% white fill and a 16%
   white hairline — and not from a second set that would drift from them.

   Everything below is a repaint, not a re-layout: the field, the label, the
   button and the two result states each get their on-navy twin, scoped to
   .cx-stage so the identical markup keeps working unchanged on white. */
.cx-formcard{
  border:1px solid rgba(255,255,255,.16);border-radius:20px;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:clamp(22px,2.6vw,38px);
}
.cx-formcard__k{font-size:11px;color:var(--cx-ink-label);margin:0 0 10px}
.cx-formcard__t{
  font-family:var(--cx-display);font-weight:700;color:#fff;
  font-size:clamp(22px,2.2vw,30px);letter-spacing:-.035em;line-height:1.08;margin:0 0 12px;
}
.cx-formcard__b{font-size:15px;line-height:1.55;color:var(--cx-ink-lead);margin:0 0 clamp(20px,2.4vw,30px);max-width:46ch}
.cx-formcard .cx-form{max-width:none}

/* Two field columns only once the column itself is wide enough for them. The
   hero grid gives this card a little under half the page, so the viewport
   width the fields can be paired at is a good deal higher than the 640px the
   full-width form used. */
.cx-formcard .cx-form__grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){
  .cx-formcard .cx-form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.cx-stage .cx-form__l{color:var(--cx-ink-label)}
.cx-stage .cx-form__i{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff;
}
.cx-stage .cx-form__i::placeholder{color:var(--cx-ink-muted)}
.cx-stage .cx-form__i:hover{border-color:rgba(159,186,255,.55)}
.cx-stage .cx-form__i:focus{
  background:rgba(255,255,255,.12);border-color:#fff;box-shadow:0 0 0 3px rgba(159,186,255,.22);
}
/* Chrome paints its own background into an autofilled field. The inset shadow
   is the only way to override it, and without it the navy field turns white
   with white text in it the moment the browser fills the form. */
.cx-stage .cx-form__i:-webkit-autofill,
.cx-stage .cx-form__i:-webkit-autofill:hover,
.cx-stage .cx-form__i:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #1A2560 inset;
  caret-color:#fff;
}
.cx-stage .cx-form__note{color:var(--cx-ink-label)}
.cx-stage .cx-form__note a{color:#fff}
.cx-stage .cx-form__note a:hover{color:var(--cx-ink-label)}
.cx-stage button.cx-btn--primary{background:#fff;color:var(--cx-ink)}
.cx-stage button.cx-btn--primary:hover{background:var(--cx-ink-strong);color:var(--cx-ink)}

/* The two result states, on the stage. Received keeps the glass surface it is
   sitting on; Not sent keeps the accent it uses on white, lightened to carry
   on navy. */
.cx-stage .cx-form__done{border:0;background:transparent;padding:0;max-width:none}
.cx-stage .cx-form__done-l{color:var(--cx-ink-label)}
.cx-stage .cx-form__done-t{color:#fff}
.cx-stage .cx-form__done-b{color:var(--cx-ink-lead)}
.cx-stage .cx-form__err{
  border-color:rgba(159,186,255,.5);background:rgba(159,186,255,.12);max-width:none;
}
.cx-stage .cx-form__err-l{color:var(--cx-ink-label)}
.cx-stage .cx-form__err-b{color:#fff}
.cx-stage .cx-form__err-b a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Contact's closing panel: the rows that used to sit in the hero, on white. */
.cx-reach{max-width:720px}

/* ==========================================================================
   MANAGED SERVICES — scope columns and plan cards
   ========================================================================== */

.cx-scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(16px,2vw,28px)}
.cx-scope__h{font-size:11px;letter-spacing:.13em;color:var(--cx-muted);margin:0 0 14px}
.cx-scope__h--in{color:var(--cx-sig-text)}
.cx-scope__l{border-top:1px solid var(--cx-rule)}
.cx-scope__i{border-bottom:1px solid var(--cx-rule);padding-block:13px;display:flex;gap:12px;align-items:baseline;font-size:15.5px;line-height:1.45}
.cx-scope__i--out{color:var(--cx-muted)}
.cx-scope__l--apply{margin-top:clamp(18px,2vw,26px);max-width:68ch}

/* Careers, when nothing is open. A panel rather than an empty list: the
   speculative application is the call to action in that state. */
.cx-panel--note{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(18px,2vw,26px);max-width:68ch}
.cx-panel__note{font-size:15.5px;line-height:1.6;color:var(--cx-body);margin:0}
.cx-scope__p{width:7px;height:7px;border-radius:50%;background:var(--cx-sig);flex:none}
.cx-scope__d{width:7px;height:1px;background:var(--cx-rule-s);flex:none;margin-top:9px}
.cx-scope__note{font-size:14.5px;line-height:1.6;color:var(--cx-muted);margin:18px 0 0;max-width:42ch}

.cx-plan{gap:14px;padding:clamp(22px,2.4vw,32px)}
.cx-plan__rows{display:grid;gap:9px;border-top:1px solid var(--cx-rule);padding-top:14px}
.cx-plan__row{display:flex;justify-content:space-between;gap:14px;font-size:14px}
.cx-plan__row > span:first-child{color:var(--cx-body)}
.cx-plan__row .cx-mono{font-size:12px;letter-spacing:.05em;text-align:right;text-transform:none}

/* The middle plan inverts to ink — it is the one most people land on. */
.cx-plan--ink{background:var(--cx-deep);border-color:#2A35A8;color:#fff;box-shadow:0 1px 2px rgba(11,20,54,.05),0 16px 36px rgba(11,20,54,.14)}
.cx-plan--ink:hover{background:var(--cx-deep);border-color:#2A35A8;color:#fff}
.cx-plan--ink .cx-card__n,
.cx-plan--ink .cx-card__b,
.cx-plan--ink .cx-plan__row > span:first-child{color:var(--cx-ink-muted)}
.cx-plan--ink .cx-badge{color:var(--cx-ink-label);background:rgba(159,186,255,.1);border-color:var(--cx-ink-rule-s)}
.cx-plan--ink .cx-plan__rows{border-top-color:var(--cx-ink-rule)}
.cx-plan--ink .cx-card__t,.cx-plan--ink .cx-plan__row .cx-mono{color:#fff}

/* The hours are the only thing that differs between the three bands, so they
   take the display face. Tabular figures so 40, 80 and 160 sit on the same
   optical baseline across the three cards. */
.cx-plan__hrs{display:flex;align-items:baseline;gap:9px;margin:0;flex-wrap:wrap}
.cx-plan__hn{font-family:var(--cx-display);font-weight:700;font-size:clamp(40px,4.4vw,60px);letter-spacing:-.04em;line-height:.92;font-variant-numeric:tabular-nums;color:var(--cx-ink)}
.cx-plan__hu{font-size:11px;letter-spacing:.11em;color:var(--cx-muted)}
.cx-plan--ink .cx-plan__hn{color:#fff}
.cx-plan--ink .cx-plan__hu{color:var(--cx-ink-label)}

/* "Most common" is two words and wraps the badge onto a second line at narrow
   widths, which pushes card 02's name and hours down out of line with its
   neighbours. The badges are short enough that nowrap costs nothing. */
.cx-plan .cx-badge{white-space:nowrap}

/* Rollover is the one thing that genuinely differs, so it is stated once under
   the grid rather than repeated on every card. */
.cx-pnote{border:1px solid var(--cx-rule-s);border-left:3px solid var(--cx-sig);background:var(--cx-panel);border-radius:var(--cx-r-chip);padding:clamp(18px,2vw,26px);margin-top:clamp(18px,2vw,26px);display:grid;gap:10px}
.cx-pnote__h{font-size:11px;letter-spacing:.13em;color:var(--cx-sig-text);margin:0}
.cx-pnote__b{font-size:15px;line-height:1.6;color:var(--cx-body);margin:0;max-width:64ch}
.cx-pnote__b b{color:var(--cx-ink);font-weight:inherit}

/* The excluded column now has prose beside it rather than a second list, so
   the first paragraph starts flush with the list's first row. */
.cx-scope--out{margin-top:clamp(10px,1.4vw,18px)}
.cx-scope__note--tight{margin-top:0}

/* ==========================================================================
   INDUSTRIES FILTER
   ========================================================================== */

.cx-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:clamp(18px,2vw,26px)}
.cx-filter__h{font-size:11px;letter-spacing:.13em;color:var(--cx-muted);margin-right:6px}
.cx-filter__c{
  border:1px solid var(--cx-rule-s);background:var(--cx-ground);color:var(--cx-body);
  padding:9px 16px;border-radius:var(--cx-r-pill);
  font-family:var(--cx-mono);font-weight:600;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.cx-filter__c:hover{border-color:var(--cx-sig);background:var(--cx-sig-tint);color:var(--cx-sig-text)}
.cx-filter__c.is-on{background:var(--cx-sig);border-color:var(--cx-sig);color:#fff}
.cx-filter__c.is-on:hover{background:var(--cx-sig-deep);border-color:var(--cx-sig-deep);color:#fff}
.cx-cards--sector [data-shape][hidden]{display:none}

/* ==========================================================================
   CASE STUDIES
   Three cards to a row on a desktop, each carrying a motif drawing, the
   headline and its three results. The detail page reuses the industry page's
   sections and adds the drawing to the at-a-glance panel.
   ========================================================================== */

.cx-cards--cases{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,20px)}
.cx-cards--cases [data-shape][hidden]{display:none}

.cx-case{gap:14px}
.cx-case__client{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cx-muted);margin:0;line-height:1.5}
.cx-case__client--hero{margin:0 0 14px;font-size:12px;color:var(--cx-ink)}

.cx-case__art{
  border:1px solid var(--cx-rule);background:var(--cx-ground);border-radius:var(--cx-r-chip);
  padding:clamp(10px,1vw,16px) clamp(12px,1.2vw,20px);
}
.cx-case__art--hero{margin-bottom:22px;background:var(--cx-ground)}
.cx-case__g{display:block;width:100%;height:auto}
.cx-case .cx-card__t{margin-top:2px}

/* The three results: a hairline row, value over label. */
.cx-case__res{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 0 0;
  border-top:1px solid var(--cx-rule);border-left:1px solid var(--cx-rule);
}
.cx-case__r{
  display:flex;flex-direction:column-reverse;gap:6px;padding:12px 10px 12px 12px;
  border-right:1px solid var(--cx-rule);border-bottom:1px solid var(--cx-rule);min-width:0;
}
.cx-case__v{
  font-family:var(--cx-display);font-weight:700;font-size:clamp(20px,1.6vw,26px);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cx-ink);margin:0;
  overflow-wrap:anywhere;
}
.cx-case__k{font-size:9.5px;letter-spacing:.06em;color:var(--cx-muted);margin:0;line-height:1.45;text-transform:none}
.cx-case__f{justify-content:space-between;color:var(--cx-muted);margin-top:auto}

.cx-h1--case{max-width:22ch}
.cx-panel--case{padding-top:clamp(16px,1.8vw,24px)}

.cx-btns--gap{margin-top:clamp(20px,2.4vw,32px)}
/* A sector name can be four words long; this button is allowed to wrap. */
.cx-btn--wrap{white-space:normal;text-align:left;line-height:1.35}

/* --- detail page -------------------------------------------------------- */

.cx-panel__h--stack{margin-top:22px;margin-bottom:12px}
.cx-panel__row .cx-panel__v--wrap{max-width:60%;text-transform:none;letter-spacing:.02em;font-size:12px;line-height:1.45}
.cx-panel__row dd a{color:var(--cx-ink);text-decoration:underline;text-decoration-color:var(--cx-rule-s);text-underline-offset:3px}
.cx-panel__row dd a:hover{color:var(--cx-sig-text);text-decoration-color:currentColor}

.cx-case-prose p{font-size:16.5px;line-height:1.65;color:var(--cx-body);margin:0 0 18px;max-width:62ch}
.cx-case-prose p:last-child{margin-bottom:0}

.cx-band__src{font-size:11px;letter-spacing:.08em;color:var(--cx-ink-label);margin:clamp(22px,2.6vw,34px) 0 0;max-width:80ch;line-height:1.6}

.cx-quote--solo{border:1px solid var(--cx-rule);background:var(--cx-card);border-radius:var(--cx-r-card);padding:clamp(28px,3.6vw,52px)}
.cx-quote--solo blockquote{font-family:var(--cx-display);font-weight:600;font-size:clamp(20px,2.1vw,29px);letter-spacing:-.025em;line-height:1.25;color:var(--cx-ink);max-width:34ch}

/* --- the sector page's link into the stories ---------------------------- */

.cx-field{
  border:1px solid var(--cx-rule-s);background:var(--cx-panel);border-radius:var(--cx-r-card);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);
  align-items:center;padding:clamp(22px,2.8vw,40px);
}
.cx-field__l{font-size:11px;letter-spacing:.13em;color:var(--cx-sig-text);margin:0 0 10px}
.cx-field__t{font-size:clamp(20px,2vw,28px);letter-spacing:-.035em;line-height:1.08;margin:0 0 10px;max-width:26ch}
.cx-field__p{font-size:15.5px;line-height:1.55;color:var(--cx-body);margin:0;max-width:56ch}
.cx-field__stat{display:flex;flex-direction:column-reverse;text-align:right}
.cx-field__v{font-family:var(--cx-display);font-weight:700;font-size:clamp(36px,4vw,56px);letter-spacing:-.04em;line-height:1;color:var(--cx-ink)}
.cx-field__k{font-size:10.5px;letter-spacing:.1em;color:var(--cx-muted);text-transform:uppercase;margin:0 0 8px;max-width:18ch;margin-left:auto}

/* ==========================================================================
   ABOUT
   ========================================================================== */

/* The about hero is a .cx-stage: the surface, the min-height and the padding
   all come from there. The class stays as the hook for the rules below and for
   the brush stroke's on-navy colour — it used to carry
   `background:var(--cx-ink)`, the flat navy the handoff rules out. */
.cx-abhero__n{color:var(--cx-ink-label);margin:0 0 6px}
.cx-abhero__l{color:var(--cx-ink-label);margin:0}
.cx-abhero__p{margin:clamp(24px,3vw,36px) 0 0;font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--cx-ink-lead);max-width:56ch}

/* The same call as the section heads: the number sat in a 170px column beside
   the claim, and with the heads full width it was the last sidebar on a
   marketing page. It now sits above the claim, as its label. */
.cx-belief{
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;
  padding-block:clamp(30px,3.6vw,48px);border-top:1px solid var(--cx-rule);
}
.cx-belief__n{font-size:11.5px;letter-spacing:.12em;text-transform:none;color:var(--cx-sig-text)}
.cx-belief__c{font-size:clamp(24px,3.1vw,44px);letter-spacing:-.04em;line-height:1.04;margin:0;max-width:20ch}
.cx-belief__b{margin:18px 0 0;font-size:16.5px;line-height:1.6;color:var(--cx-body);max-width:62ch}
.cx-belief__end{border-top:1px solid var(--cx-rule)}

.cx-abstat{padding:clamp(26px,3vw,40px) clamp(18px,2vw,26px);display:flex;flex-direction:column-reverse}
.cx-abstat__v{margin:0;font-family:var(--cx-display);font-size:clamp(34px,4vw,54px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cx-abstat__k{margin:12px 0 0;font-size:10.5px;letter-spacing:.1em;color:var(--cx-muted)}

/* ==========================================================================
   BREADCRUMBS, FAQ, CLOSING CTA
   ========================================================================== */

.cx-crumbs{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--cx-mono);font-weight:600;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cx-muted);
}
.cx-crumbs a{color:var(--cx-muted)}
.cx-crumbs a:hover{color:var(--cx-sig)}
.cx-crumbs [aria-current]{color:var(--cx-ink)}

.cx-faq{border-top:2px solid var(--cx-ink)}
.cx-faq__i{border-bottom:1px solid var(--cx-rule)}
.cx-faq__i > summary{
  list-style:none;cursor:pointer;display:flex;gap:20px;align-items:baseline;
  justify-content:space-between;padding-block:20px;
  transition:padding-left .3s var(--cx-ease),color .3s;
}
.cx-faq__i > summary::-webkit-details-marker{display:none}
.cx-faq__i > summary:hover{padding-left:10px;color:var(--cx-sig)}
.cx-faq__q{font-family:var(--cx-display);font-weight:700;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.03em;line-height:1.16}
.cx-faq__s{flex:none;font-family:var(--cx-mono);font-weight:600;font-size:18px;color:var(--cx-sig);line-height:1}
.cx-faq__s::before{content:"+"}
.cx-faq__i[open] .cx-faq__s::before{content:"\2013"}
.cx-faq__a{margin:0;padding:0 0 24px;font-size:16px;line-height:1.65;color:var(--cx-body);max-width:62ch}

.cx-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,4vw,64px);align-items:end;margin-top:clamp(30px,4vw,64px)}
.cx-cta__p{font-size:17px;line-height:1.55;color:var(--cx-ink-soft);margin:0;max-width:44ch}

/* ==========================================================================
   FOOTER — the curtain reveal
   An in-flow wrapper clipped to its own box holds a position:fixed panel, so
   the page slides up over a footer that is already pinned to the bottom of
   the viewport rather than scrolling in behind it.

   Three things this depends on, each of which broke it once:

   1. `contain:paint` goes on the PANEL, never the wrapper. On the wrapper it
      makes it a containing block for the fixed child, which lands the panel
      inside the wrapper and removes the reveal entirely.
   2. The panel is sized by script to min(viewport, content) — never a hard
      100vh, which leaves dead space under the bar on a tall screen. The
      height here is only the pre-script guess.
   3. If the content is taller than the viewport, or the viewport is narrow,
      the whole thing falls back to an ordinary in-flow footer. motion.js sets
      that inline; the media query below is the no-JS half of the same rule.
   ========================================================================== */

.cx-ftw{
  position:relative;z-index:0;width:100%;height:100vh;min-height:620px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}

.cx-ft{
  position:fixed;bottom:0;left:0;width:100%;height:100vh;min-height:620px;
  overflow:hidden;contain:paint;
  background:var(--cx-ink);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
}

/* --- the three background layers ---------------------------------------- */

.cx-ft__aurora{
  position:absolute;left:50%;top:52%;width:86vw;height:56vh;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(90px);
  background:radial-gradient(circle at 50% 50%,rgba(32,78,207,.5) 0%,rgba(42,53,168,.26) 44%,rgba(11,20,54,0) 72%);
  animation:cx-breathe 9s ease-in-out infinite alternate;pointer-events:none;
}
@keyframes cx-breathe{
  from{transform:translate(-50%,-50%) scale(1);opacity:.55}
  to{transform:translate(-50%,-50%) scale(1.12);opacity:1}
}

/* A grid of dots, not of lines — it used to be two 1px hairline gradients
   crossing at 64px. Same spacing, same weight on the page, no lines. */
.cx-ft__mesh{
  position:absolute;inset:0;pointer-events:none;background-size:64px 64px;
  background-image:radial-gradient(rgba(159,186,255,.28) 1.3px,transparent 1.3px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,1) 22%,rgba(0,0,0,1) 62%,transparent);
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,1) 22%,rgba(0,0,0,1) 62%,transparent);
}

/* The wordmark is outlined, not filled: a 1.2px stroke plus a gradient
   clipped to the glyphs. Its size is set by script to min(17vw, panel*.46) so
   it can never outgrow the panel it sits in; the clamp is the first paint. */
.cx-ft__giant{
  position:absolute;left:50%;bottom:-4.4vh;z-index:1;
  transform:translateX(-50%);white-space:nowrap;pointer-events:none;user-select:none;
  font-family:var(--cx-display);font-weight:800;
  font-size:clamp(84px,17vw,330px);line-height:.74;letter-spacing:-.05em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.2px rgba(159,186,255,.5);
  background:linear-gradient(180deg,rgba(159,186,255,.52) 0%,rgba(159,186,255,.2) 48%,rgba(159,186,255,.04) 86%);
  -webkit-background-clip:text;background-clip:text;
  will-change:transform,opacity;
}

/* --- the content stack --------------------------------------------------- */

.cx-ft__stack{
  position:relative;z-index:2;will-change:transform,opacity;
  width:100%;max-width:var(--cx-col);margin:0 auto;
  padding:clamp(38px,6.4vh,80px) var(--cx-gut) 0;
}

/* Four columns: brand and proof, contact, Know more, then Privacy. The service
   and sector lines are not repeated here — they hang off Services and
   Industries in the nav, the same as in the header. Privacy is the narrowest
   track because it carries one link; it is a column rather than a line in the
   bottom bar so the policy is findable at the same level as everything else. */
.cx-ft__main{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,.5fr);
  gap:clamp(24px,3vw,52px);align-items:start;
  padding:0 0 clamp(52px,8vh,104px);
}

.cx-ft__logo{display:block;margin:0 0 14px}
.cx-ft__logo img{display:block;width:clamp(148px,13vw,186px);height:auto}
.cx-ft__desc{font-size:14.5px;line-height:1.6;color:var(--cx-ink-muted);margin:0 0 14px;max-width:40ch}
.cx-ft__addr{
  font-family:var(--cx-mono);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cx-ink-muted);margin:0;line-height:1.9;font-style:normal;
}

/* The country over each office. Same mono as the address so the block reads as
   one thing, in the label blue so the eye finds the two offices before it
   reads either address. */
.cx-ft__office{display:block;color:var(--cx-ink-label);letter-spacing:.16em}

/* The profile marks, moved up out of the bottom bar. */
.cx-ft__profiles{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:20px 0 0;padding:0}
.cx-ft__profiles a{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--cx-r-chip);
  border:1px solid var(--cx-ink-rule);color:var(--cx-ink-lead);
  transition:color .25s,border-color .25s,background .25s;
}
.cx-ft__profiles a:hover{color:#fff;border-color:var(--cx-ink-label);background:rgba(159,186,255,.1)}
.cx-ft__profiles svg{display:block}

/* The Toptal badge, as Toptal issues it: a cyan rim clipped to the same
   hexagon as the card inside it, and four radial highlights multiplied together
   for the frosted corners. Namespaced from the single-letter classes it ships
   with — see cloudoxia_toptal_badge().

   Every measurement is a ratio of --cx-ttp-w, so one number resizes the badge
   without redrawing it. At 200px these ratios reproduce Toptal's own numbers
   exactly (24/200 top padding, 19/200 heading, 120/200 rule, and so on); the
   footer just asks for a smaller one. */
.cx-ttp{
  --cx-ttp-w:104px;
  --cx-ttp-hex:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);
  /* Toptal sets the badge in proxima-nova over an Arial fallback. The kit
     that served the first face was the site's second font system and was
     dropped; the fallback is what Toptal itself specifies. */
  font-family:Arial,Helvetica,sans-serif;flex:none;
}
.cx-ttp__hex{display:inline-block;background:#25A9EF;padding:calc(var(--cx-ttp-w) * .03);clip-path:var(--cx-ttp-hex)}
.cx-ttp__card{
  width:var(--cx-ttp-w);
  padding:calc(var(--cx-ttp-w) * .12) 0 calc(var(--cx-ttp-w) * .2);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--cx-ttp-w) * .04);
  color:#204ECF;text-align:center;
  background:
    radial-gradient(circle at 20% -10%,#00C3FF -80%,#fff 30%),
    radial-gradient(circle at -20% 20%,#00C3FF -80%,#fff 30%),
    radial-gradient(circle at 70% 100%,#00C3FF -80%,#fff 30%),
    radial-gradient(circle at 120% 80%,#00C3FF -80%,#fff 30%);
  background-blend-mode:multiply;
  clip-path:var(--cx-ttp-hex);
  box-shadow:0 calc(var(--cx-ttp-w) * .14) calc(var(--cx-ttp-w) * .25) rgba(6,30,96,.35);
}
.cx-ttp__stars{display:block;width:calc(var(--cx-ttp-w) * .32);height:auto}
.cx-ttp__t{margin:0;font-size:calc(var(--cx-ttp-w) * .095);font-weight:700;line-height:1;text-transform:uppercase}
.cx-ttp__rule{width:calc(var(--cx-ttp-w) * .6);height:1px;background:#25A9EF}
.cx-ttp__by{font-size:calc(var(--cx-ttp-w) * .08);margin-bottom:calc(var(--cx-ttp-w) * -.03)}
.cx-ttp__logo{display:block;width:calc(var(--cx-ttp-w) * .5);height:auto}
.cx-ttp__cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:calc(var(--cx-ttp-w) * .02) calc(var(--cx-ttp-w) * .1);
  border-radius:calc(var(--cx-ttp-w) * .03);background:#296BFF;color:#fff;
  font-size:calc(var(--cx-ttp-w) * .08);font-weight:500;
}
.cx-ttp__cta:hover{background:#204ECF;color:#fff}

.cx-ft__contact{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.cx-ft__line{color:var(--cx-ink-lead);font-size:14.5px;line-height:1.5}
.cx-ft__line:hover{color:#fff}

/* The two credentials, side by side and matched on height rather than width:
   one is a square, the other a hexagon. */
.cx-ft__badges{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
.cx-ft__badge{display:block;flex:none}
.cx-ft__badge img{display:block;width:76px;height:auto;border-radius:10px}

.cx-ft__h{
  font-family:var(--cx-mono);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cx-ink-label);margin:0 0 16px;
}
.cx-ft__col{display:grid;gap:10px}
.cx-ft__col a{color:var(--cx-ink-lead);font-size:14px;line-height:1.35;display:block}
.cx-ft__col a:hover{color:#fff}

/* --- the bottom bar ------------------------------------------------------ */

.cx-ft__bar{
  position:relative;z-index:3;border-top:1px solid var(--cx-ink-rule);
  background:linear-gradient(180deg,rgba(11,20,54,0),rgba(11,20,54,.62) 45%,rgba(11,20,54,.86));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.cx-ft__bar-in{
  max-width:var(--cx-col);margin:0 auto;
  padding:clamp(14px,2.2vh,22px) var(--cx-gut) clamp(18px,2.8vh,30px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--cx-mono);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.cx-ft__cr{color:var(--cx-ink-muted)}
.cx-ft__cr a{color:inherit;margin-left:14px;text-decoration:underline;text-decoration-color:var(--cx-ink-rule);text-underline-offset:3px}
.cx-ft__cr a:hover{color:#fff;text-decoration-color:currentColor}
.cx-ft__partner{display:flex;align-items:center;gap:9px;color:var(--cx-ink-strong)}
.cx-ft__dot{
  width:7px;height:7px;border-radius:50%;background:var(--cx-status);flex:none;
  animation:cx-pulse 2.4s ease-in-out infinite;
}
@keyframes cx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.cx-ft__top-btn{
  display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--cx-ink-lead);
  font-family:var(--cx-mono);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.cx-ft__top-btn:hover{color:#fff}
.cx-ft__top-btn svg{display:block}

/* --- fallbacks ----------------------------------------------------------- */

/* Narrow viewports never pin: the stack is far taller than the screen there,
   so the curtain would clip it. motion.js writes the same thing inline when
   the content outgrows the viewport at any width. */
@media (max-width:900px){
  .cx-ftw{height:auto;min-height:0;clip-path:none}
  .cx-ft{position:static;height:auto;min-height:0}
  .cx-ft__main{padding-bottom:clamp(32px,5vh,56px)}
}
/* Two up: brand over contact on the left, Know more over Privacy on the right.
   Four narrow tracks at this width leave the nav labels wrapping mid-word. */
@media (max-width:1040px){
  .cx-ft__main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:720px){
  .cx-ft__main{grid-template-columns:1fr}
}

/* With motion off the panel is simply there — the wordmark and the stack
   resolve to their final state instead of waiting on a scroll that never
   animates. The aurora and the pulse stop; nothing disappears. */
@media (prefers-reduced-motion:reduce){
  .cx-ft__aurora,.cx-ft__dot{animation:none!important}
  .cx-ft__giant{transform:translateX(-50%)!important;opacity:1!important}
  .cx-ft__stack{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   BLOG
   Not in the source design — the handoff left /blogs undesigned. Built from
   the same vocabulary as the rest of the site: a mono rail down the left,
   hairline rules instead of cards, display headings at size, and the same
   closing band. Nothing new is invented here.
   ========================================================================== */

.cx-wrap{width:100%;max-width:var(--cx-col);margin-inline:auto;padding-inline:var(--cx-gut)}

/* The measure goes on the elements, not on the wrapper. `ch` resolves against
   the font size of the box it is set on, so 24ch on the wrapper — body text at
   17px — was a ~180px column, and the display H1 inside it broke "Notes from
   the build." into four stacked words with the lead in a ribbon beside it. On
   the heading itself 24 characters means 24 characters of display type, which
   is what was meant; .cx-h1--about sets its measure the same way. */
.cx-blog-head .cx-h1{max-width:15ch}
.cx-blog-head .cx-lead{max-width:56ch}
.cx-h1--post{font-size:clamp(34px,4.6vw,68px);line-height:.96;max-width:20ch}

/* The author page: the same head as the blog index, with a person in it. */
.cx-authorhead__p{display:block;width:96px;height:96px;object-fit:cover;filter:grayscale(1);margin-bottom:24px}
.cx-authorhead__r{margin-top:16px;color:var(--cx-sig)}
.cx-authorhead__l{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:26px}
.cx-authorhead__l a{color:var(--cx-muted);text-decoration:none;border-bottom:1px solid var(--cx-rule-s);padding-bottom:2px}
.cx-authorhead__l a:hover{color:var(--cx-sig);border-color:var(--cx-sig)}

/* The mono index label above a page or archive title. */
.cx-idx{color:var(--cx-muted)}

.cx-page-head{padding-block:clamp(56px,7vw,96px) clamp(32px,4vw,48px)}
.cx-page-head h1{font-size:clamp(38px,6vw,84px);letter-spacing:-.045em;line-height:.92;margin-bottom:22px}
.cx-page-head .cx-lead{margin-top:0}

/* A topic chip is a real link to a real archive, so it reuses the filter chip
   from the Industries page rather than a second, near-identical thing. */
.cx-filter__c{display:inline-block;text-decoration:none}
a.cx-filter__c:hover{color:var(--cx-ink)}
a.cx-filter__c.is-on:hover{color:#fff}

/* --- the post list ---------------------------------------------------- */

.cx-posts{display:flex;flex-direction:column;border-top:1px solid var(--cx-rule)}

.cx-post{
  position:relative;display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(18px,3vw,40px);
  padding-block:clamp(26px,3.2vw,42px);border-bottom:1px solid var(--cx-rule);align-items:start;
  transition:background .3s var(--cx-ease);
}
.cx-post:hover{background:var(--cx-card-h)}

/* A stretched link so the whole row is a target. Mouse only — the title and
   the Read link are the real, focusable ones. */
.cx-post__hit{position:absolute;inset:0}

.cx-post__rail{
  display:flex;flex-direction:column;gap:8px;padding-top:5px;
  font-size:10.5px;font-weight:500;letter-spacing:.09em;color:var(--cx-muted);
}
.cx-post__rail a{color:var(--cx-muted);position:relative;z-index:1}
.cx-post__rail a:hover{color:var(--cx-sig)}
.cx-post__sep{opacity:.5}
.cx-post__rail--single{flex-direction:row;flex-wrap:wrap;gap:10px 22px;padding-top:0;margin-bottom:22px}

.cx-post__b{display:flex;flex-direction:column;gap:12px;min-width:0}
.cx-post__t{
  font-family:var(--cx-display);font-weight:700;
  font-size:clamp(22px,2.4vw,32px);letter-spacing:-.035em;line-height:1.08;margin:0;
}
.cx-post__t a{position:relative;z-index:1}
.cx-post__t a:hover{color:var(--cx-sig-text)}
.cx-post__x{font-size:15.5px;line-height:1.6;color:var(--cx-body);margin:0;max-width:64ch}
.cx-post__r{
  display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.11em;
  color:var(--cx-sig-text);margin-top:2px;
}
.cx-post:hover .cx-card__arrow{transform:translateX(6px)}

.cx-badge--post{
  margin-left:10px;vertical-align:middle;display:inline-block;
  font-size:9.5px;letter-spacing:.13em;
}

.cx-empty{padding-block:clamp(32px,5vw,64px);color:var(--cx-muted)}

/* --- pagination ------------------------------------------------------- */

.cx-pagination{
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(36px,4vw,56px);
  font-family:var(--cx-mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.cx-pagination a,.cx-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding-inline:14px;
  border:1px solid var(--cx-rule);border-radius:var(--cx-r-pill);color:var(--cx-ink);
  transition:background .25s var(--cx-ease),color .25s,border-color .25s;
}
.cx-pagination a:hover,.cx-pagination .page-numbers.current{background:var(--cx-sig);color:#fff;border-color:var(--cx-sig)}
.cx-pagination .page-numbers.dots{border-color:transparent}

/* --- the article ------------------------------------------------------ */

/* The article runs the same two columns as a row in the post list: the mono
   rail on the left, the writing on the right. A centred measure would read as
   a different site — nothing else here is centred. */
.cx-article{
  display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(18px,3vw,40px);align-items:start;
}
.cx-article__b{min-width:0;max-width:74ch}

/* Clears the sticky header, so the date and category stay with the reader. */
.cx-post__rail--sticky{position:sticky;top:92px;padding-top:12px}

/* The policy's contents rail. Thirteen section titles do not survive being
   set in tracked uppercase in a 190px column, so this one keeps sentence case
   and normal spacing while the rail's colour, rhythm and stickiness stay. */
.cx-post__rail--toc{gap:11px;font-size:11.5px;letter-spacing:.02em;text-transform:none;line-height:1.45}
.cx-post__rail--toc a{display:block}

/* The rail jumps to a heading and the site header is sticky over it. */
.cx-prose h2[id],.cx-prose h3[id]{scroll-margin-top:104px}

.cx-article__lead{margin-top:22px;max-width:62ch}
.cx-article__hero{margin-block:clamp(32px,4vw,52px) 0}
.cx-article__hero img{width:100%;display:block}

.cx-prose{
  max-width:74ch;padding-block:clamp(32px,4vw,52px) 0;
  font-size:17.5px;line-height:1.72;color:var(--cx-ink-soft);
}
.cx-prose > * + *{margin-top:1.35em}
.cx-prose p{color:inherit}
.cx-prose h2{font-size:clamp(26px,3.2vw,38px);margin-top:2em;letter-spacing:-.035em;line-height:1.05}
.cx-prose h3{font-size:clamp(20px,2.2vw,25px);margin-top:1.8em}
.cx-prose h4,.cx-prose h5,.cx-prose h6{font-size:18px;margin-top:1.6em}
.cx-prose a{color:var(--cx-sig-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cx-prose a:hover{color:var(--cx-sig)}
.cx-prose ul,.cx-prose ol{padding-left:1.3em;margin-block:1.35em}
.cx-prose li + li{margin-top:.5em}
.cx-prose li::marker{color:var(--cx-muted)}
.cx-prose img,.cx-prose figure{margin-block:2em}
.cx-prose figure{max-width:100%}
.cx-prose figure img{width:100%;display:block}
.cx-prose figcaption{
  margin-top:12px;font-family:var(--cx-mono);font-weight:600;font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--cx-muted);
}
.cx-prose blockquote{
  margin:2em 0;padding-left:26px;border-left:2px solid var(--cx-sig);
  font-family:var(--cx-display);font-size:clamp(20px,2.4vw,27px);
  font-weight:700;letter-spacing:-.03em;line-height:1.3;color:var(--cx-ink);
}
.cx-prose blockquote p{color:inherit;font-size:inherit}
.cx-prose blockquote cite{
  display:block;margin-top:14px;font-family:var(--cx-mono);font-weight:600;font-size:11px;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cx-muted);
}
.cx-prose code,.cx-prose kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--cx-panel);padding:2px 6px;border:1px solid var(--cx-rule);border-radius:6px}
.cx-prose pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.62;background:var(--cx-ink);color:#fff;border-radius:var(--cx-r-chip);padding:24px;overflow-x:auto;margin-block:2em}
.cx-prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.cx-prose hr,.cx-prose .wp-block-separator{border:0;height:1px;background:var(--cx-rule);margin-block:2.6em}

/* A migrated table can be wider than the measure, so it gets its own scroll
   container rather than pushing the page sideways. */
.cx-prose table{width:100%;border-collapse:collapse;font-size:15px;margin-block:2em;display:block;overflow-x:auto}
.cx-prose th,.cx-prose td{border:1px solid var(--cx-rule);padding:11px 14px;text-align:left;vertical-align:top}
.cx-prose th{font-family:var(--cx-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--cx-panel)}

.cx-authorbox{
  display:flex;gap:22px;align-items:flex-start;
  max-width:74ch;margin:clamp(44px,5vw,72px) 0 0;
  padding-top:28px;border-top:2px solid var(--cx-ink);
}
.cx-authorbox img{flex:none;width:64px;height:64px;border-radius:0;filter:grayscale(1)}
.cx-authorbox__n{font-family:var(--cx-display);font-size:18px;font-weight:700;letter-spacing:-.03em}
.cx-authorbox__r{margin-top:4px;font-family:var(--cx-mono);font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cx-sig)}
.cx-authorbox p{margin-top:12px;font-size:14.5px;max-width:52ch;color:var(--cx-body)}

/* --- search form ------------------------------------------------------ */

.cx-search{margin-top:clamp(24px,3vw,36px);max-width:520px}
.cx-search .wp-block-search__inside-wrapper{border:1px solid var(--cx-rule-s);background:var(--cx-ground);border-radius:var(--cx-r-pill);overflow:hidden}
.cx-search .wp-block-search__input{border:0;background:transparent;padding:15px 16px;font-family:var(--cx-sans);font-size:15px;color:var(--cx-ink)}
.cx-search .wp-block-search__input:focus{outline:none}
.cx-search .wp-block-search__button{
  margin:0;border:0;border-left:1px solid var(--cx-rule-s);
  background:var(--cx-sig);color:#fff;
  font-family:var(--cx-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:15px 24px;cursor:pointer;
  transition:background .3s var(--cx-ease);
}
.cx-search .wp-block-search__button:hover{background:var(--cx-sig-deep)}

/* ==========================================================================
   WORDPRESS BLOCK INTEGRATION
   ========================================================================== */

.wp-block-group{margin-block:0}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.alignwide{max-width:var(--cx-col);margin-inline:auto}
.aligncenter{margin-inline:auto}

.wp-block-button__link{
  font-family:var(--cx-mono);font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:20px 34px;border-radius:var(--cx-r-pill);
}

.wp-block-post-featured-image{margin:0}
.wp-block-post-featured-image img{display:block;width:100%}

.editor-styles-wrapper{background:var(--cx-ground)}

/* The placeholder both dynamic blocks show in the site editor. */
.cx-editor-note{
  border:1px dashed var(--cx-rule-s);background:var(--cx-panel);border-radius:var(--cx-r-chip);padding:22px;
  font-family:var(--cx-mono);font-weight:600;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cx-muted);
}

.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal],[data-tile],[data-step],[data-node],[data-line],[data-rule]{
    opacity:1!important;transform:none!important;
  }
  [data-flow]{opacity:0!important}
  .cx-diag__lines line{stroke-dashoffset:0!important}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1080px){
  .cx-cards--cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-hd__burger{display:grid}
  .cx-hd__in{flex-wrap:wrap;align-items:center}
  .cx-nav{
    order:3;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:0;display:none;padding-bottom:18px;border-top:1px solid var(--cx-rule);
  }
  .cx-hd[data-open] .cx-nav{display:flex}
  .cx-hd__cta{margin-left:0;order:2}
  .cx-nav__l,.cx-menu__t{padding-block:14px;border-bottom:1px solid var(--cx-rule)}
  .cx-nav__l:hover,.cx-menu__t:hover{border-bottom-color:var(--cx-rule);color:var(--cx-sig)}
  .cx-menu{display:block}
  .cx-menu__p{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;padding:6px 0 14px;background:transparent;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    display:none;
  }
  .cx-menu--wide .cx-menu__p{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
  .cx-menu[open] .cx-menu__p{display:grid}
  .cx-menu__i{white-space:normal}
}

@media (max-width:860px){
  /* Once .cx-group__h wraps, the blurb keeps its 44% cap and right alignment
     and renders as a thin ribbon hugging the right edge. Give it the row. */
  .cx-group__b{flex-basis:100%;max-width:none;text-align:left}
  .cx-field{grid-template-columns:1fr}
  .cx-field__stat{text-align:left}
  .cx-field__k{margin-left:0}
  .cx-shead--gap,.cx-shead--gap-sm{margin-bottom:clamp(20px,3vw,32px)}
}

@media (max-width:860px){
  .cx-post,.cx-article{grid-template-columns:1fr;gap:14px}
  .cx-post__rail{flex-direction:row;flex-wrap:wrap;gap:10px 18px;padding-top:0}
  .cx-post__rail--sticky{position:static;padding-top:0;margin-bottom:8px}
  .cx-post__rail--toc{flex-direction:column;gap:8px;margin-bottom:18px}
}

@media (max-width:640px){
  .cx-cards--cases{grid-template-columns:1fr}
  .cx-form__grid{grid-template-columns:1fr}
  .cx-diag__g{aspect-ratio:auto;grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .cx-diag__c{justify-content:stretch!important}
  .cx-diag__n,.cx-diag__core{width:100%}
  .cx-diag__ring,.cx-diag__lines{display:none}
  .cx-btns--end{justify-content:flex-start}
  .cx-cta,.cx-hero{gap:28px}
  .cx-prose{font-size:16.5px}
  .cx-authorbox{flex-direction:column;gap:16px}
}

@media (max-width:640px){
  /* Each SLA row becomes its own block: severity and time side by side,
     the example underneath, the column header restated from data-label. */
  .cx-sla-table,.cx-sla-table tbody{display:block}
  .cx-sla-table thead{display:none}
  .cx-sla-table tr{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:end;padding-block:20px;border-bottom:1px solid var(--cx-ink-rule)}
  .cx-sla-table th,.cx-sla-table td{display:block;padding:0;border:0}
  .cx-sla-table .cx-sla__eg{grid-column:1/-1;max-width:none}
  .cx-sla-table .cx-sla__v::before{
    content:attr(data-label);display:block;margin-bottom:6px;
    font-family:var(--cx-mono);font-size:10px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--cx-ink-label);
  }
}

@media (max-width:420px){
  /* :not(.cx-slide) matters. A sliding pill's horizontal padding is the
     badge's clearance, written from the custom properties below; a flat pair
     here overrides it on source order and parks the label under the badge. */
  .cx-btn:not(.cx-slide){padding:16px 22px;font-size:12px}
  .cx-btn--lg:not(.cx-slide){padding:17px 24px}
  /* The pill keeps its height and shrinks its travel instead. The header's
     own small pill is already at phone size and is left alone. */
  .cx-slide:not(.cx-slide--sm){--cx-slide-h:52px;--cx-slide-near:22px;--cx-slide-pad:54px;--cx-slide-b:40px;--cx-slide-in:6px;font-size:12px}
  .cx-hd__cta{--cx-slide-near:16px;--cx-slide-pad:40px;--cx-slide-b:30px;--cx-slide-in:7px;font-size:11.5px}
}