/* VIKAND — the design layer for the framework blocks this site uses.
 *
 * The framework's own block stylesheets are structure only: they lay a block
 * out and expose --fw-* tokens that default to zero, deliberately asserting no
 * design. The design belongs to the build, and for this build the design is
 * the existing site, so every value here was measured off vikand.com at
 * 1440px rather than chosen.
 *
 * That is also why the numbers are not round. 30.852px and -1.07982px are what
 * the source actually renders; rounding them to 31px and -1px is a redesign,
 * and this rebuild is not a redesign. Where a value looks like a typo, it is a
 * measurement — the comment above it says where from.
 */

/* ==========================================================================
   framework/content-cards — the service card grid
   Measured: /medical-solutions/ band 4.
   Section is full-bleed with 45px of vertical padding; the content column is
   1200px; cards are 388px wide with an 18px gutter, so three fill the row
   exactly (388*3 + 18*2 = 1200) and a fourth wraps and centres.
   ========================================================================== */
.fw-content-cards {
	padding: 45px 0;
}
.fw-content-cards__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	/* Centring is what puts a lone fourth card in the middle of its own row
	   rather than under the first column. A grid cannot do that, which is why
	   this block and not framework/icon-cards. */
	justify-content: center;
	column-gap: var(--fw-card-colgap, 18px);
	row-gap: 54px;
}
/* Every value below is a fallback. The row carries its own measurements as
   custom properties, because the same block renders the service cards — 300px
   squares over centred 31px titles — and the article row, a 369x162 picture
   over an 18px title ranged left. Fixing either shape in the stylesheet made
   the other wrong on every page that used it. */
.fw-content-card {
	/* Never wider than the row can hold. The measured widths are rounded to the
	   pixel, so two 600px cards plus a gap came to one pixel over a 1200px row
	   and the second wrapped onto its own line — 1,265px of extra page. The
	   measured width is the target; the row's own arithmetic is the ceiling. */
	--fw-card-fit: calc((100% - (var(--fw-card-n, 3) - 1) * var(--fw-card-colgap, 18px)) / var(--fw-card-n, 3));
	flex: 0 1 min(var(--fw-card-w, 100%), var(--fw-card-fit));
	max-width: min(var(--fw-card-w, 100%), var(--fw-card-fit));
	display: flex;
	flex-direction: column;
	align-items: var(--fw-card-items, center);
	text-align: var(--fw-card-title-align, center);
}
.fw-content-card__body {
	display: flex;
	flex-direction: column;
	align-items: var(--fw-card-items, center);
	width: 100%;
}

.fw-content-cards .fw-content-card .wp-block-image {
	margin: 0 0 var(--fw-card-img-gap, 46.278px);
	width: var(--fw-card-img-w, 300px);
	max-width: 100%;
}
.fw-content-cards .fw-content-card .wp-block-image img {
	display: block;
	width: var(--fw-card-img-w, 300px);
	height: var(--fw-card-img-h, 300px);
	max-width: 100%;
	object-fit: cover;
	/* The design rounds the step pictures into circles. */
	border-radius: var(--fw-card-img-radius, 0);
}

/* Title. The letter-spacing really is negative here. */
.fw-content-cards .fw-content-card :is(h2, h3, h4, h5, h6) {
	margin: 0 0 var(--fw-card-title-gap, 15.426px);
	font-weight: var(--fw-card-title-weight, 700);
	text-align: var(--fw-card-title-align, center);
}
/* Same reasoning as the body copy: a default, not an override. */
:where(.fw-content-cards .fw-content-card) :is(h2, h3, h4, h5, h6) {
	font-size: var(--fw-card-title-size, 30.852px);
	line-height: var(--fw-card-title-lead, 43.1928px);
	letter-spacing: var(--fw-card-title-track, -1.07982px);
}

/* The body copy is measured in its own right: the service cards set a 24px
   title over 14px copy, and giving the paragraph the title's size ran every
   card to nine lines. */
/* `:where` on the type, deliberately. The card's measured metrics are a
   DEFAULT for copy that has no measurement of its own; a paragraph that
   carries a measured scale class knows better. Written as a plain descendant
   selector this rule outranked `fw-text--18` and set the whole process band
   in 22px on 30 where live is 18px on 32.4 — the paragraph's own class was
   published correctly and then silently overruled. */
.fw-content-cards .fw-content-card p {
	margin: 0;
	/* The copy is inset from its own column: 348px of text in a 388px card. */
	width: var(--fw-card-body-w, 100%);
	max-width: 100%;
	text-align: var(--fw-card-title-align, center);
	color: var(--fw-card-body-colour, inherit);
}
:where(.fw-content-cards .fw-content-card) p {
	font-size: var(--fw-card-body-size, 14px);
	line-height: var(--fw-card-body-lead, 19.6px);
}

/* Colour comes from the band, not from the block. */
.fw-content-cards--light .fw-content-card,
.fw-content-cards--light .fw-content-card :is(h2, h3, h4, h5, h6),
.fw-content-cards--light .fw-content-card p { color: #fff; }
.fw-content-cards--dark .fw-content-card :is(h2, h3, h4, h5, h6) { color: var(--fw-primary); }
.fw-content-cards--dark .fw-content-card p { color: #808080; }
.fw-content-cards--ink .fw-content-card,
.fw-content-cards--ink .fw-content-card :is(h2, h3, h4, h5, h6),
.fw-content-cards--ink .fw-content-card p { color: #000; }

/* Button: a flat dark rectangle, no radius, and the padding is asymmetric
   top to bottom on live. */
.fw-content-cards .fw-content-card .wp-block-buttons {
	margin: 0;
	justify-content: center;
}
.fw-content-cards .fw-content-card .wp-block-button__link {
	background: var(--fw-primary);
	color: #fff;
	font-size: 16px;
	line-height: 20.8px;
	font-weight: 400;
	letter-spacing: normal;
	padding: 9.008px 18px 13.008px;
	border-radius: 0;
	text-decoration: none;
}
.fw-content-cards .fw-content-card .wp-block-button__link:hover {
	background: var(--fw-secondary);
}

@media (max-width: 1239px) {
	.fw-content-cards__inner { padding: 0 20px; }
	.fw-content-card {
		flex-basis: calc((100% - 18px) / 2);
		max-width: calc((100% - 18px) / 2);
	}
}
@media (max-width: 767px) {
	.fw-content-card { flex-basis: 100%; max-width: 100%; }
}

/* ==========================================================================
   framework/banner — body copy inside a band
   Measured: /medical-solutions/ band 3, the prose band under the statement.
   Live sets body copy to 18px on a 25.2px leading (1.4) rather than the 1.8
   the base type uses, and greys it to #808080 on a pale band. Leaving it at
   the base leading turns a three line paragraph into four and pushes every
   band below it down.
   ========================================================================== */
/* No blanket line-height here. Body copy carries its scale class, and a rule
   on `.fw-banner__inner p` outranks it — which forced 14px text onto an 18px
   leading and made every job page hundreds of pixels tall. Colour is a band
   property and stays. */
.fw-banner--dark .fw-banner__inner p { color: #808080; }
.fw-banner--light .fw-banner__inner p { color: #fff; }

/* ==========================================================================
   The heading scale
   Measured across /american-dynasty/, /medical-solutions/ and the home page.

   Two things were being conflated. A band that is a statement gets an
   uppercase treatment with positive tracking, and that lives on the banner
   block. Ordinary headings are steps on a modular scale with NEGATIVE
   tracking and no transform — and forcing the band's treatment onto them
   turned "A confirmation will be sent to you" into a shout on 19 pages.

   Tracking is -0.035em at every step, which is why these look like odd
   numbers: 51.426 x -0.035 = -1.79991, and 14 x -0.035 = -0.49.
   ========================================================================== */
.fw-type--xl,
.fw-type--lg,
.fw-type--md,
.fw-type--sm,
.fw-type--xs {
	font-weight: 700;
	letter-spacing: -0.035em;
	text-transform: none;
	/* No margin. The space under a heading is laid out explicitly from the
	   source's geometry, because it is not a constant: 54px under a 51px title
	   and 15px under a 31px one. A margin here would add to that. */
	margin: 0;
}
/* The steps are ratios of a root that changes with the viewport, which is how
   the design actually behaves — measured at six widths on /american-dynasty/:

       <=  979px   root 16px    the top step renders 45.712px
        >= 980px   root 17px                        48.569px
        >= 1200px  root 18px                        51.426px

   45.712/16, 48.569/17 and 51.426/18 are all 2.857. The whole scale is
   root-relative, which is also why a single -0.035em tracking is right at every
   size. Fixed pixel steps with invented mobile breakpoints had the headings
   a quarter too small on a phone.

   Deliberately a custom property rather than `html { font-size }`: theme.json
   sizes are in rem, and moving the root would drag all of those with it. */
:root { --vk-root: 16px; --vk-scale: 0.8889; }
@media (min-width: 980px)  { :root { --vk-root: 17px; --vk-scale: 0.9444; } }
@media (min-width: 1200px) { :root { --vk-root: 18px; --vk-scale: 1; } }

.fw-type--xl { font-size: calc(var(--vk-root) * 2.857); line-height: 1.2; }
.fw-type--lg { font-size: calc(var(--vk-root) * 2.285); line-height: 1.2; }
.fw-type--md { font-size: calc(var(--vk-root) * 1.714); line-height: 1.4; }
.fw-type--sm { font-size: calc(var(--vk-root) * 1.372); line-height: 1.4; }
.fw-type--xs { font-size: var(--vk-root);               line-height: 1.4; }

/* Alignment stays with core's has-text-align-* classes. An earlier version of
   this file set `text-align: inherit` on scaled headings, which outranked
   those classes and left every centred heading on the site aligned left. */

/* ==========================================================================
   Spacing inside a band is explicit
   The composer lays out the space between one element and the next from the
   source's own geometry, because the design's rhythm is not a constant. Those
   measurements already include whatever margins the source used, so the
   elements here must carry none of their own — with both, a page of body copy
   came out 4,000px taller than the design.
   ========================================================================== */
.fw-banner__inner > p,
.fw-banner__inner > ul,
.fw-banner__inner > ol,
.fw-banner__inner > figure,
.fw-banner__inner > blockquote,
.fw-banner__inner > .wp-block-buttons,
.fw-banner__inner > .wp-block-image {
	margin: 0;
}

/* ==========================================================================
   The body scale
   Measured: /medical-solutions/ (18px/25.2px grey) and /privacy-notice/
   (14px/19.6px black). Body copy is not one size on this site, and a single
   rule made the legal pages 1,600px too tall.

   Leading is 1.4 at every step, and the tone is the band's, not the
   paragraph's — so colour stays on the band and only the size is a class.
   ========================================================================== */


/* The three tones body copy is set in. `ink` is the near-black the legal and
   long-form pages use; `dark` is the grey of the marketing pages. */
.fw-banner--ink .fw-banner__inner,
.fw-banner--ink .fw-banner__inner p,
.fw-banner--ink .fw-banner__inner li { color: #000; }
.fw-banner--ink .fw-banner__inner :is(h1, h2, h3, h4, h5, h6) { color: #000; }
/* A list that carries its own measured colour keeps it: the tone rules above
   set every item's colour directly, so the item has to defer to its list. */
.vk-page .fw-banner .wp-block-list[class*="vk-text--"] > li { color: inherit; }

/* ==========================================================================
   core/columns
   The theme dequeues core's block stylesheet, so the layout core would
   normally supply has to be restored here. Without it a two column band
   stacks and the page comes out twice as tall as the design.
   ========================================================================== */
.wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--vk-columns-gap, 40px);
	margin: 0;
}
.wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	word-break: break-word;
}
.wp-block-column > :first-child { margin-top: 0; }
.wp-block-column > :last-child { margin-bottom: 0; }

@media (max-width: 781px) {
	.wp-block-columns { flex-wrap: wrap; }
	.wp-block-column { flex-basis: 100% !important; }
}

/* Lists take the body scale too, on the list and on its items. A table of
   contents set at the base leading instead of the measured one came out 7px
   taller per row. */
/* Body copy is on the same root-relative scale as the headings, so it steps
   with the viewport the way the design does rather than staying at its desktop
   size on a phone. */
.fw-text--sm, .fw-text--sm li { font-size: calc(var(--vk-root) * 0.778); }
.fw-text--md, .fw-text--md li { font-size: var(--vk-root); }
.fw-text--lg, .fw-text--lg li { font-size: calc(var(--vk-root) * 1.167); }

/* Leading is its own axis. The marketing pages set body copy on 1.4 and the
   long-form pages on 1.8; one value for both turned three-line paragraphs into
   two across half the site. */
.fw-text--sm, .fw-text--md, .fw-text--lg,
.fw-text--sm li, .fw-text--md li, .fw-text--lg li { line-height: 1.4; }
/* Seven measured steps, not two. Live sets body copy on all of these, and with
   only 1.4 and 1.8 available every 1.65 line snapped to 1.8 — 2.7px a line.
   The two original names are kept because content published before the scale
   existed still carries them. */
.fw-lead--tight, .fw-lead--tight li { line-height: 1.4; }
.fw-lead--loose, .fw-lead--loose li { line-height: 1.8; }
.fw-lead--100, .fw-lead--100 li { line-height: 1; }
.fw-lead--130, .fw-lead--130 li { line-height: 1.3; }
.fw-lead--140, .fw-lead--140 li { line-height: 1.4; }
.fw-lead--150, .fw-lead--150 li { line-height: 1.5; }
.fw-lead--154, .fw-lead--154 li { line-height: 1.538; }
.fw-lead--165, .fw-lead--165 li { line-height: 1.65; }
.fw-lead--180, .fw-lead--180 li { line-height: 1.8; }
.fw-banner__inner > ul,
.fw-banner__inner > ol { padding-left: 30px; }

/* ==========================================================================
   framework/split — two panes side by side
   Measured: /mental-health-solutions/ bands 3 and 4. Two 585px panes with a
   30px gutter inside the 1200 column, top aligned. The starter ships this
   block with its inner max-width defaulting to 0, so without these values the
   panes collapsed to about 90px and the page ran to 6,472px against live's
   4,688.
   ========================================================================== */
.fw-split {
	/* The band around it carries the colour and the air. */
	padding: 0;
	background: transparent;
}
.fw-split__inner {
	max-width: 1200px;
	margin: 0 auto;
	gap: 30px;
	align-items: start;
}
.fw-split__media img {
	display: block;
	width: 100%;
	height: auto;
}
/* The copy centred on its picture, where the design does that. */
.fw-split__content--center { align-self: center; }
/* The chevron runs past the pane by design; the band clips it instead. */
.fw-split__media.vk-decor--chevron { overflow: visible; }
.fw-split__content > :first-child { margin-top: 0; }
.fw-split__content > :last-child { margin-bottom: 0; }

@media (max-width: 768px) {
	.fw-split__inner { gap: 20px; }
}

/* ==========================================================================
   framework/icon-cards — the icon row
   Measured: /onehealth-by-vikand/ band 2. Five 192px columns on a 242px pitch
   inside the 1200 column, icons 80x80 centred, captions 20px/30px grey 20px
   below. This is a different component from framework/content-cards, whose
   images are 300x300 — routing an icon row through that made every icon a
   200px block and the page 2,262px too long.
   ========================================================================== */
.fw-icons {
	padding: 0;
}
.fw-icons__grid {
	max-width: 1200px;
	margin: 0 auto;
	justify-content: center;
	column-gap: 50px;
	row-gap: 50px;
}
.fw-icon-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
/* The starter positions the icon absolutely over a card, at a size that
   defaults to zero — so the icons rendered 0px wide and the row showed
   captions with nothing above them. Here the icon sits in normal flow. */
/* The size the design draws the icon at, measured. Fixed at 80px, the twelve
   service icons on the outsourced-management page came out two thirds of
   live's 120 — and the inline benefit icons, which are 48, were half again too
   big. 80 stays as the fallback for a card with no measurement. */
.fw-icons .fw-icon-card__icon {
	position: static;
	top: auto;
	left: auto;
	--fw-icon-card-icon-width: var(--fw-icon-w, 80px);
	--fw-icon-card-icon-height: var(--fw-icon-h, var(--fw-icon-w, 80px));
	width: var(--fw-icon-w, 80px);
	height: var(--fw-icon-h, var(--fw-icon-w, 80px));
}
.fw-icons .fw-icon-card__icon img {
	display: block;
	width: var(--fw-icon-w, 80px);
	height: var(--fw-icon-h, var(--fw-icon-w, 80px));
	object-fit: contain;
}
.fw-icon-card__body {
	margin-top: 20px;
}
.fw-icon-card__body p {
	margin: 0;
	color: #808080;
	text-align: center;
}
:where(.fw-icon-card__body) p {
	font-size: 20px;
	line-height: 30px;
}

@media (max-width: 979px) {
	.fw-icons__grid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* One column below 768, as live stacks them: the ten OneHealth service icons
   and the benefit rows run one under another on a phone. */
@media (max-width: 767px) {
	.fw-icons__grid { grid-template-columns: minmax(0, 1fr) !important; max-width: none !important; }
}

/* ==========================================================================
   Text colours, measured.

   A band's tone sets the colour for everything in it, which is right until one
   band holds two. The intro on Mental Health Solutions sets its first
   paragraph black and its second in the accent blue; the tone can only say
   one, so the line that differs carries its own class. Specificity has to
   clear the tone rules on .fw-banner and .fw-content-cards, which are (0,2,0).
   ========================================================================== */
.vk-page .fw-banner .vk-text--ink,
.vk-page .vk-text--ink,
.editor-styles-wrapper .fw-banner .vk-text--ink,
.editor-styles-wrapper .vk-text--ink { color: #000; }
.vk-page .fw-banner .vk-text--white,
.vk-page .vk-text--white,
.editor-styles-wrapper .fw-banner .vk-text--white,
.editor-styles-wrapper .vk-text--white { color: #fff; }
.vk-page .fw-banner .vk-text--muted,
.vk-page .vk-text--muted,
.editor-styles-wrapper .fw-banner .vk-text--muted,
.editor-styles-wrapper .vk-text--muted { color: #808080; }
.vk-page .fw-banner .vk-text--accent,
.vk-page .vk-text--accent,
.editor-styles-wrapper .fw-banner .vk-text--accent,
.editor-styles-wrapper .vk-text--accent { color: #88a6c3; }
.vk-page .fw-banner .vk-text--primary,
.vk-page .vk-text--primary,
.editor-styles-wrapper .fw-banner .vk-text--primary,
.editor-styles-wrapper .vk-text--primary { color: #2a3b5a; }

/* The split's media pane is a 3:2 placeholder in the framework, which is right
   for an empty pane and wrong for a real photograph: on the Maritime Assistance
   band it padded a 585x328 picture into a 390px box, dropping the image 31px
   and making the band 62px too deep. When the pane holds a picture, the
   picture IS the pane. */
.fw-split__media:has(img) {
	aspect-ratio: auto;
	background: none;
}
.fw-split__media > img { display: block; }

/* A picture the design sizes rather than letting it fill its pane. */
.fw-split__media[style*="--fw-split-img-w"] {
	justify-content: var(--fw-split-img-align, center);
}
.fw-split__media[style*="--fw-split-img-w"] > img {
	width: var(--fw-split-img-w);
	max-width: 100%;
	height: auto;
}

/* A band that IS a photograph keeps the picture's shape rather than a height
   measured at one viewport.

   CORRECTION 2026-09-11: the ratio was on the MEDIA, and the media had since
   been taken out of the flow (position:absolute; inset:0, over in the banner
   block's own stylesheet) so the picture could cover the band's padding. An
   absolutely positioned box with inset:0 AND an aspect-ratio is
   over-constrained -- the ratio wins and `bottom` is ignored -- so the
   picture's height became width/ratio while the band's stayed locked to
   minHeight + padding. Those two agree at exactly one viewport width.
   Measured on /shoresidejobs/: at 1920 the picture was 794 in a 690 band, so
   it overflowed and nothing showed; at 1440 it was 594 in the same 690 band,
   leaving 51px of the band's white background under the hero, and 82px at
   1366. The white gap was there all along and only visible below about 1900.

   Live drives the band's height FROM the picture's shape rather than the
   picture's height from a measured number: its section is 45 + 794 + 45 = 884
   at 1920 and 45 + 594 + 45 = 684 at 1440, the picture being width/2.4 in
   both. So the ratio belongs to the band, and the picture goes back to simply
   covering whatever box the band turns out to be -- which is what
   `background-size: cover` is for.

   A strut carries the ratio rather than `aspect-ratio` on the section itself,
   because the section is border-box: a ratio there would describe the padding
   box and come out 90px short, and switching its box-sizing to fix that would
   reach the horizontal axis too. The strut sizes the CONTENT box, which is
   exactly the 794 live puts between its 45s. `min-height` has to go with it --
   left at the measured 600 it would outvote the ratio below 1440 and put the
   gap straight back. */
.fw-banner--image[style*="--fw-banner-ratio"] {
	min-height: 0;
}
.fw-banner--image[style*="--fw-banner-ratio"]::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: var(--fw-banner-ratio);
}
.fw-banner--image[style*="--fw-banner-ratio"] .fw-banner__media {
	aspect-ratio: auto;
	height: auto;
}

/* ==========================================================================
   Buttons, measured off live.

   The site uses a small set, not one shape: a 16px button on 9/18/13 padding
   in the dark tone, a smaller 14px one on the home announcement, an accent
   one, and — on the vessel chooser — one that fills its column, which is why
   that pair is 264px wide and not the 96 its label needs.
   ========================================================================== */
.vk-page .wp-block-button__link {
	background: var(--fw-primary);
	color: #fff;
	/* Measured where the source gives one. Two fixed sizes — 16 and a small
	   14 — could not express live's 18px "CONTACT US", which published two
	   points small on a shorter line. */
	font-size: 16px;
	line-height: 20.8px;
	font-weight: 400;
	letter-spacing: normal;
	padding: 9.008px 18px 13.008px;
	border-radius: 0;
	text-decoration: none;
}
/* The modifier lives on the wrapper, because that is where core/button puts
   className and the saved markup has to match what its save() produces. */
.vk-page .wp-block-button.vk-btn--sm > .wp-block-button__link {
	font-size: 14px;
	line-height: 19.6px;
	padding: 6.006px 16.002px 9.002px;
}
/* The class is only written when the source measured #88a6c3, so that is the
   colour — --fw-secondary is the navy (#2a3b5a) and painted every accent
   button on the site dark. */
.vk-page .wp-block-button.vk-btn--accent > .wp-block-button__link { background: #88a6c3; }
.vk-page .wp-block-button.vk-btn--round > .wp-block-button__link { border-radius: 3.6px; }
/* Live's smallest button (x-btn-mini): the job links on /shipboardjobs/ are
   13px on a 16.9px line with 5/12/7 padding, which lands them 31px tall.
   Separate from vk-btn--sm, which is live's 14px x-btn-small and correct where
   it is used -- the home page's own button measures 14px against live.
   (Lisa, 11 Sep; the rule had dropped out of the stylesheet between her
   backups 8 and 9 while page 74 still carries the class.) */
.vk-page .wp-block-button.vk-btn--mini > .wp-block-button__link {
	font-size: 13px;
	line-height: 16.9px;
	padding: 5.005px 11.999px 6.994px;
}
.vk-page .wp-block-button.vk-btn--fill { width: 100%; }
/* Case and tracking are the design's too. The OneHealth hero's button is
   BOOK A DEMO on -0.63px; typed "Book a Demo" on normal tracking it was 9px
   narrower and lower-case. The tracking classes mirror vk-track--N in tenths
   of a pixel, on the wrapper because that is where core puts className. */
.vk-page .wp-block-button.vk-btn--caps > .wp-block-button__link { text-transform: uppercase; }
.vk-page .wp-block-button.vk-btn-track--n4 > .wp-block-button__link { letter-spacing: -0.42px; }
.vk-page .wp-block-button.vk-btn-track--n5 > .wp-block-button__link { letter-spacing: -0.49px; }
.vk-page .wp-block-button.vk-btn-track--n6 > .wp-block-button__link { letter-spacing: -0.63px; }
.vk-page .wp-block-button.vk-btn-track--n7 > .wp-block-button__link { letter-spacing: -0.7px; }
.vk-page .wp-block-button.vk-btn-track--n9 > .wp-block-button__link { letter-spacing: -0.94px; }
.vk-page .wp-block-button.vk-btn-track--n10 > .wp-block-button__link { letter-spacing: -1px; }
.vk-page .wp-block-button.vk-btn-track--5 > .wp-block-button__link { letter-spacing: 0.5px; }
.vk-page .wp-block-button.vk-btn-track--10 > .wp-block-button__link { letter-spacing: 1px; }
.vk-page .wp-block-button.vk-btn-track--20 > .wp-block-button__link { letter-spacing: 2px; }
.vk-page .wp-block-button.vk-btn--fill > .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* A band that holds its copy to one side of its photograph. The shares are of
   the content column — 95% up to 1200px, the same measure .fw-banner__inner
   uses — because that is what the design lays out in; a share of the band
   itself grew past the column on a wide screen (861px against live's 647 at
   1920). The column's own left edge is added back so the box sits where it
   does in the column. */
.fw-banner[style*="--fw-banner-inner-w"] > .fw-banner__inner {
	box-sizing: border-box;
	width: calc(min(1200px, 95%) * var(--fw-banner-inner-w) / 100);
	max-width: none;
	margin-left: calc((100% - min(1200px, 95%)) / 2 + min(1200px, 95%) * var(--fw-banner-inner-l) / 100);
	margin-right: 0;
}
/* …and the whole column again once the design stacks (the photograph the
   copy sat beside is under it, or gone). */
@media (max-width: 767px) {
	.fw-banner[style*="--fw-banner-inner-w"] > .fw-banner__inner {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* A band treatment's tracking is a default; the measured value wins. */
.fw-banner[style*="--fw-banner-track"] .fw-banner__inner :is(h1, h2, h3, h4, h5, h6) {
	/* Measured on a desktop; the design scales it with the root (8.23 → 7.31
	   on a phone), so it rides --vk-scale like the type steps. */
	letter-spacing: calc(var(--fw-banner-track) * var(--vk-scale, 1));
}

/* …and its line height, which is what sets the air under the heading. */
.fw-banner[style*="--fw-banner-lead"] .fw-banner__inner :is(h1, h2, h3, h4, h5, h6) {
	line-height: calc(var(--fw-banner-lead) * var(--vk-scale, 1));
}

/* ==========================================================================
   The type scale, surveyed across all 76 pages rather than assumed.

   The first cut of this had five heading steps and one blanket -0.035em of
   tracking. The site actually uses eight, and the tracking is not a constant:
   27px — the third most common heading on the site, 53 of them — had no step at
   all, so every one snapped to 24.7px and took the -1.08px tracking of a step it
   does not belong to. Each step here carries the size, leading and tracking
   measured off live. The sizes are fixed pixels: live renders them the same at
   1440 and at 1920.
   ========================================================================== */
/* The measured steps, on the root scale. Live sets its headings, its 18px
   body and its tracking in em on a root that is 18px from 1200, 17 from 980
   and 16 below (Cornerstone's own breakpoints, which --vk-root already
   follows): every heading on a phone is exactly 0.889 of its desktop size
   (41.13 → 36.56, 30.85 → 27.42, 18 → 16, measured on /medical-solutions/)
   while 14px copy, set in px, stays 14. The fractions below are the desktop
   pixel measures over 18, so at 1200+ they are the measured pixels exactly.
   Editor: the canvas is an iframe, so its own width picks the root. */
.vk-page .fw-type--72 { font-size: calc(var(--vk-root) * 4.0000); line-height: calc(var(--vk-root) * 4.3889); letter-spacing: calc(var(--vk-root) * -0.1400); }
.vk-page .fw-type--51 { font-size: calc(var(--vk-root) * 2.8333); line-height: calc(var(--vk-root) * 3.4444); letter-spacing: calc(var(--vk-root) * -0.1000); }
.vk-page .fw-type--50 { font-size: calc(var(--vk-root) * 2.7778); line-height: calc(var(--vk-root) * 3.8889); letter-spacing: normal; }
.vk-page .fw-type--41 { font-size: calc(var(--vk-root) * 2.2778); line-height: calc(var(--vk-root) * 2.9444); letter-spacing: calc(var(--vk-root) * 0.4572); }
.vk-page .fw-type--36 { font-size: calc(var(--vk-root) * 2.0000); line-height: calc(var(--vk-root) * 2.7778); letter-spacing: normal; }
.vk-page .fw-type--33 { font-size: calc(var(--vk-root) * 1.8333); line-height: calc(var(--vk-root) * 2.0000); letter-spacing: calc(var(--vk-root) * -0.0639); }
.vk-page .fw-type--31 { font-size: calc(var(--vk-root) * 1.7222); line-height: calc(var(--vk-root) * 2.3889); letter-spacing: calc(var(--vk-root) * -0.0600); }
.vk-page .fw-type--30 { font-size: calc(var(--vk-root) * 1.6667); line-height: calc(var(--vk-root) * 2.3333); letter-spacing: normal; }
.vk-page .fw-type--29 { font-size: calc(var(--vk-root) * 1.6111); line-height: calc(var(--vk-root) * 2.2222); letter-spacing: normal; }
.vk-page .fw-type--27 { font-size: calc(var(--vk-root) * 1.5000); line-height: calc(var(--vk-root) * 2.1111); letter-spacing: calc(var(--vk-root) * -0.0522); }
.vk-page .fw-type--25 { font-size: calc(var(--vk-root) * 1.3889); line-height: calc(var(--vk-root) * 1.9444); letter-spacing: normal; }
.vk-page .fw-type--24 { font-size: calc(var(--vk-root) * 1.3333); line-height: calc(var(--vk-root) * 1.8889); letter-spacing: normal; }
.vk-page .fw-type--22 { font-size: calc(var(--vk-root) * 1.2222); line-height: calc(var(--vk-root) * 1.6667); letter-spacing: normal; }
.vk-page .fw-type--18 { font-size: calc(var(--vk-root) * 1.0000); line-height: calc(var(--vk-root) * 1.3889); letter-spacing: calc(var(--vk-root) * -0.0350); }
.vk-page .fw-text--12 { font-size: 12px; }
.vk-page .fw-text--14 { font-size: 14px; }
.vk-page .fw-text--16 { font-size: 16px; }
.vk-page .fw-text--18 { font-size: var(--vk-root); }
.vk-page .fw-text--20 { font-size: calc(var(--vk-root) * 1.1111); }
.editor-styles-wrapper .fw-type--72 { font-size: 72px; line-height: 79px; letter-spacing: -2.52px; }
.editor-styles-wrapper .fw-type--51 { font-size: 51px; line-height: 62px; letter-spacing: -1.8px; }
.editor-styles-wrapper .fw-type--50 { font-size: 50px; line-height: 70px; letter-spacing: normal; }
.editor-styles-wrapper .fw-type--41 { font-size: 41px; line-height: 53px; letter-spacing: 8.23px; }
.editor-styles-wrapper .fw-type--36 { font-size: 36px; line-height: 50px; letter-spacing: normal; }
.editor-styles-wrapper .fw-type--33 { font-size: 33px; line-height: 36px; letter-spacing: -1.15px; }
.editor-styles-wrapper .fw-type--31 { font-size: 31px; line-height: 43px; letter-spacing: -1.08px; }
.editor-styles-wrapper .fw-type--30 { font-size: 30px; line-height: 42px; letter-spacing: normal; }
.editor-styles-wrapper .fw-type--29 { font-size: 29px; line-height: 40px; letter-spacing: normal; }
.editor-styles-wrapper .fw-type--27 { font-size: 27px; line-height: 38px; letter-spacing: -0.94px; }
.editor-styles-wrapper .fw-type--25 { font-size: 25px; line-height: 35px; letter-spacing: normal; }
.editor-styles-wrapper .fw-type--24 { font-size: 24px; line-height: 34px; letter-spacing: normal; }
.editor-styles-wrapper .fw-type--22 { font-size: 22px; line-height: 30px; letter-spacing: normal; }
.editor-styles-wrapper .fw-type--18 { font-size: 18px; line-height: 25px; letter-spacing: -0.63px; }
.editor-styles-wrapper .fw-text--12 { font-size: 12px; }
.editor-styles-wrapper .fw-text--14 { font-size: 14px; }
.editor-styles-wrapper .fw-text--16 { font-size: 16px; }
.editor-styles-wrapper .fw-text--18 { font-size: 18px; }
.editor-styles-wrapper .fw-text--20 { font-size: 20px; }

/* An accordion row's title takes its own measured colour too. */
.vk-page .vk-acc-item.vk-text--accent > summary,
.editor-styles-wrapper .vk-acc-item.vk-text--accent > summary { color: #88a6c3; }
.vk-page .vk-acc-item.vk-text--ink > summary,
.editor-styles-wrapper .vk-acc-item.vk-text--ink > summary { color: #000; }
.vk-page .vk-acc-item.vk-text--muted > summary,
.editor-styles-wrapper .vk-acc-item.vk-text--muted > summary { color: #808080; }
.vk-page .vk-acc-item.vk-text--primary > summary,
.editor-styles-wrapper .vk-acc-item.vk-text--primary > summary { color: #2a3b5a; }
.vk-page .vk-acc-item.vk-text--white > summary,
.editor-styles-wrapper .vk-acc-item.vk-text--white > summary { color: #fff; }

/* A heading the design sets across the whole band rather than the content
   column. The Pyure hero title fits one line on live; held to 1200px it broke
   onto two and pushed the band 60px taller. */
.fw-banner--wide-head .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6) {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* A picture the design lays over a background film. The Seafarer Declaration
   hero is a full-bleed video with a panel on top carrying the title, the
   standfirst and the sign-up; side by side they stacked and the film's height
   became an empty hole. */
.vk-media-frame--cover { position: relative; }
.vk-media-frame__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

/* Live uppercases some headings in CSS rather than typing them that way:
   "IN the News" renders as "IN THE NEWS". */
.vk-page .vk-caps,
.editor-styles-wrapper .vk-caps { text-transform: uppercase; }

/* Tracking is measured per heading, not implied by its size: the press room
   sets 27px headings on 5.4px where the same step runs on -0.94 elsewhere.
   The step's own value is the default; this is what live actually uses. */
.vk-page .vk-track--82 { letter-spacing: calc(var(--vk-root) * 0.4556); }
.vk-page .vk-track--66 { letter-spacing: calc(var(--vk-root) * 0.3667); }
.vk-page .vk-track--58 { letter-spacing: calc(var(--vk-root) * 0.3222); }
.vk-page .vk-track--54 { letter-spacing: calc(var(--vk-root) * 0.3000); }
.vk-page .vk-track--46 { letter-spacing: calc(var(--vk-root) * 0.2556); }
.vk-page .vk-track--40 { letter-spacing: calc(var(--vk-root) * 0.2222); }
.vk-page .vk-track--27 { letter-spacing: calc(var(--vk-root) * 0.1500); }
.vk-page .vk-track--16 { letter-spacing: calc(var(--vk-root) * 0.0889); }
.vk-page .vk-track--0 { letter-spacing: normal; }
.vk-page .vk-track--n6 { letter-spacing: calc(var(--vk-root) * -0.0333); }
.vk-page .vk-track--n9 { letter-spacing: calc(var(--vk-root) * -0.0500); }
.vk-page .vk-track--n11 { letter-spacing: calc(var(--vk-root) * -0.0611); }
.vk-page .vk-track--n12 { letter-spacing: calc(var(--vk-root) * -0.0667); }
.vk-page .vk-track--n13 { letter-spacing: calc(var(--vk-root) * -0.0722); }
.vk-page .vk-track--n18 { letter-spacing: calc(var(--vk-root) * -0.1000); }
.vk-page .vk-track--n25 { letter-spacing: calc(var(--vk-root) * -0.1389); }
.vk-page .vk-track--n35 { letter-spacing: calc(var(--vk-root) * -0.1944); }
.vk-page .vk-track--n63 { letter-spacing: calc(var(--vk-root) * -0.3500); }
.vk-page .vk-track--n86 { letter-spacing: calc(var(--vk-root) * -0.4778); }
.vk-page .vk-track--n94 { letter-spacing: calc(var(--vk-root) * -0.5222); }
.vk-page .vk-track--n108 { letter-spacing: calc(var(--vk-root) * -0.6000); }
.vk-page .vk-track--n115 { letter-spacing: calc(var(--vk-root) * -0.6389); }
.vk-page .vk-track--n180 { letter-spacing: calc(var(--vk-root) * -1.0000); }
.vk-page .vk-track--n252 { letter-spacing: calc(var(--vk-root) * -1.4000); }
.editor-styles-wrapper .vk-track--82 { letter-spacing: 8.2px; }
.editor-styles-wrapper .vk-track--66 { letter-spacing: 6.6px; }
.editor-styles-wrapper .vk-track--58 { letter-spacing: 5.8px; }
.editor-styles-wrapper .vk-track--54 { letter-spacing: 5.4px; }
.editor-styles-wrapper .vk-track--46 { letter-spacing: 4.6px; }
.editor-styles-wrapper .vk-track--40 { letter-spacing: 4px; }
.editor-styles-wrapper .vk-track--27 { letter-spacing: 2.7px; }
.editor-styles-wrapper .vk-track--16 { letter-spacing: 1.6px; }
.editor-styles-wrapper .vk-track--0 { letter-spacing: normal; }
.editor-styles-wrapper .vk-track--n6 { letter-spacing: -0.6px; }
.editor-styles-wrapper .vk-track--n9 { letter-spacing: -0.9px; }
.editor-styles-wrapper .vk-track--n11 { letter-spacing: -1.1px; }
.editor-styles-wrapper .vk-track--n12 { letter-spacing: -1.2px; }
.editor-styles-wrapper .vk-track--n13 { letter-spacing: -1.3px; }
.editor-styles-wrapper .vk-track--n18 { letter-spacing: -1.8px; }
.editor-styles-wrapper .vk-track--n25 { letter-spacing: -2.5px; }
.editor-styles-wrapper .vk-track--n35 { letter-spacing: -3.5px; }
.editor-styles-wrapper .vk-track--n63 { letter-spacing: -6.3px; }
.editor-styles-wrapper .vk-track--n86 { letter-spacing: -8.6px; }
.editor-styles-wrapper .vk-track--n94 { letter-spacing: -9.4px; }
.editor-styles-wrapper .vk-track--n108 { letter-spacing: -10.8px; }
.editor-styles-wrapper .vk-track--n115 { letter-spacing: -11.5px; }
.editor-styles-wrapper .vk-track--n180 { letter-spacing: -18px; }
.editor-styles-wrapper .vk-track--n252 { letter-spacing: -25.2px; }

/* Colours live uses that the first cut of the palette did not have. */
.vk-page .vk-text--near,  .editor-styles-wrapper .vk-text--near  { color: #272727; }
.vk-page .vk-text--slate, .editor-styles-wrapper .vk-text--slate { color: #555; }
.vk-page .vk-text--warm,  .editor-styles-wrapper .vk-text--warm  { color: #777270; }
/* The site's near-black navy (#2a2c37): the contact statements and the
   submit buttons. It was snapped to the primary #2a3b5a, 15 steps bluer. */
.vk-page .fw-banner .vk-text--dusk, .vk-page .vk-text--dusk, .editor-styles-wrapper .vk-text--dusk { color: #2a2c37; }
/* The OneHealth intro heading: a lighter steel blue than the accent. */
.vk-page .fw-banner .vk-text--sky, .vk-page .vk-text--sky, .editor-styles-wrapper .vk-text--sky { color: #6f94bd; }

/* The card title keeps its own colour against the theme's headings. */
.vk-page .vk-recent__card .vk-recent__card-title { color: #272727; }

/* ---- icon cards laid out icon-beside-words ------------------------------
   The source uses both arrangements. The screening benefits and the case
   management list run the icon down the left with the heading and its line
   beside it; the service cards stack the icon over a centred title. Only the
   stacked one existed, so every inline card published its icon above its
   words and the words then started at the column edge — 72 to 87px left of
   where live has them. */
.fw-icons--inline .fw-icon-card {
	display: flex;
	/* Explicitly a row. The stacked card sets `flex-direction: column`, so
	   without this the icon and the words still stacked — the card reported
	   itself as flex with a 23px gap and looked laid out, while the heading
	   sat under the icon at the column edge. */
	flex-direction: row;
	align-items: flex-start;
	gap: var(--fw-icon-gap, 24px);
	text-align: left;
}

.fw-icons--inline .fw-icon-card__icon {
	flex: 0 0 var(--fw-icon-w, 48px);
	width: var(--fw-icon-w, 48px);
	margin: 0;
}

.fw-icons--inline .fw-icon-card__icon img {
	display: block;
	width: 100%;
	/* The measured box, not the file's own shape. Left on `auto`, each
	   rasterised icon took its own aspect and the row of them came back 31,
	   58 and 64px tall against live's uniform 48. */
	height: var(--fw-icon-h, var(--fw-icon-w, 48px));
	object-fit: contain;
}

.fw-icons--inline .fw-icon-card__body {
	margin-top: 0;
	flex: 1 1 auto;
	text-align: left;
}

/* Left, not centred. Written with `:where` this lost to the stacked card's own
   centring rule and every benefit line came back centred in its column. Size
   and colour still come from the measured classes on the elements themselves. */
.fw-icons--inline .fw-icon-card__body :is(h2, h3, h4, h5, h6),
.fw-icons--inline .fw-icon-card__body p {
	text-align: left;
	margin: 0;
}

/* The card's heading is set in the accent blue at 600 on this design; the
   stacked card's grey 20px body rule was reaching these too. */
.fw-icons--inline .fw-icon-card__body p {
	color: inherit;
}

/* Measured font weights. A heading's weight is a design decision the source
   has already made — the screening cards are set at 600 where a bare <h4>
   renders 700 — and there was no way to carry it across. */
.vk-page .vk-wt--300, .editor-styles-wrapper .vk-wt--300 { font-weight: 300; }
.vk-page .vk-wt--400, .editor-styles-wrapper .vk-wt--400 { font-weight: 400; }
.vk-page .vk-wt--500, .editor-styles-wrapper .vk-wt--500 { font-weight: 500; }
.vk-page .vk-wt--600, .editor-styles-wrapper .vk-wt--600 { font-weight: 600; }
.vk-page .vk-wt--700, .editor-styles-wrapper .vk-wt--700 { font-weight: 700; }
.vk-page .vk-wt--800, .editor-styles-wrapper .vk-wt--800 { font-weight: 800; }
.vk-page .vk-wt--900, .editor-styles-wrapper .vk-wt--900 { font-weight: 900; }

/* A picture the design draws as a circle. The testimonial portraits are round
   180px avatars painted as backgrounds; published square they read as a
   different design entirely. */
.vk-img--circle img {
	border-radius: 50%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* The measure the icon-card copy is set to. Filling its cell, the service
   cards ran 396px wide against live's 317 and each dropped a line. */
.fw-icons[style*="--fw-icon-body-w"] .fw-icon-card__body {
	max-width: var(--fw-icon-body-w);
	margin-inline: auto;
}
.fw-icons--inline[style*="--fw-icon-body-w"] .fw-icon-card__body {
	margin-inline: 0;
}

/* Button sizes the source uses beyond the two shapes. Live sets "CONTACT US"
   at 18px on a 1.3 line; with only 14 and 16 available it published two points
   small. The class goes on the wrapper because that is where core/button
   serialises className, so the saved markup still matches its own save(). */
.vk-page .wp-block-button.vk-btn--17 > .wp-block-button__link { font-size: 17px; line-height: 22.1px; }
/* 18px on an 18px line, which is what live sets — not the 1.3 the 16px
   button uses. */
/* The 18px button is taller than the 16px default, not just wider-set: live
   sets 15px above and below the label rather than the default 9/13, which also
   means its label is centred instead of sitting low. Measured on two separate
   live pages so this is the size's own padding and not one button's:

     /case-management/                  CONTACT US             212x48, 15 / 15
     /seafarer-human-sustainability/    Read Full Declaration  211x49, 15.5

   Ours inherited the 16px button's 9.008 / 13.008 and came out 40 tall with
   the words low in the box. Horizontal padding is left alone -- live's two
   samples disagree on it (51.3 against 20.5), so it is not a property of the
   size. */
.vk-page .wp-block-button.vk-btn--18 > .wp-block-button__link {
	font-size: 18px;
	line-height: 18px;
	padding: 15px 18px;
}
.vk-page .wp-block-button.vk-btn--20 > .wp-block-button__link { font-size: 20px; line-height: 26px; }
.vk-page .wp-block-button.vk-btn--22 > .wp-block-button__link { font-size: 22px; line-height: 28.6px; }
.vk-page .wp-block-button.vk-btn--24 > .wp-block-button__link { font-size: 24px; line-height: 31.2px; }
/* No editor twin here: the canvas carries `.vk-page` now, so the rule above
   applies in both places from one definition. A twin left behind with the
   old 23.4px line kept fighting it. */

/* Measured column gaps. The theme's own 30px is right for most bands and wrong
   for the ones the source sets tighter — the case management benefits sit in a
   column three pixels from the photograph beside them, and 30 put every line
   of them 16px right of live. Generated per band by the composer. */
.vk-page .wp-block-columns.vk-colgap--0,
.editor-styles-wrapper .wp-block-columns.vk-colgap--0 { gap: 0px; }
.vk-page .wp-block-columns.vk-colgap--1,
.editor-styles-wrapper .wp-block-columns.vk-colgap--1 { gap: 1px; }
.vk-page .wp-block-columns.vk-colgap--2,
.editor-styles-wrapper .wp-block-columns.vk-colgap--2 { gap: 2px; }
.vk-page .wp-block-columns.vk-colgap--3,
.editor-styles-wrapper .wp-block-columns.vk-colgap--3 { gap: 3px; }
.vk-page .wp-block-columns.vk-colgap--4,
.editor-styles-wrapper .wp-block-columns.vk-colgap--4 { gap: 4px; }
.vk-page .wp-block-columns.vk-colgap--5,
.editor-styles-wrapper .wp-block-columns.vk-colgap--5 { gap: 5px; }
.vk-page .wp-block-columns.vk-colgap--6,
.editor-styles-wrapper .wp-block-columns.vk-colgap--6 { gap: 6px; }
.vk-page .wp-block-columns.vk-colgap--7,
.editor-styles-wrapper .wp-block-columns.vk-colgap--7 { gap: 7px; }
.vk-page .wp-block-columns.vk-colgap--8,
.editor-styles-wrapper .wp-block-columns.vk-colgap--8 { gap: 8px; }
.vk-page .wp-block-columns.vk-colgap--9,
.editor-styles-wrapper .wp-block-columns.vk-colgap--9 { gap: 9px; }
.vk-page .wp-block-columns.vk-colgap--10,
.editor-styles-wrapper .wp-block-columns.vk-colgap--10 { gap: 10px; }
.vk-page .wp-block-columns.vk-colgap--11,
.editor-styles-wrapper .wp-block-columns.vk-colgap--11 { gap: 11px; }
.vk-page .wp-block-columns.vk-colgap--12,
.editor-styles-wrapper .wp-block-columns.vk-colgap--12 { gap: 12px; }
.vk-page .wp-block-columns.vk-colgap--14,
.editor-styles-wrapper .wp-block-columns.vk-colgap--14 { gap: 14px; }
.vk-page .wp-block-columns.vk-colgap--16,
.editor-styles-wrapper .wp-block-columns.vk-colgap--16 { gap: 16px; }
.vk-page .wp-block-columns.vk-colgap--18,
.editor-styles-wrapper .wp-block-columns.vk-colgap--18 { gap: 18px; }
.vk-page .wp-block-columns.vk-colgap--20,
.editor-styles-wrapper .wp-block-columns.vk-colgap--20 { gap: 20px; }
.vk-page .wp-block-columns.vk-colgap--24,
.editor-styles-wrapper .wp-block-columns.vk-colgap--24 { gap: 24px; }
.vk-page .wp-block-columns.vk-colgap--26,
.editor-styles-wrapper .wp-block-columns.vk-colgap--26 { gap: 26px; }
.vk-page .wp-block-columns.vk-colgap--27,
.editor-styles-wrapper .wp-block-columns.vk-colgap--27 { gap: 27px; }
.vk-page .wp-block-columns.vk-colgap--28,
.editor-styles-wrapper .wp-block-columns.vk-colgap--28 { gap: 28px; }
.vk-page .wp-block-columns.vk-colgap--30,
.editor-styles-wrapper .wp-block-columns.vk-colgap--30 { gap: 30px; }
.vk-page .wp-block-columns.vk-colgap--32,
.editor-styles-wrapper .wp-block-columns.vk-colgap--32 { gap: 32px; }
.vk-page .wp-block-columns.vk-colgap--34,
.editor-styles-wrapper .wp-block-columns.vk-colgap--34 { gap: 34px; }
.vk-page .wp-block-columns.vk-colgap--36,
.editor-styles-wrapper .wp-block-columns.vk-colgap--36 { gap: 36px; }
.vk-page .wp-block-columns.vk-colgap--40,
.editor-styles-wrapper .wp-block-columns.vk-colgap--40 { gap: 40px; }
.vk-page .wp-block-columns.vk-colgap--44,
.editor-styles-wrapper .wp-block-columns.vk-colgap--44 { gap: 44px; }
.vk-page .wp-block-columns.vk-colgap--46,
.editor-styles-wrapper .wp-block-columns.vk-colgap--46 { gap: 46px; }
.vk-page .wp-block-columns.vk-colgap--48,
.editor-styles-wrapper .wp-block-columns.vk-colgap--48 { gap: 48px; }
.vk-page .wp-block-columns.vk-colgap--50,
.editor-styles-wrapper .wp-block-columns.vk-colgap--50 { gap: 50px; }
.vk-page .wp-block-columns.vk-colgap--56,
.editor-styles-wrapper .wp-block-columns.vk-colgap--56 { gap: 56px; }
.vk-page .wp-block-columns.vk-colgap--60,
.editor-styles-wrapper .wp-block-columns.vk-colgap--60 { gap: 60px; }
.vk-page .wp-block-columns.vk-colgap--64,
.editor-styles-wrapper .wp-block-columns.vk-colgap--64 { gap: 64px; }
.vk-page .wp-block-columns.vk-colgap--70,
.editor-styles-wrapper .wp-block-columns.vk-colgap--70 { gap: 70px; }
.vk-page .wp-block-columns.vk-colgap--72,
.editor-styles-wrapper .wp-block-columns.vk-colgap--72 { gap: 72px; }
.vk-page .wp-block-columns.vk-colgap--80,
.editor-styles-wrapper .wp-block-columns.vk-colgap--80 { gap: 80px; }
.vk-page .wp-block-columns.vk-colgap--84,
.editor-styles-wrapper .wp-block-columns.vk-colgap--84 { gap: 84px; }
.vk-page .wp-block-columns.vk-colgap--90,
.editor-styles-wrapper .wp-block-columns.vk-colgap--90 { gap: 90px; }
.vk-page .wp-block-columns.vk-colgap--96,
.editor-styles-wrapper .wp-block-columns.vk-colgap--96 { gap: 96px; }
.vk-page .wp-block-columns.vk-colgap--100,
.editor-styles-wrapper .wp-block-columns.vk-colgap--100 { gap: 100px; }
.vk-page .wp-block-columns.vk-colgap--110,
.editor-styles-wrapper .wp-block-columns.vk-colgap--110 { gap: 110px; }
.vk-page .wp-block-columns.vk-colgap--120,
.editor-styles-wrapper .wp-block-columns.vk-colgap--120 { gap: 120px; }
.vk-page .wp-block-columns.vk-colgap--130,
.editor-styles-wrapper .wp-block-columns.vk-colgap--130 { gap: 130px; }
.vk-page .wp-block-columns.vk-colgap--140,
.editor-styles-wrapper .wp-block-columns.vk-colgap--140 { gap: 140px; }
.vk-page .wp-block-columns.vk-colgap--150,
.editor-styles-wrapper .wp-block-columns.vk-colgap--150 { gap: 150px; }
.vk-page .wp-block-columns.vk-colgap--160,
.editor-styles-wrapper .wp-block-columns.vk-colgap--160 { gap: 160px; }


/* Live's inverted button: a white ground with a black label, for use on the
   dark bands where the framework's default dark button reads as a hole.
   Measured on /seafarer-human-sustainability/ at 1920: "Become a Supporter"
   is 227x53, background rgb(255,255,255), label rgb(0,0,0) at 20px, sitting
   on the #4e5c76 supporters band. Ours was the default #2a2c37 on white text,
   which is the same value as the band it sits on.

   The hover is NOT measured off live -- forcePseudoState does not drive a
   transitioned property and a real pointer pass was not run for this one, so
   it follows the site's own hover instead (#88a6c3, white label), which is
   what every other button on the rebuild does. */
.vk-page .wp-block-button.vk-btn--invert > .wp-block-button__link {
	background: #fff;
	color: #000;
}
.vk-page .wp-block-button.vk-btn--invert > .wp-block-button__link:hover {
	background: #88a6c3;
	color: #fff;
}


/* A measured spacer means the measured number, not the number plus whatever
   margin the next heading happens to carry.

   On /seafarer-human-sustainability/ live pushes each Article heading down by
   an hr.x-line of exactly 90px inside the text pane. Dropping a 90px spacer in
   put the heading 135 below the picture instead of 90: as the pane's first
   child the heading's 45px top margin had been collapsing away against the
   pane, and giving it a preceding sibling brought that margin back. The
   spacer IS the gap the design asked for, so the heading adds nothing to it. */
.fw-split__content > .wp-block-spacer + :is(h1, h2, h3, h4, h5, h6),
.fw-banner__inner > .wp-block-spacer + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
}


/* The hero film's own sign-up, made clickable.

   The Seafarer Declaration hero paints its title, standfirst and SIGN UP
   inside the Vimeo film; box.png over the top is 1920x800 with not one opaque
   pixel, and exists only to be a hit area. Live wraps that image in an anchor
   to /shs-become-a-supporter/, so clicking anywhere on the band follows it.

   The image itself is pointer-events:none, so the ANCHOR has to be the target:
   it takes the same inset:0 box and sits above the iframe, which is also what
   live does -- the film is decoration there, not a player anyone interacts
   with. Clicks on the image fall through to this, its parent. */
.vk-media-frame__overlay-link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 2;
}
/* A transparent link over a whole band is invisible to a keyboard without
   this -- live gives no focus state at all. */
.vk-media-frame__overlay-link:focus-visible {
	outline: 3px solid #88a6c3;
	outline-offset: -3px;
}


/* A link inside white band copy is white, and stays white.

   The site-wide band link is #88a6c3 going white on hover, which is right for
   a link sitting in dark copy. In a paragraph that is ALREADY white -- the
   Media Inquiries note on /press-room/ -- live leaves press@vikand.com the
   same white as the sentence around it and does not change it on hover.
   Measured there: rgb(255,255,255), no underline, no hover change. */
.vk-page .fw-banner .vk-text--white a,
.vk-page .vk-text--white a {
	color: #fff;
}
.vk-page .fw-banner .vk-text--white a:hover,
.vk-page .vk-text--white a:hover {
	color: #fff;
}

/* A small picture on a line of words — the app marks after "Available for"
   on the OneHealth hero. Centred on the line, 18px after what precedes it
   (live: 20 after the words, 18 between the marks). */
.vk-page p .vk-inline-icon { vertical-align: middle; margin-left: 14px; height: auto; }

/* The chevron behind the OneHealth hero's phone, as live draws it on the
   column's pseudo-elements: a 300px-tall band of white at half opacity from
   10% of the pane rightwards off the edge of the page, with a border-drawn
   triangle pointing left into it. Isolated so its -1 stays behind the picture
   and in front of the band's photograph; the band clips the run-off. */
.vk-page .fw-split__media.vk-decor--chevron { position: relative; isolation: isolate; }
.vk-page .fw-split__media.vk-decor--chevron::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 90%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border: 150px solid transparent;
	border-right-color: #fff;
	opacity: 0.5;
	z-index: -1;
}
.vk-page .fw-split__media.vk-decor--chevron::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 10%;
	width: 1000px;
	height: 300px;
	transform: translateY(-50%);
	background: #fff;
	opacity: 0.5;
	z-index: -1;
}
.vk-page .fw-banner:has(.vk-decor--chevron) { overflow: hidden; }

/* A split's picture the design drops on small screens (Cornerstone's
   x-hide-xs / x-hide-sm on the column): the service pages' benefit photographs
   are not on the page below 768. Hidden on the page, still in the editor. */
@media (max-width: 767px) {
	.vk-page .fw-split__media--hide-phone { display: none; }
	.vk-page .fw-split--form .fw-split__media--hide-phone { display: none; }
}
@media (max-width: 480px) {
	.vk-page .fw-split__media--hide-small { display: none; }
}
/* The same for a picture on its own (x-hide-xs on the image's wrapper). */
@media (max-width: 767px) { .vk-page .vk-hide--phone { display: none; } }
@media (max-width: 480px) { .vk-page .vk-hide--small { display: none; } }

/* ---- The phone's own sizes for a band (see banner/render.php) ----------- */
@media (max-width: 767px) {
	.fw-banner[style*="--fw-banner-pt-m"] { padding-top: var(--fw-banner-pt-m); }
	.fw-banner[style*="--fw-banner-pb-m"] { padding-bottom: var(--fw-banner-pb-m); }
	.fw-banner[style*="--fw-banner-min-m"] .fw-banner__media { min-height: var(--fw-banner-min-m); }
	/* A picture band keyed to a ratio (Lisa's strut) takes the phone's
	   measured height instead of the ratio there. */
	.fw-banner--image[style*="--fw-banner-min-m"]::before { aspect-ratio: auto; height: var(--fw-banner-min-m); }
	.fw-banner--image[style*="--fw-banner-min-m"] { min-height: 0; }
	/* Bands the design shows on one kind of screen only. */
	.vk-page .fw-banner.vk-hide--phone { display: none; }
}
@media (min-width: 768px) {
	.vk-page .fw-banner.vk-only--phone { display: none; }
}

/* ---- Phone type set per element --------------------------------------------
   Most type scales with the root on a phone (27 → 24). Where the design sets
   a size per breakpoint instead — the OneHealth hero's 50 → 30, the title
   bands' 36 → 22, the icon captions that stay 20 — the composer measures it
   at 390 and writes `vk-m--N` (font-size) and `vk-mlead--N` (line-height) on
   the block. One rule per whole pixel the site could use; the specificity
   (0,2,0) matches the type steps and these come later, so they win. */
@media (max-width: 767px) {
	.vk-page .vk-m--10 { font-size: 10px; }
	.vk-page .vk-m--11 { font-size: 11px; }
	.vk-page .vk-m--12 { font-size: 12px; }
	.vk-page .vk-m--13 { font-size: 13px; }
	.vk-page .vk-m--14 { font-size: 14px; }
	.vk-page .vk-m--15 { font-size: 15px; }
	.vk-page .vk-m--16 { font-size: 16px; }
	.vk-page .vk-m--17 { font-size: 17px; }
	.vk-page .vk-m--18 { font-size: 18px; }
	.vk-page .vk-m--19 { font-size: 19px; }
	.vk-page .vk-m--20 { font-size: 20px; }
	.vk-page .vk-m--21 { font-size: 21px; }
	.vk-page .vk-m--22 { font-size: 22px; }
	.vk-page .vk-m--23 { font-size: 23px; }
	.vk-page .vk-m--24 { font-size: 24px; }
	.vk-page .vk-m--25 { font-size: 25px; }
	.vk-page .vk-m--26 { font-size: 26px; }
	.vk-page .vk-m--27 { font-size: 27px; }
	.vk-page .vk-m--28 { font-size: 28px; }
	.vk-page .vk-m--29 { font-size: 29px; }
	.vk-page .vk-m--30 { font-size: 30px; }
	.vk-page .vk-m--31 { font-size: 31px; }
	.vk-page .vk-m--32 { font-size: 32px; }
	.vk-page .vk-m--33 { font-size: 33px; }
	.vk-page .vk-m--34 { font-size: 34px; }
	.vk-page .vk-m--35 { font-size: 35px; }
	.vk-page .vk-m--36 { font-size: 36px; }
	.vk-page .vk-m--37 { font-size: 37px; }
	.vk-page .vk-m--38 { font-size: 38px; }
	.vk-page .vk-m--39 { font-size: 39px; }
	.vk-page .vk-m--40 { font-size: 40px; }
	.vk-page .vk-m--41 { font-size: 41px; }
	.vk-page .vk-m--42 { font-size: 42px; }
	.vk-page .vk-m--43 { font-size: 43px; }
	.vk-page .vk-m--44 { font-size: 44px; }
	.vk-page .vk-m--45 { font-size: 45px; }
	.vk-page .vk-m--46 { font-size: 46px; }
	.vk-page .vk-m--47 { font-size: 47px; }
	.vk-page .vk-m--48 { font-size: 48px; }
	.vk-page .vk-m--49 { font-size: 49px; }
	.vk-page .vk-m--50 { font-size: 50px; }
	.vk-page .vk-m--51 { font-size: 51px; }
	.vk-page .vk-m--52 { font-size: 52px; }
	.vk-page .vk-m--53 { font-size: 53px; }
	.vk-page .vk-m--54 { font-size: 54px; }
	.vk-page .vk-m--55 { font-size: 55px; }
	.vk-page .vk-m--56 { font-size: 56px; }
	.vk-page .vk-m--57 { font-size: 57px; }
	.vk-page .vk-m--58 { font-size: 58px; }
	.vk-page .vk-m--59 { font-size: 59px; }
	.vk-page .vk-m--60 { font-size: 60px; }
	.vk-page .vk-mlead--12 { line-height: 12px; }
	.vk-page .vk-mlead--13 { line-height: 13px; }
	.vk-page .vk-mlead--14 { line-height: 14px; }
	.vk-page .vk-mlead--15 { line-height: 15px; }
	.vk-page .vk-mlead--16 { line-height: 16px; }
	.vk-page .vk-mlead--17 { line-height: 17px; }
	.vk-page .vk-mlead--18 { line-height: 18px; }
	.vk-page .vk-mlead--19 { line-height: 19px; }
	.vk-page .vk-mlead--20 { line-height: 20px; }
	.vk-page .vk-mlead--21 { line-height: 21px; }
	.vk-page .vk-mlead--22 { line-height: 22px; }
	.vk-page .vk-mlead--23 { line-height: 23px; }
	.vk-page .vk-mlead--24 { line-height: 24px; }
	.vk-page .vk-mlead--25 { line-height: 25px; }
	.vk-page .vk-mlead--26 { line-height: 26px; }
	.vk-page .vk-mlead--27 { line-height: 27px; }
	.vk-page .vk-mlead--28 { line-height: 28px; }
	.vk-page .vk-mlead--29 { line-height: 29px; }
	.vk-page .vk-mlead--30 { line-height: 30px; }
	.vk-page .vk-mlead--31 { line-height: 31px; }
	.vk-page .vk-mlead--32 { line-height: 32px; }
	.vk-page .vk-mlead--33 { line-height: 33px; }
	.vk-page .vk-mlead--34 { line-height: 34px; }
	.vk-page .vk-mlead--35 { line-height: 35px; }
	.vk-page .vk-mlead--36 { line-height: 36px; }
	.vk-page .vk-mlead--37 { line-height: 37px; }
	.vk-page .vk-mlead--38 { line-height: 38px; }
	.vk-page .vk-mlead--39 { line-height: 39px; }
	.vk-page .vk-mlead--40 { line-height: 40px; }
	.vk-page .vk-mlead--41 { line-height: 41px; }
	.vk-page .vk-mlead--42 { line-height: 42px; }
	.vk-page .vk-mlead--43 { line-height: 43px; }
	.vk-page .vk-mlead--44 { line-height: 44px; }
	.vk-page .vk-mlead--45 { line-height: 45px; }
	.vk-page .vk-mlead--46 { line-height: 46px; }
	.vk-page .vk-mlead--47 { line-height: 47px; }
	.vk-page .vk-mlead--48 { line-height: 48px; }
	.vk-page .vk-mlead--49 { line-height: 49px; }
	.vk-page .vk-mlead--50 { line-height: 50px; }
	.vk-page .vk-mlead--51 { line-height: 51px; }
	.vk-page .vk-mlead--52 { line-height: 52px; }
	.vk-page .vk-mlead--53 { line-height: 53px; }
	.vk-page .vk-mlead--54 { line-height: 54px; }
	.vk-page .vk-mlead--55 { line-height: 55px; }
	.vk-page .vk-mlead--56 { line-height: 56px; }
	.vk-page .vk-mlead--57 { line-height: 57px; }
	.vk-page .vk-mlead--58 { line-height: 58px; }
	.vk-page .vk-mlead--59 { line-height: 59px; }
	.vk-page .vk-mlead--60 { line-height: 60px; }
	.vk-page .vk-mlead--61 { line-height: 61px; }
	.vk-page .vk-mlead--62 { line-height: 62px; }
	.vk-page .vk-mlead--63 { line-height: 63px; }
	.vk-page .vk-mlead--64 { line-height: 64px; }
	.vk-page .vk-mlead--65 { line-height: 65px; }
	.vk-page .vk-mlead--66 { line-height: 66px; }
	.vk-page .vk-mlead--67 { line-height: 67px; }
	.vk-page .vk-mlead--68 { line-height: 68px; }
	.vk-page .vk-mlead--69 { line-height: 69px; }
	.vk-page .vk-mlead--70 { line-height: 70px; }
	.vk-page .vk-mlead--71 { line-height: 71px; }
	.vk-page .vk-mlead--72 { line-height: 72px; }
	.vk-page .vk-mlead--73 { line-height: 73px; }
	.vk-page .vk-mlead--74 { line-height: 74px; }
	.vk-page .vk-mlead--75 { line-height: 75px; }
	.vk-page .vk-mlead--76 { line-height: 76px; }
	.vk-page .vk-mlead--77 { line-height: 77px; }
	.vk-page .vk-mlead--78 { line-height: 78px; }
	.vk-page .vk-mlead--79 { line-height: 79px; }
	.vk-page .vk-mlead--80 { line-height: 80px; }
	.vk-page .vk-mlead--81 { line-height: 81px; }
	.vk-page .vk-mlead--82 { line-height: 82px; }
	.vk-page .vk-mlead--83 { line-height: 83px; }
	.vk-page .vk-mlead--84 { line-height: 84px; }
	.vk-page .vk-mlead--85 { line-height: 85px; }
	.vk-page .vk-mlead--86 { line-height: 86px; }
	.vk-page .vk-mlead--87 { line-height: 87px; }
	.vk-page .vk-mlead--88 { line-height: 88px; }
	.vk-page .vk-mlead--89 { line-height: 89px; }
	.vk-page .vk-mlead--90 { line-height: 90px; }
}


/* ---- The process wave -----------------------------------------------------
   RESTORED 2026-09-14. Measured 10 Sep on the old Cornerstone site and lost
   from this file between backups 8 and 9 on 11 Sep (a local copy pushed over
   the server). Recovered verbatim from vikand-blocks.css.bak8-20260911-lisa.

   The design draws dotted-line.svg as a BACKGROUND LAYER on the band --
   1905x200 at z-index 1, its centre on 2288 -- and the process circles
   (2202-2382, centre 2292) sit in front of it, so the dashes disappear behind
   each photograph. Ours placed the same artwork as an <img> in the flow: a
   band of its own above the circles, with a 65px spacer under it, touching
   nothing.

   The figure keeps its image (so the URL stays in the page, not in this
   stylesheet) but takes no height, and the artwork is hung from it full-bleed
   and centred on the circle row: 65px of spacer plus half of the 180px circle
   is 155px below where the figure sits. Used on case-management and
   guest-medical-screening-service, which are built the same way. */
.fw-banner__inner > figure:has(> img[src*="vk-dotted-line"]) {
	position: relative;
	z-index: 0;
	width: 100vw;
	max-width: none;
	margin: 0 0 0 calc(50% - 50vw);
	height: 0;
	overflow: visible;
	pointer-events: none;
}
.fw-banner__inner > figure:has(> img[src*="vk-dotted-line"]) > img {
	position: absolute;
	left: 0;
	top: 155px;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
	max-width: none;
}
/* The cards paint over the wave rather than under it. */
.fw-banner__inner > figure:has(> img[src*="vk-dotted-line"]) ~ .fw-content-cards {
	position: relative;
	z-index: 1;
}