/* Generated by scripts/build-theme-css.php — do not edit by hand.
 * Source: inc/theme.php. Rebuild after any theme change.
 * Built: 2026-09-22T17:27:41+00:00 */
/* ===========================================================================
   THEMES
   ---------------------------------------------------------------------------
   Four complete palettes live here at once. Switch with ?theme=<name>, which
   is remembered in a cookie (see jp_theme() in inc/layout.php). The default is
   set by JP_THEME_DEFAULT in that file.

       warm    deep teal / coral / cream      — light hero, human, people-first
       navy    deep navy / steel / cyan       — dark hero, corporate, enterprise
       violet  indigo / violet                — light hero, the original tokens
       ink     near-black / amber / off-white — dark hero, editorial, premium

   Why tokens rather than four stylesheets: every rule below reads from these
   variables, so a theme is ~40 lines of colour and nothing else has to change.
   That is also why glows use rgba(var(--accent-rgb),...) instead of a literal
   colour — a hardcoded rgba cannot follow the theme, and the last three
   redesigns each left a trail of orphaned ones behind.

   Variable names are historical (--blue-*). Read them as "brand", not literally.
   =========================================================================== */
:root{
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-sm:2px;--r-md:4px;--r-lg:6px;--r-xl:12px;--r-pill:999px;

  --shadow-sm:0 1px 2px rgba(10,10,10,.06);
  --shadow-md:0 2px 6px rgba(10,10,10,.08),0 1px 2px rgba(10,10,10,.04);
  --shadow-lg:0 8px 24px rgba(10,10,10,.10);
  --content-max:1200px;

  /* Check-in-a-circle, as a MASK rather than a coloured image. A data URI
     cannot read a CSS variable, so the shape is masked and then painted with
     background-color — which means the tick follows whatever accent the active
     theme sets, with no per-theme copy of the SVG. */
  --tick-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.6'/%3E%3C/svg%3E");

  /* Photo-mode banner: a dark glass card holds the text over a clearly-visible
     image. Uniform across all themes, since it sits on a photograph, not on the
     theme background. */
  --hero-veil:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(6,12,20,.30) 68%,rgba(6,12,20,.55) 100%);
  --hero-tint:linear-gradient(180deg,rgba(6,12,20,.22),rgba(6,12,20,.42));
  --card-bg:rgba(11,18,30,.60);
  --card-bd:rgba(255,255,255,.14);
  --card-shadow:0 30px 70px rgba(0,0,0,.42);
}

/* ---------------- WARM — deep teal / coral / cream (light hero) ---------- */
[data-theme="warm"]{
  --blue:#ee6c4d; --blue-hover:#d9542f; --blue-deep:#1f6b62; --blue-deepest:#123f3a;
  --navy:#0e3330; --navy-2:#17544c; --accent-2:#f4a261;
  --accent-rgb:238,108,77; --deep-rgb:18,63,58;
  --blue-tint:#fdece4; --blue-tint-2:#fff6f1; --blue-line:#f6d2c3;

  --ink-900:#241e18; --ink-800:#38302a; --ink-700:#4d453d; --ink-600:#665c52;
  --ink-500:#877a6d; --ink-400:#a89a8b; --ink-300:#cabeae; --ink-200:#e4dace;
  --ink-100:#efe7db; --ink-050:#f7f1e8; --ink-025:#fbf7f1; --white:#fff;

  --green:#3d7a2f; --green-tint:#e8f2df; --gold:#c08a1e; --gold-tint:#fbf1d7;
  --teal:#1f6b62; --teal-tint:#e2f0ed; --purple:#8a5a9e; --purple-tint:#f2e9f6;
  --coral:#d1553a; --coral-tint:#fce6df; --red:#b3261e;

  --body-bg:#fbf7f1; --alt-bg:#fff;

  --grad-primary:linear-gradient(135deg,#0f3733 0%,#1a5a52 55%,#1f6b62 100%);
  --grad-deep:linear-gradient(140deg,#0e3330 0%,#123f3a 45%,#1b5750 100%);
  --grad-accent:linear-gradient(135deg,#ee6c4d,#f4a261);
  --grad-primary-h:linear-gradient(135deg,#123f3a,#237e73);

  --hero-bg:linear-gradient(160deg,#fbeee3 0%,#fdf3ea 45%,#fdf8f2 100%);
  --hero-ink:var(--ink-900); --hero-lede:var(--ink-600); --hero-sub:var(--ink-500);
  --hero-eyebrow:var(--blue); --hero-bd:1px solid var(--ink-100);
  --hero-img-op:.14; --hero-img-filter:saturate(.7) contrast(1.02) sepia(.15);
  /* Light theme: the scrim is a warm cream wash, so dark type stays readable
     over footage. Strong on the left where the headline sits, clearing to the
     right so the video is actually visible. */
  --hero-vid-filter:saturate(.85) contrast(1.02);
  --hero-scrim:linear-gradient(100deg,rgba(253,246,238,.96) 0%,rgba(253,246,238,.86) 42%,rgba(253,246,238,.55) 100%);

  --panel-bg:#fff; --panel-bd:var(--ink-100); --panel-h:var(--blue-deepest);
  --panel-li:var(--ink-600); --panel-strong:var(--ink-900);
  --panel-shadow:0 22px 50px rgba(36,30,24,.10); --panel-rule:var(--ink-100);

  --btnp-bg:var(--blue); --btnp-fg:#fff; --btnp-hbg:var(--blue-hover); --btnp-hfg:#fff;
  --ghost-bg:#fff; --ghost-fg:var(--blue-deepest); --ghost-bd:var(--ink-200);
  --ghost-hbg:var(--blue-deepest); --ghost-hfg:#fff;

  --foot-bd:#1e5049; --foot-mut:#8fa8a2; --foot-p:#9db8b2; --disc-bg:#0a2622; --soc-bd:#245a52;
}

/* ---------------- NAVY — deep navy / steel / cyan (dark hero) ------------ */
[data-theme="navy"]{
  --blue:#0fb5ea; --blue-hover:#0a93c0; --blue-deep:#1f4e79; --blue-deepest:#0e2136;
  --navy:#081420; --navy-2:#15304c; --accent-2:#38bdf8;
  --accent-rgb:15,181,234; --deep-rgb:14,33,54;
  --blue-tint:#e3f4fd; --blue-tint-2:#f2fafe; --blue-line:#bfe4f6;

  --ink-900:#0b1522; --ink-800:#1c2b3d; --ink-700:#33465c; --ink-600:#4a5f77;
  --ink-500:#64798f; --ink-400:#93a5b8; --ink-300:#c3cfdb; --ink-200:#dde5ed;
  --ink-100:#e9eff5; --ink-050:#f2f6fa; --ink-025:#f8fbfd; --white:#fff;

  --green:#0f7b53; --green-tint:#e0f4ec; --gold:#b4741a; --gold-tint:#fbf0dd;
  --teal:#0e8e8e; --teal-tint:#e3f5f4; --purple:#4f46e5; --purple-tint:#eaeafc;
  --coral:#c2410c; --coral-tint:#fdeae4; --red:#b3261e;

  --body-bg:#f8fbfd; --alt-bg:#fff;

  --grad-primary:linear-gradient(135deg,#0b1a2c 0%,#16375c 55%,#1f4e79 100%);
  --grad-deep:linear-gradient(140deg,#081420 0%,#0e2136 45%,#1a4066 100%);
  --grad-accent:linear-gradient(135deg,#0fb5ea,#38bdf8);
  --grad-primary-h:linear-gradient(135deg,#12253c,#2a6293);

  --hero-bg:var(--grad-deep);
  --hero-ink:#fff; --hero-lede:#a9c0d4; --hero-sub:#7f99b0;
  --hero-eyebrow:var(--accent-2); --hero-bd:3px solid var(--blue);
  --hero-img-op:.22; --hero-img-filter:saturate(.35) contrast(1.05);
  /* Dark theme: a navy scrim. This is the treatment video suits best — white
     type over dimmed footage, which is exactly what TCS and most enterprise
     firms do. */
  --hero-vid-filter:saturate(.5) contrast(1.05);
  --hero-scrim:linear-gradient(100deg,rgba(8,20,32,.92) 0%,rgba(8,20,32,.78) 45%,rgba(14,33,54,.55) 100%);

  --panel-bg:rgba(255,255,255,.07); --panel-bd:rgba(255,255,255,.14); --panel-h:#fff;
  --panel-li:#a9c0d4; --panel-strong:#fff;
  --panel-shadow:0 24px 60px rgba(0,0,0,.35); --panel-rule:rgba(255,255,255,.14);

  --btnp-bg:var(--blue); --btnp-fg:#04222f; --btnp-hbg:#2ac4f5; --btnp-hfg:#04222f;
  --ghost-bg:rgba(255,255,255,.06); --ghost-fg:#fff; --ghost-bd:rgba(255,255,255,.32);
  --ghost-hbg:#fff; --ghost-hfg:var(--blue-deepest);

  --foot-bd:#163454; --foot-mut:#7e91a6; --foot-p:#93a4b8; --disc-bg:#00152b; --soc-bd:#1e3f63;
}

/* ---------------- VIOLET — indigo / violet (light hero) ------------------ */
[data-theme="violet"]{
  --blue:#5819eb; --blue-hover:#4a12c9; --blue-deep:#20205a; --blue-deepest:#14173e;
  --navy:#14173e; --navy-2:#20205a; --accent-2:#af57db;
  --accent-rgb:88,25,235; --deep-rgb:20,23,62;
  --blue-tint:#f1ebfe; --blue-tint-2:#f7f4fe; --blue-line:#ddd0fb;

  --ink-900:#020817; --ink-800:#1e293b; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-200:#e2e8f0;
  --ink-100:#eef2f6; --ink-050:#f1f5f9; --ink-025:#f8fafc; --white:#fff;

  --green:#1f7a3a; --green-tint:#e2f1e6; --gold:#c9a227; --gold-tint:#fbf3d8;
  --teal:#0e8e8e; --teal-tint:#e3f5f4; --purple:#6c4cb6; --purple-tint:#efeaf9;
  --coral:#d4533a; --coral-tint:#fbe9e3; --red:#b3261e;

  --body-bg:#fff; --alt-bg:#f8fafc;

  --grad-primary:linear-gradient(135deg,#14173e,#5819eb);
  --grad-deep:linear-gradient(140deg,#14173e,#3a1f9e);
  --grad-accent:linear-gradient(135deg,#5819eb,#af57db);
  --grad-primary-h:linear-gradient(135deg,#1c2054,#6a2df5);

  --hero-bg:linear-gradient(180deg,#eae7f8 0%,#f2f0fb 55%,#fbfafe 100%);
  --hero-ink:var(--ink-900); --hero-lede:var(--ink-500); --hero-sub:var(--ink-500);
  --hero-eyebrow:var(--blue); --hero-bd:1px solid var(--ink-100);
  --hero-img-op:.12; --hero-img-filter:saturate(.5) contrast(1.02);
  --hero-vid-filter:saturate(.8) contrast(1.02);
  --hero-scrim:linear-gradient(100deg,rgba(244,242,252,.96) 0%,rgba(244,242,252,.86) 42%,rgba(244,242,252,.55) 100%);

  --panel-bg:#fff; --panel-bd:var(--ink-200); --panel-h:var(--blue-deepest);
  --panel-li:var(--ink-600); --panel-strong:var(--ink-900);
  --panel-shadow:0 16px 40px rgba(20,23,62,.10); --panel-rule:var(--ink-100);

  --btnp-bg:var(--grad-primary); --btnp-fg:#fff; --btnp-hbg:var(--grad-primary-h); --btnp-hfg:#fff;
  --ghost-bg:#fff; --ghost-fg:var(--ink-900); --ghost-bd:var(--ink-200);
  --ghost-hbg:var(--blue-tint); --ghost-hfg:var(--blue-deepest);

  --foot-bd:#2c3070; --foot-mut:#8b90ab; --foot-p:#93a4b8; --disc-bg:#0d0f2c; --soc-bd:#363a80;
}

/* ---------------- INK — near-black / amber / off-white (dark hero) -------
   The new alternate. No blue, no purple, no teal — a warm-neutral near-black
   with a single amber accent. Editorial and premium; closer to a business
   magazine than a SaaS landing page.                                        */
[data-theme="ink"]{
  --blue:#e0a106; --blue-hover:#c08a04; --blue-deep:#2b2620; --blue-deepest:#14120f;
  --navy:#0d0b09; --navy-2:#2b2620; --accent-2:#f2c14e;
  --accent-rgb:224,161,6; --deep-rgb:20,18,15;
  --blue-tint:#fdf3dc; --blue-tint-2:#fffaf0; --blue-line:#f0dcab;

  --ink-900:#14120f; --ink-800:#2b2620; --ink-700:#413a32; --ink-600:#5c534a;
  --ink-500:#7d7365; --ink-400:#a49a8c; --ink-300:#c9c0b3; --ink-200:#e3ddd2;
  --ink-100:#eeeae1; --ink-050:#f6f3ec; --ink-025:#fcfbf9; --white:#fff;

  --green:#4a6b2f; --green-tint:#eaf0e0; --gold:#a87d10; --gold-tint:#fbf1d7;
  --teal:#2c6560; --teal-tint:#e4efee; --purple:#6b5a8a; --purple-tint:#eeeaf4;
  --coral:#b8552f; --coral-tint:#fbe7dd; --red:#b3261e;

  --body-bg:#fcfbf9; --alt-bg:#fff;

  --grad-primary:linear-gradient(135deg,#14120f 0%,#2b2620 55%,#413a32 100%);
  --grad-deep:linear-gradient(140deg,#0d0b09 0%,#14120f 45%,#2b2620 100%);
  --grad-accent:linear-gradient(135deg,#e0a106,#f2c14e);
  --grad-primary-h:linear-gradient(135deg,#2b2620,#5c534a);

  --hero-bg:var(--grad-deep);
  --hero-ink:#fff; --hero-lede:#b3aca2; --hero-sub:#8d857a;
  --hero-eyebrow:var(--accent-2); --hero-bd:3px solid var(--blue);
  --hero-img-op:.24; --hero-img-filter:saturate(.4) contrast(1.06) sepia(.2);
  --hero-vid-filter:saturate(.35) contrast(1.08) sepia(.25);
  --hero-scrim:linear-gradient(100deg,rgba(10,9,7,.93) 0%,rgba(13,11,9,.80) 45%,rgba(43,38,32,.58) 100%);

  --panel-bg:rgba(255,255,255,.06); --panel-bd:rgba(255,255,255,.14); --panel-h:#fff;
  --panel-li:#b3aca2; --panel-strong:#fff;
  --panel-shadow:0 24px 60px rgba(0,0,0,.4); --panel-rule:rgba(255,255,255,.14);

  --btnp-bg:var(--blue); --btnp-fg:#1a1610; --btnp-hbg:#f2c14e; --btnp-hfg:#1a1610;
  --ghost-bg:rgba(255,255,255,.06); --ghost-fg:#fff; --ghost-bd:rgba(255,255,255,.30);
  --ghost-hbg:#fff; --ghost-hfg:var(--ink-900);

  --foot-bd:#3a332b; --foot-mut:#8d857a; --foot-p:#a49a8c; --disc-bg:#080706; --soc-bd:#3a332b;
}

/* ---------------- CRISP — hairline / single-hue enterprise ---------------
   Navy structure, the house coral as the single action colour, greys tinted
   toward the navy. No shadows, 1px borders, 2px radii, flat fills instead of
   gradients. The component overrides that this palette cannot express on its
   own live in the [data-theme="crisp"] block further down. */
[data-theme="crisp"]{
  --blue:#c2410c; --blue-hover:#9a3412; --blue-deep:#0a2d5e; --blue-deepest:#071d3d;
  --navy:#0a2d5e; --navy-2:#123a73; --accent-2:#c2410c;
  --accent-rgb:194,65,12; --deep-rgb:10,45,94;
  --blue-tint:#fdf0ea; --blue-tint-2:#fef7f4; --blue-line:#f0cdbd;

  --ink-900:#111827; --ink-800:#1f2937; --ink-700:#374151; --ink-600:#4b5563;
  --ink-500:#6b7280; --ink-400:#9ca3af; --ink-300:#b9c2ce; --ink-200:#d9dee5;
  --ink-100:#e9eef5; --ink-050:#f4f6f9; --ink-025:#fafbfc; --white:#fff;

  --green:#0f7b53; --green-tint:#e6f4ee; --gold:#a16207; --gold-tint:#fbf3e3;
  --teal:#0f766e; --teal-tint:#e4f2f1; --purple:#4338ca; --purple-tint:#ecebfa;
  --coral:#c2410c; --coral-tint:#fdeae4; --red:#b3261e;

  --body-bg:#fff; --alt-bg:#f4f6f9;

  /* Flat: every gradient collapses to a solid. */
  --grad-primary:#0a2d5e; --grad-deep:#0a2d5e;
  --grad-accent:#c2410c; --grad-primary-h:#123a73;

  /* Content-sized hero on --bg-2, dark ink, hairline base. */
  --hero-bg:#f4f6f9;
  --hero-ink:var(--ink-900); --hero-lede:var(--ink-600); --hero-sub:var(--ink-500);
  --hero-eyebrow:var(--ink-500); --hero-bd:1px solid var(--ink-200);
  --hero-img-op:1; --hero-img-filter:saturate(.85) contrast(1.02);
  --hero-vid-filter:saturate(.6) contrast(1.02);
  --hero-scrim:linear-gradient(100deg,rgba(244,246,249,.97) 0%,rgba(244,246,249,.88) 44%,rgba(244,246,249,.60) 100%);

  --panel-bg:#fff; --panel-bd:var(--ink-200); --panel-h:var(--ink-900);
  --panel-li:var(--ink-600); --panel-strong:var(--ink-900);
  --panel-shadow:none; --panel-rule:var(--ink-200);

  --btnp-bg:#c2410c; --btnp-fg:#fff; --btnp-hbg:#9a3412; --btnp-hfg:#fff;
  --ghost-bg:transparent; --ghost-fg:#0a2d5e; --ghost-bd:var(--ink-300);
  --ghost-hbg:#0a2d5e; --ghost-hfg:#fff;

  --foot-bd:#1c3f6e; --foot-mut:#9ca3af; --foot-p:#c3cfdb; --disc-bg:#071d3d; --soc-bd:#1c3f6e;

  /* Global tokens the crisp system redefines. */
  --r-sm:2px; --r-md:2px; --r-lg:2px; --r-xl:2px; --r-pill:2px;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  --content-max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--ink-800);background:var(--body-bg)}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;color:var(--ink-900);margin:0 0 var(--s4)}
h1{font-size:clamp(30px,3.6vw,44px);line-height:1.12;letter-spacing:-.02em}
h2{font-size:clamp(22px,2.2vw,30px);line-height:1.2;margin-top:var(--s7)}
h3{font-size:19px;line-height:1.3;margin-top:var(--s5)}
h4{font-size:16px;line-height:1.35}
p{margin:0 0 var(--s4);color:var(--ink-700)}
/* Full-bleed: content spans the whole page width, with only a small edge gutter
   so text never touches the screen edge. (Was capped at var(--content-max).) */
.container{max-width:100%;margin:0 auto;padding:0 var(--s6)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);background:#fff;padding:var(--s2) var(--s3);border:2px solid var(--blue);z-index:999}
.muted{color:var(--ink-500)}
.center{text-align:center}
.mt0{margin-top:0}

/* ---------- Utility bar (Chase: thin, dark, small type) ---------- */
.utility{background:var(--navy);color:#d6d6d6;font-size:12px;letter-spacing:.02em}
.utility .container{display:flex;align-items:center;justify-content:space-between;height:34px}
.utility a{color:#d6d6d6}
.utility a:hover{color:#fff}
.utility-left,.utility-right{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.utility-right .sep{color:#4a5a6e}

/* ---------- Masthead ----------
   White, with a dark navy rule along the bottom edge (matching the utility bar
   above it, so the whole top of the page reads as one dark frame).

   The nav items used to carry a 3px underline on hover, which landed exactly on
   the masthead's bottom border and produced a double line. They now use a soft
   pill instead — no overlap possible. */
.masthead{background:#fff;color:var(--ink-900);border-bottom:3px solid var(--navy);box-shadow:var(--shadow-sm)}
.masthead .container{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s3)}
.brand:hover{text-decoration:none}
.brand-logo{height:46px;width:auto;max-width:min(260px,55vw);object-fit:contain}

/* margin-left:auto pushes the nav to the right so it sits next to the CTA
   buttons, closing the gap between them. */
.primary-nav{display:flex;gap:var(--s2);align-items:center;height:100%;margin-left:auto}
.primary-nav>.navitem{position:relative;display:flex;align-items:center;height:100%}
.primary-nav a,.primary-nav .navtrigger{color:var(--ink-800);font-size:15px;font-weight:600;
  padding:9px 14px;border-radius:8px;border:0;background:none;display:inline-flex;align-items:center;
  transition:color .15s,background .15s}
.primary-nav a:hover,.primary-nav a.active,
.primary-nav .navitem:hover .navtrigger{text-decoration:none;color:var(--navy);background:var(--ink-050)}
.navtrigger::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;border-top-color:var(--ink-400);transform:translateY(2px);transition:border-color .15s}
.primary-nav .navitem:hover .navtrigger::after{border-top-color:var(--navy)}
/* A top-level link with no dropdown gets no caret. */
.navtrigger.navplain::after{display:none}

/* Mega dropdown — sits just below the masthead's navy rule. */
.megamenu{position:absolute;top:100%;left:0;margin-top:3px;min-width:300px;background:#fff;
  border:1px solid var(--ink-100);border-top:3px solid var(--navy);border-radius:0 0 10px 10px;
  box-shadow:0 18px 44px rgba(var(--deep-rgb),.18);padding:var(--s4) 0;display:none;z-index:60}
.navitem:hover .megamenu,.navitem:focus-within .megamenu{display:block}
.megamenu a{display:block;color:var(--ink-700);font-size:14px;font-weight:500;padding:9px var(--s5);border:0;border-radius:0}
.megamenu a:hover{background:var(--ink-050);color:var(--navy);text-decoration:none;border:0}
.megamenu .mm-head{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);padding:var(--s2) var(--s5) var(--s1)}

.header-cta{display:flex;gap:var(--s3);align-items:center}
.navtoggle{display:none;background:none;border:1px solid var(--ink-200);color:var(--ink-800);border-radius:var(--r-md);padding:8px 12px;font-size:14px;font-weight:600}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:12px 22px;font-size:15px;font-weight:600;border-radius:var(--r-pill);border:1px solid transparent;text-decoration:none;transition:all .15s;white-space:nowrap;line-height:1}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-md)}
/* The primary action. Fill and text colour come from the theme, because a cyan
   button needs dark text while a coral one needs white. */
.btn-primary{background:var(--btnp-bg);color:var(--btnp-fg);border-color:transparent;
  box-shadow:0 8px 22px rgba(var(--accent-rgb),.30)}
.btn-primary:hover{background:var(--btnp-hbg);border-color:transparent;color:var(--btnp-hfg);
  box-shadow:0 12px 30px rgba(var(--accent-rgb),.40)}

.btn-secondary{background:#fff;color:var(--blue-deepest);border-color:var(--ink-200)}
.btn-secondary:hover{background:var(--blue-deepest);color:#fff;border-color:var(--blue-deepest)}

/* Secondary action sitting on the hero — solid on light themes, translucent on
   dark ones. */
.btn-ghost-light{background:var(--ghost-bg);color:var(--ghost-fg);border-color:var(--ghost-bd);backdrop-filter:blur(4px)}
.btn-ghost-light:hover{background:var(--ghost-hbg);color:var(--ghost-hfg);border-color:var(--ghost-hbg)}

.btn-accent{background:var(--blue);color:var(--btnp-fg);border-color:var(--blue)}
.btn-accent:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:var(--btnp-hfg)}

/* Deep pill with a trailing arrow — the section-closing CTA on LIGHT
   backgrounds ("See all open roles"). Matches the Learn More buttons on cards.
   Do NOT use inside .cta-band or .cta-full; those are already dark and it would
   disappear. Use .btn-secondary (white) or .btn-primary there. */
.btn-gradient{background:var(--grad-primary);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(var(--deep-rgb),.24)}
.btn-gradient:hover{background:var(--grad-primary-h);color:#fff;
  box-shadow:0 12px 28px rgba(var(--deep-rgb),.32)}
.btn-gradient::after{content:"\2192";font-size:15px;transition:transform .2s ease}
.btn-gradient:hover::after{transform:translateX(4px)}
.btn-wa{background:#25d366;color:#08341d;border-color:#25d366}
.btn-wa:hover{background:#1eb857;border-color:#1eb857;color:#08341d}
.btn-sm{padding:8px 16px;font-size:14px}
.btn-lg{padding:16px 32px;font-size:16px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- Eyebrow (Chase's little rule + caps label) ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deepest);margin-bottom:var(--s4)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--blue)}
/* Eyebrow sitting on the hero — colour follows the theme (accent on light
   heroes, the lighter accent-2 on dark ones so it stays legible). */
.eyebrow-light{color:var(--hero-eyebrow)}
.eyebrow-light::before{background:var(--blue)}

/* ---------- Hero ---------- */
/* ---------- Hero ----------
   Light, warm and airy — a cream-to-peach wash with dark warm text. This is
   the biggest "human friendly" move: an open, welcoming front door rather than
   a dark corporate wall. A photograph can sit softly on one side.

   Set the image per page with:  style="--hero-img:url(/assets/img/x.jpg)"   */
.hero{background:var(--hero-bg);color:var(--hero-ink);
  padding:var(--s9) 0 var(--s8);position:relative;overflow:hidden;border-bottom:var(--hero-bd)}

/* Accent glow, top right. */
.hero::after{content:"";position:absolute;right:-180px;top:-220px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 62%);pointer-events:none}
/* Secondary glow, bottom left. */
.hero::before{content:"";position:absolute;left:-200px;bottom:-240px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.10),transparent 65%);pointer-events:none}

.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s8);align-items:center}
.hero h1{color:var(--hero-ink);margin-bottom:var(--s5)}
.hero .lede{font-size:19px;line-height:1.65;color:var(--hero-lede);max-width:620px;margin-bottom:var(--s6)}
.hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero-sub{margin-top:var(--s5);font-size:13px;color:var(--hero-sub)}

/* Photograph layer. In plain heroes it is a faint texture. In "photo mode"
   (.has-photo — i.e. a banner that has an image/video assigned) it is shown
   CLEARLY and full-bleed, and the text moves into a glass card on the right so
   it never covers the picture. */
.hero-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--hero-img,none);
  background-size:cover;background-position:center;opacity:var(--hero-img-op);filter:var(--hero-img-filter);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 10%,transparent 72%)}

/* Photo banners are tall, and the text sits LOW — the lower third of every
   image is clear foreground (desks, floor), while faces and screens are always
   mid-frame. So text at the bottom never covers the subject. The horizontal
   side is set per page (.pos-left / .pos-right / .pos-center) to dodge whatever
   sits in that image's bottom corner. */
.has-photo{display:flex;align-items:flex-end;min-height:520px}
.has-photo.hero-sm{min-height:440px}
.has-photo .hero-mesh{opacity:1;filter:saturate(.94) contrast(1.03);
  -webkit-mask-image:none;mask-image:none}

/* "Scene" motion — a slow, continuous Ken Burns drift on the still, so the
   banner feels like footage rather than a flat photo. One image, no video. */
.has-motion .hero-mesh{transform-origin:60% 50%;will-change:transform;
  animation:jp-ken 34s ease-in-out infinite alternate}
@keyframes jp-ken{
  0%   {transform:scale(1.03) translate3d(0,0,0)}
  100% {transform:scale(1.14) translate3d(-2%,-1.4%,0)}
}
@media(prefers-reduced-motion:reduce){.has-motion .hero-mesh{animation:none;transform:scale(1.04)}}

/* Bottom-up gradient so low text stays readable while the image is clear above.
   A soft top gradient too, so any eyebrow/name near the top edge is legible. */
.hero-veil{display:none}
.has-photo .hero-veil{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,12,20,.86) 0%,rgba(8,12,20,.62) 26%,rgba(8,12,20,.18) 50%,transparent 72%)}
/* A light overall darkening keeps the picture cohesive and premium. */
.has-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(8,12,20,.30),transparent 55%)}

.has-photo .container{position:relative;z-index:3;padding-bottom:var(--s7);width:100%;
  display:flex;justify-content:flex-start}
.has-photo.pos-right .container{justify-content:flex-end}
.has-photo.pos-center .container{justify-content:center}

/* No card box — text sits directly on the gradient, which reads cleaner over a
   busy photo than a floating panel does. */
.has-photo .hero-copy{max-width:560px}
.has-photo.pos-center .hero-copy{max-width:720px;text-align:center}
.has-photo.pos-center .hero-copy .hero-actions{justify-content:center}
.has-photo.pos-center .hero-copy .hero-points{max-width:560px;margin-left:auto;margin-right:auto;text-align:left}

.has-photo .hero-copy h1{margin-bottom:var(--s4);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.has-photo .hero-copy .lede{margin-bottom:var(--s5);color:#e6ecf2;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.has-photo .hero-copy .eyebrow-light{color:#7fd4f0}
.has-photo .hero-copy .eyebrow-light::before{background:var(--blue)}
.hero-points{list-style:none;padding:0;margin:0 0 var(--s5);display:grid;gap:9px}
.hero-points li{position:relative;padding-left:28px;font-size:14px;line-height:1.5;color:#e6ecf2;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-points li strong{color:#fff}
.hero-points li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;background-color:var(--blue);
  -webkit-mask:var(--tick-mask) no-repeat center/contain;mask:var(--tick-mask) no-repeat center/contain}

@media(max-width:760px){
  .has-photo .container{justify-content:flex-start}
  .has-photo .hero-copy{max-width:none}
}

/* ---------- Hero cinemagraph ----------
   A slow drifting cross-fade between three stills. This is the alternative to
   a background video, and for a hero it is arguably the better trade:

     ~200 KB of JPEG vs ~3 MB of H.264
     no decode cost, no autoplay rules to fight, no licensing
     and at this speed the eye cannot tell it from slow footage

   Each layer zooms almost imperceptibly (1.06 -> 1.16) over its cycle and
   cross-fades to the next, so the motion never stops and never cuts. */
.hero-cine{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-cine i{position:absolute;inset:0;display:block;background-size:cover;background-position:center;
  opacity:0;will-change:transform,opacity;filter:var(--hero-vid-filter);
  animation:jp-kb 27s cubic-bezier(.4,0,.6,1) infinite}
.hero-cine i:nth-child(1){animation-delay:0s}
.hero-cine i:nth-child(2){animation-delay:9s}
.hero-cine i:nth-child(3){animation-delay:18s}

@keyframes jp-kb{
  0%   {opacity:0;transform:scale(1.06)}
  4%   {opacity:1}
  30%  {opacity:1}
  37%  {opacity:0}
  100% {opacity:0;transform:scale(1.16)}
}

/* Anyone who asked their OS for less motion gets a single still, held. */
@media(prefers-reduced-motion:reduce){
  .hero-cine i{animation:none;opacity:0;transform:none}
  .hero-cine i:nth-child(1){opacity:1}
}
/* On phones, hold one frame — the animation is invisible at that size and the
   repaint is not worth the battery. */
@media(max-width:860px){
  .hero-cine i{animation:none;opacity:0;transform:none}
  .hero-cine i:nth-child(1){opacity:1}
}

/* ---------- Hero background video (the TCS-style treatment) ----------
   Full-bleed, muted, auto-looping footage behind the headline, with a scrim
   over it so the type stays readable. The video is decoration, never content —
   nothing on it is required to understand the page.

   Rules that matter and are easy to get wrong:
     - object-fit:cover, or it letterboxes at some viewport ratios
     - the poster carries the first frame, so there is no flash before load
     - it is hidden on small screens and on prefers-reduced-motion, and the
       still image shows instead. Autoplaying video on a phone burns a
       consultant's data plan and iOS may refuse to play it anyway. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  pointer-events:none;filter:var(--hero-vid-filter)}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--hero-scrim)}
.hero.has-video .hero-mesh,.hero.has-cine .hero-mesh,
.hero-band.has-video .hero-mesh,.hero-band.has-cine .hero-mesh{display:none}

/* ---------- Image band + copy strip ----------
   The banner is now a clean photograph with NO text on it, and the heading /
   lede / buttons sit in a compact strip directly beneath. This keeps the image
   fully visible and the copy perfectly readable, on any theme. */
.hero-band{position:relative;overflow:hidden;height:clamp(260px,36vw,440px);
  border-bottom:3px solid var(--blue);background:var(--ink-100)}
.hero-band .hero-mesh{position:absolute;inset:0;z-index:0;background-image:var(--hero-img,none);
  background-size:cover;background-position:center;opacity:1;filter:saturate(.96) contrast(1.03)}
/* A whisper of gradient at the very bottom so the band meets the strip cleanly. */
.hero-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,12,20,.28),transparent 22%)}
.hero-band-sm{height:clamp(220px,28vw,340px)}

.hero-below{background:var(--alt-bg);border-bottom:1px solid var(--ink-100);padding:var(--s7) 0}
.hero-below .eyebrow{margin-bottom:var(--s3)}
.hero-below h1{margin:0 0 var(--s4)}
.hero-below .lede{font-size:19px;line-height:1.6;color:var(--ink-600);max-width:760px;margin:0 0 var(--s5)}
.hero-below .hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin:0}
.hero-below-center{text-align:center}
.hero-below-center .eyebrow{justify-content:center}
.hero-below-center .lede{margin-left:auto;margin-right:auto}
.hero-below-center .hero-actions{justify-content:center}

/* No video on phones or for anyone who has asked for less motion — fall back
   to the poster still, which is what .hero-mesh already renders. */
@media(max-width:860px){
  .hero-video{display:none}
  .hero.has-video .hero-mesh{display:block}
  .hero.has-video .hero-scrim{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero.has-video .hero-mesh{display:block}
  .hero.has-video .hero-scrim{display:none}
}

/* Gradient text for the emphasised phrase in a headline.

   The padding-right is not decorative. With background-clip:text the painted
   area is clipped to the element's box, and the final glyph's right-hand
   overhang (the terminal of an "r", the tail of a "y") falls outside it and is
   sliced off. A sliver of padding extends the box; the negative margin pulls the
   following character back so the spacing is unchanged. */
.grad{display:inline-block;
  padding:.02em .09em .16em 0;margin:-.02em -.07em -.16em 0;
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* Centred hero variant: big headline, centred lede and buttons, then a row of
   feature icons underneath. Used on the home page. */
.hero-center{text-align:center}
.hero-center .container{max-width:1000px}
.hero-center h1{font-size:clamp(34px,4.6vw,56px);max-width:900px;margin-left:auto;margin-right:auto}
.hero-center .lede{margin-left:auto;margin-right:auto;max-width:700px}
.hero-center .hero-actions{justify-content:center}

.hero-features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s8);max-width:940px;margin-left:auto;margin-right:auto}
.hf{text-align:center}
.hf-icon{width:64px;height:64px;border-radius:18px;background:var(--grad-accent);color:var(--btnp-fg);display:grid;place-items:center;
  margin:0 auto var(--s4);box-shadow:0 10px 26px rgba(var(--accent-rgb),.28);transition:transform .25s ease,box-shadow .25s ease}
.hf-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hf:hover .hf-icon{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 32px rgba(var(--accent-rgb),.36)}
.hf h3{font-size:19px;margin:0 0 var(--s2);color:var(--hero-ink)}
.hf p{font-size:15px;color:var(--hero-lede);margin:0;line-height:1.55}

@media(max-width:760px){
  .hero-features{grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s7)}
}
/* Panel on the hero. White card on light themes, frosted glass on dark ones —
   all driven by the --panel-* tokens so it follows the active theme. */
.hero-panel{background:var(--panel-bg);border:1px solid var(--panel-bd);border-radius:var(--r-xl);padding:var(--s6);
  box-shadow:var(--panel-shadow);position:relative;overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-accent)}
.hero-panel h3{color:var(--panel-h);margin-top:0;margin-bottom:var(--s5);font-size:17px;
  padding-bottom:var(--s4);border-bottom:1px solid var(--panel-rule)}
.hero-panel ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
.hero-panel li{color:var(--panel-li);font-size:14px;line-height:1.55;padding-left:30px;position:relative}
.hero-panel li strong{color:var(--panel-strong)}
.hero-panel li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;background-color:var(--blue);
  -webkit-mask:var(--tick-mask) no-repeat center/contain;mask:var(--tick-mask) no-repeat center/contain}

.hero-sm{padding:var(--s8) 0 var(--s7)}
.hero-sm h1{margin-bottom:var(--s4)}
.hero-sm .lede{margin-bottom:0}

/* ---------- Sections ----------
   Tighter vertical rhythm, and a hairline rule between every section so the
   page reads as distinct blocks rather than one continuous scroll. Coloured
   bands (stats, process, CTA) carry their own edges and are excluded. */
.sec{padding:var(--s7) 0;border-top:1px solid var(--ink-200);position:relative}
.sec-lg{padding:var(--s8) 0;border-top:1px solid var(--ink-200);position:relative}
/* Alternating band. On themes with a tinted body this is white; on the white
   theme it is a faint grey. Either way the bands read. */
.sec-alt{background:var(--alt-bg)}
.sec-tint{background:var(--blue-tint-2)}

/* A short violet accent bar sitting on the divider line, centred. This is the
   thing that actually reads as a section break — a 1px grey hairline on a white
   page is invisible in practice, which is exactly what happened the first time. */
.sec::before,.sec-lg::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:150px;height:4px;border-radius:0 0 4px 4px;background:var(--grad-accent)}

/* No divider directly under a hero or a coloured band — those already have a
   hard edge, and a second line right below it reads as a rendering bug. */
.hero + .sec,.hero + .sec-lg,
.jp-hero + .sec,.jp-hero + .sec-lg,
.stats-band + .sec,.stats-band + .sec-lg,
.proc-band + .sec,.proc-band + .sec-lg,
.cta-full + .sec,.cta-full + .sec-lg{border-top:0}
.hero + .sec::before,.hero + .sec-lg::before,
.jp-hero + .sec::before,.jp-hero + .sec-lg::before,
.stats-band + .sec::before,.stats-band + .sec-lg::before,
.proc-band + .sec::before,.proc-band + .sec-lg::before,
.cta-full + .sec::before,.cta-full + .sec-lg::before{display:none}

.sec-head{max-width:760px;margin-bottom:var(--s6)}
.sec-head h2{margin-top:0}
.sec-head p{font-size:18px;color:var(--ink-600);margin-bottom:0}
.sec-head-center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head-center .eyebrow{justify-content:center}

/* ---------- Grids & cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.card h3{margin-top:0;font-size:20px;letter-spacing:-.015em}
.card p{color:var(--ink-600)}
.card p:last-of-type{margin-bottom:var(--s4)}
.card-link{color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.card-link:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 18px 44px rgba(var(--accent-rgb),.14);border-color:var(--blue-line)}
.card-top{border-top:4px solid var(--blue)}
/* "Learn More" is a gradient pill button pinned to the bottom-left of the card,
   not a text link — the pattern from the previous site. margin-top:auto pushes
   it to the baseline so a row of cards has its buttons aligned even when the
   copy above them runs to different lengths. */
.card .more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  background:var(--grad-primary);color:#fff;padding:11px 20px;border-radius:var(--r-lg);
  font-weight:600;font-size:14px;line-height:1;letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(var(--deep-rgb),.22);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.card .more::after{content:"\2192";font-size:15px;transition:transform .2s ease}
.card-link:hover .more{background:var(--grad-primary-h);box-shadow:0 10px 24px rgba(var(--deep-rgb),.30);transform:translateY(-1px);color:#fff}
.card-link:hover .more::after{transform:translateX(4px)}

/* Icon badge — a WHITE circle with a coloured glyph, floating on a softly
   tinted card. The card colour and the glyph colour come from the .ic-* class
   on the badge (glyph) and matching :has() rules on the card (background). */
.card-icon{width:60px;height:60px;border-radius:50%;background:#fff;display:grid;place-items:center;
  margin-bottom:var(--s5);flex:0 0 auto;box-shadow:0 6px 16px rgba(11,21,34,.10);
  transition:transform .25s ease,box-shadow .25s ease}
.card-icon svg{width:26px;height:26px;stroke-width:1.9;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.card-link:hover .card-icon,.card:hover .card-icon{transform:translateY(-2px)}

/* Glyph colour per tone. */
.ic-blue{color:#2f6bff}
.ic-purple{color:#6d4fd0}
.ic-teal{color:#12897e}
.ic-green{color:#1f9d55}
.ic-gold{color:#dd9a06}
.ic-coral{color:#df6a45}

/* Soft tinted card + matching border, keyed off the icon tone via :has().
   Applies to any .card or .cap-card that contains one of these badges — which
   is every service, solution, product and capability card on the site. */
.card:has(.ic-blue),.cap-card:has(.ic-blue){background:#eff4ff;border-color:#d3e0ff}
.card:has(.ic-purple),.cap-card:has(.ic-purple){background:#f2effc;border-color:#ddd4f5}
.card:has(.ic-teal),.cap-card:has(.ic-teal){background:#e9f6f4;border-color:#c9e8e2}
.card:has(.ic-green),.cap-card:has(.ic-green){background:#eef7f0;border-color:#d0e8d6}
.card:has(.ic-gold),.cap-card:has(.ic-gold){background:#fdf6e4;border-color:#f0e3ba}
.card:has(.ic-coral),.cap-card:has(.ic-coral){background:#fdeee9;border-color:#f5d3c7}
/* On a tinted card the bullet paragraph reads better a touch darker. */
.card:has(.card-icon) p,.cap-card p{color:var(--ink-700)}

/* Feature bullets inside a card — violet dots, as on the old site. */
.card-list{list-style:none;padding:0;margin:0 0 var(--s4)}
.card-list li{position:relative;padding-left:18px;margin-bottom:9px;font-size:14px;color:var(--ink-600)}
.card-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--blue)}

/* Compact card used in the 4-up commitment row */
.card-mini{padding:var(--s5)}
.card-mini h3{font-size:16px;margin:0 0 var(--s2)}
.card-mini p,.card-mini p:last-of-type{font-size:14px;margin:0;color:var(--ink-600)}
.card-mini .card-icon{width:44px;height:44px;margin-bottom:var(--s4)}
.card-mini .card-icon svg{width:21px;height:21px}

/* ---------- Asymmetric splits ----------
   These MUST be classes, not inline styles. An inline grid-template-columns
   wins over a media query, so an inline split silently stays multi-column on a
   phone and the layout collapses. Learned that the hard way. */
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s7);align-items:start}
.split-even{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s7);align-items:start}
.filter-grid{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:var(--s4);align-items:end}

/* ---------- Stats ----------
   A full-bleed gradient band. It sits between the light hero and the white
   sections below, so it does the job of breaking the page up — and the numbers
   are the thing a client scans for first, so they should carry weight. */
.stats-band{background:var(--grad-primary);color:#fff;padding:var(--s7) 0;position:relative;overflow:hidden}
.stats-band::after{content:"";position:absolute;right:-120px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.34),transparent 62%);pointer-events:none}
.stats-band::before{content:"";position:absolute;left:-140px;bottom:-200px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%);pointer-events:none}
.stats-band .container{position:relative}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:var(--s2) var(--s5);border-left:1px solid rgba(255,255,255,.16)}
.stat:first-child{border-left:0;padding-left:0}
.stat .n{font-family:var(--font-display);font-size:clamp(30px,3vw,40px);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1.05}
.stat .l{font-size:13px;color:#c9c1ec;margin-top:8px;line-height:1.45}

/* ---------- Pills / chips ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill)}
.pill-blue{background:var(--blue-tint);color:var(--blue-deepest)}
.pill-green{background:var(--green-tint);color:var(--green)}
.pill-gold{background:var(--gold-tint);color:#8a6f14}
.pill-purple{background:var(--purple-tint);color:#4a2f8a}
.pill-teal{background:var(--teal-tint);color:#0a6a6a}
.pill-coral{background:var(--coral-tint);color:#9c3d29}

/* ---------- Lists ---------- */
.checklist{list-style:none;padding:0;margin:0 0 var(--s5)}
.checklist li{position:relative;padding-left:32px;margin-bottom:var(--s3);color:var(--ink-700);line-height:1.6}
.checklist li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;background-color:var(--blue);
  -webkit-mask:var(--tick-mask) no-repeat center/contain;mask:var(--tick-mask) no-repeat center/contain}
.checklist li strong{color:var(--ink-900)}

/* ---------- Tables ---------- */
table.jp-table{width:100%;border-collapse:collapse;margin:var(--s5) 0;font-size:15px;background:#fff;border:1px solid var(--ink-100)}
table.jp-table th{background:var(--blue-deepest);color:#fff;text-align:left;padding:13px 16px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
table.jp-table td{padding:13px 16px;border-top:1px solid var(--ink-100);color:var(--ink-700);vertical-align:top}
table.jp-table tr:nth-child(even) td{background:var(--ink-025)}

/* ---------- FAQ ---------- */
details.faq{border:1px solid var(--ink-100);border-radius:var(--r-md);padding:var(--s4) var(--s5);margin-bottom:var(--s3);background:#fff}
details.faq summary{font-weight:600;color:var(--ink-900);cursor:pointer;list-style:none;display:flex;gap:10px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";color:var(--blue);font-weight:700}
details.faq[open] summary::before{content:"\2013"}
details.faq p{margin:var(--s3) 0 0 22px}
details.faq p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad-deep);color:#fff;border-radius:var(--r-xl);padding:var(--s8) var(--s7);text-align:center;margin:var(--s8) 0;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(11,21,34,.28)}
.cta-band::after{content:"";position:absolute;right:-110px;bottom:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.28),transparent 62%)}
.cta-band h2{color:#fff;margin-top:0;position:relative}
.cta-band p{color:#a9c0d4;max-width:600px;margin:0 auto var(--s5);position:relative}
.cta-row{display:inline-flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;position:relative}

/* ===========================================================================
   Inner-page format (services / solutions / products).
   Mirrors the structure of the previous site's solution pages:
     pill eyebrow -> centred head -> capability cards -> "why us" -> process
     -> full-bleed gradient CTA
   =========================================================================== */

/* Grey pill eyebrow, centred above a section heading. */
.pill-eyebrow{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--ink-700);
  background:var(--ink-050);border:1px solid var(--ink-200);padding:7px 18px;border-radius:var(--r-pill);margin-bottom:var(--s5)}

/* Capability card: large untinted line icon, title, grey lede, bullet list. */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.cap-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);padding:var(--s6);
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.cap-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(var(--accent-rgb),.13);border-color:var(--blue-line)}
/* NOTE: do not set a colour here. The .ic-* tone classes own both the tint and
   the stroke colour, and a `color` declaration on this selector is more
   specific than a single .ic-* class — which silently painted every icon white
   on a pale tint, i.e. invisible. */
.cap-card .cap-icon{width:60px;height:60px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-bottom:var(--s5);
  box-shadow:0 6px 16px rgba(11,21,34,.10);transition:transform .25s ease,box-shadow .25s ease}
.cap-card .cap-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cap-card:hover .cap-icon{transform:translateY(-2px)}
.cap-card h3{margin:0 0 var(--s3);font-size:21px;letter-spacing:-.02em;color:var(--ink-900)}
.cap-card .cap-lede{color:var(--ink-500);font-size:15px;line-height:1.55;margin:0 0 var(--s5)}
.cap-card ul{list-style:none;padding:0;margin:0}
.cap-card li{position:relative;padding-left:16px;margin-bottom:10px;font-size:15px;color:var(--ink-700)}
.cap-card li::before{content:"\2022";position:absolute;left:0;top:-1px;color:var(--blue);font-weight:700}

/* "Why choose us": centred cards, small solid-colour icon tile. */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.why-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);padding:var(--s7) var(--s6);
  text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.why-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(var(--accent-rgb),.13);border-color:var(--blue-line)}
/* Solid tiles here (as opposed to the tinted ones on the capability cards), so
   the three "why" cards read as a stronger, more confident row. */
.why-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;margin:0 auto var(--s5);color:#fff;
  transition:transform .25s ease,box-shadow .25s ease}
.why-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.why-card:hover .why-icon{transform:translateY(-2px) scale(1.04)}
.why-blue{background:var(--grad-primary);box-shadow:0 8px 20px rgba(var(--deep-rgb),.26)}
.why-violet{background:var(--grad-accent);color:var(--btnp-fg);box-shadow:0 8px 20px rgba(var(--accent-rgb),.32)}
.why-green{background:var(--green);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.why-amber{background:var(--gold);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.why-card h3{margin:0 0 var(--s3);font-size:20px;color:var(--ink-900)}
.why-card p{margin:0;color:var(--ink-500);font-size:15px;line-height:1.6}

/* Numbered process strip. */
.proc-band{background:#fff;border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100);padding:var(--s8) 0}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.proc-step{text-align:center;position:relative}
.proc-num{width:52px;height:52px;border-radius:50%;background:var(--blue-deepest);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:18px;margin:0 auto var(--s4);position:relative;z-index:2;box-shadow:0 6px 16px rgba(var(--deep-rgb),.24)}
/* Connector line between the steps. */
.proc-step::after{content:"";position:absolute;top:26px;left:calc(50% + 34px);right:calc(-50% + 34px);height:2px;background:var(--ink-200);z-index:1}
.proc-step:last-child::after{display:none}
.proc-step h3{margin:0 0 var(--s2);font-size:17px;color:var(--ink-900)}
.proc-step p{margin:0;font-size:14px;color:var(--ink-500);line-height:1.55}

/* Full-bleed closing CTA. */
.cta-full{background:var(--grad-deep);color:#fff;padding:var(--s8) 0;text-align:center;position:relative;overflow:hidden;border-top:0}
.cta-full::after{content:"";position:absolute;right:-140px;top:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.30),transparent 62%)}
.cta-full .container{position:relative;max-width:760px;z-index:2}
.cta-full h2{color:#fff;margin:0 0 var(--s4);font-size:clamp(26px,3vw,36px)}
.cta-full p{color:#a9c0d4;font-size:18px;margin:0 auto var(--s6);max-width:600px}
.cta-full .cta-row{display:inline-flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}

@media(max-width:1024px){
  .cap-grid,.why-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s5)}
  .proc-step::after{display:none}
}
@media(max-width:760px){
  .cap-grid,.why-grid,.proc-grid{grid-template-columns:1fr}
}

/* ---------- Notes / alerts ---------- */
.note{background:var(--ink-025);border:1px solid var(--ink-100);border-left:4px solid var(--ink-300);border-radius:var(--r-md);padding:var(--s4) var(--s5);font-size:14px;color:var(--ink-600)}
.note-blue{background:var(--blue-tint-2);border-color:var(--blue-line);border-left-color:var(--blue)}
.alert{padding:var(--s4) var(--s5);border-radius:var(--r-md);margin-bottom:var(--s5);font-size:15px}
.alert-ok{background:var(--green-tint);border:1px solid #b9dfc6;color:#14572a}
.alert-err{background:#fdecea;border:1px solid #f5c2bd;color:#8f1c14}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field.full{grid-column:1 / -1}
.field label{font-size:13px;font-weight:600;color:var(--ink-800)}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--ink-200);border-radius:var(--r-md);background:#fff;color:var(--ink-900);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:12px;color:var(--ink-500)}
.field .err{font-size:12px;color:var(--red)}
.hp{position:absolute;left:-9999px}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy);color:#c8c8c8;padding:var(--s8) 0 var(--s5);font-size:14px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:var(--s6);padding-bottom:var(--s7);border-bottom:1px solid var(--foot-bd)}
.footer-top h5{color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s4)}
.footer-top ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer-top a{color:#c8c8c8;font-size:14px}
.footer-top a:hover{color:#fff}
.footer-brand{color:#fff;font-weight:700;font-size:18px}
.footer-brand-block p{color:var(--foot-p);font-size:13px;line-height:1.6;margin-top:var(--s3);max-width:280px}
.socials{display:flex;gap:var(--s3);margin-top:var(--s5)}
.socials a{width:38px;height:38px;border-radius:10px;border:1px solid var(--soc-bd);display:grid;place-items:center;color:#c8c8c8;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.socials a:hover{color:#fff;text-decoration:none;transform:translateY(-2px);border-color:transparent}
.socials a.s-li:hover{background:#0a66c2;box-shadow:0 6px 16px rgba(10,102,194,.4)}
.socials a.s-fb:hover{background:#1877f2;box-shadow:0 6px 16px rgba(24,119,242,.4)}
.socials a.s-wa:hover{background:#25d366;color:#08341d;box-shadow:0 6px 16px rgba(37,211,102,.4)}
.socials svg{width:17px;height:17px;fill:currentColor}
.footer-bottom{padding-top:var(--s5);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--foot-mut);flex-wrap:wrap;gap:var(--s3)}
.footer-bottom a{color:var(--foot-mut)}
.legal-links{display:flex;gap:var(--s5);flex-wrap:wrap}
.disclosure{background:var(--disc-bg);border-top:1px solid var(--foot-bd);padding:var(--s5) 0;font-size:12px;color:var(--foot-mut);line-height:1.6}
.disclosure p{color:#7e91a6;margin-bottom:var(--s3)}
.disclosure p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------------
   Compatibility aliases.
   The hand-written candidate pages (work-authorization-support, contract-roles,
   refer-a-friend) were authored against an earlier palette. Rather than rewrite
   that copy, we alias the old class names onto the Chase design system. Without
   these, those pages render an unstyled hero — white text on white.
   New pages should use the canonical classes above.
--------------------------------------------------------------------------- */
.jp-hero{background:var(--hero-bg);color:var(--hero-ink);padding:var(--s9) 0 var(--s8);position:relative;overflow:hidden;border-bottom:var(--hero-bd)}
.jp-hero::before{content:"";position:absolute;inset:0;background-image:var(--hero-img,none);background-size:cover;background-position:center;opacity:var(--hero-img-op);filter:var(--hero-img-filter);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 10%,transparent 72%);pointer-events:none}
.jp-hero::after{content:"";position:absolute;right:-180px;top:-220px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 62%);pointer-events:none}
.jp-hero .container{position:relative;max-width:900px;z-index:2}
.jp-hero h1{color:var(--hero-ink);margin-bottom:var(--s5)}
.jp-hero .lede{font-size:19px;line-height:1.65;color:var(--hero-lede);max-width:680px;margin-bottom:var(--s6)}
.jp-hero .eyebrow{color:var(--hero-eyebrow)}
.jp-hero .eyebrow::before{background:var(--blue)}

/* The candidate pages (work authorization, contract roles, refer a friend) all
   carry a --hero-img: same photo treatment as the main heroes — image shown
   clearly, concise text low over a bottom gradient, side set per page. */
.jp-hero{display:flex;align-items:flex-end;min-height:480px}
.jp-hero::before{opacity:1;filter:saturate(.94) contrast(1.03);-webkit-mask-image:none;mask-image:none}
/* Repurpose ::after (was a corner glow) as the full bottom-up readability veil. */
.jp-hero::after{content:"";position:absolute;inset:0;top:auto;right:auto;width:auto;height:100%;border-radius:0;
  background:linear-gradient(to top,rgba(8,12,20,.86) 0%,rgba(8,12,20,.62) 26%,rgba(8,12,20,.18) 50%,transparent 72%)}
.jp-hero .container{position:relative;z-index:3;max-width:560px;padding-bottom:var(--s7)}
.jp-hero.pos-left  .container{margin-left:0;margin-right:auto}
.jp-hero.pos-right .container{margin-left:auto;margin-right:0}
.jp-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.jp-hero .lede{color:#e6ecf2;max-width:none;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.jp-hero .eyebrow{color:#7fd4f0}
@media(max-width:760px){
  .jp-hero{min-height:420px}
  .jp-hero .container{max-width:none;margin:0}
}

.btn-ghost{background:var(--ghost-bg);color:var(--ghost-fg);border-color:var(--ghost-bd)}
.btn-ghost:hover{background:var(--ghost-hbg);color:var(--ghost-hfg);border-color:var(--ghost-hbg)}

.card-accent{border-left:4px solid var(--blue)}
.pill-violet{background:var(--blue-tint);color:var(--blue-deepest)}

.sec-tight{padding:var(--s7) 0}

/* Three trust points beneath the home banner. */
.promo-row{gap:var(--s6)}
.promo{text-align:left}
.promo .card-icon{margin-bottom:var(--s3)}
.promo h3{font-size:17px;margin:0 0 var(--s2);color:var(--ink-900)}
.promo p{font-size:14px;color:var(--ink-600);margin:0;line-height:1.55}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--s6) 0}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .hero-grid{grid-template-columns:1fr;gap:var(--s6)}
  .footer-top{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:1024px){
  .split,.split-even{grid-template-columns:1fr;gap:var(--s6)}
  /* The apply form must not stay stuck to the viewport on a short screen. */
  .split aside .card{position:static !important}
  .filter-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .filter-grid .field:last-child{grid-column:1 / -1}
}
@media(max-width:860px){
  .grid-3{grid-template-columns:1fr}
  .filter-grid{grid-template-columns:1fr}
  .primary-nav{display:none}
  .navtoggle{display:inline-block}
  .primary-nav.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:var(--s3) 0;z-index:70;border-bottom:3px solid var(--navy);box-shadow:var(--shadow-lg);height:auto}
  .primary-nav.open .navitem{width:100%;height:auto;display:block}
  .primary-nav.open a,.primary-nav.open .navtrigger{display:block;padding:12px var(--s5);border:0;border-radius:0;width:100%;text-align:left;color:var(--ink-900)}
  .primary-nav.open .megamenu{display:block;position:static;margin-top:0;box-shadow:none;border:0;border-left:3px solid var(--ink-200);border-radius:0;margin-left:var(--s5);background:var(--ink-025);padding:var(--s2) 0}
  .primary-nav.open .megamenu a{color:var(--ink-700);padding-left:var(--s5)}
  .primary-nav.open .megamenu a:hover{background:var(--blue-tint-2);color:var(--blue-deepest)}
  .primary-nav.open .megamenu .mm-head{display:none}
  .navtrigger::after{float:right;margin-top:7px}
  .masthead .container{position:relative}
}
@media(max-width:760px){
  .utility .container{display:none}
  .grid-2,.form-grid{grid-template-columns:1fr}
  /* Tighter side gutter on phones so full-width content is not over-inset. */
  .container{padding:0 var(--s5)}
  .masthead .container{height:68px}
  .brand-logo{height:38px;max-width:190px}
  .header-cta .btn-secondary{display:none}
  .hero{padding:var(--s7) 0}
  .cta-band{padding:var(--s6) var(--s5)}
  .footer-top{grid-template-columns:1fr;gap:var(--s5)}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  /* Wide comparison tables (W-2 vs C2C vs 1099, the petition table) cannot fit
     a phone. Let them scroll horizontally instead of blowing out the page. */
  table.jp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:14px}
  table.jp-table th,table.jp-table td{padding:10px 12px}
  .cta-band h2{font-size:22px}
  .stat .n{font-size:28px}
  .hero-panel{padding:var(--s5)}
}

/* ============================================================
 * CRISP theme — component overrides
 *
 * The palette block near the top handles colour, radii and shadow tokens.
 * These rules handle what tokens cannot: literal shadows and glows baked into
 * component rules, lift-on-hover transforms, the type scale, and control
 * heights. Scoped to [data-theme="crisp"] and placed last so they win on
 * source order without !important.
 * ========================================================== */
[data-theme="crisp"]{
  /* 1. Flat. Kill every literal shadow and the radial accent glows. */
  --tick-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
  --card-bg:#fff; --card-bd:var(--ink-200); --card-shadow:none;
  --hero-veil:none; --hero-tint:none;
}
[data-theme="crisp"] *{box-shadow:none !important;text-shadow:none}
[data-theme="crisp"] .stats-band::after,
[data-theme="crisp"] .cta-band::after,
[data-theme="crisp"] .hero::before,
[data-theme="crisp"] .hero::after{display:none}

/* 2. No lift-on-hover. Hover changes one property, in 120ms. */
[data-theme="crisp"] .card-link:hover,
[data-theme="crisp"] .cap-card:hover,
[data-theme="crisp"] .hf:hover .hf-icon{transform:none}
[data-theme="crisp"] .card-link,
[data-theme="crisp"] .cap-card{transition:border-color .12s ease,background-color .12s ease}
[data-theme="crisp"] .card-link:hover,
[data-theme="crisp"] .cap-card:hover{border-color:var(--ink-300);background:var(--ink-025)}
[data-theme="crisp"] *{transition-duration:.12s !important}
@media (prefers-reduced-motion:reduce){
  [data-theme="crisp"] *{transition:none !important;animation:none !important}
}

/* 3. Type: heavier, tighter headings on a whole-pixel scale. Sentence case is
      a copy decision, not enforced here. */
[data-theme="crisp"] h1,[data-theme="crisp"] h2{font-weight:800}
[data-theme="crisp"] h1{font-size:clamp(32px,3.4vw,44px);line-height:1.1;letter-spacing:-.025em}
[data-theme="crisp"] h2{font-size:28px;line-height:1.2;letter-spacing:-.02em}
[data-theme="crisp"] h3{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
[data-theme="crisp"] h4{font-size:16px;font-weight:700;letter-spacing:0}
[data-theme="crisp"] .eyebrow,[data-theme="crisp"] .hero-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
[data-theme="crisp"] .stat .n,
[data-theme="crisp"] .num,
[data-theme="crisp"] table.jp-table td{font-variant-numeric:tabular-nums}

/* 4. Edges: hairline borders, 2px radii, no pills. */
[data-theme="crisp"] .btn,
[data-theme="crisp"] .card,
[data-theme="crisp"] .card-link,
[data-theme="crisp"] .cap-card,
[data-theme="crisp"] .hero-panel,
[data-theme="crisp"] .chip,
[data-theme="crisp"] .tag,
[data-theme="crisp"] input,
[data-theme="crisp"] select,
[data-theme="crisp"] textarea{border-radius:2px}
[data-theme="crisp"] .hf-icon{border-radius:2px}

/* 5. Controls: one height, one radius, a visible focus ring. */
[data-theme="crisp"] .btn{min-height:44px;padding:0 20px;font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border-width:1px;border-style:solid}
/* The header's compact pair keeps its own smaller height — forcing 44px here
   overflows the header row. Equal heights still hold within each row. */
[data-theme="crisp"] .btn-sm{min-height:36px;padding:0 12px;font-size:14px}
[data-theme="crisp"] input,
[data-theme="crisp"] select{height:44px}
/* 7. Hero.
      .hero-mesh is the BANNER PHOTOGRAPH (background-image:var(--hero-img)),
      not decoration — it stays. Only the two radial accent glows on
      .hero::before / ::after are dropped.

      Photo heroes keep the picture at full strength with white copy over one
      flat scrim, which replaces the stacked soft washes and the text-shadows
      crisp does not allow. Heroes with no photograph get the light
      content-sized treatment on --bg-2 instead. */
[data-theme="crisp"] .hero-mesh{display:block;opacity:1;filter:saturate(.85) contrast(1.02)}

[data-theme="crisp"] .hero:not(.has-photo){background-color:var(--alt-bg);color:var(--ink-900);
  border-bottom:1px solid var(--ink-200)}
[data-theme="crisp"] .hero:not(.has-photo) .hero-copy,
[data-theme="crisp"] .hero:not(.has-photo) .hero-copy h1{color:var(--ink-900)}
[data-theme="crisp"] .hero:not(.has-photo) .hero-copy .lede{color:var(--ink-600)}
[data-theme="crisp"] .hero:not(.has-photo) .hero-copy .hero-eyebrow{color:var(--ink-500)}

[data-theme="crisp"] .hero.has-photo{background-color:var(--navy);
  border-bottom:1px solid var(--ink-200)}
/* One flat scrim, weighted to whichever side the copy sits on. */
[data-theme="crisp"] .has-photo .hero-veil{display:block;
  background:linear-gradient(90deg,rgba(10,45,94,.92) 0%,rgba(10,45,94,.58) 34%,rgba(10,45,94,0) 66%)}
[data-theme="crisp"] .has-photo.pos-right .hero-veil{
  background:linear-gradient(90deg,rgba(10,45,94,0) 30%,rgba(10,45,94,.58) 60%,rgba(10,45,94,.92) 100%)}
[data-theme="crisp"] .has-photo.pos-center .hero-veil{background:rgba(10,45,94,.80)}
[data-theme="crisp"] .has-photo .hero-copy,
[data-theme="crisp"] .has-photo .hero-copy h1{color:#fff;text-shadow:none}
[data-theme="crisp"] .has-photo .hero-copy .lede{color:#e9eef5;text-shadow:none}
[data-theme="crisp"] .has-photo .hero-copy .hero-eyebrow,
[data-theme="crisp"] .has-photo .hero-copy .eyebrow-light{color:#fff}
/* .btn-ghost-light is the variant for dark backgrounds; the crisp --ghost-fg
   made it navy-on-navy over the scrim. White hairline, white label. */
[data-theme="crisp"] .btn-ghost-light{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.75)}
[data-theme="crisp"] .btn-ghost-light:hover{background:#fff;color:var(--navy);border-color:#fff}

/* 8. One action colour. The card CTA painted itself navy, which read as a
      second action; inside an already-clickable card it becomes the outline
      variant instead of competing with the solid coral. */
[data-theme="crisp"] .card-link .more{
  background:transparent;color:var(--blue);border:1px solid var(--blue);
  min-height:36px;padding:0 14px;border-radius:2px;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:8px}
[data-theme="crisp"] .card-link:hover .more{background:var(--blue);color:#fff}

/* 9. Checklist sweep. Every border down to a hairline, every radius to 2px,
      and no element left painting pure #000 text. */
[data-theme="crisp"] .masthead{border-bottom-width:1px}
[data-theme="crisp"] .megamenu{border-top-width:1px}
/* .card-top marks a card with a 4px accent rule; a hairline carries the same
   signal without breaking the 1px system. */
[data-theme="crisp"] .card-top{border-top-width:1px}
/* Article callouts and pull quotes carry a 4px accent rule from the
   per-article stylesheet, which is inlined AFTER the shared sheet, so these
   need the attribute selector's extra specificity to win on weight rather
   than on source order.
   (Careful: no line inside this heredoc may begin with the label CSS after
   whitespace — PHP 7.3+ would read it as the closing marker.) */
[data-theme="crisp"] .post-body .note,
[data-theme="crisp"] .post-body blockquote,
[data-theme="crisp"] .note{border-left-width:1px}
[data-theme="crisp"] .navtrigger{border-radius:2px}
[data-theme="crisp"] input,
[data-theme="crisp"] select,
[data-theme="crisp"] textarea{color:var(--ink-900);border:1px solid var(--ink-300)}
[data-theme="crisp"] input::placeholder,
[data-theme="crisp"] textarea::placeholder{color:var(--ink-500)}
[data-theme="crisp"] input:focus,
[data-theme="crisp"] select:focus,
[data-theme="crisp"] textarea:focus{border-color:var(--blue);outline:none}
[data-theme="crisp"] .s-li,
[data-theme="crisp"] .s-fb,
[data-theme="crisp"] .s-wa,
[data-theme="crisp"] .s-x,
[data-theme="crisp"] .s-ig,
[data-theme="crisp"] .theme-switch,
[data-theme="crisp"] .theme-switch a{border-radius:2px}
[data-theme="crisp"] :focus-visible{outline:3px solid #ffb300;outline-offset:2px}
[data-theme="crisp"] a:hover{text-decoration:underline;text-underline-offset:3px}

/* 6. Sections alternate --bg / --bg-2 and are separated by a hairline, rather
      than by gradient bands. */
/* The stats and CTA strips stay brand-coloured, as they were before crisp —
   but a flat solid fill rather than the original gradient, and with the corner
   glows dropped. Flattening them to --bg-2 was wrong twice over: it lost the
   blue strips, and their labels (.l, and the CTA paragraph) are palette
   colours chosen for a dark band, so they became pale text on near-white. */
[data-theme="crisp"] .stats-band,
[data-theme="crisp"] .cta-band{background:var(--navy);color:#fff}
[data-theme="crisp"] .stats-band .n,
[data-theme="crisp"] .cta-band h2{color:#fff}
[data-theme="crisp"] .stats-band .l,
[data-theme="crisp"] .cta-band p{color:#c3cfdb}
/* Solid white against the band, inverting on hover — the outline-on-dark
   counterpart to the coral solid used on light sections. */
[data-theme="crisp"] .cta-band .btn-secondary{background:#fff;color:var(--navy);
  border:1px solid #fff}
[data-theme="crisp"] .cta-band .btn-secondary:hover{background:transparent;color:#fff}