/* ==========================================================================
   Webboosters
   Design system + components.

   Direction: corporate light. Navy chrome, blue accent, white content.
   Lexend for headings, Source Sans 3 for body, JetBrains Mono reserved for
   technology names only.

   Contrast: foreground/background pairs are annotated with their measured
   ratio. Body text clears 4.5:1 and large text clears 3:1 on the LIGHTEST
   surface it can appear on, not only on white.

   Structure
   01  Tokens
   02  Reset and base
   03  Typography
   04  Layout primitives
   05  Buttons, chips, tags, icons
   06  Header and navigation
   07  Hero
   08  Cards: what we build
   09  Company and fact table
   10  Careers band
   11  Contact lanes
   12  Footer
   13  Job listings
   14  Teams, leadership, insights
   15  Forms
   16  Prose and page furniture
   17  Utilities, motion, print
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Surfaces, lightest to darkest */
	--wb-page:        #F7F9FC;
	--wb-surface:     #FFFFFF;
	--wb-surface-2:   #F1F5F9;
	--wb-surface-3:   #E8EEF5;
	--wb-line:        #E2E8F0;
	--wb-line-strong: #CBD5E1;

	/* Ink on light surfaces */
	--wb-ink:         #0F172A;  /* 17.8:1 on white */
	--wb-ink-2:       #42506A;  /* 8.1:1  on white, 7.4:1 on --wb-surface-2 */
	--wb-ink-3:       #5C6B80;  /* 5.4:1  on white, 4.9:1 on --wb-surface-2 */

	/* Navy chrome: header, footer, inverted sections */
	--wb-navy:        #0F172A;
	--wb-navy-2:      #16213A;
	--wb-navy-line:   #263149;
	--wb-on-navy:     #FFFFFF;  /* 17.8:1 on navy */
	--wb-on-navy-2:   #C3D0E0;  /* 11.3:1 on navy */
	--wb-on-navy-3:   #9FB0C4;  /* 8.1:1  on navy */

	/* Accent */
	--wb-accent:      #0369A1;  /* 5.9:1 on white, 5.4:1 on --wb-surface-2 */
	--wb-accent-dark: #02547F;  /* hover */
	--wb-accent-soft: #EFF6FC;  /* chip and callout fill */
	--wb-accent-edge: #CFE3F3;
	--wb-accent-lift: #5FB2F0;  /* 7.8:1 on navy, for links on dark chrome */

	/* Status */
	--wb-green:       #0B7A5A;
	--wb-amber:       #9A5B00;
	--wb-red:         #B4232A;
	--wb-red-soft:    #FDF2F2;

	/* Type */
	--wb-head: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--wb-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--wb-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Scale: 12 14 16 18 20 24 32 40 52 */
	--wb-t-xs:   0.75rem;
	--wb-t-sm:   0.875rem;
	--wb-t-base: 1rem;
	--wb-t-md:   1.125rem;
	--wb-t-lg:   1.25rem;
	--wb-t-xl:   clamp(1.3rem, 1.16rem + 0.6vw, 1.5rem);
	--wb-t-2xl:  clamp(1.6rem, 1.36rem + 1vw, 2rem);
	--wb-t-3xl:  clamp(1.9rem, 1.54rem + 1.5vw, 2.5rem);
	--wb-t-4xl:  clamp(2.25rem, 1.65rem + 2.5vw, 3.25rem);

	/* Spacing, 4pt rhythm */
	--wb-s-1:  0.25rem;
	--wb-s-2:  0.5rem;
	--wb-s-3:  0.75rem;
	--wb-s-4:  1rem;
	--wb-s-5:  1.5rem;
	--wb-s-6:  2rem;
	--wb-s-7:  3rem;
	--wb-s-8:  4rem;
	--wb-s-9:  6rem;
	--wb-s-10: 8rem;

	/* Geometry. Premium direction: generous radii, pill controls. */
	--wb-r-sm: 6px;
	--wb-r:    10px;
	--wb-r-lg: 16px;
	--wb-r-xl: 22px;
	--wb-r-pill: 999px;
	--wb-shell: 1200px;
	--wb-shell-narrow: 720px;

	/* Elevation, one scale */
	--wb-e-1: 0 1px 2px rgba(15, 23, 42, 0.06);
	--wb-e-2: 0 4px 14px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
	--wb-e-3: 0 24px 48px rgba(15, 23, 42, 0.12), 0 6px 14px rgba(15, 23, 42, 0.06);

	/*
	 * Motion. Three durations, three curves, each with one job:
	 *   --wb-ease        hovers and colour shifts, gentle
	 *   --wb-ease-out    entrances — starts fast, so the interface feels like
	 *                    it answered immediately; never use ease-in on UI
	 *   --wb-ease-drawer the iOS sheet curve, only for the mobile drawer
	 */
	--wb-fast: 150ms;
	--wb-mid:  240ms;
	--wb-slow: 360ms;
	--wb-ease:        cubic-bezier(0.22, 0.7, 0.28, 1);
	--wb-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
	--wb-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

	/* Layers */
	--wb-z-sticky: 40;
	--wb-z-nav: 60;
	--wb-z-modal: 100;
}

/* --------------------------------------------------------------------------
   02  Reset and base
   -------------------------------------------------------------------------- */

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

/*
 * The hidden attribute must always win. The browser's own [hidden] rule is a
 * UA-origin declaration, and ANY author declaration — .wb-job { display: grid }
 * for one — beats it silently. Without this line the job filters marked cards
 * hidden and every card stayed on screen.
 */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 92px;
}

body {
	margin: 0;
	background: var(--wb-page);
	color: var(--wb-ink);
	font-family: var(--wb-sans);
	font-size: var(--wb-t-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { border-radius: inherit; }

a {
	color: var(--wb-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--wb-fast) var(--wb-ease);
}
a:hover { color: var(--wb-accent-dark); }

button, input, select, textarea { font: inherit; color: inherit; }

/*
 * Two-tone focus ring. A single accent-coloured ring reaches only 2.9:1
 * against the navy header, under the 3:1 WCAG requires of a focus indicator.
 * A navy outline with a white halo means one of the two layers is always
 * high contrast, whether the control sits on white, on a tinted band, or on
 * the navy chrome.
 */
:focus-visible {
	outline: 2px solid var(--wb-navy);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #FFFFFF;
	border-radius: var(--wb-r-sm);
}

::selection { background: var(--wb-accent); color: #fff; }

hr { border: 0; border-top: 1px solid var(--wb-line); margin: var(--wb-s-7) 0; }

.wb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--wb-z-modal);
	background: var(--wb-accent);
	color: #fff;
	padding: var(--wb-s-3) var(--wb-s-5);
	font-weight: 600;
	border-radius: 0 0 var(--wb-r) 0;
}
.wb-skip:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   03  Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wb-head);
	margin: 0 0 var(--wb-s-4);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--wb-ink);
	text-wrap: balance;
}

.wb-h1, h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.25rem); line-height: 1.1; }
.wb-h2, h2 { font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem); }
.wb-h3, h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.375rem); letter-spacing: -0.012em; }
h4 { font-size: var(--wb-t-md); }

p { margin: 0 0 var(--wb-s-4); }
p:last-child { margin-bottom: 0; }

/*
 * The eyebrow is set in the body face, not monospace. Monospace is reserved
 * for technology names, where the fixed width carries meaning.
 */
.wb-eyebrow {
	font-family: var(--wb-sans);
	font-size: var(--wb-t-xs);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wb-accent);
	margin: 0 0 var(--wb-s-3);
}

/* The team link in a vacancy eyebrow is a target on its own, so give it height. */
.wb-eyebrow a { display: inline-block; padding-block: 4px; color: inherit; }

/* A small bordered pill label - hero badge and section markers. */
.wb-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: var(--wb-r-pill);
	background: var(--wb-surface);
	border: 1px solid var(--wb-line);
	box-shadow: var(--wb-e-1);
	font-size: var(--wb-t-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wb-ink-3);
	margin: 0 0 var(--wb-s-4);
}
.wb-section--deep .wb-pill {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--wb-navy-line);
	box-shadow: none;
	color: var(--wb-on-navy-2);
}

/* Centred section header: pill, heading, optional line. */
.wb-sechead { text-align: center; max-width: 680px; margin-inline: auto; }
.wb-sechead .wb-h2 { margin-inline: auto; }
.wb-sechead__line { color: var(--wb-ink-3); margin: var(--wb-s-3) 0 0; }
.wb-section--deep .wb-sechead__line { color: var(--wb-on-navy-2); }

/*
 * A one-sentence sub-line under a heading. Eyebrows are for 1–3 word labels;
 * a full sentence in letter-spaced caps is unreadable, so sentences get this.
 */
.wb-subline {
	font-weight: 600;
	color: var(--wb-accent);
	margin: 0.75rem 0 0;
}

.wb-standfirst {
	font-size: var(--wb-t-lg);
	line-height: 1.55;
	color: var(--wb-ink-2);
	max-width: 60ch;
	margin: var(--wb-s-4) 0 0;
	text-wrap: pretty;
}

/* A standfirst may be a container of short paragraphs, not one block. */
.wb-standfirst p { margin: 0 0 var(--wb-s-4); }
.wb-standfirst p:last-child { margin-bottom: 0; }
.wb-lead p { margin: 0 0 var(--wb-s-4); }
.wb-lead p:last-child { margin-bottom: 0; }

.wb-lead {
	font-size: var(--wb-t-md);
	line-height: 1.65;
	color: var(--wb-ink-2);
	max-width: 66ch;
}

.wb-hi { color: var(--wb-accent); }

/*
 * The hero highlight draws its underline once, on load — a single quiet
 * flourish, not a loop. Scoped to .wb-js and to the hero so it cannot fire
 * on every heading, and the reduced-motion block clamps it to done.
 */
.wb-hero .wb-hi { position: relative; }
.wb-hero .wb-hi::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 3px;
	border-radius: 2px;
	background: var(--wb-accent-edge);
	transform-origin: left center;
}
.wb-js .wb-hero .wb-hi::after {
	transform: scaleX(0);
	animation: wb-hi-draw 600ms var(--wb-ease-out) 350ms forwards;
}
@keyframes wb-hi-draw {
	to { transform: scaleX(1); }
}

.wb-mono {
	font-family: var(--wb-mono);
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
}

.wb-num { font-variant-numeric: tabular-nums; }

.wb-secthead { max-width: 66ch; margin-bottom: var(--wb-s-7); }
.wb-secthead .wb-h2 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   04  Layout primitives
   -------------------------------------------------------------------------- */

.wb-shell {
	width: 100%;
	max-width: var(--wb-shell);
	margin-inline: auto;
	padding-inline: var(--wb-s-5);
}
.wb-shell--narrow { max-width: var(--wb-shell-narrow); }

.wb-section {
	padding-block: clamp(2.75rem, 1.1rem + 5.9vw, 6rem);
	background: var(--wb-surface);
	position: relative;
}
.wb-section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); }

/*
 * Alternating tinted band. --paper and --paper-2 are kept as aliases so that
 * inverting the palette did not require touching every template.
 */
.wb-section--surface,
.wb-section--paper-2 { background: var(--wb-surface-2); }
.wb-section--paper   { background: var(--wb-surface); }
.wb-section--line    { border-top: 1px solid var(--wb-line); border-bottom: 1px solid var(--wb-line); }

/* Inverted navy section */
.wb-section--deep {
	background: var(--wb-navy);
	color: var(--wb-on-navy-2);
}
.wb-section--deep h1,
.wb-section--deep h2,
.wb-section--deep h3 { color: var(--wb-on-navy); }
.wb-section--deep .wb-eyebrow { color: var(--wb-accent-lift); }
.wb-section--deep .wb-standfirst,
.wb-section--deep .wb-lead,
.wb-section--deep .wb-muted { color: var(--wb-on-navy-2); }
.wb-section--deep a:not(.wb-btn) { color: var(--wb-accent-lift); }

/*
 * Light cards keep their own ink inside an inverted section. Without this the
 * rules above put white headings onto a white card, which is invisible.
 */
.wb-section--deep :is(.wb-lane, .wb-bcard, .wb-team, .wb-job, .wb-person, .wb-steplist, .wb-facts, .wb-jobside) { color: var(--wb-ink-2); }
.wb-section--deep :is(.wb-lane, .wb-bcard, .wb-team, .wb-job, .wb-person, .wb-steplist, .wb-facts, .wb-jobside) :is(h1, h2, h3, h4) { color: var(--wb-ink); }
/*
 * :not(.wb-btn) matters. Without it this rule repaints a primary button's
 * label accent-on-accent — 1.00:1, an invisible button — because it is more
 * specific than .wb-btn--primary. Buttons carry their own colours.
 */
.wb-section--deep :is(.wb-lane, .wb-bcard, .wb-team, .wb-job, .wb-person, .wb-steplist) a:not(.wb-btn) { color: var(--wb-accent); }
.wb-section--deep :is(.wb-lane, .wb-bcard, .wb-team, .wb-job, .wb-person) .wb-list li { color: var(--wb-ink-2); border-color: var(--wb-line); }
.wb-section--deep :is(.wb-lane, .wb-bcard, .wb-team, .wb-job, .wb-person) .wb-list li::before { background: var(--wb-accent); }
.wb-section--deep :is(.wb-lane, .wb-bcard, .wb-team) .wb-chip {
	background: var(--wb-accent-soft);
	border-color: var(--wb-accent-edge);
	color: #0B4A72;
}

.wb-grid { display: grid; gap: var(--wb-s-5); }
.wb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wb-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
}
.wb-split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

@media (max-width: 980px) {
	.wb-grid--3, .wb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wb-split, .wb-split--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.wb-grid--2, .wb-grid--3, .wb-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.wb-imgph {
	display: block;
	aspect-ratio: 4 / 3;
	width: 100%;
	border-radius: var(--wb-r);
	background: var(--wb-surface-2);
	border: 1px dashed var(--wb-line-strong);
}

.wb-figure { margin: 0; }
.wb-figure img { border-radius: var(--wb-r-lg); width: 100%; }
.wb-figure figcaption {
	margin-top: var(--wb-s-3);
	font-size: var(--wb-t-xs);
	color: var(--wb-ink-3);
}

/* --------------------------------------------------------------------------
   05  Buttons, chips, tags, icons
   -------------------------------------------------------------------------- */

.wb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wb-s-2);
	min-height: 46px;
	padding: 0 var(--wb-s-5);
	border: 1px solid transparent;
	border-radius: var(--wb-r-pill);
	background: transparent;
	color: var(--wb-ink);
	font-family: var(--wb-sans);
	font-size: var(--wb-t-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--wb-fast) var(--wb-ease),
	            border-color var(--wb-fast) var(--wb-ease),
	            color var(--wb-fast) var(--wb-ease),
	            box-shadow var(--wb-fast) var(--wb-ease),
	            transform 160ms var(--wb-ease-out);
	-webkit-tap-highlight-color: transparent;
}

/*
 * Press feedback. The scale is subtle and instant-feeling, and it is the one
 * cue that tells a visitor the interface heard the click before the page
 * responds. transform-based, so it composites and costs nothing.
 */
.wb-btn:active { transform: scale(0.97); }
:is(.wb-teamchip, .wb-job, .wb-opening, .wb-post, .wb-team):active { transform: scale(0.99); }

.wb-btn--primary {
	background: var(--wb-accent);
	color: #fff;
	border-color: var(--wb-accent);
	box-shadow: var(--wb-e-1);
}
.wb-btn--primary:hover {
	background: var(--wb-accent-dark);
	border-color: var(--wb-accent-dark);
	color: #fff;
	box-shadow: var(--wb-e-2);
}

.wb-btn--ghost {
	background: var(--wb-surface);
	border-color: var(--wb-line-strong);
	color: var(--wb-ink);
}
.wb-btn--ghost:hover {
	border-color: var(--wb-accent);
	color: var(--wb-accent-dark);
	background: var(--wb-accent-soft);
}

.wb-btn--sm { min-height: 40px; padding: 0 var(--wb-s-4); font-size: var(--wb-t-sm); }
.wb-btn--block { width: 100%; }

/* Buttons sitting on navy chrome */
.wb-section--deep .wb-btn--ghost,
.wb-footer .wb-btn--ghost {
	background: transparent;
	border-color: var(--wb-navy-line);
	color: var(--wb-on-navy);
}
.wb-section--deep .wb-btn--ghost:hover,
.wb-footer .wb-btn--ghost:hover {
	border-color: var(--wb-accent-lift);
	color: var(--wb-on-navy);
	background: rgba(255, 255, 255, 0.06);
}

/*
 * A navy section can hold white cards, and a ghost button inside one of those
 * is on white, not on navy — the inversion above made it white-on-white with a
 * navy outline. These put it back to the light treatment.
 */
.wb-section--deep :is(.wb-lane, .wb-bcard, .wb-team, .wb-job, .wb-person, .wb-steplist, .wb-facts, .wb-jobside) .wb-btn--ghost {
	background: var(--wb-surface);
	border-color: var(--wb-line-strong);
	color: var(--wb-ink);
}
.wb-section--deep :is(.wb-lane, .wb-bcard, .wb-team, .wb-job, .wb-person, .wb-steplist, .wb-facts, .wb-jobside) .wb-btn--ghost:hover {
	border-color: var(--wb-accent);
	color: var(--wb-accent-dark);
	background: var(--wb-accent-soft);
}

.wb-btns { display: flex; flex-wrap: wrap; gap: var(--wb-s-3); }

.wb-icon { flex: none; display: inline-block; vertical-align: -0.15em; }
.wb-btn .wb-icon { transition: transform var(--wb-fast) var(--wb-ease-out); }

/* The signature arrow: a small contrasting circle at the end of the button. */
.wb-btn .wb-icon--arrow {
	width: 24px; height: 24px;
	padding: 5px;
	box-sizing: border-box;
	border-radius: 50%;
	margin-right: -6px;
}
.wb-btn--primary .wb-icon--arrow { background: #FFFFFF; color: var(--wb-accent); }
.wb-btn--ghost .wb-icon--arrow { background: var(--wb-accent-soft); color: var(--wb-accent-dark); }

/*
 * Hover-only motion is gated to devices that actually hover. On touch, tap
 * fires :hover and leaves the arrow stuck three pixels to the right.
 */
@media (hover: hover) and (pointer: fine) {
	.wb-btn:hover .wb-icon--arrow { transform: translateX(3px); }
}

/* Technology names. The one place monospace is used. */
.wb-chips { display: flex; flex-wrap: wrap; gap: var(--wb-s-2); margin: 0; padding: 0; list-style: none; }
.wb-chip {
	font-family: var(--wb-mono);
	font-size: 0.6875rem;
	line-height: 1;
	padding: 6px 9px;
	border-radius: var(--wb-r-sm);
	background: var(--wb-accent-soft);
	border: 1px solid var(--wb-accent-edge);
	color: #0B4A72;              /* 7.4:1 on --wb-accent-soft */
	white-space: nowrap;
}
.wb-section--deep .wb-chip {
	background: rgba(95, 178, 240, 0.12);
	border-color: rgba(95, 178, 240, 0.32);
	color: #A9D3F5;
}

.wb-tag {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
	font-size: var(--wb-t-xs);
	font-weight: 500;
	padding: 5px 10px;
	border-radius: var(--wb-r-sm);
	background: var(--wb-surface-2);
	border: 1px solid var(--wb-line);
	color: var(--wb-ink-2);
	/*
	 * Wraps rather than pushing the page sideways. A shift label such as
	 * "General shift, no night work" is wider than a 320px screen once the
	 * shell padding is taken off, and nowrap turned that into horizontal
	 * scroll on the whole document.
	 */
	max-width: 100%;
	white-space: normal;
}

.wb-tag .wb-icon { flex: none; margin-top: 2px; }
.wb-tag--night { background: #EEF4FB; border-color: #CFE0F2; color: #14507F; }
.wb-tag--day   { background: #FBF4E9; border-color: #EDDCC0; color: #7A4A05; }
.wb-tag--rot   { background: #EDF7F3; border-color: #C9E7DC; color: #0A6248; }

.wb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wb-green); flex: none; }

/* --------------------------------------------------------------------------
   06  Header and navigation
   -------------------------------------------------------------------------- */

.wb-header {
	position: sticky;
	top: 0;
	z-index: var(--wb-z-nav);
	background: var(--wb-navy);
	border-bottom: 1px solid var(--wb-navy-line);
	transition: box-shadow var(--wb-mid) var(--wb-ease);
}
.wb-header--scrolled { box-shadow: 0 4px 20px rgba(15, 23, 42, 0.22); }

.wb-header__inner { display: flex; align-items: center; gap: var(--wb-s-5); min-height: 70px; }

.wb-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--wb-s-3);
	text-decoration: none;
	color: var(--wb-on-navy);
	font-family: var(--wb-head);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: var(--wb-t-md);
	flex: none;
}
.wb-brand img { max-height: 34px; width: auto; }
.wb-brand__word {
	font-family: var(--wb-head);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: 1.35rem;
	line-height: 34px;      /* matches the maximum logo height */
}
.wb-brand__mark {
	width: 30px; height: 30px;
	border-radius: 6px;
	background: var(--wb-accent);
	display: grid;
	place-items: center;
	color: #fff;
	flex: none;
}

/* Set on the container, not only on the links, so a menu item that renders
   text outside its anchor cannot inherit dark ink onto the navy bar. */
.wb-nav { margin-left: auto; color: var(--wb-on-navy-2); }
.wb-nav__list { display: flex; align-items: center; gap: var(--wb-s-1); list-style: none; margin: 0; padding: 0; }
.wb-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--wb-s-3);
	color: var(--wb-on-navy-2);
	text-decoration: none;
	font-size: var(--wb-t-sm);
	font-weight: 500;
	border-radius: var(--wb-r-sm);
	transition: color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease);
}
.wb-nav__list a:hover { color: var(--wb-on-navy); background: rgba(255, 255, 255, 0.07); }
.wb-nav__list .current-menu-item > a,
.wb-nav__list .current_page_item > a,
.wb-nav__list .current-menu-parent > a {
	color: var(--wb-on-navy);
	box-shadow: inset 0 -2px 0 var(--wb-accent-lift);
}

.wb-nav__list li { position: relative; }
.wb-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--wb-surface);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r);
	box-shadow: var(--wb-e-3);
	list-style: none;
	margin: 0;
	padding: var(--wb-s-2);
	/*
	 * visibility + opacity + a 4px drop, not display:none — display cannot
	 * transition, which made the dropdown blink in and out. Entrance is
	 * 160ms from just above its resting point (nothing appears from nothing);
	 * exit is 120ms, because leaving is the system's move, not the user's.
	 * The visibility delay keeps it hoverable while it fades.
	 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transform-origin: top left;
	transition: opacity 120ms var(--wb-ease-out), transform 120ms var(--wb-ease-out), visibility 0s linear 120ms;
	z-index: var(--wb-z-nav);
}
/* Open on hover only where hover exists; focus-within covers keyboard and touch. */
@media (hover: hover) and (pointer: fine) {
	.wb-nav__list li:hover > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		transition: opacity 160ms var(--wb-ease-out), transform 160ms var(--wb-ease-out), visibility 0s;
	}
}
.wb-nav__list li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 160ms var(--wb-ease-out), transform 160ms var(--wb-ease-out), visibility 0s;
}
.wb-nav__list .sub-menu a { width: 100%; color: var(--wb-ink-2); }
.wb-nav__list .sub-menu a:hover { color: var(--wb-ink); background: var(--wb-surface-2); }

.wb-header__cta { flex: none; }
.wb-header__count {
	font-family: var(--wb-mono);
	font-size: 0.6875rem;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 999px;
	/*
	 * Solid, not a white overlay. A 22% white veil over the accent left white
	 * digits at 3.8:1, and 11px type needs 4.5:1. Darkening instead of
	 * lightening gives 9.2:1 and keeps the badge legible on any button colour.
	 */
	background: #024C74;
	color: #FFFFFF; /* on #024C74 — 9.2:1 */
	margin-left: 2px;
}

.wb-burger {
	display: none;
	width: 46px; height: 46px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wb-navy-line);
	border-radius: var(--wb-r);
	background: transparent;
	color: var(--wb-on-navy);
	cursor: pointer;
	margin-left: auto;
	transition: transform 160ms var(--wb-ease-out);
}
.wb-burger:active { transform: scale(0.95); }

@media (max-width: 1080px) {
	.wb-burger { display: inline-flex; }
	.wb-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(400px, 88vw);
		background: var(--wb-navy);
		border-left: 1px solid var(--wb-navy-line);
		padding: var(--wb-s-8) var(--wb-s-5) var(--wb-s-6);
		transform: translateX(100%);
		/*
		 * visibility, not transform alone. A drawer parked off-screen with
		 * transform only still takes keyboard focus, and in some browsers it
		 * widens the document. The delay keeps it visible while it closes.
		 */
		visibility: hidden;
		/*
		 * Asymmetric on purpose: closing is the system responding, so it is
		 * quick; opening is 400ms on the iOS sheet curve further down. The
		 * visibility delay must always match the close duration.
		 */
		transition: transform var(--wb-mid) var(--wb-ease-out), visibility 0s linear var(--wb-mid);
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: var(--wb-z-modal);
		margin-left: 0;
	}
	.wb-nav.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 400ms var(--wb-ease-drawer), visibility 0s;
	}
	.wb-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.wb-nav__list a { display: flex; min-height: 52px; font-size: var(--wb-t-md); padding-inline: var(--wb-s-4); }
	/* In the drawer the sub-menu is a plain indented list, always visible. */
	.wb-nav__list .sub-menu { position: static; display: block; visibility: visible; opacity: 1; transform: none; transition: none; border: 0; box-shadow: none; background: transparent; padding-left: var(--wb-s-4); }
	.wb-nav__list .sub-menu a { color: var(--wb-on-navy-2); }
	.wb-nav__close {
		position: absolute;
		top: var(--wb-s-4); right: var(--wb-s-4);
		width: 44px; height: 44px;
		display: grid; place-items: center;
		background: transparent; border: 0; color: var(--wb-on-navy); cursor: pointer;
		transition: transform 160ms var(--wb-ease-out);
	}
	.wb-nav__close:active { transform: scale(0.95); }
	.wb-header__cta { display: none; }
	.wb-nav__cta { margin-top: var(--wb-s-5); }
	.wb-scrim {
		position: fixed; inset: 0;
		background: rgba(8, 13, 24, 0.55);
		/*
		 * BELOW the header, not below the modal layer. The sticky header is
		 * its own stacking context, so the drawer inside it can never paint
		 * above a sibling scrim with a higher z-index than the header itself —
		 * the scrim was covering the open drawer and eating every tap.
		 */
		z-index: calc(var(--wb-z-nav) - 1);
		opacity: 0;
		pointer-events: none;
		/* Fades out at the drawer's close speed, in at its open speed. */
		transition: opacity var(--wb-mid) var(--wb-ease-out);
	}
	.wb-scrim.is-open {
		opacity: 1;
		pointer-events: auto;
		transition: opacity 400ms var(--wb-ease-drawer);
	}
}
@media (min-width: 1081px) {
	.wb-nav__close, .wb-nav__cta, .wb-scrim { display: none; }
}

/* --------------------------------------------------------------------------
   07  Homepage
   -------------------------------------------------------------------------- */

/* Inline abstract graphics. They are decorative and hidden from assistive
   technology in the markup; here they only need to scale without shifting. */
.wb-graphic { line-height: 0; }
.wb-graphic svg { width: 100%; height: auto; display: block; }

/* --- Hero --- */
.wb-hero {
	position: relative;
	padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
	background:
		radial-gradient(900px 460px at 78% 8%, rgba(3, 105, 161, 0.07), transparent 62%),
		var(--wb-surface);
}
.wb-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}
.wb-hero__badge { margin-bottom: var(--wb-s-5); }
.wb-hero__h1 {
	margin: 0 0 var(--wb-s-5);
	max-width: 17ch;
	font-size: clamp(2.1rem, 1.25rem + 3.2vw, 3.5rem);
	line-height: 1.08;
}
.wb-hero__body {
	font-size: var(--wb-t-md);
	color: var(--wb-ink-2);
	max-width: 54ch;
	margin: 0 0 var(--wb-s-6);
	line-height: 1.65;
}
/* Reserve the aspect ratio so the graphic cannot shift the hero as it paints. */
.wb-hero__visual { aspect-ratio: 520 / 420; }

/* Social-proof row: three overlapping icon coins and one line. */
.wb-hero__social { display: flex; align-items: center; gap: var(--wb-s-3); margin-top: var(--wb-s-6); }
.wb-hero__faces { display: flex; }
.wb-hero__face {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--wb-accent-soft);
	border: 2px solid var(--wb-surface);
	box-shadow: var(--wb-e-1);
	color: var(--wb-accent);
	margin-left: -9px;
}
.wb-hero__face:first-child { margin-left: 0; }
.wb-hero__socialtext { font-size: var(--wb-t-sm); color: var(--wb-ink-3); }

/*
 * The floating composition. Three layered cards with a slight shared tilt;
 * two of them drift a few pixels, slowly, in opposite phase. transform only,
 * one axis, and nothing in the cards is readable - skeleton geometry, not a
 * fake dashboard.
 */
.wb-float { position: relative; width: 100%; height: 100%; perspective: 1100px; }
.wb-float::before {
	content: '';
	position: absolute;
	inset: -6% -10%;
	background: radial-gradient(closest-side, #D8E9F8 0%, rgba(216, 233, 248, 0) 72%);
	border-radius: 50%;
}
.wb-float__card {
	position: absolute;
	background: var(--wb-surface);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-xl);
	box-shadow: var(--wb-e-3);
}
.wb-float__card--frame {
	top: 4%; right: 2%;
	width: 76%;
	padding: 10px;
	transform: rotateY(-7deg) rotateX(3deg);
}
.wb-float__scene { line-height: 0; }
.wb-float__scene svg { width: 100%; height: auto; display: block; border-radius: calc(var(--wb-r-xl) - 10px); }
/* An uploaded hero image takes the drawing's exact frame: same ratio, same inner radius.
   The ratio sits on the img, not the wrapper, so both variants size identically. */
.wb-float__scene--photo img { width: 100%; height: auto; aspect-ratio: 520 / 340; object-fit: cover; display: block; border-radius: calc(var(--wb-r-xl) - 10px); }
.wb-float__card--queue {
	left: 0; bottom: 16%;
	width: 56%;
	padding: var(--wb-s-5);
	transform: rotateY(-7deg) rotateX(3deg);
}
.wb-float__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.wb-float__row + .wb-float__row { border-top: 1px solid var(--wb-line); }
.wb-float__thumb {
	flex: none;
	width: 34px; height: 26px;
	border-radius: 6px;
	background: linear-gradient(180deg, #EAF3FB 0%, #FFFFFF 100%);
	border: 1px solid var(--wb-line);
	position: relative;
	overflow: hidden;
}
.wb-float__thumb::after {
	content: '';
	position: absolute;
	left: 55%; top: 30%;
	width: 8px; height: 12px;
	border: 1.5px solid var(--wb-accent);
	border-radius: 2.5px;
}
.wb-float__thumb::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 4px;
	height: 1.5px;
	background: var(--wb-line);
}
.wb-float__thumb--alt::after { left: 22%; top: 24%; }
.wb-float__lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wb-float__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wb-line-strong); flex: none; }
.wb-float__dot--ok { background: var(--wb-green); }
.wb-float__dot--warn { background: var(--wb-amber); }
.wb-float__line { height: 8px; border-radius: 4px; background: var(--wb-surface-3); }
.wb-float__line--thin { height: 6px; opacity: .8; }
.wb-float__card--status {
	right: 0; bottom: 4%;
	width: 30%;
	padding: var(--wb-s-4);
	display: flex; align-items: center; gap: var(--wb-s-3);
	transform: rotateY(-7deg) rotateX(3deg);
}
.wb-float__ring {
	width: 30px; height: 30px; flex: none;
	border-radius: 50%;
	border: 3.5px solid var(--wb-accent-edge);
	border-top-color: var(--wb-accent);
}
.wb-float__chart { flex: 1; min-width: 0; line-height: 0; }
.wb-float__chart svg { width: 100%; height: auto; display: block; }

.wb-js .wb-float__card--queue { animation: wb-drift 7s var(--wb-ease) infinite alternate; }
.wb-js .wb-float__card--status { animation: wb-drift 7s var(--wb-ease) 1.2s infinite alternate-reverse; }
@keyframes wb-drift {
	from { translate: 0 0; }
	to   { translate: 0 -9px; }
}
/* One breakpoint: when the hero stacks, the composition caps and centres.
   The explicit width matters: with margin-inline auto and only absolutely
   positioned children, an auto width would collapse to zero. */
@media (max-width: 1040px) {
	.wb-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.wb-hero__visual { width: min(480px, 100%); margin-inline: auto; }
}

/* --- Numbers band --- */
.wb-numbers {
	padding-block: var(--wb-s-7);
	background: var(--wb-surface);
	border-block: 1px solid var(--wb-line);
}
.wb-numbers__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wb-s-6);
	margin: 0;
}
.wb-numbers__item {
	text-align: center;
	border-left: 1px solid var(--wb-line);
	display: flex;
	flex-direction: column-reverse;
	gap: var(--wb-s-2);
}
.wb-numbers__item:first-child { border-left: 0; }
.wb-numbers__value {
	font-family: var(--wb-head);
	font-weight: 700;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	line-height: 1.1;
	color: var(--wb-ink);
	margin: 0;
}
.wb-numbers__label { font-size: var(--wb-t-sm); color: var(--wb-ink-3); margin: 0; }
@media (max-width: 820px) {
	.wb-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--wb-s-6); }
	.wb-numbers__item:nth-child(odd) { border-left: 0; }
}
@media (max-width: 480px) {
	.wb-numbers { padding-block: var(--wb-s-6); }
	.wb-numbers__grid { gap: var(--wb-s-5) var(--wb-s-4); }
}

/* --- Company overview: type and space only, no cards --- */
.wb-overview__inner {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.wb-overview__h2 { margin: 0 auto var(--wb-s-5); }
.wb-overview__copy {
	font-size: var(--wb-t-xl);
	line-height: 1.6;
	color: var(--wb-ink-2);
	text-wrap: pretty;
}
.wb-overview__copy p + p { margin-top: var(--wb-s-4); }

/* --- Core areas: three illustrated cards, art on top --- */
.wb-areas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wb-s-5);
}
@media (max-width: 900px) { .wb-areas { grid-template-columns: minmax(0, 1fr); } }

.wb-area {
	display: flex;
	flex-direction: column;
	background: var(--wb-surface);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-xl);
	box-shadow: var(--wb-e-1);
	overflow: hidden;
}
.wb-area__art { line-height: 0; border-bottom: 1px solid var(--wb-line); }
.wb-area__art svg { width: 100%; height: auto; display: block; }
/* An uploaded card image is cropped to the drawings' ratio so the three cards stay level.
   The ratio sits on the img so the wrapper's 1px border adds outside it, exactly as it
   does around the SVG — mixed rows of photos and drawings keep their dividers level. */
.wb-area__art--photo img { width: 100%; height: auto; aspect-ratio: 520 / 340; object-fit: cover; display: block; }
.wb-area__body-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--wb-s-5) var(--wb-s-6) var(--wb-s-6);
}
.wb-area__title { font-size: var(--wb-t-xl); margin: 0 0 var(--wb-s-3); }
.wb-area__body { color: var(--wb-ink-2); font-size: var(--wb-t-sm); line-height: 1.65; margin: 0 0 var(--wb-s-5); }
.wb-area__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--wb-s-2);
	font-size: var(--wb-t-sm);
	font-weight: 600;
	text-decoration: none;
	align-self: flex-start;
	min-height: 44px;
}
.wb-area__link:hover { text-decoration: underline; }
.wb-area__link .wb-icon { transition: transform var(--wb-fast) var(--wb-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.wb-area__link:hover .wb-icon { transform: translateX(3px); }
}

/* --- Connected system: the one dark section on the page --- */
.wb-flow__h2 { max-width: 22ch; }
.wb-flow__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wb-s-5);
	position: relative;
}
.wb-flow__step { position: relative; padding-top: var(--wb-s-7); }

/* One connector segment per step, so it reflows with the grid instead of being
   a single absolutely positioned rule that breaks when the stages wrap. */
.wb-flow__marker {
	position: absolute;
	top: 13px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--wb-navy-line);
	transform-origin: left center;
}

/* Collapsed only when there is script to expand it again. */
.wb-js .wb-flow__marker { transform: scaleX(0); }
.wb-flow__step:first-child .wb-flow__marker { left: 0; }
.wb-flow__step:last-child .wb-flow__marker { right: 50%; }
.wb-flow__dot {
	position: absolute;
	left: 0;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	border-radius: 50%;
	background: var(--wb-navy);
	border: 2px solid var(--wb-accent-lift);
	box-sizing: border-box;
}
.wb-flow__num {
	display: block;
	font-family: var(--wb-mono);
	font-size: var(--wb-t-xs);
	color: var(--wb-accent-lift);
	letter-spacing: 0.08em;
	margin-bottom: var(--wb-s-2);
}
.wb-flow__title { font-size: var(--wb-t-md); margin: 0 0 var(--wb-s-2); color: var(--wb-on-navy); }
.wb-flow__body { font-size: var(--wb-t-sm); color: var(--wb-on-navy-2); margin: 0; line-height: 1.6; }

/* The draw-in. A scaled transform, never an animated width, so it cannot
   trigger layout. Disabled under reduced motion further down. */
.wb-flow.is-drawn .wb-flow__marker { transform: scaleX(1); transition: transform 360ms var(--wb-ease-out); }
.wb-flow.is-drawn .wb-flow__step:nth-child(2) .wb-flow__marker { transition-delay: 80ms; }
.wb-flow.is-drawn .wb-flow__step:nth-child(3) .wb-flow__marker { transition-delay: 160ms; }
.wb-flow.is-drawn .wb-flow__step:nth-child(4) .wb-flow__marker { transition-delay: 240ms; }
.wb-flow.is-drawn .wb-flow__step:nth-child(5) .wb-flow__marker { transition-delay: 320ms; }

@media (max-width: 900px) {
	.wb-flow__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.wb-flow__step { padding: 0 0 var(--wb-s-6) var(--wb-s-7); }
	.wb-flow__step:last-child { padding-bottom: 0; }
	/* The connector rotates to run downward. */
	.wb-flow__marker {
		top: 6px;
		bottom: 0;
		left: 5px;
		right: auto;
		width: 2px;
		height: auto;
		transform-origin: top center;
	}
	.wb-js .wb-flow__marker { transform: scaleY(0); }
	.wb-flow__step:last-child .wb-flow__marker { display: none; }
	.wb-flow.is-drawn .wb-flow__marker { transform: scaleY(1); }
	.wb-flow__dot { left: 0; top: 4px; margin-top: 0; }
}

/* --- Service coverage --- */
.wb-caps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wb-s-5);
}
@media (max-width: 980px) { .wb-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wb-caps { grid-template-columns: minmax(0, 1fr); } }

/* The company page uses the same cards two-up, where four items sit better. */
.wb-caps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .wb-caps--2 { grid-template-columns: minmax(0, 1fr); } }

.wb-cap {
	display: flex;
	gap: var(--wb-s-4);
	align-items: flex-start;
	padding: var(--wb-s-5);
	background: var(--wb-surface);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	box-shadow: var(--wb-e-1);
}
.wb-cap__icon {
	flex: none;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: var(--wb-r);
	background: var(--wb-accent-soft);
	border: 1px solid var(--wb-accent-edge);
	color: var(--wb-accent);
}
.wb-cap__title { font-size: var(--wb-t-base); margin: 0 0 var(--wb-s-1); }
.wb-cap__body { font-size: var(--wb-t-sm); color: var(--wb-ink-2); margin: 0; line-height: 1.55; }

/* --- Teams band --- */
.wb-teamband {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wb-s-4);
}
@media (max-width: 980px) { .wb-teamband { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wb-teamband { grid-template-columns: minmax(0, 1fr); } }

.wb-teamchip {
	display: flex;
	align-items: center;
	gap: var(--wb-s-3);
	min-height: 56px;
	padding: var(--wb-s-3) var(--wb-s-4);
	background: var(--wb-surface);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	text-decoration: none;
	color: var(--wb-ink);
	font-weight: 600;
	font-size: var(--wb-t-sm);
}
.wb-teamchip:hover { border-color: var(--wb-accent); box-shadow: var(--wb-e-2); color: var(--wb-ink); }
.wb-teamchip__icon { flex: none; color: var(--wb-accent); display: grid; place-items: center; }
.wb-teamchip__name { min-width: 0; }
.wb-teamchip__count {
	margin-left: auto;
	font-family: var(--wb-mono);
	font-size: 0.6875rem;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
	background: #024C74;
	color: #FFFFFF; /* 9.2:1 */
}

/* --- Technology strip --- */
.wb-chips--lg .wb-chip { font-size: var(--wb-t-sm); padding: 7px 12px; }

/* Careers page: the send-us-your-profile split. */
.wb-applysplit {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: var(--wb-s-7);
	align-items: start;
}
@media (max-width: 900px) { .wb-applysplit { grid-template-columns: minmax(0, 1fr); gap: var(--wb-s-5); } }
.wb-applysplit__intro .wb-h3 { margin: 0 0 var(--wb-s-3); }
.wb-applysplit__line { color: var(--wb-ink-2); font-size: var(--wb-t-sm); line-height: 1.65; margin: 0 0 var(--wb-s-4); }
.wb-applysplit__alt { font-size: var(--wb-t-sm); color: var(--wb-ink-3); margin: 0; }
.wb-applysplit__alt a { font-weight: 600; }

/* --- Careers --- */
.wb-careers__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wb-s-6);
	align-items: end;
}
@media (max-width: 820px) { .wb-careers__head { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.wb-careers__body { color: var(--wb-ink-2); font-size: var(--wb-t-md); max-width: 62ch; margin: var(--wb-s-4) 0 0; }
.wb-careers__actions { display: flex; align-items: center; gap: var(--wb-s-4); flex-wrap: wrap; }
.wb-careers__link {
	font-size: var(--wb-t-sm);
	font-weight: 600;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.wb-careers__link:hover { text-decoration: underline; }

.wb-openings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wb-s-3); }
.wb-opening {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wb-s-4);
	padding: var(--wb-s-5);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
}
.wb-opening:hover { border-color: var(--wb-accent); box-shadow: var(--wb-e-2); }
.wb-opening__title { font-size: var(--wb-t-lg); margin: 0 0 var(--wb-s-2); }
.wb-opening__title a { color: inherit; text-decoration: none; }
/* Stretched link: the whole row is clickable, but the accessible name stays the
   job title rather than the row's entire text content. */
.wb-opening__title a::after { content: ''; position: absolute; inset: 0; }
.wb-opening__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wb-s-2) var(--wb-s-4);
	font-size: var(--wb-t-sm);
	color: var(--wb-ink-3);
}
.wb-opening__go { color: var(--wb-accent); flex: none; }
@media (max-width: 620px) {
	.wb-opening { grid-template-columns: minmax(0, 1fr); }
	.wb-opening__go { display: none; }
}
.wb-openings__empty {
	padding: var(--wb-s-6);
	border: 1px dashed var(--wb-line-strong);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface-2);
	color: var(--wb-ink-2);
	font-size: var(--wb-t-md);
	margin: 0;
}

/* --- Company and contact split --- */
.wb-split2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
@media (max-width: 820px) { .wb-split2 { grid-template-columns: minmax(0, 1fr); } }
.wb-split2__col { display: flex; flex-direction: column; align-items: flex-start; }
.wb-split2__body { color: var(--wb-ink-2); font-size: var(--wb-t-sm); line-height: 1.7; margin: 0 0 var(--wb-s-5); max-width: 56ch; }

/* --------------------------------------------------------------------------
   08  Cards: what we build
   -------------------------------------------------------------------------- */

.wb-bcard {
	display: flex;
	flex-direction: column;
	padding: var(--wb-s-6);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
}
.wb-bcard:hover { box-shadow: var(--wb-e-2); border-color: var(--wb-line-strong); }
.wb-bcard__icon {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: var(--wb-r);
	background: var(--wb-accent-soft);
	border: 1px solid var(--wb-accent-edge);
	color: var(--wb-accent);
	margin-bottom: var(--wb-s-4);
}
.wb-bcard__title { font-size: var(--wb-t-xl); margin: 0 0 var(--wb-s-2); }
.wb-bcard__sub { font-size: var(--wb-t-sm); font-weight: 600; color: var(--wb-accent); margin: 0 0 var(--wb-s-4); }
.wb-bcard__body { color: var(--wb-ink-2); font-size: var(--wb-t-sm); margin-bottom: var(--wb-s-4); }
.wb-bcard__img { margin-bottom: var(--wb-s-4); border-radius: var(--wb-r); overflow: hidden; }
.wb-bcard__foot { margin-top: auto; padding-top: var(--wb-s-4); }

.wb-list { list-style: none; margin: 0 0 var(--wb-s-5); padding: 0; }
.wb-list li {
	display: flex;
	gap: var(--wb-s-3);
	padding: var(--wb-s-2) 0;
	font-size: var(--wb-t-sm);
	color: var(--wb-ink-2);
	border-top: 1px solid var(--wb-line);
	line-height: 1.55;
}
.wb-list li:first-child { border-top: 0; padding-top: 0; }
.wb-list li::before {
	content: '';
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--wb-accent);
	flex: none;
	margin-top: 9px;
}
.wb-section--deep .wb-list li { color: var(--wb-on-navy-2); border-color: var(--wb-navy-line); }
.wb-section--deep .wb-list li::before { background: var(--wb-accent-lift); }

/* Numbered list: hiring steps on a vacancy, progression on a team page */
.wb-steplist {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: sl;
	box-shadow: var(--wb-e-1);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	overflow: hidden;
}
.wb-steplist li {
	counter-increment: sl;
	display: flex;
	gap: var(--wb-s-4);
	align-items: baseline;
	padding: var(--wb-s-4) var(--wb-s-5);
	border-top: 1px solid var(--wb-line);
	font-size: var(--wb-t-sm);
	color: var(--wb-ink-2);
}
.wb-steplist li:first-child { border-top: 0; }
.wb-steplist li::before {
	content: counter(sl);
	font-family: var(--wb-mono);
	font-size: var(--wb-t-xs);
	color: var(--wb-accent);
	font-weight: 500;
	flex: none;
	width: 20px;
}

/* --------------------------------------------------------------------------
   09  Company and fact table
   -------------------------------------------------------------------------- */

/*
 * The company page head: introduction on the left, the registry card on the
 * right. The card gives the head a second column so the intro is not a strip
 * of text beside a void.
 */
.wb-pagehead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--wb-s-8);
	align-items: start;
}
@media (max-width: 940px) {
	.wb-pagehead__grid { grid-template-columns: minmax(0, 1fr); gap: var(--wb-s-6); }
}

.wb-factcard {
	padding: var(--wb-s-5);
	background: var(--wb-page);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
}
.wb-factcard__btns { margin-top: var(--wb-s-4); }

/* Illustration fallback for a What we build section with no photograph. */
.wb-buildart {
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	box-shadow: var(--wb-e-1);
	overflow: hidden;
	margin-bottom: 1.5rem;
	line-height: 0;
	background: var(--wb-surface);
}
.wb-buildart svg { width: 100%; height: auto; display: block; }

/* The two service lines, presented as equal cards. */
.wb-svcs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wb-s-5);
}
@media (max-width: 820px) { .wb-svcs { grid-template-columns: minmax(0, 1fr); } }

.wb-svc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--wb-s-6);
	background: var(--wb-surface);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	box-shadow: var(--wb-e-1);
}
.wb-svc__title { font-size: var(--wb-t-lg); margin: 0 0 var(--wb-s-3); }
.wb-svc__body { color: var(--wb-ink-2); font-size: var(--wb-t-sm); line-height: 1.65; margin: 0 0 var(--wb-s-5); }
.wb-svc__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: 6px;
	font-weight: 600;
	font-size: var(--wb-t-sm);
	text-decoration: none;
	padding-block: 4px;
}
.wb-svc__link:hover { text-decoration: underline; }
.wb-svc__link .wb-icon { transition: transform var(--wb-fast) var(--wb-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.wb-svc__link:hover .wb-icon { transform: translateX(3px); }
}

/* The company page's closing band: heading and line left, one button right. */
.wb-joinband {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wb-s-6);
	flex-wrap: wrap;
}
.wb-joinband__body { color: var(--wb-ink-2); margin: var(--wb-s-2) 0 0; }
.wb-section--deep .wb-joinband__body { color: var(--wb-on-navy-2); }

.wb-facts {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r);
	overflow: hidden;
	font-size: var(--wb-t-sm);
	background: var(--wb-surface);
}
.wb-facts th, .wb-facts td {
	text-align: left;
	padding: var(--wb-s-3) var(--wb-s-4);
	border-top: 1px solid var(--wb-line);
	vertical-align: top;
}
.wb-facts tr:first-child th, .wb-facts tr:first-child td { border-top: 0; }
.wb-facts th {
	width: 34%;
	font-weight: 700;
	color: var(--wb-ink-3);
	font-size: var(--wb-t-xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}
.wb-facts td { color: var(--wb-ink); }
@media (max-width: 600px) {
	.wb-facts th { width: auto; display: block; border-top: 1px solid var(--wb-line); padding-bottom: 0; }
	.wb-facts td { display: block; border-top: 0; padding-top: 4px; }
}

.wb-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wb-s-5); }
@media (max-width: 900px) { .wb-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wb-people { grid-template-columns: minmax(0, 1fr); } }

.wb-person {
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	overflow: hidden;
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
}
/* border-radius 0 stops the global img{border-radius:inherit} rounding the
   portrait's bottom corners mid-card; the card's overflow clips the top. */
.wb-person img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 0; }
.wb-person__body { padding: var(--wb-s-5); }
.wb-person__name { font-size: var(--wb-t-md); margin: 0 0 2px; }
.wb-person__role { font-size: var(--wb-t-sm); font-weight: 600; color: var(--wb-accent); margin: 0 0 var(--wb-s-3); }
.wb-person__bio { font-size: var(--wb-t-sm); color: var(--wb-ink-2); margin: 0 0 var(--wb-s-3); }
.wb-person__link { font-size: var(--wb-t-sm); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

.wb-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wb-s-4); }
@media (max-width: 820px) { .wb-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wb-gallery { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   11  Contact lanes
   -------------------------------------------------------------------------- */

.wb-lane {
	display: flex;
	flex-direction: column;
	padding: var(--wb-s-6);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
}
.wb-lane:hover { box-shadow: var(--wb-e-2); border-color: var(--wb-line-strong); }
.wb-lane__title { font-size: var(--wb-t-lg); margin: 0 0 var(--wb-s-3); }
.wb-lane__body { color: var(--wb-ink-2); font-size: var(--wb-t-sm); margin-bottom: var(--wb-s-5); }
.wb-lane__foot { margin-top: auto; }
.wb-lane__mail {
	font-size: var(--wb-t-sm);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--wb-s-3);
	text-decoration: none;
}

/* Contact page: form beside a details panel */
.wb-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
}
@media (max-width: 900px) { .wb-contact { grid-template-columns: minmax(0, 1fr); } }

.wb-contact__details {
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
	padding: var(--wb-s-6);
	position: sticky;
	top: 92px;
}
@media (max-width: 900px) { .wb-contact__details { position: static; order: -1; } }
.wb-contact__details > .wb-h3 { margin-bottom: var(--wb-s-5); }

.wb-details { margin: 0; }
.wb-details__row {
	display: grid;
	gap: var(--wb-s-1);
	padding: var(--wb-s-4) 0;
	border-top: 1px solid var(--wb-line);
}
.wb-details__row:first-child { border-top: 0; padding-top: 0; }
.wb-details dt {
	display: flex;
	align-items: center;
	gap: var(--wb-s-2);
	font-size: var(--wb-t-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wb-ink-3);
}
.wb-details dt .wb-icon { color: var(--wb-accent); }
.wb-details dd { margin: 0; font-size: var(--wb-t-sm); color: var(--wb-ink); line-height: 1.6; }
/* inline-block plus padding: a phone number is a 26px tap target, not 20px. */
.wb-details dd a { font-weight: 600; text-decoration: none; display: inline-block; padding-block: 3px; }
.wb-details dd a:hover { text-decoration: underline; }
.wb-details address { font-style: normal; color: var(--wb-ink); }
.wb-details__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--wb-s-2);
	font-size: var(--wb-t-sm);
}
.wb-details__note { display: block; font-size: var(--wb-t-xs); color: var(--wb-ink-3); font-weight: 400; margin-top: 2px; }

.wb-contact__cta {
	margin-top: var(--wb-s-5);
	padding-top: var(--wb-s-5);
	border-top: 1px solid var(--wb-line);
}
.wb-contact__cta-text { font-size: var(--wb-t-sm); color: var(--wb-ink-2); margin: 0 0 var(--wb-s-3); }

/* --------------------------------------------------------------------------
   12  Footer
   -------------------------------------------------------------------------- */

.wb-footer {
	background: var(--wb-navy);
	padding-block: var(--wb-s-8) var(--wb-s-6);
	color: var(--wb-on-navy-2);
	font-size: var(--wb-t-sm);
}
.wb-footer__grid {
	display: grid;
	/*
	 * auto-fit, not a fixed four: a column disappears entirely when its menu
	 * is unassigned, and a fixed track list would leave a permanent void
	 * where it stood. With all four present this renders identically.
	 */
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 0.9fr));
	gap: var(--wb-s-6);
}
@media (max-width: 1100px) { .wb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.wb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wb-footer__grid > div:first-child,
	.wb-footer__grid > div:last-child { grid-column: 1 / -1; }
}

.wb-footer .wb-brand { color: var(--wb-on-navy); }
/* The hero underline, echoed once as a quiet static signature. */
.wb-footer__sig {
	display: block;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: var(--wb-accent-lift);
	margin-top: var(--wb-s-3);
	opacity: 0.85;
}

.wb-footer__tagline { max-width: 38ch; margin: var(--wb-s-4) 0; color: var(--wb-on-navy-2); line-height: 1.7; }
.wb-footer__addr { font-size: var(--wb-t-sm); line-height: 1.75; color: var(--wb-on-navy-3); font-style: normal; }

/* Icon + text rows in the Office column. */
.wb-footer__row { display: flex; gap: var(--wb-s-2); align-items: baseline; }
.wb-footer__row .wb-icon { flex: none; color: var(--wb-on-navy-3); position: relative; top: 2px; }
li.wb-footer__row { align-items: center; }
li.wb-footer__row .wb-icon { top: 0; }
.wb-footer__col-title {
	font-family: var(--wb-sans);
	font-size: var(--wb-t-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wb-on-navy-3);
	margin: 0 0 var(--wb-s-4);
}
.wb-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--wb-on-navy-2); }
.wb-footer__legalmenu li { color: var(--wb-on-navy-3); }
.wb-footer__menu a {
	color: var(--wb-on-navy-2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-size: var(--wb-t-sm);
}
.wb-footer__menu a:hover { color: var(--wb-on-navy); text-decoration: underline; }

.wb-footer__social { display: flex; gap: var(--wb-s-2); flex-wrap: wrap; margin-top: var(--wb-s-5); }
.wb-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 var(--wb-s-3);
	border: 1px solid var(--wb-navy-line);
	border-radius: var(--wb-r-sm);
	font-size: var(--wb-t-xs);
	font-weight: 600;
	color: var(--wb-on-navy-3);
	text-decoration: none;
}
.wb-footer__social a:hover { color: var(--wb-on-navy); border-color: var(--wb-accent-lift); }
.wb-footer__social a { transition: color var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease), transform 160ms var(--wb-ease-out); }
.wb-footer__social a:active { transform: scale(0.97); }

.wb-footer__bottom {
	margin-top: var(--wb-s-7);
	padding-top: var(--wb-s-5);
	border-top: 1px solid var(--wb-navy-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wb-s-4);
	align-items: center;
	font-size: var(--wb-t-xs);
	color: var(--wb-on-navy-3);
}
.wb-footer__legalmenu { list-style: none; display: flex; gap: var(--wb-s-4); margin: 0 0 0 auto; padding: 0; flex-wrap: wrap; }
.wb-footer__legalmenu a { color: var(--wb-on-navy-3); text-decoration: none; }
.wb-footer__legalmenu a:hover { color: var(--wb-on-navy); }

/* Back to top: the bottom bar's one action, opposite the legal line. */
.wb-footer__top {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--wb-s-2);
	min-height: 44px;
	color: var(--wb-on-navy-3);
	text-decoration: none;
	font-weight: 600;
	transition: color var(--wb-fast) var(--wb-ease);
}
.wb-footer__top:hover { color: var(--wb-on-navy); }
.wb-footer__top-icon {
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border: 1px solid var(--wb-navy-line);
	border-radius: 50%;
	transition: border-color var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease-out);
}
.wb-footer__top-icon svg { transform: rotate(-90deg); }
@media (hover: hover) and (pointer: fine) {
	.wb-footer__top:hover .wb-footer__top-icon { border-color: var(--wb-accent-lift); transform: translateY(-2px); }
}
@media (max-width: 700px) { .wb-footer__legalmenu { margin-left: 0; } }

/* --------------------------------------------------------------------------
   13  Job listings
   -------------------------------------------------------------------------- */

.wb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wb-s-3);
	margin-bottom: var(--wb-s-5);
	align-items: center;
	padding: var(--wb-s-4);
	background: var(--wb-surface-2);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r);
}
.wb-filters__label { font-size: var(--wb-t-sm); font-weight: 600; color: var(--wb-ink-2); }
.wb-filters select:focus {
	outline: none;
	border-color: var(--wb-accent);
	box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.16);
}
.wb-filters select {
	/* Same spec as the form controls below — 46px, 16px, so iOS never zooms. */
	min-height: 46px;
	font-size: var(--wb-t-base);
	transition: border-color var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease);
	padding: 0 var(--wb-s-4);
	border: 1px solid var(--wb-line-strong);
	border-radius: var(--wb-r);
	background: var(--wb-surface);
	color: var(--wb-ink);
	cursor: pointer;
}
.wb-filters__count { margin-left: auto; font-size: var(--wb-t-sm); color: var(--wb-ink-3); }

.wb-jobs { display: grid; gap: var(--wb-s-3); }
.wb-job {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wb-s-5);
	align-items: center;
	padding: var(--wb-s-5);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
}
.wb-job:hover { border-color: var(--wb-accent); box-shadow: var(--wb-e-2); }
.wb-job__title { font-size: var(--wb-t-lg); margin: 0 0 var(--wb-s-3); }
.wb-job__title a { color: inherit; text-decoration: none; }
.wb-job__title a::after { content: ''; position: absolute; inset: 0; }
.wb-job__meta { display: flex; flex-wrap: wrap; gap: var(--wb-s-2); margin-bottom: var(--wb-s-3); }
.wb-job__summary { font-size: var(--wb-t-sm); color: var(--wb-ink-2); margin: 0; max-width: 72ch; }
.wb-job__go { flex: none; color: var(--wb-accent); }
@media (max-width: 700px) {
	.wb-job { grid-template-columns: minmax(0, 1fr); }
	.wb-job__go { display: none; }
}

.wb-empty {
	padding: var(--wb-s-7) var(--wb-s-5);
	border: 1px dashed var(--wb-line-strong);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface-2);
	text-align: center;
	color: var(--wb-ink-2);
}
.wb-empty p { max-width: 52ch; margin-inline: auto; }

.wb-jobhead {
	border-bottom: 1px solid var(--wb-line);
	background: var(--wb-surface);
	padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.wb-jobhead__meta { display: flex; flex-wrap: wrap; gap: var(--wb-s-2); margin-top: var(--wb-s-5); }

.wb-jobgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
}
@media (max-width: 1000px) {
	.wb-jobgrid { grid-template-columns: minmax(0, 1fr); }
	/* Facts and the Apply button lead on a phone; the description follows. */
	.wb-jobgrid .wb-jobside { order: -1; }
}

.wb-jobside {
	position: sticky;
	top: 92px;
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
	padding: var(--wb-s-5);
}
@media (max-width: 1000px) { .wb-jobside { position: static; } }
.wb-jobside__row {
	display: grid;
	grid-template-columns: 42% minmax(0, 1fr);
	gap: var(--wb-s-3);
	padding: var(--wb-s-3) 0;
	border-top: 1px solid var(--wb-line);
	font-size: var(--wb-t-sm);
}
.wb-jobside__row:first-of-type { border-top: 0; padding-top: 0; }
.wb-jobside__k { font-size: var(--wb-t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--wb-ink-3); }
.wb-jobside__v { color: var(--wb-ink); }
.wb-jobside__cta { margin-top: var(--wb-s-5); display: grid; gap: var(--wb-s-2); }

.wb-terms {
	margin-top: var(--wb-s-7);
	padding: var(--wb-s-5);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface-2);
	font-size: var(--wb-t-sm);
	color: var(--wb-ink-2);
}
.wb-terms h2, .wb-terms h3 { font-size: var(--wb-t-md); color: var(--wb-ink); }

/* --------------------------------------------------------------------------
   14  Teams, leadership, insights
   -------------------------------------------------------------------------- */

.wb-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wb-s-5); }
@media (max-width: 980px) { .wb-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wb-teams { grid-template-columns: minmax(0, 1fr); } }

.wb-team {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--wb-s-5);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
}
.wb-team:hover { border-color: var(--wb-accent); box-shadow: var(--wb-e-2); }
.wb-team__icon {
	border-radius: var(--wb-r);
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: var(--wb-r-sm);
	background: var(--wb-accent-soft);
	border: 1px solid var(--wb-accent-edge);
	color: var(--wb-accent);
	margin-bottom: var(--wb-s-4);
}
.wb-team__title { font-size: var(--wb-t-md); margin: 0 0 var(--wb-s-2); }
.wb-team__title a { color: inherit; text-decoration: none; }
.wb-team__title a::after { content: ''; position: absolute; inset: 0; }
.wb-team__summary { font-size: var(--wb-t-sm); color: var(--wb-ink-2); margin: 0 0 var(--wb-s-4); }
.wb-team__foot--solo { justify-content: flex-start; }
.wb-team__foot {
	margin-top: auto;
	padding-top: var(--wb-s-4);
	border-top: 1px solid var(--wb-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wb-s-3);
	font-size: var(--wb-t-xs);
	color: var(--wb-ink-3);
}
.wb-team__open { color: var(--wb-accent); font-weight: 600; }

.wb-posts { display: grid; gap: var(--wb-s-5); }
.wb-post {
	position: relative;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
}
.wb-post--noimg { grid-template-columns: minmax(0, 1fr); }
.wb-post {
	gap: var(--wb-s-5);
	padding: var(--wb-s-5);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-lg);
	background: var(--wb-surface);
	box-shadow: var(--wb-e-1);
	align-items: start;
}
.wb-post:hover { border-color: var(--wb-accent); box-shadow: var(--wb-e-2); }
@media (max-width: 760px) { .wb-post { grid-template-columns: minmax(0, 1fr); } }
.wb-post img { border-radius: var(--wb-r); aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.wb-post__title { font-size: var(--wb-t-lg); margin: 0 0 var(--wb-s-2); }
.wb-post__title a { color: inherit; text-decoration: none; }
.wb-post__title a::after { content: ''; position: absolute; inset: 0; }
.wb-post__meta {
	font-size: var(--wb-t-xs);
	color: var(--wb-ink-3);
	margin: 0 0 var(--wb-s-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wb-s-3);
}
.wb-post__excerpt { font-size: var(--wb-t-sm); color: var(--wb-ink-2); margin: 0; }

.wb-byline {
	display: flex;
	align-items: center;
	gap: var(--wb-s-3);
	padding: var(--wb-s-4) 0;
	border-block: 1px solid var(--wb-line);
	margin-block: var(--wb-s-6);
}
.wb-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.wb-byline__name { font-weight: 600; margin: 0; font-size: var(--wb-t-sm); }
.wb-byline__role { font-size: var(--wb-t-xs); color: var(--wb-ink-3); margin: 0; }

.wb-pagination { display: flex; gap: var(--wb-s-2); flex-wrap: wrap; margin-top: var(--wb-s-7); justify-content: center; }
.wb-pagination :is(.page-numbers, a) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--wb-s-3);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-pill);
	background: var(--wb-surface);
	text-decoration: none;
	color: var(--wb-ink-2);
	font-size: var(--wb-t-sm);
	font-weight: 600;
}
.wb-pagination :is(.page-numbers, a):hover { border-color: var(--wb-accent); color: var(--wb-accent-dark); }
.wb-pagination :is(.page-numbers, a):active { transform: scale(0.97); }
.wb-pagination :is(.page-numbers, a) { transition: border-color var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease), transform 160ms var(--wb-ease-out); }
.wb-pagination .page-numbers.current { background: var(--wb-accent); border-color: var(--wb-accent); color: #fff; }

/* --------------------------------------------------------------------------
   15  Forms
   -------------------------------------------------------------------------- */

.wb-formwrap {
	max-width: 760px;
	background: var(--wb-surface);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-r-xl);
	box-shadow: var(--wb-e-2);
	padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
}

/*
 * Two-column field grid. Everything spans the full width by default; rows
 * marked half sit two to a row, and collapse on small screens.
 */
.wb-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wb-s-5) var(--wb-s-4);
}
.wb-form > * { grid-column: 1 / -1; min-width: 0; }
.wb-form .wb-form__row--half { grid-column: span 1; }
@media (max-width: 640px) {
	.wb-form { grid-template-columns: minmax(0, 1fr); }
	.wb-form .wb-form__row--half { grid-column: 1 / -1; }
}

.wb-form__row { margin-bottom: 0; }
.wb-form__label {
	display: block;
	font-size: var(--wb-t-sm);
	font-weight: 600;
	margin-bottom: var(--wb-s-2);
	color: var(--wb-ink);
}
.wb-form__req { color: var(--wb-red); margin-left: 2px; }

.wb-input,
.wb-formwrap input[type="text"],
.wb-formwrap input[type="email"],
.wb-formwrap input[type="tel"],
.wb-formwrap input[type="url"],
.wb-formwrap input[type="number"],
.wb-formwrap input[type="date"],
.wb-formwrap input[type="search"],
.wb-formwrap textarea,
.wb-formwrap select {
	width: 100%;
	min-height: 46px;
	padding: 11px var(--wb-s-4);
	border: 1px solid var(--wb-line-strong);
	border-radius: var(--wb-r);
	background: var(--wb-surface);
	color: var(--wb-ink);
	font-size: var(--wb-t-base); /* 16px stops iOS zooming the page on focus */
	font-family: inherit;
	transition: border-color var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease);
}
.wb-input:focus,
.wb-formwrap input:focus,
.wb-formwrap textarea:focus,
.wb-formwrap select:focus {
	border-color: var(--wb-accent);
	box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.16);
	outline: none;
}
.wb-input--area, .wb-formwrap textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.wb-input[aria-invalid="true"] { border-color: var(--wb-red); }
.wb-input[aria-invalid="true"]:focus { border-color: var(--wb-red); box-shadow: 0 0 0 3px rgba(180, 35, 42, 0.14); }

.wb-form__help { font-size: var(--wb-t-xs); color: var(--wb-ink-3); margin: var(--wb-s-2) 0 0; }
.wb-form__hint { font-size: var(--wb-t-xs); color: var(--wb-ink-3); margin: var(--wb-s-2) 0 0; }
.wb-form__error {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wb-t-xs);
	font-weight: 600;
	color: var(--wb-red);
	margin: var(--wb-s-2) 0 0;
}
.wb-form__summary {
	padding: var(--wb-s-4);
	border: 1px solid #E8C4C6;
	border-left: 3px solid var(--wb-red);
	border-radius: var(--wb-r);
	background: var(--wb-red-soft);
	margin-bottom: var(--wb-s-5);
	font-size: var(--wb-t-sm);
	color: #7C171C;
}
.wb-form__summary ul { margin: var(--wb-s-2) 0 0; padding-left: var(--wb-s-5); }
.wb-form__success {
	display: flex;
	gap: var(--wb-s-3);
	padding: var(--wb-s-5);
	border: 1px solid #BFE3D4;
	border-left: 3px solid var(--wb-green);
	border-radius: var(--wb-r-lg);
	background: #F1F9F6;
	color: #0A4F3B;
	font-size: var(--wb-t-sm);
}
.wb-form__success .wb-icon { color: var(--wb-green); flex: none; margin-top: 2px; }

.wb-check,
.wb-formwrap .wb-form__label--check {
	display: flex;
	gap: var(--wb-s-3);
	align-items: flex-start;
	font-size: var(--wb-t-sm);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	margin-bottom: 0;
}
.wb-check input,
.wb-formwrap .wb-form__label--check input {
	width: 20px; height: 20px;
	margin: 2px 0 0;
	flex: none;
	accent-color: var(--wb-accent);
	cursor: pointer;
}

/* Icon + sentence, like every other icon-text pattern in the theme. */
.wb-form__note {
	display: flex;
	gap: var(--wb-s-2);
	align-items: flex-start;
	font-size: var(--wb-t-sm);
	color: var(--wb-ink-2);
	margin: 0;
}
.wb-form__note .wb-icon { flex: none; margin-top: 3px; color: var(--wb-accent); }

/* Fine print is fine print — hint-sized, muted, under the button. */
.wb-form__required-note,
.wb-form__privacy { font-size: var(--wb-t-xs); color: var(--wb-ink-3); margin: 0; }
.wb-form__privacy { margin-top: var(--wb-s-4); }
.wb-form__applying { font-size: var(--wb-t-sm); color: var(--wb-ink-2); margin: 0; }

[data-wb-jobempty] {
	transition: opacity var(--wb-fast) var(--wb-ease-out);
	@starting-style { opacity: 0; }
}

.wb-btn:disabled,
.wb-btn[aria-disabled="true"],
.wb-formwrap [type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.wb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Third-party form plugins inherit the same look */
.wb-formwrap .wpcf7-form-control-wrap { display: block; }
.wb-formwrap label { display: block; font-size: var(--wb-t-sm); font-weight: 600; margin-bottom: var(--wb-s-2); }
.wb-formwrap input[type="submit"],
.wb-formwrap button[type="submit"],
.wb-formwrap .wpforms-submit,
.wb-formwrap .ff-btn-submit,
.wb-formwrap .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 var(--wb-s-5);
	border: 1px solid var(--wb-accent);
	border-radius: var(--wb-r-pill);
	background: var(--wb-accent);
	color: #fff;
	font-weight: 600;
	font-size: var(--wb-t-sm);
	cursor: pointer;
	width: auto;
	transition: background var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease), transform 160ms var(--wb-ease-out);
}
.wb-formwrap input[type="submit"]:hover,
.wb-formwrap button[type="submit"]:hover { background: var(--wb-accent-dark); border-color: var(--wb-accent-dark); }
.wb-formwrap input[type="submit"]:active,
.wb-formwrap button[type="submit"]:active,
.wb-formwrap .wpforms-submit:active,
.wb-formwrap .ff-btn-submit:active,
.wb-formwrap .gform_button:active { transform: scale(0.97); }
.wb-formwrap .wpcf7-not-valid-tip { color: var(--wb-red); font-size: var(--wb-t-xs); }
.wb-formwrap .wpcf7-response-output {
	border-radius: var(--wb-r);
	border-width: 1px;
	padding: var(--wb-s-4);
	margin: var(--wb-s-4) 0 0;
	font-size: var(--wb-t-sm);
}

/* --------------------------------------------------------------------------
   16  Prose and page furniture
   -------------------------------------------------------------------------- */

.wb-prose { max-width: 70ch; font-size: var(--wb-t-md); line-height: 1.75; color: var(--wb-ink-2); }
.wb-prose > * + * { margin-top: var(--wb-s-5); }
.wb-prose h2, .wb-prose h3, .wb-prose h4 { color: var(--wb-ink); }
.wb-prose h2 { font-size: var(--wb-t-2xl); margin-top: var(--wb-s-8); }
.wb-prose h3 { font-size: var(--wb-t-xl); margin-top: var(--wb-s-7); }
.wb-prose ul, .wb-prose ol { padding-left: var(--wb-s-5); }
.wb-prose li + li { margin-top: var(--wb-s-2); }
.wb-prose img, .wb-prose figure { border-radius: var(--wb-r-lg); }
.wb-prose figcaption { font-size: var(--wb-t-xs); color: var(--wb-ink-3); margin-top: var(--wb-s-2); }
.wb-prose blockquote {
	margin: var(--wb-s-6) 0;
	padding-left: var(--wb-s-5);
	border-left: 3px solid var(--wb-accent);
	font-size: var(--wb-t-lg);
	color: var(--wb-ink);
}
.wb-prose code {
	font-family: var(--wb-mono);
	font-size: 0.88em;
	padding: 2px 6px;
	border-radius: var(--wb-r-sm);
	background: var(--wb-surface-2);
	border: 1px solid var(--wb-line);
	color: #0B4A72;
}
.wb-prose pre {
	background: var(--wb-navy);
	color: #E7EDF5;
	padding: var(--wb-s-5);
	border-radius: var(--wb-r-lg);
	overflow-x: auto;
	font-family: var(--wb-mono);
	font-size: var(--wb-t-sm);
	line-height: 1.7;
}
.wb-prose pre code { background: none; border: 0; color: inherit; padding: 0; }
.wb-prose table { width: 100%; border-collapse: collapse; font-size: var(--wb-t-sm); display: block; overflow-x: auto; }
.wb-prose th, .wb-prose td { padding: var(--wb-s-3); border: 1px solid var(--wb-line); text-align: left; }
.wb-prose th { background: var(--wb-surface-2); font-weight: 600; color: var(--wb-ink); }

.wb-pagehead {
	padding-block: clamp(2rem, 1rem + 4.1vw, 4.25rem);
	border-bottom: 1px solid var(--wb-line);
	background: var(--wb-surface);
}
.wb-pagehead--paper { background: var(--wb-surface); }

.wb-crumbs {
	font-size: var(--wb-t-sm);
	color: var(--wb-ink-3);
	margin-bottom: var(--wb-s-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wb-s-2);
	align-items: center;
}
/* padding-block takes these to 29px tall: WCAG 2.5.8 wants 24px. */
.wb-crumbs a { color: var(--wb-ink-3); text-decoration: none; display: inline-block; padding-block: 3px; }
.wb-crumbs a:hover { color: var(--wb-accent-dark); text-decoration: underline; }

.wb-callout {
	padding: var(--wb-s-5);
	border: 1px solid var(--wb-accent-edge);
	border-left: 3px solid var(--wb-accent);
	border-radius: var(--wb-r);
	background: var(--wb-accent-soft);
	font-size: var(--wb-t-sm);
	color: var(--wb-ink-2);
}

:is(.wb-area, .wb-cap, .wb-svc, .wb-teamchip, .wb-job, .wb-opening, .wb-post, .wb-team, .wb-bcard, .wb-lane) {
	transition: transform 200ms var(--wb-ease-out), box-shadow var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease);
}
@media (hover: hover) and (pointer: fine) {
	:is(.wb-area, .wb-svc, .wb-teamchip, .wb-job, .wb-opening, .wb-post, .wb-team, .wb-bcard, .wb-lane):hover {
		transform: translateY(-3px);
	}
	:is(.wb-area, .wb-svc):hover { box-shadow: var(--wb-e-2); }
}

.wb-jobgrid > div > :first-child { margin-top: 0; }
.wb-jobside > :first-child { margin-top: 0; }

.wb-h1--article { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }

/* Closed vacancy notice. Amber on cream, 8.4:1 — a state, not an error. */
.wb-closed {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wb-s-2);
	align-items: baseline;
	margin: var(--wb-s-5) 0 0;
	padding: var(--wb-s-4) var(--wb-s-5);
	border: 1px solid #E7CFA3;
	border-left: 3px solid #A66A00;
	border-radius: var(--wb-r);
	background: #FDF6E7;
	font-size: var(--wb-t-sm);
	color: #5A4415; /* on #FDF6E7 — 8.4:1 */
}

.wb-closed a { color: var(--wb-accent-dark); }

.wb-404 { text-align: center; padding-block: var(--wb-s-10); }

/* --------------------------------------------------------------------------
   17  Utilities, motion, print
   -------------------------------------------------------------------------- */

.wb-stack   { display: grid; gap: var(--wb-s-5); }
.wb-stack-6 { display: grid; gap: var(--wb-s-6); }
.wb-mt-5    { margin-top: var(--wb-s-5); }
.wb-mt-6    { margin-top: var(--wb-s-6); }
.wb-mt-7    { margin-top: var(--wb-s-7); }
.wb-center  { text-align: center; }
.wb-muted   { color: var(--wb-ink-3); }

/*
 * Focus-halo repair, deliberately this late in the file. The base
 * :focus-visible rule supplies the white halo as a box-shadow, and any variant
 * that sets its own box-shadow — the primary button's elevation, the current
 * menu item's inset underline — silently replaces it in the cascade. On the
 * navy header that left only a navy outline: an invisible focus indicator.
 * These re-assert the halo after every variant has had its say.
 */
.wb-btn:focus-visible { box-shadow: 0 0 0 3px #FFFFFF; }
.wb-teamchip:focus-visible { box-shadow: 0 0 0 3px #FFFFFF; }
.wb-nav__list .current-menu-item > a:focus-visible,
.wb-nav__list .current_page_item > a:focus-visible,
.wb-nav__list .current-menu-parent > a:focus-visible {
	box-shadow: 0 0 0 3px #FFFFFF, inset 0 -2px 0 var(--wb-accent-lift);
}

/*
 * Scoped to .wb-js on purpose. The class is set by one inline line in the head,
 * so without JavaScript — blocked, failed, still loading — these never start
 * hidden. Content that only appears if a script runs is content that can
 * disappear, and three of the homepage cards use this.
 */
.wb-js .wb-reveal {
	opacity: 0;
	translate: 0 12px;
	transition: opacity var(--wb-slow) var(--wb-ease-out), translate var(--wb-slow) var(--wb-ease-out),
	            transform 200ms var(--wb-ease-out), box-shadow var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease);
}
.wb-js .wb-reveal.is-in { opacity: 1; translate: 0 0; }
/* Delays hit only the entrance pair (opacity, translate) — the hover
   properties later in the list stay at 0s so feedback is instant. */
.wb-reveal--d1 { transition-delay: 60ms, 60ms, 0s, 0s, 0s; }
.wb-reveal--d2 { transition-delay: 120ms, 120ms, 0s, 0s, 0s; }
.wb-reveal--d3 { transition-delay: 180ms, 180ms, 0s, 0s, 0s; }

/* --------------------------------------------------------------------------
   Mobile-first rhythm. Phones get tighter vertical spacing, compact cards
   and full-width tap targets; nothing here touches wider screens.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.wb-mt-7 { margin-top: 2rem; }
	.wb-mt-6 { margin-top: 1.5rem; }

	.wb-filters select { flex: 1 1 100%; }
	.wb-filters__count { margin-left: 0; flex-basis: 100%; }

	.wb-hero__grid { gap: var(--wb-s-6); }
	.wb-hero__social { margin-top: var(--wb-s-5); }

	.wb-cap { padding: var(--wb-s-4); gap: var(--wb-s-3); }
	.wb-cap__icon { width: 34px; height: 34px; }
	.wb-caps { gap: var(--wb-s-4); }

	.wb-teamband { gap: var(--wb-s-3); }
	.wb-teamchip { min-height: 52px; }

	.wb-svc { padding: var(--wb-s-5); }
	.wb-area__body-wrap { padding: var(--wb-s-4) var(--wb-s-5) var(--wb-s-5); }

	.wb-formwrap { padding: var(--wb-s-5) var(--wb-s-4); }
	.wb-factcard { padding: var(--wb-s-4); }
}

@media (max-width: 480px) {
	/* One thumb, one target: buttons in a group go full width. */
	.wb-btns .wb-btn { flex: 1 1 100%; }
	.wb-careers__actions .wb-btn { width: 100%; }
	.wb-joinband .wb-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
	.wb-js .wb-reveal { opacity: 1; translate: none; }
	/* The flow connector is drawn complete rather than animated. */
	.wb-flow__marker { transform: scaleX(1) !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
	.wb-flow__marker { transform: scaleY(1) !important; }
}

@media print {
	.wb-header, .wb-footer, .wb-burger, .wb-btns, .wb-filters { display: none !important; }
	body { background: #fff; color: #000; }
	.wb-section { padding-block: 1rem; background: #fff; }
	/* Nothing prints blank because a scroll observer never got a chance to run. */
	.wb-js .wb-reveal { opacity: 1 !important; translate: none !important; }
	.wb-flow__marker { display: none; }
	.wb-section--deep { background: #fff !important; }
	.wb-section--deep :is(h1, h2, h3), .wb-flow__title { color: #000 !important; }
	.wb-flow__body, .wb-flow__num { color: #333 !important; }
	.wb-job, .wb-bcard, .wb-lane, .wb-team { box-shadow: none; border-color: #999; }
	a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

@media (forced-colors: active) {
	.wb-btn, .wb-chip, .wb-tag, .wb-input { border: 1px solid ButtonBorder; }
	.wb-job, .wb-bcard, .wb-lane, .wb-team { border: 1px solid CanvasText; }
}