/* =========================================================================
   VIKAND — visual refinement pass (SOW "Design and Responsive Pass").
   First pass, 2 Nov 2026.

   The rebuild matched the old site band by band, so the type in the page
   content is a transcription of whatever Cornerstone happened to render:
   14 heading sizes, 11 tracking values and 5 leadings across 76 pages, with
   29 / 30 / 31 / 33px all in use for the same job. That is why the site reads
   as slightly different on every page.

   Nothing here edits a page. Every value the content carries is a CLASS, so
   this sheet redefines what those classes resolve to and the whole site moves
   together. It loads last, at the same specificity as the rules it replaces,
   so deleting this one file reverts the pass completely.

   Sizes stay relative to --vk-root (18 / 17 / 16px by viewport), so the
   responsive model the rebuild found is untouched.
   ========================================================================= */

:root {
	/* One scale, seven steps. The multiples are chosen so each step lands
	   within ~2px of the legacy size it replaces at root 18, which keeps the
	   measured band heights close while making the steps consistent. */
	--vk-t-display: 3.7778;   /* 68px — was 72 */
	--vk-t1: 2.8889;          /* 52px — was 50, 51 */
	--vk-t2: 2.2222;          /* 40px — was 36, 41 */
	--vk-t3: 1.7778;          /* 32px — was 29, 30, 31, 33 */
	--vk-t4: 1.4444;          /* 26px — was 24, 25, 27 */
	--vk-t5: 1.2222;          /* 22px — was 22 */
	--vk-t6: 1.0000;          /* 18px — was 18 */

	/* Leading tightens as the type grows, which is the part the transcription
	   never did: it carried a measured pixel line height per size, so a 31px
	   heading sat on 1.39 and a 51px on 1.22 with nothing in between. */
	--vk-lead-display: 1.1;
	--vk-lead-xl: 1.18;
	--vk-lead-lg: 1.22;
	--vk-lead-md: 1.28;
	--vk-lead-sm: 1.35;
	--vk-lead-xs: 1.45;

	/* Body copy. 1.4 across 924 elements was the single worst readability
	   value on the site: at 14px in a 1200px column it reads as a block. */
	--vk-lead-body: 1.6;
	--vk-lead-long: 1.8;
}

/* ---- Headings: 14 sizes onto 7 steps --------------------------------- */
/* Letter-spacing is deliberately NOT set here. It arrives on its own
   `vk-track--N` class, which is normalised further down, so the two axes stay
   separate the way the content expresses them. */
.vk-page .fw-type--72 { font-size: calc(var(--vk-root) * var(--vk-t-display)); line-height: var(--vk-lead-display); }

.vk-page .fw-type--51,
.vk-page .fw-type--50 { font-size: calc(var(--vk-root) * var(--vk-t1)); line-height: var(--vk-lead-xl); }

.vk-page .fw-type--41,
.vk-page .fw-type--36 { font-size: calc(var(--vk-root) * var(--vk-t2)); line-height: var(--vk-lead-lg); }

.vk-page .fw-type--33,
.vk-page .fw-type--31,
.vk-page .fw-type--30,
.vk-page .fw-type--29 { font-size: calc(var(--vk-root) * var(--vk-t3)); line-height: var(--vk-lead-md); }

.vk-page .fw-type--27,
.vk-page .fw-type--25,
.vk-page .fw-type--24 { font-size: calc(var(--vk-root) * var(--vk-t4)); line-height: var(--vk-lead-sm); }

.vk-page .fw-type--22 { font-size: calc(var(--vk-root) * var(--vk-t5)); line-height: var(--vk-lead-sm); }
.vk-page .fw-type--18 { font-size: calc(var(--vk-root) * var(--vk-t6)); line-height: var(--vk-lead-xs); }

/* ---- Tracking: 11 values onto 4 ---------------------------------------
   The wide uppercase step is kept because it is the site's signature on the
   hero bands; what goes is the eight near-identical values under it. */
.vk-page .vk-track--n25,
.vk-page .vk-track--n18,
.vk-page .vk-track--n13,
.vk-page .vk-track--n12,
.vk-page .vk-track--n11,
.vk-page .vk-track--n9,
.vk-page .vk-track--n6 { letter-spacing: -0.03em; }

.vk-page .vk-track--0  { letter-spacing: normal; }

.vk-page .vk-track--27,
.vk-page .vk-track--16 { letter-spacing: 0.08em; }

.vk-page .vk-track--58,
.vk-page .vk-track--54,
.vk-page .vk-track--46,
.vk-page .vk-track--40 { letter-spacing: 0.16em; }

.vk-page .vk-track--82,
.vk-page .vk-track--66 { letter-spacing: 0.40em; }

/* ---- Body copy: leading, and a caption size that is readable ---------- */
.fw-lead--140, .fw-lead--140 li,
.fw-lead--150, .fw-lead--150 li { line-height: var(--vk-lead-body); }
.fw-lead--165, .fw-lead--165 li,
.fw-lead--180, .fw-lead--180 li { line-height: var(--vk-lead-long); }

/* 12px was the smallest thing on the site and it is used for captions and
   form notes, where it has to be read rather than glanced at. */
.vk-page .fw-text--12 { font-size: 13px; }

/* ---- Cards: rows that line up ----------------------------------------
   The cards were bottom-ragged because each is only as tall as its own copy,
   so a two-line title pushed one card's button 30px below its neighbour's.
   Stretch the row, let the body grow, and park the button on the baseline. */
.fw-content-cards__inner { align-items: stretch; }
.fw-content-cards__inner > .fw-content-card { justify-content: flex-start; }
.fw-content-card__body { flex: 1 1 auto; }
.fw-content-card__body > .wp-block-buttons:last-child { margin-top: auto; padding-top: 18px; }

/* A picture whose proportions differ from the row's measured box was being
   letterboxed inside it, which is why one card's image read as smaller than
   the rest of its row. Fill the box instead. */
.fw-content-cards .fw-content-card .wp-block-image img { object-fit: cover; }

/* ---- Buttons: one family ---------------------------------------------
   Six font sizes, nine tracking variants and three colours across the site,
   several of them on the same page. Two sizes, one weight, one transition. */
.vk-page .wp-block-button > .wp-block-button__link {
	font-weight: 600;
	border-radius: 2px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.vk-page .wp-block-button.vk-btn--17 > .wp-block-button__link,
.vk-page .wp-block-button.vk-btn--18 > .wp-block-button__link,
.vk-page .wp-block-button.vk-btn--20 > .wp-block-button__link,
.vk-page .wp-block-button.vk-btn--22 > .wp-block-button__link,
.vk-page .wp-block-button.vk-btn--24 > .wp-block-button__link {
	font-size: 17px;
	line-height: 1.3;
}

/* `vk-btn--accent` painted #88a6c3 with white on it: 2.4:1, which fails every
   contrast threshold and is why the CONTACT US button reads as disabled. The
   palette's own accent is the same hue four steps darker. */
.vk-page .wp-block-button.vk-btn--accent > .wp-block-button__link { background: #4d5c75; }
.vk-page .wp-block-button.vk-btn--accent > .wp-block-button__link:hover { background: #2a3b5a; }

/* ---- Forms: labels that are legible, and a visible focus state -------- */
.vk-page .ad-form__field > span,
.vk-page .ad-form label > span { font-weight: 600; }
.vk-page .ad-form input:focus,
.vk-page .ad-form select:focus,
.vk-page .ad-form textarea:focus {
	outline: 2px solid #4d5c75;
	outline-offset: 1px;
}

/* ---- Headings that wrap like headings --------------------------------
   The composer carries the source's own `text-align`, and some bands were
   built justified. Justify on a heading stretches the word gaps across the
   line: "MEDICAL CASE MANAGEMENT SERVICES" came out as three words spread
   over the full pane with a single word under it. Body copy can justify;
   a heading cannot. */
.vk-page .wp-block-heading.has-text-align-justify { text-align: left; }
.vk-page .wp-block-heading { text-wrap: balance; }

/* ---- Contrast on the pale blue band -----------------------------------
   The highlight band is #b0c4db and the cards on it were given live's white
   title and body copy: 1.7:1, which is unreadable rather than merely low.
   Matched on the band's own background so only the pale bands are touched —
   the same block on a dark photograph keeps its white. */
.fw-content-cards[style*="--fw-highlight"] .fw-content-card__body p,
.fw-content-cards[style*="--fw-highlight"] .fw-content-card__body li { color: #2a2c37; }
.fw-content-cards[style*="--fw-highlight"] .fw-content-card__body h2,
.fw-content-cards[style*="--fw-highlight"] .fw-content-card__body h3,
.fw-content-cards[style*="--fw-highlight"] .fw-content-card__body h4 { color: #2a2c37; }

/* ---- The form's own submit --------------------------------------------
   It is a <button>, not a core button block, so none of the button work above
   reached it: every enquiry form ended in a pale grey control that reads as
   disabled next to the dark buttons on the same page. */
.vk-page .ad-form__submit button[type="submit"] {
	background: #2a2c37;
	color: #fff;
	border: 0;
	border-radius: 2px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.vk-page .ad-form__submit button[type="submit"]:hover { background: #4d5c75; }

/* =========================================================================
   PASS TWO — the overhaul, 2 Nov 2026.

   Pass one normalised the values the rebuild transcribed. This pass changes
   the design decisions underneath them: body copy too small to read
   comfortably, copy centred in narrow columns, components drawn as bare text
   on a hairline, and vertical rhythm that varies band to band.

   Forms are deliberately untouched beyond pass one. They are being replaced
   with Forminator, and styling markup that is about to be thrown away is
   wasted work.
   ========================================================================= */

:root {
	/* One spacing scale. Everything below picks from it rather than carrying
	   its own measured pixel value. */
	--vk-s1: 8px;
	--vk-s2: 16px;
	--vk-s3: 24px;
	--vk-s4: 32px;
	--vk-s5: 48px;
	--vk-s6: 64px;

	/* Ink. #808080 body copy on white is 3.5:1, under the 4.5 threshold, and
	   it is what made every page read as washed out. */
	--vk-ink: #2a2c37;
	--vk-ink-soft: #55606f;
	--vk-line: #dde4ec;

	/* A line stops being readable somewhere past 75 characters. The content
	   column is 1200px, which at 16px is about 150. */
	--vk-measure: 68ch;
}

/* ---- Body copy: size, colour and measure ------------------------------
   14px was the old site's body size and it is the main reason the pages read
   as dense. 16 is the smallest size that is comfortable at this column
   width, and it is what the other framework builds use. */
.vk-page .fw-text--14 { font-size: 16px; }
.vk-page .fw-text--12 { font-size: 14px; }

.vk-page .vk-text--muted { color: var(--vk-ink-soft); }

/* Hold a paragraph to a readable line length. Centred copy keeps its centre
   by taking the slack as equal margins; ranged copy keeps its left edge. */
.vk-page .fw-banner__inner > p,
.vk-page .fw-split__content > p { max-width: var(--vk-measure); }
.vk-page .fw-banner__inner > p.has-text-align-center { margin-inline: auto; }

/* ---- Alignment: stop centring copy inside narrow columns --------------
   Four columns of centred body copy is the worst case on the site: every
   line breaks somewhere different and the ragged edges read as a mistake.
   Titles stay as the design sets them; the copy under them ranges left. */
.vk-page .fw-content-cards .fw-content-card__body p,
.vk-page .fw-content-cards .fw-content-card__body li { text-align: left; }
.vk-page .fw-content-card__body { align-items: stretch; }

/* ---- Section headings on light bands ----------------------------------
   `vk-text--accent` is #88a6c3. On a dark photograph that is correct and
   stays; on a white band a section heading in it is 2.2:1 and reads as
   disabled. The palette's own accent keeps the blue and clears the bar. */
.vk-page .fw-banner--dark .vk-text--accent,
.vk-page .fw-banner--dark .vk-text--sky { color: #4d5c75; }

/* ---- Accordion --------------------------------------------------------
   Drawn as three floating boxes 25px apart with a drop shadow, a 6.3px
   radius and pale blue labels, it read as three disabled buttons rather than
   a list that opens. Now a stack with hairlines between, ink labels, and a
   chevron on the right where a disclosure control belongs. */
.vk-page .vk-acc-item,
.vk-page .vk-acc .wp-block-details {
	--vk-acc-gap: 0px;
	--vk-acc-radius: 0px;
	--vk-acc-shadow: none;
	border-bottom: 1px solid var(--vk-line);
	background: transparent;
	margin: 0;
}
/* No rule above the first row: the list opens under whatever introduced it
   and a line there reads as a divider from the copy above rather than as the
   top of the control. */

.vk-page .vk-acc-item > summary,
.vk-page .vk-acc .wp-block-details > summary,
.vk-page .vk-acc-item.vk-text--accent > summary {
	color: var(--vk-ink);
	font-size: 17px;
	line-height: 1.25;
	font-weight: 600;
	padding: 13px 40px 13px 0;
	position: relative;
	transition: color 0.15s ease;
}
.vk-page .vk-acc-item > summary:hover { color: #4d5c75; }

/* The marker moves to the right edge and becomes a chevron that turns. */
.vk-page .vk-acc-item > summary::before,
.vk-page .vk-acc .wp-block-details > summary::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 4px;
	left: auto;
	width: 10px;
	height: 10px;
	margin: 0;
	border: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
	background: none;
}
.vk-page .vk-acc-item[open] > summary::before,
.vk-page .vk-acc .wp-block-details[open] > summary::before {
	transform: translateY(-30%) rotate(-135deg);
}
.vk-page .vk-acc-item > p,
.vk-page .vk-acc .wp-block-details > p {
	margin: 0 0 var(--vk-s2);
	padding: 0 40px 0 0;
	line-height: 1.55;
	color: var(--vk-ink-soft);
	max-width: var(--vk-measure);
}

/* ---- Testimonials -----------------------------------------------------
   The quotes sat on a 6% white wash, which on a white band is nothing at
   all, so two testimonials read as two columns of loose text with a hairline
   between them. They are cards. */
.vk-page .vk-quotes__slide {
	--vk-slide-bg: #f6f8fb;
	--vk-slide-radius: 4px;
	--vk-slide-pad: var(--vk-s4);
	border: 1px solid var(--vk-line);
	margin-right: var(--vk-s3);
}
.vk-page .vk-quotes__slide blockquote {
	color: var(--vk-ink);
	font-size: 16px;
	line-height: 1.65;
}
.vk-page .vk-quotes__slide figcaption {
	margin-top: var(--vk-s3);
	color: var(--vk-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
.vk-page .vk-quotes__date {
	margin-top: var(--vk-s1);
	color: var(--vk-ink-soft);
	font-size: 14px;
	line-height: 1.4;
}

/* ---- Icon grids -------------------------------------------------------
   The labels are one line on some cards and two on others, so the rows never
   sat on a baseline. Hold the caption to two lines and the grid lines up
   whatever the wording does. */
.vk-page .fw-icon-card__body { margin-top: var(--vk-s2); }
.vk-page .fw-icon-card__body p {
	color: var(--vk-ink-soft);
	font-size: 16px;
	line-height: 1.4;
	min-height: calc(2 * 1.4em);
}
.vk-page .fw-icons__grid { row-gap: var(--vk-s5); }

/* ---- Cards: rhythm inside the card ------------------------------------
   Title, copy and button each carried their own measured gap, so no two
   cards on the site had the same internal spacing. */
.vk-page .fw-content-card__body > h2,
.vk-page .fw-content-card__body > h3,
.vk-page .fw-content-card__body > h4 { margin-bottom: var(--vk-s2); }
.vk-page .fw-content-card__body > p { margin-bottom: var(--vk-s2); }

/* Several job cards carry two buttons and several carry one, which left the
   row of buttons at four different heights. The group drops to the bottom of
   the card and the buttons inside it match width. */
.vk-page .fw-content-card__body > .wp-block-buttons:first-of-type { margin-top: auto; }
.vk-page .fw-content-card__body > .wp-block-buttons {
	padding-top: var(--vk-s1);
	width: 100%;
	justify-content: center;
}
/* Width capped rather than filled: a button that spans the whole card reads
   as a bar, and four of them stacked read as a table of contents. */
.vk-page .fw-content-card__body > .wp-block-buttons .wp-block-button {
	width: auto;
	min-width: 150px;
}
.vk-page .fw-content-card__body > .wp-block-buttons .wp-block-button__link {
	display: block;
	text-align: center;
}

/* ---- Card pictures: one shape per row --------------------------------
   Each card carried its own measured picture width, so a row of four showed
   four different crops at four different widths. The row's own measured
   height stays; the width becomes the card, which is what makes the row read
   as a grid. */
.vk-page .fw-content-cards .fw-content-card .wp-block-image { width: 100%; }
/* The width is `!important` because the composer wrote the measured width as
   an INLINE style on each `<img>`, which no stylesheet rule can outrank. The
   same pattern is already used for the editor canvas further up this file. */
.vk-page .fw-content-cards .fw-content-card .wp-block-image img {
	width: 100% !important;
	height: var(--fw-card-img-h, auto);
	object-fit: cover;
}

/* With the picture filling the card, a centred title over ranged copy reads
   as two different cards stacked. One edge: everything in the card ranges
   left against the picture. */
.vk-page .fw-content-cards .fw-content-card { text-align: left; }
.vk-page .fw-content-cards .fw-content-card__body > h2,
.vk-page .fw-content-cards .fw-content-card__body > h3,
.vk-page .fw-content-cards .fw-content-card__body > h4 { text-align: left; }
.vk-page .fw-content-card__body > .wp-block-buttons { justify-content: flex-start; }

/* ---- Split bands: the copy centres against the picture ----------------
   A 768px photograph beside four lines of text left the pane hanging from
   the top with a third of the band empty under it. */
.vk-page .fw-split__inner { align-items: center; }

/* ---- Band rhythm ------------------------------------------------------
   A heading followed by copy, and copy followed by a button, are the two
   commonest pairs on the site and both were spaced by whatever spacer the
   capture happened to record. */
.vk-page .fw-banner__inner > h2 + p,
.vk-page .fw-banner__inner > h3 + p { margin-top: var(--vk-s3); }
.vk-page .fw-banner__inner > p + .wp-block-buttons { margin-top: var(--vk-s4); }

/* =========================================================================
   PASS THREE — the redesign, 2 Nov 2026.

   Passes one and two tidied what the rebuild transcribed. This one makes
   design decisions the old site never made: a real typeface pairing, a header
   and navigation built as navigation rather than as a row of small links,
   surfaces with edges, one button family, one vertical rhythm.

   Brand, colours and assets are unchanged. The palette, the logo and every
   photograph are the client's own; what changes is the typography, the
   spacing and the way the components are drawn.

   Fonts load from Google here because this is a design pass on dev. They are
   self-hosted before anything goes to live, the way Maven Pro already is.
   ========================================================================= */

:root {
	/* Archivo for headings: a grotesque with a real weight range that holds
	   up tight and uppercase, which is how this brand sets its headings.
	   Inter for everything else, because it is the clearest face there is at
	   16 to 18px and the site is mostly body copy. */
	--vk-font-head: 'Archivo', 'Maven Pro', system-ui, sans-serif;
	--vk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Redefining the presets reaches theme.json, the blocks and the editor
	   from one place. */
	--wp--preset--font-family--body: var(--vk-font-body);
	--wp--preset--font-family--heading: var(--vk-font-head);

	--vk-surface: #ffffff;
	--vk-surface-alt: #f4f7fb;
	--vk-border: #e4eaf1;
	--vk-shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.04), 0 2px 8px rgba(20, 30, 50, 0.06);
	--vk-shadow-md: 0 2px 4px rgba(20, 30, 50, 0.06), 0 12px 28px rgba(20, 30, 50, 0.10);
	--vk-radius: 10px;
	--vk-radius-sm: 4px;
}

body,
.vk-page,
.editor-styles-wrapper {
	font-family: var(--vk-font-body);
	-webkit-font-smoothing: antialiased;
	font-size: 17px;
}

.vk-page h1, .vk-page h2, .vk-page h3, .vk-page h4, .vk-page h5, .vk-page h6,
.vk-page .wp-block-heading,
.fw-header__nav .fw-nav > li > a,
.vk-page .wp-block-button__link,
.vk-footer__col h4,
.editor-styles-wrapper .wp-block-heading {
	font-family: var(--vk-font-head);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Inter's default figures are proportional; tabular reads better in a list of
   services and in anything with a number in it. */
.vk-page { font-variant-numeric: proportional-nums; }

/* ---- Header and navigation -------------------------------------------
   The old header was a 90px white bar with twelve 12px uppercase links
   crowded at the right. It is now a proper masthead: sticky, a rule under it
   instead of nothing, navigation at a readable size in sentence case, an
   indicator that moves, and the last item promoted to the action it actually
   is. */
.fw-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--vk-border);
}
.fw-header__inner {
	min-height: 78px;
	/* The logo and the navigation sat almost against the top edge of the
	   window; this drops them so the bar reads as having a margin. */
	padding-top: 12px;
	display: flex;
	align-items: center;
	gap: var(--vk-s4, 32px);
}
.fw-logo img { max-height: 54px; }

.fw-header__nav { margin-left: auto; }
.fw-header__nav .fw-nav {
	display: flex;
	align-items: center;
	gap: 2px;
}
.fw-header__nav .fw-nav > li > a {
	font-family: var(--vk-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #2a2c37;
	padding: 10px 14px;
	border-radius: var(--vk-radius-sm);
	position: relative;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.fw-header__nav .fw-nav > li > a:hover { color: #4d5c75; background: var(--vk-surface-alt); }

/* The indicator is drawn under the label, not under the padding box, so it
   sits the width of the words and grows from the middle. */
.fw-header__nav .fw-nav > li > a::before {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2px;
	background: #4d5c75;
	transform: scaleX(0);
	transition: transform 0.18s ease;
}
.fw-header__nav .fw-nav > li > a:hover::before,
.fw-header__nav .fw-nav > li.current-menu-item > a::before,
.fw-header__nav .fw-nav > li.current-menu-ancestor > a::before { transform: scaleX(1); }

/* The chevron on a parent, redrawn smaller and closer to the label. */
.fw-header__nav .fw-nav > li.menu-item-has-children > a { padding-right: 26px; }
.fw-header__nav .fw-nav > li.menu-item-has-children > a::after {
	right: 12px;
	width: 5px;
	height: 5px;
	border-width: 1.5px;
	transition: transform 0.18s ease;
}
.fw-header__nav .fw-nav > li.menu-item-has-children:hover > a::after {
	transform: rotate(225deg);
	margin-top: -2px;
}

/* The last top-level item is Contact. It is the only action in the bar, so it
   is drawn as one rather than as the twelfth link. */
.fw-header__nav .fw-nav > li:last-child > a {
	background: #2a2c37;
	color: #fff;
	padding: 11px 20px;
	margin-left: 10px;
	font-weight: 600;
}
.fw-header__nav .fw-nav > li:last-child > a:hover { background: #4d5c75; color: #fff; }
.fw-header__nav .fw-nav > li:last-child > a::before { display: none; }

/* Dropdowns: a panel with room in it, not a 216px list of 12px links. */
.fw-header__nav .fw-nav .sub-menu {
	min-width: 268px;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius);
	box-shadow: var(--vk-shadow-md);
}
.fw-header__nav .fw-nav .sub-menu a {
	display: block;
	/* The top-level links were given `text-decoration: none` and the dropdown
	   ones never were, so every item in every panel carried the browser's own
	   underline. It predates this pass; it is just visible now the panel is. */
	text-decoration: none;
	font-family: var(--vk-font-body);
	font-size: 15px;
	font-weight: 450;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
	color: #2a2c37;
	padding: 10px 12px;
	border-radius: var(--vk-radius-sm);
	transition: background-color 0.12s ease, color 0.12s ease;
}
.fw-header__nav .fw-nav .sub-menu a:hover { background: var(--vk-surface-alt); color: #4d5c75; }

/* ---- Buttons: one family ---------------------------------------------- */
.vk-page .wp-block-button > .wp-block-button__link,
.vk-page .ad-form__submit button[type="submit"] {
	font-family: var(--vk-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	padding: 14px 26px;
	border-radius: var(--vk-radius-sm);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.vk-page .wp-block-button > .wp-block-button__link:hover { transform: translateY(-1px); }
.vk-page .wp-block-button.vk-btn--caps > .wp-block-button__link { letter-spacing: 0.08em; }

/* ---- Band rhythm ------------------------------------------------------
   Every band carried its own measured padding, between 0 and 113px, so the
   page had no rhythm at all. One scale, fluid between phone and desktop. */
.vk-page .fw-banner,
.vk-page .fw-content-cards,
.vk-page .fw-icons {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(48px, 6vw, 88px);
}
/* A band that is only a picture keeps its own geometry. */
.vk-page .fw-banner--image { padding-top: 0; padding-bottom: 0; }

/* ---- Eyebrow labels ---------------------------------------------------
   The small uppercase line above a section heading is a real device on this
   site and it was set at whatever the capture read. One treatment. */
/* `vk-caps` is a CASE utility, not an eyebrow: the hero h1 and most section
   headings carry it too, so setting a size here shrank every uppercase
   heading on the site to 13px. The eyebrow treatment belongs to a PARAGRAPH
   that carries it, which is exactly what the device is. */
.vk-page p.vk-caps {
	font-family: var(--vk-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4d5c75;
	margin-bottom: 10px;
}

/* ---- Cards as surfaces ------------------------------------------------
   The cards were a picture with text under it on the band's own background.
   Giving them a surface, an edge and a shadow is what separates a card from
   a column, and it is the single biggest change on the services pages. */
.vk-page .fw-content-cards__inner > .fw-content-card {
	/* Nothing in this theme sets border-box globally, and the row's widths are
	   measured to the pixel: 3 x 388 + 2 x 18 is exactly 1200. A 1px border on
	   each card took the row to 1206 and the third card wrapped. */
	box-sizing: border-box;
	background: var(--vk-surface);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius);
	overflow: hidden;
	box-shadow: var(--vk-shadow-sm);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.vk-page .fw-content-cards__inner > .fw-content-card:hover {
	box-shadow: var(--vk-shadow-md);
	transform: translateY(-2px);
}
/* The picture runs to the card's edges and the copy is inset from them. */
.vk-page .fw-content-cards .fw-content-card .wp-block-image { margin: 0; }
/* The body is `width: 100%` from the theme, and nothing here sets
   `box-sizing: border-box`, so 24px of padding made it 436px wide inside a
   388px card. It overflowed by 23px each side and the card's `overflow:
   hidden` clipped it, which is why the picture looked flush, the copy had no
   inset from the card edge and the title sat hard against the photograph.
   That is the same fault that wrapped the row earlier, one level down.

   The picture is meant to be flush and the copy inset, so the inset belongs
   to the copy rather than to the body. */
.vk-page .fw-content-card__body {
	box-sizing: border-box;
	padding: 0;
	width: 100%;
}
/* Written long because the rule that zeroes this margin further up carries
   four classes and would otherwise win. */
.vk-page .fw-content-cards .fw-content-card .fw-content-card__body > .wp-block-image { margin: 0 0 20px; }
.vk-page .fw-content-card__body > *:not(.wp-block-image) {
	box-sizing: border-box;
	padding-left: 24px;
	padding-right: 24px;
}
.vk-page .fw-content-card__body > *:last-child { margin-bottom: 24px; }

/* The card is a white surface now, wherever the band underneath it is, so the
   copy on it is ink. The composer wrote `--fw-card-body-colour: #ffffff` on
   every card that used to sit on a dark photograph, and on a white card that
   is white on white: the four process cards on /case-management/ went blank
   the moment the surface arrived. This supersedes the highlight-band rule in
   pass two, which was the same fault on the pale blue band. */
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body,
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body p,
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body li,
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body h2,
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body h3,
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body h4 {
	color: var(--vk-ink);
}
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body p,
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body li {
	color: var(--vk-ink-soft);
}
.vk-page .fw-content-card__body > .wp-block-buttons { padding-top: 16px; }

/* ---- Icon tiles -------------------------------------------------------
   Flat pale blue squares with a glyph in them. Rounded, tinted and larger,
   they read as a set rather than as a grid of placeholders. */
.vk-page .fw-icons .fw-icon-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(77, 92, 117, 0.10);
	padding: 14px;
	box-sizing: border-box;
}
.vk-page .fw-icons .fw-icon-card__icon img { width: 100%; height: auto; }
.vk-page .fw-icon-card__body p { color: #2a2c37; font-weight: 500; }

/* ---- Quotes -----------------------------------------------------------
   Already cards after pass two; now they carry the same radius, edge and
   shadow as everything else, with the quote mark as a real device. */
.vk-page .vk-quotes__slide {
	--vk-slide-bg: var(--vk-surface);
	--vk-slide-radius: var(--vk-radius);
	border: 1px solid var(--vk-border);
	box-shadow: var(--vk-shadow-sm);
	position: relative;
}
.vk-page .vk-quotes__slide blockquote { font-size: 17px; }

/* ---- Accordion, in the new type ---------------------------------------- */
.vk-page .vk-acc-item > summary,
.vk-page .vk-acc .wp-block-details > summary,
.vk-page .vk-acc-item.vk-text--accent > summary {
	font-family: var(--vk-font-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
}

/* ---- Body links -------------------------------------------------------- */
.vk-page .fw-banner__inner a:not(.wp-block-button__link),
.vk-page .fw-split__content a:not(.wp-block-button__link) {
	color: #4d5c75;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(77, 92, 117, 0.35);
	transition: text-decoration-color 0.15s ease;
}
.vk-page .fw-banner__inner a:not(.wp-block-button__link):hover { text-decoration-color: currentColor; }

/* ---- Footer ------------------------------------------------------------
   Column headings were the same size and weight as their links, so the three
   columns read as one long list. */
.vk-footer__col h4 {
	font-family: var(--vk-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}
.vk-footer__col a {
	font-size: 15px;
	line-height: 1.9;
	transition: color 0.15s ease;
}

/* ---- Phone ------------------------------------------------------------- */
@media (max-width: 980px) {
	.fw-header__inner { min-height: 66px; }
	.fw-logo img { max-height: 44px; }
	.vk-page .fw-content-card__body { padding: 20px; }
}

/* =========================================================================
   PASS FOUR — space, 2 Nov 2026.

   Read at full size rather than as a page thumbnail, the problem is not the
   type any more: it is that the page is mostly air. The old site propped its
   sections apart with explicit spacer blocks AND generous band padding, and
   pass three put a uniform 86px on top of both. Between one band's content
   and the next there were 172px of nothing, and that is before the spacers
   inside each band.

   This pass takes control of the vertical space.
   ========================================================================= */

/* Bands sit closer. 56px a side is enough separation when every band already
   has a background change to mark it. */
.vk-page .fw-banner,
.vk-page .fw-content-cards,
.vk-page .fw-icons {
	padding-top: clamp(32px, 3.5vw, 56px);
	padding-bottom: clamp(32px, 3.5vw, 56px);
}
.vk-page .fw-banner--image { padding-top: 0; padding-bottom: 0; }

/* The composer wrote 533 spacer blocks carrying 25,259px between them, each
   one the gap Cornerstone happened to leave. Anything over 40px is holding
   a hole open rather than separating two things. */
.vk-page .wp-block-spacer { max-height: 40px; }

/* A heading and the thing under it belong together. */
.vk-page .fw-banner__inner > h2 + p,
.vk-page .fw-banner__inner > h3 + p,
.vk-page .fw-banner__inner > h4 + p { margin-top: 22px; }
/* And air under the copy before whatever the band actually holds. */
.vk-page .fw-banner__inner > p + .vk-acc,
.vk-page .fw-banner__inner > p + .wp-block-details,
.vk-page .fw-banner__inner > p + .wp-block-columns,
.vk-page .fw-banner__inner > p + .fw-split { margin-top: 44px; }
.vk-page .fw-banner__inner > h2,
.vk-page .fw-banner__inner > h3 { margin-bottom: 0; }
.vk-page .fw-icons__grid { row-gap: 36px; }
.vk-page .fw-icons .fw-icons__title { margin-bottom: 36px; }

/* ---- Headings are ink -------------------------------------------------
   Section headings were inheriting `vk-text--muted` and `vk-text--sky` from
   the capture, so half the headings on the site are grey or pale blue on
   white and read as secondary text. A heading on a light band is ink. */
.vk-page .fw-banner--dark .wp-block-heading.vk-text--muted,
.vk-page .fw-banner--ink .wp-block-heading.vk-text--muted,
.vk-page .fw-banner--light .wp-block-heading.vk-text--muted,
.vk-page .fw-split__content .wp-block-heading.vk-text--muted { color: var(--vk-ink); }

/* ---- Icon tiles, at a size you can see ---------------------------------
   48px of pale glyph in a 76px tile reads as a placeholder. The tile is the
   measured size or 76px, whichever is larger, and the glyph fills it. */
/* Forcing every tile up to 76px made it worse: the inline benefit icons are
   measured at 48 and their artwork carries its own transparent margin, so a
   small glyph ended up floating in a large pale box. The tile keeps the size
   the design draws it at and gains only the tint and the radius. */
.vk-page .fw-icons .fw-icon-card__icon {
	padding: 8px;
	border-radius: 12px;
	background: rgba(77, 92, 117, 0.10);
}
.vk-page .fw-icons .fw-icon-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.vk-page .fw-icon-card__body {
	margin-top: 14px;
	color: var(--vk-ink);
}
.vk-page .fw-icon-card__body p {
	color: var(--vk-ink);
	font-size: 15px;
	font-weight: 500;
	min-height: 0;
}

/* ---- Two-column bands line up at the top ------------------------------
   Centring a four line column against a 500px photograph leaves a hole above
   and below it. Copy and picture start on the same line. */
.vk-page .fw-split__inner { align-items: flex-start; }
.vk-page .fw-split__content > *:first-child { margin-top: 0; }

/* The benefit rows were 90px apart, which is a gap between paragraphs, not a
   list. */
.vk-page .fw-icons--inline .fw-icons__grid,
.vk-page .fw-icons__grid { row-gap: 28px; }

/* ---- Card titles are card-sized ---------------------------------------
   The composer measured these at 31px, which is a section heading. In a
   388px card next to two others it is the loudest thing on the page and it
   pushes the copy under it out of the way. A card title is 22px. */
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body > h2,
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body > h3,
.vk-page .fw-content-cards__inner > .fw-content-card .fw-content-card__body > h4 {
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin-bottom: 12px;
}

/* =========================================================================
   PASS FIVE — the hero and the masthead, 2 Nov 2026.

   Looked at what the sites VIKAND is measured against actually do. Three
   patterns are common to all of them and none of them is on this site:

   OneOcean (oceantg.com)      transparent header over a photographic hero;
                               headline ranged LEFT at about 64px; a short
                               standfirst; two buttons side by side, square,
                               with an arrow; a "trusted by" logo strip in the
                               foot of the hero.
   International SOS           same transparent masthead, same left ranged
                               headline, quick links across the hero foot.
   Wilhelmsen                  small quiet section labels ranged left rather
                               than large centred headings; flat tinted cards
                               with an arrow; everything left aligned.

   This pass takes the masthead and the hero. Pass six takes the sections.
   ========================================================================= */

/* ---- The masthead sits over the photograph -----------------------------
   A white bar above a photograph wastes the best 80px on the page. Over the
   hero the header is transparent with white type; the moment the page
   scrolls it becomes the solid bar it already was. */
.fw-header {
	position: fixed;
	left: 0;
	right: 0;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* The page starts under the header unless the header is over a photograph. */
body { padding-top: 90px; }
body:has(.vk-head--over) { padding-top: 0; }

.fw-header.vk-head--over:not(.vk-head--stuck) {
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: transparent;
}
.fw-header.vk-head--over:not(.vk-head--stuck) .fw-header__nav .fw-nav > li > a { color: #fff; }
.fw-header.vk-head--over:not(.vk-head--stuck) .fw-header__nav .fw-nav > li > a:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}
.fw-header.vk-head--over:not(.vk-head--stuck) .fw-header__nav .fw-nav > li > a::before { background: #fff; }
/* The CTA inverts over a photograph, the way OneOcean's does. */
.fw-header.vk-head--over:not(.vk-head--stuck) .fw-header__nav .fw-nav > li:last-child > a {
	background: #fff;
	color: #2a2c37;
}
.fw-header.vk-head--over:not(.vk-head--stuck) .fw-header__nav .fw-nav > li:last-child > a:hover {
	background: rgba(255, 255, 255, 0.86);
	color: #2a2c37;
}
/* The logo is dark artwork, so over a photograph it needs lifting out. */
.fw-header.vk-head--over:not(.vk-head--stuck) .fw-logo img {
	filter: brightness(0) invert(1);
	opacity: 0.96;
}
.fw-header.vk-head--stuck { box-shadow: 0 1px 12px rgba(20, 30, 50, 0.08); }

/* ---- The hero ----------------------------------------------------------
   Centred white type in the middle of a photograph is the weakest possible
   treatment: it fights the picture and it has no shape. Ranged left in a
   column, over a scrim that darkens the left side only, it reads at a
   glance and the photograph still shows. */
/* A photographic band is a HERO only when it opens the page. The same
   modifiers appear mid page — /mental-health-solutions/ has three — and
   giving those a 660px minimum, a bottom aligned flex and a left ranged
   heading left the copy under them centred and the band half empty. */
.vk-page > .fw-banner--image:first-child {
	position: relative;
	min-height: var(--vk-hero-min);
	display: flex;
	align-items: center;
}
.vk-page .fw-banner--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(14, 22, 38, 0.72) 0%, rgba(14, 22, 38, 0.45) 42%, rgba(14, 22, 38, 0) 74%);
	pointer-events: none;
}
.vk-page .fw-banner--image > .fw-banner__inner {
	position: relative;
	z-index: 1;
	width: 95%;
	max-width: 1200px;
	margin-inline: auto;
	padding-top: 120px;
	padding-bottom: 72px;
}
.vk-page .fw-banner--image .wp-block-heading {
	text-align: left;
	max-width: 16ch;
	margin-inline: 0;
	font-size: clamp(34px, 4.4vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: #fff;
}
.vk-page .fw-banner--image .fw-banner__inner > p {
	text-align: left;
	margin-inline: 0;
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: 18px;
	line-height: 1.6;
}
.vk-page .fw-banner--image .wp-block-buttons { justify-content: flex-start; }

/* ---- Buttons carry an arrow -------------------------------------------
   Every reference site does this and it is the cheapest way to make a button
   read as a destination rather than a label. */
.vk-page .wp-block-button > .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 10px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
	transition: transform 0.15s ease;
}
.vk-page .wp-block-button > .wp-block-button__link:hover::after { transform: translate(3px, -1px) rotate(45deg); }

/* The hero's own buttons: one solid, the one beside it outlined, as on
   OneOcean. The second button in a hero group is the quiet one. */
.vk-page .fw-banner--image .wp-block-buttons > .wp-block-button:nth-child(2) > .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}
.vk-page .fw-banner--image .wp-block-buttons > .wp-block-button:nth-child(2) > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 980px) {
	body { padding-top: 66px; }
	.vk-page .fw-banner--image { min-height: 0; }
	.vk-page .fw-banner--image > .fw-banner__inner { padding-top: 96px; padding-bottom: 56px; }
}

/* =========================================================================
   PASS SIX — the hero is one thing, 2 Nov 2026.

   The reason pass five did not land on most pages: the photograph and the
   headline are two separate bands. The composer read live's hero as an empty
   picture band followed by a solid colour band carrying the title, because
   that is how Cornerstone built it. So the page opens with a picture that
   says nothing, then a slate block that says everything.

   Every reference site puts the headline ON the picture. These rules lift
   the headline band onto the one above it where that pair occurs, which is
   most of the site. /case-management/ already has the two in one band and is
   left alone.
   ========================================================================= */
.vk-page .fw-banner--image:has(+ .fw-banner--headline),
.vk-page .fw-banner--image:has(+ .fw-banner--title) {
	min-height: var(--vk-hero-min);
	align-items: flex-end;
}
.vk-page .fw-banner--image + .fw-banner--headline,
.vk-page .fw-banner--image + .fw-banner--title {
	position: relative;
	z-index: 2;
	margin-top: clamp(-300px, -22vw, -200px);
	background-color: transparent;
	background-image: none;
	padding-top: 0;
	padding-bottom: clamp(40px, 5vw, 72px);
}
.vk-page .fw-banner--image + .fw-banner--headline .wp-block-heading,
.vk-page .fw-banner--image + .fw-banner--title .wp-block-heading {
	color: #fff;
	text-align: left;
	margin-inline: 0;
	max-width: 18ch;
	font-size: clamp(32px, 4.2vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.02em;
}
/* The band under the picture carried the old site's own vertical pull, which
   now drags the merged hero into the section below it. */
.vk-page .fw-banner--image + .fw-banner--headline + .fw-banner { margin-top: 0; }

/* A title band that already sits on its own photograph gets the same
   treatment without the merge. */
.vk-page > .fw-banner--photo:first-child .wp-block-heading {
	text-align: left;
	margin-inline: 0;
	max-width: 18ch;
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.1;
}
.vk-page > .fw-banner--photo:first-child { min-height: var(--vk-hero-min); display: flex; align-items: flex-end; }
.vk-page > .fw-banner--photo:first-child > .fw-banner__inner { width: 95%; max-width: 1200px; margin-inline: auto; }

/* ---- Pass six, second look --------------------------------------------
   The headline landed on the photograph but not on the grid: the band's
   inner is a centred flex column, so a left aligned heading still sat in the
   middle of the page. And the scrim faded out too early to carry white type
   over a bright picture. */
.vk-page .fw-banner--image + .fw-banner--headline > .fw-banner__inner,
.vk-page .fw-banner--image + .fw-banner--title > .fw-banner__inner,
.vk-page > .fw-banner--photo:first-child > .fw-banner__inner {
	width: 95%;
	max-width: 1200px;
	margin-inline: auto;
	align-items: flex-start;
	text-align: left;
}
.vk-page .fw-banner--image::after {
	background:
		linear-gradient(90deg, rgba(12, 20, 34, 0.80) 0%, rgba(12, 20, 34, 0.55) 46%, rgba(12, 20, 34, 0.12) 100%),
		linear-gradient(0deg, rgba(12, 20, 34, 0.45) 0%, rgba(12, 20, 34, 0) 55%);
}
.vk-page > .fw-banner--photo:first-child { position: relative; }
.vk-page > .fw-banner--photo:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(12, 20, 34, 0.72) 0%, rgba(12, 20, 34, 0.40) 50%, rgba(12, 20, 34, 0.08) 100%);
	pointer-events: none;
}
.vk-page > .fw-banner--photo:first-child > .fw-banner__inner { position: relative; z-index: 1; }

/* The standfirst under a merged hero is the page's opening sentence, so it
   ranges left on the same grid rather than sitting centred in the column. */
.vk-page .fw-banner--image + .fw-banner--headline + .fw-banner .fw-banner__inner > p {
	/* Centred on the page and centred within itself (Owen, 6 Nov), which is
	   also what the content asks for: these paragraphs carry
	   has-text-align-center, and this rule was overriding it to the left. */
	text-align: center;
	margin-inline: auto;
	font-size: 19px;
	line-height: 1.6;
	color: var(--vk-ink-soft);
	max-width: 60ch;
}

/* ---- The homepage headline belongs on the film -------------------------
   Same fault as the other heroes, the other way round: here the statement
   band comes FIRST and the Vimeo band follows it, so the page showed a pale
   blue strip of words and then a video of nobody saying them. The band is
   collapsed to nothing and its inner is laid over the film beneath, ranged
   left on the same grid as every other hero on the site. */
.vk-page .fw-banner--statement:has(+ .vk-media-frame) {
	position: relative;
	z-index: 2;
	height: 0;
	min-height: 0;
	padding: 0;
	/* The band carried `--fw-banner-mt: -29px` to close the gap under the
	   strip above it. Collapsed, that pull drags the film up over the notice
	   bar instead. */
	margin-top: 0;
	overflow: visible;
	background-color: transparent;
	background-image: none;
}
.vk-page .fw-banner--statement:has(+ .vk-media-frame) > .fw-banner__inner {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 95%;
	max-width: 1200px;
	margin-inline: auto;
	/* Centred vertically in the visible part of the film: below the
	   masthead (90px) and above the notice strip (64px). The film's height
	   comes from its own 3072 x 1488 aspect ratio, and this band has no
	   height of its own, so the box is sized from the same ratio. */
	top: 90px;
	height: calc(100vw * 1488 / 3072 - 90px - 64px);
	padding-top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	align-items: flex-start;
}
.vk-page .fw-banner--statement:has(+ .vk-media-frame) .wp-block-heading {
	color: #fff;
	text-align: left;
	margin-inline: 0;
	/* The sentence is 95 characters, so a 20ch measure broke it over six
	   lines. Four is right for a hero at this size. */
	max-width: 26ch;
	font-size: clamp(26px, 3vw, 42px);
	line-height: 1.14;
	letter-spacing: -0.015em;
}
/* The film needs a scrim under the words, the same one the photographic
   heroes use. */
/* The film carries an inline `margin-top: -45px` from the old site, which
   closed the gap under the statement band. With that band collapsed onto the
   film the pull drags the film up over the notice bar above it instead, and
   an inline style needs `!important` to answer. */
.vk-page .fw-banner--statement:has(+ .vk-media-frame) + .vk-media-frame {
	position: relative;
	margin-top: 0 !important;
}
.vk-page .fw-banner--statement:has(+ .vk-media-frame) + .vk-media-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(12, 20, 34, 0.78) 0%, rgba(12, 20, 34, 0.44) 52%, rgba(12, 20, 34, 0.05) 100%);
}

@media (max-width: 980px) {
	.vk-page .fw-banner--statement:has(+ .vk-media-frame) > .fw-banner__inner { top: 66px; height: calc(100vw * 1488 / 3072 - 66px); }
}


/* The form's submit carries a measured width from the old site, 75px on the
   newsletter, and the new button padding does not fit inside it: the label
   broke over two lines and read "SU / B". Let it size to its words. */
.vk-page .ad-form__submit button[type="submit"] {
	width: auto;
	min-width: max-content;
	white-space: nowrap;
}


/* =========================================================================
   VIKAND forms — Forminator, 2 Nov 2026.

   Every form on the site is now a Forminator form (the ad-form block looks
   the ActiveDEMAND id up in `vk_forminator_map` and renders the shortcode).
   Forminator ships its own stylesheet and its grid did not survive this
   theme: all eight fields of the contact form landed in one flex row at
   their natural width.

   So the layout is ours. Two columns on the 1200 grid, full width for the
   things that need it, and the controls drawn in the same language as the
   rest of the redesign: 48px high, one hairline, a real focus ring, and the
   site's own button.

   The forms sit on both light and dark bands, so labels inherit the band's
   colour rather than declaring one.
   ========================================================================= */

.vk-page .vk-form { width: 100%; }

/* Forminator generates a stylesheet per form and enqueues it AFTER the
   theme's, so a selector of equal weight loses on order. The layout rules
   carry the form element as well, which puts them above anything the plugin
   writes. */
.vk-page .vk-form form.forminator-custom-form .forminator-row {
	/* `!important` on these two only: Forminator declares the row flex and
	   the column `flex: 1 1 0` with the same weight, and its per form
	   stylesheet is enqueued after the theme's, so it wins on order. Every
	   other rule here is ordinary. */
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
	margin: 0;
}
.vk-page .vk-form form.forminator-custom-form .forminator-row + .forminator-row { margin-top: 24px; }
.vk-page .vk-form form.forminator-custom-form .forminator-col {
	min-width: 0;
	width: auto !important;
	max-width: none;
	flex: none !important;
	padding: 0;
}

/* The things that are never half a row. */
.vk-page .vk-form form.forminator-custom-form .forminator-col-12,
.vk-page .vk-form form.forminator-custom-form .forminator-field-textarea,
.vk-page .vk-form form.forminator-custom-form .forminator-field-gdprcheckbox,
.vk-page .vk-form form.forminator-custom-form .forminator-field-consent,
.vk-page .vk-form form.forminator-custom-form .forminator-field-radio,
.vk-page .vk-form form.forminator-custom-form .forminator-field-upload { grid-column: 1 / -1; }

/* ---- Labels ----------------------------------------------------------- */
.vk-page .vk-form form.forminator-custom-form .forminator-label {
	display: block;
	margin: 0 0 7px;
	color: inherit;
	font-family: var(--vk-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}
.vk-page .vk-form .forminator-required { color: #e4572e; margin-left: 2px; }

/* ---- Controls ---------------------------------------------------------- */
.vk-page .vk-form form.forminator-custom-form .forminator-input,
.vk-page .vk-form form.forminator-custom-form .forminator-textarea,
.vk-page .vk-form form.forminator-custom-form select,
.vk-page .vk-form input[type="text"],
.vk-page .vk-form input[type="email"],
.vk-page .vk-form input[type="tel"],
.vk-page .vk-form input[type="url"],
.vk-page .vk-form input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius-sm);
	color: var(--vk-ink);
	font-family: var(--vk-font-body);
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vk-page .vk-form form.forminator-custom-form .forminator-textarea { min-height: 148px; resize: vertical; }

.vk-page .vk-form .forminator-input:focus,
.vk-page .vk-form .forminator-textarea:focus,
.vk-page .vk-form select:focus {
	outline: none;
	border-color: #4d5c75;
	box-shadow: 0 0 0 3px rgba(77, 92, 117, 0.22);
}
.vk-page .vk-form ::placeholder { color: #8a93a2; opacity: 1; }

/* ---- Radios and the consent box ---------------------------------------- */
.vk-page .vk-form .forminator-radio,
.vk-page .vk-form .forminator-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 24px 8px 0;
	color: inherit;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
}
.vk-page .vk-form input[type="radio"],
.vk-page .vk-form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #4d5c75;
	flex: 0 0 auto;
}
/* The consent line is a sentence, not a label: it sets at reading size and
   wraps against the form rather than running off it. */
.vk-page .vk-form .forminator-field-gdprcheckbox .forminator-checkbox,
.vk-page .vk-form .forminator-field-consent .forminator-checkbox {
	align-items: flex-start;
	font-size: 15px;
	margin-right: 0;
}
.vk-page .vk-form .forminator-field-gdprcheckbox input[type="checkbox"] { margin-top: 2px; }

/* ---- Upload ------------------------------------------------------------ */
.vk-page .vk-form .forminator-button-upload {
	background: #fff;
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius-sm);
	color: var(--vk-ink);
	padding: 11px 18px;
	font-family: var(--vk-font-body);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* ---- Submit ------------------------------------------------------------
   The same button as the rest of the site, ranged left with the fields. */
.vk-page .vk-form .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 14px 26px;
	background: #2a2c37;
	border: 0;
	border-radius: var(--vk-radius-sm);
	color: #fff;
	font-family: var(--vk-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.vk-page .vk-form .forminator-button-submit:hover { background: #4d5c75; transform: translateY(-1px); }
/* The arrow is a 7px box with two borders. Forminator's own button rules set
   `align-items: stretch` with the same weight and load after the theme's, so
   the box stretched to the button's content height and the chevron read as a
   white line beside the label. It centres itself and keeps its size. */
/* Drawn as a glyph rather than two rotated borders. The bordered box kept
   arriving on the page as a 2px vertical line beside the label, because
   something in Forminator's own button rules was taking the transform off
   it, and a character cannot be mangled that way. */
.vk-page .vk-form .forminator-button-submit::after {
	content: "→";
	flex: 0 0 auto;
	align-self: center;
	font-size: 17px;
	line-height: 1;
	transform: none;
	transition: transform 0.15s ease;
}
.vk-page .vk-form .forminator-button-submit:hover::after { transform: translateX(3px); }

/* ---- Messages ----------------------------------------------------------
   Forminator's own error and success blocks, in the site's language. */
.vk-page .vk-form .forminator-response-message {
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: var(--vk-radius-sm);
	font-size: 15px;
	line-height: 1.5;
}
.vk-page .vk-form .forminator-response-message.forminator-error {
	background: #fdeceb;
	border: 1px solid #f3c6c2;
	color: #8c2f24;
}
.vk-page .vk-form .forminator-response-message.forminator-success {
	background: #eef6ef;
	border: 1px solid #c9e3cd;
	color: #24633a;
}
.vk-page .vk-form .forminator-error-message {
	display: block;
	margin-top: 6px;
	color: #ffb4a6;
	font-size: 14px;
	line-height: 1.4;
}
/* On a white band the error text needs the darker red instead. */
.vk-page .fw-banner--dark .vk-form .forminator-error-message,
.vk-page .fw-banner--light .vk-form .forminator-error-message { color: #b1392a; }
.vk-page .vk-form .forminator-has_error .forminator-input,
.vk-page .vk-form .forminator-has_error .forminator-textarea { border-color: #e4572e; }

@media (max-width: 680px) {
	.vk-page .vk-form .forminator-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* A fixed masthead means anything scrolled to can land underneath it: the
   submit button on /contact-us/ did, and a click aimed at it hit the header
   instead. Browsers honour this for anchors, `scrollIntoView` and the jump
   Forminator makes to its own error message. */
html { scroll-padding-top: 96px; }

/* ---- The dropdown ------------------------------------------------------
   Forminator replaces the native select with Select2, so the element my
   control rules style is hidden behind a span and the thing on screen was
   untouched: a 40px grey box with a browser arrow next to 48px white inputs.
   The panel itself is appended to <body>, outside the form, so those rules
   cannot be scoped to `.vk-form`. */
.vk-page .vk-form .select2-container { width: 100% !important; }
.vk-page .vk-form form.forminator-custom-form .select2-container .select2-selection--single,
.vk-page .vk-form .select2-container--default .select2-selection--single,
.vk-page .vk-form .select2-container .select2-selection--single {
	box-sizing: border-box;
	height: 48px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius-sm);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vk-page .vk-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.vk-page .vk-form .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--vk-ink);
	font-family: var(--vk-font-body);
	font-size: 16px;
	line-height: 46px;
}
.vk-page .vk-form .select2-container .select2-selection__placeholder { color: #8a93a2; }
.vk-page .vk-form .select2-container--open .select2-selection--single,
.vk-page .vk-form .select2-container--focus .select2-selection--single {
	border-color: #4d5c75;
	box-shadow: 0 0 0 3px rgba(77, 92, 117, 0.22);
}
/* Select2 draws the arrow as a CSS triangle; this is the same chevron the
   navigation and the accordion use. */
.vk-page .vk-form .select2-container--default .select2-selection--single .select2-selection__arrow,
.vk-page .vk-form .select2-container .select2-selection__arrow { top: 0; right: 14px; height: 48px; width: 12px; }
.vk-page .vk-form .select2-container .select2-selection__arrow b,
.vk-page .vk-form .forminator-select .select2-selection__arrow b { display: none !important; }
.vk-page .vk-form .select2-container .select2-selection__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid #55606f;
	border-bottom: 2px solid #55606f;
	transform: rotate(45deg);
}

/* The panel. Appended to body, so it is addressed on its own. */
.select2-container--default .select2-dropdown,
.forminator-select-dropdown-container .select2-dropdown,
.select2-dropdown {
	border: 1px solid var(--vk-border, #e4eaf1);
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(20, 30, 50, 0.06), 0 12px 28px rgba(20, 30, 50, 0.10);
	overflow: hidden;
	font-family: 'Inter', system-ui, sans-serif;
}
.select2-dropdown .select2-results__option {
	padding: 11px 14px;
	color: #2a2c37;
	font-size: 15px;
	line-height: 1.35;
}
.select2-dropdown .select2-results__option--highlighted,
.select2-dropdown .select2-results__option--highlighted[aria-selected] {
	background: #f4f7fb;
	color: #2a2c37;
}
.select2-dropdown .select2-results__option[aria-selected="true"] {
	background: #eef2f8;
	color: #2a2c37;
	font-weight: 600;
}
.select2-dropdown .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #e4eaf1;
	border-radius: 4px;
	font-size: 15px;
}

/* Select2's own height rule reaches this element through a class chain the
   theme cannot outrank cleanly (`forminator-select` sits on the container,
   not on the control), so the three box properties are forced. The dropdown
   is the only control on the site that needs this. */
.vk-page .vk-form .forminator-select .select2-selection--single,
.vk-page .vk-form .select2-container .select2-selection--single {
	height: 48px !important;
	line-height: 46px !important;
	padding: 0 14px !important;
}
.vk-page .vk-form .forminator-select .select2-selection--single .select2-selection__rendered {
	height: 46px;
	line-height: 46px;
	padding: 0 !important;
}
.vk-page .vk-form .forminator-select .select2-selection__arrow { height: 46px !important; }
/* A Forminator rule still wins the line height (22px), which left the text at
   the top of the box, and its own chevron icon sat beside ours. Centre with
   flex so the line height no longer matters, and keep only our chevron. */
.vk-page .vk-form .select2-container .select2-selection--single .select2-selection__rendered {
	display: flex !important;
	align-items: center;
	height: 46px !important;
	padding-right: 24px !important;
	line-height: 1.3 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vk-page .vk-form .select2-container .select2-selection__arrow .forminator-icon-chevron-down { display: none !important; }

/* ---- Cards whose picture is an icon ------------------------------------
   The full bleed, cropped treatment is right for a photograph and wrong for
   line art: the Pyure benefit icons were blown to the card's width and had
   their tops cut off by the row's measured height. An icon sits at its own
   size, inset like the copy, with room around it. */
/* Centred, the way the telehealth page sets its icon grid: the glyph over
   its words rather than ranged left like a photograph card. */
.vk-page .fw-content-cards .fw-content-card--icon { text-align: center; }
.vk-page .fw-content-cards .fw-content-card--icon .fw-content-card__body {
	align-items: center;
	text-align: center;
}
.vk-page .fw-content-cards .fw-content-card--icon .fw-content-card__body > .wp-block-image {
	margin: 0 auto;
	padding: 30px 24px 6px;
	text-align: center;
}
.vk-page .fw-content-cards .fw-content-card--icon .fw-content-card__body p,
.vk-page .fw-content-cards .fw-content-card--icon .fw-content-card__body li,
.vk-page .fw-content-cards .fw-content-card--icon .fw-content-card__body h2,
.vk-page .fw-content-cards .fw-content-card--icon .fw-content-card__body h3,
.vk-page .fw-content-cards .fw-content-card--icon .fw-content-card__body h4 { text-align: center; }
.vk-page .fw-content-cards .fw-content-card--icon .fw-content-card__body > .wp-block-buttons { justify-content: center; }
.vk-page .fw-content-cards .fw-content-card--icon .wp-block-image img {
	/* The theme sets card pictures `display: block`, so centring the figure
	   does nothing for the glyph inside it. */
	display: block;
	margin-inline: auto;
	width: auto !important;
	max-width: 76px;
	height: auto !important;
	object-fit: contain;
}

/* ---- Job roles are a list, not a stack of bars -------------------------
   Each job card carried one or two heavy dark buttons stacked under the
   title, which read as two unrelated calls to action and left the cards
   ragged. The roles are what the card offers, so they sit together as a row
   of quiet pills that fill the space they have. */
.vk-page .fw-content-card__body > .wp-block-buttons.vk-roles,
.vk-page .fw-jobs .fw-content-card__body > .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---- A column of text centres in its band ------------------------------
   Holding paragraphs to a readable measure left them hard against the left
   edge with half the band empty beside them, which reads as a layout that
   lost its second column. The measure stays; the column sits in the middle
   of the band. Text inside it still ranges left, which is what makes it
   readable. */
/* One column width for every text block in a band, so a heading and the
   paragraph under it share a left edge. A `ch` measure cannot do that: 68
   characters of a 32px heading is a different width from 68 of 16px body,
   and the two centred blocks landed 20px apart. */
.vk-page .fw-banner__inner > p,
.vk-page .fw-banner__inner > ul,
.vk-page .fw-banner__inner > ol,
.vk-page .fw-banner__inner > .wp-block-heading {
	max-width: var(--vk-col, 760px);
	margin-inline: auto;
}
/* A hero keeps its own alignment: it is ranged left on the grid on purpose. */
.vk-page > .fw-banner--photo:first-child .fw-banner__inner > .wp-block-heading,
.vk-page .fw-banner--image + .fw-banner--headline .wp-block-heading,
.vk-page .fw-banner--image + .fw-banner--title .wp-block-heading,
.vk-page .fw-banner--statement:has(+ .vk-media-frame) .wp-block-heading { margin-inline: 0; max-width: 26ch; }

/* ---- The process line runs behind its cards ----------------------------
   The OUR PROCESS band is a heading, a dashed line drawn as an image, a
   spacer and then the cards, so the line floated on its own above a gap. The
   cards lift into it and paint over it, which is what the drawing is for.
   Matched on that exact sequence, so no other row moves. */
.vk-page .fw-banner__inner > .wp-block-image + .wp-block-spacer + .fw-content-cards {
	position: relative;
	z-index: 1;
	margin-top: -92px;
}

/* =========================================================================
   Job listings and testimonials, 5 Nov 2026.
   ========================================================================= */

/* ---- The job listing ---------------------------------------------------
   It was four narrow cards, each a shrunken photograph over a title with one
   or two heavy dark bars under it, and the bars at different heights card to
   card. Nothing about it said "these are the jobs open".

   It is a listing now: one row per vessel type, the photograph at a readable
   size on the left, the type and how many roles are open in the middle, and
   the roles themselves as links on the right. Four rows down the page instead
   of four columns across it. */
.vk-page .fw-content-cards--roles .fw-content-cards__inner {
	display: block;
	max-width: 960px;
	margin-inline: auto;
}
.vk-page .fw-content-cards--roles .fw-content-card {
	display: block;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 14px;
	padding: 0;
	text-align: left;
	transform: none;
}
.vk-page .fw-content-cards--roles .fw-content-card:last-child { margin-bottom: 0; }
.vk-page .fw-content-cards--roles .fw-content-card:hover { transform: none; }

/* A flex row rather than a grid: a card carries one button group per role and
   there is no wrapper around them, so a fixed third column stacked "Doctor"
   and "Nurse" on top of each other. In a row they simply sit side by side,
   however many there are, and the first one pushes the set to the right. */
.vk-page .fw-content-cards--roles .fw-content-card__body {
	display: flex;
	/* The card body is a flex COLUMN everywhere else on the site, and setting
	   `display: flex` alone left that direction in place, which stacked the
	   row back into a tower with a full width photograph. */
	flex-direction: row;
	align-items: center;
	gap: 0 24px;
	padding: 0;
	min-height: 112px;
}
.vk-page .fw-content-cards--roles .fw-content-card__body > .wp-block-spacer { display: none; }

.vk-page .fw-content-cards--roles .fw-content-card .wp-block-image {
	flex: 0 0 160px;
	align-self: stretch;
	margin: 0 !important;
	padding: 0 !important;
}
.vk-page .fw-content-cards--roles .fw-content-card .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.vk-page .fw-content-cards--roles .fw-content-card .wp-block-heading {
	flex: 1 1 auto;
	margin: 0;
	padding: 18px 0;
	text-align: left !important;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--vk-ink);
}

.vk-page .fw-content-cards--roles .fw-content-card .wp-block-buttons {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	width: auto;
	justify-content: flex-end;
}
.vk-page .fw-content-cards--roles .fw-content-card .wp-block-buttons:last-of-type { padding-right: 24px; }

/* The roles read as what they are: a link to that vacancy, not a brand
   button. Quiet until you reach for one. */
.vk-page .fw-content-cards--roles .wp-block-button__link {
	padding: 9px 16px;
	background: transparent;
	color: #2a2c37;
	box-shadow: inset 0 0 0 1px var(--vk-border);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
.vk-page .fw-content-cards--roles .wp-block-button__link:hover {
	background: #2a2c37;
	color: #fff;
	box-shadow: inset 0 0 0 1px #2a2c37;
	transform: none;
}
.vk-page .fw-content-cards--roles .wp-block-button__link::after { margin-left: 8px; }

@media (max-width: 860px) {
	.vk-page .fw-content-cards--roles .fw-content-card__body {
		flex-wrap: wrap;
		min-height: 0;
	}
	.vk-page .fw-content-cards--roles .fw-content-card .wp-block-image { flex: 0 0 104px; }
	.vk-page .fw-content-cards--roles .fw-content-card .wp-block-heading { flex: 1 1 60%; padding: 14px 0 0; }
	.vk-page .fw-content-cards--roles .fw-content-card .wp-block-buttons { padding: 0 16px 16px 128px; }
	.vk-page .fw-content-cards--roles .fw-content-card .wp-block-buttons:last-of-type { padding-right: 16px; }
}

/* ---- Testimonials, one treatment -------------------------------------
   Two formats were in use: the text quotes on the service pages, set on
   almost nothing, and the ones on /shipboardjobs/, which are a photograph
   with the whole quote drawn into the artwork. The frame is now the same for
   both, and a portrait inside one is round. */
.vk-page .vk-quotes__slide {
	--vk-slide-pad: 40px;
	padding: 40px !important;
	display: flex;
	flex-direction: column;
}
.vk-page .vk-quotes__slide blockquote {
	position: relative;
	margin: 0;
	padding-top: 34px;
	font-size: 17px;
	line-height: 1.68;
	color: var(--vk-ink);
}
/* The quote mark is the device the image slides use, drawn rather than set
   so it cannot drift between the two formats. */
.vk-page .vk-quotes__slide blockquote::before {
	content: "\201C";
	position: absolute;
	top: -6px;
	left: -2px;
	color: #b0c4db;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 56px;
	line-height: 1;
}
.vk-page .vk-quotes__slide figcaption {
	margin-top: auto;
	padding-top: 22px;
	color: var(--vk-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}
.vk-page .vk-quotes__date {
	margin-top: 4px;
	color: var(--vk-ink-soft);
	font-size: 14px;
}
/* A portrait inside a quote is round and sits with the attribution. */
.vk-page .vk-quotes__slide:not(.vk-quotes__slide--image) img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 16px;
}
/* The slides sit on one baseline whatever the quote's length. */
.vk-page .vk-quotes__track { align-items: stretch; }
.vk-page .vk-quotes__slide--image { padding: 0 !important; }

/* The logo stays as the brand draws it, over a photograph too. */
.fw-header.vk-head--over:not(.vk-head--stuck) .fw-logo img { filter: none; opacity: 1; }

/* ---- The notice strip is a slim bar ------------------------------------
   "Let's do our part to support seafarers around the globe" and its button,
   on one line above the home hero, rather than a 181px band. */
.vk-page .vk-notice {
	padding-top: 0;
	padding-bottom: 0;
	min-height: 0;
}
.vk-page .vk-notice > .fw-banner__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 20px;
	width: 95%;
	max-width: 1200px;
	margin-inline: auto;
	padding-block: 16px;
	text-align: left;
}
.vk-page .vk-notice .wp-block-heading,
.vk-page .vk-notice p {
	margin: 0;
	max-width: none;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.01em;
}
.vk-page .vk-notice .wp-block-buttons { margin: 0; justify-content: flex-start; }
.vk-page .vk-notice .wp-block-button__link {
	padding: 9px 18px;
	font-size: 14px;
	background: #fff;
	color: #2a2c37;
}
.vk-page .vk-notice .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.86);
	color: #2a2c37;
}

/* ---- The strip sits on the foot of the home hero ------------------------
   vk-header.js moves it to directly after the film; it is pulled up over the
   film's bottom edge by its own height. A fixed height, so the pull is exact. */
.vk-page .vk-notice {
	position: relative;
	z-index: 3;
	height: 64px;
	/* `!important` because the band carries `--fw-banner-mt: -8px` inline and
	   the banner rule that reads it outranks this one, so the strip was only
	   lifting 8px onto the film instead of its whole height. */
	margin-top: -64px !important;
	background: rgba(42, 44, 55, 0.82) !important;
	backdrop-filter: saturate(140%) blur(8px);
}
.vk-page .vk-notice > .fw-banner__inner {
	height: 64px;
	padding-block: 0;
	box-sizing: border-box;
	color: #fff;
}
.vk-page .vk-notice .wp-block-heading,
.vk-page .vk-notice p { color: #fff; }

/* The masthead is fixed, so a logged in editor's admin bar would sit over it. */
body.admin-bar .fw-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fw-header { top: 46px; } }

@media (max-width: 680px) {
	.vk-page .vk-notice { height: auto; margin-top: 0; }
	.vk-page .vk-notice > .fw-banner__inner { height: auto; padding-block: 14px; }
}

/* One minimum height for every page hero (Owen, 6 Nov), set in one place.
   The three hero shapes had drifted to three values: 78vh/680, 76vh/660 and
   76vh/660 again. */
:root { --vk-hero-min: min(64vh, 660px); }

/* ---- The article head, the same as a page hero --------------------------
   Same minimum height as every page hero, the picture cropped to it rather
   than shown at its own shape, the title laid on the picture over the same
   scrim, ranged left on the 1200 grid. An article without a picture gets the
   navy title band the page heroes without one use. */
.vk-article__head {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--vk-hero-min);
	background: #2a3b5a;
	overflow: hidden;
}
.vk-article__head .vk-article__hero {
	position: absolute;
	inset: 0;
	margin: 0;
}
.vk-article__head .vk-article__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vk-article__head--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(12, 20, 34, 0.50) 0%, rgba(12, 20, 34, 0) 32%),
		linear-gradient(90deg, rgba(12, 20, 34, 0.80) 0%, rgba(12, 20, 34, 0.50) 50%, rgba(12, 20, 34, 0.10) 100%),
		linear-gradient(0deg, rgba(12, 20, 34, 0.50) 0%, rgba(12, 20, 34, 0) 60%);
}
.vk-article__head .vk-article__titleband {
	position: relative;
	z-index: 2;
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 clamp(40px, 5.5vw, 76px);
	background: transparent;
}
.vk-article__head .vk-article__titleband h1 {
	max-width: min(860px, 72%);
	margin: 0;
	padding: 0;
	color: #fff;
	text-align: left;
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.vk-article__head .vk-article__byline {
	max-width: min(860px, 72%);
	margin: 14px 0 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.9);
	text-align: left;
	font-size: 16px;
	font-weight: 600;
	font-style: normal;
}
@media (max-width: 680px) {
	.vk-article__head .vk-article__titleband h1,
	.vk-article__head .vk-article__byline { max-width: none; }
}

/* =========================================================================
   Shipboard job openings, 6 Nov 2026.

   One card per vessel type, two to a row. The vessel photograph is the
   card's cover with the category and the number of open roles on it; the
   roles sit inside as rows, each one the whole of its own link, carrying
   the posting's role, its terms as chips and a sentence of what the job is.
   ========================================================================= */

/* The listing replaces the old card row, so the row's own flex and the
   measured card geometry no longer apply to it. */
.vk-page .fw-content-cards__inner--jobs {
	display: block;
	max-width: 1200px;
	margin-inline: auto;
	width: 95%;
}

.vk-jobs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.vk-jobs__group {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 30, 50, 0.05), 0 10px 30px rgba(20, 30, 50, 0.10);
}

/* ---- The cover --------------------------------------------------------- */
.vk-jobs__cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 10px;
	min-height: 210px;
	padding: 26px 28px;
	background-color: #2a3b5a;
	background-size: cover;
	background-position: center;
	isolation: isolate;
}
.vk-jobs__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(12, 20, 34, 0.05) 20%, rgba(12, 20, 34, 0.78) 100%);
}
.vk-page .vk-jobs__category {
	margin: 0;
	color: #fff;
	font-family: var(--vk-font-head, inherit);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-align: left;
	max-width: none;
}
.vk-jobs__count {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

/* ---- The roles --------------------------------------------------------- */
.vk-page .vk-jobs__roles {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	max-width: none;
}
.vk-jobs__roles .vk-job { margin: 0; padding: 0; }
.vk-jobs__roles .vk-job + .vk-job { border-top: 1px solid #e8edf3; }

.vk-page .vk-job__link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 28px 24px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.vk-page .vk-job__link:hover { background: #f5f8fb; }
.vk-page .vk-job__link:focus-visible {
	outline: 2px solid #4d5c75;
	outline-offset: -2px;
}

.vk-job__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.vk-job__title {
	color: #2a2c37;
	font-family: var(--vk-font-head, inherit);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.vk-job__cta {
	flex: 0 0 auto;
	color: #4d5c75;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: transform 0.15s ease, color 0.15s ease;
}
.vk-job__link:hover .vk-job__cta { color: #2a2c37; transform: translateX(3px); }

.vk-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.vk-job__chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 100px;
	background: #eef2f7;
	color: #4d5c75;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}
/* The one term that varies between postings is the contract, so it is the
   one that is coloured. */
.vk-job__chip--type { background: #2a3b5a; color: #fff; }

.vk-job__summary {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #55606f;
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 860px) {
	.vk-jobs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.vk-jobs__cover { min-height: 170px; padding: 20px 22px; }
	.vk-page .vk-job__link { padding: 18px 22px 20px; }
}

/* A role row is one link, so the site's body link rule underlined every line
   inside it: the title, the chips and the summary. The row is marked by its
   hover instead. */
.vk-page .fw-banner__inner .vk-jobs a.vk-job__link,
.vk-page .vk-jobs a.vk-job__link,
.vk-page .vk-jobs a.vk-job__link * { text-decoration: none; }

/* The section heading over the job cards was white on the pale blue band,
   which barely reads. Ink, and the same size as the other section headings. */
.vk-page section:has(.vk-jobs) > .fw-banner__inner > .wp-block-heading,
.vk-page section:has(.vk-jobs) .fw-content-cards__title { color: #2a2c37; }

/* ---- Lists are never centred (Owen, 6 Nov) -----------------------------
   A centred bullet list loses the one thing a list is for: a common left
   edge to read down. Under a centred heading the LIST sits in the middle of
   the band, but its items always range left. */
.vk-page .fw-banner__inner > ul,
.vk-page .fw-banner__inner > ol,
.vk-page .fw-banner__inner > .wp-block-list {
	width: fit-content;
	max-width: var(--vk-col, 760px);
	margin-inline: auto;
	text-align: left !important;
}
.vk-page .wp-block-list,
.vk-page .wp-block-list li,
.vk-page ul.has-text-align-center,
.vk-page ul.has-text-align-center li,
.vk-page ol.has-text-align-center li { text-align: left !important; }

/* ---- Copy under a centred heading is centred ---------------------------
   A centred heading over left-ranged copy reads as two different layouts in
   one band; the copy follows its heading. */
.vk-page .fw-banner__inner:has(> .wp-block-heading.has-text-align-center) > p,
.vk-page .fw-banner__inner:has(> .wp-block-heading.has-text-align-center) > p.has-text-align-left {
	text-align: center;
	margin-inline: auto;
}

/* ---- Links inside forms ------------------------------------------------
   The consent link was #4d5c75 on a #424d64 band: a contrast ratio of 1.25,
   invisible. A link inside a form takes the colour of the copy around it and
   is marked by its underline. The form element is in the selector because
   Forminator's per form stylesheet sets this colour and loads after ours. */
.vk-page .vk-form form.forminator-custom-form a,
.vk-page .vk-form form.forminator-custom-form .forminator-field a,
.vk-page .vk-form a {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: currentColor;
}

/* The footer's copyright bar ranges right (Owen, 6 Nov). */
.vk-footer__bar,
.vk-footer__bar p { text-align: right; }

/* ---- Video embeds are 16:9 ---------------------------------------------
   The Pyure film was 591 x 332 on the old site, which is 16:9; the rebuild
   kept the measured height inline and let the width run to the column, so
   it played as a 1200 x 332 letterbox. Video embeds take the column up to a
   comfortable 960px and their own ratio. Only YouTube and Vimeo: the same
   block also carries the ShareFile upload forms, which are not films. */
.vk-page .vk-media-frame:not(.vk-media-frame--cover):has(iframe[src*="youtube"]),
.vk-page .vk-media-frame:not(.vk-media-frame--cover):has(iframe[src*="vimeo"]) {
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}
.vk-page .vk-media-frame:not(.vk-media-frame--cover) iframe[src*="youtube"],
.vk-page .vk-media-frame:not(.vk-media-frame--cover) iframe[src*="vimeo"] {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
}

/* =========================================================================
   Icon Cards, Cards style. 6 Nov 2026.

   A reusable feature grid on framework/icon-cards (Style: Cards in the block
   sidebar). Each item is its own card: the icon in a tinted tile, the copy
   under it. The row wraps and centres its last line, so five benefits sit
   three over two rather than leaving a hole. Written without `.vk-page` so
   the editor canvas draws it the same.
   ========================================================================= */
.fw-icons.fw-icons--cards {
	--fw-icons-gap: 24px;
}
.fw-banner__inner > .fw-icons.fw-icons--cards {
	padding: 0;
	margin-top: 40px;
	width: 100%;
}
.fw-icons.fw-icons--cards .fw-icons__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fw-icons-gap);
	max-width: 1140px;
	margin: 0 auto;
}
.fw-icons.fw-icons--cards .fw-icons__intro {
	flex: 0 0 100%;
	margin-bottom: 16px;
}
.fw-icons.fw-icons--cards .fw-icon-card {
	box-sizing: border-box;
	flex: 0 1 calc((100% - (var(--fw-icons-cols, 3) - 1) * var(--fw-icons-gap)) / var(--fw-icons-cols, 3));
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px 30px 34px;
	background: #fff;
	border: 1px solid var(--vk-border, #e4eaf1);
	border-radius: 12px;
	box-shadow: var(--vk-shadow-sm, 0 2px 8px rgba(20, 30, 50, 0.06));
	text-align: left;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.fw-icons.fw-icons--cards .fw-icon-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 2px rgba(20, 30, 50, 0.05), 0 10px 28px rgba(20, 30, 50, 0.10);
}
.fw-icons.fw-icons--cards .fw-icon-card::after { display: none; }

/* The tile is one size whatever the artwork was measured at; the glyph fills
   two thirds of it. */
.fw-icons.fw-icons--cards .fw-icon-card .fw-icon-card__icon {
	box-sizing: border-box;
	position: static;
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	padding: 8px;
	border-radius: 18px;
	background: rgba(99, 153, 204, 0.12);
}
.fw-icons.fw-icons--cards .fw-icon-card .fw-icon-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.fw-icons.fw-icons--cards .fw-icon-card__body {
	margin-top: 22px;
	max-width: none;
	color: var(--vk-ink, #2a2c37);
}
.fw-icons.fw-icons--cards .fw-icon-card__body :is(h2, h3, h4, h5, h6) {
	margin: 0 0 8px;
	color: var(--vk-ink, #2a2c37);
	font-family: var(--vk-font-head, inherit);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.fw-icons.fw-icons--cards .fw-icon-card__body p {
	margin: 0;
	color: var(--vk-ink-soft, #55606f);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	text-align: inherit;
}
.fw-icons.fw-icons--cards .fw-icon-card__body p + p { margin-top: 10px; }

/* Centred: the tile and the copy on the card's centre line. Lists stay left. */
.fw-icons.fw-icons--cards.fw-icons--align-center .fw-icon-card {
	align-items: center;
	text-align: center;
}
.fw-icons.fw-icons--cards.fw-icons--align-center .fw-icon-card__body :is(ul, ol) {
	text-align: left;
}

@media (max-width: 980px) {
	.fw-icons.fw-icons--cards .fw-icon-card {
		flex-basis: calc((100% - var(--fw-icons-gap)) / 2);
	}
}
@media (max-width: 600px) {
	.fw-icons.fw-icons--cards { --fw-icons-gap: 16px; }
	.fw-icons.fw-icons--cards .fw-icon-card {
		flex-basis: 100%;
		padding: 26px 24px 28px;
	}
}

/* =========================================================================
   Listings, 6 Nov 2026: the category archives draw the press room's card
   and sidebar. Two cards to a row beside a 300px sticky filter panel.
   ========================================================================= */
.vk-listing { margin-top: 8px; }
.vk-listing--side {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.vk-listing__main { flex: 1 1 auto; min-width: 0; }
.vk-listing__side {
	flex: 0 0 300px;
	position: sticky;
	top: 114px;
	align-self: flex-start;
}
body.admin-bar .vk-listing__side { top: 146px; }
.vk-listing--side .vk-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vk-listing:not(.vk-listing--side) .vk-listing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vk-listing__main .vk-archive__pagination { margin-top: 44px; }
.vk-listing__main:has(.vk-filter__results:not([hidden])) .vk-archive__pagination { display: none; }
.vk-listing__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.vk-listing__eyebrow a { color: #4d5c75; text-decoration: none; }
.vk-listing__eyebrow a:hover { color: #2a2c37; }
@media (max-width: 860px) {
	.vk-listing--side { flex-direction: column; align-items: stretch; gap: 24px; }
	.vk-listing__side { position: static; order: -1; flex-basis: auto; }
}

/* The press room's own listing beside its panel: two to a row, full width
   of the main column. */
.vk-page .wp-block-columns:has(> .wp-block-column > .vk-filter--panel) .vk-recent__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: 28px !important;
	row-gap: 28px !important;
}
@media (max-width: 599px) {
	.vk-page .wp-block-columns:has(> .wp-block-column > .vk-filter--panel) .vk-recent__grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* A secondary action under a listing ("View all insights"): outlined, so it
   does not compete with the band's primary button. */
.vk-page .wp-block-button.vk-btn--outline > .wp-block-button__link {
	background: transparent;
	color: #2a2c37;
	box-shadow: inset 0 0 0 1px #2a2c37;
}
.vk-page .wp-block-button.vk-btn--outline > .wp-block-button__link:hover {
	background: #2a2c37;
	color: #fff;
}

/* ---- Paired photographs -------------------------------------------------
   Columns given the class `vk-media-pair` (Advanced > Additional CSS class
   on the Columns block) crop the first picture in each column to one shape,
   so two photographs side by side line up top and bottom whatever their
   original proportions. First used on /guest-medical-screening-service/,
   where Guests is 3:2 and Vessel Operators 16:9. */
.vk-page .wp-block-columns.vk-media-pair > .wp-block-column > .wp-block-image:first-of-type {
	width: 100%;
	margin-inline: 0;
}
.vk-page .wp-block-columns.vk-media-pair > .wp-block-column > .wp-block-image:first-of-type img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}

/* ---- Rounded corners on content photographs, 6 Nov 2026 ---------------
   Photographs in the body of a page get the cards' 12px radius and nothing
   else: no border, no shadow (pass seven put both on logos). Only photo
   formats, and never the logo and certification artwork saved as JPEGs.
   Heroes, card images (the card clips its own corners) and the picture
   testimonials are not content photos and are left as they are. */
.vk-page .wp-block-image img:is([src*=".jpg" i], [src*=".jpeg" i], [src*=".webp" i]):not([src*="logo" i]):not([src*="certification" i]):not([src*="Untitled-600-x-200" i]),
.vk-page .fw-split__media img:is([src*=".jpg" i], [src*=".jpeg" i], [src*=".webp" i]):not([src*="logo" i]) {
	border-radius: 12px;
}
.vk-page .fw-banner--image .wp-block-image img,
.vk-page .fw-content-card .wp-block-image img,
.vk-page .vk-quotes .wp-block-image img {
	/* !important: the rule above carries the specificity of its :is() and
	   :not() lists and outranks these otherwise. */
	border-radius: 0 !important;
}

/* ---- Text testimonials in the single card format ----------------------
   The picture testimonials are one 1200px card at a time, crossfading every
   nine seconds. Text quotes in that mode (Case Management) take the same
   frame: one card, the quote centred and readable, the attribution under
   it, and the same fade. */
.vk-page .vk-quotes--fade .vk-quotes__slide:not(.vk-quotes__slide--image),
.vk-page .vk-quotes--single .vk-quotes__slide:not(.vk-quotes__slide--image) {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: clamp(36px, 5vw, 64px) clamp(24px, 8vw, 120px) !important;
	background: #fff;
	border: 1px solid #e4eaf1;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04), 0 2px 8px rgba(20, 30, 50, 0.06);
	text-align: center;
}
.vk-page .vk-quotes--fade .vk-quotes__slide:not(.vk-quotes__slide--image) blockquote,
.vk-page .vk-quotes--single .vk-quotes__slide:not(.vk-quotes__slide--image) blockquote {
	max-width: 820px;
	margin: 0 auto;
	padding-top: 52px;
	color: var(--vk-ink);
	font-size: 19px;
	line-height: 1.7;
	text-align: center;
}
.vk-page .vk-quotes--fade .vk-quotes__slide:not(.vk-quotes__slide--image) blockquote::before,
.vk-page .vk-quotes--single .vk-quotes__slide:not(.vk-quotes__slide--image) blockquote::before {
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	font-size: 64px;
}
.vk-page .vk-quotes--fade .vk-quotes__slide:not(.vk-quotes__slide--image) figcaption,
.vk-page .vk-quotes--single .vk-quotes__slide:not(.vk-quotes__slide--image) figcaption {
	margin-top: 0;
	padding-top: 26px;
	text-align: center;
}
/* Air between a section's intro line and its testimonial card. */
.vk-page .fw-banner__inner > p + .vk-quotes,
.vk-page .fw-banner__inner > h2 + .vk-quotes { margin-top: 40px; }
/* One card at a time: the track is the card's own width. The phone rule
   that pads a two-up track 20px a side pushed this one 40px off screen. */
.vk-page .vk-quotes--fade .vk-quotes__track,
.vk-page .vk-quotes--single .vk-quotes__track { padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }

/* ---- One card at a time, sliding ---------------------------------------
   The track is one card wide and scrolls sideways a card at a time; the
   script loops it. The card fills the track at every width (the two-up
   slider's phone rule made slides 80% wide). */
.vk-page .vk-quotes--single { padding-left: 0; }
.vk-page .vk-quotes--single .vk-quotes__track {
	width: var(--vk-slide, 1200px);
	max-width: 100%;
	margin-inline: auto;
	gap: 0;
	scroll-snap-type: x mandatory;
	align-items: stretch;
}
.vk-page .vk-quotes--single .vk-quotes__slide {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	scroll-snap-align: start;
	border-left: 0;
}
.vk-quotes__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
.vk-quotes__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: #c9d4e1;
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}
.vk-quotes__dot:hover { background: #8fa1b8; }
.vk-quotes__dot.is-active { width: 28px; background: #2a2c37; }
.vk-quotes__dot:focus-visible { outline: 2px solid #4d5c75; outline-offset: 3px; }

/* The band after the notice strip keeps its own top. On the home page the
   subscribe band carries a -46px pull from the old layout, where it
   overlapped the film; with the strip moved to the film's foot that pull
   slid the band 46px up under the strip and the form fields touched it. */
.vk-page .vk-notice + .fw-banner,
.vk-page .vk-notice + section { margin-top: 0 !important; }

/* =========================================================================
   One page hero height, 9 Nov 2026.

   Measured at 2000x965 on every page, the photographic heroes came out at
   three heights: 618 (the target, min(64vh, 660px)), 730 and 833.
     - 730: the title-on-photo heroes (Mental Health, Case Management, Guest
       Screening, Medical Supplies, OneHealth) are content-box, so their 56px
       paddings were added ON TOP of the minimum.
     - 833: on Pyure, Shoreside Jobs, the paramedic application and the AI
       workshop page the picture sits in normal flow and the band grew to
       the photograph's own shape, past the minimum.
   Every photographic page hero is now that height: the padding counts
   inside it and the picture is laid behind the band, cropped to fill it.
   The two cover films (home, Seafarer Human Sustainability) keep their own
   shapes: their headline is part of the footage, and cropping them to this
   height would cut through it.
   ========================================================================= */

/* The height is the Telehealth page's (Owen, 9 Nov: "the height on the
   telehealth page is correct"): the shared minimum plus that hero's 56px
   top and bottom padding, which it was getting as content-box. 730px at
   2000x965. Article heads use it too. */
:root { --vk-hero-h: calc(var(--vk-hero-min) + 112px); }
.vk-article__head { min-height: var(--vk-hero-h); }

.vk-page > .fw-banner--image:first-child,
.vk-page > .fw-banner--photo:first-child {
	box-sizing: border-box;
	min-height: var(--vk-hero-h);
}
.vk-page > .fw-banner--image:first-child {
	height: var(--vk-hero-h);
	overflow: hidden;
}
.vk-page > .fw-banner--image:first-child > .fw-banner__media {
	position: absolute;
	inset: 0;
	height: 100%;
	margin: 0;
}
.vk-page > .fw-banner--image:first-child > .fw-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The headline band laid over the picture covers the WHOLE picture and sets
   its type on the bottom of it. It used to be pulled up by a fixed
   clamp(-300px, -22vw, -200px), so the visible hero ended wherever the
   headline happened to end: 442 to 571px at 2000x965 against a 618px
   picture, depending on how many lines the headline ran to. */
.vk-page > .fw-banner--image:first-child + .fw-banner--headline,
.vk-page > .fw-banner--image:first-child + .fw-banner--title {
	box-sizing: border-box;
	height: var(--vk-hero-h);
	margin-top: calc(-1 * var(--vk-hero-h)) !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 110px;
	padding-bottom: clamp(40px, 5vw, 72px);
}

/* The masthead sits over every photographic hero, so content in a hero
   starts below it rather than under it (OneHealth's headline was 8px under
   the menu). A picture inside a hero is held to the room left, so a tall
   one (OneHealth's phone) cannot stretch the hero past the shared height. */
.vk-page > .fw-banner--photo:first-child { padding-top: 114px; }
.vk-page > .fw-banner--photo:first-child .wp-block-image img,
.vk-page > .fw-banner--photo:first-child .fw-split__media img {
	width: auto;
	max-height: calc(var(--vk-hero-h) - 200px);
	object-fit: contain;
}

/* A page hero starts at the top of the page. Four of them carried the old
   site's -8px pull, which lifted the picture under the masthead and ended
   the visible hero 8px short of the others. */
.vk-page > .fw-banner--image:first-child,
.vk-page > .fw-banner--photo:first-child { margin-top: 0 !important; }
/* (OneHealth's split headline is left at its own size: at this height it fits.) */

/* A section heading and the columns, split or accordion directly under it
   had no space between them (/medical-management-outsourced-or-consulting/:
   0px between the heading and its two columns of copy). */
.vk-page .fw-banner__inner > :is(h2, h3, h4, h5, h6) + :is(.wp-block-columns, .fw-split, .wp-block-details, .vk-acc) {
	margin-top: 32px;
}

/* Icon cards with a title and a description (class `vk-icons--titled` on
   the Icon Cards block; first used on the Medical Management service grid).
   The title is white over the band, the description stays ink, with room
   between them. Each card used to be one paragraph split by a line break,
   so the two could not be told apart. */
.vk-page .vk-icons--titled .fw-icon-card__body .vk-icon-title {
	margin: 0 0 10px;
	color: #fff;
	font-family: var(--vk-font-head, inherit);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}
.vk-page .vk-icons--titled .fw-icon-card__body .vk-icon-title + p {
	margin-top: 0;
	color: var(--vk-ink, #2a2c37);
}

/* =========================================================================
   Every page has a hero, 9 Nov 2026.

   Owen: "check all pages have a hero, at the same hero height, with the
   same H1 styling, sizing and positioning". Pages without a photograph now
   open with a text hero (class `vk-hero` on the first banner): the brand
   slate at the same height as the photographic heroes, with the masthead
   over it, and the page's title as its H1. Each page's title became its
   single H1 in that hero; any other H1 on the page became an H2.
   ========================================================================= */
.vk-page > .vk-hero:first-child {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: var(--vk-hero-h);
	min-height: var(--vk-hero-h);
	margin-top: 0 !important;
	padding: 110px 0 clamp(40px, 5vw, 72px) !important;
	overflow: hidden;
}
/* No photograph: the brand slate. With one (9 Nov, every page now has a
   picture), the banner's own photo and wash draw it, as on the other heroes. */
.vk-page > .vk-hero:first-child:not(.fw-banner--photo) {
	background-color: #4e5c76 !important;
	background-image: linear-gradient(135deg, #5b6a85 0%, #4e5c76 45%, #3b475d 100%) !important;
}
.vk-page > .vk-hero.fw-banner--photo:first-child {
	background-size: cover !important;
	background-position: var(--fw-banner-image-pos, center) !important;
}

/* The inner column of every hero: the 1200 grid, ranged left. */
.vk-page > .vk-hero:first-child > .fw-banner__inner,
.vk-page > .fw-banner--image:first-child + .fw-banner--headline > .fw-banner__inner,
.vk-page > .fw-banner--image:first-child + .fw-banner--title > .fw-banner__inner,
.vk-page > .fw-banner--photo:first-child > .fw-banner__inner {
	box-sizing: border-box;
	width: 95%;
	max-width: 1200px;
	margin-inline: auto;
	padding: 0;
	align-items: flex-start;
	text-align: left;
}

/* The photograph with its title in the band sits its title at the same
   distance off the bottom as every other hero. */
.vk-page > .fw-banner--photo:first-child { padding-bottom: clamp(40px, 5vw, 72px) !important; }

/* ONE hero H1. The size, leading, tracking, case and colour are set here
   and override the measured fw-type / vk-track classes the old site's
   headings carried, which is why /medical-solutions/ and
   /mental-health-solutions/ were drawing different sizes. */
.vk-page > .vk-hero:first-child h1,
.vk-page > .fw-banner--image:first-child + .fw-banner--headline h1,
.vk-page > .fw-banner--image:first-child + .fw-banner--title h1,
.vk-page > .fw-banner--photo:first-child h1 {
	margin: 0 !important;
	max-width: 20ch;
	color: #fff !important;
	font-family: var(--vk-font-head, inherit) !important;
	font-size: clamp(32px, 4.2vw, 56px) !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.02em !important;
	text-transform: uppercase !important;
	text-align: left !important;
}
/* OneHealth's H1 shares its column with the app badges and the button, so
   it takes the column's width rather than 20 characters. */
.vk-page > .fw-banner--photo:first-child .fw-split h1 { max-width: none; }
/* The band after a text hero keeps no pull of its own (Thank You and the
   Pyure FAQ carried 5 to 15px from the old layout). */
.vk-page > .vk-hero:first-child + .fw-banner { margin-top: 0 !important; }

/* In-page links (Book a Demo, Contact Us) glide to their section and stop
   below the fixed masthead rather than under it. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.vk-page [id] { scroll-margin-top: 100px; }

/* ---- Process bands: the dotted route runs BEHIND the cards ------------
   (/guest-medical-screening-service/ "How does it work?", /case-management/
   "Our process"). The route was a picture sitting above the cards. It now
   shares the cards' grid cell, centred on them vertically, wider than the
   content column, with the cards drawn over it; the heading sits closer. */
.vk-page .fw-banner__inner:has(> figure img[src*="dotted-line"]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: stretch;
}
.vk-page .fw-banner__inner:has(> figure img[src*="dotted-line"]) > :is(h2, h3, h4) { grid-row: 1; margin-bottom: 0; }
.vk-page .fw-banner__inner:has(> figure img[src*="dotted-line"]) > .wp-block-spacer { display: none; }
.vk-page .fw-banner__inner > figure:has(img[src*="dotted-line"]) {
	grid-row: 2;
	grid-column: 1;
	align-self: center;
	justify-self: center;
	z-index: 0;
	width: min(1500px, calc(100vw - 80px));
	max-width: none;
	margin: 0;
	pointer-events: none;
}
.vk-page .fw-banner__inner > figure:has(img[src*="dotted-line"]) img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}
.vk-page .fw-banner__inner:has(> figure img[src*="dotted-line"]) > .fw-content-cards {
	grid-row: 2;
	grid-column: 1;
	position: relative;
	z-index: 1;
	margin-top: 44px !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}
/* The figure's row is the cards' row, so its top margin is the cards'. */
.vk-page .fw-banner__inner > figure:has(img[src*="dotted-line"]) { margin-top: 44px; }
@media (max-width: 781px) {
	.vk-page .fw-banner__inner > figure:has(img[src*="dotted-line"]) { display: none; }
	.vk-page .fw-banner__inner:has(> figure img[src*="dotted-line"]) > .fw-content-cards { margin-top: 28px !important; }
}

/* The testimonial portrait: 120px (Owen, 9 Nov; was 84), round, between the quote and the name
   (Owen, 9 Nov). Every testimonial on the site is now this one card. */
.vk-page .vk-quotes__slide:not(.vk-quotes__slide--image) img.vk-quotes__photo {
	display: block;
	width: 120px;
	height: 120px;
	margin: 28px auto 0;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px #fff, 0 2px 10px rgba(20, 30, 50, 0.14);
}
.vk-page .vk-quotes__slide img.vk-quotes__photo + figcaption { padding-top: 14px; }

/* =========================================================================
   One icon style, 9 Nov 2026 (Owen: "use the style of the ones on
   /onehealth-by-vikand/ for the whole site"). Those are a white line glyph
   on a #88a6c3 square, sat in the pale tile. Icons drawn from Bootstrap
   Icons (iconBi on the Icon Card) take the same square and the same tile,
   scaled to whatever tile the layout draws.
   ========================================================================= */
.vk-page .fw-icons .fw-icon-card__icon:has(> .bi) {
	box-sizing: border-box;
	container-type: size;
	padding: 8px;
	border-radius: 12px;
	background: rgba(77, 92, 117, 0.10);
}
.vk-page .fw-icons .fw-icon-card__icon > .bi {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #88a6c3;
	color: #fff;
	font-size: 46cqw;
	line-height: 1;
}
.vk-page .fw-icons .fw-icon-card__icon > .bi::before { line-height: 1; }
/* The Cards style tile is a little roomier; keep the square inside it. */
.vk-page .fw-icons--cards .fw-icon-card .fw-icon-card__icon:has(> .bi) { padding: 8px; background: rgba(77, 92, 117, 0.10); }
/* On a dark band the pale tile disappears; lift it. The banner's tone
   classes name the TEXT: fw-banner--light is light text on a dark band. */
.vk-page .fw-banner--light .fw-icons .fw-icon-card__icon:has(> .bi) { background: rgba(255, 255, 255, 0.14); }
/* The tile is square at the size the layout draws it (80 stacked, 48 in the
   inline lists), so the square inside is too. */
.vk-page .fw-icons .fw-icon-card__icon:has(> .bi) {
	flex: 0 0 auto;
	width: var(--fw-icon-w, 80px);
	height: var(--fw-icon-w, 80px);
}
.vk-page .fw-icons--inline .fw-icon-card__icon:has(> .bi) {
	width: var(--fw-icon-w, 56px);
	height: var(--fw-icon-w, 56px);
	padding: 6px;
	border-radius: 10px;
}

/* =========================================================================
   One H2, one H4, 9 Nov 2026 (Owen: "make sure H2 and H4 titles are
   uniform throughout the site in size, case and font").
   Measured on every page: H2s ran at nine styles (26 to 52px, some in
   capitals, some not) and H4s at four (18 to 32px), each from a type class
   measured off the old site. These override those classes. Case is set by
   the stylesheet, because the source text itself is written in a mix of
   capitals and title case, so only a transform makes it read the same.
   Colour and alignment stay with the band and the editor.
   Not touched: headings inside article cards, forms, quotes and the job
   listing, which carry their own component type.
   ========================================================================= */
.vk-page h2.wp-block-heading:not(.screen-reader-text),
.vk-page .fw-banner__inner h2:not(.screen-reader-text):not([class*="vk-card"]),
.vk-article__body h2 {
	font-family: var(--vk-font-head, 'Archivo', sans-serif) !important;
	font-size: clamp(26px, 2.4vw, 34px) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	text-transform: uppercase !important;
}
.vk-page h4.wp-block-heading,
.vk-page .fw-banner__inner h4,
.vk-article__body h4 {
	font-family: var(--vk-font-head, 'Archivo', sans-serif) !important;
	font-size: clamp(18px, 1.5vw, 21px) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
}
/* Form and quote internals keep their own type. */
.vk-page :is(.forminator-ui, .vk-quotes, .vk-jobs, .vk-recent__card) :is(h2, h4) {
	font-size: revert-layer;
	text-transform: none;
}
/* A section heading and the article listing under it. */
.vk-page .fw-banner__inner > :is(h2, h3, h4) + :is(.vk-recent__grid, .fw-icons, .fw-content-cards) { margin-top: 36px; }
/* The blog index: the listing on the 1200 grid under its hero. */
.vk-page > .vk-archive-grid { width: 95%; max-width: 1200px; margin: clamp(48px, 6vw, 80px) auto 0; }
.vk-page > .vk-hero + .vk-archive-grid ~ .pagination { width: 95%; max-width: 1200px; margin: 48px auto clamp(48px, 6vw, 80px); }

/* =========================================================================
   ONE BUTTON, 10 Nov 2026 (Monica: "make a uniform rule for buttons").
   Before this, buttons were in sentence, title or upper case depending on
   how the old site typed them, sizes ran 14 to 17px, the arrow was a drawn
   chevron on page buttons, a "→" character on form submits and in the card
   and job links, sometimes spaced and sometimes not, and the home
   newsletter submit sat 4px low (14px padding inside a fixed 38px).

   Now every button is the same: upper case, Inter 600 at 15px, 0.08em
   tracking, the label centred both ways, and ONE arrow, a chevron drawn
   with a mask so it is the same shape everywhere, always 10px from the
   word. Text links that act as buttons (Read more, View role) use the same
   case, tracking, arrow and gap at 14px. Actions that do not go anywhere
   (Load more, Choose File) take the case but no arrow.
   ========================================================================= */
:root {
	--vk-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#fw-main :is(.wp-block-button__link, .forminator-button, .ad-form__submit button, .vk-filter__more-btn) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	box-sizing: border-box;
	height: auto !important;
	min-height: 46px;
	padding: 13px 24px !important;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	white-space: normal;
}
/* The one arrow. */
#fw-main :is(.wp-block-button > .wp-block-button__link, .vk-form .forminator-button-submit, .ad-form__submit button)::after,
#fw-main .vk-card__arrow::after,
#fw-main .vk-job__cta::after {
	content: "" !important;
	display: inline-block !important;
	flex: 0 0 auto;
	align-self: center !important;
	width: 7px !important;
	height: 11px !important;
	margin: 0 !important;
	border: 0 !important;
	font-size: 0 !important;
	background: currentColor !important;
	-webkit-mask: var(--vk-chev) center / contain no-repeat;
	mask: var(--vk-chev) center / contain no-repeat;
	transform: none !important;
	transition: transform 0.15s ease;
}
#fw-main :is(.wp-block-button > .wp-block-button__link, .vk-form .forminator-button-submit, .ad-form__submit button):hover::after,
#fw-main .vk-card:hover .vk-card__arrow::after,
#fw-main .vk-job__link:hover .vk-job__cta::after { transform: translateX(3px) !important; }
/* Text links that act as buttons. */
#fw-main :is(.vk-card__more, .vk-job__cta) {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}
/* The card's own "→" glyph gives way to the chevron, in the same gap. */
#fw-main .vk-card__arrow { display: inline-flex !important; margin: 0 !important; font-size: 0 !important; line-height: 0; transform: none !important; }
#fw-main .vk-job__link:hover .vk-job__cta { transform: none; }

/* =========================================================================
   MOBILE SWEEP, 9 Nov 2026 (unattended). Every rule here is inside a
   phone-width query, so the desktop layout cannot move; the desktop layout
   of every page was fingerprinted before and after to prove it.
   ========================================================================= */
@media (max-width: 781px) {

	/* ---- Hero height on a phone (Owen, 10 Nov: "too big on mobile ...
	   supposed to be 64vh"). The desktop height adds 112px of padding to the
	   64vh, which made a phone hero 77% of the screen. Here it is 64% of the
	   SMALL viewport (svh), so iOS Safari's toolbar showing and hiding does
	   not resize it as dvh would, with a floor so a four-line headline still
	   fits on a short or landscape screen. vh first for older browsers. */
	:root {
		--vk-hero-h: 64vh;
		--vk-hero-h: max(64svh, 420px);
		--vk-hero-min: var(--vk-hero-h);
	}

	/* The headline laid over a photographic hero kept no gutter
	   (/medical-solutions/: the H1 sat on the screen edge). */
	.vk-page > .fw-banner--image:first-child + :is(.fw-banner--headline, .fw-banner--title) > .fw-banner__inner {
		width: 100% !important;
		max-width: none !important;
		box-sizing: border-box;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* ---- Cover films (home, Seafarer Human Sustainability) --------------
	   At phone width the film is ~190px tall, so a transparent masthead over
	   it hid the top of it and the home headline sat under the logo.
	   vk-header.js no longer lays the masthead over a film on a phone; the
	   page starts below it as other pages without a hero do. */

	/* Home (Owen, 10 Nov: keep the full hero, as on desktop): the film is
	   cropped to the shared hero height, the masthead sits over it and the
	   headline is laid on its foot, at phone size, like every other hero. */
	.vk-page .fw-banner--statement:has(+ .vk-media-frame) + .vk-media-frame {
		aspect-ratio: auto !important;
		height: var(--vk-hero-h);
	}
	.vk-page .fw-banner--statement:has(+ .vk-media-frame) > .fw-banner__inner {
		top: 0;
		height: var(--vk-hero-h);
		width: 100% !important;
		box-sizing: border-box;
		justify-content: flex-end;
		padding: 110px 16px 40px !important;
	}
	.vk-page .fw-banner--statement:has(+ .vk-media-frame) .wp-block-heading {
		font-size: 26px !important;
		line-height: 1.15 !important;
		max-width: none;
	}
	/* The scrim runs up from the foot, where the words are. */
	.vk-page .fw-banner--statement:has(+ .vk-media-frame) + .vk-media-frame::after {
		background: linear-gradient(0deg, rgba(12, 20, 34, 0.82) 0%, rgba(12, 20, 34, 0.5) 45%, rgba(12, 20, 34, 0.15) 100%);
	}

	/* ---- Article pages: the body ran to the screen edge ---------------- */
	.vk-article__body {
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
	}
	.vk-article__body p,
	.vk-article__body li { font-size: 16px; line-height: 1.65; }

	/* ---- Forms: one field per row ------------------------------------- */
	.vk-page .vk-form form.forminator-custom-form .forminator-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.vk-page .vk-form form.forminator-custom-form .forminator-row + .forminator-row { margin-top: 16px; }
	/* 16px inputs stop iOS zooming the page on focus. */
	.vk-page .vk-form form.forminator-custom-form :is(input, select, textarea, .select2-selection__rendered) { font-size: 16px !important; }
	.vk-page .vk-form form.forminator-custom-form .forminator-button-submit { width: 100%; min-height: 48px; }

	/* ---- Headings tracked out by the old site ("Q U A L I F I C A T I O N",
	   "OUR MISSION & VISION", "JOIN ONE OF OUR ESTEEMED CLIENTS") ran off the
	   screen. Tracking is held to a hair on a phone. */
	.vk-page :is(h1, h2, h3, h4, h5, h6)[class*="vk-track--"],
	.vk-page .fw-banner--headline .wp-block-heading,
	.vk-page .fw-banner--title .wp-block-heading {
		letter-spacing: 0.01em !important;
		overflow-wrap: anywhere;
	}
	.vk-page :is(h3, h5)[class*="fw-type--"] { font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.2 !important; }

	/* ---- Readable text: nothing in the body under 15px ------------------ */
	.vk-page :is(p, li)[class*="fw-text--1"]:not(.vk-listing__eyebrow) { font-size: 15px !important; line-height: 1.6 !important; }
	.vk-page .vk-text--justify,
	.vk-page .has-text-align-justify { text-align: left !important; }

	/* ---- Tap targets ---------------------------------------------------- */
	.vk-page .wp-block-button__link { min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; }
	.vk-quotes__dot { position: relative; }
	.vk-quotes__dot::after { content: ""; position: absolute; inset: -16px -5px; }

	/* ---- Side gutters: every band's inner keeps 16px off the edge -------- */
	.vk-page .fw-banner__inner { box-sizing: border-box; }
	.vk-page > .fw-banner:not(.fw-banner--image) > .fw-banner__inner { width: 100% !important; max-width: none !important; padding-left: 16px; padding-right: 16px; }

	/* Tabs share the width rather than running past it. */
	.vk-page .vk-tabs__list { width: 100%; }
	.vk-page .vk-tabs__list > .vk-tabs__tab { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; letter-spacing: 0.06em; }
	/* The job listing sits inside the gutter, not on top of it. */
	.vk-page .fw-content-cards__inner--jobs { box-sizing: border-box; width: auto !important; padding-left: 0; padding-right: 0; }

	/* ---- The masthead on a phone: 106px tall (a 73px logo in a 93px
	   minimum) took a third of every film and covered the top of pages
	   without a photograph. 64px, with the page offset to match. */
	.fw-header__inner { min-height: 64px !important; padding-top: 0 !important; padding-bottom: 0 !important; align-items: center; }
	.fw-header .custom-logo { max-height: 44px !important; width: auto; }
	.fw-header .fw-header__inner { align-items: center !important; }
	.fw-header .fw-menu-btn { height: 44px !important; min-height: 44px; padding-top: 0 !important; padding-bottom: 0 !important; align-self: center; }
	body:not(:has(.vk-head--over)) { padding-top: 64px !important; }

	/* ---- The open menu over a photograph: the header turns solid, as it
	   does once the page scrolls, so the menu is never type on a picture. */
	.fw-header:has(.fw-header__nav.is-open) {
		background: #fff !important;
		box-shadow: 0 6px 24px rgba(20, 30, 50, 0.12);
		backdrop-filter: none !important;
	}
	.fw-header:has(.fw-header__nav.is-open) .fw-header__nav .fw-nav a,
	.fw-header:has(.fw-header__nav.is-open) .fw-menu-btn { color: #2a2c37 !important; }
	.fw-header:has(.fw-header__nav.is-open) .fw-header__nav .fw-nav > li:last-child > a { background: #2a2c37 !important; color: #fff !important; }
	.fw-header:has(.fw-header__nav.is-open) .fw-header__nav .fw-nav > li > a::before { background: #2a2c37 !important; }

	.fw-header.vk-head--over:not(.vk-head--stuck):not(:has(.fw-header__nav.is-open)) .fw-menu-btn { color: #fff !important; }

	/* ---- A band whose copy sits beside a picture painted into its own
	   background (OneHealth: the phones, --fw-banner-inner-l/-w). On a phone
	   there is no room beside it: the picture becomes a strip above the copy
	   and the copy takes the full width. */
	.vk-page .fw-banner[style*="--fw-banner-inner-l"] {
		background-size: auto 260px !important;
		background-position: left 24px !important;
		background-repeat: no-repeat !important;
		padding-top: 300px !important;
	}
	.vk-page .fw-banner[style*="--fw-banner-inner-l"] > .fw-banner__inner { margin-left: 0 !important; margin-right: 0 !important; }
	.vk-page .fw-banner[style*="--fw-banner-inner-l"] .fw-icons__grid { grid-template-columns: minmax(0, 1fr) !important; }

	/* ---- Home: the notice strip sits under the film, not over its foot */
	.vk-page .vk-notice { margin-top: 0 !important; }
}